/* ============ Plume — même famille visuelle que le site, pensé pour être lisible ============
   Interface en Archivo (comme le site) ; le CORPS des récits reste en serif : on lit
   ses mémoires plus confortablement dans une typographie de livre. */
:root {
  --creme: #fbf4e7;         /* fond, identique au site */
  --papier: #fffdf8;
  --surface: #f5ecda;
  --encre: #2b2118;
  --encre-douce: #7a6a58;
  --accent: #d9541e;        /* terre cuite du site */
  --accent-fonce: #b04315;
  --accent-pale: #fdeee2;
  --vert: #4a7c59;
  --bordure: #e6dac4;
  --bordure-forte: #d7c7ab;
  --ombre: 0 2px 14px rgba(78, 58, 36, .07);
  --ombre-forte: 0 10px 30px rgba(78, 58, 36, .13);
  --rayon: 14px;
  /* Sur un grand écran on occupe la place ; seules les vues de LECTURE gardent
     une colonne étroite, parce qu'une ligne de 1500 px ne se lit pas. */
  --largeur: 1560px;
  --largeur-lecture: 900px;
  --font-ui: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-texte: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  font-family: var(--font-ui);
  background: var(--creme);
  color: var(--encre);
  font-size: 17px;
  line-height: 1.6;
}

h1, h2, h3 { font-weight: 800; letter-spacing: -.015em; line-height: 1.15; }

button, input, textarea, label, select { font-family: inherit; font-size: inherit; }

.ecran { min-height: 100dvh; display: flex; flex-direction: column; }

/* ============ Boutons ============ */
.btn {
  border: none; cursor: pointer; border-radius: 12px; font-weight: 600;
  padding: 12px 20px; font-size: 16px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s, border-color .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-principal {
  background: var(--accent); color: #fff; font-weight: 800;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 28%, transparent);
}
.btn-principal:hover { background: var(--accent-fonce); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 34%, transparent); }
.btn-secondaire { background: #fff; color: var(--encre); border: 2px solid var(--bordure-forte); }
.btn-secondaire:hover { border-color: var(--accent); color: var(--accent-fonce); background: var(--accent-pale); }
.btn-discret { background: transparent; color: var(--encre-douce); border-radius: 10px; }
.btn-discret:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.btn-large { width: 100%; padding: 16px; font-size: 19px; }
.btn-micro { background: var(--vert); color: #fff; font-weight: bold; }
.btn-micro.actif { background: #c0392b; animation: pulse 1.2s infinite; }
.btn-micro.desactive { background: #b8b0a4; cursor: not-allowed; }
.btn-aide { background: var(--creme); color: var(--accent); border: 2px solid var(--accent); font-weight: bold; }
.btn-aide:hover { background: #fdf0e8; }

/* Apports montrés dans la conversation (photo, enregistrement, document) */
.media-message { margin-top: 10px; }
.media-message img { max-width: 260px; width: 100%; border-radius: 12px; cursor: zoom-in; display: block; }
.media-message audio { width: 100%; max-width: 320px; margin-top: 4px; }
.media-message audio[id^="audio-"]:not([controls]) { display: none; }
.btn-extrait { display: block; width: 100%; max-width: 340px; margin-bottom: 6px; }
.btn-extrait.en-ecoute { background: #c0392b; color: #fff; animation: pulse 1.4s infinite; }
.titre-passage { font-size: 15px; color: var(--encre-douce); margin-bottom: 8px; font-style: italic; }
.message.user .titre-passage { color: rgba(255,255,255,.85); }
.btn-suivant { border: 2px solid var(--bordure); }
.media-message .lien-doc { display: inline-block; background: rgba(255,255,255,.25); color: inherit;
  padding: 8px 14px; border-radius: 10px; text-decoration: none; border: 1px solid rgba(255,255,255,.4); }
.message.assistant .media-message .lien-doc { background: var(--creme); border-color: var(--bordure); color: var(--accent); }

.btn-conversation { background: #6b5b95; color: #fff; font-weight: bold; }
.btn-conversation.actif { background: #c0392b; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px rgba(192, 57, 43, .15); } }

/* ============ Écran connexion ============ */
#ecran-auth { align-items: center; justify-content: center; padding: 20px; }
.auth-boite {
  background: var(--papier); border: 2px solid var(--bordure); border-radius: 24px;
  box-shadow: var(--ombre); padding: 40px 32px; width: 100%; max-width: 460px; text-align: center;
}
.logo { font-size: 64px; }
.auth-boite h1 { font-size: 42px; margin-bottom: 4px; }
.sous-titre { color: var(--encre-douce); margin-bottom: 28px; font-style: italic; }
.auth-boite label { display: block; text-align: left; margin: 14px 0 6px; color: var(--encre-douce); font-size: 16px; }
.auth-boite input {
  width: 100%; padding: 14px; font-size: 18px; border: 2px solid var(--bordure);
  border-radius: var(--rayon); background: #fff;
}
.auth-boite input:focus { outline: none; border-color: var(--accent); }
.auth-boite .btn-principal { margin-top: 24px; }
.lien-bascule { margin-top: 18px; font-size: 16px; color: var(--encre-douce); }
.lien-bascule a { color: var(--accent); font-weight: bold; }
.erreur { color: #c0392b; margin-top: 16px; font-weight: bold; }

/* ============ En-tête ============ */
.entete {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; row-gap: 8px;
  padding: 12px 24px; background: var(--surface); border-bottom: 2px solid var(--bordure-forte);
  position: sticky; top: 0; z-index: 10;
}
/* La rangée d'actions se replie au lieu de déborder : à 125-150 % de zoom, la
   place manque vite et rien ne doit sortir de l'écran. */
.entete > div:last-child {
  display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap;
  row-gap: 6px; justify-content: flex-end;
}
.entete .btn { font-size: 15px; padding: 10px 14px; }
.entete-titre {
  font-size: 19px; font-weight: 800; letter-spacing: -.01em; text-align: center; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.logo-petit { font-size: 24px; }

/* ============ Écran dossiers ============ */
.contenu-page { max-width: var(--largeur); width: 100%; margin: 0 auto; padding: 32px 24px 72px; }
.contenu-page > h2, .contenu-page > .barre-vue h2 { font-size: 28px; }
.intro { font-size: 18px; margin-bottom: 26px; color: var(--encre-douce); }
.grille-dossiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }
.carte-dossier {
  background: var(--papier); border: 2px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 24px; cursor: pointer;
  transition: transform .18s ease, border-color .18s, box-shadow .18s;
  position: relative;
}
.carte-dossier:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--ombre-forte); }
.carte-dossier h3 { font-size: 20px; margin-bottom: 8px; padding-right: 30px; }
.carte-dossier .meta { color: var(--encre-douce); font-size: 15px; }
.carte-dossier .actions-carte { position: absolute; top: 10px; right: 10px; display: flex; gap: 2px; }
.carte-dossier .actions-carte button { background: none; border: none; cursor: pointer; font-size: 17px; opacity: .5; padding: 4px; }
.carte-dossier .actions-carte button:hover { opacity: 1; }
.btn-nouveau { margin-top: 28px; }

/* ============ Onglets ============ */
/* Onglets en pastilles : on voit tout de suite où l'on est */
.onglets {
  display: flex; gap: 6px; justify-content: center; flex-wrap: nowrap;
  background: var(--creme); border-bottom: 2px solid var(--bordure);
  position: sticky; top: 61px; z-index: 9; overflow-x: auto; padding: 10px 16px;
  scrollbar-width: thin;
}
.onglet {
  padding: 10px 16px; background: none; border: 2px solid transparent; border-radius: 999px;
  cursor: pointer; font-size: 15.5px; font-weight: 600; color: var(--encre-douce);
  white-space: nowrap; transition: background .15s, color .15s, border-color .15s;
}
.onglet:hover { background: #fff; color: var(--encre); }
.onglet.actif {
  color: var(--accent-fonce); background: var(--accent-pale);
  border-color: var(--accent); font-weight: 800;
}

/* ============ Vue conversation ============ */
.vue { flex: 1; display: flex; flex-direction: column; max-width: var(--largeur); width: 100%; margin: 0 auto; padding: 0 24px; }
.vue > h2 { font-size: 28px; }
/* La conversation reste en colonne étroite : on lit mieux des lignes courtes */
/* La conversation et le récit se lisent en colonne : lignes courtes, œil reposé.
   Les autres vues (fiches, livres, synthèse, apports) prennent toute la largeur. */
#vue-conversation, #vue-livre { max-width: var(--largeur-lecture); }
#vue-conversation { padding-bottom: 0; }
.fil-messages { flex: 1; overflow-y: auto; padding: 24px 4px; display: flex; flex-direction: column; gap: 16px;
                overscroll-behavior: contain; }

/* L'atelier occupe l'écran : l'en-tête et la zone de saisie restent en place,
   seul le contenu défile — la dernière réponse est donc toujours visible. */
#ecran-atelier { height: 100dvh; overflow: hidden; }
#ecran-atelier .vue { min-height: 0; overflow-y: auto; }
#ecran-atelier #vue-conversation { overflow: hidden; } /* c'est le fil qui défile */
.fil-messages { min-height: 0; }

/* Bouton « revenir en bas » quand on a remonté le fil */
.btn-bas {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 120px; z-index: 40;
  background: var(--accent); color: #fff; border: none; border-radius: 30px;
  padding: 12px 22px; font-size: 17px; font-family: inherit; cursor: pointer;
  box-shadow: 0 6px 20px rgba(90, 70, 50, .28); display: flex; align-items: center; gap: 8px;
}
.btn-bas:hover { background: var(--accent-fonce); }
#vue-conversation { position: relative; }
.message {
  max-width: 82%; padding: 15px 20px; border-radius: 18px; white-space: pre-wrap;
  font-family: var(--font-texte); font-size: 17.5px; line-height: 1.65;
}
.message.user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.message.assistant {
  align-self: flex-start; background: var(--papier); border: 2px solid var(--bordure);
  border-bottom-left-radius: 5px; box-shadow: var(--ombre);
}
.message.assistant::before { content: "🪶 "; }
.ecriture { padding: 0 8px 10px; color: var(--encre-douce); font-style: italic; }

/* Le champ, les boutons et la note forment un bloc : le trait de séparation ouvre
   l'ensemble, et l'espace du bas est porté par le dernier élément (la note). */
.zone-saisie {
  position: sticky; bottom: 0; background: var(--creme); padding: 12px 0 0;
  border-top: 2px solid var(--bordure);
}
.note-cout { padding-bottom: 16px; }
.bandeau-dictee {
  background: #fdecea; color: #c0392b; border-radius: var(--rayon);
  padding: 10px 14px; margin-bottom: 10px; font-weight: bold;
}

/* ============ Bilan « ce que Plume vient de ranger » ============
   La personne doit voir ses fiches vivre, sinon elle croit que rien ne se passe. */
.bilan-fiches {
  align-self: stretch; background: #f2f8f3; border: 2px solid #cfe3d5;
  border-left: 5px solid var(--vert); border-radius: 10px;
  padding: 10px 14px; font-size: 14.5px; color: #35604a; line-height: 1.55;
  cursor: pointer; transition: background .15s;
}
.bilan-fiches:hover { background: #e8f3ec; }
.bilan-fiches b { font-weight: 700; }
.bilan-fiches em { font-style: normal; color: var(--accent-fonce); font-weight: 600; }
body.mode-simple .bilan-fiches { font-size: 16.5px; }

/* Pastille « du nouveau ici » sur un onglet */
.onglet-neuf { position: relative; }
.onglet-neuf::after {
  content: ''; position: absolute; top: 6px; right: 8px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  animation: apparaitre .3s ease;
}
@keyframes apparaitre { from { transform: scale(0); } to { transform: scale(1); } }

/* ============ Panneau d'écoute : « on vous entend, parlez » ============
   Sans ce retour visible, la personne parle dans le vide et abandonne. */
.panneau-ecoute {
  --force-voix: 0;
  border-radius: var(--rayon); padding: 16px 18px; margin-bottom: 12px;
  border: 3px solid; transition: background .25s, border-color .25s;
}
.panneau-ecoute.etat-ecoute { background: #f2f8f3; border-color: var(--vert); }
.panneau-ecoute.etat-reflexion { background: #fdf3e7; border-color: #d98b1e; }
.panneau-ecoute.etat-reponse { background: #f1eefa; border-color: #6b5b95; cursor: pointer; }
.panneau-ecoute.etat-reponse:hover { background: #e9e4f6; }
.ecoute-haut { display: flex; align-items: center; gap: 16px; }
.ecoute-titre { font-size: 21px; font-weight: 800; }
.etat-ecoute .ecoute-titre { color: #2f6b41; }
.etat-reflexion .ecoute-titre { color: #a4650f; }
.etat-reponse .ecoute-titre { color: #4f4179; }
.ecoute-sous { color: var(--encre-douce); font-size: 15px; line-height: 1.45; }

/* Les ondes bougent avec la voix : la preuve qu'on capte vraiment */
.ecoute-ondes { display: flex; align-items: center; gap: 4px; height: 44px; flex: none; }
.ecoute-ondes span {
  width: 6px; border-radius: 3px; background: var(--vert); height: 14px;
  transition: height .12s ease, background .2s;
}
.etat-ecoute .ecoute-ondes span { animation: respirer 1.1s ease-in-out infinite; }
.ecoute-ondes span:nth-child(2) { animation-delay: .15s; }
.ecoute-ondes span:nth-child(3) { animation-delay: .3s; }
.ecoute-ondes span:nth-child(4) { animation-delay: .45s; }
.ecoute-ondes span:nth-child(5) { animation-delay: .6s; }
@keyframes respirer { 50% { transform: scaleY(1.7); } }
.panneau-ecoute.capte .ecoute-ondes span { background: #2f6b41; }
.etat-reflexion .ecoute-ondes span { background: #d98b1e; animation: respirer 1.6s ease-in-out infinite; height: 16px; }
.etat-reponse .ecoute-ondes span { background: #6b5b95; animation: respirer .9s ease-in-out infinite; height: 16px; }
@media (prefers-reduced-motion: reduce) { .ecoute-ondes span { animation: none !important; } }

/* Les mots reconnus, en direct */
.ecoute-mots {
  margin-top: 12px; background: #fff; border: 2px solid var(--bordure);
  border-radius: 10px; padding: 10px 14px; font-family: var(--font-texte);
  font-size: 16px; line-height: 1.5; color: var(--encre-douce);
  max-height: 76px; overflow-y: auto;
}
.btn-fin-parole {
  width: 100%; margin-top: 12px; background: var(--vert); color: #fff;
  font-size: 18px; font-weight: 800; padding: 15px;
}
.btn-fin-parole:hover { background: #3d6749; }
/* Le champ et son bouton d'envoi ne font qu'un */
.champ-avec-envoi { position: relative; display: flex; align-items: flex-end; gap: 8px; }
.champ-avec-envoi #champ-message { flex: 1; }
/* 📎 et 💡 : les gestes secondaires en icônes dans la ligne d'écriture, comme
   dans toute messagerie — le mode simple garde ses grands boutons à phrases. */
.btn-icone-champ {
  width: 48px; height: 48px; flex: none; border: 2px solid var(--bordure-forte);
  border-radius: 12px; background: var(--papier); font-size: 21px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
  transition: border-color .15s, background .15s;
}
.btn-icone-champ:hover { border-color: var(--accent); background: var(--accent-pale); }
body.mode-simple .btn-icone-champ { display: none; }
/* En mode complet, les grands doublons disparaissent : il ne reste que la voix */
body:not(.mode-simple) #btn-aide,
body:not(.mode-simple) #btn-apport { display: none; }
#champ-message {
  width: 100%; padding: 15px 74px 15px 16px; font-size: 17px; border: 2px solid var(--bordure-forte);
  border-radius: var(--rayon); resize: none; background: #fff; font-family: var(--font-texte);
  transition: border-color .15s, box-shadow .15s;
}
.btn-envoi-champ {
  position: absolute; right: 10px; bottom: 10px; width: 52px; height: 52px;
  border: none; border-radius: 12px; cursor: pointer; background: var(--accent); color: #fff;
  font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s, opacity .15s;
}
.btn-envoi-champ:hover { background: var(--accent-fonce); transform: translateY(-1px); }
.btn-envoi-champ:disabled { opacity: .45; cursor: default; transform: none; }
.note-cout { margin-top: 8px; font-size: 13.5px; color: var(--encre-douce); text-align: center; }
body.mode-simple .btn-envoi-champ { width: 60px; height: 60px; font-size: 26px; }
body.mode-simple #champ-message { padding-right: 84px; }
body.mode-simple .note-cout { font-size: 15px; }
#champ-message:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); }
#champ-message:focus { outline: none; border-color: var(--accent); }
.boutons-saisie { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.boutons-saisie .btn-principal { flex: 1; min-width: 130px; }

/* ============ Vue livre ============ */
#vue-livre, #vue-personnages, #vue-apports { padding-top: 24px; padding-bottom: 60px; }
.barre-vue { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.aide-vue { color: var(--encre-douce); margin: 8px 0 24px; font-size: 15.5px; line-height: 1.6; max-width: 62em; }
.chapitre {
  background: var(--papier); border: 2px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 26px 28px; margin-bottom: 20px;
}
.chapitre-entete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.chapitre h3 { font-size: 24px; margin-bottom: 12px; }
.chapitre .texte {
  white-space: pre-wrap; font-family: var(--font-texte); font-size: 17.5px; line-height: 1.75;
}
.chapitre .outils { display: flex; gap: 4px; }
.chapitre .outils button { background: none; border: none; cursor: pointer; font-size: 18px; opacity: .5; }
.chapitre .outils button:hover { opacity: 1; }
.chapitre textarea, .chapitre input[type=text] {
  width: 100%; border: 2px solid var(--bordure); border-radius: 8px; padding: 10px;
  font-size: 17px; margin-bottom: 10px; background: #fff;
}
.chapitre textarea { min-height: 220px; resize: vertical; }
/* État vide : toujours pleine largeur, même à l'intérieur d'une grille */
.vide {
  grid-column: 1 / -1; text-align: center; color: var(--encre-douce);
  padding: 48px 24px; background: var(--papier); border: 2px dashed var(--bordure-forte);
  border-radius: var(--rayon); font-size: 17px; line-height: 1.7;
}

/* ============ Crédits ============ */
/* ============ « La plume écrit » — l'attente des générations longues ============
   Un chapitre demande une minute, une couverture une vingtaine de secondes : sans
   signe de vie, on croit que rien ne se passe et on reclique. */
.plume-travaille {
  position: fixed; inset: 0; z-index: 150; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(43, 33, 24, .42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.pt-boite {
  background: var(--papier); border: 2px solid var(--bordure-forte); border-radius: var(--rayon);
  box-shadow: var(--ombre-forte); padding: 30px 34px 26px; text-align: center;
  max-width: 420px; width: 100%;
}
.pt-scene { width: 100%; max-width: 300px; height: auto; display: block; margin: 0 auto 14px; }

/* l'encrier, posé à gauche */
.pt-encrier .pt-pot, .pt-encrier .pt-col { fill: none; stroke: var(--encre-douce); stroke-width: 3; }
.pt-encrier .pt-encre { fill: var(--accent); opacity: .9; }

/* la ligne d'écriture : elle se trace, puis s'efface pour recommencer */
.pt-trace {
  fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 210; stroke-dashoffset: 210;
  animation: pt-tracer 3.2s ease-in-out infinite;
}
/* la plume : elle trempe, écrit de gauche à droite, puis revient */
.pt-plume { animation: pt-ecrire 3.2s ease-in-out infinite; }
.pt-plume path { fill: none; stroke: var(--encre); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

@keyframes pt-tracer {
  0%, 12%  { stroke-dashoffset: 210; }
  78%      { stroke-dashoffset: 0; }
  92%, 100%{ stroke-dashoffset: 0; opacity: 0; }
}
@keyframes pt-ecrire {
  0%       { transform: translate(24px, 34px) rotate(-6deg); }   /* dans l'encrier */
  10%      { transform: translate(26px, 40px) rotate(-4deg); }   /* on trempe */
  16%      { transform: translate(40px, 24px) rotate(-8deg); }   /* on remonte */
  30%      { transform: translate(78px, 34px) rotate(-4deg); }
  45%      { transform: translate(122px, 28px) rotate(-8deg); }
  60%      { transform: translate(166px, 34px) rotate(-4deg); }
  78%      { transform: translate(208px, 26px) rotate(-9deg); }  /* fin de ligne */
  92%, 100%{ transform: translate(24px, 34px) rotate(-6deg); }   /* retour à l'encrier */
}

.pt-titre { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.pt-sous { margin-top: 6px; color: var(--encre-douce); font-size: 15.5px; line-height: 1.5; }
/* une barre qui avance sans promettre de pourcentage : on ne connaît pas la durée */
.pt-barre { margin-top: 18px; height: 6px; border-radius: 3px; background: var(--bordure); overflow: hidden; }
.pt-barre span {
  display: block; width: 40%; height: 100%; border-radius: 3px; background: var(--accent);
  animation: pt-avancer 1.6s ease-in-out infinite;
}
@keyframes pt-avancer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .pt-plume, .pt-trace, .pt-barre span { animation: none; }
  .pt-trace { stroke-dashoffset: 0; }
}
body.mode-simple .pt-titre { font-size: 23px; }
body.mode-simple .pt-sous { font-size: 17px; }

/* ============ Mon compte : emporter ou effacer ============ */
.bloc-compte {
  background: var(--papier); border: 2px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 22px 26px; margin-bottom: 16px;
}
.bloc-compte b { font-size: 18px; display: block; }
.bloc-compte p { color: var(--encre-douce); margin: 8px 0 14px; line-height: 1.55; }
.bloc-compte.bloc-danger { border-color: #e0b4ad; background: #fdf7f6; }
.bloc-compte.bloc-danger b { color: #a03325; }

.aide-auth { color: var(--encre-douce); font-size: 15.5px; line-height: 1.55; margin-bottom: 14px; text-align: left; }
.confirmation-oubli {
  margin-top: 16px; background: #f2f8f3; border: 2px solid #cfe3d5; border-radius: 10px;
  padding: 12px 14px; color: #35604a; font-size: 15px; line-height: 1.5; text-align: left;
}

.entree { position: relative; }
.btn-retirer-apport {
  position: absolute; top: 12px; right: 12px; background: none; border: none;
  font-size: 17px; cursor: pointer; opacity: .45; padding: 4px 6px; border-radius: 8px;
}
/* Les deux outils d'un apport (✏️ corriger, 🗑️ retirer) partagent le coin */
.outils-apport { position: absolute; top: 12px; right: 12px; display: flex; gap: 2px; }
.outils-apport .btn-retirer-apport { position: static; }

/* ---- Corriger un apport : chaque champ s'écrit ou SE DICTE ---- */
.ligne-dictee { display: flex; gap: 8px; align-items: stretch; }
.ligne-dictee input, .ligne-dictee textarea { flex: 1; min-width: 0; }
.ligne-dictee .btn-dicter { flex: none; align-self: flex-start; padding: 9px 12px; }
.btn-dicter.actif {
  background: #c0392b; color: #fff; border-color: #c0392b;
  animation: pulse 1.1s infinite;
}
#apport-vignette .mini-illustrations { margin: 0 0 8px; }
.btn-retirer-apport:hover { opacity: 1; background: #fdecea; }

/* ============ L'encrier ============
   Un compteur qui décompte ressemble à un taximètre : on voit ce qu'on perd.
   L'encrier montre ce qui RESTE — et se remplit quand on recharge. */
.compteur-credits {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--creme); border: 2px solid var(--bordure); border-radius: 30px;
  padding: 6px 16px 6px 10px; font-family: inherit; font-size: 15px; color: var(--encre);
  cursor: pointer; white-space: nowrap; transition: border-color .2s, background .2s;
}
.compteur-credits:hover { border-color: var(--accent); }
/* hidden doit gagner sur le display de la classe (piège déjà rencontré) */
.compteur-credits[hidden] { display: none !important; }

.encrier { position: relative; width: 26px; height: 32px; flex: none; display: block; }
/* le col du flacon */
.encrier-col {
  position: absolute; left: 50%; top: 0; width: 12px; height: 9px; margin-left: -6px;
  border: 2px solid var(--encre-douce); border-bottom: none; border-radius: 3px 3px 0 0;
  background: var(--papier);
}
/* le bocal : c'est lui qui rogne l'encre, sans masque SVG */
.encrier-bocal {
  position: absolute; left: 0; bottom: 0; width: 26px; height: 25px; overflow: hidden;
  border: 2px solid var(--encre-douce); border-radius: 4px 4px 10px 10px;
  background: var(--papier); box-sizing: border-box;
}
/* le niveau d'encre — la seule chose qui bouge */
.encrier-encre {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-fonce) 100%);
  transition: height .9s cubic-bezier(.22,.61,.36,1), background .4s;
}
/* la surface de l'encre, légèrement claire : ça fait liquide */
.encrier-encre::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: color-mix(in srgb, #fff 38%, transparent);
}
.encrier-texte { display: flex; flex-direction: column; line-height: 1.1; }
.encrier-texte small { font-size: 11px; color: var(--encre-douce); letter-spacing: .02em; }
.compteur-nombre { font-weight: 700; color: var(--encre); font-size: 15px; }

/* Réserve basse : l'encrier vire à l'ambre, jamais au rouge d'alarme */
.compteur-credits.alerte { background: #fdf3e7; border-color: #d98b1e; }
.compteur-credits.alerte .encrier-encre { background: linear-gradient(180deg, #e8a33c 0%, #c97c14 100%); }
.compteur-credits.alerte .encrier-texte small { color: #a4650f; }

body.mode-simple .compteur-credits { font-size: 17px; padding: 8px 18px 8px 12px; }
body.mode-simple .encrier { width: 30px; height: 37px; }
body.mode-simple .encrier-bocal { width: 30px; height: 29px; }
body.mode-simple .encrier-col { width: 14px; margin-left: -7px; height: 10px; }
body.mode-simple .compteur-nombre { font-size: 17px; }
@media (prefers-reduced-motion: reduce) { .encrier-encre { transition: none; } }
.cout-inline { font-size: 13px; color: var(--encre-douce); margin-left: 4px; }

.entete-credits { display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap; background: var(--papier); border: 2px solid var(--bordure);
  border-radius: var(--rayon); box-shadow: var(--ombre); padding: 24px; }
.solde-grand { font-size: 44px; font-weight: bold; color: var(--accent); line-height: 1; }
.repartition { background: var(--papier); border: 2px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 20px 24px; }
.ligne-repartition { display: grid; grid-template-columns: 200px 1fr 70px; gap: 12px;
  align-items: center; padding: 7px 0; }
.ligne-repartition .valeur { text-align: right; font-weight: bold; }
.jour-credits { margin-top: 22px; }
.jour-credits h3 { font-size: 18px; color: var(--encre-douce); margin-bottom: 8px; }
.ligne-credits { display: flex; justify-content: space-between; gap: 14px; padding: 11px 16px;
  background: var(--papier); border: 2px solid var(--bordure); border-radius: 10px; margin-bottom: 7px; }
.ligne-credits .montant { font-weight: bold; white-space: nowrap; }
.ligne-credits .montant.positif { color: var(--vert); }
.ligne-credits.remboursee { border-style: dashed; }

.grille-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px; margin-top: 22px; }
.carte-pack { background: var(--papier); border: 2px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 24px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.carte-pack.suggere { border: 3px solid var(--accent); }
.carte-pack .remise { position: absolute; top: -12px; right: 16px; background: var(--vert);
  color: #fff; border-radius: 20px; padding: 3px 12px; font-size: 14px; }
.carte-pack h3 { font-size: 22px; }
.credits-pack { font-size: 20px; font-weight: bold; color: var(--accent); }
.prix-pack { font-size: 28px; font-weight: bold; }
.carte-pack .projection { color: var(--encre-douce); font-size: 15px; flex: 1; }
.carte-pack .validite { font-size: 14px; color: var(--encre-douce); }
@media (max-width: 700px) {
  .ligne-repartition { grid-template-columns: 130px 1fr 60px; font-size: 15px; }
  .compteur-credits { padding: 6px 12px; font-size: 14px; }
}

/* ============ Lien vers le site vitrine ============ */
.lien-site { text-align: center; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--bordure); }
.lien-site a { color: var(--encre-douce); text-decoration: none; font-size: 16px; }
.lien-site a:hover { color: var(--accent); text-decoration: underline; }
.lien-logo { text-decoration: none; }
/* Sur téléphone en mode simple, l'en-tête reste minimal */
@media (max-width: 700px) { body.mode-simple #lien-site { display: none !important; } }

/* ============ Dialogues HTML (remplacent prompt/confirm/alert) ============ */
.dialogue-fond { z-index: 200; }
.dialogue-boite { max-width: 520px; }
.dialogue-message { white-space: pre-line; margin-bottom: 6px; font-size: 17px; line-height: 1.6; }
.dialogue-champ {
  width: 100%; padding: 14px; font-size: 18px; font-family: inherit;
  border: 2px solid var(--bordure); border-radius: 10px; background: #fff; margin-top: 14px;
}
.dialogue-champ:focus { outline: none; border-color: var(--accent); }
.dialogue-boutons { display: flex; gap: 12px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }
.dialogue-boutons .btn { font-size: 18px; padding: 13px 24px; }
.btn-danger { background: #c0392b; color: #fff; }
.btn-danger:hover { background: #a03325; }
@media (max-width: 700px) {
  .dialogue-boutons { flex-direction: column-reverse; }
  .dialogue-boutons .btn { width: 100%; font-size: 19px; padding: 16px; }
}

/* ============ Modes d'affichage ============ */
.cache-simple { display: none !important; }

/* Mode simple : le strict nécessaire, en très grand — SUR TOUS LES ÉCRANS.
   La personne va à l'essentiel : raconter, relire, ses livres. Les réglages,
   le partage et les personnalisations vivent dans le mode complet. */
body.mode-simple #btn-qr,
body.mode-simple #btn-abonnement { display: none !important; }

/* Tout en plus grand et plus espacé.
   ⚠ Beaucoup de gens travaillent à 125 % ou 150 % de zoom : la fenêtre utile tombe
   alors à ~1500 px, puis ~1280 px. Les règles ci-dessous doivent donc TOUJOURS
   pouvoir se replier — d'où les `flex-wrap`, les largeurs en `min()` et l'absence
   de `nowrap` sur les libellés longs. */
body.mode-simple { font-size: 19px; }
body.mode-simple .entete { padding: 14px 20px; flex-wrap: wrap; row-gap: 10px; }
body.mode-simple .entete > div:last-child { flex-wrap: wrap; row-gap: 8px; justify-content: flex-end; }
body.mode-simple .entete .btn { font-size: 18px; padding: 13px 18px; }
/* Le titre ne prend une ligne à lui que si la place manque vraiment */
body.mode-simple .entete-titre { font-size: 21px; }
body.mode-simple .onglets { gap: 10px; padding: 12px 16px; }
body.mode-simple .onglets .onglet { font-size: 20px; padding: 15px 22px; }
body.mode-simple .message { font-size: 21px; line-height: 1.7; }
body.mode-simple #champ-message { font-size: 21px; min-height: 84px; }
body.mode-simple .aide-vue { font-size: 18px; }

/* Mode simple : les deux gestes vocaux prennent toute la largeur — ce sont EUX
   qu'on vient chercher. Les deux boutons d'appoint se partagent une seule ligne :
   empilés, ils repoussaient la conversation hors de l'écran (509 px de barre pour
   71 px de fil à 150 % de zoom). */
body.mode-simple .boutons-saisie {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch;
}
body.mode-simple .boutons-saisie .btn {
  width: 100%; font-size: 18px; padding: 14px 12px;
  line-height: 1.25; white-space: normal; text-align: center; min-height: 58px;
}
/* Les deux gestes vocaux occupent chacun une ligne entière */
body.mode-simple #btn-micro,
body.mode-simple #btn-conversation {
  grid-column: 1 / -1; font-size: 23px; padding: 18px 20px; font-weight: 800; min-height: 74px;
}
body.mode-simple #btn-micro { font-size: 24px; }
body.mode-simple #champ-message { min-height: 62px; font-size: 20px; }
body.mode-simple .note-cout { font-size: 14px; margin-top: 6px; }

/* ---- Mode simple sur PC : les actions passent en COLONNE À GAUCHE ----
   Empilés sous la conversation, quatre gros boutons mangeaient la moitié de la
   hauteur ; à gauche, ils restent aussi visibles et rendent tout l'écran au
   texte et aux photos. La colonne n'apparaît qu'à partir de 1000 px de large. */
@media (min-width: 1000px) {
  body.mode-simple #vue-conversation {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "actions mention"
      "actions fil"
      "actions ecriture"
      "actions saisie";
    column-gap: 24px;
    max-width: 1280px;
  }
  body.mode-simple #vue-conversation > #mention-ia { grid-area: mention; }
  body.mode-simple #vue-conversation > #fil-messages { grid-area: fil; }
  body.mode-simple #vue-conversation > #indicateur-ecriture { grid-area: ecriture; }
  body.mode-simple #vue-conversation > .zone-saisie { grid-area: saisie; }
  body.mode-simple #vue-conversation > #accueil-choix { grid-area: mention; }

  /* La colonne d'actions : boutons empilés, collés en haut, tous de même largeur */
  body.mode-simple #vue-conversation > .boutons-saisie {
    grid-area: actions; display: flex; flex-direction: column; gap: 12px;
    align-content: start; align-self: start; padding-top: 4px;
  }
  body.mode-simple #vue-conversation > .boutons-saisie .btn {
    width: 100%; font-size: 19px; padding: 16px 14px; min-height: 66px;
  }
  body.mode-simple #vue-conversation > #btn-micro { font-size: 23px; min-height: 92px; }
  body.mode-simple #vue-conversation > .boutons-saisie #btn-micro { font-size: 23px; min-height: 92px; }
  body.mode-simple #vue-conversation > .boutons-saisie #btn-conversation { font-size: 21px; min-height: 82px; }
  /* La note de coût se range sous la colonne d'actions, où elle ne gêne pas la lecture */
  body.mode-simple #vue-conversation > .note-cout {
    grid-area: actions; align-self: end; text-align: left; font-size: 13.5px; margin: 0;
  }
  /* Le panneau d'écoute reste dans la colonne de droite, au-dessus du champ */
  body.mode-simple #vue-conversation .zone-saisie { border-top: none; padding-top: 0; }
}

/* Sur téléphone, la place verticale est comptée : on resserre pour que la
   conversation reste visible au-dessus de la barre (elle tombait à 83 px). */
@media (max-width: 700px) {
  body.mode-simple .boutons-saisie { gap: 8px; }
  body.mode-simple #btn-micro { font-size: 21px; padding: 15px 14px; min-height: 66px; }
  body.mode-simple #btn-conversation { font-size: 20px; padding: 14px 14px; min-height: 62px; }
  body.mode-simple #btn-aide,
  body.mode-simple #btn-apport { font-size: 15px; padding: 11px 8px; min-height: 56px; }
  body.mode-simple #champ-message { min-height: 54px; font-size: 19px; }
  /* Sur téléphone en mode simple, l'encrier en haut d'écran dit déjà l'essentiel :
     la note prendrait 45 px pris sur la conversation. */
  body.mode-simple .note-cout { display: none; }
  body.mode-simple .zone-saisie { padding-top: 8px; }
  body.mode-simple .boutons-saisie { margin-bottom: 12px; }
  body.mode-simple .mention-ia { font-size: 14px; padding: 7px 30px 7px 10px; }
  body.mode-simple .onglets .onglet { font-size: 18px; padding: 12px 16px; }
}
body.mode-simple .bandeau-dictee { font-size: 19px; padding: 16px; }
/* L'écoute occupe le devant de la scène */
body.mode-simple .panneau-ecoute { padding: 22px; }
body.mode-simple .ecoute-titre { font-size: 26px; }
body.mode-simple .ecoute-sous { font-size: 17px; }
body.mode-simple .ecoute-mots { font-size: 18px; max-height: 96px; }
body.mode-simple .btn-fin-parole { font-size: 22px; padding: 20px; }
body.mode-simple .ecoute-ondes { height: 56px; }
body.mode-simple .ecoute-ondes span { width: 8px; }
body.mode-simple .mention-ia { font-size: 15px; padding: 8px 34px 8px 12px; }

/* Écran des projets : grandes cartes, gros bouton.
   En mode simple les cartes restent larges (2 par ligne au maximum) : à 150 % de
   zoom, une grille à 3 colonnes rendrait chaque carte illisible. */
body.mode-simple .grille-dossiers { grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 22px; }
body.mode-simple .carte-dossier { padding: 28px; }
body.mode-simple .carte-dossier h3 { font-size: 24px; }
body.mode-simple .btn-nouveau { font-size: 22px; padding: 22px; width: 100%; min-height: 76px; }
body.mode-simple .compteur-credits { font-size: 18px; }
/* Le contenu du mode simple ne s'étale jamais sur toute la largeur d'un grand
   écran : au-delà, l'œil doit balayer et les gros boutons perdent leur évidence. */
body.mode-simple .contenu-page,
body.mode-simple .vue { max-width: 1100px; }
body.mode-simple #vue-livre { max-width: 880px; }
/* La conversation n'est bridée que tant que les actions sont EN DESSOUS ; dès que
   la colonne de gauche apparaît (≥ 1000 px), elle prend toute la place restante. */
@media (max-width: 999px) {
  body.mode-simple #vue-conversation { max-width: 880px; }
}
/* Toute cible tactile ou cliquable garde une taille confortable */
body.mode-simple .btn,
body.mode-simple .bloc-compte .btn { min-height: 56px; }
body.mode-simple .chapitre .outils button,
body.mode-simple .carte-dossier .actions-carte button { font-size: 24px; padding: 10px; }

/* Récit et livres : lecture confortable, boutons généreux */
body.mode-simple .chapitre .texte { font-size: 20px; line-height: 1.75; }
body.mode-simple .carte-livre .btn { font-size: 20px; padding: 16px 20px; }
body.mode-simple #accueil-choix .choix-mode-titre { font-size: 22px; }
body.mode-simple #accueil-choix .choix-mode p { font-size: 18px; }
.choix-mode {
  border: 2px solid var(--bordure); border-radius: 14px; padding: 16px 18px;
  margin-top: 14px; cursor: pointer; transition: border-color .2s, background .2s;
}
.choix-mode:hover { border-color: var(--accent); background: #fdf7ef; }
.choix-mode.choisi { border-color: var(--vert); background: #f4f9f4; }
.choix-mode.choisi .choix-mode-titre::after { content: '  ✓ votre choix actuel'; color: var(--vert); font-size: 15px; }
.choix-mode-titre { font-size: 19px; font-weight: bold; margin-bottom: 6px; }
.choix-mode p { color: var(--encre-douce); font-size: 16px; }
.bandeau-role .btn { margin-left: 10px; }

.bandeau-dictee.cliquable { cursor: pointer; }
.bandeau-dictee.cliquable:hover { filter: brightness(0.96); }

/* ============ QR code téléphone ============ */
.qr-zone { display: flex; justify-content: center; margin: 18px 0; min-height: 210px; align-items: center; }
.qr-zone img, .qr-zone svg { width: 210px; height: 210px; border: 10px solid #fff; border-radius: 10px;
  box-shadow: var(--ombre); image-rendering: pixelated; }
.qr-zone .expire { color: #c0392b; font-size: 17px; }

/* ============ Raconter à plusieurs (mode collaboratif) ============ */
.ligne-champ-bouton { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.ligne-champ-bouton input { flex: 1; min-width: 160px; }
.ligne-champ-bouton .btn { flex: none; }
.collab-titre { font-size: 17px; margin: 22px 0 8px; color: var(--encre); }
.collab-lien {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--papier); border: 1.5px solid var(--bordure); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px;
}
.collab-infos { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.collab-infos b { font-size: 17px; }
.collab-infos small { color: var(--encre-douce); font-size: 14px; }
.collab-coupe { opacity: .55; }
.collab-coupe .collab-infos b { text-decoration: line-through; }
.collab-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-petit { padding: 7px 12px; font-size: 14.5px; }
.btn-couper { color: #c0392b; }
.collab-contribution {
  display: flex; gap: 10px; align-items: baseline; font-size: 15px;
  padding: 5px 0; border-bottom: 1px dashed var(--bordure);
}
.collab-contribution small { color: var(--encre-douce); flex: none; font-size: 13px; }
.collab-note { margin-top: 16px; }
/* La case « interface toute simple » (parcours aidant) */
.collab-simple-ligne {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; cursor: pointer;
  background: var(--accent-pale); border-radius: 10px; padding: 10px 12px;
}
.collab-simple-ligne input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.collab-simple-ligne span { font-size: 14.5px; line-height: 1.45; }
.collab-simple-ligne small { display: block; color: var(--encre-douce); font-size: 13px; }
.collab-qr { margin-top: 14px; border-top: 1px dashed var(--bordure); padding-top: 6px; }
.collab-qr .qr-zone { min-height: 0; margin: 10px 0 4px; }
.collab-qr .qr-zone img { width: 180px; height: 180px; }
/* La bulle d'un invité porte son prénom, discret, au-dessus des mots */
.auteur-message { font-size: 13.5px; font-weight: 700; color: var(--encre-douce); margin-bottom: 3px; }

/* ============ Invitation Compagnon ============ */
.bandeau-invitation {
  background: #f4f9f4; border: 2px solid var(--vert); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 18px; font-size: 16px; line-height: 1.5; text-align: left;
}
.etapes-invitation {
  background: var(--creme); border: 2px solid var(--bordure); border-radius: 12px;
  padding: 18px; margin-top: 6px;
}
.etapes-invitation p { margin-bottom: 12px; }

/* ============ Import d'archives ============ */
.accueil-choix {
  background: var(--papier); border: 2px dashed var(--accent); border-radius: var(--rayon);
  padding: 26px; text-align: center; margin-bottom: 18px;
}
.accueil-choix p { font-size: 19px; margin-bottom: 16px; }
.choix-boutons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.zone-depot {
  background: var(--papier); border: 3px dashed var(--bordure); border-radius: var(--rayon);
  padding: 44px 24px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s;
  margin-bottom: 20px;
}
.zone-depot:hover, .zone-depot.survol { border-color: var(--accent); background: #fdf7ef; }
.zone-depot-icone { font-size: 52px; margin-bottom: 8px; }
.zone-depot p { font-size: 18px; }
.zone-depot-formats { color: var(--encre-douce); font-size: 15px !important; margin-top: 8px; }

.file-imports { margin-bottom: 24px; }
.import-ligne {
  background: var(--papier); border: 2px solid var(--bordure); border-radius: var(--rayon);
  padding: 14px 18px; margin-bottom: 10px; display: flex; align-items: center; gap: 14px;
}
.import-ligne .nom { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-ligne .statut { font-size: 15px; color: var(--encre-douce); white-space: nowrap; }
.import-ligne.ok { border-color: var(--vert); }
.import-ligne.erreur { border-color: #c0392b; }
.import-barre { height: 8px; background: var(--bordure); border-radius: 6px; overflow: hidden; width: 120px; }
.import-barre > div { height: 100%; background: var(--vert); border-radius: 6px; transition: width .3s; }

.bloc-plan { margin-top: 8px; }
.chapitre-plan {
  background: var(--papier); border: 2px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 18px 20px; margin-bottom: 14px;
}
.chapitre-plan input[type=text] {
  width: 100%; font-size: 19px; font-weight: bold; font-family: inherit;
  border: none; border-bottom: 2px solid var(--bordure); background: transparent; padding: 6px 2px;
}
.chapitre-plan input[type=text]:focus { outline: none; border-bottom-color: var(--accent); }
.chapitre-plan textarea {
  width: 100%; min-height: 110px; margin-top: 10px; font-family: inherit; font-size: 16px;
  border: 2px solid var(--bordure); border-radius: 8px; padding: 10px; background: #fffdf9;
}
.chapitre-plan .images-plan { color: var(--encre-douce); font-size: 14px; margin-top: 8px; }
.chapitre-plan .barre-chapitre { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.chapitre-plan .barre-chapitre .actions-ligne button { background: none; border: 2px solid var(--bordure); border-radius: 8px; cursor: pointer; padding: 4px 8px; }

.mini-illustrations { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.mini-illustrations figure { margin: 0; text-align: center; }
.mini-illustrations img { height: 90px; border-radius: 8px; border: 2px solid var(--bordure); }
.mini-illustrations figcaption { font-size: 12px; color: var(--encre-douce); max-width: 130px; }

/* ============ Versions de livre ============ */
.carte-livre {
  background: var(--papier); border: 2px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 20px 24px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.carte-livre h3 { font-size: 20px; }
.carte-livre .mini-couverture { width: 74px; border-radius: 6px; box-shadow: var(--ombre); flex-shrink: 0; }
.carte-livre.construction { display: block; }
.carte-livre .entete-livre { display: flex; gap: 16px; align-items: flex-start; }
.carte-livre .vide-couv { height: 98px; display: flex; align-items: center; justify-content: center;
  background: var(--creme); border: 1px dashed var(--bordure); font-size: 26px; }
.bilan-cout { background: var(--creme); border-radius: 10px; padding: 8px 12px; margin: 8px 0;
  font-size: 15px; color: var(--encre-douce); }
.bilan-cout strong { color: var(--accent); }
.carte-livre .tdm { margin-top: 14px; border-top: 1px dashed var(--bordure); padding-top: 10px; }
.ligne-tdm { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; }
.ligne-tdm .titre-chap { flex: 1; }
.ligne-tdm .resume-chap { color: var(--encre-douce); font-size: 15px; }
.ligne-tdm.fait b { color: var(--vert); }
.statut-livre { margin-top: 12px; background: var(--creme); border-radius: 10px; padding: 10px 14px;
  color: var(--accent); font-size: 16px; }
.carte-livre .meta { color: var(--encre-douce); font-size: 15px; margin-top: 4px; }
.carte-livre .boutons-saisie { margin-top: 0; }

/* ============ Essai gratuit ============ */
.carte-essai {
  background: #f4f9f4; border: 2px dashed var(--vert); border-radius: var(--rayon);
  padding: 22px 24px; margin-top: 20px;
}
.carte-essai h3 { color: var(--vert); margin-bottom: 8px; }
.carte-essai p { margin-bottom: 14px; }

/* ============ Personnages ============ */
.grille-personnages { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.carte-personnage {
  background: var(--papier); border: 2px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 20px; position: relative;
}
.carte-personnage h3 { font-size: 20px; }
.carte-personnage .relation { color: var(--accent); font-style: italic; font-size: 15px; margin-bottom: 8px; }
.carte-personnage p { font-size: 16px; }
.carte-personnage .suppr { position: absolute; top: 8px; right: 8px; background: none; border: none; cursor: pointer; opacity: .4; }
.carte-personnage .suppr:hover { opacity: 1; }

/* ============ Apports bruts ============ */
.entree {
  background: var(--papier); border: 2px solid var(--bordure); border-radius: var(--rayon);
  padding: 16px 20px; margin-bottom: 12px;
}
.entree .type { font-weight: bold; color: var(--accent); font-size: 15px; }
.entree .date { color: var(--encre-douce); font-size: 14px; }
.entree p { margin-top: 6px; font-size: 16px; }

/* ============ Abonnement ============ */
.titre-section { margin: 32px 0 16px; }
.carte-abo-actuel {
  background: var(--papier); border: 2px solid var(--accent); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 24px;
}
.carte-abo-actuel h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.prix-abo { color: var(--accent); font-size: 20px; }
.jauge-ligne { margin-top: 14px; }
.jauge { background: var(--bordure); border-radius: 10px; height: 12px; margin-top: 6px; overflow: hidden; }
.jauge-remplie { background: var(--vert); height: 100%; border-radius: 10px; transition: width .3s; }
.jauge-remplie.pleine { background: #c0392b; }
.grille-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.carte-offre {
  background: var(--papier); border: 2px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 24px; display: flex; flex-direction: column; gap: 10px;
}
.carte-offre.actuelle { border: 2px solid var(--vert); }
.carte-offre h3 { font-size: 22px; }
.prix-offre { font-size: 26px; font-weight: bold; color: var(--accent); }
.equiv-mois { color: var(--encre-douce); font-size: 15px; margin-top: -6px; }
.carte-offre ul { list-style: none; }
.carte-offre li { padding: 4px 0; }
.description-offre { color: var(--encre-douce); font-size: 15px; flex: 1; }
.badge-actuelle { text-align: center; color: var(--vert); font-weight: bold; padding: 10px; }

/* ============ Notification ============ */
.notification {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--encre); color: #fff; padding: 14px 24px; border-radius: 30px;
  box-shadow: 0 4px 20px rgba(0,0,0,.25); z-index: 100; max-width: 90%;
  text-align: center;
}
.notification.erreur-notif { background: #c0392b; }

/* ============ Mobile ============ */
@media (max-width: 600px) {
  body { font-size: 17px; }
  .auth-boite { padding: 28px 20px; }
  .message { max-width: 92%; }
  .entete { padding: 10px 12px; }
  .entete-titre { font-size: 18px; }
  .onglets { top: 53px; }
  .onglet { min-width: 90px; font-size: 14px; padding: 12px 4px; }
  .boutons-saisie .btn { padding: 12px 14px; font-size: 16px; }
  .chapitre { padding: 20px 16px; }
}

/* ============ Compagnons : partage d'un projet ============ */
.carte-dossier.carte-partagee { border-left: 5px solid var(--vert); }
.badge-partage {
  margin-top: 10px; font-size: 14px; color: var(--vert);
  background: rgba(74, 124, 89, .09); border-radius: 8px; padding: 5px 9px; display: inline-block;
}
.bandeau-role {
  background: rgba(74, 124, 89, .12); color: var(--vert);
  padding: 9px 18px; font-size: 16px; text-align: center; border-bottom: 1px solid var(--bordure);
}

/* Fenêtre modale */
.modal-fond {
  position: fixed; inset: 0; background: rgba(59, 49, 40, .5);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px 16px; overflow-y: auto; z-index: 50;
}
.modal-boite {
  background: var(--papier); border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: 28px; max-width: 640px; width: 100%; position: relative;
}
.modal-boite h2 { font-size: 25px; margin-bottom: 12px; }
.modal-boite label { display: block; margin: 14px 0 6px; color: var(--encre-douce); font-size: 16px; }
.modal-boite input[type="email"], .modal-boite input[type="text"], .modal-boite select {
  width: 100%; padding: 12px 14px; border: 2px solid var(--bordure);
  border-radius: var(--rayon); background: #fff; margin-bottom: 6px;
}
.modal-boite .btn-large { width: 100%; margin-top: 14px; }
.modal-fermer {
  position: absolute; top: 12px; right: 14px; background: none; border: none;
  font-size: 22px; cursor: pointer; color: var(--encre-douce); padding: 4px 8px;
}
.modal-fermer:hover { color: var(--accent); }

/* ============ Choix du type de carnet ============ */
.modal-boite.modal-large { max-width: 860px; }
.grille-carnets {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px; margin-top: 16px;
}
/* Les trois familles de carnets : un titre en pleine largeur dans la grille */
.famille-titre {
  grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding-bottom: 2px; border-bottom: 1px dashed var(--bordure);
}
.famille-titre:first-child { margin-top: 0; }
.famille-titre b { font-size: 16.5px; }
.famille-titre small { color: var(--encre-douce); font-size: 13.5px; }
/* Le mot qui rassure quand on prépare le carnet POUR quelqu'un (porte aidant) */
.note-porte { background: var(--accent-pale); border-radius: 10px; padding: 10px 14px; margin-top: 12px; }
.carte-carnet {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  background: #fff; border: 2px solid var(--bordure); border-radius: 14px;
  padding: 14px 16px; cursor: pointer; font: inherit;
  transition: border-color .15s, background .15s;
}
.carte-carnet:hover { border-color: var(--accent); background: #fdf7ef; }
.carte-carnet.choisi { border-color: var(--vert); background: #f4f9f4; }
.carte-carnet .carnet-emoji { font-size: 26px; }
.carte-carnet b { font-size: 17px; }
.carte-carnet .carnet-desc { color: var(--encre-douce); font-size: 14px; line-height: 1.35; }
.carte-carnet .carnet-taille { color: var(--encre-douce); font-size: 13px; opacity: .8; }
.bloc-titre-carnet { margin-top: 18px; }
.bloc-titre-carnet .btn { margin-top: 12px; width: 100%; }
.tag-carnet {
  display: inline-block; background: var(--creme); border-radius: 999px;
  padding: 1px 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
}
body.mode-simple .grille-carnets { grid-template-columns: 1fr 1fr; }

/* ============ Vue synthèse ============ */
.synthese-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin: 16px 0 22px;
}
.tuile-synthese {
  background: var(--papier); border: 2px solid var(--bordure); border-radius: var(--rayon);
  padding: 14px 16px; text-align: center;
}
.tuile-synthese b { display: block; font-size: 28px; color: var(--accent); }
.tuile-synthese span { color: var(--encre-douce); font-size: 14px; }
.carte-synthese {
  background: var(--papier); border: 2px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 18px 20px; margin-bottom: 14px;
}
.resume-synthese { margin-top: 8px; font-style: italic; color: var(--encre-douce); line-height: 1.55; }
.resume-synthese .note-resume { font-size: 14px; opacity: .75; }
.resume-absent { opacity: .65; }
.faits-cles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fait-cle {
  background: var(--creme); border-radius: 999px; padding: 3px 12px;
  font-size: 14px; color: var(--encre-douce);
}
.titre-section-synthese { margin: 26px 0 10px; font-size: 20px; }
.apport-synthese {
  display: flex; align-items: center; gap: 12px;
  background: var(--papier); border: 2px solid var(--bordure); border-radius: var(--rayon);
  padding: 10px 14px; margin-bottom: 8px;
}
.apport-synthese .ico { font-size: 22px; width: 44px; text-align: center; flex: none; }
.apport-synthese .vignette { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex: none; }
.apport-synthese .corps { flex: 1; min-width: 0; }
.apport-synthese .corps b { display: block; font-size: 15px; }
.apport-synthese .extrait { color: var(--encre-douce); font-size: 14px; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apport-synthese .date { color: var(--encre-douce); font-size: 13px; flex: none; }
.chapitre-surligne { outline: 3px solid var(--accent); outline-offset: 2px; transition: outline-color .3s; }
.bandeau-resumes { margin-bottom: 14px; }

/* ============ Menu « Réglages » de l'atelier ============ */
.menu-outils { position: relative; }
.panneau-outils {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 290px;
  background: var(--papier); border: 2px solid var(--bordure-forte); border-radius: var(--rayon);
  box-shadow: var(--ombre-forte); padding: 6px; animation: descendre .18s ease;
}
@keyframes descendre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.panneau-outils button, .panneau-outils a {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer; padding: 11px 12px; border-radius: 10px;
  font-size: 16px; color: inherit; text-decoration: none; font-family: inherit;
}
.panneau-outils button:hover, .panneau-outils a:hover { background: var(--accent-pale); }
.panneau-outils span { display: flex; flex-direction: column; min-width: 0; }
.panneau-outils b { font-size: 15.5px; font-weight: 700; }
.panneau-outils small { color: var(--encre-douce); font-size: 13.5px; }
.panneau-outils small.cap-donne { color: var(--accent-fonce); font-weight: 600; }
#btn-reglages.bouton-actif { border-color: var(--accent); color: var(--accent-fonce); }

/* Le menu reste accessible en mode simple : c'est par là qu'on repasse en mode
   complet, qu'on change de voix ou qu'on invite un proche. Le masquer enfermait
   la personne dans le mode simple sans porte de sortie depuis l'atelier. */
body.mode-simple #btn-reglages { font-size: 18px; padding: 13px 18px; min-height: 52px; }
body.mode-simple .panneau-outils { width: min(340px, calc(100vw - 32px)); padding: 8px; }
body.mode-simple .panneau-outils button,
body.mode-simple .panneau-outils a { padding: 14px 14px; font-size: 18px; min-height: 60px; }
body.mode-simple .panneau-outils b { font-size: 17px; }
body.mode-simple .panneau-outils small { font-size: 15px; }

/* ============ Mention d'usage de l'IA (transparence) ============ */
.mention-ia {
  position: relative; background: var(--creme); border: 2px solid var(--bordure);
  border-radius: var(--rayon); padding: 10px 40px 10px 14px; margin-bottom: 10px;
  font-size: 14.5px; color: var(--encre-douce); line-height: 1.5; flex: none;
}
.mention-ia a { color: var(--accent); }
.mention-ia .fermer-mention {
  position: absolute; top: 6px; right: 8px; background: none; border: none;
  font-size: 16px; cursor: pointer; color: var(--encre-douce); padding: 2px 6px;
}
.mention-ia .fermer-mention:hover { color: var(--accent); }
body.mode-simple .mention-ia { font-size: 16.5px; }
.mention-ia-auth {
  margin-top: 14px; font-size: 14px; color: var(--encre-douce); line-height: 1.5; text-align: center;
}
.mention-generee {
  display: block; margin-top: 6px; font-size: 13px; color: var(--encre-douce); opacity: .8;
}

.tableau-tarifs { overflow-x: auto; margin-top: 10px; }
.tableau-tarifs table { width: 100%; border-collapse: collapse; }
.tableau-tarifs th {
  text-align: left; font-size: 14px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--encre-douce); padding: 8px 10px; border-bottom: 2px solid var(--bordure);
}
.tableau-tarifs td { padding: 10px; border-bottom: 1px solid var(--bordure); }
.tableau-tarifs td.montant { font-weight: bold; white-space: nowrap; }
.tableau-tarifs td.sous { color: var(--encre-douce); white-space: nowrap; }

.bloc-tresor {
  background: var(--creme); border: 2px dashed var(--bordure); border-radius: var(--rayon);
  padding: 18px 22px; margin-top: 26px;
}
.bloc-tresor b { font-size: 17px; }
.bloc-tresor p { color: var(--encre-douce); margin: 6px 0 12px; line-height: 1.55; }

/* ============ Cap du projet et fiches lieux ============ */
.bandeau-cap {
  background: var(--creme); border: 2px solid var(--accent); border-radius: var(--rayon);
  padding: 16px 20px; margin-bottom: 18px;
}
.bandeau-cap.sans-cap { border-style: dashed; border-color: var(--bordure); }
.bandeau-cap b { font-size: 17px; }
.bandeau-cap p { color: var(--encre-douce); margin: 6px 0 10px; line-height: 1.55; }
.piste-orientation {
  background: var(--creme); border: 2px solid var(--bordure); border-radius: 999px;
  padding: 7px 14px; margin: 6px 6px 0 0; font: inherit; font-size: 15px; cursor: pointer;
}
.piste-orientation:hover { border-color: var(--accent); background: #fdf7ef; }
.pistes-orientation { margin: 4px 0 16px; }
#champ-orientation { width: 100%; padding: 12px 14px; border: 2px solid var(--bordure);
  border-radius: var(--rayon); font: inherit; resize: vertical; }
.bouton-actif { border-color: var(--accent) !important; color: var(--accent); }

.carte-lieu {
  background: var(--papier); border: 2px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 16px 20px; margin-bottom: 12px;
  border-left: 4px solid var(--bordure);
}
.carte-lieu.confirme { border-left-color: var(--vert); }
.carte-lieu h3 { font-size: 19px; }
.badge-lieu { margin: 6px 0; }
.etiquette {
  display: inline-block; border-radius: 999px; padding: 2px 11px; font-size: 13.5px;
}
.etiquette.verifiee { background: #eaf5ea; color: #2f6b34; }
.etiquette.a-confirmer { background: #fdf0e2; color: #96530f; }
.etiquette.corrigee { background: var(--creme); color: var(--encre-douce); }
.situation-lieu { color: var(--encre-douce); font-size: 15.5px; }
.texte-lieu { margin-top: 6px; line-height: 1.55; }
.sources-lieu { margin-top: 8px; font-size: 13px; color: var(--encre-douce); opacity: .85; }

.ligne-compagnon {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 0; border-bottom: 1px solid var(--bordure);
}
.ligne-compagnon .ico { font-size: 20px; }
.ligne-compagnon .qui { flex: 1; min-width: 160px; }
.ligne-compagnon.en-attente { color: var(--encre-douce); font-style: italic; }
.ligne-journal { font-size: 15px; color: var(--encre-douce); padding: 4px 0; }
#partage-lien { margin-top: 14px; background: rgba(74, 124, 89, .08); padding: 14px; border-radius: var(--rayon); }
#partage-lien input { font-size: 14px; font-family: monospace; }

/* Écran d'invitation */
.carte-invitation {
  background: var(--creme); border: 2px solid var(--bordure); border-radius: var(--rayon);
  padding: 14px; margin: 14px 0; font-size: 20px;
}
.message-invitation { font-style: italic; color: var(--encre-douce); margin-bottom: 12px; }

/* Offre gratuite dans la recharge */
.carte-pack.offerte { border-style: dashed; border-color: var(--vert); }
.carte-pack .deja-recue { text-align: center; color: var(--vert); font-weight: bold; padding: 12px 0; }

/* ============ Frise chronologique ============
   Un fil vertical, l'année en médaillon à gauche, le moment à droite.
   Les trous entre deux dates sont des invitations à raconter. */
#liste-frise { max-width: var(--largeur-lecture); margin: 0 auto; position: relative; }
.evt {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px;
  position: relative; padding: 0 0 22px 0;
}
.evt::before { /* le fil du temps */
  content: ''; position: absolute; left: 47px; top: 8px; bottom: -8px;
  width: 2px; background: var(--bordure-forte);
}
.evt:last-child::before { bottom: 12px; }
.evt-annee {
  position: relative; z-index: 1; align-self: start; justify-self: stretch;
  text-align: center; background: var(--encre); color: var(--creme);
  border-radius: 999px; padding: 8px 6px; font-weight: 800; font-size: 17px;
  letter-spacing: .02em; box-shadow: var(--ombre);
}
.evt-corps {
  background: var(--papier); border: 2px solid var(--bordure);
  border-radius: var(--rayon); padding: 14px 18px; box-shadow: var(--ombre);
}
.evt-corps b { font-size: 18px; }
.evt-quand { margin-left: 10px; font-style: italic; color: var(--encre-douce); font-size: 15px; }
.evt-corps p { margin: 6px 0 0; color: var(--encre-douce); font-size: 15.5px; line-height: 1.45; }
.evt-outils { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.evt-outils button { cursor: pointer; }
.evt-outils button:not(.btn) {
  background: transparent; border: none; font-size: 17px; padding: 4px 6px; border-radius: 8px;
}
.evt-outils button:not(.btn):hover { background: var(--accent-pale); }
.evt-trou {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin: 0 0 22px 112px; padding: 14px 18px;
  border: 2px dashed var(--bordure-forte); border-radius: var(--rayon);
  color: var(--encre-douce); font-style: italic; background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.chapitre-cible { outline: 3px solid var(--accent); outline-offset: 4px; transition: outline-color 1.2s; }
@media (max-width: 700px) {
  .evt { grid-template-columns: 74px minmax(0, 1fr); gap: 10px; }
  .evt::before { left: 36px; }
  .evt-annee { font-size: 14.5px; padding: 7px 4px; }
  .evt-trou { margin-left: 84px; }
}

/* ============ Recherche dans ses souvenirs ============ */
.modal-recherche { width: min(680px, 94vw); }
.modal-recherche #champ-recherche { width: 100%; font-size: 18px; margin: 6px 0 14px; }
#resultats-recherche { max-height: 55vh; overflow-y: auto; }
#resultats-recherche h3 {
  margin: 14px 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--encre-douce);
}
.resultat-recherche {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--papier); border: 2px solid var(--bordure); border-radius: 12px;
  padding: 10px 14px; margin-bottom: 8px; font: inherit; color: inherit;
}
.resultat-recherche:hover { border-color: var(--accent); background: var(--accent-pale); }
.resultat-recherche b { display: block; font-size: 15.5px; }
.resultat-recherche span { display: block; font-size: 14.5px; color: var(--encre-douce); margin-top: 2px; line-height: 1.4; }

/* ============ Offrir en lecture ============ */
.lecture-lien input { width: 100%; font-size: 15px; margin-bottom: 12px; }
.lecture-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ============ Corriger un message / annuler l'envoi ============ */
.message { position: relative; }
.message .corriger-message {
  position: absolute; top: 6px; right: 8px; background: transparent; border: none;
  font-size: 14px; cursor: pointer; opacity: 0; transition: opacity .15s; padding: 4px; border-radius: 8px;
}
.message:hover .corriger-message, .message .corriger-message:focus-visible { opacity: .8; }
.message .corriger-message:hover { opacity: 1; background: rgba(255, 255, 255, .5); }
.envoi-annulable {
  display: flex; align-items: center; gap: 14px; justify-content: flex-end;
  margin: 4px 0 10px; font-size: 15px; color: var(--encre-douce); font-style: italic;
}
.envoi-annulable .btn { padding: 7px 14px; font-size: 15px; }
body.mode-simple .envoi-annulable .btn { font-size: 17px; padding: 10px 18px; }

/* ============ PWA & mode hors ligne ============ */
.bandeau-attente {
  margin: 0 0 12px; padding: 11px 16px; border-radius: 12px;
  background: #fdf3dc; border: 2px dashed #d9b96a; color: #7a5c1e;
  font-size: 15.5px; text-align: center; cursor: pointer;
}
.bandeau-attente:hover { border-style: solid; }
/* Bloqué : ce n'est plus une attente, c'est un appel à l'aide */
.bandeau-attente.attente-bloquee { background: #fdeeea; border-color: #c0392b; color: #a3311f; }

/* ---- La fenêtre « souvenirs en attente » ---- */
.attente-ligne {
  display: flex; gap: 12px; align-items: flex-start; padding: 10px 0;
  border-bottom: 1px dashed var(--bordure);
}
.attente-vignette {
  flex: none; width: 62px; height: 62px; border-radius: 10px; overflow: hidden;
  background: var(--surface); display: flex; align-items: center; justify-content: center;
  font-size: 27px;
}
.attente-vignette img { width: 100%; height: 100%; object-fit: cover; }
.attente-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.attente-corps b { font-size: 15.5px; overflow-wrap: anywhere; }
.attente-corps small { color: var(--encre-douce); font-size: 13px; }
.attente-corps audio { margin-top: 6px; max-width: 100%; }
.attente-motif { color: #a3311f !important; font-weight: 600; }
.attente-actions { flex: none; display: flex; flex-direction: column; gap: 6px; }
.attente-rangement { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.attente-rangement label { font-size: 13.5px; color: var(--encre-douce); display: flex; gap: 6px; align-items: center; }
.attente-rangement select { padding: 6px 8px; border-radius: 8px; border: 2px solid var(--bordure); font: inherit; font-size: 14px; max-width: 190px; }
.attente-ko { background: #fdf6f4; border-radius: 10px; padding: 10px 8px; }
.message.en-attente { opacity: .85; border-style: dashed !important; }
.message.en-attente audio { display: block; margin-top: 8px; max-width: 100%; }
.note-attente {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  font-size: 13.5px; font-style: italic; color: var(--encre-douce);
}
.note-attente .btn { padding: 2px 8px; font-size: 14px; }

.hl-projet { margin: 4px 0 18px; font-size: 15.5px; color: var(--encre-douce); }
.hl-texte {
  width: 100%; margin-top: 16px; padding: 12px 14px; font: inherit;
  border: 2px solid var(--bordure-forte); border-radius: 12px; background: var(--papier);
}
#hl-btn-garder { margin-top: 10px; }
.hl-pendant {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 14px 0 4px; padding: 12px; border-radius: 12px;
  background: #f2f8f3; border: 2px solid var(--vert); color: #2f6b41; font-weight: 700;
}
.hl-point {
  width: 12px; height: 12px; border-radius: 50%; background: #c43d2f;
  animation: hl-pulse 1.1s ease-in-out infinite;
}
@keyframes hl-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
.hl-liste { margin: 20px 0 8px; text-align: left; }
.hl-liste-titre { font-weight: 700; font-size: 15px; margin: 0 0 8px; }
.hl-attente {
  padding: 9px 13px; margin-bottom: 6px; border-radius: 10px; font-size: 14.5px;
  background: var(--papier); border: 1px dashed var(--bordure-forte); color: var(--encre-douce);
}

/* ============ Téléphone : l'écran appartient à la CONVERSATION ============
   Public visé : des personnes peu à l'aise avec les applications. Règles :
   une seule action principale visible (Parler), les gestes secondaires en
   icônes ou repliés, l'en-tête tient sur une ligne, rien ne se répète. */
.entete .lib { }                       /* libellés texte : cachés sur téléphone */
#btn-plus-dossiers { display: none; }  /* ☰ n'existe que sur téléphone */
.actions-entete { display: contents; } /* sur grand écran : boutons en ligne, comme avant */
.panneau-outils .que-mobile { display: none; } /* Rechercher/Lecture : dans ⚙️ sur téléphone seulement */

@media (max-width: 700px) {
  /* --- En-tête atelier : ← | titre | encrier | ⚙️ — rien d'autre --- */
  .entete { padding: 8px 10px; gap: 6px; }
  .entete .lib { display: none; }
  .entete .btn { padding: 9px 11px; font-size: 16px; }
  .entete-titre { font-size: 16.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #btn-recherche, #btn-voix { display: none; }  /* ils vivent dans le menu ⚙️ */
  .panneau-outils .que-mobile { display: flex; }
  .compteur-credits { padding: 5px 10px; gap: 6px; }
  .encrier-texte small { display: none; }       /* « encore ~2 chapitres » : au détail, pas ici */
  .panneau-outils { width: min(340px, calc(100vw - 20px)); }

  /* --- Onglets : une ligne qui glisse, jamais coupée au début --- */
  .onglets { justify-content: flex-start; padding: 8px 10px; gap: 4px; }
  .onglet { min-width: 0; font-size: 14.5px; padding: 10px 12px; }

  /* --- Mention IA : une ligne discrète (et « ✕ » ne la fait plus jamais revenir) --- */
  .mention-ia { font-size: 13px; padding: 6px 30px 6px 10px; line-height: 1.4; }

  /* --- Composeur : [📎][💡][champ ➤] puis [🎙️ Parler][🗣️ Conversation], point final --- */
  .btn-icone-champ { width: 46px; height: 46px; font-size: 20px; }
  #champ-message { padding: 12px 62px 12px 12px; font-size: 16px; }
  .btn-envoi-champ { width: 44px; height: 44px; right: 8px; bottom: 8px; font-size: 19px; }
  .boutons-saisie { gap: 8px; }
  .boutons-saisie .btn { flex: 1; min-height: 54px; }
  .note-cout { display: none; }                 /* l'encrier et les dialogues disent déjà le prix */
  .panneau-ecoute { padding: 14px; }

  /* --- Écran des projets : les actions secondaires derrière « ☰ Menu » --- */
  #ecran-dossiers .entete > div:last-child { position: relative; display: flex; align-items: center; gap: 8px; }
  #btn-plus-dossiers { display: inline-flex; align-items: center; padding: 9px 13px; font-size: 16px; }
  .actions-entete {
    display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
    width: min(300px, calc(100vw - 20px)); background: var(--papier);
    border: 2px solid var(--bordure-forte); border-radius: var(--rayon);
    box-shadow: var(--ombre-forte); padding: 8px; flex-direction: column; gap: 2px;
    animation: descendre .18s ease;
  }
  .actions-entete.ouvert { display: flex; }
  .actions-entete .btn { width: 100%; text-align: left; font-size: 16.5px; padding: 12px 14px; min-height: 50px; }
}

/* Mention IA : longue sur grand écran, une ligne sur téléphone (même lien, même ✕) */
.mention-courte { display: none; }
@media (max-width: 700px) {
  .mention-longue { display: none; }
  .mention-courte { display: inline; }
}

/* Mode simple sur téléphone : la voix pleine largeur, les deux gestes
   d'appoint côte à côte — une rangée de gagnée pour la conversation. */
@media (max-width: 700px) {
  body.mode-simple .boutons-saisie { display: grid; grid-template-columns: 1fr 1fr; }
  body.mode-simple #btn-micro,
  body.mode-simple #btn-conversation { grid-column: 1 / -1; }
}

/* Mode simple sur téléphone : le « grand » reste pour les GESTES (boutons,
   champ), pas pour le décor (en-tête, onglets, compteur). */
@media (max-width: 700px) {
  body.mode-simple .entete { padding: 8px 10px; }
  body.mode-simple .compteur-credits { font-size: 15px; padding: 6px 12px; }
  body.mode-simple #btn-reglages { font-size: 16px; padding: 10px 12px; min-height: 44px; }
  body.mode-simple .onglets { padding: 8px 10px; gap: 6px; }
  body.mode-simple .onglets .onglet { font-size: 16px; padding: 10px 14px; }
  body.mode-simple .mention-ia { font-size: 13px; padding: 6px 30px 6px 10px; }
}

/* ============ Plein écran d'écoute ============
   Dès qu'on parle (ou que Plume répond), l'écran entier devient l'écoute :
   les ondes au centre, les mots reconnus en grand, UN bouton pour finir.
   Plus d'onglets, de menus ni de boutons empilés — l'essentiel, rien d'autre. */
body.mode-ecoute { overflow: hidden; }
body.mode-ecoute #panneau-ecoute {
  position: fixed; inset: 0; z-index: 60; margin: 0; border: none; border-radius: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; padding: 28px 22px calc(130px + env(safe-area-inset-bottom));
  text-align: center;
}
body.mode-ecoute .ecoute-haut { flex-direction: column; gap: 20px; }
body.mode-ecoute .ecoute-ondes { height: 96px; gap: 8px; justify-content: center; }
body.mode-ecoute .ecoute-ondes span { width: 13px; border-radius: 7px; }
body.mode-ecoute .ecoute-titre { font-size: clamp(28px, 6vw, 42px); }
body.mode-ecoute .ecoute-sous { font-size: clamp(16px, 4vw, 21px); max-width: 560px; margin: 0 auto; }
body.mode-ecoute .ecoute-mots {
  width: min(680px, 100%); max-height: 34vh; overflow-y: auto;
  background: #fff; border: 2px solid var(--bordure); border-radius: 14px;
  padding: 16px 18px; font-size: clamp(18px, 4.5vw, 24px); line-height: 1.5; text-align: left;
  font-family: var(--font-texte);
}
body.mode-ecoute .btn-fin-parole {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 61;
  bottom: calc(24px + env(safe-area-inset-bottom));
  width: min(640px, calc(100vw - 44px));
  font-size: clamp(19px, 4.5vw, 24px); padding: 20px;
}

/* ============ Corrections de superpositions (retour de terrain) ============ */
/* Un onglet ne rétrécit JAMAIS : la rangée défile, les libellés ne s'écrasent plus */
.onglet { flex: none; }
/* Ambiances : hidden doit gagner sur tout display posé ailleurs (piège connu) */
.onglet[hidden], .panneau-onglets button[hidden] { display: none !important; }
/* Le bouton « ➕ Outils » : discret, en pointillés — il range, il ne crée pas */
.onglet-outils { border: 2px dashed var(--bordure-forte); color: var(--encre-douce); }
.onglet-outils:hover { border-color: var(--accent); color: var(--accent-fonce); }
@media (max-width: 700px) { .onglet-outils { display: none !important; } } /* sur téléphone : dans ⋯ Plus */
/* Un lecteur audio ne déborde jamais de sa bulle */
.media-message audio { max-width: 100%; }
.message { overflow: hidden; }
/* Au repos, la parole domine : Parler plus large que Conversation */
body:not(.mode-simple) .boutons-saisie #btn-micro { flex: 1.5; }

/* « Voir la suite » : fixé à l'écran (sur petit écran c'est la page qui défile),
   la position exacte au-dessus de la zone d'écriture est posée par majBoutonBas() */
.btn-bas { position: fixed; bottom: 16px; }

/* Correction urgente : overflow:hidden (anti-débordement audio) avait retiré la
   hauteur minimale naturelle des messages — le flex du fil les ÉCRASAIT en
   lamelles illisibles. Un message ne se comprime jamais. */
.fil-messages .message { flex-shrink: 0; }

/* ============ « ⋯ Plus » : onglets repliés sur petit écran ============
   Fini le défilement horizontal que personne ne voit : sur téléphone il reste
   Raconter, Le récit et « ⋯ Plus » qui déplie le reste VERTICALEMENT. */
#btn-onglets-plus { display: none; border-color: var(--bordure-forte); }
.panneau-onglets {
  position: fixed; left: 10px; right: 10px; z-index: 45;
  background: var(--papier); border: 2px solid var(--bordure-forte);
  border-radius: var(--rayon); box-shadow: var(--ombre-forte); padding: 8px;
  animation: descendre .18s ease;
}
.panneau-onglets button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  cursor: pointer; padding: 14px 16px; border-radius: 10px;
  font-size: 17.5px; font-weight: 600; color: var(--encre); font-family: inherit;
}
.panneau-onglets button:hover { background: var(--accent-pale); }
@media (max-width: 700px) {
  body:not(.mode-simple) .onglets .onglet[data-vue="importer"],
  body:not(.mode-simple) .onglets .onglet[data-vue="synthese"],
  body:not(.mode-simple) .onglets .onglet[data-vue="livres"],
  body:not(.mode-simple) .onglets .onglet[data-vue="personnages"],
  body:not(.mode-simple) .onglets .onglet[data-vue="lieux"],
  body:not(.mode-simple) .onglets .onglet[data-vue="frise"],
  body:not(.mode-simple) .onglets .onglet[data-vue="apports"] { display: none; }
  body:not(.mode-simple) #btn-onglets-plus { display: inline-block; }
  /* En mode simple les 3 onglets tiennent en ligne : pas besoin de « Plus » */
}
/* La pastille « du neuf » existante s'applique aussi au bouton Plus (classe partagée) */

/* ============ Parcours d'entretien ============ */
.bande-parcours {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 11px 16px; border-radius: 12px;
  background: #f2f6f0; border: 2px solid var(--vert); font-size: 15.5px;
}
.bande-parcours-texte { min-width: 0; }
.bande-parcours-actions { display: flex; gap: 8px; align-items: center; flex: none; }
.bande-parcours .btn { padding: 8px 14px; font-size: 15px; }
body.mode-simple .bande-parcours { font-size: 17px; }
body.mode-simple .bande-parcours .btn { font-size: 17px; padding: 12px 18px; min-height: 48px; }
.ligne-seance {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left;
  background: var(--papier); border: 2px solid var(--bordure); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 8px; cursor: pointer; font: inherit; color: inherit;
}
.ligne-seance:hover { border-color: var(--accent); background: var(--accent-pale); }
.ligne-seance.faite { opacity: .62; }
.ligne-seance.active { border-color: var(--vert); background: #f2f8f3; }
.seance-etat { flex: none; font-weight: 800; font-size: 16px; min-width: 28px; }
.seance-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.seance-corps b { font-size: 16px; }
.seance-corps small { color: var(--encre-douce); font-size: 13.5px; line-height: 1.35; }
#liste-seances { max-height: 60vh; overflow-y: auto; }

/* ============ Demander un souvenir ============ */
.btn-demander-souvenir { margin-top: 10px; font-size: 14.5px; padding: 7px 10px; }
.titre-demandes {
  margin: 20px 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--encre-douce);
}
.ligne-demande {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin-bottom: 6px;
  background: var(--papier); border: 1px solid var(--bordure); border-radius: 10px; font-size: 15px;
}
.ligne-demande.repondu { border-color: var(--vert); background: #f6faf6; }
.demande-corps { display: flex; flex-direction: column; min-width: 0; }
.demande-corps small { color: var(--encre-douce); font-size: 13.5px; }

/* ============ Les voix de l'appareil ============ */
.bloc-voix-appareil { margin-top: 22px; border-top: 2px solid var(--bordure); padding-top: 16px; }
.titre-voix-appareil { font-size: 17px; margin-bottom: 4px; }
.ligne-voix-appareil {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; margin-bottom: 6px; border: 2px solid var(--bordure);
  border-radius: 12px; cursor: pointer; background: var(--papier);
}
.ligne-voix-appareil:hover { border-color: var(--accent); }
.ligne-voix-appareil.choisi { border-color: var(--vert); background: #f4f9f4; }
.ligne-voix-appareil.choisi b::after { content: '  ✓'; color: var(--vert); }

/* ============ Les étapes du voyage (frise géographique) ============ */
.etape-voyage {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: start;
  background: var(--papier); border: 2px solid var(--bordure); border-radius: 12px;
  padding: 12px 16px; margin-bottom: 10px;
}
.etape-point { font-size: 22px; }
.etape-corps b { font-size: 16.5px; color: var(--accent-fonce); }
.etape-corps small { color: var(--encre-douce); font-size: 13px; }
.etape-corps p { margin: 4px 0 0; color: var(--encre-douce); font-size: 14.5px; line-height: 1.4; }
.etape-photo { width: 92px; height: 92px; object-fit: cover; border-radius: 10px; }

/* ============ Bannière de mise à jour ============ */
.bandeau-maj {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 90;
  display: flex; align-items: center; gap: 14px;
  background: var(--encre); color: #fff; border-radius: 16px; padding: 12px 18px;
  font-size: 15.5px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  max-width: calc(100vw - 24px);
}
.bandeau-maj .btn { padding: 9px 16px; font-size: 15px; flex: none; }