/*
Theme Name: Starter Theme
Theme URI: https://underscores.me/
Author: Cyberscope
Author URI: http://www.cyberscope.fr
Description: Un super thème optimisé par les meilleurs intés du monde.
Version: 4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: starter-theme
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Starter Theme is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/

*/
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("./fonts/inter-variable-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("./fonts/inter-variable-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("./fonts/montserrat-variable-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("./fonts/montserrat-variable-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Quicksand n'est plus utilisée. Ses fichiers restent dans assets/fonts/. */

/* ==========================================================================
   1. VARIABLES
   Couleurs officielles de la charte graphique Re.source v1.0 (page 7) :
   bleu profond #2A2F6B, violet ombre #923974, mandarine #F2905F,
   soleil #FABD65, orange aplat #EF7C48. Les valeurs secondaires
   (fonds clairs, filets, ombres) sont dérivées de la maquette.
   Aucune couleur ni taille n'est écrite en dur dans les composants.
   ========================================================================== */
:root {
    /* Couleurs de marque */
    --c-bleu: #2A2F6B;
    /* primaire : titres, fonds sombres, boutons pleins */
    --c-bleu-profond: #21255A;
    /* bleu profond assombri : bandeau défilant, survol */
    --c-violet: #923974;
    /* violet ombre : début du dégradé, sur-titres sur fond clair */
    --c-mandarine: #F2905F;
    /* accent : cœur du dégradé, eyebrow sur fond sombre */
    --c-orange: #EF7C48;
    /* orange aplat (charte) : point du logo, puces */
    /* Orange assombri : seule variante de l'orange qui passe le contraste AA
     en texte sur fond clair (4,55:1) et en fond de bouton avec texte blanc. */
    --c-orange-fonce: #C7501C;
    --c-soleil: #FABD65;
    /* fin du dégradé, titres de colonnes du footer */
    --c-violet-clair: #C6749F;
    /* violet ombre éclairci : accent décoratif lisible sur le bleu */
    --c-blanc: #FFFFFF;
    --c-fond-1: #F4F3F9;
    /* sections claires alternées */
    --c-fond-2: #ECEAF4;
    /* sections claires, second ton */

    /* Couleurs fonctionnelles */
    --c-texte: var(--c-bleu);
    --c-texte-2: rgba(42, 47, 107, 0.72);
    /* paragraphes secondaires */
    --c-texte-3: rgba(42, 47, 107, 0.6);
    /* fil d'Ariane, notes */
    --c-filet: rgba(42, 47, 107, 0.14);
    --c-filet-sombre: rgba(255, 255, 255, 0.18);
    --c-sur-sombre: rgba(255, 255, 255, 0.84);
    /* texte sur fond bleu */
    --c-sur-sombre-2: rgba(255, 255, 255, 0.7);
    --c-focus: var(--c-mandarine);

    /* Dégradé signature cuivré (violet ombre → mandarine → soleil) */
    --degrade: linear-gradient(125deg, var(--c-violet) 0%, var(--c-mandarine) 55%, var(--c-soleil) 100%);
    /* Variante lisible du dégradé pour le TEXTE posé sur le bleu profond :
     l.extrémité violet ombre du dégradé ne passe pas le contraste AA. */
    --degrade-sur-sombre: linear-gradient(120deg, var(--c-mandarine) 0%, var(--c-soleil) 100%);
    /* Fond des emplacements visuels en attendant les photos */
    --degrade-visuel: radial-gradient(110% 80% at 70% 20%, rgba(242, 144, 95, 0.4), transparent 60%), linear-gradient(155deg, #3c4a8f, var(--c-bleu-profond));

    /* Ombres */
    --ombre: 0 20px 55px -24px rgba(42, 47, 107, 0.55);
    --ombre-bouton: 0 10px 26px -10px rgba(146, 57, 116, 0.6);

    /* Typographie */
    /* Échelle typographique :
     H1 et chiffres d'affichage  -> Montserrat ExtraBold 800, approche 75
     H2, H3, H4 et intertitres   -> Inter Bold 700
     Texte courant               -> Inter Regular 400 */
    --police-h1: "Montserrat", "Segoe UI", Arial, sans-serif;
    --police-titre: "Inter", system-ui, "Segoe UI", Arial, sans-serif;
    --police-texte: "Inter", system-ui, "Segoe UI", Arial, sans-serif;
    --fs-h1: clamp(2.2rem, 4.4vw, 3.8rem);
    /* hero home — H1 fourni long (3 lignes à 1920 px) */
    --fs-h1-soin: clamp(2rem, 4.6vw, 3.8rem);
    --fs-h2: clamp(1.8rem, 3.4vw, 2.6rem);
    --fs-h2-grand: clamp(2rem, 4.4vw, 3.5rem);
    /* manifeste, bande CTA */
    --fs-h2-moyen: clamp(1.7rem, 3vw, 2.2rem);
    /* Intertitre de section : nettement sous le H2, nettement au-dessus du
     corps de texte. Les H3 de carte gardent --fs-h3, plus petit. */
    --fs-h3-section: clamp(1.25rem, 2vw, 1.65rem);
    --fs-h4-section: clamp(1.02rem, 1.4vw, 1.15rem);
    --fs-h3: 1.12rem;
    --fs-lead: 1.12rem;
    --fs-base: 1rem;
    --fs-petit: 0.92rem;
    --fs-mini: 0.78rem;
    --fs-eyebrow: 0.76rem;
    --lh-titre: 1.08;
    --lh-texte: 1.65;
    --ls-titre: 0;
    --ls-h1: 0.075em;
    /* approche 75 (75/1000 em) */
    --ls-eyebrow: 0.18em;

    /* Espacements */
    --conteneur: 1240px;
    --gouttiere: 28px;
    --section-y: clamp(58px, 8vw, 112px);
    --section-y-court: clamp(40px, 5vw, 56px);
    --grille-gap: 20px;
    --bloc-gap: 14px;
    --header-h: 74px;

    /* Formes */
    --rayon-s: 14px;
    --rayon-m: 18px;
    --rayon-l: 22px;
    --rayon-pill: 44px;
    --transition: 0.25s ease;
    --transition-lente: 0.3s ease;

    /* Cibles tactiles */
    --cible-min: 44px;
}

/* ==========================================================================
   2. RESET ET BASES
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--police-texte);
    font-size: var(--fs-base);
    line-height: var(--lh-texte);
    color: var(--c-texte);
    background: var(--c-blanc);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

img,
svg,
picture {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

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

a:hover {
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

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

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

table {
    border-collapse: collapse;
    width: 100%;
}

strong,
b {
    font-weight: 700;
}

/* ==========================================================================
   3. ACCESSIBILITÉ
   ========================================================================== */
.evitement {
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translate(-50%, -200%);
    z-index: 200;
    padding: 10px 18px;
    background: var(--c-bleu);
    color: var(--c-blanc);
    border-radius: var(--rayon-pill);
    font-weight: 700;
    transition: transform var(--transition);
}

.evitement:focus {
    transform: translate(-50%, 0);
}

:focus-visible {
    outline: 3px solid var(--c-focus);
    outline-offset: 3px;
    border-radius: 4px;
}

.btn span {
    color: inherit;
}

.btn:focus-visible {
    outline-offset: 4px;
    border-radius: var(--rayon-pill);
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   4. MISE EN PAGE
   ========================================================================== */
.conteneur {
    width: 100%;
    max-width: var(--conteneur);
    margin: 0 auto;
    padding: 0 var(--gouttiere);
}

.section {
    padding: var(--section-y) 0;
    position: relative;
    overflow: hidden;
}

.section--court {
    padding: var(--section-y-court) 0;
}

.section--claire {
    background: var(--c-fond-1);
}

.section--claire-2 {
    background: var(--c-fond-2);
}

.section--sombre {
    background: var(--c-bleu);
    color: var(--c-blanc);
}

.section--degrade {
    background: var(--degrade);
    color: var(--c-blanc);
}

/* Motif décoratif de la charte (page 9) : les courbes du symbole déclinées en
   lignes fines. SVG vectoriel posé en image de fond, et non plus en masque.
   Trois raisons :
   — un masque CSS doit être de même origine ; ouvert en file:// (double clic
     sur index.html) Chrome l'ignorait et le décor disparaissait. Une image de
     fond, elle, n'est pas soumise à cette règle ;
   — le masque ajoutait une étape de composition où le tracé perdait en netteté ;
   — le fichier redevient un lien externe, mis en cache, au lieu de 11 Ko
     d'URI de données recopiés deux fois dans la feuille.
   En contrepartie la couleur est inscrite dans le SVG (soleil #FABD65), elle
   ne se pilote plus depuis le CSS. C'était la seule teinte utilisée.

   Empilement : le motif se glisse entre le fond de la section et son contenu.
   Sans z-index, un <div> en position absolue se peint AU-DESSUS du texte en
   flux normal — les courbes passaient alors devant les titres et les visuels.
   Le .conteneur est donc remonté d'un cran au-dessus du décor.

   Cadrage : le motif occupe toute la largeur de la section et se perd
   naturellement par la gauche et la droite, comme dans la charte. Dimensionné
   plus petit, il était tranché net par les bords et ne se lisait plus comme un
   motif mais comme un fragment. Il est ancré en haut de chaque bloc. */
.flux {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: url("/wp-content/uploads/2026/10/pattern.svg");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% auto;
    opacity: 0.22;
}

.section>.conteneur {
    position: relative;
    z-index: 1;
}

/* Variantes : ancrage et intensité, pour ne pas répéter le même cadrage */
.flux--doux {
    opacity: 0.28;
    background-position: right top;
    transform: scaleX(-1);
}

/* Pied de page : à pleine largeur, les traits traversaient les colonnes de
   liens. Le motif y est nettement réduit, ancré en haut à gauche comme
   partout ailleurs. */
.flux--pied {
    opacity: 0.22;
    /* background-position: left top;
    background-size: 520px auto; */
    background-position: left -80px;
    background-size: 700px auto;
}

@media (max-width: 860px) {
    .flux--pied {
        background-size: 500px auto;
    }
}

@media (max-width: 520px) {
    .flux--pied {
        background-size: 440px auto;
    }
}

.grille-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.grille-2--haut {
    align-items: start;
}

.grille-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grille-gap);
}

.grille-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grille-gap);
}

@media (max-width: 1023px) {
    .grille-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 860px) {
    .grille-2 {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .grille-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 540px) {
    .grille-4 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   5. TYPOGRAPHIE
   ========================================================================== */
/* H1 : Montserrat ExtraBold, approche 75, tout en majuscules. */
h1 {
    font-family: var(--police-h1);
    font-weight: 800;
    line-height: var(--lh-titre);
    letter-spacing: var(--ls-h1);
    text-transform: uppercase;
}

/* H2, H3, H4 : Inter Bold, casse normale. */
h2,
h3,
h4 {
    font-family: var(--police-titre);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: var(--ls-titre);
    text-transform: none;
}

/* Titres composés en bas de casse (cartes, étapes, formules) */
.titre-normal {
    text-transform: none;
    letter-spacing: 0;
}

/* Portion de titre en dégradé */
.degrade-texte {
    background: var(--degrade-sur-sombre);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Sur-titre de section : violet ombre sur fond clair (contraste AA),
   mandarine sur fond sombre comme en maquette */
.eyebrow {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.6em;
    font-family: var(--police-texte);
    font-weight: 700;
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--c-violet);
}

.eyebrow::before {
    content: "";
    margin-top: 0.6em;
    width: 0.45em;
    height: 0.45em;
    border-radius: 50%;
    background: var(--c-orange);
    flex: none;
}

.section--sombre .eyebrow,
.section--degrade .eyebrow,
.hero .eyebrow,
.soin-hero .eyebrow {
    color: var(--c-mandarine);
}

.eyebrow--centre {
    justify-content: center;
}

/* En-tête de section */
.entete {
    margin-bottom: 46px;
    max-width: 62ch;
}

.entete h2 {
    font-size: var(--fs-h2);
    color: var(--c-bleu);
    margin-top: 12px;
    max-width: 30ch;
}

.entete p {
    color: var(--c-texte-2);
    font-size: 1.02rem;
    margin-top: 14px;
    max-width: 42ch;
}

.entete--ligne {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
    max-width: none;
}

.entete--ligne p {
    margin-top: 0;
}

.section--sombre .entete h2 {
    color: var(--c-blanc);
}

.section--sombre .entete p {
    color: var(--c-sur-sombre-2);
}

.lead {
    font-size: var(--fs-lead);
}

.texte-2 {
    color: var(--c-texte-2);
}

.h2--moyen {
    font-size: var(--fs-h2-moyen);
    color: var(--c-bleu);
    margin: 12px 0 22px;
}

.mb-22 {
    margin-bottom: 22px;
}

/* ==========================================================================
   6. BOUTONS ET LIENS FLÉCHÉS
   ========================================================================== */
/* Pastille parfaite quelle que soit la hauteur : un rayon très supérieur à
   la demi-hauteur est ramené par le navigateur à exactement la moitié. */
.fl-module .btn,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    min-height: var(--cible-min);
    padding: 16px 32px;
    border: 2px solid transparent;
    border-radius: var(--rayon-pill);
    font-family: var(--police-texte);
    font-weight: 700;
    font-size: var(--fs-petit);
    line-height: 1.2;
    text-align: center;
    text-wrap: balance;
    cursor: pointer;
    /* Le fond s'arrête au bord intérieur de la bordure : plus de liseré de
     dégradé qui dépasse sous une bordure transparente. */
    background-clip: padding-box;
    transition: transform var(--transition), background-color var(--transition),
        color var(--transition), box-shadow var(--transition);
}

/* Dégradé cuivré à plat, sans ombre colorée : l'ombre teintée dessinait une
   silhouette décalée qui donnait l'impression d'un bouton coupé. */
.btn--degrade {
    background-image: var(--degrade);
    background-color: var(--c-mandarine);
    color: var(--c-blanc);
    box-shadow: 0 6px 18px -8px rgba(42, 47, 107, 0.55);

    .fleche {
        color: inherit;
    }
}

.btn--degrade:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -10px rgba(42, 47, 107, 0.6);
}

.fl-module .btn--bleu,
.btn--bleu {
    background-color: var(--c-bleu);
    color: var(--c-blanc);
}

.fl-module .btn--bleu:hover,
.btn--bleu:hover {
    background-color: var(--c-bleu-profond);
    transform: translateY(-2px);
}

.fl-module .btn--contour,
.btn--contour {
    border-color: currentColor;
    color: var(--c-blanc);
    background-color: transparent;
}

.btn--contour:hover {
    background-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

.fl-module .btn--contour-bleu,
.btn--contour-bleu {
    border-color: var(--c-bleu);
    color: var(--c-bleu);
    background-color: transparent;
}

.fl-module .btn--contour-bleu:hover,
.btn--contour-bleu:hover {
    background-color: var(--c-bleu);
    color: var(--c-blanc);
    transform: translateY(-2px);
}

.btn--compact {
    padding: 12px 26px;
}

.btn .fleche {
    font-weight: 700;
}

.actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.actions--haut {
    margin-top: 30px;
}

/* Lien fléché « En savoir plus → » */
.lien-fleche {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--cible-min);
    font-size: var(--fs-mini);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-bleu);
    transition: color var(--transition);
}

.lien-fleche:hover {
    color: var(--c-violet);
}

.lien-fleche--accent {
    color: var(--c-violet);
}

.lien-fleche--accent:hover {
    color: var(--c-bleu);
}

.lien-fleche--bas {
    margin-top: auto;
}

/* ==========================================================================
   7. EN-TÊTE ET NAVIGATION
   Menu identique en desktop et en mobile (même balisage, même ordre).
   Les deux entrées à sous-menu (Nos soins, Pour qui) associent un lien vers
   la page parente et un bouton qui ouvre le sous-menu : le lien reste
   atteignable au clavier comme au doigt, le bouton porte aria-expanded.
   ========================================================================== */
.entete-site {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--c-filet);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: var(--header-h);
}

.logo {
    display: inline-flex;
    align-items: center;
    min-height: var(--cible-min);
}

.logo img {
    width: auto;
    height: 34px;
}

.nav__liste {
    display: flex;
    gap: 26px;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 600;
}

.nav__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
}

.nav__liste>li>a,
.nav__liste>li>span {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--cible-min);
    padding: 4px 0;
    white-space: nowrap;
}

.nav__liste>li>a::after,
.nav__liste>li>span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 8px;
    width: 0;
    height: 2px;
    background: var(--c-mandarine);
    transition: width var(--transition);
}

.nav__liste>li>a:hover::after,
.nav__liste>li>span:hover::after,
.nav__liste>li>a[aria-current="page"]::after,
.nav__liste>li>span[aria-current="page"]::after,
.nav__item--ouvert>a::after,
.nav__item--ouvert>span::after {
    width: 100%;
}

.nav__liste a[aria-current="page"],
.nav__liste span[aria-current="page"] {
    color: var(--c-violet);
}

/* Chevron d'ouverture du sous-menu */
.nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-height: var(--cible-min);
    color: var(--c-bleu);
}

.nav__toggle svg {
    width: 11px;
    height: 11px;
    transition: transform var(--transition);
}

.nav__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Sous-menu */
.nav__sous {
    position: absolute;
    top: calc(100% - 6px);
    left: -18px;
    z-index: 60;
    display: none;
    min-width: 264px;
    padding: 10px;
    background: var(--c-blanc);
    border: 1px solid var(--c-filet);
    border-radius: var(--rayon-s);
    box-shadow: var(--ombre);
}

.nav__item--ouvert>.nav__sous {
    display: block;
}

.nav__sous a,
.nav__sous span {
    display: flex;
    align-items: center;
    min-height: var(--cible-min);
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 500;
    transition: background-color var(--transition), color var(--transition);
}

.nav__sous a:hover {
    background: var(--c-fond-1);
    color: var(--c-violet);
}

.nav__sous a[aria-current="page"] {
    color: var(--c-violet);
    background: var(--c-fond-1);
}

/* Le survol ouvre aussi le sous-menu en pointeur fin (le JS gère le reste) */
@media (hover: hover) and (min-width: 1101px) {

    .nav__item:hover>.nav__sous,
    .nav__item:focus-within>.nav__sous {
        display: block;
    }
}

.nav__cta {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Bouton burger : visible sous 1024 px */
.burger {
    display: none;
    width: var(--cible-min);
    height: var(--cible-min);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--c-bleu);
}

.burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}

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

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

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

@media (max-width: 1100px) {
    .burger {
        display: flex;
    }

    .nav__liste {
        display: none;
        position: absolute;
        top: var(--header-h);
        left: 0;
        right: 0;
        max-height: calc(100vh - var(--header-h));
        overflow-y: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px var(--gouttiere) 20px;
        background: var(--c-blanc);
        border-bottom: 1px solid var(--c-filet);
        box-shadow: var(--ombre);
    }

    .nav__liste.est-ouverte {
        display: flex;
    }

    .nav__liste>li {
        border-bottom: 1px solid var(--c-filet);
    }

    .nav__liste>li:last-child {
        border-bottom: 0;
    }

    .nav__item {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .nav__liste>li>a,
    .nav__liste>li>span {
        flex: 1;
        padding: 12px 0;
        font-size: 1rem;
        white-space: normal;
    }

    .nav__liste>li>a::after,
    .nav__liste>li>span::after {
        display: none;
    }

    .nav__toggle {
        width: var(--cible-min);
    }

    /* En mobile le sous-menu s'insère dans le flux, sous son parent */
    .nav__sous {
        position: static;
        width: 100%;
        min-width: 0;
        margin: 0 0 10px;
        padding: 4px 0 4px 14px;
        border: 0;
        border-left: 2px solid var(--c-filet);
        border-radius: 0;
        box-shadow: none;
    }

    .nav__sous a {
        padding: 4px 8px;
        font-size: 0.95rem;
    }
}

@media (max-width: 400px) {
    .nav__cta .btn {
        padding-inline: 16px;
    }
}

/* ==========================================================================
   8. FIL D'ARIANE
   ========================================================================== */
.ariane {
    font-size: var(--fs-mini);
    color: var(--c-texte-3);
    padding: 22px 0 0;
    font-weight: 500;
}

.ariane ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0 6px;
}

.ariane li+li::before {
    content: "/";
    margin-right: 6px;
}

.ariane a:hover {
    color: var(--c-violet);
}

/* ==========================================================================
   9. HOME — HERO, MARQUEE, MANIFESTE
   ========================================================================== */
.hero {
    background: var(--c-bleu);
    color: var(--c-blanc);
}

/* Visuel de fond du bandeau d'accueil. Le voile dégradé garantit la lisibilité
   du texte blanc quelle que soit la photo. */
.hero__fond {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero__fond img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero__fond::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, var(--c-bleu) 0%, var(--c-bleu) 40%, rgba(42, 47, 107, 0.9) 68%, rgba(42, 47, 107, 0.5) 100%);
}

/* Sous 1024 px le texte passe sur toute la largeur : le voile ne peut plus
   s'éclaircir vers la droite, sinon le sous-titre en dégradé tombe sous
   le seuil AA. On repasse donc sur un voile vertical, plus couvrant. */
@media (max-width: 1024px) {
    .hero__fond::after {
        background: linear-gradient(180deg, var(--c-bleu) 0%, rgba(42, 47, 107, 0.95) 55%, rgba(42, 47, 107, 0.9) 100%);
    }

    /* Le halo orange passerait sous le texte, qui occupe ici toute la largeur :
     la photo suffit a rechauffer le bandeau sur petit ecran. */
    .hero>.hero__halo {
        display: none;
    }
}

.hero__halo {
    position: absolute;
    right: -8%;
    top: -16%;
    width: 48%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 144, 95, 0.32), rgba(146, 57, 116, 0.12) 55%, transparent 70%);
    filter: blur(20px);
    pointer-events: none;
}

.hero .conteneur {
    position: relative;
    z-index: 2;
}

/* Plus de sur-titre au-dessus : le H1 ouvre le bandeau. */
/* Les trois coupures du H1 sont explicites dans le texte : aucune largeur
   maximale, sinon le navigateur en ajouterait d'autres. */
.hero h1 {
    font-size: var(--fs-h1);
    margin: 0;
    max-width: none;
}

.hero__sous-titre {
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: none;
    margin-top: 16px;
    max-width: 52ch;
    background: var(--degrade-sur-sombre);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero__accroche {
    max-width: 80ch;
    margin-top: 14px;
    font-size: var(--fs-lead);
    color: var(--c-sur-sombre);
}

.hero__accroche strong {
    color: var(--c-blanc);
}

.hero__sous-titre+.hero__accroche {
    margin-top: 26px;
}

.hero__accroche .accroche-forte {
    display: block;
    font-size: 1.22rem;
    font-weight: 700;
    color: var(--c-blanc);
}

.hero .actions {
    margin-top: 36px;
}

/* Chiffres clés : bandeau autonome, placé sous le bandeau défilant */
.chiffres {
    background: var(--c-fond-1);
}

.chiffres__liste {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 40px;
}

@media (max-width: 860px) {
    .chiffres__liste {
        grid-template-columns: 1fr;
    }
}

.chiffres__liste li {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--c-bleu);
}

.chiffres__liste small {
    display: block;
    margin-top: 8px;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--c-texte-2);
}

.chiffres__liste b {
    display: block;
    font-family: var(--police-h1);
    font-weight: 800;
    font-size: 2.4rem;
    /* Couleur pleine : le dégradé finit trop clair sur fond clair */
    color: var(--c-violet);
}

/* Bandeau défilant des 7 soins */
.marquee {
    background: var(--c-bleu-profond);
    color: var(--c-blanc);
    overflow: hidden;
    border-top: 1px solid var(--c-filet-sombre);
    border-bottom: 1px solid var(--c-filet-sombre);
}

.marquee__piste {
    display: flex;
    width: max-content;
    animation: defilement 34s linear infinite;
}

.marquee__piste span {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 34px;
    font-family: var(--police-h1);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.marquee__piste i {
    font-style: normal;
    font-weight: 700;
    background: var(--degrade-sur-sombre);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@keyframes defilement {
    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .marquee__piste {
        animation: none;
        flex-wrap: wrap;
        width: auto;
        justify-content: center;
    }

    .marquee__piste span:nth-child(n + 6) {
        display: none;
    }
}

/* Manifeste : visuel à gauche, titre puis texte à droite */
.manifeste__grille {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 56px;
    align-items: center;
}

/* Le titre occupe la même largeur que le paragraphe qui le suit */
.manifeste h2 {
    font-size: var(--fs-h2-moyen);
    color: var(--c-bleu);
    margin: 12px 0 22px;
    max-width: none;
}

.manifeste__texte {
    font-size: var(--fs-lead);
    color: var(--c-texte-2);
    display: grid;
    gap: 18px;
}

.manifeste__texte strong {
    color: var(--c-bleu);
}

/* Première ligne du manifeste : elle pose le parti pris, elle est donc
   légèrement détachée du reste du bloc. */
.manifeste__accroche {
    font-size: 1.16em;
    line-height: 1.5;
    color: var(--c-bleu);
}

@media (max-width: 860px) {
    .manifeste__grille {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

.soins__description {
    margin-bottom: 46px;
}

/* ==========================================================================
   10. HOME — GRILLE DES SOINS
   ========================================================================== */
.soins-grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grille-gap);
}

@media (max-width: 1023px) {
    .soins-grille {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    .soins-grille {
        grid-template-columns: 1fr;
    }
}

.carte-soin {
    display: flex;
    flex-direction: column;
    border-radius: var(--rayon-m);
    overflow: hidden;
    background: var(--c-blanc);
    border: 1px solid var(--c-filet);
    box-shadow: var(--ombre);
    transition: transform var(--transition-lente);
}

.carte-soin__visuel {
    position: relative;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: flex-end;
    padding: 20px;
    color: var(--c-blanc);
    background: var(--degrade-visuel);
}

.carte-soin__visuel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(33, 37, 90, 0.92), rgba(33, 37, 90, 0.12) 55%, rgba(33, 37, 90, 0) 100%);
}

.carte-soin__visuel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carte-soin__etiquette {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(33, 37, 90, 0.4);
    padding: 5px 10px;
    border-radius: 30px;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.carte-soin__etiquette--bientot {
    left: auto;
    right: 14px;
    background: var(--c-violet);
}

.carte-soin__visuel h3 {
    position: relative;
    z-index: 2;
    font-size: 1.15rem;
    text-transform: none;
    letter-spacing: 0;
}

.carte-soin__corps {
    padding: 18px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: var(--bloc-gap);
    flex: 1;
}

.carte-soin__duree {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-violet);
}

.carte-soin__corps p {
    font-size: var(--fs-petit);
    color: var(--c-texte-2);
}

.carte-soin__corps .lien-fleche {
    margin-top: auto;
}

.carte-soin:hover .lien-fleche {
    color: var(--c-violet);
}

/* Dégradés propres à chaque soin (fond de l'emplacement photo) */
.visuel--hydro {
    background: linear-gradient(155deg, #2f7c8a, #1d3550);
}

.visuel--presso {
    background: linear-gradient(155deg, var(--c-violet), #4a1d3a);
}

.visuel--photo {
    background: linear-gradient(155deg, var(--c-orange), var(--c-violet));
}

.visuel--dome {
    background: linear-gradient(155deg, var(--c-soleil), var(--c-orange));
}

.visuel--flott {
    background: linear-gradient(155deg, #2f4a8a, var(--c-bleu-profond));
}

.visuel--scan {
    background: linear-gradient(155deg, #4a5290, var(--c-bleu-profond));
}

.visuel--cryo {
    background: linear-gradient(155deg, #3a6f86, #16303f);
}

/* 8e tuile : renvoi vers les profils */
.carte-synergie {
    border-radius: var(--rayon-m);
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    color: var(--c-blanc);
    background: var(--degrade-visuel);
    box-shadow: var(--ombre);
}

.carte-synergie h3 {
    font-size: 1.25rem;
    text-transform: none;
    letter-spacing: 0;
}

.carte-synergie p {
    margin-top: 12px;
    font-size: var(--fs-petit);
    color: var(--c-sur-sombre);
}

.carte-synergie .lien-fleche {
    margin-top: auto;
    color: var(--c-soleil);
    padding-top: 20px;
}

.carte-synergie .lien-fleche:hover {
    color: var(--c-blanc);
}

/* ==========================================================================
   11. HOME — PROFILS (« Pour qui ? »)
   Cinq profils fournis (la maquette en montrait trois) : grille auto-fit.
   ========================================================================== */
/* Disposition en maçonnerie : 4 colonnes légèrement décalées en hauteur.
   Chaque carte porte sa propre couleur d'accent (--accent). */
/* Cinq publics en maçonnerie : 3 colonnes décalées en hauteur. */
.profils-grille {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: start;
}

.profils-grille>li:nth-child(3n + 2) {
    margin-top: 46px;
}

.profils-grille>li:nth-child(3n) {
    margin-top: 22px;
}

@media (max-width: 1200px) {
    .profils-grille {
        grid-template-columns: repeat(2, 1fr);
    }

    .profils-grille>li:nth-child(3n + 2),
    .profils-grille>li:nth-child(3n) {
        margin-top: 0;
    }

    .profils-grille>li:nth-child(2n) {
        margin-top: 40px;
    }
}

@media (max-width: 680px) {
    .profils-grille {
        grid-template-columns: 1fr;
    }

    .profils-grille>li {
        margin-top: 0 !important;
    }
}

.profil {
    --accent: var(--c-mandarine);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--c-filet-sombre);
    border-radius: var(--rayon-m);
    padding: 32px 28px 28px;
    background: rgba(255, 255, 255, 0.03);
    transition: transform var(--transition-lente), border-color var(--transition-lente), background-color var(--transition-lente);
}

/* Filet de couleur en haut de carte */
.profil::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--accent);
}

/* Halo coloré discret en fond de carte */
.profil::after {
    content: "";
    position: absolute;
    top: -40%;
    right: -30%;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.12;
    filter: blur(26px);
    pointer-events: none;
}

.profil>* {
    position: relative;
    z-index: 1;
}

.profil--sportifs {
    --accent: var(--c-mandarine);
}

.profil--actifs {
    --accent: var(--c-soleil);
}

.profil--dirigeants {
    --accent: var(--c-orange);
}

.profil--seniors {
    --accent: var(--c-violet-clair);
}

.profil--entreprises {
    --accent: var(--c-mandarine);
}

.profil:hover {
    border-color: var(--accent);
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.06);
}

.profil:hover::after {
    opacity: 0.2;
}

.profil h3 {
    font-size: 1.35rem;
    color: var(--c-blanc);
    text-transform: none;
    letter-spacing: 0;
}

.profil h3::after {
    content: "";
    display: block;
    width: 32px;
    height: 2px;
    margin-top: 12px;
    background: var(--accent);
}

.profil p {
    margin-top: 14px;
    font-size: 0.96rem;
    color: rgba(255, 255, 255, 0.78);
}

.profil .btn {
    align-self: flex-start;
    margin-top: 20px;
}

/* Le bouton reste blanc : les accents colorés ne passent pas 4,5:1 en texte */
.profil .btn--contour:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--c-bleu);
}

.profil__lien {
    margin-top: auto;
    padding-top: 24px;
}

.profil p strong {
    color: var(--c-blanc);
}

/* ==========================================================================
   12. HOME — APPROCHE, TÉMOIGNAGES, BLOG
   ========================================================================== */
.approche__grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.approche h2 {
    font-size: var(--fs-h2);
    color: var(--c-bleu);
    margin: 12px 0 20px;
}

@media (max-width: 860px) {
    .approche__grille {
        grid-template-columns: 1fr;
        gap: 34px;
    }
}

/* Liste d'étapes numérotées (accueil, expérience) */
.liste-etapes {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 24px 0 30px;
}

.liste-etapes li {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

/* Puce reprenant l'emblème rond du logo (dégradé cuivré) */
.liste-etapes li::before {
    content: "";
    width: 20px;
    height: 20px;
    margin-top: 3px;
    border-radius: 50%;
    background: var(--degrade);
    box-shadow: inset -3px -3px 6px rgba(42, 47, 107, 0.35);
    flex: none;
}

/* Intitulé de l'item : uniquement le <strong> enfant direct du <div>,
   pour ne pas affecter les mots en gras à l'intérieur du texte. */
.liste-etapes li>div>strong,
/* Même habillage quand l'intitulé est un vrai titre (h3) et non un <strong> */
.liste-etapes__titre {
    display: block;
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: 0.86rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--c-bleu);
    margin-bottom: 3px;
}

.liste-etapes span,
.liste-etapes p,
.liste-etapes address {
    font-size: 0.94rem;
    color: var(--c-texte-2);
    font-style: normal;
}

.liste-etapes span strong {
    color: var(--c-bleu);
    font-weight: 700;
}

.liste-etapes--sans-marge {
    margin: 0;
}

.temoignages-grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grille-gap);
}

@media (max-width: 860px) {
    .temoignages-grille {
        grid-template-columns: 1fr;
    }
}

.temoignage {
    background: var(--c-blanc);
    border: 1px solid var(--c-filet);
    border-radius: 16px;
    padding: 28px;
}

.temoignage .temoignage__etoiles {
    letter-spacing: 3px;
    margin-bottom: 14px;
    font-size: 1rem;
    color: var(--c-violet);
}

.temoignage p {
    font-size: 1.05rem;
    color: var(--c-texte);
}

.temoignage footer {
    margin-top: 18px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--c-violet);
}

/* Cartes d'articles (home + page soin) */
.blog-grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grille-gap);
}

/* Palier intermédiaire : à une seule colonne dès 860 px, un visuel en 16/9
   occupait toute la largeur de l'écran et la page s'allongeait démesurément
   sur la page blog, qui compte onze cartes. */
@media (max-width: 1100px) {
    .blog-grille {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 680px) {
    .blog-grille {
        grid-template-columns: 1fr;
    }
}

.carte-article {
    display: flex;
    flex-direction: column;
    background: var(--c-blanc);
    border: 1px solid var(--c-filet);
    border-radius: 16px;
    overflow: hidden;
    transition: transform var(--transition-lente), box-shadow var(--transition-lente);
}

.carte-article:hover {
    transform: translateY(-5px);
    box-shadow: var(--ombre);
}

.carte-article__visuel {
    position: relative;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: flex-end;
    padding: 16px;
    background: var(--degrade-visuel);
}

.carte-article__visuel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(33, 37, 90, 0.92), rgba(33, 37, 90, 0.15) 60%, rgba(33, 37, 90, 0.05));
}

.carte-article__visuel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carte-article__categorie {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-blanc);
    background: rgba(33, 37, 90, 0.4);
    padding: 4px 9px;
    border-radius: 20px;
}

.carte-article__visuel h3 {
    position: relative;
    z-index: 2;
    font-size: 1.05rem;
    color: var(--c-blanc);
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.25;
}

.carte-article__corps {
    padding: 18px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.carte-article__corps p {
    font-size: var(--fs-petit);
    color: var(--c-texte-2);
}

.carte-article__corps .lien-fleche {
    margin-top: auto;
}

/* Étiquette de thème, posée sur le visuel. Trois thèmes couvrent les sujets
   éditoriaux : Bienfaits (par défaut), Indications, Pratique. Le fond reste
   assez opaque pour que le blanc tienne le contraste sur n'importe quel visuel. */
.carte-article__categorie--indications {
    background: rgba(146, 57, 116, 0.78);
}

.carte-article__categorie--pratique {
    background: rgba(42, 47, 107, 0.78);
}

/* Étiquettes de technologie, dans le corps de la carte. Neutres : elles
   situent l'article sans concurrencer le thème. */
.etiquettes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.etiquette {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-violet);
    background: var(--c-fond-1);
    border: 1px solid var(--c-filet);
    border-radius: 20px;
    padding: 4px 10px;
}

.etiquette a {
    display: block;
    color: inherit;
}

.etiquette a:hover {
    color: var(--c-bleu);
}

.carte-article--simple {
    padding: 32px 30px;
}

.carte-article--simple h3 {
    font-size: var(--fs-h3);
    color: var(--c-bleu);
    text-transform: none;
    letter-spacing: 0;
    margin-top: 6px;
}

.carte-article--simple p {
    margin-top: 10px;
}

/* ==========================================================================
   13. BANDE CTA, VISITE, CORNER NUTRIPURE, PARTENAIRES, NEWSLETTER
   ========================================================================== */
.bande-cta {
    text-align: center;
}

.bande-cta h2 {
    font-size: var(--fs-h2-grand);
    max-width: 20ch;
    margin: 0 auto 26px;
    color: var(--c-blanc);
}

.visite-grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 42px;
}

@media (max-width: 900px) {
    .visite-grille {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .visite-grille {
        grid-template-columns: 1fr;
    }
}

.info {
    padding: 26px;
    border: 1px solid var(--c-filet);
    border-radius: var(--rayon-s);
    background: var(--c-blanc);
    display: flex;
    flex-direction: column;
}

.info h3 {
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    margin-bottom: 10px;
    color: var(--c-bleu);
}

.info p,
.info address {
    font-size: 0.9rem;
    color: var(--c-texte-2);
    font-style: normal;
}

.info .lien-fleche {
    margin-top: 12px;
    font-size: 0.74rem;
}

/* Bloc Nutripure : vidéo à gauche, contenu à droite.
   Remplace l'ancien « corner » et l'ancienne liste de partenaires.
   La vidéo garde le ratio 16/9 et l'arrondi des autres visuels du site. */
.nutripure__grille {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 52px;
    align-items: center;
}

.nutripure__grille>* {
    min-width: 0;
}

.nutripure__video {
    aspect-ratio: 16 / 9;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

/* Pastille de lecture : simple repère visuel tant que la vidéo n'est pas
   fournie. Elle disparaît avec le gabarit dès qu'on pose la balise <video>. */
.nutripure__play {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--c-bleu);
    box-shadow: 0 10px 30px -12px rgba(42, 47, 107, 0.6);
}

.nutripure__play svg {
    width: 34px;
    height: 34px;
}

/* Si la vraie vidéo est posée, elle reprend le cadre du gabarit. */
video.nutripure__video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--rayon-l);
    box-shadow: var(--ombre);
    background: var(--c-bleu);
}

.nutripure__contenu h2 {
    font-size: var(--fs-h2-moyen);
    margin: 12px 0 16px;
    color: var(--c-bleu);
}

.nutripure__contenu p {
    color: var(--c-texte-2);
    font-size: 1.05rem;
}

.nutripure__contenu p strong {
    color: var(--c-bleu);
}

.nutripure__contenu .lien-fleche {
    margin-top: 18px;
}

.nutripure__video {
    position: relative;
    aspect-ratio: 16 / 9;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.nutripure__lecture {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;

    &:focus-visible {
        outline: 3px solid currentColor;
        outline-offset: -6px;
    }
}

.nutripure__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Sous 900 px : une seule colonne, la vidéo reste en premier. */
@media (max-width: 900px) {
    .nutripure__grille {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

.newsletter {
    text-align: center;
}

.newsletter h2 {
    font-size: var(--fs-h2);
    max-width: 20ch;
    margin: 0 auto 14px;
    color: var(--c-blanc);
}

.newsletter p {
    max-width: 46ch;
    margin: 0 auto 26px;
    color: rgba(255, 255, 255, 0.92);
}

.newsletter form {
    display: flex;
    gap: 10px;
    max-width: 480px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
}

.newsletter input {
    flex: 1;
    min-width: 220px;
    min-height: var(--cible-min);
    padding: 15px 20px;
    border-radius: var(--rayon-pill);
    border: 2px solid transparent;
    background: var(--c-blanc);
    color: var(--c-bleu);
    font-size: 0.95rem;
}

.newsletter input::placeholder {
    color: var(--c-texte-3);
}

.newsletter input:focus-visible {
    outline-color: var(--c-bleu);
}

.newsletter__reseaux {
    margin-top: 22px;
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ==========================================================================
   14. FAQ (ACCORDÉON)
   ========================================================================== */
.faq__liste {
    max-width: 100%;
}

/* Le titre de la FAQ tient sur une seule ligne */
.faq .entete {
    max-width: none;
}

.faq .entete h2 {
    max-width: none;
    white-space: nowrap;
    font-size: clamp(1.5rem, 3.2vw, 3rem);
}

@media (max-width: 480px) {
    .faq .entete h2 {
        white-space: normal;
    }
}

/* Styles d'accordéon partagés : portés par .faq__liste pour pouvoir servir
   hors de la section FAQ (ex. les 3 phases sur fond bleu). */
.faq__liste details {
    border-bottom: 1px solid var(--c-filet);
    padding: 6px 0;
}

.faq__liste summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: var(--cible-min);
    padding: 12px 0;
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: 0.98rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--c-bleu);
    cursor: pointer;
    list-style: none;
}

.faq__liste summary::-webkit-details-marker {
    display: none;
}

.faq__liste summary::after {
    content: "+";
    flex: none;
    color: var(--c-orange);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    transition: transform 0.2s ease;
}

.faq__liste details[open] summary::after {
    transform: rotate(45deg);
}

.faq__liste details p {
    padding: 2px 0 18px;
    color: var(--c-texte-2);
    font-size: 0.98rem;
    max-width: none;
}

/* Liste à puces dans une réponse de FAQ (contre-indications) */
.faq__liste-puces {
    margin: 0 0 18px;
    padding-left: 22px;
    list-style: disc;
    color: var(--c-texte-2);
    font-size: 0.98rem;
}

.faq__liste-puces li+li {
    margin-top: 8px;
}

.faq__liste-puces strong {
    color: var(--c-bleu);
}

.faq__liste details p+.faq__liste-puces {
    margin-top: -10px;
}

/* ==========================================================================
   15. SOIN — HERO, BÉNÉFICES, EFFETS, ÉTAPES, EXPÉRIENCE
   ========================================================================== */
.soin-hero {
    background: var(--c-bleu);
    color: var(--c-blanc);
    padding-top: 30px;
}

.soin-hero .hero__halo {
    right: -6%;
    top: -20%;
    width: 46%;
}

.soin-hero__grille {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 54px;
    align-items: center;
}

.soin-hero h1 {
    font-size: var(--fs-h1-soin);
    margin: 16px 0 6px;
}

/* Sous 520 px seulement : autoriser la coupure des mots très longs */
@media (max-width: 520px) {
    .soin-hero h1 {
        overflow-wrap: anywhere;
    }
}

.soin-hero__grille>* {
    min-width: 0;
}

.soin-hero__intro {
    font-size: 1.08rem;
    color: var(--c-sur-sombre);
    max-width: 50ch;
}

.soin-hero__intro strong {
    color: var(--c-blanc);
}

.soin-hero__intro+.soin-hero__intro {
    margin-top: 14px;
}

.soin-hero .pilules+.soin-hero__intro {
    font-size: 1.16rem;
}

.soin-hero .actions {
    margin-top: 30px;
}

@media (max-width: 880px) {
    .soin-hero__grille {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}


/* ---- Introduction d'une page soin, juste sous le bandeau ---- */
.intro-soin__titre {
    font-size: var(--fs-h3-section);
    color: var(--c-bleu);
    margin-bottom: 20px;
    max-width: 44ch;
}

.intro-soin p {
    color: var(--c-texte-2);
    font-size: var(--fs-lead);
    max-width: 92ch;
}

.intro-soin p+p {
    margin-top: 16px;
}

.intro-soin p strong {
    color: var(--c-bleu);
}

/* Intertitre de section posé juste sous le H2 : on le colle au titre. */
.phases__titre--chapeau {
    margin-top: 10px;
    margin-bottom: 16px;
}

/* Tarif et bouton de réservation sur une seule ligne */
.soin-hero__reserver {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 26px;
}

.soin-hero__reserver .prix-depart {
    margin: 0;
}

/* Infos pratiques sur trois colonnes quand la place le permet */
.liste-etapes--colonnes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 900px) {
    .liste-etapes--colonnes {
        grid-template-columns: 1fr;
    }
}

.pilules {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 20px 0 22px;
}

.pilule {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 1px solid var(--c-filet-sombre);
    border-radius: 30px;
    padding: 7px 14px;
    color: rgba(255, 255, 255, 0.92);
}

/* Quatre bénéfices avec icône ronde */
.benefices {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    text-align: center;
}

@media (max-width: 760px) {
    .benefices {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

.benefice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
}

.benefice__icone {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--degrade);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-blanc);
    box-shadow: 0 8px 18px -8px rgba(146, 57, 116, 0.6);
    display: grid;

    img {
        width: 100%;
        height: auto;
        display: block;
        margin: auto;
    }
}

.benefice__icone svg {
    width: 27px;
    height: 27px;
}

.benefice span {
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: 0.86rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--c-bleu);
}

/* Cartes « effets » numérotées */
.effets-grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

@media (max-width: 900px) {
    .effets-grille {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .effets-grille {
        grid-template-columns: 1fr;
    }
}

.effet {
    background: var(--c-blanc);
    border: 1px solid var(--c-filet);
    border-radius: var(--rayon-m);
    padding: 30px 26px;
    transition: transform var(--transition-lente), box-shadow var(--transition-lente), border-color var(--transition-lente);
}

.effet:hover {
    transform: translateY(-5px);
    box-shadow: var(--ombre);
    border-color: transparent;
}

.effet .effet__numero {
    font-family: var(--police-h1);
    font-weight: 800;
    font-size: 0.92rem;
    letter-spacing: 0.06em;
    color: var(--c-violet);
}

.effet h3 {
    font-size: var(--fs-h3);
    margin: 14px 0 10px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--c-bleu);
}

.effet p {
    font-size: 0.95rem;
    color: var(--c-texte-2);
}

.effet .effet__cible {
    margin-top: 14px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-violet);
}

/* Étapes numérotées sur fond bleu (3 phases, déroulement de séance) */
.etapes {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.etapes--4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1023px) {
    .etapes--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 820px) {
    .etapes {
        grid-template-columns: 1fr;
    }
}

.etape {
    position: relative;
    padding-top: 20px;
}

.etape::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--degrade);
}

.etape .etape__numero {
    font-family: var(--police-h1);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    background: var(--degrade-sur-sombre);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.etape h3,
.etape h4 {
    font-size: 1.08rem;
    margin: 12px 0 10px;
    color: var(--c-blanc);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
}

.etape p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.78);
}

.etape small {
    font-weight: 400;
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.7);
}

/* Expérience : liste + visuel carré */
.experience__grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.experience h2 {
    font-size: var(--fs-h2-moyen);
    margin: 14px 0 22px;
    color: var(--c-bleu);
}

.experience .liste-etapes {
    margin: 0;
}

@media (max-width: 860px) {
    .experience__grille {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* Infos pratiques compactes (durée, tenue, fréquence) */
.infos-pratiques {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--c-filet);
}

@media (max-width: 760px) {
    .infos-pratiques {
        grid-template-columns: 1fr;
    }
}

.infos-pratiques strong {
    display: block;
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-violet);
    margin-bottom: 6px;
}

.infos-pratiques p {
    font-size: 0.94rem;
    color: var(--c-texte-2);
}

/* ==========================================================================
   16. SOIN — FORMULES ET TARIFS, PRÉCAUTIONS, LOCAL
   ========================================================================== */
.formules-grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grille-gap);
}

@media (max-width: 760px) {
    .formules-grille {
        grid-template-columns: 1fr;
    }
}

.formule {
    background: var(--c-blanc);
    border: 1px solid var(--c-filet);
    border-radius: var(--rayon-m);
    padding: 32px 30px;
    display: flex;
    flex-direction: column;
}

.formule h3 {
    font-size: 1.3rem;
    color: var(--c-bleu);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 6px;
}

.formule h3 em {
    font-style: normal;
    color: var(--c-violet);
}

.formule__duree {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-violet);
    margin-bottom: 18px;
}

.formule table {
    font-size: 0.95rem;
    margin-bottom: 22px;
}

.formule caption {
    text-align: left;
}

.formule th,
.formule td {
    text-align: left;
    vertical-align: top;
    padding: 12px 10px 12px 0;
    border-top: 1px solid var(--c-filet);
}

.formule thead th {
    border-top: 0;
    padding-top: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-texte-3);
}

.formule tbody th {
    font-weight: 700;
    color: var(--c-bleu);
    white-space: nowrap;
}

.formule td {
    color: var(--c-texte-2);
}

.formule td:last-child {
    text-align: right;
    font-family: var(--police-h1);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--c-bleu);
    white-space: nowrap;
}

.formule .lien-fleche {
    margin-top: auto;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.86rem;
}

.tarifs-note {
    margin-top: 18px;
    font-size: 0.84rem;
    color: var(--c-texte-3);
}

.formule {
    min-width: 0;
}

/* Sous 600 px : le tableau s'empile, chaque cellule porte son intitulé */
@media (max-width: 600px) {
    .formule thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .formule tr {
        display: block;
        padding: 14px 0;
        border-top: 1px solid var(--c-filet);
    }

    .formule tbody th,
    .formule td {
        display: block;
        padding: 0;
        border: 0;
        white-space: normal;
        text-align: left;
    }

    .formule tbody th {
        margin-bottom: 6px;
    }

    .formule td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        font-size: 0.9rem;
    }

    .formule td::before {
        content: attr(data-label);
        flex: none;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--c-texte-3);
        padding-top: 3px;
    }

    .formule td:last-child {
        font-size: 1.1rem;
        text-align: right;
    }
}

/* Encart précautions (bordure dégradée, comme le « callout » de la maquette) */
.encart {
    position: relative;
    background: var(--c-fond-1);
    border-radius: 0 var(--rayon-s) var(--rayon-s) 0;
    padding: 26px 28px 26px 30px;
}

.encart::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--degrade);
}

.encart ul {
    display: grid;
    gap: 12px;
}

.encart li {
    font-size: 0.97rem;
    color: var(--c-texte-2);
}

.encart li strong {
    color: var(--c-violet);
}

.encart--important {
    margin-top: 20px;
}

.encart--important p {
    font-size: 0.9rem;
    color: var(--c-texte-2);
}

.encart--important strong {
    color: var(--c-bleu);
}

/* Local : texte + carte */
.local__grille {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 46px;
    align-items: center;
}

.local h2 {
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    margin: 12px 0 16px;
    color: var(--c-bleu);
}

.local p {
    color: var(--c-texte-2);
    max-width: 54ch;
}

.local address {
    font-style: normal;
}

.local .liste-etapes {
    margin: 20px 0 24px;
}

.visuel--carte {
    position: relative;
    min-height: 320px;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.local__carte-bouton {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: 1rem;
    border: 0;
    background: rgb(0 0 0 / .35);
    color: #fff;
    cursor: pointer;

    &:focus-visible {
        outline: 3px solid currentColor;
        outline-offset: -6px;
    }
}

.local__carte-libelle {
    font-weight: 700;
}

.local__carte-info {
    font-size: .8rem;
    max-width: 28ch;
}

.local__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 860px) {
    .local__grille {
        grid-template-columns: 1fr;
        gap: 26px;
    }
}

/* ==========================================================================
   17. VISUELS À VENIR
   Emplacements photos : ratio fixe, dégradé de la charte, étiquette.
   Remplacer par une <img> (srcset/sizes) : le conteneur garde son ratio.
   ========================================================================== */
.visuel {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 24px;
    border-radius: var(--rayon-l);
    overflow: hidden;
    color: rgba(255, 255, 255, 0.92);
    background: var(--degrade-visuel);
    box-shadow: var(--ombre);

    &:has(img) {
        background: transparent;
    }
}

.visuel--portrait {
    aspect-ratio: 4 / 5;
}

.visuel--carre {
    aspect-ratio: 1;
}

.visuel--paysage {
    aspect-ratio: 16 / 10;
    align-items: center;
    justify-content: center;
}

.visuel--carte {
    aspect-ratio: 16 / 11;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
}

.visuel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.visuel__etiquette {
    position: relative;
    z-index: 2;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid var(--c-filet-sombre);
    padding: 6px 12px;
    border-radius: 30px;
}

/* ==========================================================================
   18. PIED DE PAGE
   ========================================================================== */
.pied {
    position: relative;
    overflow: hidden;
    background: var(--c-bleu);
    color: rgba(255, 255, 255, 0.74);
    padding: 62px 0 30px;
}

.pied__grille {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 34px;

    .logo img {
        width: 250px;
        height: auto;
    }
}

@media (max-width: 860px) {
    .pied__grille {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 520px) {
    .pied__grille {
        grid-template-columns: 1fr;
    }
}

.pied .logo {
    margin-bottom: 14px;
}

.pied h2 {
    font-family: var(--police-texte);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-soleil);
    margin-bottom: 14px;
}

.pied ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--fs-petit);
}

.pied ul a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    transition: color var(--transition);
}

.pied a:hover {
    color: var(--c-mandarine);
}

.pied address {
    font-style: normal;
    font-size: var(--fs-petit);
    line-height: 1.7;
}

.pied__bas {
    position: relative;
    z-index: 2;
    margin-top: 46px;
    padding-top: 22px;
    border-top: 1px solid var(--c-filet-sombre);
    display: flex;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.64);
}

/* ==========================================================================
   19. APPARITION AU DÉFILEMENT
   Sans JavaScript, tout est visible (la classe .in est posée par main.js).
   ========================================================================== */
/* L'apparition utilise la propriété `translate` et non `transform` : sinon
   elle écraserait les `transform` de survol des cartes (spécificité plus forte). */
.js .reveal {
    opacity: 0;
    translate: 0 22px;
    transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), translate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js .reveal.in {
    opacity: 1;
    translate: none;
}

@media (prefers-reduced-motion: reduce) {
    .js .reveal {
        opacity: 1;
        translate: none;
        transition: none;
    }
}

/* ==========================================================================
   20. PAGES INTERNES
   ========================================================================== */
.page-simple {
    max-width: 760px;
    margin: 0 auto;
}

.page-simple h1 {
    font-size: var(--fs-h2);
    color: var(--c-bleu);
    margin: 12px 0 24px;
}

.page-simple h2 {
    font-size: 1.3rem;
    color: var(--c-bleu);
    margin: 36px 0 12px;
    text-transform: none;
    letter-spacing: 0;
}

.page-simple p,
.page-simple li {
    color: var(--c-texte-2);
    margin-bottom: 14px;
}

.page-simple ul {
    list-style: disc;
    padding-left: 1.2em;
}

.a-completer {
    display: inline-block;
    background: rgba(242, 144, 95, 0.16);
    color: var(--c-violet);
    border-radius: 6px;
    padding: 2px 8px;
    font-weight: 600;
}

.page-404 {
    text-align: center;
    padding: var(--section-y) 0;
}

.page-404 h1 {
    font-size: var(--fs-h1-soin);
    color: var(--c-bleu);
}

.page-404 p {
    margin: 18px auto 30px;
    max-width: 46ch;
    color: var(--c-texte-2);
}

/* ==========================================================================
   21. PAGES DE L'ARBORESCENCE
   Bandeau de titre des pages internes, vignettes des pages parentes
   (Nos soins, Pour qui), prix « à partir de », listing du blog, contact.
   ========================================================================== */

/* Bandeau de titre commun aux pages internes */
.bandeau {
    background: var(--c-bleu);
    color: var(--c-blanc);
    padding: clamp(36px, 5vw, 64px) 0 clamp(44px, 6vw, 76px);
    position: relative;
    overflow: hidden;
}

.bandeau .conteneur {
    position: relative;
    z-index: 2;
}

.bandeau h1 {
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    margin: 14px 0 0;
    max-width: 22ch;
}

.bandeau p {
    margin-top: 18px;
    max-width: 62ch;
    font-size: 1.06rem;
    color: var(--c-sur-sombre);
}

.bandeau .actions {
    margin-top: 28px;
}

/* Vignettes des pages parentes */
.vignettes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--grille-gap);
}

/* Cinq typologies : 3 cartes puis 2, les deux dernières se partageant la
   largeur. Évite la carte orpheline qu'une grille auto-fit laisse en bout
   de ligne quand le nombre d'éléments n'est pas un multiple des colonnes. */
.vignettes--cinq {
    grid-template-columns: repeat(6, 1fr);
}

.vignettes--cinq>li {
    grid-column: span 2;
}

.vignettes--cinq>li:nth-child(4),
.vignettes--cinq>li:nth-child(5) {
    grid-column: span 3;
}

@media (max-width: 1100px) {
    .vignettes--cinq {
        grid-template-columns: repeat(2, 1fr);
    }

    .vignettes--cinq>li,
    .vignettes--cinq>li:nth-child(4),
    .vignettes--cinq>li:nth-child(5) {
        grid-column: auto;
    }
}

@media (max-width: 680px) {
    .vignettes--cinq {
        grid-template-columns: 1fr;
    }
}

.vignette {
    display: flex;
    flex-direction: column;
    padding: 28px 26px;
    background: var(--c-blanc);
    border: 1px solid var(--c-filet);
    border-radius: var(--rayon-m);
    box-shadow: var(--ombre);
    transition: transform var(--transition-lente);
}

.vignette:hover {
    transform: translateY(-5px);
}

.vignette__sur-titre {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-violet);
}

.vignette h2,
.vignette h3 {
    font-size: 1.22rem;
    margin: 10px 0 12px;
    color: var(--c-bleu);
    text-transform: none;
    letter-spacing: 0;
}

.vignette p {
    font-size: var(--fs-petit);
    color: var(--c-texte-2);
}

.vignette .lien-fleche {
    margin-top: auto;
    padding-top: 18px;
}

.vignette--bientot {
    opacity: 0.86;
}

.vignette__badge {
    align-self: flex-start;
    margin-bottom: 12px;
    padding: 4px 10px;
    border-radius: 30px;
    background: var(--c-fond-2);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-violet);
}

/* Prix « à partir de » sur les pages soin */
.prix-depart {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin: 22px 0 0;
    padding: 16px 20px;
    border: 1px solid var(--c-filet-sombre);
    border-radius: var(--rayon-s);
    background: rgba(255, 255, 255, 0.04);
}

.prix-depart__label {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-sur-sombre-2);
}

.prix-depart__montant {
    font-family: var(--police-h1);
    font-weight: 800;
    font-size: 1.7rem;
    line-height: 1;
    background: var(--degrade-sur-sombre);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.prix-depart a {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--c-soleil);
    text-decoration: underline;
}

.prix-depart a:hover {
    color: var(--c-blanc);
}

/* Variante sur fond clair (page Nos formules) */
.prix-depart--clair {
    border-color: var(--c-filet);
    background: var(--c-blanc);
}

.prix-depart--clair .prix-depart__label {
    color: var(--c-texte-3);
}

.prix-depart--clair a {
    color: var(--c-violet);
}

.prix-depart--clair a:hover {
    color: var(--c-bleu);
}

/* Tableau de tarifs de la page Nos formules */
.tarifs {
    border: 1px solid var(--c-filet);
    border-radius: var(--rayon-m);
    overflow: hidden;
    background: var(--c-blanc);
}

.tarifs+.tarifs {
    margin-top: 22px;
}

.tarifs caption {
    padding: 22px 26px 0;
    text-align: left;
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--c-bleu);
}

.tarifs th,
.tarifs td {
    text-align: left;
    padding: 14px 26px;
    border-top: 1px solid var(--c-filet);
    vertical-align: top;
}

.tarifs thead th {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-texte-3);
}

.tarifs tbody th {
    font-weight: 700;
    color: var(--c-bleu);
}

.tarifs td {
    color: var(--c-texte-2);
    font-size: 0.96rem;
}

.tarifs td:last-child {
    text-align: right;
    font-family: var(--police-h1);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--c-bleu);
    white-space: nowrap;
}

/* Tableau unique de la page formules : quatre colonnes, une ligne par soin.
   Les prix sont en colonnes 2 et 3 — la dernière colonne porte une durée
   d'abonnement, pas un montant, d'où la remise à plat de td:last-child. */
.tarifs--complet {
    table-layout: fixed;
}

.tarifs--complet thead th:first-child {
    width: 36%;
}

.tarifs--complet td:nth-child(2),
.tarifs--complet td:nth-child(3) {
    font-family: var(--police-h1);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--c-bleu);
    white-space: nowrap;
}

.tarifs--complet td:last-child {
    text-align: left;
    font-family: var(--police-texte);
    font-weight: 400;
    font-size: 0.96rem;
    color: var(--c-texte-2);
    white-space: normal;
}

.tarifs--complet tbody th em {
    font-style: normal;
    color: var(--c-orange-fonce);
}

/* Durée du soin, en dessous de son nom */
.tarifs__duree {
    display: block;
    margin-top: 4px;
    font-family: var(--police-texte);
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--c-texte-3);
}

@media (max-width: 700px) {
    .tarifs--complet {
        table-layout: auto;
    }

    .tarifs--complet td:nth-child(2),
    .tarifs--complet td:nth-child(3) {
        font-size: 1rem;
        white-space: normal;
    }

    .tarifs--complet tbody th {
        font-size: 1.05rem;
        padding-top: 10px;
    }
}

@media (max-width: 700px) {

    /* Le tableau sempile : les en-têtes de colonnes passent en data-label.
     Les th sont masqués individuellement pour quaucune boîte ne déborde. */
    .tarifs thead,
    .tarifs thead th {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .tarifs tr {
        display: block;
        padding: 8px 0;
        border-top: 1px solid var(--c-filet);
    }

    .tarifs tbody th,
    .tarifs td {
        display: block;
        border: 0;
        padding: 2px 20px;
    }

    .tarifs td::before {
        content: attr(data-label) " : ";
        font-weight: 700;
        color: var(--c-texte-3);
    }

    .tarifs td:last-child {
        text-align: left;
    }
}

/* Listing du blog */
.article-liste {
    display: grid;
    gap: 18px;
}

.article-ligne {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 18px;
    flex-wrap: wrap;
    padding: 22px 0;
    border-bottom: 1px solid var(--c-filet);
}

.article-ligne h2,
.article-ligne h3 {
    font-size: 1.12rem;
    color: var(--c-bleu);
    text-transform: none;
    letter-spacing: 0;
}

.article-ligne__meta {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-violet);
}

/* Coordonnées (page Contact) */
.coordonnees {
    display: grid;
    gap: 22px;
}

.coordonnees div {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--c-filet);
}

.coordonnees div:last-child {
    border-bottom: 0;
}

.coordonnees dt {
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-violet);
    margin-bottom: 8px;
}

.coordonnees dd {
    color: var(--c-texte-2);
}

.coordonnees dd a {
    text-decoration: underline;
}

.coordonnees dd a:hover {
    color: var(--c-violet);
}

/* Bloc « à compléter » visible dans les pages en placeholder */
.bloc-placeholder {
    padding: 26px 28px;
    border: 1px dashed var(--c-filet);
    border-radius: var(--rayon-s);
    background: var(--c-fond-1);
    color: var(--c-texte-2);
    font-size: 0.96rem;
}

.bloc-placeholder+.bloc-placeholder {
    margin-top: 16px;
}

.page-simple--gauche {
    margin: 0;
}

.entete .lien-fleche {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.92rem;
}

.bloc-placeholder--marge {
    margin-top: 28px;
}

.actions--centre {
    justify-content: center;
}

/* ==========================================================================
   22. ACCENTS ET MICRO-INTERACTIONS AJOUTÉS
   ========================================================================== */

/* Fragment de titre en orange (sur fond clair uniquement) */
.accent-orange {
    color: var(--c-orange-fonce);
}

/* Bouton orange */
.btn--orange {
    background-color: var(--c-orange-fonce);
    color: var(--c-blanc);
}

.btn--orange:hover {
    background-color: #A63F13;
    transform: translateY(-2px);
}

/* Survol des cartes soins : la carte se soulève, le visuel respire,
   le lien s'avance. Neutralisé si l'utilisateur réduit les animations. */
.carte-soin {
    transition: transform var(--transition-lente), box-shadow var(--transition-lente);
}

.carte-soin__visuel {
    overflow: hidden;
}

.carte-soin__visuel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    transform: scale(1);
    transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.carte-soin:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 60px -26px rgba(42, 47, 107, 0.7);
}

.carte-soin:hover .carte-soin__visuel::before {
    transform: scale(1.06);
}

/* Quand une photo remplacera le dégradé, elle zoomera de la même façon */
.carte-soin__visuel img {
    transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.carte-soin:hover .carte-soin__visuel img {
    transform: scale(1.06);
}

.carte-soin:hover h3 {
    transform: translateY(-2px);
}

.carte-soin h3 {
    transition: transform var(--transition-lente);
}

.carte-soin .lien-fleche span[aria-hidden] {
    transition: transform var(--transition);
}

.carte-soin:hover .lien-fleche span[aria-hidden] {
    transform: translateX(5px);
}

/* Le focus clavier déclenche le même effet */
.carte-soin:focus-within {
    transform: translateY(-8px);
    box-shadow: 0 28px 60px -26px rgba(42, 47, 107, 0.7);
}

@media (prefers-reduced-motion: reduce) {

    .carte-soin:hover,
    .carte-soin:focus-within {
        transform: none;
    }

    .carte-soin:hover .carte-soin__visuel::before,
    .carte-soin:hover h3,
    .carte-soin:hover .lien-fleche span[aria-hidden] {
        transform: none;
    }
}

/* ==========================================================================
   23. PAGE SOIN — BANDEAU PLEINE LARGEUR, BIENFAITS EN MAÇONNERIE
   ========================================================================== */

/* Bandeau : le texte occupe une colonne, le visuel viendra en fond de section.
   Pour poser la photo : renseigner background-image sur .soin-hero__fond
   (une <img> en position absolue avec object-fit: cover fonctionne aussi). */
.soin-hero__fond {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--degrade-visuel);
    background-size: cover;
    background-position: center;
}

.soin-hero__fond::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Voile qui garantit la lisibilité du texte quelle que soit la photo */
    background: linear-gradient(100deg, var(--c-bleu) 0%, rgba(42, 47, 107, 0.92) 46%, rgba(42, 47, 107, 0.55) 100%);
}

.soin-hero .conteneur {
    position: relative;
    z-index: 2;
}

.soin-hero__contenu {
    max-width: 900px;
}

.soin-hero__contenu .prix-depart {
    display: inline-flex;
}

/* Bienfaits : titre à gauche, visuel à droite */
.bienfaits__entete {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 52px;
}

.bienfaits__entete .entete {
    margin-bottom: 0;
}

@media (max-width: 860px) {
    .bienfaits__entete {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* Maçonnerie : 3 colonnes, 2 lignes, colonnes décalées en hauteur */
.effets-grille--maconnerie {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    gap: 22px;
}

.effets-grille--maconnerie>li:nth-child(3n + 2) {
    margin-top: 44px;
}

.effets-grille--maconnerie>li:nth-child(3n) {
    margin-top: 22px;
}

@media (max-width: 900px) {
    .effets-grille--maconnerie {
        grid-template-columns: repeat(2, 1fr);
    }

    .effets-grille--maconnerie>li:nth-child(3n + 2),
    .effets-grille--maconnerie>li:nth-child(3n) {
        margin-top: 0;
    }

    .effets-grille--maconnerie>li:nth-child(2n) {
        margin-top: 40px;
    }
}

@media (max-width: 620px) {
    .effets-grille--maconnerie {
        grid-template-columns: 1fr;
    }

    .effets-grille--maconnerie>li {
        margin-top: 0 !important;
    }
}


.effets-grille--maconnerie .effet {
    position: relative;
    overflow: hidden;
    padding: 34px 28px 30px;
}

/* Picto d'effet : pastille ronde au dégradé de la charte. Elle remplace le
   gros numéro, qui n'apportait pas d'information et sous-entendait un ordre
   de lecture que ces bienfaits n'ont pas. */
.effets-grille--maconnerie .effet__icone {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--degrade);
    color: var(--c-blanc);
    box-shadow: 0 8px 20px -10px rgba(42, 47, 107, 0.55);
    display: grid;
    padding: 1rem;

    img {
        display: block;
        width: 100%;
        height: auto;
    }
}

.effets-grille--maconnerie .effet__icone svg {
    width: 26px;
    height: 26px;
    transition: transform var(--transition-lente);
}

.effets-grille--maconnerie .effet:hover .effet__icone img,
.effets-grille--maconnerie .effet:hover .effet__icone svg {
    transform: scale(1.12) rotate(-6deg);
}

@media (prefers-reduced-motion: reduce) {

    .effets-grille--maconnerie .effet:hover .effet__icone svg,
    .effets-grille--maconnerie .effet:hover .effet__icone img {
        transform: none;
    }
}

.effets-grille--maconnerie .effet h3 {
    margin-top: 18px;
}

/* Halo coloré discret, repris des cartes « Pour qui » */
.effets-grille--maconnerie .effet::after {
    content: "";
    position: absolute;
    top: -30%;
    right: -22%;
    width: 56%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--c-mandarine);
    opacity: 0.09;
    filter: blur(26px);
    pointer-events: none;
    transition: opacity var(--transition-lente);
}

.effets-grille--maconnerie .effet:hover::after {
    opacity: 0.18;
}

.effets-grille--maconnerie .effet>* {
    position: relative;
    z-index: 1;
}

/* Intitulé de liste en orange */
.intitule-orange {
    color: var(--c-orange-fonce) !important;
}

/* Variante : puce emblème un peu plus grande (blocs mis en avant) */
.liste-etapes--emblematique li::before {
    width: 26px;
    height: 26px;
    margin-top: 0;
}

/* ==========================================================================
   24. PAGE SOIN — BANDEAU PLEINE LARGEUR, PICTOS ANIMÉS, ACCORDÉON SOMBRE
   ========================================================================== */

/* Le texte du bandeau occupe toute la largeur du conteneur */
.soin-hero__contenu {
    max-width: none;
}

.soin-hero__contenu .soin-hero__intro {
    max-width: none;
}

.soin-hero__contenu h1 {
    max-width: 24ch;
}

/* En-tête de section sur toute la largeur (titre + chapô) */
.entete--pleine {
    max-width: none;
}

.entete--pleine h2 {
    max-width: 30ch;
}

.entete--pleine p {
    max-width: none;
}

/* ---- Pictogrammes des bénéfices : animés ---- */
.benefice__icone {
    position: relative;
    transition: transform var(--transition-lente), box-shadow var(--transition-lente);
}

/* Anneau qui pulse doucement, décalé d'un picto à l'autre */
.benefice__icone::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--c-mandarine);
    opacity: 0;
    animation: pulse-anneau 3.6s ease-out infinite;
}

.benefice:nth-child(2) .benefice__icone::before {
    animation-delay: 0.9s;
}

.benefice:nth-child(3) .benefice__icone::before {
    animation-delay: 1.8s;
}

.benefice:nth-child(4) .benefice__icone::before {
    animation-delay: 2.7s;
}

@keyframes pulse-anneau {
    0% {
        transform: scale(0.9);
        opacity: 0.55;
    }

    60% {
        transform: scale(1.25);
        opacity: 0;
    }

    100% {
        transform: scale(1.25);
        opacity: 0;
    }
}

/* L'icône elle-même respire légèrement */
.benefice__icone svg {
    transition: transform var(--transition-lente);
    animation: respire 4.5s ease-in-out infinite;
}

.benefice:nth-child(2) .benefice__icone svg {
    animation-delay: 0.6s;
}

.benefice:nth-child(3) .benefice__icone svg {
    animation-delay: 1.2s;
}

.benefice:nth-child(4) .benefice__icone svg {
    animation-delay: 1.8s;
}

@keyframes respire {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }
}

/* Survol et focus : le picto se soulève */
.benefice:hover .benefice__icone,
.benefice:focus-within .benefice__icone {
    transform: translateY(-6px) scale(1.06);
    box-shadow: 0 14px 26px -10px rgba(146, 57, 116, 0.75);
}

.benefice:hover .benefice__icone svg {
    transform: rotate(-6deg) scale(1.08);
}

.benefice span {
    transition: color var(--transition);
}

.benefice:hover span {
    color: var(--c-violet);
}

@media (prefers-reduced-motion: reduce) {

    .benefice__icone::before,
    .benefice__icone svg {
        animation: none;
    }

    .benefice:hover .benefice__icone,
    .benefice:hover .benefice__icone svg {
        transform: none;
    }
}

/* ---- Accordéon sur fond bleu ---- */
.phases__titre {
    font-size: var(--fs-h3-section);
    color: var(--c-blanc);
    margin-bottom: 18px;
}

.accordeon--sombre details {
    border-bottom: 1px solid var(--c-filet-sombre);
}

.accordeon--sombre summary {
    /* Pastille, titre à gauche, « + » repoussé à droite */
    justify-content: flex-start;
    text-align: left;
    gap: 0;
    color: var(--c-blanc);
    font-size: 1.02rem;
    text-transform: none;
    letter-spacing: 0;
    padding: 18px 0;
}

/* Le titre de chaque phase est un vrai <h4> dans le <summary> : il hérite de
   la mise en forme du résumé et reste sous le H3 qui coiffe l'accordéon. */
.accordeon--sombre summary h4 {
    display: flex;
    align-items: center;
    font-size: var(--fs-h4-section);
    font-weight: 700;
    letter-spacing: 0;
    color: inherit;
    margin: 0;
}

.accordeon--sombre summary::after {
    color: var(--c-soleil);
    margin-left: auto;
    padding-left: 20px;
}

.accordeon--sombre summary:hover .accordeon__numero {
    background: var(--degrade);
    color: var(--c-bleu);
}

.accordeon--sombre details p {
    color: var(--c-sur-sombre);
    padding: 0 0 22px 62px;
    max-width: 88ch;
}

/* Numéro de phase dans la pastille */
.accordeon__numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    margin-right: 18px;
    border-radius: 50%;
    border: 1px solid var(--c-filet-sombre);
    font-family: var(--police-h1);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--c-soleil);
    transition: background-color var(--transition), color var(--transition);
}

.accordeon--sombre details[open] .accordeon__numero {
    background: var(--degrade);
    color: var(--c-bleu);
    border-color: transparent;
}

@media (max-width: 560px) {
    .accordeon--sombre details p {
        padding-left: 0;
    }
}

/* ==========================================================================
   25. PAGE SOIN — COMPLÉMENTS
   ========================================================================== */
/* Paragraphe courant posé sur un fond bleu, hors en-tête de section */
.texte-sur-sombre {
    color: var(--c-sur-sombre);
}

/* Second intertitre d'une section sombre : on le détache du bloc précédent */
.phases__titre--espace {
    margin-top: 52px;
}

/* Ligne d'introduction d'un encart */
.encart__intro {
    margin-bottom: 14px;
    color: var(--c-texte-2);
    font-size: 0.97rem;
}

.encart--important p+p {
    margin-top: 12px;
}

/* Formule sans tableau (bloc de renvoi) */
.formule>p {
    color: var(--c-texte-2);
    font-size: 0.97rem;
    margin-bottom: 20px;
}

/* Titre de vignette ou de carte en orange (typologies de publics) */
.vignette h3.accent-orange,
.effet h3.accent-orange {
    color: var(--c-orange-fonce);
}

/* ---- Ajustements de la page cryothérapie ---- */
/* Titre d'introduction : une seule ligne, en orange accessible (4,57:1). */
.intro-soin__titre {
    max-width: none;
    color: var(--c-orange-fonce);
}

/* Les deux paragraphes d'introduction occupent toute la largeur utile. */
.intro-soin p {
    max-width: none;
}

/* « Comment fonctionne la cryothérapie ? » tient sur une ligne. */
.entete--pleine h2 {
    max-width: none;
}

/* Logo inséré dans un titre, à la place du mot « Re.source ». Il suit la
   taille du titre : la hauteur est exprimée en em, pas en pixels. */
.logo-en-titre {
    display: inline-block;
    width: auto;
    height: 0.78em;
    vertical-align: baseline;
    transform: translateY(0.06em);
}

/* Bloc « Réservez en ligne » : paragraphe sur toute la colonne. */
.local p {
    max-width: none;
}

/* ---- Tableau des tarifs : en-têtes et durées plus lisibles ---- */
/* Les intitulés de colonnes étaient en 0,7 rem gris clair : trop discrets
   pour une page dont le tableau est le seul contenu. */
.tarifs--complet thead th {
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--c-bleu);
    padding-top: 18px;
    padding-bottom: 18px;
}

/* Durée du soin : 2 px de plus et en gras, pour qu'elle se lise sous le nom */
.tarifs--complet .tarifs__duree {
    font-size: 0.925rem;
    font-weight: 700;
    color: var(--c-texte-2);
}

/* ---- Titres tenant sur une ligne ---- */
/* « Cryothérapie aux Sables-d'Olonne » : un seul souffle, donc une seule
   ligne. Le H1 reprend toute la largeur du conteneur et sa taille maximale
   est calée sur la longueur de ce titre. */
.soin-hero__contenu h1 {
    max-width: none;
    font-size: clamp(2rem, 4vw, 3.3rem);
}

/* « À qui s'adresse la cryothérapie / chez [logo] ? » : la coupure est
   explicite dans le texte, la largeur ne doit pas en ajouter d'autre. */
#titre-publics {
    max-width: none;

    /* img {
        height: auto;
    } */
}

/* « Une technologie de pointe / au service de / votre récupération » : trois
   lignes voulues, donc trois coupures explicites. La colonne de gauche est
   élargie pour que chacune tienne d'un seul tenant. */
.bienfaits__entete {
    grid-template-columns: 1.35fr 0.65fr;
}

#titre-bienfaits {
    max-width: none;
}

/* ---- Bandeau d'une page soin avec photo de fond ---- */
.soin-hero__fond {
    overflow: hidden;
}

.soin-hero__fond img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* La cabine occupe la moitié gauche de la photo, précisément là où le voile
     est le plus couvrant : le bandeau paraissait vide. Miroir horizontal, le
     sujet passe à droite, dans la partie dégagée. */
    transform: scaleX(-1);
}

/* Voile du bandeau soin, calé comme celui de l'accueil : opaque là où passe
   le texte, dégagé à droite pour laisser voir la photo. Le H1 tient sur une
   ligne et court jusqu'au bord, d'où un voile plus couvrant que sur l'accueil. */
.soin-hero__fond::after {
    background: linear-gradient(100deg, var(--c-bleu) 0%, rgba(42, 47, 107, 0.95) 46%, rgba(42, 47, 107, 0.78) 70%, rgba(42, 47, 107, 0.34) 100%);
}

/* Sous 1024 px le texte occupe toute la largeur : voile vertical, couvrant. */
@media (max-width: 1024px) {
    .soin-hero__fond::after {
        background: linear-gradient(180deg, var(--c-bleu) 0%, rgba(42, 47, 107, 0.95) 55%, rgba(42, 47, 107, 0.9) 100%);
    }

    .soin-hero .hero__halo {
        display: none;
    }
}