/* ════════════════════════════════════════════════════════════════
   Espace e-learning Elys-ia — Direction artistique du site vitrine
   (DM Serif Display + Instrument Sans + Caveat ; indigo / vert accent)
   ════════════════════════════════════════════════════════════════ */
:root{
  --ink:#1a1631; --ink-soft:#4a4565; --ink-muted:#8a85a0;
  --cream:#faf8f5; --cream-warm:#f5f0e8;
  --indigo:#312e81; --indigo-light:#4338ca;
  --accent:#10b981; --accent-warm:#059669; --accent-glow:#34d399;
  --coral:#e8553d;
  --line:rgba(49,46,129,.12); --card:rgba(255,253,250,.85);
  --serif:'DM Serif Display', Georgia, serif;
  --sans:'Instrument Sans', system-ui, -apple-system, sans-serif;
  --hand:'Caveat', cursive;
  --danger:#d6453b; --ok:#10b981;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--sans); font-size:17px; line-height:1.65;
  color:var(--ink); background:var(--cream); position:relative; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(50rem 36rem at -10% -10%, rgba(49,46,129,.07), transparent 60%),
    radial-gradient(46rem 34rem at 110% 5%, rgba(16,185,129,.07), transparent 55%);
}
a{color:var(--indigo)}

/* ── Barre de navigation ── */
.app-nav{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.8rem clamp(1.2rem,4vw,2.4rem);
  background:rgba(250,248,245,.85); backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.app-nav .brand{font-family:var(--serif); font-size:1.55rem; letter-spacing:-.01em;
  color:var(--indigo); text-decoration:none}
.app-nav .brand .dot{color:var(--accent)}
.app-nav .nav-right{display:flex; align-items:center; gap:1.1rem; font-size:.92rem}
.app-nav .nav-right a{color:var(--indigo); text-decoration:none; font-weight:600}
.app-nav .nav-right a:hover{color:var(--accent-warm)}
.app-nav .who{color:var(--ink-muted); font-size:.82rem}
.app-nav .badge-admin{background:var(--indigo); color:var(--cream); font-size:.62rem;
  letter-spacing:.12em; text-transform:uppercase; padding:.2rem .55rem; border-radius:999px}
.accent{height:4px; background:linear-gradient(90deg,
  var(--indigo) 0 33%, var(--accent) 33% 66%, var(--coral) 66% 100%)}

/* ── Conteneur principal ── */
.app-main{max-width:62rem; margin:0 auto; padding:clamp(1.6rem,4vw,3rem) clamp(1.2rem,4vw,2rem) 4rem}
.app-narrow{max-width:30rem}
.page-title{font-family:var(--serif); color:var(--indigo);
  font-size:clamp(2rem,4.5vw,2.9rem); letter-spacing:-.01em; line-height:1.05; margin:.2rem 0 .4rem}
.page-sub{color:var(--ink-soft); margin:0 0 2rem}
.eyebrow{font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-warm); margin-bottom:.6rem}

/* ── Flash ── */
.flash{padding:.85rem 1.1rem; border-radius:14px; margin:0 0 1rem; font-size:.92rem; border:1px solid var(--line)}
.flash.success{background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.4); color:var(--accent-warm)}
.flash.error{background:rgba(214,69,59,.10); border-color:rgba(214,69,59,.4); color:#9c2b23}
.flash.info{background:rgba(49,46,129,.08); border-color:rgba(49,46,129,.3); color:var(--indigo)}

/* ── Cartes ── */
.card{background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:1.6rem 1.7rem; box-shadow:0 20px 44px -32px rgba(49,46,129,.4)}
.card + .card{margin-top:1rem}

/* ── Boutons (style vitrine) ── */
.btn{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--sans);
  font-weight:600; font-size:.92rem; padding:.85rem 1.7rem; border-radius:100px;
  border:1.5px solid transparent; cursor:pointer; text-decoration:none;
  transition:transform .3s cubic-bezier(.16,1,.3,1), background .25s, box-shadow .25s}
.btn-primary{background:var(--indigo); color:var(--cream); box-shadow:0 4px 20px rgba(49,46,129,.2)}
.btn-primary:hover{background:var(--indigo-light); transform:translateY(-2px) scale(1.02); box-shadow:0 8px 30px rgba(49,46,129,.3)}
.btn-ghost{background:transparent; color:var(--indigo); border-color:rgba(49,46,129,.2)}
.btn-ghost:hover{border-color:var(--indigo); background:rgba(49,46,129,.04)}
.btn-teal{background:var(--accent); color:#fff; box-shadow:0 4px 20px rgba(16,185,129,.22)}
.btn-teal:hover{background:var(--accent-warm); transform:translateY(-2px)}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.btn-block{display:flex; width:100%; justify-content:center}

/* ── Formulaires ── */
.field{margin:0 0 1.1rem}
.field label{display:block; font-weight:600; font-size:.85rem; color:var(--indigo); margin-bottom:.35rem}
.field input, .field select, .field textarea{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink);
  padding:.8rem 1rem; border:1.5px solid var(--line); border-radius:12px; background:#fff;
  transition:border-color .2s, box-shadow .2s}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--indigo); box-shadow:0 0 0 3px rgba(49,46,129,.12)}
.field .hint{font-size:.78rem; color:var(--ink-muted); margin-top:.3rem}

/* champ mot de passe avec œil */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:3rem}
.pw-toggle{position:absolute; top:50%; right:.6rem; transform:translateY(-50%);
  background:none; border:0; cursor:pointer; padding:.3rem; line-height:1;
  color:var(--ink-muted); font-size:1.15rem; border-radius:8px}
.pw-toggle:hover{color:var(--indigo); background:rgba(49,46,129,.06)}

/* ── Grille des modules ── */
.module-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:1.1rem; margin-top:1.5rem}
.module-card{display:flex; flex-direction:column; gap:.5rem; background:var(--card);
  border:1px solid var(--line); border-radius:20px; padding:1.3rem 1.4rem;
  text-decoration:none; color:inherit; transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s}
.module-card:hover{transform:translateY(-4px); box-shadow:0 22px 48px -30px rgba(49,46,129,.5)}
.module-card .num{font-family:var(--hand); font-size:1.2rem; color:var(--accent-warm); font-weight:600}
.module-card h3{font-family:var(--serif); font-size:1.25rem; color:var(--indigo); margin:.1rem 0}
.module-card .resume{font-size:.86rem; color:var(--ink-soft); line-height:1.5; flex:1}
.module-card .meta{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; font-size:.74rem; color:var(--ink-muted); margin-top:.4rem}
.status-pill{font-size:.68rem; font-weight:700; letter-spacing:.04em; padding:.2rem .6rem; border-radius:999px}
.status-non_commence{background:rgba(138,133,160,.16); color:var(--ink-muted)}
.status-en_cours{background:rgba(232,85,61,.16); color:var(--coral)}
.status-termine{background:rgba(16,185,129,.16); color:var(--accent-warm)}

/* ── Barre de progression ── */
.progress{height:10px; background:rgba(49,46,129,.10); border-radius:999px; overflow:hidden}
.progress > i{display:block; height:100%; background:linear-gradient(90deg,var(--indigo),var(--accent)); border-radius:999px; transition:width .4s}
.progress-label{display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; font-size:.82rem; color:var(--ink-soft); margin-bottom:.4rem}

/* ── Tableaux ── */
.table{width:100%; border-collapse:separate; border-spacing:0; background:var(--card);
  border-radius:18px; overflow:hidden; box-shadow:0 20px 44px -32px rgba(49,46,129,.4)}
.table th,.table td{text-align:left; padding:.75rem .95rem; border-bottom:1px solid var(--line); font-size:.9rem}
.table th{font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--cream); background:var(--indigo)}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:nth-child(even){background:rgba(49,46,129,.035)}
.table a{color:var(--indigo); font-weight:600}

/* ── Quiz ── */
.quiz-q{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:1.3rem 1.5rem; margin:0 0 1rem}
.quiz-q .q-enonce{font-weight:600; color:var(--indigo); margin-bottom:.8rem}
.quiz-opt{display:flex; align-items:flex-start; gap:.6rem; padding:.5rem .2rem; cursor:pointer}
.quiz-opt input{margin-top:.3rem}
.quiz-result .score{font-family:var(--serif); font-size:2.8rem; color:var(--indigo)}

footer.app-foot{max-width:62rem; margin:0 auto; padding:1.6rem 2rem 2.8rem;
  border-top:1px solid var(--line); color:var(--ink-muted); font-size:.78rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}
footer.app-foot .fl{font-family:var(--serif); color:var(--indigo)}

/* ════════════════ Contenu riche des modules (.prose) ════════════════ */
.prose{font-size:17px; line-height:1.72}
.prose h1{font-family:var(--serif); font-size:clamp(2rem,4.4vw,2.9rem); line-height:1.06;
  letter-spacing:-.01em; color:var(--indigo); margin:.2rem 0 1.3rem; max-width:24ch}
.prose h2{font-family:var(--serif); font-size:clamp(1.4rem,3vw,1.85rem); color:var(--indigo);
  margin:2.6rem 0 1rem; padding-top:1.5rem; border-top:1px solid var(--line)}
.prose h3{font-family:var(--sans); font-weight:700; font-size:.8rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-warm); margin:1.8rem 0 .6rem}
.prose p{margin:.7rem 0}
.prose strong{color:var(--indigo); font-weight:700}
.prose em{color:var(--ink-soft)}
.prose a{color:var(--indigo); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(49,46,129,.4)}
.prose a:hover{text-decoration-color:var(--indigo)}
.prose ul,.prose ol{margin:.6rem 0; padding-left:1.3rem}
.prose li{margin:.34rem 0}
.prose li::marker{color:var(--accent); font-weight:700}
.prose table{width:100%; border-collapse:separate; border-spacing:0; margin:1.4rem 0;
  background:var(--card); border-radius:16px; overflow:hidden; box-shadow:0 18px 40px -30px rgba(49,46,129,.4)}
.prose th,.prose td{text-align:left; padding:.72rem .95rem; vertical-align:top; border-bottom:1px solid var(--line)}
.prose th{font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--cream); background:var(--indigo)}
.prose td:first-child{font-weight:600; color:var(--indigo)}
.prose tbody tr:last-child td{border-bottom:0}
.prose tbody tr:nth-child(even){background:rgba(49,46,129,.035)}
.prose blockquote{margin:1.3rem 0; padding:1rem 1.2rem; border-left:4px solid var(--accent);
  border-radius:0 12px 12px 0; background:linear-gradient(180deg,rgba(16,185,129,.08),rgba(16,185,129,.03))}
.prose blockquote p{margin:.25rem 0; font-family:var(--serif); font-size:1.1rem; color:var(--indigo)}
.prose code{font-family:ui-monospace,'SFMono-Regular',monospace; font-size:.86em;
  background:rgba(49,46,129,.10); color:var(--indigo); padding:.12em .45em; border-radius:6px}
.prose pre{background:#1a1631; color:#eae6ff; margin:1.3rem 0; padding:1.3rem; border-radius:16px; overflow-x:auto}
.prose pre code{background:none; color:inherit; padding:0}
.prose hr{border:0; height:1px; margin:2.6rem 0; background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}

@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}
@media (max-width:560px){
  .app-nav .who{display:none}
  .app-main{padding-left:1.1rem; padding-right:1.1rem}
}