/* ==========================================================================
   Diaporamas — le composant réutilisable
   --------------------------------------------------------------------------
   Règles : .claude/rules/charte-diaporamas.md. À lire avant d'y toucher.
   S'appuie sur les jetons de style.css (couleurs, polices, rayon, transition) :
   aucune couleur en dur, et les deux thèmes viennent tout seuls.

   Ce fichier ne contient que le CADRE (scène, vues, bandeau, barre, commandes,
   mouvement) et les BRIQUES qui reviennent d'un diaporama à l'autre (pictos,
   puce, fenêtre, écran, signes, flèches). La mise en page propre à un exemple
   va dans sa propre feuille.
   ========================================================================== */

/* --- Les pictogrammes ----------------------------------------------------
   La taille est donnée par --t (en px). L'épaisseur du trait en découle :
   43,2 = 1,8 px × 24 (la grille). Le trait fait donc 1,8 px à toute taille,
   sans `vector-effect`, qui ne traverserait pas le <use>. */
.picto {
  --t: 24;
  width: calc(var(--t) * 1px);
  height: calc(var(--t) * 1px);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: calc(43.2 / var(--t));
  stroke-linecap: round;
  stroke-linejoin: round;
}
.picto--16 { --t: 16; }
.picto--20 { --t: 20; }
.picto--32 { --t: 32; }
.picto--40 { --t: 40; }
.picto--48 { --t: 48; }
.picto--64 { --t: 64; }

/* Les illustrations prennent la largeur qu'on leur donne. Leur trait est
   réglé pour un affichage autour de deux fois leur grille. */
.illu {
  display: block;
  width: 100%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Les bibliothèques de dessins (pictos, logos) sont en ligne dans la page,
   dans un <svg hidden> : `hidden` ne masque pas un SVG partout, et il gardait
   sa taille par défaut, un grand vide en haut de page. Les <use> continuent de
   trouver leurs symboles dans un SVG non affiché. */
svg[hidden] { display: none; }

/* --- Le cadre ------------------------------------------------------------- */
.diapo { position: relative; }

/* La scène : un fond UNI, en retrait. Un motif sur toute la surface a été
   essayé (papier pointé, hachures) : il gênait la lecture (2026-10-15).
   La seule décoration est le sceau, dans le coin bas droit. */
.diapo__scene {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background-color: var(--plan-creux);
}

/* Le sceau : un grand cercle coupé par le coin bas droit, et l'adresse du site
   calée dans le coin. Assez pâle pour qu'un texte passe dessus ; il signe, il
   n'informe pas (aria-hidden). Le sigle « SFBF » en grand a été essayé puis
   retiré le 2026-10-15 : l'adresse suffit. */
.diapo__sceau {
  --sceau-droite: clamp(5rem, 9vw, 8rem);
  --sceau-bas: clamp(6rem, 11vw, 10rem);
  position: absolute;
  right: calc(-1 * var(--sceau-droite));
  bottom: calc(-1 * var(--sceau-bas));
  z-index: 0;
  width: clamp(16rem, 32vw, 26rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bleu) 8%, transparent);
  pointer-events: none;
  user-select: none;
}

/* L'adresse se cale dans le COIN de la scène, sous le niveau du contenu. Les
   décalages du cercle sont repris pour la ramener à 1,5 rem du bord (un
   pourcentage de marge se calculerait sur la largeur de la scène). */
.diapo__sceau-nom {
  position: absolute;
  right: calc(var(--sceau-droite) + 1.5rem);
  bottom: calc(var(--sceau-bas) + 1.25rem);
  font-family: var(--mono);
  font-size: clamp(0.75rem, 0.62rem + 0.45vw, 1rem);
  letter-spacing: 0.04em;
  white-space: nowrap;
  /* 90 % et non 60 % : à 60 %, l'adresse n'était qu'à 2,8 de contraste en clair
     et 3,2 en sombre (Lighthouse, axe, 2026-10-16) ; à 90 %, 5,2 et 5,4. Elle
     reste un cran sous le bleu plein, et le cercle, lui, garde ses 8 %. */
  color: color-mix(in srgb, var(--bleu) 90%, transparent);
}

.diapo__vues {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

/* Sans script : les vues l'une sous l'autre, séparées par un filet. */
.diapo__vue + .diapo__vue { border-top: 1px solid var(--trait); }

.diapo__vue {
  --marge-vue: clamp(1.25rem, 4vw, 3rem);
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: clamp(26rem, 48vw, 35rem);
  padding: var(--marge-vue) var(--marge-vue) 0;
  overflow: hidden;
}

/* Avec script : toutes les vues dans la même case, la scène prend la hauteur
   de la plus haute et ne saute pas. */
.js .diapo__vue {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  border-top: 0;
  transition: opacity 400ms ease, visibility 400ms ease;
}
.js :is(.diapo__vue, [data-apparition]).est-active { visibility: visible; opacity: 1; }

/* Le ton d'une vue (--avant, --apres) ne touche plus au fond : il se lit à
   la couleur des pictos, des flèches et des écrans (.ton-avant, .ton-apres). */

.diapo__contenu { align-self: center; min-width: 0; }

.diapo__legende {
  max-width: 52ch;
  color: var(--encre-doux);
  font-size: 0.9375rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* --- Le bandeau : le titre de la vue, penché et surligné ------------------
   Toute la largeur de la scène, en bas. Le numéro en chiffres creux, le
   titre en gras sur un trait de surligneur qui se pose à l'arrivée. */
.diapo__bandeau {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 clamp(0.75rem, 2vw, 1.5rem);
  margin: clamp(1.25rem, 3vw, 2rem) calc(-1 * var(--marge-vue)) 0;
  padding: 0.5rem var(--marge-vue) clamp(1.5rem, 3.5vw, 2.5rem);
  transform: rotate(-2.5deg);
  transform-origin: 0 100%;
}

/* Police des titres et non mono : le zéro mono porte un point au centre, qui
   en chiffres creux se lit « Ø ». */
.diapo__numero {
  font-family: var(--titre);
  font-weight: 700;
  font-size: clamp(2.75rem, 1.6rem + 4.5vw, 5.5rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--bleu);
}

.diapo__titre {
  font-family: var(--titre);
  font-weight: 700;
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  padding: 0 0.15em;
  background-image: linear-gradient(transparent 56%,
    color-mix(in srgb, var(--bleu) 30%, transparent) 56% 92%,
    transparent 92%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* --- La barre : la progression, et le sommaire en même temps --------------- */
.diapo__commandes { display: none; }

.js .diapo__commandes {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: start;
  gap: 0.5rem 1rem;
  margin-top: 1rem;
}

.diapo__barre {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.5rem;
}

.diapo__segment {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem 0 0.25rem;
  font: inherit;
  text-align: left;
  color: var(--encre-doux);
  background: none;
  border: 0;
  cursor: pointer;
}
.diapo__segment:hover { color: var(--bleu); }
.diapo__segment.est-courant { color: var(--encre); }

.diapo__piste {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--trait);
  overflow: hidden;
}
.diapo__remplissage {
  display: block;
  height: 100%;
  background: var(--bleu);
  transform: scaleX(0);
  transform-origin: left;
}
.diapo__segment.est-vu .diapo__remplissage,
.diapo__segment.est-courant .diapo__remplissage { transform: scaleX(1); }

/* En lecture, la vue courante se remplit pendant sa durée : c'est la fin de
   cette animation qui fait passer à la vue suivante (voir diaporama.js). */
.diapo--lecture .diapo__segment.est-courant .diapo__remplissage {
  animation: diapo-remplir var(--duree, 8000ms) linear both;
}
.diapo--suspendu .diapo__remplissage { animation-play-state: paused; }

@keyframes diapo-remplir {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.diapo__segment-titre {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.3;
}
.diapo__segment-rang { color: var(--bleu); margin-right: 0.375rem; }

/* Les boutons ronds : lecture / pause, précédent, suivant. */
.diapo__bouton {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--bleu);
  background: transparent;
  border: 1px solid var(--trait);
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.diapo__bouton:hover:not([disabled]) { border-color: var(--bleu); }
.diapo__bouton[disabled] { color: var(--encre-doux); opacity: 0.45; cursor: default; }
.diapo__bouton--lecture { background: var(--bleu); color: var(--plan); border-color: var(--bleu); }
.diapo__bouton--lecture:hover { background: var(--bleu-vif); border-color: var(--bleu-vif); }

/* Le bouton de lecture montre ce qu'il fera, pas l'état courant. */
.diapo__bouton--lecture .picto { display: none; }
.diapo[data-etat='lecture'] .diapo__bouton--lecture .picto-pause,
.diapo[data-etat='arret']   .diapo__bouton--lecture .picto-lecture,
.diapo[data-etat='fin']     .diapo__bouton--lecture .picto-revoir { display: block; }

.diapo__annonce {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 46rem) {
  /* Le bandeau sur une ligne : sur deux, il ajoutait la hauteur d'une ligne
     à TOUTES les vues (elles prennent la hauteur de la plus haute). */
  .diapo__numero { font-size: 2.25rem; }
  .diapo__titre { font-size: clamp(1.0625rem, 0.8rem + 1.6vw, 1.375rem); }
  .diapo__bandeau { margin-top: 0.75rem; padding-bottom: 0.875rem; gap: 0 0.625rem; }
  /* Dans un diaporama, l'adresse du sceau passerait sous le titre du
     bandeau : le cercle reste, l'adresse se retire (elle reste ailleurs). */
  .diapo .diapo__sceau-nom { display: none; }
  .diapo__segment-titre { display: none; }
  .diapo__segment { padding-top: 1.125rem; }
}

/* --- Le mouvement à l'intérieur d'une vue, ou d'un bloc qui apparaît ------
   Rien ne bouge sans script : sans lui, tout est déjà à sa place.
   Deux déclencheurs : une vue de diaporama qui devient active, ou un bloc
   [data-apparition] qui arrive à l'écran (une seule fois, voir diaporama.js).
   Le second sert hors des diaporamas : « Comment ça se passe », par exemple.
   L'ordre d'entrée se règle par data-rang (0 à 12), qui pose --rang ; il
   s'hérite, donc un bloc donne son rang à tout ce qu'il contient. */
[data-rang='1']  { --rang: 1; }
[data-rang='2']  { --rang: 2; }
[data-rang='3']  { --rang: 3; }
[data-rang='4']  { --rang: 4; }
[data-rang='5']  { --rang: 5; }
[data-rang='6']  { --rang: 6; }
[data-rang='7']  { --rang: 7; }
[data-rang='8']  { --rang: 8; }
[data-rang='9']  { --rang: 9; }
[data-rang='10'] { --rang: 10; }
[data-rang='11'] { --rang: 11; }
[data-rang='12'] { --rang: 12; }

/* Entrées : data-entree vide = monter ; "gauche" = glisser depuis la gauche ;
   "zoom" = grandir depuis le centre. */
.js :is(.diapo__vue, [data-apparition]).est-active [data-entree] {
  animation: diapo-monter 650ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: calc(var(--rang, 0) * 170ms + 150ms);
}
.js :is(.diapo__vue, [data-apparition]).est-active [data-entree='gauche'] { animation-name: diapo-glisser; }
.js :is(.diapo__vue, [data-apparition]).est-active [data-entree='zoom']   { animation-name: diapo-grandir; }

/* Avant son arrivée à l'écran, un bloc à apparition garde ses éléments cachés. */
.js [data-apparition]:not(.est-active) [data-entree],
.js [data-apparition]:not(.est-active) .trace,
.js [data-apparition]:not(.est-active) .pointe { opacity: 0; }

@keyframes diapo-monter  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes diapo-glisser { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes diapo-grandir { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }

/* Les traits qui se dessinent : un chemin avec pathLength="1" et la classe
   .trace. La pointe d'une flèche (.pointe) arrive une fois le trait tracé. */
.trace-svg {
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Pas de `vector-effect: non-scaling-stroke` ici, bien qu'il garde le trait
   fin sur un dessin étiré : il compte aussi les tirets en pixels d'écran, et
   le tracé (stroke-dasharray sur pathLength="1") se coupait en pointillés sur
   les longs traits. Les dessins étirés le sont surtout dans le sens de leur
   longueur, ce qui laisse l'épaisseur presque intacte. */

.js :is(.diapo__vue, [data-apparition]).est-active .trace {
  stroke-dasharray: 1;
  animation: diapo-tracer 700ms ease-in-out both;
  animation-delay: calc(var(--rang, 0) * 170ms + 250ms);
}
.js :is(.diapo__vue, [data-apparition]).est-active .pointe {
  animation: diapo-apparaitre 200ms ease both;
  animation-delay: calc(var(--rang, 0) * 170ms + 900ms);
}
@keyframes diapo-tracer     { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes diapo-apparaitre { from { opacity: 0; } to { opacity: 1; } }

/* Le texte qui se tape (.frappe) : c'est diaporama.js qui tape, lettre à
   lettre, pour que la phrase passe à la ligne comme un vrai texte. Le texte
   entier reste lu par les lecteurs d'écran (.frappe__lu) ; la copie tapée
   leur est cachée. Un curseur clignote pendant la frappe. */
.frappe__lu {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.frappe--en-cours .frappe__tape::after {
  content: '';
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: currentColor;
  animation: diapo-curseur 900ms steps(1) infinite;
}
@keyframes diapo-curseur { 50% { opacity: 0; } }

/* Le surligneur du bandeau se pose après l'arrivée du titre. */
.js :is(.diapo__vue, [data-apparition]).est-active .diapo__numero { animation: diapo-glisser 600ms cubic-bezier(0.2, 0.7, 0.3, 1) both 100ms; }
.js :is(.diapo__vue, [data-apparition]).est-active .diapo__titre {
  animation:
    diapo-monter 600ms cubic-bezier(0.2, 0.7, 0.3, 1) both 200ms,
    diapo-surligner 800ms cubic-bezier(0.6, 0, 0.2, 1) both 650ms;
}
@keyframes diapo-surligner { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }

/* ==========================================================================
   Les briques
   ========================================================================== */

/* Une puce : un fichier, un état, une étiquette courte. */
.puce {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.2;
  color: var(--encre);
  background: var(--plan);
  border: 1px solid var(--trait);
  border-radius: 999px;
  padding: 0.4375rem 0.875rem 0.4375rem 0.625rem;
  white-space: nowrap;
}
.puce .picto { color: var(--encre-doux); }
.puce--bleue { border-color: var(--bleu); }
.puce--bleue .picto { color: var(--bleu); }

/* Une fenêtre : une interface schématisée (une IA, un logiciel, un outil). */
.fenetre {
  background: var(--plan);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
}
.fenetre--bleue { border-color: var(--bleu); border-top-width: 3px; }

.fenetre__barre {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-bottom: 1px solid var(--trait);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--encre-doux);
}
/* Les trois points d'une barre de fenêtre, dessinés en CSS : des ronds
   évidés, pas des pastilles de couleur. */
.fenetre__points {
  display: inline-flex;
  gap: 4px;
  margin-right: 0.25rem;
}
.fenetre__points::before,
.fenetre__points::after,
.fenetre__points span {
  content: '';
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--trait);
  border-radius: 50%;
}

.fenetre__corps { padding: 0.875rem; display: grid; gap: 0.75rem; }

/* Une demande tapée, dans une fenêtre d'IA. */
.demande {
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--encre);
  background: var(--plan-creux);
  border: 1px solid var(--trait);
  border-radius: calc(var(--rayon) * 0.8);
  padding: 0.625rem 0.75rem;
}

/* Un écran de résultat : une illustration et sa légende. */
.ecran { display: grid; gap: 0.625rem; }
.ecran__illu {
  background: var(--plan);
  border-radius: 6px;
}
.ecran__legende {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--encre-doux);
}

/* Des signes : une liste courte, un picto devant chaque ligne. */
.signes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.signes li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 0.625rem;
  align-items: start;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.signes .picto { margin-top: 0.1rem; }
.signes--avant { color: var(--encre-doux); }
.signes--apres .picto { color: var(--bleu); }

/* Une étiquette de flèche : ce qui passe d'un bloc à l'autre. */
.etiquette-fleche {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-doux);
}

/* Tons : la même brique, côté corvée ou côté outil. */
.ton-avant { color: var(--encre-doux); }
.ton-apres { color: var(--bleu); }

/* ==========================================================================
   La ligne de blocs : quatre blocs côte à côte qui apparaissent l'un après
   l'autre, sur une scène signée du sceau. Pour une suite (« Comment ça se
   passe ») ou un ensemble (« Nos services »). Hors diaporama : c'est
   [data-apparition] qui déclenche les entrées, une fois, à l'arrivée à l'écran.

   <div class="diapo__scene ligne-blocs" data-apparition>
     <div class="diapo__sceau">…</div>
     <div class="ligne-blocs__corps">
       <svg class="trace-svg ligne-blocs__fil">…</svg>   (le fil qui se tire)
       <ol class="ligne-blocs__liste"><li class="bloc" data-entree data-rang="1">…</li>…</ol>
     </div>
   </div>
   ========================================================================== */
.ligne-blocs {
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem) clamp(4rem, 7vw, 5.5rem);
}

.ligne-blocs__corps { position: relative; z-index: 1; }

/* Le fil court sous les repères des blocs et se tire de gauche à droite,
   plus lentement que les autres traits : il accompagne l'arrivée des blocs. */
.ligne-blocs__fil {
  position: absolute;
  top: 0.5rem;
  left: 6px;
  right: 0;
  width: calc(100% - 6px);
  height: 4px;
  color: var(--bleu);
}
.js .est-active .ligne-blocs__fil .trace { animation-duration: 1800ms; }

.ligne-blocs__liste {
  list-style: none;
  margin: 0;
  padding: 1.75rem 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem clamp(1.25rem, 3vw, 2.5rem);
}

.bloc { position: relative; display: grid; align-content: start; gap: 0.625rem; }

/* Le repère : un rond évidé posé sur le fil, au départ de chaque bloc. */
.bloc__repere {
  position: absolute;
  top: calc(-1.25rem - 4px);
  left: 0;
  width: 12px;
  height: 12px;
  border: 2px solid var(--bleu);
  border-radius: 50%;
  background: var(--plan-creux);
}

.bloc__tete {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--bleu);
  margin-bottom: 0.25rem;
}

/* Le numéro d'une étape : les chiffres creux du bandeau, en plus petit. */
.bloc__numero {
  font-family: var(--titre);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.25px var(--bleu);
}

.bloc__etiquette {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--bleu);
}

.bloc__titre {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.bloc__texte {
  color: var(--encre-doux);
  font-size: 0.9375rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* Sur deux colonnes puis une, le fil et les repères n'ont plus de sens :
   chaque bloc prend un filet en tête. */
@media (max-width: 60rem) {
  .ligne-blocs__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 0; }
  .ligne-blocs__fil,
  .bloc__repere { display: none; }
  .bloc { border-top: 1px solid var(--trait); padding-top: 1.25rem; }
}
@media (max-width: 40rem) {
  .ligne-blocs__liste { grid-template-columns: minmax(0, 1fr); }
}

/* --- Le surligneur, hors bandeau ------------------------------------------
   Le même trait que sous le titre d'une vue, pour un mot ou un titre court.
   Il se pose après l'arrivée de son bloc. */
.surligne {
  padding: 0 0.1em;
  background-image: linear-gradient(transparent 58%,
    color-mix(in srgb, var(--bleu) 28%, transparent) 58% 92%,
    transparent 92%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.js :is(.diapo__vue, [data-apparition]).est-active .surligne {
  animation: diapo-surligner 800ms cubic-bezier(0.6, 0, 0.2, 1) both;
  animation-delay: calc(var(--rang, 0) * 170ms + 650ms);
}
.js [data-apparition]:not(.est-active) .surligne { background-size: 0% 100%; }

/* ==========================================================================
   Les logos : des marques, pas des pictos
   --------------------------------------------------------------------------
   Ils viennent de logos.svg (Simple Icons) et sont des APLATS : c'est le
   dessin de la marque, on ne le redessine pas au trait. Monochromes, en
   currentColor, à la taille d'un picto de 28 px. Une technologie sans logo
   libre (Cognos) prend le picto générique de sa famille, dans la même tuile.
   ========================================================================== */
.logo {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  fill: currentColor;
}

/* ==========================================================================
   Les cadres d'écran : une capture montrée dans son appareil
   ========================================================================== */

/* Une capture d'ordinateur : dans une .fenetre, la barre porte l'adresse. */
.fenetre__image {
  display: block;
  width: 100%;
  height: auto;
}
.fenetre__adresse {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--encre-doux);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Une capture de téléphone : un boîtier sobre, au trait, sans reflet ni
   encoche dessinée. */
.telephone {
  width: 100%;
  max-width: 12.5rem;
  padding: 0.4375rem;
  background: var(--plan);
  border: 1px solid var(--trait);
  border-radius: 1.75rem;
}
.telephone__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.375rem;
}

/* ==========================================================================
   Le diaporama compact : dans une colonne (les références)
   Même moteur, même barre ; le bandeau et la scène rapetissent.
   ========================================================================== */
.diapo--compact .diapo__vue {
  --marge-vue: clamp(1.125rem, 2.5vw, 1.75rem);
  min-height: 0;
}
.diapo--compact .diapo__numero { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.diapo--compact .diapo__titre { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.diapo--compact .diapo__bandeau { padding-bottom: 1.5rem; margin-top: 1rem; }
.diapo--compact .diapo__segment-titre { display: none; }
.diapo--compact .diapo__segment { padding-top: 1.125rem; }
.diapo--compact .diapo__sceau { --sceau-droite: 6rem; --sceau-bas: 8rem; width: 18rem; }

/* ==========================================================================
   Les onglets : choisir un diaporama parmi plusieurs (les cas d'usage)
   Des intercalaires posés sur un filet, comme dans un classeur : un picto, un
   numéro en mono, le nom. L'onglet actif prend le fond de la scène et un
   trait bleu sous lui. Remplacent les pastilles du 2026-10-15 (« ce n'est pas
   super ») : des boutons ronds juraient avec les lignes de registre du site.
   Sans script, pas d'onglets : les panneaux s'affichent l'un sous l'autre.
   ========================================================================== */
.onglets { display: none; }
.js .onglets {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--trait);
}
.onglets__onglet {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.75rem;
  align-content: end;
  /* Calés en bas : un nom sur deux lignes ne décale pas les voisins. */
  align-items: end;
  padding: 0.875rem 1rem 1rem;
  font: inherit;
  text-align: left;
  color: var(--encre-doux);
  background: none;
  border: 0;
  border-radius: var(--rayon) var(--rayon) 0 0;
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.onglets__picto { grid-row: span 2; margin-bottom: 0.0625rem; transition: color var(--transition); }
.onglets__rang {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
}
.onglets__nom {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
/* Le trait de l'onglet actif, posé sur le filet ; il pousse depuis la gauche. */
.onglets__onglet::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--bleu);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.onglets__onglet:hover { color: var(--encre); }
.onglets__onglet:hover .onglets__picto { color: var(--bleu); }
.onglets__onglet[aria-selected='true'] { color: var(--encre); background: var(--plan-creux); }
.onglets__onglet[aria-selected='true'] .onglets__picto,
.onglets__onglet[aria-selected='true'] .onglets__rang { color: var(--bleu); }
.onglets__onglet[aria-selected='true']::after { transform: scaleX(1); }
/* Plus étroit : le picto et le numéro seulement, tous sur une ligne (spec 08,
   2026-10-16 ; le « deux par deux » prenait un demi-écran avant le premier
   cas). Le nom reste lu par les lecteurs d'écran ; à l'écran, l'étiquette du
   cas, juste dessous, le dit déjà. */
@media (max-width: 48rem) {
  .onglets__onglet {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.625rem 0.25rem 0.75rem;
  }
  .onglets__picto { margin: 0; }
  .onglets__nom {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
/* Sans script, les panneaux se suivent : un filet les sépare. */
.cas__panneau + .cas__panneau { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.js [data-onglets] .cas__panneau + .cas__panneau { margin-top: 0; }

/* ==========================================================================
   Sur téléphone, la hauteur (2026-10-15) : diaporama.js réduit une vue trop
   haute pour l'écran (zoom, pas en dessous de 76 %). Pour la mesurer, chaque
   vue reprend un instant sa hauteur propre (.diapo--mesure). La sonde donne
   la hauteur de référence, 100svh. Ce qui dépasse encore : les commandes
   restent collées en bas de l'écran pendant qu'on fait défiler la vue.
   ========================================================================== */
.diapo--mesure .diapo__vue { align-self: start; }
.diapo-sonde {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 100vh;
  height: 100svh;
  visibility: hidden;
  pointer-events: none;
}
@media (max-width: 46rem) {
  .diapo__commandes {
    position: sticky;
    bottom: 0;
    z-index: 3;
    padding-block: 0.5rem;
    background: var(--plan);
  }
}