/* ============================================================
   activites.css — Page "Que faire / Activités" (Azur Vacances)
   Réutilise les variables + nav + footer + .wrap/.eyebrow/.dash-title
   d'azur.css. Tout est scopé sous body.qf pour éviter les collisions.
   Les classes de cartes (.exp-card/.exp-img/.exp-body…) sont
   partagées avec le JS de data-binding (rendu WP / activites.json).
   ============================================================ */

/* .btn-pill d'azur.css est turquoise ; le mockup le veut corail. */
body.qf .btn-pill{
  background:var(--corail);
  box-shadow:0 10px 26px -8px rgba(255,122,77,.6);
  font-weight:600;
}
body.qf .btn-pill:hover{background:#e25f30;transform:translateY(-2px)}

/* ----- Section heads centrés ----- */
body.qf .sec-head{text-align:center;max-width:620px;margin:0 auto 44px}
body.qf .sec-head .dash-title{justify-content:center}
body.qf .sec-head h2{font-family:var(--serif);font-size:clamp(30px,4vw,48px);font-weight:600;line-height:1.05;letter-spacing:-.02em;margin:14px 0 0;font-variation-settings:"opsz" 144}
body.qf .sec-head h2 em{font-style:italic;font-weight:500;color:var(--corail)}
body.qf .sec-head p{margin:14px auto 0;color:var(--ink-soft);font-size:16px;line-height:1.6}

/* ----- Boutons spécifiques ----- */
body.qf .btn-coral{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:999px;background:var(--corail);color:#fff;font-weight:600;font-size:13px}
body.qf .btn-coral:hover{background:#e25f30}
body.qf .btn-dark{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:999px;background:var(--nuit);color:#fff;font-weight:600;font-size:14px;transition:background .2s}
body.qf .btn-dark:hover{background:var(--nuit-deep)}
body.qf .more-link{display:inline-flex;align-items:center;gap:9px;margin:0;font-size:14px;color:var(--ink);font-weight:600;transition:gap .25s}
body.qf .more-link::after{content:"→";color:var(--corail)}
body.qf .more-link:hover{gap:14px}

/* ============================================================
   HERO WAHOO
   ============================================================ */
body.qf .hero{position:relative;height:100vh;min-height:700px;overflow:hidden;color:#fff;background:#06243a}
body.qf .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 52%;animation:qf-kb 26s ease-in-out infinite alternate;transform-origin:center 60%;will-change:transform}
@keyframes qf-kb{0%{transform:scale(1.06)}100%{transform:scale(1.18) translateY(-1.5%)}}
body.qf .hero-sun{position:absolute;left:16%;top:30%;width:44vw;height:44vw;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,221,140,.5) 0%,rgba(255,180,110,.2) 32%,rgba(255,180,110,0) 62%);mix-blend-mode:screen;animation:qf-sunpulse 7s ease-in-out infinite}
@keyframes qf-sunpulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
body.qf .hero-shimmer{position:absolute;left:0;right:0;bottom:0;height:40%;pointer-events:none;opacity:.45;mix-blend-mode:screen;background:repeating-linear-gradient(95deg,rgba(255,255,255,0) 0 38px,rgba(255,255,255,.12) 40px 42px,rgba(255,255,255,0) 44px 80px);animation:qf-shim 9s linear infinite}
@keyframes qf-shim{to{transform:translateX(-80px)}}
body.qf .orb{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,255,255,0) 70%);opacity:0;animation:qf-floaty linear infinite}
@keyframes qf-floaty{0%{opacity:0;transform:translateY(20px) scale(.6)}15%{opacity:.8}85%{opacity:.7}100%{opacity:0;transform:translateY(-120px) scale(1)}}
body.qf .hero-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,36,58,.5) 0%,rgba(6,36,58,.05) 30%,rgba(6,36,58,.12) 52%,rgba(6,36,58,.9) 100%)}
body.qf .hero-content{position:relative;z-index:10;height:100%;display:flex;flex-direction:column;justify-content:center;padding-top:50px;max-width:900px}
body.qf .hero-kicker{display:inline-flex;align-items:center;gap:9px;width:max-content;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.28);padding:9px 18px;border-radius:999px;opacity:0;animation:qf-rise .7s .15s forwards}
body.qf .hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(46px,8vw,108px);line-height:.93;letter-spacing:-.03em;margin:22px 0 0;text-shadow:0 4px 40px rgba(6,36,58,.4);font-variation-settings:"opsz" 144}
body.qf .hero h1 .l{display:inline-block;opacity:0;transform:translateY(40px);animation:qf-rise .9s cubic-bezier(.2,.8,.3,1) forwards}
body.qf .hero h1 em{font-style:italic;font-weight:500;color:var(--olive)}
body.qf .hero p{margin-top:20px;font-size:clamp(16px,2vw,20px);color:rgba(255,255,255,.9);max-width:48ch;line-height:1.5;opacity:0;animation:qf-rise .8s .7s forwards}
body.qf .hero-actions{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;opacity:0;animation:qf-rise .8s .82s forwards}
body.qf .btn-glass{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:999px;background:rgba(255,255,255,.16);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);color:#fff;font-weight:600;font-size:14px;transition:background .2s,transform .2s}
body.qf .btn-glass:hover{background:rgba(255,255,255,.26);transform:translateY(-2px)}
@keyframes qf-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* live stat bar */
body.qf .hero-stats{position:absolute;left:0;right:0;bottom:32px;z-index:12;opacity:0;animation:qf-rise .8s 1s forwards}
body.qf .hero-stats-in{display:flex;background:rgba(255,255,255,.13);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.25);border-radius:18px;overflow:hidden;max-width:720px}
body.qf .hs-cell{flex:1;padding:16px 22px;border-right:1px solid rgba(255,255,255,.18)}
body.qf .hs-cell:last-child{border-right:0}
body.qf .hs-v{font-family:var(--serif);font-size:28px;font-weight:600;line-height:1;font-variation-settings:"opsz" 144}
body.qf .hs-k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:5px}
@media(max-width:680px){body.qf .hero-stats{display:none}}
body.qf .scroll-cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:12;display:flex;flex-direction:column;align-items:center;gap:7px;color:rgba(255,255,255,.8);font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;animation:qf-bob 2s ease-in-out infinite}
@keyframes qf-bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}
@media(max-width:680px){body.qf .scroll-cue{display:none}}

/* ----- SCROLL REVEAL ----- */
body.qf .reveal{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)}
body.qf .reveal.in{opacity:1;transform:none}

/* ----- BREADCRUMB ----- */
body.qf .crumb{background:#fff;border-bottom:1px solid var(--line-soft);padding:14px 0;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
body.qf .crumb a:hover{color:var(--corail)}
body.qf .crumb .sep{margin:0 9px;opacity:.5}
body.qf .crumb .cur{color:var(--ink)}

/* ----- SECTION ----- */
body.qf .section{padding:80px 0}
body.qf .section.tint{background:var(--cream-deep)}

/* ============================================================
   CATEGORY PORTALS (scrim navy + accent corail)
   ============================================================ */
body.qf .portals{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){body.qf .portals{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){body.qf .portals{grid-template-columns:1fr}}
body.qf .portal{position:relative;height:230px;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-soft);display:flex;align-items:flex-end;color:#fff;transition:transform .35s,box-shadow .35s}
body.qf .portal:hover{transform:translateY(-5px);box-shadow:var(--shadow-card)}
body.qf .portal:hover .portal-bg{transform:scale(1.08)}
body.qf .portal-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .9s cubic-bezier(.2,.8,.3,1)}
body.qf .portal::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,36,58,0) 35%,rgba(6,36,58,.82) 100%)}
body.qf .portal-body{position:relative;z-index:2;padding:22px 24px;width:100%}
body.qf .portal-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:7px}
body.qf .portal-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--corail)}
body.qf .portal h3{font-family:var(--serif);font-size:24px;font-weight:600;line-height:1.05;letter-spacing:-.01em;margin:0;font-variation-settings:"opsz" 144}
body.qf .portal p{margin:5px 0 0;font-size:13px;color:rgba(255,255,255,.8)}

/* ============================================================
   CARD GRID (.exp-card — classes utilisées par le JS)
   ============================================================ */
body.qf .exp-grid,
body.qf #plages-grid,
body.qf #activites-grid,
body.qf #rando-featured{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:1024px){
  body.qf .exp-grid,
  body.qf #plages-grid,
  body.qf #activites-grid,
  body.qf #rando-featured{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  body.qf .exp-grid,
  body.qf #plages-grid,
  body.qf #activites-grid,
  body.qf #rando-featured{grid-template-columns:1fr}
}
body.qf .exp-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-soft);transition:transform .35s,box-shadow .35s;display:flex;flex-direction:column;color:inherit}
body.qf .exp-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-card)}
body.qf .exp-card:hover .exp-img img{transform:scale(1.06)}
body.qf .exp-img{aspect-ratio:16/11;overflow:hidden;background:#0E2E45;position:relative}
body.qf .exp-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.3,1)}
body.qf .card-heart{position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--corail);display:grid;place-items:center;font-size:16px;box-shadow:var(--shadow-soft)}
body.qf .exp-body{padding:20px 22px;display:flex;flex-direction:column;flex:1}
body.qf .exp-cat{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--turq-deep);font-weight:600}
body.qf .exp-title{font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.15;margin-top:8px;letter-spacing:-.01em}
body.qf .exp-meta{font-size:13px;color:var(--ink-mute);margin-top:5px}
body.qf .exp-desc{font-size:14px;color:var(--ink-soft);line-height:1.55;margin:12px 0 0}
body.qf .exp-badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
body.qf .exp-badge{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--cream-deep);color:var(--ink-soft)}
body.qf .exp-badge.ok{background:rgba(31,157,107,.12);color:#1F9D6B}
body.qf .exp-badge.warn{background:rgba(255,122,77,.14);color:#c4471c}
body.qf .exp-foot{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line-soft)}
body.qf .exp-foot span[style]{font-family:var(--serif)}
body.qf .exp-tel{font-family:var(--mono);font-size:12px;color:var(--ink-mute)}

/* ----- mini card coups de cœur ----- */
body.qf .mini-card{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line-soft);border-radius:14px;padding:10px 14px 10px 10px;box-shadow:var(--shadow-soft);transition:transform .25s}
body.qf .mini-card:hover{transform:translateY(-2px)}
body.qf .mini-card img{width:54px;height:54px;border-radius:10px;object-fit:cover;flex:none}
body.qf .mc-name{font-family:var(--serif);font-size:15px;font-weight:600;line-height:1.15}
body.qf .mc-sub{font-size:12px;color:var(--ink-mute);margin-top:2px}

/* ----- SEA TEMP banner ----- */
body.qf .sea-temp{display:inline-flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line-soft);border-radius:999px;padding:12px 22px 12px 12px;box-shadow:var(--shadow-soft);margin:0 auto 36px}
body.qf .sea-temp-ico{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--turq),var(--turq-deep));display:grid;place-items:center;color:#fff;font-family:var(--serif);font-weight:600;font-size:14px}
body.qf .sea-temp b{font-size:14px}
body.qf .sea-temp span{display:block;font-size:12px;color:var(--ink-mute)}

/* ----- SPLIT culture ----- */
body.qf .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:900px){body.qf .split{grid-template-columns:1fr;gap:36px}}
body.qf .split-img{border-radius:18px;overflow:hidden;box-shadow:var(--shadow-card);aspect-ratio:4/3}
body.qf .split-img img{width:100%;height:100%;object-fit:cover}
body.qf .split h2{font-family:var(--serif);font-size:clamp(28px,3.5vw,44px);font-weight:600;line-height:1.05;letter-spacing:-.02em;margin:14px 0 0;font-variation-settings:"opsz" 144}
body.qf .split h2 em{font-style:italic;font-weight:500;color:var(--corail)}
body.qf .split p{margin:16px 0 0;color:var(--ink-soft);font-size:16px;line-height:1.7}
body.qf .split .minis{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
@media(max-width:560px){body.qf .split .minis{grid-template-columns:1fr}}

/* ----- FILTERS ----- */
body.qf .filterbar{background:#fff;border:1px solid var(--line-soft);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-soft);display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:sticky;top:14px;z-index:20;margin-bottom:36px}
body.qf .chip{padding:9px 16px;border-radius:999px;border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink-soft);background:#fff;transition:all .2s;white-space:nowrap}
body.qf .chip.active{background:var(--turq);color:#fff;border-color:var(--turq)}
body.qf .chip:hover:not(.active){border-color:var(--corail);color:var(--corail)}
body.qf .filterbar .right{margin-left:auto;display:flex;align-items:center;gap:14px}
body.qf .toggle-coeur{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer}
body.qf .toggle-coeur input{width:16px;height:16px;accent-color:var(--corail)}
body.qf .ville-select{border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:13px;font-weight:600;color:var(--ink-soft);background:#fff}
body.qf .result-count{font-size:13px;color:var(--ink-mute);font-weight:500;margin-top:14px;text-align:center}

/* ----- GYG placeholder ----- */
body.qf .gyg-note{text-align:center;color:var(--ink-mute);font-size:14px;font-style:italic;font-family:var(--serif);padding:30px}

/* ----- FAQ ----- */
body.qf .faq{max-width:780px;margin:0 auto}
body.qf .faq-item{border:1px solid var(--line-soft);border-radius:14px;background:#fff;margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow-soft)}
body.qf .faq-q{width:100%;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;text-align:left;font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink);gap:18px}
body.qf .faq-q .ic{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-soft);font-size:17px;flex:none;transition:all .25s}
body.qf .faq-item.open .ic{background:var(--corail);color:#fff;border-color:var(--corail);transform:rotate(45deg)}
body.qf .faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
body.qf .faq-a-in{padding:0 24px 22px;color:var(--ink-soft);font-size:15px;line-height:1.65}
body.qf .faq-a-in strong{color:var(--ink)}

/* ----- CTA PRO ----- */
body.qf .cta-pro{position:relative;padding:90px 0;text-align:center;color:#fff;background:var(--nuit);overflow:hidden}
body.qf .cta-pro::before{content:"";position:absolute;inset:0;background:radial-gradient(45% 40% at 80% 20%,rgba(31,168,224,.28),transparent 70%),radial-gradient(40% 40% at 12% 85%,rgba(255,122,77,.2),transparent 70%)}
body.qf .cta-pro-in{position:relative;z-index:2;max-width:600px;margin:0 auto}
body.qf .cta-pro h2{font-family:var(--serif);font-size:clamp(28px,4vw,44px);font-weight:600;line-height:1.1;margin:0;font-variation-settings:"opsz" 144}
body.qf .cta-pro h2 em{font-style:italic;font-weight:500;color:var(--olive)}
body.qf .cta-pro p{margin:14px auto 26px;color:rgba(255,255,255,.85);font-size:16px;max-width:44ch}

/* ----- Réduction des animations ----- */
@media(prefers-reduced-motion:reduce){
  body.qf .hero-img,
  body.qf .hero-sun,
  body.qf .hero-shimmer,
  body.qf .orb,
  body.qf .scroll-cue{animation:none!important}
  body.qf .hero h1 .l,
  body.qf .hero-kicker,
  body.qf .hero p,
  body.qf .hero-actions,
  body.qf .hero-stats{animation:none!important;opacity:1!important;transform:none!important}
  body.qf .reveal{opacity:1!important;transform:none!important;transition:none!important}
}