:root{--fond:#E9E7E1;--fond2:#E3E0D9;--fond3:#CFCBC0;--encre:#191817;--primaire:#191817;--primaire_sombre:#141311;--accent:#00527A;--accent_sombre:#003F5E;--gris:#5E5C57;--gris_clair:#99978E;--clair:#EFEDE7;--nuit:#141311;--craie:#EFEDE7;--papier:#E9E7E1;--encre_douce:#33312D;--gris_nuit:#99978E;--flood:#00527A;--azur:#A4DCF2;--enc_c:#0090D0;--enc_m:#E5007E;--enc_j:#F2C400;--enc_n:#191817;--c_texte:#005E86;--m_texte:#A80059;--statut_ok:#1E6B4E;--statut_veille:#005E86;--statut_perime:#A80059;--serie_1:#00527A;--serie_2:#1E6B4E;--serie_3:#A80059;--serie_4:#5E5C57;--electrique:#A4DCF2;--voile:#E3E0D9;--voile2:#CFCBC0;--violet_pale:#5E5C57;--titre:"Anybody", 'Arial Narrow',Arial,system-ui,sans-serif;--texte:"Onest", system-ui,-apple-system,'Segoe UI',sans-serif;--mono:"Martian Mono", ui-monospace,'SFMono-Regular','Courier New',monospace;--rayon:0px;--largeur:1760px}@font-face{font-family:'Anybody';src:url('/assets/fonts/anybody-latin-var.woff2') format('woff2-variations'),url('/assets/fonts/anybody-latin-var.woff2') format('woff2');font-weight:100 900;font-stretch:50% 150%;font-style:normal;font-display:swap}@font-face{font-family:'Onest';src:url('/assets/fonts/onest-latin-var.woff2') format('woff2-variations'),url('/assets/fonts/onest-latin-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}@font-face{font-family:'Martian Mono';src:url('/assets/fonts/martian-mono-latin-var.woff2') format('woff2-variations'),url('/assets/fonts/martian-mono-latin-var.woff2') format('woff2');font-weight:100 800;font-stretch:75% 112.5%;font-style:normal;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
:root{--marge:clamp(16px,3.2vw,48px);--gout:clamp(10px,1.1vw,18px);
  --mesure:68ch;--chrome:74px;
  --filet:1px solid var(--page-filet,var(--fond3));
  --sortie:cubic-bezier(.22,1,.36,1);--vite:.18s var(--sortie);--lent:.34s var(--sortie);
  --page-fond:var(--fond);--page-encre:var(--encre);--page-second:var(--gris);
  --page-filet:rgba(25,24,23,.22)}
html{background:var(--page-fond);-webkit-text-size-adjust:100%;
  transition:background-color .9s var(--sortie)}
body{margin:0;background:var(--page-fond);color:var(--page-encre);
  font-family:var(--texte);font-weight:350;line-height:1.58;
  font-size:clamp(15px,.5vw + 13.4px,17.5px);letter-spacing:.002em;
  overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:color .9s var(--sortie)}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--titre);font-weight:400;
  line-height:.92;text-wrap:balance;hyphens:none;-webkit-hyphens:none;
  overflow-wrap:normal;word-break:normal}
/* Un titre ne retombe JAMAIS sur l'interlignage du corps. Sans cette valeur par
   defaut, un h1 ou un h4 qu'aucune regle de la charte ne nomme heritait 1,58 du
   body — le controle au rendu l'a attrape sur footer h4, sur le h1 des pages
   legales et sur celui du 404. */
p{margin:0 0 1.05em;text-wrap:pretty}p:last-child{margin-bottom:0}
ul.nu{margin:0;padding:0;list-style:none}
img,svg,canvas{max-width:100%;height:auto;display:block}
::selection{background:var(--flood);color:var(--craie)}

/* La largeur utile. Pas de boite centree : une marge, et la grille dessous. */
.wrap{width:100%;max-width:none;margin:0;padding-inline:var(--marge)}
.g24{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));
  column-gap:var(--gout)}
/* Filet de securite de grille. Sans lui, tout enfant direct oublie tombe dans
   une colonne d'un vingt-quatrieme de large et se rend en une lettre par ligne.
   Le :where() garde la specificite a zero pour que les regles suivantes
   reprennent la main. */
.g24 > :where(*){grid-column:1/25}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

.skip{position:absolute;left:-9999px;background:var(--encre);color:var(--papier,var(--fond));
  padding:11px 17px;z-index:200;font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase}
.skip:focus{left:var(--marge);top:10px}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ------------------------------------------------------------------ chrome */
/* Signal-A : la navigation est un en-tete de tableau — des cellules de largeur
   egale, chacune coiffee d'un filet qui s'arrete avant la suivante. HOBRO et
   BASIC/DEPT : mix-blend-mode difference, un seul en-tete blanc qui s'inverse
   tout seul sur les sections claires, sombres et inondees. Une declaration
   remplace toute une logique de theme par section. */
/* STICKY, ET PAS FIXE. Un en-tete fixe demande un espaceur de hauteur fixe,
   donc un pari sur le nombre de lignes que prend la navigation : en 390 px elle
   en prend trois, l'espaceur en supposait une, et le sur-titre de la banniere
   passait dessous. Sticky reste dans le flux — le recouvrement devient
   structurellement impossible — et le geste (filets de colonnes, inversion par
   difference, repli au defilement) est exactement le meme. */
#chrome{position:sticky;top:0;z-index:80;
  mix-blend-mode:difference;color:#fff;pointer-events:none;
  padding-inline:var(--marge);padding-bottom:6px;
  transform:translate3d(0,0,0);
  transition:transform .55s var(--sortie);will-change:transform}
#chrome.replie{transform:translate3d(0,-118%,0)}
#chrome a,#chrome button{pointer-events:auto}
.chrome-cale{display:none}
.bandeau{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));
  column-gap:var(--gout);align-items:end;padding-top:9px;
  padding-bottom:clamp(8px,1.1vw,16px);font-size:9.5px}
.bandeau>.mono,.bandeau>span{font-family:var(--mono);font-size:9.5px;
  letter-spacing:.085em;text-transform:uppercase;opacity:.66;line-height:1.3}
.bandeau>.mono{grid-column:1/13}
.bandeau>span:last-child{grid-column:13/25;text-align:right}
header{background:none;color:inherit;border:0}
header .wrap{padding:0;display:grid;grid-template-columns:repeat(24,minmax(0,1fr));
  column-gap:var(--gout);align-items:start}
.logo{grid-column:1/7;display:block;font-family:var(--titre);line-height:1;
  padding-bottom:7px;text-transform:uppercase}
.logo b{display:block;font-weight:400;font-size:clamp(12px,1.05vw,15.5px);
  letter-spacing:.006em}
.logo span{display:block;font-size:8.5px;letter-spacing:.12em;opacity:.62;
  font-family:var(--mono);margin-top:2px;text-transform:uppercase}
nav{grid-column:7/25;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(0,1fr));column-gap:var(--gout)}
nav a{font-family:var(--mono);font-size:9.5px;letter-spacing:.085em;
  text-transform:uppercase;border-top:1px solid currentColor;padding:6px 0 7px;
  display:flex;align-items:baseline;gap:5px;opacity:.72;transition:opacity var(--lent);
  line-height:1.25}
nav a:hover,nav a:focus-visible,nav a[aria-current="page"]{opacity:1}
nav a[aria-current="page"]::before{content:'';width:5px;height:5px;border-radius:50%;
  background:currentColor;flex:none;transform:translateY(-1px)}
.cta{font-family:var(--mono);font-size:9.5px;letter-spacing:.085em;
  text-transform:uppercase;border-top:1px solid currentColor;padding:6px 0 7px;
  display:flex;align-items:baseline;gap:5px;background:none;color:inherit!important;
  font-weight:400;line-height:1.25}
.cta::before{content:'';width:5px;height:5px;background:currentColor;flex:none;
  transform:translateY(-1px)}
.cta:hover{background:none}

/* `padding: 18px 0 0` remettait a zero le padding horizontal de .wrap et
   collait le fil d'Ariane au bord de l'ecran, seul element du site a le faire.
   padding-block ne touche que la verticale. */
.fil{font-family:var(--mono);font-size:10px;letter-spacing:.075em;
  text-transform:uppercase;color:var(--page-second);padding-block:20px 0}
.fil a{opacity:.8}.fil a:hover{opacity:1}

/* ----------------------------------------------------------------- sections */
main{display:block}
section{position:relative;padding-block:clamp(48px,5.6vw,104px)}
section>.wrap{position:relative;z-index:1}
section[data-fond]{background-color:var(--sec-fond);color:var(--sec-encre)}
[data-fond="papier"]{--sec-fond:var(--fond);--sec-encre:var(--encre);
  --page-encre:var(--encre);--page-second:var(--gris);--page-filet:rgba(25,24,23,.22)}
[data-fond="nuit"]{--sec-fond:var(--nuit);--sec-encre:var(--craie);
  --page-encre:var(--craie);--page-second:var(--gris_clair);--page-filet:rgba(239,237,231,.2)}
[data-fond="flood"]{--sec-fond:var(--flood);--sec-encre:var(--craie);
  --page-encre:var(--craie);--page-second:var(--azur);--page-filet:rgba(239,237,231,.26)}

/* -------------------------------------------------------------------- hero */
.hero{padding-top:clamp(22px,2.6vw,44px);padding-bottom:clamp(30px,3.4vw,58px)}
.hero .wrap{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));
  column-gap:var(--gout);row-gap:clamp(26px,3vw,44px);align-items:start}
.hero-txt{display:contents}
.kicker{grid-column:1/25;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--page-second);
  display:block;padding-bottom:clamp(14px,1.8vw,26px);
  border-bottom:1px solid var(--page-filet)}
.hero h1{grid-column:1/25}
.hero .chapo{grid-column:1/15;max-width:58ch}
.form{grid-column:16/25}
.hero .wrap>.form{align-self:start}

/* ------------------------------------------------------------------- prose */
/* Grille asymetrique (HOBRO) : le titre de section part de la marge, la colonne
   de texte est en retrait, le tableau et l'appareil de notes debordent a droite.
   Le :where() du filet de grille laisse ces regles-ci reprendre la main. */
.prose{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));
  column-gap:var(--gout)}
.prose > :where(*){grid-column:7/21}
.prose > h2{grid-column:1/22;margin:clamp(46px,5vw,96px) 0 clamp(18px,2.2vw,34px)}
.prose > :first-child{margin-top:0}
.prose > h3{grid-column:7/21;margin:2.1em 0 .7em}
.prose > h4{grid-column:7/21;margin:1.8em 0 .5em}
.prose > p,.prose > ul,.prose > ol{max-width:var(--mesure)}
.prose > ul,.prose > ol{margin:0 0 1.1em;padding:0 0 0 1.15em}
.prose li{margin-bottom:.4em}
.prose > .tableau{grid-column:7/25;max-width:none}
.prose > ul.notes{grid-column:7/25;max-width:none}
.prose > blockquote{grid-column:3/22;margin:clamp(30px,3.4vw,54px) 0;
  padding:0 0 0 clamp(18px,2vw,34px);border-left:1px solid var(--page-filet)}
.prose a{color:var(--c_texte);text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 1.06em;
  padding-bottom:.06em;transition:background-size .38s var(--sortie)}
.prose a:hover,.prose a:focus-visible{background-size:0% 1px;background-position:100% 1.06em}
[data-fond="nuit"] .prose a,[data-fond="flood"] .prose a{color:var(--azur)}
.sub{color:var(--page-second);max-width:74ch}
.src{font-size:12px;color:var(--page-second);margin-top:14px;line-height:1.5}

/* ---------------------------------------------------------------- tableaux */
/* Releve §13 : un bareme n'est pas rendu comme un tableau a bordures. Deux
   filets forts, un filet de 1 px entre les rangees, aucune boite.
   BUG CORRIGE : le socle posait `table.rep td{font-family:var(--mono)}`, qui
   rendait TOUTES les cellules en chiffres — libelles compris. Seules les
   cellules numeriques (th.n / td.n) et la derniere colonne le sont. */
.tableau{overflow-x:auto}
table.rep{width:100%;border-collapse:collapse;background:none;border:0;
  border-top:2px solid var(--page-encre);border-bottom:2px solid var(--page-encre)}
table.rep th,table.rep td{text-align:left;padding:11px 16px 10px 0;
  border-bottom:1px solid var(--page-filet);font-size:14.5px;vertical-align:baseline}
table.rep thead th{font-family:var(--mono);font-size:10px;letter-spacing:.085em;
  text-transform:uppercase;font-weight:400;color:var(--page-second);padding-bottom:9px}
table.rep tbody tr:last-child td{border-bottom:0}
table.rep td:first-child{width:auto}
table.rep th.n,table.rep td.n{text-align:right;font-family:var(--mono);
  font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12.5px;
  padding-right:0}
table.rep thead th.n{font-size:10px}

/* ------------------------------------------------------------------- index */
/* Oimachi : chaque entree est une bande pleine largeur, la seule separation est
   le filet. C'est le seul modele qui tient 157 entrees sans devenir une grille
   de cartes. Aucune carte : ni ombre, ni coin arrondi, ni fond de bloc. */
.grid{display:block}
.g2,.g3,.g4,.g6{display:block}
.index{border-top:1px solid var(--page-filet)}
a.puce{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  column-gap:var(--gout);align-items:baseline;background:none;border:0;
  border-bottom:1px solid var(--page-filet);padding:13px 0 12px;
  transition:padding-left .45s var(--sortie);position:relative}
a.puce:hover,a.puce:focus-visible{padding-left:clamp(5px,.8vw,14px);background:none}
a.puce .c{font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  color:var(--page-second)}
a.puce > span:last-child{font-size:15.5px;letter-spacing:-.008em;line-height:1.3}
a.puce::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--sortie)}
a.puce:hover::after,a.puce:focus-visible::after{transform:scaleX(1)}
.chips{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--page-filet)}
.chip{background:none;border:0;border-bottom:1px solid var(--page-filet);
  flex:1 1 clamp(180px,20%,320px);padding:11px 0 10px;font-size:14.5px}
.chip:hover{background:none;color:inherit}

/* --------------------------------------------------------------------- FAQ */
.faq details{border-top:1px solid var(--page-filet);padding:clamp(15px,1.8vw,24px) 0}
.faq details:last-child{border-bottom:1px solid var(--page-filet)}
.faq summary{cursor:pointer;list-style:none;display:grid;
  grid-template-columns:minmax(0,1fr) 22px;gap:var(--gout);align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--mono);font-size:14px;
  text-align:right;color:var(--page-second)}
.faq details[open] summary::after{content:'\2013'}
.faq details p{margin:12px 0 0;color:var(--page-second);max-width:64ch}

/* ------------------------------------------------------------------- bandeau CTA */
.bandeau-cta{background:var(--nuit);color:var(--craie)}
.bandeau-cta .wrap{padding-block:clamp(38px,4.4vw,72px);display:flex;
  justify-content:space-between;align-items:baseline;gap:30px;flex-wrap:wrap}
.bandeau-cta a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;border:1px solid currentColor;padding:14px 22px 13px;
  background:none;color:inherit}

/* -------------------------------------------------------------------- pied */
footer{background:var(--nuit);color:var(--craie);
  --page-encre:var(--craie);--page-second:var(--gris_clair);
  --page-filet:rgba(239,237,231,.2)}
footer .wrap{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));
  column-gap:var(--gout);padding-top:clamp(44px,5.2vw,92px);
  padding-bottom:clamp(20px,2.4vw,38px)}
footer .wrap > :where(*){grid-column:1/25}
footer .wrap > div:first-child{grid-column:1/25;margin-bottom:clamp(26px,3vw,48px)}
footer .wrap > div:first-child p{color:var(--gris_clair);max-width:52ch;
  font-size:14px;margin-top:clamp(14px,1.6vw,24px)}
footer .wrap > div:not(:first-child){grid-column:span 6;
  border-top:1px solid var(--page-filet);padding-top:11px}
footer h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;
  line-height:.94;padding-block:.14em .1em;
  text-transform:uppercase;color:var(--gris_clair);margin:0 0 10px;font-weight:400}
footer a{display:block;margin-bottom:7px;font-size:13.5px;color:var(--craie);
  transition:padding-left .4s var(--sortie)}
footer a:hover{padding-left:6px;color:var(--craie)}
.copy{border-top:1px solid var(--page-filet);font-family:var(--mono);font-size:9.5px;
  letter-spacing:.075em;text-transform:uppercase;color:var(--gris_clair)}
.copy .wrap{padding-block:13px;display:block}

/* -------------------------------------------------------------- formulaire */
/* Champs a filet bas : pas de boites empilees, aucune ombre, aucun coin
   arrondi — un formulaire qui a l'air d'un bon de commande. */
.form{background:none;color:inherit;padding:0;border:0;
  border-top:2px solid var(--page-encre);padding-top:clamp(18px,2vw,28px)}
.form h2{font-size:clamp(1.15rem,1.7vw,1.55rem);line-height:.94;
  letter-spacing:-.018em}
.form>p{font-size:13px;color:var(--page-second);margin:8px 0 0;max-width:46ch}
.form label{display:grid;gap:4px;font-family:var(--mono);font-size:10px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--page-second);
  margin-top:16px}
.form input,.form select,.form textarea{padding:8px 0;border:0;
  border-bottom:1px solid var(--page-encre);background:transparent;
  font-family:var(--texte);font-weight:350;font-size:15.5px;width:100%;
  color:var(--page-encre);letter-spacing:0;text-transform:none;border-radius:0}
.form select{font-family:var(--texte)}
.form textarea{resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;
  border-bottom-color:var(--c_texte);box-shadow:0 1px 0 0 var(--c_texte)}
.form button{margin-top:20px;width:100%;background:none;color:inherit;
  border:1px solid currentColor;padding:14px;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;position:relative;
  overflow:hidden;isolation:isolate;border-radius:0}
.form button::before{content:'';position:absolute;inset:0;z-index:-1;
  background:currentColor;transform:scaleY(0);transform-origin:bottom;
  transition:transform .45s var(--sortie)}
.form button:hover::before,.form button:focus-visible::before{transform:scaleY(1)}
.form button:hover,.form button:focus-visible{color:var(--sec-fond,var(--fond))}
.form .legal{font-size:11px;color:var(--page-second);margin-top:12px;line-height:1.45}
.form-sub{font-size:13px;color:var(--page-second);margin:8px 0 0;max-width:46ch}
.pas-titre{margin:0 0 6px}
/* Un bouton qui n'est pas un bouton : aucune boite, le texte seul. Il etait pose
   en style en ligne, donc invisible a la charte et impossible a rethemer. */
.lien-nu{border:0;background:none;padding:0;text-align:left;cursor:pointer;
  color:var(--c_texte);font:inherit}
/* La page 404 : centree, sans style en ligne — la borne de taille du h1 est
   celle de la charte, mesuree sur le corpus. */
.p404 .wrap{text-align:center;padding-block:clamp(52px,7vw,120px)}
.p404 .sub{margin-inline:auto}
.p404 .chips{justify-content:center}
.form .etapes{display:flex;gap:5px;margin:16px 0 2px}
.form .etapes i{flex:1;height:2px;background:var(--page-filet);font-style:normal}
.form .etapes i.on{background:var(--c_texte)}
.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{margin-top:8px}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------- revelation au defilement */
/* Releve §20 : par clip-path, jamais par opacity. Le calc() fait deborder le
   voile de 2 px pour supprimer le liseré d'anticrenelage (ERA Residence).
   `html.sans-js` et `prefers-reduced-motion` ouvrent tout : aucun texte de ce
   site ne peut rester invisible du fait de cette regle. */
.rev{clip-path:inset(0 0 calc(100% + 2px) 0);transform:translateY(13px);
  transition:clip-path 1.02s var(--sortie),transform 1.02s var(--sortie);
  transition-delay:calc(var(--i,0) * 64ms)}
.rev.vu{clip-path:inset(0);transform:none}
.rev-d{clip-path:inset(0 0 calc(100% + 2px) calc(100% + 2px));
  transition:clip-path 1.15s var(--sortie);transition-delay:calc(var(--i,0) * 64ms)}
.rev-d.vu{clip-path:inset(0)}
html.sans-js .rev,html.sans-js .rev-d{clip-path:none;transform:none}

/* ------------------------------------------------------------- responsive */
@media(max-width:1080px){
  .hero .chapo{grid-column:1/19}
  .form{grid-column:1/19}
  .prose > :where(*){grid-column:6/25}
  .prose > h2{grid-column:1/25}
  .prose > h3,.prose > h4{grid-column:6/25}
  .prose > .tableau,.prose > ul.notes{grid-column:6/25}
  .prose > blockquote{grid-column:2/25}
  footer .wrap > div:not(:first-child){grid-column:span 12}
}
@media(max-width:760px){
  :root{--gout:10px}
  /* en petit ecran l'en-tete reste dans le flux et ne se replie pas : trois
     rangees de navigation collantes mangeraient un tiers de l'ecran. */
  #chrome{position:static}
  #chrome.replie{transform:none}
  .bandeau{grid-template-columns:repeat(12,minmax(0,1fr))}
  .bandeau>.mono{grid-column:1/13}
  .bandeau>span:last-child{grid-column:1/13;text-align:left}
  header .wrap{grid-template-columns:repeat(12,minmax(0,1fr))}
  .logo{grid-column:1/13;padding-bottom:9px}
  nav{grid-column:1/13;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:4px}
  nav a,.cta{font-size:8.5px;letter-spacing:.055em}
  .hero .wrap{grid-template-columns:repeat(12,minmax(0,1fr))}
  .kicker,.hero h1,.hero .chapo,.form{grid-column:1/13}
  .prose{grid-template-columns:repeat(12,minmax(0,1fr))}
  .prose > :where(*),.prose > h2,.prose > h3,.prose > h4,
  .prose > .tableau,.prose > ul.notes,.prose > blockquote{grid-column:1/13}
  .prose > blockquote{padding-left:16px}
  a.puce{grid-template-columns:minmax(0,1fr)}
  a.puce > span:last-child{grid-column:1;grid-row:1}
  a.puce .c{grid-column:1;grid-row:2;text-align:left;padding-top:4px}
  table.rep th,table.rep td{font-size:13.5px;padding-right:12px}
  footer .wrap{grid-template-columns:repeat(12,minmax(0,1fr))}
  footer .wrap > div:not(:first-child){grid-column:span 6}
  section{padding-block:clamp(44px,9vw,80px)}
}
@media(max-width:480px){
  footer .wrap > div:not(:first-child){grid-column:1/13}
}

/* ------------------------------------------------------- mouvement reduit */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important;
    transition-delay:0s!important;scroll-behavior:auto!important}
  .rev,.rev-d{clip-path:none!important;transform:none!important}
  #chrome{transform:none!important}
}
/* =========================================================================
   agence-de-communication-pau.fr — couche d'identite  (v4)
   -------------------------------------------------------------------------
   Portage de proto/accueil-3-mouvements.html dans le moteur. Ce que la
   maquette impose, et qui doit sortir d'ici :

   1. AUCUNE CARTE. Zero box-shadow, zero border-radius sur un bloc de
      contenu. Le seul separateur est un filet de 1 px pose sur la grille de
      24 colonnes, avec six sous-grilles asymetriques choisies section par
      section. Aucune des 27 references relevees n'a de carte : BASIC/DEPT
      compte 268 declarations grid-column et zero carte.
   2. UN TITRE NE COUPE JAMAIS UN MOT, et aucun titre ne passe au-dessus de
      0,94 d'interlignage — h1 a 0,80, titres de section a 0,88. Sous 0,94,
      l'accent d'une capitale de deuxieme ligne percute la ligne precedente :
      d'ou `padding-block` sur les titres, et AUCUN `overflow: clip` sur un
      ancetre de titre.
   3. LE TITRE BI-REGISTRE JUSTIFIE est la marque du site. Deux instances de
      la meme fonte variable en alternance mot a mot, ligne justifiee pleine
      largeur. Dix-neuf lignes de CSS, aucun JavaScript, actif sur les 168
      pages. Le pilotage d'axe au defilement n'est qu'un effet, et il ne
      vient que sur onze d'entre elles.
   4. AUCUNE ICONE. Les sept references du lot agence n'en ont zero sur sept
      (notes/12-icones.md). On numerote, on ne signale pas.

   Les noms de jetons du moteur (--encre, --fond, --accent, --titre, --t-17,
   --e-4, --filet) sont conserves : outils.CSS et le quiz sont ecrits avec, et
   ils sont concatenes APRES cette feuille. Les remapper ici suffit a faire
   passer les calculateurs et les quiz a la charte v4 sans les reecrire.
   ========================================================================= */

:root{
  /* ---- echelle typographique ------------------------------------------
     La borne haute du h1 est MESUREE, pas estimee : elle vient du mot le
     plus large du corpus — « Pyrenees-Atlantiques », 20 caracteres, a
     wdth 142 — pose dans la colonne a 1440 px puis a 390 px. C'est ce
     controle-la qui a attrape le defaut de la v1.                        */
  --t-10:10px;  --t-11:11px;  --t-12:12px;  --t-13:13.5px; --t-15:15px;
  --t-17:16.5px; --t-19:19px; --t-20:20px;  --t-21:21px;  --t-24:24px;  --t-27:27px;
  --t-34:34px;  --t-44:44px;  --t-58:58px;
  --t-h1:clamp(2.05rem,7.2vw,8.4rem);      /* Anybody bi-registre, plafond haut :
     c'est la borne mesuree par page (--h1em) qui redescend quand il le faut */
  --t-h2:clamp(1.85rem,3.9vw,3.7rem);      /* titre de section          */
  --t-h2p:clamp(1.6rem,2.8vw,2.85rem);     /* intertitre de prose       */
  --t-h3:clamp(1.05rem,1.4vw,1.34rem);
  --t-logo:clamp(1.7rem,8.4vw,7.6rem);

  /* ---- instances nommees ----------------------------------------------
     Releve §9 : les axes variables sont des STYLES NOMMES, pas une
     animation. Cinq instances fixes constituent le guide de marque ;
     l'animation d'axe du niveau fort part de ces instances et y revient. */
  --i-large:'wdth' 142,'wght' 250;   /* titre, coupe large et maigre */
  --i-etroit:'wdth' 66,'wght' 850;   /* titre, coupe etroite et grasse */
  --i-sect:'wdth' 118,'wght' 320;    /* titres de section */
  --i-rang:'wdth' 96,'wght' 560;     /* rangees d'index */
  --i-mono:'wdth' 80,'wght' 400;     /* metadonnees */

  /* ---- rythme ---------------------------------------------------------- */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:20px; --e-5:28px;
  --e-6:44px; --e-7:64px; --e-8:96px; --e-9:132px;
  --mesure:68ch;
  --filet:1px solid var(--page-filet);
  --filet-sombre:1px solid var(--encre_douce);
  --sortie:cubic-bezier(.22,1,.36,1);
  --vite:.18s var(--sortie);
  --lent:.34s var(--sortie);
}

/* ------------------------------------------------------------------ socle */
body{font-size:clamp(15px,.5vw + 13.4px,17.5px);font-weight:350;line-height:1.58}
/* Onest en 350, pas 400 : la valeur intermediaire est ce que fait Linear
   (Inter en 510) et ca se voit. */
strong,b{font-weight:600}
.mono,.eti,.num{font-family:var(--mono);font-variation-settings:var(--i-mono)}

/* ————————————————————————— titrage ————————————————————————— */
/* Interlignage : h1 0,80 · titres de section 0,88 · h3 0,94 · jamais plus.
   Interlettrage : plus c'est gros, plus on serre ; plus c'est petit, plus on
   espace (releve §6). */
h1,h2,h3,h4{font-variation-settings:var(--i-sect);font-weight:400;
  text-wrap:balance;hyphens:none;-webkit-hyphens:none;
  overflow-wrap:normal;word-break:normal}

/* --- le geste : titre bi-registre justifie (Signal-A, mecanisme 1) --- */
.hero h1{
  /* La taille est le PLUS PETIT de deux plafonds : le clamp general, et la
     largeur que le mot le plus large de CETTE page autorise. `--h1em` est sa
     largeur mesuree, en em, a l'instance qu'il recevra vraiment — calculee au
     build a partir des chasses reelles d'Anybody (assets/metriques-titrage.json),
     pas d'un nombre de caracteres : entre un W et un I le rapport est de quatre
     pour un. Le facteur 0,955 couvre la barre de defilement, que 100vw compte
     alors que la colonne ne l'a pas, et le crenage ignore par le calcul. */
  font-size:min(var(--t-h1),
                calc((100vw - 2 * var(--marge)) * 0.955 / var(--h1em,17)));
  line-height:.80;
  letter-spacing:-.03em;
  text-transform:uppercase;
  /* padding-block : a 0,80 d'interlignage, l'accent d'une capitale de
     deuxieme ligne sort de la boite. Le padding le rattrape SANS toucher a
     l'interlignage, et il n'y a nulle part d'overflow:clip pour le couper. */
  padding-block:.1em .06em;
  margin:0 0 clamp(18px,2.4vw,38px);
}
.hero h1 .m{display:inline-block;white-space:nowrap}
.hero h1 .large{font-variation-settings:var(--i-large)}
.hero h1 .etroit{font-variation-settings:var(--i-etroit)}
/* La justification n'est posee qu'a partir de quatre mots : justifier deux mots
   colle un mot a chaque bord et creuse un trou au milieu.
   Et la DERNIERE ligne n'est justifiee que pour un titre court, de quatre a six
   mots — ceux qui tiennent sur une ou deux lignes, donc dont la derniere ligne
   est pleine. Au-dela, la derniere ligne est un reste : « de A a Z » etale sur
   1 350 px n'est pas un geste, c'est un accident. */
.hero h1{text-align:justify;text-align-last:left}
.hero h1[data-mots="4"],.hero h1[data-mots="5"],.hero h1[data-mots="6"]{
  text-align-last:justify}
.hero h1[data-mots="1"],.hero h1[data-mots="2"],.hero h1[data-mots="3"]{
  text-align:left}

.kicker{padding-bottom:clamp(12px,1.6vw,22px);color:var(--page-encre)}
/* Le fil d'Ariane et le sur-titre sont tous deux en mono capitales : sans cet
   ecart ils se lisent comme un seul pave de quatre lignes. */
.fil + main .hero{padding-top:clamp(30px,3.6vw,60px)}
.hero .chapo{font-size:clamp(1rem,1.2vw,1.3rem);line-height:1.42;
  letter-spacing:-.006em;font-weight:350}

/* --- titres de section : 0,88, et un filet qui traverse --- */
h1.sec,.prose > h1,h2.sec,.prose > h2{
  font-variation-settings:var(--i-sect);
  font-size:var(--t-h2);
  line-height:.88;
  letter-spacing:-.026em;
  text-transform:uppercase;
  padding-block:.08em .04em;
}
h1.sec,h2.sec{margin:0 0 clamp(12px,1.6vw,22px)}
.prose > h1{border-top:0;padding-top:0;margin:0 0 clamp(16px,2vw,30px)}
.prose > h2{border-top:var(--filet);padding-top:clamp(16px,2vw,30px)}
.prose > h2:first-child{border-top:0;padding-top:0}
.prose > h3{
  font-variation-settings:'wdth' 104,'wght' 500;
  font-size:var(--t-h3);line-height:.94;letter-spacing:-.014em;
  padding-block:.06em .02em;
}
.prose > h4{
  font-family:var(--mono);font-variation-settings:'wdth' 78,'wght' 500;
  font-size:var(--t-11);line-height:1.3;letter-spacing:.11em;
  text-transform:uppercase;color:var(--page-second);
}
p.sub{font-size:var(--t-15);color:var(--page-second);max-width:72ch;
  margin:0 0 clamp(22px,2.8vw,40px)}

/* libelles : petit, capitales, chasse resserree, interlettrage positif */
.eti,.kicker,.fil,.copy,footer h4{
  font-family:var(--mono);font-variation-settings:var(--i-mono);
  font-weight:400;letter-spacing:.085em;text-transform:uppercase}
.eti{font-size:11px;line-height:1.3;color:var(--page-second)}
.eti--pt::after{content:'.'}
.num{font-variation-settings:'wdth' 78,'wght' 300;letter-spacing:.02em;
  font-variant-numeric:tabular-nums}

/* ————————————————————————— chrome ————————————————————————— */
.logo b{font-variation-settings:'wdth' 72,'wght' 800;line-height:1;
  word-spacing:.16em}
.logo span{font-variation-settings:'wdth' 78,'wght' 300}
.fil{font-size:10px;letter-spacing:.075em}

/* ————————————————————————— prose ————————————————————————— */
/* Le premier paragraphe d'une section est un chapo : un changement d'echelle
   ouvre le texte au lieu d'un filet de plus. */
.prose > h2 + p{font-size:clamp(1rem,1.12vw,1.16rem);line-height:1.5;
  color:var(--page-encre)}
.prose > p,.prose > ul,.prose > ol{font-size:var(--t-17);line-height:1.62}
.prose > ul{list-style:none;padding-left:0}
.prose > ul > li{position:relative;padding-left:22px}
.prose > ul > li::before{content:'';position:absolute;left:0;top:.62em;
  width:9px;height:1px;background:currentColor;opacity:.55}

/* Liste numerotee : la sequence de methode. Numero en marge, en chasse tres
   etroite (ERA Residence) ; elle sort de la colonne de texte. */
.prose > ol{list-style:none;counter-reset:etape;padding-left:0;
  margin:clamp(22px,2.6vw,38px) 0}
/* Le numero est POSITIONNE, pas mis en grille. Une grille sur le <li> place
   ses enfants un par un : le <strong> du debut tombait en colonne 2 et le
   noeud de texte qui suit — un element de grille anonyme — repartait en
   colonne 1, dans 90 px de large, une lettre par ligne. Le rendu l'a montre
   sur les six etapes de la page mere impression. En absolu, le texte reste du
   texte en flux. */
.prose > ol > li{
  counter-increment:etape;position:relative;margin:0;
  border-top:var(--filet);
  padding:clamp(13px,1.6vw,22px) 0 clamp(13px,1.6vw,22px) clamp(56px,7vw,124px);
}
.prose > ol > li:last-child{border-bottom:var(--filet)}
.prose > ol > li::before{
  content:counter(etape,decimal-leading-zero);
  position:absolute;left:0;top:clamp(11px,1.4vw,18px);
  font-family:var(--titre);font-variation-settings:'wdth' 72,'wght' 250;
  font-size:clamp(1.55rem,3.4vw,3.2rem);line-height:.82;letter-spacing:-.03em;
  color:var(--page-second);
}

/* Citation : le filet occupe la gouttiere, le texte est compose en Anybody. */
.prose > blockquote p{font-family:var(--titre);
  font-variation-settings:'wdth' 112,'wght' 380;
  font-size:clamp(1.25rem,2.1vw,2rem);line-height:1.1;letter-spacing:-.024em;
  padding-block:.06em;max-width:26ch;margin:0}

/* Appareil de notes : la liste qui suit un titre « Sources » ou « Notes ».
   BUG CORRIGE (reporte du prototype) : la puce ::before gardait
   `width/height/background` de la puce de liste, et affichait un carre plein a
   la place du numero. width/height a `auto`, background a `none`. */
.prose > ul.notes{list-style:none;counter-reset:note;padding:clamp(16px,2vw,26px) 0 0;
  margin:clamp(22px,2.6vw,38px) 0 0;border-top:var(--filet);
  columns:2;column-gap:calc(var(--gout) * 2)}
.prose > ul.notes > li{break-inside:avoid;position:relative;
  padding:0 0 var(--e-3) 26px;margin:0;font-size:var(--t-13);line-height:1.5;
  color:var(--page-second)}
.prose > ul.notes > li::before{
  counter-increment:note;content:counter(note,decimal-leading-zero);
  position:absolute;left:0;top:.14em;
  width:auto;height:auto;background:none;opacity:1;
  font-family:var(--mono);font-variation-settings:'wdth' 78,'wght' 400;
  font-size:var(--t-10);letter-spacing:.06em;color:var(--c_texte)}

/* Signature d'auteur */
.sig,.prose > p.mono{font-family:var(--mono)!important;
  font-variation-settings:var(--i-mono);
  font-size:var(--t-11)!important;letter-spacing:.11em;text-transform:uppercase;
  color:var(--page-second)!important;
  margin:0 0 clamp(26px,3vw,44px);padding-bottom:var(--e-3);
  border-bottom:var(--filet)}
.sig a,.prose > p.mono a{color:var(--c_texte)}

/* ————————————————————————— emplacements photo —————————————————————————
   Bandes pleine largeur, dimensionnees au format de livraison
   (notes/11-direction-photo.md §1). Les seize visuels n'existent pas encore.
   Tant qu'un fichier manque, la bande est rendue ICI, en CSS : quatre ecrans
   de points aux angles de la quadrichromie (C 15°, M 75°, J 0°, N 45° — leur
   superposition fait la rosette), une gradation qui va du dense au voile,
   trois croix de reperage.

   Ce n'est ni un rectangle gris ni un panneau « image manquante ». Un visiteur
   y voit une trame d'imprimerie — le sujet meme du site, dont la requete la
   plus recherchee du bassin est « imprimeur pau » — et notes/12-icones.md §4 en
   fait le langage graphique de la maison : des dessins d'auteur, aucune
   licence, aucune attribution, aucune empreinte partagee avec les autres sites
   du portefeuille. L'appareil complet du bon a tirer (cote, specification,
   gamme densitometrique) reste disponible sous
   `design.mouvement.bons_a_tirer` : c'est l'ecran de travail de la generation,
   pas celui du visiteur.

   Aucune carte : ni ombre, ni coin arrondi, ni fond de bloc. Les seuls
   arrondis du site sont le cercle des croix de reperage, le point de la page
   courante dans la navigation et le curseur — des marques graphiques, pas des
   blocs de contenu. */
.vue{margin:0;position:relative;z-index:1;
  background-color:var(--sec-fond);color:var(--sec-encre)}
.vue.rev{transform:none}          /* pas de translation sur une bande pleine largeur */
.vue-cadre{position:relative;overflow:hidden;aspect-ratio:var(--ar,24/7);
  border-top:var(--filet);border-bottom:var(--filet);background:var(--craie)}
.vue-cadre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* le plan deborde du cadre : c'est cette reserve que consomment la parallaxe et
   le recadrage du niveau fort. */
.vue-plan{position:absolute;inset:-9% 0;transform:scale(1.055);
  transition:transform 1.5s var(--sortie);
  -webkit-mask-image:linear-gradient(var(--ang,102deg),#000 0%,rgba(0,0,0,.92) 22%,rgba(0,0,0,.52) 54%,rgba(0,0,0,.14) 82%,transparent 100%);
          mask-image:linear-gradient(var(--ang,102deg),#000 0%,rgba(0,0,0,.92) 22%,rgba(0,0,0,.52) 54%,rgba(0,0,0,.14) 82%,transparent 100%)}
.vue.vu .vue-plan{transform:scale(1)}
/* Les quatre ecrans de points. La rosette vient des ANGLES (C 15°, M 75°,
   J 0°, N 45°) et du decalage d'origine de chaque ecran, pas d'un masque par
   encre : un masque radial se ferme, et sa fin dessinait une arete droite en
   plein milieu de la bande — une diagonale nette dans une trame, ca ne pardonne
   pas. Toute la gradation est portee par le masque LINEAIRE de .vue-plan, qui
   n'a pas de forme fermee et ne peut donc pas produire de bord. */
/* Chaque ecran est un rectangle qu'on FAIT TOURNER, et un rectangle tourne
   laisse ses coins vides. Agrandir le rectangle ne suffit pas : a 75° un
   rectangle tres large et bas ne couvre toujours pas les coins du cadre, et il
   restait une bande verticale sans magenta. On le rend donc CARRE et plus large
   que la diagonale du cadre — un carre tourne autour de son centre couvre le
   meme disque quel que soit l'angle, la question ne se repose plus. */
.vt{position:absolute;inset:0;pointer-events:none}
.vt i{position:absolute;left:50%;top:50%;display:block;
  width:172%;aspect-ratio:1;height:auto;
  background-image:radial-gradient(circle at 50% 50%,currentColor 0 36%,transparent 37%);
  background-size:var(--pas,7px) var(--pas,7px);
  background-position:var(--px,0) var(--py,0);
  transform:translate(-50%,-50%) rotate(var(--a,0deg));mix-blend-mode:multiply}
.vt .c{color:var(--enc_c);opacity:var(--oc,.60);--a:15deg;--pas:7px;--px:0;--py:0}
.vt .m{color:var(--enc_m);opacity:var(--om,.42);--a:75deg;--pas:8px;--px:3px;--py:2px}
.vt .j{color:var(--enc_j);opacity:var(--oj,.48);--a:0deg;--pas:8px;--px:2px;--py:5px}
.vt .n{color:var(--enc_n);opacity:var(--on,.34);--a:45deg;--pas:7px;--px:4px;--py:3px}
/* Couche grossiere dans l'encre dominante : c'est l'ecart entre deux tailles de
   point qui fait lire un modele plutot qu'un aplat trame. */
.vt .x{color:var(--dom,var(--enc_n));opacity:.40;--a:45deg;--pas:17px;--px:6px;--py:9px;
  background-image:radial-gradient(circle at 50% 50%,currentColor 0 40%,transparent 41%)}
/* croix de reperage : marque graphique posee sur la feuille. Elle ne bouge pas
   avec l'image — sur un bon a tirer les reperes appartiennent a la feuille. */
.vue-cx{position:absolute;width:22px;height:22px;z-index:3;left:var(--x);top:var(--y);
  transform:translate(-50%,-50%);opacity:.42;color:var(--enc_n);
  background:linear-gradient(currentColor,currentColor) 50% 0/1px 100% no-repeat,
             linear-gradient(currentColor,currentColor) 0 50%/100% 1px no-repeat}
.vue-cx::after{content:'';position:absolute;inset:5px;border:1px solid currentColor;
  border-radius:50%}
.vue-leg{padding:9px 0 0;color:var(--page-second);max-width:82ch}
.vue > .vue-leg{padding-inline:var(--marge)}
/* l'appareil du bon a tirer — mode travail seulement */
.vue-pied{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;
  align-items:stretch;gap:clamp(12px,2vw,40px);background:var(--craie);
  border-top:1px solid rgba(25,24,23,.30);
  padding:clamp(6px,.72vw,11px) clamp(10px,1.7vw,30px)}
.vue-gamme{display:flex;align-self:stretch;width:clamp(120px,20%,300px);
  margin-left:auto;flex:none}
.vue-gamme i{flex:1 1 0;display:block;background:var(--k)}
.vue-spec{margin:0;font-family:var(--mono);font-variation-settings:'wdth' 76,'wght' 400;
  font-size:clamp(8px,.68vw,10px);line-height:1.62;letter-spacing:.105em;
  text-transform:uppercase;color:var(--encre);min-width:0}
.vue-spec b{font-weight:400;font-variation-settings:'wdth' 76,'wght' 700;
  color:var(--m_texte)}
.vue-spec span{display:block;color:var(--gris)}
.vue-cote{position:absolute;z-index:3;right:clamp(10px,1.7vw,30px);
  bottom:clamp(34px,4.2vw,70px);font-family:var(--titre);
  font-variation-settings:'wdth' 58,'wght' 800;
  font-size:clamp(3.2rem,12vw,12.5rem);line-height:.76;letter-spacing:-.035em;
  color:var(--c_texte);opacity:.78;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:2px var(--c_texte)}
.vue--mince .vue-cote{font-size:clamp(1.5rem,3.6vw,3.9rem);bottom:auto;
  top:clamp(5px,.8vw,12px);-webkit-text-stroke-width:1.3px}
.vue--mince .vue-spec span:last-child{display:none}

/* ————————————————————————— index et rangees ————————————————————————— */
/* Oimachi : chaque entree est une bande pleine largeur, numerotee, la seule
   separation est le filet. BASIC/DEPT : la description est plus petite que le
   nom, en capitales grises, elle se lit comme une legende. */
/* BASIC/DEPT : le nom d'abord, en grand ; la categorie a droite, plus petite,
   en capitales grises — elle se lit comme une legende. Le moteur emet la
   categorie EN PREMIER dans le DOM ; on la replace par la grille, sans toucher
   a l'ordre de lecture d'un lecteur d'ecran. Sans ce placement, la categorie
   « Impression & supports imprimes » se comprimait dans 56 px et sortait sur
   quatre lignes a cote du titre. */
a.puce > span:last-child{grid-column:1;grid-row:1;
  font-variation-settings:'wdth' 100,'wght' 400}
a.puce .c{grid-column:2;grid-row:1;text-align:right;
  font-variation-settings:'wdth' 78,'wght' 300;font-size:10px;line-height:1.5;
  padding-top:.3em}
.chip{font-weight:350}

/* --------------------------------------------------------------- tableaux */
table.rep thead th{font-variation-settings:'wdth' 78,'wght' 500}
table.rep td strong{font-weight:600}

/* -------------------------------------------------------------------- FAQ */
.faq summary{font-variation-settings:'wdth' 108,'wght' 400;font-family:var(--titre);
  font-size:clamp(1.05rem,1.55vw,1.42rem);line-height:.94;letter-spacing:-.018em;
  padding-block:.06em}
.faq details p{font-size:var(--t-15);line-height:1.58}

/* -------------------------------------------------------------------- pied */
/* Love and Money : le logotype occupe toute la largeur, justifie. */
.logotype{display:block;font-family:var(--titre);
  font-variation-settings:'wdth' 62,'wght' 800;
  font-size:var(--t-logo);line-height:.84;letter-spacing:-.018em;
  text-transform:uppercase;padding-block:.08em .04em;
  text-align:justify;text-align-last:justify;hyphens:none}
.logotype .m{display:inline-block;white-space:nowrap}
.logotype[data-mots="1"],.logotype[data-mots="2"]{text-align:left;text-align-last:left}
.logotype .large{font-variation-settings:'wdth' 88,'wght' 300}
.logotype .etroit{font-variation-settings:'wdth' 62,'wght' 800}

/* -------------------------------------------------------- outils et quiz */
/* outils.CSS est concatene apres cette feuille et ecrit avec les jetons du
   moteur : il suffit de les avoir remappes plus haut. Restent les trois
   endroits ou il pose une famille ou une graisse qui n'existent plus telles
   quelles sur une fonte variable. */
.outil h2,.quiz h2{font-variation-settings:var(--i-sect);font-weight:400;
  font-size:clamp(1.5rem,2.5vw,2.3rem);line-height:.9;letter-spacing:-.024em;
  text-transform:uppercase;padding-block:.06em}
.outil h3{font-variation-settings:'wdth' 78,'wght' 500;letter-spacing:.12em}
.outil .ch input,.outil .ch select,.outil-res .v{font-variation-settings:'wdth' 78,'wght' 400}
.quiz .q{font-weight:600;font-size:var(--t-19)}
.outil,.quiz,.outil-res,.quiz .score{border-top-color:var(--page-encre)}
.outil .st{border-bottom-width:2px}

/* --------------------------------------------------------------- curseur */
#curseur{position:fixed;top:0;left:0;z-index:100;width:13px;height:13px;
  border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;
  opacity:0;transform:translate3d(-50px,-50px,0);
  transition:width .32s var(--sortie),height .32s var(--sortie),opacity .3s;
  will-change:transform}
#curseur.gros{width:58px;height:58px}

/* ------------------------------------------------------------- responsive */
@media(max-width:1080px){
  .prose > ul.notes{columns:1}
}
@media(max-width:760px){
  /* La chasse large ne tient pas en 390 px : instance intermediaire, pas de
     justification, et les mots redeviennent coupables a l'espace. C'est le
     seul reglage qui fait tenir « Pyrenees-Atlantiques » et
     « Oloron-Sainte-Marie » dans 358 px de colonne utile. */
  .hero h1{font-size:min(clamp(1.6rem,7.6vw,3.6rem),
                         calc((100vw - 2 * var(--marge)) * 0.955 / var(--h1emm,11)));
    line-height:.86;
    letter-spacing:-.022em;text-align:left;text-align-last:left}
  .hero h1 .m{white-space:normal}
  .hero h1 .large{font-variation-settings:'wdth' 84,'wght' 280}
  .hero h1 .etroit{font-variation-settings:'wdth' 62,'wght' 830}
  h1.sec,.prose > h1,h2.sec,.prose > h2{font-size:clamp(1.45rem,6.4vw,2.2rem);
    line-height:.9;letter-spacing:-.02em}
  .logotype{font-size:clamp(1.5rem,7.6vw,2.7rem);text-align:left;
    text-align-last:left;line-height:.88}
  .logotype .m{white-space:normal}
  .logotype .large{font-variation-settings:'wdth' 80,'wght' 320}
  .prose > ol > li{padding-left:2.9rem}
  .prose > ol > li::before{font-size:clamp(1.2rem,5.4vw,1.8rem);top:1.05rem}
  .vue-cadre{aspect-ratio:var(--ar-m,3/2)}
  .vue-cote{font-size:clamp(1.8rem,10vw,3.2rem);-webkit-text-stroke-width:1px}
  .vue-spec{font-size:8.5px;letter-spacing:.07em;max-width:74%}
  .prose > ul.notes{columns:1}
}

/* ------------------------------------------------------- mouvement reduit */
@media(prefers-reduced-motion:reduce){
  .vue-plan{transform:none!important}
  #curseur{display:none!important}
}

/* page contact : le formulaire suit la mesure du texte, pas la largeur de la grille */
.contact-form{max-width:62ch;margin-top:var(--e-6,3rem)}

/* ------------------------------------------------------------------ outils */
.outil{border-top:2px solid var(--encre);padding-top:var(--e-5,28px);
  margin:var(--e-6,44px) 0 0}
.outil h2{font-family:var(--titre);font-weight:700;font-size:var(--t-27,27px);
  line-height:.94;letter-spacing:-.02em;margin:0 0 var(--e-2,8px)}
.outil h3{font-family:var(--mono);font-size:var(--t-11,11px);font-weight:400;
  line-height:.94;text-transform:uppercase;letter-spacing:.16em;color:var(--gris);
  margin:var(--e-5,28px) 0 var(--e-3,12px)}
.outil .sub{color:var(--gris);font-size:var(--t-15,15px);max-width:74ch;
  margin:0 0 var(--e-5,28px)}
.outil-onglets{display:flex;flex-wrap:wrap;border-bottom:var(--filet,1px solid #e0e0e6);
  margin-bottom:var(--e-5,28px);gap:0}
.outil-onglets button{background:none;border:0;border-bottom:2px solid transparent;
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.13em;
  font-size:var(--t-11,11px);padding:11px 16px 9px;color:var(--gris);cursor:pointer;
  border-radius:0}
.outil-onglets button[aria-selected="true"]{color:var(--encre);
  border-bottom-color:var(--encre)}
.outil-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));
  gap:var(--e-4,20px) var(--e-5,28px)}
.ch{display:grid;gap:5px;align-content:start;border-bottom:var(--filet,1px solid #e0e0e6);
  padding-bottom:var(--e-3,12px)}
.ch>label,.ch>legend{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gris);padding:0}
.ch input,.ch select{border:0;border-bottom:1px solid var(--encre);border-radius:0;
  background:transparent;font-family:var(--mono);font-size:var(--t-19,19px);
  padding:6px 0;width:100%;color:var(--encre);
  font-variant-numeric:tabular-nums lining-nums}
.ch select{font-family:var(--texte);font-size:var(--t-15,15px)}
.ch input[type=color]{padding:0;height:38px;cursor:pointer}
.ch .aide{font-size:var(--t-12,12px);color:var(--gris);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:var(--t-15,15px);padding:5px 0;text-transform:none;letter-spacing:0;
  font-family:var(--texte);color:var(--encre);cursor:pointer}
.ch .opt input{width:auto;border:0}
.outil-res{margin-top:var(--e-6,44px);border-top:2px solid var(--encre)}
.outil-res .lg{display:grid;grid-template-columns:1fr auto;gap:0 var(--e-4,20px);
  padding:12px 0;border-bottom:var(--filet,1px solid #e0e0e6);align-items:baseline}
.outil-res .lg--cle{border-bottom:2px solid var(--encre)}
.outil-res .lg--cle .v{font-size:var(--t-34,34px);line-height:.92}
.outil-res .lg--cle .k{font-weight:700}
.outil-res .k{font-size:var(--t-15,15px)}
.outil-res .k small{display:block;color:var(--gris);font-size:var(--t-12,12px);
  font-family:var(--texte);letter-spacing:0;text-transform:none;margin-top:3px;
  max-width:64ch;line-height:1.5}
.outil-res .v{font-family:var(--mono);font-size:var(--t-21,21px);text-align:right;
  white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.outil-res .v small{font-family:var(--texte);font-size:var(--t-12,12px);
  color:var(--gris)}
.outil-alerte{margin-top:var(--e-4,20px);padding-left:14px;
  border-left:3px solid var(--statut_veille,var(--accent));font-size:var(--t-15,15px)}
.outil-vide{color:var(--gris);font-size:var(--t-15,15px);padding:var(--e-4,20px) 0}
.outil-ech{display:block;margin-top:var(--e-4,20px)}
.outil-ech svg{display:block;max-width:100%;height:auto;border:0}
/* Statuts : la couleur ne porte jamais seule, le mot est ecrit a cote. */
.st{font-family:var(--mono);font-size:var(--t-12,12px);letter-spacing:.11em;
  text-transform:uppercase;white-space:nowrap;border-bottom:2px solid currentColor;
  padding-bottom:2px}
.st-oui{color:var(--statut_ok,var(--serie_2,#118197))}
.st-voir{color:var(--statut_veille,var(--accent))}
.st-non{color:var(--statut_perime,var(--serie_3,#6e0c2d))}
.src{display:block;font-family:var(--mono);font-size:var(--t-12,12px);color:var(--gris);
  margin-top:5px;letter-spacing:0;text-transform:none;white-space:normal;line-height:1.5}
.src a{color:var(--accent);text-decoration:underline}
.outil-conf{margin-top:var(--e-5,28px);padding-top:var(--e-3,12px);
  border-top:var(--filet,1px solid #e0e0e6);font-size:var(--t-13,13.5px);
  color:var(--gris);max-width:80ch}
@media(max-width:560px){
  .outil-res .lg{grid-template-columns:1fr;gap:2px}
  .outil-res .v{text-align:left}
  .outil-res .lg--cle .v{font-size:var(--t-27,27px)}
}
/* -------------------------------------------------------------------- quiz */
.quiz{border-top:2px solid var(--encre);margin:var(--e-7,64px) 0 var(--e-6,44px);
  padding-top:var(--e-4,20px)}
.quiz h2{font-family:var(--titre);font-weight:700;font-size:var(--t-27,27px);
  line-height:.94;letter-spacing:-.02em;margin:0 0 var(--e-2,8px)}
.quiz>p.sub{color:var(--gris);font-size:var(--t-15,15px);max-width:72ch;
  margin:0 0 var(--e-5,28px)}
.quiz ol.qs{list-style:none;margin:0;padding:0;counter-reset:q}
.quiz ol.qs>li{counter-increment:q;padding:var(--e-5,28px) 0;
  border-bottom:var(--filet,1px solid #e0e0e6)}
.quiz ol.qs>li::before{content:counter(q,decimal-leading-zero);font-family:var(--mono);
  font-size:var(--t-12,12px);color:var(--gris);display:block;margin-bottom:6px}
.quiz .q{font-weight:700;font-size:var(--t-19,19px);max-width:70ch;
  margin:0 0 var(--e-3,12px)}
.quiz .opt{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  padding:9px 0;border-bottom:var(--filet,1px solid #e0e0e6);cursor:pointer;
  font-size:var(--t-17,17px);max-width:70ch}
.quiz .opt:last-of-type{border-bottom:0}
.quiz .opt input{margin-top:6px}
.quiz .just{margin-top:var(--e-3,12px);padding-left:14px;
  border-left:3px solid var(--gris_clair);font-size:var(--t-15,15px);max-width:70ch}
.quiz .just.bon{border-left-color:var(--statut_ok,var(--serie_2,#118197))}
.quiz .just.autre{border-left-color:var(--statut_veille,var(--accent))}
.quiz .just p{margin:0 0 8px}
.quiz .just .renvoi{font-family:var(--mono);font-size:var(--t-12,12px);color:var(--gris)}
.quiz .just .renvoi a{color:var(--accent);text-decoration:underline}
.quiz .score{border-top:2px solid var(--encre);margin-top:var(--e-5,28px);
  padding-top:var(--e-4,20px);font-size:var(--t-17,17px);max-width:70ch;min-height:1px}
.quiz .score b{font-family:var(--mono);font-size:var(--t-21,21px)}
.quiz .sans-js{font-size:var(--t-15,15px);color:var(--gris)}
html:not(.sans-js) .quiz .sans-js{display:none}
html.sans-js .quiz .just{display:none}