/*
Theme Name: Bio Foodies Café
*/
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&family=Karla:wght@400;700&display=swap');

/* ==========================================================================
   GABARIT « CHRONO ET DÉNIVELÉ » — le carnet d'entrainement
   Quatre choses le rendent reconnaissable, et ce sont les seules qui comptent :
   1. le RAIL DROIT « Calculs » qui suit le lecteur sur l'accueil (position:sticky),
      avec trois vrais petits outils qui ne partent que de ce qu'on saisit ;
   2. des titres CONDENSES (Nunito) qui tiennent sur une ligne, esprit dossard ;
   3. la CHASSE FIXE (JetBrains Mono) reservee aux chronos, allures, distances,
      deniveles et comptes — jamais au texte courant ;
   4. le FILET DOUBLE sous chaque titre de section : 2px d'accent, 2px de vide, 1px de filet.
   Blanc franc, orange de dossard, aucune ombre : ce sont les bords 1px qui dessinent.
   ========================================================================== */

/* ---------- 1. JETONS ----------------------------------------------------- */
:root{
  color-scheme:light;
  --fond:#f6f6f4;            /* blanc franc, assume : c'est une feuille de plan */
  --surf:#E0E0DE;            /* la surface froide : bandeaux de donnees, bandes */
  --surf2:#D3D3D1;           /* un cran plus soutenu : entetes de tableau */
  --encre:#1c1c1c;           /* encre bleu-noir, jamais #000 */
  --doux:#1C1C1C;            /* encre de service — 6,8:1 sur le blanc */
  --filet:#C7C7C6;           /* le filet CHOISI, legerement bleu, jamais un gris pur */
  --filet-fort:#9D9D9C;      /* filet appuye : entetes de tableau, separations fortes */
  --accent:#c1502c;       /* l'orange de dossard, tire par site */
  --accent2:#B74C2A;     /* le bleu de balise, tire par site */
  --accent-txt:color-mix(in srgb, #c1502c 0%, #1a1a1a);
  --accent2-txt:color-mix(in srgb, #c1502c 0%, #17181a);
  --accent-lavis:color-mix(in srgb, #c1502c 12%, #f6f6f4);
  --accent-sur:#FFFFFF;      /* texte pose sur l'aplat d'accent */
  --sombre:#1c1c1c;          /* la bande sombre du calendrier */
  --sombre-encre:#f2f1ee;
  --sombre-doux:#F6F6F4;
  --sombre-filet:#222221;
  --rayon:3px;
  --titre:'Nunito','Oswald','Arial Narrow',Arial,sans-serif;
  --courant:'Karla','Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono','SFMono-Regular',Menlo,Consolas,monospace;
  --pas:clamp(2rem,4vw,3.4rem);   /* rythme serre : les blocs se touchent presque */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --fond:#17181a; --surf:#18191B; --surf2:#1A1B1C;
    --encre:#f2f1ee; --doux:#908F8F; --filet:#1B1C1E; --filet-fort:#232425;
    --accent-txt:color-mix(in srgb, #c1502c 0%, #f6f6f4);
    --accent2-txt:color-mix(in srgb, #c1502c 0%, #f6f6f4);
    --accent-lavis:color-mix(in srgb, #e0895f 18%, #17181a);
    --accent-sur:#FFFFFF;
    --sombre:#17181A; --sombre-encre:#f2f1ee; --sombre-doux:#908F8F; --sombre-filet:#1B1C1E;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --fond:#17181a; --surf:#18191B; --surf2:#1A1B1C;
  --encre:#f2f1ee; --doux:#908F8F; --filet:#1B1C1E; --filet-fort:#232425;
  --accent-txt:color-mix(in srgb, #c1502c 0%, #f6f6f4);
  --accent2-txt:color-mix(in srgb, #c1502c 0%, #f6f6f4);
  --accent-lavis:color-mix(in srgb, #e0895f 18%, #17181a);
  --accent-sur:#FFFFFF;
  --sombre:#17181A; --sombre-encre:#f2f1ee; --sombre-doux:#908F8F; --sombre-filet:#1B1C1E;
}

/* ---------- 2. SOCLE ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--fond);color:var(--encre);
  font-family:var(--courant);font-size:16.5px;line-height:1.6;
  -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.08;
  letter-spacing:.004em;text-wrap:balance}
p{margin:0 0 .9em}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit}
.cd-large{width:min(1280px,100% - 2.2rem);margin-inline:auto}
.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 .9rem;z-index:99;
  background:var(--accent);color:var(--accent-sur);font-weight:600}
[hidden]{display:none!important}   /* un display:grid de classe ne doit jamais battre l'attribut */

/* LA CHASSE FIXE : chronos, allures, distances, deniveles, comptes. Rien d'autre. */
.cd-num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;
  letter-spacing:-.02em}
.cd-num--mini{font-size:.76rem;color:var(--doux);font-weight:400}
.cd-num--geant{font-size:clamp(3.4rem,9vw,4.6rem);line-height:.92;font-weight:700;
  color:var(--accent-txt);display:block}
.cd-num--tuile{font-size:1.9rem;font-weight:700;color:var(--accent-txt);line-height:1}
.cd-sep{color:var(--filet-fort);padding-inline:.35rem}
.cd-eti{font-family:var(--titre);font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-txt);margin:0 0 .3rem}
.cd-eti--fort{color:var(--accent2-txt)}
.cd-chapo{color:var(--doux);margin:.35rem 0 0;font-size:.95rem;line-height:1.5}
.cd-meta{color:var(--doux);font-size:.8rem;margin:0 0 .3rem;display:flex;align-items:center;flex-wrap:wrap}

/* LE FILET DOUBLE — 2px d'accent, 2px de vide, 1px de filet. Sous CHAQUE titre de section. */
.cd-sect-titre{position:relative;padding-bottom:.62rem;margin:0;
  font-size:clamp(1.5rem,2.6vw,2.15rem);text-transform:uppercase;letter-spacing:.01em}
.cd-sect-titre::after{content:"";position:absolute;left:0;bottom:0;width:96px;height:5px;
  background:linear-gradient(to bottom,var(--accent) 0 2px,transparent 2px 4px,var(--filet-fort) 4px 5px)}
.cd-sect-titre--page{font-size:clamp(1.9rem,4.4vw,3rem)}
.cd-sect-titre--rail{font-size:1.25rem}
.cd-sect-titre--rail::after{width:64px}
.cd-sect-sous{color:var(--doux);font-size:.9rem;margin:.55rem 0 0;max-width:62ch}
.cd-sect-tete{margin:0 0 1.2rem}
.cd-sect-tete--large{display:flex;align-items:flex-end;justify-content:space-between;gap:1.2rem;flex-wrap:wrap}

/* boutons — contour franc, aucun arrondi mou, aucune ombre */
.cd-bouton{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--titre);
  font-weight:700;font-size:.92rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.5rem .95rem;border-radius:var(--rayon);border:1.5px solid var(--accent);
  color:var(--accent-txt);background:transparent;cursor:pointer;white-space:nowrap;line-height:1.2}
.cd-bouton:hover{background:var(--accent-lavis);text-decoration:none}
.cd-bouton--plein{background:var(--accent);border-color:var(--accent);color:var(--accent-sur)}
.cd-bouton--plein:hover{background:var(--accent-txt);border-color:var(--accent-txt);color:#fff}
.cd-bouton .cd-num{font-size:.8rem;color:inherit;opacity:.8}

/* ---------- 3. LA TÊTE : 80 px, marque / rail de familles / bouton -------- */
.cd-tete{position:sticky;top:0;z-index:60;background:var(--fond);border-bottom:1px solid var(--filet)}
.cd-tete.is-pose{border-bottom-color:var(--filet-fort)}
.cd-tete-in{display:flex;align-items:center;gap:1.4rem;min-height:80px}
.cd-marque a{display:flex;align-items:center;gap:.7rem}
.cd-marque a:hover{text-decoration:none}
.cd-marque{margin:0;flex:none}
.cd-mono-svg{display:block;width:38px;height:38px;flex:none;color:var(--accent-txt)}
.cd-mono-svg svg{width:100%;height:100%;display:block;fill:currentColor}
.cd-marque-txt{display:flex;flex-direction:column;line-height:1}
.cd-marque-nom{font-family:var(--titre);font-weight:800;font-size:1.5rem;text-transform:uppercase;
  letter-spacing:.02em;color:var(--encre)}
.cd-marque-base{font-size:.68rem;color:var(--doux);letter-spacing:.09em;text-transform:uppercase;margin-top:.18rem}

.cd-rail{flex:1 1 auto;min-width:0}
.cd-rail-liste{display:flex;align-items:center;gap:.15rem}
.cd-rail-item{position:static}
.cd-rail-lien{display:inline-flex;align-items:center;gap:.4rem;background:none;border:0;
  padding:.55rem .7rem;cursor:pointer;font-family:var(--titre);font-weight:600;font-size:1rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--encre);border-bottom:2px solid transparent}
.cd-rail-lien:hover{color:var(--accent-txt)}
.cd-rail-lien.is-actif{border-bottom-color:var(--accent)}
.cd-rail-lien[aria-expanded="true"]{color:var(--accent-txt);border-bottom-color:var(--accent)}
.cd-rail-chev{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px)}
.cd-rail-lien[aria-expanded="true"] .cd-rail-chev{transform:rotate(225deg) translateY(-2px)}

/* le panneau du mega-menu : 4 colonnes, pleine largeur, pose sur un filet d'accent */
.cd-pan{position:absolute;left:0;right:0;top:100%;background:var(--fond);
  border-top:2px solid var(--accent);border-bottom:1px solid var(--filet);z-index:59}
.cd-pan-in{display:grid;grid-template-columns:1.1fr 1fr 1fr .9fr;gap:1.6rem;padding-block:1.5rem 1.7rem}
.cd-pan-col{min-width:0}
.cd-pan-col--liste{grid-column:span 2}
.cd-pan-eti{font-family:var(--titre);font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--doux);padding-bottom:.4rem;margin:0 0 .7rem;
  border-bottom:1px solid var(--filet)}
.cd-pan-titre{font-size:1.35rem;text-transform:uppercase;margin:0 0 .4rem}
.cd-pan-chapo{color:var(--doux);font-size:.87rem;margin:0 0 .9rem}
.cd-pan-liste{columns:2;column-gap:1.6rem}
.cd-pan-liste li{break-inside:avoid;padding:.32rem 0;border-bottom:1px solid var(--filet);
  display:flex;gap:.6rem;align-items:baseline;justify-content:space-between}
.cd-pan-liste a{font-size:.9rem;line-height:1.35}
.cd-pan-outils li{padding:.34rem 0;border-bottom:1px solid var(--filet)}
.cd-pan-outils a{font-family:var(--titre);font-weight:600;font-size:.96rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--accent2-txt)}
.cd-pan-note{font-size:.78rem;color:var(--doux);margin:.7rem 0 0}

.cd-tete-fin{display:flex;align-items:center;gap:.7rem;flex:none}
.cd-burger{display:none;width:42px;height:38px;background:none;border:1px solid var(--filet-fort);
  border-radius:var(--rayon);cursor:pointer;padding:9px 8px}
.cd-burger span{display:block;height:2px;background:var(--encre);margin:0 0 5px}
.cd-burger span:last-child{margin:0}
.cd-mobrail{border-top:1px solid var(--filet);background:var(--surf);padding-block:.8rem 1.1rem}
.cd-mobrail-liste li{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid var(--filet);padding:.6rem 0}
.cd-mobrail-liste a{font-family:var(--titre);font-weight:600;font-size:1.05rem;text-transform:uppercase;letter-spacing:.05em}
.cd-loupe{display:flex;gap:.4rem;margin-top:.9rem}
.cd-loupe input{flex:1 1 auto;min-width:0;padding:.55rem .7rem;border:1px solid var(--filet-fort);
  border-radius:var(--rayon);background:var(--fond);color:var(--encre);font:inherit;font-size:.9rem}
.cd-loupe button{padding:.55rem .9rem;border:1.5px solid var(--accent);background:var(--accent);
  color:var(--accent-sur);border-radius:var(--rayon);font-family:var(--titre);font-weight:700;
  letter-spacing:.08em;cursor:pointer}

/* ---------- 4. LA CARTE : bord 1px, image 3:2, bandeau de donnees --------- */
.cd-carte{display:flex;flex-direction:column;border:1px solid var(--filet);
  border-radius:var(--rayon);background:var(--fond);overflow:hidden}
.cd-carte:hover{border-color:var(--filet-fort)}
.cd-carte-img{margin:0;background:var(--surf)}
.cd-carte-img img,.cd-carte-img .jr-plaque{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.cd-carte--tete .cd-carte-img img,.cd-carte--tete .cd-carte-img .jr-plaque{aspect-ratio:16/9}
/* le bandeau de donnees : colle SOUS l'image, chasse fixe, fond surf. Vide, il n'existe pas. */
.cd-bandeau{display:flex;flex-wrap:wrap;background:var(--surf);
  border-bottom:1px solid var(--filet);border-top:1px solid var(--filet)}
.cd-bandeau li{flex:1 1 0;min-width:88px;display:flex;flex-direction:column;gap:.1rem;
  padding:.45rem .6rem;border-left:1px solid var(--filet)}
.cd-bandeau li:first-child{border-left:0}
.cd-bandeau-lib{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--doux);
  font-family:var(--titre);font-weight:700}
.cd-bandeau .cd-num{font-size:.95rem;color:var(--encre);font-weight:700}
.cd-carte-txt{padding:.85rem .9rem 1rem;display:flex;flex-direction:column;flex:1 1 auto}
.cd-carte-titre{font-size:1.12rem;line-height:1.14;letter-spacing:.005em;margin:0}
.cd-carte--tete .cd-carte-titre{font-size:clamp(1.6rem,3.2vw,2.35rem);text-transform:uppercase}
.cd-carte--tete .cd-carte-txt{padding:1.1rem 1.15rem 1.25rem}
.cd-carte--tete .cd-chapo{font-size:1.02rem}

/* la plaque de repli produite par jr_vignette lit --rayon, --surf et --titre */
.jr-plaque{border-radius:var(--rayon)}

/* ---------- 5. L'ACCUEIL : la une 8 col + le rail collant 4 col ----------- */
.cd-une{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:2rem;
  padding-block:1.8rem var(--pas)}
.cd-une-corps{min-width:0}
.cd-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem;margin-top:1.1rem}

/* LE RAIL DROIT « CALCULS » — il suit le lecteur, c'est la signature du site */
.cd-rail-calc{min-width:0}
.cd-calc-boite{position:sticky;top:96px;border:1px solid var(--filet-fort);border-top:3px solid var(--accent);
  border-radius:var(--rayon);background:var(--surf);padding:1.1rem 1.1rem 1.2rem;
  max-height:calc(100vh - 112px);overflow-y:auto}
.cd-sect-tete--rail{margin-bottom:1rem}
.cd-outil{border-top:1px solid var(--filet-fort);padding-top:.95rem;margin-top:.95rem}
.cd-outil:first-of-type{border-top:0;padding-top:0;margin-top:0}
.cd-outil-titre{font-size:1.05rem;text-transform:uppercase;letter-spacing:.05em;margin:0 0 .6rem;
  display:flex;flex-direction:column}
.cd-outil-titre span{font-family:var(--courant);font-size:.74rem;font-weight:400;letter-spacing:.04em;
  text-transform:none;color:var(--doux);margin-top:.12rem}
.cd-champs{display:grid;gap:.6rem}
.cd-champs--deux{grid-template-columns:repeat(2,minmax(0,1fr))}
.cd-champ{margin:0;display:flex;flex-direction:column;gap:.22rem;min-width:0}
.cd-champ label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--doux);
  font-family:var(--titre);font-weight:700}
.cd-saisie{display:flex;align-items:center;gap:.25rem;background:var(--fond);
  border:1px solid var(--filet-fort);border-radius:var(--rayon);padding:.32rem .5rem}
.cd-saisie:focus-within{border-color:var(--accent);outline:2px solid var(--accent-lavis)}
.cd-saisie input{flex:1 1 auto;min-width:0;width:100%;border:0;background:none;color:var(--encre);
  font-family:var(--mono);font-size:1rem;font-weight:500;padding:.16rem 0;
  -moz-appearance:textfield;appearance:textfield}
.cd-saisie input::-webkit-outer-spin-button,.cd-saisie input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cd-saisie input:focus{outline:none}
.cd-unite{font-family:var(--mono);font-size:.78rem;color:var(--doux);flex:none}
.cd-saisie--duo input{text-align:center}
.cd-outil-go{width:100%;justify-content:center;margin-top:.7rem}
.cd-res{display:block;margin-top:.75rem;border:1px solid var(--accent);border-left-width:3px;
  border-radius:var(--rayon);background:var(--fond);padding:.6rem .7rem}
.cd-res-l{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;
  padding:.22rem 0;border-bottom:1px dotted var(--filet)}
.cd-res-l:last-child{border-bottom:0}
.cd-res-lib{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--doux);
  font-family:var(--titre);font-weight:700}
.cd-res-val{font-size:1.05rem;font-weight:700;color:var(--accent-txt)}
.cd-res-vide{font-size:.84rem;color:var(--doux)}
.cd-outil-note{font-size:.75rem;color:var(--doux);margin:.55rem 0 0;line-height:1.4}

/* ---------- 6. LES BANDES ------------------------------------------------- */
.cd-bande{padding-block:var(--pas)}
.cd-bande--surf{background:var(--surf);border-block:1px solid var(--filet)}
.cd-bande--sombre{background:var(--sombre);color:var(--sombre-encre)}
.cd-bande--sombre .cd-sect-titre{color:var(--sombre-encre)}
.cd-bande--sombre .cd-sect-titre::after{background:linear-gradient(to bottom,var(--accent) 0 2px,transparent 2px 4px,var(--sombre-filet) 4px 5px)}
.cd-bande--sombre .cd-sect-sous{color:var(--sombre-doux)}

/* le chiffre du carnet : une valeur COMPTEE, en chasse fixe, avec sa source */
.cd-chiffre{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:1.8rem;align-items:center}
.cd-chiffre-val{border-left:3px solid var(--accent);padding-left:1.1rem}
.cd-chiffre-lib{font-family:var(--titre);font-size:1.02rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--encre);margin:.35rem 0 0;max-width:16ch;line-height:1.16}
.cd-chiffre-txt{font-size:1.02rem;margin:.3rem 0 .5rem}
.cd-chiffre-txt .cd-num{color:var(--accent2-txt);font-weight:700}
.cd-chiffre-src{font-size:.79rem;color:var(--doux);margin:0}

.cd-grille{display:grid;gap:1.1rem}
.cd-grille--trois{grid-template-columns:repeat(3,minmax(0,1fr))}
.cd-grille--quatre{grid-template-columns:repeat(4,minmax(0,1fr))}

/* le tableau des courses — tout en chasse fixe, defilable, jamais un debordement */
.cd-tableau-boite{overflow-x:auto;border:1px solid var(--sombre-filet);border-radius:var(--rayon)}
.cd-tableau{width:100%;border-collapse:collapse;min-width:560px}
.cd-tableau th{font-family:var(--titre);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  text-align:left;padding:.6rem .8rem;background:rgba(255,255,255,.05);color:var(--sombre-doux);
  border-bottom:1px solid var(--sombre-filet)}
.cd-tableau td{padding:.62rem .8rem;border-bottom:1px solid var(--sombre-filet);vertical-align:baseline;font-size:.92rem}
.cd-tableau tr:last-child td{border-bottom:0}
.cd-tableau td.cd-num{color:var(--sombre-encre);white-space:nowrap}
.cd-td-lieu{display:block;font-size:.76rem;color:var(--sombre-doux)}
.cd-td-vide{color:var(--sombre-doux)}

/* tuiles de familles */
.cd-tuiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--filet)}
.cd-tuile a{display:flex;flex-direction:column;gap:.25rem;background:var(--fond);
  padding:1.1rem 1rem 1.2rem;height:100%}
.cd-tuile a:hover{background:var(--surf);text-decoration:none}
.cd-tuile-nom{font-family:var(--titre);font-weight:700;font-size:1.15rem;text-transform:uppercase;letter-spacing:.03em}
.cd-tuile-chapo{font-size:.82rem;color:var(--doux);line-height:1.42}

.cd-liste-fil{margin-top:.4rem;columns:2;column-gap:2.2rem}
.cd-liste-fil li{break-inside:avoid;display:flex;gap:.8rem;align-items:baseline;
  padding:.48rem 0;border-bottom:1px solid var(--filet)}
.cd-liste-fil a{font-family:var(--titre);font-weight:600;font-size:1.02rem;line-height:1.2}

/* ---------- 7. L'ARTICLE -------------------------------------------------- */
.cd-art{padding-block:1.4rem var(--pas)}
.cd-ariane{font-size:.78rem;color:var(--doux);padding-bottom:.9rem;display:flex;flex-wrap:wrap;align-items:center}
.cd-ariane a{color:var(--doux)}
.cd-art-tete{border-top:2px solid var(--accent);padding-top:1rem;max-width:min(940px,100%)}
.cd-art-titre{font-size:clamp(2rem,5vw,3.4rem);text-transform:uppercase;letter-spacing:.005em;margin:0 0 .5rem}
.cd-art-chapo{font-size:1.14rem;line-height:1.45;color:var(--encre);border-left:3px solid var(--filet-fort);
  padding-left:.9rem;margin:0 0 .8rem;max-width:70ch}
.cd-art-credits{display:flex;flex-wrap:wrap;align-items:center;font-size:.82rem;color:var(--doux);margin:0}
.cd-art-photo{margin:1.3rem 0 0}
.cd-art-photo img,.cd-art-photo .jr-plaque{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--rayon)}
.cd-art-photo figcaption{font-size:.78rem;color:var(--doux);padding-top:.4rem;margin-top:.45rem;
  border-top:1px solid var(--filet)}

/* « La séance en bref » : 4 donnees en chasse fixe, absentes si non renseignees */
.cd-bref{margin-top:1.5rem;border:1px solid var(--filet-fort);border-top:3px solid var(--accent2);
  border-radius:var(--rayon);background:var(--surf);padding:1rem 1.1rem 1.1rem}
.cd-bref-titre{font-size:1.1rem;text-transform:uppercase;letter-spacing:.09em;margin:0 0 .8rem;color:var(--accent2-txt)}
.cd-bref-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--filet);margin:0;border:1px solid var(--filet)}
.cd-bref-case{background:var(--fond);padding:.7rem .8rem}
.cd-bref-case dt{font-family:var(--titre);font-size:.68rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--doux)}
.cd-bref-case dd{margin:.18rem 0 0;font-size:1.25rem;font-weight:700;color:var(--encre)}

.cd-art-corps{display:grid;grid-template-columns:220px minmax(0,1fr);gap:2.2rem;
  margin-top:1.8rem;align-items:start}
.cd-somm{position:sticky;top:100px;border-left:2px solid var(--accent);padding-left:.9rem}
.cd-somm-titre{font-family:var(--titre);font-size:.76rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--doux);margin:0 0 .5rem}
.cd-somm-liste{counter-reset:cdsom}
.cd-somm-liste li{counter-increment:cdsom;display:flex;gap:.55rem;align-items:baseline;padding:.3rem 0}
.cd-somm-liste li::before{content:counter(cdsom,decimal-leading-zero);font-family:var(--mono);
  font-size:.74rem;color:var(--accent-txt);font-weight:700;flex:none}
.cd-somm-liste a{font-size:.86rem;line-height:1.32;color:var(--doux)}
.cd-somm-liste a:hover{color:var(--encre)}
.cd-art-lecture{min-width:0;max-width:74ch}

/* les encadres de la famille — le contenu reel en profite via .cd-texte .cd-encadre */
.cd-encadre,.cd-texte .cd-encadre{margin:1.8rem 0 0;border:1px solid var(--filet-fort);
  border-left:4px solid var(--accent2);border-radius:var(--rayon);background:var(--surf);padding:1rem 1.1rem}
.cd-encadre--doute{border-left-color:var(--accent)}
.cd-encadre-titre{font-size:1.08rem;text-transform:uppercase;letter-spacing:.08em;margin:0 0 .5rem}
.cd-encadre--doute .cd-encadre-titre{color:var(--accent-txt)}
.cd-encadre--sources .cd-encadre-titre{color:var(--accent2-txt)}
.cd-encadre-corps{font-size:.93rem;color:var(--doux)}
.cd-encadre-corps p:last-child{margin-bottom:0}
.cd-art-pied{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--filet)}
.cd-suite{margin-top:var(--pas);padding-top:1.6rem;border-top:1px solid var(--filet)}

/* ---------- 8. LE CONTENU WORDPRESS (un article nu doit etre beau) -------- */
.cd-texte{font-size:1.06rem;line-height:1.68}
.cd-texte h2{font-size:clamp(1.4rem,2.6vw,1.85rem);text-transform:uppercase;letter-spacing:.01em;
  margin:2rem 0 .7rem;position:relative;padding-bottom:.5rem}
.cd-texte h2::after{content:"";position:absolute;left:0;bottom:0;width:72px;height:5px;
  background:linear-gradient(to bottom,var(--accent) 0 2px,transparent 2px 4px,var(--filet-fort) 4px 5px)}
.cd-texte h3{font-size:1.22rem;margin:1.5rem 0 .45rem;color:var(--accent2-txt);
  text-transform:uppercase;letter-spacing:.05em}
.cd-texte p{margin:0 0 1.05em}
.cd-texte a{color:var(--accent-txt);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.cd-texte ul,.cd-texte ol{margin:0 0 1.1em;padding-left:1.3rem}
.cd-texte ul{list-style:none;padding-left:0}
.cd-texte ul li{position:relative;padding-left:1.25rem;margin-bottom:.42em}
.cd-texte ul li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--accent)}
.cd-texte ol{list-style:none;counter-reset:cdol;padding-left:0}
.cd-texte ol li{counter-increment:cdol;position:relative;padding-left:2rem;margin-bottom:.42em}
.cd-texte ol li::before{content:counter(cdol,decimal-leading-zero);position:absolute;left:0;top:.06em;
  font-family:var(--mono);font-size:.82rem;font-weight:700;color:var(--accent-txt)}
.cd-texte blockquote{margin:1.5rem 0;padding:.2rem 0 .2rem 1.1rem;border-left:3px solid var(--accent);
  font-size:1.12rem;line-height:1.5;color:var(--encre)}
.cd-texte blockquote p:last-child{margin-bottom:0}
.cd-texte blockquote cite{display:block;font-style:normal;font-size:.82rem;color:var(--doux);margin-top:.5rem}
.cd-texte figure{margin:1.6rem 0}
.cd-texte figure img{border-radius:var(--rayon)}
.cd-texte figcaption{font-size:.79rem;color:var(--doux);padding-top:.4rem;margin-top:.45rem;
  border-top:1px solid var(--filet)}
.cd-texte img{border-radius:var(--rayon)}
.cd-texte hr{border:0;border-top:1px solid var(--filet);margin:2rem 0}
.cd-texte code{font-family:var(--mono);font-size:.9em;background:var(--surf);padding:.1em .35em;border-radius:2px}

/* LE TABLEAU D'ALLURES : ce que le site fait le mieux. Chasse fixe, zebrure froide,
   entete colle, conteneur defilant — un tableau ecrit dans l'editeur en profite seul. */
.cd-texte table{width:100%;border-collapse:collapse;margin:1.6rem 0;font-size:.93rem;
  border:1px solid var(--filet-fort);display:table}
.cd-texte figure.wp-block-table,.cd-texte .wp-block-table{overflow-x:auto}
.cd-texte thead th{position:sticky;top:0;background:var(--surf2);font-family:var(--titre);
  font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--encre);
  text-align:left;padding:.55rem .7rem;border-bottom:2px solid var(--filet-fort);z-index:1}
.cd-texte tbody th{font-family:var(--titre);font-weight:700;text-align:left;letter-spacing:.03em}
.cd-texte td,.cd-texte tbody th{padding:.5rem .7rem;border-bottom:1px solid var(--filet);
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.9rem}
.cd-texte tbody th{font-family:var(--titre);font-size:.95rem}
.cd-texte tbody tr:nth-child(even){background:var(--surf)}
.cd-texte tbody tr:last-child td,.cd-texte tbody tr:last-child th{border-bottom:0}
.cd-texte table caption{caption-side:bottom;font-size:.78rem;color:var(--doux);padding-top:.5rem;text-align:left}

/* ---------- 9. LA FAMILLE (categorie) ------------------------------------- */
.cd-rub{padding-block:1.4rem var(--pas)}
.cd-rub-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:1.4rem;
  flex-wrap:wrap;border-top:2px solid var(--accent);padding-top:1rem;margin-bottom:1.6rem}
.cd-rub-compte{display:flex;align-items:baseline;gap:.55rem;margin:0;font-size:.86rem;
  color:var(--doux);text-transform:uppercase;letter-spacing:.09em;font-family:var(--titre);font-weight:700}
.cd-pagination{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--filet);
  display:flex;justify-content:center}
.cd-pagination .page-numbers{display:inline-block;font-family:var(--mono);font-size:.9rem;
  padding:.4rem .7rem;border:1px solid var(--filet);border-radius:var(--rayon);margin:0 .2rem}
.cd-pagination .page-numbers.current{background:var(--accent);border-color:var(--accent);color:var(--accent-sur);font-weight:700}
.cd-pagination a.page-numbers:hover{border-color:var(--accent);text-decoration:none}
.cd-rappel-calc{margin-top:var(--pas);border-top:1px solid var(--filet);padding-top:1.4rem}
.cd-rappel-liste{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.cd-rappel-liste a{display:inline-block;border:1px solid var(--filet-fort);border-radius:var(--rayon);
  padding:.45rem .85rem;font-family:var(--titre);font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;font-size:.9rem;color:var(--accent2-txt)}
.cd-rappel-liste a:hover{border-color:var(--accent);text-decoration:none}

/* ---------- 10. LE PIED --------------------------------------------------- */
.cd-pied{background:var(--surf);border-top:2px solid var(--accent);margin-top:var(--pas)}
.cd-pied-tete{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  flex-wrap:wrap;padding-block:1.4rem;border-bottom:1px solid var(--filet-fort)}
.cd-pied-marque{display:flex;align-items:center;gap:.8rem;margin:0}
.cd-mono-svg--pied{width:34px;height:34px}
.cd-pied-marque .cd-marque-nom{font-size:1.35rem}
.cd-pied-marque > span:last-child{display:flex;flex-direction:column;line-height:1}
.cd-pied-compte{margin:0;font-size:.86rem;color:var(--doux);text-transform:uppercase;letter-spacing:.09em}
.cd-pied-compte .cd-num{color:var(--accent-txt);font-weight:700;font-size:1.05rem}
.cd-pied-grille{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:1.8rem;padding-block:1.8rem}
.cd-pied-titre{font-family:var(--titre);font-size:.78rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--encre);padding-bottom:.45rem;margin:0 0 .7rem;
  border-bottom:1px solid var(--filet-fort)}
.cd-pied-titre--espace{margin-top:1.3rem}
.cd-pied-liste li{padding:.3rem 0;font-size:.9rem;display:flex;gap:.6rem;align-items:baseline;
  justify-content:space-between}
.cd-pied-liste--deux{columns:2;column-gap:1.4rem}
.cd-pied-liste--deux li{break-inside:avoid}
.cd-pied-liste--fil li{flex-direction:column;gap:.1rem;align-items:flex-start;
  border-bottom:1px solid var(--filet);padding-block:.45rem}
.cd-pied-liste a{color:var(--encre)}
.cd-pied-liste a:hover{color:var(--accent-txt)}
.cd-pied-note{font-size:.78rem;color:var(--doux);margin:.7rem 0 0}
.cd-pied .search-form,.cd-pied form[role="search"]{display:flex;gap:.4rem}
.cd-pied input[type="search"],.cd-pied .search-field{flex:1 1 auto;min-width:0;padding:.5rem .65rem;
  border:1px solid var(--filet-fort);border-radius:var(--rayon);background:var(--fond);color:var(--encre);
  font:inherit;font-size:.88rem}
.cd-pied input[type="submit"],.cd-pied .search-submit{padding:.5rem .8rem;border:1.5px solid var(--accent);
  background:var(--accent);color:var(--accent-sur);border-radius:var(--rayon);font-family:var(--titre);
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.cd-ours{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-block:.9rem 1.1rem;border-top:1px solid var(--filet-fort);font-size:.79rem;color:var(--doux)}
.cd-bascule{font-family:var(--titre);font-size:.76rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:.4rem .8rem;border:1px solid var(--filet-fort);background:none;
  color:var(--encre);border-radius:var(--rayon);cursor:pointer}
.cd-bascule:hover{border-color:var(--accent);color:var(--accent-txt)}

/* signature d'auteur produite par jr_signature — remise au registre du carnet */
.sb-signature{display:flex;gap:1rem;align-items:flex-start}
.sb-signature img{width:60px;height:60px;border-radius:var(--rayon)}
.sb-signature-nom{font-family:var(--titre);font-weight:700;font-size:1.05rem;text-transform:uppercase;letter-spacing:.05em}
.sb-signature-bio{font-size:.88rem;color:var(--doux);margin-top:.25rem;line-height:1.45}
.sb-date{font-family:var(--mono);font-size:.75rem;color:var(--doux);margin-top:.4rem}

/* ---------- 11. BARRE MOBILE BASSE ---------------------------------------- */
.sb-nav-mobile{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--fond);border-top:1px solid var(--filet-fort);
  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-family:var(--titre);font-size:.66rem;font-weight:700;
  letter-spacing:.08em;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}

/* ---------- 12. REPLIS (jamais un debordement lateral) -------------------- */
@media (max-width:1080px){
  .cd-une{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .cd-calc-boite{position:static;max-height:none;overflow:visible}
  .cd-outil{border-top:0;padding-top:0;margin-top:0}
  .cd-calc-boite{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;align-items:start}
  .cd-sect-tete--rail{grid-column:1 / -1;margin-bottom:.2rem}
  .cd-grille--quatre{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cd-tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cd-pied-grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
  .cd-art-corps{grid-template-columns:minmax(0,1fr)}
  .cd-somm{position:static;max-width:100%}
  .cd-pan-in{grid-template-columns:1fr 1fr 1fr;gap:1.2rem}
  .cd-pan-col--liste{grid-column:span 1}
  .cd-pan-liste{columns:1}
}
@media (max-width:900px){
  .cd-rail{display:none}
  .cd-burger{display:block}
  .cd-tete-in{justify-content:space-between;gap:.8rem}
  .cd-tete-fin .cd-bouton--contour{display:none}
}
@media (max-width:760px){
  body{padding-bottom:64px}
  .sb-nav-mobile{display:flex}
  .cd-tete{position:static}
  html{scroll-padding-top:16px}
  .cd-une{padding-block:1.2rem 2rem}
  .cd-duo,.cd-grille--trois,.cd-grille--quatre,.cd-tuiles{grid-template-columns:minmax(0,1fr)}
  .cd-calc-boite{grid-template-columns:minmax(0,1fr);gap:0}
  .cd-outil{border-top:1px solid var(--filet-fort);padding-top:.95rem;margin-top:.95rem}
  .cd-outil:first-of-type{border-top:0;padding-top:0;margin-top:0}
  .cd-chiffre{grid-template-columns:minmax(0,1fr);gap:1.1rem}
  .cd-bref-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cd-liste-fil,.cd-pied-liste--deux{columns:1}
  .cd-pied-grille{grid-template-columns:minmax(0,1fr);gap:1.3rem}
  .cd-marque-base{display:none}
  .cd-texte thead th{position:static}
}
@media (max-width:480px){
  body{font-size:16px}
  .cd-large{width:min(1280px,100% - 1.5rem)}
  .cd-champs--deux{grid-template-columns:minmax(0,1fr)}
  .cd-bref-grille{grid-template-columns:minmax(0,1fr)}
  .cd-bandeau li{min-width:0;flex:1 1 33%}
  .cd-marque-nom{font-size:1.25rem}
  .cd-art-chapo{font-size:1.05rem}
  .cd-tuiles{gap:0}
  .cd-tuile{border-bottom:1px solid var(--filet)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
@media print{
  .cd-tete,.sb-nav-mobile,.cd-rail-calc,.cd-bascule,.cd-somm{display:none!important}
  .cd-une{grid-template-columns:1fr}
}

/* 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}