/* ============================================================
   SAMAJ PROMOTION · premier écran
   DA : voir DA.md à la racine. Référentiel anti-design IA v7.2.
   Prototype de validation. Séquence 01 uniquement.
   ============================================================ */

/* --- Polices auto-hébergées. SIL OFL 1.1, aucune licence payante. --- */
@font-face{font-family:Fraunces;font-style:normal;font-weight:300 500;font-display:swap;
  src:url(fonts/fraunces-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Fraunces;font-style:normal;font-weight:300 500;font-display:swap;
  src:url(fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113}
@font-face{font-family:Archivo;font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/archivo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113}

:root{
  /* Palette client. Voir DA.md pour la justification de chaque rôle. */
  --papier:#F4F2ED;
  --encre:#101C2C;
  --profond:#07111F;
  --argent:#BCC3CB;
  --texte:#3A475A;   /* texte courant, 8.4:1 sur papier */
  --discret:#5C6A7C; /* légendes sur papier, 4.9:1 */

  --serif:Fraunces,"Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:Archivo,"Helvetica Neue",Arial,sans-serif;

  --gutter:clamp(1.5rem,4.2vw,4.75rem);
  --masthead-h:5.125rem;
  --preprod-h:0px;

  /* Le raccord : une seule famille de courbure pour tout le site. */
  /* Dimensions explicites : le masque est tramé à cette résolution avant d'être
     étiré, sinon le joint crénèle sur les petites surfaces. */
  --raccord-v:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%221200%22%20height=%221200%22%20viewBox=%220%200%20100%20100%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M9.5%2C0C0%2C24%2014%2C66%202.5%2C100L100%2C100L100%2C0Z%22%20fill=%22%23000%22/%3E%3C/svg%3E");
  --raccord-h:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%221200%22%20height=%221200%22%20viewBox=%220%200%20100%20100%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M0%2C13.5C24%2C2%2066%2C17%20100%2C4.5L100%2C100L0%2C100Z%22%20fill=%22%23000%22/%3E%3C/svg%3E");
  /* Meme courbe, amplitude portee a 42 pour cent : sur une bande large et basse,
     la valeur du hero paraitrait plate. La DA autorise la variation d'amplitude,
     pas le changement de dessin. */
  --raccord-entree:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%221200%22%20height=%221200%22%20viewBox=%220%200%20100%20100%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M0%2C42C24%2C6%2066%2C54%20100%2C12L100%2C100L0%2C100Z%22%20fill=%22%23000%22/%3E%3C/svg%3E");
  --raccord-duree:560ms;
  --raccord-ease:cubic-bezier(.22,.72,.16,1);
}

*,*::before,*::after{box-sizing:border-box}
/* Toute regle d'auteur qui pose une display ecrase le [hidden] du navigateur.
   Sans cette ligne, un .btn masque en JavaScript reste affiche. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papier);
  color:var(--texte);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.62;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}

a{color:inherit}
:focus-visible{outline:2px solid var(--encre);outline-offset:3px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:50;
  background:var(--encre);color:var(--papier);
  padding:.75rem 1.25rem;font-size:.875rem;text-decoration:none;
}
.skip:focus{left:0}

/* --- Bandeau de préproduction. Retiré à la mise en ligne. --- */
/* Le séparateur est porté par le CSS : une espace en début de balise est
   avalée au rendu, et « PRÉPRODUCTION· CONTENUS » se voit. */
.preprod__long{display:none}
.preprod__long::before{content:"\00a0·\00a0"}  /* insécables : l'espace simple est avalée ici */
@media (min-width:600px){.preprod__long{display:inline}}
.preprod{
  margin:0;min-height:var(--preprod-h);
  display:flex;align-items:center;
  padding-block:.4375rem;padding-inline:var(--gutter);
  border-bottom:1px solid var(--argent);
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--discret);
}

/* ============================================================
   Masthead
   ============================================================ */
.masthead{
  height:var(--masthead-h);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding-inline:var(--gutter);
  border-bottom:1px solid var(--argent);
}

.wordmark{
  display:flex;align-items:center;gap:.6875rem;
  text-decoration:none;color:var(--encre);
}
.wordmark__mark{width:.875rem;height:2rem;flex:none;overflow:visible}
.wordmark__name{
  font-family:var(--serif);font-weight:400;
  font-size:1.5rem;line-height:1;letter-spacing:.045em;
  font-variation-settings:"opsz" 40;
}
.wordmark__rule{width:1px;height:1.125rem;background:var(--argent)}
.wordmark__suffix{
  font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:var(--discret);padding-top:.125rem;
}

.nav ul{display:flex;align-items:center;gap:.875rem;margin:0;padding:0;list-style:none}
.nav a{
  display:inline-block;
  font-size:.875rem;color:var(--encre);text-decoration:none;
  padding-block:.25rem;
  border-bottom:1px solid transparent;
}
.nav a:hover{border-bottom-color:var(--encre)}
.nav__sep{color:var(--argent);font-size:.875rem;user-select:none}

.burger{display:none}

/* ============================================================
   Hero · deux volumes inégaux, un raccord
   ============================================================ */
.hero{
  display:grid;
  grid-template-columns:1.06fr .94fr;
  min-height:clamp(34rem,calc(100svh - var(--masthead-h) - var(--preprod-h)),52.5rem);
}

.hero__paper{
  display:grid;grid-template-rows:auto 1fr;
  padding-inline:var(--gutter);
  /* le volume clair déborde sous le volume image : c'est lui qui porte le raccord */
  padding-right:0;
  min-width:0;
}
.hero__body{
  align-self:center;
  padding-block:clamp(2.5rem,7vh,4.5rem);
  padding-right:clamp(1.5rem,5vw,5.5rem);
  max-width:34rem;
}

.folio{
  align-self:start;
  display:flex;align-items:center;gap:.75rem;
  margin:0;padding-top:clamp(1.5rem,4.5vh,3rem);
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:var(--discret);
}
.folio__num{color:var(--encre)}
.folio__rule{width:2.25rem;height:1px;background:var(--argent)}

.hero__title{
  margin:0 0 1.5rem;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.95rem,7.4vw,4.5rem);
  line-height:1.03;letter-spacing:-.018em;
  color:var(--encre);
  font-variation-settings:"opsz" 120;
  hyphens:none;
  /* Le <br> garantit la coupure entre les deux phrases. À l'intérieur de chaque
     phrase, balance équilibre les lignes : sur grand écran le titre se pose en
     quatre lignes courtes, sur mobile en deux. C'est voulu, pas subi. */
  text-wrap:balance;
}
.hero__lead{
  margin:0 0 2.5rem;
  max-width:38ch;
  font-size:1.0625rem;line-height:1.64;
  color:var(--texte);
}

/* --- Actions : deux formes différentes, pas un plein + un fantôme --- */
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem 2rem}

.btn{
  display:inline-flex;align-items:center;gap:.75rem;
  background:var(--encre);color:var(--papier);
  padding:1.0625rem 1.625rem;
  border-radius:0;
  font-size:.9375rem;font-weight:500;letter-spacing:.005em;
  text-decoration:none;
  transition:background 220ms ease,transform 120ms ease;
}
.btn__arrow{font-size:.875rem;transition:transform 220ms var(--raccord-ease)}
.btn:hover{background:var(--profond)}
.btn:hover .btn__arrow{transform:translate(2px,-2px)}

.link{
  display:inline-flex;align-items:center;gap:.625rem;
  color:var(--encre);text-decoration:none;
  font-size:.9375rem;font-weight:500;
  padding-block:.375rem;
  border-bottom:1px solid var(--argent);
  transition:border-color 220ms ease;
}
.link__arrow{transition:transform 220ms var(--raccord-ease)}
.link:hover{border-bottom-color:var(--encre)}
.link:hover .link__arrow{transform:translateX(3px)}

/* ============================================================
   Volume image et raccord
   ============================================================ */
.hero__plate{
  position:relative;margin:0;min-width:0;
  color:var(--papier); /* le filet de couture : le bord du papier qui entre dans l'image */
}
.hero__media{
  position:absolute;inset:0;
  /* Le raccord. Masque SVG auto-contenu plutôt que clip-path:url(#id) : un
     fragment est résolu par rapport au chemin de la feuille de styles et non du
     document, et une référence qui échoue ne « déclippe » pas l'élément, elle le
     fait disparaître entièrement. Ici il n'y a rien à résoudre, et le masque
     s'étire exactement sur la boîte. */
  -webkit-mask-image:var(--raccord-v);mask-image:var(--raccord-v);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 46%;
  /* L'étalonnage (saturate .66, contrast 1.07, brightness .93, accord avec le
     papier minéral) est calculé à la fabrication du fichier, pas en CSS : un
     filter sur une image dont le parent porte un masque casse la composition
     sur le Chromium testé, et un filtre par image coûte à chaque repaint. */
}
/* Le filet de couture. Décalé d'un demi-trait vers l'intérieur pour tomber
   entièrement sur l'image : sur le papier il serait invisible. */
.seam{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.seam--v{transform:translateX(.75px)}
.seam--h{transform:translateY(.75px)}
/* Épaisseur en unités du viewBox, pas en non-scaling-stroke : sous une mise à
   l'échelle anisotrope (preserveAspectRatio="none"), Chromium abandonne des
   segments entiers du tracé. Vérifié. Le rendu vaut ~1,5 px sur les deux formats. */
.seam path{stroke-width:.2}
.seam--h{display:none}

.hero__caption{
  position:absolute;right:0;bottom:0;left:14%;
  padding:3.5rem 1.5rem 1.25rem;
  background:linear-gradient(to top,rgba(7,17,31,.88),rgba(7,17,31,.55) 42%,rgba(7,17,31,0));
  color:var(--argent);
  /* 11 px, pas 10 : cette légende porte la mention « ne représente pas un
     programme commercialisé ». Elle doit se lire, pas se deviner. */
  font-size:.6875rem;letter-spacing:.06em;line-height:1.5;
  text-align:right;
}

/* ============================================================
   Mouvement d'ouverture · ~560 ms, le joint se referme.
   Le contenu est lisible dès la première image : aucune opacité 0 sur du texte.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  /* L'animation porte sur les VOLUMES, jamais sur l'élément masqué : animer
     directement .hero__media (masqué) empêche sa composition sur le Chromium
     testé et le volume image ne s'affiche plus du tout. */
  .hero__paper{animation:pose-papier 480ms var(--raccord-ease) both}
  .hero__plate{animation:pose-plaque var(--raccord-duree) var(--raccord-ease) both}
  .seam path{
    stroke-dasharray:1;stroke-dashoffset:1;
    animation:couture 620ms var(--raccord-ease) 60ms forwards;
  }
}
@keyframes pose-papier{from{transform:translateX(-10px)}to{transform:none}}
@keyframes pose-plaque{from{transform:translateX(24px)}to{transform:none}}
@keyframes couture{to{stroke-dashoffset:0}}

/* ============================================================
   Mobile · conçu pour l'écran, pas réduit du desktop.
   Ordre : identité, titre, explication, actions, puis visuel.
   Aucune hauteur 100vh imposée.
   ============================================================ */
@media (max-width:920px){
  :root{--masthead-h:4.25rem}

  /* Sans JavaScript la navigation reste en flux sous l'en-tête : visible,
     cliquable, elle ne masque rien. Avec JavaScript elle devient un panneau
     commandé par le bouton. */
  .nav{width:100%;padding:.25rem var(--gutter) 1rem;border-bottom:1px solid var(--argent)}
  .js .nav{
    position:absolute;left:0;right:0;top:100%;
    z-index:20;
    background:var(--papier);
    padding:.5rem var(--gutter) 1.25rem;
  }
  .nav[hidden]{display:none}
  .nav ul{flex-direction:column;align-items:flex-start;gap:0}
  .nav a{font-size:1.0625rem;padding-block:.8125rem;min-height:2.75rem;display:flex;align-items:center}
  .nav__sep{display:none}

  .burger{display:none}
  .js .burger{
    display:inline-flex;align-items:center;gap:.625rem;
    min-height:2.75rem;padding:0 0 0 .5rem;
    background:none;border:0;cursor:pointer;color:var(--encre);
    font-family:var(--sans);font-size:.6875rem;font-weight:500;
    letter-spacing:.16em;text-transform:uppercase;
  }
  .burger__glyph{display:flex;flex-direction:column;gap:6px;width:1.125rem}
  .burger__glyph i{display:block;height:1px;background:var(--encre);transition:transform 180ms var(--raccord-ease)}
  /* ouvert : les deux filets se croisent. Le libellé passe à « Fermer »,
     c'est lui qui porte l'information, pas le pictogramme. */
  .burger[aria-expanded="true"] .burger__glyph i:first-child{transform:translateY(3.5px) rotate(11deg)}
  .burger[aria-expanded="true"] .burger__glyph i:last-child{transform:translateY(-3.5px) rotate(-11deg)}

  .masthead{position:relative;flex-wrap:wrap;height:auto;min-height:var(--masthead-h)}
  .js .masthead{flex-wrap:nowrap;height:var(--masthead-h)}

  .hero{grid-template-columns:1fr;min-height:0}
  .hero__paper{padding-right:var(--gutter)}
  .hero__body{
    max-width:none;padding-right:0;
    padding-block:clamp(1.75rem,5vh,2.75rem) clamp(2rem,5vh,3rem);
  }
  .hero__title{margin-bottom:1.125rem}
  .hero__lead{margin-bottom:2rem;font-size:1rem}
  .actions{gap:1.125rem 1.75rem}
  .btn{padding:1rem 1.5rem}

  .hero__plate{height:clamp(17.5rem,44vh,26rem)}
  .hero__media{-webkit-mask-image:var(--raccord-h);mask-image:var(--raccord-h)}
  .hero__media img{object-position:50% 34%}
  .seam--v{display:none}
  .seam--h{display:block}
  .seam path{stroke-width:.4}
  .hero__caption{left:0;padding:3rem 1.25rem 1rem}

  @media (prefers-reduced-motion:no-preference){
    /* le joint reste, l'exécution s'allège : un seul volume bouge */
    .hero__paper{animation:none}
    .hero__plate{animation:pose-plaque-mobile 480ms var(--raccord-ease) both}
  }
}
@keyframes pose-plaque-mobile{from{transform:translateY(16px)}to{transform:none}}

@media (max-width:400px){
  .wordmark__suffix{display:none}
  .wordmark__rule{display:none}
}

/* ============================================================
   Séquences 02 à 05 · rythme commun
   ============================================================ */
.seq{padding:clamp(4.5rem,11vh,8rem) var(--gutter)}
.seq__head{max-width:52rem}
.seq__title{
  margin:1.75rem 0 0;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.85rem,4.2vw,3.4rem);
  line-height:1.06;letter-spacing:-.015em;
  color:var(--encre);font-variation-settings:"opsz" 96;
  text-wrap:balance;
}
.seq__lead{margin:1.5rem 0 0;max-width:44ch;font-size:1.0625rem}

/* Marqueur de contenu provisoire. Il doit se voir, pas se fondre. */
.preprod-note{
  position:relative;padding-left:1.125rem;
  font-size:.9375rem;line-height:1.6;color:var(--discret);
}
.preprod-note::before{
  content:"";position:absolute;left:0;top:.45em;bottom:.2em;
  width:2px;background:var(--argent);
}
.preprod-note strong{color:var(--encre);font-weight:500}
.preprod-note--clair{color:var(--argent)}
.preprod-note--clair::before{background:rgba(188,195,203,.5)}
.preprod-note--clair strong{color:var(--papier)}

/* --- 02 · la méthode ---------------------------------------- */
.methode{
  position:relative;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0 clamp(1.5rem,3vw,3rem);
  list-style:none;margin:clamp(3.5rem,8vh,5.5rem) 0 0;padding:0;
}
.methode__trait{position:absolute;left:0;right:0;top:-1.125rem;height:5rem;width:100%;pointer-events:none}
.etape{min-width:0}
.etape__num{
  position:relative;z-index:1;
  display:grid;place-items:center;
  width:2.75rem;height:2.75rem;
  background:var(--papier);border:1px solid var(--encre);
  font-size:.6875rem;font-weight:500;letter-spacing:.08em;color:var(--encre);
}
.etape__title{
  margin:1.75rem 0 .625rem;
  font-size:1.0625rem;font-weight:500;color:var(--encre);line-height:1.35;
}
.etape__texte{margin:0;max-width:34ch;font-size:.9375rem;line-height:1.62}

/* L'incise : ce n'est pas une carte, c'est une remarque en marge. */
.incise{
  margin:clamp(3rem,7vh,4.5rem) 0 0;max-width:52ch;
  padding-left:clamp(1.25rem,3vw,2.5rem);
  border-left:1px solid var(--argent);
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.125rem,1.9vw,1.4375rem);line-height:1.45;
  color:var(--encre);font-variation-settings:"opsz" 36;
}

/* --- 03 · les associés -------------------------------------- */
.associes{
  margin-top:clamp(3rem,7vh,4.5rem);
  display:grid;grid-template-columns:minmax(0,.68fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);align-items:start;
}
.planche{position:relative;margin:0;aspect-ratio:5/6;color:var(--argent)}
.planche__surface{
  position:absolute;inset:0;background:#E4E2DB;
  -webkit-mask-image:var(--raccord-v);mask-image:var(--raccord-v);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.planche__legende{
  position:absolute;left:18%;bottom:1.5rem;right:1.5rem;
  display:flex;flex-direction:column;gap:.375rem;
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
}
.planche__label{color:var(--encre);font-weight:500}
.planche__etat{color:var(--texte)} /* 7,3:1 sur la planche ; --discret n'y fait que 4,25:1 */

.duo{list-style:none;margin:2.5rem 0 0;padding:0}
.duo__fiche{padding:2rem 0;border-top:1px solid var(--argent)}
.duo__fiche:last-child{border-bottom:1px solid var(--argent)}

/* La fonction avant le nom, comme une signature de presse. */
.duo__role{
  margin:0 0 .5rem;font-size:.6875rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--discret);
}
.duo__nom{
  margin:0 0 1rem;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.375rem,2.4vw,1.75rem);line-height:1.15;letter-spacing:-.01em;
  color:var(--encre);font-variation-settings:"opsz" 48;
}
.duo__bio{margin:0;max-width:48ch;font-size:1rem;line-height:1.62;color:var(--texte)}

/* Le parcours complet, replié. Même indicateur que la FAQ : les deux
   biographies font 350 mots chacune, les afficher en entier noierait la page. */
.duo__plus{margin-top:1.25rem}
.duo__plus summary{
  display:inline-flex;align-items:center;gap:.75rem;
  padding:.5rem 0;cursor:pointer;list-style:none;
  font-size:.875rem;font-weight:500;color:var(--encre);
  border-bottom:1px solid var(--argent);
}
.duo__plus summary::-webkit-details-marker{display:none}
.duo__plus summary::after{
  content:"";flex:none;width:.625rem;height:.625rem;
  background:
    linear-gradient(var(--discret),var(--discret)) center/100% 1px no-repeat,
    linear-gradient(var(--discret),var(--discret)) center/1px 100% no-repeat;
  transition:transform 220ms var(--raccord-ease);
}
.duo__plus[open] summary::after{transform:rotate(90deg);background-size:100% 1px,0 100%}
.duo__plus summary:hover{border-bottom-color:var(--encre)}
.duo__texte{padding-top:1.5rem;max-width:52ch}
.duo__texte p{margin:0 0 1rem;font-size:.9375rem;line-height:1.68}
.duo__texte p:last-child{margin-bottom:0}
.duo__inter{
  margin-top:1.75rem !important;
  font-size:.6875rem !important;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--discret);
}

/* --- 04 · les promoteurs ------------------------------------ */
/* La rupture du cahier. Deux couches de masque : la courbe sur la bande
   d'entrée, un aplat plein en dessous. Elles s'additionnent. */
.seq--promoteurs{
  position:relative;padding:0;
  background:var(--profond);color:var(--argent);
  -webkit-mask-image:var(--raccord-entree),linear-gradient(#000,#000);
  mask-image:var(--raccord-entree),linear-gradient(#000,#000);
  -webkit-mask-size:100% 12rem,100% 100%;mask-size:100% 12rem,100% 100%;
  -webkit-mask-position:0 0,0 12rem;mask-position:0 0,0 12rem;
  -webkit-mask-repeat:no-repeat,no-repeat;mask-repeat:no-repeat,no-repeat;
}
.rupture{position:absolute;left:0;right:0;top:0;width:100%;height:12rem;pointer-events:none;color:rgba(188,195,203,.45)}
.rupture path{stroke-width:.35}
.promo__contenu{padding:clamp(11rem,20vh,14rem) var(--gutter) clamp(4.5rem,11vh,7rem)}
.seq--promoteurs .seq__title{color:var(--papier)}
.folio--clair{color:var(--argent)}
.folio--clair .folio__num{color:var(--papier)}
.folio--clair .folio__rule{background:rgba(188,195,203,.45)}

.promo__grille{margin-top:clamp(2.5rem,6vh,4rem);max-width:60rem}
.promo__points{margin:2.5rem 0 3rem;padding:0;display:grid;gap:0}
.promo__points>div{padding:1.5rem 0;border-top:1px solid rgba(188,195,203,.28)}
.promo__points>div:last-child{border-bottom:1px solid rgba(188,195,203,.28)}
.promo__points dt{font-size:1rem;font-weight:500;color:var(--papier)}
.promo__points dd{margin:.4375rem 0 0;font-size:.9375rem;line-height:1.6;color:var(--argent)}

.btn--clair{background:var(--papier);color:var(--encre)}
.btn--clair:hover{background:#FBFAF7}

/* --- 05 · les questions ------------------------------------- */
.faq{margin-top:clamp(3rem,7vh,4.5rem);max-width:56rem}
.qa{border-top:1px solid var(--argent)}
.qa:last-of-type{border-bottom:1px solid var(--argent)}
.qa summary{
  display:flex;align-items:baseline;justify-content:space-between;gap:2rem;
  padding:1.375rem 0;cursor:pointer;list-style:none;
  font-size:1.0625rem;color:var(--encre);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";flex:none;align-self:center;
  width:.75rem;height:.75rem;
  background:
    linear-gradient(var(--discret),var(--discret)) center/100% 1px no-repeat,
    linear-gradient(var(--discret),var(--discret)) center/1px 100% no-repeat;
  transition:transform 220ms var(--raccord-ease);
}
.qa[open] summary::after{transform:rotate(90deg);background-size:100% 1px,0 100%}
.qa summary:hover{color:var(--profond)}
.qa__corps{padding:0 0 1.5rem;max-width:52ch}
.qa__corps p{margin:0;font-size:.9375rem;line-height:1.65}

/* ============================================================
   Séquences 02 à 05 · mobile
   ============================================================ */
@media (max-width:920px){
  .seq{padding-block:clamp(3.5rem,9vh,5.5rem)}
  .seq__title{margin-top:1.25rem}

  /* La méthode passe en lecture verticale. Un raccord par intervalle plutôt
     qu'un tracé unique : les étapes n'ont pas la même hauteur, un seul chemin
     ne pourrait pas tomber juste sur les trois repères. Chaque intervalle
     s'étire entre le bas d'un repère et le haut du suivant, tout seul. */
  .methode{grid-template-columns:1fr;gap:0;padding-left:4.25rem}
  .methode__trait{display:none}
  .etape{position:relative;padding-bottom:2.75rem;padding-left:0}
  .etape:last-child{padding-bottom:0}
  .etape__num{position:absolute;left:-4.25rem;top:0}
  .etape:not(:last-child)::after{
    content:"";position:absolute;left:-4.25rem;top:2.75rem;bottom:0;width:2.75rem;
    background-size:100% 100%;background-repeat:no-repeat;
  }
  .etape:nth-of-type(1)::after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22200%22%20height=%22400%22%20viewBox=%220%200%20100%20100%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M32%2C0C32%2C26%2072%2C36%2072%2C50C72%2C64%2032%2C74%2032%2C100%22%20fill=%22none%22%20stroke=%22%235C6A7C%22%20stroke-width=%221.4%22/%3E%3C/svg%3E")}
  .etape:nth-of-type(2)::after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22200%22%20height=%22400%22%20viewBox=%220%200%20100%20100%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M32%2C0C32%2C26%20-8%2C36%20-8%2C50C-8%2C64%2032%2C74%2032%2C100%22%20fill=%22none%22%20stroke=%22%235C6A7C%22%20stroke-width=%221.4%22/%3E%3C/svg%3E")}
  .etape__title{margin-top:.25rem}
  .etape__texte{max-width:none}

  .associes{grid-template-columns:1fr;gap:2.5rem}
  .planche{aspect-ratio:3/2;max-width:none}
  .planche__legende{left:1.25rem;right:1.25rem}
  .duo{margin-top:0}

  .promo__contenu{padding-top:clamp(7rem,16vh,9rem)}
  .seq--promoteurs{
    -webkit-mask-size:100% 7rem,100% 100%;mask-size:100% 7rem,100% 100%;
    -webkit-mask-position:0 0,0 7rem;mask-position:0 0,0 7rem;
  }
  .rupture{height:7rem}

  .qa summary{font-size:1rem;gap:1.25rem}
}

/* ============================================================
   Séquence 06 · contact
   ============================================================ */
.seq--contact{border-top:1px solid var(--argent)}

/* Deux modes, lisibles au premier coup d'oeil. Pas une fenêtre imposée. */
.modes{display:flex;gap:0;margin:clamp(2.5rem,6vh,3.5rem) 0 0;border-bottom:1px solid var(--argent)}
.mode{
  appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  margin-bottom:-1px;padding:.875rem 0;margin-right:2.5rem;cursor:pointer;
  font-family:var(--sans);font-size:.9375rem;font-weight:500;
  color:var(--discret);
  transition:color 180ms ease,border-color 180ms ease;
}
.mode:hover{color:var(--encre)}
.mode[aria-selected="true"]{color:var(--encre);border-bottom-color:var(--encre)}
.panneau{padding-top:clamp(2.5rem,6vh,3.5rem)}
.panneau[hidden]{display:none}

.formulaire{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,20rem);gap:clamp(2rem,4vw,4.5rem);align-items:start}
.form{margin:0;max-width:38rem}
.form__intro{margin:0 0 2.25rem;max-width:46ch;font-size:.9375rem;color:var(--discret)}

.pas{border:0;margin:0 0 2.75rem;padding:0;min-width:0}
.pas[hidden]{display:none}
.pas legend{
  display:flex;align-items:baseline;gap:.875rem;
  margin-bottom:1.75rem;padding:0;
  font-size:1.0625rem;font-weight:500;color:var(--encre);
}
.pas__num{
  font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--discret);
}
.etapes-jauge{
  margin:0 0 2rem;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--discret);
}
.etapes-jauge[hidden]{display:none}

.champ{margin-bottom:1.75rem}
.champ__label{display:block;margin-bottom:.625rem;font-size:.875rem;font-weight:500;color:var(--encre)}
.champ__label em{
  font-style:normal;margin-left:.5rem;
  font-size:.6875rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--discret);
}
.champ__aide{margin:.5rem 0 0;font-size:.8125rem;color:var(--discret)}
.champ[hidden]{display:none}

input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;display:block;
  background:var(--papier);color:var(--encre);
  border:1px solid var(--argent);border-radius:0;
  padding:.8125rem .875rem;
  font-family:var(--sans);font-size:1rem;line-height:1.4;
  transition:border-color 160ms ease;
}
textarea{resize:vertical;min-height:6rem}
select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--discret) 50%),linear-gradient(135deg,var(--discret) 50%,transparent 50%);
  background-position:calc(100% - 1.125rem) 55%,calc(100% - .75rem) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  padding-right:2.5rem;
}
input:hover,select:hover,textarea:hover{border-color:var(--discret)}
input:focus,select:focus,textarea:focus{border-color:var(--encre);outline:2px solid var(--encre);outline-offset:2px}
::placeholder{color:var(--discret);opacity:1}

/* Radios rondes, cases carrées : l'affordance native passe avant la règle de
   rayon. C'est la seule exception assumée au « tout à angle vif ». */
.options{display:flex;flex-direction:column;gap:.125rem}
.options label,.case{
  display:flex;align-items:center;gap:.75rem;
  padding:.5rem 0;min-height:2.75rem;cursor:pointer;
  font-size:.9375rem;color:var(--texte);
}
.case{margin-top:.625rem}
.options input,.case input{
  appearance:none;flex:none;width:1.0625rem;height:1.0625rem;margin:0;
  border:1px solid var(--discret);background:var(--papier);cursor:pointer;
  transition:border-color 140ms ease;
}
.options input[type=radio]{border-radius:50%}
.options input:checked,.case input:checked{
  border-color:var(--encre);
  background:var(--encre);
  box-shadow:inset 0 0 0 3px var(--papier);
}
.options input:focus-visible,.case input:focus-visible{outline:2px solid var(--encre);outline-offset:3px}
.options label:hover span,.case:hover span{color:var(--encre)}

.duo-champs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.5rem}

.form__pied{margin-top:2.5rem;display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem}
.form__nav{display:flex;align-items:center;gap:2rem;flex-wrap:wrap}
.form__nav[hidden]{display:none}
.lien-retour{
  appearance:none;background:none;border:0;padding:.375rem 0;cursor:pointer;
  font-family:var(--sans);font-size:.9375rem;font-weight:500;color:var(--encre);
  border-bottom:1px solid var(--argent);
}
.lien-retour:hover{border-bottom-color:var(--encre)}
.lien-retour[hidden]{display:none}
.form__etat{max-width:46ch;margin:0;font-size:.9375rem;line-height:1.55;color:var(--encre)}
.form__etat:empty{display:none}
.form__etat:focus{outline:none}
/* Le résultat s'annonce par un filet, comme les erreurs de champ : pas de
   pastille verte ou rouge, la DA n'a pas de couleur d'état et n'en veut pas. */
.form__etat[data-etat]{padding-left:.75rem;border-left:2px solid var(--encre)}
.form__etat[data-etat="attente"]{border-left-color:var(--argent);color:var(--discret)}
.form--envoye .pas,.form--envoye .form__nav,.form--envoye [data-envoyer],
.form--envoye .duo-champs,.form--envoye > .champ,.form--envoye .form__intro,
.form--envoye button[type="submit"],.form--envoye .etapes-jauge{display:none}
.form__info{margin:0;max-width:52ch;font-size:.75rem;line-height:1.55;color:var(--discret)}
.form__info a{color:var(--encre);text-decoration:none;border-bottom:1px solid var(--argent)}
.form__info a:hover{border-bottom-color:var(--encre)}
/* Piège anti-robot : sorti de l'écran plutôt que display:none, que certains
   robots savent repérer et ignorer. */
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- récapitulatif vivant --- */
.recap{position:sticky;top:2rem}
.recap__boite{border-top:1px solid var(--encre);padding-top:1.25rem}
.recap__titre{display:none}
.recap__liste{margin:0;padding:0;display:grid;gap:.875rem}
.recap__vide{margin:0;font-size:.875rem;color:var(--discret)}
.recap__ligne{display:grid;gap:.1875rem;padding-bottom:.875rem;border-bottom:1px solid var(--argent)}
.recap__ligne:last-child{border-bottom:0;padding-bottom:0}
.recap__cle{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--discret)}
.recap__val{font-size:.9375rem;color:var(--encre)}
.recap__note{margin:1.75rem 0 0;font-size:.75rem;line-height:1.55;color:var(--discret)}

/* ============================================================
   Pied de page
   ============================================================ */
.pied{padding:clamp(3.5rem,9vh,5.5rem) var(--gutter) 2.25rem;border-top:1px solid var(--argent)}
.pied__haut{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.pied__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.pied__titre{margin:0 0 .875rem;font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--encre)}
.pied__vide{margin:0;max-width:30ch;font-size:.875rem;line-height:1.6;color:var(--discret)}
.pied__liens{list-style:none;margin:0;padding:0;display:grid;gap:.625rem}
.pied__liens a{font-size:.875rem;color:var(--encre);text-decoration:none;border-bottom:1px solid var(--argent)}
.pied__liens a[aria-disabled="true"]{color:var(--discret);cursor:not-allowed}
.pied__attente{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--discret)}
.credit{
  margin:clamp(3rem,7vh,4.5rem) 0 0;padding-top:1.5rem;border-top:1px solid var(--argent);
  font-size:.75rem;letter-spacing:.03em;color:var(--discret);
}
.credit a{color:var(--encre);text-decoration:none;border-bottom:1px solid var(--argent)}
.credit a:hover{border-bottom-color:var(--encre)}

@media (max-width:920px){
  .formulaire{grid-template-columns:1fr;gap:2.5rem}
  .form{max-width:none}
  .recap{position:static;order:-1}
  .recap__titre{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:.875rem 0;cursor:pointer;list-style:none;
    font-size:.9375rem;font-weight:500;color:var(--encre);
  }
  .recap__titre::-webkit-details-marker{display:none}
  /* Meme indicateur que la FAQ : deux filets, l'un disparait a l'ouverture.
     Aucun caractere typographique detourne en signe moins. */
  .recap__titre::after{
    content:"";flex:none;width:.75rem;height:.75rem;
    background:
      linear-gradient(var(--discret),var(--discret)) center/100% 1px no-repeat,
      linear-gradient(var(--discret),var(--discret)) center/1px 100% no-repeat;
    transition:transform 220ms var(--raccord-ease);
  }
  .recap__boite[open] .recap__titre::after{transform:rotate(90deg);background-size:100% 1px,0 100%}
  .recap__boite{border-top:1px solid var(--argent);padding-top:0}
  .duo-champs{grid-template-columns:1fr;gap:0}
  .mode{margin-right:1.75rem;font-size:.875rem}
  .pied__haut{grid-template-columns:1fr;gap:2.5rem}
  .pied__cols{grid-template-columns:1fr;gap:2rem}
}

/* Message d'erreur : au plus près du champ concerné, jamais en haut de page. */
.erreur{
  margin:.5rem 0 0;padding-left:.75rem;
  border-left:2px solid var(--encre);
  font-size:.8125rem;line-height:1.5;color:var(--encre);
}
[aria-invalid="true"]{border-color:var(--encre)}
.nav a[aria-current="true"]{border-bottom-color:var(--encre)}

/* Note rattachée à une incise : elle en dépend, elle se cale sur son filet. */
.incise__note{margin-top:1rem;max-width:52ch;font-size:.8125rem}

/* ============================================================
   Pages de texte : mentions légales, confidentialité, confirmation
   Même cahier que l'accueil : folio, titre serif, colonne de lecture.
   ============================================================ */
.page{padding:clamp(3.5rem,9vh,6rem) var(--gutter) clamp(4.5rem,11vh,7.5rem)}
.page__corps{max-width:40rem;margin-top:clamp(2.5rem,6vh,4rem)}
.page__corps h2{
  margin:3rem 0 1rem;padding-top:1.25rem;border-top:1px solid var(--argent);
  font-family:var(--sans);font-size:.6875rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--encre);
}
.page__corps h2:first-child{margin-top:0}
.page__corps p,.page__corps li{font-size:1rem;line-height:1.7}
.page__corps p{margin:0 0 1rem}
.page__corps ul{margin:0 0 1rem;padding-left:1.125rem}
.page__corps li{margin-bottom:.375rem}
.page__corps a{color:var(--encre);text-decoration:none;border-bottom:1px solid var(--argent)}
.page__corps a:hover{border-bottom-color:var(--encre)}
.page__corps strong{color:var(--encre);font-weight:500}
.fiche{margin:0 0 1rem;display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:.5rem 1.5rem}
.fiche dt{font-size:.8125rem;color:var(--discret);padding-top:.125rem}
.fiche dd{margin:0;font-size:1rem;color:var(--encre)}
@media (max-width:620px){.fiche{grid-template-columns:1fr;gap:.125rem}.fiche dd{margin-bottom:.75rem}}
.page__maj{margin-top:3rem;font-size:.8125rem;color:var(--discret)}
.page__retour{margin-top:2.5rem}

/* Donnée que seul SAMAJ peut fournir. Visible exprès : une page légale
   ne doit jamais partir en ligne avec un trou qui passe inaperçu. */
.a-fournir{
  font-size:.875rem;color:var(--discret);
  border-bottom:1px dashed var(--discret);
}

/* Réponse proposée par l'agence : le client doit la voir comme telle. */
.qa__proposition{
  margin:0 0 .75rem !important;font-size:.6875rem !important;letter-spacing:.12em;
  text-transform:uppercase;color:var(--discret);
}
.qa__corps a{color:var(--encre);text-decoration:none;border-bottom:1px solid var(--argent)}

/* --- 02 · les dispositifs ------------------------------------
   Un index de revue : deux colonnes de notices, filet au-dessus de chacune.
   Pas de cartes ni d'icônes : le texte porte seul, comme dans un cahier. */
.dispositifs{margin-top:clamp(4rem,10vh,6.5rem);max-width:68rem}
.dispositifs__titre{
  margin:0;font-family:var(--serif);font-weight:300;
  font-size:clamp(1.5rem,2.8vw,2.25rem);line-height:1.1;letter-spacing:-.01em;
  color:var(--encre);font-variation-settings:"opsz" 72;
}
.dispositifs__note{margin:1.25rem 0 0;max-width:60ch;font-size:.8125rem}
.dispositifs__liste{
  margin:2.5rem 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(2rem,5vw,4.5rem);
}
.dispositifs__liste>div{padding:1.5rem 0 1.625rem;border-top:1px solid var(--argent)}
.dispositifs__liste dt{font-size:1rem;font-weight:500;color:var(--encre)}
.dispositifs__liste dd{margin:.5rem 0 0;max-width:46ch;font-size:.9375rem;line-height:1.6}
.dispositifs__pied{
  margin:1.5rem 0 0;padding-top:1.25rem;border-top:1px solid var(--encre);
  max-width:60ch;font-size:.9375rem;color:var(--encre);
}
@media (max-width:760px){.dispositifs__liste{grid-template-columns:1fr}}

/* ============================================================
   Cliché : photographie d'illustration, posée comme une planche.
   Même raccord que le héros (masque en courbe + filet), étalonnage
   cuit dans le fichier : un filtre CSS sous un masque casse le rendu
   (voir NOTE-TECHNIQUE.md).
   ============================================================ */
.cliche{margin:0;color:var(--argent)}
.cliche__cadre{position:relative;width:100%}
.cliche__photo{
  position:absolute;inset:0;display:block;
  -webkit-mask-image:var(--raccord-v);mask-image:var(--raccord-v);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.cliche__photo img{display:block;width:100%;height:100%;object-fit:cover}
.cliche__legende{
  margin-top:.875rem;padding-left:9.5%;
  font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;line-height:1.5;
  color:var(--discret);
}
.cliche--clair .cliche__legende{color:var(--argent)}
.cliche--clair{color:rgba(188,195,203,.55)}

/* 02 : l'incise et sa planche, côte à côte */
.approche__bas{
  margin-top:clamp(3rem,7vh,4.5rem);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,22rem);
  gap:clamp(2.5rem,6vw,6rem);align-items:end;
}
.approche__bas .incise{margin-top:0}

/* 04 : le texte promoteur et le chantier */
.promo__corps{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,24rem);
  gap:clamp(2.5rem,6vw,6rem);align-items:start;
  margin-top:clamp(2.5rem,6vh,4rem);
}
.promo__corps .promo__grille{margin-top:0}

/* 06 : la scène de rendez-vous, entre le titre et les formulaires */
.cliche--large{max-width:44rem;margin:clamp(2.5rem,6vh,3.5rem) 0 clamp(3rem,7vh,4.5rem) auto}

@media (max-width:920px){
  .approche__bas,.promo__corps{grid-template-columns:1fr}
  .approche__bas .cliche{max-width:26rem}
  .cliche--large{margin-left:0}
}

/* Proportions des clichés, tirées des fichiers exportés. */
.cliche__cadre[data-r="portrait"]{aspect-ratio:3/4}
.cliche__cadre[data-r="chantier"]{aspect-ratio:1000/1122}
.cliche__cadre[data-r="paysage"]{aspect-ratio:3/2}

/* Finition typographique des ajouts du 29/09 (signe 684 du référentiel). */
.dispositifs__titre,.page__corps h2{text-wrap:balance}
.dispositifs__liste dd,.dispositifs__pied,.page__corps p,.page__corps li,.qa__corps p,.form__info{text-wrap:pretty}

/* État d'appui (signe 686) : sur mobile il n'y a pas de survol, l'appui est
   le seul retour que le doigt reçoit. Un pixel d'enfoncement, pas un rebond. */
.btn:active{background:var(--profond);transform:translateY(1px)}
.btn--clair:active{background:var(--argent)}
.btn:disabled{opacity:.55;cursor:progress;transform:none}
.link:active,.lien-retour:active,.pied__liens a:active,.credit a:active{opacity:.7}
.mode:active{color:var(--encre)}
.qa summary:active{color:var(--profond)}

/* ============================================================
   Ajouts du 29/09 · remplir sans encombrer
   Chaque élément porte un sens : un plan (le métier), une vidéo (le
   territoire), les deux associés (les personnes), une remise de clés
   (l'aboutissement). Aucun décor gratuit.
   ============================================================ */

/* --- 02 · le plan qui se trace ------------------------------ */
.approche__tete{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);
  gap:clamp(2.5rem,6vw,6rem);align-items:end;
}
.plan{margin:0;color:var(--encre)}
.plan svg{display:block;width:100%;height:auto;overflow:visible}
.plan path{fill:none;stroke:currentColor;stroke-linecap:square}
.plan__murs path{stroke-width:2.4}
.plan__portes path{stroke-width:.9;stroke:var(--discret)}
.plan__baies path{stroke-width:.9;stroke:var(--discret)}
.plan__nord path{stroke-width:1.2}
.plan__pieces text{
  font-family:var(--sans);font-size:8.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;fill:var(--discret);text-anchor:middle;
}
.plan__legende{
  margin-top:.875rem;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--discret);
}

/* --- Respiration · la vidéo sous la courbe ------------------ */
.respiration{position:relative;padding:0 0 clamp(3rem,7vh,4.5rem)}
.respiration__cadre{
  position:relative;height:clamp(20rem,62vh,38rem);background:var(--encre);
  -webkit-mask-image:var(--raccord-h);mask-image:var(--raccord-h);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.respiration__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.respiration__pause{
  position:absolute;right:var(--gutter);bottom:1.5rem;
  appearance:none;border:1px solid rgba(244,242,237,.55);background:rgba(7,17,31,.55);
  color:var(--papier);padding:.625rem 1rem;border-radius:0;cursor:pointer;
  font-family:var(--sans);font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  transition:background 180ms ease;
}
.respiration__pause:hover{background:rgba(7,17,31,.85)}
.respiration__pause:active{transform:translateY(1px)}
.respiration__pause:focus-visible{outline:2px solid var(--papier);outline-offset:3px}
/* Le texte est un second volume posé sur la vidéo : le bloc encre chevauche
   le bas de l'image, comme une légende de revue collée sur la planche. */
.respiration__texte{
  position:relative;z-index:1;margin:clamp(-7rem,-12vh,-4rem) 0 0 var(--gutter);
  max-width:min(40rem,calc(100% - 2 * var(--gutter)));
  background:var(--profond);color:var(--papier);
  padding:clamp(1.75rem,3.5vw,2.75rem) clamp(1.5rem,3.5vw,3rem);
}
.respiration__kicker{
  margin:0 0 1rem;font-size:.6875rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--argent);
}
.respiration__titre{
  margin:0;font-family:var(--serif);font-weight:300;
  font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.12;letter-spacing:-.012em;
  font-variation-settings:"opsz" 72;text-wrap:balance;
}
.respiration__legende{
  margin:1rem var(--gutter) 0;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--discret);
}

/* --- 03 · la planche du duo -------------------------------- */
.planche--duo{overflow:hidden}
.duo-planche{
  position:absolute;inset:0;display:grid;grid-template-rows:1fr 1fr;
  padding:clamp(1.5rem,3vw,2.5rem) clamp(1.25rem,3vw,2.25rem) 4.5rem 18%;
}
.duo-planche__bloc{display:flex;flex-direction:column;justify-content:center;gap:.625rem}
.duo-planche__bloc--haut{border-bottom:1px solid var(--argent);padding-bottom:1.5rem}
.duo-planche__bloc--bas{padding-top:1.5rem}
.duo-planche__metier{
  margin:0;font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--texte);
}
.duo-planche__nom{
  margin:0;font-family:var(--serif);font-weight:300;
  font-size:clamp(1.6rem,2.8vw,2.5rem);line-height:1.02;letter-spacing:-.015em;
  color:var(--encre);font-variation-settings:"opsz" 96;
}
.duo-planche__hors{margin:0;font-family:var(--serif);font-style:italic;font-weight:300;font-size:1rem;color:var(--texte)}

/* --- 05 · la FAQ et son aparté ------------------------------ */
.faq-grille{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,20rem);
  gap:clamp(2.5rem,6vw,6rem);align-items:start;
}
.faq-aparte{position:sticky;top:2rem}
.faq-aparte__titre{
  margin:2rem 0 .5rem;font-family:var(--serif);font-weight:300;font-size:1.5rem;line-height:1.15;color:var(--encre);
  font-variation-settings:"opsz" 48;
}
.faq-aparte__texte{margin:0 0 1.25rem;font-size:.9375rem;line-height:1.6;max-width:32ch;text-wrap:pretty}

@media (max-width:920px){
  .approche__tete,.faq-grille{grid-template-columns:1fr}
  .plan{max-width:24rem}
  .faq-aparte{position:static;max-width:24rem}
  .respiration__cadre{height:clamp(15rem,48vh,22rem)}
  .respiration__texte{margin-top:-3rem}
  .duo-planche{padding-left:14%}
}

/* ============================================================
   Entrées en scène · déclenchées par [data-scene] + .en-scene
   Même vocabulaire que l'ouverture : la couture se trace, le volume se pose.
   Le texte n'est jamais caché : seuls les traits et les images bougent.
   Sans JavaScript ou avec moins d'animations : tout est à l'état final.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  /* Seul le filet du héros se trace au chargement ; les autres attendent d'être vus. */
  .seam path{animation:none;stroke-dasharray:none;stroke-dashoffset:0}
  .hero .seam path{
    stroke-dasharray:1;stroke-dashoffset:1;
    animation:couture 620ms var(--raccord-ease) 60ms forwards;
  }
  .js [data-scene] .seam path,
  .js .plan path{stroke-dasharray:1;stroke-dashoffset:1}
  .js [data-scene].en-scene .seam path{animation:couture 720ms var(--raccord-ease) 120ms forwards}

  .js .plan.en-scene .plan__murs path{animation:couture 1100ms var(--raccord-ease) forwards}
  .js .plan.en-scene .plan__portes path{animation:couture 600ms var(--raccord-ease) 700ms forwards}
  .js .plan.en-scene .plan__baies path{animation:couture 500ms var(--raccord-ease) 900ms forwards}
  .js .plan.en-scene .plan__nord path{animation:couture 400ms var(--raccord-ease) 1200ms forwards}
  .js .plan .plan__pieces{opacity:0;transition:opacity 500ms ease-out 1000ms}
  .js .plan.en-scene .plan__pieces{opacity:1}

  /* Le volume image se pose le long de la courbe (ancêtre non masqué,
     voir la note du héros : on n'anime jamais l'élément masqué). */
  .js .cliche[data-scene] .cliche__cadre{transform:translateX(24px);opacity:.001}
  .js .cliche[data-scene].en-scene .cliche__cadre{
    transform:none;opacity:1;
    transition:transform 760ms var(--raccord-ease),opacity 420ms ease-out;
  }
  .js .respiration[data-scene] .respiration__cadre{transform:translateY(28px)}
  .js .respiration[data-scene].en-scene .respiration__cadre{transform:none;transition:transform 900ms var(--raccord-ease)}

  /* Les filets de la liste s'encrent de gauche à droite, 60 ms d'écart. */
  .js .dispositifs__liste[data-scene]>div{border-top-color:transparent;position:relative}
  .js .dispositifs__liste[data-scene]>div::before{
    content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--argent);
    transform:scaleX(0);transform-origin:left;
  }
  .js .dispositifs__liste.en-scene>div::before{transform:none;transition:transform 640ms var(--raccord-ease)}
  .js .dispositifs__liste.en-scene>div:nth-child(2)::before{transition-delay:60ms}
  .js .dispositifs__liste.en-scene>div:nth-child(3)::before{transition-delay:120ms}
  .js .dispositifs__liste.en-scene>div:nth-child(4)::before{transition-delay:180ms}
  .js .dispositifs__liste.en-scene>div:nth-child(5)::before{transition-delay:240ms}
  .js .dispositifs__liste.en-scene>div:nth-child(6)::before{transition-delay:300ms}

  /* La planche du duo : le filet qui sépare les deux associés se tend. */
  .js .planche--duo .duo-planche__bloc--haut{border-bottom-color:transparent;position:relative}
  .js .planche--duo .duo-planche__bloc--haut::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--argent);
    transform:scaleX(0);transform-origin:left;
  }
  .js .planche--duo.en-scene .duo-planche__bloc--haut::after{transform:none;transition:transform 800ms var(--raccord-ease) 200ms}
}

@media (prefers-reduced-motion:no-preference){
  .js .methode-zone[data-scene] .methode__trait path{stroke-dasharray:1;stroke-dashoffset:1}
  .js .methode-zone.en-scene .methode__trait path{animation:couture 1200ms var(--raccord-ease) 150ms forwards}
}

/* Les volumes qui attendent leur entrée partent décalés de 24 px vers la droite :
   sans ce rognage, la page gagnait une barre de défilement horizontale.
   « clip » plutôt que « hidden » : ne crée pas de conteneur de défilement,
   donc l'aparté collant de la FAQ reste collant. */
main{overflow-x:clip}

/* À l'impression, tout est à l'état final. */
@media print{
  .js .cliche[data-scene] .cliche__cadre,.js .respiration[data-scene] .respiration__cadre{transform:none!important;opacity:1!important}
  .js [data-scene] .seam path,.js .plan path{stroke-dasharray:none!important;stroke-dashoffset:0!important}
  .js .plan .plan__pieces{opacity:1!important}
  .respiration__pause{display:none}
}

/* Sous la vidéo : le bloc encre à gauche, les trois objectifs à droite. */
.respiration__bas{
  display:grid;grid-template-columns:minmax(0,40rem) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);align-items:end;padding-right:var(--gutter);
}
.respiration__bas .respiration__texte{max-width:none;margin-right:0}
.respiration__objectifs{list-style:none;margin:0;padding:0;max-width:26rem;justify-self:end;width:100%}
.respiration__objectifs li{
  display:flex;align-items:baseline;gap:1rem;padding:1rem 0;border-top:1px solid var(--argent);
  font-family:var(--serif);font-weight:300;font-size:clamp(1.125rem,1.6vw,1.375rem);color:var(--encre);
  font-variation-settings:"opsz" 36;
}
.respiration__objectifs li:last-child{border-bottom:1px solid var(--argent)}
.respiration__num{flex:0 0 2rem;font-family:var(--sans);font-size:.75rem;letter-spacing:.1em;color:var(--discret)}
@media (max-width:920px){
  .respiration__bas{grid-template-columns:1fr;padding-right:0}
  .respiration__objectifs{justify-self:start;margin:0 var(--gutter);width:auto;max-width:none}
}
/* La liste démarre toujours sous le bord de la vidéo, quelle que soit la
   hauteur de chevauchement du bloc encre (même clamp, signe inversé). */
.respiration__objectifs{align-self:start;margin-top:calc(clamp(4rem,12vh,7rem) + 1.25rem)}
@media (max-width:920px){.respiration__objectifs{margin-top:2rem}}
@media (max-width:920px){
  /* Le bloc encre chevauche le bas de la vidéo : le bouton pause remonte en
     haut à droite, sous la courbe, pour rester visible et atteignable. */
  .respiration__pause{top:clamp(2.5rem,9vw,3.5rem);bottom:auto}
  .respiration__objectifs{max-width:none}
}
@media (max-width:920px){
  /* En mobile, la planche du duo prend la hauteur de son contenu : au format
     3:2 imposé, le second nom était coupé et la légende chevauchait le texte. */
  .planche--duo{aspect-ratio:auto}
  .planche--duo .duo-planche{position:relative;inset:auto;padding:2rem 1.25rem 5.5rem 14%}
  .duo-planche__bloc--haut{padding-bottom:1.25rem}
  .duo-planche__bloc--bas{padding-top:1.25rem}
}

/* 03 · présentation commune, avant les deux parcours individuels */
.duo__commune{margin:0 0 2.5rem;max-width:56ch}
.duo__commune p{margin:0 0 1rem;font-size:1rem;line-height:1.7;text-wrap:pretty}
.duo__commune .duo__chapeau{
  margin-bottom:1.25rem;font-family:var(--serif);font-weight:300;
  font-size:clamp(1.375rem,2.2vw,1.75rem);line-height:1.2;color:var(--encre);
  font-variation-settings:"opsz" 48;text-wrap:balance;
}
/* À toutes les largeurs : la planche du duo grandit avec son contenu
   (au format 5:6 fixe, la légende chevauchait la seconde fiche entre 920 et 1200 px). */
.planche--duo{aspect-ratio:auto;min-height:32rem}
.planche--duo .duo-planche{position:relative;inset:auto;padding-bottom:5.5rem}

/* Le recadrage mobile est déjà centré sur la bonne bande de façade. */
@media (max-width:920px){.hero__media img{object-position:50% 50%}}

/* ============================================================
   Ouverture marquée · validée par Steeve le 10/10/2026, active sur l'accueil
   (classe .ouverture-forte posée sur <html> par le script d'en-tête).
   Le texte n'est jamais caché ni recomposé : seuls des volumes et des traits
   bougent, en transform. L'image est peinte dès le départ sous le rideau, donc
   son temps d'affichage (LCP) ne change pas.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  /* 1. Le papier s'ouvre sur la photo : un rideau papier, taillé dans la même
        courbe, se retire vers la droite en découvrant l'image. */
  .ouverture-forte .hero__plate{overflow:hidden}
  .ouverture-forte .hero__plate::after{
    content:"";position:absolute;inset:0;z-index:3;background:var(--papier);
    -webkit-mask-image:var(--raccord-v);mask-image:var(--raccord-v);
    -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    animation:rideau-raccord 1050ms cubic-bezier(.16,1,.3,1) 160ms both;
  }
  /* 2. La plaque se pose avec plus d'ampleur, la couture la précède. */
  .ouverture-forte .hero__plate{animation:pose-plaque-forte 1200ms cubic-bezier(.16,1,.3,1) both}
  .ouverture-forte .hero .seam path{animation-duration:1000ms;animation-delay:120ms}
  /* 3. Le filet du folio se tend, comme une règle de mise en page. */
  .ouverture-forte .hero .folio__rule{transform-origin:left;animation:regle-folio 700ms cubic-bezier(.16,1,.3,1) 200ms both}
}
@keyframes rideau-raccord{from{transform:translateX(0)}to{transform:translateX(102%)}}
@keyframes pose-plaque-forte{from{transform:translateX(56px) scale(1.035)}to{transform:none}}
@keyframes regle-folio{from{transform:scaleX(0)}to{transform:none}}
@media (prefers-reduced-motion:no-preference) and (max-width:920px){
  .ouverture-forte .hero__plate{animation:pose-plaque-mobile 600ms var(--raccord-ease) both}
  .ouverture-forte .hero__plate::after{animation-duration:900ms}
}
@media (prefers-reduced-motion:no-preference) and (max-width:920px){
  /* En mobile la courbe est horizontale, en haut de la photo : le rideau descend,
     son bord supérieur taillé dans cette courbe. Même geste, même orientation que la page. */
  .ouverture-forte .hero__plate::after{
    -webkit-mask-image:var(--raccord-h);mask-image:var(--raccord-h);
    animation-name:rideau-raccord-mobile;
  }
}
@keyframes rideau-raccord-mobile{from{transform:translateY(0)}to{transform:translateY(102%)}}

/* Portraits d'illustration dans la planche du duo (23/10/2026) */
.planche--photos .duo-planche__bloc{display:grid;grid-template-columns:minmax(0,40%) 1fr;gap:1.25rem;align-items:center}
.planche--photos .duo-planche__texte{display:flex;flex-direction:column;gap:.625rem}
.duo-planche__photo{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  filter:saturate(.82) contrast(1.02);
  -webkit-mask-image:var(--raccord-v);mask-image:var(--raccord-v);-webkit-mask-size:100% 100%;mask-size:100% 100%}
.pied__adresse{margin:.75rem 0 0;font-size:.875rem;line-height:1.5;color:var(--texte)}

/* ============================================================
   Améliorations d'usage du 23/10/2026
   ============================================================ */

/* Légende du héros : jamais coupée au bord de l'écran, même pendant la profondeur. */
.hero__caption{text-wrap:balance;padding-right:clamp(1.5rem,3vw,2.5rem)}

/* Bouton projet dans l'en-tête, ordinateur seulement. */
.btn--entete{padding:.6875rem 1.125rem;font-size:.8125rem;gap:.5rem;flex:none}
.masthead .nav{margin-left:auto}
@media (max-width:920px){.btn--entete{display:none}}

/* Barre projet fixée en bas, mobile seulement. */
.barre-projet{display:none}
@media (max-width:920px){
  .barre-projet{
    position:fixed;left:var(--gutter);right:var(--gutter);
    bottom:calc(.875rem + env(safe-area-inset-bottom,0px));z-index:30;
    display:flex;align-items:center;justify-content:center;gap:.625rem;
    min-height:3.25rem;padding:0 1.25rem;
    background:var(--encre);color:var(--papier);text-decoration:none;
    font-size:.9375rem;font-weight:500;
    transition:transform 240ms var(--raccord-ease),opacity 200ms ease;
  }
  .barre-projet[hidden]{display:flex;transform:translateY(calc(100% + 1.5rem));opacity:0;pointer-events:none}
  .barre-projet:focus-visible{outline:2px solid var(--encre);outline-offset:3px}
}
@media (max-width:920px) and (prefers-reduced-motion:reduce){.barre-projet{transition:none}}

/* L'ancre du formulaire laisse respirer l'onglet sous le haut de l'écran. */
#formulaires{scroll-margin-top:1.5rem}

/* Les trois objectifs mènent au formulaire, objectif déjà coché. */
.objectif-lien{
  display:flex;align-items:baseline;gap:1rem;width:100%;
  color:inherit;text-decoration:none;
}
.objectif-lien__fleche{margin-left:auto;font-family:var(--sans);font-size:.9375rem;color:var(--discret);transition:transform 220ms var(--raccord-ease),color 220ms ease}
.objectif-lien:hover .objectif-lien__fleche,.objectif-lien:focus-visible .objectif-lien__fleche{transform:translateX(3px);color:var(--encre)}
.objectif-lien:focus-visible{outline:2px solid var(--encre);outline-offset:4px}

/* Un lien par dispositif. */
.dispositif__lien{
  display:inline-flex;gap:.375rem;margin-top:.875rem;
  font-size:.8125rem;font-weight:500;color:var(--encre);text-decoration:none;
  border-bottom:1px solid var(--argent);padding-bottom:.125rem;
  transition:border-color 220ms ease;
}
.dispositif__lien:hover{border-bottom-color:var(--encre)}

/* Contact : trois repères dans l'espace laissé à gauche de la photo. */
.contact__haut{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44rem);
  gap:clamp(2rem,5vw,4.5rem);align-items:end;
  margin:clamp(2.5rem,6vh,3.5rem) 0 clamp(3rem,7vh,4.5rem);
}
.contact__haut .cliche--large{margin:0;max-width:none}
.contact__reperes{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:24rem}
.contact__reperes li{padding:1.125rem 0;border-top:1px solid var(--argent);font-size:.9375rem;line-height:1.55;color:var(--texte)}
.contact__reperes li:last-child{border-bottom:1px solid var(--argent)}
.contact__reperes strong{font-weight:500;color:var(--encre)}
@media (max-width:920px){
  /* Mobile : le formulaire passe avant la photo. */
  .seq--contact{display:flex;flex-direction:column}
  .contact__haut{display:contents}
  .contact__reperes{order:1;max-width:none;margin:1.75rem 0 0}
  .seq--contact .modes{order:2;margin-top:2.5rem}
  .seq--contact .panneau{order:3}
  .contact__haut .cliche--large{order:4;margin-top:3rem}
}

/* Progression en trois segments ; le numéro répété dans chaque étape disparaît. */
.etapes-jauge{display:grid;gap:.75rem}
.jauge__segments{display:grid;grid-template-columns:repeat(3,1fr);gap:.375rem;max-width:20rem}
.jauge__segments i{display:block;height:2px;background:var(--argent);transition:background 300ms ease}
.jauge__segments i.fait{background:var(--encre)}
.js .form--projet .pas__num{display:none}

/* Récapitulatif mobile : rien à montrer tant qu'aucune réponse n'est donnée. */
@media (max-width:920px){.recap--vide{display:none}}

/* Créneau de rappel, sous le téléphone. */
.champ__label--sous{margin-top:1.25rem}
.options--ligne{flex-direction:row;flex-wrap:wrap;gap:.25rem 1.5rem}

/* Après l'envoi : où aller en attendant. */
.form__suite{margin-top:1.75rem;max-width:30rem}
.form__suite[hidden]{display:none}
.form__suite-titre{margin:0 0 .5rem;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--discret)}
.form__suite ul{list-style:none;margin:0;padding:0}
.form__suite li{border-top:1px solid var(--argent)}
.form__suite li:last-child{border-bottom:1px solid var(--argent)}
.form__suite a{display:flex;padding:.75rem 0;color:var(--encre);text-decoration:none;font-size:.9375rem}
.form__suite a:hover{text-decoration:underline;text-underline-offset:.2em}

/* Pied de page : la colonne du cabinet. */
.pied__adresse--haut{margin-top:0;max-width:30ch}

/* Section promoteurs sur mobile : l'espacement général des sections s'ajoutait
   au sien et laissait un grand vide sous la photo du chantier. */
@media (max-width:920px){
  .seq--promoteurs{padding-block:0}
  .promo__contenu{padding-bottom:clamp(3rem,7vh,4rem)}
}

/* Page introuvable. */
.introuvable{max-width:40rem}
.introuvable .actions{margin-top:2rem}

/* ============================================================
   Densité et mouvement · 23/10/2026
   Retour de Steeve : trop de vide sans raison, une page qui paraît figée,
   un site qui doit être « technique ». On garde la respiration, on retire
   le vide qui ne porte rien, et on donne trois gestes à la page, tous
   tirés de la revue d'architecture :
   1. la page tourne : le folio change de numéro, sa règle se tend, le titre
      de séquence monte de sa ligne de pied (jamais le héros, validé le 10/10,
      jamais le texte courant) ;
   2. la profondeur : les grandes planches glissent dans leur cadre plus
      lentement que la page, et le bloc encre passe devant la vidéo ;
   3. le tracé : la méthode se trace au rythme de la lecture, une règle
      graduée dans la marge suit la position dans le cahier.
   Uniquement translate, scale, transform et opacity. Les états de départ
   dépendent de la classe .mouvement, posée par le script seulement quand
   le mouvement est permis : sans elle, tout est à l'état final.
   ============================================================ */

/* --- Densité : le vide qui ne porte rien disparaît ----------- */
.seq{padding:clamp(4rem,9vh,6.5rem) var(--gutter)}
.seq--promoteurs{padding:0}
.seq__head .folio{padding-top:0}
.promo__contenu{padding-top:clamp(7.5rem,14vh,9.5rem)}
@media (max-width:920px){
  .seq{padding-block:clamp(3rem,7vh,4.25rem)}
  .seq--promoteurs{padding-block:0}
  .promo__contenu{padding-top:clamp(5.5rem,13vh,6.5rem)}
}

/* 02 : l'incise ne flotte plus au pied d'une photo haute. L'incise et les
   dispositifs forment une colonne de lecture, la planche des balcons les
   accompagne à droite et reste à l'écran pendant toute la liste. */
.approche__bas{align-items:start}
.approche__texte{min-width:0}
.approche__texte .dispositifs{margin-top:clamp(3.5rem,8vh,5rem);max-width:none}
.cliche--colonne{position:sticky;top:clamp(1.5rem,5vh,3rem)}
@media (min-width:921px) and (max-width:1240px){
  .approche__texte .dispositifs__liste{grid-template-columns:1fr}
}
@media (max-width:920px){
  .approche__bas{display:flex;flex-direction:column;align-items:stretch;gap:2.5rem}
  .approche__texte{display:contents}
  .approche__incise{order:1}
  .cliche--colonne{order:2;position:static}
  .approche__texte .dispositifs{order:3;margin-top:.5rem}
}

/* 06 : le titre rejoint la colonne des repères. La colonne a la hauteur de
   la photo, le titre en haut, les repères en bas : plus de bande vide
   au-dessus des repères, plus de titre isolé au-dessus du bloc. */
.contact__haut{align-items:stretch;margin-top:0;grid-template-columns:minmax(20rem,1fr) minmax(0,44rem)}
.contact__gauche{
  display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(2rem,5vh,3rem);min-width:0;
}
.contact__haut .cliche--large{align-self:end}
@media (max-width:920px){.contact__gauche{display:contents}}

/* Respiration : le bloc encre chevauche vraiment le bas de la vidéo. Calé en
   bas de sa rangée, il était repoussé sous l'image par la liste des objectifs,
   plus haute que lui : le chevauchement voulu n'avait jamais lieu. */
.respiration__bas .respiration__texte{align-self:start}
/* La rangée commence au bord de la vidéo : la liste n'a plus à descendre de la
   hauteur du chevauchement. */
.respiration__objectifs{margin-top:2rem}
/* La courbe de la vidéo fait déjà la respiration : la séquence 02 n'ajoute
   pas une marge pleine par-dessus. */
#approche{padding-bottom:clamp(2rem,4vh,3rem)}
/* 04 : la liste démarre à la hauteur de la photo du chantier. */
.promo__corps .promo__points{margin-top:0}

/* --- Micro-retours : le filet s'encre de gauche à droite ----- */
/* Le filet argent reste la bordure ; un trait encre posé dessus se tend au
   survol et au focus clavier. Animation composée (transform), pas de peinture. */
.link,.dispositif__lien,.duo__plus summary,.pied__liens a{position:relative}
.link::after,.dispositif__lien::after,.duo__plus summary::before,.pied__liens a::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--encre);
  transform:scaleX(0);transform-origin:left;transition:transform 420ms var(--raccord-ease);pointer-events:none;
}
.link:hover::after,.dispositif__lien:hover::after,.duo__plus summary:hover::before,.pied__liens a:hover::after,
.link:focus-visible::after,.dispositif__lien:focus-visible::after,.duo__plus summary:focus-visible::before,.pied__liens a:focus-visible::after{transform:none}
.link:hover,.dispositif__lien:hover,.duo__plus summary:hover,.pied__liens a:hover{border-bottom-color:var(--argent)}
@media (prefers-reduced-motion:reduce){
  .link::after,.dispositif__lien::after,.duo__plus summary::before,.pied__liens a::after{transition:none}
}

/* Les réponses et les parcours s'ouvrent au lieu d'apparaître d'un coup
   (navigateurs qui savent animer une hauteur automatique). */
@media (prefers-reduced-motion:no-preference){
  @supports (interpolate-size:allow-keywords){
    :root{interpolate-size:allow-keywords}
    .qa::details-content,.duo__plus::details-content{
      height:0;overflow:clip;
      transition:height 420ms var(--raccord-ease),content-visibility 420ms allow-discrete;
    }
    .qa[open]::details-content,.duo__plus[open]::details-content{height:auto}
  }
}

/* Lecteurs d'écran seulement. */
.lu{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

@media (prefers-reduced-motion:no-preference){

  /* --- 1. La page tourne -------------------------------------- */
  /* Le folio affiche le numéro précédent, puis tourne sur le sien. */
  .mouvement .folio__num{display:inline-block;height:1.3em;line-height:1.3;overflow:clip}
  .mouvement .folio__roue{display:flex;flex-direction:column;transition:transform 600ms cubic-bezier(.16,1,.3,1) 80ms}
  .mouvement .seq__head.en-scene .folio__roue{transform:translateY(-50%)}
  /* Sa règle se tend comme celle du héros. */
  .mouvement .seq__head .folio__rule{transform:scaleX(0);transform-origin:left;transition:transform 700ms cubic-bezier(.16,1,.3,1)}
  .mouvement .seq__head.en-scene .folio__rule{transform:none}
  /* Le titre monte de sa ligne de pied, ligne après ligne. Le cadre de chaque
     mot déborde un peu en haut et en bas : les accents des capitales et les
     jambages ne sont jamais rognés. */
  .mouvement .titre-anime .m{display:inline-block;vertical-align:top;overflow:clip;padding:.12em 0 .16em;margin:-.12em 0 -.16em}
  .mouvement .titre-anime .m__i{
    display:inline-block;transform:translateY(130%);
    transition:transform 900ms cubic-bezier(.16,1,.3,1);
    transition-delay:calc(var(--l,0) * 110ms + var(--w,0) * 16ms + 40ms);
  }
  .mouvement .titre-anime.en-scene .m__i{transform:none}

  /* --- 2. La profondeur --------------------------------------- */
  /* L'image est un peu plus grande que son cadre pour pouvoir y glisser sans
     jamais découvrir de bord. Amplitude posée par le script (--amp, en %). */
  .mouvement .parallaxe{scale:calc(1 + var(--amp,0) * .021)}
  /* Le héros reçoit son échelle dès le premier rendu : rien ne saute sous le rideau. */
  .ouverture-forte .hero__plate{--amp:7}
  .ouverture-forte .hero__media img{scale:calc(1 + var(--amp) * .021)}

  /* --- 3. Le tracé -------------------------------------------- */
  /* La méthode suit la lecture : le trait avance avec le défilement et
     chaque repère s'encre quand le trait l'atteint. */
  .mouvement .methode-zone.trace-actif .methode__trait path{
    animation:none;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--trace,0));
  }
  .mouvement .etape__num{transition:background-color 360ms ease,color 360ms ease}
  .mouvement .etape.atteinte .etape__num{background:var(--encre);color:var(--papier)}

  /* La courbe d'entrée des promoteurs se trace, puis les filets de la liste. */
  .js .rupture[data-scene] path{stroke-dasharray:1;stroke-dashoffset:1}
  .js .rupture.en-scene path{animation:couture 1400ms var(--raccord-ease) forwards}
  .js .promo__points[data-scene]>div{border-top-color:transparent;position:relative}
  .js .promo__points[data-scene]>div::before{
    content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:rgba(188,195,203,.28);
    transform:scaleX(0);transform-origin:left;
  }
  .js .promo__points.en-scene>div::before{transform:none;transition:transform 700ms var(--raccord-ease)}
  .js .promo__points.en-scene>div:nth-child(2)::before{transition-delay:90ms}
  .js .promo__points.en-scene>div:nth-child(3)::before{transition-delay:180ms}

  /* Intensité « plus marquée » (choix de Steeve, 23/10) : chaque photo de la page
     s'ouvre comme celle du héros. Un rideau taillé dans la même courbe se retire
     sur l'image, le volume se pose de plus loin. Le rideau est de la couleur du
     fond qui l'entoure : papier, ou bleu profond chez les promoteurs. */
  .mouvement .cliche[data-scene] .cliche__cadre{opacity:1;transform:translateX(48px);overflow:hidden}
  .mouvement .cliche[data-scene] .cliche__cadre::after{
    content:"";position:absolute;inset:0;z-index:2;background:var(--papier);
    -webkit-mask-image:var(--raccord-v);mask-image:var(--raccord-v);
    -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  }
  .mouvement .cliche--clair[data-scene] .cliche__cadre::after{background:var(--profond)}
  .mouvement .cliche[data-scene].en-scene .cliche__cadre{
    transform:none;transition:transform 1100ms cubic-bezier(.16,1,.3,1);
  }
  .mouvement .cliche[data-scene].en-scene .cliche__cadre::after{
    transform:translateX(102%);transition:transform 1000ms cubic-bezier(.16,1,.3,1) 120ms;
  }
  .mouvement .respiration[data-scene] .respiration__cadre{transform:translateY(64px)}
  .mouvement .respiration[data-scene].en-scene .respiration__cadre{transform:none;transition:transform 1100ms cubic-bezier(.16,1,.3,1)}
}

/* --- La règle graduée de la marge (ordinateur) --------------- */
/* Une échelle d'architecte dans la gouttière gauche : un cran par séquence,
   le curseur suit la position dans le cahier et porte le folio courant.
   Décor d'orientation, muet pour les lecteurs d'écran, jamais cliquable.
   Mélange « différence » : lisible sur le papier comme sur le bleu profond. */
.regle{display:none}
@media (min-width:1180px){
  .regle{
    display:block;position:fixed;z-index:20;left:calc(var(--gutter) * .42);top:50%;
    width:1.25rem;height:min(52vh,30rem);translate:-50% -50%;
    color:#fff;mix-blend-mode:difference;pointer-events:none;
    opacity:0;transition:opacity 420ms ease;
  }
  .regle.visible{opacity:.92}
  .regle__axe{position:absolute;left:50%;top:0;bottom:0;width:1px;background:currentColor;opacity:.32}
  .regle__cran{position:absolute;left:50%;width:.4375rem;height:1px;background:currentColor;translate:-50% 0;opacity:.75}
  .regle__curseur{position:absolute;left:50%;top:0;width:.8125rem;height:1px;background:currentColor;translate:-50% 0;will-change:transform}
  .regle__num{
    position:absolute;left:1.125rem;top:-.45rem;
    font-size:.625rem;font-weight:500;letter-spacing:.14em;line-height:1;font-variant-numeric:tabular-nums;
  }
}

@media print{
  .titre-anime .m__i,.folio__roue,.seq__head .folio__rule{transform:none!important}
  .parallaxe{translate:none!important;scale:1!important}
  .regle{display:none!important}
}


/* ============================================================
   Passe audit Codex · 23/10/2026 (docs/AUDIT-CODEX.md)
   ============================================================ */
/* La méthode et son tracé dans un même cadre (HTML valide). */
.methode-zone{position:relative;margin-top:clamp(3.5rem,8vh,5.5rem)}
.methode-zone .methode{margin-top:0}

/* P1.5 · Un champ se repère sans deviner : bordure à 4,9:1 sur le papier
   (WCAG 1.4.11). Les filets éditoriaux, eux, restent argent. */
input[type=text],input[type=email],input[type=tel],select,textarea{border-color:var(--discret)}
input:hover,select:hover,textarea:hover{border-color:var(--encre)}
/* Le focus encre disparaît sur le bleu profond : il passe en papier. */
.seq--promoteurs :focus-visible,.respiration__texte :focus-visible{outline-color:var(--papier)}

/* P2.7 · Les mentions utiles se lisent sans effort : 12 px pour les légendes
   d'illustration, 14 px pour l'action de chaque dispositif. */
.cliche__legende,.respiration__legende,.planche__legende{font-size:.75rem}
.dispositif__lien{font-size:.875rem}

/* P1.15 · La mention d'illustration au pied de chaque visage. */
.duo-planche__mention{margin:.25rem 0 0;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--texte)}

/* Récapitulatif : chaque réponse se modifie à l'endroit où elle a été donnée. */
.recap__val{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0}
.recap__modifier{
  flex:none;
  appearance:none;background:none;border:0;border-bottom:1px solid var(--argent);border-radius:0;
  padding:.25rem 0;cursor:pointer;font-family:var(--sans);font-size:.8125rem;font-weight:500;color:var(--encre);
  transition:border-color 220ms ease;
}
.recap__modifier:hover{border-bottom-color:var(--encre)}
.recap__modifier:focus-visible{outline:2px solid var(--encre);outline-offset:3px}
.recap__vide[hidden]{display:none}

/* Reprise : proposée, jamais imposée. */
.reprise{
  display:grid;gap:.875rem;margin:0 0 2.25rem;padding:1.25rem 0;
  border-top:1px solid var(--encre);border-bottom:1px solid var(--argent);
}
.reprise[hidden]{display:none}
.reprise__texte{margin:0;font-size:.9375rem;line-height:1.55;color:var(--encre);max-width:48ch}
.reprise__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.75rem}

/* Le cadre professionnel, vérifiable, au moment de décider. */
.form__cadre{margin:1.25rem 0 0;font-size:.8125rem;line-height:1.55;color:var(--texte);max-width:52ch}
.form__cadre a{color:var(--encre);text-decoration:none;border-bottom:1px solid var(--argent)}
.form__cadre a:hover{border-bottom-color:var(--encre)}

/* Erreur rattachée à un groupe de choix : visible au pied du groupe. */
.champ .erreur{scroll-margin-top:6rem}

/* Le panneau reçoit le focus quand on y arrive par un lien direct : un repère
   visible mais discret, pour ne pas encadrer tout le formulaire comme un champ. */
.panneau:focus-visible{outline:1px solid var(--discret);outline-offset:.5rem}

/* Flèche des actions : un dessin, pas un caractère. La flèche nord-est (U+2197) n'est
   pas dans les polices du site ; iPhone et iPad le remplaçaient par l'emoji d'Apple. */
.fleche{display:block;width:.75em;height:.75em;overflow:visible}
.btn__arrow{display:inline-flex;align-items:center}