/* ------------------------------------------------------------------
   Go For English — espace étudiant et administration du LMS.
   Reprend les jetons de site.css ; ce fichier ajoute ce qui leur est propre.
   ------------------------------------------------------------------ */

:root{
  --yellow:#FCB403; --yellow-soft:#FFF1CC; --ink:#1A262F; --ink-soft:#4A5560;
  --red:#CD0303; --green:#1B7F3B; --paper:#fff; --bg:#F7F5F0; --line:#E4E0D7;
  --radius:14px; --shadow:0 1px 2px rgba(20,20,30,.05), 0 8px 24px rgba(20,20,30,.06);
  --font:"Segoe UI Variable Text","Segoe UI",Inter,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","Segoe UI Mono",Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font);
     font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
[hidden]{display:none !important}

/* ---------- En-tête ---------- */
header.site{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.94);
            backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.bar{max-width:1180px; margin:0 auto; padding:10px 22px; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.bar .logo{height:42px; width:auto}
.bar .who{margin-left:auto; display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-soft)}
.badge-role{font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
            color:var(--red); background:#fff; border:1px solid var(--line); border-radius:99px; padding:5px 12px}

main{max-width:1180px; margin:0 auto; padding:28px 22px 80px}
h1{font-size:27px; margin:0 0 6px; letter-spacing:-.015em}
h2{font-size:21px; margin:0 0 6px; letter-spacing:-.01em}
h3{font-size:17px; margin:24px 0 8px}
p.sub{color:var(--ink-soft); margin:0 0 20px; font-size:15.5px}

.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
      padding:22px 24px; box-shadow:var(--shadow); margin-bottom:20px}
.callout{border-left:5px solid var(--yellow); background:#FFFDF5;
         border-radius:0 var(--radius) var(--radius) 0; padding:16px 20px; margin:18px 0}
.callout.ok{border-left-color:var(--green); background:#F4FBF6}
.callout.ko{border-left-color:var(--red); background:#FFF6F6}
.callout p:last-child{margin-bottom:0}

/* ---------- Boutons ---------- */
.btn{font:inherit; font-size:14.5px; font-weight:700; cursor:pointer; text-decoration:none;
     display:inline-block; background:#fff; color:var(--ink); border:1px solid var(--line);
     padding:10px 18px; border-radius:99px}
.btn:hover{background:var(--yellow-soft)}
.btn.solid{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn.solid:hover{background:#12151c}
.btn.yellow{background:var(--yellow); border-color:var(--yellow); color:var(--ink)}
.btn.danger{color:var(--red); border-color:#EBC9C9}
.btn.danger:hover{background:#FFF1F1}
.btn.small{padding:6px 13px; font-size:13.5px}
.btn[disabled]{opacity:.55; cursor:default}
.actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:16px}

/* ---------- Formulaires ---------- */
label.f{display:block; font-size:13.5px; font-weight:750; margin:0 0 6px; color:var(--ink-soft)}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],
input[type=search],select,textarea{
  width:100%; font:inherit; font-size:15.5px; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:10px; padding:10px 13px}
textarea{min-height:110px; resize:vertical; line-height:1.6}
input:focus,select:focus,textarea:focus{outline:2px solid var(--yellow); outline-offset:1px}
.grid-f{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-bottom:14px}
.grid-f .full{grid-column:1/-1}
.msg{font-size:14px; font-weight:650; min-height:20px; margin:10px 0 0}
.msg.err{color:var(--red)}
.msg.ok{color:var(--green)}

/* ---------- Connexion ---------- */
.login-wrap{max-width:440px; margin:8vh auto 0; padding:0 20px}
.login-wrap .card{padding:30px}
.login-wrap img.logo{height:60px; width:auto; margin-bottom:18px}

/* ---------- Statistiques ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:22px}
.stat{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
      padding:16px 18px; box-shadow:var(--shadow)}
.stat .v{font-size:28px; font-weight:800; letter-spacing:-.02em; line-height:1.15}
.stat .k{font-size:12px; font-weight:750; letter-spacing:.08em; text-transform:uppercase;
         color:var(--ink-soft); margin-top:2px}
.stat.flamme .v{color:var(--red)}

/* ---------- Bandeau d'accueil étudiant ---------- */
.bienvenue{display:flex; gap:22px; align-items:center; flex-wrap:wrap;
           background:linear-gradient(135deg,var(--yellow),#ffdf6b);
           border-radius:var(--radius); padding:24px 26px; box-shadow:var(--shadow); margin-bottom:22px}
.bienvenue img{width:78px; height:auto; flex:none}
.bienvenue h1{margin:0 0 4px}
.bienvenue p{margin:0; color:#4a4326; font-size:15.5px}
.bienvenue .reprise{margin-left:auto}

/* ---------- Barre de progression ---------- */
.jauge{height:9px; border-radius:99px; background:#E9E5DC; overflow:hidden; margin:10px 0 6px}
.jauge i{display:block; height:100%; background:var(--yellow); border-radius:99px; transition:width .35s}
.jauge.verte i{background:var(--green)}

/* ---------- Cartes de cours ---------- */
.cours-liste{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:16px}
.cours-carte{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
             padding:20px 22px; box-shadow:var(--shadow); display:flex; flex-direction:column}
.cours-carte h3{margin:0 0 6px; font-size:18px}
.cours-carte p{font-size:15px; color:var(--ink-soft); margin:0 0 12px}
.cours-carte .pied{margin-top:auto; font-size:13.5px; color:var(--ink-soft)}

/* ---------- Liste de leçons ---------- */
.lecons{list-style:none; padding:0; margin:16px 0; display:grid; gap:10px}
.lecons li{display:flex; gap:14px; align-items:center; background:var(--paper);
           border:1px solid var(--line); border-radius:12px; padding:13px 16px}
.lecons li.faite{background:#F7FBF8; border-color:#CBE3D2}
.lecons .puce{flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
              background:var(--yellow-soft); border:1px solid var(--yellow); font-size:16px}
.lecons li.faite .puce{background:#E6F4EA; border-color:#B8D7C0; color:var(--green)}
.lecons b{display:block; font-size:16px}
.lecons span{font-size:14px; color:var(--ink-soft)}
.lecons .droite{margin-left:auto; display:flex; gap:10px; align-items:center}
.etiq{font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
      padding:3px 9px; border-radius:99px; background:#EFEDE7; color:var(--ink-soft)}
.etiq.video{background:#FDE8E8; color:var(--red)}
.etiq.audio{background:#E8F1FD; color:#1A5FB4}
.etiq.quiz{background:var(--yellow-soft); color:#8A6A00}
.etiq.text{background:#EFEDE7; color:var(--ink-soft)}

/* ---------- Lecteur de leçon ---------- */
.media{background:#14161c; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.media video{width:100%; display:block; background:#000}
.media audio{width:100%; display:block; padding:18px; background:#1b1e26}
.contenu{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
         padding:22px 26px; box-shadow:var(--shadow); font-size:16.5px}
.contenu :first-child{margin-top:0}
.contenu :last-child{margin-bottom:0}

/* ---------- Quiz ---------- */
.question{background:var(--paper); border:1px solid var(--line); border-radius:12px;
          padding:18px 20px; margin-bottom:14px}
.question .num{font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft)}
.question p.q{font-size:17px; font-weight:650; margin:6px 0 12px}
.choix{display:grid; gap:8px}
.choix label{display:flex; gap:12px; align-items:flex-start; padding:11px 14px; cursor:pointer;
             border:1px solid var(--line); border-radius:10px; background:#FCFBF7; font-size:15.5px}
.choix label:hover{border-color:var(--yellow)}
.choix input{margin-top:3px; accent-color:var(--red); flex:none}
.choix label:has(input:checked){background:var(--yellow-soft); border-color:var(--yellow)}
.question.juste{border-color:#B8D7C0; background:#F7FBF8}
.question.faux{border-color:#EBC9C9; background:#FFF8F8}
.verdict{font-size:14px; font-weight:700; margin-top:10px}
.verdict.ok{color:var(--green)}
.verdict.ko{color:var(--red)}
.verdict .exp{display:block; font-weight:400; color:var(--ink-soft); margin-top:4px}

/* ---------- Tableaux (admin) ---------- */
.table-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper)}
table{border-collapse:collapse; width:100%; font-size:15px}
th,td{padding:11px 15px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle; white-space:nowrap}
th{font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
   color:var(--ink-soft); background:#FCFBF7}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#FCFBF7}
td.nom{font-weight:700; white-space:normal; min-width:150px}
td.code{font-family:var(--mono); font-size:13px; color:var(--ink-soft)}
.pill{display:inline-block; font-size:13px; font-weight:800; padding:3px 10px; border-radius:99px;
      background:#EFEDE7; color:var(--ink-soft)}
.pill.good{background:#E6F4EA; color:var(--green)}
.pill.mid{background:var(--yellow-soft); color:#8A6A00}
.pill.low{background:#FCE9E9; color:var(--red)}
.vide{padding:38px 20px; text-align:center; color:var(--ink-soft)}

/* ---------- Onglets ---------- */
.onglets{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px; border-bottom:1px solid var(--line)}
.onglets button{font:inherit; font-size:15px; font-weight:700; cursor:pointer; background:none;
                border:0; border-bottom:3px solid transparent; padding:10px 14px; color:var(--ink-soft)}
.onglets button:hover{color:var(--ink)}
.onglets button[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--yellow)}

/* ---------- Panneau latéral ---------- */
.overlay{position:fixed; inset:0; z-index:60; background:rgba(25,27,33,.55); display:flex; justify-content:flex-end}
.drawer{width:min(720px,100%); background:var(--bg); height:100%; overflow-y:auto; box-shadow:-20px 0 60px rgba(0,0,0,.25)}
.drawer-head{position:sticky; top:0; background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
             border-bottom:1px solid var(--line); padding:16px 24px; display:flex; align-items:flex-start; gap:16px}
.drawer-head h2{margin:0}
.drawer-head .meta{font-size:13.5px; color:var(--ink-soft); font-family:var(--mono)}
.drawer-head .btn{margin-left:auto}
.drawer-body{padding:20px 24px 60px}

/* ---------- Attestation ---------- */
.attestation{background:#fff; border:3px solid var(--yellow); border-radius:var(--radius);
             padding:34px 38px; text-align:center; box-shadow:var(--shadow)}
.attestation img.logo{height:64px; width:auto; margin:0 auto 16px}
.attestation h2{font-size:24px; margin:0 0 6px}
.attestation .nom{font-size:28px; font-weight:800; margin:14px 0 6px; letter-spacing:-.02em}
.attestation .quoi{font-size:17px; color:var(--ink-soft)}
.attestation .date{margin-top:18px; font-size:13.5px; letter-spacing:.08em;
                   text-transform:uppercase; color:var(--ink-soft)}

@media (max-width:680px){
  body{font-size:16px}
  .card,.contenu{padding:18px}
  .bar{padding:10px 16px}
  .bienvenue .reprise{margin-left:0; width:100%}
}

@media print{
  header.site,.actions,.onglets,.btn,.no-print{display:none !important}
  body{background:#fff}
  .card,.attestation{box-shadow:none; break-inside:avoid}
}

/* ---- Signature de marque, reprise du traitement du logo ---- */
.signature{
  margin:0; font-style:italic; font-weight:800; line-height:1.35;
  font-size:13.5px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink);
}
.signature em{font-style:italic; color:var(--red)}

/* ---- Coaching individuel ------------------------------------------------ */
/* Une étape encore fermée reste lisible : on doit voir où l'on va, sans
   pouvoir sauter le pas. */
.lecons li.fermee{opacity:.58}
.lecons li.fermee .puce{background:transparent; border:1px dashed var(--line); color:var(--ink-soft)}
.etiq.attente{
  background:transparent; border:1px dashed var(--line);
  color:var(--ink-soft); font-style:italic;
}
.etiq.note{background:var(--yellow-soft); color:#7A5200}

/* Les notes d'écoute. Il n'y a volontairement aucun bouton d'enregistrement :
   tout le speaking se fait en direct pendant la séance, c'est la règle du
   programme. */
.prise-notes{margin-top:22px}
.prise-notes label{
  display:block; margin-bottom:8px;
  font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft);
}
.prise-notes textarea{
  width:100%; font:inherit; font-size:16px; line-height:1.5;
  padding:12px 14px; border:1px solid var(--line); border-radius:12px;
  background:var(--paper); color:var(--ink); resize:vertical;
}
.prise-notes textarea:focus{outline:2px solid var(--yellow); outline-offset:1px}

/* Le retour de la coach, écrit après le débrief. */
.retour-coach{
  margin-top:24px; padding:16px 18px;
  background:#FFFBF0; border-left:3px solid var(--yellow); border-radius:0 12px 12px 0;
}
.retour-coach .et-r{
  display:block; margin-bottom:6px;
  font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:#7A5200;
}
.retour-coach p{margin:0; line-height:1.6}

/* La carte d'une semaine de coaching. */
.carte-semaine .seances-c{
  margin:0 0 18px; font-size:14px; font-weight:700; color:var(--ink-soft);
}
.bloc-c{margin:0 0 16px}
.bloc-c .et-c{
  display:block; margin-bottom:4px;
  font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft);
}
.bloc-c p{margin:0; line-height:1.6}
.bloc-c.mind-c{
  padding:14px 16px; background:var(--yellow-soft); border-radius:12px;
}
.bloc-c.mind-c p{font-weight:650}
.bloc-c.dare-c{
  padding:14px 16px; background:#FDF1F1; border-left:3px solid var(--red); border-radius:0 12px 12px 0;
}
.carte-semaine .rappel-c,
.consigne-n + .rappel-n{
  margin:18px 0 0; font-size:14px; color:var(--ink-soft); font-style:italic;
}
.consigne-n{margin:0; font-size:17px; line-height:1.6}

/* ---- Poste de la coach : notes de l'élève et retour ---------------------- */
.notes-eleve{
  margin:8px 0 0; padding:8px 12px;
  background:var(--bg); border-radius:10px;
}
.notes-eleve .et-a,
.retour-admin .f{
  display:block; margin-bottom:3px;
  font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft);
}
.notes-eleve p{margin:0; font-size:15px; line-height:1.5}
.retour-admin{margin:10px 0 2px; display:flex; flex-direction:column; gap:6px; align-items:flex-start}
.retour-admin textarea{
  width:100%; font:inherit; font-size:15px; line-height:1.45;
  padding:8px 11px; border:1px solid var(--line); border-radius:10px;
  background:var(--paper); color:var(--ink); resize:vertical;
}
.retour-admin textarea:focus{outline:2px solid var(--yellow); outline-offset:1px}
.ok-r{font-size:13px; font-weight:700; color:var(--green)}
.etiq.note{background:var(--yellow-soft); color:#7A5200}

/* Sur téléphone, la ligne d'une étape porte maintenant plus d'étiquettes
   (« à noter », « à venir ») : elle ne tient plus sur un seul rang. Le bloc
   de droite passe donc sous le titre, aligné sur lui. */
@media (max-width:560px){
  .lecons li{flex-wrap:wrap}
  .lecons li > div:not(.droite){min-width:0}
  .lecons li .droite{
    width:100%; margin-left:42px; margin-top:8px;
    flex-wrap:wrap; justify-content:flex-start;
  }
}