/* ============================================================
   SOPHIA - l'habillage commun a toutes les pages
   Charte : sable, creme, or, un serif chaud pour les titres.
   ============================================================ */
:root{
  --sable:#faf6f0; --sable-fonce:#f2ebe1; --creme:#fffdfa;
  --encre:#2e2823; --encre-doux:#6b6158; --encre-pale:#9b9086;
  --or:#b98a4b; --or-clair:#e6d5bb; --or-pale:#f6efe4;
  --trait:#e8ddcd; --alerte:#8a4b39; --alerte-fond:#fdf3f0; --alerte-trait:#e9cfc5;
  --vert:#5f7a52;
  --ombre:0 1px 3px rgba(46,40,35,.06), 0 8px 24px rgba(46,40,35,.05);
  --ombre-forte:0 2px 6px rgba(46,40,35,.08), 0 18px 44px rgba(46,40,35,.10);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --rayon:16px;
  /* Hauteur de la barre d'onglets du bas. Zero sur ordinateur (elle n'existe
     pas), sa vraie hauteur sur telephone : tout ce qui doit rester visible
     au-dessus d'elle s'appuie sur cette mesure. */
  --barre-bas:0px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html{height:100%}
body{
  font-family:var(--sans); background:var(--sable); color:var(--encre);
  font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100%;
}
a{color:var(--or)}
img{max-width:100%}

/* ---------- La barre du haut ---------- */
.barre{
  display:flex; align-items:center; gap:1rem; padding:.7rem 1.1rem;
  background:var(--creme); border-bottom:1px solid var(--trait);
  position:sticky; top:0; z-index:30;
}
.marque{
  font-family:var(--serif); font-size:1.5rem; font-weight:400; letter-spacing:.05em;
  color:var(--encre); text-decoration:none; white-space:nowrap;
}
.marque .point{color:var(--or)}
.onglets{display:flex; gap:.25rem; margin-left:.6rem; flex:1; overflow:auto}
.onglets a{
  padding:.42rem .85rem; border-radius:999px; text-decoration:none;
  color:var(--encre-doux); font-size:.92rem; white-space:nowrap;
}
.onglets a:hover{background:var(--sable)}
.onglets a.ici{background:var(--or-pale); color:var(--encre)}
.moi{display:flex; align-items:center; gap:.55rem}
.pastille{
  width:34px; height:34px; border-radius:50%; flex:none;
  background:linear-gradient(145deg,var(--or-clair),var(--or)); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:1rem;
}
.serie{
  font-size:.8rem; color:var(--or); background:var(--or-pale);
  padding:.18rem .6rem; border-radius:999px; white-space:nowrap;
}
.lien-discret{color:var(--encre-pale); font-size:.85rem; text-decoration:none}
.lien-discret:hover{color:var(--encre-doux)}

/* ---------- Boutons ---------- */
button,.bouton{
  font-family:inherit; font-size:.98rem; border:none; cursor:pointer;
  border-radius:12px; padding:.8rem 1.4rem; background:var(--or); color:#fff;
  text-decoration:none; display:inline-block; text-align:center;
  transition:opacity .18s, background .18s;
}
button:hover,.bouton:hover{opacity:.9}
button:disabled{opacity:.45; cursor:not-allowed}
.bouton.creux{background:transparent; color:var(--or); border:1px solid var(--or-clair)}
.bouton.creux:hover{background:var(--or-pale); opacity:1}
.bouton.doux{background:var(--sable-fonce); color:var(--encre)}

/* ---------- Cartes et blocs ---------- */
.carte{
  background:var(--creme); border:1px solid var(--trait);
  border-radius:var(--rayon); box-shadow:var(--ombre); padding:1.5rem 1.6rem;
}
.centre{max-width:46rem; margin:0 auto; width:100%;
  padding:1.5rem 1.1rem calc(3rem + var(--barre-bas))}
.large{max-width:62rem}
.souci{
  color:var(--alerte); background:var(--alerte-fond); border:1px solid var(--alerte-trait);
  border-radius:10px; padding:.7rem 1rem; font-size:.92rem; margin:1rem 0;
}
.bonne-nouvelle{
  color:var(--vert); background:#f2f6ef; border:1px solid #dbe5d4;
  border-radius:10px; padding:.7rem 1rem; font-size:.92rem; margin:1rem 0;
}

/* ---------- Formulaires ---------- */
label{display:block; font-size:.88rem; color:var(--encre-doux); margin:0 0 .35rem}
input[type=text],input[type=email],input[type=date],input[type=number],select,textarea{
  width:100%; padding:.8rem 1rem; border:1px solid var(--trait); border-radius:12px;
  font-family:inherit; font-size:1rem; background:var(--sable); color:var(--encre);
  outline:none; transition:border-color .18s;
}
input:focus,select:focus,textarea:focus{border-color:var(--or)}
textarea{resize:vertical; line-height:1.6}
.champ{margin-bottom:1.1rem}
.aide{font-size:.85rem; color:var(--encre-pale); margin-top:.35rem}

/* ---------- L'accueil : l'enseignement du jour ---------- */
.bonjour{
  font-family:var(--serif); font-size:2.1rem; font-weight:400; letter-spacing:.02em;
  margin:.4rem 0 .2rem;
}
.date-du-jour{color:var(--encre-pale); font-size:.9rem; letter-spacing:.06em;
  text-transform:uppercase; margin-bottom:1.6rem}
.enseignement{
  background:var(--creme); border:1px solid var(--trait); border-left:3px solid var(--or);
  border-radius:6px var(--rayon) var(--rayon) 6px; box-shadow:var(--ombre);
  padding:1.7rem 1.8rem; margin-bottom:1.8rem;
}
.enseignement .etiquette{
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--or); margin-bottom:.7rem;
}
.enseignement h2{
  font-family:var(--serif); font-weight:400; font-size:1.6rem; line-height:1.3;
  margin-bottom:.9rem;
}
.enseignement p{margin-bottom:.9rem}
.enseignement p:last-child{margin-bottom:0}
.enseignement .invitation{
  margin-top:1.2rem; padding:.9rem 1.1rem; background:var(--or-pale);
  border-radius:10px; font-style:italic; color:#4a423a; font-size:.98rem;
}
.enseignement .origine{margin-top:1rem; font-size:.82rem; color:var(--encre-pale)}

/* ---------- Le chat ---------- */
/* La page du fil colle sa zone d'ecriture en bas : pas besoin du grand vide
   de fin de page des autres pages, juste la place de la barre d'onglets. */
main.fil{flex:1; display:flex; flex-direction:column; min-height:0;
  padding-bottom:var(--barre-bas)}
.echanges{display:flex; flex-direction:column; gap:1.4rem; margin-bottom:1.5rem}
.bulle{max-width:100%}
.bulle.moi-meme{align-self:flex-end; max-width:85%}
.bulle.moi-meme .texte{
  background:var(--or-pale); border:1px solid var(--or-clair);
  border-radius:16px 16px 4px 16px; padding:.75rem 1.1rem;
}
.bulle.elle .texte{
  background:var(--creme); border:1px solid var(--trait);
  border-radius:16px 16px 16px 4px; padding:1.1rem 1.3rem; box-shadow:var(--ombre);
}
.bulle .texte p{margin-bottom:.85rem}
.bulle .texte p:last-child{margin-bottom:0}
.sources{margin-top:.9rem; padding-top:.8rem; border-top:1px solid var(--trait);
  font-size:.82rem; color:var(--encre-pale)}
.sources b{font-weight:400; color:var(--encre-doux)}
.pointilles{display:inline-flex; gap:5px; padding:.5rem 0}
.pointilles span{
  width:7px; height:7px; border-radius:50%; background:var(--or-clair);
  animation:respire 1.3s ease-in-out infinite;
}
.pointilles span:nth-child(2){animation-delay:.18s}
.pointilles span:nth-child(3){animation-delay:.36s}
@keyframes respire{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

/* La zone d'ecriture reste toujours visible en bas de l'ecran, JUSTE AU-DESSUS
   de la barre d'onglets du telephone (bug du 07/09/2026 : le menu du bas la
   recouvrait completement). C'est le bloc entier qui colle, pas seulement le
   formulaire : sinon il n'a aucune marge de manoeuvre pour coller et reste
   plante en fin de page, sous le menu. */
.zone-saisie{
  position:sticky; bottom:var(--barre-bas); z-index:20; margin-top:auto;
  padding-top:1.1rem;
  /* Fond plein sous le champ, juste un fondu de 1.1rem en haut : sans ca, le
     texte qui defile se lit a travers la zone d'ecriture. */
  background:linear-gradient(to top,var(--sable) calc(100% - 1.1rem),transparent);
}
.saisie{
  padding:.6rem 0 .4rem; display:flex; gap:.6rem; align-items:flex-end;
}
.saisie textarea{
  flex:1; border-radius:18px; padding:.85rem 1.1rem; max-height:11rem;
  background:var(--creme); box-shadow:var(--ombre);
}
.saisie button{
  width:48px; height:48px; flex:none; border-radius:50%; padding:0;
  font-size:1.15rem; line-height:1;
}
.reste{font-size:.82rem; color:var(--encre-pale); text-align:center; padding:.5rem 0 .2rem}
.reste b{color:var(--or); font-weight:400}

/* ---------- Le panneau des conversations ---------- */
.voile{
  position:fixed; inset:0; background:rgba(46,40,35,.32); opacity:0; pointer-events:none;
  transition:opacity .22s; z-index:38;
}
.voile.vu{opacity:1; pointer-events:auto}
.panneau{
  position:fixed; top:0; left:0; bottom:0; width:19rem; max-width:86vw; z-index:39;
  background:var(--creme); border-right:1px solid var(--trait);
  transform:translateX(-101%); transition:transform .24s ease; display:flex; flex-direction:column;
}
.panneau.vu{transform:none}
.panneau .entete{padding:1.1rem 1.1rem .8rem; border-bottom:1px solid var(--trait)}
.panneau .entete h2{font-family:var(--serif); font-weight:400; font-size:1.2rem}
.panneau ul{list-style:none; overflow:auto; flex:1; padding:.5rem}
.panneau li{
  display:flex; align-items:center; gap:.4rem; padding:.6rem .7rem; border-radius:10px;
  cursor:pointer; font-size:.9rem; color:var(--encre-doux);
}
.panneau li:hover{background:var(--sable)}
.panneau li.active{background:var(--or-pale); color:var(--encre)}
.panneau li .titre{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.panneau li .jeter{
  opacity:0; border:none; background:none; color:var(--encre-pale); cursor:pointer;
  padding:.1rem .3rem; font-size:1rem; border-radius:6px;
}
.panneau li:hover .jeter{opacity:1}
.panneau li .jeter:hover{color:var(--alerte); background:var(--alerte-fond)}
.panneau .bas{padding:.9rem 1.1rem; border-top:1px solid var(--trait)}

/* ---------- La page enseignements ---------- */
.famille{margin-bottom:2.4rem}
.famille h2{
  font-family:var(--serif); font-weight:400; font-size:1.5rem; margin-bottom:.3rem;
}
.famille .sous{color:var(--encre-pale); font-size:.9rem; margin-bottom:1.1rem}
.audio{
  display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem; background:var(--creme);
  border:1px solid var(--trait); border-radius:var(--rayon); margin-bottom:.7rem;
  transition:box-shadow .18s;
}
.audio:hover{box-shadow:var(--ombre)}
.audio .rond{
  width:44px; height:44px; flex:none; border-radius:50%; background:var(--or-pale);
  color:var(--or); display:flex; align-items:center; justify-content:center; font-size:1.05rem;
}
.audio .quoi{flex:1; min-width:0}
.audio .quoi h3{font-size:1rem; font-weight:600; line-height:1.35; margin-bottom:.15rem}
.audio .quoi p{font-size:.86rem; color:var(--encre-pale); overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.audio .duree{font-size:.82rem; color:var(--encre-pale); flex:none}
.audio.ferme{opacity:.62; background:var(--sable-fonce)}
.audio.ferme .rond{background:var(--sable); color:var(--encre-pale)}
.audio audio{width:100%; margin-top:.7rem}
.ouvre-audio{width:100%}
.cadenas{
  font-size:.78rem; color:var(--or); background:var(--or-pale); border-radius:999px;
  padding:.2rem .65rem; white-space:nowrap; flex:none;
}

/* ---------- L'invitation a passer au complet ---------- */
.offre{
  background:linear-gradient(160deg,#fffdfa,#f7efe3);
  border:1px solid var(--or-clair); border-radius:var(--rayon);
  padding:1.6rem 1.7rem; margin:2rem 0; box-shadow:var(--ombre);
}
.offre h2{font-family:var(--serif); font-weight:400; font-size:1.45rem; margin-bottom:.6rem}
.offre ul{list-style:none; margin:1rem 0 1.3rem}
.offre li{padding-left:1.6rem; position:relative; margin-bottom:.5rem; font-size:.96rem}
.offre li:before{content:"·"; position:absolute; left:.45rem; color:var(--or); font-size:1.6rem;
  line-height:1; top:-.05rem}

/* ---------- Tableaux (admin) ---------- */
table.propre{width:100%; border-collapse:collapse; font-size:.9rem}
table.propre th{
  text-align:left; font-weight:600; color:var(--encre-doux); font-size:.8rem;
  text-transform:uppercase; letter-spacing:.05em; padding:.6rem .7rem;
  border-bottom:1px solid var(--trait);
}
table.propre td{padding:.6rem .7rem; border-bottom:1px solid var(--sable-fonce)}
table.propre tr:hover td{background:var(--sable)}
.chiffres{display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:.8rem;
  margin-bottom:1.6rem}
.chiffre{background:var(--creme); border:1px solid var(--trait); border-radius:12px;
  padding:1rem 1.1rem}
.chiffre .valeur{font-family:var(--serif); font-size:1.9rem; line-height:1.1}
.chiffre .quoi{font-size:.8rem; color:var(--encre-pale); margin-top:.2rem}

/* ---------- Petits ecrans ---------- */
@media (max-width:600px){
  body{font-size:17px}
  .bonjour{font-size:1.7rem}
  .enseignement{padding:1.3rem 1.2rem}
  .centre{padding:1.1rem .9rem calc(2.5rem + var(--barre-bas))}
  .barre{gap:.5rem; padding:.6rem .8rem}
  .marque{font-size:1.15rem}
  .onglets{margin-left:.1rem; gap:.1rem; scrollbar-width:none}
  .onglets::-webkit-scrollbar{display:none}
  .onglets a{padding:.35rem .6rem; font-size:.83rem}
  .moi{gap:.35rem}
  .pastille{width:30px; height:30px; font-size:.9rem}
  .serie{font-size:.72rem; padding:.15rem .45rem}
}
/* Tres petits telephones : la marque cede la place aux onglets. */
@media (max-width:380px){
  .marque{font-size:1rem; letter-spacing:.02em}
  .onglets a{padding:.35rem .5rem; font-size:.8rem}
}

/* ---------- Grand ecran : le panneau reste ouvert ---------- */
@media (min-width:1100px){
  body.avec-panneau{padding-left:19rem}
  body.avec-panneau .panneau{transform:none; box-shadow:none}
  body.avec-panneau .voile{display:none}
  body.avec-panneau .ouvrir-liste{display:none}
  body.avec-panneau .barre{padding-left:1.4rem}
}

/* ============================================================
   La barre du bas : sur telephone, les 4 onglets passent sous le pouce,
   comme dans une vraie application. Sur ordinateur elle disparait.
   ============================================================ */
.barre-bas{display:none}
@media (max-width:820px){
  .barre .onglets{display:none}
  /* Hauteur FIXE et connue : c'est elle qui sert a decaler tout ce qui ne doit
     pas passer dessous (la zone d'ecriture, le bas des pages). Si on la change
     ici, tout le reste suit tout seul. */
  :root{--barre-bas:calc(3.9rem + env(safe-area-inset-bottom))}
  .barre-bas{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40;
    height:var(--barre-bas); align-items:center;
    background:var(--creme); border-top:1px solid var(--trait);
    padding:.3rem .2rem calc(.3rem + env(safe-area-inset-bottom));
    box-shadow:0 -2px 14px rgba(46,40,35,.06);
  }
  .barre-bas a{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:.1rem;
    padding:.4rem .15rem; text-decoration:none; color:var(--encre-pale);
    font-size:.66rem; line-height:1.15; text-align:center; border-radius:12px;
  }
  .barre-bas a .icone{font-size:1.25rem; line-height:1.1}
  .barre-bas a.ici{color:var(--or)}
  .barre-bas a.ici .icone{transform:translateY(-1px)}
}

/* ---------- L'accueil : les cartes qui mènent quelque part ---------- */
.pave{
  display:block; text-decoration:none; color:inherit; background:var(--creme);
  border:1px solid var(--trait); border-radius:var(--rayon); padding:1.3rem 1.4rem;
  margin-bottom:.9rem; box-shadow:var(--ombre); transition:transform .16s, box-shadow .16s;
}
.pave:hover{transform:translateY(-1px); box-shadow:var(--ombre-forte)}
.pave .oeil{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--or); display:block; margin-bottom:.45rem}
.pave h2{font-family:var(--serif); font-weight:400; font-size:1.35rem; line-height:1.3;
  margin-bottom:.4rem}
.pave p{color:var(--encre-doux); font-size:.95rem}
.pave .fleche{color:var(--or); font-size:.9rem; margin-top:.7rem; display:inline-block}
.pave.mis-en-avant{border-left:3px solid var(--or); border-radius:6px var(--rayon) var(--rayon) 6px}

/* ============================================================
   La zone de question de l'accueil (03/09/2026)
   L'application tourne autour de la coach : c'est le plus gros bloc de la page.
   ============================================================ */
.demande{
  background:var(--creme); border:1px solid var(--or-clair); border-radius:var(--rayon);
  padding:1.6rem 1.5rem; box-shadow:var(--ombre-forte); margin-bottom:2rem;
}
.demande .oeil{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--or); display:block; margin-bottom:.5rem}
.demande h2{font-family:var(--serif); font-weight:400; font-size:1.65rem; line-height:1.25;
  margin-bottom:.5rem}
.demande .dit{color:var(--encre-doux); font-size:.95rem}
.demande form{margin-top:1.1rem}
.demande textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--encre); background:var(--sable);
  border:1px solid var(--trait); border-radius:12px; padding:.85rem .95rem; resize:vertical;
  line-height:1.55;
}
.demande textarea:focus{outline:none; border-color:var(--or-clair); background:#fff}
.demande button{
  width:100%; margin-top:.7rem; padding:.9rem; font-size:1.02rem; border:0; cursor:pointer;
  border-radius:999px; background:var(--or); color:#fff; font-family:inherit;
}
.demande button:hover{opacity:.92}
.suggestions{display:flex; flex-wrap:wrap; gap:.5rem}
.suggestions a{
  display:inline-block; padding:.45rem .85rem; border-radius:999px; text-decoration:none;
  background:var(--or-pale); color:var(--encre-doux); font-size:.88rem; line-height:1.35;
  border:1px solid transparent;
}
.suggestions a:hover{border-color:var(--or-clair); color:var(--encre)}
.reste-doux{margin-top:1.1rem; font-size:.86rem; color:var(--encre-pale)}
.reste-doux a{color:var(--or); text-decoration:none; border-bottom:1px solid var(--or-clair)}

.oeil-section{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--encre-pale); margin:0 0 .8rem .2rem}
.duo{display:grid; grid-template-columns:1fr 1fr; gap:.9rem}
.duo .pave{margin:0}
@media (max-width:600px){ .duo{grid-template-columns:1fr} }