/* 1) Déclaration */
@font-face {
    font-family: 'Shutter Stone Standar';
    src: url('/assets/font/ShutterStoneStandar.woff2') format('woff2'),
    url('/assets/font/ShutterStoneStandar.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
body {
    font-family: 'Shutter Stone Standar', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}


/* Exemple ciblé */
.intro-text{
    /*font-family: 'Shutter Stone Standar', sans-serif !important;*/
    /*color: #f5e179 !important;*/
}

/* ===== Tokens ===== */
:root{
    --dur-panel: 1.4s;
    --dur-fade:  1.0s;
    --dur-rail:  .75s;
    --delay-panel: .12s;

    --ease-smooth: cubic-bezier(.16, 1, .30, 1);
    --ease-gentle: cubic-bezier(.22, .61, .36, 1);
    --ease-overs:  cubic-bezier(.18, 1.12, .18, 1);

    --dist-x: 18%;
    --dist-y: 16%;

    --float-amp: 8px;/* ==========================================================================
   Bar-Restaurant – CSS global (mobile-first, luxe)
   Rails flottants + Panneaux élégants + Itinéraire + Contact + Événements + BAR
   Responsive renforcé (auto-fit, aspect-ratio), images fiables
   ========================================================================== */

    /* ===== Tokens ===== */
    :root{
        --dur-panel: 1.4s;
        --dur-fade:  1.0s;
        --dur-rail:  .75s;
        --delay-panel: .12s;

        --ease-smooth: cubic-bezier(.16, 1, .30, 1);
        --ease-gentle: cubic-bezier(.22, .61, .36, 1);
        --ease-overs:  cubic-bezier(.18, 1.12, .18, 1);

        --dist-x: 18%;
        --dist-y: 16%;

        --float-amp: 8px;
        --float-dur: 7.2s;
        --shadow-dur: 5.6s;

        --btn: 88px;
        --btn-fs: 13px;

        --bg: #0b0b0b;
        --text: #f3f3f3;
        --muted: #cfcfcf;

        --stroke: rgba(255,255,255,.22);
        --stroke-strong: rgba(212,175,55,.60);
        --stroke-soft: rgba(212,175,55,.34);

        --glass: rgba(255,255,255,.06);
        --accent: rgba(212,175,55,.28);
        --accent-strong: rgba(212,175,55,.44);

        --gold-1: #f0e6d2;
        --gold-2: #d4af37;
        --gold-3: #f6e7b8;

        --radius-lg: 26px;
        --radius-md: 14px;
        --radius-sm: 10px;
        --radius-pill: 999px;

        --shadow-lg: 0 30px 70px rgba(0,0,0,.55);
        --shadow-soft: 0 12px 30px rgba(0,0,0,.38);
        --shadow-float: 0 10px 18px rgba(0,0,0,.35);

        /* ==== AJOUT MINIMAL : taille du logo rond + décalage tagline ==== */
        --logo-medal-size: 170px;      /* > boutons latéraux (88–116px) */
        /*--logo-tagline-offset: clamp(38px, 7vw, 64px);*/
        --logo-tagline-offset: clamp(200px, 15vw, 170px);
    }

    @media (min-width: 480px){ :root{ --btn: 100px; --btn-fs: 14px; } }
    @media (min-width: 992px){
        :root{ --btn: 116px; --btn-fs: 15px; --logo-medal-size: 200px; }
    }

    /* ===== Base ===== */
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    html { scroll-behavior: smooth; }
    body{
        margin: 0;
        background: var(--bg);
        color: var(--text);
        font: 15px/1.55 Manrope, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
        -webkit-tap-highlight-color: transparent;
        overflow-x: hidden;
    }

    /* ===== Viewport / Hero ===== */
    .viewport{ position: relative; min-height: 100dvh; isolation: isolate; overflow: hidden; z-index: 0; }

    .bg{
        position: absolute; inset: 0;
        background: center/cover no-repeat; background-image: var(--home-bg);
        transform: scale(1.035);
        will-change: transform, filter, opacity;
        transition: transform 1.4s var(--ease-gentle), filter 1.1s var(--ease-gentle), opacity 1.1s var(--ease-gentle);
    }
    .veil{
        position: absolute; inset: 0;
        background: radial-gradient(105% 62% at 50% 34%, rgba(0,0,0,.18), rgba(0,0,0,.82));
        transition: opacity var(--dur-fade) var(--ease-gentle);
    }
    .hero{
        position: relative; z-index: 2; min-height: 100dvh;
        display: grid; place-items: center; text-align: center;
        padding: clamp(20px, 6vw, 64px);
    }
    .brand{
        margin: 0 0 12px;
        font: 700 clamp(36px, 9vw, 76px)/1.1 "Playfair Display", serif;
        background: linear-gradient(92deg, var(--gold-1), var(--gold-2) 55%, var(--gold-3));
        -webkit-background-clip: text; background-clip: text; color: transparent;
        letter-spacing: .4px; text-shadow: 0 2px 24px rgba(0,0,0,.28);
    }
    .tagline{ margin: 0; font-size: clamp(15px, 3.6vw, 20px); color: var(--muted); opacity: .95; }

    /* ↓ Décale le texte de présentation sous le logo rond */
    .home .hero{ margin-top: var(--logo-tagline-offset); }

    body.panel-open .bg{ transform: scale(1.09); filter: saturate(.9) brightness(.92); }
    body.panel-open .veil{ opacity: .94; }

    /* ===== Rails ===== */
    nav.rail{
        position: fixed;
        top: max(14px, env(safe-area-inset-top, 0px));
        bottom: max(14px, env(safe-area-inset-bottom, 0px));
        display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; gap: 0;
        z-index: 8;
        pointer-events: auto; transition: opacity var(--dur-rail) var(--ease-gentle);
    }
    nav.rail.rail-left{  left:  max(16px, env(safe-area-inset-left,  0px)); }
    nav.rail.rail-right{ right: max(16px, env(safe-area-inset-right, 0px)); }

    /* Boutons ronds flottants */
    nav.rail > .rail-btn{
        position: relative; width: var(--btn); height: var(--btn); border-radius: 50%;
        border: 1px solid var(--stroke);
        background:
            radial-gradient(44% 44% at 50% 50%, rgba(0,0,0,.38), rgba(0,0,0,0) 62%),
            radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.18), rgba(255,255,255,.04) 38%, rgba(255,255,255,.02) 62%),
            linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
        color: transparent; cursor: pointer; touch-action: manipulation;
        backdrop-filter: blur(8px) saturate(1.05); -webkit-backdrop-filter: blur(8px) saturate(1.05);
        outline: none; will-change: transform, opacity;
        box-shadow:
            0 0 0 2px rgba(255,255,255,.12),
            0 0 36px var(--accent-strong),
            var(--shadow-float);
        animation:
            floatY var(--float-dur) linear infinite alternate,
            shadowPulse var(--shadow-dur) ease-in-out infinite alternate;
        transition: opacity .36s var(--ease-gentle), border-color .36s var(--ease-gentle), box-shadow .36s var(--ease-gentle);
    }
    nav.rail > .rail-btn::before{
        content: var(--label, "•");
        position: absolute; inset: 0; display: grid; place-items: center;
        color: #fff; font-weight: 800; font-size: var(--fs, var(--btn-fs)); letter-spacing: .3px;
        text-shadow: 0 0 2px rgba(0,0,0,.9), 0 1px 6px rgba(0,0,0,.55), 0 0 14px rgba(0,0,0,.45);
    }
    nav.rail > .rail-btn::after{
        content:""; position:absolute; inset:-6px; border-radius:50%;
        background:
            radial-gradient(82% 82% at 50% 50%, transparent 58%, rgba(212,175,55,.26) 70%, transparent 86%),
            radial-gradient(120% 120% at 30% 10%, rgba(255,255,255,.22), transparent 46%),
            radial-gradient(60% 60% at 72% 82%, rgba(212,175,55,.26), transparent 60%);
        opacity: .95; mix-blend-mode: screen; pointer-events:none;
        animation: auraPulse var(--shadow-dur) ease-in-out infinite alternate;
    }
    nav.rail > .rail-btn:active{ transform: translateY(1px) scale(.985); }
    nav.rail > .rail-btn.outline{
        background:
            radial-gradient(44% 44% at 50% 50%, rgba(0,0,0,.30), rgba(0,0,0,0) 62%),
            linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    }

    /* Stagger organique */
    nav.rail.rail-left  > .rail-btn:nth-child(1){ animation-delay: 0s, 0s; }
    nav.rail.rail-left  > .rail-btn:nth-child(2){ animation-delay: .6s, .3s; }
    nav.rail.rail-left  > .rail-btn:nth-child(3){ animation-delay: 1.2s, .6s; }
    nav.rail.rail-right > .rail-btn:nth-child(1){ animation-delay: .3s, .15s; }
    nav.rail.rail-right > .rail-btn:nth-child(2){ animation-delay: .9s, .45s; }
    nav.rail.rail-right > .rail-btn:nth-child(3){ animation-delay: 1.5s, .75s; }

    body.panel-open nav.rail{ opacity:0; pointer-events:none; }

    /* Labels */
    .rail-btn[data-section="bar"]        { --label:"Nos boissons";    --fs: clamp(12px,2.8vw,14px); }
    .rail-btn[data-section="restaurant"] { --label:"Nos plats";  --fs: clamp(12px,2.8vw,14px); }
    .rail-btn[data-section="evenements"] { --label:"Évents.";  --fs: clamp(12px,2.8vw,14px); }
    .rail-btn[data-section="itineraire"] { --label:"Localisation";  --fs: clamp(12px,2.8vw,14px); }
    .rail-btn[data-section="contact"]    { --label:"Contact";--fs: clamp(11px,2.6vw,13px); }
    a.rail-btn[aria-label="WhatsApp"]    { --label:"WhatsApp";     --fs: clamp(12px,2.8vw,14px); }

    /* ===== Photo sombre (home) ===== */
    body.dark-photo .bg{ filter: brightness(1.18) contrast(1.03) saturate(1.06); }
    body.dark-photo .veil{ background: radial-gradient(120% 70% at 50% 36%, rgba(255,255,255,.12), rgba(0,0,0,.65)); }
    body.dark-photo .brand{ text-shadow: 0 6px 28px rgba(255,255,255,.18), 0 2px 24px rgba(0,0,0,.30); }
    body.dark-photo .tagline{ color:#fff; opacity:.92; }
    body.dark-photo nav.rail{ z-index: 9; }
    body.dark-photo nav.rail > .rail-btn{
        border-color: var(--stroke);
        box-shadow:
            0 0 0 2px rgba(255,255,255,.14),
            0 0 42px var(--accent-strong),
            0 20px 36px rgba(0,0,0,.52);
    }

    /* ===== Panneau ===== */
    .panel{
        position: fixed; inset: 0; z-index: 4;
        background: rgba(0,0,0,.56);
        backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
        opacity: 0; pointer-events: none;
        transition: opacity var(--dur-fade) var(--ease-gentle) var(--delay-panel);
    }
    .panel-inner{
        position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto;
        width: min(100%, 1100px); height: 96dvh;
        background: linear-gradient(180deg, rgba(16,16,16,.98), rgba(9,9,9,.98));
        border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        transition: transform var(--dur-panel) var(--ease-overs), opacity var(--dur-fade) var(--ease-gentle), box-shadow .9s var(--ease-gentle);
        overflow: auto; will-change: transform, opacity; contain: paint;
    }
    .panel-header{
        position: sticky; top:0; display:flex; align-items:center; justify-content:center;
        padding: 18px 64px 16px 24px; background: rgba(12,12,12,.78);
        border-bottom:1px solid var(--stroke); backdrop-filter: blur(8px);
    }
    .panel-title{ margin:0; font:700 clamp(18px,4.2vw,28px)/1 "Playfair Display",serif; }
    .panel-close{
        position:absolute; top:12px; right:12px; width:44px; height:44px; border-radius:999px;
        border:1px solid var(--stroke); background:var(--glass); display:grid; place-items:center; color:var(--text);
        cursor:pointer; transition: transform .34s var(--ease-gentle), background-color .34s var(--ease-gentle), border-color .34s var(--ease-gentle);
    }
    .panel-close:active{ transform: scale(.97); }
    .panel-content{ padding:18px 18px 32px; color:var(--muted); font-size:15px; }
    .placeholder .key{ color: var(--gold-2); }

    body.panel-open .panel{ opacity:1; pointer-events:auto; }
    body.panel-open .panel-inner{ box-shadow: 0 44px 110px rgba(0,0,0,.66); }

    /* Variantes d’animation du panneau */
    body.anim-left .panel-inner{  transform: translateX(calc(-1 * var(--dist-x))); }
    body.anim-right .panel-inner{ transform: translateX(var(--dist-x)); }
    body.anim-bottom .panel-inner{ transform: translateY(var(--dist-y)); }
    body.anim-top .panel-inner{    transform: translateY(calc(-1 * var(--dist-y))); }
    body.panel-open.anim-left .panel-inner,
    body.panel-open.anim-right .panel-inner,
    body.panel-open.anim-bottom .panel-inner,
    body.panel-open.anim-top .panel-inner{ transform: translateX(0) translateY(0); }
    body.anim-zoom .panel-inner{ transform: scale(.93) translateY(12px); transform-origin:50% 90%; opacity:.001; }
    body.panel-open.anim-zoom .panel-inner{ transform: scale(1) translateY(0); opacity:1; }

    /* Keyframes flottement/ombre */
    @keyframes floatY{ from{ transform: translateY(0); } to{ transform: translateY(calc(-1 * var(--float-amp))); } }
    @keyframes shadowPulse{
        from{ box-shadow: 0 0 0 2px rgba(255,255,255/.12), 0 0 36px var(--accent-strong), var(--shadow-float); }
        to  { box-shadow: 0 0 0 2px rgba(255,255,255/.12), 0 0 46px var(--accent-strong), 0 18px 30px rgba(0,0,0,.46); }
    }
    @keyframes auraPulse{ from{ opacity:.85; } to{ opacity:1; } }

    /* A11y */
    :focus-visible{ outline:2px solid var(--gold-2); outline-offset:2px; border-radius:8px; }
    @media (prefers-reduced-motion: reduce){
        .panel, .panel-inner, nav.rail, .bg, .veil, nav.rail > .rail-btn, nav.rail > .rail-btn::after{
            transition:none !important; animation:none !important;
        }
    }
    @supports not (backdrop-filter: blur(1px)){
        nav.rail > .rail-btn{ background: rgba(0,0,0,.78); }
        .panel{               background: rgba(0,0,0,.78); }
    }

    /* ===== Itinéraire ===== */
    .it-card{ display:grid; gap:18px; }
    .it-head{ display:grid; grid-template-columns:42px 1fr; align-items:center; gap:12px; padding:12px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--stroke); border-radius:var(--radius-md); }
    .it-pin{ width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.18), rgba(255,255,255,.06) 45%, rgba(255,255,255,.02) 70%); color: var(--gold-2); border:1px solid var(--stroke); }
    .it-title{ margin:0; font:700 18px/1.2 "Playfair Display",serif; color:var(--text); }
    .it-sub{ margin:4px 0 0; color:var(--muted); font-size:14px; }
    .it-map{ border-radius:16px; border:1px solid var(--stroke); overflow:hidden; background:#0e0e0e; box-shadow:0 12px 30px rgba(0,0,0,.35); }
    .it-map-frame{ display:block; width:100%; height:min(58vh, 420px); border:0; filter:saturate(1.05) contrast(1.02); }
    .it-cta{ display:grid; gap:12px; }

    /* ===== Buttons ===== */
    .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; border-radius:999px; font-weight:800; letter-spacing:.2px; border:1px solid var(--stroke); text-decoration:none; color:var(--text); transition: transform .24s var(--ease-gentle), box-shadow .24s var(--ease-gentle), border-color .24s var(--ease-gentle); }
    .btn:active{ transform: translateY(1px); }
    .btn-primary{ background: linear-gradient(92deg, rgba(240,230,210,.18), rgba(212,175,55,.28) 55%, rgba(246,231,184,.16)); box-shadow: 0 12px 28px rgba(0,0,0,.35); border-color: rgba(212,175,55,.42); }
    .btn-primary:hover{ box-shadow: 0 14px 34px rgba(0,0,0,.42); border-color: rgba(212,175,55,.55); }
    .btn-ghost{ background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); }
    .btn-ghost:hover{ box-shadow: 0 8px 20px rgba(0,0,0,.28); }
    .btn-group{ display:flex; flex-wrap:wrap; gap:10px; }
    .btn-icon{ font-size:18px; line-height:0; }
    .btn.is-loading{ opacity:.7; pointer-events:none; }

    /* ===== Contact ===== */
    .ct-card{ display:grid; gap:22px; }
    .ct-head{ display:grid; grid-template-columns:42px 1fr; align-items:center; gap:12px; padding:12px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--stroke); border-radius:var(--radius-md); }
    .ct-icon{ width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.18), rgba(255,255,255,.06) 45%, rgba(255,255,255,.02) 70%); color: var(--gold-2); border:1px solid var(--stroke); }
    .ct-title{ margin:0; font:700 18px/1.2 "Playfair Display",serif; color:var(--text); }
    .ct-sub{ margin:4px 0 0; color:var(--muted); font-size:14px; }
    .ct-section{ padding:12px; border:1px solid var(--stroke); border-radius:var(--radius-md); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); }
    .ct-section-title{ margin:0 0 12px; font:700 16px/1.2 "Playfair Display",serif; color:var(--text); }
    .ct-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
    .ct-list li{ display:flex; gap:10px; align-items:flex-start; }
    .ct-li-ic{ width:22px; text-align:center; opacity:.9; }
    .ct-li-txt{ color:var(--muted); }
    .ct-li-link{ color:#fff; text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.22); }
    .ct-li-link:hover{ border-bottom-color: rgba(212,175,55,.55); }
    .res-form{ display:grid; gap:16px; }
    .form-grid{ display:grid; gap:12px; }
    @media (min-width: 660px){ .form-grid{ grid-template-columns: repeat(3, 1fr); } }
    .field{ display:grid; gap:6px; }
    .label{ font-weight:700; color:#fff; font-size:14px; }
    .input, .select, .textarea{ width:100%; color:#fff; background: rgba(255,255,255,.05); border:1px solid var(--stroke); border-radius: var(--radius-sm); padding: 12px 14px; outline:none; transition: border-color .24s var(--ease-gentle), box-shadow .24s var(--ease-gentle), background-color .24s var(--ease-gentle); box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); }
    .input::placeholder, .textarea::placeholder { color: rgba(255,255,255,.55); }
    .input:focus, .select:focus, .textarea:focus{ border-color: rgba(212,175,55,.55); box-shadow: 0 0 0 3px rgba(212,175,55,.22); background: rgba(255,255,255,.07); }
    .select{ appearance:none; background-image: linear-gradient(45deg,transparent 50%, rgba(255,255,255,.65) 55%), linear-gradient(135deg, rgba(255,255,255,.65) 55%,transparent 60%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px, 6px 6px; background-repeat:no-repeat; }
    .hint{ margin:0; font-size:12px; color: rgba(255,255,255,.6); }

    .textarea{ resize: vertical; min-height: 90px; }
    .form-actions{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
    .form-legal{ margin:0; font-size:12px; color:rgba(255,255,255,.6); }
    .form-status{ margin-top:8px; padding:10px 12px; border-radius: var(--radius-sm); font-weight:700; }
    .form-status.success{ background: rgba(22,162,109,.18); border:1px solid rgba(22,162,109,.45); color:#d8fff1; }
    .form-status.error{   background: rgba(187,62,74,.18); border:1px solid rgba(187,62,74,.45); color:#ffe6ea; }
    .share-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

    /* ===== Événements ===== */
    .ev-card{ display:grid; gap:18px; }
    .ev-head{ display:grid; grid-template-columns:42px 1fr; align-items:center; gap:12px; padding:12px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--stroke); border-radius:var(--radius-md); }
    .ev-icon{ width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.18), rgba(255,255,255,.06) 45%, rgba(255,255,255,.02) 70%); color: var(--gold-2); border:1px solid var(--stroke); }
    .ev-title{ margin:0; font:700 18px/1.2 "Playfair Display",serif; color:var(--text); }
    .ev-sub{ margin:4px 0 0; color:var(--muted); font-size:14px; }
    .segmented{
        display:inline-flex; align-items:center; gap:6px; border:1px solid var(--stroke);
        padding:6px; border-radius:999px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
        width: max-content; max-width: 100%; overflow:auto; -webkit-overflow-scrolling: touch;
    }
    .seg-btn{ border:0; background:transparent; color:#fff; padding:8px 14px; border-radius:999px; font-weight:800; cursor:pointer; transition: background-color .24s var(--ease-gentle), box-shadow .24s var(--ease-gentle); display:inline-flex; gap:8px; align-items:center; font-size: .85rem !important; }
    .seg-btn.is-active{ background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
    .ev-list{ display:grid; gap:14px; }
    @media (min-width: 720px){ .ev-list{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
    @media (min-width: 1040px){ .ev-list{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
    .ev-item{ display:grid; grid-template-rows: auto auto; border:1px solid var(--stroke); border-radius:16px; overflow:hidden; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); box-shadow: 0 12px 30px rgba(0,0,0,.30); transition: transform .28s var(--ease-gentle), box-shadow .28s var(--ease-gentle), border-color .28s var(--ease-gentle); }
    .ev-item:hover{ transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,.38); border-color: rgba(255,255,255,.28); }
    .ev-media{ position: relative; overflow:hidden; background: #0d0d0d; aspect-ratio: 4 / 3; }
    @media (min-width: 720px){ .ev-media{ aspect-ratio: 3 / 2; } }
    .ev-media::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.45) 100%), radial-gradient(70% 60% at 50% 10%, rgba(0,0,0,.18), rgba(0,0,0,0) 60%); pointer-events:none; }
    .ev-img{ width:100%; height:100%; object-fit:contain; display:block; transform: scale(1.025); filter: saturate(1.06) contrast(1.03) brightness(.94); transition: transform .8s var(--ease-gentle), filter .6s var(--ease-gentle); }
    .ev-item:hover .ev-img{ transform: scale(1.05); filter: saturate(1.1) contrast(1.05) brightness(.96); }
    .date-badge{ position:absolute; top:10px; left:10px; display:flex; flex-direction:column; align-items:center; width:58px; padding:6px 0; border-radius:12px; background: rgba(0,0,0,.54); color:#fff; border: 1px solid rgba(255,255,255,.18); font-weight:800; box-shadow: 0 6px 18px rgba(0,0,0,.38); }
    .date-badge .dow{ font-size:11px; text-transform:uppercase; opacity:.9; }
    .date-badge .d{ font-size:20px; line-height:1; }
    .date-badge .mo{ font-size:11px; text-transform:uppercase; opacity:.9; }
    .type-badge{ position:absolute; top:10px; right:10px; padding:6px 10px; font-weight:800; border-radius:999px; background: rgba(255,255,255,.14); color:#fff; border: 1px solid rgba(255,255,255,.22); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
    .ev-type-concert .type-badge{ background: linear-gradient(92deg, rgba(240,230,210,.18), rgba(212,175,55,.28)); border-color: rgba(212,175,55,.34); }
    .ev-type-match   .type-badge{ background: linear-gradient(92deg, rgba(210,230,255,.18), rgba(55,145,212,.32)); border-color: rgba(55,145,212,.34); }
    .ev-info{ padding: 14px; display:grid; gap:8px; }
    .ev-meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; color: var(--muted); font-size: 13px; }
    .ev-name{ margin:0; color:#fff; font: 700 18px/1.25 "Playfair Display",serif; }
    .ev-desc{ margin:0; color: var(--muted); font-size: 14px; }
    .ev-tags{ display:flex; flex-wrap: wrap; gap:6px; }
    .chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.18); color:#fff; font-size:12px; background: rgba(255,255,255,.06); }
    .price{ color:#fff; font-weight:800; }
    .ev-ctas{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 4px; }

    /* ===== BAR (responsive ++, images) ===== */
    .bar-card{ display:grid; gap:18px; }
    .bar-head{ display:grid; grid-template-columns:42px 1fr; align-items:center; gap:12px; padding:12px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--stroke); border-radius:var(--radius-md); }
    .bar-icon{ width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.18), rgba(255,255,255,.06) 45%, rgba(255,255,255,.02) 70%); color: var(--gold-2); border:1px solid var(--stroke); font-size:18px; }
    .bar-title{ margin:0; font:700 18px/1.2 "Playfair Display",serif; color:var(--text); }
    .bar-sub{ margin:4px 0 0; color:var(--muted); font-size:14px; }

    .bar-tabs.segmented{ width:100%; overflow:auto; }
    .bar-list{
        display:grid; gap:14px;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    }
    @media (min-width: 720px){
        .bar-list{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    }
    @media (min-width: 1040px){
        .bar-list{ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
    }

    .drink-item{
        display:grid; grid-template-rows: auto auto;
        border:1px solid var(--stroke); border-radius: 16px; overflow:hidden;
        background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
        box-shadow: 0 12px 30px rgba(0,0,0,.30);
        transition: transform .28s var(--ease-gentle), box-shadow .28s var(--ease-gentle), border-color .28s var(--ease-gentle);
    }
    .drink-item:hover{ transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,.38); border-color: rgba(255,255,255,.28); }

    .drink-media{ position: relative; overflow:hidden; background:#0d0d0d; aspect-ratio: 4 / 3; }
    @media (min-width: 720px){ .drink-media{ aspect-ratio: 3 / 2; } }
    .drink-media::after{
        content:""; position:absolute; inset:0;
        background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.45) 100%), radial-gradient(70% 60% at 50% 10%, rgba(0,0,0,.18), rgba(0,0,0,0) 60%);
        pointer-events:none;
    }
    .drink-img{
        width:100%; height:100%; object-fit:contain; display:block;
        transform: scale(1.02);
        filter: saturate(1.06) contrast(1.03) brightness(.94);
        transition: transform .8s var(--ease-gentle), filter .6s var(--ease-gentle);
    }
    .drink-item:hover .drink-img{ transform: scale(1.05); filter: saturate(1.1) contrast(1.05) brightness(.96); }

    .drink-info{ padding: 14px; display:grid; gap:8px; }
    .drink-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
    .drink-name{ margin:0; color:#fff; font: 700 18px/1.25 "Playfair Display",serif; }
    .drink-meta{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
    .badge{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; font-weight:800; border:1px solid rgba(212,175,55,.42); color:#fff; background: linear-gradient(92deg, rgba(240,230,210,.18), rgba(212,175,55,.28) 55%, rgba(246,231,184,.16)); font-size:12px; }
    .muted{ color:var(--muted); font-size:12px; }
    .drink-desc{ margin:0; color: var(--muted); font-size: 14px; }
    .drink-tags{ display:flex; flex-wrap: wrap; gap:6px; }

    /* Small polish */
    a, button{ -webkit-tap-highlight-color: rgba(0,0,0,0); }

    /* === Restaurant grid & cards === */
    .resto-grid {
        display: grid;
        grid-template-columns: repeat( auto-fill, minmax(240px, 1fr) );
        gap: clamp(14px, 2.2vw, 20px);
        margin-top: 1rem;
    }

    .food-item {
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 18px;
        overflow: hidden;
        backdrop-filter: blur(6px);
        transition: transform .35s cubic-bezier(.2,.6,.2,1), box-shadow .35s;
    }
    .food-item:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.25); }

    .food-media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
    .food-img   { width: 100%; height: 100%; object-fit: cover; display: block; }
    .flag-menu  {
        position: absolute; top: 10px; left: 10px;
        padding: 6px 10px; font-size: .8rem; letter-spacing: .2px;
        border-radius: 999px;
        background: linear-gradient(135deg,#ffd166,#ef476f);
        color: #222; font-weight: 700;
        box-shadow: 0 6px 18px rgba(239,71,111,.35);
    }

    .food-info { padding: 12px 14px 16px; }
    .food-top  { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .food-name { font-size: 1.05rem; line-height: 1.2; }
    .food-desc { opacity:.85; margin:.4rem 0 .6rem; font-size:.95rem; }
    .food-tags { display:flex; flex-wrap:wrap; gap:8px; }

    /* Onglet “Menu du jour” mis en avant */
    .resto-tabs .highlight-menu { position: relative; isolation: isolate; }
    .resto-tabs .highlight-menu .badge-soft{
        margin-left: .5rem; font-size: .75rem;
        padding: .2rem .5rem; border-radius: 999px;
        background: rgba(255,255,255,.2);
    }
    .pulse-dot {
        width: 8px; height: 8px; border-radius: 50%;
        background: #ffb703; display:inline-block; margin-right:.5rem;
        box-shadow: 0 0 0 rgba(255,183,3,.6);
        animation: pulse 1.8s ease-out infinite;
    }
    @keyframes pulse {
        0% { box-shadow: 0 0 0 0 rgba(255,183,3,.6); }
        70% { box-shadow: 0 0 0 12px rgba(255,183,3,0); }
        100% { box-shadow: 0 0 0 0 rgba(255,183,3,0); }
    }

    /* Responsive */
    @media (max-width: 520px) {
        .resto-grid { grid-template-columns: 1fr; }
    }

    /* =========================================================
       (Conservé) Hero plaque & trims — pas modifiés
       ========================================================= */
    .home .bg{ position:absolute; inset:0; z-index:0; }
    .home .veil{ position:absolute; inset:0; z-index:1; }
    .home .hero{ position:relative; z-index:3; }

    /* ===== Corrections hero + logo par défaut ===== */
    .home .hero{
        min-height: auto;
        padding: clamp(20px, 6vw, 56px);
    }

    /* =========================================================
       AJOUT MINIMAL (version qui marchait) :
       Logo rond centré en haut du main + tagline plus basse.
       On n’affecte rien d’autre.
       ========================================================= */

    /* Conteneur du logo, centré en haut, non cliquable */
    .logo-center-top{
        position: absolute;
        top: clamp(14px, 3.5vh, 28px);
        left: 0; right: 0;
        display: grid; place-items: center;
        z-index: 10;               /* au-dessus des rails (z=8) */
        pointer-events: none;      /* pas cliquable */
    }

    /* Pastille ronde (plus grande que les boutons latéraux) */
    .logo-medal{
        width: var(--logo-medal-size);
        height: var(--logo-medal-size);
        border-radius: 50%;
        border: 1px solid var(--stroke);
        background:
            radial-gradient(44% 44% at 50% 50%, rgba(0,0,0,.38), rgba(0,0,0,0) 62%),
            radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.18), rgba(255,255,255,.04) 38%, rgba(255,255,255,.02) 62%),
            linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
        box-shadow:
            0 0 0 2px rgba(255,255,255,.12),
            0 0 36px var(--accent-strong),
            var(--shadow-float);
        display: grid; place-items: center;
        overflow: hidden;          /* clip circulaire propre */
        overflow: hidden;       /* sécurité du clip circulaire */
        display: grid;
        place-items: center;
    }

    /* Aura décorative comme les rails (visuelle uniquement) */
    .logo-medal::after{
        content:""; position:absolute; inset:-8px; border-radius:50%;
        background:
            radial-gradient(82% 82% at 50% 50%, transparent 58%, rgba(212,175,55,.26) 70%, transparent 86%),
            radial-gradient(120% 120% at 30% 10%, rgba(255,255,255,.22), transparent 46%),
            radial-gradient(60% 60% at 72% 82%, rgba(212,175,55,.26), transparent 60%);
        opacity:.95; mix-blend-mode: screen; pointer-events:none;
    }

    /* === Logo médaillon centré EN HAUT (plus grand que les rails) === */
    :root{
        --logo-medal-size: calc(var(--btn) * 1.70);   /* >>> plus grand que les boutons */
        --logo-top-gap: max(18px, calc(env(safe-area-inset-top, 0px) + 14px));
    }

    .logo-center-top{
        position: fixed;
        top: var(--logo-top-gap);
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;              /* au-dessus des rails (z:8) et du voile */
        pointer-events: none;     /* non cliquable */
    }

    .logo-medal{
        width: var(--logo-medal-size);
        height: var(--logo-medal-size);
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        clip-path: circle(50% at 50% 50%);
        overflow: hidden;
        display: grid;
        place-items: center;
        border: 1px solid var(--stroke);
        background:
            radial-gradient(44% 44% at 50% 50%, rgba(0,0,0,.38), rgba(0,0,0,0) 62%),
            radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.18), rgba(255,255,255,.04) 38%, rgba(255,255,255,.02) 62%),
            linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
        box-shadow:
            0 0 0 2px rgba(255,255,255,.12),
            0 0 36px var(--accent-strong),
            var(--shadow-float);
        backdrop-filter: blur(8px) saturate(1.05);
        -webkit-backdrop-filter: blur(8px) saturate(1.05);
        position: relative;
        background:
            /* gardes tes dégradés + */
            center / contain no-repeat url("/chemin/ton-logo.png"),
            radial-gradient(44% 44% at 50% 50%, rgba(0,0,0,.38), rgba(0,0,0,0) 62%),
            radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.18), rgba(255,255,255,.04) 38%, rgba(255,255,255,.02) 62%),
            linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    }

    .logo-medal::after{
        content:"";
        position:absolute; inset:-6px; border-radius:50%;
        background:
            radial-gradient(82% 82% at 50% 50%, transparent 58%, rgba(212,175,55,.26) 70%, transparent 86%),
            radial-gradient(120% 120% at 30% 10%, rgba(255,255,255,.22), transparent 46%),
            radial-gradient(60% 60% at 72% 82%, rgba(212,175,55,.26), transparent 60%);
        mix-blend-mode: screen; pointer-events:none; opacity:.95;
    }

    /* image : pas de déformation, logo entier visible */
    .logo-medal__img{
        /* Pas d'object-fit */
        width: auto;
        height: auto;
        max-width: 90%;
        max-height: 90%;

        display: block;
        /* le cercle est géré par .logo-medal (clip-path + border-radius) */
        border-radius: 50%;

        /* centrage assuré par .logo-medal (display:grid; place-items:center) */
        filter:
            drop-shadow(0 0 .5px rgba(255,255,255,.6))
            drop-shadow(0 8px 16px rgba(0,0,0,.45));
    }

    /* Ajuste légèrement sur petits écrans */
    @media (max-width: 420px){
        :root{ --logo-medal-size: calc(var(--btn) * 1.38); }
    }





    /* Image de fond optionnelle pour les boutons ronds */
    nav.rail > .rail-btn{
        /* on garde tes 3 couches existantes + l'image en dernière couche */
        background:
            radial-gradient(44% 44% at 50% 50%, rgba(0,0,0,.38), rgba(0,0,0,0) 62%),
            radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.18), rgba(255,255,255,.04) 38%, rgba(255,255,255,.02) 62%),
            linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
            var(--btn-bg, none);
        background-size: auto, auto, auto, cover;   /* l’image = cover */
        background-position: center;                 /* centré sur toutes les couches */
        background-repeat: no-repeat;
    }

    /* Légère atténuation au hover pour ne pas brûler le label */
    nav.rail > .rail-btn:hover{
        box-shadow:
            0 0 0 2px rgba(255,255,255,.12),
            0 0 46px var(--accent-strong),
            0 18px 30px rgba(0,0,0,.46);
        filter: saturate(1.04) contrast(1.02);
    }

    /* Si jamais une image est très claire, on peut accentuer le voile interne */
    nav.rail > .rail-btn.has-bright-img{
        background:
            radial-gradient(44% 44% at 50% 50%, rgba(0,0,0,.46), rgba(0,0,0,0) 62%),
            radial-gradient(120% 120% at 30% 10%, rgba(255,255,255,.16), rgba(255,255,255,.04) 38%, rgba(255,255,255,.02) 62%),
            linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
            var(--btn-bg, none);
    }
    /* Exemples : mets tes vraies URLs */
    .rail-btn[data-section="bar"] { --btn-bg: url('/assets/images/home/home2.avif'); }
    .rail-btn[data-section="restaurant"] { --btn-bg: url('/assets/images/resto/steak.avif'); }
    .rail-btn[data-section="evenements"] { --btn-bg: url('/assets/images/events/placeholder-concert.webp'); }
    .rail-btn[data-section="itineraire"] { --btn-bg: url('/assets/images/btn_localisation.webp'); }
    .rail-btn[data-section="contact"]    { --btn-bg: url('/assets/images/btn_contact.webp'); }
    a.rail-btn[aria-label="WhatsApp"]    { --btn-bg: url('/assets/images/btn3_whatsapp.avif'); }



    nav.rail > .rail-btn.outline{
        background:
            radial-gradient(44% 44% at 50% 50%, rgba(0,0,0,.30), rgba(0,0,0,0) 62%),
            linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
            var(--btn-bg, none);
        background-size: auto, auto, cover;
        background-position: center;
        background-repeat: no-repeat;
    }


    /* Message provisoire quand il n'y a pas d'items */
    .bar-list > .placeholder,
    .resto-grid > .placeholder{
        display:block;
        padding: 14px 16px;
        text-align: center;
        color: #fff;                 /* contraste suffisant */
        border: 1px solid var(--stroke);
        border-radius: 12px;
        background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    }
    .resto-grid { grid-template-columns: 1fr; }  /* uniquement le temps du placeholder */
    /* Placeholder sobre (sans couleur) */
    .bar-list > .placeholder,
    .resto-grid > .placeholder{
        grid-column: 1 / -1;      /* occupe toute la ligne dans la grille */
        display: block;
        padding: 12px 14px;
        text-align: center;
        color: var(--muted);       /* texte doux, non coloré */
        border: 1px dashed var(--stroke);
        border-radius: 10px;
        background: transparent;   /* pas de fond */
        font-weight: 600;
    }
    .bar-list,
    .resto-grid,
    .ev-list {
        justify-items: center; /* centre chaque carte dans sa colonne */
    }

    .drink-item,
    .food-item,
    .ev-item {
        width: 100%;
        max-width: 360px;      /* limite la largeur d’une carte */
        justify-self: center;  /* sécurité de centrage si nécessaire */
    }

    /* Sur tout petit écran, on laisse la carte prendre la largeur dispo */
    @media (max-width: 480px) {
        .drink-item,
        .food-item,
        .ev-item { max-width: 100%; }
    }


    /* =========================================================
       Tagline lisible, fond "glass" harmonisé + anti-recouvrement rails
       (ADD-ON — aucun override destructif, tout est scoped)
       ========================================================= */
    .hero-intro .intro{
        /* Centre le texte et réserve l’espace des rails gauche/droite */
        display: grid;
        place-items: center;
        padding-inline: calc(var(--btn) + 14px); /* évite les boutons ronds */
    }

    .hero-intro .intro-text{
        /* Pastille lisible mais discrète, sans “cassure” visuelle */
        display: inline-block;
        margin: 0;
        padding: clamp(10px, 1.8vw, 14px) clamp(16px, 3.2vw, 24px);
        border-radius: var(--radius-pill);
        /* superposition douce : un léger radial + un voile très subtil */
        background:
            radial-gradient(120% 180% at 50% 0%, rgba(0,0,0,.36), rgba(0,0,0,.58)),
            linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
        color: #fff;
        text-shadow: 0 1px 2px rgba(0,0,0,.45);
        border: 1px solid rgba(255,255,255,.18);
        box-shadow:
            0 8px 28px rgba(0,0,0,.38),
            inset 0 0 0 1px rgba(255,255,255,.04);
        backdrop-filter: blur(6px) saturate(1.05);
        -webkit-backdrop-filter: blur(6px) saturate(1.05);
        max-width: min(92vw, 820px); /* reste élégant et centré */
        line-height: 1.35;
    }

    /* Variante légèrement plus claire sur photo sombre (classe déjà présente) */
    body.dark-photo .hero-intro .intro-text{
        background:
            radial-gradient(120% 180% at 50% 0%, rgba(0,0,0,.30), rgba(0,0,0,.52)),
            linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
        border-color: rgba(255,255,255,.22);
    }

    /* Micro-ajustements responsive : réduis un peu la réserve latérale si très étroit */
    @media (max-width: 420px){
        .hero-intro .intro{ padding-inline: calc((var(--btn) * .85) + 10px); }
    }

    /* Accessibilité : focus visible si la tagline est focusable (cas CMS) */
    .hero-intro .intro-text:focus{
        outline: 2px solid var(--gold-2);
        outline-offset: 2px;
        border-radius: var(--radius-pill);
    }

    /* =========================================================
       MOBILE FIX — Tagline : bloc lisible, sans "cercle",
       contraint entre les rails, pas de débordement
       ========================================================= */
    @media (max-width: 560px){

        /* On ne réserve plus d'espace énorme sur le conteneur :
           on centre et on laisse le texte gérer sa largeur utile. */
        .hero-intro .intro{
            padding-inline: 12px;
            place-items: center;
        }

        .hero-intro .intro-text{
            display: block;

            /* Largeur max = largeur écran - (2 boutons ronds) - marge de respiration */
            max-width: calc(100vw - (2 * var(--btn)) - 32px);

            /* Plus JAMAIS rond : petit rayon élégant */
            border-radius: var(--radius-md);

            /* Padding plus compact pour éviter le look "pastille" trop haute */
            padding: 10px 12px;

            /* Taille/hauteur adaptées au mobile */
            font-size: clamp(14px, 4vw, 16px);
            line-height: 1.35;

            /* Empêche tout débordement chelou */
            white-space: normal;
            overflow: hidden;
            text-overflow: clip;
            word-break: normal;
            overflow-wrap: anywhere;

            /* Fond un peu plus doux pour mobile (moins de contraste dur) */
            background:
                linear-gradient(180deg, rgba(0,0,0,.46), rgba(0,0,0,.58)),
                linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
            border: 1px solid rgba(255,255,255,.18);
            box-shadow:
                0 6px 20px rgba(0,0,0,.32),
                inset 0 0 0 1px rgba(255,255,255,.03);
            backdrop-filter: blur(5px) saturate(1.02);
            -webkit-backdrop-filter: blur(5px) saturate(1.02);
        }

        /* Variante "photo sombre" un poil plus claire */
        body.dark-photo .hero-intro .intro-text{
            background:
                linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.50)),
                linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
            border-color: rgba(255,255,255,.22);
        }

        /* Si l’espace est très court au-dessus (petits écrans),
           donne un petit souffle sous le logo sans toucher au HTML. */
        .home .hero{
            margin-top: calc(var(--logo-tagline-offset) * .65);
        }
    }

    /* Ultra-petit (téléphones < 380px) : on serre encore un peu */
    @media (max-width: 380px){
        .hero-intro .intro-text{
            max-width: calc(100vw - (2 * var(--btn)) - 24px);
            padding: 9px 10px;
            border-radius: 12px; /* encore moins rond */
        }
    }

    /* =========================================================
       MOBILE+TABLET REFINEMENT — Tagline plus basse, centrée,
       parfaitement encadrée par les rails, rendu luxueux
       ========================================================= */

    /* Petits téléphones → on place le texte nettement plus bas */
    @media (max-width: 560px){
        /* Descendre franchement sous le médaillon, vers le milieu d’écran */
        .home .hero{
            /* entre 180px et ~52vh selon la hauteur dispo */
            margin-top: clamp(10px, 24vh, 52vh);
        }

        .hero-intro .intro{
            display: grid;
            place-items: center;
            padding-inline: 12px;
        }

        .hero-intro .intro-text{
            /* largeur calculée pour rester entre les deux rails + respiration */
            max-width: min(580px, calc(100vw - (2 * var(--btn)) - 32px));
            width: auto;

            /* look plaque, pas de “pastille” ronde */
            padding: 10px 14px;
            border-radius: 12px;

            font-size: clamp(14px, 4vw, 16px);
            line-height: 1.35;
            text-align: center;

            /* sécurité anti-débordement */
            white-space: normal;
            overflow-wrap: anywhere;

            /* fond cohérent avec la veil, sans “cassure” */
            background:
                radial-gradient(120% 120% at 50% 35%, rgba(0,0,0,.36), rgba(0,0,0,.54)),
                linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
            border: 1px solid rgba(255,255,255,.18);
            box-shadow:
                0 10px 26px rgba(0,0,0,.35),
                inset 0 0 0 1px rgba(255,255,255,.03);
            backdrop-filter: blur(6px) saturate(1.03);
            -webkit-backdrop-filter: blur(6px) saturate(1.03);
        }

        /* Légère variante si la photo de fond est sombre : un poil plus clair */
        body.dark-photo .hero-intro .intro-text{
            background:
                radial-gradient(120% 120% at 50% 35%, rgba(0,0,0,.30), rgba(0,0,0,.48)),
                linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
            border-color: rgba(255,255,255,.22);
        }
    }

    /* Très petits écrans (≤ 380px) : on resserre pour conserver l’équilibre */
    @media (max-width: 380px){
        .home .hero{
            /* encore un cran plus bas si l’écran est rikiki */
            margin-top: clamp(140px, 25vh, 52vh);
        }
        .hero-intro .intro-text{
            max-width: calc(100vw - (2 * var(--btn)) - 24px);
            padding: 9px 10px;
            border-radius: 10px;
        }
    }

    /* Petites tablettes en portrait (entre mobile et desktop) */
    @media (min-width: 561px) and (max-width: 820px){
        .home .hero{
            /* position confortable sous le logo, bien au centre visuel */
            margin-top: clamp(140px, 25vh, 52vh);;
        }
        .hero-intro .intro-text{
            max-width: min(640px, calc(100vw - (2 * var(--btn)) - 40px));
            padding: 12px 16px;
            border-radius: 14px;
            font-size: clamp(15px, 2.6vw, 18px);
        }
    }

    --float-dur: 7.2s;
    --shadow-dur: 5.6s;

    --btn: 88px;
    --btn-fs: 13px;

    --bg: #0b0b0b;
    --text: #f3f3f3;
    --muted: #cfcfcf;

    --stroke: rgba(255,255,255,.22);
    --stroke-strong: rgba(212,175,55,.60);
    --stroke-soft: rgba(212,175,55,.34);

    --glass: rgba(255,255,255,.06);
    --accent: rgba(212,175,55,.28);
    --accent-strong: rgba(212,175,55,.44);

    --gold-1: #f0e6d2;
    --gold-2: #d4af37;
    --gold-3: #f6e7b8;

    --radius-lg: 26px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --radius-pill: 999px;

    --shadow-lg: 0 30px 70px rgba(0,0,0,.55);
    --shadow-soft: 0 12px 30px rgba(0,0,0,.38);
    --shadow-float: 0 10px 18px rgba(0,0,0,.35);

    /* ==== AJOUT MINIMAL : taille du logo rond + décalage tagline ==== */
    --logo-medal-size: 170px;      /* > boutons latéraux (88–116px) */
    /*--logo-tagline-offset: clamp(38px, 7vw, 64px);*/
    --logo-tagline-offset: clamp(200px, 15vw, 170px);
}

@media (min-width: 480px){ :root{ --btn: 100px; --btn-fs: 14px; } }
@media (min-width: 992px){
    :root{ --btn: 116px; --btn-fs: 15px; --logo-medal-size: 200px; }
}

/* ===== Base ===== */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body{
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.55 Manrope, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}

/* ===== Viewport / Hero ===== */
.viewport{ position: relative; min-height: 100dvh; isolation: isolate; overflow: hidden; z-index: 0; }

.bg{
    position: absolute; inset: 0;
    background: center/cover no-repeat; background-image: var(--home-bg);
    transform: scale(1.035);
    will-change: transform, filter, opacity;
    transition: transform 1.4s var(--ease-gentle), filter 1.1s var(--ease-gentle), opacity 1.1s var(--ease-gentle);
}
.veil{
    position: absolute; inset: 0;
    background: radial-gradient(105% 62% at 50% 34%, rgba(0,0,0,.18), rgba(0,0,0,.82));
    transition: opacity var(--dur-fade) var(--ease-gentle);
}
.hero{
    position: relative; z-index: 2; min-height: 100dvh;
    display: grid; place-items: center; text-align: center;
    padding: clamp(20px, 6vw, 64px);
}
.brand{
    margin: 0 0 12px;
    font: 700 clamp(36px, 9vw, 76px)/1.1 "Playfair Display", serif;
    background: linear-gradient(92deg, var(--gold-1), var(--gold-2) 55%, var(--gold-3));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    letter-spacing: .4px; text-shadow: 0 2px 24px rgba(0,0,0,.28);
}
.tagline{ margin: 0; font-size: clamp(15px, 3.6vw, 20px); color: var(--muted); opacity: .95; }

/* ↓ Décale le texte de présentation sous le logo rond */
.home .hero{ margin-top: var(--logo-tagline-offset); }

body.panel-open .bg{ transform: scale(1.09); filter: saturate(.9) brightness(.92); }
body.panel-open .veil{ opacity: .94; }

/* ===== Rails ===== */
nav.rail{
    position: fixed;
    top: max(14px, env(safe-area-inset-top, 0px));
    bottom: max(14px, env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; gap: 0;
    z-index: 8;
    pointer-events: auto; transition: opacity var(--dur-rail) var(--ease-gentle);
}
nav.rail.rail-left{  left:  max(16px, env(safe-area-inset-left,  0px)); }
nav.rail.rail-right{ right: max(16px, env(safe-area-inset-right, 0px)); }

/* Boutons ronds flottants */
nav.rail > .rail-btn{
    position: relative; width: var(--btn); height: var(--btn); border-radius: 50%;
    border: 1px solid var(--stroke);
    background:
        radial-gradient(44% 44% at 50% 50%, rgba(0,0,0,.38), rgba(0,0,0,0) 62%),
        radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.18), rgba(255,255,255,.04) 38%, rgba(255,255,255,.02) 62%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    color: transparent; cursor: pointer; touch-action: manipulation;
    backdrop-filter: blur(8px) saturate(1.05); -webkit-backdrop-filter: blur(8px) saturate(1.05);
    outline: none; will-change: transform, opacity;
    box-shadow:
        0 0 0 2px rgba(255,255,255,.12),
        0 0 36px var(--accent-strong),
        var(--shadow-float);
    animation:
        floatY var(--float-dur) linear infinite alternate,
        shadowPulse var(--shadow-dur) ease-in-out infinite alternate;
    transition: opacity .36s var(--ease-gentle), border-color .36s var(--ease-gentle), box-shadow .36s var(--ease-gentle);
}
nav.rail > .rail-btn::before{
    content: var(--label, "•");
    position: absolute; inset: 0; display: grid; place-items: center;
    color: #fff; font-weight: 800; font-size: var(--fs, var(--btn-fs)); letter-spacing: .3px;
    text-shadow: 0 0 2px rgba(0,0,0,.9), 0 1px 6px rgba(0,0,0,.55), 0 0 14px rgba(0,0,0,.45);
}
nav.rail > .rail-btn::after{
    content:""; position:absolute; inset:-6px; border-radius:50%;
    background:
        radial-gradient(82% 82% at 50% 50%, transparent 58%, rgba(212,175,55,.26) 70%, transparent 86%),
        radial-gradient(120% 120% at 30% 10%, rgba(255,255,255,.22), transparent 46%),
        radial-gradient(60% 60% at 72% 82%, rgba(212,175,55,.26), transparent 60%);
    opacity: .95; mix-blend-mode: screen; pointer-events:none;
    animation: auraPulse var(--shadow-dur) ease-in-out infinite alternate;
}
nav.rail > .rail-btn:active{ transform: translateY(1px) scale(.985); }
nav.rail > .rail-btn.outline{
    background:
        radial-gradient(44% 44% at 50% 50%, rgba(0,0,0,.30), rgba(0,0,0,0) 62%),
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}

/* Stagger organique */
nav.rail.rail-left  > .rail-btn:nth-child(1){ animation-delay: 0s, 0s; }
nav.rail.rail-left  > .rail-btn:nth-child(2){ animation-delay: .6s, .3s; }
nav.rail.rail-left  > .rail-btn:nth-child(3){ animation-delay: 1.2s, .6s; }
nav.rail.rail-right > .rail-btn:nth-child(1){ animation-delay: .3s, .15s; }
nav.rail.rail-right > .rail-btn:nth-child(2){ animation-delay: .9s, .45s; }
nav.rail.rail-right > .rail-btn:nth-child(3){ animation-delay: 1.5s, .75s; }

body.panel-open nav.rail{ opacity:0; pointer-events:none; }

/* Labels */
.rail-btn[data-section="bar"]        { --label:"Nos boissons";    --fs: clamp(12px,2.8vw,14px); }
.rail-btn[data-section="restaurant"] { --label:"Nos plats";  --fs: clamp(12px,2.8vw,14px); }
.rail-btn[data-section="evenements"] { --label:"Évents.";  --fs: clamp(12px,2.8vw,14px); }
.rail-btn[data-section="itineraire"] { --label:"Localisation";  --fs: clamp(12px,2.8vw,14px); }
.rail-btn[data-section="contact"]    { --label:"Contact";--fs: clamp(11px,2.6vw,13px); }
a.rail-btn[aria-label="WhatsApp"]    { --label:"WhatsApp";     --fs: clamp(12px,2.8vw,14px); }

/* ===== Photo sombre (home) ===== */
body.dark-photo .bg{ filter: brightness(1.18) contrast(1.03) saturate(1.06); }
body.dark-photo .veil{ background: radial-gradient(120% 70% at 50% 36%, rgba(255,255,255,.12), rgba(0,0,0,.65)); }
body.dark-photo .brand{ text-shadow: 0 6px 28px rgba(255,255,255,.18), 0 2px 24px rgba(0,0,0,.30); }
body.dark-photo .tagline{ color:#fff; opacity:.92; }
body.dark-photo nav.rail{ z-index: 9; }
body.dark-photo nav.rail > .rail-btn{
    border-color: var(--stroke);
    box-shadow:
        0 0 0 2px rgba(255,255,255,.14),
        0 0 42px var(--accent-strong),
        0 20px 36px rgba(0,0,0,.52);
}

/* ===== Panneau ===== */
.panel{
    position: fixed; inset: 0; z-index: 4;
    background: rgba(0,0,0,.56);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-fade) var(--ease-gentle) var(--delay-panel);
}
.panel-inner{
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto;
    width: min(100%, 1100px); height: 96dvh;
    background: linear-gradient(180deg, rgba(16,16,16,.98), rgba(9,9,9,.98));
    border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    transition: transform var(--dur-panel) var(--ease-overs), opacity var(--dur-fade) var(--ease-gentle), box-shadow .9s var(--ease-gentle);
    overflow: auto; will-change: transform, opacity; contain: paint;
}
.panel-header{
    position: sticky; top:0; display:flex; align-items:center; justify-content:center;
    padding: 18px 64px 16px 24px; background: rgba(12,12,12,.78);
    border-bottom:1px solid var(--stroke); backdrop-filter: blur(8px);
}
.panel-title{ margin:0; font:700 clamp(18px,4.2vw,28px)/1 "Playfair Display",serif; }
.panel-close{
    position:absolute; top:12px; right:12px; width:44px; height:44px; border-radius:999px;
    border:1px solid var(--stroke); background:var(--glass); display:grid; place-items:center; color:var(--text);
    cursor:pointer; transition: transform .34s var(--ease-gentle), background-color .34s var(--ease-gentle), border-color .34s var(--ease-gentle);
}
.panel-close:active{ transform: scale(.97); }
.panel-content{ padding:18px 18px 32px; color:var(--muted); font-size:15px; }
.placeholder .key{ color: var(--gold-2); }

body.panel-open .panel{ opacity:1; pointer-events:auto; }
body.panel-open .panel-inner{ box-shadow: 0 44px 110px rgba(0,0,0,.66); }

/* Variantes d’animation du panneau */
body.anim-left .panel-inner{  transform: translateX(calc(-1 * var(--dist-x))); }
body.anim-right .panel-inner{ transform: translateX(var(--dist-x)); }
body.anim-bottom .panel-inner{ transform: translateY(var(--dist-y)); }
body.anim-top .panel-inner{    transform: translateY(calc(-1 * var(--dist-y))); }
body.panel-open.anim-left .panel-inner,
body.panel-open.anim-right .panel-inner,
body.panel-open.anim-bottom .panel-inner,
body.panel-open.anim-top .panel-inner{ transform: translateX(0) translateY(0); }
body.anim-zoom .panel-inner{ transform: scale(.93) translateY(12px); transform-origin:50% 90%; opacity:.001; }
body.panel-open.anim-zoom .panel-inner{ transform: scale(1) translateY(0); opacity:1; }

/* Keyframes flottement/ombre */
@keyframes floatY{ from{ transform: translateY(0); } to{ transform: translateY(calc(-1 * var(--float-amp))); } }
@keyframes shadowPulse{
    from{ box-shadow: 0 0 0 2px rgba(255,255,255/.12), 0 0 36px var(--accent-strong), var(--shadow-float); }
    to  { box-shadow: 0 0 0 2px rgba(255,255,255/.12), 0 0 46px var(--accent-strong), 0 18px 30px rgba(0,0,0,.46); }
}
@keyframes auraPulse{ from{ opacity:.85; } to{ opacity:1; } }

/* A11y */
:focus-visible{ outline:2px solid var(--gold-2); outline-offset:2px; border-radius:8px; }
@media (prefers-reduced-motion: reduce){
    .panel, .panel-inner, nav.rail, .bg, .veil, nav.rail > .rail-btn, nav.rail > .rail-btn::after{
        transition:none !important; animation:none !important;
    }
}
@supports not (backdrop-filter: blur(1px)){
    nav.rail > .rail-btn{ background: rgba(0,0,0,.78); }
    .panel{               background: rgba(0,0,0,.78); }
}

/* ===== Itinéraire ===== */
.it-card{ display:grid; gap:18px; }
.it-head{ display:grid; grid-template-columns:42px 1fr; align-items:center; gap:12px; padding:12px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--stroke); border-radius:var(--radius-md); }
.it-pin{ width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.18), rgba(255,255,255,.06) 45%, rgba(255,255,255,.02) 70%); color: var(--gold-2); border:1px solid var(--stroke); }
.it-title{ margin:0; font:700 18px/1.2 "Playfair Display",serif; color:var(--text); }
.it-sub{ margin:4px 0 0; color:var(--muted); font-size:14px; }
.it-map{ border-radius:16px; border:1px solid var(--stroke); overflow:hidden; background:#0e0e0e; box-shadow:0 12px 30px rgba(0,0,0,.35); }
.it-map-frame{ display:block; width:100%; height:min(58vh, 420px); border:0; filter:saturate(1.05) contrast(1.02); }
.it-cta{ display:grid; gap:12px; }

/* ===== Buttons ===== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; border-radius:999px; font-weight:800; letter-spacing:.2px; border:1px solid var(--stroke); text-decoration:none; color:var(--text); transition: transform .24s var(--ease-gentle), box-shadow .24s var(--ease-gentle), border-color .24s var(--ease-gentle); }
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: linear-gradient(92deg, rgba(240,230,210,.18), rgba(212,175,55,.28) 55%, rgba(246,231,184,.16)); box-shadow: 0 12px 28px rgba(0,0,0,.35); border-color: rgba(212,175,55,.42); }
.btn-primary:hover{ box-shadow: 0 14px 34px rgba(0,0,0,.42); border-color: rgba(212,175,55,.55); }
.btn-ghost{ background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); }
.btn-ghost:hover{ box-shadow: 0 8px 20px rgba(0,0,0,.28); }
.btn-group{ display:flex; flex-wrap:wrap; gap:10px; }
.btn-icon{ font-size:18px; line-height:0; }
.btn.is-loading{ opacity:.7; pointer-events:none; }

/* ===== Contact ===== */
.ct-card{ display:grid; gap:22px; }
.ct-head{ display:grid; grid-template-columns:42px 1fr; align-items:center; gap:12px; padding:12px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--stroke); border-radius:var(--radius-md); }
.ct-icon{ width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.18), rgba(255,255,255,.06) 45%, rgba(255,255,255,.02) 70%); color: var(--gold-2); border:1px solid var(--stroke); }
.ct-title{ margin:0; font:700 18px/1.2 "Playfair Display",serif; color:var(--text); }
.ct-sub{ margin:4px 0 0; color:var(--muted); font-size:14px; }
.ct-section{ padding:12px; border:1px solid var(--stroke); border-radius:var(--radius-md); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); }
.ct-section-title{ margin:0 0 12px; font:700 16px/1.2 "Playfair Display",serif; color:var(--text); }
.ct-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ct-list li{ display:flex; gap:10px; align-items:flex-start; }
.ct-li-ic{ width:22px; text-align:center; opacity:.9; }
.ct-li-txt{ color:var(--muted); }
.ct-li-link{ color:#fff; text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.22); }
.ct-li-link:hover{ border-bottom-color: rgba(212,175,55,.55); }
.res-form{ display:grid; gap:16px; }
.form-grid{ display:grid; gap:12px; }
@media (min-width: 660px){ .form-grid{ grid-template-columns: repeat(3, 1fr); } }
.field{ display:grid; gap:6px; }
.label{ font-weight:700; color:#fff; font-size:14px; }
.input, .select, .textarea{ width:100%; color:#fff; background: rgba(255,255,255,.05); border:1px solid var(--stroke); border-radius: var(--radius-sm); padding: 12px 14px; outline:none; transition: border-color .24s var(--ease-gentle), box-shadow .24s var(--ease-gentle), background-color .24s var(--ease-gentle); box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); }
.input::placeholder, .textarea::placeholder { color: rgba(255,255,255,.55); }
.input:focus, .select:focus, .textarea:focus{ border-color: rgba(212,175,55,.55); box-shadow: 0 0 0 3px rgba(212,175,55,.22); background: rgba(255,255,255,.07); }
.select{ appearance:none; background-image: linear-gradient(45deg,transparent 50%, rgba(255,255,255,.65) 55%), linear-gradient(135deg, rgba(255,255,255,.65) 55%,transparent 60%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px, 6px 6px; background-repeat:no-repeat; }
.hint{ margin:0; font-size:12px; color: rgba(255,255,255,.6); }

.textarea{ resize: vertical; min-height: 90px; }
.form-actions{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.form-legal{ margin:0; font-size:12px; color:rgba(255,255,255,.6); }
.form-status{ margin-top:8px; padding:10px 12px; border-radius: var(--radius-sm); font-weight:700; }
.form-status.success{ background: rgba(22,162,109,.18); border:1px solid rgba(22,162,109,.45); color:#d8fff1; }
.form-status.error{   background: rgba(187,62,74,.18); border:1px solid rgba(187,62,74,.45); color:#ffe6ea; }
.share-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

/* ===== Événements ===== */
.ev-card{ display:grid; gap:18px; }
.ev-head{ display:grid; grid-template-columns:42px 1fr; align-items:center; gap:12px; padding:12px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--stroke); border-radius:var(--radius-md); }
.ev-icon{ width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.18), rgba(255,255,255,.06) 45%, rgba(255,255,255,.02) 70%); color: var(--gold-2); border:1px solid var(--stroke); }
.ev-title{ margin:0; font:700 18px/1.2 "Playfair Display",serif; color:var(--text); }
.ev-sub{ margin:4px 0 0; color:var(--muted); font-size:14px; }
.segmented{
    display:inline-flex; align-items:center; gap:6px; border:1px solid var(--stroke);
    padding:6px; border-radius:999px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    width: max-content; max-width: 100%; overflow:auto; -webkit-overflow-scrolling: touch;
}
.seg-btn{ border:0; background:transparent; color:#fff; padding:8px 14px; border-radius:999px; font-weight:800; cursor:pointer; transition: background-color .24s var(--ease-gentle), box-shadow .24s var(--ease-gentle); display:inline-flex; gap:8px; align-items:center; }
.seg-btn.is-active{ background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.ev-list{ display:grid; gap:14px; }
@media (min-width: 720px){ .ev-list{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
@media (min-width: 1040px){ .ev-list{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
.ev-item{ display:grid; grid-template-rows: auto auto; border:1px solid var(--stroke); border-radius:16px; overflow:hidden; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); box-shadow: 0 12px 30px rgba(0,0,0,.30); transition: transform .28s var(--ease-gentle), box-shadow .28s var(--ease-gentle), border-color .28s var(--ease-gentle); }
.ev-item:hover{ transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,.38); border-color: rgba(255,255,255,.28); }
.ev-media{ position: relative; overflow:hidden; background: #0d0d0d; aspect-ratio: 4 / 3; }
@media (min-width: 720px){ .ev-media{ aspect-ratio: 3 / 2; } }
.ev-media::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.45) 100%), radial-gradient(70% 60% at 50% 10%, rgba(0,0,0,.18), rgba(0,0,0,0) 60%); pointer-events:none; }
.ev-img{ width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.025); filter: saturate(1.06) contrast(1.03) brightness(.94); transition: transform .8s var(--ease-gentle), filter .6s var(--ease-gentle); }
.ev-item:hover .ev-img{ transform: scale(1.05); filter: saturate(1.1) contrast(1.05) brightness(.96); }
.date-badge{ position:absolute; top:10px; left:10px; display:flex; flex-direction:column; align-items:center; width:58px; padding:6px 0; border-radius:12px; background: rgba(0,0,0,.54); color:#fff; border: 1px solid rgba(255,255,255,.18); font-weight:800; box-shadow: 0 6px 18px rgba(0,0,0,.38); }
.date-badge .dow{ font-size:11px; text-transform:uppercase; opacity:.9; }
.date-badge .d{ font-size:20px; line-height:1; }
.date-badge .mo{ font-size:11px; text-transform:uppercase; opacity:.9; }
.type-badge{ position:absolute; top:10px; right:10px; padding:6px 10px; font-weight:800; border-radius:999px; background: rgba(255,255,255,.14); color:#fff; border: 1px solid rgba(255,255,255,.22); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.ev-type-concert .type-badge{ background: linear-gradient(92deg, rgba(240,230,210,.18), rgba(212,175,55,.28)); border-color: rgba(212,175,55,.34); }
.ev-type-match   .type-badge{ background: linear-gradient(92deg, rgba(210,230,255,.18), rgba(55,145,212,.32)); border-color: rgba(55,145,212,.34); }
.ev-info{ padding: 14px; display:grid; gap:8px; }
.ev-meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; color: var(--muted); font-size: 13px; }
.ev-name{ margin:0; color:#fff; font: 700 18px/1.25 "Playfair Display",serif; }
.ev-desc{ margin:0; color: var(--muted); font-size: 14px; }
.ev-tags{ display:flex; flex-wrap: wrap; gap:6px; }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.18); color:#fff; font-size:12px; background: rgba(255,255,255,.06); }
.price{ color:#fff; font-weight:800; }
.ev-ctas{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 4px; }

/* ===== BAR (responsive ++, images) ===== */
.bar-card{ display:grid; gap:18px; }
.bar-head{ display:grid; grid-template-columns:42px 1fr; align-items:center; gap:12px; padding:12px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--stroke); border-radius:var(--radius-md); }
.bar-icon{ width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.18), rgba(255,255,255,.06) 45%, rgba(255,255,255,.02) 70%); color: var(--gold-2); border:1px solid var(--stroke); font-size:18px; }
.bar-title{ margin:0; font:700 18px/1.2 "Playfair Display",serif; color:var(--text); }
.bar-sub{ margin:4px 0 0; color:var(--muted); font-size:14px; }

.bar-tabs.segmented{ width:100%; overflow:auto; }
.bar-list{
    display:grid; gap:14px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
@media (min-width: 720px){
    .bar-list{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
@media (min-width: 1040px){
    .bar-list{ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}

.drink-item{
    display:grid; grid-template-rows: auto auto;
    border:1px solid var(--stroke); border-radius: 16px; overflow:hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    box-shadow: 0 12px 30px rgba(0,0,0,.30);
    transition: transform .28s var(--ease-gentle), box-shadow .28s var(--ease-gentle), border-color .28s var(--ease-gentle);
}
.drink-item:hover{ transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,.38); border-color: rgba(255,255,255,.28); }

.drink-media{ position: relative; overflow:hidden; background:#0d0d0d; aspect-ratio: 4 / 3; }
@media (min-width: 720px){ .drink-media{ aspect-ratio: 3 / 2; } }
.drink-media::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.45) 100%), radial-gradient(70% 60% at 50% 10%, rgba(0,0,0,.18), rgba(0,0,0,0) 60%);
    pointer-events:none;
}
.drink-img{
    width:100%; height:100%; object-fit:contain; display:block;
    transform: scale(1.02);
    filter: saturate(1.06) contrast(1.03) brightness(.94);
    transition: transform .8s var(--ease-gentle), filter .6s var(--ease-gentle);
}
.drink-item:hover .drink-img{ transform: scale(1.05); filter: saturate(1.1) contrast(1.05) brightness(.96); }

.drink-info{ padding: 14px; display:grid; gap:8px; }
.drink-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.drink-name{ margin:0; color:#fff; font: 700 18px/1.25 "Playfair Display",serif; }
.drink-meta{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.badge{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; font-weight:800; border:1px solid rgba(212,175,55,.42); color:#fff; background: linear-gradient(92deg, rgba(240,230,210,.18), rgba(212,175,55,.28) 55%, rgba(246,231,184,.16)); font-size:12px; }
.muted{ color:var(--muted); font-size:12px; }
.drink-desc{ margin:0; color: var(--muted); font-size: 14px; }
.drink-tags{ display:flex; flex-wrap: wrap; gap:6px; }

/* Small polish */
a, button{ -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* === Restaurant grid & cards === */
.resto-grid {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax(240px, 1fr) );
    gap: clamp(14px, 2.2vw, 20px);
    margin-top: 1rem;
}

.food-item {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    overflow: hidden;
    backdrop-filter: blur(6px);
    transition: transform .35s cubic-bezier(.2,.6,.2,1), box-shadow .35s;
}
.food-item:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.25); }

.food-media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.food-img   { width: 100%; height: 100%; object-fit: cover; display: block; }
.flag-menu  {
    position: absolute; top: 10px; left: 10px;
    padding: 6px 10px; font-size: .8rem; letter-spacing: .2px;
    border-radius: 999px;
    background: linear-gradient(135deg,#ffd166,#ef476f);
    color: #222; font-weight: 700;
    box-shadow: 0 6px 18px rgba(239,71,111,.35);
}

.food-info { padding: 12px 14px 16px; }
.food-top  { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.food-name { font-size: 1.05rem; line-height: 1.2; }
.food-desc { opacity:.85; margin:.4rem 0 .6rem; font-size:.95rem; }
.food-tags { display:flex; flex-wrap:wrap; gap:8px; }

/* Onglet “Menu du jour” mis en avant */
.resto-tabs .highlight-menu { position: relative; isolation: isolate; }
.resto-tabs .highlight-menu .badge-soft{
    margin-left: .5rem; font-size: .75rem;
    padding: .2rem .5rem; border-radius: 999px;
    background: rgba(255,255,255,.2);
}
.pulse-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #ffb703; display:inline-block; margin-right:.5rem;
    box-shadow: 0 0 0 rgba(255,183,3,.6);
    animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255,183,3,.6); }
    70% { box-shadow: 0 0 0 12px rgba(255,183,3,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,183,3,0); }
}

/* Responsive */
@media (max-width: 520px) {
    .resto-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   (Conservé) Hero plaque & trims — pas modifiés
   ========================================================= */
.home .bg{ position:absolute; inset:0; z-index:0; }
.home .veil{ position:absolute; inset:0; z-index:1; }
.home .hero{ position:relative; z-index:3; }

/* ===== Corrections hero + logo par défaut ===== */
.home .hero{
    min-height: auto;
    padding: clamp(20px, 6vw, 56px);
}

/* =========================================================
   AJOUT MINIMAL (version qui marchait) :
   Logo rond centré en haut du main + tagline plus basse.
   On n’affecte rien d’autre.
   ========================================================= */

/* Conteneur du logo, centré en haut, non cliquable */
.logo-center-top{
    position: absolute;
    top: clamp(14px, 3.5vh, 28px);
    left: 0; right: 0;
    display: grid; place-items: center;
    z-index: 10;               /* au-dessus des rails (z=8) */
    pointer-events: none;      /* pas cliquable */
}

/* Pastille ronde (plus grande que les boutons latéraux) */
.logo-medal{
    width: var(--logo-medal-size);
    height: var(--logo-medal-size);
    border-radius: 50%;
    border: 1px solid var(--stroke);
    background:
        radial-gradient(44% 44% at 50% 50%, rgba(0,0,0,.38), rgba(0,0,0,0) 62%),
        radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.18), rgba(255,255,255,.04) 38%, rgba(255,255,255,.02) 62%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    box-shadow:
        0 0 0 2px rgba(255,255,255,.12),
        0 0 36px var(--accent-strong),
        var(--shadow-float);
    display: grid; place-items: center;
    overflow: hidden;          /* clip circulaire propre */
    overflow: hidden;       /* sécurité du clip circulaire */
    display: grid;
    place-items: center;
}

/* Aura décorative comme les rails (visuelle uniquement) */
.logo-medal::after{
    content:""; position:absolute; inset:-8px; border-radius:50%;
    background:
        radial-gradient(82% 82% at 50% 50%, transparent 58%, rgba(212,175,55,.26) 70%, transparent 86%),
        radial-gradient(120% 120% at 30% 10%, rgba(255,255,255,.22), transparent 46%),
        radial-gradient(60% 60% at 72% 82%, rgba(212,175,55,.26), transparent 60%);
    opacity:.95; mix-blend-mode: screen; pointer-events:none;
}

/* === Logo médaillon centré EN HAUT (plus grand que les rails) === */
:root{
    --logo-medal-size: calc(var(--btn) * 1.70);   /* >>> plus grand que les boutons */
    --logo-top-gap: max(18px, calc(env(safe-area-inset-top, 0px) + 14px));
}

.logo-center-top{
    position: fixed;
    top: var(--logo-top-gap);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;              /* au-dessus des rails (z:8) et du voile */
    pointer-events: none;     /* non cliquable */
}

.logo-medal{
    width: var(--logo-medal-size);
    height: var(--logo-medal-size);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    clip-path: circle(50% at 50% 50%);
    overflow: hidden;
    display: grid;
    place-items: center;
    border: 1px solid var(--stroke);
    background:
        radial-gradient(44% 44% at 50% 50%, rgba(0,0,0,.38), rgba(0,0,0,0) 62%),
        radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.18), rgba(255,255,255,.04) 38%, rgba(255,255,255,.02) 62%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    box-shadow:
        0 0 0 2px rgba(255,255,255,.12),
        0 0 36px var(--accent-strong),
        var(--shadow-float);
    backdrop-filter: blur(8px) saturate(1.05);
    -webkit-backdrop-filter: blur(8px) saturate(1.05);
    position: relative;
    background:
        /* gardes tes dégradés + */
        center / contain no-repeat url("/chemin/ton-logo.png"),
        radial-gradient(44% 44% at 50% 50%, rgba(0,0,0,.38), rgba(0,0,0,0) 62%),
        radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.18), rgba(255,255,255,.04) 38%, rgba(255,255,255,.02) 62%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

.logo-medal::after{
    content:"";
    position:absolute; inset:-6px; border-radius:50%;
    background:
        radial-gradient(82% 82% at 50% 50%, transparent 58%, rgba(212,175,55,.26) 70%, transparent 86%),
        radial-gradient(120% 120% at 30% 10%, rgba(255,255,255,.22), transparent 46%),
        radial-gradient(60% 60% at 72% 82%, rgba(212,175,55,.26), transparent 60%);
    mix-blend-mode: screen; pointer-events:none; opacity:.95;
}

/* image : pas de déformation, logo entier visible */
.logo-medal__img{
    /* Pas d'object-fit */
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: 90%;

    display: block;
    /* le cercle est géré par .logo-medal (clip-path + border-radius) */
    border-radius: 50%;

    /* centrage assuré par .logo-medal (display:grid; place-items:center) */
    filter:
        drop-shadow(0 0 .5px rgba(255,255,255,.6))
        drop-shadow(0 8px 16px rgba(0,0,0,.45));
}

/* Ajuste légèrement sur petits écrans */
@media (max-width: 420px){
    :root{ --logo-medal-size: calc(var(--btn) * 1.38); }
}





/* Image de fond optionnelle pour les boutons ronds */
nav.rail > .rail-btn{
    /* on garde tes 3 couches existantes + l'image en dernière couche */
    background:
        radial-gradient(44% 44% at 50% 50%, rgba(0,0,0,.38), rgba(0,0,0,0) 62%),
        radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.18), rgba(255,255,255,.04) 38%, rgba(255,255,255,.02) 62%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
        var(--btn-bg, none);
    background-size: auto, auto, auto, cover;   /* l’image = cover */
    background-position: center;                 /* centré sur toutes les couches */
    background-repeat: no-repeat;
}

/* Légère atténuation au hover pour ne pas brûler le label */
nav.rail > .rail-btn:hover{
    box-shadow:
        0 0 0 2px rgba(255,255,255,.12),
        0 0 46px var(--accent-strong),
        0 18px 30px rgba(0,0,0,.46);
    filter: saturate(1.04) contrast(1.02);
}

/* Si jamais une image est très claire, on peut accentuer le voile interne */
nav.rail > .rail-btn.has-bright-img{
    background:
        radial-gradient(44% 44% at 50% 50%, rgba(0,0,0,.46), rgba(0,0,0,0) 62%),
        radial-gradient(120% 120% at 30% 10%, rgba(255,255,255,.16), rgba(255,255,255,.04) 38%, rgba(255,255,255,.02) 62%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
        var(--btn-bg, none);
}
/* Exemples : mets tes vraies URLs */
.rail-btn[data-section="bar"] { --btn-bg: url('/assets/images/home/home2.avif'); }
.rail-btn[data-section="restaurant"] { --btn-bg: url('/assets/images/resto/steak.avif'); }
.rail-btn[data-section="evenements"] { --btn-bg: url('/assets/images/events/placeholder-concert.webp'); }
.rail-btn[data-section="itineraire"] { --btn-bg: url('/assets/images/btn_localisation.webp'); }
.rail-btn[data-section="contact"]    { --btn-bg: url('/assets/images/btn_contact.webp'); }
a.rail-btn[aria-label="WhatsApp"]    { --btn-bg: url('/assets/images/btn3_whatsapp.avif'); }



nav.rail > .rail-btn.outline{
    background:
        radial-gradient(44% 44% at 50% 50%, rgba(0,0,0,.30), rgba(0,0,0,0) 62%),
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
        var(--btn-bg, none);
    background-size: auto, auto, cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* Message provisoire quand il n'y a pas d'items */
.bar-list > .placeholder,
.resto-grid > .placeholder{
    display:block;
    padding: 14px 16px;
    text-align: center;
    color: #fff;                 /* contraste suffisant */
    border: 1px solid var(--stroke);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.resto-grid { grid-template-columns: 1fr; }  /* uniquement le temps du placeholder */
/* Placeholder sobre (sans couleur) */
.bar-list > .placeholder,
.resto-grid > .placeholder{
    grid-column: 1 / -1;      /* occupe toute la ligne dans la grille */
    display: block;
    padding: 12px 14px;
    text-align: center;
    color: var(--muted);       /* texte doux, non coloré */
    border: 1px dashed var(--stroke);
    border-radius: 10px;
    background: transparent;   /* pas de fond */
    font-weight: 600;
}
.bar-list,
.resto-grid,
.ev-list {
    justify-items: center; /* centre chaque carte dans sa colonne */
}

.drink-item,
.food-item,
.ev-item {
    width: 100%;
    max-width: 360px;      /* limite la largeur d’une carte */
    justify-self: center;  /* sécurité de centrage si nécessaire */
}

/* Sur tout petit écran, on laisse la carte prendre la largeur dispo */
@media (max-width: 480px) {
    .drink-item,
    .food-item,
    .ev-item { max-width: 100%; }
}


/* =========================================================
   Tagline lisible, fond "glass" harmonisé + anti-recouvrement rails
   (ADD-ON — aucun override destructif, tout est scoped)
   ========================================================= */
.hero-intro .intro{
    /* Centre le texte et réserve l’espace des rails gauche/droite */
    display: grid;
    place-items: center;
    padding-inline: calc(var(--btn) + 14px); /* évite les boutons ronds */
}

.hero-intro .intro-text{
    /* Pastille lisible mais discrète, sans “cassure” visuelle */
    display: inline-block;
    margin: 0;
    padding: clamp(10px, 1.8vw, 14px) clamp(16px, 3.2vw, 24px);
    border-radius: var(--radius-pill);
    /* superposition douce : un léger radial + un voile très subtil */
    background:
        radial-gradient(120% 180% at 50% 0%, rgba(0,0,0,.36), rgba(0,0,0,.58)),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow:
        0 8px 28px rgba(0,0,0,.38),
        inset 0 0 0 1px rgba(255,255,255,.04);
    backdrop-filter: blur(6px) saturate(1.05);
    -webkit-backdrop-filter: blur(6px) saturate(1.05);
    max-width: min(92vw, 820px); /* reste élégant et centré */
    line-height: 1.35;
}

/* Variante légèrement plus claire sur photo sombre (classe déjà présente) */
body.dark-photo .hero-intro .intro-text{
    background:
        radial-gradient(120% 180% at 50% 0%, rgba(0,0,0,.30), rgba(0,0,0,.52)),
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
    border-color: rgba(255,255,255,.22);
}

/* Micro-ajustements responsive : réduis un peu la réserve latérale si très étroit */
@media (max-width: 420px){
    .hero-intro .intro{ padding-inline: calc((var(--btn) * .85) + 10px); }
}

/* Accessibilité : focus visible si la tagline est focusable (cas CMS) */
.hero-intro .intro-text:focus{
    outline: 2px solid var(--gold-2);
    outline-offset: 2px;
    border-radius: var(--radius-pill);
}

/* =========================================================
   MOBILE FIX — Tagline : bloc lisible, sans "cercle",
   contraint entre les rails, pas de débordement
   ========================================================= */
@media (max-width: 560px){

    /* On ne réserve plus d'espace énorme sur le conteneur :
       on centre et on laisse le texte gérer sa largeur utile. */
    .hero-intro .intro{
        padding-inline: 12px;
        place-items: center;
    }

    .hero-intro .intro-text{
        display: block;

        /* Largeur max = largeur écran - (2 boutons ronds) - marge de respiration */
        max-width: calc(100vw - (2 * var(--btn)) - 32px);

        /* Plus JAMAIS rond : petit rayon élégant */
        border-radius: var(--radius-md);

        /* Padding plus compact pour éviter le look "pastille" trop haute */
        padding: 10px 12px;

        /* Taille/hauteur adaptées au mobile */
        font-size: clamp(14px, 4vw, 16px);
        line-height: 1.35;

        /* Empêche tout débordement chelou */
        white-space: normal;
        overflow: hidden;
        text-overflow: clip;
        word-break: normal;
        overflow-wrap: anywhere;

        /* Fond un peu plus doux pour mobile (moins de contraste dur) */
        background:
            linear-gradient(180deg, rgba(0,0,0,.46), rgba(0,0,0,.58)),
            linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
        border: 1px solid rgba(255,255,255,.18);
        box-shadow:
            0 6px 20px rgba(0,0,0,.32),
            inset 0 0 0 1px rgba(255,255,255,.03);
        backdrop-filter: blur(5px) saturate(1.02);
        -webkit-backdrop-filter: blur(5px) saturate(1.02);
    }

    /* Variante "photo sombre" un poil plus claire */
    body.dark-photo .hero-intro .intro-text{
        background:
            linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.50)),
            linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
        border-color: rgba(255,255,255,.22);
    }

    /* Si l’espace est très court au-dessus (petits écrans),
       donne un petit souffle sous le logo sans toucher au HTML. */
    .home .hero{
        margin-top: calc(var(--logo-tagline-offset) * .65);
    }
}

/* Ultra-petit (téléphones < 380px) : on serre encore un peu */
@media (max-width: 380px){
    .hero-intro .intro-text{
        max-width: calc(100vw - (2 * var(--btn)) - 24px);
        padding: 9px 10px;
        border-radius: 12px; /* encore moins rond */
    }
}

/* =========================================================
   MOBILE+TABLET REFINEMENT — Tagline plus basse, centrée,
   parfaitement encadrée par les rails, rendu luxueux
   ========================================================= */

/* Petits téléphones → on place le texte nettement plus bas */
@media (max-width: 560px){
    /* Descendre franchement sous le médaillon, vers le milieu d’écran */
    .home .hero{
        /* entre 180px et ~52vh selon la hauteur dispo */
        margin-top: clamp(10px, 24vh, 52vh);
    }

    .hero-intro .intro{
        display: grid;
        place-items: center;
        padding-inline: 12px;
    }

    .hero-intro .intro-text{
        /* largeur calculée pour rester entre les deux rails + respiration */
        max-width: min(580px, calc(100vw - (2 * var(--btn)) - 32px));
        width: auto;

        /* look plaque, pas de “pastille” ronde */
        padding: 10px 14px;
        border-radius: 12px;

        font-size: clamp(14px, 4vw, 16px);
        line-height: 1.35;
        text-align: center;

        /* sécurité anti-débordement */
        white-space: normal;
        overflow-wrap: anywhere;

        /* fond cohérent avec la veil, sans “cassure” */
        background:
            radial-gradient(120% 120% at 50% 35%, rgba(0,0,0,.36), rgba(0,0,0,.54)),
            linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
        border: 1px solid rgba(255,255,255,.18);
        box-shadow:
            0 10px 26px rgba(0,0,0,.35),
            inset 0 0 0 1px rgba(255,255,255,.03);
        backdrop-filter: blur(6px) saturate(1.03);
        -webkit-backdrop-filter: blur(6px) saturate(1.03);
    }

    /* Légère variante si la photo de fond est sombre : un poil plus clair */
    body.dark-photo .hero-intro .intro-text{
        background:
            radial-gradient(120% 120% at 50% 35%, rgba(0,0,0,.30), rgba(0,0,0,.48)),
            linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
        border-color: rgba(255,255,255,.22);
    }
}

/* Très petits écrans (≤ 380px) : on resserre pour conserver l’équilibre */
@media (max-width: 380px){
    .home .hero{
        /* encore un cran plus bas si l’écran est rikiki */
        margin-top: clamp(140px, 25vh, 52vh);
    }
    .hero-intro .intro-text{
        max-width: calc(100vw - (2 * var(--btn)) - 24px);
        padding: 9px 10px;
        border-radius: 10px;
    }
}

/* Petites tablettes en portrait (entre mobile et desktop) */
@media (min-width: 561px) and (max-width: 820px){
    .home .hero{
        /* position confortable sous le logo, bien au centre visuel */
        margin-top: clamp(140px, 25vh, 52vh);;
    }
    .hero-intro .intro-text{
        max-width: min(640px, calc(100vw - (2 * var(--btn)) - 40px));
        padding: 12px 16px;
        border-radius: 14px;
        font-size: clamp(15px, 2.6vw, 18px);
    }
}





/* ================================
   FOOTER – Luxe dark glass
   (AJOUT, sans override du reste)
   ================================ */
.site-footer{
    position: relative;
    z-index: 5;
    margin-top: clamp(20px, 6vh, 72px);
    padding: clamp(14px, 3.5vw, 24px) clamp(14px, 5vw, 28px) calc(env(safe-area-inset-bottom, 0px) + 14px);
    background:
        radial-gradient(140% 120% at 50% 0%, rgba(0,0,0,.42), rgba(0,0,0,.68)),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    border-top: 1px solid var(--stroke);
    box-shadow: 0 -18px 38px rgba(0,0,0,.38), inset 0 6px 24px rgba(255,255,255,.02);
    backdrop-filter: blur(8px) saturate(1.05);
    -webkit-backdrop-filter: blur(8px) saturate(1.05);
}

.site-footer .footer-inner{
    max-width: min(1100px, 92vw);
    margin: 0 auto;
    display: grid;
    gap: 12px;
    align-items: center;
    justify-items: center;
    text-align: center;
}

.site-footer .footer-nav{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: center;
    justify-content: center;
}

.site-footer .footer-nav a{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .2px;
    border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    box-shadow: 0 6px 18px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.03);
    transition: transform .22s var(--ease-gentle), box-shadow .22s var(--ease-gentle), border-color .22s var(--ease-gentle), background-color .22s var(--ease-gentle);
}

.site-footer .footer-nav a:hover{
    transform: translateY(-1px);
    border-color: rgba(212,175,55,.44);
    box-shadow: 0 10px 26px rgba(0,0,0,.34), 0 0 36px var(--accent-strong);
}

.site-footer .footer-nav a:focus-visible{
    outline: 2px solid var(--gold-2);
    outline-offset: 2px;
}

.site-footer .footer-meta{
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.site-footer .footer-meta .siret{
    margin-left: .5ch;
    opacity: .9;
}

/* Variante sur photo sombre (cohérence de contraste) */
body.dark-photo .site-footer{
    background:
        radial-gradient(140% 120% at 50% 0%, rgba(0,0,0,.38), rgba(0,0,0,.62)),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
    border-top-color: rgba(255,255,255,.18);
}

/* Compact mobile */
@media (max-width: 520px){
    .site-footer .footer-nav{ gap: 8px 10px; }
    .site-footer .footer-nav a{
        padding: 7px 10px;
        font-weight: 800;
        border-radius: var(--radius-md);
    }
    .site-footer .footer-meta{ font-size: 12px; }
}

/* Si tu affiches le panneau plein écran, le footer garde un léger relief */
body.panel-open .site-footer{
    box-shadow: 0 -10px 24px rgba(0,0,0,.34), inset 0 6px 24px rgba(255,255,255,.02);
}

/* ===========================================================
   TAGLINE – PACK DE 6 DESIGNS (sobre, sérieux, mobile-first)
   Activation : ajouter .tagline-v1 ... .tagline-v6 sur <body>
   =========================================================== */

/* Base commune quand une variante est active */
body[class*="tagline-v"] .hero-intro .intro{
    padding-inline: calc(var(--btn) + 14px);
    display: grid;
    place-items: center;
}
body[class*="tagline-v"] .hero-intro .intro .intro-text{
    display:block;
    margin:0 auto;
    max-width: min(820px, calc(100vw - (2 * var(--btn)) - 24px));
    color:#fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.28);
    /*font-weight:600;*/
    font-size: clamp(15px, 2.2vw, 18px);
    line-height:1.4;
    letter-spacing:.02em;
    background: none; /* on repart de zéro */
    border: 0;
    box-shadow: none;
    padding: 0; /* chaque variante gère son padding */
}

/* Mobile – place la tagline plus bas et compacte */
@media (max-width: 560px){
    body[class*="tagline-v"] .home .hero{
        margin-top: clamp(120px, 24vh, 48vh);
    }
    body[class*="tagline-v"] .hero-intro .intro{
        padding-inline: 12px;
    }
    body[class*="tagline-v"] .hero-intro .intro .intro-text{
        max-width: calc(100vw - (2 * var(--btn)) - 14px);
    }
}

/* =========================================
   V1 — Filet vertical (hôtel 5★, éditorial)
   ========================================= */
body.tagline-v1 .hero-intro .intro .intro-text{
    position: relative;
    padding-left: 18px;
}
body.tagline-v1 .hero-intro .intro .intro-text::before{
    content:"";
    position:absolute; left:0; top: 0.15em; bottom: 0.15em;
    width:1px;
    background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.18));
    box-shadow: 0 0 0 1px rgba(0,0,0,.12) inset;
    border-radius: 1px;
}

/* =========================================
   V2 — Bandeau ultra fin (traits haut/bas)
   ========================================= */
body.tagline-v2 .hero-intro .intro .intro-text{
    padding: 10px 0;
    text-align:center;
    position: relative;
}
body.tagline-v2 .hero-intro .intro .intro-text::before,
body.tagline-v2 .hero-intro .intro .intro-text::after{
    content:"";
    display:block;
    height:1px;
    margin-inline:auto;
    width: min(640px, 82%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
}
body.tagline-v2 .hero-intro .intro .intro-text::before{ margin-bottom:10px; }
body.tagline-v2 .hero-intro .intro .intro-text::after{  margin-top:10px;  }

/* =========================================
   V3 — Ligne traversante derrière le texte
   ========================================= */
body.tagline-v3 .hero-intro .intro .intro-text{
    position: relative;
    display:inline-block;
    padding: 0 12px;
    text-align:center;
    background:
        linear-gradient(0deg, rgba(0,0,0,.24), rgba(0,0,0,0)) 0 52% / 100% 1px no-repeat;
}
@media (max-width:560px){
    body.tagline-v3 .hero-intro .intro .intro-text{ padding: 0 8px; }
}

/* =========================================
   V4 — Soulignement fin façon “plaque”
   ========================================= */
body.tagline-v4 .hero-intro .intro .intro-text{
    position: relative;
    padding-bottom: 10px;
}
body.tagline-v4 .hero-intro .intro .intro-text::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0;
    height:1px;
    background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.55), rgba(255,255,255,.10));
    width: 72%;
    margin: 0 auto;
    border-radius: 1px;
}

/* =========================================
   V5 — Ruban transparent discret (haut)
   ========================================= */
body.tagline-v5 .hero-intro .intro .intro-text{
    display:inline-block;
    padding: 8px 14px;
    background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.30));
    border-top: 1px solid rgba(255,255,255,.18);
    border-radius: 10px 10px 0 0;
    box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
@media (max-width:560px){
    body.tagline-v5 .hero-intro .intro .intro-text{
        padding: 8px 10px;
        border-radius: 8px 8px 0 0;
    }
}

/* =========================================
   V6 — Tirets courts élégants (tick marks)
   ========================================= */
body.tagline-v6 .hero-intro .intro .intro-text{
    position: relative;
    text-align:center;
    padding: 0 22px;
}
body.tagline-v6 .hero-intro .intro .intro-text::before,
body.tagline-v6 .hero-intro .intro .intro-text::after{
    content:"";
    position:absolute; top: 50%;
    width:18px; height:1px;
    background: rgba(255,255,255,.55);
    transform: translateY(-50%);
    border-radius: 1px;
}
body.tagline-v6 .hero-intro .intro .intro-text::before{ left:0; }
body.tagline-v6 .hero-intro .intro .intro-text::after { right:0; }

/* Variante contraste si photo très sombre */
body.dark-photo.tagline-v1 .hero-intro .intro .intro-text::before{ background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.24)); }
body.dark-photo.tagline-v2 .hero-intro .intro .intro-text::before,
body.dark-photo.tagline-v2 .hero-intro .intro .intro-text::after{ background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); }
body.dark-photo.tagline-v3 .hero-intro .intro .intro-text{ background-image: linear-gradient(0deg, rgba(255,255,255,.48), rgba(255,255,255,0)) !important; }
body.dark-photo.tagline-v5 .hero-intro .intro .intro-text{ background: linear-gradient(180deg, rgba(0,0,0,.36), rgba(0,0,0,.26)); border-top-color: rgba(255,255,255,.22); }



/* ================================
   LEGAL PAGES – Intégration luxe
   ================================ */
.legal-page{
    max-width: min(1100px, 92vw);
    margin: clamp(18px, 6vh, 42px) auto;
    padding-bottom: clamp(12px, 4vh, 24px);
}

.legal-hero{
    text-align: center;
    margin-bottom: clamp(18px, 5vh, 32px);
}
.legal-eyebrow{
    margin: 0 0 6px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold-1);
    opacity: .85;
}
.legal-title{
    margin: 0;
    font: 700 clamp(28px, 6vw, 44px)/1.12 "Playfair Display", serif;
    background: linear-gradient(92deg, var(--gold-1), var(--gold-2) 55%, var(--gold-3));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    text-shadow: 0 2px 24px rgba(0,0,0,.28);
}
.legal-sub{
    margin: 8px 0 0;
    color: var(--muted);
    font-size: clamp(14px, 2.6vw, 16px);
    opacity: .95;
}

.legal-card{
    border: 1px solid var(--stroke);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(8px) saturate(1.05);
    -webkit-backdrop-filter: blur(8px) saturate(1.05);
    padding: clamp(16px, 4vw, 28px);
}

.legal-section + .legal-section{
    border-top: 1px dashed var(--stroke);
    margin-top: clamp(14px, 3vw, 22px);
    padding-top: clamp(14px, 3vw, 22px);
}
.legal-section h2{
    margin: 0 0 8px;
    font: 700 clamp(18px, 4vw, 24px)/1.15 "Playfair Display", serif;
    color: #fff;
}
.legal-section p{ color: var(--muted); margin: .4rem 0 .6rem; }
.legal-list{ margin: .2rem 0 .6rem; padding-left: 1.1rem; color: var(--muted); }
.legal-list li{ margin: .2rem 0; }

.kv{ margin: .2rem 0 .4rem; display: grid; gap: 8px; }
.kv > div{ display: grid; grid-template-columns: 160px 1fr; gap: 10px; align-items: baseline; }
.kv dt{ color:#fff; font-weight: 700; }
.kv dd{ margin: 0; color: var(--muted); }
@media (max-width: 560px){
    .kv > div{ grid-template-columns: 1fr; }
}

.legal-table{
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--stroke);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,.03);
}
.legal-table thead th{
    text-align: left;
    font-weight: 800;
    padding: 10px 12px;
    background: rgba(255,255,255,.06);
    border-bottom: 1px solid var(--stroke);
    color: #fff;
}
.legal-table tbody td{
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: var(--muted);
}
.legal-table tbody tr:last-child td{ border-bottom: 0; }

.legal-callout{
    margin: 10px 0;
    padding: 12px 14px;
    border: 1px solid rgba(212,175,55,.42);
    border-radius: var(--radius-md);
    background: linear-gradient(92deg, rgba(240,230,210,.08), rgba(212,175,55,.14) 55%, rgba(246,231,184,.08));
    color: #fff;
    box-shadow: 0 12px 28px rgba(0,0,0,.25);
}

.legal-footer-nav{
    display: flex; gap: 10px; flex-wrap: wrap;
    justify-content: center;
    margin-top: clamp(16px, 5vh, 28px);
}
.btn-ghost-legal, .btn-primary-legal{
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 14px; border-radius: var(--radius-pill);
    text-decoration: none; font-weight: 800; letter-spacing: .2px;
    border: 1px solid var(--stroke); color: #fff;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    transition: transform .22s var(--ease-gentle), box-shadow .22s var(--ease-gentle), border-color .22s var(--ease-gentle);
}
.btn-ghost-legal:hover, .btn-primary-legal:hover{
    transform: translateY(-1px);
    border-color: rgba(212,175,55,.44);
    box-shadow: 0 10px 26px rgba(0,0,0,.34), 0 0 36px var(--accent-strong);
}
.btn-primary-legal{
    border-color: rgba(212,175,55,.42);
    background: linear-gradient(92deg, rgba(240,230,210,.18), rgba(212,175,55,.28) 55%, rgba(246,231,184,.16));
}

/* Harmonisation liens dans le texte */
.legal-card a{
    color: #fff; text-decoration: none; border-bottom: 1px dashed rgba(255,255,255,.22);
}
.legal-card a:hover{ border-bottom-color: rgba(212,175,55,.55); }

/* ===== Legal Header (brand) ===== */
.legal-header{
    position: sticky; top: 0; z-index: 20;
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
    padding: clamp(10px, 2.5vw, 16px) clamp(12px, 4vw, 22px);
    border-bottom: 1px solid var(--stroke);
    background:
        radial-gradient(140% 120% at 50% 0%, rgba(0,0,0,.42), rgba(0,0,0,.68)),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    backdrop-filter: blur(8px) saturate(1.05);
    -webkit-backdrop-filter: blur(8px) saturate(1.05);
    box-shadow: 0 8px 28px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.02);
}

.legal-header__brand{
    display: inline-flex; align-items: center; gap: 12px;
    text-decoration: none; color: #fff;
}

.legal-header__logo{
    width: clamp(40px, 8vw, 56px); height: clamp(40px, 8vw, 56px);
    border-radius: 50%;
    border: 1px solid var(--stroke);
    background: radial-gradient(44% 44% at 50% 50%, rgba(0,0,0,.28), rgba(0,0,0,0) 62%);
    box-shadow: 0 0 0 2px rgba(255,255,255,.08), 0 10px 20px rgba(0,0,0,.35);
    object-fit: cover;
}

.legal-header__title{
    font: 700 clamp(16px, 3.6vw, 20px)/1.1 "Playfair Display", serif;
    background: linear-gradient(92deg, var(--gold-1), var(--gold-2) 55%, var(--gold-3));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    letter-spacing: .2px;
}

.legal-header__nav{ display: flex; align-items: center; gap: 8px; }

.legal-header__back{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: var(--radius-pill);
    border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    color: #fff; text-decoration: none; font-weight: 800; letter-spacing: .2px;
    box-shadow: 0 6px 18px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.03);
    transition: transform .2s var(--ease-gentle), box-shadow .2s var(--ease-gentle), border-color .2s var(--ease-gentle);
}
.legal-header__back:hover{
    transform: translateY(-1px);
    border-color: rgba(212,175,55,.44);
    box-shadow: 0 10px 26px rgba(0,0,0,.34), 0 0 24px var(--accent-strong);
}

/* Compact mobile */
@media (max-width: 460px){
    .legal-header{ grid-template-columns: 1fr auto; gap: 8px; }
    .legal-header__title{ display:none; } /* garde le logo pour l’identité, gagne de la place */
}

.zIndex1{
    z-index: 99999999;
}

/* Bouton central "Notre concept" — toujours visible, par-dessus le voile */
.concept-cta {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: clamp(88px, 35vh, 350px) !important;
    z-index: 9999;
    pointer-events: auto;
}
.concept-cta .btn {
    border-radius: 9999px;
    padding: 10px 16px;
    backdrop-filter: blur(6px);
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.28);
    color: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
@media (max-width: 390px) {
    .concept-cta { top: 100px; }
}

/* ======================
   SECTION CONCEPT (cc-*)
   ====================== */

.cc-card{
    max-width: min(1100px, 92vw);
    margin: 0 auto;
    display: grid;
    gap: 22px;
    isolation: isolate; /* isole du fond/voile global */
}

/* En-tête */
.cc-head{display:flex;align-items:center;gap:14px;}
.cc-icon{
    font-size: 20px;width:40px;height:40px;
    display:grid;place-items:center;border-radius:999px;
    background: rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(4px);
}
.cc-titles{display:grid;gap:4px}
.cc-title{font-size: clamp(20px, 2.2vw, 28px);letter-spacing: .3px;font-weight: 700;}
.cc-sub{font-size: clamp(12px, 1.4vw, 14px);opacity:.85;}

/* Accroche */
.cc-lead{
    font-size: clamp(14px, 1.7vw, 16px);
    line-height: 1.65;
    opacity:.95;
    text-wrap: pretty;
}

/* Regroupe grilles + vidéo avec un vrai espacement interne */
.cc-media{
    display:grid;
    gap: clamp(14px, 2.2vw, 24px);
}

/* Grille d’images */
.cc-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 1024px){ .cc-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .cc-grid{ grid-template-columns: 1fr; } }

.cc-fig{
    aspect-ratio: 4/3;
    border-radius: 18px;
    overflow:hidden;
    background: transparent;
    border:1px solid rgba(255,255,255,.12);
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    position: relative;
}
/* >>> AUCUNE ALTÉRATION : pas de filtre, pas d’overlay, pas de blend */
.cc-fig img{
    width:100%;
    height:100%;
    object-fit: cover;
    object-position: center;
    display:block;
    /*transform: none;*/
    /*transition: transform .35s ease;*/
    /*filter: none !important;*/
    /*mix-blend-mode: normal !important;*/
}
.cc-fig:hover img{
    transform: scale(1.03);
}
/* supprime tout éventuel halo/overlay précédent */
.cc-fig::after{
    content:none !important;
}

/* Vidéo centrée et non géante */
.cc-video{
    margin-top: 6px;
    margin-bottom: clamp(14px, 2.2vw, 24px);
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.12);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    aspect-ratio: 16/9;
    max-width: 980px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
}
.cc-video-el{
    width:100%;
    height:100%;
    object-fit: cover;
    object-position: center;
    display:block;
    margin: 0 auto;
}

/* Liste points forts */
.cc-highlights{
    display:grid; gap:10px;
    padding:0; margin: 6px 0 0 0;
    list-style:none !important;
}
.cc-highlights li{
    position:relative; padding-left:28px;
    line-height:1.5;
}
.cc-highlights li::before{
    content:"✓";
    position:absolute; left:0; top:0;
    width:20px; height:20px; display:grid; place-items:center;
    border-radius:50%;
    font-size:12px;
    background: rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(4px);
}

/* Couleurs en thème sombre */
.dark-photo .cc-title{ color:#fff; }
.dark-photo .cc-sub,
.dark-photo .cc-lead,
.dark-photo .cc-highlights{ color: rgba(255,255,255,.92); }

/* Mobile : vidéo plus compacte */
@media (max-width: 480px){
    .cc-video{ aspect-ratio: 4/3; max-width: 92vw; }
}


/* ==== PATCH CONCEPT — Afficher les images telles quelles & espacer la vidéo ==== */

/* Aucune altération des images à l’intérieur du bloc concept */
.cc-card img,
.cc-fig img {
    filter: none !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
}

/* Supprime tout voile/overlay résiduel éventuel */
.cc-fig::before,
.cc-fig::after {
    content: none !important;
    background: none !important;
}

/* S’assure que le conteneur n’hérite pas d’une opacité */
.cc-card,
.cc-grid,
.cc-fig {
    opacity: 1 !important;
}

/* Si un style global assombrit toutes les <img> en thème sombre, on le neutralise ici pour la section concept */
.dark-photo .cc-card img {
    filter: none !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
}

/* Espacement net autour de la vidéo (au-dessus et en-dessous) */
.cc-media {
    gap: clamp(16px, 2.4vw, 28px) !important;
}
.cc-media .cc-video {
    margin: clamp(12px, 2vw, 24px) auto clamp(16px, 2.6vw, 32px) !important;
}

/* Centre strict de la vidéo et empêche tout écrasement */
.cc-video {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 980px;
    aspect-ratio: 16/9;
    margin-inline: auto;
}
.cc-video-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Sécurité : isole la carte de toute superposition globale (ex. .veil) */
.cc-card { isolation: isolate !important; }

/* Hide the "Notre concept" button whenever the #panel is open */
body:has(#panel[aria-hidden="false"]) .concept-cta {
    display: none !important;
}





.segmented{
    position: relative;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 12px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.segmented::-webkit-scrollbar{ display:none; }

/* Indicateurs */
.segmented::before,
.segmented::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:38px;
    pointer-events:none;
    display:none;
    z-index:4;
}

/* Gauche */
.segmented::before{
    left:0;
    background:
        url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 6l-6 6 6 6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 10px center no-repeat,
        linear-gradient(to right, rgba(0,0,0,.45), rgba(0,0,0,0));
}

/* Droite */
.segmented::after{
    right:0;
    background:
        url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") calc(100% - 10px) center no-repeat,
        linear-gradient(to left, rgba(0,0,0,.45), rgba(0,0,0,0));
}

.segmented.show-left::before{ display:block; }
.segmented.show-right::after{ display:block; }

.footer-social{
    margin-top:8px;
    display:flex;
    gap:10px;
}
.footer-social .social-link{
    display:inline-grid;
    place-items:center;
    width:34px; height:34px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
}
.dark-photo .footer-social .social-link svg{ fill:#fff; }



.wa-toast{
    position: fixed;
    top: 18px;                  /* haut de l’écran */
    left: 50%;
    transform: translateX(-50%) translateY(-14px);
    min-width: clamp(280px, 70vw, 640px);
    max-width: 90vw;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    /* Style premium + contraste fort */
    background: linear-gradient(180deg, rgba(20,23,34,.98), rgba(10,12,20,.98));
    color:#fff;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow:
            0 18px 36px rgba(0,0,0,.45),
            inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(10px);

    font: 15px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    letter-spacing: .2px;

    opacity: 0;
    pointer-events: none;
    z-index: 100000;            /* au-dessus du panel & des rails */
    transition: opacity .18s ease, transform .18s ease;
}

.wa-toast.show{
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.wa-toast .wa-ic{
    font-size: 18px;
    filter: saturate(1.2);
}

.wa-toast .wa-txt{
    display: inline-block;
    white-space: normal;
    word-break: break-word;
}

/* Option : petit ajustement sur très petits écrans */
@media (max-width: 420px){
    .wa-toast{ padding: 12px 14px; font-size: 14px; min-width: 82vw; }
}



.site-footer .footer-meta{
    margin: 10px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid rgba(255,255,255,.10);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    letter-spacing: .2px;
    color: rgba(255,255,255,.85);
}
.footer-meta a{ color: #fff; text-decoration: none; border-bottom: 1px dashed rgba(255,255,255,.25); }
.footer-meta a:hover{ border-bottom-color: rgba(255,255,255,.55); }

.footer-meta .fm-ic{
    width: 14px; height: 14px; margin-right: 6px; opacity: .9; vertical-align: -2px;
}
.footer-meta .fm-sep{
    width: 6px; height: 6px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff 0, rgba(255,255,255,.6) 35%, rgba(255,255,255,0) 70%);
    opacity: .6;
}

/* Petits écrans : empilage propre */
@media (max-width: 520px){
    .site-footer .footer-meta{ gap: 6px 10px; font-size: 12.5px; }
    .footer-meta .fm-sep{ display: none; } /* on retire le séparateur pour aérer */
}


/* Assure que le panneau passe au-dessus du reste du site */
.panel{
    position: fixed;           /* normalement déjà le cas */
    inset: 0;
    z-index: 10000;            /* au-dessus de tout (rails, concept-cta, etc.) */
}

/* Le conteneur qui scrolle */
.panel .panel-inner{
    position: relative;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 0;                /* base pour le contenu */
}

/* Header collant au sommet, toujours visible au scroll */
.panel .panel-header{
    position: sticky;
    top: 0;
    z-index: 5;                /* au-dessus du contenu qui défile */
    display: flex;
    align-items: center;
    justify-content: space-between;

    /* Visuel : fond solide + blur pour éviter que le contenu passe "au-dessus" visuellement */
    background: rgba(15, 17, 23, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* La croix elle-même, encore un cran au-dessus du header */
.panel .panel-close{
    z-index: 6;                /* > header */
    pointer-events: auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 9999px;
    display: grid;                 /* centrage fiable */
    place-items: center;           /* centre horizontal + vertical */
    line-height: 0;                /* évite tout décalage lié à la ligne */
    background: rgba(15,17,23,.55);
    border: 1px solid rgba(255,255,255,.12);
    cursor: pointer;
}
/* L’icône SVG : pas d’espace résiduel */
.panel .panel-close svg{
    width: 20px;
    height: 20px;
    display: block;                /* supprime l’espace inline */
}

/* Optionnel : léger effet hover, sans bouger la centration */
.panel .panel-close:hover{
    background: rgba(15,17,23,.7);
}

/* Évite que des éléments internes créent des couches au-dessus du header */
.panel .panel-content > *{
    position: relative;
    z-index: 1;                /* sous le header (5/6) */
}

/* Si certains blocs ont des z-index agressifs, on les bride dans le panneau */
.panel .panel-content [style*="z-index"],
.panel .panel-content .has-z {
    z-index: 1 !important;
}

.error-page{
    min-height: 70vh;
    display: grid;
    place-items: center;
    padding: 48px 16px;
}
.error-card{
    width: min(720px, 100%);
    padding: 28px;
    border-radius: 18px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    text-align: center;
}
.error-card h1{ margin: 0 0 10px; font-size: 44px; }
.error-card p{ margin: 0 0 18px; opacity: .9; }