/* ============================================================================
   Marquee — le site. Direction « La marquise allumée » (contrat de direction :
   .impeccable/surfaces/web-index-html.md) : le bandeau est la seule source de
   lumière, et la page se lit dans son halo.
   Base maison : Catppuccin Mocha, jetons en français, polices système.
   ============================================================================ */

/* La lumière qui baisse (section « honnete ») : un nombre, pour qu'elle passe
   en fondu. Sans @property, elle change d'un coup ; rien d'autre ne casse. */
@property --baisse {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

:root {
  /* Toutes les couleurs vivent ici, et seulement ici (verifier.sh, contrôle « couleurs »). */
  color-scheme: dark;
  --fond: #1e1e2e;
  --fond-profond: #181825;
  --lunette: #11111b;
  --texte: #cdd6f4;
  --texte-doux: #a6adc8;
  --accent: #89b4fa;
  --accent-survol: #b4befe;
  --sur-accent: #11111b;
  --halo: #89b4fa;
  --halo-demo: var(--halo);
  --reflet: #cba6f7;
  --neutre: #6c7086;
  --vert: #a6e3a1;
  --verre: rgba(49, 50, 68, 0.55);
  --verre-survol: rgba(69, 71, 90, 0.72);
  --bord: rgba(205, 214, 244, 0.14);
  --bord-vif: rgba(205, 214, 244, 0.3);
  --arete: rgba(205, 214, 244, 0.1);
  --voile: rgba(17, 17, 27, 0.74);

  /* La lumière du bandeau. Dérivée de --halo-demo, que la démo recolore aux
     couleurs de la pochette (app.js la borne) : tout ce qui éclaire la page
     suit le morceau. --baisse (0 → 1) l'abaisse et la désature vers --neutre
     quand le Mac dort. */
  --baisse: 0;
  --halo-vu: color-mix(in oklab, var(--halo-demo), var(--neutre) calc(var(--baisse) * 85%));
  --lueur-vive: color-mix(in srgb, var(--halo-vu) calc(55% - var(--baisse) * 45%), transparent);
  --lueur-forte: color-mix(in srgb, var(--halo-vu) calc(40% - var(--baisse) * 33%), transparent);
  --lueur-douce: color-mix(in srgb, var(--halo-vu) calc(18% - var(--baisse) * 14%), transparent);
  --lueur-bassin: color-mix(in srgb, var(--halo-vu) calc(15% - var(--baisse) * 11%), transparent);
  --lueur-reflet: color-mix(in srgb, var(--reflet) 9%, transparent);
  --reflet-vitre: color-mix(in srgb, var(--texte) 7%, transparent);
  --selection: color-mix(in srgb, var(--accent) 35%, transparent);
  --impulsion: color-mix(in srgb, var(--halo-vu) 80%, var(--texte));
  --ecran-schema-haut: color-mix(in srgb, var(--halo-vu) 26%, var(--lunette));
  --ecran-schema-bas: color-mix(in srgb, var(--halo-vu) 8%, var(--lunette));

  --sans: system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --titre: system-ui, -apple-system, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gouttiere: clamp(16px, 4vw, 48px);
  --respiration: clamp(88px, 13vh, 150px);
  --rayon-lunette: clamp(12px, 2vw, 28px);
  --rayon-ecran: clamp(3px, 0.5vw, 7px);
  --sortie: cubic-bezier(0.16, 1, 0.3, 1);

  transition: --baisse 1600ms ease;
}
.lumiere-basse { --baisse: 1; }
.sans-mouvement { transition: none; }

/* --- Mécanismes imposés (tâche 7, étape 3) -------------------------------- */

/* Masqué seulement si le script est là pour le révéler. */
.js:not(.sans-mouvement) .apparait { opacity: 0; }
.js:not(.sans-mouvement) .apparait.vu { animation: apparition 600ms ease-out both; }
/* app.js pose aussi « vu » quand le défilement pilote l'animation : sans le
   second sélecteur, la règle ci-dessus (plus spécifique) l'emportait et tout
   apparaissait au chargement, au lieu d'apparaître au défilement. */
@supports (animation-timeline: view()) {
  .js:not(.sans-mouvement) .apparait,
  .js:not(.sans-mouvement) .apparait.vu { animation: apparition linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
}
@keyframes apparition { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }

/* Les contrôles qui n'existent qu'avec le script. */
.js-seulement { display: none; }
.js .js-seulement { display: inline-flex; }
.js .sans-js { display: none; }

/* La démo : un 1920×720 réduit à la largeur de son cadre. */
[data-demo] { position: relative; aspect-ratio: 1920 / 720; overflow: hidden; }
[data-demo] iframe { position: absolute; inset: 0 auto auto 0; width: 1920px; height: 720px; border: 0;
  transform: scale(var(--echelle, 0.5)); transform-origin: 0 0; }

/* --- Base ----------------------------------------------------------------- */

* { box-sizing: border-box; }

html { scrollbar-color: var(--bord-vif) var(--fond-profond); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.sans-mouvement) { scroll-behavior: smooth; }
}

/* La pièce est plus sombre que le fond maison : la seule lumière vient de l'écran. */
body {
  margin: 0;
  background: var(--fond-profond);
  color: var(--texte);
  font: 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--selection); color: var(--texte); }

a { color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

code {
  padding: 0.05em 0.35em;
  border-radius: 6px;
  background: var(--verre);
  font-family: var(--mono);
  font-size: 0.9em;
}

pre {
  margin: 0;
  overflow-x: auto;
  padding: 18px 22px;
  border: 1px solid var(--bord);
  border-radius: 16px;
  background: var(--lunette);
  color: var(--texte);
  font: 14px/1.65 var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: start;
  scrollbar-width: thin;
}
pre code { padding: 0; background: none; font: inherit; }

/* --- En-tête -------------------------------------------------------------- */

/* Transparent et discret : il ne doit pas faire une seconde source de lumière. */
header.site {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px var(--gouttiere);
}
header.site .marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  font-size: 18px;
  letter-spacing: -0.01em;
  text-decoration: none;
}
header.site nav { display: flex; gap: 22px; margin-inline-start: auto; }
header.site nav a,
header.site .langue {
  color: var(--texte-doux);
  font-size: 15px;
  text-decoration: none;
  transition: color 200ms ease;
}
header.site nav a:hover,
header.site .langue:hover { color: var(--texte); }
/* Petit et posé dans la lueur qui monte du bandeau : en encre pleine, sinon il
   passe sous le contraste AA quand la pochette est claire. */
header.site .langue {
  padding: 3px 12px;
  border: 1px solid var(--bord);
  border-radius: 999px;
  color: var(--texte);
  font-size: 13px;
}
header.site .langue:hover { border-color: var(--bord-vif); }
header.site [aria-current="page"] { color: var(--texte); }

/* --- Le bandeau : l'objet et sa lumière ----------------------------------- */

/* Un seul dessin pour tous les bandeaux de la page (accroche, sections, logement,
   démo) ; les exemples et les paires (aperçus, étapes) n'en gardent que la
   lunette, sans lumière. --portee règle l'étendue de la lueur, --cone l'intensité de la
   lumière posée dessous ; l'accroche garde les valeurs pleines. */
.bandeau {
  position: relative;
  padding: clamp(5px, 1%, 14px);
  background: var(--lunette);
  border-radius: var(--rayon-lunette);
  /* Pas d'ombre portée : un écran allumé n'assombrit pas ce qu'il éclaire. */
  box-shadow: inset 0 1px 0 var(--arete);
}

/* La lueur : un panneau lumineux rayonne selon sa forme, plus fort vers le bas,
   où tombe la lumière. Toute sa couleur vient de --halo-demo : bleue sans
   script, aux couleurs de la pochette quand la démo tourne. */
.bandeau::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow:
    0 0 calc(clamp(40px, 5vw, 80px) * var(--portee, 1)) 0 var(--lueur-vive),
    0 calc(clamp(8px, 1.5vw, 24px) * var(--portee, 1)) calc(clamp(80px, 11vw, 160px) * var(--portee, 1)) calc(clamp(0px, 1vw, 16px) * var(--portee, 1)) var(--lueur-forte),
    0 calc(clamp(30px, 5vw, 70px) * var(--portee, 1)) calc(clamp(140px, 20vw, 300px) * var(--portee, 1)) calc(clamp(30px, 6vw, 90px) * var(--portee, 1)) var(--lueur-douce);
  pointer-events: none;
}

/* Le cône : la lumière posée sur la page, là où se lit le titre. Son centre est
   au bord bas de l'écran (25 % de la boîte) et son rayon s'arrête avant le haut
   de la boîte : aucun bord franc ne se dessine sur les côtés. */
.bandeau::after {
  content: "";
  position: absolute;
  inset: 50% -40% auto;
  height: 200%;
  z-index: -2;
  opacity: var(--cone, 1);
  background:
    radial-gradient(ellipse 50% 24% at 50% 25%, var(--lueur-forte), var(--lueur-douce) 50%, transparent 100%),
    radial-gradient(ellipse 24% 16% at 66% 25%, var(--lueur-reflet), transparent 100%);
  pointer-events: none;
}

.ecran {
  position: relative;
  aspect-ratio: 8 / 3;
  overflow: hidden;
  border-radius: var(--rayon-ecran);
  background: var(--lunette);
}
.ecran video,
.ecran img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* La vitre : un reflet à peine visible, pour qu'on lise un objet et non une capture. */
.ecran::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(168deg, var(--reflet-vitre) 0%, transparent 32%);
  pointer-events: none;
}

/* Le lien vers la vidéo (sans script) et le bouton « Lire » (mouvement réduit),
   accrochés au bord bas de la lunette, dans son coin droit : ils mordent sur
   la lunette (5 px, son épaisseur minimale), jamais sur l'écran, et ne prennent
   que le reste de l'espace qui sépare le bandeau de son titre. En mouvement,
   rien : la vidéo joue seule. */
.bandeau > .lecture {
  position: absolute;
  top: calc(100% - 5px);
  right: var(--rayon-lunette);
  margin: 0;
}
.js:not(.sans-mouvement) .lecture { display: none; }
/* Le bouton tient son affichage de .js-seulement : ne pas le redéclarer ici,
   il apparaîtrait sans script. */
.lecture a { display: inline-flex; }
.lecture a,
.lire {
  align-items: center;
  min-height: 28px;
  padding: 0 14px;
  border: 1px solid var(--bord-vif);
  border-radius: 999px;
  background: var(--lunette);
  color: var(--texte);
  font: 600 13px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms ease;
}
.lecture a:hover,
.lire:hover { background: var(--verre-survol); }

/* --- L'accroche ----------------------------------------------------------- */

.accroche {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: clamp(28px, 5vh, 52px);
  padding: clamp(12px, 3vh, 32px) var(--gouttiere) clamp(56px, 9vh, 104px);
  /* La lumière déborde du bandeau, pas de la page : sans ce découpage, la lueur
     élargissait le document et faisait défiler la page de côté. */
  overflow-x: clip;
}

/* Le bandeau prend toute la largeur que lui laissent le titre et les appels,
   pour que ceux-ci restent dans le premier écran. */
.accroche .bandeau {
  width: min(100%, 1320px, max(480px, calc((100vh - 400px) * 8 / 3)));
  width: min(100%, 1320px, max(480px, calc((100svh - 400px) * 8 / 3)));
}

/* La mise sous tension, une seule fois, au chargement : l'écran s'éclaire,
   puis la lumière gagne la page. Sans script ou sans mouvement, tout est déjà
   allumé. */
.js:not(.sans-mouvement) .accroche .ecran::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--lunette);
  pointer-events: none;
  animation: extinction 700ms 250ms var(--sortie) both;
}
.js:not(.sans-mouvement) .accroche .bandeau::before { animation: allumage 1400ms 450ms var(--sortie) both; }
.js:not(.sans-mouvement) .accroche .bandeau::after { animation: allumage 1600ms 600ms var(--sortie) both; }
@keyframes extinction { from { opacity: 1; } to { opacity: 0; } }
@keyframes allumage { from { opacity: 0; scale: 0.92; } }

.accroche-texte {
  display: grid;
  justify-items: center;
  text-align: center;
  max-width: 1320px;
}
.accroche h1 {
  margin: 0;
  font-family: var(--titre);
  font-size: clamp(30px, 3.9vw, 58px);
  font-weight: 650;
  line-height: 1.06;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
/* En encre pleine, pas en --texte-doux : sous le halo, le gris doux tombait à
   3,8:1 (mesuré). La hiérarchie avec le titre tient par la taille et la graisse. */
.chapeau {
  margin: 14px 0 0;
  max-width: 64ch;
  color: var(--texte);
  font-size: clamp(17px, 1.35vw, 19px);
  text-wrap: pretty;
}

.appels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 28px 0 0;
}
.appel {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--bord);
  border-radius: 999px;
  background: var(--verre);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: background-color 200ms ease, border-color 200ms ease, translate 200ms var(--sortie);
}
.appel:hover { background: var(--verre-survol); border-color: var(--bord-vif); }
.appel:active { translate: 0 1px; }
.appel-principal {
  border-color: transparent;
  background: var(--accent);
  color: var(--sur-accent);
  box-shadow: 0 12px 32px -14px var(--lueur-forte);
}
.appel-principal:hover { background: var(--accent-survol); border-color: transparent; }

/* --- Les sections --------------------------------------------------------- */

/* Une grammaire pour toutes : l'image (ou le bandeau logé), puis le texte,
   centrés dans la lumière. Plus d'air au-dessus d'un titre qu'en dessous.
   Le découpage horizontal, comme à l'accroche : le cône déborde de côté. */
.scene,
.exemples,
.fonctionnement,
.demo,
.fin {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: clamp(36px, 5vh, 56px);
  padding: var(--respiration) var(--gouttiere) 0;
  overflow-x: clip;
}

/* Sans cône (--cone: 0), pas de boîte du tout. Les bandeaux par paires ou en
   grille (exemples, paire d'aperçus, paire d'étapes) n'éclairent rien : la
   page n'a qu'une source de lumière. */
.logement .bandeau::after,
.mini::before,
.mini::after,
.diptyque .bandeau::before,
.diptyque .bandeau::after,
.etape .bandeau::before,
.etape .bandeau::after { content: none; }

main h2 {
  margin: 0;
  font-family: var(--titre);
  font-size: clamp(32px, 3.6vw, 50px);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
main h3 {
  margin: 0;
  font-family: var(--titre);
  font-size: clamp(20px, 1.6vw, 23px);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.scene-texte {
  display: grid;
  justify-items: center;
  width: min(100%, 64rem);
  text-align: center;
}
.lead {
  max-width: 40rem;
  margin: 18px 0 0;
  font-size: clamp(18px, 1.35vw, 20px);
  text-wrap: pretty;
}

/* Les points d'une section : une rangée de filets, pas de cartes. */
.points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
  gap: 28px 36px;
  width: 100%;
  margin: 44px 0 0;
  text-align: start;
}
.points > div,
.annotations > div,
.securite dl > div,
.flux > div {
  padding-top: 14px;
  border-top: 1px solid var(--bord);
}
main dt { font-weight: 650; letter-spacing: -0.005em; }
main dd { margin: 6px 0 0; color: var(--texte-doux); font-size: 16px; line-height: 1.55; text-wrap: pretty; }

/* Les annotations de l'aperçu : une fiche, une ligne par zone de l'écran. */
.annotations {
  display: grid;
  width: min(100%, 44rem);
  margin: 40px 0 0;
  text-align: start;
}
.annotations > div {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 4px 24px;
  padding-block: 14px 16px;
}
.annotations dd { margin: 0; }

.preuves {
  max-width: 44rem;
  margin: 36px 0 0;
  color: var(--texte-doux);
  font-size: 15px;
  text-align: center;
  text-wrap: pretty;
}
.preuves a,
.lead a {
  color: var(--texte);
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 200ms ease;
}
.preuves a:hover { text-decoration-color: var(--texte); }

/* L'image propre à chaque section : un bandeau plus petit, à la lueur plus
   courte, et une lumière posée plus douce, pour que le texte qui suit reste
   lisible sur son pire pixel. */
.scene-media {
  width: min(100%, 880px);
  margin: 0;
  --portee: 0.62;
  --cone: 0.5;
}
.diptyque {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 40px 48px;
  width: min(100%, 1180px);
}
.diptyque figure { margin: 0; }
/* En encre pleine : juste sous un bandeau, la lueur est la plus forte, et le
   gris doux y tombait à 2,9:1 (mesuré). */
figcaption {
  margin-top: 22px;
  color: var(--texte);
  font-size: 14px;
  text-align: center;
}

/* --- Le récit et le logement ---------------------------------------------- */

/* Le bandeau suit le récit (de « apercu » à « honnete ») : logé en haut de
   l'écran, il montre ce dont parle la section lue ; la page défile sous sa
   lumière. Pas de backdrop-filter : un élément collant le paierait à chaque
   image. Sans script, en mouvement réduit ou sur un écran étroit, il n'existe
   pas, et chaque section montre sa propre image. */
.js .logement,
.js .lumiere { display: none; }

.logement {
  position: sticky;
  top: 16px;
  z-index: 3;
  width: clamp(400px, 36vw, 560px);
  margin: 0 auto;
  --portee: 0.5;
  --cone: 0;
  --rayon-lunette: 20px;
  pointer-events: none;
  transition: opacity 500ms ease;
}
.logement .bandeau { transition: scale 900ms var(--sortie); }
/* Le plafond : ce qui défile s'efface avant de passer sous le bandeau. */
.logement::before {
  content: "";
  position: absolute;
  z-index: -3;
  top: -16px;
  left: 50%;
  /* Moins une barre de défilement : il ne doit pas élargir la page. */
  width: calc(100vw - 24px);
  height: calc(100% + 16px + 96px);
  translate: -50% 0;
  /* Opaque jusqu'à 24 px sous le bandeau, puis un fondu de 72 px. */
  background: linear-gradient(var(--fond-profond) calc(100% - 72px), transparent);
}
/* Il ne s'allume qu'une fois le grand bandeau de l'accroche sorti de l'écran. */
.js .recit:not(.allume) .logement { opacity: 0; }
.js .recit:not(.allume) .logement .bandeau { scale: 0.92; }

.logement .plan {
  position: absolute;
  inset: 0;
}
.js .logement .plan { opacity: 0; transition: opacity 600ms ease; }
.js .logement .plan.actif { opacity: 1; }

/* Le projecteur de l'aperçu : l'écran s'assombrit, sauf la zone que décrit la
   ligne lue. Positions relevées sur les captures 1440×540. */
.logement .projecteur {
  position: absolute;
  z-index: 1;
  inset: 3.7% 1.2% 3.7% 23.6%;
  border-radius: 8px;
  box-shadow: 0 0 0 100vmax var(--voile);
  transition: inset 700ms var(--sortie), opacity 500ms ease;
}
.js .logement:not([data-zone]) .projecteur,
.js .logement[data-zone=""] .projecteur { opacity: 0; }
.logement[data-zone="heure"] .projecteur { inset: 4% 77.8% 74% 1.5%; }
.logement[data-zone="meteo"] .projecteur { inset: 26.5% 78.9% 48.5% 2.6%; }
.logement[data-zone="machine"] .projecteur { inset: 52.6% 78.3% 33.7% 2.1%; }
.logement[data-zone="projets"] .projecteur { inset: 3.7% 1.2% 3.7% 23.6%; }
.logement[data-zone="musique"] .projecteur { inset: 3.7% 1.2% 30.7% 23.6%; }

/* Le bassin de lumière, fixe sous le bandeau logé : le texte y passe en
   défilant, par-dessus. Collant et sans hauteur, il ne se repeint pas. */
.lumiere {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 0;
  pointer-events: none;
  transition: opacity 800ms ease;
}
.lumiere::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 100vh;
  background: radial-gradient(ellipse 46% 58% at 50% 12%, var(--lueur-bassin), transparent 100%);
}
.js .recit:not(.allume) .lumiere { opacity: 0; }

/* Le logement n'existe que sur un écran assez grand pour garder, sous lui, de
   quoi lire. */
@media (min-width: 64rem) and (min-height: 42rem) {
  .js:not(.sans-mouvement) .logement { display: block; }
  .js:not(.sans-mouvement) .lumiere { display: block; }
  .js:not(.sans-mouvement) .recit .scene-media { display: none; }
  .js:not(.sans-mouvement) .recit .scene {
    min-height: 76svh;
    align-content: start;
    padding-top: clamp(48px, 8vh, 96px);
  }
  /* Une ligne, puis une autre : le projecteur les suit une à une. */
  .js:not(.sans-mouvement) .recit .annotations > div { padding-block: 26px 28px; }
  .js:not(.sans-mouvement) .recit .etapes { grid-template-columns: 1fr; width: min(100%, 40rem); gap: 0; }
  .js:not(.sans-mouvement) .recit .etape { padding-block: 40px; }
}

/* --- Des touches pour tes Mac --------------------------------------------- */

.etapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: 56px 48px;
  width: min(100%, 1180px);
}
.etape {
  display: grid;
  align-content: start;
  justify-items: center;
  text-align: center;
}
.etape .scene-media { width: 100%; margin-bottom: 36px; }
.etape p { max-width: 34rem; margin: 10px 0 0; }

/* « recette » et non « json » : code.json est la classe imposée des extraits. */
.recette {
  display: grid;
  justify-items: center;
  width: min(100%, 46rem);
  text-align: center;
}
.recette pre { width: 100%; margin-top: 20px; }
.recette p { max-width: 40rem; margin: 18px 0 0; color: var(--texte-doux); font-size: 16px; }

/* --- Il ne te ment jamais ------------------------------------------------- */

/* La pastille de l'écran, telle quelle : l'âge écrit, pas un chiffre figé.
   Quand la lumière baisse, c'est elle qui reste lisible. */
.pastille-age {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.02em 0.75em 0.08em;
  border: 1px solid var(--bord-vif);
  border-radius: 999px;
  background: var(--lunette);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
  /* text-wrap et non white-space : verifier.sh lit « white » comme une couleur. */
  text-wrap: nowrap;
}
.pastille-age::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--texte-doux);
}

/* --- Des exemples, beaucoup ----------------------------------------------- */

.profils {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: 64px 36px;
  width: min(100%, 1200px);
}
.profil {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: start;
  min-width: 0;
}
.profil h3 { margin-top: 30px; }
.profil > p { margin: 8px 0 0; color: var(--texte-doux); font-size: 16px; text-wrap: pretty; }
.profil details { margin-top: 12px; }
.profil summary {
  width: fit-content;
  min-height: 40px;
  padding-block: 8px;
  color: var(--texte);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.profil summary::marker { color: var(--accent); }
.profil summary::-webkit-details-marker { color: var(--accent); }
.profil summary:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.profil pre { margin-top: 8px; padding: 14px 16px; font-size: 12.5px; }

/* Chacun son petit bandeau et sa grille de touches, sans lueur. */
.mini { --rayon-lunette: 18px; }
.grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3%;
  margin: 0;
  padding: 5% 3.5%;
  list-style: none;
}
.touche {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  min-width: 0;
  padding: 6px;
  border-radius: 12px;
  background: var(--verre);
  box-shadow: inset 0 0 0 1px var(--arete);
  text-align: center;
}
.touche .icone { font-size: 24px; line-height: 1.15; }
/* Une touche d'application montre l'icône de l'app sur l'écran ; ici, jamais
   d'icône de marque : son initiale. */
.touche .appli {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--verre-survol);
  font-size: 15px;
  font-weight: 700;
}
.touche .libelle {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.15;
  hyphens: auto;
  overflow-wrap: break-word;
}
.touche .statut { color: var(--vert); font-size: 11px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.touche .en-cours { color: var(--texte-doux); }
/* Au téléphone, quatre touches de front se cassaient (« Sauve-garde »,
   « fait · 4 / min ») : deux par rangée, l'état sur une ligne. */
@media (max-width: 30rem) {
  .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); aspect-ratio: auto; }
  .touche .statut { text-wrap: nowrap; }
}

/* Les six s'allument à leur tour. */
@supports (animation-timeline: view()) {
  .js:not(.sans-mouvement) .profil.apparait:nth-child(3n+2) { animation-range: entry 10% cover 36%; }
  .js:not(.sans-mouvement) .profil.apparait:nth-child(3n) { animation-range: entry 20% cover 42%; }
}
@supports not (animation-timeline: view()) {
  .js:not(.sans-mouvement) .profil.apparait.vu:nth-child(3n+2) { animation-delay: 140ms; }
  .js:not(.sans-mouvement) .profil.apparait.vu:nth-child(3n) { animation-delay: 280ms; }
}

/* --- Comment ça marche ---------------------------------------------------- */

.fonctionnement-corps {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 48px 56px;
  align-items: start;
  width: min(100%, 1180px);
}
.schema { margin: 0; }
.schema svg { display: block; width: 100%; height: auto; overflow: visible; }
.schema figcaption { margin-top: 28px; text-align: start; }
.flux { display: grid; gap: 18px; margin: 0; }
.flux dt { color: var(--texte); font-size: 16px; }
.flux dd { font-size: 15px; }

.schema text { fill: var(--texte); font-family: var(--sans); }
.s-nom { font-size: 34px; font-weight: 650; letter-spacing: -0.01em; }
.s-titre { font-size: 24px; font-weight: 650; }
.schema .s-detail { fill: var(--texte-doux); font-size: 20px; }
.s-code { font-family: var(--mono); font-size: 21px; font-weight: 600; }
.schema .s-etiquette { fill: var(--texte); font-family: var(--mono); font-size: 18px; }
.s-pastille { fill: var(--fond-profond); stroke: var(--bord-vif); }
.s-halo { fill: var(--lueur-douce); }
.s-lunette { fill: var(--lunette); stroke: var(--arete); }
.s-ecran { fill: url(#schema-lueur); }
.s-lueur-haut { stop-color: var(--ecran-schema-haut); }
.s-lueur-bas { stop-color: var(--ecran-schema-bas); }
.s-noeud { fill: var(--verre); stroke: var(--bord); }
.s-puce { fill: var(--lunette); stroke: var(--bord-vif); }
.s-liaison { fill: none; stroke: var(--bord-vif); stroke-width: 2; }
/* Immobiles, les liaisons sont éclairées d'un bout à l'autre ; en mouvement,
   des impulsions montent vers l'écran, et seul un identifiant redescend. */
.s-impulsion { fill: none; stroke: var(--impulsion); stroke-width: 3; stroke-linecap: round; }
.js:not(.sans-mouvement) .s-impulsion { stroke-dasharray: 18 382; animation: circule 2600ms linear infinite; }
.js:not(.sans-mouvement) .s-retour { stroke-width: 2; stroke-dasharray: 10 390; animation-duration: 5200ms; animation-delay: -1700ms; }
.js:not(.sans-mouvement) .s-decale { animation-delay: -1100ms; }
@keyframes circule { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }

/* L'encadré sécurité, en verre. */
.securite {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--bord);
  border-radius: 24px;
  background: var(--verre);
  box-shadow: inset 0 1px 0 var(--arete);
}
.securite dl { display: grid; gap: 20px; margin: 22px 0 0; }

/* --- Essaie-le ------------------------------------------------------------ */

.demo { scroll-margin-top: 0; }
.demo .bandeau { width: min(100%, 1320px); --portee: 0.9; --cone: 0.55; }
/* L'affiche tient la place jusqu'à ce que la démo se charge, à l'approche. */
.demo [data-demo] { background: var(--lunette) url("/media/apercu-musique.jpg") center / cover no-repeat; }
[data-demo] > a {
  position: absolute;
  z-index: 2;
  bottom: 8%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  translate: -50% 0;
  border: 1px solid var(--bord-vif);
  border-radius: 999px;
  background: var(--lunette);
  font-weight: 600;
  text-wrap: nowrap;
}
.demo-suite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 20px;
  margin: 0;
  /* Dans le cône de la démo : encre pleine (le gris doux y tombait à 3,1:1). */
  color: var(--texte);
  font-size: 15px;
}
.plein-ecran {
  align-items: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--bord-vif);
  border-radius: 999px;
  background: var(--verre);
  color: var(--texte);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: background-color 200ms ease;
}
.plein-ecran:hover { background: var(--verre-survol); }

/* --- À ton tour : le cartouche -------------------------------------------- */

/* Le bloc titre d'un plan : des filets, des rubriques, et les deux appels. La
   dernière lueur de la page vient d'en haut et l'éclaire. */
.fin { padding-bottom: var(--respiration); }
.fin::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse 50% 60% at 50% 72%, var(--lueur-douce), transparent 100%);
  pointer-events: none;
}
.cartouche {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px;
  width: min(100%, 1040px);
  overflow: hidden;
  border: 1px solid var(--bord-vif);
  border-radius: 22px;
  background: var(--bord-vif);
}
.case {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 16px 22px 20px;
  background: var(--fond);
  text-align: start;
}
.rubrique {
  color: var(--texte-doux);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.designation strong { font-size: clamp(28px, 2.6vw, 38px); font-weight: 650; line-height: 1.05; letter-spacing: -0.02em; }
.valeur { font: 600 20px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.cibles span:not(.rubrique) { display: grid; grid-template-columns: 4em 1fr; font-size: 15px; line-height: 1.5; }
.cibles b { font-weight: 650; }
.format span:not(.rubrique),
.atelier span:not(.rubrique) { font-size: 15px; }
.atelier { grid-column: span 2; }
.action {
  align-content: end;
  min-height: 132px;
  text-decoration: none;
  transition: background-color 200ms ease;
}
.action .verbe { font-size: clamp(22px, 2vw, 28px); font-weight: 650; letter-spacing: -0.015em; }
.action:hover { background: var(--verre-survol); }
.action-principale { background: var(--accent); color: var(--sur-accent); }
.action-principale:hover { background: var(--accent-survol); }
.action:focus-visible { outline-offset: -5px; border-radius: 0; }
.action-principale:focus-visible { outline-color: var(--sur-accent); }

/* --- Page introuvable ----------------------------------------------------- */

.perdu {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: 40px;
  padding: clamp(32px, 8vh, 96px) var(--gouttiere) var(--respiration);
  overflow-x: clip;
  text-align: center;
}
.perdu .bandeau { width: min(100%, 560px); --portee: 0.5; --cone: 0.6; }
.perdu .ecran { display: grid; place-items: center; }
.perdu .horloge { font: 200 clamp(56px, 9vw, 104px)/1 var(--titre); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.perdu h1,
.perdu h2 { margin: 0; font-size: clamp(28px, 3vw, 40px); font-weight: 650; line-height: 1.1; letter-spacing: -0.02em; }
.perdu p { margin: 12px 0 0; }
.perdu .appel { margin-top: 12px; }
.perdu .langues { display: grid; gap: 48px; }

/* --- L'image de partage (og.html → og.png) -------------------------------- */

/* Une carte 1200×630 : le bandeau allumé, et la promesse posée dans sa lumière,
   comme à l'accroche. Sans script, donc déjà allumée. */
.partage {
  position: relative;
  isolation: isolate;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 56px;
  height: 630px;
  overflow: clip;
}
.partage .bandeau { width: 900px; padding: 12px; }
.partage-titre {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  font: 650 44px/1.1 var(--titre);
  letter-spacing: -0.022em;
}

/* --- Le mode d'emploi ----------------------------------------------------- */

/* Le guide se lit, il ne se regarde pas défiler : une colonne de lecture, les
   chapitres à côté, et la lumière du bandeau qui tombe d'en haut, comme si
   l'objet était posé juste au-dessus de la page. Rien n'y apparaît au
   défilement : le texte est là quand on arrive. */
.lecture header.site nav a[href="/guide/"] { color: var(--texte); }

.guide {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 14.5rem) minmax(0, 50rem);
  justify-content: center;
  align-items: start;
  gap: 40px clamp(40px, 5vw, 88px);
  padding: clamp(28px, 5vh, 64px) var(--gouttiere) var(--respiration);
  overflow-x: clip;
}
/* Elle remonte derrière l'en-tête transparent : sinon, un bord franc
   séparerait l'en-tête de la page. */
.guide::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -120px 0 auto;
  height: min(1020px, 120vh);
  background: radial-gradient(ellipse 55% 60% at 50% 0%, var(--lueur-douce), transparent 100%);
  pointer-events: none;
}

/* Les chapitres : une rangée d'ampoules, comme sur une marquise ; celle du
   chapitre lu est allumée. */
.chapitres {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 2px;
}
.chapitres a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 6px 14px;
  border-radius: 12px;
  color: var(--texte-doux);
  font-size: 15px;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease;
}
.chapitres a::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--neutre);
}
.chapitres a:hover { background: var(--verre); color: var(--texte); }
.chapitres a[aria-current="page"] { background: var(--verre); color: var(--texte); font-weight: 600; }
.chapitres a[aria-current="page"]::before { background: var(--accent); box-shadow: 0 0 10px 1px var(--lueur-vive); }
/* Le sommaire, un peu à l'écart des chapitres. */
.chapitres a:first-child { margin-bottom: 8px; }

.chapitre { min-width: 0; }
.chapitre-tete h1 {
  margin: 0;
  font-family: var(--titre);
  font-size: clamp(36px, 3.6vw, 54px);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.chapitre-tete .chapeau { margin-top: 16px; }
.chapitre-tete p:not(.chapeau) { color: var(--texte-doux); }

/* La prose : une mesure de lecture, des listes aux puces de la couleur de
   l'écran, des liens soulignés d'un filet. */
.chapitre p,
.chapitre li { max-width: 68ch; text-wrap: pretty; }
.chapitre p { margin: 16px 0 0; }
.chapitre section > ul,
.chapitre section > ol { margin: 16px 0 0; padding-inline-start: 1.3em; }
.chapitre section > ul > li + li,
.chapitre section > ol > li + li { margin-top: 8px; }
.chapitre li::marker { color: var(--accent); font-variant-numeric: tabular-nums; }
.chapitre section a {
  color: var(--texte);
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 200ms ease;
}
.chapitre section a:hover { text-decoration-color: var(--texte); }

.chapitre section { margin-top: clamp(56px, 7vh, 80px); scroll-margin-top: 24px; }
.chapitre h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(26px, 2.3vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.016em;
}
/* L'ordre compte : chaque étape porte son numéro, dans une ampoule éteinte. */
.numero {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--bord-vif);
  border-radius: 50%;
  background: var(--lunette);
  color: var(--accent);
  font-size: 16px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* Les étapes du chapitre, d'un coup d'œil, avant de commencer. */
.etapes-liste {
  margin-top: 36px;
  padding: 20px 24px 22px;
  border: 1px solid var(--bord);
  border-radius: 20px;
  background: var(--verre);
}
.etapes-liste ol { margin: 0; padding-inline-start: 1.7em; columns: 2; column-gap: 40px; }
.etapes-liste li { padding-block: 4px; break-inside: avoid; }
.etapes-liste a { color: var(--texte); text-decoration: none; }
.etapes-liste a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* Les blocs de code : la commande à copier, ou le fichier à écrire, nommé
   au-dessus comme un onglet. */
.chapitre pre { margin-top: 16px; padding: 16px 20px; font-size: 13px; }
.bloc { margin: 20px 0 0; }
.bloc + .bloc { margin-top: 14px; }
.bloc pre { margin-top: 0; }
.bloc figcaption {
  margin: 0 0 8px;
  color: var(--texte-doux);
  font-size: 13.5px;
  font-weight: 600;
  text-align: start;
}
/* Un chemin de fichier s'écrit comme du code ; une cible, en toutes lettres. */
.fichier figcaption { font: 13px/1.4 var(--mono); }

.chapitre .points { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); margin-top: 28px; }

/* Une remarque qui compte : en verre, comme les encadrés de la vitrine. */
.note {
  margin-top: 24px;
  padding: 18px 22px 20px;
  border: 1px solid var(--bord);
  border-radius: 18px;
  background: var(--verre);
}
.note p { margin: 0; }
.note p + p { margin-top: 10px; }

/* Les tableaux : des filets, pas de cases. */
.tableau { margin-top: 20px; overflow-x: auto; }
.chapitre table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.45; }
.chapitre thead th {
  padding: 0 16px 10px 0;
  border-bottom: 1px solid var(--bord-vif);
  color: var(--texte-doux);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-align: start;
  text-transform: uppercase;
}
.chapitre tbody th,
.chapitre tbody td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--bord); text-align: start; vertical-align: top; }
.chapitre tbody th { font-weight: 650; }
.chapitre tr > :last-child { padding-inline-end: 0; }

/* L'état écrit comme sur l'écran : une pastille pleine pour ce qui est
   éprouvé, un anneau pour ce qui attend ou reste facultatif. */
.statut { display: inline-flex; align-items: baseline; gap: 0.5em; color: var(--texte-doux); font-size: 14.5px; }
.statut::before {
  content: "";
  flex: none;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--texte-doux);
}
.statut.eprouve { color: var(--vert); }
.statut.eprouve::before { background: var(--vert); box-shadow: none; }
.statut.facultatif::before { box-shadow: inset 0 0 0 1.5px var(--neutre); }
@media (min-width: 40rem) { .statut { text-wrap: nowrap; } }

/* Un bandeau dans la colonne : l'objet, à l'échelle de la lecture. */
.vue-ecran { margin: 36px 0 0; --portee: 0.5; --cone: 0.35; }
.illustration { margin: 24px 0 0; }
.illustration img { display: block; width: min(100%, 400px); height: auto; margin-inline: auto; }

/* Le parcours conseillé : quatre ampoules sur un même fil, toutes allumées. */
.parcours { display: grid; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: etape; }
.parcours li {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 20px;
  padding-bottom: 30px;
  counter-increment: etape;
}
.parcours li::before {
  content: counter(etape);
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--sur-accent);
  font-size: 17px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 24px var(--lueur-forte);
}
.parcours li::after {
  content: "";
  position: absolute;
  top: 50px;
  bottom: 6px;
  left: 21.5px;
  width: 1px;
  background: var(--bord-vif);
}
.parcours li:last-child { padding-bottom: 0; }
.parcours li:last-child::after { content: none; }
.chapitre .parcours a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.chapitre .parcours a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.parcours p { grid-column: 2; margin: 2px 0 0; color: var(--texte-doux); font-size: 16px; }

/* La suite : deux cases, comme au cartouche ; le chapitre suivant est l'appel. */
.suite {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1px;
  margin-top: clamp(64px, 9vh, 104px);
  overflow: hidden;
  border: 1px solid var(--bord-vif);
  border-radius: 22px;
  background: var(--bord-vif);
}
.suite a {
  display: grid;
  align-content: space-between;
  gap: 10px;
  min-height: 112px;
  padding: 16px 22px 20px;
  background: var(--fond);
  text-decoration: none;
  transition: background-color 200ms ease;
}
.suite a:hover { background: var(--verre-survol); }
.suite .suivant { background: var(--accent); color: var(--sur-accent); text-align: end; }
.suite .suivant .rubrique { color: var(--sur-accent); }
.suite .suivant:hover { background: var(--accent-survol); }
.titre-suite { font-size: clamp(20px, 1.8vw, 26px); font-weight: 650; letter-spacing: -0.015em; }
/* Seul, l'appel ne s'étire pas sur toute la colonne. */
.suite:has(> :only-child) { width: min(100%, 26rem); margin-inline-start: auto; }
.suite a:focus-visible { outline-offset: -5px; border-radius: 0; }
.suite .suivant:focus-visible { outline-color: var(--sur-accent); }

/* Plus étroit : une seule colonne. Le texte d'abord ; la liste des chapitres
   passe après lui, en entier, plutôt que dans un bandeau qu'il faudrait
   faire défiler de côté. */
@media (max-width: 60rem) {
  .guide { grid-template-columns: minmax(0, 48rem); }
  .chapitres {
    position: static;
    order: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 28px;
    border-top: 1px solid var(--bord);
  }
  .chapitres::before {
    content: "Tous les chapitres";
    flex-basis: 100%;
    margin-bottom: 4px;
    color: var(--texte-doux);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }
  .chapitres:lang(en)::before { content: "All chapters"; }
  .chapitres a { border: 1px solid var(--bord); border-radius: 999px; }
  .chapitres a:first-child { margin-bottom: 0; }
}
/* Au téléphone, le code prend toute la largeur de l'écran : quelques
   caractères de plus avant de devoir le faire défiler. */
@media (max-width: 40rem) {
  .chapitre pre {
    margin-inline: calc(-1 * var(--gouttiere));
    border-inline: 0;
    border-radius: 0;
  }
  .etapes-liste ol { columns: 1; }
  .chapitre h2 { gap: 12px; }
  .numero { width: 34px; height: 34px; font-size: 15px; }
}

/* --- Télécharger : une page seule, hors guide, sur la prose du chapitre --- */

.telecharger header.site nav a[href="/telecharger.html"] { color: var(--texte); }
.page {
  width: min(100%, 50rem);
  margin-inline: auto;
  padding: clamp(28px, 5vh, 64px) var(--gouttiere) var(--respiration);
}
/* Le statut d'un binaire tient en une phrase, pas un mot : contrairement aux
   pastilles courtes du matériel, il doit pouvoir revenir à la ligne. */
.binaires .statut { text-wrap: pretty; white-space: normal; }
/* Le nom ne se coupe pas : c'est la colonne d'état qui cède. L'empreinte tient
   en deux lignes de 32 caractères ; entière, elle poussait le tableau hors de
   sa colonne et la fin de la somme disparaissait sans rien dire. */
.binaires tbody th code { text-wrap: nowrap; }
.binaires .empreinte { display: inline-block; box-sizing: content-box; inline-size: 32ch; font-size: 12.5px; overflow-wrap: anywhere; }
/* Au téléphone, chaque binaire devient un bloc : le nom, l'état et le lien côte
   à côte, puis l'empreinte. L'en-tête prend la même géométrie et sert de
   légende. Rien ne défile de côté : le lien se voit sans geste. */
@media (max-width: 37.5rem) {
  .binaires,
  .binaires thead,
  .binaires tbody { display: block; }
  .binaires tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 16px;
    padding-block: 12px;
    border-bottom: 1px solid var(--bord);
  }
  .binaires thead tr { padding-top: 0; border-bottom-color: var(--bord-vif); }
  .chapitre .binaires th,
  .chapitre .binaires td { display: block; padding: 0; border: 0; }
  .binaires tr > :first-child,
  .binaires tr > :last-child { grid-column: 1 / -1; }
}
.binaires .cible { display: block; margin-top: 4px; color: var(--texte-doux); font-size: 12.5px; font-weight: 400; }

/* --- Pied ----------------------------------------------------------------- */

footer.site {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
  padding: 28px var(--gouttiere) 36px;
  border-top: 1px solid var(--bord);
  background: var(--fond);
  color: var(--texte-doux);
  font-size: 14px;
}
footer.site p { margin: 0; }
footer.site p:last-child { margin-inline-start: auto; }
footer.site a { text-decoration-color: var(--bord-vif); text-underline-offset: 3px; }
footer.site a:hover { color: var(--texte); }
.coupe-animations {
  padding: 5px 14px;
  border: 1px solid var(--bord);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.coupe-animations:hover { color: var(--texte); border-color: var(--bord-vif); }
.coupe-animations[aria-pressed="true"] { background: var(--verre); color: var(--texte); }

/* --- Largeurs moyennes et téléphone --------------------------------------- */

@media (max-width: 60rem) {
  .fonctionnement-corps { grid-template-columns: minmax(0, 1fr); }
  .cartouche { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .designation,
  .cibles,
  .format,
  .atelier { grid-column: 1 / -1; }
}

@media (max-width: 40rem) {
  header.site { flex-wrap: wrap; row-gap: 6px; }
  header.site .langue { margin-inline-start: auto; }
  header.site nav { order: 3; width: 100%; margin: 0; gap: 18px; }
  .accroche .bandeau { width: 100%; }
  .appels { flex-direction: column; align-items: stretch; width: 100%; }
  .appel { justify-content: center; }
  .annotations > div { grid-template-columns: 1fr; }
  .cartouche { grid-template-columns: minmax(0, 1fr); }
  .action { grid-column: 1 / -1; min-height: 104px; }
  footer.site p:last-child { margin-inline-start: 0; }
}