/* =====================================================================
   ALLOU : application (app.allou.eu)
   Palette : crème #FFF4EA, corail #F07A5F, prune #3A2A33, turquoise #2FA39A
   et uniquement des nuances obtenues en les mélangeant.
   ===================================================================== */
:root {
  --creme: #FFF4EA;
  --creme-clair: #FFFBF7;        /* crème éclairci, fond des cartes */
  --creme-fonce: #F6E4D6;        /* crème + un peu de prune */
  --corail: #F07A5F;
  --corail-doux: #F9C9B9;        /* corail + crème */
  --corail-fonce: #A75A4D;       /* corail + prune : texte d'erreur lisible */
  --prune: #3A2A33;
  --prune-doux: #6E5F63;         /* prune + crème : texte secondaire */
  --turquoise: #2FA39A;
  --turquoise-doux: #CBE7E1;     /* turquoise + crème */
  --turquoise-fonce: #337371;    /* turquoise + prune : liens lisibles */
  --ombre: 0 6px 24px rgba(58, 42, 51, .08);
  --rayon: 24px;
  --titre: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --texte: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--prune);
  font-family: var(--texte);
  font-size: 18px;
  line-height: 1.5;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
}
h1, h2, h3 { font-family: var(--titre); font-weight: 700; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.15rem; font-weight: 500; }
p { margin: 0 0 1em; }
a { color: var(--turquoise-fonce); font-weight: 700; }
img { max-width: 100%; }
[hidden] { display: none !important; }

.evitement { position: absolute; left: -999px; top: 8px; background: var(--prune); color: var(--creme); padding: 8px 14px; border-radius: 12px; z-index: 50; }
.evitement:focus { left: 8px; }

:focus-visible { outline: 3px solid var(--turquoise-fonce); outline-offset: 3px; border-radius: 8px; }

/* ---------- En-tête ---------- */
.entete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  max-width: 640px; margin: 0 auto;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--prune); }
.logo-texte { display: flex; flex-direction: column; line-height: 1.05; }
.logo-nom { font-family: var(--titre); font-weight: 700; font-size: 1.6rem; color: var(--corail); }
.logo-signature { font-size: .8rem; color: var(--prune-doux); font-weight: 700; }
.avatar-lien { text-decoration: none; display: block; border-radius: 50%; }

/* ---------- Mise en page ---------- */
.vue { max-width: 640px; margin: 0 auto; padding: 8px 16px 48px; outline: none; }
.pile > * + * { margin-top: 16px; }
.carte {
  background: var(--creme-clair); border-radius: var(--rayon); padding: 22px 20px;
  box-shadow: var(--ombre);
}
.carte.douce { background: var(--creme-fonce); box-shadow: none; }
.carte.turquoise { background: var(--turquoise-doux); box-shadow: none; }
.intro { color: var(--prune-doux); }
.petit-texte { font-size: .9rem; color: var(--prune-doux); }
.centre { text-align: center; }
.ligne { display: flex; align-items: center; gap: 12px; }
.ligne.espace { justify-content: space-between; }
.grandit { flex: 1; min-width: 0; }
.separateur { border: 0; border-top: 2px dashed var(--creme-fonce); margin: 20px 0; }
.retour { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; margin-bottom: 8px; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 12px 26px; border-radius: 999px; border: 0;
  background: var(--corail); color: var(--prune);
  font-family: var(--titre); font-weight: 500; font-size: 1.15rem;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: transform .15s ease, background .15s ease;
}
.bouton:hover { background: #F38C74; }
.bouton:active { transform: scale(.97); }
.bouton[disabled] { opacity: .55; cursor: not-allowed; }
.bouton.plein { width: 100%; }
.bouton.secondaire { background: transparent; color: var(--prune); box-shadow: inset 0 0 0 2px var(--prune); }
.bouton.secondaire:hover { background: var(--creme-fonce); }
.bouton.turquoise { background: var(--turquoise); color: var(--prune); }
.bouton.danger { background: transparent; color: var(--corail-fonce); box-shadow: inset 0 0 0 2px var(--corail-fonce); }
.bouton.danger.confirme { background: var(--corail-fonce); color: var(--creme); }
.bouton.lien { background: none; color: var(--turquoise-fonce); min-height: 44px; padding: 8px 4px; text-decoration: underline; font-family: var(--texte); font-weight: 700; font-size: 1rem; }
.bouton.petit { min-height: 44px; padding: 8px 18px; font-size: 1rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.actions.colonne { flex-direction: column; }

/* ---------- Formulaires ---------- */
label { display: block; font-weight: 700; margin-bottom: 6px; }
.champ { margin-bottom: 18px; }
.aide { display: block; font-size: .9rem; color: var(--prune-doux); font-weight: 400; margin-top: 4px; }
input[type=text], input[type=email], input[type=tel], input[type=time], select, .saisie {
  width: 100%; min-height: 56px; padding: 12px 16px;
  font: inherit; color: var(--prune);
  background: var(--creme); border: 2px solid var(--creme-fonce); border-radius: 16px;
}
input:focus, select:focus { border-color: var(--turquoise); outline: none; box-shadow: 0 0 0 3px var(--turquoise-doux); }
.saisie-code { font-family: var(--titre); font-size: 1.6rem; letter-spacing: .18em; text-transform: uppercase; text-align: center; }
.saisie-otp { font-family: var(--titre); font-size: 2rem; letter-spacing: .35em; text-align: center; }
input[type=range] { width: 100%; accent-color: var(--corail); height: 40px; }
input[type=checkbox], input[type=radio] { width: 24px; height: 24px; accent-color: var(--turquoise-fonce); flex-shrink: 0; }
.choix { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--creme); margin-bottom: 8px; font-weight: 400; cursor: pointer; }
.choix strong { display: block; }
.erreur { color: var(--corail-fonce); font-weight: 700; }
.message-ok { color: var(--turquoise-fonce); font-weight: 700; }
.reglage { margin-bottom: 18px; }
.reglage .ligne { justify-content: space-between; }
.valeur { font-family: var(--titre); color: var(--turquoise-fonce); }
.interrupteur { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; min-height: 48px; }

/* ---------- Grandes cartes de choix ---------- */
.grand-choix {
  display: flex; align-items: center; gap: 16px; width: 100%;
  background: var(--creme-clair); border-radius: var(--rayon); padding: 22px 20px; box-shadow: var(--ombre);
  text-decoration: none; color: var(--prune); border: 0; font: inherit; text-align: left; cursor: pointer;
}
.grand-choix:hover { background: #fff; }
.grand-choix .titre { font-family: var(--titre); font-weight: 700; font-size: 1.25rem; display: block; }
.grand-choix .sous { color: var(--prune-doux); display: block; }
.grand-choix svg { flex-shrink: 0; }

/* ---------- Avatars et pastilles ---------- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  background: var(--turquoise-doux); color: var(--prune);
  font-family: var(--titre); font-weight: 700; font-size: 1.3rem;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.petit { width: 44px; height: 44px; font-size: 1.1rem; }
.avatar.grand { width: 96px; height: 96px; font-size: 2.2rem; }
.pastille-bouton { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 -3px 0 rgba(58, 42, 51, .18); }
.etiquette { display: inline-block; padding: 2px 12px; border-radius: 999px; font-size: .85rem; font-weight: 700; background: var(--creme-fonce); }
.etiquette.en-ligne { background: var(--turquoise-doux); color: var(--turquoise-fonce); }
.etiquette.hors-ligne { background: var(--creme-fonce); color: var(--prune-doux); }
.etiquette.alerte { background: var(--corail-doux); color: var(--prune); }
.compteur { display: inline-flex; min-width: 28px; height: 28px; padding: 0 8px; align-items: center; justify-content: center; border-radius: 999px; background: var(--corail); color: var(--prune); font-weight: 700; font-size: .9rem; }

/* ---------- Listes ---------- */
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 2px solid var(--creme-fonce); }
.liste > li:last-child { border-bottom: 0; }
.liste .nom { font-weight: 700; display: block; }
.liste .detail { color: var(--prune-doux); font-size: .95rem; display: block; }
.carte-lien { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--prune); }

/* ---------- Étapes (assistant) ---------- */
.etapes { display: flex; gap: 8px; margin-bottom: 16px; }
.etapes span { flex: 1; height: 8px; border-radius: 99px; background: var(--creme-fonce); }
.etapes span.faite { background: var(--turquoise); }
.consignes { padding-left: 0; list-style: none; counter-reset: c; }
.consignes li { counter-increment: c; position: relative; padding-left: 52px; margin-bottom: 16px; min-height: 40px; }
.consignes li::before {
  content: counter(c); position: absolute; left: 0; top: -2px; width: 38px; height: 38px; border-radius: 50%;
  background: var(--corail-doux); font-family: var(--titre); font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.illustration { display: block; margin: 0 auto 16px; max-width: 240px; }

/* ---------- Conversation ---------- */
.fil { display: flex; flex-direction: column; gap: 12px; padding-bottom: 210px; }
.bulle {
  max-width: 85%; padding: 12px 14px; border-radius: 22px; background: var(--creme-clair); box-shadow: var(--ombre);
  display: flex; align-items: center; gap: 12px;
}
.bulle.moi { align-self: flex-end; background: var(--turquoise-doux); box-shadow: none; border-bottom-right-radius: 8px; }
.bulle.enfant { align-self: flex-start; border-bottom-left-radius: 8px; border-left: 6px solid var(--couleur, var(--corail)); }
.bulle .quand { font-size: .85rem; color: var(--prune-doux); display: block; }
.bulle.nouveau { box-shadow: 0 0 0 3px var(--corail); }
.lecture {
  width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--prune); color: var(--creme);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.lecture.joue { background: var(--turquoise-fonce); }
.jour { align-self: center; font-size: .85rem; color: var(--prune-doux); font-weight: 700; }

.zone-parler {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: linear-gradient(to top, var(--creme) 75%, rgba(255, 244, 234, 0));
  padding: 24px 16px calc(18px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.parler {
  width: 132px; height: 132px; border-radius: 50%; border: 10px solid var(--turquoise);
  background: var(--couleur, var(--corail)); color: var(--prune); cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  font-family: var(--titre); font-weight: 700; font-size: 1rem;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  box-shadow: 0 10px 30px rgba(58, 42, 51, .18);
  transition: transform .15s ease;
}
.parler:active { transform: scale(.96); }
.parler.enregistre { animation: respire 1.2s ease-in-out infinite; border-color: var(--corail); }
.parler.envoi { opacity: .7; }
.consigne-parler { font-weight: 700; text-align: center; min-height: 1.5em; }
@keyframes respire { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 122, 95, .55); } 50% { box-shadow: 0 0 0 22px rgba(240, 122, 95, 0); } }

/* ---------- Divers ---------- */
.chargement { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 60px 0; color: var(--prune-doux); font-weight: 700; }
.rond-attente { width: 28px; height: 28px; border-radius: 50%; border: 4px solid var(--creme-fonce); border-top-color: var(--corail); animation: tourne 1s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.toasts { position: fixed; left: 50%; transform: translateX(-50%); top: calc(12px + env(safe-area-inset-top)); z-index: 40; display: flex; flex-direction: column; gap: 8px; width: min(92vw, 480px); pointer-events: none; }
.toast { background: var(--prune); color: var(--creme); padding: 14px 18px; border-radius: 18px; font-weight: 700; box-shadow: var(--ombre); }
.toast.erreur { background: var(--corail-fonce); color: var(--creme); }
.lien-copie { word-break: break-all; background: var(--creme); padding: 10px 14px; border-radius: 12px; font-size: .9rem; }

.feuille-fond { position: fixed; inset: 0; background: rgba(58, 42, 51, .45); z-index: 30; display: flex; align-items: flex-end; justify-content: center; }
.feuille { background: var(--creme); width: 100%; max-width: 560px; border-radius: 28px 28px 0 0; padding: 26px 20px calc(24px + env(safe-area-inset-bottom)); max-height: 92vh; overflow: auto; }
.feuille video { width: 100%; border-radius: 18px; background: var(--prune); aspect-ratio: 1; object-fit: cover; }
.icone-partage { display: inline-block; vertical-align: middle; }

@media (min-width: 720px) {
  .feuille-fond { align-items: center; }
  .feuille { border-radius: 28px; }
  h1 { font-size: 2rem; }
}

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