/* =====================================================================
   SALAM — Santé À La Maison
   Système visuel : chaleur du foyer + rigueur médicale
   Palette Précieux Care : orange #FF6000/#FF914D · teal #055F60/#0B8C8F
   Display : Khand · Texte : Inter
   ===================================================================== */
:root{
  --orange:#FF6000; --orange-clair:#FF914D;
  --teal:#055F60;  --teal-clair:#0B8C8F;
  --encre:#0E2A2B;            /* texte sombre teinté teal */
  --gris:#5B6B6B; --gris-clair:#8FA0A0;
  --fond:#FBF7F2;             /* crème chaude "maison" */
  --carte:#FFFFFF;
  --ligne:#ECE3D8;
  --succes:#1F9D55; --alerte:#E2A400; --danger:#D64545;
  --ombre:0 10px 30px -12px rgba(5,95,96,.25);
  --ombre-douce:0 4px 14px -6px rgba(5,95,96,.18);
  --rayon:18px; --rayon-sm:12px;
  --max:1140px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--encre); background:var(--fond);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.font-display{font-family:'Khand',sans-serif;font-weight:600;line-height:1.1;letter-spacing:.3px}
a{color:var(--teal);text-decoration:none}
img{max-width:100%}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}
.text-orange{color:var(--orange)} .text-teal{color:var(--teal)}
.muted{color:var(--gris)}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;border:none;cursor:pointer;
  font-family:'Khand',sans-serif;font-size:1.05rem;font-weight:600;letter-spacing:.4px;
  padding:.7rem 1.5rem;border-radius:100px;transition:.18s transform,.18s box-shadow;text-transform:uppercase}
.btn:hover{transform:translateY(-2px)}
.btn-orange{background:linear-gradient(135deg,var(--orange),var(--orange-clair));color:#fff;box-shadow:0 8px 20px -8px var(--orange)}
.btn-teal{background:linear-gradient(135deg,var(--teal),var(--teal-clair));color:#fff;box-shadow:0 8px 20px -8px var(--teal)}
.btn-ghost{background:transparent;border:2px solid var(--ligne);color:var(--encre)}
.btn-ghost:hover{border-color:var(--teal)}
.btn-block{display:flex;width:100%;justify-content:center}
.btn-sm{padding:.45rem 1rem;font-size:.9rem}

/* ---------- En-tête ---------- */
.topbar{position:sticky;top:0;z-index:40;background:rgba(251,247,242,.85);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--ligne)}
.topbar .inner{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:.6rem;font-family:'Khand';font-size:1.5rem;font-weight:700;color:var(--encre)}
.brand small{font-family:'Inter';font-size:.62rem;letter-spacing:2px;text-transform:uppercase;color:var(--orange);display:block;margin-top:-4px}
.nav-links{display:flex;align-items:center;gap:1.2rem}
.nav-links a{font-weight:500;color:var(--encre)}
.lang-switch a{font-size:.8rem;padding:.2rem .5rem;border:1px solid var(--ligne);border-radius:6px}
.lang-switch a.actif{background:var(--teal);color:#fff;border-color:var(--teal)}

/* ---------- Écran de lancement (splash) ---------- */
#splash{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;
  align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,#0B8C8F,#055F60 60%,#033b3c);
  transition:opacity .7s ease,visibility .7s}
#splash.parti{opacity:0;visibility:hidden}
#splash .halo{position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,145,77,.35),transparent 60%);animation:pulse 3s ease-in-out infinite}
#splash .logo-anim{transform:scale(.6);opacity:0;animation:apparition .9s .2s forwards}
#splash .slogan{color:#fff;font-family:'Khand';font-size:1.4rem;letter-spacing:3px;margin-top:1rem;
  opacity:0;animation:apparition .8s .8s forwards;text-transform:uppercase}
#splash .barre{width:160px;height:4px;background:rgba(255,255,255,.2);border-radius:4px;margin-top:1.6rem;overflow:hidden;opacity:0;animation:apparition .5s 1s forwards}
#splash .barre i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange-clair),#fff);animation:charge 1.8s 1s forwards}
@keyframes apparition{to{opacity:1;transform:scale(1)}}
@keyframes charge{to{width:100%}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.12);opacity:1}}

/* ---------- Héros ---------- */
.hero{position:relative;padding:4rem 0 3rem;overflow:hidden}
.hero .eyebrow{display:inline-block;font-family:'Khand';letter-spacing:3px;text-transform:uppercase;
  color:var(--orange);font-weight:600;background:#fff;padding:.3rem .9rem;border-radius:100px;box-shadow:var(--ombre-douce);font-size:.85rem}
.hero h1{font-size:clamp(2.4rem,6vw,4.2rem);margin:1.2rem 0 .8rem;max-width:14ch}
.hero p.lead{font-size:1.15rem;max-width:46ch;color:var(--gris)}
.hero .cta{display:flex;gap:1rem;margin-top:1.8rem;flex-wrap:wrap}
.hero-art{position:absolute;right:-40px;top:50%;transform:translateY(-50%);width:46%;max-width:520px;opacity:.95}
@media(max-width:900px){.hero-art{position:static;width:80%;margin:2rem auto 0;transform:none;display:block}}

/* ---------- Cartes & grilles ---------- */
.grid{display:grid;gap:1.4rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{background:var(--carte);border-radius:var(--rayon);box-shadow:var(--ombre-douce);
  padding:1.5rem;border:1px solid var(--ligne);transition:.2s transform,.2s box-shadow}
.card:hover{transform:translateY(-4px);box-shadow:var(--ombre)}
.card .ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--teal),var(--teal-clair));color:#fff;font-size:1.4rem;margin-bottom:1rem}

/* Carte module */
.module-card{position:relative;display:flex;flex-direction:column}
.module-card .badge-cat{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;
  color:var(--teal);margin-bottom:.4rem}
.module-card.verrou{opacity:.6}
.module-card .verrou-ico{position:absolute;top:1rem;right:1rem;color:var(--gris-clair)}
.module-card .meta{display:flex;gap:1rem;font-size:.82rem;color:var(--gris);margin-top:auto;padding-top:1rem}
.tag-reussi{background:var(--succes);color:#fff;font-size:.72rem;padding:.15rem .55rem;border-radius:100px;font-weight:600}

/* ---------- Barre de progression ---------- */
.progress{height:10px;background:var(--ligne);border-radius:100px;overflow:hidden}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--orange),var(--orange-clair));border-radius:100px;transition:width .6s}

/* ---------- Carte virtuelle de membre ---------- */
.vcard{background:linear-gradient(135deg,var(--teal),var(--teal-clair));color:#fff;border-radius:22px;
  padding:1.6rem;position:relative;overflow:hidden;box-shadow:var(--ombre)}
.vcard::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,145,77,.25)}
.vcard h3{font-size:1.7rem} .vcard .num{font-family:'Khand';letter-spacing:2px;font-size:1.1rem}
.vcard .qr{background:#fff;padding:8px;border-radius:12px;display:inline-block}
.vcard .exp{font-size:.85rem;opacity:.9;margin-top:.6rem}

/* ---------- Contenu de cours ---------- */
.lecon{background:var(--carte);border-radius:var(--rayon);padding:2rem;box-shadow:var(--ombre-douce);border:1px solid var(--ligne)}
.lecon h2{color:var(--teal);margin:1.6rem 0 .6rem;font-size:1.6rem}
.lecon h3{color:var(--orange);margin:1.2rem 0 .4rem;font-size:1.25rem}
.lecon p{margin:.6rem 0}
.lecon ul,.lecon ol{margin:.6rem 0 .6rem 1.3rem}
.lecon li{margin:.3rem 0}
.encadre{border-left:4px solid var(--orange);background:#fff6ef;padding:1rem 1.2rem;border-radius:0 12px 12px 0;margin:1rem 0}
.encadre.urgent{border-color:var(--danger);background:#fdecec}
.encadre.astuce{border-color:var(--teal);background:#eef6f6}
.encadre b{display:block;margin-bottom:.2rem;font-family:'Khand';letter-spacing:.5px;text-transform:uppercase;font-size:.85rem}

/* ---------- Quiz ---------- */
.quiz .q{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--rayon-sm);padding:1.2rem;margin-bottom:1rem}
.quiz .q p.enonce{font-weight:600;margin-bottom:.8rem}
.quiz label{display:flex;gap:.6rem;align-items:flex-start;padding:.6rem .8rem;border:1px solid var(--ligne);
  border-radius:10px;margin-bottom:.5rem;cursor:pointer;transition:.15s}
.quiz label:hover{border-color:var(--teal-clair);background:#f7fbfb}
.quiz .correction{margin-top:.6rem;font-size:.9rem;padding:.6rem .8rem;border-radius:8px}
.quiz .correction.ok{background:#e8f6ee;color:#0c6b34} .quiz .correction.ko{background:#fdecec;color:#a12727}

/* ---------- Auth ---------- */
.auth-wrap{min-height:calc(100vh - 66px);display:grid;place-items:center;padding:2rem}
.auth-box{width:100%;max-width:440px;background:var(--carte);border-radius:var(--rayon);
  box-shadow:var(--ombre);padding:2.2rem;border:1px solid var(--ligne)}
.field{margin-bottom:1rem}
.field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.35rem;color:var(--encre)}
.field input,.field select,.field textarea{width:100%;padding:.75rem .9rem;border:1px solid var(--ligne);
  border-radius:10px;font:inherit;background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--teal-clair);border-color:transparent}

/* ---------- Alertes ---------- */
.alert{padding:.9rem 1.1rem;border-radius:10px;margin-bottom:1rem;font-size:.92rem}
.alert-ok{background:#e8f6ee;color:#0c6b34;border:1px solid #bfe6cd}
.alert-err{background:#fdecec;color:#a12727;border:1px solid #f4c9c9}
.alert-info{background:#eef6f6;color:var(--teal);border:1px solid #c8e3e3}

/* ---------- Tableaux admin ---------- */
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--rayon-sm);overflow:hidden;box-shadow:var(--ombre-douce)}
.table th,.table td{padding:.75rem .9rem;text-align:left;border-bottom:1px solid var(--ligne);font-size:.9rem}
.table th{background:var(--teal);color:#fff;font-family:'Khand';letter-spacing:.5px;text-transform:uppercase;font-size:.82rem}
.table tr:hover td{background:#f9f6f1}
.pill{font-size:.72rem;padding:.2rem .6rem;border-radius:100px;font-weight:600}
.pill.actif{background:#e8f6ee;color:#0c6b34} .pill.en_attente{background:#fff5e0;color:#946400}
.pill.suspendu,.pill.expire,.pill.rejete{background:#fdecec;color:#a12727} .pill.valide{background:#e8f6ee;color:#0c6b34}

/* ---------- Stats ---------- */
.stat{background:var(--carte);border-radius:var(--rayon-sm);padding:1.2rem;border:1px solid var(--ligne)}
.stat .n{font-family:'Khand';font-size:2.2rem;color:var(--orange);line-height:1}
.stat .l{font-size:.82rem;color:var(--gris);text-transform:uppercase;letter-spacing:1px}

/* ---------- Admin layout ---------- */
.admin{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.admin aside{background:var(--encre);color:#cfe0e0;padding:1.4rem 1rem}
.admin aside .brand{color:#fff;margin-bottom:1.5rem}
.admin aside a{display:flex;gap:.6rem;align-items:center;color:#cfe0e0;padding:.6rem .8rem;border-radius:8px;margin-bottom:.2rem}
.admin aside a:hover,.admin aside a.actif{background:rgba(255,255,255,.08);color:#fff}
.admin main{padding:1.8rem 2rem}
@media(max-width:820px){.admin{grid-template-columns:1fr}.admin aside{display:flex;flex-wrap:wrap;gap:.3rem}}

/* ---------- Navigation mobile basse (PWA feel) ---------- */
.bottom-nav{display:none}
@media(max-width:760px){
  .nav-links .desktop{display:none}
  .bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:50;background:#fff;
    border-top:1px solid var(--ligne);justify-content:space-around;padding:.4rem 0;box-shadow:0 -4px 14px -8px rgba(0,0,0,.2)}
  .bottom-nav a{display:flex;flex-direction:column;align-items:center;font-size:.68rem;color:var(--gris);gap:2px}
  .bottom-nav a.actif{color:var(--orange)}
  .bottom-nav a i{font-size:1.2rem}
  body{padding-bottom:64px}
}

/* ---------- Pied de page ---------- */
footer{background:var(--encre);color:#bcd1d1;padding:2.5rem 0 1.4rem;margin-top:3rem}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}
@media(max-width:680px){footer .cols{grid-template-columns:1fr}}
footer a{color:#bcd1d1} footer h4{color:#fff;margin-bottom:.6rem}
footer .copy{border-top:1px solid rgba(255,255,255,.1);margin-top:1.6rem;padding-top:1rem;font-size:.82rem;text-align:center}

.section{padding:3rem 0}
.section-title{text-align:center;margin-bottom:2rem}
.section-title h2{font-size:2.2rem;color:var(--encre)}
.section-title p{color:var(--gris);max-width:50ch;margin:.4rem auto 0}

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

/* ====================================================================== */
/*  MOBILE SOPHISTIQUÉ — hamburger, tiroir off-canvas, barre basse, PWA   */
/* ====================================================================== */

/* Bouton hamburger (mobile uniquement) */
.hamburger{display:none;width:44px;height:44px;border:none;background:transparent;cursor:pointer;
  border-radius:12px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.hamburger:active{background:rgba(5,95,96,.06)}
.hamburger span{display:block;width:22px;height:2.5px;border-radius:3px;background:var(--encre);
  transition:transform .3s ease,opacity .2s ease}
body.drawer-open .hamburger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
body.drawer-open .hamburger span:nth-child(2){opacity:0}
body.drawer-open .hamburger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* Voile (backdrop) commun tiroir + feuilles */
.voile{position:fixed;inset:0;z-index:60;background:rgba(14,42,43,.5);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;backdrop-filter:blur(2px)}
.voile.actif{opacity:1;visibility:visible}

/* Tiroir off-canvas (droite) */
.tiroir{position:fixed;top:0;right:0;bottom:0;z-index:70;width:min(87vw,360px);
  background:var(--fond);box-shadow:-18px 0 50px -20px rgba(5,95,96,.45);
  transform:translateX(102%);transition:transform .34s cubic-bezier(.22,.61,.36,1);
  display:flex;flex-direction:column;overscroll-behavior:contain;
  padding-top:env(safe-area-inset-top)}
.tiroir.ouvert{transform:translateX(0)}
@media(prefers-reduced-motion:reduce){.tiroir{transition:none}}

/* En-tête du tiroir : identité intelligente */
.tiroir-tete{background:linear-gradient(135deg,var(--teal),var(--teal-clair));color:#fff;
  padding:1.3rem 1.2rem;position:relative}
.tiroir-tete .fermer{position:absolute;top:.7rem;right:.7rem;width:38px;height:38px;border:none;
  background:rgba(255,255,255,.16);color:#fff;border-radius:50%;cursor:pointer;font-size:1.2rem;line-height:1}
.tiroir-id{display:flex;align-items:center;gap:.85rem}
.tiroir-id .avatar{width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;font-family:'Khand';font-size:1.4rem;font-weight:700;
  border:2px solid rgba(255,255,255,.4);flex:0 0 auto}
.tiroir-id .meta{min-width:0}
.tiroir-id .nom{font-family:'Khand';font-size:1.25rem;font-weight:600;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tiroir-id .sous{font-size:.78rem;opacity:.9;margin-top:1px}
.tiroir-id .num{font-size:.72rem;opacity:.85;letter-spacing:.5px}
.tiroir-tete .pill{display:inline-block;margin-top:.55rem;background:rgba(255,255,255,.92)}

.tiroir-corps{flex:1;overflow-y:auto;padding:.8rem .8rem 1rem}
.tiroir-lab{font-size:.7rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--gris-clair);
  margin:.9rem .6rem .35rem}
.tiroir a.lien,.tiroir button.lien{display:flex;align-items:center;gap:.85rem;width:100%;text-align:left;
  padding:.8rem .8rem;border-radius:12px;color:var(--encre);font-weight:500;font-size:1rem;
  border:none;background:transparent;cursor:pointer;transition:background .15s}
.tiroir a.lien i,.tiroir button.lien i{font-size:1.2rem;color:var(--teal);width:24px;text-align:center}
.tiroir a.lien:active,.tiroir button.lien:active{background:rgba(5,95,96,.07)}
.tiroir a.lien.actif{background:#fff;box-shadow:var(--ombre-douce)}
.tiroir a.lien.actif i{color:var(--orange)}
.tiroir a.lien .fleche{margin-left:auto;color:var(--gris-clair);font-size:.9rem}
.tiroir a.lien.fort{background:linear-gradient(135deg,var(--orange),var(--orange-clair));color:#fff}
.tiroir a.lien.fort i{color:#fff}

/* Sélecteur de langue segmenté */
.seg-langue{display:flex;background:var(--ligne);border-radius:12px;padding:4px;margin:.4rem .6rem}
.seg-langue a{flex:1;text-align:center;padding:.5rem;border-radius:9px;font-weight:600;font-size:.9rem;color:var(--gris)}
.seg-langue a.actif{background:#fff;color:var(--teal);box-shadow:var(--ombre-douce)}

/* Bouton installer (tiroir) */
.tiroir-installer{margin:.8rem .6rem 0}
.tiroir-pied{padding:1rem 1.4rem;border-top:1px solid var(--ligne);font-size:.8rem;color:var(--gris);
  display:flex;flex-direction:column;gap:.3rem;padding-bottom:calc(1rem + env(safe-area-inset-bottom))}
.tiroir-pied a{color:var(--teal)}

/* Feuille basse (instructions installation iOS / aide) */
.feuille{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--carte);
  border-radius:22px 22px 0 0;box-shadow:0 -18px 50px -18px rgba(5,95,96,.4);
  transform:translateY(102%);transition:transform .34s cubic-bezier(.22,.61,.36,1);
  padding:1.4rem 1.3rem calc(1.6rem + env(safe-area-inset-bottom));max-height:86vh;overflow-y:auto}
.feuille.ouvert{transform:translateY(0)}
.feuille .poignee{width:42px;height:5px;border-radius:5px;background:var(--ligne);margin:0 auto 1rem}
.feuille h3{font-family:'Khand';color:var(--encre);font-size:1.4rem;margin-bottom:.3rem}
.feuille .etape{display:flex;gap:.8rem;align-items:flex-start;padding:.7rem 0;border-bottom:1px solid var(--ligne)}
.feuille .etape:last-of-type{border-bottom:none}
.feuille .etape .n{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--teal);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem}
.feuille .etape .ico{font-size:1.3rem;color:var(--orange)}

/* Petit toast de confirmation */
.toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(20px);z-index:90;
  background:var(--encre);color:#fff;padding:.7rem 1.1rem;border-radius:100px;font-size:.9rem;
  box-shadow:var(--ombre);opacity:0;visibility:hidden;transition:.3s;display:flex;align-items:center;gap:.5rem}
.toast.actif{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* ---------- Adaptations mobiles ---------- */
@media(max-width:760px){
  .topbar .nav-links{display:none}
  .hamburger{display:flex}

  /* Barre basse enrichie, look application */
  .bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:50;background:#fff;
    border-top:1px solid var(--ligne);justify-content:space-around;align-items:stretch;
    padding:.35rem 0 calc(.35rem + env(safe-area-inset-bottom));
    box-shadow:0 -6px 18px -10px rgba(0,0,0,.25);transition:transform .3s ease}
  .bottom-nav.cachee{transform:translateY(130%)}
  .bottom-nav a,.bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;
    flex:1;font-size:.66rem;color:var(--gris);gap:3px;background:none;border:none;cursor:pointer;
    padding:.25rem 0;position:relative;font-family:inherit}
  .bottom-nav a i,.bottom-nav button i{font-size:1.25rem;transition:transform .2s}
  .bottom-nav a.actif{color:var(--orange)}
  .bottom-nav a.actif i{transform:translateY(-2px)}
  .bottom-nav a.actif::before{content:"";position:absolute;top:-.35rem;width:26px;height:3px;border-radius:3px;
    background:linear-gradient(90deg,var(--orange),var(--orange-clair))}
  body{padding-bottom:72px}
  body.aucune-barre{padding-bottom:0}
}
@media(min-width:761px){
  .tiroir,.voile,.feuille,.hamburger,.bottom-nav,.toast{display:none!important}
}