/* =============================================================
   Simulateur BTS — jetons de conception et base commune
   Phase 3 · prototype navigable
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Public+Sans:wght@400;500;600;700&display=swap');

:root{
  /* couleurs */
  --navy:#0D2440;
  --navy-2:#132E52;
  --ink:#16233A;
  --body:#41516B;
  --mute:#6B7C95;
  --red:#D62839;
  --red-h:#B71F2E;
  --red-soft:#FDEEEF;
  --white:#FFFFFF;
  --grey:#F5F7FA;
  --grey-2:#EDF1F6;
  --line:#E2E8F0;
  --line-2:#EFF3F8;
  --ok:#0E7A56;
  --ok-soft:#E6F4EE;
  --warn:#9A6400;
  --warn-soft:#FDF4E3;
  --info:#1B5FA8;
  --info-soft:#E9F1FA;

  /* typographie */
  --f-disp:"Outfit","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-body:"Public Sans","Segoe UI",system-ui,-apple-system,sans-serif;

  /* formes */
  --r-s:8px;
  --r:12px;
  --r-l:18px;
  --r-xl:26px;

  /* ombres */
  --sh-s:0 1px 2px rgba(13,36,64,.05);
  --sh:0 1px 2px rgba(13,36,64,.05), 0 8px 24px -18px rgba(13,36,64,.45);
  --sh-l:0 2px 4px rgba(13,36,64,.05), 0 24px 48px -28px rgba(13,36,64,.5);
  --sh-red:0 10px 26px -12px rgba(214,40,57,.55);

  /* mesures */
  --w:1200px;
  --head-h:66px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--white);color:var(--body);
  font-family:var(--f-body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{font-family:var(--f-disp);color:var(--ink);margin:0;line-height:1.16;letter-spacing:-.02em;text-wrap:balance}
p{margin:0 0 14px}
a{color:var(--red-h);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- utilitaires ---------- */
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}
.num{font-variant-numeric:tabular-nums}
.eyebrow{
  display:inline-block;font-family:var(--f-disp);font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--red)
}
.mute{color:var(--mute)}
.center{text-align:center}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-disp);font-size:15px;font-weight:600;line-height:1;
  padding:14px 24px;border-radius:var(--r-s);border:1.5px solid transparent;
  cursor:pointer;transition:transform .12s ease, box-shadow .16s ease, background .16s ease;
  text-decoration:none;white-space:nowrap
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-red{background:var(--red);color:#fff;box-shadow:var(--sh-red)}
.btn-red:hover{background:var(--red-h)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-2)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--navy);box-shadow:var(--sh)}
.btn-light{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.3)}
.btn-light:hover{background:rgba(255,255,255,.22)}
.btn-sm{padding:9px 16px;font-size:13.5px}
.btn-lg{padding:17px 30px;font-size:16.5px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-block{width:100%}

/* ---------- pastilles ---------- */
.tag{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--f-disp);
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;background:var(--grey-2);color:var(--mute)
}
.tag-red{background:var(--red-soft);color:var(--red-h)}
.tag-ok{background:var(--ok-soft);color:var(--ok)}
.tag-warn{background:var(--warn-soft);color:var(--warn)}
.tag-info{background:var(--info-soft);color:var(--info)}
.tag-navy{background:var(--navy);color:#fff}
.tag-lock::before{content:"🔒";font-size:11px}

/* bandeau contenu de démonstration */
.demo-flag{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--f-disp);
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--warn);background:var(--warn-soft);border:1px dashed var(--warn);
  border-radius:999px;padding:4px 12px
}
.demo-bar{
  background:var(--warn-soft);border:1px dashed var(--warn);border-radius:var(--r-s);
  padding:11px 16px;margin:0 0 18px;font-size:14px;color:var(--warn)
}
.demo-bar b{font-family:var(--f-disp);letter-spacing:.06em;text-transform:uppercase;font-size:11.5px;display:block;margin-bottom:2px}

/* ---------- cartes ---------- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--sh-s);transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease
}
.card-hover:hover{box-shadow:var(--sh-l);transform:translateY(-3px);border-color:var(--line)}

/* ---------- barres de progression ---------- */
.bar{height:8px;border-radius:999px;background:var(--grey-2);overflow:hidden}
.bar > i{display:block;height:100%;border-radius:999px;background:var(--navy);transition:width .5s ease}
.bar.red > i{background:var(--red)}
.bar.ok > i{background:var(--ok)}
.bar.sm{height:6px}

/* ---------- champs ---------- */
.field{margin-bottom:16px}
.field > label{
  display:block;font-family:var(--f-disp);font-size:13.5px;font-weight:600;
  color:var(--ink);margin-bottom:6px
}
.field input[type=text],.field input[type=email],.field input[type=password],
.field input[type=number],.field select,.field textarea{
  width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-s);background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease
}
.field textarea{min-height:110px;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--red);box-shadow:0 0 0 4px var(--red-soft)
}
.field .help{font-size:13px;color:var(--mute);margin:6px 0 0}
.field .cnt{float:right;font-size:12px;color:var(--mute);font-weight:400}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:620px){.row-2{grid-template-columns:1fr}}

.check{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border:1.5px solid var(--line);border-radius:var(--r-s);cursor:pointer;transition:.15s}
.check:hover{border-color:var(--red);background:var(--red-soft)}
.check input{margin:3px 0 0;accent-color:var(--red);flex:0 0 auto}
.check span{font-size:14.5px;color:var(--ink)}
.check em{display:block;font-style:normal;font-size:13px;color:var(--mute)}

/* ---------- tableaux ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
table.tbl{border-collapse:collapse;width:100%;font-size:14.5px;min-width:520px}
.tbl th,.tbl td{padding:12px 16px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line-2)}
.tbl thead th{
  font-family:var(--f-disp);font-size:12.5px;font-weight:700;color:var(--ink);
  background:var(--grey);border-bottom:1px solid var(--line)
}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--grey)}

/* ---------- fenêtres modales ---------- */
.modal-bg{
  position:fixed;inset:0;background:rgba(13,36,64,.55);backdrop-filter:blur(3px);
  display:none;place-items:center;z-index:200;padding:20px
}
.modal-bg.on{display:grid}
.modal{
  background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-l);
  width:min(640px,100%);max-height:88vh;overflow-y:auto;animation:pop .22s ease
}
.modal-h{padding:22px 26px 0;display:flex;align-items:flex-start;gap:14px}
.modal-h h3{font-size:21px;flex:1}
.modal-b{padding:16px 26px 26px}
.modal-f{padding:0 26px 26px;display:flex;gap:10px;flex-wrap:wrap}
.x{background:none;border:0;font-size:22px;color:var(--mute);cursor:pointer;line-height:1;padding:2px 6px;border-radius:6px}
.x:hover{background:var(--grey-2);color:var(--ink)}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- messages ---------- */
.note{border-radius:var(--r);padding:15px 18px;margin:16px 0;border:1px solid var(--line);background:var(--grey);font-size:14.5px}
.note b{display:block;font-family:var(--f-disp);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;margin-bottom:6px}
.note.info{background:var(--info-soft);border-color:#BBD6F0}
.note.info b{color:var(--info)}
.note.ok{background:var(--ok-soft);border-color:#B6DECB}
.note.ok b{color:var(--ok)}
.note.warn{background:var(--warn-soft);border-color:#EBD3A0}
.note.warn b{color:var(--warn)}
.note p:last-child{margin-bottom:0}

/* ---------- marque (partagée : public, espace étudiant, back-office) ---------- */
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand .m{
  width:36px;height:36px;border-radius:10px;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-family:var(--f-disp);font-weight:700;font-size:15px;
  position:relative;overflow:hidden;flex:0 0 auto
}
.brand .m::after{content:"";position:absolute;inset:auto -6px -6px auto;width:18px;height:18px;background:var(--red);border-radius:50%}
.brand b{font-family:var(--f-disp);font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.025em}
.brand:hover{text-decoration:none}

/* ===== RCNV : cartes visuelles 16:9 ===== */

.chapter-card .chapter-media {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    position: relative !important;
    background: #f5f5f8;
}

.chapter-card .chapter-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    background: #f5f5f8;
}

/* carte plus dynamique */
.chapter-card {
    overflow: hidden;
    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.chapter-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 42px rgba(34,27,75,.14);
}

.chapter-card:hover .chapter-media img {
    transform: scale(1.015);
}

.chapter-media img {
    transition: transform .35s ease;
}