/* Tableau de bord de l'aidant.
   Aucune couleur en dur : tout vient des jetons du design system.

   PARTI PRIS : barre laterale sombre, surface de lecture claire.
   Ce n'est pas un effet de style. La barre laterale est du mobilier :
   on s'y repere, on n'y lit pas. La zone de contenu, elle, porte des
   montants et des dates que quelqu'un doit lire vite et sans doute
   possible, parfois a soixante-dix ans passes. Elle reste donc claire
   et tres contrastee.

   Les trois signaux (rouge, ambre, vert) ne servent QU'aux vrais
   signaux. Jamais de decoration : le jour ou le rouge apparait, il doit
   vouloir dire quelque chose. */

/* ═════════════════════════ Ossature ═════════════════════════ */
/* Largeur de la barre laterale : partagee par la grille ci-dessous et par le
   lecteur d'article, qui se centre dans la zone de contenu (a droite d'elle). */
/* Largeur maximale COMMUNE aux quatre bandeaux d'etat (vue d'ensemble,
   Sentinelle Dark Web, immobilier, carte SIM) : c'est ce qui les garde
   identiques d'une page a l'autre, quelle que soit la taille de l'ecran.
   Chaque bandeau la lit dans sa propre feuille de style (max-width +
   marges auto) : la changer ici les change tous ensemble. */
:root { --rail-largeur: 268px; --largeur-bandeau: 1000px; --hauteur-bandeau: 300px; }

/* HAUTEUR COMMUNE des bandeaux bleus (vue d'ensemble, Comptes, Contacts de
   confiance, Sentinelle Dark Web, Carte SIM, Immobilier) : en changeant de page,
   le bandeau garde la meme largeur (--largeur-bandeau), la meme hauteur et le
   meme titre (--titre-bandeau-taille) -- rien ne « saute ». Sur ordinateur
   seulement : sur telephone, chaque bandeau prend la hauteur de son contenu. */
@media (min-width: 861px) {
  /* « body » : la specificite qui l'emporte sur le min-height propre a chaque
     bandeau (168px sur la vue d'ensemble, par exemple), declare plus bas. */
  body .cc-entete, body .cpt-hero, body .cpt-accueil__haut,
  body .sim-actif, body .immo-actif {
    min-height: var(--hauteur-bandeau);
    box-sizing: border-box;
  }
  /* Sentinelle Dark Web : lui aussi plus bas, il ne porte qu'un message et un pied. */
  /* Hauteur intermediaire (210px) : ni les 300px des grands bandeaux, qui laissaient un vide entre le
     titre et le pied, ni un bandeau aplati. Et le bas ne laisse plus 48px avant la suite. */
  body .fuites-veille { min-height: 210px; justify-content: space-between; padding-top: var(--space-md); padding-bottom: var(--space-md); margin-bottom: 0; }
  body .fuites-veille .fuites-veille__separateur { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
  /* Le bandeau d'accueil de la VUE D'ENSEMBLE est volontairement plus bas que les autres :
     il ne porte qu'un message et une action, une hauteur de 300px le laissait vide. */
  body .veille-hero { min-height: 0; padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
  /* Le bandeau d'Assistance est lui aussi plus bas : texte et deux pastilles, rien de plus. */
  body .assist-bandeau { min-height: 0; }
  body .veille-hero .veille-hero__separateur { margin: var(--space-md) 0 var(--space-sm); }
}
/* La barre de defilement garde sa place meme quand la page est trop courte
   pour en avoir une : sans cela, passer d'un onglet court (Assistance) a un
   onglet long decalait toute la colonne de 15px, et ouvrir un panneau (qui
   bloque le defilement) la faisait sauter aussi. */
html { scrollbar-gutter: stable; }

/* Echelle typographique commune a tous les onglets. BASE : les pages Carte
   SIM et Immobilier -- titre de page 40px/600 (jeton display-lg), titre de
   bandeau 24px/700, texte courant 17px, legende 14px, pastille « EN DIRECT »
   12px/700 en majuscules. Chaque page lit ces deux tailles ici : les changer
   les change partout. Sur mobile le titre de page passe a 30px (deja la
   taille de l'en-tete de Contacts de confiance). */
:root {
  --titre-page-taille: var(--text-display-lg-size);
  --titre-bandeau-taille: 24px;
}
/* Les champs de formulaire et les boutons n'heritent PAS de la police par
   defaut du navigateur (Arial) : sans cela, « Retirer cette ligne » ou
   « Retirer ce bien » s'affichaient dans une autre police que le reste.
   :where() = specificite nulle, toute classe qui fixe sa propre police
   continue de l'emporter. */
:where(button, input, select, textarea) { font-family: inherit; }
.app {
  position: relative;
  display: grid;
  /* 268px : « Contacts de confiance » (161px en gras) doit tenir sur une
     ligne meme quand la barre laterale defile et affiche sa propre barre
     de defilement (~10px) -- a 252px il passait sur deux lignes. */
  grid-template-columns: var(--rail-largeur) 1fr;
  min-height: 100vh;
  /* Legerement plus soutenu que --canvas-parchment : c'est ce qui fait
     « ressortir » le blanc des cartes posees dessus. Deux nappes
     derriere le contenu donnent de la profondeur (l'esprit d'un fond
     Apple). Depuis que les cartes sont en verre teinte (voir .carte plus
     bas), ces nappes se laissent deviner a travers leur flou : relevees
     une deuxieme fois (etaient .22/.18, la page restait trop blanche a
     l'usage) pour que le degrade se voie vraiment sans devenir bruyant --
     la lisibilite du texte, elle, ne depend jamais de ces nappes (voir la
     note de contraste sur .carte). */
  background:
    radial-gradient(66% 52% at 84% 0%, rgba(115,111,182,.42) 0%, transparent 74%),
    radial-gradient(58% 46% at 6% 96%, rgba(94,83,152,.34) 0%, transparent 76%),
    #eeebf8;
}

/* Grain tres fin sur le fond ambiant seulement : place en tout premier
   dans .app, il peint SOUS la barre laterale et les tuiles (opaques),
   qui le recouvrent simplement dans le flux normal, sans z-index. Il ne
   touche jamais une carte -- meme regle que les deux nappes ci-dessus.
   Sans lui, les dedegrades doux sont plats ; avec, la surface a un
   grain de papier a peine perceptible, jamais du "bruit" visible. */
.app::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .05;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ── Repli de la barre laterale (desktop) ──
   Pas de bandeau du haut (demande expresse, retiree) : uniquement la
   colonne de gauche. Repliee, elle garde une colonne etroite avec
   seulement les icones (les onglets restent cliquables) et le bouton
   pour la rouvrir -- demande expresse -- jamais totalement disparue :
   c'est ce qui permet au bouton "reduire" de .rail__entete de rester
   toujours a portee, sans bouton flottant separe. .app change de
   gabarit de grille plutot que .rail de largeur : anime proprement en
   CSS, et .zone recupere le reste (1fr). */
.app { transition: grid-template-columns var(--dur-base) var(--ease-standard); }
/* Uniquement sur ordinateur : sous 860px la barre est un panneau coulissant,
   qui doit toujours s'ouvrir avec ses libelles -- meme si elle a ete
   repliee sur ordinateur (l'etat est garde dans le navigateur). */
@media (min-width: 861px) {
  .app--rail-repliee { grid-template-columns: 76px 1fr; }
  .app--rail-repliee .rail { padding-left: var(--space-xs); padding-right: var(--space-xs); }
  .app--rail-repliee .rail__entete { justify-content: center; padding-left: 0; padding-right: 0; }
  .app--rail-repliee .rail__logo { display: none; }
  /* font-size:0 efface le texte (un simple noeud de texte, pas un <span> a
     cacher) sans toucher aux icones : leurs dimensions sont en pixels fixes
     (largeur/hauteur HTML), jamais en em. */
  .app--rail-repliee .rail__lien {
    justify-content: center;
    gap: 0;
    width: 46px;
    height: 46px;
    margin: 0 auto;
    padding: 0;
    font-size: 0;
  }
  .app--rail-repliee .rail__groupe-titre,
  .app--rail-repliee .rail__bientot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .app { transition: none; }
}

/* En-tete DANS .rail : logo puis bouton "reduire" a sa droite (demande
   expresse). Comme .rail ne disparait jamais tout a fait, ce bouton
   reste toujours a portee -- inutile d'en dupliquer un ailleurs. */
.rail__entete { display: flex; align-items: center; justify-content: space-between; padding: var(--space-xs) var(--space-sm) var(--space-md); }
.rail__logo { display: flex; align-items: center; }
.rail__logo img { display: block; height: 23px; width: auto; }
.rail__reduire {
  appearance: none;
  border: 0;
  background: rgba(255,255,255,.14);
  color: var(--on-dark);
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background var(--dur-fast) var(--ease-standard);
}
.rail__reduire:hover { background: rgba(255,255,255,.24); }
.rail__reduire:active { transform: scale(var(--press-scale)); }

/* ── Bouton « Mon compte » ──
   Position fixe (pas dans .rail ni dans un bandeau) : visible sur
   TOUTES les pages, quel que soit l'etat de la barre laterale. Le seul
   risque est le bandeau de demo, qui n'existe qu'en haut de page :
   chaque page decale le bouton de sa hauteur en JS une fois affiche
   (voir positionnerSousBandeau() dans reglages.js et
   js/mon-compte-global.js). Habillage proche de Carefull : avatar + nom
   + chevron sur un fond clair, plutot qu'un simple bouton texte. */
.bouton-mon-compte {
  position: fixed;
  top: 22px;
  right: 32px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  appearance: none;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  font-size: var(--text-button-utility-size);
  font-weight: 600;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 6px 14px 6px 6px;
  /* Lueur douce (violet, pas noire) sous le bouton -- meme esprit que la
     reference envoyee (halo chaud sous une barre de recherche claire),
     adapte a la teinte de la maison. */
  box-shadow: 0 6px 20px -4px rgba(115,111,182,.45);
  transition: box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.bouton-mon-compte:hover { box-shadow: 0 8px 26px -4px rgba(115,111,182,.55); transform: translateY(-1px); text-decoration: none; color: var(--ink); }
.bouton-mon-compte:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 2px; }
@media (max-width: 620px) {
  .bouton-mon-compte { top: 12px; right: 12px; }
}
.bouton-mon-compte__avatar {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--action-tint-strong);
  color: var(--brand-3);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
}
.bouton-mon-compte__chevron { flex: 0 0 auto; color: var(--ink-muted-48); }
/* Largeur bornee -- demande expresse : le bouton ne doit jamais s'etaler
   au point de gener le contenu principal, meme avec un nom long. */
.bouton-mon-compte__nom {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 620px) {
  .bouton-mon-compte__nom { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bouton-mon-compte { transition: none; } }

/* ── Menu « Mon compte » (js/mon-compte-global.js) ──
   Position fixe, comme le bouton : reste juste en dessous quel que soit
   le defilement. */
.mc-menu__volet {
  position: fixed;
  top: 70px;
  right: 32px;
  z-index: 40;
  min-width: 260px;
  background: var(--canvas);
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  box-shadow: 0 12px 32px -12px rgba(25,20,62,.35), 0 2px 8px rgba(25,20,62,.12);
  padding: var(--space-xs);
}
.mc-menu__volet[hidden] { display: none; }
.mc-menu__titre {
  margin: var(--space-xs) var(--space-sm) 6px;
  font-size: var(--text-micro-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-muted-48);
}
.mc-menu__groupe + .mc-menu__groupe { margin-top: var(--space-xs); padding-top: var(--space-xs); border-top: 1px solid var(--divider-soft); }
.mc-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: var(--text-body-size);
  color: var(--ink);
  text-decoration: none;
}
.mc-menu__item:hover { background: var(--action-tint); text-decoration: none; color: var(--ink); }
.mc-menu__item--actif { background: var(--action-tint-strong); font-weight: 600; }
.mc-menu__item--actif svg.mc-menu__coche { margin-left: auto; flex: 0 0 auto; color: var(--action); }
.mc-menu__item--sortie { color: var(--signal-critique); }
.mc-menu__item--sortie .mc-menu__icone { color: var(--signal-critique); }
.mc-menu__avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--action-tint-strong);
  color: var(--brand-3);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
}
.mc-menu__icone {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--ink-muted-48);
}
@media (max-width: 620px) {
  .mc-menu__volet { top: 58px; right: 12px; }
}

/* ── Barre laterale ── */
.rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-sm) var(--space-sm) var(--space-xl);
  /* Bleu fonce -- demande expresse -- pour que le logo et le texte
     (blancs, voir plus bas) se detachent nettement. Solide, pas
     transparent : sur mobile .rail passe en position:fixed pour devenir
     un panneau coulissant, ou il doit rester opaque quel que soit ce
     qu'il recouvre. */
  background: linear-gradient(180deg, var(--brand-1) 0%, var(--brand-2) 100%);
  border-right: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  transition: padding var(--dur-base) var(--ease-standard),
              opacity var(--dur-base) var(--ease-standard);
}
@media (prefers-reduced-motion: reduce) {
  .rail { transition: none; }
}

.rail__groupe-titre {
  font-size: 12px;          /* était 10 px (--text-micro-size) */
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  padding: 0 var(--space-sm);
  margin: 0 0 var(--space-xs);
}

.rail__lien {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--space-sm);
  border-radius: var(--radius-pill);
  font-size: var(--text-button-utility-size);
  color: #ded9ef;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.rail__lien:hover { background: rgba(255,255,255,.12); color: var(--on-dark); }

/* La page courante : pastille blanche pleine, texte indigo. Sur un fond
   sombre, c'est le contraste maximal : on sait ou on est d'un coup d'oeil. */
.rail__lien[aria-current="page"] {
  background: var(--canvas);
  color: var(--brand-1);
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
}
.rail__lien:focus-visible {
  outline: 2px solid var(--canvas);
  outline-offset: 2px;
}
/* Chaque pictogramme dans son propre jeton : c'est ce qui donne un
   rendu "logo" plutot qu'un simple trait a cote d'un mot. */
.rail__icone-fond {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  transition: background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.rail__lien:hover .rail__icone-fond { background: rgba(255,255,255,.18); }
.rail__lien:hover .rail__icone-fond { transform: scale(1.06); }
.rail__lien[aria-current="page"] .rail__icone-fond {
  background: var(--action-tint);
  color: var(--action);
}
.rail__icone { flex: 0 0 auto; }

/* Une section sans source de donnees le dit. On ne laisse pas croire
   qu'elle surveille quelque chose : principe 8, applique a l'interface.
   Le gris reste au-dessus du seuil de lisibilite : un texte qu'on ne
   peut pas lire n'informe de rien. */
.rail__lien--futur { color: var(--on-dark-muted); }
.rail__bientot {
  margin-left: auto;
  font-size: var(--text-micro-size);
  color: var(--on-dark-muted);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--radius-xs);
  padding: 2px 6px;
  white-space: nowrap;
}

/* ── Menu mobile ──
   Cache par defaut (desktop) : la mediaquery plus bas les fait apparaitre
   et transforme .rail en panneau coulissant. Rien de tout ceci ne doit
   jamais s'afficher au-dessus de 860px. */
.barre-mobile { display: none; }
.rail__fond { display: none; }
.rail__fermer { display: none; }

/* ── Zone de contenu ── */
/* margin: 0 auto -- sans lui, le contenu (largeur plafonnee a 1320px)
   restait plaque contre la barre laterale sur un grand moniteur, avec
   tout le vide relegue a droite : pas centre, pas symetrique, "tout mis
   sur la gauche" comme remonte apres coup. */
.zone {
  /* 72px en haut : le bouton « Mon compte » est flottant (position:fixed,
     22px du haut, ~42px de haut) -- sans cette reserve, il recouvrait le
     coin superieur droit de la premiere carte (« il interfere avec le
     visuel principal »). */
  /* Marges laterales : 192px sur grand ecran (inchange), mais elles
     RETRECISSENT avant de laisser moins de 660px de contenu. Sans cela,
     entre 900 et 1250px la colonne tombait a 350-450px et le contenu
     (les bandeaux surtout) debordait de la zone : chaque page avait alors
     sa propre largeur, selon ce qu'elle contenait. `min-width: 0` : la
     zone ne s'elargit jamais a cause de son contenu (elle est dans une
     grille -- sans lui, elle poussait la page en defilement horizontal) ;
     `width: 100%` aussi, car avec des marges `auto` un element de grille
     se met a la largeur de son contenu au lieu de remplir sa colonne. */
  padding: 72px clamp(24px, calc((100% - 660px) / 2), calc(var(--space-section) * 2 + var(--space-xl))) var(--space-section);
  max-width: 1320px;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
}

.zone__entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

/* Meme forme que .login__seal (auth.css) : un seul repere de confiance,
   au meme endroit visuel (juste sous/pres du titre) sur tout le parcours. */
.zone__sceau {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0 0 3px;
  font-size: var(--text-fine-size);
  line-height: 1.4;
  letter-spacing: var(--text-fine-ls);
  color: var(--ink-muted-48);
  white-space: nowrap;
}
.zone__sceau svg { flex: 0 0 auto; }

.zone__entete-actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-xs); }

/* ── Selecteur de personnes protegees ──
   N'existe (en JS) que si l'aidant en protege vraiment plusieurs -- voir
   rendreComptesSwitch() dans tableau-de-bord.html. Meme langage que le
   selecteur de comptes bancaires plus bas (.solde__pastille) : une piste
   de pastilles, la personne active pleine, les autres en contour. */
.comptes-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-md);
}
.comptes-switch[hidden] { display: none; }
.comptes-switch__pastille {
  font-family: inherit;
  font-size: var(--text-caption-size);
  font-weight: 600;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: rgba(255,255,255,.7);
  color: var(--ink-muted-80);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.comptes-switch__pastille:hover { border-color: var(--brand-4); color: var(--brand-1); }
.comptes-switch__pastille--active {
  background: var(--brand-1);
  border-color: var(--brand-1);
  color: var(--on-dark);
}
.comptes-switch__pastille:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 2px; }

/* Petit fondu pendant qu'on recharge une autre personne (voir
   avecTransition() dans tableau-de-bord.html) : sans lui, la page se
   remplacerait d'un coup sec, ce qui a l'air d'un bug. */
.zone { transition: opacity .16s var(--ease-standard); }
.zone--bascule { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .zone { transition: none; }
  .comptes-switch__pastille { transition: none; }
}

/* Sur les pages a une seule boite de contenu (ScamDetect, Sentinelle
   Dark Web, Assistance) : sans ce modificateur, l'entete courait bord
   a bord sur toute la largeur de la zone, alors que la boite juste en
   dessous restait resserree et centree -- deux largeurs differentes
   sur une meme page. Largeur : la colonne commune a toutes les pages
   (--largeur-bandeau), la meme que celle de .fil/.urgence (assistance.css)
   et des bandeaux d'etat -- plus une colonne de 680px propre a chaque page. */
.zone__entete--boite { max-width: var(--largeur-bandeau); margin-left: auto; margin-right: auto; }

/* Titre et chapeau d'une page : les memes que .sim-hero__titre/__lede et
   .immo-hero__titre/__lede (les pages de reference). */
.zone__titre {
  font-size: var(--titre-page-taille);
  font-weight: var(--text-display-lg-weight);
  line-height: var(--text-display-lg-lh);
  letter-spacing: var(--text-display-lg-ls);
  color: var(--brand-1);
  margin: 0;
  text-wrap: balance;
}
.zone__sous-titre {
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--ink-muted-80);
  margin: var(--space-xs) 0 0;
  max-width: 34em;
  text-wrap: pretty;
}

/* ── Bandeau d'etat (vue d'ensemble) ──
   Le seul endroit du tableau de bord ou le fond change de couleur selon
   un etat reel (vert = rien a signaler, orange = un point reel attend) :
   jamais decoratif, voir rendreVeilleHero() dans tableau-de-bord.html.
   Fond colore comme la barre du haut (meme degrade --action), pas une
   nouvelle nappe claire -- c'est la seule carte de la page a se
   permettre ca, parce qu'elle porte une vraie alerte, pas une lecture.
   Les nappes radiales (vert/orange/rouge) restent les VRAIS signaux,
   jamais decoratives -- seul le degrade DESSOUS a change de teinte. */
.veille-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 168px;
  padding: var(--space-xl) 44px;
  max-width: var(--largeur-bandeau);
  margin: 0 auto var(--space-lg);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(90% 180% at 8% 0%, rgba(18,135,111,.42) 0%, transparent 66%),
    linear-gradient(135deg, var(--action-focus) 0%, var(--action) 100%);
  box-shadow: 0 24px 50px -26px rgba(115,111,182,.45);
  transition: background var(--dur-base) var(--ease-standard);
}
/* Orange franc, plus proche de la reference envoyee que le premier
   essai (trop discret pour se voir vraiment d'un coup d'oeil). */
.veille-hero--alerte {
  background:
    radial-gradient(95% 190% at 8% 0%, rgba(176,112,11,.62) 0%, transparent 70%),
    linear-gradient(135deg, var(--action-focus) 0%, var(--action) 100%);
}
.veille-hero--critique {
  background:
    radial-gradient(95% 190% at 8% 0%, rgba(210,38,79,.62) 0%, transparent 70%),
    linear-gradient(135deg, var(--action-focus) 0%, var(--action) 100%);
}
.veille-hero__haut {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xl);
}
.veille-hero__logo {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  box-shadow: 0 0 0 8px rgba(18,135,111,.24);
  transition: box-shadow var(--dur-base) var(--ease-standard);
}
.veille-hero__logo--alerte { box-shadow: 0 0 0 8px rgba(176,112,11,.32); }
.veille-hero__logo--critique { box-shadow: 0 0 0 8px rgba(210,38,79,.34); }
/* Blanc, jamais le degrade de marque : sur un fond deja tres colore
   (vert/orange/rouge selon l'etat), la version couleur du symbole
   devenait illisible -- a la demande expresse, un seul ton, comme sur
   la barre laterale. */
.veille-hero__logo img { display: block; width: 56px; height: 56px; animation: chargementTourneEtPulse 5s linear infinite; }
.veille-hero__texte {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.veille-hero__salut {
  margin: 0 0 4px;
  font-size: var(--text-body-size);
  font-weight: 600;
  color: rgba(255,255,255,.86);
}
.veille-hero__salut[hidden], .veille-hero__sous[hidden] { display: none; }
.veille-hero__sous {
  margin: 6px 0 0;
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: rgba(255,255,255,.9);
}
.veille-hero__titre {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--titre-bandeau-taille);
  font-weight: 700;
  line-height: var(--text-body-lh);
  color: var(--on-dark);
  text-wrap: balance;
}
.veille-hero__action {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.16);
  color: var(--on-dark);
  font-size: var(--text-caption-size);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard);
}
.veille-hero__action:hover { background: rgba(255,255,255,.26); text-decoration: none; }
.veille-hero__action:focus-visible { outline: 2px solid var(--canvas); outline-offset: 3px; }
.veille-hero__action[hidden] { display: none; }
/* Sous un lisere, plutot qu'a cote du titre : meme disposition que la
   reference envoyee, et ça laisse le titre respirer sur toute la
   largeur au lieu de se disputer la place avec ce bandeau. */
.veille-hero__separateur {
  height: 1px;
  background: rgba(255,255,255,.16);
  margin: var(--space-lg) 0 var(--space-md);
}
/* Trois colonnes egales, comme sur le modele : chaque etat = une pastille + son libelle. */
.veille-hero__pied {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: var(--space-md) var(--space-md);
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
  color: rgba(255,255,255,.78);
}
.veille-hero__item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  margin: 0;
  color: inherit;
  text-decoration: none;
}
/* Etat « au repos » (rien de surveille, ou pas de donnee) : la pastille reste lisible mais s'eteint. */
.veille-hero__direct--repos { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.28); color: rgba(255,255,255,.82); }
a.veille-hero__item:hover { text-decoration: none; }
a.veille-hero__item:hover .veille-hero__direct { background: rgba(255,255,255,.18); }
a.veille-hero__item:hover .veille-hero__soustitre { text-decoration: underline; text-underline-offset: 3px; }
a.veille-hero__item:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 4px; border-radius: var(--radius-pill); }
/* Lisere blanc autour de « En direct » seulement (pas tout le pied) :
   sur le modele envoye en reference, ca la distingue comme un badge
   d'etat plutot qu'un simple mot dans la phrase. */
.veille-hero__direct {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px 3px 9px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: var(--radius-pill);
  font-size: var(--text-fine-size);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--on-dark);
  white-space: nowrap;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
/* Meme blanc plein que le badge « En direct » -- pas le blanc attenue
   (78%) du reste du pied -- sur demande expresse. */
.veille-hero__soustitre { color: var(--on-dark); }
.veille-hero__point {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7ee0c4;
  animation: pastilleVeille 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .veille-hero { transition: none; }
  .veille-hero__logo { transition: none; }
  .veille-hero__logo img { animation: none; }
  .veille-hero__point { animation: none; }
}

/* ── Actions rapides ──
   Meme esprit que les cartes, mais tournees vers une action plutot
   qu'une lecture : illustration decorative posee en fond, jamais sous
   le texte utile (voir la regle de contraste en tete de fichier). */
.promo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}
.promo__carte {
  position: relative;
  overflow: hidden;
  /* Verre teinte plutot que blanc plein : meme esprit que le lisere et le
     reflet du haut deja en place (voir la note en tete de la section
     Cartes), pousse un cran plus loin a la demande expresse. La teinte
     reprend --action-tint-strong (en rgb, la transparence ne s'ecrit pas
     via une variable hex) : jamais de couleur inventee. Le flou reste
     tres leger et jamais applique au texte lui-meme (voir plus bas), la
     lisibilite prime toujours sur l'effet. */
  background: linear-gradient(160deg, rgba(255,255,255,.90) 0%, rgba(226,223,247,.78) 100%);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,.7);
  padding: var(--space-lg);
  min-height: 208px;
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(25,20,62,.05),
    0 14px 32px -16px rgba(25,20,62,.20),
    0 32px 64px -30px rgba(25,20,62,.22);
  transition: transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.promo__carte:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(25,20,62,.06),
    0 22px 44px -18px rgba(25,20,62,.30),
    0 40px 76px -30px rgba(25,20,62,.26);
}
.promo__carte:hover .promo__illustration { transform: scale(1.06); }
.promo__titre {
  position: relative;
  z-index: 1;
  font-size: var(--text-body-strong-size);
  font-weight: var(--text-body-strong-weight);
  color: var(--brand-1);
  max-width: 68%;
  margin: 0 0 6px;
}
.promo__texte {
  position: relative;
  z-index: 1;
  font-size: var(--text-caption-size);
  color: var(--ink-muted-80);
  line-height: 1.5;
  max-width: 62%;
  margin: 0;
}
.promo__illustration {
  position: absolute;
  right: -10px;
  bottom: -6px;
  width: 104px;
  height: auto;
  pointer-events: none;
  transition: transform var(--dur-base) var(--ease-standard);
}
.promo__bouton {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  margin-top: auto;
}

/* Les quatre raccourcis de la vue d'ensemble sont des cartes ENTIEREMENT
   cliquables (pas de bouton separe) : meme carte, juste un lien plutot
   qu'un <div>, donc les reglages de couleur/soulignement d'un lien
   normal sont neutralises ici. */
a.promo__carte { text-decoration: none; }
a.promo__carte:hover { text-decoration: none; }
a.promo__carte:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 3px; }
/* Colonnes fixes plutot que l'auto-fit de .promo : Aide d'urgence vit
   maintenant a part (voir .carte--urgence, plus bas, sur le modele de
   la grande carte rouge de la reference), donc trois cartes ici. */
.promo--raccourcis { grid-template-columns: repeat(3, 1fr); }
.promo--raccourcis .promo__carte { min-height: 220px; padding: var(--space-md) var(--space-lg); gap: var(--space-sm); }
/* Colonnes plus etroites qu'un .promo a une carte pleine largeur : le
   titre a besoin de toute la largeur, l'illustration ne lui dispute
   plus l'espace. Icone agrandie et opaque (etait 64px/.9, jugee trop
   petite et trop pale a l'usage) : elle doit se remarquer, pas juste se
   deviner dans le coin. */
.promo--raccourcis .promo__titre,
.promo--raccourcis .promo__texte { max-width: 100%; }
.promo--raccourcis .promo__illustration { width: 84px; opacity: 1; right: -8px; bottom: -10px; }

/* Bouton VISUEL, pas un vrai <button> : la carte entiere est deja le
   lien (voir a.promo__carte plus haut), imbriquer un second element
   interactif dedans serait invalide en HTML. Un span suffit a donner
   l'affordance -- contour colore, fond clair -- vue sur la reference
   envoyee, sans pretendre a une deuxieme cible cliquable. */
.promo__bouton-visuel {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  margin-top: auto;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--brand-4);
  background: rgba(255,255,255,.7);
  color: var(--brand-4);
  font-size: var(--text-caption-size);
  font-weight: 700;
  transition: background var(--dur-fast) var(--ease-standard);
}
.promo__carte:hover .promo__bouton-visuel {
  background: var(--action);
  border-color: var(--action);
  color: var(--on-action);
}
.promo__bouton-visuel--muet {
  border-color: var(--hairline);
  color: var(--ink-muted-80);
  background: rgba(255,255,255,.5);
}
.promo__carte--futur:hover .promo__bouton-visuel--muet { background: rgba(255,255,255,.5); }

/* « Bientot disponible » : la carte reste lisible mais se met en retrait
   (meme esprit que .rail__lien--futur) et n'imite pas le survol d'une
   vraie action, pour ne jamais laisser croire qu'il se passe quelque
   chose au clic. */
.promo__carte--futur { opacity: .8; }
.promo__carte--futur:hover { transform: none; }
.promo__carte--futur .promo__illustration { opacity: .85; }

/* Urgence fraude : seule carte de ce groupe a utiliser un signal reel
   (rouge) plutot qu'une teinte decorative -- parce que son sujet EST un
   vrai signal (une fraude en cours), pas une simple information. */
.promo__carte--urgence {
  background: linear-gradient(160deg, rgba(253,238,242,.94) 0%, rgba(253,220,229,.82) 100%);
  border-color: rgba(210,38,79,.18);
}
.promo__carte--urgence .promo__titre { color: var(--signal-critique); }

/* Carte « fait » (personne secondaire prise, bien immobilier enregistre) :
   entouree d'un vrai vert sur tout son pourtour, avec un halo doux et une
   teinte verte tres legere -- on voit d'un coup d'oeil ce qui est en place.
   Le vert est celui du signal « sur » du design system (le meme que les
   coches et « protection active »), en un ton plus clair pour le trait. */
.promo__carte--fait {
  --vert-fait: #1ea67c;
  border: 2px solid var(--vert-fait);
  background: linear-gradient(160deg, rgba(255,255,255,.88) 0%, rgba(214,244,232,.72) 100%);
  box-shadow:
    0 0 0 4px rgba(30,166,124,.13),
    inset 0 1px 0 rgba(255,255,255,.9),
    0 16px 34px -16px rgba(18,135,111,.42);
}
.promo__carte--fait:hover {
  box-shadow:
    0 0 0 5px rgba(30,166,124,.18),
    inset 0 1px 0 rgba(255,255,255,.9),
    0 22px 42px -18px rgba(18,135,111,.5);
}
.promo__carte--fait .promo__texte { color: var(--signal-sur); font-weight: 600; }

/* Le vert « s'enroule » autour de la carte a l'arrivee sur la page : deux traits
   verts partent du haut, descendent chacun d'un cote et se rejoignent en bas,
   puis le contour et le halo se fixent. La carte prend son style « fait » quand
   ses donnees arrivent (voir majRaccourci*), c'est donc a ce moment que
   l'animation joue. Les deux cartes se suivent avec un leger decalage.
   Sans @property (vieux navigateur), le trait apparait d'un coup : rien ne casse. */
@property --angle-vert {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.promo__carte--fait { --delai: 0s; }
.promo__carte--fait:nth-child(3) { --delai: .28s; }
.promo__carte--fait::before {
  content: "";
  position: absolute;
  inset: -2px;                       /* colle au bord exterieur de la bordure de 2px */
  border-radius: inherit;
  padding: 2px;                      /* epaisseur du trait */
  /* Deux traits partent du HAUT de la carte, l'un vers la droite, l'autre vers la
     gauche, et se rejoignent en bas : --angle-vert va de 0 a 180deg. Chaque
     pointe est un peu plus claire, pour qu'on voie le trait avancer. */
  background: conic-gradient(from 0deg,
    var(--vert-fait) 0deg,
    var(--vert-fait) calc(var(--angle-vert) - 8deg),
    #7ff0c8 var(--angle-vert),
    transparent calc(var(--angle-vert) + .2deg),
    transparent calc(360deg - var(--angle-vert) - .2deg),
    #7ff0c8 calc(360deg - var(--angle-vert)),
    var(--vert-fait) calc(360deg - var(--angle-vert) + 8deg),
    var(--vert-fait) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  animation: vert-enroule 1.4s cubic-bezier(.45, .05, .25, 1) var(--delai) backwards;
}
@keyframes vert-enroule {
  from { --angle-vert: 0deg; }
  to   { --angle-vert: 181deg; }
}
/* Pendant le tour, le contour fixe et le halo sont a peine visibles ; ils se
   « allument » quand le trait a fini. `backwards` : seul l'etat de depart
   s'applique pendant le delai, ensuite ce sont les valeurs normales (le survol
   garde donc la main). */
/* Deux classes : l'entree generale des cartes (« monte », plus bas dans ce
   fichier) declare aussi `animation` et l'aurait emporte. Les deux jouent
   ensemble. */
@media (prefers-reduced-motion: no-preference) {
  .promo__carte.promo__carte--fait {
    animation:
      monte var(--dur-base) var(--ease-standard) backwards,
      vert-allume 1.6s ease-out var(--delai) backwards;
  }
}
@keyframes vert-allume {
  0%, 62% {
    border-color: rgba(30,166,124,.14);
    box-shadow: 0 0 0 4px rgba(30,166,124,0), inset 0 1px 0 rgba(255,255,255,.9), 0 16px 34px -16px rgba(18,135,111,0);
  }
  100% {
    border-color: #1ea67c;
    box-shadow: 0 0 0 4px rgba(30,166,124,.13), inset 0 1px 0 rgba(255,255,255,.9), 0 16px 34px -16px rgba(18,135,111,.42);
  }
}
@media (prefers-reduced-motion: reduce) {
  .promo__carte--fait, .promo__carte--fait::before { animation: none; }
}

/* Aide d'urgence : grande carte, illustration a cote du texte -- sur le
   modele de la carte rouge de la reference envoyee, plutot qu'une tuile
   parmi d'autres. Bouton rouge (pas l'action habituelle) : c'est la
   seule carte de la page a se le permettre, parce que son sujet EST une
   vraie urgence, jamais une decoration. */
/* .carte.carte--urgence (deux classes), pas .carte--urgence seule : ce
   fond n'apparaissait jamais en pratique, ecrase par le fond de .carte
   plus bas dans ce fichier -- meme specificite (une classe), donc l'ordre
   du fichier tranchait. Deux classes l'emportent quel que soit l'ordre. */
.carte.carte--urgence {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
  /* Vertical, pas diagonal, et beaucoup moins sature -- sur demande
     expresse : rouge pale en haut, blanc en bas, jamais le rose soutenu
     de la premiere version. */
  background: linear-gradient(180deg, rgba(252,221,229,.75) 0%, rgba(255,255,255,.97) 100%);
  border-color: rgba(210,38,79,.16);
}
.carte--urgence__illustration { flex: 0 0 auto; }
.carte--urgence__corps { flex: 1 1 auto; min-width: 0; }
.carte--urgence .carte__titre { font-size: 22px; font-weight: 700; color: var(--signal-critique); }
.carte--urgence .carte__note { max-width: 640px; margin-bottom: var(--space-lg); }
.carte--urgence .btn--action {
  background: var(--signal-critique);
  box-shadow: 0 10px 24px -12px rgba(210,38,79,.55);
}
.carte--urgence .btn--action:hover { filter: brightness(.92); }
@media (max-width: 680px) {
  .carte--urgence { flex-direction: column; text-align: center; }
  .carte--urgence__illustration { width: 120px; height: 120px; }
}

/* ── Renforcez votre protection ──
   Meme verre que .carte, mais une liste plutot que des tuiles : quatre
   etapes, chacune verifiee sur une vraie donnee (voir rendreChecklist
   dans tableau-de-bord.html). La barre de progression n'est jamais a
   100% par un artifice -- elle suit exactement le compte affiche a cote. */
.checklist {
  margin-bottom: var(--space-xl);
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, rgba(255,255,255,.90) 0%, rgba(226,223,247,.78) 100%);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(25,20,62,.05),
    0 14px 32px -16px rgba(25,20,62,.20),
    0 32px 64px -30px rgba(25,20,62,.22);
}
.checklist__entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.checklist__titre {
  margin: 0 0 4px;
  font-size: var(--text-body-strong-size);
  font-weight: var(--text-body-strong-weight);
  color: var(--brand-1);
}
.checklist__texte { margin: 0; font-size: var(--text-caption-size); color: var(--ink-muted-80); }
.checklist__bascule {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--hairline);
  background: rgba(255,255,255,.7);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-family: inherit;
  font-size: var(--text-caption-size);
  font-weight: 600;
  color: var(--brand-1);
}
.checklist__bascule svg { transition: transform var(--dur-fast) var(--ease-standard); }
.checklist__bascule--ouvert svg { transform: rotate(180deg); }
.checklist__bascule:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 2px; }
.checklist__barre {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--hairline);
  margin: var(--space-md) 0 var(--space-sm);
  overflow: hidden;
}
.checklist__barre-remplie {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--brand-gradient);
  transition: width var(--dur-base) var(--ease-standard);
}
.checklist__liste { list-style: none; margin: 0; padding: 0; }
.checklist__item { border-top: 1px solid var(--divider-soft); }
.checklist__item:first-child { border-top: 0; }
.checklist__lien {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 4px;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-standard);
}
.checklist__lien:hover { background: rgba(255,255,255,.5); text-decoration: none; }
.checklist__lien:focus-visible { outline: 2px solid var(--action-focus); outline-offset: -2px; }
.checklist__icone {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--action-tint);
  color: var(--brand-4);
}
.checklist__item--fait .checklist__icone { background: var(--signal-sur-tint); color: var(--signal-sur); }
.checklist__corps { flex: 1 1 auto; min-width: 0; }
.checklist__nom { display: block; font-size: var(--text-caption-strong-size); font-weight: var(--text-caption-strong-weight); color: var(--brand-1); }
.checklist__item--fait .checklist__nom { color: var(--ink-muted-80); }
.checklist__detail { display: block; margin-top: 2px; font-size: var(--text-fine-size); color: var(--ink-muted-80); }
.checklist__chevron { flex: 0 0 auto; color: var(--ink-muted-48); }
@media (prefers-reduced-motion: reduce) {
  .checklist__bascule svg, .checklist__barre-remplie, .checklist__lien { transition: none; }
}

/* ── Cartes d'articles ──
   « Conseils de l'equipe SentinelleFin » (vue d'ensemble) et « En savoir plus
   sur les contacts de confiance » (page Contacts de confiance) partagent la
   meme carte : le titre DANS la carte, du style de celui de la foire aux
   questions, puis une ligne cliquable par article (.conseil). Sur le modele
   de la reference envoyee : une liste de lignes, pas une grille de tuiles --
   le titre d'un article a besoin de largeur pour se lire sur une ou deux
   lignes. La carte n'a pas de marge interne : les lignes vont d'un bord a
   l'autre (survol et filets compris), avec la meme marge laterale que le
   titre ; overflow: hidden arrondit le survol de la derniere ligne.
   « .carte.articles-carte » : .carte est defini plus bas dans ce fichier, et
   a specificite egale c'est la derniere regle qui gagne. */
.conseils { margin-bottom: var(--space-xl); }
.carte.articles-carte { padding: 0; overflow: hidden; }
.articles-carte__titre {
  margin: 0;
  padding: var(--space-lg) var(--space-xl) var(--space-md);
  border-bottom: 1px solid var(--hairline-alpha);
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-1);
  text-wrap: balance;
}
.articles-carte .conseil { padding: var(--space-md) var(--space-xl); border-top-color: var(--hairline-alpha); }
.articles-carte .conseil__titre-article { text-wrap: pretty; }
/* Plus de place sur ordinateur : miniature plus grande, titre de la taille de
   ceux de la foire aux questions. */
@media (min-width: 721px) {
  .articles-carte .conseil { gap: var(--space-lg); }
  .articles-carte .conseil__vignette { width: 72px; height: 72px; }
  .articles-carte .conseil__titre-article { font-size: var(--text-body-strong-size); }
}
@media (max-width: 720px) {
  .articles-carte__titre { padding: var(--space-md) var(--space-md) var(--space-sm); }
  .articles-carte .conseil { padding: var(--space-md); }
}
.conseil {
  appearance: none;
  border: 0;
  border-top: 1px solid var(--divider-soft);
  background: transparent;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.conseil:first-child { border-top: 0; }
.conseil:hover { background: var(--action-tint); }
.conseil:focus-visible { outline: 2px solid var(--action-focus); outline-offset: -2px; }
/* Vraie photo, pas une icone : sur le modele de la reference envoyee.
   overflow hidden + object-fit cover recadre en carre quelle que soit
   la photo fournie, sans jamais la deformer. */
.conseil__vignette {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--action-tint-strong);
}
.conseil__vignette img { width: 100%; height: 100%; object-fit: cover; }
.conseil__corps { flex: 1 1 auto; min-width: 0; }
.conseil__titre-article { display: block; font-size: var(--text-caption-strong-size); font-weight: var(--text-caption-strong-weight); color: var(--brand-1); line-height: 1.4; }
.conseil__duree { display: block; margin-top: 3px; font-size: var(--text-fine-size); color: var(--ink-muted-80); }
.conseil__fleche { flex: 0 0 auto; color: var(--ink-muted-48); }

/* ── Proposition d'upgrade ──
   Fenetre centree, pas un tiroir lateral (comme reglages.html) : le
   message est court, une boite au milieu de l'ecran se lit plus vite
   qu'un panneau qu'il faut faire glisser. */
.modale[hidden] { display: none; }
.modale {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}
.modale__voile {
  position: absolute;
  inset: 0;
  background: rgba(25,20,62,.46);
  animation: modaleVoile var(--dur-base) var(--ease-standard) both;
}
.modale__panneau {
  position: relative;
  width: min(440px, 100%);
  padding: var(--space-xl);
  border-radius: var(--radius-xl);
  background: var(--canvas);
  box-shadow: 0 40px 80px -30px rgba(25,20,62,.5);
  animation: modalePanneau var(--dur-base) var(--ease-standard) both;
}
.modale__fermer {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  appearance: none;
  cursor: pointer;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink-muted-80);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.modale__fermer:hover { border-color: var(--action); color: var(--action); }
.modale__sur {
  margin: 0 0 6px;
  font-size: var(--text-micro-size);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-4);
  font-weight: 700;
}
.modale__titre {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-1);
  padding-right: var(--space-xl);
}
.modale__texte {
  margin: 0 0 var(--space-lg);
  font-size: var(--text-body-size);
  line-height: 1.55;
  color: var(--ink-muted-80);
}
@keyframes modaleVoile { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalePanneau {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .modale__voile, .modale__panneau { animation: none; }
}

/* ── Superposition d'article ──
   Panneau plein hauteur qui glisse depuis le bas (translateY), pas une
   boite centree comme .modale : la fermeture doit se voir redescendre,
   sur demande expresse, donc une transition CSS classique plutot qu'une
   @keyframes -- voir ouvrirArticle()/fermerArticle() dans le script, qui
   attendent la fin de cette transition avant de remettre [hidden]. */
.article-recouvrement[hidden] { display: none; }
.article-recouvrement {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  justify-content: center;
}
.article-recouvrement__voile {
  position: absolute;
  inset: 0;
  background: rgba(25,20,62,.5);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard);
}
.article-recouvrement--ouvert .article-recouvrement__voile { opacity: 1; }
.article-recouvrement__panneau {
  position: relative;
  z-index: 1;
  margin-top: auto;
  width: min(980px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--canvas);
  box-shadow: 0 -30px 70px -30px rgba(25,20,62,.5);
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-standard);
}
.article-recouvrement--ouvert .article-recouvrement__panneau { transform: translateY(0); }
.article-recouvrement__entete {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-xl);
  border-bottom: 1px solid var(--divider-soft);
}
.article-recouvrement__etiquette {
  font-size: var(--text-micro-size);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-muted-48);
}
.article-recouvrement__fermer {
  appearance: none;
  cursor: pointer;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink-muted-80);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.article-recouvrement__fermer:hover { border-color: var(--action); color: var(--action); }
.article-recouvrement__contenu { flex: 1 1 auto; overflow-y: auto; padding: var(--space-xl) var(--space-xl) var(--space-section); }
/* Bouton bleu toujours visible, pas seulement apres avoir tout fait
   defiler (sur le modele de la reference envoyee) : un pied fixe, hors
   de la zone qui defile, sur demande expresse -- un lecteur agé ne
   devrait jamais avoir a chercher comment refermer un long article. */
.article-recouvrement__pied {
  flex: 0 0 auto;
  padding: var(--space-md) var(--space-xl);
  border-top: 1px solid var(--divider-soft);
  background: var(--canvas);
}
.article-recouvrement__contenu .article__titre { margin: 0 0 var(--space-xs); font-size: 26px; line-height: 1.3; color: var(--brand-1); }
.article-recouvrement__contenu .article__duree { margin: 0; font-size: var(--text-caption-size); color: var(--ink-muted-80); }
.article-recouvrement__contenu .article__separateur { margin: var(--space-md) 0 var(--space-lg); border: 0; border-top: 1px solid var(--divider-soft); }
.article-recouvrement__contenu hr { margin: var(--space-lg) 0; border: 0; border-top: 1px solid var(--divider-soft); }
.article-recouvrement__contenu h2 { margin: 0 0 var(--space-sm); font-size: 20px; color: var(--brand-1); }
.article-recouvrement__contenu h3 { margin: var(--space-md) 0 var(--space-xs); font-size: var(--text-body-size); color: var(--brand-4); }
.article-recouvrement__contenu p { margin: 0 0 var(--space-sm); line-height: 1.65; color: var(--ink); }
.article-recouvrement__contenu ul { margin: 0 0 var(--space-sm); padding-left: 1.2em; line-height: 1.65; }
.article-recouvrement__contenu li { margin-bottom: 4px; }
.article-recouvrement__contenu blockquote {
  margin: 0 0 var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--action);
  background: var(--action-tint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
  color: var(--brand-1);
}
.article-recouvrement__contenu blockquote p { margin: 0; }
.article-recouvrement__contenu .article__note { margin-top: var(--space-lg); font-size: var(--text-caption-size); color: var(--ink-muted-80); }

/* Chapo, sous-titres, encarts et checklist des articles.
   Le guide de preparation aux situations d'urgence a besoin de plus que des
   paragraphes : une phrase d'accroche sous le titre (.article__chapo), des
   titres de quatrieme niveau pour les familles de documents (h4), deux
   encarts (« Attention a la confidentialite », « Bon reflexe ») et une vraie
   checklist a cocher. Les jetons du design system uniquement.
   text-wrap: pretty : jamais un mot seul sur la derniere ligne d'un
   paragraphe, dans un texte qu'on lit longtemps. */
.article-recouvrement__contenu p,
.article-recouvrement__contenu li { text-wrap: pretty; }
.article-recouvrement__contenu .article__chapo {
  margin: 0 0 var(--space-md);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--brand-3);
}
.article-recouvrement__contenu h4 {
  margin: var(--space-sm) 0 4px;
  font-size: var(--text-caption-size);
  font-weight: 700;
  color: var(--ink-muted-80);
}
.article-recouvrement__contenu .article__encart {
  margin: var(--space-md) 0;
  padding: var(--space-sm) var(--space-md);
  border-left: 4px solid var(--action);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--action-tint);
}
.article-recouvrement__contenu .article__encart p { margin: 0 0 var(--space-xs); }
.article-recouvrement__contenu .article__encart p:last-child { margin-bottom: 0; }
.article-recouvrement__contenu .article__encart--attention { border-left-color: var(--signal-vigilance); background: var(--signal-vigilance-tint); }
.article-recouvrement__contenu .article__encart--astuce { border-left-color: var(--signal-sur); background: var(--signal-sur-tint); }

/* Checklist : le compteur, la barre et le message de fin suivent les cases
   cochees (voir majChecklist() dans le script). Vert quand tout est coche,
   comme « Protection active et a jour ». */
.article-checklist {
  margin: var(--space-md) 0 var(--space-lg);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--surface-pearl);
  box-shadow: var(--ring-soft);
}
.article-checklist__entete { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.article-recouvrement__contenu .article-checklist__titre { margin: 0; font-size: 18px; color: var(--brand-1); }
.article-checklist__compteur {
  flex: 0 0 auto;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  background: var(--action-tint-strong);
  color: var(--brand-3);
  font-size: var(--text-caption-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.article-checklist__barre {
  height: 6px;
  margin: var(--space-sm) 0 var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--action-tint-strong);
  overflow: hidden;
}
.article-checklist__remplie {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-1);
  transition: width var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.article-checklist--complete .article-checklist__compteur { background: var(--signal-sur-tint); color: var(--signal-sur); }
.article-checklist--complete .article-checklist__remplie { background: var(--signal-sur); }
.article-recouvrement__contenu .article-checklist__liste { margin: var(--space-xs) 0 0; padding: 0; list-style: none; }
.article-recouvrement__contenu .article-checklist__liste li { margin: 0; border-top: 1px solid var(--divider-soft); }
.article-recouvrement__contenu .article-checklist__liste li:first-child { border-top: 0; }
.article-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  min-height: 44px;
  padding: 10px 2px;
  line-height: 1.5;
  cursor: pointer;
}
.article-checklist__item input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--brand-1);
  cursor: pointer;
}
.article-checklist__item input:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 2px; }
.article-checklist__item span { transition: color var(--dur-fast) var(--ease-standard); }
.article-checklist__item input:checked + span { color: var(--ink-muted-80); }
.article-recouvrement__contenu .article-checklist__fin {
  margin: var(--space-sm) 0 0;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--signal-sur-tint);
  font-weight: 600;
  color: var(--signal-sur);
}
.article-checklist__pied { display: flex; align-items: center; justify-content: flex-end; margin-top: var(--space-sm); }
@keyframes articleChecklistFin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .article-checklist__fin { animation: articleChecklistFin .4s var(--ease-standard); }
}
@media (prefers-reduced-motion: reduce) {
  .article-checklist__compteur, .article-checklist__remplie, .article-checklist__item span { transition: none; }
}
/* Sur ordinateur, la barre laterale reste visible a gauche (sous le voile) :
   le panneau se centre dans la zone de CONTENU, a droite d'elle, pas dans la
   fenetre entiere -- sinon il parait decale vers la gauche -- et il prend plus
   de largeur, pour se lire davantage de gauche a droite. */
@media (min-width: 861px) {
  .article-recouvrement { padding-left: var(--rail-largeur); }
  .article-recouvrement__panneau { width: min(980px, calc(100% - var(--space-xl) * 2)); }
  .article-recouvrement__entete,
  .article-recouvrement__pied { padding-left: var(--space-xxl); padding-right: var(--space-xxl); }
  .article-recouvrement__contenu { padding-left: var(--space-xxl); padding-right: var(--space-xxl); }
}
.body--sans-defilement { overflow: hidden; }
@media (max-width: 680px) {
  .article-recouvrement__entete { padding: var(--space-sm) var(--space-md); }
  .article-recouvrement__contenu { padding: var(--space-lg) var(--space-md) var(--space-xxl); }
  .article-recouvrement__contenu .article__titre { font-size: 22px; }
  .article-recouvrement__pied { padding: var(--space-sm) var(--space-md); }
  .article-recouvrement__pied .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .article-recouvrement__voile, .article-recouvrement__panneau { transition: none; }
}

/* ═════════════════════════ Grille ═════════════════════════ */
.grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: var(--space-lg);
  align-items: start;
}
.colonne { display: flex; flex-direction: column; gap: var(--space-lg); }

/* ═════════════════════════ Cartes ═════════════════════════
   Rayon a deux crans, jamais melanges au hasard : les grandes tuiles
   opaques (.carte, .chiffre, .promo__carte) prennent --radius-xl, tout
   ce qui vit a l'interieur (alertes, lignes, boutons) garde son cran
   d'origine. Le lisere blanc et le reflet du haut imitent la matiere
   d'une tuile Apple.

   MISE A JOUR (verre teinte, a la demande expresse) : la carte n'est
   plus --canvas plein mais un blanc legerement transparent + flou, teinte
   de --action-tint-strong. Toujours tres contrastee : le fond qu'elle
   laisse passer est lui-meme presque blanc (#eeebf8, voir .app plus haut),
   donc un texte encre dessus reste au-dessus de 15:1 de contraste, tres
   loin du minimum d'accessibilite -- la transparence ne mord jamais sur
   la lisibilite promise en tete de fichier. Repli en plein si le systeme
   demande moins de transparence (voir la mediaquery en bas de fichier). */
.carte {
  background: linear-gradient(160deg, rgba(255,255,255,.82) 0%, rgba(226,223,247,.66) 100%);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,.7);
  padding: var(--space-lg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(25,20,62,.05),
    0 14px 32px -16px rgba(25,20,62,.20),
    0 32px 64px -30px rgba(25,20,62,.22);
  /* Petite animation, pas un gros effet -- demande expresse : la carte
     se souleve tres legerement au survol, rien de plus. */
  transition: transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.carte:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(25,20,62,.06),
    0 20px 40px -18px rgba(25,20,62,.26),
    0 38px 72px -30px rgba(115,111,182,.30);
}
@media (prefers-reduced-motion: reduce) {
  .carte { transition: none; }
  .carte:hover { transform: none; }
}

.carte__titre {
  font-size: var(--text-body-strong-size);
  font-weight: var(--text-body-strong-weight);
  color: var(--brand-1);
  margin: 0 0 var(--space-xs);
}
.carte__note {
  font-size: var(--text-caption-size);
  color: var(--ink-muted-80);
  margin: 0 0 var(--space-md);
  line-height: 1.5;
}
.carte__lien { margin-top: var(--space-md); }

/* ── Bandeau de chiffres ──
   Grille 2x2 de tuiles IDENTIQUES (a la demande expresse, sur le modele
   d'une grille de type « portefeuille » : plusieurs cartes de meme
   poids plutot qu'une grande promesse entouree de trois petites). La
   hierarchie ne vient plus de la taille mais de la couleur du jeton
   (voir .chiffre__icone--* plus bas) et de l'ordre de lecture : le
   solde reste le premier chiffre en haut a gauche. */
.chiffres {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.chiffre {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Verre un peu plus aere que sur les grandes cartes : ce sont de
     petites tuiles posees en haut de page, la ou les deux nappes
     teintees du fond sont les plus visibles (voir .app). Le texte reste
     tres sombre sur un fond qui, compose, reste quasi blanc -- meme
     raisonnement de contraste que pour .carte. */
  background: linear-gradient(158deg, rgba(255,255,255,.72) 0%, rgba(226,223,247,.50) 100%);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,.75);
  padding: var(--space-lg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(25,20,62,.05),
    0 14px 32px -16px rgba(25,20,62,.20),
    0 32px 64px -30px rgba(25,20,62,.22);
  /* Petite interaction au survol : la tuile se souleve legerement, comme
     une carte de portefeuille qu'on regarderait de plus pres. Purement
     decoratif -- aucune des quatre tuiles n'est cliquable. */
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.chiffre:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.95);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 2px rgba(25,20,62,.06),
    0 18px 38px -16px rgba(25,20,62,.26),
    0 36px 70px -30px rgba(25,20,62,.26);
}

/* Intitule a gauche, pictogramme a droite : la ligne du haut de chaque
   tuile. Le jeton reprend la forme de ceux de la barre laterale, en
   clair -- un seul langage de pictogrammes dans toute l'application.
   Chaque chiffre porte sa propre teinte violette (jamais les trois
   couleurs signal, reservees aux vrais signaux du moteur) : c'est ce
   qui distingue les quatre tuiles maintenant qu'elles ont toutes la
   meme taille. Le carre porte aussi un reflet (le ::after diagonal) --
   a la demande expresse, sur le modele des icones a effet "verre" des
   cartes Helios envoyees en reference. */
.chiffre__haut {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
}
.chiffre__icone {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(255,255,255,.62);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9);
  color: var(--brand-4);
  transition: transform var(--dur-fast) var(--ease-standard);
}
/* Le reflet : un lisere diagonal clair dans le coin haut-gauche, jamais
   assez appuye pour manger le trait de l'icone (contraste avant tout). */
.chiffre__icone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 48%);
  pointer-events: none;
}
/* Sans ceci, le reflet (::after, positionne) peindrait PAR-DESSUS le
   trait de l'icone (non positionne) quel que soit l'ordre dans le DOM :
   un position+z-index le repasse devant. */
.chiffre__icone svg { position: relative; z-index: 1; }
.chiffre:hover .chiffre__icone { transform: scale(1.08); }
.chiffre__icone--solde { color: var(--brand-4); background: linear-gradient(160deg, rgba(94,83,152,.18) 0%, rgba(94,83,152,.07) 100%); }
.chiffre__icone--operations { color: var(--brand-4); background: linear-gradient(160deg, rgba(94,83,152,.18) 0%, rgba(94,83,152,.07) 100%); }
.chiffre__icone--signalements { color: var(--brand-4); background: linear-gradient(160deg, rgba(94,83,152,.18) 0%, rgba(94,83,152,.07) 100%); }
.chiffre__icone--identite { color: var(--brand-5); background: linear-gradient(160deg, rgba(115,111,182,.2) 0%, rgba(115,111,182,.08) 100%); }

.chiffre__cle {
  display: block;
  font-size: var(--text-micro-size);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted-80);
  padding-top: 4px;
}
.chiffre__valeur {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.05;
  color: var(--brand-1);
  font-variant-numeric: tabular-nums;
  /* Pousse le pied en bas : les quatre tuiles n'ont pas la meme hauteur
     de contenu, leurs pieds doivent quand meme s'aligner. */
  margin-bottom: auto;
}
.chiffre__unite {
  font-size: var(--text-caption-size);
  font-weight: 400;
  color: var(--ink-muted-80);
}
.chiffre__pied {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-caption-size);
  color: var(--ink-muted-80);
}

.pastille { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.pastille--sur { background: var(--signal-sur); }
.pastille--vigilance { background: var(--signal-vigilance); }
.pastille--critique { background: var(--signal-critique); }
.pastille--neutre { background: var(--signal-neutre); }

/* La seule pastille qui respire : elle dit "je surveille en ce moment
   meme", pas seulement "tout va bien". Repetee partout, l'idee se
   diluerait en decoration ; reservee au pied de la tuile Solde, elle
   porte tout le poids emotionnel du produit. Ne se declenche que si
   l'etat est reellement "sur" : jamais de mouvement qui ment (meme
   regle que le lisere des alertes). */
.chiffre__pied .pastille--sur {
  animation: pastilleVeille 2.6s ease-in-out infinite;
}
@keyframes pastilleVeille {
  0%, 100% { box-shadow: 0 0 0 0 rgba(18,135,111,.35); }
  50% { box-shadow: 0 0 0 5px rgba(18,135,111,0); }
}

/* ── Évolution du solde ──
   Carte pleine largeur, placée juste après le bandeau de chiffres : le
   graphique est ce qui rend le produit "parlant" au premier coup d'oeil,
   il mérite la place la plus visible plutôt qu'une case au milieu de la
   grille. Le SVG est généré en JS (voir js dans tableau-de-bord.html) à
   partir de solde_historique, jamais calculé côté navigateur. */
.carte--solde {
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
}

/* ── État vide (aucune banque reliée) ──
   Un vrai geste d'accueil plutot qu'une ligne de texte, sur le modele
   envoye : bouton d'action immediat, puis une scene qui explique ce
   qui se passera une fois la banque reliee. */
.solde-vide__entete { margin-bottom: var(--space-lg); }
.solde-vide__texte {
  margin: var(--space-xs) 0 0;
  max-width: 46em;
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--ink-muted-80);
}
.solde-vide__bouton {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xxl);
}

/* Deux colonnes de poids comparable (sur demande expresse : le carre
   prenait trop peu de place face au texte, contrairement a la
   reference envoyee, ou les deux tiennent une place egale). */
.solde-vide__corps {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 1.1fr;
  gap: var(--space-xxl);
  align-items: center;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--divider-soft);
}

/* Carre plein degrade de marque, jamais deforme (aspect-ratio), overflow
   cache pour que les ondes se decoupent proprement au bord plutot que
   de deborder de la carte. */
.solde-vide__scene {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 15%, rgba(115,111,182,.5) 0%, transparent 62%),
    var(--brand-gradient-diag);
  display: grid;
  place-items: center;
}
.solde-vide__point {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--on-dark);
  box-shadow: 0 0 0 7px rgba(255,255,255,.16);
}
/* Ondulations vers l'exterieur, sur le modele envoye : trois anneaux
   decales par un delai NEGATIF (equivalent a "deja en cours" des la
   premiere image, pas d'attente avant que la scene ait l'air vivante),
   grossissant depuis le point central en s'estompant. */
.solde-vide__onde {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.6);
  animation: soldeOnde 3.6s ease-out infinite;
  animation-delay: calc(var(--i) * -1.2s);
}
@keyframes soldeOnde {
  from { width: 14px; height: 14px; opacity: .75; }
  to   { width: 480px; height: 480px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .solde-vide__onde { animation: none; display: none; }
}

.solde-vide__soustitre {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-tagline-size);
  font-weight: var(--text-tagline-weight);
  color: var(--brand-1);
}
.solde-vide__liste {
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.solde-vide__liste li {
  position: relative;
  padding-left: var(--space-lg);
  font-size: var(--text-body-size);
  line-height: 1.5;
  color: var(--ink);
}
.solde-vide__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--action);
}

@media (max-width: 720px) {
  .solde-vide__corps { grid-template-columns: 1fr; }
  .solde-vide__scene { max-width: 220px; margin: 0 auto; }
}
.solde__entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}
.solde__valeur-bloc {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.solde__valeur {
  font-size: 28px;
  font-weight: 600;
  color: var(--brand-1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* La fleche porte le sens, jamais une couleur de signal : un solde qui
   baisse n'est pas une alerte du moteur, juste un fait (meme regle que
   pour les cartes KPI, voir plus haut). */
.solde__variation {
  font-size: var(--text-caption-size);
  font-weight: 600;
  color: var(--ink-muted-80);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Selecteur de compte : n'apparait (en JS) que si la connexion couvre
   vraiment plusieurs comptes -- compte joint, courant + livret. */
.solde__comptes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-sm);
}
.solde__pastille {
  font-family: inherit;
  font-size: var(--text-fine-size);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--canvas);
  color: var(--ink-muted-80);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.solde__pastille:hover { border-color: var(--action); color: var(--brand-1); }
.solde__pastille--active {
  background: var(--brand-1);
  border-color: var(--brand-1);
  color: var(--on-dark);
}
.solde__pastille:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 2px; }

/* Fond legerement teinte derriere le trace : le graphique devient sa
   propre "toile" au lieu de flotter sur le blanc de la carte, sans jamais
   passer par un fond sombre -- ce serait la seule zone sombre d'une page
   claire, l'effet "copier-coller" que le reste du produit evite partout
   ailleurs (voir l'en-tete de ce fichier). */
.solde__zone-graphique {
  position: relative;
  background: linear-gradient(180deg, var(--action-tint) 0%, var(--canvas) 82%);
  border-radius: var(--radius-md);
  padding: var(--space-sm) 0 0;
}
/* Le cadre fait exactement la taille du SVG : les etiquettes d'axes,
   qui sont du HTML pose par-dessus (voir le commentaire dans
   tableau-de-bord.html), s'y positionnent en pourcentage du meme
   repere que le trace. */
.solde__cadre { position: relative; }
.solde__axe-y,
.solde__axe-x {
  position: absolute;
  font-size: var(--text-fine-size);
  color: var(--ink-muted-48);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
/* Gouttiere de gauche, alignee sur le debut du trace (x=50 sur 640). */
.solde__axe-y {
  left: 0;
  width: 7.8%;
  padding-right: 8px;
  text-align: right;
  transform: translateY(-50%);
}
.solde__axe-x { top: 90.6%; }

/* Groupe de survol : un fondu doux plutot qu'une apparition brutale.
   Juste le repere pointille, sans point rond (retire a la demande
   expresse apres essai). */
.solde__survol { transition: opacity var(--dur-fast) var(--ease-standard); }
@media (prefers-reduced-motion: reduce) {
  .solde__survol { transition: none; }
}

.solde__graphique {
  display: block;
  width: 100%;
  /* Hauteur relevee (etait 186px) : sur une carte pleine largeur, un
     tract trop bas s'etirait en ruban plat et disproportionne des que
     l'ecran depassait ~1200px -- c'est ce qui donnait l'effet "bizarre,
     pas pro" signale. */
  height: 300px;
  font-family: inherit;
}
.solde__graphique text { font-family: inherit; }
/* La capture de survol n'a besoin de rien voir ni servir sur un ecran qui
   n'a pas de souris et n'affiche jamais ce point de menu au clic droit. */
#solde-capture { cursor: crosshair; }

/* Infobulle du graphique : suit le point survole, jamais visible tant
   qu'on ne pointe rien (voir brancherSurvolSolde()). */
.solde__infobulle {
  position: absolute;
  transform: translate(-50%, calc(-100% - 14px));
  background: var(--brand-1);
  color: var(--on-dark);
  padding: 8px 13px;
  border-radius: var(--radius-sm);
  font-size: var(--text-fine-size);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 12px 26px -10px rgba(25,20,62,.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 2;
}
.solde__infobulle strong {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.solde__infobulle span { color: var(--on-dark-muted); font-size: 11px; }

/* ── Anneau du budget ──
   conic-gradient : pas de librairie, pas de canvas, imprimable. */
.anneau {
  --part: 33;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto var(--space-md);
  background: conic-gradient(from 180deg,
              var(--brand-5) 0%, var(--brand-3) calc(var(--part) * 1%),
              #e7e3f6 0);
  box-shadow: 0 10px 22px -10px rgba(25,20,62,.35);
}
.anneau::before {
  content: "";
  grid-area: 1 / 1;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--canvas);
  box-shadow: inset 0 1px 3px rgba(25,20,62,.10);
}
.anneau__texte { grid-area: 1 / 1; text-align: center; line-height: 1.15; }
.anneau__valeur {
  display: block;
  font-size: 26px;
  font-weight: 600;
  color: var(--brand-1);
  font-variant-numeric: tabular-nums;
}
.anneau__legende { font-size: var(--text-micro-size); color: var(--ink-muted-80); }

/* ── Barres : depenses par poste ── */
.barres { display: flex; flex-direction: column; gap: 13px; }
.barre__haut {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-caption-size);
  color: var(--ink-muted-80);
  margin-bottom: 6px;
}
.barre__montant { color: var(--brand-1); font-variant-numeric: tabular-nums; }
.barre__piste {
  height: 7px;
  border-radius: 4px;
  background: #ece9f7;
  overflow: hidden;
}
.barre__part {
  height: 100%;
  border-radius: 4px;
  background: var(--brand-gradient);
  transition: width var(--dur-slow) var(--ease-standard);
}

/* ── Protection ── */
.protection { display: flex; flex-direction: column; }
.protection__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 12px 0;
  border-bottom: 1px solid var(--divider-soft);
}
.protection__item:last-child { border-bottom: 0; padding-bottom: 0; }
.protection__nom {
  font-size: var(--text-caption-strong-size);
  font-weight: var(--text-caption-strong-weight);
  color: var(--brand-1);
}
.protection__etat { font-size: var(--text-caption-size); color: var(--ink-muted-80); }
.protection__droite { margin-left: auto; text-align: right; }

/* ═════════════════════ Sentinelle Dark Web ═════════════════════
   Jusqu'a trois emails par utilisateur (verifie par un declencheur en
   base, pas seulement ici). Meme pastille de statut que .protection,
   pour rester dans le meme langage visuel. */
.fuites { display: flex; flex-direction: column; margin-bottom: var(--space-md); }
.fuites__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 12px 0;
  border-bottom: 1px solid var(--divider-soft);
}
.fuites__item:last-child { border-bottom: 0; }
.fuites__email {
  font-size: var(--text-caption-strong-size);
  font-weight: var(--text-caption-strong-weight);
  color: var(--brand-1);
  word-break: break-all;
}
.fuites__etat { font-size: var(--text-caption-size); color: var(--ink-muted-80); }
.fuites__retirer {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: inherit;
  font-size: var(--text-fine-size);
  color: var(--ink-muted-80);
  background: none;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 6px 13px;
  cursor: pointer;
}
.fuites__retirer:hover { border-color: var(--signal-critique); color: var(--signal-critique); }
.fuites__retirer:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 2px; }

.fuites__form { display: flex; flex-direction: column; gap: 8px; }
.fuites__label { font-size: var(--text-caption-size); color: var(--ink-muted-80); }
.fuites__ligne { display: flex; gap: var(--space-sm); }
.fuites__input {
  flex: 1 1 auto;
  /* width: 0 : la largeur naturelle d'un <input> (~20 caracteres) comptait
     dans la largeur minimale de la carte, qui ne pouvait plus retrecir sous
     ~390px ; le champ se remplit de toute facon (flex-grow). */
  width: 0;
  min-width: 0;
  font-family: inherit;
  font-size: var(--text-body-size);
  color: var(--brand-1);
  background: var(--canvas);
  border: none;
  border-radius: var(--radius-sm);
  padding: 11px var(--space-md);
  box-shadow: inset 0 0 0 1px var(--border-input);
}
.fuites__input::placeholder { color: var(--ink-muted-48); }
.fuites__input:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 2px; }
.fuites__bouton {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: var(--text-button-utility-size);
  color: var(--on-dark);
  background: var(--action);
  border: none;
  border-radius: var(--radius-pill);
  padding: 11px 20px;
  cursor: pointer;
}
.fuites__bouton:hover { background: var(--action-hover, var(--action)); }
.fuites__bouton:disabled { background: var(--ink-muted-48); cursor: not-allowed; }
.fuites__erreur { font-size: var(--text-caption-size); color: var(--signal-critique); margin: 0; }
.fuites__limite { font-size: var(--text-caption-size); color: var(--ink-muted-80); margin: 0; }

/* ═════════════════════════ Carte d'alerte ═════════════════════════ */
.alerte {
  border: 1px solid var(--divider-soft);
  border-radius: var(--radius-lg);
  background: var(--canvas);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
}
.alerte:last-child { margin-bottom: 0; }

/* Le lisere gauche porte le canal : seule signaletique couleur, et elle
   ne ment jamais : rouge veut dire « on vous a interrompu ». */
.alerte--interruption {
  border-left: 3px solid var(--signal-critique);
  background: linear-gradient(90deg, var(--signal-critique-tint) 0%, var(--canvas) 34%);
}
.alerte--jour { border-left: 3px solid var(--signal-vigilance); }
.alerte--mois { border-left: 3px solid var(--signal-neutre); }

.alerte__haut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.etiquette {
  font-size: var(--text-micro-size);
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
/* Le texte des etiquettes reste sombre, meme sur fond teinte. Le couple
   « couleur de signal sur sa propre teinte » du design system tombe a
   3,7:1 en corps 10 : illisible au sens de la norme, et pour de vrai
   apres soixante ans. La couleur continue de porter le signal la ou elle
   est lisible (lisere de la carte et pastille) et le mot lui-meme dit
   deja ce qu'il faut comprendre : « Immediat », « Repondu ». */
.etiquette--interruption { background: var(--signal-critique); color: var(--on-dark); }
.etiquette--jour { background: var(--signal-vigilance-tint); color: var(--ink-muted-80); }
.etiquette--mois { background: var(--signal-neutre-tint); color: var(--ink-muted-80); }
.etiquette--repondu { background: var(--signal-sur-tint); color: var(--ink-muted-80); }

.alerte__date {
  font-size: var(--text-caption-size);
  color: var(--ink-muted-80);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.alerte__fait {
  font-size: var(--text-body-strong-size);
  font-weight: var(--text-body-strong-weight);
  line-height: 1.38;
  color: var(--brand-1);
  margin: 0 0 8px;
}
.alerte__motif {
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--ink-muted-80);
  margin: 0;
  max-width: 68ch;
}

.alerte__regles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-sm); }
.regle-jeton {
  font-size: var(--text-fine-size);
  color: var(--brand-4);
  background: var(--action-tint);
  border-radius: var(--radius-xs);
  padding: 4px 8px;
  font-variant-numeric: tabular-nums;
}

/* ═════════════════════════ Reponse 1 / 2 / 3 ═════════════════════════ */
.reponse {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--divider-soft);
}
.reponse__question {
  font-size: var(--text-caption-strong-size);
  font-weight: var(--text-caption-strong-weight);
  color: var(--brand-1);
  margin: 0 0 var(--space-sm);
}
.reponse__choix { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.choix {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: inherit;
  font-size: var(--text-button-utility-size);
  color: var(--brand-1);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 10px 17px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.choix:hover { border-color: var(--action); background: var(--action-tint); }
.choix:active { transform: scale(var(--press-scale)); }
.choix:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 2px; }

.choix__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--action-tint-strong);
  color: var(--brand-2);
  font-size: var(--text-fine-size);
  font-weight: 600;
}

.reponse--close { font-size: var(--text-caption-size); color: var(--ink-muted-80); }

/* Principe 5 : quand la confirmation de l'aidant n'eteint rien, on l'ecrit. */
.reponse__refus {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--signal-vigilance-tint);
  border-radius: var(--radius-sm);
  font-size: var(--text-caption-size);
  line-height: 1.5;
  color: var(--ink-muted-80);
}

.vide {
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-xxl) var(--space-lg);
  text-align: center;
  color: var(--ink-muted-80);
  font-size: var(--text-body-size);
}

.demo-bandeau {
  background: var(--brand-1);
  color: var(--on-dark);
  text-align: center;
  padding: 11px var(--space-lg);
  font-size: var(--text-caption-size);
}

/* ═════════════════════════ Mouvement ═════════════════════════
   Une seule entree, discrete. Un tableau de bord qui montre une fraude
   n'a pas a faire le spectacle. */
@keyframes monte {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* L'animation est OPTIONNELLE, jamais l'etat par defaut. Ecrite dans
   l'autre sens (.carte { opacity: 0 } puis une animation qui la remonte),
   une animation qui ne se declenche pas (onglet en arriere-plan, moteur de
   rendu qui l'ignore, capture automatique) laisserait la page vide. Un
   tableau de bord de surveillance ne peut pas dependre d'un effet pour
   afficher son contenu. */
@media (prefers-reduced-motion: no-preference) {
  /* "backwards", jamais "both" : "both" aurait garde la main sur
     transform pour toujours apres la fin de l'entree (une animation
     CSS l'emporte sur une regle normale, meme :hover), ce qui rendait
     .chiffre:hover et .promo__carte:hover muets sans jamais lever
     d'erreur -- juste un survol qui ne bougeait jamais. "backwards"
     suffit a eviter le flash pendant le delai des cartes en cascade. */
  .chiffre, .carte, .promo__carte { animation: monte var(--dur-base) var(--ease-standard) backwards; }
  .chiffre:nth-child(2) { animation-delay: 40ms; }
  .chiffre:nth-child(3) { animation-delay: 80ms; }
  .chiffre:nth-child(4) { animation-delay: 120ms; }
  .grille .colonne:first-child .carte { animation-delay: 100ms; }
  .grille .colonne:last-child .carte { animation-delay: 140ms; }
}

@media (prefers-reduced-motion: reduce) {
  .barre__part { transition: none; }
  .rail__icone-fond,
  .promo__carte,
  .promo__illustration {
    transition: none;
  }
  .promo__carte:hover { transform: none; }
  .rail__lien:hover .rail__icone-fond { transform: none; }
  .chiffre { transition: none; }
  .chiffre:hover { transform: none; }
  .chiffre:hover .chiffre__icone { transform: none; }
  .chiffre__pied .pastille--sur { animation: none; }
}

/* Repli plein pour qui demande moins de transparence (support navigateur
   encore inegal, d'ou une regle simple plutot qu'une reprise complete du
   degrade) : les cartes redeviennent --canvas plein, sans flou. */
@media (prefers-reduced-transparency: reduce) {
  .carte, .chiffre, .promo__carte {
    background: var(--canvas);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ═════════════════════════ Adaptatif ═════════════════════════ */
/* La grille 2x2 (voir .chiffres plus haut) est deja la disposition par
   defaut : rien a resserrer avant l'empilement complet a 620px. */

@media (max-width: 1080px) {
  .grille { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  /* La gouttiere des valeurs ne fait plus que quelques dizaines de
     pixels a cette largeur : les montants y seraient tronques. Les
     lignes de grille restent, et l'infobulle donne la valeur exacte au
     doigt -- rien n'est perdu. */
  .solde__axe-y { display: none; }
}

@media (max-width: 620px) {
  .chiffres { grid-template-columns: 1fr; }
  .promo--raccourcis { grid-template-columns: 1fr; }
  .veille-hero { padding: var(--space-md); }
}

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }

  /* Barre du haut : logo + bouton menu, uniquement sur mobile (desktop
     n'a pas de bandeau du haut -- demande expresse). */
  .barre-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: 64px;
    padding: 10px var(--space-md);
    background: linear-gradient(168deg, var(--brand-1) 0%, var(--brand-2) 100%);
  }
  /* Le logo de la barre du haut n'est PAS un lien : dans l'application on ne renvoie pas
     vers la page d'accueil du site (un doigt qui glisse dessus ne doit rien ouvrir). */
  .barre-mobile__logo { pointer-events: none; -webkit-user-select: none; user-select: none; }
  .barre-mobile__logo img { display: block; height: 23px; width: auto; -webkit-user-drag: none; }
  .barre-mobile__bouton {
    appearance: none;
    border: 0;
    background: rgba(255,255,255,.12);
    color: var(--on-dark);
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    cursor: pointer;
  }
  .barre-mobile__bouton:active { transform: scale(var(--press-scale)); }

  /* « Mon compte » est range DANS la barre par js/mon-compte-global.js :
     a gauche du bouton menu (16px de marge + 44px de bouton + 8px = 68px),
     centre dans la barre (64px de haut, bouton de ~44px). Son menu s'ouvre
     juste dessous, cale a 8px du bord pour tenir meme sur un ecran de 320px. */
  .barre-mobile .bouton-mon-compte { position: absolute; top: 10px; right: 68px; }
  .barre-mobile .mc-menu__volet { position: absolute; top: 58px; right: 8px; }

  /* Le bouton "reduire" (desktop, dans .rail__entete) n'a pas de sens
     ici : .rail est deja un panneau coulissant. */
  .rail__reduire { display: none; }

  /* La barre laterale devient un vrai panneau, coulissant depuis la
     gauche : meme contenu, meme hierarchie qu'en desktop (rien de
     coupe), juste cache tant qu'on ne l'a pas ouvert. */
  .rail {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    /* dvh : sur un telephone, 100vh est la hauteur SANS la barre d'adresse
       rentree -- le bas du menu (« Se deconnecter ») passait sous l'ecran,
       hors d'atteinte. Le 100vh au-dessus reste pour les navigateurs qui
       ne connaissent pas dvh. */
    height: 100dvh;
    overscroll-behavior: contain;
    width: min(84vw, 300px);
    z-index: 60;
    transform: translateX(-100%);
    /* visibility : ferme, le panneau n'est plus atteignable au clavier ni
       lu par un lecteur d'ecran (il n'etait que decale hors de l'ecran) ;
       le delai la retire APRES la fin du glissement. */
    visibility: hidden;
    transition: transform var(--dur-base) var(--ease-standard), visibility 0s linear var(--dur-base);
    box-shadow: var(--shadow-subject);
  }
  .rail--ouvert {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--dur-base) var(--ease-standard), visibility 0s;
  }
  .rail__fermer {
    display: grid;
    place-items: center;
    align-self: flex-end;
    width: 44px;
    height: 44px;
    margin-bottom: calc(-1 * var(--space-xs));
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--action-tint);
    color: var(--brand-1);
    cursor: pointer;
  }
  .rail__fond {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(15,11,36,.45);
  }
  /* Menu ouvert : la page derriere ne defile plus (sinon un geste dans le
     menu faisait defiler la page en dessous). */
  body:has(.rail--ouvert) { overflow: hidden; }

  /* Cibles tactiles : 44px de haut au minimum (les boutons plus petits se
     manquaient au doigt). */
  .fuites__retirer, .checklist__bascule, .checklist-bascule { min-height: 44px; }

  .zone { padding: var(--space-lg) var(--space-md) var(--space-xxl); }
  /* Sans .barre-mobile (5 pages sur 7), « Mon compte » flotte au-dessus du
     contenu : on lui garde sa place, comme sur ordinateur, sinon il
     recouvre le coin de la premiere carte. */
  body:not(:has(.barre-mobile)) .zone { padding-top: 72px; }
  :root { --titre-page-taille: 30px; }
  .alerte__date { margin-left: 0; width: 100%; }
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .rail, .rail--ouvert { transition: none; }
}

/* Cibles tactiles : sur telephone et tablette (ecran de 860px ou moins, ou
   pointeur « grossier »), les boutons et pastilles font 44px de haut au
   moins -- en dessous, ils se manquaient au doigt. */
@media (max-width: 860px), (pointer: coarse) {
  .btn--small,
  .btn--medium,
  .veille-hero__action,
  .onglet,
  .comptes-switch__pastille,
  .solde__pastille,
  .fuites__retirer,
  .checklist__bascule,
  .reglage__modifier,
  .immo-ajouter { min-height: 44px; }
}

/* Bandeau d'etat centre en colonne sur telephone, comme les bandeaux Dark
   Web, Carte SIM et Immobilier : avant, celui-ci restait aligne a gauche. Au
   dela (tablette), logo et texte restent cote a cote. */
@media (max-width: 560px) {
  .veille-hero__haut { flex-direction: column; align-items: center; text-align: center; gap: var(--space-md); }
  .veille-hero__texte { align-items: center; flex: 0 0 auto; }
  .veille-hero__action { align-self: center; }
  .veille-hero__item { justify-content: center; }
}
/* Trois colonnes cote a cote tant qu'il y a la place : en dessous, une par ligne. */
@media (max-width: 900px) {
  .veille-hero__pied { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
}

/* Menu « Mon compte » : sa propre fiche porte la mention « (vous) ». */
.mc-menu__vous { font-weight: 400; color: var(--ink-muted-80); }

/* ── Bouée 3D de la carte Aide d'urgence : elle flotte de haut en bas, son ombre se resserre quand elle monte ── */
.bouee { position: relative; flex: 0 0 auto; display: inline-block; width: 152px; height: 166px; }
.bouee__img { position: absolute; left: 0; top: 0; width: 100%; height: auto; animation: bouee-flotte 3.4s ease-in-out infinite; transform-origin: 50% 55%; filter: drop-shadow(0 8px 10px rgba(120, 20, 50, .18)); }
.bouee__ombre {
  position: absolute; left: 14%; right: 14%; bottom: 0; height: 12px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(45, 26, 64, .34), rgba(45, 26, 64, 0));
  animation: bouee-ombre 3.4s ease-in-out infinite;
}
@keyframes bouee-flotte {
  0%, 100% { transform: translateY(8px) rotate(-2deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}
@keyframes bouee-ombre {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(.76); opacity: .55; }
}
@media (prefers-reduced-motion: reduce) { .bouee__img, .bouee__ombre { animation: none; } }
@media (max-width: 720px) { .bouee { width: 132px; height: 146px; } }

/* ── Lecture sur téléphone ──
   Texte courant : jamais un mot seul en dernière ligne ; titres équilibrés. js/typo.js pose en plus les espaces insécables
   (petits mots, ponctuation, nombres) là où text-wrap n'est pas pris en charge. Aucune taille, aucune couleur ne change. */
.zone :is(p, li, dd, figcaption, .checklist__nom, .checklist__detail, .carte__note, .promo__texte) { text-wrap: pretty; }
.zone :is(h1, h2, h3, h4) { text-wrap: balance; }