:root {
  --navy: #002b55;
  --navy-light: #004080;
  --orange: #FF8000;
  --orange-dark: #e06f00;
  --bg-soft: #f7f9fc;
  --text: #333;
  --radius: 8px;
  --shadow: 0 6px 20px rgba(0, 43, 85, 0.10);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Lato', sans-serif;
  background: #fff;
  color: var(--text);
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: 'Montserrat', sans-serif;
  color: var(--navy);
  margin-top: 0;
  line-height: 1.25;
}

a { color: var(--orange); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Header */
.site-header {
  background: var(--bg-soft);
  border-bottom: 1px solid #e7edf5;
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: 8px;
  padding-bottom: 8px;
  gap: 8px;
}
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.brand-logo { height: 31px; width: auto; }
.brand-text strong { display: block; font-family: 'Montserrat', sans-serif; font-size: 1.05rem; color: var(--navy-light); }
.brand-text small { color: #6b7c93; font-size: .74rem; }

nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
nav a {
  font-weight: 700;
  color: var(--navy-light);
  text-transform: uppercase;
  font-size: .82rem;
  letter-spacing: .03em;
}
nav a:hover { color: var(--orange); text-decoration: none; }

/* Hero */
.hero {
  background-size: cover;
  background-position: center;
  color: #fff;
}
.hero-overlay {
  background: linear-gradient(to bottom, rgba(0,43,85,.45), rgba(0,43,85,.70));
  padding: 110px 0;
}
.hero h1 { color: #fff; font-size: 2.8rem; max-width: 760px; }
.hero p { font-size: 1.2rem; max-width: 620px; }
.hero-single .hero-overlay { padding: 80px 0; }

/* CTA */
.cta-button {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  padding: 13px 26px;
  border-radius: var(--radius);
  font-weight: 700;
  text-transform: uppercase;
  font-size: .95rem;
  letter-spacing: .02em;
  border: none;
  cursor: pointer;
  margin-top: 14px;
}
.cta-button:hover { background: var(--orange-dark); text-decoration: none; color: #fff; }

/* Sections */
.section { padding: 64px 0; }
.section-title { font-size: 2rem; text-align: center; }
.section-sub { text-align: center; color: #6b7c93; margin-top: -6px; margin-bottom: 36px; }

.page-head {
  background: var(--bg-soft);
  padding: 56px 0;
  border-bottom: 1px solid #e7edf5;
}
.page-head h1 { font-size: 2.4rem; }
.page-head p { color: #6b7c93; font-size: 1.1rem; margin: 0; }

/* Cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
}
.card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  color: var(--text);
  transition: transform .18s ease, box-shadow .18s ease;
  display: flex;
  flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,43,85,.16); text-decoration: none; }
.card-img { height: 200px; background-size: cover; background-position: center; }
.card-body { padding: 20px; }
.card-body h3 { font-size: 1.25rem; margin: 8px 0; }
.card-body p { color: #51606f; margin: 0; }

.badge {
  display: inline-block;
  background: rgba(255,128,0,.12);
  color: var(--orange-dark);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 4px 10px;
  border-radius: 999px;
}
.hero-single .badge { background: rgba(255,255,255,.2); color: #fff; }
.meta { color: #8794a3; font-size: .82rem; }
.hero-single .meta { color: #dbe5f0; }

/* Band */
.band { background: var(--navy); color: #fff; padding: 60px 0; text-align: center; }
.band h2 { color: #fff; margin-bottom: 34px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 28px; }
.feature h3 { color: var(--orange); }
.feature p { color: #cdd9e6; margin: 0; }

/* Article / single */
.article-body { max-width: 800px; }
.article-body .lead { font-size: 1.25rem; color: var(--navy-light); }
.highlights { padding-left: 0; list-style: none; }
.highlights li { padding: 8px 0 8px 28px; position: relative; border-bottom: 1px solid #eef2f7; }
.highlights li::before { content: "✓"; position: absolute; left: 0; color: var(--orange); font-weight: 700; }

/* Forms */
.narrow { max-width: 640px; }
.contact-form { display: grid; gap: 18px; }
.contact-form label { font-weight: 700; color: var(--navy); display: grid; gap: 6px; }
.contact-form input, .contact-form textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 11px 13px;
  border: 1px solid #cdd7e3;
  border-radius: var(--radius);
  width: 100%;
}
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--orange); border-color: var(--orange); }
.contact-form button { justify-self: start; }
.alert { padding: 14px 18px; border-radius: var(--radius); margin-bottom: 22px; }
.alert.success { background: #e6f7ec; color: #1b6b3a; border: 1px solid #b7e3c6; }

/* Footer */
.site-footer { background: var(--navy); color: #cdd9e6; margin-top: 40px; }
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  padding: 50px 16px 30px;
}
.site-footer strong { color: #fff; font-family: 'Montserrat', sans-serif; }
.site-footer h4 { color: #fff; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links a { color: #cdd9e6; }
.footer-links a:hover { color: var(--orange); }
.copyright { border-top: 1px solid rgba(255,255,255,.12); padding-top: 18px; padding-bottom: 24px; font-size: .85rem; }

@media (max-width: 768px) {
  .hero h1 { font-size: 2rem; }
  .hero-overlay { padding: 70px 0; }
  .header-inner { flex-direction: column; align-items: flex-start; }
  nav ul { justify-content: flex-start; }
  .footer-inner { grid-template-columns: 1fr; gap: 24px; }
}

/* ══════════════════════════════════════════════════════════════
   WIDGETS SYSTÈME
══════════════════════════════════════════════════════════════ */

/* Breadcrumb */
.breadcrumb { font-size:.85rem; color:rgba(255,255,255,.7); margin-bottom:12px; }
.breadcrumb a { color:rgba(255,255,255,.85); text-decoration:underline; }
.hero-badges { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.badge-type { background:var(--orange); color:#fff; }
.badge-region { background:rgba(255,255,255,.2); color:#fff; }
.hero-excerpt { font-size:1.15rem; max-width:640px; color:rgba(255,255,255,.92); margin-top:8px; }

/* ── HERO COMPACT — titre + excerpt, image réduite ──────────────── */
.hero-compact { min-height: 0 !important; }
.hero-compact .hero-overlay {
  background: linear-gradient(to bottom, rgba(0,30,70,.50), rgba(0,30,70,.75)) !important;
  padding: 36px 0 32px !important;
}
.hero-compact h1 { font-size: 2.2rem !important; margin-bottom: 8px; }
.hero-compact .hero-excerpt { font-size: 1rem !important; }

/* ── DEST INFOBAR — redesign complet ──────────────────────────────── */
.dest-infobar { border-bottom:2px solid #d4e0f0; }

/* Zone 1 — Statistiques animées + infos destination */
.dib-stats {
  background: linear-gradient(135deg,#0d1b35 0%,#1a3a6e 55%,#153060 100%);
  padding: 10px 0;
}
.dib-stats-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}
.dib-stat {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  padding: 7px 22px;
  border-right: 1px solid rgba(255,255,255,.18);
  flex: 1;
  max-width: 220px;
  min-width: 120px;
}
.dib-stat:last-child { border-right: none; }
/* Séparateur vertical entre les deux groupes */
.dib-stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,.38);
  flex-shrink: 0;
  margin: 0 4px;
}
/* Compteurs animés */
.dib-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -.02em;
}
.dib-lbl {
  font-size: .62rem;
  color: rgba(255,255,255,.72);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
/* ── Avis : note + étoiles ── */
.dib-stat-reviews { gap: 8px; min-width: 170px; }
.dib-rev-score    { display: flex; align-items: baseline; gap: 2px; }
.dib-rev-max      { font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.5); margin-left: 1px; }
.dib-rev-right    { display: flex; flex-direction: column; gap: 3px; }
.dib-rev-stars    { font-size: .95rem; letter-spacing: 1px; color: #f59e0b; line-height: 1;
                    filter: drop-shadow(0 0 4px rgba(245,158,11,.5)); }
.dib-star-half    { opacity: .55; }
.dib-star-empty   { color: rgba(255,255,255,.25); }
.dib-num-sm       { font-size: 1rem !important; }

/* Infos destination (pays, langue, devise) */
.dib-ico  { font-size: 1.55rem; line-height: 1; flex-shrink: 0; }
.dib-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dib-txt  {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dib-sym  { font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.65); }

/* Zone 2 — Cartes d'infos */
.dib-cards { background: #fff; }
.dib-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-bottom: 1px solid #e8eff8;
}
.dib-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 20px 22px;
  border-right: 1px solid #e8eff8;
  transition: background .18s;
  cursor: default;
}
.dib-card:hover { background: #f6f9fd; }
.dib-card:last-child { border-right: none; }
.dib-card-ico { font-size: 1.7rem; line-height: 1; margin-bottom: 4px; }
.dib-card strong {
  font-family: 'Montserrat', sans-serif;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--navy);
}
.dib-card span { font-size: .86rem; color: #4a5568; line-height: 1.45; }

/* Zone 3 — Infos pratiques */
.dib-pratique { background: #f0f5fb; border-top: 1px solid #dce6f2; }
.dib-pratique-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.dib-prat-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 20px;
  border-right: 1px solid #dce6f2;
}
.dib-prat-item:last-child { border-right: none; }
.dib-prat-ico { font-size: 1.45rem; flex-shrink: 0; }
.dib-prat-item > span { display: flex; flex-direction: column; gap: 1px; }
.dib-prat-item strong { font-size: .86rem; color: var(--navy); }
.dib-prat-item small { font-size: .71rem; color: #7a8fa6; }

/* Responsive */
@media (max-width: 900px) {
  .dib-cards-grid    { grid-template-columns: repeat(2,1fr); }
  .dib-pratique-grid { grid-template-columns: repeat(2,1fr); }
  .dib-card:nth-child(2)    { border-right: none; }
  .dib-prat-item:nth-child(2){ border-right: none; }
}
@media (max-width: 640px) {
  .dib-stat { padding: 6px 12px; gap: 6px; min-width: 100px; max-width: 160px; }
  .dib-num  { font-size: 1.2rem; }
  .dib-txt  { font-size: .88rem; }
  .dib-lbl  { font-size: .58rem; }
  .dib-ico  { font-size: 1.25rem; }
  .dib-stat-divider { display: none; }
  .dib-cards-grid    { grid-template-columns: 1fr 1fr; }
  .dib-pratique-grid { grid-template-columns: 1fr 1fr; }
  .dib-prat-item { padding: 10px 14px; gap: 7px; }
}

/* Widget sections */
.widget-section { padding:36px 0 24px; border-bottom:1px solid #eef2f7; }
.widget-section.widget-compact { padding-top:24px; }
.widget-header { display:flex; align-items:flex-start; gap:14px; margin-bottom:20px; }
.widget-icon { font-size:1.8rem; line-height:1; flex-shrink:0; }
.widget-header h3 { font-size:1.2rem; margin:0 0 4px; }
.widget-header p { font-size:.85rem; color:#8794a3; margin:0; }
.widget-header p a { color:var(--orange); }
.widget-error { color:#c0392b; background:#fdf0ed; padding:12px 16px; border-radius:var(--radius); }

/* YouTube */
.youtube-wrapper { pointer-events:none; max-width:100%; overflow:hidden; border-radius:12px; }
.youtube-inner { position:relative; width:100%; padding-top:50%; }
.youtube-inner iframe { position:absolute; top:0; left:0; width:100%; height:100%; transform:scale(1.35); transform-origin:center; border:none; border-radius:12px; }
.yt-placeholder { background-size:cover; background-position:center; border-radius:12px; min-height:380px; display:flex; align-items:center; justify-content:center; }
.yt-placeholder-inner { background:rgba(0,0,0,.55); padding:40px 60px; border-radius:12px; text-align:center; color:#fff; }
.yt-placeholder-inner span { font-size:3rem; display:block; margin-bottom:12px; }
.yt-placeholder-inner p { font-size:1.2rem; font-family:'Montserrat',sans-serif; margin:0 0 8px; }
.yt-placeholder-inner small { color:rgba(255,255,255,.7); font-size:.82rem; }
.yt-placeholder-inner code { background:rgba(255,255,255,.15); padding:2px 6px; border-radius:4px; }

/* Weather */
.weather-widget { background:#f7f9fc; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.forecast-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:0; }
.forecast-day { padding:14px 8px; text-align:center; border-right:1px solid #e7edf5; font-size:.82rem; transition:background .15s; }
.forecast-day:last-child { border-right:none; }
.forecast-day.today { background:rgba(255,128,0,.07); }
.fd-name { font-weight:700; color:var(--navy); font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; margin-bottom:6px; }
.fd-icon { font-size:1.6rem; margin:4px 0; }
.fd-label { font-size:.7rem; color:#8794a3; margin-bottom:6px; min-height:28px; }
.fd-temp { display:flex; justify-content:center; gap:6px; }
.fd-max { font-weight:700; color:var(--navy); }
.fd-min { color:#8794a3; }
.fd-precip { font-size:.72rem; color:#5b8dd9; margin-top:4px; }
.fd-wind { font-size:.72rem; color:#8794a3; margin-top:2px; }

/* Windy */
.lazy-windy { width:100%; border-radius:12px; overflow:hidden; pointer-events:none; background:#e8eff8; }

/* Infos temps réel contextuelles (selon type de lieu) */
.ctx-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:8px; margin-bottom:16px; }
.ctx-card { background:var(--bg-soft); border:1px solid #e1e8f2; border-radius:10px; padding:10px 6px; text-align:center; }
.ctx-icon { font-size:1.15rem; line-height:1; }
.ctx-val { font-size:.95rem; font-weight:800; color:var(--navy); margin-top:4px; white-space:nowrap; }
.ctx-label { font-size:.64rem; color:#8794a3; margin-top:2px; font-weight:600; }
@media (max-width:1100px) { .ctx-grid { grid-template-columns:repeat(4,1fr); } }
@media (max-width:640px)  { .ctx-grid { grid-template-columns:repeat(2,1fr); } }

/* Widget Température de l'eau (Open-Meteo Marine) — gabarit compact comme les autres blocs */
.sst-widget { display:grid; grid-template-columns:200px 1fr; gap:10px; align-items:stretch; }
.sst-now {
  border-radius:12px; padding:14px 12px; text-align:center; color:#fff;
  background:linear-gradient(160deg, var(--sst-color), color-mix(in srgb, var(--sst-color) 70%, #001b3a));
  box-shadow:0 8px 22px rgba(0,43,85,.18);
  display:flex; flex-direction:column; justify-content:center; gap:3px;
}
.sst-emoji { font-size:1.6rem; line-height:1; }
.sst-now-temp { font-size:2rem; font-weight:800; line-height:1; }
.sst-now-temp span { font-size:1rem; font-weight:700; opacity:.85; }
.sst-now-badge { font-size:.8rem; font-weight:700; }
.sst-now-sub { font-size:.74rem; opacity:.9; margin-top:1px; }
.sst-forecast { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.sst-day {
  background:var(--bg-soft); border:1px solid #e1e8f2; border-radius:12px;
  padding:10px 6px; text-align:center; display:flex; flex-direction:column; gap:3px; justify-content:center;
}
.sst-day-name { font-size:.7rem; font-weight:700; color:var(--navy); }
.sst-day-emoji { font-size:1rem; line-height:1; }
.sst-day-avg { font-size:1.05rem; font-weight:800; }
.sst-day-mm { font-size:.64rem; color:#8794a3; }
@media (max-width:760px) {
  .sst-widget { grid-template-columns:1fr; }
  .sst-forecast { grid-template-columns:repeat(4,1fr); }
}

/* Température de l'eau inline dans la grille Windy (plage) */
/* ── Beach grid 3 colonnes ──────────────────────────────────────────────────── */

/* LEFT — info rotator */
.beach-info-card {
  position:relative; height:250px; border-radius:12px; overflow:hidden;
  background:#f4f8fd; border:1px solid #e1e8f2; box-sizing:border-box;
}
.bi-slide {
  position:absolute; inset:0; opacity:0; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:10px; text-align:center; overflow:hidden;
  transition:opacity .5s ease;
}
.bi-slide.bi-on { opacity:1; pointer-events:auto; }
.bi-icon { font-size:2.8rem; line-height:1; flex-shrink:0; }
.bi-val  { font-size:2.2rem; font-weight:900; color:var(--navy); font-family:'Montserrat',sans-serif; line-height:1.1; flex-shrink:0; }
.bi-label{ font-size:.82rem; font-weight:700; color:#475569; text-transform:uppercase; letter-spacing:.04em; }
.bi-sub  { font-size:.9rem; color:#8794a3; }
.val-good { color:#16a34a !important; }
.val-warn { color:#d97706 !important; }
.val-bad  { color:#dc2626 !important; }


/* MIDDLE — pub contextuelle synchronisée */
.beach-ad-card {
  position:relative; height:250px; border-radius:12px; overflow:hidden;
  background:#fff8f0; border:1px solid #fde8c8; box-sizing:border-box;
}
.ba-slide {
  position:absolute; inset:0; opacity:0; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:18px; text-align:center; text-decoration:none;
  transition:opacity .5s ease;
}
.ba-slide.ba-on { opacity:1; pointer-events:auto; }
.ba-slide:hover { background:rgba(255,200,100,.08); }
.ba-badge { font-size:.72rem; font-weight:700; color:#b45309; text-transform:uppercase; letter-spacing:.06em; background:#fef3c7; padding:3px 10px; border-radius:20px; flex-shrink:0; }
.ba-icon  { font-size:2.8rem; line-height:1; margin:2px 0; flex-shrink:0; }
.ba-title { font-size:1.05rem; font-weight:800; color:var(--navy); }
.ba-desc  { font-size:.85rem; color:#8794a3; }
.ba-cta   { font-size:.85rem; font-weight:700; color:var(--orange); margin-top:4px; }
.ba-slide:hover .ba-cta { text-decoration:underline; }

/* RIGHT — jour/nuit ↔ marée alternance indépendante */
.beach-right-card {
  position:relative; height:250px; border-radius:12px; overflow:hidden;
  background:#f4f8fd; border:1px solid #e1e8f2; box-sizing:border-box;
}
.br-slide { position:absolute; inset:0; opacity:0; pointer-events:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:16px; text-align:center; transition:opacity .6s ease; }
.br-slide.br-on { opacity:1; pointer-events:auto; }
.br-slide .dn-card,
.br-slide .tide-card { height:250px; border-radius:12px; }

@media (max-width:760px) { .windy-grid-3 { grid-template-columns:1fr; } }
@media (max-width:640px) { .windy-grid { grid-template-columns:1fr; } .windy-cell iframe { height:240px; } }

/* Windy 2×2 grid */
.windy-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 10px; }
.windy-grid-1 { grid-template-columns:1fr; }
.windy-grid-3 { grid-template-columns:repeat(3,1fr); }
.windy-item { display:flex; flex-direction:column; }
.windy-val { display:flex; align-items:baseline; gap:8px; padding:6px 4px; }
.windy-val-num { font-size:1.15rem; font-weight:800; color:var(--navy); }
.windy-val-lbl { font-size:.74rem; font-weight:600; color:#8794a3; }
.windy-cell { position:relative; border-radius:12px; overflow:hidden; background:#0d1b2a; }
.windy-cell iframe { width:100%; height:250px; border:none; display:block; }
.windy-cell-label { position:absolute; top:8px; left:8px; z-index:10; background:rgba(5,15,35,.72); backdrop-filter:blur(5px); color:#fff; font-size:.68rem; font-weight:700; padding:4px 10px; border-radius:20px; pointer-events:none; letter-spacing:.03em; }

/* Emplacement publicitaire (carte de gauche) */
.ad-slot { position:relative; height:250px; border-radius:12px; overflow:hidden; background:#f4f8fd; border:1px solid #e1e8f2; }
.ad-ins { display:block; width:100%; height:100%; }
.ad-campaign { display:block; height:100%; position:relative; }
.ad-campaign img { width:100%; height:100%; object-fit:cover; display:block; }
.ad-tag { position:absolute; top:8px; left:8px; background:rgba(5,15,35,.6); color:#fff; font-size:.6rem; font-weight:700; padding:2px 8px; border-radius:10px; text-transform:uppercase; letter-spacing:.05em; }
.ad-fallback { position:absolute; inset:0; }
.ad-fb-slide { position:absolute; inset:0; opacity:0; transition:opacity .6s ease; pointer-events:none; }
.ad-fb-slide.active { opacity:1; pointer-events:auto; }
.ad-fb-pub { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; height:100%; text-align:center; padding:20px;
  background:repeating-linear-gradient(45deg,#f3f6fb,#f3f6fb 12px,#eef2f8 12px,#eef2f8 24px); color:var(--navy); }
.ad-fb-pub-icon { font-size:2rem; }
.ad-fb-pub strong { font-size:1.05rem; color:var(--navy); }
.ad-fb-pub-sub { font-size:.78rem; color:#8794a3; max-width:220px; }
.ad-fb-cta { margin-top:6px; font-size:.82rem; font-weight:700; color:var(--orange); }
.ad-fb-pub:hover .ad-fb-cta { text-decoration:underline; }

/* Carte monde jour/nuit (terminateur) */
.dn-card { position:relative; height:250px; border-radius:12px; overflow:hidden; background:#0b1b2a; border:1px solid #e1e8f2; }
.dn-card .windy-cell-label { background:rgba(11,27,58,.8); }
.dn-map { width:100%; height:100%; }
.dn-map .leaflet-container { background:#9fc4e8; }

/* Carte marée (graphe SVG maison) */
.tide-card { position:relative; height:250px; border-radius:12px; overflow:hidden; background:#f4f8fd; border:1px solid #e1e8f2; display:flex; flex-direction:column; }
.tide-card .windy-cell-label { background:rgba(37,99,235,.85); }
.tide-svg { flex:1 1 auto; width:100%; min-height:0; padding:8px 4px 0; box-sizing:border-box; }
.tide-tick { font-size:9px; fill:#8794a3; text-anchor:middle; }
.tide-minmax { display:flex; justify-content:space-between; padding:6px 12px 10px; font-size:.68rem; font-weight:700; color:#2563eb; }
.tide-empty { align-items:center; justify-content:center; color:#8794a3; font-size:.85rem; text-align:center; padding:20px; }
@media (max-width:760px) { .windy-grid-3 { grid-template-columns:1fr; } }
@media (max-width:640px) { .windy-grid { grid-template-columns:1fr; } .windy-cell iframe { height:240px; } }

/* Highlights météo : top question + top avis (rotation 20s, navigation) */
.mh-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }
.mh-card {
  position:relative; border-radius:14px; padding:16px 18px; overflow:hidden;
  background:linear-gradient(135deg,#f7faff,#eef3fb); border:1px solid #e1e8f2;
  box-shadow:0 4px 16px rgba(0,43,85,.06);
}
.mh-card-r { background:linear-gradient(135deg,#fffaf3,#fdf1e3); border-color:#f3e2cd; }
.mh-head { display:flex; align-items:center; justify-content:space-between; font-size:.8rem; font-weight:800; color:var(--navy); margin-bottom:10px; letter-spacing:.2px; }
.mh-nav { display:flex; gap:6px; }
.mh-arrow { width:26px; height:26px; border-radius:50%; border:1px solid #d0dae8; background:#fff; color:var(--navy); font-size:1rem; line-height:1; cursor:pointer; transition:all .15s; }
.mh-arrow:hover { background:var(--navy); color:#fff; border-color:var(--navy); }
.mh-stage { position:relative; min-height:116px; }
.mh-slide {
  position:absolute; inset:0; opacity:0; transform:translateY(12px) scale(.98);
  transition:opacity .5s ease, transform .5s ease; pointer-events:none;
  display:flex; flex-direction:column;
}
.mh-slide.active { opacity:1; transform:none; pointer-events:auto; }
.mh-q-text { font-size:.96rem; font-weight:700; color:#2563eb; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mh-r-text { font-size:.9rem; font-weight:600; color:var(--navy); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.mh-stars { color:#f59e0b; font-size:.92rem; letter-spacing:2px; margin-bottom:5px; }
.mh-meta { margin-top:6px; font-size:.72rem; font-style:italic; color:#8794a3; }
.mh-insta { color:var(--orange); font-style:normal; font-weight:700; }
.mh-answer { margin-top:7px; font-size:.8rem; color:#15803d; line-height:1.4; background:#eafaf0; border:1px solid #c5edd5; border-radius:8px; padding:6px 9px;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.mh-answer-tag { font-weight:800; font-size:.66rem; }
.mh-answer-by { color:#6f7a89; font-style:italic; }
.mh-answer-none { color:#8794a3; background:#f4f6fa; border-color:#e1e8f2; }
.mh-answer-cta { width:100%; text-align:left; font-family:inherit; cursor:pointer; color:var(--orange); font-weight:700; }
.mh-answer-cta:hover { background:#fff4ea; border-color:#fbcfa0; text-decoration:underline; }
.mh-meta-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:6px; }
.mh-meta-inline { font-size:.72rem; font-style:italic; color:#8794a3; }
.mh-act { font-family:inherit; cursor:pointer; border:none; background:none; color:var(--orange); font-size:.78rem; font-weight:700; padding:0; white-space:nowrap; }
.mh-act:hover { text-decoration:underline; }
.mh-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:12px; padding-top:10px; border-top:1px solid rgba(0,43,85,.08); }
.mh-all { display:block; margin-top:12px; padding-top:10px; border-top:1px solid rgba(0,43,85,.08); text-align:right; font-size:.8rem; font-weight:700; color:var(--orange); }
.mh-all:hover { text-decoration:underline; }
.mh-all-inline { margin-top:0; padding-top:0; border-top:none; text-align:right; }
@media (max-width:760px) { .mh-grid { grid-template-columns:1fr; } .mh-stage { min-height:150px; } }

/* ── Live & Webcams — 2 panneaux côte à côte ─────────────────────────────── */
.lw-section { margin: 24px 0; }
.dest-live-title { font-size:1.4rem; margin-bottom:16px; color: var(--navy); }
.lw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.lw-grid-single {
  grid-template-columns: 1fr;
  max-width: 700px;
}
.lw-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent;
}
.lw-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 8px 2px;
}
.lw-panel-iframe {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  background: #0a0f1a;
}
.lw-badge {
  font-size: .68rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: .04em;
}
.lw-badge-cam    { background: rgba(30,100,220,.85);  color: #fff; }
.lw-badge-yt     { background: rgba(220,30,30,.9);    color: #fff; }
.lw-badge-sky    { background: rgba(120,60,200,.9);   color: #fff; }
.lw-badge-cam247 { background: rgba(30,140,180,.9);   color: #fff; }
.lw-badge-wind   { background: rgba(30,100,180,.9);   color: #fff; }
.lw-badge-sat    { background: rgba(60,60,80,.9);     color: #fff; }
.lw-hint { font-size: .65rem; color: rgba(255,255,255,.45); }
.lw-live-data {
  font-size: 1.3rem;
  font-weight: 700;
  color: #5c2d0a;
}
.lw-live-data em {
  font-style: normal;
  font-weight: 500;
  color: #7a3d12;
  font-size: 1.2rem;
}

/* ══ Beach Solo Panel — 1 métrique plein écran, rotation 20 s ═════════ */

.bi-frame-wrap { background: #060e1c !important; }

/* Conteneur principal positionné absolument dans le frame */
.bi-solo {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 14px 22px 10px; gap: 0; color: #fff;
}

/* Zone d'affichage (fade simple) */
.bi-solo-display {
  flex: 1; width: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 7px;
  opacity: 1; transition: opacity .42s ease;
}
.bi-solo-display.bi-out { opacity: 0; }

/* Icône */
.bi-solo-ico { font-size: 2rem; line-height: 1.2; }

/* Valeur principale — très grande, lumineuse */
.bi-solo-val {
  font-size: 2.8rem; font-weight: 900; line-height: 1;
  letter-spacing: -.02em;
  color: var(--bs-color, #60a5fa);
  filter: drop-shadow(0 0 20px var(--bs-color, #3b82f6));
  text-align: center;
}

/* Label sous la valeur */
.bi-solo-lbl {
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.42); margin-top: 1px; text-align: center;
}

/* ── Arc SVG (type gauge) ─── */
.bi-solo-arc-bg   { stroke: rgba(255,255,255,.06); }
.bi-solo-arc-fill {
  stroke-dasharray: 0 221;
  transition: stroke-dasharray 1.35s cubic-bezier(.16,1,.3,1) .1s;
}
.bi-solo svg { overflow: visible; }

/* ── Barre horizontale (type bar) ─── */
.bi-solo-bar-wrap { width: 80%; max-width: 270px; margin-top: 5px; }
.bi-solo-bar-bg   { height: 10px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.bi-solo-bar-fill {
  height: 100%; border-radius: 99px; width: 0;
  transition: width 1.35s cubic-bezier(.16,1,.3,1) .1s;
  box-shadow: 0 0 14px var(--bs-color, #3b82f6);
}

/* ── Navigation bas : points + timer ─── */
.bi-solo-nav {
  width: 100%; display: flex; flex-direction: column;
  align-items: center; gap: 5px; padding-top: 5px;
}
.bi-solo-dots {
  display: flex; gap: 5px; flex-wrap: wrap;
  justify-content: center; max-width: 200px;
}
.bi-solo-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.16); cursor: pointer;
  transition: background .3s, transform .3s;
}
.bi-solo-dot.bi-act {
  background: var(--bs-dot, #60a5fa); transform: scale(1.5);
}
/* Barre countdown 20 s */
.bi-solo-timer {
  width: 70%; max-width: 190px; height: 2px;
  border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden;
}
.bi-solo-tbar {
  height: 100%; width: 100%; border-radius: 99px;
  background: rgba(255,255,255,.3);
}
@keyframes bs-countdown { from { width:100%; } to { width:0; } }

/* ── Badge + ticker ─── */
.lw-badge-beach { background: linear-gradient(135deg,#059669,#10b981); color:#fff; }
.lw-ticker-wrap { overflow: hidden; display: flex; align-items: center; min-width: 0; }
.lw-ticker-item {
  font-size: 1rem; font-weight: 700; color: #5c2d0a;
  white-space: nowrap; opacity: 1; transition: opacity .35s ease;
}
.lw-ticker-item.bi-fade { opacity: 0; }

@media (max-width: 900px) { .bi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .bi-grid { grid-template-columns: repeat(2, 1fr); } }
.lw-frame-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/7;
  overflow: hidden;
  background: #000;
}
.lw-frame-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.lw-caption {
  padding: 6px 14px 12px;
  font-size: .68rem;
  color: rgba(255,255,255,.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 760px) {
  .lw-grid { grid-template-columns: 1fr; }
}
.dest-about-details { margin-top:20px; border:1px solid #e7edf5; border-radius:10px; overflow:hidden; }
.dest-about-details summary { cursor:pointer; padding:12px 16px; font-weight:700; font-size:.9rem; color:var(--navy); background:#f5f8fc; list-style:none; display:flex; align-items:center; gap:8px; }
.dest-about-details summary::-webkit-details-marker { display:none; }
.dest-about-details summary::after { content:'▾'; margin-left:auto; font-size:.85rem; transition:transform .2s; }
.dest-about-details[open] summary::after { transform:rotate(-180deg); }
.dest-about-body { padding:16px 20px; }
@media (max-width:640px) { .live-grid { grid-template-columns:1fr; } }

/* Q&A Questions / Réponses */
.qa-section { }
.qa-flash { padding:10px 16px; border-radius:8px; font-size:.85rem; font-weight:600; margin-bottom:12px; }
.qa-flash-ok    { background:#e6f9f0; color:#1a6b45; border:1px solid #b3e6cc; }
.qa-flash-error { background:#fef3f2; color:#b42318; border:1px solid #fecdca; }
.qa-auth-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 0 14px; border-bottom:1px solid #e7edf5; margin-bottom:14px; }
.qa-auth-hint { font-size:.8rem; color:#9aa5b4; flex:1; }
.qa-user-badge { font-size:.82rem; font-weight:700; color:var(--navy); background:#f0f4ff; padding:4px 12px; border-radius:20px; }
.qa-auth-link { background:none; border:none; color:#9aa5b4; font-size:.78rem; cursor:pointer; text-decoration:underline; padding:0; }
.qa-btn-login    { padding:6px 14px; border-radius:20px; border:1.5px solid var(--navy); color:var(--navy); background:#fff; font-size:.78rem; font-weight:700; cursor:pointer; transition:all .15s; }
.qa-btn-login:hover { background:var(--navy); color:#fff; }
.qa-btn-register { padding:6px 14px; border-radius:20px; border:none; background:var(--orange); color:#fff; font-size:.78rem; font-weight:700; cursor:pointer; transition:opacity .15s; }
.qa-btn-register:hover { opacity:.88; }
.qa-ask-wrap { margin-bottom:16px; }
.qa-ask-toggle { padding:8px 18px; border-radius:20px; background:#f0f4ff; border:1.5px solid #c8d5f0; color:var(--navy); font-weight:700; font-size:.85rem; cursor:pointer; transition:all .15s; }
.qa-ask-toggle:hover, .qa-ask-toggle-guest:hover { background:#e2eaff; }
.qa-textarea { width:100%; box-sizing:border-box; border:1.5px solid #dde3ec; border-radius:10px; padding:10px 12px; font-size:.88rem; resize:vertical; min-height:80px; margin-top:8px; font-family:inherit; transition:border-color .15s; }
.qa-textarea:focus { outline:none; border-color:var(--orange); }
.qa-ask-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; }
.qa-char-hint { font-size:.72rem; color:#9aa5b4; }
.qa-char-count { font-size:.72rem; font-weight:700; color:#9aa5b4; margin-left:auto; white-space:nowrap; }
.qa-char-count.qa-char-full { color:#c2410c; }
.qa-submit-btn { padding:7px 18px; background:var(--orange); color:#fff; border:none; border-radius:20px; font-size:.8rem; font-weight:700; cursor:pointer; transition:opacity .15s; }
.qa-submit-btn:hover { opacity:.88; }
.qa-list { display:flex; flex-direction:column; gap:0; }
.qa-item { border-bottom:1px solid #e7edf5; }
.qa-item:last-child { border-bottom:none; }
/* Ligne 1 : flèche + question (2 lignes max) */
.qa-q-hd { width:100%; text-align:left; background:none; border:none; padding:10px 0 4px; display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.qa-q-hd:hover { background:#fafbff; }
.qa-q-arrow { font-size:.8rem; color:var(--navy-light); flex-shrink:0; margin-top:3px; transition:color .15s; }
.qa-q-text  {
  flex:1; font-size:.9rem; font-weight:600; color:var(--navy); line-height:1.4; text-align:left;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* Ligne 2 : bouton « Question utile » · méta · (à droite) vues */
.qa-q-meta-row { display:flex; align-items:center; gap:14px; padding:0 14px 10px 26px; }
.qa-q-meta  { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-style:italic; }
.qa-q-author{ font-size:.7rem; color:#6f7a89; }
.qa-q-date  { font-size:.7rem; color:#6f7a89; }
.qa-q-viewstext { font-size:.7rem; color:#6f7a89; white-space:nowrap; }
/* Nombre de réponses : tout à droite, jolie pastille verte cliquable */
.qa-q-count { margin-left:auto; flex-shrink:0; font-family:inherit; font-size:.74rem; font-weight:700; color:#15803d; background:#e7f9ef; border:1px solid #bbf0d0; padding:3px 11px; border-radius:12px; white-space:nowrap; cursor:pointer; transition:background .15s, border-color .15s; }
.qa-q-count:hover { background:#d6f4e3; border-color:#9ae3b9; }
.qa-q-body  { padding:0 0 16px 22px; }
.qa-no-answer { font-size:.82rem; color:#9aa5b4; font-style:italic; margin:0 0 10px; }
.qa-answer  { background:#f9fbfd; border-radius:10px; padding:12px 14px; margin-bottom:8px; border-left:3px solid #e7edf5; }
.qa-ans-body{ font-size:.88rem; line-height:1.6; color:#2d3748; white-space:pre-wrap; }
.qa-ans-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; flex-wrap:wrap; gap:6px; }
.qa-ans-author { font-size:.7rem; color:#9aa5b4; }
/* Like « utile » — pas de dislike ; question en jaune, réponse en vert */
.qa-like-btn { display:inline-flex; align-items:center; gap:5px; background:#fff; border:1px solid #e7edf5; border-radius:20px; padding:3px 11px; font-size:.75rem; font-family:inherit; cursor:pointer; transition:all .15s; color:#4a5568; }
.qa-like-btn:hover { border-color:#c8d5f0; background:#f0f4ff; }
.qa-like-label { font-weight:600; }
.qa-like-count { font-weight:700; min-width:10px; text-align:center; }
/* Réponse utile → vert */
.qa-like-ans.active { background:#e6f9f0; border-color:#86efb0; color:#1a6b45; }
/* Question utile → jaune */
.qa-q-meta-row .qa-like-q { flex-shrink:0; }
.qa-like-q.active { background:#fff8e1; border-color:#fcd34d; color:#92600a; }
.qa-reply-wrap { margin-top:8px; }
.qa-reply-toggle { background:none; border:none; color:var(--orange); font-size:.8rem; font-weight:600; cursor:pointer; padding:0; text-decoration:underline; }
.qa-empty { text-align:center; padding:32px 0; color:#9aa5b4; }
.qa-empty span { font-size:2rem; display:block; margin-bottom:8px; }
.qa-empty p { font-size:.88rem; line-height:1.6; }
/* Auth modal */
.qa-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(4px); z-index:1000; display:none; align-items:center; justify-content:center; padding:16px; }
.qa-modal-overlay.qa-open { display:flex; }
.qa-modal-box { background:#fff; border-radius:16px; width:100%; max-width:420px; padding:28px; position:relative; box-shadow:0 24px 64px rgba(0,0,0,.18); }
.qa-modal-close { position:absolute; top:14px; right:14px; background:none; border:none; font-size:1.1rem; cursor:pointer; color:#9aa5b4; }
.qa-modal-tabs { display:flex; gap:0; border-bottom:2px solid #e7edf5; margin-bottom:20px; }
.qa-modal-tab { flex:1; padding:10px; background:none; border:none; font-size:.88rem; font-weight:700; color:#9aa5b4; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; }
.qa-modal-tab.active { color:var(--navy); border-bottom-color:var(--orange); }
.qa-label { display:flex; flex-direction:column; gap:5px; font-size:.8rem; font-weight:700; color:var(--navy); margin-bottom:12px; }
.qa-input { padding:9px 12px; border:1.5px solid #dde3ec; border-radius:8px; font-size:.88rem; font-family:inherit; transition:border-color .15s; }
.qa-input:focus { outline:none; border-color:var(--orange); }
.qa-modal-submit { width:100%; padding:11px; background:var(--orange); color:#fff; border:none; border-radius:10px; font-size:.9rem; font-weight:700; cursor:pointer; margin-top:4px; transition:opacity .15s; }
.qa-modal-submit:hover { opacity:.88; }
.qa-modal-switch { font-size:.78rem; color:#9aa5b4; text-align:center; margin-top:12px; }
.qa-modal-switch a { color:var(--orange); }

/* Top-engagement cards */
.qa-top-header { font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--orange); margin:20px 0 8px; }
.qa-top-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; margin-bottom:20px; }
.qa-top-card { background:#fffaf5; border:1.5px solid #ffe4c0; border-radius:12px; padding:12px 14px; cursor:pointer; transition:all .15s; }
.qa-top-card:hover { border-color:var(--orange); background:#fff5eb; transform:translateY(-1px); box-shadow:0 4px 12px rgba(255,120,0,.1); }
.qa-top-q { font-size:.82rem; font-weight:600; color:var(--navy); line-height:1.4; margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.qa-top-stats { display:flex; gap:8px; align-items:center; }
.qa-top-stat { font-size:.7rem; color:#9aa5b4; }
.qa-top-eng { font-weight:700; color:var(--orange); }
.qa-top-likes { font-weight:700; color:#b88407; }

/* Google-style pagination */
.qa-pagination { display:flex; align-items:center; justify-content:center; gap:4px; padding:20px 0 8px; flex-wrap:wrap; }
.qa-page { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 6px; border-radius:6px; font-size:.85rem; font-weight:600; text-decoration:none; color:var(--navy); border:1.5px solid #e7edf5; background:#fff; transition:all .15s; }
.qa-page:hover { border-color:var(--orange); color:var(--orange); background:#fff5eb; }
.qa-page-cur { background:var(--orange); color:#fff !important; border-color:var(--orange); cursor:default; }
.qa-page-ellipsis { border:none; background:none; color:#9aa5b4; cursor:default; letter-spacing:.1em; }
.qa-page-nav { font-size:1rem; }

/* Ask form at bottom */
.qa-ask-bottom { margin-top:24px; padding-top:20px; border-top:2px dashed #e7edf5; }
.qa-ask-guest { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 16px; background:#f9fbfd; border-radius:12px; border:1.5px solid #e7edf5; }
.qa-ask-guest p { font-size:.85rem; font-weight:600; color:var(--navy); margin:0; flex:1; }

/* Catégories Q&R — sidebar à droite (même style que les avis) */
.qa-nav-btn { display:flex; align-items:center; gap:8px; width:100%; padding:10px 14px 10px 18px; border:none; border-left:3px solid transparent; background:none; font-family:inherit; text-align:left; cursor:pointer; text-decoration:none; transition:all .18s; }
.qa-nav-btn:hover { background:#eef2f8; }
.qa-nav-btn.active { background:#fff; border-left-color:var(--orange); box-shadow:inset 0 0 0 1px #e7edf5; }
.qa-nav-icon { font-size:.95rem; line-height:1; width:18px; text-align:center; flex-shrink:0; }
.qa-nav-label { font-size:.82rem; font-weight:600; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qa-nav-btn.active .qa-nav-label { color:var(--orange); }
.qa-nav-num { margin-left:auto; font-size:.7rem; color:#8794a3; font-weight:700; flex-shrink:0; }
.qa-nav-btn.active .qa-nav-num { color:var(--orange); }
.qa-nav-util { margin-left:auto; font-size:.7rem; font-weight:500; font-style:italic; color:#8794a3; white-space:nowrap; flex-shrink:0; letter-spacing:.1px; }
.qa-nav-btn.active .qa-nav-util { color:var(--orange); }
.qa-nav-empty { opacity:.45; }
.qa-nav-empty:hover { opacity:.7; }

/* Bandeau « exemples » */
.qa-sample-banner { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.82rem; color:#92600a; background:#fff8e1; border:1px solid #fcd34d; border-radius:10px; padding:10px 14px; margin-bottom:16px; }
.qa-sample-banner strong { font-weight:700; }

/* Pagination client-side — jolie numérotation */
.qa-pager { display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; margin-top:22px; }
.qa-page-btn { min-width:36px; height:36px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #e7edf5; background:#fff; border-radius:9px; font-family:inherit; font-size:.85rem; font-weight:600; color:var(--navy); cursor:pointer; transition:all .15s; }
.qa-page-btn:hover:not(:disabled):not(.active) { border-color:var(--orange); color:var(--orange); background:#fff7f0; }
.qa-page-btn.active { background:var(--orange); border-color:var(--orange); color:#fff; box-shadow:0 2px 8px rgba(243,146,55,.35); }
.qa-page-btn:disabled { opacity:.4; cursor:default; }
.qa-page-nav { font-size:1.1rem; }
.qa-page-gap { padding:0 4px; color:#9aa5b4; font-weight:700; }
/* Stack en une colonne sur petit écran (rubriques sous le contenu) */
@media (max-width:900px) {
  .qa-layout { grid-template-columns:1fr; }
  .qa-layout .rev-right-col { position:static; }
}

.qa-top-cat-icon { font-size:1.1rem; display:block; margin-bottom:4px; }

/* Modération */
.qa-moderation { border:2px dashed #fbbf24; border-radius:12px; padding:0; margin-bottom:20px; background:#fffbeb; }
.qa-mod-summary { padding:12px 16px; cursor:pointer; font-size:.85rem; color:#92400e; list-style:none; display:flex; align-items:center; gap:8px; }
.qa-mod-summary::-webkit-details-marker { display:none; }
.qa-mod-hint { font-size:.75rem; color:#a16207; font-weight:400; }
.qa-mod-list { padding:0 16px 16px; display:flex; flex-direction:column; gap:12px; }
.qa-mod-item { background:#fff; border:1.5px solid #fde68a; border-radius:10px; padding:12px 14px; }
.qa-mod-q { font-size:.88rem; font-weight:600; color:var(--navy); line-height:1.5; margin-bottom:6px; display:flex; gap:8px; align-items:flex-start; }
.qa-mod-cat-badge { font-size:1rem; flex-shrink:0; }
.qa-mod-meta { font-size:.72rem; color:#9aa5b4; margin-bottom:10px; }
.qa-mod-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.qa-mod-btn { padding:5px 14px; border-radius:20px; font-size:.78rem; font-weight:700; cursor:pointer; border:1.5px solid; transition:all .15s; }
.qa-mod-approve { background:#e6f9f0; border-color:#86efb0; color:#1a6b45; }
.qa-mod-approve:hover { background:#dcfce7; }
.qa-mod-improve-toggle { background:#fff; border-color:#c8d5f0; color:var(--navy); }
.qa-mod-improve-toggle:hover { background:#f0f4ff; }
.qa-improve-form { margin-top:8px; width:100%; }
.qa-improve-textarea { margin-top:4px; }

/* Question en attente (own) */
.qa-item-pending { opacity:.85; }
.qa-item-pending .qa-q-hd { background:#fffbeb; }
.qa-pending-badge { font-size:.65rem; background:#fef3c7; color:#92400e; border:1px solid #fde68a; padding:2px 7px; border-radius:10px; font-weight:700; }

/* Catégorie dans le formulaire */
.qa-cat-select { margin-top:4px; width:100%; }

/* FAQ accordion */
.faq-list { border:1px solid #e7edf5; border-radius:14px; overflow:hidden; }
.faq-item { border-bottom:1px solid #e7edf5; }
.faq-item:last-child { border-bottom:none; }
.faq-q { width:100%; text-align:left; background:#fff; border:none; padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:14px; cursor:pointer; font-size:.95rem; font-weight:600; color:var(--navy); transition:background .15s; }
.faq-q:hover, .faq-item.faq-open .faq-q { background:#f5f8fc; }
.faq-item.faq-open .faq-q { color:var(--orange); }
.faq-chevron { width:18px; height:18px; flex-shrink:0; color:var(--navy-light); transition:transform .25s, color .15s; }
.faq-item.faq-open .faq-chevron { transform:rotate(180deg); color:var(--orange); }
.faq-a { padding:4px 20px 18px; background:#f9fbfd; }
.faq-a p { font-size:.88rem; line-height:1.7; color:#4a5568; margin:0; }

/* Leaflet */
.leaflet-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.leaflet-grid-2 { grid-template-columns:repeat(2,1fr); }
.lazy-map { height:340px; border-radius:12px; overflow:hidden; background:#e8eff8; pointer-events:none; }
.leaflet-gmap { border-radius:12px; overflow:hidden; background:#e8eff8; }
.leaflet-gmap-frame { display:block; width:100%; height:260px; border:0; }
.leaflet-sat { margin-top:16px; border-radius:12px; overflow:hidden; background:#e8eff8; }
.leaflet-sat-frame { display:block; width:100%; height:400px; border:0; }

/* Fire risk */
.fire-widget { background:#fff7f0; border:1px solid #fde8d0; border-radius:var(--radius); padding:24px; }
.fire-gauge { background:#eee; border-radius:99px; height:14px; margin-bottom:16px; overflow:hidden; }
.fire-bar { height:100%; border-radius:99px; transition:width .6s ease; }
.fire-level { font-family:'Montserrat',sans-serif; font-size:1.2rem; font-weight:900; display:block; margin-bottom:10px; }
.fire-stats { display:flex; gap:20px; flex-wrap:wrap; font-size:.9rem; color:#555; margin-bottom:12px; }
.fire-note { font-size:.82rem; color:#c0392b; background:rgba(192,57,43,.08); padding:10px 14px; border-radius:6px; margin:0; }

/* ── Diaporama galerie ── */
.pg-slideshow {
  position:relative; width:100%; border-radius:20px; overflow:hidden;
  aspect-ratio:16/7; background:#0b1b2e;
  box-shadow:0 20px 60px rgba(0,43,85,.28);
  border:1px solid rgba(255,255,255,.08);
}
/* Voile dégradé permanent bas (lisibilité légende) */
.pg-slideshow::after {
  content:''; position:absolute; inset:auto 0 0 0; height:42%; z-index:2;
  background:linear-gradient(transparent, rgba(4,12,24,.62)); pointer-events:none;
}
.pg-slide {
  position:absolute; inset:0; opacity:0;
  transition:opacity 1s ease;
  pointer-events:none;
}
.pg-slide.active { opacity:1; pointer-events:auto; }

/* Ken Burns : zoom lent + léger pan sur la slide active */
.pg-slide-img {
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.1);
  transition:transform 7s ease-out;
}
.pg-slide.active .pg-slide-img { transform:scale(1) translate(0,-1%); }

/* Légende — pastille en bas à gauche */
.pg-caption {
  position:absolute; bottom:48px; left:18px; right:64px; z-index:3;
  color:#fff; font-size:.86rem; font-weight:600; letter-spacing:.01em;
  text-align:left; text-shadow:0 1px 6px rgba(0,0,0,.6);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Flèches */
.pg-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.16); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.3); color:#fff;
  width:48px; height:48px; border-radius:50%; font-size:1.7rem; line-height:1;
  cursor:pointer; transition:transform .2s, background .2s; z-index:4;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
}
.pg-arrow:hover { background:rgba(255,255,255,.42); transform:translateY(-50%) scale(1.12); }
.pg-prev { left:16px; }
.pg-next { right:16px; }

/* Bande de miniatures */
.pg-thumbs {
  display:flex; gap:8px; overflow-x:auto; padding:12px 2px 4px; margin-top:10px;
  scrollbar-width:thin; scrollbar-color:rgba(0,43,85,.2) transparent;
}
.pg-thumbs::-webkit-scrollbar { height:5px; }
.pg-thumbs::-webkit-scrollbar-thumb { background:rgba(0,43,85,.2); border-radius:4px; }
.pg-thumb {
  flex-shrink:0; width:88px; height:60px; border-radius:10px; overflow:hidden;
  border:2px solid transparent; cursor:pointer; padding:0;
  opacity:.6; transition:opacity .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.pg-thumb:hover { opacity:1; transform:translateY(-2px); }
.pg-thumb.active {
  opacity:1; border-color:var(--orange); transform:translateY(-2px) scale(1.04);
  box-shadow:0 6px 16px rgba(232,89,12,.35);
}
.pg-thumb img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }

/* Compteur — pastille en verre */
.pg-counter {
  position:absolute; top:16px; right:18px; z-index:4;
  background:rgba(8,20,38,.5); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18);
  color:#fff; font-size:.74rem; font-weight:700; border-radius:20px; padding:4px 12px;
}

/* Barre de progression */
.pg-progress {
  position:absolute; bottom:0; left:0; right:0; height:4px; z-index:5;
  background:rgba(255,255,255,.14);
}
.pg-progress-bar {
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--orange), #ffb066);
  box-shadow:0 0 10px rgba(232,89,12,.6);
}

@media (max-width:640px) {
  .pg-slideshow { aspect-ratio:4/3; border-radius:14px; }
  .pg-arrow { width:38px; height:38px; font-size:1.35rem; }
  .pg-caption { bottom:42px; left:12px; right:54px; font-size:.78rem; }
  .pg-thumb { width:72px; height:50px; }
}

/* Destination content layout */
.dest-content { display:grid; grid-template-columns:1fr 360px; gap:48px; align-items:start; }
.dest-body h2 { font-size:1.8rem; }
.dest-body .lead { font-size:1.2rem; color:var(--navy-light); }
.dest-sidebar { position:sticky; top:90px; display:flex; flex-direction:column; gap:16px; }
.sidebar-card { background:#f7f9fc; border:1px solid #e7edf5; border-radius:var(--radius); padding:18px; }
.sidebar-card h4 { font-size:.9rem; text-transform:uppercase; letter-spacing:.04em; margin:0 0 8px; color:var(--navy); }
.sidebar-card p, .sidebar-card code { font-size:.9rem; color:#51606f; margin:0; word-break:break-all; }
.sidebar-link { display:inline-block; margin-top:8px; font-size:.85rem; color:var(--orange); }
.seo-box .focus-kw { color:var(--navy-light); font-style:italic; }

/* ── YouTube widget ────────────────────────────────────────────────────────── */

/* Lecteur — slide down au clic, pleine largeur */
.yt-player-area {
  position: relative;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .5s ease, opacity .38s ease, margin .5s ease;
  margin: 0;
  background: #000;
  /* Étire jusqu'aux bords de la fenêtre, peu importe le container parent */
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}
.yt-player-area.active {
  max-height: 900px;
  opacity: 1;
  padding: 32px 0 18px;
  margin-bottom: 26px;
}

/* Ambilight — halos de couleur projetés autour de la vidéo */
.yt-glow-bg {
  position: absolute;
  inset: -25%;
  background-size: cover;
  background-position: center;
  filter: blur(38px) saturate(3) brightness(.65);
  opacity: 1;
  pointer-events: none;
  transition: background-image .5s ease, filter .5s ease;
  z-index: 0;
}
.yt-player-wrap { position: relative; z-index: 1; }

/* Zone vidéo 16:9 — non-cliquable, vidéo entière sans bandes */
.yt-player-wrap {
  position:relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio:16/9;
  max-height:540px;
  margin:0 auto;
  pointer-events:none;
  background:#000; border-radius:10px; overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,.6);
}
.yt-player-wrap > div,
.yt-player-wrap > iframe {
  position:absolute; top:50%; left:50%;
  width:100%; height:100%; border:none;
  /* Agrandissement 120% + recadrage : élimine les bandes noires de la vidéo */
  transform:translate(-50%,-50%) scale(1.2);
  transform-origin:center center;
}
.yt-player-wrap > div iframe {
  width:100%; height:100%; border:none; display:block;
}

/* Barre info — proportionnelle au post (container du site) */
.yt-under-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0 2px;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
/* Titre — rectangle noir arrondi, texte gris foncé */
.yt-playing-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #ffffff;
  background: rgba(0,0,0,.55);
  border-radius: 6px;
  padding: 5px 12px;
  line-height: 1.4;
  flex: 1;
  min-width: 0;
  backdrop-filter: blur(4px);
}
/* Droite : chaîne + lien */
.yt-under-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}
.yt-under-channel {
  font-size: .82rem;
  color: #9aa5b4;
  font-weight: 500;
}
.yt-yt-link {
  font-size: .82rem;
  color: #9aa5b4;
  white-space: nowrap;
  transition: color .2s;
}
.yt-yt-link:hover { color: #fff; text-decoration: underline; }

/* Carrousel 2 lignes */
.yt-widget-section .widget-header { margin-bottom:10px; }
.yt-carousel { padding:0; width:100%; box-sizing:border-box; display:flex; flex-direction:column; gap:10px; margin-top:0; transition:opacity .3s; }
.yt-crow { overflow:hidden; width:100%; }
.yt-crow-inner { display:flex; gap:16px; }
.yt-crow .yt-card { flex:0 0 var(--yt-cw, 240px); }

/* Effet approche au clic */
@keyframes ytCardZoom {
  0%   { transform:scale(1); }
  45%  { transform:scale(1.07); box-shadow:0 10px 32px rgba(255,128,0,.3); }
  100% { transform:scale(1); }
}
.yt-card.yt-zoom { animation:ytCardZoom .38s ease forwards; }

.yt-card {
  cursor:pointer; border-radius:10px; overflow:hidden;
  border:2px solid transparent; transition:border-color .2s, box-shadow .2s, transform .2s;
  background:#f7f9fc;
}
.yt-card:hover { border-color:var(--orange); transform:translateY(-3px); box-shadow:0 6px 20px rgba(255,128,0,.22); }
.yt-card.active { border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,128,0,.15); transform:translateY(-1px); }

.yt-thumb { position:relative; aspect-ratio:16/9; overflow:hidden; background:#e0eaf5; }
.yt-thumb-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s; }
.yt-card:hover .yt-thumb-img { transform:scale(1.06); }

.yt-play-icon {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.22); opacity:0; transition:opacity .2s;
}
.yt-card:hover .yt-play-icon,
.yt-card.active .yt-play-icon { opacity:1; }
.yt-play-icon svg { width:40px; height:28px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); }

.yt-duration {
  position:absolute; bottom:5px; right:5px;
  background:rgba(0,0,0,.82); color:#fff;
  font-size:.66rem; padding:2px 5px; border-radius:3px; font-weight:700; letter-spacing:.02em;
}

.yt-card-info { padding:9px 11px 11px; }
.yt-card-title {
  font-size:.78rem; font-weight:700; color:#3b82f6; line-height:1.35;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.yt-card-channel { font-size:.69rem; color:#374151; font-weight:600; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Boutons rubriques sous les vignettes YouTube */
.yt-cat-bar { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:18px 20px 4px; }
.yt-cat-btn { font-family:inherit; cursor:pointer; border:1px solid #d0dae8; background:var(--bg-soft); color:var(--navy); padding:8px 18px; border-radius:22px; font-size:.84rem; font-weight:600; transition:all .18s; }
.yt-cat-btn:hover { background:#e8eff8; border-color:#b9c8dc; }
.yt-cat-btn.active { background:var(--navy); color:#fff; border-color:var(--navy); }
.yt-cat-btn.yt-cat-loading { opacity:.6; cursor:progress; }
.yt-cat-msg { text-align:center; color:#8794a3; font-size:.86rem; padding:18px 20px; }

/* Bouton voir plus de vidéos */
.yt-more-wrap { display:flex; justify-content:center; margin-top:22px; }
.yt-more-btn {
  font-family:inherit; cursor:pointer; border:none; border-radius:50px;
  background:linear-gradient(135deg,#e8590c 0%,#c0392b 100%);
  color:#fff; padding:14px 28px; font-size:.9rem; font-weight:700;
  display:flex; align-items:center; gap:10px;
  box-shadow:0 6px 20px rgba(232,89,12,.35); transition:transform .2s, box-shadow .2s;
}
.yt-more-btn:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(232,89,12,.45); }
.yt-more-ico { font-size:1.1rem; background:rgba(255,255,255,.2); border-radius:50%; width:28px; height:28px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.yt-more-txt { line-height:1.25; }
.yt-more-badge { background:rgba(255,255,255,.25); border-radius:20px; padding:2px 10px; font-size:.75rem; font-weight:800; white-space:nowrap; flex-shrink:0; }

.yt-empty { padding:24px 0; }
.yt-search-btn { display:inline-block; background:var(--bg-soft); border:1px solid #d0dae8; color:var(--navy); padding:9px 20px; border-radius:20px; font-size:.84rem; font-weight:600; transition:all .18s; }
.yt-search-btn:hover { background:var(--navy); color:#fff; text-decoration:none; }

/* ── Avis voyageurs — section plein-largeur ──────────────────────────────── */

.rev-section { padding:0; }

/* ── Thème gris clair avec effet ── */
.rev-dark {
  background: linear-gradient(160deg, #f0f4f8 0%, #e8eef6 100%);
  border-radius: 20px;
  padding: 36px 32px;
  margin-top: 8px;
  box-shadow: 0 8px 40px rgba(0,43,85,.10), 0 2px 8px rgba(0,43,85,.06);
  border-top: 4px solid var(--orange);
  position: relative;
}
.rev-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,128,0,.04) 0%, transparent 60%);
  pointer-events: none;
}
/* Cards */
.rev-dark .rev-card {
  background: #fff;
  border-color: #dde5f0;
  box-shadow: 0 2px 12px rgba(0,43,85,.06);
}
.rev-dark .rev-card:hover {
  border-color: var(--orange);
  box-shadow: 0 6px 24px rgba(255,128,0,.12);
  transform: translateY(-2px);
  transition: all .2s;
}
/* Avg row */
.rev-dark .rev-avg-row  { background:#fff; border-color:#dde5f0; box-shadow:0 2px 8px rgba(0,43,85,.05); }
.rev-dark .rev-avg-label{ color:var(--navy); font-weight:700; }
/* Nav droite */
.rev-dark .rev-nav { background:#fff; border-color:#dde5f0; box-shadow:0 2px 12px rgba(0,43,85,.06); }
.rev-dark .rev-nav-btn { border-color:#dde5f0; color:#5a6a7e; }
.rev-dark .rev-nav-btn:hover { background:#f5f8fc; }
.rev-dark .rev-nav-btn.active { background:#fff8f0; border-left-color:var(--orange); color:var(--navy); box-shadow:0 2px 8px rgba(255,128,0,.10); }
.rev-dark .rev-nav-avg { color:var(--orange); font-weight:700; }
/* Filtres */
.rev-dark .rev-filters { background:#fff; border-color:#dde5f0; box-shadow:0 2px 12px rgba(0,43,85,.06); }
.rev-dark .rev-filter-item input { accent-color:var(--orange); }
.rev-dark .rev-filter-group-profile { border-top-color:#dde5f0; }
/* Vote */
.rev-dark .rev-vote { background:#f7f9fc; border-color:#dde5f0; }
.rev-dark .rev-like.active    { background:#e8f4fd; border-color:#1a6fa8; color:#1a6fa8; }
.rev-dark .rev-dislike.active { background:#fde8e8; border-color:#c0392b; color:#c0392b; }
/* Lock */
.rev-dark .rev-lock { background:#fff8f0; border-color:var(--orange); }

.rev-layout {
  display:grid;
  grid-template-columns:1fr 280px;
  gap:32px;
  align-items:start;
}
/* Q&R : sidebar rubriques (taille intermédiaire) */
.qa-layout { grid-template-columns:1fr 350px; }

/* ── Gauche : panneau actif ── */
.rev-main { min-width:0; }

.rev-panel { display:none; flex-direction:column; gap:16px; }
.rev-panel.active { display:flex; }

.rev-panel-head {
  display:flex; align-items:flex-start; gap:14px;
  padding-bottom:16px; border-bottom:2px solid #e7edf5;
}
.rev-panel-icon { font-size:2rem; line-height:1; flex-shrink:0; margin-top:2px; }
.rev-panel-head-text { flex:1; min-width:0; }
.rev-panel-head h3 { font-size:1.25rem; font-weight:700; color:var(--navy); margin:0 0 4px; line-height:1.3; }
.rev-panel-head p  { font-size:.85rem; color:#8794a3; margin:0; line-height:1.5; }

.rev-avg-top { border-top:none; border-bottom:1px solid #e7edf5; padding-bottom:12px; }

.rev-list { display:flex; flex-direction:column; gap:12px; }

.rev-card {
  background:#f7f9fc; border:1px solid #e7edf5; border-radius:10px;
  padding:14px 16px; transition:border-color .18s, box-shadow .18s;
}
.rev-card:hover { border-color:#cdd5e0; box-shadow:0 3px 12px rgba(0,43,85,.06); }
.rev-card-hd { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.rev-card-hd-right { display:flex; flex-direction:column; align-items:flex-end; gap:2px; margin-left:auto; }
.rev-date { font-size:.7rem; color:#9aa5b4; white-space:nowrap; }
.rev-flag { font-size:1rem; line-height:1; flex-shrink:0; }

.rev-av {
  width:36px; height:36px; border-radius:50%;
  background:#f0f4f8; border:1px solid #e7edf5;
  font-size:1.3rem; line-height:1;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.rev-author    { font-size:.82rem; font-weight:700; color:var(--navy); flex:1; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.rev-profile   { font-size:.65rem; font-weight:700; padding:2px 7px; border-radius:10px; letter-spacing:.02em; white-space:nowrap; }
.rev-profile-voyageur   { background:#e8f4fd; color:#1a6fa8; }
.rev-profile-originaire { background:#e8f8ef; color:#1a7a45; }
.rev-stars-row { display:flex; gap:1px; flex-shrink:0; }
.rev-star      { font-size:.8rem; line-height:1; }
.rev-star.on   { color:var(--orange); }
.rev-star.off  { color:#d0dae8; }
.rev-body      { font-size:.84rem; color:#4a5568; line-height:1.55; margin:0; }

.rev-avg-row {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:12px 16px; background:#fff; border:1px solid #e7edf5;
  border-radius:8px;
}
.rev-avg-label  { font-size:.8rem; color:#8794a3; font-weight:600; }
.rev-avg-stars  { display:flex; gap:1px; }
.rev-avg-num    { font-size:.9rem; font-weight:700; color:var(--navy); }
.rev-avg-count  { font-size:.76rem; color:#8794a3; }

.rev-lock {
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(135deg, #f0f4f8, #e8eef8);
  border:1px solid #d8e2f0; border-radius:10px; padding:14px 18px;
}
.rev-lock-ico { font-size:1.4rem; flex-shrink:0; }
.rev-lock p   { font-size:.82rem; color:#51606f; margin:0 0 6px; }
.rev-lock-cta {
  display:inline-block; background:var(--orange); color:#fff !important;
  padding:7px 18px; border-radius:20px; font-size:.78rem; font-weight:700;
  text-decoration:none !important; transition:background .18s;
}
.rev-lock-cta:hover { background:var(--orange-dark); }

.rev-empty { font-size:.84rem; color:#8794a3; font-style:italic; margin:0; }

.rev-actions {
  display:flex; align-items:center; gap:8px; margin-top:10px;
  padding-top:8px; border-top:1px solid #f0f4f8;
}
.rev-vote {
  display:flex; align-items:center; gap:4px;
  background:none; border:1px solid #e7edf5; border-radius:20px;
  padding:4px 10px; cursor:pointer; font-size:.76rem;
  color:#8794a3; font-family:inherit; transition:all .18s;
}
.rev-vote:hover { border-color:#cdd5e0; color:var(--navy); background:#f7f9fc; }
.rev-like.active    { background:#e8f4fd; border-color:#1a6fa8; color:#1a6fa8; }
.rev-dislike.active { background:#fde8e8; border-color:#c0392b; color:#c0392b; }
.rev-vote-count { font-weight:700; }
.rev-pertinence-hint { font-size:.68rem; color:#b0bcc8; margin-left:4px; }
/* ── Carte pub ── */
.rev-ad-card { background:repeating-linear-gradient(45deg,#fffdf8,#fffdf8 10px,#fff8ee 10px,#fff8ee 20px); border:1.5px dashed #f0b060; cursor:default; }
.rev-ad-card:hover { border-color:var(--orange); box-shadow:0 4px 16px rgba(255,128,0,.12); }
.rev-ad-inner { display:flex; flex-direction:column; gap:12px; padding:4px 0; }
.rev-ad-label { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#c8a060; }
.rev-ad-content { display:flex; align-items:center; gap:14px; }
.rev-ad-icon { font-size:2rem; line-height:1; flex-shrink:0; }
.rev-ad-title { font-size:1.05rem; font-weight:700; color:var(--navy); margin:0 0 4px; }
.rev-ad-sub { font-size:.8rem; color:#8794a3; margin:0; line-height:1.4; }
.rev-ad-cta { display:inline-block; align-self:flex-start; background:var(--orange); color:#fff; font-size:.78rem; font-weight:700; padding:7px 16px; border-radius:20px; text-decoration:none; transition:background .18s; }
.rev-ad-cta:hover { background:var(--orange-dark); text-decoration:none; }
/* ── Slot AdSense dans la liste ── */
.rev-adsense-slot { position:relative; border:1px solid #e7edf5; border-radius:12px; padding:12px 16px 8px; background:#fafbfc; min-height:100px; display:flex; flex-direction:column; gap:6px; }
.rev-adsense-label { font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#c0c8d4; }
.rev-adsense-ins { display:block; width:100%; min-height:80px; }
.rev-insta { display:inline-flex; align-items:center; gap:4px; margin-left:auto; font-size:.72rem; font-weight:600; color:#c13584; text-decoration:none; border:1px solid #f0d0e0; border-radius:20px; padding:3px 10px; transition:all .18s; white-space:nowrap; }
.rev-insta:hover { background:#fdf0f6; border-color:#c13584; text-decoration:none; }
.rev-insta-ico { width:13px; height:13px; flex-shrink:0; }
.rev-insta-locked { color:#9aa5b4; border-color:#dde3ec; font-style:italic; }
.rev-insta-locked:hover { background:#f5f7fa; border-color:#b0bac8; color:#6b7a8d; }

/* ── Droite : colonne nav + filtres ── */
.rev-right-col {
  display:flex; flex-direction:column; gap:16px;
  position:static; align-self:start;
}
.rev-nav {
  background:#f7f9fc; border:1px solid #e7edf5; border-radius:12px;
  padding:18px 0; overflow:hidden;
}

/* Bannière publicité (gauche, format large) */
.qa-ad-banner {
  width:100%; min-height:110px; margin:14px 0 18px;
  display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(45deg,#f3f6fb,#f3f6fb 12px,#eef2f8 12px,#eef2f8 24px);
  border:1px dashed #cdd8e8; border-radius:12px;
  color:#aeb9c8; font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}

/* Bannière publicité (carré, sidebar) */
.qa-ad-box {
  aspect-ratio:1/1; width:100%;
  display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(45deg,#f3f6fb,#f3f6fb 12px,#eef2f8 12px,#eef2f8 24px);
  border:1px dashed #cdd8e8; border-radius:12px;
  color:#aeb9c8; font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}

/* Top contributeurs */
.qa-contrib-card { background:#f7f9fc; border:1px solid #e7edf5; border-radius:12px; padding:16px; }
.qa-contrib-title { margin:0 0 10px; font-size:.9rem; font-weight:800; color:var(--navy); }
.qa-contrib-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:9px 0; border-top:1px solid #e7edf5; }
.qa-contrib-row:first-of-type { border-top:none; padding-top:0; }
.qa-contrib-name { font-size:.84rem; font-weight:700; color:var(--navy); }
.qa-contrib-count { font-weight:600; color:#8794a3; font-size:.78rem; }
.qa-contrib-social { font-size:.78rem; font-weight:700; color:var(--orange); white-space:nowrap; }
.qa-contrib-social:hover { text-decoration:underline; }

/* Filtres */
.rev-filters {
  background:#f7f9fc; border:1px solid #e7edf5; border-radius:12px;
  padding:14px 16px; display:flex; flex-direction:column; gap:12px;
}
.rev-filters-title {
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:#8794a3; margin:0;
}
.rev-filter-group { display:flex; flex-direction:column; gap:5px; }
.rev-filter-group-profile { border-top:1px solid #e7edf5; padding-top:10px; margin-top:4px; }
.rev-filter-glabel {
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:#b0bcc8; margin:0 0 3px;
}
.rev-filter-item {
  display:flex; align-items:center; gap:8px; cursor:pointer;
  padding:5px 6px; border-radius:6px; transition:background .15s;
}
.rev-filter-item:hover { background:#eef2f8; }
.rev-filter-item input { cursor:pointer; accent-color:var(--orange); width:14px; height:14px; flex-shrink:0; }
.rev-filter-item span { font-size:.78rem; color:var(--navy); font-weight:500; }
.rev-nav-title {
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:#8794a3; margin:0 0 8px; padding:0 18px;
}
.rev-nav-btn {
  display:grid;
  grid-template-columns:1fr 118px;
  align-items:center;
  width:100%; padding:10px 14px 10px 18px; background:none; border:none;
  border-left:3px solid transparent; cursor:pointer; transition:all .18s;
  font-family:inherit; text-align:left; gap:6px;
}
.rev-nav-btn:hover   { background:#eef2f8; }
.rev-nav-btn.active  { background:#fff; border-left-color:var(--orange); box-shadow:inset 0 0 0 1px #e7edf5; }

.rev-nav-left  { display:flex; align-items:center; gap:8px; min-width:0; }
.rev-nav-icon  { font-size:.95rem; line-height:1; width:18px; text-align:center; flex-shrink:0; }
.rev-nav-label { font-size:.82rem; font-weight:600; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rev-nav-btn.active .rev-nav-label { color:var(--orange); }

.rev-nav-right  { display:flex; align-items:center; gap:3px; justify-content:flex-end; }
.rev-nav-stars  { display:flex; gap:0; flex-shrink:0; }
.rev-nav-stars .rev-star { font-size:.65rem; }
.rev-nav-avg    { font-size:.72rem; font-weight:700; color:var(--navy); width:26px; text-align:right; }
.rev-nav-count  { font-size:.65rem; color:#8794a3; width:24px; text-align:right; }

/* Responsive widgets */
@media (max-width: 900px) {
  .forecast-grid { grid-template-columns:repeat(4,1fr); }
  .forecast-day:nth-child(n+5) { display:none; }
  .leaflet-grid { grid-template-columns:1fr; }
  .dest-content { grid-template-columns:1fr; }
  .dest-sidebar { position:static; }
  .yt-carousel { padding:0; }
  .yt-player-area.active { max-height:500px; }
}
@media (max-width: 640px) {
  .qi-grid { grid-template-columns:1fr 1fr; }
  .pexels-gallery { grid-template-columns:repeat(2,1fr); }
  .forecast-grid { grid-template-columns:repeat(3,1fr); }
  .forecast-day:nth-child(n+4) { display:none; }
  .youtube-inner { padding-top:70%; }
  .youtube-inner iframe { transform:scale(1.8); }
  .yt-carousel { padding:0; gap:10px; }
  .yt-card-title { font-size:.73rem; }
  .yt-player-area.active { max-height:350px; }
  .yt-under-bar { flex-direction:column; align-items:flex-start; }
  .yt-under-right { align-items:flex-start; flex-direction:row; gap:10px; }
}

/* ── Hydratation AJAX des widgets (assets/js/hydrate.js) ──────────────────── */
.widget-async { position: relative; }
.widget-skeleton {
  position: absolute; inset: 0;
  border-radius: 14px;
  background: linear-gradient(100deg, #eef1f4 30%, #f6f8fa 50%, #eef1f4 70%);
  background-size: 200% 100%;
  animation: widgetShimmer 1.2s ease-in-out infinite;
}
@keyframes widgetShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.widget-ready { min-height: 0 !important; }
.widget-ready .widget-skeleton { display: none; }
@media (prefers-reduced-motion: reduce) { .widget-skeleton { animation: none; } }