/*
Theme Name: WebDegree
Theme URI: https://onlinewebdesigndegree.com
Description: Portage salarial pour les métiers du web. Un bureau d'expert-comptable
  qui aurait le goût d'un beau magazine économique. Code pur, zéro plugin, zéro
  constructeur de page — voir DIRECTION-ARTISTIQUE.md.
Author: Seobooster LTD
Version: 1.0.0
*/

/* ==========================================================================
   0. POLICES — self-hosted (P-086). Les fichiers .woff2 doivent être déposés
   dans assets/fonts/ (voir assets/fonts/fonts.css) ; repli système en attendant.
   ========================================================================== */
@font-face{
  font-family:'Young Serif';font-style:normal;font-weight:400;font-display:swap;
  src:local('Young Serif'), url('assets/fonts/young-serif-400.woff2') format('woff2');
}
@font-face{
  font-family:'Wix Madefor Text';font-style:normal;font-weight:400;font-display:swap;
  src:local('Wix Madefor Text'), url('assets/fonts/wix-madefor-text-400.woff2') format('woff2');
}
@font-face{
  font-family:'Wix Madefor Text';font-style:normal;font-weight:500;font-display:swap;
  src:local('Wix Madefor Text Medium'), url('assets/fonts/wix-madefor-text-500.woff2') format('woff2');
}
@font-face{
  font-family:'Wix Madefor Text';font-style:normal;font-weight:600;font-display:swap;
  src:local('Wix Madefor Text SemiBold'), url('assets/fonts/wix-madefor-text-600.woff2') format('woff2');
}
@font-face{
  font-family:'Wix Madefor Text';font-style:normal;font-weight:700;font-display:swap;
  src:local('Wix Madefor Text Bold'), url('assets/fonts/wix-madefor-text-700.woff2') format('woff2');
}

/* ==========================================================================
   1. JETONS — palette DIRECTION-ARTISTIQUE.md §5. Un fond neutre + un accent
   (P-116). Aucun gris pur, aucun #FFFFFF/#000000.
   ========================================================================== */
:root{
  --papier:#FAF6EE; --nuit:#132534; --brume:#E6DFD2; --laiton:#C08A2E;
  --net:#1C6B5B; --retenue:#A8452B;
  --nuit-carte:#1C3346; --papier-carte:#FFFDF8;
  --filet:#DEDACB; --filet-nuit:#2A465C;
  --encre:#132534; --encre-douce:color-mix(in srgb, #132534 78%, transparent);

  --titre:'Young Serif', Georgia, 'Times New Roman', serif;
  --texte:'Wix Madefor Text', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  --rayon:6px;
  --ombre:0 8px 28px rgba(19,37,52,.10);
  --conteneur:1240px;
  --gouttiere:32px;
  --transition-segment:380ms cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
:root[data-theme="dark"],
:root:not([data-theme="light"]){
  /* forcé en sombre par bascule ; le bloc prefers-color-scheme suit juste en dessous */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --net:#2E9683; --retenue:#D06A4C;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --net:#2E9683; --retenue:#D06A4C;
  color-scheme:dark;
}
/* Note P-351 : les bandes --nuit sont déjà sombres en thème clair (alternance
   de bandes, §8 de la DA) — la bascule Mathias ajuste les DEUX tokens
   sémantiques (--net/--retenue) pour qu'ils restent lisibles sur les fonds
   sombres, ce qui est le seul point de contraste que le mode sombre du
   navigateur/OS peut faire varier sur ce design à bandes fixes. */

/* ==========================================================================
   2. RESET / SOCLE VISUEL
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--encre);font-family:var(--texte);
  font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--laiton);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--titre);font-weight:400;margin:0;line-height:1.15}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer;background:none;border:0}
em,i{font-style:italic}
.wd-oeil{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.wd-oeil:focus{clip-path:none;margin:0;left:.5rem;top:.5rem;width:auto;height:auto;padding:.5rem .9rem;
  background:var(--nuit);color:var(--papier);z-index:99;border-radius:var(--rayon)}
[hidden]{display:none!important}
.sb-corps{overflow-wrap:anywhere}
.wd-num{font-variant-numeric:tabular-nums}

/* ==========================================================================
   3. TYPOGRAPHIE — échelle DIRECTION-ARTISTIQUE.md §6
   ========================================================================== */
.wd-h1{font-family:var(--titre);font-size:clamp(2.5rem,4.6vw,4.1rem);line-height:1.04;
  letter-spacing:-.015em;font-weight:400}
.wd-h1 em{font-style:italic;color:var(--laiton)}
.wd-h2{font-family:var(--titre);font-size:clamp(1.75rem,2.6vw,2.5rem);line-height:1.12;font-weight:400}
.wd-h3{font-family:var(--titre);font-size:1.32rem;font-weight:400;line-height:1.22}
.wd-chiffre{font-family:var(--titre);font-size:clamp(2.8rem,5vw,4.6rem);line-height:1;
  font-variant-numeric:tabular-nums;font-weight:400}
.wd-corps-txt{font-size:17px;line-height:1.68;max-width:70ch}
.wd-chapo{font-size:1.22rem;line-height:1.55;color:var(--encre-douce)}
.wd-surligne{display:flex;align-items:center;gap:.6rem;font-family:var(--texte);
  font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--laiton)}
.wd-surligne::before{content:"";width:40px;height:2px;background:var(--laiton);flex:0 0 auto}
.wd-legende{font-size:.82rem;color:color-mix(in srgb, var(--encre) 62%, transparent)}
.wd-montant{font-family:var(--titre);font-variant-numeric:tabular-nums}

/* ==========================================================================
   4. GRILLE / ENVELOPPE / BANDES ALTERNÉES (procédé n°5)
   ========================================================================== */
.wd-enveloppe{width:min(var(--conteneur),100% - var(--gouttiere)*2);margin-inline:auto}
.wd-bande{padding-block:88px}
.wd-bande--papier{background:var(--papier);color:var(--nuit)}
.wd-bande--brume{background:var(--brume);color:var(--nuit)}
.wd-bande--nuit{background:var(--nuit);color:var(--papier);padding-block:104px}
.wd-bande--laiton{background:var(--laiton);color:var(--nuit);padding-block:88px}
.wd-bande + .wd-bande{border-top:0} /* l'alternance de couleur suffit à séparer */
.wd-grille{display:grid;gap:var(--gouttiere)}
.wd-grille--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.wd-grille--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.wd-grille--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.wd-grille--6{grid-template-columns:repeat(3,minmax(0,1fr))}
.wd-tete-section{display:flex;justify-content:space-between;align-items:flex-end;
  gap:1.5rem;margin-bottom:2rem;flex-wrap:wrap}
.wd-tete-section .wd-h2{max-width:52ch}
.wd-voir-tout{font-size:.92rem;font-weight:600;color:var(--laiton);white-space:nowrap}
.wd-voir-tout:hover{text-decoration:underline}

/* ==========================================================================
   5. PHOTOS — traitement uniforme (§10) + repli honnête (jamais un aplat)
   ========================================================================== */
.wd-photo{position:relative;display:block;overflow:hidden;border-radius:var(--rayon);
  background:var(--brume)}
.wd-photo--32{aspect-ratio:3/2}
.wd-photo--169{aspect-ratio:16/9}
.wd-photo--11{aspect-ratio:1/1}
.wd-photo img,.wd-photo-img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.88) sepia(.045) contrast(.98);
  transition:transform .3s ease}
.wd-photo-manquante{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.4rem;width:100%;height:100%;min-height:120px;color:color-mix(in srgb, var(--encre) 45%, transparent);
  border:1.5px dashed color-mix(in srgb, var(--encre) 28%, transparent);border-radius:var(--rayon);
  background:color-mix(in srgb, var(--brume) 60%, transparent)}
.wd-photo-manquante small{font-size:.72rem;font-weight:600;letter-spacing:.04em}
.wd-bande--nuit .wd-photo-manquante{color:color-mix(in srgb, var(--papier) 55%, transparent);
  border-color:color-mix(in srgb, var(--papier) 30%, transparent);background:color-mix(in srgb, var(--nuit-carte) 80%, transparent)}

/* ==========================================================================
   6. EN-TÊTE — bande 1, collante, 5 entrées jamais deux lignes
   ========================================================================== */
.wd-tete{position:sticky;top:0;z-index:60;background:color-mix(in srgb, var(--papier) 94%, transparent);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--filet);transition:padding .2s ease}
.wd-tete-in{width:min(var(--conteneur),100% - var(--gouttiere)*2);margin-inline:auto;
  display:flex;align-items:center;gap:1.6rem;min-height:84px}
.wd-tete.is-tassee .wd-tete-in{min-height:60px}
.wd-logo{display:flex;align-items:center;gap:12px}
.wd-logo:hover{text-decoration:none}
.wd-logo-trait{width:34px;height:34px;flex:0 0 auto;color:var(--nuit)}
.wd-logo-mot{font-family:var(--titre);font-size:1.5rem;letter-spacing:-.01em;color:var(--nuit);
  text-transform:lowercase}
.wd-nav{display:flex;align-items:center;gap:1.7rem;margin-left:1rem}
.wd-nav a{font-family:var(--texte);font-size:.95rem;font-weight:500;color:var(--nuit);white-space:nowrap}
.wd-nav a:hover{color:var(--laiton)}
.wd-tete-actions{margin-left:auto;display:flex;align-items:center;gap:.9rem}
.wd-burger{display:none;width:44px;height:44px;border:1px solid var(--filet);border-radius:var(--rayon);
  align-items:center;justify-content:center}
.wd-burger span{display:block;width:20px;height:1.6px;background:var(--nuit);position:relative}
.wd-burger span::before,.wd-burger span::after{content:"";position:absolute;left:0;width:20px;height:1.6px;background:var(--nuit)}
.wd-burger span::before{top:-6px}.wd-burger span::after{top:6px}

.wd-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--texte);font-weight:700;font-size:.92rem;padding:.75rem 1.3rem;
  border-radius:var(--rayon);white-space:nowrap}
.wd-cta--laiton{background:var(--laiton);color:var(--nuit)}
.wd-cta--laiton:hover{background:color-mix(in srgb, var(--laiton) 88%, black)}
.wd-cta--filaire{border:1.5px solid currentColor}
.wd-cta--filaire:hover{background:color-mix(in srgb, currentColor 10%, transparent)}

.wd-panneau-mobile{display:none;position:fixed;inset:0;z-index:80;background:var(--nuit);color:var(--papier);
  padding:1.6rem var(--gouttiere);overflow-y:auto}
.wd-panneau-mobile.is-ouvert{display:block}
.wd-panneau-tete{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}
.wd-panneau-fermer{width:44px;height:44px;border:1px solid var(--filet-nuit);border-radius:var(--rayon);
  color:var(--papier);display:flex;align-items:center;justify-content:center}
.wd-panneau-liens{display:flex;flex-direction:column;gap:1.4rem}
.wd-panneau-liens a{font-family:var(--titre);font-size:1.6rem}
.wd-panneau-mobile .wd-cta{margin-top:2rem;width:100%}

/* ==========================================================================
   7. HÉROS — bande 2 (procédé n°9 : mots d'argent en italique)
   ========================================================================== */
.wd-heros{position:relative;background:var(--nuit);color:var(--papier);overflow:hidden}
.wd-heros-photo{position:absolute;inset:0;z-index:0}
.wd-heros-photo img,.wd-heros-photo .wd-photo-manquante{width:100%;height:100%;object-fit:cover;
  filter:saturate(.8) sepia(.05) brightness(.75)}
.wd-heros-voile{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(19,37,52,.60) 0%, rgba(19,37,52,.78) 100%)}
.wd-heros-in{position:relative;z-index:2;width:min(var(--conteneur),100% - var(--gouttiere)*2);
  margin-inline:auto;display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;
  padding-block:72px}
.wd-heros-texte{padding-inline:24px;padding-block:24px}
.wd-heros .wd-h1{margin-top:1rem}
.wd-heros-chapo{margin-top:1.1rem;font-size:1.15rem;line-height:1.55;max-width:44ch;
  color:color-mix(in srgb, var(--papier) 88%, transparent)}
.wd-pastille{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.4rem;
  background:color-mix(in srgb, var(--nuit) 55%, transparent);border:1px solid var(--laiton);
  color:var(--papier);padding:.45rem .9rem;border-radius:99px;font-size:.82rem;font-weight:600}
.wd-pastille::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--laiton)}

/* ---- Carte simulateur (procédé n°1) ---- */
.wd-simulateur{background:var(--papier);color:var(--nuit);border-radius:var(--rayon);
  box-shadow:var(--ombre);padding:1.8rem 1.8rem 2rem}
.wd-simulateur-t{font-family:var(--titre);font-size:1.32rem}
.wd-simulateur-sous{font-size:.88rem;color:var(--encre-douce);margin-top:.3rem}
.wd-curseur{margin-top:1.4rem}
.wd-curseur-tete{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem}
.wd-curseur-label{font-size:.85rem;font-weight:600}
.wd-curseur-valeur{font-family:var(--titre);font-size:1.1rem;font-variant-numeric:tabular-nums;color:var(--laiton)}
.wd-curseur input[type="range"]{width:100%;appearance:none;height:4px;border-radius:99px;
  background:var(--brume);outline:none}
.wd-curseur input[type="range"]::-webkit-slider-thumb{appearance:none;width:20px;height:20px;
  border-radius:50%;background:var(--laiton);border:3px solid var(--papier);box-shadow:0 0 0 1px var(--laiton);cursor:grab}
.wd-curseur input[type="range"]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;
  background:var(--laiton);border:3px solid var(--papier);box-shadow:0 0 0 1px var(--laiton);cursor:grab}

/* la barre de paie (procédé n°1) */
.wd-barre{margin-top:1.8rem}
.wd-barre-piste{display:flex;height:54px;border-radius:var(--rayon);overflow:hidden;
  border:1px solid var(--filet)}
.wd-barre-segment{position:relative;height:100%;display:flex;align-items:center;justify-content:center;
  transition:width var(--transition-segment);min-width:2%}
.wd-barre-segment--gestion{background:var(--retenue)}
.wd-barre-segment--disponible{background:repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--net) 55%, var(--brume)) 0 10px,
    color-mix(in srgb, var(--net) 40%, var(--brume)) 10px 20px)}
.wd-barre-appel{position:absolute;top:-2.1rem;left:50%;transform:translateX(-50%);
  white-space:nowrap;text-align:center}
.wd-barre-appel::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:8px;background:var(--filet)}
.wd-barre-montant{display:block;font-family:var(--titre);font-size:1rem;color:var(--nuit)}
.wd-barre-libelle{display:block;font-size:.68rem;color:var(--encre-douce)}
.wd-barre-legende{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:1.6rem}
.wd-barre-legende li{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--encre-douce)}
.wd-barre-puce{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.wd-barre-puce--gestion{background:var(--retenue)}
.wd-barre-puce--disponible{background:repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--net) 55%, var(--brume)) 0 4px, color-mix(in srgb, var(--net) 40%, var(--brume)) 4px 8px)}

.wd-gestion-curseur{display:flex;align-items:center;gap:.6rem;margin-top:1.4rem}
.wd-gestion-curseur label{font-size:.82rem;font-weight:600;white-space:nowrap}

/* jauge micro-entreprise (comparaison honnête, sans taux de cotisation) */
.wd-plafond{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--filet)}
.wd-plafond-piste{height:8px;border-radius:99px;background:var(--brume);overflow:hidden;margin-top:.5rem}
.wd-plafond-remplissage{height:100%;background:var(--laiton);border-radius:99px;transition:width var(--transition-segment)}
.wd-plafond-txt{font-size:.8rem;color:var(--encre-douce);margin-top:.4rem}

/* ==========================================================================
   8. NOTE EN MARGE — procédé n°6, 2 max par page
   ========================================================================== */
.wd-note{border-left:3px solid var(--laiton);background:var(--papier-carte);
  padding:1.1rem 1.3rem;border-radius:0 var(--rayon) var(--rayon) 0;margin-block:1.8rem}
.wd-bande--nuit .wd-note{background:var(--nuit-carte)}
.wd-note-t{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--laiton)}
.wd-note p{font-style:italic;font-size:.95rem;line-height:1.55;margin-top:.5rem;color:var(--encre-douce)}
.wd-bande--nuit .wd-note p{color:color-mix(in srgb, var(--papier) 82%, transparent)}

/* ==========================================================================
   9. ORIENTATION — bande 3, trois tuiles-photo
   ========================================================================== */
.wd-orientation{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gouttiere)}
.wd-orientation-tuile{position:relative;border-radius:var(--rayon);overflow:hidden;aspect-ratio:4/3}
.wd-orientation-tuile .wd-photo{position:absolute;inset:0;border-radius:0}
.wd-orientation-voile{position:absolute;inset:0;background:linear-gradient(180deg, rgba(19,37,52,.15), rgba(19,37,52,.72));
  display:flex;align-items:flex-end;padding:1.3rem}
.wd-orientation-tuile h3{color:var(--papier);font-size:1.15rem;max-width:20ch}

/* ==========================================================================
   10. TUILE-MÉTIER / TUILE-VILLE — procédé n°4
   ========================================================================== */
.wd-tuiles-chiffre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gouttiere)}
.wd-tuile-chiffre{position:relative;border-radius:var(--rayon);overflow:hidden;aspect-ratio:4/5}
.wd-tuile-chiffre .wd-photo{position:absolute;inset:0;border-radius:0}
.wd-tuile-chiffre .wd-photo img,.wd-tuile-chiffre .wd-photo-img{filter:saturate(.75) sepia(.05) brightness(.62)}
.wd-tuile-voile{position:absolute;inset:0;background:rgba(19,37,52,.55);transition:background .2s ease}
.wd-tuile-chiffre:hover .wd-tuile-voile{background:rgba(19,37,52,.4)}
.wd-tuile-corps{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.4rem;transition:transform .2s ease}
.wd-tuile-chiffre:hover .wd-tuile-corps{transform:translateY(-4px)}
.wd-tuile-nom{color:var(--papier);font-family:var(--titre);font-size:1.4rem}
.wd-tuile-nombre{color:var(--laiton);margin-top:.3rem}
.wd-tuile-meta{color:color-mix(in srgb, var(--papier) 78%, transparent);font-size:.78rem;margin-top:.3rem}
.wd-tuile-attente{color:color-mix(in srgb, var(--papier) 70%, transparent);font-size:.85rem;
  font-style:italic;margin-top:.4rem}

/* ==========================================================================
   11. FICHE SOCIÉTÉ DATÉE — procédé n°3
   ========================================================================== */
.wd-fiches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gouttiere)}
.wd-fiche{position:relative;background:var(--nuit-carte);border-radius:var(--rayon);overflow:hidden;
  transition:transform .16s ease}
.wd-bande--papier .wd-fiche,.wd-bande--brume .wd-fiche{background:var(--papier-carte);
  border:1px solid var(--filet)}
.wd-fiche:hover{transform:translateY(-3px)}
.wd-fiche-photo{position:relative}
.wd-fiche-photo .wd-photo{border-radius:0}
.wd-ruban{position:absolute;top:.8rem;left:.8rem;z-index:2;font-size:.72rem;font-weight:700;
  padding:.3rem .6rem;border-radius:4px;color:var(--papier)}
.wd-ruban--verifiee{background:color-mix(in srgb, var(--nuit) 88%, transparent)}
.wd-ruban--absorbee{background:var(--retenue)}
.wd-ruban--non-verifiee{background:var(--brume);color:var(--nuit)}
.wd-fiche--desature .wd-photo img,.wd-fiche--desature .wd-photo-img{filter:saturate(.4) sepia(.05) contrast(.95)}
.wd-pastille-pourcent{position:absolute;bottom:-28px;right:.9rem;z-index:2;width:64px;height:64px;
  border-radius:50%;background:var(--laiton);color:var(--nuit);display:flex;align-items:center;
  justify-content:center;font-family:var(--titre);font-size:1rem;text-align:center;line-height:1.05;
  border:3px solid var(--papier-carte)}
.wd-fiche-corps{padding:2.2rem 1.2rem 1.3rem}
.wd-fiche-nom{font-family:var(--titre);font-size:1.2rem}
.wd-fiche-domaine{font-size:.78rem;color:color-mix(in srgb, currentColor 60%, transparent);margin-top:.15rem}
.wd-fiche-frais{font-size:.92rem;margin-top:.7rem;line-height:1.5}
.wd-fiche-label{margin-top:.6rem;font-size:.76rem;font-weight:600;color:var(--laiton)}
.wd-fiche-date{margin-top:.5rem}

/* ==========================================================================
   12. INFOGRAPHIES DU SOCLE — sbs_lieu / sbs_tarifs / sbs_frise / sbs_jauges
   habillées aux couleurs de CE site (le socle n'émet que du balisage neutre).
   ========================================================================== */
sbs-jauges,.sbs_jauges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gouttiere);margin-block:1.4rem}
.sbs_jauges_titre{display:block;grid-column:1/-1;font-family:var(--titre);font-size:1.15rem;margin-bottom:.4rem}
sbs-jauge,.sbs_jauge{display:flex;flex-direction:column;gap:.2rem;padding:1.2rem;
  border-radius:var(--rayon);background:var(--nuit-carte)}
.wd-bande--papier sbs-jauge,.wd-bande--papier .sbs_jauge,
.wd-bande--brume sbs-jauge,.wd-bande--brume .sbs_jauge{background:var(--papier-carte);border:1px solid var(--filet)}
.sbs_jauge_libelle{font-size:.82rem;color:color-mix(in srgb, currentColor 65%, transparent);order:2}
.sbs_jauge_valeur{font-family:var(--titre);font-size:clamp(2rem,3.4vw,2.8rem);color:var(--laiton);
  font-variant-numeric:tabular-nums;order:1}
/* --laiton sur fond clair est proche du seuil de contraste AA (mesuré ~3:1
   sur --papier-carte) : on le fonce pour les grands chiffres posés sur les
   bandes papier/brume, jamais sur nuit où le laiton nu est déjà lisible. */
.wd-bande--papier .sbs_jauge_valeur,.wd-bande--brume .sbs_jauge_valeur,
.wd-bande--papier .wd-chiffre,.wd-bande--brume .wd-chiffre{
  color:color-mix(in srgb, var(--laiton) 78%, black)}
/* Même correction pour la surligne (petit corps, 12.5px) quand elle tombe sur
   un fond clair (Contact, 404) au lieu d'une bande --nuit : à cette taille le
   seuil AA est 4.5:1, que le laiton nu n'atteint pas sur --papier. */
.wd-contact .wd-surligne,.wd-404 .wd-surligne{
  color:color-mix(in srgb, var(--laiton) 65%, black)}
.wd-contact .wd-surligne::before,.wd-404 .wd-surligne::before{
  background:color-mix(in srgb, var(--laiton) 65%, black)}
.sbs_jauge_unite{font-size:.78rem;order:3}
.sbs_source{display:block;grid-column:1/-1;font-size:.74rem;margin-top:.3rem;color:color-mix(in srgb, currentColor 55%, transparent)}

sbs-tarifs,.sbs_tarifs{display:block;margin-block:1.4rem}
.sbs_tarifs_titre{display:block;font-family:var(--titre);font-size:1.15rem;margin-bottom:.8rem}
sbs-tarif,.sbs_tarif{display:grid;grid-template-columns:minmax(0,1fr) 2fr;align-items:center;gap:1rem;
  padding-block:.55rem;border-bottom:1px solid var(--filet)}
.wd-bande--nuit sbs-tarif,.wd-bande--nuit .sbs_tarif{border-bottom-color:var(--filet-nuit)}
.sbs_tarif_libelle{font-size:.9rem}
.sbs_tarif_barre{width:100%;height:22px;accent-color:var(--laiton)}
.sbs_tarifs_notes{display:block;font-size:.8rem;margin-top:.6rem;color:color-mix(in srgb, currentColor 60%, transparent)}

sbs-frise,.sbs_frise{display:flex;flex-direction:column;gap:0;margin-block:1.4rem;
  border-left:2px solid var(--laiton);padding-left:1.4rem}
.sbs_frise_titre{display:block;font-family:var(--titre);font-size:1.15rem;margin-bottom:1rem;margin-left:-1.4rem;padding-left:0;border:0}
sbs-etape,.sbs_etape{position:relative;display:block;padding-bottom:1.5rem}
sbs-etape::before,.sbs_etape::before{content:"";position:absolute;left:-1.55rem;top:.2rem;width:10px;height:10px;
  border-radius:50%;background:var(--laiton);border:2px solid var(--papier)}
.wd-bande--nuit sbs-etape::before,.wd-bande--nuit .sbs_etape::before{border-color:var(--nuit)}
.sbs_etape_date{display:block;font-family:var(--titre);font-size:1rem;color:var(--laiton)}
.sbs_etape_titre{display:block;font-size:.98rem;font-weight:600;margin-top:.15rem}
.sbs_etape_desc{display:block;font-size:.85rem;color:color-mix(in srgb, currentColor 65%, transparent);margin-top:.2rem}

sbs-lieu,.sbs_lieu{display:block;padding:1.2rem;border-radius:var(--rayon);background:var(--nuit-carte);margin-block:1rem}
.wd-bande--papier sbs-lieu,.wd-bande--papier .sbs_lieu,
.wd-bande--brume sbs-lieu,.wd-bande--brume .sbs_lieu{background:var(--papier-carte);border:1px solid var(--filet)}
.sbs_lieu_nom{display:block;font-family:var(--titre);font-size:1.05rem}
.sbs_lieu_adresse{display:block;font-style:normal;font-size:.85rem;margin-top:.3rem}
.sbs_lieu_acces{display:block;font-size:.8rem;margin-top:.2rem;color:color-mix(in srgb, currentColor 60%, transparent)}
.sbs_lieu_carte{display:inline-flex;align-items:center;gap:.35rem;margin-top:.5rem;font-size:.8rem;font-weight:600;color:var(--laiton)}
.sbs_icone_repere{fill:currentColor}

/* ==========================================================================
   13. LE CHEMIN — bande 8, procédé n°7 (variante pleine largeur, horizontale)
   ========================================================================== */
.wd-chemin{display:flex;gap:0;position:relative}
.wd-chemin::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:var(--filet-nuit)}
.wd-chemin-jalon{flex:1;position:relative;padding-top:2rem;padding-inline:.6rem}
.wd-chemin-jalon::before{content:"";position:absolute;left:.6rem;top:0;width:16px;height:16px;border-radius:50%;
  background:var(--nuit);border:2px solid var(--laiton)}
.wd-chemin-delai{font-family:var(--titre);color:var(--laiton);font-size:1.05rem;display:block}
.wd-chemin-libelle{font-size:.85rem;color:color-mix(in srgb, var(--papier) 82%, transparent);margin-top:.3rem;display:block}

/* ==========================================================================
   14. ACTUALITÉ — bande 9
   ========================================================================== */
.wd-actu{display:grid;grid-template-columns:1.3fr 1fr;gap:2.6rem}
.wd-actu-vedette .wd-photo{margin-bottom:1rem}
.wd-actu-vedette h3{font-size:1.6rem}
.wd-breves{display:flex;flex-direction:column}
.wd-breve{display:flex;gap:.9rem;padding-block:.9rem;border-bottom:1px solid var(--filet)}
.wd-breve:last-child{border-bottom:0}
.wd-breve-heure{font-family:var(--titre);color:var(--laiton);font-size:.92rem;white-space:nowrap}
.wd-breve h4{font-size:.98rem;font-weight:600;font-family:var(--texte)}

/* ==========================================================================
   15. BUSINESS — bande 10
   ========================================================================== */
.wd-business-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gouttiere)}
.wd-carte{position:relative}
.wd-carte-sponso{position:absolute;top:.7rem;left:.7rem;z-index:2;font-size:.7rem;font-weight:700;
  padding:.25rem .55rem;border-radius:4px;background:var(--nuit);color:var(--papier)}
.wd-carte h3{margin-top:.8rem;font-size:1.1rem}
.wd-carte .wd-chapo,.wd-carte p.wd-chapo{font-size:.92rem;margin-top:.4rem}

/* ==========================================================================
   16. BANDE DE CAPTURE — laiton plein, l'unique
   ========================================================================== */
.wd-capture{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
.wd-capture .wd-h2{max-width:26ch}
.wd-capture-form{display:flex;gap:.7rem;flex-wrap:wrap}
.wd-capture-form input[type="email"]{font:inherit;font-size:.95rem;padding:.85rem 1.1rem;
  border:1.5px solid var(--nuit);border-radius:var(--rayon);min-width:260px;background:var(--papier-carte)}
.wd-capture-form button{background:var(--nuit);color:var(--papier);font-weight:700;padding:.85rem 1.4rem;
  border-radius:var(--rayon)}
.wd-capture-form button:hover{background:color-mix(in srgb, var(--nuit) 85%, black)}

/* ==========================================================================
   17. PIED DE PAGE — bande 12, 5 colonnes
   ========================================================================== */
.wd-pied{background:var(--nuit);color:var(--papier);border-top:2px solid var(--laiton);padding-block:3.2rem 1.6rem}
.wd-pied-grille{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:2rem}
.wd-pied-marque{display:flex;flex-direction:column;gap:.7rem}
.wd-pied-marque .wd-logo-mot,.wd-pied-marque .wd-logo-trait{color:var(--papier)}
.wd-pied-base{font-size:.85rem;color:color-mix(in srgb, var(--papier) 75%, transparent)}
.wd-pied-t{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--laiton);margin-bottom:.8rem}
.wd-pied-liste li{padding-block:.32rem;font-size:.86rem;color:color-mix(in srgb, var(--papier) 88%, transparent)}
.wd-pied-liste a:hover{color:var(--laiton)}
.wd-neutralite{grid-column:1/-1;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--filet-nuit);
  font-size:.86rem;font-style:italic;color:color-mix(in srgb, var(--papier) 82%, transparent);max-width:80ch}
.wd-pied-ours{grid-column:1/-1;margin-top:1.2rem;display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:1rem;font-size:.78rem;color:color-mix(in srgb, var(--papier) 62%, transparent)}
.wd-bascule{border:1px solid var(--filet-nuit);border-radius:var(--rayon);padding:.4rem .8rem;
  font-size:.78rem;color:var(--papier)}

/* ==========================================================================
   18. ARTICLE (single.php)
   ========================================================================== */
.wd-art-tete{background:var(--nuit);color:var(--papier);padding-block:3rem 2.2rem}
.wd-fil{font-size:.78rem;color:color-mix(in srgb, var(--papier) 65%, transparent);display:flex;gap:.4rem;flex-wrap:wrap}
.wd-fil a:hover{color:var(--laiton)}
.wd-art-titre{margin-top:1rem;font-size:clamp(2rem,3.6vw,3rem)}
.wd-art-chapo{margin-top:.9rem;font-size:1.1rem;max-width:66ch;color:color-mix(in srgb, var(--papier) 85%, transparent)}
.wd-art-meta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.2rem;font-size:.82rem;
  color:color-mix(in srgb, var(--papier) 70%, transparent)}
.wd-art-sponso{display:inline-block;background:var(--laiton);color:var(--nuit);font-size:.72rem;
  font-weight:700;padding:.25rem .55rem;border-radius:4px;margin-top:.8rem}

.wd-art-une{width:min(var(--conteneur),100% - var(--gouttiere)*2);margin:-2.2rem auto 0;position:relative;z-index:2}
.wd-art-une .wd-photo{max-height:62vh}

.wd-art-corps{width:min(var(--conteneur),100% - var(--gouttiere)*2);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:3rem;padding-block:2.6rem 3.5rem;align-items:start}
.wd-art-texte{min-width:0;max-width:min(720px,100%)}
.wd-art-texte p{margin-bottom:1.15rem}
.wd-art-texte h2{font-size:1.7rem;margin:2.2rem 0 .8rem;scroll-margin-top:96px}
.wd-art-texte h3{font-size:1.28rem;margin:1.7rem 0 .6rem}
.wd-art-texte ul,.wd-art-texte ol{margin-bottom:1.15rem}
.wd-art-texte ul li{position:relative;padding-left:1.2rem;margin-bottom:.45rem}
.wd-art-texte ul li::before{content:"";position:absolute;left:0;top:.65em;width:7px;height:7px;
  border-radius:2px;background:var(--laiton)}
.wd-art-texte ol{list-style:decimal;padding-left:1.35rem}
.wd-art-texte ol li{margin-bottom:.45rem}
.wd-art-texte a{color:var(--laiton);text-decoration:underline;text-underline-offset:3px}
.wd-art-texte blockquote{border-left:3px solid var(--laiton);padding:.9rem 1.2rem;background:var(--papier-carte);
  margin:1.6rem 0;font-style:italic}
.wd-art-texte figure{margin:1.6rem 0}
.wd-art-texte figure img{border-radius:var(--rayon)}
.wd-art-texte figcaption{font-size:.8rem;color:var(--encre-douce);margin-top:.4rem}

/* le socle enveloppe déjà tout <table> dans .sbs_tableau (défilable) : ici on
   le style pour qu'il reste lisible et jamais un pavé (retour ×4) */
.sbs_tableau{overflow-x:auto;margin:1.6rem 0;border:1px solid var(--filet);border-radius:var(--rayon)}
.sbs_tableau table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:480px}
.sbs_tableau th,.sbs_tableau td{padding:.6rem .8rem;border-bottom:1px solid var(--filet);text-align:left;
  font-variant-numeric:tabular-nums}
.sbs_tableau th{font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:var(--encre-douce);
  border-bottom:2px solid var(--filet)}

.wd-sommaire{border:1px solid var(--filet);border-radius:var(--rayon);padding:1.2rem 1.3rem;margin-bottom:1.8rem}
.wd-sommaire-t{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--laiton)}
.wd-sommaire ol{counter-reset:wd-s;margin-top:.7rem}
.wd-sommaire li{counter-increment:wd-s;padding:.25rem 0;font-size:.88rem}
.wd-sommaire li::before{content:counter(wd-s)".";color:var(--laiton);font-weight:700;margin-right:.4rem}

.wd-signature{display:flex;gap:1rem;align-items:flex-start;border-top:1px solid var(--filet);
  padding-top:1.6rem;margin-top:2.2rem}
.wd-signature-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.wd-signature-nom{font-family:var(--titre);font-size:1.05rem;color:var(--nuit)}
.wd-signature-fonction{font-size:.8rem;color:var(--laiton);font-weight:600;margin-top:.1rem}
.wd-signature-bio{font-size:.88rem;color:var(--encre-douce);margin-top:.3rem;line-height:1.5}
.wd-date{font-size:.78rem;color:var(--encre-douce);margin-top:.4rem}

/* colonne latérale — jamais défilable en interne, sticky, pub en dernier */
.wd-cote{position:sticky;top:96px;display:flex;flex-direction:column;gap:1.6rem}
.wd-cote-bloc{border:1px solid var(--filet);border-radius:var(--rayon);padding:1.2rem}
.wd-cote-t{font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--encre-douce);margin-bottom:.7rem}
.wd-cote-liste li{padding-block:.4rem;border-bottom:1px solid var(--filet);font-size:.86rem}
.wd-cote-liste li:last-child{border-bottom:0}
.wd-cote-pub{margin-top:auto;border:1px dashed var(--filet);text-align:center;color:var(--encre-douce);
  font-size:.78rem;padding:1.4rem}

/* ==========================================================================
   19. ARCHIVE / CATÉGORIE
   ========================================================================== */
.wd-rub-tete{background:var(--nuit);color:var(--papier);padding-block:3rem}
.wd-rub-titre{margin-top:.8rem;font-size:clamp(1.9rem,3.4vw,2.7rem)}
.wd-rub-chapo{margin-top:.7rem;max-width:60ch;color:color-mix(in srgb, var(--papier) 85%, transparent)}
.wd-liste-articles{padding-block:3rem}
.wd-liste-articles .wd-grille{grid-template-columns:repeat(3,minmax(0,1fr))}
.wd-texte-rubrique{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--filet);max-width:74ch}
.wd-pagination{display:flex;gap:.4rem;margin-top:2.2rem;font-size:.88rem;font-weight:600}
.wd-pagination .page-numbers{padding:.5rem .9rem;border:1px solid var(--filet);border-radius:var(--rayon)}
.wd-pagination .current{background:var(--nuit);color:var(--papier);border-color:var(--nuit)}

/* ==========================================================================
   20. CARTE GÉNÉRIQUE (archives, "à la une")
   ========================================================================== */
.wd-carte-article{display:block}
.wd-carte-article .wd-photo{margin-bottom:.9rem}
.wd-carte-article h3{font-size:1.1rem;line-height:1.3}
.wd-carte-article .wd-chapo{font-size:.9rem;margin-top:.4rem}
.wd-carte-etiquette{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--laiton);margin-bottom:.4rem}

/* ==========================================================================
   21. PAGE, RECHERCHE, 404, AUTEUR
   ========================================================================== */
.wd-page-tete{background:var(--nuit);color:var(--papier);padding-block:3rem}
.wd-page-corps{width:min(820px,100% - var(--gouttiere)*2);margin-inline:auto;padding-block:2.6rem 3.5rem}
.wd-page-corps p{margin-bottom:1.1rem}
.wd-recherche-form{display:flex;gap:.6rem;max-width:480px}
.wd-recherche-form input[type="search"]{flex:1;font:inherit;padding:.8rem 1rem;border:1.5px solid var(--filet);
  border-radius:var(--rayon)}
.wd-recherche-form button{background:var(--nuit);color:var(--papier);padding:.8rem 1.3rem;border-radius:var(--rayon);font-weight:700}
.wd-404{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:1.2rem;padding-block:4rem}
.wd-auteur-tete{display:flex;gap:1.6rem;align-items:center;background:var(--nuit);color:var(--papier);padding-block:3rem}
.wd-auteur-tete img,.wd-auteur-tete .wd-photo-manquante{width:96px;height:96px;border-radius:50%;object-fit:cover}

/* ==========================================================================
   22. CONTACT — non scrollable, tout au-dessus de la ligne de flottaison
   ========================================================================== */
.wd-contact{min-height:calc(100dvh - 84px);display:flex;align-items:center}
.wd-contact-in{width:min(var(--conteneur),100% - var(--gouttiere)*2);margin-inline:auto;
  display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:center}
.wd-contact-form{display:flex;flex-direction:column;gap:.8rem}
.wd-contact-form label{font-size:.8rem;font-weight:600}
.wd-contact-form input,.wd-contact-form textarea{font:inherit;font-size:.92rem;padding:.7rem .85rem;
  border:1.5px solid var(--filet);border-radius:var(--rayon);width:100%}
.wd-contact-form textarea{resize:vertical;min-height:80px}
.wd-contact-form button{margin-top:.4rem}
.wd-piege{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;clip-path:inset(50%)!important;overflow:hidden!important}

/* ==========================================================================
   23. MENU MOBILE BASSE — navigation atteignable au pouce (facultatif)
   ========================================================================== */
.wd-bascule-filet{border-top:1px solid var(--filet)}

/* ==========================================================================
   24. RÉPLIS — 390 px et paliers intermédiaires (§9). Jamais de débordement
   horizontal : overflow-x:hidden n'est PAS la solution ici, chaque grille
   repasse en 1 colonne.
   ========================================================================== */
@media (max-width: 1180px){
  .wd-grille--3,.wd-grille--4,.wd-grille--6,.wd-fiches,.wd-tuiles-chiffre,
  .wd-orientation,.wd-business-grille,.wd-liste-articles .wd-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wd-heros-in{grid-template-columns:1fr}
  .wd-art-corps{grid-template-columns:minmax(0,1fr)}
  .wd-cote{position:static}
  .wd-pied-grille{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width: 1024px){
  .wd-nav{display:none}
  .wd-burger{display:flex}
  .wd-tete-actions .wd-cta{display:none}
}
@media (max-width: 860px){
  .wd-actu{grid-template-columns:1fr}
  .wd-contact-in{grid-template-columns:1fr}
  .wd-contact{min-height:auto;padding-block:2.5rem}
}
@media (max-width: 640px){
  :root{--gouttiere:24px;--conteneur:100%}
  .wd-bande--papier,.wd-bande--brume{padding-block:56px}
  .wd-bande--nuit,.wd-bande--laiton{padding-block:64px}
  .wd-grille--2,.wd-grille--3,.wd-grille--4,.wd-grille--6,.wd-fiches,.wd-tuiles-chiffre,
  .wd-orientation,.wd-business-grille,.wd-liste-articles .wd-grille,.wd-pied-grille{grid-template-columns:1fr}
  .wd-heros-in{padding-block:0}
  .wd-heros-photo{position:relative;height:240px}
  .wd-heros-texte{padding-inline:24px;padding-block:56px 48px}
  .wd-h1{font-size:2.45rem}
  .wd-simulateur{padding:1.4rem 1.2rem 1.6rem}
  .wd-barre-piste{flex-direction:column;height:320px}
  .wd-barre-segment{width:100%!important;justify-content:flex-start;padding-left:1rem}
  .wd-barre-appel{position:static;transform:none;text-align:left;margin-bottom:.3rem}
  .wd-barre-appel::after{display:none}
  .wd-chemin{flex-direction:column;gap:1.6rem}
  .wd-chemin::before{left:9px;top:0;bottom:0;right:auto;width:2px;height:auto}
  .wd-chemin-jalon{padding-top:0;padding-left:2rem}
  .wd-chemin-jalon::before{left:0;top:.2rem}
  .wd-art-une{margin-top:0}
  .wd-tete-in{padding-inline:0}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* --- Mobile : les jauges du socle ne tiennent pas sur 3 colonnes à 390px.
   Mesuré le 17/09/2026 : <data class="sbs_jauge_valeur"> rendait 129px de large
   dans une colonne de 58px, ce qui poussait le document à 417px et créait un
   défilement horizontal sur toute la page. Deux colonnes + chiffre plus sobre. --- */
@media (max-width:640px){
  sbs-jauges,.sbs_jauges{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sbs_jauge_valeur{font-size:clamp(1.35rem,6vw,1.9rem);overflow-wrap:anywhere;hyphens:none}
  sbs-jauge,.sbs_jauge{padding:.9rem;min-width:0}
}
@media (max-width:400px){
  sbs-jauges,.sbs_jauges{grid-template-columns:1fr}
  .sbs_jauge_valeur{font-size:1.6rem}
}
/* Rien ne doit jamais élargir le document au-delà de l'écran. */
html,body{max-width:100%;overflow-x:clip}

/* --- Barre de paie : un segment étroit ne peut pas porter son libellé.
   Mesuré le 17/09/2026 à 1440px : le segment « frais de gestion » fait 6 % de
   la barre ; son libellé « Frais de gestion » y était tronqué en « de g… » et
   celui du segment voisin se superposait au montant. Les libellés vivent
   désormais dans la légende sous la barre (elle existait déjà) ; le segment ne
   garde que son montant, et seulement s'il a la place. --- */
.wd-barre-segment{overflow:hidden;min-width:0}
.wd-barre-appel{display:flex;align-items:center;justify-content:center;height:100%;
  padding-inline:.35rem;overflow:hidden;text-align:center}
.wd-barre-libelle{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.wd-barre-montant{white-space:nowrap;font-size:.9rem;line-height:1}
@media (max-width:640px){.wd-barre-montant{font-size:.78rem}}
.wd-barre-legende{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin-top:.7rem;
  padding:0;list-style:none;font-size:.85rem}