/* ===================================================================
   WPC SPORT MANAGEMENT AGENCY — feuille de style principale
   Variables de couleur injectees par js/app.js depuis site_config
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bg:#0B0B0C; --surface:#141414; --text:#F2EDE4; --primary:#C6A15B; --accent:#C6A15B;
  --nav-bg:#0B0B0C; --nav-text:#F2EDE4;
  --border: color-mix(in srgb, var(--text) 12%, transparent);
  --radius: 4px;
  --font-display:'Fraunces', serif;
  --font-body:'Manrope', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
  --maxw: 1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); line-height:1.55; transition:background .3s ease, color .3s ease;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.2rem,4vw,2.5rem)}
.eyebrow{
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.14em;
  font-size:.72rem; color:var(--accent); margin-bottom:.9rem; display:block;
}
h1,h2,h3{font-family:var(--font-display); font-weight:600; margin:0 0 .6rem; letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,6vw,4.4rem); line-height:1.02; font-weight:700}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
p{margin:0 0 1rem; color:color-mix(in srgb, var(--text) 78%, transparent)}
section{padding:clamp(3.5rem,8vw,7rem) 0; border-bottom:1px solid var(--border)}
.btn{
  display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.6rem; border-radius:var(--radius);
  font-weight:600; font-size:.92rem; cursor:pointer; border:1px solid transparent; transition:transform .18s ease, opacity .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--accent); color:var(--bg)}
.btn-ghost{border-color:var(--border); color:var(--text)}
.btn-ghost:hover{border-color:var(--accent)}
::selection{background:var(--accent); color:var(--bg)}

/* ---------- HEADER / NAV ---------- */
header.site-header{
  position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--nav-bg) 92%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--border);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:1rem clamp(1.2rem,4vw,2.5rem); gap:1.5rem; max-width:var(--maxw); margin:0 auto}
.logo-wrap{display:flex; align-items:center; gap:.6rem; cursor:pointer; user-select:none; color:var(--nav-text)}
.logo-mark{
  width:38px; height:38px; border:1px solid var(--accent); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display);
  font-weight:700; color:var(--accent); font-size:.95rem;
}
.logo-text{font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--nav-text)}
.logo-text small{display:block; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.12em; opacity:.6; font-weight:400}
nav.main-nav{display:flex; gap:1.7rem; flex-wrap:wrap}
nav.main-nav a{font-size:.88rem; font-weight:500; color:var(--nav-text); opacity:.82; transition:opacity .15s; position:relative; padding-bottom:.2rem}
nav.main-nav a:hover{opacity:1; color:var(--accent)}
nav.main-nav a.active{opacity:1; color:var(--accent)}
nav.main-nav a.active::after{content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--accent)}
.mobile-nav{display:none; flex-direction:column; padding:0 clamp(1.2rem,4vw,2.5rem) 1rem; gap:.9rem}
.mobile-nav a{font-size:.95rem; color:var(--nav-text); opacity:.85}
.mobile-nav a.active{color:var(--accent); opacity:1}
.mobile-nav.open{display:flex}
.nav-tools{display:flex; align-items:center; gap:.7rem}
.tool-btn{
  background:none; border:1px solid var(--border); color:var(--nav-text); border-radius:var(--radius);
  padding:.45rem .6rem; cursor:pointer; font-size:.85rem; font-family:var(--font-body);
}
select.lang-select{
  background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--radius);
  padding:.45rem .5rem; font-size:.8rem; cursor:pointer;
}
.burger{display:none; background:none; border:1px solid var(--border); color:var(--nav-text); border-radius:var(--radius); padding:.45rem .6rem; cursor:pointer; font-size:1rem}

/* ---------- HERO ---------- */
.hero{border-bottom:1px solid var(--border); padding:clamp(4rem,10vw,8rem) 0}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center}
.hero-subtitle{font-size:1.08rem; max-width:46ch}
.hero-cta{display:flex; gap:1rem; margin-top:1.8rem; flex-wrap:wrap}
.hero-stats{display:flex; gap:2.4rem; margin-top:2.6rem; flex-wrap:wrap}
.hero-stats div b{display:block; font-family:var(--font-display); font-size:1.7rem; color:var(--accent)}
.hero-stats div span{font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; opacity:.65}
.hero-visual{
  aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border);
  background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, var(--surface)), var(--surface));
  position:relative;
}
.hero-visual img{width:100%;height:100%;object-fit:cover}
.ticker{
  overflow:hidden; white-space:nowrap; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:var(--surface); padding:.7rem 0;
}
.ticker-track{display:inline-flex; gap:2.6rem; animation:ticker 32s linear infinite; padding-left:100%}
.ticker span{font-family:var(--font-mono); font-size:.8rem; letter-spacing:.05em; color:var(--accent); text-transform:uppercase}
@keyframes ticker{ from{transform:translateX(0)} to{transform:translateX(-100%)} }

/* ---------- GRIDS / CARDS ---------- */
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:2.6rem; flex-wrap:wrap}
.card{
  display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.6rem; transition:border-color .2s ease, transform .2s ease;
}
.card:hover{border-color:var(--accent); transform:translateY(-3px)}
.grid{display:grid; gap:1.4rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr}}

.discipline-chip{
  display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1rem; border:1px solid var(--border);
  border-radius:30px; font-size:.85rem; cursor:pointer; background:var(--surface); margin:0 .5rem .5rem 0;
}
.discipline-chip.active{border-color:var(--accent); color:var(--accent)}

.athlete-card{overflow:hidden; padding:0}
.athlete-photo{aspect-ratio:3/4; background:color-mix(in srgb, var(--accent) 12%, var(--surface)); overflow:hidden}
.athlete-photo img{width:100%; height:100%; object-fit:cover}
.athlete-body{padding:1.2rem}
.athlete-body h3{font-size:1.1rem; margin-bottom:.2rem}
.athlete-meta{font-size:.78rem; opacity:.6; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.05em}

.service-card .icon, .discipline-card .icon{font-size:1.8rem; margin-bottom:.8rem; display:block}

.article-card{padding:0; overflow:hidden}
.article-photo{aspect-ratio:16/10; background:var(--border); overflow:hidden}
.article-photo img{width:100%; height:100%; object-fit:cover}
.article-body{padding:1.3rem}
.article-cat{font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent)}
.tabs{display:flex; gap:.6rem; margin-bottom:2rem; flex-wrap:wrap}
.tab-btn{
  background:none; border:1px solid var(--border); color:var(--text); padding:.5rem 1rem; border-radius:30px;
  cursor:pointer; font-size:.84rem; font-family:var(--font-body);
}
.tab-btn.active{background:var(--accent); color:var(--bg); border-color:var(--accent)}

.partner-card{display:flex; flex-direction:column; align-items:center; text-align:center; gap:.6rem}
.partner-logo{width:64px; height:64px; border-radius:50%; background:var(--bg); display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid var(--border)}
.partner-logo img{width:100%; height:100%; object-fit:cover}

/* ---------- FORMS ---------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.form-grid .full{grid-column:1/-1}
label{display:block; font-size:.8rem; margin-bottom:.35rem; opacity:.75}
input,textarea,select{
  width:100%; padding:.75rem .9rem; border-radius:var(--radius); border:1px solid var(--border);
  background:var(--surface); color:var(--text); font-family:var(--font-body); font-size:.92rem;
}
textarea{resize:vertical; min-height:110px}
.type-select{display:flex; gap:.6rem; margin-bottom:1.4rem; flex-wrap:wrap}
.type-option{flex:1; min-width:140px; border:1px solid var(--border); border-radius:var(--radius); padding:.9rem; cursor:pointer; text-align:center}
.type-option.active{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent)}
.form-msg{margin-top:1rem; padding:.8rem 1rem; border-radius:var(--radius); font-size:.88rem; display:none}
.form-msg.ok{display:block; background:color-mix(in srgb, #4ade80 18%, transparent); color:#4ade80}
.form-msg.err{display:block; background:color-mix(in srgb, #f87171 18%, transparent); color:#f87171}

/* ---------- CONTACT / FOOTER ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:3rem}
.contact-info-item{margin-bottom:1.2rem}
.contact-info-item b{font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); display:block; margin-bottom:.3rem}
footer{padding:3rem 0 1.5rem; font-size:.85rem}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:2rem; margin-bottom:2rem}
.footer-bottom{border-top:1px solid var(--border); padding-top:1.4rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; opacity:.65; font-size:.8rem}
.social-row{display:flex; gap:.7rem; margin-top:1rem}
.social-row a{width:36px; height:36px; border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center}

/* =========================================================
   5 DISPOSITIONS (layout presets) — appliquees via body.layout-*
   ========================================================= */

/* 1. CLASSIQUE : nav centree, cartes arrondies, hero centre */
body.layout-classique .hero-grid{grid-template-columns:1fr; text-align:center}
body.layout-classique .hero-cta{justify-content:center}
body.layout-classique .hero-stats{justify-content:center}
body.layout-classique .hero-visual{display:none}
body.layout-classique{--radius:12px}
body.layout-classique .nav-inner{justify-content:center; flex-direction:column; gap:.8rem}

/* 2. EDITORIAL (defaut) : asymetrique, hero en deux colonnes, angles nets */
body.layout-editorial{--radius:2px}

/* 3. IMMERSION : plein cadre, fond sombre cinematique, cartes sans bordures */
body.layout-immersion{--radius:0px}
body.layout-immersion .card{border:none; background:color-mix(in srgb, var(--surface) 60%, transparent)}
body.layout-immersion .hero{padding:0; position:relative; min-height:88vh; display:flex; align-items:center}
body.layout-immersion .hero-grid{grid-template-columns:1fr; max-width:760px}
body.layout-immersion .hero-visual{display:none}
body.layout-immersion section{border-bottom:none}

/* 4. GRILLE MINIMALE : type broadsheet, hairlines, colonnes denses */
body.layout-minimal{--radius:0px}
body.layout-minimal .grid-3{grid-template-columns:repeat(3,1fr); gap:0}
body.layout-minimal .card{border-radius:0; border-left:none; border-top:none}
body.layout-minimal .card:first-child{border-left:1px solid var(--border)}
body.layout-minimal h1,body.layout-minimal h2{font-family:var(--font-mono); text-transform:uppercase; letter-spacing:-.01em; font-weight:500}

/* 5. DYNAMIQUE : cartes dashboard, ombres douces, hero asym inverse */
body.layout-dynamique{--radius:16px}
body.layout-dynamique .card{box-shadow:0 8px 30px -14px rgba(0,0,0,.5)}
body.layout-dynamique .hero-grid{grid-template-columns:.9fr 1.1fr}
body.layout-dynamique .hero-visual{order:-1}

/* ---------- ADMIN ---------- */
.admin-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.72); z-index:200; display:none;
  align-items:center; justify-content:center; padding:1.5rem;
}
.admin-overlay.open{display:flex}
.admin-box{
  background:var(--surface); border:1px solid var(--accent); border-radius:10px; width:100%; max-width:420px;
  padding:2.2rem;
}
.admin-panel{
  position:fixed; inset:0; background:var(--bg); z-index:210; display:none; overflow:auto;
}
.admin-panel.open{display:block}
.admin-topbar{
  display:flex; justify-content:space-between; align-items:center; padding:1rem 1.6rem;
  border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg); z-index:5;
}
.admin-tabs{display:flex; gap:.4rem; padding:1rem 1.6rem 0; flex-wrap:wrap}
.admin-tab{padding:.6rem 1.1rem; border-radius:8px 8px 0 0; cursor:pointer; border:1px solid transparent; font-size:.86rem}
.admin-tab.active{background:var(--surface); border-color:var(--border); border-bottom-color:var(--bg)}
.admin-content{padding:1.6rem}
.admin-section{display:none}
.admin-section.active{display:block}
.admin-list-item{
  display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.9rem 1rem;
  border:1px solid var(--border); border-radius:8px; margin-bottom:.6rem; background:var(--surface);
}
.admin-actions{display:flex; gap:.5rem}
.icon-btn{background:none; border:1px solid var(--border); border-radius:6px; padding:.4rem .6rem; cursor:pointer; color:var(--text)}
.icon-btn:hover{border-color:var(--accent)}
.color-row{display:flex; align-items:center; gap:.8rem; margin-bottom:.8rem}
.color-row input[type=color]{width:44px; height:34px; padding:0; border:1px solid var(--border); background:none; cursor:pointer}
.layout-picker{display:grid; grid-template-columns:repeat(5,1fr); gap:.8rem; margin:1rem 0}
.layout-thumb{border:2px solid var(--border); border-radius:8px; padding:.8rem .5rem; text-align:center; font-size:.72rem; cursor:pointer}
.layout-thumb.active{border-color:var(--accent); color:var(--accent)}
.modal-form{max-width:640px}
.close-x{background:none; border:none; color:var(--text); font-size:1.4rem; cursor:pointer}

/* ---------- MISC ---------- */
.hidden{display:none !important}
.badge{font-family:var(--font-mono); font-size:.68rem; padding:.15rem .5rem; border:1px solid var(--accent); color:var(--accent); border-radius:20px; text-transform:uppercase}
.empty-state{opacity:.5; font-size:.9rem; padding:2rem; text-align:center; border:1px dashed var(--border); border-radius:8px}

@media(max-width:900px){
  nav.main-nav{display:none}
  .burger{display:inline-block}
  .hero-grid, .contact-grid, .footer-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}