/*
Theme Name: Coach Salim
Theme URI: https://coachsalim.com
Author: Coach Salim
Description: Thème sur mesure — coaching sportif seniors à domicile. Écrit de zéro pour ce site (P-407/P-116/P-117).
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: coach-salim
*/

/* ===========================================================================
   0. POLICES — self-hosted (P-086). Les binaires .woff2 sont attendus dans
   assets/fonts/ (voir assets/fonts/README.txt) : tant qu'ils n'y sont pas,
   la pile de repli prend le relais et la page reste lisible et proportionnée.
   - Unbounded  : titres, logotype — géométrique, dynamique, "le mouvement".
   - Readex Pro : texte courant — arrondi, chaleureux, très lisible (seniors).
   =========================================================================== */
/* Polices auto-hebergees (Google Fonts, licence OFL) — 08/09.
   Les deux familles sont livrees par Google en fichier VARIABLE : un seul woff2
   couvre toute la plage de graisses. Poser 7 fichiers (3 x 117 Ko d'Unbounded
   strictement identiques) ferait telecharger 480 Ko pour rien, sur un site dont
   le public lit en 4G sur un telephone. Un fichier par famille, plage 100-900. */
@font-face{
  font-family:"Unbounded";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("assets/fonts/unbounded-var.woff2") format("woff2");
}
@font-face{
  font-family:"Readex Pro";font-style:normal;font-weight:100 700;font-display:swap;
  src:url("assets/fonts/readexpro-var.woff2") format("woff2");
}

/* ===========================================================================
   1. RESET minimal
   =========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip}
*{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{height:auto}
body{min-height:100vh}
img,picture,svg,video{display:block;max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
table{border-collapse:collapse;width:100%}
:target{scroll-margin-top:6.5rem}

/* ===========================================================================
   2. JETONS DE DESIGN — clair par défaut, sombre système, sombre forcé.
   P-110 : trois états réels, toujours redéfinis par mode (jamais partagés).
   =========================================================================== */
:root{
  /* 08/09 RE-0061 — Mathias : « des couleurs qui ne vont pas ensemble » (orange saumon +
     crème + bleu nuit + vert). La palette est ramenée à TROIS valeurs : un fond, un texte,
     UN accent. Tout le reste en est dérivé (neutres chauds) ; plus aucune seconde couleur
     d'accent. --secondaire et --bg-alt survivent comme NOMS (22 usages dans la feuille)
     mais ne portent plus une teinte concurrente : ce sont des nuances de l'encre et du fond. */
  --bg:#FBF7F0;             /* fond : crème neutre, plus de pêche */
  --bg-alt:#F3EEE4;
  --carte:#FFFFFF;
  --ligne:#E3DCD0;
  --encre:#111C33;          /* texte : bleu nuit */
  --encre-doux:#41506F;
  --accent:#C2410C;         /* accent UNIQUE : orange brûlé. 08/09 : #DC4A14 ne donnait
                               que 4,17:1 avec du blanc (mesure chk_contraste_reel) — celui-ci
                               tient 5,2:1 sur blanc et 4,8:1 sur le fond crème. */
  --accent-encre:#FFFFFF;   /* texte posé SUR l'accent */
  --accent-hover:#9A3412;
  --accent-douce:#FBE7DE;   /* fond teinté très clair, badges/hover */
  --secondaire:#41506F;     /* = nuance d'encre, plus aucune couleur verte */
  --secondaire-douce:#EFEBE2;

  /* 🪤 RE-0061, défaut n°1 : le footer et le bloc formulaire étaient écrits
     « background:var(--encre); color:#EAE2D2 ». En mode sombre --encre devient crème :
     le fond passait crème et le texte restait crème — invisible. Ces quatre tokens-ci ne
     sont JAMAIS redéfinis, ni en sombre système ni en sombre choisi : une section
     volontairement foncée reste foncée dans les trois états du thème. */
  --inverse-bg:#0E1A33;
  --inverse-encre:#FBF7F0;
  --inverse-doux:#B9C3DA;
  --inverse-ligne:rgba(255,255,255,.14);
  /* accent LISIBLE sur les sections foncees : l'orange sombre du mode clair n'y fait
     que 4,1:1. Comme les autres tokens inverses, il ne bascule jamais. */
  --inverse-accent:#FF8A5C;
  --ombre:0 16px 36px -18px rgba(16,28,54,.32);
  --ombre-carte:0 10px 24px -16px rgba(16,28,54,.24);
  --radius-sm:10px;
  --radius:16px;
  --radius-lg:26px;
  --focus:0 0 0 3px var(--bg),0 0 0 6px var(--accent);

  --police-titre:"Unbounded","Arial Black",Arial,sans-serif;
  --police-corps:"Readex Pro",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;

  --taille-corps:1.15rem;        /* ~18-19px : lisibilité senior */
  --interligne-corps:1.75;
  --interligne-titre:1.15;

  color-scheme:light;
}

/* Sombre système : respecté quand l'utilisateur n'a rien choisi explicitement. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0C1428;
    --bg-alt:#141F3B;
    --carte:#17223E;
    --ligne:#2B3A61;
    --encre:#F4EFE6;
    --encre-doux:#BCC7E0;
    --accent:#FF7A45;
    --accent-encre:#0C1428;
    --accent-hover:#FF9666;
    --accent-douce:#33201A;
    --secondaire:#BCC7E0;
    --secondaire-douce:#1B2742;
    --ombre:0 20px 42px -18px rgba(0,0,0,.6);
    --ombre-carte:0 14px 30px -18px rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
/* Sombre choisi explicitement (bascule utilisateur, persistée en localStorage). */
:root[data-theme="dark"]{
  --bg:#0C1428;
  --bg-alt:#141F3B;
  --carte:#17223E;
  --ligne:#2B3A61;
  --encre:#F4EFE6;
  --encre-doux:#BCC7E0;
  --accent:#FF7A45;
  --accent-encre:#0C1428;
  --accent-hover:#FF9666;
  --accent-douce:#33201A;
  --secondaire:#BCC7E0;
  --secondaire-douce:#1B2742;
  --ombre:0 20px 42px -18px rgba(0,0,0,.6);
  --ombre-carte:0 14px 30px -18px rgba(0,0,0,.55);
  color-scheme:dark;
}

/* ===========================================================================
   3. BASE
   =========================================================================== */
body{
  /* 🪤 08/09 RE-0061 : mesure a 390 px = 335 px de debordement horizontal, la page partait
     en travers sur telephone. Coupable : le tiroir de navigation mobile, pousse hors champ
     par translateX(100%). Un `overflow-x` pose sur BODY ne le rattrape pas — un element
     `position:fixed` a pour bloc conteneur la fenetre, pas le body : la regle doit vivre sur
     la RACINE. `clip` et non `hidden` : `hidden` ferait de la racine un conteneur de
     defilement et casserait le position:sticky de l'en-tete. */
  overflow-x:clip;
  background:var(--bg);
  color:var(--encre);
  font-family:var(--police-corps);
  font-size:var(--taille-corps);
  line-height:var(--interligne-corps);
  transition:background-color .25s ease,color .25s ease;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}
html{scroll-behavior:smooth}

h1,h2,h3,h4{
  font-family:var(--police-titre);
  line-height:var(--interligne-titre);
  color:var(--encre);
  font-weight:700;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2.4rem,5vw + 1rem,4.4rem);font-weight:900}
h2{font-size:clamp(1.9rem,3vw + 1rem,2.75rem)}
h3{font-size:clamp(1.4rem,1.4vw + 1rem,1.75rem)}
h4{font-size:1.25rem}
p{max-width:68ch}
strong{font-weight:700}
a{transition:color .15s ease}

/* Cibles tactiles ≥ 48px, contours visibles et généreux pour un public senior. */
a,button,input,select,textarea,summary{min-height:0}
button,.csc-btn,input[type="submit"]{min-height:48px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

.visually-hidden{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* 🪤 08/09 : « top:-100% » ne suffit pas a sortir un element FIXE de l'ecran — selon la
   hauteur du bloc conteneur il reste peint, et il s'est retrouve pose EN TRAVERS du titre
   du hero sur la capture de controle. On le sort par la gauche, hors de toute mise en page,
   et il ne revient que quand il recoit le focus clavier. */
.csc-skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--encre);color:var(--bg);
  padding:.9rem 1.3rem;border-radius:var(--radius-sm);font-weight:600;
}
.csc-skip-link:focus{position:fixed;left:1rem;top:1rem}

.csc-container{width:100%;max-width:1200px;margin-inline:auto;padding-inline:1.25rem}
@media (min-width:960px){.csc-container{padding-inline:2.5rem}}

.csc-section{padding-block:clamp(3.5rem,6vw,6.5rem)}
.csc-section--alt{background:var(--bg-alt)}
.csc-section__head{max-width:46rem;margin-bottom:2.75rem}
.csc-section__head--center{margin-inline:auto;text-align:center}
.csc-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--police-titre);
  font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--secondaire);margin-bottom:.9rem;
}
.csc-eyebrow .icon{width:1rem;height:1rem;color:var(--accent)}
.csc-section__lead{color:var(--encre-doux);font-size:1.15rem;margin-top:.9rem}

/* ===========================================================================
   4. BOUTONS
   =========================================================================== */
.csc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.7rem;border-radius:999px;font-weight:700;font-size:1.05rem;
  font-family:var(--police-corps);line-height:1.1;border:2px solid transparent;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;
  white-space:nowrap;
}
.csc-btn:hover{transform:translateY(-2px)}
.csc-btn .icon{width:1.15rem;height:1.15rem;flex:none}
.csc-btn--accent{background:var(--accent);color:var(--accent-encre);box-shadow:var(--ombre-carte)}
.csc-btn--accent:hover{background:var(--accent-hover)}
.csc-btn--outline{border-color:var(--encre);color:var(--encre)}
.csc-btn--outline:hover{background:var(--encre);color:var(--bg)}
.csc-btn--ghost{color:var(--encre);padding-inline:0}
.csc-btn--ghost:hover{color:var(--accent)}
.csc-btn--lg{padding:1.2rem 2.2rem;font-size:1.15rem}
.csc-btn--block{width:100%}

/* ===========================================================================
   5. EN-TÊTE / NAVIGATION
   =========================================================================== */
.csc-header{
  position:sticky;top:0;z-index:100;background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--ligne);
}
.csc-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:.9rem;
}
.csc-header__logo{display:flex;align-items:center;gap:.65rem;flex:none}
.csc-logo-mark{width:2.6rem;height:2.6rem;flex:none}
.csc-logo-mark .tige{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round}
.csc-logo-mark .silhouette{fill:var(--encre)}
.csc-logo-text{font-family:var(--police-titre);font-weight:700;font-size:1.35rem;color:var(--encre);letter-spacing:-.01em}

/* 08/09 RE-0061 — « en-tête sur 3 lignes, désaligné ». Cause : sept entrées à libellé
   long dans une liste en flex-wrap:wrap. Le nombre d'entrées est réglé côté PHP (cinq au
   plus, libellés courts) ; ici on interdit le retour à la ligne et on aligne tout sur la
   même ligne de base — si ça ne tient plus, c'est le menu burger qui prend le relais,
   jamais un en-tête qui se déplie. */
.csc-nav{display:flex;align-items:center;gap:1.25rem;min-width:0}
.csc-nav__list{display:flex;align-items:center;gap:1.35rem;flex-wrap:nowrap;min-width:0}
.csc-nav__list a{
  font-weight:600;font-size:1rem;padding:.4rem .1rem;position:relative;white-space:nowrap;
}
.csc-nav__list a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:3px;border-radius:3px;
  background:var(--accent);transition:right .2s ease;
}
.csc-nav__list a:hover::after,.csc-nav__list a:focus-visible::after{right:0}

.csc-nav__cta{display:none}
.csc-header__tools{display:flex;align-items:center;gap:.6rem}
.csc-theme-toggle,.csc-nav-toggle{
  width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--bg-alt);color:var(--encre);flex:none;
}
.csc-theme-toggle:hover,.csc-nav-toggle:hover{background:var(--accent-douce);color:var(--accent)}
.csc-theme-toggle .icon,.csc-nav-toggle .icon{width:1.35rem;height:1.35rem}
.csc-theme-toggle .icon-moon{display:none}
[data-theme="dark"] .csc-theme-toggle .icon-sun{display:none}
[data-theme="dark"] .csc-theme-toggle .icon-moon{display:block}
.csc-nav-toggle{display:none}
.csc-nav-toggle .icon-close{display:none}
html.csc-nav-open .csc-nav-toggle .icon-menu{display:none}
html.csc-nav-open .csc-nav-toggle .icon-close{display:block}
.csc-header__cta{display:inline-flex}

@media (max-width:1080px){
  .csc-header__cta{display:none}
  .csc-nav-toggle{display:inline-flex}
  .csc-nav{
    /* 08/09 : `display:none` et pas seulement `visibility:hidden`. Un tiroir simplement
       invisible reste dans la boite du body : body.scrollWidth restait a 725 px pour un
       ecran de 390, et toute capture pleine page rendait une image large de 725 px — une
       page qui a l'air de deborder alors qu'elle ne deborde pas. On enleve la piece du
       plateau tant qu'elle ne sert pas ; l'animation d'ouverture reste sur l'opacite. */
    display:none;
    position:fixed;inset:0 0 0 auto;width:min(22rem,86vw);height:100vh;
    background:var(--carte);border-left:1px solid var(--ligne);flex-direction:column;
    align-items:stretch;padding:6.5rem 1.75rem 2rem;transform:translateX(100%);
    transition:transform .28s ease;overflow-y:auto;box-shadow:var(--ombre);
  }
  html.csc-nav-open .csc-nav{display:flex;transform:translateX(0);animation:cscNavIn .22s ease}
  @keyframes cscNavIn{from{opacity:0;transform:translateX(12%)}to{opacity:1;transform:translateX(0)}}
  html.csc-nav-open{overflow:hidden}
  .csc-nav__list{flex-direction:column;align-items:flex-start;gap:.25rem;width:100%;flex-wrap:wrap}
  .csc-nav__list a{display:block;width:100%;padding:.9rem 0;font-size:1.2rem;border-bottom:1px solid var(--ligne)}
  .csc-nav__cta{display:block;margin-top:1.5rem;width:100%}
  .csc-nav__cta .csc-btn{width:100%}
}

/* ===========================================================================
   6. HERO (accueil + pages ville)
   =========================================================================== */
.csc-hero{position:relative;overflow:hidden;padding-block:clamp(3.5rem,8vw,7rem)}
.csc-hero__bg{position:absolute;inset:0;z-index:0;background:
    radial-gradient(60rem 40rem at 85% -10%,var(--accent-douce),transparent 60%),
    radial-gradient(50rem 30rem at -10% 110%,var(--secondaire-douce),transparent 60%);
}
.csc-hero__motif{position:absolute;inset:0;z-index:0;opacity:.5;color:var(--ligne);pointer-events:none}
.csc-hero__grid{position:relative;z-index:1;display:grid;gap:2.5rem;align-items:center}
@media (min-width:960px){.csc-hero__grid{grid-template-columns:1.1fr .9fr}}
.csc-hero__eyebrow{color:var(--accent)}
.csc-hero__title{margin-bottom:1.1rem}
.csc-hero__title em{
  font-style:normal;color:var(--accent);
  background:linear-gradient(transparent 62%,var(--accent-douce) 0);
}
.csc-hero__lead{font-size:1.25rem;color:var(--encre-doux);max-width:38rem;margin-bottom:2rem}
.csc-hero__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.75rem}
.csc-hero__note{display:flex;align-items:center;gap:.6rem;color:var(--encre-doux);font-size:1rem}
.csc-hero__note .icon{width:1.2rem;height:1.2rem;color:var(--secondaire);flex:none}

.csc-hero__media{position:relative}
.csc-hero__frame{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;
  background:linear-gradient(155deg,var(--inverse-bg),#1F2E52 60%,var(--accent) 190%);
  box-shadow:var(--ombre);isolation:isolate;
}
.csc-hero__frame img{width:100%;height:100%;object-fit:cover}
.csc-hero__frame .csc-hero__placeholder{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:rgba(255,247,236,.35);
}
.csc-hero__frame .csc-hero__placeholder svg{width:45%;height:45%}
.csc-hero__badge{
  position:absolute;left:-1rem;bottom:1.5rem;background:var(--carte);color:var(--encre);
  border-radius:var(--radius);padding:1rem 1.3rem;box-shadow:var(--ombre-carte);
  display:flex;align-items:center;gap:.9rem;max-width:15rem;
}
@media (max-width:520px){.csc-hero__badge{left:.5rem}}
.csc-hero__badge .icon{width:2.2rem;height:2.2rem;color:var(--accent);flex:none}
.csc-hero__badge strong{display:block;font-family:var(--police-titre);font-size:1.5rem}
.csc-hero__badge span{display:block;font-size:.9rem;color:var(--encre-doux)}

/* ===========================================================================
   7. RUBRIQUES (grille des 6 piliers)
   =========================================================================== */
.csc-grid{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media (min-width:640px){.csc-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.csc-grid--3{grid-template-columns:repeat(3,1fr)}}

.csc-rubrique-card{
  display:flex;flex-direction:column;gap:1rem;background:var(--carte);border:1px solid var(--ligne);
  border-radius:var(--radius);padding:1.9rem;box-shadow:var(--ombre-carte);
  transition:transform .2s ease,box-shadow .2s ease;height:100%;
}
.csc-rubrique-card:hover{transform:translateY(-4px);box-shadow:var(--ombre)}
.csc-rubrique-card__icon{
  width:3.2rem;height:3.2rem;border-radius:14px;background:var(--accent-douce);color:var(--accent);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.csc-rubrique-card__icon .icon{width:1.7rem;height:1.7rem}
.csc-rubrique-card__title{margin-bottom:.1rem}
.csc-rubrique-card__text{color:var(--encre-doux);flex:1}
.csc-rubrique-card__link{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--secondaire)}
.csc-rubrique-card__link .icon{width:1.1rem;height:1.1rem;transition:transform .15s ease}
.csc-rubrique-card:hover .csc-rubrique-card__link .icon{transform:translateX(4px)}

/* ===========================================================================
   8. ÉTAPES ("comment ça se passe")
   =========================================================================== */
.csc-steps__list{
  display:grid;gap:2rem;grid-template-columns:1fr;counter-reset:step;position:relative;
}
@media (min-width:800px){
  .csc-steps__list{grid-template-columns:repeat(3,1fr)}
  .csc-steps__list::before{
    content:"";position:absolute;top:1.9rem;left:16.6%;right:16.6%;height:3px;
    background:repeating-linear-gradient(90deg,var(--ligne) 0 10px,transparent 10px 20px);
  }
}
.csc-step{position:relative;text-align:left;background:var(--carte);border:1px solid var(--ligne);border-radius:var(--radius);padding:1.9rem}
.csc-step__num{
  width:3.2rem;height:3.2rem;border-radius:50%;background:var(--encre);color:var(--bg);
  display:flex;align-items:center;justify-content:center;font-family:var(--police-titre);
  font-weight:700;font-size:1.3rem;margin-bottom:1rem;position:relative;z-index:1;
}
.csc-step:nth-child(2) .csc-step__num{background:var(--accent);color:var(--accent-encre)}
.csc-step:nth-child(3) .csc-step__num{background:var(--secondaire);color:var(--bg)}
.csc-step__text{color:var(--encre-doux)}

/* ===========================================================================
   9. RÉASSURANCE
   =========================================================================== */
.csc-reassurance__grid{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media (min-width:700px){.csc-reassurance__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.csc-reassurance__grid{grid-template-columns:repeat(4,1fr)}}
.csc-reassurance__item{display:flex;gap:1rem;align-items:flex-start;padding:1.4rem;border-radius:var(--radius);background:var(--carte);border:1px solid var(--ligne)}
.csc-reassurance__icon{width:2.8rem;height:2.8rem;border-radius:10px;background:var(--secondaire-douce);color:var(--secondaire);display:flex;align-items:center;justify-content:center;flex:none}
.csc-reassurance__icon .icon{width:1.5rem;height:1.5rem}
.csc-reassurance h3{font-size:1.1rem;margin-bottom:.3rem}
.csc-reassurance p{color:var(--encre-doux);font-size:1.02rem}

/* ===========================================================================
   10. ZONE D'INTERVENTION / COMPTEUR (donnée réelle, calculée — jamais inventée)
   =========================================================================== */
.csc-stat{display:inline-flex;flex-direction:column;align-items:flex-start}
.csc-stat__num{font-family:var(--police-titre);font-weight:900;font-size:clamp(2.2rem,4vw,3.2rem);color:var(--accent);line-height:1}
.csc-stat__label{color:var(--encre-doux);font-weight:600}
.csc-villes__grid{display:flex;flex-wrap:wrap;gap:.75rem}
.csc-villes__chip{
  display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.2rem;border-radius:999px;
  background:var(--carte);border:1px solid var(--ligne);font-weight:600;
}
.csc-villes__chip:hover{border-color:var(--accent);color:var(--accent)}
.csc-villes__chip .icon{width:1.05rem;height:1.05rem;color:var(--secondaire)}

/* ===========================================================================
   11. FORMULAIRE DE PRISE DE CONTACT (money-block, répété en gabarit)
   =========================================================================== */
/* 08/09 : sur fond fonce, tout ce qui est "accent" prend la version claire de l'accent. */
.csc-lead .csc-eyebrow,.csc-footer .csc-eyebrow,
.csc-lead .csc-eyebrow .icon,.csc-footer .csc-eyebrow .icon,
.csc-lead a:hover,.csc-footer a:hover{color:var(--inverse-accent)}
.csc-lead .csc-logo-mark .tige,.csc-footer .csc-logo-mark .tige{stroke:var(--inverse-accent)}
.csc-lead{background:var(--inverse-bg);color:var(--inverse-encre);border-radius:var(--radius-lg);position:relative;overflow:hidden}
.csc-lead__inner{position:relative;z-index:1;display:grid;gap:2.5rem;padding:clamp(2rem,4vw,3.5rem)}
@media (min-width:900px){.csc-lead__inner{grid-template-columns:.85fr 1.15fr}}
.csc-lead__intro .csc-eyebrow{color:var(--inverse-accent)}   /* 08/09 : fond fonce en permanence */
.csc-lead__intro h2{color:var(--inverse-encre)}
.csc-lead__intro p{color:var(--inverse-doux)}
.csc-lead__points{margin-top:1.5rem;display:flex;flex-direction:column;gap:.8rem}
.csc-lead__points li{display:flex;gap:.7rem;align-items:flex-start}
.csc-lead__points .icon{width:1.3rem;height:1.3rem;color:var(--accent);flex:none;margin-top:.15rem}

.csc-form{background:var(--carte);color:var(--encre);border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.25rem)}
.csc-form__grid{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media (min-width:560px){.csc-form__grid--2{grid-template-columns:1fr 1fr}}
.csc-form__group{display:flex;flex-direction:column;gap:.45rem}
.csc-label{font-weight:700;font-size:1rem}
.csc-hint{font-size:.9rem;color:var(--encre-doux);font-weight:500}
.csc-input,.csc-form select,.csc-form textarea{
  width:100%;min-height:52px;padding:.85rem 1.05rem;border-radius:var(--radius-sm);
  border:2px solid var(--ligne);background:var(--bg);color:var(--encre);font-size:1.05rem;
}
.csc-form textarea{min-height:9rem;resize:vertical}
.csc-input:focus,.csc-form select:focus,.csc-form textarea:focus{border-color:var(--accent)}
.csc-form__radios{display:flex;gap:1rem;flex-wrap:wrap}
.csc-radio{
  display:flex;align-items:center;gap:.55rem;border:2px solid var(--ligne);border-radius:999px;
  padding:.7rem 1.2rem;font-weight:600;cursor:pointer;min-height:48px;
}
.csc-radio input{width:1.15rem;height:1.15rem;accent-color:var(--accent)}
.csc-radio:has(input:checked){border-color:var(--accent);background:var(--accent-douce)}
.csc-form__hp{position:absolute !important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.csc-form__submit{margin-top:.4rem}
.csc-form__legal{font-size:.9rem;color:var(--encre-doux);margin-top:.75rem}
.csc-form__delai{
  display:flex;align-items:center;gap:.55rem;margin-top:1rem;padding:.85rem 1.1rem;
  border-radius:var(--radius-sm);background:var(--secondaire-douce);color:var(--secondaire);font-weight:600;
}
.csc-form__delai .icon{width:1.2rem;height:1.2rem;flex:none}
.csc-form__success,.csc-form__error{
  border-radius:var(--radius-sm);padding:1rem 1.2rem;font-weight:600;margin-bottom:1.2rem;
}
.csc-form__success{background:var(--secondaire-douce);color:var(--secondaire)}
.csc-form__error{background:var(--accent-douce);color:var(--accent-hover)}

/* ===========================================================================
   12. CARTES ARTICLE / GRILLES (archive, hub, recherche)
   =========================================================================== */
.csc-card{
  display:flex;flex-direction:column;background:var(--carte);border:1px solid var(--ligne);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--ombre-carte);height:100%;
  transition:transform .2s ease,box-shadow .2s ease;
}
.csc-card:hover{transform:translateY(-4px);box-shadow:var(--ombre)}
.csc-card__media{aspect-ratio:16/10;background:linear-gradient(155deg,var(--encre),var(--secondaire));position:relative;overflow:hidden}
.csc-card__media img{width:100%;height:100%;object-fit:cover}
.csc-card__cat{
  position:absolute;top:.9rem;left:.9rem;background:var(--carte);color:var(--secondaire);
  font-weight:700;font-size:.82rem;padding:.35rem .8rem;border-radius:999px;
}
.csc-card__body{padding:1.4rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.csc-card__meta{font-size:.9rem;color:var(--encre-doux);display:flex;gap:.6rem;align-items:center}
.csc-card__title{font-size:1.25rem}
.csc-card__title a::after{content:"";position:absolute;inset:0}
.csc-card{position:relative}
.csc-card__excerpt{color:var(--encre-doux);flex:1}

.csc-pagination{display:flex;justify-content:center;gap:.6rem;margin-top:3rem;flex-wrap:wrap}
.csc-pagination a,.csc-pagination span{
  min-width:48px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;border:2px solid var(--ligne);font-weight:700;padding-inline:.5rem;
}
.csc-pagination .current{background:var(--encre);color:var(--bg);border-color:var(--encre)}
.csc-pagination a:hover{border-color:var(--accent);color:var(--accent)}

/* ===========================================================================
   13. ARTICLE SIMPLE
   =========================================================================== */
.csc-breadcrumbs{display:flex;flex-wrap:wrap;gap:.4rem;color:var(--encre-doux);font-size:.95rem;margin-bottom:1.4rem}
.csc-breadcrumbs a:hover{color:var(--accent)}
.csc-article__head{max-width:52rem}
.csc-article__meta{display:flex;flex-wrap:wrap;gap:1.1rem;color:var(--encre-doux);margin:1rem 0 1.6rem;font-size:1rem}
.csc-article__meta span{display:inline-flex;align-items:center;gap:.45rem}
.csc-article__meta .icon{width:1.15rem;height:1.15rem;color:var(--secondaire)}
.csc-article__hero{
  border-radius:var(--radius-lg);overflow:hidden;max-height:520px;margin-bottom:2.5rem;
  box-shadow:var(--ombre-carte);
}
.csc-article__hero img{width:100%;height:100%;max-height:520px;object-fit:cover}

.csc-article__content{max-width:52rem;font-size:var(--taille-corps);line-height:var(--interligne-corps)}
.csc-article__content > * + *{margin-top:1.4rem}
.csc-article__content h2{margin-top:2.6rem}
.csc-article__content h3{margin-top:2rem}
.csc-article__content ul,.csc-article__content ol{padding-left:1.4rem;list-style:disc}
.csc-article__content ol{list-style:decimal}
.csc-article__content li + li{margin-top:.5rem}
.csc-article__content blockquote{
  border-left:5px solid var(--accent);padding:.4rem 0 .4rem 1.5rem;font-size:1.2rem;
  color:var(--encre-doux);font-style:italic;
}
.csc-article__content a{color:var(--secondaire);text-decoration:underline;text-underline-offset:.2em;font-weight:600}
.csc-article__content img{border-radius:var(--radius);margin-block:.5rem}
.sbs_tableau{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-sm);border:1px solid var(--ligne);margin-block:1.4rem}
.sbs_tableau table{min-width:34rem}
.sbs_tableau th,.sbs_tableau td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--ligne)}
.sbs_tableau thead th{background:var(--bg-alt);font-family:var(--police-titre);font-size:.95rem}
.sbs_tableau tr:last-child td{border-bottom:0}

.csc-author-badge{
  display:flex;gap:1.1rem;align-items:center;margin-top:3rem;padding:1.5rem;border-radius:var(--radius);
  background:var(--bg-alt);border:1px solid var(--ligne);max-width:52rem;
}
.csc-author-badge__ecusson{
  width:4rem;height:4rem;border-radius:50%;background:var(--encre);color:var(--accent);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.csc-author-badge__ecusson .icon{width:2rem;height:2rem}
.csc-author-badge strong{display:block;font-family:var(--police-titre)}
.csc-author-badge p{color:var(--encre-doux);margin-top:.2rem;font-size:1rem}

.csc-article__cta{max-width:52rem;margin-top:3rem}
.csc-article__nav{display:flex;justify-content:space-between;gap:1rem;max-width:52rem;margin-top:3rem;flex-wrap:wrap}
.csc-article__nav a{font-weight:700;display:inline-flex;align-items:center;gap:.5rem;color:var(--secondaire)}

/* ===========================================================================
   14. PAGE HUB (rubrique) — la grille montre TOUS les articles avant l'intro
   =========================================================================== */
.csc-hub__intro{max-width:52rem;margin-top:3rem;padding-top:2.5rem;border-top:1px solid var(--ligne)}
.csc-hub__intro p{color:var(--encre-doux)}

/* ===========================================================================
   15. RECHERCHE / 404
   =========================================================================== */
.csc-search-form{display:flex;gap:.75rem;max-width:34rem}
.csc-search-form input{flex:1}
.csc-404{text-align:center;padding-block:5rem}
.csc-404 .icon{width:5rem;height:5rem;color:var(--accent);margin-inline:auto;margin-bottom:1.5rem}

/* ===========================================================================
   16. PIED DE PAGE
   =========================================================================== */
.csc-footer{background:var(--inverse-bg);color:var(--inverse-encre);margin-top:5rem}
.csc-footer a{color:var(--inverse-encre)}
.csc-footer a:hover{color:var(--inverse-accent)}
.csc-footer__top{padding-block:4rem;display:grid;gap:2.5rem;grid-template-columns:1fr}
@media (min-width:800px){.csc-footer__top{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.csc-footer__brand{display:flex;align-items:center;gap:.65rem;margin-bottom:1rem}
.csc-footer__brand .csc-logo-mark .silhouette{fill:var(--inverse-encre)}
.csc-footer__brand .csc-logo-text{color:var(--inverse-encre)}
.csc-footer__baseline{color:var(--inverse-doux);max-width:26rem}
.csc-footer__title{font-family:var(--police-titre);font-size:1.05rem;margin-bottom:1.1rem;color:var(--inverse-encre)}
.csc-footer__list{display:flex;flex-direction:column;gap:.7rem}
.csc-footer__list a{font-weight:600}
.csc-footer__socials{display:flex;gap:.7rem;margin-top:1.4rem}
.csc-social-link{
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
}
.csc-social-link:hover{background:var(--accent);color:var(--accent-encre)}
.csc-social-link .icon{width:1.2rem;height:1.2rem}
.csc-footer__bottom{
  border-top:1px solid rgba(255,255,255,.12);padding-block:1.5rem;display:flex;flex-wrap:wrap;
  gap:1rem;justify-content:space-between;color:var(--inverse-doux);font-size:.95rem;
}
.csc-footer__bottom .csc-footer__legal{display:flex;gap:1.3rem;flex-wrap:wrap}

/* ===========================================================================
   17. MICRO-ANIMATIONS SOBRES — respectent prefers-reduced-motion (règle §1)
   =========================================================================== */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
[data-reveal].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}
.csc-hero__scroll-cue{
  display:inline-flex;align-items:center;gap:.5rem;color:var(--encre-doux);font-size:.95rem;
  animation:csc-float 2.4s ease-in-out infinite;
}
@keyframes csc-float{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.csc-hero__scroll-cue{animation:none}}

/* ===========================================================================
   18. UTILITAIRES ICônes
   =========================================================================== */
.icon{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon--fill{fill:currentColor;stroke:none}