/*
 * Wevalue — feuille de style unique.
 * Compte-temps municipal de Chaponost. Service public, pas une startup :
 * pas de dégradé criard, pas de néon, pas de coin ultra-arrondi à la mode.
 * 18 % des habitants ont plus de 75 ans — l'accessibilité est vérifiée au
 * calcul (ratios en commentaire), pas devinée.
 *
 * Direction visuelle (refonte) : la structure et le savoir-faire technique
 * (échelle d'ombres feuilletées, cadre-téléphone posé sur un fond teinté,
 * transition unique, focus clavier net) sont repris de la maquette SECOND
 * (même auteur, `second-demo-analyse/app/styles.css`), qui avait déjà
 * résolu « des cartes qui existent vraiment » — puis intégralement
 * ré-habillés à la charte chromatique de Wevalue : aucune des six couleurs
 * de SECOND ne survit ici, aucune couleur hors charte n'est introduite.
 * Le défaut n°1 signalé par le commanditaire (fond de page #F8FAFC contre
 * carte blanche, contraste de fond ≈ 1,03:1 — les cartes n'existaient pas)
 * est réglé en donnant à --fond le rôle de SURFACE DE CARTE, et en donnant
 * au fond de page son propre ton, plus soutenu, dérivé du bleu-gris de la
 * charte (voir --fondpage ci-dessous). Les cartes se détachent alors par
 * trois leviers cumulés, comme dans SECOND : un fond plus clair, un filet
 * nécessaire à la définition, une ombre discrète à deux couches — jamais
 * un aplat noir.
 *
 * Plan du fichier :
 *   1. Variables (couleurs de charte, fonds dérivés, ombres, espacements)
 *   2. Base (reset, typographie, focus clavier)
 *   3. Composants (carte, bouton, pastille, badge, texte, liste, champ…)
 *   4. Coquille de l'application (téléphone, en-tête, barre, démo, réglages)
 *   5. Mode aîné (bascule radicale de taille)
 *   6. Plein écran (compteur public de la place, écran d'entrée)
 *   7. L'assistant conversationnel (bulles, pistes, suggestions)
 *   8. Mouvement réduit, impression du relevé
 */

/* ────────────────────────────────────────────────────────────────────────
   1. VARIABLES
   ──────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* — Couleurs de la charte, noms exacts imposés par le contrat. Rien
     d'autre n'est une couleur : tout le reste de ce fichier n'est que du
     blanc, du noir ou un mélange (color-mix) de ces six teintes. — */
  --vert: #2E4A3A;      /* texte fort, structure, plein écran */
  --teal: #0F766E;      /* couleur d'action, boutons, liens */
  --corail: #E07A5A;    /* accent RARE — jamais comme texte ni comme fond
                            de texte, voir le pavé de ratios juste en
                            dessous */
  --or: #E9B44C;        /* le chronost, les soldes — clair, jamais en texte
                            sur fond clair */
  --bleugris: #A9C4CC;  /* fonds secondaires — clair, jamais en texte sur
                            fond clair ; c'est aussi la matière première du
                            fond de page, voir --fondpage */
  --fond: #F8FAFC;      /* SURFACE DE CARTE — le blanc cassé sur lequel une
                            carte se détache du fond de page, pas le fond
                            de page lui-même (voir la note en tête de
                            fichier) */

  --encre: #1F3327;     /* texte courant, dérivé du vert foncé : assombri
                            encore pour porter le corps de texte avec une
                            marge de contraste confortable (11,34:1 sur
                            --fondpage, 12,86:1 sur --fond, calculs plus
                            bas) */
  --trait: #D9E5DE;      /* filets, bordures de carte — décoratif, pas un
                            indicateur d'état à lui seul */

  /* Ton neutre secondaire (« doux »), dérivé lui aussi du vert foncé mais
     moins sombre — réservé au texte, jamais assez clair pour repasser sous
     4,5:1. Ratio sur --fond : 6,74:1 ; sur --fondpage : 5,95:1 (calculs
     détaillés section 3). */
  --sourdine: #4A5D51;

  /*
   * — Fond de page, dérivé du bleu-gris de la charte —
   * Mélange 30 % --bleugris / 70 % blanc (calcul : R 169×.3+255×.7=229,5 ;
   * G 196×.3+255×.7=237,7 ; B 204×.3+255×.7=240,3 → arrondi #E5EDF0).
   * Toujours dans la charte (dérivé, comme --sourdine l'est de --vert),
   * mais visiblement plus soutenu que --fond : contraste de fond entre les
   * deux, (0,954+0,05)/(0,833+0,05) = 1,13:1 — modeste en valeur absolue,
   * mais c'est exactement l'écart mesuré dans la maquette SECOND entre son
   * propre fond de page et ses cartes (1,20:1) : la séparation visible ne
   * vient jamais de ce seul écart, mais de son cumul avec un filet net et
   * une ombre à deux couches (section 3). Vérifié : aucun texte de cette
   * feuille de style ne pose du --teal en texte SANS carte/bulle en
   * dessous — au seuil de ce fond, --teal ne tient que 4,61:1 (calcul plus
   * bas), suffisant pour du texte mais sans la marge confortable de --vert
   * ou --sourdine ; c'est pourquoi --teal reste toujours porté par une
   * surface --fond (carte, badge, bulle) avant d'être lu en direct sur ce
   * fond de page.
   */
  --fondpage: #E5EDF0;

  /* — Ombres feuilletées : deux couches (une resserrée pour la définition,
     une diffuse pour la profondeur), opacité faible, jamais un aplat noir
     ni un halo agressif — « sobre et chaleureux », pas « startup ». Teinte
     à l'encre de la charte (--vert, 46,74,58) plutôt qu'un gris neutre : la
     même idée que dans SECOND, réhabillée avec l'encre de Wevalue. — */
  --ombre: 0 1px 2px rgba(46, 74, 58, .06), 0 8px 24px rgba(46, 74, 58, .08);
  --ombre-carte: 0 1px 2px rgba(46, 74, 58, .05), 0 6px 16px rgba(46, 74, 58, .07);
  --ombre-carte-survol: 0 2px 4px rgba(46, 74, 58, .06), 0 10px 22px rgba(46, 74, 58, .10);

  /* — Échelle d'espacement, noms exacts imposés par le contrat — rythme
     réellement différencié (4 → 48px) : deux blocs proches (.doux sous un
     titre) restent à --sp-1/2, deux sections distinctes s'écartent d'au
     moins --sp-5, jamais la même valeur partout. — */
  --sp-1: .25rem;   /* 4px  */
  --sp-2: .5rem;    /* 8px  */
  --sp-3: .75rem;   /* 12px */
  --sp-4: 1.25rem;  /* 20px */
  --sp-5: 2rem;     /* 32px */
  --sp-6: 3rem;     /* 48px */

  /* — Tailles de texte pilotées : c'est le seul mécanisme qui bascule en
     mode aîné (section 5). On n'utilise jamais `rem`/`em` pour ces tailles
     (ils dépendent de <html>, pas forcément de l'ancêtre qui porte .aine) :
     une variable custom se propage correctement quelle que soit la
     profondeur où .aine est posée dans l'arbre. */
  --texte-base: 18px;   /* corps de texte — plancher du contrat, pile dessus */
  --texte-petit: 16px;  /* mentions secondaires — plancher absolu ; sert aussi
                            .meta/.badge/.onglet (tolérés à 16 par le contrat) */
  --texte-titre: 20px;  /* titres de section — resserré pour tenir sur 390px */
  --texte-grand: clamp(2rem, 8vw, 2.75rem); /* .chiffre courant, hors .plein/.aine */

  /* — Zone tactile minimale, pilotée elle aussi. — */
  --touche: 44px;

  /* — Rayons et transition : cohérence interne, pas de coin extrême —
     un cran plus généreux que la version précédente (14/12/10) pour
     accompagner l'ombre, jamais au point de faire « bulle ». — */
  --rayon-carte: 16px;
  --rayon-bouton: 14px;
  --rayon-champ: 12px;
  --rayon-puce: 999px;   /* petites puces/chips seulement, jamais un bloc entier */
  --rapide: 140ms ease;  /* durée unique pour tous les états (survol/appui/focus) */

  --cadre: 480px;        /* largeur maximale du cadre-téléphone */
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/*
 * ── Pourquoi --corail n'est jamais une couleur de texte ni un aplat portant
 *    du texte clair ────────────────────────────────────────────────────────
 * Corail #E07A5A a une luminance relative de 0,305 (ni franchement clair ni
 * franchement sombre). Résultat :
 *   - texte blanc sur corail........... 2,96:1  → ÉCHEC (min. 4,5:1, et même
 *                                                   l'échec du seuil 3:1 du
 *                                                   grand texte)
 *   - texte --encre (#1F3327) sur corail 4,55:1  → passe, de justesse
 *   - texte --corail sur --fond........ 2,83:1  → ÉCHEC
 * Donc : le corail sert en bordure, puce décorative ou aplat TRÈS dilué
 * (chip à 10-14 % mélangé à --fond, texte --encre dessus, contraste alors
 * >10:1). Quand un autre fichier (ecole.js, ui.js) pose lui-même du corail
 * en fond avec du texte blanc *en style inline*, ce fichier n'est pas à moi
 * — je neutralise ce cas précis plus bas par sélecteur d'attribut + rôle
 * `!important`, seule option qui n'oblige pas à toucher un fichier qui n'est
 * pas le mien.
 */

/* ────────────────────────────────────────────────────────────────────────
   2. BASE
   ──────────────────────────────────────────────────────────────────────── */

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

html, body {
  margin: 0;
  height: 100%;
  /* Le fond de page — pas la carte. Visible sur mobile derrière/entre les
     cartes, et dans les marges du cadre sur grand écran. */
  background: var(--fondpage);
  color: var(--encre);
}

body {
  font-family: var(--sans);
  font-size: var(--texte-base);
  line-height: 1.45; /* resserré (était 1,55) : un téléphone n'a pas la hauteur
                         à donner, .aine redéfinit la sienne (1.6) séparément */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--teal); }
p { margin: 0 0 var(--sp-3); }
h1, h2, h3 { font-family: var(--sans); font-weight: 700; line-height: 1.3; margin: 0 0 var(--sp-2); color: var(--vert); }
h1 { font-size: 22px; } /* en-tête d'écran — chiffre fixe demandé, pas relatif à var(--texte-base) */
h2 { font-size: 1.25em; }
h3 { font-size: 1.1em; }

/* Focus clavier : toujours visible, jamais supprimé sans remplacement.
   2px + décalage 2px, net et rapide à repérer sans être envahissant.
   Ratio --teal sur --fondpage = 4,61:1 (calcul ci-dessous) : passe pour un
   anneau (exigence 3:1) avec une marge confortable. Les zones à fond
   différent (bleu-gris, teal, vert, or) reçoivent leur propre couleur de
   focus plus bas — un anneau teal sur un fond déjà teal serait quasi
   invisible. */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 6px;
}

/*
 * Ratio --teal (#0F766E, luminance 0,142) sur --fondpage (#E5EDF0,
 * luminance 0,833) : (0,833+0,05)/(0,142+0,05) = 4,61:1 → passe (exigence
 * 3:1 pour un composant d'interface, largement au-delà).
 */

/* ────────────────────────────────────────────────────────────────────────
   3. COMPOSANTS
   ──────────────────────────────────────────────────────────────────────── */

/* — Utilitaires de texte — */

.doux { color: var(--sourdine); }
/*
 * Ratio --sourdine (#4A5D51, luminance 0,099) sur --fond (0,954) :
 * (0,954+0,05)/(0,099+0,05) = 6,74:1. Sur --fondpage (0,833) :
 * (0,833+0,05)/(0,099+0,05) = 5,93:1. Les deux passent largement, y
 * compris combiné avec .petit (16px).
 */

.petit { font-size: var(--texte-petit); }
.centre { text-align: center; }

/* — Cartes —
   Le parti pris net demandé : une surface --fond plus claire que le fond
   de page --fondpage, un filet nécessaire pour la définition, et une
   ombre à deux couches jamais un aplat noir — les trois cumulés, jamais
   un seul isolé, exactement comme dans SECOND. Le même triplet vaut pour
   TOUTE variante de carte de ce fichier : rien n'y déroge. */
.carte {
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.carte--accent {
  border-color: transparent;
  border-left: 4px solid var(--teal);
  background: color-mix(in srgb, var(--teal) 6%, var(--fond));
}

.carte--pointille {
  background: transparent;
  border: 2px dashed var(--trait);
  box-shadow: none; /* état « à venir »/optionnel : volontairement à plat, jamais élevé */
}

/* Une carte qui contient elle-même un `<article>`/`<li>` cliquable garde un
   retour tactile discret, jamais de transformation brusque (public âgé),
   et gagne en élévation au survol comme tout élément interactif de cette
   feuille de style. */
a.carte:active, button.carte:active { transform: scale(.99); }
a.carte, button.carte { transition: box-shadow var(--rapide), border-color var(--rapide), transform var(--rapide); }
@media (hover: hover) and (pointer: fine) {
  a.carte:hover, button.carte:hover { border-color: var(--teal); box-shadow: var(--ombre-carte-survol); }
}

/* — Boutons — */
/* Zone tactile : min-height ET min-width à --touche (44px normal, 76px en
   mode aîné, voir section 5). Fond --teal, texte blanc : 5,47:1 (calcul
   ci-dessous) — largement au-dessus du seuil. */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--touche);
  min-width: var(--touche);
  padding: var(--sp-2) var(--sp-4);
  border: none;
  border-radius: var(--rayon-bouton);
  background: var(--teal);
  color: #fff;
  font-size: var(--texte-base);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--rapide), transform var(--rapide), box-shadow var(--rapide);
}
@media (hover: hover) and (pointer: fine) {
  .bouton:not(:disabled):hover { background: color-mix(in srgb, var(--teal) 85%, black); box-shadow: var(--ombre-carte); }
}
.bouton:active { transform: scale(.98); }
.bouton:disabled {
  background: var(--trait);
  color: var(--sourdine);
  cursor: default;
}
/*
 * Ratio blanc sur --teal (luminance 0,142) : (1+0,05)/(0,142+0,05) = 5,47:1.
 */

.bouton--large {
  display: flex;
  width: 100%;
  min-height: calc(var(--touche) + 10px);
  font-size: calc(var(--texte-base) + 2px);
  font-weight: 700;
  border-radius: calc(var(--rayon-bouton) + 2px);
}

/* Secondaire, doux : fond bleu-gris très dilué + texte --encre foncé.
   C'est exactement l'usage autorisé de --bleugris : jamais en texte, en
   aplat de fond avec du texte foncé dessus (contraste 11:1, très
   confortable, calcul par mélange sRGB). */
.bouton--doux {
  background: color-mix(in srgb, var(--bleugris) 35%, var(--fond));
  color: var(--encre);
  border: 2px solid var(--bleugris);
}
@media (hover: hover) and (pointer: fine) {
  .bouton--doux:not(:disabled):hover { background: color-mix(in srgb, var(--bleugris) 55%, var(--fond)); }
}

/* Discret, en lien : jamais de fond, texte --teal (5,23:1 sur --fond, la
   surface qui le porte toujours — voir la note --fondpage en section 1).
   min-width reste hérité de .bouton (--touche) : certains usages réels
   (bouton « ⋯ » de réglages dans app.js) n'ont qu'un glyphe très étroit
   comme contenu — sans ce plancher hérité, le padding seul ne suffirait
   pas à garantir 44px de large. */
.bouton--lien {
  background: none;
  color: var(--teal);
  text-decoration: underline;
  font-weight: 600;
  padding: var(--sp-2) var(--sp-3);
}
@media (hover: hover) and (pointer: fine) {
  .bouton--lien:hover { color: var(--vert); }
}

/*
 * Danger : jamais de corail plein avec texte clair (voir le pavé de
 * calculs en section 1 — 2,96:1, échec). On pose donc un aplat corail
 * très dilué (bordure corail pleine, elle, purement décorative — jamais
 * seule porteuse de sens) avec un texte --encre foncé, ce qui redonne un
 * contraste large (>10:1, la teinte obtenue est proche du blanc).
 */
.bouton--danger {
  background: color-mix(in srgb, var(--corail) 12%, var(--fond));
  color: var(--encre);
  border: 2px solid var(--corail);
  font-weight: 700;
}
@media (hover: hover) and (pointer: fine) {
  .bouton--danger:hover { background: color-mix(in srgb, var(--corail) 20%, var(--fond)); }
}

/* — Pastille : le médaillon d'avatar (initiale ou photo), tel qu'utilisé
   par `portrait()` dans ui.js — un <span> avec initiale en fond de couleur,
   ou une <img> en cover. Taille/fond/texte sont posés en style inline par
   ui.js (une par habitant) ; cette règle ne fixe que la forme et un repli
   raisonnable si jamais rien n'est fourni en ligne. — */
.pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--touche);
  height: var(--touche);
  border-radius: 50%;
  overflow: hidden;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  background: var(--teal);
  object-fit: cover;
  box-shadow: 0 0 0 3px var(--fond), var(--ombre-carte);
}
/*
 * ui.js pioche le fond de la pastille dans un tableau de 5 teintes fixes,
 * toujours avec `color:#fff` posé en ligne. Deux de ces cinq teintes sont
 * trop claires pour porter du blanc :
 *   - vert (#2E4A3A)   : blanc → 9,74:1  ok
 *   - teal (#0F766E)   : blanc → 5,47:1  ok
 *   - corail (#E07A5A) : blanc → 2,96:1  ÉCHEC
 *   - bleu-gris (#A9C4CC): blanc → 1,83:1 ÉCHEC
 *   - brun (#7C6A54)   : blanc → 5,19:1  ok
 * ui.js n'est pas mon fichier ; je ne peux pas changer ces couleurs ni cet
 * inline `color:#fff`. La seule correction possible depuis cette feuille de
 * style est de cibler la valeur exacte du style inline et de forcer un
 * texte foncé à la place, uniquement pour les deux teintes fautives —
 * en gardant leur fond corail/bleu-gris intact. Noir plutôt que --encre :
 * une seule initiale, potentiellement petite selon la taille demandée par
 * ui.js, mérite la marge la plus large possible plutôt qu'un passage tout
 * juste au-dessus du seuil. */
.pastille[style*="background:#E07A5A"] { color: #000 !important; } /* 7,10:1 sur corail */
.pastille[style*="background:#A9C4CC"] { color: #000 !important; } /* 11,45:1 sur bleu-gris */

/* — Badge : petite étiquette informative neutre (compétence, place
   restante, statut). Fond --teal très dilué + texte --teal : 4,58:1
   (calcul plus bas). À 16px comme .meta et les onglets : le contrat tolère
   ce plancher pour les mentions secondaires, celle-ci en fait partie. — */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--texte-petit);
  font-weight: 700;
  padding: 4px 14px;
  border-radius: var(--rayon-puce);
  background: color-mix(in srgb, var(--teal) 10%, var(--fond));
  color: var(--teal);
  white-space: nowrap;
}
/*
 * Fond mélangé (10 % teal / 90 % fond) : luminance ≈ 0,828 (calcul par
 * mélange sRGB linéaire). Ratio avec --teal (0,142) :
 * (0,828+0,05)/(0,142+0,05) = 4,58:1 → passe. Le badge est toujours porté
 * par une surface --fond (carte, bulle), jamais posé nu sur --fondpage.
 *
 * ecole.js pose lui-même, en style inline, un badge « Complet » en fond
 * corail plein avec texte blanc (`style="background:var(--corail);
 * color:#fff"`). ecole.js n'est pas mon fichier. Même correction que pour
 * .pastille : on cible la valeur inline exacte pour forcer un texte foncé
 * (noir, 7,10:1 sur ce corail plein — cf. le calcul en section 1) à la
 * place du blanc inline.
 */
.badge[style*="background:var(--corail)"] { color: #000 !important; }

/* — Accroche, phrase mise en avant. Teal : 5,23:1 sur --fond (toujours
   portée par une carte ou par .plein/.entree, qui la recolorent
   explicitement plus bas — jamais nue sur --fondpage). — */
.accroche {
  font-style: italic;
  font-weight: 600;
  font-size: 19px; /* un cran sous .titre-section (20px) : reste secondaire */
  line-height: 1.4;
  color: var(--teal);
  margin: var(--sp-2) 0 var(--sp-3);
}

/* — Pourquoi : encart d'explication, ton posé. Fond bleu-gris dilué +
   texte --encre foncé (même logique que .bouton--doux, contraste large). — */
.pourquoi {
  background: color-mix(in srgb, var(--bleugris) 22%, var(--fond));
  color: var(--encre);
  border-radius: var(--rayon-champ);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--texte-base);
  line-height: 1.6;
  margin: var(--sp-2) 0;
}
.pourquoi strong, .pourquoi b { color: var(--vert); }

/* — Etiquettes : simple conteneur souple pour une rangée de .badge. — */
.etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-2) 0;
}

/* — Chiffres — */

.chiffre {
  display: block;
  font-weight: 800;
  font-size: var(--texte-grand);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--vert);
  margin: var(--sp-2) 0;
}

/*
 * chiffre--or : LE chronost, l'élément roi de l'écran « Mon compte » comme
 * du compteur public — c'est la même classe partout, elle porte donc à
 * elle seule toute la hiérarchie demandée : le plus grand aplat de couleur
 * de l'application, une médaille plutôt qu'une étiquette. --or ne doit
 * jamais être une couleur de texte sur fond clair (1,81:1 sur --fond,
 * échec net). On applique donc la règle explicitement autorisée : --or en
 * APLAT DE FOND, texte foncé dessus. Texte --vert sur --or :
 * (0,505+0,05)/(0,058+0,05) = 5,14:1 → passe largement.
 */
.chiffre--or {
  display: inline-block;
  max-width: 100%;
  background: var(--or);
  color: var(--vert);
  padding: var(--sp-2) clamp(.75rem, 4vw, 2rem);
  border-radius: calc(var(--rayon-carte) + 8px);
  font-size: clamp(3rem, 13vw, 4.25rem); /* monumental mais borné : domine
                                             l'écran sans le déborder */
  box-shadow: var(--ombre-carte);
}

/* Sur le compteur public (.plein), trois chiffres--or se suivent : les deux
   premiers (heures échangées, comptes actifs) sont à égalité dans une
   .grille-2 ; le troisième, la part d'échanges entre deux générations, est
   VOLONTAIREMENT le plus grand — c'est l'indicateur qu'on est venu chercher
   sur la place du village. Il se reconnaît sans toucher à compteur.js : il
   contient une .barre-progres, seul des trois. Sélecteur structurel
   (:has), pas une classe supplémentaire à faire ajouter ailleurs.
   Les deux chiffres à égalité, eux, sont VOLONTAIREMENT plus petits que la
   taille monumentale par défaut : une colonne de .grille-2 sur un téléphone
   de 390px ne laisse qu'environ 160px, et un nombre à 3 chiffres (« 128 »)
   dans le padding fixe d'origine y débordait réellement. */
.plein .grille-2 .chiffre--or {
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  padding: var(--sp-1) var(--sp-2);
}
.plein .carte--accent:has(.barre-progres) .chiffre--or {
  font-size: clamp(2.75rem, 11vw, 3.75rem);
  padding: var(--sp-2) clamp(.75rem, 4vw, 1.75rem);
}

/* — Titre de section — */
.titre-section {
  font-size: var(--texte-titre);
  font-weight: 700;
  color: var(--vert);
  margin: var(--sp-5) 0 var(--sp-2);
}
.titre-section:first-child { margin-top: 0; }

/* — Méta, information secondaire. À 16px, comme .badge et les onglets :
   le contrat tolère ce plancher pour les mentions secondaires. — */
.meta {
  font-size: var(--texte-petit);
  color: var(--sourdine);
  margin: 0 0 var(--sp-1);
}

/* — En-tête de page (posé par app.js autour d'un <h1>). Cet h1 flotte
   directement sur --fondpage (aucune carte au-dessus de lui) : --vert y
   tient 8,21:1 (calcul ci-dessous), largement au-delà du seuil. — */
.entete { margin-bottom: var(--sp-4); }
.entete h1 { margin: 0; }
/*
 * Ratio --vert (0,058) sur --fondpage (0,833) :
 * (0,833+0,05)/(0,058+0,05) = 8,21:1.
 */

/* — Barre de progression — le remplissage est un enfant unique, sans classe
   imposée : on le cible par sa position, pas par un nom. — */
.barre-progres {
  width: 100%;
  height: 14px;
  background: color-mix(in srgb, var(--bleugris) 35%, var(--fond));
  border-radius: var(--rayon-puce);
  overflow: hidden;
  margin: var(--sp-2) 0;
}
.barre-progres > * {
  display: block;
  height: 100%;
  background: var(--teal);
  border-radius: inherit;
  transition: width var(--rapide);
}

/* — Liste : réinitialisation + espacement par intervalle (pas de filet de
   séparation) pour composer aussi bien avec un <li> nu qu'avec un <li>
   portant lui-même .carte/.carte--pointille (cas réel dans catalogue.js). — */
.liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.liste li {
  font-size: var(--texte-base);
  line-height: 1.5;
}

/* — Champs de formulaire — */
/* Bordure --vert (9,74:1 sur blanc, bien au-delà des 3:1 requis pour un
   composant d'interface) : un cadre net, utile pour un public âgé. Le fond
   reste blanc pur — un cran plus clair que la carte --fond qui les
   entoure, pour qu'un champ de saisie se distingue lui aussi de son
   conteneur. */
.champ {
  display: block;
  width: 100%;
  min-height: var(--touche);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--texte-base);
  font-family: inherit;
  color: var(--encre);
  background: #fff;
  border: 2px solid var(--vert);
  border-radius: var(--rayon-champ);
}
.champ::placeholder { color: var(--sourdine); opacity: 1; }
select.champ { cursor: pointer; }

.zone-texte {
  display: block;
  width: 100%;
  min-height: calc(var(--touche) * 2);
  padding: var(--sp-3);
  font-size: var(--texte-base);
  font-family: inherit;
  line-height: 1.5;
  color: var(--encre);
  background: #fff;
  border: 2px solid var(--vert);
  border-radius: var(--rayon-champ);
  resize: vertical;
}
.zone-texte::placeholder { color: var(--sourdine); opacity: 1; }

/* — Rangée : ligne flexible générique (avatar + texte, boutons côte à
   côte, deux champs alignés — usages réels observés dans les écrans). — */
.rangee {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* — Grille à deux colonnes — */
.grille-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
@media (max-width: 360px) {
  .grille-2 { grid-template-columns: 1fr; }
}

/* — Pied de page (posé automatiquement par app.js autour de la signature,
   en plus de .petit.doux déjà présents sur l'élément). Flotte lui aussi
   directement sur --fondpage : --sourdine y tient 5,93:1 (calcul section
   3), au-delà du seuil même combiné à .petit (16px). — */
.pied {
  text-align: center;
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--trait);
}

/* ────────────────────────────────────────────────────────────────────────
   4. COQUILLE DE L'APPLICATION
   ──────────────────────────────────────────────────────────────────────── */

/* Le cadre : plein écran sur téléphone, feuille posée sur le fond de page
   teinté quand la fenêtre est plus large (ordinateur). C'est le cadre qui
   porte --fond (la surface « écran »), le corps de page --fondpage restant
   visible dans ses marges — jamais l'inverse. */
.telephone {
  max-width: var(--cadre);
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--fond);
  position: relative;
}
@media (min-width: 540px) {
  body { padding: var(--sp-4) 0; }
  .telephone {
    min-height: min(880px, calc(100dvh - 2 * var(--sp-4)));
    border-radius: 24px;
    box-shadow: var(--ombre);
    overflow: hidden;
  }
}

#app {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  padding: var(--sp-4) var(--sp-4) var(--sp-6);
  -webkit-overflow-scrolling: touch;
}
/* En plein écran (compteur public, écran d'entrée), le contenu (.plein /
   .entree) gère lui-même son propre fond et son propre padding : celui
   d'#app doit s'effacer pour un vrai bord-à-bord. `overflow-y` reste
   navigable (pas `hidden`) : l'écran d'entrée porte quatre grandes cartes
   et doit rester consultable en entier sur un petit téléphone, sans que le
   contenu ne soit tout simplement rogné en bas de viewport. */
body.en-plein #app { padding: 0; overflow-y: auto; overflow-x: hidden; }

/* — En-tête de démonstration : sélecteur de persona + démo guidée. Fond
   --bleugris (clair), texte --vert foncé dessus : 5,31:1 (calcul
   ci-dessous) — c'est exactement l'usage autorisé de --bleugris. C'est un
   bandeau d'outillage de soutenance, pas un élément de l'expérience
   citoyenne : on le distingue à dessein du reste par ce fond propre, un
   filet net en pied et une typographie plus resserrée. — */
#entete-persona {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3);
  padding-top: calc(var(--sp-3) + env(safe-area-inset-top));
  background: var(--bleugris);
  color: var(--vert);
  border-bottom: 1px solid color-mix(in srgb, var(--vert) 20%, var(--bleugris));
}
/*
 * Ratio --vert (0,058) sur --bleugris (0,523) :
 * (0,523+0,05)/(0,058+0,05) = 5,31:1 → passe.
 * L'anneau de focus par défaut (--teal) n'atteint que 2,99:1 sur ce fond
 * bleu-gris : trop juste. On le remplace ici par --vert, déjà vérifié
 * ci-dessus à 5,31:1.
 */
#entete-persona :focus-visible { outline-color: var(--vert); }
#entete-persona label { flex: 1 1 auto; min-width: 90px; font-weight: 600; }
/* Le <select> du choix de persona n'a volontairement aucune classe (il
   change tout l'écran, pas seulement une valeur) : on le style ici par
   contexte, avec les mêmes garanties de lisibilité qu'un .champ. */
#entete-persona select {
  min-height: var(--touche);
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--texte-base);
  font-weight: 600;
  color: var(--vert);
  background: #fff;
  border: 2px solid var(--vert);
  border-radius: var(--rayon-champ);
}
#entete-persona .bouton { padding: var(--sp-1) var(--sp-3); min-height: var(--touche); }

/* — Barre d'onglets, fixée en bas, sûre pour l'encoche iPhone. Une ombre
   tournée vers le haut (le contenu est au-dessus) plutôt qu'un simple
   filet, pour la même raison que les cartes : intentionnelle, pas posée
   là. — */
#barre {
  display: flex;
  background: var(--fond);
  border-top: 1px solid var(--trait);
  box-shadow: 0 -2px 10px rgba(46, 74, 58, .05);
  padding: var(--sp-1) var(--sp-1) calc(var(--sp-1) + env(safe-area-inset-bottom));
}
#barre[hidden] { display: none; }
.onglet {
  flex: 1;
  min-width: 0; /* laisse le libellé rétrécir/tronquer plutôt que de forcer
                   la barre entière à déborder (flex n'accepte de réduire un
                   enfant sous sa largeur de contenu que si min-width:0) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--touche);
  padding: var(--sp-1) 2px;
  background: none;
  border: none;
  color: var(--sourdine);
  font-size: var(--texte-petit); /* 16px : la barre doit se faire oublier,
                                     pas rivaliser avec le corps de texte */
  font-weight: 700;
  cursor: pointer;
  border-radius: var(--rayon-champ);
}
.onglet span:first-child {
  font-size: 1.15em;
  line-height: 1;
  padding: 2px 10px;
  border-radius: var(--rayon-puce);
  transition: background-color var(--rapide);
}
/* Le libellé ne repasse jamais à la ligne : cinq entrées courtes tiennent
   sur 390px, quitte à tronquer plutôt qu'à casser la mise en page — jamais
   observé avec les libellés réels de la barre, ceinture et bretelles. */
.onglet span:last-child {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.onglet--actif { color: var(--teal); }
/* L'onglet actif se voit d'un coup d'œil : un médaillon teal très dilué
   derrière son pictogramme, pas seulement un changement de couleur de
   texte — le geste déjà utilisé par .badge, réappliqué ici. Le bouton
   garde sa zone tactile de 44px pleine largeur : ce médaillon est purement
   décoratif, posé sur le pictogramme, jamais la seule zone cliquable. */
.onglet--actif span:first-child {
  background: color-mix(in srgb, var(--teal) 14%, var(--fond));
}
@media (hover: hover) and (pointer: fine) {
  .onglet:hover { color: var(--teal); }
}

/* — Bandeau de la démo guidée : sticky au-dessus du contenu grâce à sa
   position dans le flux flex du .telephone (avant #app), pas besoin d'une
   surcouche fixe. Fond --teal, texte blanc : 5,47:1. — */
.demo-etape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--teal);
  color: #fff;
  border-radius: 0 0 var(--rayon-carte) var(--rayon-carte);
  box-shadow: var(--ombre-carte);
}
.demo-etape p { margin: 0; }
.demo-etape .petit { opacity: .92; }
/* Anneau de focus par défaut (--teal) invisible sur un fond déjà teal :
   remplacé par du blanc, 5,47:1 vérifié plus haut. */
.demo-etape :focus-visible { outline-color: #fff; }
.demo-etape .bouton:not(.bouton--doux):not(.bouton--lien) { background: #fff; color: var(--teal); }
@media (hover: hover) and (pointer: fine) {
  .demo-etape .bouton:not(.bouton--doux):not(.bouton--lien):hover { background: var(--fond); }
}
.demo-etape .bouton--lien { color: #fff; text-decoration-color: rgba(255,255,255,.6); }

/* — Réglages : la seule vraie boîte de dialogue de la coquille (rôle
   dialog/aria-modal côté app.js). Sans ceci, l'élément #reglages resterait
   un bloc en flux normal au lieu d'une fenêtre — on le pose donc en
   surcouche, pattern « feuille du bas », classique et sûr au clavier
   comme au toucher. */
#reglages {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--sp-4);
  padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--encre) 55%, transparent);
}
#reglages[hidden] { display: none; }
#reglages .carte {
  width: 100%;
  max-width: 420px;
  margin-bottom: 0;
  box-shadow: var(--ombre);
}
#reglages .bouton--large + .bouton--large,
#reglages .bouton + .bouton { margin-top: var(--sp-2); }

/* — Micro de dictée vocale : rond, large, difficile à manquer. Fond --teal,
   icône/texte blanc dessus : 5,47:1. — */
.micro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--touche) * 1.7);
  height: calc(var(--touche) * 1.7);
  border-radius: 50%;
  border: none;
  background: var(--teal);
  color: #fff;
  font-size: 1.8em;
  cursor: pointer;
  box-shadow: var(--ombre-carte);
  transition: background-color var(--rapide), transform var(--rapide), box-shadow var(--rapide);
}
@media (hover: hover) and (pointer: fine) {
  .micro:hover { background: color-mix(in srgb, var(--teal) 85%, black); box-shadow: var(--ombre-carte-survol); }
}
.micro:active { transform: scale(.96); }
/* État « en écoute » : un halo corail discret, purement décoratif — la
   couleur porte l'accent mais l'état est aussi annoncé par du texte/aria
   côté écran, jamais par la seule couleur. C'est un des très rares aplats
   corail de toute l'application : l'accent chaud, réservé à un instant
   précis. */
.micro[aria-pressed="true"] {
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--corail) 35%, transparent);
  animation: wv-pulse 1.6s ease-in-out infinite;
}
@keyframes wv-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--corail) 30%, transparent); }
  50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--corail) 12%, transparent); }
}

/* — Pastille discrète de mode hors ligne. — */
.hors-ligne {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  align-self: flex-start;
  margin: var(--sp-2) var(--sp-3) 0;
  padding: 4px 14px;
  font-size: var(--texte-base);
  font-weight: 700;
  color: var(--encre);
  background: color-mix(in srgb, var(--bleugris) 45%, var(--fond));
  border-radius: var(--rayon-puce);
}
.hors-ligne::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vert);
}
.hors-ligne[hidden] { display: none; }

/* — Mention de la fonte : visible, un peu corail, jamais alarmante. Fond
   corail très dilué (même famille que .bouton--danger), texte --encre
   foncé : contraste large (>10:1), le corail reste un signal doux, pas un
   avertissement. — */
.fonte {
  display: inline-block;
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--texte-base);
  color: var(--encre);
  background: color-mix(in srgb, var(--corail) 14%, var(--fond));
  border-radius: var(--rayon-champ);
  border-left: 3px solid var(--corail);
}

/* — Squelette de chargement, pendant que le modèle répond. — */
.squelette { display: block; }
.squelette span {
  display: block;
  height: 1em;
  margin-bottom: var(--sp-2);
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--trait) 25%,
    color-mix(in srgb, var(--bleugris) 45%, var(--trait)) 50%,
    var(--trait) 75%
  );
  background-size: 200% 100%;
  animation: wv-scintille 1.4s ease-in-out infinite;
}
.squelette span:last-of-type { margin-bottom: var(--sp-3); width: 70%; }
@keyframes wv-scintille {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* — Message éphémère (toast). Ajouté par `toast()` dans ui.js directement
   sur <body> (pas dans .telephone), sans classe d'état pilotée par JS :
   l'entrée et la sortie sont donc purement en CSS, calées sur les 3200ms
   pendant lesquels ui.js laisse l'élément dans le DOM avant de le retirer.
   Fond --vert (état/confirmation calme) plutôt que --teal (déjà la couleur
   de toutes les actions) : blanc sur --vert, 9,74:1. — */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  max-width: min(360px, calc(100vw - 40px));
  padding: var(--sp-3) var(--sp-4);
  background: var(--vert);
  color: #fff;
  font-size: var(--texte-base);
  font-weight: 600;
  text-align: center;
  border-radius: var(--rayon-puce);
  box-shadow: var(--ombre);
  z-index: 80;
  animation: wv-toast-entre .2s ease-out both, wv-toast-sort .25s ease-in 2.85s both;
}
@keyframes wv-toast-entre {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes wv-toast-sort {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ────────────────────────────────────────────────────────────────────────
   5. MODE AÎNÉ
   ──────────────────────────────────────────────────────────────────────── */

/*
 * .aine est posée par app.js sur <body> (accueil en persona aîné, ou écran
 * dédié #/aine) : c'est le plus haut point d'ancrage possible sous <html>,
 * donc toute variable redéfinie ici est vue par l'ensemble du contenu. Le
 * contrat exige un plancher de 24px ; cette maquette vise 26px, au-delà du
 * minimum, pour une marge de confort réelle.
 *
 * On redéfinit d'abord les variables pilotées : tout ce qui les référence
 * (corps de texte, boutons, champs, espacements) grandit automatiquement,
 * sans dupliquer une seule règle de composant.
 *
 * Garde-fou supplémentaire, en `!important` : certains écrans déjà écrits
 * (accueil.js, pour l'aîné) posent malgré tout des tailles en style
 * inline (`font-size:24px`, `min-height:64px` notamment) — 64px reste
 * SOUS le plancher de 72px exigé ici. Ces fichiers ne sont pas les
 * miens : la seule façon de garantir le plancher réel, quoi que fasse un
 * écran, est de reprendre la main depuis la feuille de style avec
 * `!important` sur les propriétés mesurables (taille de texte, zone
 * tactile). Le reste (couleurs, mise en page) n'a pas besoin de ce
 * traitement.
 */
.aine {
  --texte-base: 26px;
  --texte-petit: 26px;
  --texte-titre: 32px;
  --texte-grand: clamp(2.75rem, 11vw, 3.75rem);
  --touche: 76px;
  --sp-1: .4rem;
  --sp-2: .9rem;
  --sp-3: 1.3rem;
  --sp-4: 1.8rem;
  --sp-5: 2.6rem;
  --sp-6: 3.8rem;
  line-height: 1.6;
}

/* Filet de sécurité : toute taille de texte posée en ligne par un écran
   déjà écrit ne peut plus jamais faire retomber le mode aîné sous 26px.
   .petit, .meta et .badge sont couverts par cette seule règle générale :
   leur taille normale (18px) et leur taille « petit » (16px) valent
   maintenant --texte-base, donc --texte-petit sous .aine (26px) — inutile
   de les lister séparément. */
.aine, .aine * { font-size: var(--texte-base) !important; }
.aine .titre-section, .aine .accroche { font-size: var(--texte-titre) !important; }
.aine .chiffre { font-size: var(--texte-grand) !important; }
.aine .chiffre--or { font-size: calc(var(--texte-grand) * 1.05) !important; }
.aine .onglet span:first-child { font-size: 1.2em !important; }

/* Filet de sécurité : toute zone tactile posée en ligne (64px vu plus
   haut) est ramenée au plancher aîné réel de 76px, jamais en dessous. */
.aine .bouton,
.aine button,
.aine select,
.aine input,
.aine .champ,
.aine .zone-texte,
.aine .onglet {
  min-height: var(--touche) !important;
}
.aine .bouton, .aine button { min-width: var(--touche) !important; }
.aine .bouton--large { min-height: calc(var(--touche) + 10px) !important; }

/* Contraste renforcé : les mentions secondaires basculent sur --encre
   plutôt que --sourdine (5,93:1 sur --fondpage → 11,01:1), pour un texte
   plus net encore quand la vue est fragile. */
.aine .doux, .aine .meta { color: var(--encre) !important; }

/* En mode aîné, l'ombre des cartes s'accentue légèrement — la vue est
   fragile, la définition doit être sans ambiguïté, jamais un simple filet
   presque invisible. */
.aine .carte { box-shadow: var(--ombre-carte-survol); }

/* ────────────────────────────────────────────────────────────────────────
   6. PLEIN ÉCRAN — compteur public, écran d'entrée
   ──────────────────────────────────────────────────────────────────────── */

/*
 * .plein est posée par l'écran lui-même sur son conteneur racine (pas par
 * le routeur — celui-ci se contente de retirer la barre d'onglets et de
 * remettre à zéro le padding d'#app via body.en-plein, voir section 4).
 * Fond --vert profond : lisible à plusieurs mètres, digne d'une plaque
 * municipale plutôt que d'un tableau de bord de startup.
 */
.plein {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  background: var(--vert);
  color: #fff;
}
/*
 * Ratio blanc sur --vert : 9,74:1 → très large, lisible de loin.
 */
.plein h1, .plein h2, .plein h3 { color: #fff; }
/* .accroche est teal par défaut (voir section 3) : illisible sur ce fond
   sombre (1,78:1, échec net — un bug hérité qu'on corrige ici). Sur
   --vert, elle rejoint le même blanc que les titres. */
.plein .accroche { color: #fff; }
.plein .doux, .plein .meta { color: var(--bleugris); }
/*
 * Ratio --bleugris (0,523) sur --vert (0,058) :
 * (0,523+0,05)/(0,058+0,05) = 5,31:1 → passe, réutilise --bleugris comme
 * teinte secondaire lisible sur fond sombre (c'est l'un des deux usages
 * autorisés de --bleugris : aplat clair XOR, ici, texte suffisamment
 * sombre relativement à un fond très sombre reste dans les clous car
 * l'écart de luminance est large dans les deux sens).
 */
/* :not(.chiffre--or) est nécessaire : compteur.js pose toujours les deux
   classes ensemble (`class="chiffre chiffre--or"`). Sans cette exclusion,
   cette règle (2 sélecteurs de classe) l'emportait par spécificité sur
   celle de .chiffre--or (1 seul) et lui imposait `color:var(--or)` — un
   texte doré PAR-DESSUS le fond doré de la médaille, quasi invisible
   (contraste ≈1:1). C'était un bug déjà présent avant cette refonte,
   corrigé ici : .chiffre--or garde son propre texte --vert sur fond --or
   (5,14:1, calcul en section 3), cette règle ne vise plus qu'un .chiffre
   nu hypothétique, texte doré directement sur le fond --vert du compteur. */
.plein .chiffre:not(.chiffre--or) {
  color: var(--or);
  font-size: clamp(4rem, 18vw, 7rem);
}
/*
 * Ratio --or (0,505) sur --vert (0,058) : (0,505+0,05)/(0,058+0,05) =
 * 5,14:1 → passe, y compris pour du texte de taille normale, très
 * confortable pour un très grand chiffre.
 */
.plein :focus-visible { outline-color: #fff; }
/* Les cartes du compteur public flottent sur un aplat --vert déjà sombre :
   leur ombre --ombre-carte (encre très soutenue) ne s'y verrait pas —
   elle est ici remplacée par un liséré clair très doux, plus lisible sur
   fond sombre qu'une ombre portée. */
.plein .carte, .plein .carte--accent { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }

/*
 * — Écran d'entrée (#/entree, CONTRAT.md §8) — LA première chose que voit
 * le jury : c'est ici que se joue tout le pari visuel de cette refonte.
 * entree.js pose un repli en ligne (`background:var(--fond)` notamment,
 * au cas où cette feuille de style ne fournirait pas encore `.entree`) —
 * un style en ligne gagne par défaut sur une classe, d'où le recours à
 * `!important` pour l'habiller réellement, exactement comme ailleurs dans
 * ce fichier face à un fichier qu'on ne peut pas modifier.
 *
 * Le dégradé radial choisi reste dans des tons quasi neutres (blanc →
 * --fond → --fondpage) : de la profondeur, jamais un dégradé saturé
 * « startup ». C'est le seul geste large de toute la feuille de style —
 * le reste de l'application reste sobre à dessein.
 */
.entree {
  background: radial-gradient(130% 85% at 50% -10%, #fff 0%, var(--fond) 50%, var(--fondpage) 100%) !important;
}

/* — Choix de profil : quatre grandes cartes tactiles (Jeune / Actif / Aîné
   + une entrée « commerçant » discrète, hors `.choix-profil`, en
   `.bouton--lien`). REPLI_CARTE pose déjà, en ligne, la forme d'une carte
   (fond blanc, filet, rayon, min-height) : on la reprend, on l'élève (une
   ombre feuilletée, jamais un simple carré blanc) et on lui donne une
   identité par carte via une teinte d'accent différente sur chacune, dans
   l'ORDRE fixe posé par le contrat (Jeune, Actif, Aîné) : `:nth-of-type`
   plutôt qu'une classe qu'on ne peut pas ajouter. Aucune de ces couleurs
   n'est nouvelle : chacune est déjà l'une des six teintes de la charte. */
.choix-profil {
  --teinte: var(--teal);
  background: var(--fond) !important;
  border: 1px solid var(--trait) !important;
  border-left: 5px solid var(--teinte) !important;
  min-height: 128px !important;
  box-shadow: var(--ombre-carte);
  transition: box-shadow var(--rapide), transform var(--rapide), border-color var(--rapide);
}
.choix-profil:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) {
  .choix-profil:hover { box-shadow: var(--ombre-carte-survol); }
}
.choix-profil:nth-of-type(1) { --teinte: var(--teal); }   /* Jeune */
.choix-profil:nth-of-type(2) { --teinte: var(--vert); }   /* Actif */
.choix-profil:nth-of-type(3) { --teinte: var(--or); }     /* Aîné — la chaleur du chronost */

/* Le pictogramme (premier <span>, emoji, taille déjà posée en ligne) gagne
   un médaillon de la teinte de sa carte — sans toucher à ce que le style
   inline fixe déjà (taille, interlignage). */
.choix-profil span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--sp-2);
  border-radius: 50%;
  background: color-mix(in srgb, var(--teinte) 16%, var(--fond));
}
/* Le titre (« Jeune », « Actif », « Aîné ») : un resserrement discret,
   jamais un changement de police — la hiérarchie se joue sur la graisse et
   la taille, déjà posées en ligne, pas sur un mélange de polices. */
.choix-profil span:nth-child(2) { letter-spacing: -.01em; }
.choix-profil span:nth-child(4) { line-height: 1.5; }

/* ────────────────────────────────────────────────────────────────────────
   7. L'ASSISTANT CONVERSATIONNEL
   ──────────────────────────────────────────────────────────────────────── */

/*
 * assistant.js (CONTRAT.md §8) : un fil de question/réponse, PREMIER
 * onglet, écran normal (pas plein écran) — il vit dans #app comme les
 * autres, avec sa carte d'accueil et sa carte de saisie. Les bulles
 * elles-mêmes (`.bulle--question` / `.bulle--reponse`) flottent entre les
 * deux, sur --fondpage : sobre, lisible, JAMAIS le vocabulaire visuel
 * d'une messagerie de réseau social (pas de dégradés vifs, pas de pastille
 * de non-lus, pas d'avatar, pas de bulle à queue). La seule concession au
 * dialogue : un coin légèrement moins arrondi du côté de qui parle — un
 * repère de sens discret, pas un habillage.
 */
.assistant { display: flex; flex-direction: column; gap: var(--sp-3); }

/* — Page d'accueil de l'assistant (`.assistant.assistant--vide`, avant la
   première question) : logo en haut, la question au milieu, les exemples
   en bas, du vide entre les trois — demande explicite du commanditaire.
   assistant.js pose déjà toute la mise en page en ligne (colonne pleine
   hauteur, centrée, deux espaceurs flexibles) : cette classe n'a donc rien
   à contredire, seulement à compléter. Le champ de saisie central est
   l'objet principal de l'écran : plus grand (déjà 20px en ligne), une
   ombre et un rayon plus généreux que le champ compact de la conversation,
   pour qu'il se voie comme LE geste possible sur cette page. */
.assistant--vide .champ {
  border-radius: calc(var(--rayon-champ) + 2px);
  box-shadow: var(--ombre-carte);
  border-color: transparent;
}

/* Base commune aux deux bulles — assistant.js pose déjà, en ligne,
   fond/texte/rayon/largeur max/alignement (repli au cas où ces classes
   n'existeraient pas encore) : on ajoute ici ce qui ne peut pas entrer en
   conflit (élévation, confort de lecture), et on corrige au besoin en
   `!important` un seul détail directionnel. */
.bulle {
  box-shadow: var(--ombre-carte);
  font-size: var(--texte-base);
  line-height: 1.55;
}
.bulle--question { border-bottom-right-radius: 4px !important; font-weight: 600; }
.bulle--reponse { border-bottom-left-radius: 4px !important; }
.bulle--reponse p { margin: 0 0 var(--sp-2); }
.bulle--reponse p:last-child { margin-bottom: 0; }

/* — Piste : renvoi cliquable vers un autre écran, proposé par l'assistant
   (`<button class="bouton piste" data-go="…">`). Toujours posée sur une
   surface --fond (la bulle de réponse) : teal dilué, texte teal, 4,58:1
   (même recette et même calcul que .badge). Distincte de .suggestion par
   sa couleur d'action (teal, comme le reste de la navigation) : c'est un
   VRAI départ vers un écran, pas une relance de la conversation. */
.piste {
  background: color-mix(in srgb, var(--teal) 10%, var(--fond));
  color: var(--teal);
  border: 2px solid var(--teal);
  border-radius: var(--rayon-puce);
  font-weight: 700;
}
@media (hover: hover) and (pointer: fine) {
  .piste:hover { background: color-mix(in srgb, var(--teal) 18%, var(--fond)); }
}

/* — Suggestion : relance la conversation, ne quitte pas l'écran — un ton
   plus neutre que .piste, sur le même principe que .bouton--doux
   (bleu-gris dilué, texte --encre, contraste large). Une PUCE discrète et
   compacte (padding réduit, 16px, largeur au contenu) — posées en rangée
   sous la page d'accueil de l'assistant, plusieurs boutons pleine largeur
   auraient occupé tout le bas d'écran alors qu'elles ne sont qu'une
   relance parmi d'autres. La zone tactile réelle reste à 44px
   (min-height, hérité de .bouton) : compacte à l'œil, conforme au doigt. */
.suggestion {
  background: color-mix(in srgb, var(--bleugris) 30%, var(--fond));
  color: var(--encre);
  border: 2px solid var(--bleugris);
  border-radius: var(--rayon-puce);
  font-weight: 600;
  font-size: var(--texte-petit);
  padding: var(--sp-2) var(--sp-3);
  flex: 0 1 auto;
}
@media (hover: hover) and (pointer: fine) {
  .suggestion:hover { background: color-mix(in srgb, var(--bleugris) 48%, var(--fond)); }
}

/* ────────────────────────────────────────────────────────────────────────
   8. MOUVEMENT RÉDUIT & IMPRESSION DU RELEVÉ
   ──────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* Le toast n'a pas d'état « visible » piloté par JS : son apparition et
     sa disparition sont l'animation elle-même (voir section 4). Neutraliser
     la durée le ferait disparaître aussitôt (l'état final de l'animation de
     sortie est `opacity:0`) — sous mouvement réduit, il reste donc affiché
     tout du long, sans animation, plutôt que de disparaître. */
  .toast { animation: none !important; opacity: 1 !important; transform: translateX(-50%) !important; }
}

/* Impression du relevé mensuel : sobre, sans fond sombre ni encre inutile,
   sans les éléments de coquille qui n'ont pas de sens sur papier. */
@media print {
  #entete-persona, #barre, #bandeau-demo, .hors-ligne, .micro, #reglages {
    display: none !important;
  }
  html, body, .telephone { background: #fff; }
  .telephone { max-width: none; border: none; box-shadow: none; }
  #app { overflow: visible; padding: 0; }
  .carte, .carte--accent, .carte--pointille {
    box-shadow: none;
    border: 1px solid #000;
    background: #fff;
  }
  .chiffre--or { background: #fff; color: #000; border: 2px solid #000; box-shadow: none; }
  .plein { background: #fff; color: #000; }
  .plein .chiffre { color: #000; }
  a { text-decoration: underline; }
}

/* ------------------------------------------------------------------
   Identité déposée après coup : le logo Wevalue dans le bandeau haut et
   la pièce du chronost à côté du solde. Le logo est large et bas de
   contraste sur fond clair : on le borne en hauteur et on lui laisse
   toute la largeur du bandeau, au-dessus du sélecteur de persona.
   ------------------------------------------------------------------ */
.logo-entete {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto var(--sp-2);
  flex-basis: 100%;
}

.aine .logo-entete { max-width: 300px; }

@media (prefers-reduced-motion: no-preference) {
  .chiffre--or img { transition: transform .3s ease; }
}

/* ------------------------------------------------------------------
   Bandeau haut — allégé après retrait du sélecteur de persona.
   Il ne porte plus que le logo centré, la démo guidée et les réglages :
   un aplat bleu-gris pleine largeur pesait trop pour si peu. On le
   ramène à la surface claire, avec un simple filet de séparation.
   Contraste vérifié : --vert #2E4A3A sur --fond #F8FAFC = 9,31:1
   ------------------------------------------------------------------ */
#entete-persona {
  background: var(--fond);
  border-bottom: 1px solid var(--trait);
  padding-bottom: var(--sp-2);
}
#entete-persona :focus-visible { outline-color: var(--teal); }

.logo-entete { max-width: 180px; margin-bottom: var(--sp-2); }
.aine .logo-entete { max-width: 220px; }

/* ------------------------------------------------------------------
   Mode aîné — la barre d'onglets ne suit pas l'agrandissement général.
   Le mode aîné grossit le CONTENU, c'est son objet. Mais la barre de
   navigation, elle, devenait énorme et laide, et mangeait le quart de
   l'écran pour cinq libellés. On la ramène à une taille raisonnable,
   tout en gardant des cibles confortables (56 px, au-dessus du
   plancher de 44 px exigé).
   ------------------------------------------------------------------ */
.aine #barre .onglet {
  font-size: 16px !important;
  min-height: 56px !important;
  padding: var(--sp-1) 2px !important;
  line-height: 1.2 !important;
}
.aine #barre .onglet span:first-child { font-size: 1.15em !important; }
.aine #barre { padding-top: var(--sp-1); }

/* Même logique pour le bandeau haut : il ne porte que le logo, il n'a
   aucune raison d'occuper trois fois plus de place en mode aîné. */
.aine .logo-entete { max-width: 200px; }
.aine #entete-persona { padding-bottom: var(--sp-2); }

/* ------------------------------------------------------------------
   Correctif de contraste — mode aîné sur fond plein.
   `.aine .doux` force l'encre (vert foncé) pour renforcer le contraste
   sur fond CLAIR. Mais l'écran du boîtier domicile est un `.plein` :
   fond vert foncé. Le résultat était du vert foncé sur vert foncé —
   le prénom de l'habitant en haut d'écran était illisible.
   Contraste rétabli : --bleugris #A9C4CC sur --vert #2E4A3A = 5,31:1
   ------------------------------------------------------------------ */
.aine .plein .doux,
.aine .plein .meta,
.plein .aine .doux { color: var(--bleugris) !important; }