/* style.css - Galatée Static Website - Definitive High-Fidelity Version */

@font-face {
    font-family: 'dinregular';
    src: url('/templates/galatee_clean/fonts/din_regular-webfont.woff2') format('woff2'),
         url('/templates/galatee_clean/fonts/din_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* --- Variables --- */
:root {
    --primary-color: #552917;    /* Brown */
    --accent-color: #cea325;     /* Gold */
    --gold-border: #cda225;
    --text-color: #552917;
    --bg-color: #ffffff;
    --white: #ffffff;

    --font-main: 'Roboto', sans-serif;
    --font-heading: 'cabrito-didone-normal', serif;
    --font-noemie: 'dinregular', sans-serif;
}

/* --- Base Styles --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--bg-color);
    overflow-x: hidden;
}

h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 400;
}

a {
    color: var(--primary-color);
    text-decoration: none;
}

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

ul {
    list-style: none;
}

/* --- Layout --- */
.page-wrapper {
    position: relative;
    width: 100%;
}

/* --- Header --- */
.header-section {
    padding-top: 34px;
    background-color: var(--white);
    text-align: center;
    position: relative;
    z-index: 500;
}

.header-section .logo img {
    width: 320px;            /* taille galatee.ch (était 240) */
    margin: 0 auto;
}

.header-section .noemie {
    color: var(--accent-color);
    font-family: var(--font-noemie);
    font-size: 1.45rem;      /* ~23px comme galatee.ch */
    font-weight: 700;        /* gras comme galatee.ch (était 500) */
    margin-top: 0;           /* sous-titre collé au logo comme galatee.ch (écart 0, était 24px) */
    padding-bottom: 21px;
}

/* Hamburger */
.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.28);
    position: absolute;
    right: 20px;
    top: 20px;
    transition: transform 0.25s ease, background 0.25s ease;
}

.hamburger span {
    display: block;
    width: 23px;
    height: 3px;
    background-color: var(--white);
    border-radius: 2px;
    transition: background-color 0.25s ease, transform 0.3s ease, width 0.25s ease;
}

/* Survol (menu fermé) : le rond fonce légèrement, barres blanches qui s'écartent */
.hamburger:not(.active):hover { background: #b8901f; }
.hamburger:not(.active):hover span:nth-child(1) { transform: translateY(-2px); }
.hamburger:not(.active):hover span:nth-child(2) { width: 16px; }
.hamburger:not(.active):hover span:nth-child(3) { transform: translateY(2px); }

/* Morph : le hamburger se transforme en croix quand le menu est ouvert (et inversement) */
.hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* --- Welcome Section (Intro) --- */
.welcome-section {
    position: relative;
    background-color: var(--white);
    min-height: 760px;        /* >= hauteur de la photo (254+500) pour qu'elle ne déborde jamais sous le brun ; le texte agrandit la section si besoin */
    overflow: visible;
    margin-top: -69px; /* base (pages internes) : cale la bulle sous le logo. L'accueil est descendu via body.is-home ci-dessous. */
}

.welcome-container {
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

/* THE CIRCULAR MENU */
#menu {
    border: 2px solid var(--gold-border);
    text-align: center;
    width: 560px;        /* agrandi de 521 -> 560 (7 soins = 13 lignes) ; left/top recalés pour grandir symétriquement (centre stable) */
    height: 560px;
    border-radius: 100%;
    position: absolute;
    left: 3%;
    top: -123px;
    z-index: 600; /* au-dessus de l'en-tête (z-index 500) sinon le haut du cercle est masqué */
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

.nav-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.nav-list a {
    font-size: 20px;
    color: var(--primary-color);
    padding: 2px 0;
}

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

/* Sous-menu "Modes de paiement" : accordéon inline (comme l'original) —
   replié par défaut, se déplie en douceur au survol et pousse les items du dessous */
.sub-menu {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.3s ease, margin 0.35s ease;
}

.has-sub:hover .sub-menu,
.has-sub:focus-within .sub-menu {
    max-height: 80px;
    opacity: 1;
    margin-top: 4px;
}

.sub-menu li { display: flex; align-items: center; }

/* barre verticale dorée entre les deux sous-liens (comme l'original) */
.sub-menu li + li::before {
    content: "";
    flex: none;
    width: 1px;
    height: 18px;
    background: rgb(205, 162, 37);
}

.sub-menu a {
    font-size: 17px;
    line-height: 1.2;
    font-weight: 100;
    color: var(--primary-color);
    white-space: nowrap;
    padding: 0 18px;
}

/* LA PHOTO - au-dessus du menu (cercle), grande sur desktop */
.photoaccueil {
    position: absolute;
    left: 21%;
    top: 214px;            /* demande greg */
    width: 610px;          /* desktop (demande greg) */
    z-index: 700;          /* AU-DESSUS du menu (#menu z-index:600) */
    pointer-events: none;  /* photo décorative : sa boîte carrée (coins transparents) ne doit PAS intercepter les clics du menu en dessous (sinon « Depuis l'étranger » est incliquable, masqué par le coin de la photo) */
}

/* Desktop ÉTROIT (1200-1400px) : photo plus petite/décalée + texte ajusté pour cohabiter avec la bulle (demande greg) */
@media (min-width: 1200px) and (max-width: 1400px) {
    .photoaccueil { left: 21%; top: 430px; width: 480px; }
    #menu { top: -40px; }
}
/* Desktop moyen (~1600px) : photo un peu descendue (demande greg) */
@media (min-width: 1500px) and (max-width: 1700px) {
    .photoaccueil { top: 270px; }
}
/* PAGES INTERNES (pas l'accueil) — aux largeurs étroites desktop la bulle (gauche, jusqu'à
   ~x596) recouvre le logo centré → on recentre le logo dans l'espace à DROITE de la bulle
   (demande greg). bulle droite ≈ 3% + 560px. */
@media (min-width: 1200px) and (max-width: 1500px) {
    body.is-internal .header-section { padding-left: calc(3% + 560px); }
}

.photoaccueil img {
    border-radius: 50%;
}

/* THE WELCOME TEXT - UNDER photo */
.welcome-text {
    /* EN FLUX (pas absolute) : le texte pilote la hauteur de la section → le
       bouton/texte ne sont JAMAIS recouverts par le brun. Le texte épouse le
       cercle de la photo via shape-outside, PARFAITEMENT ALIGNÉ sur la photo
       (même origine 18% + même diamètre 686) → le texte ne passe jamais sous
       la photo, donc jamais coupé. */
    position: relative;
    /* BLOC NET à droite de la photo (plus d'enroulement shape-outside) :
       on démarre le texte après la largeur de la photo (686px) + un petit écart,
       à partir de la même origine 18% que la photo → bord gauche droit, jamais sur la photo. */
    margin-left: calc(23% + 560px + 40px);
    margin-right: 4%;
    padding-top: 190px;       /* demande greg */
    padding-bottom: 40px;
    z-index: 10;
}
.welcome-text::before {
    content: none;            /* enroulement (shape-outside) retiré : texte en bloc net à droite */
}
/* Desktop ÉTROIT (1200-1400px) : texte recalé — placé APRÈS la base pour gagner (même spécificité) */
@media (min-width: 1200px) and (max-width: 1400px) {
    .welcome-text { margin-left: calc(14% + 560px + 40px); }
}

.welcome-text h1 {
    font-size: 1.7rem;
    line-height: 1.32;
    margin-bottom: 28px;
    color: var(--accent-color);
    font-weight: 700;
    padding-left: 0;
    position: relative;
}

/* Libellule devant les titres de SOINS uniquement (pas sur "Qu'est-ce que la guidance ?" — retiré à la demande, ni accueil/"Prestations") */
.prestation-item h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 76px;
    height: 74px;
    background-image: url('/images/logo/libellule-h2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.welcome-text p {
    font-size: 1.25rem;
    margin-bottom: 21px;
}

.btn-path {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;       /* bouton CENTRÉ dans la colonne de texte (comme galatee.ch) */
    background: var(--white);
    border: 1px solid var(--accent-color);
    border-radius: 18px;
    color: var(--primary-color);
    padding: 12px 28px;
    font-weight: bold;
    font-size: 18px;
    margin-top: 13px;
    transition: all 0.3s;
}

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

/* --- Main Content (Brown) --- */
.main-content {
    background-color: var(--primary-color);
    background-image: url('/images/background/background-arr.jpg');
    background-position: center top;
    background-size: 100% auto;
    background-repeat: no-repeat;
    position: relative;
    z-index: 2;            /* brun AU-DESSUS de l'or du footer (z1) → les ronds (dans .main-content) débordent par-dessus l'or */
    margin-top: -100px; /* le brun REMONTE sous la photo (courbe haute-gauche) → la photo plonge ~25% dans le brun ; la courbe basse-droite reste sous le texte/bouton */
    padding-bottom: 144px;
}

.brown-content {
    position: relative;
    z-index: 50;
    padding-top: 250px;
}

.container-narrow {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.main-content h2 {
    color: var(--accent-color);
    font-size: 2.25rem;
    font-weight: 100;
    text-align: left;
    margin-bottom: 34px;
    position: relative;
    padding-left: 0;
}

.main-content h2#guidance {
    font-size: 1.7rem;
    padding-left: 0;          /* plus de libellule → plus d'indentation */
}

.guidance-p {
    color: var(--white);
    text-align: left;
    font-size: 1.3rem;
    font-style: italic;
    font-weight: 100;
    margin-bottom: 89px;
    line-height: 1.7;
}
/* Guidance en plusieurs paragraphes (comme galatee.ch) : espace entre chaque, pas après le dernier */
.guidance-p p { margin: 0 0 24px; }
.guidance-p p:last-child { margin-bottom: 0; }

.prestation-item {
    color: var(--white);
    margin-bottom: 89px;
    display: flex;
    flex-direction: column;
}

.prestation-item h3 {
    font-size: 1.7rem;
    color: var(--accent-color);
    font-weight: 100;
    text-align: left;
    margin-bottom: 14px;
    position: relative;
    padding-left: 100px;
    min-height: 74px;
    display: flex;
    align-items: center;
}

.prestation-item p {
    margin-bottom: 21px;
    font-size: 1.3rem;
    font-weight: 100;
    line-height: 1.7;
}

.tarif-box {
    text-align: center;
    font-weight: bold;
    font-size: 1.3rem;
    margin-top: 40px;
}

/* --- Footer Ronds --- */
.footer-ronds-section {
    background-color: transparent;   /* PAS de brun ici : sinon il masque l'or du footer ; le brun vient de .main-content (qui s'arrête à la limite), l'or vient du footer en dessous */
    box-sizing: border-box;
    /* Hauteur volontairement = padding-haut (80) + DEMI-rond (116) : la boîte de la section
       (donc le bas du brun .main-content) s'arrête au CENTRE des ronds. Les ronds (233px)
       débordent (overflow visible) sur la moitié basse → par-dessus l'or du footer (z1).
       Résultat : ronds moitié brun / moitié or, comme galatee.ch. */
    height: 196px;
    padding: 80px 0 0;
    position: relative;
}

.footer-ronds-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.rond-item {
    background-color: #ffffff;
    border: 2px solid var(--accent-color);
    border-radius: 100%;
    width: 233px;
    height: 233px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
    transition: transform 0.3s;
}

.rond-item:hover {
    transform: scale(1.05);
}

.rond-item a {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: var(--primary-color);
    line-height: 1.2;
}

/* --- Footer Bottom --- */
footer {
    background: url('/images/background/basdepage-1.jpg') center top repeat-y;
    position: relative;
    z-index: 1;            /* SOUS le brun (.main-content z2) : l'or se voit là où le brun s'arrête (sous la limite), derrière la moitié basse des ronds */
    padding: 60px 0;
    text-align: center;
}

/* Accueil : le brun s'arrête au centre des ronds, le footer crème remonte dessous
   (ronds à cheval moitié brun / moitié doré). Padding-top élargi pour que le texte
   passe SOUS la moitié basse des ronds qui débordent. */
body.is-home .welcome-section { margin-top: 10px; }   /* accueil : bulle + photo descendues sous le logo (demande greg) — sans toucher les pages internes */
body.is-home .main-content { padding-bottom: 0; }
body.is-home footer { padding-top: 150px; }   /* texte sous les ronds qui débordent de moitié (~116px) */
/* Pages internes (sans ronds) : footer court (~75px comme galatee.ch), pas besoin de place pour des ronds */
body.is-internal footer { padding: 26px 0; }

.footer-text {
    font-size: 1rem;            /* 16px comme galatee.ch */
    color: var(--primary-color);
    font-weight: 450;
}

/* --- Scroll to Top --- */
.scroll-to-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    display: none;            /* JS bascule en flex au scroll */
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    z-index: 1200;
}

.scroll-to-top .stt-label {
    color: var(--white);
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.scroll-to-top .stt-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent-color);
    color: var(--white);
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
    transition: transform 0.2s ease, background 0.2s ease;
}

.scroll-to-top:hover .stt-circle {
    transform: translateY(-2px);
    background: #b8901f;
}

.scroll-to-top .stt-circle svg { display: block; }

/* Menu mobile ouvert : masquer le bouton « haut de page » (sinon il flotte par-dessus l'overlay) */
body.menu-open .scroll-to-top { display: none !important; }

/* --- Refonte prestations (juin 2026) --- */
/* Menu : style identique à l'original (brun, Roboto fin). Liste à plat (12 liens).
   nowrap = aucun libellé ne passe sur 2 lignes (évite tout débordement vertical). */
.nav-list { gap: 10px; }
.nav-list > li > a { font-size: 23px; line-height: 1.12; font-weight: 100; color: var(--primary-color); padding: 0; display: inline-block; white-space: nowrap; text-align: center; transition: color 0.25s ease, text-shadow 0.25s ease; }
.nav-list a:hover { color: var(--accent-color); font-weight: 700; text-shadow: 0 0 9px rgba(240, 204, 85, 0.45); }   /* survol : doré + gras + halo doux (la couleur et le halo s'animent ; gras = bien visible) */

/* Ligne durée / tarif sous le titre de chaque prestation */
/* Tarif / durée : en BAS de la section, en blanc (comme l'original) */
/* Tarif/durée : poids 400 (≈ galatee.ch) — plus épais que le texte courant (poids 100)
   pour ressortir. Sélecteur volontairement plus spécifique que `.prestation-item p`
   (sinon le poids 100 du paragraphe l'emporterait et le prix se fondrait dans le texte). */
.prestation-item .prestation-meta {
    order: 99;
    text-align: left;
    color: var(--white);
    font-weight: 400;
    font-size: 1.3rem;
    margin-top: 30px;
    margin-bottom: 0;
}

.prestation-item .en-pratique { margin-top: 8px; }
.prestation-item .en-pratique strong,
.prestation-item .mise-en-garde strong { color: var(--accent-color); }
.prestation-item .mise-en-garde { font-style: italic; }
.prestation-item .placeholder { text-align: left; font-style: italic; opacity: 0.7; }

/* === Pages internes (contact, médias, bons cadeaux, modes de paiement) === */
.welcome-section.inner-page { min-height: 470px; margin-top: -60px; margin-bottom: 55px; }   /* pages internes uniquement (pas l'accueil) */
.welcome-section.inner-page #menu { top: -217px; }   /* bulle en haut-gauche (pas de photo à caler) */

.main-content.inner-main { margin-top: -404px; padding-bottom: 0; }   /* brun remonté sous le cercle (comme galatee.ch : la bulle déborde sur le brun, brun top ≈414) */

.inner-content {
    position: relative;
    z-index: 50;
    max-width: 720px;
    margin: 0 auto;
    padding: 230px 20px 130px;   /* descend le contenu sur le brun plein (sous la courbe) */
    text-align: center;
    color: var(--white);
}
.inner-content h1 {
    color: var(--accent-color);
    font-family: var(--font-heading);
    font-weight: 100;
    font-size: 2.6rem;          /* ~42px comme galatee.ch (était 2rem) */
    margin-bottom: 34px;
}
.inner-content.mdp-bons h1 { color: var(--white); }   /* « Bons cadeaux » en BLANC (galatee.ch) — les autres titres restent or */
.inner-content h2 {
    color: var(--accent-color);
    font-family: var(--font-heading);
    font-weight: 100;
    font-size: 1.7rem;
    margin: 60px 0 24px;
}
.inner-content p { font-size: 1.3rem; font-weight: 100; line-height: 1.7; margin-bottom: 18px; }
.inner-content a { color: var(--accent-color); font-weight: 400; text-decoration: none; transition: color 0.22s ease, text-shadow 0.22s ease; }
/* survol : le lien s'illumine (doré plus clair + léger halo) au lieu du soulignement */
.inner-content a:hover { text-decoration: none; color: #f0cc55; text-shadow: 0 0 9px rgba(240, 204, 85, 0.45); }
.inner-content h2 a { font-weight: 100; }
.inner-content .médias-imgs { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 30px 0; }
.inner-content .médias-imgs img { width: 220px; height: auto; border: 3px solid #fff; }
.inner-content .pdf-link { display: inline-block; margin-top: 20px; }

/* Modes de paiement : 2 ronds (Suisse / étranger) + libellule en filigrane à droite (comme galatee.ch) */
.mdp-ronds { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; margin-top: 70px; }
.inner-content .mdp-rond {
    width: 233px; height: 233px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--accent-color);
    display: flex; align-items: center; justify-content: center;
    color: var(--primary-color);
    font-family: var(--font-heading);
    font-weight: 100;
    font-size: 1.6rem; line-height: 1.2; text-align: center;
    transition: transform 0.3s;
}
.inner-content .mdp-rond:hover { transform: scale(1.05); text-decoration: none; color: var(--primary-color); text-shadow: none; }
/* libellule filigrane à droite (image libellule-15.png, semi-transparente dans le PNG) */
.mdp-libellule {
    position: absolute;
    left: 100%;            /* à droite de la colonne de texte (720px centrée) */
    margin-left: -70px;
    bottom: 89px;          /* alignée par le BAS, marge 89px — MÊME position sur toutes les pages (demande greg) */
    width: 270px; height: auto;   /* un peu réduite (demande greg) */
    pointer-events: none;
    user-select: none;
}
@media (max-width: 1199px) { .mdp-libellule { display: none; } }   /* pas de filigrane en mobile/empilé */
@media (min-width: 1500px) { .mdp-libellule { margin-left: 0; } }   /* ≥1500px : libellule recalée (demande greg) */
@media (min-width: 1800px) { .mdp-libellule { margin-left: 89px; } }   /* ≥1800px (demande greg) */

/* Pages détail paiement (Depuis la Suisse / l'étranger) : coordonnées dans un cadre bordé (comme galatee.ch) */
.inner-content .mdp-box {
    max-width: 540px;
    margin: 50px auto 0;
    border: 1px solid #fcf2d4;     /* crème comme galatee.ch */
    border-radius: 13px;
    padding: 45px 30px 38px;
    text-align: center;
}
/* Couleurs/poids EXACTEMENT comme galatee.ch : titre OR ~34px ; TOUT le reste BLANC
   (libellés blancs poids 400, valeurs blanches poids 100). PAS de doré sur les valeurs. */
.inner-content .mdp-box h2 { margin: 0 0 30px; font-size: 2.1rem; text-align: center; }   /* centré (surcharge le text-align:left de .main-content h2) */
.inner-content .mdp-box p { color: var(--white); font-size: 1.3rem; font-weight: 100; line-height: 1.6; margin: 0 0 24px; }
.inner-content .mdp-box p:last-child { margin-bottom: 0; }
.inner-content .mdp-box strong { color: var(--white); font-weight: 400; }   /* libellés blancs, poids 400 (pas 700) */
/* libellule calée au niveau du cadre sur ces pages (contenu plus haut que les ronds) */
/* Libellule au BAS du cadre (≈82-87% comme galatee.ch). top par page car les cadres ont des hauteurs différentes. */
/* Plus de top par page : la libellule est alignée par le bas (bottom:89px) → MÊME position partout. */
/* tél/mail bons cadeaux + contact : or GRAS (galatee.ch) — surcharge le font-weight:400 de .inner-content a */
.inner-content.mdp-bons strong a, .inner-content.mdp-contact strong a { font-weight: 700; white-space: nowrap; }   /* tél/mail jamais coupés au milieu */
/* Pages texte (contact/bons cadeaux) : colonne de texte ÉTROITE → le texte passe sur plusieurs
   lignes comme galatee.ch (ligne max ≈321px). Seuls les <p> sont rétrécis (titre + libellule inchangés). */
.inner-content.mdp-bons p, .inner-content.mdp-contact p { max-width: 360px; margin-left: auto; margin-right: auto; }
/* Contact = page courte : + d'espace sous le texte → brun plus haut → la libellule (alignée au bas)
   redescend sur le brun PLEIN et ne déborde plus sur le blanc à droite (demande greg). */
.inner-content.mdp-contact { padding-bottom: 233px; }

/* === Médias : galerie (couverture + 2 pages) + lien PDF + lightbox === */
.inner-content .pdf-link { margin-top: 6px; }
.gc-gallery { text-align: center; margin-top: 34px; }
.gc-gallery a { display: inline-block; cursor: zoom-in; transition: transform 0.25s ease; }
.gc-gallery a:hover { transform: scale(1.03); }
.gc-gallery img { display: block; border: 4px solid #fff; box-shadow: 0 8px 26px rgba(0,0,0,0.35); }
.gc-cover img { width: 330px; max-width: 86%; margin: 0 auto; }
.gc-pages { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 22px; }
.gc-pages img { width: 270px; max-width: 42vw; }

/* Lightbox (popup) */
.gc-lightbox-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.88);
    display: none; align-items: center; justify-content: center;
    z-index: 2000; padding: 30px; cursor: zoom-out;
}
.gc-lightbox-overlay.open { display: flex; }
.gc-lightbox-overlay img { max-width: 94vw; max-height: 92vh; border: 5px solid #fff; box-shadow: 0 14px 50px rgba(0,0,0,0.6); }
.gc-lightbox-close {
    position: fixed; top: 14px; right: 26px;
    background: none; border: 0; color: #fff; font-size: 46px; line-height: 1;
    cursor: pointer; z-index: 2001; opacity: 0.85;
}
.gc-lightbox-close:hover { opacity: 1; }
body.lb-open { overflow: hidden; }   /* fige le scroll quand le popup est ouvert */
.gc-lightbox-overlay img { cursor: none; }   /* pas de curseur en croix sur l'image : seule la loupe est visible */
/* Loupe (agrandissement) : lentille circulaire qui suit la souris / le doigt */
.gc-loupe {
    position: fixed;
    width: 400px; height: 280px;   /* rectangulaire, ≈ largeur d'une colonne (demi-page) */
    border-radius: 10px;
    border: 3px solid #fff;
    box-shadow: 0 6px 26px rgba(0,0,0,0.55);
    background-repeat: no-repeat;
    pointer-events: none;
    display: none;
    z-index: 2002;
}
@media (max-width: 600px) { .gc-loupe { width: 280px; height: 200px; } }

/* Éléments visibles UNIQUEMENT dans l'overlay mobile (cachés sur le cercle desktop) */
.menu-close, .menu-brand, .menu-coords { display: none; }

/* --- Responsive --- (bascule à 1400px comme galatee.ch : en dessous, photo
   centrée + texte empilé + menu hamburger ; au-dessus, cercle + photo côte à côte) */
@media (max-width: 1199px) {
    /* hamburger fixe et AU-DESSUS de l'overlay : il reste visible et se morph en croix */
    .hamburger { display: flex; position: fixed; top: 20px; right: 20px; z-index: 1100; }
    #menu {
        position: fixed; top: 0; left: -100%; width: 100%; height: 100%;
        border: none; border-radius: 0; z-index: 1000; transition: left 0.3s; margin: 0;
        background: #fff; box-shadow: none;
        display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
        padding: 26px 16px 28px; overflow-y: auto;
        scrollbar-width: none;        /* Firefox : pas d'ascenseur visible */
        -ms-overflow-style: none;     /* IE/Edge legacy */
    }
    #menu::-webkit-scrollbar { width: 0; height: 0; display: none; }   /* Chrome/Safari : pas d'ascenseur visible */
    /* menu ouvert : verrouiller le scroll de la page derrière l'overlay (sinon l'ascenseur de la page reste visible à droite) */
    body.menu-open { overflow: hidden; }
    #menu.active { left: 0; }
    /* pages internes : neutraliser le top:-217px (bulle desktop) -> overlay plein écran identique à l'accueil */
    .welcome-section.inner-page #menu { top: 0; }

    /* Effet d'apparition du contenu du menu à l'ouverture (fondu + glissé) */
    #menu .menu-brand, #menu nav, #menu .menu-coords {
        opacity: 0; transform: translateY(14px);
        transition: opacity 0.45s ease, transform 0.45s ease;
    }
    #menu.active .menu-brand { opacity: 1; transform: none; transition-delay: 0.08s; }
    #menu.active nav         { opacity: 1; transform: none; transition-delay: 0.16s; }
    #menu.active .menu-coords{ opacity: 1; transform: none; transition-delay: 0.26s; }

    /* Survol des liens : léger décalage doré */
    .nav-list > li > a { transition: color 0.2s ease, letter-spacing 0.2s ease; }
    .nav-list > li > a:hover { letter-spacing: 0.4px; }

    /* logo + nom en haut de l'overlay */
    .menu-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 4px 0 22px; }
    .menu-brand img { width: 120px; height: auto; }
    .menu-brand .noemie { color: var(--accent-color); font-family: var(--font-noemie); font-weight: 500; font-size: 1.3rem; }

    /* liens du menu */
    .nav-list { gap: 3px; }
    .nav-list > li > a { font-size: 21px; line-height: 1.18; max-width: 92vw; white-space: normal; }
    .sub-menu a { font-size: 16px; padding: 0 14px; }

    /* coordonnées sous les liens */
    .menu-coords {
        display: block; margin: 24px auto 0; text-align: center;
        font-size: 1rem; line-height: 1.8; color: var(--primary-color);
    }
    .menu-coords strong { color: var(--accent-color); font-weight: 500; }
    .menu-coords a { color: var(--primary-color); }
    .menu-coords a:hover { color: var(--accent-color); }
    .photoaccueil { position: static; margin: 20px auto; width: 100%; max-width: 420px; }
    .welcome-text { position: static; left: auto; right: auto; top: auto; width: auto; max-width: 760px; margin: 24px auto 0; text-align: center; padding: 0 20px 40px; }
    .welcome-text::before { display: none; }   /* pas de shape-outside en empilé */
    .welcome-section { min-height: auto; margin-top: 20px; }   /* annule le -110px desktop : pas de remontée sous le logo */
    /* le brun démarre SOUS le contenu d'accueil : ni la photo, ni le texte, ni le bouton ne sont coupés */
    .main-content { margin-top: 0; }
    /* La courbe (background-arr.jpg, ratio 0.363) GRANDIT avec la largeur : à ~1300px elle
       fait ~470px de haut et son creux blanc à droite descend jusqu'à ~0.245×largeur. Avec
       un padding-top fixe (120px) le texte de guidance démarrait DANS le blanc à droite
       (débordement signalé par greg). → padding-top qui suit la largeur pour toujours passer
       sous le creux de la courbe. clamp : min 110px (petit mobile), 26vw, max 360px. */
    .brown-content { padding-top: clamp(110px, 26vw, 360px); }
    .welcome-text h1 { padding-left: 0; }
    .welcome-text h1::before { display: none; }
    /* libellule devant les titres (guidance + soins) : version réduite, proportionnée au texte */
    .main-content h2#guidance { padding-left: 0; min-height: 0; }
    .main-content h2#guidance::before { display: none; }   /* pas de libellule sur le titre « guidance » en mobile */
    .prestation-item h3 { padding-left: 0; min-height: 0; gap: 8px; align-items: flex-start; line-height: 38px; }
    .prestation-item h3::before {
        display: block; position: static; transform: none;
        width: 34px; height: 33px; margin: 8px 0 0; flex: 0 0 auto;
    }
    /* PAGES INTERNES — contenu remonté dans le brun : le padding-top:230 desktop est
       prévu pour le débord de la bulle sur le brun ; en empilé la bulle est en overlay,
       ce vide n'a plus lieu d'être → contenu trop bas. On le réduit + on allège le bas. */
    .inner-content { padding-top: 116px; padding-bottom: 90px; }
    .inner-content.mdp-contact { padding-bottom: 90px; }
    .inner-content h1 { font-size: 2.25rem; }   /* titres un poil plus petits en mobile */
    /* (footer ronds : voir blocs dédiés plus bas — 1 ligne de 4 entre 1000-1400px, 2×2 en dessous) */
}

/* FOOTER RONDS 1000-1400px — 4 cercles sur UNE seule ligne (demande greg).
   ronds 200px + gap 40 = 920px → tiennent à partir de 1000px (container ≥960). Hauteur de
   section = padding(80) + demi-rond(100) = 180 → le brun s'arrête au CENTRE des ronds, ils
   débordent de moitié sur l'or (chevauchement brun/or, comme le desktop). */
@media (min-width: 1000px) and (max-width: 1199px) {
    .rond-item { width: 200px; height: 200px; }
    .footer-ronds-section { height: 180px; }
    body.is-home footer { padding-top: 130px; }   /* texte sous la moitié basse des ronds */
    /* PAGES INTERNES (sauf accueil) : descendre le contenu dans le brun (demande greg).
       En empilé le padding-top était réduit à 116px (bien pour mobile) mais trop haut dès
       1000px où la courbe est plus grande → contenu collé en haut. On le descend, en suivant
       la largeur. N'affecte PAS l'accueil (.inner-content = pages internes). */
    .inner-content { padding-top: clamp(150px, 16vw, 230px); }
    /* Courbe APLATIE (moins arrondie) — accueil ET pages internes (demande greg) — sinon,
       contenu descendu + courbe haute (0.363×largeur) = trop de vide brun en haut. On cape
       la hauteur de la courbe → transition blanc→brun plus plate, moins de vide. */
    .main-content { background-size: 100% 220px; }
    /* Accueil : contenu (guidance) remonté pour réduire le vide, tout en restant sous la
       courbe aplatie (creux à droite ≈0.68×220 ≈150px → padding ≥165 dégage les longues lignes). */
    .brown-content { padding-top: clamp(165px, 17vw, 240px); }

/* FOOTER RONDS ≤999px — 4 ronds ne tiennent plus sur 1 ligne → 2×2 net.
   max-width container = 2 ronds + gap → exactement 2 par rangée. Hauteur de section =
   padding(80) + rangée1(200) + gap(40) + demi-rond(100) = 420 → brun s'arrête au centre
   de la rangée du bas (chevauchement conservé). */
@media (max-width: 999px) {
    .footer-ronds-container { max-width: 480px; gap: 40px; }
    .rond-item { width: 200px; height: 200px; }
    .footer-ronds-section { height: 420px; }
    body.is-home footer { padding-top: 140px; }
}

@media (max-width: 600px) {
    .header-section .logo img { width: 190px; }
    .header-section .noemie { font-size: 1.2rem; margin-top: 14px; }
    .photoaccueil { max-width: 280px; }
    .rond-item { width: 150px; height: 150px; padding: 16px; }
    .rond-item a { font-size: 1.2rem; }
    .footer-ronds-container { gap: 18px; }
    /* Grille 2×2 (ronds 150px, gap 18). La boîte brune s'arrête au CENTRE de la
       rangée du BAS : hauteur = padding(80) + rangée1(150) + gap(18) + demi-rond(75) = 323. */
    .footer-ronds-section { height: 323px; }
    body.is-home footer { padding-top: 110px; }
}

/* MODE HAMBURGER (≤1400px) : pas de bouton « haut de page » (demande greg, choix confirmé).
   Le bouton n'apparaît qu'en desktop large (>1400px, menu en bulle) ; partout où le
   hamburger est affiché (téléphone, tablette, portable) il est masqué.
   !important pour battre le display:flex inline posé par le JS au scroll. */
@media (max-width: 1199px) {
    .scroll-to-top { display: none !important; }
}