/* ===== Design system Karavan (tokens repris de nellykempf.com / .kskin) ===== */
:root{
  --k-display:"Anton", sans-serif;
  --k-body:"Poppins", "Helvetica Neue", system-ui, sans-serif;
  --k-teal-900:#1a2d36; --k-teal-800:#2B424D; --k-teal:#407F91;
  --k-plum:#A1657B; --k-plum-700:#7D4858;
  --k-sand:#EDBC7D; --k-sand-700:#B8884F;
  --k-cream:#F8F2EB; --k-page:#f7f5f0;
  --k-ink:#1F2A30; --k-grey:#43525A;
  --k-line:rgba(43,66,77,.12);
}
*{box-sizing:border-box}
html,body{max-width:100%; overflow-x:hidden}
body{
  margin:0; background:var(--k-page); color:var(--k-ink);
  font-family:var(--k-body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%}
a{color:var(--k-teal)}
.wrap{width:100%; max-width:760px; margin:0 auto; padding:22px 16px 60px}

/* ===== Barre de navigation ===== */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; background:#fff; border-bottom:1px solid var(--k-line);
  position:sticky; top:0; z-index:20;
}
.brand{display:flex; align-items:center; text-decoration:none}
.brand img{height:42px; width:auto; display:block}
.nav-links{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.nav-links a{
  font:600 13px/1 var(--k-body); color:var(--k-grey); text-decoration:none; padding:8px 2px;
}
.nav-links a:hover{color:var(--k-teal)}
.nav-out{opacity:.65}

/* ===== Titres ===== */
h1{
  font-family:var(--k-display); text-transform:uppercase; color:var(--k-teal-800);
  font-size:clamp(26px,6vw,38px); line-height:1.08; letter-spacing:.01em; margin:18px 0 10px;
}
h2{
  font-family:var(--k-display); text-transform:uppercase; color:var(--k-teal-800);
  font-size:clamp(19px,4.5vw,25px); line-height:1.15; margin:30px 0 10px;
}
h3{font-weight:700; font-size:17px; color:var(--k-teal-800); margin:22px 0 8px}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font:600 12px/1 var(--k-body); letter-spacing:.12em; text-transform:uppercase; color:var(--k-teal);
}
.eyebrow::before{content:""; width:24px; height:1.5px; background:var(--k-teal); flex:0 0 auto}

/* ===== Cartes ===== */
.card{
  background:#fff; border:1px solid var(--k-line); border-radius:18px;
  padding:20px 20px; margin:14px 0;
}
a.card{display:block; text-decoration:none; color:inherit;
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s, border-color .2s}
a.card:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(43,66,77,.10); border-color:var(--k-teal)}

/* ===== Progression ===== */
.progress-block{margin:8px 0 4px}
.progress-bar{
  height:10px; border-radius:999px; background:rgba(64,127,145,.14); overflow:hidden;
}
.progress-bar i{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--k-teal), var(--k-teal-800));
  transition:width .5s cubic-bezier(.22,1,.36,1);
}
.progress-label{font:600 13px/1.3 var(--k-body); color:var(--k-grey); margin-top:6px}
.badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.badge{
  display:inline-flex; align-items:center; gap:7px;
  font:600 12.5px/1 var(--k-body); color:var(--k-teal-800);
  background:rgba(237,188,125,.25); border:1px solid rgba(184,136,79,.35);
  border-radius:999px; padding:8px 14px;
}

.objectif-rappel{
  font-size:14.5px; color:var(--k-grey); font-style:italic; margin:2px 0 16px;
}

/* ===== Héro du tableau de bord ===== */
.hero{
  background:linear-gradient(140deg, var(--k-teal-900), var(--k-teal-800) 45%, var(--k-teal));
  border-radius:24px; padding:30px 28px 26px; margin:16px 0 22px;
  color:var(--k-cream); box-shadow:0 28px 56px -26px rgba(43,66,77,.5);
}
.hero-eyebrow{color:var(--k-sand)}
.hero-eyebrow::before{background:var(--k-sand)}
.hero-titre{
  font-family:var(--k-display); text-transform:uppercase; color:var(--k-cream);
  font-size:clamp(30px,5.5vw,46px); line-height:1.04; margin:12px 0 8px;
}
.hero-sous{margin:0 0 22px; font-size:15px; color:rgba(248,242,235,.85); max-width:60ch}
.hero-stats{display:grid; gap:12px; grid-template-columns:1fr}
.hero-stat{
  background:rgba(248,242,235,.09); border:1px solid rgba(248,242,235,.16);
  border-radius:16px; padding:16px 18px; display:flex; flex-direction:column; align-items:flex-start;
}
.hero-stat-label{
  font:600 11px/1 var(--k-body); letter-spacing:.13em; text-transform:uppercase;
  color:var(--k-sand); margin-bottom:8px;
}
.hero-stat-valeur{font-weight:600; font-size:16.5px; line-height:1.3; color:var(--k-cream)}
.hero-stat-sous{font-size:12.5px; color:rgba(248,242,235,.75); margin-top:6px}
.hero-progress{width:100%; margin-top:10px; background:rgba(248,242,235,.18)}
.hero-progress i{background:var(--k-sand)}
a.hero-stat-cta{text-decoration:none; transition:transform .2s cubic-bezier(.22,1,.36,1), border-color .2s}
a.hero-stat-cta:hover{transform:translateY(-2px); border-color:var(--k-sand)}
@media(min-width:760px){
  .hero-stats{grid-template-columns:1fr 1fr 1.4fr}
}

/* ===== Grille accueil ===== */
.dash-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:0}
@media(min-width:1000px){
  .wrap:has(.dash-grid){max-width:1100px}
  .dash-grid{grid-template-columns:minmax(0,1fr) 300px; gap:28px; align-items:start}
  .dash-side{position:sticky; top:76px}
}

/* ===== Liste d'exercices ===== */
.ex-row{display:flex; align-items:center; gap:12px}
.ex-num{
  flex:0 0 auto; width:38px; height:38px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--k-display); font-size:15px; color:#fff; background:var(--k-teal);
}
.ex-row.is-fait .ex-num{background:var(--k-sand-700)}
.ex-meta{min-width:0}
.ex-title{font-weight:600; font-size:15.5px; color:var(--k-teal-800); line-height:1.3}
.ex-sub{font-size:13px; color:var(--k-grey); margin-top:2px}
.ex-state{margin-left:auto; flex:0 0 auto; font-size:12.5px; font-weight:600; color:var(--k-grey)}
.ex-state.fait{color:var(--k-sand-700)}
.ex-state.en_cours{color:var(--k-teal)}

/* ===== Fil d'ariane ===== */
.ariane{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font:600 12.5px/1.4 var(--k-body); color:var(--k-grey); margin:6px 0 4px;
}
.ariane a{color:var(--k-grey); text-decoration:none; border-bottom:1px solid rgba(43,66,77,.18); padding-bottom:1px}
.ariane a:hover{color:var(--k-teal); border-color:var(--k-teal)}
.ariane span{color:#B4A895}
.ariane b{color:var(--k-teal-800); font-weight:600}
/* Le palier qui n'a qu'une mise en application n'a pas de page à lui : maillon non cliquable. */
.ariane span.ariane-plat{color:var(--k-grey)}

/* ===== Pages larges (exercice, palier, admin) ===== */
@media(min-width:900px){
  .wrap:has(.page-large){max-width:1240px}
}
.meta-strip{
  display:grid; gap:12px; margin:14px 0 18px;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
}
.info-tuile{
  display:flex; gap:10px; align-items:flex-start;
  background:#fff; border:1px solid var(--k-line); border-radius:16px;
  padding:14px 16px; font-size:13.5px; line-height:1.5; color:var(--k-ink);
}
.nav-exercices{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:26px;
}
/* Le lien du milieu remonte d'un cran : vers le palier depuis un exercice,
   vers le carnet depuis un palier. */
.nav-exercices .nav-vide{flex:0 0 1px}
.nav-remonte{
  order:0; font-size:13.5px; color:var(--k-teal-800); text-decoration:underline;
  text-underline-offset:3px; text-align:center;
}
.nav-remonte:hover{color:var(--k-teal)}
@media(max-width:600px){
  .nav-exercices{flex-direction:column; align-items:stretch}
  .nav-exercices .btn{text-align:center}
  .nav-exercices .nav-vide{display:none}
  .nav-remonte{order:2; margin-top:4px}
}

/* ===== Grille exercice + sidebar ===== */
.page-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:0}
.side-card{padding:16px 18px}
.side-item{
  display:flex; gap:10px; align-items:flex-start;
  font-size:13.5px; line-height:1.5; color:var(--k-ink); margin-bottom:14px;
}
.side-item:last-child{margin-bottom:0}
.side-ico{
  flex:0 0 auto; width:30px; height:30px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(64,127,145,.1); color:var(--k-teal); margin-top:1px;
}
.side-ico svg{width:16px; height:16px}
.side-ressource{
  display:block; font-size:13px; line-height:1.45; margin-bottom:7px;
  color:var(--k-teal); text-decoration:none;
  border-bottom:0;
}
.side-ressource:hover{text-decoration:underline}
.side-ressource:last-child{margin-bottom:0}
.side-ressource.-texte{color:var(--k-ink)}
span.side-ressource:hover{text-decoration:none}
.side-label{
  display:block; font:600 11px/1 var(--k-body); letter-spacing:.12em;
  text-transform:uppercase; color:var(--k-teal); margin-bottom:4px;
}
.side-ex{
  display:flex; align-items:flex-start; gap:9px; padding:7px 6px;
  text-decoration:none; border-radius:10px; font-size:13px; line-height:1.35; color:var(--k-grey);
}
.side-ex:hover{background:rgba(64,127,145,.07)}
.side-ex.courant{background:rgba(64,127,145,.1); color:var(--k-teal-800); font-weight:600}
.side-ex .dot{
  flex:0 0 auto; width:9px; height:9px; border-radius:50%; margin-top:4px;
  background:rgba(43,66,77,.18);
}
.side-ex .dot.en_cours{background:var(--k-teal)}
.side-ex .dot.fait{background:var(--k-sand-700)}
@media(max-width:999px){
  .aside-list{display:none}
}
@media(min-width:1000px){
  .wrap:has(.page-grid){max-width:1100px}
  .page-grid{grid-template-columns:minmax(0,1fr) 280px; gap:28px; align-items:start}
  .side{order:2; position:sticky; top:76px}
  .page-main{order:1}
}

/* ===== Contenu d'exercice ===== */
.exo-content{font-size:15.5px}
.exo-content p{margin:12px 0}
.exo-content ul, .exo-content ol{padding-left:22px}
.exo-content li{margin:6px 0}
.table-wrap{overflow-x:auto; margin:16px 0}
.exo-content table{
  /* Les tableaux à remplir prennent toute la largeur de la section : à 400 px de large,
     on ne peut rien écrire dedans. Le .table-wrap prend le relais en scroll sur mobile. */
  width:100%; border-collapse:collapse; font-size:14px; margin:0;
}
.exo-content th, .exo-content td{
  border:1px solid var(--k-line); padding:9px 11px; text-align:left; vertical-align:top; min-width:110px;
}
.exo-content th{background:rgba(64,127,145,.08); font-weight:600; color:var(--k-teal-800)}
.callout{
  border-radius:0 12px 12px 0; padding:13px 16px; margin:16px 0; font-size:14.5px;
  background:#f1efe9; border-left:4px solid var(--k-grey);
}
.callout p:first-child{margin-top:0}
.callout p:last-child{margin-bottom:0}
.callout.-yellow{background:rgba(237,188,125,.16); border-left-color:var(--k-sand-700)}
.callout.-blue{background:rgba(64,127,145,.08); border-left-color:var(--k-teal)}
.callout.-green{background:rgba(101,161,124,.1); border-left-color:#65A17C}

/* Champs à remplir : blancs sur fond blanc, lignes sable (cf. charte formulaires) */
.k-field, .k-cell{
  font-family:var(--k-body); font-size:15px; color:var(--k-ink);
  background:#fff; border:none; border-bottom:1.5px solid var(--k-sand);
  border-radius:0; padding:6px 4px; width:100%;
  transition:border-color .2s, background .2s;
}
textarea.k-field{
  border:1.5px solid rgba(184,136,79,.45); border-radius:12px; min-height:64px;
  resize:none; overflow:hidden; padding:12px 14px; background:#fff;
}
.k-field:focus, .k-cell:focus{outline:none; border-color:var(--k-teal); background:rgba(64,127,145,.03)}
/* Cellule à choisir : boutons segmentés, un choix par ligne */
.k-select{display:flex; flex-direction:column; gap:6px}
.k-select button{
  width:100%; padding:8px 11px; cursor:pointer; text-align:left;
  font:600 14px/1.2 var(--k-body); color:var(--k-grey);
  background:#fff; border:1.5px solid var(--k-line); border-radius:9px;
  transition:all .15s;
}
.k-select button:hover{border-color:var(--k-teal)}
.k-select button.actif{background:var(--k-teal); border-color:var(--k-teal); color:#fff}

.k-check{display:flex; align-items:flex-start; gap:10px; margin:8px 0; font-size:15px}
.k-check input[type=checkbox]{
  width:20px; height:20px; margin-top:2px; accent-color:var(--k-teal); flex:0 0 auto;
}
.k-check > span{flex:1 1 auto; min-width:0}
/* Champ de réponse au fil d'une ligne (après un « : ») : lisible, jamais riquiqui */
.k-check .k-field:not([type=checkbox]){
  display:inline-block; width:auto; min-width:240px; max-width:100%;
}
.save-state{
  position:fixed; bottom:16px; right:16px; z-index:30;
  font:600 12.5px/1 var(--k-body); color:var(--k-teal-800);
  background:#fff; border:1px solid var(--k-line); border-radius:999px;
  padding:9px 16px; box-shadow:0 8px 20px rgba(43,66,77,.12);
  opacity:0; transition:opacity .3s;
}
.save-state.show{opacity:1}

.ligne-total td{background:rgba(64,127,145,.07); color:var(--k-teal-800)}
.urgences{
  background:rgba(161,101,123,.09); border:1px solid rgba(161,101,123,.28);
  border-radius:14px; padding:14px 18px; margin:14px 0 0; font-size:14.5px;
}
.urgences > b{color:var(--k-plum-700)}
.urgences ul{margin:8px 0 0; padding-left:20px}
.urgences li{margin:5px 0}
.urgences span{color:var(--k-grey); font-size:13px}
pre.prompt{
  background:var(--k-teal-900); color:var(--k-cream);
  border-radius:12px; padding:16px 18px; font-size:13px; line-height:1.55;
  overflow-x:auto; white-space:pre-wrap; word-break:break-word;
  font-family:"SF Mono", Menlo, Consolas, monospace;
}
mark.a-trancher{
  background:rgba(237,188,125,.5); border-radius:4px; padding:1px 6px;
  font-size:.88em; font-weight:600;
}

/* ===== Statut d'exercice (segmented) ===== */
.statut-picker{display:flex; gap:8px; flex-wrap:wrap; margin:20px 0 6px}
.statut-picker button{
  font:600 13.5px/1 var(--k-body); color:var(--k-grey);
  background:#fff; border:1.5px solid var(--k-line); border-radius:999px;
  padding:11px 18px; cursor:pointer; transition:all .2s;
}
.statut-picker button.active{background:var(--k-teal); border-color:var(--k-teal); color:#fff}
.statut-picker button.active[data-statut="fait"]{background:var(--k-sand-700); border-color:var(--k-sand-700)}

/* ===== Visuel ZMOT (parcours en 5 moments) ===== */
.zmot{max-width:560px; margin:18px auto}
.zmot-etape{
  display:flex; gap:14px; align-items:flex-start;
  background:#fff; border:1px solid var(--k-line); border-left:4px solid var(--k-teal);
  border-radius:0 12px 12px 0; padding:14px 16px;
}
.zmot-num{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--k-body); font-weight:700; font-size:15px; color:#fff;
  background:var(--k-teal); line-height:1;
}
.zmot-etape b{display:block; color:var(--k-teal-800); font-size:15px}
.zmot-etape > div span{display:block; font-size:13.5px; color:var(--k-grey); line-height:1.5; margin-top:3px}
.zmot-fleche{text-align:center; color:var(--k-sand-700); font-size:20px; line-height:1; margin:4px 0}
.zmot-etape:nth-child(3){border-left-color:var(--k-sand-700)}
.zmot-etape:nth-child(5){border-left-color:var(--k-plum)}

/* ===== Matrice 2×2 (3.2 trafic × conversion, 6.10 BCG) ===== */
.mx{display:flex; gap:8px; max-width:620px; margin:18px auto; align-items:stretch}
.mx-y{display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.mx-y span{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--k-grey);
}
.mx-body{flex:1; min-width:0}
.mx-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.mx-case{background:#fff; border:1px solid var(--k-line); border-radius:12px; padding:13px 14px}
.mx-case b{display:block; color:var(--k-teal-800); font-size:14px; letter-spacing:.03em; margin-bottom:4px}
.mx-case span{display:block; font-size:12.5px; color:var(--k-grey); line-height:1.5}
.mx-case.-sand{background:rgba(237,188,125,.16); border-color:rgba(184,136,79,.35)}
.mx-case.-teal{background:rgba(64,127,145,.10); border-color:rgba(64,127,145,.30)}
.mx-case.-plum{background:rgba(161,101,123,.10); border-color:rgba(161,101,123,.28)}
.mx-case.-grey{background:rgba(67,82,90,.06)}
.mx-x{text-align:center; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--k-grey); margin-top:8px}

/* ===== Ressources d'exercice ===== */
.ressources-detail{list-style:none; padding:0; margin:6px 0 0}
.ressources-detail li{
  padding:12px 0; border-bottom:1px solid var(--k-line); font-size:14.5px; line-height:1.55;
}
.ressources-detail li:last-child{border-bottom:none; padding-bottom:0}
.ressources-detail a{font-weight:600}
.ressources-detail b{color:var(--k-teal-800)}
.ressource-detail{display:block; color:var(--k-grey); margin-top:3px; font-size:13.5px}

/* ===== Documents d'exercice ===== */
.upload-zone{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border:1.5px dashed rgba(184,136,79,.55); border-radius:14px;
  padding:16px 18px; font-size:14px; color:var(--k-grey);
  transition:border-color .2s, background .2s;
}
.upload-zone.survol{border-color:var(--k-teal); background:rgba(64,127,145,.05)}
.upload-zone.envoi{opacity:.5; pointer-events:none}
/* Source externe : le lien d'une page Notion, d'un Drive ou d'un Figma. */
.lien-source{margin-top:14px}
.lien-source-ligne{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.lien-source-ligne .k-field{flex:1 1 240px; min-width:0}
.lien-source-ligne .btn{flex:0 0 auto}
.fichiers-liste li.est-lien .fichier-nom{color:var(--k-teal-800)}
.fichiers-liste{list-style:none; padding:0; margin:12px 0 0}
.fichiers-liste li{
  display:flex; align-items:center; gap:12px; padding:8px 0;
  border-bottom:1px solid var(--k-line); font-size:14px;
}
.fichiers-liste img{
  width:52px; height:52px; object-fit:cover; border-radius:8px;
  border:1px solid var(--k-line); display:block;
}
.fichier-nom{color:var(--k-teal); text-decoration:none; word-break:break-all}
.fichier-nom:hover{text-decoration:underline}
.fichier-suppr{
  margin-left:auto; border:none; background:none; cursor:pointer;
  color:var(--k-grey); font-size:15px; padding:6px 8px; border-radius:8px;
}
.fichier-suppr:hover{background:rgba(161,101,123,.12); color:var(--k-plum-700)}

.bandeau-fait{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:40; width:min(480px, calc(100% - 28px));
  background:#fff; border:1px solid var(--k-line); border-radius:18px;
  padding:16px 18px; box-shadow:0 18px 44px rgba(43,66,77,.22);
}
.bandeau-fait p{margin:0 0 12px; font-weight:600; font-size:14.5px; color:var(--k-teal-800)}
.bandeau-fait div{display:flex; gap:10px; flex-wrap:wrap}

/* ===== Boutons ===== */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font:600 15px/1 var(--k-body); padding:14px 24px; border-radius:999px;
  background:var(--k-teal); color:var(--k-cream); border:none; cursor:pointer;
  text-decoration:none; transition:background .24s, transform .24s;
}
.btn:hover{background:var(--k-teal-800)}
.btn.-sand{background:var(--k-sand); color:var(--k-teal-800)}
.btn.-sand:hover{background:var(--k-sand-700); color:#fff}
.btn.-ghost{background:transparent; border:1.5px solid var(--k-line); color:var(--k-teal-800)}

/* ===== Connexion ===== */
.login-hero{max-width:460px; margin:8vh auto 0; text-align:center}
.login-hero .brand-big{
  font-family:var(--k-display); text-transform:uppercase; font-size:40px;
  color:var(--k-teal-800); line-height:1;
}
.login-card{max-width:460px; margin:24px auto; text-align:left}
.login-card label{font-weight:600; font-size:14px; color:var(--k-teal-800); display:block; margin-bottom:8px}
.login-card input[type=email]{
  width:100%; font:400 16px/1.4 var(--k-body); padding:14px 16px;
  background:#fff; border:1.5px solid rgba(184,136,79,.45); border-radius:12px; margin-bottom:14px;
}
.login-card input[type=email]:focus{outline:none; border-color:var(--k-teal)}
.notice{
  border-radius:14px; padding:14px 16px; margin:14px 0; font-size:14.5px;
  background:rgba(64,127,145,.08); border:1px solid rgba(64,127,145,.22); color:var(--k-teal-800);
}
.notice.-err{background:rgba(161,101,123,.1); border-color:rgba(161,101,123,.3); color:var(--k-plum-700)}

/* ===== Bibliothèque ===== */
.badge-zip{
  display:inline-block; vertical-align:2px; margin-left:8px;
  font:600 10.5px/1 var(--k-body); letter-spacing:.08em; text-transform:uppercase;
  color:var(--k-sand-700); background:rgba(237,188,125,.22);
  border:1px solid rgba(184,136,79,.35); border-radius:999px; padding:4px 9px;
}
.badge-outil{
  color:var(--k-teal); background:rgba(64,127,145,.1); border-color:rgba(64,127,145,.3);
  text-transform:none; letter-spacing:.02em; font-size:11.5px;
}
.cmd-liste{margin-top:14px; border-top:1px solid var(--k-line)}
.cmd-ligne{
  display:flex; gap:12px; align-items:flex-start; padding:9px 0;
  border-bottom:1px solid var(--k-line); font-size:13.5px;
}
.cmd-nom{
  flex:0 0 auto; font-family:"SF Mono", Menlo, Consolas, monospace; font-size:12.5px;
  color:var(--k-teal-800); background:rgba(64,127,145,.09);
  border-radius:7px; padding:4px 8px; white-space:nowrap;
}
.cmd-desc{color:var(--k-grey); line-height:1.5}
.cmd-prerequis{display:block; font-size:12px; color:var(--k-sand-700); font-style:normal; margin-top:2px}
@media(max-width:600px){
  .cmd-ligne{flex-direction:column; gap:5px}
}

/* ===== Agents mis à jour ===== */
.badge-maj{
  color:var(--k-teal); background:rgba(64,127,145,.12); border-color:rgba(64,127,145,.32);
  text-transform:none; letter-spacing:.02em; font-size:11px; margin-left:0; margin-top:3px;
}
/* La bulle « Mis à jour le … » s'ouvre au clic sur le détail de ce qui a changé. */
.maj-bulle{display:block; margin-top:6px}
.maj-bulle > summary{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; list-style:none;
  margin-left:0; vertical-align:baseline;
}
.maj-bulle > summary::-webkit-details-marker{display:none}
.maj-bulle > summary::after{content:"›"; font-size:13px; line-height:1; transition:transform .15s ease}
.maj-bulle[open] > summary::after{transform:rotate(90deg)}
.maj-bulle > summary:hover{background:rgba(64,127,145,.2)}
.maj-bulle > summary:focus-visible{outline:2px solid var(--k-teal); outline-offset:2px}
.maj-bulle-texte{
  margin-top:8px; padding:11px 13px; font-size:13px; line-height:1.55; color:var(--k-grey);
  background:rgba(64,127,145,.06); border:1px solid rgba(64,127,145,.2); border-radius:10px;
}
.maj-bulle-texte p{margin:0}
.maj-bulle-texte p + p{margin-top:6px}
.maj-bulle-zip{color:var(--k-sand-700)}

/* ===== Recherche glossaire ===== */
.glo-recherche{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1.5px solid rgba(184,136,79,.45); border-radius:999px;
  padding:12px 18px; margin:14px 0 4px;
}
.glo-recherche:focus-within{border-color:var(--k-teal)}
.glo-recherche svg{width:18px; height:18px; color:var(--k-teal); flex:0 0 auto}
.glo-recherche input{
  flex:1; min-width:0; border:none; outline:none; background:none;
  font:400 15.5px/1.4 var(--k-body); color:var(--k-ink);
}

/* ===== Tableau admin ===== */
@media(min-width:1000px){
  .wrap:has(.admin-page){max-width:1240px}
}
/* En bloc scrollable sur petit écran ; vraie table (donc pleine largeur) dès qu'il y a la place */
.admin-table{width:100%; border-collapse:collapse; font-size:14px; display:block; overflow-x:auto}
@media(min-width:900px){ .admin-table{display:table; table-layout:auto} }
.admin-table th, .admin-table td{border-bottom:1px solid var(--k-line); padding:10px 12px; text-align:left; white-space:nowrap}
.admin-table th{font-weight:600; color:var(--k-teal-800)}
.admin-table a{font-weight:600}

/* ===== Pied ===== */
.foot{
  text-align:center; padding:26px 16px 40px; font-size:12.5px; color:#B4A895;
}

@media(min-width:700px){
  body{font-size:17px}
  .wrap{padding-top:34px}
}

/* Sneak peek accompagnement (espace async) : petit flash du bloc upgrade au clic */
.sneak-item{ border-radius:16px; transition:transform .18s ease; }
.sneak-item:hover{ transform:translateY(-2px); }
#sneak-msg.sneak-flash{ box-shadow:0 0 0 3px var(--k-sand); transition:box-shadow .2s ease; }

/* ===== Vignettes de la page d'accueil (façon Notion) ===== */
.tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:16px; margin-top:8px; }
.tile{ display:flex; flex-direction:column; gap:7px; padding:20px; border-radius:18px; background:#fff; border:1px solid var(--k-line); text-decoration:none; color:inherit; min-height:124px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s; }
.tile:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(43,66,77,.10); border-color:var(--k-teal); }
.tile-emoji{ font-size:26px; line-height:1; }
.tile-titre{ font-weight:600; font-size:16px; color:var(--k-teal-800); }
.tile-desc{ font-size:13.5px; color:var(--k-grey); line-height:1.5; }
.tile-badge{ align-self:flex-start; margin-top:auto; font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--k-teal); background:rgba(64,127,145,.12); padding:3px 9px; border-radius:999px; }
.tile-badge.-reserve{ color:var(--k-plum-700); background:rgba(161,101,123,.12); }
.tile.-lock{ background:#faf8f4; border-style:dashed; }
.tile.-lock .tile-titre{ color:var(--k-grey); }
.tile.-lock .tile-emoji{ filter:grayscale(1); opacity:.7; }
.tile.-lock .tile-badge{ color:var(--k-plum-700); background:rgba(161,101,123,.12); }

/* Libellés de formulaire (relectures) + bandeau de verrou */
.lbl{ display:block; font-weight:600; font-size:13.5px; color:var(--k-teal-800); }
.verrou-banner{ margin-top:24px; }

/* ===== Section « Pour aller plus loin » (accueil async) ===== */
.plus-bloc{ border:1px solid rgba(64,127,145,.28); border-radius:20px; padding:24px 26px 28px; margin-top:8px;
  background:linear-gradient(180deg, rgba(64,127,145,.06), rgba(64,127,145,0)); }
.plus-bloc .eyebrow{ color:var(--k-teal); }
.plus-titre{ font-size:20px; color:var(--k-teal-800); margin:8px 0 0; }
.plus-intro{ color:var(--k-grey); margin:10px 0 16px; max-width:66ch; line-height:1.55; }
.tile.-plus{ background:#fff; border-style:dashed; border-color:rgba(64,127,145,.35); }
.tile.-plus:hover{ border-color:var(--k-teal); }

/* ===== Calendrier des lives ===== */
.live-row{ display:flex; gap:16px; justify-content:space-between; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--k-line); }
.live-row:last-child{ border-bottom:0; }
.live-main{ min-width:0; }
.live-type{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--k-teal); }
.live-titre{ font-weight:600; font-size:15px; color:var(--k-teal-800); margin-top:3px; }
.live-points{ margin:8px 0 0; padding-left:18px; color:var(--k-grey); font-size:13.5px; line-height:1.55; }
.live-side{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; text-align:right; white-space:nowrap; }
.live-row.-mc{ background:rgba(161,101,123,.06); border-radius:12px; border-bottom:0; margin:4px 0; padding:14px; }

/* Suite du calendrier, repliée par défaut */
.live-suite summary{ cursor:pointer; font-weight:600; color:var(--k-teal-800) }

/* Fiche récap d'un live passé */
.live-passe{ margin-bottom:14px }
.live-passe.-mc{ border-left:3px solid var(--k-plum) }
.live-passe-tete{ display:flex; gap:14px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap }
.live-resume{ margin:10px 0 0; font-size:14.5px; line-height:1.6 }
.live-cles{ margin:12px 0 0; padding-left:0; list-style:none }
.live-cles li{ position:relative; padding-left:18px; margin-bottom:7px; font-size:14.5px; line-height:1.55 }
.live-cles li::before{ content:""; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background:var(--k-teal) }
.live-points{ margin-top:10px }
.live-points summary{ cursor:pointer; font-size:14px; font-weight:600; color:var(--k-teal) }
.live-points div{ margin-top:8px; font-size:14px; line-height:1.6; padding-left:14px; border-left:2px solid var(--k-line) }
.live-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px }
.live-row.-mc .live-type{ color:var(--k-plum-700); }

/* ===== Base de ressources ===== */
.res-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.res-tag{ font-size:11px; color:var(--k-teal); background:rgba(64,127,145,.10); padding:2px 8px; border-radius:999px; }
.res-points{ margin-top:10px; }
.res-points summary{ cursor:pointer; font-size:13px; font-weight:600; color:var(--k-teal); }
.res-points ul{ margin:8px 0 0; padding-left:18px; color:var(--k-grey); font-size:13.5px; line-height:1.55; }

/* ===== Signaler un retour ===== */
.fb-types{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.fb-type{ display:flex; align-items:center; gap:7px; font-size:14px; padding:8px 13px; border:1px solid var(--k-line); border-radius:999px; cursor:pointer; }
.fb-type:hover{ border-color:var(--k-teal); }
.foot a{ color:var(--k-grey); text-decoration:underline; }
.foot a:hover{ color:var(--k-teal); }

/* ===== Tableau de bord admin ===== */
.admin-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:14px; margin:6px 0 30px; }
.stat-card{
  position:relative; display:flex; flex-direction:column; gap:6px; padding:20px;
  background:#fff; border:1px solid var(--k-line); border-radius:18px;
  text-decoration:none; color:inherit; overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.stat-card::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--k-teal); opacity:.55 }
a.stat-card:hover{ transform:translateY(-2px); border-color:rgba(64,127,145,.45); box-shadow:0 8px 22px rgba(43,66,77,.09) }
.stat-num{ font-family:var(--k-display); font-size:38px; color:var(--k-teal-800); line-height:1; }
.stat-lab{ font-size:13px; color:var(--k-grey); line-height:1.35 }
.stat-card.-alerte{ border-color:rgba(161,101,123,.5); background:rgba(161,101,123,.06); }
.stat-card.-alerte::before{ background:var(--k-plum); opacity:1 }
.stat-card.-alerte .stat-num{ color:var(--k-plum-700); }

/* Bandeau du mode aperçu élève */
.apercu-barre{
  display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding:9px 18px; background:var(--k-teal-800); color:#fff; font-size:13.5px;
}
.apercu-barre a{color:#fff; text-decoration:underline; text-underline-offset:3px}
.apercu-actions{display:flex; gap:16px; white-space:nowrap}
.adm-apercu{display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:26px}
.adm-apercu-btns{display:flex; gap:10px; flex-wrap:wrap}

/* ===== Tableau de bord admin ===== */
.adm-hero{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px }
.adm-titre{ margin:6px 0 0 }
.adm-date{ margin:0; font-size:13px; color:var(--k-grey) }
.adm-h2{ margin:34px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--k-line) }

.adm-liste .adm-ligne{
  display:grid; grid-template-columns:150px 1fr auto; gap:12px; align-items:center;
  padding:11px 0; border-bottom:1px solid var(--k-line);
}
.adm-liste .adm-ligne:last-of-type{ border-bottom:0 }
.adm-ligne.-proche .adm-quand b{ color:var(--k-plum-700) }
.adm-quand{ font-size:14px; display:flex; gap:8px; align-items:baseline }
.adm-quand span{ color:var(--k-grey); font-size:13px }
.adm-qui{ font-weight:600; font-size:14.5px; min-width:0; overflow:hidden; text-overflow:ellipsis }
.adm-tags{ display:flex; gap:10px; align-items:center; font-size:13px; white-space:nowrap }

.adm-relecture{ border-left:3px solid var(--k-sand) }
.adm-relecture-tete{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap }
.adm-relecture-form{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px }
.adm-relecture-form input{ flex:1; min-width:240px; padding:9px }

.adm-ajout{ margin-bottom:16px }
.adm-ajout summary{ cursor:pointer; font-weight:600 }
.adm-form{ margin-top:14px; display:grid; gap:10px; max-width:520px }
.adm-form-duo{ display:flex; gap:10px }
.adm-form-duo input{ flex:1 }
.adm-barre{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:14px }
.adm-barre .glo-recherche{ flex:1; min-width:260px; max-width:420px; margin:0 }
.adm-barre .statut-picker{ margin:0 }

.adm-nom{ display:block; font-weight:600; text-decoration:none }
.adm-mail{ display:block; font-size:12.5px; color:var(--k-grey) }
.adm-prog{ width:120px; height:6px; border-radius:99px; background:rgba(43,66,77,.10); overflow:hidden }
.adm-prog span{ display:block; height:100%; border-radius:99px; background:var(--k-teal) }
.adm-prog-txt{ display:block; margin-top:4px; font-size:12.5px; color:var(--k-grey) }
.adm-jamais{ color:var(--k-plum-700) }

.adm-grille{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px }
.adm-grille .card{ margin:0 }
.adm-retour-tete{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap }
.adm-retour.-rouge{ border-left:3px solid var(--k-plum) }
.adm-retour.-jaune{ border-left:3px solid var(--k-sand) }
.adm-retour.-vert{ border-left:3px solid var(--k-teal) }
.adm-etoiles{ color:var(--k-sand-700); letter-spacing:2px }
.adm-etoiles-off{ color:rgba(43,66,77,.22) }
.adm-technique{ margin-top:34px; background:transparent; border-style:dashed }
.adm-technique summary{ cursor:pointer; font-weight:600; color:var(--k-grey) }

@media(max-width:700px){
  .adm-liste .adm-ligne{ grid-template-columns:1fr; gap:4px; padding:14px 0 }
  .adm-prog{ width:90px }
}

/* ============================ Questionnaire d'onboarding ============================ */
.ob-page{max-width:760px}
.ob-intro p{margin:8px 0}
.ob-q{margin:14px 0}
.ob-label{display:block; font-weight:600; font-size:15.5px; color:var(--k-teal-800); line-height:1.35}
.ob-q .ex-sub{margin-top:4px}
.ob-q textarea.k-field, .ob-q input.k-field{margin-top:10px}

/* Cases à cocher (Q6) */
.ob-checks{display:flex; flex-direction:column; gap:4px; margin-top:10px}
.ob-check{display:flex; align-items:flex-start; gap:11px; padding:9px 11px; border:1.5px solid var(--k-line);
  border-radius:10px; font-size:14.5px; line-height:1.4; cursor:pointer; transition:border-color .15s, background .15s}
.ob-check:hover{border-color:var(--k-teal)}
.ob-check input[type=checkbox]{width:19px; height:19px; margin-top:1px; accent-color:var(--k-teal); flex:0 0 auto}
.ob-check:has(input:checked){border-color:var(--k-teal); background:rgba(64,127,145,.06)}
.ob-check > span{flex:1 1 auto; min-width:0}

/* Choix unique à libellés longs (radios) */
.ob-choix{display:flex; flex-direction:column; gap:4px; margin-top:8px}
.ob-radio{display:flex; align-items:flex-start; gap:11px; padding:9px 11px; border:1.5px solid var(--k-line);
  border-radius:10px; font-size:14.5px; line-height:1.4; cursor:pointer; transition:border-color .15s, background .15s}
.ob-radio:hover{border-color:var(--k-teal)}
.ob-radio input[type=radio]{width:18px; height:18px; margin-top:1px; accent-color:var(--k-teal); flex:0 0 auto}
.ob-radio:has(input:checked){border-color:var(--k-teal); background:rgba(64,127,145,.06)}

/* Piliers : boutons 0-3 en ligne compacte */
.ob-pilier-table .k-select{flex-direction:row; gap:5px}
.ob-pilier-table .k-select button{width:auto; min-width:38px; text-align:center; padding:8px 0}
.ob-pilier-table td:nth-child(2){white-space:nowrap; width:1%}
.ob-pilier-table .ligne-total{font-weight:700; color:var(--k-teal-800)}
.ob-pilier-table .ligne-total .note-total{font:700 18px/1 var(--k-display); color:var(--k-teal)}
/* Code du critère (B1…I5) : rappelle la grille d'audit, discret */
.ob-code{display:inline-block; margin-right:6px; padding:1px 6px; border-radius:6px;
  background:rgba(64,127,145,.10); color:var(--k-teal-800); font-size:11.5px; font-weight:700; letter-spacing:.02em}

/* Audit des assets */
.ob-assets{display:flex; flex-direction:column; gap:8px; margin-top:12px}
.ob-asset{display:grid; grid-template-columns:1fr auto; gap:8px 12px; align-items:center;
  padding:10px 0; border-bottom:1px solid var(--k-line)}
.ob-asset-nom{font-weight:600; font-size:14.5px; color:var(--k-teal-800)}
.ob-asset .k-select{flex-direction:row; gap:5px}
.ob-asset .k-select button{width:auto; padding:7px 12px}
.ob-asset-lien{grid-column:1 / -1; width:100%}
.ob-asset-compte{margin-top:14px; font-size:15px}
.ob-asset-compte b{font:700 18px/1 var(--k-display); color:var(--k-teal)}

.ob-encart{background:rgba(64,127,145,.05)}
.ob-encart p{margin:6px 0}

/* Bilan de scores */
/* Prise de rendez-vous, une fois le questionnaire validé */
.ob-rdv{border-left:3px solid var(--k-sand)}
.ob-scores{background:var(--k-teal-800); color:#fff; margin-top:22px}
.ob-scores h3, .ob-scores .ex-sub{color:#fff}
.ob-scores .ex-sub{opacity:.8}
.ob-score-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:10px; margin-top:14px}
.ob-score-tile{background:rgba(255,255,255,.08); border-radius:12px; padding:14px 12px; text-align:center}
.ob-score-tile.-total{background:var(--k-teal)}
.ob-score-num{display:block; font:700 30px/1 var(--k-display); color:#fff}
.ob-score-lbl{display:block; margin-top:6px; font-size:12px; opacity:.85}

.ob-valider{margin-top:16px; border-color:var(--k-teal); border-width:1.5px}
.ob-valider p{margin:0 0 12px}

/* Rappel croisé dans un exercice du cahier */
.ob-rappel-liste{margin:0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:7px}
.ob-rappel-liste li{font-size:14px; line-height:1.4}
.ob-rappel-label{display:block; font-weight:600; color:var(--k-teal-800); font-size:12.5px}
.ob-rappel-val{color:var(--k-grey)}

@media (max-width:560px){
  .ob-pilier-table .k-select button{min-width:32px}
  .ob-asset{grid-template-columns:1fr}
}

/* ===== Page outils partenaires ===== */
.secret-banner{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin:18px 0 26px; padding:26px; border-radius:20px; text-decoration:none;
  background:linear-gradient(120deg, var(--k-teal-900), var(--k-teal-800) 55%, var(--k-teal));
  color:#fff; border:1px solid rgba(255,255,255,.08);
  transition:transform .2s, box-shadow .2s; }
.secret-banner:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(26,45,54,.35) }
.secret-txt{ max-width:520px }
.secret-kicker{ display:block; font:600 12px/1 var(--k-body); letter-spacing:.12em; text-transform:uppercase; color:var(--k-sand); margin-bottom:8px }
.secret-title{ display:block; font-family:var(--k-display); text-transform:uppercase; font-size:clamp(22px,4.5vw,30px); line-height:1.1; color:#fff }
.secret-txt p{ margin:10px 0 0; font-size:14px; line-height:1.6; color:rgba(255,255,255,.85) }
.secret-cta{ flex:0 0 auto; font:600 14px/1 var(--k-body); color:var(--k-teal-900); background:var(--k-sand); padding:13px 20px; border-radius:999px; white-space:nowrap }

.outils-sub{ margin:2px 0 14px; font-size:14px; color:var(--k-grey) }
.outils-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; margin:6px 0 10px }
.outil-card{ display:flex; flex-direction:column; gap:10px; padding:18px; border-radius:18px; background:#fff; border:1px solid var(--k-line) }
.outil-card.-lock{ background:#faf8f4; border-style:dashed }
.outil-head{ display:flex; align-items:center; gap:12px }
.outil-logo{ width:40px; height:40px; border-radius:10px; object-fit:contain; background:#fff; border:1px solid var(--k-line); padding:5px; flex:0 0 auto }
.outil-logo.-initiale{ display:flex; align-items:center; justify-content:center; font:600 18px/1 var(--k-body); color:var(--k-teal); background:rgba(64,127,145,.1); border:none; padding:0 }
.outil-card.-lock .outil-logo{ filter:grayscale(1); opacity:.75 }
.outil-id{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.outil-nom{ font-weight:600; font-size:15.5px; color:var(--k-teal-800) }
.outil-acces{ font-size:11.5px; font-weight:600; color:var(--k-teal) }
.outil-acces.-reserve{ color:var(--k-plum-700) }
.outil-desc{ margin:0; font-size:13.5px; line-height:1.55; color:var(--k-grey) }
.outil-foot{ margin-top:auto; display:flex; align-items:center; gap:12px; padding-top:2px }
.outil-affilie{ font-size:11px; color:var(--k-grey); opacity:.7 }

/* Tableaux du cahier : lignes repliées, notes segmentées, total et classement. */
.k-add{
  display:inline-flex; align-items:center; gap:8px; margin:-6px 0 18px;
  background:none; border:1.5px dashed var(--k-sand); border-radius:10px;
  padding:9px 14px; font:600 14px/1 var(--k-body); color:var(--k-teal-800);
  cursor:pointer; transition:border-color .2s, background .2s;
}
.k-add:hover{border-color:var(--k-teal); background:rgba(64,127,145,.06)}
.k-add::before{content:"+"; font-size:17px; line-height:1}
.exo-content td .k-select{flex-direction:row; gap:5px}
.exo-content td .k-select button{width:auto; min-width:34px; text-align:center; padding:7px 0}
.total-ligne{font:700 16px/1 var(--k-display); color:var(--k-teal)}
select.k-liste, select.k-field{
  font-family:var(--k-body); font-size:15px; color:var(--k-ink); background:#fff;
  border:none; border-bottom:1.5px solid var(--k-sand); border-radius:0;
  padding:6px 4px; width:100%; appearance:none;
}
select.k-liste:focus, select.k-field:focus{border-bottom-color:var(--k-teal); outline:none}
/* Blocs répétés hors arborescence : une fiche par contenu à noter */
.k-repliable > .k-item{
  border:1.5px solid rgba(184,136,79,.35); border-radius:14px;
  padding:16px 18px 14px; margin:0 0 14px; background:#fff;
}
.k-repliable > .k-item > h4{margin:0 0 10px}
.k-repliable > .k-item > p{margin:0 0 8px}
.score-geo{margin-top:12px; padding-top:10px; border-top:1px solid var(--k-sand); color:var(--k-teal-800)}
.exo-content code{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:14px;
  background:rgba(64,127,145,.08); border-radius:5px; padding:1px 5px;
}
.miroir-ex{font-size:15px; color:var(--k-ink)}
.miroir-ex:empty::before{content:"à définir en 1.4"; color:var(--k-grey); font-style:italic}
.podium{margin:10px 0 0; padding-left:22px}
.podium li{margin:5px 0; font-weight:600}
.podium li span{font-weight:400; color:var(--k-grey)}

/* Arborescence thématique : niveaux imbriqués, ajout au fil de l'eau. */
.k-arbre{margin:16px 0}
.k-arbre .arbre-n1{
  display:flex; align-items:baseline; gap:10px; font-weight:600; color:var(--k-teal-800);
  padding-bottom:10px; border-bottom:2px solid var(--k-teal);
}
.k-arbre .k-item{
  margin:14px 0 0; padding:12px 14px; border-left:3px solid var(--k-sand);
  background:rgba(237,188,125,.07); border-radius:0 10px 10px 0;
}
.k-arbre .k-item > label{display:block; font-weight:600; color:var(--k-teal-800); margin-bottom:8px}
.k-arbre .arbre-n3{margin-left:14px; padding-left:12px; border-left:1px dashed var(--k-sand)}
.k-arbre .arbre-n3 .k-item{
  margin:6px 0; padding:0; border:none; background:none; border-radius:0;
}
.k-arbre .k-add{margin:12px 0 0}
.taux-couverture{
  display:block; margin:14px 0 0; padding:12px 16px; border-radius:12px;
  background:rgba(64,127,145,.08); font-weight:600; color:var(--k-teal-800);
}
.taux-couverture:empty{display:none}

/* Sous-titres de niveau 4 dans les exercices (ajout du 24/08/2026). */
.exo-content h4{
  font:600 16.5px/1.35 var(--k-body); color:var(--k-teal-800);
  margin:26px 0 10px; padding-left:11px; border-left:3px solid var(--k-sand);
}

/* ===== Cloche de notifications (topbar) ===== */
.notif{position:relative; display:block}
.notif > summary{
  display:inline-flex; align-items:center; justify-content:center; position:relative;
  width:34px; height:34px; border-radius:999px; cursor:pointer; list-style:none;
  color:var(--k-grey);
}
.notif > summary::-webkit-details-marker{display:none}
.notif > summary:hover{color:var(--k-teal); background:rgba(64,127,145,.08)}
.notif > summary:focus-visible{outline:2px solid var(--k-teal); outline-offset:2px}
.notif-pastille{
  position:absolute; top:1px; right:0;
  min-width:15px; height:15px; padding:0 4px; border-radius:999px;
  background:var(--k-teal); color:#fff;
  font:700 10px/15px var(--k-body); text-align:center;
}
.notif-panneau{
  position:absolute; right:0; top:calc(100% + 8px); z-index:30;
  width:min(92vw, 340px); max-height:70vh; overflow:auto;
  background:#fff; border:1px solid var(--k-line); border-radius:14px;
  box-shadow:0 12px 28px rgba(43,66,77,.14); padding:6px;
}
.notif-item{
  display:block; padding:10px 12px; border-radius:10px; text-decoration:none;
}
.notif-item:hover{background:rgba(64,127,145,.08)}
.notif-etiquette{
  display:inline-block; font:600 11px/1 var(--k-body); letter-spacing:.04em;
  text-transform:uppercase; color:var(--k-teal); margin-bottom:4px;
}
.notif-item-titre{display:block; font:600 13.5px/1.4 var(--k-body); color:var(--k-ink)}
.notif-vide{margin:0; padding:14px 12px; font:500 13.5px/1.5 var(--k-body); color:var(--k-grey)}
.notif-tout{
  display:block; padding:11px 12px; margin-top:2px; border-top:1px solid var(--k-line);
  font:600 13px/1 var(--k-body); color:var(--k-teal); text-decoration:none;
}
.notif-tout:hover{text-decoration:underline}
@media(max-width:600px){
  /* La topbar passe sur deux lignes : le panneau s'ancre à l'écran, pas à la cloche. */
  .notif-panneau{position:fixed; left:12px; right:12px; top:64px; width:auto}
}

/* ===== Relectures : liste repliée, le détail au clic ===== */
.relecture-pli{margin:10px 0}
.relecture-pli > summary{
  display:flex; align-items:center; gap:12px; cursor:pointer; list-style:none;
  padding:14px 16px; background:#fff; border:1px solid var(--k-line); border-radius:14px;
}
.relecture-pli > summary::-webkit-details-marker{display:none}
.relecture-pli > summary:hover{border-color:var(--k-teal)}
.relecture-pli[open] > summary{border-radius:14px 14px 0 0}
.relecture-titre{flex:1; min-width:0; font:600 14.5px/1.35 var(--k-body); color:var(--k-ink)}
.relecture-detail{
  padding:14px 16px; background:#fff; border:1px solid var(--k-line); border-top:0;
  border-radius:0 0 14px 14px;
}
@media(max-width:600px){
  .relecture-pli > summary{flex-wrap:wrap; gap:8px}
}

/* ===== La carte de l'offre en 7 phases (/carte-offre) =====
   Deux groupes, chacun avec son rail : l'étiquette du rail est centrée en
   hauteur sur les blocs de son groupe (align-self:center sur la colonne). */
.carte-page .carte-chapo{max-width:70ch}
.carte-legende{
  display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center;
  margin:20px 0 26px; padding-bottom:18px; border-bottom:1px solid var(--k-line);
  color:var(--k-grey);
}
.carte-key{display:inline-flex; align-items:center; gap:9px}
.carte-chip{
  display:inline-block; padding:6px 13px; border-radius:999px;
  font:600 13px/1.25 var(--k-body); background:var(--k-teal); color:#fff;
}
.carte-chip.-option{
  background:transparent; color:var(--k-teal-800);
  border:1.5px dashed var(--k-teal); font-weight:400;
}
.carte-agents-tag{
  font:700 13px/1 var(--k-body); letter-spacing:.06em; color:var(--k-plum);
  text-decoration:none; white-space:nowrap;
}
a.carte-agents-tag:hover{color:var(--k-plum-700); text-decoration:underline}

.carte-groupe{display:grid; grid-template-columns:minmax(0,1fr); gap:14px; margin:0 0 26px}
.carte-rail{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.carte-rail-tag{
  font-family:var(--k-display); text-transform:uppercase; font-size:18px; line-height:1.1;
  padding:12px 16px; border-radius:14px; background:var(--k-teal-800); color:#fff;
}
.carte-groupe.-produire .carte-rail-tag{background:var(--k-plum)}
.carte-rail-note{font-size:12.5px; color:var(--k-grey)}
.carte-phases{display:flex; flex-direction:column; gap:14px; min-width:0}

.carte-phase{
  display:flex; gap:18px; scroll-margin-top:90px;
  background:#fff; border:1px solid var(--k-line); border-left:8px solid var(--k-teal);
  border-radius:0 18px 18px 0; padding:20px 22px;
}
.carte-groupe.-produire .carte-phase{border-left-color:var(--k-plum)}
.carte-num{
  flex:0 0 auto; font-family:var(--k-display); font-size:38px; line-height:1;
  color:var(--k-teal); width:44px;
}
.carte-groupe.-produire .carte-num{color:var(--k-plum)}
.carte-corps{min-width:0; flex:1}
.carte-titre{
  font-family:var(--k-display); text-transform:uppercase; color:var(--k-teal-800);
  font-size:24px; line-height:1.1; margin:0 0 6px;
}
.carte-but{margin:0 0 14px; color:var(--k-grey)}
.carte-chips{display:flex; flex-wrap:wrap; gap:8px}
.carte-livre{margin:14px 0 0}
.carte-agents{
  display:flex; flex-wrap:wrap; align-items:center; gap:7px;
  margin:12px 0 0; padding:12px 16px;
  border:1px solid var(--k-line); border-radius:12px; color:var(--k-teal-800);
}
/* Un agent mentor ou un outil se lit comme une commande : même pastille, en Poppins
   puisque ce n'est pas une commande à taper. Anton et la prose n'entrent pas ici. */
.carte-ref{
  flex:0 0 auto; font:600 12.5px/1.65 var(--k-body); color:var(--k-teal-800);
  background:rgba(64,127,145,.09); border-radius:7px; padding:4px 9px;
}
.carte-agents-note{color:var(--k-grey)}
.carte-carnet{margin:12px 0 0; color:var(--k-grey)}

@media(min-width:900px){
  .carte-groupe{position:relative; grid-template-columns:132px minmax(0,1fr); gap:26px; align-items:stretch}
  /* La barre du rail court sur tout le groupe, l'étiquette se pose dessus au milieu. */
  .carte-groupe::before{
    content:""; position:absolute; left:61px; top:0; bottom:0;
    width:10px; border-radius:8px; background:var(--k-teal);
  }
  .carte-groupe.-produire::before{background:var(--k-plum)}
  .carte-rail{
    position:relative; align-self:center; flex-direction:column; justify-content:center;
    align-items:center; text-align:center; gap:8px;
  }
  .carte-rail-tag{padding:14px 10px; width:100%}
  .carte-rail-note{background:var(--k-page); padding:2px 4px}
}
@media(max-width:620px){
  .carte-phase{gap:12px; padding:16px 16px}
  .carte-num{font-size:30px; width:32px}
  .carte-titre{font-size:20px}
}

/* ---- Les formations en vidéo (/formations, /formation/<id>, /lecon/<id>) ---- */
.video-cadre{
  position:relative; margin:22px 0 8px; border-radius:18px; overflow:hidden;
  background:var(--k-teal-800); border:1px solid var(--k-line);
}
.video-cadre video{display:block; width:100%; height:auto; max-height:72vh; background:var(--k-teal-800)}
.video-cadre.-embed{aspect-ratio:16/9}
.video-cadre.-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

.lecon-ligne{
  display:flex; align-items:baseline; gap:14px; padding:12px 6px; text-decoration:none;
  color:inherit; border-bottom:1px solid var(--k-line);
}
.lecon-ligne:last-child{border-bottom:0}
.lecon-ligne:hover .lecon-titre{color:var(--k-teal); text-decoration:underline}
.lecon-num{
  flex:0 0 auto; min-width:42px; font:600 12.5px/1.65 var(--k-body); color:var(--k-teal-800);
  background:rgba(64,127,145,.09); border-radius:7px; padding:3px 8px; text-align:center;
}
.lecon-titre{flex:1; min-width:0; font-weight:600; color:var(--k-teal-800)}
.lecon-meta{flex:0 0 auto; font-size:12.5px; color:var(--k-grey)}

.lecon-nav{display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; margin:28px 0 0}
@media(max-width:620px){
  .lecon-ligne{flex-wrap:wrap; gap:8px}
  .lecon-meta{width:100%}
}

/* La coche « leçon vue » : un bouton qui dit son état, pas une case à deviner. */
.lecon-vu{margin:14px 0 6px}
.vu-btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font:600 14px/1.4 var(--k-body); color:var(--k-teal-800);
  background:#fff; border:1px solid var(--k-line); border-radius:999px; padding:9px 18px 9px 12px;
  transition:border-color .18s, background .18s;
}
.vu-btn:hover{border-color:var(--k-teal)}
.vu-case{
  display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
  border:1.5px solid var(--k-line); border-radius:6px; font-size:13px; color:#fff; background:#fff;
}
.vu-btn.-ok{background:rgba(64,127,145,.09); border-color:var(--k-teal)}
.vu-btn.-ok .vu-case{background:var(--k-teal); border-color:var(--k-teal)}
.lecon-ligne.-vue .lecon-num{background:var(--k-teal); color:#fff}
.lecon-ligne.-vue .lecon-titre{color:var(--k-grey)}