:root{--fond:#0c0c0b;--fond2:#141311;--fond3:#26251f;--encre:#f2efe6;--primaire:#0c0c0b;--primaire_sombre:#000000;--accent:#aa984d;--accent_sombre:#cbbc7d;--gris:#b9b4a6;--gris_clair:#8f8a7c;--clair:#f2efe6;--nuit:#0c0c0b;--nuit-2:#141311;--nuit-3:#1b1a17;--craie:#f2efe6;--craie-2:#b9b4a6;--craie-3:#8f8a7c;--or:#aa984d;--or-clair:#cbbc7d;--or-sourd:#5d5329;--braise:#c98a4e;--froid:#1b2320;--filet:#26251f;--filet-fort:#39362d;--ok:#3fbfa2;--veille:#ffca6b;--perime:#cf5f6d;--or_clair:#cbbc7d;--or_encre:#cbbc7d;--or_ombre:#8c7c3b;--or_voile:#1b1a17;--noir:#0c0c0b;--blanc:#f2efe6;--statut_ok:#3fbfa2;--statut_veille:#ffca6b;--statut_perime:#cf5f6d;--serie_1:#bbccdd;--serie_2:#c7bab2;--serie_3:#9f857a;--serie_4:#7a949f;--titre:"Bodoni Moda", Didot,'Bodoni MT','Times New Roman',serif;--texte:"Familjen Grotesk", 'Helvetica Neue',Arial,system-ui,sans-serif;--mono:"IBM Plex Mono", ui-monospace,SFMono-Regular,Menlo,monospace;--serif:var(--titre);--grot:var(--texte);--rayon:0px;--largeur:none;--mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 177'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M0 0H168V177H0Z M-0.0 145.8C-0.0 121.5 0.3 114.9 1.2 115.8C2.8 117.4 16.4 117.4 17.8 115.8C18.3 115.1 19.0 109.3 19.2 103.0C19.5 93.3 20.0 90.8 21.9 87.3C24.3 83.2 27.4 81.0 31.2 81.0C33.0 81.0 32.9 81.3 30.1 84.5C28.4 86.5 26.7 89.3 26.3 90.8C25.8 92.3 25.5 100.6 25.5 109.3L25.5 125.1L23.1 124.5C21.6 124.1 20.1 124.5 18.9 125.6C17.1 127.2 17.0 129.0 17.0 149.7C17.0 163.3 17.4 172.9 18.0 174.1C19.3 176.4 23.3 176.6 25.4 174.4C26.7 173.1 27.0 170.0 27.0 155.6L27.0 138.4L32.2 137.1C38.1 135.5 44.5 129.8 48.0 123.1C49.1 120.8 50.3 119.0 50.6 119.0C50.9 119.0 52.7 120.2 54.5 121.6C62.4 127.6 66.5 128.4 91.2 128.8L114.0 129.2L114.0 151.0C114.0 169.5 114.2 173.1 115.6 174.4C117.7 176.6 121.7 176.4 123.0 174.1C123.6 172.9 124.0 163.5 124.0 150.6L124.0 129.0L133.2 129.0L142.5 129.0L134.6 136.9C128.0 143.5 126.9 145.1 127.2 147.6C127.4 150.0 128.0 150.6 130.4 150.8C133.0 151.1 134.8 149.7 145.7 138.8C152.4 132.1 158.0 125.8 158.0 124.9C158.0 121.2 154.7 120.0 145.2 120.0L136.0 120.0L136.0 81.0L136.0 42.0L139.2 44.0C141.6 45.4 144.3 46.0 148.6 46.0C153.2 46.0 154.9 46.4 155.4 47.5C157.0 51.7 165.2 51.1 167.0 46.8C167.5 45.4 167.9 69.9 167.9 110.8L168.0 177.0L84.0 177.0L0.0 177.0L-0.0 145.8ZM43.8 174.8C44.6 174.0 45.0 168.5 45.0 156.5L45.0 139.4L49.9 138.1C55.0 136.8 64.0 131.7 64.0 130.1C64.0 129.6 63.0 129.0 61.7 128.6C60.4 128.3 57.7 126.9 55.6 125.5C53.6 124.1 51.8 123.0 51.6 123.0C51.4 123.0 49.9 125.2 48.2 127.9C46.5 130.7 42.9 134.5 40.1 136.5L35.0 140.2L35.0 155.9C35.0 168.4 35.3 172.0 36.6 173.8C38.3 176.2 41.9 176.7 43.8 174.8ZM0.1 50.8L0.0 0.0L78.7 0.0C155.9 0.0 157.3 0.0 155.6 1.9C154.4 3.2 154.2 4.0 155.0 4.5C156.3 5.3 159.0 3.3 159.0 1.4C159.0 0.4 160.3 0.0 163.5 0.0L168.0 0.0L167.9 21.8C167.8 33.7 167.6 42.7 167.3 41.8C167.1 40.8 161.7 36.4 155.4 32.0C149.1 27.5 144.0 23.6 144.0 23.3C144.0 23.0 144.9 21.6 146.1 20.2L148.2 17.5L145.0 16.2C142.2 15.1 141.5 15.1 140.1 16.4C137.6 18.7 137.4 18.5 136.1 13.5C135.5 11.0 134.5 9.0 133.9 9.0C132.6 9.0 129.7 15.9 130.4 17.6C130.7 18.5 128.7 20.0 124.3 22.1C110.1 28.9 97.9 46.4 94.3 65.2C93.4 69.7 92.6 74.1 92.4 74.8C92.1 75.7 83.9 76.0 55.5 76.0C24.7 76.0 18.3 76.2 15.2 77.6C7.9 80.6 2.5 87.9 1.0 96.9C0.6 99.4 0.2 78.7 0.1 50.8ZM150.4 14.1C151.4 13.0 151.9 11.6 151.5 11.1C150.5 9.3 146.4 9.9 144.5 12.0C142.8 13.9 142.8 14.0 145.1 14.9C148.4 16.2 148.5 16.2 150.4 14.1ZM154.1 5.6C152.1 4.7 149.0 6.2 149.0 8.0C149.0 9.6 152.5 9.6 154.3 8.1C156.1 6.6 156.1 6.5 154.1 5.6Z'/%3E%3C/svg%3E")}@font-face{font-family:'Bodoni Moda';src:url('/assets/fonts/bodoni-moda-latin-standard-normal.woff2') format('woff2');font-weight:400 900;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+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:'Bodoni Moda';src:url('/assets/fonts/bodoni-moda-latin-standard-italic.woff2') format('woff2');font-weight:400 900;font-style:italic;font-display:swap;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:'Familjen Grotesk';src:url('/assets/fonts/familjen-grotesk-latin-wght-normal.woff2') format('woff2');font-weight:400 700;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+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:'Familjen Grotesk';src:url('/assets/fonts/familjen-grotesk-latin-wght-italic.woff2') format('woff2');font-weight:400 700;font-style:italic;font-display:swap;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:'IBM Plex Mono';src:url('/assets/fonts/ibm-plex-mono-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+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:'IBM Plex Mono';src:url('/assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');font-weight:500;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+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ============================================================
   SOCLE — direction artistique v3/v4 (proto/accueil-et-guide.html)
   Une grille de page unique de 24 colonnes, subgrid jusque dans la
   ligne de bareme. Aucune carte : zero box-shadow, zero border-radius,
   zero fond de bloc. Le seul separateur est un filet de 1 px.
   Le site est entierement sombre : c'est la condition sous laquelle
   l'or de marque tient (2,87:1 sur blanc, 6,81:1 sur --nuit).
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
/* [hidden] doit l'emporter sur tout display de mise en page : une ligne de
   registre en display:grid reste affichee malgre son attribut hidden, et le
   pas de chargement ne sert alors a rien. Piege deja paye. */
[hidden]{display:none!important}
:root{
  --gout:20px;
  --marge:clamp(16px,3.2vw,52px);
  --voile:64px;             /* depassement du masque : evite le lisere d'antialiasing */
  --lent:cubic-bezier(.16,1,.3,1);
  --tres-lent:cubic-bezier(.19,1,.22,1);
  --t1:900ms; --t2:1400ms; --t3:2000ms;
}
html{background:var(--nuit)}
body{
  margin:0;background:var(--nuit);color:var(--craie);
  font-family:var(--grot);font-size:17px;line-height:1.62;
  font-variant-numeric:lining-nums;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* Aucun clip d'ancetre : sous un interlignage inferieur a 1, un overflow:clip
     mange les diacritiques capitales (I, E, A) des titres. Le debordement
     horizontal est empeche par construction, pas masque. */
}
img{max-width:100%;height:auto;display:block}

/* ---------- la grille de page. .wrap EST la grille : 24 colonnes ---------- */
.wrap{
  padding-inline:var(--marge);
  display:grid;grid-template-columns:repeat(24,minmax(0,1fr));
  column-gap:var(--gout);
}
.wrap>*{grid-column:1/-1;min-width:0}
.bloc,.lig{grid-column:1/-1;display:grid;grid-template-columns:subgrid;min-width:0}
.lig{align-items:baseline}
.gc{grid-column:var(--gc)}
.c-pleine{grid-column:1/25}.c-texte{grid-column:2/15}.c-marge{grid-column:17/25}
.c-large{grid-column:2/24}.c-demi-g{grid-column:1/13}.c-demi-d{grid-column:13/25}
.bloc>*,.lig>*{min-width:0}

section{padding-block:clamp(46px,5.4vw,88px)}
section.serre{padding-block:clamp(30px,3.4vw,52px)}
/* une bande pleine largeur, jamais un bloc : c'est le seul aplat du site */
.alt{background:var(--nuit-2)}

/* ---------- typographie ---------- */
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:400}
p{margin:0;text-wrap:pretty}

/* Bodoni Moda : titrage seulement, jamais sous 24 px — les delies en cheveu
   disparaissent sur noir. opsz pilote a la main : c'est un style nomme du
   guide de marque, pas une animation. */
.display,.display--md,.display--sm{
  font-family:var(--serif);font-optical-sizing:none;
}
.display{font-variation-settings:'opsz' 96;font-weight:500;line-height:.89;
  letter-spacing:-.028em;font-size:clamp(42px,7.6vw,108px)}
/* 0,94 et pas 0,88 : en francais, sous 0,94, l'accent d'une capitale de la
   ligne 2 (I, E, A) percute la jambe descendante de la ligne 1. Mesure sur
   « Plafonds de ressources hors Ile-de-France ». Les h1 poses a la main
   descendent a 0,89 ; les h2 GENERES a partir de donnees restent a 0,94. */
.display--md{font-variation-settings:'opsz' 40;font-weight:500;line-height:.94;
  letter-spacing:-.022em;font-size:clamp(30px,4.1vw,54px)}
.display--sm{font-variation-settings:'opsz' 22;font-weight:600;line-height:.94;
  letter-spacing:-.012em;font-size:clamp(24px,2.4vw,34px)}
/* Un h1 GENERE (metier x ville, fiche d'entreprise) peut faire cinq mots longs :
   il n'a pas de coupe posee a la main, donc il reste a 0,94. */
.display--gen{line-height:.94;letter-spacing:-.022em;font-size:clamp(38px,5.6vw,76px)}
/* mot outil en grotesque au milieu d'une ligne de titre didone (Signal-A) */
.mot-gr{font-family:var(--grot);font-weight:600;font-size:.44em;letter-spacing:.12em;
  text-transform:uppercase;vertical-align:.34em;color:var(--craie-2)}
.ital,.display i,.display--gen i,.display--md i,.display--sm i{font-style:italic}

h3,.h3{font-family:var(--grot);font-weight:600;font-size:20px;line-height:1.18;letter-spacing:-.008em}
h4,.h4{font-family:var(--grot);font-weight:600;font-size:16px;line-height:1.25}

/* libelles : plus c'est petit, plus on espace */
.sur,.kicker{font-family:var(--grot);font-weight:600;font-size:11px;line-height:1.2;
  text-transform:uppercase;letter-spacing:.24em;color:var(--or-clair);display:block}
.sur--sourd{color:var(--craie-3)}
.mono,.num,time{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:'tnum' 1}
.num{font-size:13px;letter-spacing:.01em;color:var(--craie-2)}
.mini{font-size:12.5px;line-height:1.5;color:var(--craie-3)}
.sub{color:var(--craie-2);font-size:15.5px;line-height:1.55;max-width:74ch}

a{color:inherit;text-decoration:none}
.lien,.prose a,.src a{
  color:var(--or-clair);
  background-image:linear-gradient(var(--or-sourd),var(--or-sourd));
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  text-decoration:none;
  transition:background-size var(--t1) var(--lent),color 420ms var(--lent);
}
.lien:hover,.prose a:hover,.src a:hover{color:#e0d3a0;background-image:linear-gradient(var(--or),var(--or))}
:focus-visible{outline:2px solid var(--or-clair);outline-offset:3px;box-shadow:0 0 0 5px var(--nuit)}
.skip{position:absolute;left:-9999px;background:var(--nuit);color:var(--or-clair);
  border:1px solid var(--or);padding:12px 18px;z-index:99;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.skip:focus{left:8px;top:8px}
::selection{background:var(--or);color:var(--nuit)}

hr,.filet{border:0;height:1px;background:var(--filet);margin:0;grid-column:1/-1}
.filet--or{background:var(--or-sourd)}
.filet--fort{background:var(--filet-fort)}

/* ---------- chassis : la marge est le cadre d'un tableau (ERA Residence) ---------- */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--marge);display:none;
  pointer-events:none;z-index:4}
.rail__num{position:absolute;top:96px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--craie-3)}
.rail__mot{position:absolute;bottom:26px;left:50%;transform:translateX(-50%) rotate(180deg);
  writing-mode:vertical-rl;font-family:var(--grot);font-size:10px;font-weight:600;
  letter-spacing:.42em;text-transform:uppercase;color:var(--craie-3)}
.rail__trait{position:absolute;top:130px;bottom:96px;left:50%;width:1px;background:var(--filet)}
@media (min-width:1180px){.rail{display:block}}

/* ---------- en-tete ---------- */
.bandeau{background:#000;border-bottom:1px solid var(--filet);font-family:var(--mono);
  font-size:11px;letter-spacing:.06em;color:var(--craie-3)}
.bandeau .wrap{padding-block:9px}
.bandeau__g{grid-column:1/16}.bandeau__d{grid-column:16/25;text-align:right}
header.tete{position:sticky;top:0;z-index:20;background:var(--nuit);
  border-bottom:1px solid var(--filet)}
.tete .wrap{align-items:center}
.tete__in{grid-column:1/25;display:flex;align-items:center;gap:22px;
  padding:14px 0 13px;min-height:64px;flex-wrap:wrap}
.marque{display:flex;align-items:center;gap:13px;flex:0 0 auto}
.licorne{width:30px;height:32px;background:var(--or);flex:0 0 auto;
  -webkit-mask:var(--mark) center/contain no-repeat;mask:var(--mark) center/contain no-repeat;
  transition:background 600ms var(--lent)}
.marque:hover .licorne{background:var(--or-clair)}
.marque__nom{font-family:var(--grot);font-weight:600;font-size:12.5px;
  letter-spacing:.26em;text-transform:uppercase;line-height:1.15;display:block}
.marque__sous{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  color:var(--craie-3);text-transform:uppercase;display:block;margin-top:3px}
nav.nav{margin-left:auto;display:flex;gap:26px;flex-wrap:wrap;align-items:center}
nav.nav a{font-family:var(--grot);font-size:12px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--craie-2);padding-block:6px;position:relative;
  transition:color 500ms var(--lent)}
nav.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--or);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t1) var(--lent)}
nav.nav a:hover{color:var(--craie)}
nav.nav a:hover::after{transform:scaleX(1)}
.cta{border:1px solid var(--or);color:var(--or-clair)!important;padding:10px 18px;
  font-family:var(--grot);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;transition:background 500ms var(--lent),color 500ms var(--lent)}
.cta:hover{background:var(--or);color:var(--nuit)!important}
.cta::after{display:none}
@media (max-width:900px){nav.nav{gap:14px;margin-left:0;width:100%}nav.nav a{font-size:11px}}

/* ---------- fil d'Ariane ---------- */
.fil{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--craie-3)}
.fil>*{grid-column:1/25;padding-block:16px 0}
.fil a:hover{color:var(--or-clair)}

/* ---------- entete de section ---------- */
.entete-sec{grid-column:1/-1;display:grid;grid-template-columns:subgrid;
  align-items:end;padding-bottom:28px}
.entete-sec__t{grid-column:1/16}
.entete-sec__n{grid-column:19/25;text-align:right}

/* ---------- ouverture de page ----------
   Les lignes sont declarees, pas subies : le titre et la planche occupent la
   meme ligne, la mesure de texte et le formulaire la suivante. Sans cela le
   formulaire descend sous la planche et ouvre un trou de 400 px a gauche. */
.hero{padding-block:clamp(40px,4.6vw,72px) clamp(46px,5.4vw,84px)}
.hero .wrap{align-items:start}
.hero .sur{grid-row:1}
.hero__t{grid-column:1/17;grid-row:2;margin-top:26px}
.hero .planche{grid-column:17/25;grid-row:2/span 3;margin-top:0}
.hero__c{grid-column:2/15;grid-row:3;margin-top:38px}
.hero__m{grid-column:2/12;grid-row:4;margin-top:22px}
.hero .form{grid-column:16/25;grid-row:3/span 2;margin-top:38px}
/* sans planche, le formulaire remonte au niveau du titre */
.hero .wrap:not(:has(.planche)) .form{grid-row:2/span 3;margin-top:26px}
.hero .wrap:not(:has(.planche)) .hero__t{grid-column:1/16}

/* ---------- revelation par masque (clip-path), jamais par opacite ----------
   Le masque n'existe que si le module a demarre : sans JS, ou si le module
   tombe, rien n'est cache. Le voile depasse de --voile sur les quatre cotes,
   ce qui evite le lisere d'antialiasing ET empeche le clip de manger un
   diacritique capitale ou un debord de planche. Une fois la levee terminee,
   le clip est retire : aucun ancetre de titre ne reste clippe. */
.js .rev{
  clip-path:inset(calc(var(--voile) * -1) calc(var(--voile) * -1)
                  calc(100% + var(--voile)) calc(var(--voile) * -1));
  transition:clip-path var(--t2) var(--tres-lent);
}
.js .vu .rev,.js .rev.vu{
  clip-path:inset(calc(var(--voile) * -1) calc(var(--voile) * -1)
                  calc(var(--voile) * -1) calc(var(--voile) * -1));
}
.js .fini .rev{clip-path:none;transition:none}
.rev--d1{transition-delay:110ms}.rev--d2{transition-delay:230ms}
.rev--d3{transition-delay:350ms}.rev--d4{transition-delay:470ms}
.js .vis.rev{transition-duration:var(--t3)}

/* balayage dore des titres, pilote au defilement */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .balaye{
    --sw:-30%;
    background-image:linear-gradient(96deg,var(--craie) 0%,var(--craie) calc(var(--sw) - 15%),
      #e6d8a8 calc(var(--sw) - 5%),var(--or-clair) var(--sw),#e6d8a8 calc(var(--sw) + 5%),
      var(--craie) calc(var(--sw) + 15%),var(--craie) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    -webkit-text-fill-color:transparent;
  }
  .balaye .mot-gr{-webkit-text-fill-color:var(--craie-2);color:var(--craie-2)}
}

/* ---------- index : intitule a gauche, numero en mono a droite (Linear) ----------
   C'est ce qui remplace les cartes de navigation : une ligne, un filet,
   un filet d'or qui se trace au survol. */
.index{grid-column:1/-1;display:grid;grid-template-columns:subgrid;
  border-top:1px solid var(--filet)}
.index__l{grid-column:1/-1;display:grid;grid-template-columns:subgrid;
  border-bottom:1px solid var(--filet);padding:18px 0 16px;position:relative;
  align-items:baseline}
.index__l::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;
  background:var(--or);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t2) var(--tres-lent)}
.index__l:hover::before,.index__l:focus-within::before{transform:scaleX(1)}
.index__n{grid-column:1/3;color:var(--craie-3);font-family:var(--mono);font-size:12px}
.index__t{grid-column:3/16;font-size:17px;font-weight:600;line-height:1.25;letter-spacing:-.006em}
/* Un index court porte ses intitules en didone a 0,94 (c'est l'echelle
   .display--sm de la charte). Un registre de 157 lignes ne le peut pas : a
   34 px par ligne il cesserait d'etre un index. Divergence assumee, et c'est
   le nombre d'entrees qui la decide, pas le gabarit. */
.index--fort .index__l{padding:24px 0 21px}
.index--fort .index__t{font-family:var(--serif);font-optical-sizing:none;
  font-variation-settings:'opsz' 22;font-weight:600;font-size:clamp(24px,2.4vw,34px);
  line-height:.94;letter-spacing:-.012em}
.index__v{grid-column:19/25;text-align:right;color:var(--or-clair);font-family:var(--mono);
  font-size:12.5px;letter-spacing:.04em}
.index__l:hover .index__t{color:#fff}

/* ---------- registre : une fiche d'entreprise est une LIGNE, pas une carte ---------- */
.reg{grid-column:1/-1;display:grid;grid-template-columns:subgrid;
  border-top:1px solid var(--filet-fort)}
.reg__e{grid-column:1/-1;display:grid;grid-template-columns:subgrid;
  border-bottom:1px solid var(--filet);padding:15px 0 13px;align-items:baseline}
.reg__n{grid-column:1/3;color:var(--craie-3);font-family:var(--mono);font-size:12px}
.reg__nom{grid-column:3/12;font-weight:600;font-size:16px;line-height:1.25;letter-spacing:-.004em}
.reg__met{grid-column:12/16;color:var(--craie-2);font-size:13.5px;line-height:1.35}
.reg__vil{grid-column:16/19;font-size:12.5px;color:var(--craie-2)}
.reg__dis{grid-column:19/21;text-align:right;font-size:12.5px;font-family:var(--mono);color:var(--craie-2)}
.reg__plus{grid-column:21/25;text-align:right}
.reg__det{grid-column:3/25;overflow:hidden;transition:height var(--t1) var(--lent)}
.reg__det-in{padding:14px 0 6px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px 22px;border-top:1px solid var(--filet);margin:0}
.reg__det dt{font-family:var(--grot);font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--craie-3);margin-bottom:3px}
.reg__det dd{margin:0;font-family:var(--mono);font-size:13px;color:var(--craie);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.reg__det dd.txt{font-family:var(--grot);font-size:13.5px}
.plus{appearance:none;background:none;border:0;cursor:pointer;padding:2px 0 2px 10px;
  white-space:nowrap;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--craie-3);transition:color 420ms var(--lent)}
.plus:hover,.plus[aria-expanded="true"]{color:var(--or-clair)}

/* stepper numerique plutot qu'un defilement infini (Harvard) */
.pas-plus{appearance:none;background:none;cursor:pointer;border:1px solid var(--filet-fort);
  color:var(--craie-2);font-family:var(--grot);font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;padding:11px 20px;
  transition:border-color var(--t1) var(--lent),color 500ms var(--lent)}
.pas-plus:hover{border-color:var(--or);color:var(--or-clair)}

/* ---------- barème : un tableau POSE SUR LA GRILLE DE LA PAGE ----------
   Mecanisme Tillberg : chaque tr est un subgrid des 24 colonnes de la page,
   donc les cellules s'alignent sur les memes colonnes que les titres et les
   paragraphes. C'est ce qui empeche un tableau d'avoir l'air rapporte.
   Les roles ARIA sont explicites : passe en display:grid, un tableau perd
   son role natif dans les navigateurs. */
.tab{grid-column:1/25;display:grid;grid-template-columns:subgrid;margin:0;
  border-collapse:collapse;max-width:none}
.tab>*{grid-column:1/-1;display:grid;grid-template-columns:subgrid}
.tab tr{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:baseline}
.tab thead tr{border-bottom:1px solid var(--filet-fort);padding-bottom:9px}
.tab tbody tr{border-bottom:1px solid var(--filet);padding:14px 0 12px}
.tab tbody tr:last-child{border-bottom:1px solid var(--filet-fort)}
.tab th,.tab td{padding:0;text-align:left;font-weight:400;min-width:0}
.tab th{font-family:var(--grot);font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--craie-3);line-height:1.3}
.tab caption{caption-side:top;text-align:left;grid-column:1/25;font-family:var(--grot);
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--craie-3);padding-bottom:10px}
/* la premiere colonne porte l'intitule ; les suivantes portent des valeurs */
.tab .lib{font-size:15.5px;line-height:1.32;color:var(--craie)}
.tab .v{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;
  font-size:15.5px;text-align:right;color:var(--craie);letter-spacing:-.01em;line-height:1.35}
.tab .v--fort{color:#fff;font-weight:500}
/* colonne de plafond : elle a droit a l'or parce que ce tableau ne porte
   AUCUNE pastille de fraicheur — sa fraicheur est declaree une fois, ailleurs,
   dans un bloc ou l'or n'entre pas (or/ambre = 0,9 dE sous tritanopie). */
.tab .v--plaf{color:var(--or-clair)}
.tab td.v[data-l],.tab th{text-align:right}
.tab td:first-child,.tab th:first-child{text-align:left}
/* --- plan de colonnes par nombre de colonnes du tableau. Genere une fois,
       valable pour les 135 guides : c'est l'intitule qui prend la place, les
       valeurs se partagent le reste et restent alignees a droite. --- */
.tab[data-cols="2"] tr>*:nth-child(1){grid-column:1/13}
.tab[data-cols="2"] tr>*:nth-child(2){grid-column:13/25}
.tab[data-cols="3"] tr>*:nth-child(1){grid-column:1/11}
.tab[data-cols="3"] tr>*:nth-child(2){grid-column:11/18}
.tab[data-cols="3"] tr>*:nth-child(3){grid-column:18/25}
.tab[data-cols="4"] tr>*:nth-child(1){grid-column:1/10}
.tab[data-cols="4"] tr>*:nth-child(2){grid-column:10/15}
.tab[data-cols="4"] tr>*:nth-child(3){grid-column:15/20}
.tab[data-cols="4"] tr>*:nth-child(4){grid-column:20/25}
.tab[data-cols="5"] tr>*:nth-child(1){grid-column:1/9}
.tab[data-cols="5"] tr>*:nth-child(2){grid-column:9/13}
.tab[data-cols="5"] tr>*:nth-child(3){grid-column:13/17}
.tab[data-cols="5"] tr>*:nth-child(4){grid-column:17/21}
.tab[data-cols="5"] tr>*:nth-child(5){grid-column:21/25}
.tab[data-cols="6"] tr>*:nth-child(1){grid-column:1/8}
.tab[data-cols="6"] tr>*:nth-child(2){grid-column:8/12}
.tab[data-cols="6"] tr>*:nth-child(3){grid-column:12/15}
.tab[data-cols="6"] tr>*:nth-child(4){grid-column:15/18}
.tab[data-cols="6"] tr>*:nth-child(5){grid-column:18/21}
.tab[data-cols="6"] tr>*:nth-child(6){grid-column:21/25}
.tab[data-cols="7"] tr>*:nth-child(1){grid-column:1/7}
.tab[data-cols="7"] tr>*:nth-child(2){grid-column:7/10}
.tab[data-cols="7"] tr>*:nth-child(3){grid-column:10/13}
.tab[data-cols="7"] tr>*:nth-child(4){grid-column:13/16}
.tab[data-cols="7"] tr>*:nth-child(5){grid-column:16/19}
.tab[data-cols="7"] tr>*:nth-child(6){grid-column:19/22}
.tab[data-cols="7"] tr>*:nth-child(7){grid-column:22/25}
/* au-dela de 7 colonnes, personne ne lit : repli en flux, une valeur par ligne */
.tab[data-cols="8"] tr,.tab[data-cols="9"] tr,.tab[data-cols="10"] tr{
  grid-template-columns:repeat(4,minmax(0,1fr))}
.tab[data-cols="8"] tr>*,.tab[data-cols="9"] tr>*,.tab[data-cols="10"] tr>*{grid-column:auto}

/* ---------- fraicheur : symbole + mot + date. AUCUN or dans ce bloc. ----------
   Le trio a ete cherche sous contrainte AA sur les deux fonds sombres :
   dE minimal 15,7 dans le pire cas. La couleur n'est que le troisieme canal :
   le symbole et le mot sont dans le texte de la page, donc dans le DOM, donc
   dans le jumeau Markdown, donc lisibles par un lecteur d'ecran. */
.fraich{grid-column:1/-1;display:grid;grid-template-columns:subgrid;row-gap:18px}
.fraich__e{grid-column:1/9}
.fraich__d{grid-column:10/25}
.etat{display:flex;gap:10px;align-items:baseline;font-family:var(--mono);font-size:13px;
  line-height:1.5;margin:0}
.etat+.etat{margin-top:4px}
.etat__s{font-size:11px}
.etat--ok{color:var(--ok)}.etat--veille{color:var(--veille)}.etat--perime{color:var(--perime)}
.etat--muet{color:var(--craie-3)}
.src{border-top:1px solid var(--filet-fort);padding-top:14px;font-size:12.5px;
  color:var(--craie-2);line-height:1.6}
.src__t{font-family:var(--grot);font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--craie-3);margin-bottom:9px}
.src__d{font-family:var(--mono);font-size:12.5px;color:var(--craie-2);line-height:1.65;margin:0}
.src__d b{color:var(--craie);font-weight:500}
/* Les deux sources de l'Etat qui se contredisent, composees comme un appareil
   critique : cote a cote sur la grille, un filet vertical, leurs dates, et
   aucune presentee comme la bonne. Aucun encadre, aucun fond d'alerte,
   aucun pictogramme d'avertissement. */
.divergence{grid-column:1/-1;display:grid;grid-template-columns:subgrid;row-gap:16px}
.diverg__t{grid-column:1/25;color:var(--veille);font-family:var(--grot);font-weight:600;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;margin:0}
.diverg__a{grid-column:1/12}
.diverg__b{grid-column:13/24;position:relative}
.diverg__b::before{content:"";position:absolute;left:-24px;top:2px;bottom:2px;width:1px;
  background:var(--filet-fort)}
.diverg__p{grid-column:1/25;color:var(--craie-2);font-size:13.5px;line-height:1.6;
  border-top:1px solid var(--filet-fort);padding-top:14px;margin:0}

/* ---------- chiffres du corpus, exposes comme un argument ---------- */
.chiffres{grid-column:1/-1;display:grid;grid-template-columns:subgrid;
  border-top:1px solid var(--filet-fort);border-bottom:1px solid var(--filet-fort)}
.chiffre{padding:26px 0 24px;position:relative;min-width:0}
.chiffre+.chiffre::before{content:"";position:absolute;left:calc(var(--gout) / -2);
  top:26px;bottom:26px;width:1px;background:var(--filet)}
.chiffre__v{font-family:var(--serif);font-optical-sizing:none;
  font-variation-settings:'opsz' 60;font-weight:500;font-size:clamp(38px,4.4vw,62px);
  line-height:.88;letter-spacing:-.03em;font-variant-numeric:lining-nums;color:var(--craie)}
.chiffre__l{font-family:var(--mono);font-size:11.5px;line-height:1.45;color:var(--craie-3);
  margin-top:11px;max-width:24ch}

/* ---------- index de communes en colonnes ---------- */
.communes{grid-column:1/25;columns:4;column-gap:var(--gout);
  column-rule:1px solid var(--filet)}
.communes a{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  padding:8px 0;border-bottom:1px solid var(--filet);break-inside:avoid;min-width:0;
  transition:color 420ms var(--lent)}
.communes a:hover{color:var(--or-clair)}
.communes span:first-child{font-size:14.5px;overflow-wrap:anywhere}
.communes span:last-child{font-family:var(--mono);font-size:11.5px;color:var(--craie-3);white-space:nowrap}

/* ---------- prose : le texte courant se pose en 2/15, un bareme en 1/25 ----------
   Il n'y a pas de gabarit de page : il y a une grille, et des blocs qui
   declarent ou ils se posent. */
.prose{grid-column:1/-1;display:grid;grid-template-columns:subgrid;row-gap:0}
/* Le blanc entre deux paragraphes doit etre SUPERIEUR a l'interligne, sans quoi
   deux paragraphes se lisent comme un seul bloc. Toute remise a zero de marge
   doit donc rester a la MEME specificite que la regle qui l'ecrit
   (.prose>* et .prose>*+*), sinon elle la bat et la prose se compacte. */
.prose>*{grid-column:2/15;max-width:66ch;min-width:0;margin:0}
.prose>p,.prose>ul,.prose>ol{font-size:17.5px;line-height:1.66;color:var(--craie)}
.prose>*+*{margin-top:1.55em}
.prose>ul+p,.prose>ol+p,.prose>p+ul,.prose>p+ol{margin-top:1.3em}
.prose>:first-child{margin-top:0}
.prose>h2{grid-column:1/17;max-width:none;font-family:var(--serif);font-optical-sizing:none;
  font-variation-settings:'opsz' 40;font-weight:500;line-height:.94;letter-spacing:-.022em;
  font-size:clamp(28px,3.4vw,44px);margin-top:1.9em}
.prose>h3{grid-column:2/15;font-family:var(--grot);font-weight:600;font-size:20px;
  line-height:1.2;margin-top:1.7em}
.prose>blockquote{grid-column:2/15;margin-top:1.4em;padding-left:22px;
  border-left:1px solid var(--or-sourd);font-size:18px;line-height:1.56;color:var(--craie-2)}
.prose>blockquote p{margin:0}
.prose ul,.prose ol{padding-left:1.15em}
.prose li+li{margin-top:.42em}
.prose li::marker{color:var(--craie-3)}
.prose strong{font-weight:600;color:#fff}
.prose em{font-style:italic}
/* un bareme occupe les 24 colonnes, et son entete de tableau reprend le filet fort */
.prose>.tab{grid-column:1/25;max-width:none;margin-top:2em}
.prose>.tab+*{margin-top:2em}
.prose>figure,.prose>.vis{max-width:none}

/* ---------- FAQ : aucun encadre, un filet, une bascule ---------- */
.faq{grid-column:1/25;border-top:1px solid var(--filet-fort)}
.faq details{border-bottom:1px solid var(--filet);padding:15px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:16.5px;line-height:1.3;
  list-style:none;display:flex;gap:14px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";font-family:var(--mono);font-size:14px;color:var(--craie-3);
  flex:0 0 auto}
.faq details[open] summary::before{content:"\2212"}
.faq summary:hover{color:#fff}
.faq details p{margin:10px 0 0 28px;color:var(--craie-2);font-size:16px;max-width:70ch}

/* ---------- tags de maillage : une rangee de liens, pas un bloc (MoMA) ---------- */
.tags{grid-column:2/25;display:flex;flex-wrap:wrap;gap:0 6px;font-size:14px;
  line-height:2.1;color:var(--craie-2)}
.tags a{border-bottom:1px solid var(--filet-fort);
  transition:border-color 500ms var(--lent),color 500ms var(--lent)}
.tags a:hover{color:var(--or-clair);border-color:var(--or)}
.tags span{color:var(--craie-3)}

/* ---------- bandeau d'appel ---------- */
.appel{background:var(--nuit-2);border-top:1px solid var(--or-sourd);
  border-bottom:1px solid var(--filet)}
.appel__t{grid-column:1/16}
.appel__b{grid-column:18/25;align-self:center;text-align:right}

/* ---------- pied ---------- */
footer.pied{border-top:1px solid var(--or-sourd);background:#000;
  padding-block:56px 0}
.pied__p{grid-column:1/8}
.pied__c{grid-column:span 5}
.pied__n{font-family:var(--serif);font-optical-sizing:none;
  font-variation-settings:'opsz' 22;font-size:26px;font-weight:500;line-height:.94;
  letter-spacing:-.01em;color:var(--craie);display:block}
.pied__p p{margin-top:12px;font-size:13.5px;color:var(--craie-3);line-height:1.6;max-width:36ch}
.pied__c h4{font-family:var(--grot);font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--or-clair);margin-bottom:14px}
.pied__c a{display:block;padding:4px 0;font-size:14px;color:var(--craie-2);
  transition:color 420ms var(--lent)}
.pied__c a:hover{color:var(--craie)}
.copy{border-top:1px solid var(--filet);margin-top:52px;font-family:var(--mono);
  font-size:11.5px;color:var(--craie-3);letter-spacing:.04em}
.copy>*{grid-column:1/25;padding-block:16px 18px}

/* ---------- formulaire : aucun fond de bloc, aucune ombre, aucun rayon ---------- */
.form{grid-column:15/25;border-top:1px solid var(--or);padding-top:22px;align-self:start}
.form h2{font-family:var(--serif);font-optical-sizing:none;font-variation-settings:'opsz' 22;
  font-size:clamp(24px,2.2vw,31px);font-weight:600;line-height:.94;letter-spacing:-.012em}
.form>p{font-size:13.5px;color:var(--craie-2);margin-top:9px;line-height:1.5}
.form label{display:grid;gap:5px;font-family:var(--grot);font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--craie-3);margin-top:16px}
.form input,.form select,.form textarea{
  padding:9px 0;border:0;border-bottom:1px solid var(--filet-fort);background:transparent;
  font-family:var(--mono);font-size:16px;width:100%;color:var(--craie);
  letter-spacing:0;text-transform:none;border-radius:0}
.form select{font-family:var(--grot);font-size:15px}
.form textarea{font-family:var(--grot);font-size:15.5px;line-height:1.5;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{border-bottom-color:var(--or)}
.form button{margin-top:22px;width:100%;background:var(--or);color:var(--nuit);border:0;
  padding:14px;font-family:var(--grot);font-size:11.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;transition:background 500ms var(--lent)}
.form button:hover{background:var(--or-clair)}
.form .legal{font-size:11.5px;color:var(--craie-3);margin-top:12px;line-height:1.5;
  letter-spacing:0;text-transform:none;font-weight:400;font-family:var(--grot)}
.form .etapes{display:flex;gap:6px;margin:16px 0 2px}
.form .etapes i{flex:1;height:1px;background:var(--filet-fort);font-style:normal}
.form .etapes i.on{background:var(--or)}
.form .pas{display:none}.form .pas.on{display:block}
html.sans-js .form .pas{display:block}
html.sans-js .form .etapes,html.sans-js .form .retour,html.sans-js .form [data-va]{display:none}
.form .retour{background:transparent;color:var(--craie-3);border:1px solid var(--filet-fort);
  margin-top:8px}
.form .retour:hover{background:transparent;color:var(--craie);border-color:var(--or)}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============================================================
   EMPLACEMENTS PHOTOGRAPHIQUES
   Les images n'existent pas encore : chaque emplacement porte un
   SUBSTITUT DESSINE — matiere en basse lumiere, esquisse de composition,
   grain, cartouche technique — jamais un aplat gris. Une page sans photo
   doit etre belle, pas trouee.
   Trois regles mesurees (notes/08 §10) :
   1. Une image n'est pas posee dans un cadre : elle EMERGE DU NOIR.
   2. AUCUN OR a l'interieur d'un visuel ni dans les 32 px qui le bordent.
      #AA984D est a h 94,4° ; un laiton de photo tombe a dE 3,5 de lui, et
      sous deuteranopie AUCUN accent chaud ne s'en separe. La separation qui
      marche pour tout le monde est celle du LIEU, pas celle de la teinte.
   3. Un bloc qui porte un etat de fraicheur ne recoit pas de visuel.
   ============================================================ */
.vis{grid-column:1/25;margin:0;position:relative;
  --h:clamp(230px,44vh,520px);--cx:64%;--cy:32%;--amp:34px;--par:0px;--sw:38%;
  --fond:var(--nuit)}
.alt .vis{--fond:var(--nuit-2)}
.vis--plein{margin-inline:calc(var(--marge) * -1)}
.vis__cadre{position:relative;height:var(--h);overflow:hidden;background:var(--fond)}
.vis__mat{position:absolute;left:0;right:0;top:-9%;height:118%;
  transform:translate3d(0,var(--par),0);will-change:transform;
  background:
    radial-gradient(21% 26% at var(--cx) var(--cy),rgba(216,160,98,.40) 0%,rgba(201,138,78,.17) 44%,rgba(201,138,78,.04) 70%,transparent 88%),
    radial-gradient(52% 54% at var(--cx) var(--cy),rgba(120,132,116,.16) 0%,rgba(58,70,62,.07) 48%,transparent 78%),
    radial-gradient(104% 86% at 50% 112%,rgba(7,9,8,.97) 0%,rgba(12,16,14,.72) 34%,transparent 70%),
    radial-gradient(70% 90% at -6% 20%,rgba(7,9,8,.94) 0%,transparent 62%),
    radial-gradient(70% 90% at 106% 24%,rgba(7,9,8,.9) 0%,transparent 60%),
    linear-gradient(166deg,#0a0c0b 0%,#111614 24%,#161d19 46%,#0f1311 74%,#080908 100%)}
.vis__geo{position:absolute;inset:0;width:100%;height:100%;opacity:.8}
.vis__geo .t{fill:none;stroke:#857f6f;stroke-width:1;vector-effect:non-scaling-stroke;opacity:.6}
.vis__geo .t2{fill:none;stroke:#9b9585;stroke-width:1;vector-effect:non-scaling-stroke;opacity:.42}
.vis__geo .lum{fill:var(--braise);opacity:.075}
.vis__geo .pt{fill:none;stroke:#7c7768;stroke-width:1;stroke-dasharray:3 5;
  vector-effect:non-scaling-stroke;opacity:.5}
.vis__lueur{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(102deg,transparent 0%,transparent calc(var(--sw) - 26%),
    rgba(201,138,78,.10) calc(var(--sw) - 9%),rgba(214,158,96,.17) var(--sw),
    rgba(201,138,78,.09) calc(var(--sw) + 9%),transparent calc(var(--sw) + 26%),transparent 100%)}
.vis__grain{position:absolute;inset:0;pointer-events:none;opacity:.26;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:150px 150px}
.vis__fondu{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,var(--fond) 0%,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 76%,var(--fond) 100%),
    linear-gradient(to right,var(--fond) 0%,rgba(0,0,0,0) 7%,rgba(0,0,0,0) 93%,var(--fond) 100%)}
.vis__rep{position:absolute;inset:0;pointer-events:none}
.vis__rep i{position:absolute;width:15px;height:15px;border:0 solid var(--filet-fort);opacity:.9}
.vis__rep i:nth-child(1){left:16px;top:16px;border-left-width:1px;border-top-width:1px}
.vis__rep i:nth-child(2){right:16px;top:16px;border-right-width:1px;border-top-width:1px}
.vis__rep i:nth-child(3){left:16px;bottom:16px;border-left-width:1px;border-bottom-width:1px}
.vis__rep i:nth-child(4){right:16px;bottom:16px;border-right-width:1px;border-bottom-width:1px}
/* cartouche : mono, --craie-2 / --craie-3, JAMAIS d'or (regle 2) */
.vis__cart{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:baseline;
  gap:16px;flex-wrap:wrap;padding:0 calc(var(--marge) + 2px) 15px;margin:0}
.vis__n{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--craie-2);
  text-transform:uppercase;border-bottom:1px solid var(--filet-fort);padding-bottom:3px}
.vis__t{font-family:var(--grot);font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:var(--craie-2)}
.vis__f{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--craie-3);
  margin-left:auto;text-align:right}
/* une image reelle, le jour ou elle arrive : meme bloc, meme grille, aucun cadre */
.vis__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:translate3d(0,var(--par),0)}
.trip{grid-column:1/-1;display:grid;grid-template-columns:subgrid;row-gap:0}
.trip .vis{--h:clamp(230px,26vw,330px);--amp:22px;grid-column:span 8}
.trip .vis__cart{padding-inline:14px;padding-bottom:12px}
.trip .vis__rep i:nth-child(3),.trip .vis__rep i:nth-child(4){display:none}

/* ---------- planche technique : le document technique EST la matiere ---------- */
.planche{grid-column:13/25;position:relative;align-self:start;pointer-events:none}
@media (min-width:1180px){.hero .planche{margin-right:calc(var(--marge) * -1)}}
.planche svg{width:100%;height:auto;display:block}
.planche .trait{fill:none;stroke:#4e4a3f;stroke-width:1.1;vector-effect:non-scaling-stroke}
.planche .trait-or{fill:none;stroke:var(--or);stroke-width:1;vector-effect:non-scaling-stroke}
.planche .cote{fill:none;stroke:#6b6659;stroke-width:.75;vector-effect:non-scaling-stroke}
.planche .hach{fill:none;stroke:var(--or-sourd);stroke-width:.75;vector-effect:non-scaling-stroke}
.planche text{font-family:var(--mono);font-size:8.5px;fill:var(--craie-3);letter-spacing:.06em}
.planche .cartouche text{fill:var(--or-clair)}
.planche .dessin{stroke-dasharray:var(--L);stroke-dashoffset:var(--L);
  animation:trace 3600ms var(--tres-lent) 260ms forwards}
@keyframes trace{to{stroke-dashoffset:0}}


/* Un composant de statut n'a pas d'or, pas meme dans ses liens : or / ambre
   tombent a 0,9 dE sous tritanopie. Le lien y reste un lien — souligne, en
   craie — mais il ne porte pas le pigment de la marque. */
.fraich a,.divergence a,.etat a,tr[data-etat] a,.fraich .lien,.divergence .lien{color:var(--craie);
  background-image:linear-gradient(var(--craie-3),var(--craie-3))}
.fraich a:hover,.divergence a:hover{color:#fff;background-image:linear-gradient(var(--craie),var(--craie))}
.vis--portrait .vis__f,.trip .vis__f{margin-left:0;text-align:left;width:100%}

/* un mot compose ne se coupe pas a son trait d'union dans un titre */
.nw{white-space:nowrap}

/* ---------- frontispice : ouverture de fiche metier (4:5) et bande ---------- */
.hero__v{grid-column:2/9;grid-row:5;margin-top:40px}
.hero__b{margin-top:44px}
.vis--portrait .vis__cadre{height:auto;aspect-ratio:4/5;max-height:560px}
.communes__v{grid-column:1/-1;margin-bottom:46px}
section.sep{padding-block:clamp(26px,3vw,44px) 0}

/* ---------- esquisse : ce que la page montre tant que l'image n'existe pas ----
   Une esquisse et son sujet, en --craie-2 / --craie-3 : jamais « image
   manquante », jamais « a produire », jamais un numero de prompt (ceux-la
   vivent dans build/photos-a-produire.csv, hors du docroot). */
.vis--esquisse .vis__n{color:var(--craie-3)}
.vis--photo .vis__cart{padding-top:40px}
.vis--photo .vis__t,.vis--photo .vis__f{text-shadow:0 0 1px var(--fond)}

/* ---------- le meme bareme en trois formes (Our World in Data) ---------- */
.formes{grid-column:1/25;display:grid;grid-template-columns:subgrid;max-width:none;margin-top:2em}
.prose>.formes{grid-column:1/25;max-width:none}
.prose>.formes+*{margin-top:2em}
.formes>*{grid-column:1/-1}
.formes__tete{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:end;
  row-gap:14px;padding-bottom:20px}
.formes__c{display:flex;justify-content:flex-end}
.config{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.config .sur{margin-right:6px;display:inline-block}
.config__p{font-family:var(--mono);font-size:11px;line-height:1.4;color:var(--craie-2);
  border:1px solid var(--filet-fort);padding:4px 9px}
.commut{display:flex;flex-wrap:wrap;border:1px solid var(--filet-fort);width:max-content;max-width:100%}
.commut button{appearance:none;background:none;border:0;cursor:pointer;font-family:var(--grot);
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--craie-2);
  padding:8px 15px;transition:color 420ms var(--lent),background 420ms var(--lent)}
.commut button+button{border-left:1px solid var(--filet)}
.commut button[aria-pressed="true"]{background:var(--craie);color:var(--nuit)}
.commut button:hover{color:var(--craie)}
.commut button[aria-pressed="true"]:hover{color:var(--nuit)}
/* forme « ecarts » : une seule teinte, plusieurs clartes, etiquetage direct */
.abaque,.fiches{grid-column:1/-1;display:grid;grid-template-columns:subgrid;
  border-top:1px solid var(--filet-fort)}
.abaque__l{grid-column:1/-1;display:grid;grid-template-columns:subgrid;padding:16px 0 14px;
  border-bottom:1px solid var(--filet)}
.abaque__t{grid-column:1/9;font-size:15px;line-height:1.3;color:var(--craie)}
.abaque__n{color:var(--craie-3);font-size:11.5px}
.barre__plaf{font-size:11.5px;color:var(--or-clair)}
.abaque__g{grid-column:9/25;display:flex;flex-direction:column;gap:7px;min-width:0}
.barre{display:flex;align-items:center;gap:11px;min-width:0}
/* La barre la plus longue laisse toujours la place de son etiquette : la
   longueur est prise sur la piste MOINS la reserve d'etiquette, jamais sur la
   piste entiere (a 100 %, l'etiquette sortait de l'ecran — vu au rendu). */
.barre__b{height:11px;flex:0 0 auto;width:calc((100% - var(--reserve,13.5rem)) * var(--v,1));
  background:color-mix(in srgb,var(--or) var(--clarte,100%),var(--nuit));
  transform-origin:left;transition:transform var(--t2) var(--tres-lent)}
.js .abaque .barre__b{transform:scaleX(0)}
.js .abaque.vu .barre__b{transform:scaleX(1)}
.barre__e{font-family:var(--mono);font-size:12px;color:var(--craie-2);flex:1 1 0;min-width:0}
.barre__e b{color:var(--craie);font-weight:500}
.abaque__note{grid-column:1/13;padding-top:14px}
/* forme « fiches » : le triplet nom / plafond / conditions (Stripe) */
.fiche{grid-column:1/-1;display:grid;grid-template-columns:subgrid;
  border-bottom:1px solid var(--filet);padding:18px 0 16px;align-items:baseline}
.fiche__t{grid-column:1/12;font-size:16px;line-height:1.3}
.fiche__t b{font-weight:600}
.fiche__ty{grid-column:12/17;font-family:var(--mono);font-size:12.5px;color:var(--or-clair)}
.fiche__d{grid-column:17/25;font-size:14.5px;line-height:1.5;color:var(--craie-2)}

/* ---------- 900 px : la grille passe de 24 a 6 colonnes, le subgrid suit ---------- */
@media (max-width:900px){
  :root{--gout:12px}
  .wrap{grid-template-columns:repeat(6,minmax(0,1fr))}
  .c-texte,.c-large,.c-marge,.c-demi-g,.c-demi-d,.c-pleine{grid-column:1/7}
  .gc{grid-column:var(--gc-s,1/7)}
  .bandeau__g,.bandeau__d{grid-column:1/7;text-align:left}
  .bandeau__d{margin-top:3px}
  .tete__in,.fil>*,.copy>*{grid-column:1/7}
  header.tete{position:static}
  .tete__in{padding:12px 0 10px;gap:12px;min-height:0}
  nav.nav{gap:11px 14px;margin-top:4px}
  nav.nav a{font-size:10.5px;letter-spacing:.1em;padding-block:4px}
  .cta{padding:8px 13px;font-size:10px;letter-spacing:.12em}
  .entete-sec__t{grid-column:1/7}
  .entete-sec__n{grid-column:1/7;text-align:left;margin-top:14px}
  .hero__t,.hero__c,.hero__m,.hero .form,.hero .planche,.hero .sur{
    grid-column:1/7;grid-row:auto}
  .display{font-size:clamp(40px,12.6vw,60px);letter-spacing:-.022em}
  .display--gen{font-size:clamp(34px,9.6vw,52px)}
  .mot-gr{font-size:.4em;letter-spacing:.1em}
  .planche{grid-column:1/7;margin-top:34px}
  .planche text{font-size:11.5px}
  .index__n{grid-column:1/2}.index__t{grid-column:2/7}
  .index__v{grid-column:2/7;text-align:left;margin-top:4px}
  .reg__n{grid-column:1/2}.reg__nom{grid-column:2/7}
  .reg__met{grid-column:2/7;margin-top:5px}
  .reg__vil{grid-column:2/5;margin-top:3px}
  .reg__dis{grid-column:5/7;text-align:right;margin-top:3px}
  .reg__plus{grid-column:1/7;text-align:left;margin-top:10px}
  .reg__det{grid-column:1/7}
  .reg__det-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .communes{grid-column:1/7;columns:2}
  .chiffre+.chiffre::before{display:none}
  .chiffre{border-top:1px solid var(--filet);grid-column:1/7}
  .chiffre:first-child{border-top:0}
  .fraich__e,.fraich__d{grid-column:1/7}
  .diverg__a,.diverg__b,.diverg__t,.diverg__p{grid-column:1/7}
  .diverg__b::before{left:0;right:0;top:-9px;bottom:auto;width:auto;height:1px}
  .diverg__b{padding-top:18px}
  .prose>*,.prose>h2,.prose>h3,.prose>blockquote{grid-column:1/7}
  .prose>h2{font-size:clamp(27px,7.4vw,36px)}
  .faq,.tags,.tab,.vis,.communes{grid-column:1/7}
  .appel__t,.appel__b{grid-column:1/7}
  .appel__b{text-align:left;margin-top:20px}
  .form{grid-column:1/7;margin-top:30px}
  .pied__p,.pied__c{grid-column:span 3}
  footer.pied .wrap{row-gap:30px}
  .trip{row-gap:34px}
  .trip .vis{grid-column:1/7;--h:min(58vw,300px)!important}
  .vis{--cy:30%}
  .vis__cart{gap:4px 12px;padding-bottom:13px}
  .vis__t{font-size:12px}
  .vis__f{margin-left:0;text-align:left;width:100%;font-size:9.5px;letter-spacing:.08em}


  /* frontispice : en 6 colonnes, l'ordre du DOM fait foi — titre, chapeau,
     planche, formulaire, visuel. Aucune ligne declaree ne doit survivre ici,
     sinon le formulaire passe AU-DESSUS du h1 (vu au rendu le 30/09/2026). */
  .hero .wrap>*{grid-row:auto!important}
  .hero .wrap>.form,.hero .wrap>.hero__t,.hero__v{grid-column:1/7!important}
  /* 48 px et pas 30 : le bouton d'or du formulaire est juste au-dessus, et
     l'or ne s'approche jamais a moins de 32 px d'un visuel (mesure a 390 px) */
  .hero__v{margin-top:48px}
  .vis--portrait .vis__cadre{max-height:440px}
  .formes__c{justify-content:flex-start}
  .abaque__t,.abaque__g,.abaque__note,.fiche__t,.fiche__ty,.fiche__d{grid-column:1/7}
  .abaque__g{margin-top:12px}
  .fiche__ty{margin-top:4px}.fiche__d{margin-top:8px}
  .barre{--reserve:12.5rem}
  .barre__e{font-size:11px}

  /* --- LE BAREME : la ligne se deplie, les valeurs restent alignees en
     colonnes. C'est tout l'interet de la mono tabulaire. Le thead disparait,
     les libelles reviennent en ::before depuis data-l. --- */
  .tab thead{display:none}
  .tab tr>*{grid-column:1/7!important}
  .tab tbody tr{padding:15px 0 13px}
  .tab .lib{font-size:15px}
  .tab .v{font-size:14.5px;text-align:left!important}
  /* deux valeurs : une moitie chacune */
  .tab[data-cols="3"] tr>*:nth-child(n+2){grid-column:span 3!important}
  /* trois valeurs : des tiers egaux, comme les trois couleurs de menage du proto */
  .tab[data-cols="4"] tr>*:nth-child(n+2){grid-column:span 2!important}
  /* quatre valeurs : trois tiers, puis le plafond ISOLE sous un filet pointille —
     un plafond de depense ne se lit pas sur la meme ligne que les primes */
  .tab[data-cols="5"] tr>*:nth-child(n+2):nth-child(-n+4){grid-column:span 2!important}
  /* cinq valeurs : deux moities, deux moities, puis la derniere isolee */
  .tab[data-cols="6"] tr>*:nth-child(n+2):nth-child(-n+5){grid-column:span 3!important}
  /* six valeurs : deux rangs de tiers */
  .tab[data-cols="7"] tr>*:nth-child(n+2){grid-column:span 2!important}
  .tab tr>*:nth-child(n+2){margin-top:13px}
  .tab[data-cols="5"] tr>*:nth-child(5),
  .tab[data-cols="6"] tr>*:nth-child(6){grid-column:1/7!important;
    padding-top:9px;border-top:1px dotted var(--filet-fort)}
  .tab td[data-l]::before{content:attr(data-l);display:block;font-family:var(--grot);
    font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
    color:var(--craie-3);margin-bottom:3px;line-height:1.2}
}
@media (max-width:560px){
  .communes{columns:1}
  .reg__det-in{grid-template-columns:1fr}
  .pied__p,.pied__c{grid-column:1/7}
  .chiffre__l{max-width:none}
}

/* ---------- mouvement reduit : rien ne reste masque ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;
    transition-duration:1ms!important;scroll-behavior:auto!important}
  .rev,.js .rev,.js .vu .rev{clip-path:none!important}
  .planche .dessin{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
  .balaye{background-image:none;-webkit-text-fill-color:var(--craie);color:var(--craie)}
  .vis__mat,.vis__img{transform:none!important}
  .vis__lueur{background:radial-gradient(74% 62% at var(--cx) var(--cy),
    rgba(201,138,78,.13) 0%,transparent 72%)}
  .index__l::before{transform:scaleX(0)}
  .barre__b,.js .abaque .barre__b{transform:none!important}
}
/* =========================================================================
   architecte-interieur-pau.fr — couche d'identite, charte v3/v4
   (direction artistique du 2 septembre 2026, prototype proto/accueil-et-guide.html)

   Cette feuille est ajoutee APRES la base du moteur : elle ne fait que preciser.
   La grammaire — grille de 24 colonnes, subgrid jusque dans la ligne de bareme,
   absence de carte, fond sombre, echelle typographique — vit dans BASE_CSS.
   Les jetons vivent dans config/site.json (design.palette), parce que c'est la
   que le moteur les lit et que scripts/mesurer-couleurs.py les recalcule.

   LES QUATRE REGLES MESUREES, valables sur les 271 pages :

   1. AUCUNE CARTE. Zero box-shadow, zero border-radius, zero fond de bloc.
      Le seul separateur est un filet de 1 px, ou le vide. C'est le marqueur
      le plus reconnaissable du site « fait avec une IA ».

   2. L'OR NE TOUCHE JAMAIS UN FOND CLAIR. #AA984D plafonne a 2,87:1 sur blanc
      et monte a 6,81:1 sur #0c0c0b. Le site est donc entierement sombre : ce
      n'est pas un gout, c'est une consequence de la mesure. Sur fond clair
      (impression, e-mail) le jeton valide est or_encre #6d6128 (5,83:1).

   3. AUCUN OR DANS UN BLOC QUI PORTE UN ETAT DE FRAICHEUR, ni sur la ligne qui
      en porte un : or / ambre tombent a 0,9 dE sous tritanopie — ils sont la
      meme famille de teinte. Le trio de fraicheur #3fbfa2 / #ffca6b / #cf5f6d
      a ete cherche par recherche exhaustive sous contrainte AA sur les deux
      fonds sombres : dE minimal 15,7 dans le pire cas.

   4. AUCUN OR DANS UN VISUEL NI DANS LES 32 PX QUI LE BORDENT. Un laiton de
      photo (#B39A4E) est a dE 3,5 de l'or — sous le seuil auquel deux pigments
      se distinguent — et sous deuteranopie AUCUN accent chaud ne s'en separe.
      La separation qui marche pour tout le monde est celle du LIEU.
      La lumiere chaude des images est --braise #C98A4E (h 66,5°, dE 21,1 de
      l'or) : c'est une LUMIERE, jamais un pigment.

   INTERLIGNAGE DES TITRES : 0,89 / 0,94 / 0,95. Decouverte mesuree a retenir :
   en francais, sous 0,94, l'accent d'une capitale de la 2e ligne (I, E, A)
   percute la jambe descendante de la ligne precedente. Verifie sur « Plafonds
   de ressources hors Ile-de-France ». D'ou la regle : 0,86-0,90 est reserve aux
   h1 dont les coupes sont POSEES A LA MAIN ; les titres GENERES a partir de
   donnees restent a 0,94. Corollaire : aucun overflow:clip sur un ancetre de
   titre, et le masque de revelation depasse de --voile sur les quatre cotes.

   AUCUNE ICONE. notes/12 conclut : la planche cotee est le seul objet dessine
   de ce site, et elle tire sa force d'etre unique. Pas de pictogramme dans un
   titre, pas de puce dessinee, pas de fleche decorative.
   ========================================================================= */

body{font-synthesis-weight:none;font-synthesis-style:none}

/* Chiffres tabulaires partout ou il y a des nombres a comparer. C'est le
   registre « fiche technique » qui donne l'air documentaire. */
.tab .v,.reg__det dd,.calc,.num,.mono,.fil,.copy,.chiffre__l,.etat,.src__d,time{
  font-variant-numeric:tabular-nums lining-nums;
}

/* Le corps de texte ne porte JAMAIS la mono, et la didone ne descend jamais
   sous 24 px : en petit corps sur fond sombre, les delies en cheveu
   disparaissent. Les deux garde-fous sont ici, ecrits une fois. */
.prose p,.prose li,.sub,.mini{font-family:var(--grot)}

/* Le noir n'est jamais #000 sur du blanc pur (Linear, Mosby's Files). Le seul
   #000 du site est le pied de page : il ferme la page, il ne porte pas de
   lecture longue. */
.pied{background:#000}

/* Lien de prose : soulignement en or sourd qui s'allume a l'or plein. Jamais
   un text-decoration par defaut — l'epaisseur et l'offset ne se reglent pas. */
.prose a{text-underline-offset:.18em}

/* Le formulaire n'est pas une carte : un filet d'or en tete, des champs qui ne
   sont que des lignes. C'est le seul endroit du site ou l'or est un aplat, et
   il porte alors du texte --nuit : 6,81:1 dans l'autre sens. */
.form button{letter-spacing:.18em}

/* Un tableau de bareme n'a PAS de zebrure : la zebrure est un aplat de bloc,
   donc une carte etalee. C'est le filet qui separe les lignes. */
.tab tbody tr:nth-child(even){background:none}

/* Impression : le seul cas ou le site passe sur fond clair. Les jetons de la
   charte v1 restent valides et mesures — or_encre #6d6128 (5,83:1) pour le
   texte, or_ombre #8c7c3b pour les filets. */
@media print{
  :root{--nuit:#fff;--nuit-2:#fff;--nuit-3:#fff;--craie:#101010;--craie-2:#3d3d39;
        --craie-3:#575751;--or:#6d6128;--or-clair:#6d6128;--or-sourd:#8c7c3b;
        --filet:#d6d3c8;--filet-fort:#b3afa2;--fond:#fff;--encre:#101010;
        --ok:#00695e;--veille:#8a4a00;--perime:#7a1f2b}
  body{background:#fff;color:#101010}
  .rail,.tete,.bandeau,.form,nav.nav,.vis,.planche,.pas-plus{display:none!important}
  .rev{clip-path:none!important}
  a[href^="/"]::after{content:" (" attr(href) ")";font-family:var(--mono);font-size:9px}
  .tab tbody tr{break-inside:avoid}
}

/* Deficience de la vision des couleurs : les trois etats de fraicheur portent
   deja leur SYMBOLE et leur MOT dans le texte de la page — la couleur n'est
   que le troisieme canal. On renforce seulement le contraste de forme quand le
   systeme signale une preference de contraste eleve. */
@media (prefers-contrast:more){
  :root{--craie-2:#d8d4c8;--craie-3:#b5b0a2;--filet:#3a3830;--filet-fort:#5a564a}
  .index__l::before{transform:scaleX(1)}
}

/* ------------------------------------------------------------------ outils */
/* Charte v3 : aucune carte (pas de fond de bloc, pas de coin arrondi, pas
   d'ombre), un filet de 1 px pour tout separateur, interlignage des titres
   sous 0,95, or jamais sur fond clair et JAMAIS dans un composant de statut —
   les statuts prennent le trio dedie, mesure a dE minimal 15,7.
   Le calculateur se pose sur la grille de page comme tout le reste. */
.outil{grid-column:1/25;display:grid;grid-template-columns:subgrid;
  border-top:1px solid var(--filet-fort);padding-top:26px}
.outil>*{grid-column:2/15;min-width:0}
.outil h2{grid-column:1/17;font-family:var(--serif);font-optical-sizing:none;
  font-variation-settings:'opsz' 40;font-weight:500;font-size:clamp(28px,3.4vw,44px);
  line-height:.94;letter-spacing:-.022em;margin-bottom:10px}
.outil h3{font-family:var(--grot);font-size:11px;font-weight:600;line-height:1.2;
  text-transform:uppercase;letter-spacing:.2em;color:var(--craie-3);margin:28px 0 12px}
.outil .sub{margin-bottom:26px}
.outil-onglets{grid-column:1/25;display:flex;flex-wrap:wrap;
  border:1px solid var(--filet-fort);width:max-content;max-width:100%;margin-bottom:26px}
.outil-onglets button{background:none;border:0;font-family:var(--grot);
  text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:600;
  padding:9px 16px;color:var(--craie-3);cursor:pointer;
  transition:color 420ms var(--lent),background 420ms var(--lent)}
.outil-onglets button+button{border-left:1px solid var(--filet)}
.outil-onglets button[aria-selected="true"]{background:var(--craie);color:var(--nuit)}
.outil-onglets button:hover{color:var(--craie)}
.outil-onglets button[aria-selected="true"]:hover{color:var(--nuit)}
.outil-grille{grid-column:1/25;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:18px 24px}
.ch{display:grid;gap:5px;align-content:start;border-bottom:1px solid var(--filet);
  padding-bottom:12px;min-width:0}
.ch>label,.ch>legend{font-family:var(--grot);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--craie-3);font-weight:600;padding:0}
.ch input,.ch select{border:0;border-bottom:1px solid var(--filet-fort);border-radius:0;
  background:transparent;font-family:var(--mono);font-size:18px;padding:6px 0;width:100%;
  color:var(--craie);font-variant-numeric:tabular-nums lining-nums}
.ch input:focus,.ch select:focus{border-bottom-color:var(--or)}
.ch select{font-family:var(--grot);font-size:15px}
.ch .aide{font-size:12px;color:var(--craie-3);line-height:1.45}
.ch--large{grid-column:1/-1}
fieldset.ch{border:0;margin:0}
.ch .opt{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  font-size:15px;padding:5px 0;text-transform:none;letter-spacing:0;
  font-family:var(--grot);font-weight:400;color:var(--craie)}
.ch .opt input{width:auto;border:0}
/* le resultat : le meme tableau pose sur la grille, pas un encadre de resultat */
.outil-res{grid-column:1/25;margin-top:34px;border-top:1px solid var(--filet-fort)}
.outil-res .lg{display:grid;grid-template-columns:1fr auto;gap:0 24px;padding:13px 0;
  border-bottom:1px solid var(--filet);align-items:baseline}
.outil-res .lg--cle{border-bottom:1px solid var(--filet-fort)}
.outil-res .lg--cle .v{font-family:var(--serif);font-optical-sizing:none;
  font-variation-settings:'opsz' 60;font-size:clamp(32px,3.4vw,48px);line-height:.9;
  letter-spacing:-.03em;font-weight:500;color:var(--craie)}
.outil-res .lg--cle .k{font-weight:600;color:#fff}
.outil-res .k{font-size:15px;line-height:1.35}
.outil-res .k small{display:block;color:var(--craie-3);font-size:12.5px;
  font-family:var(--grot);letter-spacing:0;text-transform:none;margin-top:4px;max-width:62ch}
.outil-res .v{font-family:var(--mono);font-size:19px;font-weight:500;text-align:right;
  white-space:nowrap;font-variant-numeric:tabular-nums lining-nums;color:var(--craie)}
.outil-res .v small{font-family:var(--grot);font-size:12px;font-weight:400;color:var(--craie-3)}
.outil-alerte{grid-column:1/25;margin-top:20px;padding-left:16px;
  border-left:1px solid var(--veille);font-size:14.5px;color:var(--craie-2);line-height:1.55}
.outil-vide{color:var(--craie-3);font-size:15px;padding:20px 0}
/* Statuts : la couleur ne porte JAMAIS seule, le mot est ecrit. Jamais d'or ici :
   or / ambre tombent a 0,9 dE sous tritanopie. */
.st{font-family:var(--grot);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;white-space:nowrap;border-bottom:1px solid currentColor;padding-bottom:2px}
.st__s{font-size:10px;letter-spacing:0}
/* la ligne qui porte un statut n'a pas d'or, pas meme dans le lien de sa source */
.outil-res .lg:has(.st) a{color:var(--craie);background-image:linear-gradient(var(--craie-3),var(--craie-3))}
.st-oui{color:var(--ok)}
.st-voir{color:var(--veille)}
.st-non{color:var(--perime)}
.src{display:block;font-family:var(--mono);font-size:12px;color:var(--craie-3);margin-top:6px;
  letter-spacing:0;text-transform:none;white-space:normal;border:0;padding:0}
.outil-conf{grid-column:1/25;margin-top:30px;padding-top:14px;
  border-top:1px solid var(--filet);font-size:13px;color:var(--craie-3);max-width:78ch}
@media(max-width:900px){
  .outil,.outil>*,.outil h2,.outil-onglets,.outil-grille,.outil-res,
  .outil-alerte,.outil-conf{grid-column:1/7}
  .outil-res .lg{grid-template-columns:1fr;gap:3px}
  .outil-res .v{text-align:left}
}
/* -------------------------------------------------------------------- quiz */
.quiz{grid-column:1/25;display:grid;grid-template-columns:subgrid;
  border-top:1px solid var(--filet-fort);padding-top:22px}
.quiz>*{grid-column:2/15;min-width:0}
.quiz h2{grid-column:1/17;font-family:var(--serif);font-optical-sizing:none;
  font-variation-settings:'opsz' 40;font-weight:500;font-size:clamp(28px,3.4vw,44px);
  line-height:.94;letter-spacing:-.022em;margin-bottom:10px}
.quiz>p.sub{color:var(--craie-2);font-size:15px;max-width:70ch;margin-bottom:30px}
.quiz ol.qs{grid-column:1/25;display:grid;grid-template-columns:subgrid;
  list-style:none;margin:0;padding:0;counter-reset:q}
.quiz ol.qs>li{grid-column:1/25;display:grid;grid-template-columns:subgrid;
  counter-increment:q;padding:24px 0;border-bottom:1px solid var(--filet)}
.quiz ol.qs>li>*{grid-column:2/15}
.quiz ol.qs>li::before{content:counter(q,decimal-leading-zero);font-family:var(--mono);
  font-size:12px;color:var(--craie-3);grid-column:1/2}
.quiz .q{font-weight:600;font-size:18px;line-height:1.3;max-width:70ch;margin:0 0 16px;
  color:var(--craie)}
.quiz .opt{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  padding:9px 0;border-bottom:1px solid var(--filet);cursor:pointer;font-size:16px;
  max-width:70ch;color:var(--craie-2)}
.quiz .opt:hover{color:var(--craie)}
.quiz .opt:last-of-type{border-bottom:0}
.quiz .opt input{margin-top:5px;accent-color:var(--or)}
.quiz .just{margin-top:14px;padding-left:16px;border-left:1px solid var(--filet-fort);
  font-size:15px;max-width:70ch;color:var(--craie-2)}
.quiz .just.bon{border-left-color:var(--ok)}
.quiz .just.autre{border-left-color:var(--veille)}
.quiz .just p{margin:0 0 8px}
.quiz .just .renvoi{font-family:var(--mono);font-size:12px;color:var(--craie-3)}
.quiz .score{grid-column:2/15;border-top:1px solid var(--filet-fort);margin-top:26px;
  padding-top:18px;font-size:16px;max-width:70ch;color:var(--craie)}
.quiz .score b{font-family:var(--mono);font-size:21px;color:#fff}
.quiz .sans-js{font-size:15px;color:var(--craie-3)}
html:not(.sans-js) .quiz .sans-js{display:none}
html.sans-js .quiz .just{display:none}
@media(max-width:900px){
  .quiz>*,.quiz h2,.quiz .score{grid-column:1/7}
  .quiz ol.qs,.quiz ol.qs>li{grid-column:1/7}
  .quiz ol.qs>li>*{grid-column:1/7}
  .quiz ol.qs>li::before{grid-column:1/7}
}

.depouille{margin:4rem auto 2rem;border-top:1px solid var(--filet,currentColor);border-bottom:1px solid var(--filet,currentColor)}
.dep__tete{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:1rem 2rem;padding:1.2rem 0;border-bottom:1px solid var(--filet,currentColor)}
.dep__t{font-family:var(--mono,monospace);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;margin:0}
.dep__tete .mini{margin:0}
.dep__g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.dep__c{display:flex;flex-direction:column;gap:.35rem;padding:.9rem .8rem;border-right:1px solid var(--filet,currentColor);text-decoration:none;color:inherit}
.dep__c:last-child{border-right:0}
.dep__c:hover .dep__l,.dep__c:focus-visible .dep__l{text-decoration:underline;text-underline-offset:.2em}
.dep__n{font-family:var(--mono,monospace);font-size:.7rem;opacity:.65}
.dep__l{font-size:.92rem}
.dep__md{padding:.8rem 0;margin:0}
.dep__copie{font:inherit;background:none;border:1px solid var(--filet,currentColor);color:inherit;padding:.15rem .6rem;cursor:pointer;margin-left:.6rem}
figure.portrait-auteur{margin:0 0 2rem;width:min(280px,70%);max-width:280px}
figure.portrait-auteur img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
figure.portrait-auteur figcaption{margin-top:.5rem;opacity:.7}
@media (max-width:900px){.dep__tete{grid-template-columns:1fr}.dep__g{grid-template-columns:repeat(2,minmax(0,1fr))}
.dep__c{border-bottom:1px solid var(--filet,currentColor)}.dep__c:nth-child(2n){border-right:0}}