/* ─────────────────────────────────────────────────────────────
   TALKSEN — feuille de style (hôte et invité), charte validée le 13/10/2026,
   reprise écran par écran sur les maquettes (maquettes/) le 14/10/2026.

   Bleu #0053A3 = moi · Corail #FE6C55 = interlocuteur (texte dessus #3A0E06)
   Bulles de l'interlocuteur #FFE3DD · corail sur blanc #A3311C
   Bleu nuit #0C2340 = texte et fonds sombres · fond clair #F5F7FB · fond invité #FFF6F3
   Gris secondaire #55657A
   Dégradé signature RÉSERVÉ À LA PAROLE : contour du bouton de la personne qui parle,
   bordure de la bulle en cours de dictée, filets de la barre centrale (face à face),
   contour du bouton « Démarrer », points « traduction… / en train de parler ».
   Jamais en fond, jamais sous du texte.
   Titres et boutons : Montserrat 800 · texte : DM Sans.
   Cibles tactiles ≥ 44 px, contraste du texte ≥ 4,5:1, mouvement réduit respecté.
   ───────────────────────────────────────────────────────────── */

:root {
  --bleu: #0053A3;
  --bleu-fonce: #003F7D;
  --bleu-pale: #E6EEF7;
  --corail: #FE6C55;
  --corail-texte: #3A0E06;
  --corail-pale: #FFE3DD;
  --corail-sur-blanc: #A3311C;
  --nuit: #0C2340;
  --fond: #F5F7FB;
  --fond-invite: #FFF6F3;
  --gris: #55657A;
  --trait: #E3E8F0;
  --blanc: #FFFFFF;
  --orange: #EF7D00;
  --orange-texte: #A35500;
  --vert: #1F7A4D;
  --rouge: #B3261E;
  --lavande: #EEEAFE;
  --lavande-texte: #4B3BA8;
  --degrade: linear-gradient(90deg, #008CD1, #9C8BFE, #ED8CD9, #FE6C55, #EF7D00);
  --titre: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --texte: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --rayon: 20px;
  --ombre: 0 1px 2px rgba(12, 35, 64, .04), 0 6px 20px rgba(12, 35, 64, .06);
  --ombre-forte: 0 10px 30px rgba(12, 35, 64, .12);
  --douceur: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

/* L'attribut hidden l'emporte TOUJOURS (sinon display:grid/flex le neutralise) */
[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fond);
  color: var(--nuit);
  font: 400 16px/1.45 var(--texte);
  -webkit-tap-highlight-color: transparent;
}
body.feuille-ouverte { overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
svg { width: 22px; height: 22px; flex: none; }
:focus-visible { outline: 3px solid #008CD1; outline-offset: 2px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 800; letter-spacing: -.015em; margin: 0; }
.petit { display: block; font-size: 13px; color: var(--gris); }

/* ── Structure : un écran à la fois, colonne de téléphone (centrée sur ordinateur) ── */
.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.ecran {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: max(20px, env(safe-area-inset-top)) 20px 28px;
  animation: apparaitre .28s var(--douceur);
}
@media (min-width: 700px) {
  body { background: #E9EDF4; }
  .app { background: var(--fond); box-shadow: 0 0 0 1px var(--trait), 0 10px 40px rgba(12, 35, 64, .10); }
}

/* ── Éléments communs ── */
.carte { background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre); }
.titre { font-size: 28px; line-height: 1.15; margin-top: 6px; }
.titre-ecran { font-size: 30px; line-height: 1.15; margin-top: 24px; }
.entete-titre { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; }
.entete-titre .titre-ecran { margin-top: 0; }
.titre-groupe { margin: 6px 0 -6px; font: 700 13px/1.3 var(--texte); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.intro { margin: -6px 0 0; color: var(--gris); font-size: 15px; }
.titre-section { margin: 4px 0 -8px; font-weight: 700; font-size: 14px; color: var(--gris); }
.aide { font-size: 13px; color: var(--gris); }
.logo-horizontal { display: block; height: 26px; width: auto; }
.vide-liste { margin: 24px 8px; text-align: center; color: var(--gris); }

.bouton-icone {
  display: inline-grid; place-items: center; flex: none;
  width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: var(--blanc); color: var(--nuit); box-shadow: var(--ombre);
}
.bouton-icone:hover { background: var(--bleu-pale); }
.bouton-icone.sans-fond { box-shadow: none; background: transparent; width: 44px; height: 44px; }
.bouton-icone.sans-fond:hover { background: var(--bleu-pale); }

.bouton-principal {
  min-height: 52px; padding: 12px 24px; border: 0; border-radius: 999px;
  background: var(--bleu); color: var(--blanc);
  font: 800 16px var(--titre); transition: background .15s, transform .1s;
}
.bouton-principal:hover { background: var(--bleu-fonce); }
.bouton-principal:active { transform: scale(.98); }
.bouton-large { width: 100%; min-height: 60px; font-size: 17px; }
#cest-parti { margin-top: auto; }
.bouton-secondaire {
  min-height: 44px; padding: 10px 16px; border: 1.5px solid var(--trait); border-radius: 999px;
  background: var(--blanc); color: var(--nuit); font: 800 14px var(--titre);
}
.bouton-secondaire:hover { border-color: var(--bleu); color: var(--bleu); }
.bouton-contour {
  min-height: 44px; padding: 8px 20px; border: 2px solid var(--bleu); border-radius: 999px;
  background: var(--blanc); color: var(--bleu); font: 800 15px var(--titre); white-space: nowrap;
}
.bouton-contour:disabled { border-color: var(--trait); color: var(--gris); }
.bouton-rond-plein {
  display: grid; place-items: center; width: 56px; height: 56px; flex: none; border: 0; border-radius: 50%;
  background: var(--bleu); color: var(--blanc); box-shadow: 0 6px 16px rgba(0, 83, 163, .28);
}
.bouton-rond-plein svg { width: 26px; height: 26px; }

/* « Démarrer » : seul bouton (hors parole) à porter le dégradé, en CONTOUR */
.bouton-demarrer {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  width: 100%; min-height: 64px; border-radius: 999px;
  border: 3px solid transparent;
  background: linear-gradient(var(--bleu), var(--bleu)) padding-box, var(--degrade) border-box;
  color: var(--blanc); font: 800 18px var(--titre);
  box-shadow: 0 10px 26px rgba(156, 139, 254, .28), 0 4px 12px rgba(0, 83, 163, .2);
  transition: transform .1s;
}
.bouton-demarrer:hover { background: linear-gradient(var(--bleu-fonce), var(--bleu-fonce)) padding-box, var(--degrade) border-box; }
.bouton-demarrer:active { transform: scale(.985); }

.pilule { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 12px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.pilule.moi { background: var(--bleu-pale); color: var(--bleu); }
.pilule.autre { background: var(--corail-pale); color: var(--corail-sur-blanc); }
.pilule.blanche { background: var(--blanc); box-shadow: var(--ombre); }

.pastille-langue {
  display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 14px;
  font: 800 16px var(--titre); letter-spacing: .02em;
}
.pastille-langue.bleu { background: var(--bleu); color: var(--blanc); }
.pastille-langue.corail { background: var(--corail); color: var(--corail-texte); }

/* Segments (Homme / Femme, vitesse, façon de parler…) */
.segments {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
  padding: 5px; border-radius: 16px; background: #EEF2F7;
}
.segments label { position: relative; }
.segments input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.segments span {
  display: grid; place-items: center; min-height: 46px; padding: 6px 10px; border-radius: 12px;
  color: var(--gris); font-weight: 500; text-align: center; transition: background .15s, color .15s;
}
.segments input:checked + span { background: var(--blanc); color: var(--nuit); font-weight: 700; box-shadow: 0 2px 8px rgba(12, 35, 64, .1); }
.segments input:focus-visible + span { outline: 3px solid #008CD1; }
.segments-larges { background: var(--blanc); box-shadow: var(--ombre); }
.segments-larges span { min-height: 52px; }
.segments-larges input:checked + span { background: var(--bleu); color: var(--blanc); }

/* Interrupteurs */
.interrupteur { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 10px 0; cursor: pointer; }
.interrupteur > span:first-child { flex: 1; }
.interrupteur strong { display: block; font-weight: 700; font-size: 16px; }
.interrupteur small { display: block; color: var(--gris); font-size: 13px; }
.interrupteur input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.glissiere { position: relative; width: 56px; height: 34px; flex: none; border-radius: 999px; background: #B7C1CF; transition: background .18s; }
.glissiere::after { content: ''; position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: var(--blanc); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .18s var(--douceur); }
.interrupteur input:checked + .glissiere { background: var(--bleu); }
.interrupteur input:checked + .glissiere::after { transform: translateX(22px); }
.interrupteur input:focus-visible + .glissiere { outline: 3px solid #008CD1; outline-offset: 2px; }

/* ── Code d'accès ── */
.ecran-code { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: var(--fond); }
.carte-code { display: grid; gap: 12px; width: min(360px, 100%); padding: 28px 22px; }
.carte-code .logo-horizontal { height: 30px; margin: 0 auto 8px; }
.carte-code input, .champ-prenom input {
  min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--trait); border-radius: 12px; background: var(--blanc);
}
.erreur-texte { min-height: 1.2em; margin: 0; color: var(--rouge); font-size: 14px; }

/* ══ 1. Accueil ══ */
.entete-accueil { display: flex; align-items: center; justify-content: space-between; min-height: 56px; margin-top: 8px; }
.carte-langues { position: relative; padding: 4px 20px; }
.ligne-langue {
  display: flex; align-items: center; gap: 16px; width: 100%; min-height: 92px; padding: 0;
  border: 0; background: none; text-align: left; cursor: pointer;
}
.ligne-langue.moi { border-bottom: 1px solid var(--trait); }
.texte-langue { flex: 1; min-width: 0; }
.texte-langue strong { display: block; font-size: 19px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-langue .chevron { color: var(--gris); }
.bouton-echanger {
  position: absolute; right: 56px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--trait); background: var(--blanc); color: var(--bleu); box-shadow: var(--ombre);
  transition: transform .25s var(--douceur);
}
.bouton-echanger:active { transform: translateY(-50%) rotate(180deg); }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.carte-mode {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 150px; padding: 18px;
  border: 2px solid transparent; border-radius: var(--rayon); background: var(--blanc); box-shadow: var(--ombre); cursor: pointer;
  transition: border-color .15s;
}
.carte-mode input { position: absolute; opacity: 0; }
.carte-mode svg { width: 28px; height: 28px; color: var(--nuit); margin-bottom: 10px; }
.carte-mode strong { font-weight: 700; font-size: 17px; }
.carte-mode span { font-size: 14px; color: var(--gris); }
.carte-mode:has(input:checked) { border-color: var(--bleu); }
.carte-mode:has(input:focus-visible) { outline: 3px solid #008CD1; }
.recents { display: grid; gap: 10px; }
.recents .titre-groupe { margin: 4px 0 2px; }
.liste-recents { display: grid; gap: 10px; }
.ligne-recent {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 18px; width: 100%;
  border: 0; border-radius: 16px; background: var(--blanc); box-shadow: var(--ombre); text-align: left;
}
.codes-recent { display: inline-flex; align-items: center; gap: 10px; font: 800 14px var(--titre); }
.codes-recent .moi { color: var(--bleu); }
.codes-recent .autre { color: var(--corail-sur-blanc); }
.codes-recent .fleche { color: var(--gris); font: 400 14px var(--texte); }
.nom-recent { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.date-recent { font-size: 13px; color: var(--gris); white-space: nowrap; }

/* ══ Navigation basse (4 onglets) ══ */
.navigation {
  position: sticky; bottom: 0; z-index: 6; display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 8px 6px max(8px, env(safe-area-inset-bottom)); background: var(--blanc); border-top: 1px solid var(--trait);
}
.navigation button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px;
  border: 0; background: none; color: var(--gris); font-size: 13px; font-weight: 500;
}
.navigation button svg { width: 24px; height: 24px; }
.navigation button.actif { color: var(--bleu); font-weight: 700; }

/* ══ 2. Qui parle ? ══ */
.entete-ecran { display: flex; align-items: center; gap: 10px; min-height: 56px; margin: 4px 0 0 -10px; }
.entete-ecran h1 { font-size: 24px; }
.carte-voix { display: grid; gap: 16px; padding: 20px 18px; border-top: 5px solid var(--bleu); }
.carte-voix.autre { border-top-color: var(--corail); }
.titre-carte { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.titre-carte strong { font-family: var(--titre); font-weight: 800; font-size: 18px; }
.ligne-voix { display: flex; align-items: center; gap: 14px; }
.ligne-voix strong { display: block; font-weight: 700; font-size: 16px; }
.bouton-lecture {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none; border: 0; border-radius: 50%;
  background: var(--bleu); color: var(--blanc); transition: box-shadow .2s;
}
.bouton-lecture.autre { background: var(--corail); color: var(--corail-texte); }
.bouton-lecture.en-lecture { box-shadow: 0 0 0 6px var(--bleu-pale); animation: respirer 1s ease-in-out infinite; }
.bouton-lecture.autre.en-lecture { box-shadow: 0 0 0 6px var(--corail-pale); }
.champ-prenom { display: grid; gap: 6px; }

/* ══ 3/4. Conversation ══ */
.ecran-conversation, .ecran-archive { padding: 0; gap: 0; min-height: 100dvh; background: var(--fond); }
.entete-conversation {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 2px;
  padding: max(10px, env(safe-area-inset-top)) 8px 10px; background: var(--blanc); border-bottom: 1px solid var(--trait);
}
.titre-conversation { flex: 1; min-width: 0; padding-left: 4px; }
.titre-conversation h1 { font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sous-titre { display: block; font-size: 13px; color: var(--gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sous-titre .code-moi { color: var(--bleu); font-weight: 800; }
.sous-titre .code-autre { color: var(--corail-sur-blanc); font-weight: 800; }
.zone-fil { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.conversation {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
  padding: 22px 16px 16px; min-height: 240px; max-height: calc(100dvh - 300px);
}
.ecran-archive .conversation { max-height: none; }
.conversation .vide { margin: auto 8px; color: var(--gris); text-align: center; font-size: 15px; }
.astuce { margin: 0 4px 10px; font-size: 13px; color: var(--gris); text-align: right; }

/* Bulles : le texte dans la langue du lecteur en grand, l'autre langue en petit dessous */
.bulle {
  display: flex; flex-direction: column; gap: 8px; max-width: 82%;
  padding: 14px 18px; border-radius: 22px; border: 2px solid transparent;
  overflow-wrap: anywhere; animation: glisser .32s var(--douceur);
  transition: background-color .3s, color .3s;
}
.bulle.moi { align-self: flex-end; background: var(--bleu); color: var(--blanc); border-bottom-right-radius: 8px; }
.bulle.autre { align-self: flex-start; background: var(--corail-pale); color: var(--nuit); border-bottom-left-radius: 8px; }
.bulle.autre { animation-name: glisser-gauche; }
.bulle p { margin: 0; }
.bulle .original { order: 2; font-size: 15px; line-height: 1.4; }
.bulle .traduction { order: 1; font-size: 18px; line-height: 1.38; font-weight: 500; }
.bulle.propre .original { order: 1; font-size: 18px; font-weight: 500; }
.bulle.propre .traduction { order: 2; font-size: 15px; font-weight: 400; }
.bulle.moi.propre .traduction, .bulle.moi:not(.propre) .original { color: #D6E4F3; }
.bulle.autre.propre .traduction, .bulle.autre:not(.propre) .original { color: #6B3A30; }
.bulle .traduction:empty, .bulle .original:empty { display: none; }
.entete-bulle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Texte provisoire : gris et légèrement flou, puis net quand il est confirmé */
.bulle .provisoire { filter: blur(.3px); }
.bulle .fige { filter: none; transition: filter .35s, color .35s; }
/* Bulle en cours de dictée : fond blanc, texte gris, bordure en dégradé (la parole) */
.bulle.en-dictee {
  background: linear-gradient(var(--blanc), var(--blanc)) padding-box, var(--degrade) border-box;
  color: var(--gris);
}
.bulle.en-dictee p { color: var(--gris) !important; }
.bulle.en-dictee.autre .original { color: #6B3A30 !important; }
.bulle.corrigee { animation: corrigee .9s var(--douceur); }
.pied-bulle { order: 9; font-size: 12px; }
.pied-bulle:empty { display: none; }
/* Mots touchables (appui long : corriger ou ajouter au vocabulaire) */
.mot { border-radius: 6px; transition: background .15s, color .15s; -webkit-touch-callout: none; }
.mot.mot-choisi { background: var(--blanc); color: var(--bleu); padding: 1px 5px; font-weight: 700; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.bulle.autre .mot.mot-choisi { color: var(--corail-sur-blanc); }
.legende { max-width: 82%; margin: 0 6px 14px; font-size: 13px; color: var(--gris); }
/* Questions à l'intonation : choix proposé par un appui sur une bulle */
.menu-ponctuation { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 6px 12px; }
.menu-ponctuation.moi { align-self: flex-end; justify-content: flex-end; }
.menu-ponctuation.autre { align-self: flex-start; }
.menu-ponctuation button {
  min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--trait); border-radius: 999px;
  background: var(--blanc); color: var(--nuit); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.menu-ponctuation button:hover { border-color: var(--bleu); color: var(--bleu); }
.legende:empty { margin-bottom: 8px; }
.legende.moi { align-self: flex-end; text-align: right; }
.legende.autre { align-self: flex-start; }
.signal-confiance { display: inline-flex; align-items: center; gap: 6px; color: var(--orange-texte); font-weight: 700; }
.signal-confiance .rond {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--orange); color: var(--blanc); font-size: 12px;
}
.attente-traduction { order: 8; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; opacity: .9; }
.en-train { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gris); }
/* Trois points animés aux couleurs du dégradé */
.points-animes { display: inline-flex; gap: 4px; }
.points-animes i { width: 7px; height: 7px; border-radius: 50%; background: #9C8BFE; animation: point 1.1s ease-in-out infinite; }
.points-animes i:nth-child(1) { background: #008CD1; }
.points-animes i:nth-child(2) { background: #ED8CD9; animation-delay: .15s; }
.points-animes i:nth-child(3) { background: #FE6C55; animation-delay: .3s; }

/* Pied : clavier de secours + boutons de parole */
.pied-conversation {
  position: sticky; bottom: 0; display: grid; gap: 12px;
  padding: 12px 14px max(12px, env(safe-area-inset-bottom)); background: var(--blanc); border-top: 1px solid var(--trait);
}
.clavier {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 4px 4px 4px 18px;
  border-radius: 999px; background: var(--fond);
}
.clavier > svg { color: var(--gris); width: 22px; }
.clavier input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: none; font-size: 16px; }
.clavier input:focus { outline: none; }
.clavier:focus-within { box-shadow: 0 0 0 2px var(--bleu); }
.clavier input::placeholder { color: var(--gris); }
.bouton-envoyer { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--bleu); color: var(--blanc); }
.boutons-parole { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bouton-parler {
  --niveau: 0;
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 84px; padding: 10px; border-radius: 22px; border: 3px solid transparent;
  font: 800 17px var(--titre); touch-action: none; user-select: none; -webkit-user-select: none;
  transition: transform .12s, box-shadow .2s;
}
.bouton-parler.moi { background: var(--bleu); color: var(--blanc); }
.bouton-parler.autre { background: var(--corail); color: var(--corail-texte); }
.bouton-parler svg { width: 26px; height: 26px; }
.bouton-parler:active { transform: scale(.98); }
/* Anneau dégradé : visible pendant la parole, il pulse selon le niveau réel du micro (--niveau 0 → 1) */
.bouton-parler .anneau {
  position: absolute; inset: -8px; border-radius: 28px; border: 3px solid transparent;
  background: var(--degrade) border-box; pointer-events: none; opacity: 0;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  transform: scale(calc(1 + var(--niveau) * .06)); transition: opacity .12s, transform .08s linear;
}
.bouton-parler[aria-pressed="true"] .anneau { opacity: calc(.5 + var(--niveau) * .5); }
/* Personne qui parle : contour en dégradé (la parole) + halo doux */
.bouton-parler.moi[aria-pressed="true"] { background: linear-gradient(var(--bleu), var(--bleu)) padding-box, var(--degrade) border-box; }
.bouton-parler.autre[aria-pressed="true"] { background: linear-gradient(var(--corail), var(--corail)) padding-box, var(--degrade) border-box; }
.bouton-parler[aria-pressed="true"] { box-shadow: 0 0 0 8px rgba(237, 140, 217, .18), 0 0 calc(10px + var(--niveau) * 24px) rgba(156, 139, 254, .35); }
.bouton-parler:disabled { opacity: .55; }
.statut { margin: 0; text-align: center; font-size: 13px; color: var(--gris); }
.invite-distant {
  display: grid; place-items: center; min-height: 84px; padding: 8px; border-radius: 22px;
  border: 2px dashed var(--corail); color: var(--corail-sur-blanc); font-size: 14px; font-weight: 700; text-align: center; line-height: 1.3;
}
.langue-detectee { margin: 6px 14px 0; font-size: 13px; color: var(--gris); text-align: center; }

.bandeau-erreur, .bandeau-info, .alerte-langue {
  margin: 8px 14px 0; padding: 12px 16px; border-radius: 14px; font-size: 14px; animation: glisser .25s var(--douceur);
}
.bandeau-erreur { background: #FDECEA; color: var(--rouge); }
.bandeau-info { background: var(--bleu-pale); color: var(--bleu-fonce); }
/* Alerte visible chez l'hôte : l'invité a changé de langue */
.alerte-langue { display: flex; align-items: center; gap: 10px; background: var(--corail-pale); color: var(--corail-sur-blanc); font-weight: 700; border: 2px solid var(--corail); }
.alerte-langue button { margin-left: auto; min-height: 44px; min-width: 44px; border: 0; background: none; color: inherit; font-weight: 700; }

/* ── Face à face : moitié haute retournée pour l'interlocuteur ── */
.face-haut, .face-bas, .barre-centrale { display: none; }
.ecran-conversation[data-mode="face"] .zone-fil,
.ecran-conversation[data-mode="face"] .clavier,
.ecran-conversation[data-mode="face"] .entete-conversation { display: none; }
.ecran-conversation[data-mode="face"] { display: grid; grid-template-rows: 1fr auto 1fr auto; min-height: 100dvh; }
.ecran-conversation[data-mode="face"] .face-haut,
.ecran-conversation[data-mode="face"] .face-bas { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; min-height: 0; }
.face-haut { transform: rotate(180deg); background: #FFEDE9; }
.face-bas { background: #EAF1FA; }
.face-textes { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; overflow: hidden; }
.face-grand { margin: 0; font: 800 clamp(24px, 7vw, 30px)/1.25 var(--titre); color: var(--nuit); overflow-wrap: anywhere; }
.face-grand .nombre { color: var(--bleu); }
.face-haut .face-grand .nombre { color: var(--corail-sur-blanc); }
.face-petit { margin: 0; font-size: 15px; color: var(--gris); }
.face-haut .face-petit { color: #6B3A30; }
.face-pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--gris); }
.face-haut .face-pied { color: #6B3A30; flex-direction: row-reverse; }
.face-etat { display: inline-flex; align-items: center; gap: 8px; }
.face-zone-bouton { display: flex; justify-content: center; }
.face-zone-bouton .bouton-parler, .ecran-conversation[data-mode="face"] .boutons-parole .bouton-parler {
  flex-direction: row; gap: 12px; min-height: 64px; min-width: 250px; border-radius: 999px; padding: 10px 28px; font-size: 18px;
}
.face-zone-bouton .bouton-parler .anneau, .ecran-conversation[data-mode="face"] .bouton-parler .anneau { border-radius: 999px; }
.ecran-conversation[data-mode="face"] .boutons-parole { display: flex; justify-content: center; }
.ecran-conversation[data-mode="face"] .pied-conversation { background: #EAF1FA; border-top: 0; padding-top: 4px; }
.ecran-conversation[data-mode="face"] .barre-centrale {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  min-height: 68px; padding: 8px 14px; background: var(--nuit);
}
/* Filets fins en dégradé de part et d'autre de la barre centrale (la parole) */
.barre-centrale::before, .barre-centrale::after { content: ''; position: absolute; left: 0; right: 0; height: 4px; background: var(--degrade); }
.barre-centrale::before { top: 0; }
.barre-centrale::after { bottom: 0; }
.bouton-rond { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: var(--blanc); }
.logo-symbole { height: 32px; width: auto; }

/* ══ 5. Historique ══ */
.recherche {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 18px;
  border-radius: 16px; background: var(--blanc); box-shadow: var(--ombre); color: var(--gris);
}
.recherche input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: none; color: var(--nuit); font-size: 16px; }
.recherche input:focus { outline: none; }
.recherche:focus-within { box-shadow: 0 0 0 2px var(--bleu); }
.recherche input::placeholder { color: var(--gris); }
.liste-historique { display: grid; gap: 14px; }
.carte-historique { position: relative; display: flex; align-items: flex-start; gap: 8px; padding: 4px; border: 2px solid transparent; animation: glisser .3s var(--douceur); }
.carte-historique.renommage { background: linear-gradient(var(--blanc), var(--blanc)) padding-box, var(--degrade) border-box; }
.contenu-carte { flex: 1; min-width: 0; display: grid; gap: 8px; padding: 16px 0 16px 18px; border-radius: 16px; cursor: pointer; text-align: left; }
.contenu-carte:focus-visible { outline-offset: -2px; }
.nom-conversation { font-size: 20px; line-height: 1.25; }
.lieu-conversation { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 15px; color: var(--gris); }
.lieu-conversation svg { width: 18px; height: 18px; }
.extrait-conversation { margin: 0; font-size: 15px; color: var(--gris); }
.etiquettes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 0; }
.nombre-repliques { font-size: 14px; color: var(--gris); }
.bouton-crayon { display: grid; place-items: center; align-self: center; width: 48px; height: 48px; margin-right: 8px; border: 0; border-radius: 50%; background: none; color: var(--gris); }
.bouton-crayon:hover { background: var(--bleu-pale); color: var(--bleu); }
.form-renommer { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 12px; }
.libelle-renommer { grid-column: 1 / -1; font-size: 13px; font-weight: 700; color: var(--lavande-texte); }
.champ-renommer { min-height: 44px; border: 0; border-bottom: 3px solid #9C8BFE; background: none; font: 800 20px var(--titre); color: var(--nuit); padding: 0; }
.champ-renommer:focus { outline: none; border-bottom-color: var(--bleu); }
.bouton-valider-rond { display: grid; place-items: center; width: 56px; height: 56px; margin: -36px 4px 0 0; border: 0; border-radius: 50%; background: var(--bleu); color: var(--blanc); }

/* ══ 6. Vocabulaire ══ */
.filtres { display: flex; gap: 10px; overflow-x: auto; margin: 0 -20px; padding: 2px 20px 6px; scrollbar-width: none; }
.filtres::-webkit-scrollbar { display: none; }
.puce-filtre {
  flex: none; min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px;
  background: var(--blanc); color: var(--nuit); font-weight: 500; font-size: 16px; box-shadow: var(--ombre);
}
.puce-filtre[aria-pressed="true"] { background: var(--nuit); color: var(--blanc); font-weight: 700; }
.liste-vocabulaire { display: grid; gap: 12px; }
.ligne-vocabulaire {
  display: flex; align-items: center; gap: 16px; width: 100%; min-height: 84px; padding: 14px 16px;
  border: 0; text-align: left; animation: glisser .3s var(--douceur);
}
.avatar-mot { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 14px; font: 800 18px var(--titre); }
.avatar-mot.personne { background: var(--bleu-pale); color: var(--bleu); }
.avatar-mot.entreprise { background: var(--lavande); color: var(--lavande-texte); }
.avatar-mot.ville, .avatar-mot.rue { background: var(--corail-pale); color: var(--corail-sur-blanc); }
.avatar-mot.imposee { background: #FFF0DD; color: #8A4B00; }
.avatar-mot.autre { background: #EEF1F5; color: #3D4A5C; }
.textes-mot { flex: 1; min-width: 0; display: grid; gap: 2px; }
.textes-mot strong { font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.detail-mot { font-size: 14px; color: var(--gris); }
.badge-mot { flex: none; padding: 6px 12px; border-radius: 10px; background: #EEF1F5; color: var(--nuit); font-size: 13px; font-weight: 700; }
.carte-pack { display: flex; align-items: center; gap: 12px; min-height: 84px; padding: 14px 16px 14px 20px; }
.textes-pack { flex: 1; display: grid; gap: 2px; }
.textes-pack strong { font-size: 17px; }
.textes-pack span { font-size: 14px; color: var(--gris); }

/* ══ Panneaux qui montent du bas (choix de la langue, ajouter un mot) ══ */
.voile-feuille {
  position: fixed; inset: 0; z-index: 40; background: rgba(12, 35, 64, .38);
  opacity: 0; transition: opacity .26s;
}
.voile-feuille.ouvert { opacity: 1; }
.feuille {
  position: fixed; z-index: 41; left: 50%; bottom: 0; width: min(480px, 100%);
  display: flex; flex-direction: column; max-height: 92dvh;
  border-radius: 28px 28px 0 0; background: var(--blanc); box-shadow: 0 -10px 40px rgba(12, 35, 64, .2);
  transform: translate(-50%, 100%); transition: transform .3s var(--douceur);
  padding-bottom: env(safe-area-inset-bottom);
}
.feuille.ouverte { transform: translate(-50%, 0); }
.feuille-langues { height: 92dvh; }
.poignee { width: 44px; height: 5px; margin: 10px auto 4px; border-radius: 3px; background: #CBD3DE; flex: none; }
.entete-feuille { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 12px 10px 22px; }
.entete-feuille h2 { font-size: 21px; }
.bouton-fermer-feuille { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: #EEF2F7; color: var(--nuit); }
.recherche-langue {
  display: flex; align-items: center; gap: 12px; margin: 0 20px 8px; min-height: 52px; padding: 0 16px;
  border-radius: 14px; background: var(--fond); color: var(--gris);
}
.recherche-langue:focus-within { box-shadow: 0 0 0 2px var(--bleu); }
.recherche-langue input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: none; color: var(--nuit); font-size: 16px; }
.recherche-langue input:focus { outline: none; }
.defilement-langues { flex: 1; overflow-y: auto; padding: 4px 12px 20px; overscroll-behavior: contain; }
.defilement-langues h3 { margin: 16px 10px 6px; font: 700 13px var(--texte); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.ligne-langue-feuille { display: flex; align-items: center; gap: 4px; border-radius: 16px; transition: background .15s; }
.ligne-langue-feuille.choisie { background: var(--bleu-pale); }
.choix-principal {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 8px 10px;
  border: 0; border-radius: 16px; background: none; text-align: left;
}
.choix-principal .pastille-langue { width: 46px; height: 46px; font-size: 15px; border-radius: 13px; }
.noms-langue { flex: 1; min-width: 0; display: grid; }
.noms-langue strong { font-size: 18px; font-weight: 700; }
.noms-langue span { font-size: 14px; color: var(--gris); }
.coche { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--blanc); background: var(--bleu); opacity: 0; transform: scale(.6); transition: opacity .15s, transform .2s var(--douceur); }
.ligne-langue-feuille.choisie .coche { opacity: 1; transform: scale(1); }
.coche svg { width: 18px; height: 18px; }
.bouton-ecouter-langue {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none; margin-right: 6px;
  border: 1.5px solid var(--trait); border-radius: 50%; background: var(--blanc); color: var(--bleu);
}
.bouton-ecouter-langue svg { width: 18px; height: 18px; }
.bouton-ecouter-langue.en-lecture { background: var(--bleu); color: var(--blanc); border-color: var(--bleu); animation: respirer 1s ease-in-out infinite; }
.aucune-langue { margin: 24px; text-align: center; color: var(--gris); }
.pied-feuille { padding: 12px 20px 16px; border-top: 1px solid var(--trait); }

/* Panneau « Ajouter un mot » (maquette 7) */
.form-mot { display: grid; gap: 12px; padding: 10px 22px 22px; overflow-y: auto; }
.libelle-feuille { margin: 6px 0 0; font-size: 14px; font-weight: 700; color: var(--gris); }
.champ-mot {
  min-height: 64px; padding: 10px 18px; border: 2.5px solid var(--bleu); border-radius: 16px;
  background: var(--fond); font: 800 24px var(--titre); color: var(--nuit);
}
.champ-mot:focus { outline: none; box-shadow: 0 0 0 4px var(--bleu-pale); }
.puces-types { display: flex; flex-wrap: wrap; gap: 10px; }
.puce-type { min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: #EEF2F7; color: var(--nuit); font-size: 16px; font-weight: 500; }
.puce-type[aria-checked="true"] { background: var(--bleu); color: var(--blanc); font-weight: 700; }
.champ-libelle { display: grid; gap: 6px; font-size: 14px; color: var(--gris); }
.champ-libelle input, .champ-libelle select { min-height: 48px; padding: 8px 14px; border: 1.5px solid var(--trait); border-radius: 12px; background: var(--blanc); color: var(--nuit); font-size: 16px; }
.bloc-imposee { display: grid; gap: 12px; }
.bouton-supprimer-mot { min-height: 44px; border: 0; background: none; color: var(--rouge); font-weight: 700; }

/* ══ 9. Inviter ══ */
.ecran-sombre { background: var(--nuit); color: var(--blanc); }
.ecran-sombre .bouton-icone { color: var(--blanc); }
.ecran-sombre .bouton-icone.sans-fond:hover { background: rgba(255, 255, 255, .1); }
.onglets { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 5px; border-radius: 16px; background: rgba(255, 255, 255, .1); }
.onglets button { min-height: 48px; border: 0; border-radius: 12px; background: none; color: #D7DFEA; font-weight: 700; font-size: 16px; }
.onglets button[aria-selected="true"] { background: var(--blanc); color: var(--nuit); }
.intro-sombre { margin: 4px 0; text-align: center; color: #E3E9F2; font-size: 16px; }
.cadre-qr {
  position: relative; width: min(270px, 72vw); aspect-ratio: 1; margin: 8px auto; padding: 16px;
  border: 5px solid transparent; border-radius: 28px;
  background: linear-gradient(var(--blanc), var(--blanc)) padding-box, var(--degrade) border-box;
}
.cadre-qr .qr, .cadre-qr .qr svg { display: block; width: 100%; height: 100%; }
.qr-symbole {
  position: absolute; left: 50%; top: 50%; width: 22%; height: auto; transform: translate(-50%, -50%);
  padding: 4px 5px; border-radius: 8px; background: var(--blanc);
}
.carte-secours { display: grid; gap: 8px; margin: 0; padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, .08); }
.carte-secours div { display: flex; justify-content: space-between; gap: 12px; }
.carte-secours dt { color: #D7DFEA; }
.carte-secours dd { margin: 0; font-weight: 700; letter-spacing: .04em; }
.etat-salon { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 0; color: #E3E9F2; }
.etat-salon .point { width: 12px; height: 12px; border-radius: 50%; background: var(--corail); box-shadow: 0 0 0 4px rgba(254, 108, 85, .25); animation: respirer 1.6s ease-in-out infinite; }
.etat-salon.connecte .point { background: #3FD08A; box-shadow: 0 0 0 4px rgba(63, 208, 138, .25); animation: none; }
.lien-sombre { margin: 0; font-weight: 700; overflow-wrap: anywhere; color: var(--blanc); }
.aide-sombre { margin: 0; font-size: 14px; color: #D7DFEA; overflow-wrap: anywhere; }
.actions-sombre { display: grid; gap: 6px; margin-top: auto; }
.bouton-contour-clair { min-height: 60px; border: 2px solid rgba(255, 255, 255, .6); border-radius: 999px; background: none; color: var(--blanc); font: 800 17px var(--titre); }
.bouton-lien-clair { min-height: 44px; border: 0; background: none; color: #FFB3A6; font-weight: 700; }

/* ══ 8. Réglages ══ */
.liste-reglages { display: grid; padding: 4px 20px; }
.liste-reglages > * + *, #reglages-cascade > * + *, #reglages-cascade, #reglages-mains-libres { border-top: 1px solid var(--trait); }
.ligne-reglage {
  display: flex; align-items: center; gap: 10px; min-height: 64px; width: 100%;
  border: 0; background: none; padding: 0; text-align: left; font-weight: 700; font-size: 17px;
}
.ligne-reglage svg { color: var(--gris); width: 20px; }
.ligne-reglage[aria-disabled="true"] { cursor: default; }
.valeur-reglage { margin-left: auto; font-weight: 400; font-size: 15px; color: var(--gris); }
.ligne-danger { min-height: 60px; border: 0; background: none; padding: 0; text-align: left; color: var(--rouge); font-weight: 700; font-size: 17px; }
.bloc-reglage { display: grid; gap: 14px; padding: 20px; }
.titre-bloc { font: 700 17px var(--texte); letter-spacing: 0; }
.explication { margin: -2px 0 0; font-size: 14px; color: var(--gris); }
.ligne-curseur { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }
.curseur { width: 100%; min-height: 44px; accent-color: var(--bleu); }
.ligne-choix { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 60px; }
.ligne-choix select { min-height: 44px; max-width: 60%; padding: 6px 10px; border: 1.5px solid var(--trait); border-radius: 10px; background: var(--blanc); }
.info-moteur { margin: 0; padding: 12px 0; font-size: 13px; color: var(--gris); }
.info-moteur.indisponible { color: var(--rouge); }
.outils { padding: 4px 20px 12px; }
.outils > summary {
  display: flex; align-items: center; gap: 10px; min-height: 60px; cursor: pointer; list-style: none;
  font: 800 17px var(--titre);
}
.outils > summary::-webkit-details-marker { display: none; }
.outils > summary::after { content: '›'; margin-left: auto; font-size: 24px; color: var(--gris); transition: transform .15s; }
.outils[open] > summary::after { transform: rotate(90deg); }
.pied { margin: 8px 0 0; text-align: center; font-size: 12px; color: var(--gris); }

/* Mesures (dans « Outils de test ») */
.mesures h2 { font-size: 16px; margin: 8px 0 10px; }
.mesures h2 small { font: 500 13px var(--texte); color: var(--gris); }
.tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tuile { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--fond); min-width: 0; }
.tuile .libelle { font-size: 12px; color: var(--gris); }
.tuile .valeur { font: 800 18px var(--titre); }
.tuile .detail { font-size: 12px; color: var(--gris); overflow-wrap: anywhere; }
.defilement-tableau { overflow-x: auto; margin-top: 10px; }
.tableau-delais { width: 100%; border-collapse: collapse; font-size: 13px; }
.tableau-delais th, .tableau-delais td { padding: 7px 6px; border-bottom: 1px solid var(--trait); text-align: right; white-space: nowrap; }
.tableau-delais th:first-child { text-align: left; white-space: normal; }
.tableau-delais thead th { color: var(--gris); font-weight: 500; }
.negatif { color: var(--vert); }
.detail-cascade { font-size: 13px; color: var(--gris); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.repetition { margin-top: 8px; border-top: 1px solid var(--trait); padding-top: 4px; }
.repetition > summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.reprise { display: flex; align-items: center; gap: 8px; }
.reprise input { width: 70px; min-height: 44px; padding: 6px 10px; border: 1.5px solid var(--trait); border-radius: 10px; }
.repetition-etape { font-weight: 700; }
.repetition-consigne { padding: 10px 12px; border-radius: 12px; background: var(--bleu-pale); }
.repetition-consigne:empty, .repetition-etape:empty { display: none; }

/* ══ 10. Page de l'invité ══ */
.page-invite { background: var(--fond-invite); }
.page-invite .app { background: var(--fond-invite); }
.entete-invite {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px;
  padding: max(14px, env(safe-area-inset-top)) 18px 14px; background: var(--blanc); border-bottom: 1px solid #F3D9D2;
}
.entete-invite .logo-symbole { height: 34px; }
.entete-invite .titres { flex: 1; min-width: 0; }
.entete-invite h1 { font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entete-invite .sous-titre { font-weight: 400; font-size: 13px; }
.badge-etat { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #E3F5EC; color: #145C39; font-size: 13px; font-weight: 700; white-space: nowrap; }
.badge-etat::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #1F9D5C; }
.badge-etat.attente { background: #EEF1F5; color: var(--gris); }
.badge-etat.attente::before { background: #9AA6B6; animation: respirer 1.6s ease-in-out infinite; }
.accueil-invite { display: flex; flex-direction: column; gap: 18px; padding: 28px 20px; flex: 1; }
.carte-bienvenue { display: grid; gap: 14px; padding: 22px 20px; }
.carte-bienvenue p { margin: 0; font-size: 18px; }
.ligne-confirmee { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 700; font-size: 19px; }
.ligne-confirmee .coche-invite { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--corail); color: var(--corail-texte); font-weight: 800; }
.bouton-rejoindre {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 72px;
  border: 0; border-radius: 999px; background: var(--corail); color: var(--corail-texte); font: 800 19px var(--titre);
  box-shadow: 0 10px 24px rgba(254, 108, 85, .32);
}
.bouton-rejoindre:disabled { opacity: .6; }
.lien-discret { align-self: center; min-height: 44px; border: 0; background: none; color: var(--corail-sur-blanc); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.espace-invite { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.espace-invite .conversation { max-height: none; }
.page-invite .bulle.moi { background: var(--corail); color: var(--corail-texte); }
.page-invite .bulle.moi.propre .traduction, .page-invite .bulle.moi:not(.propre) .original { color: #5A1C10; }
.page-invite .bulle.autre { background: var(--blanc); color: var(--nuit); box-shadow: var(--ombre); }
.page-invite .bulle.autre.propre .traduction, .page-invite .bulle.autre:not(.propre) .original { color: var(--gris); }
.page-invite .pied-conversation { background: var(--fond-invite); border-top: 0; }
.bouton-parler.geant { min-height: 76px; flex-direction: row; gap: 14px; border-radius: 999px; font-size: 20px; }
.bouton-parler.geant .anneau { border-radius: 999px; }
.carte-code-invite { display: grid; gap: 12px; margin: 24px 20px; padding: 22px 18px; }
.carte-code-invite input { min-height: 56px; padding: 10px 14px; border: 1.5px solid #F3D9D2; border-radius: 12px; font: 800 22px var(--titre); letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.bandeau-apercu { margin: 12px 20px 0; padding: 10px 14px; border-radius: 12px; background: var(--nuit); color: var(--blanc); font-size: 14px; text-align: center; }

/* ══ Mouvements ══ */
@keyframes apparaitre { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes glisser { from { opacity: 0; transform: translate(14px, 8px); } to { opacity: 1; transform: none; } }
@keyframes glisser-gauche { from { opacity: 0; transform: translate(-14px, 8px); } to { opacity: 1; transform: none; } }
@keyframes point { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-4px); opacity: 1; } }
@keyframes respirer { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes corrigee { 0% { box-shadow: 0 0 0 0 rgba(156, 139, 254, .7); } 100% { box-shadow: 0 0 0 14px rgba(156, 139, 254, 0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .bouton-parler .anneau { transform: none; }
}

/* ── Ajustements après comparaison avec les maquettes (14/10) ── */
.signal-confiance { display: inline; }
.signal-confiance .rond { display: inline-grid; vertical-align: -4px; margin-right: 6px; }
.bulle.en-dictee.autre .original { order: 0; font-size: 15px; }
.textes-mot strong { overflow-wrap: break-word; }
.badge-mot { padding: 5px 10px; font-size: 12.5px; }
.bloc-reglage .segments span { white-space: nowrap; font-size: 15.5px; }
.liste-reglages { padding: 4px 18px; }
.interrupteur { gap: 12px; }
.glissiere { width: 52px; height: 32px; }
.glissiere::after { width: 24px; height: 24px; }
.interrupteur input:checked + .glissiere::after { transform: translateX(20px); }
.ecran-sombre .entete-ecran h1 { font-size: 20px; }
.legende { max-width: 100%; }

/* ── 8e série : invitation visible sur l'accueil, mode de traduction actif ── */
.bouton-inviter {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 56px; margin-top: -4px;
  border: 2px solid var(--bleu); border-radius: 999px; background: var(--blanc); color: var(--bleu); font: 800 17px var(--titre);
}
.bouton-inviter svg { width: 24px; height: 24px; }
.bouton-inviter:hover { background: var(--bleu-pale); }
.sous-titre-ligne { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sous-titre-ligne .sous-titre { min-width: 0; }
.puce-mode { flex: none; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.puce-mode.simultane { background: #E3F5EC; color: #145C39; }
.puce-mode.phrase { background: #EEF1F5; color: #3D4A5C; }
.mode-salon { margin: 0; text-align: center; font-size: 14px; color: #D7DFEA; }
.mode-invite { margin: 0; text-align: center; font-size: 13px; color: var(--gris); }

/* ── Écritures des 14 langues (attribut lang posé sur chaque texte, voir conversation.js) ──
   Polices système d'abord (aucun téléchargement : iPhone/Mac, Windows, Android), Noto en secours.
   Le latin reste en DM Sans / Montserrat ; seuls les caractères de l'écriture passent à la police
   de la langue. Le chinois simplifié (zh-Hans) et le japonais ont chacun leur police : les mêmes
   caractères n'ont pas la même forme. Toutes les langues s'écrivent de gauche à droite (dir="auto"
   reste posé par sécurité). */
:root {
  --ecriture-ja: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', sans-serif;
  --ecriture-sc: 'PingFang SC', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', 'Source Han Sans SC', sans-serif;
  --ecriture-ko: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Noto Sans CJK KR', sans-serif;
  --ecriture-hi: 'Kohinoor Devanagari', 'Nirmala UI', 'Noto Sans Devanagari', 'Mangal', sans-serif;
  --ecriture-cyr-vi: 'Segoe UI', system-ui, -apple-system, 'Roboto', 'Noto Sans', sans-serif;
}
:lang(ja) { font-family: 'DM Sans', var(--ecriture-ja); }
:lang(zh) { font-family: 'DM Sans', var(--ecriture-sc); }
:lang(ko) { font-family: 'DM Sans', var(--ecriture-ko); }
:lang(hi) { font-family: 'DM Sans', var(--ecriture-hi); }
/* Cyrillique et vietnamien (accents empilés) : une seule police pour tout le mot, sans mélange */
:lang(ru), :lang(vi) { font-family: var(--ecriture-cyr-vi); }
.face-grand:lang(ja), .face-grand:lang(zh), .face-grand:lang(ko), .face-grand:lang(hi), .face-grand:lang(ru), .face-grand:lang(vi) { font-weight: 700; }

/* Retour à la ligne : japonais par groupes de sens (repli : normal), coréen sans couper les mots,
   chinois normal ; ponctuation CJK jamais en début de ligne */
p[lang]:lang(ja) { word-break: normal; line-break: strict; }
@supports (word-break: auto-phrase) { p[lang]:lang(ja) { word-break: auto-phrase; } }
p[lang]:lang(zh) { word-break: normal; line-break: strict; }
p[lang]:lang(ko) { word-break: keep-all; }
/* Devanagari et vietnamien : interligne ≥ 1,6 (signes au-dessus et au-dessous des lettres) */
p[lang]:lang(hi), p[lang]:lang(vi) { line-height: 1.7; }
/* Page du code (invité) : choix visible de la langue d'interface */
.choix-interface { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; color: var(--gris); }
.choix-interface select { min-height: 44px; flex: 1; font: inherit; color: var(--nuit); border: 1px solid #C9D2DE; border-radius: 12px; padding: 0 12px; background: var(--blanc); }
/* Réglages : mentions et licences (liens hors du texte, cible tactile de 44 px) */
.liens-mentions { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; }
.liens-mentions a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* Outil « Enregistrer des phrases test » (questions à l'intonation) */
.intonation-phrase { margin: 8px 0 12px; font-size: 22px; font-weight: 500; line-height: 1.35; }

/* ── Micro-sondage de fin de conversation (hôte et invité) ── */
.fin-conversation { position: relative; display: grid; gap: 12px; padding: 16px; margin-bottom: 16px; }
.sondage { position: relative; padding: 4px 44px 4px 0; }
.sondage-titre { margin: 4px 0 12px; font-weight: 700; color: var(--nuit); }
.sondage-fermer {
  position: absolute; top: -6px; right: -6px; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: none; color: var(--gris); font-size: 26px; line-height: 1; cursor: pointer;
}
.sondage-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.pastille-sondage {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  border: 1.5px solid var(--trait); border-radius: 999px; background: var(--blanc); color: var(--nuit);
  font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
}
.pastille-sondage .rond { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.pastille-sondage.rouge .rond { background: var(--rouge); }
.pastille-sondage.orange .rond { background: var(--orange); }
.pastille-sondage.vert .rond { background: var(--vert); }
.pastille-sondage:hover { border-color: var(--bleu); }
.detail-parrainages { margin: 0; padding: 0 16px 14px; }

/* ── Page invité : mention discrète et écran de fin ── */
.mention-talksen { margin: 2px 0 0; font-size: 12px; color: var(--gris); text-align: center; }
.fin-invite { display: grid; gap: 14px; padding: 0 16px 24px; }
.fin-invite .sondage { padding: 16px 52px 16px 16px; border-radius: var(--rayon); background: var(--blanc); box-shadow: var(--ombre); }
.fin-invite .sondage-fermer { top: 6px; right: 6px; }
.carte-decouvrir { display: grid; gap: 12px; padding: 18px 16px; text-align: center; }
.fin-titre { margin: 0; font-family: var(--titre); font-size: 20px; font-weight: 800; color: var(--nuit); }
.carte-decouvrir .bouton-rejoindre { text-decoration: none; }

/* ── Bouton « Terminer » (en-tête de la conversation) : visible, sans gêner ── */
.titre-conversation { padding-left: 10px; }
.bouton-terminer {
  flex: none; min-height: 44px; padding: 8px 16px; margin-left: 4px; border: 1.5px solid var(--rouge); border-radius: 999px;
  background: var(--blanc); color: var(--rouge); font-weight: 700; font-size: 15px;
}
.bouton-terminer:hover { background: #FBEDEC; }

/* ── Conversation à la hauteur exacte du téléphone (hôte, face à face, invité) ──
   La page ne défile plus et ne rebondit plus (barres de Safari et de Chrome comprises : 100dvh) ;
   seul le fil des messages défile, l'en-tête reste en haut et les boutons en bas. */
html.ecran-fixe, html.ecran-fixe body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.ecran-fixe body { position: fixed; inset: 0; width: 100%; min-height: 0; }
html.ecran-fixe .app { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
html.ecran-fixe .ecran-conversation { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
html.ecran-fixe .entete-conversation, html.ecran-fixe .pied-conversation { flex: none; }
html.ecran-fixe .zone-fil { flex: 1 1 auto; min-height: 0; }
html.ecran-fixe .conversation { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
html.ecran-fixe .ecran-conversation[data-mode="face"] { min-height: 0; }
html.ecran-fixe .ecran-conversation[data-mode="face"] .face-haut,
html.ecran-fixe .ecran-conversation[data-mode="face"] .face-bas { overflow-y: auto; overscroll-behavior: contain; }
html.ecran-fixe .page-invite .app, html.ecran-fixe body.page-invite .app { display: flex; flex-direction: column; }
html.ecran-fixe .espace-invite { flex: 1 1 auto; min-height: 0; overflow: hidden; }
html.ecran-fixe .espace-invite .pied-conversation { flex: none; }