/* MartialOffice — la feuille unique du site.
   Extraite de la page d'accueil le 30/10/2026, quand le site est passé à
   plusieurs pages : une règle écrite deux fois finit par diverger, et la
   seconde copie se corrige toujours trop tard. */
  /* ═══ POLICES ═══════════════════════════════════════════════════════════
     Hébergées ici, pas chez Google : une page qui vend le « rien ne sort du
     club » ne peut pas envoyer l'adresse IP de ses visiteurs à un tiers.
     Inter est en fichier variable — un seul fichier couvre 400 à 700.
     Licences OFL dans polices/. */

  @font-face {
    font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
    src:url(polices/inter-variable-latin.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
      U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
      U+FEFF,U+FFFD;
  }
  @font-face {
    font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
    src:url(polices/inter-variable-latin-ext.woff2) format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
      U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
      U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
  }
  @font-face {
    font-family:'Source Serif 4'; font-style:normal; font-weight:400; font-display:swap;
    src:url(polices/source-serif-400-latin.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
      U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
      U+FEFF,U+FFFD;
  }
  @font-face {
    font-family:'Source Serif 4'; font-style:normal; font-weight:400; font-display:swap;
    src:url(polices/source-serif-400-latin-ext.woff2) format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
      U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
      U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
  }

  /* ═══ JETONS ════════════════════════════════════════════════════════════
     Le canevas tiède, les filets d'un pixel et les panneaux de couleur
     viennent du style de référence. Le rouge de la marque y tient le rôle
     que le bleu tient chez eux : la seule action pleine de la page. */

  :root {
    /* surfaces */
    --papier:#F6F5F4;          /* le canevas, jamais blanc pur */
    --carte:#FFFFFF;           /* ce qui est posé dessus */
    --papier-creux:#EFEDEA;    /* une bande plus marquée */

    /* encre, déclinée en opacité plutôt qu'en couleurs */
    --encre:#000000;
    --encre-95:rgba(0,0,0,.95);
    --encre-60:rgba(0,0,0,.60);
    --encre-40:rgba(0,0,0,.40);
    --graphite:#5A534E;        /* corps de texte, gris chaud */
    --trait:rgba(0,0,0,.09);   /* un filet, jamais une ombre */
    --trait-fort:rgba(0,0,0,.22);

    /* l'action — une seule couleur pleine dans toute la page */
    --action:#D7263D;
    --action-survol:#B01B30;
    --action-tiede:#FCEDEF;
    --action-texte:#B01B30;

    /* le petit orchestre d'accents, en rotation sur les panneaux */
    --marigold:#FFB110;
    --corail:#F64932;
    --ciel:#62AEF0;
    --ciel-tiede:#E6F3FE;
    --nuit:#1B2A4A;            /* le navy de la marque fait l'île sombre */
    --mocha:#B18164;
    --safran:#E89D01;
    --pilule-peche:#F6D5B8;

    /* les cordes du logo */
    --corde-haut:#1B2A4A; --corde-milieu:#8A94A6; --corde-bas:#D7263D;

    /* les gants du référentiel */
    --g-bleu:#2F6FB5; --g-vert:#2E8B57; --g-rouge:#C8232F; --g-blanc:#FFFFFF;
    --g-jaune:#E0A91B; --g-bronze:#A9762F; --g-argent:#8C95A1;

    /* formes : deux rayons, et c'est tout */
    --r-carte:12px; --r-bouton:8px; --r-petit:4px; --r-pilule:9999px;

    /* rythme */
    --col:1180px; --saut:80px; --nav:60px;

    /* mouvement : 200 ms pour tout ce qui réagit au doigt, le ressort
       réservé aux marques décoratives et au héros */
    --t:200ms;
    --e:cubic-bezier(.2,.7,.3,1);
    --t-long:620ms;
    --t-ressort:560ms;
    --e-ressort:cubic-bezier(.34,1.46,.64,1);

    color-scheme:light dark;
  }

  /* Le thème sombre : le même système, mais le papier passe au fusain tiède.
     Les panneaux de couleur ne changent pas — un carton jaune reste jaune. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --papier:#1A1816; --carte:#232120; --papier-creux:#141211;
      --encre:#FFFFFF;
      --encre-95:rgba(255,255,255,.95);
      --encre-60:rgba(255,255,255,.64);
      --encre-40:rgba(255,255,255,.44);
      --graphite:#B6ADA6;
      --trait:rgba(255,255,255,.12); --trait-fort:rgba(255,255,255,.28);
      --action-tiede:#2E1B1E; --action-texte:#FF8793;
      --corde-milieu:#9AA3B2;
      --g-blanc:#F2F2F2;
      --pilule-peche:#C9A581;
    }
  }
  :root[data-theme="dark"] {
    --papier:#1A1816; --carte:#232120; --papier-creux:#141211;
    --encre:#FFFFFF;
    --encre-95:rgba(255,255,255,.95);
    --encre-60:rgba(255,255,255,.64);
    --encre-40:rgba(255,255,255,.44);
    --graphite:#B6ADA6;
    --trait:rgba(255,255,255,.12); --trait-fort:rgba(255,255,255,.28);
    --action-tiede:#2E1B1E; --action-texte:#FF8793;
    --corde-milieu:#9AA3B2;
    --g-blanc:#F2F2F2;
    --pilule-peche:#C9A581;
  }

  /* ═══ BASE ══════════════════════════════════════════════════════════════ */

  *, *::before, *::after { box-sizing:border-box; }

  html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

  body {
    margin:0;
    background:var(--papier);
    color:var(--encre-95);
    font-family:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size:1rem; line-height:1.5;
    font-feature-settings:"lnum" 1;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;      /* les marques décoratives débordent, la page non */
  }

  h1, h2, h3 { margin:0; font-weight:600; color:var(--encre); }

  /* L'échelle de titres du style : du tassement négatif dès qu'on grossit,
     normal au corps du texte. */
  h1 {
    font-size:clamp(2.35rem, 1.5rem + 4.6vw, 4.5rem);
    line-height:1.06; letter-spacing:-.034em; font-weight:600;
  }
  h2 {
    font-size:clamp(1.85rem, 1.25rem + 2.6vw, 3.375rem);
    line-height:1.08; letter-spacing:-.031em;
  }
  h3 { font-size:1.375rem; line-height:1.27; letter-spacing:-.011em; font-weight:600; }

  p { margin:0; }
  img, svg, picture { display:block; max-width:100%; }
  ul { margin:0; padding:0; list-style:none; }

  a { color:inherit; }

  :focus-visible {
    outline:2px solid var(--action);
    outline-offset:3px; border-radius:var(--r-petit);
  }

  /* Le serif n'est là que pour quelques respirations éditoriales. */
  .serif { font-family:'Source Serif 4', Georgia, 'Times New Roman', serif; }

  .saut-contenu {
    position:absolute; left:-9999px; top:0;
    background:var(--carte); color:var(--encre); padding:12px 18px;
    border:1px solid var(--trait-fort); border-radius:var(--r-bouton); z-index:60;
  }
  .saut-contenu:focus { left:12px; top:12px; }

  .bande { padding:var(--saut) 24px; }
  .bande.creux { background:var(--papier-creux); }
  /* Une bande blanche posée sur le papier tiède. Dedans, les listes perdent
     leur carte : le blanc EST la surface, un carton blanc dessus ne se verrait
     pas, et un carton tiède sur du blanc inverserait la hiérarchie. Ce sont
     donc des filets qui séparent. */
  .bande.blanc { background:var(--carte); }
  .sillon { max-width:var(--col); margin:0 auto; }
  .sillon.large { max-width:1340px; }

  @media (max-width: 640px) {
    :root { --saut:56px; }
    .bande { padding:var(--saut) 18px; }
  }

  /* ═══ LA CORDE D'AVANCE ═════════════════════════════════════════════════
     Trois brins, comme les trois cordes du logo : le rouge mesure la lecture. */

  .ring {
    position:fixed; inset:0 0 auto 0; height:3px; z-index:50;
    display:flex; pointer-events:none;
  }
  .ring span { flex:1; }
  .ring span:nth-child(1) { background:var(--corde-haut); opacity:.22; }
  .ring span:nth-child(2) { background:var(--corde-milieu); opacity:.22; }
  .ring span:nth-child(3) { background:var(--corde-bas); opacity:.18; position:relative; }
  .ring span:nth-child(3)::after {
    content:""; position:absolute; inset:0; background:var(--corde-bas);
    transform:scaleX(var(--avance, 0)); transform-origin:left;
  }

  /* ═══ LA BARRE DU HAUT ══════════════════════════════════════════════════
     Elle n'existe pas tant qu'on lit le héros, puis elle descend. */

  .barre {
    position:fixed; top:0; left:0; right:0; height:var(--nav); z-index:40;
    display:flex; align-items:center; gap:24px;
    padding:0 clamp(18px, 3vw, 28px);
    background:var(--papier);
    background:color-mix(in srgb, var(--papier) 88%, transparent);
    backdrop-filter:saturate(140%) blur(14px);
    -webkit-backdrop-filter:saturate(140%) blur(14px);
    border-bottom:1px solid transparent;
    transform:translateY(-100%);
    transition:transform var(--t-long) var(--e), border-color var(--t) var(--e);
  }
  .barre.posee {
    transform:none;
    border-bottom-color:var(--trait);
    box-shadow:0 .7px 1.5px rgba(0,0,0,.015), 0 3px 9px rgba(0,0,0,.03);
  }
  html:not(.anime) .barre { transform:none; border-bottom-color:var(--trait); }
  .barre .marque-barre { display:flex; align-items:center; gap:10px; text-decoration:none; }
  .barre .logo-mini { width:26px; height:auto; flex:none; }
  .barre .nom-barre {
    font-weight:600; font-size:.98rem; letter-spacing:-.014em; color:var(--encre);
  }
  .barre nav { margin-left:auto; display:flex; align-items:center; gap:4px; }
  .barre nav a {
    padding:9px 14px; border-radius:var(--r-bouton); text-decoration:none;
    font-size:.875rem; font-weight:500; color:var(--encre-60);
    transition:color var(--t) var(--e), background var(--t) var(--e);
  }
  .barre nav a:hover { color:var(--encre); background:rgba(0,0,0,.04); }
  .barre .bouton { margin-left:8px; }
  /* Sept liens et le bouton d'essai : sans cette règle, « La vie du club » et
     « Subventions et AG » passaient sur deux lignes entre 760 et 1180 px. Les
     libellés restent d'un bloc ; c'est l'espace autour d'eux qui se resserre. */
  .barre nav a, .barre .bouton { white-space:nowrap; }
  @media (min-width: 761px) and (max-width: 1180px) {
    .barre { gap:12px; }
    .barre .nom-barre { display:none; }
    .barre nav { gap:0; }
    .barre nav a { padding:9px 8px; font-size:.84rem; }
    .barre .bouton { margin-left:4px; padding-left:14px; padding-right:14px; }
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .barre nav a:hover { background:rgba(255,255,255,.07); }
  }
  :root[data-theme="dark"] .barre nav a:hover { background:rgba(255,255,255,.07); }
  /* 🚨 SUR TÉLÉPHONE, LES LIENS DE PAGES RESTENT. La règle d'origine les
     cachait tous — c'était sans conséquence quand ils pointaient des sections
     de la même page ; depuis que la barre porte la navigation du SITE, les
     cacher laisse un téléphone sans aucun moyen d'atteindre les autres pages.
     Ils défilent à l'horizontale, et c'est le bouton d'essai qui cède la
     place : il est déjà dans le héros et dans la section « Essayer ». */
  @media (max-width: 760px) {
    .barre { gap:10px; padding-right:12px; }
    .barre .nom-barre { display:none; }
    .barre nav { overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
    .barre nav::-webkit-scrollbar { display:none; }
    .barre nav a { padding:9px 10px; font-size:.8125rem; white-space:nowrap; }
    .barre nav a.bouton { display:none; }
  }

  section[id], header[id] { scroll-margin-top:calc(var(--nav) + 14px); }

  /* ═══ BOUTONS ═══════════════════════════════════════════════════════════
     Un seul bouton plein dans toute la page, et c'est le rouge de la marque. */

  .bouton {
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 18px; border-radius:var(--r-bouton);
    font-size:.9375rem; font-weight:500; line-height:1.2;
    text-decoration:none; border:1px solid transparent; cursor:pointer;
    font-family:inherit;
    transition:background var(--t) var(--e), border-color var(--t) var(--e),
               color var(--t) var(--e), transform var(--t) var(--e);
  }
  .bouton.plein { background:var(--action); color:#FFFFFF; }
  .bouton.plein:hover { background:var(--action-survol); transform:translateY(-1px); }
  .bouton.fantome { background:var(--action-tiede); color:var(--action-texte); }
  .bouton.fantome:hover { background:#F6D8DC; background:color-mix(in srgb, var(--action-tiede) 78%, var(--action)); }
  .bouton.vide { border-color:var(--trait-fort); color:var(--encre-95); }
  .bouton.vide:hover { border-color:var(--encre); background:rgba(0,0,0,.03); }
  .bouton .fleche { transition:transform var(--t) var(--e); }
  .bouton:hover .fleche { transform:translateX(3px); }

  /* ═══ LE HÉROS ══════════════════════════════════════════════════════════ */

  header.hero { padding-top:calc(var(--nav) + 46px); padding-bottom:56px; text-align:center; }
  .hero .sillon { max-width:980px; }
  .hero .logo { width:clamp(200px, 30vw, 268px); height:auto; margin:0 auto 34px; }
  .hero .logo .corde { fill:none; stroke-width:12.5; stroke-linecap:round; stroke-linejoin:round; }

  /* Les sept marques : des ronds cerclés de 2 px, comme les gants du
     référentiel. Décoratives — l'information, elle, est dans la section
     « Le référentiel » plus bas. */
  .marques { display:flex; justify-content:center; margin:0 auto 30px; }
  .marques li {
    width:46px; height:46px; margin-left:-9px; border-radius:var(--r-pilule);
    background:var(--carte); border:2px solid var(--teinte, var(--trait-fort));
    display:grid; place-items:center; position:relative;
    transition:transform var(--t-ressort) var(--e-ressort), box-shadow var(--t) var(--e);
  }
  .marques li:first-child { margin-left:0; }
  .marques li svg { width:24px; height:24px; }
  .marques li:hover { transform:translateY(-7px) scale(1.1) rotate(-4deg); z-index:2; }

  .titre-hero { max-width:20ch; margin:0 auto; }
  .titre-hero .mot { display:inline-block; }

  /* La pilule derrière le mot : le geste signature du style. */
  .pilule {
    display:inline-block; font-style:normal;
    background:var(--marigold); color:#000000;
    border-radius:var(--r-pilule); padding:.08em .5em .14em;
    transform-origin:50% 60%;
  }

  .hero .chapeau {
    margin:26px auto 0; max-width:62ch;
    font-size:clamp(1.0625rem, 1rem + .3vw, 1.125rem); line-height:1.56;
    color:var(--graphite);
  }

  .actions { margin-top:32px; display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
  .sous-actions { margin-top:16px; font-size:.8125rem; color:var(--encre-60); }

  /* La capture du héros : la seule ombre autorisée, pour la décoller du papier. */
  .hero-ecran {
    margin:56px auto 0; max-width:1180px;
    border-radius:var(--r-carte); overflow:hidden;
    background:var(--carte); border:1px solid var(--trait);
    box-shadow:0 4px 12px rgba(0,0,0,.1);
    transform-origin:50% 100%;
  }
  html.anime .hero-ecran {
    transform:perspective(1500px)
              rotateX(calc((1 - var(--pose, 1)) * 6deg))
              scale(calc(.955 + .045 * var(--pose, 1)));
  }
  .hero .exemple { margin:18px auto 0; max-width:58ch; }

  .exemple, .renvoi {
    font-size:.8125rem; line-height:1.5; color:var(--encre-60);
  }

  /* ═══ MARQUES DÉCORATIVES ═══════════════════════════════════════════════
     Gribouillis, étincelles et flèches. Elles ne disent rien, elles ponctuent. */

  .griffe { position:absolute; pointer-events:none; color:var(--teinte, var(--marigold)); }
  .griffe svg { width:100%; height:100%; overflow:visible; }
  .griffe path, .griffe line, .griffe circle {
    fill:none; stroke:currentColor; stroke-width:2.4;
    stroke-linecap:round; stroke-linejoin:round;
  }
  html.anime .griffe { transform:translateY(var(--derive, 0px)); }

  .a-griffes { position:relative; }
  /* Sur un téléphone, la place manque : les marques décoratives s.effacent. */
  @media (max-width: 900px) { .griffe { display:none; } }

  /* ═══ ŒIL, INTRO, CHIFFRES ══════════════════════════════════════════════ */

  .oeil {
    font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
    color:var(--action-texte); margin-bottom:14px;
  }
  .bande h2 + .intro {
    margin-top:18px; max-width:64ch;
    font-family:'Source Serif 4', Georgia, 'Times New Roman', serif;
    font-size:1.125rem; line-height:1.56; color:var(--graphite);
  }

  .chiffres {
    margin-top:46px; display:grid; gap:16px;
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
  .chiffres li {
    background:var(--carte); border:1px solid var(--trait); border-radius:var(--r-carte);
    padding:22px 20px; transition:transform var(--t) var(--e), border-color var(--t) var(--e);
  }
  .chiffres li:hover { transform:translateY(-3px); border-color:var(--trait-fort); }
  .bande.blanc .chiffres { gap:0; }
  .bande.blanc .chiffres li {
    background:none; border:0; border-left:1px solid var(--trait);
    border-radius:0; padding:4px 26px;
  }
  .bande.blanc .chiffres li:first-child { border-left:0; padding-left:0; }
  .bande.blanc .chiffres li:hover { transform:translateY(-3px); }
  @media (max-width: 760px) {
    .bande.blanc .chiffres { gap:22px 0; }
    .bande.blanc .chiffres li:nth-child(odd) { border-left:0; padding-left:0; }
  }
  .chiffres b {
    display:block; font-size:clamp(2rem, 1.4rem + 2vw, 2.75rem); font-weight:600;
    letter-spacing:-.03em; line-height:1; color:var(--encre);
    font-variant-numeric:tabular-nums lining-nums;
  }
  .chiffres span { display:block; margin-top:8px; font-size:.875rem; color:var(--encre-60); }
  @media (max-width: 760px) { .chiffres { grid-template-columns:repeat(2, minmax(0, 1fr)); } }

  /* ═══ CARTES BLANCHES ═══════════════════════════════════════════════════ */

  .grille {
    margin-top:46px; display:grid; gap:16px;
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
  .fiche {
    position:relative; overflow:hidden;
    background:var(--carte); border:1px solid var(--trait); border-radius:var(--r-carte);
    padding:24px;
    transition:transform var(--t) var(--e), border-color var(--t) var(--e);
  }
  .fiche::after {
    content:""; position:absolute; top:18px; right:18px;
    width:10px; height:10px; border-radius:var(--r-pilule);
    background:var(--teinte, var(--marigold));
    transform:scale(0); transition:transform var(--t-ressort) var(--e-ressort);
  }
  .fiche:hover { transform:translateY(-4px); border-color:var(--trait-fort); }
  .fiche:hover::after { transform:scale(1); }
  .fiche h3 { margin-bottom:10px; }
  .fiche p { font-size:.9375rem; color:var(--graphite); }
  @media (max-width: 900px) { .grille { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .grille { grid-template-columns:1fr; } }

  /* ═══ SÉPARATEUR ════════════════════════════════════════════════════════
     Un gribouillis qui respire quand il passe au milieu de la fenêtre. */

  .sep { display:flex; align-items:center; gap:18px; max-width:var(--col); margin:0 auto; padding:0 24px; }
  .sep i { flex:1; height:1px; background:var(--trait); }
  .sep svg { width:72px; height:20px; flex:none; overflow:visible; }
  .sep path { fill:none; stroke:var(--corde-bas); stroke-width:2.4; stroke-linecap:round; }

  /* ═══ À L'ÉCRAN : UN PANNEAU QUI RESTE, ET QUI DÉFILE ═══════════════════
     Au-dessus de 900 px, l'écran se cale au milieu de la fenêtre et ce sont
     les textes qui passent devant lui ; la capture défile dans son cadre au
     rythme du texte. En dessous, la pile naturelle reprend : un texte, sa
     capture en entier. Une seule copie de chaque image dans le document. */

  .cadre {
    position:relative;
    border:1px solid var(--trait); border-radius:var(--r-carte); overflow:hidden;
    background:var(--carte); line-height:0;
    box-shadow:0 4px 12px rgba(0,0,0,.1);
  }
  .cadre picture { display:block; }
  .cadre img { display:block; width:100%; height:auto; }

  .suite { display:flex; flex-direction:column; gap:54px; margin-top:44px; }
  .recit { margin:0; }
  .recit-tete { max-width:62ch; margin-bottom:16px; }

  /* Le fil d'Ariane de l'écran, en pilule : une teinte par écran. */
  .chemin {
    display:inline-block; margin-bottom:10px;
    background:var(--teinte, var(--ciel-tiede)); color:#000000;
    border-radius:var(--r-pilule); padding:4px 12px;
    font-size:.75rem; font-weight:500; letter-spacing:.005em;
  }
  .recit-tete h3 { font-size:1.25rem; margin-bottom:8px; }
  .recit-tete p { font-size:.9375rem; color:var(--graphite); }
  .panneau { display:none; }

  @media (min-width:900px) {
    .suite {
      display:grid; grid-template-columns:min(348px, 32%) 1fr; gap:0 52px;
      align-items:start; margin-top:20px;
    }
    .recit {
      min-height:92vh; display:flex; flex-direction:column;
      justify-content:center;
      border-left:2px solid transparent; padding-left:20px; margin-left:-22px;
      transition:border-color var(--t-long) var(--e), opacity var(--t-long) var(--e);
    }
    html.anime .recit { opacity:.46; }
    html.anime .recit.en-cours { opacity:1; border-left-color:var(--teinte, var(--action)); }
    .recit-tete { margin-bottom:0; }
    /* La bande collante prend toute la hauteur utile et la capture se centre
       dedans : l'écran reste au milieu, en face du texte qu'il montre. */
    .panneau {
      display:flex; align-items:center; position:sticky;
      top:calc(var(--nav) + env(safe-area-inset-top, 0px));
      height:calc(100vh - var(--nav) - env(safe-area-inset-top, 0px));
    }
    .panneau-cadre {
      position:relative; width:100%; aspect-ratio:1800 / 1016; overflow:hidden;
      border-radius:var(--r-carte);
    }
    /* Fondu court : deux captures d'interface superposées font vite brouillon. */
    .panneau .cadre {
      position:absolute; inset:0; opacity:0;
      transition:opacity .22s linear, transform var(--t-long) var(--e);
      transform:scale(.985);
    }
    .panneau .cadre.actif { opacity:1; transform:none; }
    /* Plus de défilement interne : chaque capture est cadrée sur la zone où
       se joue sa démonstration. --cadrage dit quelle bande on garde. */
    .panneau .cadre img {
      position:absolute; inset:0; width:100%; height:100%;
      object-fit:cover; object-position:50% var(--cadrage, 50%);
    }
  }

  /* ═══ LES DÉMONSTRATIONS ════════════════════════════════════════════════
     Chaque écran rejoue un geste : le curseur va sur un bouton qui existe
     vraiment dans l'application, clique, et la réponse s'ouvre. Les panneaux
     sont dessinés ici, dans les couleurs de l'application, par-dessus la
     capture — ce n'est pas un enregistrement, et la page le dit.
     Les repères --x/--y sont en pourcentage du cadre visible. */

  .demo {
    --app-fond:#0F1626; --app-carte:#16223C; --app-trait:#2A3860;
    --app-texte:#EFEEEA; --app-doux:#97A5C2;
    --app-bleu:#3F7BE0; --app-rouge:#E8384F; --app-vert:#2ED3A0; --app-ambre:#E8A33D;
    position:absolute; inset:0; pointer-events:none; display:none;
    font-family:'Inter', system-ui, sans-serif; line-height:1.45;
  }
  @media (min-width:900px) { .panneau .cadre .demo { display:block; } }

  .demo .cible {
    position:absolute; left:var(--x); top:var(--y);
    width:var(--cw, 6%); height:var(--ch, 5%); translate:-50% -50%;
    border:2px solid var(--app-rouge); border-radius:7px;
    box-shadow:0 0 0 4px rgba(232,56,79,.18); opacity:0;
  }
  .demo .curseur {
    position:absolute; left:var(--x); top:var(--y);
    width:21px; height:21px; margin:-3px 0 0 -3px; opacity:0; z-index:3;
    filter:drop-shadow(0 2px 5px rgba(0,0,0,.6));
  }
  .demo .curseur path { fill:#FFFFFF; stroke:#10172B; stroke-width:1.4; stroke-linejoin:round; }
  .demo .bulle {
    position:absolute; left:var(--bx); top:var(--by); width:var(--bw, 52%);
    background:var(--app-carte); border:1px solid var(--app-trait); border-radius:10px;
    padding:13px 15px; color:var(--app-texte);
    font-size:.72rem; letter-spacing:-.002em;
    box-shadow:0 20px 44px rgba(0,0,0,.55); opacity:0; z-index:2;
  }
  .demo .bulle b { display:block; font-size:.78rem; font-weight:600; margin-bottom:9px; }
  .demo .bulle .ligne {
    display:flex; align-items:center; gap:9px;
    padding:6px 9px; border-radius:6px; color:var(--app-doux);
  }
  .demo .bulle .ligne.pris { color:#FFFFFF; }
  .demo .bulle .pot { width:9px; height:9px; border-radius:50%; flex:none; }
  .demo .bulle .officiel { margin-left:auto; font-size:.66rem; color:var(--app-ambre); }
  .demo .bulle .note { color:var(--app-doux); margin-top:9px; }
  .demo .bulle .somme { display:flex; gap:10px; align-items:baseline; font-size:.8rem; }
  .demo .bulle .somme b { display:inline; margin:0; }
  .demo .bulle .vert { color:var(--app-vert); font-weight:600; }
  .demo .bulle .ambre { color:var(--app-ambre); }

  @keyframes demo-curseur {
    0%   { opacity:0; translate:var(--dx, -140px) var(--dy, 150px); scale:1; }
    7%   { opacity:1; }
    34%  { translate:0 0; scale:1; }
    39%  { scale:.82; }
    45%  { scale:1; }
    100% { opacity:1; translate:0 0; scale:1; }
  }
  @keyframes demo-cible {
    0%, 33% { opacity:0; scale:1.4; }
    42%     { opacity:1; scale:1; }
    100%    { opacity:1; scale:1; }
  }
  @keyframes demo-bulle {
    0%, 44% { opacity:0; translate:0 10px; scale:.97; }
    56%     { opacity:1; translate:0 0; scale:1; }
    100%    { opacity:1; translate:0 0; scale:1; }
  }
  @keyframes demo-choix {
    0%, 66% { background:transparent; }
    76%     { background:var(--app-bleu); }
    100%    { background:var(--app-bleu); }
  }

  .panneau .cadre.actif .demo .curseur { animation:demo-curseur 5.2s var(--e) forwards; }
  .panneau .cadre.actif .demo .cible   { animation:demo-cible   5.2s var(--e) forwards; }
  .panneau .cadre.actif .demo .bulle   { animation:demo-bulle   5.2s var(--e) forwards; }
  .panneau .cadre.actif .demo .pris    { animation:demo-choix   5.2s var(--e) forwards; }

  /* ═══ LES PASSAGES OBLIGÉS ══════════════════════════════════════════════
     Des panneaux de couleur posés sur le papier, comme des papiers collants.
     Le texte reste noir : c'est le fond qui change, pas la lisibilité. */

  .passages { margin-top:46px; display:grid; gap:16px; grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .passages li {
    position:relative; overflow:hidden;
    background:var(--teinte, var(--marigold)); color:#000000;
    border-radius:var(--r-carte); padding:26px;
    transition:transform var(--t) var(--e);
  }
  .passages li:first-child { grid-column:1 / -1; }
  .passages li:hover { transform:translateY(-4px); }
  .passages h3 { color:#000000; margin-bottom:10px; }
  .passages p { font-size:.9375rem; color:rgba(0,0,0,.82); max-width:64ch; }
  .passages .format {
    margin-top:16px; padding-top:12px; border-top:1px solid rgba(0,0,0,.16);
    font-size:.78125rem; color:rgba(0,0,0,.82); letter-spacing:.005em;
    font-variant-numeric:tabular-nums lining-nums;
  }
  .passages li.sombre { background:var(--nuit); color:#FFFFFF; }
  .passages li.sombre h3 { color:#FFFFFF; }
  .passages li.sombre p { color:rgba(255,255,255,.82); }
  .passages li.sombre .format { color:rgba(255,255,255,.72); border-top-color:rgba(255,255,255,.22); }
  @media (max-width: 760px) {
    .passages { grid-template-columns:1fr; }
    .passages li { padding:22px; }
  }

  /* ═══ LA SCÈNE DE L'APPEL ═══════════════════════════════════════════════
     Une illustration dessinée, pas une capture : on la reconnaît à ses
     couleurs, qui sont celles du site et non celles de l'application. */

  .scene { position:relative; }
  .scene-cadre {
    position:relative; overflow:hidden;
    background:var(--papier); border:1px solid var(--trait);
    border-radius:var(--r-carte); padding:20px;
    display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start;
  }
  .semaine { display:flex; flex-direction:column; gap:8px; }
  .creneau {
    background:var(--carte); border:1px solid var(--trait); border-radius:var(--r-bouton);
    padding:10px 12px; line-height:1.3;
  }
  .creneau b { display:block; font-size:.8125rem; font-weight:600; color:var(--encre); }
  .creneau span { font-size:.75rem; color:var(--encre-60); font-variant-numeric:tabular-nums lining-nums; }
  .creneau.choisi { border-color:var(--marigold); }
  /* Le fond devient marigold à l'animation : le texte doit rester noir dans
     les deux thèmes, sinon le thème sombre y mettrait du blanc. */
  .creneau.choisi b { color:#000000; }
  .creneau.choisi span { color:rgba(0,0,0,.74); }
  @media (max-width: 560px) { .curseur-scene { display:none; } }

  .appel-liste {
    background:var(--carte); border:1px solid var(--trait); border-radius:var(--r-bouton);
    padding:12px 13px;
  }
  .appel-tete {
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    font-size:.75rem; font-weight:600; color:var(--encre);
    padding-bottom:9px; margin-bottom:8px; border-bottom:1px solid var(--trait);
  }
  .appel-tete .groupe {
    margin-left:auto; font-weight:500; font-size:.6875rem; color:#000000;
    background:var(--marigold); border-radius:var(--r-pilule); padding:2px 9px;
  }
  .appel-liste li {
    display:flex; align-items:center; gap:9px;
    font-size:.78125rem; color:var(--graphite); padding:4px 0;
  }
  .coche {
    width:15px; height:15px; flex:none; border-radius:4px;
    border:1.5px solid var(--trait-fort); position:relative;
  }
  .coche::after {
    content:""; position:absolute; left:3.5px; top:.5px;
    width:4px; height:8px; border:solid #FFFFFF; border-width:0 2px 2px 0;
    rotate:45deg; opacity:0;
  }
  .appel-liste .hors-ligne {
    margin-top:9px; padding-top:8px; border-top:1px solid var(--trait);
    font-size:.6875rem; color:var(--encre-60);
  }
  .curseur-scene {
    position:absolute; left:26%; top:63%; width:20px; height:20px; z-index:3;
    filter:drop-shadow(0 2px 5px rgba(0,0,0,.35));
  }
  .curseur-scene path { fill:#FFFFFF; stroke:var(--encre); stroke-width:1.4; stroke-linejoin:round; }

  @media (max-width: 560px) { .scene-cadre { grid-template-columns:1fr; } }

  /* Le geste : le curseur arrive, le créneau s'allume, l'appel s'ouvre et les
     présences se cochent. Il part quand la scène entre dans la page. */
  @keyframes scene-curseur {
    0%   { opacity:0; translate:-120px 90px; }
    10%  { opacity:1; }
    34%  { translate:0 0; scale:1; }
    39%  { scale:.82; }
    45%  { scale:1; }
    100% { opacity:1; translate:0 0; }
  }
  @keyframes scene-creneau {
    0%, 38%   { background:var(--carte); }
    48%, 100% { background:var(--marigold); }
  }
  @keyframes scene-liste {
    0%, 46% { opacity:0; translate:14px 0; }
    60%     { opacity:1; translate:0 0; }
    100%    { opacity:1; translate:0 0; }
  }
  @keyframes scene-coche {
    0%, 62% { background:transparent; border-color:var(--trait-fort); }
    72%     { background:var(--action); border-color:var(--action); }
    100%    { background:var(--action); border-color:var(--action); }
  }
  @keyframes scene-coche-trait { 0%, 66% { opacity:0; } 76%, 100% { opacity:1; } }

  html.anime .scene .curseur-scene,
  html.anime .scene .creneau.choisi,
  html.anime .scene .appel-liste,
  html.anime .scene .coche,
  html.anime .scene .coche::after { animation-play-state:paused; }

  html.anime .scene.vu .curseur-scene { animation:scene-curseur 4.6s var(--e) forwards; }
  html.anime .scene.vu .creneau.choisi { animation:scene-creneau 4.6s var(--e) forwards; }
  html.anime .scene.vu .appel-liste { animation:scene-liste 4.6s var(--e) forwards; }
  html.anime .scene.vu .coche {
    animation:scene-coche 4.6s var(--e) forwards;
    animation-delay:calc(var(--i, 0) * 180ms);
  }
  html.anime .scene.vu .coche::after {
    animation:scene-coche-trait 4.6s var(--e) forwards;
    animation-delay:calc(var(--i, 0) * 180ms);
  }

  /* ═══ LES GANTS ═════════════════════════════════════════════════════════ */

  .gants { margin-top:40px; display:flex; flex-wrap:wrap; gap:10px; }
  .gants li {
    display:inline-flex; align-items:center; gap:10px;
    background:var(--carte); border:1px solid var(--trait);
    border-radius:var(--r-pilule); padding:7px 16px 7px 9px;
    font-size:.875rem; font-weight:500;
    transition:transform var(--t-ressort) var(--e-ressort), border-color var(--t) var(--e);
  }
  .gants li:hover { transform:translateY(-3px) scale(1.04); border-color:var(--trait-fort); }
  .pastille {
    width:22px; height:22px; border-radius:var(--r-pilule); flex:none;
    border:2px solid rgba(0,0,0,.14);
  }

  /* ═══ LE TABLEAU ════════════════════════════════════════════════════════ */

  .tableau-enveloppe {
    margin-top:28px; overflow-x:auto;
    background:var(--carte); border:1px solid var(--trait); border-radius:var(--r-carte);
    padding:22px;
  }
  table { width:100%; border-collapse:collapse; font-size:.9375rem; }
  caption { text-align:left; font-size:.8125rem; color:var(--encre-60); padding-bottom:14px; }
  th {
    text-align:left; font-size:.6875rem; font-weight:600; text-transform:uppercase;
    letter-spacing:.09em; color:var(--encre-60);
    border-bottom:1px solid var(--trait-fort); padding:0 14px 9px 0;
  }
  td { padding:12px 14px 12px 0; border-bottom:1px solid var(--trait); }
  tbody tr { transition:background var(--t) var(--e); }
  tbody tr:hover { background:rgba(0,0,0,.025); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) tbody tr:hover { background:rgba(255,255,255,.04); }
  }
  :root[data-theme="dark"] tbody tr:hover { background:rgba(255,255,255,.04); }
  .serie { font-variant-numeric:tabular-nums lining-nums; white-space:nowrap; }
  .renvoi { margin-top:18px; }

  /* ═══ VOS DONNÉES ═══════════════════════════════════════════════════════ */

  .deux { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; }
  @media (max-width: 860px) { .deux { grid-template-columns:1fr; gap:34px; } }
  .points { display:flex; flex-direction:column; gap:14px; }
  .points li {
    display:flex; gap:14px;
    background:var(--carte); border:1px solid var(--trait); border-radius:var(--r-carte);
    padding:18px 20px;
    transition:transform var(--t) var(--e), border-color var(--t) var(--e);
  }
  .points li:hover { transform:translateX(4px); border-color:var(--trait-fort); }
  .bande.blanc .points { gap:0; }
  .bande.blanc .points li {
    background:none; border:0; border-top:1px solid var(--trait);
    border-radius:0; padding:18px 4px;
  }
  .bande.blanc .points li:first-child { border-top:0; padding-top:0; }
  .points .marque {
    flex:none; width:22px; height:22px; margin-top:1px; color:var(--action);
    transition:transform var(--t-ressort) var(--e-ressort);
  }
  .points li:hover .marque { transform:rotate(90deg) scale(1.15); }
  .points strong { display:block; font-weight:600; font-size:.9375rem; }
  .points .detail { display:block; margin-top:5px; font-size:.9375rem; color:var(--graphite); }

  /* ═══ LES ÉDITIONS ══════════════════════════════════════════════════════ */

  .editions { margin-top:40px; display:grid; gap:12px; grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .editions li {
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    background:var(--carte); border:1px solid var(--trait); border-radius:var(--r-carte);
    padding:18px 20px;
    transition:transform var(--t) var(--e), border-color var(--t) var(--e);
  }
  .editions li:hover { transform:translateY(-3px); border-color:var(--trait-fort); }
  .editions .nom { font-weight:500; font-size:.9375rem; }
  .editions .etat {
    flex:none; font-size:.75rem; color:var(--encre-60);
    border-radius:var(--r-pilule); padding:3px 10px; background:rgba(0,0,0,.05);
    transition:transform var(--t-ressort) var(--e-ressort);
  }
  .editions li:hover .etat { transform:scale(1.07); }
  .editions li.dispo { border-color:var(--action); }
  .editions li.dispo .etat { background:var(--marigold); color:#000000; font-weight:500; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .editions li:not(.dispo) .etat { background:rgba(255,255,255,.08); }
  }
  :root[data-theme="dark"] .editions li:not(.dispo) .etat { background:rgba(255,255,255,.08); }
  @media (max-width: 860px) { .editions { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 520px) { .editions { grid-template-columns:1fr; } }

  /* ═══ ESSAYER ═══════════════════════════════════════════════════════════ */

  .contact-bloc {
    margin-top:36px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    background:var(--carte); border:1px solid var(--trait); border-radius:var(--r-carte);
    padding:20px 22px;
  }
  .adresse {
    font-size:1.0625rem; font-weight:500; letter-spacing:-.005em;
    overflow-wrap:anywhere;
  }
  #copier {
    margin-left:auto; background:none; color:var(--encre-95);
    border:1px solid var(--trait-fort); border-radius:var(--r-bouton);
    padding:9px 15px; font:inherit; font-size:.875rem; font-weight:500; cursor:pointer;
    transition:border-color var(--t) var(--e), background var(--t) var(--e), transform var(--t) var(--e);
  }
  #copier:hover { border-color:var(--encre); background:rgba(0,0,0,.03); }
  #copier:active { transform:scale(.97); }
  #copier.fait { border-color:var(--action); color:var(--action-texte); }

  /* ═══ PIED DE PAGE ══════════════════════════════════════════════════════ */

  footer.bande { border-top:1px solid var(--trait); padding-top:36px; padding-bottom:28px; }
  footer .sillon {
    display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center;
    font-size:.875rem; color:var(--encre-60);
  }
  footer .legal { display:flex; gap:18px; }
  footer a { color:var(--encre-60); text-decoration:none; position:relative; padding:6px 0; }
  footer a::after {
    content:""; position:absolute; left:0; right:0; bottom:4px; height:1px;
    background:currentColor; transform:scaleX(0); transform-origin:left;
    transition:transform var(--t) var(--e);
  }
  footer a:hover { color:var(--encre); }
  footer a:hover::after { transform:scaleX(1); }
  footer .courriel { margin-left:auto; }
  footer .mention { padding-top:14px; display:block; font-size:.78125rem; color:var(--encre-60); }
  footer .mention p { max-width:88ch; }
  @media (max-width: 760px) { footer .courriel { margin-left:0; } }

  /* ═══ MOUVEMENT ═════════════════════════════════════════════════════════
     Tout ce qui bouge est enfermé dans html.anime, un drapeau posé par le
     script du haut de page — et jamais posé en mouvement réduit. Sans script,
     sans IntersectionObserver ou avec « réduire les animations » coché, la
     page est entière, immobile et lisible. */

  /* On anime « translate » et « scale », PAS « transform ». Sans ça, la règle
     d'arrivée (plus spécifique qu'un simple :hover) imposerait transform:none
     et tuerait le soulèvement au survol de toutes les cartes. Les deux
     propriétés se composent : l'arrivée glisse, le survol soulève. */
  html.anime [data-r] {
    opacity:0; translate:0 20px;
    transition:opacity var(--t-long) var(--e), translate var(--t-long) var(--e),
               scale var(--t-long) var(--e);
    transition-delay:var(--retard, 0ms);
  }
  html.anime [data-r].vu { opacity:1; translate:none; scale:none; }

  html.anime [data-r="echelle"] { translate:0 16px; scale:.975; }
  html.anime [data-r="gauche"] { translate:-26px 0; }
  html.anime [data-r="ressort"] {
    translate:0 14px; scale:.9;
    transition-duration:var(--t-ressort);
    transition-timing-function:var(--e-ressort);
  }

  /* L'entrée du héros : elle se joue au chargement, pas au scroll. */
  @keyframes monte { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
  @keyframes saute { 0% { opacity:0; transform:translateY(18px) scale(.55); } 100% { opacity:1; transform:none; } }
  @keyframes trace { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
  @keyframes paraitre { from { opacity:0; } to { opacity:1; } }
  @keyframes gonfle {
    0%   { opacity:0; transform:scaleX(.12); }
    38%  { opacity:1; }
    64%  { transform:scaleX(1.05); }
    100% { opacity:1; transform:none; }
  }
  @keyframes frissonne { 0%,100% { transform:rotate(0); } 25% { transform:rotate(-7deg); } 75% { transform:rotate(7deg); } }

  html.anime .hero .logo .corde {
    stroke-dasharray:1; stroke-dashoffset:1;
    animation:trace .95s var(--e) forwards;
    animation-delay:calc(var(--i, 0) * 110ms);
  }
  html.anime .hero .logo .mot-logo {
    opacity:0; animation:paraitre .7s var(--e) .42s forwards;
  }
  html.anime .marques li {
    opacity:0; animation:saute var(--t-ressort) var(--e-ressort) forwards;
    animation-delay:calc(560ms + var(--i, 0) * 72ms);
  }
  html.anime .marques li:hover { animation:none; opacity:1; }
  html.anime .titre-hero .mot {
    opacity:0; animation:monte 680ms var(--e) forwards;
    animation-delay:calc(240ms + var(--i, 0) * 46ms);
  }
  html.anime .titre-hero .pilule > span { position:relative; }
  html.anime .titre-hero .pilule {
    animation:gonfle var(--t-ressort) var(--e-ressort) forwards;
    animation-delay:calc(240ms + var(--i, 0) * 46ms);
  }
  html.anime .titre-hero .pilule:hover { animation:frissonne 620ms var(--e); }
  html.anime .hero .chapeau,
  html.anime .hero .actions,
  html.anime .hero .sous-actions {
    opacity:0; animation:monte 700ms var(--e) forwards;
  }
  html.anime .hero .chapeau { animation-delay:760ms; }
  html.anime .hero .actions { animation-delay:860ms; }
  html.anime .hero .sous-actions { animation-delay:940ms; }

  /* Les captures respirent un peu sous le curseur, dans leur cadre. */
  .cadre picture { overflow:hidden; }
  .recit .cadre img, .hero-ecran img { transition:transform var(--t-long) var(--e); }
  @media (min-width:900px) {
    .panneau .cadre img { transition:none; }   /* celle-ci est pilotée au scroll */
  }
  .hero-ecran:hover img { transform:scale(1.012); }

  /* Le filet des liens de texte, qui se tire depuis la gauche. */
  .lien-fin { text-decoration:none; position:relative; color:var(--action-texte); font-weight:500; }
  .lien-fin::after {
    content:""; position:absolute; left:0; right:0; bottom:-2px; height:1.5px;
    background:currentColor; transform:scaleX(0); transform-origin:left;
    transition:transform var(--t) var(--e);
  }
  .lien-fin:hover::after { transform:scaleX(1); }

  /* ═══ MOUVEMENT RÉDUIT ══════════════════════════════════════════════════
     Le drapeau du haut de page suffit au chargement ; ce filet attrape le cas
     où le réglage système change pendant la visite. */

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration:1ms !important; animation-delay:0ms !important;
      animation-iteration-count:1 !important; transition-duration:1ms !important;
    }
    html.anime [data-r] { opacity:1 !important; translate:none !important; scale:none !important; }
    html.anime .recit { opacity:1 !important; }
    html.anime .barre { transform:none !important; }
    html.anime .hero-ecran { transform:none !important; }
    html.anime .marques li, html.anime .titre-hero .mot,
    html.anime .hero .chapeau, html.anime .hero .actions,
    html.anime .hero .sous-actions { opacity:1 !important; }
    html.anime .hero .logo .corde { stroke-dashoffset:0 !important; }
    html.anime .hero .logo .mot-logo { opacity:1 !important; }
    html.anime .griffe { transform:none !important; }
  }

  /* ═══ PAGES DE DÉTAIL ═══════════════════════════════════════════════════
     Ajouté le 30/10/2026 avec `finances.html`, la première page de détail.
     Rien ici ne touche à la page d'accueil : ce sont des variantes, pas des
     redéfinitions — une règle réécrite pour une seule page finit par changer
     l'autre sans qu'on l'ait vu. */

  /* Trois colonnes au lieu de quatre, pour une suite qui se lit comme un
     calcul (brut − part fédérale = net) et non comme quatre statistiques. */
  .chiffres.trois { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  @media (max-width: 760px) { .chiffres.trois { grid-template-columns:1fr; } }

  /* Des mots, pas des nombres : à 2,75 rem « − Part fédérale » casse en deux
     lignes et le calcul ne se lit plus d'un coup d'œil. */
  .chiffres.formule b { font-size:clamp(1.3rem, 1rem + 1vw, 1.85rem); line-height:1.15; }

  /* ═══ QUESTIONS (details/summary) ═══════════════════════════════════════
     Une question ouverte reste ouverte : on ne referme pas celle d'à côté.
     Chaque réponse est lisible sans script — `details` fonctionne seul. */

  .questions { margin-top:34px; border-top:1px solid var(--trait); }
  .questions details { border-bottom:1px solid var(--trait); }
  .questions summary {
    list-style:none; cursor:pointer; padding:18px 40px 18px 0; position:relative;
    font-weight:500; font-size:1.0625rem; color:var(--encre);
    transition:color var(--t) var(--e);
  }
  .questions summary::-webkit-details-marker { display:none; }
  .questions summary:hover { color:var(--action); }
  .questions summary:focus-visible { outline:2px solid var(--action); outline-offset:3px; border-radius:4px; }
  /* Le chevron tourne : il dit l'état, il ne décore pas. */
  .questions summary::after {
    content:""; position:absolute; right:8px; top:50%; width:9px; height:9px;
    border-right:1.8px solid var(--encre-60); border-bottom:1.8px solid var(--encre-60);
    translate:0 -70%; rotate:45deg; transition:rotate var(--t) var(--e);
  }
  .questions details[open] summary::after { rotate:225deg; translate:0 -30%; }
  .questions details p {
    margin:0; padding:0 40px 20px 0; max-width:62ch;
    font-size:.9375rem; line-height:1.65; color:var(--graphite);
  }

  /* Le fil d'Ariane reprend la pilule des captures : même objet, même forme. */
  .chemin a { color:inherit; text-decoration:none; border-bottom:1px solid currentColor; }
  .chemin a:hover { color:var(--action); }

  /* Le lien d'une carte vers sa page de détail. Il vient APRÈS le texte de la
     carte : c'est une suite, pas un bouton d'action. */
  .fiche .lien-fin, .passages .lien-fin {
    display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:.875rem;
  }
  .fiche .lien-fin .fleche, .passages .lien-fin .fleche { transition:translate var(--t) var(--e); }
  .fiche .lien-fin:hover .fleche, .passages .lien-fin:hover .fleche { translate:3px 0; }