/* PyPic — surcharges de la charte PyCol (style.css reste partagé tel quel).
   Palette « Glacier » (2026-08-23) : PyPic est froid et minéral là où PyCol est chaud et ensoleillé —
   papier gris-bleu, encre ardoise, granite/névé, pastels froids ; le rouge du logo est le seul accent chaud.
   Écriture manuscrite : Kalam (carnet de course), là où PyCol a Caveat.
   Rouge du logo #f83b3b (3,4:1 : aplats et grands titres seulement) ; accent texte #c2281d (5,3:1 AA). Nuit #ff7a6c. */
:root {
  --paper: #eef2f5;
  --paper2: #e2e8ed;
  --card: #ffffff;
  --card2: #f8fafc;
  --tint: #e4ebf0;
  --ink: #1b2731;
  --ink2: #41505c;
  --muted: #7a8994;
  --line: rgba(27,39,49,.13);
  --accent: #c2281d;
  --accent-fill: #c2281d;
  --accent-soft: rgba(194,40,29,.08);
  --green: #2f8f5b;
  --green-fill: #2f8f5b;
  --night: #16202a;
  --font-s: 'Kalam', 'Segoe Print', cursive;
}
:root {
  --accent: #c2281d;
  --accent-fill: #c2281d;
  --accent-soft: rgba(194, 40, 29, .09);
  --hero-sky1: #f1f3f4; --hero-sky2: #e1e8ec; --hero-sky3: #cbd8e1; --hero-sky4: #b3c6d3;
}
html[data-theme="night"] {
  --paper: #121b24;
  --paper2: #0e161e;
  --card: #1c2832;
  --card2: #202d38;
  --tint: #18242e;
  --ink: #e6ebef;
  --ink2: #b3bec8;
  --muted: #84929d;
  --line: rgba(230,235,239,.14);
  --accent: #ff7a6c;
  --accent-soft: rgba(255,122,108,.14);
  --green: #4fc07f;
}
html[data-theme="night"] .lb-row.me { box-shadow: 0 0 0 2px rgba(255,122,108,.2); }

/* logo de Lucas (fond rouge #f83b3b, 960×580) : coins arrondis comme la pastille PyCol */
.brand-logo { height: 52px; width: auto; border-radius: 10px; display: block; }

/* hero : illustration maison (hero-jour/soir/nuit.webp) ; les règles .hero-svg ci-dessous restent pour mémoire */
.hero-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; display: block; }
.hero-svg .hs-far { fill: #a8bccb; transition: fill 1.5s; }
.hero-svg .hs-near { fill: #5d6f7c; transition: fill 1.5s; }
.hero-svg .hs-front { fill: #394652; transition: fill 1.5s; }
.hero-svg .hs-snow { fill: #f7fafc; }
.hero.hs-evening .hero-svg .hs-far { fill: #c8a3a8; }
.hero.hs-evening .hero-svg .hs-near { fill: #6f5c68; }
.hero.hs-evening .hero-svg .hs-front { fill: #3e3340; }
.hero.hs-night .hero-svg .hs-far { fill: #243247; }
.hero.hs-night .hero-svg .hs-near { fill: #18202f; }
.hero.hs-night .hero-svg .hs-front { fill: #101722; }
.hero.hs-night .hero-svg .hs-snow { fill: #c4cfdd; }
.hero h1 { color: var(--hs-titre, #4a6172); }
.hero .lead, .hero .kicker, .hero-stats { color: var(--hs-titre, var(--ink)); }
.hero.hs-night .hero-stats .stat span, .hero.hs-night .lead { color: #e9e6dd; }

/* progression */
.prog-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem; box-shadow: var(--shadow); }
.prog-big { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.prog-big b { font-family: var(--font-d); font-weight: 700; font-size: 3.2rem; line-height: 1; color: var(--accent); }
.prog-big span { font-family: var(--font-s); font-size: 1.35rem; color: var(--ink2); }
.prog-bar { height: 12px; border-radius: 6px; background: var(--paper2); overflow: hidden; margin: .8rem 0 1.1rem; }
.prog-bar i { display: block; height: 100%; background: var(--green-fill); border-radius: 6px; transition: width .8s cubic-bezier(.22,1,.36,1); }
.prog-massifs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem .9rem; }
.prog-m { display: grid; grid-template-columns: 1fr auto; gap: .1rem .6rem; font-size: .86rem; align-items: center; }
.prog-m .prog-bar { grid-column: 1 / -1; height: 7px; margin: .15rem 0 .35rem; }
.prog-m b { font-family: var(--font-d); font-size: 1rem; }
.prog-m small { color: var(--muted); }
.prog-empty { font-family: var(--font-s); font-size: 1.2rem; color: var(--ink2); margin: .6rem 0 0; }
#badges { margin-top: 1.2rem; }
#badges h3 { font-family: var(--font-d); text-transform: uppercase; letter-spacing: .06em; font-size: 1.15rem; margin: 0 0 .4rem; }

/* fiche */
.pic-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; padding: .6rem 1.4rem .2rem; }
.pic-facts div b { display: block; font-family: var(--font-d); font-size: 1.35rem; line-height: 1.05; }
.pic-facts div span { font-size: .64rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.pic-cot { display: inline-block; font-family: var(--font-d); font-weight: 700; font-size: 1.15rem; color: #fff; border-radius: 7px; padding: .15rem .5rem; }
.pic-links { padding: .4rem 1.4rem .2rem; font-size: .85rem; display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.pic-links a { color: var(--accent); font-weight: 600; }
.pic-warn { margin: .5rem 1.4rem 0; padding: .55rem .8rem; border-radius: 10px; background: var(--accent-soft); font-size: .8rem; color: var(--ink2); }
.modal .zone { padding: 0 1.4rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: var(--accent); font-weight: 700; }
.modal .blurb { padding: .6rem 1.4rem .2rem; font-family: var(--font-s); font-size: 1.2rem; line-height: 1.32; color: var(--ink2); }
.wx-line { margin: .6rem 1.4rem 0; padding: .5rem .8rem; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); font-size: .85rem; }
.marker-col.b-d { font-size: .62rem; letter-spacing: -.02em; }

/* ── Kalam est plus haute et plus large que Caveat : on resserre ses emplois ── */
.kicker { font-size: 1.05rem; font-weight: 400; }
.hero h1 .fancy, .hero h1 em.fancy { font-size: .66em; font-weight: 700; letter-spacing: -.01em; }
.hero .lead { font-size: 1.18rem; font-weight: 400; line-height: 1.35; }
.sec-num { font-size: 1.05rem; font-weight: 700; }
.sub em, .count, .massif-count, .carnet-note, .fine .hand { font-size: .92em; }
.massif-count { font-size: .95rem; }
.prog-big span { font-size: 1.1rem; }
.prog-empty { font-size: 1rem; }
.modal .blurb, .card .blurb { font-size: 1rem; line-height: 1.4; }
.bd-progress { font-size: .82rem; }
.lb-count, .strava-user { font-family: var(--font-s); }

/* ── Numéros de section en cotation : ici, on numérote comme en montagne ── */
.sec-num.sec-cot { font-family: var(--font-d); font-weight: 700; text-transform: none; font-size: 1.05rem;
  color: #fff; background: var(--accent-fill); border-radius: 7px; padding: .12rem .5rem .14rem; line-height: 1.1; letter-spacing: .04em; }

/* ── Skyline réelle du massif (altitudes des sommets, d'ouest en est) dans l'en-tête ── */
.massif-sky { width: 62px; height: 16px; flex: none; margin-right: .1rem; color: var(--ink); opacity: .75; align-self: center; }
/* la skyline prend de la place : le titre du massif peut passer à la ligne, le bouton reste en bout */
.massif-head { flex-wrap: wrap; font-size: 1.35rem; row-gap: .2rem; }
.massif-head::after { min-width: 24px; }
.massif-head .massif-toggle { margin-left: auto; }
.massif-sky path.sk-fill { fill: currentColor; opacity: .14; }
.massif-sky path.sk-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.massif-sky .sk-snow { fill: #fff; opacity: .9; }

/* ── Doodles minéraux (trait fin, couleur encre très atténuée) ── */
/* doodles colorés (aplats) : estompés mais lisibles, comme les dessins de PyCol */
.decor-stick { position: absolute; opacity: .42; }
.decor-stick.emblem-bg { opacity: .3; filter: none; }
.doodle.sd.decor-edge { opacity: .26; }
.doodle.sd.emblem-bg { opacity: .22; filter: none; }
html[data-theme="night"] .decor-stick { opacity: .3; }
.massif-emblem { width: 34px; height: 34px; }
.massif-sky { margin-left: .2rem; }

/* ── guides : cartes ── */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .8rem; }
.guide-card { display: flex; flex-direction: column; gap: .4rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.1rem 1.05rem; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform .18s, border-color .18s; }
.guide-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.guide-card h3 { font-family: var(--font-d); font-size: 1.25rem; line-height: 1.08; text-transform: uppercase; letter-spacing: .01em; }
.guide-card p { font-size: .86rem; color: var(--ink2); line-height: 1.45; flex: 1; }
.guide-card .gc-go { font-family: var(--font-s); font-size: .95rem; color: var(--accent); }
.guide-card p { font-family: Inter, sans-serif; }

/* héros image : lisibilité du texte sur l'illustration — couleurs par moment (heroClock) + voile doux derrière le bloc */
/* brume de lisibilité : dégradé linéaire plein bord derrière le bloc texte (pas de tache floue),
   teinté selon le moment (--hs-scrim1/2 posés par heroClock). Au-dessus de l'image, sous les nuages. */
.hero-scene::after { content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(100deg, var(--hs-scrim1, rgba(237,242,246,.78)) 0%, var(--hs-scrim2, rgba(237,242,246,.32)) 38%, transparent 64%);
  pointer-events: none; transition: background 1.5s ease; }
@media (max-width: 700px) { .hero-scene::after { background: linear-gradient(180deg, var(--hs-scrim1, rgba(237,242,246,.7)) 0%, var(--hs-scrim2, rgba(237,242,246,.3)) 55%, transparent 85%); } }

.hero h1 { text-shadow: none; }
.hero .lead { color: var(--hs-lead, var(--ink)); text-shadow: none; font-weight: 400; }
.hero .kicker { color: var(--accent); }
.hero-stats .stat b { color: var(--hs-titre, var(--ink)); text-shadow: none; }
.hero-stats .stat span { color: var(--hs-lead, var(--ink2)); text-shadow: none; opacity: .95; }
.hero.hs-night .hero-stats .stat span, .hero.hs-night .lead { color: var(--hs-lead); }

/* ── surlignages « cahier de brouillon » (feutre fluo, vert, rouge) ── */
.hl-fluo, .hl-vert, .hl-rouge { color: inherit; border-radius: .35em .6em .4em .5em; padding: 0 .2em; margin: 0 -.08em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl-fluo { background: linear-gradient(100deg, rgba(238,196,99,0) .8%, rgba(238,196,99,.6) 3%, rgba(238,196,99,.45) 50%, rgba(238,196,99,.6) 97%, rgba(238,196,99,0) 99.2%); }
.hl-vert { background: linear-gradient(100deg, rgba(74,189,106,0) .8%, rgba(74,189,106,.42) 3%, rgba(74,189,106,.34) 50%, rgba(74,189,106,.42) 97%, rgba(74,189,106,0) 99.2%); }
.hl-rouge { background: linear-gradient(100deg, rgba(248,59,59,0) .8%, rgba(248,59,59,.34) 3%, rgba(248,59,59,.26) 50%, rgba(248,59,59,.34) 97%, rgba(248,59,59,0) 99.2%); }
html[data-theme="night"] .hl-fluo { background: linear-gradient(100deg, rgba(238,196,99,0) .8%, rgba(238,196,99,.38) 3%, rgba(238,196,99,.3) 50%, rgba(238,196,99,.38) 97%, rgba(238,196,99,0) 99.2%); }
/* vignette des cartes de guides */
.guide-card { padding-top: 0; overflow: hidden; }
.guide-thumb { width: calc(100% + 2.2rem); margin: 0 -1.1rem .6rem; height: auto; display: block; }
/* progression : pays + massifs en % */
.prog-pays-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .4rem 1.2rem; margin-bottom: .9rem; padding-bottom: .7rem; border-bottom: 1.5px dashed var(--line); }
.prog-m b em { font-style: normal; font-family: var(--font-s); font-size: .85rem; color: var(--accent); margin-left: .25rem; }
.prog-m span { display: inline-flex; align-items: center; gap: .35rem; }
.prog-emb { width: 18px; height: 18px; flex: none; }

/* drapeaux FR/ES (symboles f-fr / f-es) */
.flag { width: 19px; height: 16px; vertical-align: -3px; }
.flags { display: inline-flex; gap: .15rem; align-items: center; }
.pic-facts .flag { width: 24px; height: 21px; }
.prog-m .flag { width: 17px; height: 15px; }