/* ───────────────────────────────────────────────────────────
   guides.css — Section Guides Kuabo
   Thème CLAIR, assorti à kuabo.co (styles.css)
─────────────────────────────────────────────────────────── */
:root {
  --gold:#e8b84b; --gold2:#f5cc6a; --gold-dk:#c9952a;
  --teal:#2dd4bf; --teal-dk:#0d9488;
  --navy:#0b1526; --navy2:#1a2d4a;
  --text:#1e293b; --muted:#64748b; --bg:#fff; --bg2:#f8fafc; --border:#e2e8f0;
  --r:16px; --r-sm:10px;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg2); color:var(--text);
  font-family:'Nunito Sans',-apple-system,'Helvetica Neue',Arial,sans-serif;
  line-height:1.65; min-height:100vh; padding-top:64px;
}
.wrap { max-width:1040px; margin:0 auto; padding:36px 40px 80px; }

/* ── Nav (assortie à kuabo.co) ── */
nav.gnav { position:fixed; top:0; left:0; right:0; z-index:999; display:flex; justify-content:space-between; align-items:center; padding:0 40px; height:64px; background:#fff; border-bottom:2px solid var(--border); }
.glogo { display:flex; align-items:center; gap:8px; text-decoration:none; }
.glogo .kua { display:block; flex-shrink:0; width:42px; height:42px; object-fit:contain; animation:wiggle 4s ease-in-out infinite; }
@keyframes wiggle { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-5deg)} 75%{transform:rotate(5deg)} }
.gname { font-family:'Nunito',sans-serif; font-size:24px; font-weight:900; color:var(--navy); letter-spacing:-1.2px; }
.gname b { color:var(--gold); }
.gnav-r { display:flex; align-items:center; gap:10px; }
.gnav-cta { background:var(--gold); color:#fff; font-family:'Nunito',sans-serif; font-weight:900; font-size:14px; text-decoration:none; padding:9px 18px; border-radius:var(--r-sm); border-bottom:3px solid var(--gold-dk); transition:all .15s; white-space:nowrap; }
.gnav-cta:hover { background:var(--gold2); transform:translateY(-1px); }

/* ── Topbar ── */
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:36px; flex-wrap:wrap; gap:16px; }
a.back { display:inline-flex; align-items:center; gap:6px; color:var(--gold-dk); text-decoration:none; font-weight:800; font-size:14px; }
a.back:hover { text-decoration:underline; }
.langs { display:flex; gap:6px; }
.lb { background:#fff; border:2px solid var(--border); color:var(--muted); padding:6px 11px; border-radius:var(--r-sm); font-size:12px; font-weight:800; font-family:'Nunito',sans-serif; cursor:pointer; transition:all .15s; }
.lb:hover, .lb.on { background:rgba(232,184,75,.08); border-color:var(--gold); color:var(--gold-dk); }

/* ── Hero (sobre, pages guides) ── */
.hero { margin-bottom:40px; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-dk); background:rgba(232,184,75,.1); border:2px solid rgba(232,184,75,.3); padding:7px 16px; border-radius:100px; margin-bottom:20px; }
h1 { font-family:'Nunito',sans-serif; font-size:clamp(30px,5.5vw,46px); font-weight:900; line-height:1.1; letter-spacing:-1px; color:var(--navy); margin-bottom:14px; }
h1 .grad { background:linear-gradient(120deg,var(--gold-dk),var(--teal-dk)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.lead { color:var(--muted); font-size:17px; max-width:620px; }

/* ── Showcase hero (vitrine voyage, photo + overlay) ── */
.showcase {
  position:relative; border-radius:24px; overflow:hidden; margin-bottom:22px;
  border:2px solid var(--border); border-bottom-width:5px;
  background:
    linear-gradient(165deg, rgba(11,21,38,.66) 0%, rgba(11,21,38,.82) 55%, rgba(11,21,38,.94) 100%),
    url('/og-image.jpg') center/cover no-repeat;
  padding:62px 34px 56px; text-align:center;
}
.showcase .eyebrow { margin-bottom:18px; color:var(--gold2); background:rgba(232,184,75,.14); border-color:rgba(232,184,75,.4); }
.showcase h1 { color:#fff; font-size:clamp(30px,5.5vw,48px); margin-bottom:14px; }
.showcase h1 .grad { background:linear-gradient(120deg,var(--gold2),var(--teal)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.showcase .lead { color:rgba(255,255,255,.88); margin:0 auto 28px; }
.cta-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn-ghost { display:inline-block; background:rgba(255,255,255,.08); color:#fff; font-weight:800; font-family:'Nunito',sans-serif; text-decoration:none; padding:13px 26px; border-radius:100px; font-size:15px; border:2px solid rgba(255,255,255,.3); transition:all .15s; }
.btn-ghost:hover { background:rgba(255,255,255,.16); border-color:var(--gold); }

/* ── Trust bar ── */
.trust { display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:center; align-items:center; margin:0 auto 38px; padding:16px 22px; background:#fff; border:2px solid var(--border); border-radius:var(--r); box-shadow:0 2px 0 var(--border); }
.trust span { display:inline-flex; align-items:center; gap:7px; font-weight:800; font-size:14px; color:var(--text); }
.trust .tnum { color:var(--gold-dk); }
.trust .sep { color:var(--border); }

/* ── Grille de cartes ── */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; }
a.card {
  display:block; text-decoration:none; color:inherit; position:relative; overflow:hidden;
  background:#fff; border:2px solid var(--border); border-bottom-width:5px; border-radius:18px; padding:24px 22px;
  box-shadow:0 2px 0 var(--border);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
a.card::before { content:''; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg,var(--accent,var(--gold)),transparent); }
a.card:hover { transform:translateY(-4px); border-color:var(--gold); box-shadow:0 10px 26px rgba(11,21,38,.10); }
.card .icowrap { width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:30px; margin-bottom:16px; background:var(--bg2); border:2px solid var(--accent,var(--gold)); }
.card .tag { position:absolute; top:16px; right:16px; font-size:10px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; color:var(--accent,var(--gold-dk)); background:var(--bg2); border:1.5px solid var(--accent,var(--gold)); padding:4px 10px; border-radius:100px; }
.card h3 { font-family:'Nunito',sans-serif; font-size:19px; font-weight:900; color:var(--navy); margin-bottom:8px; line-height:1.25; }
.card p { color:var(--muted); font-size:14px; }
.card .more { margin-top:14px; font-size:13px; font-weight:800; color:var(--teal-dk); }

/* ── Article guide ── */
.guide-head { display:flex; gap:18px; align-items:flex-start; }
.guide-ico { font-size:46px; line-height:1; }
.section { margin-top:40px; }
.section-title { font-family:'Nunito',sans-serif; font-size:13px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-dk); margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.section-title::after { content:''; flex:1; height:2px; background:var(--border); }

/* steps */
ol.steps { list-style:none; counter-reset:step; display:grid; gap:14px; }
ol.steps li { counter-increment:step; position:relative; padding:16px 18px 16px 58px; background:#fff; border:2px solid var(--border); border-radius:14px; font-size:15px; box-shadow:0 2px 0 var(--border); }
ol.steps li::before { content:counter(step); position:absolute; left:16px; top:14px; width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold-dk)); color:#fff; font-weight:900; font-size:14px; display:flex; align-items:center; justify-content:center; }

/* tips */
ul.tips { list-style:none; display:grid; gap:10px; }
ul.tips li { position:relative; padding:12px 16px 12px 42px; background:rgba(45,212,191,.08); border:1.5px solid rgba(45,212,191,.3); border-radius:12px; font-size:14.5px; }
ul.tips li::before { content:'✓'; position:absolute; left:15px; top:11px; color:var(--teal-dk); font-weight:900; }

/* warning */
.warn { display:flex; gap:14px; padding:18px 20px; background:rgba(239,68,68,.06); border:1.5px solid rgba(239,68,68,.3); border-radius:14px; font-size:14.5px; margin-top:28px; }
.warn .wi { font-size:22px; line-height:1.2; }
.warn strong { color:#dc2626; }

/* links */
.links { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
a.link { display:flex; align-items:center; gap:12px; text-decoration:none; padding:14px 16px; background:#fff; border:2px solid var(--border); border-radius:12px; color:var(--text); font-weight:700; font-size:14px; transition:all .15s; box-shadow:0 2px 0 var(--border); }
a.link:hover { border-color:var(--gold); transform:translateY(-2px); }
a.link .le { font-size:20px; }
a.link .lt { flex:1; }
a.link .la { color:var(--muted); font-size:16px; }

/* CTA */
.cta { margin-top:52px; text-align:center; background:linear-gradient(135deg,rgba(232,184,75,.12),rgba(45,212,191,.10)); border:2px solid rgba(232,184,75,.3); border-radius:20px; padding:38px 28px; }
.cta h2 { font-family:'Nunito',sans-serif; font-size:24px; font-weight:900; color:var(--navy); margin-bottom:10px; }
.cta p { color:var(--muted); margin-bottom:22px; }
.btn { display:inline-block; background:var(--gold); color:#fff; font-weight:900; font-family:'Nunito',sans-serif; text-decoration:none; padding:14px 30px; border-radius:100px; font-size:15px; border:none; border-bottom:4px solid var(--gold-dk); transition:transform .15s, background .15s; }
.btn:hover { background:var(--gold2); transform:translateY(-2px); }

p.disclosure { margin-top:34px; font-size:12.5px; color:var(--muted); border-top:1px solid var(--border); padding-top:18px; line-height:1.6; }

footer { margin-top:60px; padding-top:24px; border-top:1px solid var(--border); color:var(--muted); font-size:13px; text-align:center; }
footer a { color:var(--gold-dk); margin:0 8px; text-decoration:none; }
footer a:hover { text-decoration:underline; }

/* ───────── Page Voyage (style compagnie / booking) ───────── */
/* Barre de recherche */
.tsearch { display:flex; flex-wrap:wrap; gap:10px; background:#fff; border:2px solid var(--border); border-bottom-width:5px; border-radius:18px; padding:14px; margin:0 auto 10px; box-shadow:0 10px 34px rgba(11,21,38,.12); max-width:820px; }
.tfield { flex:1 1 150px; display:flex; flex-direction:column; gap:3px; padding:9px 14px; border-radius:12px; background:var(--bg2); border:1.5px solid var(--border); text-align:left; }
.tfield .tlbl { font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.tfield .tval { font-size:14px; font-weight:800; color:var(--navy); }
.tsearch .btn { display:inline-flex; align-items:center; justify-content:center; flex:1 1 130px; }
.tsearch-note { text-align:center; font-size:12.5px; color:var(--muted); margin-bottom:40px; }

/* 3 étapes */
.tsteps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tstep { background:#fff; border:2px solid var(--border); border-radius:16px; padding:26px 20px; text-align:center; box-shadow:0 2px 0 var(--border); }
.tstep .tn { width:42px; height:42px; border-radius:50%; background:var(--gold); color:#fff; font-family:'Nunito',sans-serif; font-weight:900; font-size:19px; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; box-shadow:0 4px 0 var(--gold-dk); }
.tstep h4 { font-family:'Nunito',sans-serif; font-size:17px; font-weight:900; color:var(--navy); margin-bottom:6px; }
.tstep p { font-size:14px; color:var(--muted); }

/* Sections services (lignes explicatives) */
.frow { display:flex; gap:20px; align-items:flex-start; background:#fff; border:2px solid var(--border); border-radius:18px; padding:24px; margin-bottom:14px; box-shadow:0 2px 0 var(--border); }
.frow .ficon { flex-shrink:0; width:62px; height:62px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:30px; background:var(--bg2); border:2px solid var(--accent,var(--gold)); }
.frow h3 { font-family:'Nunito',sans-serif; font-size:20px; font-weight:900; color:var(--navy); margin-bottom:7px; }
.frow p { font-size:14.5px; color:var(--muted); }
.frow .fex { display:inline-block; margin-top:10px; font-size:13px; font-weight:800; color:var(--teal-dk); }

/* Kua te connaît (perso) + trajet vol */
.kuaperso { display:flex; gap:16px; align-items:center; background:linear-gradient(135deg,rgba(232,184,75,.10),rgba(45,212,191,.08)); border:2px solid rgba(232,184,75,.3); border-radius:20px; padding:22px 24px; flex-wrap:wrap; }
.kuaperso img { width:66px; height:66px; flex-shrink:0; animation:wiggle 4s ease-in-out infinite; }
.kbubble { flex:1 1 260px; background:#fff; border:2px solid var(--border); border-radius:16px 16px 16px 4px; padding:15px 18px; font-size:15px; color:var(--navy); font-weight:600; box-shadow:0 2px 0 var(--border); }
.kbubble strong { color:var(--gold-dk); }
.route { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; background:#fff; border:2px solid var(--border); border-bottom-width:5px; border-radius:18px; padding:24px 22px; margin-top:14px; box-shadow:0 2px 0 var(--border); }
.route .pt { text-align:center; min-width:96px; }
.route .pt .city { font-family:'Nunito',sans-serif; font-weight:900; font-size:21px; color:var(--navy); line-height:1.1; }
.route .pt .ap { font-size:12.5px; color:var(--muted); font-weight:700; margin-top:2px; }
.route .line { flex:1 1 90px; min-width:70px; height:2px; background:repeating-linear-gradient(90deg,var(--gold) 0 8px,transparent 8px 16px); position:relative; }
.route .line::after { content:'✈️'; position:absolute; top:-13px; left:50%; transform:translateX(-50%); font-size:22px; }
.route .meta { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; width:100%; margin-top:4px; }
.route .chip { background:var(--bg2); border:1.5px solid var(--border); border-radius:100px; padding:5px 13px; font-size:12.5px; font-weight:800; color:var(--navy); }
.route-note { text-align:center; font-size:12.5px; color:var(--muted); margin-top:12px; }

/* FAQ */
.faq { display:grid; gap:10px; }
.faq details { background:#fff; border:2px solid var(--border); border-radius:14px; padding:15px 18px; }
.faq summary { font-family:'Nunito',sans-serif; font-weight:800; color:var(--navy); cursor:pointer; font-size:15px; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; color:var(--gold-dk); font-weight:900; font-size:18px; }
.faq details[open] summary::after { content:'−'; }
.faq details p { margin-top:11px; font-size:14px; color:var(--muted); }

@media (max-width:620px){
  .tsteps { grid-template-columns:1fr; }
  .frow { flex-direction:column; gap:14px; }
}

[data-lang]:not(.show) { display:none; }

@media (max-width:560px){
  nav.gnav { padding:0 16px; height:58px; }
  body { padding-top:58px; }
  .gname { font-size:20px; }
  .gnav-cta { padding:8px 14px; font-size:13px; }
  .wrap { padding:24px 16px 56px; }
  ol.steps li { padding-left:54px; }
  .showcase { padding:46px 20px 42px; }
}