/*
Theme Name: Alternatives Éducatives Inde
*/
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;700&family=Onest:wght@400;700&display=swap');

/* ==========================================================================
   GABARIT « CAHIER DE COMPARATIF »
   Quatre traits, et ce sont les seuls qui font la famille :
   1. un BANDEAU DOUBLE ETAGE de 92 px (marque + recherche, puis rail de 6
      rubriques a mega-menu 4 colonnes) ;
   2. le TABLEAU a COLONNE DE GAUCHE FIGEE — double filet 2 px accent + 1 px
      filet, en-tete collant, lignes alternees en surf ; aucune autre famille
      du lot n'a de tableau fige ;
   3. la GRILLE 3x3 stricte de tuiles a ombre douce et rayon 8, chacune portant
      un chiffre repere (le nombre REEL de pages) et sa source en 12 px ;
   4. l'ACCORDEON natif <details>/<summary>, et des outils de calcul qui ne
      travaillent qu'avec les valeurs tapees par le visiteur.
   Vert menthe profond, citron sourd, chiffres tabulaires partout.
   ========================================================================== */

/* ---------- 1. JETONS ---------------------------------------------------- */
:root{
  --fond:#F6F7FA;            /* le papier, un blanc mentholé */
  --fond2:#F6F7FA;           /* la tuile, la carte, la ligne impaire du tableau */
  --encre:#131720;           /* l'encre : un vert si sombre qu'il passe pour noir */
  --doux:#131720;            /* le gris de service : sources, dates, chapôs courts */
  --filet:#A2A4A9;           /* le filet — vert grisé, jamais un gris pur */
  --surf:#D0D2D6;            /* la surface : bande « Comparer », lignes paires, encadrés */
  --bande:#131720;           /* la bande sombre « Comment nous comparons » */
  --bande-encre:#E5E6EA;
  --bande-doux:color-mix(in srgb, #E5E6EA 74%, #131720);
  --bande-n:color-mix(in srgb, #235fa8 45%, #F6F7FA);  /* le numéro sur la bande sombre */
  --accent:#235fa8;       /* tiré par site — filets, pastilles, soulignements */
  --accent2:#235fa8;     /* le citron : seconds titres d'encadré, jamais un aplat de texte */
  /* 🪤 un accent vif ne sert JAMAIS de couleur de texte tel quel : on l'assombrit
     assez pour tenir 4,5:1 meme quand le site tire un vert clair. */
  --accent-txt:color-mix(in srgb, #235fa8 0%, #04120c);
  --accent2-txt:color-mix(in srgb, #235fa8 0%, #14100a);
  --ombre:0 1px 2px rgba(14,26,21,.05), 0 10px 24px -16px rgba(14,26,21,.38);
  --ombre-mega:0 18px 34px -22px rgba(14,26,21,.55);
  --rayon:8px;
  --titre:'Plus Jakarta Sans', 'Trebuchet MS', 'Segoe UI', Helvetica, Arial, sans-serif;
  --courant:'Onest', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fond:#0f1218; --accent2:#5f9bd6; --accent:#5f9bd6; --fond2:#0F1218; --encre:#eceff5; --doux:#83868C;
    --filet:#0F1218; --surf:#0F1218; --bande:#0F1218;
    --accent-txt:color-mix(in srgb, #235fa8 0%, #ffffff);
    --accent2-txt:color-mix(in srgb, #235fa8 0%, #ffffff);
    --ombre:0 1px 2px rgba(0,0,0,.5), 0 10px 26px -16px rgba(0,0,0,.9);
    --ombre-mega:0 18px 34px -22px rgba(0,0,0,.9);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --fond:#0f1218; --accent2:#5f9bd6; --accent:#5f9bd6; --fond2:#0F1218; --encre:#eceff5; --doux:#83868C;
  --filet:#0F1218; --surf:#0F1218; --bande:#0F1218;
  --accent-txt:color-mix(in srgb, #235fa8 0%, #ffffff);
  --accent2-txt:color-mix(in srgb, #235fa8 0%, #ffffff);
  --ombre:0 1px 2px rgba(0,0,0,.5), 0 10px 26px -16px rgba(0,0,0,.9);
  --ombre-mega:0 18px 34px -22px rgba(0,0,0,.9);
  color-scheme:dark;
}

/* ---------- 2. SOCLE ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:108px}
body{margin:0;background:var(--fond);color:var(--encre);
  font-family:var(--courant);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--accent-txt);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--titre);font-weight:700;margin:0;line-height:1.14;
  letter-spacing:-.014em;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
table{font-variant-numeric:tabular-nums}
.sb-oeil,.sb-oeil-txt{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sb-oeil:focus{left:.5rem;top:.5rem;width:auto;height:auto;padding:.5rem .8rem;
  background:var(--encre);color:var(--fond);z-index:99;border-radius:var(--rayon)}
.cc-in{width:min(1240px,100% - 2.6rem);margin-inline:auto}

/* les briques de texte communes */
.cc-etiq{font-family:var(--courant);font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent-txt);display:flex;align-items:center}
.cc-etiq--grand{font-size:12.5px;letter-spacing:.13em}
.cc-chapo{font-size:16.5px;line-height:1.55;color:var(--doux);margin-top:.5rem}
.cc-chapo--court{font-size:14.5px}
.cc-meta{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:12.5px;
  color:var(--doux);margin-top:.6rem;font-variant-numeric:tabular-nums}
.cc-meta--art{margin-top:1rem;padding-top:.7rem;border-top:1px solid var(--filet)}
.cc-maj{font-weight:700;color:var(--accent-txt)}
/* le chiffre repere : 32 px, tabulaire, et TOUJOURS sa source juste en dessous */
.cc-chiffre{font-family:var(--titre);font-size:32px;font-weight:800;line-height:1;
  color:var(--accent-txt);font-variant-numeric:tabular-nums;margin-top:.55rem}
.cc-source{font-size:12px;line-height:1.4;color:var(--doux);margin-top:.3rem}
.cc-source--tab{margin-top:.7rem;max-width:78ch}
.cc-pastille{display:inline-block;width:9px;height:9px;border-radius:2px;flex:0 0 auto;
  background:var(--pastille,var(--accent));margin-right:.45rem;vertical-align:middle}
.cc-bloc-tete{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  padding-bottom:.6rem;margin-bottom:1.2rem;border-bottom:2px solid var(--accent);
  box-shadow:0 1px 0 var(--filet)}   /* le double filet, en version horizontale */
.cc-bloc-titre{font-size:clamp(19px,2.2vw,25px);font-weight:700}
.cc-bloc-chapo{font-size:13.5px;color:var(--doux);flex:1 1 280px}
.cc-bloc-tete--rail{margin-bottom:1rem}
.cc-bloc-tete--art{margin-top:2rem}

/* la plaque de repli servie par jr_vignette quand l'article n'a pas d'image */
.jr-plaque{display:grid;place-items:center;width:100%;aspect-ratio:3/2;
  background:var(--plaque,var(--surf));color:#131720;font-family:var(--titre);
  font-weight:800;font-size:46px;border-radius:var(--rayon)}

/* ---------- 3. LE BANDEAU DOUBLE ETAGE (52 + 40 = 92 px) ------------------ */
.cc-tete{position:sticky;top:0;z-index:30;background:var(--fond)}
.cc-etage1{height:52px;border-bottom:1px solid var(--filet);background:var(--fond)}
.cc-etage1-in{display:flex;align-items:center;gap:1rem;height:100%}
.cc-marque a{display:flex;align-items:center;gap:.55rem}
.cc-marque a:hover{text-decoration:none}
.cc-mono{display:inline-flex;width:26px;color:var(--accent);flex:0 0 auto}
.cc-mono svg{width:100%;height:auto;fill:currentColor}
.cc-marque-mot{display:block;font-family:var(--titre);font-weight:800;font-size:19px;
  letter-spacing:-.024em;line-height:1.05;color:var(--encre)}
.cc-marque-base{display:block;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--doux);margin-top:1px}
.cc-cherche{margin-left:auto;display:flex;gap:.35rem;flex:0 1 400px;min-width:0}
.cc-cherche input{flex:1 1 auto;min-width:0;font:inherit;font-size:13.5px;padding:.42rem .7rem;
  border:1px solid var(--filet);border-radius:999px;background:var(--fond2);color:var(--encre)}
.cc-cherche input::placeholder{color:var(--doux)}
.cc-cherche button{font:inherit;font-size:12px;font-weight:700;letter-spacing:.06em;
  padding:.42rem .85rem;border:1px solid var(--accent-txt);border-radius:999px;
  background:var(--accent-txt);color:var(--fond);cursor:pointer;white-space:nowrap}
.cc-contour{border:1.5px solid var(--accent-txt);color:var(--accent-txt);border-radius:999px;
  padding:.4rem .9rem;font-size:12.5px;font-weight:700;white-space:nowrap;flex:0 0 auto}
.cc-contour:hover{text-decoration:none;background:var(--surf)}
.cc-burger{display:none;background:none;border:1px solid var(--filet);border-radius:6px;
  padding:.42rem .48rem;cursor:pointer;flex:0 0 auto}
.cc-burger span[aria-hidden]{display:block;width:16px;height:1.6px;background:var(--encre);margin:3px 0}

/* etage 2 : le rail, et le mega-menu qui se cale sur toute la largeur */
.cc-etage2{height:40px;border-bottom:1px solid var(--filet);background:var(--fond);position:relative}
/* 🪤 surtout PAS d'overflow ici : le scroller couperait le mega-menu, qui est
   positionne sur .cc-etage2 (son ancetre). Le rail se resserre, il ne defile pas. */
.cc-etage2-in{display:flex;align-items:stretch;height:100%;flex-wrap:nowrap;overflow:visible}
.cc-rail-lien{display:inline-flex;align-items:center;white-space:nowrap;padding:0 .8rem;
  font-size:13px;font-weight:600;color:var(--encre);border-bottom:2px solid transparent}
.cc-rail-lien:hover{text-decoration:none;border-bottom-color:var(--accent)}
.cc-rail-lien.is-actif{border-bottom-color:var(--accent);color:var(--accent-txt)}
.cc-rail-lien--fin{margin-left:auto;color:var(--doux);font-weight:500}
.cc-rail-item{display:flex}
.cc-mega{position:absolute;left:0;right:0;top:100%;background:var(--fond2);
  border-bottom:1px solid var(--filet);box-shadow:var(--ombre-mega);
  opacity:0;visibility:hidden;z-index:29}
.cc-rail-item:hover .cc-mega,.cc-rail-item:focus-within .cc-mega{opacity:1;visibility:visible}
.cc-mega-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.8rem;
  padding-block:1.4rem 1.6rem}
.cc-mega-col--intro{border-right:2px solid var(--accent);box-shadow:1px 0 0 var(--filet);
  padding-right:1.6rem;margin-right:-.2rem}
.cc-mega-t{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--doux);padding-bottom:.4rem;margin-bottom:.6rem;border-bottom:1px solid var(--filet)}
.cc-mega-col--intro .cc-mega-t{font-family:var(--titre);font-size:17px;font-weight:700;
  letter-spacing:-.01em;text-transform:none;color:var(--encre);border-bottom:0;padding-bottom:.2rem}
.cc-mega-chapo{font-size:13.5px;color:var(--doux);line-height:1.5}
.cc-mega-chiffre{font-family:var(--titre);font-size:26px;font-weight:800;line-height:1;
  color:var(--accent-txt);font-variant-numeric:tabular-nums;margin-top:.7rem;
  display:flex;align-items:baseline;gap:.45rem}
.cc-mega-chiffre span{font-family:var(--courant);font-size:12px;font-weight:600;color:var(--doux)}
.cc-mega-tout{display:inline-block;margin-top:.8rem;font-size:12.5px;font-weight:700;
  color:var(--accent-txt);border-bottom:1.5px solid var(--accent)}
.cc-mega-liste li{padding:.32rem 0;border-bottom:1px solid var(--filet);
  display:flex;flex-direction:column;gap:.1rem}
.cc-mega-liste a{font-size:14px;font-weight:600;line-height:1.32}
.cc-mega-date{font-size:11.5px;color:var(--doux);font-variant-numeric:tabular-nums}
.cc-mega-liste--compte li{flex-direction:row;justify-content:space-between;align-items:baseline;gap:.6rem}
.cc-mega-compte{font-size:12px;font-weight:700;color:var(--accent-txt);font-variant-numeric:tabular-nums}

/* ---------- 4. ACCUEIL : ENTREE + GRILLE 3x3 ----------------------------- */
.cc-entree{background:var(--surf);border-bottom:1px solid var(--filet)}
.cc-entree-in{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:2.4rem;align-items:end;padding-block:2.4rem 2.2rem}
.cc-entree-titre{font-size:clamp(30px,4.6vw,50px);line-height:1.02;font-weight:800;margin-top:.5rem}
.cc-entree-chapo{font-size:17px;color:var(--doux);margin-top:.9rem;max-width:62ch}
.cc-entree-chiffres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;margin:0}
.cc-entree-chiffres > div{background:var(--fond2);border:1px solid var(--filet);
  border-left:3px solid var(--accent);border-radius:var(--rayon);padding:.9rem 1rem;box-shadow:var(--ombre)}
.cc-entree-chiffres dt{font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--doux)}
.cc-entree-chiffres dd{margin:0;font-family:var(--titre);font-size:34px;font-weight:800;
  line-height:1;color:var(--encre);font-variant-numeric:tabular-nums;margin-top:.3rem}

.cc-tuiles-bloc{padding-block:2.4rem}
.cc-tuiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.cc-tuile{background:var(--fond2);border:1px solid var(--filet);border-radius:var(--rayon);
  box-shadow:var(--ombre);overflow:hidden;display:flex;flex-direction:column}
.cc-tuile-img{display:block}
.cc-tuile-img img{width:100%;aspect-ratio:3/2;object-fit:cover}
.cc-tuile-img .jr-plaque{border-radius:0}
.cc-tuile-corps{padding:1rem 1.05rem 1.15rem}
.cc-tuile-titre{font-size:19px;font-weight:700;display:inline}
.cc-tuile-chapo{font-size:13.5px;color:var(--doux);margin-top:.7rem;
  padding-top:.7rem;border-top:1px solid var(--filet)}

/* ---------- 5. LE TABLEAU SIGNATURE : COLONNE DE GAUCHE FIGEE ------------- */
.cc-comparer{background:var(--surf);border-block:1px solid var(--filet);padding-block:2.4rem}
.cc-tableau-boite{overflow:auto;max-height:min(600px,80vh);border:1px solid var(--filet);
  border-radius:var(--rayon);background:var(--fond2);-webkit-overflow-scrolling:touch}
.cc-tableau{width:100%;border-collapse:separate;border-spacing:0;font-size:14.5px;
  font-variant-numeric:tabular-nums}
.cc-tableau thead th{position:sticky;top:0;z-index:2;background:var(--surf);color:var(--encre);
  font-family:var(--courant);font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;text-align:left;padding:.7rem .85rem;white-space:nowrap;
  border-bottom:2px solid var(--accent);box-shadow:0 1px 0 var(--filet)}
/* 🪤 LE trait de la famille : 2 px d'accent, puis 1 px de filet pose par l'ombre. */
.cc-tableau .cc-col-fixe{position:sticky;left:0;text-align:left;white-space:normal;
  min-width:232px;max-width:360px;border-right:2px solid var(--accent);
  box-shadow:1px 0 0 var(--filet)}
.cc-tableau thead .cc-col-fixe{z-index:3;box-shadow:1px 0 0 var(--filet), 0 1px 0 var(--filet)}
.cc-tableau tbody th{padding:.7rem .85rem;font-weight:600;vertical-align:top;
  border-bottom:1px solid var(--filet);background:var(--fond2)}
.cc-tableau td{padding:.7rem .85rem;border-bottom:1px solid var(--filet);color:var(--doux);
  vertical-align:top;white-space:nowrap;background:var(--fond2)}
.cc-tableau tbody tr:nth-child(even) th,
.cc-tableau tbody tr:nth-child(even) td{background:var(--surf)}
.cc-tableau tbody tr.is-courante th,
.cc-tableau tbody tr.is-courante td{background:color-mix(in srgb, #235fa8 12%, transparent)}
.cc-tab-titre{display:block;font-family:var(--titre);font-size:15px;font-weight:600;line-height:1.3;
  color:var(--encre);white-space:normal}
.cc-tab-court{display:block;font-size:12px;color:var(--doux);margin-top:.2rem;white-space:normal}
.cc-tab-date{display:block;font-size:12px;color:var(--doux);margin-top:.15rem}
.cc-tab-ici{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent2-txt);margin-bottom:.2rem}
.cc-tab-aller{font-size:12.5px;font-weight:700;color:var(--accent-txt);
  border-bottom:1.5px solid var(--accent)}
.cc-col-nb{font-family:var(--titre);font-weight:800;font-size:17px;color:var(--encre)}
.cc-col-fin{text-align:right}

/* ---------- 6. SEPT COLONNES / CINQ COLONNES : DOSSIER + OUTILS ---------- */
.cc-sept-cinq{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:2.4rem;padding-block:2.4rem;align-items:start}
.cc-dossier-titre{font-size:clamp(24px,3vw,34px);line-height:1.08;margin-top:.5rem}
.cc-dossier-img{margin:1rem 0 0}
.cc-dossier-img img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--rayon)}
.cc-lies{margin-top:1.2rem;border-top:2px solid var(--accent);box-shadow:0 -1px 0 var(--filet)}
.cc-lies li{padding:.65rem 0;border-bottom:1px solid var(--filet);
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.cc-lies a{font-family:var(--titre);font-size:16px;font-weight:600;line-height:1.3}

.cc-outil{background:var(--surf);border:1px solid var(--filet);border-radius:var(--rayon);
  padding:1rem 1.05rem 1.05rem}
.cc-outil + .cc-outil{margin-top:1rem}
.cc-outil-t{font-family:var(--titre);font-size:16.5px;font-weight:700;margin-bottom:.7rem}
.cc-outil-champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),1fr));gap:.6rem}
.cc-outil label{display:flex;flex-direction:column;gap:.25rem;font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--doux)}
.cc-outil input{font:inherit;font-size:14.5px;font-variant-numeric:tabular-nums;
  padding:.45rem .55rem;border:1px solid var(--filet);border-radius:6px;
  background:var(--fond2);color:var(--encre);width:100%;min-width:0}
.cc-outil input::placeholder{color:var(--doux);font-size:13px;text-transform:none;letter-spacing:0}
.cc-outil-res{display:block;margin-top:.75rem;padding:.6rem .75rem;background:var(--fond2);
  border-left:3px solid var(--accent);border-radius:0 6px 6px 0;font-size:14.5px;
  font-weight:600;color:var(--encre);line-height:1.45;font-variant-numeric:tabular-nums}
.cc-outil-note{font-size:11.5px;color:var(--doux);margin-top:.55rem;line-height:1.45}
.cc-outil--art{margin:2rem 0 0}

/* ---------- 7. LA BANDE SOMBRE « COMMENT NOUS COMPARONS » ---------------- */
.cc-methode{background:var(--bande);color:var(--bande-encre);padding-block:2.6rem 2.8rem}
.cc-methode-titre{font-size:clamp(22px,2.6vw,30px);color:var(--bande-encre);
  padding-bottom:.6rem;border-bottom:2px solid var(--bande-n)}
.cc-methode-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8rem;margin-top:1.6rem}
.cc-methode-points li{position:relative;padding-top:.2rem}
.cc-methode-points li + li{border-left:1px solid color-mix(in srgb, #E5E6EA 22%, transparent);
  padding-left:1.8rem}
.cc-methode-n{font-family:var(--titre);font-size:30px;font-weight:800;line-height:1;
  color:var(--bande-n);font-variant-numeric:tabular-nums;display:block;margin-bottom:.5rem}
.cc-methode-points h3{font-size:18px;color:var(--bande-encre);margin-bottom:.45rem}
.cc-methode-points p{font-size:14.5px;line-height:1.55;color:var(--bande-doux)}

/* ---------- 8. CARTES ---------------------------------------------------- */
.cc-grille-bloc{padding-block:2.4rem}
.cc-grille3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.cc-carte{background:var(--fond2);border:1px solid var(--filet);border-radius:var(--rayon);
  box-shadow:var(--ombre);overflow:hidden;display:flex;flex-direction:column}
.cc-carte-img img{width:100%;aspect-ratio:3/2;object-fit:cover}
.cc-carte-img .jr-plaque{border-radius:0}
.cc-carte-corps{padding:.95rem 1.05rem 1.1rem}
.cc-carte-titre{font-size:18px;font-weight:700;margin-top:.35rem;line-height:1.24}

/* ---------- 9. L'ACCORDEON ----------------------------------------------- */
.cc-questions{padding-block:1.4rem 3rem}
.cc-q{background:var(--fond2);border:1px solid var(--filet);border-radius:var(--rayon);
  margin-bottom:.6rem;overflow:hidden}
.cc-q summary{cursor:pointer;list-style:none;position:relative;
  padding:.9rem 3rem .9rem 1.05rem;font-family:var(--titre);font-size:17px;font-weight:600;
  line-height:1.35}
.cc-q summary::-webkit-details-marker{display:none}
.cc-q summary::after{content:"+";position:absolute;right:1.05rem;top:50%;
  transform:translateY(-50%);font-size:22px;font-weight:700;line-height:1;color:var(--accent-txt)}
.cc-q[open] summary::after{content:"–"}
.cc-q[open] summary{background:var(--surf);border-bottom:2px solid var(--accent);
  box-shadow:0 1px 0 var(--filet)}
.cc-q-rep{padding:.95rem 1.05rem 1.1rem;font-size:15px;color:var(--doux);line-height:1.6}
.cc-q-lien{margin-top:.7rem;display:flex;flex-wrap:wrap;gap:.6rem;align-items:baseline}
.cc-q-lien a{font-size:13.5px;font-weight:700;color:var(--accent-txt);
  border-bottom:1.5px solid var(--accent)}

/* ---------- 10. ARTICLE -------------------------------------------------- */
.cc-art-tete{background:var(--surf);border-bottom:1px solid var(--filet);padding-block:1.8rem 1.6rem}
.cc-ariane{font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--doux);
  display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:.8rem}
.cc-art-titre{font-size:clamp(28px,4.2vw,44px);line-height:1.05;font-weight:800;margin-top:.4rem;
  max-width:24ch}
.cc-art-chapo{font-size:18px;line-height:1.55;color:var(--doux);margin-top:.9rem;max-width:70ch}
.cc-art-corps{display:grid;grid-template-columns:minmax(0,236px) minmax(0,1fr);
  gap:2.6rem;align-items:start;padding-block:2rem 2.8rem}

.cc-somm-col{position:sticky;top:108px}
.cc-sommaire{border-left:2px solid var(--accent);box-shadow:-1px 0 0 var(--filet);
  padding-left:1rem}
.cc-somm-t{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--doux);margin-bottom:.6rem}
.cc-sommaire ol{counter-reset:none}
.cc-sommaire li + li{margin-top:.15rem}
.cc-sommaire a{display:flex;gap:.55rem;align-items:baseline;padding:.34rem 0;
  font-size:14px;line-height:1.35;color:var(--doux)}
.cc-sommaire a span{font-family:var(--titre);font-size:11.5px;font-weight:800;
  color:var(--accent-txt);font-variant-numeric:tabular-nums;flex:0 0 auto}
.cc-sommaire a:hover,.cc-sommaire a.is-lu{color:var(--encre);text-decoration:none}
.cc-sommaire a.is-lu{font-weight:700}
.cc-somm-maj{font-size:11.5px;color:var(--doux);margin-top:1rem;padding-top:.7rem;
  border-top:1px solid var(--filet)}

.cc-art-illu{margin:0 0 1.6rem}
.cc-art-illu img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--rayon)}
.cc-art-illu figcaption{font-size:12px;color:var(--doux);margin-top:.45rem;
  padding-top:.35rem;border-top:1px solid var(--filet)}

.cc-encadre{border-radius:var(--rayon);padding:1.1rem 1.2rem;margin:1.6rem 0}
.cc-encadre-t{font-family:var(--courant);font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;margin-bottom:.7rem}
.cc-encadre--resume{background:var(--surf);border-left:4px solid var(--accent);
  border-radius:0 var(--rayon) var(--rayon) 0}
.cc-encadre--resume .cc-encadre-t{color:var(--accent-txt)}
.cc-encadre--resume ul li{position:relative;padding-left:1.2rem;margin-bottom:.55rem;
  font-size:15px;line-height:1.5;color:var(--doux)}
.cc-encadre--resume ul li:last-child{margin-bottom:0}
.cc-encadre--resume ul li::before{content:"";position:absolute;left:0;top:.6em;
  width:7px;height:7px;border-radius:2px;background:var(--accent)}
.cc-encadre--resume strong{color:var(--encre)}
.cc-encadre--methode{border:1px dashed var(--filet);border-left:4px solid var(--accent2);
  background:transparent;margin-top:2rem}
.cc-encadre--methode .cc-encadre-t{color:var(--accent2-txt)}
.cc-encadre--methode p{font-size:14.5px;color:var(--doux);line-height:1.6}
.cc-encadre--methode p + p{margin-top:.7rem}

/* le corps de l'article : tout ce que the_content peut cracher */
.cc-corps{font-size:17.5px;line-height:1.7;max-width:74ch}
.cc-corps p{margin:0 0 1.15rem}
.cc-corps h2{font-size:clamp(21px,2.4vw,27px);margin:2.2rem 0 .8rem;padding-bottom:.4rem;
  border-bottom:2px solid var(--accent);box-shadow:0 1px 0 var(--filet)}
.cc-corps h3{font-size:19.5px;margin:1.6rem 0 .5rem;color:var(--accent-txt)}
.cc-corps h4{font-size:17px;margin:1.3rem 0 .4rem}
.cc-corps ul{margin:0 0 1.15rem}
.cc-corps ul li{position:relative;padding-left:1.2rem;margin-bottom:.5rem}
.cc-corps ul li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:2px;background:var(--accent)}
.cc-corps ol{list-style:decimal;margin:0 0 1.15rem;padding-left:1.4rem}
.cc-corps ol li{margin-bottom:.5rem;padding-left:.2rem}
.cc-corps ol li::marker{font-family:var(--titre);font-weight:800;color:var(--accent-txt)}
.cc-corps a{color:var(--accent-txt);text-decoration:underline;text-underline-offset:3px}
.cc-corps blockquote{margin:1.6rem 0;padding:.9rem 1.1rem;background:var(--surf);
  border-left:4px solid var(--accent2);border-radius:0 var(--rayon) var(--rayon) 0;
  font-size:17px;line-height:1.5}
.cc-corps blockquote p:last-child{margin-bottom:0}
.cc-corps img{margin:1.5rem 0;border-radius:var(--rayon)}
.cc-corps figure{margin:1.5rem 0}
.cc-corps figcaption{font-size:12px;color:var(--doux);margin-top:.4rem;
  padding-top:.35rem;border-top:1px solid var(--filet)}
.cc-corps code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;
  background:var(--surf);border:1px solid var(--filet);border-radius:4px;padding:.06em .35em}
.cc-corps pre{background:var(--surf);border:1px solid var(--filet);border-radius:var(--rayon);
  padding:.9rem 1rem;overflow-x:auto;font-size:14px;margin:1.4rem 0}
.cc-corps pre code{background:none;border:0;padding:0}
/* un tableau ecrit dans l'article prend la grammaire de la famille : double filet
   sur la premiere colonne, lignes alternees, et il defile dans sa propre boite */
.cc-corps table{display:block;width:100%;max-width:100%;overflow-x:auto;
  border-collapse:collapse;font-size:14.5px;margin:1.5rem 0;
  border:1px solid var(--filet);border-radius:var(--rayon)}
.cc-corps th,.cc-corps td{padding:.6rem .7rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--filet)}
.cc-corps thead th{background:var(--surf);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;border-bottom:2px solid var(--accent)}
.cc-corps tbody tr:nth-child(even){background:var(--surf)}
.cc-corps tr > *:first-child{border-right:2px solid var(--accent);font-weight:600}
.cc-corps tr > *:nth-child(2){border-left:1px solid var(--filet)}

.cc-comp-art{margin-top:2.4rem}

/* la signature d'auteur produite par jr_signature */
.sb-signature{display:flex;gap:1rem;align-items:flex-start;margin-top:2.4rem;padding-top:1.2rem;
  border-top:2px solid var(--accent);box-shadow:0 -1px 0 var(--filet)}
.sb-signature img,.sb-signature-photo{width:64px;height:64px;border-radius:50%;
  border:1px solid var(--filet);flex:0 0 auto}
.sb-signature-nom{font-family:var(--titre);font-weight:700;font-size:16.5px}
.sb-signature-bio{font-size:14px;color:var(--doux);margin-top:.25rem;line-height:1.5}
.sb-date{font-size:11.5px;color:var(--doux);margin-top:.4rem}

/* ---------- 11. RUBRIQUE ------------------------------------------------- */
.cc-rub-tete{background:var(--surf);border-bottom:1px solid var(--filet);padding-block:1.9rem 1.8rem}
.cc-rub-tete-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,270px);
  gap:2rem;align-items:end}
.cc-rub-titre{font-size:clamp(26px,3.8vw,40px);line-height:1.06;font-weight:800;
  display:flex;align-items:center}
.cc-rub-titre .cc-pastille{width:12px;height:12px;margin-right:.6rem}
.cc-rub-chapo{font-size:16.5px;color:var(--doux);margin-top:.7rem;max-width:66ch}
.cc-rub-repere{background:var(--fond2);border:1px solid var(--filet);border-left:3px solid var(--accent);
  border-radius:var(--rayon);padding:.9rem 1rem;box-shadow:var(--ombre)}
.cc-rub-repere .cc-chiffre{margin-top:0;font-size:38px}
.cc-vide{padding-block:3rem}
.cc-pagination{display:flex;flex-wrap:wrap;gap:.4rem;padding-top:1.4rem;font-size:13.5px;font-weight:600}
.cc-pagination .page-numbers{padding:.4rem .75rem;border:1px solid var(--filet);
  border-radius:6px;background:var(--fond2)}
.cc-pagination .current{background:var(--accent-txt);border-color:var(--accent-txt);color:var(--fond)}
.cc-autres{padding-block:1rem 3rem}
.cc-autres-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:.7rem}
.cc-autres-liste a{display:flex;align-items:center;gap:.2rem;background:var(--fond2);
  border:1px solid var(--filet);border-radius:var(--rayon);padding:.6rem .8rem;font-size:14.5px;font-weight:600}
.cc-autres-liste a:hover{text-decoration:none;border-color:var(--accent)}
.cc-autres-nom{flex:1 1 auto;min-width:0}
.cc-autres-nb{font-size:12.5px;font-weight:700;color:var(--accent-txt);font-variant-numeric:tabular-nums}

/* ---------- 12. PIED DE PAGE --------------------------------------------- */
.cc-pied{margin-top:2rem;background:var(--surf);border-top:2px solid var(--accent);
  box-shadow:0 -1px 0 var(--filet)}
.cc-pied-tete{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding-block:1.6rem 1.2rem;border-bottom:1px solid var(--filet)}
.cc-mono--pied{width:34px}
.cc-pied-marque{font-family:var(--titre);font-weight:800;font-size:22px;letter-spacing:-.02em}
.cc-pied-base{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--doux)}
.cc-pied-note{flex:1 1 320px;font-size:13px;color:var(--doux);max-width:60ch;margin-left:auto}
.cc-pied-grille{display:grid;grid-template-columns:1.5fr 1fr 1.3fr 1fr;gap:2rem;padding-block:1.8rem}
.cc-pied-titre{font-family:var(--courant);font-size:10.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--doux);padding-bottom:.45rem;margin-bottom:.7rem;
  border-bottom:1px solid var(--filet)}
.cc-pied-liste li{padding:.3rem 0;font-size:14px;display:flex;justify-content:space-between;gap:.7rem}
.cc-pied-liste--deux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.4rem}
.cc-pied-liste--fil li{flex-direction:column;gap:.1rem;align-items:flex-start}
.cc-pied-compte{font-size:12px;color:var(--doux);font-variant-numeric:tabular-nums;flex:0 0 auto}
.cc-pied-texte{font-size:12.5px;color:var(--doux);margin-top:.6rem;line-height:1.45}
.cc-pied input[type="search"],.cc-pied input[type="text"]{font:inherit;font-size:13.5px;width:100%;
  padding:.45rem .7rem;border:1px solid var(--filet);border-radius:999px;
  background:var(--fond2);color:var(--encre)}
.cc-pied button[type="submit"],.cc-pied input[type="submit"]{font:inherit;font-size:11.5px;
  font-weight:700;letter-spacing:.08em;margin-top:.45rem;padding:.42rem .9rem;
  border:1px solid var(--accent-txt);background:var(--accent-txt);color:var(--fond);
  border-radius:999px;cursor:pointer}
.cc-ours{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding-block:.9rem 1.1rem;border-top:1px solid var(--filet);font-size:12px;color:var(--doux)}
.cc-bascule{font:inherit;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  padding:.4rem .85rem;border:1px solid var(--filet);background:var(--fond2);color:var(--encre);
  border-radius:999px;cursor:pointer}

/* ---------- 13. BARRE MOBILE BASSE (R-0022, structure du modele) --------- */
.sb-nav-mobile{display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--fond);border-top:1px solid var(--filet);
  padding-bottom:env(safe-area-inset-bottom)}
.sb-nav-mobile-item{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:.45rem .2rem .5rem;font-size:10px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--doux);text-align:center}
.sb-nav-mobile-item:hover{text-decoration:none}
.sb-nav-mobile-item.is-actif{color:var(--accent-txt)}
.sb-nav-ico{display:block;width:20px;height:20px}
.sb-nav-ico svg{width:100%;height:100%;stroke:currentColor;fill:none}

/* ---------- 14. REPLIS (jamais un debordement horizontal) ---------------- */
@media (max-width: 1080px){
  .cc-rail-lien{padding:0 .55rem;font-size:12.5px}
  .cc-mega-in{gap:1.2rem}
  .cc-entree-in{grid-template-columns:minmax(0,1fr);gap:1.6rem;align-items:start}
  .cc-tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cc-sept-cinq{grid-template-columns:minmax(0,1fr);gap:2rem}
  .cc-methode-points{grid-template-columns:minmax(0,1fr);gap:1.4rem}
  .cc-methode-points li + li{border-left:0;padding-left:0;padding-top:1.2rem;
    border-top:1px solid color-mix(in srgb, #E5E6EA 22%, transparent)}
  .cc-grille3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cc-art-corps{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .cc-somm-col{position:static}
  .cc-corps{max-width:100%}
  .cc-pied-grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem}
  .cc-rub-tete-in{grid-template-columns:minmax(0,1fr);align-items:start}
}
@media (max-width: 900px){
  /* le rail passe en panneau deroulant : le mega-menu n'a plus lieu d'etre */
  .cc-burger{display:block}
  .cc-cherche{display:none}
  .cc-etage2{position:absolute;top:52px;left:0;right:0;height:auto;max-height:0;
    overflow:hidden;border-bottom:0;box-shadow:var(--ombre-mega)}
  .cc-etage2.is-ouvert{max-height:min(70vh,520px);overflow:auto;border-bottom:1px solid var(--filet)}
  .cc-etage2-in{flex-direction:column;height:auto;overflow:visible;padding-block:.4rem .8rem}
  .cc-rail-item{display:block}
  .cc-rail-lien{width:100%;padding:.65rem .2rem;border-bottom:1px solid var(--filet);
    border-left:2px solid transparent}
  .cc-rail-lien.is-actif{border-bottom-color:var(--filet);border-left-color:var(--accent)}
  .cc-rail-lien--fin{margin-left:0}
  .cc-mega{display:none}
  .cc-somm-col{position:static}
}
@media (max-width: 760px){
  .cc-tuiles,.cc-grille3,.cc-autres-liste{grid-template-columns:minmax(0,1fr)}
  .cc-entree-chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cc-entree-titre{font-size:clamp(26px,7.4vw,34px)}
  .cc-pied-grille,.cc-pied-liste--deux{grid-template-columns:minmax(0,1fr)}
  .cc-pied-note{margin-left:0}
  .cc-tableau-boite{max-height:min(70vh,460px)}
  .cc-tableau .cc-col-fixe{min-width:184px}
  .cc-outil-champs{grid-template-columns:minmax(0,1fr)}
  .sb-nav-mobile{display:flex}
  body{padding-bottom:64px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;
    scroll-behavior:auto!important}
}
@media print{
  .cc-etage2,.sb-nav-mobile,.cc-bascule,.cc-cherche,.cc-contour,.cc-outil,.cc-somm-col{display:none!important}
  .cc-tete{position:static}
  .cc-tableau-boite{max-height:none;overflow:visible}
  .cc-methode{background:none;color:#000}
  body{background:#fff;color:#000}
}

/* garde-fou : un display:grid/flex de classe bat l attribut hidden (vu le 04/09) */
[hidden]{display:none!important}

/* P-470 — la 1re carte de l accueil porte grid-column:span 2 en style INLINE.
   Sur telephone la grille n a plus qu une colonne : le span fabrique une colonne
   implicite dimensionnee sur le contenu (526px dans un ecran de 390) et pousse la page.
   !important est indispensable : on annule un style inline. */
@media (max-width:760px){.sb-grille>*{grid-column:auto!important}}

/* P-470 — la plume cite ses sources en URL BRUTE entre parentheses. Une URL ne
   contient aucun point de coupure : le paragraphe fait 677px de large dans une colonne
   de 329 et la page deborde de 351px sur telephone. Le piege : AUCUN element ne depasse
   le viewport (getBoundingClientRect ne voit rien), c est le contenu qui deborde de son
   propre element — seul scrollWidth > clientWidth le montre. */
.sb-corps{overflow-wrap:anywhere}

/* P-491 — display:contents : le h1 de la marque n existe pas pour la mise en page. */
.sb-marque-h1{display:contents}