/* Appli des tablettes : couleurs douces, grandes cibles, animations lentes, jamais de clignotement. */
:root {
  --fond: #fdf6ec;
  --carte: #ffffff;
  --texte: #3b2f2a;
  --discret: #8a7a70;
  --accent: #4c9a6a;
  --accent-doux: #d9eedf;
  --attente: #e8a33d;
  --ombre: 0 6px 18px rgba(59, 47, 42, 0.12);
  --rayon: 28px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--fond);
  color: var(--texte);
  font-family: "Nunito", "Segoe UI Rounded", system-ui, -apple-system, sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  overscroll-behavior: none; /* pas de « tirer pour recharger » par erreur */
}

.ecran { display: none; min-height: 100vh; min-height: 100dvh; }
.ecran.actif { display: flex; }
.ecran--centre {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  gap: 12px;
}
.ecran--centre h1 { font-size: clamp(1.4rem, 4vw, 2.2rem); margin: 0; }
.ecran--centre p { font-size: clamp(1.1rem, 3vw, 1.5rem); max-width: 36rem; }

.grand { font-size: 3rem; }
.emoji-geant { font-size: clamp(4rem, 14vw, 8rem); line-height: 1; }
.discret { color: var(--discret); }

button { font: inherit; color: inherit; cursor: pointer; }

.bouton-principal,
.bouton-depart {
  border: 0;
  border-radius: var(--rayon);
  background: var(--accent);
  color: white;
  box-shadow: var(--ombre);
}
.bouton-principal { font-size: 1.5rem; padding: 16px 32px; }
.bouton-depart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  padding: 40px 56px;
}

/* --- Écran principal --- */
.principal {
  flex-direction: column;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  gap: 12px;
}

.barre { display: flex; justify-content: space-between; align-items: center; min-height: 28px; }
.voyant {
  background: var(--accent-doux);
  color: var(--accent);
  border-radius: 999px;
  padding: 4px 12px;
  font-weight: 700;
}

.conversation {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 8px;
  overflow-y: auto;
}
.entendu { font-size: clamp(1.1rem, 3vw, 1.5rem); color: var(--discret); margin: 0; min-height: 1.5em; }
.entendu.provisoire { font-style: italic; opacity: 0.7; }
.reponse {
  font-size: clamp(1.5rem, 4.2vw, 2.4rem);
  line-height: 1.35;
  margin: 0;
  max-width: 44rem;
  font-weight: 600;
}
.statut { font-size: clamp(1rem, 2.6vw, 1.3rem); color: var(--discret); margin: 0; min-height: 1.4em; }

/* --- Mascotte : boule toute douce. Animations lentes, sans clignotement (docs/tout-petit.md). --- */
.mascotte { width: clamp(130px, 34vw, 230px); aspect-ratio: 1; flex: none; }
.mascotte[hidden] { display: none; }
.mascotte svg { width: 100%; height: 100%; overflow: visible; }
.mascotte .corps { transform-box: fill-box; transform-origin: 50% 100%; }
.mascotte .duvet { fill: #f6d7b0; }
.mascotte .oreilles { fill: #eec39a; }
.mascotte .joue { fill: #f4a3a3; opacity: 0.6; }
.mascotte .oeil ellipse { fill: var(--texte); }
.mascotte .reflet { fill: #fff; }
.mascotte .oeil { transform-box: fill-box; transform-origin: center; transition: transform 0.6s ease; }
.mascotte .yeux-fermes path,
.mascotte .bouche-fermee { fill: none; stroke: var(--texte); stroke-width: 3.5; stroke-linecap: round; }
.mascotte .bouche-ouverte { fill: #c9605f; opacity: 0; transform-box: fill-box; transform-origin: center; }
.mascotte .yeux-fermes,
.mascotte .zzz,
.mascotte .points { opacity: 0; transition: opacity 0.6s ease; }
.mascotte .zzz { fill: var(--discret); font: 700 18px "Nunito", system-ui, sans-serif; }
.mascotte .points { fill: var(--discret); }

/* Endormie : yeux fermés, respiration lente, petits « z ». */
.mascotte.dort .yeux-ouverts { opacity: 0; }
.mascotte.dort .yeux-fermes { opacity: 1; }
.mascotte.dort .corps { animation: respiration 4.5s ease-in-out infinite; }
.mascotte.dort .zzz { opacity: 1; }
.mascotte.dort .zzz text { animation: flotte 4.5s ease-in-out infinite; }
.mascotte.dort .zzz text:nth-child(2) { animation-delay: 0.8s; }
.mascotte.dort .zzz text:nth-child(3) { animation-delay: 1.6s; }

/* Écoute : grands yeux, léger balancement. */
.mascotte.ecoute .oeil { transform: scale(1.12); }
.mascotte.ecoute .corps { animation: balance 3.2s ease-in-out infinite; }

/* Réfléchit : regard en l'air, petits points. */
.mascotte.reflechit .oeil { transform: translateY(-6px); }
.mascotte.reflechit .points { opacity: 1; }
.mascotte.reflechit .points circle { animation: point 1.8s ease-in-out infinite; opacity: 0.25; }
.mascotte.reflechit .points circle:nth-child(2) { animation-delay: 0.3s; }
.mascotte.reflechit .points circle:nth-child(3) { animation-delay: 0.6s; }

/* Parle : bouche animée (au rythme des mots quand le navigateur le permet, voir app.js). */
.mascotte.parle .bouche-fermee { opacity: 0; }
.mascotte.parle .bouche-ouverte { opacity: 1; animation: parole 0.36s ease-in-out infinite alternate; }
.mascotte.parle.synchro .bouche-ouverte { animation: none; transform: scaleY(0.35); transition: transform 0.12s ease; }
.mascotte.parle.synchro.mot .bouche-ouverte { transform: scaleY(1); }

/* Contente : petit saut. */
.mascotte.contente .corps { animation: saut 1.4s ease-in-out 1; }
.mascotte.contente .yeux-ouverts { opacity: 0; }
.mascotte.contente .yeux-fermes { opacity: 1; transform: scaleY(-1); transform-box: fill-box; transform-origin: center; }

/* Calme : gonfle et dégonfle lentement (respiration guidée : 4 s inspirer, 4 s souffler). */
.mascotte.calme .corps { animation: calme 8s ease-in-out infinite; }

@keyframes respiration { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03, 0.98); } }
@keyframes balance { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes flotte { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes point { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes parole { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }
@keyframes saut { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-16px); } 55% { transform: translateY(0) scale(1.04, 0.96); } }
@keyframes calme { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

@media (prefers-reduced-motion: reduce) {
  .mascotte .corps, .mascotte .zzz text, .mascotte .points circle, .mascotte .bouche-ouverte { animation: none !important; }
}

/* --- Boutons en images (réponses du bot) : très grands, 4 au plus, sans défilement. --- */
.boutons-images { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.boutons-images[hidden] { display: none; }
.bouton-choix {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: clamp(110px, 22vw, 150px);
  height: clamp(110px, 22vw, 150px);
  border: 0;
  border-radius: 32px;
  background: var(--carte);
  box-shadow: var(--ombre);
  animation: apparait 0.5s ease both;
}
.bouton-choix .emoji { font-size: clamp(3.2rem, 9vw, 4.4rem); line-height: 1; }
.bouton-choix .mot { font-size: 1rem; font-weight: 700; color: var(--discret); }
.bouton-choix:active { transform: scale(0.95); }
.bouton-choix.choisi { background: var(--accent-doux); outline: 4px solid var(--accent); }
.illustration { font-size: clamp(5rem, 16vw, 8rem); line-height: 1; animation: apparait 0.8s ease both; }

/* Présentation du premier jour : plein centre, grandes images, gros pouce. */
.presentation {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
}
.presentation[hidden] { display: none; }
.principal.en-presentation .conversation,
.principal.en-presentation .outils,
.principal.en-presentation .clavier { display: none; }
.presentation-images { font-size: clamp(3rem, 10vw, 5rem); display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.presentation-images span { animation: apparait 0.8s ease both; }
.presentation-texte { font-size: clamp(1.3rem, 3.6vw, 2rem); line-height: 1.4; max-width: 40rem; margin: 0; }
.bouton-pouce {
  font-size: clamp(4rem, 12vw, 6rem);
  width: clamp(120px, 24vw, 170px);
  height: clamp(120px, 24vw, 170px);
  border-radius: 50%;
  border: 0;
  background: var(--accent-doux);
  box-shadow: var(--ombre);
}
.bouton-pouce[hidden] { display: none; }
@keyframes apparait { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .presentation-images span { animation: none; } }

/* Numéros d'urgence : visibles, calmes, sans alarme clignotante. */
.urgence {
  background: #fff4e5;
  border: 3px solid var(--attente);
  border-radius: var(--rayon);
  padding: 12px 16px;
  text-align: center;
}
.urgence[hidden] { display: none; }
.urgence-titre { margin: 0 0 8px; font-size: clamp(1rem, 2.8vw, 1.3rem); font-weight: 700; }
.numeros { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.numero {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 96px;
  padding: 8px 12px;
  background: var(--carte);
  border-radius: 18px;
  font-size: 1rem;
}
.numero strong { font-size: clamp(2.2rem, 7vw, 3.2rem); line-height: 1.1; }
.bouton-compris { margin-top: 12px; font-size: 1.2rem; padding: 10px 24px; }

.clavier { display: flex; gap: 8px; }
.clavier[hidden] { display: none; }
.clavier input {
  flex: 1;
  font: inherit;
  font-size: 1.3rem;
  padding: 14px 18px;
  border-radius: 999px;
  border: 2px solid #e4d8c9;
  background: var(--carte);
  user-select: text;
}

.outils { display: flex; justify-content: center; align-items: center; gap: 28px; }
.bouton-rond {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 0;
  background: var(--carte);
  box-shadow: var(--ombre);
  font-size: 1.8rem;
  flex: none;
}
.bouton-rond[hidden] { display: none; }
.bouton-reglages { width: 44px; height: 44px; font-size: 1.3rem; }

/* Écran ⚙️ des voix (tuile Papa) : par-dessus tout, défilable. */
.reglage-voix {
  position: fixed;
  inset: 0;
  z-index: 11;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
  background: var(--fond);
  text-align: center;
}
.reglage-voix[hidden] { display: none; }
.reglage-voix h2 { margin: 0; font-size: clamp(1.4rem, 4vw, 2rem); }
/* ✕ toujours visible, même si l'écran défile (grosse police, petit téléphone). */
.bouton-quitter { position: fixed; top: calc(10px + env(safe-area-inset-top)); right: 12px; z-index: 12; width: 52px; height: 52px; font-size: 1.5rem; }
.reglage-voix p { margin: 0; }
.voix-tuiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: min(44rem, 100%); }
.voix-tuiles button {
  border: 3px solid transparent;
  border-radius: 18px;
  background: var(--carte);
  box-shadow: var(--ombre);
  padding: 10px 14px;
  font-size: 1.1rem;
}
.voix-tuiles button.choisie { border-color: var(--accent); background: var(--accent-doux); }
.aide-voix { max-width: 32rem; font-size: 0.95rem; line-height: 1.4; }
.curseur { display: flex; flex-direction: column; gap: 4px; width: min(28rem, 100%); font-size: 1.1rem; font-weight: 700; }
.curseur input { width: 100%; accent-color: var(--accent); }
.reglage-boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.bouton-secondaire {
  border: 0;
  border-radius: var(--rayon);
  background: var(--carte);
  box-shadow: var(--ombre);
  font-size: 1.3rem;
  padding: 14px 24px;
}

/* Bouton micro : vert qui respire quand il écoute, gris et barré quand il est coupé. */
.bouton-micro {
  width: clamp(96px, 20vw, 124px);
  height: clamp(96px, 20vw, 124px);
  border-radius: 50%;
  border: 0;
  padding: 0;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  box-shadow: var(--ombre);
  transition: background 0.3s ease, transform 0.2s ease;
}
.bouton-micro svg { width: 56%; height: 56%; }
.bouton-micro .capsule { fill: white; }
.bouton-micro .support { fill: none; stroke: white; stroke-width: 3.5; stroke-linecap: round; }
.bouton-micro .barre-micro { stroke: #c0563b; stroke-width: 4.5; stroke-linecap: round; display: none; }
.bouton-micro:active { transform: scale(0.95); }
.bouton-micro.ecoute { animation: respire 2.4s ease-in-out infinite; }
.bouton-micro.attente { background: var(--attente); }
.bouton-micro.coupe { background: #e4dbd2; }
.bouton-micro.coupe .capsule { fill: var(--discret); }
.bouton-micro.coupe .support { stroke: var(--discret); }
.bouton-micro.coupe .barre-micro { display: inline; }

.voyant--hors { background: #fbe3d6; color: #a0522d; }
.voyant[hidden] { display: none; }

/* Message de papa : par-dessus tout, grand, calme. */
.message-papa,
.veille-douce {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
  text-align: center;
  background: var(--fond);
}
.message-papa[hidden],
.veille-douce[hidden] { display: none; }
.message-papa.urgent { background: #fff4e5; }
.message-entete { margin: 0; font-size: clamp(1.2rem, 3.4vw, 1.8rem); color: var(--discret); display: flex; align-items: center; gap: 12px; }
.message-entete #message-avatar { font-size: clamp(3rem, 10vw, 5rem); }
.message-texte {
  margin: 0;
  max-width: 44rem;
  font-size: clamp(1.8rem, 5.2vw, 3rem);
  line-height: 1.3;
  font-weight: 700;
  animation: apparait 0.6s ease both;
}
.message-boutons { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.bouton-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: clamp(120px, 24vw, 160px);
  height: clamp(120px, 24vw, 160px);
  border: 0;
  border-radius: 50%;
  background: var(--accent-doux);
  box-shadow: var(--ombre);
  font-size: clamp(3rem, 9vw, 4.2rem);
  line-height: 1;
}
.bouton-image span { font-size: 1.1rem; font-weight: 700; }
.bouton-image--petit { width: 96px; height: 96px; font-size: 2.4rem; background: var(--carte); }
.bouton-image[hidden] { display: none; }
.message-papa .clavier { width: min(36rem, 100%); }
.veille-douce { border: 0; font-size: clamp(1.4rem, 4vw, 2.2rem); color: var(--texte); z-index: 9; }

/* --- Tuiles : 2 × 2 en portrait, 4 en ligne en paysage --- */
.tuiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (orientation: landscape) and (min-width: 700px) {
  .tuiles { grid-template-columns: repeat(4, 1fr); }
}

.tuile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 132px;
  border: 4px solid transparent;
  border-radius: var(--rayon);
  background: var(--carte);
  box-shadow: var(--ombre);
  padding: 12px;
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.tuile .avatar { font-size: clamp(3rem, 9vw, 4.2rem); line-height: 1; }
.tuile .prenom { font-size: clamp(1.1rem, 3vw, 1.5rem); font-weight: 700; }
.tuile:active { transform: scale(0.97); }

.tuile.active { border-color: var(--accent); background: var(--accent-doux); }
.tuile.active.ecoute { animation: respire 2.4s ease-in-out infinite; }
.tuile.active.attente { border-color: var(--attente); }

/* Une fois la personne choisie : les tuiles se rangent sous le bord de l'écran (tiroir).
   Glisser vers le haut les fait remonter ; elles redescendent seules (voir app.js). */
.tuiles.cachees {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  background: var(--fond);
  border-radius: var(--rayon) var(--rayon) 0 0;
  box-shadow: 0 -8px 24px rgba(59, 47, 42, 0.16);
  transform: translateY(110%);
  transition: transform 0.35s ease;
}
.tuiles.cachees.ouvertes { transform: none; }

.poignee {
  position: fixed;
  left: 50%;
  bottom: calc(4px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: 96px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  z-index: 7;
}
.poignee[hidden] { display: none; }
.poignee span { display: block; width: 56px; height: 6px; margin: auto; border-radius: 3px; background: #d8ccc0; }
.principal.tiroir { padding-bottom: calc(36px + env(safe-area-inset-bottom)); }

@keyframes respire {
  0%, 100% { box-shadow: var(--ombre); }
  50% { box-shadow: 0 0 0 10px rgba(76, 154, 106, 0.18), var(--ombre); }
}

@media (prefers-reduced-motion: reduce) {
  .tuile.active.ecoute,
  .bouton-micro.ecoute { animation: none; }
  .tuiles.cachees { transition: none; }
}