/* ============================================================
   PREMIER — Feuille de style — LIFDY (Groupe XONONZE)
   Palette : #0015b1 (bleu), #21ad23 (vert), noir, blanc.
   Typo : Playfair Display (titres) + Inter (texte).
   Norme LIFDY : border-radius 0, pas d'emoji, Font Awesome.
   ============================================================ */

:root{
  --bleu:#0015b1;
  --vert:#21ad23;
  --noir:#000000;
  --blanc:#ffffff;
  --gris:#f2f3f7;
  --gris-texte:#5a5f6e;
  --rouge:#c62828;
  --flamme:#e2571f;
  --or:#b8860b;
  --bord:2px solid var(--noir);
}

*{margin:0;padding:0;box-sizing:border-box;border-radius:0!important;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:'Inter',sans-serif;
  color:var(--noir);
  background:var(--blanc);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit;}
input,select{font-family:inherit;font-size:1rem;}
.cache{display:none!important;}

/* ---------- Marque & titres ---------- */
.brand,.brand-titre,.brand-mini{font-family:'Playfair Display',serif;font-weight:900;color:var(--bleu);letter-spacing:.02em;}
.brand-titre{font-size:clamp(2.6rem,9vw,3.6rem);line-height:1;margin:.35rem 0 .6rem;}
.brand-mini{font-size:1.25rem;}
.titre-serif{font-family:'Playfair Display',serif;font-weight:800;font-size:1.6rem;margin-bottom:.7rem;}
.titre-onglet{font-family:'Playfair Display',serif;font-weight:800;font-size:1.5rem;margin-bottom:.4rem;}
.sous-titre{font-weight:700;font-size:1.02rem;margin:1.1rem 0 .55rem;}
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-texte);}
.tagline{color:var(--gris-texte);font-size:.98rem;line-height:1.55;margin-bottom:1.4rem;}
.texte-doux{color:var(--gris-texte);font-size:.94rem;line-height:1.55;margin-bottom:1rem;}
.centre-texte{text-align:center;}

/* ---------- Chargement ---------- */
#chargement{position:fixed;inset:0;background:var(--blanc);display:flex;align-items:center;justify-content:center;z-index:200;}
.charge-boite{text-align:center;}
.charge-boite .brand{font-size:2.4rem;}
.barre-charge{width:180px;height:4px;background:var(--gris);margin:1rem auto 0;overflow:hidden;}
.barre-charge div{width:40%;height:100%;background:var(--bleu);animation:glisse 1.1s infinite linear;}
@keyframes glisse{from{transform:translateX(-100%)}to{transform:translateX(350%)}}

/* ---------- Vues plein écran (auth, paiement...) ---------- */
.vue.plein{min-height:100vh;display:none;align-items:flex-start;justify-content:center;padding:2rem 1rem 3rem;background:var(--blanc);}
.vue.plein.visible{display:flex;}
.carte-auth{width:100%;max-width:460px;border:var(--bord);padding:2rem 1.5rem;margin-top:4vh;background:var(--blanc);}
.carte-longue{max-width:560px;}
.carte-auth form{display:flex;flex-direction:column;gap:1rem;margin-top:1rem;}
label{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;font-weight:600;}
label small{font-weight:400;color:var(--gris-texte);}
input,select{
  border:var(--bord);padding:.75rem .8rem;background:var(--blanc);width:100%;
}
input:focus,select:focus{outline:none;border-color:var(--bleu);box-shadow:inset 0 0 0 1px var(--bleu);}
.deux-colonnes{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
@media(max-width:420px){.deux-colonnes{grid-template-columns:1fr;}}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-weight:700;font-size:.95rem;padding:.85rem 1.2rem;border:var(--bord);transition:transform .06s ease,opacity .15s;text-decoration:none;text-align:center;}
.btn:active{transform:translateY(2px);}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn-large{width:100%;padding:.95rem;}
.btn-bleu{background:var(--bleu);border-color:var(--bleu);color:var(--blanc);}
.btn-vert{background:var(--vert);border-color:var(--vert);color:var(--blanc);}
.btn-ligne{background:var(--blanc);color:var(--noir);}
.btn-danger{color:var(--rouge);border-color:var(--rouge);margin-top:1rem;}
.lien{color:var(--bleu);font-weight:600;font-size:.9rem;text-decoration:underline;}
.lien-centre{display:block;margin:1rem auto 0;}
.liens-auth{display:flex;justify-content:center;gap:.7rem;margin-top:1.2rem;align-items:center;}
.sep{color:var(--gris-texte);}
.btn-retour{font-weight:600;font-size:.85rem;margin-bottom:1rem;display:inline-flex;gap:.4rem;align-items:center;}
.ligne-boutons{display:flex;gap:.7rem;flex-wrap:wrap;margin:.6rem 0 1rem;}
.ligne-boutons .btn{flex:1;min-width:150px;font-size:.85rem;padding:.7rem;}

/* ---------- Avatars ---------- */
.grille-avatars{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin:.8rem 0 1.2rem;}
.grille-avatars img{width:100%;aspect-ratio:1;border:2px solid transparent;cursor:pointer;display:block;}
.grille-avatars img.choisi{border-color:var(--bleu);box-shadow:0 0 0 2px var(--bleu);}

/* ---------- Paiement / attente ---------- */
.montant-bloc{border:var(--bord);padding:.9rem 1rem;font-weight:600;display:flex;justify-content:space-between;align-items:center;margin:.6rem 0 1rem;}
.montant-bloc span{font-family:'Playfair Display',serif;font-size:1.4rem;font-weight:800;color:var(--bleu);}
.etapes-paiement{margin:0 0 1.2rem 1.2rem;display:flex;flex-direction:column;gap:.55rem;font-size:.92rem;line-height:1.5;}
#btn-wave{margin-bottom:1.2rem;}
.pastille-attente{width:74px;height:74px;border:var(--bord);display:flex;align-items:center;justify-content:center;font-size:1.9rem;color:var(--bleu);margin:0 auto 1rem;}
.tx-rappel{font-size:.85rem;color:var(--gris-texte);margin-bottom:1.2rem;word-break:break-all;}
.resultat-cache{margin-top:1rem;}
.encart-resultat{border:2px solid var(--vert);padding:1rem;font-weight:600;}
.encart-erreur{border:2px solid var(--rouge);padding:1rem;font-weight:600;color:var(--rouge);}

/* ---------- Structure de l'app ---------- */
#app{min-height:100vh;display:flex;flex-direction:column;}
#topbar{
  position:sticky;top:0;z-index:50;background:var(--blanc);
  border-bottom:var(--bord);display:flex;align-items:center;justify-content:space-between;
  padding:.7rem 1rem;padding-top:calc(.7rem + env(safe-area-inset-top));
}
.topbar-stats{display:flex;align-items:center;gap:1rem;}
.stat{font-weight:700;font-size:.95rem;display:flex;align-items:center;gap:.35rem;}
.stat-xp i{color:var(--bleu);}
.stat-serie i{color:var(--flamme);}
.hud-avatar{width:34px;height:34px;border:2px solid var(--noir);}
#contenu-app{flex:1;width:100%;max-width:680px;margin:0 auto;padding:1.2rem 1rem 6.5rem;}
.onglet{display:none;}
.onglet.actif{display:block;animation:apparait .18s ease;}
@keyframes apparait{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

#navbar{
  position:fixed;bottom:0;left:0;right:0;background:var(--blanc);
  border-top:var(--bord);display:flex;z-index:50;
  padding-bottom:env(safe-area-inset-bottom);
}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.65rem 0 .55rem;font-size:.68rem;font-weight:600;color:var(--gris-texte);border-top:3px solid transparent;}
.nav-item i{font-size:1.15rem;}
.nav-item.actif{color:var(--bleu);border-top-color:var(--bleu);}

/* ---------- Parcours des cours ---------- */
.bloc-semaine{border:var(--bord);margin-bottom:1.6rem;background:var(--blanc);}
.semaine-entete{display:flex;align-items:baseline;gap:.8rem;padding:1rem 1.1rem;border-bottom:var(--bord);background:var(--bleu);color:var(--blanc);}
.semaine-numero{font-family:'Playfair Display',serif;font-weight:900;font-size:1.9rem;line-height:1;}
.semaine-titre{font-weight:600;font-size:.95rem;}
.bloc-semaine.verrouillee .semaine-entete{background:var(--gris);color:var(--gris-texte);}
.liste-lecons{display:flex;flex-direction:column;}
.tuile-lecon{
  display:flex;align-items:center;gap:.9rem;padding:.85rem 1rem;
  border-bottom:1px solid #d9dbe4;text-align:left;width:100%;
}
.tuile-lecon:last-child{border-bottom:none;}
.tuile-lecon:not(:disabled):hover{background:var(--gris);}
.tuile-lecon:disabled{opacity:.5;cursor:not-allowed;}
.pave-matiere{width:46px;height:46px;min-width:46px;display:flex;align-items:center;justify-content:center;color:var(--blanc);font-size:1.15rem;border:2px solid var(--noir);}
.tuile-infos{flex:1;}
.tuile-matiere{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-texte);}
.tuile-titre{font-weight:600;font-size:.95rem;line-height:1.3;}
.tuile-etat{font-size:1.1rem;}
.tuile-etat .fait{color:var(--vert);}
.tuile-etat .encours{color:var(--bleu);}
.tuile-etat .verrou{color:#b6b9c6;}
.badge-synthese{display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;background:var(--gris);font-size:.85rem;font-weight:600;}
.badge-synthese i{color:var(--bleu);}
.badge-synthese button{margin-left:auto;}

/* ---------- Lecteur de leçon ---------- */
#vue-lecon{position:fixed;inset:0;background:var(--blanc);z-index:100;display:flex;flex-direction:column;}
.lecon-entete{display:flex;align-items:center;gap:.9rem;padding:.9rem 1rem;padding-top:calc(.9rem + env(safe-area-inset-top));border-bottom:var(--bord);}
#btn-quitter-lecon{font-size:1.3rem;color:var(--gris-texte);}
.lecon-progression{flex:1;height:12px;background:var(--gris);border:1px solid var(--noir);overflow:hidden;}
#lecon-barre{height:100%;width:0;background:var(--vert);transition:width .3s ease;}
.lecon-vies{display:flex;gap:.25rem;color:var(--rouge);font-size:.95rem;}
.lecon-vies .vide{color:#d9dbe4;}
#lecon-corps{flex:1;overflow-y:auto;padding:1.4rem 1.2rem 2rem;max-width:640px;margin:0 auto;width:100%;}

.mini-lecon-bloc{font-size:1.05rem;line-height:1.75;}
.mini-lecon-bloc .etiquette-lecon{display:inline-block;background:var(--bleu);color:var(--blanc);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.3rem .6rem;margin-bottom:1rem;}
.mini-lecon-bloc h2{font-family:'Playfair Display',serif;font-size:1.45rem;margin-bottom:1rem;}
.mini-lecon-bloc p{margin-bottom:1rem;}
.mini-lecon-bloc img{max-width:100%;border:var(--bord);margin:.5rem 0 1rem;}
.btn-audio-lecon{margin:.2rem 0 1rem;font-size:.85rem;padding:.6rem 1rem;}

.question-enonce{font-weight:700;font-size:1.12rem;line-height:1.55;margin-bottom:1.3rem;}
.question-consigne{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-texte);margin-bottom:.5rem;}
.options-liste{display:flex;flex-direction:column;gap:.7rem;}
.option{border:var(--bord);padding:.85rem 1rem;text-align:left;font-size:1rem;font-weight:500;background:var(--blanc);transition:background .12s;}
.option:hover{background:var(--gris);}
.option.choisie{border-color:var(--bleu);box-shadow:inset 0 0 0 1px var(--bleu);color:var(--bleu);font-weight:700;}
.option.bonne{background:var(--vert);border-color:var(--vert);color:var(--blanc);font-weight:700;}
.option.mauvaise{background:var(--rouge);border-color:var(--rouge);color:var(--blanc);font-weight:700;}
.option:disabled{cursor:default;}

.zone-trous{font-size:1.1rem;line-height:2.1;margin-bottom:1.2rem;}
.trou{display:inline-block;min-width:96px;border-bottom:3px solid var(--noir);text-align:center;font-weight:700;color:var(--bleu);padding:0 .3rem;}
.banque-mots{display:flex;flex-wrap:wrap;gap:.6rem;}
.mot-banque{border:var(--bord);padding:.5rem .9rem;font-weight:600;background:var(--blanc);}
.mot-banque:disabled{opacity:.35;}

.saisie-reponse{width:100%;border:var(--bord);padding:.85rem;font-size:1.05rem;margin-bottom:1rem;}

.appariement{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;}
.app-item{border:var(--bord);padding:.75rem .6rem;font-size:.92rem;font-weight:500;min-height:58px;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--blanc);}
.app-item.selection{border-color:var(--bleu);box-shadow:inset 0 0 0 1px var(--bleu);color:var(--bleu);}
.app-item.apparie{background:var(--vert);border-color:var(--vert);color:var(--blanc);pointer-events:none;}

.ordre-zone{min-height:56px;border:2px dashed var(--noir);display:flex;flex-wrap:wrap;gap:.5rem;padding:.6rem;margin-bottom:1rem;}
.ordre-banque{display:flex;flex-wrap:wrap;gap:.6rem;}
.btn-valider-q{margin-top:1.4rem;}

#lecon-pied{border-top:var(--bord);padding:1rem 1.2rem calc(1rem + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:.8rem;max-width:640px;margin:0 auto;width:100%;}
#lecon-pied.bon{background:#e8f7e9;}
#lecon-pied.mauvais{background:#fdeaea;}
#feedback-texte{font-weight:600;font-size:.95rem;line-height:1.5;}
#feedback-texte .titre-fb{font-weight:800;font-size:1.05rem;display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem;}
#lecon-pied.bon .titre-fb{color:var(--vert);}
#lecon-pied.mauvais .titre-fb{color:var(--rouge);}
#lecon-pied.bon #btn-continuer{background:var(--vert);border-color:var(--vert);color:var(--blanc);}
#lecon-pied.mauvais #btn-continuer{background:var(--rouge);border-color:var(--rouge);color:var(--blanc);}

.ecran-fin{text-align:center;padding-top:8vh;}
.ecran-fin .grand-chiffre{font-family:'Playfair Display',serif;font-size:3.2rem;font-weight:900;color:var(--bleu);}
.ecran-fin p{margin:.6rem 0 1.4rem;color:var(--gris-texte);}
.ecran-fin .fa-circle-check{font-size:3.4rem;color:var(--vert);margin-bottom:1rem;}
.ecran-fin .fa-heart-crack{font-size:3.4rem;color:var(--rouge);margin-bottom:1rem;}

/* ---------- Classements ---------- */
.onglets-classement{display:flex;border:var(--bord);margin:.9rem 0 1rem;overflow-x:auto;}
.tab-cl{flex:1;padding:.65rem .4rem;font-size:.78rem;font-weight:700;white-space:nowrap;border-right:1px solid var(--noir);}
.tab-cl:last-child{border-right:none;}
.tab-cl.actif{background:var(--bleu);color:var(--blanc);}
.ligne-classement{display:flex;align-items:center;gap:.8rem;padding:.7rem .8rem;border:1px solid #d9dbe4;border-top:none;font-size:.92rem;}
.ligne-classement:first-of-type{border-top:1px solid #d9dbe4;}
.ligne-classement.moi{background:#eef1ff;border-color:var(--bleu);font-weight:700;}
.rang{font-family:'Playfair Display',serif;font-weight:800;width:2.2rem;text-align:center;font-size:1.05rem;}
.rang.podium{color:var(--or);}
.ligne-classement img{width:32px;height:32px;border:1px solid var(--noir);}
.ligne-classement .nom-cl{flex:1;}
.ligne-classement .xp-cl{font-weight:700;color:var(--bleu);}
#ligue-info{border:var(--bord);padding:.8rem;margin-bottom:.7rem;font-size:.9rem;}
#ligue-info b{color:var(--bleu);}
.vide-message{text-align:center;color:var(--gris-texte);padding:2rem 1rem;font-size:.92rem;line-height:1.6;}

/* ---------- Série ---------- */
.serie-bloc{text-align:center;padding-top:5vh;}
.serie-flamme{font-size:4.2rem;color:var(--flamme);}
.serie-nombre{font-family:'Playfair Display',serif;font-size:4.4rem;font-weight:900;line-height:1;margin-top:.6rem;}
.serie-libelle{font-weight:700;font-size:1.05rem;margin-top:.2rem;}
.serie-record{color:var(--gris-texte);margin:.4rem 0 1.6rem;}
.regle-serie{border:var(--bord);padding:1rem;text-align:left;font-size:.9rem;line-height:1.55;max-width:420px;margin:0 auto 1.4rem;display:flex;gap:.7rem;}
.regle-serie i{color:var(--bleu);margin-top:.15rem;}

/* ---------- Profil ---------- */
.profil-entete{display:flex;align-items:center;gap:1rem;margin:.8rem 0 1.2rem;}
.profil-entete img{width:64px;height:64px;border:var(--bord);}
.profil-nom{font-family:'Playfair Display',serif;font-weight:800;font-size:1.25rem;}
#form-profil{display:flex;flex-direction:column;gap:1rem;}
.signature-app{text-align:center;font-size:.75rem;color:var(--gris-texte);margin-top:2rem;}

/* ---------- Toast ---------- */
#toast{
  position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);
  background:var(--noir);color:var(--blanc);padding:.8rem 1.2rem;font-size:.9rem;font-weight:600;
  opacity:0;pointer-events:none;transition:all .25s ease;z-index:300;max-width:90vw;text-align:center;
}
#toast.visible{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- Ordinateur / grand écran ---------- */
@media(min-width:900px){
  #navbar{
    top:0;bottom:0;left:0;right:auto;width:210px;
    flex-direction:column;justify-content:flex-start;gap:.3rem;
    border-top:none;border-right:var(--bord);padding-top:5.2rem;
  }
  .nav-item{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:.8rem;padding:.9rem 1.3rem;font-size:.9rem;border-top:none;border-left:4px solid transparent;}
  .nav-item.actif{border-left-color:var(--bleu);background:var(--gris);}
  #topbar{padding-left:230px;}
  #contenu-app{padding-left:230px;max-width:920px;padding-bottom:2rem;}
  #vue-lecon{padding-left:0;}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
}