/*
 * Polices auto-hébergées (sous-ensemble latin), assemblées par l'orchestrateur dans assets/css/tout.css.
 * Les url() sont SANS guillemets et relatives à CE dossier (/assets/fonts/) : l'assemblage doit les réécrire
 * en ../fonts/ (leçon jp-auto.fr 10/10 : fonts.css concaténé sans réécriture = polices 404, rendu en Times).
 *
 * Gasoek One : une seule graisse (400, très noire). Reddit Sans : fichier VARIABLE (graisses 400 à 800) ;
 * si la source n'est livrée qu'en fichiers statiques, voir FONTS-A-TELECHARGER.txt.
 */
@font-face{
	font-family: 'Gasoek One';
	src: url(../fonts/gasoek-one.woff2) format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face{
	font-family: 'Reddit Sans';
	src: url(../fonts/reddit-sans.woff2) format('woff2');
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}

/*
Theme Name: wf-carte
Theme URI: https://willfitcenter.fr/
Author: WillFit Center
Description: Thème code-pur de WillFit Center — le prix affiché, et tout ce qu'il y a sous l'astérisque. Idée signature : la carte de membre retournée (piste magnétique, panneau de signature, astérisque orchidée, photo-badge à fente de cordon). Palette claire (Calque, Carte, Verso, Encre, Ardoise, Orchidée), Gasoek One + Reddit Sans. Socle technique du réseau en /socle (zéro pixel) ; blocs figés en /blocs (habillage uniquement).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: wf-carte
*/

/* Jetons de design. Les blocs figés (/blocs/*.css) lisent les variables --sb-* : on les habille ici.
   Attention à leur sens dans les blocs : --sb-titre / --sb-texte = FAMILLES de polices ;
   --sb-doux = texte secondaire (Ardoise) ; --sb-filet = filets et bandes (Verso) ;
   --sb-surf = surface teintée posée sur une carte blanche (Calque). */
:root{
	--sb-surf: #EFF1F6;          /* Calque : fond de page */
	--sb-fond-carte: #FFFFFF;    /* Carte */
	--sb-filet: #DFE4F1;         /* Verso : bandes, filets, hachures */
	--sb-encre: #17142E;         /* Encre : titres, texte, piste magnétique, pied de page */
	--sb-fonce: #17142E;
	--sb-sur-fonce: #FFFFFF;
	--sb-doux: #4E4A66;          /* Ardoise : méta, légendes, chapôs (7,45:1 sur Calque) */
	--sb-accent: #A21CC4;        /* Orchidée : astérisque, boutons, liens (6:1 sur Carte) */
	--sb-accent-clair: #E6A6F7;  /* Orchidée claire : UNIQUEMENT sur fond Encre */
	--sb-titre: 'Gasoek One', 'Arial Black', system-ui, sans-serif;
	--sb-texte: 'Reddit Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--sb-rayon: 20px;
	--sb-rayon-grand: 32px;
	--sb-ombre: 0 1px 2px rgba(23,20,46,.06), 0 18px 40px -14px rgba(23,20,46,.22);
	--sb-ombre-forte: 0 2px 4px rgba(23,20,46,.08), 0 34px 70px -20px rgba(23,20,46,.38);
	--sb-conteneur: 1240px;
	--sb-lecture: 740px;
	--sb-rail: 360px;
	--sb-gouttiere: 24px;

	/* Propres au thème */
	--wf-orchidee-fonce: #86139F; /* survol (8,05:1 avec du blanc) */
	--wf-voile: #F6E3FB;
	--wf-frais: #B8291B;          /* uniquement les lignes « frais » d'un coût */
	--wf-libre: #10755A;          /* uniquement « sans engagement » */
	--wf-fond: #EFF1F6;           /* fond de la section courante (pour la fente de cordon) */
	--wf-cont: 1280px;
	--wf-marge: 32px;
	--wf-entete: 72px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--wf-entete) + 16px); }
body{ margin: 0; background: var(--sb-surf); color: var(--sb-encre); font: 400 18px/1.6 var(--sb-texte); }
img,svg,video{ max-width: 100%; }
img{ display: block; height: auto; }
a{ color: inherit; }

/*
 * BLOC FIGÉ — ARTICLE (thématique) — CSS
 * Origine : curieux-du-web.com, theme/style.css, règles `.cdw-article*` /
 * `.cdw-fil-ariane` / `.cdw-a-lire` / `.cdw-carte*` (renommées `.sbt-*` ici).
 * Couleurs/polices/espacements uniquement en `var(--sb-*, repli)` : un site neuf peut
 * utiliser ce fichier tel quel sans avoir encore défini ses propres variables.
 *
 * INTERDIT DE MODIFIER : voir single-article.php (un seul <article>, « à lire aussi »
 * en <div>). LIBRE DE MODIFIER : toutes les valeurs des var() ci-dessous.
 */

.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: 16px; }
.sbt-fil-ariane a{ color: var(--sb-doux, #55607a); text-decoration: none; }
.sbt-fil-ariane a:hover{ color: var(--sb-encre, #0f172a); }

.sbt-article-entete{ max-width: var(--sb-lecture, 720px); margin-inline: auto; padding-block: 8px 24px; }
.sbt-article-pastille{
	display: inline-block; background: var(--sb-surf, #f4f5fa); color: var(--sb-encre, #0f172a);
	font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-weight: 700; font-size: .75rem;
	text-transform: uppercase; letter-spacing: .04em; padding: 6px 12px; border-radius: 999px; margin-bottom: 16px;
	text-decoration: none;
}
.sbt-article-entete h1{ font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); line-height: 1.15; margin: 0; }
.sbt-article-chapo{ font-family: var(--sb-texte, 'Inter', system-ui, sans-serif); font-style: italic; font-size: clamp(1.0625rem,1rem + .3vw,1.3125rem); color: var(--sb-doux, #55607a); margin-top: 16px; }
.sbt-article-meta{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; font-size: .875rem; color: var(--sb-doux, #55607a); }
.sbt-article-meta img{ width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.sbt-article-meta-auteur{ color: inherit; font-weight: 600; text-decoration: none; }

.sbt-article-une{ max-width: var(--sb-conteneur, 1240px); margin: 28px auto 32px; padding-inline: var(--sb-gouttiere, 24px); }
.sbt-article-une-cadre{ aspect-ratio: 2.4 / 1; max-height: min(520px, 46vh); overflow: hidden; /* 01/10 : à 1440×900 le texte passait sous la ligne de flottaison (B-ART-09) */ border-radius: var(--sb-rayon, 14px); box-shadow: var(--sb-ombre, 0 8px 24px rgba(15,23,42,.08)); }
.sbt-article-une-cadre img{ width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px){ .sbt-article-une-cadre{ aspect-ratio: auto; height: 220px; max-height: 220px; } }

/* Grille corps + rail — align-items:start obligatoire pour que le rail sticky
   (cf. partial-sidebar.css) tienne sur toute la hauteur du contenu. */
.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: 32px var(--sb-gouttiere, 24px) 64px; align-items: start; justify-content: center;
}
@media (max-width: 1080px){ .sbt-article-mise-en-page{ grid-template-columns: minmax(0,1fr); } .sbt-article-principal, .sbt-rail{ min-width: 0; } }
.sbt-article-mise-en-page--suite{ padding-top: 0; }

.sbt-article-corps{ font-size: 1.0625rem; line-height: 1.7; color: var(--sb-encre, #0f172a); font-family: var(--sb-texte, 'Inter', system-ui, sans-serif); }
.sbt-article-corps h2{ margin-top: 2.2em; font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); }
.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.3em; }
.sbt-article-corps img{ border-radius: var(--sb-rayon, 14px); margin-block: 1.6em; width: 100%; height: auto; }
.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;
}

/* Sommaire replié en accordéon sur mobile uniquement (en desktop, il vit dans le rail —
   cf. partial-sidebar.php / partial-sommaire.php). */
.sbt-sommaire-mobile{ display: none; }
@media (max-width: 1080px){ .sbt-sommaire-mobile{ display: block; margin-bottom: 24px; } }
/* 01/10/2026 (baliturismo, juge visuel) : sous 1080px le rail passe SOUS l'article ; sa carte sommaire
   faisait doublon avec le sommaire mobile de tête (erreur n°6 « sommaire en double »). */
@media (max-width: 1080px){ .sbt-rail-carte--sommaire{ display: none; } }

/* « À lire aussi » (toujours un <div>, jamais un <article> — cf. single-article.php) */
.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); }

/* 01/10 (accessoiriste.net) : un seul sommaire visible par largeur — la carte du rail se masque quand l'accordéon mobile s'affiche. */
@media (max-width: 1080px){ .sbt-rail-carte--sommaire{ display: none; } }
/* 05/10 (operations-digestives, juge visuel) : sous-titres collés au paragraphe suivant (marge basse 0 px mesurée) */
.sbt-article-corps h2{ margin-bottom: .6em; }
.sbt-article-corps h3{ margin-bottom: .45em; }

/*
 * BLOC FIGÉ — BARRE LATÉRALE D'ARTICLE (thématique) — CSS
 * Origine : curieux-du-web.com, theme/style.css, règles `.cdw-rail` / `.cdw-rail-carte`
 * (lignes ~854-861, renommées `.sbt-rail*` ici) — commentaire garde-fou d'origine
 * CONSERVÉ TEL QUEL ci-dessous (règle la plus importante de ce bloc).
 *
 * Inspiration secondaire documentée (pas copiée en entier) : amatauto.fr fait basculer
 * sa colonne latérale en bloc STATIQUE empilé sous le texte à partir de 1100px
 * (assets/css/v2.css, `.a2-art__cote { position: sticky; ... }` +
 * `@media (max-width: 1100px) { .a2-art__cote { position: static; } }`) — repris ici en
 * option mobile (media query 1080px, cohérente avec le point de rupture de
 * `.sbt-article-mise-en-page` dans single-article.css).
 */

/* Rail sticky — collé à la colonne de texte, séparation par un filet interne, jamais un
   gap blanc entre les deux colonnes. */
.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;
}
/* ⛔ GARDE-FOU (conservé tel quel depuis curieux-du-web.com, retour Mathias ×3) : jamais
   de overflow-y ni de max-height ici — la colonne reste collante et accompagne TOUTE la
   lecture de l'article jusqu'en bas, sans sa propre barre de défilement interne. */
.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;
}

/* Option mobile (inspirée d'amatauto.fr, cf. en-tête) : sous 1080px, la grille parente
   passe déjà en une colonne (cf. .sbt-article-mise-en-page dans single-article.css) — le
   rail redevient donc naturellement un bloc statique empilé sous le texte. */
@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; }
}

/* Sommaire tel qu'affiché dans le rail (cf. partial-sommaire.css pour le détail des
   classes `.sbt-sommaire*`) : pas de style supplémentaire ici, la carte du rail suffit. */

/*
 * BLOC FIGÉ — SOMMAIRE (thématique) — CSS
 * CSS volontairement simple (voir partial-sommaire.php : la robustesse de ce bloc est
 * dans le PHP — ids séquentiels, exclusion FAQ/Sources, seuil de 3 titres — pas dans son
 * habillage). Inspiré du rendu `<details>` natif de health-nutrition-cambrai.fr
 * (« Bien Vivre Santé »), classes renommées `.sbt-sommaire*`.
 */

.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É — ENCADRÉS « LE SAVIEZ-VOUS » / « POINTS À RETENIR » (thématique) — CSS
 * Origine : amatauto.fr, assets/css/v2.css, règles `.amat-encadre--retenir` / `.a2-saviez`
 * (renommées `.sbt-encadre--retenir` / `.sbt-encadre--saviez` ici). Habillage simplifié
 * (gradients/decorations ::before retirés pour rester générique et léger), la structure
 * (grille icône + texte pour « le saviez-vous », liste à puces pour « points à retenir »)
 * est conservée.
 */

.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;
}

/* « Points à retenir » — fond foncé, liste à puces check. */
.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;
}

/* « Le saviez-vous ? » — encadré clair, icône ampoule. */
.sbt-encadre--saviez{
	display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start;
	padding: 22px 24px; background: var(--sb-surf, #f4f5fa);
}
.sbt-encadre--saviez::before{
	content: "?"; grid-row: 1 / span 2; width: 48px; height: 48px; border-radius: 14px;
	background: var(--sb-accent, #2563eb); color: #fff; display: flex; align-items: center; justify-content: center;
	font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-weight: 700; font-size: 1.375rem;
}
.sbt-encadre--saviez .sbt-encadre-titre{ grid-column: 2; margin: 0; color: var(--sb-encre, #0f172a); }
.sbt-encadre--saviez p:not(.sbt-encadre-titre){ grid-column: 2; margin: 0; font-size: 1rem; line-height: 1.6; color: var(--sb-encre, #0f172a); }

@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; }
}
/* 04/10/2026 (invalidcast.com) : la règle de liste du corps d'article écrasait le retrait → la coche mangeait la 1re lettre. */
.sbt-article-corps .sbt-retenir-liste{ padding: 0; margin: 0; list-style: none; }
.sbt-article-corps .sbt-retenir-liste li{ padding-left: 34px; margin: 0; text-indent: 0; }

/*
 * BLOC FIGÉ — FAQ EN ACCORDÉON (thématique) — CSS
 * Visuel inspiré du rendu RÉEL de solutionminceur.fr, classes `.smr-faq*` récupérées par
 * un unique curl en lecture seule sur
 * `https://solutionminceur.fr/wp-content/themes/solutionminceur-v2/roxane.css`
 * (fichier CSS distant, absent du mirroir local du chantier — ce curl a RÉUSSI, voir
 * README). Classes renommées `.sbt-faq*` ici, variables de couleur remplacées par des
 * `var(--sb-*, repli)` génériques.
 *
 * Mécanisme accordéon (natif <details>/<summary>, sans JS) : cf. partial-faq.php, origine
 * health-nutrition-cambrai.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) — CSS
 * Visuel inspiré du rendu RÉEL de solutionminceur.fr, classes `.smr-auteur*` récupérées
 * par le même curl en lecture seule que partial-faq.css (roxane.css, voir README).
 * Classes renommées `.sbt-auteur*` ici, variables de couleur remplacées par des
 * `var(--sb-*, repli)` génériques.
 */

.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É — PIED DE PAGE (thématique) — CSS
 * Origine : curieux-du-web.com, theme/style.css, règles `.cdw-footer*` / `.cdw-cookies*` /
 * `.cdw-popup-sortie*` / `.cdw-btn*` (renommées `.sbt-footer*` / `.sbt-cookies*` /
 * `.sbt-popup-sortie*` / `.sbt-btn*` ici).
 */

.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 a.sbt-btn, .sbt-footer a.sbt-btn:hover{ color: #fff; } /* 10/10/2026 (blueau.fr) : « .sbt-footer a » battait la couleur du bouton (texte gris sur accent, 4,25:1) */

.sbt-footer-cta{
	display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
	padding: 24px 28px; margin-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 600px){ .sbt-footer-cta{ padding: 20px; } } /* 04/10/2026 (invalidcast.com) : texte collé au bord dès qu'un thème donne un fond de carte au bandeau */
.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; }
.sbt-footer-logo{ display: block; font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-weight: 700; font-size: 1.125rem; color: #fff; margin-bottom: 14px; }
.sbt-footer-desc{ color: #a9acd0; font-size: .9375rem; margin: 0; max-width: 32ch; }
.sbt-footer-contact{ display: flex; flex-direction: column; gap: 8px; font-size: .875rem; }

.sbt-footer-bas{ padding-top: 20px; font-size: .8125rem; color: #8b8fb5; }

/* Bandeau cookies — deux boutons de MÊME poids (même classe .sbt-btn/.sbt-btn--petit),
   jamais un seul « J'ai compris » qui vaudrait acceptation forcée. */
.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; }

/* Popup de sortie — jamais de colonne image vide : si pas d'image, la boîte bascule sur
   une seule colonne (cf. .sbt-popup-sortie-boite--sans-image). */
.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; }

/*
 * WillFit Center — feuille du thème wf-carte (mode clair uniquement).
 * Idée visuelle : la carte de membre retournée. Piste magnétique (14 px d'encre), panneau de signature
 * (hachures où s'inscrit le total sur 12 mois), astérisque orchidée (SVG), photo-badge à fente de cordon.
 * Assemblée par l'orchestrateur dans tout.css : fonts.css + style.css (jetons) + blocs/*.css + CE fichier
 * (les surcharges des blocs figés se trouvent donc dans la dernière partie).
 * Contrastes mesurés (DA §3) : Encre/Calque 15,8 · Ardoise/Calque 7,45 · Blanc/Orchidée 6,0 ·
 * Orchidée/Carte 6,0 · Frais/Carte 6,23 · Orchidée claire/Encre 9,49. Orchidée jamais en texte sur Encre.
 */

/* ============================== 0. Base ============================== */
html, body{ overflow-x: clip; }
.wf-corps{ display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.wf-main{ display: block; flex: 1 0 auto; }
.wf-footer{ flex: none; }
h1, h2{ font-family: var(--sb-titre); font-weight: 400; letter-spacing: -.01em; line-height: 1.05; margin: 0; text-wrap: balance; }
h3, h4{ font-family: var(--sb-texte); font-weight: 700; line-height: 1.25; margin: 0; }
p{ margin: 0; }
.wf-sr{ position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wf-evitement{ position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--sb-encre); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.wf-evitement:focus{ left: 12px; }
:focus-visible{ outline: 3px solid var(--sb-accent); outline-offset: 3px; border-radius: 6px; }
.wf-section--encre :focus-visible, .wf-footer :focus-visible, .wf-bulle :focus-visible{ outline-color: var(--sb-accent-clair); }
.wf-etoile{ display: inline-block; width: 1em; height: 1em; flex: none; }
.wf-picto{ width: 20px; height: 20px; flex: none; }

/* ============================== 1. Mise en page ============================== */
.wf-cont{ width: min(var(--wf-cont), 100% - 2 * var(--wf-marge)); margin-inline: auto; }
@media (min-width: 1700px){ :root{ --wf-cont: 1320px; } }
@media (max-width: 600px){ :root{ --wf-marge: 24px; } }

.wf-section{ --wf-fond: var(--sb-surf); position: relative; background: var(--wf-fond); padding-block: clamp(48px, 5.2vw, 72px); }
.wf-section--calque{ --wf-fond: #EFF1F6; }
.wf-section--carte{ --wf-fond: #FFFFFF; }
.wf-section--verso{ --wf-fond: #DFE4F1; }
.wf-section--voile{ --wf-fond: #F6E3FB; }
.wf-section--encre{ --wf-fond: #17142E; color: #fff; }

.wf-sec-tete{ margin-bottom: 28px; max-width: 760px; }
.wf-sec-tete h2{ font-size: clamp(28px, 3.3vw, 42px); }
.wf-sec-sous{ margin-top: 10px; color: var(--sb-doux); font-size: 18px; line-height: 1.5; max-width: 62ch; }
.wf-sec-tete--ligne{ display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; }
.wf-sec-tete--ligne > div{ max-width: 760px; }
.wf-section--encre .wf-sec-sous{ color: #D3CFE8; }

/* ============================== 2. Boutons et liens ============================== */
.wf-btn{
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; padding: 0 28px; border: 2px solid var(--sb-accent); border-radius: 999px;
	background: var(--sb-accent); color: #fff; font: 700 17px/1 var(--sb-texte); text-decoration: none;
	white-space: nowrap; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.wf-btn:hover{ background: var(--wf-orchidee-fonce); border-color: var(--wf-orchidee-fonce); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 24px -14px rgba(134,19,159,.7); }
.wf-btn:active{ transform: none; box-shadow: none; }
.wf-btn[disabled]{ background: #DFE4F1; border-color: #DFE4F1; color: #5E5A78; cursor: not-allowed; transform: none; box-shadow: none; }
.wf-btn .wf-etoile{ width: 16px; height: 16px; }
.wf-btn--grand{ min-height: 60px; padding: 0 36px; font-size: 18px; }
.wf-btn--petit{ min-height: 44px; padding: 0 20px; font-size: 15px; }
.wf-btn--fantome{ background: transparent; color: var(--sb-encre); border-color: var(--sb-encre); }
.wf-btn--fantome:hover{ background: var(--sb-encre); border-color: var(--sb-encre); color: #fff; box-shadow: none; }
.wf-btn--clair{ background: #fff; color: var(--sb-encre); border-color: #fff; }
.wf-btn--clair:hover{ background: var(--sb-accent-clair); border-color: var(--sb-accent-clair); color: var(--sb-encre); box-shadow: none; }

.wf-lien{ background: none; border: 0; padding: 0; margin: 0; color: var(--sb-accent); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wf-lien:hover{ color: var(--wf-orchidee-fonce); }
.wf-lien-fleche{ display: inline-flex; align-items: center; gap: 8px; flex: none; padding-bottom: 3px; border-bottom: 2px solid var(--sb-accent); font-weight: 700; color: var(--sb-encre); text-decoration: none; white-space: nowrap; }
.wf-lien-fleche:hover{ color: var(--sb-accent); }
.wf-lien-fleche .wf-picto{ transition: transform .2s ease; }
.wf-lien-fleche:hover .wf-picto{ transform: translateX(4px); }

/* ============================== 3. Les pièces de la carte : verso, signature, badge, étiquette ============================== */
.wf-verso{ position: relative; background: #fff; border-radius: var(--sb-rayon); box-shadow: var(--sb-ombre); --wf-fond: #fff; }
.wf-verso::before{ content: ""; display: block; height: 14px; background: var(--sb-fonce); border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.wf-signature{ background: repeating-linear-gradient(45deg, #fff 0 5px, #DFE4F1 5px 6px); border-radius: 12px; color: var(--sb-encre); }

.wf-badge{ position: relative; display: block; overflow: hidden; border-radius: 28px; background: var(--sb-filet); isolation: isolate; }
.wf-badge img, .wf-badge picture{ display: block; width: 100%; height: 100%; }
.wf-badge img{ object-fit: cover; }
.wf-badge::after{ content: ""; position: absolute; z-index: 3; top: 14px; left: 50%; width: 44px; height: 8px; margin-left: -22px; border-radius: 8px; background: var(--wf-fond); box-shadow: inset 0 2px 3px rgba(23,20,46,.38); pointer-events: none; }

.wf-repli{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 100%; background: var(--sb-filet); color: var(--sb-accent); }
.wf-repli-etoile{ width: min(28%, 72px); height: auto; aspect-ratio: 1; opacity: .5; }

.wf-etiquette{
	position: absolute; z-index: 4; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px;
	max-width: calc(100% - 24px); padding: 6px 12px 6px 9px; border-radius: 999px; background: #fff; color: var(--sb-encre);
	font: 700 13px/1.1 var(--sb-texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	box-shadow: 0 6px 16px -6px rgba(23,20,46,.45);
}
.wf-etiquette .wf-etoile{ width: 14px; height: 14px; color: var(--sb-accent); }

.wf-frais{ color: var(--wf-frais); font-weight: 600; }
.wf-section--encre .wf-frais{ color: #FFB4A8; }

/* ============================== 4. En-tête du site ============================== */
.wf-entete{ position: sticky; top: 0; z-index: 60; height: var(--wf-entete); background: #fff; border-bottom: 1px solid var(--sb-filet); transition: box-shadow .25s ease; }
.wf-entete.est-ombre{ box-shadow: 0 10px 26px -18px rgba(23,20,46,.55); }
.wf-entete-in{ width: min(1320px, 100% - 2 * var(--wf-marge)); height: 100%; margin-inline: auto; display: flex; align-items: center; gap: 28px; }
.wf-entete-logo{ flex: none; display: inline-flex; text-decoration: none; }

.wf-logo{ display: inline-flex; align-items: center; font-family: var(--sb-titre); font-size: 23px; line-height: 1; letter-spacing: -.01em; color: var(--sb-encre); white-space: nowrap; }
.wf-logo-etoile{ width: .8em; height: .8em; margin: 0 .1em; color: var(--sb-accent); transition: transform .5s cubic-bezier(.3,.7,.2,1); }
.wf-entete-logo:hover .wf-logo-etoile{ transform: rotate(60deg); }
.wf-logo--clair{ color: var(--sb-surf); }
.wf-logo--clair .wf-logo-etoile{ color: var(--sb-accent-clair); }

.wf-nav{ flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.wf-nav-liste{ display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.wf-nav-item a{
	position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 13px; border-radius: 999px;
	font: 600 15.5px/1 var(--sb-texte); color: var(--sb-encre); text-decoration: none; white-space: nowrap; transition: background .2s ease;
}
.wf-nav-item a:hover{ background: var(--sb-surf); }
.wf-nav-item.est-actif a::after{ content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 3px; border-radius: 3px; background: var(--sb-accent); }
.wf-nav-actions{ flex: none; }
.wf-nav-cta{ min-height: 46px; padding: 0 22px; font-size: 15.5px; }
.wf-menu-bouton{ display: none; }

@media (max-width: 1100px){
	:root{ --wf-entete: 64px; }
	.wf-logo{ font-size: 21px; }
	.wf-menu-bouton{ display: inline-flex; align-items: center; gap: 8px; margin-left: auto; min-height: 44px; padding: 0 16px; border: 2px solid var(--sb-encre); border-radius: 999px; background: #fff; color: var(--sb-encre); font: 700 15px/1 var(--sb-texte); cursor: pointer; }
	.wf-nav{
		position: fixed; z-index: 59; inset: var(--wf-entete) 0 0 0; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 24px;
		padding: 16px var(--wf-marge) 40px; background: #fff; overflow-y: auto;
		visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
	}
	.wf-menu-ouvert .wf-nav{ visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
	.wf-menu-ouvert{ overflow: hidden; }
	.wf-nav-liste{ flex-direction: column; align-items: stretch; gap: 0; }
	.wf-nav-item a{ display: flex; width: 100%; min-height: 62px; padding: 0; border-radius: 0; border-bottom: 1px solid var(--sb-filet); font: 400 26px/1.1 var(--sb-titre); }
	.wf-nav-item a:hover{ background: none; color: var(--sb-accent); }
	.wf-nav-item.est-actif a{ color: var(--sb-accent); }
	.wf-nav-item.est-actif a::after{ display: none; }
	.wf-nav-actions .wf-btn{ width: 100%; min-height: 60px; font-size: 18px; }
}
@media (max-width: 600px){ :root{ --wf-entete: 60px; } .wf-logo{ font-size: 20px; } }

/* ============================== 5. Premier écran de l'accueil ============================== */
.wf-hero{ padding-block: 28px 36px; }
.wf-hero-in{ display: grid; grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); column-gap: 72px; align-items: center; }
.wf-hero-texte{ grid-column: 1; grid-row: 1; min-width: 0; }
.wf-hero-visuel{ grid-column: 2; grid-row: 1; position: relative; min-width: 0; }
.wf-hero-verso{ grid-column: 2; grid-row: 1; align-self: end; justify-self: start; z-index: 5; margin-left: -56px; margin-bottom: 22px; }

.wf-hero h1{ font-size: clamp(32px, 4.3vw, 62px); line-height: 1; color: var(--sb-encre); }
.wf-h1-fin{ color: var(--sb-accent); }
.wf-h1-etoile{ display: inline-block; width: .6em; height: .6em; margin-left: .1em; vertical-align: .06em; color: var(--sb-accent); }
.wf-hero-chapo{ margin-top: 20px; max-width: 46ch; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; color: var(--sb-doux); }
.wf-hero-cta{ display: none; }
.wf-preuve{ list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; }
.wf-preuve li{ display: flex; align-items: center; gap: 10px; font-size: 16.5px; font-weight: 500; line-height: 1.35; }
.wf-preuve .wf-etoile{ width: 18px; height: 18px; color: var(--sb-accent); }
.wf-preuve b{ font-weight: 800; }

.wf-hero-badge{ --wf-fond: var(--sb-surf); height: clamp(480px, calc(100vh - var(--wf-entete) - 72px), 640px); height: clamp(480px, calc(100svh - var(--wf-entete) - 72px), 640px); border-radius: var(--sb-rayon-grand); box-shadow: var(--sb-ombre-forte); transform-origin: 50% 0; }
.wf-recto{
	position: absolute; z-index: 6; top: -16px; right: -26px; width: 184px; min-height: 114px; padding: 14px 16px 13px; border-radius: 14px;
	display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; background: var(--sb-fonce); color: var(--sb-accent-clair);
	box-shadow: var(--sb-ombre-forte); transform: rotate(-7deg);
}
.wf-recto::before{ content: ""; position: absolute; top: 14px; left: 16px; width: 32px; height: 22px; border: 2px solid var(--sb-accent-clair); border-radius: 5px; opacity: .85; }
.wf-recto-t{ display: flex; align-items: center; gap: 6px; font: 400 21px/1 var(--sb-titre); }
.wf-recto-t .wf-etoile{ width: .78em; height: .78em; }
.wf-recto-s{ font: 500 12px/1.25 var(--sb-texte); color: #D9D5EE; }

.wf-independance{ background: #fff; border-block: 1px solid var(--sb-filet); }
.wf-independance .wf-cont{ display: flex; align-items: center; gap: 12px; padding-block: 16px; }
.wf-independance .wf-etoile{ width: 20px; height: 20px; color: var(--sb-accent); }
.wf-independance p{ font-size: 15.5px; line-height: 1.45; color: var(--sb-encre); font-weight: 500; }

@media (min-width: 1700px){
	.wf-hero-in{ grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); }
	.wf-hero h1{ font-size: 68px; }
}

@media (max-width: 1099.98px){
	.wf-hero{ padding-block: 20px 28px; }
	.wf-hero-in{ grid-template-columns: minmax(0, 1fr); row-gap: 20px; align-items: start; }
	.wf-hero-texte, .wf-hero-verso, .wf-hero-visuel{ grid-column: 1; grid-row: auto; }
	.wf-hero-verso{ margin: 0; justify-self: stretch; }
	.wf-hero-cta{ display: inline-flex; width: 100%; margin-top: 22px; }
	.wf-preuve{ display: none; }
	.wf-hero-chapo{ margin-top: 14px; max-width: 60ch; }
	.wf-hero-badge{ height: clamp(190px, 30vw, 300px); border-radius: 24px; }
	.wf-recto{ top: -12px; right: 10px; width: 150px; min-height: 90px; padding: 10px 12px; }
	.wf-recto::before{ top: 10px; left: 12px; width: 26px; height: 18px; }
	.wf-recto-t{ font-size: 17px; }
	.wf-recto-s{ font-size: 11px; }
	.wf-js .wf-hero-verso{ display: none; }
	.wf-js .wf-hero-verso.est-ouvert{ display: block; }
	.wf-form-carte--hero{ width: 100%; max-width: 520px; }
}

/* ============================== 6. Le simulateur « Ma formule au vrai prix » (le verso) ============================== */
.wf-form-carte{ --wf-fond: #fff; position: relative; width: 100%; background: #fff; border-radius: var(--sb-rayon); box-shadow: var(--sb-ombre-forte); text-align: left; }
.wf-form-carte--hero{ width: 420px; }
.wf-form-tete{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px 2px; }
.wf-form-titre{ font: 700 16px/1.2 var(--sb-texte); color: var(--sb-encre); }
.wf-form-etoiles{ display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.wf-form-etoiles li{ width: 22px; height: 22px; color: #C4C8DC; transition: color .3s ease, transform .5s cubic-bezier(.3,.7,.2,1); }
.wf-form-etoiles li.est-pleine{ color: var(--sb-accent); }
.wf-form-etoiles .wf-etoile{ width: 100%; height: 100%; }
.wf-form-corps{ padding: 4px 20px 20px; }
.wf-form-etape{ display: none; }
.wf-form-etape.est-active{ display: block; animation: wf-etape-in .28s ease both; }
.wf-form-q{ margin: 8px 0 12px; font: 700 21px/1.2 var(--sb-texte); color: var(--sb-encre); }
.wf-form-q:focus{ outline: none; }
.wf-form-ville{ margin: -6px 0 10px; font-size: 14px; color: var(--sb-doux); }
.wf-form-ville b{ color: var(--sb-encre); }

.wf-tuiles{ display: grid; gap: 8px; }
.wf-tuiles--villes{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wf-tuiles--choix{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wf-tuile{
	display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 8px;
	border: 2px solid var(--sb-filet); border-radius: 999px; background: #fff; color: var(--sb-encre);
	font: 600 14px/1.1 var(--sb-texte); text-align: center; text-wrap: balance; cursor: pointer;
	transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}
.wf-tuile:hover{ border-color: var(--sb-accent); }
.wf-tuile:active{ transform: scale(.98); }
.wf-tuile[aria-checked="true"]{ background: var(--sb-accent); border-color: var(--sb-accent); color: #fff; }
.wf-tuile--case{ justify-content: flex-start; min-height: 52px; padding: 6px 10px; border-radius: 16px; text-align: left; font-size: 14px; }
.wf-case{ position: relative; flex: none; width: 20px; height: 20px; border: 2px solid #9A96B4; border-radius: 6px; background: #fff; }
.wf-tuile[aria-checked="true"] .wf-case{ border-color: #fff; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A21CC4' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }

.wf-cp{ display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.wf-cp[hidden]{ display: none; }
.wf-cp label{ font: 600 14px/1 var(--sb-texte); color: var(--sb-encre); }
.wf-cp input{ width: 128px; height: 44px; padding: 0 12px; border: 2px solid var(--sb-filet); border-radius: 14px; background: #fff; color: var(--sb-encre); font: 600 16px var(--sb-texte); letter-spacing: .1em; }
.wf-cp input:focus{ border-color: var(--sb-accent); }

.wf-form-nav{ display: flex; gap: 10px; margin-top: 16px; }
.wf-form-nav .wf-btn{ flex: 1; min-width: 0; padding: 0 14px; }
.wf-form-nav .wf-btn--retour{ flex: 0 0 auto; padding: 0 20px; }

.wf-form-resume{ margin: -4px 0 10px; font-size: 13px; line-height: 1.35; color: var(--sb-doux); }
.wf-resultat{ display: grid; gap: 6px; }
.wf-ligne{
	position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 56px;
	padding: 7px 7px 7px 14px; border: 2px solid var(--sb-filet); border-radius: 16px; background: #fff;
	animation: wf-deplie .38s cubic-bezier(.3,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 70ms);
}
.wf-ligne--prix{ border-color: var(--sb-accent); }
.wf-ligne-nom{ display: block; font: 700 15.5px/1.2 var(--sb-texte); color: var(--sb-encre); text-decoration: none; }
a.wf-ligne-nom:hover{ text-decoration: underline; text-underline-offset: 3px; }
.wf-ligne-formule{ font-weight: 500; color: var(--sb-doux); }
.wf-ligne-detail{ margin-top: 2px; font-size: 12.5px; line-height: 1.3; color: var(--sb-doux); }
.wf-ligne-puce{ display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: #E3F4EE; color: var(--wf-libre); font: 700 11.5px/1.5 var(--sb-texte); white-space: nowrap; vertical-align: 1px; }
.wf-ligne-total{ min-width: 108px; padding: 5px 10px 5px 12px; text-align: right; font-variant-numeric: tabular-nums; }
.wf-ligne-total b{ display: block; font: 800 17px/1.1 var(--sb-texte); }
.wf-ligne-total small{ display: flex; align-items: center; justify-content: flex-end; gap: 2px; font-size: 11.5px; line-height: 1.2; color: var(--sb-doux); }
.wf-ligne-total--nr b{ font-size: 13px; font-weight: 700; color: var(--sb-doux); }
.wf-etoile-btn{ position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; background: none; color: var(--sb-accent); cursor: pointer; }
.wf-etoile-btn::after{ content: ""; position: absolute; inset: -11px; }
.wf-etoile-btn .wf-etoile{ width: 15px; height: 15px; transition: transform .35s cubic-bezier(.3,.7,.2,1); }
.wf-etoile-btn[aria-expanded="true"] .wf-etoile{ transform: rotate(60deg); }
.wf-bulle{
	position: absolute; z-index: 30; left: -2px; right: -2px; top: calc(100% + 6px); padding: 14px 16px; border-radius: 16px;
	background: var(--sb-fonce); color: #fff; box-shadow: var(--sb-ombre-forte); font-size: 13px; line-height: 1.4; text-align: left;
}
.wf-bulle[hidden]{ display: none; }
.wf-bulle-titre{ margin: 0 0 8px; font: 700 14px/1.2 var(--sb-texte); color: var(--sb-accent-clair); }
.wf-bulle dl{ display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.wf-bulle dt{ font-weight: 700; color: #fff; }
.wf-bulle dd{ margin: 0; color: #E4E1F3; }
.wf-bulle .wf-frais{ color: #FFB4A8; }
.wf-bulle-source{ margin-top: 8px; font-size: 12px; color: #C9C5DE; }
.wf-bulle-source a{ color: var(--sb-accent-clair); }

.wf-form-meta{ margin-top: 10px; font-size: 12.5px; line-height: 1.4; color: var(--sb-doux); }
.wf-form-meta a{ color: var(--sb-encre); font-weight: 700; text-underline-offset: 3px; }
.wf-form-meta .wf-lien{ font-size: inherit; }

.wf-form-email{ display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #C4C8DC; }
.wf-form-sous{ font: 700 14px/1.2 var(--sb-texte); color: var(--sb-encre); }
.wf-form-ligne{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wf-form-email input[type="text"], .wf-form-email input[type="email"]{ width: 100%; min-width: 0; height: 44px; padding: 0 12px; border: 2px solid var(--sb-filet); border-radius: 14px; background: #fff; color: var(--sb-encre); font: 500 15px var(--sb-texte); }
.wf-form-email input[type="text"]:focus, .wf-form-email input[type="email"]:focus{ border-color: var(--sb-accent); }
.wf-consent{ display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.35; color: var(--sb-doux); cursor: pointer; }
.wf-consent input{ flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--sb-accent); }
.wf-consent a{ color: var(--sb-encre); font-weight: 600; }
.wf-form-envoyer{ width: 100%; }
.wf-form-msg{ font-size: 13px; line-height: 1.4; color: var(--wf-frais); }
.wf-form-msg:empty{ display: none; }
.wf-form-msg.est-ok{ color: var(--wf-libre); font-weight: 700; }
.wf-form-envoye{ padding: 14px 4px 6px; text-align: center; }
.wf-form-envoye .wf-etoile{ width: 28px; height: 28px; margin: 0 auto 8px; color: var(--sb-accent); }
.wf-form-envoye p{ font: 700 16px/1.35 var(--sb-texte); color: var(--sb-encre); }

.wf-form-carte[data-etape="3"] .wf-form-etoiles li:nth-child(3){ animation: wf-tourne .7s cubic-bezier(.3,.7,.2,1) both; }
@keyframes wf-etape-in{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }
@keyframes wf-deplie{ from{ opacity: 0; transform: translateY(-8px) scaleY(.92); } to{ opacity: 1; transform: none; } }
@keyframes wf-tourne{ from{ transform: rotate(-60deg) scale(.7); } to{ transform: none; } }

/* variante colonne d'article : plus étroite, plus compacte (le bloc rail reste plus court que la fenêtre) */
.wf-form-carte--rail .wf-form-tete{ padding: 10px 16px 0; }
.wf-form-carte--rail .wf-form-corps{ padding: 2px 16px 16px; }
.wf-form-carte--rail .wf-form-q{ margin: 6px 0 10px; font-size: 19px; }
.wf-form-carte--rail .wf-tuiles--villes{ gap: 6px; }
.wf-form-carte--rail .wf-tuile{ min-height: 38px; padding: 0 4px; font-size: 13px; }
.wf-form-carte--rail .wf-tuile--case{ min-height: 46px; font-size: 13px; padding: 4px 8px; }
.wf-form-carte--rail .wf-form-nav{ margin-top: 12px; }
.wf-form-carte--rail .wf-btn{ min-height: 48px; font-size: 16px; }
.wf-form-carte--rail .wf-ligne{ min-height: 52px; padding: 6px 6px 6px 12px; }
.wf-form-carte--rail .wf-ligne-total{ min-width: 96px; }
.wf-form-carte--rail .wf-form-ligne{ grid-template-columns: 1fr; }

/* ============================== 7. « Ce que le recto ne dit pas » (bande Encre, 4 tuiles égales) ============================== */
.wf-chiffres{ padding-block: clamp(44px, 4.6vw, 64px); }
.wf-chiffres-grille{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.wf-chiffre{ --wf-fond: #221E40; display: flex; flex-direction: column; padding: 10px; border-radius: 24px; background: #221E40; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.wf-chiffre-photo{ aspect-ratio: 16 / 10; border-radius: 18px; flex: none; }
.wf-chiffre-corps{ display: flex; flex-direction: column; gap: 6px; padding: 16px 10px 8px; flex: 1; }
.wf-chiffre-n{ font: 800 clamp(44px, 3.9vw, 64px)/1 var(--sb-texte); letter-spacing: -.02em; color: var(--sb-accent-clair); font-variant-numeric: tabular-nums; }
.wf-chiffre-lib{ font: 700 17px/1.25 var(--sb-texte); color: #fff; }
.wf-chiffre-txt{ font-size: 15px; line-height: 1.45; color: #D3CFE8; }
.wf-chiffre-src{ margin-top: auto; padding-top: 8px; font-size: 12.5px; line-height: 1.4; color: #BDB8D8; }
.wf-chiffre-src a{ color: var(--sb-accent-clair); text-underline-offset: 3px; }

/* ============================== 8. Le comparateur des chaînes ============================== */
.wf-sec-comp{ padding-block: clamp(40px, 4.4vw, 56px); }
.wf-comp{ border-radius: var(--sb-rayon-grand); box-shadow: var(--sb-ombre); padding-bottom: 26px; }
.wf-comp-tete{ display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 26px 32px 18px; }
.wf-comp-titre{ font: 400 clamp(26px, 3vw, 40px)/1.05 var(--sb-titre); }
.wf-comp-sous{ margin-top: 8px; max-width: 64ch; font-size: 16px; line-height: 1.45; color: var(--sb-doux); }
.wf-bascule{ display: inline-flex; flex: none; gap: 2px; padding: 4px; border-radius: 999px; background: var(--sb-surf); }
.wf-bascule button{ min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--sb-encre); font: 700 14.5px/1 var(--sb-texte); cursor: pointer; white-space: nowrap; transition: background .2s ease, color .2s ease; }
.wf-bascule button[aria-checked="true"]{ background: var(--sb-encre); color: #fff; }
.wf-comp-liste{ list-style: none; margin: 0; padding: 0 32px; display: grid; gap: 6px; }
.wf-comp-liste[hidden]{ display: none; }
.wf-comp-ligne{
	display: flex; align-items: center; justify-content: space-between; gap: 16px; width: var(--l); min-width: min(100%, 440px); min-height: 56px;
	padding: 6px 6px 6px 22px; border-radius: 999px; background: var(--sb-filet); color: var(--sb-encre);
}
.wf-comp-ligne.est-premiere{ background: var(--sb-accent); color: #fff; }
.wf-comp-nom{ min-width: 0; }
.wf-comp-chaine{ display: block; font: 700 16.5px/1.2 var(--sb-texte); color: inherit; text-decoration: none; }
.wf-comp-chaine:hover{ text-decoration: underline; text-underline-offset: 3px; }
.wf-comp-detail{ display: block; margin-top: 1px; font-size: 13px; line-height: 1.3; color: var(--sb-doux); }
.wf-comp-ligne.est-premiere .wf-comp-detail{ color: rgba(255,255,255,.94); }
.wf-comp-ligne.est-premiere .wf-frais{ padding: 0 8px; border-radius: 999px; background: #fff; color: var(--wf-frais); }
.wf-comp-total{ flex: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; min-width: 128px; height: 44px; padding: 0 16px; border-radius: 999px; text-align: right; font-variant-numeric: tabular-nums; }
.wf-comp-total b{ font: 800 18px/1.1 var(--sb-texte); }
.wf-comp-total small{ font-size: 11.5px; line-height: 1.2; color: var(--sb-doux); }
.wf-comp-mini{ display: none; }
.wf-comp-notes{ display: grid; gap: 6px; padding: 18px 32px 0; font-size: 14px; line-height: 1.45; color: var(--sb-doux); }
.wf-comp-notes b{ color: var(--sb-encre); }
.wf-comp-releve{ display: flex; align-items: flex-start; gap: 8px; }
.wf-comp-releve .wf-etoile{ width: 16px; height: 16px; margin-top: 2px; color: var(--sb-accent); }
/* C2 : état final par défaut. Les barres ne se « remplissent » que si le script a ARMÉ le comparateur
   (IntersectionObserver présent, mouvement non réduit, comparateur sous le pli au chargement). */
@media (prefers-reduced-motion: no-preference){
	.wf-arme:not(.est-visible) .wf-comp-ligne:not(.est-affichee){ clip-path: inset(0 100% 0 0 round 999px); }
	.wf-arme .wf-comp-ligne{ transition: clip-path .8s cubic-bezier(.3,.7,.2,1); transition-delay: calc(var(--i, 0) * 90ms); }
}

.wf-loupe{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.wf-loupe-carte{ display: grid; gap: 8px; padding: 22px 24px 22px; }
.wf-loupe-carte b{ font-size: 19px; }
.wf-loupe-carte span{ font-size: 15px; color: var(--sb-doux); }
.wf-loupe-carte a{ font-weight: 700; color: var(--sb-accent); }

/* ============================== 9. Trois portes ============================== */
.wf-portes-grille{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.wf-porte{ --wf-fond: #fff; display: flex; flex-direction: column; padding: 12px; border-radius: var(--sb-rayon-grand); background: #fff; box-shadow: var(--sb-ombre); }
.wf-porte-photo{ flex: 1 1 auto; min-height: 220px; border-radius: 24px; }
.wf-porte-photo img, .wf-porte-photo .wf-repli, .wf-resilier-photo img, .wf-resilier-photo .wf-repli{ position: absolute; inset: 0; width: 100%; height: 100%; }
.wf-porte-corps{ display: grid; gap: 10px; justify-items: start; padding: 18px 12px 10px; }
.wf-porte h3{ font: 400 clamp(24px, 2.1vw, 30px)/1.05 var(--sb-titre); letter-spacing: -.01em; }
.wf-porte p{ font-size: 16px; line-height: 1.45; color: var(--sb-doux); }
.wf-porte--encre{ --wf-fond: #17142E; background: var(--sb-fonce); color: #fff; }
.wf-porte--encre p{ color: #D3CFE8; }

/* ============================== 10. Onze villes ============================== */
.wf-villes{ padding-block: clamp(44px, 4.4vw, 52px); }
.wf-mosaique{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.wf-ville-tuile a{ --wf-fond: var(--sb-surf); position: relative; display: block; border-radius: 24px; color: inherit; text-decoration: none; }
.wf-ville-photo{ aspect-ratio: 2 / 1; border-radius: 24px; box-shadow: var(--sb-ombre); transition: transform .3s ease, box-shadow .3s ease; }
.wf-ville-tuile a:hover .wf-ville-photo{ transform: translateY(-4px); box-shadow: var(--sb-ombre-forte); }
.wf-etiquette--ville{ top: 12px; bottom: auto; left: 12px; font-size: 14px; }
.wf-ville-nb{ position: absolute; z-index: 4; left: 12px; bottom: 12px; padding: 5px 11px; border-radius: 999px; background: rgba(23,20,46,.86); color: #fff; font: 600 12.5px/1.1 var(--sb-texte); white-space: nowrap; }
.wf-ville-tuile--toutes a{ display: flex; align-items: center; justify-content: center; height: 100%; min-height: 100%; border-radius: 24px; background: var(--sb-accent); color: #fff; box-shadow: var(--sb-ombre); transition: background .2s ease, transform .3s ease; }
.wf-ville-tuile--toutes a:hover{ background: var(--wf-orchidee-fonce); transform: translateY(-4px); }
.wf-ville-toutes{ display: grid; gap: 6px; justify-items: center; padding: 16px 24px; text-align: center; }
.wf-ville-toutes .wf-etoile{ width: 26px; height: 26px; }
.wf-ville-toutes b{ font: 400 24px/1.05 var(--sb-titre); }
.wf-ville-toutes small{ font-size: 13.5px; line-height: 1.35; color: #fff; opacity: .95; max-width: 26ch; }

/* ============================== 11. Cartes d'article et grilles ============================== */
.wf-carte{ --wf-fond: #fff; position: relative; overflow: hidden; border-radius: 24px; background: #fff; box-shadow: var(--sb-ombre); transition: transform .3s ease, box-shadow .3s ease; }
.wf-carte::before{ content: ""; position: absolute; z-index: 6; top: 0; left: 0; right: 0; height: 8px; background: var(--sb-fonce); transform: translateY(-100%); transition: transform .28s ease; }
.wf-carte:hover, .wf-carte:focus-within{ transform: translateY(-4px); box-shadow: var(--sb-ombre-forte); }
.wf-carte:hover::before, .wf-carte:focus-within::before{ transform: none; }
.wf-carte-lien{ display: flex; flex-direction: column; height: 100%; padding: 10px; color: inherit; text-decoration: none; }
.wf-carte-photo{ flex: none; aspect-ratio: 16 / 10; border-radius: 18px; }
.wf-carte-corps{ display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 16px 8px 10px; }
.wf-carte-titre{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font: 700 19px/1.28 var(--sb-texte); color: var(--sb-encre); }
.wf-carte-extrait{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 15.5px; line-height: 1.5; color: var(--sb-doux); }
.wf-carte-meta{ display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; font-size: 14px; font-weight: 500; color: var(--sb-doux); }
.wf-carte-lien:hover .wf-carte-titre{ color: var(--sb-accent); }

.wf-carte--grande .wf-carte-photo{ flex: 1 1 auto; aspect-ratio: auto; min-height: 220px; }
.wf-carte--grande .wf-carte-photo img, .wf-carte--grande .wf-carte-photo .wf-repli{ position: absolute; inset: 0; width: 100%; height: 100%; }
.wf-carte--grande .wf-carte-corps{ flex: none; }
.wf-carte--grande .wf-carte-titre{ font-size: clamp(22px, 2vw, 27px); -webkit-line-clamp: 3; }

.wf-grille{ display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 24px; }

/* Les guides : 1 grande carte (2 colonnes × 2 rangées) + les autres, sans jamais de case vide. */
.wf-guides{ padding-block: clamp(44px, 4.4vw, 52px); }
.wf-guides .wf-sec-tete{ margin-bottom: 22px; }
.wf-guides-grille{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.wf-guides-grille .wf-carte--grande{ grid-column: span 2; grid-row: span 2; }
.wf-guides .wf-carte:not(.wf-carte--grande) .wf-carte-photo{ aspect-ratio: 2.1 / 1; }
.wf-guides .wf-carte:not(.wf-carte--grande) .wf-carte-titre{ font-size: 18px; -webkit-line-clamp: 2; }
.wf-guides .wf-carte:not(.wf-carte--grande) .wf-carte-corps{ padding-top: 12px; }
/* 2 guides : la grande + une carte qui occupe le reste ; 3 guides : deux cartes horizontales ; 4 : la dernière s'élargit ; 1 : pleine largeur */
.wf-guides-grille--n2 .wf-carte:nth-child(2){ grid-column: span 2; grid-row: span 2; }
.wf-guides-grille--n2 .wf-carte:nth-child(2) .wf-carte-photo{ flex: 1 1 auto; aspect-ratio: auto; min-height: 180px; }
.wf-guides-grille--n3 .wf-carte:not(.wf-carte--grande), .wf-guides-grille--n4 .wf-carte:nth-child(4){ grid-column: span 2; }
.wf-guides-grille--n3 .wf-carte:not(.wf-carte--grande) .wf-carte-lien, .wf-guides-grille--n4 .wf-carte:nth-child(4) .wf-carte-lien{ flex-direction: row; gap: 14px; }
.wf-guides-grille--n3 .wf-carte:not(.wf-carte--grande) .wf-carte-photo, .wf-guides-grille--n4 .wf-carte:nth-child(4) .wf-carte-photo{ flex: 0 0 42%; aspect-ratio: auto; min-height: 150px; }
.wf-guides-grille--n3 .wf-carte:not(.wf-carte--grande) .wf-carte-photo img, .wf-guides-grille--n4 .wf-carte:nth-child(4) .wf-carte-photo img{ position: absolute; inset: 0; width: 100%; height: 100%; }
.wf-guides-grille--n3 .wf-carte:not(.wf-carte--grande) .wf-carte-corps, .wf-guides-grille--n4 .wf-carte:nth-child(4) .wf-carte-corps{ padding: 6px 8px 6px 0; justify-content: center; }
.wf-guides-grille--n1 .wf-carte{ grid-column: 1 / -1; }
.wf-guides-grille--n1 .wf-carte-lien{ flex-direction: row; gap: 24px; }
.wf-guides-grille--n1 .wf-carte-photo{ flex: 0 0 48%; aspect-ratio: 16 / 9; }
.wf-guides-grille--n1 .wf-carte-corps{ justify-content: center; }
.wf-guides-grille--n1 .wf-carte-titre{ font-size: 28px; }

/* ============================== 12. Résilier sans se faire reprélever ============================== */
.wf-resilier{ padding-block: clamp(44px, 4.8vw, 64px); }
.wf-resilier-in{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.wf-resilier-photo{ --wf-fond: #F6E3FB; height: clamp(360px, 36vw, 500px); border-radius: 28px; box-shadow: var(--sb-ombre-forte); }
.wf-resilier-texte h2{ font-size: clamp(28px, 3.3vw, 42px); }
.wf-resilier-liste{ list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; }
.wf-resilier-liste a{ display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 10px 20px; border-radius: 18px; background: #fff; color: var(--sb-encre); font: 700 17px/1.3 var(--sb-texte); text-decoration: none; box-shadow: 0 1px 2px rgba(23,20,46,.06); transition: transform .2s ease, color .2s ease; }
.wf-resilier-liste a:hover{ transform: translateX(4px); color: var(--sb-accent); }
.wf-resilier-liste .wf-picto{ color: var(--sb-accent); }
.wf-resilier-actions{ margin-top: 22px; }
.wf-pont{ margin-top: 26px; font: 700 19px/1.4 var(--sb-texte); }
.wf-pont a{ display: inline-flex; align-items: center; gap: 8px; color: var(--sb-accent); text-underline-offset: 4px; }

/* ============================== 13. Pied de page (la piste magnétique du site entier) ============================== */
.wf-footer{ padding-block: 0 0; background: var(--sb-fonce); color: #fff; }
.wf-footer a{ color: #DAD6EE; }
.wf-footer a:hover{ color: #fff; }
.wf-footer-in{ padding-block: 40px 0; }
.wf-footer-independance{ display: flex; align-items: center; gap: 14px; margin-bottom: 36px; padding: 20px 26px; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: rgba(255,255,255,.06); }
.wf-footer-independance .wf-etoile{ width: 24px; height: 24px; color: var(--sb-accent-clair); }
.wf-footer-independance p{ font: 600 17px/1.45 var(--sb-texte); color: #fff; }
.wf-footer-grille{ display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.25fr; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.14); }
.wf-footer .sbt-footer-colonne .sbt-t4{ margin: 0 0 14px; font: 700 15px/1.2 var(--sb-texte); text-transform: none; letter-spacing: 0; color: var(--sb-accent-clair); }
.wf-footer-logo, .wf-footer .sbt-footer-logo{ display: inline-flex; margin-bottom: 14px; }
.wf-footer .wf-logo{ font-size: 25px; }
.wf-footer-desc{ max-width: 30ch; font-size: 15px; line-height: 1.5; color: #D3CFE8; }
.wf-footer-contact-t{ margin: 20px 0 10px; font-size: 14.5px; color: #D3CFE8; }
.wf-footer .sbt-footer-colonne ul{ gap: 7px; }
.wf-footer .sbt-footer-colonne ul a{ font-size: 14.5px; line-height: 1.35; }
.wf-footer-bloc + .wf-footer-bloc{ margin-top: 16px; }
.wf-footer-rub{ display: inline-block; margin-bottom: 8px; font: 700 15.5px/1.3 var(--sb-texte); color: #fff; text-decoration: none; }
.wf-footer-rub:hover{ text-decoration: underline; text-underline-offset: 3px; }
.wf-footer .wf-footer-villes{ display: grid; grid-template-columns: 1fr 1fr; gap: 9px 22px; }
.wf-footer-bas{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 22px 0 26px; font-size: 14px; color: #C4C0DC; }
.wf-footer-annexes{ display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.wf-footer a.wf-btn--clair, .wf-footer a.wf-btn--clair:hover{ color: var(--sb-encre); }
@media (max-width: 980px){ .wf-footer-grille{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; } }
@media (max-width: 560px){ .wf-footer-grille{ grid-template-columns: minmax(0, 1fr); } .wf-footer-independance{ padding: 16px 18px; } }

.wf-cookies{ max-height: none; padding: 12px 14px; border-radius: 16px; }
.wf-cookies p{ font-size: 13px; line-height: 1.35; }
.wf-cookies .wf-btn--petit{ min-height: 40px; padding: 0 18px; font-size: 14px; }
@media (max-width: 600px){
	.wf-cookies{ flex-wrap: wrap; }
	.wf-cookies p{ flex-basis: 100%; }
	.wf-cookies .sbt-cookies-actions{ width: 100%; }
	.wf-cookies .sbt-cookies-actions .wf-btn{ flex: 1; }
}

/* ============================== 14. Rubrique : bande piste magnétique, photo-carte qui plonge ============================== */
.wf-rub-tete{ position: relative; z-index: 2; padding-block: 28px 0; }
.wf-rub-tete-in{ display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 56px; align-items: end; }
.wf-rub-titres{ padding-bottom: 44px; min-width: 0; }
.wf-rub-tete .sbt-fil-ariane{ padding-block: 0 18px; color: #C9C5DE; }
.wf-rub-tete .sbt-fil-ariane a{ color: #DAD6EE; }
.wf-rub-tete .sbt-fil-ariane a:hover{ color: #fff; }
.wf-rub-tete h1{ font-size: clamp(32px, 3.6vw, 58px); line-height: 1.02; color: var(--sb-surf); }
.wf-rub-chapo{ margin-top: 16px; max-width: 58ch; font-size: 19px; line-height: 1.5; color: #D9D5EE; }
.wf-rub-nb{ display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font: 700 15px/1 var(--sb-texte); color: var(--sb-accent-clair); }
.wf-rub-nb .wf-etoile{ width: 16px; height: 16px; }
.wf-rub-photo{ --wf-fond: #17142E; position: relative; z-index: 3; width: 360px; height: 300px; margin-bottom: -110px; box-shadow: var(--sb-ombre-forte); }
.wf-rub-liste{ padding-top: 28px; padding-bottom: clamp(56px, 6vw, 88px); }
.wf-rub-pastilles{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 98px; max-width: calc(100% - 400px); }
.wf-rub-pastilles a{ display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 2px solid var(--sb-filet); border-radius: 999px; background: #fff; color: var(--sb-encre); font: 600 15px/1 var(--sb-texte); text-decoration: none; transition: border-color .15s ease, background .15s ease; }
.wf-rub-pastilles a:hover{ border-color: var(--sb-accent); }
.wf-rub-pastilles a.est-actif{ background: var(--sb-encre); border-color: var(--sb-encre); color: #fff; }
.wf-rub-grille{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.wf-rub-grille > .wf-carte{ grid-column: span 2; }
.wf-carte--cachee{ display: none; }
.wf-rub-grille.est-complete > .wf-carte--moitie{ grid-column: span 3; }
.wf-rub-grille.est-complete > .wf-carte--seule{ grid-column: 1 / -1; }
.wf-rub-grille.est-complete > .wf-carte--seule .wf-carte-lien{ flex-direction: row; gap: 24px; }
.wf-rub-grille.est-complete > .wf-carte--seule .wf-carte-photo{ flex: 0 0 46%; aspect-ratio: 16 / 9; }
.wf-rub-grille.est-complete > .wf-carte--seule .wf-carte-corps{ justify-content: center; }
.wf-rub-grille.est-complete > .wf-carte--seule .wf-carte-titre{ font-size: 26px; }
.wf-plus{ display: flex; justify-content: center; margin-top: 32px; }
.wf-vide{ font-size: 18px; color: var(--sb-doux); }
.wf-vide a{ color: var(--sb-accent); font-weight: 700; }
.wf-rub-suite{ margin-top: 40px; border-radius: 20px; background: #fff; box-shadow: var(--sb-ombre); }
.wf-rub-suite summary{ cursor: pointer; padding: 18px 24px; font: 700 17px/1.3 var(--sb-texte); list-style: none; }
.wf-rub-suite summary::-webkit-details-marker{ display: none; }
.wf-rub-suite p{ padding: 0 24px 22px; max-width: 70ch; color: var(--sb-doux); }

.wf-bientot{ border-radius: var(--sb-rayon-grand); }
.wf-bientot-in{ display: grid; justify-items: start; gap: 14px; padding: 36px 40px 28px; }
.wf-bientot-etoile{ width: 36px; height: 36px; color: var(--sb-accent); }
.wf-bientot h2{ font-size: clamp(26px, 3vw, 36px); }
.wf-bientot p{ max-width: 56ch; color: var(--sb-doux); }
.wf-prevus{ padding: 0 40px 36px; }
.wf-prevus-t{ margin-bottom: 12px; font: 700 15px/1.2 var(--sb-texte); color: var(--sb-doux); }
.wf-prevus ul{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wf-prevu{ display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 2px dashed #C4C8DC; border-radius: 16px; color: var(--sb-doux); font: 600 16px/1.35 var(--sb-texte); }
.wf-prevu-tag{ flex: none; padding: 3px 10px; border-radius: 999px; background: var(--sb-filet); color: var(--sb-encre); font: 700 12px/1.3 var(--sb-texte); }

.wf-mosaique--hub{ margin-top: 0; }
.wf-hub-bas{ display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 48px; }
.wf-hub-simu .wf-form-carte{ width: 100%; }
.wf-hub-regles h2{ font-size: clamp(24px, 2.6vw, 34px); }
.wf-hub-regles ul{ list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.wf-regle{ display: grid; gap: 4px; padding: 18px 22px; border-radius: 18px; background: #fff; box-shadow: var(--sb-ombre); }
.wf-regle b{ font: 700 18px/1.2 var(--sb-texte); }
.wf-regle span{ font-size: 16px; line-height: 1.5; color: var(--sb-doux); }
.wf-regle-src{ margin-top: 14px; font-size: 14px; color: var(--sb-doux); }

/* ============================== 15. Article : en-tête (verso + photo-recto alignée), corps, blocs ============================== */
.wf-article{ display: block; }
.wf-ariane{ padding-block: 18px 14px; }
.wf-art-tete{ padding: 0 0 56px; }
.wf-art-tete-in{ display: grid; grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); gap: 48px; align-items: stretch; }
.wf-art-verso{ display: flex; flex-direction: column; border-radius: 28px; box-shadow: var(--sb-ombre-forte); }
.wf-art-verso-in{ display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px 36px 30px; }
.wf-art-pastille{ display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 11px; border-radius: 999px; background: var(--wf-voile); color: var(--sb-encre); font: 700 14px/1 var(--sb-texte); text-decoration: none; }
.wf-art-pastille .wf-etoile{ width: 14px; height: 14px; color: var(--sb-accent); }
.wf-art-pastille:hover{ background: var(--sb-accent); color: #fff; }
.wf-art-pastille:hover .wf-etoile{ color: #fff; }
.wf-art-verso h1{ font-size: clamp(30px, 3.2vw, 54px); line-height: 1.04; }
.wf-art-chapo{ font-size: 19px; line-height: 1.5; color: var(--sb-doux); }
.wf-art-meta{ margin: auto 0 0; padding-top: 16px; width: 100%; border-top: 1px dashed #C4C8DC; gap: 6px 12px; font-size: 14.5px; }
.wf-art-meta img, .wf-art-meta svg.avatar{ width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.wf-art-photo-col{ position: relative; margin-top: 90px; }
.wf-art-photo-col::before{ content: ""; position: absolute; z-index: 0; inset: 18px -18px -18px 18px; border-radius: 28px; background: var(--wf-voile); }
.wf-art-photo{ --wf-fond: var(--sb-surf); position: relative; z-index: 1; height: 100%; min-height: 300px; box-shadow: var(--sb-ombre); }
.wf-art-photo img, .wf-art-photo .wf-repli{ position: absolute; inset: 0; width: 100%; height: 100%; }
.wf-art-pastille-photo{ position: absolute; z-index: 3; right: 28px; bottom: -17px; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--sb-encre); color: #fff; font: 700 13.5px/1 var(--sb-texte); white-space: nowrap; box-shadow: 0 10px 22px -10px rgba(23,20,46,.6); }
.wf-art-pastille-photo .wf-etoile{ width: 14px; height: 14px; color: var(--sb-accent-clair); }

.sbt-article-mise-en-page{ column-gap: 56px; padding-top: 8px; padding-bottom: clamp(56px, 6vw, 80px); }
.sbt-article-corps{ padding: 44px 48px 40px; border-radius: 28px; background: #fff; box-shadow: var(--sb-ombre); font-size: 19px; line-height: 1.65; }
.sbt-article-corps > :first-child{ margin-top: 0; }
.sbt-article-corps > :last-child{ margin-bottom: 0; }

/* typographie de lecture commune (article, accordéons de ville, pages) */
.sbt-article-corps h2, .wf-acc-corps h3, .wf-texte h2{ font-family: var(--sb-titre); font-weight: 400; letter-spacing: -.01em; line-height: 1.1; color: var(--sb-encre); }
.sbt-article-corps h2{ margin-top: 2.1em; font-size: clamp(24px, 2.3vw, 31px); }
.sbt-article-corps h3, .wf-acc-corps h3{ margin-top: 1.7em; font: 700 21px/1.3 var(--sb-texte); letter-spacing: 0; }
.sbt-article-corps a:not(.wf-btn):not(.wf-src-lien), .wf-acc-corps a:not(.wf-btn), .wf-texte a{ color: var(--sb-accent); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.sbt-article-corps a:not(.wf-btn):hover, .wf-acc-corps a:hover, .wf-texte a:hover{ color: var(--wf-orchidee-fonce); }
.sbt-article-corps ul, .sbt-article-corps ol, .wf-acc-corps ul, .wf-acc-corps ol, .wf-texte ul, .wf-texte ol{ padding-left: 1.3em; margin: 0 0 1.3em; }
.sbt-article-corps li, .wf-acc-corps li, .wf-texte li{ margin-bottom: .5em; }
.sbt-article-corps li::marker, .wf-acc-corps li::marker, .wf-texte li::marker{ color: var(--sb-accent); font-weight: 700; }
.sbt-article-corps img:not(.avatar){ aspect-ratio: 3 / 2; max-height: 420px; object-fit: cover; }
.sbt-article-corps strong, .wf-acc-corps strong{ font-weight: 700; }

/* tableaux défilables, en-têtes jamais coupés */
.sbs_tableau{ margin: 1.8em 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--sb-filet); border-radius: 18px; }
.sbs_tableau table{ width: 100%; min-width: 520px; border-collapse: collapse; font-size: 16px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.sbs_tableau th{ padding: 13px 16px; background: var(--sb-encre); color: #fff; text-align: left; font: 700 14.5px/1.3 var(--sb-texte); white-space: nowrap; }
.sbs_tableau td{ padding: 12px 16px; border-top: 1px solid var(--sb-filet); vertical-align: top; }
.sbs_tableau tbody tr:nth-child(even) td{ background: #F7F8FC; }
.sbs_tableau td:first-child{ font-weight: 700; }

/* infographies du socle (shortcodes [sbs_…]) : jamais de texte brut, jamais de bloc écrasé */
.sbs_tarifs, .sbs_frise, .sbs_jauges, .sbs_lieu{ display: block; margin: 1.8em 0; padding: 22px 26px; border-radius: 20px; background: var(--sb-surf); border: 1px solid var(--sb-filet); }
.sbs_tarifs_titre, .sbs_frise_titre, .sbs_jauges_titre, .sbs_lieu_nom{ display: block; margin-bottom: 14px; font: 700 18px/1.3 var(--sb-texte); }
.sbs_tarif{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; align-items: center; gap: 14px; padding: 7px 0; }
.sbs_tarif_libelle, .sbs_jauge_libelle, .sbs_etape_desc, .sbs_source, .sbs_tarifs_notes, .sbs_lieu_acces{ font-size: 14.5px; color: var(--sb-doux); }
.sbs_tarif_barre{ width: 100%; height: 14px; border: 0; border-radius: 999px; background: var(--sb-filet); overflow: hidden; }
.sbs_tarif_barre::-webkit-meter-bar{ height: 14px; border: 0; border-radius: 999px; background: var(--sb-filet); }
.sbs_tarif_barre::-webkit-meter-optimum-value{ background: var(--sb-accent); border-radius: 999px; }
.sbs_tarif_barre::-moz-meter-bar{ background: var(--sb-accent); border-radius: 999px; }
.sbs_tarif_prix{ font: 800 17px/1.2 var(--sb-texte); font-variant-numeric: tabular-nums; }
.sbs_jauges{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.sbs_jauges_titre, .sbs_jauges .sbs_source{ grid-column: 1 / -1; margin-bottom: 0; }
.sbs_jauge{ display: grid; gap: 2px; padding: 14px 16px; border-radius: 16px; background: #fff; }
.sbs_jauge_valeur{ font: 800 34px/1.1 var(--sb-texte); font-variant-numeric: tabular-nums; color: var(--sb-encre); }
.sbs_etape{ display: grid; gap: 2px; padding: 10px 0 10px 18px; border-left: 3px solid var(--sb-accent); }
.sbs_etape_date{ font-weight: 700; color: var(--sb-accent); }
.sbs_etape_titre{ font-weight: 700; }
.sbs_source{ display: block; margin-top: 12px; }
.sbs_lieu_adresse{ display: block; font-style: normal; margin-bottom: 6px; }
.sbs_lieu_carte{ display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 700; }
.sbs_icone_repere{ fill: var(--sb-accent); }

/* blocs visuels tirés du texte */
.wf-bloc{ margin: 2em 0; }
.wf-bloc-etiquette{ display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font: 700 15px/1.2 var(--sb-texte); color: var(--sb-encre); }
.wf-bloc-etiquette .wf-etoile{ width: 16px; height: 16px; color: var(--sb-accent); }
.wf-bloc--repere{ padding: 20px 24px 24px; border-radius: 22px; background: var(--wf-voile); }
.wf-repere-phrase{ margin: 0 !important; padding: 16px 20px; border-radius: 14px; font: 700 20px/1.4 var(--sb-texte); letter-spacing: -.005em; }
.wf-etapes{ list-style: none !important; margin: 1.8em 0 !important; padding: 0 !important; display: grid; gap: 12px; }
.wf-etape{ display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; margin: 0 !important; padding: 16px 20px; border-radius: 18px; background: var(--sb-surf); }
.wf-etape-n{ display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sb-encre); color: #fff; font: 800 18px/1 var(--sb-texte); }
.wf-etape-corps > :last-child{ margin-bottom: 0; }
.wf-fiches{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 1.8em 0; }
.wf-fiches--impair .wf-fiche:last-child{ grid-column: 1 / -1; }
.wf-fiche{ display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-content: start; padding: 18px 20px; border-radius: 18px; background: var(--sb-surf); }
.wf-fiche-marque, .wf-fiche-n{ grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--sb-accent); font: 800 16px/1 var(--sb-texte); }
.wf-fiche-marque .wf-etoile{ width: 18px; height: 18px; }
.wf-fiche-n{ background: var(--sb-encre); color: #fff; }
.wf-fiche p{ margin: 0 !important; font-size: 16.5px; line-height: 1.5; }
.wf-fiche-titre{ font-weight: 700; color: var(--sb-encre); }
.wf-fiche-precision{ display: block; font-weight: 500; font-size: 14px; color: var(--sb-doux); }
.wf-fiche-texte{ grid-column: 2; margin-top: 4px !important; }
.wf-maillage-titre{ font: 700 17px/1.3 var(--sb-texte); margin: 2em 0 .6em; }

/* sources : le verso */
.sbt-article-corps .wf-sources{ margin: 2.4em 0 0; padding: 0; border: 1px solid var(--sb-filet); border-radius: 24px; box-shadow: none; }
.wf-sources-titre, .sbt-article-corps .wf-sources-titre{ margin: 0; padding: 22px 28px 0; font: 400 24px/1.1 var(--sb-titre); }
.wf-sources-intro{ padding: 8px 28px 0; font-size: 15px !important; line-height: 1.5; color: var(--sb-doux); margin-bottom: 0 !important; }
.wf-sources-liste{ list-style: none !important; margin: 14px 0 0 !important; padding: 0 28px 10px !important; display: grid; }
.wf-sources-liste li{ display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 !important; padding: 13px 0; border-top: 1px solid var(--sb-filet); }
.wf-src-corps{ display: grid; gap: 2px; min-width: 0; }
.wf-src-lien{ font-weight: 700; color: var(--sb-encre); text-decoration: underline; text-decoration-color: var(--sb-accent); text-underline-offset: 3px; overflow-wrap: anywhere; }
.wf-src-meta{ font-size: 14px; color: var(--sb-doux); }
.wf-src-date{ flex: none; padding: 6px 12px; font: 700 13px/1.25 var(--sb-texte); text-align: right; font-variant-numeric: tabular-nums; }
.wf-src-date small{ font-weight: 500; color: var(--sb-doux); }

/* ============================== 16. Rail d'article : sommaire + simulateur, UN seul bloc collant ============================== */
.sbt-rail{ top: calc(var(--wf-entete) + 20px); gap: 16px; border-left: 0; padding-left: 0; }
.sbt-rail-carte{ border: 0; border-radius: 20px; padding: 0; box-shadow: var(--sb-ombre); }
.sbt-rail-carte--sommaire{ position: relative; overflow: hidden; background: #fff; }
.sbt-rail-carte--sommaire::before{ content: ""; display: block; height: 8px; background: var(--sb-fonce); }
.sbt-sommaire{ padding: 12px 18px 14px; border: 0; border-radius: 0; background: transparent; }
.sbt-sommaire-titre{ display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 700 16px/1.3 var(--sb-texte); }
.sbt-sommaire-titre::after{ content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--sb-surf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A21CC4' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .25s ease; }
.sbt-sommaire[open] > .sbt-sommaire-titre::after{ transform: rotate(180deg); }
.sbt-sommaire:not([open]) .sbt-sommaire-titre{ display: block; }
.sbt-sommaire:not([open]) .sbt-sommaire-titre::before{ content: attr(data-n) " parties · ouvrir"; float: right; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--sb-accent); }
.sbt-sommaire:not([open]) .sbt-sommaire-titre::after{ display: none; }
.sbt-sommaire ol{ gap: 0; margin-top: 8px; }
.sbt-sommaire li a{ gap: 10px; padding: 5px 0; font-size: 14.5px; line-height: 1.3; font-weight: 500; }
.sbt-sommaire-num{ width: 22px; height: 22px; font: 700 11px/1 var(--sb-texte); }
.wf-rail-lien{ padding-bottom: 22px; }
.wf-rail-lien > *{ margin-inline: 20px; }
.wf-rail-lien-titre{ margin-top: 18px; font: 700 19px/1.25 var(--sb-texte); }
.wf-rail-lien p + p{ margin-top: 6px; color: var(--sb-doux); font-size: 15.5px; }
.wf-rail-lien .wf-btn{ margin-top: 16px; width: calc(100% - 40px); }
.sbt-sommaire-mobile .sbt-sommaire{ padding: 14px 18px; border: 0; border-radius: 20px; background: #fff; box-shadow: var(--sb-ombre); }

/* « À lire aussi » pleine largeur, sans case vide */
.wf-alire{ padding: 0 0 clamp(56px, 6vw, 88px); }
.wf-alire-t{ margin-bottom: 24px; font-size: clamp(26px, 3vw, 36px); }
.wf-pilules{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.wf-pilules a{ display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border: 2px solid var(--sb-filet); border-radius: 999px; background: #fff; color: var(--sb-encre); font: 700 16px/1 var(--sb-texte); text-decoration: none; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.wf-pilules a:hover{ border-color: var(--sb-accent); color: var(--sb-accent); }
.wf-pilules a.wf-pilule--hub{ background: var(--sb-encre); border-color: var(--sb-encre); color: #fff; }

/* ============================== 17. Surcharges des blocs figés (habillage uniquement) ============================== */
.sbt-fil-ariane{ font-size: 14px; }
.sbt-fil-ariane a:hover{ color: var(--sb-accent); }
.sbt-faq-liste summary::after{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A21CC4' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E"); }
.sbt-faq{ margin: 2.4em 0; padding: 26px; }
.sbt-encadre-titre, .sbt-auteur-sur, .sbt-auteur-role, .sbt-auteur-der p{ text-transform: none; letter-spacing: 0; }
.sbt-encadre-titre{ font-size: 15px; }
.sbt-auteur-role{ font-size: .875rem; }
.sbt-auteur-sur, .sbt-auteur-der p{ font-size: .8125rem; }
.sbt-auteur{ margin-top: 40px; }
.sbt-auteur-actions .sbt-btn{ background: var(--sb-accent); color: #fff; }
.sbt-auteur-actions .sbt-btn:hover{ background: var(--wf-orchidee-fonce); color: #fff; }

/* ============================== 18. Page ville ============================== */
.wf-hero--ville h1{ font-size: clamp(28px, 3.5vw, 52px); }
.wf-hero--ville .sbt-fil-ariane{ padding-block: 0 14px; }
.wf-hero--ville .wf-etiquette--ville{ top: 22px; left: 20px; bottom: auto; font-size: 15px; }
.wf-ville-faits{ margin-top: 18px; max-width: 52ch; font-size: 16px; line-height: 1.5; color: var(--sb-doux); }
.wf-ville-faits b{ color: var(--sb-encre); }
.wf-ville-corps{ display: grid; grid-template-columns: minmax(0, 64fr) minmax(0, 36fr); gap: 48px; align-items: start; padding-block: 24px clamp(48px, 5vw, 72px); }
.wf-ville-col{ display: grid; gap: 28px; min-width: 0; }
.wf-ville-col .wf-comp{ margin: 0; }
.wf-ville-col .wf-comp-tete{ padding: 22px 26px 14px; }
.wf-ville-col .wf-comp-liste{ padding: 0 26px; }
.wf-ville-col .wf-comp-notes{ padding: 16px 26px 0; }
.wf-ville-col .wf-comp-ligne{ min-width: min(100%, 380px); }
.wf-ville-col .sbt-auteur{ margin: 0; }
.wf-ville-texte{ overflow: hidden; border-radius: 28px; }
.wf-ville-texte > :not(.wf-acc){ margin-inline: 28px; }
.wf-ville-texte > p, .wf-ville-texte > ul, .wf-ville-texte > ol{ font-size: 18px; line-height: 1.65; }
.wf-ville-texte > p:first-of-type{ margin-top: 26px; }
.wf-ville-texte > :last-child:not(.wf-acc){ margin-bottom: 26px; }
.wf-acc{ border-top: 1px solid var(--sb-filet); background: #fff; }
.wf-acc summary{ display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 28px; cursor: pointer; list-style: none; transition: background .2s ease; }
.wf-acc summary::-webkit-details-marker{ display: none; }
.wf-acc summary:hover{ background: #F7F8FC; }
.wf-acc summary h2{ margin: 0; font: 700 21px/1.3 var(--sb-texte); letter-spacing: 0; text-wrap: pretty; }
.wf-acc-etoile{ flex: none; width: 28px; height: 28px; color: var(--sb-accent); transition: transform .4s cubic-bezier(.3,.7,.2,1); }
.wf-acc[open] .wf-acc-etoile{ transform: rotate(135deg); }
.wf-acc-etoile .wf-etoile{ width: 100%; height: 100%; }
.wf-acc-corps{ padding: 0 28px 24px; font-size: 18px; line-height: 1.65; }
.wf-acc-corps > :first-child{ margin-top: 0; }
.wf-acc-corps > :last-child{ margin-bottom: 0; }
.wf-acc-corps p{ margin: 0 0 1.1em; }
.wf-ville-rail{ position: sticky; top: calc(var(--wf-entete) + 20px); }
.wf-alire--villes{ padding-top: 8px; }

/* ============================== 19. Pages : sobre, contact, à propos, 404, listes, auteur ============================== */
.wf-page{ padding-block: clamp(32px, 4vw, 56px) clamp(56px, 6vw, 88px); }
.wf-page-panneau{ max-width: 760px; margin-inline: auto; border-radius: 28px; box-shadow: var(--sb-ombre); }
.wf-page-in{ padding: 36px clamp(24px, 5vw, 52px) 44px; }
.wf-page-in h1{ font-size: clamp(30px, 3.4vw, 44px); margin-bottom: 24px; }
.wf-texte{ font-size: 17.5px; line-height: 1.7; }
.wf-texte h2{ margin: 1.9em 0 .6em; font-size: clamp(22px, 2.2vw, 28px); }
.wf-texte p{ margin: 0 0 1.1em; }

.wf-contact{ padding-block: clamp(24px, 3vw, 40px); }
.wf-contact-in{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: stretch; }
.wf-contact-photo{ --wf-fond: var(--sb-surf); min-height: 520px; box-shadow: var(--sb-ombre-forte); }
.wf-contact-photo img, .wf-contact-photo .wf-repli{ position: absolute; inset: 0; width: 100%; height: 100%; }
.wf-contact-verso{ border-radius: var(--sb-rayon-grand); box-shadow: var(--sb-ombre-forte); }
.wf-contact-form{ display: grid; gap: 12px; padding: 22px clamp(20px, 3vw, 36px) 26px; }
.wf-contact-form h1{ font-size: clamp(26px, 2.8vw, 38px); }
.wf-contact-sous{ font-size: 16px; line-height: 1.45; color: var(--sb-doux); }
.wf-contact-sous a{ color: var(--sb-accent); font-weight: 700; }
.wf-contact-sujets{ display: flex; flex-wrap: wrap; gap: 8px; }
.wf-contact-sujets .wf-tuile{ min-height: 44px; padding: 0 16px; }
.wf-champ{ display: grid; gap: 4px; min-width: 0; font: 600 13.5px/1.2 var(--sb-texte); color: var(--sb-encre); }
.wf-champ input, .wf-champ textarea{ width: 100%; min-width: 0; padding: 0 14px; border: 2px solid var(--sb-filet); border-radius: 14px; background: #fff; color: var(--sb-encre); font: 500 16px/1.4 var(--sb-texte); }
.wf-champ input{ height: 46px; }
.wf-champ textarea{ padding-block: 10px; resize: vertical; min-height: 104px; }
.wf-champ input:focus, .wf-champ textarea:focus{ border-color: var(--sb-accent); }
.wf-contact-envoyer{ width: 100%; }

.wf-apropos-tete{ padding-block: 24px clamp(40px, 5vw, 64px); }
.wf-apropos-in{ display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.wf-apropos-texte h1{ font-size: clamp(32px, 4vw, 58px); }
.wf-apropos-chapo{ margin-top: 18px; max-width: 54ch; font-size: 20px; line-height: 1.5; }
.wf-apropos-p{ margin: 14px 0 26px; max-width: 54ch; font-size: 17px; line-height: 1.55; color: var(--sb-doux); }
.wf-carte-absente{ border-radius: var(--sb-rayon-grand); box-shadow: var(--sb-ombre-forte); transform: rotate(1.5deg); }
.wf-carte-absente-in{ padding: 26px 32px 30px; }
.wf-carte-absente-t{ font: 400 26px/1.1 var(--sb-titre); }
.wf-carte-absente ul{ list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 4px; }
.wf-carte-absente li{ padding: 12px 0; border-bottom: 1px solid var(--sb-filet); font: 600 18px/1.3 var(--sb-texte); color: var(--sb-doux); }
.wf-carte-absente s{ text-decoration: none; background: linear-gradient(var(--sb-accent), var(--sb-accent)) 0 52% / 100% 3px no-repeat; }
.wf-carte-absente-s{ margin-top: 20px; padding: 14px 18px; font: 700 16px/1.4 var(--sb-texte); }
.wf-releve-in{ display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.wf-releve-texte h2{ font-size: clamp(28px, 3.3vw, 42px); margin-bottom: 24px; }
.wf-releve-etapes{ list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.wf-releve-etapes li{ display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.wf-releve-n{ display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sb-encre); color: #fff; font: 800 18px/1 var(--sb-texte); }
.wf-releve-etapes b{ display: block; font: 700 18px/1.3 var(--sb-texte); }
.wf-releve-etapes p{ margin-top: 2px; font-size: 16px; line-height: 1.5; color: var(--sb-doux); }
.wf-releve-piece{ margin: 0; }
.wf-releve-photo{ --wf-fond: #fff; aspect-ratio: 8 / 5; box-shadow: var(--sb-ombre); }
.wf-releve-photo img, .wf-releve-photo .wf-repli{ position: absolute; inset: 0; width: 100%; height: 100%; }
.wf-releve-piece figcaption{ display: flex; align-items: center; gap: 8px; margin-top: 12px; font: 600 14px/1.3 var(--sb-texte); color: var(--sb-doux); }
.wf-releve-piece .wf-etoile{ width: 16px; height: 16px; color: var(--sb-accent); }
.wf-apropos-bas{ padding-block: clamp(44px, 5vw, 64px) clamp(56px, 6vw, 80px); }
.wf-ne-pas{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.wf-ne-pas li{ display: grid; gap: 6px; align-content: start; padding-bottom: 22px; }
.wf-ne-pas b{ padding: 20px 22px 0; font: 700 19px/1.25 var(--sb-texte); }
.wf-ne-pas span{ padding: 0 22px; font-size: 16px; line-height: 1.5; color: var(--sb-doux); }
.wf-redac-t{ margin-top: 48px; }
.wf-redac{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.wf-redac a{ display: flex; align-items: center; gap: 14px; padding: 12px 22px 12px 12px; border-radius: 999px; background: #fff; box-shadow: var(--sb-ombre); text-decoration: none; }
.wf-redac img, .wf-redac svg.avatar{ width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.wf-redac b{ display: block; font: 700 17px/1.2 var(--sb-texte); }
.wf-redac small{ font-size: 13.5px; color: var(--sb-doux); }
.wf-apropos-erreur{ margin-top: 40px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; font: 700 18px/1.3 var(--sb-texte); }

.wf-404{ padding-block: clamp(32px, 5vw, 64px); }
.wf-404-in{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.wf-404 h1{ font-size: clamp(34px, 4.4vw, 64px); }
.wf-404-chapo{ margin: 16px 0 24px; max-width: 46ch; font-size: 19px; line-height: 1.5; color: var(--sb-doux); }
.wf-404 .wf-pilules{ margin-top: 20px; }
.wf-404-visuel{ position: relative; }
.wf-404-photo{ --wf-fond: var(--sb-surf); aspect-ratio: 8 / 5; box-shadow: var(--sb-ombre-forte); }
.wf-404-photo img, .wf-404-photo .wf-repli{ position: absolute; inset: 0; width: 100%; height: 100%; }
.wf-recto--refuse{ top: auto; right: -14px; bottom: -22px; transform: rotate(-9deg); }
.wf-recto--refuse::after{ content: ""; position: absolute; top: 14px; right: 16px; width: 12px; height: 12px; border-radius: 50%; background: #E5392B; box-shadow: 0 0 0 4px rgba(229,57,43,.28); }

.wf-recherche{ display: flex; align-items: center; gap: 10px; max-width: 640px; }
.wf-recherche input[type="search"]{ flex: 1; min-width: 0; height: 56px; padding: 0 22px; border: 2px solid var(--sb-filet); border-radius: 999px; background: #fff; color: var(--sb-encre); font: 500 17px var(--sb-texte); }
.wf-recherche input[type="search"]:focus{ border-color: var(--sb-accent); outline: none; }
.wf-recherche .wf-btn{ flex: none; min-height: 56px; }
.wf-liste{ padding-block: 24px clamp(56px, 6vw, 88px); }
.wf-liste .wf-sec-tete{ margin-top: 8px; }
.wf-liste-grille, .wf-liste-portes{ margin-top: 32px; }

.wf-auteur-tete{ padding-block: 24px 40px; }
.wf-auteur-fiche{ margin-top: 8px; border-radius: var(--sb-rayon-grand); box-shadow: var(--sb-ombre); }
.wf-auteur-fiche-in{ display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 32px; align-items: center; padding: 30px 36px 34px; }
.wf-auteur-photo img, .wf-auteur-photo svg.avatar{ width: 160px; height: 160px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 5px var(--sb-surf); }
.wf-auteur-texte h1{ font-size: clamp(28px, 3.2vw, 44px); }
.wf-auteur-role{ margin-top: 8px; font: 700 15px/1.3 var(--sb-texte); color: var(--sb-accent); }
.wf-auteur-bio{ margin-top: 12px; max-width: 62ch; font-size: 17px; line-height: 1.6; }
.wf-auteur-nb{ display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font: 700 15px/1 var(--sb-texte); color: var(--sb-doux); }
.wf-auteur-nb .wf-etoile{ width: 16px; height: 16px; color: var(--sb-accent); }

/* ============================== 20. Mouvement : un seul moment orchestré, puis des réponses aux gestes ============================== */
@media (prefers-reduced-motion: no-preference){
	.wf-hero-badge{ animation: wf-pose .5s cubic-bezier(.2,.8,.2,1) both; }
	.wf-recto{ animation: wf-tombe .3s cubic-bezier(.2,.8,.2,1) .15s both; }
	.wf-hero-verso .wf-form-carte{ animation: wf-apparait .4s ease .3s both; }
	/* C2 : plus aucune section masquée en attendant le défilement (trou blanc de 1 800 px à 390). */
}
@keyframes wf-pose{ from{ transform: rotate(3deg) translateY(10px); opacity: .0; } to{ transform: none; opacity: 1; } }
@keyframes wf-tombe{ from{ transform: translateY(-34px) rotate(2deg); opacity: 0; } to{ transform: rotate(-7deg); opacity: 1; } }
@keyframes wf-apparait{ from{ transform: translateY(14px); opacity: 0; } to{ transform: none; opacity: 1; } }
.wf-recto--refuse{ animation-name: wf-tombe-404; }
@keyframes wf-tombe-404{ from{ transform: translateY(-34px) rotate(2deg); opacity: 0; } to{ transform: rotate(-9deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce){
	*, *::before, *::after{ animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ============================== 21. Adaptations ============================== */
@media (max-width: 1180px){
	.wf-chiffres-grille{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wf-guides-grille{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wf-guides-grille .wf-carte--grande{ grid-column: 1 / -1; grid-row: auto; }
	.wf-guides-grille .wf-carte--grande .wf-carte-photo{ min-height: 280px; }
	.wf-guides-grille--n2 .wf-carte:nth-child(2), .wf-guides-grille--n3 .wf-carte:not(.wf-carte--grande), .wf-guides-grille--n4 .wf-carte:nth-child(4){ grid-column: auto; grid-row: auto; }
	.wf-guides-grille--n3 .wf-carte:not(.wf-carte--grande) .wf-carte-lien, .wf-guides-grille--n4 .wf-carte:nth-child(4) .wf-carte-lien{ flex-direction: column; }
	.wf-guides-grille--n3 .wf-carte:not(.wf-carte--grande) .wf-carte-photo, .wf-guides-grille--n4 .wf-carte:nth-child(4) .wf-carte-photo{ flex: none; aspect-ratio: 2.1 / 1; min-height: 0; }
	.wf-guides-grille--n3 .wf-carte:not(.wf-carte--grande) .wf-carte-corps, .wf-guides-grille--n4 .wf-carte:nth-child(4) .wf-carte-corps{ padding: 12px 8px 10px; }
	.wf-grille{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wf-mosaique{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wf-ville-corps{ grid-template-columns: minmax(0, 1fr); }
	.wf-ville-rail{ position: static; max-width: 520px; }
	.wf-hub-bas{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px){
	.wf-art-tete-in{ grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.wf-art-photo-col{ margin-top: 0; }
	.wf-art-photo{ height: auto; aspect-ratio: 4 / 3; min-height: 0; border-radius: 24px; }
	.wf-art-photo-col::before{ inset: 10px -10px -10px 10px; border-radius: 24px; }
	.wf-art-pastille-photo{ right: 18px; }
	.wf-art-tete{ padding-bottom: 44px; }
	.wf-resilier-in, .wf-apropos-in, .wf-releve-in, .wf-404-in{ grid-template-columns: minmax(0, 1fr); }
	.wf-resilier-photo{ height: 320px; }
	.wf-carte-absente{ transform: none; }
	.wf-rub-tete-in{ grid-template-columns: minmax(0, 1fr); }
	.wf-rub-photo{ width: 100%; height: 190px; margin-bottom: -48px; border-radius: 24px; }
	.wf-rub-titres{ padding-bottom: 28px; }
	.wf-rub-liste{ padding-top: 72px; }
	.wf-rub-pastilles{ min-height: 0; max-width: none; margin-bottom: 24px; }
	.wf-ne-pas{ grid-template-columns: minmax(0, 1fr); }
	.wf-contact-in{ grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.wf-contact-photo{ min-height: 0; height: 100px; border-radius: 24px; }
}
@media (max-width: 860px){
	.wf-portes-grille{ grid-template-columns: minmax(0, 1fr); }
	.wf-porte-photo{ min-height: 240px; }
	.wf-comp-tete{ flex-direction: column; align-items: flex-start; padding: 22px 20px 14px; }
	.wf-comp-liste{ padding: 0 16px; gap: 8px; }
	.wf-comp-ligne{ width: 100%; min-width: 0; flex-wrap: wrap; row-gap: 8px; padding: 10px 8px 12px 16px; border-radius: 24px; }
	.wf-comp-nom{ flex: 1 1 140px; }
	.wf-comp-mini{ display: block; flex: 0 0 100%; height: 6px; border-radius: 6px; background: rgba(23,20,46,.14); position: relative; }
	.wf-comp-mini::after{ content: ""; position: absolute; inset: 0 auto 0 0; width: var(--l); border-radius: 6px; background: var(--sb-encre); }
	.wf-comp-ligne.est-premiere .wf-comp-mini{ background: rgba(255,255,255,.3); }
	.wf-comp-ligne.est-premiere .wf-comp-mini::after{ background: #fff; }
	.wf-comp-notes{ padding: 16px 20px 0; }
	.wf-comp-total{ min-width: 116px; }
	.sbt-article-corps{ padding: 28px 22px 26px; border-radius: 24px; font-size: 18px; }
	.wf-fiches{ grid-template-columns: minmax(0, 1fr); }
	.wf-sources-titre, .sbt-article-corps .wf-sources-titre{ padding: 20px 20px 0; }
	.wf-sources-intro{ padding: 8px 20px 0; }
	.wf-sources-liste{ padding: 0 20px 8px !important; }
	.wf-sources-liste li{ flex-direction: column; align-items: flex-start; }
	.wf-src-date{ text-align: left; }
	.wf-prevus ul{ grid-template-columns: minmax(0, 1fr); }
	.wf-bientot-in{ padding: 28px 22px 22px; }
	.wf-prevus{ padding: 0 22px 28px; }
	.wf-acc summary{ padding: 16px 20px; }
	.wf-acc summary h2{ font-size: 19px; }
	.wf-acc-corps{ padding: 0 20px 22px; font-size: 17px; }
	.wf-ville-texte > :not(.wf-acc){ margin-inline: 20px; }
	.wf-auteur-fiche-in{ grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 18px; padding: 24px 22px 28px; }
	.wf-auteur-photo img, .wf-auteur-photo svg.avatar{ width: 110px; height: 110px; }
}
@media (max-width: 700px){
	.wf-chiffres-grille{ grid-template-columns: minmax(0, 1fr); }
	/* 18/10 : à 390 les 4 tuiles empilées faisaient 2 000 px → tuile en ligne (vignette 96 px + chiffre), texte et source dessous. */
	.wf-chiffres-grille{ gap: 12px; }
	.wf-chiffre{ display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; padding: 12px 14px 14px 12px; }
	.wf-chiffre-corps{ display: contents; }
	.wf-chiffre-photo{ grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 1; border-radius: 16px; }
	.wf-chiffre-photo::after{ display: none; }
	.wf-chiffre-n{ grid-column: 2; grid-row: 1; align-self: end; font-size: 42px; }
	.wf-chiffre-lib{ grid-column: 2; grid-row: 2; align-self: start; margin-top: 4px; }
	.wf-chiffre-txt, .wf-chiffre-src{ grid-column: 1 / -1; }
	.wf-chiffre-txt{ margin-top: 12px; }
	.wf-sec-tete--ligne{ flex-direction: column; align-items: flex-start; }
	.wf-mosaique{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.wf-ville-photo{ aspect-ratio: 4 / 3; }
	.wf-ville-nb{ font-size: 11.5px; padding: 4px 9px; }
	.wf-guides-grille, .wf-grille{ grid-template-columns: minmax(0, 1fr); }
	.wf-rub-grille{ grid-template-columns: minmax(0, 1fr); }
	.wf-rub-grille > .wf-carte, .wf-rub-grille.est-complete > .wf-carte--moitie, .wf-rub-grille.est-complete > .wf-carte--seule{ grid-column: 1 / -1; }
	.wf-rub-grille.est-complete > .wf-carte--seule .wf-carte-lien{ flex-direction: column; gap: 0; }
	.wf-rub-grille.est-complete > .wf-carte--seule .wf-carte-photo{ flex: none; aspect-ratio: 16 / 10; }
	.wf-guides-grille--n1 .wf-carte-lien{ flex-direction: column; gap: 0; }
	.wf-guides-grille--n1 .wf-carte-photo{ flex: none; }
	.wf-comp-titre{ font-size: 26px; }
	.wf-form-carte--hero{ max-width: none; }
	.wf-hub-regles h2{ font-size: 24px; }
	.wf-recherche{ flex-direction: column; align-items: stretch; }
	.wf-recherche .wf-btn{ width: 100%; }
	.sbs_tarif{ grid-template-columns: minmax(0, 1fr) auto; }
	.sbs_tarif_barre{ grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 600px){
	:root{ --sb-gouttiere: 24px; }
	.wf-section{ padding-block: 44px; }
	.wf-hero{ padding-block: 18px 26px; }
	.wf-independance .wf-cont{ align-items: flex-start; }
	.wf-art-verso-in{ padding: 24px 22px 24px; }
	.wf-art-verso h1{ font-size: 32px; }
	.wf-art-chapo{ font-size: 17.5px; }
	.wf-form-carte--hero .wf-form-corps{ padding-inline: 16px; }
	.wf-contact-in{ gap: 14px; }
	.wf-contact-form{ gap: 10px; padding: 18px 18px 20px; }
	.wf-contact-form h1{ font-size: 26px; }
	.wf-contact-sous{ font-size: 14.5px; }
	.wf-contact-sujets .wf-tuile{ min-height: 40px; padding: 0 12px; font-size: 13.5px; }
	.wf-champ textarea{ min-height: 80px; }
	.wf-contact-form .wf-form-ligne{ grid-template-columns: 1fr 1fr; gap: 8px; }
	/* 18/10 : bouton « Envoyer » à 768 px à 390 → formulaire entier dans 390×700 (bandeau photo 76, message 72). */
	.wf-section.wf-contact{ padding-block: 14px 32px; }
	.wf-contact-in{ gap: 10px; }
	.wf-contact-photo{ height: 76px; }
	.wf-contact-form .wf-champ textarea{ min-height: 0; height: 72px; }
}
@media (min-width: 601px){ :root{ --sb-gouttiere: 32px; } }


/* ============================== 22. Corrections n°1 (18/10/2026) ============================== */
/* Bande Encre de la rubrique : .wf-rub-tete n'est pas un .wf-section, le fond n'était jamais posé. */
.wf-rub-tete{ background: #17142E; color: #fff; min-height: 300px; }
.wf-rub-tete .sbt-fil-ariane, .wf-rub-tete .sbt-fil-ariane span{ color: #D9D5EE; }
.wf-rub-photo img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Bandeau cookies : une carte compacte en bas à gauche, jamais une barre qui couvre la page. */
.sbt-cookies.wf-cookies{ left: 16px; right: auto; bottom: 16px; width: min(420px, calc(100% - 32px)); flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 18px; }
.sbt-cookies.wf-cookies p{ flex: 1 1 100%; font-size: 13px; line-height: 1.35; }
.sbt-cookies.wf-cookies .sbt-cookies-actions{ flex: 1 1 100%; gap: 8px; }
.sbt-cookies.wf-cookies .sbt-cookies-actions .wf-btn{ flex: 1; min-height: 40px; padding: 0 14px; font-size: 14px; }

/* Étiquettes du comparateur : jamais sur 2 lignes, jamais hors de la barre. */
.wf-frais{ white-space: nowrap; }
.wf-comp-ligne{ min-width: min(100%, 580px); }
@media (max-width: 860px){ .wf-comp-ligne{ min-width: 0; } }
.wf-comp-detail{ overflow-wrap: anywhere; }

/* Accueil : chaque section ≤ 700 px à 1440 et 1920 (rien n'est coupé, on resserre). */
@media (min-width: 861px){
.wf-sec-comp{ padding-block: 40px; }
.wf-comp{ padding-bottom: 20px; }
.wf-comp-tete{ padding: 20px 32px 14px; }
.wf-comp-titre{ font-size: clamp(24px, 2.5vw, 36px); line-height: 1.08; }
.wf-comp-titres{ min-width: 0; }
.wf-comp-sous{ max-width: none; font-size: 15.5px; line-height: 1.4; margin-top: 6px; }
.wf-comp-liste{ gap: 5px; }
.wf-comp-ligne{ min-height: 50px; padding-block: 3px; }
.wf-comp-total{ height: 40px; }
.wf-comp-notes{ gap: 4px; padding-top: 14px; font-size: 13.5px; line-height: 1.4; }
}
.wf-mosaique{ grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.wf-ville-photo{ aspect-ratio: 16 / 10; border-radius: 20px; }
.wf-ville-tuile a, .wf-ville-tuile--toutes a{ border-radius: 20px; }
.wf-etiquette--ville{ top: 9px; left: 9px; font-size: 13px; padding-inline: 9px; }
.wf-ville-nb{ left: 9px; bottom: 9px; padding: 4px 9px; font-size: 12px; }
/* C2 : pas de fente de cordon sur les petites tuiles ville (le nom la chevauchait) ; le nom reste en haut à gauche. */
.wf-ville-photo::after{ display: none; }
.wf-ville-toutes{ padding: 10px 14px; gap: 4px; }
.wf-ville-toutes b{ font-size: 19px; }
.wf-ville-toutes small{ font-size: 12.5px; line-height: 1.3; }
.wf-ville-toutes .wf-etoile{ width: 22px; height: 22px; }
@media (max-width: 1100px){ .wf-mosaique{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px){ .wf-mosaique{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .wf-ville-toutes{ padding: 18px 14px; } }

.wf-footer-releve{ margin-top: 18px; max-width: 30ch; font-size: 13.5px; line-height: 1.45; color: #C4C0DC; }
.wf-guides .wf-sec-tete--ligne > div{ max-width: 980px; }
.wf-guides .wf-sec-tete h2{ font-size: clamp(26px, 2.8vw, 38px); }
.wf-guides .wf-sec-tete{ margin-bottom: 18px; }
.wf-guides .wf-carte:not(.wf-carte--grande) .wf-carte-photo{ aspect-ratio: 2.7 / 1; }
.wf-guides .wf-carte:not(.wf-carte--grande) .wf-carte-corps{ gap: 6px; }

/* Titres d'article : taille fluide, 4 lignes au plus à toutes les largeurs. */
.wf-art-verso h1{ text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
@media (max-width: 600px){
	.wf-art-verso-in{ padding: 22px 20px 24px; }
	.wf-art-verso h1{ font-size: clamp(24px, 6.9vw, 28px); line-height: 1.08; }
}
@media (max-width: 860px){
	@media (prefers-reduced-motion: no-preference){ .wf-arme:not(.est-visible) .wf-comp-ligne:not(.est-affichee){ clip-path: inset(0 100% 0 0 round 24px); } }
}

/* ============================== C2 (18/10/2026) — corrections après le juge visuel n°1 ============================== */

/* Bloc Sources refait : une ligne par source (organisme | ses documents en pastilles), date dans le cadre. */
.wf-sources-liste{ padding: 0 28px 6px !important; margin-top: 16px !important; }
.wf-sources-liste li.wf-src{ display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr); align-items: center; gap: 8px 20px; padding: 12px 0; }
.wf-src-org{ font: 700 16px/1.3 var(--sb-texte); color: var(--sb-encre); text-decoration: none !important; }
a.wf-src-org:hover{ color: var(--sb-accent); }
.wf-src-docs{ display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.sbt-article-corps a.wf-src-doc, .wf-acc-corps a.wf-src-doc, a.wf-src-doc{ display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--wf-voile); color: var(--sb-encre); font: 600 14px/1.2 var(--sb-texte); text-decoration: none; white-space: nowrap; transition: background .2s ease, color .2s ease; }
a.wf-src-doc:hover{ background: var(--sb-accent); color: #fff; }
.wf-sources-date{ display: flex; align-items: center; gap: 8px; margin: 0 !important; padding: 14px 28px 18px; border-top: 1px dashed #C4C8DC; font: 600 14px/1.4 var(--sb-texte) !important; color: var(--sb-doux); }
.wf-sources-date .wf-etoile{ width: 14px; height: 14px; flex: none; color: var(--sb-accent); }
.wf-sources--acc .wf-sources-liste{ padding: 0 !important; margin-top: 0 !important; }
.wf-sources--acc .wf-sources-date{ padding: 12px 0 0; }
@media (max-width: 700px){
	.wf-sources-liste{ padding: 0 20px 4px !important; }
	.wf-sources-liste li.wf-src{ grid-template-columns: minmax(0, 1fr); }
	.wf-sources-date{ padding: 12px 20px 16px; }
}

/* Le chiffre à retenir : le chiffre en très grand, la phrase en légende. « À retenir » quand il n'y a pas de chiffre. */
.wf-bloc--repere{ display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 24px; padding: 20px 26px 22px; }
.wf-bloc--repere .wf-bloc-etiquette{ grid-column: 1 / -1; }
.wf-repere-chiffre{ margin: 0 !important; font: 400 clamp(34px, 4.2vw, 52px)/1 var(--sb-titre); color: var(--sb-accent); white-space: nowrap; letter-spacing: -.01em; }
.wf-bloc--repere .wf-repere-phrase{ grid-column: 2; padding: 0; background: none; font: 600 17px/1.5 var(--sb-texte); }
.wf-bloc--retenir .wf-repere-phrase{ grid-column: 1 / -1; font: 700 19px/1.45 var(--sb-texte); }
@media (max-width: 700px){
	.wf-bloc--repere{ grid-template-columns: minmax(0, 1fr); padding: 18px 20px 20px; }
	.wf-bloc--repere .wf-repere-phrase{ grid-column: 1; margin-top: 8px !important; }
}

/* « En bref » / « Ce qu'il faut retenir » : la carte au verso. */
.wf-bloc--bref{ position: relative; padding: 22px 26px 20px 30px; border-radius: 22px; background: #fff; box-shadow: var(--sb-ombre); overflow: hidden; }
.wf-bloc--bref::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--sb-accent); }
.sbt-article-corps .wf-bloc--bref h2.wf-bref-titre{ display: flex; align-items: center; gap: 10px; margin: 0 0 10px !important; padding: 0; border: 0; font: 400 22px/1.15 var(--sb-titre); color: var(--sb-encre); }
.wf-bref-titre .wf-etoile{ width: 18px; height: 18px; flex: none; color: var(--sb-accent); }
.wf-bloc--bref p:not(.wf-bloc-etiquette){ margin: 0 0 .7em !important; font-size: 17px; line-height: 1.6; }
.wf-bloc--bref p:last-child{ margin-bottom: 0 !important; }

/* Fiches : textes de longueurs différentes → une colonne, jamais de carte à moitié vide. */
.wf-fiches--pile{ grid-template-columns: minmax(0, 1fr); gap: 10px; }
.wf-fiches--pile .wf-fiche{ padding: 16px 20px; }

/* Fiche visuelle d'une chaîne (comparatif). */
.wf-fc{ margin: 1.6em 0; border-radius: 24px; background: #fff; box-shadow: var(--sb-ombre); overflow: hidden; }
.wf-fc + .wf-fc{ margin-top: 18px; }
.wf-fc-tete{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 16px 24px; background: var(--sb-encre); }
.sbt-article-corps .wf-fc-tete p{ margin: 0; }
.wf-fc-nom{ font: 400 24px/1.1 var(--sb-titre); color: #fff; }
.wf-fc-formule{ font: 700 14.5px/1.2 var(--sb-texte); color: var(--sb-accent-clair); }
.wf-fc-corps{ display: grid; gap: 12px; padding: 16px; }
.sbt-article-corps .wf-fc-total{ display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; margin: 0; padding: 16px 20px; border-radius: 18px; background: var(--wf-voile); }
.wf-fc-total b{ flex: none; font: 400 clamp(30px, 3vw, 40px)/1 var(--sb-titre); color: var(--sb-accent); white-space: nowrap; }
.wf-fc-total span{ flex: 1 1 200px; font-size: 15px; line-height: 1.4; color: var(--sb-doux); }
.wf-fc-total--sans b{ font-size: 26px; color: var(--sb-encre); }
.wf-fc-tuiles{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.wf-fc-tuile--large{ grid-column: 1 / -1; display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: baseline; gap: 12px; }
.wf-fc-tuile--large dd{ margin: 0; }
.wf-fc-r3-1{ grid-column: 1 / -1; }
.wf-fc-r3-2{ grid-column: span 2; }
@media (max-width: 700px){ .wf-fc-tuile--large{ grid-template-columns: minmax(0, 1fr); gap: 0; } .wf-fc-tuile--large dd{ margin-top: 4px; } }
.wf-fc-tuile{ padding: 12px 14px; border-radius: 14px; background: var(--sb-surf); }
.wf-fc-tuile dt{ font: 600 12.5px/1.2 var(--sb-texte); color: var(--sb-doux); }
.wf-fc-tuile dd{ margin: 4px 0 0; font: 700 15.5px/1.3 var(--sb-texte); color: var(--sb-encre); }
.wf-fc-motifs{ padding: 0 18px 18px; }
.sbt-article-corps .wf-fc-motifs-t{ margin: 0 0 8px; font: 700 14px/1.2 var(--sb-texte); color: var(--sb-encre); }
.sbt-article-corps .wf-fc-motifs ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sbt-article-corps .wf-fc-motifs li{ display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 7px 13px; border: 1px solid var(--sb-filet); border-radius: 999px; font-size: 14px; line-height: 1.3; }
.wf-fc-motifs .wf-etoile{ width: 12px; height: 12px; flex: none; color: var(--sb-accent); }
@media (max-width: 700px){
	.wf-fc-tuiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wf-fc-r3-1, .wf-fc-r3-2{ grid-column: auto; }
	.wf-fc-r2-1{ grid-column: 1 / -1; }
	.wf-fc-corps{ padding: 12px; }
	.wf-fc-tete{ padding: 14px 18px; }
	.wf-fc-motifs{ padding: 0 14px 16px; }
}

/* Ligne d'auteur : plus de « · » orphelin, chaque mention reste entière. */
.wf-art-meta{ gap: 8px 18px; }
.wf-meta-auteur{ display: inline-flex; align-items: center; gap: 10px; }
.wf-meta-item{ white-space: nowrap; }

/* Titres très longs : toujours 4 lignes au plus à 390. */
@media (max-width: 600px){ .wf-art-verso h1.wf-h1--long{ font-size: clamp(20px, 5.7vw, 23px); } }

/* Article à 390 : la photo à la une ouvre l'en-tête (premier écran), en bandeau, puis la carte titre. */
@media (max-width: 600px){
	.wf-art-tete-in{ gap: 22px; }
	.wf-art-photo-col{ order: -1; }
	.wf-art-photo{ aspect-ratio: 16 / 8; }
	.wf-art-photo-col::before{ inset: 8px -8px -8px 8px; }
	.wf-art-pastille-photo{ height: 30px; bottom: -13px; font-size: 12.5px; }
}

/* Contenu toujours visible : les apparitions au défilement n'existent plus (voir §20). */

/* Liste simple → carte à cocher (astérisques), même texte. */
.sbt-article-corps ul.wf-coches{ list-style: none; margin: 1.6em 0; padding: 18px 22px; display: grid; gap: 10px; border-radius: 20px; background: var(--sb-surf); }
.sbt-article-corps ul.wf-coches li{ display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0; padding: 0; font-size: 17px; line-height: 1.5; }
.sbt-article-corps ul.wf-coches li::before{ content: none; }
.wf-coches .wf-etoile{ width: 18px; height: 18px; margin-top: 4px; color: var(--sb-accent); }
.wf-bloc--fin{ background: var(--wf-voile); box-shadow: none; }

/* ===================== C3 (18/10/2026) ===================== */
/* Barres de prix : la colonne du prix a une largeur fixe → toutes les barres partent du même bord. */
.sbs_tarif{ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 6.4em; }
.sbs_tarif_prix{ text-align: right; white-space: nowrap; }
@media (max-width: 700px){ .sbs_tarif{ grid-template-columns: minmax(0, 1fr) auto; } }

/* Page auteur : bande « Ses sujets », grille régulière, 6 cartes à 390. */
.wf-sujets{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 32px; padding: 18px 22px; border-radius: 24px; background: var(--wf-voile); }
.wf-sujets-t{ margin: 0; font: 400 24px/1.1 var(--sb-titre); color: var(--sb-encre); }
.wf-sujets-liste{ display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.wf-sujet{ display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 18px 8px 14px; border-radius: 999px; background: #fff; color: var(--sb-encre); text-decoration: none; box-shadow: var(--sb-ombre); transition: background .2s, color .2s; }
.wf-sujet .wf-etoile{ width: 16px; height: 16px; color: var(--sb-accent); }
.wf-sujet b{ font: 700 15.5px/1.2 var(--sb-texte); }
.wf-sujet small{ font: 600 13.5px/1.2 var(--sb-texte); color: var(--sb-doux); }
.wf-sujet:hover, .wf-sujet:focus-visible{ background: var(--sb-encre); color: #fff; }
.wf-sujet:hover small, .wf-sujet:focus-visible small, .wf-sujet:hover .wf-etoile{ color: var(--sb-accent-clair); }
.wf-plus--mob{ display: none; }
@media (max-width: 700px){
	.wf-carte--mob-cachee{ display: none; }
	.wf-plus--mob{ display: flex; }
	.wf-sujets{ padding: 16px; border-radius: 20px; }
	.wf-sujet{ min-height: 44px; padding: 7px 14px 7px 12px; }
}

/* Maillage du corps (mu-plugin) : ce qui reste après dédoublonnage, en pastilles. */
.sbt-article-corps .wf-maillage{ margin: 2em 0 0; padding: 18px 22px; border-radius: 20px; background: var(--sb-surf); }
.sbt-article-corps .wf-maillage h2{ margin: 0 0 12px; font: 700 16px/1.2 var(--sb-texte); letter-spacing: 0; }
.sbt-article-corps .wf-maillage ul{ display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sbt-article-corps .wf-maillage li{ margin: 0; }
.sbt-article-corps .wf-maillage a{ display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--sb-filet); color: var(--sb-encre); font: 600 15px/1.3 var(--sb-texte); text-decoration: none; }
.sbt-article-corps .wf-maillage a:hover{ border-color: var(--sb-accent); color: var(--sb-accent); }

/* C3 : un titre de carte ne se coupe plus en « … » à 3 lignes (4 lignes permises). */
.wf-carte-titre{ -webkit-line-clamp: 4; }