/* ══════════════════════════════════════════════════════════════════════════
   MUSOYAA — la feuille de style.
   Les couleurs viennent du monde Deniyaa — crème, corail, or, prune — avec
   le rose de Musoyaa en tête. Tout est arrondi, chaud, jamais clinique : une
   fille de quinze ans doit avoir envie d'y rester, pas l'impression d'entrer
   dans un dispensaire.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Baloo';font-weight:700;font-display:swap;
  src:url('../fonts/baloo-2-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Baloo';font-weight:800;font-display:swap;
  src:url('../fonts/baloo-2-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-weight:400;font-display:swap;
  src:url('../fonts/nunito-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-weight:700;font-display:swap;
  src:url('../fonts/nunito-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-weight:800;font-display:swap;
  src:url('../fonts/nunito-latin-800-normal.woff2') format('woff2')}

/* ══════════════════════════════════════════════════════════════════════════
   LES COULEURS, REMISES DANS L'IDENTITÉ.

   L'écran et les affiches ne parlaient pas la même langue. Le site avait un
   turquoise, un violet, un bleu et un corail orange ; l'emblème et les
   affiches n'ont que du bordeaux, de la prune, de la framboise, de la terre
   et de l'or. Tout est ramené dans cette famille-là.

   Et chaque valeur est CALCULÉE, pas choisie à l'œil : le contraste du
   texte sur son fond est mesuré et tenu au-dessus de 4,5:1. Les anciennes
   valeurs sont laissées en commentaire, avec leur contraste réel — c'est
   la meilleure explication de pourquoi elles sont parties.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --creme:#FFF7F1; --creme-2:#FFFCF8; --blanc:#FFFFFF;
  /* Le rose de Musoyaa n'est pas un rose bonbon : c'est la framboise et le
     bordeaux de l'emblème, avec l'or fin en filet. */
  --rose:#A81E52; --rose-nuit:#6E0F33; --rose-haut:#C93B6D;
  --rose-pale:#F6D8E1; --rose-voile:#FFF4F7;
  /* ancien --corail:#E2714E — 2,96:1 sur le crème : un ✕ qu'on ne voyait pas.
     La terre brûlée de nos affiches, elle, passe à 5,79:1. */
  --corail:#AE3A1C; --corail-pale:#F7DED4;
  --or:#DFAF5C; --or-fin:#C9A464; --or-pale:#FBF0D8;
  /* ancien --vert:#2FB68B — 2,42:1, un turquoise qui n'est nulle part dans
     l'identité. Remplacé par un vert profond et chaud, à 4,94:1. */
  --vert:#2E7A4E; --vert-pale:#DDF0E2;
  /* ancien --prune:#432A3D, un prune grisé. Celui-ci est celui des affiches,
     et il monte le confort de lecture de 12,1:1 à 15,1:1. */
  /* ancien --prune-3:#9C8494. Il ne tenait que 3,2 contre le crème, pour du
     texte de 12 à 13 px : les dates, les sources, les pieds de page et les
     écrans vides du site entier étaient sous la barre. #7F6876 est la même
     teinte prune, un cran plus sombre : 4,95 sur le crème clair, 4,78 sur le
     crème. Il reste nettement plus léger que --prune-2, donc la hiérarchie
     ne bouge pas. De nuit, la valeur était déjà bonne (4,81) : on n'y touche pas. */
  --prune:#3A1428; --prune-2:#6E4A60; --prune-3:#7F6876;
  --nuit:#2A0A1C;
  --ombre:0 14px 34px rgba(74,47,66,.10);
  --ombre-forte:0 22px 48px rgba(74,47,66,.18);
  --r-xl:34px; --r-l:26px; --r-m:20px; --r-s:14px;
  --marge:20px;
  --max:560px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{font-family:'Nunito',system-ui,sans-serif;background:var(--creme);color:var(--prune);
  line-height:1.5;overflow-x:hidden;padding-bottom:96px}
body.discret{overflow:hidden}
img,svg{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit;border:0;background:none}
button{cursor:pointer}
a{color:var(--rose-nuit);text-decoration:none}
a.lien{text-decoration:underline}

/* ── le décor : des taches de couleur douces, jamais un dégradé plat ─────── */
.decor{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.decor i{position:absolute;border-radius:50%;filter:blur(42px);opacity:.62;display:block}
.decor i:nth-child(1){width:58vw;height:58vw;left:-22vw;top:-16vw;background:var(--rose-pale)}
.decor i:nth-child(2){width:50vw;height:50vw;right:-20vw;top:22vh;background:var(--or-pale)}
.decor i:nth-child(3){width:64vw;height:64vw;left:-24vw;bottom:-10vh;background:var(--corail-pale)}
/* Une quatrième tache, verte, en plein milieu de page : avec seulement trois
   taches, le centre de la page (sous la grande carte) restait nu la plupart
   du temps. */
.decor i:nth-child(4){width:46vw;height:46vw;right:-16vw;top:70vh;background:var(--vert-pale)}

.page{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:0 var(--marge)}

/* ── l'en-tête ──────────────────────────────────────────────────────────── */
.haut{position:sticky;top:0;z-index:30;background:rgba(255,245,236,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid rgba(74,47,66,.07)}
.haut .in{max-width:var(--max);margin:0 auto;padding:12px var(--marge);
  display:flex;align-items:center;gap:12px}
.marque{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.marque img{height:34px;width:auto;flex:0 0 auto}
.marque b{font-family:'Baloo';font-weight:800;font-size:22px;letter-spacing:3px;
  color:var(--rose-nuit);line-height:1;display:block}
.marque span{font-size:10px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--prune-2);display:block;margin-top:2px}
/* Le bouton du menu : rond, discret, à gauche de « Sortir ». Il ne doit pas
   lui voler l'œil — Sortir reste le geste le plus important de l'en-tête. */
.menu-b{flex:0 0 auto;width:42px;height:42px;border-radius:999px;display:grid;
  place-items:center;background:rgba(74,47,66,.07);color:var(--prune)}
.menu-b svg{width:20px;height:20px}
.menu-b:active{background:rgba(74,47,66,.14)}

.sortir{flex:0 0 auto;background:var(--prune);color:#fff;border-radius:999px;
  padding:10px 18px;font-weight:800;font-size:14px;display:flex;align-items:center;gap:7px}
.sortir svg{width:15px;height:15px}

/* ── titres ─────────────────────────────────────────────────────────────── */
h1,h2,h3{font-family:'Baloo';font-weight:800;line-height:1.12;letter-spacing:-.4px}
h1{font-size:34px}
h2{font-size:25px}
h3{font-size:20px}
.sur{font-size:12px;font-weight:800;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--rose);margin:34px 0 12px;display:flex;align-items:center;gap:9px}
.sur:before{content:'';width:9px;height:9px;border-radius:50%;background:var(--or);flex:0 0 auto}
p{color:var(--prune-2);font-size:16.5px}
.gros{font-size:18px}

/* ── la grande carte d'accueil ──────────────────────────────────────────── */
.accroche{position:relative;margin-top:18px;border-radius:var(--r-xl);overflow:hidden;
  background:
    radial-gradient(120% 90% at 88% 6%,rgba(223,175,92,.30) 0%,rgba(223,175,92,0) 58%),
    linear-gradient(155deg,#9B1C48 0%,var(--rose-nuit) 48%,#4C0A23 100%);
  color:#fff;padding:24px 22px 22px;
  /* Un halo rose en dessous, en plus de l'ombre déjà validée : le bloc a
     l'air de flotter légèrement au-dessus du fond crème au lieu d'être
     simplement posé dessus. */
  box-shadow:var(--ombre-forte), 0 32px 60px -26px rgba(168,30,82,.45)}
/* Quand le bloc porte la photo de groupe, c'est elle qui touche les bords :
   le rembourrage descend alors dans le corps. */
.accroche.avec-photo{padding:0}
.accroche-corps{padding:18px 22px 22px;position:relative}
/* Une pluie de petits confettis, très doux, juste pour que le fond ne soit
   plus un aplat uni — l'esprit « confettis & bulles » qu'on avait validé
   sur les maquettes, posé ici sur le vrai bloc d'accueil. */
.accroche-corps:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(circle,rgba(223,175,92,.55) 2.6px,transparent 2.8px),
    radial-gradient(circle,rgba(255,255,255,.30) 2px,transparent 2.2px),
    radial-gradient(circle,rgba(223,175,92,.30) 1.8px,transparent 2px);
  background-size:64px 64px,46px 46px,80px 80px;
  background-position:8px 12px,34px 40px,54px 4px}
.accroche-corps>*{position:relative;z-index:1}
/* L'anneau décoratif passe en bas à gauche : la photo occupe le coin haut droit. */
.accroche:after{content:'';position:absolute;left:-84px;bottom:-104px;pointer-events:none;width:250px;height:250px;
  border-radius:50%;border:28px solid rgba(255,255,255,.12);z-index:0}
.accroche>*{position:relative;z-index:1}
.accroche-mots{min-width:0}
.accroche .jour{font-size:10.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  white-space:nowrap;color:#F3DCAE;opacity:.92}
.accroche h1{margin-top:9px;font-size:clamp(26px,7.2vw,36px);line-height:1.08;color:#fff;
  letter-spacing:-.4px;text-wrap:balance}
.accroche h1{hyphens:none;-webkit-hyphens:none}
.accroche h1 .salut{display:block;white-space:nowrap}
.accroche h1 .salut.long{font-size:.70em}
.accroche h1 .salut.tres-long{font-size:.54em;letter-spacing:0}
.accroche h1 em{display:block;font-style:normal;color:#F3DCAE}
.accroche p{color:rgba(255,255,255,.92);margin-top:10px;font-size:14px;line-height:1.45}
.accroche-mots p{color:rgba(255,255,255,.92)}

/* ══ L'ACCUEIL, VERSION « CONFETTIS & BULLES » ═══════════════════════════
   La maquette qu'on a choisie : la photo prend tout le haut de l'écran, le
   titre est écrit DESSUS elle (pas à côté, pas en dessous), et la carte des
   deux boutons est posée à cheval sur son bord bas — comme un ticket qui
   déborde. Beaucoup plus photo, beaucoup moins aplat de couleur. */
.accroche-photo{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden}
.accroche-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
/* Le voile remplace l'ancien fondu en mask-image : il fait la même chose
   (assombrir le bas pour que le texte blanc reste lisible) mais en dégradé
   de couleur de marque plutôt qu'en simple noir — plus chaud, plus « habillé ». */
.ap-voile{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(53,10,34,.94) 0%,rgba(78,15,45,.55) 38%,
    rgba(78,15,45,.08) 64%,rgba(78,15,45,0) 80%)}
/* Les mêmes confettis très doux que sur la maquette validée, posés sur la
   photo elle-même cette fois. */
.ap-voile:after{content:'';position:absolute;inset:0;opacity:.5;
  background-image:
    radial-gradient(circle,rgba(223,175,92,.8) 2.6px,transparent 2.8px),
    radial-gradient(circle,rgba(255,255,255,.5) 2px,transparent 2.2px);
  background-size:60px 60px,42px 42px;background-position:10px 14px,32px 46px}
.ap-mots{position:absolute;left:22px;right:22px;bottom:48px;z-index:2}
.ap-mots .jour{font-size:10.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  white-space:nowrap;color:#F3DCAE;opacity:.95}
.ap-mots h1{margin-top:9px;font-size:clamp(28px,8.6vw,40px);line-height:1.05;color:#fff;
  letter-spacing:-.4px;text-wrap:balance;hyphens:none;-webkit-hyphens:none}
.ap-mots h1 .salut{display:block;white-space:nowrap}
.ap-mots h1 .salut.long{font-size:.70em}
.ap-mots h1 .salut.tres-long{font-size:.54em;letter-spacing:0}
.ap-mots h1 em{display:block;font-style:normal;color:#F3DCAE}
.ap-mots p{color:rgba(255,255,255,.94);margin-top:10px;font-size:14.5px;line-height:1.48;max-width:30ch}
@media (min-width:460px){ .accroche-photo{aspect-ratio:16/11} }
/* Le badge n'est plus une étiquette posée à plat : c'est un petit médaillon
   doré, légèrement penché, dans le coin de la photo — comme un sceau. C'est
   le détail « bijou » qui manquait pour que la page ait l'air dessinée, pas
   seulement habillée. */
.accroche-photo figcaption{position:absolute;right:16px;top:16px;left:auto;z-index:2;
  width:78px;height:78px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:9px;
  font-size:9.5px;font-weight:800;letter-spacing:.4px;line-height:1.2;
  text-transform:uppercase;color:#4A2806;
  background:radial-gradient(circle at 34% 28%,#FBE7BE 0%,var(--or) 52%,#B4812E 100%);
  box-shadow:0 12px 24px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.55);
  transform:rotate(-9deg)}
@media (min-width:460px){ .accroche-photo{aspect-ratio:16/9} }

/* Les deux boutons dessous : côte à côte s'il y a la place, l'un sous l'autre sinon. */
.accroche-boutons{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.accroche-boutons .bouton{flex:1 1 132px;justify-content:center;white-space:nowrap;
  margin-top:0;font-size:14.5px;padding:13px 14px}
.accroche-boutons .bouton svg{width:17px;height:17px}
.accroche-foi{display:flex;align-items:center;gap:8px;margin-top:14px;
  font-size:12.5px;font-weight:700;color:rgba(255,255,255,.85)}
.accroche-foi svg{width:15px;height:15px;flex:0 0 auto;color:#F3DCAE}

/* La carte des deux boutons déborde sur le bas de la photo (marge négative) :
   c'est elle qui fait le lien entre l'image et le reste de la page, au lieu
   d'un bloc de couleur posé juste en dessous. */
/* Un seul bouton fort (l'action qu'on veut vraiment), qui chevauche le bas
   de la photo comme une carte posée dessus — et en dessous, un lien plus
   discret pour « comment ça marche ». Plus de carte blanche plate : le
   bouton plein porte sa propre lumière (dégradé + lueur dorée + reflet qui
   balaie une seule fois au chargement, pas une boucle). */
.ap-actions{position:relative;margin:-27px 22px 0;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:12px}
.ap-actions .bouton.grand{width:100%;justify-content:center;margin-top:0;
  font-size:16.5px;padding:18px 22px;gap:10px;letter-spacing:-.1px}
.ap-actions .bouton.grand span{position:relative;z-index:1}
.ap-actions .bouton.grand svg{width:19px;height:19px;position:relative;z-index:1}
.ap-actions .bouton.plein.grand{overflow:hidden;
  box-shadow:0 20px 38px -10px rgba(110,15,51,.55),
    0 0 0 5px rgba(223,175,92,.16), inset 0 1px 0 rgba(255,255,255,.3)}
/* Le reflet : un seul passage, orchestré au chargement de la page — pas un
   effet qui boucle sans fin, qui fatiguerait l'œil plus qu'il n'impressionne. */
.ap-actions .bouton.plein.grand:before{content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
  background-size:260% 100%;background-position:160% 0;animation:ap-brille 2.4s .5s 1 both}
@keyframes ap-brille{ 0%{background-position:160% 0} 60%{background-position:-60% 0} 100%{background-position:-60% 0} }
.ap-secondaire{display:inline-flex;align-items:center;gap:5px;color:rgba(255,255,255,.92);
  font-family:'Baloo';font-weight:700;font-size:14.5px;padding:2px 2px 4px;
  border-bottom:1.5px solid rgba(255,255,255,.4)}
.ap-secondaire b{font-weight:700;transition:transform .15s ease}
.ap-secondaire:active b{transform:translateX(3px)}
.accroche.avec-photo{padding-bottom:24px}
/* Elle est posée sur le fond bordeaux de la grande carte (pas sur du blanc) :
   il lui faut donc un texte clair, comme le reste du bloc — le prune-2 que
   j'avais mis ici était presque invisible sur ce fond, une vraie faute de
   contraste que j'ai rattrapée avant de te l'envoyer. */
.ap-foi{display:flex;align-items:center;gap:8px;margin:14px 22px 0;
  font-size:12.5px;font-weight:700;color:rgba(255,255,255,.88)}
.ap-foi svg{width:15px;height:15px;flex:0 0 auto;color:#F3DCAE}
.bouton{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--rose-nuit);
  font-family:'Baloo';font-weight:800;font-size:18px;border-radius:999px;padding:15px 28px;
  margin-top:20px;position:relative;letter-spacing:-.1px;
  /* L'ombre colorée en dessous donne du poids au bouton ; le filet clair en
     haut (inset) lui donne un léger relief, sans jamais toucher au contraste
     du texte, qui reste celui déjà validé. */
  box-shadow:0 14px 28px rgba(60,10,40,.26), inset 0 1px 0 rgba(255,255,255,.7)}
.bouton.plein{background:linear-gradient(150deg,var(--rose-haut) 0%,var(--rose) 48%,#8A1545 78%,var(--rose-nuit) 100%);
  color:#fff;box-shadow:0 16px 30px rgba(168,30,82,.42), inset 0 1px 0 rgba(255,255,255,.25)}
.bouton.or{background:linear-gradient(150deg,#F4D49B 0%,var(--or) 46%,#C4903B 100%);color:#5A3208;
  box-shadow:0 16px 30px rgba(196,144,59,.40), inset 0 1px 0 rgba(255,255,255,.5)}
.bouton svg{width:19px;height:19px}
/* L'appui enfonce légèrement le bouton : geste tactile, pas juste visuel. */
.bouton:active{box-shadow:0 6px 14px rgba(60,10,40,.22), inset 0 1px 0 rgba(255,255,255,.3)}

/* ── l'urgence ──────────────────────────────────────────────────────────── */
.urgence{display:flex;align-items:center;gap:14px;margin-top:14px;background:var(--blanc);
  border-radius:var(--r-l);padding:16px 18px;box-shadow:var(--ombre);
  border:2px solid var(--rose-pale)}
.urgence .rond{width:52px;height:52px;border-radius:50%;flex:0 0 auto;display:grid;
  place-items:center;background:linear-gradient(150deg,var(--rose-haut),var(--rose-nuit));
  box-shadow:0 8px 16px rgba(168,30,82,.30),inset 0 1px 0 rgba(255,255,255,.35),
  0 0 0 4px var(--rose-voile)}
.urgence .rond svg{width:24px;height:24px;color:#fff}
.urgence b{font-family:'Baloo';font-weight:800;font-size:18px;display:block}
.urgence span{font-size:14px;color:var(--prune-2)}
.urgence .fleche{margin-left:auto;color:var(--rose)}

/* ── l'humeur ───────────────────────────────────────────────────────────── */
.humeurs{display:flex;gap:9px;overflow-x:auto;padding:2px 2px 8px;
  scrollbar-width:none;-ms-overflow-style:none}
.humeurs::-webkit-scrollbar{display:none}
.humeur{flex:0 0 auto;background:var(--blanc);border:2px solid rgba(74,47,66,.08);
  border-radius:999px;padding:11px 18px;font-weight:700;font-size:15px;display:flex;
  align-items:center;gap:8px;box-shadow:0 6px 16px rgba(74,47,66,.05);transition:transform .15s}
.humeur.on{background:linear-gradient(150deg,var(--rose-haut),var(--rose-nuit));color:#fff;
  border-color:transparent;box-shadow:0 10px 22px rgba(168,30,82,.32);transform:translateY(-1px)}
.humeur .e{font-size:17px}

/* ── la grille des rubriques ────────────────────────────────────────────── */
.grille{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.tuile{position:relative;border-radius:var(--r-l);padding:18px 16px 16px;overflow:hidden;
  color:#fff;min-height:132px;display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:var(--ombre),0 10px 22px -12px rgba(0,0,0,.35);text-align:left}
/* Un voile de lumière en diagonale, par-dessus le dégradé de couleur de
   chaque tuile (posé en ligne, dans le JS) : juste assez de verre bombé
   pour que la couleur ne soit plus tout à fait plate, sans gêner la lecture
   du titre, qui reste au-dessus (z-index + position relative déjà en place). */
.tuile:before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,0) 48%)}
.tuile:after{content:'';position:absolute;right:-34px;top:-40px;width:120px;height:120px;
  border-radius:50%;background:rgba(255,255,255,.13)}
.tuile .ic{position:absolute;top:14px;left:16px;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.24);display:grid;place-items:center;font-size:21px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 3px rgba(255,255,255,.14)}
.tuile .ic svg{width:25px;height:25px;display:block;color:#fff}
.tuile b{font-family:'Baloo';font-weight:800;font-size:18px;line-height:1.1;position:relative}
.tuile span{font-size:13px;opacity:.9;margin-top:3px;position:relative;line-height:1.3}
.tuile.large{grid-column:1 / -1;min-height:104px}
/* Une toute petite bascule, en quinconce, sur la grille des sujets — comme
   des cartes posées à la main plutôt qu'imprimées à la règle. Discret : on
   le sent plus qu'on ne le voit, et il s'efface au survol/à l'appui, pour
   que rien ne tremble quand on touche la tuile. */
.grille .tuile:nth-child(4n+1){transform:rotate(-1.1deg)}
.grille .tuile:nth-child(4n+2){transform:rotate(.9deg)}
.grille .tuile:nth-child(4n+3){transform:rotate(-.7deg)}
.grille .tuile:nth-child(4n+4){transform:rotate(1.1deg)}
.grille .tuile:active{transform:scale(.97)}

/* ── les cartes blanches ────────────────────────────────────────────────── */
/* Avant : une carte blanche toute simple, ombre plate. Un petit filet d'or
   en haut — la signature des affiches de la marque — suffit à faire sentir
   que la carte appartient à Musoyaa, sans en faire trop. */
.carte{position:relative;background:var(--blanc);border-radius:var(--r-l);padding:20px 20px 20px 22px;
  box-shadow:var(--ombre);margin-top:13px;overflow:hidden}
.carte:before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--or),var(--rose))}
.carte.doux{background:var(--creme-2)}
.carte.doux:before{background:linear-gradient(180deg,var(--or-fin),var(--or))}
.carte h3{margin-bottom:8px}
.carte p+p{margin-top:9px}

/* ── le choix de l'âge ──────────────────────────────────────────────────── */
.ages{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.age{text-align:left;background:var(--creme-2);border:2px solid rgba(74,47,66,.09);
  border-radius:var(--r-m);padding:12px 14px}
.age b{display:block;font-family:'Baloo';font-weight:800;font-size:15.5px;color:var(--prune)}
.age span{display:block;font-size:12.5px;color:var(--prune-2);margin-top:1px}
.age.on{background:var(--rose-voile);border-color:var(--rose)}
.age.on b{color:var(--rose-nuit)}

/* ── l'école : les étapes et les séances ────────────────────────────────── */
.etapes{list-style:none;counter-reset:e;display:flex;flex-direction:column;gap:12px;margin-top:13px}
.etapes li{counter-increment:e;display:flex;gap:14px;background:var(--blanc);
  border-radius:var(--r-l);padding:16px 18px;box-shadow:var(--ombre)}
.etapes li:before{content:counter(e);flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;font-family:'Baloo';font-weight:800;font-size:16px;
  color:#fff;background:linear-gradient(150deg,var(--rose-haut),var(--rose-nuit))}
.etapes b{font-family:'Baloo';font-weight:800;font-size:16.5px;display:block;color:var(--prune)}
.etapes p{font-size:14.5px;color:var(--prune-2);margin-top:3px}

/* Avant : une liste à plat, un filet gris entre chaque ligne. Chaque minutage
   porte maintenant un vrai badge de temps, en pastille colorée. */
.minutage{list-style:none;margin-top:13px;display:flex;flex-direction:column;gap:9px}
.minutage li{display:flex;gap:14px;padding:14px 16px;align-items:center;background:var(--blanc);
  border-radius:var(--r-m);box-shadow:0 6px 16px rgba(74,47,66,.06)}
.minutage .temps{flex:0 0 auto;min-width:46px;text-align:center;font-family:'Baloo';font-weight:800;
  font-size:13px;color:var(--rose-nuit);background:var(--rose-voile);border-radius:999px;
  padding:6px 10px}
.minutage b{display:block;font-size:15.5px;color:var(--prune)}
.minutage span{display:block;font-size:14px;color:var(--prune-2);margin-top:2px}

.deux-colonnes{display:grid;gap:13px;margin-top:13px}
@media (min-width:620px){ .deux-colonnes{grid-template-columns:1fr 1fr} }
/* Les deux colonnes « oui / non » : un bandeau de couleur pleine en haut,
   pas juste un filet — ça se lit d'un coup d'œil, même en diagonale. */
.colonne{background:var(--blanc);border-radius:var(--r-l);padding:0;box-shadow:var(--ombre);overflow:hidden}
.colonne .tete{padding:14px 18px;color:#fff;display:flex;align-items:center;gap:9px}
.colonne .tete b{font-family:'Baloo';font-weight:800;font-size:16.5px}
.colonne.oui .tete{background:linear-gradient(150deg,var(--vert),#1F5C3A)}
.colonne.non .tete{background:linear-gradient(150deg,var(--corail),#7C2E12)}
.colonne ul{list-style:none;display:flex;flex-direction:column;gap:10px;padding:16px 18px 18px}
.colonne li{font-size:14.5px;color:var(--prune-2);padding-left:24px;position:relative}
.colonne li:before{position:absolute;left:0;top:0;font-weight:800}
.colonne.oui li:before{content:'✓';color:var(--vert)}
.colonne.non li:before{content:'✕';color:var(--corail)}

/* ── le serment : les quatre promesses ──────────────────────────────────── */
/* Avant : une liste blanche, un filet de couleur en bordure — presque un
   formulaire. Maintenant : quatre cartes à part entière, chacune teintée de
   sa couleur, avec un grand médaillon d'icône — pensé pour qu'on ait envie
   de les lire une par une, pas pour les traverser vite. */
.serment ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:13px}
.serment li{display:flex;gap:16px;align-items:center;padding:19px 20px;position:relative;
  border-radius:var(--r-l);
  background:color-mix(in srgb,var(--teinte) 9%,var(--creme-2));
  box-shadow:0 10px 24px -8px color-mix(in srgb,var(--teinte) 35%,transparent)}
.serment .signe{flex:0 0 auto;width:52px;height:52px;border-radius:50%;display:grid;
  place-items:center;color:#fff;background:linear-gradient(150deg,var(--teinte),
  color-mix(in srgb,var(--teinte) 65%,#000));
  box-shadow:0 8px 16px color-mix(in srgb,var(--teinte) 45%,transparent),
  inset 0 1px 0 rgba(255,255,255,.35)}
.serment .signe svg{width:24px;height:24px}
.serment li b{font-family:'Baloo';font-weight:800;font-size:17.5px;display:block;
  color:var(--prune);letter-spacing:-.2px}
.serment li p{margin-top:4px;font-size:14.5px;line-height:1.5;color:var(--prune-2)}
.serment-pied{margin-top:12px;padding:13px 20px;font-size:13px;font-weight:700;text-align:center;
  color:var(--prune-2);background:var(--creme-2);border-radius:999px}

.liste{list-style:none;display:flex;flex-direction:column;gap:13px;margin-top:12px}
.liste li{display:flex;gap:13px;align-items:flex-start}
.liste .pastille{flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(150deg,var(--rose-haut),var(--rose-nuit));
  color:#fff;font-family:'Baloo';font-weight:800;font-size:14.5px;display:grid;
  place-items:center;margin-top:1px;box-shadow:0 6px 12px rgba(168,30,82,.28)}
.liste b{display:block;font-size:16px;font-family:'Baloo';font-weight:700}
.liste span{font-size:15px;color:var(--prune-2);line-height:1.45}

/* « En bref » : des pastilles rondes de couleur, en quinconce, plutôt que
   des bandeaux tous identiques — la première chose qu'on lit sur une fiche
   mérite un peu plus de caractère qu'un bloc administratif. */
.bref{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.bref div{background:var(--rose-voile);border-radius:var(--r-l);padding:14px 18px;
  font-weight:700;font-size:15.5px;color:var(--prune);position:relative;padding-left:44px}
.bref div:before{content:'✦';position:absolute;left:16px;top:14px;color:var(--or);font-size:16px}
.bref div:nth-child(2n){background:var(--or-pale)}
.bref div:nth-child(2n):before{color:var(--corail)}
.bref div:nth-child(3n){background:var(--vert-pale)}
.bref div:nth-child(3n):before{color:var(--vert)}

.alerte{background:linear-gradient(150deg,#FFF1E8,#FFE4D6);border:2px solid var(--corail);
  border-radius:var(--r-l);padding:18px;margin-top:14px}
.alerte b{font-family:'Baloo';font-weight:800;font-size:18px;color:#9A3C13;display:block;
  margin-bottom:6px}
.alerte p{color:#7C3714}
/* Le <b> de l'encadré est son titre, et il est en bloc. Mais un <b> AU MILIEU
   d'une phrase héritait de la même règle et cassait la ligne en trois : même
   piège que « .marche b » en son temps. On lui rend son rang d'élément en
   ligne, et deux paragraphes voisins reprennent de l'air. */
.alerte p b{display:inline;font-family:inherit;font-size:inherit;color:inherit;
  font-weight:800;margin:0}
.alerte p + p{margin-top:9px}

/* ── questions / réponses ───────────────────────────────────────────────── */
.qr{background:var(--blanc);border-radius:var(--r-m);margin-top:10px;overflow:hidden;
  box-shadow:0 8px 20px rgba(74,47,66,.06)}
.qr summary{list-style:none;cursor:pointer;padding:16px 18px;font-weight:800;font-size:16px;
  display:flex;gap:12px;align-items:flex-start}
.qr summary::-webkit-details-marker{display:none}
.qr summary:before{content:'?';flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:var(--or-pale);color:#8A5A00;font-family:'Baloo';font-weight:800;display:grid;
  place-items:center;font-size:15px}
.qr p{padding:0 18px 18px 56px;font-size:15.5px}
.qr[open] summary{color:var(--rose-nuit)}

/* ── le chat ────────────────────────────────────────────────────────────── */
.fil{display:flex;flex-direction:column;gap:11px;padding:14px 0 8px}
.bulle{max-width:82%;padding:13px 17px;border-radius:22px;font-size:16px;line-height:1.46;
  box-shadow:0 6px 16px rgba(74,47,66,.07);white-space:pre-wrap;overflow-wrap:anywhere}
.bulle.elle{align-self:flex-end;background:linear-gradient(150deg,var(--rose-haut),var(--rose));
  color:#fff;border-bottom-right-radius:7px}
.bulle.nous{align-self:flex-start;background:var(--blanc);border-bottom-left-radius:7px}
.bulle.ia{align-self:flex-start;background:var(--or-pale);border-bottom-left-radius:7px}
.bulle .qui{font-size:11px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  opacity:.66;display:block;margin-bottom:4px}
.saisie{position:fixed;left:0;right:0;bottom:78px;z-index:25;background:rgba(255,245,236,.94);
  backdrop-filter:blur(12px);border-top:1px solid rgba(74,47,66,.07);padding:10px var(--marge)}
.saisie .in{max-width:var(--max);margin:0 auto;display:flex;gap:9px;align-items:flex-end}
.saisie textarea{flex:1;background:var(--blanc);border:2px solid rgba(74,47,66,.09);
  border-radius:22px;padding:12px 16px;font-size:16px;resize:none;max-height:120px;
  min-height:48px;line-height:1.4}
.saisie textarea:focus{outline:none;border-color:var(--rose)}
.envoyer{flex:0 0 auto;width:48px;height:48px;border-radius:50%;
  background:linear-gradient(150deg,var(--rose-haut),var(--rose-nuit));display:grid;place-items:center}
.envoyer svg{width:21px;height:21px}
.choix{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.choix button{background:var(--blanc);border:2px solid var(--rose-pale);border-radius:999px;
  padding:10px 16px;font-weight:700;font-size:14.5px;color:var(--rose-nuit)}

/* ── barre du bas ───────────────────────────────────────────────────────── */
/* Avant : une simple bande plate collée en bas, avec juste un voile rose
   derrière l'icône active. Maintenant : elle flotte légèrement au-dessus de
   la page (coins arrondis, ombre vers le haut) et l'onglet actif porte un
   vrai petit galet en dégradé — le même langage que les boutons et les
   tuiles, plutôt qu'une bande administrative. */
.barre{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(255,251,246,.96);
  backdrop-filter:blur(16px);border-top:1px solid rgba(74,47,66,.07);
  border-radius:22px 22px 0 0;
  box-shadow:0 -14px 32px -14px rgba(58,20,40,.18);
  padding:9px 0 calc(8px + env(safe-area-inset-bottom))}
.barre .in{max-width:var(--max);margin:0 auto;display:flex}
.barre a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:11px;font-weight:800;color:var(--prune-3);text-decoration:none;padding:4px 0;
  transition:color .18s}
.barre a svg{width:22px;height:22px;transition:transform .18s}
.barre a.on{color:var(--rose-nuit)}
.barre a.on svg{transform:translateY(-1px)}
.barre a.on .rond{background:linear-gradient(150deg,var(--rose-haut),var(--rose));
  box-shadow:0 6px 14px rgba(168,30,82,.38),inset 0 1px 0 rgba(255,255,255,.4)}
.barre a.on .rond svg{color:#fff}
.barre a .rond{width:46px;height:26px;border-radius:999px;display:grid;place-items:center;
  transition:background .18s,box-shadow .18s}

/* ── divers ─────────────────────────────────────────────────────────────── */
.retour{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--rose-nuit);
  margin:16px 0 4px;font-size:15px}
.retour svg{width:17px;height:17px}
.chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.chiffre{background:var(--blanc);border-radius:26px;padding:22px 10px 16px;text-align:center;
  box-shadow:var(--ombre);border-top:6px solid var(--rose-voile);position:relative;overflow:visible}
/* Trois teintes très pâles de la même famille de couleurs, une par chiffre,
   et une petite perle de couleur à cheval sur le bord du haut — un détail de
   bijou plutôt qu'un simple filet, pour que la rangée ait l'air dessinée. */
.chiffre:before{content:'';position:absolute;left:50%;top:-8px;transform:translateX(-50%);
  width:15px;height:15px;border-radius:50%;box-shadow:0 4px 9px rgba(0,0,0,.20),
  inset 0 1px 0 rgba(255,255,255,.6)}
.chiffre:nth-child(1){background:var(--rose-voile);border-top-color:var(--rose)}
.chiffre:nth-child(1):before{background:var(--rose)}
.chiffre:nth-child(2){background:var(--or-pale);border-top-color:var(--or)}
.chiffre:nth-child(2):before{background:var(--or)}
.chiffre:nth-child(3){background:var(--vert-pale);border-top-color:var(--vert)}
.chiffre:nth-child(3):before{background:var(--vert)}
.chiffre b{font-family:'Baloo';font-weight:800;font-size:27px;color:var(--rose-nuit);display:block;
  line-height:1}
.chiffre span{font-size:12px;color:var(--prune-2);line-height:1.3;display:block;margin-top:6px}
.chiffre i{display:block;font-style:normal;font-size:10.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--prune-3);margin-top:7px}
.source{font-size:12px;color:var(--prune-3);margin-top:10px;text-align:center}
.champ{width:100%;background:var(--creme-2);border:2px solid transparent;
  border-radius:var(--r-m);padding:13px 16px;font-size:16px;margin-top:10px;
  transition:border-color .15s,background .15s}
.champ:focus{outline:none;border-color:var(--rose);background:var(--blanc)}
.champ::placeholder{color:var(--prune-3)}
.puce{display:inline-block;background:var(--vert-pale);color:#1F5C3A;font-weight:800;
  font-size:12px;letter-spacing:1.4px;text-transform:uppercase;border-radius:999px;
  padding:6px 12px}
.vide{text-align:center;padding:40px 20px;color:var(--prune-3)}

/* ── le mode discret : une calculatrice ─────────────────────────────────── */
.calc{position:fixed;inset:0;z-index:100;background:#1C1C1E;display:none;
  flex-direction:column;justify-content:flex-end;padding:20px}
.calc.on{display:flex}
.calc .ecran{color:#fff;font-size:64px;text-align:right;padding:20px 14px 26px;font-weight:300;
  font-family:system-ui,sans-serif;overflow:hidden}
.calc .touches{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.calc button{aspect-ratio:1;border-radius:50%;background:#333;color:#fff;font-size:28px;
  font-family:system-ui,sans-serif}
.calc button.g{background:#A5A5A5;color:#000}
.calc button.o{background:#FF9F0A}
.calc button.z{aspect-ratio:auto;grid-column:span 2;border-radius:999px}

@media (min-width:620px){ :root{--marge:24px} h1{font-size:38px} }
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ══════════════════ AJOUTS D'APRÈS L'AUDIT ══════════════════ */

/* le voile : entrée, verrou */
.voile{position:fixed;inset:0;z-index:120;background:rgba(42,26,40,.55);backdrop-filter:blur(8px);
  display:grid;place-items:center;padding:24px}
.feuille{background:var(--creme-2);border-radius:var(--r-xl);padding:32px 26px 26px;width:100%;
  max-width:420px;text-align:center;box-shadow:var(--ombre-forte)}
.feuille h2{margin-top:6px}
.feuille p{margin-top:10px}
.feuille .bouton{width:100%;justify-content:center;margin-top:20px}
.gros-ic{font-size:48px;line-height:1}
.points{display:flex;gap:7px;justify-content:center;margin-top:20px}
.points i{width:8px;height:8px;border-radius:50%;background:var(--rose-pale);display:block}
.points i.on{background:var(--rose);width:22px;border-radius:999px}
.lien-doux{display:block;width:100%;margin-top:12px;color:var(--prune-2);font-weight:700;
  font-size:15px;padding:8px}
.secoue{animation:secoue .35s}
@keyframes secoue{0%,100%{transform:none}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

/* la recherche */
.chercher{display:flex;align-items:center;gap:11px;background:var(--blanc);border-radius:999px;
  padding:13px 18px;margin-top:16px;box-shadow:var(--ombre)}
.chercher svg{width:19px;height:19px;color:var(--rose);flex:0 0 auto}
.chercher input{flex:1;font-size:16px;background:none}
.chercher input:focus{outline:none}

/* les outils d'une fiche */
.outils{display:flex;gap:9px;margin-top:14px}
.outil{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--blanc);
  border:2px solid rgba(74,47,66,.08);border-radius:999px;padding:12px 14px;font-weight:800;
  font-size:15px;color:var(--prune);box-shadow:0 6px 16px rgba(74,47,66,.05);transition:transform .15s}
.outil svg{width:18px;height:18px}
.outil.on{background:linear-gradient(150deg,var(--rose-haut),var(--rose-nuit));
  border-color:transparent;color:#fff;box-shadow:0 10px 22px rgba(168,30,82,.32);
  transform:translateY(-1px)}

/* les quiz */
.coche{display:flex;gap:13px;align-items:flex-start;padding:11px 0;cursor:pointer;
  border-bottom:1px solid rgba(74,47,66,.06)}
.coche:last-child{border:0}
.coche input{appearance:none;flex:0 0 auto;width:24px;height:24px;border-radius:8px;
  border:2.5px solid var(--rose-pale);margin-top:2px;background:#fff}
.coche input:checked{background:var(--rose) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/16px no-repeat;
  border-color:var(--rose)}
.coche span{font-size:16px;color:var(--prune);font-weight:600}

/* le chat : onglets, micro, attente, code */
.onglets{display:flex;gap:9px;margin:18px 0 4px}
.onglets .humeur{flex:1;justify-content:center}
.micro{flex:0 0 auto;width:48px;height:48px;border-radius:50%;background:var(--blanc);
  border:2px solid rgba(74,47,66,.10);display:grid;place-items:center;color:var(--prune-2)}
.micro svg{width:21px;height:21px}
.micro.rouge{background:var(--rose);border-color:var(--rose);color:#fff;
  animation:pulse 1.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(232,64,127,.18)}}
.etat{font-size:13.5px;color:var(--prune-2);text-align:center;padding:8px 0 2px}
.points-attente{display:inline-flex;gap:5px;align-items:center;height:20px}
.points-attente i{width:7px;height:7px;border-radius:50%;background:var(--prune-3);display:block;
  animation:saut 1.1s infinite}
.points-attente i:nth-child(2){animation-delay:.15s}
.points-attente i:nth-child(3){animation-delay:.3s}
@keyframes saut{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-5px);opacity:1}}
.bulle audio{width:220px;max-width:100%}
.puce.gris{background:rgba(74,47,66,.09);color:var(--prune-2)}
.puce.or{background:var(--or-pale);color:#8A5A00}
.code{font-family:ui-monospace,'SF Mono',monospace;font-size:30px;font-weight:800;
  letter-spacing:4px;color:var(--rose-nuit);background:var(--rose-voile);border-radius:var(--r-m);
  padding:16px;text-align:center;margin-top:12px}
.choix button.on{background:var(--rose);border-color:var(--rose);color:#fff}

/* confort et sécurité */
body.grand{font-size:18.5px}
body.grand .bulle,body.grand p,body.grand .liste span{font-size:18px}
body.grand h1{font-size:31px}
body.grand .tuile b{font-size:19px}
body.flou .page,body.flou .haut,body.flou .barre{filter:blur(18px)}
:focus-visible{outline:3px solid var(--rose);outline-offset:3px;border-radius:8px}
@media (max-width:340px){ :root{--marge:14px} h1{font-size:29px} .tuile{min-height:120px} }

/* ══════════════════ ACCESSIBILITÉ ET FINITIONS ══════════════════ */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.evitement{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--rose);color:#fff;
  padding:12px 18px;border-radius:999px;font-weight:800}
.evitement:focus{left:16px}
.maj{position:fixed;left:16px;right:16px;bottom:92px;z-index:60;background:var(--prune);
  color:#fff;border-radius:999px;padding:14px 18px;font-weight:800;font-size:15px;
  box-shadow:var(--ombre-forte);max-width:520px;margin:0 auto}
.bouton,.humeur,.outil,.tuile,.choix button{transition:transform .12s ease, filter .12s ease}
.bouton:active,.humeur:active,.outil:active,.tuile:active,.choix button:active{transform:scale(.97)}
.tuile:active{filter:brightness(1.06)}
button:disabled{opacity:.55}
audio{border-radius:999px}

/* ══════════════════ LA NUIT ══════════════════
   Beaucoup de filles ouvriront Musoyaa tard, dans le noir, sous un drap. Un
   écran crème à trois heures du matin éclaire toute la chambre — et se voit
   de loin. Le mode sombre n'est pas une coquetterie ici : c'est une
   protection. Il suit le réglage du téléphone. */
@media (prefers-color-scheme: dark){
  :root{
    --creme:#20141E; --creme-2:#2A1A28; --blanc:#2A1A28;
    --rose:#E86A93; --rose-nuit:#F5A0BE; --rose-haut:#D9587F;
    --rose-pale:#4A2038; --rose-voile:#33202E;
    --corail:#FF9A73; --corail-pale:#4A2A20;
    --or:#E9C077; --or-fin:#D9B87E; --or-pale:#463420;
    --vert:#6FBF8E; --vert-pale:#1E3226;
    --prune:#F7ECF2; --prune-2:#C9B3C1; --prune-3:#9A8592;
    --ombre:0 14px 34px rgba(0,0,0,.35);
    --ombre-forte:0 22px 48px rgba(0,0,0,.5);
  }
  body{background:var(--creme)}
  .decor i{opacity:.22}
  .sortir{background:var(--rose);color:#2A1020}
  .accroche .bouton{background:#2A1020;color:#FFD3E4}
  .accroche .bouton.or{background:linear-gradient(150deg,var(--or),#C4903B);color:#4A2806}
  .haut{background:rgba(32,20,30,.88);border-bottom-color:rgba(255,255,255,.07)}
  .etapes li,.minutage,.colonne{background:#2A1A28}
  .age{background:#33202E;border-color:rgba(255,255,255,.10)}
  .age.on{background:rgba(232,64,127,.18);border-color:var(--rose)}
  .minutage li+li{border-color:rgba(255,255,255,.10)}
  .serment-pied{background:#33202E}
  .menu-b{background:#33202E;color:var(--prune)}
  .mn-groupe{background:#2A1A28}
  .mn-l + .mn-l{border-color:rgba(255,255,255,.08)}
  /* Le bandeau de chaque famille est maintenant un bloc de couleur avec du
     texte blanc dessus (plus une couleur de texte sur fond crème) : les
     teintes par défaut (assez soutenues) restent lisibles de jour comme de
     nuit, donc plus besoin de les éclaircir ici. Seul le fond pâle des
     puces du sommaire doit rester discret sur fond sombre. */
  .mn-parler{--fam-pale:rgba(240,140,176,.14)}
  .mn-savoir{--fam-pale:rgba(233,192,119,.14)}
  .mn-autour{--fam-pale:rgba(255,154,115,.14)}
  .mn-moi   {--fam-pale:rgba(201,179,193,.12)}
  .mn-chip{background:#2A1A28}
  .mn-chip b{color:var(--prune)}
  .mn-pied{color:var(--prune-3)}
  .carte,.chercher,.qr,.chiffre,.urgence,.humeur,.outil,.micro,.champ,.saisie textarea,
  .zone,.coffre-piece{
    background:#2A1A28;border-color:rgba(255,255,255,.10);color:var(--prune)}
  .coffre-piece .retirer{background:#33202E;border-color:#4A2038}
  .carte.doux{background:#33202E}
  .bulle.nous{background:#33202E}
  .bulle.ia{background:#3A2A1E}
  .bref div{background:#33202E}
  .barre{background:rgba(42,26,40,.96);border-top-color:rgba(255,255,255,.08)}
  .bas,.feuille{background:#2A1A28}
  .bouton{background:#3A2836;color:var(--rose-nuit);
    box-shadow:0 12px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06)}
  .bouton.plein{background:linear-gradient(155deg,var(--rose-haut),var(--rose) 60%,#8C1A47);
    color:#2A1020;box-shadow:0 14px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18)}
  .alerte{background:linear-gradient(150deg,#3A2318,#4A2A1C);border-color:var(--corail)}
  .alerte b{color:#FFC49B} .alerte p{color:#F0CDB6}
  .saisie{background:rgba(32,20,30,.96)}
  .coche input{background:#2A1A28;border-color:#4A2038}
  .code{background:#33202E}
  .op,.q{background:#33202E}
}

/* ── le choix de la langue ─────────────────────────────────────────────── */
.langues{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;justify-content:center}
.langues button{background:var(--blanc);border:2px solid rgba(74,47,66,.10);border-radius:999px;
  padding:11px 16px;font-weight:700;font-size:15px;color:var(--prune)}
.langues button.on{background:var(--rose);border-color:var(--rose);color:#fff}
.langues button i{font-style:normal;font-size:12px;opacity:.7;font-weight:800;
  text-transform:uppercase;letter-spacing:1px;margin-left:4px}

/* ══════════════════ SUR UN ORDINATEUR ══════════════════
   Les tablettes de l'espace d'accueil, les cybercafés, les ordinateurs des
   écoles : la barre du bas devient un rail à gauche, et la page respire au
   lieu de rester une colonne de téléphone perdue au milieu de l'écran. */
@media (min-width:900px){
  :root{ --max:680px; --marge:28px }
  body{ padding-bottom:0; padding-left:112px }
  .barre{ top:0; bottom:0; right:auto; width:112px; border-top:0;
    border-right:1px solid rgba(74,47,66,.08); padding:26px 0;
    display:flex; align-items:center }
  .barre .in{ flex-direction:column; gap:6px; width:100%; margin:0 }
  .barre a{ padding:12px 0; font-size:12px; gap:5px }
  .barre a svg{ width:25px; height:25px }
  .barre a .rond{ width:54px; height:34px }
  .haut .in{ max-width:calc(var(--max) + 2 * var(--marge)) }
  .saisie{ left:112px; bottom:0 }
  .maj{ left:132px; bottom:24px; right:24px }
  .grille{ grid-template-columns:repeat(3,1fr) }
  .tuile{ min-height:150px }
  h1{ font-size:40px }
  .accroche{ padding:40px 34px 34px }
  .accroche.avec-photo{ padding:0 0 26px }
  .accroche-corps{ padding:26px 34px 30px }
  .accroche h1{ font-size:44px }
  .accroche-photo{ aspect-ratio:21/10 }
  .ap-mots{ left:36px; right:36px; bottom:34px }
  .ap-mots h1{ font-size:46px }
  .ap-mots p{ font-size:16px; max-width:38ch }
  .ap-actions{ margin:-34px 34px 0 }
  .ap-actions .bouton.grand{ font-size:17.5px; padding:19px 24px }
  .ap-foi{ margin:16px 34px 0 }
  .chiffres{ gap:14px }
  .evitement:focus{ left:128px }
}
@media (min-width:1200px){
  :root{ --max:760px }
  .grille{ grid-template-columns:repeat(4,1fr) }
}

/* la pastille du nombre de réponses non lues */
.pastille-nb{position:absolute;top:-2px;right:8px;min-width:18px;height:18px;border-radius:999px;
  background:var(--rose);color:#fff;font-size:11px;font-weight:800;font-style:normal;
  display:grid;place-items:center;padding:0 5px;box-shadow:0 2px 6px rgba(74,47,66,.3)}
.barre a .rond{position:relative}

/* ── les photographies ─────────────────────────────────────────────────
   Elles ne sont pas décoratives : elles montrent la scène qu'on promet —
   quelqu'un qui écoute. Un voile aux couleurs de la maison les rattache à
   l'identité, et les coins arrondis les empêchent de faire « banque d'images ». */
/* ── le socle lu par les robots ─────────────────────────────────────────
   Il n'est visible qu'une fraction de seconde, le temps que l'application
   démarre — mais c'est lui que lisent les moteurs de recherche et les
   aperçus de lien. Il doit donc être propre, pas caché. */
/* Le socle : pour les robots et les aperçus de lien, pas pour les yeux. Il
   reste dans le HTML — ils le lisent là — mais il ne s'affiche pas. Sans
   JavaScript, le <noscript> d'index.html le rend visible. */
.socle{display:none;padding:24px 0 40px;max-width:62ch}
.socle h1{font-family:'Baloo';font-weight:800;font-size:clamp(26px,7vw,34px);
  line-height:1.1;color:var(--rose-nuit);margin-bottom:14px}
.socle p{font-size:16.5px;line-height:1.6;color:var(--prune-2);margin-bottom:12px}
.socle strong{color:var(--prune)}
.socle a{color:var(--rose);font-weight:800}

/* Ce qu'on voit à la place, et seulement si le chargement dure : le logo,
   le nom, et trois mots. Une fille sur une connexion lente ne doit jamais
   avoir un écran vide sous les yeux — elle croirait que ça ne marche pas. */
/* Elle n'apparaît qu'au bout de sept dixièmes de seconde : sur une bonne
   connexion, l'application est déjà là et personne ne la voit passer. Sur
   une mauvaise, c'est le logo qu'on attend, pas un écran vide. Tout en CSS,
   sans minuteur : la page n'a pas le droit d'exécuter du JavaScript écrit
   dans le HTML, et c'est une bonne règle. */
.patiente{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;min-height:56vh;text-align:center;opacity:0;
  animation:patiente-apparait .35s ease .7s forwards}
@keyframes patiente-apparait{to{opacity:1}}
.patiente img{width:54px;height:54px}
.patiente b{font-family:'Baloo';font-weight:800;font-size:22px;letter-spacing:3px;
  color:var(--rose-nuit)}
.patiente span{font-size:14px;color:var(--prune-2)}

/* ── une bande : la photo, et une phrase posée dessus ───────────────────── */
.bande{position:relative;margin-top:18px;border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--ombre-forte);background:var(--rose-nuit)}
.bande img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2;display:block}
.bande figcaption{position:absolute;left:0;right:0;bottom:0;padding:64px 20px 20px;color:#fff;
  background:linear-gradient(to top,rgba(43,6,22,.90) 0%,rgba(43,6,22,.68) 38%,
    rgba(43,6,22,0) 100%)}
.bande figcaption b{display:block;font-family:'Baloo';font-weight:800;
  font-size:clamp(22px,6.2vw,28px);line-height:1.1;text-wrap:balance}
.bande figcaption span{display:block;margin-top:7px;font-size:14.5px;line-height:1.45;
  color:#F6DCE6;max-width:46ch}
@media (prefers-color-scheme: dark){ .bande img{filter:brightness(.88)} }

.photo{position:relative;margin-top:18px;border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--ombre);aspect-ratio:3/2;background:var(--rose-pale)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.voile-photo{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(190deg, rgba(110,15,51,.12) 0%, rgba(110,15,51,0) 44%,
    rgba(58,16,34,.20) 100%)}
@media (prefers-color-scheme: dark){
  .photo img{filter:brightness(.86)}
  .voile-photo{background:linear-gradient(190deg, rgba(110,15,51,.18) 0%,
    rgba(20,10,18,0) 40%, rgba(20,10,18,.45) 100%)}
}

/* ══════════════════════════════════════════════════════════════════════════
   LES AUTOCOLLANTS, LES CARTES, ET CE QU'ON RETIRE
   ══════════════════════════════════════════════════════════════════════════ */

/* Un autocollant se pose seul, sans bulle : c'est un dessin, pas une phrase. */
.colle{display:flex;align-items:flex-end;gap:6px;max-width:86%;margin:2px 0;position:relative}
.colle.elle{align-self:flex-end;flex-direction:row}
.colle.nous,.colle.ia{align-self:flex-start}
.colle svg{filter:drop-shadow(0 8px 16px rgba(74,47,66,.16))}

/* Le petit bouton qui retire ce qu'on vient d'écrire. */
.retirer{position:absolute;top:-9px;right:-9px;width:28px;height:28px;border-radius:999px;
  background:var(--blanc);border:2px solid var(--rose-pale);display:grid;place-items:center;
  color:var(--rose-nuit);box-shadow:var(--ombre);opacity:0;transform:scale(.85);
  transition:opacity .14s,transform .14s;padding:0}
.bulle,.colle{position:relative}
.bulle.elle.montre .retirer,.colle.elle.montre .retirer,
.bulle.elle:focus-within .retirer,.colle.elle:focus-within .retirer,
.retirer:focus-visible{opacity:1;transform:scale(1);pointer-events:auto}
.retirer{pointer-events:none}
@media (hover:hover){
  .bulle.elle:hover .retirer,.colle.elle:hover .retirer{opacity:1;transform:scale(1);
    pointer-events:auto}
}
.retirer svg{width:14px;height:14px;stroke-width:2.2}

.bulle.retire{background:transparent;border:1.5px dashed var(--prune-3);color:var(--prune-3);
  font-size:14px;font-style:italic;display:inline-flex;align-items:center;gap:8px;
  box-shadow:none;padding:9px 14px}
.bulle.retire svg{width:16px;height:16px;flex:0 0 auto;stroke-width:2}

/* ── le tiroir des autocollants ─────────────────────────────────────────── */
#tiroir-colle{background:var(--creme-2);border:1px solid var(--rose-pale);
  border-radius:var(--r-l) var(--r-l) 0 0;max-height:48vh;overflow:auto;
  padding:0 14px 14px;margin:0 0 8px;box-shadow:0 -12px 30px rgba(74,47,66,.10)}
.colle-tete{position:sticky;top:0;background:var(--creme-2);padding:14px 0 10px;
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;z-index:2}
.colle-tete b{font-family:'Baloo';font-weight:800;font-size:17px;grid-column:1}
.colle-tete span{font-size:13px;color:var(--prune-2);grid-column:1;line-height:1.35}
.fermer-colle{grid-column:2;grid-row:1/3;width:34px;height:34px;border-radius:999px;
  background:rgba(74,47,66,.08);display:grid;place-items:center;color:var(--prune);
  flex:0 0 auto;padding:0}
.fermer-colle svg{width:16px;height:16px}
.colle-groupe{font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--rose);margin:12px 0 8px}
.colle-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:7px}
.colle-grille button{background:var(--blanc);border:2px solid transparent;border-radius:var(--r-m);
  padding:9px 4px 7px;display:flex;flex-direction:column;align-items:center;gap:4px;
  box-shadow:var(--ombre);width:100%}
.colle-grille button:active{transform:scale(.94)}
.colle-grille button:hover{border-color:var(--rose-pale)}
.colle-grille span{font-size:10.5px;color:var(--prune-2);line-height:1.2;text-align:center}
.micro.on{background:var(--rose);border-color:var(--rose);color:#fff}

/* ── les cartes envoyées par l'intervenante ────────────────────────────────── */
.carte-fil{align-self:flex-start;max-width:92%;background:var(--blanc);
  border-radius:var(--r-l);border-left:5px solid var(--or);padding:16px 18px;
  box-shadow:var(--ombre);margin:2px 0}
.carte-fil b{display:block;font-family:'Baloo';font-weight:800;font-size:18px;
  color:var(--rose-nuit);margin-top:4px}
.carte-fil .sous{display:block;font-size:14px;color:var(--prune-2);margin-top:4px}
.carte-fil .bouton.petit{margin-top:12px;font-size:15px;padding:11px 20px;
  background:var(--rose);color:#fff}
.carte-fil .qui{display:block;font-size:11px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--prune-3)}
.carte-corps:empty{display:none}
.carte-corps{margin-top:14px}

.respire{display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 0 4px}
.respire .rond{width:70px;height:70px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 34% 30%,var(--rose-haut),var(--rose-nuit));
  transform:scale(.55);transition:transform linear;box-shadow:0 10px 26px rgba(110,15,51,.28)}
.respire .rond.grandit{transform:scale(1)}
.respire .rond.tient{transform:scale(1)}
.respire .rond.retrecit{transform:scale(.55)}
.respire b{font-family:'Baloo';font-weight:800;font-size:21px;color:var(--rose-nuit)}
.respire .tour{font-size:12.5px;color:var(--prune-3)}
@media (prefers-reduced-motion:reduce){ .respire .rond{transition:none} }

.ancrage{list-style:none;display:flex;flex-direction:column;gap:8px}
.ancrage button{width:100%;text-align:left;display:flex;align-items:center;gap:11px;
  background:var(--creme);border:2px solid var(--rose-pale);border-radius:var(--r-m);
  padding:12px 14px;font-size:15px;font-weight:700;color:var(--prune)}
.ancrage button span{font-size:19px;flex:0 0 auto}
.ancrage button.fait{background:var(--vert-pale);border-color:var(--vert);color:#1F5C3A;
  text-decoration:line-through;text-decoration-color:rgba(11,75,56,.35)}
.ancrage .fini{margin-top:10px;font-weight:800;color:var(--vert)}
.bravo{text-align:center}
.bravo svg{margin:0 auto}
.bravo p{margin-top:8px;font-weight:700;color:var(--rose-nuit)}

/* ══════════════════════════════════════════════════════════════════════════
   LE COMPTE, ET LA FEUILLE QUI REMONTE
   ══════════════════════════════════════════════════════════════════════════ */
.compte-tete{display:flex;gap:13px;align-items:flex-start;margin-bottom:12px}
.compte-tete svg{width:26px;height:26px;flex:0 0 auto;stroke:var(--rose);fill:none;
  stroke-width:2;margin-top:2px}
.compte-tete .nom{display:block;font-family:'Baloo';font-weight:800;font-size:19px;
  color:var(--prune)}
.compte-tete span b{font-weight:800;color:var(--prune)}
.compte-tete span{display:block;font-size:14.5px;color:var(--prune-2);line-height:1.5;
  margin-top:3px}
.puce.vert-doux{display:block;text-transform:none;letter-spacing:0;background:var(--vert-pale);color:#1F5C3A;border-radius:var(--r-s);
  padding:10px 13px;font-size:13.5px;font-weight:700;line-height:1.45;margin-bottom:12px}
.puce.or-doux{display:block;text-transform:none;letter-spacing:0;background:var(--or-pale);color:#6B4A0E;border-radius:var(--r-s);
  padding:10px 13px;font-size:13.5px;font-weight:700;line-height:1.45;margin-bottom:12px}
.pile-boutons{display:flex;flex-direction:column;gap:9px}
.pile-boutons .bouton{margin-top:0;width:100%;justify-content:center;font-size:16px;
  padding:13px 18px}

.voile-feuille{align-items:flex-end}
@media (min-width:640px){ .voile-feuille{align-items:center} }
.feuille-bas{width:100%;max-width:520px;background:var(--creme-2);
  border-radius:var(--r-xl) var(--r-xl) 0 0;padding:24px 22px;
  padding-bottom:calc(24px + env(safe-area-inset-bottom));max-height:92vh;overflow:auto;
  box-shadow:var(--ombre-forte)}
@media (min-width:640px){ .feuille-bas{border-radius:var(--r-xl)} }
.feuille-bas h2{font-family:'Baloo';font-weight:800;font-size:22px;line-height:1.15}
.feuille-bas>p{font-size:14.5px;color:var(--prune-2);line-height:1.55;margin-top:8px}
.feuille-bas label{display:block;font-size:12px;font-weight:800;letter-spacing:.8px;
  text-transform:uppercase;color:var(--prune-2);margin:16px 0 6px}
.feuille-bas .note-champ{font-size:12.5px;color:var(--prune-3);line-height:1.45;margin-top:6px}
.erreur-feuille{margin-top:12px;background:var(--corail-pale);color:#8C2E14;font-weight:700;
  font-size:14px;border-radius:var(--r-s);padding:10px 13px}
.deux-boutons{display:flex;gap:10px;margin-top:18px}
.deux-boutons .bouton{flex:1;justify-content:center;margin-top:0;font-size:16px;padding:13px 14px}
.bouton.danger{background:var(--corail);color:#fff}

.bandeau{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + 14px);z-index:140;
  background:var(--prune);color:#fff;border-radius:999px;padding:12px 20px;font-size:14.5px;
  font-weight:700;box-shadow:var(--ombre-forte);max-width:calc(100% - 32px);text-align:center}
body.discret-non{overflow:hidden}

@media (prefers-color-scheme: dark){
  #tiroir-colle{background:#2A1A28;border-color:#4A2038}
  .colle-tete{background:#2A1A28}
  .colle-grille button{background:#33202E}
  .feuille-bas{background:#2A1A28}
  .carte-fil{background:#2A1A28}
  .ancrage button{background:#33202E;border-color:#4A2038;color:var(--prune)}
  .retirer{background:#33202E;border-color:#4A2038}
}

/* `hidden` doit gagner contre les display: des composants. */
[hidden]{display:none !important}

/* ══════════════════════ CE QUI PROTÈGE ══════════════════════════════════
   Les quatre outils destinés aux femmes adultes. Rien ici ne crie : une
   page qu'on ouvre en cachette ne doit pas se remarquer de loin. */
.barre.serree a{font-size:10px}
.barre.serree a .rond{width:40px}
.barre.serree a svg{width:21px;height:21px}

.protege{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.protege-un{display:flex;align-items:center;gap:14px;background:var(--blanc);
  border-radius:var(--r-l);padding:15px 16px;box-shadow:var(--ombre);
  text-decoration:none;color:inherit}
.protege-un.seul{margin-top:12px}
.protege-ic{font-size:22px;line-height:1;flex:0 0 auto;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;background:linear-gradient(150deg,var(--rose-haut),var(--rose-nuit));
  box-shadow:0 8px 16px rgba(168,30,82,.30),inset 0 1px 0 rgba(255,255,255,.35)}
.protege-un>span:nth-child(2){flex:1;min-width:0}
.protege-un b{display:block;font-family:'Baloo';font-weight:800;font-size:17px;
  color:var(--rose-nuit);line-height:1.2}
.protege-un b+span{display:block;font-size:13px;color:var(--prune-2);
  line-height:1.45;margin-top:3px}
.protege-un svg{width:19px;height:19px;color:var(--prune-3);flex:0 0 auto}

/* le bilan de l'échelle : trois tons, du plus calme au plus grave, et
   aucune note chiffrée nulle part */
.bilan-vigilance{border-left:5px solid var(--or,#C9A464)}
.bilan-eleve{border-left:5px solid #C2551C;background:linear-gradient(150deg,#FFF4EC,#FFE9DC)}
.bilan-extreme{border-left:5px solid #9E1230;background:linear-gradient(150deg,#FFF0F2,#FCE0E5)}
.bilan-extreme h3{color:#8A0F29}

/* l'horloge des soixante-douze heures */
.pendule{margin-top:14px;background:linear-gradient(150deg,#3A1024,#6E1436);
  border-radius:var(--r-m);padding:24px 22px;color:#FFF;text-align:center}
.pendule.fini{background:linear-gradient(150deg,#2E2A28,#4A3F3A)}
.pendule-nb{font-family:'Baloo';font-weight:800;font-size:44px;line-height:1;
  letter-spacing:-.02em}
.pendule.fini .pendule-nb{font-size:26px}
.pendule-sous{font-size:13.5px;line-height:1.5;color:#EBD3DD;margin-top:10px;
  max-width:34ch;margin-left:auto;margin-right:auto}
.pendule .lien-doux{color:#D9B8C6;margin-top:16px}

/* le coffre */
.coffre-ajout{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.coffre-liste{display:flex;flex-direction:column;gap:11px}
.coffre-piece{background:var(--blanc);border-radius:var(--r-m);padding:14px 15px;
  box-shadow:var(--ombre)}
.coffre-date{font-size:12px;font-weight:800;color:var(--prune-3);margin-bottom:4px}
/* La date des faits est celle qu'un avocat lira : elle se voit plus que
   celle du dépôt, qui n'est là que pour dire « c'était déjà chez nous ». */
.coffre-fait{font-size:13px;color:var(--prune-2);margin-bottom:8px}
.coffre-fait b{font-weight:800}
.quand-bloc{display:block}
.quand-bloc>span:first-child{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px}
.quand-bloc i{font-weight:400;font-style:normal;opacity:.75}
.quand-deux{display:flex;gap:8px}
.quand-deux .champ{flex:1;min-width:0}
.quand-deux .champ[type="time"]{flex:0 0 40%}
.coffre-piece p{white-space:pre-wrap;line-height:1.55}
.coffre-piece img{width:100%;border-radius:12px;display:block}
.coffre-piece audio{width:100%;margin-top:4px}
/* « Retirer » dans le coffre n'est pas la petite croix d'une bulle de chat :
   elle, elle est cachée jusqu'au survol et posée en absolu dans le coin. Ici
   c'est un vrai bouton, qu'un doigt doit pouvoir toucher — sans ce bloc, il
   était invisible ET inatteignable, et une femme ne pouvait pas retirer une
   pièce de son propre coffre. */
.coffre-piece .retirer{position:static;width:auto;height:auto;opacity:1;
  transform:none;pointer-events:auto;margin-top:12px;padding:9px 16px;
  border-radius:999px;font-size:13.5px;font-weight:800;box-shadow:none;
  display:inline-flex;min-height:40px;align-items:center}

/* La zone de texte du coffre et des formulaires. */
.zone{width:100%;background:var(--blanc);border:2px solid rgba(74,47,66,.12);
  border-radius:var(--r-s);padding:12px 14px;font-size:16px;line-height:1.5;
  font-family:inherit;color:inherit;resize:vertical;min-height:120px}
.zone:focus{outline:none;border-color:var(--rose)}
.lien-doux.danger{color:#9E1230}


/* ══════════════════════ LE DOSSIER ══════════════════════════════════════
   Deux lectures du même écran : à l'écran, c'est une page du site ; sur du
   papier, c'est un document qui doit tenir tout seul dans une pochette,
   sans le nom du site en gros, sans boutons, et avec des pièces qui ne se
   coupent pas en deux entre deux feuilles. */
.hors-papier .deux-boutons{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.hors-papier .deux-boutons .bouton{flex:1;min-width:150px;justify-content:center}

.papier{background:var(--blanc);border-radius:var(--r-m);box-shadow:var(--ombre);
  padding:22px 20px;margin-top:16px;color:var(--prune)}
.papier-tete h1{font-size:22px;line-height:1.15}
.papier-sous{font-size:13.5px;color:var(--prune-2);margin-top:6px;line-height:1.5}
.papier-faits{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:14px;
  padding:12px 0;border-top:1px solid rgba(74,47,66,.12);
  border-bottom:1px solid rgba(74,47,66,.12)}
.papier-faits dt{font-size:11px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:var(--prune-3)}
.papier-faits dd{font-size:15px;font-weight:700;margin-top:2px;
  font-variant-numeric:tabular-nums}
.papier-avert{margin-top:14px;background:var(--creme);border-radius:var(--r-s);
  padding:13px 14px;font-size:12.5px;line-height:1.5;color:var(--prune-2)}
.papier-avert b{color:var(--prune)}
.papier-avert p{margin-top:7px}

.piece{margin-top:22px;padding-top:16px;border-top:1px solid rgba(74,47,66,.12)}
.piece h2{font-size:16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:9px}
.piece-n{font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--rose-nuit);background:var(--rose-voile);border-radius:999px;
  padding:4px 10px}
.piece-dates{margin-top:9px;display:flex;flex-direction:column;gap:5px}
.piece-dates dt{font-size:11px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:var(--prune-3)}
.piece-dates dd{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.piece-texte{white-space:pre-wrap;line-height:1.6;margin-top:11px;font-size:15px}
.piece-son{margin-top:11px;font-size:13.5px;color:var(--prune-2);font-style:italic}
.piece-image{width:100%;max-width:420px;border-radius:10px;display:block;margin-top:11px}
.papier-pied{margin-top:24px;padding-top:12px;border-top:1px solid rgba(74,47,66,.12);
  font-size:12px;color:var(--prune-3)}

@media print{
  .haut,.barre,.hors-papier,.decor,.sortir,.evitement{display:none !important}
  html,body{background:#fff !important;color:#000 !important}
  body{font-size:11pt}
  #vue,.page{padding:0 !important;margin:0 !important;max-width:none !important}
  .papier{box-shadow:none;border-radius:0;padding:0;margin:0;background:#fff;color:#000}
  .papier-tete{break-after:avoid}
  .papier-avert{background:#fff;border:1px solid #999;color:#000}
  .papier-faits{border-color:#999}
  /* Une pièce qui se coupe en deux entre deux feuilles, c'est une pièce
     qu'on peut dire tronquée. */
  .piece{break-inside:avoid;page-break-inside:avoid;border-color:#999}
  .piece h2{break-after:avoid}
  .piece-n{background:none;border:1px solid #000;color:#000}
  .piece-image{max-width:100%;max-height:16cm;object-fit:contain}
  .piece-dates dt,.papier-faits dt{color:#444}
  /* Le corps d'une pièce est ce qu'on lit : il est noir, pas prune pâle. */
  .piece-texte,.piece-dates dd,.papier-faits dd{color:#000}
  .piece-son{color:#333}
  /* Le « Fin du dossier » ne part pas tout seul sur une feuille vide. */
  .papier-pied{color:#333;break-before:avoid;page-break-before:avoid}
  a[href]:after{content:''}
  @page{margin:18mm 16mm}
}

/* ══════════════════════ LA PAGE DU MENU ═════════════════════════════════
   Une liste, pas une grille de tuiles : on la parcourt au pouce, de haut en
   bas, et chaque ligne dit en une phrase ce qu'il y a derrière — une entrée
   qui ne donne que son nom oblige à l'ouvrir pour savoir.

   Chaque famille a sa couleur. Ce n'est pas de l'ornement : c'est ce qui
   permet de retrouver « Mon coffre » d'un coup d'œil la troisième fois.
   Et une seule famille est traitée à l'envers, en vert sombre — celle qui
   protège. C'est la plus grave, elle est la plus lourde à l'œil.
   ══════════════════════════════════════════════════════════════════════ */

/* ── le bandeau du haut ─────────────────────────────────────────────────── */
.mn-tete{position:relative;overflow:hidden;margin-top:18px;border-radius:var(--r-xl);
  padding:26px 24px 22px;color:#fff;box-shadow:var(--ombre-forte);
  background:
    radial-gradient(120% 90% at 88% 8%,rgba(223,175,92,.32) 0%,rgba(223,175,92,0) 58%),
    linear-gradient(155deg,#9B1C48 0%,var(--rose-nuit) 48%,#4C0A23 100%)}
.mn-tete>*{position:relative;z-index:1}
.mn-anneaux{position:absolute;right:-34px;top:-26px;width:190px;height:auto;z-index:0;
  color:rgba(255,255,255,.13)}
.mn-tete .jour{font-size:11px;font-weight:800;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--or)}
.mn-tete h1{font-size:clamp(27px,8vw,34px);margin-top:9px;line-height:1.08}
.mn-tete h1 em{display:block;font-style:normal;color:var(--or)}
.mn-tete>p{font-size:15px;line-height:1.5;color:rgba(255,255,255,.90);margin-top:11px;
  max-width:34ch}
.mn-sortir{display:flex;align-items:flex-start;gap:9px;margin-top:15px;
  background:rgba(255,255,255,.13);border-radius:var(--r-s);padding:10px 14px;
  font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.94)}
.mn-sortir svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px}
.mn-sortir span{flex:1;min-width:0}
.mn-sortir b{font-weight:800;color:#fff}

/* ── le sommaire : les cinq portes d'entrée, qu'on touche pour sauter
   directement à la famille voulue. C'est ce bloc qui transforme la page
   d'une liste qu'on fait défiler en un vrai menu. ───────────────────────── */
.mn-sommaire{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:22px}
.mn-chip{display:flex;align-items:center;gap:10px;padding:12px 13px;border-radius:var(--r-m);
  background:var(--fam-pale, var(--creme-2));box-shadow:var(--ombre);color:inherit}
.mn-chip:nth-child(5){grid-column:1 / -1}
.mn-chip-ic{width:34px;height:34px;border-radius:10px;flex:0 0 auto;display:grid;
  place-items:center;background:var(--fam, var(--prune));color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.mn-chip-ic svg{width:18px;height:18px}
.mn-chip b{flex:1;min-width:0;font-family:'Baloo';font-weight:800;font-size:13.5px;
  color:var(--prune);line-height:1.18}
.mn-chip-n{flex:0 0 auto;font-size:11px;font-weight:800;color:var(--fam, var(--prune-2));
  background:rgba(255,255,255,.75);border-radius:999px;min-width:21px;height:21px;
  display:grid;place-items:center;font-variant-numeric:tabular-nums}
.mn-chip:active{transform:scale(.96)}

/* ── une famille : un seul bloc, bandeau de couleur + lignes dessous — au
   lieu d'un titre posé sur le fond crème avec une carte blanche séparée,
   qui ne lisait pas comme UNE chose. ─────────────────────────────────────── */
.mn-f{margin-top:24px;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--ombre);
  scroll-margin-top:84px}
.mn-h{display:flex;align-items:center;gap:11px;padding:15px 17px;
  background:linear-gradient(135deg,var(--fam, var(--prune)) 0%,
    color-mix(in srgb,var(--fam, var(--prune)) 68%,#1A0812) 100%);
  color:#fff}
.mn-h-ic{width:32px;height:32px;border-radius:10px;flex:0 0 auto;display:grid;
  place-items:center;background:rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.mn-h-ic svg{width:18px;height:18px}
.mn-h h2{font-size:18px;color:#fff;flex:1;min-width:0;font-family:'Baloo';font-weight:800}
.mn-filet{display:none}
.mn-n{flex:0 0 auto;font-size:12px;font-weight:800;color:#fff;
  background:rgba(255,255,255,.22);border-radius:999px;
  min-width:24px;height:24px;display:grid;place-items:center;
  font-variant-numeric:tabular-nums}

.mn-groupe{background:var(--blanc)}
.mn-l{display:flex;align-items:center;gap:13px;padding:15px 16px;color:inherit}
.mn-l + .mn-l{border-top:1px solid rgba(74,47,66,.08)}
.mn-l:active{background:var(--fam-pale, var(--rose-voile))}
.mn-ic{flex:0 0 auto;width:42px;height:42px;border-radius:14px;display:grid;
  place-items:center;background:var(--fam-pale, var(--rose-voile));
  color:var(--fam, var(--rose-nuit))}
.mn-ic svg{width:22px;height:22px}
.mn-t{flex:1;min-width:0}
.mn-t b{display:block;font-family:'Baloo';font-weight:800;font-size:17px;
  line-height:1.2;color:var(--prune)}
.mn-t>span{display:block;font-size:13.5px;color:var(--prune-2);line-height:1.4;
  margin-top:3px}
.mn-fl{flex:0 0 auto;width:26px;height:26px;border-radius:999px;display:grid;
  place-items:center;background:var(--fam-pale, rgba(74,47,66,.06));
  color:var(--fam, var(--prune-3))}
.mn-fl svg{width:15px;height:15px;stroke-width:2.8}

/* ── les cinq couleurs ──────────────────────────────────────────────────── */
.mn-parler{--fam:#A81C52;--fam-pale:var(--rose-voile)}
.mn-savoir{--fam:#8A5A00;--fam-pale:var(--or-pale)}
.mn-autour{--fam:#8C2E14;--fam-pale:var(--corail-pale)}
.mn-moi   {--fam:var(--prune);--fam-pale:rgba(74,47,66,.07)}

/* ── la famille qui protège : à l'envers ────────────────────────────────── */
/* « Me protéger » reste la section la plus grave de l'application, donc la
   plus sombre — mais dans notre prune, plus dans un turquoise qui ne vient
   de nulle part. */
.mn-proteger{--fam:#6E2A63;--fam-pale:rgba(110,42,99,.12)}
.mn-proteger .mn-groupe{color:#fff;
  background:linear-gradient(158deg,#2A0A1C 0%,#4A1240 52%,#6E2A63 100%)}
.mn-proteger .mn-l + .mn-l{border-top-color:rgba(255,255,255,.12)}
.mn-proteger .mn-l:active{background:rgba(255,255,255,.07)}
.mn-proteger .mn-ic{background:rgba(223,175,92,.18);color:var(--or)}
.mn-proteger .mn-t b{color:#fff}
.mn-proteger .mn-t>span{color:rgba(255,255,255,.80)}
.mn-proteger .mn-fl{background:rgba(255,255,255,.12);color:rgba(255,255,255,.85)}

.mn-pied{margin-top:30px;text-align:center;font-size:12px;color:var(--prune-3)}
.mn-v{display:block;margin-top:5px;font-variant-numeric:tabular-nums;
  font-weight:800;letter-spacing:.4px}

/* le plan */
.avance{display:flex;align-items:center;gap:12px;margin-top:14px}
.avance-piste{flex:1;height:9px;border-radius:999px;background:rgba(74,47,66,.10);
  overflow:hidden}
.avance-piste i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#8F6524,#C9A464);transition:width .3s}
.avance span{font-size:12.5px;font-weight:800;color:var(--prune-2);flex:0 0 auto}
.note-plan{font-size:13px;color:var(--prune-2);line-height:1.5;margin-bottom:10px}

.alerte strong{font-weight:800;color:#8C2E14}

/* ══════════════════════ AVANT D'ÉCRIRE ══════════════════════════════════
   Trois écrans avant la première ligne. Le chemin doit se voir : une fille
   qui ne sait pas combien il reste d'étapes abandonne à la deuxième. */
.pas{display:flex;align-items:center;gap:7px;margin:18px 0 4px}
.pas i{width:26px;height:4px;border-radius:2px;background:rgba(74,47,66,.13);
  display:block;transition:background .25s}
.pas i.fait{background:var(--rose)}
.pas i.ici{background:var(--rose);width:40px}
.pas span{font-size:11.5px;font-weight:800;color:var(--prune-3);margin-left:6px}

/* la seule limite — elle ne se cache pas dans une liste */
.limite{margin-top:14px;background:linear-gradient(150deg,#FFF1E8,#FFE6D8);
  border:2px solid var(--corail);border-radius:var(--r-m);padding:18px 20px}
.limite-tete{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.limite-tete svg{width:21px;height:21px;color:#9A3C13;flex:0 0 auto}
.limite-tete span{font-family:'Baloo';font-weight:800;font-size:16px;color:#9A3C13;
  line-height:1.25}
.limite p{color:#7C3714;font-size:14px;line-height:1.6}
.limite-suite{margin-top:9px;padding-top:9px;border-top:1px solid rgba(154,60,19,.18);
  font-weight:700}

/* les questions, en pastilles — jamais en menu déroulant */
.quest{background:var(--blanc);border-radius:var(--r-m);padding:17px 18px 18px;
  box-shadow:var(--ombre);margin-top:12px}
.quest h3{font-family:'Baloo';font-weight:800;font-size:17px;color:var(--rose-nuit);
  line-height:1.25;text-wrap:balance}
.pourquoi{font-size:12.5px;line-height:1.5;color:var(--prune-3);margin-top:5px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.chip{background:var(--creme,#FFF5EC);border:2px solid rgba(74,47,66,.09);
  border-radius:999px;padding:9px 15px;font-size:13.5px;font-weight:700;
  color:var(--prune-2);transition:.16s;line-height:1.2}
.chip:active{transform:scale(.97)}
.chip.on{background:var(--rose);border-color:var(--rose);color:#fff}

/* ce qui attend derrière le bouton */
.attente{margin-top:18px;background:var(--rose-voile,#FCEAF1);border-radius:var(--r-m);
  padding:17px 19px}
.attente-tete{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.attente-tete svg{width:19px;height:19px;color:var(--rose-nuit);flex:0 0 auto}
.attente-tete span{font-family:'Baloo';font-weight:800;font-size:14px;
  color:var(--rose-nuit);letter-spacing:.02em}
.attente p{font-size:13.5px;line-height:1.6;color:var(--prune-2)}
.attente-note{margin-top:8px;font-size:12.5px;color:var(--prune-3)}

/* ═══════════════ MON JOURNAL ═══════════════════════════════════════════
   Un carnet, pas un formulaire. Deux choix tiennent tout le reste :
   la zone d'écriture est GRANDE (sept lignes, pas deux — une boîte étroite
   dit « une phrase suffira », et ce n'est pas ce qu'on lui propose), et la
   page relue est posée sur du crème avec un filet d'or à gauche, comme une
   feuille dans un carnet, au lieu d'une carte blanche de plus. */
.jrn-humeurs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.jrn-h{display:flex;align-items:center;gap:7px;background:var(--creme-2);
  border:2px solid rgba(74,47,66,.09);border-radius:999px;padding:8px 14px;
  font-size:14px;font-weight:700;color:var(--prune-2);cursor:pointer;
  font-family:inherit;transition:background .15s,border-color .15s,color .15s}
.jrn-h span{font-size:17px;line-height:1}
.jrn-h.on{background:var(--rose);border-color:var(--rose);color:#fff}
.jrn-h:focus-visible{outline:3px solid var(--or);outline-offset:2px}

.jrn-zone{min-height:170px;line-height:1.6;resize:vertical;font-family:inherit}
.jrn-pied{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:12px}
.jrn-date{flex:1;min-width:190px;font-size:14px;font-weight:700;color:var(--prune-2);
  display:flex;align-items:center;gap:8px}
.jrn-date .champ{margin-top:0;flex:1;min-width:0;padding:10px 12px}
.jrn-pied .bouton{flex:0 0 auto;margin-top:0}

.jrn-mois{margin:22px 0 10px;font-size:13px;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--prune-3)}
.jrn-page{background:var(--creme-2);border-radius:var(--r-m);
  border-left:4px solid var(--or);padding:16px 18px;margin-top:12px;
  box-shadow:0 6px 18px rgba(74,47,66,.06)}
.jrn-tete{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  justify-content:space-between}
.jrn-tete b{font-size:15px;color:var(--prune)}
.jrn-badge{display:inline-flex;align-items:center;gap:6px;background:var(--blanc);
  border-radius:999px;padding:4px 11px;font-size:12.5px;font-weight:700;
  color:var(--prune-2)}
.jrn-badge span{font-size:14px;line-height:1}
.jrn-page p{margin-top:10px;white-space:pre-wrap;color:var(--prune);font-size:16.5px}
/* .lien-doux est un bouton PLEINE LARGEUR ailleurs dans le site : tel quel,
   chaque lien prenait toute la ligne et les deux s'empilaient, centrés, au
   bas de chaque page. Ici on leur rend leur largeur naturelle.
   Et les deux ne pèsent pas pareil : « mettre dans le coffre » se range, et
   se défait ; « déchirer » ne revient pas. Le second est donc plus petit et
   plus discret — il ne devient rouge franc qu'au premier toucher, quand il
   demande confirmation. */
.jrn-actes{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;
  margin-top:14px}
.jrn-actes .lien-doux{display:inline-block;width:auto;margin-top:0;padding:4px 0;
  font-size:14.5px;color:var(--rose);text-align:left}
.jrn-actes .lien-doux.danger{margin-left:auto;font-size:13.5px;font-weight:700;
  color:var(--prune-3)}   /* 4,95 sur le crème : lisible sans crier */
.jrn-actes .lien-doux.danger:hover,
.jrn-actes .lien-doux.danger:focus-visible{color:#9E1230}
/* armé : il a été touché une fois, il attend le second toucher */
.jrn-actes .lien-doux.danger.arme{color:#9E1230}

@media (max-width:380px){
  .jrn-pied .bouton{width:100%}
  .jrn-date{min-width:100%}
}

/* ══════════════════════════════════════════════════════════════════════════
   LE MAGAZINE — la page publique des deux numéros.
   Une carte par numéro : la couverture, ce qu'il y a dedans, et le bouton de
   téléchargement. Puis le formulaire de commande du papier.
   ══════════════════════════════════════════════════════════════════════════ */
.mag-liste{display:flex;flex-direction:column;gap:18px;margin-top:18px}
.mag-un{background:var(--blanc);border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--ombre);display:grid;grid-template-columns:132px 1fr}
/* La couverture est un objet, pas une texture : on la montre ENTIÈRE. Un
   « object-fit:cover » la rognait, et un magazine dont on ne voit pas le
   titre ne donne envie à personne. */
.mag-couv{margin:0;background:var(--rose-voile);display:flex;align-items:flex-start;
  justify-content:center;padding:16px 0 16px 16px}
.mag-couv img{display:block;width:100%;height:auto;border-radius:5px;
  box-shadow:0 8px 20px rgba(74,47,66,.20)}
.mag-corps{padding:16px 18px 18px;min-width:0}
.mag-corps h3{margin-top:8px;font-size:19px;line-height:1.16;color:var(--prune)}
.mag-accroche{margin-top:5px;color:var(--rose);font-weight:700;font-size:14px;line-height:1.35}
.mag-sujets{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--prune-2)}
.mag-format{margin-top:10px;font-size:12.5px;font-weight:700;letter-spacing:.2px;
  color:var(--prune-3)}
.mag-corps .bouton{margin-top:12px}
.mag-poids{margin-top:7px;font-size:12px;color:var(--prune-3)}
/* En dessous de 430 px la couverture passe au-dessus : une colonne de 132 px
   laissait treize caractères par ligne au texte. */
@media (max-width:430px){
  .mag-un{grid-template-columns:1fr}
  .mag-couv{padding:20px 20px 4px}
  .mag-couv img{width:62%;max-width:210px}
}

.mag-prix{font-family:'Baloo 2',system-ui,sans-serif;font-weight:800;font-size:24px;
  color:var(--rose);line-height:1.1}
.mag-prix-vide{font-size:19px;color:var(--prune-2)}
.mag-form{margin-top:16px}
.mag-lab{display:block;margin-top:14px;font-size:13px;font-weight:800;
  letter-spacing:.3px;color:var(--prune-2)}
.mag-lab+.champ{margin-top:6px}
.mag-qte{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mag-qte .champ{margin-top:6px}
.mag-note{margin-top:12px;font-size:13.5px;line-height:1.45;color:var(--prune-2);min-height:1px}
.mag-note.bon{color:#1F5C3A;font-weight:700}
.mag-note.mauvais{color:var(--corail);font-weight:700}
.mag-merci{font-size:15.5px;line-height:1.5;color:var(--prune)}

/* ══════════════════════════════════════════════════════════════════════════
   LA LETTRE DE LA SEMAINE.
   ══════════════════════════════════════════════════════════════════════════ */
.let-voies{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.let-voie{text-align:left;background:var(--blanc);border:2px solid rgba(74,47,66,.09);
  border-radius:var(--r-m);padding:11px 13px}
.let-voie b{display:block;font-size:14.5px;color:var(--prune)}
.let-voie span{display:block;font-size:12px;color:var(--prune-3);margin-top:2px;line-height:1.3}
.let-voie.on{border-color:var(--rose);background:var(--rose-voile)}
.let-voie.on b{color:var(--rose)}

.let-carte{background:var(--blanc);border-radius:var(--r-l);padding:22px 20px 20px;
  box-shadow:var(--ombre);margin-top:18px}
.let-n{font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:11.5px;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--rose)}
.let-carte h2{margin-top:7px;font-size:22px;line-height:1.16;color:var(--prune)}
.let-carte p{margin-top:12px;font-size:15.5px;line-height:1.62;color:var(--prune-2)}
.let-faire{margin-top:18px;background:var(--or-pale);border-radius:var(--r-m);padding:14px 16px}
.let-faire b{display:block;font-family:'Archivo',system-ui,sans-serif;font-weight:800;
  font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:#7A530B}
.let-faire span{display:block;margin-top:6px;font-size:15px;line-height:1.55;color:var(--prune)}

.let-nav{display:flex;gap:10px;margin-top:14px}
.let-fl{flex:1;background:var(--blanc);border:2px solid rgba(74,47,66,.09);
  border-radius:999px;padding:11px 12px;font-size:13.5px;font-weight:700;color:var(--prune-2)}
.let-fl:disabled{opacity:.45;color:var(--prune-3);cursor:not-allowed}
.let-note2{margin-top:7px;font-size:12.5px;line-height:1.45;color:var(--prune-3)}

/* ── les deux façons d'avoir un compte ──────────────────────────────────────
   Deux cartes de même largeur, de même hauteur, avec leur bouton aligné sur la
   même ligne. Ce n'est pas de la coquetterie : tant qu'une des deux est plus
   grande ou plus haute, elle devient « la bonne », et celle qui prend l'autre
   a l'impression de prendre l'option de secours. Sur un petit écran elles se
   remettent l'une sous l'autre, dans le même ordre. */
.deux-comptes{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch}
.deux-comptes .carte.cpt{margin-top:0;display:flex;flex-direction:column;gap:0}
.cpt h3{margin:10px 0 8px}
.cpt p{flex:1 1 auto;font-size:15px;line-height:1.5}
.cpt .bouton{margin-top:14px;width:100%;justify-content:center}
.cpt .puce{align-self:flex-start}
.puce.rose-doux{background:var(--rose-pale);color:var(--rose-nuit)}
@media (max-width:560px){
  .deux-comptes{grid-template-columns:1fr}
}
@media (prefers-color-scheme:dark){
  /* Le rose pâle disparaît sur le fond de nuit : la pastille garde son rose,
     mais en voile, avec l'encre remontée. */
  .puce.rose-doux{background:rgba(240,140,176,.16);color:#F08CB0}
}

/* ── ce qu'elle a montré à l'équipe ─────────────────────────────────────── */
.coffre-piece .bouton.montrer{margin-top:12px;width:100%;justify-content:center;
  font-size:15px;padding:11px 16px;background:var(--rose-voile);color:var(--rose-nuit)}
.piece-montree{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-top:12px;
  background:var(--vert-pale);color:#1F5C3A;border-radius:var(--r-s);
  padding:10px 13px;font-size:13.5px;line-height:1.45}
.piece-montree span{flex:1 1 150px;font-weight:700}
.piece-montree .lien-doux{flex:0 0 auto;width:auto;display:inline-block;margin:0 0 0 auto;
  color:#1F5C3A;font-size:13.5px;text-decoration:underline;text-underline-offset:3px}
@media (prefers-color-scheme:dark){
  .coffre-piece .bouton.montrer{background:#3A2836;color:#F0A8C4}
  .piece-montree{background:rgba(31,92,58,.22);color:#9FD9B6}
  .piece-montree .lien-doux{color:#9FD9B6}
}

/* ── LE DOUBLE APPUI QUI FAIT ZOOMER ────────────────────────────────────────
   Sur un téléphone, deux appuis rapides au même endroit veulent dire « zoome ».
   C'est le navigateur qui décide ça, pas nous — et c'est utile sur une photo de
   papier du coffre, qu'on veut pouvoir agrandir.

   Sur un bouton, c'est autre chose. Le navigateur attend un éventuel second
   appui avant de réagir au premier : le bouton semble lent, et une fille qui
   réappuie parce que « ça n'a pas marché » déclenche le zoom au lieu de
   l'action. Sur « Sortir » et sur le passage en calculatrice, ce délai est un
   vrai problème, pas une gêne d'affichage.

   « manipulation » retire le double appui SUR LES COMMANDES SEULEMENT. Le
   pincement pour agrandir reste entier, partout, et le double appui reste
   disponible sur le texte et les images. On ne met surtout pas
   user-scalable=no dans le viewport : bloquer le zoom d'une page, c'est mettre
   dehors celles qui voient mal. */
button, a, label, summary, select, input[type="checkbox"], input[type="radio"],
.bouton, .outil, .tuile, .humeur, .age, .choix button, .let-voie, .let-fl,
.coche, .mini, .lien-doux, .retirer{
  touch-action: manipulation;
}