/* ═══════════════════════════════════════════════════════════════
   harness.uniy.fr — feuille de style commune
   ───────────────────────────────────────────────────────────────
   Extraite le 25/08/2026 du bloc <style> de index.html, à l'octet
   près : la note de référence et la page 5 portaient exactement la
   même feuille (25 283 caractères, empreinte identique). Ce fichier
   met fin à la duplication.

   Elle sert désormais à toutes les pages du site : la note en
   sous-sol, et les sept pages du rez-de-chaussée sous /questions/.
   Une valeur ne se redécide jamais dans une page ; elle se change
   ici, et partout à la fois.

   Les fontes ne sont plus embarquées en base64 dans chaque page :
   elles sont servies depuis /fonts/ et mises en cache une fois pour
   toute la visite. Sept pages qui embarquaient les mêmes 57 Ko de
   base64 en réclamaient 400 ; il en reste 43, téléchargés une fois.

   Ce qui vient du socle uniÿ (arbitrages du 23/08/2026) est
   commenté sur place : --lecture:487px, --sceau:32px, la géométrie
   du tréma, le folio en Dortage. Ne pas y toucher sans repasser par
   le socle, sous peine de désaccorder les trois sites.
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/RobotoCondensed-Regular.woff2) format('woff2');}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/RobotoCondensed-Bold.woff2) format('woff2');}
@font-face{font-family:'Dortage';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/Dortage-Regular.woff2) format('woff2');}
@font-face{font-family:'Comfortaa uy';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/Comfortaa-uy-SemiBold.woff2) format('woff2');}
@font-face{font-family:'RHD uy';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/RedHatDisplay-uy-Medium.woff2) format('woff2');}
:root{
  --encre:#14161A;
  --jaune:#FFF600;
  --gris-acier:#646b75;
  --encre-douce:#3a3f47;
  --brume:#eef1f5;
  --blanc:#ffffff;
  --filet:#e4e7eb;
  --filet-appuye:#d6dae0;
  --max:1140px;
  /* Colonne de lecture — 487 px, soit 72 caractères RÉELS en Roboto
     Condensed 17 px (arbitrage du 23/08/2026, jeton du socle uniÿ).
     PIÈGE : ne jamais borner une colonne de texte en `ch` avec une
     coupe condensée. `ch` mesure le « 0 » (8,41 px ici) alors qu'un
     caractère de texte courant fait 6,76 px : le `70ch` d'ici portait
     87 caractères par ligne, contre 77 sur uniy.fr. La borne se pose
     en pixels. */
  --lecture:487px;
  /* Enseigne au bandeau — 32 px, jeton du socle uniÿ (arbitrage du
     23/08/2026). Elle valait ici 22 px, écrits en dur dans l'attribut
     style du SVG : un tiers plus petite que la référence, et invisible
     à toute relecture de la feuille de style. */
  --sceau:32px;
  --r:12px;
  --trema:var(--encre);
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-trace:cubic-bezier(.65,0,.35,1);
  --voix:"Roboto Condensed","Arial Narrow",system-ui,sans-serif;
  --util:"Roboto Condensed","Arial Narrow",ui-monospace,monospace;
  --touche:"Dortage","Roboto Condensed",sans-serif;
  --comfortaa:"Comfortaa uy","Roboto Condensed",sans-serif;
  --rhd:"RHD uy","Roboto Condensed",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--blanc);color:var(--encre);
  font-family:var(--voix);font-weight:400;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:focus-visible{outline:3px solid var(--encre);outline-offset:3px}
.bandeau :focus-visible,.bande :focus-visible{outline-color:var(--jaune)}

/* ── le mot de marque ───────────────────────────── */
/* géométrie reprise du socle uniÿ (global.css de uniy.fr) : les deux points
   sont posés sur le MOT, pas sur le y — left 1.778em, top .156em, .138em. */
.marque{position:relative;display:inline-block;line-height:1;
  font-family:var(--comfortaa);font-weight:600;font-style:normal;white-space:nowrap;
  vertical-align:baseline;color:var(--encre)}
/* le gris acier ne touche jamais le mot de marque : lettres et tréma restent solidaires */
.bandeau .marque,.hero-page .marque,.bande .marque{color:#e4e7eb}
.marque i{font-family:var(--rhd);font-weight:500;font-style:normal;font-size:1.083em}
.marque::after{content:"";position:absolute;left:1.778em;top:.156em;
  width:.138em;height:.138em;border-radius:50%;
  background:var(--trema);box-shadow:.186em 0 0 var(--trema)}

/* ── ossature ───────────────────────────────────── */
.cadre{max-width:var(--max);margin:0 auto;padding:0 28px}
.bandeau{position:sticky;top:0;z-index:60;background:rgba(20,22,26,.92);
  -webkit-backdrop-filter:saturate(1.2) blur(8px);backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.1);--trema:var(--jaune)}
.bandeau .cadre{display:flex;align-items:center;gap:22px;min-height:60px}
/* Enseigne : le wordmark, un filet, puis le second rang qui nomme ce
   qu'est ce site — une note de référence. Motif et proportions repris de
   cyber.ai (arbitrage du 23/08/2026, qui révise le parti « chacun selon
   sa nature » : le second rang nomme la NATURE du site, pas seulement un
   nom de programme ; seul uniy.fr, la maison, n'en porte pas). */
.bandeau .enseigne{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.bandeau .sceau{color:#fff;font-size:19px;line-height:1;text-decoration:none;flex:0 0 auto;display:block}
.bandeau .sceau svg{height:var(--sceau);width:auto;display:block}
.bandeau .barre{width:1px;height:24px;background:rgba(255,255,255,.25);flex:0 0 auto}
.bandeau .rubrique{line-height:1;flex:0 0 auto}
.bandeau .rubrique .nom{display:block;font-family:var(--voix);font-weight:700;font-size:18px;
  letter-spacing:-.025em;line-height:1.1;color:#fff}
.bandeau .rubrique .sous{display:block;font-family:var(--voix);font-size:11.5px;letter-spacing:.025em;
  line-height:1.2;color:#9aa1ab;margin-top:4px}
/* Sommaire. Ouvert dans le balisage : sans JavaScript, et pour les
   moteurs, les quatre entrées sont toujours là. Le script d'entrée le
   referme en dessous de 800 px, où il devient un dépliant — sinon le
   bandeau montait à quatre rangs et 162 px de haut (défaut introduit le
   23/08 en rendant la navigation visible en compact, DEC-P3-015). */
.bandeau .sommaire{margin-left:auto;flex:0 1 auto;min-width:0}
.bandeau .sommaire>summary{display:none}
.bandeau nav{display:flex;gap:2px;flex-wrap:wrap}
.bandeau nav a{font-family:var(--util);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:#fff;text-decoration:none;padding:6px 9px;border-radius:6px;position:relative;white-space:nowrap}
.bandeau nav a::after{content:"";position:absolute;left:9px;right:9px;bottom:1px;height:2px;
  background:var(--jaune);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--e-trace)}
.bandeau nav a:hover::after,.bandeau nav a:focus-visible::after{transform:scaleX(1)}
/* renvoi de constellation — motif canonique du socle, variante « sommaire
   de document » (arbitrage E : le sommaire de harness garde son échelle
   compacte, le renvoi s'y accorde). */
.bandeau a.sortant{font-family:var(--util);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;padding:6px 9px;border-radius:6px;position:relative;flex:0 0 auto;
  margin-left:8px;padding-left:17px;border-left:1px solid rgba(255,255,255,.2);color:#b9bfc8}
.bandeau a.sortant::after{content:"";position:absolute;left:17px;right:9px;bottom:1px;height:2px;
  background:var(--jaune);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--e-trace)}
.bandeau a.sortant:hover::after,.bandeau a.sortant:focus-visible::after{transform:scaleX(1)}
.bandeau a.sortant:hover,.bandeau a.sortant:focus-visible{color:#fff}

/* ── héros ──────────────────────────────────────── */
.hero-page{background:var(--encre);color:#fff;--trema:var(--jaune);
  padding:96px 0 88px;position:relative;overflow:hidden}
.hero-page .role{font-family:var(--touche);font-size:15px;letter-spacing:.06em;
  color:#e4e7eb;margin:0 0 22px}
.hero-page .role::before{content:"";display:inline-block;width:18px;height:3px;
  background:var(--jaune);vertical-align:4px;margin-right:13px}
.hero-page h1{font-family:var(--voix);font-weight:700;letter-spacing:-.022em;
  font-size:clamp(34px,5.6vw,62px);line-height:1.02;margin:0 0 26px;max-width:26ch}
.hero-page .chapeau{font-size:19.5px;line-height:1.55;color:#b9bfc8;max-width:var(--lecture);margin:0 0 34px}
.hero-page .chapeau strong{color:#fff;font-weight:700}
.cartouche-hero{display:flex;flex-wrap:wrap;gap:20px 44px;border-top:1px solid rgba(255,255,255,.13);
  padding-top:22px;max-width:820px}
.cartouche-hero div{font-family:var(--util);font-size:12.5px;line-height:1.5}
.cartouche-hero .k{display:block;color:#9aa1ab;letter-spacing:.14em;text-transform:uppercase;
  font-size:10.5px;margin-bottom:3px}
.cartouche-hero .v{color:#e4e7eb}

/* signature de titre — tuile paysage 74x32, tracé du socle uniÿ.
   Variante claire sur le héros encre, où la tuile encre serait invisible. */
.sig-uniy{display:inline-block;width:.92em;height:.4em;margin-left:.26em;vertical-align:.08em;
  flex:0 0 auto;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 32'%3E%3Crect width='74' height='32' rx='7' fill='%2314161A'/%3E%3Ccircle cx='26' cy='16' r='7.5' fill='%23FFF600'/%3E%3Ccircle cx='48' cy='16' r='7.5' fill='%23FFF600'/%3E%3C/svg%3E")}
.hero-page .sig-uniy,.bande .sig-uniy{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 32'%3E%3Crect width='74' height='32' rx='7' fill='%2322252b'/%3E%3Ccircle cx='26' cy='16' r='7.5' fill='%23FFF600'/%3E%3Ccircle cx='48' cy='16' r='7.5' fill='%23FFF600'/%3E%3C/svg%3E")}

/* ── héros à deux colonnes ──────────────────────────────────────
   Mesuré le 25/08/2026 sur les trois sites, à 1920 px : le cadre est
   partout à 1140 px, mais harness applique la colonne de lecture de
   487 px à TOUS ses paragraphes, là où cyber.ai laisse sa prose courir
   à 768 et 1084 px. Harness occupait donc 43 % de son cadre contre 67
   à 95 % pour les deux autres, et la page semblait flotter à gauche.
   Plutôt que d'élargir la prose, ce qui coûterait 113 signes par ligne
   au lieu de 72, on donne au héros un contrepoids à droite, comme le
   fait uniy.fr avec son schéma. Ici le contrepoids est le constat
   lui-même : les sept questions, visibles dès la première seconde. */
.hero-duo{display:grid;gap:44px 56px;align-items:start;
  grid-template-columns:minmax(0,var(--lecture)) minmax(0,1fr)}
.hero-dire{min-width:0}
.hero-dire .chapeau{margin-bottom:0}
.hero-duo+.cartouche-hero{margin-top:40px}
.hero-liste{min-width:0;border-top:1px solid rgba(255,255,255,.13);padding-top:18px}
.hero-liste .lbl{font-family:var(--util);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:#9aa1ab;margin:0 0 12px}
.hero-liste ol{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.hero-liste a{display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:baseline;
  padding:9px 11px;border-radius:6px;text-decoration:none;color:#e4e7eb}
.hero-liste a:hover,.hero-liste a:focus-visible{background:#22252b;color:#fff}
.hero-liste .n{font-family:var(--util);font-size:11px;letter-spacing:.12em;color:#9aa1ab}
.hero-liste a:hover .n,.hero-liste a:focus-visible .n{color:var(--jaune)}
.hero-liste .t{font-family:var(--touche);font-size:16.5px;letter-spacing:.01em;line-height:1.25}
@media (max-width:880px){.hero-duo{grid-template-columns:1fr;gap:32px}}

/* ── sections ───────────────────────────────────── */
.sec{padding:104px 0;border-top:1px solid var(--filet)}
.sec:first-of-type{border-top:0}
.sec.bande{background:var(--encre);color:#fff;border-top:0;--trema:var(--jaune)}
.sec.brume{background:var(--brume);border-top:0}
/* folio : touche Dortage 15,5 px, casse normale — grammaire de uniy.fr
   (arbitrage B du 23/08/2026). Remplace la composition Roboto Condensed
   en capitales de 11,5 px. */
.folio{display:flex;align-items:center;gap:12px;font-family:var(--touche);font-size:15.5px;
  letter-spacing:.01em;text-transform:none;color:var(--gris-acier);margin:0 0 36px}
.bande .folio{color:#9aa1ab}
.folio .tick{display:block;width:18px;height:3px;background:var(--jaune);flex:0 0 auto;
  transform-origin:left;transform:scaleX(0)}
.folio .nom{font-family:inherit;letter-spacing:inherit;text-transform:none;font-size:inherit;
  color:inherit}
h2{font-family:var(--voix);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(26px,3.4vw,38px);line-height:1.1;margin:0 0 20px;max-width:24ch}
h3{font-family:var(--voix);font-weight:700;letter-spacing:-.014em;font-size:20px;line-height:1.25;
  margin:44px 0 12px}
h4{font-family:var(--voix);font-weight:700;font-size:16px;margin:26px 0 8px;letter-spacing:-.008em}
p{margin:0 0 18px;max-width:var(--lecture);color:var(--encre-douce)}
.bande p{color:#b9bfc8}
p strong{font-weight:700;color:var(--encre)}
.bande p strong{color:#fff}
p.large{max-width:none}
.chapo{font-size:19px;line-height:1.56;color:var(--encre);max-width:var(--lecture)}
.bande .chapo{color:#fff}
.annot{font-family:var(--util);font-size:12.5px;line-height:1.55;color:var(--gris-acier);
  max-width:36ch;margin:0 0 26px}
.annot.large{max-width:var(--lecture)}
/* Accroche — formule courte remontée en tête de la note (27/08/2026).
   Le texte est repris mot pour mot de la section 02 : rien n'est
   affirmé en tête qui ne soit démontré plus bas. Une accroche qui
   annonce ce que le corps ne prouve pas est une promesse, pas une
   thèse. */
.accroche{font-family:var(--voix);font-weight:700;letter-spacing:-.014em;
  font-size:clamp(20px,2.2vw,24px);line-height:1.3;color:var(--encre);
  max-width:var(--lecture);margin:0 0 22px;padding-left:16px;
  border-left:4px solid var(--jaune)}
.bande .accroche{color:#fff}
.bande .annot{color:#9aa1ab}
em{font-style:italic}
code{font-family:var(--util);font-size:.9em;background:var(--brume);padding:.1em .34em;
  border-radius:4px;color:var(--encre);white-space:nowrap}
.bande code{background:rgba(255,255,255,.1);color:#e4e7eb}
a.lien{color:var(--encre);text-decoration:none;border-bottom:1px solid var(--filet-appuye);
  padding-bottom:1px}
a.lien:hover,a.lien:focus-visible{border-bottom-color:var(--jaune);border-bottom-width:2px}
.bande a.lien{color:#fff;border-bottom-color:rgba(255,255,255,.32)}

/* ── sommaire de page ───────────────────────────── */
/* Onze sections en grille sobre, dans la section 00. Le bandeau ne porte
   que les quatre parties du document ; la structure entière se donne ici
   une fois, au lecteur qui arrive comme aux moteurs. Pas de carte, pas
   d'ombre : un filet, une numérotation, deux niveaux de texte. */
.sommaire-page{margin:38px 0 6px;border-top:1px solid var(--filet);padding-top:22px}
.bande .sommaire-page{border-top-color:rgba(255,255,255,.13)}
.sommaire-page .lbl{font-family:var(--util);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gris-acier);margin:0 0 16px}
.sommaire-page ol{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.sommaire-page a{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;
  align-items:baseline;padding:9px 10px;border-radius:6px;text-decoration:none;color:var(--encre)}
.sommaire-page a:hover,.sommaire-page a:focus-visible{background:var(--brume)}
.brume .sommaire-page a:hover,.brume .sommaire-page a:focus-visible{background:var(--blanc)}
.bande .sommaire-page a{color:#fff}
.bande .sommaire-page a:hover,.bande .sommaire-page a:focus-visible{background:#22252b}
.sommaire-page .n{font-family:var(--util);font-size:11px;letter-spacing:.12em;
  color:var(--gris-acier);grid-row:span 2}
.sommaire-page a:hover .n,.sommaire-page a:focus-visible .n{color:var(--encre)}
.bande .sommaire-page a:hover .n{color:#fff}
.sommaire-page .t{font-family:var(--touche);font-size:16.5px;letter-spacing:.01em;line-height:1.2}
.sommaire-page .d{font-size:13.5px;line-height:1.45;color:var(--gris-acier)}

/* ── grilles & cartes ───────────────────────────── */
.grille{display:grid;gap:20px;margin:32px 0}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.temp{background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r);padding:24px 24px 20px}
.brume .temp{background:var(--blanc)}
.bande .temp{background:#1b1e24;border-color:rgba(255,255,255,.11)}
.temp h4{font-family:var(--touche);font-weight:400;font-size:19px;letter-spacing:.01em;
  margin:0 0 10px;color:var(--encre)}
.bande .temp h4{color:#fff}
.temp p{font-size:15.5px;line-height:1.6;margin:0 0 12px;max-width:none}
.temp p:last-child{margin-bottom:0}
.temp .lbl{font-family:var(--util);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gris-acier);display:block;margin-bottom:9px}

/* ── schémas ────────────────────────────────────── */
figure.schema{margin:34px 0 30px;padding:30px 26px 24px;background:var(--blanc);
  border:1px solid var(--filet);border-radius:var(--r);overflow:hidden}
.brume figure.schema{background:var(--blanc)}
.bande figure.schema{background:#1b1e24;border-color:rgba(255,255,255,.11)}
figure.schema svg{display:block;width:100%;height:auto;max-width:100%}
figure.schema figcaption{font-family:var(--util);font-size:12px;line-height:1.55;
  color:var(--gris-acier);margin-top:20px;padding-top:14px;border-top:1px solid var(--filet);
  max-width:72ch}
.bande figure.schema figcaption{color:#9aa1ab;border-top-color:rgba(255,255,255,.11)}
.tr{fill:none;stroke:var(--encre);stroke-width:1.5}
.tr-l{fill:none;stroke:var(--gris-acier);stroke-width:1.5}
.tr-p{fill:none;stroke:var(--gris-acier);stroke-width:1.5;stroke-dasharray:5 4}
.bx{fill:none;stroke:var(--encre);stroke-width:1.5}
.bxf{fill:var(--brume);stroke:var(--encre);stroke-width:1.5}
.bxd{fill:none;stroke:var(--filet-appuye);stroke-width:1.5;stroke-dasharray:5 4}
.jn{fill:none;stroke:var(--jaune);stroke-width:2.5;stroke-linecap:round}
.pt{fill:var(--encre)}
.ptj{fill:var(--jaune)}
svg text{font-family:var(--voix);fill:var(--encre)}
svg .t{font-size:13px;font-weight:400}
svg .tb{font-size:13.5px;font-weight:700}
svg .tt{font-size:15px;font-weight:700;letter-spacing:-.01em}
svg .ts{font-size:11px;fill:var(--gris-acier);letter-spacing:.02em}
svg .tu{font-size:10px;fill:var(--gris-acier);letter-spacing:.14em;text-transform:uppercase;
  font-family:var(--util)}
svg .tn{font-size:11px;font-weight:700;fill:var(--encre)}
.bande svg text{fill:#e4e7eb}
.bande svg .tb,.bande svg .tt,.bande svg .tn{fill:#fff}
.bande svg .ts,.bande svg .tu{fill:#9aa1ab}
.bande .tr,.bande .bx{stroke:#e4e7eb}
.bande .bxf{fill:#22252b;stroke:#e4e7eb}
.bande .tr-l,.bande .tr-p{stroke:#9aa1ab}
.bande .pt{fill:#e4e7eb}

/* ── dépliants ──────────────────────────────────── */
details.plus{border:1px solid var(--filet);border-radius:var(--r);background:var(--blanc);
  margin:0 0 14px;overflow:hidden}
.brume details.plus{background:var(--blanc)}
.bande details.plus{background:#1b1e24;border-color:rgba(255,255,255,.11)}
details.plus>summary{cursor:pointer;list-style:none;padding:16px 22px;display:flex;
  align-items:baseline;gap:14px;font-weight:700;font-size:16.5px;position:relative}
details.plus>summary::-webkit-details-marker{display:none}
details.plus>summary::after{content:"";margin-left:auto;flex:0 0 auto;width:11px;height:11px;
  border-right:1.5px solid var(--gris-acier);border-bottom:1.5px solid var(--gris-acier);
  transform:rotate(45deg) translateY(-2px);transition:transform .22s var(--e-out)}
details.plus[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
details.plus>summary .num{font-family:var(--util);font-size:11px;letter-spacing:.14em;
  color:var(--gris-acier);flex:0 0 auto}
details.plus>summary:hover{background:var(--brume)}
.bande details.plus>summary:hover{background:#22252b}
details.plus .corps{padding:2px 22px 20px;border-top:1px solid var(--filet)}
.bande details.plus .corps{border-top-color:rgba(255,255,255,.11)}
details.plus .corps p{font-size:16px;margin-top:16px}

/* ── tableaux ───────────────────────────────────── */
.tbl-enrob{overflow-x:auto;margin:30px 0;border:1px solid var(--filet);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;font-size:15px;background:var(--blanc)}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--filet);vertical-align:top}
th{font-family:var(--util);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris-acier);font-weight:400;background:var(--brume);white-space:nowrap}
tr:last-child td{border-bottom:0}
td strong{font-weight:700;color:var(--encre)}
td{color:var(--encre-douce)}

/* ── badges d'état ──────────────────────────────── */
.etat{font-family:var(--util);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  padding:3px 8px 2px;border-radius:4px;border:1px solid var(--filet-appuye);
  color:var(--gris-acier);white-space:nowrap;display:inline-block;line-height:1.5}
.etat.perime{border-color:var(--encre);color:var(--encre);font-weight:700}
.etat.perime::before{content:"";display:inline-block;width:9px;height:2px;background:var(--jaune);
  vertical-align:2px;margin-right:6px}
.bande .etat{border-color:rgba(255,255,255,.3);color:#9aa1ab}
.bande .etat.perime{border-color:#fff;color:#fff}

/* ── glossaire ──────────────────────────────────── */
.filtre{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 24px}
.filtre input{font-family:var(--voix);font-size:15px;padding:11px 15px;border-radius:var(--r);
  border:1px solid var(--filet-appuye);background:var(--blanc);color:var(--encre);
  min-width:260px;flex:1 1 260px}
.filtre input::placeholder{color:var(--gris-acier)}
.filtre .compte{font-family:var(--util);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris-acier)}
.gl{display:grid;gap:1px;background:var(--filet);border:1px solid var(--filet);
  border-radius:var(--r);overflow:hidden}
.gl .e{background:var(--blanc);padding:18px 22px;display:grid;
  grid-template-columns:minmax(150px,210px) 1fr;gap:6px 26px;align-items:baseline}
.gl .e[hidden]{display:none}
.gl .e dt{font-weight:700;font-size:16px;color:var(--encre);margin:0}
.gl .e dt .vo{display:block;font-family:var(--util);font-size:11px;letter-spacing:.05em;
  color:var(--gris-acier);font-weight:400;margin-top:2px}
.gl .e dd{margin:0;font-size:15.5px;line-height:1.58;color:var(--encre-douce)}
.gl .vide{background:var(--blanc);padding:26px 22px;font-family:var(--util);font-size:13px;
  color:var(--gris-acier);text-align:center}

/* ── avertissement & pied ───────────────────────── */
.avert{background:var(--brume);border-left:3px solid var(--gris-acier);border-radius:0 var(--r) var(--r) 0;
  padding:20px 24px;max-width:calc(var(--lecture) + 48px);margin:36px 0 0}
.avert .lbl{font-family:var(--util);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris-acier);display:block;margin-bottom:9px}
.avert p{font-size:14px;line-height:1.6;color:var(--gris-acier);margin:0;max-width:none}
.pied{background:var(--brume);border-top:1px solid var(--filet);padding:56px 0 0}
.pied .cols{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  padding-bottom:44px}
.pied .k{font-family:var(--util);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gris-acier);display:block;margin-bottom:10px}
.pied .col p{font-size:14.5px;line-height:1.55;margin:0 0 7px;color:var(--encre-douce);max-width:34ch}
.pied .legale{border-top:1px solid var(--filet-appuye);padding:18px 0 30px;
  font-family:var(--util);font-size:11px;letter-spacing:.1em;color:var(--gris-acier);
  display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center}
.pied .legale .marque{letter-spacing:0}

/* ── sources ────────────────────────────────────── */
ol.src{max-width:var(--lecture);padding-left:22px;margin:24px 0 0}
ol.src li{font-size:14.5px;line-height:1.6;color:var(--encre-douce);margin-bottom:9px}
ol.src a{color:var(--encre);text-decoration:none;border-bottom:1px solid var(--filet-appuye)}
ol.src a:hover{border-bottom-color:var(--jaune);border-bottom-width:2px}

/* ── mouvement ──────────────────────────────────── */
.rev{opacity:1}
html.js .rev{opacity:0;transform:translateY(16px)}
html.js .sec.in .rev{opacity:1;transform:none;
  transition:opacity .72s var(--e-out),transform .72s var(--e-out)}
html.js .sec.in .rev:nth-child(2){transition-delay:.12s}
html.js .sec.in .rev:nth-child(3){transition-delay:.24s}
html.js .sec.in .rev:nth-child(4){transition-delay:.36s}
html.js .sec.in .rev:nth-child(5){transition-delay:.48s}
html.js .sec.in .folio .tick{transform:scaleX(1);transition:transform .42s var(--e-trace) .1s}
html:not(.js) .folio .tick{transform:scaleX(1)}
html.js .trS{stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900)}
html.js .sec.in .trS{stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--e-trace) .2s}
html.js .popS{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center}
html.js .sec.in .popS{opacity:1;transform:none;transition:opacity .3s var(--e-out) .6s,transform .34s var(--e-out) .6s}
html.js .lbS{opacity:0}
html.js .sec.in .lbS{opacity:1;transition:opacity .5s var(--e-out) .55s}

/* la scène signature : l'impulsion qui s'arrête à la ligne humaine */
#impulsion{offset-path:path("M300 126V160H210V336H934V478H12V90H18");offset-rotate:0deg;
  offset-distance:19.8%;opacity:0}
html.js .sec.in #impulsion{opacity:1;animation:court 7s linear infinite}
@keyframes court{
  0%{offset-distance:0%;opacity:0}
  4%{offset-distance:1%;opacity:1}
  20%{offset-distance:19.8%;opacity:1}
  /* arrêt net : le signal attend la porte humaine */
  27%{offset-distance:19.8%;opacity:.18}
  34%{offset-distance:19.8%;opacity:1}
  40%{offset-distance:19.8%;opacity:1}
  94%{offset-distance:100%;opacity:1}
  100%{offset-distance:100%;opacity:0}
}
.sec:hover #impulsion{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .rev{opacity:1;transform:none}
  html.js .trS{stroke-dashoffset:0}
  html.js .popS,html.js .lbS{opacity:1;transform:none}
  html.js .folio .tick{transform:scaleX(1)}
  html.js .sec.in #impulsion,#impulsion{animation:none;opacity:1;offset-distance:19.8%}
}

/* ── sommaire dépliable ─────────────────────────────
   Le seuil n'est pas une taille d'écran, c'est une mesure : l'enseigne
   (188 px), les quatre entrées et le renvoi réclament 800 px une fois les
   gouttières prises. En dessous, le sommaire se replie derrière un
   bouton. Le renvoi vers uniy.fr, lui, reste toujours dehors : un lien de
   site à site ne se cache pas derrière un geste. */
@media (max-width:799px){
  .bandeau .cadre{gap:12px}
  .bandeau .sommaire{position:relative;flex:0 0 auto}
  .bandeau .sommaire>summary{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
    list-style:none;font-family:var(--util);font-size:11.5px;letter-spacing:.13em;
    text-transform:uppercase;color:#fff;padding:6px 9px;border-radius:6px;
    border:1px solid rgba(255,255,255,.2);white-space:nowrap}
  .bandeau .sommaire>summary::-webkit-details-marker{display:none}
  .bandeau .sommaire>summary:hover{border-color:rgba(255,255,255,.45)}
  .bandeau .sommaire>summary .pastille{width:14px;height:2px;background:var(--jaune);
    flex:0 0 auto;transition:transform .22s var(--e-out)}
  .bandeau .sommaire[open]>summary .pastille{transform:scaleX(.5)}
  .bandeau .sommaire[open]>nav{position:absolute;top:calc(100% + 10px);right:0;z-index:70;
    flex-direction:column;align-items:stretch;gap:1px;min-width:230px;padding:8px;
    background:#1b1e24;border:1px solid rgba(255,255,255,.14);border-radius:var(--r);
    box-shadow:0 22px 44px rgba(0,0,0,.45)}
  .bandeau .sommaire[open]>nav a{padding:9px 11px}
  .bandeau .sommaire[open]>nav a::after{left:11px;right:11px}
}

@media (max-width:880px){
  .sec{padding:68px 0}
  .hero-page{padding:64px 0 56px}
  .gl .e{grid-template-columns:1fr;gap:5px}
  figure.schema{padding:20px 14px 16px}
}
@media (max-width:560px){
  body{font-size:16.5px}
  .cadre{padding:0 20px}
  /* Sur un téléphone, l'accroche du second rang prend la place du
     sommaire et du renvoi : le nom seul suffit à situer le lecteur. */
  .bandeau .rubrique .sous{display:none}
  .bandeau .enseigne{gap:10px}
}
@media print{
  .bandeau{display:none}
  .hero-page,.sec.bande{background:var(--blanc)!important;color:var(--encre)!important}
  .hero-page h1,.hero-page .chapeau,.bande p,.bande .chapo{color:var(--encre)!important}
  .hero-page .role{color:var(--gris-acier)!important}
  .sec{padding:34px 0;break-inside:avoid}
  details.plus{border:0}
  details.plus .corps{display:block!important}
  #impulsion{display:none}
}