/* =========================================================================
   POLICES — GOOGLE FONTS
   Script cursive en accent (titres d'excursions, citations, "Comores" du
   logo) + sans-serif bold en structure (prix, CTA, navigation) — lisible
   en plein soleil sur mobile, conforme à direction-design-....md section 0.
========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&family=Poppins:wght@400;500;600;700;800&display=swap');

/* =========================================================================
   RESET MINIMAL
   Base neutre avant d'appliquer la charte : pas de marges par défaut du
   navigateur, box-sizing prévisible, images fluides.
========================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1, h2, h3,
p, ul, figure {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

/* =========================================================================
   VARIABLES DE MARQUE
   Palette extraite du vrai logo Comoresaventure (rouge / orange / or /
   blanc, fond ivoire, structure noir-brun) — direction-design-....md,
   sections 0 à 3. Une seule palette, utilisée à des endroits différents
   de son spectre selon la section (or = Comoresaventure, rouge/orange =
   James 2.6.9 Agency).
========================================================================= */
:root {
  /* Couleurs de marque */
  --color-red: #E8402A;
  --color-orange: #F0722A;
  --color-gold: #F5A623;
  --color-white: #FFFFFF;
  --color-ivory: #FFF6EC;
  --color-dark: #221A15;

  /* Texte */
  --text-on-light: var(--color-dark);
  --text-on-dark: var(--color-ivory);

  /* Typographie */
  --font-script: 'Dancing Script', cursive;
  --font-sans: 'Poppins', sans-serif;

  /* Ombres et rayons — cartes Comoresaventure : coins doux, ombre légère */
  --radius-soft: 22px;
  --radius-pill: 999px;
  --shadow-card: 0 14px 30px -16px rgba(34, 26, 21, 0.35);
  --shadow-card-hover: 0 18px 34px -14px rgba(34, 26, 21, 0.45);

  /* Rythme / conteneur */
  --container-max: 1200px;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 2.75rem;
  --space-xl: 4.5rem;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-ivory);
  color: var(--text-on-light);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--font-script);
  line-height: 1.15;
}

/* Accessibilité clavier : anneau de focus visible partout, quel que soit
   le fond (clair ou foncé). */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-orange);
  outline-offset: 3px;
}

/* =========================================================================
   UTILITAIRES PARTAGÉS
   Conteneur centré, motif rayé du logo (rouge → orange → or, séparées de
   blanc — réservé au Hero et aux transitions entre les deux marques),
   groupe de CTA, et boutons WhatsApp (le seul CTA du site, décliné en
   deux couleurs selon le numéro/la marque).
========================================================================= */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.stripe-divider {
  height: 10px;
  width: 100%;
  background: linear-gradient(
    to right,
    var(--color-red) 0%, var(--color-red) 31%,
    var(--color-white) 31%, var(--color-white) 35%,
    var(--color-orange) 35%, var(--color-orange) 64%,
    var(--color-white) 64%, var(--color-white) 68%,
    var(--color-gold) 68%, var(--color-gold) 100%
  );
}

.cta-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.9rem 1.5rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  text-align: center;
  border: 2px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.whatsapp-btn:hover,
.whatsapp-btn:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

/* Bouton lié au numéro Comoresaventure : accent or */
.whatsapp-btn--coa {
  background-color: var(--color-gold);
  color: var(--color-dark);
  box-shadow: 0 10px 20px -10px rgba(245, 166, 35, 0.6);
}

/* Bouton lié au numéro James 2.6.9 Agency : accent rouge → orange */
.whatsapp-btn--james {
  background: linear-gradient(120deg, var(--color-red), var(--color-orange));
  color: var(--color-ivory);
  box-shadow: 0 10px 20px -10px rgba(232, 64, 42, 0.55);
}

.whatsapp-btn--compact {
  padding: 0.65rem 1rem;
  font-size: 0.8rem;
  width: auto;
  flex: 1 1 0;
}

@media (min-width: 480px) {
  .cta-group {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .whatsapp-btn {
    width: auto;
    flex: 1 1 220px;
  }
}

/* =========================================================================
   EN-TÊTE (site-header)
   Fond noir-brun structurant (charte : blocs d'en-tête = #221A15), logo
   centré, hauteur contenue pour ne pas manger l'écran mobile.
========================================================================= */
.site-header {
  background-color: var(--color-dark);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
}

.site-header__logo {
  height: 64px;
  width: auto;
  border-radius: 12px;
}

@media (min-width: 768px) {
  .site-header__logo {
    height: 84px;
  }
}

/* =========================================================================
   HERO
   Image de fond (volcan-karthala, injectée en style inline dans le HTML)
   + voile dégradé foncé pour la lisibilité du texte clair, positionnement
   central du message ("deux façons de vivre l'aventure comorienne"),
   deux CTA WhatsApp côte à côte. Bordure basse : motif rayé du logo.
========================================================================= */
.hero {
  position: relative;
  min-height: 88vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  border-bottom: 8px solid var(--color-gold);
}

.hero__overlay {
  width: 100%;
  background: linear-gradient(
    180deg,
    rgba(34, 26, 21, 0.55) 0%,
    rgba(34, 26, 21, 0.82) 100%
  );
  padding: var(--space-xl) var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  color: var(--text-on-dark);
}

.hero__title {
  font-size: 2rem;
  max-width: 18ch;
}

.hero__tagline {
  font-size: 1.05rem;
  max-width: 42ch;
  color: var(--color-ivory);
}

.hero__cta {
  max-width: 520px;
}

@media (min-width: 768px) {
  .hero__title {
    font-size: 3rem;
    max-width: 22ch;
  }

  .hero__tagline {
    font-size: 1.2rem;
  }
}

/* =========================================================================
   BANDEAU DE RÉASSURANCE
   Bande courte, haut contraste, accent or — rappelle disponibilité H24 et
   réservation directe WhatsApp juste sous le Hero.
========================================================================= */
.reassurance-bar {
  background-color: var(--color-gold);
  color: var(--color-dark);
  text-align: center;
  padding: 0.85rem 1rem;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

/* =========================================================================
   « DEUX FAÇONS DE VIVRE L'ÎLE »
   Les deux marques présentées côte à côte, à parité visuelle stricte :
   même format de carte, seule la couleur d'accent change.
========================================================================= */
.dual-intro {
  background-color: var(--color-ivory);
  padding: var(--space-xl) 1.25rem;
  text-align: center;
}

.dual-intro h2 {
  font-size: 1.9rem;
  margin-bottom: var(--space-lg);
  color: var(--color-dark);
}

.dual-intro__grid {
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.brand-card {
  padding: var(--space-md);
  border-radius: var(--radius-soft);
  box-shadow: var(--shadow-card);
  text-align: left;
}

.brand-card h3 {
  font-size: 1.6rem;
  margin-bottom: var(--space-xs);
}

.brand-card--coa {
  background-color: var(--color-ivory);
  border: 2px solid var(--color-gold);
  color: var(--color-dark);
}

.brand-card--james {
  background-color: var(--color-dark);
  color: var(--color-ivory);
  border: 2px solid var(--color-red);
}

@media (min-width: 768px) {
  .dual-intro__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================================
   SECTION COMORESAVENTURE — EXCURSIONS
   Fond ivoire, accent or exclusivement (badges, prix, CTA). Cartes à
   coins arrondis doux et ombre légère, jamais de bordure dure — mood
   apaisant, sincère, jamais vendeur.
========================================================================= */
.excursions {
  background-color: var(--color-ivory);
  padding: var(--space-xl) 1.25rem;
}

.excursions h2 {
  font-size: 1.9rem;
  text-align: center;
  color: var(--color-dark);
}

.excursions__baseline {
  max-width: 60ch;
  margin: var(--space-sm) auto var(--space-lg);
  text-align: center;
  font-style: italic;
  color: var(--color-dark);
  opacity: 0.85;
}

.card-grid {
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.excursion-card {
  background-color: var(--color-white);
  border-radius: var(--radius-soft);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.excursion-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

.excursion-card__image {
  width: 100%;
  height: 210px;
  object-fit: cover;
}

.excursion-card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.excursion-card__body h3 {
  font-size: 1.4rem;
  color: var(--color-dark);
}

.excursion-card__desc {
  color: var(--color-dark);
  opacity: 0.85;
  font-size: 0.95rem;
}

.excursion-card__meta {
  font-size: 0.88rem;
  color: var(--color-dark);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.excursion-card__price {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--color-gold);
}

.price-kmf {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-dark);
  opacity: 0.7;
}

@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .excursions .card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* =========================================================================
   GALERIE « VIVEZ LA GRANDE COMORE »
   Grandes photos d'ambiance (Karthala, Lac Salé) — mise en avant visuelle
   forte, volontairement sans prix ni CTA de réservation : ce ne sont pas
   des excursions vendables. Encadrée par le motif rayé du logo, qui sert
   ici de transition entre les deux sections marchandes.
========================================================================= */
.gallery {
  background-color: var(--color-dark);
  padding: var(--space-xl) 1.25rem;
  text-align: center;
}

.gallery h2 {
  color: var(--color-ivory);
  font-size: 1.9rem;
  margin-bottom: var(--space-lg);
}

.gallery__grid {
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.gallery__item {
  border-radius: var(--radius-soft);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.gallery__image {
  width: 100%;
  height: 280px;
  object-fit: cover;
}

.gallery__item figcaption {
  background-color: rgba(255, 246, 236, 0.06);
  color: var(--color-ivory);
  padding: var(--space-sm);
  font-size: 0.9rem;
  text-align: left;
}

@media (min-width: 768px) {
  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery__image {
    height: 340px;
  }
}

/* =========================================================================
   SECTION JAMES 2.6.9 AGENCY — FLOTTE
   Fond noir-brun dominant (immersif, esprit garage/showroom), accent
   rouge + orange à contraste fort, fiches à lignes nettes plutôt qu'à
   coins arrondis doux — mood dynamique, direct, sans fioriture.
========================================================================= */
.flotte {
  background-color: var(--color-dark);
  padding: var(--space-xl) 1.25rem;
}

.flotte h2 {
  font-size: 1.9rem;
  text-align: center;
  color: var(--color-ivory);
}

.flotte__baseline {
  max-width: 50ch;
  margin: var(--space-sm) auto var(--space-lg);
  text-align: center;
  color: var(--color-ivory);
  opacity: 0.85;
}

.flotte .card-grid {
  grid-template-columns: 1fr;
}

.vehicle-card {
  background-color: #2b2019;
  border: 1px solid rgba(255, 246, 236, 0.12);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.vehicle-card:hover {
  border-color: var(--color-orange);
  transform: translateY(-4px);
}

.vehicle-card--featured {
  border: 2px solid var(--color-red);
  box-shadow: 0 0 0 4px rgba(232, 64, 42, 0.15);
}

.vehicle-card__image {
  width: 100%;
  height: 210px;
  object-fit: cover;
  background-color: var(--color-ivory);
}

.vehicle-card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.vehicle-card__badge {
  color: var(--color-orange);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.vehicle-card__body h3 {
  font-size: 1.4rem;
  color: var(--color-ivory);
}

.vehicle-card__specs {
  color: var(--color-ivory);
  opacity: 0.75;
  font-size: 0.88rem;
}

.vehicle-card__pricing {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-red);
  border-top: 1px solid rgba(255, 246, 236, 0.15);
  border-bottom: 1px solid rgba(255, 246, 236, 0.15);
  padding-block: 0.6rem;
}

.vehicle-card__pricing .price-kmf {
  color: var(--color-ivory);
  opacity: 0.6;
}

.vehicle-card__caution {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-orange);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

@media (min-width: 768px) {
  .flotte .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .flotte .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =========================================================================
   PILIERS DE MARQUE
   7 cartes courtes sur fond ivoire, structure identique quelle que soit
   la section précédente — la typographie signe l'unité de marque.
========================================================================= */
.piliers {
  background-color: var(--color-ivory);
  padding: var(--space-xl) 1.25rem;
}

.piliers h2 {
  font-size: 1.9rem;
  text-align: center;
  color: var(--color-dark);
  margin-bottom: var(--space-lg);
}

.piliers__grid {
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.pilier-card {
  background-color: var(--color-white);
  border-radius: var(--radius-soft);
  box-shadow: var(--shadow-card);
  padding: var(--space-md);
}

.pilier-card h3 {
  font-size: 1.25rem;
  color: var(--color-gold);
  margin-bottom: 0.5rem;
}

.pilier-card p {
  font-size: 0.92rem;
  color: var(--color-dark);
  opacity: 0.85;
}

@media (min-width: 768px) {
  .piliers__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .piliers__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =========================================================================
   RAPPEL CTA AVANT FOOTER
   Dernier point de conversion avant le footer, fond noir-brun, motif
   rayé en bordure haute pour marquer la transition vers la fin de page.
========================================================================= */
.cta-reminder {
  background-color: var(--color-dark);
  color: var(--color-ivory);
  text-align: center;
  padding: var(--space-xl) 1.25rem;
  border-top: 8px solid var(--color-gold);
}

.cta-reminder h2 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.cta-reminder p {
  max-width: 50ch;
  margin: 0 auto var(--space-lg);
  opacity: 0.85;
}

.cta-reminder .cta-group {
  max-width: 560px;
  margin-inline: auto;
}

/* =========================================================================
   FOOTER
   Contact (Snapchat, Instagram), mention Amanii Corp, copyright — fond
   ivoire pour clore la page sur un ton posé après le rappel CTA foncé.
========================================================================= */
.site-footer {
  background-color: var(--color-ivory);
  color: var(--color-dark);
  padding: var(--space-lg) 1.25rem var(--space-xl);
  text-align: center;
}

.site-footer__contact h2 {
  font-size: 1.5rem;
  margin-bottom: var(--space-sm);
}

.site-footer__contact ul {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: var(--space-md);
  font-size: 0.95rem;
}

.site-footer__contact span {
  font-weight: 700;
  color: var(--color-red);
}

.site-footer__credit {
  font-size: 0.85rem;
  opacity: 0.75;
  margin-bottom: 0.3rem;
}

.site-footer__copyright {
  font-size: 0.78rem;
  opacity: 0.6;
}

/* =========================================================================
   CTA STICKY MOBILE
   Barre fixe en bas d'écran (mobile principalement), deux boutons
   compacts. Masquée par défaut (translation + opacité) : l'apparition au
   scroll est pilotée par script.js via la classe .is-visible (Étape 3).
   Un padding de secours est ajouté au body pour ne jamais masquer le
   contenu une fois la barre visible.
========================================================================= */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  background-color: var(--color-dark);
  border-top: 4px solid var(--color-gold);
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.sticky-cta.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 1024px) {
  .sticky-cta {
    display: none;
  }
}

/* =========================================================================
   ACCESSIBILITÉ — MOUVEMENT RÉDUIT
   Neutralise les transitions/translations pour les visiteurs qui ont
   activé "réduire les animations" au niveau système.
========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}