/* =====================================================================
   Cyriskcampus - Feuille de style principale
   Palette héritée de Cyriskintel, identique à cyriskeval.com :
     bleu           #0B769F
     bleu profond   #042433
     violet         #842479
     pêche          #F4BA9A
   Les codes de cours (GV01, GR02, CY09…) sont composés dans la police de
   la marque, jamais en chasse fixe : le zéro barré ou pointé d'une police
   de console ne ressemble pas au logo et jure sur un support pédagogique.
   ===================================================================== */

:root{
  --bleu:#0B769F;
  --bleu-clair:#E7F2F7;
  --bleu-vif:#0E8CBC;
  --bleu-profond:#042433;
  --bleu-nuit:#0A3549;
  --violet:#842479;
  --violet-clair:#F3E6F1;
  --peche:#F4BA9A;
  --peche-clair:#FDF1EA;
  --peche-texte:#8A4A22;

  --texte:#1F2A30;
  --texte-doux:#5A6B74;
  --bordure:#D8E2E8;
  --bordure-fine:#E9F0F4;
  --fond:#F4F7F9;
  --blanc:#FFFFFF;
  --surface-2:#FAFCFD;
  --encart-fond:#F2F5F6;   /* fond neutre de tous les encarts et alertes */

  --vert:#2E7D32;
  --vert-clair:#7CB342;
  --vert-fond:#E8F5E9;
  --jaune:#F9A825;
  --orange:#EF6C00;
  --rouge:#C62828;
  --rouge-fond:#FDECEA;

  /* Couleurs de parcours, reprises du tableau des formations */
  --p-fond:#0A3549;
  --p-intro:#042433;
  --p-gv:#2E7D32;
  --p-gr:#C0334A;
  --p-ca:#0B769F;
  --p-cy:#842479;

  --rayon:10px;
  --rayon-sm:6px;
  --ombre:0 1px 2px rgba(4,36,51,.06), 0 4px 16px rgba(4,36,51,.07);
  --ombre-forte:0 8px 28px rgba(4,36,51,.14);
  --police:"Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--police);
  font-size:16px;
  line-height:1.6;
  color:var(--texte);
  background:var(--fond);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

img{max-width:100%;height:auto}
a{color:var(--bleu);text-decoration:none}
a:hover{color:var(--violet);text-decoration:underline}
:focus-visible{outline:2px solid var(--bleu);outline-offset:2px;border-radius:2px}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}

.saut-contenu{
  position:absolute;left:-9999px;top:0;background:var(--bleu-profond);color:#fff;
  padding:10px 16px;z-index:1000;border-radius:0 0 var(--rayon-sm) 0;
}
.saut-contenu:focus{left:0}

/* ------------------------------------------------------------------ */
/*  Code de cours : composant identitaire                              */
/* ------------------------------------------------------------------ */
.code-cours{
  font-family:var(--police);
  font-weight:600;
  letter-spacing:.055em;
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1, "tnum" 1;
  white-space:nowrap;
}

/* ------------------------------------------------------------------ */
/*  En-tête                                                            */
/* ------------------------------------------------------------------ */
.entete{
  background:var(--blanc);
  border-bottom:3px solid var(--bleu);
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:10px 24px;flex-wrap:wrap;
}
.entete-logo{display:block;text-decoration:none}
.entete-logo img{height:52px;width:auto;display:block}
.entete-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.entete-user{font-size:.86rem;color:var(--texte-doux)}
.entete-user em{color:var(--violet);font-style:normal;font-weight:600}
.jeton-abo{
  background:var(--violet-clair);color:var(--violet);border:1px solid #E3C6DE;
  padding:4px 11px;border-radius:999px;font-size:.76rem;font-weight:600;
}

/* ------------------------------------------------------------------ */
/*  Disposition : menu latéral + contenu                               */
/* ------------------------------------------------------------------ */
.disposition{display:flex;align-items:stretch;flex:1;width:100%}
.menu{
  width:262px;flex:0 0 262px;background:var(--bleu-profond);
  color:#cfe0e9;padding:22px 0 40px;
}
.menu-bloc{margin-bottom:22px}
.menu-titre{
  display:block;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--peche);padding:0 22px 8px;font-weight:700;
}
.menu ul{list-style:none;margin:0;padding:0}
.menu li a{
  display:flex;align-items:center;gap:8px;justify-content:space-between;
  padding:9px 22px;color:#dceaf1;font-size:.94rem;
  border-left:3px solid transparent;text-decoration:none;
  transition:background .15s, border-color .15s, color .15s;
}
.menu li a .t{flex:1;min-width:0}
.menu li a:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.menu li a.actif{background:rgba(11,118,159,.35);border-left-color:var(--peche);color:#fff;font-weight:600}
.menu li a.fait{color:#9DBCCB}
.menu li a.fait .marqueur{color:var(--vert-clair);font-weight:700}
.menu li a.verrou{color:#7E9AA8;cursor:default}
.menu li a.verrou .marqueur{color:#6B8593}
.menu-admin .menu-titre{color:#E9B9E2}
.menu-admin li a.actif{background:rgba(132,36,121,.45);border-left-color:#E9B9E2}
.menu-progres{padding:0 22px}
.menu-progres p{margin:0 0 6px;font-size:.75rem;color:#9DBCCB;letter-spacing:.05em;text-transform:uppercase}
.etiquette{
  font-size:.65rem;background:var(--violet);color:#fff;border-radius:999px;
  padding:1px 7px;letter-spacing:.03em;font-weight:600;flex:0 0 auto;
}
.etiquette.gratuit{background:var(--vert)}
.menu-bascule{
  display:none;width:100%;border:0;background:var(--bleu-profond);color:#fff;
  padding:12px 18px;font-size:1rem;font-family:inherit;text-align:left;cursor:pointer;
}
.contenu{flex:1;min-width:0;padding:30px 36px 56px;max-width:1180px}

/* ------------------------------------------------------------------ */
/*  Titres et texte                                                    */
/* ------------------------------------------------------------------ */
h1{font-size:1.85rem;line-height:1.25;color:var(--bleu-profond);margin:0 0 6px;font-weight:650;text-wrap:balance}
h1 + .sous-titre{color:var(--texte-doux);margin:0 0 26px;font-size:1.02rem;max-width:75ch}
.sous-titre{color:var(--texte-doux);margin:0 0 26px;font-size:1.02rem;max-width:75ch}
h2{font-size:1.28rem;color:var(--bleu-profond);margin:34px 0 12px;font-weight:640}
h3{font-size:1.06rem;color:var(--bleu);margin:22px 0 8px;font-weight:640}
h4{font-size:.92rem;color:var(--bleu-profond);margin:18px 0 8px;font-weight:650}
p{margin:0 0 14px}
.discret{color:var(--texte-doux);font-size:.9rem}
.centre{text-align:center}
.fil{font-size:.82rem;color:var(--texte-doux);margin-bottom:14px}
.fil a{color:var(--texte-doux)}
code{background:var(--bleu-clair);color:var(--bleu-profond);padding:1px 5px;border-radius:4px;font-size:.88em}
pre{background:var(--bleu-profond);color:#DCEAF1;padding:14px 16px;border-radius:var(--rayon-sm);overflow-x:auto}
pre code{background:none;color:inherit;padding:0}

/* ------------------------------------------------------------------ */
/*  Cartes et grilles                                                  */
/* ------------------------------------------------------------------ */
.carte{
  background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--rayon);
  padding:22px 24px;box-shadow:var(--ombre);margin-bottom:22px;
}
.carte > :first-child{margin-top:0}
.carte > :last-child{margin-bottom:0}
.carte-titre{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--bordure);margin:-4px 0 16px;padding-bottom:12px;flex-wrap:wrap;
}
.carte-titre h2,.carte-titre h3{margin:0}

.grille{display:grid;gap:20px}
.grille-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grille-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grille-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

.badges{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;align-items:center}
.badge{
  font-size:.72rem;background:var(--bleu-clair);color:var(--bleu-profond);
  border-radius:999px;padding:3px 10px;font-weight:600;
}
.badge.violet{background:var(--violet-clair);color:var(--violet)}
.badge.peche{background:var(--peche-clair);color:var(--peche-texte)}
.badge.vert{background:var(--vert-fond);color:var(--vert)}
.badge.rouge{background:var(--rouge-fond);color:var(--rouge)}

.stat{
  background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--rayon);
  padding:16px 18px;box-shadow:var(--ombre);
}
.stat-valeur{font-size:1.9rem;font-weight:700;color:var(--bleu-profond);line-height:1.1;font-variant-numeric:tabular-nums}
.stat-libelle{font-size:.8rem;color:var(--texte-doux);text-transform:uppercase;letter-spacing:.06em;margin-top:4px}

/* ------------------------------------------------------------------ */
/*  Bannière d'accueil                                                 */
/* ------------------------------------------------------------------ */
.hero{
  background-image:linear-gradient(100deg,#04202D 0%,#072F41 55%,#0A3E56 100%);
  color:#fff;border-radius:4px;border-left:5px solid var(--bleu);
  padding:40px 44px 36px;margin-bottom:26px;position:relative;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(135deg,
    rgba(255,255,255,.030) 0 1px, transparent 1px 11px);
}
.hero > *{position:relative}
.hero-surtitre{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--peche);margin:0 0 12px;font-weight:600}
.hero h1{color:#fff;font-size:2.05rem;line-height:1.16;margin:0 0 14px;max-width:22ch}
.hero-texte{color:#C6DCE7;max-width:62ch;margin:0 0 22px;font-size:1.01rem}
.hero-texte strong{color:#fff}

/* ------------------------------------------------------------------ */
/*  Boutons                                                            */
/* ------------------------------------------------------------------ */
.btn{
  display:inline-block;border:0;border-radius:var(--rayon-sm);cursor:pointer;
  background:var(--bleu);color:#fff;font-family:inherit;font-size:.94rem;font-weight:600;
  padding:10px 20px;text-decoration:none;transition:background .15s, box-shadow .15s;
}
.btn:hover{background:var(--bleu-vif);color:#fff;text-decoration:none}
.btn-violet{background:var(--violet)}
.btn-violet:hover{background:#9C3A8F}
.btn-profond{background:var(--bleu-profond)}
.btn-profond:hover{background:var(--bleu-nuit)}
.btn-contour{background:transparent;color:var(--bleu);border:1px solid var(--bleu)}
.btn-contour:hover{background:var(--bleu-clair);color:var(--bleu-profond)}
.btn-danger{background:var(--rouge)}
.btn-danger:hover{background:#A51F1F}
.btn-fin{padding:6px 14px;font-size:.84rem}
.btn-bloc{display:block;width:100%;text-align:center}
.btn[disabled],.btn.desactive{opacity:.5;cursor:not-allowed}
.barre-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px}

/* Boutons de connexion externe */
.btn-oauth{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:var(--blanc);color:var(--texte);border:1px solid var(--bordure);
  border-radius:var(--rayon-sm);padding:10px 16px;font-size:.94rem;font-weight:600;
  cursor:pointer;text-decoration:none;transition:border-color .15s, background .15s;
}
.btn-oauth:hover{border-color:var(--bleu);background:var(--surface-2);color:var(--texte);text-decoration:none}
.btn-oauth svg{width:18px;height:18px;flex:0 0 auto}
.separateur-ou{
  display:flex;align-items:center;gap:10px;margin:18px 0;
  font-size:.76rem;color:var(--texte-doux);text-transform:uppercase;letter-spacing:.1em;
}
.separateur-ou::before,.separateur-ou::after{content:"";flex:1;height:1px;background:var(--bordure)}

/* ------------------------------------------------------------------ */
/*  Formulaires                                                        */
/* ------------------------------------------------------------------ */
form{margin:0}
fieldset{border:1px solid var(--bordure);border-radius:var(--rayon-sm);padding:16px 18px;margin:0 0 18px}
legend{font-weight:640;color:var(--bleu-profond);padding:0 8px;font-size:.92rem}
label{display:block;font-weight:600;font-size:.88rem;margin-bottom:5px;color:var(--bleu-profond)}
.aide{display:block;font-weight:400;color:var(--texte-doux);font-size:.82rem;line-height:1.5;margin-top:3px}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=search],input[type=url],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--bordure);border-radius:var(--rayon-sm);
  font-family:inherit;font-size:.94rem;color:var(--texte);background:var(--blanc);
  transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--bleu);box-shadow:0 0 0 3px rgba(11,118,159,.16);
}
textarea{min-height:120px;resize:vertical;line-height:1.55}
textarea.editeur{min-height:420px;font-family:ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;font-size:.88rem}
.champ{margin-bottom:16px}
.champs{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.cases label{font-weight:400;font-size:.9rem;display:flex;gap:9px;align-items:flex-start;color:var(--texte);margin-bottom:8px}
.cases input{margin-top:4px;flex:0 0 auto}
.formulaire-etroit{max-width:430px}

/* ------------------------------------------------------------------ */
/*  Tableaux                                                           */
/* ------------------------------------------------------------------ */
.tableau-defilant{overflow-x:auto;border-radius:var(--rayon);border:1px solid var(--bordure);background:var(--blanc);margin-bottom:22px}
table{width:100%;border-collapse:collapse;font-size:.9rem;background:var(--blanc)}
/* En-tête de tableau : fond blanc, hiérarchie portée par le trait et la
   graisse. Un bandeau plein prend le pas sur les données qu'il coiffe. */
thead th{
  background:var(--blanc);color:var(--bleu-profond);text-align:left;font-weight:600;
  padding:10px 12px;white-space:nowrap;font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;border-bottom:2px solid var(--bleu-profond);
}
tbody td,tbody th{padding:9px 12px;border-top:1px solid var(--bordure-fine);vertical-align:top;text-align:left;font-weight:400}
tbody tr:first-child td,tbody tr:first-child th{border-top:0}
tbody tr:nth-child(even){background:var(--surface-2)}
tbody tr:hover{background:var(--bleu-clair)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ------------------------------------------------------------------ */
/*  Alertes et encarts                                                 */
/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/*  Règle de maison : le fond reste gris, la couleur passe sur le bord  */
/*                                                                      */
/*  Un encart n'a pas besoin d'un aplat teinté pour se détacher. Un     */
/*  gris très clair suffit à le décoller du blanc de la page, et le     */
/*  liseré de gauche porte seul l'information de nature. Le gain est    */
/*  double : le texte reste lisible sur toute la longueur d'une page    */
/*  qui enchaîne les encarts, et l'identité colorée de la marque garde  */
/*  sa force parce qu'elle est employée avec parcimonie.                */
/*  Cette règle vaut pour tous les outils Cyriskintel.                  */
/* ------------------------------------------------------------------ */
.alerte{
  background:var(--encart-fond);color:var(--texte);
  border-radius:0 var(--rayon-sm) var(--rayon-sm) 0;
  padding:12px 16px;margin:0 0 18px;font-size:.92rem;border-left:4px solid var(--texte-doux);
}
.alerte-info{border-left-color:var(--bleu)}
.alerte-succes{border-left-color:var(--vert)}
.alerte-erreur{border-left-color:var(--rouge)}
.alerte-attention{border-left-color:var(--orange)}
.alerte strong{color:var(--bleu-profond)}
.alerte-erreur strong{color:var(--rouge)}
.alerte ul{margin:6px 0 0 18px;padding:0}

.encart{
  background:var(--encart-fond);color:var(--texte);border-left:4px solid var(--bleu);
  padding:14px 18px;border-radius:0 var(--rayon-sm) var(--rayon-sm) 0;margin:0 0 20px;font-size:.94rem;
}
.encart-violet{border-left-color:var(--violet)}
.encart-peche{border-left-color:var(--peche)}
.encart-vert{border-left-color:var(--vert)}
.encart-debat{border-left-color:var(--violet)}
.encart-attention{border-left-color:var(--orange)}
.encart-exercice{border-left-color:var(--bleu-vif)}
.encart-sources{border-left-color:var(--texte-doux)}
.encart h3,.encart h4{margin-top:0}
.encart p:last-child{margin-bottom:0}

/* ------------------------------------------------------------------ */
/*  Jauges et étapes                                                   */
/* ------------------------------------------------------------------ */
.jauge{background:var(--bordure);border-radius:999px;height:10px;overflow:hidden;min-width:90px}
.jauge span{display:block;height:100%;border-radius:999px;background:var(--bleu);transition:width .3s}
.jauge.violet span{background:var(--violet)}
.jauge.vert span{background:var(--vert)}
.jauge-fine{height:6px}
.ligne-jauge{display:flex;align-items:center;gap:10px}
.ligne-jauge b{font-size:.82rem;color:var(--texte-doux);font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}

.etapes{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 24px;padding:0;font-size:.84rem}
.etapes li{background:var(--blanc);border:1px solid var(--bordure);border-radius:999px;padding:6px 15px;color:var(--texte-doux)}
.etapes li.courante{background:var(--bleu);border-color:var(--bleu);color:#fff;font-weight:600}
.etapes li.faite{background:var(--bleu-clair);border-color:var(--bleu-clair);color:var(--bleu-profond)}

.onglets{display:flex;gap:4px;border-bottom:2px solid var(--bordure);margin:0 0 22px;flex-wrap:wrap}
.onglets a,.onglets button{
  background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;
  padding:9px 16px;font-family:inherit;font-size:.92rem;font-weight:600;
  color:var(--texte-doux);cursor:pointer;text-decoration:none;
}
.onglets a.actif,.onglets button.actif{color:var(--bleu-profond);border-bottom-color:var(--bleu)}
.onglets a:hover{color:var(--bleu-profond);text-decoration:none}

/* ------------------------------------------------------------------ */
/*  Programme : la carte des parcours                                  */
/* ------------------------------------------------------------------ */
.programme-legende{
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;
  background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--rayon);
  padding:12px 18px;margin-bottom:24px;font-size:.86rem;color:var(--texte-doux);
}
.programme-legende span{display:flex;align-items:center;gap:7px}
.pastille-p{width:12px;height:12px;border-radius:3px;flex:0 0 auto}

.colonnes-parcours{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));align-items:start}

.colonne-parcours{
  background:var(--blanc);border:1px solid var(--bordure);
  border-top:4px solid var(--teinte,var(--bleu));
  border-radius:var(--rayon);box-shadow:var(--ombre);overflow:hidden;
}
.colonne-parcours > header{padding:18px 20px 14px;text-align:center;border-bottom:1px solid var(--bordure-fine)}
.colonne-parcours > header h2{
  margin:0 0 2px;font-size:1.18rem;color:var(--bleu-profond);font-weight:650;
}
.colonne-parcours > header h2::before{content:"{ ";color:var(--teinte,var(--bleu))}
.colonne-parcours > header h2::after{content:" }";color:var(--teinte,var(--bleu))}
.colonne-parcours > header .devise{margin:0;font-size:.88rem;color:var(--texte-doux)}
.colonne-parcours > header .certif{
  display:inline-block;margin-top:10px;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;color:var(--teinte,var(--bleu));border:1px solid currentColor;
  border-radius:999px;padding:3px 11px;
}
.liste-cours{list-style:none;margin:0;padding:12px}
.liste-cours li{margin-bottom:8px}
.liste-cours li:last-child{margin-bottom:0}
.liste-cours a{
  display:flex;gap:12px;align-items:flex-start;text-decoration:none;
  background:color-mix(in srgb, var(--teinte,#0B769F) 9%, #fff);
  border:1px solid color-mix(in srgb, var(--teinte,#0B769F) 22%, #fff);
  border-radius:var(--rayon-sm);padding:11px 13px;
  color:var(--texte);font-size:.9rem;line-height:1.42;
  transition:transform .12s, box-shadow .12s, border-color .12s;
}
.liste-cours a:hover{
  transform:translateY(-1px);box-shadow:var(--ombre);
  border-color:var(--teinte,var(--bleu));color:var(--texte);text-decoration:none;
}
.liste-cours .code-cours{
  flex:0 0 auto;color:var(--teinte,var(--bleu));font-size:.82rem;padding-top:1px;
}
.liste-cours .titre-cours{flex:1;min-width:0}
.liste-cours .marque-badge{flex:0 0 auto;font-size:.9rem;color:var(--jaune);line-height:1.2}

/* Bandeau du tronc commun, au-dessus des colonnes */
.tronc{
  background:var(--blanc);border:2px dashed var(--bleu-profond);border-radius:var(--rayon);
  padding:20px 22px;margin-bottom:22px;
}
.tronc > h2{margin:0 0 4px;font-size:1.2rem}
.tronc > p{color:var(--texte-doux);margin:0 0 16px;font-size:.94rem;max-width:80ch}
.tronc-cours{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.tronc-cours a{
  display:block;text-decoration:none;color:var(--texte);
  border:1px solid var(--bordure);border-top:3px solid var(--teinte,var(--bleu));
  border-radius:var(--rayon-sm);padding:13px 15px;background:var(--surface-2);
  transition:box-shadow .12s, transform .12s;
}
.tronc-cours a:hover{box-shadow:var(--ombre);transform:translateY(-1px);color:var(--texte);text-decoration:none}
.tronc-cours .code-cours{color:var(--bleu);font-size:.8rem;display:block;margin-bottom:3px}
.tronc-cours b{display:block;font-weight:600;font-size:.94rem;color:var(--bleu-profond);line-height:1.35}
.tronc-cours span.d{display:block;margin-top:5px;font-size:.82rem;color:var(--texte-doux)}

/* ------------------------------------------------------------------ */
/*  Cartes de cours (catalogue)                                        */
/* ------------------------------------------------------------------ */
.carte-cours{
  background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--rayon);
  box-shadow:var(--ombre);display:flex;flex-direction:column;overflow:hidden;
  transition:transform .15s, box-shadow .15s;
}
.carte-cours:hover{transform:translateY(-2px);box-shadow:var(--ombre-forte)}
.carte-cours .visuel{
  min-height:76px;padding:14px 18px;display:flex;flex-direction:column;justify-content:center;gap:2px;
  background:linear-gradient(120deg,var(--bleu-profond),var(--teinte,var(--bleu)));
  color:#fff;position:relative;overflow:hidden;
}
.carte-cours .visuel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 1px,transparent 1px 10px);
}
.carte-cours .visuel .code-cours{font-size:1.3rem;position:relative}
.carte-cours .visuel-parcours{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72);position:relative}
.carte-cours .corps{padding:15px 18px 17px;display:flex;flex-direction:column;flex:1}
.carte-cours h3{margin:0 0 6px;font-size:1rem;color:var(--bleu-profond)}
.carte-cours p{font-size:.88rem;color:var(--texte-doux);flex:1;margin:0 0 14px}
.carte-cours .meta{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.prix{font-size:1.12rem;font-weight:700;color:var(--bleu-profond);font-variant-numeric:tabular-nums}
.prix.gratuit{color:var(--vert)}

/* ------------------------------------------------------------------ */
/*  Fiche de cours                                                     */
/* ------------------------------------------------------------------ */
.fiche{display:grid;gap:26px;grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){.fiche{grid-template-columns:minmax(0,1fr) 300px}}
.achat{position:sticky;top:20px;align-self:start}
.prix-grand{font-size:2rem;font-weight:700;color:var(--bleu-profond);line-height:1;font-variant-numeric:tabular-nums}
.prix-grand small{font-size:.78rem;color:var(--texte-doux);font-weight:600;letter-spacing:.04em}
.inclus{list-style:none;margin:16px 0 0;padding:0;font-size:.88rem}
.inclus li{display:flex;gap:9px;padding:6px 0;border-top:1px solid var(--bordure);color:var(--texte)}
.inclus li:first-child{border-top:0}
.inclus .ok{color:var(--vert);font-weight:700;flex:0 0 auto}
.emplacement-badge{
  border:2px dashed var(--bordure);border-radius:50%;width:120px;height:120px;margin:0 auto 10px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--texte-doux);font-size:.72rem;line-height:1.35;padding:12px;background:var(--surface-2);
}

.programme-cours{border:1px solid var(--bordure);border-radius:var(--rayon);overflow:hidden;background:var(--blanc);box-shadow:var(--ombre)}
.prog-module{border-top:1px solid var(--bordure)}
.prog-module:first-child{border-top:0}
.prog-module > h4{
  margin:0;padding:11px 18px;background:var(--surface-2);font-size:.94rem;
  color:var(--bleu-profond);font-weight:650;display:flex;justify-content:space-between;gap:12px;align-items:baseline;
}
.prog-module > h4 span{font-size:.78rem;color:var(--texte-doux);font-weight:600;white-space:nowrap}
.prog-module ul{list-style:none;margin:0;padding:0}
.prog-module li{display:flex;align-items:center;gap:11px;padding:9px 18px;border-top:1px solid var(--bordure-fine);font-size:.9rem}
.prog-module li .ico{flex:0 0 auto;width:18px;text-align:center;color:var(--texte-doux)}
.prog-module li .t{flex:1;min-width:0}
.prog-module li .d{color:var(--texte-doux);font-size:.8rem;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ------------------------------------------------------------------ */
/*  Leçon : lecteur audio, vidéo, corps de texte                       */
/* ------------------------------------------------------------------ */
.lecteur-audio{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--bleu-profond);color:#DCEAF1;border-radius:var(--rayon);
  padding:12px 16px;margin:0 0 24px;box-shadow:var(--ombre);
}
.lecteur-audio.epingle{position:sticky;top:12px;z-index:20}
.lecteur-audio .lire{
  width:38px;height:38px;border-radius:50%;border:0;flex:0 0 auto;cursor:pointer;
  background:var(--peche);color:#5C2E10;font-size:.95rem;
  display:flex;align-items:center;justify-content:center;
}
.lecteur-audio .lire:hover{background:#F7CDB5}
.lecteur-audio .piste{flex:1;min-width:160px}
.lecteur-audio .piste .titre{font-size:.76rem;color:#9DBCCB;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.lecteur-audio .barre{height:6px;border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden;cursor:pointer}
.lecteur-audio .barre span{display:block;height:100%;width:0;background:var(--peche);border-radius:999px}
.lecteur-audio .temps{font-size:.8rem;font-variant-numeric:tabular-nums;color:#9DBCCB;white-space:nowrap}
.lecteur-audio .action{
  background:rgba(255,255,255,.12);border:0;color:#DCEAF1;font-family:inherit;font-size:.78rem;
  padding:6px 11px;border-radius:var(--rayon-sm);cursor:pointer;font-weight:600;text-decoration:none;
}
.lecteur-audio .action:hover{background:rgba(255,255,255,.22);color:#fff;text-decoration:none}

.cadre-video{position:relative;padding-top:56.25%;border-radius:var(--rayon);overflow:hidden;background:#000;margin:0 0 24px}
.cadre-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.lecon-corps{max-width:70ch}
.lecon-corps p{font-size:1.02rem}
.lecon-corps h2{margin-top:34px}
.lecon-corps ul,.lecon-corps ol{padding-left:1.2em;margin:0 0 16px}
.lecon-corps li{margin-bottom:7px}
.lecon-corps img{border-radius:var(--rayon-sm);border:1px solid var(--bordure)}
.nav-lecon{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;
  border-top:1px solid var(--bordure);margin-top:32px;padding-top:20px;
}

/* Enregistreur audio */
.enregistreur{
  border:1px solid var(--bordure);border-radius:var(--rayon);background:var(--blanc);
  padding:16px 18px;box-shadow:var(--ombre);
}
.enregistreur .rang{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pastille-rec{
  width:12px;height:12px;border-radius:50%;background:var(--rouge);flex:0 0 auto;
  animation:pulse 1.4s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.niveau{height:8px;border-radius:999px;background:var(--bordure);overflow:hidden;flex:1;min-width:120px}
.niveau span{display:block;height:100%;width:0;background:var(--vert);border-radius:999px}
.chrono-rec{font-variant-numeric:tabular-nums;font-weight:600;color:var(--bleu-profond)}


/* ------------------------------------------------------------------ */
/*  Sections de leçon                                                  */
/* ------------------------------------------------------------------ */
.bloc-lecon{margin:0 0 24px}
.bloc-lecon > :first-child{margin-top:0}
.bloc-lecon > :last-child{margin-bottom:0}
.lecon-corps aside.bloc-lecon{max-width:none}

.encart-etiquette{
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  margin:0 0 8px;opacity:1;color:var(--texte-doux);
}
/* La couleur du type se lit sur l'étiquette et sur le liseré de gauche.
   Le fond reste celui de tous les encarts, gris très clair. */
.encart-violet    .encart-etiquette{color:var(--violet)}
.encart-debat     .encart-etiquette{color:var(--violet)}
.encart-peche     .encart-etiquette{color:var(--peche-texte)}
.encart-vert      .encart-etiquette{color:var(--vert)}
.encart-attention .encart-etiquette{color:var(--orange)}
.encart-exercice  .encart-etiquette{color:var(--bleu)}
.encart-sources   .encart-etiquette{color:var(--texte-doux)}

.encart-sources ul{margin:0;padding-left:1.15em;font-size:.9rem}
.encart-sources li{margin-bottom:8px}
.encart-sources a{word-break:break-word}

.sommaire-lecon{
  background:var(--blanc);border:1px solid var(--bordure);border-left:4px solid var(--peche);
  border-radius:0 var(--rayon) var(--rayon) 0;padding:16px 20px;margin:0 0 28px;max-width:70ch;
}
.sommaire-lecon p{
  margin:0 0 8px;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;color:var(--texte-doux);
}
.sommaire-lecon ol{margin:0;padding-left:1.25em;font-size:.92rem;columns:2;column-gap:28px}
.sommaire-lecon li{margin-bottom:5px;break-inside:avoid}
@media (max-width:640px){ .sommaire-lecon ol{columns:1} }

/* Éditeur de sections */
.section-edit{
  background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--rayon);
  box-shadow:var(--ombre);margin-bottom:16px;overflow:hidden;
}
.section-edit > header{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  padding:10px 16px;background:var(--surface-2);border-bottom:1px solid var(--bordure);
}
.section-edit > header .rang{
  width:26px;height:26px;border-radius:6px;background:var(--bleu-profond);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;flex:0 0 auto;
}
.section-edit > header input[type=text]{flex:1;min-width:180px}
.section-edit > header select{width:auto;min-width:150px}
.section-edit .corps{padding:14px 16px}
.section-edit textarea{min-height:200px;font-family:ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;font-size:.86rem;line-height:1.55}
.section-edit .pied{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:0 16px 14px}
.section-edit.type-debat > header{background:var(--violet-clair)}
.section-edit.type-terrain > header{background:var(--peche-clair)}
.section-edit.type-sources > header{background:#EEF3F6}
.section-edit.type-cle > header{background:var(--violet-clair)}
.section-edit.type-exercice > header{background:var(--vert-fond)}

/* ------------------------------------------------------------------ */
/*  Quiz                                                               */
/* ------------------------------------------------------------------ */
.quiz-entete{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--rayon);
  padding:14px 20px;margin-bottom:20px;box-shadow:var(--ombre);
}
.quiz-avance{flex:1;min-width:180px}
.quiz-avance p{margin:0 0 6px;font-size:.8rem;color:var(--texte-doux);letter-spacing:.05em;text-transform:uppercase}
.chrono{
  display:flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums;
  font-weight:700;font-size:1.15rem;color:var(--bleu-profond);
}
.chrono .anneau{width:38px;height:38px;flex:0 0 auto}
.chrono.urgent{color:var(--rouge)}
.chrono .anneau circle.jauge-c{transition:stroke-dashoffset .95s linear, stroke .3s}

.question-carte{background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--rayon);padding:24px 26px;box-shadow:var(--ombre)}
.question-enonce{font-size:1.1rem;font-weight:600;color:var(--bleu-profond);margin:0 0 6px;line-height:1.45}
.question-consigne{font-size:.84rem;color:var(--texte-doux);margin:0 0 20px}
.options{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.options li{margin:0}
.options label{
  display:flex;gap:12px;align-items:flex-start;font-weight:400;font-size:.97rem;color:var(--texte);
  border:1px solid var(--bordure);border-radius:var(--rayon-sm);padding:13px 15px;cursor:pointer;
  background:var(--blanc);transition:border-color .12s, background .12s;margin:0;line-height:1.5;
}
.options label:hover{border-color:var(--bleu);background:var(--bleu-clair)}
.options input{margin-top:3px;flex:0 0 auto}
.options input:checked + span{font-weight:600}
.options label:has(input:checked){border-color:var(--bleu);background:var(--bleu-clair)}
.options label.bonne{border-color:var(--vert);background:var(--vert-fond)}
.options label.mauvaise{border-color:var(--rouge);background:var(--rouge-fond)}
.options .lettre{
  flex:0 0 auto;width:22px;height:22px;border-radius:5px;background:var(--bleu-clair);
  color:var(--bleu-profond);font-size:.76rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}

.resultat-anneau{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.resultat-score{font-size:3rem;font-weight:700;line-height:1;color:var(--bleu-profond);font-variant-numeric:tabular-nums}
.resultat-score.reussi{color:var(--vert)}
.resultat-score.echoue{color:var(--rouge)}

/* ------------------------------------------------------------------ */
/*  Attestations                                                       */
/* ------------------------------------------------------------------ */
.attest{
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  background:var(--peche-clair);border:1px solid var(--peche);border-radius:var(--rayon);
  padding:16px 20px;margin-bottom:14px;
}
.attest .sceau{
  width:52px;height:52px;border-radius:50%;flex:0 0 auto;background:var(--violet);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;
}
.attest .txt{flex:1;min-width:190px}
.attest .txt b{display:block;color:var(--bleu-profond);font-size:.98rem}
.attest .txt span{font-size:.82rem;color:var(--peche-texte)}
.attest .code-verif{
  font-family:ui-monospace,Consolas,monospace;font-size:.8rem;background:#fff;
  padding:2px 7px;border-radius:4px;border:1px solid var(--peche);letter-spacing:.05em;
}

/* ------------------------------------------------------------------ */
/*  Pied de page                                                       */
/* ------------------------------------------------------------------ */
.pied{background:var(--bleu-profond);color:#9DBCCB;padding:22px 24px;font-size:.85rem}
.pied-inner{max-width:1180px;margin:0 auto}
.pied a{color:#BCD6E2}
.pied a:hover{color:#fff}
.pied p{margin:0 0 5px}
.pied strong{color:#fff}
.pied-legal{font-size:.79rem;color:#7997A7;margin-top:8px}

/* ------------------------------------------------------------------ */
/*  Adaptatif                                                          */
/* ------------------------------------------------------------------ */
@media (max-width:900px){
  .disposition{flex-direction:column}
  .menu-bascule{display:block}
  .menu{width:100%;flex:1 1 auto;display:none;padding:8px 0 20px}
  .menu.ouvert{display:block}
  .contenu{padding:22px 20px 44px;max-width:none}
  .hero{padding:28px 24px}
  .hero h1{font-size:1.6rem}
  .achat{position:static}
}
@media (max-width:520px){
  .entete{padding:10px 16px}
  .entete-logo img{height:40px}
  .entete-user{display:none}
}
@media print{
  .menu,.entete-actions,.menu-bascule,.nav-lecon,.lecteur-audio{display:none}
  body{background:#fff}
  .contenu{padding:0}
}