/* ==========================================================================
   L'imaginateur v2 · feuille de style unique
   Direction artistique « Papier calque » : tracés graphite, une couleur
   d'accent, étiquettes en mono.

   Sections : 1 tokens · 2 base · 3 composants · 4 header · 5 hero
              6 prestations · 7 applications · 8 méthode · 9 prix
              10 contact · 11 pied de page · 13 mouvement réduit
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root{
  --paper:#FFFFFF;
  --paper-2:#F1F0EC;
  --paper-3:#E4E2DC;

  --ink:#141210;
  --ink-2:#55504A;
  --mute:#7D786F;

  --line:#B9B4AA;
  --line-soft:#DCD9D2;

  /* Accent, deux candidats (TEMP) */
  --accent:#1D4E89;
  --accent-soft:#D6E1EE;

  --todo:#FFF1A8;

  /* Trois rôles typographiques, combo « Plan mono » (05/10) :
     titre = titres de section et de cartes ; lecture = textes à lire ;
     atelier = annotations du plan (étiquettes, rubriques, définition, boutons) */
  --f-titre:'Barlow Condensed',sans-serif;
  --f-lecture:'IBM Plex Mono',ui-monospace,monospace;
  --f-atelier:'EB Garamond',Georgia,serif;
  --titre-weight:500; --titre-case:uppercase; --titre-track:.02em; --titre-scale:.95;
  --atelier-scale:.9;
  --f-h1:'Michroma',sans-serif;   /* capitales carrées et larges, hachures denses, contour net qui dépasse aux angles */
  --f-sans:var(--f-lecture);
  --f-serif:var(--f-atelier);
  --f-mono:var(--f-atelier);

  /* Échelle typo (06/10) : un token par rôle, voir la section 12 bis et /design-system */
  --t-h1:calc(clamp(36px,5.4vw,64px) * var(--titre-scale) / .62 * .8);
  --t-h2:34px; --t-h3:20px; --t-sous-titre:18px; --t-texte:16px; --t-petit:13px; --t-label:11px;
  --t-chiffre:34px; --t-annotation:15px;

  --wrap:1240px;
  --gut:16px;
  --section-y:112px;
  --header-h:60px;
}
@media (min-width:700px){ :root{ --gut:32px; } }
/* Mobile : sections plus rapprochées (15/10) */
@media (max-width:699px){ :root{ --t-h2:28px; --section-y:56px; } }

/* Cyanotype : bleu de plan. Planche : vert tapis de découpe. Contraste AA sur --paper-2 */

/* ==========================================================================
   2. BASE
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper-2); color:var(--ink);
  font-family:var(--f-sans); font-size:16px; font-weight:400; line-height:1.5;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
[hidden]{ display:none !important; }

.skip{ position:absolute; left:-9999px; top:8px; z-index:100; background:var(--ink); color:var(--paper); padding:8px 12px; }
.skip:focus{ left:8px; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }
.section{ padding:var(--section-y) 0; position:relative; }

.eyebrow{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute); margin:0 0 12px;
}
.h2{
  font-family:var(--f-titre); font-weight:var(--titre-weight); font-size:var(--t-h1);
  line-height:1.02; letter-spacing:var(--titre-track); text-transform:var(--titre-case); margin:0 0 48px;
}
/* Sous-titre : la phrase sous chaque titre de section, même taille partout */
.sous-titre{ max-width:none; margin:-24px 0 56px; font-family:var(--f-atelier); font-size:var(--t-sous-titre); line-height:1.4; color:var(--ink); text-wrap:pretty; }
@media (max-width:699px){ .sous-titre{ margin-bottom:40px; } }


/* Repères de contenu manquant : visibles d'un coup d'œil */
mark.todo{
  background:var(--todo); color:var(--ink); font-family:var(--f-mono); font-size:.78em;
  padding:1px 4px; border-radius:2px; letter-spacing:0;
}

/* Trame millimétrée discrète du papier */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(var(--line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:48px 48px; opacity:.35;
}

/* ==========================================================================
   3. COMPOSANTS
   ========================================================================== */

.btn{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 20px;
  font-family:var(--f-mono); font-size:13px; letter-spacing:.06em; text-decoration:none;
  border:1px solid var(--ink); background:transparent; cursor:pointer; white-space:nowrap;
}
.btn--primary{ background:var(--ink); color:var(--paper); }
.btn--primary:hover{ background:var(--accent); border-color:var(--accent); }
.btn--line:hover{ border-color:var(--accent); color:var(--accent); }

/* Cote : le texte posé sur une ligne de cote (traits d'extrémité), qui passe à l'accent au survol */
.btn{ position:relative; transition:background .2s, color .2s, border-color .2s, box-shadow .2s, padding .2s; }
.btn.btn{ border:0; background:none; color:var(--ink); padding:0 4px 6px;
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
  background-size:100% 1px, 1px 9px, 1px 9px; background-position:0 calc(100% - 8px), 0 calc(100% - 4px), 100% calc(100% - 4px); background-repeat:no-repeat; }
.btn.btn--primary{ color:var(--accent); }
.btn.btn:hover{ color:var(--accent); padding:0 12px 6px; }
/* Sur une planche colorée, la cote reste blanche */
.real .btn.btn--line{ color:#fff; }

.pill{
  display:inline-block; font-family:var(--f-mono); font-size:12px; letter-spacing:.04em;
  padding:4px 10px; border:1px solid var(--line); border-radius:999px; background:var(--paper);
}

.link{ text-decoration:underline; text-underline-offset:3px; }

/* Cartouche de plan : grille de cases au trait */
.cartouche{
  background:var(--paper); border:1px solid var(--ink);
  font-family:var(--f-mono); font-size:12px; color:var(--ink-2);
}
.cartouche__row{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 14px; }
.cartouche__row + .cartouche__row{ border-top:1px solid var(--line); }

/* Classes de remplissage des dessins au trait */
.f-paper{ fill:var(--paper); stroke:var(--ink-2); stroke-width:1.2; }
.f-deep{ fill:var(--paper-3); stroke:var(--ink-2); stroke-width:1.2; }
.f-ghost{ fill:rgba(255,255,255,.35); stroke:var(--line); stroke-width:1; stroke-dasharray:4 4; }
.f-glass{ fill:rgba(255,255,255,.72); stroke:var(--ink); stroke-width:1.4; }
.f-none{ fill:none; stroke:var(--ink-2); stroke-width:1.1; }
.s-only{ fill:none; stroke:var(--ink-2); stroke-width:1.2; }
.s-dash{ fill:none; stroke:var(--line); stroke-width:1.2; stroke-dasharray:6 6; }
.s-accent-hold{ fill:none; stroke:var(--ink); stroke-width:2; }
svg rect,svg circle,svg path{ vector-effect:non-scaling-stroke; }

/* ==========================================================================
   4. HEADER
   ========================================================================== */

.header{
  position:fixed; top:0; left:0; right:0; z-index:50; height:var(--header-h);
  background:color-mix(in srgb,var(--paper-2) 88%,transparent);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line-soft);
}
.header__actions{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.header__cta{ height:40px; min-height:40px; padding:0 18px; }
/* Son et bouton de contact : même hauteur, même ligne */
.header__actions .sound-toggle{ height:40px; min-height:40px; }
.cta__short{ display:none; }
.burger{ width:44px; height:44px; position:relative; border:0; background:none; cursor:pointer; padding:0; }
.burger span{ position:absolute; left:8px; right:8px; height:1.5px; background:var(--ink); transition:transform .3s, top .3s; }
.burger span:first-child{ top:17px; }
.burger span:last-child{ top:25px; }
.burger[aria-expanded="true"] span:first-child{ top:21px; transform:rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ top:21px; transform:rotate(-45deg); }
@media (max-width:699px){
  .header__cta{ padding:0 14px; }
  .cta__long{ display:none; }
  .cta__short{ display:inline; }
  .header__actions{ gap:8px; }
}

/* Menu plein écran : descend depuis le header comme un store */
/* Fond du menu : la couleur d'accent (tranché le 05/10) */
html{ --menu-bg:var(--accent); --menu-fg:#fff; --menu-mute:rgba(255,255,255,.65); --menu-rule:rgba(255,255,255,.25); }
.menu{
  position:fixed; inset:var(--header-h) 0 0 0; z-index:49; background:var(--menu-bg); color:var(--menu-fg);
  display:flex; flex-direction:column; justify-content:center; padding:0 var(--gut);
  clip-path:inset(0 0 100% 0); transition:clip-path .7s cubic-bezier(.76,0,.24,1);
}
.menu.is-open{ clip-path:inset(0 0 0 0); }
.menu__list{ list-style:none; margin:0 auto; padding:0; width:100%; max-width:var(--wrap); }
.menu__list li{ opacity:0; transform:translateY(-24px); transition:opacity .45s, transform .6s cubic-bezier(.2,.7,.2,1); }
.menu.is-open .menu__list li{ opacity:1; transform:none; }
.menu.is-open .menu__list li:nth-child(1){ transition-delay:.25s; }
.menu.is-open .menu__list li:nth-child(2){ transition-delay:.32s; }
.menu.is-open .menu__list li:nth-child(3){ transition-delay:.39s; }
.menu.is-open .menu__list li:nth-child(4){ transition-delay:.46s; }
.menu__list li + li{ border-top:1px solid var(--menu-rule); }
.menu__list a{
  display:flex; align-items:baseline; gap:24px; padding:30px 0; text-decoration:none; color:var(--menu-fg);
  font-family:var(--f-titre); font-weight:var(--titre-weight); text-transform:var(--titre-case); letter-spacing:var(--titre-track);
  font-size:calc(clamp(34px,6vw,72px) * var(--titre-scale) / .62 * .75); line-height:1.1;
  transition:opacity .25s;
}
.menu__num{ font-family:var(--f-mono); font-size:13px; color:var(--menu-mute); letter-spacing:.1em; }
.menu__label{ position:relative; display:inline-block; }
.menu__list:hover a{ opacity:.5; }
.menu__list a:hover,.menu__list a:focus-visible{ opacity:1; }

/* Survol : une ligne de cote de plan se trace sous le mot, avec sa mesure (tranché le 05/10) */
.menu__label::before{
  content:""; position:absolute; left:0; right:0; bottom:-.18em; height:9px;
  background:
    linear-gradient(currentColor,currentColor) 0 50% / 100% 1px no-repeat,
    linear-gradient(currentColor,currentColor) 0 0 / 1px 100% no-repeat,
    linear-gradient(currentColor,currentColor) 100% 0 / 1px 100% no-repeat;
  clip-path:inset(0 100% 0 0); transition:clip-path .55s cubic-bezier(.7,0,.2,1);
}
.menu__label::after{
  content:attr(data-cote); position:absolute; left:50%; bottom:-.62em; transform:translateX(-50%);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; color:var(--menu-mute);
  background:var(--menu-bg); padding:0 6px; opacity:0; transition:opacity .3s .3s;
}
.menu__list a:hover .menu__label::before{ clip-path:inset(0 0 0 0); }
.menu__list a:hover .menu__label::after{ opacity:1; }

.menu__foot{ position:absolute; left:var(--gut); right:var(--gut); bottom:32px; max-width:var(--wrap); margin:0 auto; display:flex; gap:24px; flex-wrap:wrap; font-family:var(--f-mono); font-size:13px; opacity:0; transition:opacity .4s .5s; }
.menu.is-open .menu__foot{ opacity:1; }
.menu__foot a{ color:var(--menu-mute); text-decoration:none; }
.menu__foot a:hover{ color:var(--menu-fg); }
body.menu-open{ overflow:hidden; }

.header__in{ height:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); display:flex; align-items:center; gap:24px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:600; letter-spacing:-.01em; }

.sound-toggle{
  display:flex; align-items:center; gap:8px; min-height:36px; padding:0 12px;
  border:1px solid var(--line); background:var(--paper); cursor:pointer;
  font-family:var(--f-mono); font-size:12px;
}
.sound-toggle__bars{ display:flex; align-items:flex-end; gap:2px; height:12px; }
.sound-toggle__bars i{ width:2px; height:4px; background:var(--mute); }
.sound-toggle[aria-pressed="true"] .sound-toggle__bars i{ background:var(--accent); animation:bar 1s ease-in-out infinite; }
.sound-toggle[aria-pressed="true"] .sound-toggle__bars i:nth-child(2){ animation-delay:.2s; }
.sound-toggle[aria-pressed="true"] .sound-toggle__bars i:nth-child(3){ animation-delay:.4s; }
@keyframes bar{ 0%,100%{ height:4px; } 50%{ height:12px; } }
/* Boutons du header sans titre : carrés, l'icône seule */
.header__actions .sound-toggle{ width:40px; padding:0; justify-content:center; }

/* ==========================================================================
   5. HERO
   ========================================================================== */

.hero{ position:relative; }
.hero__stage{
  position:relative; height:100vh; height:100svh; min-height:560px;
  padding-top:var(--header-h); display:flex; align-items:center; justify-content:center;
}
.hero__title{
  position:absolute; left:0; right:0; top:calc(var(--header-h) + 6vh); z-index:0; margin:0 auto;
  text-align:center; pointer-events:none; max-width:94vw;
  font-family:var(--f-h1); font-weight:400; font-size:clamp(64px,11vw,180px); line-height:1.02;
  letter-spacing:.02em; text-transform:uppercase;
  /* Lettres pleines remplies de hachures griffonnées : contour au trait, fond hachuré en diagonale */
  color:transparent;
}
.h1__line{ display:block; position:relative; }
/* Hachures denses (tranché le 05/10). Marge haute : les accents (É) sont hachurés eux aussi */
html{ --hatch-line:.016em; --hatch-step:.024em; }
.h1__line{ padding-top:.3em; margin-top:-.3em; }
/* Le remplissage : hachures serrées en diagonale, découpées dans la lettre */
.h1__line{
  background:
    repeating-linear-gradient(-58deg, var(--ink) 0 var(--hatch-line), transparent var(--hatch-line) var(--hatch-step));
  -webkit-background-clip:text; background-clip:text;
}
/* Le contour : chaque lettre porte une copie d'elle-même réduite à son tracé extérieur,
   avec un des quatre réglages de dépassement (classe posée par hero.js) */
/* Bloc en ligne : la copie se cale exactement sur la lettre */
.h1__char{ position:relative; display:inline-block; }
.h1__char::after{
  content:attr(data-t); position:absolute; inset:0; line-height:inherit; color:var(--ink);
  background:none; -webkit-text-fill-color:var(--ink); filter:url(#contour-a);
}
.h1__char.c-b::after{ filter:url(#contour-b); }
.h1__char.c-c::after{ filter:url(#contour-c); }
.h1__char.c-d::after{ filter:url(#contour-d); }
/* Mobile : le titre dans son propre calque, son fondu pendant l'éclatement ne recalcule plus les filtres SVG à chaque image */
@media (max-width:699px){ .hero__title{ will-change:opacity; } }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.hero__figure{ position:relative; z-index:1; width:min(100%,1120px); height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.xp{ width:100%; height:100%; max-height:calc(100svh - var(--header-h) - 40px); overflow:visible; }

.xp__piece .xp__plate rect,.xp__piece .xp__plate circle,.xp__piece .xp__plate path{ transition:stroke .25s; }
.xp__piece.is-active .xp__plate .f-paper,
.xp__piece.is-active .xp__plate .f-deep,
.xp__piece.is-active .xp__plate .f-glass,
.xp__piece.is-active .xp__plate .f-none,
.xp__piece.is-active .xp__plate .s-only,
.xp__piece.is-active .xp__plate .s-accent-hold{ stroke:var(--accent); }
.xp__piece.is-active .xp__plate .f-deep{ fill:var(--accent-soft); }

.xp__label{ opacity:0; }
.xp__label path{ fill:none; stroke:var(--line); stroke-width:1; }
.xp__name{ font-family:var(--f-mono); font-size:22px; fill:var(--ink); letter-spacing:.02em; }
.xp__desc{ font-family:var(--f-mono); font-size:17px; fill:var(--ink-2); opacity:0; transition:opacity .2s; }
.xp__tag{ cursor:default; outline:none; }
.xp__tag:hover .xp__desc,.xp__tag:focus .xp__desc{ opacity:1; }
.xp__tag:focus .xp__name{ fill:var(--accent); }
.xp__piece.is-active .xp__name{ fill:var(--accent); }
.xp__piece.is-active .xp__label path{ stroke:var(--accent); }

/* Schéma déplié : survol d'une pièce = teinte légère + phrase affichée */
.xp .f-ghost{ pointer-events:none; }
.xp__hit{ fill:transparent; stroke:none; pointer-events:none; }
.hero.is-open .xp__hit{ pointer-events:all; }
.hero.is-open .xp__piece:hover .xp__hit{ fill:var(--accent-soft); fill-opacity:.6; }
.hero.is-open .xp__piece{ cursor:pointer; }
.hero.is-open .xp__piece:hover .xp__plate :is(.f-paper,.f-glass,.f-none,.f-deep,.s-only,.s-accent-hold){ stroke:var(--accent); }
.hero.is-open .xp__piece:hover .xp__plate :is(.f-paper,.f-glass,.f-deep){ fill:var(--accent-soft); }
.hero.is-open .xp__piece:hover .xp__name{ fill:var(--accent); }
.hero.is-open .xp__piece:hover .xp__label path{ stroke:var(--accent); }
.hero.is-open .xp__piece:hover .xp__desc{ opacity:1; }
.xp__plate :is(.f-paper,.f-glass,.f-deep){ transition:fill .25s, stroke .25s; }

/* Frémissement de la vitre, jusqu'au premier scroll */
.hero:not(.is-touched) .xp__piece[data-i="0"] .xp__plate{ animation:shiver 2.6s ease-in-out infinite; }
@keyframes shiver{ 0%,70%,100%{ transform:matrix(0.866,0.5,-0.866,0.5,0,0); } 80%{ transform:matrix(0.866,0.5,-0.866,0.5,0,-4); } 90%{ transform:matrix(0.866,0.5,-0.866,0.5,0,0); } }

.xp__caption{ display:none; }

.xp__open{
  /* Bas de l'écran, aligné sur le bas du cartouche */
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:2;
  min-height:36px; padding:0 16px; cursor:pointer; white-space:nowrap;
  background:var(--paper); border:1px solid var(--line); color:var(--ink-2);
  font-family:var(--f-mono); font-size:12px; letter-spacing:.06em;
  transition:opacity .3s, border-color .2s, color .2s;
}
.xp__open:hover,.xp__open:focus-visible{ border-color:var(--accent); color:var(--accent); }
.hero.is-open .xp__open,.xp__open.is-gone{ opacity:0; pointer-events:none; }
/* Retiré le 15/10 : la goutte d'eau invite au tap ; gardé dans le DOM, hero.js passe par lui pour déplier */
.xp__open{ display:none; }
/* Cartouche vertical : bande au trait le long du bord droit, texte lu de bas en haut */
.hero__cartouche{
  position:absolute; right:var(--gut); bottom:24px; z-index:2; height:min(42vh,340px);
  display:flex; flex-direction:column; border:1px solid var(--ink-2);
}
.cartouche__name{
  /* Bande dont la largeur vaut deux lignes de texte ; le bloc de texte est tourné d'un quart de tour,
     ce qui garde l'apostrophe et la ponctuation intactes (writing-mode les déformait) */
  position:relative; flex:1; margin:0;
  --cart-fs:var(--t-h3);
  width:calc(var(--cart-fs) * 1.2 * 2 + 28px);
  font-family:var(--f-titre); font-weight:var(--titre-weight); text-transform:uppercase;
  font-size:var(--cart-fs); line-height:1.2; letter-spacing:.04em; color:var(--ink); white-space:nowrap;
}
.cartouche__rot{
  position:absolute; left:0; top:100%; width:var(--rot-w,400px); padding:14px 20px;
  transform-origin:0 0; transform:rotate(-90deg);
}
.cartouche__name span:first-child{ color:var(--ink-2); }

/* Définition : imprimée dans le fond, encadrée de quatre coins seulement */
.hero__def{
  position:absolute; left:var(--gut); bottom:24px; z-index:0; width:min(440px,34vw);
  padding:20px 24px; color:var(--ink-2);
  font-family:var(--f-atelier); font-size:calc(20px * var(--atelier-scale)); line-height:1.45;
  background:
    linear-gradient(var(--line),var(--line)) 0 0 / 14px 1px no-repeat,
    linear-gradient(var(--line),var(--line)) 0 0 / 1px 14px no-repeat,
    linear-gradient(var(--line),var(--line)) 100% 0 / 14px 1px no-repeat,
    linear-gradient(var(--line),var(--line)) 100% 0 / 1px 14px no-repeat,
    linear-gradient(var(--line),var(--line)) 0 100% / 14px 1px no-repeat,
    linear-gradient(var(--line),var(--line)) 0 100% / 1px 14px no-repeat,
    linear-gradient(var(--line),var(--line)) 100% 100% / 14px 1px no-repeat,
    linear-gradient(var(--line),var(--line)) 100% 100% / 1px 14px no-repeat;
}
.hero__def p{ margin:0; }
/* Schéma déplié : la définition se replie sur « Imaginateur, n. m. [...] » pour lui laisser la place */
.hero__def p:not(.def__head){ max-height:4em; overflow:hidden; transition:max-height .6s cubic-bezier(.7,0,.2,1), opacity .35s; }
.hero.is-deployed .hero__def p:not(.def__head){ max-height:0; opacity:0; }
.hero__def b{ font-weight:600; color:var(--ink); }
.hero__def .sc{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.06em; }
/* La serif du site n'a pas les signes phonétiques : police système qui les a */
.hero__def .ipa{ font-family:'Times New Roman',Georgia,serif; font-size:.9em; }

/* Mobile : pièces seules, une étiquette à la fois sous le dessin */
@media (max-width:699px){
  .hero__title{ position:relative; top:auto; padding:16px var(--gut) 0; font-size:44px; }
  .hero__stage{ flex-direction:column; justify-content:flex-start; align-items:center; }
  .xp__label{ display:none; }
  .hero__figure{ height:auto; justify-content:flex-start; padding-top:8px; }
  .xp{ height:auto; max-height:calc(100svh - var(--header-h) - 420px); }
  .xp__open{ bottom:16px; }
  .xp__caption{
    display:flex; flex-direction:column; align-items:center; gap:2px; min-height:44px; margin:4px 0 0;
    font-family:var(--f-mono); text-align:center;
  }
  .xp__caption-name{ color:var(--accent); font-size:14px; }
  .xp__caption-desc{ color:var(--ink-2); font-size:12.5px; }
  .hero__cartouche{ bottom:16px; }
  .hero__def{ display:none; }
  .hero__cartouche{ left:var(--gut); right:var(--gut); height:auto; flex-direction:row; }
  .cartouche__name{ width:auto; padding:12px 16px; --cart-fs:var(--t-h3); white-space:normal; }
  .cartouche__rot{ position:static; transform:none; width:auto; padding:0; }
  .cartouche__rot br{ display:none; }
}

/* Mobile (14/10) : le schéma occupe l'écran ; déplié, il part à gauche à moitié coupé
   et les noms des pièces se lisent au milieu, reliés par leur trait (hero.js pose les étiquettes) */
@media (max-width:699px){
  .hero__stage{ overflow:hidden; }
  .hero__figure{ position:absolute; left:0; right:0; top:var(--header-h); bottom:0; padding:0; justify-content:center; }
  .xp{ height:100%; max-height:none; }
  .xp__caption{ display:none; }
  .xp__label{ display:inline; }
  .xp__name{ font-size:20px; }
  .xp__desc{ opacity:.85; }
  .hero__title{ z-index:2; width:calc(100vw - 48px); padding:16px 0 0; }   /* pleine largeur moins 24 px par côté (15/10) */
  /* Même rendu que la marque du pied de page (15/10) : casse normale, hachures plus espacées */
  .hero__title{ text-transform:none; letter-spacing:.05em; --hatch-line:.03em; --hatch-step:.07em; }
  .hero__cartouche,.xp__open{ transition:opacity .4s; }
  .hero.is-deployed .hero__cartouche{ opacity:0; pointer-events:none; }
  .hero .xp__goutte{ --goutte-t:2.4s; }
}

/* Goutte d'eau sur l'écran du téléphone fermé : des ondes invitent à toucher (15/10). Rayon posé par hero.js */
.xp__goutte{ --goutte-t:3.3s; pointer-events:none; }
.xp__goutte circle{ fill:none; stroke:var(--accent); stroke-width:1.5; vector-effect:non-scaling-stroke;
  transform-box:fill-box; transform-origin:center; animation:goutte var(--goutte-t) cubic-bezier(.2,.6,.3,1) infinite both; }
.xp__goutte circle:nth-child(2){ animation-delay:calc(var(--goutte-t) / 3); }
.xp__goutte circle:nth-child(3){ animation-delay:calc(var(--goutte-t) * 2 / 3); }
.xp__goutte .xp__goutte-point{ fill:var(--accent); stroke:none; animation:goutte-point var(--goutte-t) ease-in-out infinite; }
.hero.is-deployed .xp__goutte,.hero.is-open .xp__goutte{ display:none; }
.hero:not(.is-deployed):not(.is-open) .xp{ cursor:pointer; }
@keyframes goutte{ 0%{ transform:scale(.05); opacity:0; } 15%{ opacity:.9; } 100%{ transform:scale(1); opacity:0; } }
@keyframes goutte-point{ 0%,100%{ transform:scale(1); opacity:.9; } 50%{ transform:scale(.55); opacity:.5; } }

/* ==========================================================================
   6. PRESTATIONS · planche cyanotype : onglets, planche technique et détail à 50/50
   ========================================================================== */

.incl{ list-style:none; margin:0; padding:0; }
.incl li{ padding:7px 0; border-bottom:1px solid var(--line-soft); font-size:15px; }
.incl li::before{ content:"+ "; color:var(--accent); }
.prest__action{ margin:28px 0 0; }

.v6::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--accent-soft) 1px,transparent 1px),linear-gradient(90deg,var(--accent-soft) 1px,transparent 1px);
  background-size:40px 40px; }
.v6 > .wrap{ position:relative; }
.v6__frame{ position:relative; border:1.5px solid var(--ink); padding:28px; background:var(--paper-2); }
.v6__tabs{ display:flex; border-bottom:1.5px solid var(--ink); margin:-28px -28px 28px; }
.v6__tab{ all:unset; box-sizing:border-box; cursor:pointer; flex:1; padding:16px 20px; font-family:var(--f-titre); text-transform:uppercase; font-size:24px; letter-spacing:.04em; text-align:left; border-right:1.5px solid var(--ink); color:var(--ink); }
.v6__tab:last-child{ border-right:0; }
.v6__tab:hover{ color:var(--accent); }
.v6__tab:focus-visible{ outline:2px solid var(--accent); outline-offset:-6px; }
.v6__tab[aria-selected="true"]{ background:var(--accent); color:var(--paper); }
.v6__tab[aria-selected="true"]:focus-visible{ outline-color:var(--paper); }
.v6__tab small{ display:block; font-family:var(--f-atelier); text-transform:none; font-size:14px; margin-top:4px; white-space:nowrap; color:var(--ink-2); font-weight:400; }
.v6__tab[aria-selected="true"] small{ color:inherit; }
.v6__body{ display:grid; gap:36px; }
@media (min-width:900px){ .v6__body{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; } }
.v6__lead{ margin:0 0 12px; }
.v6__para{ color:var(--ink-2); }

/* Planche technique : traits clairs sur le fond d'accent, grille fine et grille forte.
   Elle occupe toute la zone gauche, une ligne pointillée la sépare du détail */
@media (min-width:900px){
  .v6__body{ gap:0; align-items:stretch; }
  .bp{ margin:-28px 0 -28px -28px; }
  .v6__detail{ border-left:1.5px dashed var(--ink); margin:-28px 0; padding:28px 0 28px 36px; display:flex; flex-direction:column; }
  .prest__action{ margin-top:0; padding-top:28px; }
  .v6__detail .incl{ margin:auto 0; }   /* espace égal entre phrase, points et bouton */
  .v6__para{ margin-bottom:28px; }
}
.bp{
  --bp-bg:var(--accent); --bp-ink:#fff;
  --bp-soft:color-mix(in srgb,var(--bp-ink) 16%,var(--bp-bg));
  --bp-edge:color-mix(in srgb,#000 22%,var(--bp-bg));
  position:relative; display:flex; align-items:center; justify-content:center; padding:24px;
  background-color:var(--bp-bg); color:var(--bp-ink);
  background-image:
    linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:100px 100px,100px 100px,20px 20px,20px 20px;
}
.bp::after{ content:""; position:absolute; inset:10px; border:1px solid var(--bp-ink); opacity:.7; pointer-events:none; }
.bp__svg{ display:block; width:100%; height:auto; max-height:640px; overflow:visible; }
.bp__svg .bp-l{ fill:none; stroke:var(--bp-ink); stroke-width:1.1; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.bp__svg .bp-f{ fill:var(--bp-bg); stroke:var(--bp-ink); stroke-width:1.4; vector-effect:non-scaling-stroke; }
.bp__svg .bp-f2{ fill:var(--bp-soft); stroke:var(--bp-ink); stroke-width:1.4; vector-effect:non-scaling-stroke; }
.bp__svg .bp-e{ fill:var(--bp-edge); stroke:var(--bp-ink); stroke-width:1.1; vector-effect:non-scaling-stroke; }
.bp__svg .bp-a{ fill:var(--bp-soft); stroke:var(--bp-ink); stroke-width:1; vector-effect:non-scaling-stroke; }
.bp__svg .bp-d{ fill:none; stroke:var(--bp-ink); stroke-width:1; stroke-dasharray:4 4; opacity:.7; vector-effect:non-scaling-stroke; }
.bp__svg .bp-x{ fill:none; stroke:var(--bp-ink); stroke-width:.9; stroke-dasharray:14 3 2 3; opacity:.7; vector-effect:non-scaling-stroke; }
.bp__svg .bp-hl{ stroke:var(--bp-ink); stroke-width:.8; opacity:.85; }
.bp__svg .bp-cut{ stroke:var(--bp-ink); stroke-width:1; vector-effect:non-scaling-stroke; }
.bp__svg .bp-epais{ stroke-width:2.6; }
.bp__svg .bp-big{ font-family:var(--f-titre); font-size:26px; letter-spacing:.1em; }
.bp__svg .bp-c{ fill:none; stroke:var(--bp-ink); stroke-width:1.4; vector-effect:non-scaling-stroke; }
.bp__svg .bp-dot,.bp__svg .bp-logo{ fill:var(--bp-ink); stroke:none; }
.bp__svg .bp-ant{ stroke-width:1.6; stroke-linecap:round; }
.bp__svg text{ fill:var(--bp-ink); font-family:var(--f-lecture); }
.bp__svg .bp-t{ font-size:11px; letter-spacing:.08em; }
.bp__svg .bp-t.bp-n{ font-size:11px; letter-spacing:0; }

/* Planche au dessin du hero (13/10), sur le fond cyanotype : textes en Garamond en casse de phrase,
   légendes au fil fin sans point (petit S puis trait droit), comme les étiquettes du hero */
.bp--hero::after{ opacity:.45; }
.bp--hero .bp__svg .bp-dot{ display:none; }
.bp--hero .bp__svg .bp-leg{ fill:none; stroke:var(--bp-ink); stroke-width:1; opacity:.7; vector-effect:non-scaling-stroke; }
.bp--hero .bp__svg text{ font-family:var(--f-atelier); letter-spacing:0; }
.bp--hero .bp__svg .bp-t,.bp--hero .bp__svg .bp-t.bp-n{ font-size:15px; letter-spacing:0; }
.bp--hero .bp__svg .bp-nom{ font-size:20px; }
.bp--hero .bp__svg .bp-big{ font-family:var(--f-atelier); font-size:26px; letter-spacing:0; }

@media (max-width:699px){
  .v6__frame{ padding:18px; }
  .v6__tabs{ flex-direction:column; margin:-18px -18px 20px; }
  .v6__tab{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:20px; padding:12px 16px; border-right:0; border-bottom:1.5px solid var(--ink); }
  .v6__tab:last-child{ border-bottom:0; }
  .v6__tab small{ margin-top:0; font-size:14px; }
  .bp{ margin:-20px -18px 0; padding:16px 8px; }
  .bp__svg .bp-t{ font-size:13px; letter-spacing:.03em; }
  .bp__svg .bp-t.bp-n{ font-size:12px; letter-spacing:0; }
  .v6__detail{ border-top:1.5px dashed var(--ink); padding-top:24px; }
}
/* Mobile (14/10) : barres empilées qui s'ouvrent l'une après l'autre (accordéon) ; fermées sur fond clair (15/10) */
@media (max-width:699px){
  .v6__frame{ border:0; padding:0; background:none; }
  .v6__tabs{ margin:0; border:0; gap:8px; }
  .v6__tab{ position:relative; background:var(--paper-2); color:var(--ink); border:1.5px solid var(--ink); padding:14px 48px 14px 16px; font-size:20px; }
  .v6__tab{ display:block; }
  .v6__tab small{ margin-top:4px; color:var(--ink-2); }
  .v6__tab::after{ content:"+"; position:absolute; right:0; top:0; bottom:0; width:44px; display:grid; place-items:center;
    border-left:1px solid var(--line); font-family:var(--f-mono); font-size:20px; }
  .v6__tab[aria-selected="true"]{ background:var(--accent); border-color:var(--accent); color:var(--paper); }
  .v6__tab[aria-selected="true"] small{ color:rgba(255,255,255,.75); }
  .v6__tab[aria-selected="true"]::after{ border-left-color:rgba(255,255,255,.3); }
  /* La règle ordinateur retire le filet du dernier onglet : ici chaque barre garde son cadre entier */
  .v6__tab:last-child{ border:1.5px solid var(--ink); }
  .v6__tab[aria-selected="true"]:last-child{ border-color:var(--accent); }
  .v6__tab[aria-selected="true"]::after{ content:"−"; }
  .v6__body{ margin-top:-8px; border:1.5px solid var(--ink); border-top:0; background:var(--paper-2); gap:0; }
  .bp{ margin:0; }
  .v6__detail{ border-top:0; padding:20px 16px 22px; }
}
/* Mobile (15/10) : le texte d'abord, la planche dessous */
@media (max-width:699px){
  .v6__body{ display:flex; flex-direction:column; }
  .bp{ order:1; }
  .v6__detail{ padding-bottom:24px; }
}

/* ==========================================================================
   7. APPLICATIONS
   ========================================================================== */

/* Blocs empilés, un tirage cyanotype à la couleur de chaque app (choisi le 09/10).
   Chaque bloc se colle sous le header et le suivant le recouvre. Ses onglets sont décalés :
   une fois empilés, ils restent tous visibles et forment l'index (ajoutés le 10/10) */
.reals{ --top:calc(var(--header-h) + 16px); --tabh:40px; display:flex; flex-direction:column; gap:calc(28px + var(--tabh)); padding-top:var(--tabh); }
.real{
  --plan:var(--accent); --trait:#fff; --tel:54px;
  position:sticky; top:calc(var(--top) + var(--tabh)); box-sizing:border-box;
  box-shadow:0 -14px 30px -20px rgba(0,0,0,.5);
}
.real,.real__onglet{
  background-color:var(--plan); color:#fff;
  background-image:
    linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:100px 100px,100px 100px,20px 20px,20px 20px;
}
.real::after{ content:""; position:absolute; inset:10px; border:1px solid var(--trait); opacity:.7; pointer-events:none; }
.real.is-libre{ position:relative; top:auto; }
.real{ display:flex; flex-direction:column; }
.real__grid{ flex:1; display:grid; min-height:min(520px, calc(100svh - var(--top) - var(--tabh) - 80px)); }
.real__onglet{
  position:absolute; bottom:100%; left:calc(var(--i) * 100% / var(--n)); width:calc(100% / var(--n)); height:var(--tabh);
  box-sizing:border-box; padding:6px 4px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px;
  text-decoration:none; overflow:hidden; border-radius:6px 6px 0 0; background-position:0 0;
}
.real__tabnom{ display:block; font-family:var(--f-titre); font-weight:400; font-size:var(--t-h3); text-transform:uppercase; letter-spacing:.04em; line-height:1.1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.real__onglet:hover .real__tabnom,.real__onglet:focus-visible .real__tabnom{ color:var(--trait); text-decoration:underline; text-underline-offset:4px; }
.real__txt{ position:relative; z-index:1; display:flex; flex-direction:column; gap:12px; align-items:flex-start; justify-content:center; padding:20px 24px 26px; min-width:0; }
.real__meta{ margin:0; font-family:var(--f-atelier); font-size:var(--t-label); text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.78); }
.real__nom{ margin:0; font-family:var(--f-titre); font-weight:500; text-transform:uppercase; letter-spacing:.02em; font-size:var(--t-h2); line-height:1; }
.real__desc{ margin:0; font-size:var(--t-texte); color:rgba(255,255,255,.85); }
.real__infos{ margin:0; align-self:stretch; border-top:1px solid rgba(255,255,255,.28); }
.real__infos div{ display:grid; grid-template-columns:110px 1fr; gap:12px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.28); }
.real__infos dt{ color:rgba(255,255,255,.78); padding-top:3px; }
.real__infos dd{ margin:0; }
.real__act{ padding-top:4px; }
.real .btn--line{ color:#fff; border-color:#fff; }
.real .btn--line:hover{ color:var(--trait); border-color:var(--trait); }
.badge-fallback{
  display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 14px;
  background:#000; color:#fff; border-radius:7px; text-decoration:none;
}
.real__desc + .real__desc{ margin-top:-4px; display:none; }
.techs{ display:inline-flex; gap:14px; vertical-align:middle; margin-right:8px; }
.tech{ position:relative; display:inline-flex; outline:none; }
.tech svg{ width:22px; height:22px; fill:currentColor; }
.tech::after{ content:attr(data-nom); position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); padding:4px 8px; white-space:nowrap;
  background:#fff; color:var(--plan); font-family:var(--f-atelier); font-size:var(--t-label); text-transform:uppercase; letter-spacing:.12em;
  opacity:0; pointer-events:none; transition:opacity .15s; }
.tech:hover::after,.tech:focus-visible::after{ opacity:1; }
.stores{ display:flex; flex-wrap:wrap; gap:10px; }
.badge-logo .todo{ display:none; }
.badge-logo svg{ width:18px; height:18px; fill:currentColor; flex:none; }
.real__vis{ position:relative; display:grid; place-items:center; order:-1; height:150px; padding:16px; box-sizing:border-box; overflow:hidden; min-width:0; }
.real__date{ position:absolute; z-index:2; top:12px; right:18px; margin:0; color:var(--trait); line-height:1; }
.real__fils{ position:absolute; inset:0; width:100%; height:100%; z-index:2; overflow:visible; pointer-events:none; fill:none; stroke:var(--trait); stroke-width:1; }
.real__fils circle{ fill:var(--trait); stroke:none; }
.real__fils .halo{ fill:none; stroke:var(--trait); stroke-width:1; opacity:.6; }
.real__dessin{ display:contents; }
.real__ann{ position:absolute; z-index:2; display:none; white-space:nowrap; padding-bottom:4px; border-bottom:1px solid currentColor; color:var(--trait);
  font-family:var(--f-atelier); font-size:var(--t-label); text-transform:uppercase; letter-spacing:.12em; }
/* Légendes alignées sur le hero (13/10) : nom en Garamond, sans capitales ni soulignement */
.real__ann{ padding-bottom:0; border-bottom:0; font-family:var(--f-atelier); font-size:var(--t-sous-titre); text-transform:none; letter-spacing:normal; }
.real__fils{ stroke-width:1; opacity:.75; }
.real__ann--1{ top:16%; left:28px; }
.real__ann--2{ bottom:14%; right:28px; }
.real__ann--3{ bottom:14%; left:28px; }

/* Cadres au trait : téléphone, navigateur, tablette dessinée */
.real .f-tel{ width:var(--tel); aspect-ratio:9/19.5; border:2px solid var(--trait); border-radius:calc(var(--tel) * .18); padding:5px; box-sizing:border-box; flex:none; position:relative; }
.real .f-tel img{ width:100%; height:100%; object-fit:cover; object-position:top; border-radius:calc(var(--tel) * .14); display:block; }
.real .f-nav{ width:calc(var(--tel) * 2.6); max-width:100%; border:2px solid var(--trait); border-radius:8px; overflow:hidden; flex:none; }
.real .f-nav__bar{ display:flex; gap:5px; padding:7px 9px; border-bottom:1px solid var(--trait); }
.real .f-nav__bar i{ width:7px; height:7px; border-radius:50%; border:1px solid var(--trait); }
.real .f-nav img{ width:100%; display:block; }
.real__trace{ width:calc(var(--tel) * 2.2); max-width:100%; height:auto; fill:none; stroke:var(--trait); stroke-width:1.5; stroke-linecap:round; }
.real__trace .dash{ stroke-dasharray:4 4; }
.trio{ display:flex; justify-content:center; align-items:center; }
.trio .f-tel:nth-child(1){ transform:translateX(calc(var(--tel) * .17)) rotate(-6deg) scale(.88); }
.trio .f-tel:nth-child(2){ z-index:1; }
.trio .f-tel:nth-child(3){ transform:translateX(calc(var(--tel) * -.17)) rotate(6deg) scale(.88); }
.trio--web .f-tel{ width:calc(var(--tel) * .62); margin:calc(var(--tel) * .55) 0 0 calc(var(--tel) * -.4); }

/* Dernier bloc : la place de la prochaine app, au trait sur papier */
.real--vide{ --trait:var(--ink); background:var(--paper); color:var(--ink); border:1.5px dashed var(--ink); box-shadow:none; }
.real--vide .real__onglet{ background:var(--paper); color:var(--ink); border:1.5px dashed var(--ink); border-bottom:0; left:calc(var(--i) * 100% / var(--n) - 1.5px); }
.real--vide .real__onglet:hover .real__tabnom{ color:var(--accent); }
.real--vide::after{ display:none; }
.real--vide .real__meta,.real--vide .real__desc{ color:var(--ink-2); }
.real--vide .btn--line{ color:var(--ink); border-color:var(--ink); }
.real--vide .btn--line:hover{ color:var(--accent); border-color:var(--accent); }
.real--vide .f-tel{ transform:none !important; border-style:dashed; display:grid; place-items:center; font-family:var(--f-atelier); font-size:var(--t-chiffre); }

@media (min-width:900px){
  .real{ --tel:150px; }
  .real__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); }
  .real__txt{ gap:16px; padding:44px 48px; }
  .real__vis{ order:0; height:auto; padding:40px 32px; margin:10px 10px 10px 0; border-left:1px dashed color-mix(in srgb,var(--trait) 60%,transparent); }
  .real__ann{ display:block; }
  .real__date{ top:26px; right:28px; }
  .real__desc + .real__desc{ display:block; }
  .badge-logo .todo{ display:inline; }
  .reals{ --tabh:58px; gap:calc(48px + var(--tabh)); }
  .real__onglet{ align-items:flex-start; padding:8px 16px; }
}

/* Mobile (15/10) : les projets en icônes façon écran d'accueil ; la fiche monte par le bas sur le fond de sa planche */
.real__ligne,.apps-ic{ display:none; }
@media (max-width:699px){
  .applications .reals{ display:none; }
  .apps-ic{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px 10px; padding:8px 0; }
  .apps-ic__app{ all:unset; display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; min-width:0; -webkit-tap-highlight-color:transparent; }
  .apps-ic__app:focus-visible .apps-ic__ico{ outline:2px solid var(--accent); outline-offset:3px; }
  .apps-ic__app:active .apps-ic__ico{ transform:scale(.94); }
  .apps-ic__ico{ width:64px; height:64px; border-radius:15px; overflow:hidden; display:grid; place-items:center; transition:transform .15s;
    box-shadow:0 8px 16px -10px rgba(20,18,16,.45); }
  .apps-ic__ico img{ width:100%; height:100%; object-fit:cover; display:block; }
  .apps-ic__dessin{ --trait:#fff; width:100%; height:100%; display:grid; place-items:center; color:#fff; background-color:var(--plan);
    background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px); background-size:10px 10px; }
  .apps-ic__dessin svg{ width:44px; height:auto; fill:none; stroke:#fff; stroke-width:1.6; stroke-linecap:round; }
  .apps-ic__dessin svg circle{ fill:#fff; stroke:none; }
  .apps-ic__dessin .real__trace{ width:46px; }
  .apps-ic__ico--vide{ border:1.5px dashed var(--ink); box-shadow:none; font-family:var(--f-atelier); font-size:30px; color:var(--ink); }
  .apps-ic__nom{ max-width:100%; font-family:var(--f-atelier); font-size:var(--t-petit); color:var(--ink); text-align:center; line-height:1.2;
    overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
}
.feuille[hidden]{ display:none; }
.feuille{ position:fixed; inset:0; z-index:80; }
.feuille__fond{ position:absolute; inset:0; background:rgba(20,18,16,.5); animation:feuilleFond .25s both; }
.feuille__corps{ position:absolute; left:0; right:0; bottom:0; max-height:90svh; overflow:auto; overscroll-behavior:contain; color:#fff;
  border-radius:18px 18px 0 0; padding:14px 0 calc(24px + env(safe-area-inset-bottom)); animation:feuilleMonte .35s cubic-bezier(.2,.7,.2,1) both;
  background-color:var(--plan);
  background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:100px 100px,100px 100px,20px 20px,20px 20px; }
.feuille__corps.is-vide{ background:var(--paper); color:var(--ink); }
.feuille__corps::before{ content:""; display:block; width:40px; height:4px; margin:0 auto 4px; border-radius:2px; background:currentColor; opacity:.4; }
/* La croix reste en haut pendant qu'on fait défiler la fiche, au-dessus des dessins */
.feuille__x{ position:sticky; top:0; z-index:3; display:block; margin:-26px 14px -12px auto; width:38px; height:38px; border:1px solid currentColor; border-radius:50%;
  background:var(--plan); color:inherit; font-size:20px; cursor:pointer; }
.feuille__corps.is-vide .feuille__x{ background:var(--paper); }
/* La planche dans la fiche : sans cadre ni fond propre, dessins agrandis, texte aéré */
.feuille .real{ position:relative; top:auto; box-shadow:none; background:none; color:inherit; }
.feuille .real::after,.feuille .real__onglet,.feuille .real__date,.feuille .real__ann,.feuille .real__fils{ display:none; }
.feuille .real--vide{ border:0; }
.feuille .real__grid{ min-height:0; }
.feuille .real__vis{ height:300px; padding:26px 12px 8px; --tel:96px; }
.feuille .real--vide .real__vis{ height:200px; --tel:70px; }
.feuille .real__txt{ padding:12px 24px 8px; gap:18px; }
.feuille .real__nom{ font-size:34px; }
.feuille .real__ligne{ display:block; margin:-12px 0 0; font-family:var(--f-atelier); font-size:var(--t-sous-titre); opacity:.8; }
.feuille .real__desc{ line-height:1.65; }
.feuille .real__desc + .real__desc{ display:block; margin-top:0; }
.feuille .real__infos div{ padding:12px 0; grid-template-columns:120px 1fr; }
.feuille .real__act{ padding-top:6px; }
@keyframes feuilleMonte{ from{ transform:translateY(100%); } }
@keyframes feuilleFond{ from{ opacity:0; } }

/* ==========================================================================
   8. MÉTHODE
   ========================================================================== */

.methode{ position:relative; }
.methode__pin{ padding:var(--section-y) 0 48px; }
.methode__head .h2{ margin-bottom:32px; }
.ruban{ overflow:hidden; }
.ruban__track{
  position:relative; display:flex; gap:40px; padding:36px max(var(--gut),calc((100vw - var(--wrap)) / 2 + var(--gut))) 24px;
  width:max-content; align-items:flex-start;
}
.ruban__fil{ position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.ruban__fil .fil-base{ fill:none; stroke:var(--line); stroke-width:1.2; stroke-dasharray:6 6; }
.ruban__fil .fil-progress{ fill:none; stroke:var(--accent); stroke-width:1.6; }

.etape{
  position:relative; z-index:1; width:320px; flex:0 0 320px; padding:30px 24px 22px;
  background:var(--paper); border:1px solid var(--line);
  box-shadow:0 14px 24px -20px rgba(20,18,16,.3);
  display:flex; flex-direction:column; gap:10px;
  max-height:80vh; overflow:auto;
  transition:border-color .3s;
}
.etape:nth-child(odd){ transform:rotate(-1.2deg); margin-top:28px; }
.etape:nth-child(even){ transform:rotate(1deg); }
.etape__tape{ position:absolute; top:-1px; left:50%; width:70px; height:16px; margin-left:-35px; background:rgba(220,226,232,.75); }
.etape__num{
  width:40px; height:40px; display:grid; place-items:center; border-radius:50%;
  background:var(--ink); color:var(--paper); font-family:var(--f-mono); font-size:14px;
}
.etape__title{ margin:4px 0 0; font-family:var(--f-titre); font-weight:var(--titre-weight); text-transform:var(--titre-case); letter-spacing:var(--titre-track); font-size:calc(28px * var(--titre-scale) / .62 * .72); line-height:1.05; }
.etape__phrase{ margin:0; font-size:15px; color:var(--ink-2); }
.etape__duree{ margin:0; font-family:var(--f-mono); font-size:13px; color:var(--ink); }
.etape.is-active{ border-color:var(--accent); }
.etape.is-active .etape__num{ background:var(--accent); }

/* Sans ruban figé (mobile, ou GSAP absent) : défilement horizontal natif */
.methode.is-native .ruban{ overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; }
.methode.is-native .etape{ scroll-snap-align:center; }
@media (max-width:699px){
  .etape{ width:84vw; flex-basis:84vw; }
  .ruban__track{ gap:20px; }
}

/* Mobile (14/10) : ruban à glisser, fiches droites et resserrées */
@media (max-width:699px){
  .methode__pin{ padding-bottom:16px; }
  .methode__head .h2{ margin-bottom:8px; }
  .etape{ transform:none; margin-top:0; max-height:none; padding:22px 20px 18px; }
  .ruban__track{ padding-top:20px; }
}

/* ==========================================================================
   9. PRIX · configurateur
   ========================================================================== */

.config{ position:relative; border:1px solid var(--line); background:var(--paper); min-height:520px; display:flex; flex-direction:column; }
.config__start{ display:flex; flex-wrap:wrap; gap:12px; padding:24px; border-bottom:1px solid var(--line-soft); }
.node-start{
  min-height:48px; padding:0 22px; cursor:pointer; background:var(--paper);
  border:1px solid var(--ink); font-family:var(--f-mono); font-size:13px;
}
.node-start[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }

/* Pipeline façon GitHub Actions : une tâche par étape, colonnes en parallèle */
.config__plan{ position:relative; padding:32px 24px; overflow-x:auto; min-height:300px; }
.pipe{ display:flex; gap:46px; align-items:center; width:max-content; min-height:240px; }
.pipe__col{ display:flex; flex-direction:column; gap:14px; }
.pipe__fils{ position:absolute; left:0; top:0; pointer-events:none; overflow:visible; }
.pipe__fils path{ fill:none; stroke:var(--accent); stroke-width:1.6; }
.pipe__fils path.is-attente{ stroke:var(--line); stroke-dasharray:4 4; }
.pipe__fils circle{ fill:var(--paper); stroke:var(--accent); stroke-width:1.4; }
.pipe__job{
  display:flex; align-items:center; gap:8px; width:220px; padding:8px 12px; background:var(--paper); border:1px solid var(--line);
  border-radius:6px; font-family:var(--f-titre); font-weight:500; font-size:var(--t-sous-titre); line-height:1.25; color:var(--ink); text-align:left;
}
.pipe__job i{ width:14px; height:14px; border-radius:50%; flex:none; border:1.5px solid var(--accent); background:var(--accent); position:relative; }
.pipe__job i::after{ content:""; position:absolute; left:3.5px; top:1.5px; width:3px; height:6px; border:solid var(--paper); border-width:0 1.5px 1.5px 0; transform:rotate(45deg); }
.pipe__job span{ flex:1; min-width:0; }
/* Mêmes styles que les étiquettes du schéma du hero : titre (xp__caption-name) et annotation (legende) */
.pipe__job small{ display:block; margin-top:2px; font-family:var(--f-atelier); font-weight:400; font-style:italic; font-size:var(--t-annotation); line-height:1.3; letter-spacing:normal; color:var(--ink-2); }
.pipe__job em{ font-family:var(--f-atelier); font-weight:400; font-style:normal; color:var(--mute); font-size:var(--t-petit); white-space:nowrap; }
.pipe__job.is-ignore{ color:var(--mute); }
.pipe__job.is-ignore i{ background:var(--paper); border-color:var(--line); }
.pipe__job.is-ignore i::after{ left:2px; top:5px; width:7px; height:0; border-width:0 0 1.5px 0; border-color:var(--line); transform:none; }
.pipe__job.is-attente i,button.pipe__job i{ background:var(--paper); border-style:dashed; }
.pipe__job.is-attente i::after,button.pipe__job i::after{ display:none; }
button.pipe__job{ cursor:pointer; }
.pipe__job.is-chosen{ border-color:var(--accent); background:var(--accent-soft); }
.pipe__job.is-modif i,.pipe__job.is-modif.is-ignore i{ border-style:solid; }
.pipe__job.is-modif i{ background:var(--accent); }
.pipe__job.is-modif.is-ignore i{ background:var(--paper); }
.pipe__job.is-modif i::after{ display:block; }
.pipe__job.is-modif:hover,.pipe__job.is-modif:focus-visible,.pipe__grp.is-modif:hover,.pipe__grp.is-modif:focus-visible{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); outline:0; }
.pipe__grp.is-modif{ cursor:pointer; }
button.pipe__job:hover,button.pipe__job:focus-visible{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); outline:0; }
.pipe__grp{ position:relative; display:flex; flex-direction:column; gap:6px; padding:22px 8px 8px; border:1px solid var(--line); border-radius:6px; background:var(--paper-2); }
.pipe__grp > b{ position:absolute; top:4px; left:9px; font-weight:400; font-family:var(--f-atelier); font-size:var(--t-label); color:var(--mute); letter-spacing:.04em; }
.pipe__grp.is-current{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
/* La question en cours se lit d'abord : titre en taille texte, au-dessus des options */
.pipe__grp.is-current{ padding-top:10px; }
.pipe__grp.is-current > b{ position:static; padding:0 2px 4px; font-size:var(--t-sous-titre); line-height:1.3; letter-spacing:0; color:var(--ink); max-width:204px; font-family:var(--f-titre); font-weight:500; }
/* Les réponses s'écrivent en petit, comme le choix affiché sur une carte répondue */
.pipe__grp.is-current > button.pipe__job span{ font-family:var(--f-atelier); font-weight:400; font-style:italic; font-size:var(--t-annotation); color:var(--ink-2); }
.pipe__mix.is-current > b{ max-width:none; }
.pipe__grp .pipe__job{ width:204px; }
.pipe__mix{ width:380px; }
.pipe__mix .pipe__job{ width:auto; }
.pipe__pas{ flex:none; display:flex; align-items:center; gap:6px; }
.pipe__pas button{ width:26px; height:26px; border:1px solid var(--line); border-radius:50%; background:var(--paper); cursor:pointer; font-family:var(--f-atelier); font-size:16px; line-height:1; color:var(--ink); }
.pipe__pas button:hover:not(:disabled),.pipe__pas button:focus-visible{ border-color:var(--accent); outline:0; }
.pipe__pas button:disabled{ opacity:.35; cursor:default; }
.pipe__pas output{ min-width:14px; text-align:center; font-family:var(--f-atelier); font-size:var(--t-texte); }
.pipe__mix-pied{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 2px 0; font-family:var(--f-atelier); font-size:var(--t-label); color:var(--mute); }
.pipe__valider{ padding:6px 14px; border:1px solid var(--ink); background:var(--ink); color:var(--paper); cursor:pointer; font-family:var(--f-atelier); font-size:var(--t-petit); border-radius:4px; }
.pipe__valider:disabled{ background:var(--paper); color:var(--mute); border-color:var(--line); cursor:default; }
.pipe .is-new{ animation:pipePose .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes pipePose{ from{ opacity:0; transform:translateY(8px); } }

.config__pied{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; padding:24px; border-top:1px solid var(--line-soft); }
.config__pied .compteur{ position:static; margin:0 0 0 auto; }
.config__end-actions{ display:flex; flex-wrap:wrap; gap:12px; }

.compteur{ width:min(280px,100%); }
.compteur__value{ justify-content:flex-start; gap:8px; color:var(--ink); }
.rolls{ display:inline-flex; font-family:var(--f-mono); font-size:34px; line-height:1; height:1em; overflow:hidden; }
.roll{ display:inline-block; height:1em; overflow:hidden; }
.roll__strip{ display:flex; flex-direction:column; transition:transform .9s cubic-bezier(.2,.9,.25,1); }
.roll__strip span{ height:1em; }
.roll--sep{ width:.35em; }
.compteur__unit{ font-family:var(--f-mono); font-size:22px; }
.compteur__days{ color:var(--mute); }
.prix__mention{ margin:20px 0 0; font-family:var(--f-mono); font-size:12.5px; color:var(--mute); }

/* Mobile : le pipeline descend, colonnes empilées */
@media (max-width:699px){
  .config__plan{ padding:20px 16px; overflow:visible; }
  .pipe{ flex-direction:column; align-items:stretch; width:auto; gap:28px; }
  .pipe__col{ flex-direction:row; flex-wrap:wrap; gap:10px; }
  .pipe__col > *{ flex:1 1 140px; }
  .pipe__job,.pipe__grp .pipe__job{ width:auto; }
}

/* Mobile (15/10) : sans cadre ni fils. Type de projet en onglets soulignés, le montant collé sous le header
   comme une cote ; seule la question en cours garde sa carte */
@media (max-width:699px){
  .config{ border:0; background:none; min-height:0; }
  .config__start{ order:-2; padding:0; gap:0; flex-wrap:nowrap; border:0; border-bottom:1.5px solid var(--ink); }
  .node-start{ flex:1; border:0; min-height:46px; background:none; color:var(--ink-2);
    font-family:var(--f-titre); font-size:var(--t-sous-titre); text-transform:uppercase; letter-spacing:.04em; }
  .node-start[aria-pressed="true"]{ background:none; color:var(--accent); box-shadow:inset 0 -3px 0 var(--accent); }
  .config__pied{ order:-1; position:sticky; top:var(--header-h); z-index:5; margin:0 calc(var(--gut) * -1); padding:10px var(--gut) 12px;
    background:var(--paper-2); border:0; border-bottom:1px dashed var(--ink-2); gap:10px; }
  .config__pied .compteur{ order:-1; width:100%; margin:0; border:0; background:none; display:flex; align-items:baseline; justify-content:space-between; }
  .config__pied .cartouche__row{ padding:0; border:0; }
  .config__pied .compteur__value{ order:-1; color:var(--accent); }
  .config__end,.config__end-actions{ width:100%; }
  .config__end-actions{ gap:8px; flex-wrap:nowrap; }
  .config__end-actions .btn{ flex:1; justify-content:center; padding:0 10px; }
  .config__plan{ padding:20px 0 28px; min-height:0; }
  .pipe__fils{ display:none; }
  .pipe__col{ display:contents; }
  .pipe .pipe__job.is-ignore{ opacity:.5; }
}
/* Mobile : les réponses données en arborescence (15/10), comme une nomenclature. Tronc vertical, une branche par réponse,
   le choix au bout d'un trait ; les fonctionnalités en sous-branches */
@media (max-width:699px){
  .pipe{ flex-direction:column; align-items:stretch; gap:0; min-height:0; }
  .pipe .pipe__job:not(.pipe__grp.is-current .pipe__job):not(.pipe__mix .pipe__job),
  .pipe__grp.is-modif{
    position:relative; flex:none; display:flex; align-items:baseline; gap:10px; width:auto; min-height:0; margin:0; padding:7px 0 7px 26px;
    border:0; border-radius:0; background:none; box-shadow:none; animation:none; font-family:var(--f-lecture); font-size:var(--t-petit); }
  .pipe__grp.is-modif{ display:block; }
  /* Tronc et branche : trait vertical continu, trait horizontal à mi-hauteur de la ligne */
  .pipe .pipe__job:not(.pipe__grp .pipe__job)::before,.pipe__grp.is-modif::before,
  .pipe__grp.is-modif > .pipe__job::before{ content:""; position:absolute; left:7px; top:0; bottom:0; border-left:1px solid var(--ink-2); }
  .pipe .pipe__job:not(.pipe__grp .pipe__job)::after,.pipe__grp.is-modif::after,
  .pipe__grp.is-modif > .pipe__job::after{ content:""; position:absolute; left:7px; top:calc(7px + .65em); width:12px; border-top:1px solid var(--ink-2); }
  .pipe__col:first-child > .pipe__job:first-child::before{ top:calc(7px + .65em); }
  .pipe .pipe__job:not(.pipe__grp.is-current .pipe__job):not(.pipe__mix .pipe__job) i{ display:none; }
  .pipe .pipe__job:not(.pipe__grp.is-current .pipe__job):not(.pipe__mix .pipe__job) > span{ flex:1; display:flex; align-items:baseline; gap:10px; min-width:0;
    font-family:var(--f-lecture); font-weight:400; font-size:var(--t-petit); line-height:1.3; color:var(--ink); }
  /* Le choix au bout d'un trait qui remplit la ligne */
  .pipe .pipe__job:not(.pipe__grp.is-current .pipe__job):not(.pipe__mix .pipe__job) small{ flex:1; display:flex; align-items:baseline; gap:10px; margin:0;
    font-family:var(--f-lecture); font-style:normal; font-size:var(--t-petit); color:var(--ink); text-align:right; }
  .pipe .pipe__job:not(.pipe__grp.is-current .pipe__job):not(.pipe__mix .pipe__job) small::before{ content:""; flex:1; min-width:14px; border-top:1px solid var(--ink-2); transform:translateY(-.3em); }
  .pipe .pipe__job:not(.pipe__grp.is-current .pipe__job):not(.pipe__mix .pipe__job) em{ flex:none; min-width:36px; text-align:right; font-family:var(--f-lecture); font-size:var(--t-label); color:var(--mute); }
  .pipe__grp.is-modif > b{ position:static; display:block; padding:0; max-width:none; font-family:var(--f-lecture); font-weight:400; font-size:var(--t-petit); color:var(--ink); }
  .pipe__grp.is-modif > .pipe__job{ margin-left:0; padding-left:26px; padding-bottom:3px; }
  .pipe__grp.is-modif > .pipe__job:last-child::before{ bottom:auto; height:calc(7px + .65em); }
  .pipe__grp.is-current,.pipe__job.is-attente{ margin:14px 0 0; }
  /* Le tronc s'arrête sur la dernière branche (classe posée par configurateur.js) */
  .pipe .is-fin::before{ bottom:auto; height:calc(7px + .65em); }
}

/* ==========================================================================
   10. CONTACT
   ========================================================================== */

.contact__in{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.contact__in > *:not(.contact__titre):not(.eyebrow){ width:100%; max-width:760px; }
.contact__in .fc,.contact__in .jointe{ text-align:left; }
/* Titre sur une ligne : la taille suit la largeur sur petit écran */
.contact__titre{ white-space:nowrap; font-size:min(var(--t-h1), 8.9vw); }
.fc{ position:relative; padding:28px; background:var(--paper); border:1px solid var(--ink); }
.volets__top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; font-family:var(--f-mono); font-size:12px; color:var(--mute); }
.volets__back{ border:0; background:none; cursor:pointer; font-family:var(--f-mono); font-size:12px; color:var(--ink-2); padding:6px 0; }
.volet{ border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
.volet__q{ font-family:var(--f-titre); font-size:calc(32px * var(--titre-scale) / .62 * .72); font-weight:var(--titre-weight); text-transform:var(--titre-case); letter-spacing:var(--titre-track); padding:0; margin-bottom:6px; }
.choices{ display:flex; flex-wrap:wrap; gap:10px; }
.choice{ position:relative; }
.choice input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.choice span{ display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border:1px solid var(--line); font-family:var(--f-mono); font-size:13px; }
.choice input:checked + span{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.choice input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field__label{ font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.field input,.field select,.field textarea{
  font:inherit; font-size:16px; color:var(--ink); background:var(--paper-2);
  border:0; border-bottom:1px solid var(--ink-2); border-radius:0; padding:12px 4px; width:100%;
}
.field textarea{ resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-bottom:2px solid var(--accent); }
.volet__estimer{ font-family:var(--f-mono); font-size:12.5px; color:var(--ink-2); }
.hp{ position:absolute; left:-9999px; }
.piece__ligne{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; background:var(--paper-2); border-bottom:1px solid var(--ink-2); padding:12px 4px; }
.piece__choisir{ position:relative; color:var(--ink); text-decoration:underline; cursor:pointer; overflow-wrap:anywhere; }
.piece__choisir:focus-within{ outline:2px solid var(--accent); outline-offset:2px; }
.jointe{ border:1px dashed var(--accent); padding:12px 14px; background:var(--accent-soft); font-family:var(--f-mono); font-size:12.5px; }
/* Type de projet : liste numérotée dans le style du menu, la cote se trace sous le mot survolé ou choisi */
.types{ display:flex; flex-direction:column; margin:-8px 0 0; }
.types__item{ position:relative; display:flex; align-items:baseline; gap:20px; padding:16px 0; cursor:pointer; transition:opacity .25s, color .25s; }
.types__item + .types__item{ border-top:1px solid var(--line); }
.types__item input{ position:absolute; opacity:0; inset:0; cursor:pointer; margin:0; }
.types__n{ font-family:var(--f-atelier); font-size:var(--t-label); letter-spacing:.12em; color:var(--mute); }
.types__l{ position:relative; font-family:var(--f-titre); font-weight:var(--titre-weight); text-transform:var(--titre-case); letter-spacing:.02em; font-size:var(--t-h2); line-height:1.1; }
.types__l::before{ content:""; position:absolute; left:0; right:0; bottom:-.2em; height:9px;
  background:
    linear-gradient(currentColor,currentColor) 0 50% / 100% 1px no-repeat,
    linear-gradient(currentColor,currentColor) 0 0 / 1px 100% no-repeat,
    linear-gradient(currentColor,currentColor) 100% 0 / 1px 100% no-repeat;
  clip-path:inset(0 100% 0 0); transition:clip-path .55s cubic-bezier(.7,0,.2,1); }
.types:hover .types__item{ opacity:.5; }
.types .types__item:hover,.types__item:focus-within,.types__item:has(input:checked){ opacity:1; }
.types__item:hover .types__l::before,.types__item:has(input:focus-visible) .types__l::before,.types__item:has(input:checked) .types__l::before{ clip-path:inset(0 0 0 0); }
.types__item:has(input:checked){ color:var(--accent); }
.types__item:has(input:checked) .types__n{ color:var(--accent); }
/* Pas encore d'estimation pour une app ou un site : zone en pointillés qui renvoie au simulateur */
.estimer-zone{ display:flex; align-items:center; justify-content:center; min-height:140px; padding:20px; border:1.5px dashed var(--line);
  font-family:var(--f-titre); font-weight:500; font-size:var(--t-sous-titre); color:var(--ink); text-decoration:none; transition:border-color .2s, background .2s; }
.estimer-zone[hidden]{ display:none; }
.estimer-zone:hover,.estimer-zone:focus-visible{ border-color:var(--accent); background:var(--accent-soft); outline:0; }
/* Capture du simulateur, réduite à la largeur de l'encart */
.jointe__ecran{ position:relative; overflow:hidden; background:var(--paper); border:1px solid var(--line); }
.jointe__scene{ position:absolute; top:0; left:0; transform-origin:0 0; overflow:visible !important; pointer-events:none; }
.jointe__head{ display:flex; justify-content:space-between; margin-bottom:6px; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; font-size:11px; }
.jointe__remove{ border:0; background:none; cursor:pointer; font-family:var(--f-mono); font-size:11px; text-decoration:underline; }
.jointe__total{ margin:8px 0 0; color:var(--ink); }
/* Rendu PNG pour le mail, hors écran le temps de la capture */
.jointe__photo{ position:fixed; left:-99999px; top:0; padding:24px; background:#fff; width:max-content; }
.jointe__photo-total{ margin:16px 0 0; font-family:var(--f-atelier); font-size:var(--t-sous-titre); color:var(--ink); }
.volets__error{ margin:16px 0 0; color:#9B2C1F; font-family:var(--f-mono); font-size:12.5px; }
.volets__actions{ display:flex; justify-content:flex-end; margin-top:24px; }

.tampon{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb,var(--paper) 88%,transparent); }
/* Tampon de validation : capitales du titre, double filet à l'accent, posé de biais */
.tampon__mark{
  font-family:var(--f-titre); font-weight:500; font-size:var(--t-h2); letter-spacing:.06em; text-transform:uppercase; color:var(--accent);
  border:3px solid var(--accent); outline:1px solid var(--accent); outline-offset:4px; padding:10px 26px; transform:rotate(-6deg);
  animation:stamp .35s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes stamp{ from{ transform:rotate(-6deg) scale(1.8); opacity:0; } to{ transform:rotate(-6deg) scale(1); opacity:1; } }

/* Formulaire de contact : volets à onglets */
form.fc :is(input,textarea,select){ font-family:var(--f-atelier); }
.onglets{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); margin:-28px -28px 28px; border-bottom:1px solid var(--ink); }
.onglet{ all:unset; box-sizing:border-box; display:flex; flex-direction:column; gap:2px; padding:14px 16px 16px; cursor:pointer; border-right:1px solid var(--line); min-width:0; }
.onglet:last-of-type{ border-right:0; }
.onglet:disabled{ cursor:default; opacity:.45; }
.onglet:focus-visible{ outline:2px solid var(--accent); outline-offset:-4px; }
.onglet__n{ font-family:var(--f-atelier); font-size:var(--t-label); letter-spacing:.12em; color:var(--mute); }
.onglet__t{ font-family:var(--f-titre); font-weight:500; font-size:var(--t-sous-titre); line-height:1.25; }
.onglet__r{ font-family:var(--f-atelier); font-style:italic; font-size:var(--t-annotation); color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.onglet.is-on{ background:var(--accent-soft); }
.onglet.is-on .onglet__n,.onglet.is-done .onglet__n{ color:var(--accent); }
.onglets__fil{ position:absolute; left:0; right:0; bottom:-1px; height:2px; }
.onglets__fil i{ display:block; height:100%; background:var(--accent); width:calc((var(--avance,0) * 2 + 1) / 3 * 100%); transition:width .4s cubic-bezier(.65,0,.35,1); }
.fc--onglets .volet__q{ display:none; }
@media (max-width:699px){ .onglet{ padding:10px 12px; } .onglet__r{ display:none; } }

.copy{ border:0; background:none; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px; font-size:16px; text-align:left; word-break:break-all; }
.copy small{ font-family:var(--f-mono); font-size:11px; color:var(--mute); text-decoration:none; }

/* ==========================================================================
   11. PIED DE PAGE
   ========================================================================== */

/* Pied de page. Commun : le nom hachuré au style du titre du hero, en plus petit */
.pf{ position:relative; padding:72px 0 28px; border-top:1px solid var(--line); overflow:hidden; }
.pf__marque{ margin:0 0 40px; white-space:nowrap; font-family:var(--f-h1); font-weight:400; font-size:clamp(30px,6.4vw,84px); line-height:1.1; letter-spacing:.02em; color:transparent; }
.pf__marque .h1__line{ display:inline-block; }
.pf__bloc{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0; }
.pf__t{ margin:0 0 4px; font-family:var(--f-atelier); font-size:var(--t-label); font-weight:400; text-transform:uppercase; letter-spacing:.12em; color:var(--mute); }
.pf__lien{ display:inline-flex; align-items:center; gap:10px; font-family:var(--f-atelier); font-size:var(--t-texte); color:var(--ink); text-decoration:none; }
.pf__lien:hover,.pf__lien:focus-visible{ color:var(--accent); }
.ico{ width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; }
.ico__plein{ fill:currentColor; stroke:none; }
.pf__bas{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:48px; padding-top:16px; border-top:1px solid var(--line);
  font-family:var(--f-atelier); font-size:var(--t-petit); color:var(--mute); }
.pf__haut{ font-family:var(--f-atelier); font-size:var(--t-petit); color:var(--ink-2); text-decoration:none; }
.pf__haut:hover{ color:var(--accent); }
.pf__cols{ display:grid; gap:32px; }
/* Colonnes centrées dans la largeur, texte aligné à gauche */
@media (min-width:700px){ .pf__cols{ grid-template-columns:repeat(3,auto); justify-content:space-evenly; } }
/* Tête : le nom centré, mesuré par une ligne de cote de plan */
.pf__tete{ display:flex; flex-direction:column; align-items:center; margin-bottom:56px; }
.pf__tete .pf__marque{ margin:0; }
/* La jambe du g descend sous la ligne : le hachuré et le contour ont besoin de place en bas */
.pf__marque .h1__line{ padding-bottom:.28em; margin-bottom:-.28em; }
.pf__cote{ position:relative; display:block; width:min(100%,var(--cote-w,600px)); height:9px; margin-top:12px;
  background:linear-gradient(var(--ink-2),var(--ink-2)) 0 50% / 100% 1px no-repeat, linear-gradient(var(--ink-2),var(--ink-2)) 0 0 / 1px 100% no-repeat, linear-gradient(var(--ink-2),var(--ink-2)) 100% 0 / 1px 100% no-repeat; }
.pf__cote::after{ content:attr(data-cote); position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:0 8px; background:var(--paper-2);
  font-family:var(--f-atelier); font-size:var(--t-label); letter-spacing:.08em; color:var(--ink-2); }

/* Mobile (14/10) : cadre resserré, onglets réduits au numéro et au titre, bouton pleine largeur */
@media (max-width:699px){
  .fc{ padding:18px; }
  .onglets{ margin:-18px -18px 20px; }
  .types__l{ font-size:24px; }
  .volets__actions .btn{ flex:1; justify-content:center; }
}
/* Mobile (15/10) : le nom sur toute la largeur, hachures plus larges
   et lettres un peu écartées pour que le gribouillage respire à cette taille ; liens en étiquettes */
@media (max-width:699px){
  .pf{ padding:40px 0 20px; }
  .pf__marque{ font-size:9.6vw; letter-spacing:.05em; --hatch-line:.03em; --hatch-step:.07em; }
  .pf__tete{ margin-bottom:28px; }
  .pf__cols{ gap:18px; }
  .pf__bloc{ flex-direction:row; flex-wrap:wrap; gap:6px; }
  .pf__t{ flex:0 0 100%; margin:0; }
  .pf__lien{ gap:8px; padding:8px 10px; background:var(--paper); border:1px solid var(--line); font-size:var(--t-petit); }
  .pf__lien::after{ content:"↗"; font-family:var(--f-mono); color:var(--ink-2); }
  .pf__lien[href^="#"]::after{ content:"↓"; }
  .pf__lien .ico{ width:15px; height:15px; }
  .pf__bas{ margin-top:24px; }
}
/* Mobile : sans plan du site (le menu le donne déjà), informations en petit dans la dernière ligne */
@media (max-width:699px){
  .pf__cols > nav{ display:none; }
  .pf__cols > :last-child .pf__t{ display:none; }
  .pf__cols > :last-child .pf__lien{ padding:0; border:0; background:none; font-size:var(--t-petit); color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; }
  .pf__cols > :last-child .pf__lien::after{ content:none; }
  .pf__cols > :last-child{ gap:16px; }
}



/* ==========================================================================
   12 bis. ÉCHELLE TYPO, adoptée le 06/10 (référence : /design-system)
   Chaque style de texte a sa ligne dans /design-system, variantes italique et gras comprises.
   Exceptions voulues : titre du hero, marque, tampon, phonétique, textes des schémas.
   ========================================================================== */
:root .menu__list a{ font-size:var(--t-h1); }
:root :is(.etape__title,.volet__q){ font-size:var(--t-h2); letter-spacing:.02em; }
:root .v6__tab{ font-size:var(--t-h2); font-weight:500; letter-spacing:.02em; }   /* h2 */
:root .cartouche__rot > span{ font-weight:400; letter-spacing:.04em; }   /* h3 */
:root :is(.sous-titre,.hero__def p){ font-family:var(--f-atelier); font-size:var(--t-sous-titre); letter-spacing:normal; }
:root :is(.incl li,dd,.etape__phrase,.v6__para){ font-size:var(--t-texte); }
:root .v6__lead{ font-family:var(--f-titre); font-size:var(--t-h3); font-weight:600; text-transform:uppercase; letter-spacing:.04em; line-height:1.25; }   /* h3 gras, titre de partie */
:root :is(.prix__mention,.volet__estimer,.cartouche--final span,.cartouche--final a,.cf__sign,.xp__open,.sound-toggle__label,
  .cartouche__row > span:not(.rolls):not(.compteur__unit),.volets__count,.volets__back,.btn,.menu__foot a,.etape__duree,
  .node-start,.choice span,.tampon p,.v6__tab small,.etape__num,.jointe__remove,.copy small,.badge-fallback){
  font-family:var(--f-atelier); font-size:var(--t-petit); letter-spacing:.02em;
}
:root :is(dt,.field__label,.jointe__head span,.eyebrow,.menu__num,.cf__id strong,.hero__def .sc){
  font-family:var(--f-atelier); font-size:var(--t-label); font-weight:400; text-transform:uppercase; letter-spacing:.12em;
}
:root :is(.rolls,.compteur__unit,.real__date){ font-family:var(--f-atelier); font-size:var(--t-chiffre); }
/* Annotation (annotation et légende fusionnées le 07/10). Dans le SVG du hero, la taille reste en unités du dessin */
:root .xp__desc{ font-family:var(--f-atelier); font-style:italic; }
:root .xp__caption-name{ font-size:var(--t-sous-titre); }
:root :is(.xp__caption-desc,.legende){ font-family:var(--f-atelier); font-style:italic; font-size:var(--t-annotation); letter-spacing:normal; }

/* ==========================================================================
   13. MOUVEMENT RÉDUIT · état final, rien ne bouge
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .xp__label{ opacity:1; }
  .xp__desc{ opacity:1; }
  .hero__title{ opacity:.1; }
  .methode .ruban{ overflow:visible; }
  .methode .ruban__track{ flex-direction:column; width:auto; max-width:var(--wrap); margin:0 auto; padding:24px var(--gut); }
  .methode .etape{ width:100%; flex-basis:auto; max-width:680px; max-height:none; transform:none !important; margin-top:0; }
  .ruban__fil{ display:none; }
  .menu{ clip-path:none; }
  .menu .menu__list li,.menu .menu__foot{ opacity:1; transform:none; }
  .rolls .roll__strip{ transition:none; }
}