/* ==========================================================================
   Dón — le SITE PUBLIC.

   Une peau à lui, et non celle du back-office. Les deux ne s'adressent pas au
   même lecteur : `ecorebus.css` habille un outil de travail, où l'on passe la
   journée et où la couleur porte des ÉTATS — un impayé, une absence, une
   alerte. Ici, personne ne travaille : on lit, on compare, on décide s'il faut
   nous écrire. Charger la charte du back-office sur ces pages ferait payer au
   visiteur des styles de tableaux et de badges qu'aucune d'elles n'affiche, et
   donnerait à une page de vente l'air d'un écran de saisie.

   LES COULEURS SONT LES MÊMES, et c'est le point : elles viennent de
   `don-tokens.css`, relevées dans le logotype. Ce fichier n'en fait que des
   RÔLES — d'autres rôles que ceux du back-office.

   LES RÔLES SONT CEUX DE `ecorebus.css`, à l'identique : le VIOLET du ɔ̀ et
   de l'anneau est la couleur primaire — boutons, liens, états actifs — et la
   MENTHE du trait reste ce qu'elle est dans le logo, ce qui attire l'œil EN
   PETITE QUANTITÉ. Une marque ne se repeint pas d'une page à l'autre selon
   le raisonnement du moment : un visiteur qui passe de la vitrine à son
   espace ne doit pas voir tous les boutons changer de couleur. Le kit fait foi.

   Ce qui distingue cette peau de celle du back-office n'est donc PAS la
   couleur : c'est la composition — de l'air, une échelle typographique plus
   large, des blocs qui respirent. Un outil de travail serre l'information,
   une page qu'on lit une fois l'étale.
   ========================================================================== */

@import url('don-tokens.css');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* Le primaire : le bleu ardoise, comme dans le back-office. */
  --sp-primaire:      var(--don-violet);
  --sp-primaire-800:  var(--don-violet-800);
  --sp-primaire-600:  var(--don-violet-600);
  --sp-primaire-100:  var(--don-violet-100);
  /* L'accent : l'orange du logo, et rien d'autre ne le porte. Il ne peint
     aucun bouton ordinaire — il souligne, il ponctue. */
  --sp-accent:        var(--don-menthe);
  --sp-accent-clair:  var(--don-menthe-100);
  --sp-editorial:     var(--don-violet-fonce);

  --sp-fond:          var(--don-fond);
  --sp-surface:       var(--don-surface);
  --sp-surface-creuse: var(--don-graphite-100);
  --sp-bord:          var(--don-bord);
  --sp-texte:         var(--don-texte);
  --sp-texte-faible:  var(--don-texte-faible);

  --sp-display: 'Space Grotesk', system-ui, sans-serif;
  --sp-texte-police: 'IBM Plex Sans', system-ui, sans-serif;
  --sp-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --sp-rayon: 20px;
  --sp-rayon-petit: 12px;
  /* Les grands aplats — la scène, les bandes arrondies. */
  --sp-rayon-grand: 32px;
  /* Le titre de marque : le violet le plus profond, comme un encrage. */
  --sp-titre: var(--don-violet-900);

  /* Une seule ombre, portée bas et large. Trois profondeurs d'ombre sur une
     page de lecture donnent trois plans à un contenu qui n'en a qu'un. */
  --sp-ombre: 0 1px 2px rgba(26, 26, 26, .04), 0 12px 32px rgba(26, 26, 26, .06);

  /* --- Le pont vers Bootstrap ------------------------------------------
     Bootstrap 5.3 ne lit PAS `--bs-link-color` pour peindre un lien : il
     écrit `rgba(var(--bs-link-color-rgb), …)`. Poser la première sans la
     seconde ne change rien, et tous les liens restent au bleu d'usine — ce
     qui s'est vu sur les titres de cartes et le fil d'Ariane. Chaque couleur
     doit donc être donnée DEUX FOIS : en `var()` pour ce qui la lit
     directement, et en triplet pour ce qui la lit à travers une opacité.

     Ces triplets sont les SEULS hexadécimaux recopiés du fichier de jetons,
     et ils doivent le suivre : une valeur RVB ne se dérive pas d'une variable
     en CSS. C'est la même concession que fait `ecorebus.css`, pour la même
     raison. Chacun nomme le jeton dont il vient, pour qu'on sache lequel
     corriger si la marque bouge. */
  --bs-primary: var(--sp-primaire);
  --bs-primary-rgb: 108, 92, 231;          /* --don-violet     #6C5CE7 */
  --bs-secondary: var(--sp-texte-faible);
  --bs-info: var(--sp-editorial);
  --bs-info-rgb: 87, 71, 196;           /* --don-violet-fonce #5747C4 */

  --bs-link-color: var(--sp-primaire-800);
  --bs-link-color-rgb: 28, 17, 116;        /* --don-violet-800 #1C1174 */
  --bs-link-hover-color: var(--sp-primaire-600);
  --bs-link-hover-color-rgb: 50, 30, 204;/* --don-violet-600 #321ECC */

  --bs-body-color: var(--sp-texte);
  --bs-body-color-rgb: 43, 43, 43;        /* --don-texte      #2B2B2B */
  --bs-body-bg: var(--sp-fond);
  --bs-body-bg-rgb: 250, 250, 250;        /* --don-fond       #FAFAFA */
  --bs-emphasis-color: var(--sp-texte);
  --bs-heading-color: var(--sp-texte);

  --bs-secondary-color: var(--sp-texte-faible);
  --bs-secondary-color-rgb: 107, 107, 107;/* --don-texte-faible #6B6B6B */
  --bs-secondary-bg: var(--sp-surface-creuse);
  --bs-tertiary-color: var(--sp-texte-faible);
  --bs-tertiary-bg: var(--sp-surface-creuse);

  --bs-border-color: var(--sp-bord);
  --bs-border-radius: var(--sp-rayon-petit);
  --bs-border-radius-lg: var(--sp-rayon);

  /* `<code>` sortait en rose framboise — la couleur d'usine de Bootstrap, qui
     n'est nulle part dans la marque. Le violet foncé du logotype joue ce
     rôle : présent, sans crier. */
  --bs-code-color: var(--sp-editorial);
  --bs-highlight-bg: var(--sp-accent-clair);

  /* Le séparateur du fil d'Ariane, et le lien qu'il sépare. */
  --bs-breadcrumb-divider-color: var(--sp-texte-faible);
  --bs-breadcrumb-item-active-color: var(--sp-texte-faible);

  color-scheme: light;
}

/* Le mode sombre suit celui de la marque. On le prend du système ET d'un
   attribut : le premier pour qui n'a rien réglé, le second pour qui a choisi.

   Les fonds, surfaces et textes de nuit viennent des jetons. Quatre valeurs ne
   s'y trouvent pas et sont donc écrites ici : `don-tokens.css` ne décrit sa
   nuit que sous `[data-theme="dark"]`, pas sous `prefers-color-scheme`, et une
   variable ne se lit pas d'un bloc qui ne s'applique pas. Ce ne sont pas des
   teintes de MARQUE — ce sont des neutres d'interface, les mêmes que ceux du
   back-office. Le jour où le kit les nommera, ces quatre lignes disparaîtront. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sp-fond: var(--don-fond-nuit);
    --sp-surface: var(--don-surface-nuit);
    --sp-surface-creuse: #1E2030;
    --sp-bord: #33364A;
    --sp-texte: var(--don-texte-nuit);
    --sp-texte-faible: #9A9CAB;
    --sp-primaire-100: #24303C;
    /* Les teintes FONCÉES du primaire servent au texte (surtitre d'une carte
       retenue, code, lien) : posées telles quelles sur le fond de nuit,
       elles disparaissent. La nuit, elles s'éclaircissent. */
    --sp-primaire-800: var(--don-violet-300);
    --sp-primaire-600: var(--don-violet-400);
    --sp-editorial: var(--don-violet-300);
    --sp-accent: var(--don-menthe-nuit);
    --sp-titre: var(--sp-texte);
    --bs-body-color: var(--sp-texte);
    --bs-body-color-rgb: 233, 233, 237;     /* --don-texte-nuit #E9E9ED */
    --bs-body-bg: var(--sp-fond);
    --bs-body-bg-rgb: 22, 24, 38;           /* --don-fond-nuit  #161826 */
    --bs-emphasis-color: var(--sp-texte);
    --bs-heading-color: var(--sp-texte);
    --bs-border-color: var(--sp-bord);
    --bs-secondary-color: var(--sp-texte-faible);
    --bs-secondary-color-rgb: 154, 156, 171;
    --bs-secondary-bg: var(--sp-surface-creuse);
    --bs-tertiary-color: var(--sp-texte-faible);
    --bs-tertiary-bg: var(--sp-surface-creuse);
    /* Le PRIMAIRE ne change pas la nuit : un bouton plein en bleu clair
       reçoit du texte clair et ne se lit plus. C'est le LIEN seul qui
       s'éclaircit, parce que lui est du texte posé sur le fond de la page. */
    --bs-link-color: var(--don-violet-300);
    --bs-link-color-rgb: 162, 153, 235;     /* --don-violet-300 #A299EB */
    --bs-link-hover-color: var(--don-violet-200);
    --bs-link-hover-color-rgb: 201, 196, 244;
    --bs-breadcrumb-divider-color: var(--sp-texte-faible);
    --bs-breadcrumb-item-active-color: var(--sp-texte-faible);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --sp-fond: var(--don-fond-nuit);
  --sp-surface: var(--don-surface-nuit);
  --sp-surface-creuse: #1E2030;
  --sp-bord: #33364A;
  --sp-texte: var(--don-texte-nuit);
  --sp-texte-faible: #9A9CAB;
  --sp-primaire-100: #24303C;
  /* Les teintes FONCÉES du primaire servent au texte (surtitre d'une carte
     retenue, code, lien) : posées telles quelles sur le fond de nuit,
     elles disparaissent. La nuit, elles s'éclaircissent. */
  --sp-primaire-800: var(--don-violet-300);
  --sp-primaire-600: var(--don-violet-400);
  --sp-editorial: var(--don-violet-300);
  --sp-accent: var(--don-menthe-nuit);
  --sp-titre: var(--sp-texte);
  --bs-body-color: var(--sp-texte);
  --bs-body-color-rgb: 233, 233, 237;
  --bs-body-bg: var(--sp-fond);
  --bs-body-bg-rgb: 22, 24, 38;
  --bs-emphasis-color: var(--sp-texte);
  --bs-heading-color: var(--sp-texte);
  --bs-border-color: var(--sp-bord);
  --bs-secondary-color: var(--sp-texte-faible);
  --bs-secondary-color-rgb: 154, 156, 171;
  --bs-secondary-bg: var(--sp-surface-creuse);
  --bs-tertiary-color: var(--sp-texte-faible);
  --bs-tertiary-bg: var(--sp-surface-creuse);
  --bs-link-color: var(--don-violet-300);
  --bs-link-color-rgb: 162, 153, 235;     /* --don-violet-300 #A299EB */
  --bs-link-hover-color: var(--don-violet-200);
  --bs-link-hover-color-rgb: 201, 196, 244;
  --bs-breadcrumb-divider-color: var(--sp-texte-faible);
  --bs-breadcrumb-item-active-color: var(--sp-texte-faible);
  color-scheme: dark;
}

/* --- Le socle ----------------------------------------------------------- */

body {
  font-family: var(--sp-texte-police);
  background: var(--sp-fond);
  color: var(--sp-texte);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .sp-display {
  font-family: var(--sp-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--sp-titre);
}

code, kbd, pre, .font-monospace { font-family: var(--sp-mono); }

/* Une largeur de ligne, et une seule. Au-delà d'environ soixante-quinze
   signes, l'œil perd la ligne suivante en revenant à la marge. */
.sp-lecture { max-width: 46rem; }

a { text-decoration-thickness: 1px; text-underline-offset: .18em; }

/* Le focus se VOIT. Un contour retiré « parce que c'est laid » rend le site
   inutilisable au clavier, et personne ne s'en aperçoit à la souris. */
/* Le halo de focus est ORANGE, et c'est le bon emploi de l'accent : il doit se
   détacher sur n'importe quel fond, y compris sur un bouton bleu — un contour
   bleu sur un bouton bleu ne se voit pas. */
:focus-visible {
  outline: 3px solid var(--sp-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- La barre de navigation --------------------------------------------- */

.sp-nav {
  background: color-mix(in srgb, var(--sp-fond) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
/* Posée par `site-public.js` dès que la page défile : la barre ne se détache
   du contenu que lorsqu'elle le recouvre vraiment. */
.sp-nav.sp-nav--detachee {
  border-bottom-color: var(--sp-bord);
  box-shadow: 0 1px 12px rgba(26, 26, 26, .05);
}

.sp-nav .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}

/* LE LOGOTYPE, pas l'icône. Ce sont deux fichiers différents et deux usages
   différents, et je les avais confondus : `don-mark-*.svg` est le SIGNE seul,
   celui de l'onglet du navigateur et de la pastille d'application ;
   `don-logo-*.svg` est le logotype — le signe, le mot « Dón » et la baseline
   « savoir, c'est pouvoir » dans un seul dessin. Sur un site, c'est le
   logotype qui va. Le nom est DEDANS : l'écrire à côté en HTML l'affichait
   deux fois.

   Il n'est pas non plus redessiné en CSS. Le back-office avait tracé un carré
   à la main faute de logo, et le README du kit dit pourquoi cela a été
   corrigé : un signe redessiné finit par ne plus ressembler à celui des
   magasins et des documents.

   Deux variantes, et la nuit n'est pas un détail : le mot « Dón » est en
   graphite dans la version couleur, et sur un fond de nuit il devient
   illisible — la baseline, elle, disparaît tout à fait. `don-logo-dark-ui.svg`
   est éclairci pour cela.

   Le rapport du dessin est 460 × 236 : « Dɔ̀n » sur une ligne, « Skolia »
   dessous. La largeur suit la hauteur plutôt qu'une valeur figée : posée en
   dur, elle écraserait le logo au premier changement de taille. */
.sp-logo {
  display: block;
  height: 40px;
  width: calc(40px * 460 / 236);
  background: url('../img/don-logo.svg') center / contain no-repeat;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sp-logo {
    background-image: url('../img/don-logo-dark-ui.svg');
  }
}
:root[data-theme="dark"] .sp-logo {
  background-image: url('../img/don-logo-dark-ui.svg');
}

/* Dans le pied, il a la place de respirer. */
.sp-logo--pied { height: 56px; width: calc(56px * 460 / 236); }

.sp-nav .nav-link {
  color: var(--sp-texte);
  font-weight: 500;
  /* Un libellé de menu ne se plie JAMAIS : « Ce que ça fait » sur deux
     lignes faisait d'une barre une grille. */
  white-space: nowrap;
  padding: .5rem 1rem;
  border-radius: var(--sp-rayon-petit);
}
.sp-nav .nav-link:hover { color: var(--sp-texte); background: var(--sp-surface-creuse); }
.sp-nav .nav-link.active { color: var(--sp-texte); }
/* L'onglet courant se marque par un trait sous le mot, pas par un aplat : un
   aplat sur une barre translucide devient une deuxième barre. */
.sp-nav .nav-link.active::after {
  content: "";
  display: block;
  height: 2px;
  margin: .3rem .2rem -.35rem;
  border-radius: 2px;
  background: var(--sp-primaire);
}

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

.sp-heros { padding: clamp(4rem, 10vw, 7.5rem) 0 clamp(3rem, 6vw, 5rem); }
/* Grand, serré, sur deux ou trois lignes au plus : `ch` borne la ligne au
   nombre de signes, quelle que soit la largeur de l'écran. */
.sp-heros__titre {
  font-size: clamp(2.5rem, 6.4vw, 4.9rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.04;
  max-width: 17ch;
}
.sp-chapeau {
  font-size: clamp(1.08rem, 1.9vw, 1.3rem);
  line-height: 1.6;
  color: var(--sp-texte-faible);
  max-width: 42rem;
}

/* La ligne de couleur du feuillage : les quatre teintes de la marque, dans
   l'ordre où elles y apparaissent. Décorative, donc masquée aux lecteurs
   d'écran par `aria-hidden` côté gabarit. */
.sp-feuillage {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg,
    var(--don-violet) 0%, var(--don-violet) 34%,
    var(--don-violet-fonce) 34%, var(--don-violet-fonce) 62%,
    var(--don-menthe) 62%, var(--don-menthe) 100%);
}

/* --- Les blocs ---------------------------------------------------------- */

/* Deux sections qui se suivent ne cumulent pas leurs marges : la seconde
   n'ajoute rien en haut. Empilées, elles laissaient un vide de la hauteur
   d'un écran entre deux blocs, et la page paraissait cassée. */
.sp-section { padding: clamp(3rem, 6vw, 4.5rem) 0; }
.sp-section + .sp-section { padding-top: 0; }

.sp-carte {
  background: var(--sp-surface);
  border: 1px solid var(--sp-bord);
  border-radius: var(--sp-rayon);
  padding: 2rem;
  height: 100%;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sp-carte:hover { border-color: var(--don-graphite-300); box-shadow: var(--sp-ombre); }
/* Une carte qui porte un lien pleine surface se soulève ; les autres non —
   bouger sous le curseur sans être cliquable est une promesse non tenue. */
.sp-carte:has(.stretched-link):hover { transform: translateY(-2px); }

/* Les composants `card` de Bootstrap prennent l'habit de `.sp-carte`. Une
   règle plutôt qu'une réécriture de douze gabarits : les deux doivent se
   ressembler, et deux façons de dessiner la même boîte finiraient par
   diverger à la première retouche. */
.card {
  background: var(--sp-surface);
  border: 1px solid var(--sp-bord);
  border-radius: var(--sp-rayon);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.card:hover { border-color: var(--don-graphite-300); box-shadow: var(--sp-ombre); }
.card-body { padding: 2rem; }
/* Le pied d'une carte n'est pas une seconde carte : pas de filet, pas de
   fond, le bouton dans le prolongement du texte. */
.card-footer { background: transparent; border-top: 0; padding: 0 2rem 2rem; }
.card.border-0 { border: 0 !important; }
.card.border-0:hover { box-shadow: none; }

.sp-creux {
  background: var(--sp-surface-creuse);
  border-radius: var(--sp-rayon);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}

/* La pastille d'icône. Le fond et le trait sont TIRÉS du primaire par
   `color-mix` plutôt que posés en dur : la nuit, un bleu 800 sur un bleu 100
   redéfini reste du bleu sombre sur du bleu sombre, et l'icône disparaît. En
   mélangeant, le fond suit toujours la surface et le trait toujours le texte —
   quel que soit le thème, l'écart est le même. */
.sp-icone {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem;
  margin-bottom: .85rem;
  border-radius: var(--sp-rayon-petit);
  background: color-mix(in srgb, var(--sp-primaire) 14%, var(--sp-surface));
  color: color-mix(in srgb, var(--sp-primaire) 55%, var(--sp-texte));
  font-size: 1.25rem;
}
/* La variante orange existe pour UN bloc par page au plus — celui qu'on veut
   qu'on lise en premier. Deux orange sur un écran ne désignent plus rien. */
.sp-icone--accent {
  background: color-mix(in srgb, var(--sp-accent) 16%, var(--sp-surface));
  color: color-mix(in srgb, var(--sp-accent) 62%, var(--sp-texte));
}

/* Les gabarits transplantés posent `text-primary` sur leurs icônes. Le bleu
   de marque tient sur un fond clair ; sur un fond de nuit il s'enfonce. On le
   remonte, sans toucher aux gabarits. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sp-carte .text-primary,
  :root:not([data-theme="light"]) .card .text-primary {
    color: var(--don-violet-300) !important;
  }
}
:root[data-theme="dark"] .sp-carte .text-primary,
:root[data-theme="dark"] .card .text-primary {
  color: var(--don-violet-300) !important;
}

/* La TEINTE DOUCE : un fond à peine coloré, un texte franc. Elle marque
   l'entrée courante d'un sommaire ou une étiquette de catégorie, là où un
   aplat plein serait trop fort et où le texte seul ne se verrait pas.

   Bootstrap n'en a pas : son `text-bg-primary` est un aplat PLEIN avec du
   texte blanc. Les gabarits venus d'ailleurs portaient `bg-light-primary`,
   qui était une teinte douce là-bas ; converti en `text-bg-primary`, il
   donnait du texte primaire sur fond primaire — c'est-à-dire rien. */
.sp-teinte {
  background: color-mix(in srgb, var(--sp-primaire) 13%, var(--sp-surface));
  color: color-mix(in srgb, var(--sp-primaire) 60%, var(--sp-texte));
  border-radius: var(--sp-rayon-petit);
}
a.sp-teinte:hover {
  background: color-mix(in srgb, var(--sp-primaire) 20%, var(--sp-surface));
}

.sp-surtitre {
  font-family: var(--sp-mono);
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--sp-texte-faible);
}

/* --- Les boutons -------------------------------------------------------- */

.btn { font-weight: 500; border-radius: 999px; padding: .55rem 1.25rem; }
.btn-sm { padding: .3rem .85rem; }
.btn-lg { padding: .9rem 1.9rem; font-size: 1.05rem; }
/* Les boutons groupés (le simulateur) gardent leurs coins de groupe : une
   pilule coupée en deux se lit comme deux boutons cassés. */
.btn-group > .btn { border-radius: var(--sp-rayon-petit); }
.btn-group > .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-group > .btn:not(:first-of-type) { border-top-left-radius: 0; border-bottom-left-radius: 0; }

.btn-primary {
  --bs-btn-bg: var(--sp-primaire);
  --bs-btn-border-color: var(--sp-primaire);
  --bs-btn-color: #FFFFFF;
  --bs-btn-hover-bg: var(--sp-primaire-600);
  --bs-btn-hover-border-color: var(--sp-primaire-600);
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-active-bg: var(--sp-primaire-800);
  --bs-btn-active-border-color: var(--sp-primaire-800);
}
.btn-outline-secondary {
  --bs-btn-color: var(--sp-texte);
  --bs-btn-border-color: var(--sp-bord);
  --bs-btn-hover-bg: var(--sp-surface-creuse);
  --bs-btn-hover-border-color: var(--don-graphite-300);
  --bs-btn-hover-color: var(--sp-texte);
}
/* Le contour prend sa couleur du TEXTE de la page, mêlé de primaire : posé en
   dur au bleu 800, il devenait la nuit presque la couleur du fond, et le
   bouton se lisait comme un cadre vide. */
.btn-outline-primary {
  --bs-btn-color: color-mix(in srgb, var(--sp-primaire) 45%, var(--sp-texte));
  --bs-btn-border-color: color-mix(in srgb, var(--sp-primaire) 60%, var(--sp-bord));
  --bs-btn-hover-bg: var(--sp-primaire);
  --bs-btn-hover-border-color: var(--sp-primaire);
  --bs-btn-hover-color: #FFFFFF;
  /* Un bouton à bascule (`.btn-check`) coché est plein : il prend le
     primaire, pas le bleu d'usine que Bootstrap garde pour l'état actif. */
  --bs-btn-active-bg: var(--sp-primaire);
  --bs-btn-active-border-color: var(--sp-primaire);
  --bs-btn-active-color: #FFFFFF;
}
/* Le curseur suit la marque : Bootstrap peint sa poignée d'un bleu à lui. */
.form-range::-webkit-slider-thumb { background-color: var(--sp-primaire); }
.form-range::-moz-range-thumb { background-color: var(--sp-primaire); }
.form-range::-webkit-slider-thumb:active { background-color: var(--sp-primaire-600); }
.form-range::-moz-range-thumb:active { background-color: var(--sp-primaire-600); }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--sp-primaire) 25%, transparent); }

/* --- Les tableaux et les listes de définitions -------------------------- */

.sp-table th { font-weight: 600; color: var(--sp-texte); }
.sp-table td { color: var(--sp-texte-faible); }
.sp-table > :not(caption) > * > * {
  padding: .85rem .75rem;
  border-bottom-color: var(--sp-bord);
  background: transparent;
}

dl.sp-fiche dt { font-weight: 400; color: var(--sp-texte-faible); font-size: .875rem; }
dl.sp-fiche dd { margin-bottom: .85rem; }

/* --- Le prix ------------------------------------------------------------ */

.sp-prix {
  font-family: var(--sp-display);
  font-size: 2.1rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.sp-prix small { font-size: .9rem; font-weight: 400; color: var(--sp-texte-faible); }

/* La carte mise en avant. Un liseré, pas un fond coloré : un aplat orange
   derrière un tableau de chiffres les rend plus durs à lire, et c'est
   précisément la carte qu'on veut qu'on lise. */
/* Une carte qui appelle l'attention : liseré ORANGE, et c'est ici que
   l'accent sert. `border-warning-subtle` de Bootstrap sortait un beige qui
   n'est nulle part dans la marque. */
.sp-carte--attention,
.card.border-warning-subtle {
  border-color: color-mix(in srgb, var(--sp-accent) 55%, var(--sp-bord)) !important;
}

.sp-carte--retenue { border-color: var(--sp-primaire); box-shadow: var(--sp-ombre); }
.sp-carte--retenue .sp-surtitre { color: var(--sp-primaire-800); }

/* --- Le corps d'un article, d'une page de documentation ------------------
   Ce que l'éditeur enrichi produit : des titres, des listes, des tableaux, du
   code, des images. Il arrive en un seul bloc de HTML, et on ne peut pas lui
   poser de classes — d'où des règles qui descendent depuis un conteneur.

   La MESURE d'abord. Un texte suivi se lit à environ soixante-quinze signes
   par ligne ; au-delà, l'œil perd la ligne suivante en revenant à la marge, et
   la fatigue arrive au troisième paragraphe. C'est la seule décision de cette
   section qui compte vraiment. */

.contenu-redactionnel {
  max-width: 46rem;
  font-size: 1.0625rem;
  line-height: 1.7;
}
.contenu-redactionnel > * + * { margin-top: 1.1em; }

/* Un titre appartient à ce qui SUIT, pas à ce qui précède : il lui faut plus
   d'air au-dessus qu'en dessous, sinon il flotte entre deux sections et l'on
   ne sait plus lequel des deux blocs il annonce. */
.contenu-redactionnel h2,
.contenu-redactionnel h3,
.contenu-redactionnel h4 {
  font-family: var(--sp-display);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-top: 2.2em;
  margin-bottom: .6em;
  /* L'ancre du sommaire ne doit pas passer sous la barre collante. */
  scroll-margin-top: 6rem;
}
.contenu-redactionnel h2 { font-size: 1.6rem; }
.contenu-redactionnel h3 { font-size: 1.28rem; }
.contenu-redactionnel h4 { font-size: 1.08rem; }

.contenu-redactionnel ul,
.contenu-redactionnel ol { padding-left: 1.3rem; }
.contenu-redactionnel li + li { margin-top: .35em; }

.contenu-redactionnel img,
.contenu-redactionnel video {
  max-width: 100%;
  height: auto;
  border-radius: var(--sp-rayon);
  border: 1px solid var(--sp-bord);
}
.contenu-redactionnel figure { margin: 1.8em 0; }
.contenu-redactionnel figcaption {
  font-size: .875rem;
  color: var(--sp-texte-faible);
  margin-top: .5em;
}

/* Une citation se marque par un FILET et un retrait, pas par des guillemets
   dessinés : le texte en porte déjà, et deux jeux se contredisent. */
.contenu-redactionnel blockquote {
  margin: 1.8em 0;
  padding: .2em 0 .2em 1.2rem;
  border-left: 3px solid var(--sp-accent);
  color: var(--sp-texte-faible);
  font-style: italic;
}
.contenu-redactionnel blockquote p:last-child { margin-bottom: 0; }

.contenu-redactionnel code {
  background: var(--sp-surface-creuse);
  padding: .12em .38em;
  border-radius: 5px;
  font-size: .9em;
}
.contenu-redactionnel pre {
  background: var(--sp-surface-creuse);
  border: 1px solid var(--sp-bord);
  border-radius: var(--sp-rayon-petit);
  padding: 1rem 1.1rem;
  /* Un bloc de code ne se plie pas : il DÉFILE, et dans sa propre boîte. Le
     laisser déborder pousse toute la page vers la droite sur un téléphone. */
  overflow-x: auto;
}
.contenu-redactionnel pre code { background: none; padding: 0; }

/* Un tableau large défile lui aussi dans sa boîte, pour la même raison. */
.contenu-redactionnel table {
  width: 100%;
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
}
.contenu-redactionnel th,
.contenu-redactionnel td {
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--sp-bord);
  text-align: left;
  vertical-align: top;
}
.contenu-redactionnel th { font-weight: 600; white-space: nowrap; }

.contenu-redactionnel hr {
  border: 0;
  border-top: 1px solid var(--sp-bord);
  margin: 2.4em 0;
  opacity: 1;
}

/* --- Le sommaire d'une page longue --------------------------------------
   Un seul balisage, deux présentations. Sur grand écran il est POSÉ DANS LA
   PAGE, ouvert, à côté du texte : c'est là qu'on le veut en lisant une
   documentation, et le replier coûterait un clic pour une information qu'on
   consulte du coin de l'œil. Sous 992 px la colonne n'existe plus — il passe
   alors derrière un bouton flottant, plutôt que de pousser l'article vers le
   bas. */

.sommaire__panneau {
  position: sticky;
  top: 5.5rem;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
}
.sommaire__panneau a {
  display: block;
  padding: .28rem 0;
  color: var(--sp-texte-faible);
  font-size: .875rem;
  line-height: 1.4;
}
.sommaire__panneau a:hover { color: var(--sp-texte); }
.sommaire__panneau li.est-actif > a {
  color: var(--sp-texte);
  font-weight: 600;
  /* Le filet marque l'entrée en cours SANS déplacer le texte : une bordure
     posée seulement sur l'entrée active décalerait toute la liste d'un
     pixel au passage, et la colonne semblerait trembler. */
  box-shadow: inset 2px 0 0 var(--sp-accent);
  padding-left: .55rem;
}
.sommaire-niveau-3 { padding-left: .8rem; }
.sommaire-niveau-4 { padding-left: 1.6rem; }

/* Le bouton n'existe que sur petit écran, et le script le révèle : masqué par
   la seule feuille, il resterait invisible là où il sert. */
.sommaire__bouton { display: none; }

@media (max-width: 991.98px) {
  .sommaire__bouton {
    position: fixed;
    right: 1rem; bottom: 1rem;
    z-index: 1030;
    width: 3rem; height: 3rem;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .sommaire__panneau {
    position: fixed;
    right: 1rem; bottom: 4.6rem; left: 1rem;
    max-height: 60vh;
    z-index: 1029;
    box-shadow: var(--sp-ombre);
  }
  .sommaire__panneau[hidden] { display: none; }
}

/* --- Le pied ------------------------------------------------------------
   De NUIT, quel que soit le thème : le pied ferme la page comme un socle, et
   c'est le seul grand aplat sombre du site avec la dernière bande. Le
   logotype y prend sa variante éclaircie. */

.sp-pied {
  background: var(--don-violet-900);
  color: color-mix(in srgb, var(--don-texte-nuit) 72%, transparent);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem;
}
.sp-pied a:not(.btn) { color: color-mix(in srgb, var(--don-texte-nuit) 72%, transparent); text-decoration: none; }
.sp-pied a:not(.btn):hover { color: var(--don-texte-nuit); text-decoration: underline; }
.sp-pied li + li { margin-top: .55rem; }
.sp-pied h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .09em;
              color: var(--don-texte-nuit); font-family: var(--sp-mono); font-weight: 500;
              margin-bottom: 1.1rem; }
.sp-pied .sp-logo { background-image: url('../img/don-logo-dark-ui.svg'); }
.sp-pied__phrase { max-width: 22rem; }
.sp-pied__bas { margin-top: clamp(3rem, 6vw, 4.5rem); font-size: .85rem; }

/* --- L'apparition au défilement ----------------------------------------- */

/* Posé par le script, et SEULEMENT par lui : sans JavaScript, la classe
   n'arrive jamais et le contenu reste visible. Une animation d'entrée qui
   cache le texte quand le script échoue est une page blanche. */
.sp-apparait { opacity: 0; transform: translateY(10px); }
.sp-apparait.sp-apparait--vu {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s ease;
}

/* Qui a demandé moins d'animation en reçoit moins. Ce n'est pas une
   préférence esthétique : le mouvement déclenche des nausées chez une partie
   des lecteurs. */
@media (prefers-reduced-motion: reduce) {
  .sp-apparait, .sp-apparait--vu { opacity: 1; transform: none; transition: none; }
  .sp-carte { transition: none; }
  .sp-carte:has(.stretched-link):hover { transform: none; }
  * { scroll-behavior: auto !important; }
}

/* --- L'impression ------------------------------------------------------- */

@media print {
  .sp-nav, .sp-pied, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .sp-carte { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
}


/* --- Le simulateur des tarifs ---------------------------------------------
   Un curseur par cycle, le nombre à côté : on fait glisser, tout suit. Le
   graphique est un SVG dessiné par le script — deux barres par cycle, celle
   de la formule retenue en plein, l'autre en clair. */
.sp-curseur {
  display: grid; grid-template-columns: 11rem 1fr 5.5rem; gap: .75rem; align-items: center;
  padding: .35rem 0;
}
.sp-curseur__nom { font-size: .9rem; margin: 0; }
.sp-curseur__glissiere { accent-color: var(--sp-primaire); }
.sp-curseur__nombre { text-align: right; }
@media (max-width: 575.98px) {
  .sp-curseur { grid-template-columns: 1fr 5.5rem; }
  .sp-curseur__nom { grid-column: 1 / -1; }
}
.sp-total-eleves { font-size: 1.25rem; color: var(--sp-primaire); }
.sp-graphique { width: 100%; height: auto; display: block; }
.sp-graphique__axe { stroke: var(--sp-bord); }
.sp-graphique__barre { opacity: .35; }
.sp-graphique__barre--compte { fill: var(--sp-primaire); }
.sp-graphique__barre--palier { fill: var(--sp-accent); }
.sp-graphique__barre.est-retenue { opacity: 1; }
.sp-graphique__valeur { font-size: 10px; fill: var(--sp-texte-faible); }
.sp-graphique__cycle { font-size: 10px; fill: var(--sp-texte); }
.sp-graphique__cycle--eff { fill: var(--sp-texte-faible); }
.sp-pastille { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; vertical-align: middle; }
.sp-pastille--compte { background: var(--sp-primaire); }
.sp-pastille--palier { background: var(--sp-accent); }


/* ==========================================================================
   LA REFONTE : DE L'AIR.

   Ce qui manquait au site n'était ni une couleur ni une police — ce sont
   celles du kit — mais de la place et des plans. Une page de vente se
   parcourt : une idée par bande, un fond par bande, et entre deux bandes
   assez d'air pour que l'œil sache qu'il change de sujet. Les proportions
   viennent des sites d'éditeurs qui se lisent bien (grands titres serrés,
   boutons en pilule, aplats arrondis, pied sombre) ; les couleurs, elles,
   restent celles du logotype.
   ========================================================================== */

/* --- Le fil du haut ------------------------------------------------------ */

.sp-fil {
  background: var(--sp-surface-creuse);
  font-size: .8rem;
  padding: .3rem 0;
}
.sp-fil a { color: var(--sp-texte-faible); text-decoration: none; }
.sp-fil a:hover { color: var(--sp-texte); }
.sp-fil__langue {
  width: 4.2rem;
  border: 0;
  background-color: transparent;
  font-size: .8rem;
  padding-top: .1rem; padding-bottom: .1rem;
  color: var(--sp-texte-faible);
}
.sp-fil__theme {
  border: 0; background: none; padding: 0 .2rem;
  color: var(--sp-texte-faible);
}
.sp-fil__theme:hover { color: var(--sp-texte); }

/* La barre respire : plus haute, le logotype un peu plus grand. */
.sp-nav { padding: .9rem 0; }
.sp-nav .sp-logo { height: 44px; width: calc(44px * 460 / 236); }
@media (max-width: 1199.98px) {
  .sp-nav .navbar-nav { padding: 1rem 0; }
  .sp-nav__gestes { padding-bottom: 1rem; flex-wrap: wrap; }
}

/* Un lien qui a la forme d'un bouton sans en avoir le poids : « Espace
   établissement », à côté du seul bouton plein de la barre. */
.sp-btn-lien {
  --bs-btn-color: var(--sp-texte);
  --bs-btn-hover-color: var(--sp-primaire-800);
  --bs-btn-hover-bg: var(--sp-surface-creuse);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--sp-texte);
}

/* Sur un fond sombre ou coloré : la pilule claire, et son contour. */
.btn-light {
  --bs-btn-bg: var(--don-surface);
  --bs-btn-border-color: var(--don-surface);
  --bs-btn-color: var(--don-violet-800);
  --bs-btn-hover-bg: var(--don-violet-100);
  --bs-btn-hover-border-color: var(--don-violet-100);
  --bs-btn-hover-color: var(--don-violet-900);
}
.btn-outline-light {
  --bs-btn-color: var(--don-texte-nuit);
  --bs-btn-border-color: color-mix(in srgb, var(--don-texte-nuit) 55%, transparent);
  --bs-btn-hover-bg: color-mix(in srgb, var(--don-texte-nuit) 12%, transparent);
  --bs-btn-hover-border-color: var(--don-texte-nuit);
  --bs-btn-hover-color: var(--don-texte-nuit);
}

/* Les badges de Bootstrap prennent la forme des pilules du site. */
.badge { border-radius: 999px; font-weight: 500; padding: .4em .85em; }
.badge.text-bg-secondary {
  background: var(--sp-surface-creuse) !important;
  color: var(--sp-texte) !important;
}

/* L'étiquette au-dessus d'un grand titre : une pilule teintée. */
.sp-etiquette {
  display: inline-block;
  padding: .35rem 1rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 500;
  background: color-mix(in srgb, var(--sp-accent) 14%, var(--sp-surface));
  color: color-mix(in srgb, var(--sp-accent) 55%, var(--sp-texte));
}

/* --- Les bandes ------------------------------------------------------------
   Pleine largeur, chacune avec son fond et SON conteneur. L'écart est grand
   à dessein : c'est lui qui fait respirer la page. */

.sp-bande { padding: clamp(4.5rem, 10vw, 8rem) 0; }
.sp-bande--creuse { background: var(--sp-surface-creuse); }
.sp-bande--violet { background: color-mix(in srgb, var(--sp-primaire) 9%, var(--sp-fond)); }
/* Des chiffres se lisent d'un coup d'œil : leur bande n'a pas besoin de la
   hauteur d'un paragraphe. */
.sp-bande--reperes { padding: clamp(3.5rem, 7vw, 5rem) 0; }
.sp-bande--menthe { background: color-mix(in srgb, var(--sp-accent) 11%, var(--sp-fond)); }
/* La dernière bande, sur le violet de la marque : c'est elle qui conclut. */
.sp-bande--nuit {
  background:
    radial-gradient(60rem 30rem at 85% 120%, color-mix(in srgb, var(--don-menthe) 30%, transparent), transparent 70%),
    linear-gradient(120deg, var(--don-violet-fonce) 0%, var(--don-violet) 100%);
  color: var(--don-texte-nuit);
}
.sp-bande--nuit .sp-titre-bande { color: var(--don-surface); }
.sp-bande--nuit .sp-chapeau { color: color-mix(in srgb, var(--don-texte-nuit) 80%, transparent); }

.sp-intro { max-width: 44rem; }
.sp-titre-bande {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  max-width: 20ch;
}
.text-center .sp-titre-bande, .sp-intro .sp-titre-bande { margin-left: auto; margin-right: auto; }
.sp-titre-bloc { font-size: 1.2rem; font-weight: 600; margin: 1.1rem 0 .6rem; }

.sp-icone--grande { width: 3.4rem; height: 3.4rem; font-size: 1.55rem; border-radius: 16px; margin-bottom: 0; }

/* --- La scène -------------------------------------------------------------
   Un aplat arrondi aux teintes douces de la marque, des formes posées dessus
   comme des objets, et une carte qui en déborde. Tout est décoratif sauf la
   carte : les formes sont `aria-hidden`. */

.sp-scene-bande { padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.sp-scene {
  position: relative;
  min-height: clamp(20rem, 38vw, 30rem);
  border-radius: var(--sp-rayon-grand);
  background:
    radial-gradient(40rem 22rem at 20% 110%, color-mix(in srgb, var(--don-menthe-300) 70%, transparent), transparent 70%),
    linear-gradient(120deg, var(--don-menthe-100) 0%, var(--don-violet-100) 100%);
  overflow: hidden;
}
:root[data-theme="dark"] .sp-scene {
  background:
    radial-gradient(40rem 22rem at 20% 110%, color-mix(in srgb, var(--don-menthe-800) 70%, transparent), transparent 70%),
    linear-gradient(120deg, var(--don-menthe-900) 0%, var(--don-violet-900) 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sp-scene {
    background:
      radial-gradient(40rem 22rem at 20% 110%, color-mix(in srgb, var(--don-menthe-800) 70%, transparent), transparent 70%),
      linear-gradient(120deg, var(--don-menthe-900) 0%, var(--don-violet-900) 100%);
  }
}

/* Deux formes aux couleurs du logotype, en `em` dans une boîte posée à
   droite : une seule taille de police les met à l'échelle ensemble. Elles
   passent DERRIÈRE les fenêtres — un rappel de la marque, pas un décor.
   Origine : le coin bas-gauche. */
.sp-scene__formes {
  position: absolute; right: 3%; bottom: 0;
  width: 34em; height: 26em;
  font-size: clamp(8px, 1.2vw, 15px);
}
.sp-forme { position: absolute; display: block; }
/* Un ombrage bas et doux, comme d'un objet posé. */
.sp-forme--bille-menthe::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -.7em; height: .7em;
  border-radius: 50%; background: rgba(16, 10, 67, .14); filter: blur(4px);
}
.sp-forme--anneau-petit {
  left: 26em; bottom: 18.5em; width: 7em; height: 7em;
  border-radius: 50%;
  border: .9em solid var(--don-menthe-600);
}
.sp-forme--bille-menthe {
  left: 29.5em; bottom: 0; width: 3.4em; height: 3.4em;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, var(--don-menthe-300), var(--don-menthe-600) 70%);
}

.sp-scene__pastille {
  position: absolute; left: clamp(1rem, 4vw, 3rem); top: clamp(1rem, 4vw, 2.5rem);
  display: inline-flex; gap: .5rem; align-items: center;
  padding: .55rem 1rem;
  border-radius: 999px;
  background: var(--sp-surface);
  color: var(--sp-texte);
  font-size: .85rem; font-weight: 500;
  box-shadow: var(--sp-ombre);
}
.sp-scene__pastille i { color: var(--sp-accent); }

/* --- Les fenêtres du logiciel --------------------------------------------
   De vraies captures, dans un cadre de fenêtre : la barre aux trois points
   dit « c'est un écran », sans imiter un navigateur précis. La fenêtre de
   devant déborde du bas de la scène — on voit le logiciel continuer. */

.sp-fenetre {
  position: absolute;
  border-radius: 14px;
  overflow: hidden;
  background: var(--sp-surface);
  border: 1px solid color-mix(in srgb, var(--don-violet-900) 10%, transparent);
  box-shadow: 0 30px 60px rgba(16, 10, 67, .18), 0 6px 16px rgba(16, 10, 67, .08);
}
.sp-fenetre__barre {
  display: flex; gap: 6px; align-items: center;
  height: 28px; padding: 0 12px;
  background: var(--sp-surface-creuse);
  border-bottom: 1px solid var(--sp-bord);
}
.sp-fenetre__barre span { width: 9px; height: 9px; border-radius: 50%; background: var(--sp-bord); }
.sp-apercu { display: block; width: 100%; height: auto; }

.sp-fenetre--derriere { right: 3%; top: 9%; width: 50%; opacity: .92; }
.sp-fenetre--devant { right: 13%; top: 24%; width: 58%; }

/* La capture suit le thème de la page, comme le logotype : la claire le
   jour, la sombre la nuit — qu'elle vienne du système ou du bouton. */
.sp-apercu--sombre { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sp-apercu--clair { display: none; }
  :root:not([data-theme="light"]) .sp-apercu--sombre { display: block; }
}
:root[data-theme="dark"] .sp-apercu--clair { display: none; }
:root[data-theme="dark"] .sp-apercu--sombre { display: block; }

.sp-scene { min-height: clamp(22rem, 42vw, 34rem); }
/* Au-dessus des fenêtres : la carte et la pastille se lisent toujours. */
.sp-scene__carte, .sp-scene__pastille { z-index: 2; }

@media (max-width: 991.98px) {
  .sp-fenetre--derriere { display: none; }
  .sp-fenetre--devant { right: 4%; top: 18%; width: 80%; }
}

/* La carte qui déborde : sur le violet de la marque, le seul aplat plein de
   la scène — c'est le geste qu'on vient faire. */
.sp-scene__carte {
  position: absolute; left: clamp(1rem, 4vw, 3rem); bottom: clamp(1rem, 4vw, 3rem);
  width: min(22rem, calc(100% - 2rem));
  padding: 1.75rem;
  border-radius: var(--sp-rayon);
  background: var(--don-violet);
  color: var(--don-surface);
  box-shadow: 0 24px 48px rgba(16, 10, 67, .22);
}
.sp-scene__carte h2 { color: var(--don-surface); font-size: 1.45rem; font-weight: 700; margin-bottom: .6rem; }
.sp-scene__carte p { color: color-mix(in srgb, var(--don-surface) 85%, transparent); font-size: .95rem; }

/* Sur un téléphone, la scène garde ses formes à droite et la carte passe
   dessous, entière : une carte rognée par l'aplat ne se lit plus. */
@media (max-width: 767.98px) {
  .sp-scene { min-height: 17rem; overflow: visible; margin-bottom: 12rem; }
  .sp-scene__formes { display: none; }
  .sp-fenetre--devant { left: 4%; right: 4%; top: 4.2rem; width: auto; }
  .sp-scene__pastille { top: 1rem; left: 1rem; }
  .sp-scene__carte { left: 1rem; right: 1rem; width: auto; bottom: -11rem; }
}

/* --- Les repères --------------------------------------------------------- */

.sp-repere {
  font-family: var(--sp-display);
  font-size: clamp(2.6rem, 5.5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--sp-primaire);
  margin-bottom: .75rem;
}
.sp-repere__texte { color: var(--sp-texte-faible); max-width: 16rem; margin: 0 auto; }

/* --- Les portes ---------------------------------------------------------- */

.sp-carte--porte { padding: 2rem; border-radius: var(--sp-rayon); }

/* --- Le fil d'une journée sans réseau ------------------------------------ */

.sp-fil-du-jour { display: grid; gap: 1rem; }
.sp-fil-du-jour li {
  display: flex; gap: 1.1rem; align-items: flex-start;
  padding: 1.4rem 1.5rem;
  background: var(--sp-surface);
  border: 1px solid var(--sp-bord);
  border-radius: var(--sp-rayon);
}
.sp-fil-du-jour .sp-icone { flex: none; margin-bottom: 0; }
.sp-fil-du-jour strong { display: block; font-weight: 600; margin-bottom: .2rem; }
.sp-fil-du-jour span:not(.sp-icone) { display: block; color: var(--sp-texte-faible); font-size: .95rem; }

/* --- L'en-tête d'une page intérieure ------------------------------------- */

.sp-tete-page {
  background:
    radial-gradient(40rem 18rem at 100% 0%, color-mix(in srgb, var(--sp-accent) 12%, transparent), transparent 70%),
    color-mix(in srgb, var(--sp-primaire) 7%, var(--sp-fond));
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.sp-tete-page h1 {
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  margin-bottom: 1rem;
}
.sp-tete-page__chapeau p { font-size: 1.1rem; color: var(--sp-texte-faible); margin-bottom: 0; }
.sp-tete-page__chapeau:empty { display: none; }

/* Après l'en-tête, le contenu prend de l'air ; et tout contenu garde sa
   distance au pied. */
.sp-tete-page ~ main { padding-top: clamp(2.5rem, 5vw, 4rem); }
/* Les pages intérieures sont faites de sections posées dans le conteneur :
   entre deux, l'air d'une bande, et un titre de section qui se voit. */
main > .container > section + section { margin-top: clamp(1.5rem, 4vw, 3rem); }
main > .container > section > h2.h5 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin-bottom: 1.25rem; }
main > .container { padding-bottom: clamp(3rem, 7vw, 5rem); }

@media (prefers-reduced-motion: reduce) {
  .sp-scene * { transition: none; }
}

/* --- Les boutons de nuit ------------------------------------------------------
   Le contour violet, mêlé au texte, se fondait dans le fond de nuit : « Voir
   les fonctionnalités » n'était plus qu'un mot flottant, le cadre avait
   disparu. La nuit, le contour et le texte prennent les teintes CLAIRES du
   violet, et le survol un aplat franc. Même règle pour le contour neutre.
   Le bouton PLEIN ne change pas : éclairci, son texte blanc ne se lirait
   plus. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-outline-primary {
    --bs-btn-color: var(--don-violet-200);
    --bs-btn-border-color: var(--don-violet-300);
    --bs-btn-hover-bg: var(--don-violet);
    --bs-btn-hover-border-color: var(--don-violet);
    --bs-btn-hover-color: #FFFFFF;
  }
  :root:not([data-theme="light"]) .btn-outline-secondary {
    --bs-btn-color: var(--sp-texte);
    --bs-btn-border-color: var(--don-graphite-500);
  }
}
:root[data-theme="dark"] .btn-outline-primary {
  --bs-btn-color: var(--don-violet-200);
  --bs-btn-border-color: var(--don-violet-300);
  --bs-btn-hover-bg: var(--don-violet);
  --bs-btn-hover-border-color: var(--don-violet);
  --bs-btn-hover-color: #FFFFFF;
}
:root[data-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: var(--sp-texte);
  --bs-btn-border-color: var(--don-graphite-500);
}

/* --- L'espace client -----------------------------------------------------
   La même maison que le site : la bande de titre, puis des onglets soulignés
   (pas des boutons : on change de page, on ne déclenche rien). */
.sp-tete-page--espace { padding-bottom: 0; }
.sp-onglets { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
.sp-onglets a {
  padding: .75rem 1rem; white-space: nowrap; text-decoration: none;
  color: var(--sp-texte-faible); font-weight: 500;
  border-bottom: 3px solid transparent;
}
.sp-onglets a:hover { color: var(--sp-texte); }
.sp-onglets a[aria-current="page"] { color: var(--sp-texte); border-bottom-color: var(--sp-primaire); }
.sp-espace { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(3rem, 6vw, 4.5rem); }

/* Une ligne due : ce qu'on doit, combien, et le geste. */
.sp-ligne-due {
  display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center;
  padding: 1rem 1.25rem;
  background: var(--sp-surface);
  border: 1px solid var(--sp-bord);
  border-radius: var(--sp-rayon-petit);
}
.sp-ligne-due--retard { border-color: color-mix(in srgb, var(--bs-danger, #DC3545) 45%, var(--sp-bord)); }
.sp-ligne-due__montant { font-family: var(--sp-display); font-weight: 600; font-size: 1.1rem; white-space: nowrap; }
@media (max-width: 575.98px) {
  .sp-ligne-due { grid-template-columns: 1fr auto; }
  .sp-ligne-due > :last-child { grid-column: 1 / -1; }
}