/*
 * =====================================================
 *   SUD WINE CLUB — Feuille de styles principale
 *   Auteur  : WebRégis
 *   Version : 5.0 — Détails d'excellence
 * =====================================================
 *
 *  TABLE DES MATIÈRES
 *  ------------------
 *  1.  Variables & Reset + Grain de texture
 *  2.  Loader
 *  3.  Top Bar
 *  4.  Navbar
 *  5.  Hero Slider + Scroll Indicator  ★ nouveau
 *  6.  Séparateurs décoratifs
 *  7.  Titres de section (commun)
 *  8.  Section Esprit
 *  9.  Logos Partenaires
 *  10. Fondateurs
 *  11. Citations (parallaxe)
 *  12. Programme 2026
 *  13. Contact
 *  14. Footer
 *  15. Back to Top
 *  16. Animations au scroll (fade-up)
 * =====================================================
 */


/* =============================================
   1. VARIABLES & RESET
============================================= */
:root {
    --primary:      #9b5c63;
    --primary-dark: #7a4750;
    --gold:         #c9a84c;      /* accent doré — séparateurs, numéros */
    --success-bg:   #f8f5f0;
    --dark:         #1a1a1a;
    --gray-mid:     #6b6b6b;
    --border:       #e5e5e5;

    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body:    'Jost', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--dark);
    background: #fff;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Ligatures & chiffres elzéviriens sur Cormorant Garamond */
.section-title,
.founder-name,
.footer-col-title,
#citationsCarousel .quote-text,
.event-card .event-title,
.chapo {
    font-feature-settings: "liga" 1, "onum" 1, "kern" 1;
}

/* Grain de texture sur les fonds crème — SVG inline ultra-léger */
.has-grain {
    position: relative;
}
.has-grain::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
    pointer-events: none;
    z-index: 0;
}


/* =============================================
   2. LOADER
============================================= */
#loader {
    position: fixed;
    inset: 0;
    background: #f9f9f9;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .5s ease;
}
#loader.hidden {
    opacity: 0;
    pointer-events: none;
}

.loader-dots { display: flex; gap: 10px; }

.loader-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary);
    animation: pulse 1s ease-in-out infinite;
}
.loader-dots span:nth-child(2) { animation-delay: .2s; }
.loader-dots span:nth-child(3) { animation-delay: .4s; }

@keyframes pulse {
    0%, 100% { opacity: .3; transform: scale(.8); }
    50%       { opacity: 1;  transform: scale(1.2); }
}


/* =============================================
   3. TOP BAR
============================================= */
#topbar {
    background: var(--primary);
    padding: .5rem 2rem;
    display: none;
}
@media (min-width: 992px) {
    #topbar { display: block; }
}

#topbar .topbar-inner  { display: flex; align-items: center; }
#topbar .topbar-left   { flex: 1; }
#topbar .topbar-center {
    flex: 1;
    text-align: center;
    font-family: var(--font-display);
    font-style: italic;
    color: #fff;
    font-size: 1.1rem;
    letter-spacing: .06em;
}
#topbar .topbar-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}
#topbar .topbar-right a {
    color: #fff;
    transition: color .3s;
}
#topbar .topbar-right a.li:hover { color: #90caf9; }
#topbar .topbar-right a.ig:hover { color: #f48fb1; }
#topbar .topbar-right a.fb:hover { color: #bbdefb; }
#topbar hr { border-color: rgba(255,255,255,.3); margin: .5rem 0 0; }



/* =============================================
   4. NAVBAR  ★
   — Bordure bordeaux au scroll
   — Logo plus généreux
   — Lien actif souligné
============================================= */
#mainNav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(8px);
    border-bottom: 2px solid transparent;          /* invisible au départ */
    padding: .6rem 0;
    transition: border-color .4s, box-shadow .4s;
}
#mainNav.scrolled {
    border-bottom-color: var(--primary);           /* bordeaux au scroll */
    box-shadow: 0 4px 24px rgba(0,0,0,.07);
}

/* Logo navbar — taille fixe, pas de réduction au scroll */
#mainNav .navbar-brand img {
    height: 56px;
    width: 56px;
    object-fit: contain;
}

#mainNav .nav-link {
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dark) !important;
    padding: .4rem 1rem !important;
    position: relative;
    transition: color .3s;
}
/* Soulignement bordeaux animé au hover */
#mainNav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0; left: 1rem; right: 1rem;
    height: 1px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
#mainNav .nav-link:hover { color: var(--primary) !important; }
#mainNav .nav-link:hover::after { transform: scaleX(1); }

.navbar-toggler       { border: none; padding: .4rem .6rem; }
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath stroke='%239b5c63' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}


/* =============================================
   5. HERO SLIDER  ★
   — Barre de progression bordeaux en bas du hero
============================================= */
.hero-slide {
    height: 100vh;
    min-height: 450px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
@media (max-width: 767px) {
    .hero-slide { height: 450px; }
}

/* ← Modifiez ici les images du slider */
.hero-slide-1 { background-image: url('/swc/images/hero-vignoble-1.webp'); }
.hero-slide-2 { background-image: url('/swc/images/hero-vignoble-2.webp'); }

/* Légère vignette pour mieux faire ressortir le logo */
.hero-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.25) 100%);
    pointer-events: none;
}

.hero-logo {
    max-height: 220px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,.3));
    object-fit: contain;   /* ← ajouter cette ligne */
    width: auto;           /* ← et celle-ci */
}
@media (max-width: 767px) { .hero-logo { max-height: 112px; } }

/* Barre de progression — fine ligne qui avance */
#heroCarousel {
    position: relative;
}
#hero-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;                            /* toujours 100% — l'animation passe par scaleX */
    background: var(--primary);
    z-index: 10;
    transform: scaleX(0);                   /* démarre à 0 */
    transform-origin: left center;          /* progresse de gauche à droite */
    transition: transform linear;           /* durée gérée par JS — GPU composé */
    will-change: transform;
}

/* Scroll indicator — chevron animé ★ */
#hero-scroll-hint {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    color: rgba(255,255,255,.75);
    font-size: 1.1rem;
    cursor: pointer;
    animation: bounce 2s ease-in-out infinite;
    transition: opacity .5s;
}
#hero-scroll-hint.hidden {
    opacity: 0;
    pointer-events: none;
}

@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0);    }
    50%       { transform: translateX(-50%) translateY(8px);  }
}

/* Flèches */
.carousel-control-prev,
.carousel-control-next {
    width: 60px;
    opacity: 1;
}
@media (max-width: 1199px) {
    #heroCarousel .carousel-control-prev,
    #heroCarousel .carousel-control-next { display: none; }
}

.carousel-ctrl-btn {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,.85);
    color: var(--dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    border: 1px solid rgba(255,255,255,.5);
    transition: background .3s, color .3s;
}
.carousel-ctrl-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Points mobile */
.carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #fff;
    border: none;
    opacity: .5;
}
.carousel-indicators .active { opacity: 1; background-color: var(--primary); }
@media (min-width: 1200px) {
    #heroCarousel .carousel-indicators { display: none; }
}


/* =============================================
   6. SÉPARATEURS DÉCORATIFS  ★  (nouveau)
   Usage : <div class="section-divider"></div>
============================================= */
.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    padding: 1rem 0;
    margin: 0 auto;
    max-width: 200px;
}
.section-divider::before,
.section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold));
}
.section-divider::after {
    background: linear-gradient(to left, transparent, var(--gold));
}
.section-divider span {
    color: var(--gold);
    font-size: 1.1rem;
    line-height: 1;
    letter-spacing: .2em;
}


/* =============================================
   7. TITRES DE SECTION (commun)
============================================= */
.section-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    font-weight: 500;
    line-height: 1.1;
}

/* Petit trait doré sous le titre */
.section-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: var(--gold);
    margin-top: 1rem;
}

.section-body p {
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.8;
    color: #3a3a3a;
}
.section-body p + p { margin-top: 1.4rem; }

/* Chapô — première phrase mise en valeur */
.section-body p.chapo {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-style: italic;
    font-weight: 400;
    color: var(--primary);
    line-height: 1.6;
}


/* =============================================
   8. SECTION ESPRIT
============================================= */
#esprit { padding: 6rem 0 4rem; }
@media (max-width: 991px) { #esprit { padding: 4rem 0 2rem; } }


/* =============================================
   9. LOGOS PARTENAIRES
   ★ transition plus douce (fondu + slide-in)
============================================= */
#logos {
    background: var(--success-bg);
    padding: 3.5rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
#logos .container { position: relative; z-index: 1; }

/* Titre discret au-dessus */
#logos .logos-label {
    text-align: center;
    font-family: var(--font-display);
    font-size: .85rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--gray-mid);
    margin-bottom: 2rem;
}

.logo-item {
    position: relative;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
}
.logo-item img {
    height: 120px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: filter .4s ease, opacity .4s ease, transform .4s ease;
}

.logo-overlay {
    position: absolute;
    inset: 0;
    background: rgba(155, 92, 99, .88);         /* bordeaux au lieu de noir */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .4s ease;
    color: #fff;
    text-align: center;
    padding: 1rem;
    text-decoration: none;
}
.logo-overlay .logo-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 500;
    margin-bottom: .75rem;
    line-height: 1.3;
}

.logo-item:hover img {
    filter: grayscale(100%);
    opacity: .2;
    transform: scale(1.04);
}
.logo-item:hover .logo-overlay { opacity: 1; }

/* Carousel logos : transition fade douce */
#logosCarousel .carousel-item {
    transition: opacity .7s ease;
    opacity: 0;
}
#logosCarousel .carousel-item.active {
    opacity: 1;
}


/* =============================================
   10. FONDATEURS
============================================= */
#fondateurs { padding: 5rem 0; }
@media (max-width: 991px) { #fondateurs { padding: 4rem 0; } }

.founder-card { text-align: center; }

.founder-photo-wrap {
    position: relative;
    overflow: hidden;
}
.founder-photo-wrap img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .6s ease;
}
.founder-photo-wrap:hover img { transform: scale(1.05); }

.founder-photo-wrap .hover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(155,92,99,.35) 0%, transparent 60%);
    opacity: 0;
    transition: opacity .5s;
}
.founder-photo-wrap:hover .hover-overlay { opacity: 1; }

.founder-name {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 500;
    margin-top: 1rem;
    color: var(--dark);
    letter-spacing: .02em;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: .65rem;
    margin-top: .65rem;
}
.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--gray-mid);
    font-size: .95rem;
    text-decoration: none;
    transition: border-color .3s, background .3s, color .3s, transform .3s;
}
.social-icon:hover {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
    transform: translateY(-3px);
}


/* =============================================
   11. CITATIONS (parallaxe)  ★
   — Grand guillemet décoratif en arrière-plan
   — Citation plus grande et aérée
============================================= */
#citations {
    position: relative;
    background: url('/swc/images/bg-citations.webp') center/cover no-repeat fixed;
    min-height: 420px;
    display: flex;
    align-items: center;
}
@media (max-width: 767px) {
    #citations { background-attachment: scroll; }
}

#citations .overlay {
    position: absolute;
    inset: 0;
    background: rgba(26, 10, 12, .55);           /* plus sombre et chaud */
}
#citations .citations-inner {
    position: relative;
    z-index: 1;
    width: 100%;
}

#citationsCarousel .carousel-item {
    text-align: center;
    color: #fff;
    padding: 4rem 1rem;
    position: relative;
}

/* Grand guillemet décoratif */
#citationsCarousel .carousel-item::before {
    content: '\201C';                             /* « typographique */
    font-family: var(--font-display);
    font-size: 10rem;
    line-height: 1;
    color: var(--primary);
    opacity: .4;
    position: absolute;
    top: .5rem;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

#citationsCarousel .quote-text {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-style: italic;
    font-weight: 400;
    max-width: 720px;
    margin: 2rem auto 1.5rem;
    line-height: 1.5;
    position: relative;
    z-index: 1;
}
#citationsCarousel .quote-author {
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 400;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--gold);
    position: relative;
    z-index: 1;
}
/* Tiret doré avant l'auteur */
#citationsCarousel .quote-author::before {
    content: '— ';
    color: var(--gold);
}
#citationsCarousel .carousel-indicators { display: none; }


/* =============================================
   12. PROGRAMME 2026  ★
   — Numérotation éditoriale dorée
   — Ligne de séparation au-dessus de la date
============================================= */
#programme { padding: 5rem 0 7rem; }
@media (max-width: 991px) { #programme { padding: 4rem 0 5rem; } }

.event-card {
    border-bottom: 2px solid transparent;
    transition: border-color .3s;
    padding-bottom: .5rem;
}
.event-card:hover { border-bottom-color: var(--primary); }

.event-card img {
    width: 100%;
    object-fit: cover;
    height: 300px;
    transition: transform .5s ease;
}
.event-card:hover img { transform: scale(1.02); }
@media (min-width: 1400px) { .event-card img { height: 420px; } }
@media (min-width: 992px)  { .event-card img { height: 320px; } }

/* Numéro éditorial — affiché via data-index en CSS */
.event-card .event-number {
    display: block;
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 400;
    letter-spacing: .3em;
    color: var(--gold);
    margin-top: 1.1rem;
    text-transform: uppercase;
}

.event-card .event-date {
    color: var(--primary);
    font-size: .88rem;
    font-weight: 400;
    letter-spacing: .06em;
    display: block;
    margin-top: .2rem;
    padding-top: .6rem;
    border-top: 1px solid var(--border);
}
.event-card .event-title {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 500;
    margin-top: .3rem;
    line-height: 1.25;
    color: var(--dark);
}
.event-card .event-details {
    font-size: .9rem;
    color: var(--gray-mid);
    margin-top: .4rem;
    line-height: 1.6;
}

/* Flèches en bas centrées */
#programmeCarousel { position: relative; }

#programmeCarousel .carousel-control-prev,
#programmeCarousel .carousel-control-next {
    top: auto;
    bottom: -3.5rem;
    width: 44px;
    height: 44px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 0;
    opacity: 1;
    transition: background .3s, border-color .3s;
}
#programmeCarousel .carousel-control-prev { left: calc(50% - 50px); }
#programmeCarousel .carousel-control-next { left: calc(50% + 6px); }

#programmeCarousel .carousel-control-prev:hover,
#programmeCarousel .carousel-control-next:hover {
    background: var(--primary);
    border-color: var(--primary);
}
#programmeCarousel .carousel-control-prev-icon,
#programmeCarousel .carousel-control-next-icon {
    filter: invert(1) brightness(0);
}
#programmeCarousel .carousel-control-prev:hover .carousel-control-prev-icon,
#programmeCarousel .carousel-control-next:hover .carousel-control-next-icon {
    filter: brightness(10);
}
#programmeCarousel .carousel-indicators { display: none; }




/* =============================================
   SWC SIGNATURE — Section soirées ouvertes
   À placer dans public.css après #programme
============================================= */

/* Section wrapper */
/* Section wrapper — padding réduit vs #programme pour signifier la hiérarchie */
#signature {
    padding: 4rem 0 5rem;
    background: #f9f3ee;
}
@media (max-width: 991px) { #signature { padding: 3rem 0 4rem; } }

/* Eyebrow — "Ouvert à tous" */
.signature-eyebrow {
    font-size: .75rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: .5rem;
    font-family: var(--font-display);
}

/* Note avantage membres */
.signature-membres-note {
    font-size: .85rem;
    color: var(--gray-mid);
    font-style: italic;
    margin-top: 1.25rem;
    margin-bottom: 0;
    border-left: 2px solid var(--gold);
    padding-left: .85rem;
}

/* Card Signature */
.signature-card {
    position: relative;
    background: #fff;
    border-bottom: 2px solid transparent;
    transition: border-color .3s;
    padding-bottom: .5rem;
}
.signature-card:hover { border-bottom-color: var(--primary); }

/* Filet accent bordeaux en haut de la card */
.signature-ribbon {
    height: 3px;
    background: var(--primary);
    width: 100%;
}

/* Badge (Places limitées / Sur réservation) */
.signature-badge {
    position: absolute;
    top: 14px;
    right: 12px;
    background: var(--primary);
    color: #fff;
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 11px;
    border-radius: 20px;
    z-index: 1;
}

/* Image */
.signature-img-wrap {
    overflow: hidden;
}
.signature-img-wrap img {
    width: 100%;
    height: 200px;          /* plus petit que .event-card img (300px) */
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.signature-card:hover .signature-img-wrap img { transform: scale(1.02); }
@media (min-width: 1400px) { .signature-img-wrap img { height: 240px; } }
@media (min-width: 992px)  { .signature-img-wrap img { height: 220px; } }

/* Corps — padding latéral pour éviter que le texte touche le bord */
.signature-body {
    padding: 1rem 1.1rem 1rem;
}

/* Card non finalisée — légèrement atténuée */
.signature-card--soon {
    opacity: .85;
}

/* Placeholder "Prochainement" — remplace la photo */
.signature-soon-wrap {
    width: 100%;
    height: 200px;          /* aligné sur .signature-img-wrap img */
    background: var(--success-bg);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
}
@media (min-width: 1400px) { .signature-soon-wrap { height: 240px; } }
@media (min-width: 992px)  { .signature-soon-wrap { height: 220px; } }

/* Icône sablier */
.signature-soon-icon {
    font-size: 1.6rem;
    color: var(--primary);
    opacity: .4;
}

/* Texte "Prochainement" */
.signature-soon-label {
    font-family: var(--font-display);
    font-size: .85rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--primary);
    opacity: .5;
}

/* Titre atténué pour les soirées à venir */
.signature-title--soon {
    color: var(--gray-mid);
    font-style: italic;
}

/* Numéro éditorial */
.signature-number {
    display: block;
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 400;
    letter-spacing: .3em;
    color: var(--gold);
    text-transform: uppercase;
    margin-top: .4rem;
}

/* Date */
.signature-date {
    display: block;
    color: var(--primary);
    font-size: .88rem;
    font-weight: 400;
    letter-spacing: .06em;
    margin-top: .2rem;
    padding-top: .6rem;
    border-top: 1px solid var(--border);
}

/* Titre — légèrement plus petit que .event-card .event-title (1.45rem) */
.signature-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 500;
    margin-top: .3rem;
    margin-bottom: .25rem;
    line-height: 1.25;
    color: var(--dark);
}

/* Accroche */
.signature-details {
    font-size: .9rem;
    color: var(--gray-mid);
    line-height: 1.6;
    margin-bottom: .5rem;
}

/* CTA lien */
.signature-cta {
    display: inline-flex;
    align-items: center;
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px solid var(--primary);
    padding-bottom: 1px;
    transition: color .3s, border-color .3s;
    margin-top: .5rem;
}
.signature-cta:hover {
    color: var(--primary-dark);
    border-color: var(--primary-dark);
}




/* =============================================
   13. CONTACT  ★ refonte premium
   — Fond sombre avec image de vignoble
   — Texte centré, ambiance "invitation exclusive"
   — Bouton sobre avec flèche animée
============================================= */
#contact {
    position: relative;
    background: url('/swc/images/bg-citations.webp') center/cover no-repeat;
    padding: 0;
}

/* Overlay sombre avec léger dégradé chaud */
.contact-inner {
    position: relative;
    background: linear-gradient(
        135deg,
        rgba(26, 10, 12, .82) 0%,
        rgba(60, 20, 28, .75) 50%,
        rgba(26, 10, 12, .85) 100%
    );
    padding: 7rem 0;
}

/* Trait doré en haut — lien visuel avec les séparateurs */
#contact::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--gold), transparent);
    z-index: 1;
}

.contact-eyebrow {
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.4rem;
}

/* Petit ornement doré avant et après */
.contact-eyebrow::before,
.contact-eyebrow::after {
    content: '—';
    display: inline-block;
    margin: 0 .8em;
    opacity: .6;
}

.contact-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4vw, 3.8rem);
    font-weight: 500;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    font-feature-settings: "liga" 1, "onum" 1;
}

.contact-desc {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 300;
    color: rgba(255, 255, 255, .72);
    line-height: 1.8;
    max-width: 520px;
    margin: 0 auto 2.5rem;
    letter-spacing: .01em;
}

/* Bouton contact — style sobre et élégant */
.btn-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1rem 2.6rem;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .45);
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .4s, border-color .4s, color .4s, gap .3s;
    position: relative;
    overflow: hidden;
}
/* Fond bordeaux qui monte au hover */
.btn-contact::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s cubic-bezier(.22,1,.36,1);
    z-index: 0;
}
.btn-contact:hover::before  { transform: scaleX(1); }
.btn-contact:hover          { border-color: var(--primary); gap: .9rem; }
.btn-contact span,
.btn-contact i              { position: relative; z-index: 1; }

/* Flèche — glisse légèrement au hover */
.btn-contact i {
    transition: transform .3s ease;
}
.btn-contact:hover i { transform: translateX(4px); }


/* =============================================
   14. FOOTER
============================================= */
footer { border-top: 1px solid var(--border); }
footer .footer-body { padding: 5rem 0; }
footer .footer-logo img { height: 142px; }

footer .footer-col-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: .02em;
}
footer .footer-col p,
footer .footer-col a {
    font-size: .93rem;
    color: #666;
    text-decoration: none;
    display: block;
    line-height: 1.8;
}
footer .footer-col a:hover { color: var(--primary); }

footer .footer-social a {
    color: #888;
    transition: color .3s, transform .3s;
    display: inline-block;
}
footer .footer-social a:hover { transform: translateY(-2px); }
footer .footer-social a.li:hover { color: #0a66c2; }
footer .footer-social a.ig:hover { color: #e1306c; }
footer .footer-social a.fb:hover { color: #1877f2; }

footer .footer-bottom {
    border-top: 1px solid var(--border);
    padding: 1.5rem 1rem;
    text-align: center;
    font-size: .82rem;
    color: #aaa;
    letter-spacing: .04em;
}


/* =============================================
   15. BACK TO TOP
============================================= */
#toTopBtn {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 500;
    width: 40px;
    height: 40px;
    background: var(--primary);
    color: #fff;
    border: none;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: background .3s, transform .3s;
}
#toTopBtn:hover   { background: var(--primary-dark); transform: translateY(-2px); }
#toTopBtn.visible { display: flex; }


/* =============================================
   17. ANIMATIONS AU SCROLL  ★  (fade-up)
   -----------------------------------------------
   Principe CSS pur + Intersection Observer (JS).
   Tout élément avec [data-reveal] part invisible
   et translateY(30px), puis passe à visible quand
   il entre dans le viewport (.is-visible).

   Délais échelonnés : data-reveal-delay="1|2|3|4"
   → chaque enfant apparaît 120ms après le précédent.

   Usage HTML :
     <div data-reveal>…</div>
     <div data-reveal data-reveal-delay="2">…</div>
============================================= */

/* État initial — invisible, décalé vers le bas */
[data-reveal] {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .7s cubic-bezier(.22,1,.36,1),
                transform .7s cubic-bezier(.22,1,.36,1);
}

/* État final — visible */
[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Délais échelonnés pour les éléments enfants */
[data-reveal-delay="1"] { transition-delay: .0s;  }
[data-reveal-delay="2"] { transition-delay: .12s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .36s; }
[data-reveal-delay="5"] { transition-delay: .48s; }

/* Respect du paramètre "réduire les animations" */
@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* =============================================
   TEASER MEMBRES (section index.php)
   -----------------------------------------------
   4 membres mis en avant avec photo carrée,
   nom et titre — clic = page membres complète.
============================================= */
/* Fond blanc — alterne avec la section #signature (crème) qui précède */
#membres-teaser {
    padding: 5rem 0 4rem;
    background: #fff;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    position: relative;          /* nécessaire pour le pseudo-élément grain */
}
/* Grain de texture identique à .has-grain */
#membres-teaser::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
    pointer-events: none;
    z-index: 0;
}
/* Le contenu passe au-dessus du grain */
#membres-teaser .container {
    position: relative;
    z-index: 1;
}

/* Lien "Voir tous les membres" */
.teaser-link-all {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px solid var(--primary);
    padding-bottom: .2rem;
    transition: color .3s, border-color .3s, gap .3s;
    gap: .3rem;
    margin-top: 1.5rem;
}
.teaser-link-all:hover {
    color: var(--primary-dark);
    border-color: var(--primary-dark);
    gap: .6rem;
}

/* Grille CSS : 4 colonnes desktop, 2 mobile */
.teaser-grille {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .teaser-grille { grid-template-columns: repeat(4, 1fr); }
}

/* Carte teaser — lien sans décoration */
.teaser-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Photo carrée avec overlay au hover */
.teaser-photo-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}
.teaser-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform .6s ease;
}
.teaser-card:hover .teaser-photo-wrap img {
    transform: scale(1.05);
}

/* Overlay bordeaux au hover */
.teaser-overlay {
    position: absolute;
    inset: 0;
    background: rgba(155,92,99,.75);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    color: #fff;
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity .4s;
}
.teaser-card:hover .teaser-overlay { opacity: 1; }

/* Identité sous la photo */
.teaser-identity {
    padding: .9rem 0 .4rem;
    border-bottom: 1px solid var(--border);
}
.teaser-name {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--dark);
    margin: 0 0 .15rem;
    line-height: 1.2;
}
.teaser-titre {
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--primary);
    margin: 0;
}


/* =============================================
   SCROLL-MARGIN — Compensation menu sticky
   Évite que la navbar masque le haut des sections
   72px logo + 2×10px padding = ~92px normal
   On prend 100px pour avoir un peu d'air
============================================= */
#esprit,
#fondateurs,
#logos,
#citations,
#programme,
#faq,
#contact,
#membres-teaser {
    scroll-margin-top: 80px;
}

@media (max-width: 991px) {
    /* Logo réduit sur mobile */
    #esprit,
    #fondateurs,
    #logos,
    #citations,
    #programme,
    #contact,
    #membres-teaser {
        scroll-margin-top: 80px;
    }
}

/* =============================================
   14b. FOOTER DARK — compact une ligne
   Logo | Adresse | Réseaux + Contact
   Hauteur totale ~70px body + ~36px copyright
============================================= */

.footer-dark {
    background: linear-gradient(180deg, rgba(26,10,12,1) 0%, rgba(10,5,5,1) 100%);
    border-top: none;
}

/* Trait doré en haut */
.footer-gold-bar {
    height: 2px;
    background: linear-gradient(to right, transparent, var(--gold), transparent);
}

/* Zone principale — padding minimal */
.footer-dark .footer-body {
    padding: .9rem 0;
}

/* Bande horizontale unique : flex, tout aligné sur une ligne */
.footer-strip {
    padding: .6rem 0;   /* hauteur compacte */
}

/* Logo — taille lisible, fond crème masqué par mix-blend-mode */
.footer-logo-img {
    height: 48px;
    width: auto;
    opacity: .9;
    display: block;
    mix-blend-mode: screen;  /* fond crème disparaît sur fond sombre */
}

/* Adresse — centre */
.footer-strip-adresse {
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 300;
    letter-spacing: .06em;
    color: rgba(255,255,255,.45);
    margin: 0;
    flex: 1;
    text-align: center;
}
.footer-strip-adresse i {
    color: var(--gold);
    opacity: .6;
}

/* Droite : réseaux + séparateur + contact */
.footer-strip-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

/* Icônes réseaux — petites, côte à côte, sans carré */
.footer-strip-social {
    display: flex;
    gap: .7rem;
}
.fsi {
    color: rgba(255,255,255,.4);
    font-size: .9rem;
    text-decoration: none;
    transition: color .25s, transform .25s;
    line-height: 1;
}
.fsi:hover            { transform: translateY(-2px); }
.fsi.li:hover         { color: #90caf9; }
.fsi.ig:hover         { color: #f48fb1; }
.fsi.fb:hover         { color: #bbdefb; }

/* Séparateur vertical entre réseaux et lien contact */
.footer-strip-sep {
    width: 1px;
    height: 14px;
    background: rgba(201,168,76,.25);
    display: block;
}

/* Lien contact */
.footer-contact-link {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    text-decoration: none;
    transition: color .25s;
    white-space: nowrap;
}
.footer-contact-link i { transition: transform .25s; }
.footer-contact-link:hover { color: var(--gold); }
.footer-contact-link:hover i { transform: translateX(3px); }

/* Copyright */
.footer-dark .footer-bottom {
    border-top: 1px solid rgba(255,255,255,.06);
    padding: .6rem 1rem;
    text-align: center;
    font-size: .72rem;
    color: rgba(255,255,255,.25);
    letter-spacing: .05em;
}
.footer-dark .footer-bottom a {
    color: rgba(201,168,76,.55);
    text-decoration: none;
    transition: color .25s;
}
.footer-dark .footer-bottom a:hover { color: var(--gold); }

/* Mobile — empile proprement */
@media (max-width: 767px) {
    .footer-strip {
        flex-direction: column;
        text-align: center;
        gap: .8rem;
        padding: .5rem 0;
    }
    .footer-strip-adresse { flex: none; }
}