/*  Site de CrecheLink — feuille de style.

    Mise en page : une colonne de lecture de 1120 px au plus, des bandes qui
    prennent toute la largeur, des « maquettes » dessinées en CSS d'après les
    vrais écrans du logiciel, et la crèche en coupe de l'accueil, dessinée en
    SVG (900 × 520) et posée en grand, avec ses bulles d'aperçu. Les couleurs
    sont celles du logiciel (bleu-vert, orange, bleu nuit) et passent toutes
    par les variables ci-dessous : mode sombre compris. Les animations se
    coupent d'elles-mêmes quand le visiteur a demandé moins de mouvement.    */

:root {
  --papier: #f6f4ef;
  --surface: #ffffff;
  --surface-2: #eef2f5;
  --encre: #17222e;
  --encre-2: #5a6b7d;
  --encre-3: #93a2b3;
  --trait: #e2e8f0;
  --nuit: #15293d;
  --nuit-texte: #b9c7d6;
  --primaire: #2e7d8f;
  --primaire-sombre: #25687a;
  --primaire-claire: #e3f1f4;
  --accent: #ef9a4d;
  --accent-claire: #fdf0e3;
  --succes: #2f9e6e;
  --succes-claire: #e4f5ee;
  --alerte: #d9982e;
  --alerte-claire: #fcf3e0;
  --info: #3e86d6;
  --ombre: 0 1px 2px rgba(23, 34, 46, .06), 0 12px 32px -16px rgba(23, 34, 46, .25);
  --ombre-forte: 0 2px 4px rgba(23, 34, 46, .08), 0 30px 60px -24px rgba(23, 34, 46, .4);

  --police-titre: "Bricolage Grotesque", "Segoe UI", Arial, sans-serif;
  --police-texte: "Instrument Sans", "Segoe UI", Arial, sans-serif;
  --largeur: 1120px;
  --rayon: 14px;
  --ressort: cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #0f1a24; --surface: #172534; --surface-2: #1d2f40;
    --encre: #e8eef4; --encre-2: #a9b8c7; --encre-3: #6f8196; --trait: #2b3f52;
    --nuit: #0b141c; --nuit-texte: #b9c7d6;
    --primaire: #5fb3c4; --primaire-sombre: #4aa0b1; --primaire-claire: #1b3a44;
    --accent: #f1a761; --accent-claire: #3d2c1b;
    --succes: #4fbf8d; --succes-claire: #1b3a2d; --alerte: #e3ad4d; --alerte-claire: #3b2f17; --info: #6aa6ea;
    --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -16px rgba(0, 0, 0, .7);
    --ombre-forte: 0 2px 4px rgba(0, 0, 0, .5), 0 30px 60px -24px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papier: #0f1a24; --surface: #172534; --surface-2: #1d2f40;
  --encre: #e8eef4; --encre-2: #a9b8c7; --encre-3: #6f8196; --trait: #2b3f52;
  --nuit: #0b141c; --nuit-texte: #b9c7d6;
  --primaire: #5fb3c4; --primaire-sombre: #4aa0b1; --primaire-claire: #1b3a44;
  --accent: #f1a761; --accent-claire: #3d2c1b;
  --succes: #4fbf8d; --succes-claire: #1b3a2d; --alerte: #e3ad4d; --alerte-claire: #3b2f17; --info: #6aa6ea;
  --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -16px rgba(0, 0, 0, .7);
  --ombre-forte: 0 2px 4px rgba(0, 0, 0, .5), 0 30px 60px -24px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papier); color: var(--encre);
  font-family: var(--police-texte); font-size: 17px; line-height: 1.55;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primaire); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--primaire-sombre); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Des titres francs et serrés, peu de texte courant : la page se lit par ses titres et ses images. */
h1, h2, h3 { font-family: var(--police-titre); line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.3rem, 1.3rem + 3.2vw, 3.7rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; }
h2 { font-size: clamp(1.85rem, 1.2rem + 2.1vw, 2.85rem); font-weight: 700; letter-spacing: -.028em; line-height: 1.06; }
h3 { font-size: 1.12rem; font-weight: 650; }
p { margin: 0; }
.lead { font-size: 1.15rem; color: var(--encre-2); max-width: 36em; }
.surtitre { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primaire); margin-bottom: .7rem; }
.petit { font-size: .9rem; color: var(--encre-2); }
.lien { appearance: none; border: 0; background: none; padding: 0; font: inherit; color: var(--primaire); font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lien:hover { color: var(--primaire-sombre); }

/* ------------------------------------------------------------ la crèche en coupe, dans sa figure */
.visuel { margin: 0; display: grid; gap: .65rem; min-width: 0; }
.visuel figcaption { font-size: .78rem; color: var(--encre-3); text-align: center; letter-spacing: .01em; }
.visuel--scene { gap: .5rem; animation: entree 1s var(--ressort) .2s both; }
.visuel--scene figcaption strong { color: var(--accent); }

/* ------------------------------------------------------------ gabarit */
.bande { padding-block: clamp(3.2rem, 7vw, 6rem); }
.bande > .colonne, .heros > .colonne, .entete > .colonne, .pied > .colonne {
  max-width: var(--largeur); margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.bande--sombre { background: var(--nuit); color: #fff; }
.bande--sombre .lead, .bande--sombre .petit { color: var(--nuit-texte); }
.bande--sombre .surtitre { color: var(--accent); }
.bande--claire { background: var(--surface); border-block: 1px solid var(--trait); }
.centre { text-align: center; margin-inline: auto; }
.centre .lead { margin-inline: auto; }

/* le titre d'une section : un surtitre, un titre fort, rien de plus */
.tete-section { display: grid; gap: .1rem; margin-bottom: clamp(1.8rem, 3.6vw, 2.8rem); max-width: 46rem; }
.tete-section.centre { justify-items: center; }
.tete-section .surtitre { margin-bottom: .45rem; }

/* des mots clés en pastilles, à la place des phrases */
.mots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.mots li {
  display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--trait); color: var(--encre);
  font-size: .9rem; font-weight: 600; line-height: 1.25;
  transition: border-color .25s ease, transform .25s var(--ressort);
}
.mots li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--primaire); }
.mots li:hover { border-color: color-mix(in srgb, var(--primaire) 45%, var(--trait)); transform: translateY(-1px); }
.mots--centre { justify-content: center; }
.mots--petits { gap: .35rem; }
.mots--petits li { font-size: .78rem; padding: .3rem .65rem; gap: .4rem; }
.mots--petits li::before { width: 5px; height: 5px; }
.mots--discrets li { background: transparent; color: var(--encre-2); font-weight: 500; }
.mots--discrets li::before { background: var(--encre-3); }
.bande--sombre .mots li { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .13); color: #fff; }
.bande--sombre .mots li::before { background: var(--accent); }
.bande--sombre .mots--discrets li { background: transparent; color: var(--nuit-texte); }
.bande--sombre .mots--discrets li::before { background: rgba(255, 255, 255, .35); }

/* les cartes : une icône, un titre court, quelques mots */
.cartes { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.carte {
  display: grid; align-content: start; gap: .45rem; min-width: 0;
  padding: 1.25rem 1.2rem 1.3rem; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre);
  transition: transform .35s var(--ressort), box-shadow .35s ease, border-color .35s ease;
}
.carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); border-color: color-mix(in srgb, var(--primaire) 32%, var(--trait)); }
.bande--claire .carte { background: var(--papier); box-shadow: none; }
.bande--claire .carte:hover { box-shadow: var(--ombre); }
.carte__icone {
  width: 44px; height: 44px; border-radius: 13px; margin-bottom: .45rem;
  background: var(--primaire-claire); color: var(--primaire); display: grid; place-items: center;
  transition: transform .35s var(--ressort);
}
.carte:hover .carte__icone { transform: scale(1.06) rotate(-4deg); }
.carte__icone svg { width: 23px; height: 23px; }
.carte h3 { font-size: 1.06rem; }
.carte p { font-size: .92rem; color: var(--encre-2); line-height: 1.45; }
@media (max-width: 1000px) { .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .cartes { grid-template-columns: 1fr; gap: .75rem; }
  .carte { padding: 1rem 1.05rem; }
  /* sur téléphone, les cartes à icône deviennent des lignes : plus courtes à faire défiler */
  .carte { grid-template-columns: auto minmax(0, 1fr); column-gap: .9rem; align-items: center; }
  .carte .carte__icone { grid-row: span 2; margin-bottom: 0; }
}

/* ------------------------------------------------------------ en-tête */
.entete {
  position: sticky; top: 0; z-index: 20;
  background: var(--papier);   /* repli pour les navigateurs sans color-mix (Android d'avant 2023) */
  background: color-mix(in srgb, var(--papier) 86%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--trait);
}
.entete__grille { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; min-height: 64px; }
.marque { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--police-titre); font-weight: 700; font-size: 1.15rem; color: var(--encre); text-decoration: none; white-space: nowrap; }
.marque img { width: 30px; height: 30px; border-radius: 9px; flex: none; }

/* les onglets : une rangée, qui défile de côté sur téléphone */
.onglets { display: flex; gap: .2rem; justify-self: center; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: .25rem .1rem; }
.onglets::-webkit-scrollbar { display: none; }
.onglet {
  flex: none; appearance: none; border: 0; background: none; cursor: pointer; font: inherit;
  color: var(--encre-2); font-weight: 600; font-size: .95rem; line-height: 1.2; white-space: nowrap;
  padding: .55rem .95rem; border-radius: 999px;
  transition: background-color .2s ease, color .2s ease, transform .15s var(--ressort);
}
.onglet:hover { color: var(--encre); background: var(--surface-2); }
.onglet[aria-selected="true"] { color: var(--primaire-sombre); background: var(--primaire-claire); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primaire) 35%, transparent); }
.onglet:active { transform: scale(.97); }
.onglet:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 900px) {
  /* Deux rangées : la marque et le bouton, puis les onglets qui défilent de côté. */
  .entete__grille { grid-template-columns: 1fr auto; min-height: 0; padding-block: .5rem 0; row-gap: .2rem; }
  .marque { grid-row: 1; grid-column: 1; }
  .entete__cta { grid-row: 1; grid-column: 2; justify-self: end; }
  .onglets { grid-row: 2; grid-column: 1 / -1; justify-self: stretch; margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
  .onglets::after { content: ""; flex: none; width: max(16px, env(safe-area-inset-right, 0px)); }
  .entete .bouton { padding: .55rem .9rem; font-size: .9rem; }
  .marque { font-size: 1.05rem; }
  .onglet { font-size: .9rem; padding: .5rem .8rem; }
}
/* Sur téléphone, les cinq rubriques tiennent sur la largeur, réparties d'un bord à l'autre :
   « Application » suffit, et les onglets se resserrent un peu. */
@media (max-width: 480px) {
  .onglets { justify-content: space-between; gap: 0; padding-inline: max(10px, env(safe-area-inset-left, 0px)); }
  .onglets::after { display: none; }
  .onglet { font-size: .8rem; padding: .46rem .42rem; }
  .onglet__suite { display: none; }
}

/* les panneaux : un seul visible, qui entre en fondu */
.panneau[hidden] { display: none; }
.panneau { animation: entree .45s var(--ressort); }

/* ------------------------------------------------------------ boutons */
.bouton {
  display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.25rem; border-radius: 999px;
  font-weight: 600; font-size: 1rem; text-decoration: none; line-height: 1.2; border: 1.5px solid transparent; cursor: pointer;
  transition: transform .15s var(--ressort), background-color .15s ease, box-shadow .15s ease;
}
.bouton svg { width: 18px; height: 18px; flex: none; }
.bouton:hover { transform: translateY(-2px); }
.bouton--accent { background: var(--accent); color: #1f1407; box-shadow: 0 8px 20px -10px rgba(239, 154, 77, .9); }
.bouton--accent:hover { color: #1f1407; box-shadow: 0 12px 24px -10px rgba(239, 154, 77, 1); }
.bouton--grand { padding: 1rem 1.7rem; font-size: 1.06rem; gap: .65rem; }
.bouton--grand svg { width: 22px; height: 22px; }

/* ------------------------------------------------------------ accueil : court en haut, la simulation tout de suite */
/* overflow: clip, pas hidden : les halos dépassent du bloc, et un bloc « hidden » peut être défilé
   par un script (scrollIntoView vers l'aperçu), ce qui décalait le titre hors de l'écran sur téléphone. */
.heros { position: relative; overflow: hidden; overflow: clip; padding-block: clamp(1rem, 2vw, 1.7rem) clamp(2.2rem, 4vw, 3.4rem); }
.heros::before, .heros::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .7; pointer-events: none; z-index: 0;
}
.heros::before { width: 560px; height: 560px; background: var(--primaire-claire); top: -220px; right: -160px; animation: derive 18s ease-in-out infinite alternate; }
.heros::after { width: 460px; height: 460px; background: var(--accent-claire); bottom: -240px; left: -160px; animation: derive 24s ease-in-out infinite alternate-reverse; }
@keyframes derive { from { transform: translate(0, 0); } to { transform: translate(-50px, 36px); } }
.heros > .colonne { position: relative; z-index: 1; display: grid; gap: .9rem; }
.heros__texte { display: grid; gap: .4rem; justify-items: center; text-align: center; max-width: 56rem; margin-inline: auto; }
.heros__texte > * { animation: entree .8s var(--ressort) both; }
.heros__texte > :nth-child(2) { animation-delay: .08s; }
.heros__texte > :nth-child(3) { animation-delay: .16s; }
.heros__texte .surtitre { margin-bottom: 0; }
/* Le titre tient sur une ligne sur ordinateur, sur deux (une phrase chacune) sur téléphone. */
.heros__texte h1 { font-size: clamp(2.3rem, 1.2rem + 3vw, 3.5rem); }
.h1__accent { color: var(--primaire); }
.sous-titre { font-family: var(--police-titre); font-weight: 600; font-size: clamp(1rem, .92rem + .45vw, 1.22rem); color: var(--encre-2); letter-spacing: -.005em; }
.sous-titre .point { color: var(--accent); margin-inline: .3em; }
@media (max-width: 560px) { .h1__accent { display: block; } }

/*  L'invitation, juste sous la crèche : « Cliquez, explorez ». C'est un bouton, cliquable sur toute
    sa surface, qui ouvre la crèche en plein écran (téléphone et ordinateur). Son entrée animée ne
    garde pas son état final (backwards) : le survol peut alors la soulever. */
.explorer {
  appearance: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  justify-self: center; display: inline-flex; align-items: center; gap: .6rem; max-width: 100%;
  padding: .45rem 1.05rem .45rem .45rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--trait);
  box-shadow: var(--ombre); font-family: var(--police-titre); font-size: 1rem; font-weight: 600; color: var(--encre); line-height: 1.35;
  transition: transform .25s var(--ressort), box-shadow .25s ease, border-color .25s ease;
  animation: entree .8s var(--ressort) .24s backwards;
}
.explorer:hover { transform: translateY(-2px); box-shadow: var(--ombre-forte); border-color: color-mix(in srgb, var(--primaire) 45%, var(--trait)); }
.explorer:active { transform: scale(.97); }
.explorer:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.explorer__icone { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-claire); color: #b8661c; display: grid; place-items: center; }
.explorer__icone svg { width: 17px; height: 17px; }
.explorer__agrandir { flex: none; width: 16px; height: 16px; margin-left: .1rem; color: var(--primaire); }
@keyframes entree { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* après la simulation : trois atouts en quelques mots, puis la démonstration */
.heros__details { display: grid; justify-items: center; gap: 1.6rem; margin-top: 1.2rem; }
.atouts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; width: min(100%, 880px); }
.atouts li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .85rem; align-items: center;
  padding: .9rem 1rem; background: var(--surface); border: 1px solid var(--trait); border-radius: 16px; box-shadow: var(--ombre);
  transition: transform .35s var(--ressort), box-shadow .35s ease;
}
.atouts li:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); }
.atouts b { grid-column: 2; font-family: var(--police-titre); font-size: 1rem; line-height: 1.2; letter-spacing: -.01em; }
.atouts li > span:not(.atout__icone) { grid-column: 2; font-size: .85rem; color: var(--encre-2); }
.atout__icone { grid-column: 1; grid-row: 1 / 3; width: 42px; height: 42px; border-radius: 12px; background: var(--primaire-claire); color: var(--primaire); display: grid; place-items: center; }
.atout__icone svg { width: 21px; height: 21px; }
.heros__cta { display: grid; justify-items: center; gap: .6rem; text-align: center; }
.heros__cta .petit { font-size: .85rem; }
@media (max-width: 760px) { .atouts { grid-template-columns: 1fr; gap: .6rem; } .atouts li { padding: .75rem .9rem; } }

/* ------------------------------------------------------------ la crèche en coupe (900 × 520), en grand */
.batiment { position: relative; width: 100%; aspect-ratio: 900 / 520; container-type: inline-size; }
.batiment svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.batiment__calques { position: absolute; inset: 0; pointer-events: none; font-size: .8rem; z-index: 1; }
@supports (font-size: 1cqw) { .batiment__calques { font-size: clamp(.62rem, 1.45cqw, .95rem); } }
@media (min-width: 761px) {
  /* En grand, mais entière à l'écran à l'ouverture : la largeur suit la hauteur de la fenêtre
     (en-tête et titre au-dessus, légende et invitation « Cliquez, explorez » dessous), sans
     descendre sous 780 px. Un portable de 1366 × 768 voit la crèche et l'invitation ; un écran
     plus haut la voit sur toute la colonne. */
  .batiment { width: min(100%, max(780px, calc((100vh - 327px) * 1.73))); margin-inline: auto; }
}
@supports (height: 100svh) {
  @media (min-width: 761px) { .batiment { width: min(100%, max(780px, calc((100svh - 327px) * 1.73))); } }
}
/*  Sur téléphone, le bâtiment entier, réduit à la largeur de l'écran, sans glisser de côté. Tout
    garde ses proportions : les textes posés sur le dessin suivent sa largeur (cqw, sans minimum),
    les bulles n'ont plus de largeur minimale. Pour les détails : le mode grand écran ci-dessous. */
@media (max-width: 760px) {
  .batiment { width: 100%; }
  .bulle { min-width: 0; }
  @supports (font-size: 1cqw) { .batiment__calques { font-size: 1.45cqw; } }
}

/* ------------------------------------------------------------ la crèche en plein écran */
/*  La vue immersive : toute la fenêtre (et le vrai plein écran quand le navigateur le permet). Le
    bâtiment y est déplacé tel quel, avec ses zones et ses animations ; il revient à sa place en
    sortant. Dans toutes les orientations, il s'ajuste à l'écran sans déformation : sur un téléphone
    en portrait, à sa largeur ; en paysage et sur ordinateur, à sa hauteur. Le titre et la croix
    flottent dans les coins vides, au-dessus du toit. */
.immersion {
  position: fixed; inset: 0; z-index: 30; background: var(--papier); overscroll-behavior: contain;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.immersion[hidden] { display: none; }
.immersion__scene {
  position: absolute; inset: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  display: grid; overflow: auto; padding: 8px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.immersion__scene::-webkit-scrollbar { display: none; }
/* le bâtiment entier, aussi grand que l'écran le permet, centré */
.immersion__scene .batiment { width: min(calc(100vw - 16px), calc((100vh - 16px) * 1.73)); margin: auto; }
@supports (height: 100dvh) { .immersion__scene .batiment { width: min(calc(100vw - 16px), calc((100dvh - 16px) * 1.73)); } }
@supports (font-size: 1cqw) { .immersion .batiment__calques { font-size: 1.45cqw; } }
.immersion .bulle { min-width: 0; }
.immersion__barre {
  position: absolute; z-index: 2; left: calc(10px + env(safe-area-inset-left, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); top: calc(10px + env(safe-area-inset-top, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; pointer-events: none;
}
.immersion__barre > * { pointer-events: auto; }
.immersion__titre {
  display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem .4rem .45rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre);
  font-family: var(--police-titre); font-weight: 600; font-size: .88rem; color: var(--encre); line-height: 1.2;
}
.immersion__titre img { width: 24px; height: 24px; border-radius: 7px; }
/* la petite croix : ronde, discrète, au coin ; sa zone de toucher déborde un peu de son dessin */
.immersion__quitter {
  position: relative; appearance: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  width: 38px; height: 38px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre); color: var(--encre);
  transition: transform .2s var(--ressort), background-color .2s ease;
}
.immersion__quitter::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.immersion__quitter svg { width: 16px; height: 16px; }
.immersion__quitter:hover { background: var(--surface-2); }
.immersion__quitter:active { transform: scale(.94); }
.immersion__quitter:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
html.immersion-active, html.immersion-active body { overflow: hidden; }
/* les aperçus, dans la vue immersive : à la mesure de l'écran (souvent un paysage peu haut) */
body.immersion .apercu--appareil.apercu--telephone { width: min(330px, calc(100vw - 24px), calc((100vh - 80px) * .4485 + 16px)); }
body.immersion .apercu--appareil.apercu--tv { width: min(760px, calc(100vw - 24px), calc((100vh - 86px) * 1.8)); }
body.immersion .apercu--appareil.apercu--pc { width: min(640px, calc(100vw - 24px), calc((100vh - 112px) * 1.59)); }
@supports (height: 100dvh) {
  body.immersion .apercu--appareil.apercu--telephone { width: min(330px, calc(100vw - 24px), calc((100dvh - 80px) * .4485 + 16px)); }
  body.immersion .apercu--appareil.apercu--tv { width: min(760px, calc(100vw - 24px), calc((100dvh - 86px) * 1.8)); }
  body.immersion .apercu--appareil.apercu--pc { width: min(640px, calc(100vw - 24px), calc((100dvh - 112px) * 1.59)); }
}

/* murs, étages, salles */
.bat__toit { fill: var(--primaire); }
.bat__murs { fill: var(--surface); stroke: var(--trait); stroke-width: 2; }
.bat__plancher { stroke: var(--trait); stroke-width: 3; }
.salle__sol { fill: var(--surface-2); }
/* les couleurs des sections du logiciel : Bébés, Grands (et Préscolaire), Moyens */
.salle--a .salle__bande { fill: #d9534a; }
.salle--b .salle__bande { fill: #df9a2e; }
.salle--b .salle__bande--prescolaire { fill: #9b6bd6; }
.salle--c .salle__bande { fill: #3d84d6; }

/* le téléphone posé sur le bureau de la directrice */
.tel-bureau__corps { fill: var(--nuit); }
.tel-bureau__ecran { fill: #e3f1f4; }
.tel-bureau__ligne { fill: #93a2b3; }
.tel-bureau__ligne--verte { fill: #4fbf8d; }
/* l'entrée : le trottoir jusqu'au mur de la maison, la façade, la porte et son auvent. La porte
   pivote sur ses gonds, côté hall : vue de face, son battant se resserre vers la droite et laisse
   voir l'ouverture. */
.dehors__sol { fill: var(--encre-3); opacity: .45; }
.facade { fill: var(--encre-3); opacity: .55; }
.auvent { fill: var(--accent); }
.porte__baie { fill: #1f3447; }
.porte__battant { fill: var(--primaire-sombre); }
.porte__vitre { fill: #e3f1f4; opacity: .55; }
.porte__poignee { fill: #fff; }
.porte { transform-box: fill-box; transform-origin: 100% 50%; transition: transform .55s cubic-bezier(.45, 0, .2, 1); }
.porte.ouverte { transform: scaleX(.12); }
.bureau { fill: var(--encre-3); opacity: .6; }
.pc__ecran { fill: var(--nuit); }
.pc__pied { fill: var(--encre-3); }
.pc__ligne { fill: #3b5068; }
.pc__ligne--nouvelle { fill: #4fbf8d; opacity: 0; transition: opacity .3s; }
.pc__voyant { fill: #4fbf8d; opacity: 0; transition: opacity .3s; }
.pc.maj .pc__ligne--nouvelle, .pc.maj .pc__voyant { opacity: 1; }
.pc.maj .pc__ecran { filter: drop-shadow(0 0 5px rgba(79, 191, 141, .9)); }
.clavier { fill: #8f9cab; }

/* la TV de l'accueil : un vrai téléviseur mural, écran allumé sur le tableau des présents */
.tv-mur__ombre { fill: #0b141c; opacity: .18; }
.tv-mur__cadre { fill: #0b141c; }
.tv-mur__ecran { fill: url(#tv-degrade); }
.tv-mur { filter: drop-shadow(0 0 6px rgba(95, 179, 196, .28)); }
.tv-mur__logo { fill: #fff; }
.tv-mur__titre { fill: #e8eef4; opacity: .9; }
.tv-mur__heure { fill: #b9c7d6; opacity: .6; }
.tv-mur__voyant { fill: #4fbf8d; }
.tv-mur__arrivee { opacity: 0; transition: opacity .5s ease; }
.tv-mur__carte-arrivee { opacity: .35; transition: opacity .5s ease; }
.tv-mur.maj .tv-mur__arrivee, .tv-mur.maj .tv-mur__carte-arrivee { opacity: 1; }
.batiment.efface .tv-mur__arrivee { opacity: 0; transition: opacity 1s ease; }
.batiment.efface .tv-mur__carte-arrivee { opacity: .35; transition: opacity 1s ease; }

/* le téléphone tenu par le parent */
.tel-main { fill: var(--nuit); }
.tel-main__ecran { fill: #e3f1f4; }
.tel-main__qr rect { fill: #17222e; }

/* le réseau de fils, toujours visible en gris ; les signaux s'allument par-dessus */
.fil { fill: none; stroke: var(--encre-3); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 2 5; opacity: .55; }

/* les éléments qu'on peut cliquer : un halo doux au survol, au clavier, pendant le petit tour de
   présentation et tant que leur bulle est ouverte (classes posées par interactions.js) */
[data-element] { transition: filter .25s ease; }
[data-element].survole, [data-element].invite {
  filter: drop-shadow(0 0 2px rgba(239, 154, 77, .95)) drop-shadow(0 0 7px rgba(239, 154, 77, .6));
  animation: halo .5s var(--ressort);
}
[data-element].choisi { filter: drop-shadow(0 0 2px rgba(239, 154, 77, 1)) drop-shadow(0 0 8px rgba(239, 154, 77, .7)); }
@keyframes halo {
  0% { filter: drop-shadow(0 0 0 rgba(239, 154, 77, 0)) drop-shadow(0 0 0 rgba(239, 154, 77, 0)); }
  55% { filter: drop-shadow(0 0 3px rgba(239, 154, 77, 1)) drop-shadow(0 0 13px rgba(239, 154, 77, .85)); }
}

/* le lecteur à l'entrée */
.lecteur-mur__boite { fill: #2a3a4c; }
.lecteur-mur__oeil { fill: #d1544a; opacity: .5; transition: fill .2s, opacity .2s; }
.lecteur-mur.actif .lecteur-mur__oeil { fill: #4fbf8d; opacity: 1; }
.lecteur-mur__onde { fill: none; stroke: #4fbf8d; stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.lecteur-mur.actif .lecteur-mur__onde { animation: onde 1s ease-out 2; }
@keyframes onde { from { opacity: .9; transform: scale(.92); } to { opacity: 0; transform: scale(1.5); } }

/* les parents qui arrivent : de la rue, à gauche, jusque devant le lecteur, dehors ; puis, la
   porte ouverte, ils la franchissent et s'effacent dans le hall */
.visiteur { opacity: 0; transform: translateX(-200px); transition: transform 1.5s cubic-bezier(.4, 0, .2, 1), opacity .5s ease; }
.visiteur.arrive { opacity: 1; transform: translateX(0); }
.visiteur.entre { opacity: 0; transform: translateX(132px); transition: transform 1.6s cubic-bezier(.45, .05, .55, .95), opacity .45s ease 1.15s; }
/* au badge, le bras se lève et le téléphone monte vers le lecteur */
.bras { transition: opacity .2s ease; }
.bras--leve { opacity: 0; }
.visiteur.badge .bras--repos { opacity: 0; }
.visiteur.badge .bras--leve { opacity: 1; }
.tel-tenu { transition: transform .3s var(--ressort); }
.visiteur.badge .tel-tenu { transform: translate(5px, -9.5px); }

/* le signal, du lecteur au téléphone de l'éducatrice concernée, et vers les bureaux :
   un trait fin, rendu lisible par un halo de sa couleur */
.signal { fill: none; stroke: var(--primaire); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; transition: stroke-dashoffset .9s ease-out, opacity .3s ease; filter: drop-shadow(0 0 2px rgba(46, 125, 143, .9)) drop-shadow(0 0 6px rgba(46, 125, 143, .45)); }
.signal--bureau { stroke: #3fb17f; transition-duration: .7s, .3s; filter: drop-shadow(0 0 2px rgba(79, 191, 141, .9)) drop-shadow(0 0 6px rgba(79, 191, 141, .45)); }
.signal.trace { stroke-dashoffset: 0; opacity: 1; }
.signal__point { fill: var(--accent); stroke: #fff; stroke-width: 1.2; opacity: 0; transition: opacity .2s; filter: drop-shadow(0 0 3px rgba(239, 154, 77, 1)) drop-shadow(0 0 7px rgba(239, 154, 77, .7)); }
.signal__point.visible { opacity: 1; }

/* les téléphones : éteints, puis allumé et vibrant pour la seule éducatrice concernée */
.tel__corps { fill: var(--nuit); }
.tel__haut-parleur { fill: #3b5068; }
.tel__ecran { fill: #0b141c; transition: fill .3s; }
.tel { transform-box: fill-box; transform-origin: center; transition: filter .3s; }
.tel.allume .tel__ecran { fill: #e3f1f4; }
.tel.allume { filter: drop-shadow(0 0 8px rgba(95, 179, 196, .95)); }
.tel.sonne { animation: vibrerTel .8s ease-in-out; }
@keyframes vibrerTel {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-2px) rotate(-4deg); }
  30% { transform: translateX(2px) rotate(4deg); }
  45% { transform: translateX(-2px) rotate(-3deg); }
  60% { transform: translateX(2px) rotate(3deg); }
  75% { transform: translateX(-1px); }
}

/* les textes posés sur le dessin */
.etiquette {
  position: absolute; transform: translateX(-50%); white-space: nowrap;
  font-weight: 600; color: var(--encre-2); font-size: .95em; line-height: 1.2;
  background: var(--surface); padding: .15em .6em; border-radius: 999px; box-shadow: var(--ombre);
  opacity: 0; transition: opacity .5s ease;
}
.batiment.presente .etiquette { opacity: 1; }
.etiquette--salle { color: var(--encre); white-space: normal; width: 23%; text-align: center; display: grid; line-height: 1.15; padding: .25em .5em; border-radius: .7em; }
.etiquette--salle small { font-weight: 500; color: var(--encre-2); font-size: .85em; }
.etiquette--etage { transform: none; font-size: .78em; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); background: none; box-shadow: none; padding: 0; opacity: 1; }
.batiment.presente .etiquette--salle:nth-of-type(3) { transition-delay: .1s; }
.batiment.presente .etiquette--salle:nth-of-type(4) { transition-delay: .25s; }
.batiment.presente .etiquette--salle:nth-of-type(5) { transition-delay: .4s; }
.puce-pc {
  position: absolute; transform: translate(-50%, 6px); white-space: nowrap; font-size: .8em; font-weight: 600;
  color: #1b3a2d; background: #cfeee0; padding: .12em .55em; border-radius: 999px; opacity: 0;
  transition: opacity .3s ease, transform .4s var(--ressort);
}
.puce-pc.visible { opacity: 1; transform: translate(-50%, 0); }

.bulle {
  position: absolute; width: 23%; min-width: 150px; transform: translate(-50%, 10px) scale(.92); opacity: 0;
  background: var(--surface); color: var(--encre); border-radius: .8em; padding: .5em .65em;
  box-shadow: var(--ombre-forte); border-left: .32em solid var(--succes); font-size: .95em; line-height: 1.25;
  transition: opacity .35s ease, transform .5s var(--ressort);
}
.bulle b { display: block; }
.bulle span { color: var(--encre-2); font-size: .9em; }
.bulle.visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
.bulle.calme { opacity: .6; }
.bulle.sonne { animation: vibrerBulle .8s ease-in-out; }
@keyframes vibrerBulle {
  0%, 100% { transform: translate(-50%, 0); }
  15% { transform: translate(calc(-50% - 3px), 0) rotate(-1.5deg); }
  30% { transform: translate(calc(-50% + 3px), 0) rotate(1.5deg); }
  45% { transform: translate(calc(-50% - 2px), 0); }
  60% { transform: translate(calc(-50% + 2px), 0); }
}
.bandeau {
  position: absolute; transform: translateX(-50%); max-width: 92%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--nuit); color: #fff; font-weight: 600; font-size: .95em; padding: .4em 1em; border-radius: 999px;
  opacity: 0; transition: opacity .4s ease;
}
.bandeau.visible { opacity: 1; }
.batiment.efface .bulle, .batiment.efface .signal, .batiment.efface .puce-pc, .batiment.efface .pc__voyant, .batiment.efface .pc__ligne--nouvelle { opacity: 0; transition: opacity 1s ease; }
.batiment.efface .tel.allume { filter: none; transition: filter 1s ease; }
.batiment.efface .tel.allume .tel__ecran { fill: #0b141c; transition: fill 1s ease; }
.batiment.efface .pc.maj .pc__ecran { filter: none; }

/* les zones cliquables : des boutons transparents posés sur le dessin */
.batiment__zones { position: absolute; inset: 0; z-index: 2; }
/*  Pas de pastille permanente : l'élément du dessin s'éclaire au survol (halo ci-dessus), la zone
    ajoute une lueur douce et une étiquette. Sur écran tactile, un petit point fixe, sans animation,
    signale les éléments principaux. */
.zone {
  position: absolute; appearance: none; background: transparent; border: 0; border-radius: 16px;
  padding: 0; cursor: pointer; min-width: 36px; min-height: 36px;
  transition: background-color .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.zone:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px rgba(239, 154, 77, .25); }
.zone[aria-expanded="true"] { background: radial-gradient(closest-side, rgba(239, 154, 77, .16), rgba(239, 154, 77, 0)); }
@media (hover: hover) {
  .zone:hover { background: radial-gradient(closest-side, rgba(239, 154, 77, .16), rgba(239, 154, 77, 0)); }
  .zone::after {
    content: attr(data-indice); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 4px);
    white-space: nowrap; background: var(--nuit); color: #fff; font-size: .74rem; font-weight: 600;
    padding: .3em .75em; border-radius: 999px; opacity: 0; pointer-events: none; z-index: 3;
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); transition: opacity .2s ease, transform .25s var(--ressort);
  }
  .zone:hover::after, .zone:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
  .zone[aria-expanded="true"]::after { opacity: 0; }
}
@media (hover: none) {
  .zone { min-width: 40px; min-height: 40px; }
  .zone[data-invite]::before {
    content: ""; position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 0 2px var(--surface); opacity: .9;
  }
  .zone[aria-expanded="true"]::before { opacity: 0; }
}

/* ------------------------------------------------------------ la bulle d'aperçu */
/*  Posée près de l'élément cliqué (position fixe calculée par interactions.js),
    avec une flèche vers lui ; sous la simulation sur téléphone (.apercu--sous). */
.apercu {
  position: fixed; z-index: 40; width: 320px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overflow: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--encre); border: 1px solid var(--trait); border-radius: 16px;
  box-shadow: var(--ombre-forte); padding: .7rem .9rem .9rem;
  opacity: 0; transform: scale(.94); transition: opacity .2s ease, transform .3s var(--ressort);
}
.apercu[hidden] { display: none; }
.apercu.visible { opacity: 1; transform: none; }
.apercu:focus { outline: none; }
/* chaque bulle à la mesure de ce qu'elle montre : encart, smartphone, écran de PC, téléviseur */
.apercu--encart { width: 340px; }
.apercu--telephone { width: 340px; }
.apercu--pc { width: 600px; }
.apercu--tv { width: 740px; }
.apercu::before {
  content: ""; position: absolute; width: 14px; height: 14px; background: var(--surface);
  border-left: 1px solid var(--trait); border-top: 1px solid var(--trait); display: none;
}
.apercu--droite::before { display: block; left: -8px; top: var(--fleche, 50%); transform: translateY(-50%) rotate(-45deg); }
.apercu--gauche::before { display: block; right: -8px; top: var(--fleche, 50%); transform: translateY(-50%) rotate(135deg); }
.apercu--bas::before { display: block; top: -8px; left: var(--fleche, 50%); transform: translateX(-50%) rotate(45deg); }
.apercu--haut::before { display: block; bottom: -8px; left: var(--fleche, 50%); transform: translateX(-50%) rotate(225deg); }
/* sous la simulation : la page défile jusqu'à l'aperçu sans en cacher le haut sous l'en-tête collant */
.apercu--sous { position: static; width: 100%; max-width: 100%; max-height: none; overflow: visible; margin-top: .9rem; transform: none; scroll-margin-top: 112px; }
.apercu--sous.visible { transform: none; }
.apercu-sous:empty { display: none; }
.apercu__tete { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; }
.apercu__titre { font-family: var(--police-titre); font-weight: 650; font-size: 1rem; }
.apercu__fermer { appearance: none; border: 0; background: transparent; color: var(--encre-3); width: 28px; height: 28px; border-radius: 50%; font-size: 1.25rem; line-height: 1; cursor: pointer; flex: none; }
.apercu__fermer:hover { background: var(--surface-2); color: var(--encre); }
.apercu__corps { display: grid; gap: .7rem; }
.apercu__note { font-size: .8rem; color: var(--encre-2); line-height: 1.4; }
.apercu__note a, .apercu__note .lien { white-space: nowrap; }

/*  L'appareil seul (téléphones, PC, TV) : ni panneau, ni titre, ni texte, ni flèche. Seule sa
    silhouette paraît, avec une ombre ; autour, le dessin reste visible et cliquable (la boîte
    laisse passer les clics, l'appareil les prend). L'apparition est animée par interactions.js :
    l'appareil grandit depuis son dessin, et y retourne à la fermeture. */
.apercu--appareil {
  background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0;
  max-height: none; overflow: visible; opacity: 1; transform: none; transition: none;
  pointer-events: none; transform-origin: 50% 50%; will-change: transform;
}
.apercu--appareil::before, .apercu--appareil .apercu__tete, .apercu--appareil .apercu__note,
.apercu--appareil .capture figcaption { display: none; }
.apercu--appareil .apercu__corps { display: block; }
.apercu--appareil .cadre-telephone, .apercu--appareil .cadre-pc__ecran, .apercu--appareil .cadre-tv__ecran,
.apercu--appareil .cadre-pc__pied, .apercu--appareil .cadre-pc__socle, .apercu--appareil .cadre-tv__pieds span { pointer-events: auto; }
.apercu--retour, .apercu--retour * { pointer-events: none !important; }   /* il retourne à sa place */
/* la largeur suit la hauteur de la fenêtre : le téléphone tient entier sous l'en-tête */
.apercu--appareil.apercu--telephone { width: min(330px, calc(100vw - 24px), calc((100vh - 110px) * .4485 + 16px)); }
@supports (height: 100dvh) {
  .apercu--appareil.apercu--telephone { width: min(330px, calc(100vw - 24px), calc((100dvh - 110px) * .4485 + 16px)); }
}
.apercu--appareil.apercu--pc { width: min(640px, calc(100vw - 24px)); }
.apercu--appareil.apercu--tv { width: min(760px, calc(100vw - 24px)); }
.apercu--appareil .cadre-telephone { max-width: none; box-shadow: inset 0 0 0 1.5px #2b3a4a, 0 34px 60px -22px rgba(9, 16, 24, .6), 0 10px 24px -10px rgba(9, 16, 24, .4); }
.apercu--appareil .cadre-pc__ecran { box-shadow: inset 0 0 0 1.5px #2b3a4a, 0 34px 64px -26px rgba(9, 16, 24, .6), 0 10px 24px -10px rgba(9, 16, 24, .38); }
.apercu--appareil .cadre-tv__ecran { box-shadow: inset 0 0 0 1.5px #2b3a4a, 0 36px 70px -28px rgba(9, 16, 24, .65), 0 10px 24px -10px rgba(9, 16, 24, .4); }

/* la croix : petite, sombre et translucide, dans un coin du cadre, au-dessus de la capture */
.apercu__croix {
  position: absolute; z-index: 3; width: 26px; height: 26px; padding: 0; border-radius: 50%; cursor: pointer;
  appearance: none; display: grid; place-items: center;
  background: rgba(15, 24, 33, .5); color: #fff; border: 1px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: .78; transition: opacity .2s ease, background-color .2s ease, transform .2s var(--ressort);
}
.apercu__croix svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.apercu__croix::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }   /* plus facile à toucher, pas plus grande à l'œil */
.apercu__croix:hover, .apercu__croix:focus-visible { opacity: 1; background: rgba(15, 24, 33, .82); transform: scale(1.08); }
.apercu__croix:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cadre-telephone, .cadre-pc__ecran, .cadre-tv__ecran { position: relative; }
/* téléphone : dans la barre d'état, au-dessus de la notification qui descend ; PC : sur les
   boutons de la fenêtre ; TV : en bas à droite, l'heure occupe le haut */
.cadre-telephone > .apercu__croix { top: 10px; right: 12px; width: 24px; height: 24px; }
.cadre-pc__ecran > .apercu__croix { top: 11px; right: 11px; }
.cadre-tv__ecran > .apercu__croix { bottom: 12px; right: 12px; }

/* l'encart du parent */
.encart__etapes { padding-left: 1.15rem; margin: 0; display: grid; gap: .35rem; font-size: .88rem; color: var(--encre-2); }
.encart__etapes b { color: var(--encre); }
.encart__puces { display: flex; flex-wrap: wrap; gap: .4rem; }
.puce { background: var(--succes-claire); color: var(--succes); font-weight: 600; font-size: .8rem; padding: .25em .7em; border-radius: 999px; opacity: 0; animation: apparaitre .4s ease forwards; }
.puce--1 { animation-delay: .5s; }
.puce--2 { animation-delay: 1.1s; }
@keyframes apparaitre { to { opacity: 1; } }

/* ------------------------------------------------------------ les vraies captures, dans leur cadre */
/*  Les captures gardent leurs proportions (largeur et hauteur écrites dans le HTML, hauteur
    automatique) : rien n'est étiré. Le téléphone défile dans son cadre si l'écran du visiteur
    est plus court que la capture. Un clic agrandit la capture sous le pointeur. */
.capture { margin: 0; display: grid; gap: .45rem; justify-items: center; }
.capture figcaption { font-size: .74rem; color: var(--encre-3); letter-spacing: .01em; }
.capture__zoom { position: relative; display: block; overflow: hidden; cursor: zoom-in; line-height: 0; outline: none; }
/* La « toile » porte l'image et ses calques animés : agrandies ensemble, ils restent alignés.
   container-type : les tailles de texte des calques sont en cqw, un pourcentage de sa largeur. */
.capture__toile { position: relative; container-type: inline-size; transform-origin: var(--ox, 50%) var(--oy, 50%); transition: transform .3s var(--ressort); }
.capture__toile > img { display: block; width: 100%; height: auto; }
.capture__zoom.zoome { cursor: zoom-out; }
.capture__zoom.zoome .capture__toile { transform: scale(var(--facteur, 2)); }
.capture__zoom:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); }

/* ------------------------------------------------------------ les captures animées */
/*  Des calques posés sur la vraie capture, en pourcentages de l'image (--x, --y, --w, --h) :
    des caches qui effacent un élément pour qu'il puisse apparaître, des « tranches » qui sont des
    morceaux de la capture elle-même (le vrai bandeau, la vraie carte) et qu'on anime, et quelques
    retouches de texte (date et heures de la démonstration). L'état de repos de chaque calque est
    son état final : sans animation (préférence du visiteur), on voit directement le résultat.
    Les animations partent quand l'image est chargée (classe « joue », posée par interactions.js),
    chacune après son délai --d ; « Rejouer » les relance. */
.anim { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); pointer-events: none; line-height: 1; }
.capture:not(.joue) .anim { visibility: hidden; }
.capture.joue .anim { animation-delay: var(--d, 0s); animation-fill-mode: both; }
.tranche { background-repeat: no-repeat; }
.retouche { display: flex; align-items: center; justify-content: flex-end; white-space: nowrap; overflow: hidden; font-family: "Segoe UI", "Instrument Sans", Arial, sans-serif; }
.retouche--gauche { justify-content: flex-start; }
.retouche--centre { justify-content: center; }
.mono { font-family: Consolas, "Cascadia Mono", "Courier New", monospace; }
.cache--part { opacity: 0; }
.capture.joue .cache--part { animation-name: anim-part; animation-duration: .35s; }
.capture.joue .pop { animation-name: anim-pop; animation-duration: .55s; animation-timing-function: var(--ressort); }
@keyframes anim-part { from { opacity: 1; } to { opacity: 0; } }
@keyframes anim-pop { 0% { opacity: 0; transform: scale(.55); } 60% { opacity: 1; transform: scale(1.18); } 100% { opacity: 1; transform: none; } }

/* les téléphones de l'équipe : le vrai bandeau descend du haut, le téléphone vibre, l'enfant s'éclaire */
.bandeau-tel { box-shadow: 0 1.2cqw 3cqw -1cqw rgba(23, 34, 46, .35); }
.capture.joue .bandeau-tel { animation-name: bandeau-descend; animation-duration: .8s; animation-timing-function: cubic-bezier(.2, .9, .25, 1.1); }
@keyframes bandeau-descend { 0% { opacity: 0; transform: translateY(-140%); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.capture.joue .cadre-telephone[data-vibre] { animation: vibrer .55s ease-in-out 1.45s both; }
@keyframes vibrer {
  0%, 100% { transform: none; }
  15% { transform: translateX(-3px) rotate(-.7deg); }
  30% { transform: translateX(3px) rotate(.7deg); }
  45% { transform: translateX(-2px) rotate(-.4deg); }
  60% { transform: translateX(2px) rotate(.4deg); }
  80% { transform: translateX(-1px); }
}
.ligne-eclairee { border: .45cqw solid #2f9e6e; box-shadow: 0 0 0 1cqw rgba(47, 158, 110, .18); }
.capture.joue .ligne-eclairee { animation-name: ligne-eclaire; animation-duration: 1.3s; animation-timing-function: ease-out; }
@keyframes ligne-eclaire {
  0% { opacity: 0; box-shadow: 0 0 0 0 rgba(47, 158, 110, 0); }
  35% { opacity: 1; box-shadow: 0 0 0 2.2cqw rgba(47, 158, 110, .32); }
  100% { opacity: 1; box-shadow: 0 0 0 1cqw rgba(47, 158, 110, .18); }
}

/* le parent : « Mon badge » s'éclaire, est touché, puis la carte du badge jaillit et le QR se dévoile */
.halo-badge { opacity: 0; border: .6cqw solid var(--accent); }
.capture.joue .halo-badge { animation-name: halo-badge; animation-duration: 1.6s; animation-timing-function: ease-in-out; }
@keyframes halo-badge {
  0% { opacity: 0; box-shadow: 0 0 0 0 rgba(239, 154, 77, 0); }
  20% { opacity: 1; box-shadow: 0 0 0 2.6cqw rgba(239, 154, 77, .4); }
  45% { box-shadow: 0 0 0 .8cqw rgba(239, 154, 77, .25); }
  70% { opacity: 1; box-shadow: 0 0 0 2.6cqw rgba(239, 154, 77, .4); }
  100% { opacity: 0; box-shadow: 0 0 0 .8cqw rgba(239, 154, 77, 0); }
}
.capture.joue .appui { animation-name: appui; animation-duration: .4s; animation-timing-function: ease-out; }
@keyframes appui { 0%, 100% { transform: none; filter: none; } 40% { transform: scale(.955); filter: brightness(.88); } }
.onde-doigt { opacity: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, .35) 60%, rgba(255, 255, 255, 0)); }
.capture.joue .onde-doigt { animation-name: onde-doigt; animation-duration: .6s; animation-timing-function: ease-out; }
@keyframes onde-doigt { 0% { opacity: 1; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.7); } }
.voile-badge { background: rgba(12, 22, 32, .55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.capture.joue .voile-badge { animation-name: anim-apparait; animation-duration: .35s; }
@keyframes anim-apparait { from { opacity: 0; } }
.badge-demo {
  display: grid; justify-items: center; gap: 2.4cqw; padding: 0 0 4.4cqw; overflow: hidden; line-height: 1.25;
  background: #fff; color: #17222e; border-radius: 6cqw; box-shadow: 0 6cqw 12cqw -5cqw rgba(0, 0, 0, .6);
  font-family: "Instrument Sans", "Segoe UI", Arial, sans-serif; transform-origin: 50% 0;
}
.capture.joue .badge-demo { animation-name: badge-jaillit; animation-duration: .65s; animation-timing-function: cubic-bezier(.2, .9, .3, 1.15); }
@keyframes badge-jaillit { 0% { opacity: 0; transform: translateY(-14%) scale(.4); } 70% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.badge-demo__tete { width: 100%; display: flex; align-items: center; justify-content: center; gap: 2.2cqw; padding: 3.6cqw 4cqw; background: linear-gradient(135deg, #3a98ab, #25687a); color: #fff; font-family: var(--police-titre); font-weight: 700; font-size: 4.6cqw; }
.badge-demo__tete img { width: 7.4cqw; height: 7.4cqw; border-radius: 2cqw; background: #fff; }
.badge-demo__qr { position: relative; width: 52%; aspect-ratio: 1; margin-top: 1.4cqw; }
.qr-fictif { display: block; width: 100%; height: 100%; }
.qr-fictif rect { fill: #17222e; }
.capture.joue .badge-demo__qr .qr-fictif { animation: qr-revele .95s linear calc(var(--d, 0s) + .5s) both; }
@keyframes qr-revele { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.badge-demo__balayage { position: absolute; left: -4%; right: -4%; top: 100%; height: .9cqw; border-radius: 1cqw; background: #2f9e6e; box-shadow: 0 0 2.4cqw 1cqw rgba(47, 158, 110, .55); opacity: 0; }
.capture.joue .badge-demo__balayage { animation: balayage .95s linear calc(var(--d, 0s) + .5s) both; }
@keyframes balayage { 0% { top: 0; opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.badge-demo__code { font-family: var(--police-titre); font-weight: 700; font-size: 6.6cqw; letter-spacing: .12em; }
.badge-demo__qui { font-size: 3.9cqw; color: #5a6b7d; }
.badge-demo__note { font-size: 3cqw; color: #93a2b3; text-transform: uppercase; letter-spacing: .08em; }
.capture.joue .badge-demo__code, .capture.joue .badge-demo__qui, .capture.joue .badge-demo__note { animation: anim-monte .4s ease-out both; }
.capture.joue .badge-demo__code { animation-delay: calc(var(--d, 0s) + 1.4s); }
.capture.joue .badge-demo__qui { animation-delay: calc(var(--d, 0s) + 1.55s); }
.capture.joue .badge-demo__note { animation-delay: calc(var(--d, 0s) + 1.7s); }
@keyframes anim-monte { from { opacity: 0; transform: translateY(40%); } }

/* l'écran TV : la carte d'arrivée se matérialise, en vert ; l'enfant rejoint les présents */
.capture.joue .carte-tv-arrivee { animation-name: carte-materialise; animation-duration: 1.1s; animation-timing-function: ease-out; }
@keyframes carte-materialise {
  0% { opacity: 0; transform: translateX(3%) scale(.95); box-shadow: 0 0 0 0 rgba(52, 179, 124, 0); }
  45% { opacity: 1; transform: none; box-shadow: 0 0 0 .7cqw rgba(52, 179, 124, .55), 0 0 3cqw rgba(52, 179, 124, .45); }
  100% { opacity: 1; transform: none; box-shadow: 0 0 0 0 rgba(52, 179, 124, 0); }
}
.tuile-tv-arrivee { background: #cfeee0; border-left: .32cqw solid #34b37c; color: #17222e; font-family: "Segoe UI", "Instrument Sans", Arial, sans-serif; }
.capture.joue .tuile-tv-arrivee { animation-name: tuile-arrive; animation-duration: .8s; animation-timing-function: cubic-bezier(.2, .9, .3, 1.1); }
@keyframes tuile-arrive { 0% { opacity: 0; transform: translateY(35%) scale(.96); box-shadow: 0 0 0 0 rgba(52, 179, 124, 0); } 60% { opacity: 1; box-shadow: 0 0 0 .5cqw rgba(52, 179, 124, .5); } 100% { opacity: 1; transform: none; box-shadow: 0 0 0 0 rgba(52, 179, 124, 0); } }
.tuile-tv-arrivee .anim { visibility: inherit; animation: none; }
.tuile-tv-arrivee__visage { border-radius: 50%; }
.tuile-tv-arrivee__pastille { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }

/* la flèche verte d'arrivée : la pastille éclot avec un petit rebond, comme sur l'écran TV du
   logiciel (fondu en 0,2 s, échelle de 0,4 à 1 en 0,5 s), puis la flèche glisse en place.
   Dessinée en SVG exactement sur la pastille de la capture ; son état de repos est l'état final. */
.pastille-anim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pastille-eclot, .pastille-fleche, .fleche-entre { transform-box: fill-box; transform-origin: center; }
.capture.joue .pastille-eclot { animation: pastille-eclot .5s cubic-bezier(.3, 1.45, .55, 1) var(--d2, 0s) both; }
@keyframes pastille-eclot { 0% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.capture.joue .pastille-fleche { animation: fleche-glisse .45s cubic-bezier(.2, .8, .3, 1) calc(var(--d2, 0s) + .14s) both; }
@keyframes fleche-glisse { from { opacity: 0; transform: translateX(-42%); } to { opacity: 1; transform: none; } }
.capture.joue .fleche-entre { animation: fleche-entre .55s cubic-bezier(.3, 1.45, .55, 1) var(--d2, 0s) both; }
@keyframes fleche-entre { 0% { opacity: 0; transform: translateX(-55%) scale(.8); } 45% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.tuile-tv-arrivee__prenom { font-weight: 700; display: flex; align-items: center; }
.tuile-tv-arrivee__nom { color: #3f5a4c; display: flex; align-items: center; }
.tuile-tv-arrivee__heure { color: #3f5a4c; }

/* le logiciel sur PC : la notification entre en glissant, puis la carte s'ajoute à la liste */
.toast-pc { box-shadow: 0 .6cqw 1.6cqw -.4cqw rgba(23, 34, 46, .35); }
.capture.joue .toast-pc { animation-name: toast-entre; animation-duration: .6s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
@keyframes toast-entre { from { opacity: 0; transform: translateX(26%); } to { opacity: 1; transform: none; } }
.capture.joue .carte-pc { animation-name: carte-glisse; animation-duration: .9s; animation-timing-function: ease-out; }
@keyframes carte-glisse {
  0% { opacity: 0; transform: translateY(-18%); box-shadow: 0 0 0 0 rgba(47, 158, 110, 0); }
  45% { opacity: 1; transform: none; box-shadow: 0 0 0 .45cqw rgba(47, 158, 110, .45); }
  100% { opacity: 1; transform: none; box-shadow: 0 0 0 0 rgba(47, 158, 110, 0); }
}
.pastille-pc { border-radius: 999px; background: #ef9a4d; color: #fff; font-weight: 700; }

/* le smartphone : la capture entière, sans défilement interne. Ouvert depuis la crèche, sa
   largeur suit la hauteur de la fenêtre (rapport de la capture 540 / 1204, voir « l'appareil
   seul ») pour que l'écran entier tienne. */
.cadre-telephone {
  width: 100%; max-width: 304px; padding: 8px; border-radius: 36px; background: #0f1821;
  box-shadow: inset 0 0 0 1.5px #2b3a4a, 0 22px 44px -24px rgba(0, 0, 0, .65);
}
.cadre-telephone__ecran { border-radius: 28px; overflow: hidden; background: #fff; }

/* l'écran de PC, sur son pied */
.cadre-pc { width: 100%; display: grid; justify-items: center; }
.cadre-pc__ecran { width: 100%; padding: 8px 8px 14px; border-radius: 10px; background: #0f1821; box-shadow: inset 0 0 0 1.5px #2b3a4a, 0 18px 36px -22px rgba(0, 0, 0, .6); }
.cadre-pc__ecran .capture__zoom { border-radius: 3px; }
.cadre-pc__pied { width: 13%; height: 22px; background: linear-gradient(180deg, #1c2a38, #2c3d4f); clip-path: polygon(22% 0, 78% 0, 92% 100%, 8% 100%); }
.cadre-pc__socle { width: 28%; height: 6px; border-radius: 4px; background: #2c3d4f; }

/* le téléviseur, cadre fin et deux pieds */
.cadre-tv { width: 100%; display: grid; }
.cadre-tv__ecran { width: 100%; padding: 6px; border-radius: 8px; background: #05090d; box-shadow: inset 0 0 0 1.5px #2b3a4a, 0 18px 36px -22px rgba(0, 0, 0, .7); }
.cadre-tv__ecran .capture__zoom { border-radius: 2px; }
.cadre-tv__pieds { display: flex; justify-content: space-between; padding-inline: 16%; }
.cadre-tv__pieds span { width: 34px; height: 10px; background: #1c2a38; clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }

/* ------------------------------------------------------------ Gestion : la facturation en vedette */
/*  Un bandeau sombre, comme un écran éteint autour du vrai tableau de bord : les couleurs y sont
    écrites en dur, il reste sombre dans les deux thèmes. */
.vedette {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 3.5vw, 3rem); align-items: center;
  padding: clamp(1.3rem, 3vw, 2.4rem); margin-bottom: clamp(1.2rem, 2.6vw, 1.8rem); border-radius: 26px; color: #fff;
  background: radial-gradient(110% 130% at 100% 0%, rgba(95, 179, 196, .28) 0%, rgba(95, 179, 196, 0) 55%), linear-gradient(155deg, #17304a, #0f1d2b);
  border: 1px solid rgba(255, 255, 255, .06); box-shadow: var(--ombre-forte);
}
.vedette__texte { display: grid; gap: .5rem; align-content: center; justify-items: start; }
.vedette__icone { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(239, 154, 77, .16); color: #f1a761; margin-bottom: .3rem; }
.vedette__icone svg { width: 24px; height: 24px; }
.vedette .surtitre { color: #f1a761; margin: 0 0 .5rem; }
.vedette .mots { gap: .4rem; }
.vedette .mots li { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .13); color: #fff; font-size: .82rem; padding: .36rem .75rem; }
.vedette .mots li::before { background: #4fbf8d; }
.vedette .capture figcaption { color: rgba(255, 255, 255, .55); }
.vedette .capture figcaption .lien { color: #8fd0dd; }
.vedette__capture { min-width: 0; }
@media (max-width: 900px) { .vedette { grid-template-columns: 1fr; } }

/* « pensé ici » : un titre et des mots clés sur une ligne */
.ici { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1.2rem 2.5rem; align-items: center; }
.ici__titre .surtitre { margin-bottom: .35rem; }
.ici__titre h3 { font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); font-weight: 700; letter-spacing: -.02em; }
.ici .mots li { background: var(--papier); }
@media (max-width: 860px) { .ici { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ Application : les vrais téléphones */
.rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); align-items: start; }
.rail__item { display: grid; gap: .8rem; justify-items: center; text-align: center; min-width: 0; }
.rail__item > [data-capture] { width: 100%; display: grid; justify-items: center; }
.rail__item .capture { width: 100%; }
/* Le survol soulève la figure, pas le cadre : le cadre vibre déjà à l'arrivée d'une notification. */
.rail__item .capture { transition: transform .4s var(--ressort); }
.rail__item .cadre-telephone { max-width: 262px; transition: box-shadow .4s ease; }
.rail__item:hover .capture { transform: translateY(-5px); }
.rail__item:hover .cadre-telephone { box-shadow: inset 0 0 0 1.5px #2b3a4a, 0 34px 54px -26px rgba(0, 0, 0, .7); }
.rail__item h3 { font-size: 1.08rem; }
.rail__item .mots { justify-content: center; }
.indice-rail { display: none; }
.note-captures { margin-top: 1rem; text-align: center; font-size: .78rem; color: var(--encre-3); }
#parents .mots--discrets { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
@media (max-width: 900px) {
  /* La rangée se fait glisser de côté ; le téléphone suivant dépasse, ce qui invite au geste. */
  .rail {
    display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
    padding: .4rem max(16px, env(safe-area-inset-left, 0px)) .8rem;
    scroll-padding-inline: max(16px, env(safe-area-inset-left, 0px));
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail::after { content: ""; flex: none; width: 1px; }
  .rail__item { flex: 0 0 min(68vw, 270px); scroll-snap-align: center; }
  .indice-rail { display: block; text-align: center; font-size: .8rem; color: var(--encre-3); margin-top: .2rem; }
}

/* ------------------------------------------------------------ Écran TV : la vraie TV, en grand */
.bande--tv { background: radial-gradient(90% 70% at 50% 30%, #1b3a52 0%, rgba(27, 58, 82, 0) 70%), var(--nuit); }
.bande--tv .tete-section { margin-bottom: 1.2rem; }
.scene-tv { max-width: 1040px; margin: clamp(1.6rem, 3.4vw, 2.6rem) auto clamp(1.4rem, 3vw, 2.2rem); }
.scene-tv .cadre-tv__ecran { box-shadow: inset 0 0 0 1.5px #2b3a4a, 0 0 0 1px rgba(255, 255, 255, .04), 0 40px 90px -40px rgba(95, 179, 196, .45); }
.scene-tv .cadre-tv__pieds span { background: #22374b; }
.scene-tv .capture figcaption { color: rgba(255, 255, 255, .5); margin-top: .35rem; }
.scene-tv .capture figcaption .lien { color: #8fd0dd; }


/* ------------------------------------------------------------ Contact : WhatsApp d'abord */
.bande--contact { background: radial-gradient(70% 90% at 50% 0%, rgba(95, 179, 196, .16) 0%, rgba(95, 179, 196, 0) 70%), var(--nuit); }
.contact-mini { display: grid; justify-items: center; gap: .8rem; max-width: 42rem; margin-inline: auto; text-align: center; }
.contact-mini .surtitre { margin-bottom: 0; }
.contact-mini .lead { margin-bottom: .8rem; }
.contact-mini__autres { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.6rem; margin-top: .5rem; }
.contact-mini__autres a { display: inline-flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; font-weight: 600; opacity: .88; transition: opacity .2s ease; }
.contact-mini__autres a:hover { color: #fff; opacity: 1; text-decoration: underline; }
.contact-mini__autres svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.etapes-mini {
  list-style: none; margin: clamp(2.6rem, 5.5vw, 4rem) auto 0; padding: 0; max-width: 960px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; counter-reset: etape;
}
.etapes-mini li {
  display: grid; gap: .2rem; align-content: start; padding: 1.05rem 1.1rem 1.15rem; border-radius: 16px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
  transition: background-color .3s ease, transform .35s var(--ressort);
}
.etapes-mini li:hover { background: rgba(255, 255, 255, .08); transform: translateY(-3px); }
.etapes-mini li::before { counter-increment: etape; content: counter(etape, decimal-leading-zero); font-family: var(--police-titre); font-weight: 700; color: var(--accent); font-size: .9rem; margin-bottom: .2rem; }
.etapes-mini b { font-family: var(--police-titre); font-size: 1.05rem; color: #fff; }
.etapes-mini span { color: var(--nuit-texte); font-size: .88rem; line-height: 1.4; }
@media (max-width: 760px) { .etapes-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pied { background: var(--nuit); color: var(--nuit-texte); padding-block: 1.4rem; font-size: .9rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.pied > .colonne { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; }
.pied a { color: #fff; text-decoration: none; }
.pied nav { display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* ------------------------------------------------------------ téléphone : espacements et tailles */
@media (max-width: 560px) {
  .lead { font-size: 1.05rem; }
  .bande { padding-block: 2.8rem; }
  .bouton--grand { padding: .95rem 1.3rem; font-size: 1rem; }
  .heros::before, .heros::after { width: 320px; height: 320px; filter: blur(40px); }
}

/* ------------------------------------------------------------ apparitions au défilement */
html.js .reveler { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .8s var(--ressort); }
html.js .reveler.visible { opacity: 1; transform: none; }
html.js .reveler--2 { transition-delay: .1s; }
html.js .reveler--3 { transition-delay: .2s; }
html.js .reveler--4 { transition-delay: .3s; }
html.js .reveler--5 { transition-delay: .4s; }
/*  En cascade : les enfants d'une grille entrent l'un après l'autre. Animation en « backwards »
    seulement : une fois finie, elle rend la main au survol (les cartes se soulèvent). */
html.js .cascade > * { opacity: 0; }
html.js .cascade.visible > * { opacity: 1; animation: entree .7s var(--ressort) backwards; }
html.js .cascade.visible > :nth-child(2) { animation-delay: .07s; }
html.js .cascade.visible > :nth-child(3) { animation-delay: .14s; }
html.js .cascade.visible > :nth-child(4) { animation-delay: .21s; }
html.js .cascade.visible > :nth-child(5) { animation-delay: .28s; }
html.js .cascade.visible > :nth-child(6) { animation-delay: .35s; }
html.js .cascade.visible > :nth-child(7) { animation-delay: .42s; }
html.js .cascade.visible > :nth-child(8) { animation-delay: .49s; }

/*  Les captures des onglets (interactions.js) : armées dès qu'elles paraissent, pour que la date
    et les heures de la démonstration soient déjà en place, puis jouées quand on les voit assez. */
.capture.en-attente, .capture.en-attente * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .reveler, html.js .cascade > * { opacity: 1; transform: none; }
  .puce { opacity: 1; }
  .apercu { transform: none; }
}