/* =========================================================
   Les Warriors du GR10 — feuille de style
   ========================================================= */

:root{
  /* couleurs */
  --bg:#f6f4ef;
  --bg-alt:#fffdf9;
  --band:#efece4;
  --text:#1e241d;
  --text-dim:#5c6458;
  --line:#e2ded3;
  --line-soft:#ece8de;
  --brand:#2f5d43;
  --brand-dim:#4a7a5c;
  --accent:#c15c2c;
  --chip:#eceee4;

  /* effets */
  --shadow-sm:0 1px 3px rgba(30,36,25,.05);
  --shadow:0 2px 12px rgba(30,36,25,.07);
  --shadow-lg:0 10px 30px rgba(30,36,25,.13);
  --radius:14px;
  --radius-sm:10px;

  /* rythme */
  --gutter:22px;
  --sec-space:68px;
  --nav-h:56px;

  /* graphiques (lus par le JS/SVG) */
  --profile-fill:rgba(47,93,67,.15);
  --profile-line:#2f5d43;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141813;
    --bg-alt:#1c221a;
    --band:#191e18;
    --text:#edefe5;
    --text-dim:#a4ac9c;
    --line:#2f382c;
    --line-soft:#252d23;
    --brand:#84c39c;
    --brand-dim:#63a07c;
    --accent:#e08a52;
    --chip:#232a21;
    --shadow-sm:0 1px 3px rgba(0,0,0,.3);
    --shadow:0 2px 12px rgba(0,0,0,.32);
    --shadow-lg:0 10px 30px rgba(0,0,0,.45);
    --profile-fill:rgba(132,195,156,.16);
    --profile-line:#84c39c;
  }
}
:root[data-theme="dark"]{
  --bg:#141813;
  --bg-alt:#1c221a;
  --band:#191e18;
  --text:#edefe5;
  --text-dim:#a4ac9c;
  --line:#2f382c;
  --line-soft:#252d23;
  --brand:#84c39c;
  --brand-dim:#63a07c;
  --accent:#e08a52;
  --chip:#232a21;
  --shadow-sm:0 1px 3px rgba(0,0,0,.3);
  --shadow:0 2px 12px rgba(0,0,0,.32);
  --shadow-lg:0 10px 30px rgba(0,0,0,.45);
  --profile-fill:rgba(132,195,156,.16);
  --profile-line:#84c39c;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%}

h1,h2,h3{
  font-family:'Fraunces',Georgia,'Iowan Old Style',serif;
  font-weight:600;
  line-height:1.14;
  letter-spacing:-.012em;
  text-wrap:balance;
  margin:0;
}
p{text-wrap:pretty; margin:0}

/* césures pour le texte courant en français : évite les lignes trouées */
.lede,.section-intro,.footer-inner p,.note,.body-desc,.lodge .meta{
  hyphens:auto;
  -webkit-hyphens:auto;
}

a{color:var(--brand)}

.wrap{
  max-width:1060px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- en-tête ---------- */
.hero{
  padding-block:clamp(40px,7vw,68px) clamp(34px,5vw,52px);
  background:
    radial-gradient(1200px 520px at 12% -20%, rgba(47,93,67,.15), transparent 62%),
    radial-gradient(900px 420px at 102% -10%, rgba(193,92,44,.11), transparent 58%);
  border-bottom:1px solid var(--line);
}
.hero-inner{
  display:flex;
  align-items:center;
  gap:clamp(22px,4vw,40px);
}
.hero-logo{
  flex:none;
  width:clamp(96px,14vw,148px);
  height:clamp(96px,14vw,148px);
  border-radius:50%;
  box-shadow:var(--shadow-lg);
}
.hero-text{min-width:0}

.eyebrow{
  display:block;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--brand);
  margin-bottom:.6em;
}
h1{font-size:clamp(1.85rem,4.6vw,2.9rem)}
.lede{
  color:var(--text-dim);
  font-size:clamp(1rem,1.4vw,1.1rem);
  max-width:52ch;
  margin-top:.7em;
}

.hero-stats{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:26px;
}
.stat-pill{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 15px;
  font-size:.875rem;
  color:var(--text-dim);
  box-shadow:var(--shadow-sm);
  white-space:nowrap;
}
.stat-pill b{
  font-size:1rem;
  font-weight:700;
  color:var(--brand);
  letter-spacing:-.01em;
}
.stat-pill.up b{color:var(--accent)}

/* ---------- menu collant ---------- */
.nav{
  position:sticky;
  top:0;
  z-index:500;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)){
  .nav{background:var(--bg)}
}
.nav-inner{
  display:flex;
  align-items:center;
  gap:18px;
  height:var(--nav-h);
}
.nav-brand{
  display:flex;
  align-items:center;
  gap:9px;
  flex:none;
  font-weight:700;
  font-size:.9rem;
  color:var(--text);
  text-decoration:none;
  white-space:nowrap;
}
.nav-brand img{width:28px; height:28px; border-radius:50%}

.nav-links{
  display:flex;
  align-items:center;
  gap:4px;
  margin-left:auto;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{
  position:relative;
  padding:7px 13px;
  border-radius:999px;
  font-size:.875rem;
  font-weight:600;
  color:var(--text-dim);
  text-decoration:none;
  white-space:nowrap;
  transition:color .15s ease, background-color .15s ease;
}
.nav-links a:hover{color:var(--text); background:var(--chip)}
.nav-links a.active{color:#fff; background:var(--brand)}

@media (max-width:720px){
  .nav-brand span{display:none}
  .nav-links{margin-left:0; width:100%}
}

/* ---------- sections ---------- */
section{
  padding-block:var(--sec-space);
  scroll-margin-top:calc(var(--nav-h) + 12px);
}
section.band{
  background:var(--band);
  border-block:1px solid var(--line-soft);
}
.sec-head{margin-bottom:30px; max-width:64ch}
h2{font-size:clamp(1.45rem,2.8vw,1.95rem)}
.section-intro{
  color:var(--text-dim);
  font-size:.97rem;
  margin-top:.55em;
}
.empty{
  color:var(--text-dim);
  font-size:.92rem;
  font-style:italic;
  margin:0;
}

/* ---------- carte ---------- */
#map{
  height:clamp(320px,58vh,520px);
  width:100%;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  background:var(--chip);
}
/* légende cliquable sous la carte */
.map-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.leg{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 13px;
  font-family:inherit;
  font-size:.82rem;
  color:var(--text-dim);
  cursor:pointer;
  text-align:left;
  transition:border-color .15s ease, color .15s ease, background-color .15s ease;
}
.leg:hover{color:var(--text); border-color:var(--brand-dim)}
.leg b{color:var(--text); font-weight:700; margin-right:2px}
.leg.on{
  background:var(--text);
  border-color:var(--text);
  color:var(--bg-alt);
}
.leg.on b{color:var(--bg-alt)}
.leg-dot{
  flex:none;
  width:11px; height:11px;
  border-radius:50%;
  box-shadow:0 0 0 2px var(--bg-alt);
}
.leg.on .leg-dot{box-shadow:0 0 0 2px var(--text)}
.leg-all{font-weight:600}

.map-note{
  margin-top:11px;
  font-size:.8rem;
  color:var(--text-dim);
}

/* habillage des contrôles Leaflet */
.leaflet-container{font-family:'Inter',sans-serif}
.leaflet-control-layers,
.leaflet-bar{
  border:1px solid var(--line) !important;
  box-shadow:var(--shadow) !important;
  border-radius:var(--radius-sm) !important;
  overflow:hidden;
}
.leaflet-control-layers{
  background:var(--bg-alt) !important;
  color:var(--text);
  padding:2px;
}
.leaflet-control-layers-list{padding:5px 9px 5px 6px; font-size:.84rem}
.leaflet-control-layers label{margin-bottom:2px; font-weight:500}
.leaflet-bar a{
  background:var(--bg-alt) !important;
  color:var(--text) !important;
  border-bottom-color:var(--line) !important;
}
.leaflet-bar a:hover{background:var(--chip) !important}
.leaflet-popup-content-wrapper,
.leaflet-tooltip{
  background:var(--bg-alt);
  color:var(--text);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  font-size:.85rem;
}
.leaflet-popup-tip{background:var(--bg-alt)}
.leaflet-tooltip-top::before{border-top-color:var(--line)}
.leaflet-control-attribution{
  background:color-mix(in srgb, var(--bg-alt) 82%, transparent) !important;
  color:var(--text-dim) !important;
  font-size:.66rem !important;
}
.leaflet-control-attribution a{color:var(--brand-dim) !important}

/* ---------- tuiles (vue 3D, album) ---------- */
.tile{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  text-decoration:none;
  color:#fff;
  background-size:cover;
  background-position:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
.tile:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg)}
.tile::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(8,12,7,.08) 32%, rgba(8,12,7,.84) 100%);
}
.tile-art{position:absolute; inset:0; width:100%; height:100%}

.tile-compact{
  height:154px;
  max-width:440px;
  margin-top:26px;
}
.tile-album{height:clamp(196px,26vw,248px)}

.tile-inner{
  position:absolute;
  inset:auto 0 0 0;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:16px 18px;
}
.tile-kicker{
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.8);
  margin-bottom:3px;
}
.tile-title{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;
  font-size:clamp(1.1rem,2vw,1.3rem);
  line-height:1.2;
  color:#fff;
  text-wrap:balance;
}
.tile-cta{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:12px;
  background:#fff;
  color:#1a1f17;
  font-weight:700;
  font-size:.84rem;
  padding:8px 16px;
  border-radius:999px;
}
.tile-cta svg{color:var(--accent); flex:none}

/* ---------- étapes ---------- */
.stages{display:flex; flex-direction:column; gap:14px}
.stage-card{
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:box-shadow .2s ease;
}
.stage-card.open{box-shadow:var(--shadow)}

.stage-head{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 20px;
  cursor:pointer;
  user-select:none;
}
.stage-badge{
  flex:none;
  width:50px; height:50px;
  border-radius:12px;
  background:var(--brand);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;
  font-size:.95rem;
}
.stage-title{flex:1; min-width:0}
/* le nom d'étape passe à la ligne au lieu d'être tronqué */
.stage-title .route{
  font-weight:600;
  font-size:1rem;
  line-height:1.35;
  text-wrap:pretty;
}
.stage-title .sub{
  color:var(--text-dim);
  font-size:.83rem;
  margin-top:2px;
}
.stage-metrics{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  flex:none;
  justify-content:flex-end;
}
.stage-metrics span{
  background:var(--chip);
  border-radius:7px;
  padding:4px 9px;
  font-size:.79rem;
  color:var(--text-dim);
  white-space:nowrap;
}
.stage-metrics b{color:var(--text); font-weight:700}
.chev{flex:none; color:var(--text-dim); transition:transform .22s ease}
.stage-card.open .chev{transform:rotate(180deg)}

.stage-body{display:none; border-top:1px solid var(--line-soft)}
.stage-card.open .stage-body{display:block}
.stage-body-inner{padding:20px}

.profile-wrap{
  background:var(--chip);
  border-radius:var(--radius-sm);
  padding:14px 16px 8px;
}
.profile-wrap svg{display:block; width:100%; height:auto}
.profile-labels{
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-top:6px;
  font-size:.76rem;
  color:var(--text-dim);
}
.profile-labels span{flex:0 1 auto; min-width:0}
.profile-labels span:last-child{text-align:right}

.lodging-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
  gap:10px 18px;
  margin-top:22px;
}
.lodging-group h4{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--brand);
  margin:0 0 9px;
}
.lodge{
  border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);
  background:var(--bg);
  padding:10px 13px;
  margin-bottom:8px;
  font-size:.89rem;
}
.lodge .name{font-weight:600; line-height:1.35}
.lodge .name a{text-decoration:none}
.lodge .name a:hover{text-decoration:underline}
.lodge .type{color:var(--text-dim); font-size:.8rem}
.lodge .meta{color:var(--text-dim); font-size:.8rem; margin-top:4px; line-height:1.45}

.stage-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}

.btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:var(--bg-alt);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:9px;
  padding:8px 15px;
  font-size:.85rem;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  transition:border-color .15s ease, background-color .15s ease;
}
.btn:hover{border-color:var(--brand-dim)}
.btn.primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn.primary:hover{background:var(--brand-dim); border-color:var(--brand-dim)}

/* ---------- planning de l'expédition ---------- */
.planning{
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
}
/* filin vertical reliant les journées */
.planning::before{
  content:"";
  position:absolute;
  left:19px;
  top:14px;
  bottom:14px;
  width:2px;
  background:var(--line);
}
.jour{
  position:relative;
  display:flex;
  gap:16px;
  padding-bottom:16px;
}
.jour:last-child{padding-bottom:0}
.puce{
  position:relative;
  z-index:1;
  flex:none;
  width:40px; height:40px;
  border-radius:50%;
  background:var(--brand);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem;
  font-weight:700;
  box-shadow:0 0 0 4px var(--band);
}
.jour-transfert .puce{
  background:var(--bg-alt);
  color:var(--text-dim);
  border:1px solid var(--line);
}
.jour-corps{
  flex:1;
  min-width:0;
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:13px 16px;
  box-shadow:var(--shadow-sm);
}
.jour-transfert .jour-corps{background:transparent; box-shadow:none; border-style:dashed}
.jour-date{
  font-size:.73rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:3px;
}
.jour-transfert .jour-date{color:var(--text-dim)}
.jour-titre{font-weight:600; font-size:1rem; line-height:1.35; text-wrap:pretty}
.jour-detail{
  color:var(--text-dim);
  font-size:.86rem;
  line-height:1.5;
  margin-top:3px;
}
.jour .chiffres{display:flex; flex-wrap:wrap; gap:7px; margin-top:11px}
.jour .chiffres span{
  background:var(--chip);
  border-radius:7px;
  padding:4px 10px;
  font-size:.8rem;
  color:var(--text-dim);
  white-space:nowrap;
}
.jour .chiffres b{color:var(--brand); font-weight:700}

@media (max-width:560px){
  .planning::before{left:15px}
  .puce{width:32px; height:32px; font-size:.72rem}
  .jour{gap:12px}
}

/* ---------- sorties & préparation ---------- */
.roster{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px}
.warrior{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px 15px 4px 4px;
  font-size:.87rem;
  font-weight:600;
  box-shadow:var(--shadow-sm);
  white-space:nowrap;
}
.avatar{
  flex:none;
  width:26px; height:26px;
  border-radius:50%;
  background:var(--brand);
  color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.76rem;
  font-weight:700;
  line-height:1;
}

.sorties{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:14px;
}
.sortie{
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:15px 17px;
  box-shadow:var(--shadow-sm);
}
.sortie-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:13px;
}
.sortie .date{
  font-size:.73rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--accent);
  white-space:nowrap;
}
.statut{
  flex:none;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:3px 9px;
  border-radius:999px;
  white-space:nowrap;
}
.statut.todo{background:var(--chip); color:var(--text-dim)}
.statut.ok{background:color-mix(in srgb, var(--brand) 16%, transparent); color:var(--brand)}
.statut.done{background:var(--brand); color:#fff}

.sortie .orga{display:flex; align-items:center; gap:11px}
.sortie .orga .avatar{width:38px; height:38px; font-size:1rem}
.sortie .titre{font-weight:600; font-size:1rem; line-height:1.3}
.sortie .lieu{color:var(--text-dim); font-size:.83rem; margin-top:1px}
.sortie .chiffres{display:flex; flex-wrap:wrap; gap:7px; margin-top:13px}
.sortie .chiffres span{
  background:var(--chip);
  border-radius:7px;
  padding:5px 10px;
  font-size:.81rem;
  color:var(--text-dim);
  white-space:nowrap;
}
.sortie .chiffres b{color:var(--brand); font-weight:700}
.sortie .note{
  margin-top:12px;
  padding-top:11px;
  border-top:1px solid var(--line-soft);
  font-size:.84rem;
  color:var(--text-dim);
  line-height:1.5;
}

/* ---------- téléchargements ---------- */
.dl-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(238px,1fr));
  gap:12px;
}
.dl-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
  box-shadow:var(--shadow-sm);
}
.dl-card.featured{border-color:var(--brand-dim)}
.dl-card .info{min-width:0}
.dl-card .info b{display:block; font-size:.94rem; font-weight:600}
.dl-card .info span{
  display:block;
  color:var(--text-dim);
  font-size:.8rem;
  line-height:1.4;
  margin-top:1px;
}

/* ---------- pied de page ---------- */
footer{
  border-top:1px solid var(--line);
  padding-block:34px 40px;
  background:var(--bg-alt);
}
.footer-inner{
  display:flex;
  align-items:flex-start;
  gap:20px;
}
.footer-logo{
  flex:none;
  width:54px; height:54px;
  border-radius:50%;
  opacity:.9;
}
.footer-inner p{
  color:var(--text-dim);
  font-size:.85rem;
  line-height:1.65;
  max-width:74ch;
}
.footer-inner strong{color:var(--text)}

/* ---------- adaptatif ---------- */
@media (max-width:860px){
  :root{--sec-space:52px}
  .stage-metrics{display:none}
}
@media (max-width:760px){
  .hero-inner{flex-direction:column; align-items:flex-start}
  .lede{max-width:none}
}
@media (max-width:560px){
  :root{--gutter:18px; --sec-space:44px}
  .stage-head{gap:13px; padding:14px 15px}
  .stage-badge{width:44px; height:44px; font-size:.86rem}
  .stage-body-inner{padding:16px 15px}
  .tile-compact{max-width:none}
  .footer-inner{flex-direction:column; gap:16px}
  .profile-labels{font-size:.72rem}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}