/* ══ Portail bénévoles v2 — la feuille unique (2/10/2026) ══════════════════════
   Un seul fichier de classes pour les trois pages (connexion, espace bénévole,
   écran de l'équipe). Aucune règle par écran dupliquée, aucune couleur hors des
   jetons de :root. CSP stricte : aucun style en ligne n'existe ailleurs.

   La charte (skill 1-creer-des-interfaces, references/applications.md, « Le
   portail bénévoles — Stella ») : la grammaire du cockpit (toile, cartes
   blanches, pilules, ressort ; Manrope depuis le 5/10) aux couleurs de la marque. Le rouge est
   l'unique action pleine, une par écran ; le baby blue ne porte jamais un
   texte (le texte d'accent est --bleu-f) ; les lavis --bleu-t ne se posent que
   sur la toile ou le blanc.

   Contrastes mesurés (texte < 18 px, fond réel) : --sec 5,5:1 sur la toile,
   5,0:1 sur --creux, 4,8:1 au moins sur un lavis de domaine à 26 % (d'où ce
   plafond pour les affiches) ; --bleu-f 5,1:1 sur la toile, 4,5:1 sur --bleu-t ;
   blanc sur --rouge 5,2:1 ; encre de domaine sur son lavis 9:1. */

/* Manrope, la police de la charte graphique 2026 (titres et corps depuis le
   5/10/2026), servie par le serveur du portail sous /polices/ (les fichiers
   latin et latin étendu du paquet @fontsource-variable/manrope, OFL) ; sans
   elle, Inter puis la police système. Source Serif 4 reste déclarée pour la
   compatibilité (--serif), plus aucun écran ne l'emploie. Aucune police tirée
   d'un CDN. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('/polices/manrope-latin-wght-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('/polices/manrope-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 700;font-display:swap;
  src:local('Source Serif 4'),url('/polices/source-serif-4-latin-wght-normal.woff2') format('woff2')}

:root{
  /* — la charte, au caractère près — */
  --toile:#F5F8FB; --carte:#FFFFFF; --creux:#E8EEF3;
  --encre:#020318; --sec:#5B6672; --ter:#5F6A76;
  --bleu:#98CFED; --bleu-t:rgba(152,207,237,.26); --bleu-f:#1B6FA6; --bleu-n:#0F4D75;
  --rouge:#D91600; --rouge-f:#B01200; --rouge-t:rgba(217,22,0,.08);
  --ok:#2E6B47; --ok-t:#E2EEE7; --attn:#8A6414; --attn-t:#F4ECD4; --panne:#B23A2B; --panne-t:#F7E4DF;
  --ligne:rgba(2,3,24,.09); --ligne-f:rgba(2,3,24,.16);
  --ombre:0 1px 2px rgba(2,3,24,.04),0 10px 30px rgba(2,3,24,.06);
  --police:'Manrope','Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;  /* la charte 2026 */
  --serif:'Source Serif 4',Georgia,serif;        /* compatibilité : plus employée par un écran */
  --spring:cubic-bezier(.3,.9,.32,1);

  /* — dérivés de la charte (jamais une teinte de plus) — */
  --sys:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --sur-plein:var(--carte);                     /* le texte posé sur le rouge */
  --survol:rgba(2,3,24,.05);
  --lat-fond:rgba(232,238,243,.55);             /* --creux translucide : le bandeau */
  --barre-fond:rgba(245,248,251,.9);            /* --toile translucide : barres du téléphone */
  --voile:rgba(2,3,24,.32);
  --ombre-feuille:0 1px 2px rgba(2,3,24,.05),0 24px 64px rgba(2,3,24,.20);
  --anneau:0 0 0 3px rgba(27,111,166,.18);      /* --bleu-f, le focus d'un champ */
  --ombre-pilule:0 1px 2px rgba(2,3,24,.07),0 0 0 .5px rgba(2,3,24,.05);  /* sélection en pilule */
  --ombre-toast:0 14px 44px rgba(2,3,24,.32);
  --blanc-voile:rgba(255,255,255,.72);          /* le blanc posé sur une affiche teintée */
  --filet-clair:rgba(255,255,255,.38);          /* un filet sur le fond encre d'un toast */
  --toile-0:rgba(245,248,251,0);                /* la toile, transparente : fondu du composeur */

  /* — teintes d'identité des jeunes : les 7 domaines du référentiel
       (Demandes.Besoin_initial). Mêmes teintes que la plateforme éducateurs
       (src/lib/teintes.ts) : un domaine a la même couleur partout chez Les
       Ombres. Elles ne portent jamais de texte : lavis sous l'encre, point
       devant un mot. — */
  --d-confiance:#B6A6F0; --d-orientation:#7FB0EF; --d-scolaire:#EAA6C4; --d-numerique:#6FCFC6;
  --d-insertion:#86D6A8; --d-demarches:#E6B566; --d-lien:#E79F8F;

  /* — formes et rythme — */
  --r-pilule:999px; --r-tuile:22px; --r-carte:18px; --r-ctrl:10px; --r-bouton:8px;  /* boutons : 8 px, la charte */
  --r-zone:16px;                                 /* une zone dans une carte (mentorat) */
  --entre:64px;                                  /* entre deux sections */
  --gout:clamp(20px,4vw,56px);                   /* marge latérale des pages */
  --lat-l:264px;
  --onglets-h:58px;
}

/* ── socle ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
body{min-height:100vh;background:var(--toile);color:var(--encre);
  font:400 16px/1.55 var(--police);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:inherit}
a{color:var(--bleu-f);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
img,svg{display:block}
:focus-visible{outline:2px solid var(--bleu-f);outline-offset:2px}
::selection{background:var(--bleu-t)}
.lu{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.evitement{position:absolute;left:12px;top:-60px;z-index:90;padding:10px 16px;border-radius:var(--r-ctrl);
  background:var(--carte);box-shadow:var(--ombre);font-weight:600}
.evitement:focus{top:12px}
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.i-p{width:16px;height:16px}

/* ── typographie ─────────────────────────────────────────────────────────
   Un seul très grand titre par écran (Manrope 800) ; au-dessus, un surtitre ;
   titres de section nettement plus petits ; corps en police système. */
.surtitre{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sec);line-height:1.4}
/* Le grand titre d'écran (charte 2026, titre signature) : Manrope 800, interlettrage
   −0,035 em, interligne 1,02. Un seul par écran. */
.titre{font-family:var(--police);font-weight:800;font-size:clamp(38px,4.4vw,56px);line-height:1.02;
  letter-spacing:-.035em;text-wrap:balance}
.titre-vue{font-family:var(--police);font-weight:800;font-size:clamp(30px,3.2vw,40px);line-height:1.02;
  letter-spacing:-.035em;text-wrap:balance}
/* H2 de la charte : 18 à 22 px, 600. */
.titre-section{font-family:var(--police);font-weight:600;font-size:clamp(20px,2vw,22px);line-height:1.2;letter-spacing:-.015em;text-wrap:balance}
.titre-carte{font-family:var(--police);font-weight:700;font-size:18px;line-height:1.3;letter-spacing:-.012em}
.chiffre{font-family:var(--police);font-weight:800;font-size:52px;line-height:1;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.phrase{font-size:16px;line-height:1.55;color:var(--sec);max-width:62ch}
.discret{font-size:14px;line-height:1.5;color:var(--sec)}
/* Pas d'italique dans la charte : l'emphase se dit en graisse. */
em{font-style:normal;font-weight:600}
.legende{font-size:12px;font-weight:500;line-height:1.4;color:var(--sec)}
/* Un titre reçoit le focus par programme (changement de vue), pas au clavier :
   aucun contour, il n'est pas un contrôle. */
[tabindex="-1"]:focus{outline:none}

/* ── la coquille de l'espace : bandeau + vues ────────────────────────────
   Référence : la barre latérale de macOS (Mail, Notes) — un fond presque de la
   toile, translucide, des rangées en pilules ; la sélection est une pilule
   blanche. Sous 900 px : la barre d'onglets d'une app iOS, en bas. */
.app{display:flex;min-height:100vh}
/* La colonne du bandeau se prolonge sous lui quand la page est plus haute
   que l'écran (le bandeau, collant, ne fait qu'une hauteur d'écran). */
@media(min-width:901px){.app{background:linear-gradient(90deg,var(--lat-fond) 0 calc(var(--lat-l) - 1px),var(--ligne) 0 var(--lat-l),transparent 0)}}
.lat{position:sticky;top:0;align-self:flex-start;width:var(--lat-l);height:100vh;flex:none;
  display:flex;flex-direction:column;padding:24px 12px 16px;background:var(--lat-fond);
  -webkit-backdrop-filter:saturate(1.3) blur(20px);backdrop-filter:saturate(1.3) blur(20px);
  border-right:1px solid var(--ligne);z-index:20}
/* La marque (§16.1) : l'étoile des Ombres sur une tuile d'encre (le logo est blanc
   et bleu : il lui faut un fond sombre pour se lire), « Les Ombres » en Manrope, le
   surtitre dessous. L'emplacement du logotype officiel est commenté dans les pages. */
.marque{display:flex;align-items:center;gap:11px;padding:0 10px 26px;font:700 21px/1.1 var(--police);
  letter-spacing:-.02em;color:var(--encre);white-space:nowrap;text-decoration:none}
a.marque:hover{text-decoration:none}
.marque-tuile{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--encre);
  box-shadow:var(--ombre-pilule)}
.marque-tuile img{width:auto;height:26px}
.marque-mots{display:flex;flex-direction:column;gap:4px;min-width:0}
.marque-nom{font:800 20px/1 var(--police);letter-spacing:-.03em}
.marque-sous{font:600 11px/1 var(--police);letter-spacing:.13em;text-transform:uppercase;color:var(--sec)}
/* Le logotype officiel (écriture sombre) ne s'affiche qu'une fois chargé
   (data-logo="ok", posé par le script) ; sinon le repli : la tuile et les mots. */
.marque-repli{display:flex;align-items:center;gap:11px;min-width:0}
.marque-logo{display:none;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.marque[data-logo="ok"] .marque-logo{display:flex}
.marque[data-logo="ok"] .marque-repli{display:none}
.marque-logotype{display:block;height:34px;width:auto;max-width:200px;object-fit:contain;object-position:left center}
.nav{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 12px;
  border-radius:12px;color:var(--encre);font-size:15px;font-weight:500;line-height:1.2;text-decoration:none;
  transition:background-color .14s linear,box-shadow .14s linear,color .14s linear}
.nav+.nav{margin-top:2px}
.nav:hover{background:var(--survol);text-decoration:none}
.nav .i{color:var(--sec);transition:color .14s linear}
.nav[aria-current="page"]{background:var(--carte);box-shadow:var(--ombre-pilule)}
.nav[aria-current="page"] .i{color:var(--bleu-f)}
.nav-l{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-c{display:none}
/* Un compte ne s'affiche que s'il commande un geste (un non-lu) ; zéro ne
   s'écrit pas. Pastille --bleu-f : le rouge reste l'action. */
.badge{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--bleu-f);
  color:var(--sur-plein);font-size:12px;font-weight:700;line-height:20px;text-align:center;
  font-variant-numeric:tabular-nums}
.moi{margin-top:auto;display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 10px;
  border-radius:12px;font-size:15px;font-weight:500;color:var(--encre);transition:background-color .14s linear}
.moi:hover{background:var(--survol)}
.moi-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.disque{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--bleu-t);color:var(--bleu-n);font:700 14px/1 var(--police)}
.tete-mobile{display:none}

.vues{flex:1;min-width:0;position:relative}
.page{padding:48px var(--gout) 96px;max-width:1120px;margin:0 auto}
.page-etroite{max-width:820px}
.page-large{max-width:1280px}
.vue:focus{outline:none}
.entete{margin-bottom:36px}
.entete .surtitre{margin-bottom:10px}
.entete .phrase{margin-top:12px}
.entete-ligne{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.section{margin-top:var(--entre)}
.section-tete{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:0 16px;margin-bottom:14px}
.section-tete .tout-voir{white-space:nowrap}
.tout-voir{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-size:15px;font-weight:600;color:var(--bleu-f)}
.tout-voir .i{width:16px;height:16px}

/* Les avertissements du serveur (mode ombre…) : une ligne discrète en tête,
   jamais une alerte. */
.avert{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px var(--gout);background:var(--attn-t);color:var(--attn);
  font-size:13.5px;line-height:1.45;text-align:center}
.avert .i{width:16px;height:16px}

/* ── boutons ──────────────────────────────────────────────────────────── */
.b{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;
  border-radius:var(--r-bouton);font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;
  transition:transform .14s var(--spring),background-color .15s,border-color .15s,color .15s,box-shadow .15s}
.b:hover{text-decoration:none}
.b:active{transform:scale(.97)}
.b:disabled{opacity:.45;cursor:default;transform:none}
.b-plein{background:var(--rouge);color:var(--sur-plein)}
.b-plein:hover:not(:disabled){background:var(--rouge-f)}
/* Un bouton plein éteint n'est pas un rouge pâle (qui se lit comme une erreur) : il
   passe au gris du creux tant que le geste n'est pas possible. */
.b-plein:disabled:not(.b-attente):not(.b-ok){opacity:1;background:var(--creux);color:var(--ter)}
/* La flèche ↗ de la charte, en fin de libellé de l'action principale : dessinée en
   masque (le trait suit la couleur du texte), absente pendant l'attente. */
.b-plein::after{content:"";flex:none;width:13px;height:13px;margin-left:-1px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat}
.b-plein.b-attente::after,.b-plein.b-ok::after,.b-plein:disabled::after{content:none}
.b-grand{min-height:52px;padding:0 24px;font-size:16px}
.b-ligne{background:var(--carte);color:var(--encre);box-shadow:inset 0 0 0 1px var(--ligne-f)}
.b-ligne:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--bleu-f);color:var(--bleu-f)}
.b-calme{background:transparent;color:var(--bleu-f);padding:0 12px;border-radius:var(--r-bouton)}
.b-calme:hover:not(:disabled){background:var(--bleu-t)}
.b-lien{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:15px;font-weight:600;color:var(--bleu-f)}
.b-lien:hover{text-decoration:underline;text-underline-offset:3px}
.b-lien .i{width:16px;height:16px}
.b-rond{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;flex:none;
  background:var(--carte);color:var(--encre);box-shadow:var(--ombre),inset 0 0 0 1px var(--ligne);
  transition:transform .14s var(--spring),background-color .15s,opacity .15s}
.b-rond:hover:not(:disabled){background:var(--toile)}
.b-rond:disabled{opacity:.35;cursor:default}
.b-rond .i{width:20px;height:20px}
.gestes{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}

/* — l'attente d'un geste (transposé du cockpit, attendre()) : le bouton garde
     sa largeur, un anneau tourne, puis une coche, ou une secousse si refus — */
.b-attente:disabled,.b-ok:disabled{opacity:1;cursor:default}
.b-tour{display:inline-block;flex:none;width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;
  border-radius:50%;opacity:.7;animation:tourne .72s linear infinite}
.b-ok{background:var(--ok);color:var(--sur-plein);box-shadow:none}
.b-coche{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;
  stroke-linejoin:round;animation:coche .3s var(--spring) both}
.b-nok{animation:secousse .32s var(--spring)}
.b-gele{opacity:.4;pointer-events:none}

/* ── pastilles, puces ────────────────────────────────────────────────────
   L'état d'un fil se dit en un mot, avec une forme (le point) : jamais la
   couleur seule. */
.etat{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--r-pilule);
  font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap;background:var(--creux);color:var(--sec)}
.etat::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.etat[data-etat="transmise"]{background:var(--bleu-t);color:var(--bleu-n)}
.etat[data-etat="prise_en_charge"]{background:var(--attn-t);color:var(--attn)}
.etat[data-etat="repondue"]{background:var(--ok-t);color:var(--ok)}
.etat[data-etat="cloturee"]{background:var(--creux);color:var(--sec)}
.etat[data-etat="cloturee"]::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.etat[data-etat="urgent"]{background:var(--panne-t);color:var(--panne)}
.etat[data-etat="urgent"]::before{border-radius:1px;transform:rotate(45deg)}

/* Une amorce ou une relance de Stella : une pilule qu'on touche. */
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 16px;border-radius:var(--r-pilule);
  background:var(--carte);color:var(--encre);font-size:15px;line-height:1.35;text-align:left;
  box-shadow:inset 0 0 0 1px var(--ligne-f);transition:box-shadow .15s,color .15s,transform .14s var(--spring)}
.chip:hover{box-shadow:inset 0 0 0 1px var(--bleu-f);color:var(--bleu-f)}
.chip:active{transform:scale(.98)}
.chip .i{width:16px;height:16px;color:var(--bleu-f)}
.chips{display:flex;flex-wrap:wrap;gap:10px}

/* Un besoin du jeune : le lavis de son domaine, l'encre dessus, un point de
   la teinte foncée devant le mot. */
[data-domaine]{--teinte:var(--bleu)}
[data-domaine="confiance"]{--teinte:var(--d-confiance)}
[data-domaine="orientation"]{--teinte:var(--d-orientation)}
[data-domaine="scolaire"]{--teinte:var(--d-scolaire)}
[data-domaine="numerique"]{--teinte:var(--d-numerique)}
[data-domaine="insertion"]{--teinte:var(--d-insertion)}
[data-domaine="demarches"]{--teinte:var(--d-demarches)}
[data-domaine="lien"]{--teinte:var(--d-lien)}
.besoin{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:4px 12px 4px 10px;border-radius:var(--r-pilule);
  background:color-mix(in srgb,var(--teinte) 30%,var(--carte));color:var(--encre);font-size:13.5px;font-weight:500;line-height:1.3}
.besoin::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;background:color-mix(in srgb,var(--teinte) 45%,var(--encre))}
.besoins{display:flex;flex-wrap:wrap;gap:8px}

/* Une source citée par Stella : une petite pilule sous la réponse. */
.source{display:inline-flex;align-items:flex-start;gap:7px;max-width:100%;min-height:30px;padding:6px 12px 6px 10px;border-radius:15px;
  background:var(--carte);box-shadow:inset 0 0 0 1px var(--ligne);font-size:13px;line-height:1.35;color:var(--sec);text-align:left}
.source b{font-weight:600;color:var(--encre)}
.source .i{width:14px;height:14px;margin-top:1px;color:var(--bleu-f)}
.source span{min-width:0}
/* Une source qu'on ouvre (§16.6) : la pastille devient un bouton, le volet de
   lecture montre le passage. Cible de 40 px. */
button.source{min-height:40px;align-items:center;padding:8px 14px 8px 12px;border-radius:20px;cursor:pointer;
  transition:box-shadow .15s,color .15s,transform .14s var(--spring)}
button.source:hover{box-shadow:inset 0 0 0 1px var(--bleu-f);color:var(--encre)}
button.source:active{transform:scale(.98)}
button.source .i{margin-top:0}

/* ── avatars : des initiales sur le lavis du domaine, jamais une photo ── */
.avatar{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  background:color-mix(in srgb,var(--teinte,var(--bleu)) 34%,var(--carte));
  color:color-mix(in srgb,var(--teinte,var(--bleu)) 30%,var(--encre));font:700 17px/1 var(--police);letter-spacing:-.01em}
.avatar-p{width:36px;height:36px;font-size:14px}
.avatar-equipe{background:var(--bleu-t);color:var(--bleu-f)}
.avatar-equipe .i{width:18px;height:18px}

/* ── cartes ───────────────────────────────────────────────────────────── */
.carte{background:var(--carte);border-radius:var(--r-carte);box-shadow:var(--ombre)}
.carte-p{padding:24px}
.tuile{background:var(--carte);border-radius:var(--r-tuile);box-shadow:var(--ombre);padding:24px 24px 22px}
.survolable{transition:transform .2s var(--spring),box-shadow .2s}
.survolable:hover{transform:translateY(-2px)}

/* L'affiche d'un jeune — référence : affiches de contact iOS 17. Le prénom en
   grand Manrope 800 sur le lavis doux de SA teinte (26 % au plus), les initiales
   en filigrane, ce qui le concerne dessous. */
.affiche{position:relative;overflow:hidden;border-radius:var(--r-tuile);box-shadow:var(--ombre);
  background:linear-gradient(155deg,color-mix(in srgb,var(--teinte) 26%,var(--carte)) 0%,
    color-mix(in srgb,var(--teinte) 10%,var(--carte)) 62%,var(--carte) 100%)}
.affiche-fil{position:absolute;right:-.04em;top:-.06em;font:800 200px/1 var(--police);letter-spacing:-.06em;
  color:var(--carte);opacity:.5;pointer-events:none;user-select:none}
.affiche-corps{position:relative;padding:28px 28px 26px}
.affiche .surtitre{color:var(--sec)}
.affiche-nom{font:800 clamp(40px,4.6vw,56px)/1.02 var(--police);letter-spacing:-.035em;margin:10px 0 10px;overflow-wrap:anywhere}
.affiche-qui{font-size:16px;color:var(--sec);margin-bottom:16px}
.affiche .besoin{background:var(--blanc-voile)}
.affiche-synthese{font:400 17px/1.6 var(--police);color:var(--encre);max-width:52ch;margin-top:22px;text-wrap:pretty}
.affiche-gestes{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:28px}

/* Les raisons d'une proposition : jamais un score, des faits calculés. */
.raisons{display:grid;gap:12px;list-style:none}
.raison{display:flex;align-items:flex-start;gap:12px;font-size:15.5px;line-height:1.4}
.raison .i{width:18px;height:18px;margin-top:1px;color:var(--bleu-f)}
.raisons-panneau{background:var(--blanc-voile);border-radius:var(--r-carte);padding:20px 22px}
.raisons-panneau .surtitre{margin-bottom:14px}

/* Faits d'un profil (format, disponibilités, classe, français). */
.faits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;margin-top:24px;padding-top:20px;
  border-top:1px solid var(--ligne)}
.fait dt{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--sec);margin-bottom:4px}
.fait dd{font-size:15.5px;line-height:1.45}

/* La proposition mise en scène (accueil, pile) : une colonne au téléphone
   (l'identité, les raisons, puis le geste) ; au large, les raisons à droite. */
.proposition .affiche-corps{display:grid;gap:22px;grid-template-areas:"id" "texte" "faits" "raisons" "gestes"}
.proposition .g-id{grid-area:id;min-width:0}
.proposition .g-texte{grid-area:texte;min-width:0}
.proposition .g-faits{grid-area:faits;min-width:0}
.proposition .g-faits .faits{margin-top:0}
.proposition .g-texte .affiche-synthese{margin-top:0}
.proposition .g-raisons{grid-area:raisons;min-width:0}
.proposition .affiche-gestes{grid-area:gestes;margin-top:4px}
/* Au large : l'identité en bandeau (le filigrane occupe le coin libre), puis
   le récit et les raisons côte à côte, le geste sur toute la largeur. */
@media(min-width:1000px){
  .proposition .affiche-corps{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:"id ." "texte raisons" "faits raisons" "gestes gestes";
    align-items:start;column-gap:36px;row-gap:26px;padding:36px 36px 32px}
}
/* À l'accueil, l'affiche courte : l'identité, le récit, le geste — une colonne. */
@media(min-width:1000px){.proposition-courte .affiche-corps{grid-template-columns:minmax(0,1fr);grid-template-areas:"id" "texte" "gestes";row-gap:20px}}
.extrait{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* La pile — un profil à la fois (principe Hinge) : la position en mots et
   deux flèches rondes, jamais une frise de points sans libellés. */
.pile-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:20px}
.pile-pos{min-width:96px;text-align:center;font-size:14px;color:var(--sec);font-variant-numeric:tabular-nums}

/* La grille d'affiches — « Tous les profils » : deux colonnes au téléphone,
   trois au-delà (une personne qu'on ne voit pas est une personne qu'on oublie). */
.grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grille>*,.lignes>*,.notifs>*{min-width:0}
@media(min-width:900px){.grille{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.mini{display:flex;flex-direction:column;align-items:flex-start;width:100%;min-height:212px;text-align:left;cursor:pointer}
.mini .affiche-corps{display:flex;flex-direction:column;flex:1;width:100%;padding:20px 18px 18px}
.mini .affiche-fil{font-size:120px}
.mini-nom{font:800 28px/1.05 var(--police);letter-spacing:-.03em;margin:0 0 6px;overflow-wrap:anywhere}
.mini .affiche-qui{font-size:14px;margin-bottom:12px}
.mini .besoins{gap:6px;margin-bottom:12px}
.mini .besoin{font-size:12.5px;min-height:26px;padding:3px 10px 3px 8px}
.mini-attente{margin-top:auto;font-size:13px;color:var(--sec)}

/* Le contrôle segmenté (Réglages iOS) : 2 à 5 choix, la sélection en pilule blanche. */
.segmente{display:inline-flex;padding:3px;border-radius:var(--r-pilule);background:var(--creux);gap:2px;max-width:100%}
.segmente button{min-height:40px;padding:0 16px;border-radius:var(--r-pilule);font-size:14.5px;font-weight:500;color:var(--sec);
  white-space:nowrap;transition:background-color .15s,color .15s,box-shadow .15s}
.segmente button[aria-pressed="true"]{background:var(--carte);color:var(--encre);box-shadow:var(--ombre-pilule)}
.segmente button:hover:not([aria-pressed="true"]){color:var(--encre)}
.segmente .compte{margin-left:6px;color:var(--sec);font-variant-numeric:tabular-nums}

/* Ce qui est revenu — centre de notifications iOS : cartes compactes, qui
   parle à gauche, l'heure à droite, deux lignes d'extrait, trois au plus. */
.notifs{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.notif{display:flex;gap:14px;align-items:flex-start;width:100%;min-width:0;padding:16px 18px;text-align:left;cursor:pointer}
.notif-c{flex:1;min-width:0}
.notif-t{display:flex;align-items:baseline;gap:10px}
.notif-t b{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notif-h{flex:none;font-size:13px;color:var(--sec)}
.notif-x{font-size:15px;line-height:1.45;color:var(--sec);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px}

/* L'entrée vers Stella (accueil) : une invitation, pas un formulaire. */
.invite{padding:32px 28px;text-align:center;background:linear-gradient(180deg,var(--bleu-t),var(--carte) 70%)}
.invite .marque-stella{margin:0 auto 14px}
.invite .titre-section{margin-bottom:6px}
.invite .discret{margin:0 auto 22px;max-width:52ch}
.invite .chips{justify-content:center}

/* ── la marque de Stella : une étoile au trait, qui respire quand elle
     réfléchit ── */
.marque-stella{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--carte);
  box-shadow:var(--ombre)}
.marque-stella img{width:28px;height:28px}
.respire{animation:respire 1.8s ease-in-out infinite}

/* ── formulaires (formulaires iOS : libellé au-dessus, blocs arrondis) ── */
.champ,.zone{display:block;width:100%;border:0;border-radius:14px;background:var(--carte);padding:0 16px;
  font-size:16px;line-height:1.5;color:var(--encre);box-shadow:inset 0 0 0 1px var(--ligne-f);transition:box-shadow .15s}
.champ{height:50px}
.zone{min-height:112px;padding:13px 16px;resize:vertical}
.champ::placeholder,.zone::placeholder{color:var(--ter)}
.champ:focus,.zone:focus{outline:none;box-shadow:inset 0 0 0 2px var(--bleu-f),var(--anneau)}
.champ[aria-invalid="true"],.zone[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--panne)}
.libelle{display:block;font-size:14px;font-weight:600;margin:0 0 7px 2px}
.libelle small{font-weight:400;color:var(--sec)}
.form{display:grid;gap:18px}
.form-ligne{display:grid;gap:14px}
@media(min-width:640px){.form-ligne{grid-template-columns:repeat(2,minmax(0,1fr))}}
.aide{font-size:14px;line-height:1.5;color:var(--sec);min-height:21px}
.aide.erreur{color:var(--panne)}

/* Des choix en cartes (le point binôme) : un mot, une forme, l'état coché. */
.choix{display:grid;gap:10px}
@media(min-width:760px){.choix{grid-template-columns:repeat(3,minmax(0,1fr))}}
.choix-c{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 16px;border-radius:14px;
  background:var(--carte);box-shadow:inset 0 0 0 1px var(--ligne-f);font-size:15.5px;font-weight:500;line-height:1.3;cursor:pointer;
  transition:box-shadow .15s,background-color .15s}
.choix-c:hover{box-shadow:inset 0 0 0 1px var(--bleu-f)}
/* La case couvre toute la carte : la cible fait la taille de la carte (56 px). */
.choix-c input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.choix-c .rond{flex:none;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ligne-f);display:grid;place-items:center}
.choix-c .rond::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--bleu-f);transform:scale(0);transition:transform .18s var(--spring)}
.choix-c:has(input:checked){box-shadow:inset 0 0 0 2px var(--bleu-f);background:var(--bleu-t)}
.choix-c:has(input:checked) .rond{box-shadow:inset 0 0 0 1.5px var(--bleu-f)}
.choix-c:has(input:checked) .rond::after{transform:scale(1)}
.choix-c:has(input:focus-visible){outline:2px solid var(--bleu-f);outline-offset:2px}

/* Une liste groupée (Réglages iOS) : un bloc blanc arrondi, des rangées. */
.groupe{background:var(--carte);border-radius:var(--r-carte);box-shadow:var(--ombre);overflow:hidden}
.rangee{display:flex;align-items:center;gap:14px;width:100%;min-height:60px;padding:12px 18px;text-align:left;color:var(--encre);
  text-decoration:none;transition:background-color .14s}
.rangee+.rangee{box-shadow:inset 0 1px 0 var(--ligne)}
a.rangee:hover,button.rangee:hover{background:var(--toile);text-decoration:none}
.rangee-c{flex:1;min-width:0}
.rangee-t{display:block;font-size:16px;font-weight:500;line-height:1.35}
.rangee-s{display:block;font-size:13.5px;color:var(--sec);margin-top:1px}
.rangee-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--bleu-t);color:var(--bleu-f)}
.rangee-ic .i{width:19px;height:19px}
.rangee-fin{flex:none;color:var(--sec)}
.rangee-fin .i{width:18px;height:18px}

/* ── feuilles (feuilles iOS) : centrée sur ordinateur, monte du bas au
     téléphone ; un seul bouton plein ; Échap ferme ── */
.voile{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;background:var(--voile);
  animation:fondu .2s linear both}
.feuille{position:relative;display:flex;flex-direction:column;width:min(540px,100%);max-height:min(88vh,860px);
  background:var(--carte);border-radius:var(--r-tuile);box-shadow:var(--ombre-feuille);overflow:hidden;
  animation:feuille .24s var(--spring) both;outline:none}
.feuille-tete{flex:none;padding:26px 64px 12px 28px}
.feuille-tete .surtitre{margin-bottom:6px}
.feuille-titre{font:800 24px/1.12 var(--police);letter-spacing:-.03em;overflow-wrap:anywhere}
.feuille-corps{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 28px 22px;font-size:15.5px;line-height:1.55}
.feuille-pied{flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px;padding:14px 28px 22px;
  border-top:1px solid var(--ligne)}
.feuille-fermer{position:absolute;top:14px;right:14px;z-index:2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--sec);
  transition:background-color .14s}
.feuille-fermer:hover{background:var(--toile);color:var(--encre)}
.voile.part{opacity:0;transition:opacity .18s linear}
.voile.part .feuille{transform:translateY(6px) scale(.985);transition:transform .18s var(--spring)}
.engagements{display:grid;gap:12px;list-style:none;margin:6px 0 4px}
.engagements li{display:flex;gap:12px;align-items:flex-start}
.engagements .i{width:20px;height:20px;color:var(--ok);margin-top:1px}
.note{margin-top:16px;padding:12px 14px;border-radius:14px;background:var(--toile);font-size:14.5px;color:var(--sec)}
/* La feuille d'actions (« Passer ») : chaque option est le geste. */
.options{display:grid;gap:8px}
.option{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 18px;border-radius:14px;
  background:var(--toile);font-size:16px;font-weight:500;text-align:left;transition:background-color .14s}
.option:hover{background:var(--creux)}
.option .i{color:var(--sec)}

/* ── toasts : ils montent du bas, s'empilent, partent en fondu ── */
.toasts{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;align-items:center;
  gap:8px;pointer-events:none;max-width:calc(100vw - 32px)}
.toast{display:flex;align-items:center;gap:12px;pointer-events:auto;background:var(--encre);color:var(--sur-plein);border-radius:14px;
  padding:12px 18px;font-size:14.5px;line-height:1.4;box-shadow:var(--ombre-toast);animation:toast .3s var(--spring) both}
.toast .i{width:16px;height:16px;color:var(--bleu)}
.toast.erreur .i{color:var(--panne-t)}
.toast-b{flex:none;font-size:13.5px;font-weight:700;color:var(--sur-plein);border-radius:9px;padding:6px 12px;
  box-shadow:inset 0 0 0 1px var(--filet-clair);min-height:32px}
.toast.part{opacity:0;transform:translateY(5px);transition:opacity .2s linear,transform .2s var(--spring)}

/* ── les trois états : vide, chargement, panne ─────────────────────────── */
.vide{padding:44px 28px;text-align:center}
.vide-signe{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 18px;border-radius:50%;background:var(--bleu-t);color:var(--bleu-f)}
.vide-signe .i{width:26px;height:26px}
.vide-phrase{font:700 19px/1.35 var(--police);letter-spacing:-.015em;max-width:30ch;margin:0 auto 10px;text-wrap:balance}
.vide .discret{max-width:48ch;margin:0 auto 22px}
.vide .gestes{justify-content:center}
.panne{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:var(--r-carte);background:var(--panne-t);color:var(--encre)}
.panne-signe{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--carte);color:var(--panne)}
.panne-c{flex:1;min-width:0}
.panne-t{font-weight:600;color:var(--panne);margin-bottom:2px}
.panne-x{font-size:15px;line-height:1.5;color:var(--encre)}
.panne-tech{margin-top:4px;font-size:13px;line-height:1.45;color:var(--sec)}
.panne .gestes{margin-top:12px}
.sq{display:block;border-radius:8px;background:var(--creux);animation:squel 1.3s ease-in-out infinite}
.sq-l{height:12px;margin-top:10px}
.sq-l:nth-child(2n){width:86%;animation-delay:.15s}
.sq-l:nth-child(3n){width:62%;animation-delay:.3s}
.sq-titre{height:30px;width:46%}
.sq-bloc{height:220px;border-radius:var(--r-tuile)}
.sq-carte{height:84px;border-radius:var(--r-carte)}
.charge-mot{font-size:14px;color:var(--sec);margin-top:14px}

/* ── succès de mise en relation — suivi de commande Apple Store : des étapes
     NOMMÉES, numérotées, reliées ── */
.etapes{list-style:none;display:grid;gap:0;margin-top:8px}
.etape{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;padding-bottom:30px}
.etape:last-child{padding-bottom:0}
.etape::before{content:"";position:absolute;left:21px;top:46px;bottom:4px;width:2px;border-radius:1px;background:var(--creux)}
.etape:last-child::before{display:none}
.etape-n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--carte);box-shadow:var(--ombre),inset 0 0 0 1.5px var(--bleu-f);
  color:var(--bleu-f);font:700 18px/1 var(--police)}
.etape-c{padding-top:8px;min-width:0}
.etape-c .titre-carte{margin-bottom:6px}
.etape-gestes{margin-top:14px}
.contact{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:14px;padding:16px 18px;border-radius:var(--r-carte);
  background:var(--carte);box-shadow:var(--ombre)}
.contact-qui{flex:1 1 180px;min-width:0}
.contact-role{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--sec)}
.contact-nom{font-weight:600;font-size:16px;overflow-wrap:anywhere}
.contact .b{min-height:44px;max-width:100%;min-width:0;padding:0 16px;font-size:15px}
.contact .b span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.repetition{display:flex;align-items:center;gap:10px;margin-bottom:28px;padding:10px 14px;border-radius:12px;background:var(--attn-t);
  color:var(--attn);font-size:14px;line-height:1.4;width:fit-content;max-width:100%}
.repetition .i{width:16px;height:16px}

/* ── Stella — Messages, et la réflexion repliée de Claude ──────────────────
   Le texte de Stella sans bulle, la personne en bulle ; l'étoile respire
   pendant la réflexion ; les outils repliés en une ligne ; l'escalade en
   carte d'action distincte du fil ; un composeur en pilule. */
.stella{max-width:760px;margin:0 auto;display:flex;flex-direction:column;min-height:calc(100vh - 48px)}
.stella-tete{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.stella-tete .marque-stella{width:44px;height:44px}
.stella-tete .marque-stella img{width:24px;height:24px}
.stella-nom{font:700 19px/1.1 var(--police);letter-spacing:-.015em}
.stella-esp{flex:1}
.stella-accueil{padding:56px 0 24px}
.stella-accueil .titre-vue{margin-bottom:12px}
.stella-accueil .phrase{margin-bottom:26px}
.stella-fil{flex:1;display:flex;flex-direction:column;gap:26px;padding:24px 0 28px}
.m-moi{align-self:flex-end;max-width:min(84%,560px);background:var(--bleu-t);border-radius:20px 20px 6px 20px;padding:12px 17px;
  font-size:16px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;animation:arrivee .26s var(--spring) both}
.m-stella{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;animation:arrivee .26s var(--spring) both}
.m-stella-mark{width:32px;height:32px;border-radius:50%;background:var(--carte);box-shadow:var(--ombre);display:grid;place-items:center}
.m-stella-mark img{width:18px;height:18px}
.m-stella-c{min-width:0;padding-top:4px}
.m-texte{max-width:66ch;font-size:16.5px;line-height:1.68;white-space:pre-wrap;overflow-wrap:anywhere}
.m-texte.curseur::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:3px;vertical-align:-.16em;background:var(--bleu-f);
  animation:clignote 1.05s steps(1) infinite}
.m-outil{display:flex;align-items:center;gap:8px;min-height:22px;font-size:13.5px;color:var(--sec)}
.m-outil .i{width:14px;height:14px;color:var(--bleu-f)}
.m-sources{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.m-sources .surtitre{width:100%;margin-bottom:-2px}
.m-relances{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.m-relances .chip{min-height:40px;padding:7px 14px;font-size:14.5px}
.m-systeme{grid-template-columns:minmax(0,1fr)}
.m-systeme .m-stella-mark{display:none}
.m-systeme .escalade{margin-left:0}
.m-provenance{margin-bottom:6px}
.m-systeme .m-texte{font-size:15.5px;color:var(--sec)}
/* La carte d'escalade : distincte du fil, la seule action pleine du moment. */
.escalade{margin:14px 0 0;max-width:620px;padding:20px 22px;border-radius:var(--r-carte);background:var(--carte);box-shadow:var(--ombre)}
.escalade .titre-carte{margin:4px 0 6px}
.escalade .zone{min-height:88px;margin:12px 0 14px;background:var(--toile);box-shadow:none}
.escalade .zone:focus{box-shadow:inset 0 0 0 2px var(--bleu-f),var(--anneau)}
.escalade-ok{display:flex;gap:14px;align-items:flex-start}
.escalade-ok .etape-icone{width:44px;height:44px;background:var(--ok-t);color:var(--ok)}
.escalade-ok .etape-icone .i{width:22px;height:22px}
.reference{font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--sec);font-variant-numeric:tabular-nums}
.composeur-zone{position:sticky;bottom:0;padding:12px 0 20px;background:linear-gradient(var(--toile-0),var(--toile) 34%);z-index:5}
.composeur{display:flex;align-items:flex-end;gap:8px;padding:6px 6px 6px 20px;border-radius:28px;background:var(--carte);
  box-shadow:var(--ombre),inset 0 0 0 1px var(--ligne-f);transition:box-shadow .16s}
.composeur:focus-within{box-shadow:var(--ombre),inset 0 0 0 1.5px var(--bleu-f),var(--anneau)}
.composeur textarea{flex:1;min-width:0;border:0;outline:0;background:none;resize:none;padding:10px 0;max-height:180px;
  font-size:16px;line-height:1.5}
.composeur textarea::placeholder{color:var(--ter)}
.envoyer{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--rouge);color:var(--sur-plein);
  transition:background-color .15s,opacity .15s,transform .12s var(--spring)}
.envoyer:hover:not(:disabled){background:var(--rouge-f)}
.envoyer:active:not(:disabled){transform:scale(.94)}
.envoyer:disabled{opacity:.3;cursor:default}
.envoyer .i{width:20px;height:20px;stroke-width:2}
.urgence{margin-top:10px;text-align:center;font-size:13px;line-height:1.45;color:var(--sec)}
.urgence a{font-weight:700;color:var(--encre)}

/* ── demandes — Messages / WhatsApp : la liste des fils, le fil ouvert ── */
.demandes{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.demandes>*,.fils>*{min-width:0}
@media(min-width:1000px){.demandes{grid-template-columns:minmax(300px,380px) minmax(0,1fr)}}
.fils{display:grid;gap:8px;min-width:0}
.fil-l{display:flex;gap:14px;align-items:flex-start;width:100%;padding:16px 16px 16px 14px;border-radius:var(--r-carte);text-align:left;
  background:var(--carte);box-shadow:var(--ombre);transition:box-shadow .15s,transform .2s var(--spring)}
.fil-l:hover{transform:translateY(-2px)}
.fil-l[aria-current="true"]{box-shadow:var(--ombre),inset 0 0 0 2px var(--bleu-f)}
.fil-l-c{flex:1;min-width:0}
.fil-l-t{display:flex;align-items:baseline;gap:10px}
.fil-l-t b{flex:1;min-width:0;font-weight:600;font-size:15.5px;line-height:1.35;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.fil-l-h{flex:none;font-size:13px;color:var(--sec)}
.fil-l-x{font-size:14.5px;line-height:1.45;color:var(--sec);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fil-l-pied{display:flex;align-items:center;gap:10px;margin-top:10px}
.point-nl{width:10px;height:10px;border-radius:50%;background:var(--bleu-f);flex:none}
.fil-l-nl{font-size:13px;font-weight:600;color:var(--bleu-f)}
.conv{display:flex;flex-direction:column;min-height:420px}
.conv-tete{padding:22px 24px 18px;border-bottom:1px solid var(--ligne)}
.conv-tete .titre-carte{font-size:21px;margin:6px 0 10px;overflow-wrap:anywhere}
.conv-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.conv-fil{flex:1;display:flex;flex-direction:column;gap:10px;padding:20px 24px}
.jour{display:flex;align-items:center;gap:14px;margin:10px 0 6px;font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--sec)}
.jour::before,.jour::after{content:"";flex:1;height:1px;background:var(--ligne)}
.bulle{max-width:min(84%,560px);padding:11px 16px 9px;border-radius:20px;font-size:15.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.bulle-heure{display:block;margin-top:4px;font-size:12px;color:var(--sec);text-align:right}
.bulle-moi{align-self:flex-end;background:var(--bleu-t);border-bottom-right-radius:6px}
.bulle-equipe{align-self:flex-start;background:var(--carte);box-shadow:inset 0 0 0 1px var(--ligne);border-bottom-left-radius:6px}
.bulle-qui{display:block;font-size:12.5px;font-weight:700;margin-bottom:3px;color:var(--encre)}
.bulle-stella{align-self:stretch;max-width:none;display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;
  background:var(--toile);font-size:14.5px;color:var(--sec)}
.bulle-stella img{width:18px;height:18px;margin-top:2px;flex:none}
.conv-pied{padding:14px 18px 18px;border-top:1px solid var(--ligne)}
.conv-pied .composeur{box-shadow:inset 0 0 0 1px var(--ligne-f)}
.conv-clos{padding:16px 24px 20px;border-top:1px solid var(--ligne);font-size:14.5px;color:var(--sec)}
.retour{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:-8px 0 8px -4px;padding:0 8px;border-radius:10px;
  font-size:15px;font-weight:500;color:var(--bleu-f)}
.retour:hover{background:var(--bleu-t)}

/* ── mon binôme ───────────────────────────────────────────────────────── */
.binome-carte .affiche-corps{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.binome-carte .affiche-nom{font-size:clamp(40px,4.4vw,52px);margin:4px 0 6px}
.binome-c{flex:1 1 260px;min-width:0}
.deuxieme{margin-top:10px}
.contact+.contact{margin-top:12px}
.demo-bloc{margin-top:22px;padding-top:18px;border-top:1px solid var(--ligne)}
.demo-bloc .surtitre{margin-bottom:10px}
.demo-bloc .discret{margin-top:10px}
.rdv{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:20px 22px}
.rdv-date{flex:1 1 220px;min-width:0}
.rdv-date .titre-carte{font-size:21px;margin-top:4px}
.sous-section{margin-top:32px}
.titre-historique{margin:0 0 10px 2px}
.historique-vide{padding:16px 18px}
.historique{list-style:none}
.historique li{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 18px}
.historique li+li{box-shadow:inset 0 1px 0 var(--ligne)}
.historique .h-mood{flex:1;min-width:0;font-weight:500}
.historique .h-date{flex:none;font-size:14px;color:var(--sec)}
.humeur{flex:none;width:10px;height:10px;border-radius:50%}
.humeur[data-mood="bien"]{background:var(--ok)}
.humeur[data-mood="peu_actif"]{background:var(--attn)}
.humeur[data-mood="aide"]{background:var(--panne);border-radius:2px;transform:rotate(45deg) scale(.86)}
.creneau .rangee-c{padding-right:6px}
.creneau .b{min-height:40px;padding:0 16px;font-size:14.5px}
.confirme{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:var(--r-carte);background:var(--ok-t)}
.confirme .i{width:22px;height:22px;color:var(--ok);margin-top:2px}
.confirme b{display:block;margin-bottom:2px}
.confirme.equipe{background:var(--bleu-t)}
.confirme.equipe .i{color:var(--bleu-f)}

/* ── ressources : listes groupées, une rangée = un document ─────────────── */
.ressources .section:first-of-type{margin-top:0}

/* ── l'écran de l'équipe — back office : Mail sur Mac (liste + volet),
     listes intelligentes de Rappels (filtres nommés), Fitness « Résumé »
     pour la mesure. Corps 14,5 px, lignes de 44 px. ── */
.eq{min-height:100vh;display:flex;flex-direction:column}
.eq-haut{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:12px var(--gout);
  background:var(--barre-fond);-webkit-backdrop-filter:saturate(1.3) blur(20px);backdrop-filter:saturate(1.3) blur(20px);
  border-bottom:1px solid var(--ligne)}
.eq-haut .marque{padding:0}
.eq-haut .moi{margin:0 0 0 auto;width:auto}
.eq-page{flex:1;width:100%;max-width:1440px;margin:0 auto;padding:28px var(--gout) 64px}
.eq-entete{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.eq-entete .titre-vue{font-size:34px}
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.filtres-barre{display:flex;align-items:center;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;margin-bottom:18px}
.filtres-barre .filtres{margin-bottom:0}
.filtres-barre .raccourcis{margin:0}
.gestes-demandes{margin-bottom:18px}
.fil-l-nonlu .fil-l-t b{font-weight:800}
.filtre{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:var(--r-pilule);font-size:14.5px;font-weight:500;
  color:var(--sec);background:transparent;box-shadow:inset 0 0 0 1px var(--ligne-f);transition:background-color .14s,color .14s,box-shadow .14s}
.filtre:hover{color:var(--encre)}
.filtre[aria-pressed="true"]{background:var(--encre);color:var(--sur-plein);box-shadow:none}
.filtre .n{font-variant-numeric:tabular-nums;font-weight:600}
.file{display:grid;gap:20px;align-items:start}
@media(min-width:1040px){.file{grid-template-columns:minmax(0,1.1fr) minmax(380px,1fr)}}
.lignes{background:var(--carte);border-radius:var(--r-carte);box-shadow:var(--ombre);overflow:hidden}
.ligne{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"motif etat" "meta meta";gap:4px 14px;align-items:center;
  width:100%;min-height:44px;padding:10px 16px;
  text-align:left;font-size:14.5px;line-height:1.35;transition:background-color .12s}
.ligne+.ligne{box-shadow:inset 0 1px 0 var(--ligne)}
.ligne:hover{background:var(--toile)}
.ligne[aria-selected="true"]{background:var(--bleu-t);box-shadow:inset 3px 0 0 var(--bleu-f)}
.ligne-x{grid-template-areas:"motif etat" "extrait extrait" "meta meta"}
.ligne-motif{grid-area:motif;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ligne-extrait{grid-area:extrait;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.ligne-meta{grid-area:meta;display:flex;flex-wrap:wrap;gap:2px 8px;align-items:center;min-width:0;color:var(--sec);font-size:13.5px}
.ligne-meta span{white-space:nowrap}
.ligne-meta .sep{opacity:.6}
.ligne>.etat{grid-area:etat;justify-self:end}
.ligne-meta .etat{height:22px;padding:0 8px;font-size:12px}
.nouvelles{display:flex;justify-content:center;margin:0 0 12px}
.nouvelles .b{min-height:40px;font-size:14.5px}
.volet{position:sticky;top:84px}
.volet .conv{min-height:0}
.volet .conv-fil{max-height:calc(100vh - 380px);min-height:180px;overflow-y:auto}
.volet-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.volet-actions .b{min-height:40px;padding:0 16px;font-size:14.5px}
.volet .zone{min-height:96px;background:var(--toile);box-shadow:none}
.volet .zone:focus{box-shadow:inset 0 0 0 2px var(--bleu-f),var(--anneau)}
.raccourcis{margin-top:10px;font-size:12.5px;color:var(--sec)}
.raccourcis kbd{font:600 12px/1 var(--police);padding:2px 6px;border-radius:5px;background:var(--creux);color:var(--encre)}

/* La mesure — Fitness « Résumé », Temps d'écran : une tuile par chose
   mesurée, un grand chiffre, une phrase, la comparaison en mots. */
.tuiles{display:grid;gap:16px}
@media(min-width:760px){.tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tuile-large{grid-column:1 / -1}
.tuile .surtitre{margin-bottom:12px}
.tuile .chiffre{margin-bottom:10px}
.tuile-phrase{font-size:15px;line-height:1.5;color:var(--encre);max-width:52ch}
.tuile-comp{font-size:14px;line-height:1.5;color:var(--sec);margin-top:4px}
.tuile .non-mesure{font:700 24px/1.2 var(--police);color:var(--sec);margin-bottom:8px}
.tunnel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;margin:6px 0 4px}
@media(min-width:900px){.tunnel{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tunnel-p{position:relative;min-width:0}
.tunnel-p .chiffre{font-size:44px;margin-bottom:6px}
.tunnel-l{font-size:14.5px;font-weight:600}
.tunnel-c{font-size:13.5px;color:var(--sec)}
/* L'histogramme de 14 jours : une teinte, la semaine en cours en --bleu-f,
   la précédente en --bleu ; la valeur au survol et au focus, et le détail
   en tableau plus bas (jamais l'infobulle seule). */
.histo-titre{margin-top:20px;font-size:13px;font-weight:600;color:var(--sec)}
.histo-titre+.histo{margin-top:8px}
.histo{display:flex;align-items:flex-end;gap:2px;height:72px;margin-top:18px;padding-bottom:1px;border-bottom:1px solid var(--ligne)}
.histo-b{position:relative;flex:1;min-width:0;height:100%;display:flex;align-items:flex-end;justify-content:center;cursor:default;outline:none}
.histo-b i{display:block;width:min(100%,24px);border-radius:4px 4px 0 0;background:var(--bleu-f);min-height:2px;transition:filter .12s}
.histo-b[data-avant="true"] i{background:var(--bleu)}
.histo-b:hover i,.histo-b:focus-visible i{filter:brightness(1.12)}
.histo-b:focus-visible{box-shadow:0 0 0 2px var(--bleu-f);border-radius:4px}
.histo-pied{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-size:12px;color:var(--sec)}
.infobulle{position:fixed;z-index:85;pointer-events:none;padding:8px 11px;border-radius:10px;background:var(--encre);color:var(--sur-plein);
  font-size:13px;line-height:1.35;box-shadow:var(--ombre-toast);transform:translate(-50%,calc(-100% - 10px))}
.infobulle b{display:block;font-size:15px}
.detail{margin-top:24px}
.detail summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-size:15px;font-weight:500;color:var(--bleu-f);list-style:none}
.detail summary::-webkit-details-marker{display:none}
.detail summary .i{width:16px;height:16px;transition:transform .2s var(--spring)}
.detail[open] summary .i{transform:rotate(90deg)}
.tableau-zone{overflow-x:auto;margin-top:8px;border-radius:var(--r-carte);background:var(--carte);box-shadow:var(--ombre)}
.tableau{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.tableau th,.tableau td{padding:10px 14px;text-align:right;white-space:nowrap}
.tableau th:first-child,.tableau td:first-child{text-align:left}
.tableau thead th{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sec);box-shadow:inset 0 -1px 0 var(--ligne)}
.tableau tbody tr+tr td{box-shadow:inset 0 1px 0 var(--ligne)}
.creneaux-eq{display:grid;gap:24px;align-items:start}
.carte-p>.titre-carte{margin-bottom:16px}
body.ombre-dite .avert[data-code="ombre"]{display:none}
@media(min-width:1000px){.creneaux-eq{grid-template-columns:minmax(0,1.3fr) minmax(320px,1fr)}}

/* ── la page de connexion — une question par écran (configuration de
     l'iPhone, validation en deux étapes d'Apple) ── */
.cx-corps{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:clamp(40px,12vh,120px) 16px 40px}
.cx{width:min(460px,100%)}
.cx .marque{padding:0}
.cx-q{font:800 34px/1.04 var(--police);letter-spacing:-.035em;margin:8px 0 12px;text-wrap:balance}
.cx-q:focus{outline:none}
.cx-phrase{font-size:17px;line-height:1.5;color:var(--sec);margin-bottom:24px}
.cx-phrase b{color:var(--encre);font-weight:600;overflow-wrap:anywhere}
.cx-sur{margin-top:34px}
.cx-form{display:grid;gap:12px}
.cx-form .b{width:100%}
.cx-cases{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
/* Le code de l'équipe a huit chiffres (relecture du 2/10, I5) : huit cases sur une ligne. */
.cx-cases[data-longueur="8"]{grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.cx-cases[data-longueur="8"] input{font-size:22px}
.cx-cases input{width:100%;height:60px;border:0;border-radius:14px;background:var(--carte);text-align:center;font:700 26px var(--police);font-variant-numeric:tabular-nums;
  box-shadow:inset 0 0 0 1px var(--ligne-f);caret-color:var(--bleu-f);transition:box-shadow .15s}
.cx-cases input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--bleu-f),var(--anneau)}
.cx-liens{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px;margin-top:6px}
.cx-indice{display:flex;align-items:center;gap:10px;margin-top:4px;padding:10px 14px;border-radius:12px;background:var(--attn-t);color:var(--attn);
  font-size:14px;line-height:1.4}
.cx-indice b{font-variant-numeric:tabular-nums;letter-spacing:.12em;color:var(--encre)}
.cx-pied{margin-top:28px;font-size:14px;line-height:1.5;color:var(--sec)}
@media(min-width:600px){
  .cx-corps{justify-content:center;padding-top:40px}
  .cx-carte{background:var(--carte);border-radius:var(--r-tuile);box-shadow:var(--ombre);padding:40px 38px 30px}
  .cx-carte .champ,.cx-carte .cx-cases input{background:var(--toile)}
  .cx-q{font-size:40px}
}

/* ══ v2.1 — les retours de Mourad du 5/10/2026 (ARCHITECTURE.md §16) ══════════
   Mêmes jetons, aucune teinte de plus : la bascule de démo, le contrôle segmenté
   coulissant, les histoires (étagère aimantée), le calendrier des Ombres,
   l'accueil d'une question par écran (critères), les cartes de mentorat qui se
   déplient, le MOOC (étagères et leçon), l'aide (fils, l'équipe en direct, le
   volet de lecture), la pastille de Stella et son panneau. */

/* ── la bascule de démonstration (§16.8) : visible, jamais confondue avec un
     réglage — le lavis « attention » des indices de démo de la connexion. ── */
.demo-barre{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;background:var(--attn-t);color:var(--attn)}
.demo-lat{margin:auto 0 10px}
.demo-lat+.moi{margin-top:0}
.demo-mobile{display:none}
.demo-tete{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.3;font-weight:500}
.demo-badge{flex:none;display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--r-pilule);background:var(--attn);
  color:var(--sur-plein);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.demo-barre .seg-glisse{width:100%;background:var(--carte)}
.demo-barre .seg-glisse button{min-height:40px;padding:0 8px;font-size:13px;white-space:normal;line-height:1.2}
.demo-barre .seg-pouce{background:var(--attn-t);box-shadow:inset 0 0 0 1.5px var(--attn)}
.demo-barre .seg-glisse button[aria-pressed="true"]{color:var(--encre);font-weight:600}
/* Trois états de démo (nouveau, avant la première rencontre, en binôme) : des libellés qui
   passent à la ligne plutôt qu'un texte coupé. */
.demo-barre .seg-demo button{min-height:48px;padding:4px 6px;font-size:12.5px;line-height:1.15}

/* ── le contrôle segmenté coulissant (Réglages iOS, contrôle segmenté) : la
     pilule blanche glisse d'un choix à l'autre au ressort ; colonnes égales. ── */
.seg-glisse{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);padding:3px;border-radius:var(--r-pilule);
  background:var(--creux);max-width:100%;isolation:isolate}
.seg-glisse button{position:relative;z-index:1;min-height:40px;padding:0 18px;border-radius:var(--r-pilule);font-size:14.5px;font-weight:500;
  color:var(--sec);white-space:nowrap;text-align:center;transition:color .2s linear}
.seg-glisse button:hover:not([aria-pressed="true"]){color:var(--encre)}
.seg-glisse button[aria-pressed="true"]{color:var(--encre)}
.seg-glisse .compte{font-variant-numeric:tabular-nums}
.seg-pouce{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / var(--n,2));border-radius:var(--r-pilule);
  background:var(--carte);box-shadow:var(--ombre-pilule);transform:translateX(calc(var(--i,0) * 100%));transition:transform .34s var(--spring)}
.seg-n{margin-left:4px;display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--bleu-f);
  color:var(--sur-plein);font-size:12px;font-weight:700;line-height:20px;font-variant-numeric:tabular-nums}

/* ── un rail horizontal aimanté (étagères Apple TV / Apple Books) : il file
     jusqu'au bord de la page ; les bords se fondent tant qu'il reste à défiler. ── */
.rail{--fondu-g:0px;--fondu-d:0px;display:flex;gap:16px;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--gout);margin-inline:calc(-1 * var(--gout));padding:6px var(--gout) 22px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fondu-g),#000 calc(100% - var(--fondu-d)),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 var(--fondu-g),#000 calc(100% - var(--fondu-d)),transparent 100%)}
.rail::-webkit-scrollbar{display:none}
.rail[data-debut="false"]{--fondu-g:28px}
.rail[data-fin="false"]{--fondu-d:48px}
.rail>li{flex:0 0 auto;scroll-snap-align:start;display:flex}
.etagere-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 16px;margin-bottom:10px;flex-wrap:wrap}
.etagere-tete>div:first-child{min-width:0;flex:1 1 260px}
.etagere-tete .surtitre{margin-bottom:8px}
.etagere-tete .discret{margin-top:6px;max-width:60ch}
.etagere-gestes{display:flex;align-items:center;gap:8px;flex:none}
.etagere-pied{display:flex;margin-top:-6px}
.fleches{display:flex;gap:8px}

/* ── les histoires des Ombres (§16.2) — référence : les étagères « À la une »
     de l'App Store et d'Apple TV, une carte de récit par domaine. Le lavis de la
     teinte du domaine (26 % au plus sous le texte), le récit en Manrope, le
     prénom d'affichage ; une image seulement si l'équipe en a publié une. ── */
.histoires{position:relative}
.histoire{width:min(340px,78vw);display:flex;flex-direction:column;border-radius:var(--r-tuile);overflow:hidden;box-shadow:var(--ombre);
  background:linear-gradient(160deg,color-mix(in srgb,var(--teinte) 26%,var(--carte)) 0%,color-mix(in srgb,var(--teinte) 9%,var(--carte)) 72%,var(--carte) 100%)}
.histoire-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--creux)}
.histoire-c{flex:1;display:flex;flex-direction:column;gap:14px;padding:22px 22px 20px}
.histoire-dom{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--sec)}
.histoire-dom::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:color-mix(in srgb,var(--teinte) 55%,var(--encre))}
.histoire-texte{font:500 16px/1.55 var(--police);color:var(--encre);text-wrap:pretty;overflow-wrap:anywhere}
.histoire-qui{margin-top:auto;padding-top:4px;font-size:14px;font-weight:600;color:var(--encre)}
.histoire-qui::before{content:"— ";font-weight:400;color:var(--sec)}
.histoires-vide{display:flex;align-items:center;gap:18px;padding:26px 24px;border-radius:var(--r-tuile);
  background:linear-gradient(160deg,var(--bleu-t),var(--carte) 75%);box-shadow:var(--ombre)}
.histoires-vide .vide-signe{margin:0;flex:none}
.histoires-vide .vide-phrase{margin:0 0 4px;text-align:left;max-width:none}
.histoires-vide .discret{margin:0}

/* ── le calendrier des Ombres (§16.2) — Calendrier iOS en liste : la date en
     bloc à gauche, ce qui se passe, l'heure et le lieu ; le genre en un mot. ── */
.agenda .rangee{min-height:72px;align-items:center}
.date-bloc{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:52px;height:56px;border-radius:14px;
  background:var(--toile);box-shadow:inset 0 0 0 1px var(--ligne)}
.date-j{font:800 22px/1 var(--police);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.date-m{margin-top:3px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sec)}
.genre{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:var(--r-pilule);background:var(--bleu-t);
  color:var(--bleu-n);font-size:12px;font-weight:600;line-height:1;white-space:nowrap;vertical-align:1px}
.genre::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.genre[data-genre="webinaire"]::before{border-radius:1px}
.genre[data-genre="permanence"]::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.rangee-t .genre{margin-left:8px}
.rangee-lien{flex:none}
.gestes-pied{margin-top:16px}

/* ── une question par écran (configuration de l'iPhone) : les critères ── */
.onb{max-width:640px;margin:0 auto}
.onb-prog{display:flex;align-items:center;gap:12px;margin-bottom:30px}
.onb-barres{flex:1;display:flex;gap:6px}
.onb-barres i{flex:1;height:4px;border-radius:2px;background:var(--creux);transition:background-color .3s}
.onb-barres i[data-etat="fait"]{background:var(--bleu)}
.onb-barres i[data-etat="courant"]{background:var(--bleu-f)}
.onb-pos{flex:none;font-size:13.5px;color:var(--sec);font-variant-numeric:tabular-nums}
.onb-q{font:800 clamp(28px,3.4vw,38px)/1.04 var(--police);letter-spacing:-.035em;margin:10px 0 12px;text-wrap:balance}
.onb-q:focus{outline:none}
.onb .phrase{margin-bottom:26px}
.onb .choix{grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.onb .choix-multi{grid-template-columns:repeat(2,minmax(0,1fr))}}
.onb-gestes{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:30px;flex-wrap:wrap}
.onb-note{margin-top:22px;font-size:14px;line-height:1.5;color:var(--sec)}
/* La case à cocher d'un choix multiple : un carré arrondi, la coche dedans. */
.choix-c .carre{flex:none;width:20px;height:20px;border-radius:6px;box-shadow:inset 0 0 0 1.5px var(--ligne-f);display:grid;place-items:center;
  color:var(--sur-plein);transition:background-color .15s,box-shadow .15s}
.choix-c .carre .i{width:14px;height:14px;stroke-width:2.6;opacity:0;transform:scale(.4);transition:opacity .15s,transform .18s var(--spring)}
.choix-c:has(input:checked) .carre{background:var(--bleu-f);box-shadow:none}
.choix-c:has(input:checked) .carre .i{opacity:1;transform:none}
.choix-c[data-domaine] .point-dom{flex:none;width:9px;height:9px;border-radius:50%;margin-left:auto;background:color-mix(in srgb,var(--teinte) 60%,var(--encre))}
.choix-s{display:block;font-size:13.5px;font-weight:400;color:var(--sec);margin-top:2px}

/* Accompagner : le résumé des critères, en une ligne qu'on touche pour réviser. */
/* Une ligne, jamais trois : la phrase se coupe en points de suspension, « Mes critères »
   reste au bout, à portée (la révision montre tout). */
.criteres{display:flex;flex-wrap:nowrap;align-items:center;gap:8px 12px;margin:-14px 0 22px;min-width:0}
.criteres-l{flex:0 1 auto;min-width:0;font-size:14px;color:var(--sec);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.criteres .b-lien{flex:none}
.criteres .b-lien{min-height:44px;font-size:14.5px}
.pile-bas{display:flex;justify-content:center;margin-top:8px}

/* Les feuillets du dossier : chacun son ton (la démarcation), son titre d'action en H2,
   une icône. La fiche du jeune a le lavis léger de sa teinte ; l'éducateur la toile ; les
   nouvelles le baby blue mêlé de blanc (un lavis opaque : jamais un baby blue
   translucide sur une teinte) ; la feuille de route le blanc cerclé. */
.zm{position:relative;min-width:0;border-radius:var(--r-zone);padding:20px 22px 22px;
  box-shadow:0 1px 2px rgba(2,3,24,.05),0 8px 22px -12px rgba(2,3,24,.18)}
.zm-fiche{background:color-mix(in srgb,var(--teinte) 9%,var(--carte))}
.zm-contacts{background:var(--toile)}
.zm-suivi{background:color-mix(in srgb,var(--bleu) 20%,var(--carte))}
.zm-notes{background:var(--carte);box-shadow:inset 0 0 0 1px var(--ligne-f),0 1px 2px rgba(2,3,24,.05),0 8px 22px -12px rgba(2,3,24,.18)}
.zm-t{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.zm-ic{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--carte);color:var(--bleu-f);box-shadow:inset 0 0 0 1px var(--ligne)}
.zm-ic .i{width:16px;height:16px}
.zm-fiche .zm-ic{color:color-mix(in srgb,var(--teinte) 35%,var(--encre))}
.zm-notes .zm-ic{background:var(--creux);color:var(--encre);box-shadow:none}
.zm-titre{font-size:19px;font-weight:700;line-height:1.25;letter-spacing:-.018em;text-wrap:balance}
.zm-leg{margin-left:auto}
.zm-fiche .besoin{background:var(--blanc-voile)}
.zm-fiche .demande-origine{margin-top:14px}
.zm-contacts .contact{margin-top:0;box-shadow:none;padding:14px 16px}
.zm-contacts .contact+.contact{margin-top:10px}
.zm-du{margin:0 0 12px;font-size:14px;line-height:1.45;color:var(--encre);font-weight:500}
.zm-suivi .choix{grid-template-columns:minmax(0,1fr)}
.zm-suivi .choix-c{min-height:48px;padding:10px 14px}
.zm-suivi .zone{min-height:72px}
.zm-suivi .form{gap:14px}
.etape-icone{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--bleu-t);color:var(--bleu-f)}
.etape-icone .i{width:26px;height:26px}
.demande-origine{font:400 16px/1.6 var(--police);color:var(--encre);max-width:60ch;text-wrap:pretty;margin-top:12px}
/* Mes notes : des champs qui se lisent d'abord, s'écrivent ensuite ; au large, le projet
   et les premiers pas côte à côte, les notes libres dessous. */
.route{display:grid;gap:18px}
@media(min-width:760px){.zm-notes .route{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
  .zm-notes [data-champ-note="notes"]{grid-column:1 / -1}}
.champ-note .zone{min-height:96px;background:var(--toile);box-shadow:none}
.champ-note .zone:focus{box-shadow:inset 0 0 0 2px var(--bleu-f),var(--anneau)}
.note-pied{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px;flex-wrap:wrap}
.note-etat{font-size:12.5px;font-weight:500;color:var(--sec)}
.note-etat[data-etat="modifie"]{color:var(--attn)}
.note-pied .b{min-height:40px;padding:0 12px;font-size:14.5px}
.encart{margin-top:12px;padding:16px;border-radius:var(--r-carte);background:var(--carte)}
.encart .form{gap:16px}
.encart .champ{background:var(--toile)}
.encart .choix-c{background:var(--carte)}
.passees{margin-top:10px;font-size:14px;color:var(--sec)}
/* Un mentorat passé : les notes se lisent comme un texte. */
.dossier-passe .zm-notes .route{grid-template-columns:minmax(0,1fr)}
.note-lue .note-texte{margin-top:6px;font:400 16px/1.6 var(--police);color:var(--encre);white-space:pre-line;text-wrap:pretty}
/* En-tête d'écran à contrôle : le surtitre et le contrôle segmenté en haut à
   droite, le titre dessous (Réglages iOS, barre de navigation à grand titre). */
.entete-grille{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"titre seg";align-items:end;column-gap:20px}
.entete-grille>h1{grid-area:titre}
.entete-grille>.seg-glisse{grid-area:seg}
@media(max-width:700px){
  .entete-grille{grid-template-columns:minmax(0,1fr);grid-template-areas:"titre" "seg"}
  .entete-grille>.seg-glisse{margin-top:18px}
}

/* ── me former (§16.5) — étagères Apple TV / Fitness+ : des couvertures 3:4
     typographiques (le lavis de la teinte du module, le grand numéro en Manrope 800,
     le titre, la durée) ; les documents en tuiles sobres, sans dégradé. ── */
.couv-lien{display:block;width:176px;border-radius:20px;text-align:left;color:var(--encre);text-decoration:none}
.couv-lien:hover{text-decoration:none}
.couv-lien:active{transform:scale(.98)}
.couv{position:relative;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:3/4;border-radius:20px;padding:14px 14px 15px;overflow:hidden;
  background:radial-gradient(110% 62% at 0% 0%,rgba(255,255,255,.55) 0%,transparent 70%),
    linear-gradient(165deg,color-mix(in srgb,var(--teinte) 46%,var(--carte)) 0%,color-mix(in srgb,var(--teinte) 16%,var(--carte)) 100%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--teinte) 36%,transparent),inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(2,3,24,.05),
    0 14px 28px -18px color-mix(in srgb,var(--teinte) 70%,var(--encre));
  transition:transform .32s var(--spring),box-shadow .32s var(--spring)}
.couv-lien:hover .couv{transform:translateY(-4px)}
.couv-haut,.couv-bas,.couv-sur,.couv-num,.couv-titre,.couv-meta,.doc-sur{display:block}
.couv-sur{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--teinte) 30%,var(--encre))}
.couv-num{margin-top:4px;font:800 52px/.95 var(--police);letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:color-mix(in srgb,var(--teinte) 45%,var(--encre))}
.couv-titre{font:700 16px/1.25 var(--police);letter-spacing:-.015em;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:break-word;hyphens:auto}
.couv-meta{margin-top:6px;font-size:12.5px;line-height:1.3;color:var(--encre)}
.couv-faite{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.85);
  color:var(--ok)}
.couv-faite .i{width:14px;height:14px;stroke-width:2.6}
/* Un document : une rangée de liste groupée (Réglages iOS) — l'icône du type, le titre,
   la rubrique et la nature du lien dessous, la flèche au bout. */
.doc-tuile{color:var(--encre)}
.doc-tuile:disabled{opacity:1;cursor:default}
.doc-tuile:disabled .rangee-t{color:var(--sec)}
.doc-tuile:disabled:hover{background:transparent}
.doc-titre{font-weight:600;font-size:15.5px;line-height:1.35;overflow-wrap:anywhere}
.doc-tuile .rangee-s::first-letter{text-transform:uppercase}
.docs-liste{max-width:820px}
/* La leçon — ouverture de chapitre Apple Books, sommaire « On this page » de la
   documentation Apple (colonne collante au large, feuille au téléphone). */
.lecon{display:grid;gap:36px;grid-template-columns:minmax(0,1fr)}
@media(min-width:1000px){.lecon{grid-template-columns:minmax(0,68ch) 230px;justify-content:space-between;gap:48px}}
.lecon-tete{margin-bottom:34px}
.lecon-tete .surtitre{color:color-mix(in srgb,var(--teinte) 34%,var(--encre))}
.lecon-titre{font:800 clamp(32px,4vw,44px)/1.02 var(--police);letter-spacing:-.035em;margin:12px 0 12px;text-wrap:balance}
.lecon-titre:focus{outline:none}
.lecon-meta{font-size:14px;color:var(--sec);font-variant-numeric:tabular-nums}
.lecon-tete .phrase{margin-top:16px}
.filet{display:block;width:44px;height:2px;border-radius:2px;margin-top:24px;background:color-mix(in srgb,var(--teinte) 70%,var(--encre))}
.lecon-barre{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
/* Le fil d'Ariane de la leçon : Me former › Module n. */
.ariane ol{display:flex;align-items:center;flex-wrap:wrap;list-style:none;gap:2px;margin:-8px 0 0 -8px}
.ariane li{display:flex;align-items:center}
.ariane li+li::before{content:"›";margin:0 8px 0 2px;color:var(--ter)}
.ariane-l{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 8px;border-radius:var(--r-bouton);font-size:15px;font-weight:600;color:var(--bleu-f)}
.ariane-l:hover{background:var(--bleu-t)}
.ariane-ici{font-size:15px;font-weight:500;color:var(--sec)}
.lecon-secs{border-bottom:1px solid var(--ligne);margin-top:22px}
/* Une leçon du module : une vraie ouverture de chapitre (surtitre teinté, titre
   Manrope, son introduction), puis ses sections dépliables, puis ses sources. */
.lecon-chap{margin-top:60px;scroll-margin-top:24px}
.lecon-chap:first-of-type{margin-top:10px}
.lecon-chap>.surtitre{color:color-mix(in srgb,var(--teinte) 34%,var(--encre))}
.lecon-chap-t{font:700 clamp(22px,2.2vw,26px)/1.18 var(--police);letter-spacing:-.025em;margin-top:10px;text-wrap:balance}
.lecon-chap-t:focus{outline:none}
.texte-long.lecon-chap-intro,.texte-long.lecon-intro{padding:16px 0 0}
.texte-long.lecon-intro{padding-bottom:6px}
.sources-lecon{list-style:none;margin-top:4px}
.sources-lecon li+li{margin-top:6px}
.lecon-source>div{min-width:0}
.lecon-docs .docs-liste{margin-top:20px}
.som-sous{display:none;list-style:none;margin:2px 0 6px}
li[data-courant="true"]>.som-sous{display:block}
.som-s{display:block;width:100%;min-height:36px;padding:7px 0 7px 38px;text-align:left;border-left:1px solid var(--ligne);font-size:13.5px;line-height:1.35;color:var(--sec)}
.som-s:hover{color:var(--encre)}
.som-feuille .som-sous{display:block}
.feuille .som-s{border-left:0;min-height:44px;padding-left:44px}
.lecon-sec{border-top:1px solid var(--ligne);scroll-margin-top:24px}
.lecon-sec-b{display:flex;align-items:baseline;gap:14px;width:100%;min-height:60px;padding:18px 0 16px;text-align:left;font-size:18px;font-weight:600;
  line-height:1.4;letter-spacing:-.01em;color:var(--encre)}
.lecon-sec-b:hover .lecon-sec-t{color:var(--bleu-f)}
.lecon-num{flex:none;min-width:2.3em;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;color:color-mix(in srgb,var(--teinte) 34%,var(--encre))}
.lecon-sec-t{flex:1;min-width:0;transition:color .14s}
.lecon-sec-b .i{flex:none;align-self:center;width:18px;height:18px;color:var(--sec);transition:transform .28s var(--spring)}
.lecon-sec[data-ouvert="true"] .lecon-sec-b .i{transform:rotate(90deg)}
.lecon-sec-corps{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--spring)}
.lecon-sec[data-ouvert="true"] .lecon-sec-corps{grid-template-rows:1fr}
.lecon-sec-int{min-height:0;overflow:hidden}
.texte-long{padding:0 0 30px calc(2.3em * 13.5 / 17 + 14px);font-size:17px;line-height:1.7;color:var(--encre)}
.texte-long>*+*{margin-top:1em}
.texte-long h4{margin-top:1.6em;font-size:16px;font-weight:600;letter-spacing:-.005em}
.texte-long .intertitre{margin-top:1.7em;font-size:17px;font-weight:700;line-height:1.35;letter-spacing:-.012em}
.texte-long ol>li::marker{font-weight:700;color:var(--encre);font-variant-numeric:tabular-nums}
/* Les encadrés d'une leçon (« À retenir », « Réflexes … », « Pièges … ») : un lavis et un
   filet à gauche, l'intertitre en tête — ce qu'on garde, distinct du récit. Lavis sur la
   toile seulement (jamais sur --creux) ; encre dessus, 4,5:1 au moins. */
.encadre{margin-top:1.5em;padding:16px 18px 18px;border-radius:14px;background:color-mix(in srgb,var(--teinte,var(--bleu)) 14%,var(--carte));
  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--teinte,var(--bleu)) 70%,var(--encre))}
.encadre[data-encadre="retenir"]{background:var(--bleu-t);box-shadow:inset 3px 0 0 var(--bleu-f)}
.encadre[data-encadre="pieges"]{background:var(--attn-t);box-shadow:inset 3px 0 0 var(--attn)}
.texte-long .encadre .intertitre{margin-top:0;font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--encre)}
.encadre>*+*{margin-top:.7em}
.encadre li+li{margin-top:.35em}
.texte-long ul,.texte-long ol{padding-left:1.3em}
.texte-long li+li{margin-top:.4em}
.texte-long li::marker{color:var(--sec)}
.texte-long blockquote{padding:14px 18px;border-radius:14px;background:color-mix(in srgb,var(--teinte) 12%,var(--carte));font:500 16.5px/1.6 var(--police)}
.texte-long strong{font-weight:600}
.texte-long a{text-decoration:underline;text-underline-offset:3px}
.lecon-source{display:flex;gap:10px;align-items:flex-start;margin-top:22px;padding:14px 0 0;border-top:1px solid var(--ligne);
  font-size:13.5px;line-height:1.5;color:var(--sec)}
.lecon-source .i{flex:none;width:16px;height:16px;margin-top:2px;color:var(--sec)}
.lecon-source b{color:var(--encre);font-weight:600}
.lecon-source code{font:13px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere;color:var(--encre)}
.continuer{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:72px;margin-top:22px;padding:14px 16px 14px 22px;
  border-radius:var(--r-carte);background:var(--carte);box-shadow:var(--ombre),inset 0 0 0 1px var(--ligne);text-align:left;color:var(--encre);
  transition:transform .2s var(--spring),box-shadow .2s}
.continuer:hover{transform:translateY(-2px);text-decoration:none}
.continuer .surtitre{display:block;margin-bottom:4px}
.continuer-t{display:block;font:700 18px/1.25 var(--police);letter-spacing:-.015em}
.continuer-f{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--bleu-t);color:var(--bleu-f)}
.sommaire{position:sticky;top:28px;max-height:calc(100vh - 56px);overflow-y:auto;scrollbar-width:none;padding-bottom:16px}
.sommaire .surtitre{margin-bottom:12px}
.sommaire ol{list-style:none}
.som-e{position:relative;display:flex;align-items:baseline;gap:10px;width:100%;min-height:40px;padding:9px 0 9px 14px;text-align:left;
  border-left:1px solid var(--ligne);font-size:14px;line-height:1.35;color:var(--sec);transition:color .14s}
.som-e:hover{color:var(--encre)}
.som-e[aria-current="location"]{color:var(--encre);font-weight:600}
.som-e[aria-current="location"]::before{content:"";position:absolute;left:-1px;top:7px;bottom:7px;width:2px;border-radius:2px;
  background:color-mix(in srgb,var(--teinte) 70%,var(--encre))}
.som-n{flex:none;min-width:1.9em;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--sec)}
.feuille .som-e{min-height:48px;border-left:0;padding-left:4px;border-radius:12px}
.feuille .som-e[aria-current="location"]{background:color-mix(in srgb,var(--teinte) 12%,var(--carte))}
.feuille .som-e[aria-current="location"]::before{display:none}
.bouton-sommaire{display:none}

/* ── obtenir de l'aide (§16.6) : les fils de Stella, l'équipe en direct ── */
.aide-grille{display:grid;gap:24px;grid-template-columns:minmax(0,1fr);align-items:start}
@media(min-width:1100px){.aide-grille{grid-template-columns:minmax(0,1fr) 300px;gap:40px}}
.aide-grille>*{min-width:0}
.aide-cote{display:grid;gap:16px}
@media(min-width:1100px){.aide-cote{position:sticky;top:24px}}
.aide-grille .stella{min-height:calc(100vh - 230px);max-width:none}
/* L'équipe en direct : une carte d'affiche de contact, un humain nommé, deux gestes. */
.direct{padding:22px 22px 20px}
.direct>.surtitre{margin-bottom:14px}
.direct-tete{display:flex;align-items:center;gap:14px}
.direct-tete .avatar{width:52px;height:52px;font-size:20px}
.direct-nom{font:700 18px/1.15 var(--police);letter-spacing:-.015em}
.direct-role{font-size:14px;color:var(--sec);margin-top:2px}
.direct .discret{margin-top:14px}
.direct .gestes{margin-top:16px;gap:8px}
.direct .gestes .b{flex:1 1 auto}
.direct-urgence{margin-top:14px;padding-top:12px;border-top:1px solid var(--ligne);font-size:13px;line-height:1.45;color:var(--sec)}
.direct-urgence a{font-weight:700;color:var(--encre)}
.aide-onglets{margin-bottom:26px}
/* Le sélecteur « À propos de » du composeur : des pilules (un fil par mentorat). */
.sujets{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 0 10px;padding:2px 2px 2px}
.sujets::-webkit-scrollbar{display:none}
.sujets-l{flex:none;font-size:13.5px;font-weight:500;color:var(--sec)}
.sujet{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:var(--r-pilule);font-size:14.5px;font-weight:500;
  color:var(--encre);background:var(--carte);box-shadow:inset 0 0 0 1px var(--ligne-f);transition:background-color .14s,color .14s,box-shadow .14s}
.sujet:hover{box-shadow:inset 0 0 0 1px var(--bleu-f)}
.sujet[aria-pressed="true"]{background:var(--encre);color:var(--sur-plein);box-shadow:none}
.sujet .pt{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--teinte,var(--bleu)) 60%,var(--encre))}
.sujet[aria-pressed="true"] .pt{background:var(--carte)}

/* ── la pastille de Stella (§16.7) : un disque d'encre, l'étoile des Ombres
     dedans, en bas à droite de chaque écran du bénévole ── */
.pastille{position:fixed;right:24px;bottom:24px;z-index:40;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--encre);
  box-shadow:0 12px 32px rgba(2,3,24,.26),0 2px 6px rgba(2,3,24,.16);transition:transform .2s var(--spring),box-shadow .2s;animation:pastille .4s var(--spring) both}
.pastille img{width:auto;height:34px}
.pastille:hover{transform:translateY(-2px)}
.pastille:active{transform:scale(.95)}
.pastille:focus-visible{outline:2px solid var(--bleu-f);outline-offset:3px}
@keyframes pastille{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}

/* Le tiroir : le panneau de Stella et le volet de lecture glissent depuis la
   droite par-dessus l'écran (Messages en panneau, le lecteur de Safari) ; au
   téléphone, une feuille qui monte du bas. */
.tiroir-voile{position:fixed;inset:0;z-index:58;background:var(--voile);opacity:.45;animation:fondu .2s linear both}
.tiroir{position:fixed;top:12px;right:12px;bottom:12px;z-index:59;display:flex;flex-direction:column;width:min(460px,calc(100vw - 24px));
  background:var(--toile);border-radius:var(--r-tuile);box-shadow:var(--ombre-feuille);overflow:hidden;outline:none;animation:tiroir .32s var(--spring) both}
.tiroir-voile.part{opacity:0;transition:opacity .18s linear}
.tiroir.part{opacity:0;transform:translateX(16px);transition:opacity .18s linear,transform .18s var(--spring)}
@keyframes tiroir{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
.tiroir-tete{flex:none;display:flex;align-items:center;gap:12px;padding:14px 12px 12px 18px;background:var(--carte);border-bottom:1px solid var(--ligne)}
.tiroir-tete .marque-stella{width:40px;height:40px}
.tiroir-tete .marque-stella img{width:22px;height:22px}
.tiroir-id{flex:1;min-width:0}
.tiroir-t{font:700 18px/1.15 var(--police);letter-spacing:-.015em}
.tiroir-s{font-size:13px;color:var(--sec);margin-top:2px}
.tiroir-x{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--sec);transition:background-color .14s}
.tiroir-x:hover{background:var(--toile);color:var(--encre)}
.tiroir-corps{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 18px 10px}
.tiroir-pied{flex:none;padding:10px 14px 14px;border-top:1px solid var(--ligne);background:var(--toile)}
.tiroir-pied .urgence{margin-top:8px}
.tiroir .stella-fil{padding:4px 0 8px;gap:22px}
.tiroir .m-texte{font-size:16px}
.tiroir .m-moi{font-size:15.5px}
.tiroir .stella-accueil{padding:8px 0 0}
.tiroir .stella-accueil .titre-section{margin-bottom:8px}
.tiroir .stella-accueil .discret{margin-bottom:18px}
.tiroir .escalade{padding:18px 18px}
.retour-lecture{margin:-6px 0 12px -8px}
/* Le volet de lecture d'un passage du Livre des Ombres. */
.lecture-chemin{font-size:13px;color:var(--sec);margin:6px 0 0;overflow-wrap:anywhere}
.lecture-titre{font:800 24px/1.12 var(--police);letter-spacing:-.03em;margin-top:8px;text-wrap:balance}
.lecture .texte-long{padding:18px 0 8px;font-size:16.5px}
.lecture-pied{margin-top:12px;padding-top:12px;border-top:1px solid var(--ligne);font-size:13.5px;color:var(--sec)}

/* ── l'écran de l'équipe, v2.1 : les histoires (fiche de relecture) et l'agenda ── */
.eq-section+.eq-section{margin-top:56px}
.volet-histoire{position:static}
.relecture-corps{padding:18px 24px 6px}
.relecture-corps .form{gap:20px}
.relecture-corps .zone{background:var(--toile);box-shadow:none}
.relecture-corps .zone:focus,.relecture-corps .champ:focus{box-shadow:inset 0 0 0 2px var(--bleu-f),var(--anneau)}
.relecture-corps .champ{background:var(--toile);box-shadow:none}
.relecture-corps .note{margin:0 0 18px}
.extrait-source{margin-bottom:20px;padding:14px 16px;border-radius:14px;background:var(--attn-t)}
.extrait-source .surtitre{color:var(--attn);margin-bottom:6px}
.extrait-source p+p{font:500 16px/1.55 var(--police);color:var(--encre)}
.compteur{min-height:0;margin-top:6px}
.suggestions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.suggestions .filtre{min-height:36px;font-size:13.5px;padding:0 12px}
.teinte-choix .pt{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--teinte) 60%,var(--encre))}
.teinte-choix[aria-checked="true"]{background:var(--encre);color:var(--sur-plein);box-shadow:none}
.teinte-choix[aria-checked="true"] .pt{background:var(--carte)}
.controles{border:0;padding:16px 16px 12px;border-radius:14px;background:var(--toile);display:grid;gap:4px}
.controles legend{float:left;width:100%;margin:0 0 6px;padding:0}
.controle{position:relative;display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:8px 2px;cursor:pointer}
/* La case couvre toute la ligne : la cible fait la taille de la ligne (44 px au moins). */
.controle input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.controle .carre{flex:none;margin-top:1px;width:20px;height:20px;border-radius:6px;box-shadow:inset 0 0 0 1.5px var(--ligne-f);display:grid;place-items:center;color:var(--sur-plein);
  transition:background-color .15s,box-shadow .15s}
.controle .carre .i{width:14px;height:14px;stroke-width:2.6;opacity:0;transform:scale(.4);transition:opacity .15s,transform .18s var(--spring)}
.controle:has(input:checked) .carre{background:var(--ok);box-shadow:none}
.controle:has(input:checked) .carre .i{opacity:1;transform:none}
.controle:has(input:focus-visible) .carre{outline:2px solid var(--bleu-f);outline-offset:2px}
.controle b{display:block;font-weight:600;font-size:15px}
.controle-s{display:block;font-size:13.5px;color:var(--sec);margin-top:1px}
.motifs{padding:14px 16px;border-radius:14px;background:var(--panne-t)}
.motifs-t{font-weight:600;color:var(--panne);margin-bottom:8px}
.motifs ul{list-style:none;display:grid;gap:8px;margin-bottom:8px}
.motifs li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.45}
.motifs li .i{width:16px;height:16px;margin-top:2px;color:var(--panne)}
.motifs .mot{display:inline-block;padding:0 6px;border-radius:6px;background:var(--carte);font-weight:600}
.apercu-histoire{margin:22px 0 18px}
.apercu-histoire .surtitre{margin-bottom:10px}
.apercu-histoire .histoire{width:min(340px,100%)}
.ligne-extrait-suivi{display:flex;gap:14px;align-items:center;cursor:default}
.ligne-extrait-suivi:hover{background:transparent}
.ligne-extrait-suivi[aria-selected="true"]{background:var(--bleu-t);box-shadow:inset 3px 0 0 var(--bleu-f)}
.extrait-c{flex:1;min-width:0}
.extrait-t{font-size:14.5px;line-height:1.5;color:var(--encre);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ligne-extrait-suivi .ligne-meta{margin-top:4px}
.ligne-extrait-suivi .b{flex:none;min-height:40px;padding:0 14px;font-size:14.5px}
@media(max-width:640px){
  .relecture-corps{padding:16px 16px 4px}
  .ligne-extrait-suivi{flex-direction:column;align-items:stretch}
  .eq-entete .gestes{width:100%}
  .eq-entete .gestes .b{flex:1 1 auto}
}

/* ── Mon profil (§16.13) : Réglages iOS › identifiant Apple ───────────────
   L'identité en tête (le disque, le nom, « Mentor depuis »), puis des listes
   groupées : en-tête en petites capitales, une rangée par question, le libellé
   au-dessus de la valeur (une valeur longue ne se coupe pas à 375 px), le
   chevron au bout. Aucun bouton plein sur l'écran : chaque feuille porte le
   sien (« Enregistrer »). La pause et la sortie sont des liens discrets du pied. */
.moi[aria-current="page"]{background:var(--carte);box-shadow:var(--ombre-pilule)}
.disque-grand{width:72px;height:72px;font-size:26px;letter-spacing:-.02em}
.pf-id{display:flex;align-items:center;gap:18px;margin-bottom:28px}
.pf-id-c{min-width:0}
.pf-id .surtitre{margin-bottom:6px}
.pf-id .titre-vue{overflow-wrap:anywhere}
.pf-depuis{margin-top:8px}
.pf-ecritures{display:flex;align-items:flex-start;gap:10px;margin:0 0 8px;background:var(--carte);box-shadow:inset 0 0 0 1px var(--ligne)}
.pf-ecritures .i{margin-top:3px}
.pf-ecritures[data-ecritures="ombre"]{background:var(--attn-t);color:var(--attn);box-shadow:none}
.pf-groupe{margin-top:30px}
.pf-titre{font:600 11.5px/1.4 var(--police);letter-spacing:.12em;text-transform:uppercase;color:var(--sec);margin:0 0 8px 18px}
.pf-ligne{min-height:64px}
.pf-l{display:block;font-size:13.5px;font-weight:500;line-height:1.35;color:var(--sec)}
.pf-v{display:block;margin-top:2px;font-size:16px;font-weight:500;line-height:1.4;color:var(--encre);overflow-wrap:anywhere}
.pf-vide{font-weight:400;color:var(--ter)}
.pf-v[data-alerte]{color:var(--panne)}
.pf-equipe{display:block;margin-top:3px;font-size:13px;font-weight:500;line-height:1.4;color:var(--bleu-f)}
.pf-lecture{cursor:default}
.pf-gestes{flex-wrap:wrap;gap:0 22px;min-height:52px;padding-top:2px;padding-bottom:2px}
.pf-pied{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin-top:40px;padding-left:4px}
.b-lien.pf-discret{font-weight:500;color:var(--sec);text-align:left;white-space:normal}
.b-lien.pf-discret:hover{color:var(--encre)}
.pf-sortir{margin-top:22px}
/* Lot A (§16.15) : « Tes notifications » — trois bascules, le geste de cet appareil. */
.pf-bascule{cursor:pointer;min-height:64px}
.bascule{flex:none;appearance:none;-webkit-appearance:none;position:relative;width:51px;height:31px;margin:0;border-radius:999px;background:var(--creux);box-shadow:inset 0 0 0 1px var(--ligne-f);cursor:pointer;transition:background .2s var(--spring)}
.bascule::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:var(--carte);box-shadow:0 1px 3px rgba(2,3,24,.25);transition:transform .2s var(--spring)}
.bascule:checked{background:var(--encre);box-shadow:none}
.bascule:checked::after{transform:translateX(20px)}
.bascule:focus-visible{outline:2px solid var(--bleu-f);outline-offset:3px}
.bascule:disabled{opacity:.6}
@media (prefers-reduced-motion:reduce){.bascule,.bascule::after{transition:none}}
.pf-appareil{align-items:center;gap:8px 16px;padding-top:12px;padding-bottom:12px}
.pf-actif{margin-top:0;font-size:15px}
.pf-install{margin:0;font-size:15px;line-height:1.5;color:var(--encre)}
.pf-note{margin:8px 18px 0;font-size:13.5px}
/* Les feuilles : une colonne de choix (la feuille est étroite), des familles titrées. */
.feuille .pf-choix{grid-template-columns:minmax(0,1fr)}
.pf-editeur{margin-bottom:4px}
.pf-famille{margin:18px 0 8px;font-size:13px;font-weight:600;color:var(--sec)}
.pf-editeur>.pf-famille:first-child{margin-top:0}
.pf-aide{margin-top:12px}
.pf-compte{margin:8px 0 4px;min-height:0}
.pf-matiere{display:grid;gap:8px;padding:12px 0;border-bottom:1px solid var(--ligne)}
.pf-matiere:first-child{padding-top:0}
.pf-matiere-nom{font-size:15px;font-weight:600}
.pf-niveaux{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
.pf-niveaux button{min-height:40px;padding:0 6px;font-size:13.5px}
.pf-code{max-width:220px;font-size:22px;letter-spacing:.3em;font-variant-numeric:tabular-nums}
.pf-indice b{color:var(--encre);font-variant-numeric:tabular-nums}
.pf-fait{margin-top:4px}
@media(max-width:640px){
  .pf-id{gap:14px;margin-bottom:22px}
  .disque-grand{width:60px;height:60px;font-size:22px}
  .pf-titre{margin-left:16px}
  .pf-niveaux button{min-height:44px;font-size:13px}
}

/* ══ La passe « un écran, une chose » (15/10/2026, ARCHITECTURE.md §16.14) ══════
   Une signature par page, dans la charte et sans une couleur de plus : l'accueil, un
   objet centré en grand ; Accompagner, l'affiche d'une personne ; un mentorat, le
   dossier du binôme et sa frise ; Me former, une bibliothèque ; l'aide, une
   conversation ; Mon profil, des réglages. Composants partagés (boutons, champs,
   feuilles, Manrope) ; mises en page et rythmes propres. */

/* ── la bande se déplie : les mentorats (la liste des boîtes de Mail) ── */
.nav-deplier,.nav-sous{display:none}
.nav-s-geste{flex:none;display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--bleu-f);box-shadow:0 0 0 2px var(--carte)}
@media(min-width:901px){
  .lat .nav.nav-a-sous{padding-right:38px}
  .lat .nav.nav-deplie .badge{display:none}
  .nav-deplier:not([hidden]){display:grid;place-items:center;align-self:flex-end;position:relative;z-index:1;width:34px;height:44px;margin:-44px 2px 0 0;
    border-radius:10px;color:var(--sec);transition:background-color .14s,color .14s}
  .nav-deplier:hover{background:var(--survol);color:var(--encre)}
  .nav-deplier .i{width:16px;height:16px;transition:transform .22s var(--spring)}
  .nav-deplier[aria-expanded="true"] .i{transform:rotate(90deg)}
  .nav-sous:not([hidden]){display:flex;flex-direction:column;gap:2px;margin:4px 0 6px 23px;padding-left:9px;box-shadow:inset 1px 0 0 var(--ligne-f);animation:arrivee .24s var(--spring) both}
  .nav-s{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px;border-radius:10px;color:var(--encre);font-size:14.5px;font-weight:500;
    line-height:1.2;text-decoration:none;transition:background-color .14s}
  .nav-s:hover{background:var(--survol);text-decoration:none}
  .nav-s[aria-current="page"]{background:var(--carte);box-shadow:var(--ombre-pilule);font-weight:600}
  .nav-s-init{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--teinte) 34%,var(--carte));
    color:color-mix(in srgb,var(--teinte) 30%,var(--encre));font:700 11px/1 var(--police)}
  .nav-s-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav-s-passes{color:var(--sec)}
  .nav-s-passes .nav-s-l{padding-left:36px}
}

/* ── ACCUEIL : un objet centré, en grand (App Store « Aujourd'hui », l'article unique).
     Il remplit le premier écran : les histoires et le calendrier commencent sous la
     ligne de flottaison. ── */
.page-accueil{padding-top:24px}
.focal{min-height:calc(100vh - 24px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 0 64px;text-align:center}
.focal>.sq{margin-left:auto;margin-right:auto}
.focal>.titre{margin-bottom:24px}
.focal>.panne{text-align:left;max-width:640px}
.sq-rond{width:128px;height:128px;border-radius:50%;margin-bottom:28px}
.focal .sq-titre{width:min(520px,80%);height:48px;margin-bottom:18px}
.focal .sq-l{width:min(420px,70%)}
.focal-objet{width:100%;max-width:820px;display:flex;flex-direction:column;align-items:center;
  background:radial-gradient(64% 46% at 50% 18%,color-mix(in srgb,var(--teinte,var(--bleu)) 22%,transparent) 0%,transparent 72%)}
.focal-disque{flex:none;display:grid;place-items:center;width:clamp(112px,12vw,140px);height:clamp(112px,12vw,140px);border-radius:50%;
  background:color-mix(in srgb,var(--teinte,var(--bleu)) 40%,var(--carte));color:color-mix(in srgb,var(--teinte,var(--bleu)) 30%,var(--encre));
  font:800 clamp(42px,4.6vw,54px)/1 var(--police);letter-spacing:-.04em;
  box-shadow:0 0 0 12px color-mix(in srgb,var(--teinte,var(--bleu)) 14%,transparent),0 18px 40px -18px color-mix(in srgb,var(--teinte,var(--bleu)) 70%,var(--encre));
  transition:transform .26s var(--spring)}
.focal-disque-signe{background:var(--carte);color:var(--bleu-f)}
.focal-disque-signe .i{width:44px;height:44px;stroke-width:1.4}
.focal-t{margin-top:30px;font-size:clamp(36px,4.4vw,58px);max-width:17ch}
.focal-t:focus{outline:none}
.focal-nom{display:block;font-size:1.55em;line-height:.98;letter-spacing:-.045em;overflow-wrap:anywhere}
.focal-qui{margin-top:14px;font-size:17px;color:var(--sec)}
.focal-texte{margin-top:18px;font-size:clamp(17px,1.5vw,20px);line-height:1.55;max-width:46ch;color:var(--encre);text-wrap:pretty}
.focal-besoins{justify-content:center;margin-top:20px}
.focal-gestes{flex-direction:column;justify-content:center;gap:6px;margin-top:30px}
.focal-gestes .b-grand{min-height:56px;padding:0 30px;font-size:17px}
/* Plusieurs mentorats : un sélecteur discret de prénoms, au-dessus de l'objet. */
.focal-choix{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:26px}
.focal-choix-b{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-pilule);font-size:15px;font-weight:600;color:var(--sec);
  box-shadow:inset 0 0 0 1px var(--ligne-f);transition:background-color .14s,color .14s}
.focal-choix-b:hover{color:var(--encre)}
.focal-choix-b[aria-pressed="true"]{background:var(--encre);color:var(--sur-plein);box-shadow:none}
/* L'éclairage : le jeune à portée de doigt (son disque et son prénom ouvrent son dossier),
   le titre d'étape, les phrases de Stella, UNE action. */
.focal-jeune{display:flex;flex-direction:column;align-items:center;gap:12px;padding:6px 18px 8px;border-radius:24px;color:var(--encre);text-decoration:none}
.focal-jeune:hover{text-decoration:none}
.focal-jeune:hover .focal-disque{transform:scale(1.04)}
.focal-jeune-nom{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font:700 20px/1.2 var(--police);letter-spacing:-.015em;color:var(--bleu-f)}
.focal-jeune-nom .i{width:18px;height:18px}
.focal-jeune:hover .focal-jeune-nom{text-decoration:underline;text-underline-offset:4px}
.focal-jeune-qui{margin-top:-6px;font-size:14.5px;color:var(--sec)}
.eclairage .focal-t{margin-top:18px}
.eclairage-corps{display:flex;flex-direction:column;align-items:center;width:100%}
.eclairage-corps>.sq{margin-left:auto;margin-right:auto}
.eclairage-texte{margin-top:20px;font:500 clamp(18px,1.6vw,21px)/1.55 var(--police);max-width:44ch;color:var(--encre);text-wrap:pretty}
.eclairage-qui{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:13px;color:var(--sec)}
.eclairage-qui img{width:18px;height:18px}
.eclairage-panne{color:var(--attn)}
/* Plus bas, en respiration : les histoires et le calendrier, plus compacts. */
.accueil-bas{padding-top:8px}
.accueil-bas .histoire{width:min(290px,74vw)}
.accueil-bas .histoire-c{padding:18px 18px 16px;gap:10px}
.accueil-bas .histoire-texte{font-size:15px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.accueil-bas .agenda .rangee{min-height:62px}
.accueil-bas .date-bloc{width:46px;height:50px}

/* ── ACCOMPAGNER : l'affiche d'une personne (affiches de contact iOS 17) ── */
.page-affiche .proposition{min-height:min(74vh,700px)}
.page-affiche .affiche-nom{font-size:clamp(56px,7.4vw,104px);line-height:.94;letter-spacing:-.05em;margin:4px 0 14px}
.page-affiche .affiche-fil{font-size:clamp(220px,28vw,360px);opacity:.55}
.page-affiche .affiche-qui{font-size:17px}

/* ── GÉRER MES MENTORATS : la liste courte (Réglages, une rangée par mentorat) ── */
.liste-mentorats .mentorat-l{min-height:84px;padding:14px 18px}
.liste-mentorats .avatar{width:52px;height:52px;font-size:19px}
.mentorat-l-nom{font:800 22px/1.1 var(--police);letter-spacing:-.025em}
.mentorat-l-geste{display:inline-flex;align-items:center;gap:8px;margin-top:7px;font-size:13.5px;font-weight:600;color:var(--bleu-f)}
.section-passes .avatar{background:var(--creux);color:var(--sec)}
.section-passes .mentorat-l-nom{font-size:19px}

/* ── UN MENTORAT : le dossier du binôme. Une chemise cartonnée au lavis de la teinte du
     jeune, son onglet (l'initiale, le prénom) ; le titre d'étape ; la frise qui avance ;
     les feuillets. ── */
.page-dossier{max-width:1120px}
.page-dossier>.ariane{margin-bottom:16px}
.dossier{margin-top:6px}
.dossier-onglet{display:inline-flex;align-items:center;gap:14px;max-width:calc(100% - 48px);padding:14px 26px 12px 14px;
  border-radius:18px 22px 0 0;background:color-mix(in srgb,var(--teinte) 22%,var(--carte))}
.dossier-init{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--blanc-voile);
  color:color-mix(in srgb,var(--teinte) 30%,var(--encre));font:800 20px/1 var(--police);letter-spacing:-.02em}
.dossier-id{min-width:0}
.dossier-nom{font:800 26px/1.05 var(--police);letter-spacing:-.03em;overflow-wrap:anywhere}
.dossier-qui{margin-top:3px;font-size:14px;font-weight:500;color:var(--encre)}
.dossier-chemise{border-radius:0 26px 26px 26px;padding:30px 30px 32px;background:color-mix(in srgb,var(--teinte) 22%,var(--carte));
  box-shadow:0 1px 2px rgba(2,3,24,.05),0 22px 48px -28px color-mix(in srgb,var(--teinte) 60%,var(--encre))}
.dossier-t{max-width:24ch}
.dossier-passe .dossier-onglet,.dossier-passe .dossier-chemise{background:var(--creux)}
.dossier-passe .dossier-init{background:var(--carte);color:var(--sec)}
/* La frise qui avance : les jalons faits en trait plein, aujourd'hui marqué, la suite en
   pointillé ; un mot et une date par jalon. Elle défile dans son rail, jamais la page. */
.dossier-frise{margin:24px 0 28px;min-width:0}
.frise-bloc{position:relative;min-width:0}
.frise-debut{min-height:40px;margin:-8px 0 4px;font-size:14px}
.frise-h{list-style:none;display:flex;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:4px 2px 4px;scroll-snap-type:x proximity}
.frise-h::-webkit-scrollbar{display:none}
.jalon{position:relative;flex:1 0 116px;min-width:116px;max-width:240px;padding-right:12px;scroll-snap-align:start}
.jalon::after{content:"";position:absolute;left:22px;right:4px;top:10px;height:2px;border-radius:1px;background:var(--encre)}
.jalon:last-child::after{display:none}
.jalon[data-jalon="ici"]::after,.jalon[data-jalon="futur"]::after{background:repeating-linear-gradient(90deg,var(--encre) 0 5px,transparent 5px 10px)}
.jalon-pt{position:relative;z-index:1;display:block;width:22px;height:22px;border-radius:50%;background:var(--encre);box-shadow:0 0 0 4px color-mix(in srgb,var(--teinte) 22%,var(--carte))}
.jalon[data-jalon="debut"] .jalon-pt{border-radius:6px}
.jalon[data-jalon="point"] .jalon-pt{width:16px;height:16px;margin:3px}
.jalon[data-mood="bien"] .jalon-pt{background:var(--ok)}
.jalon[data-mood="peu_actif"] .jalon-pt{background:var(--attn)}
.jalon[data-mood="aide"] .jalon-pt{background:var(--panne);border-radius:3px;transform:rotate(45deg)}
.jalon[data-jalon="ici"] .jalon-pt{background:var(--carte);box-shadow:inset 0 0 0 6px var(--bleu-f),0 0 0 4px color-mix(in srgb,var(--teinte) 22%,var(--carte))}
.jalon[data-jalon="futur"] .jalon-pt{background:var(--carte);box-shadow:inset 0 0 0 2px var(--encre),0 0 0 4px color-mix(in srgb,var(--teinte) 22%,var(--carte))}
.jalon-c{display:flex;flex-direction:column;gap:1px;margin-top:12px;min-width:0}
.jalon-d{font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--encre)}
.jalon-t{font-size:15px;font-weight:600;line-height:1.3;color:var(--encre)}
.jalon-s{font-size:13.5px;line-height:1.35;color:var(--encre)}
.jalon[data-jalon="ici"] .jalon-d{color:var(--bleu-n)}
/* Sous la frise, les gestes qui la font avancer : noter une rencontre, l'ajouter à son agenda. */
.frise-gestes{margin-top:16px}
.frise-gestes>.gestes{gap:8px 10px;margin-top:0}
.frise-gestes .b{min-height:40px;padding:0 14px;font-size:14.5px;background:var(--blanc-voile)}
.frise-gestes .encart{max-width:560px}
.dossier-passe .jalon-pt{box-shadow:0 0 0 4px var(--creux)}
/* Lot A (§16.15) : les trois premiers mois, quatre jalons. Au large, en ligne ; sous 900 px,
   en colonne, le trait descend. Fait : pastille pleine et coche ; en cours : anneau rouge
   (l'action, pas un état d'alerte) ; en retard : anneau rouge et légende en rouge foncé ; à
   venir : anneau gris. Aucune couleur hors charte. */
.trois-mois{margin:22px 0 4px}
.tm-titre{font-size:18px;font-weight:700;margin:0 0 14px}
.tm-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.tm-jalon{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding-right:14px}
.tm-jalon::after{content:"";position:absolute;left:22px;right:0;top:10px;height:2px;background:var(--encre)}
.tm-jalon:last-child::after{display:none}
.tm-jalon[data-etat="en_cours"]::after,.tm-jalon[data-etat="en_retard"]::after,.tm-jalon[data-etat="a_venir"]::after{background:repeating-linear-gradient(90deg,var(--ligne-f) 0 5px,transparent 5px 10px)}
.tm-pt{position:relative;z-index:1;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--carte);box-shadow:inset 0 0 0 2px var(--ligne-f)}
.tm-pt .i{width:14px;height:14px;stroke:var(--carte);stroke-width:3}
.tm-jalon[data-etat="fait"] .tm-pt{background:var(--encre);box-shadow:none}
.tm-jalon[data-etat="en_cours"] .tm-pt,.tm-jalon[data-etat="en_retard"] .tm-pt{box-shadow:inset 0 0 0 5px var(--rouge)}
.tm-c{display:flex;flex-direction:column;gap:2px;min-width:0}
.tm-l{font-size:15px;font-weight:700;line-height:1.3;color:var(--encre)}
.tm-leg{font-size:13.5px;line-height:1.35;color:var(--sec)}
.tm-jalon[data-etat="en_cours"] .tm-leg,.tm-jalon[data-etat="en_retard"] .tm-leg{color:var(--rouge-f);font-weight:600}
.tm-geste{align-self:flex-start;margin-top:8px;min-height:44px;padding:0 14px;font-size:14.5px;background:var(--blanc-voile)}
@media (max-width:900px){
  .tm-liste{grid-template-columns:minmax(0,1fr)}
  .tm-jalon{flex-direction:row;gap:14px;padding:0 0 16px}
  .tm-jalon::after{left:10px;right:auto;top:22px;bottom:0;width:2px;height:auto}
  .tm-jalon[data-etat="en_cours"]::after,.tm-jalon[data-etat="en_retard"]::after,.tm-jalon[data-etat="a_venir"]::after{background:repeating-linear-gradient(180deg,var(--ligne-f) 0 5px,transparent 5px 10px)}
  .tm-pt{flex:none}
}
/* Les feuillets : au large, la fiche et l'éducateur à gauche, les nouvelles à droite, la
   feuille de route en travers ; au téléphone, dans cet ordre, en colonne. */
.feuillets{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);align-items:start}
@media(min-width:1000px){
  .feuillets{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"fiche suivi" "contacts suivi" "notes notes"}
  .feuillets .zm-fiche{grid-area:fiche}.feuillets .zm-contacts{grid-area:contacts}.feuillets .zm-suivi{grid-area:suivi}.feuillets .zm-notes{grid-area:notes}
  .dossier-passe .feuillets{grid-template-areas:"fiche notes"}
}

/* ── ME FORMER : une bibliothèque (Apple Books) — des livres debout, le dos à la teinte du
     module, une planche sous chaque rayon. ── */
.page-bibliotheque .rayon{margin-top:var(--entre)}
.page-bibliotheque .rayon:first-child{margin-top:0}
.rayon>.titre-section{margin-bottom:18px}
.rayon-l{list-style:none;display:flex;align-items:flex-end;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:14px 22px 0}
.rayon-l::-webkit-scrollbar{display:none}
.rayon-l>li{flex:0 0 auto;display:flex}
.planche{height:14px;margin:0 0 6px;border-radius:3px 3px 6px 6px;background:linear-gradient(var(--creux),color-mix(in srgb,var(--creux) 72%,var(--encre)));
  box-shadow:0 14px 20px -14px rgba(2,3,24,.45)}
.rayon .couv-lien{width:158px;border-radius:4px 12px 12px 4px}
.rayon .couv-titre{font-size:15px;overflow-wrap:normal;word-break:normal;hyphens:auto}
.rayon .couv{aspect-ratio:3/4.3;border-radius:4px 12px 12px 4px;padding:14px 10px 15px 22px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--teinte) 62%,var(--encre)) 0 10px,color-mix(in srgb,var(--teinte) 28%,var(--carte)) 10px 12px,transparent 12px),
    linear-gradient(170deg,color-mix(in srgb,var(--teinte) 50%,var(--carte)) 0%,color-mix(in srgb,var(--teinte) 24%,var(--carte)) 100%);
  box-shadow:inset -1px 0 0 color-mix(in srgb,var(--teinte) 40%,transparent),0 1px 0 rgba(2,3,24,.08),0 18px 24px -18px color-mix(in srgb,var(--teinte) 70%,var(--encre))}
.rayon-l>li:nth-child(3n+2) .couv{aspect-ratio:3/4.6}
.rayon-l>li:nth-child(4n+3) .couv{aspect-ratio:3/4.1}
.rayon .couv-lien:hover .couv{transform:translateY(-8px)}

/* ── OBTENIR DE L'AIDE : une conversation (Messages) — l'en-tête de contact centré, le
     fil, le composeur ; les onglets en tête, centrés. ── */
.aide-barre{display:flex;justify-content:center;margin-bottom:14px}
.page-conversation>.entete{margin-top:18px}
.stella-tete{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:18px 0 4px;margin:0}
.stella-tete .marque-stella{width:76px;height:76px;box-shadow:var(--ombre),0 0 0 10px var(--bleu-t)}
.stella-tete .marque-stella img{width:40px;height:40px}
.stella-t{margin-top:16px;font-size:clamp(28px,3vw,36px)}
.stella-t:focus{outline:none}
.stella-accueil{padding:22px 0 8px}
.vue .stella-accueil .chips{justify-content:center}
.stella-sait{text-align:center;margin:0 auto 16px;max-width:52ch}
.tiroir .stella-sait{text-align:left;margin-left:0}
.direct-titre{font-size:17px;margin-bottom:14px}

/* ── MON PROFIL : des réglages (Réglages iOS › identifiant Apple) ── */
.pf-entete{margin-bottom:22px}
.pf-id.groupe{display:flex;align-items:center;gap:18px;padding:18px 20px;margin-bottom:14px}
.pf-nom{font:700 22px/1.2 var(--police);letter-spacing:-.02em;overflow-wrap:anywhere}

/* ── la leçon : le numéro dans le titre, plus de surtitre « Leçon n » ── */
.lecon-chap-n{display:inline-block;min-width:1.5em;margin-right:6px;color:color-mix(in srgb,var(--teinte) 34%,var(--encre));font-variant-numeric:tabular-nums}

@media(max-width:900px){
  .page-accueil{padding-top:12px}
  .focal{min-height:calc(100vh - 56px - 12px);padding:16px 0 calc(var(--onglets-h) + 28px)}
  .focal-t{font-size:clamp(32px,9vw,44px);margin-top:24px}
  .focal-disque{width:104px;height:104px;font-size:40px}
  .dossier-chemise{padding:22px 18px 22px;border-radius:0 22px 22px 22px}
  .dossier-onglet{padding:12px 18px 10px 12px}
  .dossier-nom{font-size:22px}
  .dossier-init{width:44px;height:44px;font-size:17px}
  .zm{padding:18px 16px 18px}
  .rayon-l{margin-inline:-16px;padding-inline:16px;gap:16px}
  .planche{margin-inline:-16px;border-radius:0}
  .rayon .couv-lien{width:132px}
  .rayon .couv .couv-num{font-size:40px}
  .stella-tete{padding-top:8px}
  .stella-tete .marque-stella{width:60px;height:60px}
  .stella-tete .marque-stella img{width:32px;height:32px}
  .page-affiche .proposition{min-height:0}
}
@media(max-width:640px){
  /* Au téléphone, l'objet se cale en haut au lieu de se centrer : centré, sous le bandeau de
     démo ou de répétition, son unique action passait sous la barre d'onglets (relecture du 15/10). */
  .focal{justify-content:flex-start;padding-top:22px}
  .focal-disque{width:84px;height:84px;font-size:32px;box-shadow:0 0 0 8px color-mix(in srgb,var(--teinte,var(--bleu)) 14%,transparent)}
  .focal-t{font-size:32px;margin-top:18px}
  .eclairage .focal-t{margin-top:10px}
  .focal-jeune{gap:8px}
  .focal-jeune-nom{font-size:18px}
  .eclairage-texte,.focal-texte{font-size:16.5px;margin-top:14px}
  .eclairage-corps .focal-gestes{order:1}
  .eclairage-corps .eclairage-qui{order:2}
  .focal-gestes{margin-top:20px}
  .focal-gestes .b-grand{min-height:52px;padding:0 18px;font-size:16px;white-space:normal;line-height:1.25;text-align:center}
  /* Le geste plein garde sa place à gauche de la pastille de Stella (en bas à droite). */
  .focal-gestes{width:100%;align-items:flex-start}
  .focal-gestes .b-plein{width:calc(100% - 72px)}
  .jalon{flex-basis:102px;min-width:102px;padding-right:8px}
  .jalon-t{font-size:14px}
  .pf-id.groupe{padding:14px 16px;gap:14px}
}

/* ── mouvement : apparitions 240 ms, 60 ms d'écart, ressort ───────────── */
.arr{animation:arrivee .24s var(--spring) both}
.arr-1{animation-delay:60ms}.arr-2{animation-delay:120ms}.arr-3{animation-delay:180ms}
.arr-4{animation-delay:240ms}.arr-5{animation-delay:300ms}.arr-6{animation-delay:360ms}
.entree{animation:arrivee .26s var(--spring) both}
.part-carte{opacity:0;transform:translateY(-6px) scale(.98);transition:opacity .12s linear,transform .16s var(--spring)}
@keyframes arrivee{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes fondu{from{opacity:0}to{opacity:1}}
@keyframes feuille{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes monte{from{transform:translateY(100%)}to{transform:none}}
@keyframes toast{from{opacity:0;transform:translateY(18px) scale(.96)}62%{opacity:1;transform:translateY(-3px) scale(1.01)}to{opacity:1;transform:none}}
@keyframes tourne{to{transform:rotate(360deg)}}
@keyframes coche{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:none}}
@keyframes secousse{0%,100%{transform:none}22%{transform:translateX(-5px)}55%{transform:translateX(4px)}80%{transform:translateX(-2px)}}
@keyframes squel{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes respire{0%,100%{transform:scale(.9);opacity:.65}50%{transform:scale(1.06);opacity:1}}
@keyframes clignote{50%{opacity:0}}

/* ── le téléphone et la tablette ──────────────────────────────────────── */
@media(max-width:900px){
  :root{--entre:48px}
  .app{display:block}
  .tete-mobile{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;
    min-height:56px;padding:6px 8px 6px 16px;padding-top:max(6px,env(safe-area-inset-top));background:var(--barre-fond);
    -webkit-backdrop-filter:saturate(1.3) blur(20px);backdrop-filter:saturate(1.3) blur(20px);border-bottom:1px solid var(--ligne)}
  .tete-mobile .marque{padding:0;gap:10px;min-height:44px}
  .tete-mobile .marque-tuile{width:32px;height:32px;border-radius:9px}
  .tete-mobile .marque-tuile img{height:23px}
  .tete-mobile .marque-nom{font-size:18px}
  .tete-mobile .marque-logo{flex-direction:row;align-items:center;gap:10px}
  .tete-mobile .marque-logotype{height:28px;max-width:150px}
  .tete-mobile .marque-sous{font-size:11px}
  .tete-mobile .moi{width:auto;min-width:44px;min-height:44px;margin:0;padding:0 6px}
  .tete-mobile .moi-l{display:none}
  /* La bascule de démo, sous la barre : une ligne, le badge et le contrôle. */
  .demo-lat{display:none!important}
  .demo-mobile:not([hidden]){display:flex;flex-direction:row;align-items:center;gap:10px;padding:6px 16px;border-radius:0}
  .demo-mobile .demo-tete{flex:none}
  .demo-mobile .demo-tete .demo-voir{display:none}
  .demo-mobile .seg-glisse{flex:1;min-width:0}
  .demo-mobile .seg-glisse button{min-height:44px;font-size:12.5px}
  .pastille{right:16px;bottom:calc(var(--onglets-h) + 14px + env(safe-area-inset-bottom));width:56px;height:56px}
  .pastille img{height:31px}
  /* Au téléphone, Stella d'abord (le geste le plus fréquent) ; l'équipe en direct dessous. */
  .aide-cote{margin-top:8px}
  /* L'aide n'a pas de pastille : le composeur descend jusqu'à la barre d'onglets. */
  #vue-aide .page{padding-bottom:calc(var(--onglets-h) + 16px)}
  /* Sans hauteur imposée : le composeur suit les amorces (rien de caché dessous) et
     l'équipe en direct vient juste après ; il ne colle au bas qu'une fois le fil long. */
  .aide-grille .stella{min-height:0}
  .aide-grille .stella-accueil{padding:20px 0 8px}
  /* Fil vide : le composeur suit les amorces au lieu de les couvrir en collant au bas. */
  .aide-grille .stella:has(.stella-accueil) .composeur-zone{position:static;background:none;padding-top:4px}
  .direct{padding:16px 16px 14px}
  .direct-tete .avatar{width:44px;height:44px;font-size:17px}
  .direct .discret{display:none}
  .direct .gestes{margin-top:12px}
  .direct-urgence{display:none}
  .zm{padding:16px 16px 18px}
  /* La barre d'onglets : cinq cellules égales, l'icône sur un libellé court,
     le badge sur l'épaule de l'icône. */
  .lat{position:fixed;top:auto;bottom:0;left:0;right:0;width:auto;height:auto;z-index:30;display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));gap:0;padding:4px 2px;padding-bottom:max(4px,env(safe-area-inset-bottom));
    background:var(--barre-fond);border-right:none;border-top:1px solid var(--ligne)}
  .lat .marque,.lat .moi{display:none}
  .nav{flex-direction:column;justify-content:center;gap:3px;min-height:50px;padding:4px 0;border-radius:12px;
    font-size:11.5px;font-weight:600;letter-spacing:-.02em;color:var(--sec);text-align:center}
  .nav+.nav{margin-top:0}
  .nav[aria-current="page"]{background:transparent;box-shadow:none;color:var(--bleu-f)}
  .nav-l{display:none}
  .nav-c{display:block;max-width:100%;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav .badge{position:absolute;top:2px;left:calc(50% + 4px);height:18px;min-width:18px;padding:0 5px;font-size:12px;line-height:18px;
    box-shadow:0 0 0 2px var(--toile)}
  .page{padding:28px 16px calc(var(--onglets-h) + 96px)}
  .entete{margin-bottom:28px}
  .stella{min-height:calc(100vh - 56px - var(--onglets-h))}
  .composeur-zone{bottom:calc(var(--onglets-h) + env(safe-area-inset-bottom))}
  .stella-accueil{padding-top:24px}
  .escalade{margin-left:0}
  .toasts{left:16px;right:16px;bottom:calc(var(--onglets-h) + 84px);transform:none;max-width:none}
  .tiroir .composeur-zone,.tiroir-pied .composeur-zone{bottom:auto}
  /* Un tiroir ouvert couvre le bas de l'écran : les toasts passent en haut. */
  body:has(.tiroir) .toasts{bottom:auto;top:calc(16px + env(safe-area-inset-top))}
  .toast{width:100%}
  .eq-haut{gap:10px 16px;padding:10px 16px}
  .eq-page{padding:20px 16px 48px}
  .volet{position:static}
  .volet .conv-fil{max-height:none}
  .affiche-corps{padding:24px 22px 22px}
  .affiche-fil{font-size:150px}
  .segmente button{min-height:44px}
  /* La proposition au téléphone : le geste vient avant les raisons, pour
     qu'il tienne dans le premier écran (le bouton « Obtenir » de l'App Store
     est sous le nom, pas en bas de la fiche). */
  .proposition .affiche-corps{grid-template-areas:"id" "texte" "gestes" "faits" "raisons"}
  .proposition .raisons-panneau{padding:18px 18px}
}
@media(max-width:640px){
  .voile{padding:0;place-items:end stretch}
  .feuille{width:100%;max-height:92vh;border-radius:var(--r-tuile) var(--r-tuile) 0 0;animation:monte .32s var(--spring) both}
  .feuille::before{content:"";flex:none;display:block;width:36px;height:5px;border-radius:3px;background:var(--creux);margin:8px auto 0}
  .feuille-tete{padding:14px 60px 10px 20px}
  .feuille-titre{font-size:23px}
  .feuille-corps{padding:2px 20px 18px}
  .feuille-pied{flex-direction:column-reverse;align-items:stretch;padding:12px 20px calc(16px + env(safe-area-inset-bottom))}
  .feuille-pied .b{width:100%}
  .titre{font-size:40px}
  .affiche-synthese{font-size:17.5px}
  .gestes .b-plein,.affiche-gestes .b-plein{flex:1 1 100%}
  .affiche-gestes{justify-content:center}
  .affiche-gestes .b-ligne{flex:1 1 100%}
  .etape{grid-template-columns:36px minmax(0,1fr);gap:14px}
  .etape-n{width:36px;height:36px;font-size:16px}
  .etape::before{left:17px;top:38px}
  .mini{min-height:196px}
  .mini .affiche-corps{padding:16px 14px 14px}
  .mini-nom{font-size:27px}
  .mini .besoin{font-size:12px}
  .demandes .vide{padding:36px 18px}
  .ligne-motif{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .eq-haut .moi-l{display:none}
  .eq-haut .moi{min-width:44px;padding:0 6px}
  .eq-nav{order:3;width:100%}
  .eq-nav button{flex:1;padding:0 8px}
  .filtres{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 18px;padding:2px 16px;scrollbar-width:none}
  .filtres-barre .filtres{margin:0 -16px}
  .filtres::-webkit-scrollbar{display:none}
  .filtre{flex:none;min-height:44px}
  .conv-tete,.conv-fil{padding-left:16px;padding-right:16px}
  .contact .b{flex:1 1 100%}
  /* v2.1 au téléphone : le tiroir devient une feuille qui monte du bas ; la
     leçon perd son retrait ; les gestes de l'accueil d'une question par écran
     s'empilent, le bouton plein en bas, au pouce. */
  .tiroir{top:auto;left:0;right:0;bottom:0;width:100%;height:94vh;height:94dvh;border-radius:var(--r-tuile) var(--r-tuile) 0 0;
    animation:monte .32s var(--spring) both}
  .tiroir::before{content:"";flex:none;display:block;width:36px;height:5px;border-radius:3px;background:var(--creux);margin:8px auto 0;position:absolute;left:50%;
    transform:translateX(-50%);top:0;z-index:2}
  .tiroir.part{transform:translateY(24px)}
  .tiroir-tete{padding-top:18px}
  .tiroir-corps{padding:16px 16px 8px}
  .tiroir-pied{padding:8px 12px calc(12px + env(safe-area-inset-bottom))}
  .texte-long{padding-left:0}
  .lecon-sec-b{font-size:17px}
  .onb-gestes{flex-direction:column-reverse;align-items:stretch}
  .onb-gestes .b{width:100%}
  .histoires-vide{flex-direction:column;align-items:flex-start;gap:14px;padding:22px 20px}
  .couv-lien{width:150px}
  .couv-num{font-size:46px}
  .couv-titre{font-size:15.5px}
  .criteres{margin-top:-10px}
  .seg-glisse.seg-large{display:grid;width:100%}
  .seg-glisse.seg-large button{padding:0 10px;font-size:14px;min-height:44px}
  .agenda .rangee{flex-wrap:wrap}
  .agenda .rangee-c{flex:1 1 180px}
  .agenda .rangee-lien{margin-left:66px}
}
@media(max-width:900px){
  /* Au téléphone, une étagère se parcourt au doigt : pas de flèches (Apple TV,
     App Store) ; elle file jusqu'au bord de l'écran, dans la marge de la page. */
  .fleches{display:none}
  .rail{margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px;gap:12px}
  .histoire-texte{font-size:16.5px;line-height:1.5}
  .histoire-c{padding:20px 20px 18px;gap:12px}
}
@media(max-width:999px){
  /* Sous 1000 px, le sommaire de la leçon passe dans une feuille, ouverte par
     un bouton en tête de leçon (la colonne collante n'a plus la place). */
  .lecon .sommaire{display:none}
  .bouton-sommaire{display:inline-flex}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}