/* ==========================================================================
   Olivia Wirtz — Nutrithérapie & Soins
   Feuille de styles principale
   Référence : document/olivia-wirtz-processus-creation-site.md

   1. Tokens (variables)
   2. Reset & base
   3. Typographie
   4. Utilitaires & layout
   5. Boutons
   6. Logo (brand)
   7. Header / navbar desktop
   8. Menus déroulants
   9. Menu mobile
   10. Composants de page (mini-hero, split, listes, tarifs)
   10b. Accueil (hero coupé en deux)
   11. Footer (contact + mentions)
   12. Responsive
   12b. Animations et interactions
   12c. Grands écrans
   13. Mouvement réduit
   ========================================================================== */


/* 1. Tokens
   ========================================================================== */

:root {
    /* Palette de marque (guide, section 4) */
    --ow-forest: #092C14;          /* couleur officielle du logo */
    --ow-green: #163D2B;           /* vert principal */
    --ow-green-deep: #0F2C20;      /* vert très profond */
    --ow-green-2: #315B43;         /* vert secondaire */
    --ow-ink: #171816;             /* noir doux */
    --ow-cream: #F3F0E8;           /* blanc cassé */
    --ow-silver: #A5A39D;          /* gris argentique */
    --ow-brown: #70523F;           /* brun chaud ponctuel */

    /* Nuances de la maquette navbar */
    --ow-sage: #66755F;            /* vert sauge du CTA */
    --ow-sage-dark: #4E5C48;
    --ow-gold: #BFB393;            /* soulignement actif */
    --ow-paper: #FCFBF8;           /* fond de la barre */

    /* Design system v1.0 (section 01) */
    --ow-deep: #1B3A2F;            /* vert profond : couleur principale, CTA */
    --ow-sage-2: #8CA68F;          /* vert sauge : couleur secondaire */
    --ow-mint: #D8E5D9;            /* vert clair : fonds, sections */
    --ow-offwhite: #FAF9F4;        /* blanc cassé : arrière-plan */
    --ow-beige: #E8DCCB;           /* beige naturel : éléments doux */
    --ow-anthracite: #2E2E2E;      /* gris anthracite : textes principaux */
    --ow-grey: #6B6B6B;            /* gris moyen : textes secondaires */
    --ow-terracotta: #C97B63;      /* terracotta : accent optionnel */
    --ow-card-beige: #F3EEE6;

    /* Rôles */
    --color-bg: var(--ow-offwhite);
    --color-tint: #F3F1EA;
    --color-card: #FDFCF9;
    --color-surface: var(--ow-paper);
    --color-text: var(--ow-ink);
    --color-text-soft: #55564F;
    --color-heading: var(--ow-green-deep);
    --color-accent: var(--ow-gold);
    --color-line: rgba(23, 24, 22, 0.1);
    --color-focus: var(--ow-green-2);

    --color-cta: var(--ow-deep);
    --color-cta-hover: #2D5444;
    --color-cta-active: #12291F;
    --color-cta-text: #F7F5EF;

    /* Typographie (guide, section 5) */
    --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-sans: "Lato", "Helvetica Neue", Arial, sans-serif;

    --fs-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
    --fs-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.625rem);
    --fs-h3: clamp(1.3rem, 1.15rem + 0.6vw, 1.625rem);
    --fs-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    --fs-nav: 1.0625rem;
    --fs-button: 1.0625rem;

    /* Espacements */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;
    --space-9: 6rem;

    /* Layout */
    --container: 90rem;           /* 1440 px à 16 px, s'élargit sur grands écrans */
    --gutter: clamp(1rem, 0.4rem + 2.6vw, 3.25rem);

    /* Header */
    --header-h: 96px;              /* barre pleine largeur */
    --header-h-scrolled: 84px;     /* barre flottante au scroll */
    --header-float-gap: 12px;      /* marge autour de la barre flottante */
    --header-space: var(--header-h);

    /* Formes & effets */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-pill: 999px;
    --shadow-bar: 0 1px 0 rgba(23, 24, 22, 0.04), 0 6px 18px rgba(23, 24, 22, 0.05);
    --shadow-float: 0 10px 34px rgba(23, 24, 22, 0.1), 0 2px 6px rgba(23, 24, 22, 0.04);
    --shadow-pop: 0 18px 48px rgba(23, 24, 22, 0.14), 0 2px 8px rgba(23, 24, 22, 0.05);

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 160ms;
    --dur: 280ms;
    --dur-slow: 420ms;

    --z-header: 100;
    --z-menu: 200;
}


/* 2. Reset & base
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-space) + var(--space-4));
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Bloque le scroll de la page quand le menu mobile est ouvert */
html.is-menu-open,
html.is-menu-open body {
    overflow: hidden;
}

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

img {
    height: auto;
}

a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

p {
    margin: 0 0 var(--space-4);
}

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

::selection {
    background: rgba(102, 117, 95, 0.25);
}


/* 3. Typographie
   ========================================================================== */

h1,
h2,
h3,
h4 {
    margin: 0 0 var(--space-4);
    font-family: var(--font-serif);
    font-weight: 400;
    line-height: 1.15;
    color: var(--color-heading);
    text-wrap: balance;
}

h1 { font-size: var(--fs-h1); letter-spacing: -0.01em; }

h1,
h2,
h3,
p {
    overflow-wrap: break-word;
}
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.3; }

.lead {
    font-size: var(--fs-body-lg);
    line-height: 1.6;
    color: var(--color-text-soft);
    max-width: 60ch;
}

.small {
    font-size: var(--fs-small);
    color: var(--color-text-soft);
}

.eyebrow {
    margin-bottom: var(--space-4);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ow-sage);
}

/* Filet décoratif sous les titres (maquette) */
.divider {
    display: block;
    width: 120px;
    height: 1px;
    margin: var(--space-5) 0;
    background: var(--ow-sage);
    opacity: 0.7;
}


/* 4. Utilitaires & layout
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section {
    padding-block: var(--space-9);
}

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

.skip-link {
    position: fixed;
    top: var(--space-3);
    left: var(--space-3);
    z-index: calc(var(--z-menu) + 1);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-sm);
    background: var(--ow-green-deep);
    color: var(--ow-cream);
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--dur-fast) var(--ease);
}

.skip-link:focus {
    transform: translateY(0);
}

.site-main {
    flex: 1 0 auto;
    padding-top: var(--header-space);
    outline: none;
}

.placeholder-note {
    padding: var(--space-5);
    border: 1px dashed var(--color-line);
    border-radius: var(--radius-md);
    color: var(--color-text-soft);
    font-size: var(--fs-small);
    text-align: center;
}


/* 5. Boutons (guide, section 7)
   États : normal, hover, focus, active, disabled
   ========================================================================== */

.btn {
    --btn-h: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: var(--btn-h);
    padding: 0 var(--space-6);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: var(--fs-button);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition:
        background-color var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        color var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease),
        transform var(--dur-fast) var(--ease);
}

.btn .icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.btn:active {
    transform: translateY(1px);
}

.btn:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
    border-radius: var(--radius-pill);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

/* Principal : « Prendre rendez-vous » */
.btn--primary {
    background: var(--color-cta);
    color: var(--color-cta-text);
}

.btn--primary:hover {
    background: var(--color-cta-hover);
    box-shadow: 0 10px 26px rgba(9, 30, 17, 0.25);
}

.btn--primary:active {
    background: var(--color-cta-active);
    box-shadow: none;
}

/* Secondaire : « Découvrir » */
.btn--secondary {
    background: transparent;
    border-color: var(--ow-green);
    color: var(--ow-green);
}

.btn--secondary:hover {
    background: rgba(22, 61, 43, 0.06);
}

.btn--secondary:active {
    background: rgba(22, 61, 43, 0.12);
}

/* Lien texte : « En savoir plus → » */
.btn--link {
    --btn-h: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--ow-green);
    gap: var(--space-2);
}

.btn--link .icon {
    width: 18px;
    height: 18px;
    transition: transform var(--dur) var(--ease);
}

.btn--link:hover .icon {
    transform: translateX(4px);
}

.btn--block {
    width: 100%;
}

/* Flèche animée des boutons */
.btn__arrow {
    width: 20px;
    height: 20px;
    transition: transform var(--dur) var(--ease);
}

.btn:hover .btn__arrow {
    transform: translateX(4px);
}


/* 6. Logo (brand)
   Monogramme officiel + nom officiel + sous-titre
   ========================================================================== */

.brand {
    --brand-mark-h: 72px;
    --brand-name-w: 250px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    color: var(--color-text-soft);
    text-decoration: none;
    border-radius: var(--radius-sm);
}

.brand__mark {
    width: auto;
    height: var(--brand-mark-h);
    transition: height var(--dur) var(--ease);
}

.brand__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--brand-name-w) * 0.035);
}

.brand__name {
    width: var(--brand-name-w);
    height: auto;
    transition: width var(--dur) var(--ease);
}

.brand__tagline {
    font-family: var(--font-sans);
    font-size: calc(var(--brand-name-w) * 0.046);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.3em;
    margin-right: -0.3em; /* compense l'espacement de la dernière lettre */
    text-transform: uppercase;
    white-space: nowrap;
}

.brand--sm {
    --brand-mark-h: 46px;
    --brand-name-w: 160px;
    gap: 10px;
}

.brand--inverse {
    color: rgba(243, 240, 232, 0.8);
}


/* 7. Header / navbar desktop
   ========================================================================== */

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: var(--z-header);
    pointer-events: none; /* la zone transparente autour de la barre flottante reste cliquable */
}

.site-header__bar {
    pointer-events: auto;
    width: 100%;
    margin: 0 auto;
    background: var(--color-surface);
    box-shadow: var(--shadow-bar);
    transition:
        width var(--dur-slow) var(--ease-out),
        margin var(--dur-slow) var(--ease-out),
        border-radius var(--dur-slow) var(--ease-out),
        box-shadow var(--dur-slow) var(--ease-out),
        background-color var(--dur) var(--ease);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    width: 100%;
    max-width: var(--container);
    height: var(--header-h);
    margin-inline: auto;
    padding-inline: var(--gutter);
    transition: height var(--dur-slow) var(--ease-out);
}

/* Barre flottante (sticky au scroll) */
.site-header.is-scrolled .site-header__bar {
    width: calc(100% - 2 * var(--header-float-gap) - 2 * var(--space-2));
    max-width: calc(var(--container) + 2 * var(--space-6));
    margin-top: var(--header-float-gap);
    border-radius: var(--radius-lg);
    background: rgba(252, 251, 248, 0.94);
    box-shadow: var(--shadow-float);
}

@supports (backdrop-filter: blur(1px)) {
    .site-header.is-scrolled .site-header__bar {
        background: rgba(252, 251, 248, 0.86);
        backdrop-filter: saturate(1.2) blur(14px);
    }
}

.site-header.is-scrolled .site-header__inner {
    height: var(--header-h-scrolled);
}

.site-header.is-scrolled .brand {
    --brand-mark-h: 64px;
    --brand-name-w: 236px;
}

/* Navigation principale */
.nav {
    margin-left: auto;
}

.nav__list {
    display: flex;
    align-items: center;
    gap: clamp(var(--space-5), 2.6vw, 3.25rem);
}

.nav__item {
    position: relative;
}

.nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: var(--space-3) 0;
    font-family: var(--font-sans);
    font-size: var(--fs-nav);
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease);
}

/* Soulignement doré : actif + survol */
.nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur) var(--ease);
}

.nav__link:hover {
    color: var(--ow-green);
}

.nav__link:hover::after,
.nav__link.is-active::after,
.nav__item--dropdown.is-open > .nav__link::after {
    transform: scaleX(1);
}

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

.nav__toggle {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-right: -6px;
    border-radius: 50%;
    color: var(--color-text);
}

.nav__toggle:hover {
    color: var(--ow-green);
}

.nav__chevron {
    width: 16px;
    height: 16px;
    stroke-width: 1.75;
    transition: transform var(--dur) var(--ease);
}

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

.site-header__cta {
    flex-shrink: 0;
    margin-left: clamp(var(--space-5), 5vw, 6.5rem);
    min-width: 280px;
}

.menu-toggle {
    display: none;
}


/* 8. Menus déroulants (desktop)
   ========================================================================== */

.nav__dropdown {
    position: absolute;
    top: calc(100% + 22px);
    left: 50%;
    min-width: 280px;
    padding: var(--space-2);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-pop);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -6px);
    transition:
        opacity var(--dur) var(--ease),
        transform var(--dur) var(--ease),
        visibility 0s linear var(--dur);
}

/* Pont invisible entre le lien et le panneau pour ne pas perdre le survol */
.nav__dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 24px;
}

.nav__item--dropdown.is-open .nav__dropdown,
.no-js .nav__item--dropdown:hover .nav__dropdown,
.no-js .nav__item--dropdown:focus-within .nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition:
        opacity var(--dur) var(--ease),
        transform var(--dur) var(--ease),
        visibility 0s;
}

.nav__sublink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 12px var(--space-4);
    border-radius: 10px;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--color-text);
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.nav__subarrow {
    width: 16px;
    height: 16px;
    opacity: 0;
    color: var(--ow-sage);
    transform: translateX(-6px);
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur) var(--ease);
}

.nav__sublink:hover,
.nav__sublink:focus-visible {
    background: rgba(102, 117, 95, 0.09);
    color: var(--ow-green-deep);
}

.nav__sublink:hover .nav__subarrow,
.nav__sublink:focus-visible .nav__subarrow,
.nav__sublink.is-active .nav__subarrow {
    opacity: 1;
    transform: translateX(0);
}

.nav__sublink.is-active {
    color: var(--ow-green-deep);
    font-weight: 700;
}


/* 9. Menu mobile (panneau latéral)
   ========================================================================== */

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-menu);
    visibility: hidden;
    transition: visibility 0s linear var(--dur-slow);
}

.mobile-menu.is-open {
    visibility: visible;
    transition: visibility 0s;
}

.mobile-menu__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 20, 16, 0.32);
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease);
}

.mobile-menu.is-open .mobile-menu__backdrop {
    opacity: 1;
}

.mobile-menu__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(400px, 100%);
    background: var(--color-surface);
    box-shadow: var(--shadow-pop);
    transform: translateX(100%);
    transition: transform var(--dur-slow) var(--ease-out);
    overscroll-behavior: contain;
}

.mobile-menu.is-open .mobile-menu__panel {
    transform: translateX(0);
}

.mobile-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-5) var(--space-4);
}

.mobile-menu__close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    border-radius: 50%;
    color: var(--color-text);
    transition: background-color var(--dur-fast) var(--ease);
}

.mobile-menu__close:hover {
    background: rgba(23, 24, 22, 0.05);
}

.mobile-menu__close .icon {
    width: 26px;
    height: 26px;
}

/* Vues (niveau principal / sous-menus) en glissement horizontal */
.mobile-menu__views {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
}

.mobile-menu__view {
    position: absolute;
    inset: 0;
    padding: 0 var(--space-5) var(--space-5);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition:
        transform var(--dur-slow) var(--ease-out),
        visibility 0s linear var(--dur-slow);
}

.mobile-menu__view.is-current {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--dur-slow) var(--ease-out), visibility 0s;
}

.mobile-menu__view.is-behind {
    transform: translateX(-30%);
}

.mobile-menu__list > li {
    border-bottom: 1px solid var(--color-line);
}

.mobile-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    min-height: 58px;
    padding: var(--space-3) var(--space-2);
    font-family: var(--font-sans);
    font-size: 1.125rem;
    line-height: 1.3;
    text-align: left;
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.mobile-menu__link .icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-text-soft);
    transition: transform var(--dur) var(--ease);
}

.mobile-menu__link:hover {
    color: var(--ow-green);
}

.mobile-menu__link:hover .icon {
    transform: translateX(3px);
}

.mobile-menu__link.is-active {
    color: var(--ow-green-deep);
    font-weight: 700;
}

.mobile-menu__link.is-active > span,
.mobile-menu__view:not([data-menu-view="root"]) .mobile-menu__link.is-active {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
}

.mobile-menu__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    margin-left: -6px;
    padding-right: var(--space-3);
    font-size: var(--fs-small);
    letter-spacing: 0.04em;
    color: var(--color-text-soft);
}

.mobile-menu__back .icon {
    width: 18px;
    height: 18px;
}

.mobile-menu__back:hover {
    color: var(--ow-green);
}

/* Titre du sous-menu : lien vers la page principale (Nutrithérapie, Soins) */
.mobile-menu__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin: var(--space-2) 0 var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-line);
    font-family: var(--font-serif);
    font-size: 1.625rem;
    line-height: 1.2;
    color: var(--color-heading);
    text-decoration: none;
}

.mobile-menu__title .icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--ow-sage);
    transition: transform var(--dur) var(--ease);
}

.mobile-menu__title:hover .icon {
    transform: translateX(3px);
}

.mobile-menu__foot {
    padding: var(--space-5);
    padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
}


/* 10. Composants de page (design system, section 05)
   Mini-hero, split texte/image, listes, tarifs
   ========================================================================== */

.section {
    padding-block: clamp(3.5rem, 7vw, 6rem);
}

.section--tint {
    background: var(--color-tint);
}

.narrow {
    max-width: 1040px;
}

/* --- Mini-hero --- */

.mini-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: clamp(240px, 32vh, 340px);
    overflow: hidden;
    background: #1D2E23;
    color: #F7F5EF;
}

.mini-hero--warm {
    background: #251B13;
}

.mini-hero__media {
    position: absolute;
    inset: 0 0 0 36%;
    z-index: -2;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}

.mini-hero__media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%; /* garde les visages dans le cadre */
}

/* Visuel provisoire tant que la photo n'est pas déposée */
.mini-hero__media--placeholder {
    background:
        radial-gradient(ellipse 60% 90% at 60% 40%, rgba(96, 124, 90, 0.45), transparent 70%),
        linear-gradient(120deg, #1D2E23 0%, #2C4535 60%, #22382A 100%);
}

.mini-hero--warm .mini-hero__media--placeholder {
    background:
        radial-gradient(ellipse 55% 90% at 60% 35%, rgba(176, 128, 90, 0.5), transparent 70%),
        linear-gradient(110deg, #251B13 0%, #4B3625 60%, #3A2A1C 100%);
}

.mini-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(12, 18, 14, 0.55) 0%, rgba(12, 18, 14, 0.15) 50%, rgba(12, 18, 14, 0.35) 100%);
}

.mini-hero__inner {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding: clamp(2.5rem, 5vw, 3.75rem) var(--gutter);
}

.mini-hero__title {
    margin: 0;
    padding-left: clamp(0rem, 3vw, 3rem);
    font-size: clamp(2.1rem, 1.5rem + 2.8vw, 3.6rem);
    line-height: 1.05;
    color: #FFFFFF;
}

/* --- Split texte / visuel --- */

.split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5.5rem);
}

.split--even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.prose h2 {
    margin-bottom: var(--space-5);
    font-weight: 600;
    font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.5rem);
    line-height: 1.18;
    color: var(--color-text);
}

.prose p {
    max-width: 62ch;
    color: var(--color-text-soft);
    line-height: 1.75;
}

.prose p.lead {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--color-text);
}

.prose .checklist {
    margin-top: var(--space-5);
}

.split--text {
    grid-template-columns: minmax(0, 1fr);
    max-width: 62rem;
}

.split__media > .media {
    width: 88%;
    margin-inline: auto;
}

.split__aside {
    display: flex;
    justify-content: center;
}

/* --- Emplacement photo --- */

.media {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 5 / 4;
    border-radius: 4px;
    background: linear-gradient(150deg, #24392C 0%, #121E17 100%);
}

.media > img:not(.media__leaves) {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media__leaves {
    position: absolute;
    top: -12%;
    right: -8%;
    width: 70%;
    height: auto;
    opacity: 0.28;
    transform: rotate(-16deg);
}

.media--warm {
    background: linear-gradient(150deg, #7A5A41 0%, #2F2218 100%);
}

.media--light {
    background: linear-gradient(150deg, #EFEAE0 0%, #DDD4C4 100%);
}

.media--light .media__leaves {
    opacity: 0.9;
}

.media--portrait { aspect-ratio: 4 / 5; }
.media--tall     { aspect-ratio: 4 / 5; }
.media--wide     { aspect-ratio: 6 / 5; }
.media--banner   { aspect-ratio: 21 / 8; width: 100%; }

.split__media > .media--tall {
    width: 72%;
    margin-inline: auto;
}

/* --- Liste à coches --- */

.checklist__title {
    margin: 0 0 var(--space-5);
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--color-text);
}

.checklist__list {
    display: grid;
    gap: 14px;
}

.checklist__list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    line-height: 1.5;
    color: var(--color-text);
}

.checklist__check {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: -1px;
    border-radius: 50%;
    background: var(--ow-mint);
    color: var(--color-cta);
}

.checklist__check .icon {
    width: 14px;
    height: 14px;
    stroke-width: 2.2;
}

.checklist--boxed {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border: 1px solid var(--color-line);
    border-radius: 12px;
    background: var(--color-card);
}

@media (min-width: 768px) {
    .checklist--cols .checklist__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-7);
    }
}

/* --- Titre de section --- */

.section-title {
    max-width: 44rem;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    text-align: center;
}

.section-title__heading {
    margin: 0;
    font-weight: 600;
    font-size: clamp(1.45rem, 1.2rem + 1vw, 2.125rem);
    color: var(--color-text);
}

.section-title__rule {
    display: block;
    width: 44px;
    height: 2px;
    margin: var(--space-4) auto 0;
    background: var(--ow-sage-2);
}

.section-title__intro {
    margin: var(--space-5) auto 0;
    color: var(--color-text-soft);
    line-height: 1.7;
}

/* --- Cartes tarifaires --- */

.price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 340px));
    justify-content: center;
    gap: clamp(1rem, 2vw, 1.5rem);
}

.price-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 380px;
    padding: var(--space-6) var(--space-6) var(--space-6);
    border: 1px solid var(--color-line);
    border-radius: 12px;
    background: var(--color-card);
}

.price-card--featured {
    border-color: rgba(27, 58, 47, 0.3);
    box-shadow: 0 18px 44px rgba(23, 24, 22, 0.08);
}

.price-card__title {
    margin: 0 0 var(--space-3);
    font-size: 1.45rem;
    color: var(--color-text);
}

.price-card__text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text-soft);
}

.price-card__bottom {
    margin-top: auto;
    padding-top: var(--space-5);
}

.price-card__price {
    margin: 0;
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-line);
    font-family: var(--font-serif);
    font-size: 2.25rem;
    line-height: 1.1;
    color: var(--color-cta);
}

.price-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: var(--space-2) 0 var(--space-5);
    font-size: 0.9375rem;
    color: var(--color-text-soft);
}

.price-card__meta .icon {
    width: 18px;
    height: 18px;
}

/* --- Mise en avant (bloc famille) --- */

.feature {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    max-width: 1040px;
    margin-inline: auto;
    padding: clamp(2rem, 4vw, 3.25rem);
    border-radius: 14px;
    background: var(--ow-card-beige);
}

.feature__icon {
    width: 56px;
    height: 56px;
    stroke-width: 1.1;
    color: var(--color-cta);
}

.feature__body h2 {
    font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
}

.feature__body p:last-child {
    margin-bottom: 0;
}

/* --- Chiffres clés (cures) --- */

.facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-5);
}

.facts__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 170px;
    padding: var(--space-6) var(--space-6);
    border: 1px solid var(--color-line);
    border-radius: 12px;
    background: var(--color-card);
    text-align: center;
}

.facts__value {
    font-family: var(--font-serif);
    font-size: 3.25rem;
    line-height: 1;
    color: var(--color-cta);
}

.facts__label {
    margin-top: var(--space-3);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-soft);
}

/* --- Réservation --- */

.booking-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 420px;
    padding: clamp(2rem, 4vw, 3rem);
    border-radius: 14px;
    background: var(--ow-card-beige);
    text-align: center;
}

.booking-card__icon {
    width: 46px;
    height: 46px;
    margin-bottom: var(--space-4);
    stroke-width: 1.1;
    color: var(--color-cta);
}

.booking-card__title {
    margin-bottom: var(--space-2);
    font-size: 1.6rem;
    color: var(--color-text);
}

.booking-card__text {
    margin-bottom: var(--space-5);
    color: var(--color-text-soft);
}

.rates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.rates__group {
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--color-line);
    border-radius: 12px;
    background: var(--color-card);
}

.rates__title {
    margin: 0 0 var(--space-3);
    font-size: 1.25rem;
    color: var(--color-text);
}

.rates__list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: baseline;
    gap: var(--space-4);
    padding: 11px 0;
    border-bottom: 1px dashed rgba(23, 24, 22, 0.15);
}

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

.rates__duration {
    font-size: 0.875rem;
    color: var(--color-text-soft);
}

.rates__price {
    min-width: 4.5ch;
    font-weight: 700;
    text-align: right;
    color: var(--color-cta);
}

/* --- Mini-hero clair (maquette Périnatalité) --- */

.mini-hero--light {
    background: #E9E2D9;
    color: var(--color-text);
}

.mini-hero--light .mini-hero__media {
    inset: 0 0 0 30%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 74%, transparent 94%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 74%, transparent 94%);
}

.mini-hero--light .mini-hero__media--placeholder {
    background: linear-gradient(120deg, #E9E2D9 0%, #DCD2C4 100%);
}

.mini-hero--light::after {
    background: linear-gradient(90deg, rgba(233, 226, 217, 0.65) 0%, transparent 45%);
}

.mini-hero--light .mini-hero__title {
    color: #1D1D1B;
}

/* --- Composants de page : responsive --- */

@media (max-width: 1023.98px) {
    .mini-hero__media {
        inset: 0 0 0 20%;
    }

    .split,
    .split--even {
        grid-template-columns: 1fr;
    }

    .split__media {
        max-width: 640px;
    }
}

@media (max-width: 599.98px) {
    .mini-hero {
        min-height: 200px;
    }

    .mini-hero__media {
        inset: 0;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .mini-hero::after {
        background: linear-gradient(90deg, rgba(12, 18, 14, 0.75) 0%, rgba(12, 18, 14, 0.45) 100%);
    }

    .mini-hero__title {
        padding-left: 0;
    }

    .split__media > .media,
    .split__media > .media--tall {
        width: 100%;
    }

    /* Mini-hero clair : photo plein cadre assombrie, texte blanc (maquette mobile) */
    .mini-hero--light {
        color: #F7F5EF;
    }

    .mini-hero--light::after {
        background: linear-gradient(90deg, rgba(20, 24, 18, 0.72) 0%, rgba(20, 24, 18, 0.4) 100%);
    }

    .mini-hero--light .mini-hero__title {
        color: #FFFFFF;
    }

    .price-card {
        padding: var(--space-5);
    }

    .price-card__price {
        font-size: 2rem;
    }

    .facts__item {
        min-width: 140px;
        padding: var(--space-5);
    }

    .facts__value {
        font-size: 2.6rem;
    }

    .feature {
        grid-template-columns: 1fr;
    }

    .rates {
        grid-template-columns: 1fr;
    }
}


/* 10b. Accueil
   Hero coupé en deux, sur tout le premier écran et sur tous les écrans :
   Nutrithérapie (vert foncé, vigne vierge) à gauche, Soins (noir et blanc argentique) à droite.
   ========================================================================== */

/* La page tient dans la hauteur réellement visible (barre d'adresse comprise) :
   header (fixe, compensé par le padding de main), deux moitiés extensibles, contact, footer. */
.page-home {
    height: 100vh;
    height: 100svh;
    min-height: 0;
}

.page-home .site-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.home-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 1 1 auto;
    gap: clamp(12px, 2vw, 28px);
    margin: 0 clamp(12px, 2vw, 28px);
    min-height: 280px; /* très petits écrans (téléphone en paysage) : on accepte le défilement */
}

.half {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(1rem, 3vw, 3rem);
    overflow: hidden;
    color: #FFFFFF;
    text-decoration: none;
}

.half__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    transition: transform 1.4s var(--ease-out);
}

/* Vigne : on garde les feuilles (à gauche de la photo) plutôt que le mur */
.half--nutritherapie .half__img {
    object-position: 30% 40%;
}

/* Voile dégradé : le titre reste lisible en bas de la photo */
.half::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
}

.half--nutritherapie {
    background: var(--ow-green-deep);
}

/* Feuillage provisoire tant que la photo de vigne vierge n'est pas déposée */
.half--nutritherapie:not(:has(.half__img))::before {
    content: "";
    position: absolute;
    top: -10%;
    right: 0;
    z-index: -2;
    width: 70%;
    height: 120%;
    background: url("../img/decor/leaves.svg") center / contain no-repeat;
    opacity: 0.16;
    transform: rotate(-18deg);
}

.half--nutritherapie::after {
    background: linear-gradient(0deg, rgba(15, 44, 32, 0.85) 0%, rgba(15, 44, 32, 0.45) 45%, rgba(15, 44, 32, 0.3) 100%);
}

/* Fond noir en attendant la photo */
.half--soins {
    background: #111111;
}

/* Noir et blanc argentique */
.half--soins .half__img {
    object-position: 0% 45%; /* garde les mains de la praticienne (bord gauche de la photo) */
    filter: grayscale(1) contrast(1.1) brightness(0.78);
}

/* Ambiance sombre et feutrée */
.half--soins::after {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.25) 100%);
}

.half__title {
    margin: 0;
    font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem);
    font-weight: 400;
    line-height: 1.1;
    white-space: nowrap; /* jamais de coupure dans « Nutrithérapie » */
    color: #FFFFFF;
}

.half__title::after {
    content: "";
    display: block;
    width: 44px;
    height: 1px;
    margin: var(--space-4) auto 0;
    background: rgba(255, 255, 255, 0.8);
    transition: width var(--dur-slow) var(--ease-out);
}

@media (hover: hover) {
    .half:hover .half__img {
        transform: scale(1.04);
    }

    .half:hover .half__title::after {
        width: 88px;
    }
}

/* Téléphone : deux colonnes hautes, titre réduit à la largeur d'une moitié */
@media (max-width: 599.98px) {
    .half {
        padding: var(--space-5) var(--space-4);
    }

    .half__title {
        font-size: clamp(1rem, 5.6vw, 1.6rem);
    }

    /* Colonne étroite : la main sur la tempe et le visage */
    .half--soins .half__img {
        object-position: 12% 50%;
    }

    .half__title::after {
        width: 32px;
        margin-top: var(--space-3);
    }
}


/* 11. Footer
   Contact (e-mail + Instagram), puis copyright et pages légales.
   ========================================================================== */

.site-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--color-line);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.5;
}

:where(.site-footer) a {
    color: inherit;
    text-decoration: none;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    max-width: var(--container);
    margin-inline: auto;
    padding: clamp(2.5rem, 5vw, 3.5rem) var(--gutter) var(--space-6);
    text-align: center;
}

.footer-contact__title {
    margin: 0;
    font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem);
    font-weight: 600;
    color: var(--color-heading);
}

.footer-contact__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3) var(--space-7);
}

.footer-contact__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-2);
    transition: color var(--dur-fast) var(--ease);
}

.footer-contact__link .icon {
    width: 22px;
    height: 22px;
    color: var(--ow-green-deep);
}

.footer-contact__link:hover {
    color: var(--ow-green);
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-underline-offset: 5px;
}

@media (max-width: 479.98px) {
    .footer-contact__list {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2) var(--space-6);
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--space-5) var(--gutter) var(--space-6);
    border-top: 1px solid var(--color-line);
    font-size: 0.8125rem;
    color: var(--color-text-soft);
}

.footer-bottom__copy {
    margin: 0;
}

.footer-bottom__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-5);
}

.footer-bottom__legal a:hover {
    color: var(--ow-green);
    text-decoration: underline;
}

/* Accueil : contact et footer compacts, une ligne chacun */
.site-footer--compact .footer-contact {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-5);
    padding: var(--space-3) var(--gutter);
}

.site-footer--compact .footer-contact__list,
.site-footer--compact .footer-bottom,
.site-footer--compact .footer-bottom__legal {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-5);
}

.site-footer--compact .footer-contact__link {
    padding-block: var(--space-1);
    white-space: nowrap;
}

.site-footer--compact .footer-bottom {
    padding: var(--space-2) var(--gutter) max(var(--space-2), env(safe-area-inset-bottom));
    font-size: 0.75rem;
    white-space: nowrap;
}

@media (max-width: 479.98px) {
    .site-footer--compact .footer-contact {
        padding-inline: var(--space-4);
        font-size: 0.875rem;
    }

    .site-footer--compact .footer-contact__link .icon {
        width: 20px;
        height: 20px;
    }

    .site-footer--compact .footer-bottom,
    .site-footer--compact .footer-bottom__legal {
        gap: var(--space-3);
    }

    .site-footer--compact .footer-bottom {
        padding-inline: var(--space-3);
        font-size: 0.6875rem;
    }
}


/* 12. Responsive
   ========================================================================== */

/* Desktop intermédiaire : on resserre avant de basculer en mobile */
@media (max-width: 1320px) {
    .brand {
        --brand-mark-h: 62px;
        --brand-name-w: 216px;
    }

    .site-header.is-scrolled .brand {
        --brand-mark-h: 58px;
        --brand-name-w: 208px;
    }

    .site-header__cta {
        min-width: 0;
        margin-left: var(--space-5);
    }
}

/* Tablette & mobile : hamburger + panneau latéral */
@media (max-width: 1099.98px) {
    :root {
        --header-h: 88px;
        --header-h-scrolled: 80px;
        --header-space: calc(var(--header-h) + var(--header-float-gap));
    }

    .nav,
    .site-header__cta {
        display: none;
    }

    /* Sur mobile la barre flotte en permanence (maquette) */
    .site-header__bar,
    .site-header.is-scrolled .site-header__bar {
        width: calc(100% - 2 * var(--header-float-gap));
        max-width: none;
        margin-top: var(--header-float-gap);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-float);
    }

    .site-header__inner {
        padding-inline: var(--space-5) var(--space-4);
    }

    .menu-toggle {
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        margin-left: auto;
        border-radius: var(--radius-sm);
        color: var(--color-text-soft);
        transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
    }

    .menu-toggle:hover {
        background: rgba(23, 24, 22, 0.05);
        color: var(--color-text);
    }

    .menu-toggle .icon {
        width: 36px;
        height: 36px;
        stroke-width: 1.4;
    }
}

@media (max-width: 599.98px) {
    :root {
        --header-h: 76px;
        --header-h-scrolled: 70px;
        --header-float-gap: 10px;
    }

    .brand,
    .site-header.is-scrolled .brand {
        --brand-mark-h: 50px;
        --brand-name-w: 172px;
        gap: 10px;
    }

    .site-header__inner {
        padding-inline: var(--space-4) var(--space-2);
    }

    .brand--sm {
        --brand-mark-h: 42px;
        --brand-name-w: 150px;
    }
}

@media (max-width: 359.98px) {
    .brand,
    .site-header.is-scrolled .brand {
        --brand-mark-h: 42px;
        --brand-name-w: 148px;
    }
}


/* 12b. Animations et interactions (pilotées par main.js)
   Désactivées automatiquement si « réduire les animations » est actif.
   ========================================================================== */

/* Apparition au défilement */
.reveal {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition:
        opacity 0.8s var(--ease-out) var(--reveal-delay, 0ms),
        transform 0.9s var(--ease-out) var(--reveal-delay, 0ms);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Entrée du texte des heros au chargement */
@keyframes ow-rise {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .js .mini-hero__title,
    .js .half__title {
        opacity: 0;
    }

    .is-ready .mini-hero__title,
    .is-ready .half__title {
        animation: ow-rise 0.9s var(--ease-out) both;
    }

    .is-ready .half:nth-child(2) .half__title { animation-delay: 120ms; }

    /* Parallaxe : l'image est légèrement agrandie pour ne jamais laisser de vide */
    .mini-hero__media > img {
        transform: scale(1.08);
        will-change: transform;
    }
}

/* Fondu des photos au chargement */
.img-fade {
    opacity: 0;
    transition: opacity 0.9s var(--ease);
}

.img-fade.is-loaded {
    opacity: 1;
}

/* Header masqué en descendant, réaffiché en remontant */
.site-header {
    transition: transform var(--dur-slow) var(--ease-out);
}

.site-header.is-hidden {
    transform: translate3d(0, calc(-100% - var(--header-float-gap) - 8px), 0);
}

/* Cartes : légère élévation au survol */
.price-card,
.rates__group {
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

@media (hover: hover) {
    .price-card:hover,
    .rates__group:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px rgba(23, 24, 22, 0.08);
    }
}

/* 12c. Grands écrans
   Au-delà de 1600 px, tout grandit légèrement (textes, espacements, largeur utile)
   pour garder les proportions de la maquette sans sensation de vide.
   ========================================================================== */

@media (min-width: 1600px) {
    html {
        font-size: 106.25%; /* 17 px */
    }
}

@media (min-width: 1920px) {
    html {
        font-size: 112.5%; /* 18 px */
    }

    .brand {
        --brand-mark-h: 78px;
        --brand-name-w: 270px;
    }
}

@media (min-width: 2400px) {
    html {
        font-size: 125%; /* 20 px */
    }
}


/* 13. Mouvement réduit
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Retours Olivia, 2 octobre : photos discrètes derrière les textes. */
.section--photo { position: relative; isolation: isolate; overflow: hidden; background: var(--ow-green-deep); color: #fff; }
.section--photo .section-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.section--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(9, 28, 19, .83); }
.section--photo h2, .section--photo p, .section--photo .feature__icon { color: #fff; }
.section--photo .split--text { max-width: 900px; }
.section--photo .feature { max-width: 900px; margin-inline: auto; background: transparent; padding-inline: 0; }
.contact-details a { display: inline-flex; align-items: center; gap: .6rem; overflow-wrap: anywhere; }
.site-footer--compact .footer-contact__title { font-size: 1.15rem; margin-bottom: .6rem; }
.footer-contact__title a { color: inherit; text-decoration: none; }
.footer-contact__title a:hover { text-decoration: underline; }
@media (max-width: 599.98px) {
    .half { padding-inline: .4rem; }
    .half__title { font-size: clamp(.95rem, 4.8vw, 1.5rem); }
    .home-split { min-height: 340px; }
    .section--photo::before { background: rgba(9, 28, 19, .88); }
}
@media (max-width: 767.98px) {
    .site-footer--compact .footer-contact { flex-direction: column; gap: .25rem; }
    .site-footer--compact .footer-contact__title { margin: 0; }
    .site-footer--compact .footer-contact__list { flex-wrap: wrap; gap: .15rem 1rem; }
    .site-footer--compact .footer-bottom, .site-footer--compact .footer-bottom__legal { flex-wrap: wrap; white-space: normal; }
}
.section--photo .prose p, .section--photo .checklist__list li, .section--photo .checklist__title { color: #fff; }

/* Olivia, 4 octobre : photos lisibles, cadrage intégral et adresse. */
.section--photo { padding-block: clamp(2rem, 5vw, 5rem); min-height: 640px; display: flex; align-items: center; }
.section--photo .section-photo { inset: 0 0 0 auto; width: 54%; object-fit: contain; object-position: center; }
.section--photo::before { background: linear-gradient(90deg, var(--ow-green-deep) 0%, var(--ow-green-deep) 43%, rgba(9,28,19,.12) 64%, rgba(9,28,19,.06) 100%); }
.section--photo .split--text { max-width: var(--container); }
.section--photo .split__text { width: 49%; padding: 1.5rem; background: rgba(9,28,19,.9); }
.section--photo .feature { width: 49%; max-width: none; margin: 0; padding: 1.5rem; background: rgba(9,28,19,.9); }
.media--original { aspect-ratio: auto; }
.media.media--original > img:not(.media__leaves) { position: static; width: 100%; height: auto; object-fit: contain; }
.media--rituel { max-width: 650px; margin-inline: auto; }
.footer-contact__address, .contact-details address { font-style: normal; }
.site-footer--compact .footer-contact { flex-wrap: wrap; }
.site-footer--compact .footer-contact__address { flex-basis: 100%; font-size: .875rem; }
@media (max-width: 767.98px) {
    .section--photo { display: block; min-height: 0; padding-top: 85vw; }
    .section--photo .section-photo { width: 100%; height: 90vw; object-position: center top; }
    .section--photo::before { background: linear-gradient(180deg, transparent 0%, transparent 60vw, var(--ow-green-deep) 90vw); }
    .section--photo .split__text, .section--photo .feature { width: 100%; padding: 1.25rem; }
}

/* Retours WhatsApp 20:18 : première photo derrière le texte, visible sans zoom. */
.section--photo-overlay .section-photo { width: 100%; object-fit: contain; object-position: center; }
.section--photo-overlay::before { background: rgba(9,28,19,.08); }
.section--photo-overlay .split__text { width: min(70%, 850px); margin-inline: auto; background: rgba(9,28,19,.65); text-shadow: 0 1px 3px rgba(0,0,0,.3); }
.media--floral { aspect-ratio: 4 / 5; }
.media--floral > img:not(.media__leaves) { object-fit: cover; object-position: center; }
@media (max-width: 767.98px) {
    .section--photo-overlay { padding-top: 2rem; }
    .section--photo-overlay .section-photo { height: 100%; object-fit: contain; object-position: center top; }
    .section--photo-overlay .split__text { width: 100%; background: rgba(9,28,19,.65); }
}

/* Références exactes transmises par Olivia : cadrage conservé, rendu noir et blanc demandé. */
.media.media--reference > img:not(.media__leaves) { filter: grayscale(1); }
.mini-hero__media > img[src*="olivia-reference-"] { filter: grayscale(1); }

/* Word client, octobre 2026 : espaces resserrés et pied de page illustré. */
.section:not(.section--photo) { padding-block: clamp(2.25rem, 4.5vw, 4rem); }
.home-intro { text-align: center; margin: 0; padding: 1.25rem var(--gutter); font-size: clamp(1rem, 2vw, 1.4rem); color: var(--ow-green-deep); }
.home-split { flex: none; min-height: clamp(340px, 48vw, 620px); }
.prose p { text-align: justify; hyphens: auto; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); padding-block: 1.5rem; }

.footer-identity p { margin: 1rem 0 0; line-height: 1.7; }
.footer-coordinates { border-left: 1px solid var(--color-line); padding-left: clamp(1.5rem, 4vw, 4rem); }
.footer-coordinates h2 { font-size: 1.2rem; margin: 0 0 .6rem; }
.footer-coordinates .contact-list { gap: .35rem; font-size: .9rem; line-height: 1.5; }
.footer-coordinates .contact-list a { gap: .65rem; min-height: 24px; align-items: center; }
.footer-coordinates .contact-list .icon { flex-basis: 18px; width: 18px; height: 18px; margin-top: 0; }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.contact-list a { display: flex; align-items: flex-start; gap: 1rem; color: inherit; text-decoration: none; }
.contact-list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact-list .icon { flex: 0 0 24px; margin-top: .1rem; color: var(--ow-green-deep); }
.contact-list span { min-width: 0; overflow-wrap: anywhere; }
.contact-details h2 { margin-bottom: 1.5rem; }
.legal-copy { max-width: 920px; }
.legal-copy h2 { font-size: 1.65rem; margin: 2rem 0 1rem; }
.legal-copy p { margin: 0 0 1rem; line-height: 1.75; overflow-wrap: anywhere; }
@media (max-width: 650px) {
.footer-grid { grid-template-columns: 1fr; gap: 1rem; padding-block: 1.25rem; }
.footer-coordinates { border-left: 0; border-top: 1px solid var(--color-line); padding: 1rem 0 0; }

}
.page-home { height: auto; min-height: 100svh; }
.page-home .site-main { flex: 0 0 auto; padding-bottom: 1.5rem; }


.footer-identity .brand { max-width: 100%; }

/* Essai mini-hero accueil, version précédente conservée dans Git. */
.home-intro-banner { position: relative; isolation: isolate; display: grid; align-items: center; min-height: 210px; padding-block: 2rem; margin-bottom: clamp(12px, 2vw, 28px); background: var(--ow-green-deep); color: #fff; overflow: hidden; }
.home-intro-banner > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: grayscale(1); }
.home-intro-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(9,28,19,.87), rgba(9,28,19,.55)); }
.home-intro-banner p { max-width: 1000px; margin: 0 auto; color: #fff; font-family: var(--font-heading, 'Playfair Display', serif); font-size: clamp(1.6rem, 2.5vw, 2.5rem); line-height: 1.35; text-align: center; text-wrap: balance; }
@media (max-width: 650px) { .home-intro-banner { min-height: 180px; padding-block: 1.5rem; } }

/* Agenda Calendly intégré : présentation compacte. */
.section.booking-embed-section { padding-block: 1.5rem .5rem; }
.booking-embed-section > .container { width: calc(100% - 2rem); max-width: 1600px; padding-inline: 0; }
.booking-embed { width: 100%; min-width: 0; height: 700px; }
.booking-embed-section h2 { text-align: center; margin: 0 0 .6rem; }
.booking-categories { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem 1.5rem; list-style: none; padding: 0; margin: 0 0 .5rem; font-size: .95rem; }
.booking-categories li { white-space: nowrap; }
.booking-embed-fallback { text-align: center; margin: .25rem 0 0; font-size: .875rem; }
.booking-embed-section + .section { padding-block: 1.25rem 2rem; }
.booking-embed-section + .section h2 { margin-top: 0; margin-bottom: 1rem; }
@media (max-width: 650px) { .booking-embed-section > .container { width: 100%; } .booking-embed-section h2, .booking-embed-fallback { padding-inline: 1rem; } .booking-categories { padding-inline: 1rem; gap: .3rem 1rem; font-size: .85rem; } }

.rates__booking { grid-column: 1 / -1; justify-self: start; font-size: .85rem; padding: .65rem 1rem; }

/* Statistiques : choix explicite avant chargement de Google Analytics. */
.cookie-settings{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.cookie-banner[hidden]{display:none}
.cookie-banner{position:fixed;inset:auto 1rem 1rem;z-index:1000;display:flex;align-items:center;gap:1.5rem;padding:1.25rem 1.5rem;background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-line);box-shadow:0 4px 24px rgba(0,0,0,.15)}
.cookie-banner__copy{flex:1}.cookie-banner h2{font-family:var(--font-serif);font-size:1.25rem;margin:0 0 .35rem}.cookie-banner p{font-size:.9rem;line-height:1.5;margin:0}.cookie-banner p a{text-decoration:underline}
.cookie-banner__actions{display:flex;gap:.75rem;flex-wrap:wrap}.cookie-banner__actions .btn{font-size:.85rem;padding:.7rem 1rem}
@media(max-width:800px){.cookie-banner{flex-direction:column;align-items:stretch;gap:1rem;inset:auto .5rem .5rem;padding:1rem;max-height:90vh;overflow:auto}.cookie-banner__actions .btn{flex:1}}