/* Habillage de la home ("hub") — voir maquette de direction visuelle.
   Toutes les variables sont préfixées --hh- et scopées à .home-hub pour ne
   jamais interférer avec les tokens --pwa-* utilisés par le reste du site
   (bouton primaire, bandeau PWA, tabbar mobile, etc.), qui restent inchangés
   sur la home (CTA "organiser un événement", pub, tabbar). */

/* .home-hub porte le texte du contenu de page (fond --hh-paper).
   .home-hub-vars porte les MÊMES variables mais sans toucher color/font : il
   sert au pied de page, qui vit dans le <footer class="bg-dark text-white">
   du gabarit commun. Site toujours en thème clair (pas de bascule sombre). */
.home-hub, .home-hub-vars{
    --hh-paper:      #efe6d0;
    --hh-paper-2:    #e6dab8;
    --hh-ink:        #1d2b20;
    --hh-ink-soft:   #4a5d4c;
    --hh-forest:     #234a34;
    --hh-forest-ink: #f3ecd8;
    --hh-forest-2:   #16261e;
    --hh-gold:       #a5701f;
    --hh-gold-soft:  #e7cf9c;
    --hh-blaze:      #a3392c;
    --hh-line:       rgba(29,43,32,.16);
    --hh-shadow:     0 14px 30px -12px rgba(20,30,20,.35);
    --hh-hero-ridge:  #16261e;
    --hh-hero-accent: #e7cf9c;
    --hh-postmark-line: #4a5d4c;
    --hh-ticket-bg:   #efe6d0;
    --hh-ticket-ink:  #1d2b20;
    --hh-ticket-perf: #234a34;
}
.home-hub{
    color:var(--hh-ink);
    font-family:'Archivo', system-ui, -apple-system, "Segoe UI", sans-serif;
}

.home-hub h1, .home-hub h2, .home-hub h3, .home-hub h4{
    font-family:'Fraunces', Georgia, serif;
    text-wrap:balance;
}

/* Casse la .container Bootstrap pour les bandes plein écran (hero, alt). */
.home-hub .full-bleed{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
}
.home-hub .full-bleed > .fb-inner{
    max-width:1180px;
    margin:0 auto;
    padding:0 clamp(1rem,4vw,2.5rem);
}

.home-hub .eyebrow{
    font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:var(--hh-gold);
}

/* ---------- hero ---------- */
.home-hub .hh-hero{
    background:var(--hh-forest); color:var(--hh-forest-ink); position:relative; overflow:hidden;
}
.home-hub .hh-hero .fb-inner{ padding-top:clamp(2rem,5vw,3rem); padding-bottom:clamp(2rem,5vw,2.8rem); position:relative; z-index:2; }
.home-hub .hh-hero-kicker{ font-family:'Fraunces',serif; font-style:italic; font-weight:500; font-size:1.02rem; color:var(--hh-gold-soft); margin:0 0 .6rem; }
.home-hub .hh-hero h1{
    font-weight:700; font-size:clamp(2rem,5vw,3.1rem); line-height:1.08; letter-spacing:-.01em;
    max-width:18ch; margin:0 0 .9rem;
}
.home-hub .hh-hero-sub{ max-width:48ch; opacity:.86; font-size:1rem; margin:0 0 1.7rem; }
.home-hub .hh-hero-scene{ position:absolute; inset:auto 0 0 0; height:56%; z-index:1; opacity:.9; }

.home-hub .daypicker{ display:flex; flex-wrap:wrap; gap:.65rem; margin:0; padding:0; list-style:none; }
.home-hub .ticket{
    position:relative; display:inline-flex; align-items:center; gap:.5rem;
    background:var(--hh-ticket-bg); color:var(--hh-ticket-ink); text-decoration:none;
    font-weight:700; font-size:.82rem; letter-spacing:.02em;
    padding:.6rem 1.3rem; border-radius:3px; box-shadow:var(--hh-shadow);
    background-image: radial-gradient(circle, var(--hh-ticket-perf) 2.1px, transparent 2.1px);
    background-size: 10px 100%;
    background-position: left center, right center;
    background-repeat: repeat-y;
}
.home-hub .ticket .dot{ width:6px; height:6px; border-radius:50%; background:var(--hh-blaze); flex:none; }
.home-hub .ticket:hover{ filter:brightness(.96); }

/* ---------- bandeaux de section ---------- */
.home-hub .hh-block{ padding-block:clamp(2.2rem,5vw,3.2rem); }
.home-hub .hh-block.alt{ background:var(--hh-paper-2); }
.home-hub .hh-block-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.home-hub .hh-block-head h2{ font-weight:700; font-size:clamp(1.4rem,2.6vw,1.9rem); margin:0; }
.home-hub .hh-block-head .lede{ color:var(--hh-ink-soft); max-width:44ch; font-size:.92rem; margin:.3rem 0 0; }
.home-hub .see-all{
    flex:none; text-decoration:none; font-weight:700; font-size:.82rem; letter-spacing:.02em;
    color:var(--hh-ink); border-bottom:2px solid var(--hh-gold); padding-bottom:2px; white-space:nowrap;
}

/* department scroller */
.home-hub .dep-row + .dep-row{ margin-top:2rem; }
.home-hub .dep-row-head{ display:flex; align-items:baseline; gap:.6rem; margin-bottom:.9rem; }
.home-hub .dep-row-head a{ text-decoration:none; color:inherit; }
.home-hub .dep-badge{
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:20px; border-radius:3px; background:#1c3a8f; color:#fff;
    font-size:.68rem; font-weight:700; flex:none; font-variant-numeric:tabular-nums;
}
.home-hub .dep-row-head h3{ font-size:1.1rem; font-weight:700; margin:0; }
.home-hub .scroller{ display:flex; gap:1rem; overflow-x:auto; padding-bottom:.6rem; scroll-snap-type:x proximity; }
.home-hub .scroller::-webkit-scrollbar{ height:6px; }
.home-hub .scroller::-webkit-scrollbar-thumb{ background:var(--hh-line); border-radius:99px; }

.home-hub .postcard{
    flex:0 0 235px; scroll-snap-align:start; position:relative;
    background:var(--hh-paper); border:1px solid var(--hh-line); box-shadow:var(--hh-shadow);
    clip-path: polygon(0% 4px,4% 0,8% 4px,12% 0,16% 4px,20% 0,24% 4px,28% 0,32% 4px,36% 0,40% 4px,44% 0,48% 4px,52% 0,56% 4px,60% 0,64% 4px,68% 0,72% 4px,76% 0,80% 4px,84% 0,88% 4px,92% 0,96% 4px,100% 0,100% 100%,0 100%);
    padding-top:10px; text-decoration:none; color:inherit; display:block;
}
.home-hub .postcard-scene{ height:116px; width:100%; object-fit:cover; display:block; }
.home-hub .postcard-body{ padding:.85rem .9rem 1rem; }
.home-hub .postmark{
    position:absolute; top:20px; right:12px; width:44px; height:44px; border-radius:50%;
    border:1.5px dashed var(--hh-postmark-line); display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:var(--hh-paper); transform:rotate(-8deg); text-align:center; line-height:1.05;
}
.home-hub .postmark b{ font-size:.66rem; text-transform:uppercase; }
.home-hub .postmark span{ font-size:.58rem; color:var(--hh-ink-soft); }
.home-hub .postcard .city{ font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--hh-blaze); margin:0 0 .3rem; }
.home-hub .postcard h4{ font-weight:600; font-size:.98rem; line-height:1.25; margin:0 0 .3rem; }
.home-hub .postcard p{ font-size:.8rem; color:var(--hh-ink-soft); margin:0; }
.home-hub .cta-more{
    flex:0 0 148px; scroll-snap-align:start; display:flex; align-items:center; justify-content:center;
    border:1.5px dashed var(--hh-line); border-radius:6px; text-decoration:none; color:var(--hh-ink);
    font-weight:700; font-size:.84rem; text-align:center; padding:1rem;
}

/* ---------- balise sentier ---------- */
.home-hub .blaze-mark{ display:inline-flex; flex-direction:column; width:18px; height:13px; flex:none; border-radius:1px; overflow:hidden; box-shadow:0 0 0 1px var(--hh-line); }
.home-hub .blaze-mark span{ flex:1; }
.home-hub .blaze-mark span:first-child{ background:var(--hh-blaze); }
.home-hub .blaze-mark span:last-child{ background:#fff; }
.home-hub .trail-head{ display:flex; align-items:center; gap:.5rem; margin-bottom:.35rem; }

.home-hub .trail-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.1rem; }
.home-hub .trail-card{
    background:var(--hh-paper); border:1px solid var(--hh-line); box-shadow:var(--hh-shadow);
    border-radius:10px; padding:1.05rem 1.1rem 1.15rem; position:relative; text-decoration:none; color:inherit; display:block;
}
.home-hub .trail-kind{
    display:inline-flex; align-items:center; gap:.4rem; font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    padding:.22rem .55rem; border-radius:99px; background:var(--hh-gold-soft); color:var(--hh-forest-2); margin-bottom:.5rem;
}
.home-hub .trail-kind svg{ width:13px; height:13px; flex:none; }
.home-hub .trail-card h4{ font-weight:600; font-size:1.04rem; margin:0 0 .15rem; }
.home-hub .trail-loc{ font-size:.78rem; color:var(--hh-ink-soft); margin:0 0 .8rem; }
.home-hub .trail-stats{ display:flex; gap:.85rem; padding-top:.7rem; border-top:1px dashed var(--hh-line); font-variant-numeric:tabular-nums; flex-wrap:wrap; }
.home-hub .trail-stat{ display:flex; flex-direction:column; }
.home-hub .trail-stat b{ font-size:.96rem; font-weight:700; }
.home-hub .trail-stat span{ font-size:.63rem; color:var(--hh-ink-soft); text-transform:uppercase; letter-spacing:.03em; }
.home-hub .trail-gpx{
    position:absolute; top:1.05rem; right:1.1rem; display:inline-flex; align-items:center; gap:.3rem;
    font-size:.62rem; font-weight:700; color:var(--hh-blaze); text-transform:uppercase; letter-spacing:.03em;
}
.home-hub .trail-gpx svg{ width:12px; height:12px; }

/* ---------- cartes médaillon (visites / activités) ---------- */
.home-hub .medal-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.1rem; }
.home-hub .medal-card{ background:var(--hh-paper); border:1px solid var(--hh-line); box-shadow:var(--hh-shadow); text-decoration:none; color:inherit; display:block; }
.home-hub .medal-scene{ height:104px; width:100%; object-fit:cover; display:block; }
.home-hub .medal-body{ padding:.85rem .95rem 1rem; }
.home-hub .medal-card .commune{ font-size:.7rem; color:var(--hh-ink-soft); text-transform:uppercase; letter-spacing:.05em; margin:0 0 .3rem; }
.home-hub .medal-card h4{ font-weight:600; font-size:1rem; line-height:1.25; margin:0; }

/* ---------- pages du guide (intro) ---------- */
.home-hub .hh-spread{
    background:var(--hh-paper); border:1px solid var(--hh-line); box-shadow:var(--hh-shadow);
    border-radius:14px; padding:clamp(1.5rem,4vw,2.4rem);
    columns:2; column-gap:2.4rem; column-rule:1px solid var(--hh-line);
    font-size:.98rem; color:var(--hh-ink-soft);
}
.home-hub .hh-spread p{ margin:0 0 .85rem; }
@media (max-width:720px){ .home-hub .hh-spread{ columns:1; } }

/* ---------- FAQ ---------- */
.home-hub .faq-list{ max-width:66ch; }
.home-hub .faq-item{ border-bottom:1px solid var(--hh-line); }
.home-hub .faq-item summary{
    list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:.9rem 0; font-weight:700; font-size:.98rem;
}
.home-hub .faq-item summary::-webkit-details-marker{ display:none; }
.home-hub .faq-item .plus{ flex:none; width:20px; height:20px; position:relative; }
.home-hub .faq-item .plus::before, .home-hub .faq-item .plus::after{ content:""; position:absolute; background:var(--hh-gold); border-radius:2px; }
.home-hub .faq-item .plus::before{ inset:8px 1px; height:3px; }
.home-hub .faq-item .plus::after{ inset:1px 8px; width:3px; transition:transform .18s ease; }
.home-hub .faq-item[open] .plus::after{ transform:scaleY(0); }
.home-hub .faq-item p{ padding:0 0 1rem; color:var(--hh-ink-soft); max-width:58ch; margin:0; }

/* ---------- pied de page (idx) ----------
   Vit dans le <footer class="bg-dark text-white"> du gabarit commun, donc
   scopé à .home-hub-vars (tokens seulement, pas color/font — voir plus haut)
   et avec des couleurs de texte adaptées à un fond toujours sombre. */
.home-hub-vars.hh-footer-idx{ margin-top:.5rem; color:var(--hh-forest-ink); }
.home-hub-vars .idx-grid{ display:grid; grid-template-columns:1.1fr 1fr .8fr; gap:2rem; }
.home-hub-vars .idx-col h3{ font-family:'Fraunces',serif; font-weight:600; font-size:.98rem; margin:0 0 .9rem; color:var(--hh-gold-soft); }
.home-hub-vars .idx-col ul{ list-style:none; margin:0; padding:0; }
.home-hub-vars .idx-col ul li{ margin-bottom:.5rem; font-size:.86rem; }
.home-hub-vars .idx-col ul li a{ text-decoration:none; opacity:.85; color:inherit; }
.home-hub-vars .idx-col ul li a:hover{ opacity:1; }
.home-hub-vars .city-chips{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin:0; padding:0; }
.home-hub-vars .city-chips a{
    text-decoration:none; font-size:.8rem; font-weight:600; padding:.38rem .75rem; border-radius:99px;
    border:1px solid rgba(243,236,216,.25); opacity:.9; color:inherit;
}
.home-hub-vars .city-chips a:hover{ opacity:1; border-color:var(--hh-gold-soft); }
.home-hub-vars .dep-idx-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.5rem .8rem; }
.home-hub-vars .dep-idx-list li{ display:flex; align-items:center; gap:.5rem; font-size:.82rem; margin:0; }

.home-hub .hh-note{
    margin-top:1.8rem; padding:.9rem 1.1rem; border:1px dashed var(--hh-line); border-radius:10px;
    font-size:.82rem; color:var(--hh-ink-soft); background:var(--hh-paper-2);
}