/* ═══════════════════════════════════════════════════════════════
   bw-core.css — socle partagé (accessibilité · mode sombre · réglages)
   100% côté client. Aucune palette de page ici (chaque page a la sienne).
   ═══════════════════════════════════════════════════════════════ */

/* ── Largeur de lecture : SOURCE UNIQUE ─────────────────────────────────
   Chaque page déclarait la sienne — 1080, 1100, 1200 ou 1280 px — si bien
   que passer de aide.html à outil-dettes.html faisait rentrer le contenu
   de 200 px d'un coup. Six largeurs pour un seul et même gabarit.

   Ce fichier est chargé APRÈS le <style> de chaque page : les déclarations
   ci-dessous remplacent donc les leurs sans toucher aux 15 fichiers. Pour
   changer la largeur du site entier, il n'y a plus qu'une valeur à modifier.

   Trois paliers, et trois seulement. Une page qui ne rentre dans aucun n'a
   pas besoin d'une quatrième valeur : elle a besoin d'être rangée dans l'un
   des trois.

   Deux exceptions assumées :
   · impact.html redéclare --maxw APRÈS ce fichier pour rester en pleine
     largeur (bandeaux, frise, cartes) ;
   · 404.html garde sa colonne de 520 px — une page d'erreur n'a qu'une
     phrase à dire. */
:root{
  --bw-max:1280px;         /* pages de contenu : grilles, tableaux, articles */
  --bw-max-focus:960px;    /* parcours guidé — assez large pour 3 colonnes    */
  --bw-max-texte:760px;    /* texte long ou message unique, centré           */
  --max:var(--bw-max); --maxw:var(--bw-max);
}

/* ── Taille du texte : zoom de contenu (fiable même sur les pages en px) ── */
html.bw-ts1{zoom:1.08}
html.bw-ts2{zoom:1.16}

/* ── Réduction des animations : système OU choix utilisateur ── */
@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.bw-motion-off *,html.bw-motion-off *::before,html.bw-motion-off *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}

/* ── Focus clavier visible partout ── */
:focus-visible{outline:2.5px solid var(--bw-focus,#2E90D9);outline-offset:2px;border-radius:3px}

/* ── color-scheme (contrôles natifs, barres de défilement) ── */
:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}

/* ── Cluster de contrôles injecté dans l'en-tête ── */
.bw-ctrls{display:inline-flex;align-items:center;gap:2px;flex:none}
.bw-ctrl{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:0;background:transparent;color:currentColor;cursor:pointer;border-radius:10px;opacity:.82;transition:opacity .15s,background .15s;padding:0;flex:none}
/* repli progressif : ce qu'on cache reste accessible dans Réglages */
@media(max-width:1500px){.bw-ctrl{width:31px;height:36px}.bw-ctrls{gap:0}}
@media(max-width:1440px){body[data-mission="env"] .bw-ctrl-dark,body[data-mission="env"] .bw-ctrl-saves{display:none}}
@media(max-width:1200px){.bw-ctrl-dark{display:none}}
@media(max-width:700px){.bw-print{display:none}}
.bw-ctrl:hover{opacity:1;background:rgba(128,128,128,.16)}
.bw-ctrl svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* pages sans en-tête (ex. 404) : cluster fixé en haut à gauche */
body > .bw-ctrls{position:fixed;top:14px;left:14px;z-index:200;background:rgba(128,128,128,.10);border-radius:12px;padding:2px}

/* ── Panneau Réglages (glisse depuis la droite) ── */
.bw-panel-bd{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:opacity .2s;z-index:99998}
.bw-panel-bd.open{opacity:1;visibility:visible}
.bw-panel{position:fixed;top:0;right:0;height:100%;width:min(360px,90vw);background:var(--bw-panel-bg,#fff);color:var(--bw-panel-fg,#16161A);box-shadow:-14px 0 44px rgba(0,0,0,.22);transform:translateX(100%);transition:transform .25s ease;z-index:99999;display:flex;flex-direction:column;overflow-y:auto;font-family:'Inter',system-ui,sans-serif}
.bw-panel.open{transform:none}
:root[data-theme="dark"] .bw-panel{--bw-panel-bg:#1c1d22;--bw-panel-fg:#ECEBE6}
.bw-panel h2{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:20px;font-weight:800;margin:0}
.bw-panel-hd{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid rgba(128,128,128,.18)}
.bw-panel-x{width:36px;height:36px;border:0;background:transparent;color:inherit;cursor:pointer;border-radius:9px;display:grid;place-items:center}
.bw-panel-x:hover{background:rgba(128,128,128,.16)}
.bw-panel-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.bw-sec{padding:20px 22px;border-bottom:1px solid rgba(128,128,128,.14)}
.bw-sec:last-child{border-bottom:0}
.bw-sec h3{font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:800;opacity:.6;margin:0 0 12px}
.bw-seg{display:flex;gap:6px;background:rgba(128,128,128,.14);border-radius:12px;padding:4px}
.bw-seg button{flex:1;border:0;background:transparent;color:inherit;font:inherit;font-weight:700;font-size:13.5px;padding:9px 6px;border-radius:9px;cursor:pointer;opacity:.65;line-height:1}
.bw-seg button.on{background:var(--bw-panel-bg,#fff);opacity:1;box-shadow:0 1px 4px rgba(0,0,0,.14)}
:root[data-theme="dark"] .bw-seg button.on{background:#2c2d34}
.bw-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;font-size:14.5px}
.bw-toggle{position:relative;width:46px;height:26px;border-radius:99px;background:rgba(128,128,128,.4);border:0;cursor:pointer;transition:background .18s;flex:none}
.bw-toggle::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .18s}
.bw-toggle.on{background:#17A65A}
.bw-toggle.on::after{transform:translateX(20px)}
.bw-btn{display:flex;align-items:center;gap:8px;width:100%;justify-content:center;padding:12px;border-radius:12px;border:1.5px solid rgba(128,128,128,.32);background:transparent;color:inherit;font:inherit;font-weight:700;font-size:14px;cursor:pointer;margin-top:10px}
.bw-btn:hover{border-color:currentColor}
.bw-btn-danger{color:#d0304f;border-color:rgba(208,48,79,.42)}
:root[data-theme="dark"] .bw-btn-danger{color:#ff8098}
.bw-note{font-size:12.5px;opacity:.62;line-height:1.55;margin:0 0 4px}

/* ── Toast discret ── */
.bw-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:#16161A;color:#fff;font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:14px;padding:11px 20px;border-radius:99px;box-shadow:0 8px 30px rgba(0,0,0,.32);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:100000}
.bw-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
:root[data-theme="dark"] .bw-toast{background:#2c2d34}

/* ── Boutons signet / copier (sur les fiches) ── */
.bw-actions{display:inline-flex;gap:2px;align-items:center;vertical-align:middle}
.bw-bm,.bw-copy{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:0;background:transparent;color:currentColor;cursor:pointer;border-radius:9px;opacity:.62;transition:opacity .15s,background .15s,color .15s;padding:0;flex:none}
.bw-bm:hover,.bw-copy:hover{opacity:1;background:rgba(128,128,128,.16)}
.bw-bm svg,.bw-copy svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bw-bm.on{opacity:1;color:#17A65A}
.bw-bm.on svg{fill:#17A65A;stroke:#17A65A}

/* ── Recherche globale ── */
.bw-search-bd{position:fixed;inset:0;background:rgba(8,10,12,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .18s;z-index:100002}
.bw-search-bd.open{opacity:1;visibility:visible}
.bw-search{position:fixed;top:min(13vh,120px);left:50%;transform:translateX(-50%) scale(.985);width:min(640px,94vw);background:var(--bw-panel-bg,#fff);color:var(--bw-panel-fg,#1b1d22);border:1px solid rgba(128,128,128,.22);border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.4);z-index:100003;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s;font-family:'Inter',system-ui,sans-serif;overflow:hidden}
.bw-search.open{opacity:1;visibility:visible;transform:translateX(-50%) scale(1)}
:root[data-theme="dark"] .bw-search{--bw-panel-bg:#1b1c21;--bw-panel-fg:#ECEBE6;border-color:rgba(255,255,255,.12)}
.bw-search-box{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid rgba(128,128,128,.16)}
.bw-search-ic{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;opacity:.55}
.bw-search-in{flex:1;border:0;outline:0;background:transparent;color:inherit;font:inherit;font-size:17px;font-weight:500;min-width:0}
.bw-search-in::placeholder{opacity:.42}
.bw-search-in:focus-visible{outline:none}
.bw-search-x{flex:none;border:1px solid rgba(128,128,128,.3);background:rgba(128,128,128,.08);color:inherit;opacity:.65;font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.04em;border-radius:6px;padding:4px 8px;cursor:pointer}
.bw-search-x:hover{opacity:1}
.bw-sr{max-height:min(56vh,460px);overflow-y:auto;padding:10px;scrollbar-width:thin}
.bw-sr-g{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;opacity:.5;padding:14px 12px 7px}
.bw-sr-g svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bw-sr-item{display:flex;align-items:baseline;gap:12px;padding:11px 14px;border-radius:11px;text-decoration:none;color:inherit;border:1px solid transparent}
.bw-sr-item:hover{background:rgba(128,128,128,.1)}
.bw-sr-item.sel{background:rgba(23,137,230,.1);border-color:rgba(23,137,230,.35)}
:root[data-theme="dark"] .bw-sr-item.sel{background:rgba(108,184,242,.12);border-color:rgba(108,184,242,.3)}
.bw-sr-t{font-weight:600;font-size:14.5px;line-height:1.4;flex:1;min-width:0}
.bw-sr-s{font-size:12px;opacity:.5;flex:none;max-width:36%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bw-sr-hint{padding:26px 16px;font-size:14px;opacity:.6;line-height:1.7;text-align:center}
.bw-sr-foot{display:flex;gap:18px;justify-content:center;padding:10px;border-top:1px solid rgba(128,128,128,.14);font-size:11.5px;opacity:.55}
.bw-sr-foot span{display:inline-flex;align-items:center;gap:5px}
.bw-search kbd{font-family:inherit;font-size:10.5px;font-weight:700;border:1px solid rgba(128,128,128,.35);border-bottom-width:2px;border-radius:5px;padding:1.5px 5px;background:rgba(128,128,128,.08)}

/* ── Icône « Mes affaires » + compteur ── */
.bw-ctrl-saves{position:relative;text-decoration:none}
.bw-saves-n{position:absolute;top:3px;right:2px;min-width:15px;height:15px;padding:0 3px;border-radius:99px;background:#17A65A;color:#fff;font-size:9.5px;font-weight:800;line-height:15px;text-align:center;font-family:'Inter',system-ui,sans-serif}

/* ── Pastille « Nouveau » ── */
.bw-new{display:inline-block;vertical-align:middle;margin-left:8px;font-family:'Inter',system-ui,sans-serif;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#0C4F30;background:#8FD19A;padding:2.5px 8px;border-radius:99px;line-height:1.2}
:root[data-theme="dark"] .bw-new{background:#1d5c33;color:#b9edc6}

/* ── Lecture : barre de progression + temps estimé + reprise ── */
.bw-readbar{position:fixed;top:0;left:0;height:3px;width:0%;z-index:100001;transition:width .12s linear;border-radius:0 2px 2px 0}
.bw-readtime{font-size:14px;opacity:.68;margin:10px 0 0;font-family:'Inter',system-ui,sans-serif}
.bw-resume{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:15px 20px;margin:0 0 22px;border:1.5px solid rgba(128,128,128,.28);border-radius:14px;text-decoration:none;color:inherit;font-family:'Inter',system-ui,sans-serif;transition:border-color .15s,background .15s}
.bw-resume:hover{border-color:currentColor;background:rgba(128,128,128,.06)}
.bw-resume-k{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.6;flex:none}
.bw-resume strong{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:15.5px;font-weight:700;flex:1;min-width:180px}
.bw-resume-pct{font-size:13px;font-weight:700;opacity:.65;flex:none}
.bw-resume-arr{flex:none;font-weight:700}

/* ── Architecture 3 zones : « À venir / Bêta / Vide » (jamais de fausse donnée) ── */
.bw-badge-beta{display:inline-block;vertical-align:middle;margin-left:8px;font-family:'Inter',system-ui,sans-serif;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#0e5aa0;background:rgba(23,137,230,.13);border:1px solid rgba(23,137,230,.3);padding:2.5px 8px;border-radius:99px;line-height:1.2}
[data-zone="impact"] .bw-badge-beta,[data-zone="index"] .bw-badge-beta{color:#17A65A;background:rgba(23,166,90,.13);border-color:rgba(23,166,90,.35)}
:root[data-theme="dark"] .bw-badge-beta{color:#7fc0ff;border-color:rgba(127,192,255,.35);background:rgba(46,144,217,.15)}
:root[data-theme="dark"] [data-zone="impact"] .bw-badge-beta,:root[data-theme="dark"] [data-zone="index"] .bw-badge-beta{color:#37C77E;border-color:rgba(55,199,126,.4);background:rgba(23,166,90,.16)}
.bw-soon{border:1.5px dashed rgba(128,128,128,.42);border-radius:16px;padding:22px 24px;opacity:.85;font-family:'Inter',system-ui,sans-serif;background:transparent}
.bw-soon-k{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.58;margin-bottom:8px}
.bw-soon strong{display:block;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:16.5px;font-weight:700;line-height:1.3}
.bw-soon p{margin:6px 0 0;font-size:13.5px;opacity:.66;line-height:1.5}
.bw-empty{text-align:center;padding:34px 20px;opacity:.9;font-family:'Inter',system-ui,sans-serif}
.bw-empty strong{display:block;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:16px}
.bw-empty p{margin:6px auto 0;font-size:13.5px;opacity:.7;max-width:44ch;line-height:1.55}
.bw-empty a{font-weight:700}
/* grille des emplacements réservés */
.bw-slots-wrap{max-width:1160px;margin:34px auto;padding:0 20px}
.bw-slots{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}

/* ── Les 2 portes (Faire un impact · Besoin d'aide) — jamais confondables ── */
.bw-door{display:inline-flex;align-items:center;gap:12px;padding:15px 24px;border-radius:15px;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;font-size:16.5px;letter-spacing:-.01em;text-decoration:none;line-height:1.15;transition:transform .15s,box-shadow .15s,background .15s;border:1.5px solid transparent}
.bw-door svg{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bw-door:hover{transform:translateY(-2px)}
.bw-door--impact{background:#17A65A;color:#fff;box-shadow:0 10px 26px rgba(23,166,90,.26)}
.bw-door--impact:hover{background:#149250}
.bw-door--aide{background:rgba(23,137,230,.1);color:#1276cc;border-color:rgba(23,137,230,.42)}
.bw-door--aide:hover{background:rgba(23,137,230,.16)}
:root[data-theme="dark"] .bw-door--aide{color:#7fc0ff;background:rgba(46,144,217,.14);border-color:rgba(46,144,217,.45)}
.bw-doors{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}


/* ── Impression propre : sans chrome, noir sur blanc, liens en toutes lettres ── */
@media print{
  .bw-ctrls,.bw-panel,.bw-panel-bd,.bw-toast,.bw-bm,.bw-copy,.urgence-bar,.mobile-menu,#mobile-menu,#bw-mobile-menu,.mnav-toggle,.menu-toggle,.cz-arrow,.cz-ctrl,.cz-ctrls,.no-print,.main-nav,.bw-lang,.lang-toggle,.filter-bar,.back-bar{display:none!important}
  header,#header,#bw-header,header.site,.site-header,.topbar,footer,#footer,#bw-footer,.site-footer{display:none!important}
  html,body{background:#fff!important;color:#000!important}
  *{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important;border-color:#bbb!important}
  a{color:#000!important;text-decoration:underline}
  a[href^="http"]::after{content:" ("attr(href)")";font-size:.82em;color:#333!important;word-break:break-all}
  main,article,.wrap,.container,.ob-wrap{max-width:none!important;margin:0!important;padding:0!important}
  details{display:block!important}
  details>*{display:block!important}
  @page{margin:1.4cm}
}

/* ═══ DARK — composants partagés au fond blanc codé en dur (corrige les
   « blanc sur blanc » du mode sombre). Aucun effet en thème clair. ═══ */
:root[data-theme="dark"] .mnav{background:#181920}
:root[data-theme="dark"] .cz-cat{background:rgba(255,255,255,.14);color:#ECEBE6}
:root[data-theme="dark"] .header-actions .btn-outline,:root[data-theme="dark"] .head-actions .btn-outline,:root[data-theme="dark"] .bw-actions .bw-btn-outline{color:#ECEBE6;border-color:rgba(255,255,255,.38)}
:root[data-theme="dark"] .header-actions .btn-outline:hover,:root[data-theme="dark"] .head-actions .btn-outline:hover,:root[data-theme="dark"] .bw-actions .bw-btn-outline:hover{background:rgba(255,255,255,.12);color:#fff}
:root[data-theme="dark"] .bw-door,:root[data-theme="dark"] .bw-door span,:root[data-theme="dark"] .bwx-cta,:root[data-theme="dark"] .bwx-cta span{color:#fff}

/* ═══ MOBILE (≤768px) — v12. Filet anti-débordement, contrôles injectés,
   harmonisation des 3 systèmes d'en-tête (#header/.header-inner ·
   header.site/.wrap · #bw-header/.bw-header-in). RÈGLE ABSOLUE : tout vit
   dans ces media queries — zéro effet au-dessus de 768px (desktop intact). ═══ */
@media (max-width:768px){
  /* filet : le décor (halos flous) ne crée jamais de défilement latéral.
     clip (pas hidden) pour ne pas casser les en-têtes sticky. */
  html,body{overflow-x:clip}
  /* contrôles injectés bw-core : compacts, zone tap 44px de haut.
     La largeur est fixée plus bas (44 px sous 768, 40 px sous 600) : la poser
     ici aussi ne servait à rien, elle était écrasée deux fois. */
  .bw-ctrls{gap:0 !important}
  .bw-ctrl{height:44px !important}
  /* recherche : jamais sous 16px (zoom auto iOS) */
  .bw-search-in{font-size:16px !important}
  /* filet champs non stylés — n'agrandit que ce qui est sous 16px */
  input,select,textarea{font-size:max(16px,1em)}
  /* boutons langue des 3 systèmes : cible tactile confortable.
     min-height est fixée plus bas à 44 px ; l'écrire ici était sans effet. */
  .lang-toggle .lang-btn,.lang button,.bw-lang button{min-width:44px;padding-top:7px;padding-bottom:7px}
  /* hamburgers : zone tap 44px */
  .mnav-toggle{width:44px;height:44px;padding:9px}
  #menu-toggle,#bw-menu-toggle{min-width:44px;min-height:44px}
}
@media (max-width:600px){
  /* passage en 2 rangées quand la rangée unique ne tient pas :
     logo à gauche rangée 1, actions alignées à droite (rangée 2 si besoin). */
  .header-inner{flex-wrap:wrap !important;height:auto !important;min-height:58px;padding-top:8px;padding-bottom:8px;gap:6px 12px !important}
  .header-inner .logo{margin-right:auto}
  .header-actions{margin-left:auto !important;gap:6px !important;flex-wrap:wrap;justify-content:flex-end;row-gap:4px}
  header.site .wrap{flex-wrap:wrap !important;height:auto !important;min-height:58px;padding:8px 16px !important;gap:6px 12px !important}
  header.site .brand{margin-right:auto}
  .head-actions{margin-left:auto !important;gap:.4rem !important;flex-wrap:wrap;justify-content:flex-end;row-gap:4px}
  .bw-header-in{flex-wrap:wrap !important;height:auto !important;min-height:58px;padding-top:8px;padding-bottom:8px;gap:6px 12px !important}
  .bw-header-in .bw-logo{margin-right:auto}
  .bw-actions{margin-left:auto !important;gap:6px !important;flex-wrap:wrap;justify-content:flex-end;row-gap:4px}
}

/* ═══════════════════════════════════════════════════════════════════════
   SURCHARGES MOBILES v2 — ajoutées APRÈS tout le reste.
   Chaque règle vit sous un point de rupture : le desktop ne peut pas les voir.
   Mesures à l'origine de ce bloc : audit mobile du 2026-07-28.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  /* ── Cibles tactiles sous le seuil de 44 px ────────────────────────── */
  /* Boutons copier/signet injectés sur CHAQUE fiche du sanctuaire : deux
     cibles de 34 px collées l'une à l'autre (gap 2 px). */
  .bw-bm,.bw-copy{width:44px;height:44px}
  /* Langue : le filet montait à 36 px de haut seulement. */
  .lang-toggle .lang-btn,.lang button,.bw-lang button{min-height:44px}
  /* Contrôles du socle entre 601 et 768 px : la place existe encore.
     Sous 600 px, un bloc plus bas les ramène à 40 px pour tenir sur une
     rangée. (Le commentaire d'origine parlait d'en-têtes « sur 2 rangées » :
     c'était vrai avant qu'on les repasse sur une seule.) */
  .bw-ctrl{width:44px !important}

  /* ── Zoom iOS : 4 champs réels sous 16 px ──────────────────────────
     Le filet « input{font-size:max(16px,1em)} » perd en spécificité face à
     tout champ stylé par classe. Ces sélecteurs-là gagnent. */
  .field input,.field select,.field textarea{font-size:16px}
  .agir-nl input[type="email"]{font-size:16px}
  .pfs-input{font-size:16px}
  table.dt input{font-size:16px}

  /* ── Zones sûres (encoche / barre home iPhone en PWA installée) ──────
     env() vaut 0 partout ailleurs : aucun effet hors iOS. */
  #bwg-fab{margin-bottom:env(safe-area-inset-bottom,0)}
  .bw-toast{margin-bottom:env(safe-area-inset-bottom,0)}
}

/* ── Cibles tactiles : deuxième passe ──────────────────────────────────
   Mesuré au navigateur à 360 px, sur les vrais contrôles autonomes (les liens
   en ligne dans un paragraphe sont hors périmètre — les agrandir casserait
   l'interligne du texte). Restaient 62 contrôles sous 44 px, dont des liens
   d'action à 17 px de haut : c'est un lien stylé en bouton, mais sans aucun
   rembourrage vertical. Tout ce bloc vit sous 768 px. */
@media (max-width:768px){
  /* Liens d'action « fantômes » (« Voir où va chaque dollar → », « Qui est
     derrière BetterWorld → ») : 17 à 22 px de haut. inline-flex + min-height
     leur donne une vraie zone sans déplacer le texte autour. */
  a.btn-ghost{display:inline-flex;align-items:center;min-height:44px}
  /* Filtres du blog, boutons d'ajout du budget, icônes sociales, fermeture du
     panneau de gamification : entre 37 et 42 px. */
  .pf-btn{min-height:44px}
  .ob-add{min-height:44px}
  .social{width:44px;height:44px}
  /* Sélecteur doublé sur ces trois-là, et sur eux seuls : à spécificité égale
     c'est l'ordre de source qui tranche, et il ne joue pas en notre faveur.
     .bwg-sheet-x est écrit par bw-gamif.js dans une balise <style> injectée à
     l'exécution ; .agir-soc et .agir-skill viennent d'un <style> d'impact.html
     placé APRÈS le lien vers ce fichier. Doubler la classe monte la
     spécificité à (0,2,0) sans toucher au CSS de base ni recourir à
     !important. Mesuré : 40 → 44 px et 42 → 44 px. */
  .bwg-sheet-x.bwg-sheet-x{width:44px;height:44px}
  .agir-soc.agir-soc{width:44px;height:44px}
  .agir-skill.agir-skill{min-height:44px}
  .bwx-cta{min-height:44px}
  a.btn{min-height:44px}
  /* Les cartes d'outils : le lien fait 40 px mais toute la carte est
     cliquable (::after), donc la cible réelle est déjà large. On aligne
     quand même la zone du libellé. */
  .carte-lien{min-height:44px}
}

/* La fenêtre 769–860 px : les en-têtes sont encore « desktop » mais les
   hamburgers legacy s'y affichent déjà — ils gardaient leur taille d'origine
   (~34 px). Au-dessus de 860 px ils sont display:none, donc invisible effet. */
@media (max-width:900px){
  .mnav-toggle{width:44px;height:44px;padding:9px}
}

/* ── Passerelles « Pour continuer » (bloc injecté par bw-core.js) ──────────
   Volontairement AUTONOME : ce bloc s'affiche sur 17 pages dont les palettes
   n'ont rien en commun (--ink ici, --paper là, rien ailleurs). S'appuyer sur
   les variables d'une page le rendrait invisible sur les autres. Il porte donc
   ses propres jetons, posés sur des gris neutres qui tiennent sur fond clair
   comme sur fond sombre. Toutes les classes sont préfixées bw-suite : aucune
   page n'en définit, donc aucune collision possible. */
.bw-suite{
  --s-fg:#16231a; --s-mut:#5b6b60; --s-line:#dfe5dd; --s-bg:transparent;
  --s-card:#fff; --s-accent:#17A65A;
  display:block; margin:56px 0 0;
  /* Gouttière de 24 px : celle des .wrap du site. Enfant de body, le bloc
     hérite du décalage de la barre latérale et retombe donc sur la colonne
     des pages. */
  padding:0 24px;
  /* 404.html pose body{display:flex;align-items:center} : sans ces trois
     déclarations le bloc devient un élément flex, rétrécit à son contenu et
     part se centrer au milieu de la page. */
  width:100%; align-self:stretch; flex:none;
  /* Toutes les pages ne déclarent pas *{box-sizing:border-box} : sans ceci,
     width:100% + la gouttière de 24 px débordaient de 48 px (mesuré sur 404). */
  box-sizing:border-box;
}
.bw-suite *{box-sizing:border-box}
:root[data-theme="dark"] .bw-suite{
  --s-fg:#ECEBE6; --s-mut:#9aa5b5; --s-line:#2c2e36; --s-card:#1e1f26;
}
.bw-suite-in{max-width:var(--bw-max,1280px);margin:0 auto;
  border-top:1px solid var(--s-line);padding:30px 0 8px}
.bw-suite-t{
  font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--s-mut);margin:0 0 16px;line-height:1.3;
}
.bw-suite-g{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bw-suite-c{
  display:flex;flex-direction:column;gap:5px;position:relative;
  background:var(--s-card);border:1px solid var(--s-line);border-radius:13px;
  padding:16px 42px 16px 17px;text-decoration:none;color:var(--s-fg);
  transition:border-color .15s,transform .15s;
}
.bw-suite-c:hover{border-color:var(--s-accent);transform:translateY(-2px)}
.bw-motion-off .bw-suite-c{transition:none}
.bw-motion-off .bw-suite-c:hover{transform:none}
.bw-suite-ct{font-weight:700;font-size:15.5px;line-height:1.3;color:var(--s-fg)}
.bw-suite-cd{font-size:13.5px;line-height:1.45;color:var(--s-mut)}
.bw-suite-a{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  color:var(--s-accent);font-weight:700;font-size:17px;line-height:1;
}
/* Deux cartes : pas de troisième colonne vide. La classe est posée par le JS
   plutôt que déduite par :has(), absent des navigateurs anciens. */
.bw-suite-g2,.bw-suite-g4{grid-template-columns:repeat(2,1fr)}
@media (max-width:768px){
  .bw-suite{margin-top:38px}
  .bw-suite-in{padding-top:24px}
  .bw-suite-g,.bw-suite-g2,.bw-suite-g4{grid-template-columns:1fr}
  /* La carte fait déjà bien plus de 44 px de haut : rien à forcer ici. */
}

/* ── Bouton « Partager » des fiches ressource ──────────────────────────────
   Même gabarit que .bw-copy et .bw-bm, qui vivent déjà côte à côte dans
   .bw-actions : il ne devait pas détonner. */
.bw-share{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:0;background:transparent;border-radius:9px;
  color:var(--muted,#5b6b60);cursor:pointer;padding:0;transition:background .15s,color .15s;
}
.bw-share svg{width:17px;height:17px}
.bw-share:hover{background:rgba(128,128,128,.12);color:var(--ink,#16231a)}
:root[data-theme="dark"] .bw-share:hover{background:rgba(255,255,255,.1);color:#ECEBE6}
@media (max-width:768px){.bw-share{width:44px;height:44px}}

/* ── Infolettre : capture du COURRIEL SEUL ────────────────────────────────
   Un seul champ visible. Les deux autres sont un piège à robots invisible et
   la langue en champ caché — rien qu'on demande à la personne.
   Styles ici plutôt que dans chaque page : le formulaire vit sur index, aide
   et ressources, dont les palettes n'ont rien en commun. */
.nl-form{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.nl-form input[type=email]{
  flex:1 1 190px; min-width:0; font:inherit; font-size:16px;
  color:var(--ink,#101418); background:var(--card,#fff);
  border:1.5px solid var(--line,#dfe5dd); border-radius:11px;
  padding:11px 14px; min-height:44px;
}
.nl-form input[type=email]:focus{outline:2px solid #17A65A;border-color:#17A65A}
.nl-form input[name="email_address_check"]{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.nl-form button{
  flex:none; font:inherit; font-weight:700; font-size:15px; color:#fff;
  background:#17A65A; border:0; border-radius:11px; padding:11px 20px;
  min-height:44px; cursor:pointer; transition:filter .15s;
}
.nl-form button:hover{filter:brightness(1.07)}
.nl-note{margin-top:9px;font-size:12.5px;color:var(--soft,#5b6b60);line-height:1.45}
/* Bloc d'infolettre injecté sur ressources.html (la page n'en avait pas). */
.bw-nl-bloc{display:block;padding:0 24px;margin:40px 0 0;width:100%;box-sizing:border-box}
.bw-nl-bloc *{box-sizing:border-box}
.bw-nl-in{max-width:var(--bw-max,1280px);margin:0 auto;display:flex;flex-direction:column;gap:4px;
  border:1px solid var(--line,#dfe5dd);border-radius:14px;padding:18px 20px}
.bw-nl-in>strong{font-size:16px;font-weight:700}
.bw-nl-in>span{font-size:13.5px;color:var(--soft,#5b6b60);margin-bottom:10px}
:root[data-theme="dark"] .bw-nl-in{border-color:#2c2e36}
:root[data-theme="dark"] .nl-form input[type=email]{background:#1e1f26;border-color:#2c2e36;color:#ECEBE6}
@media (max-width:768px){
  .nl-form button{width:100%}
  .nl-form input[type=email]{flex:1 1 100%}
}

/* ── Appel « Soutiens le mouvement » (injecté par bw-core.js) ──────────────
   Mêmes jetons autonomes que .bw-suite, pour la même raison : trois pages,
   trois palettes sans rien de commun. */
.bw-soutien{
  --o-fg:#16231a; --o-mut:#5b6b60; --o-line:#dfe5dd; --o-card:#fff; --o-accent:#17A65A;
  display:block; padding:0 24px; margin:44px 0 0; width:100%; box-sizing:border-box;
}
.bw-soutien *{box-sizing:border-box}
:root[data-theme="dark"] .bw-soutien{--o-fg:#ECEBE6;--o-mut:#9aa5b5;--o-line:#2c2e36;--o-card:#1e1f26}
.bw-soutien-in{
  max-width:var(--bw-max,1280px); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:var(--o-card); border:1px solid var(--o-line); border-radius:14px; padding:18px 20px;
}
.bw-soutien-tx{display:flex;flex-direction:column;gap:3px;flex:1 1 300px;min-width:0}
.bw-soutien-tx strong{font-size:16px;font-weight:700;color:var(--o-fg);line-height:1.3}
.bw-soutien-tx span{font-size:13.5px;color:var(--o-mut);line-height:1.45}
.bw-soutien-cta{
  flex:none; display:inline-flex; align-items:center; min-height:44px; padding:11px 20px;
  background:var(--o-accent); color:#fff; border-radius:11px;
  font-weight:700; font-size:14.5px; text-decoration:none; transition:filter .15s;
}
.bw-soutien-cta:hover{filter:brightness(1.07)}
/* Version sanctuaire (urgence) : ni fond coloré, ni bouton vert. On propose,
   on ne sollicite pas — la personne est peut-être en crise. */
.bw-soutien-sobre .bw-soutien-in{background:transparent;border-style:dashed}
.bw-soutien-sobre .bw-soutien-cta{
  background:transparent; color:var(--o-mut); border:1.5px solid var(--o-line); font-weight:600;
}
.bw-soutien-sobre .bw-soutien-cta:hover{border-color:var(--o-mut);color:var(--o-fg);filter:none}
@media (max-width:768px){
  .bw-soutien{margin-top:30px}
  .bw-soutien-in{padding:15px 16px;gap:13px}
  .bw-soutien-tx strong{font-size:14.5px}
  .bw-soutien-tx span{font-size:12.5px}
  .bw-soutien-cta{width:100%;justify-content:center;font-size:13.5px}
}

/* ══ MOBILE : réduire titres, textes d'intro et boutons ═══════════════════
   Mesuré à 345 px de large : h1 à 44 px sur l'accueil, 40 px sur ressources,
   intros à 20 px. Les boutons prenaient 84 à 88 % de la largeur, et le libellé
   du bouton principal de l'accueil passait sur deux lignes — d'où 73 px de haut
   pour un bouton d'une ligne.

   !important assumé : ces valeurs doivent battre les feuilles internes de
   49 pages, dont certaines sont déclarées APRÈS le lien vers ce fichier
   (impact.html) et avec une spécificité plus forte (.hero h1 bat h1). Tout est
   enfermé sous max-width:768px, donc le desktop ne voit jamais ces règles.

   PLANCHER TACTILE CONSERVÉ : on réduit le rembourrage et la police, jamais la
   hauteur sous 44 px. Un bouton de 22 px se rate au doigt — c'est le seul point
   où je n'ai pas suivi « au moins de moitié », et ça ne concerne que la
   hauteur : la largeur, elle, tombe bien de moitié. */
@media (max-width:768px){
  /* ── Titres ──
     Tailles finales posées ICI. Une deuxième passe les réécrivait plus bas
     (26→23, 19,5→18, 16,5→15) : deux valeurs pour une seule, la première
     morte. Fusionnées. Les line-height et letter-spacing, eux, n'ont jamais
     été réécrits — ils restent donc sur ces mêmes lignes. */
  h1,.hero h1,.hero-txt h1{font-size:23px !important;line-height:1.16 !important;letter-spacing:-.02em !important}
  h2,.hero h2,h2.section{font-size:18px !important;line-height:1.22 !important}
  h3{font-size:15px !important;line-height:1.3 !important}

  /* ── Textes d'intro (48 « sub », 25 « lede », 19 « lead ») ──
     Uniquement ceux-là : un p{font-size} général AGRANDIRAIT les paragraphes
     déjà petits, comme les 13,3 px des fiches produits. */
  .sub,.lede,.lead,p.lead,p.lede,.hero .lede,.hero p.lead{font-size:14.5px !important;line-height:1.5 !important}

  /* ── Boutons : la police et le rembourrage, pas la hauteur utile ── */
  .btn,a.btn,button.btn{
    font-size:13.5px !important;
    padding:8px 15px !important;
    min-height:44px;                    /* plancher tactile, volontaire */
    white-space:normal;
  }
  .ob-hard-btn,.ob-btn-ghost,.cc-btn,.bwx-cta,.horsqc-btn{
    font-size:13.5px !important;padding:8px 14px !important;min-height:44px;
  }
  .boutique-cta{padding:0 !important}

  /* ── Cartes-boutons : deux colonnes au lieu d'une ──
     C'est ici que « réduire de moitié » se joue vraiment. Les .cat de don.html
     et les .region-card de ressources.html faisaient 293 à 305 px de large,
     soit 85 à 88 % de l'écran, avec 26 à 30 px de rembourrage. */
  /* minmax(0,1fr) et non 1fr : un élément de grille a min-width:auto par
     défaut et refuse de descendre sous la largeur de son contenu. Avec « 1fr »
     seul, .cats gonflait à 459 px sur un écran de 345 et deux cartes sortaient
     de l'écran — invisible dans les mesures parce que overflow-x:clip les
     rognait en silence. */
  /* .cats reste en UNE colonne. Deux colonnes y donnaient des cartes de 130 px
     de large et 454 px de haut — contre 223 px sur une seule — parce que le
     conteneur ne mesure que 271 px et que ces cartes portent beaucoup de texte.
     C'est aussi le chemin de don : on ne le comprime pas au point de le rendre
     illisible. La réduction vient donc du rembourrage et de la police.
     (Au passage : mon `.cats .cat-bw{grid-column:1/-1}` ne servait à rien —
     l'élément de grille est .cat-wrap, .cat-bw n'est qu'un petit-enfant.) */
  .regions{grid-template-columns:repeat(2,minmax(0,1fr)) !important;padding-left:14px !important;padding-right:14px !important}
  .cat,.region-card{min-width:0}
  .cat>*,.region-card>*{min-width:0}
  .cat{padding:13px 13px !important}
  .region-card{padding:15px 13px !important}
}

/* ══ MOBILE, 2e passe : cartes en deux colonnes, texte dégonflé, doublons ═══
   Mesuré à 360 px. Presque toutes les listes de cartes étaient en UNE colonne,
   d'où des pages interminables : besoin 8 328 px, blog 10 175 px, impact
   7 874 px, et recommandations 38 125 px. Les cartes elles-mêmes faisaient
   351 px (besoin), 408 px (outils), 414 px (blog), 531 px (recommandations).

   ⛔ urgence.html : ses GRILLES ne sont pas touchées — vérifié, elle n'utilise
   aucune des classes ci-dessous. Ses 12 numéros restent en une colonne, en
   pleine largeur, avec des cibles de 44 px : mesuré après coup. Les règles de
   titres, elles, sont globales et s'y appliquent aussi — et c'est tant mieux :
   le premier numéro appelable est passé de 613 à 600 px du haut de page. On ne
   met pas ses numéros sur deux colonnes, on ne lui interdit pas de respirer.

   Tout est sous max-width:768px : le desktop ne voit rien de ce bloc. */
@media (max-width:768px){

  /* ── 1. L'horizontal ──────────────────────────────────────────────────
     minmax(0,1fr) et min-width:0 partout : sans eux un élément de grille
     refuse de descendre sous la largeur de son contenu et la grille déborde
     (leçon de .cats, qui gonflait à 459 px sur un écran de 345). */
  .need-grid,.guide-grid,.steps-grid,.situation-grid,.lh-list,
  .post-grid,.grille,.reco-grid,
  .foot-grid,.bw-foot-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  .need-grid>*,.guide-grid>*,.steps-grid>*,.situation-grid>*,.lh-list>*,
  .post-grid>*,.grille>*,.reco-grid>*,
  .foot-grid>*,.bw-foot-grid>*{min-width:0}
  .need-grid>*>*,.post-grid>*>*,.grille>*>*,.reco-grid>*>*,.lh-list>*>*{min-width:0}
  /* .agir-grid EXCLUE volontairement : son conteneur ne fait que 257 px, donc
     deux colonnes donnaient des cartes de 124 px de large — et 480 à 673 px de
     haut, contre 173 px sur une colonne. impact.html gagnait 13 % de hauteur au
     lieu d'en perdre. Deux colonnes n'ont de sens que dans un conteneur large. */

  /* ── 2. Le texte ──────────────────────────────────────────────────────
     Titres et intros : leurs tailles finales sont remontées dans le bloc
     « Titres » plus haut, là où vivent déjà leurs line-height. Il ne reste ici
     que ce qui n'existe qu'à ce niveau : les textes internes aux cartes. */
  /* Textes internes aux cartes : c'est là que la densité se gagne. */
  .need-name{font-size:15.5px !important;line-height:1.25 !important}
  .need-desc,.reco-phrase,.post-grid .bd p{font-size:12.5px !important;line-height:1.4 !important}
  .step-desc,.lh-p,.agir-card-d{font-size:12.5px !important;line-height:1.4 !important}
  .need-emoji{font-size:21px !important}
  .step-emoji,.situation-emoji{font-size:22px !important}
  .reco-name,.post-grid h3{font-size:14px !important;line-height:1.3 !important}
  .grille h2{font-size:15.5px !important}
  .grille .carte p{font-size:12.5px !important;line-height:1.4 !important}

  /* ── 3. Doublons et texte accessoire ──────────────────────────────────
     .cover-title est le titre de l'article écrit une SECONDE fois, juste
     au-dessus du <h3> qui le répète — sur 19 cartes. C'est le doublon le plus
     net du site. */
  .post-grid .cover-title{display:none !important}
  /* « Lire l'article → », « Ouvrir l'outil », « Choisir » : la carte entière est
     déjà cliquable, ces libellés ne portent aucune information. La flèche, elle,
     reste : c'est le seul repère visuel que l'élément mène ailleurs. */
  .post-grid .more,.grille .carte-lien span:not(.fl),.situation-card b+small+span{font-size:0 !important}
  .post-grid .more:after,.grille .carte-lien:after{content:"→";font-size:14px;color:inherit}
  /* Les puces de détail des cartes d'outils : trois lignes de 42 px chacune,
     alors que la page de l'outil les répète en entier. */
  .grille .carte ul{display:none !important}
  /* Les pastilles de sous-catégories : cinq par carte, 105 px en tout. On en
     garde deux — assez pour dire ce qu'il y a dedans — et la page de
     destination porte la liste complète. */
  .need-subchip:nth-of-type(n+3){display:none !important}

  /* ── 4. Descriptions écourtées plutôt que supprimées ──────────────────
     Deux lignes suffisent à situer une carte ; le reste est à un tap. On coupe
     à l'affichage, donc rien n'est perdu pour un lecteur d'écran. */
  .post-grid .bd p,.reco-phrase,.lh-p,.step-desc,.need-desc{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }

  /* ── 5. Rembourrages resserrés ───────────────────────────────────────── */
  .need-card,.guide-card,.step-card,.situation-card,.lh-card,
  .post .bd,.carte,.agir-card,.reco-card-body{padding:11px 12px !important}
  .cat,.region-card{padding:11px 11px !important}
}

/* ══ MOBILE, 3e passe ══════════════════════════════════════════════════════
   Six corrections demandées, toutes mesurées. Rien au-dessus de 768 px. */

/* ── A. L'en-tête sur UNE rangée ───────────────────────────────────────────
   Il tenait sur 3 rangées et 117 px de haut. La cause était une règle que
   j'avais moi-même posée (« passage en 2 rangées quand la rangée unique ne
   tient pas ») : elle réglait le débordement en empilant, ce qui n'est pas ce
   qu'on veut. Le vrai coupable de largeur, c'est le mot « BetterWorld » à côté
   du logo : 109 px sur 345 disponibles. Sans lui, 44 (menu) + 57 (logo)
   + 226 (actions) + 12 (espaces) = 339 px, donc ça tient.
   Le logo en image reste, et le titre de page est juste en dessous : la marque
   n'est jamais perdue. Le nom reste dans le pied de page, qui a la place. */
@media (max-width:600px){
  .header-inner,header.site .wrap,.bw-header-in{
    flex-wrap:nowrap !important;
    height:56px !important;min-height:0 !important;
    padding-top:0 !important;padding-bottom:0 !important;
    gap:6px !important;
  }
  .header-actions,.head-actions,.bw-actions{flex-wrap:nowrap !important;gap:4px !important;row-gap:0 !important}
  /* TROIS balisages de mot-marque coexistent, mesurés page par page :
       · <span class="logo-name">   → 25 pages (index, besoin, aide, outils…)
       · <span class="bw-name">     → 1 page  (ressources)
       · un NŒUD DE TEXTE NU après <span class="mark"> → 26 pages (impact, blog,
         articles) : <a class="brand"><span class="mark"></span>BetterWorld</a>
     Les deux premiers se masquent normalement. Le troisième n'est pas un
     élément : display:none ne peut pas l'atteindre. On annule donc la taille de
     police du conteneur — le texte disparaît, et .mark n'en dépend pas
     (hauteur fixe + aspect-ratio, image en arrière-plan CSS).
     L'accessibilité est préservée : ces liens portent déjà
     aria-label="BetterWorld accueil". Portée limitée à <header> — le pied de
     page, qui a la place, garde le nom en entier. */
  header .logo-name,header .bw-name,header .bw-logo-name{display:none !important}
  header .brand{font-size:0 !important;gap:0 !important}
  header .logo img,header .brand img,header .bw-logo img{height:26px !important}
  /* Il restait 30 px de trop sur besoin et 65 px sur outils. Inventaire mesuré
     de la rangée : menu 44 + logo 49 + trois contrôles à 44 + bascule FR/EN 94.
     Il faut arbitrer, et voici les deux arbitrages, assumés :

     1. Le raccourci « Mes affaires » quitte l'en-tête sur mobile. Il reste à un
        tap : le tiroir le contient (vérifié dans bw-nav.js), et « Menu » est
        dans la barre du bas. C'est le seul contrôle de l'en-tête qui duplique
        une entrée de navigation. Recherche, réglages et sauvegarde de page,
        eux, n'existent nulle part ailleurs : ils restent.
     2. La bascule FR/EN rétrécit en LARGEUR (44 → 36 px) mais garde ses 44 px
        de HAUTEUR. Elle ne peut pas être masquée : initLang() applique
        l'anglais en cliquant ce bouton, et aucun autre endroit du site n'offre
        le choix de langue — la cacher priverait les anglophones de la bascule. */
  header .bw-ctrl-saves{display:none !important}
  .lang-toggle,.lang,.bw-lang{flex:none}
  .lang-toggle .lang-btn,.lang button,.bw-lang button{
    min-width:36px !important;padding-left:7px !important;padding-right:7px !important}
  .bw-ctrl{width:40px !important}
}

@media (max-width:768px){
  /* ── B. La pastille « Mon impact » passait sous la barre du bas ──────────
     Mesuré : #bwg-fab est en z-index 99700 et occupe 728→784 px ; #bw-tabbar
     est en 99880 et occupe 741→800. Ils se chevauchent sur 43 px et la barre,
     plus haute dans la pile, passe devant. On remonte donc la pastille
     au-dessus de la barre (59 px + un espace de 10 px) au lieu de jouer sur les
     z-index : la barre doit rester au premier plan, c'est l'accès à l'urgence.
     La marge basse existante gère l'encoche iPhone, on ne la touche pas. */
  #bwg-fab{bottom:89px !important}
  /* Le panneau ouvert, lui, doit couvrir la barre : sinon on tape « SOS » en
     croyant fermer le panneau. Son voile passe donc au-dessus. */
  #bwg-sheet-bd{z-index:99890 !important}
  #bwg-sheet{z-index:99900 !important;bottom:24px !important;max-height:calc(100vh - 120px) !important}

  /* ── C. Les boutons, un cran de plus ─────────────────────────────────── */
  .btn,a.btn,button.btn{font-size:12.5px !important;padding:7px 12px !important}
  .ob-hard-btn,.ob-btn-ghost,.cc-btn,.bwx-cta,.horsqc-btn,.btn-ghost,a.btn-ghost{
    font-size:12.5px !important;padding:7px 11px !important}
  .cta-links a,.res-cta{font-size:13px !important;padding:10px 13px !important}

  /* ── D. besoin : les cartes de guides ────────────────────────────────────
     140 × 461 px, dont un paragraphe de 188 px à lui seul. Le titre, le prix et
     les deux boutons suffisent à décider ; le détail est sur la page du guide. */
  .guide-card p,.guide-body p{display:none !important}
  .guide-card img,.guide-cover-img{max-height:78px !important;object-fit:cover}

  /* ── E. besoin : les cartes d'outils sans description ────────────────────
     Le <strong> dit déjà « Fais ton budget, gratuitement ». Le <span> qui suit
     répète ce que la page de l'outil affiche en entier. */
  .aide-outil-tx>span{display:none !important}

  /* ── F. besoin : le sélecteur de région sans titre ni note ───────────────
     Le <label> est masqué VISUELLEMENT et non supprimé : un lecteur d'écran
     doit continuer d'annoncer « Ta région » pour que le select ait un nom.
     display:none le rendrait muet. */
  .bsn-region label{
    position:absolute !important;width:1px !important;height:1px !important;
    padding:0 !important;margin:-1px !important;overflow:hidden !important;
    clip:rect(0 0 0 0) !important;white-space:nowrap !important;border:0 !important;
  }
  .bsn-region-note{display:none !important}
  .bsn-region{padding:12px 13px !important}

  /* ── G. ressources : téléphone hors de la liste ──────────────────────────
     La ligne de liste affiche « 📍 ville · 📞 téléphone · 💰 coût », et le
     dépliant .res-card-body porte déjà Téléphone, Site web, courriel et heures.
     Le numéro y est donc redondant — et c'est le plus long des trois.
     nth-child(2) est fiable ici : le gabarit rend toujours ces trois <span>
     dans cet ordre. Le site web, lui, n'a jamais été dans la liste. */
  .res-card-meta span:nth-child(2){display:none !important}
}

/* ═══ PARRAINAGE — accueil de l'invité ═════════════════════════════════════
   Bandeau posé par bw-core.js (initAccueilRef) quand quelqu'un arrive par un
   lien ?ref=. Affiché UNE seule fois, refermable, sans insistance : pas de
   compte à rebours, pas de relance, rien à faire en retour.
   Jamais en zone aide — mountPlayful() refuse d'y rendre, et data-bw-playful
   le fait neutraliser par enforcePlayful() si la zone venait à changer.
   width:calc(100% - 48px) plutôt qu'un padding : le bandeau est un enfant
   direct de <main>, il n'hérite d'aucune gouttière de .container. */
.bw-ref{display:flex;align-items:center;gap:11px;width:calc(100% - 48px);max-width:1080px;margin:14px auto 0;
  padding:12px 14px;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--vert,#17A65A) 34%,transparent);
  background:color-mix(in srgb,var(--vert,#17A65A) 8%,transparent)}
.bw-ref[hidden]{display:none}
.bw-ref-ic{flex:none;width:20px;height:20px;color:var(--vert,#17A65A)}
.bw-ref-ic svg{width:100%;height:100%}
.bw-ref-tx{flex:1;min-width:0;font-size:14px;line-height:1.45;color:var(--text,#16161A)}
.bw-ref-x{flex:none;width:34px;height:34px;display:grid;place-items:center;border:0;background:none;
  color:var(--text-2,#5B5B64);cursor:pointer;border-radius:9px;padding:0}
.bw-ref-x svg{width:16px;height:16px}
.bw-ref-x:hover{background:color-mix(in srgb,var(--text,#16161A) 8%,transparent)}
@media(max-width:640px){
  .bw-ref{width:calc(100% - 32px);margin-top:10px;padding:11px 12px;gap:9px}
  .bw-ref-tx{font-size:13px}
  .bw-ref-x{width:40px;height:40px}
}