/* Hub Destinations V2 — pages continent / pays / ville (22 août 2026).
   Réutilise volontairement les classes déjà existantes plutôt que de les
   redéfinir : .fil-ariane / .destinations-hero (destinations.css), .reveal /
   .pilier-section / .citation-forte / .faq-item / .grille-preuves
   (page-pilier.css), .carte-continent / .carte-populaire (destinations.css)
   pour les grilles de liens. Ce fichier n'ajoute QUE les composants
   réellement nouveaux : fond blanc partout, pas d'emoji (SVG uniquement),
   aucune ligne de séparation entre sections — mêmes règles fixes du site. */

.page-destination-guide {
  background: var(--blanc);
}

/* --- Chiffres clés, datés et sourcés (jamais un chiffre sans année/source) --- */

.fiche-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.fiche-stat {
  text-align: center;
  padding: 20px 10px;
}

.fiche-stat__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8A8A8A;
  margin-bottom: 8px;
}

.fiche-stat__valeur {
  font-family: var(--police-titres);
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 24px);
  color: var(--noir);
  line-height: 1.2;
}

.fiche-stat__meta {
  font-size: 11.5px;
  color: #9A9A9A;
  margin-top: 6px;
  line-height: 1.4;
}

/* --- Univers du pays (culture, shopping, sport...) : identité propre à chaque pays --- */

.univers-pays {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.univers-carte {
  padding: 26px 24px;
  border: 1.5px solid #E3E6E4;
  border-radius: var(--rayon-carte);
}

.univers-carte__icone {
  width: 30px;
  height: 30px;
  color: var(--vert-sniperair);
  margin-bottom: 14px;
}

.univers-carte__titre {
  font-family: var(--police-titres);
  font-weight: 600;
  font-size: 17px;
  color: var(--noir);
  margin-bottom: 8px;
}

.univers-carte__texte {
  font-size: 14.5px;
  line-height: 1.6;
  color: #5A5A5A;
}

/* --- Aéroports --- */

.liste-aeroports {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.aeroport-carte {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: #F7F8F7;
  border-radius: var(--rayon-carte);
}

.aeroport-carte__code {
  flex-shrink: 0;
  font-family: var(--police-titres);
  font-weight: 700;
  font-size: 15px;
  color: var(--blanc);
  background: var(--noir);
  padding: 8px 12px;
  border-radius: 8px;
  min-width: 52px;
  text-align: center;
}

.aeroport-carte__nom {
  font-weight: 600;
  color: var(--noir);
  font-size: 15px;
  margin-bottom: 2px;
}

.aeroport-carte__texte {
  font-size: 13.5px;
  color: #6B6B6B;
  line-height: 1.5;
}

/* --- Quand partir : 4 saisons --- */

.grille-saisons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.saison-carte {
  padding: 20px 18px;
  border-radius: var(--rayon-carte);
  background: #F7F8F7;
}

.saison-carte__titre {
  font-family: var(--police-titres);
  font-weight: 600;
  font-size: 15px;
  color: var(--noir);
  margin-bottom: 8px;
}

.saison-carte__texte {
  font-size: 13.5px;
  line-height: 1.55;
  color: #5A5A5A;
}

/* --- CTA destination (hero pays/ville) --- */

.destination-hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.destination-hero__note {
  margin-top: 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
}

/* --- Section vitrine-prix ciblée sur une seule destination --- */

.section-vitrine-prix--destination {
  background: var(--blanc);
}

/* --- Régions d'un pays (page pilier pays, ex. Tunisie) --- */

.grille-regions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.carte-region {
  display: block;
  padding: 24px 26px;
  border: 1.5px solid #E3E6E4;
  border-radius: var(--rayon-carte);
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.carte-region:hover {
  border-color: var(--vert-sniperair);
}

.carte-region__badge {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--vert-sniperair);
  background: color-mix(in srgb, var(--vert-sniperair) 10%, transparent);
  padding: 6px 14px;
  border-radius: var(--rayon-pilule);
  margin-bottom: 14px;
}

.carte-region__titre {
  font-family: var(--police-titres);
  font-weight: 600;
  font-size: 19px;
  color: var(--noir);
  margin-bottom: 10px;
}

.carte-region__texte {
  font-size: 14.5px;
  line-height: 1.6;
  color: #5A5A5A;
  margin-bottom: 14px;
}

.carte-region__lien {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vert-sniperair);
}

.carte-region__lien svg {
  width: 14px;
  height: 14px;
}

/* --- Maillage interne (liens vers les autres régions du même pays, dans le texte) --- */

.lien-inline {
  color: var(--vert-sniperair);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--vert-sniperair) 40%, transparent);
  font-weight: 600;
  transition: text-decoration-color 0.2s ease;
}

.lien-inline:hover {
  text-decoration-color: var(--vert-sniperair);
}

/* --- Effet vitre (reflet diagonal au survol), même signature que .carte-destination
   sur la page d'accueil — appliqué à toute image de contenu éditoriale --- */

.bloc-lieu__cadre::before,
.image-hero-section::before,
.rangee-photos__cadre::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 45%;
  height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
  transform: skewX(-20deg);
  z-index: 2;
  pointer-events: none;
  transition: left 0.7s ease;
}

.bloc-lieu__cadre:hover::before,
.image-hero-section:hover::before,
.rangee-photos__cadre:hover::before {
  left: 130%;
}

/* --- Bloc de contenu éditorial (sous-lieu / satellite d'une ville-mère) --- */

.bloc-lieu {
  margin: 32px 0;
}

.bloc-lieu__titre {
  font-family: var(--police-titres);
  font-weight: 600;
  font-size: 18px;
  color: var(--noir);
  margin-bottom: 10px;
}

.bloc-lieu__texte {
  font-size: 15px;
  line-height: 1.7;
  color: #3D3D3D;
}

.bloc-lieu--avec-image {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}

.bloc-lieu--avec-image:nth-of-type(even) .bloc-lieu__cadre {
  order: -1;
}

.bloc-lieu__cadre {
  position: relative;
  overflow: hidden;
  border-radius: var(--rayon-carte);
  height: 380px;
  box-shadow: 0 12px 32px -12px rgba(0,0,0,0.25);
}

.bloc-lieu__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.bloc-lieu__cadre:hover .bloc-lieu__image {
  transform: scale(1.08);
}

/* --- Image unique pleine largeur, en avant d'un bloc de texte --- */

.image-hero-section {
  position: relative;
  overflow: hidden;
  border-radius: var(--rayon-carte);
  height: 480px;
  margin-bottom: 24px;
  box-shadow: 0 16px 40px -16px rgba(0,0,0,0.28);
}

.image-hero-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.image-hero-section:hover img {
  transform: scale(1.05);
}

/* --- Rangée de photos pleine largeur (mosaïque simple) --- */

.rangee-photos {
  display: grid;
  gap: 16px;
  margin: 28px 0;
}

.rangee-photos--2 { grid-template-columns: repeat(2, 1fr); }
.rangee-photos--3 { grid-template-columns: repeat(3, 1fr); }

.rangee-photos__cadre {
  position: relative;
  overflow: hidden;
  border-radius: var(--rayon-carte);
  height: 420px;
  box-shadow: 0 12px 32px -12px rgba(0,0,0,0.22);
}

.rangee-photos--3 .rangee-photos__cadre {
  height: 320px;
}

.rangee-photos__cadre img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.rangee-photos__cadre:hover img {
  transform: scale(1.08);
}

/* --- Tableau simple (distances, itinéraires) --- */

.tableau-simple {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14px;
}

.tableau-simple th,
.tableau-simple td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid #E3E6E4;
}

.tableau-simple th {
  font-family: var(--police-titres);
  font-weight: 600;
  color: var(--noir);
  background: #F7F8F7;
}

.tableau-simple td {
  color: #4A4A4A;
}

.tableau-simple__note {
  font-size: 12.5px;
  color: #9A9A9A;
  margin-top: -8px;
  margin-bottom: 20px;
}

/* --- Sous-titre H3 dans une section pilier --- */

.pilier-section h3.sous-titre-lieu {
  font-family: var(--police-titres);
  font-weight: 600;
  font-size: 18px;
  color: var(--noir);
  margin: 28px 0 10px;
}

/* --- Conteneur large pour les sections photo (gabarit plage-nature) : plus
   large que .pilier-section__interieur (780px) pour aérer visuellement une
   rangée de photos sans changer la densité de texte des autres sections. --- */

.pilier-section__interieur--large {
  max-width: 1100px;
  margin-inline: auto;
}

/* --- Hero "découpé avec bandeau stats" (gabarit mégapole-moderne) : même
   hero plein écran que .destinations-hero, complété d'une carte de chiffres
   qui chevauche le bas de l'image — accent sur les chiffres/skyline demandé
   par l'archétype mégapole (project_architecture_gabarits_multilingue). --- */

.destinations-hero--bandeau-stats {
  margin-bottom: 56px;
}

.destinations-hero__stats {
  position: relative;
  z-index: 2;
  transform: translateY(50%);
  margin: 0 var(--espace-section);
  background: var(--blanc);
  border-radius: var(--rayon-carte);
  box-shadow: 0 20px 48px -16px rgba(0,0,0,0.22);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 4px;
  padding: 28px 20px;
}

.destinations-hero__stats .fiche-stat {
  padding: 8px 10px;
}

/* --- Responsive --- */

@media (max-width: 900px) {
  .fiche-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .univers-pays {
    grid-template-columns: 1fr;
  }

  .grille-saisons {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .fiche-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .grille-saisons {
    grid-template-columns: 1fr;
  }

  .aeroport-carte {
    align-items: flex-start;
  }

  .grille-regions,
  .rangee-photos--3,
  .rangee-photos--2 {
    grid-template-columns: 1fr;
  }

  .bloc-lieu--avec-image {
    grid-template-columns: 1fr;
  }

  .bloc-lieu--avec-image .bloc-lieu__cadre {
    order: initial;
  }

  .bloc-lieu__cadre {
    height: 260px;
  }

  .rangee-photos__cadre,
  .rangee-photos--3 .rangee-photos__cadre {
    height: 260px;
  }

  .image-hero-section {
    height: 280px;
  }

  .tableau-simple {
    font-size: 13px;
  }

  .tableau-simple th,
  .tableau-simple td {
    padding: 10px 12px;
  }

  .destinations-hero__stats {
    grid-template-columns: repeat(2, 1fr);
    padding: 20px;
  }
}