/* chapitre-charte.css — Pages d'accueil de chapitre dans la charte des sommaires de classe
   (crème, bleu nuit, Bodoni Moda pour les titres, Jost pour le texte, cadres droits).
   Chargée en dernier, après sommaire.css, chapitre.css et chapitre-overview.css : elle ne
   touche ni au balisage ci-* (scripts/generate_chapter_index.py) ni aux scripts.
   Deux allures : vitrine sur ordinateur, liste compacte sur téléphone.
   « body:not(#cc) » donne à ces règles la priorité sur les anciennes feuilles
   (sélecteurs .chapter-overview …) sans recourir à !important. */

@font-face{font-family:'Jost';src:url(assets/vendor/fonts/jost.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Bodoni Moda';src:url(assets/vendor/fonts/bodoni-moda.woff2) format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'Bodoni Moda';src:url(assets/vendor/fonts/bodoni-moda-italique.woff2) format('woff2');font-weight:400 900;font-style:italic;font-display:swap}

:root{
  --creme:#f4f1ea;--blanc:#fff;--nuit:#0b1b3a;--encre:#3d4e75;--gris:#4a5470;--trait:#ddd7c9;--trait-doux:#ece7dc;
  --serif:'Bodoni Moda','Didot','Bodoni 72',Georgia,serif;
  --sans:'Jost','Futura','Avenir Next','Segoe UI',sans-serif;
  --large:1240px;
}

body:not(#cc){margin:0;background:var(--creme);color:var(--nuit);font-family:var(--sans);font-weight:400;line-height:1.5}
body:not(#cc) a{color:inherit}
body:not(#cc) :focus-visible{outline:2px solid var(--nuit);outline-offset:3px}

/* Texte courant en Jost (chapitre.css le mettait en police à empattements) */
body:not(#cc) :is(.ci-main,.ci-card-desc,.ci-listcard-desc,.ci-obj-item,.ci-obj-text,.ci-sec-intro,.ci-hero-sub,.ci-crumb){font-family:var(--sans)}

/* Petites capitales */
body:not(#cc) :is(.topnav-back,.ci-hero-badge,.ci-hero-eyebrow,.ci-stat,.ci-path-label,.ci-path-link,.ci-obj-label,
  .ci-sec-head h2,.ci-card-tag,.ci-listcard-tag,.ci-chnav-lbl,.ci-more-toggle,.ci-videos-more>summary){
  font-family:var(--sans);font-weight:500;letter-spacing:.12em;text-transform:uppercase}

/* ── En-tête du site : celui des sommaires ── */
body:not(#cc) .topnav{background:var(--creme);border-bottom:1px solid var(--trait);box-shadow:none}
body:not(#cc) .topnav-inner{max-width:var(--large);margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:6px 24px}
body:not(#cc) .brand{font-family:var(--serif);font-size:26px;color:var(--nuit);text-decoration:none;padding:6px 0;margin-right:auto;display:inline-flex;gap:0}
body:not(#cc) .brand-logo,body:not(#cc) .brand-name span{display:none}
body:not(#cc) .brand-name{display:inline;font:inherit;color:inherit}
body:not(#cc) .topnav-back{font-size:13px;color:var(--nuit);text-decoration:none;padding:12px 0;background:none;border:0}
body:not(#cc) .topnav-back:hover{text-decoration:underline;text-underline-offset:6px}
body:not(#cc) #sn-search-btn.sn-in-bar{background:transparent!important;border:1px solid var(--trait)!important;color:var(--nuit)!important;border-radius:0!important;width:44px!important;height:44px!important}

/* Fil d'Ariane */
body:not(#cc) .ci-crumb{background:none;border:0}
body:not(#cc) .ci-crumb-inner{max-width:var(--large);margin:0 auto;padding:22px 24px 0;font-size:13px;color:var(--gris);display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
body:not(#cc) .ci-crumb a{color:var(--gris);text-decoration:underline;text-underline-offset:4px;padding:6px 0}
body:not(#cc) .ci-crumb-sep{color:var(--trait)}
body:not(#cc) .ci-crumb-cur{color:var(--nuit);font-weight:400}

/* ── Présentation du chapitre ── */
body:not(#cc) .ci-main{max-width:var(--large);margin:0 auto;padding:0 24px 24px}
body:not(#cc) .ci-hero{background:none;border:0;border-radius:0;box-shadow:none;padding:clamp(24px,3.4vw,44px) 0 clamp(20px,2.4vw,32px);margin:0;color:var(--nuit)}
body:not(#cc) .ci-hero::before,body:not(#cc) .ci-hero::after{display:none}
body:not(#cc) .ci-hero-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 18px}
body:not(#cc) .ci-hero-badge{background:none;border:1px solid var(--nuit);border-radius:0;color:var(--nuit);font-size:12px;padding:4px 10px}
body:not(#cc) .ci-hero-eyebrow{color:var(--gris);font-size:13px;letter-spacing:.14em}
body:not(#cc) .ci-hero h1{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(42px,5.2vw,68px);line-height:1.05;letter-spacing:-.01em;color:var(--nuit);text-wrap:balance;max-width:960px}
body:not(#cc) .ci-hero-sub{margin:18px 0 0;max-width:720px;font-family:var(--sans);font-size:clamp(17px,1.5vw,19px);font-weight:300;line-height:1.6;color:var(--gris)}
body:not(#cc) .ci-hero-stats{display:flex;flex-wrap:wrap;gap:6px 22px;margin:20px 0 0}
body:not(#cc) .ci-stat{background:none;border:0;border-radius:0;padding:0;font-size:12px;color:var(--gris);gap:8px}
body:not(#cc) .ci-stat svg{opacity:.7}

/* Parcours (ajouté par chapitre-overview.js) */
body:not(#cc) .ci-path-nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px;margin:0 0 28px;padding:12px 0;border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);background:none}
body:not(#cc) .ci-path-label{font-size:12px;color:var(--gris)}
body:not(#cc) .ci-path-link{background:none;border:0;border-radius:0;padding:10px 0;font-size:13px;color:var(--nuit);text-decoration:underline;text-decoration-color:var(--trait);text-underline-offset:6px;box-shadow:none}
body:not(#cc) .ci-path-link:hover{text-decoration-color:var(--nuit)}

/* Objectifs */
body:not(#cc) .ci-obj{background:var(--blanc);border:0;border-radius:0;box-shadow:none;padding:26px 28px;margin:0 0 8px}
body:not(#cc) .ci-obj-label{font-size:12px;letter-spacing:.14em;color:var(--gris);margin:0 0 14px;font-variant:normal}
body:not(#cc) .ci-obj-grid{gap:12px 40px}
body:not(#cc) .ci-obj-item{font-family:var(--sans);font-size:16px;font-weight:400;line-height:1.55;color:var(--nuit);gap:14px;align-items:baseline}
body:not(#cc) .ci-obj-num{background:none;border:0;border-radius:0;width:auto;height:auto;min-width:22px;font-family:var(--serif);font-size:22px;font-weight:400;line-height:1;color:var(--encre)}

/* Sections */
body:not(#cc) .ci-sec{margin:44px 0 0}
body:not(#cc) .ci-sec-head{display:flex;align-items:center;gap:16px;margin:0 0 16px}
body:not(#cc) .ci-sec-head h2{margin:0;font-size:12px;letter-spacing:.14em;color:var(--gris);white-space:nowrap}
body:not(#cc) .ci-sec-rule{flex:1;height:1px;background:var(--trait)}
body:not(#cc) .ci-sec-intro{margin:12px 0 0;max-width:760px;font-size:15px;font-weight:300;line-height:1.6;color:var(--gris)}

/* Cartes : cadres blancs droits, titre en Bodoni */
body:not(#cc) .ci-grid{gap:12px}
body:not(#cc) .ci-card{background:var(--blanc);border:0;border-radius:0;box-shadow:none;padding:22px 24px;gap:8px;color:var(--nuit);text-decoration:none;transform:none;border-top:3px solid transparent}
body:not(#cc) .ci-card:hover{box-shadow:0 6px 24px rgba(11,27,58,.10);transform:none}
body:not(#cc) .ci-card.featured{border-top-color:var(--nuit);box-shadow:none}
body:not(#cc) .ci-card.featured::before{display:none}
body:not(#cc) .ci-card-icon{display:none}
body:not(#cc) .ci-card-title{margin:0;font-family:var(--serif);font-size:22px;font-weight:400;line-height:1.25;color:var(--nuit)}
body:not(#cc) .ci-card-desc{margin:0;font-size:15px;font-weight:300;line-height:1.55;color:var(--gris)}
body:not(#cc) .ci-card-tag{align-self:flex-start;margin-top:6px;background:none;border:1px solid var(--trait);border-radius:0;padding:2px 8px;font-size:10px;color:var(--gris)}
body:not(#cc) .ci-card.featured .ci-card-tag{background:var(--nuit);border-color:var(--nuit);color:var(--creme)}
body:not(#cc) .ci-card a{color:var(--nuit);text-underline-offset:3px}
/* Familles d'activités : un liseré, comme sur les sommaires */
body:not(#cc) .ci-grid.compl .ci-card{border-top-color:var(--trait)}

/* Listes S'entraîner / S'évaluer */
body:not(#cc) .ci-row{gap:12px 40px;margin:44px 0 0}
body:not(#cc) .ci-row .ci-sec{margin:0}
body:not(#cc) .ci-list{gap:10px}
body:not(#cc) .ci-listcard{background:var(--blanc);border:0;border-radius:0;box-shadow:none;padding:18px 22px;gap:16px;color:var(--nuit);text-decoration:none;transform:none}
body:not(#cc) .ci-listcard:hover{box-shadow:0 6px 24px rgba(11,27,58,.10);transform:none}
body:not(#cc) .ci-listcard-ico{display:none}
body:not(#cc) .ci-listcard-title{font-family:var(--serif);font-size:21px;font-weight:400;line-height:1.25;color:var(--nuit)}
body:not(#cc) .ci-listcard-desc{font-size:15px;font-weight:300;line-height:1.55;color:var(--gris)}
body:not(#cc) .ci-listcard-tag{background:none;border:1px solid var(--trait);border-radius:0;padding:2px 8px;font-size:10px;color:var(--gris);white-space:nowrap}

/* Vidéos */
body:not(#cc) .ci-video{background:var(--blanc);border:0;border-radius:0;box-shadow:none;overflow:hidden}
body:not(#cc) .ci-video video{border-radius:0;display:block}
body:not(#cc) .ci-video figcaption{padding:18px 22px 20px;display:flex;flex-direction:column;gap:8px}

/* Boutons « Afficher … » (vidéos par capacité, activités complémentaires) */
body:not(#cc) .ci-more-toggle,body:not(#cc) .ci-videos-more>summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin:16px 0 0;padding:0 18px;background:transparent;border:1px solid var(--nuit);border-radius:0;color:var(--nuit);font-size:12px;cursor:pointer;box-shadow:none}
body:not(#cc) .ci-more-toggle:hover,body:not(#cc) .ci-videos-more>summary:hover{background:var(--trait-doux)}

/* Documents PDF */
body:not(#cc) .ci-pdf-versions,body:not(#cc) .ci-pdf-version,body:not(#cc) .ci-pdf-direct{border-radius:0}

/* Chapitre précédent / suivant */
body:not(#cc) .ci-chnav{margin:52px 0 0;gap:12px}
body:not(#cc) .ci-chnav-card{background:var(--blanc);border:0;border-radius:0;box-shadow:none;padding:18px 22px;color:var(--nuit);text-decoration:none;gap:16px}
body:not(#cc) .ci-chnav-card:hover{box-shadow:0 6px 24px rgba(11,27,58,.10)}
body:not(#cc) .ci-chnav-lbl{display:block;font-size:11px;color:var(--gris);margin-bottom:4px}
body:not(#cc) .ci-chnav-title{display:block;font-family:var(--serif);font-size:20px;font-weight:400;line-height:1.25}
body:not(#cc) .ci-chnav-arrow{font-size:22px;color:var(--encre)}

/* ── Pied de page : celui des sommaires ── */
body:not(#cc) .so-footer{background:none;border-top:1px solid var(--trait);margin-top:56px;color:var(--gris)}
body:not(#cc) .so-footer p{max-width:var(--large);margin:0 auto;padding:28px 24px 40px;font-size:13px;color:var(--gris);line-height:1.7;text-align:left}
body:not(#cc) .so-footer a{color:var(--gris);text-underline-offset:4px}

/* ── Téléphone : liste compacte ── */
@media (max-width:700px){
  body:not(#cc) .topnav-inner{padding:10px 16px;gap:12px}
  body:not(#cc) .brand{font-size:22px}
  /* Le retour au sommaire reste dans le fil d'Ariane, juste dessous : l'en-tête garde le nom et la recherche. */
  body:not(#cc) .topnav-back{display:none}
  body:not(#cc) .ci-crumb-inner{padding:12px 16px 0}
  body:not(#cc) .ci-main{padding:0 16px 16px}
  body:not(#cc) .ci-hero{padding:18px 0 18px}
  body:not(#cc) .ci-hero-top{margin-bottom:12px}
  body:not(#cc) .ci-hero h1{font-size:34px}
  body:not(#cc) .ci-hero-sub{margin-top:12px;font-size:16px}
  body:not(#cc) .ci-hero-stats{margin-top:14px}
  body:not(#cc) .ci-path-nav{gap:0 16px;margin-bottom:20px;padding:4px 0}
  body:not(#cc) .ci-path-label{width:100%;padding-top:6px}
  body:not(#cc) .ci-obj{padding:18px 16px}
  body:not(#cc) .ci-obj-item{font-size:15px}
  body:not(#cc) .ci-sec,body:not(#cc) .ci-row{margin-top:32px}
  /* Cartes en liste : titre et étiquette, la phrase d'explication disparaît */
  body:not(#cc) .ci-grid{grid-template-columns:1fr;gap:8px}
  body:not(#cc) .ci-card,body:not(#cc) .ci-card.featured{padding:14px 16px;flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;border:0;border-left:3px solid transparent}
  body:not(#cc) .ci-card.featured{border-left-color:var(--nuit)}
  body:not(#cc) .ci-grid.compl .ci-card{border-left-color:var(--trait)}
  body:not(#cc) .ci-card-title{font-size:19px}
  body:not(#cc) .ci-card-desc,body:not(#cc) .ci-listcard-desc{display:none}
  body:not(#cc) .ci-card-tag{margin-top:0}
  body:not(#cc) .ci-video .ci-card-desc{display:block}
  body:not(#cc) .ci-video figcaption{padding:14px 16px}
  body:not(#cc) .ci-listcard{padding:14px 16px}
  body:not(#cc) .ci-listcard-title{font-size:19px}
  body:not(#cc) .ci-chnav-card{padding:14px 16px}
  body:not(#cc) .ci-chnav-title{font-size:18px}
  body:not(#cc) .so-footer p{padding:24px 16px 32px}
}

@media print{
  body:not(#cc){background:#fff}
}