/*
 * Koda — les styles de l'application du jeune.
 *
 * Refonte du 04/11/2026 (Mourad) : trois temps.
 *   1. La scène d'entrée, reprise de l'accueil du cockpit des Ombres : plein écran bleu nuit,
 *      les mots qui sortent du flou, blanc puis baby blue, le réseau et le portrait de Koda, un
 *      seul bouton rouge « Commencer ».
 *   2. Les questions, une par écran, en grand (onboarding d'ElevenLabs) ; à l'ordinateur, le
 *      portrait de Koda à gauche.
 *   3. La plateforme : une conversation au niveau de ChatGPT, aux couleurs des Ombres. Fond
 *      blanc, réponses de Koda à plat, bulles du jeune en baby blue clair, champ en boîte
 *      arrondie posée en bas, gros bouton « Parler ». Le bandeau des fonctions (temps 2) est
 *      prêt : `.avec-bandeau`.
 * Charte Les Ombres 2026 : bleu nuit pour l'encre, rouge pour le seul bouton principal d'un
 * écran, cyan pour le halo et l'état (jamais en texte sur blanc), baby blue en fond, jamais en
 * texte sur blanc. Manrope. Téléphone d'abord ; à partir de 900 px, le format ordinateur.
 */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  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-display: swap;
  font-weight: 200 800;
  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;
}

:root {
  /* Palette signature (charte.css) */
  --nuit: #020318;
  --nuit-2: #0B0F2E;
  --rouge: #D91600;
  --rouge-f: #B01200;
  --cyan: #00ADCD;
  --baby: #98CFED;
  --blanc: #FFFFFF;

  /* Dérivés. Mesurés : encre 62 % sur blanc ≈ 7,9:1 ; bleu nuit sur baby blue clair 17:1 ;
     blanc sur bleu nuit 20,4:1. */
  --encre-2: rgba(2, 3, 24, .62);
  --encre-3: rgba(2, 3, 24, .44);
  --fond-2: #F2F5F9;
  --filet: rgba(2, 3, 24, .10);
  --filet-fort: rgba(2, 3, 24, .18);
  --baby-clair: #E6F3FB;
  --sur-nuit-2: rgba(255, 255, 255, .72);
  --ombre-boite: 0 1px 2px rgba(2, 3, 24, .06), 0 8px 28px rgba(2, 3, 24, .08);

  --police: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
    'Noto Sans Arabic', 'Geeza Pro', 'Noto Naskh Arabic', Tahoma,
    'Noto Sans Bengali', 'Kohinoor Bangla', 'Vrinda',
    'Noto Sans Ethiopic', 'Kefa', 'Nyala', sans-serif;
  --ressort: cubic-bezier(.2, .8, .2, 1);
  --rayon-bouton: 8px;
  --rayon-bulle: 22px;
  --rayon-carte: 20px;
  --colonne: 740px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--blanc); }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.5;
  color: var(--nuit);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
[dir='rtl'] *, :lang(bn) *, :lang(ti) * { letter-spacing: normal !important; }
[dir='rtl'] body, :lang(ar), :lang(fa), :lang(ps), :lang(bn) { line-height: 1.65; }

button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
img, svg { display: block; }
a { color: inherit; }
h1, h2, p { margin: 0; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 6px; }
.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.fichier-cache { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.noscript { padding: 48px 24px; font-size: 18px; }
[hidden] { display: none !important; }

.app { height: 100%; }
.ecran { min-height: 100%; }
.ecran.entre { animation: entre .32s var(--ressort); }
@keyframes entre { from { opacity: 0; transform: translateY(8px); } }

/* ——— Pictogrammes ——— */
.icone { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[dir='rtl'] .icone-sens { transform: scaleX(-1); }

/* ——— Le portrait de Koda dans son halo cyan (identité du 04/11) ——— */
.avatar { position: relative; display: inline-block; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--nuit); box-shadow: 0 0 0 2px var(--nuit), 0 0 0 3.5px var(--cyan), 0 0 14px 2px rgba(0, 173, 205, .45); }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar.vivant { animation: halo 1.6s ease-in-out infinite; }
@keyframes halo { 50% { box-shadow: 0 0 0 2px var(--nuit), 0 0 0 3.5px var(--cyan), 0 0 26px 7px rgba(0, 173, 205, .65); } }

/* ——— Boutons ——— */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 20px;
  border-radius: var(--rayon-bouton); border: 0; font-size: 16px; font-weight: 700; text-decoration: none; transition: background .15s, opacity .15s, transform .15s var(--ressort); }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn .icone { width: 20px; height: 20px; }
.btn-principal { background: var(--rouge); color: var(--blanc); }
.btn-principal:hover:not(:disabled) { background: var(--rouge-f); }
.btn-principal:disabled { opacity: .4; }
.btn-secondaire { background: var(--fond-2); color: var(--nuit); box-shadow: inset 0 0 0 1px var(--filet); }
.btn-secondaire:hover { background: var(--baby-clair); }
.btn-discret { min-height: 44px; padding: 8px 12px; border: 0; background: none; color: var(--encre-2); font-size: 15px; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.btn-discret:hover { color: var(--nuit); }
.btn-rond { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: inherit; flex: none; }
.btn-rond:hover:not(:disabled) { background: var(--fond-2); }
[aria-busy='true'] { cursor: progress; }

/* ═══════════════ 1. LA SCÈNE D'ENTRÉE ═══════════════
   Reprise de bienvenue.css du cockpit (26/10) : un plein écran bleu nuit, un halo cyan à
   peine visible, les mots qui sortent du flou. */
.scene { position: relative; display: flex; flex-direction: column; min-height: 100dvh; overflow: hidden;
  padding: max(20px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  background: radial-gradient(120% 90% at 50% 38%, rgba(0, 173, 205, .12), rgba(2, 3, 24, 0) 60%), var(--nuit); color: var(--blanc); }
.scene ::selection { background: rgba(152, 207, 237, .35); }
.ecran.scene.entre { animation: sc-apparait .9s var(--ressort) both; }
.sc-haut { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; }
.sc-logo { width: 77px; height: auto; opacity: .92; }
.sc-langue { position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 6px 14px 6px 10px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--blanc); font-size: 15px; font-weight: 650; }
.sc-langue:hover { background: rgba(255, 255, 255, .14); }
.sc-langue .icone { width: 19px; height: 19px; color: var(--baby); }
.sc-contenu { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 880px; margin: 0 auto; }
.sc-zone { display: flex; flex-direction: column; align-items: center; width: 100%; }

.sc-phrase { margin: 0; max-width: 18ch; text-align: center; font-size: clamp(32px, 7.6vw, 64px); font-weight: 800;
  line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.sc-clair { color: var(--baby); }
.sc-mot { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(.28em);
  animation: sc-mot .9s var(--ressort) forwards; animation-delay: calc(var(--i, 0) * 85ms + 150ms); }
.sc-phrase.sc-sort { animation: sc-sort .65s ease forwards; }
.sc-phrase-fin { font-size: clamp(28px, 6vw, 48px); max-width: 16ch; }
.sc-passer { position: absolute; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: rgba(255, 255, 255, .72); font-size: 16px; font-weight: 700; }
.sc-passer:hover { color: var(--blanc); background: rgba(255, 255, 255, .08); }
@keyframes sc-mot { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes sc-sort { to { opacity: 0; filter: blur(8px); transform: translateY(-.2em); } }
@keyframes sc-apparait { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* La fin : le réseau qui se forme, le portrait qui naît en son centre, la phrase, le geste. */
.sc-fin { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; width: 100%; }
.sc-naissance { position: relative; display: grid; place-items: center; width: min(340px, 82vw); height: min(300px, 38dvh); }
.sc-naissance > * { grid-area: 1 / 1; }
.sc-reseau { width: 100%; height: 100%; animation: sc-apparait 1.2s ease both, sc-recule 1.4s ease 2.6s both; }
.sc-portrait { width: min(150px, 38vw); height: min(150px, 38vw); animation: sc-nait 1.6s var(--ressort) 2.8s both;
  box-shadow: 0 0 0 3px var(--nuit), 0 0 0 5px var(--cyan), 0 0 48px 10px rgba(0, 173, 205, .45); }
.sc-naissance-petite { height: min(230px, 30dvh); }
.sc-naissance-petite .sc-reseau { animation: sc-apparait .8s ease both, sc-recule 1.2s ease .9s both; }
.sc-naissance-petite .sc-portrait { width: min(120px, 32vw); height: min(120px, 32vw); animation-delay: .6s; }
@keyframes sc-recule { to { opacity: .35; transform: scale(1.1); } }
@keyframes sc-nait { from { opacity: 0; transform: scale(.6); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
.sc-sous { max-width: 30ch; font-size: 18px; line-height: 1.5; color: var(--sur-nuit-2); animation: sc-apparait .9s var(--ressort) 1.2s both; }
.sc-geste { display: flex; justify-content: center; width: 100%; margin-top: 8px; animation: sc-apparait .8s var(--ressort) 1.4s both; }
.ecran-entree .sc-geste { animation-delay: 3.4s; }
.sc-go { min-height: 56px; min-width: min(320px, 100%); padding: 0 36px; border-radius: 999px; font-size: 18px; }
.sc-go:focus-visible { outline-color: var(--baby); outline-offset: 4px; }
.sc-go-clair { background: var(--blanc); color: var(--nuit); }
.sc-go-clair:hover { background: var(--baby-clair); }

/* Le double chemin : « Je suis un jeune » / « Je suis le mentor d'un jeune ». */
.sc-retour { position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--blanc); }
.sc-retour:hover { background: rgba(255, 255, 255, .14); }
.sc-avatar { width: 84px; height: 84px; box-shadow: 0 0 0 3px var(--nuit), 0 0 0 5px var(--cyan), 0 0 36px 8px rgba(0, 173, 205, .4); }
.sc-titre { font-size: clamp(30px, 6.4vw, 48px); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; max-width: 18ch; }
.sc-choix-liste { display: grid; gap: 12px; width: 100%; max-width: 440px; margin-top: 8px; animation: sc-apparait .7s var(--ressort) .2s both; }
.sc-choix { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 12px 16px 12px 12px; border: 0; border-radius: 22px;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: var(--blanc); font-size: 19px; font-weight: 750; line-height: 1.3; text-align: start;
  transition: background .15s, box-shadow .15s, transform .15s var(--ressort); }
.sc-choix > span:nth-child(2) { flex: 1; }
.sc-choix:hover { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1.5px var(--baby); }
.sc-choix:active { transform: scale(.98); }
.sc-choix:focus-visible { outline-color: var(--baby); }
.sc-choix > .icone { color: var(--sur-nuit-2); }
.sc-choix-icone { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(152, 207, 237, .16); color: var(--baby); flex: none; }
.sc-choix-icone .icone { width: 26px; height: 26px; }
.sc-grande-icone { width: 76px; height: 76px; border-radius: 22px; }
.sc-grande-icone .icone { width: 36px; height: 36px; }

/* ═══════════════ 2. LES QUESTIONS ═══════════════
   Téléphone : une colonne blanche, l'avatar au-dessus de la question.
   Ordinateur : le portrait de Koda en bleu nuit à gauche, la question à droite. */
.onboarding { display: grid; min-height: 100dvh; background: var(--blanc); }
.ob-visuel { display: none; }
.ob-panneau { display: flex; flex-direction: column; min-height: 100dvh; padding: max(12px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); }
.ob-haut { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 12px; min-height: 52px; }
.ob-haut .vide { width: 44px; }
.progression { display: grid; grid-auto-flow: column; gap: 6px; max-width: 220px; width: 100%; justify-self: center; }
.progression i { height: 5px; border-radius: 5px; background: var(--filet); transition: background .3s; }
.progression i.fait { background: var(--nuit); }
.ob-question { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 460px; margin: 0 auto; padding: 24px 0; }
.ob-avatar { width: 64px; height: 64px; margin: 0 0 28px; }
.ob-question h1 { font-size: 32px; line-height: 1.12; font-weight: 800; letter-spacing: -.03em; text-wrap: balance; }
.ob-texte { margin-top: 10px; font-size: 17px; color: var(--encre-2); }
.ob-question h1 + * { margin-top: 28px; }
.ob-question .ob-texte + * { margin-top: 28px; }
.ob-pied, .ob-pied-contenu { width: 100%; max-width: 460px; margin: 0 auto; display: grid; gap: 4px; }
.ob-pied .btn { width: 100%; min-height: 56px; font-size: 18px; border-radius: 999px; }
.ob-liens { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 12px; margin-inline-start: -12px; }

.champ { display: grid; gap: 8px; position: relative; }
.champ label { font-size: 14px; font-weight: 700; color: var(--encre-2); }
.champ input, .champ textarea { width: 100%; min-height: 54px; padding: 14px 16px; border: 1.5px solid var(--filet-fort); border-radius: 14px;
  background: var(--blanc); font-size: 18px; transition: border-color .15s, box-shadow .15s; }
.champ textarea { resize: vertical; min-height: 110px; }
.champ input::placeholder { color: var(--encre-3); }
.champ input:focus, .champ textarea:focus { border-color: var(--nuit); box-shadow: 0 0 0 4px var(--baby-clair); }
/* Le champ unique d'une question : en très grand, comme la question. */
.champ.grand input { min-height: 64px; font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.champ.code input { font-size: 30px; font-weight: 800; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.champ.age { grid-template-columns: 1fr; }
.champ.age input { max-width: 160px; font-size: 32px; text-align: center; font-variant-numeric: tabular-nums; }
.champ.age .unite { position: absolute; inset-inline-start: 176px; bottom: 18px; font-size: 20px; font-weight: 700; color: var(--encre-2); }
.champ .voir { position: absolute; inset-inline-end: 6px; bottom: 5px; text-decoration: none; }
.confirme { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 17px; font-weight: 700; }
.confirme .icone { color: var(--nuit); }
.erreur-champ { margin-top: 12px; color: var(--rouge); font-weight: 650; font-size: 15px; }
.demo { margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: var(--baby-clair); font-size: 15px; font-weight: 650; }
.aide { margin-top: 8px; font-size: 14px; color: var(--encre-2); }

/* « Tu as une adresse mail ? » : deux gros boutons. */
.oui-non { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gros-choix { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 132px; padding: 18px;
  border: 1.5px solid var(--filet); border-radius: 20px; background: var(--blanc); font-size: 20px; font-weight: 800; transition: border-color .15s, background .15s, transform .15s var(--ressort); }
.gros-choix:hover { border-color: var(--nuit); background: var(--fond-2); }
.gros-choix:active { transform: scale(.98); }
.pastille { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--nuit); color: var(--baby); }

/* Deux colonnes égales qui tiennent dans l'écran : avec `1fr 1fr`, le nom le plus long
   (« Sooninkanxanne ») élargissait sa colonne et la liste dépassait de 36 px à 375 px, la
   colonne de droite coupée (vu le 10/11). La coche ne prend sa place que sur la langue
   choisie : cachée, elle retirait 28 px à chaque nom. */
.langues { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.langue { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 56px; padding: 12px 16px;
  border: 1.5px solid var(--filet); border-radius: 14px; background: var(--blanc); font-size: 17px; font-weight: 700; text-align: start; }
.langue span { min-width: 0; overflow-wrap: anywhere; }
.langue:hover { border-color: var(--filet-fort); background: var(--fond-2); }
.langue .icone { display: none; flex: none; width: 20px; height: 20px; }
.langue[aria-checked='true'] { border-color: var(--nuit); box-shadow: inset 0 0 0 1px var(--nuit); }
.langue[aria-checked='true'] .icone { display: block; }
@media (max-width: 420px) { .langue { padding-inline: 12px; font-size: 16px; } }

@media (min-width: 900px) {
  .onboarding { grid-template-columns: minmax(380px, 46%) 1fr; }
  .ob-visuel { display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; background: var(--nuit); color: var(--blanc); }
  .ob-visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
  .ob-visuel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 3, 24, 0) 55%, rgba(2, 3, 24, .92)); }
  .ob-marque { position: relative; z-index: 1; display: grid; gap: 4px; padding: 40px 44px; }
  .ob-marque span { font-size: 40px; font-weight: 800; letter-spacing: -.035em; line-height: 1; }
  .ob-marque small { font-size: 16px; color: var(--sur-nuit-2); }
  .ob-avatar { display: none; }
  .ob-panneau { padding: 28px 48px 40px; }
  .ob-question h1 { font-size: 40px; }
  .sc-langue { inset-inline-end: 8px; }
}

/* ═══════════════ 3. LA PLATEFORME ═══════════════
   La coquille : la vue de la fonction, et (temps 2) le bandeau des fonctions — barre du bas
   au téléphone, barre de gauche à l'ordinateur. */
.plateforme { display: grid; grid-template-rows: minmax(0, 1fr); height: 100dvh; min-height: 0; background: var(--blanc); }
.plateforme-vue { min-height: 0; display: grid; }
.plateforme.avec-bandeau { grid-template-rows: minmax(0, 1fr) auto; }
.plateforme.avec-bandeau .plateforme-vue { grid-row: 1; }
.bandeau { grid-row: 2; display: flex; justify-content: space-around; padding: 6px 8px max(6px, env(safe-area-inset-bottom)); background: var(--blanc); box-shadow: 0 -1px 0 var(--filet); }
.bandeau-entree { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 72px; min-height: 52px; padding: 6px 10px; border: 0; border-radius: 12px; background: none; color: var(--encre-2); font-size: 12px; font-weight: 700; }
.bandeau-entree[aria-current='page'] { color: var(--nuit); background: var(--baby-clair); }
@media (min-width: 900px) {
  .plateforme.avec-bandeau { grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .plateforme.avec-bandeau .plateforme-vue { grid-column: 2; }
  .bandeau { grid-row: 1; grid-column: 1; flex-direction: column; justify-content: flex-start; gap: 6px; padding: 16px 6px; background: var(--nuit); box-shadow: none; }
  .bandeau-entree { color: var(--sur-nuit-2); }
  .bandeau-entree[aria-current='page'] { color: var(--blanc); background: rgba(152, 207, 237, .16); }
}

/* ═══════════════ LA CONVERSATION ═══════════════ */
.vue-conversation { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); height: 100%; min-height: 0; background: var(--blanc); }

/* L'en-tête : blanc, léger, comme ChatGPT. Koda, son état, les documents, le menu. */
.entete { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(8px, env(safe-area-inset-top)) 8px 8px 16px; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 0 var(--filet);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); position: relative; z-index: 2; }
.entete .qui { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.entete .qui > div { min-width: 0; }
.avatar-entete { width: 38px; height: 38px; box-shadow: 0 0 0 2px var(--blanc), 0 0 0 3.5px var(--cyan), 0 0 12px 1px rgba(0, 173, 205, .35); }
.entete .nom { font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.statut { font-size: 13.5px; color: var(--encre-2); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* La phrase de repos qui ne tient pas sur la ligne s'efface, le nom reste seul (app.js,
   `ajusterStatut`) : jamais de phrase coupée par « … » sous le nom de Koda. La largeur reste,
   pour que la mesure puisse dire quand elle tient de nouveau. */
.statut.coupe { height: 0; visibility: hidden; }
.statut.actif { color: var(--nuit); font-weight: 650; }
.statut.actif::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-inline-end: 6px; border-radius: 50%; background: var(--cyan); vertical-align: 1px; animation: clignote 1.2s infinite; }
.entete .actions { display: flex; align-items: center; gap: 2px; }
.btn-pastille { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 999px;
  background: var(--fond-2); color: var(--nuit); font-size: 15px; font-weight: 700; }
.btn-pastille:hover { background: var(--baby-clair); }
.btn-pastille .icone { width: 19px; height: 19px; }
@media (max-width: 599px) {
  /* Sur téléphone, « Mes documents » se réduit à son pictogramme. */
  .btn-pastille { width: 44px; height: 44px; padding: 0; justify-content: center; background: none; }
  .btn-pastille span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Le fil. */
.fil { overflow-y: auto; overscroll-behavior: contain; min-height: 0; scroll-padding-bottom: 24px; }
.colonne { width: 100%; max-width: var(--colonne); margin: 0 auto; padding: 0 16px; }
.messages { list-style: none; margin: 0; padding: 24px 0 28px; display: flex; flex-direction: column; gap: 6px; }
.msg { display: flex; align-items: flex-start; gap: 12px; max-width: 100%; }
.msg.koda + .msg.jeune, .msg.jeune + .msg.koda { margin-top: 22px; }
.msg.koda.suite { margin-top: 8px; }
.msg.jeune { justify-content: flex-end; padding-inline-start: 14%; flex-wrap: wrap; }
.avatar-msg { width: 30px; height: 30px; margin-top: 2px; box-shadow: 0 0 0 1.5px var(--blanc), 0 0 0 3px var(--cyan); }
.msg.suite .avatar-msg { visibility: hidden; }

/* Koda : à plat, sur blanc, comme les réponses de ChatGPT. */
.reponse { flex: 1; min-width: 0; }
.reponse .auteur { font-size: 14px; font-weight: 800; letter-spacing: -.01em; margin: 4px 0 4px; }
.msg.suite .reponse .auteur { display: none; }
.bulle { position: relative; min-width: 0; max-width: 100%; overflow-wrap: anywhere; white-space: pre-wrap; }
.koda .bulle { font-size: 17.5px; line-height: 1.6; color: var(--nuit); }
.mot-neuf { opacity: 0; animation: mot-neuf .38s ease forwards; }
@keyframes mot-neuf { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: none; } }
.outils { display: flex; gap: 2px; margin: 6px 0 0 -8px; }
[dir='rtl'] .outils { margin: 6px -8px 0 0; }
.outil { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; color: var(--encre-2); }
.outil:hover, .outil[aria-pressed='true'] { background: var(--fond-2); color: var(--nuit); }
.outil[aria-pressed='true'] { color: var(--nuit); box-shadow: inset 0 0 0 1.5px var(--cyan); }
.outil .icone { width: 19px; height: 19px; }
.sans-voix .outil[aria-label] + .outil { }
.sans-voix .outils .outil:first-child { display: none !important; }
@media (hover: hover) {
  /* À l'ordinateur, les outils d'une réponse se montrent au survol, sauf pour la dernière. */
  .msg.koda .outils { opacity: 0; transition: opacity .15s; }
  .msg.koda:hover .outils, .msg.koda:focus-within .outils, .msg.koda:last-child .outils { opacity: 1; }
}

/* Le jeune : une bulle baby blue clair, à droite. */
.jeune .bulle { padding: 11px 18px; border-radius: var(--rayon-bulle); background: var(--baby-clair); color: var(--nuit); font-size: 17px; line-height: 1.5; }
.etiquette-vocal { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 13px; font-weight: 700; color: var(--encre-2); }
.etiquette-vocal .icone { width: 15px; height: 15px; }
.jeune.rate .bulle { opacity: .55; }
.reessayer { flex-basis: 100%; text-align: end; border: 0; background: none; padding: 6px 4px; color: var(--rouge); font-size: 14px; font-weight: 700; }
.ecrit .bulle { padding: 10px 0; }

.attente { display: inline-flex; align-items: center; gap: 10px; color: var(--encre-2); font-size: 15px; }
.trois-points { display: inline-flex; gap: 5px; }
.trois-points i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .35; animation: point 1.2s infinite; }
.trois-points i:nth-child(2) { animation-delay: .15s; }
.trois-points i:nth-child(3) { animation-delay: .3s; }
.koda .trois-points { color: var(--nuit); }
@keyframes point { 30% { opacity: 1; transform: translateY(-3px); } }

/* Les cartes d'action, dans le fil : un filet rouge tant qu'elles attendent le oui du jeune. */
.msg:has(.carte) .avatar-msg { margin-top: 18px; }
.carte { flex: 1; min-width: 0; max-width: 560px; padding: 20px; border-radius: var(--rayon-carte); background: var(--blanc);
  box-shadow: inset 0 0 0 1px var(--filet-fort), var(--ombre-boite); }
.carte.en-attente { box-shadow: inset 0 0 0 1.5px rgba(217, 22, 0, .55), var(--ombre-boite); }
.carte-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.carte h2 { font-size: 19px; font-weight: 800; line-height: 1.3; letter-spacing: -.015em; }
.carte-texte { margin-top: 6px; color: var(--encre-2); font-size: 15.5px; }
.carte-sous { margin: 4px 0 10px; font-weight: 700; }
.carte-corps { margin-top: 14px; }
.carte-corps > * + * { margin-top: 12px; }
.pastille-oui { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--rouge); color: var(--blanc); font-size: 13px; font-weight: 700; white-space: nowrap; }
.pastille-faite { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 6px; border-radius: 999px; background: var(--baby-clair); font-size: 13px; font-weight: 700; }
.pastille-faite .icone { width: 16px; height: 16px; }
.carte-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.carte-actions .btn { min-height: 48px; padding: 10px 18px; font-size: 16px; border-radius: 999px; }
.carte-actions.pile { display: grid; }
.lien-confidentialite { min-height: 44px; margin-top: 2px; font-size: 14px; } /* le lien vers /confidentialite, sous l’accord */
.carte-actions.pile .btn { width: 100%; }

.carte ul.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.carte ul.points li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; }
.carte ul.points .icone { width: 20px; height: 20px; margin-top: 2px; color: var(--nuit); }

.docs { display: grid; gap: 8px; }
.doc-ligne { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 12px 8px 8px; border: 0; border-radius: 14px;
  background: var(--fond-2); font-size: 16px; font-weight: 700; text-align: start; }
.doc-ligne:hover { background: var(--baby-clair); }
.doc-ligne > span:nth-child(2) { flex: 1; }
.doc-icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--nuit); color: var(--baby); }
.doc-icone .icone { width: 20px; height: 20px; }

.vignettes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.vignettes:empty { display: none; }
.vignette { position: relative; margin: 0; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--fond-2); }
.vignette img { width: 100%; height: 100%; object-fit: cover; }
.vignette.en-cours { display: grid; place-items: center; }
.vignette .retirer { position: absolute; top: 4px; inset-inline-end: 4px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: rgba(2, 3, 24, .72); color: var(--blanc); }
.vignette .retirer .icone { width: 16px; height: 16px; }

.choix { display: grid; gap: 8px; }
.choix button { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px 8px 8px; border: 0; border-radius: 14px; background: var(--fond-2); font-size: 16px; font-weight: 700; text-align: start; }
.choix button:hover { background: var(--baby-clair); }
.choix .pastille { width: 40px; height: 40px; border-radius: 10px; }
.propositions { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.proposition { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 52px; padding: 10px 14px;
  border: 1.5px solid var(--filet); border-radius: 12px; background: var(--blanc); font-size: 16px; font-weight: 700; text-align: start; overflow-wrap: anywhere; }
.proposition small { font-weight: 500; color: var(--encre-2); font-size: 15px; }
.proposition .icone { opacity: 0; }
.proposition[aria-checked='true'] { border-color: var(--nuit); box-shadow: inset 0 0 0 1px var(--nuit); }
.proposition[aria-checked='true'] .icone { opacity: 1; }
.adresse-creee { font-size: 17px; font-weight: 800; overflow-wrap: anywhere; direction: ltr; unicode-bidi: isolate; }
.etapes-gmail { margin: 0; padding-inline-start: 22px; display: grid; gap: 6px; }
.serveur summary { cursor: pointer; font-weight: 700; color: var(--encre-2); min-height: 44px; display: flex; align-items: center; }
.serveur dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 14px; }
.serveur dt { font-weight: 700; }
.serveur dd { margin: 0; overflow-wrap: anywhere; }
.coches { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.coches li { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.coches .ok { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--nuit); color: var(--baby); }
.coches .ok .icone { width: 16px; height: 16px; }
.carte-adresse { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 8px 12px 14px; border-radius: 12px; background: var(--fond-2); }
.carte-adresse .lib { font-size: 13px; font-weight: 700; color: var(--encre-2); }
.carte-adresse .val { font-size: 16px; font-weight: 800; overflow-wrap: anywhere; direction: ltr; unicode-bidi: isolate; }
.aide-ligne { display: grid; gap: 8px; }
.aide-ligne + .aide-ligne { padding-top: 12px; border-top: 1px solid var(--filet); }

/* Les pistes (offres, entreprises, rendez-vous) : une par bloc, sur fond clair. Le titre en
   encre, la raison « pour toi » sur un filet cyan, puis les liens et les deux gestes. Une
   piste refusée s'estompe sans disparaître : le jeune voit ce qu'il a écarté. */
.pistes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.piste { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: var(--fond-2); transition: opacity .2s; }
.piste-titre { font-size: 16.5px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.piste-sous { color: var(--encre-2); font-size: 14.5px; overflow-wrap: anywhere; }
.piste-pourquoi { padding-inline-start: 10px; border-inline-start: 3px solid var(--cyan); font-size: 15.5px; }
.piste-liens, .piste-gestes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.piste-liens .btn, .piste-gestes .btn { min-height: 44px; padding: 8px 16px; font-size: 15.5px; border-radius: 999px; }
.piste-liens .btn-secondaire, .piste-gestes .btn-secondaire { background: var(--blanc); }
.piste-liens .btn-secondaire:hover, .piste-gestes .btn-secondaire:hover { background: var(--baby-clair); }
.piste-question { flex-basis: 100%; color: var(--encre-2); font-size: 14.5px; font-weight: 700; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.puce { min-height: 44px; min-width: 44px; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--blanc); box-shadow: inset 0 0 0 1px var(--filet-fort);
  font-size: 15px; font-weight: 700; color: var(--nuit); }
.puce:hover { background: var(--baby-clair); }
.puce:disabled { opacity: .5; }
.piste.retiree > :not(.piste-gestes) { opacity: .5; }
/* Le suivi d'une piste gardée (10/11/2026) : la prochaine étape, puis ce que Koda a noté. */
.piste-suite { flex-basis: 100%; color: var(--encre-2); font-size: 14.5px; line-height: 1.5; }
/* Le SMS de rappel (10/11/2026) : sa question et ses deux puces, d'un bloc sous la piste. */
.piste-sms { flex-basis: 100%; display: grid; gap: 8px; }
/* « Pas pour moi » : un lien, pas un bouton du même rang que « Ça m'intéresse » (10/11). */
.piste-gestes .piste-non { min-height: 44px; padding: 8px 6px; font-size: 15px; }
/* « Je n'ai plus ce travail » (10/11/2026, « après un oui ») : un lien discret, puis sa
   confirmation en deux puces, d'un bloc sous la marque du poste ou en bas de l'écran de retour. */
.piste-plus { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.piste-plus .btn-discret { padding-inline: 6px; }

/* L'écran de retour (10/11/2026) : l'état en rangées groupées, façon Réglages d'iOS. */
.etat { list-style: none; margin: 0; padding: 0; border-radius: 14px; background: var(--fond-2); overflow: hidden; }
.etat-rangee { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 8px 8px 14px; }
.etat-rangee + .etat-rangee { box-shadow: inset 0 1px 0 var(--filet); }
.etat-icone { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--nuit); color: var(--baby); }
.etat-icone .icone { width: 16px; height: 16px; }
.etat-texte { flex: 1; min-width: 0; }
.etat-titre { font-size: 16px; font-weight: 800; line-height: 1.3; }
.etat-valeur { color: var(--encre-2); font-size: 14.5px; }
.etat-rangee .btn-rond { background: var(--blanc); }
.etat-rangee .btn-rond:hover { background: var(--baby-clair); }
/* Deux blocs qui se suivent sans phrase entre eux (l'état puis la question sur le travail ; chez
   le mentor, le poste puis les pistes) gardent l'écart des blocs d'une même liste. */
.etat + .pistes, .pistes + .pistes { margin-top: 10px; }
.pistes + .piste-suite { margin-top: 10px; }

/* Le champ du bas : une boîte arrondie posée sur la page (ChatGPT). Le texte en haut ; en
   dessous, « + » à gauche, « Parler » ou la flèche à droite. */
.composeur { position: relative; padding: 0 0 max(8px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--blanc) 22px); }
.composeur .colonne { position: relative; }
.saisie-boite { display: flex; flex-direction: column; border-radius: 28px; background: var(--blanc); box-shadow: inset 0 0 0 1px var(--filet-fort), var(--ombre-boite); transition: box-shadow .15s; }
.saisie-boite:focus-within { box-shadow: inset 0 0 0 1.5px var(--nuit), var(--ombre-boite); }
.saisie { display: flex; }
.saisie textarea { flex: 1; min-height: 52px; max-height: 200px; padding: 15px 20px 4px; border: 0; background: none; resize: none; font-size: 17px; line-height: 1.45; }
.saisie textarea::placeholder { color: var(--encre-3); }
.saisie textarea:focus-visible { outline: none; }
.saisie-outils { display: flex; align-items: center; gap: 6px; padding: 4px 8px 8px; }
.saisie-outils .espace { flex: 1; }
.saisie-outils .btn-rond { width: 44px; height: 44px; box-shadow: inset 0 0 0 1px var(--filet-fort); }
.saisie-outils .btn-rond:disabled { opacity: .4; }
.btn-parler { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 14px; border: 0; border-radius: 999px;
  background: var(--nuit); color: var(--blanc); font-size: 16px; font-weight: 700; transition: background .15s, transform .15s var(--ressort); }
.btn-parler:hover:not(:disabled) { background: var(--nuit-2); }
.btn-parler:active:not(:disabled) { transform: scale(.97); }
.btn-parler:disabled { opacity: .4; }
.btn-parler .icone { width: 20px; height: 20px; color: var(--baby); }
.envoyer { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: var(--fond-2); color: var(--encre-3); transition: background .15s, color .15s; }
.envoyer.actif { background: var(--nuit); color: var(--blanc); }
.envoyer:disabled { cursor: default; }
.composeur.bloque .saisie-boite { opacity: .5; }
.mention { padding: 8px 8px 0; text-align: center; font-size: 12.5px; color: var(--encre-2); }
/* La flèche « aller en bas » se tient au bord, côté fin de ligne, comme dans Messages : au
   centre, elle recouvrait les réponses d'une carte plus haute que l'écran (« Pas pour moi »,
   « Non merci », vu sur les captures du 10/11). 44 px : la cible minimale au doigt. */
.vers-bas { position: absolute; inset-inline-end: 4px; top: -60px; display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: var(--blanc); color: var(--nuit); box-shadow: inset 0 0 0 1px var(--filet-fort), var(--ombre-boite); z-index: 1; }
.vers-bas .icone { width: 20px; height: 20px; }

/* L'enregistrement en cours remplace la boîte. */
.saisie-ligne.vocal { display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 8px; border-radius: 28px; background: var(--blanc); box-shadow: inset 0 0 0 1.5px var(--nuit), var(--ombre-boite); }
.saisie-ligne.vocal .btn-rond { width: 48px; height: 48px; }
.saisie-ligne.vocal .envoyer { width: 48px; height: 48px; }
.enregistre { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 8px; }
.enregistre .rec { width: 10px; height: 10px; border-radius: 50%; background: var(--rouge); animation: clignote 1s infinite; flex: none; }
@keyframes clignote { 50% { opacity: .25; } }
.enregistre .temps { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 40px; }
.niveau { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 3px; height: 30px; overflow: hidden; }
.niveau i { width: 3px; height: 100%; border-radius: 3px; background: var(--nuit); transform: scaleY(.12); transition: transform .1s; flex: none; }

@media (min-width: 900px) {
  .entete { padding: 12px 24px; }
  .messages { padding-top: 40px; }
  .msg.jeune { padding-inline-start: 24%; }
  .composeur { padding-bottom: 16px; }
  .avatar-msg { width: 32px; height: 32px; }
}

/* ——— Feuilles (menu, effacer, corriger) et panneau des documents ——— */
dialog { color: var(--nuit); }
dialog::backdrop { background: rgba(2, 3, 24, .45); }
.feuille { width: min(480px, calc(100% - 24px)); margin: auto auto 12px; padding: 20px; border: 0; border-radius: 24px; background: var(--blanc); max-height: 85dvh; overflow: auto; }
.feuille h2 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.feuille p { color: var(--encre-2); }
.feuille .boutons { display: grid; gap: 4px; margin-top: 20px; }
.feuille .btn { width: 100%; }
.feuille .champ { margin-top: 12px; }
.menu-liste { list-style: none; margin: 0; padding: 0; }
.menu-liste button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 8px 10px; border: 0; border-radius: 12px; background: none; font-size: 17px; font-weight: 650; text-align: start; }
.menu-liste button:hover { background: var(--fond-2); }
.fiche { display: grid; gap: 6px; margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--fond-2); font-size: 15px; }
.fiche div { display: flex; gap: 8px; }
.fiche dt { font-weight: 700; }
.fiche dd { margin: 0; }
@media (min-width: 700px) { .feuille { margin: auto; } }

.panneau { width: 100%; height: 100dvh; max-width: 100%; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: var(--fond-2); }
.panneau-corps { display: grid; grid-template-rows: auto 1fr auto; height: 100%; }
.panneau-tete { display: flex; align-items: center; gap: 8px; padding: max(10px, env(safe-area-inset-top)) 10px 10px 16px; background: var(--blanc); box-shadow: 0 1px 0 var(--filet); }
.segment { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--fond-2); }
.segment button { min-height: 44px; border: 0; border-radius: 9px; background: none; font-size: 15px; font-weight: 700; color: var(--encre-2); }
.segment button[aria-selected='true'] { background: var(--blanc); color: var(--nuit); box-shadow: 0 1px 3px rgba(2, 3, 24, .14); }
.cadre-doc { min-height: 0; padding: 12px; }
.cadre-doc iframe { width: 100%; height: 100%; border: 0; border-radius: 10px; background: var(--blanc); box-shadow: 0 1px 4px rgba(2, 3, 24, .12); }
.panneau-pied { display: flex; justify-content: flex-end; padding: 10px 16px max(12px, env(safe-area-inset-bottom)); background: var(--blanc); box-shadow: 0 -1px 0 var(--filet); }
@media (min-width: 900px) {
  .panneau { width: min(640px, 92vw); margin: 0 0 0 auto; }
  [dir='rtl'] .panneau { margin: 0 auto 0 0; }
  .panneau[open] { animation: glisse .28s var(--ressort); }
  @keyframes glisse { from { transform: translateX(40px); opacity: 0; } }
}

/* ——— Message passager ——— */
.toast { position: fixed; left: 50%; bottom: calc(132px + env(safe-area-inset-bottom)); transform: translate(-50%, 12px);
  max-width: min(440px, calc(100% - 32px)); padding: 12px 20px; border-radius: 24px; overflow-wrap: anywhere;
  background: var(--nuit); color: var(--blanc); font-size: 15px; font-weight: 650; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 10; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ——— Mouvement réduit : tout est là d'emblée ——— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .sc-mot, .mot-neuf { animation: none !important; opacity: 1; filter: none; transform: none; }
  .sc-reseau, .sc-portrait, .sc-geste, .sc-sous { animation: none !important; }
}

/* ═══════════════ L'ESPACE MENTOR (10/11/2026) ═══════════════
   Des listes groupées sur fond gris clair, une carte par jeune, façon Rappels d'iOS. */
.espace-mentor { max-width: 640px; margin: 0 auto; padding: 16px 16px 48px; display: grid; gap: 16px; align-content: start; }
.me-entete { display: flex; align-items: center; gap: 12px; }
.me-avatar { width: 44px; height: 44px; box-shadow: 0 0 0 2px var(--blanc), 0 0 0 3.5px var(--cyan); }
.me-qui { flex: 1; min-width: 0; }
.me-titre { font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.me-qui p { color: var(--encre-2); font-size: 14.5px; }
.me-entete .btn-discret { flex: none; font-size: 14px; }
.espace-mentor .segment { flex: none; }
.me-zone { display: grid; gap: 14px; }
.me-zone .carte { max-width: none; }
.me-etat, .me-vide, .me-intro { color: var(--encre-2); font-size: 15.5px; line-height: 1.5; }
.me-vide { padding: 24px 4px; text-align: center; }
.me-questions { display: grid; gap: 6px; }
.me-etape { color: var(--encre-2); font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.me-questions h2 { margin-bottom: 0; font-size: 22px; }
.me-choix { display: grid; margin-top: 14px; border-radius: 14px; background: var(--fond-2); overflow: hidden; }
.me-choix-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 14px 12px 16px;
  border: 0; background: none; color: var(--nuit); font-size: 17px; font-weight: 700; text-align: start; }
.me-choix-btn + .me-choix-btn { box-shadow: inset 0 1px 0 var(--filet); }
.me-choix-btn:hover { background: var(--baby-clair); }
.me-choix-btn .icone { width: 18px; height: 18px; color: var(--encre-2); }
.me-actuel { margin-top: 10px; font-weight: 700; color: var(--nuit) !important; }
/* Le jeune ne répond plus (noyau/alertes-mentor.js) : un fond bleu clair, un filet cyan, pas de
   rouge. Le rouge reste à l'action principale de l'écran. */
.me-alerte { display: grid; gap: 8px; margin-bottom: 12px; padding: 12px 14px; border-radius: 14px; background: var(--baby-clair); border-inline-start: 3px solid var(--cyan); }
.me-alerte-titre { font-size: 16.5px; font-weight: 800; line-height: 1.3; color: var(--nuit); }
.me-alerte-texte { font-size: 15px; line-height: 1.5; color: var(--nuit); overflow-wrap: anywhere; }
.me-alerte .puces { margin-top: 2px; }
/* « D'autres chemins » (noyau/portes.js). Côté mentor : la porte que le jeune a regardée, une
   phrase sous ses pistes, séparée par un filet. Côté jeune : l'invitation au-dessus des pistes,
   quand il les refuse toutes ; un fond bleu clair, pas de rouge (le rouge reste à la piste). */
.me-portes { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--filet); color: var(--nuit); }
.chemins-invite { display: grid; gap: 10px; margin-bottom: 14px; padding: 12px 14px; border-radius: 14px; background: var(--baby-clair); }
.chemins-invite .carte-texte { margin: 0; color: var(--nuit); }
/* Le bouton prend la largeur du bloc : à 375 px, son texte tient sur une ligne. */
.chemins-invite .btn { justify-content: space-between; min-height: 48px; padding: 10px 18px; border-radius: 999px; background: var(--blanc); }
/* Le titre de l'espace reçoit le focus pour le lecteur d'écran, pas pour l'œil : sans cadre. */
.me-titre:focus-visible { outline: none; }
/* Un second paragraphe dans une feuille (le mentor prévenu, sous l'explication du SMS). */
.feuille .feuille-suite { margin-top: 10px; }
/* « Quoi dire ? » (noyau/appel.js) : une phrase par rangée. Ce que la phrase fait, en petit et
   en gris, dans la langue du jeune ; la phrase à dire, en grand et en bleu nuit, en français ;
   son haut-parleur au bout, à 44 px. Aucun rouge ici : il reste au bouton d'appel. Sept
   phrases ne tiennent pas sur un petit téléphone : la liste défile entre deux filets, le titre
   au-dessus et les boutons en dessous ne bougent pas. */
.feuille-appel[open] { display: flex; flex-direction: column; overflow: hidden; }
.feuille-appel > div { display: flex; flex-direction: column; min-height: 0; }
.appel-defile { flex: 1; min-height: 0; overflow-y: auto; margin-top: 14px; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); overscroll-behavior: contain; }
.appel { list-style: none; margin: 0; padding: 0; }
.appel li { display: flex; align-items: center; gap: 8px; padding: 10px 0; }
.appel li + li { border-top: 1px solid var(--filet); }
.feuille .appel-note { padding: 12px 0; border-top: 1px solid var(--filet); font-size: 14.5px; line-height: 1.5; }
.feuille-appel .boutons { margin-top: 14px; }
.appel-texte { flex: 1; min-width: 0; }
.feuille .appel-role { font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--encre-2); }
.feuille .appel-phrase { margin-top: 2px; font-size: 17.5px; font-weight: 700; line-height: 1.35; color: var(--nuit); overflow-wrap: anywhere; }
.feuille .appel-nom { margin-top: 4px; font-size: 14.5px; line-height: 1.4; overflow-wrap: anywhere; }
.appel .outil { flex: none; width: 44px; height: 44px; color: var(--nuit); }
.feuille .appel-panne { margin-top: 10px; font-size: 14.5px; font-weight: 700; color: var(--nuit); }
.appel-panne:empty { display: none; }
/* « Préparer l'entretien » (noyau/entretien.js) : la même feuille, deux parties sous un petit
   titre (avant, pendant). Une étape n'est plus une rangée mais un bloc : ce que la phrase fait,
   la question du recruteur en gris (elle se reconnaît, elle ne se dit pas), « Tu peux dire : »,
   puis la réponse en grand et en bleu nuit comme dans « Quoi dire ? ». Chaque phrase française
   garde son haut-parleur au bout de sa ligne. Aucun rouge. */
.feuille .entretien-intro { margin: 0; padding: 12px 0 0; }
.entretien-intro + .appel { margin-top: 12px; border-top: 1px solid var(--filet); }
.feuille .entretien-partie { margin: 14px 0 4px; font-size: 13.5px; font-weight: 800; line-height: 1.35; color: var(--nuit); }
.entretien-avant { margin: 0; padding: 0 0 12px; padding-inline-start: 20px; font-size: 15.5px; line-height: 1.5; color: var(--encre); }
.entretien-avant li + li { margin-top: 4px; }
.entretien-partie + .appel { border-top: 1px solid var(--filet); }
.appel.entretien li { display: block; }
.entretien-ligne { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 3px 0; }
.entretien-ligne > p { flex: 1; min-width: 0; }
.feuille .entretien-question { margin-top: 0; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--encre-2); overflow-wrap: anywhere; }
.feuille .entretien-ligne > .appel-phrase { margin-top: 0; }
.feuille .entretien-dire { margin-top: 4px; font-size: 13.5px; line-height: 1.35; color: var(--encre-2); }
/* Côté mentor : les trois remarques sous les questions, séparées d'un filet. */
.appel + .entretien-avant { padding-top: 12px; border-top: 1px solid var(--filet); }
/* Sur l'écran de retour, un bouton secondaire sous la liste des pistes à suivre. */
.pistes + .carte-actions { margin-top: 10px; }