/* ============================================================
   NOSY VANONA TOURS — couche de marque (Serenity by Simafri)
   Base : Bootstrap 5 (CDN) + couche tour-opérateur Serenity.
   Dérivé du starter simafri-client-starter ; étendu pour :
   tour-opérateur, multilingue, galeries, timeline d'itinéraire.

   PALETTE CLIENT — la seule chose à changer pour un autre site.
   Identité : lagon de Nosy Be (turquoise/teal) + coucher de soleil
   (corail) + sable. Pas de logo fourni → wordmark typographique.
   ============================================================ */

:root {
  /* ↓↓↓ PALETTE CLIENT ↓↓↓ */
  --brand-primary: #0E4D5C;   /* teal lagon profond (nav, fonds sombres, titres) */
  --brand-accent:  #FF6A3D;   /* corail coucher de soleil (CTA, prix, accents) */
  --brand-grey:    #5C6770;   /* gris secondaire (texte d'appui) */
  /* ↑↑↑ ------------------ ↑↑↑ */

  --brand-turquoise: #1FA9A0;  /* turquoise vif (liens, surlignages) */
  --brand-sand:      #F7F2E9;  /* sable clair (sections alternées) */
  --brand-primary-dark: color-mix(in srgb, var(--brand-primary) 78%, black);
  --brand-accent-dark:  color-mix(in srgb, var(--brand-accent) 84%, black);

  --shadow-card: 0 .5rem 1.5rem rgba(14, 77, 92, .10);
  --shadow-card-hover: 0 1rem 2.5rem rgba(14, 77, 92, .18);
}

html { scroll-behavior: smooth; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  color: #243239;
}
h1, h2, h3, h4, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: "Georgia", "Times New Roman", serif;
  letter-spacing: -.01em;
}

/* ---- Utilitaires marque ---- */
.bg-brand        { background-color: var(--brand-primary) !important; }
.bg-brand-dark   { background-color: var(--brand-primary-dark) !important; }
.text-brand      { color: var(--brand-primary) !important; }
.text-accent     { color: var(--brand-accent) !important; }
.text-turquoise  { color: var(--brand-turquoise) !important; }
.bg-soft         { background-color: var(--brand-sand) !important; }
.bg-turquoise    { background-color: var(--brand-turquoise) !important; }

/* ---- Navigation ---- */
.navbar-brand { letter-spacing: .02em; font-family: "Georgia", serif; }
.navbar-brand .brand-mark { color: var(--brand-accent); }
/* Logo client clippé en cercle (masque les coins noirs du PNG). S'auto-retire si le fichier manque (onerror). */
.brand-logo { height: 42px; width: 42px; border-radius: 50%; object-fit: cover; vertical-align: middle; background:#000; }
.navbar.scrolled { box-shadow: 0 .25rem 1rem rgba(0,0,0,.15); }
.nav-link { font-weight: 500; }
.navbar-dark .nav-link:hover, .navbar-dark .nav-link.active { color: #fff; }
.navbar-dark .nav-link.active { border-bottom: 2px solid var(--brand-accent); }

/* Sélecteur de langue */
.lang-switch .dropdown-menu { min-width: 8rem; }
.lang-switch .dropdown-item.active,
.lang-switch .dropdown-item:active { background-color: var(--brand-turquoise); }
.lang-current { text-transform: uppercase; font-weight: 600; letter-spacing: .06em; }

/* ---- Boutons ---- */
.btn-accent {
  background-color: var(--brand-accent); border-color: var(--brand-accent); color: #fff; font-weight: 600;
}
.btn-accent:hover, .btn-accent:focus { background-color: var(--brand-accent-dark); border-color: var(--brand-accent-dark); color: #fff; }
.btn-outline-on-dark { border: 1px solid rgba(255,255,255,.7); color: #fff; font-weight: 600; }
.btn-outline-on-dark:hover { background:#fff; color: var(--brand-primary); }
.btn-whatsapp { background-color:#25D366; border-color:#25D366; color:#fff; font-weight:600; }
.btn-whatsapp:hover, .btn-whatsapp:focus { background-color:#1da851; border-color:#1da851; color:#fff; }

/* ---- HERO ---- */
.hero {
  position: relative;
  background:
    linear-gradient(160deg, rgba(14,77,92,.92) 0%, rgba(31,169,160,.78) 60%, rgba(255,106,61,.55) 130%),
    var(--brand-primary);
  color:#fff;
  overflow:hidden;
}
.hero--photo {
  background:
    linear-gradient(160deg, rgba(14,77,92,.86) 0%, rgba(14,77,92,.55) 100%),
    var(--hero-img, none) center/cover no-repeat,
    var(--brand-primary);
}
.hero__inner { padding: 6rem 0; }
.hero h1 { text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.hero .hero-eyebrow {
  text-transform: uppercase; letter-spacing: .18em; font-weight: 600;
  font-size: .8rem; color: rgba(255,255,255,.85); font-family: system-ui, sans-serif;
}
.wave-divider { display:block; line-height:0; }
.wave-divider svg { width:100%; height:48px; }

/* ---- Cartes prestations (tour cards) ---- */
.tour-card {
  border:0; border-radius:1rem; overflow:hidden; height:100%;
  box-shadow: var(--shadow-card); transition: transform .25s ease, box-shadow .25s ease;
  background:#fff;
}
.tour-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.tour-card__media { position:relative; aspect-ratio: 4/3; overflow:hidden; }
.tour-card__media img { width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.tour-card:hover .tour-card__media img { transform: scale(1.05); }
.tour-card__badge {
  position:absolute; top:.75rem; left:.75rem; z-index:2;
  background: var(--brand-accent); color:#fff; font-weight:600; font-size:.78rem;
  padding:.3rem .6rem; border-radius:.5rem; box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.tour-card__price {
  position:absolute; bottom:.75rem; right:.75rem; z-index:2;
  background: rgba(255,255,255,.95); color: var(--brand-primary); font-weight:700;
  padding:.3rem .65rem; border-radius:.5rem; font-size:.95rem;
}
.tour-card__body { padding:1.25rem; }
.tour-card__body h3 { font-size:1.2rem; }
.tour-card__meta { font-size:.85rem; color:var(--brand-grey); }
.tour-card__meta i { color: var(--brand-turquoise); }

/* ---- Liste d'inclusions ---- */
.includes-list { list-style:none; padding:0; margin:0; }
.includes-list li { padding:.35rem 0 .35rem 1.9rem; position:relative; }
.includes-list li::before {
  content:"\F26E"; font-family:"bootstrap-icons"; position:absolute; left:0; top:.3rem;
  color: var(--brand-turquoise); font-size:1.1rem;
}
.excludes-list { list-style:none; padding:0; margin:0; }
.excludes-list li { padding:.35rem 0 .35rem 1.9rem; position:relative; color:var(--brand-grey); }
.excludes-list li::before {
  content:"\F62A"; font-family:"bootstrap-icons"; position:absolute; left:0; top:.3rem;
  color:#c0392b; font-size:1.05rem;
}

/* ---- Timeline d'itinéraire (circuits jour par jour) ---- */
.itinerary { position:relative; padding-left:2.5rem; }
.itinerary::before {
  content:""; position:absolute; left:.85rem; top:.4rem; bottom:.4rem; width:2px;
  background: linear-gradient(var(--brand-turquoise), var(--brand-accent));
}
.itinerary__day { position:relative; padding-bottom:1.75rem; }
.itinerary__day:last-child { padding-bottom:0; }
.itinerary__num {
  position:absolute; left:-2.5rem; top:0; width:1.75rem; height:1.75rem;
  background:var(--brand-primary); color:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700;
  font-family: system-ui, sans-serif; box-shadow:0 0 0 4px var(--brand-sand);
}
.itinerary__title { font-size:1.05rem; color:var(--brand-primary); margin-bottom:.25rem; }
.itinerary__route {
  display:inline-block; font-size:.8rem; font-weight:600; color:var(--brand-turquoise);
  background: rgba(31,169,160,.1); padding:.1rem .5rem; border-radius:.4rem; margin-bottom:.4rem;
}

/* ---- Galerie photos ---- */
.gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:.5rem; }
.gallery a { display:block; aspect-ratio:1; overflow:hidden; border-radius:.5rem; }
.gallery img { width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.gallery a:hover img { transform:scale(1.08); }

/* ---- Section "pourquoi nous" / features ---- */
.feature {
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.6rem; height:3.5rem; width:3.5rem; border-radius:.9rem;
  background: var(--brand-turquoise); color:#fff;
}

/* ---- Bandeau de réassurance ---- */
.trust-band { background:var(--brand-primary-dark); color:#fff; }
.trust-band .trust-item { font-size:.9rem; }
.trust-band .trust-item i { color: var(--brand-accent); font-size:1.4rem; }

/* ---- Bouton WhatsApp flottant ---- */
.wa-float {
  position:fixed; bottom:1.25rem; right:1.25rem; z-index:1050;
  background:#25D366; color:#fff; width:3.5rem; height:3.5rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.8rem;
  box-shadow:0 .4rem 1rem rgba(0,0,0,.3); transition:transform .2s ease;
}
.wa-float:hover { transform:scale(1.08); color:#fff; }

/* ---- Footer ---- */
footer a { text-decoration:none; }
footer a:hover { text-decoration:underline; }

/* ---- Divers ---- */
.section { padding:4.5rem 0; }
.section-eyebrow {
  text-transform:uppercase; letter-spacing:.14em; font-weight:600; font-size:.8rem;
  color:var(--brand-accent); font-family:system-ui, sans-serif;
}
.lead-serif { font-family:"Georgia", serif; }
a { color: var(--brand-turquoise); }
a:hover { color: var(--brand-primary); }

/* ---- Vidéos (lecture facade : iframe chargée au clic, perf préservée) ---- */
.video-embed { border-radius:1rem; overflow:hidden; box-shadow: var(--shadow-card); background:#000; }
.video-facade {
  border:0; padding:0; cursor:pointer; width:100%; height:100%;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  display:flex; align-items:center; justify-content:center;
  /* PAS de position:relative ici : laisser Bootstrap `.ratio > *` poser position:absolute + height:100%
     (sinon le bouton retombe à la hauteur du contenu et le fond noir apparaît au-dessus). */
}
.video-facade::after { content:""; position:absolute; inset:0; background:rgba(14,77,92,.30); transition:background .2s ease; }
.video-facade:hover::after { background:rgba(14,77,92,.08); }
.video-facade__play {
  position:relative; z-index:1; width:4rem; height:4rem; border-radius:50%;
  background:var(--brand-accent); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; box-shadow:0 .3rem 1rem rgba(0,0,0,.35); transition:transform .2s ease;
}
.video-facade:hover .video-facade__play { transform:scale(1.08); }
.video-embed iframe { width:100%; height:100%; border:0; }
.video-title { font-size:.95rem; }

.lang-flag { font-size:1.15rem; line-height:1; vertical-align:middle; }

.lang-flag-img { height:.95em; width:1.4em; object-fit:cover; border-radius:2px; vertical-align:-.12em; box-shadow:0 0 0 1px rgba(0,0,0,.2); }