/* ==========================================================================
   KOBO SPORT — Cours en ligne
   Feuille de style unique. Aucune dépendance externe. ~9 Ko non minifié.
   Palette officielle : Rouge KOBO #E42501 · Noir KOBO #0A0A0A · Blanc #FFFFFF
   Typographie : SF Pro Display (police secondaire de la charte) via la pile
   système — 0 Ko de police téléchargée. Voir README pour ajouter Magistral.
   ========================================================================== */

:root{
  --rouge:#E42501;
  --rouge-fonce:#B31D01;
  --rouge-clair:#FFE9E4;
  --noir:#0A0A0A;
  --noir-2:#151515;
  --noir-3:#242424;
  --gris:#6B6B6B;
  --gris-clair:#EFEFEF;
  --gris-bord:#DDDDDD;
  --blanc:#FFFFFF;
  --max:1160px;
  --r:2px;
  --ombre:0 2px 0 rgba(0,0,0,.06);
  --display:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --texte:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{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:.01ms!important;transition-duration:.01ms!important}}
body{
  margin:0;font-family:var(--texte);font-size:17px;line-height:1.6;
  color:var(--noir);background:var(--blanc);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--rouge);outline-offset:2px}

/* --- Utilitaires ------------------------------------------------------- */
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--rouge);color:#fff;
  padding:12px 18px;z-index:100;font-weight:700}
.skip:focus{left:0}

h1,h2,h3,h4{font-family:var(--display);font-weight:800;font-style:italic;
  text-transform:uppercase;letter-spacing:-.02em;line-height:.98;margin:0 0 .4em}
h1{font-size:clamp(2.4rem,7vw,4.6rem)}
h2{font-size:clamp(1.8rem,4.4vw,3rem)}
h3{font-size:clamp(1.15rem,2.4vw,1.5rem);line-height:1.1}
h4{font-size:1rem;letter-spacing:0}
p{margin:0 0 1em}
.lead{font-size:clamp(1.05rem,2.1vw,1.3rem);line-height:1.5;color:#333;max-width:62ch}
.muted{color:var(--gris)}
.center{text-align:center}

/* Étiquette inclinée : rappel de l'italique du logo KOBO */
.tag{display:inline-block;background:var(--rouge);color:#fff;font-weight:800;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 14px;transform:skewX(-10deg);margin-bottom:18px}
.tag>span{display:inline-block;transform:skewX(10deg)}
.tag--sombre{background:var(--noir)}
.tag--gris{background:var(--gris-clair);color:var(--noir)}

.rule{width:74px;height:5px;background:var(--rouge);border:0;margin:0 0 22px}

/* --- Boutons ----------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--rouge);color:#fff;
  border:2px solid var(--rouge);text-decoration:none;font-weight:800;font-size:.95rem;
  letter-spacing:.02em;text-transform:uppercase;padding:14px 24px;cursor:pointer;
  border-radius:var(--r);transition:background .15s,color .15s,transform .15s}
.btn:hover{background:var(--rouge-fonce);border-color:var(--rouge-fonce);transform:translateY(-1px)}
.btn--ligne{background:transparent;color:var(--noir);border-color:var(--noir)}
.btn--ligne:hover{background:var(--noir);color:#fff;border-color:var(--noir)}
.btn--clair{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--clair:hover{background:#fff;color:var(--noir);border-color:#fff}
.btn--sm{padding:9px 15px;font-size:.8rem}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* --- En-tête ----------------------------------------------------------- */
.entete{background:var(--noir);color:#fff;position:sticky;top:0;z-index:40;
  border-bottom:1px solid var(--noir-3)}
.entete .wrap{display:flex;align-items:center;gap:18px;min-height:66px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.logo img{width:104px;filter:invert(1)}
.logo b{font-family:var(--display);font-style:italic;font-weight:800;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rouge);
  border-left:2px solid var(--noir-3);padding-left:10px}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{text-decoration:none;font-weight:600;font-size:.92rem;padding:9px 13px;
  color:#DEDEDE;border-radius:var(--r)}
.nav a:hover{color:#fff;background:var(--noir-3)}
.nav a[aria-current="page"]{color:#fff;box-shadow:inset 0 -3px 0 var(--rouge)}
.nav .btn{margin-left:8px}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--noir-3);
  color:#fff;padding:8px 12px;font-weight:700;cursor:pointer;border-radius:var(--r)}
@media (max-width:860px){
  .burger{display:block}
  .nav{position:absolute;left:0;right:0;top:100%;background:var(--noir);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 18px;
    border-bottom:3px solid var(--rouge);display:none}
  .nav[data-ouvert="1"]{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--noir-3)}
  .nav .btn{margin:14px 0 0;justify-content:center}
}

/* --- Héros ------------------------------------------------------------- */
.heros{background:var(--noir);color:#fff;position:relative;overflow:hidden;
  padding:64px 0 72px}
.heros::after{content:"";position:absolute;right:-90px;bottom:-60px;width:260px;height:200px;
  background:var(--rouge);opacity:.14;transform:skewX(-14deg)}
.heros .wrap{position:relative;z-index:1;display:grid;gap:38px;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}
.heros h1{color:#fff}
.heros h1 em{font-style:italic;color:var(--rouge)}
.heros p{color:#CFCFCF;font-size:clamp(1.05rem,2vw,1.25rem);max-width:52ch}
.heros-img{position:relative}
.heros-img img{width:100%;border-radius:var(--r)}
.heros-stats{display:flex;flex-wrap:wrap;gap:26px;margin-top:30px;
  padding-top:24px;border-top:1px solid var(--noir-3)}
.heros-stats div{min-width:88px}
.heros-stats b{display:block;font-family:var(--display);font-style:italic;font-weight:800;
  font-size:1.9rem;line-height:1;color:var(--rouge)}
.heros-stats span{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:#9C9C9C}
@media (max-width:860px){
  .heros{padding:44px 0 52px}
  .heros .wrap{grid-template-columns:1fr;gap:26px}
  .heros-img{order:-1}
}

/* En-tête de page intérieure */
.tete{background:var(--noir);color:#fff;padding:52px 0 46px;position:relative;overflow:hidden}
.tete::after{content:"";position:absolute;right:-70px;top:-40px;width:220px;height:170px;
  background:var(--rouge);opacity:.13;transform:skewX(-14deg)}
.tete .wrap{position:relative;z-index:1}
.tete h1{color:#fff;max-width:20ch}
.tete p{color:#CFCFCF;max-width:60ch;margin-bottom:0}
.fil{font-size:.82rem;color:#9C9C9C;margin-bottom:16px}
.fil a{color:#9C9C9C;text-decoration:none}
.fil a:hover{color:#fff;text-decoration:underline}

/* --- Sections ---------------------------------------------------------- */
.sect{padding:66px 0}
.sect--gris{background:var(--gris-clair)}
.sect--noir{background:var(--noir);color:#fff}
.sect--noir h2{color:#fff}
.sect--noir p{color:#CFCFCF}
.sect-tete{max-width:64ch;margin-bottom:38px}

/* --- Grille de cartes -------------------------------------------------- */
.grille{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.carte{background:#fff;border:1px solid var(--gris-bord);border-top:5px solid var(--rouge);
  padding:26px 24px 24px;display:flex;flex-direction:column;box-shadow:var(--ombre);
  border-radius:var(--r);transition:transform .15s,box-shadow .15s}
.carte:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.09)}
.carte h3{margin-bottom:10px}
.carte h3 a{text-decoration:none}
.carte:hover h3 a{color:var(--rouge)}
.carte p{font-size:.96rem;color:#454545}
.carte .meta{margin-top:auto;padding-top:16px;font-size:.8rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gris);border-top:1px solid var(--gris-bord)}
.carte a.couvre::after{content:"";position:absolute;inset:0}
.carte{position:relative}
.carte--bientot{border-top-color:var(--gris);background:#FAFAFA}
.carte--bientot h3{color:#3A3A3A}
.statut{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;padding:4px 9px;margin-bottom:14px;border-radius:var(--r)}
.statut--ok{background:var(--rouge-clair);color:var(--rouge-fonce)}
.statut--bientot{background:#E6E6E6;color:#4A4A4A}

/* Liste d'atouts */
.atouts{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  list-style:none;padding:0;margin:0}
.atouts li{border-left:3px solid var(--rouge);padding-left:18px}
.atouts h3{font-size:1.05rem;margin-bottom:8px}
.atouts p{font-size:.94rem;margin:0;color:#4A4A4A}
.sect--noir .atouts p{color:#B9B9B9}

/* --- Page de cours : programme ----------------------------------------- */
.cours-actions{background:var(--noir-2);border-radius:var(--r);padding:20px;
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}
.cours-actions .prog{margin-left:auto;font-size:.86rem;color:#B9B9B9}
.barre{height:6px;background:var(--noir-3);border-radius:99px;overflow:hidden;
  width:150px;display:inline-block;vertical-align:middle;margin-left:10px}
.barre i{display:block;height:100%;background:var(--rouge);width:0}

.lecons{list-style:none;margin:0;padding:0;border-top:1px solid var(--gris-bord)}
.lecon{border-bottom:1px solid var(--gris-bord);display:flex;align-items:center;
  gap:16px;padding:15px 6px;flex-wrap:wrap}
.lecon:hover{background:#FAFAFA}
.lecon[data-actif="1"]{background:var(--rouge-clair)}
.lecon-num{font-family:var(--display);font-style:italic;font-weight:800;font-size:1.05rem;
  color:var(--gris);width:34px;flex:0 0 34px;text-align:right}
.lecon[data-actif="1"] .lecon-num,.lecon[data-fait="1"] .lecon-num{color:var(--rouge)}
.jouer{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:2px solid var(--noir);
  background:#fff;cursor:pointer;display:grid;place-items:center;padding:0}
.jouer:hover{background:var(--noir)}
.jouer svg{width:15px;height:15px;fill:var(--noir)}
.jouer:hover svg{fill:#fff}
.lecon[data-actif="1"] .jouer{background:var(--rouge);border-color:var(--rouge)}
.lecon[data-actif="1"] .jouer svg{fill:#fff}
.lecon-txt{flex:1 1 230px;min-width:0}
.lecon-txt b{display:block;font-weight:700;font-size:1rem;line-height:1.25}
.lecon-txt span{font-size:.84rem;color:var(--gris)}
.lecon-liens{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-left:auto}
.lien-fichier{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;text-decoration:none;color:var(--noir);
  border:1px solid var(--gris-bord);padding:7px 11px;border-radius:var(--r);background:#fff}
.lien-fichier:hover{border-color:var(--noir);background:var(--noir);color:#fff}
.lien-fichier--pdf{color:var(--rouge-fonce);border-color:#F3C9BF}
.lien-fichier--pdf:hover{background:var(--rouge);border-color:var(--rouge);color:#fff}
.fait{font-size:.75rem;font-weight:800;color:var(--rouge);text-transform:uppercase;
  letter-spacing:.08em;display:none}
.lecon[data-fait="1"] .fait{display:inline}
@media (max-width:620px){
  .lecon-liens{margin-left:50px;width:100%}
  .lecon-txt{flex:1 1 100%}
}

/* Grille de documents PDF */
.docs{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  list-style:none;padding:0;margin:0}
.doc{display:flex;gap:13px;align-items:center;text-decoration:none;background:#fff;
  border:1px solid var(--gris-bord);padding:14px 16px;border-radius:var(--r)}
.doc:hover{border-color:var(--rouge);background:var(--rouge-clair)}
.doc svg{flex:0 0 auto;width:22px;height:22px;fill:var(--rouge)}
.doc b{display:block;font-size:.95rem;line-height:1.25}
.doc span{font-size:.78rem;color:var(--gris)}

/* --- Lecteur audio fixe ------------------------------------------------ */
.lecteur{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--noir);
  color:#fff;border-top:3px solid var(--rouge);transform:translateY(105%);
  transition:transform .22s ease;padding:10px 0 12px}
.lecteur[data-visible="1"]{transform:translateY(0)}
.lecteur .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.lecteur-titre{flex:1 1 190px;min-width:0}
.lecteur-titre b{display:block;font-size:.94rem;font-weight:700;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.lecteur-titre span{font-size:.76rem;color:#9C9C9C}
.cmd{background:none;border:0;cursor:pointer;color:#fff;padding:7px;display:grid;
  place-items:center;border-radius:50%}
.cmd:hover{background:var(--noir-3)}
.cmd svg{width:20px;height:20px;fill:#fff}
.cmd--play{background:var(--rouge);width:46px;height:46px}
.cmd--play:hover{background:var(--rouge-fonce)}
.cmd--play svg{width:17px;height:17px}
.vitesse{background:none;border:1px solid var(--noir-3);color:#fff;font-size:.76rem;
  font-weight:800;padding:7px 9px;cursor:pointer;border-radius:var(--r);min-width:48px}
.vitesse:hover{border-color:var(--rouge)}
.piste{flex:1 1 100%;display:flex;align-items:center;gap:10px;order:5}
.piste input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:5px;
  background:var(--noir-3);border-radius:99px;cursor:pointer}
.piste input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;
  border-radius:50%;background:var(--rouge);cursor:pointer;border:0}
.piste input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;
  background:var(--rouge);cursor:pointer;border:0}
.piste time{font-size:.76rem;color:#9C9C9C;font-variant-numeric:tabular-nums;min-width:42px}
.lecteur-fermer{background:none;border:0;color:#9C9C9C;cursor:pointer;font-size:1.3rem;
  line-height:1;padding:6px 8px}
.lecteur-fermer:hover{color:#fff}
body[data-lecteur="1"]{padding-bottom:118px}

/* --- Bandeaux d'information ------------------------------------------- */
.info{display:flex;gap:13px;align-items:flex-start;background:var(--rouge-clair);
  border-left:4px solid var(--rouge);padding:16px 18px;border-radius:var(--r);
  font-size:.94rem;margin:0 0 26px}
.info p{margin:0}
.info strong{font-weight:800}
.info--neutre{background:var(--gris-clair);border-left-color:var(--noir)}

/* --- Écosystème -------------------------------------------------------- */
.eco{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(264px,1fr))}
.eco a{display:block;text-decoration:none;border:1px solid var(--noir-3);padding:26px 24px;
  border-radius:var(--r);background:var(--noir-2);transition:border-color .15s,background .15s}
.eco a:hover{border-color:var(--rouge);background:#1B1B1B}
.eco h3{color:#fff;margin-bottom:8px}
.eco p{font-size:.94rem;margin:0 0 14px;color:#B9B9B9}
.eco em{font-style:normal;color:var(--rouge);font-weight:800;font-size:.82rem;
  letter-spacing:.08em;text-transform:uppercase}

/* --- Pied de page ------------------------------------------------------ */
.pied{background:var(--noir);color:#9C9C9C;padding:54px 0 30px;font-size:.92rem}
.pied a{color:#DEDEDE;text-decoration:none}
.pied a:hover{color:#fff;text-decoration:underline}
.pied-grille{display:grid;gap:30px;grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  padding-bottom:34px;border-bottom:1px solid var(--noir-3)}
.pied h4{color:#fff;font-size:.78rem;letter-spacing:.14em;margin-bottom:14px}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{margin-bottom:9px}
.pied img{width:112px;filter:invert(1);margin-bottom:14px}
.socials{display:flex;gap:9px;margin-top:14px}
.socials a{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--noir-3);
  border-radius:50%}
.socials a:hover{border-color:var(--rouge);background:var(--noir-3)}
.socials svg{width:17px;height:17px;fill:#DEDEDE}
.bas{padding-top:22px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-size:.82rem}
@media (max-width:820px){.pied-grille{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pied-grille{grid-template-columns:1fr}}

/* --- Divers ------------------------------------------------------------ */
.prose{max-width:70ch}
.prose h2{margin-top:44px}
.prose h3{margin-top:30px}
.prose ul{padding-left:22px}
.prose li{margin-bottom:8px}
.faq{border-top:1px solid var(--gris-bord)}
.faq details{border-bottom:1px solid var(--gris-bord);padding:16px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:1.02rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--rouge);font-weight:800;margin-right:11px}
.faq details[open] summary::before{content:"–"}
.faq p{margin:12px 0 0;color:#454545}
.hors-ligne-etat{font-size:.78rem;font-weight:700;color:var(--rouge);display:none}
[data-cache="1"] .hors-ligne-etat{display:inline}

/* ==========================================================================
   Ajouts v2 — bande-annonce vidéo, cahier d'accompagnement, modules
   ========================================================================== */

/* --- Cahier d'accompagnement ------------------------------------------- */
.cahier{display:grid;gap:26px;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;
  background:var(--rouge);color:#fff;padding:28px 30px;border-radius:var(--r);position:relative;
  overflow:hidden}
.cahier::after{content:"";position:absolute;right:-60px;top:-40px;width:200px;height:180px;
  background:rgba(0,0,0,.14);transform:skewX(-14deg)}
.cahier > *{position:relative;z-index:1;min-width:0}
.cahier h2{overflow-wrap:break-word;hyphens:auto}
.cahier-icone{width:96px;height:96px;display:grid;place-items:center;background:rgba(0,0,0,.18);
  border-radius:var(--r)}
.cahier-icone svg{width:46px;height:46px;fill:#fff}
.cahier h2{color:#fff;margin-bottom:8px}
.cahier p{margin:0;color:rgba(255,255,255,.92);font-size:1rem;max-width:56ch}
.cahier .btn{background:#fff;color:var(--rouge);border-color:#fff;white-space:nowrap}
.cahier .btn:hover{background:var(--noir);color:#fff;border-color:var(--noir)}
@media (max-width:820px){
  .cahier{grid-template-columns:1fr;gap:18px;padding:24px 22px;text-align:left}
  .cahier-icone{width:64px;height:64px}
  .cahier-icone svg{width:32px;height:32px}
  .cahier h2{font-size:clamp(1.3rem,6.2vw,1.9rem)}
  .cahier .btn{justify-content:center;white-space:normal;text-align:center}
}

/* --- Modules ------------------------------------------------------------ */
.module{margin-top:44px}
.module:first-of-type{margin-top:0}
.module-tete{display:flex;align-items:baseline;gap:14px;padding-bottom:12px;
  border-bottom:3px solid var(--noir);margin-bottom:0}
.module-num{font-family:var(--display);font-style:italic;font-weight:800;font-size:2.1rem;
  line-height:1;color:var(--rouge)}
.module-tete .module-num{margin-left:0;font-size:2.1rem;letter-spacing:0;text-transform:none;color:var(--rouge);white-space:normal}
.module-tete h3{margin:0;font-size:clamp(1.05rem,2.2vw,1.35rem)}
.module-tete span{margin-left:auto;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gris);white-space:nowrap}

/* Leçon avec description */
.lecon{align-items:flex-start}
.lecon-desc{flex:1 1 100%;margin:6px 0 0 92px;font-size:.93rem;line-height:1.55;color:#454545}
@media (max-width:620px){.lecon-desc{margin-left:50px}}
.sect--gris .lecon:hover{background:#F3F3F3}

/* Ligne d'accès rapide en tête de cours */
.acces{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.acces a{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:700;
  text-decoration:none;color:#fff;border:1px solid var(--noir-3);padding:9px 14px;
  border-radius:var(--r);background:var(--noir-2)}
.acces a:hover{border-color:var(--rouge);background:var(--noir-3)}

/* ==========================================================================
   Ajouts v3 — en-tête illustré et illustrations de leçon
   ========================================================================== */

/* En-tête de cours avec illustration */
.tete--img .wrap{display:grid;gap:34px;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:center}
.tete--img .tete-visuel img{width:100%;border-radius:var(--r);border:3px solid var(--rouge)}
@media (max-width:860px){
  .tete--img .wrap{grid-template-columns:1fr;gap:24px}
  .tete--img .tete-visuel{order:-1}
}

/* Illustration attachée à une leçon */
.lecon-visuel{flex:1 1 100%;margin:12px 0 4px 92px;display:flex;gap:12px;flex-wrap:wrap}
.lecon-visuel img{width:100%;max-width:300px;height:auto;border-radius:var(--r);
  border:1px solid var(--gris-bord);background:var(--gris-clair)}
.lecon-visuel figcaption{flex:1 1 100%;font-size:.78rem;color:var(--gris);margin-top:2px}
@media (max-width:620px){
  .lecon-visuel{margin-left:50px}
  .lecon-visuel img{max-width:100%}
}

/* ==========================================================================
   Ajouts v4 — bonus intégrés au programme (Journalisme sportif)
   ========================================================================== */
.lecon--bonus{padding-left:34px;background:#FCFAF9;position:relative}
.lecon--bonus::before{content:"";position:absolute;left:22px;top:0;bottom:50%;width:12px;
  border-left:2px solid #F3C9BF;border-bottom:2px solid #F3C9BF}
.lecon--bonus .jouer{width:38px;height:38px}
.lecon--bonus .jouer svg{width:13px;height:13px}
.lecon-avatar{flex:0 0 44px;width:44px;height:44px;border-radius:50%;object-fit:cover;
  border:2px solid var(--rouge);background:var(--gris-clair);align-self:center}
.lecon--bonus .lecon-txt b{font-weight:600}
.bonus-tag{display:block;font-style:normal;font-size:.7rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--rouge-fonce);margin-bottom:2px}
.lecon--bonus[data-fait="1"] .lecon-avatar{border-color:var(--noir)}
.lecon--bonus[data-actif="1"]{background:var(--rouge-clair)}
.lecon--bonus{align-items:center}
@media (max-width:620px){
  .lecon--bonus{padding-left:22px}
  .lecon--bonus::before{left:10px;width:8px}
  .lecon-avatar{flex-basis:36px;width:36px;height:36px}
  .lecon--bonus .lecon-liens{margin-left:46px}
}

.statut--eco{background:var(--rouge);color:#fff}

/* Accueil v3 — leçon de la semaine, vignettes et aperçu des leçons */
.semaine{background:#fff;border:1px solid var(--gris-bord);border-left:6px solid var(--rouge);border-radius:var(--r);padding:26px 26px 18px}
.semaine-tete h2{margin:14px 0 6px}
.semaine-tete p{color:#454545;max-width:640px;margin:0 0 10px}
.semaine .lecons{margin-top:6px}
.semaine .lecon{border-bottom:0}
.semaine .lecon-desc{margin-left:58px}
.semaine-lien{margin:4px 0 0 58px;font-weight:700}
.carte-vignette{display:block;width:calc(100% + 48px);max-width:none;height:auto;aspect-ratio:16/9;object-fit:cover;background:#eee;margin:-26px -24px 18px}
.carte-lecons{list-style:none;margin:12px 0 0;padding:0;font-size:.86rem;color:#2A2A2A}
.carte-lecons li{padding:5px 0 5px 16px;position:relative;border-top:1px solid var(--gris-bord)}
.carte-lecons li::before{content:"";position:absolute;left:0;top:.8em;width:7px;height:7px;background:var(--rouge);border-radius:50%}
.carte-lecons span{color:var(--gris);white-space:nowrap}
@media (max-width:620px){.semaine{padding:20px 16px 14px}.semaine .lecon-desc,.semaine-lien{margin-left:0}}

/* Ressources externes : cartes texte, sans image ni script pour rester légères */
.ressources{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));
  list-style:none;padding:0;margin:26px 0 0}
.ressource{height:100%;display:flex;flex-direction:column;gap:7px;text-decoration:none;
  background:#fff;border:1px solid var(--gris-bord);border-left:4px solid var(--rouge);
  padding:17px 18px;border-radius:var(--r)}
.ressource:hover{border-color:var(--rouge);background:var(--rouge-clair)}
.ressource b{font-size:.98rem;line-height:1.28}
.ressource span{font-size:.84rem;line-height:1.45;color:var(--gris)}
.ressource em{margin-top:auto;font-style:normal;font-size:.7rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--rouge-fonce)}
.ressources-note{max-width:72ch;color:#454545}
@media (max-width:720px){.ressources{grid-template-columns:1fr}}

/* Portraits cohérents et économes en données dans les biographies */
.carte--bio{padding-top:22px}
.bio-photo{width:104px;height:104px;object-fit:cover;object-position:center top;
  border-radius:50%;border:4px solid var(--rouge);background:var(--gris-clair);
  margin:0 0 18px}
.bios-prose{display:grid;gap:22px;margin-top:26px}
.bio-ligne{display:grid;grid-template-columns:112px minmax(0,1fr);gap:22px;align-items:start}
.bio-ligne .bio-photo{width:112px;height:112px;margin:0}
.bio-ligne p:last-child{margin-bottom:0}
@media (max-width:560px){
  .bio-ligne{grid-template-columns:76px minmax(0,1fr);gap:16px}
  .bio-ligne .bio-photo{width:76px;height:76px;border-width:3px}
}

.carte--agent{border-top-color:var(--noir);background:linear-gradient(135deg,#fff 0,#fff 76%,var(--rouge-clair) 76%)}
.carte--agent .btn{align-self:flex-start;margin-top:4px;position:relative;z-index:2}