/* =====================================================================
   Page Atelier (maquette du 06/10/2026). On entre dans l'atelier, on
   ouvre des tiroirs, on construit son projet sur la page blanche.
   Première passe (06/10/2026) : AT-1 à AT-5, chaque règle nouvelle
   porte son numéro.
   ===================================================================== */

/* ---------- 1. l'entrée : la pièce, la table, la lampe ---------- */
/* S4 (finitions du 07/10/2026) : le hero va jusqu'au bas de l'écran (plus de bande crème à 1920 x 1080) ; le plafond de 980 px ne
   tient plus que pour les fenêtres plus hautes que les trois quarts de leur largeur (au-delà, la table grossirait sans fin) */
.entree{position:relative;height:max(720px,min(100vh,max(980px,75vw)));height:max(720px,min(100svh,max(980px,75vw)));overflow:hidden;background:#17120e;isolation:isolate}
.entree__piece{position:absolute;inset:0;transform-origin:62% 58%;will-change:transform}
.entree__piece>*{position:absolute}
/* stabilité (08/10/2026, nuit, relevé du référencement : décalage de mise en page de 0,77 à 1440) : avant que le script pose sa
   taille exacte (placer : la photo couvre la section, centrée), le fond couvre déjà la section de la même façon ; le script écrit
   ensuite left, top, width et height en ligne, qui l'emportent : aucune image ne se redimensionne au chargement */
.entree__fond{left:0;top:0;right:0;bottom:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform-origin:0 0}
.entree__table{left:0;top:0;transform-origin:0 0}
.entree__table>img{position:absolute;inset:0;width:100%;height:100%}
.entree__cable{position:absolute;width:3px;margin-left:-1.5px;background:linear-gradient(180deg,#141210,#2a2622);border-radius:2px}
.entree__feuille{position:absolute;left:0;top:0;transform-origin:0 0}
.entree__feuille img{display:block;width:100%;height:100%;filter:drop-shadow(1px 2px 1.5px rgba(40,24,8,.35))}
/* S2 (finitions du 07/10/2026) : le calque de la lampe est découpé sur la silhouette réelle de l'abat-jour, plus par un polygone
   qui emportait un morceau de planche chaude, coupé net, sur la feuille. Silhouette relevée sur atelier-table-seule (1376 x 768) :
   le bord gauche rangée par rangée (de y 68 à 141, lissé sur trois rangées), le bord droit en miroir sur l'axe de la lampe (x 702 ;
   à droite, le mur clair trompe la mesure), la lèvre fermée sous l'ouverture (y 143) ; tracé rentré de 0,7 pixel de la photo et
   adouci d'un demi-pixel (flou dans le masque), pour que le liseré chaud des pixels de bord ne se voie pas sur la feuille. */
.entree__lampe{position:absolute;inset:0;width:100%;height:100%;--masque-lampe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1376 768' preserveAspectRatio='none'%3E%3Cfilter id='f'%3E%3CfeGaussianBlur stdDeviation='.55'/%3E%3C/filter%3E%3Cpath filter='url(%23f)' d='M688.7 56 688.7 68 688.4 71 687.7 74 687 77 686.7 80 685.7 83 685.7 86 685.4 89 684.4 92 682.4 95 679.7 98 668.4 101 660 104 653.4 107 647.7 110 645 113 643.7 116 643 119 642 122 641 125 640.7 128 639.7 131 639.7 133 639.4 134 639.4 135 640 136 642 137 645.4 138 650 139 657 140 662.4 141 663.4 141.3 680 142.8 702 143.2 724 142.8 740.6 141.3 741.6 141 747 140 754 139 758.6 138 762 137 764 136 764.6 135 764.6 134 764.3 133 764.3 131 763.3 128 763 125 762 122 761 119 760.3 116 759 113 756.3 110 750.6 107 744 104 735.6 101 724.3 98 721.6 95 719.6 92 718.6 89 718.3 86 718.3 83 717.3 80 717 77 716.3 74 715.6 71 715.3 68 715.3 56Z'/%3E%3C/svg%3E");-webkit-mask:var(--masque-lampe) 0 0/100% 100% no-repeat;mask:var(--masque-lampe) 0 0/100% 100% no-repeat}
.entree__ampoule{position:absolute;border-radius:50%;background:radial-gradient(closest-side,#fff8e6,#ffd98f 45%,rgba(255,190,90,0));opacity:0;transform:scale(.6)}
.entree__halo{inset:0;mix-blend-mode:screen;opacity:0;background:radial-gradient(ellipse 36% 46% at var(--hx,66%) var(--hy,22%),rgba(255,196,120,.42),rgba(255,180,100,.16) 45%,rgba(255,170,90,0) 75%)}
.entree__nuit{inset:0;background:radial-gradient(ellipse 60% 70% at var(--hx,66%) var(--hy,30%),rgba(14,11,9,.74),rgba(8,7,10,.92));opacity:1}
.entree__voile{inset:0;background:linear-gradient(90deg,rgba(18,12,7,.78) 0%,rgba(18,12,7,.56) 30%,rgba(18,12,7,.12) 52%,rgba(18,12,7,0) 64%),linear-gradient(0deg,rgba(18,12,7,.35),rgba(18,12,7,0) 30%)}
/* l'allumage : l'ampoule hésite, puis la pièce prend sa lumière */
.allume .entree__ampoule{animation:ampoule .5s steps(1) forwards}
@keyframes ampoule{0%{opacity:.25;transform:scale(.8)}20%{opacity:1;transform:scale(1.05)}35%{opacity:.45}55%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
.allume .entree__halo{opacity:1;transition:opacity 1.2s var(--entree) .3s}
.allume .entree__nuit{opacity:0;transition:opacity 1.8s cubic-bezier(.3,.1,.3,1) .35s}
.allume .entree__piece{animation:avance 11s cubic-bezier(.2,.6,.3,1) .6s forwards}
@keyframes avance{from{transform:scale(1)}to{transform:scale(1.05)}}
.entree__texte{position:absolute;z-index:3;left:var(--bord);top:50%;transform:translateY(-44%);width:min(600px,44vw);color:#fff}
.entree__verbe{font-size:clamp(34px,2.8vw,42px);color:var(--or);transform:rotate(-3deg);transform-origin:left;margin-bottom:6px}
.entree__h1{font:800 clamp(36px,3.7vw,54px)/1.08 var(--titre);letter-spacing:-.035em;color:#fff;text-wrap:balance;text-shadow:0 2px 24px rgba(10,6,2,.35)}
.entree__feuille{overflow:visible}
.entree__def{margin-top:20px;font:500 clamp(17px,1.3vw,19px)/1.55 var(--sans);color:rgba(255,248,236,.9);max-width:32em}
.entree__texte .btn{margin-top:28px}
@media (max-width:767.98px){
  .entree{height:max(720px,100svh)}   /* S4 : jusqu'au bas de l'écran (plus de bande crème à 412 x 915) */
  .entree__voile{background:linear-gradient(180deg,rgba(18,12,7,.82) 0%,rgba(18,12,7,.6) 42%,rgba(18,12,7,.05) 62%,rgba(18,12,7,0) 72%)}
  .entree__texte{left:20px;right:20px;top:96px;transform:none;width:auto}
  .entree__h1{font-size:clamp(30px,8.4vw,38px)}
  .entree__def{font-size:16px;margin-top:12px}
  .entree__texte .btn{margin-top:18px}
  .entree__verbe{font-size:30px}
}
/* S4 (finitions du 07/10/2026) : une tablette en portrait prend la composition du téléphone (texte en haut, table dessous, même règle
   dans page.js), à la taille d'une tablette : à 768, le paragraphe ne se pose plus sur la feuille et la pierre, et le titre,
   sur toute la largeur, ne laisse plus « logiciels » seul sur sa ligne */
/* P3 : 1 100 gardé, la page lit le même seuil pour composer la scène (page.js, mob) : bascule propre à la scène */
@media (min-width:768px) and (max-width:1099.98px) and (orientation:portrait){
  .entree{height:max(720px,100svh)}
  .entree__voile{background:linear-gradient(180deg,rgba(18,12,7,.8) 0%,rgba(18,12,7,.62) 40%,rgba(18,12,7,.05) 58%,rgba(18,12,7,0) 68%)}
  .entree__texte{left:max(32px,5vw);right:max(32px,5vw);top:118px;transform:none;width:auto}
  .entree__h1{font-size:clamp(38px,5.2vw,50px)}
  .entree__def{margin-top:16px}
  .entree__texte .btn{margin-top:22px}
}

/* ---------- AT-1 : le fil de la lampe, la nuit, « Civik-ia » qui veille ----------
   Tout se joue en transform et opacity ; un filtre seulement sur le fil
   (petit élément) ; aucune image en plus : la nuit est un canevas à demi
   résolution peint une fois par taille d'écran. */
.entree__piece>i,.entree__soir,.entree__dessus{pointer-events:none}
.entree__soir{inset:0;width:100%;height:100%;opacity:0;will-change:opacity;transition:opacity 1s cubic-bezier(.3,.1,.3,1) .22s}
.entree.eteint .entree__soir{opacity:1;transition:opacity .42s cubic-bezier(.2,.6,.3,1)}
.entree__voile{transition:opacity .9s ease}
.entree.eteint .entree__voile{opacity:.5;transition:opacity 1.2s ease .2s}
/* l'ampoule éteinte : grise, sous le bord de l'abat-jour */
.entree__eteinte{position:absolute;overflow:visible;opacity:1}   /* AT-8 : un dessin SVG calé sur la photo (ampoule éteinte et intérieur de l'abat-jour) */
.allume .entree__eteinte{animation:eteinte .5s steps(1) forwards}
@keyframes eteinte{0%{opacity:.8}20%{opacity:0}35%{opacity:.55}55%{opacity:0}100%{opacity:0}}
.entree.eteint .entree__eteinte{animation:none;opacity:1}
.entree.rallume .entree__eteinte{animation:eteinte2 .42s steps(1) forwards}
@keyframes eteinte2{0%{opacity:.75}25%{opacity:0}40%{opacity:.5}60%{opacity:0}100%{opacity:0}}
/* la lampe rallumée : la même courbe qu'au chargement, plus courte */
.entree.eteint .entree__ampoule{animation:none;opacity:0}
.entree.rallume .entree__ampoule{animation:ampoule2 .42s steps(1) forwards}
@keyframes ampoule2{0%{opacity:.3;transform:scale(.85)}25%{opacity:1;transform:scale(1.04)}40%{opacity:.5}60%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
.entree.eteint .entree__halo{opacity:0;transition:opacity .12s}
.entree.rallume .entree__halo{transition:opacity .8s var(--entree) .2s}
/* le reflet de lune sur la feuille de la planche (posé sur la feuille, en perspective) */
.entree__reflet{position:absolute;left:0;top:0;width:931px;height:674px;transform-origin:0 0;opacity:0;will-change:opacity;background:linear-gradient(116deg,rgba(160,188,236,0) 16%,rgba(160,188,236,.13) 33%,rgba(160,188,236,.05) 47%,rgba(160,188,236,0) 61%),rgba(120,145,195,.03);transition:opacity .5s ease}   /* sans mode de fusion : moins cher dans Safari, presque le même rendu sur la nuit */
.entree.eteint .entree__reflet{opacity:1;transition:opacity 1.6s ease .3s}
/* le fil : un vrai bouton, posé sur la cordelette ; la cordelette bat lentement, balance après chaque tirage */
.fil{position:absolute;left:0;top:0;width:64px;margin-left:-32px;padding:0;border-radius:22px;pointer-events:auto;cursor:pointer;background:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;clip-path:inset(0 -90px -90px -90px)}   /* AT-8 : plus large (le curseur devient une main à une trentaine de pixels) ; rien ne dépasse au-dessus de la douille */
.fil:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px rgba(0,0,145,.55)}
.fil__air,.fil__penche,.fil__balancier,.fil__tire{position:absolute;left:50%;top:0;display:block;transform-origin:0 0}
.fil__penche{transition:transform .55s cubic-bezier(.3,.7,.3,1)}
@property --air{syntax:'<angle>';inherits:true;initial-value:0deg}
.fil{--air:var(--air-jour,.6deg);transition:--air .9s ease}
.entree.eteint .fil,.entree:not(.allume) .fil{--air:var(--air-nuit,.6deg)}
.fil.proche{--air:0deg}
.fil__air{animation:fil-air 4.6s ease-in-out 1 both}   /* P5 (19/10/2026, critère 2.2.2) : un balancement de l'air (4,6 s), puis le repos */
.fil__balancier{will-change:transform}
@keyframes fil-air{0%,100%{transform:rotate(calc(var(--air,.6deg) * -1))}50%{transform:rotate(var(--air,.6deg))}}
.entree.hors-vue .fil__air{animation-play-state:paused}
.fil__svg{position:absolute;top:0;display:block;overflow:visible;transition:filter .45s ease}
.entree:not(.allume) .fil__svg,.entree.eteint .fil__svg{filter:brightness(.42) saturate(.55)}
.fil__lumiere{transition:opacity .3s}
/* AT-8 : (a) un reflet qui court le long du fil et accroche la bague, toutes les 5,6 s ; (b) la perle qui brille quand le pointeur approche */
.fil__lumieres,.fil__lune{position:absolute;left:0;top:0;transition:opacity .5s ease}
/* AT-11 : la nuit, le reflet qui court continue, plus discret */
.entree.eteint .fil__lumieres,.entree:not(.allume) .fil__lumieres{opacity:.42}
/* AT-11 (a) : un reflet franc toutes les 3,6 s ; il descend le fil (0,85 s), la bague de laiton brille, puis la perle, chacune une demi-seconde */
/* S4 (finitions du 07/10/2026) : le reflet est joué par le script, en pixels (page.js, courirReflet) : en CSS, ses images clés en
   var(--fl) restaient figées à 80 px dans le compositeur de Chrome, et le reflet passait sous la perle sur téléphone */
.fil__reflet{position:absolute;left:calc(var(--fw,2px) / -2 - 1px);top:0;width:calc(var(--fw,2px) + 2px);height:26px;border-radius:9px;background:linear-gradient(180deg,rgba(255,253,245,0),rgba(255,253,245,.92) 38%,#fff 50%,rgba(255,253,245,.92) 62%,rgba(255,253,245,0));opacity:0}
.fil__eclat{position:absolute;left:calc(var(--fbw,8px) * -.5);top:calc(var(--fb,80px) - 2px);width:var(--fbw,8px);height:calc(var(--fbw,8px) * .42 + 4px);border-radius:3px;background:radial-gradient(ellipse at 40% 42%,#fff,rgba(255,240,190,.75) 40%,rgba(255,236,170,0) 78%);opacity:0;animation:fil-eclat 3.6s linear 2.6s 1}
@keyframes fil-eclat{0%,21%{opacity:0}25%{opacity:1}35%,100%{opacity:0}}
.fil__perle-eclat{position:absolute;left:calc(var(--fpw,8px) * -.55);top:calc(var(--fp,90px) - var(--fph,14px) * .55);width:calc(var(--fpw,8px) * 1.1);height:calc(var(--fph,14px) * 1.1);border-radius:50%;background:radial-gradient(ellipse at 36% 32%,#fff 0,rgba(255,246,222,.9) 22%,rgba(255,226,170,.38) 50%,rgba(255,220,160,0) 76%);opacity:0;animation:fil-perle 3.6s linear 2.6s 1}
@keyframes fil-perle{0%,26%{opacity:0}31%{opacity:1}42%,100%{opacity:0}}
/* AT-11 : la perle garde un point de lumière fixe, un vernis qui accroche la lampe */
.fil__point{position:absolute;left:calc(var(--fpw,8px) * -.3);top:calc(var(--fp,90px) - var(--fph,14px) * .36);width:calc(var(--fpw,8px) * .3);height:calc(var(--fph,14px) * .22);border-radius:50%;background:radial-gradient(closest-side,#fffdf6,rgba(255,250,236,.55) 60%,rgba(255,250,236,0));transform:rotate(-18deg)}
.fil__brille{position:absolute;left:calc(var(--fpw,8px) * -.5);top:calc(var(--fp,90px) - var(--fph,14px) * .5);width:var(--fpw,8px);height:var(--fph,14px);border-radius:50%;background:radial-gradient(ellipse at 34% 28%,#fffaf0 0,rgba(255,236,196,.85) 18%,rgba(255,214,150,.32) 45%,rgba(255,214,150,0) 74%);opacity:0;transition:opacity .45s ease}
.fil.proche .fil__brille,.fil:focus-visible .fil__brille{opacity:1}
.entree.hors-vue .fil__eclat,.entree.hors-vue .fil__perle-eclat{animation-play-state:paused}   /* S4 : le reflet est mis en pause par le script */
/* AT-11 (d) : lampe éteinte, un reflet de lune sur le fil (côté verrière) et sur la perle, pour qu'on les trouve encore */
.fil__lune{opacity:0}
.entree.eteint .fil__lune,.entree:not(.allume) .fil__lune{opacity:1;transition:opacity 1.2s ease .3s}
.fil__lune-fil{position:absolute;left:calc(var(--fw,2px) / -2 - .2px);top:2px;width:.9px;height:calc(var(--fl,80px) - 3px);border-radius:1px;background:linear-gradient(180deg,rgba(176,200,242,0),rgba(176,200,242,.75) 18%,rgba(176,200,242,.6) 82%,rgba(176,200,242,0))}
.fil__lune-perle{position:absolute;left:calc(var(--fpw,8px) * -.42);top:calc(var(--fp,90px) - var(--fph,14px) * .34);width:calc(var(--fpw,8px) * .32);height:calc(var(--fph,14px) * .5);border-radius:50%;background:radial-gradient(closest-side,rgba(205,222,252,.95),rgba(176,200,242,.45) 60%,rgba(176,200,242,0))}
/* AT-8 (c), AT-11 : « tirez », à la première visite ; il s'écrit à la plume : le mot de gauche à droite (0,6 s), puis le trait vers la perle.
   Le fil pend devant la feuille blanche : le mot prend l'encre de la plume (une encre crème n'y laissait rien lire) */
.fil__invite{position:absolute;display:flex;align-items:flex-start;gap:1px;pointer-events:none;font:600 18px/1 var(--main);color:rgba(22,32,92,.86);opacity:0;transition:opacity .2s ease}
.fil__invite svg{display:block;width:30px;height:17px;margin-top:-1px;overflow:visible}
.fil__mot,.fil__trait{display:inline-block;overflow:hidden;padding:1px 2px 3px}
.fil__mot>span,.fil__trait>span{display:inline-block}
.fil__mot{transform:translateX(-101%)}.fil__mot>span{transform:translateX(101%)}
.fil__trait{transform:translateX(101%)}.fil__trait>span{transform:translateX(-101%)}
.fil__invite.vu{opacity:1}
.fil__invite.vu .fil__mot,.fil__invite.vu .fil__mot>span{transform:none;transition:transform .6s cubic-bezier(.42,.08,.58,.92)}
.fil__invite.vu .fil__trait,.fil__invite.vu .fil__trait>span{transform:none;transition:transform .36s cubic-bezier(.3,.1,.4,1) .62s}
.fil__invite.part{opacity:0;transition:opacity .5s ease}
.entree.eteint .fil__lumiere,.entree:not(.allume) .fil__lumiere{opacity:0}
/* AT-14 (quatrième passe, 07/10/2026) : lampe allumée, « Civik-ia » est exactement le Civik-ia du logo de la barre : « Civik- » en
   bleu marine #000091, « ia » en bleu ciel #2b6fd6, en Poppins comme le reste du titre ; sans liseré, sans lueur, sans ombre portée
   (l'ombre du titre ne descend pas sur le mot), sans fond ; rien n'est ajouté sur le mur pour compenser (décision de Thibaut, le
   contraste réel est mesuré et écrit dans les notes). Les variantes ?nom=1, ?nom=2 et ?nom=3 et leurs couleurs sont sorties du code.
   Lampe éteinte, rien ne change : la lueur de la troisième passe (AT-10) reste. */
.insecable{white-space:nowrap}
.marque-h1{position:relative;color:#000091;text-shadow:none;transition:color .8s ease}
.marque-h1 b{font-weight:inherit;color:#2b6fd6;transition:color .8s ease}
.entree.posee [data-entree]{transition-delay:0s}   /* l'entrée faite, la nuit ne doit plus attendre le retard de l'entrée */
/* le reste du titre baisse d'un ton par l'opacité de ses mots (pas de couleur animée : les mots sont masqués, les repeindre coûte) */
.entree.posee .entree__h1 .w>i{transition-delay:0s}
.entree.eteint .entree__h1 .w>i{opacity:.8}
.entree.eteint .entree__h1 .marque-h1 .w>i{opacity:1}
/* AT-13 : on arrive dans la nuit ; le verbe et la phrase ne baissent qu'une fois entrés (sinon ils paraîtraient avant leur entrée) */
.entree.eteint .entree__verbe.vu{opacity:.62}
.entree.eteint .entree__def.vu{opacity:.76}
/* la nuit : « Civik-ia » veille, comme une enseigne ; AT-10 : phosphorescente, plus lumineuse, presque blanc bleuté au cœur de la
   lettre, une lumière pâle qui déborde deux à trois fois plus loin sur la pierre, dégressive, et respire très lentement (6 s) ;
   jamais un néon : pas de contour dur, pas de couleur saturée. */
.entree.eteint .marque-h1{color:#f2f7ff}
.entree.eteint .marque-h1 b{color:#deebff}
.marque-h1__lueur{position:absolute;left:0;top:0;white-space:nowrap;pointer-events:none;opacity:0;will-change:opacity;transition:opacity .5s ease;text-shadow:0 0 2px rgba(246,250,255,.8),0 0 9px rgba(226,237,255,.6),0 0 26px rgba(196,218,255,.44),0 0 66px rgba(172,201,250,.3),0 0 150px rgba(160,192,245,.2)}
.marque-h1__souffle{display:inline-block;will-change:opacity}
.entree.eteint .marque-h1__souffle{animation:lueur-souffle 6s ease-in-out 2.2s 1}   /* P5 (critère 2.2.2) : une respiration, puis la lueur fixe */
@keyframes lueur-souffle{0%,100%{opacity:1}50%{opacity:.74}}
.entree.hors-vue .marque-h1__souffle{animation-play-state:paused}
/* la copie porte la lueur ; elle passe sous les vraies lettres (Safari ne dessine pas l'ombre d'un texte transparent) */
.marque-h1__lueur{z-index:-1;color:#f7f9ff}
.marque-h1__lueur .w{-webkit-mask-image:none !important;mask-image:none !important}
.marque-h1__lueur .w>i{transform:none !important;opacity:1 !important;filter:none !important;transition:none !important}
.entree.eteint .marque-h1__lueur{opacity:1;transition:opacity 1.6s ease .35s}
/* AT-13 : à l'arrivée, la lueur attend que le titre soit écrit et calé (classe « posee », 3,2 s) : elle ne précède pas les lettres */
.entree.eteint:not(.posee) .marque-h1__lueur{opacity:0}
/* le dessin au crayon sur la feuille de la planche (AT-1 bis) */
.entree__dessin{position:absolute;left:0;top:0;width:931px;height:100%;overflow:visible;transition:opacity 1s ease}   /* S3 : la hauteur du papier (501 px) ; le dessin garde ses proportions (viewBox 931 x 674, centré) */
.entree__dessin.gomme{opacity:0}

/* ---------- 2. les tiroirs ---------- */
.meuble{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.4vw,64px);align-items:start}
.meuble__corps{position:relative}
.meuble__trait{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.meuble__tiroirs{position:relative;display:grid;gap:12px;padding:58px 30px 76px}
/* AT-29 (sixième passe, 08/10/2026) : chaque tiroir est un volume plein, dans l'ordre réel de profondeur.
   - L'ordre ne change jamais pendant une ouverture ou une fermeture : un tiroir passe toujours devant ceux du dessous (--z-tiroir,
     posé par la page : le premier en haut, le plus haut) ; un tiroir tiré descend vers le visiteur et ne peut couvrir que les tiroirs
     du dessous ; il les couvre jusqu'à la fin de sa fermeture (avant, il passait derrière celui du dessous dès le clic).
   - La façade est opaque : le dégradé d'avant (à 92 %), composé une fois pour toutes sur le crème de la page (#f7f4ed) ; fermée, elle
     est la même (mesuré : 1 ou 2 niveaux sur 255 d'arrondi, 7 au plus au bord de quelques traits) ; tirée, on ne voit plus au travers ni le tiroir du dessous ni le montant du meuble. */
.tiroir{position:relative;display:block;width:100%;height:clamp(84px,8vw,106px);text-align:left;-webkit-tap-highlight-color:transparent;z-index:var(--z-tiroir,auto)}
.tiroir__face{position:absolute;inset:0;z-index:2;display:block;border-radius:6px;background:linear-gradient(180deg,rgb(254.36,251.36,243.44),rgb(246.08,240.32,226.88));box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 18px 26px -10px rgba(40,26,10,0);transition:transform .7s var(--entree),box-shadow .7s var(--entree)}
/* AT-29 : l'ombre du tiroir tiré tombe sur la façade des tiroirs du dessous et suit la façade image par image (avant, elle paraissait
   d'un coup au clic, sous une façade encore fermée, et disparaissait d'un coup à la fermeture, la façade encore sortie : les deux
   listes d'ombres n'étaient pas de même forme) ; fermée et ouverte, les ombres sont les mêmes qu'avant */
.tiroir__trait{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tiroir__etiquette{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-width:44%;padding:6px 16px 4px;text-align:center;font:600 clamp(22px,2vw,28px)/1.05 var(--main);color:var(--plume);background:#fffdf6;border-radius:3px;box-shadow:0 0 0 1px rgba(22,32,92,.28),0 2px 3px rgba(60,40,10,.12);white-space:nowrap}
/* AT-29 : le dedans n'apparaît plus en fondu (il était à demi transparent pendant l'ouverture et la fermeture) ; il est toujours plein,
   caché derrière la façade opaque quand le tiroir est fermé (replié dans le bas de la façade), découvert par elle quand elle sort ; son
   mouvement (il se déplie en même temps que la façade descend) est le même qu'avant */
.tiroir__dedans{position:absolute;left:2.5%;right:2.5%;top:-2px;height:60px;z-index:1;transform:translateY(6px) scaleY(.4);transform-origin:50% 100%;transition:transform .7s var(--entree)}
.tiroir__dedans svg{width:100%;height:100%;overflow:visible}
/* AT-29 : plus de z-index propre au tiroir ouvert (l'ordre de profondeur est fixe, --z-tiroir) */
.tiroir[aria-selected="true"] .tiroir__face{transform:translateY(46px) scale(1.035);box-shadow:0 1px 0 rgba(255,255,255,0) inset,0 18px 26px -10px rgba(40,26,10,.4)}
.tiroir[aria-selected="true"] .tiroir__dedans{transform:none}
.tiroir:focus-visible{outline:none}
.tiroir:focus-visible .tiroir__face{outline:3px solid var(--focus);outline-offset:3px}
.tiroir:active .tiroir__face{transform:scale(.985)}
.tiroir[aria-selected="true"]:active .tiroir__face{transform:translateY(46px) scale(1.02)}
@media (hover:hover){.tiroir:not([aria-selected="true"]):hover .tiroir__face{transform:translateY(5px)}}
.meuble__invite{position:absolute;right:6%;top:6px;font-size:26px;transform:rotate(-4deg);opacity:0;transition:opacity .8s var(--entree)}
.meuble.dessine .meuble__invite{opacity:.8}
.meuble.ouvert .meuble__invite{opacity:0}
.contenus{position:relative;min-height:420px}
.contenu{background:var(--papier);border:0;border-radius:var(--r-carte);padding:clamp(24px,3vw,32px);box-shadow:var(--o-pose)}   /* P3 : une carte (rayon 18, 32 px, ombre posée) */
.contenu.entre{animation:sort .7s var(--entree)}
@keyframes sort{from{opacity:0;transform:translateY(-14px) scale(.985);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
.contenu__titre{font:800 clamp(26px,2.4vw,34px)/1.1 var(--titre);color:var(--bleu);letter-spacing:-.03em}
.contenu dl{margin-top:14px}
.contenu dt{margin-top:16px;font:var(--t-repere);letter-spacing:var(--ls-repere);text-transform:uppercase;color:var(--or-txt)}
.contenu dd{margin-top:4px;font-size:16px;line-height:1.55;color:var(--encre)}
.contenu .btn{margin-top:26px}
.contenu__grand{margin-top:16px;font:700 clamp(22px,2vw,28px)/1.25 var(--titre);color:var(--bleu-2);letter-spacing:-.02em}
.contenu>p:not([class]){margin-top:14px;font-size:16.5px;color:var(--encre-2);line-height:1.6}
/* P3 : 900 gardé, la page lit le même seuil (page.js, hauteur des contenus) : bascule propre au composant */
@media (max-width:900px){.meuble{grid-template-columns:1fr}.contenus{min-height:0}.meuble__tiroirs{padding:50px 20px 66px}}
/* AT-16 (quatrième passe) : sur téléphone, la fiche sort du tiroir ouvert et se place juste sous sa façade ; la place lui est faite par une
   marge sous le tiroir (--fiche-place, calculée par la page), les tiroirs suivants descendent d'autant. La fiche déborde un peu le meuble
   (une feuille posée devant lui), glisse hors du tiroir à l'ouverture (révélée du haut vers le bas) et y rentre à la fermeture ; une
   croix la referme. Sur ordinateur, la colonne de droite et ses règles restent les mêmes. */
.contenu__fermer{display:none}
@media (max-width:767.98px){
  .meuble{position:relative;gap:0}
  .contenus{position:static}
  /* AT-29 : sur téléphone aussi, l'ordre de profondeur est fixe ; la fiche d'un tiroir (--z-fiche, posé par la page) passe sous son
     tiroir et devant les tiroirs du dessous, à l'ouverture comme quand elle rentre */
  .tiroir{margin-bottom:var(--fiche-place,0px);transition:none}
  .contenu{position:absolute;left:2px;right:2px;top:var(--fiche-haut,0px);z-index:var(--z-fiche,2);padding:24px 20px 22px;box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 22px 36px -16px rgba(40,26,10,.5),0 2px 4px rgba(60,40,10,.08)}
  .contenu.entre{animation:none}   /* la sortie de la fiche est jouée par la page, avec le tiroir (page.js, ouvrir) */
  .contenu.rentre{animation:fiche-rentre .22s cubic-bezier(.4,0,.7,.2) forwards}   /* AT-29 : elle reste devant les tiroirs du dessous en rentrant */
  .contenu__titre{padding-right:44px}
  .contenu__fermer{display:grid;place-items:center;position:absolute;top:8px;right:8px;width:44px;height:44px;border-radius:50%;color:var(--bleu);-webkit-tap-highlight-color:transparent}
  .contenu__fermer svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
  .contenu__fermer:active{transform:scale(.92)}
}
/* AT-29 : la fiche rentre dans son tiroir sans fondu (l'opacité de 1 à 0 laissait voir le meuble au travers) : la découpe suffit */
@keyframes fiche-rentre{from{clip-path:inset(0 0 0 0 round var(--r-carte));transform:none}to{clip-path:inset(0 0 100% 0 round var(--r-carte));transform:translateY(-26px)}}

/* ---------- 3. ce qui est sorti de l'atelier ----------
   AT-2 : trois piles de fiches, par type. Les colonnes partagent leurs
   rangées (sous-grille) : titres, piles et repères à la même hauteur ;
   dans une fiche, le croquis, le titre (deux lignes réservées), le texte
   et le geste du bas tombent aussi à la même hauteur d'une pile à l'autre. */
.piles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto;column-gap:clamp(22px,3vw,44px)}
.pile{position:relative;display:grid;grid-row:span 3;grid-template-rows:subgrid;min-width:0}
.pile.vole{z-index:4}
.pile__titre{display:flex;align-items:baseline;gap:10px;margin:0 4px 16px;font:700 clamp(19px,1.6vw,22px)/1.2 var(--titre);letter-spacing:-.015em;color:var(--bleu)}
.pile__titre::after{content:"";flex:1;height:1px;align-self:center;background:linear-gradient(90deg,rgba(120,100,60,.32),rgba(120,100,60,0))}
.pile__paquet{position:relative;padding:8px 10px 22px;border-radius:var(--r-champ);-webkit-tap-highlight-color:transparent}
.pile__paquet[tabindex]{cursor:pointer}
.pile__paquet:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.pile__fiches{display:grid;height:100%}
.fiche-r{grid-area:1/1;position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:14px 14px 20px;border-radius:6px;background:var(--papier);transform-origin:50% 100%;transition:transform .6s var(--depl);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(120,100,60,.16),0 2px 3px rgba(60,40,10,.07),0 16px 30px -16px rgba(60,40,10,.38)}
.fiche-r::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse 70% 50% at 100% 100%,rgba(120,90,40,.07),transparent 70%),radial-gradient(ellipse 50% 40% at 0 0,rgba(120,90,40,.05),transparent 70%)}
/* les fiches de dessous : un peu plus sombres, comme dans l'ombre de celle du dessus */
.fiche-r::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:rgba(90,70,40,.07);opacity:var(--sous,0);transition:opacity .4s var(--doux)}
.fiche-r__croquis{display:block;width:100%;aspect-ratio:4/3;border-radius:2px;background:#fdfbf5;box-shadow:0 0 0 1px rgba(120,100,60,.12) inset}
.fiche-r__titre{margin:16px 6px 0;min-height:2.5em;font:700 18.5px/1.25 var(--titre);letter-spacing:-.01em;color:var(--bleu);text-wrap:balance}
.fiche-r p{margin:6px 6px 0;font-size:15px;line-height:1.5;color:var(--encre-2);flex:1}
.fiche-r__geste{margin:16px 6px 0;font-size:15px}
/* P3 : « Présenté sur demande » est une mention, pas un bouton : plus de pilule (la pilule veut dire « touchez-moi ») */
.oeuvre__demande{display:inline-flex;align-items:center;gap:7px;padding:0;font:600 14px/1.3 var(--sans);color:var(--encre-2)}
.pile__commandes{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:6px}
.pile__fleche{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--bleu);background:var(--papier);box-shadow:var(--o-pose);transition:transform .14s var(--doux),background .25s}
.pile__fleche svg{width:18px;height:18px}
.pile__fleche:active{transform:scale(.92)}
@media (hover:hover){.pile__fleche:hover{box-shadow:0 0 0 1px rgba(0,0,145,.5),0 1px 2px rgba(60,40,10,.08)}}
.pile__repere{min-width:52px;text-align:center;font:600 14px/1 var(--sans);color:var(--encre-2);font-variant-numeric:tabular-nums}
.pile__repere b{color:var(--bleu);font-weight:700}
@media (max-width:1023.98px){
  .piles{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:44px}
  .pile{grid-row:auto;grid-template-rows:none}
  .fiche-r__titre{min-height:0}
}

/* ---------- 4. la page blanche ---------- */
.blanche{padding-bottom:clamp(60px,7vw,110px)}
.blanche>.wrap>.tete{margin-bottom:clamp(28px,3.4vw,44px)}
.planche{position:relative;margin:0 auto;max-width:1400px;border-radius:var(--r-scene);isolation:isolate;box-shadow:0 30px 70px -20px rgba(40,24,8,.45);overflow:clip}   /* AT-4 : le bras de la main s'arrête au bord de la planche (clip : la feuille reste collante) */
.planche__bois{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;background:#7a5634 url(../commun/img/c/atelier-planche.webp) 50% 40%/cover no-repeat}
.planche__bois::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 70% at 40% 45%,rgba(255,214,150,.12),rgba(30,18,8,.28) 100%)}
.planche__in{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:clamp(22px,2.6vw,40px);align-items:start;padding:clamp(28px,4vw,64px) clamp(20px,3.6vw,56px)}
.feuille-zone{position:sticky;top:96px}
.feuille{position:relative;margin:0;transform:rotate(-.5deg)}
.feuille__papier{display:block;width:100%;height:auto;filter:drop-shadow(3px 6px 6px rgba(30,18,6,.42))}
.feuille__croquis,.feuille__crayon{position:absolute;left:3.81%;top:6.07%;width:92.38%;height:87.86%}
/* AT-4 : à la souris ou au stylet, on dessine directement sur la feuille ; le curseur devient un crayon (pointe en 3, 29) ;
   au doigt, il faut toujours « Prendre le crayon » (sinon le défilement et le dessin se gênent) */
.feuille__crayon{pointer-events:auto;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><g stroke='%2316205C' stroke-width='1.3' stroke-linejoin='round'><path d='M3 29 6.5 21.5 23 5 27 9 10.5 25.5Z' fill='%23fffdf8'/><path d='M3 29 6.5 21.5 10.5 25.5Z' fill='%23e8d2a6'/><path d='M3 29 4.6 25.6 6.4 27.4Z' fill='%2316205C'/><path d='M23 5 25.5 2.5Q26.5 1.8 27.5 2.5L29.5 4.5Q30.2 5.5 29.5 6.5L27 9Z' fill='%23c9d4ef'/></g></svg>") 3 29,crosshair}
.feuille.crayon-actif .feuille__crayon{touch-action:none}
.feuille.suit .feuille__crayon{cursor:none}
/* AT-4 : la main au crayon du film ; posée, sa paume se clique (« prendre le crayon ») ; elle ne prend jamais les clics ailleurs */
.main-crayon{position:absolute;left:0;top:0;z-index:4;pointer-events:none;transform-origin:0 0;will-change:transform;transition:transform .62s var(--entree),opacity .3s;filter:drop-shadow(9px 13px 8px rgba(30,18,6,.3))}
.main-crayon img{display:block;width:100%;height:100%;-webkit-user-drag:none;user-select:none;-webkit-mask-image:linear-gradient(135deg,#000 66%,transparent 86%);mask-image:linear-gradient(135deg,#000 66%,transparent 86%)}   /* le bras se perd vers le bas, il ne s'arrête jamais net */
.main-crayon.arrive{transition:transform .11s cubic-bezier(.2,.7,.3,1)}
.main-crayon.suit{transition:none;filter:drop-shadow(15px 22px 11px rgba(30,18,6,.24))}
.main-crayon__prise{position:absolute;left:41%;top:27%;width:30%;height:31%;border-radius:45%;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.main-crayon.suit .main-crayon__prise{pointer-events:none}
.feuille__outils{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.outil{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 15px 9px 12px;border-radius:9999px;background:rgba(247,244,237,.95);border:1px solid rgba(200,190,170,.55);box-shadow:var(--o-leve);font:600 13.5px/1 var(--sans);color:var(--bleu);transition:transform .14s var(--doux),background .25s,color .25s}
.outil svg{width:18px;height:18px}
.outil:active{transform:scale(.97)}
.outil[aria-pressed="true"]{background:var(--bleu);color:#fff;border-color:var(--bleu)}
.pas--atelier{position:relative;z-index:5;box-shadow:var(--o-flottant)}   /* AT-4 : la fiche des étapes passe au-dessus de la main posée */
.puces--grandes .puce span{min-height:50px;padding:12px 18px;font-size:15.5px}
.fin-projet{margin-top:6px}
.fiche--projet{margin-top:4px;padding:24px 22px 22px}
.fiche--projet .fiche__titre{font-size:21px}
/* S1 (finitions du 07/10/2026) : sous la fiche envoyée, le second geste (télécharger le croquis, copier la fiche) */
.fin-projet__second{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
@media (max-width:1023.98px){
  .planche{border-radius:0}
  .planche__in{display:flex;flex-direction:column;gap:18px;padding:16px}
  .feuille-zone{top:80px;z-index:3;width:100%;padding:8px 0 10px;background:linear-gradient(180deg,rgba(90,62,36,.0),rgba(90,62,36,0));clip-path:inset(-40px -40px 0 -40px)}   /* AT-4 : la main posée ne déborde pas sur les étapes */
  .feuille__outils{margin-top:10px;gap:6px}
  .outil{min-height:40px;padding:8px 12px 8px 10px;font-size:12.5px}
  .outil span{white-space:nowrap}
  .pas--atelier{width:100%}
}
@media (max-width:479.98px){.outil[data-telecharger] span{display:none}.outil[data-telecharger]{padding:8px 10px}}

/* ---------- 5. méthode ----------
   AT-3 : la grande scène (l'état courant, à taille lisible) et, dessous,
   la rangée des six vignettes (la lecture d'un coup d'œil). */
.scene{position:relative;display:grid;grid-template-columns:minmax(0,2.3fr) minmax(0,1fr);gap:clamp(24px,3.2vw,48px);align-items:center;margin-bottom:clamp(36px,4vw,56px)}
.scene__fenetre{position:relative;aspect-ratio:1000/625;border-radius:var(--r-champ);background:#fdfbf5;box-shadow:0 0 0 1px rgba(120,100,60,.16),0 30px 60px -28px rgba(40,26,10,.45),0 2px 4px rgba(60,40,10,.06);cursor:default;-webkit-tap-highlight-color:transparent}
.scene__etat{position:absolute;inset:0;opacity:0;transition:opacity .38s var(--doux);pointer-events:none}
/* AT-15 : pendant la retenue, les états se succèdent vite : chacun est peint d'avance sur son calque (opacité 0,001, invisible), pour
   que le premier passage d'un état ne coûte pas une image longue (vu une fois à 150 ms, téléphone, densité 3) */
.methode.colle .scene__etat{opacity:.001;will-change:opacity}
.methode.colle .scene__etat.vu{opacity:1}
.scene__etat.vu{opacity:1}
.scene__etat .etat-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.scene__legende{align-self:center}
.scene__num{font:600 clamp(56px,6vw,84px)/.8 var(--main);color:var(--or-txt)}
.scene__titre{margin-top:10px;font:700 clamp(26px,2.5vw,34px)/1.12 var(--titre);letter-spacing:-.02em;color:var(--bleu)}
.scene__texte{margin-top:12px;font-size:clamp(16px,1.3vw,18px);line-height:1.55;color:var(--encre-2);max-width:30ch;min-height:3.1em}
/* AT-23 (cinquième passe) : les six textes l'un sur l'autre (page.js), un seul visible : la légende a la hauteur du plus long */
.scene__texte{display:grid}
.scene__texte>[data-t]{grid-area:1/1;visibility:hidden}
.scene__texte>[data-t].on{visibility:visible}
.scene__progres{display:flex;gap:6px}
.scene__progres li{width:26px;height:4px;border-radius:2px;background:rgba(0,0,145,.12);transition:background .35s}
.scene__progres li.fait{background:var(--bleu)}
.scene__lieu{margin-top:16px;font:500 13px/1.45 var(--sans);color:#706959}   /* polissage du 20/10/2026 : sur le fond #efeae1 de la méthode, --encre-3 restait à 4,1:1 ; #706959, la même teinte un peu plus sombre, 4,55:1 */
.scene__bas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:22px}
.scene__bas .scene__progres{margin-top:0}
.scene__pause{display:inline-flex;align-items:center;gap:7px;min-height:44px;white-space:nowrap;flex:none;padding:8px 14px 8px 11px;margin-left:auto;border-radius:9999px;background:transparent;box-shadow:0 0 0 1px rgba(0,0,145,.2);font:600 12.5px/1 var(--sans);color:var(--bleu);transition:background .25s,box-shadow .25s}
.scene__pause svg{width:14px;height:14px;fill:currentColor}
.scene__pause .p2{display:none}.scene__pause[aria-pressed="true"] .p1{display:none}.scene__pause[aria-pressed="true"] .p2{display:inline}
.scene__pause[aria-pressed="true"]{background:rgba(0,0,145,.06)}
@media (hover:hover){.scene__pause:hover{box-shadow:0 0 0 1.5px var(--bleu)}}
/* AT-15 ter (quatrième passe) : le titre et la scène, collés dans une piste (180 % de la hauteur d'écran) où la page défile librement ;
   la ligne de temps des six états suit la position dans la piste (page.js). La butée unique du bas de la piste, technique de la section
   Marianne (MB-10 bis) : tant que le sixième état n'a pas été affiché, le document est coupé juste sous la vue au bas de la piste (body :
   overflow-y: clip et max-height posée par la page ; le pied de page est hors de <main>) ; rien de coupé n'est à l'écran, la mise en page
   ne change pas, le navigateur s'arrête lui-même, sans rebond. La hauteur où ils se collent est calculée par la page (--colle-haut). Une
   fois les six vus (classe « vue »), la piste se resserre. Sans script ou en mouvement réduit : ni piste ni collage. */
body.methode-borne{overflow-y:clip}
html.methode-borne,html.methode-borne body{overscroll-behavior-y:none}
.methode{--piste-ligne:180vh}
@supports (height:1svh){.methode{--piste-ligne:180svh}}
/* la longueur de la piste est un bloc dans le flux (::after) et pas une marge intérieure : un élément collé ne peut pas entrer dans la
   marge intérieure de son parent */
.methode.colle .methode__piste::after{content:"";display:block;height:var(--piste-ligne)}
.methode.colle.vue .methode__piste::after{display:none}
.methode.colle .methode__colle{position:sticky;top:var(--colle-haut,96px);display:flow-root}
/* AT-17 (quatrième passe) : le repère de la piste (AT-15 bis). Une petite flèche de plume, translucide (40 %), au bord droit de la scène :
   vers la droite tant que la ligne de temps conduit, elle bat doucement ; vers le bas au sixième état (on peut continuer),
   puis elle s'efface. Sur ordinateur, dans l'espace entre la scène et sa légende ; sur une seule colonne, au bord droit de la scène.
   Transform et opacity seulement ; jamais en mouvement réduit (pas de retenue). */
.scene{--ecart-scene:clamp(24px,3.2vw,48px)}
.scene__fleche{position:absolute;z-index:3;top:50%;right:calc(var(--ecart-scene) / -2 - 15px);width:30px;height:30px;margin-top:-15px;pointer-events:none;opacity:0;transition:opacity .4s var(--doux)}
.scene__fleche svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--plume);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;transition:opacity .35s var(--doux)}
.scene__fleche-b{opacity:0}
.methode.fleche-avance .scene__fleche,.methode.fleche-suite .scene__fleche{opacity:.4}
.methode.fleche-avance .scene__fleche-d{animation:fleche-d 1.3s ease-in-out 3 alternate both}   /* P5 (critère 2.2.2) : trois allers, puis fixe */
.methode.fleche-suite .scene__fleche-d{opacity:0}
.methode.fleche-suite .scene__fleche-b{opacity:1;animation:fleche-b 1.1s ease-in-out 4 alternate both}
@keyframes fleche-d{from{transform:translateX(-2px)}to{transform:translateX(4px)}}
@keyframes fleche-b{from{transform:translateY(-2px)}to{transform:translateY(4px)}}
@media (max-width:900px){.scene__fleche{right:10px}}
/* les vignettes : un bouton par état ; la courante est soulignée */
.methode__liste{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.methode__liste li{display:flex;flex-direction:column;min-width:0}
.vignette{display:block;width:100%;border-radius:var(--r-champ);-webkit-tap-highlight-color:transparent;transition:transform .2s var(--doux)}
.vignette__visuel{position:relative;display:block;width:100%;aspect-ratio:1000/625;border-radius:var(--r-champ);overflow:hidden;background:#fdfbf5;box-shadow:0 0 0 1px rgba(120,100,60,.16),var(--ombre-1);transition:box-shadow .3s}
.vignette__visuel .etat-svg{position:absolute;inset:0;width:100%;height:100%}
.vignette[aria-current] .vignette__visuel{box-shadow:0 0 0 2px var(--bleu),0 10px 22px -10px rgba(0,0,145,.4)}
.vignette:active{transform:scale(.97)}
@media (hover:hover){.vignette:not([aria-current]):hover .vignette__visuel{box-shadow:0 0 0 1.5px rgba(0,0,145,.4),var(--ombre-1)}}
.methode__liste h3{margin-top:14px;display:flex;align-items:baseline;gap:8px;font:700 17px/1.25 var(--titre);color:var(--bleu)}
.methode__liste h3 span{font:600 24px/1 var(--main);color:var(--or-txt)}
.methode__liste p{margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--encre-2)}
@media (max-width:1279.98px){.scene{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}}
/* P3 : 900 gardé pour la scène de la méthode (piste collée, défilement des états par la page) : bascule propre à la scène */
@media (max-width:900px){
  .scene{grid-template-columns:minmax(0,1fr);gap:18px}
  .scene__texte{max-width:none;min-height:0}
  .scene__num{font-size:48px;display:inline;margin-right:10px}
  .scene__titre{display:inline;font-size:26px}
  .scene__bas{margin-top:14px}
  .scene__progres li{width:18px}
  /* les vignettes défilent à l'horizontale sous la scène */
  .methode__liste{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--gut));padding:4px var(--gut) 12px;scroll-padding:0 var(--gut);scrollbar-width:none}
  .methode__liste::-webkit-scrollbar{display:none}
  .methode__liste li{flex:0 0 clamp(150px,42vw,220px);scroll-snap-align:start}
  .methode__liste h3{font-size:15.5px;margin-top:10px}
  .methode__liste p{font-size:13.5px}
}

/* ---------- AT-3 : le mini-site de Villeneuve-les-Ormes (grammaire de .site et .nav-mini de la page Marianne), 1000 x 625 ---------- */
.vlo{position:absolute;left:0;top:0;width:1000px;height:625px;transform-origin:0 0;transform:scale(var(--k,.2));border-radius:12px;overflow:hidden;background:#fbfaf6;color:var(--encre);font-family:var(--sans);text-align:left;box-shadow:0 0 0 1px rgba(120,100,60,.18)}
.vlo b,.vlo small{font-style:normal}
.vlo__barre{display:flex;align-items:center;gap:8px;height:34px;padding:0 16px;background:#ece7db}
.vlo__barre>i{width:11px;height:11px;border-radius:50%;background:#cfc8b8}
.vlo__url{display:flex;align-items:center;gap:7px;width:420px;height:22px;margin-left:14px;padding:0 13px;border-radius:9999px;background:#fbf9f3;font:500 12px/1 var(--sans);color:#6d685c}
.vlo__url svg{width:11px;height:11px;color:#8c8678}
.vlo__tete{display:flex;align-items:center;gap:12px;height:64px;padding:0 28px;background:#fff;border-bottom:1px solid rgba(120,100,60,.16)}
.vlo__blason{width:38px;height:44px;flex:none}
.vlo__nom b{display:block;font:700 19px/1.1 var(--titre);letter-spacing:-.015em;color:var(--bleu)}
.vlo__nom small{display:block;margin-top:3px;font:500 11.5px/1.2 var(--sans);color:var(--encre-2)}
.vlo__menu{display:flex;align-items:center;gap:22px;margin-left:auto;font:600 13.5px/1 var(--sans);color:#3b3b3b}
.vlo__menu .on{color:var(--bleu);box-shadow:0 2px 0 var(--bleu);padding:4px 0}
.vlo__onglet{display:inline-flex;align-items:center;gap:6px;margin-left:-6px;padding:8px 12px;border-radius:9999px;background:rgba(0,0,145,.08);color:var(--bleu)}
.vlo__onglet img{width:14px;height:14px}
.vlo__bandeau{position:relative;height:202px;overflow:hidden;background:#dfe5f0}
.vlo__bandeau img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.vlo__accueil{position:absolute;left:28px;bottom:18px;width:460px;padding:13px 18px 14px;border-radius:12px;background:rgba(255,253,248,.95);box-shadow:0 8px 24px rgba(0,0,60,.16)}
.vlo__accueil b{display:block;font:800 21px/1.15 var(--titre);letter-spacing:-.02em;color:var(--bleu)}
.vlo__accueil span{display:block;margin-top:5px;font:500 13px/1.35 var(--sans);color:var(--encre-2)}
.vlo__corps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;height:279px;padding:20px 28px 0}
.vlo__col h5{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 4px;font:700 11.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--or-txt)}
.vlo__col h5 span{font:600 11px/1 var(--sans);letter-spacing:0;text-transform:none;color:var(--bleu);text-decoration:underline;text-underline-offset:3px}
.vlo__actu{height:58px;margin-top:10px;padding:10px 13px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px rgba(120,100,60,.2)}
.vlo__actu small{display:flex;align-items:center;gap:8px;font:600 10.5px/1 var(--sans);color:var(--encre-3)}
.vlo__actu small span{padding:3px 7px;border-radius:9999px;background:#d9f2ef;color:var(--teal-txt);font:700 9.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.vlo__actu b{display:block;margin-top:7px;font:700 14px/1.2 var(--titre);color:var(--bleu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vlo__ag{display:flex;align-items:center;gap:12px;height:58px;margin-top:10px}
.vlo__jour{display:flex;flex-direction:column;align-items:center;justify-content:center;width:46px;height:50px;flex:none;border-radius:9px;background:var(--bleu);color:#fff;font:600 10.5px/1 var(--sans)}
.vlo__jour b{font:800 20px/1 var(--titre);margin-bottom:2px}
.vlo__ag div{min-width:0;flex:1}
.vlo__ag div b{display:block;font:700 14px/1.2 var(--titre);color:var(--bleu)}
.vlo__ag div small{display:block;margin-top:4px;font:500 11.5px/1.3 var(--sans);color:var(--encre-2)}
.vlo__mairie dl{display:grid;gap:3px;margin-top:12px;padding:12px 14px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px rgba(120,100,60,.2)}
.vlo__mairie dt{font:700 11px/1.3 var(--sans);color:var(--encre)}
.vlo__mairie dd{margin:0 0 6px;font:500 13px/1.3 var(--sans);color:var(--encre-2)}
.vlo__mairie p{margin-top:10px;font:500 12.5px/1.3 var(--sans);color:var(--encre-2)}
.vlo__btn{display:inline-flex;align-items:center;height:32px;margin-top:10px;padding:0 16px;border-radius:9999px;background:var(--bleu);color:#fff;font:700 12.5px/1 var(--sans)}
.vlo__pied{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:26px;height:46px;padding:0 28px;background:var(--bleu);color:#c9d1f3;font:500 12px/1 var(--sans)}
.vlo__pied b{color:#fff;font-weight:700;margin-right:auto}
.vlo__filet{position:absolute;left:0;right:0;top:0;display:flex;height:3px}
.vlo__filet i{flex:1}.vlo__filet i:nth-child(1){background:#000091}.vlo__filet i:nth-child(2){background:#f5f5f5}.vlo__filet i:nth-child(3){background:#e1000f}
/* 4 : construction. La structure réelle, le bandeau qui prend sa couleur par la gauche, le reste en filaire sur sa grille */
.vlo__gris{display:block;border-radius:4px;background:#dedad1;margin-top:7px}
.vlo--4 .vlo__bandeau img{filter:grayscale(1) contrast(.85) brightness(1.05)}
.vlo--4 .vlo__bandeau img.vlo__couleur{filter:none;-webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 48%);mask-image:linear-gradient(90deg,#000 40%,transparent 48%)}
.vlo--4 .vlo__accueil{background:rgba(255,253,248,.9)}
.vlo--4 .vlo__actu,.vlo--4 .vlo__mairie .vlo__fil{background:transparent;box-shadow:none;outline:1.5px dashed #c4beb1;outline-offset:-1px}
.vlo--4 .vlo__actu .vlo__gris:first-child{margin-top:2px}
.vlo--4 .vlo__jour{background:transparent;outline:1.5px dashed #c4beb1;outline-offset:-1px}
.vlo--4 .vlo__mairie .vlo__fil{margin-top:12px;padding:6px 14px 12px;border-radius:10px}
.vlo__btn--fil{width:150px;background:transparent;outline:1.5px dashed #c4beb1;outline-offset:-1px}
.vlo--4 .vlo__pied{background:#eceae4;outline:1.5px dashed #c4beb1;outline-offset:-1px}
.vlo--4 .vlo__pied .vlo__gris{margin:0}
.vlo__grille{position:absolute;left:28px;right:28px;top:98px;bottom:0;display:grid;grid-template-columns:repeat(12,1fr);gap:16px;pointer-events:none}
.vlo__grille i{background:rgba(46,196,182,.07);box-shadow:inset 1px 0 rgba(46,196,182,.22),inset -1px 0 rgba(46,196,182,.22)}
/* 6 : suivi. Marianne ouverte dans le coin, avec une réponse sourcée ; une actualité de plus */
.vlo__chat{position:absolute;right:22px;bottom:58px;width:318px;padding:14px 14px 15px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,145,.12),0 22px 44px -12px rgba(0,0,60,.4)}
.vlo__chat-tete{display:flex;align-items:center;gap:10px;padding-bottom:11px;border-bottom:1px solid rgba(120,100,60,.16)}
.vlo__chat-tete img{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 1.5px var(--or)}
.vlo__chat-tete b{display:block;font:700 14px/1.1 var(--titre);color:var(--bleu)}
.vlo__chat-tete small{display:block;margin-top:2px;font:500 10.5px/1.2 var(--sans);color:var(--encre-2)}
.vlo__q{margin:12px 0 0 46px;padding:9px 12px;border-radius:13px 13px 4px 13px;background:var(--bleu);color:#fff;font:500 12.5px/1.35 var(--sans)}
.vlo__r{margin:9px 8px 0 0;padding:10px 12px;border-radius:13px 13px 13px 4px;background:#f3f0e8}
.vlo__r p{font:500 12.5px/1.4 var(--sans);color:var(--encre)}
.vlo__source{display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:5px 9px;border-radius:9999px;background:#e3f5f2;color:var(--teal-txt);font:700 10px/1.1 var(--sans)}
.vlo__source svg{width:11px;height:11px;flex:none}
.vlo__rond{position:absolute;right:24px;bottom:58px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--creme);box-shadow:0 0 0 1.5px var(--or),0 8px 18px rgba(0,0,80,.28)}
.vlo__rond img{width:34px;height:34px;border-radius:50%}
.scene__etat.vu .vlo__chat{animation:vlo-chat .55s var(--entree) .35s backwards}
.scene__etat.vu .vlo__neuf{animation:vlo-neuf .6s var(--entree) .7s backwards}
@keyframes vlo-chat{from{opacity:0;transform:translateY(14px) scale(.96)}}
@keyframes vlo-neuf{from{opacity:0;transform:translateX(-16px)}}

/* ---------- 6. demander un devis ----------
   AT-24 (cinquième passe) : « Formats et prix » (trois cartes et leurs emplacements de prix) est remplacé par un bloc court, au rythme
   des autres sections (même marge de section, même tête) : le titre, le texte et un bouton plein vers le bloc de contact. */
.devis-a__tete{margin-bottom:0}
.devis-a__geste{margin-top:clamp(26px,3vw,36px)}
.contact-sec .date-maj{margin-top:40px;text-align:right}

/* AT-27 (cinquième passe) : aucun mot seul en dernière ligne. Les titres des fiches de tiroir s'équilibrent (« Logiciel sur mesure »
   laissait « mesure » seul à 375, « Laissez libre cours à votre imagination » laissait « imagination » seul à 1440) ; les chapôs et les
   textes courants (tiroirs, fiches, étapes de la méthode, réponses) prennent le retour à la ligne soigné du navigateur, qui évite le mot
   seul en fin de paragraphe ; là où il ne suffit pas, une espace insécable lie les deux derniers mots dans le HTML. */
.contenu__titre,.contenu__grand,.faq summary{text-wrap:balance}   /* les questions aussi : « mairie ? » restait seul à 1440, « application ? » à 390 */
.chapo,.entree__def,.contenu dd,.contenu>p:not([class]),.fiche-r p,.scene__texte,.methode__liste .etape>p,.faq details>div p{text-wrap:pretty}

/* S5 (finitions du 07/10/2026) : cibles au doigt d'au moins 44 px, sans changer le dessin. « Voir le site » et « Découvrir Marianne »
   (fiches des réalisations) : 10 px de marge intérieure en haut et en bas, 8 px sur les côtés, repris par des marges négatives
   (rien ne bouge, le lien reste peint au même rang : 92 x 45 et 160 x 46 px au doigt) ; les liens du pied : 44 px de haut au
   lieu de 36, l'écart de 4 px entre eux repris dans la hauteur (le texte ne bouge pas, la liste prend 4 px par lien).
   Les flèches des piles font déjà 44 x 44 px (inchangées). */
.fiche-r__geste.lien{padding:10px 8px;margin:6px -2px -10px}
.pied ul{gap:0}
.pied ul a{min-height:44px}

/* AT-13 (quatrième passe) : la nuit est l'état d'arrivée. La nuit du fil (lune, lueur, reflet sur la feuille) est la même qu'après un
   tirage ; seul le noir d'avant le script (.entree__nuit) s'efface sous elle, en même temps qu'elle paraît (classe « arrivee »). */
.entree.eteint:not(.allume) .entree__nuit{opacity:0;transition:opacity .42s cubic-bezier(.2,.6,.3,1)}
/* le premier allumage, au premier tirage : la nuit s'efface avec le temps et la courbe du noir de l'ancien allumage (1,8 s après 0,35 s) */
.entree.premier .entree__soir{transition:opacity 1.8s cubic-bezier(.3,.1,.3,1) .35s}
/* allumée d'emblée (ancre intérieure, mouvement réduit) : l'état de fin de l'allumage, posé sans animation ; la caméra déjà avancée */
.entree.d-emblee .entree__ampoule{animation:none;opacity:1;transform:none}
.entree.d-emblee .entree__eteinte{animation:none;opacity:0}
.entree.d-emblee .entree__halo,.entree.d-emblee .entree__nuit,.entree.d-emblee .entree__soir{transition:none}
.entree.avancee .entree__piece{animation:none;transform:scale(1.05)}
/* « tirez » dans la nuit : la feuille est sombre, le mot prend une encre pâle de lune (l'encre de la plume ne s'y lisait plus) */
.entree.eteint .fil__invite{color:rgba(226,234,250,.94)}

/* AT-1 : mouvement réduit, la lampe allumée d'emblée, bascule instantanée (les états de fin posés sans animation) */
@media (prefers-reduced-motion:reduce){
  .allume .entree__ampoule{opacity:1;transform:none}
  .allume .entree__eteinte{opacity:0}
  .entree.eteint .entree__ampoule{opacity:0}
  .entree.eteint .entree__eteinte{opacity:1}
  .entree.avancee .entree__piece{transform:none}   /* AT-13 : en mouvement réduit, la caméra reste où elle était (comme avant cette passe) */
}
/* DJ-9 (08/10/2026, soir) : sur téléphone, « Envoyer mon projet » (198 px) ne tenait pas à côté de « Retour » et sortait de la
   colonne et de l'écran (jusqu'à 395 px pour une vue de 375 ; à 360, « Suivant » dépassait aussi la colonne de 11 px). La ligne
   des gestes peut passer sur deux lignes : quand le bouton ne tient pas, il passe dessous et prend la largeur de la colonne, texte
   sur une ligne ; quand il tient, rien ne bouge (l'espace libre va à l'écart, presque rien au bouton). Ordinateur inchangé. */
@media (max-width:767.98px){
  .pas--atelier .pas__actions{flex-wrap:wrap}
  .pas--atelier .pas__actions .nav__esp{flex:1000 1 0}
  .pas--atelier [data-pas-suite]{flex:1 1 auto}
}
/* DJ-9 : « Parler de mon projet » poussait le bouton du menu hors de la barre de 421 à 427 px ; P3 : la barre prend ses libellés
   courts sous 820 px de barre (requête de conteneur, commun/pages/pages.css) */

/* P4 (19/10/2026, revue, parties 3 et 9) : sur ordinateur, la carte des cookies (js/cookies.js) est compacte en bas à gauche sur tout
   le site (css/couche-commune.css) ; sur l'Atelier, le bouton du haut « Dessiner mon projet » tombe en bas à gauche du premier écran
   dès que la fenêtre est basse (mesuré : 1 024 x 768, 1 280 x 720, 1 366 x 768) : la carte s'y pose en bas à droite, sur la table,
   loin du fil de la lampe (jamais par-dessus une commande) */
@media (min-width:1024px){html .cc.cc-cookies{left:auto;right:16px}}