/* ═══════════════════════════════════════════════════════════════════
   julienporte.xyz — Design « Carnet » (sept. 2026)
   Feuille de style unique pour tout le site.
   1. Jetons (couleurs, typo) + alias des anciennes variables
   2. Base, header, footer, barre sticky, boutons
   3. Composants de la page d'accueil
   4. Composants hérités des pages intérieures (timeline, offres, essais…)
   5. Responsive
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Jetons ─────────────────────────────────────────────────────── */
:root {
    --maxw: 1040px;
    --ink: #1f2a35;
    --ink-2: #5b6670;
    --paper: #faf6ee;
    --paper-2: #f2ebdd;
    --line: #d9cfbb;
    --x: #2e7d32;
    --y: #37474f;
    --z: #d81b60;
    --gold: #c9a227;
    --yellow: #ffd83d;
    --blue: #2f7fc1;
    --font: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Alias pour les styles inline hérités des anciennes pages */
    --primary-color: var(--ink);
    --secondary-color: var(--blue);
    --accent-color: var(--z);
    --text-color: var(--ink);
    --text-light: var(--ink-2);
    --bg-color: var(--paper);
    --bg-light: var(--paper-2);
    --bg-white: #fff;
    --border-color: var(--line);
    --shadow: 4px 4px 0 var(--paper-2), 4px 4px 0 1px var(--line);
    --shadow-hover: 6px 6px 0 var(--paper-2), 6px 6px 0 1px var(--line);
}

/* ── 2. Base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: var(--font); line-height: 1.6; background: var(--paper); color: var(--ink); padding-bottom: 72px; overflow-x: hidden; display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }
img { display: block; max-width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.12; font-weight: 900; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: 0.7rem; }
a { color: var(--blue); }
section { padding: 5rem 0; }
.wrap, .container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; width: 100%; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
.t-x { color: var(--x); } .t-y { color: var(--y); } .t-z { color: var(--z); } .t-gold { color: var(--gold); }
.hash { font-weight: 300 !important; }
.kicker { display: inline-block; font-size: 0.74rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); border-bottom: 2px solid var(--yellow); padding-bottom: 2px; margin-bottom: 0.9rem; }
.kicker.center { display: table; margin-left: auto; margin-right: auto; }
.lead { font-size: 1.1rem; color: var(--ink-2); max-width: 640px; }
.hp, .honeypot { display: none !important; }
.ok { display: none; margin-top: 1rem; font-weight: 700; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; text-decoration: none; cursor: pointer; font-family: inherit; font-weight: 700; border: 2px solid transparent; border-radius: 8px; padding: 0.95rem 1.7rem; font-size: 1rem; transition: transform .15s, box-shadow .15s, background .15s, color .15s; }
.btn small { display: block; font-weight: 400; font-size: 0.78rem; opacity: .8; }
.btn-primary { background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 var(--yellow); }
.btn-primary:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--yellow); color: var(--paper); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--paper); }
.btn-yellow { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.btn-yellow:hover { transform: translateY(-2px); }
.btn-green { background: var(--x); color: #fff; border-color: var(--x); }
.btn-green:hover { transform: translateY(-2px); color: #fff; }

/* Header */
header { position: sticky; top: 0; z-index: 50; background: rgba(250,246,238,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
nav { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 0; position: relative; }
.logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); font-weight: 300; }
.logo img { height: 38px; width: auto; }
.logo .tag { margin-left: 0.15rem; font-weight: 900; }
.nav-links { display: flex; list-style: none; align-items: center; gap: 1.5rem; }
.nav-links a { text-decoration: none; color: var(--ink); font-weight: 700; font-size: 0.92rem; border-bottom: 2px solid transparent; }
.nav-links a:hover, .nav-links a.active { border-color: var(--yellow); }
.nav-links .sep { width: 1px; height: 18px; background: var(--line); }
.burger { display: none; background: none; border: 0; font-size: 1.6rem; cursor: pointer; color: var(--ink); }

/* Footer */
footer { background: var(--ink); color: var(--paper); padding: 0 0 2.5rem; text-align: center; font-size: 0.9rem; }
footer .wrap, footer .container { padding-top: 2rem; }
footer a { color: var(--paper); text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer p { opacity: .7; }
.social, .footer-social { display: flex; gap: 1.4rem; justify-content: center; align-items: center; margin-bottom: 1.2rem; }
.social a, .footer-social a { display: flex; opacity: .85; color: var(--paper); }
.social a:hover, .footer-social a:hover { opacity: 1; }
.social svg, .footer-social svg { width: 22px; height: 22px; fill: currentColor; }
.social img, .footer-social img { width: 22px; height: 22px; filter: brightness(0) invert(1); }

/* Barre sticky */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 0.6rem 1rem; display: flex; gap: 0.6rem; justify-content: center; align-items: center; background: rgba(250,246,238,.96); backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
.sticky .btn { padding: 0.7rem 1.2rem; font-size: 0.92rem; }
.sticky .btn-primary { box-shadow: 3px 3px 0 var(--yellow); }
.sticky span { font-size: 0.85rem; color: var(--ink-2); }

/* Modal HelloAsso */
.ha-modal { display: none; position: fixed; inset: 0; z-index: 60; background: rgba(20,26,32,.7); align-items: center; justify-content: center; padding: 1rem; }
.ha-modal.open { display: flex; }
.ha-modal-inner { background: #fff; border-radius: 16px; width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto; position: relative; }
.ha-modal-close { position: absolute; top: 0.6rem; right: 0.8rem; background: rgba(0,0,0,.06); border: 0; font-size: 1.4rem; line-height: 1; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; z-index: 1; }
.ha-modal iframe { width: 100%; height: 750px; border: 0; display: block; }

/* Modal RDV découverte (Calendly) */
.rdv-modal { display: none; position: fixed; inset: 0; z-index: 60; background: rgba(20,26,32,.7); align-items: center; justify-content: center; padding: 1rem; }
.rdv-modal.open { display: flex; }
.rdv-modal-inner { background: #fff; border-radius: 16px; width: 100%; max-width: 760px; height: min(820px, 92vh); overflow: hidden; position: relative; display: flex; flex-direction: column; }
.rdv-modal-close { position: absolute; top: 0.6rem; right: 0.8rem; background: rgba(0,0,0,.06); border: 0; font-size: 1.4rem; line-height: 1; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; z-index: 1; }
.rdv-modal iframe { flex: 1; width: 100%; border: 0; display: block; }
.rdv-modal-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-2); font-weight: 700; background: #fff; }
.rdv-modal.loaded .rdv-modal-loading { display: none; }

/* ── 3. Page d'accueil ──────────────────────────────────────────────── */
.hero { padding: 4.5rem 0 4rem; background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.hero h1 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); margin: 0 0 1rem; }
.hero .xyz-word { white-space: nowrap; background: linear-gradient(transparent 62%, var(--yellow) 62%); padding: 0 0.15em; }
.hero .tagline { font-size: 1.2rem; font-weight: 700; margin-bottom: 1.2rem; }
.hero .lead { margin-bottom: 1.8rem; }
.hero-ctas { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.hero-note { font-size: 0.88rem; color: var(--ink-2); margin-top: 1rem; }
.hero-visual img { background: #fff; border: 1px solid var(--line); padding: 1.2rem; box-shadow: 6px 6px 0 var(--paper-2), 6px 6px 0 1px var(--line); transform: rotate(-1.5deg); }

/* Hero simple des pages intérieures (Contact, Cheminement, Offres…) */
.hero.hero--page { text-align: center; padding: 3.5rem 0 3rem; }
.hero.hero--page h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin: 0; }
.hero.hero--page .hero-content { max-width: 760px; margin: 0 auto; padding: 0 1.25rem; }
.hero.hero--page p { color: var(--ink-2); margin-top: 0.8rem; }

.methode .xyz-intro-line { text-align: center; font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 700; max-width: 640px; margin: 0 auto 1rem; }
.xyz-reveal { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3rem; align-items: center; padding: 3rem 0; border-bottom: 1px dashed var(--line); }
.xyz-reveal:last-of-type { border-bottom: 0; }
.xyz-reveal.rev { grid-template-columns: 1.15fr 1fr; }
.xyz-reveal.rev .xyz-img { order: 2; }
.xyz-img { opacity: 0; transition: opacity .9s ease, transform .9s ease; }
.xyz-img img { width: 100%; max-width: 460px; margin: 0 auto; background: #fff; border: 1px solid var(--line); padding: 1rem; }
.xyz-img.from-left { transform: translateX(-50px); }
.xyz-img.from-right { transform: translateX(50px); }
.xyz-img.visible { opacity: 1; transform: translateX(0); }
.xyz-text { opacity: 0; transform: translateY(24px); transition: opacity .9s ease .1s, transform .9s ease .1s; }
.xyz-text.visible { opacity: 1; transform: translateY(0); }
.xyz-text h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 1rem; }
.xyz-text h3 .big { font-size: 1.2em; }
.xyz-text p { color: var(--ink-2); font-size: 1.02rem; margin-bottom: 0.7rem; }
.xyz-text p:last-child { margin-bottom: 0; }

.outils { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.outils-intro { margin: 0 auto 2.5rem; text-align: center; }
.outil-list { max-width: 820px; margin: 0 auto; }
.outil { display: grid; grid-template-columns: 72px 1fr; gap: 1.2rem; padding: 2rem 0; border-top: 1px dashed var(--line); }
.outil-num { font-size: 2.2rem; font-weight: 900; color: var(--yellow); line-height: 1; -webkit-text-stroke: 1px var(--ink); }
.outil h3 { font-size: 1.25rem; margin-bottom: 0.6rem; }
.outil p { font-size: 0.98rem; margin-bottom: 0.6rem; }
.outil p:last-of-type { margin-bottom: 0; }
.outil-remark { color: var(--ink-2); font-style: italic; font-size: 0.94rem; }
.outil-foot { font-size: 0.74rem; color: var(--ink-2); opacity: .8; margin-top: 0.6rem; }
.outil a { color: var(--blue); font-weight: 700; text-decoration: none; }
.outil a:hover { text-decoration: underline; }
.outils-closing { text-align: center; font-size: 1.25rem; font-weight: 700; margin-top: 2.6rem; }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.5rem; text-align: left; }
.plan { background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 1.8rem; display: flex; flex-direction: column; box-shadow: 6px 6px 0 var(--paper-2); }
.plan-6 { box-shadow: 6px 6px 0 var(--yellow); }
.plan-12 { box-shadow: 6px 6px 0 var(--x); }
.plan .dur { font-size: 3rem; font-weight: 900; line-height: 1; }
.plan .dur small { font-size: 0.9rem; font-weight: 700; color: var(--ink-2); margin-left: 0.3rem; text-transform: uppercase; letter-spacing: .1em; }
.plan h3 { font-size: 1.25rem; margin: 0.7rem 0 0.3rem; }
.plan .for { font-size: 0.95rem; color: var(--ink-2); flex: 1; margin-bottom: 1.3rem; }
.btn-plan { width: 100%; background: transparent; color: var(--ink); border-color: var(--ink); }
.plan-6 .btn-plan { background: var(--yellow); border-color: var(--yellow); }
.plan-12 .btn-plan { background: var(--x); border-color: var(--x); color: #fff; }
.btn-plan:hover { transform: translateY(-2px); }

.aventures-sec { background: var(--paper-2); border-top: 1px solid var(--line); }
.aventures { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2.5rem; }
.aventure { background: #fff; border: 1px solid var(--line); padding: 1rem; box-shadow: 6px 6px 0 var(--paper), 6px 6px 0 1px var(--line); }
.aventure img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.aventure-body { padding: 1.2rem 0.4rem 0.4rem; }
.aventure .year { font-size: 0.74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.aventure h3 { font-size: 1.4rem; margin: 0.3rem 0 0.5rem; }
.aventure p { font-size: 0.95rem; color: var(--ink-2); }
.actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.1rem; }
.actions .btn { padding: 0.7rem 1.2rem; font-size: 0.92rem; }

.about { padding: 4rem 0; }
.about-grid { display: grid; grid-template-columns: 160px 1fr; gap: 2.5rem; align-items: center; }
.about img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; border: 4px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.about blockquote { font-size: 1.3rem; font-style: italic; border-left: 4px solid var(--gold); padding-left: 1.2rem; }
.about cite { display: block; font-style: normal; font-size: 0.9rem; color: var(--ink-2); margin-top: 0.8rem; }
.about cite a { color: var(--blue); text-decoration: none; }

.news { background: var(--ink); color: var(--paper); }
.news h2 { color: var(--paper); }
.news .lead { color: rgba(250,246,238,.8); }
.news .kicker { color: var(--yellow); border-color: var(--yellow); }
.news form { display: flex; gap: 0.6rem; max-width: 540px; margin: 1.8rem auto 0; flex-wrap: wrap; justify-content: center; }
.news input { flex: 1 1 180px; padding: 0.9rem 1.1rem; border: 2px solid transparent; border-radius: 8px; font-size: 1rem; font-family: inherit; }
.news .btn-primary { background: var(--yellow); color: var(--ink); box-shadow: none; }
.news .ok { color: var(--yellow); }
.happeople b span.g, .happeople strong span.g { color: #7ed957; }
.happeople b span.r, .happeople strong span.r { color: #ff7eb3; }
.happeople b span.o, .happeople strong span.o { color: #7cc0ff; }
.happeople-light b span.g { color: var(--x); } .happeople-light b span.r { color: var(--z); } .happeople-light b span.o { color: var(--blue); }

/* Formulaire newsletter de l'accueil : en ligne, sur fond sombre */
.news form.newsletter-form { flex-direction: row; }
.news .newsletter-form button { margin: 0; width: auto; padding: 0.9rem 1.6rem; background: var(--yellow); color: var(--ink); border-color: var(--yellow); box-shadow: none; }

/* Heros photo des pages aventures : titres en blanc, sections en encre */
.scotland-hero h1, .pyrenees-hero h1, .scotland-hero .subtitle, .pyrenees-hero .subtitle { color: #fff; }
.section-title { color: var(--ink) !important; }

/* ── 4. Composants hérités des pages intérieures ───────────────────── */

/* Cartes blanches génériques */
.card, .newsletter-intro, .newsletter-section, .timeline-section, .newsletter-inline, .offre-card, .merci-box, .reserve-block {
    background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 2rem; box-shadow: var(--shadow);
}
.newsletter-intro, .newsletter-section, .timeline-section { margin: 1.5rem auto; text-align: left; }
.newsletter-intro p, .newsletter-section p { font-size: 1.05rem; line-height: 1.8; margin-bottom: 1rem; }
.newsletter-intro p:last-child, .newsletter-section p:last-child { margin-bottom: 0; }
.newsletter-intro ol, .newsletter-section ul, .newsletter-section ol { margin: 1rem 0 0 1.5rem; }
.newsletter-intro li, .newsletter-section li { font-size: 1.05rem; line-height: 1.8; margin-bottom: 0.4rem; }
.newsletter-section h2 { font-size: 1.8rem; margin-bottom: 1.2rem; text-align: left; }
.newsletter-section h3 { font-size: 1.3rem; margin: 1.5rem 0 0.8rem; }
.newsletter-section a { color: var(--blue); }
.newsletter-image { margin: 2.5rem auto; text-align: center; max-width: 800px; }
.newsletter-image img { width: 100%; margin: 0 auto; background: #fff; border: 1px solid var(--line); padding: 0.8rem; box-shadow: var(--shadow); }
.image-caption { font-size: 0.92rem; color: var(--ink-2); font-style: italic; margin-top: 1rem; }
.histoire, .contact, .explorer-section, .newsletter, .merci-section { padding: 3rem 0; }
.histoire-content, .newsletter-content, .challenge-text, .about-content { max-width: 820px; margin: 0 auto; }
.explorer-section--alt { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.explorer-section-title { font-size: 1.7rem; text-align: center; margin-bottom: 1.2rem; }
.explorer-desc { text-align: center; font-size: 1.08rem; max-width: 620px; margin: 0 auto; line-height: 1.7; }
.offre-card { display: flex; flex-direction: column; align-items: center; max-width: 720px; margin: 0 auto; }
.offres-note { padding: 2rem 0 1rem; }
.offres-separator { border: 0; border-top: 1px dashed var(--line); margin-bottom: 2rem; }
.offres-note-text { font-size: 0.95rem; color: var(--ink-2); max-width: 700px; margin: 0 auto 1rem; line-height: 1.7; text-align: center; }
.offres-note-link { display: block; text-align: center; font-size: 0.95rem; color: var(--ink-2); text-decoration: none; font-style: italic; }
.offres-note-link:hover { color: var(--blue); }

/* Ancien bouton générique → bouton Carnet */
.home-nav-btn, .btn-newsletter, .btn-livre-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: fit-content; margin-left: auto; margin-right: auto;
    padding: 0.95rem 1.7rem; border: 2px solid var(--ink); border-radius: 8px; background: var(--ink); color: var(--paper);
    text-decoration: none; font-size: 1rem; font-weight: 700; text-align: center; cursor: pointer; font-family: inherit;
    box-shadow: 4px 4px 0 var(--yellow); transition: transform .15s, box-shadow .15s;
}
.home-nav-btn:hover, .btn-newsletter:hover, .btn-livre-cta:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--yellow); background: var(--ink); color: var(--paper); }

/* Dimensions XYZ (cheminement) */
.xyz-dimensions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin: 1.5rem auto 0; text-align: left; }
.xyz-dim { background: var(--paper); padding: 1.25rem 1.4rem; border-radius: 10px; border: 1px solid var(--line); border-top-width: 4px; }
.xyz-label { font-size: 1.15rem; font-weight: 900; margin-bottom: 0.6rem; line-height: 1.3; }
.xyz-desc { font-size: 0.95rem; line-height: 1.55; margin: 0; }

/* Timeline (cheminement) */
.timeline { position: relative; max-width: 720px; margin: 0 auto; padding: 0.5rem 0; }
.timeline::before { content: ''; position: absolute; left: 11px; top: 1rem; bottom: 1rem; width: 3px; background: var(--line); border-radius: 2px; }
.timeline-item { position: relative; padding-left: 36px; margin-bottom: 2.25rem; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-year { position: relative; display: block; margin: 0 0 0.6rem; font-weight: 900; font-size: 1.35rem; color: var(--ink); line-height: 1.2; }
.timeline-year::before { content: ''; position: absolute; left: -32px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; background: var(--yellow); border: 4px solid var(--ink); border-radius: 50%; box-sizing: content-box; }
.timeline-year--rose { color: var(--z); }
.timeline-year--rose::before { border-color: var(--z); }
.timeline-content { background: var(--paper); padding: 1.1rem 1.4rem; border-radius: 10px; border: 1px solid var(--line); overflow-wrap: break-word; }
.timeline-content p { font-size: 1rem; line-height: 1.6; margin-bottom: 0.5rem; }
.timeline-content p:last-child { margin-bottom: 0; }
.timeline-content a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Formulaire newsletter (contact + essais) */
.newsletter-inline { max-width: 520px; margin: 0 auto; }
.newsletter-form { display: flex; flex-direction: column; gap: 0.85rem; }
.newsletter-form label { font-weight: 700; font-size: 0.95rem; display: flex; flex-direction: column; gap: 0.3rem; text-align: left; }
.newsletter-form input, .newsletter-form textarea { padding: 0.75rem 0.9rem; border: 1px solid var(--line); border-radius: 8px; font-size: 1rem; font-family: inherit; width: 100%; background: var(--paper); }
.newsletter-form input:focus, .newsletter-form textarea:focus { outline: none; border-color: var(--ink); background: #fff; }
.newsletter-form textarea { min-height: 80px; resize: vertical; }
.newsletter-form button { margin-top: 0.5rem; padding: 0.95rem; background: var(--ink); color: var(--paper); border: 2px solid var(--ink); border-radius: 8px; font-weight: 700; font-size: 1rem; cursor: pointer; font-family: inherit; box-shadow: 4px 4px 0 var(--yellow); transition: transform .15s, box-shadow .15s; }
.newsletter-form button:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--yellow); }
.newsletter-success { display: none; text-align: center; }
.newsletter-success.show { display: block; }
.contact-form { max-width: 700px; margin: 2rem auto; }
.contact-form iframe { border-radius: 10px; }

/* Détails / listes d'essais (Écosse) */
.newsletter-details { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.5rem 2rem; margin-top: 2rem; }
.newsletter-summary { font-size: 1.2rem; font-weight: 900; cursor: pointer; list-style: none; user-select: none; }
.newsletter-summary::-webkit-details-marker { display: none; }
.newsletter-summary::before { content: '▸'; display: inline-block; margin-right: 0.5rem; transition: transform .2s; color: var(--gold); }
.newsletter-details[open] .newsletter-summary::before { transform: rotate(90deg); }
.essais-list { list-style: none; padding: 1rem 0 0; display: flex; flex-direction: column; gap: 0.6rem; }
.essais-list li { padding: 0.5rem 1rem; border-left: 3px solid var(--line); font-size: 0.95rem; line-height: 1.5; }
.essais-list li:hover { border-left-color: var(--yellow); }
.essai-num { display: inline-block; background: var(--paper-2); color: var(--ink-2); font-size: 0.78rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 20px; margin-right: 0.4rem; vertical-align: middle; }
.essai-list-date { color: var(--ink-2); font-size: 0.85rem; margin-left: 0.4rem; }

/* Carrousel portraits + jeu spiKto (Pyrénées) */
.challenge-details { padding: 4rem 0; }
.challenge-text { text-align: center; }
.challenge-text p { font-size: 1.15rem; margin-bottom: 1.4rem; line-height: 1.8; }
.challenge-text a { color: var(--blue); font-weight: 700; text-decoration: none; }
.hint-box { background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 1.6rem; margin: 2.5rem auto; max-width: 600px; box-shadow: 6px 6px 0 var(--yellow); }
.hint-piktos, .hint-letters { display: flex; justify-content: space-around; align-items: center; gap: 0.3rem; flex-wrap: nowrap; }
.hint-piktos { margin-bottom: 1.2rem; }
.hint-piktos img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.hint-letters span { font-size: 1.5rem; font-weight: 900; width: 40px; text-align: center; flex-shrink: 0; }
.letter-b, .letter-f, .letter-v { color: #f39c12; } .letter-k, .letter-w { color: var(--blue); } .letter-q { color: var(--ink); } .letter-x { color: var(--x); }
.carousel-container { position: relative; max-width: 700px; margin: 3rem auto; padding: 0 60px; overflow: hidden; }
.carousel { display: flex; transition: transform 0.5s ease-in-out; }
.carousel-slide { min-width: 100%; display: flex; flex-direction: column; align-items: center; }
.carousel-slide img { width: 100%; height: auto; max-height: 500px; object-fit: contain; background: #fff; border: 1px solid var(--line); padding: 0.8rem; }
.carousel-caption { margin-top: 1rem; font-size: 1.2rem; font-weight: 900; }
.carousel-btn { position: absolute; top: 40%; transform: translateY(-50%); background: #fff; border: 2px solid var(--ink); color: var(--ink); font-size: 2rem; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; }
.carousel-btn:hover { background: var(--yellow); }
.carousel-btn.prev { left: 0; } .carousel-btn.next { right: 0; }
.carousel-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; }
.carousel-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line); cursor: pointer; }
.carousel-dot.active { background: var(--ink); }

/* Modal contact (Tally) — script.js */
.contact-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(20,26,32,.7); z-index: 1000; align-items: center; justify-content: center; padding: 1rem; }
.contact-modal-overlay.active { display: flex; }
.contact-modal { background: #fff; border-radius: 12px; padding: 2rem; width: 100%; max-width: 680px; max-height: 90vh; overflow-y: auto; position: relative; }
.contact-modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--ink-2); }
.contact-modal h2 { margin-bottom: 1.5rem; font-size: 1.4rem; }
.contact-modal-email { margin-top: 1.5rem; font-size: 1rem; color: var(--ink-2); text-align: center; }

/* Vidéo YouTube à la demande */
.yt-lite { position: relative; width: 100%; aspect-ratio: 16/9; background: #000 center/cover no-repeat; border-radius: 12px; overflow: hidden; cursor: pointer; border: 1px solid var(--line); }
.yt-lite::after { content: ''; position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; transform: translate(-50%,-50%); background: var(--yellow); border-radius: 50%; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.yt-lite::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-40%,-50%); border-left: 26px solid var(--ink); border-top: 15px solid transparent; border-bottom: 15px solid transparent; z-index: 1; }
.yt-lite iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-lite.playing::before, .yt-lite.playing::after { display: none; }

/* Archive des newsletters (pages générées par newsletter-page.js) */
.nl-list { list-style: none; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.9rem; }
.nl-item a { display: block; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.3rem 1.5rem; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.nl-item a:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-hover); }
.nl-date { display: block; font-size: 0.74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.3rem; }
.nl-title { display: block; font-size: 1.3rem; font-weight: 900; line-height: 1.2; }
.nl-sub { display: block; color: var(--ink-2); margin-top: 0.3rem; }
.nl-empty { text-align: center; color: var(--ink-2); font-style: italic; }
.nl-body { max-width: 720px; font-size: 1.08rem; line-height: 1.75; }
.nl-body h2 { font-size: 1.6rem; margin: 2.2rem 0 0.8rem; }
.nl-body h3 { font-size: 1.25rem; margin: 1.8rem 0 0.6rem; }
.nl-body p { margin-bottom: 1.1rem; }
.nl-body a { color: var(--blue); }
.nl-body .btn-primary, .nl-body .btn-primary:hover { color: var(--paper); text-decoration: none; }
.nl-quote { font-size: 1.15rem; font-style: italic; border-left: 4px solid var(--gold); padding-left: 1.1rem; margin: 1.6rem 0; }
.nl-figure { margin: 1.8rem 0; text-align: center; }
.nl-figure img { margin: 0 auto; background: #fff; border: 1px solid var(--line); padding: 0.6rem; box-shadow: var(--shadow); }
.nl-figure figcaption { font-size: 0.9rem; color: var(--ink-2); font-style: italic; margin-top: 0.7rem; }
.nl-btn-wrap { text-align: center; margin: 2rem 0; }
.nl-hr { border: 0; border-top: 1px dashed var(--line); margin: 2.2rem 0; }
.nl-back { margin-top: 3rem; font-weight: 700; }
.nl-back a { text-decoration: none; }

/* Coordonnées assemblées par carnet.js : vides tant que le script n'a pas tourné */
a.obf:empty::after { content: '…'; opacity: .5; }

/* ── 5. Responsive ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) { .xyz-img, .xyz-text { transition: none !important; opacity: 1 !important; transform: none !important; } }
@media (max-width: 820px) {
    section { padding: 3.5rem 0; }
    .nav-links { display: none; position: absolute; top: 100%; left: -1.25rem; right: -1.25rem; flex-direction: column; padding: 1.5rem; gap: 1.1rem; background: var(--paper); border-bottom: 1px solid var(--line); }
    .nav-links.open { display: flex; }
    .nav-links .sep { display: none; }
    .burger { display: block; }
    .hero-grid, .xyz-reveal, .xyz-reveal.rev, .plans, .aventures, .about-grid { grid-template-columns: 1fr; }
    .xyz-reveal .xyz-img, .xyz-reveal.rev .xyz-img { order: 0; }
    .xyz-img img { max-width: 320px; }
    .hero-visual { max-width: 380px; margin: 0 auto; }
    .outil { grid-template-columns: 48px 1fr; }
    .about-grid { text-align: center; }
    .about img { width: 140px; margin: 0 auto; }
    .about blockquote { text-align: left; }
    .sticky span { display: none; }
    .sticky .btn { flex: 1; }
    .newsletter-intro, .newsletter-section, .timeline-section, .newsletter-inline, .offre-card { padding: 1.4rem; }
    .carousel-container { padding: 0 48px; }
    .hint-piktos img { width: 32px; height: 32px; } .hint-letters span { width: 32px; font-size: 1.2rem; }
}