/* ===================================================================
   PAGE PROJET · la mise en page commune des neuf pages.

   Une page vit dans son univers dès la première image (html[data-univers]
   posé dans le HTML, pas par JS). Elle reprend la phrase en tête, en
   plus petit, puis parle dans la fonte du produit (--u-display) : titres
   de sections et h1. Le corps reste en Switzer, la voix de la maison.
   Le spécimen du hero est le même objet que sur la liste des phrases :
   il porte le nom de transition « specimen », la phrase « phrase ».
   =================================================================== */

/* la barre du haut : retour, repère, feuilletage, lien vers le produit.
   Elle colle au bord, s'efface quand on descend lire, revient dès qu'on
   remonte d'un cran (projet.js pose est-cachee / est-decollee), et porte
   son propre nom de transition : elle traverse le morphe sans renaître. */
.barre{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  padding:1rem max(var(--marge),calc(50% - var(--large)/2 + var(--marge)));
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);
  view-transition-name:barre;
  transition:transform .38s cubic-bezier(.22,1,.36,1),background-color .3s ease,padding .3s ease;
}
.barre.est-decollee{
  padding-top:.65rem;padding-bottom:.65rem;
  background:color-mix(in srgb,var(--noir) 84%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.barre.est-cachee{transform:translateY(-101%)}
/* le fil de lecture : un filet ambré d'un pixel au ras du haut de l'écran,
   posé par projet.js hors de la barre pour rester visible quand elle se replie */
.fil-lecture{
  position:fixed;top:0;left:0;right:0;height:1px;z-index:30;pointer-events:none;
  background:var(--ambre);transform:scaleX(var(--lu,0));transform-origin:0 50%;
}
/* La pile de lecture (cinquième tour de la machine, 4 septembre 2026 ;
   recentrée le 5) : au milieu de la barre, entre les deux flèches, un cube par
   section du récit, empilés, le premier en haut, dessinés par projet.js dans un
   seul SVG au trait (la langue filaire de la barre). Le cube de la section en
   cours s'allume dans l'ambre de l'univers, ceux qu'on a lus restent en blanc
   doux, ceux qui viennent en gris fantôme. Au survol ou au focus d'un cube, le
   nom de sa section se pose sous la pile, centré, à la hauteur des infobulles
   des flèches : un seul petit mot, rien d'autre. */
.barre .pile{position:relative;display:flex;align-items:center}
.barre .pile svg{display:block;overflow:visible}
.barre .pile-cube{color:color-mix(in srgb,var(--gris) 34%,transparent);outline:none;cursor:pointer;transition:color .3s ease}
.barre .pile-cube.est-lue{color:color-mix(in srgb,var(--blanc) 52%,transparent)}
.barre .pile-cube[aria-current],.barre .pile-cube:hover,.barre .pile-cube:focus-visible{color:var(--ambre)}
.barre .pile-face{fill:transparent;stroke:currentColor;stroke-width:1.1;stroke-linejoin:round;transition:fill .3s ease}
.barre .pile-cube[aria-current] .pile-face{fill:color-mix(in srgb,var(--ambre) 16%,transparent)}
.barre .pile-cube:focus-visible .pile-face{fill:color-mix(in srgb,var(--ambre) 28%,transparent)}
.barre .pile-arete{fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round}
.barre .pile-nom{
  position:absolute;left:50%;top:calc(100% + .55rem);transform:translate(-50%,-4px);
  white-space:nowrap;pointer-events:none;
  font-size:.6rem;letter-spacing:.14em;color:var(--gris);text-transform:uppercase;
  opacity:0;transition:opacity .25s ease,transform .3s cubic-bezier(.22,1,.36,1);
}
.barre .pile.est-nommee .pile-nom{opacity:1;transform:translate(-50%,0)}
/* la barre est collante : une section visée par la pile s'arrête sous elle */
.recit{scroll-margin-top:4.6rem}

/* Trois gestes muets, pas un mot : la porte a gauche (sortir), la paire de
   fleches au centre (feuilleter), l'envol a droite (voir le produit vivre).
   Les icones sont des SVG inline en currentColor, traits 1.5, la langue
   filaire des schemas de la maison. */
.barre a{color:var(--blanc);text-decoration:none;transition:color .25s ease}
.barre a:hover,.barre a:focus-visible{color:var(--ambre)}
.barre .ic{display:block;width:22px;height:22px}

/* la porte : le battant pivote vers l'interieur, la lumiere ambre de la
   liste des phrases apparait dans l'embrasure */
.barre .retour{position:relative;padding:.35rem}
.barre .retour .lumiere{fill:var(--ambre);stroke:none;opacity:0;transition:opacity .4s ease}
.barre .retour .battant{transform-origin:6.25px 12px;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.barre .retour:hover .battant,.barre .retour:focus-visible .battant{transform:scaleX(.24)}
.barre .retour:hover .lumiere,.barre .retour:focus-visible .lumiere{opacity:.85}

/* les deux fleches, centrees dans la barre : des boutons carres filaires.
   Le survol les colore, le clic les enfonce, la fleche sort du cadre et
   revient de l'autre bord ; projet.js les aimante au curseur. */
.barre .feuillette{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:.85rem;
}
.barre .feuille{
  position:relative;border-radius:4px;
  display:grid;place-items:center;width:2.5rem;height:2.5rem;
  border:1px solid color-mix(in srgb,var(--gris) 40%,transparent);color:var(--gris);
  transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s ease,color .3s ease,background-color .3s ease;
}
.barre .feuille:hover,.barre .feuille:focus-visible{
  border-color:var(--ambre);color:var(--ambre);
  background:color-mix(in srgb,var(--ambre) 8%,transparent);
}
.barre .feuille .coeur{display:grid;place-items:center;overflow:hidden;transition:transform .22s cubic-bezier(.22,1,.36,1)}
.barre .feuille:active .coeur{transform:scale(.82)}
.barre .feuille:hover .ic{animation:fl-passe .45s cubic-bezier(.22,1,.36,1)}
.barre .feuille.suivant:hover .ic{animation-name:fl-passe-droite}
@keyframes fl-passe{
  0%{transform:none}49%{transform:translateX(-160%);opacity:0}
  50%{transform:translateX(160%);opacity:0}100%{transform:none}
}
@keyframes fl-passe-droite{
  0%{transform:none}49%{transform:translateX(160%);opacity:0}
  50%{transform:translateX(-160%);opacity:0}100%{transform:none}
}

/* l'envol : la fleche quitte le cadre par le coin ouvert et revient
   du coin oppose, le cadre ne bouge pas */
.barre .produit{position:relative;margin-left:auto;color:var(--ambre);padding:.35rem}
.barre .produit:hover .envol,.barre .produit:focus-visible .envol{animation:envol .5s cubic-bezier(.22,1,.36,1)}
@keyframes envol{
  0%{transform:none}49%{transform:translate(11px,-11px);opacity:0}
  50%{transform:translate(-11px,11px);opacity:0}100%{transform:none}
}
/* Les infobulles : au survol un peu long (delai .45s), une petite carte
   filaire sous le bouton nomme la destination et dit ce qui va se passer.
   Le filet ambre se tire en tete ; comme le survol d'une fleche pose deja
   data-univers-survol, les tokens ambre prennent la couleur de l'univers
   vise et la carte s'identifie toute seule. Alignees pour ne jamais sortir
   de l'ecran : a gauche sous la porte, centrees sous les fleches, a droite
   sous l'envol. Decoratives : l'aria-label des liens dit deja tout. */
.barre .infobulle{
  position:absolute;top:calc(100% + .7rem);left:50%;border-radius:4px;
  display:block;width:max-content;max-width:min(17rem,78vw);
  padding:.55rem .85rem .6rem;
  border:1px solid color-mix(in srgb,var(--blanc) 14%,transparent);
  background:color-mix(in srgb,var(--noir) 92%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:.6rem;letter-spacing:.14em;line-height:1.5;color:var(--gris);
  text-transform:uppercase;text-align:left;white-space:normal;
  opacity:0;pointer-events:none;transform:translate(-50%,-6px);
  transition:opacity .3s ease,transform .35s cubic-bezier(.22,1,.36,1);
}
.barre .infobulle b{
  display:block;margin-bottom:.15rem;
  font-family:var(--display);font-weight:500;font-size:.74rem;
  letter-spacing:.06em;color:var(--blanc);
}
.barre .infobulle i{font-style:normal;display:block}
/* Le filet est devenu un compte a rebours : la ligne ambre parcourt tout
   le contour de la carte. La geometrie et la longueur du trait vivent
   dans projet.js (chemin arrondi au pixel, getTotalLength en dasharray et
   dashoffset inline : Safari normalise mal pathLength et tracait mal un
   rect pose en CSS). Ici seulement le trait et l'animation vers offset 0.
   Un tour complet arme la carte (est-armee : elle s'eclaircit et zoome
   d'un souffle) et projet.js compte le clic une demi-seconde apres.
   Ni tactile ni mouvement reduit : projet.js n'injecte alors rien.
   Le trace couvre la carte BORDURE COMPRISE (inset:-1px, et l'infobulle
   ne doit plus porter overflow:hidden) : cale sur le padding-box, les
   bords droit et bas du chemin tombaient hors du SVG et Safari rognait
   le tour apres la premiere horizontale. */
.barre .infobulle .trace{position:absolute;top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);pointer-events:none}
.barre .infobulle .trace path{
  fill:none;stroke:var(--ambre);stroke-width:1.5;stroke-linecap:square;
}
.barre a:hover .infobulle .trace path,.barre a:focus-visible .infobulle .trace path{
  animation:trace-tour 1.8s linear .6s forwards;
}
@keyframes trace-tour{to{stroke-dashoffset:0}}
.barre .infobulle.est-armee{
  border-color:var(--ambre);filter:brightness(1.35);
}
.barre a:hover>.infobulle,.barre a:focus-visible>.infobulle{
  opacity:1;transform:translate(-50%,0);transition-delay:.45s;
}
.barre a:hover>.infobulle.est-armee{transform:translate(-50%,0) scale(1.045)}
.barre .retour .infobulle{left:0;transform:translate(0,-6px)}
.barre .retour:hover .infobulle,.barre .retour:focus-visible .infobulle{transform:translate(0,0)}
.barre .produit .infobulle{left:auto;right:0;transform:translate(0,-6px)}
.barre .produit:hover .infobulle,.barre .produit:focus-visible .infobulle{transform:translate(0,0)}
.barre .retour:hover .infobulle.est-armee,.barre .produit:hover .infobulle.est-armee{transform:translate(0,0) scale(1.045)}

@media (prefers-reduced-motion: reduce){
  .barre,.barre a,.barre .feuille,.barre .feuille .coeur,.barre .retour .battant,.barre .infobulle,.barre .pile-cube,.barre .pile-face,.barre .pile-nom{transition-duration:.001ms}
  .barre .feuille .ic,.barre .produit .envol{animation:none!important}
  .barre .retour:hover .battant{transform:none}
}

.page{max-width:var(--large);margin:0 auto;padding:0 var(--marge)}

/* LE HERO · la phrase, le titre dans la voix du produit, le spécimen */
.hero{
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;
  padding:clamp(2.5rem,7vh,5.5rem) 0 clamp(2.5rem,6vh,4rem);
}
@media (min-width:64rem){
  .hero{grid-template-columns:minmax(0,1fr) clamp(22rem,38vw,34rem)}
}
.hero-tete{
  display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  margin:0 0 1.4rem;font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gris);
}
.hero-tete .n{font-family:var(--display);font-weight:500;font-size:.9rem;color:var(--ambre);letter-spacing:.04em}
/* La pastille est centrée sur la ligne, mais c'est le texte qui donne sa
   ligne de base à l'état : sans quoi le conteneur se cale sur le bas de la
   pastille et « en production » descend sous le nom du projet. */
.hero-tete .etat{display:inline-flex;align-items:baseline;gap:.5rem;font-size:.72rem;letter-spacing:.12em}
.hero-tete .etat::before{content:'';align-self:center;width:6px;height:6px;border-radius:50%;background:var(--ambre);box-shadow:0 0 0 4px color-mix(in srgb,var(--ambre) 16%,transparent)}
.hero-tete .etat.est-chantier::before{background:var(--gris);box-shadow:0 0 0 4px color-mix(in srgb,var(--gris) 14%,transparent)}

.hero-phrase{
  margin:0;font-family:var(--display);font-weight:500;
  font-size:clamp(1.25rem,1rem + 1.4vw,2.05rem);line-height:1.15;letter-spacing:-.015em;
  text-wrap:pretty;max-width:28ch;color:var(--blanc);
  view-transition-name:phrase;
}
.hero-phrase .guill{color:var(--ambre);font-weight:400}
.hero-source{margin:.9rem 0 0;font-size:.875rem;color:var(--gris);font-style:italic}

.hero-titre{
  margin:clamp(1.6rem,4vh,2.6rem) 0 0;
  font-family:var(--u-display);font-weight:var(--u-poids,600);letter-spacing:var(--u-espace,-.02em);
  font-size:clamp(2.1rem,1.4rem + 3.2vw,4.2rem);line-height:1.02;text-wrap:balance;max-width:16ch;
  color:var(--blanc);
}
.hero-titre em{font-style:normal;color:var(--ambre)}
.hero-chapo{
  margin:1.4rem 0 0;max-width:54ch;color:var(--gris);
  font-size:clamp(1rem,.95rem + .3vw,1.1875rem);line-height:1.62;
}
.hero-chapo b{color:var(--blanc);font-weight:500}
.cta-rang{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin:1.8rem 0 0}
.cta-rang .lien{font-size:.9375rem}

.hero-specimen{margin:0;position:relative;view-transition-name:specimen}
.hero-specimen > figcaption{margin:.9rem 0 0;font-size:.8125rem;color:var(--gris);font-style:italic}

/* LE RÉCIT · sections à filet, titres dans la voix du produit */
.recit{padding:clamp(2.2rem,5vh,3.6rem) 0;border-top:1px solid var(--ligne)}
.recit h2{
  margin:0 0 1.2rem;max-width:26ch;
  font-family:var(--u-display);font-weight:var(--u-poids,600);letter-spacing:var(--u-espace,-.02em);
  font-size:clamp(1.5rem,1.15rem + 1.5vw,2.4rem);line-height:1.08;text-wrap:balance;color:var(--blanc);
}
.recit h3{margin:2.2rem 0 .7rem;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ambre);font-weight:600}
.recit p{margin:0 0 1rem;max-width:66ch;color:var(--blanc)}
.recit p.doux,.recit li.doux{color:var(--gris)}
.recit ul,.recit ol{margin:0 0 1rem;padding-left:1.1rem;max-width:66ch;color:var(--gris)}
.recit li{margin-bottom:.5rem}
.recit li b{color:var(--blanc);font-weight:500}
.resultat{border-left:2px solid var(--ambre);padding:.15rem 0 .15rem 1.1rem;font-size:1.0625rem;max-width:60ch}
.statut{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}

/* deux colonnes quand la largeur le permet : texte à gauche, objet à droite */
.colonnes{display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
@media (min-width:56rem){.colonnes{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.colonnes > *{min-width:0}

/* un objet du produit posé au milieu du récit (spécimen secondaire) */
.objet{margin:1.6rem 0 0;max-width:34rem}
.objet > figcaption{margin:.8rem 0 1.4rem;font-size:.8125rem;color:var(--gris);font-style:italic}

/* les trois temps / les quatre étapes : une frise en boîtes.
   La spécificité doit battre `.recit ul, .recit ol` (largeur de lecture) :
   une frise occupe toute la page, pas la colonne de texte. */
.frise,.recit ul.frise,.recit ol.frise{display:grid;gap:1rem;margin:1.6rem 0 0;list-style:none;padding:0;max-width:none;color:inherit}
@media (min-width:56rem){.frise{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}}
.frise li{border:1px solid var(--ligne);border-radius:6px;padding:1.1rem 1.2rem;background:color-mix(in srgb,var(--ambre) 3%,transparent)}
.frise .num{display:block;font-family:var(--display);font-weight:500;color:var(--ambre);font-size:.9rem;letter-spacing:.04em;margin-bottom:.6rem}
.frise b{display:block;font-weight:600;color:var(--blanc);margin-bottom:.35rem}
.frise p{margin:0;font-size:.9375rem;color:var(--gris)}

/* LE PIED · la ligne d'activité, le statut, la machine, puis les deux voisins,
   chacun dans sa lumière au survol */
.page-pied{padding:0 0 4rem}
.page-pied .statut{display:block;margin-bottom:1.6rem}

/* LA LIGNE D'ACTIVITÉ (docs/V10-ACTIVITE.md, 6 septembre 2026) : le trait qui
   séparait le récit du pied devient la vie du dépôt, une barre par jour du
   premier au dernier commit, 12 px de haut. La couleur seule fait l'effet :
   gris pâle un jour sans commit, quatre paliers de l'ambre de l'univers
   ensuite (1 ; 2 à 5 ; 6 à 11 ; 12 et plus). Une barre fait au plus 24 px de
   large : un projet de deux semaines fait une ligne courte, la longueur dit la
   durée ; quand la place manque, les barres se touchent et la ligne devient un
   dégradé. Dessinée par projet.js depuis data-debut et data-jours (remplis par
   scripts/activite.mjs). Elle s'allume de gauche à droite quand elle entre à
   l'écran ; au survol, la barre visée dit sa date et son compte, les autres
   s'assombrissent. Ni boîte ni bordure : elle épouse la page. */
.activite{position:relative;margin:0 0 1.5rem;height:12px}
.activite svg{display:block;height:12px;overflow:visible;transition:clip-path 1s cubic-bezier(.22,1,.36,1)}
.activite:not(.est-allumee) svg{clip-path:inset(0 100% 0 0)}
.activite rect{transition:opacity .15s ease}
.activite .a0{fill:color-mix(in srgb,var(--gris) 16%,transparent)}
.activite .a1{fill:color-mix(in srgb,var(--ambre) 42%,transparent)}
.activite .a2{fill:color-mix(in srgb,var(--ambre) 64%,transparent)}
.activite .a3{fill:color-mix(in srgb,var(--ambre) 84%,transparent)}
.activite .a4{fill:var(--ambre)}
.activite.est-survolee rect{opacity:.4}
.activite.est-survolee rect.est-visee{opacity:1}
/* ce que mesure la ligne, dit au survol : la date et le nombre de commits */
.activite-bulle{
  position:absolute;z-index:2;transform:translate(-50%,-100%);
  padding:.34rem .6rem;border-radius:4px;pointer-events:none;white-space:nowrap;
  font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--noir);background:var(--blanc);box-shadow:0 8px 22px rgba(15,23,42,.22);
}
@media (prefers-reduced-motion:reduce){
  .activite svg,.activite rect{transition:none}
  .activite:not(.est-allumee) svg{clip-path:none}
}

/* LA MACHINE DU PROJET (machine pilote, cinquième tour, 5 septembre 2026) :
   au bas de la page, la même structure que le contact de l'accueil, la machine
   puis « Écrire à Anton ». Le moteur est /machine.js, le plan de ce produit
   vit dans machines/<projet>.js, et la machine prend d'elle-même les couleurs
   de l'univers (elle lit --blanc, --gris, --ambre sur la page). La scène est
   sa place au repos et reçoit le pointeur ; la toile déborde autour d'elle,
   sans recevoir le pointeur, pour que la machine tournée à la main ne soit pas
   rognée. Une seule lueur sous elle, dans l'ambre de l'univers. */
.machine-projet{position:relative;margin:1.4rem 0 2.8rem;padding:0}
.machine-projet::before{
  content:'';position:absolute;left:12%;right:12%;top:8%;height:70%;
  background:radial-gradient(50% 60% at 50% 60%,color-mix(in srgb,var(--ambre) 9%,transparent),transparent 70%);
  pointer-events:none;
}
.machine-projet .machine-scene{
  position:relative;z-index:1;width:min(52rem,100%);margin:0 auto;
  height:clamp(11rem,26vw,19rem);
  cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.machine-projet .machine-scene.saisie{cursor:grabbing}
.machine-projet .machine-toile{
  --debord:clamp(3rem,7vw,6rem);
  position:absolute;left:-4%;top:calc(-1 * var(--debord));
  width:108%;height:calc(100% + 2 * var(--debord));
  display:block;pointer-events:none;
}
.machine-projet .machine-geste{
  position:relative;z-index:1;margin:.6rem 0 0;text-align:center;
  font-family:var(--display);font-weight:500;font-size:1.05rem;
}
.machine-projet .machine-geste .lien{font-size:inherit}
.voisins{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:48rem){.voisins{grid-template-columns:1fr 1fr}}
/* Les cartes voisines parlent la langue de la barre : coins doux (4px,
   le degre d'arrondi de l'accueil, decision du 1er septembre), fleche
   dans un petit carre filaire qui sort du cadre et revient de l'autre bord
   (memes keyframes fl-passe), phrase qui glisse dans le sens du voyage,
   et le meme tour de contour qui vaut clic que les infobulles (chemin
   injecte par projet.js, memes regles : bordure comprise, pas
   d'overflow:hidden sur la carte). data-univers-survol posant deja
   l'univers vise, l'ambre de la carte prend sa couleur tout seul. */
.voisin{
  position:relative;display:block;text-decoration:none;color:var(--blanc);
  border:1px solid var(--ligne);border-radius:4px;padding:1.2rem 1.3rem;
  transition:border-color .3s ease,background-color var(--fondu),color var(--fondu),filter .3s ease,transform .3s ease;
}
.voisin:hover,.voisin:focus-visible{
  border-color:var(--ambre);
  background:color-mix(in srgb,var(--ambre) 5%,transparent);
}
.voisin .trace{position:absolute;top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);pointer-events:none}
.voisin .trace path{fill:none;stroke:var(--ambre);stroke-width:1.5;stroke-linecap:square}
.voisin:hover .trace path,.voisin:focus-visible .trace path{animation:trace-tour 1.8s linear .6s forwards}
.voisin.est-armee{border-color:var(--ambre);filter:brightness(1.25);transform:scale(1.015)}
.voisin small{
  display:flex;align-items:center;gap:.65rem;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);
}
.voisin.suivant small{justify-content:flex-end}
.voisin .voisin-phrase{
  display:block;margin-top:.6rem;font-family:var(--display);font-weight:500;
  font-size:1.05rem;line-height:1.25;letter-spacing:-.01em;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.voisin:hover .voisin-phrase{transform:translateX(-4px)}
.voisin.suivant:hover .voisin-phrase{transform:translateX(4px)}
.voisin .voisin-phrase .guill{color:var(--ambre);font-weight:400}
.voisin.suivant{text-align:right}
.voisin .fl{
  display:inline-grid;place-items:center;flex:none;width:1.9rem;height:1.9rem;border-radius:4px;
  border:1px solid color-mix(in srgb,var(--gris) 40%,transparent);color:var(--ambre);
  overflow:hidden;transition:border-color .3s ease,background-color .3s ease;
}
.voisin .fl .ic{display:block;width:15px;height:15px}
.voisin:hover .fl,.voisin:focus-visible .fl{
  border-color:var(--ambre);
  background:color-mix(in srgb,var(--ambre) 8%,transparent);
}
.voisin:hover .fl .ic,.voisin:focus-visible .fl .ic{animation:fl-passe .45s cubic-bezier(.22,1,.36,1)}
.voisin.suivant:hover .fl .ic,.voisin.suivant:focus-visible .fl .ic{animation-name:fl-passe-droite}
@media (prefers-reduced-motion: reduce){
  .voisin:hover .voisin-phrase,.voisin.suivant:hover .voisin-phrase{transform:none}
  .voisin .fl .ic{animation:none!important}
}

/* LE RÉCIT REPLIÉ · sur tactile, chaque sous-partie (h3) ne montre que
   son titre, le corps s'ouvre au doigt (mécanique dans projet.js : le h3
   devient un bouton, ses frères suivants glissent dans un pli). Sans JS,
   rien n'est replié. Les frontières entre sections deviennent de l'espace
   vide, comme sur la liste des phrases (décision du 2 septembre). */
@media (hover: none) and (max-width:63.99rem){
  .recit{border-top:0;padding:clamp(2.6rem,7svh,4.2rem) 0}
}
/* le titre-bouton : toute la ligne se touche, le petit carré filaire à
   droite parle la langue des feuilles de la barre ; le trait vertical du +
   s'efface quand c'est ouvert, il reste un moins */
.recit h3 .pli-titre{
  appearance:none;background:none;border:0;margin:0;padding:.2rem 0;
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;
  text-align:left;cursor:pointer;min-height:44px;
}
.pli-titre .carre{
  flex:none;display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:4px;
  border:1px solid color-mix(in srgb,var(--gris) 40%,transparent);color:var(--ambre);
}
.pli-titre .carre .ic{display:block;width:15px;height:15px}
.pli-titre .carre .ic path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.pli-titre .carre .barre-v{transform-origin:center;transition:transform .3s ease}
.pli-titre[aria-expanded="true"] .carre .barre-v{transform:scaleY(0)}
/* le pli : une rangée de grille qui va de 0fr à 1fr, la seule façon
   d'animer une hauteur auto sans la mesurer */
.pli{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1)}
.pli>div{overflow:hidden;min-width:0}
.pli.est-ouvert{grid-template-rows:1fr}
@media (prefers-reduced-motion: reduce){
  .pli{transition-duration:.001ms}
  .pli-titre .carre .barre-v{transition-duration:.001ms}
}

/* petits écrans */
@media (max-width:47.99rem){
  .barre{gap:.8rem}
  .hero-tete .etat{flex-basis:100%}
  .hero-phrase{max-width:none}
  .jauges{gap:0 2rem}
  .jauge{flex:1 1 8rem}
}