/* ============================================================
   SO'BÔHÈME — Feuille de style
   Palette : #FDFAF7 · #8E7D6D · #4A3F35 · #12100E
   Typographie : Playfair Display (titres) · Inter (corps)
   ============================================================ */

/* ------------------------------------------------------------
   1. FONTS LOCALES (fallback si Google Fonts indisponible)
   ------------------------------------------------------------ */
@font-face {
    font-family: 'Playfair Display';
    src: url('images/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('images/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}


/* ------------------------------------------------------------
   2. DESIGN TOKENS — Variables CSS
   ------------------------------------------------------------ */
:root {
    /* Palette stricte */
    --beige:      #FDFAF7;   /* Fond principal */
    --taupe:      #8E7D6D;   /* Accent / sous-titres */
    --brun:       #4A3F35;   /* Texte principal */
    --noir:       #12100E;   /* Texte fort / fond footer */

    /* Dérivés calculés */
    --beige-warm: #F4EDE3;   /* Fond section alternée */
    --taupe-light:#C4B5A7;   /* Bordures légères */
    --taupe-xlt:  rgba(142,125,109,0.12); /* Survols très légers */
    --brun-light: #7A6B5E;   /* Texte secondaire */

    /* Thème actif (clair par défaut) */
    --bg:           var(--beige);
    --bg-alt:       var(--beige-warm);
    --txt:          var(--brun);
    --txt-muted:    var(--brun-light);
    --border:       var(--taupe-light);
    --card:         #FFFFFF;
    --header-bg:    rgba(253,250,247,0.88);
    --header-border:rgba(142,125,109,0.2);
    --footer-bg:    var(--noir);

    /* Espacement & Rayon */
    --r-sm:   8px;
    --r:      14px;
    --r-lg:   22px;
    --r-xl:   32px;

    /* Ombres */
    --shadow-xs: 0 1px 4px rgba(18,16,14,0.06);
    --shadow-sm: 0 4px 16px rgba(18,16,14,0.08);
    --shadow:    0 8px 32px rgba(18,16,14,0.10);
    --shadow-lg: 0 20px 56px rgba(18,16,14,0.14);

    /* Transitions */
    --ease:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out:  cubic-bezier(0.0, 0.0, 0.2, 1);
}

/* Thème sombre — déclenchement automatique ou manuel */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:            #0F0D0B;
        --bg-alt:        #1A1714;
        --txt:           #F0E8DE;
        --txt-muted:     #9C8B7B;
        --border:        rgba(142,125,109,0.2);
        --card:          #1E1B18;
        --header-bg:     rgba(15,13,11,0.90);
        --header-border: rgba(142,125,109,0.18);
        --taupe-xlt:     rgba(142,125,109,0.10);
        --shadow-sm:     0 4px 16px rgba(0,0,0,0.35);
        --shadow:        0 8px 32px rgba(0,0,0,0.45);
        --shadow-lg:     0 20px 56px rgba(0,0,0,0.55);
    }
}
[data-theme="dark"] {
    --bg:            #0F0D0B;
    --bg-alt:        #1A1714;
    --txt:           #F0E8DE;
    --txt-muted:     #9C8B7B;
    --border:        rgba(142,125,109,0.2);
    --card:          #1E1B18;
    --header-bg:     rgba(15,13,11,0.90);
    --header-border: rgba(142,125,109,0.18);
    --taupe-xlt:     rgba(142,125,109,0.10);
    --shadow-sm:     0 4px 16px rgba(0,0,0,0.35);
    --shadow:        0 8px 32px rgba(0,0,0,0.45);
    --shadow-lg:     0 20px 56px rgba(0,0,0,0.55);
}
[data-theme="light"] {
    --bg:            var(--beige);
    --bg-alt:        var(--beige-warm);
    --txt:           var(--brun);
    --txt-muted:     var(--brun-light);
    --border:        var(--taupe-light);
    --card:          #FFFFFF;
    --header-bg:     rgba(253,250,247,0.88);
    --header-border: rgba(142,125,109,0.2);
    --taupe-xlt:     rgba(142,125,109,0.12);
}


/* ------------------------------------------------------------
   3. RESET GLOBAL
   ------------------------------------------------------------ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

html, body {
    overflow-x: hidden;
    width: 100%;
}

body {
    background: var(--bg);
    color: var(--txt);
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    min-height: 100vh;
    transition: background 0.4s ease, color 0.4s ease;
    /* Curseur système — aucun curseur personnalisé */
    cursor: default;
}

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

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

button {
    cursor: pointer;
    font-family: inherit;
}

::selection {
    background: var(--taupe);
    color: #fff;
}


/* ------------------------------------------------------------
   4. TYPOGRAPHIE — classes utilitaires
   ------------------------------------------------------------ */

/* Titres : Playfair Display */
.section-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--taupe);
    margin-bottom: 10px;
}

.section-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--txt);
    line-height: 1.1;
    margin-bottom: 16px;
}

.section-sub {
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    font-style: italic;
    color: var(--txt-muted);
    line-height: 1.75;
    max-width: 500px;
    margin: 0 auto;
}

/* En-tête de section centré */
.section-header {
    text-align: center;
    margin-bottom: 56px;
}

/* Conteneur commun */
.section-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}


/* ------------------------------------------------------------
   5. ANIMATIONS — SCROLL REVEAL (fade-up)
   ------------------------------------------------------------ */

/* Reveal au scroll via IntersectionObserver */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade-up héro (déclenché au chargement) */
.fade-up {
    opacity: 0;
    transform: translateY(18px);
    animation: fadeUpIn 0.9s var(--ease) forwards;
    animation-delay: var(--delay, 0s);
}

@keyframes fadeUpIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Délais progressifs pour enfants d'une grille */
.reveal.visible .link-row:nth-child(1),
.reveal .link-row:nth-child(1) { transition-delay: 0ms; }
.reveal.visible .link-row:nth-child(2),
.reveal .link-row:nth-child(2) { transition-delay: 70ms; }
.reveal.visible .link-row:nth-child(3),
.reveal .link-row:nth-child(3) { transition-delay: 140ms; }
.reveal.visible .link-row:nth-child(4),
.reveal .link-row:nth-child(4) { transition-delay: 210ms; }


/* ------------------------------------------------------------
   6. HEADER — STICKY GLASSMORPHISM
   ------------------------------------------------------------ */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    padding: 0 28px;
    transform: translateY(0);
    transition: transform 0.45s var(--ease-out), background 0.4s ease, box-shadow 0.4s ease;
}

/* État scrollé : fond flou */
.site-header.scrolled {
    background: var(--header-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--header-border);
    box-shadow: var(--shadow-xs);
}

/* Masqué en descente */
.site-header.hidden {
    transform: translateY(-110%);
}

.header-inner {
    max-width: 100%;       
    padding: 10px 0px;    /* 10px en haut/bas (plus épais) et 50px sur les côtés */
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;   
}

@media (min-width: 861px) {
    .header-nav {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 30px;         
    }
}

.header-logo img {
    height: 50px; 
    width: auto;
}

/* Logo */
.header-logo {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--txt);
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 0.25s ease;
}

.site-header:not(.scrolled) .header-logo {
    color: rgba(255,255,255,0.92);
}

.header-logo:hover { color: var(--taupe); }
.site-header:not(.scrolled) .header-logo:hover { color: rgba(255,255,255,0.7); }

/* Navigation desktop */
.header-nav {
    display: flex;
    gap: 2px;
    align-items: center;
}

.nav-link {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--txt);
    padding: 8px 14px;
    border-radius: 20px;
    transition: background 0.22s ease, color 0.22s ease;
}

.site-header:not(.scrolled) .nav-link { color: rgba(255,255,255,0.82); }

.nav-link:hover {
    background: var(--taupe-xlt);
    color: var(--txt);
}

.site-header:not(.scrolled) .nav-link:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

/* Bouton thème */
.header-actions { display: flex; align-items: center; gap: 10px; }

#theme-btn {
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid var(--header-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.22s ease, border-color 0.22s ease;
}

#theme-btn:hover { background: var(--taupe-xlt); }

#theme-btn svg {
    width: 17px;
    height: 17px;
    stroke: var(--txt);
    transition: stroke 0.25s ease;
}

.site-header:not(.scrolled) #theme-btn { border-color: rgba(255,255,255,0.35); }
.site-header:not(.scrolled) #theme-btn svg { stroke: rgba(255,255,255,0.88); }

/* Burger mobile */
.burger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
}

.burger-btn span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--txt);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
}

.site-header:not(.scrolled) .burger-btn span { background: rgba(255,255,255,0.9); }

.burger-btn.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger-btn.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger-btn.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 860px) {
    .header-nav  { display: none; }
    .burger-btn  { display: flex; }
}


/* ------------------------------------------------------------
   7. MENU MOBILE PLEIN ÉCRAN
   ------------------------------------------------------------ */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 850;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transform: translateY(-100%);
    transition: transform 0.55s var(--ease-out);
}

.mobile-menu.open { transform: translateY(0); }

.mobile-menu a {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.8rem, 6vw, 2.5rem);
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--txt);
    padding: 10px 30px;
    transition: color 0.2s ease;
}

.mobile-menu a:hover { color: var(--taupe); }


/* ------------------------------------------------------------
   8. HERO — PLEIN ÉCRAN CENTRÉ
   ------------------------------------------------------------ */
.hero {
    position: relative;
    width: 100%;
    height: var(--hero-height, 100vh); 
    min-height: 580px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Fond video / image */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Voile sombre pour lisibilité */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(18,16,14,0.32) 0%,
        rgba(18,16,14,0.52) 55%,
        rgba(18,16,14,0.72) 100%
    );
}

/* Contenu hero — centrage parfait */
.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    color: #fff;
    padding: 0 24px;
    width: 100%;
    max-width: 820px;

    /* Centrage absolu horizontal + vertical */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 0.70rem;
    font-weight: 500;
    letter-spacing: 5px;
    text-transform: uppercase;
    opacity: 0.70;
    margin-bottom: 18px;
}

.hero-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(3.2rem, 12vw, 9rem);
    font-weight: 700;
    letter-spacing: clamp(6px, 2.5vw, 24px);
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 18px;
    /* Texte blanc pur sur tous les fonds */
    color: var(--beige);
    text-shadow: 0 2px 24px rgba(18,16,14,0.4);
}

.hero-rule {
    font-size: 0.6rem;
    letter-spacing: 4px;
    color: var(--taupe-light);
    margin-bottom: 16px;
}

.hero-tagline {
    font-family: 'Playfair Display', serif;
    font-size: clamp(0.82rem, 2vw, 1rem);
    font-style: italic;
    font-weight: 300;
    opacity: 0.82;
    letter-spacing: 1px;
    margin-bottom: 44px;
}

/* CTA "Découvrir" — minimaliste */
.hero-cta {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    transition: color 0.25s ease, transform 0.3s ease;
    cursor: pointer;
}

.hero-cta:hover { color: #fff; transform: translateY(5px); }

.hero-cta-arrow {
    font-size: 1.1rem;
    animation: arrowBounce 2.4s ease-in-out infinite;
}

@keyframes arrowBounce {
    0%, 100% { transform: translateY(0); opacity: 0.75; }
    50%       { transform: translateY(7px); opacity: 1; }
}

/* Indicateur de scroll latéral */
.scroll-indicator {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.scroll-track {
    width: 1px;
    height: 56px;
    background: rgba(255,255,255,0.2);
    overflow: hidden;
}

.scroll-thumb {
    width: 100%;
    height: 40%;
    background: rgba(255,255,255,0.7);
    animation: scrollThumb 2.2s ease-in-out infinite;
}

@keyframes scrollThumb {
    0%   { transform: translateY(-100%); opacity: 0; }
    30%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(250%); opacity: 0; }
}


/* ------------------------------------------------------------
   9. GALERIE IMMERSIVE — FORMAT MAGAZINE
   ------------------------------------------------------------ */
.section-galerie {
    padding: 100px 0 80px;
    background: var(--bg);
}

.mag-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Rangée featured : 1 grand + 2 petits empilés */
.mag-row--featured {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 14px;
    align-items: stretch;
}

.mag-row--featured.mag-row--reverse {
    grid-template-columns: 1fr 1.45fr;
}

/* Colonne de 2 images empilées */
.mag-col-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Rangée trio : 3 images égales */
.mag-row--trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

/* Item générique */
.mag-item {
    overflow: hidden;
    border-radius: var(--r);
    background: var(--bg-alt);
    cursor: pointer;
    position: relative;
}

/* Portrait : ratio 3/4 */
.mag-item--portrait .mag-img-wrap { padding-top: 133%; }

/* Paysage / carré par défaut */
.mag-img-wrap {
    position: relative;
    width: 100%;
    padding-top: 75%; /* ratio 4/3 */
    overflow: hidden;
}

.mag-col-stack .mag-item .mag-img-wrap { padding-top: 100%; } /* carré */

.mag-img-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    object-fit: cover; 
    
    object-position: center; 

    transition: transform 0.65s var(--ease), filter 0.4s ease;
    will-change: transform;
    
}

.mag-item:hover .mag-img-wrap img {
    transform: scale(1.06);
}

/* Overlay au survol */
.mag-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18,16,14,0.30);
    opacity: 0;
    transition: opacity 0.35s ease;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 300;
}

.mag-item:hover .mag-overlay { opacity: 1; }

/* Citation éditoriale entre les rangées */
.mag-quote {
    text-align: center;
    padding: 48px 24px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin: 24px 0;
}

.mag-quote p {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    font-style: italic;
    font-weight: 300;
    color: var(--txt);
    line-height: 1.7;
    margin-bottom: 14px;
}

.mag-quote cite {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--taupe);
    font-style: normal;
    font-weight: 500;
}

/* Mobile : grilles simplifiées */
@media (max-width: 640px) {
    .mag-row--featured,
    .mag-row--featured.mag-row--reverse {
        grid-template-columns: 1fr;
    }
    .mag-item--portrait .mag-img-wrap { padding-top: 75%; }
    .mag-row--trio { grid-template-columns: 1fr 1fr; }
    .mag-row--trio .mag-item:last-child { display: none; }
}


/* ------------------------------------------------------------
   10. L'ESPRIT — STORYTELLING AVEC PARALLAX LÉGER
   ------------------------------------------------------------ */
.section-esprit {
    padding: 110px 0;
    background: var(--bg-alt);
    overflow: hidden;
}

.esprit-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 90px;
}

.esprit-block:last-child { margin-bottom: 0; }

@media (min-width: 768px) {
    .esprit-block { grid-template-columns: 1fr 1fr; gap: 80px; }
    .esprit-block--reverse .esprit-img-wrap { order: -1; }
}

.esprit-text {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.esprit-heading {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 3.8vw, 3rem);
    font-weight: 700;
    line-height: 1.22;
    color: var(--txt);
    letter-spacing: 0.5px;
}

.esprit-heading em {
    font-style: italic;
    font-weight: 400;
    color: var(--taupe);
}

.esprit-body {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.85;
    color: var(--txt-muted);
}

.esprit-signature {
    font-family: 'Playfair Display', serif;
    font-size: 0.88rem;
    font-style: italic;
    color: var(--taupe);
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.esprit-img-wrap {
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    will-change: transform;
    transition: transform 0.3s var(--ease);
}

.esprit-img-wrap:hover { transform: scale(1.015); }

.esprit-img-wrap img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    display: block;
    transition: transform 0.65s var(--ease);
}

.esprit-img-wrap:hover img { transform: scale(1.05); }


/* ------------------------------------------------------------
   11. LIENS / CONTACTS — Rangées minimalistes
   ------------------------------------------------------------ */
.section-links, .section-contact {
    padding: 100px 0;
}

.section-links  { background: var(--bg); }
.section-contact{ background: var(--bg-alt); }

.links-grid {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border);
}

/* Rangée lien unique */
.link-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--txt);
    transition: background 0.2s ease, padding-left 0.25s ease;
    cursor: pointer;
}

.link-row:hover {
    background: var(--taupe-xlt);
    padding-left: 20px;
}

.link-row-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    min-width: 160px;
    color: var(--txt);
}

.link-row-desc {
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    color: var(--txt-muted);
    font-style: italic;
    flex: 1;
}

.link-row-arrow {
    font-size: 1rem;
    color: var(--taupe);
    flex-shrink: 0;
    margin-left: auto;
    transition: transform 0.2s ease;
}

.link-row:hover .link-row-arrow { transform: translateX(4px); }

@media (max-width: 500px) {
    .link-row { flex-wrap: wrap; gap: 4px; }
    .link-row-name { min-width: unset; width: 100%; }
    .link-row-desc { width: 100%; }
}


/* ------------------------------------------------------------
   12. INFOS — HORAIRES, AVIS, CARTE
   ------------------------------------------------------------ */
.section-infos {
    padding: 100px 0;
    background: var(--bg);
}

/* Grille 2 colonnes */
.infos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 40px;
}

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

/* Carte info générique */
.info-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 36px 32px;
    box-shadow: var(--shadow-xs);
}

.info-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 26px;
}

.info-card-title {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--txt);
}

/* Badge statut ouvert/fermé — Vert Sauge */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg-alt);
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--txt-muted);
    transition: all 0.3s ease;
}

.status-pill.open {
    border-color: rgba(135, 169, 107, 0.4);
    background: rgba(135, 169, 107, 0.08);
    color: #6b8e51;
}

[data-theme="dark"] .status-pill.open { 
    color: #a3c58b; 
    border-color: rgba(163, 197, 139, 0.3);
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--taupe-light);
    transition: background 0.3s ease;
    flex-shrink: 0;
}

.status-pill.open .status-dot {
    background: #87a96b;
    box-shadow: 0 0 0 3px rgba(135, 169, 107, 0.2);
    animation: dotPulse 2.2s infinite;
}

@keyframes dotPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(135, 169, 107, 0.2); }
    50%       { box-shadow: 0 0 0 6px rgba(135, 169, 107, 0.1); }
}

/* Tableau des horaires  */
.schedule-table {
    width: 100%;
    border-collapse: collapse;
}

.schedule-table tr {
    border-bottom: 1px solid var(--border);
    transition: all 0.2s ease;
}

.schedule-table tr:hover { 
    background: var(--taupe-xlt); 
}

.schedule-table td {
    padding: 16px 8px; /* Espacement vertical augmenté et constant */
    font-family: 'Inter', sans-serif;
}

.day-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--txt);
    width: 110px; /* Fixe l'alignement des horaires */
}

.day-hours {
    font-size: 0.82rem;
    color: var(--txt-muted);
    font-style: italic;
    text-align: right;
    white-space: nowrap; /* Pas de retour à la ligne */
}

/* --- MISE EN AVANT DU JOUR ACTUEL --- */
.schedule-table tr.is-today {
    background: rgba(142, 125, 109, 0.08); /* Fond léger taupe */
    border-left: 3px solid var(--taupe); /* Barre sur le côté */
}

.schedule-table tr.is-today .day-name {
    font-weight: 800; /* Texte bien gras */
    color: var(--taupe);
    padding-left: 12px; /* Petit décalage pour la barre */
}

.schedule-table tr.is-today .day-hours {
    font-weight: 600;
    color: var(--txt);
}

/* Dimanche fermé */
.schedule-table tr.row-closed { 
    opacity: 0.45; 
}

/* Prochaine ouverture */
.next-opening {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: var(--txt-muted);
    font-style: italic;
    margin-top: 16px;
    padding-top: 16px;
    min-height: 20px;
}

/* ---- Carte Avis ---- */
.avis-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

/* Suppression du filet doré */
.avis-card::before {
    display: none;
}

/* ÉTOILES AU MILIEU  */
.avis-stars {
    display: block;
    text-align: center;
    width: 100%;
    font-size: 1.6rem; 
    letter-spacing: 6px;
    margin-right: -6px; 
    color: #C9A44A;
    transition: opacity 0.3s ease;
}

.avis-stars:hover {
    opacity: 0.7;
}

.avis-heading {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--txt);
    margin-bottom: -8px;
    text-align: left;
}

.avis-body {
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    line-height: 1.72;
    color: var(--txt-muted);
    text-align: left;
}

.avis-quote {
    font-family: 'Playfair Display', serif;
    font-size: 0.95rem;
    font-style: italic;
    font-weight: 400;
    color: var(--txt);
    line-height: 1.65;
    border-left: 2px solid var(--taupe);
    padding-left: 18px;
    margin: 4px 0;
    text-align: left;
}

/* ---- Boutons (Avis Google & Autres) ---- */
.btn-solid {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--brun);
    color: #fff;
    border: none;
    padding: 13px 26px;
    border-radius: var(--r-xl);
    font-family: 'Inter', sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
    align-self: flex-start;
    text-decoration: none;
}

.btn-solid:hover {
    background: var(--taupe);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(74,63,53,0.22);
}

[data-theme="dark"] .btn-solid { 
    background: var(--beige); 
    color: var(--noir); 
}

[data-theme="dark"] .btn-solid:hover { 
    background: var(--taupe-light); 
    color: var(--noir); 
}


/* ---- Google Maps ---- */
.map-wrap { margin-top: 12px; }

.map-address {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--txt-muted);
    padding: 14px 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--r) var(--r) 0 0;
}

.map-frame {
    border-radius: 0 0 var(--r) var(--r);
    overflow: hidden;
    border: 1px solid var(--border);
    line-height: 0;
}

.map-frame iframe {
    width: 100%;
    height: 380px;
    border: none;
    display: block;
    transition: filter 0.5s ease;
    /* Carte légèrement désaturée en mode clair */
    filter: grayscale(0.25) contrast(0.95);
}

/* Carte en mode sombre : inversion complète pour cohérence visuelle */
[data-theme="dark"] .map-frame iframe {
    filter: invert(1) hue-rotate(180deg) brightness(0.88) contrast(0.92) grayscale(0.3);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .map-frame iframe {
        filter: invert(1) hue-rotate(180deg) brightness(0.88) contrast(0.92) grayscale(0.3);
    }
}


/* ------------------------------------------------------------
   13. FOOTER
   ------------------------------------------------------------ */
.site-footer {
    background: var(--noir);
    color: rgba(240,232,222,0.75);
    padding: 80px 28px 0;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    padding-bottom: 64px;
}

@media (min-width: 768px) {
    .footer-inner { grid-template-columns: 1.6fr 1fr 1.4fr; gap: 60px; }
}

/* Marque */
.footer-logo {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--beige);
    margin-bottom: 12px;
}

.footer-sub {
    font-family: 'Inter', sans-serif;
    font-size: 0.83rem;
    font-style: italic;
    line-height: 1.8;
    opacity: 0.55;
    margin-bottom: 22px;
}

.footer-social {
    display: flex;
    gap: 10px;
}

.footer-social a {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(253,250,247,0.18);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(240,232,222,0.65);
    transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.footer-social a:hover {
    border-color: var(--taupe);
    color: var(--taupe-light);
    transform: translateY(-3px);
}

.footer-social svg { width: 16px; height: 16px; }

/* Colonnes liens */
.footer-col-title {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--taupe);
    font-weight: 600;
    margin-bottom: 20px;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-col a {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: rgba(240,232,222,0.6);
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-block;
}

.footer-col a:hover { color: rgba(240,232,222,0.95); transform: translateX(4px); }

.footer-col-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    line-height: 1.7;
    opacity: 0.5;
    font-style: italic;
}

/* Barre de bas de page */
.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding: 22px 0;
    border-top: 1px solid rgba(253,250,247,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.70rem;
    opacity: 0.38;
    letter-spacing: 0.5px;
}

.footer-bottom a { transition: opacity 0.2s ease; }
.footer-bottom a:hover { opacity: 2; } /* hack pour "enlever" l'opacité parent */


/* ------------------------------------------------------------
   14. LIGHTBOX
   ------------------------------------------------------------ */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(18,16,14,0.92);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    cursor: default;
}

.lightbox.open {
    opacity: 1;
    pointer-events: all;
}

.lightbox img {
    max-width: min(90vw, 820px);
    max-height: 88dvh;
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
    transform: scale(0.96);
    transition: transform 0.4s var(--ease);
    cursor: default;
}

.lightbox.open img { transform: scale(1); }

.lightbox-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(253,250,247,0.12);
    border: 1px solid rgba(253,250,247,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: background 0.22s ease;
}

.lightbox-close:hover { background: rgba(253,250,247,0.22); }
.lightbox-close svg { width: 18px; height: 18px; }


/* ------------------------------------------------------------
   15. RESPONSIVE SUPPLÉMENTAIRE
   ------------------------------------------------------------ */

/* Tablette */
@media (max-width: 768px) {
    .section-galerie,
    .section-esprit,
    .section-links,
    .section-contact,
    .section-infos  { padding: 72px 0; }

    .section-header { margin-bottom: 44px; }
    .info-card { padding: 28px 22px; }
}

/* Mobile */
@media (max-width: 480px) {
    .section-galerie,
    .section-esprit,
    .section-links,
    .section-contact,
    .section-infos  { padding: 56px 0; }

    .hero-title      { letter-spacing: 4px; }
    .footer-bottom   { flex-direction: column; text-align: center; }
    .link-row-name   { font-size: 0.95rem; }
}

/* Accessibilité — mouvements réduits */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
    .fade-up { animation: none; opacity: 1; transform: none; }
    .reveal  { opacity: 1; transform: none; }
    .scroll-thumb, .hero-cta-arrow { animation: none; }
}

/* --- Section Réseaux Sociaux (Style SO'BÔHÈME) --- */

.footer-social {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.footer-social a {
    display: flex;          /* Pour le centrage */
    align-items: center;    /* Centre l'icône verticalement */
    justify-content: center; /* Centre l'icône horizontalement */
    
    width: 45px;            /* Taille du cercle adaptée au design */
    height: 45px;
    
    border: 1px solid rgba(244, 241, 234, 0.3); /* Bordure discrète */
    border-radius: 50%;
    
    color: var(--sand-color, #A39588); 
    transition: all 0.3s ease;
    text-decoration: none;
}

.footer-social a svg {
    width: 22px;            
    height: 22px;
    stroke-width: 1.2px;    
    display: block;
}

/* Effet au survol : le cercle se remplit doucement */
.footer-social a:hover {
    background-color: var(--sand-color, #A39588);
    border-color: var(--sand-color, #A39588);
    color: #fff;
    transform: translateY(-3px); 
}

/* ---- En-tête de page éditorial ---- */
.legal-page-header {
    padding: 160px 24px 80px;
    text-align: center;
    background: var(--bg);
    position: relative;
    overflow: hidden;
}

/* Grain de texture très subtil */
.legal-page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    opacity: 0.5;
}

.legal-page-header .section-label   { margin-bottom: 20px; }

.legal-page-header .section-title {
    font-size: clamp(2.2rem, 6vw, 4.2rem);
    margin-bottom: 0;
    letter-spacing: clamp(3px, 1.2vw, 8px);
}

/* Ornement ◆ ◆ ◆ centré sous le titre */
.legal-header-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 28px auto 0;
    max-width: 320px;
}

.legal-header-ornament::before,
.legal-header-ornament::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.legal-header-ornament span {
    font-size: 0.55rem;
    color: var(--taupe);
    opacity: 0.6;
    letter-spacing: 6px;
}

.legal-page-sub {
    font-family: 'Playfair Display', serif;
    font-size: clamp(0.82rem, 1.6vw, 0.95rem);
    font-style: italic;
    font-weight: 300;
    color: var(--txt-muted);
    margin-top: 18px;
    letter-spacing: 0.5px;
}


/* ---- Layout principal ---- */
.legal-layout {
    max-width: 820px;
    margin: 0 auto;
    padding: 48px 24px 128px;
}


/* ---- Barre de navigation interne ---- */
.legal-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 64px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border);
}

/* Index de navigation rapide — pills */
.legal-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.legal-toc a {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--txt-muted);
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    transition: color 0.22s ease, border-color 0.22s ease, background 0.22s ease;
    text-decoration: none;
}

.legal-toc a:hover {
    color: var(--txt);
    border-color: var(--taupe);
    background: var(--taupe-xlt);
}


/* ================================================================
   CARDS LÉGALES — look éditorial
   ================================================================ */
.legal-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 48px 52px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-xs);
    transition: box-shadow 0.35s ease, transform 0.35s ease;
    position: relative;
    overflow: hidden;
}

/* Filet accent au hover */
.legal-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 52px;
    right: 52px;
    height: 1px;
    background: var(--taupe);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.legal-card:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.legal-card:hover::before { opacity: 0.35; }

@media (max-width: 600px) {
    .legal-card { padding: 32px 24px; }
    .legal-card::before { left: 24px; right: 24px; }
}


/* ---- En-tête de carte : ornement ◆ + numéro + titre ---- */
.legal-card-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border);
}

.legal-card-ornament {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 3px;
}

.legal-card-diamond {
    font-size: 0.7rem;
    color: var(--taupe);
    opacity: 0.55;
    line-height: 1;
    transition: opacity 0.3s ease;
    display: block;
}

.legal-card:hover .legal-card-diamond { opacity: 0.9; }

.legal-card-diamond--lg {
    font-size: 1rem;
    opacity: 0.75;
}

.legal-card-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.legal-card-num {
    font-family: 'Inter', sans-serif;
    font-size: 0.60rem;
    font-weight: 600;
    letter-spacing: 4.5px;
    text-transform: uppercase;
    color: var(--taupe);
    opacity: 0.65;
}

.legal-card-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.05rem, 2.6vw, 1.3rem);
    font-weight: 700;
    color: var(--txt);
    letter-spacing: 0.3px;
    line-height: 1.25;
    margin: 0;
}


/* ================================================================
   TABLEAU DONNÉES — clé / valeur minimaliste
   ================================================================ */
.legal-data-table {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.legal-data-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 10px 24px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    align-items: baseline;
}

.legal-data-row:first-child { padding-top: 0; }
.legal-data-row:last-child  { border-bottom: none; padding-bottom: 0; }

.legal-data-key {
    font-family: 'Inter', sans-serif;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--taupe);
    padding-top: 2px;
    opacity: 0.8;
}

.legal-data-val {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    color: var(--txt);
    line-height: 1.75;
}

.legal-data-val a {
    color: var(--taupe);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity 0.2s ease;
}

.legal-data-val a:hover { opacity: 0.7; }

@media (max-width: 520px) {
    .legal-data-row {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}


/* ---- Paragraphes de contenu ---- */
.legal-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--txt-muted);
    margin-bottom: 20px;
}

.legal-text:last-child { margin-bottom: 0; }

.legal-text strong {
    font-weight: 600;
    color: var(--txt);
}


/* ---- Chips moyens de paiement ---- */
.legal-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.legal-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--txt);
    padding: 8px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 30px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.legal-chip:hover {
    border-color: var(--taupe);
    background: var(--taupe-xlt);
}

.legal-chip svg {
    width: 13px;
    height: 13px;
    stroke: var(--taupe);
    flex-shrink: 0;
}


/* ---- Encart note / RGPD ---- */
.legal-note {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-left: 2px solid var(--taupe);
    border-radius: 0 var(--r) var(--r) 0;
    padding: 22px 28px;
    margin-top: 24px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.legal-note-diamond {
    font-size: 0.65rem;
    color: var(--taupe);
    opacity: 0.7;
    flex-shrink: 0;
    margin-top: 4px;
    line-height: 1;
}

.legal-note-body {
    font-family: 'Inter', sans-serif;
    font-size: 0.84rem;
    line-height: 1.8;
    color: var(--txt-muted);
}

.legal-note-body strong {
    font-weight: 600;
    color: var(--txt);
}


/* ---- Mini-grille 2 colonnes ---- */
.legal-mini-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 28px;
}

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

.legal-mini-card {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.legal-mini-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.60rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--taupe);
    opacity: 0.7;
}

.legal-mini-val {
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    line-height: 1.75;
    color: var(--txt-muted);
}

.legal-mini-val a {
    color: var(--taupe);
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ---- Séparateur ornemental ---- */
.legal-ornament-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 8px 0 24px;
    opacity: 0.4;
}

.legal-ornament-sep::before,
.legal-ornament-sep::after {
    content: '';
    width: 32px;
    height: 1px;
    background: var(--taupe);
}

.legal-ornament-sep span {
    font-size: 0.5rem;
    color: var(--taupe);
    letter-spacing: 4px;
}


/* ---- Pied de page légal ---- */
.legal-footer-note {
    text-align: center;
    padding: 44px 0 0;
    border-top: 1px solid var(--border);
    margin-top: 56px;
}

.legal-footer-note p {
    font-family: 'Inter', sans-serif;
    font-size: 0.73rem;
    color: var(--txt-muted);
    opacity: 0.55;
    letter-spacing: 0.3px;
}

.legal-footer-note .legal-date {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 0.82rem;
    margin-top: 8px;
    opacity: 0.5;
}

/* Inversion du logo Petitscommerces en mode sombre (bouton manuel) */
[data-theme="dark"] .logo-partenaire {
    filter: invert(1) hue-rotate(180deg);
}

/* Inversion du logo en mode sombre automatique (préférence du système) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .logo-partenaire {
        filter: invert(1) hue-rotate(180deg);
    }
}