/* ==========================================================================
   Site Marine — feuille de style unique, écrite à la main (aucun build).
   Palette de la cliente : rose poudré, pêche, rose fané, menthe, vert jade.
   Mise en page éditoriale contemporaine : Archivo pour les titres (graisse
   forte, interlettrage serré), Instrument Sans pour le texte, touches
   d'Instrument Serif italique. Hero plein écran photo + nom géant.
   ========================================================================== */

/* ==========================================================================
   Polices auto-hébergées — aucun appel à Google Fonts, donc aucune adresse IP
   de visiteur transmise hors UE (RGPD, art. 44 et suivants). Les .woff2 sont
   dans css/polices/, avec leurs licences SIL Open Font License 1.1 à côté
   (OFL-*.txt) : l'OFL impose de distribuer la licence avec les fichiers.
   Sous-ensembles latin + latin-ext seulement — le site est monolingue FR.
   ========================================================================== */

/* Archivo 500 normal — latin étendu */
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 500;
    font-stretch: 100%;
    font-display: swap;
    src: url("polices/archivo-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;
}

/* Archivo 500 normal — latin */
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 500;
    font-stretch: 100%;
    font-display: swap;
    src: url("polices/archivo-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;
}

/* Archivo 600 normal — latin étendu */
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    font-display: swap;
    src: url("polices/archivo-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;
}

/* Archivo 600 normal — latin */
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    font-display: swap;
    src: url("polices/archivo-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;
}

/* Archivo 700 normal — latin étendu */
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    font-display: swap;
    src: url("polices/archivo-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;
}

/* Archivo 700 normal — latin */
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    font-display: swap;
    src: url("polices/archivo-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;
}

/* Archivo 800 normal — latin étendu */
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 800;
    font-stretch: 100%;
    font-display: swap;
    src: url("polices/archivo-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;
}

/* Archivo 800 normal — latin */
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 800;
    font-stretch: 100%;
    font-display: swap;
    src: url("polices/archivo-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;
}

/* Instrument Sans 400 normal — latin étendu */
@font-face {
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("polices/instrument-sans-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;
}

/* Instrument Sans 400 normal — latin */
@font-face {
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("polices/instrument-sans-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;
}

/* Instrument Sans 500 normal — latin étendu */
@font-face {
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("polices/instrument-sans-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;
}

/* Instrument Sans 500 normal — latin */
@font-face {
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("polices/instrument-sans-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;
}

/* Instrument Sans 600 normal — latin étendu */
@font-face {
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("polices/instrument-sans-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;
}

/* Instrument Sans 600 normal — latin */
@font-face {
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("polices/instrument-sans-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;
}

/* Instrument Sans 700 normal — latin étendu */
@font-face {
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("polices/instrument-sans-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;
}

/* Instrument Sans 700 normal — latin */
@font-face {
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("polices/instrument-sans-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;
}

/* Instrument Serif 400 italic — latin étendu */
@font-face {
    font-family: "Instrument Serif";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("polices/instrument-serif-italic-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Instrument Serif 400 italic — latin */
@font-face {
    font-family: "Instrument Serif";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("polices/instrument-serif-italic-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Instrument Serif 400 normal — latin étendu */
@font-face {
    font-family: "Instrument Serif";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("polices/instrument-serif-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;
}

/* Instrument Serif 400 normal — latin */
@font-face {
    font-family: "Instrument Serif";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("polices/instrument-serif-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;
}


/* Cormorant Garamond 600 normal — latin étendu (nom géant du hero uniquement) */
@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("polices/cormorant-garamond-latin-ext-600.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;
}

/* Cormorant Garamond 600 normal — latin (nom géant du hero uniquement) */
@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("polices/cormorant-garamond-latin-600.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;
}

:root {
    --blanc-casse: #faf7f5;   /* fond de page */
    --rose-poudre: #f5e3e0;   /* sections alternées, fonds d'attente d'image */
    --peche: #f2c9bc;         /* filets et bordures décoratives */
    --rose-fane: #c08e8e;     /* alertes, accents chauds */
    --menthe: #7fb0ac;        /* touches claires sur fond sombre */
    --jade-fonce: #3f7f7b;
    --jade-nuit: #2f605d;     /* surfaces sombres : header, pied, CTA, boutons */
    --jade-profond: #24504d;  /* hover des surfaces sombres */
    --blanc: #ffffff;
    --texte: #2e2a28;
    --texte-doux: #6b625e;

    /* Fonds alternés des cartes tarifaires */
    --menthe-clair: #e8f2f0;
    --jade-clair: #e2ecea;

    /* Bordures douces (pêche translucide) et voile posé sur les photos */
    --bordure: rgb(242 201 188 / 0.65);
    --voile: 26 52 50;

    --police-titres: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --police-texte: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
    --police-accent: "Instrument Serif", Georgia, serif;

    --rayon: 1rem;
    --rayon-grand: 1.5rem;
    --largeur-site: 78rem;
}

/* ——— Base ——— */

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

html {
    scroll-behavior: smooth;
}

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

body {
    margin: 0;
    background-color: var(--blanc-casse);
    color: var(--texte);
    font-family: var(--police-texte);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    /* Le retour tactile est géré via :active ; on retire le flash gris par défaut */
    -webkit-tap-highlight-color: transparent;
}

@media (min-width: 768px) {
    body {
        font-size: 1.0625rem;
    }
}

/* Cible tactile confortable + pas de délai/zoom parasite au tap */
a,
button,
summary,
input,
select,
textarea {
    touch-action: manipulation;
}

::selection {
    background-color: var(--jade-nuit);
    color: var(--blanc-casse);
}

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

h1,
h2,
h3 {
    font-family: var(--police-titres);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
}

h1 {
    font-size: clamp(2.2rem, 7vw, 3.6rem);
    margin-top: 1rem;
}

h2 {
    font-size: clamp(1.75rem, 4.5vw, 2.6rem);
}

h3 {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

/* Mot accentué au serif italique, au sein d'un titre */
.accent {
    font-family: var(--police-accent);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
}

p {
    margin: 0;
}

p + p {
    margin-top: 1rem;
}

a {
    color: inherit;
}

/* ——— Utilitaires ——— */

.conteneur {
    max-width: var(--largeur-site);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

@media (min-width: 768px) {
    .conteneur {
        padding-inline: 2rem;
    }
}

.cache {
    display: none !important;
}

.centre {
    text-align: center;
}

.marge-haute {
    margin-top: 2rem;
}

.marge-haute-courte {
    margin-top: 1.5rem;
}

/* ——— Focus clavier ———
   Un seul style de focus pour tout le site, appliqué uniquement au clavier
   (:focus-visible) pour ne pas cerner les boutons au clic souris. Le double
   contour clair/foncé garantit un focus visible aussi bien sur le fond crème
   que sur les sections jade et les photos du hero (WCAG 2.4.7 et 2.4.11). */

:where(a, button, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--jade-nuit);
    outline-offset: 3px;
    border-radius: 4px;
    box-shadow: 0 0 0 6px var(--blanc-casse);
}

.section--sombre :where(a, button):focus-visible,
.entete :where(a, button):focus-visible,
.pied :where(a, button):focus-visible,
.hero-plein :where(a, button):focus-visible,
.carte-tarif--recommande :where(a, button):focus-visible,
.lightbox :where(a, button):focus-visible {
    outline-color: var(--blanc-casse);
    box-shadow: 0 0 0 6px rgb(var(--voile) / 0.9);
}

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

.lien-evitement {
    position: absolute;
    left: -100vw;
    top: 1rem;
    z-index: 100;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: var(--jade-nuit);
    color: #fff;
    text-decoration: none;
}

.lien-evitement:focus {
    left: 1rem;
}

.texte-doux {
    color: var(--texte-doux);
}

.texte-intro {
    margin-top: 1.5rem;
    max-width: 60ch;
    font-size: 1.0625rem;
}

.colonne-texte {
    max-width: 52rem;
}

.surtitre {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--jade-nuit);
}

/* ——— Boutons ——— */

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.9rem 1.7rem;
    border: 1px solid var(--jade-nuit);
    border-radius: 999px;
    background: var(--jade-nuit);
    color: #fff;
    font-family: var(--police-texte);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
}

.bouton:hover,
.bouton:active {
    background: var(--jade-profond);
    border-color: var(--jade-profond);
    transform: translateY(-1px);
}

.bouton--secondaire {
    background: transparent;
    color: var(--jade-nuit);
}

.bouton--secondaire:hover,
.bouton--secondaire:active {
    background: var(--jade-nuit);
    color: #fff;
    transform: translateY(-1px);
}

.bouton--compact {
    padding: 0.6rem 1.2rem;
    font-size: 0.72rem;
}

.bouton--bloc {
    display: flex;
    width: 100%;
    text-align: center;
}

.bouton--large {
    margin-top: 1.5rem;
    padding: 1.05rem 2rem;
    width: 100%;
}

@media (min-width: 640px) {
    .bouton--large {
        width: auto;
    }
}

.bouton--discret {
    background: transparent;
    border-color: transparent;
    color: var(--jade-nuit);
    text-underline-offset: 4px;
}

.bouton--discret:hover {
    background: transparent;
    text-decoration: underline;
    color: var(--jade-nuit);
    transform: none;
}

/* Variante claire, pour fonds sombres */
.bouton--clair {
    background: #fff;
    border-color: #fff;
    color: var(--jade-nuit);
}

.bouton--clair:hover,
.bouton--clair:active {
    background: var(--blanc-casse);
    border-color: var(--blanc-casse);
    color: var(--jade-nuit);
}

/* Grand CTA de panneau : libellé à gauche, flèche encerclée à droite */
.bouton--panneau {
    width: 100%;
    justify-content: space-between;
    padding: 0.55rem 0.55rem 0.55rem 1.5rem;
    font-size: 0.78rem;
}

.bouton__fleche {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    background: var(--jade-nuit);
    color: #fff;
    transition: transform 0.25s;
}

.bouton--panneau:hover .bouton__fleche {
    transform: translateX(3px);
}

/* ——— En-tête ——— */

.entete {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--jade-nuit);
    color: #fff;
    border-bottom: 1px solid rgb(255 255 255 / 0.08);
    transition: background-color 0.3s, border-color 0.3s, transform 0.3s ease;
}

/* Repliée vers le haut en descendant, dépliée dès qu'on remonte (js/site.js).
   Classe posée par JS uniquement : sans JavaScript l'en-tête reste en place. */
.entete--masquee {
    transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
    .entete {
        transition: background-color 0.3s, border-color 0.3s;
    }
}

/* Sur le hero plein écran : l'en-tête flotte, transparent, sur la photo */
.entete--hero {
    position: fixed;
    inset-inline: 0;
    background: transparent;
    border-color: transparent;
}

/* Menu ouvert en haut de l'accueil : l'en-tête transparent prend la couleur du panneau,
   barre et menu forment un seul bloc */
.menu-mobile-ouvert .entete--hero {
    background: var(--jade-nuit);
    border-color: rgb(255 255 255 / 0.08);
}

.entete--hero.entete-ombre,
.entete-ombre {
    background: rgb(47 96 93 / 0.95);
    border-color: rgb(255 255 255 / 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.entete__interieur {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1rem;
}

.entete__logo {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    line-height: 1.1;
    text-decoration: none;
}

.entete__nom {
    font-family: var(--police-titres);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.42em;
}

.entete__baseline {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.26em;
    color: rgb(255 255 255 / 0.78);
}

.nav-principale {
    display: none;
    align-items: center;
    gap: 1.75rem;
}

@media (min-width: 1024px) {
    .nav-principale {
        display: flex;
    }
}

.nav-principale__lien {
    font-size: 0.85rem;
    color: rgb(255 255 255 / 0.75);
    text-decoration: none;
    transition: color 0.2s;
}

.nav-principale__lien:hover {
    color: #fff;
}

.nav-principale__lien--actif {
    color: #fff;
    font-weight: 600;
}

.entete .nav-principale .bouton {
    background: #fff;
    border-color: #fff;
    color: var(--jade-nuit);
}

.entete .nav-principale .bouton:hover {
    background: var(--blanc-casse);
    border-color: var(--blanc-casse);
}

.entete__burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

@media (min-width: 1024px) {
    .entete__burger {
        display: none;
    }
}

/* Menu mobile : panneau posé PAR-DESSUS la page, sous la barre de l'en-tête (l'en-tête
   sticky/fixed sert de repère). Il se déroule de haut en bas (clip-path) et les liens
   arrivent en cascade ; js/site.js retire .cache, puis pose .nav-mobile--ouvert à
   l'image suivante pour que la transition parte bien de l'état fermé. */
.nav-mobile {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--jade-nuit);
    border-top: 1px solid rgb(255 255 255 / 0.08);
    padding: 0.75rem 1.25rem 1.75rem;
    box-shadow: 0 28px 40px -24px rgb(26 52 50 / 0.55);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.28s cubic-bezier(0.4, 0, 1, 1);
}

.nav-mobile--ouvert {
    clip-path: inset(0 0 -3rem 0);      /* marge négative : l'ombre portée reste visible */
    transition: clip-path 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.nav-mobile li {
    opacity: 0;
    transform: translateY(-0.6rem);
    transition: opacity 0.15s ease, transform 0.2s ease;
}

.nav-mobile--ouvert li {
    opacity: 1;
    transform: none;
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Cascade : chaque lien arrive 45 ms après le précédent (7 entrées au plus) */
.nav-mobile--ouvert li:nth-child(2) { transition-delay: 0.045s; }
.nav-mobile--ouvert li:nth-child(3) { transition-delay: 0.09s; }
.nav-mobile--ouvert li:nth-child(4) { transition-delay: 0.135s; }
.nav-mobile--ouvert li:nth-child(5) { transition-delay: 0.18s; }
.nav-mobile--ouvert li:nth-child(6) { transition-delay: 0.225s; }
.nav-mobile--ouvert li:nth-child(7) { transition-delay: 0.27s; }

@media (prefers-reduced-motion: reduce) {
    .nav-mobile,
    .nav-mobile--ouvert,
    .nav-mobile li,
    .nav-mobile--ouvert li {
        transition: none;
    }
}

@media (min-width: 1024px) {
    .nav-mobile {
        display: none !important;
    }
}

.nav-mobile ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.nav-mobile__lien {
    display: block;
    padding-block: 0.85rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.08);
    color: rgb(255 255 255 / 0.85);
    font-family: var(--police-titres);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.nav-mobile__lien--actif {
    color: #fff;
}

.nav-mobile__cta {
    padding-top: 1.25rem;
}

.nav-mobile .bouton {
    background: #fff;
    border-color: #fff;
    color: var(--jade-nuit);
}

/* ——— Barre d'action mobile ——— */
/* Appel + devis toujours à portée de pouce ; masquée dès que la nav
   principale (avec son propre CTA) est visible. */

body {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
}

@media (min-width: 1024px) {
    body {
        padding-bottom: 0;
    }
}

.barre-mobile {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 45;
    display: flex;
    gap: 0.6rem;
    padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom));
    background: rgb(47 96 93 / 0.95);
    border-top: 1px solid rgb(255 255 255 / 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* « visibility » se transitionne par palier : la barre reste visible
       pendant tout le glissement, puis sort du parcours clavier à la fin. */
    transition: transform 0.3s ease, visibility 0.3s;
}

/* Retirée pendant la descente, ramenée dès que l'on remonte (js/site.js).
   Classe posée par JS uniquement : sans JavaScript la barre reste en place. */
.barre-mobile--masquee,
.menu-mobile-ouvert .barre-mobile {      /* le menu ouvert a déjà son « Demander un devis » */
    transform: translateY(110%);
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .barre-mobile {
        transition: none;
    }
}

@media (min-width: 1024px) {
    .barre-mobile {
        display: none;
    }
}

.barre-mobile__lien {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding-block: 0.85rem;
    font-size: 0.75rem;
}

.barre-mobile .bouton {
    background: #fff;
    border-color: #fff;
    color: var(--jade-nuit);
}

.barre-mobile .bouton--secondaire {
    background: transparent;
    border-color: rgb(255 255 255 / 0.4);
    color: #fff;
}

/* ——— Sections & titres ——— */

.section {
    padding-block: 4.5rem;
}

@media (min-width: 768px) {
    .section {
        padding-block: 7rem;
    }
}

.section--rose {
    background: rgb(245 227 224 / 0.5);
}

.section--sombre {
    background: var(--jade-nuit);
    color: rgb(255 255 255 / 0.85);
}

.section--sombre h2 {
    color: #fff;
}

.section--haut-court {
    padding-top: 0;
}

.section--erreur {
    padding-block: 7rem;
}

.titre-bloc {
    margin-bottom: 0;
}

.titre-bloc h2 {
    margin-top: 0.75rem;
}

.titre-bloc--centre {
    text-align: center;
}

.filet {
    margin-top: 1.25rem;
    height: 2px;
    width: 3rem;
    background: var(--peche);
}

.titre-bloc--centre .filet {
    margin-inline: auto;
}

.titre-cta {
    font-size: clamp(2rem, 6vw, 3.2rem);
}

.texte-cta {
    max-width: 36rem;
    margin: 1.25rem auto 0;
}

.section--sombre .texte-cta {
    color: rgb(255 255 255 / 0.8);
}

.section--sombre .bouton {
    background: #fff;
    border-color: #fff;
    color: var(--jade-nuit);
}

.section--sombre .bouton--discret {
    background: transparent;
    border-color: transparent;
    color: rgb(255 255 255 / 0.8);
}

.section--sombre .bouton--discret:hover {
    color: #fff;
}

/* ——— Hero plein écran (accueil) ——— */

.hero-plein {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: var(--jade-nuit);
    color: #fff;
    overflow: hidden;
}

.hero-plein__fond {
    position: absolute;
    inset: 0;
}

.hero-plein__fond img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 46% 36%;
}

.hero-plein__voile {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgb(var(--voile) / 0.6) 0%,
            rgb(var(--voile) / 0.22) 28%,
            rgb(var(--voile) / 0.3) 55%,
            rgb(var(--voile) / 0.9) 100%
        );
}

.hero-plein__contenu {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-top: clamp(6.5rem, 16vh, 10rem);
    padding-bottom: calc(5.75rem + env(safe-area-inset-bottom));
}

@media (min-width: 1024px) {
    .hero-plein__contenu {
        padding-bottom: 2rem;
    }
}

.hero-plein__amorce {
    margin-block: auto;
    max-width: 40rem;
}

.hero-plein__kicker {
    margin: 0;
    font-family: var(--police-texte);
    font-size: clamp(0.95rem, 2.8vw, 1.15rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hero-plein__accroche {
    margin-top: 1rem;
    max-width: 44ch;
    font-size: clamp(0.95rem, 2.6vw, 1.0625rem);
    line-height: 1.65;
    color: rgb(255 255 255 / 0.88);
}

.hero-plein__bas {
    margin-top: 2.5rem;
}

@media (min-width: 1024px) {
    .hero-plein__bas {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: end;
        gap: 2.5rem;
    }
}

.hero-plein__nom {
    margin: 0 0 1.5rem;
    font-family: "Cormorant Garamond", Garamond, "Times New Roman", serif;
    font-size: clamp(3.4rem, 16.5vw, 11.5rem);
    font-weight: 600;
    line-height: 0.85;
    letter-spacing: 0;
    text-transform: uppercase;
    margin-left: -0.05em;
}

@media (min-width: 1024px) {
    .hero-plein__nom {
        margin-bottom: 0;
        white-space: nowrap;
        /* Une seule ligne qui tient à gauche du panneau (26rem + gap)
           dans le conteneur de 78rem, quel que soit l'écran */
        font-size: min(6.8vw, 6.25rem);
    }
}

.hero-plein__panneau {
    width: 26rem;
    max-width: 100%;
    padding: 1rem;
    border: 1px solid rgb(255 255 255 / 0.16);
    border-radius: var(--rayon-grand);
    background: rgb(var(--voile) / 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.hero-plein__preuve {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.25rem 0.25rem 1rem;
}

.hero-plein__avatars {
    display: flex;
    flex-shrink: 0;
}

.hero-plein__avatars img {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    object-fit: cover;
    border: 2px solid var(--jade-nuit);
}

.hero-plein__avatars img + img {
    margin-left: -0.7rem;
}

.hero-plein__preuve p {
    font-size: 0.85rem;
    line-height: 1.4;
    color: rgb(255 255 255 / 0.75);
}

.hero-plein__preuve strong {
    display: block;
    font-weight: 600;
    color: #fff;
}

.hero-plein__pied {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    margin-top: 1.75rem;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: rgb(255 255 255 / 0.78);
}

@media (min-width: 1024px) {
    .hero-plein__pied {
        grid-column: 1 / -1;
    }
}

/* Boutons groupés (CTA final, 404) */
.hero__boutons {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

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

/* ——— Cadres photo ——— */

.cadre-photo {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--rayon);
    background: var(--rose-poudre);
    /* Contexte de composition propre : sans lui, l'image zoomée au survol
       déborde des coins arrondis. */
    isolation: isolate;
}

.cadre-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Wrapper sur-échantillonné : laisse de la marge au parallax GSAP */
.cadre-photo__parallax {
    position: absolute;
    inset: 0;
    transform: scale(1.1);
}

.cadre-photo__parallax img {
    position: absolute;
    inset: 0;
}

.zoom-survol {
    transition: transform 0.5s;
}

.zoom-survol:hover {
    transform: scale(1.05);
}

/* ——— Grilles génériques ——— */

.grille-2 {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 768px) {
    .grille-2 {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }

    .grille-2--visuel-etroit {
        grid-template-columns: 1fr 1.3fr;
    }
}

.grille-cartes {
    margin-top: 2.5rem;
    display: grid;
    gap: 1rem;
}

@media (min-width: 768px) {
    .grille-cartes {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
}

@media (min-width: 768px) {
    .grille-cartes--deux {
        grid-template-columns: repeat(2, 1fr);
        max-width: 52rem;
        margin-inline: auto;
    }
}

/* Cortège : 4 cartes → 2 × 2, jamais 3 + 1 orpheline (retour cliente, 02/10/2026) */
@media (min-width: 640px) {
    .grille-cartes--serree {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ——— Carrousel de formules, téléphone uniquement ———
   Les cartes défilent sur le côté, une par geste (scroll-snap natif : fluide au doigt,
   utilisable sans JS). La carte suivante dépasse pour inviter à glisser. js/site.js
   ajoute les points de navigation, la carte active et l'accès clavier (role="region",
   tabindex). Défilement INTERNE : la page ne déborde pas (accessibility.md §5). */
@media (max-width: 767px) {
    .grille-cartes--carrousel {
        display: flex;
        gap: 0.75rem;
        margin-inline: -1.25rem;            /* jusqu'aux bords de l'écran (= marge de .conteneur) */
        padding: 0.75rem 1.25rem 2rem;      /* place pour l'ombre et l'entrée animée des cartes */
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 1.25rem;
        scrollbar-width: none;
    }

    .grille-cartes--carrousel::-webkit-scrollbar {
        display: none;
    }

    .grille-cartes--carrousel > .carte-tarif {
        flex: 0 0 84%;
        height: auto;
        scroll-snap-align: center;
        scroll-snap-stop: always;           /* une formule par geste, même en glissant vite */
    }

    /* Les cartes voisines reculent légèrement. « scale » et non « transform » :
       GSAP anime déjà transform pour l'apparition des cartes. */
    .carrousel-actif > .carte-tarif {
        scale: 0.94;
        transition: scale 0.35s ease, box-shadow 0.35s ease;
    }

    .carrousel-actif > .carte-tarif--active {
        scale: 1;
        box-shadow: 0 18px 40px rgb(47 96 93 / 0.14);
    }

    .grille-cartes--carrousel + .note-grille {
        margin-top: 0.5rem;
    }
}

/* Points de navigation (créés par js/site.js) : cible tactile de 44 px, état actif
   signalé par la forme (pastille allongée) et pas seulement par la couleur */
.carrousel-points {
    display: none;
}

@media (max-width: 767px) {
    .carrousel-points {
        display: flex;
        justify-content: center;
        margin-top: -1.25rem;
    }
}

.carrousel-points__point {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.carrousel-points__point::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: var(--texte-doux);
    transition: width 0.3s ease, background-color 0.3s ease;
}

.carrousel-points__point[aria-current="true"]::before {
    width: 1.6rem;
    background: var(--jade-nuit);
}

@media (prefers-reduced-motion: reduce) {
    .carrousel-actif > .carte-tarif,
    .carrousel-points__point::before {
        transition: none;
    }
}

.grille-apercu {
    margin-top: 2.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .grille-apercu {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
}

/* ——— Cartes ——— */

.carte-info {
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--blanc);
    padding: 1.75rem;
    transition: transform 0.3s, box-shadow 0.3s;
}

.carte-info:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgb(47 96 93 / 0.10);
}

.carte-info h3 {
    color: var(--jade-nuit);
}

.carte-info p {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--texte-doux);
}

.carte-tarif {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-grand);
    background: var(--blanc);
    padding: 2rem 1.75rem;
    transition: transform 0.3s, box-shadow 0.3s;
}

.grille-cartes .carte-tarif:nth-child(3n+2) {
    background: var(--menthe-clair);
}

.grille-cartes .carte-tarif:nth-child(3n+3) {
    background: var(--jade-clair);
}

.carte-tarif:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 45px rgb(47 96 93 / 0.12);
}

.carte-tarif__badge {
    align-self: flex-start;
    margin-bottom: 0.75rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: var(--peche);
    color: var(--jade-nuit);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.carte-tarif__duree {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--texte-doux);
}

.carte-tarif__prix {
    margin-top: 1rem;
    font-family: var(--police-titres);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--jade-nuit);
}

.carte-tarif__a-partir {
    display: block;
    font-family: var(--police-texte);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.carte-tarif__inclus {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--bordure);
    flex: 1;
    font-size: 0.875rem;
    color: var(--texte-doux);
}

.carte-tarif__inclus li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.carte-tarif__coche {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.1rem;
    border-radius: 50%;
    background: var(--jade-nuit);
    color: var(--blanc);
    font-size: 0.65rem;
    line-height: 1;
}

.carte-tarif__cta {
    margin-top: 1.5rem;
    align-self: flex-start;
}

.carte-tarif--recommande {
    background: var(--jade-nuit);
    border-color: var(--jade-nuit);
    color: var(--blanc-casse);
}

.carte-tarif--recommande h3,
.carte-tarif--recommande .carte-tarif__prix {
    color: var(--blanc);
}

.carte-tarif--recommande .carte-tarif__duree,
.carte-tarif--recommande .carte-tarif__inclus {
    color: rgb(250 247 245 / 0.75);
    border-top-color: rgb(255 255 255 / 0.2);
}

.carte-tarif--recommande .carte-tarif__coche {
    background: var(--peche);
    color: var(--jade-nuit);
}

.carte-tarif--recommande .bouton--secondaire {
    border-color: var(--peche);
    color: var(--peche);
}

.carte-tarif--recommande .bouton--secondaire:hover,
.carte-tarif--recommande .bouton--secondaire:active {
    background: var(--peche);
    color: var(--jade-nuit);
}

/* CTA de la carte recommandée : pilule pêche (teinte du badge). Le bouton plein jade
   se confondait avec le fond jade de la carte — on ne voyait que le texte.
   Contrastes : texte 4,69:1, pilule sur la carte 4,69:1, survol blanc 7,11:1. */
.carte-tarif--recommande .carte-tarif__cta:not(.bouton--secondaire) {
    background: var(--peche);
    border-color: var(--peche);
    color: var(--jade-nuit);
}

.carte-tarif--recommande .carte-tarif__cta:not(.bouton--secondaire):hover,
.carte-tarif--recommande .carte-tarif__cta:not(.bouton--secondaire):active {
    background: var(--blanc);
    border-color: var(--blanc);
    color: var(--jade-nuit);
}

.note-grille {
    margin-top: 1.5rem;
    max-width: 42rem;
    font-size: 0.875rem;
}

/* Mention de TVA obligatoire à côté de tout prix affiché à des particuliers
   (arrêté du 3 décembre 1987 relatif à l'information du consommateur). */
.note-tarifs {
    margin-top: 1rem;
    font-size: 0.8rem;
}

/* ——— Listes éditoriales ——— */

.liste-etapes {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    counter-reset: etape;
}

.liste-etapes li {
    border-left: 2px solid var(--peche);
    padding-left: 1.25rem;
}

.liste-etapes li + li {
    margin-top: 1.5rem;
}

.liste-etapes h3 {
    font-family: var(--police-titres);
    font-size: 1rem;
    font-weight: 600;
}

.liste-etapes p {
    margin-top: 0.35rem;
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--texte-doux);
}

.liste-etapes--etroite {
    max-width: 42rem;
}

.liste-etapes--etroite li + li {
    margin-top: 1.25rem;
}

.liste-tarifs {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
}

.liste-tarifs li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--bordure);
    padding-bottom: 0.85rem;
}

.liste-tarifs li + li {
    margin-top: 1rem;
}

.liste-tarifs__prix {
    white-space: nowrap;
    font-family: var(--police-titres);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--jade-nuit);
}

/* ——— Prestations : cortège & conditions ——— */

.grille-cortege {
    display: grid;
    gap: 2.5rem;
    align-items: start;
}

/* Une cellule de grille s'élargit par défaut jusqu'à la largeur de son contenu : avec le
   carrousel des cartes (toutes bout à bout), la page débordait de 380 px sur téléphone */
.grille-cortege > * {
    min-width: 0;
}

/* Côte à côte seulement à partir de 1024 px : en dessous, 4 cartes + la photo dans
   la même rangée donnaient des cartes de 170 px et une photo minuscule */
@media (max-width: 1023px) {
    .grille-cortege__photo {
        max-width: 24rem;
    }
}

@media (min-width: 1024px) {
    .grille-cortege {
        grid-template-columns: 1.4fr 1fr;
        gap: 4rem;
    }

    .grille-cortege__photo {
        position: sticky;
        top: 6.5rem;
    }
}

.grille-conditions {
    margin-top: 2rem;
    display: grid;
    gap: 2rem;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--texte-doux);
}

@media (min-width: 768px) {
    .grille-conditions {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
}

.grille-conditions strong {
    font-weight: 600;
    color: var(--texte);
}

.grille-conditions p + p {
    margin-top: 1rem;
}

/* ——— Galerie & lightbox ——— */

.filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.filtres__bouton {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.5rem 1.2rem;
    border: 1px solid var(--bordure);
    border-radius: 999px;
    background: transparent;
    color: var(--texte);
    font-family: var(--police-texte);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.filtres__bouton:hover,
.filtres__bouton:active {
    border-color: var(--jade-nuit);
}

.filtres__bouton[aria-pressed="true"] {
    border-color: var(--jade-nuit);
    background: var(--jade-nuit);
    color: #fff;
}

/* Galerie en rangées justifiées.
   Chaque photo porte --r = largeur/hauteur (posé par PHP). Sa largeur de base
   ET sa capacité d'étirement sont proportionnelles à --r : dans une ligne, les
   largeurs restent donc proportionnelles aux ratios, ce qui donne à toutes les
   photos exactement la même hauteur et remplit la ligne au pixel près.
   Les colonnes CSS, elles, laissaient de grands trous en fin de galerie. */

.galerie {
    --hauteur-base: 12rem;
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .galerie {
        --hauteur-base: 15rem;
        gap: 1rem;
    }
}

@media (min-width: 1200px) {
    .galerie {
        --hauteur-base: 19rem;
    }
}

/* Formats posés par classe_ratio_photo() : la CSP interdit les style="" */
.galerie__item--tres-haut { --r: 0.5625; }
.galerie__item--haut      { --r: 0.6667; }
.galerie__item--portrait  { --r: 0.75; }
.galerie__item--carre     { --r: 1; }
.galerie__item--paysage   { --r: 1.5; }

.galerie__item {
    flex: var(--r, 0.75) 1 calc(var(--r, 0.75) * var(--hauteur-base));
    aspect-ratio: var(--r, 0.75);
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border-radius: var(--rayon);
    background: var(--rose-poudre);
    /* Sans contexte de composition propre, le zoom au survol déborde des
       coins arrondis (le navigateur court-circuite le clipping). */
    isolation: isolate;
    transform: translateZ(0);
}

/* Cales invisibles : elles absorbent l'espace libre de la dernière ligne,
   qui sinon étirerait démesurément les deux ou trois photos restantes. */
.galerie__cale {
    /* Étirement très supérieur à celui des photos : la dernière ligne garde
       donc la hauteur de référence au lieu de s'étirer sur toute la largeur. */
    flex: 100 1 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.galerie__zoom {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: inherit;
    overflow: hidden;
    background: none;
    cursor: zoom-in;
}

.galerie__zoom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    transition: transform 0.5s;
}

.galerie__zoom:hover img,
.galerie__zoom:active img {
    transform: scale(1.03);
}

.galerie__zoom:focus-visible {
    outline: 2px solid var(--jade-nuit);
    outline-offset: 2px;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgb(var(--voile) / 0.96);
}

.lightbox__contenu {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
}

.lightbox__image {
    max-height: 80vh;
    max-width: 100%;
    width: auto;
    border-radius: 0.75rem;
    object-fit: contain;
}

.lightbox__legende {
    margin-top: 1rem;
    max-width: 36rem;
    text-align: center;
    font-size: 0.875rem;
    color: rgb(255 255 255 / 0.65);
}

.lightbox__fermer,
.lightbox__nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgb(255 255 255 / 0.2);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s;
}

.lightbox__fermer:hover,
.lightbox__nav:hover {
    background: rgb(255 255 255 / 0.12);
}

.lightbox__fermer {
    top: 1rem;
    right: 1rem;
}

.lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
}

.lightbox__nav--prec {
    left: 0.5rem;
}

.lightbox__nav--suiv {
    right: 0.5rem;
}

@media (min-width: 768px) {
    .lightbox__nav--prec {
        left: 1.5rem;
    }

    .lightbox__nav--suiv {
        right: 1.5rem;
    }
}

/* ——— Journal & articles ——— */

.grille-articles {
    margin-top: 3rem;
    display: grid;
    gap: 2.5rem;
}

@media (min-width: 768px) {
    .grille-articles {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

.carte-article {
    display: flex;
    flex-direction: column;
}

.carte-article__visuel {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--rayon);
    background: var(--rose-poudre);
    isolation: isolate;
}

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

.carte-article__meta {
    margin-top: 1.1rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--texte-doux);
}

.carte-article h2 {
    margin-top: 0.6rem;
    font-size: 1.35rem;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.carte-article h2 a {
    text-decoration: none;
    transition: color 0.2s;
}

.carte-article h2 a:hover {
    color: var(--jade-nuit);
}

.carte-article__accroche {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    line-height: 1.65;
}

.carte-article > p:last-child {
    margin-top: 1rem;
}

.lien-suite {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--jade-nuit);
    text-decoration: none;
    text-underline-offset: 4px;
}

.lien-suite:hover {
    text-decoration: underline;
}

.article {
    max-width: 48rem;
    margin-inline: auto;
    padding: 4rem 1.25rem 5rem;
}

@media (min-width: 768px) {
    .article {
        padding-inline: 2rem;
    }
}

.fil-ariane {
    font-size: 0.85rem;
}

.fil-ariane a {
    color: var(--texte-doux);
    text-decoration: none;
    text-underline-offset: 4px;
    transition: color 0.2s;
}

.fil-ariane a:hover {
    color: var(--jade-nuit);
    text-decoration: underline;
}

.article__entete {
    margin-top: 1.5rem;
}

.article__entete h1 {
    margin-top: 0.75rem;
    font-size: clamp(1.9rem, 5.5vw, 3rem);
}

.article__accroche {
    margin-top: 1.25rem;
    font-size: 1.1rem;
}

.article__visuel {
    position: relative;
    margin-top: 2rem;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--rayon);
    background: var(--rose-poudre);
}

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

.article__contenu {
    margin-top: 2.5rem;
    color: var(--texte-doux);
}

.article__contenu h2 {
    margin-top: 2.75rem;
    color: var(--texte);
    font-size: clamp(1.4rem, 4vw, 1.8rem);
}

.article__contenu p {
    margin-top: 1.5rem;
}

.article__contenu ul {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
}

.article__contenu li {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.article .encart-cta {
    margin-top: 3.5rem;
}

/* ——— FAQ ——— */

.faq-liste {
    margin-top: 3rem;
    max-width: 48rem;
}

.faq-item {
    border-bottom: 1px solid var(--bordure);
    padding-block: 0.5rem;
}

.faq-item summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.9rem;
    font-family: var(--police-titres);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.35;
    cursor: pointer;
    list-style: none;
    transition: color 0.2s;
}

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

.faq-item summary:hover {
    /* --jade-fonce ne donnait que 4,34:1 sur le fond de page : sous le seuil
       AA de 4,5:1 pour du texte de taille normale. --jade-nuit monte à 6,67:1. */
    color: var(--jade-nuit);
}

.faq-item__plus {
    color: var(--jade-nuit);
    transition: transform 0.2s;
}

.faq-item[open] .faq-item__plus {
    transform: rotate(45deg);
}

.faq-item > p {
    padding-bottom: 1.25rem;
    color: var(--texte-doux);
}

/* ——— Encarts ——— */

.encart-cta {
    margin-top: 3rem;
    max-width: 48rem;
    border-radius: var(--rayon-grand);
    background: var(--jade-nuit);
    color: rgb(255 255 255 / 0.8);
    padding: 2.5rem 2rem;
    text-align: center;
}

.encart-cta h2 {
    font-size: clamp(1.4rem, 4vw, 1.8rem);
    color: #fff;
}

.encart-cta .texte-doux {
    margin-top: 0.75rem;
    color: rgb(255 255 255 / 0.8);
}

.encart-cta .bouton {
    background: #fff;
    border-color: #fff;
    color: var(--jade-nuit);
}

.encart-succes {
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--blanc);
    padding: 2rem;
    text-align: center;
    color: var(--texte-doux);
}

.encart-succes__titre {
    font-family: var(--police-titres);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--jade-nuit);
}

.alerte-erreur {
    margin-bottom: 1.5rem;
    border: 1px solid var(--rose-fane);
    border-radius: var(--rayon);
    background: var(--blanc);
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
}

/* ——— Contact ——— */

.grille-contact {
    display: grid;
    gap: 3rem;
}

@media (min-width: 1024px) {
    .grille-contact {
        grid-template-columns: 1.3fr 1fr;
        gap: 4rem;
    }
}

.aside-contact {
    padding-top: 0;
}

@media (min-width: 1024px) {
    .aside-contact {
        padding-top: 7rem;
    }
}

.encart-aside {
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--blanc);
    padding: 1.75rem;
}

.encart-aside h2 {
    font-size: 1.2rem;
}

.encart-aside ul {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    font-size: 0.9rem;
}

.encart-aside li + li {
    margin-top: 0.75rem;
}

.encart-aside a {
    color: var(--jade-nuit);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--bordure);
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s;
}

.encart-aside a:hover {
    text-decoration-color: currentColor;
}

.encart-aside .texte-doux {
    margin-top: 1.25rem;
    font-size: 0.875rem;
}

.aside-contact__photo {
    display: none;
    margin-top: 1.5rem;
}

@media (min-width: 1024px) {
    .aside-contact__photo {
        display: block;
    }
}

/* ——— Formulaire ——— */

.formulaire__grille {
    display: grid;
    gap: 1.25rem;
}

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

    .formulaire__large {
        grid-column: span 2;
    }
}

.formulaire label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.formulaire input[type="text"],
.formulaire input[type="email"],
.formulaire input[type="tel"],
.formulaire select,
.formulaire textarea {
    margin-top: 0.35rem;
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid var(--bordure);
    border-radius: 0.75rem;
    background: var(--blanc);
    color: var(--texte);
    font-family: var(--police-texte);
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* 60 % d'opacité donnait 2,6:1 sur blanc — illisible en plein soleil sur un
   téléphone, et les placeholders portent ici des exemples utiles. */
.formulaire ::placeholder {
    color: var(--texte-doux);
    opacity: 1;
}

/* Le halo à 8 % d'opacité qui servait ici était invisible : un champ focalisé
   ne se distinguait pas d'un champ au repos, ce qui fait échouer le critère
   WCAG 2.4.7 (focus visible). On garde le halo comme renfort esthétique, mais
   c'est le contour franc qui porte l'information. */
.formulaire input:focus-visible,
.formulaire select:focus-visible,
.formulaire textarea:focus-visible {
    outline: 3px solid var(--jade-nuit);
    outline-offset: 2px;
    border-color: var(--jade-nuit);
}

.formulaire input:focus,
.formulaire select:focus,
.formulaire textarea:focus {
    border-color: var(--jade-nuit);
    box-shadow: 0 0 0 3px rgb(var(--voile) / 0.12);
}

.formulaire textarea {
    resize: vertical;
}

/* Champ « Inspi » (photos d'inspiration) */
.formulaire input[type="file"] {
    margin-top: 0.35rem;
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1px dashed var(--peche);
    border-radius: 0.75rem;
    background: var(--blanc);
    color: var(--texte);
    font-family: var(--police-texte);
    font-size: 0.9rem;
}

.formulaire input[type="file"]::file-selector-button {
    margin-right: 0.9rem;
    padding: 0.5rem 0.9rem;
    border: 0;
    border-radius: 999px;
    background: var(--jade-nuit);
    color: var(--blanc);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.formulaire__aide {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--texte-doux);
}

/* Mise en avant du délai de réponse au devis, sous l'intro de contact.php */
.badge-reponse {
    margin-top: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    background: var(--jade-clair);
    color: var(--jade-nuit);
    font-size: 0.9rem;
    font-weight: 600;
}

.badge-reponse__point {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--jade-fonce);
    box-shadow: 0 0 0 4px rgb(63 127 123 / 0.2);
}

/* Légende des champs obligatoires, au-dessus de la grille (WCAG 3.3.2) */
.formulaire__legende {
    margin-bottom: 1.25rem;
    font-size: 0.85rem;
    color: var(--texte-doux);
}

/* Mention d'information RGPD sous le formulaire (art. 13) — pas une case à
   cocher : la base légale est la mesure précontractuelle, pas le consentement. */
.formulaire__mention {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--texte-doux);
}

.formulaire__mention a {
    color: var(--jade-nuit);
    text-decoration: underline;
}

.honeypot {
    position: absolute;
    left: -100vw;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ——— À propos ——— */

.duo-photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.duo-photos__decale {
    margin-top: 2rem;
}

/* ——— Pages légales ——— */

.page-legale {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--texte-doux);
}

.page-legale h1 {
    color: var(--texte);
}

.page-legale section {
    margin-top: 2rem;
}

.page-legale h2 {
    font-size: 1.4rem;
    color: var(--texte);
}

.page-legale section p {
    margin-top: 0.5rem;
}

.page-legale h3 {
    margin-top: 1.5rem;
    font-size: 1.05rem;
    color: var(--texte);
}

.page-legale ul {
    margin: 0.75rem 0 0;
    padding-left: 1.2rem;
}

.page-legale li + li {
    margin-top: 0.35rem;
}

.page-legale strong {
    color: var(--texte);
}

.page-legale__maj {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bordure);
    font-size: 0.8rem;
}

/* Tableau des cookies : vraie table sur grand écran, empilée sur mobile. */

.tableau-legal {
    margin-top: 1rem;
}

.tableau-legal table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.tableau-legal th,
.tableau-legal td {
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--bordure);
    text-align: left;
    vertical-align: top;
}

.tableau-legal thead th {
    background: var(--rose-poudre);
    color: var(--texte);
    font-family: var(--police-titres);
    font-weight: 600;
}

.tableau-legal code {
    font-size: 0.95em;
    word-break: break-all;
}

/* Sous 640 px, chaque cellule devient une ligne préfixée de son intitulé :
   un tableau à 5 colonnes est illisible sur un téléphone. */
@media (max-width: 639px) {
    .tableau-legal thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .tableau-legal tr {
        display: block;
        border: 1px solid var(--bordure);
        border-radius: var(--rayon);
        padding: 0.25rem 0;
    }

    .tableau-legal td {
        display: block;
        border: 0;
        padding: 0.4rem 0.9rem;
    }

    .tableau-legal td::before {
        content: attr(data-intitule) " — ";
        color: var(--texte);
        font-weight: 600;
    }
}

/* ——— Pied de page ——— */

.pied {
    background: var(--jade-nuit);
    color: rgb(255 255 255 / 0.75);
}

.pied__bas {
    border-top: 1px solid rgb(255 255 255 / 0.1);
}

.pied__coordonnees {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-block: 2.25rem;
}

@media (min-width: 768px) {
    .pied__coordonnees {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.pied__nom {
    font-family: var(--police-titres);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    color: #fff;
}

.pied__baseline {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: rgb(255 255 255 / 0.75);
}

.pied__contacts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    font-size: 0.875rem;
}

.pied__contacts a {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgb(255 255 255 / 0.25);
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s;
}

.pied__contacts a:hover {
    text-decoration-color: currentColor;
}

.pied__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    padding-bottom: 2.25rem;
    font-size: 0.72rem;
    color: rgb(255 255 255 / 0.75);
}

.pied__legal a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.pied__legal a:hover {
    color: #fff;
}

/* ==========================================================================
   États initiaux des animations GSAP.
   Appliqués uniquement si JS est actif (classe .gsap posée par un script
   inline dans <head>) : le site reste entièrement lisible sans JavaScript.
   Neutralisés quand l'utilisateur préfère réduire les animations.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    .gsap [data-reveal] {
        opacity: 0;
        transform: translateY(24px);
    }

    .gsap [data-reveal-groupe] > * {
        opacity: 0;
        transform: translateY(28px);
    }

    .gsap [data-hero-element] {
        opacity: 0;
        transform: translateY(28px);
    }

    .gsap [data-hero-visuel] {
        opacity: 0;
    }
}

/* Lien Instagram affiché en logo seul (footer, page contact) — zone tactile 44px */
.lien-instagram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: -11px;
    transition: opacity 0.2s;
}

.lien-instagram:hover {
    opacity: 0.7;
}

/* ——— Envoi du formulaire de contact ——— */

.bouton__spinner {
    display: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tourner 0.8s linear infinite;
}

.formulaire--envoi .bouton__spinner {
    display: inline-block;
}

.bouton--envoi:disabled {
    opacity: 0.85;
    cursor: progress;
}

.formulaire__envoi {
    margin-top: 1rem;
    color: var(--texte-doux);
    font-size: 0.9rem;
}

.formulaire__barre {
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--bordure);
}

.formulaire__barre span {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: 999px;
    background: var(--jade-nuit);
    animation: glisser 1.4s ease-in-out infinite;
}

.formulaire__envoi p {
    margin-top: 0.6rem;
}

@keyframes tourner {
    to { transform: rotate(360deg); }
}

@keyframes glisser {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

/* Message de confirmation : coche dessinée à l'arrivée */

.encart-succes__coche {
    display: block;
    margin: 0 auto 1rem;
    color: var(--jade-nuit);
}

.encart-succes__cercle,
.encart-succes__trait {
    stroke-dasharray: 190;
    stroke-dashoffset: 190;
    animation: tracer 0.7s ease-out 0.1s forwards;
}

.encart-succes__trait {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation-delay: 0.6s;
    animation-duration: 0.4s;
}

@keyframes tracer {
    to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .bouton__spinner {
        animation-duration: 2.4s;
    }

    .formulaire__barre span {
        width: 100%;
        animation: none;
    }

    .encart-succes__cercle,
    .encart-succes__trait {
        animation: none;
        stroke-dashoffset: 0;
    }
}