/* bw-premium.css — PILOTE de la base design premium.

   Source unique : Direction et Stratégie/BASE-DESIGN-PREMIUM.md, arbitrée par
   Tristan le 17 septembre 2026 (le site adopte la base visuelle de la
   boutique). Aucune valeur ici n'est un choix de @SITE : elles viennent toutes
   de ce document. La charte de @MC fera foi dès qu'elle les aura intégrées.

   PORTÉE : TOUTES LES PAGES INTERNATIONALES, activée par html.bw-premium
   (Tristan, 20 septembre : « fais-le pour les autres pages, pas celles du
   Québec »). Les 52 pages de quebec/ et leur miroir n'ont ni la classe ni la
   feuille. Le jour où le Québec suivra, ce contenu fusionne dans bw-core.css,
   la déclaration de police part dans bw-fonts.css, et la classe disparaît.

   CE QUE LE DOCUMENT NE TRANCHE PAS, ET QUE CETTE FEUILLE NE TRANCHE DONC PAS :
     · le thème sombre : aucune palette n'est donnée. En sombre, le pilote
       applique la FORME (rayon, ombres, typographie, boutons) et garde les
       couleurs actuelles. En inventer une serait décider des couleurs.
     · les trois couleurs fonctionnelles (lien, erreur, urgence) : « à
       conserver », valeurs à fixer par @MC. On garde celles d'aujourd'hui. */


/* ── Playfair Display, hébergée sur le domaine ─────────────────────────────
   La CSP de _headers interdit Google Fonts. Deux jeux, comme les trois autres
   familles : latin et latin-ext. Graisse 600 seulement : le document ne lui
   donne qu'un rôle, les grands titres. Licence SIL OFL, hébergement permis. */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(polices/playfair-display-latin-ext-600.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(polices/playfair-display-latin-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ── 1. LA PALETTE — quatre familles, huit valeurs ────────────────────────
   Tristan, 20 septembre : « fait bon usage du beige, noir, blanc et
   doré/brun ». Le document de @DIRECTION donnait déjà le beige, l'encre et le
   doré ; ses trois neutres restants tiraient vers le vert (#F4F6F1, #5C6E63,
   #E3E8E0) et sortaient de cette consigne : ils passent au blanc et au brun.
   Chaque valeur est MESURÉE sur son fond, pas choisie à l'œil.

     beige    #F5F3EC   fond de page
     blanc    #FFFFFF   surface : cartes, champs, panneaux
     encre    #0A1712   texte et aplats sombres     16,5:1 sur beige
     brun     #5E574B   texte secondaire             6,4:1 sur beige
     doré     #886B26   surtitres et accents         4,5:1 sur beige
     trait    #E2DCCC   séparation décorative
     contour  #8C8370   contour de composant         3,4:1 (interdit n° 6)
     rouge    #B31B1B   urgence et erreur            6,1:1 (fonctionnel)

   Le site lit QUATRE systèmes de variables selon la page : le socle --bw-*,
   le chrome --bg/--text, les articles --ink/--green, la barre --bwn-*. On les
   rebranche tous ici. Sans ça, la moitié d'une page reste à l'ancienne teinte
   et deux pages voisines ne se ressemblent pas. */
html.bw-premium {
  --bwp-beige:#F5F3EC; --bwp-blanc:#FFFFFF; --bwp-encre:#0A1712;
  --bwp-brun:#5E574B;  --bwp-dore:#886B26;  --bwp-trait:#E2DCCC;
  --bwp-contour:#8C8370; --bwp-rouge:#B31B1B; --bwp-dore-f:#6B5420;
  --bwp-sable:#F0EBDC;   /* teinte de fond des encadrés, tirée du beige */

  /* le socle */
  --bw-creme:var(--bwp-beige); --bw-blanc:var(--bwp-blanc);
  --bw-encre:var(--bwp-encre); --bw-gris:var(--bwp-brun);
  --bw-trait:var(--bwp-trait); --bw-trait-2:var(--bwp-contour);
  --bw-bleu:var(--bwp-encre);  --bw-vert:var(--bwp-dore);
  --bw-or:var(--bwp-dore);     --bw-rouge:var(--bwp-rouge);
  --bw-focus:var(--bwp-encre);

  /* le chrome des pages */
  --bg:var(--bwp-beige); --surface:var(--bwp-blanc); --paper:var(--bwp-blanc);
  --text:var(--bwp-encre); --text-2:var(--bwp-brun); --text-3:var(--bwp-brun);
  --border:var(--bwp-trait); --border-2:var(--bwp-contour);
  --dark:var(--bwp-encre); --dark-2:var(--bwp-encre);
  --vert:var(--bwp-dore); --role:var(--bwp-dore);

  /* les articles : la famille verte et la famille bleue convergent ici */
  --ink:var(--bwp-encre); --ink2:var(--bwp-brun);
  --line:var(--bwp-trait); --soft:var(--bwp-brun);
  --green:var(--bwp-dore); --green-dark:var(--bwp-dore-f);
  --green-soft:var(--bwp-sable); --vert-soft:var(--bwp-sable);
  --amber:var(--bwp-dore); --amber-soft:var(--bwp-sable);
  --gold:var(--bwp-dore);
  --hero:var(--bwp-encre); --hero-2:var(--bwp-encre);
  --bg-soft:var(--bwp-blanc);
  --leaf:linear-gradient(90deg,#886B26,#6B5420);
  --grad:linear-gradient(90deg,#886B26,#0A1712);
  --spectrum:linear-gradient(90deg,#886B26,#0A1712);

  /* les familles de couleur des pages (outils, fiches, guides) : jusqu'à huit
     teintes pour la même fonction, une par page. Tout converge sur la palette.
     Accent → doré · accent foncé → doré foncé · teinte de fond → sable ·
     gris → brun · encre → encre · erreur → rouge. */
  --tc:var(--bwp-dore); --gj:var(--bwp-dore);
  --bleu:var(--bwp-encre); --bleu-d:var(--bwp-encre); --bleu-txt:var(--bwp-encre);
  --bleu-bg:var(--bwp-sable); --vert-d:var(--bwp-dore-f); --vert-txt:var(--bwp-dore-f);
  --vert-bg:var(--bwp-sable); --green-600:var(--bwp-dore);
  --mat-labo:var(--bwp-brun);     --mat-labo-bg:var(--bwp-sable);
  --mat-proto:var(--bwp-dore);    --mat-proto-bg:var(--bwp-sable);
  --mat-deploi:var(--bwp-dore-f); --mat-deploi-bg:var(--bwp-sable);
  --mat-courant:var(--bwp-encre); --mat-courant-bg:var(--bwp-sable);
  --or:var(--bwp-dore); --or-soft:var(--bwp-sable); --orange:var(--bwp-dore);
  --red:var(--bwp-rouge); --rouge:var(--bwp-rouge);
  --card:var(--bwp-blanc); --muted:var(--bwp-brun); --ink-soft:var(--bwp-encre);
  --pied-tx:var(--bwp-blanc);
  --s-fg:var(--bwp-encre); --s-mut:var(--bwp-brun); --s-line:var(--bwp-trait);
  --s-accent:var(--bwp-dore); --s-card:var(--bwp-blanc);
  --o-fg:var(--bwp-encre); --o-mut:var(--bwp-brun); --o-line:var(--bwp-trait);

  /* la barre latérale */
  --bwn-bg:var(--bwp-beige); --bwn-line:var(--bwp-encre);
  --bwn-text:var(--bwp-encre); --bwn-mut:var(--bwp-brun);
  --bwn-acc:var(--bwp-encre); --bwn-acc-bg:var(--bwp-blanc);
  --bwn-acc-tab:var(--bwp-encre); --bwn-red:var(--bwp-rouge);
}
html.bw-premium body { background:var(--bwp-beige); color:var(--bwp-encre); }
/* le chrome garde sa transparence, sur le nouveau fond */
html.bw-premium #header.bw-chrome { background:rgba(245,243,236,.9); }


/* ── 2. UN SEUL RAYON, AUCUNE OMBRE ───────────────────────────────────────
   « Rayons : 2 px partout — boutons, cartes, champs, images. » Les pastilles
   à 999 px comprises : un deuxième rayon est l'interdit n° 4.
   « Aucune ombre. » L'élévation passe par le fond. */
html.bw-premium {
  --r-sm: 2px; --r-md: 2px; --r-lg: 2px; --r-xl: 2px;
  --bw-r-sm: 2px; --bw-r-md: 2px; --bw-r-lg: 2px; --bw-r-pilule: 2px;
  --shadow: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
  --bw-ombre-1: none; --bw-ombre-2: none;
}


/* ── 3. TYPOGRAPHIE ────────────────────────────────────────────────────────
   Trois familles, trois rôles, pas une de plus (interdit n° 1).
   Corps à 17 px : la boutique est à 14 px, le document interdit de le reprendre,
   le site porte des articles de 1 400 mots. */
html.bw-premium body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  letter-spacing: 0;
}
/* Grand titre : Playfair Display 600, et nulle part ailleurs. */
html.bw-premium #hero h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.7rem, 6.2vw, 5rem);
  line-height: 1.05;
  letter-spacing: -.01em;
}
/* Titres de section : Bricolage Grotesque 700. */
html.bw-premium main h2 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.25;
  letter-spacing: 0;
}
/* Mesure : jamais plus de 68 caractères par ligne de corps. */
html.bw-premium #hero .hero-sub { max-width: 68ch; font-size: 1.25rem; line-height: 1.6; }

/* Surtitres : Inter en MAJUSCULES, +0,2em, doré. Le seul endroit où
   l'interlettrage s'ouvre, avec les boutons. La pastille du hero devient un
   surtitre : une pilule n'existe plus quand il n'y a qu'un rayon. */
html.bw-premium .eyebrow,
html.bw-premium .cz-eyebrow,
html.bw-premium .hero-pill {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .2em;
}
html.bw-premium .hero-pill { background: none; border: 0; padding: 0; box-shadow: none; }
html.bw-premium .hero-pill .dot { display: none; }


/* ── 4. BOUTONS — deux styles, pas trois ───────────────────────────────────
   Communs : rayon 2 px · 16px 40px · Inter 500 · 0,8 rem · MAJUSCULES ·
   +0,2em · zone tactile 44 px. Survol en 0,25 s, sans déplacement. */
html.bw-premium .btn {
  border-radius: 2px;
  padding: 16px 40px;
  min-height: 44px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  box-shadow: none;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
html.bw-premium .btn:hover,
html.bw-premium .btn:focus-visible { transform: none; }
/* Le petit bouton du header garde sa hauteur de header, pas son rembourrage. */
html.bw-premium .btn-sm { padding: 10px 20px; }


/* ── 5. MOUVEMENT ──────────────────────────────────────────────────────────
   « Aucune animation au défilement, aucune apparition en cascade, aucun
   élément qui bouge seul. » Les douze .reveal de l'index apparaissent donc
   d'emblée. Et rien ne se déplace au survol. */
html.bw-premium .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
html.bw-premium .bwm-c:hover,
html.bw-premium .cz-card:hover,
html.bw-premium .qc-porte-c:hover { transform: none; }


/* ── 6. LES COMPOSANTS PARTAGÉS, TELS QU'ILS APPARAISSENT SUR L'INDEX ──────
   Barre latérale, boutons flottants, FR/EN, « Mon impact » et son panneau :
   injectés par script sur toutes les pages, ils portaient encore 7 à 18 px de
   rayon et quatre ombres. Le pilote les aligne ici, sur l'index seulement. */

/* Un seul rayon, y compris pour eux. */
html.bw-premium :is(input, select, textarea, button, .bw-ctrl, .lang-btn,
  .bw-sb-toggle, .bw-sb-link, .bw-sb-caret, .bw-sb-don, .bw-sb-badge,
  .bw-saves-n, .bwg-panel, .bwg-g, .bwg-b, .bwg-check, .bwg-bar, #bwg-bar,
  .bwg-fab-n, #bwg-sheet, #bwg-fab, #bw-back, .bw-sb-sub, .bw-badge-beta,
  .qc-porte-fl, .bwg-b .ic, .bwg-eq > div) { border-radius: 2px; }

/* Aucune ombre : l'élévation passe par le fond, et l'aplat d'encre sépare
   déjà le bouton flottant du fond clair. */
html.bw-premium #bw-back,
html.bw-premium #bwg-sheet,
html.bw-premium #bwg-fab,
html.bw-premium #bwg-fab .bwg-fab-n,
html.bw-premium .bwm-tag { box-shadow: none; }

/* Le halo flou derrière le titre est une ombre qui ne dit pas son nom. */
html.bw-premium .hero-glow { display: none; }


/* ── 7. LES COULEURS ÉCRITES EN DUR ───────────────────────────────────────
   Les variables couvrent la plus grande part du site. Restent les valeurs
   posées en dur dans une page ou dans un script : elles sont reprises ici,
   une par une, sur la palette. */

/* Boutons : aplat d'encre pour le principal, contour d'encre pour le
   secondaire qui se remplit au survol. Tout aplat vert, bleu ou ambre d'un
   bouton devient un bouton principal : une couleur ne porte pas une action. */
html.bw-premium :is(.btn-primary, .btn-green, .btn-vert, .btn-blue, .btn-dark,
  .ob-btn-blue, .bw-soutien-cta, .nl-form button, .news button) {
  background: var(--bwp-encre); color: #fff; border: 0;
}
html.bw-premium :is(.btn-primary, .btn-green, .btn-vert, .btn-blue, .btn-dark):hover {
  background: var(--bwp-encre); color: #fff;
}
html.bw-premium .btn-outline {
  background: transparent; color: var(--bwp-encre); border: 1px solid var(--bwp-encre);
}
html.bw-premium .btn-outline:hover { background: var(--bwp-encre); color: #fff; border-color: var(--bwp-encre); }
html.bw-premium .btn-light { background: var(--bwp-blanc); color: var(--bwp-encre); border: 0; }

/* Surtitres : le doré, seul accent de couleur du système. */
html.bw-premium :is(.eyebrow, .cz-eyebrow, .hero-pill, .bwm-k, .qc-porte-k,
  .kicker, .tr-etoiles, .niv-declare) { color: var(--bwp-dore); }
/* Sur le sable, le doré tombe à 4,22:1 : sa version foncée reprend 5,6:1. */
html.bw-premium .franc h3 { color: var(--bwp-dore-f); }

/* Étiquettes posées SUR une couverture d'encre : texte blanc, sinon encre
   sur encre. Mesuré à 1,00:1 sur 56 cartes avant correction. */
html.bw-premium :is(.cz-img .cz-cat, .img .cat, .cover-txt .cz-cat, .cover-txt .cat,
  .cz-img .cover-title, .img .cover-title, .cz-soon) { color: #fff; }

/* Petits titres et libellés qui portaient une couleur de cause. */
html.bw-premium :is(.grp-t, .day, .bw-sb-link, .privacy-pill, .privacy-pill span,
  .voie-sur, .ap-goal strong, .partage-det > summary, .bwg-plus) { color: var(--bwp-encre); }
html.bw-premium :is(.dec-src, .qn, .dash-k) { color: var(--bwp-brun); }
/* La couleur de cause est posée EN LIGNE par le script : rien d'autre ne la bat. */
html.bw-premium .bwc-org-cause { color: var(--bwp-brun) !important; }
html.bw-premium .ap-cta-go { color: var(--bwp-encre) !important; }

/* Liens d'action : texte souligné, aucune boîte (le troisième style de la base). */
html.bw-premium :is(.bwm-go, .cz-all, .btn-ghost, .help-band a, .voie-aller,
  .voie .aller, p.fin a, .alt a) { color: var(--bwp-encre); }

/* Bandeaux et aplats sombres posés en dur dans les pages. */
html.bw-premium :is(.site-footer, #bwg-fab, .soon, .cz-soon) {
  background: var(--bwp-encre); color: #fff;
}
html.bw-premium :is(#bwg-sheet, .bwg-panel, .dash-live) { background: var(--bwp-blanc); }

/* La bande de l'infolettre : doré plein, texte blanc (5:1), bouton inversé. */
html.bw-premium .news { background: var(--bwp-dore); color: #fff; }
html.bw-premium :is(.news h2, .news p, .news small) { color: #fff; }
html.bw-premium .news input { border-color: #fff; }
html.bw-premium .news button { background: var(--bwp-blanc); color: var(--bwp-encre); }

/* Étiquettes de maturité des fiches techno : fond de surface, encre, contour. */
html.bw-premium .te-mat {
  background: var(--bwp-blanc); color: var(--bwp-encre); border: 1px solid var(--bwp-trait);
}
/* Pastilles numérotées : encre pleine, texte blanc ; elles restent rondes. */
html.bw-premium :is(.step .n, .steps .n) { background: var(--bwp-encre); color: #fff; }
/* FR/EN des pages sans en-tête (404) : le groupe reste hors de la barre. */
html.bw-premium .lang button.active { background: var(--bwp-encre); color: #fff; }

/* La couleur de thème des guides est posée SUR LA CARTE, pas sur :root : une
   variable déclarée plus bas dans l'arbre gagne sur celle qu'elle hérite. */
html.bw-premium [class*="lh-th-"] { --tc: var(--bwp-dore); }
/* Même mécanique pour les « voies » d'apprendre et les cartes d'impact :
   chaque carte portait sa teinte de rôle. */
html.bw-premium :is([class*="voie-"], [class*="hub-"]) { --role: var(--bwp-dore); }

/* Les trois sections de la barre latérale portaient chacune leur couleur
   (Agir vert, Vivre bleu, À propos orange, demande de Tristan le 9 sept.).
   La palette du 20 sept. n'en garde aucune : elles passent à l'encre, le
   doré marquant la section ouverte. Une ligne à retirer pour revenir. */
html.bw-premium .bw-sb-sec { --bwn-grp: var(--bwp-encre); }

/* Pied des articles : son texte vert pâle (#9DB69A) et son bleu pâle
   (#9AAFC2) étaient écrits en dur, sur un fond devenu encre. */
html.bw-premium .site-footer { color: rgba(255,255,255,.78); }
html.bw-premium .site-footer :is(a, b, strong) { color: #fff; }

/* Encadré « note » des articles : brun écrit en dur sur fond sable. */
html.bw-premium :is(.callout.note, .callout.note p, .callout.note strong) { color: var(--bwp-encre); }

/* Le chrome pose son encre en dur, derrière un sélecteur d'ID. */
html.bw-premium #footer.bw-chrome { background: var(--bwp-encre); }
html.bw-premium #header.bw-chrome .btn-outline {
  border-color: var(--bwp-encre); color: var(--bwp-encre);
}
html.bw-premium #header.bw-chrome .btn-outline:hover { background: var(--bwp-encre); color: #fff; }

/* Le bloc « suite » (fin d'article) déclare ses couleurs SUR LUI-MÊME :
   une variable posée plus bas dans l'arbre gagne sur celle qu'elle hérite. */
html.bw-premium .bw-suite {
  --s-fg: var(--bwp-encre); --s-mut: var(--bwp-brun); --s-line: var(--bwp-trait);
  --s-accent: var(--bwp-dore); --s-card: var(--bwp-blanc);
}
html.bw-premium .bw-soon { border-color: var(--bwp-trait); }

/* Couvertures d'article : un dégradé vert ou bleu posé en style EN LIGNE,
   qu'aucune feuille ne bat autrement. */
html.bw-premium :is(.cz-img, .cover-txt) { background: var(--bwp-encre) !important; }

/* Textes de statistique et d'étape, écrits en dur dans chaque article
   (#33414D pour la famille sociale, #3A4A34 pour la famille environnement). */
html.bw-premium :is(.stat .txt, .step .st-d, .day-t, .grp p) { color: var(--bwp-brun); }

/* Bandeau sombre d'article : ses textes clairs étaient teintés de vert ou de
   bleu pâle. Sur l'encre, ils passent au blanc, à deux niveaux de lecture. */
html.bw-premium .hero .lede { color: rgba(255,255,255,.82); }
html.bw-premium :is(.hero .meta .v, .hero .meta, .hero .kicker) { color: #fff; }
html.bw-premium .site-footer nav a { color: rgba(255,255,255,.78); }
/* La pastille du surtitre portait un fond vert translucide. */
html.bw-premium .hero .eyebrow { background: rgba(255,255,255,.12); }

/* Le © du pied d'article gardait sa teinte pâle, verte ou bleue. */
html.bw-premium .site-footer .copy { color: rgba(255,255,255,.72); }
/* Jauges des guides : une teinte par niveau (rouge, orange, vert). Un seul
   accent suffit, le niveau se lit au remplissage. */
html.bw-premium [class*="lh-j-"] { --gj: var(--bwp-dore); }
/* Pastilles et vignettes teintées : fond sable, texte d'encre. */
html.bw-premium :is(.num, .chip, .reco-img, .bwc-ex) {
  background-color: var(--bwp-sable); color: var(--bwp-encre);
}

/* Texte en dégradé (« BetterWorld » du titre « Faire partie ») : le dégradé
   doré → encre s'éteignait à moitié sur le bandeau sombre. Doré plein,
   3,6:1 sur l'encre, au-dessus du 3:1 exigé pour un titre de cette taille. */
html.bw-premium .grad-text {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: var(--bwp-dore); color: var(--bwp-dore);
}

/* Les halos flous décoratifs sont des ombres qui ne disent pas leur nom,
   et les seules taches de vert et de bleu qui restaient sur ces pages. */
html.bw-premium :is(.glow, .rejoindre-glow, .blog-hero) { background-image: none; }
/* Couvertures colorées des cartes du blogue : dégradés verts, dorés, bleus. */
html.bw-premium :is(.img, .cz-img) { background-image: none !important; background-color: var(--bwp-encre) !important; }


/* ═══ 8. LES 98 AUTRES PAGES INTERNATIONALES (Tristan, 20 septembre) ═══════
   Le pilote ne vit plus sur l'index seul. Tout ce qui suit vient d'une mesure
   sur les pages rendues, pas d'une intuition : 10 569 textes lus sur 99 pages,
   565 sous le seuil de la base avant correction, regroupés par cause. */

/* 8.1 GRANDS TITRES — « Playfair Display : grands titres uniquement ». 97 des
   99 pages gardaient Bricolage sur leur h1. La TAILLE de chaque page ne bouge
   pas : l'échelle de la base vise un dessin neuf, la plaquer sur 98 mises en
   page existantes casserait des colonnes. Familles et graisses seulement. */
html.bw-premium h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.01em;
}
html.bw-premium h2 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.25;
}

/* 8.2 UN SEUL RAYON, AUCUNE OMBRE, PARTOUT — la liste du §6 ne couvrait que
   les composants de l'index. Mesuré ailleurs : 13 px sur les cartes de suite
   d'article, 16 px sur les encadrés, 11, 18, 3 px et des pilules. Le §6 reste :
   il porte des sélecteurs d'ID, que cette règle-ci ne battrait pas.
   Exception, déjà assumée sur l'index : les marqueurs ronds (points, pastilles
   numérotées) restent ronds. Ce sont des marqueurs, pas des angles. */
html.bw-premium *:not(.dot,.bwc-dot,.n,.cat-check,.bwc-org-dot,.bwc-bar-dot) { border-radius: 2px; }
/* L'anneau de focus de certaines pages passe par une ombre : on l'épargne. */
html.bw-premium *:not(:focus-visible) { box-shadow: none; }

/* Quatrième police : interdit n° 1. Deux accents de outil-budget.html étaient
   en Fraunces italique ; avec Playfair, la page portait quatre familles.
   Playfair n'existe qu'en 600 romain sur le domaine, et une italique
   synthétique est un faux : ils passent en Playfair romain. Le sort de
   Fraunces appartient à @MC (elle vit encore sur deux pages de quebec/). */
html.bw-premium :is(.res-tagline, .founder-quote) {
  font-family: 'Playfair Display', Georgia, serif; font-style: normal;
}

/* 8.9 « AUCUN ÉLÉMENT QUI BOUGE SEUL » — quatre pages animaient en boucle :
   pulsation, flottement, miroitement de chargement. Une seule itération plutôt
   qu'une suppression : l'élément retrouve son état normal après un cycle, au
   lieu de rester figé dans une image d'animation. Les apparitions au
   défilement, elles, sont déjà neutralisées (§5, .reveal). */
html.bw-premium * { animation-iteration-count: 1; }


/* ═══ 9. SYMÉTRIE (Tristan, 20 septembre) ══════════════════════════════════
   « Une des parties les plus importantes du premium, c'est la symétrie. »
   Mesuré sur la page rendue avant d'écrire une seule ligne : quatre hauteurs
   de bouton, sept respirations de section, sept gouttières, deux sections qui
   débordaient la colonne des autres, trente couples taille/graisse de texte.
   Le premium ne vient pas d'un ornement de plus : il vient de la répétition
   exacte des mêmes valeurs. */

/* 9.1 UNE SEULE COLONNE. À 1600 px, l'en-tête et la section blogue s'étalaient
   sur 1585 px pendant que le reste de la page tenait dans 1280 : l'œil voyait
   deux pages superposées. Le FOND de l'en-tête reste pleine largeur, son
   contenu rentre dans la colonne commune. */
html.bw-premium :is(#header.bw-chrome, .cz-sec) > .container {
  max-width: var(--bw-max, 1280px);
  margin-left: auto;
  margin-right: auto;
}

/* 9.2 UNE SEULE RESPIRATION. La base : « entre deux sections, au moins 96 ;
   à l'intérieur, 24 ou 40 ». Mesuré avant : 56/68, 54/60, 8/62, 62/62,
   104/104, 0/72. Aucune n'était sur l'échelle, aucune ne valait la suivante. */
/* Le :not(#…) ne filtre rien : il porte la spécificité d'un ID, sans lequel
   cette règle perdait contre les #hero{padding:…} de chaque page. */
html.bw-premium :is(main, body) > section:not(#aucune) { padding-top: 96px; padding-bottom: 96px; }
@media (max-width: 768px) {
  html.bw-premium :is(main, body) > section:not(#aucune) { padding-top: 64px; padding-bottom: 64px; }
}

/* 9.3 DEUX STYLES DE BOUTON, UN STYLE DE LIEN, PAS UN DE PLUS. Mesuré : 44,
   45, 52, 24 et 22 px de haut. Le 45 px était un troisième style, un lien
   enfermé dans une boîte contournée ; la base n'en connaît que deux. Ces
   liens d'action redeviennent ce qu'ils sont : du texte souligné. */
html.bw-premium :is(.bwm-go, .cz-all, .btn-ghost) {
  border: 0; padding: 0; min-height: 0; background: none;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem; font-weight: 500;
  text-transform: none; letter-spacing: 0;
  text-decoration: none;
}
html.bw-premium :is(.bwm-go > span, .cz-all, .btn-ghost) {
  text-decoration: underline; text-underline-offset: 3px;
}

/* 9.4 UNE SEULE ÉCHELLE DE GOUTTIÈRES : 16, 24, 40, rien entre. Mesuré avant :
   8, 10, 11, 12, 14, 16, 22 et 44. */
html.bw-premium :is(.bwc-grid, .bwm-grid, .impliquer-grid, .cz-track) { gap: 24px; }
html.bw-premium :is(.bwc-tiles, .dash-kpis) { gap: 16px; }
html.bw-premium .foot-grid { gap: 40px; }
/* Les deux cartes de droite se partageaient mal la hauteur de la grande
   (426 et 447 px) : à rangées égales, les trois cartes se répondent. */
html.bw-premium .bwm-grid { grid-auto-rows: 1fr; }

/* 9.5 UNE SEULE FAMILLE DE SURTITRES. Mesuré : 10px/700, 12px/600, 12px/800,
   13px/800 selon la section, pour le même rôle. La base n'en donne qu'un :
   Inter 500, 0,875 rem, MAJUSCULES, +0,2em. */
html.bw-premium :is(.eyebrow, .cz-eyebrow, .hero-pill, .bwm-k, .qc-porte-k, .dash-k) {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .875rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .2em;
}

/* 9.6 DES BOÎTES D'ICÔNES DE MÊME TAILLE : 46 px d'un côté, 48 de l'autre,
   pour deux cartes voisines. */
html.bw-premium :is(.bwm-ico, .ico-box) { width: 48px; height: 48px; }

/* 9.7 TROIS CARTES, UNE SEULE LIGNE DE BASE. Mesuré dans « faire partie » :
   la carte produit posait son titre à 384 px du haut de la carte, les deux
   autres à 99, et les trois actions finissaient à 308, 535 et 250. L'image
   carrée de 333 px écrasait le rythme : elle devient une bande, et l'action
   de chaque carte descend au même fond. */
html.bw-premium .impliquer-card { display: flex; flex-direction: column; }
html.bw-premium .impliquer-card > :is(form, .btn) { margin-top: auto; }
/* Deux cartes depuis que la boutique n'y est plus répétée (elle a sa carte
   plus haut) : deux colonnes égales au lieu d'une troisième vide. */
@media (min-width: 769px) {
  html.bw-premium .impliquer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html.bw-premium .imp-img { display: block; overflow: hidden; height: 240px; }
html.bw-premium .imp-img img { width: 100%; height: 240px; object-fit: cover; }

/* 9.8 UN SEUL AXE D'APPUI. Le hero est centré, c'est le moment de la page ;
   tout le reste part de la même colonne, à 28 px du bord. Deux sections sur
   cinq étaient centrées, sans raison qu'une autre section ne partage. */
/* Ces blocs étaient centrés DEUX fois : par le texte, et par un margin auto
   sur un bloc plus étroit que la colonne. Les deux sautent. Le :not(#…) ne
   filtre rien, il porte la spécificité d'un ID : les pages centrent depuis
   des sélecteurs #dashboard .lead, qu'une règle de classe ne bat pas. */
html.bw-premium :is(.dash-head, .rejoindre-inner, .dash-live, .dash-live-actions):not(#aucune),
html.bw-premium :is(.dash-head, .rejoindre-inner) :is(p, .lead):not(#aucune) {
  text-align: left; margin-left: 0; margin-right: auto;
}
html.bw-premium .dash-live-actions:not(#aucune) { justify-content: flex-start; }

/* 9.9 UNE SEULE DISTANCE ENTRE LA TÊTE D'UNE SECTION ET SON CONTENU.
   Mesuré : 0, 24, 26 et 56 px pour le même geste. La base dit 24 ou 40. */
html.bw-premium :is(.bwc-head, .bwm-head, .cz-head, .dash-head) { margin-bottom: 40px; }

/* 9.10 QUATRE CHIFFRES, QUATRE COLONNES ÉGALES : la quatrième débordait sa
   piste de 9 px parce que son contenu était plus large qu'elle. */
html.bw-premium .dash-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 9.11 UNE SEULE RESPIRATION INTÉRIEURE. Mesuré : 44/36, 30/26, 26/28, 22/24,
   18/20 et 14/16 px pour six cartes de la même page. Aucune sur l'échelle,
   aucune égale à sa voisine. La base : 24 à l'intérieur, 40 pour un bloc de
   la taille d'une section. */
html.bw-premium :is(.impliquer-card, .bwm-tx, .bwc-panel, .bwc-argent) { padding: 24px; }
html.bw-premium :is(.dash-live, .qc-porte-c) { padding: 40px; }
html.bw-premium .bwc-tile { padding: 16px; }