/* =========================================================
   L’ÉQUIPE — Style principal
   Thème : noir / or, sobre & premium
   ========================================================= */

/* Variables globales (couleurs, largeur, conteneur fluide) */
:root{
    --gold:#b9965a;     /* Or luxe pour accents */
    --black:#0d0d0d;    /* Noir profond */
    --ink:#111;         /* Texte principal */
    --muted:#8c8c8c;    /* Texte secondaire/grisé */
    --maxw:1180px;      /* Largeur max page */
    --container:min(var(--maxw), 92vw); /* Conteneur adaptatif */
}

/* Reset léger */
*{ box-sizing:border-box }
img{ max-width:100%; display:block }
body{ margin:0; color:var(--ink); font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif }

/* =========================================================
   INTRO (rideau court, optionnel)
   ========================================================= */
.team-veil{
    /* Recouvre l'écran au départ, avant révélation de la page */
    position:fixed; inset:0; z-index:3000;
    display:grid; place-items:center;
    background: linear-gradient(180deg, #050505 0%, #0b0b0b 100%);
    color:#fff;
    transition: opacity .45s ease, visibility .45s ease;
    opacity:1; visibility:visible;
}
.team-veil .veil-inner{ text-align:center; padding:20px }
.team-veil h1{
    /* Titre principal centré */
    margin:0 0 14px; font-family:"Cinzel",serif;
    font-size: clamp(28px,5vw,56px);
    letter-spacing:.6px;
    text-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.team-veil .veil-cta{
    /* Bouton "entrer" */
    border:2px solid var(--gold); background:transparent; color:#fff;
    padding:12px 22px; border-radius:12px; font-weight:800;
    letter-spacing:.4px; cursor:pointer; min-height:44px;
    transition:background .2s ease,color .2s ease,transform .06s ease,box-shadow .2s ease;
}
.team-veil .veil-cta:hover{
    background:var(--gold); color:#111;
    box-shadow:0 8px 22px rgba(185,150,90,.28)
}
.team-veil.is-off{
    /* Quand désactivé : masque complètement */
    opacity:0; visibility:hidden; pointer-events:none; display:none;
}

/* =========================================================
   HERO v2 : bandeau minimal, centré
   ========================================================= */
.team-hero:not(.v2){ display:none !important; } /* On force la version 2 */

.team-hero.v2{
    /* Bandeau noir avec légères textures or/blanc */
    position:relative; z-index:1;
    background:#0e0e0e; color:#fff;
    border-bottom:1px solid rgba(255,255,255,.06);
    background-image:
        radial-gradient(1200px 400px at 50% -20%, rgba(185,150,90,.12), transparent 60%),
        radial-gradient(900px 260px at 50% 120%, rgba(255,255,255,.06), transparent 65%);
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    min-height: clamp(44vh, 56vh, 64vh);
    text-align:center; padding:0 16px;
}
.team-hero.v2 .hero-band{
    /* Règle horizontale + titre */
    display:inline-flex; align-items:center; gap: clamp(12px, 2.6vw, 22px);
    margin-bottom: clamp(10px, 2vw, 18px);
}
.team-hero.v2 .rule{
    /* Barre dorée animée */
    width: clamp(42px, 16vw, 180px);
    height:2px; background:var(--gold); border-radius:2px; opacity:.95;
    transform-origin:center; animation: heroGrow .8s ease .15s both;
}
.team-hero.v2 .hero-title{
    margin:0; font-family:"Cinzel",serif;
    letter-spacing:.6px; font-size: clamp(28px, 5.2vw, 58px);
    filter: drop-shadow(0 2px 12px rgba(0,0,0,.25));
}
.team-hero.v2 .hero-sub{
    margin:6px 0 0; font-size: clamp(14px, 2vw, 18px);
    letter-spacing:.3px; opacity:.92;
}
.team-hero.v2 .hero-leaf{
    /* Petit ornement décoratif (feuille/logo) */
    width: clamp(80px, 12vw, 120px);
    margin:14px auto 0; opacity:.95;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.28));
}
@keyframes heroGrow{ from{ transform:scaleX(.2); opacity:0 } to{ transform:scaleX(1); opacity:.95 } }

/* =========================================================
   SPOTLIGHT (texte + photo)
   ========================================================= */
.spotlight{
    /* Section deux colonnes (texte / photo) */
    width: var(--container);
    margin: clamp(36px,7vw,70px) auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px,3vw,34px);
    align-items: center;
}
.card-glass{
    /* Carte texte effet "verre noir" */
    background: rgba(15,15,15,.92); color:#fff;
    border-radius:22px; overflow:hidden;
    padding: clamp(20px,3vw,26px);
    box-shadow: 0 16px 34px rgba(0,0,0,.14);
    display:flex; flex-direction:column;
    justify-content:center;
    max-height: 420px;
}
.card-glass h3{
    /* Titre avec barre or à côté */
    display:flex; align-items:center; gap:14px;
    font-family:"Cinzel",serif;
    font-size: clamp(18px, 2vw, 24px);
    margin:0 0 10px;
}
.card-glass h3 i{ flex:1; height:2px; background:var(--gold); opacity:.9; }
.card-glass p{ color:#e8e8e8; line-height:1.7; margin:.5rem 0 0 }

.spot-photo{
    /* Bloc image */
    position:relative;
    border-radius:22px; overflow:hidden; background:#000;
    box-shadow: 0 16px 34px rgba(0,0,0,.14);
    max-height: 420px;
    aspect-ratio: 4 / 3;
}
.spot-photo img{
    width:100%; height:100%; object-fit:cover;
    border-radius:inherit;
    transition: transform .4s ease, filter .3s ease;
}
.spot-photo:hover img{ transform:scale(1.05); filter:saturate(1.1) }

/* =========================================================
   STATS (chiffres mis en avant)
   ========================================================= */
.stats{
    width:var(--container);
    margin: clamp(14px, 4vw, 38px) auto clamp(32px, 6vw, 70px);
    display:grid; grid-template-columns: repeat(3,1fr);
    gap: clamp(14px, 3vw, 26px);
}
.stat{
    background:#0f0f0f; color:#fff; border-radius:16px;
    padding:18px 16px; text-align:center;
    box-shadow: 0 16px 38px rgba(0,0,0,.12), 0 8px 18px rgba(0,0,0,.06);
}
.stat b{ font-size: clamp(20px, 3.2vw, 34px); color:var(--gold); letter-spacing:.4px }
.stat span{ display:block; margin-top:4px; color:#d9d9d9 }

/* =========================================================
   ÉQUIPE — cartes membres
   ========================================================= */
.team-wrap{ width:var(--container); margin: 0 auto clamp(42px,7vw,90px) }
.team-grid{
    display:grid; gap: clamp(18px, 3vw, 26px);
    grid-template-columns: repeat(3, 1fr);
}
.member{
    /* Carte membre avec photo + infos */
    background:#fff; border-radius:18px; overflow:hidden;
    box-shadow: 0 18px 40px rgba(0,0,0,.1), 0 6px 14px rgba(0,0,0,.06);
    transition: transform .18s ease, box-shadow .18s ease;
    display:flex; flex-direction:column;
}
.member:hover{ transform: translateY(-4px); box-shadow: 0 26px 64px rgba(0,0,0,.16) }
.member .m-photo{ position:relative; aspect-ratio: 4/3; overflow:hidden; background:#000 }
.member .m-photo img{
    width:100%; height:100%; object-fit:cover; transform:scale(1.02);
    transition: transform .45s cubic-bezier(.22,.61,.36,1), filter .35s ease;
}
.member:hover .m-photo img{ transform:scale(1.06); filter:saturate(1.06) }
.member .m-body{ padding:14px 14px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.member .m-name{ margin:0; font-weight:800; letter-spacing:.3px }
.member .m-role{ margin:0; color:#444; font-size:14px }
.member .m-bio{ margin:6px 0 0; color:#555; line-height:1.7; font-size:15px }

/* =========================================================
   Talents / Savoir-faire
   ========================================================= */
.skills-wrap{ width: var(--container); margin: clamp(36px,7vw,90px) auto; }
.skills-head{ display:flex; align-items:center; gap:14px; margin-bottom: clamp(16px,3vw,24px); }
.skills-title{
    margin:0; font-family:"Cinzel",serif; letter-spacing:.4px;
    font-size: clamp(20px,2.4vw,28px);
}
.skills-rule{ flex:1; height:2px; background:var(--gold); border-radius:2px; opacity:.95 }

.skills-grid{
    display:grid; gap: clamp(16px,2.6vw,26px);
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px){ .skills-grid{ grid-template-columns:1fr 1fr } }
@media (max-width: 640px){ .skills-grid{ grid-template-columns:1fr } }

.skill-card{
    background:#fff; border-radius:18px; overflow:hidden;
    box-shadow: 0 18px 40px rgba(0,0,0,.1), 0 6px 14px rgba(0,0,0,.06);
    transition: transform .18s ease, box-shadow .18s ease;
}
.skill-card.lift:hover{ transform: translateY(-4px); box-shadow: 0 26px 64px rgba(0,0,0,.16) }
.skill-photo{ position:relative; aspect-ratio:16/10; background:#000; overflow:hidden; }
.skill-photo img{
    width:100%; height:100%; object-fit:cover; transform:scale(1.02);
    filter:saturate(1.03) contrast(1.02);
    transition: transform .45s cubic-bezier(.22,.61,.36,1), filter .35s ease;
}
.skill-card:hover .skill-photo img{ transform:scale(1.06); filter:saturate(1.07) }
.skill-badge{
    position:absolute; left:12px; top:12px; padding:6px 10px;
    background:rgba(15,15,15,.86); color:#fff; border:1px solid rgba(255,255,255,.12);
    border-radius:999px; font-size:12px; letter-spacing:.3px; backdrop-filter:saturate(1.1) blur(2px);
}
.skill-body{ padding: clamp(14px,2.4vw,18px) clamp(14px,2.4vw,18px) clamp(16px,2.6vw,20px); }
.skill-body h4{ margin:0 0 6px; font-size: clamp(16px,1.8vw,20px); letter-spacing:.2px; }
.skill-body p{ margin:0 0 10px; color:#555; line-height:1.75; }
.skill-chips{
    list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px;
}
.skill-chips li{
    border:1px solid rgba(185,150,90,.45); color:#333; padding:6px 10px;
    border-radius:999px; font-size:12px;
    background: linear-gradient(180deg,#fff, #fff9f1);
}

/* =========================================================
   Bande défilante photos
   ========================================================= */
.strip{
    background:#0b0b0b; padding:18px 0; overflow:hidden;
    border-top:1px solid rgba(255,255,255,.04);
    border-bottom:1px solid rgba(255,255,255,.04);
}
.strip-inner{ display:flex; gap:18px; align-items:center; animation: slide 26s linear infinite; }
.strip .shot{
    flex:0 0 clamp(180px, 24vw, 280px);
    height: clamp(110px, 14vw, 160px);
    border-radius:14px; overflow:hidden; background:#000;
    box-shadow: 0 16px 36px rgba(0,0,0,.14), 0 8px 16px rgba(0,0,0,.08);
}
.strip .shot img{ width:100%; height:100%; object-fit:cover }
@keyframes slide{ to{ transform: translateX(-50%) } }

/* =========================================================
   Reveals & Responsives
   ========================================================= */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease }
.reveal.in{ opacity:1; transform:none }

@media (max-width: 980px){
    .spotlight{ grid-template-columns:1fr; }
    .stats{ grid-template-columns:1fr 1fr; }
    .team-grid{ grid-template-columns:1fr 1fr; }
    .spot-photo{ max-height: 420px; aspect-ratio: 16 / 10; }
    .card-glass{ max-height: none; }
}
@media (max-width: 640px){
    .stats{ grid-template-columns:1fr }
    .team-grid{ grid-template-columns:1fr }
    .strip{ padding:14px 0 }
}

@media (prefers-reduced-motion: reduce){
    /* Supprime les animations si accessibilité */
    .reveal, .member, .spot-photo img, .strip-inner{ transition:none !important; animation:none !important }
    .team-veil{ display:none !important }
    .team-hero.v2 .rule{ animation: none !important }
}

/* Gestion des superpositions */
.menu-overlay{ z-index: 5000 !important; } /* Menu toujours au-dessus */
.team-veil{ z-index: 3000; } /* Rideau en dessous */

/* Révélation scoped à la page équipe */
#team-page .reveal{
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
}
#team-page .reveal.in{ opacity: 1; transform: none; }

/* Neutralise .reveal dans le menu si utilisé */
.menu-overlay .reveal{
    opacity: 1 !important;
    transform: none !important;
}