/* =====================================================================
   L’HOLACRATIE ENFIN EXPLIQUÉE
   Feuille propre à la page. Elle vient APRÈS telescoop-ds.css.

   Règles suivies :
   - deux accents seulement, jaune et vert, alternés par acte
   - aucune illustration dans un .halo (le transform s’écraserait)
   - chaque illustration a un état statique lisible, --p vaut 1 par
     défaut ; le JS ne le remet à 0 que si les animations tournent
   - en thème sombre, les dessins à l’encre sont inversés, sinon du
     noir sur du noir serait invisible
   ===================================================================== */

:root{
  --ease-pixel:steps(5);       /* réservé au libellé de l’acte */
  --acte:var(--jaune);
  --acte-sombre:var(--jaune-sombre);
  --illus-max:60rem;

  /* Texte plus grand que le réglage par défaut du système, la page
     est longue et se lit d’une traite. */
  --t-texte:1.3125rem;
  --t-sous-titre:1.125rem;
  --mesure:70ch;

  --grain-opacity:.16;
}
:root[data-theme="sombre"]{ --grain-opacity:.10 }

html{ scroll-behavior:smooth }
body{ overflow-x:hidden }

/* Sélection : elle suit l’accent de l’acte en cours. Sur un fond déjà
   jaune, du jaune sur du jaune serait illisible, on passe au foncé. */
[data-accent="vert"] ::selection{ background:var(--vert);color:#000 }
[data-accent="vert"] ::-moz-selection{ background:var(--vert);color:#000 }
[data-accent="jaune"] ::selection{ background:var(--jaune);color:#000 }
[data-accent="jaune"] ::-moz-selection{ background:var(--jaune);color:#000 }
.section-jaune ::selection{ background:var(--jaune-sombre);color:#fff }
.section-jaune ::-moz-selection{ background:var(--jaune-sombre);color:#fff }

/* ---------------------------------------------------------------------
   1. LE CADRE FIXE
   Quatre ancres permanentes. La scène change, le cadre reste.
   --------------------------------------------------------------------- */

.cadre{
  position:fixed;inset:0;z-index:40;pointer-events:none;
  font-family:var(--font-mono);
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--encre-douce);
}
.cadre > *{position:absolute;pointer-events:auto;transition:color 320ms var(--ease)}
.cadre-hg{top:1.15rem;left:1.5rem;max-width:13rem;line-height:1.5}
/* Le contenu défile sous l’ancre : un fond léger, sinon les deux
   se superposent quand un paragraphe passe derrière. */
.cadre-hd{top:.9rem;right:1.25rem;text-align:right;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:flex-end;
  background:color-mix(in srgb,var(--fond) 90%,transparent);
  backdrop-filter:blur(6px);
  padding:.35rem .6rem;border-radius:var(--radius);
  transition:color 320ms var(--ease),background-color 320ms var(--ease)}
.cadre-hd.sombre{ background:color-mix(in srgb,#141210 55%,transparent) }
.cadre-bg{bottom:1.15rem;left:1.5rem}
.cadre-bd{bottom:1.15rem;right:1.5rem;text-align:right}

.cadre-hg b{
  display:block;font-family:var(--font-titre);font-weight:400;
  font-size:.875rem;letter-spacing:normal;color:var(--encre);
}
.cadre .val{ color:var(--encre);font-variant-numeric:tabular-nums }

/* Au-dessus du panneau sombre, le cadre s’inverse ancre par ancre */
.cadre .sombre{ color:color-mix(in srgb,#FFF9F0 72%,transparent) }
.cadre .sombre b,
.cadre .sombre .val{ color:#FFF9F0 }
.cadre .sombre .bascule{ border-color:color-mix(in srgb,#FFF9F0 45%,transparent) }
.cadre .sombre .bascule:hover{ background:#FFF9F0;color:#141210 }

#acte-libelle{ transition:opacity 180ms var(--ease-pixel) }
#acte-libelle.change{ opacity:0 }

/* -- Bascule clair / sombre ------------------------------------------ */
.bascule{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  font-family:var(--font-mono);font-size:.75rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:inherit;background:transparent;
  border:var(--filet) solid var(--filet-couleur);
  border-radius:var(--radius);
  padding:.3rem .6rem;
  transition:background-color var(--speed) var(--ease),
             color var(--speed) var(--ease),
             border-color var(--speed) var(--ease);
}
.bascule:hover,.bascule:focus-visible{ background:var(--encre);color:var(--contre-encre) }
.bascule-icone{
  width:.75rem;height:.75rem;border-radius:var(--radius-full);
  border:1.5px solid currentColor;
  background:linear-gradient(90deg,currentColor 50%,transparent 50%);
}
:root[data-theme="sombre"] .bascule-icone{
  background:linear-gradient(90deg,transparent 50%,currentColor 50%);
}

/* Jauge de progression, collée en haut */
.jauge{
  position:fixed;top:0;left:0;right:0;height:var(--trait);z-index:45;
  background:transparent;pointer-events:none;
}
.jauge > i{
  display:block;height:100%;width:100%;
  transform:scaleX(var(--scroll,0));transform-origin:left center;
  background:var(--acte);
  transition:background-color 600ms var(--ease);
}

/* Indice de défilement, il s’efface dès qu’on descend */
.indice{ transition:opacity 400ms var(--ease) }
.indice[hidden]{ display:block;opacity:0 }
.indice .fleche{ display:inline-block;animation:respire 2.6s var(--ease) infinite }
@keyframes respire{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }

/* En dessous de 1280 px, les ancres de gauche chevaucheraient le
   contenu, qui est centré sur --container. */
@media (max-width:1279px){ .cadre-hg,.cadre-bg{ display:none } }
@media (max-width:900px){
  .cadre-bd .indice{ display:none }
  .cadre-hd,.cadre-bd{ font-size:.6875rem }
  .cadre-hd,.cadre-bd{
    background:color-mix(in srgb,var(--fond) 88%,transparent);
    backdrop-filter:blur(6px);
    padding:.3rem .5rem;border-radius:var(--radius);
  }
  .cadre-bd{ right:auto;left:1rem;text-align:left }
  .cadre-hd{ top:.75rem;right:1rem;gap:.6rem }
  .bascule-texte{ display:none }
  .bascule{ padding:.3rem .45rem }
}

.haut-de-page{ bottom:3.9rem }
@media (max-width:900px){ .haut-de-page{ bottom:1.25rem } }

/* ---------------------------------------------------------------------
   2. OUVERTURE
   --------------------------------------------------------------------- */

.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-block:calc(var(--section-y) * 1.1);
}
.hero h1{
  font-size:clamp(3rem,11.5vw,10rem);
  line-height:.92;margin-bottom:.28em;max-width:none;
}
/* Pas d’overflow:hidden ici. Anton monte à 1,5 em pour 0,86 em de
   capitale : un masque coupé sur la ligne mange l’accent du É. */
.hero h1 .l{ display:block }
.hero h1 .l > span{ display:block }
.hero .accroche{
  font-size:clamp(1.3125rem,2.4vw,1.75rem);line-height:1.42;
  max-width:52ch;margin-bottom:2rem;
}
.hero .meta{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;
  font-family:var(--font-mono);font-size:.8125rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--encre-douce);
}

/* ---------------------------------------------------------------------
   3. LES ACTES
   --------------------------------------------------------------------- */

/* Ouverture d’acte plus resserrée : le grand chiffre tient déjà
   l’espace, inutile d’ajouter deux sections de vide autour. */
.acte-ouverture{ padding-block:calc(var(--section-y) * .5) }

/* Le grand chiffre se place à gauche du titre, pas au-dessus */
.acte-entete{ display:grid;gap:.5rem }
@media (min-width:820px){
  .acte-entete{ grid-template-columns:auto minmax(0,1fr);gap:3rem;align-items:start }
  .acte-entete .num-acte{ margin-top:-.06em }
}
.acte-ouverture .num-acte{
  font-family:var(--font-titre);
  font-size:clamp(4.5rem,13vw,11rem);line-height:.78;
  display:block;margin:0;
  color:var(--acte);
  transition:color 600ms var(--ease);
}
.acte-corps > :first-child{ margin-top:0 }
.acte-ouverture h2{ font-size:clamp(2rem,5.5vw,4.25rem);line-height:1 }
.acte-ouverture .filet-titre{ margin-bottom:1.5rem }

/* Filet fin, pleine largeur, entre deux chapitres */
.filet-chapitre{
  border:0;height:var(--filet);background:var(--filet-couleur);
  margin:0;width:100%;
}

/* Chapeaux : des lignes longues, partout */
.chapeau{
  font-size:1.375rem;line-height:1.5;max-width:62ch;margin-top:1.25rem;
}

/* ---------------------------------------------------------------------
   4. UNE FIGURE
   --------------------------------------------------------------------- */

.figure{ padding-block:var(--section-y) }
.figure + .figure{ padding-top:0 }

.figure-grille{ display:grid;gap:var(--bloc-y) }
.figure-image{ margin:0 }
.figure-image > div{ width:100% }

@media (min-width:1000px){
  .figure-grille{
    grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    gap:4.5rem;align-items:start;
  }
  /* Épinglage plein écran plutôt que top:50% + translate : un transform
     sur un élément sticky se comporte mal. */
  .figure-image{
    position:sticky;top:0;height:100svh;
    display:flex;align-items:center;justify-content:center;
  }
  .figure-inverse .figure-image{ order:2 }
  .figure-inverse .figure-texte{ order:1 }
  .figure-texte{ padding-block:10svh }
}

.figure-image img{
  display:block;
  max-width:min(100%,var(--illus-max));
  max-height:62svh;
  width:auto;height:auto;
  margin-inline:auto;
  /* L’état par défaut est l’image entière. Le JS ne la masque que si
     les animations tournent. C’est ce qui garantit un état statique. */
  clip-path:var(--decoupe,none);
  will-change:clip-path;
}
@media (max-width:999px){
  .figure-image img{ max-height:none;width:100% }
}

/* Dessins à l’encre : en thème sombre, on inverse pour que le trait
   passe du noir au blanc. hue-rotate remet les couleurs d’origine. */
:root[data-theme="sombre"] .figure-image img,
:root[data-theme="sombre"] .bande-image img{
  filter:invert(1) hue-rotate(180deg);
}

/* Quatre sens de révélation, pilotés par --p (0 à 1) */
[data-reveal="h"]  img{ --decoupe:inset(-2% calc((1 - var(--p,1)) * 102%) -2% -2%) }
[data-reveal="v"]  img{ --decoupe:inset(-2% -2% calc((1 - var(--p,1)) * 102%) -2%) }
[data-reveal="hd"] img{ --decoupe:inset(-2% -2% -2% calc((1 - var(--p,1)) * 102%)) }
[data-reveal="c"]  img{
  --decoupe:inset(calc((1 - var(--p,1)) * 51%) calc((1 - var(--p,1)) * 51%)
                  calc((1 - var(--p,1)) * 51%) calc((1 - var(--p,1)) * 51%));
}

.figure-legende{
  font-family:var(--font-mono);font-size:.75rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--encre-douce);
  margin-top:1rem;text-align:center;
}

.figure-texte h3{
  font-size:clamp(1.75rem,3.2vw,2.75rem);line-height:1.02;margin-bottom:.5rem;
}
.figure-texte .amorce{
  font-size:1.4375rem;line-height:1.42;margin-bottom:1.5rem;
}
.figure-numero{
  font-family:var(--font-mono);font-size:.8125rem;
  letter-spacing:.14em;color:var(--encre-douce);
  display:block;margin-bottom:.75rem;
}

/* Le point qui tue un malentendu */
.demonte{
  border-left:var(--trait) solid var(--acte);
  padding:.15rem 0 .15rem 1.25rem;margin:1.75rem 0;
  transition:border-color 600ms var(--ease);
}
.demonte .cle{
  display:block;font-family:var(--font-titre);text-transform:uppercase;
  font-size:1.125rem;margin-bottom:.4rem;
}
.demonte p{ margin:0 }

/* Le pli, pour ce qui n’est pas indispensable à la première lecture */
.pli{ margin:1.75rem 0;max-width:var(--mesure) }
.pli > summary{
  cursor:pointer;list-style:none;
  font-family:var(--font-titre);text-transform:uppercase;
  font-size:1.125rem;
  padding:.65rem 0;border-top:var(--filet) solid var(--filet-couleur);
  border-bottom:var(--filet) solid var(--filet-couleur);
  display:flex;align-items:center;gap:.75rem;
}
.pli > summary::-webkit-details-marker{ display:none }
.pli > summary::before{ content:"+";font-size:1.15em;line-height:1;color:var(--encre-douce) }
.pli[open] > summary::before{ content:"–" }
.pli[open] > summary{ border-bottom-color:transparent }
.pli > div{ padding:1rem 0 .5rem }
.pli p:last-child{ margin-bottom:0 }

/* Les listes étapes : la clé un peu plus large avec le texte agrandi */
.liste-filets .cle{ min-width:12.5rem;font-size:1.0625rem }

/* Une liste numérotée n’a pas besoin d’une clé de 12 rem : le chiffre
   se retrouverait à l’autre bout de la ligne. */
.liste-numeros .cle{ min-width:1.75rem;color:var(--encre) }
.liste-numeros > li{ gap:1rem }

/* En dessous de 640 px, la clé et le texte s’empilent : côte à côte,
   une clé de 12 rem ne laisse plus assez de place pour lire. */
@media (max-width:639px){
  .liste-filets > li{ flex-direction:column;gap:.35rem }
  .liste-filets .cle{ min-width:0 }
}

/* ---------------------------------------------------------------------
   5. LE PANNEAU DE LA CITATION
   --------------------------------------------------------------------- */

.panneau{
  background:var(--encre);color:var(--contre-encre);
  min-height:100svh;display:flex;align-items:center;
  padding-block:var(--section-y);
}
.panneau .repere{ color:inherit;opacity:.55;margin-bottom:1.5rem }
.panneau .citation{
  font-family:var(--font-titre);text-transform:uppercase;
  font-size:clamp(1.75rem,5.2vw,4rem);line-height:1.02;
  max-width:22ch;margin:0 0 2rem;
}
.panneau .citation em{ font-style:normal;color:var(--jaune) }
.panneau .vo{
  font-size:1.125rem;line-height:1.5;
  color:color-mix(in srgb,var(--contre-encre) 72%,transparent);
  max-width:58ch;margin:0 0 1.5rem;
}
.panneau .source{
  font-family:var(--font-mono);font-size:.8125rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:color-mix(in srgb,var(--contre-encre) 62%,transparent);
  max-width:52ch;line-height:1.7;margin-bottom:.75rem;
}
.panneau .commentaire{
  font-size:1.125rem;line-height:1.5;max-width:52ch;margin:0;
  color:color-mix(in srgb,var(--contre-encre) 72%,transparent);
}
.panneau ::selection{ background:var(--jaune);color:#000 }

/* ---------------------------------------------------------------------
   6. LA BANDE DES PROPORTIONS
   --------------------------------------------------------------------- */

.bande{ padding-block:calc(var(--section-y) * 1.1);overflow:hidden }
.bande-image{ width:100%;padding-inline:1.5rem;margin-bottom:var(--bloc-y) }
.bande-image img{
  display:block;width:100%;max-width:100rem;margin-inline:auto;height:auto;
  clip-path:inset(-2% calc((1 - var(--p,1)) * 102%) -2% -2%);
}
/* Le chiffre au-dessus, sa légende en dessous : aligner sur la ligne de
   base ne marche pas quand la légende tient sur deux lignes. */
.bande-mesures{ display:grid;gap:2rem }
@media (min-width:640px){ .bande-mesures{ grid-template-columns:repeat(2,minmax(0,20rem)) } }
.mesure-bloc{ display:flex;flex-direction:column;gap:.5rem }
.compteur{
  font-family:var(--font-titre);
  font-size:clamp(3rem,7vw,5.5rem);line-height:.88;
  font-variant-numeric:tabular-nums;
  color:var(--acte);
  transition:color 600ms var(--ease);
}
.compteur-note{
  font-family:var(--font-mono);font-size:.8125rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--encre-douce);
  line-height:1.6;max-width:26ch;
}
.bande-note{ margin-top:2rem;max-width:66ch }

/* ---------------------------------------------------------------------
   7. GLOSSAIRE, SOURCES, PIED DE PAGE
   --------------------------------------------------------------------- */

.glossaire .cle{ min-width:15rem }
@media (max-width:639px){ .glossaire .cle{ min-width:0 } }
.glossaire .vo{
  font-family:var(--font-mono);font-size:.8125rem;
  color:var(--encre-douce);display:block;margin-top:.4rem;
  letter-spacing:.05em;text-transform:none;
  overflow-wrap:anywhere;
}

.sources{ font-size:var(--t-sous-titre);line-height:1.7 }
.sources ul{ list-style:none;margin:0;padding:0 }
.sources li{ padding:.45rem 0;border-bottom:var(--filet) solid var(--filet-couleur) }
.sources .attention{ color:var(--encre-douce) }
.sources .exergue{ margin-top:var(--section-y) }

/* Une grille, pour qu’un bloc de sources ne se coupe jamais en deux */
.grille-sources{ display:grid;gap:2.5rem 3rem }
@media (min-width:760px){ .grille-sources{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1100px){ .grille-sources{ grid-template-columns:repeat(3,1fr) } }
.grille-sources h3{ margin-top:0 }
.bloc-source li:last-child{ border-bottom:0 }

.pied{
  padding-block:var(--bloc-y);
  font-family:var(--font-mono);font-size:.75rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--encre-douce);
}
.pied hr{ margin-bottom:1.25rem }
.pied p{ max-width:none;margin:0 }

/* ---------------------------------------------------------------------
   8. DÉTAILS
   --------------------------------------------------------------------- */

/* Libellés de rubrique : ils annoncent une section, ils doivent se voir */
.rubrique > .libelle{ font-size:1.25rem }

/* Surlignage sur du Barlow, pas sur de l’Anton : box-decoration-break
   est indispensable, sinon un passage sur deux lignes se déforme. */
.accent{
  background:var(--acte);color:#000;
  padding:.1em .22em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-color 600ms var(--ease);
}
.souligne{
  background-image:linear-gradient(var(--acte),var(--acte));
  background-size:100% .35em;background-position:0 88%;
  background-repeat:no-repeat;
}
.repere{
  display:inline-block;font-family:var(--font-mono);
  font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--encre-douce);
}

/* Deux chemins, la conclusion */
.titre-fin{ font-size:clamp(1.75rem,4.6vw,3.5rem);max-width:22ch }
.chemins{ display:grid;gap:var(--gap);margin-top:var(--bloc-y) }
@media (min-width:800px){ .chemins{ grid-template-columns:1fr 1fr;gap:3rem } }
.chemin h3{ margin-bottom:.5rem }
.chemin .verdict{
  font-family:var(--font-mono);font-size:.8125rem;
  letter-spacing:.12em;text-transform:uppercase;
  display:block;margin-top:1.25rem;padding-top:.75rem;
  border-top:var(--trait) solid currentColor;
  max-width:26ch;
}
.bloc-fin{ margin-top:var(--section-y);max-width:62ch }
.bloc-fin hr{ margin-bottom:1.5rem }

/* Le système coupe tout si les animations sont réduites. On garantit
   alors que les images sont entières. */
@media (prefers-reduced-motion:reduce){
  :root:not([data-anim="on"]) .figure-image img,
  :root:not([data-anim="on"]) .bande-image img{ clip-path:none }
  :root:not([data-anim="on"]) .indice{ display:none }
}

@media print{
  .cadre,.jauge{ display:none }
  .figure-image img,.bande-image img{ clip-path:none;filter:none }
  .panneau{ background:#fff;color:#000 }
}