/* =========================================================
   SITE.CSS — Base globale (hors header) — version factorisée
   ========================================================= */

/* ---------- Palette & variables ---------- */
:root {
    --brown: #4A2B22;
    --brown-ink: #311911;
    --accent: #C87044;
    --cream: #F7F1EA;
    --cream-2: #EFE5DA;
    --text: #1A1512;
    --white: #fff;
    --dark: #151110;
    --radius: 18px;
    --shadow: 0 16px 36px rgba(0, 0, 0, .12);
    --cta: #E67E37;
    --cta-ink: #C76528;
}

/* ---------- Reset léger / bases ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

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

/* Sécurise TOUTES les images par défaut */
.img-safe {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* pas de crop */

/* Les logos doivent s’adapter au cadre sans être rognés */
.logo-fit {
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* ---------- Typo ---------- */
body {
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--text);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Oswald', sans-serif;
    letter-spacing: .02em;
    margin: 0 0 .5rem;
}

.lead {
    font-size: clamp(1.06rem, 1.2vw, 1.125rem);
}

/* ---------- Utilitaires titres ---------- */
.tt,
.tt-sm {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.tt-sm {
    font-size: 1.05rem;
}

/* ---------- Layout / sections ---------- */
.section {
    padding: 72px 0;
}

@media (max-width:576px) {
    .section {
        padding: 56px 0;
    }
}

.bg-cream {
    background: var(--cream);
}

.bg-cream-2 {
    background: var(--cream-2);
}

/* Evite les débordements horizontaux sur gros conteneurs */
section,
.container,
.row {
    overflow-x: hidden;
}

/* ---------- Focus visible (a11y) ---------- */
:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(200, 112, 68, .25);
    border-radius: 10px;
}


/* ---------- Bande "Merci" ---------- */
.thankyou {
    background: var(--brown);
    color: #fff;
    padding: 20px 0;
}

.thankyou h2 {
    letter-spacing: .04em;
}

/* ---------- Hero Slider ---------- */
.hero {
    background: #fff;
}

.slider {
    position: relative;
    height: 74vh;
    min-height: 520px;
    overflow: hidden;
}

.slide {
    position: absolute;
    inset: 0;
    background: center/cover no-repeat;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity .7s, transform 1.2s;
    pointer-events: none;
}

.slide.is-active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .48));
}

.cap {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.cap h1 {
    font-size: clamp(30px, 5vw, 66px);
    font-weight: 700;
    letter-spacing: .02em;
    margin: 0 0 .25rem;
}

.cap h2 {
    font-size: clamp(26px, 3.6vw, 46px);
    font-weight: 700;
    margin: 0 0 .25rem;
}

.cap p {
    font-size: clamp(16px, 1.4vw, 20px);
    opacity: .95;
}

.cap .btns {
    margin-top: 14px;
    display: flex;
    gap: .7rem;
    flex-wrap: wrap;
}

.ctrl {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(0, 0, 0, .36);
    border: 0;
}

.ctrl:hover {
    background: rgba(0, 0, 0, .5);
}

.ctrl.prev {
    left: 18px;
}

.ctrl.next {
    right: 18px;
}

.dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    display: flex;
    gap: 9px;
    justify-content: center;
    z-index: 5;
}

.dots button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .55);
}

.dots button.is-active {
    background: #fff;
}

@media (prefers-reduced-motion:reduce) {

    .slide,
    .ctrl,
    .dots button {
        transition: none !important;
    }
}

@media (max-width:576px) {
    .slider {
        height: 64vh;
        min-height: 420px;
    }
}

@media (max-width:400px) {
    .slider {
        height: 56vh;
        min-height: 360px;
    }
}

/* ---------- Event meta (date/lieu) ---------- */
.event-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.date-badge {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, .25);
}

.date-badge .day {
    font: 700 28px/1 'Oswald', sans-serif;
}

.date-badge .month {
    font: 700 12px/1 'Oswald', sans-serif;
    letter-spacing: .08em;
}

.date-badge .year {
    font: 700 12px/1 'Oswald', sans-serif;
    opacity: .9;
}

.place-chip {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    text-decoration: none;
}

.place-chip:hover {
    background: rgba(255, 255, 255, .22);
}

/* ---------- Features (Sport/Nature/Convivialité) ---------- */
.feat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.feat-card {
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 22px;
    background: linear-gradient(180deg, #fff, #fff 40%, #F8F3ED);
}

.feat-card h3 {
    margin-bottom: .35rem;
}

@media (max-width:992px) {
    .feat-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Infos essentielles — chips ---------- */
.info-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .75rem;
    border: 1px solid #eadfd2;
    border-radius: 999px;
    color: var(--brown);
    background: #fff;
    text-decoration: none;
    transition: all .18s;
}

.info-link:hover {
    background: var(--cream);
    border-color: #e1d6c8;
}

.info-link .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    display: inline-block;
}

.info-link .arrow {
    width: 14px;
    height: 14px;
    border-right: 2px solid var(--brown);
    border-bottom: 2px solid var(--brown);
    transform: rotate(-45deg) translateY(-1px);
}

/* ---------- Cards / Progress ---------- */
.ibox {
    background: #fff;
    border: 1px solid #eee;
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
}

.icon {
    color: var(--accent);
    font-size: 26px;
    margin-bottom: 8px;
}

.progress {
    height: 32px;
    border-radius: 20px;
    overflow: hidden;
    background: #f1e7db;
}

.progress-bar {
    font-weight: 700;
}

/* ---------- Partenaires ---------- */
.partners {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
}

.partner {
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 10px 16px;
    transition: transform .18s, box-shadow .18s;
}

.partner img {
    max-height: 50px;
    width: auto;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .04));
}

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

/* ---------- Footer ---------- */
.ft {
    background: #1f1b16;
    color: #f7f2ec;
    padding: 40px 0;
    font-family: 'Poppins', sans-serif;
}

.ft-logo {
    max-height: 50px;
    opacity: .9;
    transition: opacity .3s ease;
}

.ft-logo:hover {
    opacity: 1;
}

.ft-name {
    font-size: .95rem;
    font-weight: 500;
    margin: 0;
    letter-spacing: .5px;
}

.ft-links {
    font-size: .85rem;
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 8px;
}

.ft-links a {
    color: #f7f2ec;
    text-decoration: none;
    transition: color .2s ease;
}

.ft-links a:hover {
    color: #ff7a00;
}

.ft-links .sep {
    color: rgba(255, 255, 255, .4);
}

/* ---------- CTA vertical bord droit (anti-overflow) ---------- */
.edge-cta {
    position: fixed;
    right: 0;
    top: 42%;
    transform: translateX(50%) rotate(-90deg);
    transform-origin: right center;
    z-index: 1100;
    box-shadow: var(--shadow);
    padding: .6rem 1rem;
    letter-spacing: .04em;
    contain: paint;
    will-change: transform;
}

.no-scroll .edge-cta {
    opacity: 0;
    pointer-events: none;
}

@media (max-width:576px) {
    .edge-cta {
        bottom: 110px;
        top: auto;
    }
}

@media (max-width:375px) {
    .edge-cta {
        display: none;
    }
}

/* ---------- Spécifiques header --------- */
.hd .container {
    overflow: visible !important;
}

/* ---------- Cartes "concept" (bloc affiche + 3 cartes) ---------- */
.concept-card {
    padding: 1.25rem;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
    border: 1px solid rgba(0, 0, 0, .06);
}

.concept-card h3 {
    font-weight: 800;
}

/* Palettes automnales douces */
.bg-squash {
    background: #FBE6D1;
}

/* potiron clair  */
.bg-apricot {
    background: #FFEFD9;
}

/* abricot crème */
.bg-mushroom {
    background: #F3EFE6;
}

/* champignon/lin */






/* ===========================
   Buttons — système unifié 2025
   =========================== */

/* =========================================================
   Buttons — Automne 2025 (flat, accessible, sans dégradé)
   ========================================================= */

/* Palette (ajuste les hex si besoin) */
:root {
    --btn-radius: 14px;
    --btn-h: 44px;
    --btn-pad-x: 18px;
    --btn-gap: 10px;

    /* Couleurs automnales */
    --orange: #E67E37;
    /* potiron */
    --orange-ink: #C76528;
    /* potiron foncé */

    --cream: #F7F1EA;
    /* crème douce */
    --cream-ink: #3A2F28;
    /* encre sur crème */

    --moss: #5E7555;
    /* vert mousse */
    --moss-ink: #4E6147;
    /* mousse foncé */

    --wood: #5A4331;
    /* brun bois */
    --wood-ink: #4B382A;
    /* bois foncé */

    --line: #E6DED5;
    /* trait subtil */
    --ink: #1A1512;
    /* texte par défaut */

    /* Focus ring */
    --focus-ring: 3px solid color-mix(in srgb, var(--orange) 35%, transparent);
}

/* Base commune */
.btn,
a.btn {
    --_bg: #fff;
    /* valeurs par défaut (rarement utilisées seules) */
    --_ink: var(--ink);
    --_bd: var(--line);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    height: var(--btn-h);
    padding: 0 var(--btn-pad-x);
    border-radius: var(--btn-radius);
    border: 1px solid var(--_bd);
    background: var(--_bg);
    color: var(--_ink);
    font: 700 0.95rem/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    letter-spacing: .02em;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, transform .04s ease;
    -webkit-tap-highlight-color: transparent;
}

.btn:hover {
    background: color-mix(in srgb, var(--_bg) 92%, black 8%);
}

.btn:active {
    transform: translateY(1px);
    background: color-mix(in srgb, var(--_bg) 88%, black 12%);
}

.btn:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

.btn[disabled],
.btn.is-loading {
    opacity: .6;
    pointer-events: none;
}

/* Tailles */
.btn--sm {
    --btn-h: 36px;
    --btn-pad-x: 14px;
}

.btn--lg {
    --btn-h: 48px;
    --btn-pad-x: 22px;
}

.btn--xl {
    --btn-h: 52px;
    --btn-pad-x: 26px;
    border-radius: 999px;
}

/* Icône utilitaire */
.btn>.icon {
    display: inline-grid;
    place-items: center;
    width: 1.2em;
    height: 1.2em;
}

/* ===== Variantes automnales ===== */

/* 1) ORANGE — CTA principal */
.btn--orange {
    --_bg: var(--orange);
    --_bd: var(--orange);
    --_ink: #fff;
}

.btn--orange:hover {
    background: var(--orange-ink);
    border-color: var(--orange-ink);
}

/* 2) CRÈME — douce, texte foncé (contraste ok) */
.btn--cream {
    --_bg: var(--cream);
    --_bd: #E9E0D6;
    --_ink: var(--cream-ink);
}

.btn--cream:hover {
    background: color-mix(in srgb, var(--cream) 90%, black 10%);
}

/* 3) MOSS — vert automne */
.btn--moss {
    --_bg: var(--moss);
    --_bd: var(--moss);
    --_ink: #fff;
}

.btn--moss:hover {
    background: var(--moss-ink);
    border-color: var(--moss-ink);
}

/* 4) WOOD — brun bois (sobre & premium) */
.btn--wood {
    --_bg: var(--wood);
    --_bd: var(--wood);
    --_ink: #fff;
}

.btn--wood:hover {
    background: var(--wood-ink);
    border-color: var(--wood-ink);
}

/* Variante outline (utile sur visuels/fonds sombres) */
.btn--outline {
    --_bg: transparent;
    --_bd: var(--line);
    --_ink: var(--ink);
}

.btn--outline:hover {
    background: color-mix(in srgb, white 92%, black 8%);
}

/* Option “ghost” super discrète (texte seul avec state layer) */
.btn--ghost {
    --_bg: transparent;
    --_bd: transparent;
    --_ink: var(--ink);
}

.btn--ghost:hover {
    background: rgba(0, 0, 0, .05);
}

/* Utilitaire arrondi pilule si besoin */
.btn-pill {
    border-radius: 999px !important;
}



/* =========================================================
   Buttons — Automne Pastel 2025
   ========================================================= */

/* Palette pastel inspirée automne */
:root {
    --pumpkin-pastel: #F9D7B6;
    /* potiron pastel */
    --pumpkin-ink: #7A3F1B;

    --mushroom-pastel: #EDE7D9;
    /* champignon beige */
    --mushroom-ink: #433D33;

    --sage-pastel: #DCE8D6;
    /* vert sauge pastel */
    --sage-ink: #30422C;

    --berry-pastel: #E9D3DC;
    /* baie mauve clair */
    --berry-ink: #4A3440;
}

/* Renfort de spécificité pour la couleur de fond/texte */
.btn.btn--orange {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}

.btn.btn--moss {
    background: var(--moss);
    border-color: var(--moss);
    color: #fff;
}

.btn.btn--wood {
    background: var(--wood);
    border-color: var(--wood);
    color: #fff;
}

.btn.btn--cream {
    background: var(--cream);
    border-color: #E9E0D6;
    color: var(--cream-ink);
}

/* Hovers cohérents */
.btn.btn--orange:hover {
    background: var(--orange-ink);
    border-color: var(--orange-ink);
}

.btn.btn--moss:hover {
    background: var(--moss-ink);
    border-color: var(--moss-ink);
}

.btn.btn--wood:hover {
    background: var(--wood-ink);
    border-color: var(--wood-ink);
}

.btn.btn--cream:hover {
    background: color-mix(in srgb, var(--cream) 90%, black 10%);
}



/* 1) PUMPKIN pastel — orange doux */
.btn--pumpkin {
    --_bg: var(--pumpkin-pastel);
    --_bd: var(--pumpkin-pastel);
    --_ink: var(--pumpkin-ink);
}

.btn--pumpkin:hover {
    background: color-mix(in srgb, var(--pumpkin-pastel) 90%, black 10%);
}

/* 2) MUSHROOM pastel — beige champignon */
.btn--mushroom {
    --_bg: var(--mushroom-pastel);
    --_bd: var(--mushroom-pastel);
    --_ink: var(--mushroom-ink);
}

.btn--mushroom:hover {
    background: color-mix(in srgb, var(--mushroom-pastel) 90%, black 10%);
}

/* 3) SAGE pastel — vert doux */
.btn--sage {
    --_bg: var(--sage-pastel);
    --_bd: var(--sage-pastel);
    --_ink: var(--sage-ink);
}

.btn--sage:hover {
    background: color-mix(in srgb, var(--sage-pastel) 88%, black 12%);
}

/* 4) BERRY pastel — mauve automnal clair */
.btn--berry {
    --_bg: var(--berry-pastel);
    --_bd: var(--berry-pastel);
    --_ink: var(--berry-ink);
}

.btn--berry:hover {
    background: color-mix(in srgb, var(--berry-pastel) 88%, black 12%);
}


.btn-brown {
    background: var(--brown);
    color: #fff;
    border: none;
}

.btn-brown:hover,
.btn-brown:focus {
    background: var(--brown-ink);
    color: #fff;
}