/* assets/fonts/fonts.css — DA §5/§12. URL relatives en ../fonts/ car ce fichier est
 * concaténé dans assets/css/tout.css par publier.sh (fonts.css + style.css + blocs/*.css
 * + app.css). Fichiers listés dans FONTS-A-TELECHARGER.txt (à récupérer par l'orchestrateur,
 * Trirong est STATIQUE : 5 fichiers distincts, jamais déclarés en variable). */

@font-face{
	font-family: 'Trirong';
	src: url('../fonts/trirong-300-latin.woff2') format('woff2');
	font-weight: 300; font-style: normal; font-display: swap;
}
@font-face{
	font-family: 'Trirong';
	src: url('../fonts/trirong-300italic-latin.woff2') format('woff2');
	font-weight: 300; font-style: italic; font-display: swap;
}
@font-face{
	font-family: 'Trirong';
	src: url('../fonts/trirong-400-latin.woff2') format('woff2');
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
	font-family: 'Trirong';
	src: url('../fonts/trirong-400italic-latin.woff2') format('woff2');
	font-weight: 400; font-style: italic; font-display: swap;
}
@font-face{
	font-family: 'Trirong';
	src: url('../fonts/trirong-600-latin.woff2') format('woff2');
	font-weight: 600; font-style: normal; font-display: swap;
}
@font-face{
	font-family: 'Lexend Exa';
	src: url('../fonts/lexend-exa-var-latin.woff2') format('woff2-variations');
	font-weight: 100 900; font-style: normal; font-display: swap;
}

/*
Theme Name: msp-semelle
Theme URI: https://magasinsdesport.com/
Author: Magasins de Sport
Description: Thème code-pur « Magasins de Sport » — running & trail, choisir, essayer, courir. Motif unique : la semelle en coupe (drop coté). Trirong + Lexend Exa. Mode clair uniquement.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: msp-semelle
*/
/* Les styles réels vivent dans assets/css/app.css (+ fonts.css + blocs/*.css), assemblés
   par publier.sh en assets/css/tout.css. Ce fichier ne garde que l'en-tête WordPress. */

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

.sbt-conteneur{ max-width: var(--sb-conteneur, 1240px); margin-inline: auto; padding-inline: var(--sb-gouttiere, 24px); }

.sbt-fil-ariane{ font-size: .8125rem; color: var(--sb-doux, #55607a); display: flex; gap: 6px; flex-wrap: wrap; padding-block: 16px; }
.sbt-fil-ariane a{ color: var(--sb-doux, #55607a); text-decoration: none; }
.sbt-fil-ariane a:hover{ color: var(--sb-encre, #0f172a); }

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

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

/* Grille corps + rail — align-items:start obligatoire pour que le rail sticky
   (cf. partial-sidebar.css) tienne sur toute la hauteur du contenu. */
.sbt-article-mise-en-page{
	display: grid; grid-template-columns: minmax(0, var(--sb-lecture, 720px)) var(--sb-rail, 340px);
	column-gap: var(--sb-gouttiere, 24px); row-gap: var(--sb-gouttiere, 24px);
	max-width: var(--sb-conteneur, 1240px); margin-inline: auto;
	padding: 32px var(--sb-gouttiere, 24px) 64px; align-items: start; justify-content: center;
}
@media (max-width: 1080px){ .sbt-article-mise-en-page{ grid-template-columns: minmax(0,1fr); } .sbt-article-principal, .sbt-rail{ min-width: 0; } }
.sbt-article-mise-en-page--suite{ padding-top: 0; }

.sbt-article-corps{ font-size: 1.0625rem; line-height: 1.7; color: var(--sb-encre, #0f172a); font-family: var(--sb-texte, 'Inter', system-ui, sans-serif); }
.sbt-article-corps h2{ margin-top: 2.2em; font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); }
.sbt-article-corps h3{ margin-top: 1.8em; font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); }
.sbt-article-corps p{ margin-bottom: 1.3em; }
.sbt-article-corps img{ border-radius: var(--sb-rayon, 14px); margin-block: 1.6em; width: 100%; height: auto; }
.sbt-article-corps blockquote{
	margin: 1.8em 0; padding: 18px 24px; border-left: 4px solid var(--sb-accent, #2563eb);
	background: var(--sb-surf, #f4f5fa); border-radius: 8px; font-style: italic;
}

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

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

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

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

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

/* Rail sticky — collé à la colonne de texte, séparation par un filet interne, jamais un
   gap blanc entre les deux colonnes. */
.sbt-rail{
	position: sticky; top: 96px; align-self: start;
	display: flex; flex-direction: column; gap: 20px;
	border-left: 1px solid var(--sb-filet, #e2e5ef); padding-left: 20px;
}
/* ⛔ GARDE-FOU (conservé tel quel depuis curieux-du-web.com, retour Mathias ×3) : jamais
   de overflow-y ni de max-height ici — la colonne reste collante et accompagne TOUTE la
   lecture de l'article jusqu'en bas, sans sa propre barre de défilement interne. */
.sbt-rail-carte{
	background: var(--sb-fond-carte, #ffffff); border: 1px solid var(--sb-filet, #e2e5ef);
	border-radius: var(--sb-rayon, 14px); padding: 18px;
}
.sbt-rail-carte .sbt-t4, .sbt-rail-carte h4{
	font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-size: .875rem;
	text-transform: uppercase; letter-spacing: .04em; color: var(--sb-doux, #55607a); margin: 0 0 10px;
}

/* Option mobile (inspirée d'amatauto.fr, cf. en-tête) : sous 1080px, la grille parente
   passe déjà en une colonne (cf. .sbt-article-mise-en-page dans single-article.css) — le
   rail redevient donc naturellement un bloc statique empilé sous le texte. */
@media (max-width: 1080px){
	.sbt-rail{ position: static; border-left: 0; padding-left: 0; border-top: 1px solid var(--sb-filet, #e2e5ef); padding-top: 20px; }
}

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

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

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

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

.sbt-encadre{ margin-block: 2em; border-radius: var(--sb-rayon-grand, 22px); }

.sbt-encadre-titre{
	margin: 0 0 12px; font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif);
	font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em;
}

/* « Points à retenir » — fond foncé, liste à puces check. */
.sbt-encadre--retenir{
	background: var(--sb-fonce, #141733); color: var(--sb-sur-fonce, #ffffff);
	padding: 28px 30px;
}
.sbt-encadre--retenir .sbt-encadre-titre{ color: var(--sb-accent-clair, #93c5fd); }
.sbt-retenir-liste{ list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sbt-retenir-liste li{
	position: relative; padding-left: 32px; font-size: 1rem; line-height: 1.55;
}
.sbt-retenir-liste li::before{
	content: ""; position: absolute; left: 0; top: .15em; width: 20px; height: 20px; border-radius: 50%;
	background: var(--sb-accent, #2563eb)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")
		center / 12px no-repeat;
}

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

@media (max-width: 620px){
	.sbt-encadre--saviez{ grid-template-columns: 1fr; }
	.sbt-encadre--saviez::before{ grid-row: 1; }
	.sbt-encadre--saviez .sbt-encadre-titre, .sbt-encadre--saviez p:not(.sbt-encadre-titre){ grid-column: 1; }
}
/* 04/10/2026 (invalidcast.com) : la règle de liste du corps d'article écrasait le retrait → la coche mangeait la 1re lettre. */
.sbt-article-corps .sbt-retenir-liste{ padding: 0; margin: 0; list-style: none; }
.sbt-article-corps .sbt-retenir-liste li{ padding-left: 34px; margin: 0; text-indent: 0; }

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

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

@media (max-width: 760px){
	.sbt-faq{ padding: 20px; }
}

/*
 * BLOC FIGÉ — SIGNATURE / BOÎTE AUTEUR (thématique) — CSS
 * Visuel inspiré du rendu RÉEL de solutionminceur.fr, classes `.smr-auteur*` récupérées
 * par le même curl en lecture seule que partial-faq.css (roxane.css, voir README).
 * Classes renommées `.sbt-auteur*` ici, variables de couleur remplacées par des
 * `var(--sb-*, repli)` génériques.
 */

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

@media (max-width: 700px){
	.sbt-auteur{ grid-template-columns: 1fr; padding: 22px; }
	.sbt-auteur-photo img{ width: 88px; height: 88px; }
}

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

.sbt-btn{
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 24px; border-radius: 999px; font-weight: 700; font-size: 1rem;
	background: var(--sb-accent, #2563eb); color: #fff; text-decoration: none; border: 0; cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease;
}
.sbt-btn:hover{ transform: translateY(-2px); box-shadow: var(--sb-ombre, 0 8px 24px rgba(15,23,42,.08)); }
.sbt-btn--petit{ padding: 10px 18px; font-size: .875rem; }
.sbt-btn--fantome{ background: transparent; border: 1.5px solid rgba(255,255,255,.5); color: inherit; }

.sbt-footer{ background: var(--sb-fonce, #141733); color: var(--sb-sur-fonce, #ffffff); padding-block: clamp(40px,6vw,64px) 24px; }
.sbt-footer a{ color: #c4c7e4; text-decoration: none; }
.sbt-footer a:hover{ color: #fff; }
.sbt-footer a.sbt-btn, .sbt-footer a.sbt-btn:hover{ color: #fff; } /* 10/10/2026 (blueau.fr) : « .sbt-footer a » battait la couleur du bouton (texte gris sur accent, 4,25:1) */

.sbt-footer-cta{
	display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
	padding: 24px 28px; margin-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 600px){ .sbt-footer-cta{ padding: 20px; } } /* 04/10/2026 (invalidcast.com) : texte collé au bord dès qu'un thème donne un fond de carte au bandeau */
.sbt-footer-cta .sbt-t3{ color: #fff; margin: 0 0 4px; font-size: 1.25rem; }
.sbt-footer-cta p{ color: #a9acd0; margin: 0; max-width: 46ch; }

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

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

/* Bandeau cookies — deux boutons de MÊME poids (même classe .sbt-btn/.sbt-btn--petit),
   jamais un seul « J'ai compris » qui vaudrait acceptation forcée. */
.sbt-cookies{
	position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 80;
	background: var(--sb-fonce, #141733); color: #fff; border-radius: 12px;
	padding: 10px 14px; display: none; align-items: center; gap: 12px;
	box-shadow: var(--sb-ombre-forte, 0 16px 40px rgba(15,23,42,.16)); max-height: 64px; overflow: hidden;
}
.sbt-cookies.est-visible{ display: flex; }
.sbt-cookies p{ margin: 0; flex: 1; min-width: 0; font-size: .75rem; line-height: 1.3; }
.sbt-cookies-actions{ display: flex; gap: 8px; flex-shrink: 0; }
.sbt-cookies .sbt-btn{ flex-shrink: 0; padding: 8px 14px; min-height: 32px; font-size: .8125rem; }

/* Popup de sortie — jamais de colonne image vide : si pas d'image, la boîte bascule sur
   une seule colonne (cf. .sbt-popup-sortie-boite--sans-image). */
.sbt-popup-sortie{ position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 20px; }
.sbt-popup-sortie.est-ouvert{ display: flex; }
.sbt-popup-sortie-fond{ position: absolute; inset: 0; background: rgba(15,23,42,.7); }
.sbt-popup-sortie-boite{
	position: relative; z-index: 1; background: var(--sb-fond-carte, #ffffff); border-radius: var(--sb-rayon, 14px);
	max-width: 720px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;
	box-shadow: var(--sb-ombre-forte, 0 16px 40px rgba(15,23,42,.16)); max-height: 90vh;
}
.sbt-popup-sortie-boite--sans-image{ grid-template-columns: 1fr; max-width: 480px; }
@media (max-width: 640px){ .sbt-popup-sortie-boite{ grid-template-columns: 1fr; max-height: 85vh; overflow-y: auto; } }
.sbt-popup-sortie-image{ min-height: 220px; }
.sbt-popup-sortie-image img{ width: 100%; height: 100%; object-fit: cover; }
.sbt-popup-sortie-texte{ padding: 28px; color: var(--sb-encre, #0f172a); }
.sbt-popup-sortie-fermer{
	position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
	background: var(--sb-fond-carte, #ffffff); border: 1px solid var(--sb-filet, #e2e5ef);
	display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.sbt-popup-sortie-fermer svg{ width: 20px; height: 20px; }

/* ===================== msp-semelle — app.css (corrections n°1, 16/10/2026) =====================
 * Habillage du thème « Magasins de Sport ». Motif unique : la semelle en coupe.
 * Préfixe msp- partout. Mode clair uniquement. Variables --sb-* (blocs figés) mappées sur --msp-*.
 * Assemblé par publier.sh dans tout.css APRÈS fonts.css, style.css et blocs/*.css : les règles
 * ci-dessous peuvent surcharger l'habillage des classes .sbt-* (jamais leur structure).
 * Cibles mesurées : hero ≤ 704 px à 1440, carte formulaire entière au-dessus du pli à chaque
 * étape (1440×780, 1920×950), chaque section ≤ 704 px, rail ≤ fenêtre, zones de clic ≥ 48 px.
 */

:root{
	--msp-mousse:   #F5F2EA;
	--msp-blanc:    #FFFFFF;
	--msp-asphalte: #1B2421;
	--msp-volt:     #D7F34A;
	--msp-carton:   #E8DCC6;
	--msp-carton-pale: #F0E8D9;
	--msp-kraft:    #B8996A;
	--msp-cobalt:   #2447C9;
	--msp-cobalt-clair: #8FA2E8;
	--msp-gris:     #5B635E;
	--msp-oui:      #1E7B4F;
	--msp-attention:#B42318;

	--msp-f-titre:  'Trirong', Georgia, serif;
	--msp-f-texte:  'Trirong', Georgia, serif;
	--msp-f-exa:    'Lexend Exa', Arial, sans-serif;

	--msp-rayon:        18px;
	--msp-rayon-grand:  28px;
	--msp-rayon-carte-form: 24px;
	--msp-rayon-etiquette: 6px;
	--msp-ombre-repos:   0 1px 2px rgba(27,36,33,.06), 0 8px 24px rgba(27,36,33,.08);
	--msp-ombre-flotte:  0 2px 4px rgba(27,36,33,.08), 0 24px 56px rgba(27,36,33,.18);

	--msp-conteneur: 1240px;
	--msp-lecture:   800px;
	--msp-rail:      340px;
	--msp-gouttiere: 48px;

	/* Hero (ordinateur) : largeur de la colonne texte, de la carte formulaire, hauteur du visuel */
	--msp-hero-texte: 500px;
	--msp-carte-l:    400px;
	--msp-morsure:    120px;
	--msp-hero-h:     560px;

	--sb-conteneur:    var(--msp-conteneur);
	--sb-lecture:      var(--msp-lecture);
	--sb-rail:         var(--msp-rail);
	--sb-gouttiere:    var(--msp-gouttiere);
	--sb-accent:       var(--msp-cobalt);
	--sb-accent-clair: var(--msp-cobalt-clair);
	--sb-encre:        var(--msp-asphalte);
	--sb-texte:        var(--msp-f-texte);
	--sb-titre:        var(--msp-f-titre);
	--sb-doux:         var(--msp-gris);
	--sb-filet:        rgba(27,36,33,.14);
	--sb-fond-carte:   var(--msp-blanc);
	--sb-fonce:        var(--msp-asphalte);
	--sb-sur-fonce:    var(--msp-mousse);
	--sb-surf:         var(--msp-carton);
	--sb-rayon:        var(--msp-rayon);
	--sb-rayon-grand:  var(--msp-rayon-grand);
	--sb-ombre:        var(--msp-ombre-repos);
	--sb-ombre-forte:  var(--msp-ombre-flotte);
}
@media (min-width: 1680px){
	:root{ --msp-hero-texte: 590px; --msp-carte-l: 440px; --msp-hero-h: 640px; }
}

/* ===================== Base ===================== */
*{ box-sizing: border-box; }
html{ scroll-behavior: auto; scroll-padding-top: 96px; } /* jamais smooth : fausse les captures et le collant */
body{
	margin: 0; background: var(--msp-mousse); color: var(--msp-asphalte);
	font-family: var(--msp-f-texte); font-size: 18px; line-height: 1.68;
	-webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; }
.msp-cache{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.msp-saut{ position: absolute; left: -9999px; }
.msp-saut:focus{ left: 12px; top: 12px; background: var(--msp-volt); color: var(--msp-asphalte); padding: 8px 14px; border-radius: 8px; z-index: 999; }
:focus-visible{ outline: 3px solid var(--msp-cobalt); outline-offset: 2px; }

h1,h2,h3{ font-family: var(--msp-f-titre); font-weight: 400; margin: 0 0 .5em; color: var(--msp-asphalte); line-height: 1.15; }
h1{ font-weight: 300; }
h2{ font-size: clamp(28px, 1.2vw + 18px, 38px); letter-spacing: -.01em; }
h2 em, h1 em{ font-style: italic; font-weight: 300; }

.msp-conteneur{ max-width: var(--msp-conteneur); margin: 0 auto; padding: 0 24px; }
.msp-section{ padding-block: 56px; overflow: hidden; position: relative; }
.msp-section--blanc{ background: var(--msp-blanc); }
.msp-section--carton{ background: var(--msp-carton); }
.msp-section--asphalte{ background: var(--msp-asphalte); color: var(--msp-mousse); }
.msp-section--asphalte h2{ color: var(--msp-mousse); }
.msp-section--volt{ background: var(--msp-volt); color: var(--msp-asphalte); }
.msp-section--final{ padding-block: 40px 64px; }
@media (max-width: 760px){ .msp-section{ padding-block: 40px; } }

.msp-section-tete{ margin-bottom: 24px; }
.msp-section-tete h2{ margin: 0; }
.msp-kicker{ font-family: var(--msp-f-exa); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--msp-cobalt); margin: 0 0 8px; line-height: 1.4; }
.msp-kicker--sur-sombre{ color: var(--msp-volt); }
.msp-surtitre{ font-family: var(--msp-f-exa); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--msp-cobalt); margin: 0 0 16px; line-height: 1.4; }

.msp-crampons{ display: flex; gap: 10px; align-items: center; margin: 0 0 16px; }
.msp-crampons span{ width: 9px; height: 9px; background: var(--msp-volt); border: 1.5px solid var(--msp-asphalte); clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }

/* Trame de crampons (bandes Volt et Asphalte seulement, jamais sous un texte de lecture clair) */
.msp-section--volt.msp-fond-trame{ background-image: radial-gradient(circle at 1px 1px, rgba(27,36,33,.09) 1.6px, transparent 1.7px); background-size: 22px 22px; }
.msp-section--asphalte.msp-fond-trame{ background-image: radial-gradient(circle at 1px 1px, rgba(245,242,234,.06) 1.6px, transparent 1.7px); background-size: 22px 22px; }

.msp-pastille, .msp-pastille-compteur{
	display: inline-flex; align-items: center; font-family: var(--msp-f-exa); font-weight: 600;
	font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; line-height: 1.2;
	border-radius: 999px; background: var(--msp-blanc); color: var(--msp-asphalte); text-decoration: none; white-space: nowrap;
}
.msp-pastille--sombre{ background: var(--msp-asphalte); color: var(--msp-mousse); }

.msp-btn{
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--msp-f-exa); font-weight: 700; font-size: 14px; letter-spacing: .03em; line-height: 1.1;
	text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap;
	background: var(--msp-volt); color: var(--msp-asphalte); border: 1.5px solid var(--msp-asphalte); border-radius: 999px;
	min-height: 56px; padding: 0 26px; box-shadow: 0 3px 0 var(--msp-asphalte);
	transition: transform .15s ease, box-shadow .15s ease;
}
.msp-btn:hover{ transform: translateY(-1px); box-shadow: 0 4px 0 var(--msp-asphalte); }
.msp-btn:active{ transform: translateY(2px); box-shadow: 0 1px 0 var(--msp-asphalte); }
.msp-btn--petit{ min-height: 48px; padding: 0 20px; font-size: 13px; }
.msp-btn--fantome{ background: transparent; box-shadow: none; }
.msp-btn--fantome:hover{ background: var(--msp-blanc); box-shadow: none; }
.msp-btn--plein{ width: 100%; }
.msp-btn[disabled]{ opacity: .6; cursor: wait; }

/* ===================== En-tête ===================== */
.msp-entete{ position: sticky; top: 0; z-index: 50; background: var(--msp-blanc); height: 76px; display: flex; align-items: center; box-shadow: 0 1px 0 rgba(27,36,33,.08); }
.msp-entete-barre{ display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; max-width: 1392px; }
/* Logo : le même fichier que la favicon (pavé asphalte + semelle) + mot-symbole en HTML (RE-0236). */
.msp-entete-logo{ display: flex; align-items: center; gap: 10px; flex: none; text-decoration: none; color: var(--msp-asphalte); }
.msp-logo-img{ width: 44px; height: 44px; flex: none; }
.msp-logo-mot{ display: flex; flex-direction: column; font-family: var(--msp-f-exa); font-weight: 700; font-size: 13px; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
/* Navigation PLATE (corrections n°2, RE-0241) : 6 liens sur une ligne, aucun sous-menu, aucun panneau au survol. */
.msp-nav{ flex: 1; display: flex; justify-content: center; min-width: 0; }
.msp-nav > ul{ display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; align-items: center; flex-wrap: nowrap; }
.msp-nav-lien{ display: inline-flex; align-items: center; min-height: 48px; font-family: var(--msp-f-exa); font-weight: 500; font-size: 14px; white-space: nowrap; color: var(--msp-asphalte); text-decoration: none; padding: 0 12px; border-radius: 999px; position: relative; }
.msp-nav-lien:hover{ background: var(--msp-mousse); }
.msp-nav-lien[aria-current="page"]{ background: var(--msp-mousse); box-shadow: inset 0 -3px 0 var(--msp-volt); }
.msp-entete-actions{ display: flex; align-items: center; gap: 12px; flex: none; }
.msp-entete-actions .msp-btn{ box-shadow: none; }
.msp-nav-bascule{ display: none; background: none; border: 0; cursor: pointer; width: 48px; height: 48px; align-items: center; justify-content: center; color: var(--msp-asphalte); }
.msp-nav-bascule .msp-ico-fermer{ display: none; }
.msp-nav-bascule[aria-expanded="true"] .msp-ico-ouvrir{ display: none; }
.msp-nav-bascule[aria-expanded="true"] .msp-ico-fermer{ display: block; }
.msp-nav-mobile{ display: none; }
@media (max-width: 1359px){
	.msp-nav{ display: none; }
	.msp-nav-bascule{ display: inline-flex; }
	/* Panneau plein écran sous l'en-tête : UNE liste simple, gros libellés, aucun sous-niveau. */
	.msp-nav-mobile[hidden]{ display: none; }
	.msp-nav-mobile:not([hidden]){ display: block; position: fixed; inset: 76px 0 0 0; background: var(--msp-mousse); z-index: 49; overflow-y: auto; padding: 12px 24px 40px; }
	.msp-nav-mobile ul{ list-style: none; margin: 0 auto; padding: 0; max-width: 560px; }
	.msp-nav-mobile a{ display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid rgba(27,36,33,.12); text-decoration: none; color: var(--msp-asphalte); font-family: var(--msp-f-titre); font-size: 22px; }
	.msp-nav-mobile a[aria-current="page"]{ box-shadow: inset 4px 0 0 var(--msp-volt); padding-left: 14px; }
	.msp-nav-mobile a.msp-btn{ font-family: var(--msp-f-exa); font-size: 14px; border-bottom: 1.5px solid var(--msp-asphalte); margin-top: 24px; justify-content: center; }
}
@media (max-width: 640px){
	.msp-entete-actions .msp-btn--petit{ display: none; }
	.msp-logo-img{ width: 40px; height: 40px; }
}

/* ===================== Le motif : photo posée sur la semelle en coupe ===================== */
.msp-semelle{ position: relative; margin: 0; display: flex; flex-direction: column; }
.msp-semelle-photo{ position: relative; flex: 1; min-height: 0; border-radius: var(--msp-rayon-grand) var(--msp-rayon-grand) 10px 10px; overflow: hidden; background: var(--msp-carton); box-shadow: var(--msp-ombre-repos); }
.msp-semelle-photo picture{ display: contents; }
.msp-semelle-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Socle : 3 couches, plus épaisses côté talon (gauche) que côté avant-pied (droite) = le drop */
.msp-sol{ position: relative; flex: 0 0 38px; height: 38px; margin: 0 10px; }
.msp-sol span{ position: absolute; inset: 0; display: block; }
.msp-sol-mousse{ background: var(--msp-carton); clip-path: polygon(0 0, 100% 0, 100% 9px, 0 21px); }
.msp-sol-gomme{ background: var(--msp-asphalte); clip-path: polygon(0 21px, 100% 9px, 100% 15px, 0 30px); }
.msp-sol-crampons{ background: repeating-linear-gradient(90deg, var(--msp-volt) 0 16px, transparent 16px 21px); clip-path: polygon(0 30px, 100% 15px, 100% 22px, 0 38px); }
.msp-semelle--mini .msp-sol{ flex-basis: 24px; height: 24px; }
.msp-semelle--mini .msp-sol-mousse{ clip-path: polygon(0 0, 100% 0, 100% 6px, 0 13px); }
.msp-semelle--mini .msp-sol-gomme{ clip-path: polygon(0 13px, 100% 6px, 100% 10px, 0 19px); }
.msp-semelle--mini .msp-sol-crampons{ clip-path: polygon(0 19px, 100% 10px, 100% 14px, 0 24px); background: repeating-linear-gradient(90deg, var(--msp-volt) 0 10px, transparent 10px 14px); }
@media not all and (prefers-reduced-motion: reduce){
	.msp-hero .msp-sol span{ animation: msp-pose .35s ease-out both; }
	.msp-hero .msp-sol-gomme{ animation-delay: .06s; }
	.msp-hero .msp-sol-crampons{ animation-delay: .12s; }
}
@keyframes msp-pose{ from{ transform: translateY(8px); } to{ transform: none; } }
/* Repères cotés : débordent volontairement du cadre, restent entiers */
.msp-repere{ position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; font-family: var(--msp-f-exa); font-weight: 600; font-size: 11px; letter-spacing: .06em; background: var(--msp-blanc); color: var(--msp-asphalte); padding: 6px 12px; border-radius: 999px; box-shadow: var(--msp-ombre-repos); white-space: nowrap; }
.msp-repere::before{ content: ""; width: 7px; height: 7px; background: var(--msp-volt); border: 1.5px solid var(--msp-asphalte); clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
.msp-repere::after{ content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 22px; background: var(--msp-asphalte); }
.msp-repere--talon{ left: 28px; bottom: 62px; }
.msp-hero-visuel .msp-repere--talon{ left: calc(var(--msp-morsure) + 24px); }
.msp-repere--avant{ right: 56px; bottom: 54px; }

/* ===================== Hero (accueil, landing, À propos) ===================== */
.msp-hero{ background: var(--msp-mousse); padding-block: 36px; }
.msp-hero-grille{ display: grid; grid-template-columns: minmax(0, var(--msp-hero-texte)) minmax(0, 1fr); gap: 32px; align-items: center; }
.msp-hero-titre{ font-size: clamp(40px, 1.6vw + 31px, 64px); line-height: 1.06; letter-spacing: -.015em; margin: 0 0 20px; }
/* Bande Volt calée sur la ligne de base (soulignement épais dessiné AVANT le texte) */
.msp-bande-volt{ font-style: italic; text-decoration-line: underline; text-decoration-color: var(--msp-volt); text-decoration-thickness: .36em; text-underline-offset: -.24em; text-decoration-skip-ink: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.msp-hero-phrase{ font-size: 19px; line-height: 1.55; max-width: 44ch; margin: 0 0 24px; }
.msp-hero-phrase--petite{ font-size: 15px; color: var(--msp-gris); margin-top: -8px; }
.msp-hero-chiffres{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding-top: 20px; border-top: 1.5px solid rgba(27,36,33,.14); max-width: 470px; }
.msp-chiffre{ display: flex; flex-direction: column; gap: 4px; }
.msp-chiffre-val{ font-family: var(--msp-f-exa); font-weight: 700; font-size: clamp(30px, 1.2vw + 20px, 44px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; margin: 0; }
.msp-chiffre-unite{ font-family: var(--msp-f-exa); font-size: 12px; line-height: 1.35; color: var(--msp-gris); margin: 0; }

/* Visuel : la photo va jusqu'au bord droit de l'écran (assumé), la carte flotte sur son bord gauche */
.msp-hero-visuel{ position: relative; height: var(--msp-hero-h); margin-right: calc(-1 * max(24px, (100vw - var(--msp-conteneur)) / 2 + 24px)); }
.msp-hero-visuel .msp-hero-photo{ position: absolute; top: 0; bottom: 0; right: 0; left: calc(var(--msp-carte-l) - var(--msp-morsure)); }
.msp-hero-visuel .msp-hero-photo .msp-semelle-photo{ border-radius: var(--msp-rayon-grand) 0 0 10px; }
.msp-hero-visuel .msp-hero-photo .msp-sol{ margin-right: 0; }
.msp-hero-visuel .msp-hero-img{ object-position: 50% 45%; }
.msp-hero-visuel .msp-carte-formulaire{ position: absolute; z-index: 3; left: 0; top: 50%; transform: translateY(calc(-50% - 19px)); width: var(--msp-carte-l); }
/* À propos : pas de carte, la photo prend le visuel et l'étiquette de boîte déborde */
.msp-hero-visuel--page .msp-page-photo{ position: absolute; inset: 0 0 0 0; }
.msp-hero-visuel--page .msp-page-photo .msp-semelle-photo{ border-radius: var(--msp-rayon-grand) 0 0 10px; }
.msp-hero-visuel--page .msp-page-photo .msp-sol{ margin-right: 0; }
.msp-etiquette-boite--flottante{ position: absolute; z-index: 3; left: -24px; bottom: 70px; width: 290px; box-shadow: var(--msp-ombre-flotte); transform: rotate(-2deg); }

@media (max-width: 1100px){
	.msp-hero{ padding-block: 24px 40px; }
	.msp-hero-grille{ display: flex; flex-direction: column; align-items: stretch; gap: 0; }
	.msp-hero-texte{ display: contents; }
	.msp-surtitre{ order: 1; }
	.msp-hero-titre{ order: 2; margin-bottom: 18px; }
	.msp-hero-visuel{ order: 3; height: auto; margin: 0; }
	.msp-hero-phrase{ order: 4; margin-top: 24px; }
	.msp-hero-chiffres{ order: 5; }
	.msp-hero-visuel .msp-hero-photo, .msp-hero-visuel--page .msp-page-photo{ position: relative; inset: auto; left: auto; height: 360px; }
	.msp-hero-visuel .msp-hero-photo .msp-semelle-photo, .msp-hero-visuel--page .msp-page-photo .msp-semelle-photo{ border-radius: 22px 22px 10px 10px; }
	.msp-hero-visuel .msp-hero-photo .msp-sol, .msp-hero-visuel--page .msp-page-photo .msp-sol{ margin-right: 10px; }
	.msp-hero-visuel .msp-carte-formulaire{ position: relative; transform: none; top: auto; width: auto; max-width: 520px; margin: -64px 12px 0; }
	.msp-etiquette-boite--flottante{ left: 16px; bottom: 48px; width: 250px; }
	.msp-repere--avant{ right: 24px; }
	.msp-hero-visuel .msp-repere--talon{ left: 28px; }
}
@media (max-width: 640px){
	.msp-hero{ padding-top: 14px; }
	.msp-surtitre{ font-size: 10px; letter-spacing: .04em; margin-bottom: 8px; }
	.msp-hero-titre{ font-size: 37px; line-height: 1.04; }
	.msp-hero-visuel .msp-hero-photo, .msp-hero-visuel--page .msp-page-photo{ height: 196px; }
	.msp-hero-titre{ margin-bottom: 14px; }
	.msp-hero-visuel .msp-carte-formulaire{ margin: -44px 0 0; }
	.msp-sol{ flex-basis: 24px; height: 24px; }
	.msp-sol-mousse{ clip-path: polygon(0 0, 100% 0, 100% 6px, 0 12px); }
	.msp-sol-gomme{ clip-path: polygon(0 12px, 100% 6px, 100% 10px, 0 18px); }
	.msp-sol-crampons{ clip-path: polygon(0 18px, 100% 10px, 100% 14px, 0 24px); background: repeating-linear-gradient(90deg, var(--msp-volt) 0 10px, transparent 10px 14px); }
	.msp-repere--avant{ display: none; }
	.msp-repere--talon, .msp-hero-visuel .msp-repere--talon{ left: auto; right: 16px; top: 14px; bottom: auto; }
	.msp-repere--talon::after{ display: none; }
	.msp-hero-phrase{ font-size: 17px; }
	.msp-hero-chiffres{ gap: 12px; }
	.msp-etiquette-boite--flottante{ position: relative; left: auto; bottom: auto; width: auto; margin: -36px 16px 0; transform: none; }
}

/* ===================== Carte formulaire « Trouver ma chaussure » (hauteur fixe sur ordinateur) ===================== */
.msp-carte-formulaire{ position: relative; background: var(--msp-blanc); border-radius: var(--msp-rayon-carte-form); box-shadow: var(--msp-ombre-flotte); padding: 22px 22px 18px; color: var(--msp-asphalte); }
.msp-form-tete{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 14px; }
.msp-form-titre{ flex: 1 0 100%; margin: 0; font-family: var(--msp-f-titre); font-size: 21px; line-height: 1.2; }
.msp-form-progres{ display: flex; align-items: center; gap: 6px; }
.msp-form-progres span{ width: 12px; height: 12px; background: transparent; border: 1.5px solid var(--msp-asphalte); clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
.msp-form-progres span.est-faite{ background: var(--msp-volt); }
.msp-form-progres-texte{ font-family: var(--msp-f-exa); font-size: 11px; letter-spacing: .04em; color: var(--msp-gris); }

.msp-form-etape{ display: none; flex-direction: column; }
.msp-form-etape.est-active{ display: flex; }
@media (min-width: 1101px){ .msp-form-etape{ min-height: 300px; } }
.msp-form-question{ font-family: var(--msp-f-exa); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; line-height: 1.3; margin: 0 0 10px; }
.msp-form-question + .msp-pilules + .msp-form-question, .msp-champ + .msp-form-question{ margin-top: 6px; }
.msp-facultatif{ text-transform: none; font-weight: 400; color: var(--msp-gris); letter-spacing: 0; }
.msp-form-aide{ font-size: 14px; color: var(--msp-gris); margin: 10px 0 0; }
.msp-pilules{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.msp-pilule{ font-family: var(--msp-f-exa); font-size: 13px; font-weight: 500; color: var(--msp-asphalte); padding: 0 14px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1.5px solid rgba(27,36,33,.2); background: var(--msp-mousse); cursor: pointer; white-space: nowrap; }
.msp-pilule:hover{ border-color: var(--msp-asphalte); }
.msp-pilule.est-choisie{ background: var(--msp-volt); border-color: var(--msp-asphalte); font-weight: 700; }
.msp-pilules--tuiles{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.msp-pilule--tuile{ flex-direction: column; gap: 10px; min-height: 132px; border-radius: 16px; padding: 14px 8px; font-size: 13px; font-weight: 600; }
.msp-pilule--tuile svg{ color: var(--msp-asphalte); }
.msp-champ{ display: block; width: 100%; font-family: var(--msp-f-exa); font-size: 16px; color: var(--msp-asphalte); padding: 0 14px; height: 50px; border: 1.5px solid rgba(27,36,33,.2); border-radius: 12px; background: var(--msp-mousse); margin: 0 0 10px; }
textarea.msp-champ{ height: auto; padding: 12px 14px; line-height: 1.4; resize: vertical; }
.msp-champ:focus{ outline: 3px solid var(--msp-cobalt); outline-offset: 1px; background: var(--msp-blanc); }
.msp-champ::placeholder{ color: #6b726e; }
.msp-champ-ligne{ display: flex; gap: 10px; }
.msp-champ-ligne .msp-champ{ flex: 1; min-width: 0; }
.msp-form-rgpd{ display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.4; color: var(--msp-gris); margin: 2px 0 4px; cursor: pointer; }
.msp-form-rgpd input{ width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--msp-asphalte); }
.msp-form-rgpd a{ color: var(--msp-cobalt); }
.msp-form-actions{ display: flex; flex-direction: row-reverse; gap: 10px; margin-top: auto; padding-top: 14px; }
.msp-form-actions .msp-btn:not(.msp-btn--retour){ flex: 1; padding: 0 16px; }
.msp-btn--retour{ position: relative; flex: 0 0 56px; width: 56px; padding: 0; background: var(--msp-blanc); box-shadow: none; }
.msp-btn--retour span{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.msp-btn--retour:hover{ box-shadow: none; background: var(--msp-mousse); }
.msp-form-erreur{ margin: 8px 0 0; font-size: 13px; color: var(--msp-attention); }
.msp-form-erreur[hidden]{ display: none; }
.msp-reassurances{ display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 12px; font-family: var(--msp-f-exa); font-size: 11px; color: var(--msp-oui); }
.msp-reassurances span::before{ content: "✓ "; font-weight: 700; }
.msp-form-reponse{ padding: 40px 6px; text-align: center; }
.msp-form-reponse[hidden]{ display: none; }
@media (max-width: 640px){
	.msp-carte-formulaire{ padding: 18px 16px 14px; }
	.msp-form-titre{ font-size: 19px; }
	.msp-pilule--tuile{ min-height: 92px; gap: 6px; padding: 10px 4px; }
	.msp-pilule--tuile svg{ width: 30px; height: 30px; }
	.msp-form-aide{ display: none; }
	.msp-form-actions{ padding-top: 12px; }
}

/* ===================== 2. Tuiles de pratique : 1 grande + 6, sans case vide ===================== */
.msp-tuiles-pratique{ display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.msp-tuiles-pratique > .msp-tuile-pratique{ flex: 0 0 calc(25% - 12px); height: 180px; }
.msp-tuiles-pratique--n7{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 172px; }
.msp-tuiles-pratique--n7 > .msp-tuile-pratique{ height: auto; }
.msp-tuiles-pratique--n7 > .msp-tuile-pratique--une{ grid-column: span 2; grid-row: span 2; }
.msp-tuile-pratique{ position: relative; display: block; border-radius: var(--msp-rayon); overflow: hidden; text-decoration: none; box-shadow: var(--msp-ombre-repos); background: var(--msp-carton); }
.msp-tuile-pratique-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.msp-tuile-pratique:hover .msp-tuile-pratique-img{ transform: scale(1.04); }
.msp-tuile-pratique-voile{ position: absolute; inset: 0; background: linear-gradient(to top, rgba(27,36,33,.9) 0%, rgba(27,36,33,.55) 32%, rgba(27,36,33,0) 62%); }
.msp-tuile-pratique-libelle{ position: absolute; left: 16px; right: 16px; bottom: 14px; color: var(--msp-blanc); font-family: var(--msp-f-titre); font-weight: 600; font-size: 19px; line-height: 1.2; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.msp-tuile-pratique--une .msp-tuile-pratique-libelle{ font-size: 30px; left: 24px; bottom: 22px; }
.msp-pastille-compteur{ position: absolute; top: 12px; right: 12px; background: var(--msp-mousse); }
@media (max-width: 1100px){ .msp-tuiles-pratique > .msp-tuile-pratique{ flex-basis: calc(33.333% - 11px); } .msp-tuiles-pratique--n7{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .msp-tuiles-pratique--n7 > .msp-tuile-pratique--une{ grid-column: span 3; grid-row: span 1; } }
@media (max-width: 640px){ .msp-tuiles-pratique{ gap: 10px; } .msp-tuiles-pratique > .msp-tuile-pratique{ flex-basis: calc(50% - 5px); height: 140px; } .msp-tuiles-pratique--n7{ grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 132px; } .msp-tuiles-pratique--n7 > .msp-tuile-pratique--une{ grid-column: span 2; } .msp-tuile-pratique-libelle{ font-size: 16px; left: 12px; bottom: 10px; } .msp-tuile-pratique--une .msp-tuile-pratique-libelle{ font-size: 22px; } .msp-pastille-compteur{ top: 8px; right: 8px; font-size: 10px; padding: 4px 9px; } }

/* ===================== 3. L'outil : le banc d'essayage ===================== */
.msp-outil{ display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; background: var(--msp-asphalte); color: var(--msp-mousse); border-radius: var(--msp-rayon-grand); padding: 36px 40px; max-width: 1100px; margin: 0 auto; box-shadow: var(--msp-ombre-flotte); }
.msp-outil-titre{ color: var(--msp-mousse); margin: 0 0 18px; }
.msp-outil-question{ margin-bottom: 14px; }
.msp-outil-question:last-child{ margin-bottom: 0; }
.msp-outil-question p{ font-family: var(--msp-f-exa); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--msp-volt); margin: 0 0 8px; }
.msp-outil-tuiles{ display: flex; gap: 8px; flex-wrap: wrap; }
.msp-outil-tuile{ border-radius: 999px; border: 1.5px solid rgba(245,242,234,.35); background: rgba(245,242,234,.06); color: var(--msp-mousse); font-family: var(--msp-f-exa); font-size: 13px; padding: 0 16px; min-height: 48px; cursor: pointer; }
.msp-outil-tuile:hover{ border-color: var(--msp-volt); }
.msp-outil-tuile.est-choisie{ background: var(--msp-volt); color: var(--msp-asphalte); border-color: var(--msp-volt); font-weight: 700; }
.msp-outil-resultat{ display: flex; flex-direction: column; gap: 18px; }
.msp-outil-btn{ align-self: stretch; }
@media (max-width: 900px){ .msp-outil{ grid-template-columns: 1fr; gap: 24px; padding: 26px 20px; } }

/* Étiquette de boîte à chaussures (signature) */
.msp-etiquette-boite{ background: var(--msp-blanc); color: var(--msp-asphalte); border-radius: var(--msp-rayon-etiquette); border: 1px solid var(--msp-asphalte); padding: 16px 18px; }
.msp-etiquette-entete{ display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 2px solid var(--msp-asphalte); font-family: var(--msp-f-exa); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.msp-etiquette-crampons{ display: inline-flex; gap: 4px; }
.msp-etiquette-crampons i{ width: 9px; height: 9px; background: var(--msp-volt); border: 1.5px solid var(--msp-asphalte); clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
.msp-etiquette-boite dl{ margin: 0; }
.msp-etiquette-boite dl > div{ display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px dashed rgba(27,36,33,.25); }
.msp-etiquette-boite dl > div:last-child{ border-bottom: 0; }
.msp-etiquette-boite dt{ font-family: var(--msp-f-exa); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding-top: 3px; }
.msp-etiquette-boite dd{ margin: 0; font-size: 15px; line-height: 1.4; color: var(--msp-asphalte); }
.msp-etiquette-liens{ display: flex; flex-direction: column; gap: 2px; margin: 8px 0 0; padding-top: 8px; border-top: 2px solid var(--msp-asphalte); }
.msp-etiquette-liens a{ display: flex; align-items: center; min-height: 32px; color: var(--msp-cobalt); font-family: var(--msp-f-exa); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.msp-etiquette-code{ display: flex; gap: 4px; margin-top: 10px; }
.msp-etiquette-code span{ width: 9px; height: 10px; background: var(--msp-asphalte); clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
.msp-etiquette-code span:nth-child(3n){ background: var(--msp-kraft); }

/* ===================== 4. Cartes guides (accueil, rubrique, fin d'article) ===================== */
.msp-grille-guides{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.msp-carte-article{ display: flex; flex-direction: column; text-decoration: none; color: var(--msp-asphalte); background: var(--msp-blanc); border-radius: var(--msp-rayon); overflow: hidden; box-shadow: var(--msp-ombre-repos); transition: transform .2s ease, box-shadow .2s ease; }
.msp-carte-article:hover{ transform: translateY(-4px); box-shadow: var(--msp-ombre-flotte); }
.msp-carte-article-photo{ position: relative; display: block; flex: 0 0 auto; height: 200px; overflow: hidden; background: var(--msp-carton); }
.msp-carte-article-photo img, .msp-carte-article-photo .msp-repli-photo{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.msp-carte-article .msp-pastille{ position: absolute; top: 12px; left: 12px; z-index: 1; }
.msp-carte-article-corps{ display: flex; flex-direction: column; flex: 1; padding: 16px 18px 16px; gap: 6px; }
.msp-carte-article-titre{ font-family: var(--msp-f-titre); font-weight: 600; font-size: 18px; line-height: 1.3; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.msp-carte-article-extrait{ font-size: 15px; line-height: 1.5; color: var(--msp-gris); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.msp-carte-article-auteur{ margin: auto 0 0; padding-top: 6px; font-family: var(--msp-f-exa); font-size: 11px; letter-spacing: .02em; color: var(--msp-gris); }
.msp-grille-guides .msp-carte-article-photo{ height: 132px; }
.msp-grille-guides .msp-carte-article-titre{ -webkit-line-clamp: 2; font-size: 17px; }
.msp-grille-guides .msp-carte-article-corps{ padding: 14px 16px; }
@media (max-width: 980px){ .msp-grille-guides{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px){ .msp-grille-guides{ grid-template-columns: 1fr; } .msp-grille-guides .msp-carte-article{ flex-direction: row; } .msp-grille-guides .msp-carte-article-photo{ width: 112px; height: auto; min-height: 112px; } .msp-grille-guides .msp-carte-article .msp-pastille{ display: none; } }

/* ===================== 5. Pourquoi essayer en magasin ===================== */
.msp-section-asphalte-grille{ display: grid; grid-template-columns: 460px 1fr; gap: 56px; align-items: center; }
.msp-essai-photo{ height: 360px; }
.msp-essai-photo .msp-semelle-photo{ box-shadow: none; }
.msp-essai-etapes h2{ margin: 0 0 20px; }
.msp-etapes-numerotees{ list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.msp-etapes-numerotees li{ display: flex; align-items: center; gap: 14px; font-family: var(--msp-f-exa); font-size: 16px; line-height: 1.4; color: var(--msp-mousse); }
.msp-etape-num{ display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: var(--msp-volt); color: var(--msp-asphalte); font-weight: 700; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.msp-section--asphalte .msp-btn{ border-color: var(--msp-volt); box-shadow: none; }
@media (max-width: 900px){ .msp-section-asphalte-grille{ grid-template-columns: 1fr; gap: 28px; } .msp-essai-photo{ height: 240px; } }

/* ===================== 6. Récupération & montres ===================== */
.msp-deux-colonnes{ display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.msp-cartouche-mini{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.msp-cartouche-mini h2{ margin: 0; font-size: 28px; }
.msp-cartouche-mini h2 a{ text-decoration: none; }
.msp-cartouche-mini h2 a:hover{ text-decoration: underline; text-underline-offset: 4px; }
.msp-carte-horizontale{ display: flex; gap: 16px; align-items: center; text-decoration: none; background: var(--msp-blanc); border-radius: var(--msp-rayon); padding: 10px; margin-bottom: 10px; box-shadow: var(--msp-ombre-repos); min-height: 92px; transition: transform .2s ease; }
.msp-carte-horizontale:hover{ transform: translateX(4px); }
.msp-carte-horizontale-photo{ position: relative; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: var(--msp-carton); }
.msp-carte-horizontale-photo img, .msp-carte-horizontale-photo .msp-repli-photo{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.msp-carte-horizontale-titre{ font-size: 16px; line-height: 1.35; color: var(--msp-asphalte); font-weight: 600; }
@media (max-width: 860px){ .msp-deux-colonnes{ grid-template-columns: 1fr; } }

/* ===================== 7. Par où commencer ===================== */
.msp-parcours{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; position: relative; }
.msp-parcours--n2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.msp-parcours::before{ content: ""; position: absolute; left: 8%; right: 8%; top: 92px; height: 10px; background: radial-gradient(circle, var(--msp-kraft) 3px, transparent 3.5px) 0 50% / 18px 10px repeat-x; z-index: 0; }
.msp-parcours-etape{ position: relative; z-index: 1; }
.msp-parcours-etape a{ display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--msp-asphalte); background: var(--msp-mousse); border-radius: var(--msp-rayon); overflow: hidden; box-shadow: var(--msp-ombre-repos); transition: transform .2s ease, box-shadow .2s ease; }
.msp-parcours-etape a:hover{ transform: translateY(-4px); box-shadow: var(--msp-ombre-flotte); }
.msp-parcours-photo{ position: relative; display: block; height: 184px; background: var(--msp-carton); }
.msp-parcours-photo img, .msp-parcours-photo .msp-repli-photo{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Pastille numérotée DANS la carte (coin intérieur de la photo), plus aucun débordement (corrections n°2). */
.msp-parcours-num{ position: absolute; left: 14px; top: 14px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--msp-volt); color: var(--msp-asphalte); border: 2px solid var(--msp-asphalte); border-radius: 999px; font-family: var(--msp-f-exa); font-weight: 700; font-size: 18px; z-index: 2; box-shadow: 0 2px 0 var(--msp-asphalte); }
.msp-parcours-corps{ display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; flex: 1; }
.msp-parcours-etiquette{ font-family: var(--msp-f-exa); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--msp-cobalt); }
.msp-parcours-titre{ font-family: var(--msp-f-titre); font-weight: 600; font-size: 19px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.msp-parcours-phrase{ font-size: 15px; line-height: 1.5; color: var(--msp-gris); }
@media (max-width: 900px){ .msp-parcours{ grid-template-columns: 1fr; } .msp-parcours::before{ display: none; } .msp-parcours-photo{ height: 150px; } }

/* ===================== 8. Bandeau d'appel (remplace le second formulaire) ===================== */
.msp-appel{ display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 36px; align-items: center; background: var(--msp-asphalte); color: var(--msp-mousse); border-radius: var(--msp-rayon-grand); padding: 40px 44px; position: relative; overflow: hidden;
	background-image: radial-gradient(circle at 1px 1px, rgba(245,242,234,.06) 1.6px, transparent 1.7px); background-size: 22px 22px; }
.msp-appel::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-linear-gradient(90deg, var(--msp-volt) 0 16px, transparent 16px 21px); }
.msp-appel-titre{ color: var(--msp-blanc); font-size: clamp(28px, 1.4vw + 16px, 40px); margin: 0 0 10px; }
.msp-appel-texte p{ margin: 0; font-size: 16px; line-height: 1.55; color: rgba(245,242,234,.85); max-width: 46ch; }
.msp-appel-etapes{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.msp-appel-etapes li{ display: flex; align-items: center; gap: 12px; font-family: var(--msp-f-exa); font-size: 14px; color: var(--msp-mousse); }
.msp-appel-etapes span{ width: 28px; height: 28px; border-radius: 999px; border: 1.5px solid var(--msp-volt); color: var(--msp-volt); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.msp-appel-btn{ border-color: var(--msp-volt); box-shadow: none; }
@media (max-width: 1000px){ .msp-appel{ grid-template-columns: 1fr; gap: 22px; padding: 30px 22px 34px; } .msp-appel-btn{ justify-self: stretch; } }

/* ===================== Repli photo (jamais de case vide) ===================== */
.msp-repli-photo{ display: block; width: 100%; height: 100%; min-height: 120px; background: var(--msp-carton); background-image: radial-gradient(circle at 1px 1px, rgba(27,36,33,.18) 1.4px, transparent 1.5px); background-size: 18px 18px; }
.msp-initiales{ display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--msp-carton); color: var(--msp-asphalte); font-family: var(--msp-f-exa); font-weight: 700; letter-spacing: .02em; flex-shrink: 0; border: 2px solid var(--msp-blanc); box-shadow: 0 0 0 1px rgba(27,36,33,.15); }

/* ===================== Rubrique : mur de chaussures ===================== */
.msp-rubrique-entete{ padding-top: 24px; }
.msp-rubrique-bandeau{ position: relative; height: 280px; border-radius: var(--msp-rayon-grand); overflow: visible; }
.msp-rubrique-bandeau-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; border-radius: var(--msp-rayon-grand); filter: brightness(1.12) saturate(1.05); }
.msp-rubrique-bandeau::before{ content: ""; position: absolute; inset: 0; border-radius: var(--msp-rayon-grand); background: linear-gradient(90deg, rgba(27,36,33,.28), rgba(27,36,33,0) 55%); z-index: 1; }
.msp-rubrique-cartouche{ position: absolute; z-index: 2; left: 32px; bottom: -36px; background: var(--msp-mousse); border-radius: var(--msp-rayon); padding: 18px 26px 18px; box-shadow: var(--msp-ombre-flotte); max-width: min(620px, 70%); }
.msp-rubrique-cartouche .msp-kicker{ margin-bottom: 4px; }
.msp-rubrique-cartouche h1{ font-size: clamp(34px, 2vw + 16px, 52px); line-height: 1.05; margin: 0 0 6px; }
.msp-rubrique-chapo{ margin: 0 0 10px; font-size: 16px; line-height: 1.45; color: var(--msp-gris); }
.msp-etagere{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 60px; padding: 0 0 12px; border-bottom: 6px solid var(--msp-kraft); box-shadow: 0 10px 12px -10px rgba(27,36,33,.35); }
.msp-etagere-carte{ display: flex; align-items: center; gap: 12px; min-height: 80px; text-decoration: none; background: var(--msp-blanc); border-radius: 14px; padding: 8px 12px 8px 8px; box-shadow: var(--msp-ombre-repos); transition: transform .2s ease; }
.msp-etagere-carte:hover{ transform: translateY(-3px); }
.msp-etagere-photo{ position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: var(--msp-carton); }
.msp-etagere-photo img, .msp-etagere-photo .msp-repli-photo{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.msp-etagere-titre{ font-size: 14px; line-height: 1.3; color: var(--msp-asphalte); font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.msp-rubrique-corps{ padding-bottom: 48px; }
.msp-grille-rubrique{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 32px 0 28px; }
/* Dernière rangée incomplète : les cartes s'élargissent, jamais de trou */
.msp-grille-rubrique > .msp-carte-article:nth-child(3n+1):nth-last-child(2){ grid-column: span 2; }
.msp-grille-rubrique > .msp-carte-article:nth-child(3n+1):last-child{ grid-column: 1 / -1; flex-direction: row; }
.msp-grille-rubrique > .msp-carte-article:nth-child(3n+1):last-child .msp-carte-article-photo{ width: 42%; height: auto; min-height: 220px; }
.msp-voir-plus{ text-align: center; margin: 0 0 40px; }
@media (max-width: 980px){ .msp-etagere{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .msp-grille-rubrique{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .msp-grille-rubrique > .msp-carte-article{ grid-column: auto !important; flex-direction: column !important; } .msp-grille-rubrique > .msp-carte-article .msp-carte-article-photo{ width: auto !important; height: 200px !important; min-height: 0 !important; } .msp-grille-rubrique > .msp-carte-article:nth-child(odd):last-child{ grid-column: 1 / -1 !important; } }
@media (max-width: 640px){ .msp-rubrique-entete{ padding-top: 16px; } .msp-rubrique-bandeau{ height: auto; padding-top: 150px; } .msp-rubrique-bandeau-img, .msp-rubrique-bandeau::before{ inset: 0 0 auto 0; height: 190px; } .msp-rubrique-cartouche{ position: relative; left: auto; bottom: auto; margin: 0 12px; max-width: none; padding: 16px 18px; } .msp-etagere{ grid-template-columns: 1fr; margin-top: 20px; } .msp-grille-rubrique{ grid-template-columns: 1fr; } }

/* ===================== Article : en-tête « mesureur de pointure » ===================== */
.msp-art-entete{ padding: 0 0 8px; }
.sbt-fil-ariane{ font-size: 13px; color: var(--msp-gris); padding-block: 14px; }
.sbt-fil-ariane a{ color: var(--msp-gris); }
.msp-art-entete-plateau{ position: relative; background: var(--msp-carton); border-radius: var(--msp-rayon-grand); padding: 32px 32px 0; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 36px; align-items: stretch; overflow: hidden; }
.msp-art-entete-texte{ display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 4px 0 24px; }
.msp-art-entete h1{ font-size: clamp(32px, 1.5vw + 22px, 48px); line-height: 1.12; margin: 16px 0 14px; }
.msp-art-chapo{ font-size: 18px; line-height: 1.55; color: #3d4541; margin: 0 0 18px; max-width: 60ch; }
.msp-art-meta{ display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--msp-gris); }
.msp-art-meta img{ border-radius: 999px; width: 44px; height: 44px; object-fit: cover; }
.msp-art-meta-txt{ display: flex; flex-direction: column; line-height: 1.35; }
.msp-art-meta-auteur{ font-weight: 600; color: var(--msp-asphalte); text-decoration: none; }
.msp-art-meta-auteur:hover{ text-decoration: underline; }
.msp-art-photo{ position: relative; border-radius: 18px; overflow: hidden; box-shadow: var(--msp-ombre-flotte); min-height: 280px; max-height: 420px; margin-bottom: 24px; background: var(--msp-blanc); }
.msp-art-photo img, .msp-art-photo .msp-repli-photo{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Réglette graduée au bas du plateau (graduation tous les 8 px, grande tous les 40 px) */
.msp-reglette{ grid-column: 1 / -1; position: relative; height: 34px; margin: 0 -32px; padding: 0 32px; background: var(--msp-carton-pale); border-top: 2px solid var(--msp-asphalte); }
.msp-reglette-graduations{ position: absolute; left: 32px; right: 32px; top: 0; height: 14px; background: repeating-linear-gradient(90deg, var(--msp-asphalte) 0 1px, transparent 1px 8px) 0 0 / 100% 7px no-repeat, repeating-linear-gradient(90deg, var(--msp-asphalte) 0 1.5px, transparent 1.5px 40px) 0 0 / 100% 13px no-repeat; }
.msp-reglette-pointures{ position: absolute; left: 32px; right: 32px; bottom: 3px; display: flex; justify-content: space-between; font-family: var(--msp-f-exa); font-weight: 500; font-size: 10px; color: var(--msp-asphalte); }
.msp-reglette-pointures i{ font-style: normal; }
.msp-reglette-curseur{ position: absolute; top: -9px; width: 18px; height: 16px; background: var(--msp-volt); border: 1.5px solid var(--msp-asphalte); border-radius: 9px 9px 4px 4px; transform: translateX(-50%); }
@media (max-width: 860px){
	.msp-art-entete-plateau{ grid-template-columns: 1fr; padding: 16px 16px 0; }
	.msp-art-photo{ order: -1; min-height: 210px; max-height: 240px; margin-bottom: 0; }
	.msp-art-entete-texte{ padding-bottom: 18px; }
	.msp-reglette{ margin: 0 -16px; }
	.msp-reglette-graduations, .msp-reglette-pointures{ left: 16px; right: 16px; }
	.msp-reglette-pointures i:nth-child(even){ visibility: hidden; }
}

/* ===== Corrections n°2 — en-tête d'article DANS la grille : le rail démarre à côté de lui =====
   Colonne gauche : en-tête (rangée 1) puis panneau de lecture (rangée 2) ; colonne droite : le rail
   (sommaire + formulaire, un seul bloc collant) sur les deux rangées. Mesure visée : bouton du
   formulaire < 900 px à 1920×950 et entier à 1440×780 dès l'arrivée. */
@media (min-width: 1081px){
	.sbt-article-mise-en-page.msp-art-grille{ grid-template-rows: auto 1fr; row-gap: 24px; padding-top: 6px; }
	.msp-art-grille > .msp-art-entete{ grid-column: 1; grid-row: 1; padding: 0; min-width: 0; }
	.msp-art-grille > .sbt-article-principal{ grid-column: 1; grid-row: 2; }
	.msp-art-grille > .sbt-rail{ grid-column: 2; grid-row: 1 / span 2; }
	.msp-art-grille .msp-art-entete-plateau{ grid-template-columns: minmax(0, 1fr) 236px; column-gap: 26px; padding: 26px 26px 0; }
	.msp-art-grille .msp-art-entete h1{ font-size: clamp(30px, .7vw + 22px, 38px); line-height: 1.14; margin: 14px 0 12px; }
	.msp-art-grille .msp-art-chapo{ font-size: 16.5px; line-height: 1.55; margin-bottom: 16px; }
	.msp-art-grille .msp-art-entete-texte{ padding-bottom: 20px; }
	.msp-art-grille .msp-art-photo{ min-height: 236px; max-height: 330px; margin-bottom: 20px; }
	.msp-art-grille .msp-reglette{ margin: 0 -26px; padding: 0 26px; }
	.msp-art-grille .msp-reglette-graduations, .msp-art-grille .msp-reglette-pointures{ left: 26px; right: 26px; }
}
.msp-art-grille > .msp-art-entete{ min-width: 0; }
@media (max-width: 1080px){ .sbt-article-mise-en-page.msp-art-grille{ padding-top: 6px; row-gap: 20px; } }

/* ===================== Article : corps dans un panneau blanc large + rail collant ===================== */
.sbt-article-mise-en-page{ padding: 28px 24px 56px; column-gap: var(--msp-gouttiere); }
.sbt-article-principal{ background: var(--msp-blanc); border-radius: var(--msp-rayon); padding: 40px 44px 44px; box-shadow: var(--msp-ombre-repos); min-width: 0; }
.sbt-article-corps{ font-size: 18px; line-height: 1.68; }
.sbt-article-corps > *:first-child{ margin-top: 0; }
.sbt-article-corps h2{ font-size: clamp(26px, .8vw + 18px, 32px); line-height: 1.2; margin-top: 1.8em; }
.sbt-article-corps h2::before{ content: ""; display: block; width: 66px; height: 9px; margin-bottom: 12px; background: radial-gradient(circle, var(--msp-volt) 3.4px, var(--msp-asphalte) 3.5px, var(--msp-asphalte) 4.6px, transparent 4.7px) 0 50% / 13.2px 9px repeat-x; }
.sbt-article-corps h3{ font-weight: 600; font-size: 21px; }
.sbt-article-corps a{ color: var(--msp-cobalt); text-underline-offset: 3px; }
@media (max-width: 1080px){ .sbt-article-principal{ padding: 28px 22px; } }
@media (max-width: 640px){ .sbt-article-mise-en-page{ padding: 16px 12px 40px; } .sbt-article-principal{ padding: 22px 18px; border-radius: 14px; } .sbt-article-corps{ font-size: 17px; } }

/* Rail : UN bloc collant (sommaire compact + formulaire court), plus court que la fenêtre */
.sbt-rail{ top: 96px; gap: 14px; border-left: 0; padding-left: 0; }
.sbt-rail-carte{ border-radius: var(--msp-rayon); padding: 16px 18px; box-shadow: var(--msp-ombre-repos); border-color: rgba(27,36,33,.1); }
.sbt-rail-carte--sommaire{ padding: 0; border: 0; box-shadow: none; background: transparent; }
.sbt-rail .sbt-sommaire{ padding: 14px 18px; border-left-width: 4px; border-left-color: var(--msp-volt); box-shadow: var(--msp-ombre-repos); }
.sbt-rail .sbt-sommaire-titre{ font-family: var(--msp-f-exa); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--msp-gris); }
.sbt-rail .sbt-sommaire ol{ margin-top: 8px; gap: 0; }
.sbt-rail .sbt-sommaire li a{ display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; line-height: 1.3; padding: 5px 0; }
.sbt-rail .sbt-sommaire-num{ display: inline-flex; vertical-align: 1px; width: 20px; height: 20px; margin-right: 8px; font-family: var(--msp-f-exa); font-size: 10px; background: var(--msp-carton); }
.sbt-rail .sbt-sommaire li:nth-child(n+11){ display: none; }
@media (max-height: 820px){ .sbt-rail .sbt-sommaire li:nth-child(n+9){ display: none; } }
.msp-rail-form{ padding: 16px 18px 14px; }
.msp-rail-form .msp-rail-form-titre{ font-family: var(--msp-f-titre); font-size: 19px; line-height: 1.25; text-transform: none; letter-spacing: 0; color: var(--msp-asphalte); margin: 0 0 12px; }
.msp-rail-form .msp-champ{ height: 46px; font-size: 15px; }
.msp-rail-form textarea.msp-champ{ height: auto; }
.msp-form-rgpd-court{ font-size: 12px; line-height: 1.4; color: var(--msp-gris); margin: 8px 0 0; }
.msp-form-rgpd-court a{ color: var(--msp-cobalt); }

/* Tableaux des articles : en-tête teinté, lignes alternées, cartes à 390 */
.msp-tableau-cadre{ margin: 1.6em 0; border-radius: 14px; overflow: hidden; border: 1px solid rgba(27,36,33,.14); }
.sbt-article-corps table{ width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; margin: 0; }
.sbt-article-corps table th, .sbt-article-corps table td{ text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid rgba(27,36,33,.1); }
.sbt-article-corps table thead th, .sbt-article-corps table tr.msp-tr-tete > *{ background: var(--msp-asphalte); color: var(--msp-mousse); font-family: var(--msp-f-exa); font-weight: 600; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.sbt-article-corps table tbody tr:nth-child(even) td{ background: var(--msp-mousse); }
.sbt-article-corps table td:first-child{ font-weight: 600; }
@media (max-width: 700px){
	.msp-tableau-cadre, .sbs_tableau{ border: 0; overflow: visible; max-width: 100%; }
	.sbt-article-corps table{ min-width: 0 !important; }
	.sbt-article-corps table td{ overflow-wrap: break-word; }
	.sbt-article-corps table, .sbt-article-corps table tbody, .sbt-article-corps table tr, .sbt-article-corps table td, .sbt-article-corps table th{ display: block; width: 100%; }
	.sbt-article-corps table thead, .sbt-article-corps table tr.msp-tr-tete{ display: none; }
	.sbt-article-corps table tr{ background: var(--msp-mousse); border-radius: 14px; padding: 6px 4px; margin-bottom: 12px; border: 1px solid rgba(27,36,33,.12); }
	.sbt-article-corps table tbody tr:nth-child(even) td{ background: transparent; }
	.sbt-article-corps table td{ border-bottom: 1px dashed rgba(27,36,33,.14); padding: 8px 12px; }
	.sbt-article-corps table td:last-child{ border-bottom: 0; }
	.sbt-article-corps table td[data-label]::before{ content: attr(data-label); display: block; font-family: var(--msp-f-exa); font-weight: 600; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--msp-gris); margin-bottom: 2px; }
}

/* Fin d'article PLEINE LARGEUR : 4 cartes qui remplissent la ligne (plus de colonne vide) */
.msp-article-suite{ display: block; background: var(--msp-carton); padding: 44px 0 56px; }
.msp-article-suite .sbt-a-lire{ margin: 0; padding: 0; border: 0; }
.msp-article-suite .sbt-kicker{ font-size: clamp(26px, 1vw + 18px, 34px); font-weight: 400; margin: 0; }
.msp-grille-suite{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.msp-grille-suite--n3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.msp-grille-suite--n2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.msp-grille-suite .msp-carte-article-photo{ height: 160px; }
.msp-grille-suite .msp-carte-article-titre{ font-size: 17px; }
@media (max-width: 1000px){ .msp-grille-suite, .msp-grille-suite--n3{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .msp-grille-suite, .msp-grille-suite--n3, .msp-grille-suite--n2{ grid-template-columns: 1fr; } }

/* Bloc auteur figé : habillage seulement */
.sbt-auteur{ margin-top: 40px; }
.sbt-auteur .msp-initiales{ width: 120px !important; height: 120px !important; font-size: 40px !important; }

/* ===================== À propos ===================== */
.msp-hero--page{ padding-block: 40px; }
.msp-boites{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.msp-boite{ position: relative; display: flex; flex-direction: column; }
.msp-boite-photo{ position: relative; height: 210px; border-radius: var(--msp-rayon); overflow: hidden; background: var(--msp-carton); box-shadow: var(--msp-ombre-repos); }
.msp-boite-photo img, .msp-boite-photo .msp-repli-photo{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.msp-boite-etiquette{ position: relative; margin: -34px 14px 0; flex: 1; box-shadow: var(--msp-ombre-repos); }
.msp-boite-etiquette h3{ font-family: var(--msp-f-exa); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 6px; padding-bottom: 6px; border-bottom: 2px solid var(--msp-asphalte); }
.msp-boite-etiquette p{ margin: 0; font-size: 15px; line-height: 1.45; }
.msp-frise{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; position: relative; }
.msp-frise::before{ content: ""; position: absolute; left: 24px; right: 24px; top: 20px; height: 10px; background: radial-gradient(circle, var(--msp-volt) 3px, transparent 3.5px) 0 50% / 18px 10px repeat-x; }
.msp-frise li{ position: relative; display: flex; flex-direction: column; gap: 8px; }
.msp-frise-num{ width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--msp-volt); color: var(--msp-asphalte); font-family: var(--msp-f-exa); font-weight: 700; font-size: 18px; position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--msp-asphalte); margin-bottom: 8px; }
.msp-frise strong{ font-family: var(--msp-f-titre); font-weight: 600; font-size: 20px; color: var(--msp-mousse); }
.msp-frise span:not(.msp-frise-num){ font-size: 15px; line-height: 1.5; color: rgba(245,242,234,.82); }
.msp-qui-grille{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 40px; align-items: center; }
.msp-chiffres-tuiles{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; }
.msp-chiffres-tuiles > div{ background: var(--msp-blanc); border-radius: var(--msp-rayon); padding: 20px 16px; box-shadow: var(--msp-ombre-repos); }
.msp-chiffres-tuiles dt{ font-family: var(--msp-f-exa); font-weight: 700; font-size: clamp(28px, 1vw + 20px, 40px); line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.msp-chiffres-tuiles dd{ margin: 8px 0 0; font-family: var(--msp-f-exa); font-size: 12px; line-height: 1.35; color: var(--msp-gris); }
.msp-qui-auteurs{ display: flex; flex-direction: column; gap: 14px; }
.msp-auteur-carte{ display: flex; gap: 18px; align-items: center; background: var(--msp-blanc); border-radius: var(--msp-rayon); padding: 18px 20px; text-decoration: none; color: var(--msp-asphalte); box-shadow: var(--msp-ombre-repos); transition: transform .2s ease; }
.msp-auteur-carte:hover{ transform: translateY(-3px); }
.msp-auteur-carte-portrait img, .msp-auteur-carte-portrait .msp-initiales{ width: 88px; height: 88px; border-radius: 999px; object-fit: cover; }
.msp-auteur-carte-corps{ display: flex; flex-direction: column; gap: 3px; }
.msp-auteur-carte-corps strong{ font-family: var(--msp-f-titre); font-weight: 600; font-size: 21px; }
.msp-auteur-carte-role{ font-family: var(--msp-f-exa); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--msp-cobalt); }
.msp-auteur-carte-bio{ font-size: 15px; line-height: 1.45; color: var(--msp-gris); }
.msp-auteur-carte-lien{ font-family: var(--msp-f-exa); font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.msp-engagements{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.msp-engagement{ border-radius: var(--msp-rayon-grand); padding: 28px 32px; }
.msp-engagement h3{ font-size: 24px; margin: 0 0 14px; }
.msp-engagement--oui{ background: var(--msp-mousse); }
.msp-engagement--non{ background: var(--msp-carton); }
.msp-checklist{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.msp-checklist li{ padding-left: 30px; position: relative; font-size: 17px; line-height: 1.5; }
.msp-checklist li::before{ content: "✓"; position: absolute; left: 0; top: 0; color: var(--msp-oui); font-weight: 700; font-family: var(--msp-f-exa); }
.msp-checklist--non li::before{ content: "✕"; color: var(--msp-attention); }
@media (max-width: 1000px){ .msp-boites{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .msp-frise{ grid-template-columns: 1fr; gap: 14px; } .msp-frise::before{ left: 23px; right: auto; top: 24px; bottom: 24px; width: 10px; height: auto; background-size: 10px 18px; background-repeat: repeat-y; background-position: 50% 0; } .msp-frise li{ display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; } .msp-frise-num{ grid-row: span 2; margin: 0; } .msp-qui-grille, .msp-engagements{ grid-template-columns: 1fr; } }
@media (max-width: 560px){ .msp-boites{ grid-template-columns: 1fr; } .msp-boite-photo{ height: 170px; } .msp-chiffres-tuiles{ gap: 8px; } .msp-chiffres-tuiles > div{ padding: 14px 10px; } .msp-auteur-carte{ align-items: flex-start; } .msp-auteur-carte-portrait img, .msp-auteur-carte-portrait .msp-initiales{ width: 64px; height: 64px; } .msp-engagement{ padding: 22px 20px; } }

/* ===================== Landing « Trouver un magasin running » ===================== */
.msp-landing-texte{ max-width: 72ch; font-size: 17px; margin: 0 0 24px; }
.msp-grille-etiquettes{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.msp-grille-etiquettes .msp-etiquette-boite{ border-color: rgba(27,36,33,.25); }
.msp-grille-etiquettes .msp-etiquette-boite dl > div{ grid-template-columns: 1fr; gap: 4px; border: 0; padding: 0; }
.msp-etapes-numerotees--landing li{ align-items: flex-start; max-width: 70ch; }
.msp-checklist{ max-width: 70ch; }
@media (max-width: 860px){ .msp-grille-etiquettes{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .msp-grille-etiquettes{ grid-template-columns: 1fr; } }

/* ===================== Contact ===================== */
.msp-contact-grille{ display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 48px; align-items: center; }
.msp-contact-visuel{ position: relative; }
.msp-contact-photo{ height: 460px; }
.msp-contact-adresses{ position: absolute; z-index: 2; left: 20px; bottom: 44px; max-width: 320px; background: var(--msp-blanc); border-radius: var(--msp-rayon); padding: 16px 18px; box-shadow: var(--msp-ombre-flotte); }
.msp-contact-adresses p{ margin: 2px 0; font-size: 15px; line-height: 1.45; }
.msp-contact-indep{ color: var(--msp-gris); font-size: 13px !important; margin-top: 6px !important; }
.msp-contact-form h1{ font-size: clamp(32px, 1.6vw + 20px, 48px); margin: 0 0 12px; }
.msp-contact-intro{ margin-bottom: 16px; font-size: 16px; }
.msp-rail-form{ background: var(--msp-blanc); border-radius: var(--msp-rayon); box-shadow: var(--msp-ombre-repos); }
.msp-faq-contact details{ background: var(--msp-blanc); border-radius: var(--msp-rayon); margin-bottom: 10px; padding: 4px 8px; }
@media (max-width: 900px){ .msp-contact-grille{ grid-template-columns: 1fr; gap: 28px; } .msp-contact-photo{ height: 260px; } .msp-contact-adresses{ position: relative; left: auto; bottom: auto; margin: -30px 12px 0; max-width: none; } }

/* ===================== Pages légales ===================== */
.msp-page-legale{ padding-block: 40px 64px; }
.msp-page-legale-mise-en-page{ display: grid; grid-template-columns: minmax(0, 1fr) var(--msp-rail); gap: var(--msp-gouttiere); align-items: start; }
.msp-page-legale-corps{ background: var(--msp-blanc); border-radius: var(--msp-rayon); padding: 40px; min-width: 0; box-shadow: var(--msp-ombre-repos); }
.msp-page-legale-corps h1{ font-size: clamp(30px, 1.4vw + 20px, 44px); margin-bottom: .6em; }
.msp-page-legale .sbt-rail{ position: sticky; top: 96px; }
@media (max-width: 980px){ .msp-page-legale-mise-en-page{ grid-template-columns: 1fr; } .msp-page-legale-corps{ padding: 24px; } }

/* ===================== Auteur ===================== */
.msp-auteur-entete{ background: var(--msp-carton); padding-block: 48px; }
.msp-auteur-entete-corps{ display: flex; gap: 28px; align-items: center; }
.msp-auteur-portrait{ border-radius: 999px; background: var(--msp-blanc); padding: 8px; box-shadow: var(--msp-ombre-repos); flex-shrink: 0; }
.msp-auteur-portrait img, .msp-auteur-portrait .msp-initiales{ border-radius: 999px; width: 160px !important; height: 160px !important; object-fit: cover; font-size: 52px !important; }
.msp-auteur-entete h1{ font-size: clamp(32px, 2.6vw, 52px); margin: 8px 0; }
.msp-etiquette-boite--auteur{ display: inline-block; margin-top: 12px; }
@media (max-width: 700px){ .msp-auteur-entete-corps{ flex-direction: column; text-align: center; } }

/* ===================== Archive / recherche / 404 ===================== */
.msp-archive-entete{ padding-top: 40px; }
.msp-recherche-form{ display: flex; gap: 10px; max-width: 480px; margin: 16px 0; }
.msp-recherche-form .msp-champ{ margin: 0; }
.msp-404-grille{ display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 40px; align-items: center; }
.msp-404-photo{ height: 380px; }
.msp-tuiles-pratique--mini{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 20px 0; }
.msp-tuiles-pratique--mini > .msp-tuile-pratique{ height: 90px; flex: none; }
.msp-tuiles-pratique--mini .msp-tuile-pratique-libelle{ font-size: 13px; font-family: var(--msp-f-exa); font-weight: 600; left: 10px; bottom: 8px; }
@media (max-width: 900px){ .msp-404-grille{ grid-template-columns: 1fr; } .msp-404-photo{ height: 240px; } }

/* ===================== Pied de page : surcharge des couleurs en dur de footer.css ===================== */
.sbt-footer{ background: var(--msp-asphalte) !important; color: var(--msp-mousse) !important; }
.sbt-footer-desc, .sbt-footer-bas{ color: rgba(245,242,234,.7) !important; }
.sbt-footer a{ color: var(--msp-mousse); text-decoration: none; }
.sbt-footer a:hover{ color: var(--msp-volt); }
.sbt-footer-colonne .sbt-t4{ color: var(--msp-volt) !important; }
.sbt-btn{ background: var(--msp-volt) !important; color: var(--msp-asphalte) !important; font-family: var(--msp-f-exa); font-weight: 700; }
.sbt-footer .msp-btn{ border-color: var(--msp-volt); box-shadow: none; color: var(--msp-asphalte); }
.msp-footer-crampons{ display: flex; gap: 8px; margin-bottom: 24px; }
.msp-footer-crampons span{ width: 9px; height: 9px; background: var(--msp-volt); clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
.sbt-cookies{ background: var(--msp-blanc) !important; color: var(--msp-asphalte) !important; }
.sbt-cookies #sbt-cookies-refuser{ background: transparent !important; color: var(--msp-asphalte) !important; border: 1.5px solid var(--msp-asphalte); }

.msp-t3{ font-family: var(--msp-f-titre); font-size: 20px; margin: 0 0 6px; }

@media (prefers-reduced-motion: reduce){
	*{ animation: none !important; transition: none !important; }
}

/* ===================== Corrections n°2 — blocs visuels tirés du texte (inc/msp-visuels.php, R-0031) =====================
   Un bloc = UN visuel : pictogramme en masque CSS (jamais un <svg> de plus), texte d'origine intact. */
.msp-picto{ flex: none; display: inline-block; width: 34px; height: 34px; border-radius: 999px; background: var(--msp-volt); border: 1.5px solid var(--msp-asphalte); position: relative; }
.msp-picto::after{ content: ""; position: absolute; inset: 6px; background: var(--msp-asphalte); -webkit-mask: var(--msp-ico) center / contain no-repeat; mask: var(--msp-ico) center / contain no-repeat; }
.msp-motif--semelle{ --msp-ico: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M2%2015c0-2%201.5-3%203.5-3H10c2%200%203-2.5%205-2.5h3c2.2%200%204%201.6%204%203.8V15z%22/%3E%3Cpath%20d=%22M2%2015h20v2.2c0%20.6-.4%201-1%201H3c-.6%200-1-.4-1-1z%22%20fill=%22%23000%22/%3E%3C/svg%3E"); }
.msp-motif--montre{ --msp-ico: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%3E%3Crect%20x=%228%22%20y=%221.5%22%20width=%228%22%20height=%224%22%20rx=%221.2%22/%3E%3Crect%20x=%228%22%20y=%2218.5%22%20width=%228%22%20height=%224%22%20rx=%221.2%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%226.5%22/%3E%3Cpath%20d=%22M12%208.5V12l2.5%201.8%22/%3E%3C/svg%3E"); }
.msp-motif--gourde{ --msp-ico: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M10%201.5h4v3h-4z%22%20fill=%22%23000%22/%3E%3Cpath%20d=%22M10.5%204.5h3v2.2c2.4.9%203.8%202.8%203.8%205.2v8.3c0%201.2-.9%202.3-2.2%202.3H8.9c-1.3%200-2.2-1.1-2.2-2.3v-8.3c0-2.4%201.4-4.3%203.8-5.2z%22/%3E%3Cpath%20d=%22M6.7%2013.5h10.6%22/%3E%3C/svg%3E"); }
.msp-motif--sentier{ --msp-ico: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linejoin=%22round%22%20stroke-linecap=%22round%22%3E%3Cpath%20d=%22M1.5%2020.5l7-12%204%206%203-4%207%2010z%22/%3E%3Cpath%20d=%22M11%2020.5c.8-2%203-2.4%202.2-4.4%22%20stroke-dasharray=%221.5%202.5%22/%3E%3C/svg%3E"); }

/* Repères : la liste du rédacteur, légendée par son intertitre, en cartes à crampon */
.sbt-article-corps figure{ margin: 1.8em 0; }
.msp-reperes{ background: var(--msp-carton-pale); border-radius: var(--msp-rayon); padding: 20px 22px 22px; border-top: 4px solid var(--msp-asphalte); }
.msp-reperes-legende{ display: flex; align-items: center; gap: 12px; font-family: var(--msp-f-titre); font-weight: 600; font-size: 19px; line-height: 1.3; color: var(--msp-asphalte); margin: 0 0 14px; }
.sbt-article-corps .msp-reperes-liste{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: msp-rep; }
.msp-reperes--grille .msp-reperes-liste{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.msp-reperes--impair .msp-reperes-liste > li:last-child{ grid-column: 1 / -1; }
.msp-reperes-liste > li{ position: relative; background: var(--msp-blanc); border-radius: 12px; padding: 12px 14px 12px 40px; font-size: 16px; line-height: 1.55; box-shadow: 0 1px 0 rgba(27,36,33,.08); margin: 0; }
.msp-reperes-liste > li::before{ content: ""; position: absolute; left: 14px; top: 18px; width: 12px; height: 12px; border-radius: 999px; background: var(--msp-volt); border: 1.5px solid var(--msp-asphalte); }
ol.msp-reperes-liste > li{ counter-increment: msp-rep; padding-left: 52px; }
ol.msp-reperes-liste > li::before{ content: counter(msp-rep); width: 26px; height: 26px; left: 13px; top: 11px; display: flex; align-items: center; justify-content: center; font-family: var(--msp-f-exa); font-weight: 700; font-size: 12px; color: var(--msp-asphalte); }
.msp-reperes-liste > li > :last-child{ margin-bottom: 0; }
.msp-reperes-liste ul, .msp-reperes-liste ol{ margin: .4em 0 0; padding-left: 1.1em; }

/* Comparaison côte à côte */
.msp-duel{ border: 1.5px solid var(--msp-asphalte); border-radius: var(--msp-rayon); overflow: hidden; background: var(--msp-blanc); }
.msp-duel-legende{ display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--msp-asphalte); color: var(--msp-mousse); font-family: var(--msp-f-titre); font-weight: 600; font-size: 18px; }
.msp-duel-colonnes{ display: grid; grid-template-columns: 1fr 1fr; }
.msp-duel-col{ padding: 18px 20px; font-size: 16px; }
.msp-duel-col + .msp-duel-col{ border-left: 2px dashed var(--msp-kraft); }
.msp-duel-col h3{ margin-top: 0 !important; font-size: 19px; }
.msp-duel-col > :last-child{ margin-bottom: 0; }

/* À retenir : la phrase déplacée, posée sur une semelle (filet asphalte + ombre portée franche) */
.msp-retenir{ background: var(--msp-blanc); border: 1.5px solid var(--msp-asphalte); border-radius: var(--msp-rayon); padding: 14px 20px 18px; box-shadow: 0 4px 0 var(--msp-asphalte); }
.msp-retenir-titre{ display: flex; align-items: center; gap: 10px; font-family: var(--msp-f-exa); font-weight: 600; font-size: 13px; color: var(--msp-asphalte); margin: 0 0 8px; }
.msp-retenir-titre .msp-picto{ width: 30px; height: 30px; }
.sbt-article-corps .msp-retenir-texte{ margin: 0; padding-left: 40px; font-family: var(--msp-f-titre); font-size: 19px; line-height: 1.5; color: var(--msp-asphalte); }
.msp-fiche-etiquette{ font-family: var(--msp-f-exa); font-weight: 600; font-size: 13px; }

/* Fiches : sous-parties à étiquettes (« À qui il s'adresse : »…) en cartes */
.msp-fiche{ background: var(--msp-blanc); border: 1px solid rgba(27,36,33,.14); border-left: 5px solid var(--msp-volt); border-radius: var(--msp-rayon); padding: 16px 20px 6px; }
.msp-fiche h3{ margin-top: 0 !important; display: flex; align-items: center; gap: 10px; }
.msp-fiche h3::before{ content: ""; flex: none; width: 22px; height: 22px; background: var(--msp-asphalte); -webkit-mask: var(--msp-ico) center / contain no-repeat; mask: var(--msp-ico) center / contain no-repeat; }
.sbt-article-corps .msp-fiche-ligne{ font-size: 16px; line-height: 1.55; margin-bottom: .8em; padding-top: .7em; border-top: 1px dashed rgba(27,36,33,.18); }
.msp-fiche h3 + .msp-fiche-ligne{ border-top: 0; padding-top: 0; }

/* Séparateur illustré entre deux sections longues */
.msp-separateur{ display: flex; align-items: center; gap: 14px; margin: 2.4em 0 .4em; }
.msp-separateur::before, .msp-separateur::after{ content: ""; flex: 1; height: 8px; background: radial-gradient(circle, var(--msp-kraft) 2.2px, transparent 2.6px) 0 50% / 14px 8px repeat-x; }
.msp-separateur-dessin{ flex: none; width: 128px; height: 56px; }
.msp-separateur + h2{ margin-top: .6em !important; }

/* Autres listes du corps : repères à crampon plutôt que des puces nues */
.sbt-article-corps > ul:not([class]), .sbt-article-corps > ol:not([class]){ padding-left: 0; list-style: none; }
.sbt-article-corps > ul:not([class]) > li{ position: relative; padding-left: 26px; margin-bottom: .5em; }
.sbt-article-corps > ul:not([class]) > li::before{ content: ""; position: absolute; left: 4px; top: .62em; width: 10px; height: 10px; border-radius: 999px; background: var(--msp-volt); border: 1.5px solid var(--msp-asphalte); }
.sbt-article-corps > ol:not([class]){ counter-reset: msp-ol; }
.sbt-article-corps > ol:not([class]) > li{ position: relative; padding-left: 34px; margin-bottom: .55em; counter-increment: msp-ol; }
.sbt-article-corps > ol:not([class]) > li::before{ content: counter(msp-ol); position: absolute; left: 0; top: .2em; width: 24px; height: 24px; border-radius: 999px; background: var(--msp-carton); font-family: var(--msp-f-exa); font-weight: 700; font-size: 11px; display: flex; align-items: center; justify-content: center; }

@media (max-width: 640px){
	.msp-reperes{ padding: 16px 14px 16px; }
	.msp-reperes--grille .msp-reperes-liste{ grid-template-columns: 1fr; }
	.msp-duel-colonnes{ grid-template-columns: 1fr; }
	.msp-duel-col + .msp-duel-col{ border-left: 0; border-top: 2px dashed var(--msp-kraft); }
	.msp-retenir{ padding: 12px 16px 16px; }
	.sbt-article-corps .msp-retenir-texte{ font-size: 17.5px; padding-left: 0; }
}

/* =====================================================================================
 * CORRECTIONS N°3 (16/10) — juge visuel : landing, formulaire mobile, corps d'article,
 * vitrines, page auteur, À propos, pied de page.
 * ===================================================================================== */

/* ---------- Landing « Trouver un magasin running » ---------- */
.msp-hero--landing .msp-hero-img--rayon{ object-position: 50% 30%; }
.msp-landing-tete{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: end; margin-bottom: 28px; }
.msp-landing-tete h2{ margin: 0; }
.msp-landing-tete .msp-landing-texte{ margin: 0; color: var(--msp-gris); }
.msp-criteres{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.msp-critere{ position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; row-gap: 4px; align-items: start; background: var(--msp-mousse); border-radius: var(--msp-rayon); padding: 20px 20px 22px; box-shadow: var(--msp-ombre-repos); overflow: hidden; }
.msp-critere::after{ content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 4px; border-radius: 4px 4px 0 0; background: repeating-linear-gradient(90deg, var(--msp-volt) 0 12px, transparent 12px 18px); }
.msp-critere-ico{ grid-row: 1 / span 2; width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: var(--msp-volt); color: var(--msp-asphalte); border: 1.5px solid var(--msp-asphalte); box-shadow: 0 3px 0 var(--msp-asphalte); }
.msp-critere:nth-child(even) .msp-critere-ico{ background: var(--msp-carton); }
.msp-critere-titre{ font-family: var(--msp-f-titre); font-weight: 600; font-size: 19px; line-height: 1.25; padding-top: 4px; }
.msp-critere-texte{ font-size: 15px; line-height: 1.5; color: var(--msp-gris); }
.msp-section-asphalte-grille--inverse{ grid-template-columns: minmax(0, 1fr) 500px; }
.msp-section-asphalte-grille--inverse .msp-essai-photo{ height: 380px; }
.msp-landing-duo{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.msp-landing-duo-visuel{ position: relative; }
.msp-landing-photo{ height: 400px; }
.msp-landing-duo-texte h2{ margin: 0 0 18px; }
.msp-landing-duo-texte .msp-landing-texte{ margin: 0 0 14px; }
.msp-landing-duo-texte .msp-btn{ margin-top: 8px; }
.msp-a-emporter{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; counter-reset: emporter; }
.msp-a-emporter li{ position: relative; display: flex; flex-direction: column; gap: 4px; background: var(--msp-blanc); border-radius: var(--msp-rayon); padding: 18px 18px 18px 62px; box-shadow: var(--msp-ombre-repos); }
.msp-a-emporter li::before{ content: ""; position: absolute; left: 16px; top: 18px; width: 32px; height: 32px; border-radius: 999px; background: var(--msp-volt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2421' 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 / 16px no-repeat; border: 1.5px solid var(--msp-asphalte); }
.msp-a-emporter strong{ font-family: var(--msp-f-titre); font-weight: 600; font-size: 17px; line-height: 1.3; }
.msp-a-emporter span{ font-size: 15px; line-height: 1.45; color: var(--msp-gris); }
.msp-etiquette-boite--villes{ position: absolute; z-index: 2; right: -18px; bottom: 56px; width: 250px; box-shadow: var(--msp-ombre-flotte); transform: rotate(2deg); }
@media (max-width: 1000px){
	.msp-landing-tete, .msp-landing-duo{ grid-template-columns: 1fr; gap: 24px; }
	.msp-landing-duo--inverse .msp-landing-duo-visuel{ order: -1; }
	.msp-criteres{ grid-template-columns: 1fr 1fr; }
	.msp-section-asphalte-grille--inverse{ grid-template-columns: 1fr; }
	.msp-section-asphalte-grille--inverse .msp-essai-photo{ height: 240px; order: -1; }
	.msp-landing-photo{ height: 260px; }
	.msp-etiquette-boite--villes{ right: 12px; bottom: 36px; }
}
@media (max-width: 600px){
	.msp-criteres, .msp-a-emporter{ grid-template-columns: 1fr; gap: 12px; }
	.msp-critere{ grid-template-columns: 52px minmax(0, 1fr); padding: 16px; }
	.msp-critere-ico{ width: 52px; height: 52px; border-radius: 14px; }
	.msp-critere-ico svg{ width: 28px; height: 28px; }
	.msp-landing-photo{ height: 210px; }
	.msp-etiquette-boite--villes{ position: relative; right: auto; bottom: auto; width: auto; margin: -30px 14px 0; transform: none; }
}

/* ---------- Formulaire du hero en mobile : étapes compactes, bouton toujours dans la carte ---------- */
.msp-form-actions .msp-btn:not(.msp-btn--retour){ min-width: 0; }
.msp-carte-formulaire{ scroll-margin-top: 88px; }
@media (max-width: 640px){
	.msp-form-tete{ margin-bottom: 10px; }
	.msp-form-titre{ font-size: 18px; }
	.msp-form-question{ margin-bottom: 8px; }
	.msp-pilules:not(.msp-pilules--tuiles){ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
	.msp-pilules:not(.msp-pilules--tuiles) .msp-pilule{ padding: 0 4px; font-size: 12.5px; letter-spacing: 0; white-space: normal; text-align: center; line-height: 1.2; }
	.msp-form-question + .msp-pilules + .msp-form-question, .msp-champ + .msp-form-question{ margin-top: 2px; }
	.msp-form-actions .msp-btn:not(.msp-btn--retour){ padding: 0 10px; font-size: 13px; letter-spacing: .02em; }
	.msp-btn--retour{ flex-basis: 52px; width: 52px; }
	.msp-reassurances{ gap: 2px 10px; margin-top: 10px; font-size: 10.5px; }
}

/* ---------- Corps d'article : encadrés d'étiquette (gabarit de « Le saviez-vous ? ») ---------- */
.sbt-article-corps .msp-encadre-note{ position: relative; display: block; margin: 2em 0; padding: 22px 24px 22px 88px; min-height: 92px; border-radius: var(--msp-rayon-grand); background: var(--msp-carton-pale); border-left: 0; }
.sbt-article-corps .msp-encadre-note::before{ content: ""; position: absolute; left: 24px; top: 22px; width: 48px; height: 48px; border-radius: 14px; background: var(--msp-volt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2421' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4'/%3E%3Cpath d='M5 4h11l-2 4 2 4H5'/%3E%3C/svg%3E") center / 24px no-repeat; border: 1.5px solid var(--msp-asphalte); box-sizing: border-box; }
.sbt-article-corps .msp-encadre-note > *{ margin: 0 0 6px; }
.sbt-article-corps .msp-encadre-note > *:last-child{ margin-bottom: 0; }
.sbt-article-corps .msp-encadre-note p:empty{ display: none; }
.sbt-article-corps .msp-encadre-note .msp-encadre-titre{ font-family: var(--msp-f-exa); font-weight: 700; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; line-height: 1.35; color: var(--msp-asphalte); }
.sbt-article-corps .msp-encadre-note p:not(.msp-encadre-titre){ font-size: 17px; line-height: 1.6; }
.sbt-article-corps .sbt-encadre--saviez{ background: var(--msp-carton-pale); }
@media (max-width: 620px){
	.sbt-article-corps .msp-encadre-note{ padding: 18px 18px 18px 70px; min-height: 76px; }
	.sbt-article-corps .msp-encadre-note::before{ left: 18px; top: 18px; width: 40px; height: 40px; background-size: 20px; }
}

/* ---------- Corps d'article : grilles de cartes du rédacteur (mds-guide-grid) ---------- */
.sbt-article-corps .mds-guide-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 1.6em 0; align-items: start; }
.sbt-article-corps .mds-guide-card{ background: var(--msp-blanc); border-radius: var(--msp-rayon); padding: 18px 20px; box-shadow: var(--msp-ombre-repos); border-top: 4px solid var(--msp-volt); }
.sbt-article-corps .mds-guide-card h3, .sbt-article-corps .mds-guide-card .mds-guide-card-titre{ font-family: var(--msp-f-titre); font-weight: 400; font-size: 20px; line-height: 1.25; margin: 0 0 8px; color: var(--msp-asphalte); }
.sbt-article-corps .mds-guide-card p{ font-size: 16px; line-height: 1.55; margin: 0 0 8px; }
.sbt-article-corps .mds-guide-card p:last-child{ margin-bottom: 0; }
.sbt-article-corps .mds-guide-card .mds-guide-photo img{ margin: 0 0 12px; }
@media (max-width: 640px){ .sbt-article-corps .mds-guide-grid{ grid-template-columns: 1fr; } }

/* ---------- Corps d'article : « Sources » = même accordéon que la FAQ ---------- */
.sbt-article-corps details.msp-sources{ margin: 2em 0; background: var(--msp-carton-pale); border-radius: var(--msp-rayon-grand); padding: 10px; border: 0; }
.sbt-article-corps details.msp-sources > summary{ list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 16px; background: var(--msp-blanc); border-radius: 14px; font-family: var(--msp-f-titre); font-weight: 600; font-size: 17px; line-height: 1.4; color: var(--msp-asphalte); }
.sbt-article-corps details.msp-sources > summary::-webkit-details-marker{ display: none; }
.sbt-article-corps details.msp-sources > summary::before{ content: ""; flex: none; order: -1; width: 30px; height: 30px; border-radius: 9px; background: var(--msp-asphalte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D7F34A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h7v14H4zM13 5h7v14h-7z'/%3E%3C/svg%3E") center / 18px no-repeat; }
.sbt-article-corps details.msp-sources > summary::after{ content: ""; flex: none; margin-left: auto; width: 30px; height: 30px; border-radius: 50%; background: var(--msp-mousse) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232447C9' 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-article-corps details.msp-sources[open] > summary::after{ transform: rotate(135deg); }
.sbt-article-corps details.msp-sources .msp-sources-corps, .sbt-article-corps details.msp-sources .sbt-faq-reponse{ padding: 12px 16px 6px; font-size: 15px; line-height: 1.55; color: var(--msp-gris); }
.sbt-article-corps details.msp-sources .msp-sources-corps p, .sbt-article-corps details.msp-sources .sbt-faq-reponse p{ margin: 0 0 8px; padding-left: 16px; position: relative; overflow-wrap: anywhere; }
.sbt-article-corps details.msp-sources .msp-sources-corps p::before, .sbt-article-corps details.msp-sources .sbt-faq-reponse p::before{ content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--msp-kraft); clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
.sbt-article-corps details.msp-sources a{ color: var(--msp-asphalte); text-decoration-color: var(--msp-kraft); text-underline-offset: 3px; }

/* ---------- Corps d'article : « Pour aller plus loin » en mini-cartes ---------- */
.sbt-article-corps .sb-maillage{ margin: 2.4em 0 1em; }
.sbt-article-corps .sb-maillage h2{ margin-bottom: 16px; }
.msp-mini-cartes{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.msp-mini-cartes--n2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sbt-article-corps a.msp-mini-carte{ display: flex; flex-direction: column; text-decoration: none; color: var(--msp-asphalte); background: var(--msp-blanc); border-radius: var(--msp-rayon); overflow: hidden; box-shadow: var(--msp-ombre-repos); transition: transform .2s ease, box-shadow .2s ease; }
.sbt-article-corps a.msp-mini-carte:hover{ transform: translateY(-3px); box-shadow: var(--msp-ombre-flotte); }
.msp-mini-vignette{ display: block; height: 120px; background: var(--msp-carton) center / cover no-repeat; }
.msp-mini-corps{ display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 16px; }
.msp-mini-rub{ font-family: var(--msp-f-exa); font-weight: 600; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--msp-cobalt); }
.msp-mini-titre{ font-family: var(--msp-f-titre); font-weight: 600; font-size: 16px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.msp-mini-liens{ margin: 14px 0 0; }
.sbt-article-corps a.msp-mini-lien{ display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--msp-mousse); border: 1.5px solid rgba(27,36,33,.2); font-family: var(--msp-f-exa); font-size: 13px; font-weight: 600; color: var(--msp-asphalte); text-decoration: none; }
.sbt-article-corps a.msp-mini-lien:hover{ border-color: var(--msp-asphalte); }
@media (max-width: 700px){ .msp-mini-cartes, .msp-mini-cartes--n2{ grid-template-columns: 1fr; } .sbt-article-corps a.msp-mini-carte{ flex-direction: row; } .msp-mini-vignette{ width: 96px; height: auto; min-height: 88px; flex: none; } }

/* ---------- Images produit sur fond blanc (repérées par app.js) : jamais rognées ni noyées de blanc ---------- */
.msp-carte-article-photo:has(img.msp-fond-blanc), .msp-etagere-photo:has(img.msp-fond-blanc), .msp-carte-horizontale-photo:has(img.msp-fond-blanc), .msp-parcours-photo:has(img.msp-fond-blanc){ background: #fff; }
.msp-carte-article-photo img.msp-fond-blanc, .msp-etagere-photo img.msp-fond-blanc, .msp-carte-horizontale-photo img.msp-fond-blanc, .msp-parcours-photo img.msp-fond-blanc{ object-fit: contain; padding: 8px; background: #fff; }
.msp-carte-article-photo img.msp-fond-blanc{ padding: 14px 18px; }

/* ---------- Accueil : plus de pointillés parasites entre les cartes « Trois guides » ---------- */
.msp-parcours::before{ display: none; }

/* ---------- Page auteur : tuiles chiffres, grille régulière de 3 ---------- */
.msp-chiffres-tuiles--auteur{ grid-template-columns: repeat(2, minmax(0, 200px)); margin-top: 18px; }
.msp-grille-reguliere > .msp-carte-article{ grid-column: auto !important; flex-direction: column !important; }
.msp-grille-reguliere > .msp-carte-article .msp-carte-article-photo{ width: auto !important; height: 200px !important; min-height: 0 !important; }
@media (max-width: 700px){ .msp-chiffres-tuiles--auteur{ grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; } }

/* ---------- À propos : portraits ronds, jamais écrasés par la carte ---------- */
.msp-auteur-carte-portrait{ flex: 0 0 88px; width: 88px; height: 88px; border-radius: 999px; overflow: hidden; display: block; background: var(--msp-carton); }
.msp-auteur-carte-portrait img, .msp-auteur-carte-portrait .msp-initiales{ display: flex; width: 88px !important; height: 88px !important; max-width: none; aspect-ratio: 1; object-fit: cover; border-radius: 999px; }
@media (max-width: 560px){
	.msp-auteur-carte-portrait{ flex-basis: 76px; width: 76px; height: 76px; }
	.msp-auteur-carte-portrait img, .msp-auteur-carte-portrait .msp-initiales{ width: 76px !important; height: 76px !important; }
}

/* ---------- Pied de page équilibré ---------- */
.sbt-footer-colonne ul.msp-footer-engagements{ list-style: none; margin: 24px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(245,242,234,.14); display: flex; flex-direction: column; gap: 8px; }
.msp-footer-engagements li{ position: relative; padding-left: 24px; font-size: 14px; line-height: 1.4; color: rgba(245,242,234,.8); }
.msp-footer-engagements li::before{ content: ""; position: absolute; left: 0; top: .3em; width: 12px; height: 12px; background: var(--msp-volt); clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
.sbt-footer-colonne ul a{ line-height: 1.45; }

.msp-carte-article-photo:has(img.msp-fond-blanc) .msp-pastille{ background: var(--msp-mousse); box-shadow: inset 0 0 0 1.5px rgba(27,36,33,.18); }

/* =====================================================================================
 * Corrections n°4 (16/10/2026)
 * ===================================================================================== */

/* ---------- Produit sur fond blanc dans une carte : cadré sur l'objet (positions posées par app.js) ---------- */
.msp-carte-article-photo:has(img.msp-fond-blanc--cadre), .msp-etagere-photo:has(img.msp-fond-blanc--cadre), .msp-carte-horizontale-photo:has(img.msp-fond-blanc--cadre), .msp-parcours-photo:has(img.msp-fond-blanc--cadre){ overflow: hidden; }
.msp-carte-article-photo img.msp-fond-blanc--cadre, .msp-etagere-photo img.msp-fond-blanc--cadre, .msp-carte-horizontale-photo img.msp-fond-blanc--cadre, .msp-parcours-photo img.msp-fond-blanc--cadre{ position: absolute; right: auto; bottom: auto; max-width: none; min-height: 0; padding: 0; object-fit: fill; background: transparent; }

/* ---------- Page auteur : en-tête en trois temps (portrait · présentation · ses terrains) ---------- */
.msp-cache{ display: none !important; }
.msp-auteur-entete-corps--trio{ display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(300px, 360px); gap: 40px; align-items: center; }
.msp-auteur-entete-texte{ min-width: 0; }
.msp-auteur-entete-texte .msp-art-chapo{ max-width: 62ch; }
.msp-auteur-terrains{ padding: 18px 20px 12px; box-shadow: var(--msp-ombre-repos); align-self: center; }
.msp-auteur-terrains-liste{ list-style: none; margin: 0; padding: 0; }
.msp-auteur-terrains-liste li + li{ border-top: 1px dashed rgba(27,36,33,.22); }
.msp-auteur-terrains-liste a{ display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 6px 2px; color: var(--msp-asphalte); text-decoration: none; }
.msp-auteur-terrain-ico{ display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--msp-volt); border: 1.5px solid var(--msp-asphalte); }
.msp-auteur-terrain-nom{ font-family: var(--msp-f-titre); font-weight: 600; font-size: 17px; line-height: 1.25; }
.msp-auteur-terrain-n{ font-family: var(--msp-f-exa); font-size: 12px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; color: var(--msp-gris); }
.msp-auteur-terrains-liste a:hover .msp-auteur-terrain-nom, .msp-auteur-terrains-liste a:focus-visible .msp-auteur-terrain-nom{ text-decoration: underline; text-underline-offset: 3px; }
.msp-auteur-terrains-liste a:focus-visible{ outline: 3px solid var(--msp-cobalt); outline-offset: 2px; border-radius: 8px; }
.msp-auteur-guides .msp-voir-plus{ margin: 8px 0 48px; }
.msp-auteur-guides .msp-carte-article:focus-visible{ outline: 3px solid var(--msp-cobalt); outline-offset: 3px; }
@media (max-width: 1180px){
	.msp-auteur-entete-corps--trio{ grid-template-columns: auto minmax(0, 1fr); }
	.msp-auteur-entete-corps--trio .msp-auteur-terrains{ grid-column: 1 / -1; }
	.msp-auteur-terrains-liste{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
	.msp-auteur-terrains-liste li + li{ border-top: 0; }
	.msp-auteur-terrains-liste li{ border-bottom: 1px dashed rgba(27,36,33,.22); }
}
@media (max-width: 700px){
	.msp-auteur-entete-corps--trio{ grid-template-columns: 1fr; gap: 20px; justify-items: center; }
	.msp-auteur-entete-corps--trio .msp-auteur-terrains{ width: 100%; text-align: left; }
	.msp-auteur-terrains-liste{ grid-template-columns: 1fr; }
}

/* ---------- « Pour aller plus loin » réduit à une carte (hors vitrine retirés) : carte horizontale pleine largeur, jamais une vignette seule dans un coin ---------- */
.msp-mini-cartes--n1{ grid-template-columns: 1fr; }
.sbt-article-corps .msp-mini-cartes--n1 a.msp-mini-carte{ flex-direction: row; align-items: stretch; min-height: 168px; }
.msp-mini-cartes--n1 .msp-mini-vignette{ flex: 0 0 42%; height: auto; min-height: 168px; }
.msp-mini-cartes--n1 .msp-mini-corps{ justify-content: center; gap: 8px; padding: 20px 24px; }
.msp-mini-cartes--n1 .msp-mini-titre{ font-size: 20px; line-height: 1.3; }
@media (max-width: 700px){ .msp-mini-cartes--n1 .msp-mini-vignette{ flex-basis: 110px; min-height: 120px; } .msp-mini-cartes--n1 .msp-mini-titre{ font-size: 17px; } .msp-mini-cartes--n1 .msp-mini-corps{ padding: 14px 16px; } }
.msp-auteur-terrains-liste li:last-child{ border-bottom: 0; }
@media (min-width: 701px) and (max-width: 1180px){ .msp-auteur-terrains-liste li:nth-last-child(2):nth-child(odd){ border-bottom: 0; } }

/* ---------- Corrections n°5 : page auteur, jamais de case vide en dernière rangée (avant et après le clic) ----------
   Grille sur 6 colonnes : chaque carte en prend 2 ; si la dernière rangée n'a que 2 cartes, elles en prennent 3 chacune ;
   si elle n'en a qu'une, elle passe pleine largeur en carte horizontale (même moule que « Pour aller plus loin »). */
@media (min-width: 981px){
	#msp-grille-auteur.msp-grille-reguliere{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
	#msp-grille-auteur.msp-grille-reguliere > .msp-carte-article{ grid-column: span 2 !important; }
	#msp-grille-auteur.msp-grille-reguliere > .msp-carte-article:nth-child(3n+1):nth-last-child(2),
	#msp-grille-auteur.msp-grille-reguliere > .msp-carte-article:nth-child(3n+2):last-child{ grid-column: span 3 !important; }
	#msp-grille-auteur.msp-grille-reguliere > .msp-carte-article:nth-child(3n+1):last-child{ grid-column: 1 / -1 !important; flex-direction: row !important; }
	#msp-grille-auteur.msp-grille-reguliere > .msp-carte-article:nth-child(3n+1):last-child .msp-carte-article-photo{ width: 42% !important; height: auto !important; min-height: 220px !important; flex: 0 0 42%; }
}