/*
Theme Name: Pixence child
Theme URI: https://wordpress.org/themes/twentytwentyfive/
*/

/* ==========================================================================
   STUDIO M — style-sm.css
   Feuille de style globale du site (chargée sur toutes les pages)
   Préfixe des classes : sm-
   ⚠️ Ce fichier fait aussi office de style.css du thème enfant pixence-child
   (en-tête Theme Name/Theme URI ci-dessus requis par WordPress pour que le
   thème puisse être activé) — à coller tel quel dans style.css.

   ÉTAPE 1 — Setup : variables (palette + typographies extraites du site
   source), reset, typographie de base, et styles structurels minimaux pour
   le header / footer / boutons créés à cette même étape.
   Le contenu détaillé de chaque section de page sera stylé à l'ÉTAPE 2/3.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLES
   Couleurs et polices extraites du CSS du site source (voir CLAUDE_CONTEXT.md
   > Direction artistique). Aucune couleur/police inventée.
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs */
  --sm-color-bg: #FFFFFF;            /* fond principal */
  --sm-color-bg-alt: #E8E6E6;        /* fond sections alternées */
  --sm-color-text: #000000;          /* texte principal */
  --sm-color-muted: #999997;         /* texte atténué / lignes */
  --sm-color-border: #C7C7C7;        /* bordures / états désactivés */
  /* Correction du 05/08/2026 (vérification directe sur le site source) :
     le vert sauge n'est pas la couleur d'accent/boutons mais un fond de
     section (Nos valeurs, Disciplines) ; la vraie couleur des boutons et
     des titres/sous-titres est le doré rgb(204,162,82). */
  --sm-color-accent: #CCA252;        /* doré — boutons + titres/sous-titres */
  --sm-color-accent-light: #849C92;  /* vert sauge clair — peu utilisé */
  --sm-color-accent-gold: #AD8542;   /* doré/tan alternatif — peu utilisé */
  --sm-color-sage: #5D7260;          /* vert sauge — fond section Disciplines + bouton Planning */
  --sm-color-white: #FFFFFF;
  /* Confirmée le 08/08/2026 via source-actu.html (styles calculés) : couleur
     turquoise propre au widget blog Wix (titres des cartes d'articles +
     onglet de catégorie actif "Tous les posts"), absente de la palette
     Wix de base documentée jusqu'ici — nouvelle couleur, pas une erreur. */
  --sm-color-teal: #65C1BE;          /* turquoise — titres des cartes Actu */

  /* ✅ Corrigé le 19/08/2026 : polices locales (voir @font-face ci-dessous)
     déposées par le client dans assets/fonts/ — remplacent Cormorant
     Garamond/Work Sans via Google Fonts (décision du 04/08/2026, devenue
     obsolète maintenant que les vraies polices de marque sont disponibles).
     ✅ 15/09/2026 : The Seasons n'est plus la démo Fontspring. Le client a
     déposé `The Seasons Regular.ttf` (licencié) et supprimé les anciens
     fichiers. Métadonnées du nouveau fichier vérifiées : famille « The
     Seasons Regular », version 1.00, 498 glyphes, poids 400, aucun marqueur
     FONTSPRING DEMO. */
  --sm-font-heading: 'The Seasons', serif;
  --sm-font-body: 'Work Sans', sans-serif;
  --sm-font-accent: 'Work Sans', Arial, sans-serif;
  /* Ajoutée le 05/08/2026 pour les titres d'articles Actu (écriture script) —
     police non extraite du site source (impossible à identifier par scraping
     statique), choix éditorial provisoire à valider par le client comme pour
     Cormorant Garamond / Work Sans. */
  --sm-font-script: 'Dancing Script', cursive;

  /* Échelle typographique — tailles desktop d'origine (Wix), à décliner en
     mobile-first dans les media queries de chaque composant */
  /* ✅ Hiérarchie typographique globale normalisée le 20/08/2026 (consigne
     client) : 64/50/28/24/20/18. Remplace 60/50/25/22/18/17, dont les
     valeurs intermédiaires venaient de relevés page par page. */
  --sm-fs-h1: 64px;
  --sm-fs-h2: 50px;
  --sm-fs-h3: 28px;
  --sm-fs-h4: 24px;
  --sm-fs-h5: 20px;
  --sm-fs-h6: 18px;
  --sm-fs-body: 16px;
  --sm-fs-small: 12px;
  --sm-line-height: 1.4;

  /* Espacements */
  --sm-space-xs: 8px;
  --sm-space-sm: 16px;
  --sm-space-md: 24px;
  --sm-space-lg: 48px;
  --sm-space-xl: 80px;

  /* Layout */
  --sm-max-width: 980px;
  --sm-gutter: 20px;
  --sm-radius: 4px;

  /* ✅ Ajoutées le 19/08/2026 : nouvelle structure globale main/section/row
     (test sur la homepage uniquement, voir section 4 et CLAUDE_CONTEXT.md
     "Restructuration homepage du 19/08/2026") — remplace le conteneur
     centré à 980px (.sm-container) par un système de paddings horizontaux
     imbriqués, le contenu s'étirant désormais sur toute la largeur du
     navigateur (décision explicite, pas une mesure issue du site source).
     ✅ Renommée/complétée le 19/08/2026 (2e passe, doc "Structure CSS
     globale" dans CLAUDE_CONTEXT.md) : --sm-padding-section renommée
     --sm-padding-header (portait à confusion avec --sm-padding-section-v
     ci-dessous, propriété différente — inline vs bloc). Ajout de
     --sm-padding-section-v (padding vertical de .sm-section, remplace
     l'ancien padding-block responsive var(--sm-space-lg)/var(--sm-space-xl))
     et --sm-gap (espacement entre plusieurs .sm-row d'une même section, et
     gap des grilles .sm-row--two-col/--three-col — remplace var(--sm-space-lg)
     à ces deux endroits précis). Aucune valeur mobile distincte demandée
     pour --sm-padding-section-v/--sm-gap : restent flat 53px/24px à toutes
     les tailles d'écran (contrairement aux 3 autres --sm-padding-* qui
     réduisent sous 768px), à revoir si le rendu mobile s'avère trop
     chargé. */
  --sm-padding-main: 53px;
  --sm-padding-header: 23px;
  /* ⚠️ 43px → 203px le 20/08/2026 (valeur posée par le client). Écart
     assumé avec STRUCTURE.md, qui documente encore 43px. */
  --sm-padding-row: 203px;
  --sm-padding-section-v: 53px;
  --sm-gap: 24px;
}

@media (max-width: 768px) {
  :root {
    --sm-padding-main: 20px;
    --sm-padding-header: 16px;
    --sm-padding-row: 16px;
  }
}

/* --------------------------------------------------------------------------
   1bis. @FONT-FACE — polices locales
   ✅ Ajouté le 19/08/2026 : fichiers déposés par le client dans
   assets/fonts/, convertis en woff2 (prioritaire) + woff (repli navigateurs
   plus anciens) — sources .otf/.ttf d'origine conservées telles quelles à
   côté, non chargées par le navigateur. Chemins absolus vers le thème
   enfant WordPress (pixence-child), cohérent avec le chargement de
   style-sm.css lui-même (voir header-sm.php).
   ✅ The Seasons, 15/09/2026 : UN SEUL fichier source, `The Seasons
   Regular.ttf` (licencié), converti en `The Seasons Regular.woff2` (40,7 Ko)
   + `.woff` (66,8 Ko). Les espaces du nom sont encodés `%20` dans les URL,
   comme pour `Comp%20studio%20m.png`.
   ⚠️ Ne jamais réintroduire les anciens noms `TheSeasons-Regular.woff/.woff2`
   ni `Fontspring-DEMO-theseasons-reg.otf` : ces fichiers n'existent plus sur
   le disque et le @font-face partirait en 404 (titres du site rendus en
   serif système).
   ✅ Ajouté le 19/08/2026 (2e passe) : 3 graisses supplémentaires de Work
   Sans déposées par le client (Medium/SemiBold/Bold), en plus du Light
   initial — comble la limitation notée plus tôt (une seule graisse
   forçait un gras simulé par le navigateur pour tous les usages 500-700
   du site, ex. boutons/labels). Les fichiers sources `WorkSans-Medium.ttf`/
   `WorkSans-SemiBold.ttf` sont nommés en interne comme des familles
   distinctes ("Work Sans Medium"/"Work Sans SemiBold", sous-famille
   "Regular") plutôt que des graisses de la famille "Work Sans" — sans
   incidence ici : c'est la déclaration @font-face ci-dessous (family +
   font-weight) qui fait foi pour le navigateur, pas le nom interne du
   fichier. -------------------------------------------------------------------------- */
@font-face {
  font-family: 'The Seasons';
  src: url('/wp-content/themes/pixence-child/assets/fonts/The%20Seasons%20Regular.woff2') format('woff2'),
       url('/wp-content/themes/pixence-child/assets/fonts/The%20Seasons%20Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  src: url('/wp-content/themes/pixence-child/assets/fonts/WorkSans-Light.woff2') format('woff2'),
       url('/wp-content/themes/pixence-child/assets/fonts/WorkSans-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  src: url('/wp-content/themes/pixence-child/assets/fonts/WorkSans-Medium.woff2') format('woff2'),
       url('/wp-content/themes/pixence-child/assets/fonts/WorkSans-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  src: url('/wp-content/themes/pixence-child/assets/fonts/WorkSans-SemiBold.woff2') format('woff2'),
       url('/wp-content/themes/pixence-child/assets/fonts/WorkSans-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  src: url('/wp-content/themes/pixence-child/assets/fonts/WorkSans-Bold.woff2') format('woff2'),
       url('/wp-content/themes/pixence-child/assets/fonts/WorkSans-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, li,
figure, figcaption,
blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
}

ul[class],
ol[class] {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHIE DE BASE
   -------------------------------------------------------------------------- */
body {
  font-family: var(--sm-font-body);
  font-weight: 300; /* Work Sans Light — équivalent du DIN Next Light d'origine */
  font-size: var(--sm-fs-body);
  line-height: var(--sm-line-height);
  color: var(--sm-color-text);
  background-color: var(--sm-color-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sm-font-heading);
  font-weight: 400; /* corrigé le 05/08/2026 : "normal" confirmé sur toutes
    les variables --font_0 à --font_6 du CSS source, et sur les instances
    réelles inspectées (h1/h2 des titres, voir style-sm.css section 1) */
  line-height: 1.2;
  color: var(--sm-color-text);
}

/* Correction du 05/08/2026 : titres/sous-titres (h2 à h6) en doré sur tout
   le site — h1 reste noir par défaut (le Hero l'override en blanc). */
h2, h3, h4, h5, h6 {
  color: var(--sm-color-accent);
}

/* Tailles mobile-first : réduites par défaut, remontées en desktop */
h1 { font-size: 34px; }
h2 { font-size: 30px; }
h3 { font-size: 22px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
/* ✅ 20/08/2026 : h6 avait la même valeur à toutes les largeurs (la variable).
   Maintenant que --sm-fs-h6 vaut 18px, le laisser tel quel donnerait h5 = h6
   en mobile (18px des deux côtés). La valeur mobile de h6 est donc figée à
   17px — exactement ce qu'elle rendait avant cette passe : aucune réduction
   responsive n'est inventée ici, seule la valeur desktop change. */
h6 { font-size: 17px; }

/* Réductions responsive du projet CONSERVÉES telles quelles (34/30/22/20/18/17
   sous 1024px) : seules les valeurs desktop passent à la nouvelle échelle.
   Hiérarchie strictement décroissante des deux côtés du breakpoint. */
@media (min-width: 1024px) {
  h1 { font-size: var(--sm-fs-h1); }
  h2 { font-size: var(--sm-fs-h2); }
  h3 { font-size: var(--sm-fs-h3); }
  h4 { font-size: var(--sm-fs-h4); }
  h5 { font-size: var(--sm-fs-h5); }
  h6 { font-size: var(--sm-fs-h6); }
}

/* ✅ Base paragraphe globale posée le 20/08/2026 (consigne client) : 18px,
   Work Sans (@font-face local, voir section 1), graisse 300. La famille et la
   graisse étaient déjà héritées de `body` — elles sont écrites ici
   explicitement pour que la règle de référence soit lisible d'un bloc, sans
   changer le rendu. --sm-fs-body (16px) reste la taille du `body` et des
   composants qui s'y réfèrent nommément (liens de footer, extraits de cartes
   Actu…), il n'est pas touché. */
p {
  margin-bottom: var(--sm-space-sm);
  font-family: var(--sm-font-body);
  font-weight: 300;
  font-size: 18px;
}

/* --------------------------------------------------------------------------
   4. LAYOUT — utilitaires communs
   -------------------------------------------------------------------------- */
.sm-container {
  width: 100%;
  max-width: var(--sm-max-width);
  margin-inline: auto;
  padding-inline: var(--sm-gutter);
}

/* ✅ Corrigé le 19/08/2026 (doc "Structure CSS globale") : padding-block
   flat 53px (--sm-padding-section-v) — remplace l'ancien padding
   responsive var(--sm-space-lg)/var(--sm-space-xl) (48px mobile/80px
   desktop). S'applique à .sm-section sur TOUTES les pages (classe
   générique, pas seulement la homepage — contrairement à
   .sm-section__header/.sm-row, qui restent scopés au test homepage). */
.sm-section {
  margin: 0;
  padding-block: var(--sm-padding-section-v);
}

.sm-section--alt {
  background-color: var(--sm-color-bg-alt);
}

/* ✅ Ajouté le 19/08/2026 : structure globale main/section/row — TEST sur
   la homepage uniquement (index-sm.html), les autres pages continuent
   d'utiliser .sm-container (max-width:980px, inchangé, ne pas toucher).
   `main` cible l'élément sémantique fourni par le thème parent
   WordPress (twentytwentyfive) qui enveloppe le contenu de chaque page
   collé depuis ce fichier — pas de balise <main> dans index-sm.html
   lui-même (le PHP du thème n'est pas modifié, cf. PROJET_TEMPLATE.md
   règle 2). Les paddings s'accumulent par niveau (main + section__header,
   ou main + row) : c'est la structure demandée, pas un empilement
   accidentel. Voir CLAUDE_CONTEXT.md pour le détail des sections
   restructurées et le raisonnement derrière chaque .sm-row--*. */
main {
  padding-inline: var(--sm-padding-main);
}

.sm-section__header {
  padding-inline: var(--sm-padding-header);
}

.sm-row {
  padding-inline: var(--sm-padding-row);
}

/* ✅ Ajouté le 20/08/2026 : même logique que .sm-row + .sm-row ci-dessous,
   appliquée entre l'en-tête de section et sa première row. Le rythme vertical
   standard d'une section devient donc header → 24px → row → 24px → row, sans
   qu'aucune marge ne soit posée sur un titre. */
.sm-section__header + .sm-row {
  margin-top: var(--sm-gap);
}

/* ✅ Ajouté le 19/08/2026 (doc "Structure CSS globale") : espace vertical
   entre plusieurs .sm-row consécutifs dans une même section — sans effet
   quand une section n'a qu'un seul .sm-row (cas le plus courant
   actuellement, voir CLAUDE_CONTEXT.md). */
.sm-row + .sm-row {
  margin-top: var(--sm-gap);
}

.sm-row--single {
  display: block;
}

/* ✅ Corrigé le 19/08/2026 (doc "Structure CSS globale") : gap 24px
   (--sm-gap) — remplace var(--sm-space-lg) (48px), qui reste la valeur
   par défaut ailleurs sur le site (composants hors système .sm-row). */
.sm-row--two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sm-gap);
}

@media (min-width: 640px) {
  .sm-row--two-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sm-row--three-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sm-gap);
}

@media (min-width: 768px) {
  .sm-row--three-col {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   5. BOUTONS
   -------------------------------------------------------------------------- */
/* ⚠️ Audit complet du 18/08/2026 (tous les boutons du site, comparés aux
   8 fichiers source F12) : la note du 05/08/2026 ci-dessous ("16px/bold,
   pas de letter-spacing") était incomplète — vérifiée sur UN SEUL bouton
   générique, pas sur chaque instance réelle. En réalité le site utilise
   2 familles de boutons "pilule", chacune confirmée à l'identique sur
   TOUTES ses instances (13 boutons vérifiés au total sur Homepage/Nos
   Formules/Entreprises/Planning) :
   - Famille A `StylableButton2545352419` (Je m'inscris, Je fais un
     cadeau, Demander un devis ×3, Voir les formules ×3) → voir
     `.sm-btn--primary` ci-dessous pour les valeurs propres à cette
     famille (15px, letter-spacing 0.05em, survol sauge).
   - Famille B `wixui-button` générique (Télécharger le planning 2026,
     Télécharger nos formules, S'abonner) → 16px, pas de letter-spacing,
     survol fond noir/texte inchangé — voir `.sm-btn--sage` et
     `.sm-btn--newsletter`.
   Points COMMUNS confirmés aux 2 familles, désormais dans la base :
   Cormorant Garamond semibold (PAS Work Sans — jamais vérifié avant ce
   jour), 700, `border-radius: 0` (coins carrés — aucune des 13 règles
   CSS source, ni le composant de base, ne définit de rayon ; pas
   `--sm-radius`/4px comme construit initialement).
   ⚠️ Boîte : les 7 instances Famille A ont une taille FIXE identique
   (199×36px sur Nos Formules/Entreprises, 184×33px sur 2 des 3 cartes
   Offres homepage) quel que soit le texte du bouton (13 à 18 caractères)
   — pas une boîte qui s'ajuste au contenu. Non reproduit littéralement en
   `width`/`height` fixes : ça figerait la largeur pour un texte plus
   long en cas de modification future du site. Le padding ci-dessous est
   calibré pour approcher visuellement cette même densité (~36px de haut)
   en restant auto-adapté au texte. */
.sm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 28px;
  font-family: var(--sm-font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4em;
  border-radius: 0;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ✅ Corrigé le 18/08/2026 : famille A (voir note ci-dessus) — 15px (pas
   16), letter-spacing 0.05em (pas 0). */
.sm-btn--primary {
  background-color: var(--sm-color-accent);
  color: var(--sm-color-white);
  border-color: var(--sm-color-accent);
  font-size: 15px;
  letter-spacing: 0.05em;
}

/* ✅ Corrigé le 18/08/2026 : au survol le fond passe bien au blanc
   (confirmé), mais le texte passe au vert SAUGE `rgb(93,114,96)` — pas au
   doré comme construit initialement — et la bordure au doré SECONDAIRE
   `rgb(173,133,66)` (`--sm-color-accent-gold`), pas au doré principal
   (invariant au survol dans la version précédente). */
.sm-btn--primary:hover {
  background-color: var(--sm-color-white);
  color: var(--sm-color-sage);
  border-color: var(--sm-color-accent-gold);
}

/* ⚠️ Aucune instance de cette variante n'a été retrouvée dans le HTML du
   projet ni dans aucun des 8 fichiers source F12 audités le 18/08/2026 —
   classe orpheline, non vérifiable contre une source réelle, laissée
   telle quelle par prudence. */
.sm-btn--secondary {
  background-color: transparent;
  color: var(--sm-color-accent);
  border-color: var(--sm-color-accent);
}

.sm-btn--secondary:hover {
  background-color: var(--sm-color-accent);
  color: var(--sm-color-white);
}

/* Ajouté le 06/08/2026 via source-homepage.html (styles calculés) : le
   bouton "Télécharger le planning 2026" a une paire de couleurs distincte
   confirmée par le navigateur — fond sage + texte blanc — sur la section
   Planning au fond doré (voir section 18).
   ✅ Corrigé le 18/08/2026 : ce bouton appartient à la famille B (voir note
   plus haut), pas à la famille A — même comportement de survol que
   `.sm-btn--newsletter` (section 17) : fond NOIR, texte qui RESTE blanc
   (pas blanc/sauge comme `.sm-btn--primary`), pas de bordure. Le CTA
   "Télécharger nos formules" (page Nos Formules) est confirmé être le
   MÊME composant `wixui-button` générique (famille B) mais avec un fond
   DORÉ (pas sage) — pas la même classe `.sm-btn--sage` (couleur
   incompatible), override dédié posé sur `.sm-formules-intro .sm-btn`
   (section 23) plutôt qu'une nouvelle variante `.sm-btn--*`. */
.sm-btn--sage {
  background-color: var(--sm-color-sage);
  color: var(--sm-color-white);
  border-color: var(--sm-color-sage);
}

.sm-btn--sage:hover {
  background-color: #000000;
  color: var(--sm-color-white);
  border-color: #000000;
}

/* --------------------------------------------------------------------------
   6. HEADER & NAVIGATION
   ✅ Reconstruite le 09/08/2026 pixel perfect depuis source-homepage.html /
   source-contact.html (styles calculés Playwright, composant global
   #SITE_HEADER identique sur toutes les pages — confirmé par comparaison
   directe des deux captures). Écarts majeurs trouvés par rapport à la
   version précédente (jamais vérifiée contre la source) :
   - 3 rangées empilées, pas une seule barre : (1) barre utilitaire fine
     alignée à droite « I mon compte  I réserver mes séances » (gris atténué,
     16px, gras, police corps) ; (2) logo centré, en grand (asset réel
     3864c6_1b75cbe5...png, ~277px de hauteur totale de header confirmée) ;
     (3) navigation centrée, police de TITRE (Cormorant Garamond) 21px, PAS
     la petite police corps majuscule utilisée jusqu'ici.
   - AUCUN bouton CTA ni AUCUNE icône réseau sociale dans le header sur le
     site réel (recherche exhaustive dans source-contact.html) — supprimés
     (ils n'existaient que par supposition, jamais vérifiés).
   - Page courante confirmée en vert sauge `--sm-color-sage` (pas gold) sur
     le lien de nav correspondant — day l'attribut `aria-current="page"`
     WordPress standard, à poser côté page ou via site.js.
   - Fond du header : blanc semi-transparent `rgba(255,255,255,0.86)`
     (confirmé sur `screenWidthContainerBg`), pas blanc opaque avec bordure.
   - « I mon compte » pointe vers la boutique externe
     (https://boutique.studio-m.re/mon-compte/, hors périmètre de scraping
     mais lien de nav réel à conserver tel quel) ; « I réserver mes séances »
     pointe vers /réservation-cours (confirmé, cohérent avec l'ancien CTA).

   ✅ Audit du 17/08/2026 (source-hp.html/.css/.js fournis par le client,
   DOM + CSS bruts du site réel capturés F12 desktop) — le préfixe « I »
   déjà noté ci-dessus le 09/08/2026 n'avait en réalité jamais été codé
   dans header-sm.php (seul le commentaire le mentionnait) : corrigé.
   Autres écarts trouvés et corrigés :
   - Logo : le fichier source contient une marge transparente, mais le site
     réel affiche une image déjà RECADRÉE côté serveur (crop
     x:698,y:54,w:4385,h:2574 sur 5692×3200px d'origine, confirmé par le
     srcset Wix), rendue à 311×183px desktop (confirmé par les attributs
     width/height réels) — pas juste agrandie comme avant. Nouvel asset
     recadré `3864c6_1b75cbe5...-header.png`, hauteur CSS 90/150px →
     110/183px (183px desktop confirmé, 110px mobile extrapolé au même
     ratio que l'ancienne valeur, la source F12 étant desktop uniquement).
   - Survol des liens de nav : confirmé DISTINCT de la couleur "page
     courante" (`--txth: color_43` = sauge clair #849C92 au survol, vs
     `--txts: color_41` = sauge #5D7260 sur la page active) — les deux
     étaient confondus sur la même couleur sauge jusqu'ici. Nav hover passé
     à `--sm-color-accent-light`.
   - Barre utilitaire : taille confirmée 16px (inline `style="font-size:
     16px"` sur le composant réel) — utilisait par erreur `--sm-fs-small`
     (12px, variable d'échelle générique jamais vérifiée pour ce cas précis).
   - Confirmé inchangé : fond `rgba(255,255,255,0.86)` (`--alpha-bg:0.86`
     sur `--bg:var(--color_11)`), position sticky, 8 items de nav
     (Accueil/Le Studio/Planning/Les Cours/Nos Formules/Entreprises/
     Contact/Actu) dans le même ordre avec les mêmes hrefs, police nav
     21px, couleur nav par défaut dorée `--txt:204,162,82`, aucun CTA ni
     icône sociale dans le header réel.
   -------------------------------------------------------------------------- */
/* ✅ Corrigé le 19/08/2026 (3 corrections demandées par le client) :
   - padding-bottom 54px ajouté (espace sous la nav avant le contenu de
     page, demande explicite).
   - transition: transform ajoutée pour le sticky intelligent piloté par
     site.js (classe .is-header-hidden ci-dessous — cache le header au
     scroll vers le bas, le fait réapparaître au scroll vers le haut). */
.sm-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--sm-space-sm);
  padding: var(--sm-space-sm) var(--sm-gutter);
  padding-bottom: 54px;
  background-color: rgba(255, 255, 255, 0.86);
  transition: transform 0.3s ease;
}

/* ✅ Ajouté le 16/09/2026 (demande client) : le padding bas du header passe
   de 54px à 24px en MOBILE — il prenait trop de place sur téléphone.

   Seuil à 1023.98px, complément exact du `@media (min-width: 1024px)` du
   header plus bas : c'est ce breakpoint qui fait basculer le header en mode
   desktop (3 rangées empilées + hamburger en dessous, logo/nav sur une ligne
   au-dessus). Le padding de 54px validé par le client est donc intégralement
   conservé sur la version desktop, celle où la navigation est affichée. */
@media (max-width: 1023.98px) {
  .sm-header {
    padding-bottom: var(--sm-space-md);
  }
}

.sm-header.is-scrolled {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* Pilotée par site.js (initHeaderScrollState) : ajoutée au scroll vers le
   bas passé le seuil de 100px, retirée au scroll vers le haut ou tant que
   scrollY <= 100px. */
.sm-header.is-header-hidden {
  transform: translateY(-100%);
}

/* ✅ Corrigé le 19/08/2026 : align-self:flex-end (au lieu de l'étirement
   pleine largeur hérité du parent flex-column .sm-header, align-items par
   défaut = stretch) — la barre se réduit à la largeur de son contenu et se
   cale à droite, plutôt que de bloquer toute la largeur du header et
   d'empêcher le logo de reprendre sa taille/position naturelle juste
   en-dessous. position:relative explicite pour garantir qu'elle reste dans
   le flux normal (jamais absolute/fixed, qui la sortirait du flux et
   casserait l'empilement des 3 rangées du header). */
/* Sous 1024px la barre reste DANS le flux : le bouton hamburger occupe déjà
   le coin supérieur droit en absolu, la passer en absolu ici la ferait
   passer dessous. Le `padding-right: 48px` lui réserve la place du
   hamburger. Le passage hors flux est fait au breakpoint desktop, plus bas. */
.sm-header-utility {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  align-self: flex-end;
  position: relative;
  gap: var(--sm-space-sm);
  padding-right: 48px; /* laisse la place au bouton hamburger absolu (mobile) */
  font-family: var(--sm-font-body);
  font-weight: 700;
  font-size: 16px;
  color: var(--sm-color-muted);
}

@media (min-width: 1024px) {
  .sm-header-utility {
    padding-right: 0;
  }
}

.sm-header-utility a:hover {
  color: var(--sm-color-accent);
}

.sm-header-brand {
  text-align: center;
}

/* ✅ Corrigé le 17/08/2026 via source-hp.html/.css (DOM + CSS bruts du site
   réel, capture F12 desktop) : le fichier source (3864c6_1b75cbe5...png)
   contient une marge transparente autour du dessin visible, mais le site
   réel ne l'affiche jamais telle quelle — Wix sert une image déjà recadrée
   côté serveur (crop x:698,y:54,w:4385,h:2574 sur les 5692×3200px
   d'origine, confirmé dans le srcset), affichée à 311×183px desktop
   (confirmé par les attributs width/height réels de l'<img>). Asset
   recadré à l'identique et enregistré séparément
   (3864c6_1b75cbe5...-header.png) plutôt que d'inventer une marge à l'oeil
   comme avant. Taille mobile non capturée par la source (F12 desktop
   uniquement) — extrapolée à partir du même ratio que l'ancienne valeur
   (90/150 ≈ 0.6 × 183 ≈ 110px). */
.sm-logo img {
  height: 110px;
  width: auto;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .sm-logo img {
    height: 183px;
  }
}

.sm-nav {
  display: none;
}

.sm-nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sm-space-md);
  font-family: var(--sm-font-heading);
  font-size: 21px;
}

.sm-nav-list a {
  color: var(--sm-color-accent);
}

/* ✅ Corrigé le 17/08/2026 via source-hp.css : hover et page courante sont
   2 couleurs distinctes côté source (--txth: color_43 vert sauge clair
   #849C92 au survol, --txts: color_41 vert sauge #5D7260 sur la page
   sélectionnée) — l'implémentation précédente les confondait sur la même
   couleur sauge. */
.sm-nav-list a:hover {
  color: var(--sm-color-accent-light);
}

.sm-nav-list a[aria-current="page"],
.sm-nav-list a.is-active {
  color: var(--sm-color-sage);
}

/* Menu mobile — bouton positionné en absolu au-dessus de la barre
   utilitaire (coin haut-droit du header), pour ne pas dépendre de l'ordre
   de flux des 3 rangées empilées ci-dessus. */
.sm-nav-toggle {
  position: absolute;
  top: var(--sm-space-sm);
  right: var(--sm-gutter);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}

.sm-nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--sm-color-text);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

/* ✅ Ajouté le 16/09/2026 (demande client, constaté à 416px) : quand le menu
   est ouvert, le bouton devient une croix et redevient cliquable.

   Le bug : `.sm-nav-mobile` (z-index 99) et `.sm-nav-toggle` (z-index auto)
   vivent tous les deux dans le contexte d'empilement de `.sm-header`
   (sticky, z-index 100). Le menu ouvert passait donc PAR-DESSUS le bouton —
   vérifié par `elementFromPoint` au centre du bouton, qui renvoyait
   `sm-nav-mobile` : plus aucun moyen de refermer le menu.

   On garde UN SEUL bouton qui change d'icône, piloté par l'attribut
   `aria-expanded` que le JS pose déjà — pas de second élément à gérer.
   Le bouton ne bouge pas : il reste à `top: var(--sm-space-sm)` /
   `right: var(--sm-gutter)` (20px sous 768px, soit la même valeur que
   `--sm-padding-main`), donc aligné sur le padding de la page.

   Les 3 barres font 2px avec 4px d'écart : leurs centres sont à 1 / 7 / 13px
   du haut de la pile. Les décalages de ±6px les ramènent donc exactement sur
   la barre du milieu avant la rotation. */
.sm-nav-toggle[aria-expanded="true"] {
  z-index: 100;
}

.sm-nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.sm-nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.sm-nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.sm-nav-mobile {
  position: fixed;
  inset: 0 0 0 0;
  background-color: var(--sm-color-bg);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  padding: var(--sm-space-xl) var(--sm-gutter) var(--sm-space-lg);
  z-index: 99;
}

.sm-nav-mobile.is-open {
  transform: translateX(0);
}

.sm-nav-mobile .sm-nav-list {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--sm-space-md);
  font-size: var(--sm-fs-h5);
}

@media (min-width: 1024px) {
  .sm-header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    /* padding-top/-bottom séparés (au lieu de padding-block) le 19/08/2026 :
       padding-block écrasait le padding-bottom:54px de la règle de base
       (même propriété physique, cascade en cours de fichier) — le
       padding-bottom demandé par le client doit rester 54px aussi en
       desktop, pas retomber à --sm-space-md (24px). */
    padding-top: var(--sm-space-md);
    padding-bottom: 54px;
  }

  /* ✅ Corrigé le 20/08/2026 (demande client) : la barre utilitaire sort du
     flux. Même réduite à la largeur de son contenu (`flex-basis: auto` +
     `margin-left: auto`, correctif du 19/08), elle restait un item du flex
     et réservait donc une LIGNE entière au-dessus du logo — les 2 items
     suivants ont `flex-basis: 100%` et passaient forcément à la ligne. Le
     logo et la navigation ne pouvaient pas remonter.

     En `position: absolute`, elle ne participe plus au layout vertical : le
     logo devient le premier élément de la première ligne et l'ensemble
     remonte de lui-même. Aucune marge négative, aucun `translateY`, aucune
     hauteur imposée, aucun padding global retouché.

     Référentiel : `.sm-header` lui-même, déjà `position: sticky` — un
     élément positionné, donc bloc conteneur des descendants absolus. Rien à
     ajouter dessus.

     `top` et `right` reprennent exactement le padding du header
     (`--sm-space-md` en haut, `--sm-gutter` sur les côtés en desktop) :
     la barre se cale donc au coin supérieur droit de la zone de contenu,
     à la même place qu'avant, mais sans occuper de ligne.

     Les propriétés d'item flex (`order`, `flex-basis`, `align-self`,
     `margin-left`) sont retirées : elles n'ont plus de sens sur un élément
     hors flux. */
  .sm-header-utility {
    position: absolute;
    top: var(--sm-space-md);
    right: var(--sm-gutter);
  }

  .sm-header-brand {
    order: 2;
    flex-basis: 100%;
  }

  .sm-nav {
    display: block;
    order: 3;
    flex-basis: 100%;
  }

  .sm-nav-toggle,
  .sm-nav-mobile {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   7. FOOTER
   ✅ Reconstruite le 09/08/2026 pixel perfect depuis source-contact.html
   (composant global #SITE_FOOTER, 648px de hauteur, texte intégral vérifié
   exhaustivement — aucun texte caché manqué). Écarts majeurs trouvés par
   rapport à la version précédente (jamais vérifiée contre la source) :
   - Fond GRIS TRÈS CLAIR `rgb(250,250,251)` avec texte sombre — PAS un fond
     noir avec texte blanc comme construit initialement (jamais vérifié).
   - Adresse réelle : seulement « Saint-Paul / La Réunion » (2 lignes), SANS
     rue ni nom de résidence — « Résidence Tantine Zaza / 142 rue Marius et
     Ary Leblond / 97460 Saint-Paul, Centre-ville » n'existe PAS dans le
     footer réel (recherche exhaustive : ni "Marius", ni "Tantine Zaza", ni
     "Centre-ville" dans le DOM de la page).
   - AUCUNE mention des horaires d'ouverture dans le footer (ni "horaire",
     ni "8h00", ni "lundi" trouvés) — seulement adresse + téléphone + e-mail.
   - AUCUN titre de colonne ("Nous Contacter", "Nos Horaires", "Le Studio'M",
     "Disciplines") : les 3 colonnes n'ont pas d'en-tête, juste les listes.
   - AUCUN formulaire newsletter dans le footer réel (confirmé absent aussi
     bien sur la homepage que sur la page Contact) — la classe
     .sm-newsletter-form et son bandeau ont été supprimés, n'étaient
     rattachés à rien de réel.
   - AUCUN copyright "© Studio M — Tous droits réservés" trouvé dans le DOM.
   - 3 colonnes réelles : (1) logo + Saint-Paul/La Réunion + tél + e-mail,
     (2) navigation footer + icônes sociales, (3) liste Disciplines +
     bouton pilule "Réserver une séance d'essai" (bordure dorée, fond
     transparent, radius 50px — vers la boutique externe, lien réel
     confirmé : https://boutique.studio-m.re/product/seance-essai/).
   - ⚠️ 4 des 8 liens de navigation du footer pointent réellement vers la
     page d'accueil côté source (« le studio », « les offres entreprises »,
     « formules & tarifs », « contact » — bug de configuration du menu sur
     le site Wix d'origine, seuls « les cours », « le planning »,
     « l'actualité » et « réserver ma séance » pointent au bon endroit).
     Corrigés vers leur page évidente (mêmes URLs que le header, déjà
     vérifiées) plutôt que reproduits cassés — même logique que la
     correction du CTA "J'ai envie de tester" sur la page Les Cours.
   - Une barre fine supplémentaire avec les 4 icônes sociales seules,
     centrées, apparaît juste AVANT le footer sur le site réel (composant
     séparé de #SITE_FOOTER, mais présent sur la capture) — reproduite en
     `.sm-footer-social-bar`.

   ✅ Réaudité le 17/08/2026 via source-hp.html/.css (DOM + CSS bruts F12,
   `#SITE_FOOTER` — voir le commentaire détaillé dans footer-sm.php pour la
   méthode complète). Fond gris clair, 3 colonnes, absence de newsletter et
   de titres de colonne tous reconfirmés inchangés (2e confirmation
   indépendante). Écarts trouvés et corrigés ici :
   - Ratio réel des 3 colonnes 296px/291px/393px (repris en `fr`), pas des
     tiers égaux.
   - Texte adresse/paragraphes colonne 1 confirmé 20px (pas 18px).
   - Logo confirmé 335×189px desktop (`#comp-lzb6sprv`, fichier original
     non recadré) — bien plus grand que les 80px codés jusqu'ici, jamais
     vérifiés en taille réelle. 189px desktop / 113px mobile extrapolé
     (même ratio que le logo header, aucune donnée mobile côté source).
   - Couleur de survol des liens confirmée doré secondaire `#AD8542`
     (`--txth:173,133,66` sur les composants bouton nav réels), pas le
     doré principal `--sm-color-accent`.
   - Icônes sociales colonne 2 confirmées 29px (`--item-size:29px` sur le
     composant réel) — override scopé à la colonne 2 uniquement, la classe
     partagée `.sm-social-icons` reste à 20px (taille de la barre fine
     `.sm-footer-social-bar`, non retrouvée dans ce DOM source homepage,
     confirmée séparément le 09/08/2026 via Playwright sur la page Contact).
   -------------------------------------------------------------------------- */
.sm-footer-social-bar {
  display: flex;
  justify-content: center;
  padding-block: var(--sm-space-md);
}

.sm-footer {
  background-color: rgb(250, 250, 251);
  color: var(--sm-color-text);
  padding-block: var(--sm-space-xl);
  /* ✅ 20/08/2026 : valeur exacte du site d'origine, fournie par le client. */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
}

.sm-footer a:hover {
  color: var(--sm-color-accent-gold);
}

.sm-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sm-space-lg);
  text-align: center;
}

@media (min-width: 768px) {
  .sm-footer-grid {
    grid-template-columns: 296fr 291fr 393fr;
    text-align: left;
  }
}

/* ✅ Ajouté le 20/08/2026 (demande client) : plus d'air horizontal entre les
   3 colonnes du footer. Exception LOCALE — `--sm-gap` et les grilles
   `.sm-row--two-col` / `--three-col` du reste du site ne bougent pas.
   Seul le `column-gap` change : le `row-gap` reste à --sm-space-lg (48px),
   donc l'empilement mobile est strictement identique.

   La valeur monte par palier parce que le conteneur est borné à 980px : à
   768px il ne reste que 688px pour 3 colonnes, un gap trop large y
   étranglerait le texte.

   `minmax(312px, 296fr)` sur la 1re colonne (≥1024px seulement, là où la
   place existe) : c'est la règle parent qui empêchait le logo d'atteindre sa
   largeur cible — la colonne ne peut plus descendre sous la largeur du logo.
   Le rapport 296:291:393 relevé sur la source est conservé comme maximum. */
@media (min-width: 768px) {
  .sm-footer-grid {
    column-gap: 64px;
  }
}

@media (min-width: 1024px) {
  .sm-footer-grid {
    column-gap: 80px;
    grid-template-columns: minmax(312px, 296fr) 291fr 393fr;
  }
}

.sm-footer-col address,
.sm-footer-col p {
  font-size: 20px;
  color: var(--sm-color-text);
}

/* ✅ Corrigé le 20/08/2026 (demande client) : le logo était écrasé.
   Avant, il était piloté par `height: 189px; width: auto`. Sa largeur
   naturelle à cette hauteur est 336px (asset 5692×3200, ratio 1.7788), soit
   plus que la colonne (255px) : la règle globale `img { max-width: 100% }`
   rabotait donc la largeur pendant que la hauteur restait bloquée à 189px.
   Résultat mesuré : ratio 1.3488 en desktop et 0.946 à 768px, au lieu de
   1.7788 — une déformation horizontale de 24 % à 47 %.

   Correctif : c'est désormais la LARGEUR qui pilote et la hauteur qui suit.
   Avec `height: auto`, le ratio ne peut plus casser, quelle que soit la
   place disponible ; `max-width: 100%` garde le garde-fou anti-débordement.
   312px = la largeur rendue du logo du header (110/183px de haut × ratio
   1.7036 de l'asset recadré du header) — les deux logos ont donc la même
   emprise horizontale.
   `object-fit` est inutile ici : sans hauteur imposée, il n'y a plus rien à
   ajuster. Asset inchangé. */
.sm-footer-logo {
  width: 201px; /* = la hauteur 113px précédente, à ratio conservé */
  height: auto;
  max-width: 100%;
  margin-inline: auto;
  margin-bottom: var(--sm-space-sm);
}

@media (min-width: 768px) {
  .sm-footer-logo {
    width: 312px;
    margin-inline: 0;
  }
}

.sm-footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--sm-space-xs);
  font-size: var(--sm-fs-body);
  color: var(--sm-color-muted);
}

.sm-footer-links a {
  color: var(--sm-color-muted);
}

.sm-footer-col .sm-social-icons {
  justify-content: center;
  margin-top: var(--sm-space-md);
}

@media (min-width: 768px) {
  .sm-footer-col .sm-social-icons {
    justify-content: flex-start;
  }
}

.sm-social-icons {
  display: flex;
  align-items: center;
  gap: var(--sm-space-sm);
  color: var(--sm-color-muted);
}

.sm-social-icons a:hover {
  color: var(--sm-color-accent);
}

.sm-social-icons img,
.sm-social-icons svg {
  width: 20px;
  height: 20px;
}

/* Confirmé 29px le 17/08/2026 (`--item-size:29px` sur le composant réel de
   la colonne 2 du footer, `comp-kelao772`) — override scopé à cette seule
   colonne, la classe partagée `.sm-social-icons` reste à 20px ailleurs. */
.sm-footer-col .sm-social-icons img,
.sm-footer-col .sm-social-icons svg {
  width: 29px;
  height: 29px;
}

/* Icône calendrier + survol confirmés le 17/08/2026 via source-hp.css
   (`--fnt:...14px...`, `:hover{background:...rgb(173,133,66)...;
   .label{color:#fff}}`) — absents jusqu'ici (bouton sans icône ni état
   :hover), taille de texte corrigée 14px (pas `--sm-fs-small`/12px). */
.sm-footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  margin-top: var(--sm-space-md);
  padding: 10px 24px;
  border: 1px solid var(--sm-color-accent);
  border-radius: 50px;
  font-family: var(--sm-font-body);
  font-size: 14px;
  /* ✅ Précisé le 18/08/2026 (audit boutons) : 400 confirmé (`font-weight:
     400` sur le composant réel, `#comp-kfdjqgnf`) — hérite sinon du 300
     (Work Sans Light) du `body`, jamais vérifié pour ce bouton précis. */
  font-weight: 400;
  color: var(--sm-color-accent-gold);
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sm-footer-cta svg {
  flex-shrink: 0;
}

.sm-footer-cta:hover {
  background-color: var(--sm-color-accent-gold);
  border-color: transparent;
  color: var(--sm-color-white);
}

.sm-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sm-space-sm);
  margin-top: var(--sm-space-lg);
  padding-top: var(--sm-space-md);
  border-top: 1px solid var(--sm-color-border);
  font-size: 15px;
  color: var(--sm-color-muted);
}

@media (min-width: 768px) {
  .sm-footer-bottom {
    justify-content: flex-end;
  }
}

/* --------------------------------------------------------------------------
   9. HOMEPAGE — HERO
   Diaporama plein cadre (4 photos, voir index-sm.html). Hauteur en vh
   (s'adapte au viewport) plutôt qu'en px fixe, conformément à la règle
   PROJET_TEMPLATE.md n°6 ("pas de hauteurs fixes").
   ✅ Corrigé le 17/08/2026 via source-hp.html/.css : overlay dégradé noir
   supprimé (--bg-overlay-color:transparent, --bg-gradient:none confirmés
   sur la section réelle — jamais vérifié avant, ajouté par hypothèse de
   lisibilité). Flèches précédent/suivant ajoutées (--nav-button-display:
   block confirmé, en plus des points déjà en place).
   -------------------------------------------------------------------------- */
/* ✅ Renommée .sm-hero → .sm-section--hero le 19/08/2026 (restructuration
   homepage, convention section.sm-section.sm-section--NAME). Exempte de
   la nouvelle structure main/section__header/row : le Hero reste full
   bleed, sans padding (demande explicite). */
.sm-section--hero {
  position: relative;
  display: flex;
  align-items: center;
  /* ✅ 20/08/2026 : l'alignement à gauche (posé le 18/08 d'après le rendu
     réel) ne valait que ≥768px — en dessous, l'étiquette repassait au centre
     et masquait le visage du sujet (vérifié par capture Playwright). Il
     s'applique maintenant à toutes les largeurs : même composition partout,
     aucune valeur nouvelle, le 8% de retrait est celui déjà validé. */
  justify-content: flex-start;
  padding-inline-start: 8%;
  min-height: 60vh;
  padding-block: var(--sm-space-xl);
  overflow: hidden;
  text-align: center;
  color: var(--sm-color-white);
}

.sm-hero-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.sm-hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.sm-hero-slide.is-active {
  opacity: 1;
}

/* Tailles vérifiées le 05/08/2026 sur le CSS source : H1 réel 54px
   (line-height 0.8em, très serré) — valeur mobile extrapolée (non capturée
   côté source, qui ne fournit que la valeur desktop), même logique que le
   reste de l'échelle mobile-first.
   ✅ Couleur corrigée le 06/08/2026 via source-homepage.html (styles
   calculés Playwright, confirmé 3x indépendamment sur les 3 mots du titre) :
   le H1 du Hero est DORÉ rgb(204,162,82), pas blanc comme on l'avait
   supposé — le blanc n'était qu'une hypothèse de lisibilité jamais vérifiée
   contre la source. Le paragraphe d'accroche ("Découvrez une nouvelle
   approche...") n'est en fait PAS dans le Hero : sur le site source, Hero
   et Nos valeurs sont la MÊME section Wix, et ce paragraphe se trouve sous
   le diaporama, sur fond blanc, en texte noir — déplacé dans la section
   Nos valeurs (voir section 10, .sm-values-intro).
   ✅ Corrigé le 17/08/2026 via source-hp.html/.css, validé par le client :
   le H1 est en réalité encadré dans le même badge circulaire décoratif que
   les heros des pages intérieures (asset "Sans titre-1_edited.png", déjà
   utilisé par .sm-studio-hero-badge et consorts), et sa police réelle est
   "Hellstand" (police script propriétaire Wix, confirmée par le
   font-family exact sur les 3 lignes du titre — différente de "The
   Seasons"/Cormorant Garamond utilisée pour le reste des titres du site) —
   même famille que les titres d'articles Actu, déjà approximée par Dancing
   Script (--sm-font-script). .sm-hero-inner/.sm-hero-title remplacés par
   .sm-hero-badge/.sm-hero-badge-title, même motif que .sm-studio-hero-badge
   mais dimensionné plus grand (badge source ~383px vs ~320px desktop sur
   les pages intérieures) pour accueillir les 3 lignes du titre principal
   du site. */

/* ✅ Ajouté le 20/08/2026 : VARIANTE HERO du composant étiquette partagé.
   Le hero réutilise tel quel .sm-offers-stamp-wrapper / .sm-offers-stamp /
   .sm-offers-stamp-text (section 13) — ce modifieur ne porte QUE ce qui
   diffère : le positionnement et la taille dans le hero. Aucun style du
   composant de base n'est dupliqué ici.
   Le wrapper épouse la boîte de l'image (largeur explicite + image en 100%),
   ce qui rend les % du texte résolvables contre l'image elle-même : le texte
   est ancré sur le centre RÉEL du disque blanc, mesuré pixel par pixel sur
   l'asset (581×518px → centre à 47.418% / 59.749%, diamètre 51%). C'est de
   là que vient le léger décalage vers la gauche voulu : le disque n'est pas
   au centre géométrique du PNG. Pas de marge négative ni de translation
   arbitraire — le placement reste donc stable à toutes les largeurs.
   Taille du texte en cqw (conteneur = le wrapper = l'image) pour qu'il suive
   l'échelle du disque au lieu de celle du viewport. */
.sm-offers-stamp-wrapper--hero {
  container-type: inline-size;
  /* 383px = taille de l'asset. Le plafond en vw est calibré par capture :
     à 74vw l'étiquette masquait le visage du sujet en mobile, 55vw la pose
     à côté sans le recouvrir. */
  width: min(383px, 55vw);
  z-index: 2;
}

/* ✅ 20/08/2026 (demande client) : `width: 100%` retiré ici. L'étiquette
   reprend donc la largeur du composant de base (`.sm-offers-stamp`) au lieu
   d'être étirée sur la largeur du wrapper — le disque redevient un vrai
   cercle. Aucune largeur de remplacement n'est posée. */
/* ✅ Corrigé le 16/09/2026 : le rapport image/wrapper est désormais FIXE, à
   toutes les largeurs — c'est la méthode qui fait fonctionner `--b2b`.

   Le bug : l'étiquette n'avait pas de `width` ici, elle héritait donc du
   `width: 500px` du composant de base — une valeur en PIXELS — alors que le
   wrapper est en `min(383px, 55vw)`, une valeur en VW. Le rapport entre les
   deux n'était donc pas constant :
     • viewport ≥ 696px → wrapper plafonné à 383px → rapport 500/383 = 130,55 %
     • viewport < 696px → wrapper = 55vw, image toujours 500px → le rapport
       enfle quand l'écran rétrécit (231 % à 393px de large)
   Or le `left` du texte est un POURCENTAGE DU WRAPPER, tandis que le disque
   blanc vit dans l'IMAGE. Quand le rapport bouge, l'ancrage se décale — d'où
   un rendu juste sur grand écran et faux sur téléphone.

   `--b2b` n'a jamais eu ce problème : son image est en `width: 100%`, elle
   coïncide donc exactement avec le wrapper, et un seul `left` suffit partout.
   Même principe ici, avec le rapport propre au Hero : 500 / 383 = 130,55 %.
   À 383px de wrapper cela vaut exactement 500px — la taille et la position de
   l'étiquette en desktop ne changent pas d'un pixel. */
.sm-offers-stamp-wrapper--hero .sm-offers-stamp {
  width: 130.55%;
  max-width: none;
  margin: 0;
}

.sm-offers-stamp-wrapper--hero .sm-offers-stamp-text {
  /* ⚠️ Valeurs réglées visuellement par le client — elles remplacent
     l'ancrage calculé sur le centre mesuré du disque. Ne pas recalculer ni
     écraser. Cette règle reste la variante Hero et doit continuer à
     surcharger le positionnement standard ci-dessus.
     16/09/2026 : `left` passé de 69.4% à 54.4% sur confirmation visuelle du
     client en desktop, malgré la mesure géométrique qui plaçait le centre du
     disque à 69.4%. Le rendu mobile étant validé à 69.4%, il est verrouillé
     par le media query juste en dessous. */
  left: 54.4%;
  top: 55.7%;
  width: 51%;
  margin: 0;
  font-size: 6.7cqw;
}

/* ⚠️ Ajouté le 16/09/2026 EN MÊME TEMPS que le passage à `left: 54.4%`
   ci-dessus, et uniquement pour cette raison : le mobile est validé à 69.4%
   (texte mesuré à 0,2px du centre du disque) et ne doit pas suivre la valeur
   desktop. Sans ce verrou, la règle de base s'appliquerait aussi sous 768px.
   Même sélecteur composé donc même spécificité (0,2,0) : c'est la position
   dans la feuille qui tranche, et ce bloc vient après.
   Si le desktop revient un jour à 69.4%, ce bloc devient inutile et doit être
   supprimé plutôt que laissé en doublon. */
@media (max-width: 767.98px) {
  .sm-offers-stamp-wrapper--hero .sm-offers-stamp-text {
    left: 69.4%;
  }
}


.sm-hero-dots {
  position: absolute;
  z-index: 2;
  bottom: var(--sm-space-md);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--sm-space-xs);
}

.sm-hero-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  transition: background-color 0.2s ease;
}

.sm-hero-dot.is-active {
  background-color: var(--sm-color-white);
}

.sm-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--sm-color-white);
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
}

.sm-hero-arrow svg {
  width: 26px;
  height: 26px;
}

.sm-hero-arrow--prev {
  left: var(--sm-gutter);
  transform: translateY(-50%) scaleX(-1);
}

.sm-hero-arrow--next {
  right: var(--sm-gutter);
}

/* --------------------------------------------------------------------------
   10. HOMEPAGE — NOS VALEURS
   ✅ Section entièrement revue le 06/08/2026 via source-homepage.html
   (styles calculés Playwright) : sur le site source, Hero et Nos valeurs
   forment UNE SEULE section Wix (le diaporama n'occupe que le haut, ~700px
   sur une section totale de ~1425px) ; en dessous, sur fond BLANC (pas gris
   --sm-color-bg-alt comme on l'avait supposé), tout est empilé en une seule
   colonne centrée de ~980px, PAS une grille 3 colonnes : accroche du Hero,
   puis titre "Nos valeurs", puis les 3 cartes les unes sous les autres.
   Confirmé par la largeur identique (980px) et le margin-left identique
   (230px) de tous ces blocs dans le DOM réel — une vraie grille aurait des
   décalages horizontaux différents par carte (comme Disciplines/Offres qui,
   eux, ont bien des largeurs de carte différentes = vraie grille repeater).
   Décision de reproduction fidèle validée par le client le 06/08/2026. */
/* max-width/margin-inline:auto retirés le 19/08/2026 (restructuration
   homepage) : cet élément vit maintenant dans .sm-section__header, qui
   gère l'inset horizontal — plus besoin de plafonner/centrer ici. */
/* ⚠️ Corrigé le 19/08/2026 (4e passe, demande explicite du client) :
   font-weight:700 supprimé — décision du client : sur la homepage, tous
   les paragraphes/textes courants (p, li, span) doivent rester en Work
   Sans Light (300) uniquement, aucune graisse Regular/Medium/Bold, quelle
   que soit la graisse mesurée contre le site source (ex. ce paragraphe
   était confirmé 700 gras le 06/08/2026 — écart assumé, choix de
   direction artistique du client, pas une correction d'erreur). Retombe
   sur le 300 hérité de `body` (section 3), aucune règle à ajouter. */
.sm-values-intro {
  margin-bottom: var(--sm-space-lg);
  text-align: center;
}


/* "Au Studio'M, nous valorisons :" : confirmé sur le site source comme un
   <p> noir gras en police corps (worksans-extralight/Work Sans), 20px —
   PAS un <h2> doré en police de titre comme construit initialement (l'échelle
   h2 par défaut ne s'applique pas ici). */
.sm-values-heading {
  text-align: center;
  margin-bottom: var(--sm-space-lg);
  font-size: 20px;
  font-family: var(--sm-font-body);
  font-weight: 700;
  color: var(--sm-color-text);
}

/* max-width/margin-inline:auto retirés le 19/08/2026 (restructuration
   homepage) : vit maintenant dans .sm-row.sm-row--single. */
/* ✅ Corrigé le 20/08/2026 (demande explicite du client, "gap uniforme
   24px sur tous les rows") : gap passé de var(--sm-space-xl) (80px) à
   var(--sm-gap) (24px) — cet écart avec le système .sm-row générique
   (section 4) n'avait jamais été harmonisé lors de la restructuration du
   19/08/2026, .sm-values-grid étant un conteneur interne à
   .sm-row--single plutôt qu'un .sm-row--two-col/--three-col direct. */
.sm-values-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sm-gap);
  text-align: center;
}

/* ✅ Ajoutée le 20/08/2026 (demande explicite du client, "structure propre
   icône/titre/paragraphe") : chaque carte devient elle-même un conteneur
   flex column avec gap:24px — remplace l'espacement par margin-bottom sur
   l'icône/le h3 (voir ci-dessous), qui contredisait le gap uniforme déjà
   posé sur .sm-values-grid entre les 3 cartes (même motif que
   .sm-planning-inner/.sm-disciplines-inner). Pas d'overflow ni de
   position:absolute ici : les 3 éléments (icône, titre, paragraphe)
   restent dans le flux normal, empilés verticalement. */
.sm-value-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sm-gap);
}

/* ⚠️ Repassée à 120px (width, height:auto) le 20/08/2026 (2e passe, retour
   client "icône trop petite") — remplace le 60px de la 1ère passe du même
   jour. Toujours un écart assumé avec les 108×108px desktop confirmés le
   17/08/2026 contre le CSS source (voir historique ci-dessus, conservé
   pour mémoire) : choix de direction artistique du client, pas une
   correction d'erreur. margin-inline:auto retiré : superflu maintenant que
   .sm-value-card centre son contenu via align-items:center (flex column,
   voir ci-dessus) ; margin-bottom retiré (contredisait le gap:24px de la
   carte). */
/* ⚠️ 50px : valeur réglée et validée par le client (20/08/2026) — ne pas
   remettre les 120px. `display:block` + `margin-inline:auto` ajoutés le
   20/08/2026 : l'image était en `inline`, donc alignée sur le texte du bloc
   et pas réellement centrée dans son conteneur. */
.sm-value-icon {
  display: block;
  width: 50px;
  height: auto;
  margin-inline: auto;
}

.sm-value-card h3 {
  margin-bottom: 0;
}

/* Paragraphe de carte confirmé 18px gras (700), pas le corps de texte léger
   (300) par défaut — cohérent avec le même motif observé sur les cartes
   Disciplines (voir section 12). */
/* ✅ Corrigé le 18/08/2026 (comparaison capture live vs build) : graisse
   réelle NORMALE (pas 700) — le texte "Chaque séance est pensée..." (et les
   2 autres cartes) s'affiche en corps normal sur le rendu réel, contrairement
   à ce qu'avait conclu l'audit Playwright du 06/08/2026 (même piège de
   lecture "span ancêtre" que déjà rencontré sur Le Studio/Les Cours). */
/* ⚠️ Corrigé le 19/08/2026 (4e passe, demande explicite du client) :
   font-weight:400 supprimé — même directive que .sm-values-intro
   ci-dessus (tous les p/li/span de la homepage restent en Work Sans
   Light 300, écart assumé avec le 400 confirmé contre la source le
   18/08/2026). */
.sm-value-card p {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   11. HOMEPAGE — PLANNING
   ✅ Corrigé le 06/08/2026 via source-homepage.html (styles calculés
   Playwright) : une seule colonne centrée (titre → texte → image → bouton),
   PAS un layout 2 colonnes texte/image comme construit initialement — même
   motif "empilé en 980px" que Hero/Nos valeurs (section 10). Le bouton est
   confirmé positionné APRÈS l'image dans le DOM réel, pas juste sous le
   texte. Décision de reproduction fidèle validée par le client le
   06/08/2026. Le fond reste DORÉ rgb(204,162,82) (classe .sm-section--gold,
   section 18), confirmé le 06/08/2026. "Planning des cours" reste blanc
   (confirmé, inchangé).
   ✅ Réaudité le 17/08/2026 via source-hp.html/.css : ordre titre→texte→
   image→bouton reconfirmé. Écarts trouvés :
   - Paragraphe confirmé blanc PUR `#FFFFFF` (style inline sur le span
     source), pas le blanc à 90% hérité de `.sm-section--gold p` — même
     correction déjà appliquée sur la page Planning dédiée le 07/08/2026
     (`.sm-planning-page-inner p`) mais jamais reportée ici sur le teaser
     homepage.
   - Petite décoration vectorielle vert clair (`#8cc63f`, ~200×28px,
     confirmée visible et centrée entre le texte et l'image) — absente de
     la construction initiale, ajoutée avec le tracé SVG exact extrait du
     DOM source (contrairement à d'autres décorations du site où seul un
     tracé approximatif avait pu être reconstruit, ex. flèche Disciplines
     section 12). */
/* ✅ Restructuré le 19/08/2026 : ne wrappe plus que divider+image+bouton
   (le h2+accroche a été déplacé dans .sm-section__header) — max-width/
   margin-inline:auto retirés, ce wrapper vit maintenant dans
   .sm-row.sm-row--single qui gère l'inset horizontal. */
/* ✅ Corrigé le 20/08/2026 (demande explicite du client, "gap uniforme
   24px sur tous les rows") : gap passé de var(--sm-space-lg) (48px) à
   var(--sm-gap) (24px), même raison que .sm-values-grid ci-dessus. */
.sm-planning-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sm-gap);
  text-align: center;
}

/* ✅ Retargetée le 20/08/2026 (retour client, "gap 24px pas appliqué entre
   h2/paragraphe/flèche") : h2 déplacé dans index-sm.html hors de
   .sm-section__header (qui n'a pas de gap propre — l'espacement dépendait
   du margin-bottom ci-dessous, jamais aligné sur les 24px demandés)
   directement dans .sm-row.sm-planning-inner, qui porte déjà
   display:flex;flex-direction:column;gap:var(--sm-gap) (voir plus haut).
   margin-bottom retiré : il s'ajoutait au gap (24px + 16px = 40px de trop
   entre h2 et le paragraphe) — le gap seul suffit désormais. */
.sm-planning-inner h2 {
  color: var(--sm-color-white);
}

/* ⚠️ Corrigé le 19/08/2026 (4e passe, demande explicite du client, quelques
   minutes après avoir retargeté cette règle) : font-weight:700 supprimé —
   même directive que .sm-values-intro (section 10) : tous les p/li/span
   de la homepage restent en Work Sans Light 300, écart assumé avec le
   blanc gras confirmé contre la source le 17/08/2026. Couleur blanche
   conservée (pas concernée par la directive, qui ne porte que sur la
   graisse).
   ✅ Retargetée le 20/08/2026 (même raison que le h2 ci-dessus) + ajout de
   margin-bottom:0 : ce <p> héritait sinon du margin-bottom:16px de la
   règle globale `p` (section 3), qui s'ajoutait au gap:24px de
   .sm-planning-inner (40px de trop entre le paragraphe et la flèche
   décorative suivante). */
.sm-planning-inner p {
  color: var(--sm-color-white);
  margin-bottom: 0;
}

/* ✅ Corrigé le 18/08/2026 (comparaison capture live vs build) : couleur
   réelle confirmée BLANCHE (icône chevrons+flèche identique à celle des CTA
   "Votre séance découverte"/"J'ai envie de tester" ailleurs sur le site) —
   le vert #8cc63f documenté le 17/08/2026 ne correspond à aucun élément
   visible à cet endroit sur le rendu réel. */
.sm-planning-divider {
  width: 90px;
  height: auto;
  color: var(--sm-color-white);
}

.sm-planning-image img {
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   12. HOMEPAGE — DISCIPLINES
   -------------------------------------------------------------------------- */
/* ✅ Ajouté le 17/08/2026 (retour client avec capture) : décoration "fleur"
   trait blanc en haut à droite de la section (comp-lzc63e8t côté source,
   ~190 chemins vectoriels, viewBox 0 0 668.267 590.47). Positionnée en
   absolute par rapport à .sm-section--disciplines (d'où position:relative +
   overflow:hidden ici, pour ne pas créer de scroll horizontal si elle
   déborde). Cachée sous 1024px : aucune donnée mobile côté source pour
   confirmer sa présence/taille à cette largeur.
   ✅ Renommée .sm-disciplines → .sm-section--disciplines le 19/08/2026
   (restructuration homepage, convention section.sm-section.sm-section--NAME). */
.sm-section--disciplines {
  position: relative;
  overflow: hidden;
}

.sm-disciplines-flower {
  display: none;
}

@media (min-width: 1024px) {
  .sm-disciplines-flower {
    display: block;
    position: absolute;
    top: 0;
    right: -40px;
    width: 260px;
    height: auto;
    pointer-events: none;
  }

  .sm-disciplines-flower path {
    fill: var(--sm-color-white);
  }
}

/* ✅ Ajoutée le 20/08/2026 (retour client, "gap 24px pas appliqué entre
   h2/paragraphe/flèche") : h2 + accroche + lien-flèche déplacés dans
   index-sm.html hors de .sm-section__header (qui n'a pas de gap propre)
   dans un .sm-row.sm-row--single dédié (.sm-disciplines-inner), même
   motif que .sm-planning-inner/.sm-values-grid — display:flex;
   flex-direction:column;gap:var(--sm-gap) remplace le display:block par
   défaut de .sm-row--single pour que les 3 éléments soient espacés de
   24px uniforme en tant qu'enfants directs du même .sm-row. */
.sm-disciplines-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sm-gap);
}

/* Couleur blanche confirmée le 05/08/2026 directement sur le CSS source
   (color:#FFFFFF sur ce titre précis) — cohérent avec le fond sage de la
   section. Remplace le doré de la règle globale h2-h6.
   ⚠️ margin-bottom retiré le 20/08/2026 : il s'ajoutait au gap:24px de
   .sm-disciplines-inner (72px de trop entre le titre et l'accroche) —
   même correction que .sm-planning-inner h2 (section 11). */
.sm-disciplines-heading {
  text-align: center;
  color: var(--sm-color-white);
}

/* ✅ Corrigé le 17/08/2026 (retour client avec capture) : grille passée de
   4 à 2 colonnes desktop (rangées de 2,2,2,1 pour les 7 cartes) — la
   grille 4 colonnes n'était qu'une supposition de l'audit du 06/08/2026
   ("vraie grille repeater, pas empilée"), jamais vérifiée sur le nombre
   exact de colonnes. */
/* ✅ Restructuré le 19/08/2026 : la grille propre à .sm-disciplines-grid
   est retirée (les 7 cartes sont désormais des enfants directs de
   .sm-row.sm-row--two-col, qui porte le grid-template-columns générique
   — voir section 4). Seuls l'alignement centré et le centrage de la 7e
   carte impaire restent scopés à cette section. */
.sm-section--disciplines .sm-row--two-col {
  text-align: center;
}

@media (min-width: 640px) {
  /* ✅ Ajouté le 18/08/2026 (comparaison capture live vs build) : la 7e carte
     (Circuit Training), seule dans sa rangée, est CENTRÉE sur le rendu réel
     — pas alignée à gauche comme le fait une grille 2 colonnes par défaut. */
  .sm-section--disciplines .sm-row--two-col > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - var(--sm-space-lg) / 2);
    margin-inline: auto;
  }
}

/* Cartes blanches confirmées le 05/08/2026 par capture d'écran du client
   (fond sage + cartes blanches avec ombre, pas de cartes transparentes) —
   la couleur de texte des cartes doit donc rester sombre malgré le fond
   sage de la section (voir override plus bas), contrairement au reste du
   texte de la section qui lui reste blanc. */
.sm-discipline-card {
  background-color: var(--sm-color-white);
  border-radius: 0;
  padding: var(--sm-space-lg) var(--sm-space-md);
}

.sm-section--sage .sm-discipline-card p {
  color: var(--sm-color-text);
}

/* ✅ Corrigé le 17/08/2026 via source-hp.html/.css, puis via capture directe
   fournie par le client montrant le vrai rendu (tooltip navigateur "Hatha
   Yoga.png" visible) : l'icône "Soleil.png" (contour de soleil creux, sans
   remplissage — voir le fichier lui-même) n'est PAS une décoration
   éparse en arrière-plan de section comme supposé dans une 1ère passe, mais
   est posée EN CALQUE DERRIÈRE la silhouette de posture de CHAQUE carte,
   centrée au même point — c'est ce qui crée l'effet "posture entourée de
   rayons de soleil" vu sur la capture. Confirmé aussi par le DOM : 6
   occurrences de Soleil.png entrecoupant les 7 fiches (une par fiche, sauf
   la dernière). Structure changée : .sm-discipline-icon-wrap (conteneur
   relatif) > .sm-discipline-sun (fond, 100% du wrap) + .sm-discipline-icon
   (posture, ~65% du wrap, centrée par-dessus). Tailles absolues confirmées
   par les attributs width/height réels du DOM : Soleil.png 253px desktop,
   postures 183-314px selon l'icône (moyenne ~250px, valeurs inconsistantes
   entre elles côté Wix) — wrap réglé à 220px desktop / 100px mobile
   (mobile non capturé par la source F12, extrapolé). */
.sm-discipline-icon-wrap {
  position: relative;
  width: 100px;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  margin-bottom: var(--sm-space-xs);
}

@media (min-width: 1024px) {
  .sm-discipline-icon-wrap {
    width: 220px;
  }
}

/* ✅ 20/08/2026 : le soleil était étiré à `width:100%; height:100%`, soit
   deux dimensions imposées indépendamment — l'asset étant carré comme le
   wrapper, ça ne se voyait pas, mais toute image non carrée aurait été
   déformée. Il est désormais dimensionné par sa seule largeur, la hauteur
   suivant automatiquement le ratio de l'image.
   Le centrage ne bouge pas : `inset: 0` est conservé tel quel (aucun
   top/left/right/bottom modifié, aucun transform ajouté) et `margin: auto`
   centre la boîte réduite dans ce même cadre — le soleil garde donc
   exactement le même centre, seul son diamètre diminue. La silhouette de
   posture, dimensionnée séparément, n'est pas touchée. */
.sm-discipline-sun {
  position: absolute;
  inset: 0;
  width: 55%; /* 20/08/2026 (demande client) : 85% -> 55%, largeur seule */
  height: auto;
  margin: auto;
}

/* position:absolute + centrage : la silhouette garde SON PROPRE ratio
   (elles ne sont pas toutes carrées, ex. 213x214) au lieu d'être écrasée
   dans la hauteur du conteneur (bug corrigé le 17/08/2026 — l'icône était
   auparavant en position:relative "en flux", ce qui forçait la hauteur du
   wrapper à suivre SA hauteur à elle plutôt qu'un carré, écrasant le
   soleil en absolute par-dessus). */
.sm-discipline-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 65%;
  height: auto;
  margin: 0;
}

/* Suppression du font-size:18px le 05/08/2026 : la taille réelle des
   titres de cartes Disciplines est 25px (échelle h3 par défaut), confirmée
   sur le CSS source (classe font_3). */
.sm-discipline-card h3 {
  margin-bottom: var(--sm-space-xs);
}

/* ✅ Corrigé le 06/08/2026 via source-homepage.html (styles calculés) :
   confirmé 18px gras (700) et noir sur les cartes blanches, pas le petit
   texte gris atténué (12px, muted) utilisé jusqu'ici — même motif que les
   cartes Nos valeurs (section 10). */
/* ✅ Corrigé le 18/08/2026 (comparaison capture live vs build) : graisse
   réelle NORMALE (pas 700), même correction que .sm-value-card p ci-dessus. */
/* ⚠️ Corrigé le 19/08/2026 (4e passe, demande explicite du client) :
   font-weight:400 supprimé — même directive que .sm-value-card p. */
.sm-discipline-card p {
  margin-bottom: 0;
}

/* ⚠️ margin-bottom retiré le 20/08/2026 : s'ajoutait au gap:24px de
   .sm-disciplines-inner (48px de trop entre l'accroche et le
   lien-flèche) — même correction que .sm-disciplines-heading ci-dessus.
   margin-bottom:0 explicite ajouté en 2e passe (vérification Playwright) :
   sans lui ce <p> retombait sur le margin-bottom:16px hérité de la règle
   globale `p` (section 3), non couvert par le retrait de l'override
   ci-dessus (qui ne faisait que retirer une valeur différente, pas neutraliser
   l'héritage). */
.sm-disciplines-intro {
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: 0;
  text-align: center;
}

/* Flèche décorative confirmée le 05/08/2026 par capture d'écran (élément
   vectoriel lien vers /lescours, trouvé juste après le <h2> côté source) —
   reconstruite en CSS/SVG faute d'avoir pu extraire l'asset vectoriel
   d'origine (composant Wix complexe non trivial à isoler).
   ⚠️ margin-bottom retiré le 20/08/2026 : ce lien est désormais le dernier
   enfant de .sm-disciplines-inner, pas de la section — son margin-bottom
   s'ajoutait au margin-top:24px déjà posé par `.sm-row + .sm-row` (section
   4) entre ce row et la grille de cartes suivante (72px de trop). */
.sm-disciplines-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--sm-color-white);
}

/* ✅ 16/09/2026 (demande client) : la flèche de « Nos disciplines » utilise
   désormais le MÊME SVG que le séparateur de « Planning des cours », avec la
   même classe `.sm-planning-divider` — c'est elle qui porte la taille et la
   couleur. La règle `.sm-disciplines-arrow svg { width: 90px; height: auto }`
   qui vivait ici est supprimée : elle aurait été une seconde source de
   vérité pour les mêmes valeurs, et les deux flèches doivent rester
   strictement identiques. `.sm-disciplines-arrow` ne garde que ce qui relève
   du LIEN (mise en page et couleur héritée). */

/* --------------------------------------------------------------------------
   13. HOMEPAGE — OFFRES
   -------------------------------------------------------------------------- */
/* Passée à 3 cartes le 05/08/2026 : "Cours Individuels et Collectifs" a été
   déplacée ici depuis la section Disciplines — en réexaminant le CSS
   source, elle se trouve dans le même groupe DOM que "Offres événements" /
   "Offres entreprise" (pas dans la grille Disciplines comme construit
   initialement). */
/* ✅ Restructuré le 19/08/2026 : la grille propre à .sm-offers-grid est
   retirée (les 3 cartes sont désormais des enfants directs de
   .sm-row.sm-row--two-col, qui porte le grid-template-columns générique
   — voir section 4). position:relative conservé pour le contexte
   d'empilement du badge/feuillage de la 1ère carte. */
.sm-section--offers .sm-row--two-col {
  position: relative;
}

/* ✅ Ajouté le 20/08/2026, en même temps que le padding de 24px des cartes :
   `repeat(2, 1fr)` (règle générique .sm-row--two-col, section 4) a un plancher
   `min-content` implicite — les 48px de padding horizontal ajoutés sur chaque
   carte poussent le min-content de la 2e carte au-dessus de sa part, qui vole
   alors quelques px à la 1ère (mesuré à 1024px : 241.1/246.9 au lieu de
   244/244, colonnes inégales). `minmax(0, 1fr)` supprime ce plancher et rend
   les 2 colonnes strictement égales à toutes les largeurs — vérifié identique
   aux largeurs d'avant le padding sur 1920/1440/1280/1024/768/390/320px.
   Même correctif que celui déjà appliqué le 18/08/2026 à .sm-coaching-grid /
   .sm-giftcard-grid pour la même raison. Scopé à cette section : la règle
   générique .sm-row--two-col n'est pas touchée. */
@media (min-width: 640px) {
  .sm-section--offers .sm-row--two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ✅ Ajoutée le 20/08/2026 (demande explicite du client, effet "étiquette") :
   image "Comp studio m.png" (581×518px, voir index-sm.html) posée en tête
   de section. Wrappée le 20/08/2026 (2e passe) dans .sm-offers-stamp-wrapper
   pour superposer le texte "Studio de Yoga, Pilates et bien-être" par-dessus
   le cercle blanc de l'image (vrai HTML, pas fondu dans l'asset — voir SEO).
   Valeurs CSS ci-dessous fournies telles quelles par le client (modifiées
   manuellement) : width 500px, margin -120px sur les 4 côtés pour le
   débordement. position:relative + z-index:10 demandés explicitement par
   le client, pour que l'image reste au-dessus du flux normal malgré son
   débordement. */
/* ✅ Recalibré le 20/08/2026 (4e passe) — valeurs ci-dessous fournies telles
   quelles par le client, qui a repris la main sur ce bloc et l'a réglé à
   l'oeil sur son propre rendu. Elles remplacent le calage automatique de la
   3e passe (wrapper épousant l'image + ancrage du texte sur le centre mesuré
   du disque blanc), qui est donc annulé.
   Le wrapper redevient pleine largeur (`display:flex; justify-content:left`,
   image poussée à gauche par son `margin:-120px`), et le texte est repositionné
   en % de CE wrapper — donc plus en % de l'image. Conséquence à connaître :
   le point d'ancrage du texte n'est plus lié géométriquement au disque blanc,
   il est calé pour la largeur de rendu actuelle ; si la largeur de la section
   change (comme lors de la restructuration du 19/08/2026), le texte se
   décalera du disque et devra être recalibré à la main.
   Mesures conservées pour un futur recalage : le disque blanc n'est PAS au
   centre géométrique du PNG — mesuré pixel par pixel sur l'asset (581×518px,
   plus grande zone blanche opaque connexe → boîte x 127→424, y 166→453), son
   centre tombe à 275.5 / 309.5px, soit 47.418% / 59.749% DE L'IMAGE, pour un
   diamètre de 297px (51% de la largeur de l'image).
   Couleur/police alignées sur .sm-offers-badge-title (même texte affiché
   ailleurs sur la page, même traitement visuel).
   ⚠️ `clamp(2.1rem, 2.2vw, 1.4rem)` : le minimum (2.1rem) est supérieur au
   maximum (1.4rem). CSS résout alors le clamp au minimum, quelle que soit la
   largeur d'écran — la valeur rend donc 33.6px en dur, à toutes les tailles
   de viewport (mesuré). Repris tel quel puisque c'est le rendu réglé et
   validé par le client, mais autant l'écrire `font-size: 2.1rem` si l'idée
   est bien une taille fixe, ou remettre le min sous le max si une variation
   selon l'écran est voulue. */
.sm-offers-stamp-wrapper {
  position: relative;
  display: flex;
  justify-content: left;
}

.sm-offers-stamp {
  position: relative;
  z-index: 10;
  display: block;
  width: 500px;
  max-width: 55%;
  height: auto;
  margin: -120px;
}

/* Texte superposé au cercle blanc de .sm-offers-stamp (voir le bloc
   ci-dessus pour l'origine de ces valeurs et les mesures du disque). */
.sm-offers-stamp-text {
  position: absolute;
  z-index: 11;
  top: 69%;
  /* ⚠️ Valeur réglée visuellement par le client (20/08/2026) — ne pas
     recalculer ni écraser. */
  left: 12%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--sm-color-accent);
  font-family: var(--sm-font-heading);
  font-size: clamp(2.1rem, 2.2vw, 1.4rem);
  line-height: 1.15;
}

.sm-offers-stamp-text p {
  margin: 0;
}

/* ✅ 16/09/2026 (demande client, constaté à 416px) : ajustements MOBILE de
   l'étiquette de la section Offres. Aucune valeur desktop touchée.

   ⚠️ Volontairement limité à ces 2 déclarations. Une version précédente
   neutralisait aussi `margin: -120px`, forçait `width: 85%` et recalculait
   `top` sur le centre mesuré du disque : le rendu visuel ne convenait pas au
   client, tout cela est annulé. `margin`, `width` et `top` gardent donc leurs
   valeurs de base en mobile. Ne pas les réintroduire sans validation.

   Cette règle ne vise que `.sm-offers-stamp` nu. Les modifieurs `--hero`
   (5 occurrences) et `--b2b` (1) redéfinissent `max-width` et `left` avec une
   spécificité supérieure : ils ne sont pas concernés. */
/* ✅ 16/09/2026 (demande client) : l'étiquette de la section Offres reprend
   la méthode de `.sm-offers-stamp-wrapper--b2b` (Nos Formules), la seule des
   trois qui tienne sur un vrai téléphone.

   Pourquoi l'ancienne cassait : le `left` du texte est un POURCENTAGE DU
   WRAPPER alors que le disque blanc vit dans l'IMAGE. Or l'image était
   dimensionnée indépendamment du wrapper (`width: 500px` + `max-width: 55%`
   puis 85% en mobile, et `margin: -120px`). Le rapport image/wrapper variait
   donc de 35,6 % à 85 % selon la largeur d'écran, et l'écart entre le texte
   et le centre du disque oscillait entre +52,9px et -70,8px. Aucune valeur de
   `left` ne pouvait être juste partout.

   La méthode `--b2b`, reproduite ici :
     1. le wrapper porte `container-type: inline-size` et une largeur
        explicite `min(<taille de l'asset>, 74vw)` ;
     2. l'image fait `width: 100%` du wrapper, sans `max-width` ni `margin` :
        les deux boîtes COÏNCIDENT, le rapport devient 1:1 et invariant ;
     3. le texte est ancré en % (qui désignent donc directement un point de
        l'image) et sa taille est en `cqw`, donc proportionnelle au disque.

   Valeurs propres à Offres : 500px de large (la taille rendue actuelle en
   desktop, inchangée), et l'ancrage sur le centre du disque mesuré au pixel
   sur `Comp studio m.png` (602×541) — 320,5/602 = 53,239 % en X et
   292,5/541 = 54,067 % en Y. Les 47,418 % / 59,749 % de `--b2b` viennent d'un
   relevé plus ancien sur un autre asset ; c'est la méthode qui est reprise,
   pas ces deux chiffres.

   Le texte d'Offres est un `<div>` contenant 3 `<h3>` (le Hero et `--b2b`
   ont un seul élément) : les h3 doivent hériter, sinon ils garderaient
   l'échelle typographique globale et ne suivraient pas le disque.

   ⚠️ 16/09/2026 (2e passe) : ce bloc est désormais RÉSERVÉ AU MOBILE. Posé
   sans media query, il changeait aussi la composition desktop — l'étiquette
   perdait son `margin: -120px` et ne débordait plus vers le haut et la
   gauche. Le desktop est rendu à l'identique par les classes de base
   (`width: 500px`, `max-width: 55%`, `margin: -120px`, `left: 12%`,
   `top: 69%`, `font-size: clamp(...)` et les `<h3>` à l'échelle globale). */
@media (max-width: 767.98px) {
  .sm-section--offers .sm-offers-stamp-wrapper {
    container-type: inline-size;
    width: min(500px, 74vw);
    margin: 0;
  }

  .sm-section--offers .sm-offers-stamp {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .sm-section--offers .sm-offers-stamp-text {
    left: 53.239%;
    top: 54.067%;
    width: 51%;
    margin: 0;
    font-size: 6.7cqw;
  }

  .sm-section--offers .sm-offers-stamp-text h3 {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
  }
}

@media (min-width: 640px) {
  /* ✅ Corrigé le 18/08/2026 (comparaison capture live vs build) : grille
     confirmée à 2 colonnes max sur le rendu réel à 1440px de large (3e carte
     "Offres entreprise" seule et CENTRÉE dans sa propre rangée) — pas 3
     colonnes comme conclu le 06/08/2026 (l'audit Playwright d'alors devait
     avoir capturé une largeur de viewport différente, probablement ≥1920px,
     où 3 colonnes tiennent réellement). La règle @media(min-width:1024px)
     qui passait à 3 colonnes est supprimée. */
  .sm-section--offers .sm-row--two-col > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - var(--sm-space-lg) / 2);
    margin-inline: auto;
  }
}

/* ✅ Corrigé le 17/08/2026 via source-hp.css : bordure dorée confirmée sur
   les cartes (--brw:1px; --brd:204,162,82 sur le composant réel) — absente
   jusqu'ici (seule l'ombre portée était reproduite).
   ⚠️ overflow:hidden retiré le 17/08/2026 (2e passe, retour client avec
   capture) : le badge/feuillage de la 1ère carte doit pouvoir déborder à
   gauche/au-dessus de la carte (voir .sm-offers-decoration) — le clip de
   l'image aux coins arrondis est repris directement sur .sm-offer-image. */
/* ✅ Ajouté le 20/08/2026 (demande client) : padding interne uniforme de
   24px sur les 4 côtés, posé sur la carte elle-même (pas sur la grille, qui
   garde son `gap: var(--sm-gap)` de 24px inchangé). `box-sizing:border-box`
   est global (section 2), la largeur de la carte ne bouge donc pas : c'est
   l'image et le contenu qui sont insérés de 24px. */
.sm-offer-card {
  position: relative;
  padding: 24px;
  background-color: var(--sm-color-bg);
  border: 1px solid var(--sm-color-accent);
  border-radius: 0;
}

/* border-radius posé directement sur l'image (haut uniquement) depuis que
   .sm-offer-card n'a plus overflow:hidden (17/08/2026, retiré pour laisser
   le badge/feuillage de la 1ère carte déborder du cadre). */
.sm-offer-image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0;
}

/* ✅ Passé en flex le 20/08/2026 (demande client) : c'est le conteneur des
   éléments internes de la carte (titre, texte, bouton). `align-items:center`
   les aligne les uns par rapport aux autres sur un axe commun. L'empilement
   image en haut / contenu dessous est conservé, seul l'alignement interne
   change. `padding` d'origine laissé tel quel : il s'ajoute aux 24px posés
   sur la carte elle-même (voir .sm-offer-card). */
.sm-offer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sm-space-md);
}

/* 28px confirmé le 06/08/2026 via source-homepage.html (styles calculés) —
   pas l'échelle h3 par défaut (25px). */
.sm-offer-content h3 {
  margin-bottom: var(--sm-space-xs);
}

/* ⚠️ Ajouté le 19/08/2026 (retour client "paragraphes en Work Sans Light
   partout") : aucune règle n'avait jamais existé pour ce paragraphe (seul
   le h3/bouton de la carte étaient stylés) — retombait donc sur le corps
   de texte par défaut (16px/300), contrairement aux paragraphes des 2
   autres grilles de cartes homepage (Nos valeurs, Disciplines), toutes
   deux confirmées 18px/normal(400) contre la source. Valeur reprise par
   cohérence avec ce même motif de carte — PAS indépendamment revérifiée
   contre le CSS source spécifiquement pour les cartes Offres (à confirmer
   si un audit source dédié est fait un jour). */
/* ⚠️ Corrigé le 19/08/2026 (4e passe, demande explicite du client, quelques
   minutes après avoir ajouté cette règle) : font-weight:400 supprimé —
   même directive que .sm-value-card p. */
.sm-offer-content p {
  margin-bottom: 0;
}

/* ✅ Corrigé le 17/08/2026 via source-hp.html : la 3e carte ("Offres
   entreprise") a en réalité un titre à 25px (échelle h3 par défaut,
   font_3 sans override de taille) — seules les 2 premières cartes
   ("Cours Individuels et Collectifs", "Offres événements") ont le 28px
   confirmé le 06/08/2026 (la confirmation initiale ne portait que sur une
   partie des cartes, pas les 3). */


.sm-offer-content .sm-btn {
  margin-top: var(--sm-space-sm);
}

/* --------------------------------------------------------------------------
   14. HOMEPAGE — BLOG / ACTU
   -------------------------------------------------------------------------- */
/* ✅ Renommée .sm-blog-teaser → .sm-section--blog le 19/08/2026
   (restructuration homepage, convention section.sm-section.sm-section--NAME). */
/* ✅ Ajouté le 20/08/2026 (demande explicite du client), corrigé le
   20/08/2026 (2e passe, retour client "l'overlay blanc n'est pas
   appliqué") : image de fond en calque séparé (::before, opacity 0.12) +
   voile blanc translucide par-dessus (::after, rgba(255,255,255,0.37)).
   ⚠️ Le client avait demandé `background-image` + `opacity: 0.12`
   directement sur `.sm-section--blog` — techniquement impossible tel
   quel : `opacity` sur un élément atténue tout son sous-arbre (rendu comme
   groupe), donc appliqué sur la section elle-même ça aurait aussi dilué le
   voile blanc ET le texte (h2/p) à 12%, pas seulement l'image. D'où la
   scission en 2 pseudo-éléments empilés — seul moyen d'atténuer l'image
   indépendamment du reste. C'est aussi la cause probable du bug signalé
   (le voile semblait absent : sur la 1ère implémentation, l'image de fond
   était à pleine opacité sur la section elle-même, donc beaucoup plus
   visible/contrastée que prévu, masquant l'effet du voile à 0.37 dessus).
   position:relative sur .sm-section__header/.sm-row nécessaire pour que
   le texte reste au-dessus des 2 calques : sans z-index explicite, les
   ::before/::after absolute passeraient devant le contenu statique en
   flux normal (ordre d'empilement CSS standard). */
.sm-section--blog {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.sm-section--blog::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('/wp-content/themes/pixence-child/assets/images/3864c6_ddcc2e80c8ea448bb3ebbac99841cad1~mv2.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.12;
  pointer-events: none;
}

.sm-section--blog::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(255, 255, 255, 0.37);
  pointer-events: none;
}

.sm-section--blog .sm-section__header,
.sm-section--blog .sm-row {
  position: relative;
  z-index: 2;
}

/* ✅ Retargetée le 19/08/2026 : ciblait `.sm-blog-teaser > .sm-container >
   p` (le `.sm-container` de l'accroche a disparu, remplacé par
   .sm-section__header). max-width/margin-inline:auto conservés ici : ce
   sont une largeur de lecture typographique (confirmée 480px côté source),
   pas un plafond structurel dupliquant la nouvelle structure globale. */
.sm-section--blog .sm-section__header p {
  max-width: 480px;
  margin-inline: auto;
  margin-bottom: var(--sm-space-lg);
}

/* Correction du 05/08/2026 : grille fixe 2x2 (4 cartes), image plein
   cadre avec "Studio M" en superposition en haut à gauche et le titre de
   l'article en bas à gauche (écriture script) — plus de texte sous la
   carte.
   ✅ Corrigé le 17/08/2026 via source-hp.html/.css : widget Wix Pro
   Gallery confirmé — espacement réel entre les 4 cartes 32px (mesuré sur
   les offsets `left` des items du DOM : 486px - 454px de large), pas
   24px/--sm-space-md. Coins des images CARRÉS côté source (aucun
   border-radius dans la stylesheet ni sur le conteneur d'item du
   composant) — border-radius retiré. */
/* ✅ Restructuré le 19/08/2026 : la grille propre à .sm-blog-grid est
   retirée (les 4 cartes sont désormais des enfants directs de
   .sm-row.sm-row--two-col) — override scopé car ce widget garde son
   gap réel (32px, pas --sm-space-lg) et reste à 2 colonnes même en
   mobile (pas de breakpoint générique), contrairement au comportement
   par défaut de .sm-row--two-col. */
/* ⚠️ Corrigé le 20/08/2026 (demande explicite du client, "gap uniforme
   24px sur tous les rows") : gap passé de 32px à var(--sm-gap) (24px) —
   écart assumé avec la valeur mesurée sur le site source (32px confirmé
   le 17/08/2026 via source-hp.html/.css, voir commentaire plus haut),
   choix de cohérence globale du client qui prime ici sur la fidélité au
   site source. */
.sm-section--blog .sm-row--two-col {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sm-gap);
  text-align: left;
}

.sm-blog-card a {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.sm-blog-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ✅ Corrigé le 18/08/2026 (comparaison capture live vs build) :
   text-transform:uppercase retiré — le rendu réel affiche "Studio M" en
   casse normale, pas "STUDIO M" en majuscules forcées. */
.sm-blog-brand {
  position: absolute;
  top: var(--sm-space-sm);
  left: var(--sm-space-sm);
  font-family: var(--sm-font-accent);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--sm-color-white);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Vérifié le 05/08/2026 : le widget blog du site source utilise une police
   décorative propriétaire nommée "Hellstand" pour ses titres d'articles
   (--post-post-list-titleFont-family), confirmant le rendu "écriture
   script" demandé — mais cette police n'est pas disponible publiquement
   (hébergée par Wix). Dancing Script reprise comme équivalent libre le
   plus proche (déjà utilisée pour Newsletter). Taille réelle : 26px,
   graisse normale. */
.sm-blog-title {
  position: absolute;
  bottom: var(--sm-space-sm);
  left: var(--sm-space-sm);
  right: var(--sm-space-sm);
  margin-bottom: 0;
  font-family: var(--sm-font-script);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  color: var(--sm-color-white);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

/* --------------------------------------------------------------------------
   15. HOMEPAGE — AVIS MEMBRES
   Correction du 05/08/2026 : 2 colonnes (vidéo Facebook à gauche, texte +
   témoignage à droite), guillemets dorés décoratifs, points de navigation
   du carrousel en bas.
   ✅ Corrigé le 17/08/2026 via source-hp.html/.css (composant slideshow réel
   comp-lzathkzj14) :
   - Vidéo : ratio réel 480×340 confirmé (`data-width`/`data-height` du
     plugin Facebook source) — PAS 9:16 vertical (hypothèse jamais
     vérifiée). `max-width` alignée sur la largeur source (480px).
   - Guillemet décoratif : remplacé par le vrai SVG source (voir
     index-sm.html) au lieu du caractère `"` — couleur confirmée
     `--fill:#CCA252` (= --sm-color-accent), taille réelle 46×42px.
   - Citation : taille réelle confirmée 20px (pas 22px/--sm-fs-h4),
     line-height réel 2.2em (`line-height:2.2em` sur le composant source).
     Police confirmée PAS la police de titre (le texte source utilise
     `orig_glacial_indifference_regular`, une police corps distincte de
     Cormorant Garamond/The Seasons) — police de corps du site
     (--sm-font-body) reprise à la place plutôt que d'introduire une 3e
     famille de police non validée par le client.
   - Points de navigation : taille réelle confirmée 6px (pas 10px),
     couleur inactive `--dotsColor:var(--color_12)` = #E8E6E6 (gris très
     clair), couleur active `--dotsSelectedColor:var(--color_11)` = blanc
     à `--alpha-dotsSelectedColor:0.3` (30% d'opacité) — valeurs
     directement extraites des custom properties du composant réel, pas
     de bordure/remplissage doré comme construit initialement (jamais
     vérifié).
   - Flèches précédent/suivant ajoutées (`--nav-button-display:block`
     confirmé sur le composant source, absentes jusqu'ici) — couleur
     `--arrowColor:var(--color_12)` = #E8E6E6, largeur réelle 18px.
   - Fond de section : confirmé BLANC (`--bg-overlay-color:transparent`
     sur comp-lzathkzj6) — la classe `sm-section--alt` a été retirée du
     HTML (section 15 ne doit plus l'utiliser).
   -------------------------------------------------------------------------- */
/* ✅ Corrigé le 20/08/2026 (demande explicite du client, "gap uniforme
   24px sur tous les rows") : gap passé de var(--sm-space-lg) (48px) à
   var(--sm-gap) (24px). Cette règle vit sur le même élément que
   .sm-row.sm-row--two-col (voir index-sm.html : `class="sm-row
   sm-row--two-col sm-testimonial-inner"`) — à spécificité égale (1
   classe), elle écrasait silencieusement le gap:24px déjà posé par
   .sm-row--two-col (section 4) simplement parce qu'elle est déclarée
   plus loin dans le fichier. Même correction appliquée à
   .sm-info-studio-grid et .sm-newsletter-home-inner ci-dessous, qui
   suivent exactement le même motif. */
/* ✅ 20/08/2026 : position:relative ajouté — c'est ce conteneur (vidéo +
   titre + témoignage) qui sert désormais de référentiel aux flèches du
   carrousel, sorties de .sm-testimonial-video où elles se collaient sur les
   bords de la vidéo. */
.sm-testimonial-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sm-gap);
  align-items: center;
}

@media (min-width: 1024px) {
  .sm-testimonial-inner {
    grid-template-columns: 1fr 1fr;
  }
}

.sm-testimonial-video {
  position: relative;
  width: 100%;
  aspect-ratio: 480 / 340;
  max-width: 480px;
  margin-inline: auto;
  border-radius: 0;
  overflow: hidden;
  background-color: var(--sm-color-text);
}

.sm-testimonial-video video,
.sm-testimonial-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.sm-testimonial-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: #E8E6E6;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.sm-testimonial-arrow svg {
  width: 18px;
  height: auto;
}

.sm-testimonial-arrow--prev {
  left: var(--sm-space-sm);
}

.sm-testimonial-arrow--next {
  right: var(--sm-space-sm);
}

.sm-testimonial-arrow--next svg {
  transform: scaleX(-1);
}

.sm-testimonial-text {
  text-align: left;
}

/* 48px confirmé le 05/08/2026 sur le CSS source (au lieu des 50px de
   l'échelle h2 par défaut). */
.sm-testimonial-text h2 {
  margin-bottom: var(--sm-space-md);
  font-weight: 400;
}

/* ✅ 20/08/2026 : position:relative et padding-left retirés — ils n'existaient
   que pour caler le guillemet en absolu, qui est maintenant dans le flux. La
   citation s'aligne donc naturellement sur le reste de la colonne. */
.sm-testimonial-quote {
  max-width: 480px;
}

/* ✅ 20/08/2026 : repassé dans le flux normal — il était en position:absolute
   par-dessus le début de la citation. Il occupe maintenant sa propre ligne
   entre le titre et le témoignage, sans décaler le paragraphe. */
.sm-testimonial-quote-mark {
  display: block;
  width: 46px;
  height: 42px;
  margin-bottom: var(--sm-space-xs);
  color: var(--sm-color-accent);
}

.sm-testimonial-quote p {
  font-family: var(--sm-font-body);
  line-height: 2.2;
  font-style: italic;
  color: var(--sm-color-text);
  margin-bottom: 0;
}

.sm-testimonial-dots {
  display: flex;
  gap: 6px;
  margin-top: var(--sm-space-lg);
}

.sm-testimonial-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #E8E6E6;
  transition: background-color 0.2s ease;
}

.sm-testimonial-dot.is-active {
  background-color: rgba(255, 255, 255, 0.3);
}

/* ✅ Ajouté le 16/09/2026 (demande client, constaté à 416px) : corrections
   MOBILE UNIQUEMENT de la section « Ce que nos membres disent ».
   Aucune valeur desktop touchée — tout est sous 768px.

   - Flèches : elles étaient à `var(--sm-space-sm)` (16px) des bords de la
     row, donc posées SUR le bloc de texte (chevauchement mesuré à 416px).
     Elles sortent maintenant jusqu'au bord de la row, et le bloc de texte
     leur réserve une gouttière — sans marge négative : c'est le padding du
     texte qui libère la place, la composition reste dans le flux.
   - Titre et pastilles centrés : `.sm-testimonial-text` est aligné à gauche
     en desktop (validé), on ne centre qu'en mobile. */
@media (max-width: 767.98px) {
  .sm-testimonial-arrow--prev {
    left: 0;
  }

  .sm-testimonial-arrow--next {
    right: 0;
  }

  .sm-testimonial-text {
    padding-inline: 40px; /* 32px de flèche + 8px de respiration */
    text-align: center;
  }

  .sm-testimonial-quote-mark {
    margin-inline: auto;
  }

  .sm-testimonial-dots {
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   16. HOMEPAGE — INFO STUDIO
   Section ajoutée le 05/08/2026 (manquante) — 3 colonnes reprenant les
   coordonnées déjà présentes dans contenu-sm.md (bloc "coordonnées
   répété"). Fond clair, titres dorés.
   -------------------------------------------------------------------------- */
/* ✅ Ajouté le 20/08/2026 (demande explicite du client) : fond gris très
   clair rgb(250,250,251) — même teinte déjà utilisée pour .sm-footer
   (section 7), jamais reprise ici jusqu'à présent (section restée sur le
   fond blanc du site par défaut). */
.sm-section--info-studio {
  background-color: rgb(250, 250, 251);
}

/* ✅ Corrigé le 20/08/2026 (demande explicite du client, "gap uniforme
   24px sur tous les rows") : gap passé de var(--sm-space-lg) (48px) à
   var(--sm-gap) (24px) — même motif de conflit de spécificité que
   .sm-testimonial-inner ci-dessus (règle sur le même élément que
   .sm-row.sm-row--three-col, écrasait son gap:24px). */
.sm-info-studio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sm-gap);
  text-align: left;
}

/* ✅ Ajouté le 16/09/2026 (demande client, constaté à 416px) : en mobile la
   grille passe à 1 colonne pleine largeur — tout y est centré. Le
   `text-align: left` du desktop (3 colonnes) n'est pas touché.
   `margin-inline: auto` sur les liens : ce sont des éléments de type bloc,
   `text-align` ne suffirait pas à les recentrer. */
@media (max-width: 767.98px) {
  .sm-info-studio-grid {
    text-align: center;
    justify-items: center;
  }

  .sm-info-studio-col a.sm-info-studio-link {
    margin-inline: auto;
  }
}

@media (min-width: 768px) {
  .sm-info-studio-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 50px confirmé le 05/08/2026 sur le CSS source (ces 3 titres sont même
   des <h1> côté source, à 50px, doré, letter-spacing normal) — bien plus
   grand que l'échelle h3 par défaut (25px). */
.sm-info-studio-col h3 {
  margin-bottom: var(--sm-space-xs);
}


/* ✅ Corrigé le 17/08/2026 via source-hp.html/.css (composant réel
   comp-lzathl0g3) : taille réelle confirmée 20px (pas 16px hérité par
   défaut) sur les 3 colonnes. La couleur/graisse diffère en réalité PAR
   COLONNE (voir règles spécifiques ci-dessous) — la règle générique
   gris foncé/gras 700 du 06/08/2026 ne s'appliquait en fait qu'à une
   fausse moyenne, jamais vérifiée colonne par colonne : graisse réelle
   confirmée `normal` (400) partout, pas 700. */
/* ⚠️ Corrigé le 19/08/2026 (4e passe, demande explicite du client) :
   font-weight:400 supprimé — même directive que .sm-value-card p. */
.sm-info-studio-col p {
  margin-bottom: var(--sm-space-xs);
}

/* Colonne « Nous Contacter » : étiquettes "Tél."/"@." confirmées en doré
   secondaire `--txt:173,133,66` (= --sm-color-accent-gold), valeur
   (numéro/e-mail) en gris foncé `#414141` — les deux couleurs étaient
   confondues en une seule jusqu'ici, et le préfixe "@." (texte littéral
   du composant source, pas une icône) était absent. */
.sm-info-studio-label {
  color: var(--sm-color-accent-gold);
}

.sm-info-studio-contact p a {
  color: #414141;
}

/* Colonne « Nos Horaires » : texte confirmé NOIR pur (`#000000`), pas gris
   foncé comme la colonne Contact — les 2 colonnes avaient la même couleur
   par erreur jusqu'ici. */
.sm-info-studio-hours p {
  color: var(--sm-color-text);
}

/* ✅ Corrigé le 17/08/2026 via source-hp.css : ce sont des liens texte
   simples (`--txt:173,133,66`, aucune propriété de fond/bordure trouvée
   sur le composant réel) — couleur doré SECONDAIRE confirmée
   (--sm-color-accent-gold, pas --sm-color-accent), graisse `light`
   (helvetica-w01-light → normal/400 dans notre équivalence, pas 600),
   taille réelle 14px. */
.sm-info-studio-col a.sm-info-studio-link {
  font-family: var(--sm-font-accent);
  font-weight: 400;
  font-size: 14px;
  color: var(--sm-color-accent-gold);
}

/* --------------------------------------------------------------------------
   17. HOMEPAGE — NEWSLETTER
   ✅ Réaudité le 17/08/2026 via source-hp.html/.css (comp-lzathkyb3,
   comp-lzathkyc3/d2/e/f3) — écarts trouvés et corrigés, voir commentaire
   détaillé dans index-sm.html :
   - Colonnes réelles 249px/731px (ratio ~1:2.94, repris en fr) au lieu de
     1fr/1.2fr, texte centré (pas aligné à gauche).
   - Champs 200/200/230px (ratio repris en fr) en style "underline only"
     (bordure basse dorée secondaire, fond blanc, texte italique serif)
     au lieu d'une boîte à bordure pleine.
   - Case à cocher + reCAPTCHA + bouton confirmés sur UNE MÊME rangée
     horizontale (nouvelle classe `.sm-newsletter-home-row2`), pas empilés.
   -------------------------------------------------------------------------- */
/* ✅ Corrigé le 20/08/2026 (demande explicite du client, "gap uniforme
   24px sur tous les rows") : gap passé de var(--sm-space-lg) (48px) à
   var(--sm-gap) (24px) — même motif de conflit de spécificité que
   .sm-testimonial-inner (section 15). */
.sm-newsletter-home-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sm-gap);
  align-items: start;
}

@media (min-width: 1024px) {
  .sm-newsletter-home-inner {
    /* Ratio réel confirmé 249px:731px (conteneur source fixe 980px). */
    grid-template-columns: 249fr 731fr;
    align-items: center;
  }
}

/* Vérifié le 05/08/2026 : le titre "Newsletter" est la SEULE occurrence
   d'une police script sur toute la homepage source (police propriétaire
   Wix "the_bigmaker_personal", non disponible publiquement — Dancing
   Script utilisée comme équivalent libre le plus proche, cf. section 1),
   72px desktop, line-height 0.9em, couleur --sm-color-accent-gold
   (#AD8542, valeur exacte trouvée dans le CSS source pour ce titre
   précis — différente du doré principal des boutons/autres titres).
   ✅ Graisse corrigée le 17/08/2026 : `normal` (400) confirmé (base
   `--font_2: normal normal normal...`), pas 500 comme codé par erreur.
   ✅ Alignement corrigé le 17/08/2026 : centré (`text-align:center`
   inline confirmé sur le composant réel), pas hérité à gauche. */
.sm-newsletter-home-text {
  text-align: center;
}

.sm-newsletter-home-text h2 {
  margin-bottom: var(--sm-space-sm);
  font-family: var(--sm-font-script);
  font-weight: 400;
  font-size: 44px;
  line-height: 0.9;
  color: var(--sm-color-accent-gold);
}

@media (min-width: 768px) {
  .sm-newsletter-home-text h2 {
    font-size: 72px;
  }
}

/* Couleur doré secondaire confirmée le 06/08/2026 via source-homepage.html
   (styles calculés) — pas le noir par défaut. Taille/graisse confirmées le
   17/08/2026 via source-hp.html : 18px, `normal` (400, override explicite
   du gras par défaut de la classe `font_8`). */
/* ⚠️ Corrigé le 19/08/2026 (4e passe, demande explicite du client) :
   font-weight:400 supprimé — même directive que .sm-value-card p. */
.sm-newsletter-home-text p {
  color: var(--sm-color-accent-gold);
}

.sm-newsletter-home-form {
  display: flex;
  flex-direction: column;
  gap: var(--sm-space-sm);
}

.sm-newsletter-home-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sm-space-sm);
}

@media (min-width: 640px) {
  .sm-newsletter-home-row {
    /* Largeurs réelles confirmées 200/200/230px (Prénom/Nom/E-mail),
       reprises en fr — l'e-mail est légèrement plus large. */
    grid-template-columns: 200fr 200fr 230fr;
  }
}

/* ✅ Corrigé le 17/08/2026 via source-hp.css (`--brw:0px 0px 1px 0px`,
   `--brd:173,133,66`, `--bg:color_11`, `--fnt:italic normal normal 14px/
   1.4em georgia,...`) : champ "underline only" (bordure basse uniquement,
   dorée secondaire), fond blanc, texte italique serif — remplace la boîte
   à bordure pleine construite initialement (jamais vérifiée). */
.sm-newsletter-home-form input[type="text"],
.sm-newsletter-home-form input[type="email"] {
  width: 100%;
  padding: 10px 2px;
  border: none;
  border-bottom: 1px solid var(--sm-color-accent-gold);
  border-radius: 0;
  background-color: var(--sm-color-white);
  color: var(--sm-color-text);
  font-family: Georgia, 'Book Antiqua', 'Palatino Linotype', serif;
  font-style: italic;
  font-size: 14px;
}

/* ✅ Ajouté le 17/08/2026 : case à cocher CGU + reCAPTCHA + bouton
   confirmés sur une même rangée horizontale côté source (offsets `left`
   0/279/546px), pas empilés en colonne comme construit initialement. */
.sm-newsletter-home-row2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sm-space-md);
}

/* Police confirmée le 17/08/2026 via source-hp.css (`--fnt:italic normal
   700 14px/1.4em worksans-extralight,'work sans',sans-serif` sur le
   composant réel) — italique/gras, pas la taille générique héritée. */
.sm-newsletter-home-form label {
  display: flex;
  align-items: center;
  gap: var(--sm-space-xs);
  font-family: var(--sm-font-accent);
  font-style: italic;
  font-weight: 700;
  font-size: 14px;
}

/* Lien "termes et conditions" ajouté le 17/08/2026 (texte plat sans lien
   jusqu'ici) — couleur doré secondaire confirmée (`--txt:173,133,66` sur
   le composant réel). */
.sm-newsletter-home-form label a {
  color: var(--sm-color-accent-gold);
}

/* Taille ajustée le 17/08/2026 à la taille réelle du conteneur source
   (`#comp-lzathkz33 { width:234px; height:60px; }`) — le widget Google
   reCAPTCHA réel rend 304×78px, non intégré ici (décision du client, voir
   commentaire index-sm.html), taille du placeholder alignée sur le
   conteneur source en attendant. */
.sm-newsletter-recaptcha {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 234px;
  min-height: 60px;
  text-align: center;
  font-size: var(--sm-fs-small);
  color: var(--sm-color-muted);
  padding: var(--sm-space-sm);
  border: 1px dashed var(--sm-color-border);
  border-radius: 0;
}

/* ✅ Ajouté le 17/08/2026 : le bouton "S'abonner" utilise Cormorant
   Garamond semibold (pas Work Sans comme les autres boutons du site —
   police propre à ce composant, `--fnt:normal normal 700 16px/1.4em
   cormorantgaramond-semibold,...` confirmée), coins carrés
   (`--rd:0px`, pas var(--sm-radius)) et un survol fond noir/texte blanc
   (`--bgh:0,0,0; --txth:var(--color_36)`) au lieu du survol inversé blanc/
   doré standard de `.sm-btn--primary:hover`. */
.sm-btn--newsletter {
  font-family: var(--sm-font-heading);
  border-radius: 0;
  /* ✅ Précisé le 18/08/2026 (audit boutons) : réaffirmés explicitement
     car `.sm-btn--primary` définit maintenant ses propres 15px/0.05em
     (famille de bouton différente) qui gagneraient sinon sur ce bouton
     (combo de classes `sm-btn sm-btn--primary sm-btn--newsletter`). */
  font-size: 16px;
  letter-spacing: normal;
}

.sm-btn--newsletter:hover {
  background-color: #000000;
  color: var(--sm-color-white);
  border-color: #000000;
}

/* ✅ Ajouté le 17/08/2026 : message de confirmation post-soumission
   confirmé présent dans le DOM source (text-align:right, 16px, doré
   principal #CCA252) — masqué par défaut ([hidden]), piloté par JS côté
   Wix ; aucun backend de formulaire équivalent prévu dans ce périmètre. */
/* ⚠️ Corrigé le 19/08/2026 (4e passe, demande explicite du client) :
   font-weight:400 supprimé — même directive que .sm-value-card p. */
.sm-newsletter-success {
  text-align: right;
  font-size: 16px;
  color: var(--sm-color-accent);
}

/* --------------------------------------------------------------------------
   18. FONDS DE SECTION — SAGE / DORÉ
   Ajouté le 05/08/2026, corrigé le 06/08/2026 via source-homepage.html
   (styles calculés Playwright) : fond vert sauge rgb(93,114,96) confirmé
   uniquement pour Disciplines (capture d'écran) — Nos valeurs et Planning
   ont été retirés de .sm-section--sage (voir sections 10 et 11 : Nos
   valeurs est en fait gris clair --sm-color-bg-alt, Planning est en fait
   doré, nouvelle classe .sm-section--gold ci-dessous). Les titres (h2-h6)
   restent dorés via la règle globale ; le texte courant passe en blanc
   pour rester lisible sur les fonds foncés.
   -------------------------------------------------------------------------- */
.sm-section--sage {
  background-color: var(--sm-color-sage);
  color: var(--sm-color-white);
}

.sm-section--sage p {
  color: rgba(255, 255, 255, 0.9);
}

/* Fond doré confirmé le 06/08/2026 pour la section Planning (homepage +
   page dédiée) — voir sections 11/21. */
.sm-section--gold {
  background-color: var(--sm-color-accent);
  color: var(--sm-color-white);
}

.sm-section--gold p {
  color: rgba(255, 255, 255, 0.9);
}

/* --------------------------------------------------------------------------
   19. PAGES INTÉRIEURES — HERO GÉNÉRIQUE
   Ajouté le 05/08/2026 (ÉTAPE 3) : bannière hero réutilisable pour toutes
   les pages intérieures (image de fond unique + overlay + titre + texte),
   par opposition au diaporama spécifique à la homepage. Hauteur en vh,
   conforme à PROJET_TEMPLATE.md n°6.
   -------------------------------------------------------------------------- */
.sm-page-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  padding-block: var(--sm-space-xl);
  overflow: hidden;
  text-align: center;
  color: var(--sm-color-white);
}

@media (min-width: 768px) {
  .sm-page-hero {
    min-height: 60vh;
  }
}

.sm-page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sm-page-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.5) 100%);
}

.sm-page-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.sm-page-hero-title {
  margin-bottom: var(--sm-space-md);
  color: var(--sm-color-white);
}

.sm-page-hero-text {
  font-size: 20px;
  color: var(--sm-color-white);
  margin-inline: auto;
}

.sm-page-hero-text:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   20. PAGE LE STUDIO
   ✅ Audité le 06/08/2026 via source-lestudio.html (capture Playwright,
   même méthode que l'audit homepage du 06/08/2026 — voir CLAUDE_CONTEXT.md
   "Audit Le Studio du 06/08/2026"). Écarts confirmés et corrigés :
   - Le Hero n'est PAS le composant générique .sm-page-hero (overlay sombre
     + titre blanc + 2 paragraphes dedans) : c'est une photo avec un badge
     circulaire décoratif (asset "Sans titre-1_edited.png", déjà dans
     assets/images/) contenant le titre doré en police script, SANS aucun
     paragraphe dans le Hero. Nouveau composant .sm-studio-hero ci-dessous,
     propre à cette page — décision de reproduction fidèle validée par le
     client le 06/08/2026.
   - Les 2 paragraphes d'intro + les 3 "points forts" forment EN RÉALITÉ une
     seule section empilée en une colonne (même motif que Hero+Nos valeurs
     sur la homepage) sur fond BLANC — PAS une grille 3 colonnes sur fond
     gris comme construit initialement.
   - Le CTA "Votre séance découverte" est un LIEN TEXTE doré secondaire
     (#AD8542) en police script avec une flèche — PAS un bouton plein doré. */
.sm-studio-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  padding-block: var(--sm-space-xl);
  overflow: hidden;
}

.sm-studio-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Intro (2 paragraphes) + 3 points forts : une seule colonne centrée,
   même motif que .sm-values-intro / .sm-values-grid sur la homepage.
   Paragraphes confirmés 20px / graisse normale (400) — pas la graisse
   légère (300) par défaut du corps de texte.
   ✅ Corrigé le 19/08/2026 (audit largeurs de conteneurs, page Le Studio) :
   980px confirmé (`#comp-lzaxnx7f { width: 980px }`, span la section
   entière) — 760px n'était jamais vérifié pour ce paragraphe précis (même
   erreur déjà corrigée sur `.sm-values-intro`/`.sm-planning-inner` côté
   homepage le 19/08/2026). */
.sm-highlights-intro {
  max-width: 980px;
  margin-inline: auto;
  text-align: center;
}

.sm-highlights-intro p,
.sm-highlight-card p {
  font-weight: 400;
}


/* ✅ Corrigé le 19/08/2026 (audit largeurs) : les 3 titres "points forts"
   (Petits groupes / Bienveillance et bonne humeur / Des coachs experts)
   sont chacun confirmés à 980px pleine largeur côté source
   (`#comp-lzaxrsfc`/`-thk9`/`-ummm`), empilés sans traitement "carte
   étroite" — 640px n'était jamais vérifié (aucune bordure/fond de carte
   n'existe par ailleurs sur `.sm-highlight-card`, seul le conteneur était
   artificiellement rétréci). */
.sm-highlights-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sm-space-lg);
  max-width: 980px;
  margin-inline: auto;
  margin-top: var(--sm-space-lg);
  text-align: center;
}

.sm-highlight-card h3 {
  margin-bottom: var(--sm-space-xs);
}

.sm-highlight-card p {
  margin-bottom: 0;
}

.sm-highlights-cta {
  text-align: center;
  margin-top: var(--sm-space-lg);
}

/* Lien CTA texte (pas un bouton) : doré secondaire, police script, flèche
   décorative — même famille de police que le titre du Hero (Hellstand
   côté source, Dancing Script en équivalent, cf. section 1).
   ✅ Corrigé le 17/08/2026 : taille confirmée 35px desktop / icône 45px
   desktop (`#comp-lzc7wmra`, composant bouton réel), pas 22px/28px — le
   tracé SVG de la flèche a aussi été remplacé par le vrai tracé source
   dans page-le-studio.html (aucun n'avait pu être extrait le 06/08/2026). */
.sm-highlights-cta a {
  display: inline-flex;
  align-items: center;
  gap: var(--sm-space-xs);
  font-family: var(--sm-font-script);
  font-weight: 400;
  font-size: 24px;
  color: var(--sm-color-accent-gold);
}

@media (min-width: 768px) {
  .sm-highlights-cta a {
    font-size: 35px;
  }
}

.sm-highlights-cta a svg {
  width: 30px;
  height: auto;
}

@media (min-width: 768px) {
  .sm-highlights-cta a svg {
    width: 45px;
  }
}

/* "Les professeurs" — titre + trait décoratif (absents de la construction
   initiale) confirmés le 06/08/2026 via source-lestudio.html.
   ⚠️ 20/08/2026 : les 2 illustrations décoratives séparées ont été
   supprimées (remplacées par comp_professeurs dans le bloc Meryl).
   position:relative/overflow:hidden conservés pour le fond de section. */
.sm-team {
  position: relative;
  overflow: hidden;
}

.sm-team-heading {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--sm-color-white);
  text-shadow: 0 4px 5px rgba(0, 0, 0, 0.4);
  margin-bottom: var(--sm-space-sm);
}

/* Largeur/épaisseur corrigées le 17/08/2026 : 208px / 1px confirmés
   (`#comp-lzc8d3ig`), pas 90px / 2px. */
.sm-team-divider {
  position: relative;
  z-index: 1;
  width: 208px;
  height: 1px;
  margin: 0 auto var(--sm-space-xl);
  background-color: var(--sm-color-accent);
  border: 0;
}






/* Bloc Meryl : confirmé le 06/08/2026 en une seule colonne centrée (photo →
   nom → sous-titre → 3 sous-sections), PAS un layout 2 colonnes photo/bio.
   Nom et sous-titre sont 2 éléments distincts dans la source (pas un seul
   titre fusionné "Fondatrice et Coach — Meryl Costa").
   ✅ Corrigé le 06/08/2026 : `margin-inline: auto var(--sm-space-xl)`
   fixait margin-right à 48px au lieu de centrer le bloc (margin-left/right
   doivent être égaux pour un centrage horizontal) — le bloc n'était donc
   pas réellement centré dans la section malgré text-align:center sur son
   contenu. Centrage corrigé sur demande du client (contenu entièrement
   centré : photo, nom, sous-titre, texte Mon parcours/Ma philosophie/Mon
   engagement).
   ✅ Corrigé le 19/08/2026 (audit largeurs) : 640px appliquait une même
   largeur à TOUT le bloc (photo, nom, sous-titre, texte de bio), alors que
   la source a une largeur DIFFÉRENTE par élément (bio confirmée 944px,
   sous-titres "Mon parcours" etc. confirmés 722px — voir
   `.sm-team-founder-bio` ci-dessous) — élargi à 980px pour ne plus les
   clipper, chaque sous-élément reprend maintenant sa propre largeur
   source. Photo (max-width:320px) et rôle "Fondatrice et Coach" (texte
   naturel, non contraint) restent inchangés, hors périmètre de cet audit. */
.sm-team-founder {
  max-width: 980px;
  margin: 0 auto var(--sm-space-xl);
  text-align: center;
}

/* ✅ Corrigé le 19/08/2026 (audit tailles photos) : 400×385px confirmé en
   dur des deux côtés côté source (`#comp-lzc80vfx { width:400px;
   height:385px }` ET attributs `width="400" height="385"` de l'`<img>`
   lui-même, `sizes="400px"`) — 320px n'était jamais mesuré précisément. */
/* ✅ Ajouté le 20/08/2026 : conteneur de composition pour la photo de Meryl.
   Il sert de référentiel de positionnement à l'illustration végétale
   comp_professeurs, posée en arrière-plan et centrée sur la photo (l'asset
   contient toute la composition, il remplace les 2 SVG décoratifs séparés
   gauche/droite qui ont été supprimés). */
.sm-team-founder-photo-wrap {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
  margin-bottom: var(--sm-space-md);
}

/* Arrière-plan : centré sur la photo, plus large qu'elle pour déborder, et
   sous elle (z-index inférieur). */
.sm-team-founder-bg {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150%;
  max-width: none;
  height: auto;
  pointer-events: none;
}

.sm-team-founder-photo {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 400 / 385;
  object-fit: cover;
  margin-inline: auto;
  margin-bottom: var(--sm-space-md);
  border-radius: var(--sm-radius);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.sm-team-founder-name {
  color: var(--sm-color-white);
  margin-bottom: 0;
}

/* Sous-titre confirmé en police script dorée (même famille que le titre du
   Hero et "Newsletter" sur la homepage). ✅ Taille corrigée le 17/08/2026 :
   40px desktop confirmé (`font-size:40px` inline, `#comp-lzay9xhk`) — pas
   32px (jamais mesuré précisément, la valeur "40px" déjà écrite dans ce
   commentaire n'avait en fait jamais été reportée dans la règle CSS
   elle-même). Mobile extrapolé au prorata du reste de l'échelle. */
.sm-team-founder-role {
  font-family: var(--sm-font-script);
  font-weight: 400;
  color: var(--sm-color-accent);
  font-size: 26px;
  margin-bottom: var(--sm-space-lg);
}

@media (min-width: 768px) {
  .sm-team-founder-role {
    font-size: 40px;
  }
}

/* ✅ Largeur ajoutée le 19/08/2026 (audit largeurs) : 722px confirmé
   (`#comp-lzay66t5 { width: 722px }`, sous-titre "Mon parcours") — hérite
   maintenant de son propre max-width plutôt que du 640px générique de
   `.sm-team-founder` (voir plus haut), qui le clippait. */
.sm-team-founder-bio h2 {
  max-width: 722px;
  margin-inline: auto;
  font-size: var(--sm-fs-h3);
  margin-bottom: var(--sm-space-xs);
}

.sm-team-founder-bio h2:not(:first-child) {
  margin-top: var(--sm-space-md);
}

/* Paragraphes confirmés 20px. Justifiés côté source ; centrés ici sur
   demande du client le 06/08/2026 (bloc "Les professeurs" entièrement
   centré horizontalement), au lieu de l'alignement à gauche retenu lors de
   l'audit initial.
   ✅ Corrigé le 17/08/2026 via source-lestudio.html/.css : graisse NORMALE
   confirmée (`font-weight:normal` inline sur le span le plus imbriqué),
   pas gras (700) comme codé le 06/08/2026 (lecture Playwright erronée sur
   ce point précis) ; couleur blanche confirmée PURE `#FFFFFF` (pas héritée
   à 90% d'opacité de `.sm-section--sage p`).
   ✅ Largeur ajoutée le 19/08/2026 (audit largeurs) : 944px confirmé
   (`#comp-lzay4j4w { width: 944px }`, quasi pleine largeur de la section
   980px) — hérite maintenant de son propre max-width plutôt que du 640px
   générique de `.sm-team-founder` (voir plus haut), qui le clippait. */
.sm-team-founder-bio p {
  max-width: 944px;
  margin-inline: auto;
  font-weight: 400;
  color: var(--sm-color-white);
  text-align: center;
}


/* ✅ Ajouté le 06/08/2026 sur demande du client : Thomas et Rachel sortis de
   la section "Les professeurs" (fond sage) et déplacés dans leur propre
   section juste en dessous, fond blanc — conforme à source-lestudio.html où
   ce bloc (comp-m4ttf7ow) est en réalité une section Wix séparée de celle de
   Meryl, avec son propre fond blanc (confirmé via
   background-color:rgb(255,255,255) sur bgLayers_comp-m4ttf7ow) et 5 formes
   vectorielles de feuilles en arrière-plan (composants wixui-vector-image,
   fill #414141, opacity 0.4, rotations variées). Les 5 feuilles sont des
   <path> SVG inline dans le DOM source (pas des images bitmap) — path exact
   non extrait (imbrication trop profonde), reconstruites ici en silhouettes
   de feuilles approximatives dans le même esprit visuel (mêmes teinte/
   opacité/dispersion en rotation), comme la flèche décorative Disciplines
   (section 12). Prénom en doré (via règle globale h2-h6, pas de sage comme
   dans le bloc Meryl) et spécialité en police script dorée, sur demande
   explicite du client.

   ✅ Réaudité le 17/08/2026 via source-lestudio.html/.css (DOM + CSS bruts
   F12, structure identique reconfirmée sur les fiches Thomas ET Rachel
   indépendamment) — écarts trouvés et corrigés :
   - Photo confirmée 400×385px (`sizes="400px"`, attributs réels de l'<img>)
     — ratio quasi carré ~1.04, PAS 3:4 portrait (jamais vérifié, supposé
     par cohérence avec d'autres photos rectangulaires du site).
   - Rôle ("Coach Cross Training"/"Coach de Yoga") confirmé 50px desktop en
     doré PRINCIPAL `#CCA252` (`--sm-color-accent`) — pas 20px en doré
     SECONDAIRE `#AD8542` (`--sm-color-accent-gold`), les deux dorés du site
     avaient été confondus.
   - Prénom confirmé 30px flat côté source (`font-size:30px` inline) — pas
     l'échelle h2 par défaut héritée qui rendait 50px desktop. */
.sm-partners {
  position: relative;
  overflow: hidden;
  background-color: var(--sm-color-white);
}

/* ✅ Remplacé le 17/08/2026 (retour client avec capture du rendu réel) :
   `.sm-partners-leaves` (5 silhouettes de feuilles génériques éparpillées
   sur TOUTE la section, approximation du 06/08/2026 faute d'avoir pu
   extraire le tracé exact) était une mauvaise lecture de la structure
   réelle — les vraies illustrations sont 5 feuilles DISTINCTES et bien
   plus détaillées (une par slot, dupliquées à l'identique derrière CHAQUE
   photo, pas éparpillées dans le fond de section) : `comp-m4uz1igv`
   (viewBox 111×128, 847 tracés), `comp-m4uz1ih0` (viewBox 668×590 —
   EXACTEMENT le même asset que la fleur "Nos disciplines"/"Les
   professeurs", réutilisé une 3e fois), `comp-m4uz1ih110` (viewBox 594×554,
   267 tracés), `comp-m4uz1ih31` (viewBox 90×99, 533 tracés), `comp-m4uz1ih413`
   (viewBox 504×228, 49 tracés) — confirmées dupliquées à l'identique
   derrière Thomas ET Rachel. Position/taille/rotation extraites du CSS
   mesh-grid source (mêmes 5 angles de rotation EXACTS que
   `.sm-offers-leaf` sur la homepage : 46.4573°/259.062°/133.002°/
   254.905°/40.2171° — confirme qu'il s'agit du même composant Wix
   réutilisé, juste avec un habillage graphique différent et une largeur
   de référence 510px au lieu de 451px), converties en `cqw` selon la même
   méthode que `.sm-offers-leaf` : valeur_cqw = valeur_px × 100 / 510.
   Opacité 0.4 confirmée (`--opacity:0.4` sur chacun des 5 composants) ;
   couleurs de remplissage conservées telles quelles depuis les attributs
   `fill` d'origine des tracés (certains n'en ont pas → noir par défaut). */
/* ✅ Corrigé le 19/08/2026 (audit tailles photos) : 400×385px confirmé en
   dur des deux côtés côté source (`#comp-m4ttfqjy`/`comp-m4ttjoi6 {
   width:400px; height:385px }` ET attributs `width="400" height="385"`
   des `<img>` Thomas/Rachel eux-mêmes, `sizes="400px"`) — 280px n'était
   jamais mesuré précisément. */
.sm-partner-photo-wrap {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
  /* ✅ 20/08/2026 : marge basse déplacée depuis .sm-partner-photo vers ce
     wrapper — sinon le centre du wrapper (donc de l'image de fond) tombait
     8px sous le centre réel de la photo. */
  margin-bottom: var(--sm-space-sm);
}



/* ⚠️ EXCEPTION DOCUMENTÉE au padding standard des rows (STRUCTURE.md) :
   cette row est la seule de la page à porter 2 grandes photos côte à côte ;
   avec les 203px de --sm-padding-row de chaque côté, les 2 colonnes tombaient
   beaucoup trop étroites. Le padding horizontal est donc annulé UNIQUEMENT
   ici, via un sélecteur scopé à la page. --sm-padding-row n'est pas touchée
   et toutes les autres .sm-row du site gardent leur padding. */
.sm-page--le-studio .sm-partners-grid {
  padding-inline: 0;
}

.sm-partners-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sm-space-lg);
  text-align: center;
}

/* ✅ Largeur corrigée le 19/08/2026 (audit largeurs) : le texte de rôle de
   Thomas ET Rachel est confirmé exactement 400px côté source
   (`#comp-m4ttfqk4`/`comp-m4ttjoie { width: 400px }`, même largeur que
   leur photo, déjà confirmée 400×385px) — à 640px pour les 2 cartes
   ensemble, chaque colonne ne faisait que ~296px, plus étroite que ce
   texte. 848px = 2×400px + l'écart `--sm-space-lg` (48px), pour que
   chaque colonne atteigne exactement 400px. */
@media (min-width: 640px) {
  .sm-partners-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 848px;
    margin-inline: auto;
  }
}

/* Photo rectangulaire (pas circulaire comme dans l'ancien bloc coaches) sur
   demande du client. Ratio corrigé le 17/08/2026 : 400×385px confirmé
   (~1.04, quasi carré) — pas 3:4 (jamais vérifié). */
/* ✅ Ajouté le 20/08/2026 : même principe que .sm-team-founder-bg — l'asset
   Comp studio m.png remplace les 5 feuilles SVG qui se superposaient aux
   photos. Centré sur la photo, en dessous d'elle. */
/* ✅ .sm-contact-bg ajouté au groupe le 20/08/2026 : la page Contact reprend
   la même composition (fond centré derrière la photo, z-index inférieur) —
   même règle plutôt qu'une deuxième implémentation identique. */
.sm-partner-bg,
.sm-contact-bg {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150%;
  max-width: none;
  height: auto;
  pointer-events: none;
}

.sm-partner-photo {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 400 / 385;
  object-fit: cover;
  border-radius: var(--sm-radius);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Prénom en serif doré : hérite de la règle globale h2-h6 (var(--sm-color-accent)),
   pas d'override de couleur nécessaire. Taille corrigée le 17/08/2026 :
   30px flat confirmé côté source (pas l'échelle h2 par défaut/50px desktop). */
.sm-partner-name {
  font-size: 30px;
  margin-bottom: 2px;
}

/* ✅ Corrigé le 17/08/2026 : couleur doré PRINCIPAL confirmée (`#CCA252` =
   --sm-color-accent, pas --sm-color-accent-gold) et taille 50px desktop
   (pas 20px) — les 2 dorés du site étaient confondus. */
.sm-partner-role {
  font-family: var(--sm-font-script);
  font-weight: 400;
  color: var(--sm-color-accent);
  font-size: 28px;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .sm-partner-role {
    font-size: 36px;
  }
}

/* --------------------------------------------------------------------------
   21. PAGE PLANNING
   Fond DORÉ confirmé le 06/08/2026 (cf. section 11/18, correction homepage,
   classe .sm-section--gold) — pas de hero séparé sur cette page côté
   source (uniquement ce bloc), donc pas de .sm-page-hero ici.
   ✅ Auditée le 07/08/2026 directement contre source-planning.html (capture
   Playwright réelle, jusqu'ici cette page n'était déduite que par analogie
   avec la homepage) : ordre réel confirmé titre → accroche → image →
   bouton (le bouton était avant l'image dans la construction initiale) ;
   accroche confirmée blanc pur (pas blanc à 90% hérité de
   .sm-section--gold p), 18px gras (700). Voir CLAUDE_CONTEXT.md > "Décisions
   & notes" pour le détail.
   ✅ Corrigé le 19/08/2026 (audit largeurs) : 640px clippait uniformément
   le H1, l'accroche ET l'image à 640px, alors que les 3 sont confirmés à
   980px pleine largeur côté source (`#comp-lzb1mw0g`/`comp-lzb1mw0j` =
   980px, `#comp-m4tgt7dz` = 980×693px, `width="980" height="693"` sur
   l'`<img>` elle-même) — même schéma déjà corrigé sur Values/Planning
   teaser (homepage) et Highlights/bio Meryl (Le Studio). Le bouton
   "Télécharger le planning 2026" reste inchangé : sa boîte source
   (`#comp-m4uzfnna` = 291×40px) est de toute façon bien en-dessous de
   640px, donc jamais clippée — pas de correction nécessaire ici. */
/* ✅ 20/08/2026 : max-width/margin retirés — la largeur est désormais donnée
   par le système .sm-section__header / .sm-row (STRUCTURE.md), plus par un
   conteneur local. Seul le centrage du texte reste propre à cette page. */
.sm-planning-page-inner {
  text-align: center;
}

/* ✅ Corrigé le 18/08/2026 (audit tailles vs source-planning.html.txt) :
   50px confirmé en dur (style inline `font-size:50px` sur le composant
   source) — héritait auparavant du h1 global (60px). */
.sm-planning-page-inner h1 {
  color: var(--sm-color-white);
  margin-bottom: var(--sm-space-sm);
}

.sm-planning-page-inner p {
  color: var(--sm-color-white);
  font-weight: 700;
}

.sm-planning-page-image {
  margin-top: var(--sm-space-xl);
}

.sm-planning-page-image img {
  border-radius: var(--sm-radius);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.sm-planning-page-inner .sm-btn {
  margin-top: var(--sm-space-xl);
}

/* --------------------------------------------------------------------------
   22. PAGE LES COURS
   ✅ Reconstruite le 07/08/2026 (ÉTAPE 3) via source-lescours.html (capture
   Playwright réelle sur https://www.studio-m.re/lescours). La construction
   du 05/08/2026 avait sous-estimé la page : pas de hero générique sombre
   mais un badge décoratif circulaire (même composant que Le Studio) avec
   un CTA doré superposé à la photo ; chaque fiche discipline a en réalité
   SA PROPRE photo (aucune n'est en icône silhouette) dans une mise en page
   à 2 colonnes en alternance gauche/droite (pas empilée) ; 3 galeries
   supplémentaires (carrousels Wix Pro Gallery non légendés, 17 à 20 photos
   chacune) suivent Stretching / Cross Training / Hatha Yoga, en plus de la
   galerie "Le matériel Pilates" déjà identifiée le 05/08/2026. Détail
   complet des écarts et décisions validées par le client le 07/08/2026 :
   voir CLAUDE_CONTEXT.md > "Audit Les Cours du 07/08/2026".

   ✅ Réaudité le 18/08/2026 via source-lescours.html/.css/.js (DOM + CSS
   bruts F12 desktop fournis par le client, même méthode que les réaudits
   Homepage/Le Studio du 17/08/2026 — croisement id de composant Wix ↔
   attributs/styles inline réels, en lisant systématiquement le span le
   plus imbriqué). Détail complet des écarts trouvés (badge Hero, sous-titre,
   description, bloc "Recommandé pour", lien CTA) : voir CLAUDE_CONTEXT.md
   > "Réaudit Les Cours du 18/08/2026".

   ✅ Perfectionnement du 18/08/2026 (2e passe) — méthode "capture live vs
   build" (Playwright, comparaison directe https://www.studio-m.re/lescours
   vs aperçu autonome) + lecture ciblée de source-lescours.css.txt pour
   confirmer par les valeurs calculées réelles (pas seulement le CSS brut).
   Écarts trouvés et corrigés, voir CLAUDE_CONTEXT.md > "Perfectionnement
   Les Cours du 18/08/2026 (2e passe)" :
   - Badge du Hero : confirmé positionné très à gauche, débordant hors du
     cadre visible (formule Wix `calc(50% - 490px) + left:-361px` = environ
     -34% de la largeur du badge), pas centré comme construit.
   - Photos des 9 fiches : `border-radius: 20px` confirmé (`--rd` du
     composant réel) et **aucune** ombre portée — pas `--sm-radius` (4px)
     + `box-shadow` comme construit.
   - Icône soleil décorative (même asset que Nos valeurs/Disciplines,
     `3864c6_de0c52e3...png`) confirmée superposée au coin supérieur
     extérieur de la photo sur au moins 7 des 9 fiches (Pilates, Cross
     Training, Yoga Vinyasa, Yoga Prénatal et Postnatal confirmées
     visuellement ; 6 composants dédiés à 250×250px trouvés dans le CSS
     source) — appliquée aux 9 fiches par cohérence visuelle plutôt que de
     deviner laquelle des 2 restantes en serait dépourvue.
   -------------------------------------------------------------------------- */
.sm-lescours-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sm-space-md);
  min-height: 55vh;
  padding: var(--sm-space-xl) var(--sm-gutter);
  overflow: hidden;
  text-align: center;
}

.sm-lescours-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Accroche : confirmée 20px/25px desktop, police de titre (Cormorant
   Garamond), gris foncé #242323 — pas le corps de texte par défaut. */
.sm-lescours-intro {
  text-align: center;
}

.sm-lescours-intro p {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: 0;
  font-family: var(--sm-font-heading);
  color: #242323;
}


/* Fiches disciplines : 2 colonnes en alternance gauche/droite à partir du
   tablet (confirmé via les offsets `left` réels du DOM source — voir note
   ci-dessus), empilées (photo au-dessus du texte) en mobile. */
.sm-course-card {
  padding-block: var(--sm-space-lg);
}

.sm-course-card:first-child {
  padding-top: 0;
}

.sm-course-card:last-child {
  padding-bottom: 0;
}

@media (min-width: 768px) {
  .sm-course-card {
    display: flex;
    align-items: center;
    gap: var(--sm-space-xl);
  }

  .sm-course-card--reverse {
    flex-direction: row-reverse;
  }
}

/* ✅ Corrigé le 18/08/2026 (perfectionnement, 2e passe) : `.sm-course-photo`
   passé sous `.sm-course-photo-wrap` pour accueillir l'icône soleil
   décorative (voir `.sm-course-sun` ci-dessous). border-radius/ombre
   confirmés via le style calculé réel du composant source (`comp-lzayr15w5`
   et équivalents) : `border-radius:20px`, **aucune** ombre portée — pas
   `--sm-radius` (4px) + box-shadow comme construit le 05/08/2026 (jamais
   vérifié). */
.sm-course-photo-wrap {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin-bottom: var(--sm-space-sm);
}

@media (min-width: 768px) {
  .sm-course-photo-wrap {
    flex: 0 0 400px;
    margin-bottom: 0;
  }

  .sm-course-body {
    flex: 1;
    min-width: 0;
  }
}

.sm-course-photo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: none;
}

/* ✅ Ajouté le 18/08/2026 (perfectionnement, 2e passe) : icône soleil
   décorative confirmée superposée au coin supérieur EXTÉRIEUR de la photo
   (côté opposé au texte) sur au moins 7 des 9 fiches (même asset que
   `.sm-value-icon`/`.sm-discipline-sun` sur la homepage,
   `3864c6_de0c52e3...png`) — absente de la construction initiale. Taille/
   position dérivées du composant source (icône 250×250px sur une photo
   400×400px, décalée de -121px/-113px par rapport à la photo, soit ~62%
   de sa taille et ~30%/28% de décalage) ; appliquée aux 9 fiches par
   cohérence visuelle. Se reflète à droite sur les fiches inversées
   (`.sm-course-card--reverse`), cohérent avec le décalage observé côté
   source (icône toujours du côté opposé au texte). */
.sm-course-sun {
  position: absolute;
  z-index: 0;
  left: -30%;
  top: -28%;
  width: 62%;
  height: auto;
  pointer-events: none;
}

@media (min-width: 768px) {
  .sm-course-card--reverse .sm-course-sun {
    left: auto;
    right: -30%;
  }
}

/* ✅ Corrigé le 18/08/2026 via source-lescours.html/.css (DOM brut F12,
   `h3.font_3` sur les 9 fiches, ex. `#comp-lzaz29a6`) : 25px confirmé
   (échelle h3 par défaut, inchangé), mais couleur et style réels sont
   `#242323` (gris foncé, `.font_3` par défaut du site — même valeur que
   l'accroche `.sm-lescours-intro p`) et NORMAL (pas italique) — le doré
   `--sm-color-accent` + l'italique construits le 05/08/2026 n'avaient
   jamais été vérifiés contre la source, aucun override de couleur/style
   trouvé sur aucune des 9 fiches. */
.sm-course-subtitle {
  font-family: var(--sm-font-heading);
  color: #242323;
  font-size: var(--sm-fs-h3);
  margin-bottom: var(--sm-space-sm);
}

/* ✅ Corrigé le 18/08/2026 via source-lescours.html/.css : graisse réelle
   NORMALE (`font-weight:normal` sur le span le plus imbriqué, confirmé
   identique sur les 9 fiches) — pas gras (700) comme conclu le 07/08/2026
   par l'audit Playwright, qui avait lu un span ancêtre au lieu du span le
   plus imbriqué (même piège de lecture déjà rencontré et corrigé sur la
   bio de Meryl, page Le Studio, le 17/08/2026). 20px confirmé flat côté
   source (desktop uniquement, F12) — 18px mobile conservé par
   extrapolation. */
/* ✅ 16/09/2026 (demande client) : `text-align: justify` retiré. C'était la
   seule occurrence de `justify` de toute la feuille — le reste du site laisse
   les paragraphes hériter de l'alignement par défaut. La propriété est donc
   supprimée plutôt que remplacée par un `text-align: left` explicite, pour
   que ce paragraphe se comporte comme tous les autres. */
.sm-course-desc {
  font-weight: 400;
}


/* ✅ Corrigé le 18/08/2026 via source-lescours.html/.css : le bloc
   "Recommandé pour" est en réalité composé de DEUX paragraphes distincts
   côté source (confirmé identique sur les 6 fiches qui en ont un — Pilates,
   Stretching, Pilates Sculpt, Cross Training, Hatha Yoga, Yoga Vinyasa) :
   une phrase d'intro littérale ("Le [discipline] est particulièrement
   recommandé pour :", 20px, `#414141`) puis les hashtags eux-mêmes (20px,
   doré secondaire `#AD8542` = `--sm-color-accent-gold`) — pas une seule
   ligne 12px gris atténué comme construit le 05/08/2026 (jamais vérifiée,
   texte lui-même paraphrasé "Recommandé pour :" au lieu du texte réel du
   site, contraire à la règle "zéro invention"). */
.sm-course-tags-label {
  font-size: 18px;
  font-weight: 400;
  color: #414141;
  margin-bottom: var(--sm-space-xs);
}

.sm-course-tags {
  font-size: 18px;
  font-weight: 400;
  color: var(--sm-color-accent-gold);
}

@media (min-width: 768px) {
  .sm-course-tags-label,
  .sm-course-tags {
    font-size: 20px;
  }
}

/* CTA "Votre séance découverte" : confirmé comme un lien texte doré
   secondaire en police script (même famille que les CTA similaires sur Le
   Studio), aligné à droite du bloc texte — pas un bouton bordé plein comme
   construit initialement. */
.sm-course-cta {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--sm-space-md);
}

.sm-course-cta a {
  display: inline-flex;
  align-items: center;
  gap: var(--sm-space-xs);
  font-family: var(--sm-font-script);
  font-weight: 400;
  color: var(--sm-color-accent-gold);
  font-size: 20px;
}

@media (min-width: 768px) {
  /* ✅ Corrigé le 18/08/2026 (audit tailles vs source-lescours.css.txt) :
     35px confirmé à l'identique sur les 9 instances du bouton
     (StylableButton2545352419__label) — 24px était une estimation jamais
     vérifiée. */
  .sm-course-cta a {
    font-size: 35px;
  }
}

.sm-course-cta a svg {
  width: 24px;
  height: auto;
}

/* ✅ Ajouté le 20/08/2026 (demande client) : survol des 9 CTA « Votre séance
   découverte », d'après le rendu du site source. État normal strictement
   inchangé — tout est ici dans le `:hover`.

   Ciblage volontairement étroit : `.sm-course-cta` n'existe que dans
   page-les-cours.html. Aucune règle globale (`.sm-btn`, boutons dorés, CTA
   des autres pages, footer) n'est touchée.

   La flèche est un SVG tracé en `stroke="currentColor"` : elle suit donc le
   `color` du lien et passe en blanc d'elle-même, sans règle dédiée.
   Le `border-radius` et la marge ne valent qu'au survol. */
.sm-course-cta a:hover {
  background-color: #ad8542;
  color: #fff;
  border-radius: 7px;
  margin: 0 3px 0 0;
}

/* ✅ Corrigé le 07/08/2026 (3e passe, retour client) : "Le matériel
   Pilates" est une section indépendante sur le site réel, PAS un bloc
   imbriqué dans la fiche Pilates (confirmé via source-lescours.html +
   contenu-sm.md). Titre en police script dorée, 75px desktop confirmé. */
.sm-lescours-material {
  text-align: center;
}

.sm-lescours-material-title {
  font-family: var(--sm-font-script);
  font-weight: 400;
  color: var(--sm-color-accent-gold);
  font-size: 40px;
  margin-bottom: var(--sm-space-lg);
}

@media (min-width: 768px) {
  .sm-lescours-material-title {
    font-size: 75px;
  }
}

/* Grille des 6 photos matériel Pilates — voir note de confiance dans
   page-les-cours.html (ordre DOM associé à l'ordre du texte). Agrandie
   le 07/08/2026 (3e passe) : plus de contrainte à 420px maintenant que la
   grille vit dans sa propre section pleine largeur, pas collée à la photo
   Pilates. */
.sm-material-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sm-space-md);
  max-width: 900px;
  margin-inline: auto;
}

.sm-material-grid li {
  text-align: center;
}

.sm-material-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--sm-radius);
  margin-bottom: var(--sm-space-xs);
}

.sm-material-grid span {
  font-size: var(--sm-fs-small);
  color: var(--sm-color-text);
}

/* ✅ Ajouté le 07/08/2026 : 3 galeries carrousel Wix Pro Gallery (17 à 20
   photos chacune, non légendées) confirmées après Stretching, Cross
   Training et Hatha Yoga — absentes de la construction du 05/08/2026 (seule
   la galerie "Le matériel Pilates" avait été repérée). Reproduites en
   carrousel défilant CSS (scroll-snap) avec flèches de navigation
   (site.js), pas de librairie externe.
   ✅ Corrigé le 07/08/2026 (2e passe) : dimensions et comportement précisés
   par le client à partir de l'inspecteur du navigateur sur le site source
   (chemin DOM `.pro-gallery.one-row...slider`, confirmant qu'il s'agit bien
   du composant Wix "galerie une ligne / slider") — ratio image réel
   700×474 (~1.48, proche de 3:2, PAS carré comme construit initialement),
   assombrissement au survol, flèches chevron sur les côtés.
   ✅ Corrigé le 18/08/2026 (relecture exacte de source-lescours.html.txt,
   sur les attributs `style` réels des `.gallery-item-container`/
   `.gallery-item-wrapper` — pas une estimation) : boîte réelle confirmée
   **331×474px** (PORTRAIT, pas 700×474 paysage comme documenté le
   07/08/2026 — 700px était probablement la largeur de l'image source
   d'origine avant recadrage Wix, pas la taille réellement rendue), mesure
   identique et cohérente sur 70 items across les 3 carrousels (Stretching/
   Cross Training/Hatha Yoga). Écart entre 2 images confirmé 10px
   (`margin: 5px` sur chaque item-container ⇒ 5px + 5px entre 2 voisins,
   confirmé par les offsets `left` réels : item 1 commence à 341px = 331 +
   5 + 5). 320px desktop était proche mais jamais vérifié ; 240px mobile
   reste une extrapolation proportionnelle (aucune donnée mobile côté
   source, gardée par cohérence avec le reste du site). */
/* ✅ Ajouté le 20/08/2026 (demande client) : les 3 galeries carrousel
   occupent toute la largeur disponible (référence ≈ 1915 × 567px), au lieu
   d'être contenues dans les 203px de padding de `.sm-row`.

   Exception LOCALE, volontairement limitée à `.sm-course-gallery` : on
   annule le padding horizontal de la row et on compense le padding de
   `main` par une marge négative sur la section. Aucune largeur fixe n'est
   codée — tout est exprimé avec les variables globales, donc le rendu suit
   automatiquement `--sm-padding-main` (53px desktop / 20px ≤768px).
   ⚠️ Ne jamais transposer cette règle sur `.sm-row` ou `--sm-padding-row`
   globalement (voir STRUCTURE.md > « Exception documentée »). */
.sm-course-gallery {
  margin-inline: calc(-1 * var(--sm-padding-main));
}

.sm-course-gallery > .sm-row {
  padding-inline: 0;
}

.sm-course-carousel-wrap {
  position: relative;
}

.sm-course-carousel {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-block: var(--sm-space-md);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* `width`/`max-width` explicites en plus de `flex-basis` : filet de
   sécurité pour forcer la taille quel que soit le contexte d'affichage
   (signalé par le client — une image s'affichait en pleine largeur dans
   WordPress avant ce correctif). */
.sm-course-carousel img {
  flex: 0 0 248px;
  width: 248px;
  max-width: 248px;
  aspect-ratio: 331 / 474;
  object-fit: cover;
  border-radius: 0;
  scroll-snap-align: start;
  transition: filter 0.2s ease;
}

.sm-course-carousel img:hover {
  filter: brightness(0.75);
}

@media (min-width: 768px) {
  .sm-course-carousel img {
    flex-basis: 331px;
    width: 331px;
    max-width: 331px;
  }
}

.sm-course-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--sm-color-white);
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
}

.sm-course-carousel-arrow svg {
  width: 26px;
  height: 26px;
}

.sm-course-carousel-arrow--prev {
  left: var(--sm-gutter);
  transform: translateY(-50%) scaleX(-1);
}

.sm-course-carousel-arrow--next {
  right: var(--sm-gutter);
}

/* ✅ Ajouté le 18/08/2026 (retour client avec capture du rendu réel) :
   bouton "J'ai envie de tester" épinglé bas-gauche en `position:fixed`,
   visible pendant tout le scroll — confirmé via source-lescours.html/.css
   (composant Wix `pagePinnedBottomLeft`, présent aussi sur la homepage,
   voir section 27 `.sm-pinned-social` pour le même mécanisme appliqué aux
   icônes sociales). Remplace `.sm-lescours-hero-cta`, qui plaçait à tort ce
   bouton à l'intérieur du Hero (aucune correspondance trouvée côté source :
   recherche exhaustive de `aria-label="J'ai envie de tester"` = une seule
   occurrence dans tout le DOM, et c'est ce bouton épinglé).

   ✅ Style exact repris le 18/08/2026 depuis les règles CSS réelles du
   composant (`#comp-lzayr1593` / `.style-lzbc32wb__root` dans
   source-lescours.css.txt, lignes 1195-1620) — override du style générique
   `.sm-btn`/`.sm-btn--primary` hérité jusqu'ici (padding/taille/police/
   angles génériques jamais vérifiés pour CE bouton précis) :
   - Boîte fixe 281×54px (`#comp-lzayr1593 { width:281px; height:54px; }`),
     décalée de 70px depuis le bord gauche (`margin-left:70px` sur le
     composant, `place-self:end start` = ancré bas-gauche), pas 24px
     (`--sm-space-md`).
   - `border-radius:10px 10px 0 0` (coins arrondis en haut seulement, pas
     4px partout) + bordure 1px turquoise `rgb(101,193,190)` (= la même
     couleur que `--sm-color-teal`, réutilisée ici sur un bouton alors
     qu'elle n'était documentée que pour le widget blog Actu jusqu'ici).
   - Police du label confirmée Cormorant Garamond **semibold** (600) 15px,
     pas Work Sans 16px/700 hérité de `.sm-btn`.
   - Icône 43×43px par défaut (pas 18px) — rétrécit à 40×40px au survol
     (effet inverse d'un agrandissement classique, confirmé par la règle
     `:hover .StylableButton2545352419__icon { width:40px; height:40px; }`).
   - Survol : bordure dorée (`--sm-color-accent`) + ombre décalée dorée
     très fine + fond qui passe au vert sauge (`--sm-color-sage`) — pas
     l'inversion blanc/doré standard de `.sm-btn--primary:hover`, override
     scopé à ce seul bouton.
   ⚠️ Aucune donnée mobile côté source (capture F12 desktop uniquement) :
   la boîte 281px + 70px de marge gauche (351px) est plus étroite que la
   plupart des écrans mobiles courants (≥360px) mais peut légèrement
   déborder sur les tout premiers petits écrans (320px, ex. iPhone SE 1G) —
   non corrigé faute de donnée source pour un comportement mobile
   alternatif, plutôt que d'inventer un point de rupture. */
.sm-lescours-pinned-cta {
  position: fixed;
  z-index: 40;
  left: 70px;
  bottom: 0;
  width: 281px;
  height: 54px;
  padding: 0;
  gap: 3px;
  border-radius: 10px 10px 0 0;
  border: 1px solid var(--sm-color-teal);
  font-family: var(--sm-font-heading);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.sm-lescours-pinned-cta:hover {
  background-color: var(--sm-color-sage);
  border-color: var(--sm-color-accent);
  box-shadow: 1px 1px 0 var(--sm-color-accent);
  color: var(--sm-color-white);
}

.sm-lescours-pinned-cta svg {
  width: 43px;
  height: 43px;
  flex-shrink: 0;
  transition: width 0.2s ease, height 0.2s ease;
}

.sm-lescours-pinned-cta:hover svg {
  width: 40px;
  height: 40px;
}

/* --------------------------------------------------------------------------
   23. PAGE NOS FORMULES
   Construite le 07/08/2026 (ÉTAPE 3) via source-nosformules.html (capture
   Playwright réelle sur https://www.studio-m.re/nosformules). Écart majeur
   trouvé et validé par le client : le bloc "Les formules du studio" (3
   cartes Séance découverte/Carnet/À l'unité) + "Nos abonnements" (4 formules
   mensuelles En Forme/Grande Forme/Super Forme/Méga Forme) n'existe PAS
   comme texte réel dans le DOM (confirmé par recherche exhaustive : aucun
   des prix/libellés n'apparaît dans le HTML source) — c'est en réalité une
   SEULE image plate ("affiche" PNG, `title="Prod (Studio'M) - Affiche.png"`,
   1414×2000px), au même titre que le PDF planning de la page Planning.
   Reproduite telle quelle en <img>, pas recréée en HTML/CSS.

   ✅ Perfectionnement du 18/08/2026 — méthode "capture live vs build"
   (Playwright, comparaison directe https://www.studio-m.re/nosformules vs
   aperçu autonome) + `getComputedStyle` pour les couleurs. Détail complet :
   CLAUDE_CONTEXT.md > "Perfectionnement Nos Formules du 18/08/2026".
   - Badge du Hero : 383px confirmé (`sizes="383px"` sur le composant réel)
     — pas 280px, jamais mesuré précisément. Position décalée à droite du
     centre (confirmée par capture live), pas centrée.
   - Titres `.sm-coaching-card h3` / `.sm-giftcard h3` : couleur **sauge**
     `#5D7260` confirmée par `getComputedStyle` — pas le doré hérité de la
     règle globale h2-h6, jamais vérifié pour ces cartes blanches précises.
   - Icône du bon cadeau replacée avant le titre (voir HTML) pour matcher
     l'ordre réel (icône → titre → prix → séparateur → texte), identique à
     l'ordre déjà correct des cartes Coaching.
   - "Vos offres entreprises" → confirmé "**Nos** offres entreprises" côté
     source (`Nos offres` / `entreprises` sur 2 lignes, 55px, doré principal
     `#CCA252`, police script `orig_hellstand`) et surtout : ce n'est PAS un
     `<p>` simple mais un badge circulaire (même asset "Sans titre-1_edited.png"
     que les heros de page, 383px) superposé à la 1ère carte — converti en
     badge, texte corrigé.
   - "Montant de votre choix" restauré comme prix de la carte "Offrir un bon
     cadeau" (confirmé présent dans le DOM réel, `<h1>` 30px doré) — la
     décision du 07/08/2026 de le supprimer ("n'apparaît pas sur la carte")
     reposait sur une recherche incomplète, corrigée ici après nouvelle
     vérification directe.
   -------------------------------------------------------------------------- */
.sm-formules-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sm-space-md);
  min-height: 55vh;
  padding: var(--sm-space-xl) var(--sm-gutter);
  overflow: hidden;
  text-align: center;
}

.sm-formules-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sm-formules-intro {
  text-align: center;
}

/* ✅ 20/08/2026 : paragraphe → affiche → textes → bouton vivent tous dans la
   même .sm-row--single. Elle passe en colonne flex pour que leur rythme
   vertical vienne du gap global de la row, et non de marges posées élément
   par élément. Exception locale à .sm-row--single (display:block ailleurs). */
.sm-section--formules-intro .sm-row--single {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sm-gap);
}

.sm-formules-intro p {
  max-width: 760px;
  margin-inline: auto;
  line-height: 1.4;
}

/* ✅ Corrigé le 18/08/2026 (audit tailles) : le 1er paragraphe seul est à
   20px côté source (les 4 suivants confirmés à 16px, donc laissés tels
   quels). */


.sm-formules-intro p + p {
  margin-top: var(--sm-space-md);
}

.sm-formules-poster {
  width: 100%;
  max-width: 824px;
  margin-inline: auto;
  display: block;
  border-radius: var(--sm-radius);
}

.sm-formules-intro .sm-btn {
  margin-top: var(--sm-space-lg);
}

/* ✅ Corrigé le 18/08/2026 (audit boutons) : "Télécharger nos formules"
   confirmé côté source comme le même composant `wixui-button` générique
   que "Télécharger le planning 2026"/"S'abonner" (famille B) — 16px, pas
   de letter-spacing, survol fond noir/texte inchangé — mais fond DORÉ
   (pas sage), d'où cet override dédié plutôt que la classe
   `.sm-btn--sage`. */
.sm-formules-intro .sm-btn.sm-btn--primary {
  font-size: 16px;
  letter-spacing: normal;
}

.sm-formules-intro .sm-btn.sm-btn--primary:hover {
  background-color: #000000;
  color: var(--sm-color-white);
  border-color: #000000;
}

/* Coaching (formules individuelles) : fond sage, 2 cartes bordées dorées.
   ✅ Ajouté le 18/08/2026 : séparateur triangle en haut de section, confirmé
   côté source (`#comp-lzb3t7r8`, composant SVG "vector-image" tourné à
   180deg, 319×75px, fill #FFFFFF, centré horizontalement, position:relative
   au tout début de la section avant le padding). Reproduit ici en
   `clip-path` (plus simple qu'un SVG dédié, même résultat visuel) plutôt
   qu'en SVG comme demandé. */
/* ⚠️ EXCEPTION LOCALE de rythme vertical : la pointe blanche descend depuis
   la section précédente et mange le haut de cette section. Le padding-top
   standard (--sm-padding-section-v) est donc calculé À PARTIR DU BAS de la
   pointe : padding = espace standard + hauteur de la pointe (40px mobile,
   75px desktop, cf. ::before ci-dessous). --sm-padding-section-v n'est pas
   touchée et les autres sections gardent leur rythme. */
.sm-formules-coaching {
  position: relative;
  text-align: center;
  padding-top: calc(var(--sm-padding-section-v) + 40px);
}

@media (min-width: 768px) {
  .sm-formules-coaching {
    padding-top: calc(var(--sm-padding-section-v) + 75px);
  }
}

.sm-formules-coaching::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  /* Hauteur réduite < padding-top mobile (var(--sm-space-lg) = 48px) pour ne
     pas chevaucher le titre "Coaching" — taille source (75px) réservée au
     desktop où le padding-top passe à var(--sm-space-xl) = 80px. */
  width: min(220px, 70vw);
  height: 40px;
  background-color: var(--sm-color-white);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

@media (min-width: 1024px) {
  .sm-formules-coaching::before {
    width: 319px;
    height: 75px;
  }
}

/* ✅ Corrigé le 18/08/2026 (audit tailles) : 20px confirmé — héritait du `p`
   global (16px). */
/* ✅ 20/08/2026 : groupe éditorial titre + trait + accroche. Le rythme interne
   vient du gap, pas d'offsets individuels. */
.sm-coaching-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sm-gap);
}

.sm-coaching-head h2,
.sm-coaching-head p {
  margin-bottom: 0;
}

.sm-coaching-divider {
  width: 208px;
  height: 1px;
  margin: 0;
  background-color: var(--sm-color-accent);
  border: 0;
}

.sm-coaching-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sm-space-lg);
  max-width: 720px;
  margin-inline: auto;
}

@media (min-width: 640px) {
  .sm-coaching-grid {
    /* minmax(0, 1fr) : empêche l'icône (volontairement plus large que la
       carte, voir .sm-coaching-card img plus bas) d'étirer la piste de la
       grille — elle doit déborder visuellement de la carte, pas l'agrandir. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sm-coaching-card {
  background-color: var(--sm-color-white);
  border: 1px solid var(--sm-color-accent);
  border-radius: var(--sm-radius);
  padding: var(--sm-space-lg) var(--sm-space-md);
  color: var(--sm-color-text);
}

/* ✅ Corrigé le 18/08/2026, 2e passe (retour client : "pas vraiment identique"
   sur la 1ère correction à 220px/object-fit:contain — un calibrage visuel
   approximatif, pas une valeur vérifiée). Relecture stricte de
   source-nosformules.html.txt : chaque icône est un composant Wix
   `wixui-image` avec une taille EN DUR différente par carte (pas une valeur
   unique), en `object-fit:cover` (pas `contain` — l'image source n'a pas de
   marge transparente visible une fois cadrée à la taille de la boîte, la
   piste "220px + contain" du 1er passage reposait sur une analyse PIL du PNG
   brut hors-contexte, pas sur le rendu réel) :
   - #comp-lzb3q5f6 (Cours individuel, Hatha Yoga.png)   → 384×384px
   - #comp-lzb3qtlq (Cours en petit groupe, Yoga Danse.png) → 337×336px
   La carte source (#comp-lzb3lhyd) ne fait que 346px de large : l'icône
   déborde intentionnellement de la carte de chaque côté (mesh Wix
   `left:-17px` sur une boîte de 384px) — effet de bord confirmé par la
   source, pas un bug. `min(Npx, 85vw)` reproduit cette taille tout en
   évitant un débordement horizontal de page sur très petits écrans
   (aucune donnée de breakpoint mobile disponible côté source). */
/* ✅ Nettoyé le 20/08/2026 : les anciennes règles forçaient une taille fixe
   par carte (384/337/308/284px avec `max-width:none`), reprises telles quelles
   des dimensions Wix — sur nos cartes elles rendaient les silhouettes énormes
   et débordantes. Remplacé par une taille proportionnelle à la carte, plafonnée,
   avec `height:auto` : le ratio de l'image est toujours conservé et elle reste
   centrée. `aspect-ratio` + `object-fit:cover` retirés : les assets fournis
   sont déjà carrés (1080×1080), les imposer ne servait qu'à recadrer.
   ⚠️ Ces PNG portent 72 à 78 % de marge transparente autour de la silhouette
   (encre mesurée : 313×246 / 320×431 / 245×282 / 522×231 px sur 1080×1080).
   La silhouette VISIBLE ne fait donc qu'environ un quart de la boîte : c'est
   ce qui obligeait les anciennes valeurs à monter à 384px pour paraître à la
   bonne taille. 300px est le compromis retenu — proche du screenshot sans
   déborder de la carte. Pour retrouver exactement la taille de la référence
   avec une boîte raisonnable, il faudrait rogner la marge transparente des
   4 fichiers. */
.sm-coaching-card img {
  display: block;
  width: min(85%, 300px);
  height: auto;
  margin: 0 auto var(--sm-space-sm);
}

/* ✅ Corrigé le 18/08/2026 (audit tailles) : 30px confirmé — remplace
   var(--sm-fs-h3) (25px) jamais vérifié pour ce composant précis. */
.sm-coaching-card h3 {
  color: var(--sm-color-sage);
  /* ✅ Ajouté le 18/08/2026 : aucune marge n'existait entre le titre et le
     prix (les 2 collaient) — un espacement existe bien côté source (~25px
     entre le bas du titre et le haut du prix, mesuré via bounding box). */
  margin-bottom: var(--sm-space-xs);
}

/* ✅ Corrigé le 18/08/2026 (audit tailles) : 45px confirmé — 30px n'était
   jamais vérifié. */
.sm-coaching-card .sm-price {
  color: var(--sm-color-accent);
  font-size: 45px;
  margin-bottom: var(--sm-space-sm);
}

.sm-coaching-card hr {
  border: none;
  border-top: 1px solid var(--sm-color-border);
  margin-bottom: var(--sm-space-sm);
}

/* ⚠️ Couleur sage demandée par le client le 18/08/2026 ("pas noir") —
   à noter : le texte est mesuré NOIR pur `rgb(0,0,0)` côté source réelle
   (`getComputedStyle` sur le live), pas sage. Appliqué tel que demandé
   (choix de direction artistique assumé, pas une correction d'écart). */
.sm-coaching-card p {
  color: var(--sm-color-sage);
  margin-bottom: var(--sm-space-md);
}

/* Bons cadeaux : fond doré (.sm-section--gold), même structure de carte. */
.sm-formules-giftcards {
  text-align: center;
}

/* ✅ Corrigé le 18/08/2026 (audit tailles) : 20px confirmé — héritait du `p`
   global (16px). */
.sm-formules-giftcards > .sm-container > p {
  margin-bottom: var(--sm-space-xl);
}

.sm-giftcard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sm-space-lg);
  max-width: 720px;
  margin-inline: auto;
}

@media (min-width: 640px) {
  .sm-giftcard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sm-giftcard {
  background-color: var(--sm-color-white);
  border-radius: var(--sm-radius);
  padding: var(--sm-space-lg) var(--sm-space-md);
  color: var(--sm-color-text);
}

/* ✅ Corrigé le 18/08/2026, 2e passe : même relecture stricte de
   source-nosformules.html.txt que .sm-coaching-card img ci-dessus, tailles
   confirmées différentes par carte :
   - #comp-lzbagh5g (Offrir un carnet, Yin Yoga.png)      → 308×310px
   - #comp-lzbai7gy (Offrir un bon cadeau, Stretching.png) → 284×286px */
/* Même nettoyage que .sm-coaching-card img ci-dessus. */
.sm-giftcard img {
  display: block;
  width: min(85%, 300px);
  height: auto;
  margin: 0 auto var(--sm-space-sm);
}

/* ✅ Corrigé le 18/08/2026 (audit tailles) : 30px confirmé — remplace
   var(--sm-fs-h3) (25px) jamais vérifié pour ce composant précis. */
.sm-giftcard h3 {
  color: var(--sm-color-sage);
}

/* ✅ Corrigé le 18/08/2026 (audit tailles) : 45px confirmé pour un prix
   normal ("165€") — 30px n'était jamais vérifié. La carte "Offrir un bon
   cadeau" (2e carte) fait exception : son texte "Montant de votre choix"
   est bien confirmé à 30px côté source (texte plus long qu'un prix
   classique), voir override ci-dessous. */
.sm-giftcard .sm-price {
  color: var(--sm-color-accent);
  font-size: 45px;
  margin-bottom: var(--sm-space-sm);
}

.sm-giftcard:nth-child(2) .sm-price {
  font-size: 30px;
}

.sm-giftcard hr {
  border: none;
  border-top: 1px solid var(--sm-color-border);
  margin-bottom: var(--sm-space-sm);
}

/* ✅ Corrigé le 18/08/2026 (audit tailles) : 20px confirmé — héritait du
   `p` global (16px). */
.sm-giftcard p {
  color: var(--sm-color-text);
  margin-bottom: var(--sm-space-md);
}






.sm-b2b-card {
  border: 1px solid var(--sm-color-accent);
  border-radius: var(--sm-radius);
  padding: var(--sm-space-md);
  margin-bottom: var(--sm-space-lg);
}

.sm-b2b-card:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .sm-b2b-card {
    display: flex;
    align-items: center;
    gap: var(--sm-space-xl);
  }

  .sm-b2b-card--reverse {
    flex-direction: row-reverse;
  }
}

.sm-b2b-photo {
  width: 100%;
  max-width: 460px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--sm-radius);
  margin-bottom: var(--sm-space-sm);
}

@media (min-width: 768px) {
  .sm-b2b-photo {
    flex: 0 0 46%;
    margin-bottom: 0;
  }
}

/* ✅ Ajouté le 15/09/2026 (demande client) : centrage horizontal de la photo
   en mobile/tablette UNIQUEMENT — le desktop (≥768px) n'est pas touché.

   Sous 768px la card n'est pas un flex : c'est un bloc. La photo est en
   `width: 100%` mais plafonnée à `max-width: 460px`, donc dès que la zone de
   contenu de la card dépasse 460px, l'image garde 460px et reste ferrée à
   gauche. Écarts mesurés par rapport au centre de la card : -92px à 767px,
   -59px à 700px, -29px à 640px (sous ~580px l'image remplit la zone, elle
   était déjà centrée).

   `margin-inline: auto` répartit l'espace restant des deux côtés. Seules les
   marges latérales sont posées : le `margin-bottom` de la règle de base
   reste intact. */
@media (max-width: 767.98px) {
  .sm-b2b-photo {
    margin-inline: auto;
  }
}

.sm-b2b-body {
  text-align: center;
  padding: var(--sm-space-md);
}

.sm-b2b-body h3 {
  color: var(--sm-color-accent-gold);
  margin-bottom: var(--sm-space-sm);
}

/* ✅ Ajouté le 18/08/2026 (audit tailles vs source-entreprises.html.txt) :
   20px confirmé en dur sur le texte des cartes b2b (Séminaire/Team
   Building/Coaching, style inline) — héritait du `p` global (16px). Classe
   partagée avec les cartes b2b de Nos Formules (section 23). */


/* --------------------------------------------------------------------------
   24. PAGE ENTREPRISES
   Construite le 08/08/2026 (ÉTAPE 3) via source-entreprises.html (capture
   Playwright réelle sur https://www.studio-m.re/entreprises). Réutilise les
   composants "offres entreprises" (.sm-b2b-*, section 23) — le bloc Seminaire
   / Team Building / Coaching est identique (mêmes textes, mêmes photos) sur
   les deux pages.
   -------------------------------------------------------------------------- */
.sm-entreprises-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sm-space-md);
  min-height: 55vh;
  padding: var(--sm-space-xl) var(--sm-gutter);
  overflow: hidden;
  text-align: center;
}

.sm-entreprises-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Titre 2 lignes ("Le sport en entreprise..." / "Entreprise & Salarié") +
   icône soleil décorative (même asset que "Nos valeurs" homepage) +
   paragraphes : confirmé comme un bloc sous le Hero (pas dans le Hero),
   centré, fond blanc. Les 3 derniers paragraphes ("Depuis quelques
   années..." / "Le rythme de travail..." / "Le sport de part...") sont
   collés sans espace entre eux côté source (chacun a margin:0) — le 1er
   paragraphe ("Convaincue...") reste seul avec un espacement normal avant
   eux. */
/* ✅ Ajouté le 20/08/2026 (demande client) : PLACEMENT UNIFORME DU BADGE HERO.
   Les 4 heros de pages intérieures reprennent l'étiquette de la homepage
   (.sm-offers-stamp-wrapper--hero). Le composant ne porte que sa taille et son
   ancrage interne ; le placement dans le hero vient de la section, exactement
   comme sur `.sm-section--hero` (index-sm.html) : boîte flex, badge centré
   verticalement, calé à 8% du bord gauche. Ces 4 déclarations sont donc la
   copie conforme de celles de la homepage — aucune valeur nouvelle, aucun
   top/left par page.
   Elles remplacent les alignements propres à l'ancien badge de chaque page
   (`justify-content: flex-end` + `padding-inline-end: 8%` sur Le Studio,
   `align-items: flex-start` sur Les Cours, `translateX(65%)` sur Nos Formules,
   `translateX(80%)` sur Entreprises), tous supprimés avec leurs classes.
   ⚠️ Les photos ne sont pas concernées : elles sont en `position: absolute;
   inset: 0`, donc indépendantes de la mise en page flex de la section. */
.sm-studio-hero,
.sm-lescours-hero,
.sm-formules-hero,
.sm-entreprises-hero {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding-inline-start: 8%;
}

.sm-entreprises-intro {
  text-align: center;
}

/* ✅ Corrigé le 18/08/2026 (perfectionnement) : doré SECONDAIRE `#AD8542`
   confirmé par getComputedStyle sur le rendu live — pas le doré principal
   hérité de la règle globale h2-h6 (jamais vérifié le 08/08/2026, la 1ère
   vérification visuelle qui avait juste conclu "pas noir" sans trancher
   entre les 2 dorés du site). */
/* ✅ Corrigé le 18/08/2026 (audit tailles vs source-entreprises.html.txt) :
   35px confirmé en dur (même police Cormorant Garamond que la source,
   donc comparable directement) — héritait du h1 global (60px), bien trop
   grand pour ce titre en 2 lignes. */
/* ✅ 20/08/2026 : sélecteur passé de h1 à h2 — le titre de cette section a été
   rétrogradé pour que le seul h1 de la page soit celui du badge Hero. */
.sm-entreprises-intro h2 {
  max-width: 800px;
  margin-inline: auto;
  margin-bottom: var(--sm-space-md);
  color: var(--sm-color-accent-gold);
}

.sm-entreprises-intro-icon {
  width: 56px;
  height: 56px;
  margin-inline: auto;
  margin-bottom: var(--sm-space-lg);
}

/* ✅ Corrigé le 18/08/2026 (audit tailles) : 20px confirmé en dur (style
   inline systématique sur ces paragraphes) — héritait du `p` global (16px). */
.sm-entreprises-intro p {
  max-width: 760px;
  margin-inline: auto;
}

.sm-entreprises-intro-tight p {
  margin-bottom: 0;
}

/* "L'importance du sport" : fond sage, grille 2 colonnes de cartes
   bordées dorées, hashtag en police script (même motif que les cartes
   Coaching/Bons Cadeaux de Nos Formules, section 23). */
.sm-benefits {
  text-align: center;
}

.sm-benefits h2 {
  color: var(--sm-color-white);
  margin-bottom: var(--sm-space-lg);
}

/* ✅ Ajouté le 20/08/2026 : léger décalage vertical d'une carte sur deux, pour
   retrouver la disposition moins rigide du site original. `transform` : ça ne
   touche ni la taille des cartes, ni les pistes de la grille, ni le flux —
   donc aucun risque de chevauchement. Appliqué uniquement à partir de 640px,
   là où la grille est réellement sur 2 colonnes ; en dessous les cartes sont
   empilées et le décalage n'aurait aucun sens. */
@media (min-width: 640px) {
  .sm-benefits-grid .sm-benefit-card:nth-child(even) {
    transform: translateY(var(--sm-gap));
  }
}

.sm-benefits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sm-space-lg);
  max-width: 860px;
  margin-inline: auto;
}

@media (min-width: 640px) {
  .sm-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sm-benefit-card {
  background-color: var(--sm-color-white);
  border: 1px solid var(--sm-color-accent);
  border-radius: var(--sm-radius);
  padding: var(--sm-space-lg) var(--sm-space-md);
  color: var(--sm-color-text);
}

/* ✅ Corrigé le 18/08/2026 (perfectionnement) : doré PRINCIPAL `#CCA252`
   confirmé par getComputedStyle sur le rendu live — pas le doré secondaire
   (les 2 dorés du site étaient confondus, jamais vérifiés précisément pour
   ces hashtags le 08/08/2026). */
.sm-benefit-card h3 {
  font-family: var(--sm-font-script);
  font-weight: 400;
  color: var(--sm-color-accent);
  font-size: 24px;
  margin-bottom: var(--sm-space-sm);
}

/* ✅ Corrigé le 18/08/2026 (audit tailles) : 20px confirmé en dur — héritait
   du `p` global (16px). */
.sm-benefit-card p {
  color: var(--sm-color-text);
}

.sm-benefit-card p:last-child {
  margin-bottom: 0;
}

/* "Nos offres entreprises" : titre + 3 cartes .sm-b2b-card réutilisées
   telles quelles depuis Nos Formules (section 23) — contenu identique
   confirmé côté source. */
.sm-offers-b2b {
  text-align: center;
}

.sm-offers-b2b > .sm-container > h2 {
  margin-bottom: var(--sm-space-lg);
}

/* "Ils nous font confiance" : composant Wix Pro Gallery (carrousel bouclé
   en continu, 7 logos) confirmé le 08/08/2026 via source-entreprises.html —
   reproduit en carrousel défilant CSS avec flèches, même motif que les
   galeries de la page Les Cours (section 22), classes dédiées pour ne pas
   modifier le composant existant. */
.sm-clients-logos {
  text-align: center;
}

.sm-clients-logos-title {
  font-family: var(--sm-font-script);
  font-weight: 400;
  color: var(--sm-color-accent-gold);
  font-size: 28px;
  margin-bottom: var(--sm-space-lg);
}

.sm-logos-carousel-wrap {
  position: relative;
}

.sm-logos-carousel {
  display: flex;
  align-items: center;
  gap: var(--sm-space-xl);
  overflow-x: auto;
  padding-block: var(--sm-space-md);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* ✅ Corrigé le 18/08/2026 (perfectionnement, capture live vs build) : un
   libellé texte (nom du client, 16px gras noir, police corps) apparaît
   sous CHAQUE logo côté source — absent de la construction du 08/08/2026
   (seul l'attribut `alt` portait le nom, jamais affiché visuellement).
   Logos aussi agrandis (~210px desktop confirmé visuellement, contre 180px
   jamais mesuré précisément) — `.sm-logos-carousel-item` ajouté comme
   nouveau conteneur flex (image + libellé), remplace l'ancien style
   appliqué directement sur `img`. */
.sm-logos-carousel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sm-space-xs);
  flex: 0 0 150px;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .sm-logos-carousel-item {
    flex-basis: 210px;
  }
}

.sm-logos-carousel-item img {
  width: 100%;
  max-width: 150px;
  height: auto;
  object-fit: contain;
}

@media (min-width: 768px) {
  .sm-logos-carousel-item img {
    max-width: 210px;
  }
}

.sm-logos-carousel-label {
  font-family: var(--sm-font-body);
  font-weight: 700;
  font-size: 16px;
  color: var(--sm-color-text);
}

.sm-logos-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--sm-color-accent);
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.15));
}

.sm-logos-carousel-arrow svg {
  width: 26px;
  height: 26px;
}

.sm-logos-carousel-arrow--prev {
  left: 0;
  transform: translateY(-50%) scaleX(-1);
}

.sm-logos-carousel-arrow--next {
  right: 0;
}

/* --------------------------------------------------------------------------
   25. PAGE CONTACT
   Construite le 08/08/2026 (ÉTAPE 3) via source-contact.html (capture
   Playwright réelle sur https://www.studio-m.re/contact). Page courte,
   confirmée SANS <h1> et SANS formulaire de contact interactif côté source
   (aucun <form> trouvé dans le DOM) — juste le logo du site en grand (même
   asset que le logo du header, réutilisé à une taille plus grande), une
   photo carrée, des paragraphes, et 2 cartes bordées dorées (coordonnées +
   adresse). Pas de composant .sm-page-hero ici (cohérent avec les autres
   pages "badge décoratif" du site, qui n'utilisent jamais ce composant).
   ✅ Perfectionnement du 18/08/2026 (méthode "capture live vs build" :
   comparaison Playwright entre https://www.studio-m.re/contact et un
   aperçu autonome, + getComputedStyle). Détail complet : CLAUDE_CONTEXT.md
   > "Perfectionnement Contact du 18/08/2026".
   - Logo : 428px confirmé par bounding box — pas 220px, jamais mesuré
     précisément le 08/08/2026 (le texte du commentaire mentionnait déjà
     "428px" mais la valeur n'avait jamais été reportée dans la règle CSS
     elle-même).
   - Lien téléphone (paragraphe d'intro ET carte "Mes Coordonnées") :
     couleur gris foncé `#414141` confirmée, SANS soulignement — pas doré
     souligné comme construit le 08/08/2026 (jamais vérifié).
   - Titre des cartes ("Mes Coordonnées"/"Notre adresse") : **75px**
     confirmé par getComputedStyle — pas 26px (échelle arbitraire jamais
     vérifiée), et doré PRINCIPAL `#CCA252` — pas le doré secondaire (les 2
     dorés du site étaient confondus).
   -------------------------------------------------------------------------- */
.sm-contact-hero {
  /* ✅ 20/08/2026 : contient le débordement horizontal du fond décoratif
     (.sm-contact-bg, plus large que la photo) — sans ça il créait 44px de
     scroll horizontal en mobile. Même traitement que .sm-team sur Le Studio. */
  overflow: hidden;
  text-align: center;
  padding-bottom: 0;
}

/* ✅ 20/08/2026 : margin-inline:auto et margin-bottom retirés (demande client),
   object-fit:cover ajouté. ⚠️ Sans hauteur explicite, `object-fit` n'a aucun
   effet visible : la boîte épouse déjà le ratio de l'image. Ce qui empêche le
   logo de « remplir » sa zone est la marge transparente de l'asset lui-même
   (encre mesurée : 44% × 50% du canevas 5692×3200). Une version déjà recadrée
   existe dans assets/images/ (…~mv2-header.png), utilisée par le header. */
.sm-contact-logo {
  display: block;
  width: 655px;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  object-fit: cover;
}


.sm-contact-photo-wrap {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
}

.sm-contact-photo {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.sm-contact-intro {
  text-align: center;
}

/* ✅ Corrigé le 18/08/2026 (audit tailles vs source-contact.html.txt) :
   20px confirmé en dur (style inline systématique sur tous les <p
   class="font_8"> de la page) — héritait auparavant du body (16px). */
.sm-contact-intro p {
  max-width: 720px;
  margin-inline: auto;
}

.sm-contact-intro a {
  color: #414141;
}

/* ✅ 20/08/2026 : gap aligné sur la variable structurelle --sm-gap (même
   valeur, 24px, mais c'est elle qui fait référence dans STRUCTURE.md). */
.sm-contact-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sm-gap);
  max-width: 640px;
  margin-inline: auto;
  margin-top: var(--sm-space-lg);
  text-align: left;
}

@media (min-width: 640px) {
  /* minmax(0, 1fr) et non 1fr : sans plancher à 0, la carte au contenu le plus
     long élargit sa colonne et les deux ne font plus exactement 50/50. */
  .sm-contact-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sm-contact-card {
  border: 1px solid var(--sm-color-accent);
  border-radius: var(--sm-radius);
  padding: var(--sm-space-md);
}

/* ✅ Ajouté le 16/09/2026 (demande client, constaté à 416px) : contenu des
   cartes centré en MOBILE. Le `text-align: left` de `.sm-contact-cards`
   n'est pas touché, il continue de régir le desktop.

   Seuil à 639.98px et non 767.98px : c'est le complément exact du
   `@media (min-width: 640px)` de la grille ci-dessus. En dessous les cartes
   sont empilées sur une colonne — c'est là que le centrage a du sens ; à
   partir de 640px elles reprennent leur disposition 2 colonnes, identique au
   desktop, et gardent donc l'alignement à gauche validé.

   Pas d'`align-items` : ces cartes ne contiennent ni icône ni flex, juste un
   `<h3>` et des `<p>`. `text-align` suffit à tout centrer. */
@media (max-width: 639.98px) {
  .sm-contact-card {
    text-align: center;
  }
}

/* ⚠️ 20/08/2026 : font-size local retiré. Les 75px dataient d'une époque où
   ces cartes faisaient 640px de large ; depuis le passage au système de rows
   elles font 308px et le titre débordait sur la carte voisine. La taille vient
   donc maintenant de la hiérarchie globale (h3). La police script et la couleur
   restent, c'est l'exception décorative déjà documentée. */
.sm-contact-card h3 {
  font-family: var(--sm-font-script);
  font-weight: 400;
  color: var(--sm-color-accent);
  line-height: 1;
  margin-bottom: var(--sm-space-sm);
}


/* ✅ Corrigé le 18/08/2026 (audit tailles vs source-contact.html.txt) :
   20px confirmé en dur (même style inline systématique que
   .sm-contact-intro p ci-dessus) — héritait auparavant du body (16px). */
.sm-contact-card p {
  color: var(--sm-color-muted);
  margin-bottom: 0;
}

.sm-contact-card a {
  color: var(--sm-color-muted);
}

/* Lien téléphone de la carte "Mes Coordonnées" (1er des 2 <p>) : gris
   foncé confirmé, distinct du gris muted de l'e-mail juste en dessous. */
.sm-contact-card p:first-of-type a {
  color: #414141;
}

/* --------------------------------------------------------------------------
   26. PAGE ACTU+
   Construite le 08/08/2026 (ÉTAPE 3) via source-actu.html (capture
   Playwright réelle sur https://www.studio-m.re/le-mag-m). Écart majeur
   trouvé et validé par le client le 08/08/2026 : la page réelle liste 20
   articles (pas seulement les 5 documentés initialement dans contenu-sm.md,
   qui ne reflétaient que les 5 premiers posts chargés côté serveur lors du
   scraping initial) — les 15 articles supplémentaires (recettes + bien-être)
   ont été extraits du DOM et sont repris à l'identique. Pas de composant
   `.sm-page-hero` ici (même motif que les autres pages "titre + intro" sans
   photo de fond, cf. Le Studio / Contact).
   -------------------------------------------------------------------------- */
.sm-actu-hero {
  text-align: center;
}

/* ✅ Corrigé le 18/08/2026 (perfectionnement, capture live vs build) : doré
   SECONDAIRE `#AD8542` confirmé par getComputedStyle — pas le doré
   principal hérité par défaut (encore une fois les 2 dorés du site
   confondus, jamais vérifiés précisément le 08/08/2026). */
.sm-actu-hero h1 {
  color: var(--sm-color-accent-gold);
}

/* Fine ligne de séparation confirmée entre le titre et l'accroche sur le
   rendu live — absente de la construction du 08/08/2026. */
.sm-actu-hero-divider {
  width: 208px;
  height: 1px;
  margin: var(--sm-space-md) auto;
  background-color: var(--sm-color-border);
  border: 0;
}

/* ✅ Corrigé le 18/08/2026 (audit tailles vs source-actu.html.txt) : 20px
   confirmé en dur (style inline) — 18px n'était jamais vérifié. */
.sm-actu-intro-text {
  max-width: 720px;
  margin-inline: auto;
  color: #414141;
}

/* Barre de filtres/catégories du blog Wix — reproduite visuellement
   (police script, couleurs confirmées : turquoise pour l'onglet actif "Tous
   les posts", doré pour les autres) mais SANS logique de filtrage : ce
   HTML/CSS statique n'a pas de taxonomie d'articles réelle derrière (pas de
   moteur de blog WordPress branché à ce stade) — reproduire le filtrage
   fonctionnel inventerait une catégorisation par article non extraite du
   site source. Éléments non cliquables (spans), pas des liens. */
.sm-actu-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sm-space-md);
  margin-top: var(--sm-space-lg);
  padding-top: var(--sm-space-md);
  border-top: 1px solid var(--sm-color-border);
}

.sm-actu-filter {
  font-family: var(--sm-font-script);
  font-weight: 400;
  font-size: 22px;
  color: var(--sm-color-accent-gold);
}

.sm-actu-filter--active {
  color: var(--sm-color-teal);
}

.sm-actu-filter--more {
  font-family: var(--sm-font-body);
  font-size: var(--sm-fs-small);
  color: var(--sm-color-text);
}

.sm-actu-search {
  display: inline-flex;
  color: var(--sm-color-text);
}

.sm-actu-search svg {
  width: 18px;
  height: 18px;
}

.sm-actu-list {
  padding-top: var(--sm-space-lg);
}

/* ✅ 20/08/2026 : la grille est maintenant portée par .sm-row--two-col
   (display, colonnes, breakpoint 640px et gap global). Ne restent ici que
   les règles propres aux cartes Actu. max-width/margin-inline retirés : la
   largeur vient du système de rows. */


/* ✅ Corrigé le 18/08/2026 (perfectionnement) : bordure retirée — vérifiée
   via la chaîne complète des ancêtres du rendu live (`getComputedStyle` :
   `border-width:0px` partout, y compris sur l'élément dont le
   `border-color` était doré) : PAS de bordure visible malgré la mention
   "border:1px solid rgb(204,162,82)" du 08/08/2026 (élément trouvé avec
   la bonne couleur mais une épaisseur nulle — piège de lecture CSS déjà
   rencontré ailleurs sur ce projet). */
/* ✅ 20/08/2026 (demande client) : bordure dorée 2px sur toutes les cartes.
   Reprend --sm-color-accent, le doré principal du projet — aucune teinte
   nouvelle. Remplace l'absence de bordure constatée le 18/08 côté source. */
.sm-actu-card {
  border: 2px solid var(--sm-color-accent);
  border-radius: var(--sm-radius);
  overflow: hidden;
  background-color: var(--sm-color-white);
}

/* ✅ 20/08/2026 (demande client) : zone image commune à toutes les cards
   Actu. Avant, le wrapper suivait un `aspect-ratio: 454/605` (portrait) :
   la hauteur dépendait donc de la largeur de la colonne et grimpait à 602px
   en desktop. Elle est maintenant fixée à 350px, identique pour les 16
   cards quel que soit le ratio de la photo source.

   La hauteur est portée par le WRAPPER, l'image le remplit en
   `object-fit: cover` : aucune photo n'est écrasée, elle est recadrée.

   Sous 768px on repasse en `aspect-ratio` plutôt qu'en hauteur fixe : la
   zone suit alors la largeur de la card, ce qui évite des images trop
   hautes sur mobile. 4/3 est proche du cadrage desktop (452×350 ≈ 1.29),
   donc le recadrage reste cohérent d'un breakpoint à l'autre. */
.sm-actu-card-image-link {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

@media (min-width: 768px) {
  .sm-actu-card-image-link {
    height: 350px;
    aspect-ratio: auto;
  }
}

.sm-actu-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.sm-actu-card-body {
  padding: var(--sm-space-md);
}

.sm-actu-card-meta {
  display: flex;
  align-items: center;
  gap: var(--sm-space-xs);
  margin-bottom: var(--sm-space-sm);
}

.sm-actu-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.sm-actu-author {
  display: block;
  font-size: var(--sm-fs-small);
  color: var(--sm-color-text);
}

.sm-actu-date {
  display: block;
  font-size: var(--sm-fs-small);
  color: var(--sm-color-muted);
}

/* ✅ Corrigé le 18/08/2026 (audit tailles vs source-actu.html.txt) : 33px
   confirmé à l'identique sur plusieurs cartes (data-hook="post-title") —
   26px n'était jamais vérifié. */
/* ✅ 20/08/2026 : le titre est désormais directement le <a> (plus de <h2>
   autour), d'où le display:block — sans lui l'élément resterait inline et la
   marge basse ne s'appliquerait pas. */
.sm-actu-card-title {
  display: block;
  font-family: var(--sm-font-script);
  font-weight: 400;
  font-size: 33px;
  line-height: 1.2;
  color: var(--sm-color-teal);
  margin-bottom: var(--sm-space-sm);
}


.sm-actu-card-excerpt {
  font-size: var(--sm-fs-body);
  color: var(--sm-color-text);
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   27. HOMEPAGE — BARRE RÉSEAUX SOCIAUX ÉPINGLÉE
   ✅ Ajouté le 17/08/2026 via source-hp.html/.css : composant réel
   `pagePinnedTopRight-s378w` confirmé `position:fixed` (grille pleine
   hauteur d'écran, icônes ancrées en haut à droite via
   `place-self:start end`) — distinct du doublon hors-écran du Hero (liens
   Wix par défaut, écarté). Mêmes 4 vrais comptes que
   `.sm-footer-social-bar` (section 7), couleur confirmée `#999997` =
   --sm-color-muted, réutilise `.sm-social-icons` en colonne.
   Décision du client (17/08/2026) : visible uniquement sur la homepage —
   ajouté dans index-sm.html, pas dans header-sm.php (qui l'aurait rendu
   global sur tout le site).
   ⚠️ Décalage vertical `top:540px` repris du `margin-top` réel du
   composant source (mesuré depuis le haut d'une grille `position:fixed`
   plein écran) — pas de donnée mobile côté source (F12 desktop
   uniquement), masqué sous 1024px par prudence plutôt que d'inventer un
   comportement mobile.
   -------------------------------------------------------------------------- */
/* ✅ Corrigé le 20/08/2026 (demande client) : centrage horizontal de la
   colonne d'icônes dans la bande latérale.

   Avant, la barre était collée à `right: var(--sm-space-md)` (24px) et se
   réduisait à la largeur des icônes (20px mesurés) : son centre tombait donc
   à 34px du bord droit, alors que le centre de la bande blanche
   (`.sm-pinned-band--right`, 51px) est à 25,5px — d'où le décalage visible
   de 8,5px vers la gauche.

   Correctif : on supprime le décalage `right: 24px` et on donne à la barre
   la largeur exacte de la bande. Le centrage se fait alors par le layout du
   parent, sans offset : la barre est déjà `display: flex` +
   `flex-direction: column`, et `align-items: center` (hérité de
   `.sm-social-icons`) centre les icônes sur l'axe transversal, c'est-à-dire
   horizontalement. Rien n'est dupliqué, et `justify-content` n'est PAS
   touché — en colonne c'est l'axe vertical, il déplacerait le groupe.

   Position verticale (`top: 540px`), `gap`, taille et couleur des icônes,
   `position: fixed` : inchangés. Règle scopée à `.sm-pinned-social` — les
   `.sm-social-icons` du footer et de Contact ne sont pas concernés. */
.sm-pinned-social {
  position: fixed;
  top: 540px;
  right: 0;
  width: 51px; /* = .sm-pinned-band--right, la bande sur laquelle elle repose */
  z-index: 40;
  display: none;
}

@media (min-width: 1024px) {
  .sm-pinned-social {
    display: flex;
  }
}

.sm-pinned-social.sm-social-icons {
  flex-direction: column;
  gap: 21px;
}

/* --------------------------------------------------------------------------
   28. PAGE SÉANCE D'ESSAI
   ✅ Reconstruite le 19/08/2026 (ÉTAPE 3) contre sources/source-seance-essai.html.txt
   + .css.txt (sources ajoutées par le client après une première version bâtie
   sans source — remplace entièrement cette V1). Écarts majeurs trouvés par
   rapport à la description initiale du client :
   - PAS de champ "Choix du cours" séparé côté source. Le vrai formulaire
     (#comp-kgc4n6gl) contient : "Prénom, nom" (1 seul champ combiné,
     requis), "Téléphone" (optionnel), "Date de naissance" (date picker,
     optionnel), "E-mail *" (requis), reCAPTCHA (234×60px, identique au
     placeholder déjà utilisé section 17), case à cocher (label lien vers
     /mentions-légales, PAS /conditions-generales-prestations), bouton.
   - Style des champs texte confirmé identique au newsletter homepage
     (bordure basse dorée, italique Georgia 14px) — pattern déjà établi
     section 17, réutilisé ici sans changement.
   - Bouton confirmé fond doré `rgb(204,162,82)` + survol fond noir, police
     Cormorant Garamond semibold 700 16px sans letter-spacing — même famille
     que "Télécharger nos formules"/"S'abonner" (voir audit boutons du
     18/08/2026) : override scopé `.sm-seance-fields .sm-btn.sm-btn--primary`
     au lieu de réutiliser `.sm-btn--newsletter` (nom trompeur hors contexte
     newsletter).
   - Message de confirmation confirmé DANS LE DOM avec `visibility:hidden
     !important` appliqué en ligne (donc bien masqué par défaut, affiché par
     le JS Wix au submit — cohérent avec le pattern déjà utilisé section 17)
     — texte réel "Merci pour votre envoi !" UNIQUEMENT (pas de 2e phrase
     "Nous reviendrons vers vous rapidement." trouvée côté source ; ajoutée
     dans la demande initiale du client, conservée ici car explicitement
     demandée, mais à confirmer si elle doit rester). 20px, doré #CCA252,
     centré, letter-spacing 0.05em (pas 16px/gauche comme construit en V1).
   - Titre confirmé "Reserver ma seance" — SANS ACCENTS (vérifié en
     hexadécimal sur le DOM réel, pas un artefact de capture) : typo/quirk
     réelle du site source, reproduite telle quelle plutôt que corrigée
     silencieusement (même logique que le PDF planning daté janvier 2025).
     Police "The Seasons" (Cormorant Garamond ici), doré #CCA252, 35px,
     centré — pas de badge/cercle comme les autres pages, titre nu au-dessus
     d'une ligne de séparation fine (231px, 1px, gris `rgb(199,199,199)`).
   - Bannière photo confirmée en haut de page (980×400px,
     3864c6_6a53c9e7e9c74ff89e9f6bca88964cdb~mv2.jpg, déjà présente dans
     assets/images/) — absente de la V1 construite sans source.
   - Lien "cours" dans le texte d'intro confirmé pointer vers la page
     d'accueil (`https://www.studio-m.re`) côté source — probable erreur de
     configuration du site d'origine (on attendrait plutôt /lescours), mais
     reproduite telle quelle plutôt que corrigée sans validation client.
   - ⚠️ Non reproduits : le sélecteur de date personnalisé Wix (remplacé par
     un `<input type="date">` natif, plus simple et accessible) et les 2
     feuilles décoratives pivotées trouvées de part et d'autre du titre
     (`#comp-kgc597h2`/`#comp-kgc588x9`, même famille que les feuilles
     Hero/Offres/Partenaires) — flourish décoratif, hors scope de cette
     passe, à ajouter plus tard si souhaité.
   -------------------------------------------------------------------------- */
/* ✅ Corrigé le 20/08/2026 (demande client) : l'image remplit entièrement le
   Hero. Elle était déjà en `width: 100%` + `object-fit: cover` + 616px de
   haut, mais la SECTION gardait le `padding-block: var(--sm-padding-section-v)`
   des sections standards : 53px de blanc s'intercalaient donc au-dessus et
   en dessous de la photo (section 722px pour une image de 616px). Les Hero
   sont exempts du padding vertical de section (STRUCTURE.md > Hero) — même
   règle que `.sm-reservation-hero`. La hauteur du Hero, elle, ne change pas :
   616px, portés par l'image. */
.sm-seance-banner {
  padding-block: 0;
}

.sm-seance-banner img {
  width: 100%;
  aspect-ratio: 980 / 400;
  object-fit: cover;
  object-position: center;
}

.sm-seance-title-wrap {
  text-align: center;
}

.sm-seance-title {
  color: var(--sm-color-accent);
  font-weight: 400;
}

.sm-seance-divider {
  width: 231px;
  height: 1px;
  margin: var(--sm-space-sm) auto 0;
  background-color: rgb(199, 199, 199);
}

.sm-seance-intro {
  max-width: 640px;
  margin-inline: auto;
  margin-top: var(--sm-space-md);
  text-align: center;
  color: #605E5E;
}

.sm-seance-intro a {
  text-decoration: underline;
}

/* ✅ 20/08/2026 (demande client) : le formulaire est un grand panneau blanc
   posé sur la page. Valeur d'ombre reprise telle quelle du site d'origine. */
.sm-seance-form {
  display: block;
  margin-top: var(--sm-space-lg);
  max-width: 680px;
  margin-inline: auto;
  background: #fff;
  box-shadow: 0.5px 0.87px 4px 0 rgba(0, 0, 0, 0.6);
  /* Padding porté par le CONTENEUR, pas par les champs : la grille et ses
     gaps ne bougent pas. `--sm-padding-main` est l'unité structurelle du
     projet — 53px en desktop, 20px sous 768px (STRUCTURE.md > Variables
     CSS) : la valeur mobile réduite suit donc automatiquement, sans media
     query dédiée ni valeur en dur. */
  padding: var(--sm-padding-main);
}

.sm-seance-fields {
  display: flex;
  flex-direction: column;
  gap: var(--sm-space-md);
}

.sm-seance-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sm-space-sm);
}

@media (min-width: 640px) {
  .sm-seance-row {
    grid-template-columns: 1fr 1fr;
  }
}

.sm-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sm-field label {
  font-family: var(--sm-font-accent);
  font-style: italic;
  font-weight: 700;
  font-size: 14px;
}

.sm-seance-form input[type="text"],
.sm-seance-form input[type="tel"],
.sm-seance-form input[type="date"],
.sm-seance-form input[type="email"] {
  width: 100%;
  padding: 10px 2px;
  border: none;
  border-bottom: 1px solid var(--sm-color-accent-gold);
  border-radius: 0;
  background-color: var(--sm-color-white);
  color: var(--sm-color-text);
  font-family: Georgia, 'Book Antiqua', 'Palatino Linotype', serif;
  font-style: italic;
  font-size: 14px;
}

.sm-seance-row2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sm-space-md);
}

.sm-seance-recaptcha {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 234px;
  min-height: 60px;
  text-align: center;
  font-size: var(--sm-fs-small);
  color: var(--sm-color-muted);
  padding: var(--sm-space-sm);
  border: 1px dashed var(--sm-color-border);
  border-radius: var(--sm-radius);
}

.sm-seance-checkbox {
  display: flex;
  align-items: center;
  gap: var(--sm-space-xs);
  font-family: var(--sm-font-accent);
  font-style: italic;
  font-weight: 700;
  font-size: 14px;
}

.sm-seance-checkbox a {
  color: var(--sm-color-accent-gold);
}

.sm-seance-form .sm-btn {
  display: flex;
  margin-inline: auto;
}

/* Bouton "Family B" (voir audit boutons du 18/08/2026) : fond doré hérité
   de .sm-btn--primary, mais 16px sans letter-spacing et survol fond noir au
   lieu du survol inversé blanc/sauge de .sm-btn--primary standard. */
.sm-seance-fields .sm-btn.sm-btn--primary {
  font-size: 16px;
  letter-spacing: normal;
}

.sm-seance-fields .sm-btn.sm-btn--primary:hover {
  background-color: #000000;
  color: var(--sm-color-white);
  border-color: #000000;
}

.sm-seance-success {
  margin-top: var(--sm-space-md);
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--sm-color-accent);
}

/* --------------------------------------------------------------------------
   29. PAGE CGP (Conditions Générales de Prestations)
   ✅ Reconstruite le 19/08/2026 (ÉTAPE 3) contre sources/source-cgp.html.txt
   + .css.txt (sources ajoutées par le client après une première version
   bâtie sans source — remplace entièrement cette V1). Écarts majeurs :
   - Bannière photo confirmée en haut de page (980×410px,
     3864c6_778114639c34465babfc398d292f871e~mv2.jpg, déjà présente dans
     assets/images/, déjà réutilisée sur page-les-cours.html — absente de
     la V1).
   - Titre confirmé police "Hellstand" (script, Dancing Script ici), doré
     `#CCA252`, 60px, PAS Cormorant Garamond noir par défaut comme construit
     en V1 (qui matchait par coïncidence sur la taille 60px mais pas sur la
     police/couleur).
   - Texte d'intro confirmé 18px (pas 16px par défaut).
   - Les 3 blocs PDF confirmés être une liste de LIENS TEXTE (pas des
     boutons `.sm-btn`) : "// [titre du document]" (couleur doré secondaire
     #AD8542, "//" fait partie du texte source réel) + "Télécharger le PDF"
     + icône SVG de téléchargement (29×29px, même couleur), les 3 pointant
     vers le même PDF. Reconstruit en conséquence (liens simples, pas de
     boutons `.sm-btn--sage` comme en V1).
   - URLs PDF réelles côté source pointent vers le site Wix live
     (studio-m.re/_files/ugd/...) — non reprises : les PDF sont déjà
     disponibles en local (assets/documents/, renommés le 19/08/2026, voir
     CLAUDE_CONTEXT.md), chemins locaux conservés comme en V1.
   -------------------------------------------------------------------------- */
.sm-cgp-banner img {
  width: 100%;
  aspect-ratio: 980 / 410;
  object-fit: cover;
}

.sm-cgp-title {
  color: var(--sm-color-accent);
  font-family: var(--sm-font-script);
  font-size: 60px;
  font-weight: 400;
}

/* ✅ Ajouté le 20/08/2026 (demande client) : toute la section CGP est centrée
   sur un même axe. Règles scopées à `.sm-section--cgp` (classe propre à cette
   page) — `.sm-section__header` et `.sm-row` restent inchangés globalement, et
   `page-mentions-legales.html`, qui partage `.sm-legal-content`, n'est pas
   concernée. La structure interne de la grille des documents n'est pas
   touchée : seul son conteneur `.sm-row` devient une boîte flex centrée. */
.sm-section--cgp .sm-section__header {
  /* Le bloc lui-même est centré dans la section, et pas seulement son texte :
     largeur fluide, plafonnée, marges automatiques.
     960px = la ligne la plus longue du titre (868px mesurés à 60px) + les
     2×23px de `--sm-padding-header` + une marge de sécurité : le titre garde
     donc sa composition actuelle sur une seule ligne en desktop, il ne se
     recasse pas. Le paragraphe garde en plus son propre plafond de 720px
     (`.sm-cgp-intro`) pour ne pas s'étaler. */
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  text-align: center;
}

/* La row garde son `display: block` : en faire une boîte flex ferait rétrécir
   la grille sur son contenu (720px → 595px mesurés) et changerait donc son
   rendu. Le centrage se fait par marges automatiques, ce qui laisse la
   grille exactement à sa largeur actuelle. */
.sm-section--cgp > .sm-row > .sm-cgp-documents {
  margin-inline: auto;
}

.sm-cgp-intro {
  max-width: 720px;
  /* la boîte elle-même est centrée, pas seulement son texte */
  margin-inline: auto;
}

/* ✅ 20/08/2026 (demande client) : `margin-top: var(--sm-space-lg)` (48px)
   retiré. Il s'ajoutait aux 24px de `.sm-section__header + .sm-row` et créait
   un écart de 72px entre l'intro et la grille. L'espace entre le header de
   section et sa row vient du système structurel (`--sm-gap`), jamais d'une
   marge posée sur le contenu — cf. STRUCTURE.md > « Rythme vertical standard
   d'une section ». Le `gap` interne entre les 3 documents est inchangé. */
.sm-cgp-documents {
  display: flex;
  flex-direction: column;
  gap: var(--sm-space-md);
  max-width: 720px;
}

.sm-cgp-document {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sm-space-sm);
  padding-block: var(--sm-space-sm);
  border-bottom: 1px solid var(--sm-color-border);
}

.sm-cgp-document-title,
.sm-cgp-document-dl {
  font-size: 16px;
  color: var(--sm-color-accent-gold);
}

.sm-cgp-document-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sm-cgp-document-icon {
  display: flex;
  width: 29px;
  height: 29px;
  flex-shrink: 0;
}

.sm-cgp-document-icon svg {
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   30. PAGE RÉSERVATION (iframe Déciplus)
   Ajoutée le 19/08/2026 (ÉTAPE 3), vérifiée contre sources/source-reservation.*.
   Page réelle confirmée SANS <h1> ni texte visible en dehors de la balise
   <title> ("Réservation Déciplus | Studio M") — h1 ajouté ici sur demande
   explicite du client (pas trouvé dans le DOM source). Texte d'intro non
   précisé par le client et introuvable côté source : laissé en
   [PLACEHOLDER] plutôt qu'inventé (voir PROJET_TEMPLATE.md règle 7).
   Conteneur de l'iframe Déciplus confirmé côté source (#comp-kfi7fzd6) :
   489×1057px (widget vertical). Reproduit ici en largeur responsive avec le
   même ratio (489/1057), plafonné à 489px pour ne pas dépasser la taille
   réelle du widget.
   -------------------------------------------------------------------------- */
/* ✅ Ajouté le 20/08/2026 (demande client) : bandeau photo en tête de page.
   Même format que la bannière CGP — 980×410 côté source Wix (image d'origine
   2995×1095, donc plus large que le cadre : le recadrage `cover` rogne sur la
   largeur, jamais sur la hauteur, le sujet reste entier verticalement).
   Exception hero assumée : la section annule le `--sm-padding-section-v` des
   `.sm-section` standards, elle ne porte que l'image. */
.sm-reservation-hero {
  padding-block: 0;
}

.sm-reservation-hero-photo {
  display: block;
  width: 100%;
  aspect-ratio: 980 / 410;
  object-fit: cover;
  object-position: center;
}

/* ✅ Ajouté le 20/08/2026 (demande client) : fond gris clair de la seule
   section de réservation. Modifier scopé — aucune variable globale de
   background n'est touchée, `.sm-section--alt` non plus. */
.sm-section--reservation {
  background-color: rgb(237, 237, 237);
}

.sm-reservation-intro {
  max-width: 640px;
}

/* ✅ Corrigé le 20/08/2026 (demande client) : le widget était calé à gauche
   (bloc en `max-width` sans centrage). La row de cette section devient un
   conteneur flex centré — exception LOCALE, `.sm-row--single` reste un
   `display: block` partout ailleurs. Aucune marge négative, aucun translate,
   aucun `position: absolute` : le widget reste centré à toutes les largeurs. */
.sm-reservation-page > .sm-row {
  display: flex;
  justify-content: center;
}

/* `margin-top: var(--sm-space-lg)` retiré le 20/08/2026 : il s'ajoutait aux
   24px de `.sm-section__header + .sm-row` (72px au total). L'écart vient du
   système structurel — cf. STRUCTURE.md > « Rythme vertical standard ». */
.sm-reservation-iframe-wrap {
  width: 100%;
  max-width: 489px;
  aspect-ratio: 489 / 1057;
}

.sm-reservation-iframe-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* --------------------------------------------------------------------------
   31. HOMEPAGE — BANDES LATÉRALES ÉPINGLÉES
   ✅ Ajouté le 19/08/2026 via source-hp.html/.css, confirmé par capture
   DevTools directe du client sur le rendu réel (dimensions 53×2502px /
   51×2500px, `div.jv9xi4.wixui-box`) : 2 bandes blanches opaques,
   `position:fixed`, pleine hauteur de viewport, épinglées aux 2 bords —
   #comp-lzathkte (gauche, 53px, `place-self:start`, vide) et
   #comp-lzathkw78 (droite, 51px, `place-self:start end` — c'est en fait le
   CONTENEUR de la barre réseaux sociaux déjà en place, `.sm-pinned-social`
   section 27, qui n'avait jusqu'ici pas son fond blanc). Couleur confirmée
   blanc pur opaque (`--bg:var(--color_36)` = rgb(255,255,255),
   `--alpha-bg:1`). Hauteur réelle 100% du viewport (`.QED8q1 {
   position:fixed; height:calc(100% - var(--wix-ads-height)) }`), pas la
   hauteur du document — reproduite en `100vh` ici.
   ⚠️ Mal identifié une 1ère fois le 19/08/2026 (demande client sur les
   "marges" empêchant le full width) : #comp-lzathkte avait été pris pour
   le petit bouton "mon compte" (même largeur 53px par coïncidence, mais
   sans rapport — le vrai bouton "mon compte" est un lien texte dans le
   header, section 6). Le vrai #comp-lzathkte est une bande VIDE (aucun
   texte, aucun lien), purement un fond structurel — d'où le "empêche le
   full width" du client : cette bande blanche opaque masque en permanence
   les 53/51 derniers pixels de chaque section, même les sections
   full-bleed (Hero, fonds sage/doré), créant l'effet de marge résiduelle
   déjà signalé.
   z-index calé sous `.sm-pinned-social` (40, section 27) pour que les
   icônes restent visibles par-dessus la bande, et sous le header (100,
   section 6).
   ⚠️ Composant global côté source (présent sur toutes les pages via le
   masterPage Wix, pas propre à la homepage) mais ajouté ici UNIQUEMENT sur
   la homepage, sur demande explicite du client ("reproduis-les dans
   index-sm.html") — à étendre à header-sm.php si le client souhaite la
   même bande sur les pages intérieures.
   ⚠️ Aucune donnée mobile côté source (F12 desktop uniquement) : masquées
   sous 1024px par prudence (53+51=104px prendraient une part disproportionnée
   d'un écran mobile étroit) — même logique que `.sm-pinned-social`/
   `.sm-hero-leaf`.
   -------------------------------------------------------------------------- */
.sm-pinned-band {
  display: none;
}

@media (min-width: 1024px) {
  .sm-pinned-band {
    display: block;
    position: fixed;
    top: 0;
    height: 100vh;
    background-color: var(--sm-color-white);
    z-index: 30;
    pointer-events: none;
  }
}

.sm-pinned-band--left {
  left: 0;
  width: 53px;
}

.sm-pinned-band--right {
  right: 0;
  width: 51px;
}

/* --------------------------------------------------------------------------
   32. PAGE LE STUDIO — RÈGLES DE PAGE
   -------------------------------------------------------------------------- */
/* ✅ 20/08/2026 (demande client) : aucune image arrondie sur Le Studio.
   Scopé à `.sm-page--le-studio`, donc sans effet sur les images des autres
   pages, qui gardent leur radius actuel. */
.sm-page--le-studio img {
  border-radius: 0;
}

/* ✅ Ajouté le 20/08/2026 : variante de placement de l'étiquette partagée
   (.sm-offers-stamp-wrapper, section 13) pour la section « Nos offres
   entreprises » de page-formules. Elle ne porte QUE le placement : le
   composant, son image et son texte restent ceux de la homepage, qui n'est
   pas modifiée. Alignée à gauche de la row, comme sur le screenshot. */
.sm-offers-stamp-wrapper--b2b {
  container-type: inline-size;
  width: min(383px, 74vw);
  margin: 0;
}

/* ✅ Ajouté le 20/08/2026 (demande client) : l'étiquette ne doit plus
   participer au flux de la row — en flux, elle poussait les 3 cards de 344px
   vers le bas et créait un vide au-dessus de la grille.

   La row devient le référentiel, l'étiquette est positionnée dessus. La
   grille et les cards gardent donc leur position naturelle : aucune marge
   négative de compensation, aucune dimension de card touchée.

   `top` / `left` reproduisent le screenshot de référence, où l'étiquette
   mord sur le coin supérieur gauche de la 1re card. Valeurs relevées au
   pixel sur `sources/screenshot/Nos formules.png` (capture 2x) : bord gauche
   de la card à 291.5px, bord haut à 3217.5px, boîte de l'étiquette à
   172.4 / 3025.3 — soit -119px et -192px par rapport au coin de la card.
   `left` part du bord de la row, d'où le retrait de `--sm-padding-row`.

   Réservé à ≥1024px : en dessous, `--sm-padding-row` tombe à 16px et les
   383px de l'étiquette la feraient sortir de l'écran par la gauche. Sous ce
   seuil elle reste donc dans le flux, comme aujourd'hui. */
@media (min-width: 1024px) {
  .sm-b2b-cards {
    position: relative;
  }

  .sm-offers-stamp-wrapper--b2b {
    position: absolute;
    z-index: 2;
    top: -192px;
    left: calc(var(--sm-padding-row) - 119px);
  }
}

.sm-offers-stamp-wrapper--b2b .sm-offers-stamp {
  width: 100%;
  max-width: none;
  margin: 0;
}

.sm-offers-stamp-wrapper--b2b .sm-offers-stamp-text {
  left: 47.418%;
  top: 59.749%;
  width: 51%;
  margin: 0;
  font-size: 6.7cqw;
}

/* ✅ Ajouté le 16/09/2026 (demande client, constaté à 416px) : recalage de
   l'étiquette « Nos offres entreprises » en MOBILE. Desktop inchangé.

   ⚠️ Ce bloc doit rester APRÈS la règle ci-dessus. Les deux sélecteurs sont
   identiques, donc de même spécificité (0,2,0) : c'est l'ordre dans la
   feuille qui tranche. Placé plus haut (par exemple dans le @media mobile de
   la section 13), il serait écrasé par le `left: 47.418%` / `top: 59.749%`
   de la règle desktop et n'aurait aucun effet. */
@media (max-width: 767.98px) {
  .sm-offers-stamp-wrapper--b2b .sm-offers-stamp-text {
    left: 53.4%;
    top: 56.7%;
  }
}

/* ============================================================================
   HAUTEUR DE RÉFÉRENCE DES HERO — 616px en desktop
   ✅ Convention posée le 20/08/2026 (demande client). Voir STRUCTURE.md >
   « Hero ».

   Tous les Hero photo du site partagent désormais la même hauteur desktop.
   Avant, chacun avait sa propre valeur en `vh` (60/80vh sur la homepage,
   50/65vh sur Le Studio, 55/70vh sur Les Cours, Nos Formules et
   Entreprises), donc une hauteur qui variait d'une page à l'autre ET selon
   la hauteur de la fenêtre. `height` ET `min-height` sont posés tous les
   deux : sans le second, les `min-height` en vh existants reprendraient la
   main sur les écrans hauts.

   ⚠️ Cette règle ne concerne QUE les Hero. Les `.sm-section` standards
   gardent leur `--sm-padding-section-v` et n'ont aucune hauteur imposée.
   Ne pas ajouter ici une section qui n'est pas un Hero photo.

   Les images ne sont pas touchées : elles restent en `object-fit: cover`
   avec leur `object-position` propre, donc elles remplissent la nouvelle
   hauteur sans déformation.

   En dessous de 768px, on laisse les hauteurs mobiles existantes : 616px y
   occuperait presque tout l'écran. ============================================================================ */
@media (min-width: 768px) {
  .sm-section--hero,
  .sm-studio-hero,
  .sm-lescours-hero,
  .sm-formules-hero,
  .sm-entreprises-hero {
    height: 616px;
    min-height: 616px;
  }

  /* Les Hero Réservation et Séance d'essai sont des bandes photo en flux
     normal (pas de photo en `position: absolute`) : c'est donc l'image qui
     porte la hauteur, et son `aspect-ratio` doit céder la place.
     `object-fit: cover` / `object-position` inchangés, cadrage conservé. */
  .sm-reservation-hero-photo,
  .sm-seance-banner img {
    height: 616px;
    aspect-ratio: auto;
  }
}