/* Labo « Du trait au site » — charte marine de cerveau/identite/README.md.
   Marine #0E2947 (le papier du plan) · trait blanc · or #F0B64A EN APLAT SEULEMENT (clé de voûte, bouton) ·
   annotations en ocre clair #E9B872 sur le marine (8,6:1), ocre foncé #9A5B00 sur le blanc (5,4:1).
   Polices servies par le site (fonts/), jamais de CDN. Mobile d'abord (390 × 844).
   « Le plan bleu » (28/09/2026) : toute la page est le papier du plan (pas de mode sombre séparé : elle est déjà bleue). */

@font-face{font-family:'Bricolage Grotesque';src:url(../fonts/bricolage.woff2) format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url(../fonts/newsreader.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url(../fonts/newsreader-italique.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}

:root{
  color-scheme:light;
  --blanc:#FFFFFF;
  --aplat:#F3F7FC;
  --encre:#0E2947;
  --gris:#4A5B73;
  --texte-doux:#223A58;
  --or:#F0B64A;
  --or-clair:#F4C466;
  --ocre:#9A5B00;
  --cote:#E9B872;           /* l'annotation, sur le marine */
  --plan:#0E2947;           /* le papier du plan */
  --plan-feuille:#133A64;   /* la feuille posée dessus */
  --trait:rgba(255,255,255,.92);
  --trait-doux:rgba(255,255,255,.34);
  --filet:rgba(14,41,71,.14);
  --titre:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  --texte:'Newsreader',Georgia,'Times New Roman',serif;
  --gouttiere:16px;
  --texte-plan:#D6E1EE;     /* texte courant sur le plan (≥ 8:1) */
  --gris-plan:#AFC1D6;      /* légendes sur le plan (≥ 6:1) */
  --plan-fonce:#0A1F38;     /* le pied */
  --grille:linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--plan);color:var(--blanc);font:400 1.0625rem/1.5 var(--texte);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
:focus-visible{outline:3px solid var(--or);outline-offset:3px;border-radius:6px}
em{font-style:italic}
.gris{color:var(--gris)}
h1,h2,h3{font-family:var(--titre);font-weight:800;letter-spacing:-.025em;line-height:1.02;margin:0;text-wrap:balance}
h1 em,h2 em{font-family:var(--texte);font-weight:400;font-style:italic;letter-spacing:-.01em}
[hidden]{display:none!important}

/* ---------- boutons ---------- */
.bouton{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font:700 1.02rem/1.15 var(--titre);letter-spacing:-.005em;color:var(--encre);background:var(--or);text-decoration:none;text-align:center;
  min-height:52px;padding:.8em 1.3em;border-radius:12px;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 2px 3px -1px rgba(0,0,0,.18),0 10px 22px -14px rgba(0,0,0,.6);transition:background .2s,transform .15s}
.bouton:hover{background:var(--or-clair)}
.bouton:active{transform:translateY(1px)}
.bouton--grand{font-size:1.1rem;min-height:56px;padding:.9em 1.6em}
.evitement{position:absolute;left:-9999px;top:8px;z-index:100}
.evitement:focus{left:8px;min-height:48px;display:inline-flex;align-items:center;background:var(--or);color:var(--encre);padding:12px 16px;border-radius:10px;font:700 1rem var(--titre)}

/* ================= la scène : un écran, trois étages ================= */
.scene{position:relative;height:100vh;height:100svh;min-height:600px;max-height:1100px;background:var(--plan);color:var(--blanc);
  display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:100%;overflow:hidden;isolation:isolate}
/* le papier bleu : une grille de 8 px (le pas de la mise en page), une ligne forte tous les 40 */
.scene::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:40px 40px,40px 40px,8px 8px,8px 8px;background-position:-1px -1px}

.bandeau{position:relative;z-index:6;display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 10px) var(--gouttiere) 0;height:calc(env(safe-area-inset-top,0px) + 50px)}
.signe{display:flex;align-items:center;gap:.6rem;min-height:48px;text-decoration:none;margin-right:auto}
.marque{width:34px;height:auto;color:var(--blanc);flex:none}
.logo{display:block;height:30px;width:auto;color:var(--blanc);flex:none}
.signe span{display:grid;line-height:1.1}
.signe b{font:700 .98rem/1.1 var(--titre);letter-spacing:-.01em}
.signe small{font:500 .66rem/1.3 var(--titre);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.66)}

/* l'étage du haut : le titre, puis (une fois l'esquisse arrivée) le champ du nom */
.scene__haut{position:relative;z-index:3;padding:10px var(--gouttiere) 0;min-height:0}
.accueil h1{font-size:clamp(2.05rem,8.6vw,4.4rem);color:var(--blanc);max-width:11ch}
.accueil h1 em{color:var(--or)}
.accroche{margin:.7rem 0 0;font:500 1.04rem/1.35 var(--titre);color:rgba(255,255,255,.9)}
/* (tour 3) plus de borne sur téléphone : à 27ch la 2e ligne tenait sur trois lignes et prenait ~34 px à l'aperçu */

.nommer{display:block;margin:0}
.nommer__champ{display:grid;gap:5px;min-width:0}
.nommer__champ>span:first-child{font:600 .82rem var(--titre);letter-spacing:.02em;color:rgba(255,255,255,.88)}
.nommer__champ small{font-weight:400;color:rgba(255,255,255,.6);margin-left:.3em}
.nommer__ligne{display:flex;gap:6px}
.nommer input{flex:1;min-width:0;height:48px;font:500 1.05rem var(--titre);color:var(--encre);background:var(--blanc);border:0;border-radius:10px;padding:0 12px}
.nommer input::placeholder{color:#7A889B;font-weight:400}
/* l'arche du nom : pierres en blanc, clé attendue en pointillé ocre ; la 3D se pose par-dessus */
.arche-zone{position:absolute;left:0;top:0;width:74px;height:46px;opacity:0;pointer-events:none;z-index:2}
.scene[data-etat=esquisse] .arche-zone{opacity:1;transition:opacity .25s}
.arche-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* (le symbole est cloné par <use> : les sélecteurs visent le symbole lui-même, sinon les pierres sortent noires) */
#arche-plan .pierres,#arche-plan .sol{fill:#E9EEF5}
#arche-plan .cle-attendue{fill:none;stroke:var(--cote);stroke-width:3;stroke-dasharray:6 5}
.arche-svg .cle-or{fill:var(--or)}
.arche-zone canvas{position:absolute;left:-20%;right:-20%;bottom:-8%;width:140%;height:260%;pointer-events:none;opacity:0;transition:opacity .18s}
.arche-zone.en-3d canvas{opacity:1}
.arche-zone.en-3d .arche-svg{opacity:0;transition:opacity .18s .1s}

/* ---------- la table : la feuille du plan, posée en perspective ---------- */
.table{position:relative;min-height:0;perspective:820px;perspective-origin:50% 30%;z-index:1}
.feuille{position:absolute;left:50%;top:50%;width:390px;height:844px;margin:-422px 0 0 -195px;transform-style:preserve-3d;transform-origin:50% 50%;will-change:transform}
/* la feuille est l'ÉCRAN d'un vrai téléphone (25/09/2026, « un VRAI téléphone ») : rendu Blender, écran troué
   (img/telephone.webp, sources dans ../labo/appareils/) ; le plan puis le site se posent dans le trou. Derrière, la
   tranche : une plaque graphite (unie : trois plaques en dégradé coûtaient 20 images sur 90) qui ne se voit que quand le téléphone est incliné (son épaisseur). L'ombre
   portée est dans l'image (une ombre floue CSS sur un calque 3D n'est pas dessinée partout). */
.feuille__papier{position:absolute;inset:0;background:var(--plan-feuille);border-radius:52px;transform:translateZ(-.6px);
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:24px 24px}
.feuille__appareil{position:absolute;max-width:none;transform:translateZ(-.3px);pointer-events:none;user-select:none;-webkit-user-drag:none}
.feuille__tranche{position:absolute;left:-15px;top:-15px;width:420px;height:874px;border-radius:61px;transform:translateZ(-8px);background:#1A1D23}
/* le poinçon de la caméra, par-dessus le site (le rendu le porte aussi, mais le site le recouvre) */
.feuille__camera{position:absolute;left:189.5px;top:10.5px;width:11px;height:11px;border-radius:50%;transform:translateZ(1.8px);pointer-events:none;
  background:radial-gradient(circle at 38% 34%,#5B6576 0 1px,#1A1F2A 1.6px,#05070B 3.4px);box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.feuille__reflet{position:absolute;inset:0;border-radius:52px;transform:translateZ(1.6px);pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.13),rgba(255,255,255,.04) 26%,rgba(255,255,255,0) 42%)}
.feuille.en-cours .feuille__reflet{display:none}
.feuille svg{overflow:visible}
.feuille__base{position:absolute;left:0;top:0;width:390px;height:844px}
.trait{fill:none;stroke:var(--trait);stroke-linecap:round;stroke-linejoin:round;vector-effect:none}
.trait--texte{stroke:rgba(255,255,255,.62)}
.trait--cadre{stroke:rgba(255,255,255,.5)}
.cote-trait{fill:none;stroke:var(--cote);stroke-width:1.6}
.cote-texte{fill:var(--cote);font:italic 400 22px var(--texte)}
.feuille__ombres,.feuille__blocs{position:absolute;inset:0;transform-style:preserve-3d}
.ombre{position:absolute;border-radius:8px;background:rgba(0,6,18,.62);box-shadow:0 0 20px 8px rgba(0,6,18,.5);opacity:0;transform:translateZ(.2px)}
.piece{position:absolute;transform-style:preserve-3d;transform:translateZ(.4px)}
.piece__dessus{position:absolute;inset:0;border-radius:4px;background:rgba(30,72,120,0)}
.piece__dessus svg{position:absolute;left:0;top:0;width:100%;height:100%}
.piece__f{position:absolute;display:block;background:#08203D;backface-visibility:hidden;-webkit-backface-visibility:hidden;opacity:0}
.piece__f--bas{left:0;top:100%;width:100%;height:var(--ep);transform-origin:50% 0;transform:rotateX(-90deg);background:#081B33;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.piece__f--haut{left:0;bottom:100%;width:100%;height:var(--ep);transform-origin:50% 100%;transform:rotateX(90deg);background:#4A7FB8}
.piece__f--g{right:100%;top:0;width:var(--ep);height:100%;transform-origin:100% 50%;transform:rotateY(-90deg);background:#0F2D50}
.piece__f--d{left:100%;top:0;width:var(--ep);height:100%;transform-origin:0 50%;transform:rotateY(90deg);background:#0F2D50}
.feuille__matiere{position:absolute;inset:0;transform:translateZ(1px);border-radius:52px;overflow:hidden;clip-path:inset(0 0 100% 0 round 52px)}
.site{display:block;width:390px;height:844px}
.feuille__voile{position:absolute;inset:0;border-radius:52px;background:#fff;opacity:0;transform:translateZ(2px);pointer-events:none}
.tampon{position:absolute;right:-30px;top:650px;transform:translateZ(3px) rotate(var(--rot,-6deg));opacity:0;pointer-events:none;
  padding:9px 18px 8px;border:3px solid #B8741A;border-radius:10px;color:#B8741A;background:rgba(255,250,240,.93);text-align:center;
  box-shadow:0 0 0 2px rgba(255,250,240,.93),0 0 0 4px #B8741A,0 10px 20px -10px rgba(0,0,0,.5)}
.tampon b{display:block;font:800 30px/1 var(--titre);letter-spacing:.2em;margin-right:-.2em}
.tampon span{display:block;font:italic 400 17px/1.2 var(--texte);margin-top:3px}

/* ---------- l'ordinateur : un vrai portable (rendu Blender, img/ordinateur.webp, écran troué), 25/09/2026 ----------
   .ecran est l'écran lui-même (1280 × 836 : la barre du navigateur, puis le site) ; le portable l'entoure, placé au
   pixel près par trait.js (constante APPAREILS). Le site y est mis en page à 1024 × 640 puis agrandi de 25 % : plus lisible (29/09). */
.ecran{position:absolute;left:50%;top:50%;width:1280px;height:836px;margin:-418px 0 0 -640px;transform-origin:50% 50%;visibility:hidden;opacity:0;will-change:transform,opacity}
.ecran__appareil{position:absolute;max-width:none;pointer-events:none;user-select:none;-webkit-user-drag:none}
.ecran__sol{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,3,10,.85),rgba(0,3,10,.45) 50%,rgba(0,3,10,0))}
.ecran__papier{position:absolute;inset:0;border-radius:3px;background:var(--plan-feuille);
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:32px 32px}
/* la barre d'un navigateur, sobre et sans marque : trois ronds gris, l'adresse (le nom tapé y devient chez-martine.fr) */
.ecran__barre{position:absolute;left:0;right:0;top:0;height:36px;display:flex;align-items:center;gap:9px;padding:0 18px;background:#E6EAF0;border-radius:3px 3px 0 0;border-bottom:1px solid #C9D1DC}
.ecran__barre i{width:13px;height:13px;border-radius:50%;background:#B7C0CC}
.ecran__adresse{position:absolute;left:50%;top:6px;transform:translateX(-50%);min-width:380px;height:24px;padding:0 20px;background:#fff;border-radius:99px;
  font:500 15px/24px var(--titre);color:#3A4A60;text-align:center;white-space:nowrap}
.ecran__plan{position:absolute;left:0;top:36px;width:1280px;height:800px;overflow:visible}
.ecran__matiere{position:absolute;left:0;top:36px;width:1280px;height:800px;overflow:hidden;clip-path:inset(0 100% 0 0)}
.ecran__reflet{position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,.1),rgba(255,255,255,.03) 30%,rgba(255,255,255,0) 46%)}
.site--pc{width:1024px;height:640px;transform:scale(1.25);transform-origin:0 0}

/* ---------- la bascule « téléphone / ordinateur » (téléphone et fenêtre étroite), en bas à gauche de la table ---------- */
.vues{position:absolute;left:var(--gouttiere);bottom:4px;z-index:4;display:grid;gap:3px;justify-items:start}
.vues__legende{margin:0;width:100px;font:italic 400 .88rem/1.1 var(--texte);color:var(--cote)}
.vues__touches{display:flex;gap:2px;padding:2px;border:1.5px solid rgba(255,255,255,.62);border-radius:99px;background:var(--plan)}
.vues button{appearance:none;border:0;margin:0;width:48px;height:48px;border-radius:99px;display:grid;place-items:center;background:transparent;color:var(--blanc);cursor:pointer;transition:background .12s,color .12s}
.vues button svg{width:22px;height:22px}
.vues button[aria-pressed=true]{background:var(--blanc);color:var(--encre)}
.vues button:active{transform:translateY(1px)}

/* ---------- les notes à la main, dans les marges ---------- */
.notes{position:absolute;inset:0;pointer-events:none}
.notes svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.note{position:absolute;margin:0;width:var(--note-l,74px);font:italic 400 .9rem/1.2 var(--texte);color:var(--cote);opacity:0}
.note--g{text-align:right}
.note--c{text-align:center}
.fleche{fill:none;stroke:var(--cote);stroke-width:1.3;stroke-linecap:round;opacity:.9}
.lu{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- l'étage du bas : sous le pouce ---------- */
.commandes{position:relative;z-index:3;display:grid;gap:8px;padding:6px var(--gouttiere) calc(env(safe-area-inset-bottom,0px) + 12px)}
.consigne{margin:0 0 2px;font:italic 400 1.08rem/1.3 var(--texte);color:var(--cote);text-align:center;text-wrap:balance}
.consigne__essai{display:inline-block;margin-right:.45em;padding:3px 8px 2px;border-radius:6px;background:var(--or);color:var(--encre);font:800 .7rem/1.3 var(--titre);letter-spacing:.14em;text-transform:uppercase;font-style:normal;vertical-align:.12em}
.consigne__fleche{display:inline-block;width:26px;height:20px;margin-left:4px;vertical-align:-.35em;fill:none;stroke:var(--cote);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.metiers{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.metiers button{appearance:none;cursor:pointer;min-height:48px;padding:0 15px;border-radius:99px;border:1.5px solid rgba(255,255,255,.62);
  background:var(--plan);color:var(--blanc);font:600 1rem var(--titre);letter-spacing:-.005em;transition:background .12s,color .12s,border-color .12s}
.metiers button:hover{border-color:var(--blanc)}
.metiers button[aria-pressed=true],.metiers button.appui{background:var(--blanc);color:var(--encre);border-color:var(--blanc)}
.bouton--pouce{width:100%;white-space:normal}
/* la vague : une fois le titre posé, les pastilles se soulèvent l'une après l'autre (« touchez-moi »), deux fois ;
   (29/09) à 1,1 s, pour finir avant la démonstration automatique (2,5 s) */
.scene[data-etat=plan] .metiers button{animation:appel .55s cubic-bezier(.3,.7,.3,1) calc(1.1s + var(--k,0) * 90ms) 2}
.metiers button:nth-child(2){--k:1}.metiers button:nth-child(3){--k:2}.metiers button:nth-child(4){--k:3}.metiers button:nth-child(5){--k:4}
@keyframes appel{40%{transform:translateY(-5px);border-color:var(--or)}}
.apercu-note{margin:0;font:italic 400 .9rem/1.3 var(--texte);color:rgba(255,255,255,.8);text-align:center}

/* l'état « esquisse » sur téléphone : le titre a été lu, le champ du nom prend sa place */
.scene[data-etat=esquisse] .consigne{display:none}

/* ---------- la démonstration automatique (js/trait.js, 29/09/2026) ----------
   La note « Et le vôtre ? Touchez votre métier. », à la plume comme les notes du plan, et sa flèche au trait or qui
   montre les pastilles. En position absolue dans la scène : aucune hauteur ajoutée. */
.invite{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:4}
.invite path{fill:none;stroke:var(--cote);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2;stroke-dashoffset:1}
.relance{position:absolute;z-index:4;margin:0;font:italic 400 .9rem/1.2 var(--texte);color:var(--cote);pointer-events:none;text-wrap:balance}

/* ---------- le menu : en ligne au bureau, « Menu » sur téléphone (details : marche sans script) ---------- */
.menu{display:none}
.menu a:not(.bouton){display:inline-flex;align-items:center;min-height:48px;padding:0 12px;font:600 .95rem var(--titre);color:rgba(255,255,255,.86);text-decoration:none;border-radius:8px}
.menu a:not(.bouton):hover{color:var(--blanc);text-decoration:underline}
.bouton--menu{min-height:48px;padding:.55em 1.1em;font-size:.95rem;margin-left:8px}
.menu-tel{position:relative}
.menu-tel summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:48px;padding:0 16px 0 14px;border:1.5px solid rgba(255,255,255,.62);border-radius:99px;font:600 .95rem var(--titre);color:var(--blanc)}
.menu-tel summary::-webkit-details-marker{display:none}
.menu-tel__traits{display:grid;gap:5px;width:16px}
.menu-tel__traits i{display:block;height:1.8px;border-radius:2px;background:currentColor;transition:transform .2s}
.menu-tel[open] .menu-tel__traits i:first-child{transform:translateY(3.4px)}
.menu-tel[open] .menu-tel__traits i:last-child{transform:translateY(-3.4px)}
.menu-tel__liste{position:absolute;right:0;top:calc(100% + 8px);z-index:20;display:grid;gap:2px;min-width:232px;padding:8px;border:1.5px solid rgba(255,255,255,.3);border-radius:14px;background:#0B2240;box-shadow:0 20px 40px -18px rgba(0,0,0,.7)}
.menu-tel__liste a:not(.bouton){display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:8px;font:600 1rem var(--titre);color:var(--blanc);text-decoration:none}
.menu-tel__liste a:not(.bouton):hover{background:rgba(255,255,255,.08)}
.menu-tel__liste .bouton{margin-top:6px}

/* ================= le liseré rayé : le linge, en couleurs de plan, qui défile doucement =================
   Les rayures du linge (bandes 12 · 30 · 40 · 60 · 70 · 88 %), vues en travers : blanc / or / blanc / plan / blanc / or /
   blanc, sur une période de 72 px ; le ruban glisse d'une période en 9 s (transform seul, aucune peinture). */
.ruban{position:relative;height:7px;overflow:hidden;background:var(--plan)}
.ruban i{position:absolute;left:-72px;top:0;bottom:0;width:calc(100% + 144px);will-change:transform;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.85) 0 8.6px,var(--or) 8.6px 21.6px,rgba(255,255,255,.85) 21.6px 28.8px,var(--plan) 28.8px 43.2px,
    rgba(255,255,255,.85) 43.2px 50.4px,var(--or) 50.4px 63.4px,rgba(255,255,255,.85) 63.4px 72px);
  animation:defile 9s linear infinite}
@keyframes defile{to{transform:translate3d(72px,0,0)}}
.ruban--pied{position:absolute;left:0;right:0;top:0}

/* ================= sous la scène : la page qu'on lit, sur le même papier bleu ================= */
.bloc{position:relative;padding:64px var(--gouttiere);background-color:var(--plan);background-image:var(--grille);background-size:40px 40px,40px 40px,8px 8px,8px 8px;background-position:-1px -1px;color:var(--blanc);overflow:hidden}
.bloc--feuille{background-color:var(--plan-feuille)}
.bloc__dedans{position:relative;max-width:68rem;margin:0 auto}
.bloc__dedans--etroit{max-width:44rem}
.surtitre{margin:0 0 .9rem;font:700 .78rem/1.2 var(--titre);letter-spacing:.14em;text-transform:uppercase;color:var(--cote)}
.bloc h2{font-size:clamp(2rem,7vw,3.4rem);max-width:20ch;color:var(--blanc)}
.bloc h2 em{color:var(--or)}
.chapeau{font-size:1.15rem;margin:1rem 0 0;color:var(--texte-plan);max-width:36rem}
.chapeau b{font-family:var(--titre);color:var(--blanc)}
.gris{color:var(--gris-plan)}

/* ---------- ce que je fais : quatre cartes au trait, l'icône se dessine en entrant ---------- */
.offres{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:14px}
.offre{position:relative;padding:20px 20px 22px;border:1.5px solid rgba(255,255,255,.3);border-radius:14px;background:rgba(19,58,100,.55)}
/* deux coins cotés, comme un cartouche de plan */
.offre::before,.offre::after{content:"";position:absolute;width:12px;height:12px;border-color:var(--cote);border-style:solid;opacity:.9}
.offre::before{left:-1.5px;top:-1.5px;border-width:2px 0 0 2px;border-radius:14px 0 0 0}
.offre::after{right:-1.5px;bottom:-1.5px;border-width:0 2px 2px 0;border-radius:0 0 14px 0}
.offre__icone{width:44px;height:44px;fill:none;stroke:var(--cote);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.offre h3{margin-top:12px;font-size:1.3rem;color:var(--blanc)}
.offre p{margin:.5rem 0 0;color:var(--texte-plan);line-height:1.45}
.dessine .offre__icone *{stroke-dasharray:1 1;stroke-dashoffset:1}
.dessine .offre.vu .offre__icone *{stroke-dashoffset:0;transition:stroke-dashoffset .9s cubic-bezier(.4,.1,.2,1) calc(var(--k,0) * 120ms)}

/* ---------- comment ça marche : la frise ---------- */
.etapes{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:20px;position:relative;counter-reset:etape}
.etapes li{position:relative;padding-left:34px;font-size:1.02rem;line-height:1.45;color:var(--texte-plan)}
.etapes li::before{content:"";position:absolute;left:4px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--plan-feuille);border:2.5px solid var(--blanc)}
.etapes li::after{content:"";position:absolute;left:10px;top:22px;bottom:-22px;width:1.5px;background:rgba(255,255,255,.3)}
.etapes li:last-child::after{content:none}
.etapes li:nth-child(3)::before{background:var(--or);border-color:var(--or)}
.etapes__quand{display:block;font:700 .78rem/1.2 var(--titre);letter-spacing:.12em;text-transform:uppercase;color:var(--cote);margin-bottom:4px}
.etapes b{display:block;font:700 1.15rem/1.25 var(--titre);letter-spacing:-.01em;color:var(--blanc);margin-bottom:2px}

/* ---------- mes réalisations : une réalisation = une vitrine (portable + téléphone) et son texte ----------
   La vitrine reprend les vrais appareils de l'accueil (img/ordinateur.webp, img/telephone.webp, écran troué). Repère :
   1 615 × 1 180 unités, en px du site de l'accueil (constante APPAREILS de js/trait.js). Tout est en % de ce repère.
   Au défilement, elle se redresse et se rapproche (js/recit.js : --tourne, --proche). */
.realisations{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:48px}
.realisation{display:grid;gap:24px;align-items:center}
.vitrine{position:relative;margin:0;aspect-ratio:1615/1180;transform:perspective(1400px) rotateY(calc(var(--tourne,0) * 1deg)) rotateX(calc(var(--tourne,0) * -.35deg)) scale(calc(1 - var(--loin,0) * .08));transform-origin:50% 60%}
.vitrine>*{position:absolute;display:block;max-width:none}
.vitrine__portable{left:0;top:0;width:97.487%;height:96.658%}
.vitrine__sol{left:2.925%;top:92.759%;width:91.638%;height:5.424%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,3,10,.8),rgba(0,3,10,.4) 55%,rgba(0,3,10,0))}
.vitrine__ecran{left:9.115%;top:3.366%;width:79.257%;height:70.847%;overflow:hidden;border-radius:.3% / .45%;background:#fff}
.vitrine__barre{position:absolute;left:0;top:0;width:100%;height:4.306%}
.vitrine__barre text{font:500 15px var(--titre);fill:#3A4A60}
.vitrine__ecran .vitrine__capture{position:absolute;left:0;top:4.306%;width:100%;height:95.694%}
.vitrine__telephone{left:76.161%;top:40.932%;width:23.839%;height:59.085%}
/* le rayon de l'écran du téléphone : 52 px sur 390 × 844 */
.vitrine__capture--tel{left:79.628%;top:45.441%;width:16.904%;height:50.068%;border-radius:13.333% / 6.161%}
.vitrine__ecran::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,.1),rgba(255,255,255,.03) 30%,rgba(255,255,255,0) 46%)}
.realisation__texte h3{font-size:clamp(1.6rem,5vw,2.1rem)}
.realisation__quand{margin:.35rem 0 0;font:700 .78rem/1.2 var(--titre);letter-spacing:.12em;text-transform:uppercase;color:var(--cote)}
.realisation__texte>p:not(.realisation__quand){margin:.9rem 0 0;font-size:1.08rem;line-height:1.45;color:var(--texte-plan);max-width:34rem}
.realisation__faits{list-style:none;margin:1rem 0 0;padding:0;max-width:34rem}
.realisation__faits li{padding:9px 0;border-top:1px solid rgba(255,255,255,.2);color:var(--texte-plan)}
.realisation__faits li:last-child{border-bottom:1px solid rgba(255,255,255,.2)}
.realisation__lien{display:inline-flex;align-items:center;gap:.35em;min-height:48px;margin-top:1rem;padding:0 1.1em;border:1.5px solid var(--blanc);border-radius:12px;
  font:700 1rem/1 var(--titre);text-decoration:none;color:var(--blanc);transition:background .15s,color .15s}
.realisation__lien:hover{background:var(--blanc);color:var(--encre)}

/* les sites modèles de la page, en petits téléphones (le vrai fichier, chargé quand on arrive) — marqués « Exemples » */
.exemples{margin-top:56px;padding-top:28px;border-top:1px dashed rgba(255,255,255,.3)}
.exemples__tete h3{font-size:clamp(1.4rem,4.4vw,1.8rem);display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.etiquette{display:inline-block;padding:4px 9px 3px;border:1.5px solid var(--cote);border-radius:6px;font:800 .72rem/1.2 var(--titre);letter-spacing:.14em;text-transform:uppercase;color:var(--cote);transform:rotate(-3deg)}
.exemples__tete p{margin:.6rem 0 0;color:var(--texte-plan);max-width:40rem}
.exemples__rail{list-style:none;margin:22px calc(-1 * var(--gouttiere)) 0;padding:6px var(--gouttiere) 14px;scroll-padding-inline:var(--gouttiere);display:grid;grid-auto-flow:column;grid-auto-columns:168px;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.exemple{position:relative;display:grid;gap:4px;justify-items:start;scroll-snap-align:start}
.exemple__tel{position:relative;width:156px;height:338px;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 0 0 5px #1A1D23,0 0 0 6.5px #3A414D,0 18px 30px -16px rgba(0,0,0,.8);margin:6px 6px 10px}
.exemple__tel iframe{position:absolute;left:0;top:0;width:390px;height:844px;border:0;transform:scale(.4);transform-origin:0 0;pointer-events:none}
.exemple b{font:700 1rem/1.2 var(--titre);color:var(--blanc)}
.exemple small{font:italic 400 .95rem var(--texte);color:var(--gris-plan)}
.exemple__action{appearance:none;cursor:pointer;margin-top:6px;min-height:48px;padding:0 14px;border-radius:99px;border:1.5px solid rgba(255,255,255,.62);background:transparent;color:var(--blanc);font:600 .9rem var(--titre)}
.exemple__action::after{content:"";position:absolute;inset:0}
.exemple__action:hover,.exemple:hover .exemple__action{background:var(--blanc);color:var(--encre)}

/* ---------- questions fréquentes ---------- */
.faq{margin-top:1.8rem;border-bottom:1px solid rgba(255,255,255,.22)}
.faq details{border-top:1px solid rgba(255,255,255,.22)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:10px 0;font:700 1.18rem/1.25 var(--titre);color:var(--blanc)}
.faq summary::-webkit-details-marker{display:none}
/* un chevron au trait (jamais de « + » : aucune croix) */
.faq summary::after{content:"";flex:none;width:10px;height:10px;margin-right:6px;border-right:2px solid var(--cote);border-bottom:2px solid var(--cote);transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(2px) rotate(225deg)}
.faq p{margin:0 0 18px;color:var(--texte-plan);font-size:1.08rem;line-height:1.5;max-width:38rem}

/* ---------- le formulaire ---------- */
.bloc--demande{padding-bottom:88px}
.filigrane{position:absolute;right:-70px;top:30px;width:300px;height:300px;fill:none;stroke:rgba(255,255,255,.05);stroke-width:1.3;transform:rotate(-12deg);pointer-events:none}
.filigrane__signe path{stroke:rgba(255,255,255,.07);stroke-width:1.5}
.formulaire{margin-top:1.8rem}
.formulaire__champs{display:grid;grid-template-columns:1fr;gap:14px}
.champ{display:grid;gap:6px;min-width:0}
.champ>span{font:600 .92rem var(--titre);color:var(--blanc)}
.champ small{font-weight:400;color:var(--gris-plan);margin-left:.3em}
.champ input,.champ select,.champ textarea{width:100%;min-height:52px;font:500 1.05rem var(--titre);color:var(--encre);background:var(--blanc);border:0;border-radius:10px;padding:.7rem .85rem}
.champ textarea{font:400 1.08rem/1.4 var(--texte);resize:vertical}
.champ select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--encre) 50%),linear-gradient(135deg,var(--encre) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4rem}
.champ ::placeholder{color:#6A7890;font-weight:400}
.formulaire__aide{margin:12px 0 0;font:italic 400 1rem/1.35 var(--texte);color:var(--cote)}
.accord{display:flex;gap:.8rem;align-items:flex-start;min-height:48px;margin-top:16px;font-size:.98rem;line-height:1.45;color:var(--texte-plan);cursor:pointer}
.accord input{width:1.3rem;height:1.3rem;margin-top:.12rem;accent-color:var(--or);flex:none}
.accord a{color:var(--blanc)}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulaire__erreur{margin:14px 0 0;padding:.75rem .95rem;background:#FFF3DC;color:var(--encre);border-left:4px solid var(--or);border-radius:6px;font-size:1rem}
.formulaire__envoyer{margin-top:18px;width:100%}
.formulaire__fin{margin-top:18px;padding:18px;border:1.5px solid var(--or);border-radius:14px;background:rgba(10,31,56,.7)}
.formulaire__fin-titre{margin:0 0 .3rem;font:800 1.5rem/1.1 var(--titre);color:var(--blanc)}
.formulaire__fin p{margin:0 0 .8rem;color:var(--texte-plan)}
.recap{display:grid;grid-template-columns:max-content 1fr;gap:.3rem 1rem;margin:0;font-size:.98rem}
.recap dt{font:600 .85rem var(--titre);color:var(--gris-plan);padding-top:.15rem}
.recap dd{margin:0;overflow-wrap:anywhere;color:var(--blanc)}
.q-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- le pied ---------- */
.pied{position:relative;background:var(--plan-fonce);color:var(--blanc);padding:44px var(--gouttiere) calc(env(safe-area-inset-bottom,0px) + 36px);font:400 .98rem/1.55 var(--texte)}
.pied__dedans{max-width:68rem;margin:0 auto;display:grid;gap:22px}
.pied__signe{display:flex;gap:14px;align-items:center}
.pied__signe p{margin:0}
.pied__signe b{font-family:var(--titre)}
.pied .marque{width:44px;color:var(--blanc)}
.pied .logo{height:38px}
.pied__liens{list-style:none;margin:0;padding:0;display:grid;gap:8px;align-items:center}
.pied__liens a:not(.bouton){display:inline-flex;align-items:center;min-height:48px;color:var(--blanc)}
.pied__mail{display:block;color:var(--texte-plan);font-style:italic}
.pied__legal{margin:0;font-size:.9rem}


   Le vocabulaire de l'esquisse, appliqué aux mots : ils se posent comme les blocs (ils descendent, leur ombre se
   resserre), les lignes de construction et le crayon se tracent. Tout ce qui est tracé est en position absolue :
   aucune hauteur ajoutée. transform et opacity seulement. Sans script : le texte tel quel. */
.accueil,.bloc h2{position:relative}
.mot{display:inline-block;position:relative}
.colle{white-space:nowrap}   /* un mot en italique et sa ponctuation (js/texte.js) */
.construction{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.construction path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.guide{stroke:rgba(255,255,255,.36);stroke-width:1}
.guide--cap{stroke:rgba(255,255,255,.2)}
.crayon{stroke:var(--cote);stroke-width:2.4}
.crayon--ocre{stroke:var(--cote);stroke-width:2.2}
/* le titre attend ses polices (≤ 0,7 s) ; si le script manque, il revient seul à 2,4 s */
.texte .accueil h1,.texte .accroche{opacity:0;animation:secours 0s 2.4s forwards}
.texte-pret .accueil h1,.texte-pret .accroche{opacity:1;animation:none}
@keyframes secours{to{opacity:1}}
/* l'épaisseur du mot : son ombre, un aplat marine foncé décalé (comme la face d'un bloc), jamais sélectionnable */
.accueil h1 .mot::before{content:attr(data-m);position:absolute;left:0;top:0;z-index:-1;color:#020C1A;opacity:.6;
  transform:translate3d(.018em,.055em,0);pointer-events:none}
.texte-pret .accueil h1 .mot{opacity:0;transform:translate3d(0,-.2em,0);
  transition:opacity .26s ease-out,transform .52s cubic-bezier(.2,.75,.25,1);transition-delay:calc(var(--i)*55ms)}
.texte-pret .accueil h1 .mot::before{opacity:.18;transform:translate3d(.06em,.34em,0);
  transition:opacity .52s ease-out,transform .52s cubic-bezier(.2,.75,.25,1);transition-delay:calc(var(--i)*55ms)}
.accueil h1.pose .mot{opacity:1;transform:none}
.accueil h1.pose .mot::before{opacity:.6;transform:translate3d(.018em,.055em,0)}
.texte-pret .accroche .phrase{opacity:0;transition:opacity .42s ease-out;transition-delay:calc(var(--i)*.26s)}
.accroche .phrase.lue{opacity:1}
/* sous la scène : le titre se pose quand il entre à l'écran */
.bloc h2.attend .mot{opacity:0;transform:translate3d(0,-.2em,0);
  transition:opacity .26s ease-out,transform .5s cubic-bezier(.2,.75,.25,1);transition-delay:calc(var(--i)*50ms)}
.bloc h2.attend.pose .mot{opacity:1;transform:none}
.net .mot,.net .mot::before,.net .phrase{transition:none!important}
/* les pastilles : une touche qu'on enfonce ; celle du métier choisi reste enfoncée */
.metiers button{box-shadow:0 2px 0 rgba(255,255,255,.26);transition:background .12s,color .12s,border-color .12s,transform .09s ease-out}
.metiers button:active,.metiers button.appui{transform:translateY(2px);box-shadow:none}
.metiers button[aria-pressed=true]{transform:translateY(1px);box-shadow:0 1px 0 #9FB3CB}
/* ---------- mesure (?mesure=1) ---------- */
.mesure{position:fixed;left:8px;top:58px;z-index:50;pointer-events:none;opacity:.9;background:rgba(0,0,0,.82);color:#fff;font:500 12px/1.45 ui-monospace,Menlo,monospace;padding:8px 10px;border-radius:8px;white-space:pre}
.mesure button{pointer-events:auto;margin-top:6px;font:inherit;background:#fff;color:#000;border:0;border-radius:4px;padding:4px 8px}

/* ================= bureau : deux colonnes, la feuille à droite ================= */
@media (min-width:600px){
  .offres{grid-template-columns:repeat(2,minmax(0,1fr))}
  .formulaire__champs{grid-template-columns:1fr 1fr}
  .champ--large{grid-column:1/-1}
}
@media (min-width:900px){
  :root{--gouttiere:clamp(24px,4vw,64px);--conteneur:80rem}
  .scene{grid-template-columns:minmax(360px,34rem) 1fr;grid-template-rows:auto auto 1fr auto;column-gap:clamp(16px,3vw,48px)}
  .bandeau{grid-column:1/-1;height:calc(env(safe-area-inset-top,0px) + 64px)}
  .menu{display:flex;align-items:center;gap:2px}
  .menu-tel{display:none}
  .scene__haut{grid-column:1;grid-row:2;padding-top:clamp(24px,6vh,72px)}
  .table{grid-column:2;grid-row:2/5}
  .commandes{grid-column:1;grid-row:3;align-content:start;padding-top:28px;gap:12px}
  .consigne,.apercu-note{text-align:left}
  .metiers{justify-content:flex-start}
  .bouton--pouce{width:100%;justify-self:stretch}
  .table{perspective:1150px;perspective-origin:50% 42%}
  .accueil h1{max-width:12ch}
  .signe small{font-size:.72rem}
  .marque{width:40px}
  .note{font-size:1.05rem;--note-l:170px}
  .relance{font-size:1.15rem;line-height:1.15}
  .vues{left:50%;bottom:6px;transform:translateX(-50%);grid-auto-flow:column;align-items:center;gap:10px}
  .vues__legende{width:auto;white-space:nowrap}
  /* au bureau, le titre reste ; le nom vient s'ajouter dessous */
  .scene[data-etat=esquisse] .accueil{display:block!important}
  .nommer{margin-top:28px}
  .bloc{padding:104px var(--gouttiere)}
  /* UN SEUL BORD : le bandeau, la scène, les sections et le pied partagent le même conteneur, centré. Sa largeur,
     --conteneur, est posée par trait.js (composer). Les sections étroites gardent 44rem de texte, sur le même bord. */
  .bloc__dedans,.bloc__dedans--etroit,.pied__dedans{max-width:var(--conteneur)}
  :where(.bloc__dedans--etroit)>*{max-width:44rem}
  .scene.large{padding-inline:max(var(--gouttiere),(100% - var(--conteneur)) / 2);grid-template-columns:var(--col-texte) minmax(0,1fr);column-gap:var(--ecart)}
  .scene.large .bandeau,.scene.large .scene__haut,.scene.large .commandes{padding-left:0;padding-right:0}
  .scene.large .scene__haut{padding-top:var(--haut-texte)}
  /* la colonne a un bord droit net : le bouton à la largeur du champ, les pastilles en 3 + 2 qui remplissent la ligne */
  /* (tour 2) en flex qui remplit la ligne : chaque pastille sur UNE ligne (« Restaurant, café » passait sur deux à
     1100 px dans la grille 3 + 2), les lignes gardent un bord droit net */
  .metiers{display:flex;flex-wrap:wrap;gap:8px}
  .metiers button{flex:1 1 auto;min-width:28%;white-space:nowrap;padding:0 14px;font-size:max(1rem,calc(var(--col-texte,480px) * .034))}
  /* (tour 3) sur les grands écrans, les pastilles grandissent aussi en hauteur (48 px à 480 px de colonne, 58 px à 640) */
  .metiers{gap:max(8px,calc(var(--col-texte,480px) * .016))}
  .metiers button{min-height:max(48px,calc(var(--col-texte,480px) * .09));padding:0 max(14px,calc(var(--col-texte,480px) * .03))}
  .scene.large .bouton--pouce{font-size:max(1rem,calc(var(--col-texte) * .034));min-height:max(52px,calc(var(--col-texte) * .1))}
  /* (tour 2) la 2e ligne et la consigne font la moitié de la phrase des 5 secondes : au bureau elles grandissent
     avec la colonne de texte (trait.js la fait grandir sur les grands écrans), le titre aussi */
  .scene.large .accueil h1{font-size:max(4.4rem,calc(var(--col-texte) * .146))}
  .accroche{font-size:max(1.25rem,calc(var(--col-texte,480px) * .043));max-width:32ch;margin-top:.9rem}
  .consigne{font-size:max(1.2rem,calc(var(--col-texte,480px) * .04))}
  .consigne__essai{font-size:max(.8rem,calc(var(--col-texte,480px) * .027));padding:4px 9px 3px}
  .note,.apercu-note{text-wrap:balance}
  .offres{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
  .etapes{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
  .etapes li{padding:26px 0 0}
  .etapes li::before{top:-6px;left:0}
  .etapes li::after{left:16px;right:-28px;top:0;bottom:auto;width:auto;height:1.5px}
  /* la frise se trace de gauche à droite en entrant (js/recit.js ajoute .vu) */
  .dessine .etapes li::after{transform:scaleX(0);transform-origin:0 50%}
  .dessine .etapes.vu li::after{transform:none;transition:transform .5s cubic-bezier(.3,.7,.2,1) calc(.15s + var(--k,0) * .22s)}
  .etapes li:nth-child(2){--k:1}.etapes li:nth-child(3){--k:2}
  /* une réalisation seule : la vitrine à gauche, le texte à droite */
  .realisation{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(32px,4vw,64px)}
  .exemples__rail{margin:26px 0 0;padding:6px 0 0;grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible}
  .exemple{justify-items:center;text-align:center}
  .filigrane{right:max(-40px,calc((100% - var(--conteneur)) / 2 - 40px));top:70px;width:420px;height:420px}
  .formulaire__envoyer{width:auto;min-width:18rem}
  /* (tour 2) le signe prend sa largeur, les liens le reste, alignés à droite et qui passent à la ligne s'il le faut :
     plus rien ne déborde de sa boîte (le texte du signe passait sous « Mentions légales » à 1440 px) */
  .pied__dedans{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:clamp(24px,4vw,64px)}
  .pied__liens{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;column-gap:22px;row-gap:4px}
  .pied__mail{max-width:23rem;text-align:right}
  .pied__legal{grid-column:1/-1}
}
@media (max-width:899px){
  /* téléphone : le titre (puis le champ du nom) et la table partagent le même étage ; la feuille se place dessous
     par le calcul (trait.js), la table ne change jamais de taille */
  .scene__haut,.table{grid-row:2;grid-column:1}
  .scene__haut{align-self:start}
  .commandes{grid-row:3}
  .scene[data-etat=esquisse] .accueil{display:none}
  /* (tour 3) un seul bord gauche : la consigne et la note s'alignent sur le titre, les pastilles remplissent la ligne */
  .consigne,.apercu-note{text-align:left}
  .metiers{justify-content:flex-start}
  .metiers button{flex:1 1 auto}
  /* (tour 3) le titre tient sur deux lignes au lieu de trois : la consigne, plus longue qu'au 25/09 (« Essayez »), prend
     une ligne de plus ; la ligne gagnée ici la rend à l'aperçu, qui retrouve sa taille du 25/09 */
  .accueil h1{max-width:none;text-wrap:balance}
}
@media (max-height:700px) and (max-width:899px){
  .accueil h1{font-size:1.9rem}
  .consigne__fleche{display:none}
}
@media (max-width:380px){
  .metiers button{padding:0 12px;font-size:.95rem}
  .consigne{font-size:1rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .texte .accueil h1,.texte .accroche,.texte-pret .accueil h1 .mot,.texte-pret .accroche .phrase,.bloc h2.attend .mot{opacity:1;transform:none;animation:none;transition:none}
  .texte-pret .accueil h1 .mot::before{opacity:.6;transform:translate3d(.018em,.055em,0);transition:none}
  .metiers button{transition:none;animation:none!important}
  .arche-zone canvas,.arche-zone.en-3d .arche-svg{transition:none}
  .vues button,.realisation__lien,.faq summary::after,.menu-tel__traits i{transition:none}
  .ruban i{animation:none}
  .vitrine{transform:none}
}