/* ============================================================
   Via Pirineo — Styles communs
   Partagé par toutes les pages du projet.
   Les pages surchargent les variables via :root { } local.
   ============================================================ */

/* ── Variables globales ─────────────────────────────────── */
:root {
  /* Nations */
  --france:      #00326f;  --france-bg:   #E6F1FB;
  --espagne:     #C0392B;  --espagne-bg:  #FDECEA;
  --andorra:     #2D8A4E;  --andorra-bg:  #E3F4EA;

  /* Catégories */
  --ski:         #185FA5;  --ski-light:   #adc7ff;  --ski-bg:      #E6F1FB;
  --thermal:     #0F6E56;  --th-light:    #7de8c8;
  --produits:    #854F0B;  --produits-bg: #FAEEDA;
  --ot:          #4C3BC4;  --ot-bg:       #EEEDFE;

  /* Neutres */
  --surface:     #f8f9fa;
  --surface-low: #f3f4f5;
  --surface-hi:  #e7e8e9;
  --white:       #ffffff;
  --ink:         #191c1d;
  --ink-light:   #424750;
  --rule:        rgba(0,0,0,.07);

  /* Typographie */
  --serif: 'Cormorant Garamond', serif;
  --sans:  'Plus Jakarta Sans', sans-serif;

  /* Header — surchargé page par page selon le thème clair/sombre */
  --hdr-bg:         rgba(248,249,250,.82);
  --hdr-bg-scroll:  rgba(248,249,250,.97);
  --logo-color:     #191c1d;
  --logo-em-color:  #888;
  --nav-color:      #999;
  --nav-active:     #191c1d;
  --nsw-inactive:   #aaa;

  /* Bottom nav — surchargé page par page */
  --bnav-bg:     rgba(255,255,255,.92);
  --bnav-rule:   rgba(0,0,0,.07);
  --bni-color:   #ccc;
  --bni-on-color: var(--france);
  --bni-on-bg:   var(--france-bg);
}

/* ── Reset & base ───────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html  { scroll-behavior:smooth }
body  { font-family:var(--sans); overflow-x:hidden }
img   { display:block; max-width:100%; height:auto }
button { font-family:var(--sans); cursor:pointer }
a  { color:inherit }

/* ── Utilities ──────────────────────────────────────────── */
.hs { -ms-overflow-style:none; scrollbar-width:none }
.hs::-webkit-scrollbar { display:none }

/* ── Accessibilité : focus visible global ───────────────── */
:focus-visible {
  outline: 2px solid var(--france);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Nation badges ──────────────────────────────────────── */
.nb {
  display:inline-flex; align-items:center; gap:5px;
  font-size:9px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  padding:3px 9px; border-radius:99px;
}
.nb .d { width:5px; height:5px; border-radius:50%; background:currentColor }

/* Sur fond clair */
.nb.fr  { background:var(--france-bg);  color:var(--france) }
.nb.es  { background:var(--espagne-bg); color:var(--espagne) }
.nb.ad  { background:var(--andorra-bg); color:var(--andorra) }

/* Sur fond sombre (-d = dark) */
.nb.fr-d { background:rgba(0,50,111,.4);   color:rgba(173,199,255,.9) }
.nb.es-d { background:rgba(192,57,43,.3);  color:rgba(255,180,170,.9) }
.nb.ad-d { background:rgba(45,138,78,.35); color:rgba(150,240,180,.9) }

/* ── Header ─────────────────────────────────────────────── */
header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:56px;
  background:var(--hdr-bg);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:.5px solid rgba(0,0,0,.07);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 40px;
  transition:background .3s;
}

/* Logo */
.logo {
  font-family:var(--serif); font-size:19px; font-weight:400;
  letter-spacing:.2em; color:var(--logo-color); text-decoration:none;
}
.logo em {
  font-style:italic; font-weight:300; font-size:13px;
  color:var(--logo-em-color); letter-spacing:.05em;
}

/* Navigation principale */
.nav-links { display:flex; gap:28px }
.nav-links a {
  font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--nav-color); text-decoration:none; transition:color .2s;
}
.nav-links a:hover   { color:var(--nav-active) }
.nav-links a.on      { color:var(--nav-active); border-bottom:1px solid currentColor; padding-bottom:2px }
.nav-links a[aria-current="page"] { color:var(--nav-active); border-bottom:1px solid currentColor; padding-bottom:2px }

/* Côté droit du header */
.nav-right,
.nations-sw { display:flex; align-items:center; gap:8px }

/* Switcher nations */
.nsw {
  font-size:10px; font-weight:700; letter-spacing:.1em;
  padding:4px 11px; border-radius:99px;
  border:.5px solid transparent; background:transparent;
  color:var(--nsw-inactive); transition:all .2s;
}
.nsw.afr { background:var(--france-bg);  color:var(--france);  border-color:var(--france) }
.nsw.aes { background:var(--espagne-bg); color:var(--espagne); border-color:var(--espagne) }
.nsw.aad { background:var(--andorra-bg); color:var(--andorra); border-color:var(--andorra) }
.nsw:not(.afr):not(.aes):not(.aad):hover { color:var(--nav-active); border-color:var(--rule) }

/* ── Breadcrumb ─────────────────────────────────────────── */
.breadcrumb {
  padding:80px 48px 0;
  display:flex; align-items:center; gap:10px;
}
.bc-link {
  font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--nav-color); text-decoration:none; transition:color .2s;
}
.bc-link:hover { color:var(--nav-active) }
.bc-sep { color:var(--nav-color); font-size:12px }
.bc-current {
  font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--nav-active);
}

/* ── Reveal au scroll ───────────────────────────────────── */
.rv { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease }
.rv.in { opacity:1; transform:none }
.d1 { transition-delay:.1s }
.d2 { transition-delay:.2s }
.d3 { transition-delay:.3s }
.d4 { transition-delay:.4s }

/* ── Footer (couleurs surchargées par thème) ────────────── */
footer { padding:80px 48px 48px }
.foot-g {
  display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr;
  gap:48px; margin-bottom:64px;
}
.foot-logo { font-family:var(--serif); font-size:22px; letter-spacing:.2em; display:block; margin-bottom:14px }
.foot-tag  { font-size:13px; line-height:1.7; font-weight:300; margin-bottom:22px }
.foot-nats { display:flex; gap:6px; flex-wrap:wrap }
.foot-col-t {
  font-size:9px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  margin-bottom:18px; display:block;
}
.foot-col a {
  display:block; margin-bottom:12px;
  font-family:var(--serif); font-size:16px; font-style:italic; font-weight:300;
  text-decoration:none; transition:color .2s;
}
.foot-bot {
  border-top:.5px solid var(--rule);
  padding-top:24px;
  display:flex; justify-content:space-between; align-items:center;
}
.foot-copy  { font-size:9px; font-weight:600; letter-spacing:.18em; text-transform:uppercase }
.foot-leg   { display:flex; gap:20px }
.foot-leg a { font-size:9px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; transition:color .2s }

/* ── Bottom nav (mobile uniquement) ────────────────────── */
.bnav {
  display:none;
  position:fixed; bottom:0; left:0; right:0; z-index:100;
  background:var(--bnav-bg);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-top:.5px solid var(--bnav-rule);
  padding:10px 0 22px;
}
.bnav-in { display:flex; align-items:center }
.bni {
  flex:1; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  text-decoration:none; color:var(--bni-color);
  padding:4px 2px !important; border-radius:10px; transition:all .2s;
}
.bni.on { color:var(--bni-on-color); background:var(--bni-on-bg) }
.bni .i  { font-size:20px }
.bni .l  {
  font-size:8px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
  text-align:center;
}

/* ── Responsive (commun) ────────────────────────────────── */
@media (max-width:960px) {
  header { padding:0 20px }
  .nav-links { display:none }
  .breadcrumb { padding-left:24px; padding-right:24px }
}
@media (max-width:900px) {
  .bnav { display:block }
  footer { padding-left:24px; padding-right:24px; padding-bottom:96px }
  .foot-g { grid-template-columns:1fr 1fr }
}
@media (max-width:600px) {
  .foot-g { grid-template-columns:1fr }
}