/* =========================================================================
   WebFactory — système visuel
   Relevé sur worldlabs.ai le 18/08/2026. Le contrat est dans loop/DA-WORLDLABS.md ;
   les valeurs machine dans loop/tokens.json. Toute valeur écrite en dur ici au lieu
   d'un token est une non-conformité : le vérificateur front la relève.
   ========================================================================= */

/* ---------- Polices auto-hébergées (aucun appel tiers) ---------- */
@font-face{font-family:"Gilda Display";src:url(../fonts/gilda-display-latin-400-normal.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Gilda Display";src:url(../fonts/gilda-display-latin-ext-400-normal.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";src:url(../fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(../fonts/hanken-grotesk-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(../fonts/hanken-grotesk-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

/* ---------- Tokens ---------- */
/* Neutres CHAUDS : la référence est en gris bleuté, nous sommes en gris pierre.
   Même structure, autre température — c'est là que se joue notre différence. */
:root{
  --fond:#faf9f7; --blanc:#fff; --encre:#2b2926; --nuit:#16130f;
  --pierre:#7f7468;          /* 2e ligne des titres, accents typographiques — 4,34:1 */
  --g150:#756b60;            /* légendes, dates, surtitres — 4,95:1 */
  --g200:#5c554c;            /* texte courant et navigation — 6,98:1 */
  --accent:#96604f;          /* panneau d'appel uniquement — terre cuite */
  --filet:rgba(43,41,38,.11);
  --filet-clair:rgba(255,255,255,.18);
  --nuit-titre:#f2f0ec; --nuit-texte:#ada69c; --nuit-gris:#9a9183; --nuit-corps:#e6e2dc;
  --erreur:#7d2f1f;
  --ombre:0 1px 2px rgba(43,41,38,.04), 0 8px 24px -12px rgba(43,41,38,.10);
  --ombre-forte:0 2px 4px rgba(43,41,38,.05), 0 18px 44px -18px rgba(43,41,38,.16);

  --serif:"Gilda Display",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Mesuré sur worldlabs.ai le 18/08/2026, viewport 1536 : gouttière 40 px,
     contenu de 1456 px — soit la pleine largeur moins 80. Pas de colonne étroite centrée. */
  --wrap:1600px;
  --gout:clamp(20px,2.6vw,40px);
  --souffle:clamp(110px,15vh,180px);
  --r:16px;
  --trait:.8px;
  --pose:.6s cubic-bezier(.16,1,.3,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--fond);color:var(--g200);font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* On EMPÊCHE le débordement au lieu de le masquer : un overflow-x:hidden rendrait
   le contrôle automatique de défilement horizontal incapable d'échouer. */
h1,h2,h3,h4,p,li,a,button,span,label,td,th{overflow-wrap:anywhere}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--encre);outline-offset:3px;border-radius:4px}
.bande :focus-visible,.appel :focus-visible{outline-color:#fff}
.saut{position:absolute;left:-9999px;top:0;background:var(--encre);color:var(--fond);padding:12px 20px;z-index:300}
.saut:focus{left:12px;top:12px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gout)}
.plein{width:100%}
.horsecran{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Échelle typographique ---------- */
.titre-page{font-family:var(--serif);font-weight:400;color:var(--encre);
  font-size:clamp(44px,7.4vw,80px);line-height:1;letter-spacing:-.05em;max-width:16ch}
.titre-page .second{display:block;color:var(--pierre)}
.titre-section{font-family:var(--serif);font-weight:400;color:var(--encre);
  font-size:clamp(34px,4.6vw,64px);line-height:1.15;letter-spacing:-.05em;max-width:18ch}
.titre-section .second{color:var(--pierre)}
.titre-bloc{font-family:var(--serif);font-weight:400;color:var(--encre);
  font-size:clamp(24px,2.6vw,30px);line-height:1.2;letter-spacing:-.06em}
.accroche{font-size:clamp(18px,1.55vw,20px);line-height:1.45;color:var(--g200);max-width:46ch}
.texte{font-size:16px;line-height:1.62;color:var(--g200);max-width:66ch}
.texte + .texte{margin-top:1.1em}
.legende{font-size:14px;line-height:1.45;color:var(--g150)}
.surtitre{display:inline-block;font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--g150)}

/* ---------- Pastille : le seul bouton du site ---------- */
.pastille{display:inline-flex;align-items:center;gap:10px;border-radius:999px;
  font-size:16px;font-weight:500;line-height:1;padding:15px 26px;min-height:48px;
  transition:background .22s ease,color .22s ease,transform .22s ease}
.pastille .ico{flex:none;transition:transform .22s ease}
.pastille:hover .ico{transform:translateX(3px)}
.nav a.pastille,.voile a.pastille{color:var(--fond)}
.pastille--sombre{background:var(--encre);color:var(--fond)}
.pastille--sombre:hover{background:#3a372f}
.pastille--clair,.nav a.pastille--clair,.voile a.pastille--clair{background:var(--fond);color:var(--encre)}
.pastille--clair:hover{background:var(--blanc)}

/* ---------- En-tête ---------- */
.tete{position:sticky;top:0;z-index:120;background:rgba(250,249,247,.84);
  transition:box-shadow .25s ease,backdrop-filter .25s ease}
.tete.est-collee{background:rgba(250,249,247,.97);
  -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);
  box-shadow:0 1px 0 var(--filet),0 10px 30px -24px rgba(43,41,38,.5)}
.tete__inner{display:flex;align-items:center;justify-content:space-between;gap:32px;height:74px}
.marque{display:flex;align-items:center;min-height:44px}
.marque img{height:30px;width:auto}
.nav{display:flex;align-items:center;gap:clamp(20px,2.6vw,34px)}
.nav a{font-size:16px;font-weight:500;color:var(--g200);padding:10px 2px;min-height:44px;
  display:inline-flex;align-items:center;transition:color .18s}
.nav a:hover,.nav a[aria-current=page]{color:var(--encre)}
.tete .pastille{padding:12px 22px;min-height:44px}
.burger{display:none;width:48px;height:48px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{display:block;width:20px;height:1.6px;background:var(--encre);border-radius:2px;transition:.25s}
.burger[aria-expanded=true] span:first-child{transform:translateY(3.3px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-3.3px) rotate(-45deg)}
.voile{position:fixed;inset:74px 0 0;background:var(--fond);z-index:110;
  display:flex;flex-direction:column;padding:40px var(--gout) 56px;gap:6px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .24s ease,transform .24s ease,visibility 0s linear .24s}
.voile[data-ouvert=true]{opacity:1;visibility:visible;transform:none;
  transition:opacity .24s ease,transform .24s ease,visibility 0s}
.voile a:not(.pastille){font-family:var(--serif);font-size:34px;line-height:1.25;letter-spacing:-.04em;color:var(--encre);
  padding:14px 0;border-bottom:var(--trait) solid var(--filet);min-height:48px}
.voile .pastille{margin-top:28px;align-self:flex-start}

/* ---------- Sections ---------- */
.section{padding-block:var(--souffle)}
.section--serree{padding-block:calc(var(--souffle) * .62)}
.section--haut{padding-top:clamp(72px,11vh,132px);padding-bottom:0}
/* Référence : image 582 px calée sur la gouttière, texte 635 px, écart 128 px. */
.duo{display:grid;grid-template-columns:minmax(0,.917fr) minmax(0,1fr);gap:clamp(36px,8.4vw,128px);align-items:center}
.duo__texte>*+*{margin-top:24px}
.duo--haut{align-items:start}
/* Inversion réelle au-dessus de 900 px : sans cette règle, tous les duos du site
   avaient l'image à gauche et le rythme devenait monotone. */
@media (min-width:901px){.duo--inverse .duo__media{order:2}}
/* Par défaut un en-tête de section est aligné à gauche, comme sur la référence.
   .centre est l'exception, réservée à deux ou trois grands titres par site. */
/* En-tête de section sur deux colonnes : le titre ne laisse plus mille pixels
   de vide à sa droite. */
.shead{display:grid;grid-template-columns:minmax(0,.46fr) minmax(0,.54fr);
  gap:clamp(24px,5vw,88px);align-items:end}
.shead .surtitre{grid-column:1;align-self:start}
.shead .titre-section{grid-column:1;grid-row:2;max-width:15ch}
.shead .accroche{grid-column:2;grid-row:2;max-width:56ch;margin-top:0}
.shead--simple{display:block;max-width:52ch}
.shead .shead__cote{grid-column:2;grid-row:2;max-width:56ch}
.shead .shead__cote .texte+.texte{margin-top:1.1em}
@media (max-width:900px){.shead .shead__cote{margin-top:22px}}
@media (max-width:900px){.shead{display:block}.shead .accroche{margin-top:22px}}
.centre{text-align:center;margin-inline:auto}
.centre .titre-section,.centre .titre-page{margin-inline:auto}
.centre .accroche{margin-inline:auto;max-width:66ch}

/* ---------- Cadres image ---------- */
.cadre{border-radius:var(--r);overflow:hidden;background:var(--blanc);border:var(--trait) solid var(--filet)}
.duo__media{display:flex}
.duo__media .cadre{width:100%}

.cadre img{width:100%;height:100%;object-fit:cover;display:block}
.cadre--3-4{aspect-ratio:3/4}
.cadre--16-9{aspect-ratio:16/9}
.cadre--4-3{aspect-ratio:4/3}
.cadre--3-2{aspect-ratio:3/2}
.bandeau-image{width:100%;aspect-ratio:21/9;overflow:hidden;border-radius:var(--r)}
.bandeau-image img{width:100%;height:100%;object-fit:cover}

/* ---------- Bandeau sombre pleine largeur ---------- */
.bande{background:var(--nuit);color:var(--nuit-corps);padding-block:var(--souffle)}
.bande .titre-section,.bande .titre-bloc{color:var(--nuit-titre)}
.bande .titre-section .second{color:var(--nuit-gris)}
.bande .accroche,.bande .texte{color:var(--nuit-texte)}
.bande .surtitre{color:var(--nuit-gris)}
.bande .cadre{border-color:var(--filet-clair);background:#1f1b16}
.cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,1.6vw,24px);margin-top:56px}
.carte__img{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;margin-bottom:26px}
.carte__img img{width:100%;height:100%;object-fit:cover}
.carte h3{margin-bottom:12px}
.carte p{font-size:16px;line-height:1.6}

/* ---------- Cartes d'articles ---------- */
.articles{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:clamp(18px,1.6vw,24px);margin-top:56px}
.article__date{display:block;font-size:14px;color:var(--g150);margin-bottom:12px}
.article h3{font-size:20px;font-weight:500;line-height:1.35;color:var(--encre);
  font-family:var(--sans);letter-spacing:0;margin-bottom:10px}
.article p{font-size:16px;line-height:1.55;color:var(--g150);margin-bottom:24px}
.article__img{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
.article__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.article:hover .article__img img{transform:scale(1.03)}

/* ---------- Panneau d'appel ---------- */
.appel{margin:0 var(--gout) var(--gout);border-radius:var(--r);
  background:var(--accent);color:var(--blanc);overflow:hidden;position:relative;isolation:isolate}
/* Voile : sans lui le texte blanc tomberait sous 3:1 sur les zones claires de la nappe. */
.appel::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(52,28,21,.30) 0%,rgba(52,28,21,.06) 40%,rgba(52,28,21,.58) 100%)}
.appel__inner{padding:clamp(64px,8vw,110px) var(--gout) clamp(34px,4vw,52px);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:30px;min-height:clamp(360px,42vh,480px)}
.appel .titre-section{color:var(--blanc);max-width:18ch}
.appel__liens{align-self:stretch;display:flex;flex-wrap:wrap;gap:4px 26px;margin-top:auto;padding-top:40px;text-align:left}
.appel__liens a{font-size:16px;font-weight:500;color:var(--blanc);padding:9px 0;min-height:44px;
  display:inline-flex;align-items:center;opacity:.92;transition:opacity .18s}
.appel__liens a:hover{opacity:1}

/* ---------- Barre finale ---------- */
.pied{padding:38px var(--gout) 52px;display:flex;align-items:center;justify-content:space-between;
  gap:26px;flex-wrap:wrap}
.pied__marque{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:8px 0}
.pied__marque img{height:28px;width:auto}
.pied__legal{font-size:12px;letter-spacing:.05em;color:var(--g200);text-align:center;line-height:1.75}
.pied__legal b{font-weight:400;text-transform:uppercase;letter-spacing:.09em}
.pied__contact{font-size:14px;color:var(--g200);text-align:right}
.pied__contact a{display:inline-flex;align-items:center;min-height:44px;padding:12px 0}
.pied__contact a{color:var(--g200)}
.pied__contact a:hover{color:var(--encre)}

/* ---------- Révélation au défilement ---------- */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity var(--pose),transform var(--pose)}
[data-reveal="in"]{opacity:1;transform:none}
.js-absent [data-reveal]{opacity:1;transform:none}
/* Sans JS : le burger, qui ne servirait à rien, disparaît. */
.js-absent .burger{display:none!important} /* justifié : neutralise la règle mobile */
.js-absent .nav{display:flex!important;flex-wrap:wrap} /* justifié : idem */

/* ---------- Mobile ---------- */
@media (max-width:900px){
  .nav,.tete .pastille{display:none}
  .burger{display:flex}
  .duo{grid-template-columns:1fr;gap:40px}
  .duo--inverse .duo__media{order:-1}
  .cartes,.articles{grid-template-columns:1fr;gap:48px}
  .appel__inner{align-items:flex-start;text-align:left}
  .appel .titre-section{max-width:none}
  .pied{flex-direction:column;align-items:flex-start;gap:22px}
  .pied__legal,.pied__contact{text-align:left}
  .bandeau-image{aspect-ratio:4/3}
}
@media (max-width:520px){
  .cadre--3-4{aspect-ratio:4/5}
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none}
}

/* ---------- Impression ---------- */
@media print{.tete,.appel,.voile{display:none}body{background:#fff}}

/* =========================================================================
   Composants de pages intérieures
   ========================================================================= */

/* Grille de blocs à filets (règles, principes, critères) */
.bloc{padding:36px 0;border-bottom:var(--trait) solid var(--filet)}
.bloc h3{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.2;letter-spacing:-.04em;
  color:var(--encre);margin-bottom:14px}
.bloc p{font-size:16px;line-height:1.6;color:var(--g200);max-width:44ch}
.bande .bloc{border-color:var(--filet-clair)}
.bande .blocs{border-color:var(--filet-clair)}
.bande .bloc h3{color:var(--nuit-titre)}
.bande .bloc p{color:var(--nuit-texte)}

/* Étapes numérotées */
.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(18px,1.6vw,24px);margin-top:56px}
.etape{border-top:var(--trait) solid var(--filet);padding-top:26px}
.etape__n{display:block;font-size:11px;font-weight:500;letter-spacing:.16em;color:var(--g150);margin-bottom:18px}
.etape h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.2;letter-spacing:-.04em;
  color:var(--encre);margin-bottom:12px}
.etape p{font-size:16px;line-height:1.6;color:var(--g200)}

/* Option (sécurité) — grand bloc alterné */
.option{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.option + .option{margin-top:var(--souffle)}
.option:nth-child(even) .option__media{order:-1}
.option__texte>*+*{margin-top:20px}

/* Corps d'article — colonne étroite, la seule zone de lecture longue du site */
.corps{max-width:65ch;margin-inline:auto}
.corps>*+*{margin-top:1.5em}
.corps p{font-size:18px;line-height:1.72;color:var(--g200)}
.corps h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.2vw,38px);line-height:1.22;
  letter-spacing:-.04em;color:var(--encre);margin-top:2.2em}
.corps h3{font-size:19px;font-weight:500;color:var(--encre);margin-top:2em}
.corps ul{padding-left:1.1em;display:grid;gap:.7em}
.corps li{font-size:18px;line-height:1.65;color:var(--g200)}
.corps li::marker{color:var(--pierre)}
.corps blockquote{border-left:2px solid var(--filet);padding-left:26px;
  font-family:var(--serif);font-size:24px;line-height:1.35;letter-spacing:-.02em;color:var(--encre)}
.corps .note{font-size:15px;line-height:1.6;color:var(--g150);border-top:var(--trait) solid var(--filet);padding-top:22px}
.corps figure{margin:2.6em 0}
.corps figure img{width:100%;border-radius:var(--r);border:var(--trait) solid var(--filet)}
.corps figcaption{font-size:14px;line-height:1.5;color:var(--g150);margin-top:12px}
.corps .exergue{font-family:var(--serif);font-size:clamp(24px,2.6vw,30px);line-height:1.3;letter-spacing:-.03em;
  color:var(--encre);border-left:2px solid var(--pierre);padding-left:26px;margin:2.4em 0}
.sources{max-width:65ch;margin:var(--souffle) auto 0;border-top:var(--trait) solid var(--filet);padding-top:26px}
.sources h2{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--g150);
  font-family:var(--sans);margin-bottom:16px}
.sources li{font-size:14px;line-height:1.6;color:var(--g150);list-style:none;margin-bottom:8px}

/* Index des publications */
.index{border-top:var(--trait) solid var(--filet);margin-top:64px}
.index__item{display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,1fr);gap:clamp(24px,3.4vw,56px);
  align-items:center}
.index__media{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
.index__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.index__item:hover .index__media img{transform:scale(1.03)}
.index__meta{display:block;font-size:14px;color:var(--g150);margin-bottom:12px}
.index__item h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.7vw,34px);line-height:1.2;
  letter-spacing:-.04em;color:var(--encre);margin-bottom:14px}
.index__item p{font-size:16px;line-height:1.6;color:var(--g150);max-width:none}

/* Formulaire */
.form{display:grid;gap:22px;max-width:560px}
.champ{display:grid;gap:8px}
.champ label{font-size:14px;font-weight:500;color:var(--encre)}
.champ input,.champ textarea{font:inherit;font-size:16px;color:var(--encre);background:var(--blanc);
  border:var(--trait) solid var(--filet);border-radius:10px;padding:14px 16px;min-height:48px;width:100%}
.champ textarea{min-height:150px;resize:vertical;line-height:1.55}
.champ input:focus-visible,.champ textarea:focus-visible{outline:2px solid var(--encre);outline-offset:1px}
.champ .aide{font-size:13px;color:var(--g150)}
.form .pastille{justify-self:start;margin-top:8px;border:0}
.pot{position:absolute;left:-9999px}
.msg{border-radius:12px;padding:18px 20px;font-size:16px;line-height:1.55;margin-bottom:34px;max-width:560px}
.msg--ok{background:rgba(150,96,79,.08);color:var(--encre);border:var(--trait) solid rgba(150,96,79,.32)}
.msg--ko{background:rgba(125,47,31,.07);color:var(--erreur);border:var(--trait) solid rgba(125,47,31,.30)}
.coords{display:grid;gap:10px;font-size:16px;line-height:1.6;color:var(--g200)}
.coords a{color:var(--encre);text-decoration:underline;text-underline-offset:3px;
  display:inline-flex;align-items:center;min-height:44px}

/* Contenu légal */
.legal{max-width:70ch}
.legal h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.6vw,30px);line-height:1.2;
  letter-spacing:-.04em;color:var(--encre);margin-top:2.4em;margin-bottom:.7em}
.legal p,.legal li{font-size:16px;line-height:1.68;color:var(--g200)}
.legal p+p{margin-top:1em}
.legal ul{padding-left:1.1em;display:grid;gap:.5em;margin-top:1em}

@media (max-width:900px){
  .option{grid-template-columns:1fr;gap:34px}
  .option:nth-child(even) .option__media{order:-1}
  .index__item{grid-template-columns:1fr;gap:22px}
  .index__media{order:-1}
  .corps p,.corps li{font-size:17px}
}

/* =========================================================================
   LE BLOC ENCADRÉ — le composant que la référence emploie partout :
   fond blanc, rayon 16, filet fin, ombre douce. Le texte et son bouton
   vivent dedans, à côté de l'image. C'est ce qui donne son rythme à la page.
   ========================================================================= */
.bloc-encadre{background:var(--blanc);border:var(--trait) solid var(--filet);border-radius:var(--r);
  padding:clamp(30px,3.4vw,52px);box-shadow:var(--ombre)}
.bloc-encadre>*+*{margin-top:22px}
.bloc-encadre .titre-section{max-width:16ch}
a.bloc-encadre{display:block;transition:box-shadow .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1)}
a.bloc-encadre:hover{box-shadow:var(--ombre-forte);transform:translateY(-2px)}
.bande .bloc-encadre{background:#1f1b16;border-color:var(--filet-clair);box-shadow:none}

/* Les grilles reprennent le bloc encadré plutôt que de simples filets */
.blocs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
  gap:clamp(18px,1.6vw,24px);margin-top:56px}
.bloc{background:var(--blanc);border:var(--trait) solid var(--filet);border-radius:var(--r);
  box-shadow:var(--ombre);padding:clamp(28px,2.8vw,38px);border-bottom:var(--trait) solid var(--filet)}
.bande .bloc{background:#1f1b16;border-color:var(--filet-clair);box-shadow:none}
.bande .blocs{border-top:0}
.bloc h3{color:var(--encre)}
.bande .bloc h3{color:var(--nuit-titre)}
.bande .bloc p{color:var(--nuit-texte)}

.etape{background:var(--blanc);border:var(--trait) solid var(--filet);border-radius:var(--r);
  box-shadow:var(--ombre);padding:clamp(26px,2.6vw,34px);border-top:var(--trait) solid var(--filet)}
.etapes{gap:clamp(20px,2.2vw,28px)}

.carte{background:var(--blanc);border:var(--trait) solid var(--filet);border-radius:var(--r);
  box-shadow:var(--ombre);padding:22px 22px 30px;overflow:hidden}
.bande .carte{background:#1f1b16;border-color:var(--filet-clair);box-shadow:none}
.carte__img{border-radius:calc(var(--r) - 6px);margin-bottom:24px}
.carte h3{color:var(--encre)}
.bande .carte h3{color:var(--nuit-titre)}
.bande .carte p{color:var(--nuit-texte)}

.article{background:var(--blanc);border:var(--trait) solid var(--filet);border-radius:var(--r);
  box-shadow:var(--ombre);padding:24px;display:flex;flex-direction:column;
  transition:box-shadow .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1)}
.article:hover{box-shadow:var(--ombre-forte);transform:translateY(-2px)}
.article__img{border-radius:calc(var(--r) - 6px);margin-top:auto}
.article h3{color:var(--encre)}

.index__item{background:var(--blanc);border:var(--trait) solid var(--filet);border-radius:var(--r);
  box-shadow:var(--ombre);padding:clamp(18px,1.8vw,24px);border-bottom:var(--trait) solid var(--filet)}
.index{border-top:0;display:grid;gap:clamp(18px,1.8vw,24px)}
.index__media{border-radius:calc(var(--r) - 6px)}

.form{background:var(--blanc);border:var(--trait) solid var(--filet);border-radius:var(--r);
  box-shadow:var(--ombre);padding:clamp(28px,3vw,42px);max-width:600px}

/* Largeurs de lecture — le vérificateur relevait des lignes au-delà de 80 caractères */
.article p,.carte p,.index__item p{max-width:52ch}
.legal{max-width:62ch}
.corps .note{max-width:62ch}

/* =========================================================================
   Classes utilitaires — elles remplacent les attributs style= en ligne,
   que la politique de sécurité du contenu (CSP) bloque en production.
   ========================================================================= */
.mt-s{margin-top:16px}.mt-m{margin-top:26px}.mt-l{margin-top:38px}
.mt-xl{margin-top:64px}.mt-xxl{margin-top:88px}
.pt-0{padding-top:0}
.etroit{max-width:60ch}.etroit-56{max-width:56ch}.etroit-64{max-width:64ch}.etroit-70{max-width:70ch}
.titre-court{max-width:22ch}
.accroche--large{max-width:none}
.rangee{display:flex;gap:14px;flex-wrap:wrap}
.err{color:var(--erreur)}
.section--legale{padding-top:clamp(40px,6vh,72px)}

.pb-souffle{padding-bottom:var(--souffle)}
.lien-simple{display:inline-flex;align-items:center;min-height:48px;padding:12px 4px;
  font-size:16px;font-weight:500;color:var(--g200);text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;text-decoration-color:var(--filet);transition:color .18s,text-decoration-color .18s}
.lien-simple:hover{color:var(--encre);text-decoration-color:var(--encre)}

/* ---------- Bandeau de connecteurs ---------- */
.connecteurs{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(26px,3.4vw,52px);
  margin-top:52px;padding-top:34px;border-top:var(--trait) solid var(--filet)}
.connecteurs__item{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:500;color:var(--g150)}
.connecteurs__item img{width:26px;height:26px;object-fit:contain;filter:grayscale(1);opacity:.66}
.connecteurs__note{flex-basis:100%;font-size:13px;color:var(--g150);margin-top:6px}

/* ---------- L'aveu : un bloc, une fois par page, jamais deux ---------- */

/* ---------- Étiquette de bloc ---------- */
.bloc__etiq{display:block;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pierre);margin-bottom:16px}
/* Sur les cartes du bandeau sombre, les surtitres et numéros reprennent le gris clair */
.bande .etape__n,.bande .bloc__etiq,.bande .legende{color:var(--nuit-gris)}
/* Grille à deux colonnes : pour les séries de 4 blocs, 2×2 vaut mieux que 3+1 */
.blocs--paire{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Séries de 3 ou 6 blocs : exactement trois par rangée. auto-fit produisait 4+2. */
.blocs--trois{grid-template-columns:repeat(3,minmax(0,1fr))}
.bande .blocs--trois{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1080px){.blocs--trois{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.blocs--trois{grid-template-columns:1fr}}
@media (max-width:820px){.blocs--paire{grid-template-columns:1fr}}
/* Bandeau image pleine largeur du conteneur */
/* ---------- Écrans de démonstration ---------- */
.ecran{margin:0}
.ecran__cadre{border-radius:var(--r);overflow:hidden;border:var(--trait) solid var(--filet);
  background:var(--blanc);box-shadow:var(--ombre-forte)}
.ecran__cadre img{width:100%;height:auto;display:block}
/* En-tête d'écran : numéro, titre à gauche, description à droite — même grammaire
   que les en-têtes de section, pour que la page ne parte pas dans une autre direction. */
.ecran__tete{display:grid;grid-template-columns:minmax(0,.46fr) minmax(0,.54fr);
  gap:clamp(24px,5vw,88px);align-items:end;margin-bottom:26px;
  padding-bottom:22px;border-bottom:var(--trait) solid var(--filet)}
.ecran__n{grid-column:1;font-size:11px;font-weight:500;letter-spacing:.16em;color:var(--g150)}
.ecran__tete h3{grid-column:1;grid-row:2;font-family:var(--serif);font-weight:400;
  font-size:clamp(26px,3vw,38px);line-height:1.18;letter-spacing:-.04em;color:var(--encre);max-width:16ch}
.ecran__tete p{grid-column:2;grid-row:2;font-size:17px;line-height:1.6;color:var(--g200);max-width:56ch;margin:0}
@media (max-width:900px){.duo--texte-avant .duo__media{order:2}
.ecran__tete{display:block}.ecran__tete p{margin-top:14px}.ecran__tete h3{margin-top:8px}}
/* ---------- Liste de références réglementaires ---------- */
.reg{border-top:var(--trait) solid var(--filet)}
.reg__ligne{display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,.7fr);gap:clamp(16px,3vw,48px);
  padding:26px 0;border-bottom:var(--trait) solid var(--filet)}
.reg dt{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.25;letter-spacing:-.03em;color:var(--encre)}
.reg dd{font-size:16px;line-height:1.62;color:var(--g200);max-width:70ch;margin:0}
@media (max-width:820px){.reg__ligne{grid-template-columns:1fr;gap:8px}}
/* Index des publications : le texte occupe la colonne, plus de vide à droite */
.index__item{grid-template-columns:minmax(0,.42fr) minmax(0,.58fr)}
.index__item p{max-width:none}
/* Blocs qui occupent la largeur de contenu au lieu de flotter au centre */
.bloc-encadre--large{max-width:none}
.colonnes-deux{columns:2;column-gap:clamp(32px,4vw,72px)}
.colonnes-deux p{max-width:none;break-inside:avoid}
.colonnes-deux p+p{margin-top:1.1em}
@media (max-width:820px){.colonnes-deux{columns:1}}

/* =========================================================================
   MOBILE — règles finales, placées en fin de feuille pour primer sur tout
   ce qui précède. Défaut relevé au lot 7 : les cartes de la page recherche
   restaient sur deux colonnes, l'image réduite à une vignette illisible.
   ========================================================================= */
@media (max-width:900px){
  .index{gap:20px}
  .index__item{display:block!important;padding:0!important;overflow:hidden}
  .index__media{aspect-ratio:16/10;border-radius:0;margin:0}
  .index__item>div:last-child{padding:22px clamp(18px,4vw,26px) 26px}
  .index__item h2{font-size:clamp(22px,5.6vw,28px)}
  .index__item p{font-size:15.5px}

  .article{padding:0;overflow:hidden}
  .article__img{aspect-ratio:16/10;border-radius:0;margin-top:0;order:-1}
  .article__date{padding:22px clamp(18px,4vw,24px) 0}
  .article h3,.article p{padding-inline:clamp(18px,4vw,24px)}
  .article p{padding-bottom:26px}

  .duo{gap:28px}
  .cadre--3-4{aspect-ratio:4/5}
  .ecran__cadre img{width:100%;height:auto}  /* l'image produit s'affiche entière */
}
/* =========================================================================
   Schéma d'article : deux dessins, un par format. Le dessin desktop se lit de
   gauche à droite ; le dessin mobile est un autre dessin, pas une réduction.
   ========================================================================= */
.corps .schema{margin:3.2em calc(50% - min(700px, 46.5vw))}
@media (max-width:1520px){.corps .schema{margin-inline:calc(50% - 50vw + var(--gout))}}
@media (max-width:1000px){.corps .schema{margin-inline:0}}
.corps .schema svg{width:100%;height:auto;display:block}
.corps .schema .schema--petit{display:none}
@media (max-width:700px){.corps .schema .schema--large{display:none}.corps .schema .schema--petit{display:block;max-width:440px;margin-inline:auto}}
/* Meridiane : le premier écran en pleine largeur, les deux suivants côte à côte */

/* ---------- Fonds : casser le tout-blanc (révision images/fonds) ---------- */
/* Trame de points discrète sous les titres de page — écho direct de l'interface Meridiane */
.section--haut{background-image:radial-gradient(rgba(43,41,38,.055) 1px,transparent 1.4px);
  background-size:26px 26px;background-position:center top}
/* Hero de l'accueil : l'image du métier EN FOND, desktop comme mobile.
   Le voile est un panneau local : opaque à ~90 % SOUS la colonne du texte
   (contraste mesuré 3:1 / 4,5:1 tenu), fondu rapide, puis l'image est nue —
   la poutre et la fenêtre restent pleinement visibles. */
.hero-fond{position:relative;overflow:hidden;padding-bottom:clamp(120px,16vh,200px)}
.hero-fond::before{content:"";position:absolute;inset:0;z-index:0;
  background:#e8e6e2 url(../img/illus/illus-12@2x.jpg) no-repeat -14% 28%/cover}
.hero-fond::after{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,rgba(250,249,247,.88) 0%,rgba(250,249,247,.85) 46%,
    rgba(250,249,247,0) 61%);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 48%,transparent 62%);
  mask-image:linear-gradient(90deg,#000 0%,#000 48%,transparent 62%)}
.hero-fond .wrap{position:relative;z-index:1}
@media (max-width:900px){
  .hero-fond::before{background-position:26% center;background-size:cover}
  .hero-fond{padding-bottom:clamp(240px,60vw,420px)}
  .hero-fond::after{background:linear-gradient(180deg,rgba(250,249,247,.93) 0%,rgba(250,249,247,.89) 58%,
    rgba(250,249,247,0) 70%);
    -webkit-backdrop-filter:none;backdrop-filter:none;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 76%);
    mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 76%)}
}
/* Bande-regard : image pleine largeur qui amorce le bandeau sombre */
.bande-regard{background:var(--nuit);line-height:0;position:relative}
.bande-regard img{width:100%;height:auto;display:block}
.bande-regard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(180deg,rgba(22,19,15,0) 0%,rgba(22,19,15,.6) 52%,var(--nuit) 90%)}
@media (max-width:700px){.bande-regard img{min-height:150px;object-fit:cover}}

/* ---------- Schéma hors article (page technologie) ---------- */
.schema svg{width:100%;height:auto;display:block}
.schema .schema--petit{display:none}
@media (max-width:700px){.schema .schema--large{display:none}
  .schema .schema--petit{display:block;max-width:440px;margin-inline:auto}}
.schema-bloc{margin-top:clamp(44px,5vw,72px)}

/* =========================================================================
   Nappes dégradées — fonds de section animés (portage shadergradient, nappe.js).
   Le canvas est DERRIÈRE le contenu ; le repli statique derrière le canvas.
   Décision du 24/08, cf. DA « Dérogations ». DEUX variantes seulement, pour la
   cohérence : la nappe claire (sections) et la terre cuite (panneau d'appel,
   son territoire d'accent). Pas de troisième.
   ========================================================================= */
.nappe{position:relative;isolation:isolate}
.nappe>canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block}
.nappe__repli{position:absolute;inset:0;z-index:-3;
  background:linear-gradient(120deg,#f7f2ea 0%,#e6d9c7 52%,#d6c4ac 100%)}
.nappe__repli--terre{background:linear-gradient(135deg,#8a5240 0%,#a2664f 55%,#7d4b3c 100%)}
/* Le texte posé sur nappe passe à l'encre : 4,5:1 tenu sur la teinte la plus profonde
   des nappes claires, relief du shader compris (pire cas mesuré : encre sur #a79578). */
.nappe .texte,.nappe .aveu-nu p{color:var(--encre)}
/* L'aveu, posé nu sur la nappe : la grille de la carte, sans la carte. */
.aveu-nu{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  gap:clamp(24px,5vw,80px);align-items:start}
.aveu-nu h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,36px);line-height:1.2;
  letter-spacing:-.04em;color:var(--encre);max-width:18ch}
.aveu-nu p{font-size:17px;line-height:1.68;max-width:80ch}
@media (max-width:900px){.aveu-nu{display:block}.aveu-nu h2{margin-bottom:20px}}
/* Section technique posée sur nappe, sans encadré */
.technique-nu{max-width:880px}
.technique-nu .texte{max-width:70ch}