/*
Theme Name: Santé Publique Internationale — Repère
Theme URI: https://www.internationalpublichealth.org
Author: Santé Publique Internationale
Author URI: https://www.internationalpublichealth.org
Description: Thème code-pur de internationalpublichealth.org — la prévention santé au quotidien.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: sph-repere
*/

/* Ce fichier reste volontairement vide de règles visuelles : le rendu réel vit
   dans assets/css/app.css + blocs/*.css (enqueue par functions.php). Cette
   entête est la seule exigée par WordPress pour reconnaître le thème. */

@font-face{font-family:'Labrada';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/labrada-400-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Labrada';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/labrada-400-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Labrada';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/labrada-400-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Labrada';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/labrada-400-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Labrada';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/labrada-500-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Labrada';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/labrada-500-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Labrada';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/labrada-600-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Labrada';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/labrada-600-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'League Spartan';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/league-spartan-500-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'League Spartan';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/league-spartan-500-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'League Spartan';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/league-spartan-600-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'League Spartan';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/league-spartan-600-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'League Spartan';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/league-spartan-700-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'League Spartan';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/league-spartan-700-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'League Spartan';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/league-spartan-800-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'League Spartan';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/league-spartan-800-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/*
 * 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; } }

/*
 * 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; }
}

/*
 * 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='%23B82346' 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-cta{
	display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
	padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.sbt-footer-cta .sbt-t3{ color: #fff; margin: 0 0 4px; font-size: 1.25rem; }
.sbt-footer-cta p{ color: #a9acd0; margin: 0; max-width: 46ch; }

.sbt-footer-grille{ display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.12); }
@media (max-width: 980px){ .sbt-footer-grille{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .sbt-footer-grille{ grid-template-columns: 1fr; } }
.sbt-footer-colonne .sbt-t4{ font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: #8b8fb5; margin: 0 0 14px; }
.sbt-footer-colonne ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sbt-footer-colonne ul a{ font-size: .875rem; }
.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; }

/*
 * sph-balise — app.css : TOUT ce qui se voit sur evasionfitness.fr.
 * Palette (DA §3) : Air du matin / Sapin nuit / Rouge balise / Jaune balise / Mousse pâle.
 * Mode CLAIR UNIQUEMENT (DA §12.9) — html[style] porte déjà color-scheme:light ; toutes
 * les couleurs ci-dessous sont des valeurs explicites (jamais currentColor hérité du
 * système), donc un « forcer le sombre » du navigateur ne peut pas les réécrire (P-351).
 */

/* ===================== 1. Jetons ===================== */
:root{
	--sph-air: #F6F8FB;
	--sph-sapin: #10263D;
	--sph-sapin-doux: #475A70;
	--sph-rouge: #0A6968;
	--sph-rouge-survol: #075251;
	--sph-jaune: #9ED9CC;
	--sph-mousse: #E3ECF4;
	--sph-blanc: #FFFFFF;
	--sph-filet: #CBD7E3;
	--sph-rayon: 16px;
	--sph-rayon-grand: 28px;
	--sph-pilule: 999px;
	--sph-ombre: 0 18px 40px -18px rgba(16,38,61,.28);
	--sph-ombre-forte: 0 28px 60px -20px rgba(16,38,61,.38);
	--sph-conteneur: 1320px;
	--sph-gouttiere: 32px;
	--sph-titre: 'League Spartan', system-ui, sans-serif;
	--sph-texte: 'Labrada', Georgia, serif;

	/* Pont vers les jetons des blocs figés .sbt-* (§3 KIT-DESIGNER) */
	--sb-encre: var(--sph-sapin);
	--sb-doux: var(--sph-sapin-doux);
	--sb-accent: var(--sph-rouge);
	--sb-accent-clair: var(--sph-jaune);
	--sb-surf: var(--sph-mousse);
	--sb-fond-carte: var(--sph-blanc);
	--sb-fonce: var(--sph-sapin);
	--sb-sur-fonce: var(--sph-air);
	--sb-filet: var(--sph-filet);
	--sb-rayon: var(--sph-rayon);
	--sb-rayon-grand: var(--sph-rayon-grand);
	--sb-titre: var(--sph-titre);
	--sb-texte: var(--sph-texte);
	--sb-conteneur: var(--sph-conteneur);
	--sb-lecture: 680px;
	--sb-rail: 340px;
	--sb-gouttiere: var(--sph-gouttiere);
	--sb-ombre: var(--sph-ombre);
	--sb-ombre-forte: var(--sph-ombre-forte);
}

/* ===================== 2. Reset & base ===================== */
*{ box-sizing: border-box; }
html{ color-scheme: light; }
body{
	margin: 0; background: var(--sph-air); color: var(--sph-sapin);
	font-family: var(--sph-texte); font-size: 1.0625rem; line-height: 1.72;
	-webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; }
h1,h2,h3,h4{ font-family: var(--sph-titre); color: var(--sph-sapin); line-height: 1.1; margin: 0; }
.sph-conteneur{ max-width: var(--sph-conteneur); margin-inline: auto; padding-inline: var(--sph-gouttiere); }
@media (max-width: 760px){ .sph-conteneur{ padding-inline: 20px; } }
.sph-skip{ position: absolute; left: -9999px; }
.sph-skip:focus{ left: 12px; top: 12px; z-index: 300; background: var(--sph-blanc); padding: 10px 16px; border-radius: 10px; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }

.sph-surtitre{
	display: inline-flex; align-items: center; gap: 8px; font-family: var(--sph-titre);
	font-weight: 700; font-size: .875rem; color: var(--sph-sapin); text-decoration: none;
}
.sph-balise-mini{ display: inline-flex; width: 18px; height: 10px; border-radius: 2px; background: var(--sph-rouge); position: relative; flex: none; }
.sph-balise-mini::after{ content: ""; position: absolute; inset: 0 0 0 50%; background: var(--sph-blanc); border-radius: 0 2px 2px 0; }

.sph-btn{
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 0 24px; height: 52px; border-radius: var(--sph-pilule); font-family: var(--sph-titre);
	font-weight: 700; font-size: 1.0625rem; background: var(--sph-rouge); color: var(--sph-blanc);
	text-decoration: none; border: 0; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.sph-btn:hover{ background: var(--sph-rouge-survol); transform: translateY(-2px); box-shadow: var(--sph-ombre); }
.sph-btn--fantome{ background: transparent; color: var(--sph-sapin); border: 1.5px solid var(--sph-filet); }
.sph-btn--fantome:hover{ background: var(--sph-air); }
.sph-btn--petit{ height: 44px; padding: 0 18px; font-size: .9375rem; }
.sph-btn.est-desactive{ opacity: .45; cursor: not-allowed; pointer-events: none; }
.sph-btn__fleche svg{ width: 18px; height: 18px; }

/* ===================== 3. En-tête ===================== */
.sph-entete{ position: sticky; top: 0; z-index: 100; background: rgba(246,248,251,.92); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease; }
.sph-entete.est-colle{ border-color: var(--sph-filet); box-shadow: 0 8px 24px rgba(16,38,61,.06); }
.sph-entete__barre{ max-width: var(--sph-conteneur); margin-inline: auto; padding-inline: var(--sph-gouttiere); height: 72px; display: flex; align-items: center; gap: 28px; }
.sph-logo{ display: flex; align-items: center; flex: none; }
.sph-logo svg{ height: 34px; width: auto; display: block; }
.sph-menu{ flex: 1; min-width: 0; }
.sph-menu ul{ list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; align-items: center; flex-wrap: nowrap; overflow: hidden; }
.sph-menu a{ display: flex; align-items: center; gap: 7px; text-decoration: none; color: var(--sph-sapin); font-family: var(--sph-titre); font-weight: 600; font-size: 15px; white-space: nowrap; }
.sph-menu a:hover{ color: var(--sph-rouge); }
.sph-menu__picto svg{ width: 18px; height: 18px; }
.sph-entete__cta{ flex: none; }
.sph-menu-bascule{ display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--sph-sapin); }
.sph-menu-bascule svg{ width: 26px; height: 26px; }

.sph-menu-mobile{ position: fixed; inset: 0; z-index: 200; background: var(--sph-air); transform: translateX(100%); visibility: hidden; transition: transform .3s ease, visibility 0s .3s; padding: 24px; overflow-y: auto; }
.sph-menu-mobile.est-ouvert{ transform: translateX(0); visibility: visible; transition: transform .3s ease; }
.sph-menu-mobile__ferme{ background: none; border: 0; padding: 8px; margin-bottom: 16px; cursor: pointer; }
.sph-menu-mobile__ferme svg{ width: 26px; height: 26px; }
.sph-menu-mobile ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.sph-menu-mobile a{ display: flex; align-items: center; gap: 12px; font-family: var(--sph-titre); font-weight: 600; font-size: 1.125rem; text-decoration: none; color: var(--sph-sapin); }
.sph-menu-mobile a svg{ width: 22px; height: 22px; }

@media (max-width: 980px){
	.sph-menu{ display: none; }
	.sph-entete__cta{ margin-left: auto; padding: 10px 16px; font-size: 14px; }
	.sph-menu-bascule{ display: inline-flex; }
	.sph-entete__barre{ gap: 12px; }
}

/* ===================== 4. Formulaire-dossard ===================== */
.sph-form{ display: flex; flex-direction: column; gap: 18px; }
.sph-form__piege{ position: absolute; left: -9999px; }
.sph-form__entete{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sph-form__compteur{ font-family: var(--sph-titre); font-weight: 700; font-size: .8125rem; color: var(--sph-sapin-doux); text-transform: uppercase; letter-spacing: .04em; }
.sph-form__retour{ background: none; border: 0; color: var(--sph-sapin-doux); font-size: .875rem; cursor: pointer; font-family: var(--sph-titre); font-weight: 600; }
.sph-form[data-pas="0"] .sph-form__retour{ visibility: hidden; }
.sph-form__progression{ display: flex; gap: 6px; }
.sph-form__segment{ flex: 1; height: 5px; border-radius: 3px; background: var(--sph-filet); overflow: hidden; }
.sph-form__segment i{ display: block; height: 100%; width: 0; background: var(--sph-rouge); border-radius: 3px; transition: width .3s ease; }
.sph-form__segment.est-fait i, .sph-form__segment.est-actif i{ width: 100%; }
.sph-form__segment.est-actif i{ background: var(--sph-rouge); }

.sph-form__etape{ display: none; flex-direction: column; gap: 14px; }
.sph-form__etape.est-active{ display: flex; }
.sph-form__question{ margin: 0; font-family: var(--sph-titre); font-weight: 700; font-size: 1.0625rem; color: var(--sph-sapin); }

.sph-form__tuiles{ display: grid; gap: 10px; }
.sph-form__tuiles--colonne{ grid-template-columns: minmax(0,1fr); }
.sph-form__tuiles--grille2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 420px){ .sph-form__tuiles--grille2{ grid-template-columns: minmax(0,1fr); } }
.sph-form__tuile{
	display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left;
	padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--sph-filet); background: var(--sph-blanc);
	cursor: pointer; font-family: var(--sph-texte); font-size: .9375rem; color: var(--sph-sapin);
	transition: border-color .15s ease, background .15s ease;
}
.sph-form__tuile:hover{ border-color: var(--sph-rouge); }
.sph-form__tuile.est-choisi{ border-color: var(--sph-rouge); background: #E4F3F2; }
.sph-form__tuile__coche{ opacity: 0; width: 18px; height: 18px; color: var(--sph-rouge); flex: none; }
.sph-form__tuile.est-choisi .sph-form__tuile__coche{ opacity: 1; }
.sph-form__tuile__coche svg{ width: 18px; height: 18px; }

.sph-form__rangee{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
.sph-form__champ{ display: flex; flex-direction: column; gap: 6px; }
.sph-form__champ label{ font-size: .8125rem; font-weight: 600; color: var(--sph-sapin-doux); font-family: var(--sph-titre); }
.sph-form__champ input{
	height: 46px; border-radius: 12px; border: 1.5px solid var(--sph-filet); padding: 0 14px;
	font-family: var(--sph-texte); font-size: .9375rem; background: var(--sph-blanc); color: var(--sph-sapin);
}
.sph-form__champ input:focus{ outline: 2px solid var(--sph-rouge); outline-offset: 1px; }
.sph-form__erreur{ color: var(--sph-rouge); font-size: .8125rem; }
.sph-form__consentement{ display: flex; align-items: flex-start; gap: 10px; font-size: .78125rem; color: var(--sph-sapin-doux); }
.sph-form__consentement input{ margin-top: 3px; }
.sph-form__nav{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sph-form__bouton{ flex: 1; white-space: nowrap; }

.sph-form__confirmation{ display: none; text-align: center; padding: 10px 4px; }
.sph-form__confirmation.est-visible{ display: block; }
.sph-form__confirmation-cercle{ width: 56px; height: 56px; border-radius: 50%; background: var(--sph-mousse); color: var(--sph-rouge); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.sph-form__confirmation-cercle svg{ width: 26px; height: 26px; }
.sph-form__recap{ display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 10px 0; }
.sph-form__recap span{ background: var(--sph-air); border-radius: var(--sph-pilule); padding: 6px 12px; font-size: .8125rem; }
.sph-form__suite{ list-style: none; margin: 14px 0 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.sph-form__suite li{ display: flex; gap: 8px; font-size: .875rem; color: var(--sph-sapin-doux); }
.sph-form__suite svg{ width: 18px; height: 18px; color: var(--sph-rouge); flex: none; }

/* La carte « dossard » qui porte le formulaire : épingles aux 4 coins — signature
   assumée (DA §6 procédé 3), jamais des poignées de redimensionnement oubliées
   (jugement 03/10) : anneau + reflet + ombre propre, posées sur un petit cercle
   perforé pour lire clairement « épingle de dossard », pas un artefact. */
.sph-dossard{ position: relative; background: var(--sph-blanc); border-radius: var(--sph-rayon-grand); box-shadow: var(--sph-ombre-forte); padding: 26px; }
/* 04/10 passe 3 : toujours lues comme des poignées grises oubliées — on les assume en
   vraies épingles de dossard, plus grosses et colorées (rouge balise), avec un reflet
   net pour qu'on y lise une épingle et non un artefact. */
.sph-dossard::before, .sph-dossard::after, .sph-dossard .sph-dossard__epingle-a, .sph-dossard .sph-dossard__epingle-b{
	content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
	background:
		radial-gradient(circle at 32% 28%, #fff 0%, #E2577A 32%, var(--sph-rouge) 72%, var(--sph-rouge-survol) 100%);
	box-shadow: 0 2px 5px rgba(16,38,61,.45), inset 0 1px 1px rgba(255,255,255,.65);
	border: 1.5px solid rgba(16,38,61,.2);
}
.sph-dossard::before{ top: 7px; left: 7px; }
.sph-dossard::after{ top: 7px; right: 7px; }
.sph-dossard .sph-dossard__epingle-a{ bottom: 7px; left: 7px; }
.sph-dossard .sph-dossard__epingle-b{ bottom: 7px; right: 7px; }

/* ===================== 5. Accueil — S1 Premier écran ===================== */
.sph-hero{ background: var(--sph-air); padding: 40px 0 72px; overflow: hidden; }
.sph-hero__grille{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 40px; align-items: center; max-width: var(--sph-conteneur); margin-inline: auto; padding-inline: var(--sph-gouttiere); }
.sph-hero__titre{ font-family: var(--sph-titre); font-weight: 800; font-size: clamp(2.6rem, 1.6rem + 3vw, 4.5rem); line-height: .98; letter-spacing: -.01em; margin: 16px 0 0; }
.sph-hero__titre .sph-hero__ton2{ display: block; font-family: var(--sph-texte); font-weight: 600; color: var(--sph-rouge); font-size: .82em; line-height: 1.1; margin-top: 6px; }
.sph-hero__chapo{ font-size: 1.25rem; line-height: 1.5; color: var(--sph-sapin-doux); margin: 18px 0 0; max-width: 46ch; }
.sph-hero__preuves{ display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.sph-preuve{ background: var(--sph-blanc); border-radius: 14px; box-shadow: var(--sph-ombre); padding: 12px 16px; min-width: 150px; }
.sph-preuve b{ display: block; font-family: var(--sph-titre); font-size: 1.5rem; font-weight: 800; }
.sph-preuve span{ font-size: .78125rem; color: var(--sph-sapin-doux); }

.sph-hero__droite{ position: relative; min-height: 560px; }
.sph-hero__photo{ position: relative; width: 100%; height: 100%; min-height: 560px; border-radius: 0 0 28px 28px; overflow: hidden; clip-path: polygon(0 9%, 18% 2%, 38% 7%, 58% 0%, 78% 6%, 100% 1%, 100% 100%, 0 100%); }
.sph-hero__photo img{ width: 100%; height: 100%; object-fit: cover; }
.sph-hero__tracepoint{ position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--sph-air); border: 2px solid var(--sph-rouge); }
.sph-hero__km{ position: absolute; font-family: var(--sph-titre); font-weight: 700; font-size: .75rem; background: var(--sph-blanc); color: var(--sph-sapin); border-radius: var(--sph-pilule); padding: 3px 10px; box-shadow: var(--sph-ombre); }
.sph-hero__km--1{ top: 6%; left: 14%; }
.sph-hero__km--2{ top: -2%; left: 52%; }
.sph-hero__km--3{ top: 4%; right: 6%; }

.sph-hero__carte{ position: absolute; left: -48px; bottom: 0; width: 400px; max-width: calc(100% - 24px); }
.sph-hero__carte .sph-dossard{ max-height: 86vh; overflow: visible; }

@media (max-width: 1080px){
	.sph-hero__grille{ grid-template-columns: minmax(0,1fr); }
	.sph-hero__droite{ min-height: 440px; margin-top: 24px; }
	.sph-hero__photo{ min-height: 240px; }
	.sph-hero__carte{ position: static; width: 100%; margin-top: -60px; left: 0; }
}
@media (max-width: 600px){
	.sph-hero{ padding-bottom: 48px; }
	.sph-hero__titre{ font-size: clamp(2rem, 1.4rem + 5vw, 2.8rem); }
	.sph-hero__photo{ min-height: 220px; border-radius: 0 0 20px 20px; }
	.sph-hero__preuves{ overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
}

/* ===================== 6. Sections d'accueil génériques ===================== */
.sph-section{ padding-block: 72px; }
@media (max-width: 760px){ .sph-section{ padding-block: 56px; } }
.sph-section--blanc{ background: var(--sph-blanc); }
.sph-section--air{ background: var(--sph-air); }
.sph-section--mousse{ background: var(--sph-mousse); }
.sph-section--sapin{ background: var(--sph-sapin); color: var(--sph-air); }
.sph-section--sapin h2, .sph-section--sapin .sph-section__tete p{ color: var(--sph-air); }
.sph-section__tete{ display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.sph-section__tete h2{ font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); font-weight: 750; margin-top: 6px; }
.sph-section__lien{ font-family: var(--sph-titre); font-weight: 700; font-size: .9375rem; text-decoration: none; color: var(--sph-rouge); white-space: nowrap; }
.sph-section--sapin .sph-section__lien{ color: var(--sph-jaune); }

/* carte article générique (DA §11, chaque image réelle, aucun trou > 120px) */
.sph-carte{ background: var(--sph-blanc); border-radius: var(--sph-rayon); overflow: hidden; box-shadow: var(--sph-ombre); display: flex; flex-direction: column; height: 100%; transition: transform .2s ease, box-shadow .2s ease; }
.sph-carte:hover{ transform: translateY(-4px); box-shadow: var(--sph-ombre-forte); }
.sph-carte a{ text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.sph-carte__photo{ position: relative; aspect-ratio: 16/10; flex: none; background: var(--sph-mousse); }
.sph-carte__photo img{ width: 100%; height: 100%; object-fit: cover; }
.sph-carte__balise{ position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; background: rgba(16,38,61,.78); color: var(--sph-air); font-family: var(--sph-titre); font-size: .71875rem; font-weight: 700; padding: 5px 10px; border-radius: var(--sph-pilule); }
.sph-carte__corps{ padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sph-carte__corps h3{ font-size: 1.1875rem; font-weight: 700; line-height: 1.25; }
.sph-carte__meta{ margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: .78125rem; color: var(--sph-sapin-doux); }
.sph-carte--compacte{ flex-direction: row; }
.sph-carte--compacte a{ flex-direction: row; }
.sph-carte--compacte .sph-carte__photo{ width: 150px; aspect-ratio: auto; }
.sph-carte--compacte .sph-carte__corps{ flex: 1; }

/* ===================== S2 — la une ===================== */
.sph-une__grille{ display: grid; grid-template-columns: 7fr 5fr; gap: var(--sph-gouttiere); align-items: start; }
.sph-une__principale .sph-carte__photo{ aspect-ratio: 16/9; }
.sph-une__principale h3{ font-size: 1.75rem; }
.sph-une__colonne{ display: flex; flex-direction: column; gap: 18px; position: relative; }
.sph-une__colonne::before{ content: ""; position: absolute; left: -17px; top: 0; bottom: 0; width: 1px; background: var(--sph-filet); }
@media (max-width: 980px){ .sph-une__grille{ grid-template-columns: minmax(0,1fr); } .sph-une__colonne::before{ display: none; } }

/* ===================== S3 — carrousel rubrique (bande jaune) ===================== */
.sph-section--jaune{ background: var(--sph-jaune); }
.sph-section--jaune .sph-section__lien{ color: var(--sph-sapin); }
.sph-carrousel{ position: relative; }
.sph-carrousel__piste{ display: flex; gap: var(--sph-gouttiere); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
.sph-carrousel__piste::-webkit-scrollbar{ display: none; }
.sph-carrousel__piste > *{ flex: 0 0 290px; scroll-snap-align: start; }
.sph-carrousel__fleches{ display: flex; gap: 8px; position: absolute; top: -64px; right: 0; }
.sph-carrousel__fleche{ width: 40px; height: 40px; border-radius: 50%; background: var(--sph-sapin); color: var(--sph-air); border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sph-carrousel__fleche svg{ width: 18px; height: 18px; }
@media (max-width: 760px){ .sph-carrousel__fleches{ display: none; } }

/* ===================== S4 — outil « votre séance du jour » ===================== */
.sph-outil{ background: var(--sph-sapin); color: var(--sph-air); border-radius: var(--sph-rayon-grand); padding: clamp(28px,4vw,48px); display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.sph-outil h2{ color: var(--sph-air); }
.sph-outil__question{ font-family: var(--sph-titre); font-weight: 700; margin: 18px 0 10px; }
.sph-outil__pilules{ display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.sph-outil__pilule{ border: 1.5px solid rgba(246,248,251,.35); background: transparent; color: var(--sph-air); border-radius: var(--sph-pilule); padding: 10px 18px; font-family: var(--sph-titre); font-weight: 600; font-size: .9375rem; cursor: pointer; }
.sph-outil__pilule.est-choisi{ background: var(--sph-jaune); color: var(--sph-sapin); border-color: var(--sph-jaune); }
.sph-outil__droite{ display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.sph-outil__cadran{ width: 150px; height: 150px; border-radius: 50%; border: 10px solid rgba(246,248,251,.18); position: relative; display: flex; align-items: center; justify-content: center; }
.sph-outil__cadran::before{ content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 10px solid var(--sph-jaune); clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0); }
.sph-outil__cadran span{ font-family: var(--sph-titre); font-weight: 800; font-size: 1.75rem; }
.sph-outil__resultat{ background: var(--sph-air); color: var(--sph-sapin); border-radius: var(--sph-rayon); overflow: hidden; width: 100%; max-width: 280px; }
@media (max-width: 860px){ .sph-outil{ grid-template-columns: minmax(0,1fr); } }

/* ===================== S5 — duo de rubriques ===================== */
/* 03/10 (jugement) : l'ancienne grille 1.3fr/1fr côte à côte écrasait les titres et
   débordait à 1440. Une carte de une (photo bornée) PUIS 2 lignes vignette+titre
   empilées, comme en 390 où la composition tenait déjà — à toutes les largeurs. */
.sph-duo{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--sph-gouttiere); }
.sph-duo__colonne{ display: flex; flex-direction: column; gap: 16px; }
.sph-duo__tete{ display: flex; align-items: center; gap: 10px; }
.sph-duo__tete svg{ width: 24px; height: 24px; color: var(--sph-rouge); }
.sph-duo__tete h3{ font-size: 1.375rem; }
.sph-duo__grille{ display: flex; flex-direction: column; gap: 14px; }
.sph-duo__grande .sph-carte__photo{ aspect-ratio: auto; height: 280px; }
.sph-duo__mini{ display: flex; flex-direction: column; gap: 14px; }
.sph-duo__mini .sph-carte--compacte .sph-carte__photo{ width: 120px; }
@media (max-width: 860px){ .sph-duo{ grid-template-columns: minmax(0,1fr); } }
@media (max-width: 560px){ .sph-duo__grande .sph-carte__photo{ height: 220px; } }

/* ===================== S6 — escapades (photo pleine largeur) ===================== */
.sph-panorama{ padding: 0; }
.sph-panorama__photo{ position: relative; height: 480px; }
.sph-panorama__photo img{ width: 100%; height: 100%; object-fit: cover; }
.sph-panorama__voile{ position: absolute; inset: 0; background: linear-gradient(100deg, rgba(16,38,61,.82) 0%, rgba(16,38,61,.35) 45%, transparent 70%); display: flex; align-items: center; }
.sph-panorama__texte{ color: var(--sph-air); max-width: 560px; padding-left: var(--sph-gouttiere); }
.sph-panorama__texte h2{ color: var(--sph-air); font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.sph-panorama__texte p{ font-size: 1.125rem; margin-top: 10px; max-width: 46ch; }
.sph-panorama__cartes{ max-width: var(--sph-conteneur); margin: -70px auto 0; padding-inline: var(--sph-gouttiere); display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sph-gouttiere); position: relative; }
@media (max-width: 860px){ .sph-panorama__cartes{ grid-template-columns: minmax(0,1fr); margin-top: -40px; } .sph-panorama__photo{ height: 320px; } }

/* ===================== S7 — cette semaine ===================== */
.sph-semaine{ display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sph-gouttiere); }
.sph-semaine__mini{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.sph-date-pastille{ display: inline-flex; align-items: center; background: var(--sph-mousse); color: var(--sph-sapin); font-family: var(--sph-titre); font-weight: 700; font-size: .71875rem; padding: 4px 10px; border-radius: var(--sph-pilule); margin-bottom: 6px; align-self: flex-start; }
@media (max-width: 860px){ .sph-semaine{ grid-template-columns: minmax(0,1fr); } .sph-semaine__mini{ grid-template-columns: 1fr 1fr; } }

/* ===================== S8 — comment on travaille ===================== */
.sph-travaille{ display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sph-gouttiere); align-items: center; }
.sph-chiffres{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.sph-chiffre{ background: var(--sph-blanc); border-radius: var(--sph-rayon); box-shadow: var(--sph-ombre); padding: 20px; text-align: center; }
.sph-chiffre b{ display: block; font-family: var(--sph-titre); font-weight: 800; font-size: clamp(2.2rem, 1.8rem + 1vw, 3rem); }
.sph-chiffre span{ font-size: .8125rem; color: var(--sph-sapin-doux); }
.sph-auteur-mini{ background: var(--sph-blanc); border-radius: var(--sph-rayon-grand); box-shadow: var(--sph-ombre); padding: 26px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.sph-auteur-mini img{ width: 112px; height: 112px; border-radius: 50%; object-fit: cover; border: 4px solid var(--sph-rouge); }
.sph-auteur-mini h3{ font-size: 1.25rem; }
.sph-auteur-mini p{ font-size: .875rem; color: var(--sph-sapin-doux); margin: 0; }
/* 04/10 passe 3 : les 2 rédactrices/rédacteurs côte à côte, plutôt qu'un seul qui
   laissait un grand vide à droite de la section. */
.sph-auteurs-duo{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.sph-auteurs-duo .sph-auteur-mini{ padding: 20px; }
.sph-auteurs-duo .sph-auteur-mini img{ width: 88px; height: 88px; }
.sph-auteurs-duo .sph-auteur-mini h3{ font-size: 1.0625rem; }
@media (max-width: 860px){ .sph-travaille{ grid-template-columns: minmax(0,1fr); } }
@media (max-width: 480px){ .sph-auteurs-duo{ grid-template-columns: minmax(0,1fr); } }

/* ===================== S9 — panneau reprise ===================== */
.sph-panneau-reprise{ background: var(--sph-sapin); color: var(--sph-air); border-radius: var(--sph-rayon-grand); padding: clamp(28px,4vw,48px); display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; position: relative; overflow: hidden; }
.sph-panneau-reprise h2{ color: var(--sph-air); }
.sph-panneau-reprise__photo{ border-radius: var(--sph-rayon); overflow: hidden; height: 100%; min-height: 260px; }
.sph-panneau-reprise__photo img{ width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px){ .sph-panneau-reprise{ grid-template-columns: minmax(0,1fr); } }

/* ===================== S10 — FAQ d'accueil (centrée) ===================== */
.sph-faq-accueil{ max-width: 760px; margin-inline: auto; text-align: center; }
.sph-faq-accueil .sph-section__tete{ justify-content: center; }
.sph-faq-accueil .sbt-faq{ text-align: left; margin-top: 0; }

/* ===================== 7. Pied de page (surcharge des bleus en dur) ===================== */
.sph-footer.sbt-footer{ background: var(--sph-sapin); color: var(--sph-air); position: relative; }
.sph-footer.sbt-footer::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: repeating-linear-gradient(100deg, var(--sph-jaune) 0 18px, transparent 18px 26px); }
.sph-footer a{ color: #C6D3E0; }
.sph-footer a:hover{ color: var(--sph-air); }
.sph-footer .sbt-footer-logo svg{ height: 28px; width: auto; }
.sph-footer .sbt-footer-desc{ color: #9DB0C4; }
.sph-footer .sbt-t3{ color: var(--sph-air); }
.sph-footer .sbt-t4{ color: #9DB0C4; }
.sph-footer-avertissement{ font-size: .78125rem; color: #8AA08D; margin-top: 10px; max-width: 34ch; }
.sph-footer .sbt-footer-grille, .sph-footer .sbt-footer-cta{ border-color: rgba(246,248,251,.14); }
/* 04/10 passe 3 : #sbt-cookies est un FRÈRE de <footer>, pas son descendant (il est posé
   après </footer> dans footer.php) — le sélecteur « .sph-footer .sbt-cookies » d'origine
   ne matchait donc JAMAIS et le correctif « 2 boutons de même poids » n'était pas actif.
   On cible l'id directement, qui fonctionne quelle que soit sa position dans le DOM. */
#sbt-cookies{ background: var(--sph-sapin); box-shadow: var(--sph-ombre-forte); border: 1px solid rgba(246,248,251,.12); }
/* Bandeau cookies : 2 boutons de MÊME poids visuel (jugement 03/10 — le fantôme
   transparent lisait plus léger que le plein) ; même taille, même fond plein,
   seule la couleur distingue « Refuser » de « Accepter ». */
#sbt-cookies .sbt-btn--fantome{ background: rgba(246,248,251,.14); border: 1.5px solid rgba(246,248,251,.3); color: var(--sph-air); }
#sbt-cookies .sbt-btn--fantome:hover{ background: rgba(246,248,251,.22); }
/* Compact sur mobile : toujours UNE ligne (texte tronqué par points de suspension plutôt
   que de passer le bandeau en 2 lignes), les 2 boutons restent entiers (jugement 04/10). */
@media (max-width: 600px){
	#sbt-cookies{ left: 6px; right: 6px; bottom: 6px; padding: 8px 10px; gap: 8px; }
	#sbt-cookies p{ font-size: .6875rem; line-height: 1.3; white-space: normal; }
	#sbt-cookies .sbt-btn{ padding: 7px 12px; font-size: .75rem; min-height: 30px; }
}

/* ===================== 8. Rubrique (category.php) ===================== */
.sph-rubrique-bandeau{ position: relative; height: 440px; color: var(--sph-air); display: flex; align-items: flex-end; }
.sph-rubrique-bandeau img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 03/10 (jugement) : sous-titre illisible sur la photo (texte blanc fin sur rayures
   grises) — voile renforcé, concentré sous le bloc de texte. */
.sph-rubrique-bandeau::before{ content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(0deg, rgba(8,20,34,.92) 0%, rgba(8,20,34,.55) 32%, rgba(8,20,34,.18) 58%, transparent 75%),
		linear-gradient(100deg, rgba(8,20,34,.55) 0%, rgba(8,20,34,.1) 55%, transparent 80%);
}
.sph-rubrique-bandeau__texte{ position: relative; z-index: 1; max-width: var(--sph-conteneur); margin-inline: auto; padding: 0 var(--sph-gouttiere) 48px; width: 100%; }
.sph-rubrique-bandeau__picto{ width: 56px; height: 56px; border-radius: 50%; background: var(--sph-blanc); color: var(--sph-sapin); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; box-shadow: var(--sph-ombre); }
.sph-rubrique-bandeau__picto svg{ width: 26px; height: 26px; }
.sph-rubrique-bandeau h1{ color: var(--sph-air); font-size: clamp(2.2rem, 1.6rem + 2.4vw, 4.25rem); text-shadow: 0 2px 16px rgba(0,0,0,.35); }
.sph-rubrique-bandeau p{ font-size: 1.125rem; margin-top: 10px; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
@media (max-width: 760px){
	.sph-rubrique-bandeau{ height: 300px; }
	.sph-rubrique-bandeau__texte{ padding-top: 88px; }
	.sph-rubrique-bandeau__picto{ position: relative; z-index: 2; }
}

.sph-rubrique-carte{
	max-width: var(--sph-conteneur); margin: -56px auto 0; padding-inline: var(--sph-gouttiere);
	position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
}
.sph-rubrique-intro{ flex: 1; min-width: 0; max-width: 480px; padding-bottom: 14px; }
.sph-chiffres--rubrique{ grid-template-columns: repeat(2, minmax(0,160px)); margin-top: 14px; }
.sph-chiffres--rubrique .sph-chiffre{ padding: 14px 16px; }
.sph-chiffres--rubrique .sph-chiffre b{ font-size: clamp(1.5rem, 1.3rem + .6vw, 1.875rem); }
.sph-rubrique-carte .sph-dossard{ width: 420px; max-width: 100%; flex: none; }
.sph-rubrique-carte h2{ font-size: 1.125rem; margin-bottom: 12px; }
.sph-rubrique-km{ display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--sph-filet); font-size: .9375rem; }
.sph-rubrique-km:last-child{ border-bottom: 0; }
.sph-rubrique-km__num{ font-family: var(--sph-titre); font-weight: 800; color: var(--sph-rouge); font-size: .8125rem; }
.sph-rubrique-km a{ text-decoration: none; color: var(--sph-sapin); flex: 1; }
.sph-rubrique-km__duree{ color: var(--sph-sapin-doux); font-size: .8125rem; white-space: nowrap; }
@media (max-width: 980px){ .sph-rubrique-intro{ display: none; } .sph-rubrique-carte{ justify-content: center; } }
@media (max-width: 760px){ .sph-rubrique-carte{ margin-top: -40px; } }

.sph-rubrique-filtres{ display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.sph-rubrique-pilule{ border: 1.5px solid var(--sph-filet); background: var(--sph-blanc); border-radius: var(--sph-pilule); padding: 8px 16px; font-family: var(--sph-titre); font-weight: 600; font-size: .875rem; }

.sph-grille-rubrique{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sph-gouttiere); }
@media (max-width: 980px){ .sph-grille-rubrique{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px){ .sph-grille-rubrique{ grid-template-columns: minmax(0,1fr); } }

.sph-voir-plus{ display: flex; justify-content: center; margin-top: 36px; }

/* « Ce que couvre la rubrique » : chevron propre, jamais le triangle natif du navigateur. */
.sph-couvre{ margin-top: 48px; }
.sph-couvre details{ background: var(--sph-blanc); border: 1px solid var(--sph-filet); border-radius: var(--sph-rayon); padding: 4px 22px; }
.sph-couvre summary{
	font-family: var(--sph-titre); font-weight: 700; cursor: pointer; list-style: none;
	display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0;
}
.sph-couvre summary::-webkit-details-marker{ display: none; }
.sph-couvre summary::after{
	content: ""; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--sph-air);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313291F' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E");
	background-position: center; background-size: 14px; background-repeat: no-repeat; transition: transform .3s ease;
}
.sph-couvre details[open] summary::after{ transform: rotate(135deg); }

/* « Les autres rubriques » : cartes photo, jamais de simples pastilles de texte. */
.sph-autres-rubriques{ display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; }
.sph-autre-rubrique{ display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--sph-sapin); }
.sph-autre-rubrique__photo{ position: relative; aspect-ratio: 4/3; border-radius: var(--sph-rayon); overflow: hidden; background: var(--sph-filet); box-shadow: var(--sph-ombre); }
.sph-autre-rubrique__photo img{ width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.sph-autre-rubrique:hover .sph-autre-rubrique__photo img{ transform: scale(1.06); }
.sph-autre-rubrique__picto{ position: absolute; left: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 50%; background: var(--sph-blanc); color: var(--sph-sapin); display: flex; align-items: center; justify-content: center; }
.sph-autre-rubrique__picto svg{ width: 18px; height: 18px; }
.sph-autre-rubrique__nom{ font-family: var(--sph-titre); font-weight: 700; font-size: .9375rem; }
@media (max-width: 980px){ .sph-autres-rubriques{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 560px){ .sph-autres-rubriques{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ===================== 8bis. Page auteur — Parcours + ses guides récents ===================== */
/* 03/10 (jugement) : « Parcours et formation » seule laissait ~600px de vide à droite. */
.sph-auteur-parcours{ display: grid; grid-template-columns: 420px 1fr; gap: var(--sph-gouttiere); align-items: start; margin-bottom: 40px; }
.sph-auteur-parcours .sph-dossard{ width: 100%; }
.sph-auteur-top{ background: var(--sph-blanc); border-radius: var(--sph-rayon-grand); box-shadow: var(--sph-ombre); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.sph-auteur-top .sbt-t4{ font-family: var(--sph-titre); font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sph-sapin-doux); margin: 0 0 4px; }
.sph-auteur-top .sph-carte--compacte{ box-shadow: none; }
.sph-auteur-top .sph-carte--compacte .sph-carte__photo{ width: 96px; }
@media (max-width: 860px){ .sph-auteur-parcours{ grid-template-columns: minmax(0,1fr); } }

/* ===================== 9. En-tête d'article (ENTETE couloirs-dossard) ===================== */
.sph-entete-article{ background: var(--sph-mousse); padding: 28px 0 0; position: relative; overflow: hidden; }
.sph-entete-article__couloirs{ position: absolute; right: 0; top: 0; height: 100%; width: 46%; opacity: .7; pointer-events: none; }
.sph-entete-article__couloirs svg{ width: 100%; height: 100%; }
/* 03/10 (jugement) : la grille réservait une 2e colonne (largeur du rail) qui ne
   contenait rien — ~850px de vide. La grille se resserre sur la colonne de titre
   réelle ; le décor « couloirs » occupe désormais vraiment l'espace libéré à droite. */
.sph-entete-article__grille{ max-width: var(--sph-conteneur); margin-inline: auto; padding-inline: var(--sph-gouttiere); position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 860px); justify-content: start; gap: var(--sph-gouttiere); }
.sph-entete-article__colonne{ grid-column: 1; }
.sph-entete-article h1{ font-size: clamp(1.9rem, 1.5rem + 1.6vw, 3.125rem); margin: 14px 0; }
.sph-entete-article__chapo{ font-size: 1.25rem; color: var(--sph-sapin-doux); max-width: 56ch; }
.sph-entete-article__meta{ display: flex; align-items: center; gap: 12px; row-gap: 6px; flex-wrap: wrap; margin-top: 18px; font-size: .875rem; color: var(--sph-sapin-doux); }
.sph-entete-article__meta img{ width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.sph-entete-article__meta a{ font-weight: 700; color: var(--sph-sapin); text-decoration: none; }
.sph-entete-article__meta-auteur{ display: flex; align-items: center; gap: 10px; }
.sph-entete-article__meta-infos{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* 04/10 passe 3 : « Julien / Marceau », « Publié le 02 / septembre 2026 » éclataient
   chacun sur 2 lignes en 390 — auteur sur une ligne, date + durée dessous. */
@media (max-width: 640px){
	.sph-entete-article__meta-auteur{ flex-basis: 100%; }
	.sph-entete-article__meta-infos{ flex-basis: 100%; }
}
.sph-entete-article__photo{ grid-column: 1; position: relative; margin-top: 28px; transform: translateY(44px); }
.sph-entete-article__photo-cadre{ aspect-ratio: 16/9; max-height: 440px; border-radius: var(--sph-rayon-grand); overflow: hidden; box-shadow: var(--sph-ombre-forte); }
.sph-entete-article__photo-cadre img{ width: 100%; height: 100%; object-fit: cover; }
.sph-entete-article__dossard{ position: absolute; top: -18px; right: 22px; transform: rotate(-3deg); background: var(--sph-blanc); border-radius: 16px; box-shadow: var(--sph-ombre-forte); padding: 12px 16px; display: flex; align-items: center; gap: 10px; }
.sph-entete-article__dossard svg{ width: 20px; height: 20px; color: var(--sph-rouge); }
.sph-entete-article__dossard b{ font-family: var(--sph-titre); font-size: .875rem; }
.sph-entete-article__espace{ height: 56px; }
@media (max-width: 1080px){ .sph-entete-article__grille{ grid-template-columns: minmax(0,1fr); } }
@media (max-width: 640px){ .sph-entete-article__photo{ transform: translateY(24px); } .sph-entete-article__dossard{ right: 10px; } }

/* ===================== 10. Pages annexes & gabarits ===================== */
.sph-page-hero{ position: relative; background: var(--sph-mousse); padding: 64px 0; overflow: hidden; }
.sph-page-hero__couloirs{ position: absolute; right: -10%; top: -10%; width: 60%; height: 120%; opacity: .5; }
.sph-page-hero__grille{ max-width: var(--sph-conteneur); margin-inline: auto; padding-inline: var(--sph-gouttiere); position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sph-gouttiere); align-items: center; }
.sph-page-hero h1{ font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.sph-page-hero__photo{ border-radius: var(--sph-rayon-grand); overflow: hidden; height: 320px; box-shadow: var(--sph-ombre); }
.sph-page-hero__photo img{ width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px){ .sph-page-hero__grille{ grid-template-columns: minmax(0,1fr); } .sph-page-hero__photo{ height: 220px; } }

.sph-page-corps{ max-width: 720px; margin: 48px auto; padding-inline: var(--sph-gouttiere); font-size: 1.0625rem; line-height: 1.72; }
.sph-page-corps h2{ margin-top: 1.8em; }

.sph-equipe{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sph-gouttiere); max-width: var(--sph-conteneur); margin: 0 auto 48px; padding-inline: var(--sph-gouttiere); }
.sph-equipe-carte{ background: var(--sph-blanc); border-radius: var(--sph-rayon-grand); box-shadow: var(--sph-ombre); padding: 28px; display: flex; gap: 18px; align-items: center; }
.sph-equipe-carte img{ width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 3px solid var(--sph-rouge); flex: none; }
@media (max-width: 700px){ .sph-equipe{ grid-template-columns: minmax(0,1fr); } }

.sph-engagements{ background: var(--sph-sapin); color: var(--sph-air); padding: 56px 0; }
.sph-engagements__grille{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sph-gouttiere); max-width: var(--sph-conteneur); margin-inline: auto; padding-inline: var(--sph-gouttiere); }
.sph-engagement{ background: rgba(246,248,251,.06); border-radius: var(--sph-rayon); padding: 22px; }
@media (max-width: 760px){ .sph-engagements__grille{ grid-template-columns: minmax(0,1fr); } }

.sph-frise{ max-width: 760px; margin: 0 auto 56px; padding-inline: var(--sph-gouttiere); display: flex; flex-direction: column; gap: 28px; position: relative; }
.sph-frise::before{ content: ""; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 2px; background: var(--sph-filet); }
.sph-frise-etape{ display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: flex-start; position: relative; }
.sph-frise-etape__num{ width: 56px; height: 56px; border-radius: 50%; background: var(--sph-rouge); color: var(--sph-air); display: flex; align-items: center; justify-content: center; font-family: var(--sph-titre); font-weight: 800; z-index: 1; }
.sph-frise-etape img{ border-radius: var(--sph-rayon); margin-top: 10px; aspect-ratio: 16/9; object-fit: cover; }

.sph-ce-qu-on-ne-fait-pas{ background: var(--sph-mousse); border-radius: var(--sph-rayon-grand); padding: 24px 28px; max-width: 760px; margin: 0 auto 56px; }

.sph-contact__grille{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sph-gouttiere); max-width: var(--sph-conteneur); margin: 48px auto; padding-inline: var(--sph-gouttiere); align-items: start; }
.sph-contact__photo{ position: relative; border-radius: var(--sph-rayon-grand); overflow: hidden; height: 420px; }
.sph-contact__photo img{ width: 100%; height: 100%; object-fit: cover; }
.sph-contact__dossard-flottant{ position: absolute; bottom: 24px; left: 24px; max-width: 260px; }
.sph-contact__carte{ background: var(--sph-blanc); border-radius: var(--sph-rayon-grand); box-shadow: var(--sph-ombre-forte); padding: 28px; }
.sph-contact__coords{ margin-top: 20px; font-size: .9375rem; color: var(--sph-sapin-doux); }
@media (max-width: 860px){ .sph-contact__grille{ grid-template-columns: minmax(0,1fr); } .sph-contact__photo{ height: 240px; } }

.sph-404{ min-height: 56vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 64px var(--sph-gouttiere); gap: 16px; }
.sph-404 h1{ font-size: clamp(2.4rem, 1.8rem + 2vw, 4rem); }

.sph-search__resultats{ max-width: var(--sph-conteneur); margin: 0 auto 56px; padding-inline: var(--sph-gouttiere); display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sph-gouttiere); }
@media (max-width: 980px){ .sph-search__resultats{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px){ .sph-search__resultats{ grid-template-columns: minmax(0,1fr); } }

/* ===================== 11. Page ville (gabarit préparé, non lié) ===================== */
.sph-ville__grille{ display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sph-gouttiere); max-width: var(--sph-conteneur); margin: 0 auto 48px; padding-inline: var(--sph-gouttiere); align-items: start; }
.sph-ville__accordeons{ display: flex; flex-direction: column; gap: 10px; }
.sph-ville__accordeons details{ background: var(--sph-blanc); border: 1px solid var(--sph-filet); border-radius: var(--sph-rayon); padding: 4px 20px; }
.sph-ville__accordeons summary{ font-family: var(--sph-titre); font-weight: 700; padding: 14px 0; cursor: pointer; }
.sph-ville__formulaire-colonne .sph-dossard{ position: sticky; top: 96px; }
@media (max-width: 980px){ .sph-ville__grille{ grid-template-columns: minmax(0,1fr); } .sph-ville__formulaire-colonne .sph-dossard{ position: static; } }

/* ===================== 12. Hub coach sportif (gabarit préparé, non lié) ===================== */
.sph-hub-villes{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; max-width: var(--sph-conteneur); margin: 0 auto 56px; padding-inline: var(--sph-gouttiere); }
.sph-hub-villes a{ background: var(--sph-blanc); border-radius: 12px; border: 1px solid var(--sph-filet); padding: 12px 16px; text-decoration: none; color: var(--sph-sapin); font-family: var(--sph-titre); font-weight: 600; font-size: .9375rem; }
@media (max-width: 760px){ .sph-hub-villes{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ===================== Garde-fous mobile ===================== */
html, body{ overflow-x: clip; }
.sph-hero__gauche, .sph-hero__droite, .sph-duo__colonne, .sbt-article-principal, .sbt-rail{ min-width: 0; }
@media (max-width: 480px){ .sph-entete__cta{ display: none; } .sph-menu-bascule{ margin-left: auto; } }
@media (max-width: 1080px){ .sph-entete-article__couloirs{ width: 100%; opacity: .35; } .sph-entete-article__couloirs svg{ max-width: 100%; } }
/* Tableau débordant (jugement 03/10) : défilement horizontal propre DANS un cadre,
   jamais une colonne tronquée au bord de l'écran. */
.sbt-article-corps table{
	display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
	border: 1px solid var(--sph-filet); border-radius: 14px; box-shadow: var(--sph-ombre);
	margin-block: 1.6em; background: var(--sph-blanc); border-spacing: 0; border-collapse: separate;
}
.sbt-article-corps table th, .sbt-article-corps table td{ padding: 12px 16px; border-bottom: 1px solid var(--sph-filet); text-align: left; white-space: normal; min-width: 220px; }
.sbt-article-corps table th{ font-family: var(--sph-titre); background: var(--sph-mousse); }
.sbt-article-corps table tr:last-child td{ border-bottom: 0; }
.sbt-article-corps svg{ max-width: 100%; height: auto; }
.sbt-article-corps figure{ max-width: 100%; overflow: hidden; }

/* FAQ brute (jugement 03/10) : habillage de secours pour tout accordéon natif qui
   n'a pas reçu la classe .sbt-faq-liste (section.faq, FAQ en <details> isolés dans
   le corps), sans toucher au contenu — on habille ce qu'il y a. */
.sbt-article-corps details, section.faq details,
.sbt-article-corps .faq details{
	background: var(--sph-blanc); border: 1px solid var(--sph-filet) !important; border-radius: 14px;
	padding: 0 !important; margin-bottom: 10px; overflow: hidden;
}
.sbt-article-corps details summary, section.faq summary, .sbt-article-corps .faq summary{
	list-style: none; cursor: pointer; padding: 16px 18px; font-weight: 700; font-family: var(--sph-titre);
	display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.sbt-article-corps details summary::-webkit-details-marker,
section.faq summary::-webkit-details-marker{ display: none; }
.sbt-article-corps details summary::after, section.faq summary::after{
	content: "+"; flex: none; font-size: 1.25rem; color: var(--sph-rouge); transition: transform .25s ease;
}
.sbt-article-corps details[open] summary::after, section.faq details[open] summary::after{ transform: rotate(45deg); }
.sbt-article-corps details > :not(summary), section.faq details > :not(summary){ padding: 0 18px 16px; }

/* ===================== Premier écran : tout au-dessus du pli ===================== */
.sph-hero{ padding: 20px 0 32px; }
.sph-hero__grille{ align-items: center; }
.sph-hero__droite{ min-height: 0; height: clamp(520px, calc(100vh - 72px - 52px), 820px); }
.sph-hero__photo{ min-height: 0; height: 100%; clip-path: polygon(0 7%, 18% 1.5%, 38% 5.5%, 58% 0%, 78% 4.5%, 100% 1%, 100% 100%, 0 100%); }
.sph-hero__km{ z-index: 3; }
.sph-hero__km--1{ top: 9%; left: 10%; }
.sph-hero__km--2{ top: -14px; left: 54%; }
.sph-hero__km--3{ top: 6%; right: 4%; }
.sph-hero__carte{ bottom: 18px; z-index: 4; width: 420px; }
.sph-hero__carte .sph-dossard{ max-height: none; padding: 20px 22px; }
.sph-hero__carte .sph-form{ gap: 12px; }
.sph-form__tuiles--impair > :last-child:nth-child(odd){ grid-column: 1 / -1; }
.sph-form__tuile{ padding: 12px 14px; min-height: 54px; font-family: var(--sph-titre); font-weight: 600; font-size: .9375rem; line-height: 1.2; justify-content: flex-start; }
.sph-form__tuile__texte{ flex: 1; }
.sph-form__tuile__picto{ flex: none; width: 30px; height: 30px; border-radius: 50%; background: #EDF2F8; display: inline-flex; align-items: center; justify-content: center; color: var(--sph-sapin); }
.sph-form__tuile__picto svg{ width: 17px; height: 17px; }
.sph-form__tuile.est-choisi .sph-form__tuile__picto{ background: var(--sph-rouge); color: var(--sph-blanc); }
.sph-form__tuile__coche{ flex: none; }
.sph-hero__titre{ font-size: clamp(2.6rem, 1.4rem + 3vw, 4.75rem); }
@media (min-width: 1081px) and (max-height: 820px){
	.sph-hero__titre{ font-size: clamp(2.4rem, 1.2rem + 2.6vw, 4rem); }
	.sph-hero__chapo{ font-size: 1.125rem; margin-top: 14px; }
	.sph-hero__preuves{ margin-top: 20px; }
}
@media (max-width: 1080px){
	.sph-hero__droite{ height: auto; }
	.sph-hero__photo{ height: 300px; }
	.sph-hero__carte{ position: relative; width: auto; margin: -90px 12px 0; bottom: auto; }
}
@media (max-width: 600px){
	.sph-hero{ padding-top: 14px; }
	.sph-hero__gauche{ display: contents; }
	.sph-hero__grille{ gap: 0; }
	.sph-hero__grille > *, .sph-hero__gauche > *{ min-width: 0; }
	.sph-hero .sph-surtitre{ order: 1; }
	.sph-hero__titre{ order: 2; margin-top: 10px; font-size: clamp(2rem, 1.3rem + 4.4vw, 2.6rem); }
	.sph-hero__droite{ order: 3; margin-top: 14px; }
	.sph-hero__chapo{ order: 4; margin-top: 22px; font-size: 1.0625rem; }
	.sph-hero__preuves{ order: 5; margin-top: 16px; }
	.sph-hero__photo{ height: 200px; }
	.sph-hero__carte{ margin: -64px 0 0; }
	.sph-hero__carte .sph-dossard{ padding: 16px; }
	.sph-hero__km--2{ display: none; }
	.sph-form__tuile{ min-height: 50px; padding: 10px 12px; font-size: .875rem; }
}
.sph-hero__carte{ width: 460px; }
.sph-hero__photo img{ object-position: 50% 22%; }
@media (max-width: 600px){ .sph-hero__photo img{ object-position: 50% 12%; } }
.sph-form__champ{ min-width: 0; }
.sph-form__champ input{ width: 100%; min-width: 0; box-sizing: border-box; }
.sph-form__nav .sph-form__bouton{ width: 100%; justify-content: center; white-space: nowrap; }
.sph-form__consentement{ font-size: .8125rem; line-height: 1.4; }
.sph-form__consentement a{ color: var(--sph-sapin); text-decoration: underline; }
@media (max-width: 380px){ .sph-form__nav .sph-form__bouton{ white-space: normal; } }
@media (max-width: 640px){ .sph-entete-article__dossard{ top: 12px; right: 12px; } }
/* Contrastes mesurés (porte de sortie 03/10) */
.sph-panneau-reprise .sph-form{ background: var(--sph-blanc); color: var(--sph-sapin); border-radius: var(--sph-rayon-grand); padding: 22px; box-shadow: var(--sph-ombre-forte); }
.sph-panneau-reprise .sph-form__question{ color: var(--sph-sapin); }
.sph-panneau-reprise .sph-form__compteur{ color: var(--sph-sapin-doux); }
.sbt-footer .sbt-btn, .sbt-footer .sbt-btn:visited{ color: #FFFFFF; }
.sph-rubrique-bandeau{ background-color: var(--sph-sapin); }
[class*="sbsrc-"][class$="__date"]{ color: var(--sph-sapin-doux) !important; opacity: 1 !important; }
/* Porte de sortie n°2 : texte centré long, marges hautes, étiquette hors cadre */
.sph-faq-accueil{ text-align: left; }
.sph-faq-accueil > h2, .sph-faq-accueil > .sph-surtitre, .sph-faq-accueil > p:first-of-type{ text-align: center; }
.sph-faq-accueil .sph-section__titre, .sph-faq-accueil .sph-surtitre{ text-align: center; justify-content: center; }
.sph-outil__droite{ text-align: left; }
.sph-outil__droite > *:not(ul):not(ol){ text-align: center; }
.sph-outil__droite ul, .sph-outil__droite ol{ text-align: left; }
.sph-panorama{ padding-top: 24px; }
.sph-rubrique-carte{ margin-top: 0 !important; transform: translateY(-56px); margin-bottom: -56px; }
@media (max-width: 760px){ .sph-rubrique-carte{ transform: translateY(-40px); margin-bottom: -40px; } }
.sph-entete-article__dossard{ top: 14px; right: 14px; }
/* Blocs visuels du corps d'article tirés des listes */
.sbt-article-corps ol.sph-etapes{ list-style: none; counter-reset: sph-etape; margin: 28px 0; padding: 0; display: grid; gap: 12px; }
.sbt-article-corps ol.sph-etapes > li{ counter-increment: sph-etape; position: relative; background: var(--sph-blanc); border: 1px solid var(--sph-filet); border-radius: var(--sph-rayon); box-shadow: var(--sph-ombre); padding: 16px 18px 16px 70px; margin: 0; }
.sbt-article-corps ol.sph-etapes > li::before{ content: counter(sph-etape, decimal-leading-zero); position: absolute; left: 16px; top: 14px; width: 40px; height: 40px; border-radius: 12px; background: var(--sph-sapin); color: var(--sph-jaune); font-family: var(--sph-titre); font-weight: 800; font-size: 1rem; display: flex; align-items: center; justify-content: center; }
.sbt-article-corps ul.sph-coches{ list-style: none; margin: 28px 0; padding: 20px 22px; background: #EDF2F8; border-radius: var(--sph-rayon-grand); border-left: 5px solid var(--sph-jaune); display: grid; gap: 10px; }
.sbt-article-corps ul.sph-coches > li{ position: relative; padding-left: 34px; margin: 0; }
.sbt-article-corps ul.sph-coches > li::before{ content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%; background: var(--sph-sapin) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2C230' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/14px no-repeat; }
@media (max-width: 600px){ .sbt-article-corps ol.sph-etapes > li{ padding-left: 62px; } }
.sph-credit-photo{ font-size: .75rem; color: var(--sph-sapin-doux); margin: 8px 4px 0; } .sph-credit-photo a{ color: inherit; text-decoration: underline; text-decoration-thickness: 1px; }
.sph-hero__km--2{ top: 8px; }
.sph-logo{ gap: 10px; } .sph-logo__marque{ width: 36px; height: 36px; flex: none; display: block; } .sph-logo svg{ height: 30px; }
.sph-hub-carte-fix{}
.sph-rubrique-carte{ padding-top: 8px; transform: translateY(-64px); }
@media (max-width: 760px){ .sph-rubrique-carte{ transform: translateY(-48px); } }
/* Juge final : menu entier, tuiles de preuve sans coupe sur mobile */
.sph-menu ul{ gap: 18px; overflow: visible; }
.sph-menu a{ font-size: 14.5px; }
@media (max-width: 1240px){ .sph-menu__picto{ display: none; } }
@media (max-width: 600px){
	.sph-hero__preuves{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; overflow: visible; }
	.sph-preuve{ min-width: 0; padding: 10px 10px; }
	.sph-preuve b{ font-size: 1.15rem; }
	.sph-preuve span{ font-size: .72rem; line-height: 1.25; display: block; }
}

/* ===================== Passe 3 (04/10) — corrections jugement ROUGE ===================== */

/* Menu à 5 rubriques (header.php utilise sph_rubriques_menu_entete()) : un peu plus
   serré pour garantir une seule ligne, sans chevauchement, > 980px. */
.sph-menu ul{ gap: 15px; }

/* Page « À propos » — « Ce qu'on couvre » : cartes photo (jamais des pastilles texte),
   3 colonnes à 1440/1920, 2 colonnes dès 760px (jugement 03/10 + 04/10). */
.sph-autres-rubriques--6{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 760px){ .sph-autres-rubriques--6{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* FAQ dans un article : le "+" de secours générique (règle plus haut, §« FAQ brute »)
   ne doit jamais se superposer au rond déjà dessiné par le bloc figé partial-faq.css —
   « un + framboise ET un + bleu superposés » (jugement 04/10 passe 3). Le rond du bloc
   figé est désormais rouge balise (blocs/partial-faq.css), donc on se contente de
   retirer le texte "+" en double, sans rien dupliquer. */
.sph-article-corps .sbt-faq-liste summary::after,
.sbt-article-corps .sbt-faq-liste summary::after{ content: "" !important; }

/* Liens du corps d'article : lisibles et de la palette du site, jamais le bleu/souligné
   brut par défaut du navigateur (jugement 04/10 passe 3, règle « liens du corps lisibles »). */
.sbt-article-corps a{ color: var(--sph-rouge); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.sbt-article-corps a:hover{ color: var(--sph-rouge-survol); }

/* « À découvrir également » (section injectée par le maillage interne, class .sb-maillage,
   après le passage des filtres the_content du thème) : cartes/pastilles propres, jamais
   une liste à puces soulignée façon 1998 (jugement 03/10 confirmé 04/10). CSS seul —
   le contenu du mu-plugin n'est pas modifié. */
.sbt-article-corps .sb-maillage{ margin: 32px 0; padding: 24px; background: var(--sph-mousse); border-radius: var(--sph-rayon-grand); }
.sbt-article-corps .sb-maillage h2{ font-size: 1.125rem; margin: 0 0 14px; }
.sbt-article-corps .sb-maillage ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sbt-article-corps .sb-maillage li{ margin: 0; }
.sbt-article-corps .sb-maillage a{
	display: inline-flex; align-items: center; gap: 6px; background: var(--sph-blanc);
	border: 1.5px solid var(--sph-filet); border-radius: var(--sph-pilule); padding: 9px 16px;
	font-family: var(--sph-titre); font-weight: 600; font-size: .875rem;
	text-decoration: none; color: var(--sph-sapin);
}
.sbt-article-corps .sb-maillage a::after{ content: "→"; color: var(--sph-rouge); font-weight: 700; }
.sbt-article-corps .sb-maillage a:hover{ border-color: var(--sph-rouge); color: var(--sph-rouge); }

/* « À lire aussi » : nouvelle enveloppe pleine largeur posée par single.php
   (.sph-a-lire-pleine), le bloc figé .sbt-a-lire garde ses classes internes intactes —
   jamais coincé dans la colonne de texte, marge franche avant le pied de page. */
.sph-a-lire-pleine{ background: var(--sph-air); border-top: 1px solid var(--sph-filet); padding: 56px 0 80px; }
.sph-a-lire-pleine .sbt-a-lire{ margin-top: 0; padding-top: 0; border-top: 0; }
.sph-a-lire-pleine .sbt-kicker{ font-family: var(--sph-titre); font-size: 1rem; color: var(--sph-sapin-doux); text-transform: none; letter-spacing: 0; }
.sph-a-lire-pleine .sbt-carte{ border-color: var(--sph-filet); box-shadow: var(--sph-ombre); border-radius: var(--sph-rayon); }
.sph-a-lire-pleine .sbt-carte-corps h3{ font-family: var(--sph-titre); font-weight: 700; }
.sph-a-lire-pleine .sbt-grille--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 860px){ .sph-a-lire-pleine .sbt-grille--3{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .sph-a-lire-pleine .sbt-grille--3{ grid-template-columns: minmax(0,1fr); } }

/* Premier écran mobile (390) : les 5 choix de l'étape 1 + l'en-tête doivent tenir dans
   les 700 premiers px, sans que le bandeau cookies ne les masque (jugement 04/10 passe 3).
   Photo plus basse, chevauchement plus franc, tuiles plus compactes. */
@media (max-width: 600px){
	.sph-hero{ padding-top: 6px; }
	.sph-hero__droite{ margin-top: 6px; }
	.sph-hero__photo{ height: 110px; }
	.sph-hero__carte{ margin: -92px 0 0; }
	.sph-hero__carte .sph-dossard{ padding: 10px; }
	.sph-hero__carte .sph-form{ gap: 8px; }
	.sph-hero__carte .sph-form__etape{ gap: 8px; }
	.sph-hero__carte .sph-form__question{ font-size: .9375rem; }
	.sph-form__tuile{ min-height: 38px; padding: 7px 9px; font-size: .8125rem; }
	.sph-form__tuile__picto{ width: 24px; height: 24px; }
	.sph-form__tuiles{ gap: 6px; }
}
/* Lignes de source discrètes et citation */
.sbt-article-corps .sph-source-ligne{ font-size: .8125rem; color: var(--sph-sapin-doux); margin-top: -6px; }
p.sph-source-ligne{ border-left: 2px solid var(--sph-filet); padding-left: 10px; }
.sbt-article-corps blockquote.sph-citation{ margin: 28px 0; padding: 22px 26px; background: var(--sph-sapin); color: var(--sph-air); border-radius: var(--sph-rayon-grand); font-family: var(--sph-texte); font-size: 1.25rem; line-height: 1.5; position: relative; }
.sbt-article-corps blockquote.sph-citation p{ margin: 0; color: inherit; }
.sbt-article-corps blockquote.sph-citation::before{ content: "“"; position: absolute; top: -18px; left: 18px; font-family: var(--sph-titre); font-size: 4rem; color: var(--sph-jaune); line-height: 1; }
/* Jugement n°2 : épingles qui masquent le compteur, pastille du contact, titres de cartes entiers */
.sph-hero .sph-dossard::before{ top: 6px; left: 6px; } .sph-hero .sph-dossard::after{ top: 6px; right: 6px; }
.sph-hero .sph-form__entete{ padding-inline: 14px; }
@media (max-width: 600px){ .sph-hero .sph-dossard::before, .sph-hero .sph-dossard::after{ display: none; } }
@media (max-width: 860px){ .sph-contact__dossard-flottant{ left: auto; right: 12px; top: auto; bottom: 12px; transform: none; } .sph-contact__photo img{ object-position: 50% 25%; } }
.sph-carte h3, .sbt-carte h3, .sph-grille-rubrique h3{ display: block; -webkit-line-clamp: unset; overflow: visible; max-height: none; text-overflow: clip; }
/* Variété des encadrés à coches quand ils se répètent */
.sbt-article-corps ul.sph-coches:nth-of-type(2n){ background: var(--sph-blanc); border-left: 0; border: 1px solid var(--sph-filet); box-shadow: var(--sph-ombre); }
.sbt-article-corps ul.sph-coches:nth-of-type(3n){ background: #FFF7DD; border-left-color: var(--sph-rouge); }
@media (max-width: 600px){ .sph-hero__km--3{ display: none; } }

/* =====================================================================================
   PASSE DE CORRECTIONS N°1 — 16/10/2026 (CONSIGNE-CORRECTIONS-PASSE1.md)
   Habillage seulement pour les blocs figés (.sbt-*) ; mêmes jetons, même identité.
   ===================================================================================== */

/* --- Menu mobile : hors écran = absent du rendu (élargissait la capture pleine page à 2 880 px) --- */
.sph-menu-mobile:not(.est-ouvert){ display: none; }

/* --- 1. Hero d'accueil : jusqu'au pli, carte du questionnaire entière (bas ≤ 700 à 1440×780, ≤ 870 à 1920×950) --- */
@media (min-width: 1081px){
	.sph-hero{ padding: 20px 0 0; min-height: calc(100vh - 72px); }
	.sph-hero__grille{ align-items: center; }
	/* la photo descend jusqu'au pli ; la carte est posée 80 px au-dessus du pli, à chaque étape */
	.sph-hero__droite{ height: calc(100vh - 92px); min-height: 560px; max-height: 1000px; }
	.sph-hero__photo{ border-radius: 0 0 28px 28px; }
	.sph-hero__carte{ bottom: 80px; }
	.sph-hero__carte .sph-form__tuile{ min-height: 48px; padding: 9px 12px; }
	.sph-hero__carte .sph-form{ gap: 10px; }
	.sph-hero__carte .sph-form__etape{ gap: 10px; }
}

/* --- Bandeau cookies : carte flottante compacte en bas à gauche (≤ 420 px), 2 boutons de même poids --- */
#sbt-cookies{
	left: 16px; right: auto; bottom: 16px; width: min(420px, calc(100vw - 32px));
	max-height: none; padding: 12px 14px; gap: 12px; border-radius: 16px; align-items: center;
}
#sbt-cookies p{ font-size: .78125rem; line-height: 1.35; white-space: normal; }
#sbt-cookies .sbt-cookies-actions{ gap: 8px; }
#sbt-cookies .sbt-btn{ min-width: 92px; padding: 8px 12px; font-size: .8125rem; }
@media (max-width: 600px){
	#sbt-cookies{ left: 6px; right: 6px; bottom: 6px; width: auto; padding: 8px 10px; gap: 8px; }
	#sbt-cookies p{ font-size: .6875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	#sbt-cookies .sbt-btn{ min-width: 0; padding: 7px 12px; font-size: .75rem; min-height: 30px; }
}

/* --- 2. Sections d'accueil : chacune entière dans la fenêtre (≤ 704 px à 1440, ≤ 870 à 1920) --- */
@media (min-width: 761px){ .sph-section{ padding-block: 56px; } }
.sph-section__tete{ margin-bottom: 22px; }
/* S2 la une : photo bornée, texte d'aperçu, colonne de droite à la même hauteur (aucun trou) */
.sph-une__grille{ align-items: stretch; }
@media (min-width: 981px){ .sph-une__grille{ grid-template-columns: minmax(0,6fr) minmax(0,5fr); } }
.sph-une__principale .sph-carte__photo{ aspect-ratio: auto; height: clamp(220px, 30vh, 320px); }
.sph-une__principale h3{ font-size: clamp(1.375rem, 1.1rem + .6vw, 1.625rem); }
.sph-une__colonne{ justify-content: space-between; gap: 12px; }
.sph-carte__extrait{ margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--sph-sapin-doux); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sph-carte--compacte .sph-carte__corps{ padding: 12px 14px; gap: 6px; }
.sph-carte--compacte .sph-carte__corps h3{ font-size: 1.0625rem; }
/* S3 : grille centrée à la place du carrousel (PE-0053) — survol des cartes conservé */
.sph-rangee-rubrique__grille{ display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }
/* S5 duo : photo de une bornée */
.sph-duo__grande .sph-carte__photo{ height: clamp(160px, 22vh, 230px); }
.sph-duo__grille{ gap: 12px; }
.sph-duo__mini{ gap: 12px; }
.sph-duo__colonne{ gap: 14px; }
/* S6 panorama : photo plus basse, cartes 16/9 */
.sph-section.sph-panorama{ padding-top: 16px; padding-bottom: 40px; }
.sph-panorama__photo{ height: clamp(300px, 46vh, 420px); }
.sph-panorama__cartes .sph-carte__photo{ aspect-ratio: 16/9; }
/* S9 panneau reprise : marges resserrées */
.sph-panneau-reprise{ padding: clamp(24px, 3vw, 36px); }
.sph-panneau-reprise p{ margin: 10px 0 16px !important; }
/* S10 FAQ : deux colonnes pleine largeur (fin de la colonne étroite centrée de 827 px) */
.sph-section.sph-faq-accueil{ max-width: none; margin-inline: 0; text-align: left; }
.sph-faq-accueil .sph-conteneur{ display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: 56px; align-items: start; }
.sph-faq-accueil__intro h2{ font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); font-weight: 750; margin: 8px 0 14px; }
.sph-faq-accueil__intro p{ color: var(--sph-sapin-doux); margin: 0 0 20px; max-width: 44ch; }
.sph-faq-accueil .sph-surtitre{ justify-content: flex-start; }
@media (max-width: 860px){ .sph-faq-accueil .sph-conteneur{ grid-template-columns: minmax(0,1fr); gap: 24px; } }

/* --- 4. En-tête d'article : titre à gauche, photo EN FACE dans la bande (≤ 640 px à 1440) --- */
.sph-entete-article{ padding: 24px 0 40px; }
.sph-entete-article__grille{ max-width: calc(760px + 48px + 360px + 64px); grid-template-columns: minmax(0,1fr); gap: 0; justify-content: stretch; }
.sph-entete-article h1{ font-size: clamp(1.9rem, 1.35rem + 1.5vw, 2.875rem); line-height: 1.08; margin: 12px 0; }
.sph-entete-article__chapo{ font-size: 1.125rem; line-height: 1.55; margin: 0; }
.sph-entete-article__meta{ margin-top: 16px; }
.sph-entete-article__photo{ margin-top: 0; transform: none; }
.sph-entete-article__photo-cadre{ aspect-ratio: 4/3; max-height: 440px; }
.sph-entete-article__dossard{ top: 14px; right: 14px; transform: rotate(-3deg); flex-direction: row; align-items: baseline; gap: 6px; }
.sph-entete-article__dossard span{ font-size: .75rem; color: var(--sph-sapin-doux); }
.sph-entete-article__dossard svg{ align-self: center; }
@media (min-width: 861px){
	.sph-entete-article__grille{ grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); column-gap: 48px; align-items: center; }
	.sph-entete-article__colonne{ grid-column: 1; grid-row: 1; }
	.sph-entete-article__photo{ grid-column: 2; grid-row: 1; }
	.sph-entete-article__couloirs{ width: 62%; opacity: .55; }
}
/* 390 : titre, puis photo, puis chapô — sans vide */
@media (max-width: 860px){
	.sph-entete-article{ padding: 14px 0 28px; }
	.sph-entete-article__colonne{ display: contents; }
	.sph-entete-article__grille > *{ min-width: 0; }
	.sph-entete-article .sbt-fil-ariane{ order: 1; }
	.sph-entete-article .sph-surtitre{ order: 2; }
	.sph-entete-article h1{ order: 3; }
	.sph-entete-article__photo{ order: 4; grid-column: 1; margin: 4px 0 18px; }
	.sph-entete-article__photo-cadre{ aspect-ratio: 16/10; }
	.sph-entete-article__chapo{ order: 5; font-size: 1.0625rem; }
	.sph-entete-article__meta{ order: 6; }
}

/* --- 5. Corps + rail : corps 760 px, gouttière 48 px, rail ≤ 640 px (sommaire entier + questionnaire compact) --- */
:root{ --sb-lecture: 760px; --sb-rail: 360px; }
.sbt-article-mise-en-page{ column-gap: 48px; max-width: calc(760px + 48px + 360px + 64px); padding-top: 40px; }
.sbt-rail{ border-left: 0; padding-left: 0; gap: 12px; top: 88px; }
.sbt-rail-carte{ padding: 14px 16px; border-radius: var(--sph-rayon); }
.sbt-rail-carte .sbt-t4{ font-size: .75rem; margin-bottom: 8px; }
.sbt-rail-carte--sommaire{ padding: 0; border: 0; background: transparent; }
.sbt-rail .sbt-sommaire{ padding: 12px 14px; border-left-width: 4px; }
.sbt-rail .sbt-sommaire ol{ gap: 3px; margin-top: 8px; }
.sbt-rail .sbt-sommaire li a{ font-size: .8125rem; line-height: 1.3; gap: 8px; padding: 2px 0; }
.sbt-rail .sbt-sommaire-num{ width: 18px; height: 18px; font-size: .6875rem; }
.sbt-rail .sph-form{ gap: 9px; }
.sbt-rail .sph-form__etape{ gap: 8px; }
.sbt-rail .sph-form__question{ font-size: .9375rem; }
.sbt-rail .sph-form__tuiles{ gap: 6px; }
.sbt-rail .sph-form__tuile{ min-height: 40px; padding: 6px 9px; gap: 7px; font-size: .8125rem; line-height: 1.2; }
.sbt-rail .sph-form__tuile__picto{ width: 24px; height: 24px; }
.sbt-rail .sph-form__tuile__picto svg{ width: 14px; height: 14px; }
.sbt-rail .sph-form__tuile__coche{ display: none; }
.sbt-rail .sph-form__champ input{ height: 40px; }
.sbt-rail .sph-form__consentement{ font-size: .75rem; }
.sbt-rail .sph-form__bouton{ height: 46px; font-size: .875rem; padding: 0 14px; }
/* rail trop haut pour la fenêtre (articles à très long sommaire) : app.js pose .sph-rail--serre */
.sbt-rail.sph-rail--serre .sbt-sommaire li a{ font-size: .75rem; line-height: 1.22; padding: 0; }
.sbt-rail.sph-rail--serre .sbt-sommaire ol{ gap: 1px; }
.sbt-rail.sph-rail--serre .sph-form__tuile__picto{ display: none; }
.sbt-rail.sph-rail--serre .sph-form__tuile{ min-height: 34px; }
/* corps plus aéré dans ses encadrés */
.sbt-article-corps ul.sph-coches{ padding: 22px 26px; }
.sbt-article-corps ol.sph-etapes > li{ padding: 18px 22px 18px 74px; }

/* --- 9e. Listes nues du corps d'article (moule) : jamais une liste à puces brute --- */
.sbt-article-corps > ul:not([class]){
	list-style: none; margin: 24px 0; padding: 18px 22px; display: grid; gap: 10px;
	background: var(--sph-blanc); border: 1px solid var(--sph-filet); border-radius: var(--sph-rayon); box-shadow: var(--sph-ombre);
}
.sbt-article-corps > ul:not([class]) > li{ position: relative; padding-left: 30px; margin: 0; }
.sbt-article-corps > ul:not([class]) > li::before{
	content: ""; position: absolute; left: 0; top: .6em; width: 18px; height: 10px; border-radius: 2px;
	background: linear-gradient(90deg, var(--sph-rouge) 0 50%, var(--sph-blanc) 50% 100%); box-shadow: 0 0 0 1.5px var(--sph-rouge) inset;
}

/* --- 7. Contact : tout au-dessus du pli --- */
.sph-contact{ position: relative; background: var(--sph-mousse); overflow: hidden; padding: 28px 0 32px; }
.sph-contact__couloirs{ position: absolute; left: -6%; bottom: -12%; width: 56%; height: 80%; opacity: .45; pointer-events: none; }
.sph-contact__couloirs svg{ width: 100%; height: 100%; }
.sph-contact .sph-contact__grille{ position: relative; z-index: 1; margin: 0 auto; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; align-items: center; }
.sph-contact h1{ font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); margin-top: 10px; }
.sph-contact__chapo{ font-size: 1.0625rem; line-height: 1.55; color: var(--sph-sapin-doux); max-width: 46ch; margin: 12px 0 20px; }
.sph-contact .sph-contact__photo{ height: clamp(200px, calc(100vh - 480px), 360px); box-shadow: var(--sph-ombre); }
.sph-contact__photo img{ object-position: 50% 30%; }
.sph-contact__dossard-flottant .sph-dossard{ padding: 14px 18px; }
.sph-contact__dossard-flottant p{ margin: 0; font-family: var(--sph-titre); font-weight: 700; font-size: .9375rem; line-height: 1.35; }
.sph-contact .sph-contact__carte{ padding: 24px 26px; }
.sph-contact__coords{ margin: 14px 0 0; font-size: .875rem; }
@media (max-width: 860px){
	.sph-contact{ padding: 18px 0 32px; }
	.sph-contact .sph-contact__grille{ grid-template-columns: minmax(0,1fr); gap: 16px; }
	.sph-contact .sph-contact__photo{ display: block; height: 132px; margin-top: 16px; }
	.sph-contact .sph-contact__dossard-flottant{ display: none; }
	.sph-contact__chapo{ margin-bottom: 4px; }
	.sph-contact .sph-contact__carte{ padding: 18px; }
}

/* --- 6. À propos refaite --- */
.sph-apropos-hero{ padding: 48px 0; }
.sph-apropos-hero__chapo{ margin: 14px 0 0; max-width: 48ch; color: var(--sph-sapin-doux); font-size: 1.0625rem; line-height: 1.6; }
.sph-apropos-chiffres{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-top: 22px; max-width: 600px; }
.sph-apropos-chiffres .sph-preuve{ min-width: 0; padding: 12px 14px; }
.sph-apropos-chiffres .sph-preuve span{ display: block; line-height: 1.3; }
.sph-apropos-hero .sph-page-hero__photo{ height: 340px; }
.sph-apropos-qui__grille{ display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: 56px; align-items: center; }
.sph-apropos-qui__texte h2, .sph-apropos-methode__tete h2, .sph-apropos-equipe__tete h2{ font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem); margin: 8px 0 14px; }
.sph-apropos-qui__texte p{ color: var(--sph-sapin-doux); margin: 0 0 12px; max-width: 52ch; }
.sph-apropos-rubriques{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.sph-apropos-rubrique{ display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--sph-sapin); }
.sph-apropos-rubrique__photo{ position: relative; aspect-ratio: 16/10; border-radius: var(--sph-rayon); overflow: hidden; background: var(--sph-filet); box-shadow: var(--sph-ombre); margin-bottom: 8px; }
.sph-apropos-rubrique__photo img{ width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.sph-apropos-rubrique:hover .sph-apropos-rubrique__photo img{ transform: scale(1.06); }
.sph-apropos-rubrique__nom{ font-family: var(--sph-titre); font-weight: 700; font-size: .9375rem; }
.sph-apropos-rubrique__nb{ font-size: .8125rem; color: var(--sph-sapin-doux); }
.sph-apropos-methode h2{ color: var(--sph-air); }
.sph-jalons{ list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 28px; position: relative; }
.sph-jalons::before{ content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 3px; background: repeating-linear-gradient(90deg, var(--sph-jaune) 0 16px, transparent 16px 26px); }
.sph-jalon{ position: relative; }
.sph-jalon__km{ position: relative; z-index: 1; display: inline-flex; background: var(--sph-jaune); color: var(--sph-sapin); font-family: var(--sph-titre); font-weight: 800; font-size: .8125rem; border-radius: var(--sph-pilule); padding: 6px 14px; box-shadow: 0 0 0 6px var(--sph-sapin); }
.sph-jalon h3{ color: var(--sph-air); font-size: 1.125rem; margin: 14px 0 6px; }
.sph-jalon p{ color: #C6D3E0; font-size: .9375rem; line-height: 1.55; margin: 0; }
.sph-apropos-methode__bas{ display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 24px; margin-top: 32px; }
.sph-apropos-sources, .sph-apropos-pasfait{ background: rgba(246,248,251,.06); border: 1px solid rgba(246,248,251,.14); border-radius: var(--sph-rayon); padding: 20px 22px; }
.sph-apropos-sources h3, .sph-apropos-pasfait h3{ color: var(--sph-jaune); font-size: 1rem; margin: 0 0 12px; }
.sph-apropos-sources__liste{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.sph-apropos-sources__liste span{ background: rgba(246,248,251,.1); color: var(--sph-air); border-radius: var(--sph-pilule); padding: 5px 12px; font-size: .8125rem; font-family: var(--sph-titre); font-weight: 600; }
.sph-apropos-pasfait p{ color: #C6D3E0; margin: 0; font-size: .9375rem; line-height: 1.6; }
.sph-apropos-equipe__tete{ margin-bottom: 22px; }
.sph-apropos-equipe__grille{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.sph-membre{ background: var(--sph-blanc); border-radius: var(--sph-rayon-grand); box-shadow: var(--sph-ombre); padding: 24px; display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 22px; align-items: start; }
.sph-membre__photo img{ width: 150px; height: 150px; border-radius: 24px; object-fit: cover; border: 4px solid var(--sph-mousse); }
.sph-membre h3{ font-size: 1.3125rem; }
.sph-membre h3 a{ text-decoration: none; color: var(--sph-sapin); }
.sph-membre__role{ color: var(--sph-rouge); font-family: var(--sph-titre); font-weight: 600; font-size: .875rem; line-height: 1.35; margin: 4px 0 8px; }
.sph-membre__bio{ font-size: .9375rem; line-height: 1.6; color: var(--sph-sapin-doux); margin: 0 0 12px; }
.sph-membre__rubriques{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.sph-membre__rubriques a{ display: inline-flex; align-items: center; gap: 6px; background: var(--sph-air); border: 1px solid var(--sph-filet); border-radius: var(--sph-pilule); padding: 4px 10px; font-size: .78125rem; font-family: var(--sph-titre); font-weight: 600; text-decoration: none; color: var(--sph-sapin); }
.sph-membre__rubriques a svg{ width: 14px; height: 14px; }
.sph-membre__rubriques b{ color: var(--sph-rouge); }
.sph-apropos-cta__bande{ display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--sph-blanc); border-radius: var(--sph-rayon-grand); box-shadow: var(--sph-ombre-forte); padding: 28px 36px; border-left: 8px solid var(--sph-rouge); }
.sph-apropos-cta__bande h2{ font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); }
.sph-apropos-cta__bande p{ margin: 6px 0 0; color: var(--sph-sapin-doux); }
@media (max-width: 980px){
	.sph-apropos-qui__grille{ grid-template-columns: minmax(0,1fr); gap: 28px; }
	.sph-jalons{ grid-template-columns: repeat(2, minmax(0,1fr)); }
	.sph-jalons::before{ display: none; }
	.sph-apropos-methode__bas, .sph-apropos-equipe__grille{ grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 600px){
	.sph-apropos-hero{ padding: 32px 0; }
	.sph-apropos-chiffres{ grid-template-columns: repeat(2, minmax(0,1fr)); }
	.sph-apropos-rubriques{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
	.sph-jalons{ grid-template-columns: minmax(0,1fr); gap: 18px; }
	.sph-membre{ grid-template-columns: 88px minmax(0,1fr); padding: 18px; gap: 14px; }
	.sph-membre__photo img{ width: 88px; height: 88px; border-radius: 18px; }
	.sph-apropos-cta__bande{ flex-direction: column; align-items: flex-start; padding: 22px; }
}

/* --- 8. Pied de page équilibré sur toute la largeur (3 colonnes réelles, rubriques sur 2 sous-colonnes) --- */
.sph-footer .sbt-footer-grille{ grid-template-columns: minmax(0,1.2fr) minmax(0,2fr) minmax(0,1fr); gap: 56px; }
.sph-footer .sbt-footer-grille > .sbt-footer-colonne:nth-child(2) ul{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 32px; }
.sph-footer .sbt-footer-colonne ul{ gap: 10px; }
@media (max-width: 980px){ .sph-footer .sbt-footer-grille{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px; } .sph-footer .sbt-footer-colonne--marque{ grid-column: 1 / -1; } }
@media (max-width: 560px){ .sph-footer .sbt-footer-grille{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; } }
@media (max-width: 560px){ .sph-footer .sbt-footer-grille > .sbt-footer-colonne:nth-child(2){ grid-column: 1 / -1; } }

/* --- Publication n°2 (16/10) --- */
@media (min-width: 1081px){ .sph-hero__carte{ bottom: 84px; } }
.sph-travaille__preuves{ display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.sph-travaille__preuves .sph-preuve{ min-width: 170px; }
/* rail : étape « coordonnées » compacte (le rail reste ≤ 640 px) */
.sbt-rail .sph-form__rangee{ gap: 8px; }
.sbt-rail .sph-form__champ{ gap: 3px; }
.sbt-rail .sph-form__champ label{ font-size: .75rem; }
.sbt-rail .sph-form__champ input{ height: 36px; font-size: .875rem; padding: 0 10px; }
.sbt-rail .sph-form__consentement{ font-size: .6875rem; line-height: 1.35; gap: 8px; }
.sbt-rail .sph-form__bouton{ height: 42px; }
.sbt-rail .sph-form__progression .sph-form__segment{ height: 4px; }
/* contact : les épingles du dossard ne mordent plus sur le texte */
.sph-contact__dossard-flottant .sph-dossard{ padding: 18px 30px; }

/* --- Publication n°3 (16/10) : À propos mobile --- */
@media (max-width: 860px){ .sph-apropos-hero .sph-page-hero__photo{ height: 220px; } }
@media (max-width: 600px){
	.sph-membre{ display: block; }
	.sph-membre__photo{ float: left; margin: 0 14px 8px 0; }
	.sph-membre__role{ min-height: 50px; }
	.sph-membre__bio{ clear: both; }
}

/* =====================================================================================
   PASSE DE CORRECTIONS N°2 — 16/10/2026 (JUGEMENT-VISUEL D1 à D14)
   ===================================================================================== */

/* D1 — Contact mobile : petit portrait rond à côté du titre, intro courte, questionnaire entier dans 390×700 */
.sph-contact__chapo-court{ display: none; }
@media (max-width: 860px){
	.sph-contact{ padding: 14px 0 24px; }
	.sph-contact__gauche{ display: grid; grid-template-columns: 68px minmax(0,1fr); grid-template-areas: "photo sur" "photo titre" "chapo chapo"; column-gap: 14px; align-items: center; }
	.sph-contact__gauche > .sph-surtitre{ grid-area: sur; align-self: end; }
	.sph-contact__gauche > h1{ grid-area: titre; align-self: start; margin: 4px 0 0; font-size: 1.75rem; line-height: 1.08; }
	.sph-contact__gauche > .sph-contact__chapo{ grid-area: chapo; margin: 10px 0 0; font-size: 1rem; line-height: 1.45; }
	.sph-contact .sph-contact__photo{ grid-area: photo; width: 68px; height: 68px; margin: 0; border-radius: 50%; box-shadow: 0 0 0 3px var(--sph-blanc), var(--sph-ombre); }
	.sph-contact .sph-contact__photo img{ object-position: 50% 40%; }
	.sph-contact__chapo-long{ display: none; }
	.sph-contact__chapo-court{ display: inline; }
	.sph-contact .sph-contact__grille{ gap: 14px; }
	.sph-contact .sph-contact__carte{ padding: 14px 16px; }
	.sph-contact .sph-form{ gap: 8px; }
	.sph-contact .sph-form__etape{ gap: 8px; }
	.sph-contact .sph-form__question{ font-size: .9375rem; }
	.sph-contact .sph-form__tuile{ min-height: 40px; padding: 7px 10px; }
	.sph-contact__coords{ margin-top: 10px; }
}

/* D2 — Accueil mobile : la crête découpée reste visible, aucun visage coupé (cadrage route + chaussures) */
@media (max-width: 600px){
	.sph-hero__photo{ height: 110px; clip-path: polygon(0 26%, 16% 8%, 34% 22%, 54% 0, 74% 18%, 100% 4%, 100% 100%, 0 100%); }
	.sph-hero__photo img{ object-position: 50% 100%; }
	.sph-hero__carte{ margin: -36px 0 0; }
	.sph-hero__km--1{ top: 4px; left: 8%; }
}

/* D3 + D4 — En-tête de rubrique : le voile passe AU-DESSUS de la photo (il était peint dessous) ;
   la colonne gauche porte la phrase de la rubrique + 3 chiffres réels, plus de trou blanc */
.sph-rubrique-bandeau img{ z-index: 0; }
.sph-rubrique-bandeau::before{ z-index: 1; }
.sph-rubrique-bandeau__texte{ z-index: 2; }
.sph-rubrique-bandeau__desc{ max-width: 60ch; }
.sph-rubrique-intro{ max-width: none; align-self: flex-end; padding: 0 0 18px; }
.sph-rubrique-intro__texte{ font-size: 1.1875rem; line-height: 1.5; color: var(--sph-sapin); max-width: 50ch; margin: 10px 0 0; }
.sph-chiffres--rubrique{ grid-template-columns: repeat(3, minmax(0,1fr)); max-width: 620px; margin-top: 18px; }
.sph-chiffres--rubrique .sph-chiffre span{ display: block; }
@media (min-width: 981px){ .sph-rubrique-bandeau__desc{ display: none; } }
@media (max-width: 760px){ .sph-rubrique-bandeau::before{ background: linear-gradient(0deg, rgba(8,20,34,.94) 0%, rgba(8,20,34,.78) 45%, rgba(8,20,34,.45) 75%, rgba(8,20,34,.25) 100%); } }

/* D5 — Pied de page : la vraie balise du logo, version claire, 36 px */
.sph-footer .sbt-footer-logo svg{ height: 40px; width: auto; }

/* D7 — Outil : le cadran affiche la durée choisie */
.sph-outil__cadran span{ display: flex; flex-direction: column; align-items: center; line-height: 1; }
.sph-outil__cadran span small{ font-size: .8125rem; font-weight: 600; opacity: .75; margin-top: 4px; }

/* D8 — Article mobile : la pastille de durée passe sous la photo (plus jamais sur un visage) */
@media (max-width: 860px){
	.sph-entete-article__dossard{ position: static; transform: none; display: inline-flex; margin-top: 10px; box-shadow: none; border: 1px solid var(--sph-filet); }
}

/* D9 — En-tête d'article : plus de chiffres pâles coupés au bord de la bande */
.sph-entete-article__couloirs text{ display: none; }

/* D10 — Corps d'article : des blocs qui prennent la forme de leur contenu */
.sbt-article-corps ul.sph-tuiles-chiffres{ list-style: none; margin: 28px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.sbt-article-corps ul.sph-tuiles-chiffres > li{ margin: 0; background: var(--sph-blanc); border: 1px solid var(--sph-filet); border-top: 4px solid var(--sph-jaune); border-radius: var(--sph-rayon); box-shadow: var(--sph-ombre); padding: 16px 18px; font-size: .9375rem; line-height: 1.5; }
.sbt-article-corps ul.sph-tuiles-chiffres .sph-nombre{ display: block; font-family: var(--sph-titre); font-weight: 800; font-size: 1.75rem; line-height: 1.05; color: var(--sph-rouge); margin-bottom: 6px; }
.sbt-article-corps ul.sph-vigilance{ list-style: none; margin: 28px 0; padding: 20px 22px; background: #E4F3F2; border: 0; border-left: 5px solid var(--sph-rouge); border-radius: var(--sph-rayon); box-shadow: none; display: grid; gap: 12px; }
.sbt-article-corps ul.sph-vigilance > li{ position: relative; margin: 0; padding-left: 34px; }
.sbt-article-corps ul.sph-vigilance > li::before{ content: "!"; position: absolute; left: 0; top: .1em; width: 22px; height: 22px; border-radius: 50%; background: var(--sph-rouge); color: var(--sph-blanc); font-family: var(--sph-titre); font-weight: 800; font-size: .8125rem; display: flex; align-items: center; justify-content: center; }
.sbt-article-corps ul.sph-fiches{ list-style: none; margin: 28px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.sbt-article-corps ul.sph-fiches > li{ margin: 0; background: var(--sph-blanc); border: 1px solid var(--sph-filet); border-radius: var(--sph-rayon); padding: 16px 18px 16px; font-size: .9375rem; line-height: 1.55; position: relative; }
.sbt-article-corps ul.sph-fiches > li::before{ content: ""; display: block; width: 18px; height: 10px; border-radius: 2px; margin-bottom: 10px; background: linear-gradient(90deg, var(--sph-rouge) 0 50%, var(--sph-blanc) 50% 100%); box-shadow: 0 0 0 1.5px var(--sph-rouge) inset; }
.sbt-article-corps ul.sph-fiches--impair > li:last-child{ grid-column: 1 / -1; }
.sbt-article-corps .sph-fiche__terme{ display: block; font-family: var(--sph-titre); font-weight: 700; font-size: 1.0625rem; line-height: 1.25; color: var(--sph-sapin); margin-bottom: 6px; }
.sbt-article-corps .sph-fiche__texte{ color: var(--sph-sapin-doux); }
@media (max-width: 600px){ .sbt-article-corps ul.sph-fiches{ grid-template-columns: minmax(0,1fr); } }
.sbt-article-corps aside.sph-sources-cartes{ margin: 36px 0 8px; padding: 22px 24px; background: var(--sph-mousse); border-radius: var(--sph-rayon-grand); border: 0; }
.sbt-article-corps aside.sph-sources-cartes h2{ font-size: 1.125rem; margin: 0 0 14px; }
.sbt-article-corps ul.sph-sources-liste{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.sbt-article-corps li.sph-source{ margin: 0; display: flex; align-items: center; gap: 10px; background: var(--sph-blanc); border-radius: 12px; padding: 10px 12px; box-shadow: 0 6px 16px -10px rgba(16,38,61,.35); }
.sbt-article-corps .sph-source__picto{ flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--sph-sapin) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7C843' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l4 4v14H7z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M10 12h5M10 16h5'/%3E%3C/svg%3E") center/16px no-repeat; }
.sbt-article-corps .sph-source__nom{ font-family: var(--sph-titre); font-weight: 600; font-size: .875rem; line-height: 1.25; color: var(--sph-sapin); }

/* D12 — Petites cartes : la rubrique au-dessus du titre */
.sph-carte__rubrique{ display: inline-flex; align-items: center; gap: 5px; font-family: var(--sph-titre); font-weight: 700; font-size: .71875rem; line-height: 1.2; color: var(--sph-rouge); }
.sph-carte__rubrique svg{ width: 14px; height: 14px; flex: none; }

/* D13 — Bande « Escapades locales » : même marge gauche que les autres titres */
.sph-panorama__texte{ padding-left: max(var(--sph-gouttiere), calc((100% - var(--sph-conteneur)) / 2 + var(--sph-gouttiere))); max-width: none; }
.sph-panorama__texte > *{ max-width: 560px; }
@media (max-width: 600px){ .sph-panorama__texte{ padding-right: var(--sph-gouttiere); } .sph-panorama__texte > *{ max-width: 100%; } }
/* Publication n°2 (passe 2) */
.sph-carte__meta{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.sph-outil__resultat{ max-width: 400px; }
.sph-outil__resultat .sph-carte--compacte .sph-carte__corps{ text-align: left; align-items: flex-start; }
.sbt-article-corps .sph-fiche__texte{ display: block; }
.sbt-article-corps .sph-fiche__texte::first-letter{ text-transform: uppercase; }
/* Publication n°4 (passe 2) — 390 : étape « coordonnées » du hero compacte, jamais sous le bandeau cookies */
@media (max-width: 600px){
	.sph-hero__carte{ margin-top: -44px; }
	.sph-hero__carte .sph-form__rangee{ gap: 8px; }
	.sph-hero__carte .sph-form__champ{ gap: 3px; }
	.sph-hero__carte .sph-form__champ label{ font-size: .75rem; }
	.sph-hero__carte .sph-form__champ input{ height: 40px; font-size: .9375rem; }
	.sph-hero__carte .sph-form__consentement{ font-size: .6875rem; line-height: 1.35; gap: 8px; }
	.sph-hero__carte .sph-form__bouton{ height: 46px; font-size: .875rem; }
}

/* 16/10 YMYL — Contact : texte de la page + message libre à la rédaction (sous le pli) */
.sph-contact-redac{ padding: 48px 0 56px; }
.sph-contact-redac__grille{ display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 56px; align-items: start; }
.sph-contact-redac__texte h2{ font-size: 1.375rem; margin: 22px 0 6px; }
.sph-contact-redac__texte h2:first-child, .sph-contact-redac__texte p:first-child{ margin-top: 0; }
.sph-contact-redac__texte p{ max-width: 62ch; line-height: 1.6; }
.sph-contact-redac__form{ background: var(--sph-blanc); border-radius: var(--sph-rayon-grand); box-shadow: var(--sph-ombre); padding: 26px; display: grid; gap: 12px; }
.sph-contact-redac__form h2{ margin: 0; font-size: 1.5rem; }
.sph-contact-redac__form p{ margin: 0; color: var(--sph-sapin-doux); line-height: 1.5; }
.sph-contact-redac__form textarea{ width: 100%; font: inherit; padding: 12px 14px; border: 1.5px solid var(--sph-trait, #cfd8d3); border-radius: var(--sph-rayon); resize: vertical; min-height: 120px; }
.sph-contact-redac__form .sph-btn{ justify-self: start; }
.sph-contact-redac__ok{ color: var(--sph-sapin); font-weight: 600; }
@media (max-width: 860px){ .sph-contact-redac__grille{ grid-template-columns: minmax(0,1fr); gap: 28px; } .sph-contact-redac{ padding: 32px 0 40px; } }

/* =====================================================================================
   PASSE DE CORRECTIONS N°3 — 16/10/2026 (jugement visuel n°2, réserves R2 à R9)
   ===================================================================================== */

/* R3 — Cartes de grille : la photo ne dicte plus la hauteur. Même rapport d'image pour toutes
   les cartes d'une grille (photo recadrée), donc titres alignés et aucun vide sous le titre. */
.sph-carte__photo{ overflow: hidden; min-height: 0; }
.sph-carte__photo > img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sph-carte--compacte .sph-carte__photo{ min-height: 84px; }
.sph-apropos-rubrique__photo > img, .sph-autre-rubrique__photo > img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sph-a-lire-pleine .sbt-carte img{ width: 100%; aspect-ratio: 16/10; height: auto; object-fit: cover; display: block; }

/* R2 — Cartes de sources : nom de la source, et intitulé du document quand le texte le donne */
.sbt-article-corps li.sph-source{ align-items: flex-start; }
.sbt-article-corps .sph-source__txt{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sbt-article-corps .sph-source__doc{ font-size: .8125rem; line-height: 1.4; color: var(--sph-sapin-doux); overflow-wrap: anywhere; }
.sbt-article-corps .sph-sources-cartes--detail ul.sph-sources-liste{ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.sbt-article-corps .sph-sources-cartes .sph-source__nom a{ color: inherit; }

/* R5 — Bandeau cookies mobile : la phrase entière, sur 2 lignes, jamais « … » */
@media (max-width: 600px){
	#sbt-cookies{ align-items: center; }
	#sbt-cookies p{ flex: 1; min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; margin: 0; }
	#sbt-cookies .sbt-cookies-actions{ flex: none; gap: 6px; }
	#sbt-cookies .sbt-btn{ padding: 7px 10px; }
}

/* R6 — Durée de lecture : petite étiquette dans la ligne auteur/date (mobile) ; pastille sur la photo (ordinateur) */
.sph-meta-duree{ display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--sph-pilule); background: var(--sph-mousse); color: var(--sph-sapin); font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.sph-meta-duree svg{ width: 14px; height: 14px; color: var(--sph-rouge); }
.sph-meta-duree--mobile{ display: none; }
@media (max-width: 860px){
	.sph-meta-duree--mobile{ display: inline-flex; }
	.sph-entete-article__dossard{ display: none !important; }
}

/* R7 — Pas de bande « Une question sur votre reprise ? » sur Contact et À propos ; lien vers la page courante = simple texte */
.sph-page-contact .sbt-footer-cta, .sph-page-a-propos .sbt-footer-cta{ display: none; }
.sph-ici{ color: inherit; font-weight: 700; cursor: default; }
.sph-footer .sph-ici{ color: var(--sph-air); }

/* R8 — Rubrique : 24 px entre la photo et « En bref » (la carte est remontée de 64 px sur la photo) */
@media (min-width: 981px){
	.sph-rubrique-intro{ align-self: flex-start; padding-top: 80px; }
}

/* Contact : plus de chiffre pâle du décor (« 2 ») à côté du chapô */
.sph-contact__couloirs text{ display: none; }

/* Reprise YMYL — consentement rallongé : chaque étape du questionnaire tient entière au-dessus du pli, bouton compris */
@media (max-width: 860px){
	/* Contact 390 : à l'étape coordonnées, le chapô s'efface et la carte se resserre (comme le hero) */
	.sph-contact:has(.sph-form__etape[data-etape="coordonnees"].est-active) .sph-contact__chapo{ display: none; }
	.sph-contact .sph-form__etape[data-etape="coordonnees"] .sph-form__rangee{ gap: 8px; }
	.sph-contact .sph-form__etape[data-etape="coordonnees"] .sph-form__champ{ gap: 3px; }
	.sph-contact .sph-form__etape[data-etape="coordonnees"] .sph-form__champ label{ font-size: .75rem; }
	.sph-contact .sph-form__etape[data-etape="coordonnees"] .sph-form__champ input{ height: 40px; font-size: .9375rem; }
	.sph-contact .sph-form__etape[data-etape="coordonnees"] .sph-form__consentement{ font-size: .6875rem; line-height: 1.35; gap: 8px; }
	.sph-contact .sph-form__etape[data-etape="coordonnees"] .sph-form__bouton{ height: 46px; font-size: .875rem; }
	/* « Écrire à la rédaction » : entier dans la fenêtre d'un téléphone, au-dessus du bandeau cookies */
	.sph-contact-redac__form{ padding: 16px; gap: 8px; }
	.sph-contact-redac__form h2{ font-size: 1.25rem; }
	.sph-contact-redac__form > p{ font-size: .875rem; line-height: 1.4; }
	.sph-contact-redac__form .sph-form__champ{ gap: 3px; }
	.sph-contact-redac__form .sph-form__champ label{ font-size: .75rem; }
	.sph-contact-redac__form input[type="text"], .sph-contact-redac__form input[type="email"]{ height: 40px; }
	.sph-contact-redac__form textarea{ min-height: 84px; height: 84px; }
	.sph-contact-redac__form .sph-form__consentement{ font-size: .75rem; line-height: 1.35; }
	.sph-contact-redac__form .sph-btn{ min-height: 44px; }
}
@media (max-width: 600px){
	/* Accueil 390 : à l'étape coordonnées, la bande photo se réduit pour que la carte reste au-dessus du bandeau */
	.sph-hero:has(.sph-form__etape[data-etape="coordonnees"].est-active) .sph-hero__photo{ height: 80px; }
}
/* Non-régression BE-0014 — « Votre programme de reprise » (texte allongé par la passe YMYL) : ≤ 704 px à 1440 */
@media (min-width: 861px){
	.sph-panneau-reprise p{ max-width: none; }
	.sph-panneau-reprise .sph-form{ padding: 18px 22px; }
	.sph-panneau-reprise .sph-form__tuile{ min-height: 48px; padding-block: 8px; }
}
/* Passe 3, retouches après la 1re mesure */
.sbt-footer-colonne ul .sph-ici{ font-size: .875rem; font-weight: 600; }
.sph-apropos-cta__bande .sph-btn{ white-space: nowrap; flex: none; }
.sph-meta-duree{ background: var(--sph-blanc); border: 1px solid var(--sph-filet); }
@media (max-width: 860px){ .sph-entete-article__meta-infos > span[aria-hidden="true"]{ display: none; } .sph-entete-article__meta-infos{ column-gap: 10px; } }
.sbt-article-corps .sph-sources-cartes--detail li.sph-source:last-child:nth-child(odd){ grid-column: 1 / -1; }
@media (min-width: 861px){ .sph-panneau-reprise{ padding-block: 26px; } }

/* ===================== PASSE DE CORRECTIONS N°4 (16/10) ===================== */
/* D2 — Contact : UNE carte, deux onglets en piste (segmented control), chaque onglet entier au-dessus du pli */
.sph-onglets__liste{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 4px; padding: 4px; margin-bottom: 18px; background: var(--sph-mousse); border-radius: var(--sph-pilule); }
.sph-onglets__onglet{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--sph-pilule); background: transparent; color: var(--sph-sapin-doux); font-family: var(--sph-titre); font-weight: 700; font-size: .9375rem; line-height: 1.15; cursor: pointer; transition: background .2s ease, color .2s ease, box-shadow .2s ease; white-space: nowrap; }
.sph-onglets__onglet svg{ width: 18px; height: 18px; flex: none; }
.sph-onglets__onglet:hover{ color: var(--sph-sapin); background: rgba(255,255,255,.55); }
.sph-onglets__onglet.est-actif{ background: var(--sph-sapin); color: var(--sph-air); box-shadow: 0 4px 12px rgba(16,38,61,.18); }
.sph-onglets__onglet:focus-visible{ outline: 2px solid var(--sph-rouge); outline-offset: 2px; }
.sph-onglets__panneau[hidden]{ display: none; }
/* Formulaire « Écrire à la rédaction » DANS la carte : plus de carte dans la carte */
.sph-onglets .sph-contact-redac__form{ background: none; box-shadow: none; padding: 0; border-radius: 0; display: flex; flex-direction: column; gap: 12px; }
.sph-contact-redac__intro{ margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--sph-sapin-doux); }
.sph-onglets .sph-contact-redac__form textarea{ min-height: 0; height: 104px; resize: vertical; border-radius: 12px; border: 1.5px solid var(--sph-filet); }
.sph-onglets .sph-contact-redac__form textarea:focus{ outline: 2px solid var(--sph-rouge); outline-offset: 1px; }
.sph-onglets .sph-contact-redac__form .sph-form__consentement input{ margin-top: 2px; }
.sph-contact-redac__bouton{ align-self: stretch; white-space: nowrap; }
.sph-onglets .sph-contact-redac__ok{ margin: 0; }
/* Sous le pli : le texte d'explication seul, sur deux colonnes équilibrées (pas de vide à droite) */
.sph-contact-redac{ padding: 48px 0 56px; }
.sph-contact-redac__texte{ column-count: 2; column-gap: 64px; max-width: none; }
.sph-contact-redac__texte p{ max-width: none; break-inside: avoid; }
.sph-contact-redac__texte h2{ break-after: avoid; break-inside: avoid; }
.sph-contact-redac__texte > :first-child{ margin-top: 0; }
@media (max-width: 860px){ .sph-contact-redac__texte{ column-count: 1; } }
@media (max-width: 600px){
	/* 390×700 : la carte (onglets compris) tient entière au-dessus du bandeau cookies, à chaque étape */
	.sph-contact .sph-contact__chapo{ display: none; }
	.sph-contact .sph-contact__grille{ gap: 12px; }
	.sph-onglets__liste{ margin-bottom: 12px; }
	.sph-onglets__onglet{ min-height: 44px; padding: 0 8px; gap: 6px; font-size: .8125rem; }
	.sph-onglets__onglet svg{ width: 16px; height: 16px; }
	.sph-onglets .sph-contact-redac__form{ gap: 8px; }
	.sph-contact-redac__intro{ font-size: .8125rem; line-height: 1.4; }
	.sph-onglets .sph-contact-redac__form .sph-form__rangee{ gap: 8px; }
	.sph-onglets .sph-contact-redac__form .sph-form__champ input{ height: 40px; }
	.sph-onglets .sph-contact-redac__form textarea{ height: 76px; }
	.sph-onglets .sph-contact-redac__form .sph-form__consentement{ font-size: .6875rem; line-height: 1.35; gap: 8px; }
	.sph-contact-redac__bouton{ height: 46px; font-size: .9375rem; }
}

/* D4 — Accueil 390 : la bande photo montre la coureuse (visage + buste), plus seulement les chaussures */
@media (max-width: 600px){
	.sph-hero__photo{ height: 130px; }
	.sph-hero__photo img{ object-position: 50% 9%; }
}

/* D7 — « À lire aussi » : titre au format des titres de section, pastille de rubrique sur chaque photo */
.sph-a-lire-pleine .sph-section__tete{ margin-bottom: 26px; }
.sph-a-lire__photo{ position: relative; }
.sph-a-lire__photo img{ display: block; }
.sph-a-lire__photo .sph-carte__balise svg{ width: 14px; height: 14px; }

/* D8 — Accueil 390 : les 2 tuiles de « Comment on travaille » côte à côte sur toute la largeur */
@media (max-width: 600px){
	.sph-travaille__preuves{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
	.sph-travaille__preuves .sph-preuve{ min-width: 0; }
}

/* D9 — « Votre séance du jour » en 390 : photo AU-DESSUS du titre (titre ≤ 3 lignes) */
@media (max-width: 600px){
	.sph-outil__resultat{ max-width: none; }
	.sph-outil__resultat .sph-carte--compacte, .sph-outil__resultat .sph-carte--compacte a{ flex-direction: column; }
	.sph-outil__resultat .sph-carte--compacte .sph-carte__photo{ width: 100%; aspect-ratio: 16 / 9; min-height: 0; }
	.sph-outil__resultat .sph-carte--compacte .sph-carte__corps h3{ font-size: 1rem; line-height: 1.3; }
}
@media (max-width: 600px){
	/* Onglets 390 : libellés entiers dans leur pastille (sans pictogramme), deux pastilles de même largeur */
	.sph-onglets__onglet svg{ display: none; }
	.sph-onglets__onglet{ padding: 0 6px; min-width: 0; }
}
/* D1 — photo descendue dans le corps (avis Fitbit) : jamais une photo géante en portrait ; légende serrée sous la photo */
.sbt-article-corps .wp-block-image{ margin: 1.6em 0; }
.sbt-article-corps .wp-block-image img{ max-height: 440px; object-fit: cover; object-position: 50% 45%; margin-block: 0; }
.sbt-article-corps .wp-block-image figcaption{ margin-top: 8px; font-size: .8125rem; line-height: 1.4; color: var(--sph-sapin-doux); }
/* D6 (suite, « pas de vides ») : quand tout s'affiche, la carte seule en bout de grille s'élargit
   (photo à gauche + aperçu) au lieu de laisser deux cases vides. L'aperçu reste masqué sur les autres cartes. */
.sph-grille-rubrique .sph-carte__extrait{ display: none; }
@media (min-width: 981px){
	.sph-grille-rubrique > .sph-carte:last-child:nth-child(3n+1){ grid-column: 1 / -1; }
	.sph-grille-rubrique > .sph-carte:last-child:nth-child(3n+2){ grid-column: span 2; }
	.sph-grille-rubrique > .sph-carte:last-child:is(:nth-child(3n+1), :nth-child(3n+2)) a{ flex-direction: row; }
	.sph-grille-rubrique > .sph-carte:last-child:is(:nth-child(3n+1), :nth-child(3n+2)) .sph-carte__photo{ width: 50%; aspect-ratio: auto; min-height: 280px; }
	.sph-grille-rubrique > .sph-carte:last-child:is(:nth-child(3n+1), :nth-child(3n+2)) .sph-carte__corps{ padding: 28px 32px; justify-content: center; gap: 12px; }
	.sph-grille-rubrique > .sph-carte:last-child:is(:nth-child(3n+1), :nth-child(3n+2)) h3{ font-size: 1.375rem; line-height: 1.25; }
	.sph-grille-rubrique > .sph-carte:last-child:is(:nth-child(3n+1), :nth-child(3n+2)) .sph-carte__extrait{ display: -webkit-box; }
}
@media (min-width: 621px) and (max-width: 980px){
	.sph-grille-rubrique > .sph-carte:last-child:nth-child(odd){ grid-column: 1 / -1; }
	.sph-grille-rubrique > .sph-carte:last-child:nth-child(odd) a{ flex-direction: row; }
	.sph-grille-rubrique > .sph-carte:last-child:nth-child(odd) .sph-carte__photo{ width: 50%; aspect-ratio: auto; min-height: 240px; }
	.sph-grille-rubrique > .sph-carte:last-child:nth-child(odd) .sph-carte__corps{ padding: 24px; justify-content: center; }
	.sph-grille-rubrique > .sph-carte:last-child:nth-child(odd) .sph-carte__extrait{ display: -webkit-box; }
}
/* Non-régression BE-0014 : hero d'accueil ≤ 704 px à 1440×780 (il faisait 708 : fenêtre − 72), toujours jusqu'au pli */
@media (min-width: 1081px){
	.sph-hero{ min-height: calc(100vh - 76px); }
	.sph-hero__droite{ height: calc(100vh - 96px); }
}

/* ===================== PASSE DE CORRECTIONS N°5 (16/10, soir) ===================== */

/* D1 — une carte de fin de grille élargie ne garde jamais de blanc : texte centré, « min de lecture »
   collé au résumé, la photo prend la hauteur (les grilles de rubrique sont désormais en rangées pleines). */
.sph-grille-rubrique > .sph-carte:last-child .sph-carte__photo{ flex: 1 1 auto; }
@media (min-width: 981px){
	.sph-grille-rubrique > .sph-carte:last-child:is(:nth-child(3n+1), :nth-child(3n+2)) .sph-carte__meta{ margin-top: 4px; }
	.sph-grille-rubrique > .sph-carte:last-child:is(:nth-child(3n+1), :nth-child(3n+2)) .sph-carte__photo{ min-height: 240px; }
}
@media (min-width: 621px) and (max-width: 980px){
	.sph-grille-rubrique > .sph-carte:last-child:nth-child(odd) .sph-carte__meta{ margin-top: 4px; }
}

/* D7 — pastille des cartes de rubrique : le type du guide (Avis, Guide, Recettes…), sur fond clair */
.sph-carte__balise--type{ background: rgba(255,255,255,.94); color: var(--sph-sapin); box-shadow: 0 4px 14px -6px rgba(16,38,61,.45); }
.sph-carte__balise--type svg{ width: 14px; height: 14px; color: var(--sph-rouge); }

/* D7 — bande teintée « le plus complet de la rubrique » après 6 cartes : grande photo + texte réel */
.sph-bande-fond{ display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); background: var(--sph-mousse); border-radius: var(--sph-rayon-grand); overflow: hidden; margin: var(--sph-gouttiere) 0; min-height: 340px; }
.sph-bande-fond__photo{ position: relative; display: block; min-height: 300px; background: var(--sph-sapin); }
.sph-bande-fond__photo img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sph-bande-fond__photo .sph-carte__balise{ left: 18px; bottom: 18px; }
.sph-bande-fond__texte{ padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; justify-content: center; gap: 14px; min-width: 0; }
.sph-bande-fond h2{ font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2rem); line-height: 1.15; margin: 0; }
.sph-bande-fond h2 a{ color: inherit; text-decoration: none; }
.sph-bande-fond h2 a:hover{ color: var(--sph-rouge); }
.sph-bande-fond__texte > p{ margin: 0; color: var(--sph-sapin-doux); line-height: 1.55; max-width: 52ch; }
.sph-bande-fond__meta{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sph-bande-fond__meta .sph-meta-duree{ display: inline-flex; background: var(--sph-blanc); }
.sph-bande-fond__suite{ list-style: none; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(16,38,61,.12); display: grid; gap: 10px; }
.sph-bande-fond__suite a{ display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.sph-bande-fond__suite a:hover b{ color: var(--sph-rouge); }
.sph-bande-fond__suite img{ width: 64px; height: 48px; object-fit: cover; border-radius: 10px; flex: none; }
.sph-bande-fond__suite b{ display: block; font-family: var(--sph-titre); font-size: .9375rem; line-height: 1.25; }
.sph-bande-fond__suite small{ font-size: .78125rem; color: var(--sph-sapin-doux); }
@media (max-width: 860px){
	.sph-bande-fond{ grid-template-columns: minmax(0,1fr); min-height: 0; }
	.sph-bande-fond__photo{ min-height: 0; aspect-ratio: 16 / 9; }
	.sph-bande-fond__texte{ padding: 20px; gap: 12px; }
}

/* D6 — « Points à retenir » : un point « à éviter » porte une icône d'alerte, jamais une coche verte */
.sbt-retenir-liste li.sph-retenir--alerte::before{ display: none; }
.sph-retenir__alerte{ position: absolute; left: 0; top: .12em; width: 22px; height: 22px; border-radius: 50%; background: var(--sph-jaune); color: var(--sph-sapin); display: inline-flex; align-items: center; justify-content: center; }
.sph-retenir__alerte svg{ width: 14px; height: 14px; stroke-width: 2.4; }

/* D9 — pastille « min de lecture » droite (plus aucune rotation) */
.sph-entete-article__dossard{ transform: none !important; }

/* D11 — 6 rubriques dans la barre : libellés courts ; entre 981 et 1200 px, sans pictos */
.sph-menu ul{ gap: 20px; }
@media (min-width: 981px) and (max-width: 1200px){
	.sph-menu ul{ gap: 14px; }
	.sph-menu__picto{ display: none; }
}

/* D10 — Contact : 4 tuiles-accordéons sur une rangée sous la carte ; la page tient presque en un écran */
@media (min-width: 861px){ .sph-contact .sph-contact__photo{ height: clamp(200px, calc(100vh - 540px), 360px); } }
.sph-contact-infos{ background: var(--sph-air); padding: 18px 0 24px; }
.sph-contact-infos__intro p{ margin: 0 0 12px; font-size: .9375rem; line-height: 1.5; color: var(--sph-sapin-doux); }
.sph-contact-infos__tuiles{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; align-items: start; }
.sph-contact-info{ background: var(--sph-blanc); border-radius: var(--sph-rayon); box-shadow: var(--sph-ombre); }
.sph-contact-info summary{ list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; min-height: 56px; cursor: pointer; font-family: var(--sph-titre); font-weight: 700; font-size: .9375rem; line-height: 1.25; color: var(--sph-sapin); border-radius: var(--sph-rayon); }
.sph-contact-info summary::-webkit-details-marker{ display: none; }
.sph-contact-info summary:focus-visible{ outline: 2px solid var(--sph-rouge); outline-offset: 2px; }
.sph-contact-info__picto{ flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--sph-mousse); color: var(--sph-rouge); display: inline-flex; align-items: center; justify-content: center; }
.sph-contact-info__picto svg{ width: 16px; height: 16px; }
.sph-contact-info__titre{ flex: 1; min-width: 0; }
.sph-contact-info__plus{ flex: none; width: 24px; height: 24px; border-radius: 50%; background: #EDF2F8; position: relative; }
.sph-contact-info__plus::before, .sph-contact-info__plus::after{ content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; background: var(--sph-sapin); transform: translate(-50%,-50%); }
.sph-contact-info__plus::after{ transform: translate(-50%,-50%) rotate(90deg); transition: transform .2s ease; }
.sph-contact-info[open] .sph-contact-info__plus::after{ transform: translate(-50%,-50%) rotate(0deg); }
.sph-contact-info__texte{ padding: 0 16px 16px; font-size: .9375rem; line-height: 1.55; }
.sph-contact-info__texte p{ margin: 0; max-width: none; }
@media (max-width: 980px){ .sph-contact-infos__tuiles{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .sph-contact-infos__tuiles{ grid-template-columns: minmax(0,1fr); gap: 8px; } .sph-contact-info summary{ min-height: 48px; } }
@media (prefers-reduced-motion: reduce){ .sph-contact-info__plus::after{ transition: none; } }

/* D5 — accueil : 3 profils en cartes photo à la place du 2e questionnaire */
.sph-panneau-reprise.sph-profils{ display: block; }
.sph-profils__tete{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 32px; align-items: end; margin-bottom: 24px; }
.sph-profils__tete p{ margin: 0 !important; max-width: 62ch; color: rgba(246,248,251,.84); line-height: 1.55; }
.sph-profils__cartes{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.sph-profil{ appearance: none; -webkit-appearance: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer; background: var(--sph-blanc); color: var(--sph-sapin); border-radius: var(--sph-rayon); overflow: hidden; display: flex; flex-direction: column; font: inherit; box-shadow: var(--sph-ombre); transition: transform .2s ease, box-shadow .2s ease; }
.sph-profil:hover{ transform: translateY(-3px); box-shadow: var(--sph-ombre-forte); }
.sph-profil:focus-visible{ outline: 3px solid var(--sph-jaune); outline-offset: 3px; }
.sph-profil__photo{ display: block; aspect-ratio: 16 / 9; background: var(--sph-mousse); overflow: hidden; }
.sph-profil__photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.sph-profil__corps{ display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.sph-profil__corps b{ font-family: var(--sph-titre); font-size: 1.1875rem; line-height: 1.2; }
.sph-profil__corps > span:not(.sph-profil__action){ font-size: .9375rem; line-height: 1.45; color: var(--sph-sapin-doux); }
.sph-profil__action{ margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--sph-titre); font-weight: 700; font-size: .875rem; color: var(--sph-rouge); }
.sph-profil__action svg{ width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce){ .sph-profil{ transition: none; } .sph-profil:hover{ transform: none; } }
@media (max-width: 860px){
	.sph-profils__tete{ grid-template-columns: minmax(0,1fr); gap: 10px; margin-bottom: 16px; }
	.sph-profils__cartes{ grid-template-columns: minmax(0,1fr); gap: 12px; }
	.sph-profil{ flex-direction: row; align-items: stretch; }
	.sph-profil__photo{ width: 36%; flex: none; aspect-ratio: auto; min-height: 112px; }
	.sph-profil__corps{ padding: 12px 14px; gap: 4px; }
	.sph-profil__corps b{ font-size: 1.0625rem; }
	.sph-profil__corps > span:not(.sph-profil__action){ font-size: .875rem; }
}

/* D4 — accueil 390 : à l'étape 1, la photo montre visage + buste (~190 px visibles), la carte ne la
   chevauche que de 40 px et les 5 choix passent sur 2 colonnes (sans picto) pour rester au-dessus du pli.
   Dès l'étape 2 (le visiteur a vu la photo), la photo se replie comme avant pour garder la carte entière. */
@media (max-width: 600px){
	.sph-hero .sph-hero__photo{ height: 228px; transition: height .3s ease; }
	.sph-hero .sph-hero__carte{ max-width: 100%; }
	.sph-hero .sph-form__etape[data-etape="objectif"] .sph-form__tuiles{ gap: 5px; }
	.sph-hero .sph-hero__photo img{ object-position: 50% 16%; }
	.sph-hero .sph-hero__carte{ margin-top: -40px; transition: margin-top .3s ease; }
	.sph-hero .sph-form__etape[data-etape="objectif"] .sph-form__tuiles--grille2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
	.sph-hero .sph-form__etape[data-etape="objectif"] .sph-form__tuile__picto{ display: none; }
	.sph-hero .sph-form__etape[data-etape="objectif"] .sph-form__tuile{ min-height: 38px; padding: 4px 9px; font-size: .8125rem; line-height: 1.12; }
	.sph-hero:has(.sph-form:not([data-pas="0"])) .sph-hero__photo{ height: 130px; }
	.sph-hero:has(.sph-form:not([data-pas="0"])) .sph-hero__carte{ margin-top: -92px; }
}
@media (max-width: 600px) and (prefers-reduced-motion: reduce){ .sph-hero .sph-hero__photo, .sph-hero .sph-hero__carte{ transition: none; } }

/* Passe 5 — retouches après la 1re publication */
.sph-bande-fond__photo .sph-carte__balise{ background: rgba(255,255,255,.94); color: var(--sph-sapin); }
.sph-bande-fond__photo .sph-carte__balise svg{ width: 14px; height: 14px; color: var(--sph-rouge); }
.sph-contact-info summary{ font-size: .875rem; }
@media (max-width: 860px){ .sph-profils__tete p{ font-size: .9375rem; line-height: 1.5; } }

/* ===================== PASSE DE CORRECTIONS N°7 (16/10 soir) ===================== */

/* D3 — plus de billes rouges en relief aux coins des cartes. Un seul détail plat, dans
   l'univers du site : un petit fanion de borne (sapin, coin haut droit). La carte reste
   « posée » par son ombre. */
.sph-dossard::after,
.sph-dossard .sph-dossard__epingle-a,
.sph-dossard .sph-dossard__epingle-b,
.sph-hero .sph-dossard::after{ display: none; }
.sph-dossard::before,
.sph-hero .sph-dossard::before{
	top: 0; left: auto; right: 28px; width: 16px; height: 14px;
	border: 0; border-radius: 0; box-shadow: none; background: var(--sph-sapin);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* D4 — UNE seule marge latérale mobile pour tout le site (hero, rubriques, articles,
   « À lire aussi », en-tête) : 20 px. */
@media (max-width: 760px){
	:root{ --sph-gouttiere: 20px; }
}

/* D5 — « Les autres rubriques » (5 tuiles) : jamais de demi-case vide. */
@media (max-width: 560px){
	.sph-autres-rubriques > .sph-autre-rubrique:last-child:nth-child(odd){ grid-column: 1 / -1; }
	.sph-autres-rubriques > .sph-autre-rubrique:last-child:nth-child(odd) .sph-autre-rubrique__photo{ aspect-ratio: 21/9; }
}
@media (min-width: 561px) and (max-width: 980px){
	.sph-autres-rubriques:not(.sph-autres-rubriques--6){ grid-template-columns: repeat(6, minmax(0,1fr)); }
	.sph-autres-rubriques:not(.sph-autres-rubriques--6) > *{ grid-column: span 2; }
	.sph-autres-rubriques:not(.sph-autres-rubriques--6) > :nth-child(4):nth-last-child(2),
	.sph-autres-rubriques:not(.sph-autres-rubriques--6) > :nth-child(5):last-child{ grid-column: span 3; }
}

/* D8 — accueil grand écran : la colonne de texte ne flotte plus. Elle est centrée sur la
   bande qui va du haut de la photo au BAS du questionnaire (et non au bas de la photo),
   avec un rythme vertical plus ample. Le questionnaire n'est pas touché. */
@media (min-width: 1600px) and (min-height: 900px){
	.sph-hero__gauche{ align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding-bottom: 84px; }
	.sph-hero__titre{ margin-top: 30px; }
	.sph-hero__titre .sph-hero__ton2{ margin-top: 18px; }
	.sph-hero__chapo{ margin-top: 40px; font-size: 1.3125rem; }
	.sph-hero .sph-hero__preuves{ margin-top: 60px; gap: 14px; } /* .sph-hero : jamais les tuiles d'À propos */
	.sph-hero .sph-hero__preuves .sph-preuve{ padding: 22px 24px; min-width: 164px; }
	.sph-hero .sph-hero__preuves .sph-preuve b{ font-size: 1.875rem; }
	.sph-hero .sph-hero__preuves .sph-preuve span{ font-size: .875rem; }
}

/* D9 — Contact grand écran : carte du formulaire et photo de même hauteur, bas calés. */
@media (min-width: 1600px) and (min-height: 900px){
	.sph-contact .sph-contact__grille{ align-items: end; }
	.sph-contact .sph-contact__photo{ height: 412px; }
	.sph-contact{ padding-bottom: 10px; }
	.sph-contact-infos{ padding-top: 14px; }
}

/* Titre du hero : la 2e ligne se coupe en lignes équilibrées (jamais « matin » seul). */
.sph-hero__titre .sph-hero__ton2{ text-wrap: balance; }

/* D10 — menu : l'entrée de la rubrique où l'on se trouve est soulignée (framboise). */
.sph-menu ul{ overflow: visible; }
.sph-menu a{ position: relative; }
.sph-menu a.est-actif{ color: var(--sph-rouge); }
.sph-menu a.est-actif::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 3px; border-radius: 3px; background: var(--sph-rouge); }
.sph-menu-mobile a.est-actif{ color: var(--sph-rouge); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* --- internationalpublichealth.org (29/10) : sortie n°1 --- */
.sph-onglets__liste{ color: var(--sph-sapin); }
.sph-onglets__onglet{ transition: none; }
.sbs_tableau{ max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sbt-article-corps table{ width: 100%; max-width: 100%; }
.sbt-article-corps table th, .sbt-article-corps table td{ overflow-wrap: anywhere; word-break: normal; white-space: normal; min-width: 0; }
.sbt-auteur-role{ color: var(--sph-sapin-doux); }
.sph-lecture-progress{ position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 400; background: transparent; pointer-events: none; }
.sph-lecture-progress > span{ display: block; height: 100%; width: 0; background: var(--sph-rouge); border-radius: 0 4px 4px 0; }
.sph-sr{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; color: var(--sph-sapin); }