/* GÉNÉRÉ par publier.sh depuis ASSEMBLAGE.txt — ne pas éditer */
/*
Theme Name: Respawn
Theme URI: https://petiteblague.fr
Author: Petite Blague
Description: Thème du média geek Petite Blague — consoles & jeux vidéo, accessoires gaming, gadgets high-tech, LEGO & figurines, cadeaux geek, jeux & casse-tête. Mode clair, préfixe CSS pb-.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: respawn
*/

/* ===================== Polices self-hosted (P-086) =====================
   Fichiers attendus dans ../fonts/ (à déposer : Google Fonts Anton + Ysabeau Office).
   Repli système tant que les fichiers ne sont pas présents (rendu correct quand même). */
@font-face{
	font-family:'Anton';
	src:url('../fonts/Anton-Regular.woff2') format('woff2');
	font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
	font-family:'Ysabeau Office';
	src:url('../fonts/YsabeauOffice-Regular.woff2') format('woff2');
	font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
	font-family:'Ysabeau Office';
	src:url('../fonts/YsabeauOffice-Italic.woff2') format('woff2');
	font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
	font-family:'Ysabeau Office';
	src:url('../fonts/YsabeauOffice-Medium.woff2') format('woff2');
	font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
	font-family:'Ysabeau Office';
	src:url('../fonts/YsabeauOffice-Bold.woff2') format('woff2');
	font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
	font-family:'Ysabeau Office';
	src:url('../fonts/YsabeauOffice-ExtraBold.woff2') format('woff2');
	font-weight:800; font-style:normal; font-display:swap;
}

/* ===================== Jetons de design ===================== */
/* Passe 4 (contraste_reel.log light=dark identiques) : respawn n'a PAS de mode sombre (DA —
   « mode clair uniquement ») ; sans ce verrou, un visiteur en navigateur sombre reçoit les
   styles natifs (formulaires, <meter>, scrollbar) du thème sombre du navigateur par-dessus
   un fond clair codé en dur → paires illisibles. */
:root{ color-scheme: light; }

:root{
	/* --- jetons partagés réseau (blocs figés), repris EXACTEMENT comme la DA les fixe --- */
	--sb-accent:#1F4BFF;
	--sb-accent-clair:#E6EBFF;
	--sb-encre:#18192B;
	--sb-doux:#545772;
	--sb-filet:#E2E4EF;
	--sb-fond-carte:#FFFFFF;
	--sb-surf:#F4F5FB;
	--sb-fonce:#18192B;
	--sb-sur-fonce:#FFFFFF;
	--sb-titre:'Anton', Impact, 'Arial Narrow', sans-serif;
	--sb-texte:'Ysabeau Office', system-ui, -apple-system, sans-serif;
	--sb-rayon:18px;
	--sb-rayon-grand:28px;
	--sb-ombre:0 10px 30px -12px rgba(24,25,43,.18);
	--sb-ombre-forte:0 28px 60px -22px rgba(24,25,43,.38);
	--sb-conteneur:1280px;
	--sb-lecture:720px;
	--sb-rail:340px;
	--sb-gouttiere:48px;

	/* --- jetons propres à Petite Blague --- */
	--pb-rose:#FF3E86;
	--pb-rose-texte:#C8125A;
	--pb-citron:#DDF85A;
	--pb-coque:#F4F5FB;
	--pb-bleu-pale:#E6EBFF;
	--pb-rose-pale:#FFE3EE;
	--pb-citron-pale:#F3FCCB;
	--pb-succes:#13804B;
	--pb-alerte:#C8125A;

	--pb-entete-h:72px;
}

/* Mobile 390 : marges 16 px partout (contrainte dure) — --sb-gouttiere valait 48px (jeton
   réseau desktop) et était repris tel quel par endroits sur petit écran (rubrique, article) :
   cause directe du débordement horizontal relevé passe 2. */
@media (max-width: 640px){
	:root{ --sb-gouttiere: 16px; }
}

/* ===================== Reset ===================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
	margin:0; background:var(--pb-coque); color:var(--sb-encre);
	font-family:var(--sb-texte); font-size:17px; line-height:1.6;
	-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }

/* Conteneur du bloc figé (footer/article) — DOIT être global : il n'était chargé que par le
   CSS de l'article (blocs/single-article.css), donc absent sur toutes les autres pages →
   pied de page collé au bord gauche partout ailleurs (retour passe 2). */
.sbt-conteneur{ max-width: var(--sb-conteneur, 1240px); margin-inline: auto; padding-inline: var(--sb-gouttiere, 24px); }
a{ color:inherit; }
ul,ol{ margin:0; padding:0; }
h1,h2,h3,h4{ margin:0; font-family:var(--sb-titre); line-height:.95; font-weight:400; }
p{ margin:0 0 1em; }
button{ font-family:inherit; }

.pb-screen-reader-text{
	position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.pb-skip-lien:focus{
	position:fixed; left:16px; top:16px; z-index:200; background:var(--sb-encre); color:#fff;
	padding:10px 16px; border-radius:999px; width:auto; height:auto; overflow:visible;
}

.pb-conteneur{ max-width:var(--sb-conteneur); margin-inline:auto; padding-inline:16px; }
@media (min-width:1080px){ .pb-conteneur{ padding-inline:48px; } }

.pb-section{ padding-block:56px; }
.pb-section--fond-blanc{ background:#fff; }
.pb-section--fond-coque{ background:var(--pb-coque); }
.pb-section--fond-rose{ background:var(--pb-rose); color:var(--sb-encre); }
.pb-section--fond-encre{ background:var(--sb-encre); color:#fff; }
.pb-section--fond-bleu{ background:var(--sb-accent); color:#fff; }

.pb-kicker{
	font-family:var(--sb-texte); font-weight:700; font-size:.8125rem; letter-spacing:.04em;
	color:var(--sb-doux); margin:0 0 8px;
}
.pb-section--fond-encre .pb-kicker,.pb-section--fond-bleu .pb-kicker,.pb-section--fond-rose .pb-kicker{ color:inherit; opacity:.75; }

.pb-h2{ font-size:clamp(2rem,1.2rem + 2.5vw,2.75rem); margin-bottom:32px; } /* Roxane 05/10 (R4) : titre de section collé aux cartes */
@media (max-width:640px){ .pb-h2{ margin-bottom:22px; } }
.pb-h2-deuxton{ position:relative; }
.pb-bande-citron{
	background:var(--pb-citron); color:var(--sb-encre); padding:0 .12em; display:inline-block;
	transform:rotate(-1deg);
}
.pb-section--fond-encre .pb-bande-citron{ background:var(--pb-citron); color:var(--sb-encre); }

/* ===================== Boutons ===================== */
.pb-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	padding:14px 24px; min-height:48px; border-radius:999px; border:0; cursor:pointer;
	font-family:var(--sb-texte); font-weight:700; font-size:1rem;
	background:var(--sb-accent); color:#fff; text-decoration:none;
	transition:transform .18s ease, box-shadow .18s ease;
}
.pb-btn:hover{ transform:translateY(-2px); box-shadow:var(--sb-ombre); }
.pb-btn:focus-visible{ outline:3px solid var(--sb-encre); outline-offset:2px; }
.pb-btn--pleine{ width:100%; height:56px; font-size:1.0625rem; }
.pb-btn--fantome{ background:transparent; border:1.5px solid var(--sb-filet); color:var(--sb-encre); }
.pb-btn--rose{ background:var(--pb-rose); color:var(--sb-encre); }
.pb-btn--petit{ padding:10px 18px; min-height:36px; font-size:.875rem; }

/* ===================== En-tête ===================== */
.pb-entete{
	position:sticky; top:0; z-index:60; height:var(--pb-entete-h);
	background:#fff; border-bottom:1px solid transparent;
	transition:box-shadow .2s ease, border-color .2s ease;
}
.pb-entete.est-colle{ box-shadow:var(--sb-ombre); border-color:var(--sb-filet); }
.pb-entete-inner{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.pb-logo{ display:flex; align-items:center; gap:8px; text-decoration:none; flex-shrink:0; }
.pb-logo svg{ height:36px; width:auto; }
.pb-nav-principale{ display:none; }
/* Roxane 05/10 (R2) : menu « étriqué » sur 2 lignes → libellés courts sur UNE ligne, chacun
   précédé de son picto maison dans une pastille à la couleur de la rubrique. */
@media (min-width:1080px){
	.pb-nav-principale{ display:flex; gap:4px; flex:1; justify-content:center; align-items:center; }
	.pb-nav-lien{
		display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
		padding:6px 12px 6px 6px; border-radius:999px; text-decoration:none; color:var(--sb-encre);
		font-weight:700; font-size:.9375rem; line-height:1; position:relative;
		transition:background-color .18s ease;
	}
	.pb-nav-ico{
		display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex-shrink:0;
		border-radius:11px; background:var(--pb-bleu-pale); color:var(--sb-accent);
		transition:transform .2s cubic-bezier(.34,1.56,.64,1);
	}
	.pb-nav-lien--rose .pb-nav-ico{ background:var(--pb-rose-pale); color:var(--pb-rose-texte); }
	.pb-nav-lien--citron .pb-nav-ico{ background:var(--pb-citron-pale); color:#5B6B00; }
	.pb-ico{ width:21px; height:21px; }
	.pb-ico .pb-ico-plein{ fill:currentColor; }
	.pb-nav-lien:hover{ background:var(--pb-coque); }
	.pb-nav-lien:hover .pb-nav-ico{ transform:rotate(-8deg) scale(1.08); }
	.pb-nav-lien:focus-visible{ outline:3px solid var(--sb-accent); outline-offset:2px; }
	.pb-nav-lien.est-courant{ background:var(--pb-coque); }
	.pb-nav-lien.est-courant::after{ content:""; position:absolute; left:46px; right:14px; bottom:1px; height:3px; border-radius:3px; background:var(--pb-rose); }
}
@media (min-width:1080px) and (max-width:1279px){
	.pb-nav-lien{ padding-right:8px; gap:6px; font-size:.875rem; }
}
.pb-entete-actions{ display:flex; align-items:center; gap:12px; }
.pb-entete-actions .pb-btn{ display:none; white-space:nowrap; }
@media (min-width:1080px){ .pb-entete-actions .pb-btn{ display:inline-flex; } }
.pb-menu-toggle{
	display:flex; align-items:center; justify-content:center; width:44px; height:44px;
	border-radius:12px; border:1px solid var(--sb-filet); background:#fff; cursor:pointer;
}
@media (min-width:1080px){ .pb-menu-toggle{ display:none; } }
.pb-menu-toggle svg{ width:22px; height:22px; }

.pb-menu-mobile{
	position:fixed; inset:var(--pb-entete-h) 0 0 0; z-index:59; background:#fff; overflow-y:auto;
	transform:translateY(-8px); opacity:0; visibility:hidden; transition:opacity .2s ease, transform .2s ease;
	padding:20px 16px 40px;
}
.pb-menu-mobile.est-ouvert{ opacity:1; visibility:visible; transform:translateY(0); }
.pb-menu-tuiles{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pb-menu-tuile{
	position:relative; border-radius:var(--sb-rayon); overflow:hidden; aspect-ratio:1.1/1;
	text-decoration:none; color:#fff; display:flex; align-items:flex-end; padding:14px;
	font-family:var(--sb-titre); font-size:1.125rem;
}
.pb-menu-tuile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.pb-menu-tuile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(24,25,43,0) 40%,rgba(24,25,43,.75)); }
.pb-menu-tuile span{ position:relative; z-index:1; }
.pb-menu-mobile .pb-btn{ margin-top:20px; width:100%; }

/* ===================== Grilles & cartes génériques ===================== */
.pb-grille{ display:grid; gap:32px; }
.pb-grille--2{ grid-template-columns:repeat(2,1fr); }
.pb-grille--3{ grid-template-columns:repeat(3,1fr); }
.pb-grille--4{ grid-template-columns:repeat(4,1fr); }
.pb-grille--6{ grid-template-columns:repeat(6,1fr); }
@media (max-width:1080px){ .pb-grille--3,.pb-grille--4,.pb-grille--6{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .pb-grille--2,.pb-grille--3,.pb-grille--4,.pb-grille--6{ grid-template-columns:1fr; } }

/* Passe 5 : dernière ligne incomplète d'une grille à 3 colonnes → la carte seule prend toute
   la largeur, les deux cartes restantes se répartissent la largeur (jamais de case vide,
   JUGEMENT-VISUEL points 15/8). Ne joue qu'au-delà du mobile (où .pb-grille--3 passe à 1fr). */
@media (min-width: 641px){
	.pb-grille--3 > :last-child:nth-child(3n+1){ grid-column: 1 / -1; display:flex; flex-direction:row; align-items:stretch; }
	.pb-grille--3 > :last-child:nth-child(3n+1) .pb-carte-photo{ flex:0 0 clamp(280px,40vh,420px); aspect-ratio:auto; }
	.pb-grille--3 > :last-child:nth-child(3n+1) .pb-carte-corps{ flex:1; display:flex; flex-direction:column; justify-content:center; }
	/* Roxane 05/10 (R3) : l'ancien sélecteur :nth-last-child(2):nth-child(3n+2) visait aussi la 2ᵉ
	   carte d'une grille de 3 → carte étirée sur 2 colonnes, 3ᵉ rejetée seule avec un trou blanc. */
	.pb-grille--3 > :last-child:nth-child(3n+2){ grid-column: span 2; }
}
@media (max-width: 640px){
	.pb-grille--3 > :last-child:nth-child(3n+1){ display:flex; flex-direction:column; }
}
@media (min-width: 641px) and (max-width: 1080px){
	/* à ce palier .pb-grille--3 passe déjà à 2 colonnes (règle plus haut) : 1 orpheline → pleine largeur. */
	.pb-grille--3 > :last-child:nth-child(odd){ grid-column: 1 / -1; }
}

/* Passe 6 (JUGEMENT-VISUEL §5/P5) : en display:block, un .pb-carte étiré par la grille (rangée
   stretchée par un voisin plus haut) laissait l'excédent de hauteur en blanc APRÈS le texte —
   « carte à moitié blanche ». En colonne flex, c'est la PHOTO (flex:1) qui absorbe l'excédent,
   jamais le texte (qui reste flex:0 0 auto, taille naturelle). */
.pb-carte{
	background:var(--sb-fond-carte); border-radius:var(--sb-rayon); box-shadow:var(--sb-ombre);
	overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; height:100%;
	transition:transform .2s ease, box-shadow .2s ease;
}
.pb-carte:hover{ transform:translateY(-4px); box-shadow:var(--sb-ombre-forte); }
.pb-carte-photo{ aspect-ratio:16/10; overflow:hidden; flex:1 1 auto; min-height:0; }
.pb-carte-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; display:block; }
.pb-carte:hover .pb-carte-photo img{ transform:scale(1.03); }
.pb-carte-corps{ padding:18px 20px 20px; flex:0 0 auto; }
.pb-carte-corps h3{ font-family:var(--sb-texte); font-weight:800; font-size:1.3125rem; line-height:1.2; margin-bottom:8px; }
.pb-carte-chapo{ font-size:.9375rem; color:var(--sb-doux); margin:0; }

.pb-pastille{
	display:inline-block; font-size:.8125rem; font-weight:700; padding:4px 12px; border-radius:999px;
	text-decoration:none;
}
.pb-pastille--bleu{ background:var(--pb-bleu-pale); color:var(--sb-accent); }
.pb-pastille--rose{ background:var(--pb-rose-pale); color:var(--pb-rose-texte); }
.pb-pastille--citron{ background:var(--pb-citron-pale); color:var(--sb-encre); }

/* Pilule générique (réutilisée par la fiche auteur — DA §10) */
.pb-pilule{
	display:inline-block; font-size:.8125rem; font-weight:700; padding:6px 14px; border-radius:999px;
	background:#fff; border:1.5px solid var(--sb-filet); color:var(--sb-encre);
}
.pb-pilule--pleine{ background:var(--sb-accent); border-color:var(--sb-accent); color:#fff; }

/* ===================== Fiche auteur — bandeau de couleur (passe 5, DA §10 point 19) =====================
   JUGEMENT-VISUEL point 19 : « une petite photo ronde et 4 lignes de texte, sans bandeau,
   sans spécialités ni chiffres. » Mise au niveau de l'en-tête de rubrique : bandeau coloré,
   grande photo, pilules de spécialité, compteurs réels. */
.pb-auteur-bandeau{ padding-block: 48px 40px; }
.pb-auteur-bandeau--bleu{ background: var(--pb-bleu-pale); }
.pb-auteur-bandeau--rose{ background: var(--pb-rose-pale); }
.pb-auteur-bandeau--citron{ background: var(--pb-citron-pale); }
.pb-auteur-bandeau-inner{ display:flex; gap:28px; align-items:center; flex-wrap:wrap; }
.pb-auteur-bandeau-inner > div{ flex:1 1 340px; min-width:0; }
.pb-auteur-grande-photo{ width:140px; height:140px; border-radius:50%; object-fit:cover; border:6px solid #fff; box-shadow:var(--sb-ombre-forte); flex-shrink:0; }
.pb-auteur-bandeau h1{ margin-bottom:10px; }
.pb-auteur-pilules{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.pb-auteur-chiffres{ display:flex; gap:28px; margin-top:16px; }
.pb-auteur-chiffres strong{ display:block; font-family:var(--sb-texte); font-weight:800; font-size:1.75rem; font-variant-numeric:tabular-nums; }
.pb-auteur-chiffres span{ font-size:.8125rem; color:var(--sb-doux); }
@media (max-width:640px){ .pb-auteur-grande-photo{ width:96px; height:96px; } }

/* Étiquette-prix en étoile (un seul par écran — SVG étoile 14 pointes en fond) */
.pb-etoile{
	position:absolute; z-index:5; display:inline-flex; align-items:center; justify-content:center;
	width:96px; height:96px; transform:rotate(-8deg); text-align:center;
	font-family:var(--sb-texte); font-weight:800; font-size:.8125rem; line-height:1.15; color:var(--sb-encre);
	padding:8px; filter:drop-shadow(0 6px 14px rgba(24,25,43,.25));
}
.pb-etoile svg{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; }
/* Passe 4 (RE-0237, 2.89:1) : le SVG seul (silhouette d'étoile) laissait passer le fond de la
   section à ses pointes/coins → contraste mesuré sur le fond, pas sur le citron. Un disque
   plein en vrai `background` derrière, bordé à la forme de l'étoile, garantit un aplat
   uniforme sous tout le texte. */
.pb-etoile--citron{ background:var(--pb-citron); border-radius:50%; }
.pb-etoile--citron svg path{ fill:var(--pb-citron); }
.pb-etoile--rose{ background:var(--pb-rose); border-radius:50%; }
.pb-etoile--rose svg path{ fill:var(--pb-rose); }

/* Blister (dos de carton + bulle + trou d'accroche) */
.pb-blister{ position:relative; }
.pb-blister-carton{
	position:relative; border-radius:var(--sb-rayon-grand); padding:20px; background:var(--pb-rose);
	display:flex; flex-direction:column; align-items:center; min-height:280px;
}
.pb-blister-trou{ width:28px; height:28px; border-radius:50%; background:var(--pb-coque); box-shadow:inset 0 2px 6px rgba(0,0,0,.2); margin-bottom:12px; }
/* Passe 3 : `height:100%` sur l'image + `flex:1` sur un parent de hauteur NON définie (le
   carton ne fixe qu'un min-height) résolvait en `auto` → l'image carrée 640×640 s'affichait à
   sa hauteur intrinsèque (~390px mobile), explosant le hero sous le pli. La hauteur de la
   bulle vient maintenant d'un aspect-ratio sur une largeur, elle, toujours définie. */
.pb-blister-bulle{
	position:relative; width:92%; aspect-ratio:1/1; background:rgba(255,255,255,.94); border:6px solid #fff;
	border-radius:50% / 40%; overflow:hidden; box-shadow:var(--sb-ombre-forte);
}
.pb-blister-bulle::after{
	content:""; position:absolute; inset:0; background:linear-gradient(115deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 35%);
}
.pb-blister-bulle img{ width:100%; height:100%; object-fit:cover; }
.pb-blister--reduit .pb-blister-carton{ min-height:210px; padding:16px; }

/* Encoche superposée (profondeur) */
.pb-aplat-decale{ position:relative; }
.pb-aplat-decale::before{
	content:""; position:absolute; top:12px; left:12px; right:0; bottom:-12px; /* jamais au-delà du bord droit : débordement 12 px à 390 (sb-sortie 03/10) */ z-index:-1;
	border-radius:var(--sb-rayon-grand); background:var(--pb-citron-pale);
}

/* Animations */
@keyframes pb-tomber{ from{ transform:translateY(-24px) rotate(-2deg); opacity:0; } to{ transform:translateY(0) rotate(0); opacity:1; } }
@keyframes pb-tampon{ from{ transform:scale(1.3) rotate(-8deg); opacity:0; } to{ transform:scale(1) rotate(-8deg); opacity:1; } }
.pb-anim-tomber{ animation:pb-tomber .6s ease-out both; }
.pb-anim-tampon{ animation:pb-tampon .18s ease-out .5s both; }
.pb-apparition{ opacity:0; transform:translateY(12px); transition:opacity .3s ease, transform .3s ease; }
.pb-apparition.est-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
	.pb-anim-tomber,.pb-anim-tampon{ animation:none; }
	.pb-apparition{ opacity:1; transform:none; transition:none; }
}

/* Point "nouveau" (<24h) qui pulse */
.pb-point-pulse{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--pb-rose); }
@media (prefers-reduced-motion: no-preference){
	.pb-point-pulse{ animation:pb-pulse 1.8s ease-in-out infinite; }
}
@keyframes pb-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* ===================== Infographies du socle (habillage) ===================== */
/* Passe 2 : rendu trop gris/terne → fond teinté par rubrique-agnostique (bleu pâle), bordure
   gauche de couleur, <meter> stylé (sans pseudo-éléments, le bouton n'avait qu'un accent-color
   qui ne fait presque rien sur <meter> dans Chromium). */
sbs-jauges,sbs-tarifs,sbs-frise,sbs-lieu{
	display:block; margin:1.4em 0; padding:26px 28px; border-radius:var(--sb-rayon-grand);
	background:var(--pb-bleu-pale); border-left:4px solid var(--sb-accent);
}
.sbs_jauges_titre,.sbs_tarifs_titre,.sbs_frise_titre,.sbs_lieu_nom{
	display:block; font-family:var(--sb-titre); font-size:1.375rem; margin-bottom:16px; color:var(--sb-encre);
}
sbs-jauges{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:20px; }
sbs-jauge{ display:flex; flex-direction:column; align-items:flex-start; background:#fff; border-radius:14px; padding:14px 16px; }
.sbs_jauge_valeur{
	font-family:var(--sb-texte); font-weight:800; font-size:2.5rem; font-variant-numeric:tabular-nums;
	color:var(--sb-accent);
}
.sbs_jauge_libelle{ order:-1; color:var(--sb-doux); font-size:.8125rem; margin-bottom:4px; }
.sbs_jauge_unite{ color:var(--sb-doux); font-size:.875rem; }
sbs-tarif{ display:flex; align-items:center; gap:12px; margin-bottom:12px; background:#fff; border-radius:12px; padding:10px 14px; }
.sbs_tarif_libelle{ width:40%; flex-shrink:0; color:var(--sb-encre); font-weight:600; }
.sbs_tarif_barre{ flex:1; width:100%; height:22px; -webkit-appearance:none; appearance:none; border:0; }
.sbs_tarif_barre::-webkit-meter-bar{ background:var(--sb-filet); border:0; border-radius:999px; height:22px; }
.sbs_tarif_barre::-webkit-meter-optimum-value{ background:var(--pb-rose); border-radius:999px; }
.sbs_tarif_barre::-moz-meter-bar{ background:var(--pb-rose); border-radius:999px; }
sbs-etape{ display:flex; gap:16px; padding-block:10px; border-left:2px solid var(--sb-accent); padding-left:16px; margin-left:4px; background:#fff; border-radius:0 12px 12px 0; margin-bottom:8px; }
.sbs_etape_date{ font-weight:700; color:var(--sb-accent); white-space:nowrap; }
.sbs_etape_titre{ display:block; color:var(--sb-encre); }
.sbs_etape_desc{ color:var(--sb-doux); }
.sbs_lieu_adresse,.sbs_lieu_acces{ display:block; color:var(--sb-doux); margin-top:4px; }
.sbs_lieu_carte{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; color:var(--sb-accent); font-weight:600; text-decoration:none; }
.sbs_icone_repere{ fill:currentColor; }
sbs-jauges > small:last-child,sbs-tarifs > small:last-child,sbs-frise > small:last-child{
	display:block; margin-top:14px; color:var(--sb-doux); font-size:.78125rem;
}

/* ===================== Listes/tableaux du corps convertis en tuiles (jamais de puces/tableau) =====================
   Passe 4 (R-0032 bis) : débordement constant de 12px (= le gap) sur les articles qui ont une
   vraie <ul>/<table> dans leur contenu (casse-tete-adulte-meilleurs, cadeau-homme-geek,
   casque-gaming-comment-choisir), À TOUTES les largeurs → signature d'un piège connu de
   `repeat(auto-fit, minmax(220px,1fr))` : le plancher fixe de 220px peut dépasser la largeur
   réelle de la colonne (`minmax(min(220px,100%),1fr)` est le correctif standard), et les
   paires libellé/valeur d'un tableau large ne cassaient pas la ligne (texte insécable). */
/* Passe 6 (JUGEMENT-VISUEL §5 point 7) : grid auto-fit laissait une tuile seule, plus petite,
   échouée sur sa propre ligne (« casse-tête en chiffres », « résumé et choix rapide »). En
   flex-wrap, chaque ligne distribue l'espace restant entre SES items : plus jamais d'orpheline
   étroite ni de trou — une tuile seule sur sa ligne prend toute la largeur. */
.pb-liste-tuiles:not(.pb-liste-tuiles--table){
	display:flex; flex-wrap:wrap; gap:12px; margin:1.4em 0; max-width:100%; overflow-x:hidden;
}
.pb-liste-tuiles:not(.pb-liste-tuiles--table) .pb-liste-tuile{ flex:1 1 220px; }
.pb-liste-tuile{
	background:#fff; border:1px solid var(--sb-filet); border-radius:14px; padding:14px 16px; /* fond = fond de page avant (R12/R13) */
	font-size:1.0625rem; line-height:1.55; color:var(--sb-encre); max-width:100%; overflow-wrap:anywhere;
}
.pb-liste-tuiles--table{ display:grid; grid-template-columns:1fr; }
.pb-liste-tuile--ligne{ display:flex; flex-wrap:wrap; gap:16px; align-items:baseline; max-width:100%; }
.pb-liste-tuile-paire{ display:flex; flex-direction:column; gap:2px; min-width:0; max-width:100%; }
.pb-liste-tuile-paire small{ color:var(--sb-doux); font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; }
.pb-liste-tuile-paire strong{ font-family:var(--sb-texte); font-weight:700; overflow-wrap:anywhere; word-break:break-word; }

/* ===================== Sommaire : carte unique en tête de corps (plus dans le rail) ===================== */
.pb-sommaire-carte{ margin-bottom:28px; }

/* Rythme vertical resserré (corps d'article) — passe 2 : vides > 100px entre paragraphe et
   intertitre constatés (encadré 2em + h2 2.2em s'additionnaient sans se fondre). */
.sbt-article-corps h2{ margin-top:1.5em !important; margin-bottom:.6em; }
.sbt-article-corps h3{ margin-top:1.2em !important; }
.sbt-encadre{ margin-block:1.4em !important; }
.sbt-faq{ margin:1.6em 0 !important; }

/* ===================== Pied de page (variables du bloc figé) ===================== */
/* footer.css (blocs figés) importe déjà la structure ; ici uniquement les teintes propres au site */
.sbt-footer{ background:var(--sb-fonce); }
.sbt-footer-logo::before{
	content:""; display:inline-block; width:0;
}
/* Passe 4 (RE-0237, 3.60:1) : `.sbt-footer a{color:#c4c7e4}` (blocs/footer.css, couleur en
   dur) bat `.sbt-btn{color:#fff}` en spécificité (classe+type > classe seule) → le bouton
   « Nous écrire » s'affichait gris-mauve sur bleu accent au lieu de blanc. */
.sbt-footer .sbt-btn{ color:#fff !important; }

/* ===================== Bandeau cookies — compact (passe 2 : recouvrait la carte formulaire) =====
   Les 2 boutons restent de même poids (.sbt-btn / .sbt-btn--petit, héritage du bloc figé) —
   seule la TAILLE/POSITION du bandeau change ici, jamais sa structure. */
.sbt-cookies{
	left:16px; right:auto; bottom:16px; max-width:300px; flex-direction:column; align-items:stretch;
	gap:10px; padding:14px 16px; max-height:none; border-radius:16px;
}
.sbt-cookies-actions{ justify-content:flex-end; }
@media (max-width:760px){
	.sbt-cookies{ left:8px; right:8px; bottom:8px; max-width:none; flex-direction:row; align-items:center; padding:8px 10px; border-radius:12px; }
}

/* ===================== Tuiles chiffres : la date ne porte pas la même taille géante que les nombres ===================== */
.pb-stat-date,.pb-chiffre-tuile--date{ font-size:1.5rem !important; }

/* Logo (04/10) : symbole SVG unique (= favicon) + nom en Anton réel — une image SVG ne charge pas les polices du site. */
.pb-logo, .sbt-footer-logo{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.pb-logo-symbole{ display:block; flex:none; }
.pb-logo-texte{ font-family:'Anton', Impact, sans-serif; font-size:28px; line-height:1; letter-spacing:-.01em; color:var(--sb-encre, #18192B); text-transform:lowercase; white-space:nowrap; }
.pb-logo-texte--blanc{ color:#fff; }
@media (max-width:640px){ .pb-logo-texte{ font-size:24px; } }
.pb-entete .pb-logo{ flex:0 1 auto; width:auto; min-width:0; max-width:calc(100% - 60px); }

/* BLOC FIGÉ — SOMMAIRE (thématique) — copié tel quel (health-nutrition-cambrai.fr). */
.sbt-sommaire{
	background: var(--sb-fond-carte, #ffffff); border: 1px solid var(--sb-filet, #e2e5ef);
	border-left: 4px solid var(--sb-accent, #2563eb); border-radius: var(--sb-rayon, 14px);
	padding: 16px 20px;
}
.sbt-sommaire-titre{
	font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-weight: 700;
	font-size: .9375rem; cursor: pointer; list-style: none;
}
.sbt-sommaire-titre::-webkit-details-marker{ display: none; }
.sbt-sommaire ol{ list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sbt-sommaire li a{
	display: flex; align-items: baseline; gap: 10px; font-size: .9375rem;
	color: var(--sb-encre, #0f172a); text-decoration: none;
}
.sbt-sommaire li a:hover{ color: var(--sb-accent, #2563eb); text-decoration: underline; }
.sbt-sommaire-num{
	font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-weight: 700; font-size: .75rem;
	color: var(--sb-encre, #0f172a); background: var(--sb-surf, #f4f5fa); border-radius: 50%;
	width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}

/* BLOC FIGÉ — BARRE LATÉRALE D'ARTICLE (thématique) — copié tel quel (curieux-du-web.com). */
.sbt-rail{
	position: sticky; top: 96px; align-self: start;
	display: flex; flex-direction: column; gap: 20px;
	border-left: 1px solid var(--sb-filet, #e2e5ef); padding-left: 20px;
}
.sbt-rail-carte{
	background: var(--sb-fond-carte, #ffffff); border: 1px solid var(--sb-filet, #e2e5ef);
	border-radius: var(--sb-rayon, 14px); padding: 18px;
}
.sbt-rail-carte .sbt-t4, .sbt-rail-carte h4{
	font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-size: .875rem;
	text-transform: uppercase; letter-spacing: .04em; color: var(--sb-doux, #55607a); margin: 0 0 10px;
}
@media (max-width: 1080px){
	.sbt-rail{ position: static; border-left: 0; padding-left: 0; border-top: 1px solid var(--sb-filet, #e2e5ef); padding-top: 20px; }
}

/* BLOC FIGÉ — ENCADRÉS (thématique) — copié tel quel (amatauto.fr). */
.sbt-encadre{ margin-block: 2em; border-radius: var(--sb-rayon-grand, 22px); }
.sbt-encadre-titre{
	margin: 0 0 12px; font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif);
	font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em;
}
.sbt-encadre--retenir{
	background: var(--sb-fonce, #141733); color: var(--sb-sur-fonce, #ffffff);
	padding: 28px 30px;
}
.sbt-encadre--retenir .sbt-encadre-titre{ color: var(--sb-accent-clair, #93c5fd); }
.sbt-retenir-liste{ list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sbt-retenir-liste li{ position: relative; padding-left: 32px; font-size: 1rem; line-height: 1.55; }
.sbt-retenir-liste li::before{
	content: ""; position: absolute; left: 0; top: .15em; width: 20px; height: 20px; border-radius: 50%;
	background: var(--sb-accent, #2563eb)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")
		center / 12px no-repeat;
}
/* Roxane 05/10 (R12) : « Le saviez-vous est buggé : il n'y a pas de fond derrière » — son fond
   (--sb-surf #F4F5FB) était exactement celui de la page. Carte blanche franche, contour encre,
   ombre décalée citron (grammaire « autocollant » du site), pastille « ? » rose. */
.sbt-encadre--saviez{
	display: grid; grid-template-columns: 52px 1fr; gap: 6px 18px; align-items: start;
	padding: 24px 26px; background: #fff; border: 2px solid var(--sb-encre);
	box-shadow: 7px 7px 0 var(--pb-citron); border-radius: 22px;
}
.sbt-encadre--saviez::before{
	content: "?"; grid-row: 1 / span 2; width: 52px; height: 52px; border-radius: 16px; transform: rotate(-6deg);
	background: var(--pb-rose); color: var(--sb-encre); display: flex; align-items: center; justify-content: center;
	font-family: var(--sb-titre); font-size: 1.75rem;
}
.sbt-encadre--saviez .sbt-encadre-titre{ grid-column: 2; margin: 0; color: var(--pb-rose-texte); font-family: var(--sb-titre); font-weight: 400; font-size: 1.375rem; letter-spacing: .01em; text-transform: none; }
.sbt-encadre--saviez p:not(.sbt-encadre-titre){ grid-column: 2; margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--sb-encre); }
@media (max-width: 620px){
	.sbt-encadre--saviez{ grid-template-columns: 1fr; }
	.sbt-encadre--saviez::before{ grid-row: 1; }
	.sbt-encadre--saviez .sbt-encadre-titre, .sbt-encadre--saviez p:not(.sbt-encadre-titre){ grid-column: 1; }
}

/* BLOC FIGÉ — FAQ EN ACCORDÉON (thématique) — copié tel quel (visuel solutionminceur.fr). */
.sbt-faq{ margin: 56px 0; padding: 30px; border-radius: var(--sb-rayon-grand, 22px); background: var(--sb-surf, #f4f5fa); border: 1px solid var(--sb-filet, #e2e5ef); }
.sbt-faq-liste{ display: grid; gap: 10px; }
.sbt-faq-liste details{
	background: var(--sb-fond-carte, #ffffff); border: 1px solid var(--sb-filet, #e2e5ef) !important;
	border-radius: 14px; padding: 0 !important; transition: box-shadow .25s ease, border-color .25s ease;
}
.sbt-faq-liste details[open]{ box-shadow: var(--sb-ombre, 0 8px 24px rgba(15,23,42,.08)); border-color: var(--sb-accent, #2563eb) !important; }
.sbt-faq-liste summary{
	list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
	gap: 18px; padding: 18px 20px; font-size: 1.03rem; font-weight: 600; line-height: 1.45; color: var(--sb-encre, #0f172a);
}
.sbt-faq-liste summary::-webkit-details-marker{ display: none; }
.sbt-faq-liste summary::after{
	content: ""; width: 30px; height: 30px; flex: none; border-radius: 50%;
	background: var(--sb-surf, #f4f5fa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 15px no-repeat;
	transition: transform .3s ease;
}
.sbt-faq-liste details[open] summary::after{ transform: rotate(135deg); }
.sbt-faq-liste summary:hover{ color: var(--sb-accent, #2563eb); }
.sbt-faq-reponse{ padding: 0 20px 18px; font-size: .96875rem; line-height: 1.75; color: var(--sb-doux, #55607a); }
.sbt-faq-reponse p{ margin: 0 0 14px; }
.sbt-faq-reponse p:last-child{ margin-bottom: 0; }
@media (max-width: 760px){ .sbt-faq{ padding: 20px; } }

/* BLOC FIGÉ — SIGNATURE / BOÎTE AUTEUR (thématique) — copié tel quel (visuel solutionminceur.fr). */
.sbt-auteur{
	display: grid; grid-template-columns: 120px 1fr; gap: 26px; margin: 54px 0 10px;
	padding: 30px; border-radius: var(--sb-rayon-grand, 22px);
	background: var(--sb-surf, #f4f5fa); border: 1px solid var(--sb-filet, #e2e5ef);
}
.sbt-auteur-photo img{
	width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
	box-shadow: 0 0 0 5px var(--sb-fond-carte, #ffffff), var(--sb-ombre, 0 8px 24px rgba(15,23,42,.08));
}
.sbt-auteur-sur{ margin: 0 0 2px; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sb-doux, #55607a); }
.sbt-auteur-nom{ font-size: 1.5rem; margin: 0 0 4px; font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); }
.sbt-auteur-nom a{ color: var(--sb-encre, #0f172a); text-decoration: none; }
.sbt-auteur-nom a:hover{ text-decoration: underline; }
.sbt-auteur-role{ margin: 0 0 12px; font-size: .8125rem; font-weight: 600; color: var(--sb-accent, #2563eb); text-transform: uppercase; letter-spacing: .05em; }
.sbt-auteur-bio{ font-size: .96875rem; line-height: 1.7; color: var(--sb-encre, #0f172a); margin: 0 0 16px; }
.sbt-auteur-chiffres{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sbt-auteur-chiffres span{ background: var(--sb-fond-carte, #ffffff); border-radius: 12px; padding: 8px 12px; font-size: .78125rem; color: var(--sb-doux, #55607a); }
.sbt-auteur-chiffres b{ color: var(--sb-encre, #0f172a); margin-right: 4px; }
.sbt-auteur-der{ margin-bottom: 18px; }
.sbt-auteur-der p{ margin: 0 0 6px; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sb-doux, #55607a); }
.sbt-auteur-der a{ display: block; font-size: .9375rem; font-weight: 500; padding: 6px 0; color: var(--sb-encre, #0f172a); text-decoration: none; border-bottom: 1px dashed var(--sb-filet, #e2e5ef); }
.sbt-auteur-der a:hover{ color: var(--sb-accent, #2563eb); }
.sbt-auteur-actions{ display: flex; flex-wrap: wrap; gap: 10px; }
.sbt-auteur-actions .sbt-btn{
	display: inline-block; padding: 10px 18px; border-radius: 999px; font-size: .875rem; font-weight: 600;
	text-decoration: none; background: var(--sb-accent, #2563eb); color: #fff;
}
.sbt-auteur-actions .sbt-btn--fantome{ background: transparent; border: 1.5px solid var(--sb-filet, #e2e5ef); color: var(--sb-encre, #0f172a); }
@media (max-width: 700px){
	.sbt-auteur{ grid-template-columns: 1fr; padding: 22px; }
	.sbt-auteur-photo img{ width: 88px; height: 88px; }
}

/* BLOC FIGÉ — ARTICLE (thématique) — copié tel quel (curieux-du-web.com), hors
   .sbt-article-entete/.sbt-article-une (remplacés par l'entête libre, cf. assets/css/entete-article.css). */
.sbt-conteneur{ max-width: var(--sb-conteneur, 1240px); margin-inline: auto; padding-inline: var(--sb-gouttiere, 24px); }
.sbt-fil-ariane{ font-size: .8125rem; color: var(--sb-doux, #55607a); display: flex; gap: 6px; flex-wrap: wrap; padding-block: 8px; }
.sbt-fil-ariane a{ color: var(--sb-doux, #55607a); text-decoration: none; }
.sbt-fil-ariane a:hover{ color: var(--sb-encre, #0f172a); }
.sbt-article-meta{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; font-size: .875rem; color: var(--sb-doux, #55607a); }
.sbt-article-meta img{ width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.sbt-article-meta-auteur{ color: inherit; font-weight: 700; text-decoration: none; }

.sbt-article-mise-en-page{
	display: grid; grid-template-columns: minmax(0, var(--sb-lecture, 720px)) var(--sb-rail, 340px);
	column-gap: var(--sb-gouttiere, 24px); row-gap: var(--sb-gouttiere, 24px);
	max-width: var(--sb-conteneur, 1240px); margin-inline: auto;
	padding: 8px var(--sb-gouttiere, 24px) 112px; align-items: start; justify-content: center; /* Roxane 05/10 (R5) : fin d'article collée au pied de page */
}
@media (max-width: 1080px){ .sbt-article-mise-en-page{ grid-template-columns: 1fr; } }
/* Passe 5 : « À lire aussi » héritait du gabarit à 2 colonnes (texte 720px + rail 340px) alors
   que le rail n'est plus rendu dans ce bloc → les 3 cartes restaient coincées dans la seule
   colonne de lecture (JUGEMENT-VISUEL point 5 : « occupent la moitié gauche de la page »).
   Pleine largeur du conteneur, sur un fond teinté comme demandé par la DA §8. */
.sbt-article-mise-en-page--suite{ padding-top: 0; grid-template-columns: 1fr; max-width: var(--sb-conteneur, 1240px); }
.sbt-article-mise-en-page--suite .sbt-article-principal{ max-width: none; }
.sbt-a-lire{ background: var(--sb-surf); border-top: 0; border-radius: var(--sb-rayon-grand, 28px); padding: 32px clamp(20px,4vw,40px); margin-top: 0; }

.sbt-article-corps{ font-size: 1.1875rem; line-height: 1.72; /* Roxane 05/10 (R13) : +2 px */ color: var(--sb-encre, #0f172a); font-family: var(--sb-texte, 'Inter', system-ui, sans-serif); counter-reset: pbh2; }
.sbt-article-corps h3{ margin-top: 1.8em; font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); }
.sbt-article-corps p{ margin-bottom: 1.5em; }
/* Image de corps (hors fiche produit) : traitée comme un petit blister (cadre blanc + ombre),
   jamais une image nue qui ajoute au mur de texte (JUGEMENT-VISUEL « murs de texte gris »). */
.sbt-article-corps img{ border-radius: 16px; margin-block: 1.8em; width: 100%; height: auto; border: 8px solid #fff; box-shadow: var(--sb-ombre-forte, 0 20px 40px rgba(24,25,43,.2)); }

/* Passe 6 : intertitres « vrais repères » — numéro rond + filet épais de la couleur de la
   rubrique. Le sélecteur `>` exclut les H2 déjà pris en charge par .pb-fiche-produit-corps
   (nichés plus bas) : ils gardent leur propre numéro géant + pastille « Choix n°X ». */
.sbt-article-corps > h2{
	display:flex; align-items:center; gap:16px; margin-top:2.4em !important; margin-bottom:.7em;
	padding-top:24px; border-top:4px solid var(--sb-filet); font-size:clamp(1.625rem,1.2rem+1.4vw,2.25rem);
}
.sbt-article-corps > h2::before{
	counter-increment: pbh2; content: counter(pbh2); flex:0 0 auto; width:44px; height:44px; border-radius:50%;
	display:flex; align-items:center; justify-content:center; font-family:var(--sb-texte); font-size:1.0625rem;
	font-weight:800; color:var(--sb-encre); background:var(--pb-bleu-pale);
}
.sbt-article-corps--rose > h2{ border-top-color:var(--pb-rose); }
.sbt-article-corps--rose > h2::before{ background:var(--pb-rose-pale); color:var(--pb-rose-texte); }
.sbt-article-corps--citron > h2{ border-top-color:var(--pb-citron); }
.sbt-article-corps--citron > h2::before{ background:var(--pb-citron-pale); }
.sbt-article-corps--bleu > h2{ border-top-color:var(--sb-accent); }
.sbt-article-corps--bleu > h2::before{ background:var(--pb-bleu-pale); color:var(--sb-accent); }
@media (max-width:640px){ .sbt-article-corps > h2{ gap:12px; } .sbt-article-corps > h2::before{ width:36px; height:36px; font-size:.9375rem; } }
.sbt-article-corps blockquote{
	margin: 1.8em 0; padding: 18px 24px; border-left: 4px solid var(--sb-accent, #2563eb);
	background: var(--sb-surf, #f4f5fa); border-radius: 8px; font-style: italic;
}

.sbt-sommaire-mobile{ display: none; }
@media (max-width: 1080px){ .sbt-sommaire-mobile{ display: block; margin-bottom: 24px; } }
@media (max-width: 1080px){ .sbt-rail-carte--sommaire{ display: none; } }

.sbt-a-lire{ margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--sb-filet, #e2e5ef); }
.sbt-kicker{ font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-size: .9375rem; font-weight: 700; margin-bottom: 12px; }
.sbt-grille{ display: grid; gap: var(--sb-gouttiere, 24px); }
.sbt-grille--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 760px){ .sbt-grille--3{ grid-template-columns: 1fr; } }
.sbt-carte{
	background: var(--sb-fond-carte, #ffffff); border: 1px solid var(--sb-filet, #e2e5ef);
	border-radius: var(--sb-rayon, 14px); overflow: hidden; box-shadow: var(--sb-ombre, 0 8px 24px rgba(15,23,42,.08));
	transition: transform .2s ease, box-shadow .2s ease;
}
.sbt-carte:hover{ transform: translateY(-4px); box-shadow: var(--sb-ombre-forte, 0 16px 40px rgba(15,23,42,.16)); }
.sbt-carte a{ display: block; color: inherit; text-decoration: none; }
.sbt-carte img{ width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.sbt-carte-corps{ padding: 18px; }
.sbt-carte-corps h3{ margin: 0; font-size: 1.0625rem; font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); }

.sbt-article-commentaires{ margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--sb-filet, #e2e5ef); }

/* ===================== Fiches produit (passe 5, DA §8) ===================== */
/* Passe 6 (JUGEMENT-VISUEL P2) : fond blanc identique au reste du corps → la fiche ne se
   distinguait pas. Fond teinté franc + numéro géant Anton + nom de produit agrandi : carte
   typographique assumée (aucune case photo vide quand l'article n'a pas de photo produit). */
.pb-fiche-produit{
	position: relative; display: flex; gap: 24px; margin: 2.6em 0; padding: 32px 32px 32px 96px;
	background: var(--pb-bleu-pale); border-radius: var(--sb-rayon-grand, 28px); box-shadow: var(--sb-ombre);
}
.pb-fiche-produit--rose{ background: var(--pb-rose-pale); }
.pb-fiche-produit--citron{ background: var(--pb-citron-pale); }
.pb-fiche-produit-numero{
	position: absolute; top: 28px; left: 20px; width: 64px; height: 64px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--sb-titre); font-size: 2rem; color: var(--sb-encre);
	background: #fff; box-shadow: var(--sb-ombre-forte);
}
.pb-fiche-produit-corps{ min-width: 0; flex: 1; }
.pb-fiche-produit-corps .pb-pastille{ margin-bottom: 10px; background: #fff; }
.pb-fiche-produit-corps h2,.pb-fiche-produit-corps h3{
	margin-top: 0 !important; font-size: clamp(1.5rem,1.1rem + 1.4vw,2rem) !important;
	border-top: none !important; padding-top: 0 !important; display: block !important;
}
.pb-fiche-produit-corps h2::before{ display:none !important; }
@media (max-width: 640px){ .pb-fiche-produit{ padding: 28px 24px 24px 24px; flex-direction: column; } .pb-fiche-produit-numero{ position: static; margin-bottom: 8px; } }
.pb-fiche-encadre{
	margin: 1.2em 0; padding: 16px 20px; border-radius: var(--sb-rayon); border-left: 4px solid;
}
.pb-fiche-encadre p{ margin: 0; }
.pb-fiche-encadre-titre{ text-transform: uppercase; letter-spacing: .06em; font-size: .9375rem !important; }
.pb-fiche-encadre-titre{ font-family: var(--sb-texte); font-weight: 800; font-size: .875rem; margin-bottom: 4px !important; }
.pb-fiche-encadre--adresse{ background: var(--pb-bleu-pale); border-left-color: var(--sb-accent); }
.pb-fiche-encadre--limite{ background: var(--pb-rose-pale); border-left-color: var(--pb-rose-texte); }
@media (max-width: 640px){
	.pb-fiche-produit{ padding: 24px 20px 20px; flex-direction: column; gap: 12px; }
	.pb-fiche-produit-numero{ position: static; }
}

@media (max-width: 640px){ .sbt-article-corps{ font-size: 1.125rem; } .sbt-article-mise-en-page{ padding-bottom: 72px; } }

/* ===================== Comparateur (Roxane 05/10, R14) =====================
   Tableau du corps rendu en fiche technique : en-tête unique, colonnes alignées, n° de ligne,
   jauges sur les valeurs graduées. Fond encre + accents citron = registre « tech » du site. */
.pb-comparo{
	margin: 1.8em 0; border-radius: 22px; overflow: hidden; background: var(--sb-encre); color: #fff;
	box-shadow: 0 24px 48px -26px rgba(24,25,43,.55); font-size: .9688rem; line-height: 1.35;
}
.pb-comparo-entete, .pb-comparo-ligne{ display: grid; grid-template-columns: var(--pb-comparo-grille); gap: 14px; align-items: center; padding: 14px 20px; }
.pb-comparo-entete{ background: rgba(255,255,255,.06); border-bottom: 2px solid var(--pb-citron); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pb-citron); }
.pb-comparo-ligne{ border-bottom: 1px solid rgba(255,255,255,.08); transition: background-color .18s ease; }
.pb-comparo-ligne:last-child{ border-bottom: 0; }
.pb-comparo-ligne:nth-child(odd){ background: rgba(255,255,255,.025); }
.pb-comparo-ligne:hover{ background: rgba(31,75,255,.22); }
.pb-comparo-num{ font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-weight: 800; font-size: .875rem; color: var(--sb-encre); background: var(--pb-citron); border-radius: 8px; width: 34px; height: 26px; display: flex; align-items: center; justify-content: center; }
.pb-comparo-cellule{ display: flex; flex-direction: column; gap: 6px; min-width: 0; color: rgba(255,255,255,.86); overflow-wrap: anywhere; }
.pb-comparo-cellule--nom{ color: #fff; font-weight: 800; font-size: 1.0313rem; }
.pb-comparo-jauge{ display: inline-flex; gap: 3px; order: 2; }
.pb-comparo-jauge i{ width: 18px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.16); }
.pb-comparo-jauge i.on{ background: var(--pb-citron); }
@media (max-width: 720px){
	.pb-comparo{ background: transparent; box-shadow: none; overflow: visible; display: grid; gap: 12px; }
	.pb-comparo-entete{ display: none; }
	.pb-comparo-ligne{ grid-template-columns: 1fr 1fr; background: var(--sb-encre) !important; border-radius: 18px; border: 0; padding: 16px 18px 18px; position: relative; gap: 12px 16px; }
	.pb-comparo-num{ position: absolute; top: 14px; right: 14px; }
	.pb-comparo-cellule--nom{ grid-column: 1 / -1; padding-right: 48px; font-size: 1.125rem; }
	.pb-comparo-cellule:not(.pb-comparo-cellule--nom)::before{ content: attr(data-label); font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pb-citron); }
}

/* ===================== « Dans la même rubrique » en vitrine (Roxane 05/10, R15) ===================== */
.pb-maillage{ margin: 2.6em 0 .6em; padding: 26px; border-radius: 24px; background: #fff; border: 1px solid var(--sb-filet); box-shadow: var(--sb-ombre); }
.pb-maillage-tete{ display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.pb-maillage-tete .pb-nav-ico{ width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--pb-rose-pale); color: var(--pb-rose-texte); }
.pb-maillage-tete .pb-ico{ width: 22px; height: 22px; }
.pb-maillage-tete .pb-ico .pb-ico-plein{ fill: currentColor; }
.pb-maillage-kicker{ margin: 0 !important; font-family: var(--sb-titre); font-size: 1.625rem; line-height: 1; flex: 1; }
.pb-maillage-rayon{ font-weight: 800; font-size: .9375rem; color: var(--sb-accent); text-decoration: none; padding: 8px 16px; border-radius: 999px; background: var(--pb-bleu-pale); white-space: nowrap; }
.pb-maillage-rayon:hover{ background: var(--sb-accent); color: #fff; }
.pb-maillage-cartes{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 14px; }
.pb-maillage-carte{ display: flex; flex-direction: column; text-decoration: none; color: var(--sb-encre); border-radius: 16px; overflow: hidden; background: var(--pb-coque); transition: transform .2s ease, box-shadow .2s ease; }
.pb-maillage-carte:hover{ transform: translateY(-3px); box-shadow: var(--sb-ombre); }
.pb-maillage-photo{ display: block; aspect-ratio: 16/10; overflow: hidden; }
.sbt-article-corps .pb-maillage-photo img{ width: 100%; height: 100%; object-fit: cover; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.pb-maillage-titre{ padding: 12px 14px 4px; font-weight: 800; font-size: 1rem; line-height: 1.3; }
.pb-maillage-min{ padding: 0 14px 14px; font-size: .8125rem; color: var(--sb-doux); font-weight: 600; }

/* ===================== « En un coup d'œil » — infographie calculée (Roxane 05/10, R11) ===================== */
.pb-coup-oeil{ margin: 1.6em 0 2em; padding: 24px 26px 26px; border-radius: 24px; background: var(--pb-bleu-pale); border: 2px solid var(--sb-accent); position: relative; }
.pb-coup-oeil-titre{ margin: 0 0 14px !important; font-family: var(--sb-titre); font-size: 1.5rem; line-height: 1; color: var(--sb-encre); }
.pb-coup-oeil-tuiles{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 12px; }
.pb-coup-oeil-tuile{ background: #fff; border-radius: 16px; padding: 14px 16px; }
.pb-coup-oeil-tuile strong{ display: block; font-family: var(--sb-titre); font-weight: 400; font-size: 2.5rem; line-height: 1; color: var(--sb-accent); }
.pb-coup-oeil-tuile strong small{ font-size: 1.125rem; }
.pb-coup-oeil-tuile span{ display: block; margin-top: 4px; font-size: .9375rem; font-weight: 700; color: var(--sb-doux); }
.pb-coup-oeil-prix{ margin-top: 16px; background: #fff; border-radius: 16px; padding: 14px 18px 12px; }
.pb-coup-oeil-prix-titre{ display: block; font-size: .875rem; font-weight: 800; margin-bottom: 14px; }
.pb-coup-oeil-piste{ position: relative; height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--pb-citron), var(--pb-rose)); margin: 0 7px; }
.pb-coup-oeil-piste i{ position: absolute; top: 50%; width: 14px; height: 14px; margin-left: -7px; transform: translateY(-50%); border-radius: 50%; background: #fff; border: 3px solid var(--sb-encre); }
.pb-coup-oeil-bornes{ display: flex; justify-content: space-between; margin-top: 8px; font-weight: 800; font-size: .9375rem; }
@media (max-width: 640px){ .pb-coup-oeil{ padding: 20px 16px; } .pb-coup-oeil-tuiles{ grid-template-columns: repeat(3,1fr); gap: 8px; } .pb-coup-oeil-tuile{ padding: 12px 10px; } .pb-coup-oeil-tuile strong{ font-size: 2rem; } .pb-coup-oeil-tuile span{ font-size: .8125rem; } }

/* Mathias 05/10 : « les liens ne ressortent pas assez, j'ai dû le chercher » — ils héritaient
   de la couleur du texte. Lien de texte = bleu accent, gras, soulignement épais teinté, surligné au survol. */
.sbt-article-corps :is(p, li, td, blockquote, figcaption) a:not(.sbt-btn){
	color: var(--sb-accent); font-weight: 700; text-decoration: underline; text-decoration-thickness: 3px;
	text-underline-offset: 4px; text-decoration-color: rgba(31,75,255,.35); border-radius: 4px;
	transition: background-color .15s, text-decoration-color .15s;
}
.sbt-article-corps :is(p, li, td, blockquote, figcaption) a:not(.sbt-btn):hover,
.sbt-article-corps :is(p, li, td, blockquote, figcaption) a:not(.sbt-btn):focus-visible{
	background: var(--pb-bleu-pale); text-decoration-color: var(--sb-accent);
}

/* RESPAWN — en-tête d'article : ENTETE-boite-collector-fenetre-photo-sticker-note (DA §8).
   Roxane 05/10 (R10) : la version centrée empilait pastille, titre, chapô, photo et auteur
   « de haut en bas au lieu de bien utiliser la largeur ». Nouvelle composition en largeur :
   bande à la couleur de la rubrique, texte à gauche (titre, chapô, auteur, temps de lecture),
   boîte collector à droite (cadre blanc percé d'un trou d'accroche, sticker étoile) qui déborde
   sous la bande. Photo plafonnée à 400 px : jamais plein écran (récidive Mathias n°6). */

.pb-entete-article{ position: relative; margin-bottom: 56px; }
.pb-entete-article-bande{ padding-block: 28px 0; border-radius: 0 0 var(--sb-rayon-grand) var(--sb-rayon-grand); }
.pb-entete-article--bleu .pb-entete-article-bande{ background: var(--sb-accent); color: #fff; }
.pb-entete-article--rose .pb-entete-article-bande{ background: var(--pb-rose); color: var(--sb-encre); }
.pb-entete-article--citron .pb-entete-article-bande{ background: var(--pb-citron); color: var(--sb-encre); }

.pb-entete-article-grille{
	display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: stretch;
}
.pb-entete-article-texte{ padding-bottom: 48px; }
.pb-entete-article-bande .sbt-fil-ariane{ color: inherit; opacity: .8; padding: 0; margin-bottom: 18px; font-size: .875rem; gap: 8px; }
.pb-entete-article-bande .sbt-fil-ariane a{ color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.pb-entete-article-rubrique{
	display: inline-flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border-radius: 999px;
	background: #fff; color: var(--sb-encre); text-decoration: none; font-weight: 800; font-size: .9375rem;
	box-shadow: 0 6px 16px -8px rgba(24,25,43,.35);
}
.pb-entete-article-rubrique .pb-nav-ico{ width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--pb-bleu-pale); color: var(--sb-accent); }
.pb-entete-article--rose .pb-entete-article-rubrique .pb-nav-ico{ background: var(--pb-rose-pale); color: var(--pb-rose-texte); }
.pb-entete-article--citron .pb-entete-article-rubrique .pb-nav-ico{ background: var(--pb-citron-pale); color: #5B6B00; }
.pb-entete-article-rubrique .pb-ico{ width: 19px; height: 19px; }
.pb-entete-article-rubrique .pb-ico .pb-ico-plein{ fill: currentColor; }

.pb-entete-article-bande h1{ font-size: clamp(2.375rem, 1.2rem + 2.6vw, 3.75rem); margin: 18px 0 18px; line-height: .96; text-wrap: balance; }
.pb-entete-article-chapo{ font-size: clamp(1.0625rem, .95rem + .4vw, 1.3125rem); line-height: 1.5; max-width: 52ch; margin-bottom: 26px; opacity: .92; }

.pb-entete-article-pied{ display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; }
.pb-entete-article-meta{
	margin: 0; color: inherit; font-size: .9375rem; background: rgba(255,255,255,.92); color: var(--sb-encre);
	padding: 7px 18px 7px 7px; border-radius: 999px; box-shadow: 0 8px 20px -12px rgba(24,25,43,.45);
}
.pb-entete-article-meta img{ width: 52px !important; height: 52px !important; border: 3px solid #fff; }
.pb-entete-article-meta small{ color: var(--sb-doux); font-size: .8125rem; }
.pb-entete-article-puce{ display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: .9375rem; }
.pb-entete-article-puce svg{ width: 20px; height: 20px; }

/* ----- La boîte collector : déborde sous la bande ----- */
/* Mathias 05/10 : la boîte restait collée en bas → grand vide bleu en haut à droite. Elle occupe
   désormais toute la hauteur du bloc texte (du fil d'Ariane jusque sous la bande). */
.pb-entete-article-photo{ position: relative; margin-bottom: -40px; transform: rotate(1.5deg); display: flex; flex-direction: column; padding-top: 6px; }
.pb-fenetre-boite{
	position: relative; border-radius: var(--sb-rayon-grand); border: 10px solid #fff; border-top-width: 34px; overflow: hidden;
	box-shadow: var(--sb-ombre-forte); flex: 1; min-height: 320px; max-height: 520px; background: #fff; width: 100%;
}
.pb-fenetre-trou{
	position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3;
	width: 54px; height: 14px; border-radius: 999px; background: var(--pb-coque); box-shadow: inset 0 2px 5px rgba(0,0,0,.22);
}
.pb-fenetre-boite::after{
	content:""; position:absolute; inset:0; background: linear-gradient(120deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 38%);
	pointer-events: none;
}
.pb-fenetre-boite img{ width: 100%; height: 100%; object-fit: cover; object-position: center 30%; border-radius: 0 0 16px 16px; }

@media (max-width: 1000px){
	.pb-entete-article-grille{ grid-template-columns: 1fr; gap: 8px; }
	.pb-entete-article-texte{ padding-bottom: 24px; }
	.pb-entete-article-photo{ max-width: 620px; transform: none; padding-top: 0; }
	.pb-fenetre-boite{ flex: none; height: clamp(240px, 50vw, 380px); min-height: 0; }
}
@media (max-width: 640px){
	.pb-entete-article{ margin-bottom: 44px; }
	.pb-entete-article-bande{ padding-top: 18px; }
	.pb-entete-article-bande h1{ font-size: 2.125rem; }
	.pb-fenetre-boite{ height: 220px; border-width: 8px; border-top-width: 26px; }
	.pb-fenetre-trou{ top: 8px; width: 44px; height: 11px; }
	.pb-entete-article-meta img{ width: 44px !important; height: 44px !important; }
	.pb-entete-article-photo .pb-etoile{ width: 80px; height: 80px; font-size: .75rem; left: -6px !important; }
}

/* RESPAWN — accueil S1 à S8 (DA §7). Chaque section visée ≤ 700px utiles à 1440×780.
   Scopé `.pb-vue-accueil` (native CSS nesting) pour cohabiter avec rubrique/pages/404
   dans une seule feuille (passe 3, 429 TigerProtect au-delà d'une dizaine de ressources). */
body.pb-vue-accueil{

/* ----- S1 — HERO ----- */
/* Passe 2 : la carte formulaire tombait sous le pli à 1440×780/1920×950, et ~200px de gris
   vide séparaient le hero du Fil. Hero compacté : titre plus court, blister réduit, carte
   remontée davantage sur le blister, padding de section resserré. Ordre MOBILE (flex column,
   DOM = titre, blister, sous) : H1 → blister réduit + carte → chapô/chiffres SOUS la carte
   (DA §7). Ordre DESKTOP (grid, ≥980px) : titre+sous à gauche, blister à droite. */
.pb-hero{ padding-block: 24px 0; overflow: visible; }
.pb-hero-grille{ display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 980px){
	.pb-hero-grille{
		display: grid; grid-template-columns: 1.12fr 0.88fr;
		grid-template-areas: "titre blister" "sous blister";
		grid-template-rows: 1fr 1fr; align-items: start; column-gap: 56px; row-gap: 22px;
	}
	.pb-hero-sous{ align-self: start; }
	.pb-hero-titre{ grid-area: titre; align-self: end; }
	.pb-hero-sous{ grid-area: sous; }
	.pb-hero-blister{ grid-area: blister; }
}

/* Roxane 05/10 (R1) : « le texte à gauche pourrait prendre plus de place » → colonne élargie,
   titre plus grand, chapô et preuves à taille de lecture (plus de libellés en 12 px). */
.pb-hero-titre{ font-size: clamp(2.375rem, 1rem + 4.6vw, 5.25rem); margin: 0; line-height: .94; }
.pb-hero-sous{ max-width: 600px; }
.pb-hero-chapo{ max-width: 36ch; }
.pb-hero-chapo{ font-size: clamp(1.0625rem, .9rem + .55vw, 1.375rem); line-height: 1.45; color: var(--sb-encre); opacity: .82; margin-bottom: 22px; font-family: var(--sb-texte); }
.pb-hero-preuves{ display: flex; gap: 12px 0; flex-wrap: wrap; }
.pb-hero-preuves > div{ padding: 4px 26px 4px 0; margin-right: 26px; border-right: 2px solid var(--sb-filet); }
.pb-hero-preuves > div:last-child{ border-right: 0; margin-right: 0; padding-right: 0; }
.pb-hero-preuves strong{ display: block; font-family: var(--sb-titre); font-weight: 400; font-size: 2.75rem; line-height: 1; font-variant-numeric: tabular-nums; }
.pb-hero-preuves span{ display: block; margin-top: 6px; font-size: .9375rem; font-weight: 600; color: var(--sb-doux); }
@media (max-width: 640px){
	.pb-hero-preuves > div{ padding-right: 16px; margin-right: 16px; }
	.pb-hero-preuves strong{ font-size: 2rem; }
	.pb-hero-preuves span{ font-size: .8125rem; }
}

.pb-hero-blister{ position: relative; max-width: 420px; }
@media (min-width: 980px){ .pb-hero-blister{ max-width: 500px; margin-left: auto; width: 100%; } }

/* Passe 5 : à 1920 le conteneur reste plafonné à --sb-conteneur (1280px) → le blister n'occupait
   que 26% de la LARGEUR D'ÉCRAN (JUGEMENT-VISUEL point 9, question 1 : NON). Au-delà de 1600px,
   le blister sort du flux de la grille et se dimensionne en vw (relatif à l'écran, pas au
   conteneur), ancré sur le bord droit de l'écran — il peut déborder du conteneur (DA §7 S1). */
/* Passe 6 (JUGEMENT-VISUEL R2/R3) : la colonne texte à 48% du conteneur était trop étroite pour
   le titre (5 lignes) ; et .pb-hero-blister en height:100% + carte en marge négative FAISAIT
   DÉBORDER le total (carton 100% + carte) au-delà des 640px du hero → la carte cachait le titre
   du « Fil ». Colonne élargie (mission §2) + .pb-hero-blister devient lui-même une colonne flex
   où le carton est flex:1 : le budget de hauteur (640px) est partagé entre carton ET carte, plus
   aucun débordement possible, quelle que soit la hauteur réelle de la carte. */
@media (min-width: 1600px){
	.pb-hero-grille{ position: relative; min-height: 640px; }
	.pb-hero-titre, .pb-hero-sous{ max-width: min(760px, 58%); }
	.pb-hero-grille{ grid-template-columns: 1fr; grid-template-areas: "titre" "sous"; align-content: center; }
	.pb-hero-blister{
		position: absolute; top: 0; height: 100%;
		right: calc((100vw - var(--sb-conteneur, 1280px)) / -2);
		width: min(44vw, 820px); max-width: none; margin: 0;
		display: flex; flex-direction: column;
	}
	.pb-hero-blister .pb-blister{ flex: 1 1 auto; min-height: 0; display: flex; }
	.pb-blister-carton{ flex: 1; min-height: 0; }
	.pb-hero-form-flottant{ flex: 0 0 auto; margin-top: -56px !important; }
}

@media (max-width: 979px){
	.pb-hero-titre{ font-size: 2.375rem; }
	.pb-blister-carton{ min-height: 0; padding: 12px; }
	/* La vraie cause du blister géant mobile (passe 3) : voir le commentaire sur
	   .pb-blister-bulle dans style.css. On aplatit franchement l'ellipse ici pour tenir
	   dans ≈170px de blister total et révéler au moins 2 tuiles de la carte avant 700px. */
	.pb-blister-bulle{ aspect-ratio: 3/1; }
	/* DA §7 S1 : chevauchement de 40px MAXIMUM pour que la manette reste visible au-dessus de
	   la carte (JUGEMENT-VISUEL point 10 : à -64px la manette était recouverte). */
	.pb-hero-form-flottant{ margin-top: -40px !important; margin-left: 0 !important; max-width: none !important; }
}

/* Passe 6 (JUGEMENT-VISUEL P4/point 10) : à ≤480px la bulle aplatie (3/1) + object-fit:cover
   ne montrait qu'un mince bandeau rogné de la manette. Mission §2 : manette ENTIÈRE visible
   (object-fit:contain, 220px de haut), la carte ne doit recouvrir au plus qu'1/3 du blister. */
@media (max-width: 480px){
	.pb-blister-carton{ min-height: 220px; }
	.pb-blister-bulle{ aspect-ratio: auto; height: 220px; border-radius: 28px; }
	.pb-blister-bulle img{ object-fit: contain; }
}

/* ----- S2 — LE FIL ----- */
/* Passe 6 (mission §4) : le fil restait entièrement sous le pli à 1440×780. Marge resserrée
   pour que son titre amorce dès le bas du premier écran, sans jamais entrer dans le hero. */
.pb-fil-grille{ display: grid; grid-template-columns: 1fr 0.85fr; gap: var(--sb-gouttiere, 32px); align-items: start; }
@media (max-width: 980px){ .pb-fil-grille{ grid-template-columns: 1fr; } }
.pb-fil-une .pb-carte-photo{ aspect-ratio: 16/10; max-height: 360px; }
.pb-fil-auteur{ display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .8125rem; color: var(--sb-doux); }
.pb-fil-auteur img{ width: 28px; height: 28px; border-radius: 50%; }

.pb-pilules-tabs{ display: flex; gap: 8px; margin-bottom: 16px; }
.pb-pilule-tab{
	padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--sb-filet); background: #fff;
	font-weight: 600; font-size: .8125rem; cursor: pointer;
}
.pb-pilule-tab.est-actif{ background: var(--sb-accent); border-color: var(--sb-accent); color: #fff; }
.pb-breves-liste{ list-style: none; margin: 0 0 16px; padding: 0; }
.pb-breve{ border-bottom: 1px solid var(--sb-filet); }
.pb-breve a{ display: flex; align-items: center; gap: 12px; padding: 12px 0; text-decoration: none; color: inherit; }
.pb-breve-heure{ font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-weight: 800; font-size: 1.1875rem; color: var(--sb-accent); font-variant-numeric: tabular-nums; flex-shrink: 0; width: 56px; }
.pb-pilule-tab{ font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .02em; }
.pb-breve img{ width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.pb-breve-titre{ font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.pb-lien-fleche{ font-weight: 700; color: var(--sb-accent); text-decoration: none; }
.pb-lien-fleche--clair{ color: var(--pb-citron); }

/* ----- S3 — LES RAYONS ----- */
.pb-rayons-ligne{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
@media (max-width: 1080px){ .pb-rayons-ligne{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px){
	.pb-rayons-ligne{ grid-auto-flow: column; grid-template-columns: unset; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
	.pb-rayon-carte{ scroll-snap-align: start; min-width: 200px; }
}
.pb-rayon-carte .pb-carte-photo{ aspect-ratio: 1/1; }
.pb-rayon-carte h3{ font-size: 1.0625rem; }

/* ----- S4 — RÉDAC EN CHIFFRES ----- */
/* Roxane 05/10 (R8/R9) : chiffres flottant dans le vide, libellés minuscules → titre de section,
   tuiles pleines 2×2 qui occupent la hauteur de la photo, libellés à 17 px. */
.pb-redac-grille{ display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: stretch; }
@media (max-width: 900px){ .pb-redac-grille{ grid-template-columns: 1fr; gap: 32px; } }
.pb-redac-gauche{ display: flex; flex-direction: column; }
.pb-redac-gauche .pb-h2{ color: #fff; }
.pb-redac-chiffres{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; flex: 1; }
.pb-chiffre-tuile{
	display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
	padding: 24px 26px; border-radius: 22px; background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.12); position: relative; overflow: hidden;
}
.pb-chiffre-tuile::after{ content: ""; position: absolute; right: -28px; top: -28px; width: 84px; height: 84px; border-radius: 50%; background: rgba(221,248,90,.10); }
.pb-chiffre-tuile:nth-child(2)::after{ background: rgba(255,62,134,.16); }
.pb-chiffre-tuile:nth-child(3)::after{ background: rgba(31,75,255,.28); }
.pb-chiffre-tuile strong{ display: block; font-family: var(--sb-titre); font-weight: 400; font-size: clamp(3rem, 2rem + 2.6vw, 4.75rem); line-height: .9; color: var(--pb-citron); font-variant-numeric: tabular-nums; }
.pb-chiffre-tuile--date{ font-size: clamp(2.25rem, 1.6rem + 1.8vw, 3.5rem) !important; }
.pb-chiffre-tuile span{ font-size: 1.0625rem; font-weight: 600; color: rgba(255,255,255,.88); }
.pb-redac-methode{ display: flex; flex-direction: column; }
.pb-redac-photo{ flex: 1; min-height: 260px; border-radius: 22px; overflow: hidden; margin-bottom: 20px; }
.pb-redac-photo img{ width: 100%; height: 100%; object-fit: cover; }
.pb-redac-phrase{ font-family: var(--sb-titre); font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); line-height: 1.1; margin-bottom: 14px; }
@media (max-width: 640px){ .pb-chiffre-tuile{ padding: 18px; } .pb-chiffre-tuile span{ font-size: .9375rem; } }

/* ----- S5 — GUIDES D'ACHAT ----- */
/* Roxane 05/10 (R3) : grille 3 colonnes cassée (2ᵉ carte étirée, 3ᵉ seule avec un grand trou
   blanc à droite) → composition magazine fixe : la une à gauche sur toute la hauteur, les deux
   suivantes empilées à droite en cartes horizontales. Aucune case vide possible. */
.pb-guides-grille{ display: grid; grid-template-columns: 1.15fr 1fr; grid-auto-rows: 1fr; gap: 24px; }
.pb-guides-grille--1{ grid-template-columns: 1fr; }
.pb-guide-carte{ position: relative; overflow: visible; }
.pb-guide-carte .pb-carte-photo{ position: relative; overflow: visible; }
.pb-guide-carte .pb-carte-photo img{ border-radius: var(--sb-rayon) var(--sb-rayon) 0 0; }
.pb-guide-carte--une{ grid-row: span 2; }
.pb-guide-carte--une .pb-carte-photo{ aspect-ratio: auto; min-height: 300px; }
.pb-guide-carte--une .pb-carte-corps{ padding: 24px 28px 28px; }
.pb-guide-carte--une h3{ font-family: var(--sb-titre); font-weight: 400; font-size: clamp(1.75rem, 1.2rem + 1.3vw, 2.5rem); line-height: 1.04; }
.pb-guide-carte:not(.pb-guide-carte--une){ flex-direction: row; }
.pb-guide-carte:not(.pb-guide-carte--une) .pb-carte-photo{ flex: 0 0 44%; aspect-ratio: auto; }
.pb-guide-carte:not(.pb-guide-carte--une) .pb-carte-photo img{ border-radius: var(--sb-rayon) 0 0 var(--sb-rayon); }
.pb-guide-carte:not(.pb-guide-carte--une) .pb-carte-corps{ flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 22px 24px; }
.pb-guide-lire{ display: inline-block; font-size: .8125rem; font-weight: 700; color: var(--pb-rose-texte); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .05em; }
.pb-guide-carte .pb-carte-chapo{ margin-bottom: 14px; }
@media (max-width: 900px){
	.pb-guides-grille{ grid-template-columns: 1fr; grid-auto-rows: auto; }
	.pb-guide-carte--une{ grid-row: auto; }
	.pb-guide-carte--une .pb-carte-photo{ aspect-ratio: 16/10; min-height: 0; }
}
@media (max-width: 560px){
	.pb-guide-carte:not(.pb-guide-carte--une){ flex-direction: column; }
	.pb-guide-carte:not(.pb-guide-carte--une) .pb-carte-photo{ aspect-ratio: 16/10; }
	.pb-guide-carte:not(.pb-guide-carte--une) .pb-carte-photo img{ border-radius: var(--sb-rayon) var(--sb-rayon) 0 0; }
}

/* ----- S6 — CADEAU-O-MÈTRE ----- */
.pb-cadeaumetre{ background: var(--sb-encre); color: #fff; border-radius: var(--sb-rayon-grand); padding: 36px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px; }
@media (max-width: 900px){ .pb-cadeaumetre{ grid-template-columns: 1fr; } }
.pb-cadeaumetre-pour-qui{ display: flex; flex-direction: column; gap: 10px; }
.pb-cadeaumetre-pour-qui .pb-pilule{ display:block; text-align:left; padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; text-decoration:none; font-weight:600; }
.pb-cadeaumetre-pour-qui .pb-pilule:hover{ background: var(--sb-accent); }
.pb-cadeaumetre-budgets{ display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.pb-budget-barre{ position: relative; display: flex; align-items: center; height: 44px; background: rgba(255,255,255,.08); border-radius: 999px; text-decoration: none; overflow: hidden; padding-right: 56px; }
.pb-budget-remplissage{ position: absolute; inset: 0; background: var(--pb-citron); border-radius: 999px; z-index: 0; }
/* Passe 4 (RE-0237) : le libellé était lu directement sur le fond (encre sur encre dans la
   zone non remplie, 1:1). Chip opaque propre au texte, lisible quel que soit ce qu'il y a
   derrière (zone citron remplie ou piste sombre). */
.pb-budget-libelle{
	position: relative; z-index: 1; color: #fff; font-weight: 700; font-size: .8125rem;
	background: var(--sb-encre); padding: 6px 14px; border-radius: 999px; margin-left: 6px;
}
.pb-budget-barre img{ position: absolute; right: 4px; top: 4px; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; z-index: 2; }

/* ----- S7 — BLAGUE + PLUS LUS ----- */
/* Roxane 05/10 (R6/R7) : carte blague trop petite face aux « plus lus », vignettes étriquées →
   deux colonnes de même hauteur, carte blague pleine hauteur, vignettes 4:3 de 128 px. */
.pb-s7-grille{ display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: stretch; }
@media (max-width: 900px){ .pb-s7-grille{ grid-template-columns: 1fr; gap: 40px; } }
.pb-blague-carte{
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
	background: var(--pb-rose); border-radius: var(--sb-rayon-grand); padding: 56px 44px 48px;
	transform: rotate(-1.5deg); text-align: center; box-shadow: 14px 14px 0 var(--pb-citron);
	min-height: 420px;
}
.pb-blague-badge{
	position: absolute; top: -16px; left: 50%; transform: translateX(-50%) rotate(2deg);
	background: var(--sb-encre); color: #fff; font-weight: 800; font-size: .875rem; letter-spacing: .06em; text-transform: uppercase;
	padding: 8px 18px; border-radius: 999px; white-space: nowrap;
}
.pb-blague-bulle{ width: 72px; height: 63px; margin-bottom: 22px; filter: drop-shadow(0 6px 10px rgba(24,25,43,.18)); }
.pb-blague-texte{ font-family: var(--sb-titre); font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.625rem); line-height: 1.05; margin-bottom: 28px; max-width: 18ch; text-wrap: balance; }
.pb-blague-bouton{ background: var(--sb-encre); color: #fff; }
.pb-blague-chute{ margin-top: 18px; font-weight: 700; font-size: 1.25rem; font-family: var(--sb-texte); }
.pb-plus-lus-liste{ list-style: none; counter-reset: none; }
.pb-plus-lus-liste li{ border-bottom: 1px solid var(--sb-filet); }
.pb-plus-lus-liste li:last-child{ border-bottom: 0; }
.pb-plus-lus-liste a{ display: flex; align-items: center; gap: 18px; padding: 14px 0; text-decoration: none; color: inherit; }
.pb-plus-lus-numero{ font-family: var(--sb-titre); font-size: 2.75rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--pb-rose); width: 40px; flex-shrink: 0; }
.pb-plus-lus-liste a img{ width: 128px; height: 96px; border-radius: 14px; object-fit: cover; flex-shrink: 0; box-shadow: var(--sb-ombre); transition: transform .2s ease; }
.pb-plus-lus-liste a:hover img{ transform: rotate(-2deg) scale(1.03); }
.pb-plus-lus-texte{ display: flex; flex-direction: column; gap: 4px; }
.pb-plus-lus-texte small{ font-size: .8125rem; font-weight: 700; color: var(--pb-rose-texte); text-transform: uppercase; letter-spacing: .05em; }
.pb-plus-lus-texte span{ font-size: 1.125rem; font-weight: 700; line-height: 1.25; }
@media (max-width: 640px){
	.pb-blague-carte{ min-height: 0; padding: 44px 24px 32px; box-shadow: 8px 8px 0 var(--pb-citron); }
	.pb-plus-lus-liste a img{ width: 96px; height: 72px; }
	.pb-plus-lus-texte span{ font-size: 1rem; }
}

/* ----- S8 — RAPPEL FORMULAIRE ----- */
.pb-s8-grille{ display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 900px){ .pb-s8-grille{ grid-template-columns: 1fr; } }
.pb-s8-grille h2{ color: #fff; }
.pb-s8-photo{ position: relative; }
.pb-s8-photo img{ border-radius: var(--sb-rayon-grand); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.pb-form--rappel .pb-form-ligne-email{ margin-bottom: 0; }

} /* fin .pb-vue-accueil */

/* RESPAWN — RUBRIQUE-rayon-etagere-boites-penchees-onglets-pilule (DA §9).
   Scopé `.pb-vue-rubrique` (native CSS nesting, passe 3 — une seule feuille). */
body.pb-vue-rubrique{

.pb-rubrique-bandeau{
	padding-block: 56px 64px; border-radius: 0 0 28px 28px; color: var(--sb-encre);
}
.pb-rubrique-bandeau--bleu{ background: var(--sb-accent); color: #fff; }
.pb-rubrique-bandeau--rose{ background: var(--pb-rose); }
.pb-rubrique-bandeau--citron{ background: var(--pb-citron); }

/* La grille vit sur le conteneur intérieur (jamais en style inline — sinon la media query
   ne peut plus la casser en 1 colonne sur mobile : régression constatée passe 2, 390px). */
.pb-rubrique-bandeau-inner{ display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: end; }
@media (max-width: 900px){ .pb-rubrique-bandeau-inner{ grid-template-columns: 1fr; } }

.pb-rubrique-titre{ font-size: clamp(2.5rem, 1.6rem + 4vw, 6.5rem); margin-bottom: 14px; }
.pb-rubrique-chapo{ font-size: 1.125rem; max-width: 46ch; margin-bottom: 10px; }
.pb-rubrique-compteur{ font-size: .9375rem; opacity: .85; }

/* L'étagère : 3 boîtes debout, inclinées */
.pb-etagere{ position: relative; padding-top: 24px; }
.pb-etagere-tablette{ height: 10px; border-radius: 10px; background: var(--sb-encre); box-shadow: var(--sb-ombre); margin-top: 0; }
.pb-etagere-boites{ display: flex; align-items: flex-end; gap: 16px; justify-content: flex-end; margin-bottom: -4px; }
.pb-etagere-boite{
	display: block; width: 110px; border-radius: 16px; border: 6px solid #fff; overflow: hidden;
	box-shadow: var(--sb-ombre-forte); text-decoration: none;
}
.pb-etagere-boite img{ width: 100%; height: 100%; object-fit: cover; }
.pb-etagere-boite:nth-child(1){ height: 260px; transform: rotate(-4deg); }
.pb-etagere-boite:nth-child(2){ height: 220px; transform: rotate(2deg); }
.pb-etagere-boite:nth-child(3){ height: 240px; transform: rotate(-1deg); }
@media (max-width: 900px){
	.pb-etagere-boites{ justify-content: center; }
	.pb-etagere-boite:nth-child(3){ display: none; }
}

/* Onglets pilule collants */
.pb-onglets-rubrique{
	position: sticky; top: var(--pb-entete-h); z-index: 40; background: #fff; border-bottom: 1px solid var(--sb-filet);
	display: flex; gap: 8px; overflow-x: auto; padding: 14px var(--sb-gouttiere, 24px);
	width: 100%; max-width: 100vw; box-sizing: border-box; min-width: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pb-onglet{
	flex-shrink: 0; padding: 8px 18px; border-radius: 999px; border: 1.5px solid var(--sb-filet); background: #fff;
	font-weight: 600; font-size: .875rem; text-decoration: none; color: var(--sb-encre); white-space: nowrap;
}
.pb-onglet.est-actif{ background: var(--sb-accent); border-color: var(--sb-accent); color: #fff; }

.pb-rubrique-une{
	display: block; margin: 40px 0; border-radius: var(--sb-rayon-grand); overflow: hidden; text-decoration: none; color: inherit;
	box-shadow: var(--sb-ombre);
}
.pb-rubrique-une-photo{ height: clamp(280px, calc(100vh - 220px), 480px); overflow: hidden; }
.pb-rubrique-une-photo img{ width: 100%; height: 100%; object-fit: cover; }
.pb-rubrique-une-corps{ padding: 24px 28px; background: #fff; }
.pb-rubrique-une-corps h3{ font-family: var(--sb-texte); font-weight: 800; font-size: 1.625rem; }

.pb-charger-plus{ display: flex; justify-content: center; margin: 40px 0 64px; }

@media (max-width: 640px){
	/* La une de rubrique ne doit jamais dépasser l'écran mobile (retour passe 2). */
	.pb-rubrique-une-photo{ height: 220px; }
	.pb-etagere-boite{ width: 84px; }
	.pb-etagere-boite:nth-child(1){ height: 190px; }
	.pb-etagere-boite:nth-child(2){ height: 160px; }
}

} /* fin .pb-vue-rubrique */
.pb-rubrique-signature{ margin:6px 0 0; font-size:.875rem; opacity:.85; }
.pb-rubrique-signature a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }

/* ===================== Liste éditoriale — rubriques & auteurs (Roxane 05/10, R18-R21) ===================== */
.pb-edito{ padding-top: 40px; padding-bottom: 112px; } /* R19/R21 : plus jamais collé au pied de page */
.pb-auteur-bandeau + .pb-edito{ padding-top: 48px; }
.pb-edito-haut{ display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); grid-template-rows: 1fr 1fr; gap: 24px; }
.pb-edito-haut--1{ grid-template-columns: 1fr; grid-template-rows: auto; }
.pb-edito-haut--2{ grid-template-rows: auto; }
.pb-edito-haut--2 .pb-edito-carte--une{ grid-row: auto; }
.pb-edito-haut--2 .pb-edito-carte--cote{ flex-direction: column; }
.pb-edito-haut--2 .pb-edito-carte--cote .pb-edito-photo{ flex: 1 1 auto; aspect-ratio: 16/10; }
.pb-edito-suite{ display: flex; flex-wrap: wrap; gap: 24px; margin-top: 24px; }
.pb-edito-suite:empty{ display: none; }

.pb-edito-carte{
	position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 22px; overflow: hidden;
	text-decoration: none; color: var(--sb-encre); box-shadow: var(--sb-ombre); border: 1px solid var(--sb-filet);
	transition: transform .2s ease, box-shadow .2s ease;
}
.pb-edito-carte:hover{ transform: translateY(-4px); box-shadow: var(--sb-ombre-forte); }
.pb-edito-carte:focus-visible{ outline: 3px solid var(--sb-accent); outline-offset: 3px; }
.pb-edito-photo{ position: relative; display: block; overflow: hidden; background: var(--pb-coque); }
.pb-edito-photo img{ width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.pb-edito-carte:hover .pb-edito-photo img{ transform: scale(1.04); }
.pb-edito-rang{
	position: absolute; top: 12px; left: 12px; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-weight: 800;
	font-size: .8125rem; background: var(--sb-encre); color: var(--pb-citron); padding: 4px 9px; border-radius: 8px;
}
.pb-edito-corps{ display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1; }
.pb-edito-corps .pb-pastille{ align-self: flex-start; }
.pb-edito-titre{ font-weight: 800; font-size: 1.25rem; line-height: 1.22; }
.pb-edito-chapo{ font-size: 1rem; line-height: 1.55; color: var(--sb-doux); }
.pb-edito-meta{ display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: auto; padding-top: 6px; font-size: .875rem; color: var(--sb-doux); }
.pb-edito-meta img{ width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.pb-edito-meta span:first-of-type{ font-weight: 700; color: var(--sb-encre); }

/* La une : grande, à gauche, sur deux rangées */
.pb-edito-carte--une{ grid-row: span 2; }
.pb-edito-carte--une .pb-edito-photo{ flex: 1 1 auto; min-height: 300px; }
.pb-edito-carte--une .pb-edito-corps{ flex: 0 0 auto; padding: 24px 28px 26px; }
.pb-edito-carte--une .pb-edito-titre{ font-family: var(--sb-titre); font-weight: 400; font-size: clamp(1.875rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1.02; }
.pb-edito-carte--une .pb-edito-rang{ font-size: .9375rem; background: var(--pb-rose); color: var(--sb-encre); }

/* Les deux cartes de côté : horizontales */
.pb-edito-carte--cote{ flex-direction: row; }
.pb-edito-carte--cote .pb-edito-photo{ flex: 0 0 42%; }
.pb-edito-carte--cote .pb-edito-corps{ justify-content: center; }

/* La suite : 3 par ligne, une ligne incomplète se partage la largeur */
.pb-edito-carte--normale{ flex: 1 1 calc(33.333% - 16px); min-width: 280px; }
.pb-edito-carte--normale .pb-edito-photo{ aspect-ratio: 16/10; }
.pb-edito-suite > .pb-edito-carte--normale:last-child:nth-child(3n+1){ flex-direction: row; }
.pb-edito-suite > .pb-edito-carte--normale:last-child:nth-child(3n+1) .pb-edito-photo{ flex: 0 0 min(46%, 520px); aspect-ratio: auto; min-height: 260px; }
.pb-edito-suite > .pb-edito-carte--normale:last-child:nth-child(3n+1) .pb-edito-corps{ justify-content: center; padding: 28px 32px; }
.pb-edito-suite > .pb-edito-carte--normale:last-child:nth-child(3n+1) .pb-edito-titre{ font-size: 1.625rem; }

@media (max-width: 900px){
	.pb-edito-haut{ grid-template-columns: 1fr; grid-template-rows: auto; }
	.pb-edito-carte--une{ grid-row: auto; }
	.pb-edito-carte--une .pb-edito-photo{ aspect-ratio: 16/10; min-height: 0; }
}
@media (max-width: 640px){
	.pb-edito{ padding-top: 28px; padding-bottom: 72px; }
	.pb-edito-haut, .pb-edito-suite{ gap: 16px; }
	.pb-edito-suite{ margin-top: 16px; }
	.pb-edito-carte--cote .pb-edito-photo{ flex-basis: 38%; }
	.pb-edito-carte--cote .pb-edito-corps{ padding: 14px 16px; gap: 6px; }
	.pb-edito-carte--cote .pb-edito-titre{ font-size: 1.0625rem; }
	.pb-edito-carte--cote .pb-pastille, .pb-edito-carte--cote .pb-edito-meta img{ display: none; }
	.pb-edito-carte--normale{ min-width: 100%; }
	.pb-edito-suite > .pb-edito-carte--normale:last-child:nth-child(3n+1){ flex-direction: column; }
	.pb-edito-suite > .pb-edito-carte--normale:last-child:nth-child(3n+1) .pb-edito-photo{ aspect-ratio: 16/10; min-height: 0; flex-basis: auto; }
	.pb-edito-suite > .pb-edito-carte--normale:last-child:nth-child(3n+1) .pb-edito-corps{ padding: 20px 22px; }
}

/* Onglets de rayons : même picto que le menu */
.pb-onglet{ display: inline-flex; align-items: center; gap: 8px; padding-left: 6px !important; }
.pb-onglet .pb-nav-ico{ width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--pb-coque); color: var(--sb-encre); }
.pb-onglet.est-actif .pb-nav-ico{ background: rgba(255,255,255,.2); color: #fff; }
.pb-onglet .pb-ico{ width: 17px; height: 17px; }
.pb-onglet .pb-ico .pb-ico-plein{ fill: currentColor; }

/* R17 : boîtes de l'étagère nettes (image 768 px au lieu de 300 px agrandie) */
.pb-etagere-boite img{ image-rendering: auto; }
.pb-edito-carte--cote .pb-edito-meta > span:nth-of-type(2), .pb-edito-carte--cote .pb-edito-meta > span:nth-of-type(3){ display: none; } /* auteur · min (la date reste sur la une et la suite) */
@media (max-width: 640px){ .pb-edito-carte--cote .pb-edito-chapo{ display: none; } }
.pb-edito-suite > .pb-edito-carte--normale:last-child:nth-child(3n+1) .pb-edito-photo{ height: 320px; min-height: 0; }
.pb-edito-suite > .pb-edito-carte--normale:last-child:nth-child(3n+1) .pb-edito-meta,
.pb-edito-carte--cote .pb-edito-meta{ margin-top: 8px; }
@media (max-width: 640px){ .pb-edito-suite > .pb-edito-carte--normale:last-child:nth-child(3n+1) .pb-edito-photo{ height: auto; } }

/* RESPAWN — pages annexes (DA §10). Scopé `.pb-vue-page-annexe` (native CSS nesting,
   passe 3 — une seule feuille). */
body.pb-vue-page-annexe{

.pb-page-hero{ padding-block: 56px 48px; }
.pb-page-hero h1{ font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem); margin-bottom: 16px; }

/* ===================== Qui sommes-nous — refonte Roxane 05/10 (R22/R23) ===================== */
.pb-apropos-hero, .pb-methode-hero{ padding-block: 56px 64px; background: var(--pb-coque); }
.pb-apropos-hero-grille{ display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 56px; align-items: center; }
.pb-apropos-hero h1, .pb-methode-hero h1{ font-size: clamp(2.5rem, 1.2rem + 4.2vw, 5.25rem); line-height: .94; margin-bottom: 22px; text-wrap: balance; }
.pb-apropos-chapo{ font-size: clamp(1.0625rem, .95rem + .45vw, 1.3125rem); line-height: 1.5; max-width: 44ch; margin-bottom: 26px; }
.pb-apropos-chiffres{ display: flex; flex-wrap: wrap; gap: 12px; }
.pb-apropos-chiffres > div{ background: #fff; border-radius: 18px; padding: 14px 22px; box-shadow: var(--sb-ombre); min-width: 130px; }
.pb-apropos-chiffres strong{ display: block; font-family: var(--sb-titre); font-weight: 400; font-size: 2.5rem; line-height: 1; color: var(--sb-accent); }
.pb-apropos-chiffres span{ font-size: .9375rem; font-weight: 700; color: var(--sb-doux); }
.pb-apropos-hero-visuel{ position: relative; }
.pb-apropos-hero-visuel .pb-blister-carton{ padding: 22px 22px 26px; transform: rotate(1.5deg); }
.pb-apropos-hero-photo{ width: 100%; aspect-ratio: 4/3.4; border-radius: 22px; overflow: hidden; border: 6px solid #fff; box-shadow: var(--sb-ombre-forte); }
.pb-apropos-hero-photo img{ width: 100%; height: 100%; object-fit: cover; }

.pb-apropos-manifeste{ background: var(--pb-rose); padding-block: 64px; }
.pb-apropos-manifeste-inner{ display: grid; grid-template-columns: 120px 1fr; gap: 8px 36px; align-items: center; }
.pb-apropos-mascotte{ grid-row: span 2; width: 120px; height: 120px; transform: rotate(-10deg); filter: drop-shadow(6px 8px 0 rgba(24,25,43,.9)); }
.pb-apropos-manifeste-texte{ font-family: var(--sb-titre); font-size: clamp(2rem, 1.2rem + 2.8vw, 3.75rem); line-height: 1; margin: 0; }
.pb-apropos-manifeste-texte span{ background: var(--sb-encre); color: var(--pb-citron); padding: 0 .15em; display: inline-block; transform: rotate(-1deg); }
.pb-apropos-manifeste-sous{ font-size: 1.1875rem; font-weight: 600; margin: 0; max-width: 60ch; }

/* Équipe : cartes à collectionner (bandeau de couleur, photo, stats, pilules) */
.pb-equipe-grille{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px,100%), 1fr)); gap: 24px; }
.pb-carte-collector{
	background: #fff; border-radius: 24px; border: 3px solid var(--sb-encre); overflow: hidden; position: relative;
	box-shadow: 8px 8px 0 var(--sb-encre); display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease;
}
.pb-carte-collector:hover{ transform: translate(-3px,-3px) rotate(-.6deg); box-shadow: 11px 11px 0 var(--sb-encre); }
.pb-carte-collector-haut{ position: relative; height: 128px; background: var(--sb-accent); margin-bottom: 60px; }
.pb-carte-collector--rose .pb-carte-collector-haut{ background: var(--pb-rose); }
.pb-carte-collector--citron .pb-carte-collector-haut{ background: var(--pb-citron); }
.pb-carte-collector--encre .pb-carte-collector-haut{ background: var(--sb-encre); }
.pb-carte-collector-haut::before{ content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.22) 1.5px, transparent 1.5px); background-size: 14px 14px; }
.pb-carte-collector-num{ position: absolute; top: 12px; left: 14px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-weight: 800; font-size: .875rem; background: #fff; color: var(--sb-encre); padding: 3px 8px; border-radius: 8px; }
.pb-carte-collector-stat{ position: absolute; top: 12px; right: 14px; font-size: .8125rem; font-weight: 700; background: rgba(24,25,43,.85); color: #fff; padding: 4px 10px; border-radius: 999px; }
.pb-carte-collector-stat strong{ color: var(--pb-citron); }
.pb-carte-collector-haut img{ position: absolute; left: 50%; bottom: -56px; transform: translateX(-50%); width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 5px solid #fff; box-shadow: var(--sb-ombre-forte); background: #fff; }
.pb-carte-collector-corps{ padding: 6px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pb-carte-collector h3{ font-family: var(--sb-titre); font-weight: 400; font-size: 1.75rem; line-height: 1; text-align: center; margin: 0; }
.pb-carte-collector .pb-role{ text-align: center; color: var(--pb-rose-texte); font-size: .9375rem; font-weight: 800; margin: 0; }
.pb-carte-collector-pilules{ display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pb-carte-collector-pilules span{ font-size: .8125rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--pb-coque); border: 1px solid var(--sb-filet); }
.pb-carte-collector-bio{ font-size: 1rem; line-height: 1.55; margin: 0; }
.pb-carte-collector .pb-dernier{ font-size: .875rem; color: var(--sb-doux); margin: 0; padding-top: 10px; border-top: 1px dashed var(--sb-filet); }
.pb-carte-collector .pb-dernier a{ color: var(--sb-encre); font-weight: 700; }
.pb-carte-collector-lien{ margin-top: auto; font-weight: 800; color: var(--sb-accent); text-decoration: none; }

/* Trois règles */
.pb-ligne-edito{ display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
@media (max-width: 860px){ .pb-ligne-edito{ grid-template-columns: 1fr; } }
.pb-ligne-edito-item{ border-radius: 24px; padding: 30px 28px; background: var(--pb-bleu-pale); }
.pb-ligne-edito-item--rose{ background: var(--pb-rose-pale); }
.pb-ligne-edito-item--citron{ background: var(--pb-citron-pale); }
.pb-ligne-edito-ico{ display: inline-flex; width: 56px; height: 56px; border-radius: 16px; align-items: center; justify-content: center; background: #fff; color: var(--sb-encre); box-shadow: 4px 4px 0 var(--sb-encre); margin-bottom: 18px; transform: rotate(-4deg); }
.pb-ligne-edito-ico .pb-ico{ width: 30px; height: 30px; }
.pb-ligne-edito-ico .pb-ico .pb-ico-plein{ fill: var(--pb-rose); }
.pb-ligne-edito-item h3{ font-size: 1.875rem; margin-bottom: 10px; }
.pb-ligne-edito-item p{ font-size: 1.0625rem; line-height: 1.55; margin: 0; }

/* Frise de l'histoire */
.pb-section--fond-encre .pb-h2{ color: #fff; }
.pb-frise{ list-style: none; display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; position: relative; padding-top: 28px; }
.pb-frise::before{ content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, rgba(255,255,255,.25), var(--pb-citron)); }
.pb-frise li{ position: relative; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 22px; padding: 24px; }
.pb-frise li::before{ content: ""; position: absolute; top: -27px; left: 24px; width: 18px; height: 18px; border-radius: 50%; background: var(--sb-encre); border: 4px solid rgba(255,255,255,.5); }
.pb-frise li.est-actuel{ background: var(--pb-citron); color: var(--sb-encre); border-color: var(--pb-citron); }
.pb-frise li.est-actuel::before{ border-color: var(--pb-citron); background: var(--pb-rose); }
.pb-frise-date{ display: inline-block; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-weight: 800; font-size: .9375rem; margin-bottom: 10px; color: var(--pb-citron); }
.pb-frise li.est-actuel .pb-frise-date{ color: var(--pb-rose-texte); }
.pb-frise h3{ font-size: 1.875rem; margin-bottom: 8px; }
.pb-frise p{ margin: 0; font-size: 1.0625rem; line-height: 1.55; }
@media (max-width: 860px){ .pb-frise{ grid-template-columns: 1fr; padding-top: 0; padding-left: 26px; } .pb-frise::before{ top: 0; bottom: 0; left: 6px; right: auto; width: 4px; height: auto; } .pb-frise li::before{ top: 26px; left: -29px; } }

/* Appel final */
.pb-apropos-fin{ padding-bottom: 104px; }
.pb-apropos-cta{ display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; background: #fff; border: 3px solid var(--sb-encre); border-radius: 28px; padding: 34px 40px; box-shadow: 10px 10px 0 var(--pb-rose); margin-bottom: 28px; }
.pb-apropos-cta .pb-h2{ margin-bottom: 8px; }
.pb-apropos-cta p{ margin: 0; font-size: 1.125rem; }
.pb-apropos-cta-boutons{ display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 900px){
	.pb-apropos-hero-grille{ grid-template-columns: 1fr; gap: 36px; }
	.pb-apropos-manifeste-inner{ grid-template-columns: 1fr; }
	.pb-apropos-mascotte{ grid-row: auto; width: 84px; height: 84px; }
}
@media (max-width: 640px){
	.pb-apropos-hero, .pb-methode-hero{ padding-block: 32px 44px; }
	.pb-apropos-chiffres > div{ min-width: 0; flex: 1; padding: 12px 14px; }
	.pb-apropos-chiffres strong{ font-size: 2rem; }
	.pb-apropos-cta{ padding: 24px 20px; box-shadow: 6px 6px 0 var(--pb-rose); }
	.pb-apropos-fin{ padding-bottom: 72px; }
}

/* ===================== Notre méthode — refonte Roxane 05/10 (R24/R25) ===================== */
.pb-methode-hero{ background: var(--sb-accent); color: #fff; border-radius: 0 0 28px 28px; }
.pb-methode-hero .pb-kicker{ color: #fff; opacity: .8; }
.pb-methode-hero-grille{ display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 56px; align-items: center; }
.pb-methode-ecran{
	background: var(--sb-encre); border-radius: 26px; padding: 18px 20px 22px; box-shadow: 12px 12px 0 var(--pb-citron);
	transform: rotate(1.2deg); font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
.pb-methode-ecran-barre{ display: flex; align-items: center; gap: 6px; margin-bottom: 16px; color: rgba(255,255,255,.6); font-size: .75rem; letter-spacing: .12em; }
.pb-methode-ecran-barre span{ width: 11px; height: 11px; border-radius: 50%; background: var(--pb-rose); }
.pb-methode-ecran-barre span:nth-child(2){ background: var(--pb-citron); }
.pb-methode-ecran-barre span:nth-child(3){ background: #3DDC97; }
.pb-methode-ecran-barre em{ margin-left: auto; font-style: normal; }
.pb-methode-ecran-niveaux{ list-style: none; display: grid; gap: 10px; }
.pb-methode-ecran-niveaux li{ display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #fff; }
.pb-methode-ecran-niveaux li.est-boss{ background: var(--pb-rose); border-color: var(--pb-rose); color: var(--sb-encre); }
.pb-methode-ecran-num{ font-weight: 800; font-size: .875rem; width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--pb-citron); color: var(--sb-encre); }
.pb-methode-ecran-niveaux .pb-nav-ico{ display: inline-flex; color: inherit; }
.pb-methode-ecran-niveaux .pb-ico{ width: 22px; height: 22px; }
.pb-methode-ecran-niveaux .pb-ico .pb-ico-plein{ fill: currentColor; }
.pb-methode-ecran-nom{ font-family: var(--sb-titre); font-size: 1.375rem; letter-spacing: .01em; }
.pb-methode-ecran-etat{ margin-left: auto; font-weight: 800; font-size: .8125rem; color: var(--pb-citron); }
.est-boss .pb-methode-ecran-etat{ color: var(--sb-encre); background: #fff; padding: 2px 8px; border-radius: 6px; }
.pb-methode-ecran-xp{ display: flex; align-items: center; gap: 10px; margin-top: 16px; color: rgba(255,255,255,.7); font-size: .75rem; }
.pb-methode-ecran-xp i{ flex: 1; height: 10px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.pb-methode-ecran-xp b{ display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--pb-citron), var(--pb-rose)); }

.pb-parcours{ list-style: none; display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; counter-reset: none; }
@media (max-width: 1000px){ .pb-parcours{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .pb-parcours{ grid-template-columns: 1fr; } }
.pb-niveau{ position: relative; border-radius: 24px; padding: 26px 24px 28px; background: var(--pb-bleu-pale); border: 2px solid var(--sb-encre); box-shadow: 6px 6px 0 var(--sb-encre); text-align: left; }
.pb-niveau--2{ background: var(--pb-rose-pale); }
.pb-niveau--3{ background: var(--pb-citron-pale); }
.pb-niveau--4{ background: var(--sb-encre); color: #fff; box-shadow: 6px 6px 0 var(--pb-rose); }
.pb-niveau-numero{ display: inline-block; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-weight: 800; font-size: .8125rem; padding: 4px 10px; border-radius: 8px; background: var(--sb-encre); color: var(--pb-citron); }
.pb-niveau--4 .pb-niveau-numero{ background: var(--pb-rose); color: var(--sb-encre); }
.pb-niveau-ico{ display: flex; width: 64px; height: 64px; margin: 18px 0 14px; border-radius: 18px; align-items: center; justify-content: center; background: #fff; color: var(--sb-encre); transform: rotate(-5deg); }
.pb-niveau-ico .pb-ico{ width: 34px; height: 34px; }
.pb-niveau-ico .pb-ico .pb-ico-plein{ fill: var(--pb-rose); }
.pb-niveau h3{ font-size: 2rem; margin-bottom: 8px; }
.pb-niveau p{ margin: 0; font-size: 1.0625rem; line-height: 1.55; }
.pb-niveau::after{ content: "→"; position: absolute; right: -19px; top: 50%; transform: translateY(-50%); z-index: 2; width: 26px; height: 26px; border-radius: 50%; background: var(--pb-citron); color: var(--sb-encre); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .875rem; border: 2px solid var(--sb-encre); }
.pb-niveau:last-child::after{ display: none; }
@media (max-width: 1000px){ .pb-niveau::after{ display: none; } }

.pb-criteres-grille{ display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media (max-width: 960px){ .pb-criteres-grille{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .pb-criteres-grille{ grid-template-columns: 1fr; } }
.pb-critere-tuile{ background: #fff; border-radius: 22px; padding: 22px 22px 20px; box-shadow: var(--sb-ombre); border-top: 6px solid var(--sb-accent); display: flex; flex-direction: column; gap: 14px; }
.pb-critere-tuile--rose{ border-top-color: var(--pb-rose); }
.pb-critere-tuile--citron{ border-top-color: #B9D62E; }
.pb-critere-tete{ display: flex; align-items: center; gap: 12px; }
.pb-critere-tete .pb-nav-ico{ display: inline-flex; width: 44px; height: 44px; border-radius: 13px; align-items: center; justify-content: center; background: var(--pb-bleu-pale); color: var(--sb-accent); flex-shrink: 0; }
.pb-critere-tuile--rose .pb-nav-ico{ background: var(--pb-rose-pale); color: var(--pb-rose-texte); }
.pb-critere-tuile--citron .pb-nav-ico{ background: var(--pb-citron-pale); color: #5B6B00; }
.pb-critere-tete .pb-ico{ width: 24px; height: 24px; }
.pb-critere-tete .pb-ico .pb-ico-plein{ fill: currentColor; }
.pb-critere-tete h3{ font-size: 1.5rem; margin: 0; }
.pb-critere-puces{ display: flex; flex-wrap: wrap; gap: 8px; }
.pb-critere-puces span{ font-size: .9375rem; font-weight: 700; padding: 6px 12px; border-radius: 10px; background: var(--pb-coque); }
.pb-critere-tuile .pb-lien-fleche{ margin-top: auto; }

.pb-interdits{ display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media (max-width: 860px){ .pb-interdits{ grid-template-columns: 1fr; } }
.pb-interdit{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 22px; padding: 26px; }
.pb-interdit-croix{ display: inline-flex; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; background: var(--pb-rose); color: var(--sb-encre); font-weight: 800; font-size: 1.25rem; margin-bottom: 14px; transform: rotate(-6deg); }
.pb-interdit h3{ font-size: 1.75rem; color: #fff; margin-bottom: 8px; }
.pb-interdit p{ margin: 0; color: rgba(255,255,255,.85); font-size: 1.0625rem; line-height: 1.55; }

@media (max-width: 900px){
	.pb-methode-hero-grille{ grid-template-columns: 1fr; gap: 36px; }
	.pb-methode-ecran{ transform: none; box-shadow: 8px 8px 0 var(--pb-citron); }
}

/* Contact */
.pb-contact-bandeau{ background: var(--pb-rose); padding-block: 56px 80px; border-radius: 0 0 28px 28px; }
.pb-contact-grille{ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: -48px; align-items: start; }
@media (max-width: 900px){ .pb-contact-grille{ grid-template-columns: 1fr; margin-top: -24px; } }
.pb-contact-form-carte{ background: #fff; border-radius: var(--sb-rayon-grand); box-shadow: var(--sb-ombre-forte); padding: 28px; }
.pb-contact-form-carte label{ display:block; font-weight:600; font-size:.875rem; margin-bottom:6px; }
.pb-contact-form-carte input,.pb-contact-form-carte textarea{
	width: 100%; border: 1.5px solid var(--sb-filet); border-radius: 12px; padding: 12px 14px; font-size: 1rem; margin-bottom: 16px; font-family: var(--sb-texte);
}
.pb-contact-blister{ padding-top: 24px; }
.pb-contact-delai{ margin-top: 16px; font-size: .9375rem; color: var(--sb-doux); }

/* Passe 4 : bouton « Envoyer le message » à 765px sur 700px de fenêtre utile mobile →
   bandeau et formulaire compactés pour tenir au-dessus du pli. */
@media (max-width: 760px){
	.pb-contact-bandeau{ padding-block: 28px 36px; }
	.pb-contact-grille{ margin-top: -14px; gap: 20px; }
	.pb-contact-form-carte{ padding: 16px; }
	.pb-contact-form-carte label{ margin-bottom: 4px; font-size: .8125rem; }
	.pb-contact-form-carte input,.pb-contact-form-carte textarea{ padding: 9px 12px; margin-bottom: 10px; font-size: .9375rem; }
	.pb-contact-form-carte textarea{ height: 72px; }
	.pb-contact-blister{ padding-top: 14px; }
	.pb-contact-blister .pb-blister-carton{ min-height: 0; padding: 12px; }
	.pb-contact-blister .pb-blister-bulle{ aspect-ratio: 3/1; }
}

} /* fin .pb-vue-page-annexe */
/* 04/10 — chk_livraison_site item 4 : carte alignée à gauche (bio longue), photo et nom centrés. */
.pb-carte-collector h3{ text-align:center; }

/* RESPAWN — 404 : drôle, utile. Scopé `.pb-vue-404` (native CSS nesting) pour cohabiter
   avec le reste dans tout.css (passe 3, une seule feuille). */
.pb-vue-404{
.pb-404{ min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding-block: 64px; }
.pb-404-inner{ max-width: 560px; }
.pb-404-titre{ font-size: clamp(3rem, 2rem + 4vw, 6rem); margin-bottom: 8px; }
.pb-404-texte{ font-size: 1.125rem; color: var(--sb-doux); margin-bottom: 28px; }
.pb-404-actions{ display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
}

/* BLOC FIGÉ — PIED DE PAGE (thématique) — copié tel quel (curieux-du-web.com). */
.sbt-btn{
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 24px; border-radius: 999px; font-weight: 700; font-size: 1rem;
	background: var(--sb-accent, #2563eb); color: #fff; text-decoration: none; border: 0; cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease;
}
.sbt-btn:hover{ transform: translateY(-2px); box-shadow: var(--sb-ombre, 0 8px 24px rgba(15,23,42,.08)); }
.sbt-btn--petit{ padding: 10px 18px; font-size: .875rem; }
.sbt-btn--fantome{ background: transparent; border: 1.5px solid rgba(255,255,255,.5); color: inherit; }
.sbt-footer{ background: var(--sb-fonce, #141733); color: var(--sb-sur-fonce, #ffffff); padding-block: clamp(40px,6vw,64px) 24px; }
.sbt-footer a{ color: #c4c7e4; text-decoration: none; }
.sbt-footer a:hover{ color: #fff; }
.sbt-footer-cta{
	display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
	padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.sbt-footer-cta .sbt-t3{ color: #fff; margin: 0 0 4px; font-size: 1.25rem; }
.sbt-footer-cta p{ color: #a9acd0; margin: 0; max-width: 46ch; }
.sbt-footer-grille{ display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.12); }
@media (max-width: 980px){ .sbt-footer-grille{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .sbt-footer-grille{ grid-template-columns: 1fr; } }
.sbt-footer-colonne .sbt-t4{ font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: #8b8fb5; margin: 0 0 14px; }
.sbt-footer-colonne ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sbt-footer-colonne ul a{ font-size: .875rem; }
/* Passe 5 : logo en texte police système → vrai SVG (le même qu'en-tête, version blanche),
   JUGEMENT-VISUEL point 14 (« deux identités différentes » entre en-tête et pied). */
.sbt-footer-logo{ display: inline-block; margin-bottom: 14px; }
.sbt-footer-logo img{ display: block; height: 32px; width: auto; }
.sbt-footer-desc{ color: #a9acd0; font-size: .9375rem; margin: 0; max-width: 32ch; }
.sbt-footer-bas{ padding-top: 20px; font-size: .8125rem; color: #8b8fb5; }
/* 4ᵉ colonne « Les plus lus » (sbt_footer_colonnes, functions.php) : équilibre les hauteurs
   des 4 colonnes (JUGEMENT-VISUEL point 20, tiers droit vide). */
.pb-footer-plus-lus{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pb-footer-plus-lus li a{ display: flex; align-items: center; gap: 10px; }
.pb-footer-plus-lus img{ width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.pb-footer-plus-lus span{ font-size: .8125rem; line-height: 1.3; }
.sbt-cookies{
	position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 80;
	background: var(--sb-fonce, #141733); color: #fff; border-radius: 12px;
	padding: 10px 14px; display: none; align-items: center; gap: 12px;
	box-shadow: var(--sb-ombre-forte, 0 16px 40px rgba(15,23,42,.16)); max-height: 64px; overflow: hidden;
}
.sbt-cookies.est-visible{ display: flex; }
.sbt-cookies p{ margin: 0; flex: 1; min-width: 0; font-size: .75rem; line-height: 1.3; }
.sbt-cookies-actions{ display: flex; gap: 8px; flex-shrink: 0; }
.sbt-cookies .sbt-btn{ flex-shrink: 0; padding: 8px 14px; min-height: 32px; font-size: .8125rem; }
.sbt-popup-sortie{ position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 20px; }
.sbt-popup-sortie.est-ouvert{ display: flex; }
.sbt-popup-sortie-fond{ position: absolute; inset: 0; background: rgba(15,23,42,.7); }
.sbt-popup-sortie-boite{
	position: relative; z-index: 1; background: var(--sb-fond-carte, #ffffff); border-radius: var(--sb-rayon, 14px);
	max-width: 720px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;
	box-shadow: var(--sb-ombre-forte, 0 16px 40px rgba(15,23,42,.16)); max-height: 90vh;
}
.sbt-popup-sortie-boite--sans-image{ grid-template-columns: 1fr; max-width: 480px; }
@media (max-width: 640px){ .sbt-popup-sortie-boite{ grid-template-columns: 1fr; max-height: 85vh; overflow-y: auto; } }
.sbt-popup-sortie-image{ min-height: 220px; }
.sbt-popup-sortie-image img{ width: 100%; height: 100%; object-fit: cover; }
.sbt-popup-sortie-texte{ padding: 28px; color: var(--sb-encre, #0f172a); }
.sbt-popup-sortie-fermer{
	position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
	background: var(--sb-fond-carte, #ffffff); border: 1px solid var(--sb-filet, #e2e5ef);
	display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.sbt-popup-sortie-fermer svg{ width: 20px; height: 20px; }

/* RESPAWN — formulaire « Trouve-moi le cadeau geek », réutilisé hero/rail/rappel/contact. */

/* Passe 4 (RE-0237) : le formulaire « rappel » (S8, fond bleu) héritait color:#fff de sa
   section ambiante → « Pour qui ? » blanc sur la carte blanche du formulaire, 1:1. Le
   formulaire fixe TOUJOURS sa propre couleur de texte, quelle que soit la section qui l'entoure. */
.pb-form{ background: #fff; color: var(--sb-encre); border-radius: 20px; box-shadow: var(--sb-ombre-forte); padding: 18px; position: relative; }
.pb-form-titre{ font-family: var(--sb-texte); font-weight: 800; font-size: 1.0625rem; margin: 0 0 10px; }
.pb-form-question{ font-weight: 700; margin: 0 0 8px; font-size: .9375rem; }

/* 4 étapes = 4 formes de manette, qui s'allument une à une */
.pb-form-etapes{ display: flex; gap: 8px; margin-bottom: 10px; }
.pb-form-etape-icone{
	width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: var(--sb-surf); color: var(--sb-doux); opacity: .5; transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.pb-form-etape-icone svg{ width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; }
.pb-form-etape-icone.est-active,.pb-form-etape-icone.est-faite{ background: var(--sb-accent); color: #fff; opacity: 1; }

.pb-form-tuiles{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pb-form-tuile{
	min-height: 42px; border-radius: 12px; border: 1.5px solid var(--sb-filet); background: var(--sb-surf);
	font-family: var(--sb-texte); font-weight: 600; font-size: .8125rem; cursor: pointer; padding: 8px; text-align: left;
	transition: border-color .15s ease, background .15s ease;
}
.pb-form-tuile:hover,.pb-form-tuile.est-choisi{ border-color: var(--sb-accent); background: var(--pb-bleu-pale); }

.pb-form-pilules{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pb-form-pilule{
	min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--sb-filet); background: #fff;
	font-family: var(--sb-texte); font-weight: 600; font-size: .875rem; cursor: pointer;
}
.pb-form-pilule:hover,.pb-form-pilule.est-choisi{ border-color: var(--sb-accent); background: var(--pb-bleu-pale); color: var(--sb-accent); }

.pb-form-ligne-email{ display: flex; gap: 10px; margin-bottom: 12px; }
.pb-form-ligne-email input[type=email]{
	flex: 1; min-width: 0; height: 56px; border-radius: 14px; border: 1.5px solid var(--sb-filet); padding: 0 16px; font-size: 1rem;
}
.pb-form-ligne-email .pb-btn{ height: 56px; flex-shrink: 0; }
.pb-form-consentement{ display: flex; align-items: flex-start; gap: 8px; font-size: .8125rem; color: var(--sb-doux); }

.pb-form-retour{ margin-top: 12px; background: none; border: 0; color: var(--sb-doux); cursor: pointer; font-size: .875rem; }
.pb-form-confirmation{ background: var(--pb-bleu-pale); color: var(--sb-accent); padding: 14px; border-radius: 12px; font-weight: 700; text-align: center; }
.pb-form-erreur{ background: var(--pb-rose-pale); color: var(--pb-alerte); padding: 12px 14px; border-radius: 12px; font-weight: 600; font-size: .875rem; margin-top: 10px; text-align: center; }

/* hero : carte flottante, posée sur le bas du blister */
.pb-form--hero{ max-width: 360px; }
.pb-hero-form-flottant{ margin-top: -48px; position: relative; z-index: 6; margin-left: -32px; }

/* compact (rail d'article) */
.pb-form--compact{ box-shadow: none; padding: 0; }
.pb-form--compact .pb-form-titre{ font-size: 1.0625rem; }
.pb-form--compact .pb-form-tuiles{ grid-template-columns: 1fr; }
.pb-form--compact .pb-form-tuile,.pb-form--compact .pb-form-pilule{ min-height: 44px; }

/* rappel (une ligne, S8) */
.pb-form--rappel{ background: #fff; margin-top: 20px; max-width: 520px; }