/* carnet.css — page d'un carnet de route */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Inter",sans-serif;background:#faf9f7;color:#1a1a1a;min-height:100vh}
:root{--terre:#b5532a;--ligne:#e5e0d8;--doux:#888;--entete:62px}

/* ── En-tête et menu (repris des pages de galerie) ── */
.g-header{border-bottom:1px solid var(--ligne);background:#faf9f7;position:sticky;top:0;z-index:100}
.g-header-inner{max-width:1200px;margin:0 auto;padding:1.2rem clamp(1.5rem,4vw,3rem);display:flex;justify-content:space-between;align-items:center;gap:1rem;position:relative}
.g-logo{font-family:"Playfair Display",serif;font-size:15px;letter-spacing:0.08em;color:#1a1a1a;text-decoration:none}
.g-nav-wrap{display:flex;align-items:center}
.g-nav{display:flex;gap:clamp(1rem,2.5vw,2rem);list-style:none;align-items:center}
.g-nav a{color:var(--doux);text-decoration:none;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;transition:color 0.2s;white-space:nowrap}
.g-nav a:hover,.g-nav a.active{color:#1a1a1a}
.g-toggle{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:#1a1a1a;line-height:1}
@media(max-width:680px){
  .g-toggle{display:block}
  .g-nav-wrap{position:absolute;top:100%;left:0;right:0;display:none;background:#faf9f7;border-bottom:1px solid var(--ligne);z-index:300}
  .g-nav-wrap.open{display:block}
  .g-nav{flex-direction:column;align-items:flex-start;gap:0;padding:0.5rem 0}
  .g-nav li{width:100%}
  .g-nav a{display:block;padding:0.75rem 1.5rem;color:#555}
}

.c-attente,.c-erreur{text-align:center;padding:6rem 2rem;font-family:"Playfair Display",serif;font-style:italic;color:#aaa}
.c-erreur{color:#a33;font-style:normal;font-family:"Inter",sans-serif;font-size:14px}

/* ── Bandeau de couverture ── */
.c-hero{position:relative;height:72vh;min-height:420px;background:#1a1a1a;overflow:hidden}
.c-hero img{width:100%;height:100%;object-fit:cover;opacity:0.82;display:block}
.c-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0.05) 30%,rgba(0,0,0,0.6) 100%)}
.c-hero-texte{position:absolute;left:0;right:0;bottom:0;z-index:1;color:#fff;padding:clamp(2rem,5vw,3.5rem) clamp(1.5rem,6vw,4rem)}
.c-surtitre{font-size:10px;letter-spacing:0.28em;text-transform:uppercase;opacity:0.75;display:block;margin-bottom:1rem}
.c-titre{font-family:"Playfair Display",serif;font-weight:400;font-size:clamp(2.2rem,6vw,4.4rem);line-height:1.05;margin-bottom:0.6rem}
.c-sous-titre{font-size:15px;font-weight:300;opacity:0.85}
.c-hero--sans-image{height:auto;min-height:0;background:#f0ede7}
.c-hero--sans-image::after{display:none}
.c-hero--sans-image .c-hero-texte{position:static;color:#1a1a1a}

/* ── Bilan et introduction ── */
.c-entree{max-width:1200px;margin:0 auto;padding:clamp(2.5rem,6vw,4rem) clamp(1.5rem,4vw,3rem) 0}
.c-bilan{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,5vw,4rem);border-bottom:1px solid var(--ligne);padding-bottom:2rem}
.c-chiffre{display:flex;flex-direction:column;gap:0.3rem}
.c-chiffre b{font-family:"Playfair Display",serif;font-weight:400;font-size:clamp(1.6rem,3.5vw,2.2rem)}
.c-chiffre span{font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--doux)}
.c-intro{max-width:720px;padding:2.5rem 0 1rem}
.c-carte-ensemble{height:clamp(320px,55vh,560px);margin-top:2rem;border:1px solid var(--ligne);background:#eceae4}

/* ── Texte des récits ── */
.c-texte{font-size:16px;line-height:1.85;color:#2a2a2a;font-weight:300}
.c-texte p{margin-bottom:1.3rem}
.c-texte strong{font-weight:400;color:#1a1a1a}
.c-texte a{color:#555}
.c-texte img{max-width:100%;height:auto;display:block;margin:2rem 0;border-radius:2px}
.c-texte blockquote{border-left:2px solid #c8c0b0;padding-left:1.4rem;margin:1.8rem 0;font-family:"Playfair Display",serif;font-style:italic;color:#555}
.c-texte h3{font-family:"Playfair Display",serif;font-weight:400;font-size:1.25rem;margin:2.2rem 0 0.8rem}

/* ── Une journée : récit à gauche, carte collante à droite ── */
.c-jour{max-width:1200px;margin:0 auto;padding:clamp(3.5rem,8vw,6rem) clamp(1.5rem,4vw,3rem) 0}
.c-jour-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.c-jour-numero{font-size:10px;letter-spacing:0.28em;text-transform:uppercase;color:var(--terre);display:block;margin-bottom:0.8rem}
.c-jour-titre{font-family:"Playfair Display",serif;font-weight:400;font-size:clamp(1.6rem,3.5vw,2.3rem);line-height:1.15;margin-bottom:0.8rem}
.c-jour-meta{display:flex;flex-wrap:wrap;gap:0.4rem 1.4rem;font-size:12px;letter-spacing:0.06em;color:var(--doux);margin-bottom:2rem;padding-bottom:1.4rem;border-bottom:1px solid var(--ligne)}
.c-carte-jour{position:sticky;top:calc(var(--entete) + 1.5rem);height:calc(100vh - var(--entete) - 3rem);min-height:320px;border:1px solid var(--ligne);background:#eceae4}

/* ── Profil d'altitude ── */
.c-profil{margin:0 0 2.2rem}
.c-profil-zone{position:relative;height:110px;cursor:crosshair;touch-action:pan-y}
.c-profil-zone svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.c-profil-aire{fill:rgba(181,83,42,0.12)}
.c-profil-ligne{fill:none;stroke:var(--terre);stroke-width:1.6;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.c-profil-repere{stroke:#d9d3c8;stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.c-profil-alt{position:absolute;right:0;font-size:10px;letter-spacing:0.06em;color:var(--doux);pointer-events:none}
.c-profil-alt--haut{transform:translateY(-130%)}
.c-profil-alt--bas{transform:translateY(30%)}
.c-profil-axe{display:flex;justify-content:space-between;margin-top:0.5rem;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--doux)}
.c-profil-curseur,.c-profil-point,.c-profil-bulle{position:absolute;pointer-events:none;display:none}
.c-profil-curseur{top:0;bottom:0;width:1px;background:rgba(26,26,26,0.35)}
.c-profil-point{width:10px;height:10px;border-radius:50%;background:var(--terre);border:2px solid #fff;transform:translate(-50%,-50%)}
.c-profil-bulle{top:-4px;background:#1a1a1a;color:#fff;font-size:11px;letter-spacing:0.04em;padding:0.25rem 0.55rem;border-radius:2px;white-space:nowrap}
.c-profil.actif .c-profil-curseur,.c-profil.actif .c-profil-point,.c-profil.actif .c-profil-bulle{display:block}

/* ── Vignettes des photos sur les cartes ── */
.c-repere{position:relative;width:38px;height:38px}
.c-repere.survol{z-index:5}
.c-repere-bouton{display:block;width:100%;height:100%;padding:0;border:2px solid #fff;border-radius:50%;overflow:hidden;cursor:pointer;background:#ece9e3;box-shadow:0 1px 5px rgba(0,0,0,0.35);transition:transform 0.18s ease}
.c-repere-bouton img{width:100%;height:100%;object-fit:cover;display:block}
.c-repere-bouton:hover,.c-repere-bouton:focus-visible,.c-repere.survol .c-repere-bouton{transform:scale(1.45)}
.c-repere-bouton:focus-visible{outline:2px solid var(--terre);outline-offset:2px}
.c-repere-compte{position:absolute;top:-5px;right:-7px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--terre);color:#fff;font-size:10px;font-weight:500;line-height:19px;text-align:center;pointer-events:none;box-shadow:0 0 0 2px #fff}

/* ── Les photos du jour, sur toute la largeur ── */
.c-photos{margin-top:clamp(2.5rem,5vw,3.5rem)}
.c-photos-titre{font-size:10px;letter-spacing:0.28em;text-transform:uppercase;color:var(--doux);margin-bottom:1.2rem;display:block}
/* Rangées alignées : --r = format de la photo (largeur / hauteur), 1.5 en attendant le chargement */
.g-masonry{display:flex;flex-direction:column;gap:10px}
.g-rangee{display:flex;gap:10px}
.g-item{--r:1.5;flex:var(--r) 1 0;min-width:0;position:relative;overflow:hidden;border-radius:2px;cursor:pointer;background:#ece9e3}
.g-item img{width:100%;height:auto;aspect-ratio:var(--r);object-fit:cover;display:block;transition:transform 0.35s ease,opacity 0.4s;opacity:0}
.g-item img.loaded{opacity:1}
.g-item:hover img{transform:scale(1.03)}

@media(max-width:900px){
  .c-jour-grille{grid-template-columns:1fr}
  .c-carte-jour{position:relative;top:auto;height:52vh;order:-1}
}
@media(max-width:680px){.g-masonry,.g-rangee{gap:6px}}

/* ══ Page « Carnets de route » (tous les carnets) ══ */
.cr-entete{max-width:1200px;margin:0 auto;padding:clamp(3rem,8vw,5.5rem) clamp(1.5rem,4vw,3rem) clamp(2rem,4vw,2.5rem)}
.cr-surtitre{font-size:10px;letter-spacing:0.28em;text-transform:uppercase;color:var(--terre);display:block;margin-bottom:1rem}
.cr-titre{font-family:"Playfair Display",serif;font-weight:400;font-size:clamp(2.4rem,6vw,4rem);line-height:1.05;margin-bottom:1.2rem}
.cr-intro{max-width:620px;font-size:16px;line-height:1.8;font-weight:300;color:#555}
#carnets{max-width:1200px;margin:0 auto;padding:0 clamp(1.5rem,4vw,3rem)}
.cr-carte{position:relative;height:clamp(320px,58vh,600px);border:1px solid var(--ligne);background:#eceae4;margin-bottom:clamp(2.5rem,6vw,4rem)}
.cr-bulle{position:absolute;z-index:3;pointer-events:none;transform:translate(-50%,calc(-100% - 12px));background:#1a1a1a;color:#fff;font-size:12px;letter-spacing:0.03em;padding:0.35rem 0.7rem;border-radius:2px;white-space:nowrap;opacity:0;transition:opacity 0.12s}
.cr-bulle.visible{opacity:1}
.cr-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:clamp(1.5rem,3vw,2.5rem)}
.cr-fiche{display:block;text-decoration:none;color:inherit}
.cr-couv{aspect-ratio:4/3;overflow:hidden;background:#e6e1d8;border-radius:2px}
.cr-couv img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.5s ease}
.cr-fiche:hover .cr-couv img,.cr-fiche.survol .cr-couv img{transform:scale(1.04)}
.cr-fiche-texte{padding-top:1.1rem}
.cr-fiche-surtitre{font-size:10px;letter-spacing:0.24em;text-transform:uppercase;color:var(--doux);display:block;margin-bottom:0.6rem}
.cr-fiche-titre{font-family:"Playfair Display",serif;font-weight:400;font-size:1.45rem;line-height:1.2;margin-bottom:0.4rem;transition:color 0.2s}
.cr-fiche:hover .cr-fiche-titre,.cr-fiche.survol .cr-fiche-titre{color:var(--terre)}
.cr-fiche-sous-titre{font-size:14px;font-weight:300;color:#666;line-height:1.6;margin-bottom:0.6rem}
.cr-fiche-chiffres{font-size:12px;letter-spacing:0.06em;color:var(--doux);white-space:pre}

/* ── Visionneuse ── */
.g-lb{position:fixed;inset:0;background:rgba(8,8,8,0.97);z-index:1000;display:none;align-items:center;justify-content:center}
.g-lb.open{display:flex}
.g-lb-img{max-width:90vw;max-height:90vh;object-fit:contain}
.g-lb-close{position:absolute;top:1.2rem;right:1.8rem;color:rgba(255,255,255,0.7);font-size:32px;cursor:pointer;background:none;border:none;line-height:1}
.g-lb-btn{position:absolute;top:50%;transform:translateY(-50%);color:rgba(255,255,255,0.65);font-size:28px;cursor:pointer;background:none;border:none;padding:1rem;line-height:1}
.g-lb-close:hover,.g-lb-btn:hover{color:#fff}
.g-lb-prev{left:0.5rem}
.g-lb-next{right:0.5rem}
.g-lb-cap{position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);color:rgba(255,255,255,0.55);font-size:12px;letter-spacing:0.12em;white-space:nowrap}

footer{margin-top:clamp(4rem,9vw,7rem);border-top:1px solid var(--ligne);padding:2.5rem clamp(1.5rem,6vw,4rem);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-name{font-family:"Playfair Display",serif;font-size:13px;color:var(--doux);font-style:italic}
.footer-links{display:flex;gap:1.8rem;list-style:none;flex-wrap:wrap}
.footer-links a{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:#aaa;text-decoration:none}
.footer-links a:hover{color:#555}

/* Lien discret vers les carnets privés, sous la liste publique */
.cr-acces-prive{max-width:1200px;margin:clamp(2.5rem,6vw,4rem) auto 0;padding:0 clamp(1.5rem,4vw,3rem)}
.cr-acces-prive a{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:#aaa;text-decoration:none;transition:color 0.2s}
.cr-acces-prive a:hover{color:var(--terre)}