/* =========================================================
   base.css : commun à toutes les pages (header, footer, boutons, barre mobile)
   Les styles propres à chaque page restent dans css/<page>.css
   ========================================================= */
:root {
    /* palette d'origine conservée */
    --color-1: #1f3d3a;
    --color-2: #0f2a28;
    --color-3: #2b2b2b;
    --color-4: #e7dccb;
    --color-5: #f6f3ee;
    --color-6: #d52b1e;
    --color-7: #1b4d45;
    /* alias lisibles */
    --green: #1b4d45;
    --green-dk: #0f2a28;
    --green-xdk: #0a1e1c;
    --beige: #e7dccb;
    --cream: #f6f3ee;
    --red: #d52b1e;
    --red-dk: #8e1a12;
    --muted: #cfc6b6;
    --gutter: clamp(16px, 5vw, 80px);
    --font: "League Spartan", system-ui, sans-serif;
    --display: "Anton", Impact, "Arial Narrow", sans-serif;
}

html { scroll-behavior: smooth; }
body { font-family: var(--font); }
.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: .9; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- boutons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--font); font-weight: 800; font-size: 17px; letter-spacing: .02em; line-height: 1;
    border-radius: 999px; padding: 15px 26px; border: 0; cursor: pointer; text-decoration: none;
    transition: transform .15s, background-color .15s, box-shadow .15s;
}
.btn:active { transform: scale(.97); }
.btn-sm { padding: 11px 20px; font-size: 15px; }
.btn-red, .btn-red:visited { background: var(--red); color: #fff; box-shadow: 0 5px 0 var(--red-dk); }
.btn-red:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--red-dk); }
.btn-cream, .btn-cream:visited { background: var(--cream); color: var(--green-dk); }
.btn-cream:hover { background: #fff; transform: translateY(-2px); }
.btn-ghost, .btn-ghost:visited { color: var(--cream); box-shadow: inset 0 0 0 2px rgba(246, 243, 238, .75); }
.btn-ghost:hover { background: rgba(246, 243, 238, .12); }

/* ---------- header ---------- */
.hdr {
    position: fixed; z-index: 100; inset: 0 0 auto 0;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px max(var(--gutter), calc((100vw - 1640px) / 2));
    font-family: var(--font);
    transition: background-color .3s, padding .3s, box-shadow .3s;
}
.hdr.scrolled, .hdr.solid { background: rgba(10, 30, 28, .94); padding-block: 6px; box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
/* Le flou est posé sur un pseudo-élément et pas sur .hdr : un backdrop-filter sur .hdr
   transformerait le header en « conteneur » du menu mobile (position: fixed), qui ne ferait
   alors plus que la hauteur du header au lieu de tout l'écran. */
@supports (backdrop-filter: blur(8px)) {
    .hdr.scrolled, .hdr.solid { background: transparent; }
    .hdr::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s; background: rgba(10, 30, 28, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
    .hdr.scrolled::before, .hdr.solid::before { opacity: 1; }
}
/* logo et bouton toujours AU-DESSUS du menu mobile ouvert (z-index du menu : 1) */
.hdr-logo, .hdr-right { position: relative; z-index: 2; }
.hdr-logo { display: block; flex: none; }
.hdr-logo img { height: 64px; width: auto; display: block; transition: height .3s; }
.hdr.scrolled .hdr-logo img { height: 48px; }
.hdr-nav { display: flex; gap: clamp(14px, 2vw, 30px); }
.hdr-nav a, .hdr-nav a:visited {
    color: var(--cream); text-decoration: none; font-weight: 600; font-size: 17px; padding: 6px 0; position: relative;
}
.hdr-nav a::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--red);
    transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.hdr-nav a:hover::after, .hdr-nav a.on::after { transform: scaleX(1); }
.hdr-nav .hdr-nav-call { display: none; }
.hdr-right { display: flex; align-items: center; gap: 10px; }
.hdr-burger { display: none; width: 46px; height: 46px; border: 0; border-radius: 12px; background: rgba(246, 243, 238, .12); cursor: pointer; position: relative; z-index: 2; }
.hdr-burger span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--cream); border-radius: 2px; transition: transform .3s, opacity .2s; }
.hdr-burger span:nth-child(1) { top: 15px; }
.hdr-burger span:nth-child(2) { top: 22px; }
.hdr-burger span:nth-child(3) { top: 29px; }
.menu-open .hdr-burger { background: var(--red); }
.menu-open .hdr-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-open .hdr-burger span:nth-child(2) { opacity: 0; }
.menu-open .hdr-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hdr-burger-label { display: none; }
.hdr-nav .hdr-nav-home { display: none; }

@media (max-width: 900px) {
    .hdr-burger { display: block; }
    /*
     * Menu mobile animé :
     *  1. le fond vert s'ouvre en cercle depuis le bouton (clip-path)
     *  2. les liens apparaissent un par un en « pop » (léger rebond), décalés grâce à --i (défini dans header.php)
     *  3. les montagnes montent en bas de l'écran
     * À la fermeture, tout repart vite et en même temps (pas de décalage : on ne fait pas attendre l'utilisateur).
     */
    .hdr-nav {
        --origin: calc(100% - max(var(--gutter), 16px) - 23px) 38px; /* centre du bouton burger */
        position: fixed; inset: 0; z-index: 1; flex-direction: column; justify-content: center; align-items: flex-start;
        gap: 6px; padding: 90px var(--gutter) 40px; background: var(--green-dk); overflow: hidden;
        clip-path: circle(0 at var(--origin));
        visibility: hidden;
        transition: clip-path .45s cubic-bezier(.7, 0, .3, 1), visibility 0s linear .45s;
    }
    .menu-open .hdr-nav {
        clip-path: circle(150% at var(--origin));
        visibility: visible;
        transition: clip-path .65s cubic-bezier(.7, 0, .3, 1), visibility 0s;
    }
    .hdr-nav a {
        font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(40px, 11vw, 64px); line-height: 1.05;
        opacity: 0; transform: translateY(30px) scale(.88) rotate(-2deg); transform-origin: left center;
        transition: opacity .2s ease, transform .2s ease;
    }
    .menu-open .hdr-nav a {
        opacity: 1; transform: none;
        transition:
            opacity .4s ease calc(.2s + var(--i, 0) * .065s),
            transform .65s cubic-bezier(.34, 1.56, .64, 1) calc(.2s + var(--i, 0) * .065s); /* courbe à rebond = effet pop */
    }
    .menu-open .hdr-nav a:active { transform: scale(.96); transition-duration: .1s; transition-delay: 0s; }
    .hdr-nav a::after { display: none; }
    .hdr-nav a.on { color: var(--beige); }
    .hdr-nav a.on::before { content: ""; display: inline-block; width: .32em; height: .32em; margin: 0 .3em .18em 0; border-radius: 50%; background: var(--red); vertical-align: middle; }
    /* montagnes en bas du menu (mêmes couleurs que l'accueil) */
    .hdr-nav::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 18vh; pointer-events: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 300' preserveAspectRatio='none'%3E%3Cpath d='M0 300V190L93 150L173 175L280 120L373 150L480 95L587 130L693 75L800 110L907 55L1013 95L1120 40L1227 85L1333 30L1440 75L1547 25L1653 70L1747 40L1840 75L1920 50V300Z' fill='%23163d38'/%3E%3Cpath d='M0 300V225L80 195L160 215L267 170L360 195L467 150L573 180L680 130L787 160L880 115L987 145L1093 95L1200 130L1307 85L1413 120L1520 75L1627 110L1733 85L1840 115L1920 95V300Z' fill='%231b4d45'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
        transform: translateY(100%); transition: transform .3s ease;
    }
    .menu-open .hdr-nav::after { transform: none; transition: transform .9s cubic-bezier(.2, .8, .2, 1) .3s; }
    .hdr-nav .hdr-nav-call { display: block; font-family: var(--font); text-transform: none; font-size: 18px; font-weight: 800; color: var(--red); margin-top: 24px; }
    .hdr-nav .hdr-nav-home { display: block; }
    /* « Fermer » écrit à côté de la croix quand le menu est ouvert */
    .menu-open .hdr-burger-label { display: block; color: var(--cream); font-weight: 800; font-size: 15px; letter-spacing: .04em; cursor: pointer; }
    .hdr-logo img { height: 52px; }
    .hdr .btn-red { display: none; }
    body.menu-open { overflow: hidden; }
}

/* ---------- footer ---------- */
.ft {
    width: 100%; box-sizing: border-box; background: var(--green-xdk); color: var(--cream);
    padding: clamp(56px, 8vw, 96px) var(--gutter) 28px; font-family: var(--font);
}
.ft * { box-sizing: border-box; }
.ft-title { font-family: var(--display); text-transform: uppercase; color: var(--beige); opacity: .9; text-align: center; font-size: clamp(48px, 9vw, 120px); line-height: .9; margin: 0 0 clamp(32px, 5vw, 56px); }
.ft-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1300px; margin: 0 auto; }
.ft-card { background: var(--green); border-radius: 22px; padding: 26px; min-width: 0; }
.ft-h { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--beige); margin: 0 0 14px; }
.ft-big, .ft-big:visited { font-family: var(--display); font-size: clamp(26px, 2.4vw, 32px); line-height: 1.1; color: var(--cream); text-decoration: none; margin: 0; display: block; }
.ft-muted { color: var(--muted); line-height: 1.45; margin: 8px 0 0; }
.ft-hours { margin: 0; display: grid; gap: 10px; }
.ft-hours div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(255, 255, 255, .1); padding-bottom: 10px; }
.ft-hours dt { font-weight: 700; }
.ft-hours dd { margin: 0; text-align: right; }
.ft-hours .closed dd { color: #e8a39b; }
.ft-note { margin: 14px 0 0; background: rgba(213, 43, 30, .18); border-radius: 10px; padding: 10px 12px; font-weight: 600; }
.ft-status { margin: 14px 0 0; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.ft-status:empty { display: none; }
.ft-status::before, .status-dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #3fbf63; flex: none; }
.ft-status.closed::before, .status-dot.closed::before { background: var(--red); }
.ft-map { position: relative; display: block; margin-top: 16px; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; }
.ft-map img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; transition: transform .5s; }
.ft-map:hover img { transform: scale(1.04); }
.ft-map .btn { position: absolute; left: 12px; bottom: 12px; }
.ft-social { display: flex; flex-direction: column; gap: 8px; }
.ft-social a, .ft-social a:visited {
    --brand: var(--beige);
    display: flex; align-items: center; gap: 12px;
    color: var(--cream); font-weight: 700; text-decoration: none; padding: 8px 14px 8px 8px; border-radius: 14px;
    background: rgba(255, 255, 255, .07); transition: background .2s, transform .2s;
}
/* couleur de marque révélée au survol */
.ft-social .ft-insta { --brand: #e1306c; }
.ft-social .ft-fb { --brand: #1877f2; }
.ft-social .ft-google { --brand: #fff; } /* fond blanc au survol, comme le logo Google */
.ft-ico-wrap {
    width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center;
    background: rgba(246, 243, 238, .1); color: var(--cream); transition: background .2s, color .2s, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.ft-ico { width: 22px; height: 22px; }
.ft-label { flex: 1; }
.ft-arrow { width: 18px; height: 18px; opacity: .45; transition: transform .2s, opacity .2s; }
.ft-social a:hover { background: rgba(255, 255, 255, .13); }
.ft-social a:hover .ft-ico-wrap { background: var(--brand); color: #fff; transform: rotate(-8deg) scale(1.08); }
/* « G » Google : dégradé conique bleu / vert / jaune / rouge (couleurs officielles),
   découpé par la forme du G (icône Tabler brand-google en masque). Il tourne doucement
   au repos et accélère au survol. @property permet d'animer l'angle du dégradé. */
@property --g-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.ft-g {
    width: 22px; height: 22px; display: block;
    background: conic-gradient(from var(--g-angle), #4285f4 0deg 90deg, #34a853 90deg 180deg, #fbbc05 180deg 250deg, #ea4335 250deg 360deg);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.945 11a9 9 0 1 1 -3.284 -5.997l-2.655 2.392a5.5 5.5 0 1 0 2.119 6.605h-4.125v-3h7.945z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.945 11a9 9 0 1 1 -3.284 -5.997l-2.655 2.392a5.5 5.5 0 1 0 2.119 6.605h-4.125v-3h7.945z'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: g-spin 6s linear infinite;
}
.ft-google:hover .ft-g, .ft-google:focus-visible .ft-g { animation-duration: 1.6s; }
@keyframes g-spin { to { --g-angle: 360deg; } }
/* le fond blanc arrive avec un léger « flash » qui balaie la pastille */
.ft-google .ft-ico-wrap { position: relative; overflow: hidden; }
.ft-google .ft-ico-wrap::before {
    content: ""; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 35%, rgba(66, 133, 244, .25) 45%, rgba(234, 67, 53, .25) 55%, transparent 65%);
    transform: translateX(-120%); transition: transform 0s;
}
.ft-google:hover .ft-ico-wrap::before { transform: translateX(120%); transition: transform .7s ease; }
.ft-google .ft-g { position: relative; }
.ft-social a:hover .ft-arrow { opacity: 1; transform: translate(2px, -2px); }
.ft-social a:focus-visible { outline: 2px solid var(--beige); outline-offset: 2px; }
.ft-bottom { max-width: 1300px; margin: 28px auto 0; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: #a99f90; font-weight: 600; }
.ft-author, .ft-author:visited { color: #ff7f11; text-decoration: none; }
@media (max-width: 900px) { .ft-grid { grid-template-columns: 1fr 1fr; } .ft-card:nth-child(2) { grid-row: span 2; } }
@media (max-width: 640px) { .ft-grid { grid-template-columns: 1fr; } .ft-card:nth-child(2) { grid-row: auto; } }

/* ---------- barre d'action mobile ---------- */
.mbar { display: none; }
@media (max-width: 700px) {
    .mbar {
        display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; z-index: 90;
        left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
        transform: translateY(150%); transition: transform .3s;
    }
    .mbar.show { transform: none; }
    .mbar .btn { padding: 15px 10px; }
    .ft { padding-bottom: 100px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}