/* CONVENTION COMMUNE DES TROIS IMAGES DE CHAQUE RUBRIQUE

   [nom-rubrique]-reseaux-sociaux.webp
     Format obligatoire : 1800 × 945. Réservée aux balises Open Graph et
     Twitter placées dans le <head> de chaque page HTML.

   [nom-rubrique]-ordinateur-tablette.webp
     Image horizontale du bandeau principal sur ordinateur et tablette.

   [nom-rubrique]-mobile.webp
     Affiche verticale dédiée à tous les formats de téléphones.

   Important : les balises og:image et twitter:image restent dans le HTML ;
   le CSS contient la mise en page commune et cette convention de nommage. */

/* 1. Variables et fondations */

:root {
  /* Charte typographique commune : accueil, Top 10, guides et itinéraires. */
  --font-sans: Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --title-1: clamp(2.2rem,4vw,4.1rem);
  --title-2: clamp(1.55rem,2.2vw,2.25rem);
  --title-3: clamp(1.15rem,1.55vw,1.4rem);
  --title-4: clamp(1.02rem,1.25vw,1.2rem);
  --title-5: clamp(.95rem,1.05vw,1.08rem);
  --title-6: clamp(.84rem,.9vw,.95rem);
  /* Écart total entre deux rubriques successives. Chaque section en utilise
     la moitié en haut et la moitié en bas. */
  --section-gap: 96px;
  /* Marge identique au-dessus et au-dessous du contenu des héros
     sur ordinateur et tablette. */
  --hero-content-edge-space: 60px;
  /* Partie du moteur de recherche qui remonte sur le héros. Elle est intégrée
     au calcul pour obtenir le même vide visible en haut et en bas. */
  --search-panel-overlap: 34px;
  --ink: #10253f;
  --muted: #5c6f82;
  --paper: #f5f8fb;
  --white: #fff;
  --blue: #087aa8;
  --blue-dark: #07506f;
  --aqua: #dff5f5;
  --coral: #ff7657;
  --sun: #ffc857;
  --line: #dbe5ec;
  --shadow: 0 20px 60px rgba(16,37,63,.12);
  --radius: 22px;
  /* Largeur commune sur grand écran : utilisée automatiquement par toutes
     les pages qui chargent modern.css. */
  --max: 1740px ;

  /* Réglages communs des photographies
     1 = image d'origine. Exemple : 1.05 augmente la valeur de 5 %. */
  --photo-brightness: 1;
  --photo-contrast: 1.04;
  --photo-saturation: 1.06;

  /* Voile des grands bandeaux : gauche, centre et droite. */
  --hero-veil-left: .92;
  --hero-veil-center: .66;
  --hero-veil-right: .12;
  --hero-veil-bottom: .60;

  /* Voile des cartes illustrées : bas, milieu et haut. */
  --card-veil-bottom: .88;
  --card-veil-center: .30;
  --card-veil-top: .06;
}

/* Largeur éditoriale sur ordinateur : les introductions et les textes de
   section utilisent toute la largeur de leur conteneur, quelle que soit la
   largeur de l’écran. Les cartes et les mises en page en colonnes ne sont pas
   concernées. */
@media (min-width: 1051px) {
  .section-intro .lead,
  .steps-heading p,
  .europe-showcase-intro p,
  .ranking-head .lead,
  .budget-section .lead {
    width: 100% !important;
    max-width: none !important;
  }

  /* Les conteneurs éditoriaux peuvent remplir la page, mais leurs titres
     conservent une largeur maîtrisée et leurs retours à la ligne naturels. */
  main .editorial-heading,
  main .guide-section-heading,
  main .route-heading {
    width: 100% !important;
    max-width: none !important;
  }

  main .editorial-heading > p,
  main .guide-section-heading > p,
  main .route-heading > p {
    width: 100% !important;
    max-width: none !important;
  }

  main .editorial-heading > h1,
  main .editorial-heading > h2,
  main .guide-section-heading > h1,
  main .guide-section-heading > h2,
  main .route-heading > h1,
  main .route-heading > h2 {
    max-width: 1120px;
  }

  /* Une conclusion composée d’un seul texte ne doit jamais conserver une
     seconde colonne vide. */
  .page-ville .route-conclusion-copy {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: 1fr !important;
  }

  .page-ville .route-conclusion-copy > p {
    grid-column: 1 / -1;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
  }

  /* Autres zones éditoriales situées sous les grands headers. */
  main .steps-heading,
  main .europe-showcase-intro,
  main .ranking-head,
  main .faq-heading,
  main .top10-library-head {
    width: 100% !important;
    max-width: none !important;
  }

  main .steps-heading > p,
  main .europe-showcase-intro > p,
  main .ranking-head > p,
  main .faq-heading > p,
  main .top10-library-head > p {
    width: 100% !important;
    max-width: none !important;
  }

  main .steps-heading > h2,
  main .europe-showcase-intro > h2,
  main .ranking-head > h2,
  main .faq-heading > h2,
  main .top10-library-head > h2 {
    max-width: 1120px;
  }
}

/* STANDARD MOBILE DÉFINITIF — ACCUEIL, TOP 10 ET GUIDES
   Affiches sources : 1200 × 1430. L'image conserve toujours son ratio naturel.
   Ce bloc doit rester en fin de fichier pour neutraliser les anciens réglages. */

@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .mobile-poster-fold,
  .guide-fold {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .home-desktop-hero,
  .top10-desktop-hero,
  .standard-desktop-hero {
    display: none !important;
  }

  .home-mobile-poster,
  .top10-mobile-poster,
  .standard-mobile-poster,
  .mobile-poster {
    display: block !important;
    width: 100%;
    max-width: none;
    height: auto !important;
    min-height: 0 !important;
    margin: 0;
    padding: 0;
    overflow: hidden;
    aspect-ratio: auto !important;
    background: #fff;
  }

  .mobile-poster > picture {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
  }

  .mobile-poster img,
  .mobile-poster > picture > img,
  .home-mobile-poster img,
  .top10-mobile-poster img,
  .standard-mobile-poster img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    aspect-ratio: 1200 / 1430;
    object-fit: contain !important;
    object-position: center center !important;
  }

  .mobile-poster + .mobile-poster-search,
  .mobile-poster-search {
    position: relative !important;
    z-index: 4;
    inset: auto !important;
    box-sizing: border-box;
    width: min(calc(100% - 28px), 660px) !important;
    max-width: 660px;
    margin: 10px auto max(20px, env(safe-area-inset-bottom)) !important;
    padding: 0;
    transform: none !important;
  }

  .mobile-poster-search .search-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: clamp(14px, 4vw, 20px);
    border: 1px solid rgba(219, 229, 236, .72);
    border-radius: clamp(22px, 7vw, 34px);
    background: #fff;
    box-shadow: 0 16px 42px rgba(16, 37, 63, .14);
  }

  .mobile-poster-search .search-card label {
    display: flex;
    min-width: 0;
    min-height: 54px;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    padding: 0 clamp(12px, 4vw, 18px);
    overflow: hidden;
    border-radius: 16px;
    color: var(--blue);
  }

  .mobile-poster-search .search-card input {
    min-width: 0;
    width: 100%;
    padding: 0;
    font-size: clamp(.95rem, 4.2vw, 1.08rem);
    line-height: 1.25;
    text-overflow: ellipsis;
  }

  .mobile-poster-search .search-card .btn,
  .mobile-poster-search .search-card button {
    display: inline-flex;
    width: 100%;
    min-width: 0;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 12px clamp(12px, 4vw, 20px);
    border-radius: 999px;
    font-size: clamp(.84rem, 3.8vw, 1rem);
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
  }

  .standard-mobile-intro,
  .home-intro.mobile-only-intro,
  .top10-intro.mobile-only-intro {
    padding-top: clamp(26px, 7vw, 38px);
  }
}

/* Téléphones compacts : le bouton reste sur une ligne sans dépasser. */
@media (max-width: 420px) {
  .mobile-poster + .mobile-poster-search,
  .mobile-poster-search {
    width: calc(100% - 20px) !important;
  }

  .mobile-poster-search .search-card {
    gap: 10px;
    padding: 12px;
    border-radius: 24px;
  }

  .mobile-poster-search .search-card label {
    min-height: 50px;
    padding-inline: 12px;
  }

  .mobile-poster-search .search-card .btn,
  .mobile-poster-search .search-card button {
    min-height: 52px;
    padding-inline: 10px;
    font-size: clamp(.78rem, 3.75vw, .94rem);
  }
}

/* Très petits écrans : dernier ajustement sans retour à la ligne. */
@media (max-width: 340px) {
  .mobile-poster-search .search-card .btn,
  .mobile-poster-search .search-card button {
    font-size: .74rem;
    letter-spacing: -.01em;
  }

  .mobile-poster-search .search-card input {
    font-size: .88rem;
  }
}

/* Téléphones tenus à l'horizontale : mêmes garanties, format plus compact. */
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  .mobile-poster + .mobile-poster-search,
  .mobile-poster-search {
    width: min(calc(100% - 32px), 660px) !important;
  }

  .mobile-poster-search .search-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border-radius: 22px;
  }

  .mobile-poster-search .search-card .btn,
  .mobile-poster-search .search-card button {
    width: auto;
    min-width: 230px;
  }
}

/* 1.1 Réglages individuels des photographies

   Chaque bloc hérite des réglages généraux ci-dessus. Seules les différences
   utiles sont précisées ici : lumière, couleur, voile et cadrage. */

.photo-home-hero {
  --photo-contrast: 1.05;
  --photo-saturation: 1.04;
}

/* Image principale des pages Guides : réglage commun ordinateur et tablette. */
.photo-guide-hero {
  --photo-brightness: 1.04;
  --photo-contrast: 1.03;
  --photo-saturation: 1.08;
  --hero-veil-left: .76;
  --hero-veil-center: .42;
  --hero-veil-right: .05;
}

.photo-top10-hero {
  --photo-brightness: 1.03;
  --photo-contrast: 1.05;
  --photo-saturation: 1.05;
  --hero-veil-left: .90;
  --hero-veil-center: .64;
}

.photo-continent-europe {
  --photo-brightness: 1.04;
  --photo-saturation: 1.04;
  --card-veil-bottom: .84;
}

.photo-continent-afrique {
  --photo-brightness: 1.03;
  --photo-saturation: 1.08;
  --card-veil-bottom: .86;
}

.photo-continent-amerique {
  --photo-brightness: 1.02;
  --photo-contrast: 1.05;
  --card-veil-bottom: .86;
}

.photo-continent-asie {
  --photo-brightness: 1.04;
  --photo-saturation: 1.05;
  --card-veil-bottom: .84;
}

.photo-continent-oceanie {
  --photo-brightness: 1.03;
  --photo-saturation: 1.07;
  --card-veil-bottom: .83;
}

.photo-route-bordeaux {
  --photo-brightness: 1.02;
  --photo-contrast: 1.04;
  --photo-saturation: 1.03;
}

.photo-route-rome {
  --photo-brightness: 1.02;
  --photo-contrast: 1.05;
  --photo-saturation: 1.03;
}

.photo-route-prague {
  --photo-brightness: 1.03;
  --photo-contrast: 1.04;
  --photo-saturation: 1.02;
}

.photo-route-barcelone {
  --photo-brightness: 1;
  --photo-contrast: 1.04;
  --photo-saturation: 1.03;
}

.photo-pays-inde,
.photo-pays-sri-lanka,
.photo-pays-colombie {
  --photo-brightness: 1.04;
  --photo-saturation: 1.07;
}

.photo-pays-pakistan,
.photo-pays-nepal,
.photo-pays-georgie {
  --photo-brightness: 1.05;
  --photo-contrast: 1.06;
}

.photo-pays-egypte,
.photo-pays-tunisie,
.photo-pays-paraguay,
.photo-pays-turquie {
  --photo-brightness: 1.03;
  --photo-saturation: 1.05;
}

* {
  box-sizing: border-box ;
}

html {
  scroll-behavior: smooth ;
}

body {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65 ;
}

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

a {
  color: inherit;
  text-decoration: none ;
}

button,input {
  font: inherit ;
}

button {
  cursor: pointer ;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: .75rem 1rem;
  z-index: 100 ;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem ;
}

.container {
  width: min(calc(100% - 40px),var(--max));
  margin-inline: auto ;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--blue);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase ;
}

.eyebrow:before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--coral) ;
}

/* Axe éditorial commun : tous les titres partent du bord gauche du contenu. */
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  text-align: left;
}

/* CHARTE TYPOGRAPHIQUE RESPONSIVE — TOUTES LES PAGES ET TOUS LES ÉCRANS

   H1 : titre unique de la page
   H2 : grandes rubriques
   H3 : cartes et sous-rubriques
   H4 à H6 : subdivisions complémentaires
   Les boutons et liens d’action héritent de la même famille de caractères. */

h1,h2,h3,h4,h5,h6 {
  margin: 0;
  font-family: var(--font-sans) !important;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.035em ;
}

h1 {
  font-size: var(--title-1) !important;
}

h2 {
  color: var(--blue);
  font-size: var(--title-2) !important;
}

h3 {
  color: var(--ink);
  font-size: var(--title-3) !important;
}

h4 {
  color: var(--ink);
  font-size: var(--title-4) !important;
}

h5 {
  color: var(--ink);
  font-size: var(--title-5) !important;
}

h6 {
  color: var(--muted);
  font-size: var(--title-6) !important;
  letter-spacing: -.015em;
}

p,li {
  font-family: var(--font-sans);
}

.btn,
.text-link,
button,
input,
select,
textarea {
  font-family: var(--font-sans);
}

.lead {
  font-size: clamp(1.05rem,1.5vw,1.25rem);
  color: var(--muted);
  max-width: 720px ;
}

.btn {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .72rem 1.2rem;
  font-weight: 800;
  transition: .25s ease ;
}

.btn-primary {
  background: var(--coral);
  color: #fff;
  box-shadow: 0 10px 24px rgba(255,118,87,.26) ;
}

.btn-primary:hover {
  background: #e8593c;
  transform: translateY(-2px) ;
}

.btn-secondary {
  background: #fff;
  border-color: var(--line);
  color: var(--ink) ;
}

.btn-secondary:hover {
  border-color: var(--blue);
  color: var(--blue) ;
}

.btn-light {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.5);
  color: #fff ;
}

.btn-light:hover {
  background: #fff;
  color: var(--blue-dark) ;
}

/* 2. En-tête et navigation principale */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.9);
  border-bottom: 1px solid rgba(219,229,236,.85);
  backdrop-filter: blur(16px) ;
}

.nav-wrap {
  height: 76px;
  display: flex;
  align-items: center;
  gap: 28px ;
}

.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-right: auto;
}

.brand-name {
  display: grid;
  gap: .28rem;
  line-height: 1;
  white-space: nowrap;
}

.brand-name strong {
  color: var(--ink);
  font-size: .9rem;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.brand-name small {
  color: var(--blue);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.brand-logo {
  display: block;
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 50%;
  box-shadow: 0 7px 18px rgba(16,37,63,.18);
}

.brand-logo-footer {
  width: 82px;
  height: 82px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 4px ;
}

.nav-link,.nav-button {
  border: 0;
  background: transparent;
  padding: .65rem .78rem;
  border-radius: 10px;
  color: #334a60;
  font-size: .88rem;
  font-weight: 750;
  white-space: nowrap ;
}

.nav-link:hover,.nav-button:hover,.nav-link[aria-current="page"],.nav-button[aria-current="page"] {
  background: #eaf5f8;
  color: var(--blue-dark) ;
}

.nav-item {
  position: relative ;
}

.nav-button:after {
  content: "⌄";
  margin-left: .35rem ;
}

.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: none;
  width: max-content;
  min-width: 320px;
  max-width: min(420px,calc(100vw - 32px));
  padding: .6rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: var(--shadow) ;
}

.nav-item.open .dropdown {
  display: grid ;
}

.dropdown a {
  padding: .65rem .75rem;
  border-radius: 9px;
  color: #41576b;
  font-size: .9rem;
  white-space: nowrap ;
}

.dropdown a:hover {
  background: #edf7f9;
  color: var(--blue) ;
}

.dropdown-top10 {
  min-width: 330px;
}

.dropdown-separator {
  margin-top: .35rem;
  padding-top: 1rem !important;
  border-top: 1px solid var(--line);
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-size: 0 ;
}

.menu-toggle:before,.menu-toggle:after,.menu-toggle span {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  margin: 5px auto;
  background: var(--ink);
  transition: .2s ;
}

.menu-toggle.is-open span {
  opacity: 0 ;
}

.menu-toggle.is-open:before {
  transform: translateY(7px) rotate(45deg) ;
}

.menu-toggle.is-open:after {
  transform: translateY(-7px) rotate(-45deg) ;
}

/* 3. Page d'accueil : introduction et recherche */

.hero-static-artwork {
  background: #063e62;
  overflow: hidden;
}

.hero-static-artwork img {
  display: block;
  width: min(100%, 793px);
  height: auto;
  margin: 0 auto;
}

.home-mobile-poster,
.top10-mobile-poster {
  display: none;
}

/* Quand l'introduction est déjà écrite sur le hero des grands écrans, elle
   reste disponible uniquement sur mobile, où l'affiche ne porte pas ce texte. */
@media (min-width: 701px) {
  .mobile-only-intro {
    display: none;
  }
}

.home-intro {
  padding: clamp(34px, 5vw, 72px) 0 clamp(18px, 3vw, 42px);
  text-align: left;
}

.home-intro-content,
.top10-intro-content {
  max-width: 920px;
}

.home-intro-title,
.top10-intro-title {
  color: var(--blue);
  font-size: clamp(1.7rem, 4vw, 3.25rem);
  line-height: 1.08;
}

.home-intro-title {
  margin: 0;
}

.home-intro-kicker {
  margin: .8rem 0 1.25rem;
  color: var(--ocean);
  font-size: clamp(.9rem, 1.7vw, 1.25rem);
  font-weight: 900;
  letter-spacing: .12em;
}

.home-intro-text,
.top10-intro p {
  max-width: 780px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.7;
}

.home-intro-cta,
.top10-intro-cta {
  justify-content: center;
  gap: .8rem;
  min-height: 56px;
  margin-top: 26px;
  padding: .9rem 1.35rem;
  border: 0;
  background: #3ea6f8;
  color: #fff;
  font-weight: 900;
  text-align: center;
  box-shadow: 0 12px 28px rgba(62,166,248,.24);
}

.home-intro-cta:hover,
.top10-intro-cta:hover {
  background: #218bdc;
  color: #fff;
}

.home-intro-cta span {
  font-size: 1.25em;
}

#europe-showcase-title {
  scroll-margin-top: 110px;
}

@media (min-width: 901px) {
  .hero-proof-mobile {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
  }

  .hero-proof-mobile span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-size: .9rem;
    font-weight: 800;
  }

  .hero-proof-mobile span:before {
    content: "✓";
    margin-right: .5rem;
    color: var(--coral);
  }
}

@media (max-width: 700px) {
  .home-desktop-hero,
  .top10-desktop-hero {
    display: none !important;
  }

  .home-mobile-poster,
  .top10-mobile-poster {
    display: block !important;
  }

  .home-intro {
    padding-top: 30px;
  }

  .home-intro-content,
  .top10-intro-content {
    width: min(100% - 32px, 920px);
  }

  .home-intro-title,
  .top10-intro-title {
    font-size: clamp(1.55rem, 7.5vw, 2.2rem);
  }

  .home-intro-kicker {
    letter-spacing: .08em;
  }

  .home-intro-text,
  .top10-intro p {
    font-size: 1rem;
    line-height: 1.6;
  }

  .home-intro-cta,
  .top10-intro-cta {
    width: 100%;
  }
}

.hero {
  position: relative;
  min-height: 690px;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: #0b4966;
  color: #fff ;
}

.hero-picture {
  position: absolute;
  inset: 0;
}

.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter:
    brightness(var(--photo-brightness))
    contrast(var(--photo-contrast))
    saturate(var(--photo-saturation));
}

.hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(6,38,57,var(--hero-veil-left)) 0%,
      rgba(6,38,57,var(--hero-veil-center)) 47%,
      rgba(6,38,57,var(--hero-veil-right)) 100%
    ),
    linear-gradient(
      0deg,
      rgba(5,36,54,var(--hero-veil-bottom)),
      transparent 45%
    ) ;
}

.hero-content {
  position: relative;
  z-index: 1;
  padding: 110px 0 76px ;
}

.hero h1 {
  max-width: 850px ;
}

.hero h1 em {
  color: var(--sun);
  font-style: normal ;
}

.hero .lead {
  color: #edf8fa;
  margin: 1.5rem 0 2rem ;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem ;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 1.3rem;
  margin-top: 2rem;
  color: #d6ebef;
  font-size: .9rem ;
}

.hero-proof span:before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: .5rem;
  background: rgba(255,255,255,.14);
  border-radius: 50%;
  color: var(--sun) ;
}

.hero-proof-mobile {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.search-panel {
  position: relative;
  z-index: 3;
  margin-top: -34px ;
}

.search-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 14px;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--shadow) ;
}

.search-card label {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 0 .5rem 0 1rem;
  color: var(--blue);
  font-weight: 900 ;
}

.search-card input {
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--ink);
  font-size: 1rem ;
}

.search-card input::placeholder {
  color: #8b9baa ;
}

.search-card button {
  border: 0 ;
}

/* Recherche interne commune : même composant sur toutes les pages. */
.site-search {
  position: relative;
}

.site-search label svg {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
}

.site-search-results {
  position: absolute;
  z-index: 20;
  top: calc(100% - 4px);
  left: 14px;
  right: 14px;
  overflow: hidden;
  border: 1px solid #d8e6ee;
  border-radius: 0 0 18px 18px;
  background: #fff;
  box-shadow: 0 18px 35px rgba(16, 37, 63, .16);
}

.site-search-results[hidden] {
  display: none;
}

/* Aucun résultat flottant : les résultats s'affichent uniquement sur recherche.htm. */
.site-search-results {
  display: none !important;
}

.site-search-results a {
  display: block;
  padding: 12px 18px;
  border-top: 1px solid #e7eff4;
  color: var(--ink);
  font-weight: 750;
  text-decoration: none;
}

.site-search-results a strong,
.site-search-results a small {
  display: block;
}

.site-search-results a strong {
  color: #082c43;
  font-size: 0.98rem;
  line-height: 1.25;
}

.site-search-results a small {
  margin-top: 4px;
  color: #64798a;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
}

.site-search-results a:first-child {
  border-top: 0;
}

.site-search-results a:hover,
.site-search-results a:focus-visible {
  color: var(--blue);
  background: #eef8fc;
  outline: 0;
}

.site-search input[aria-invalid="true"] {
  text-decoration: underline wavy #d84b32;
  text-underline-offset: 4px;
}

/* Page complète des résultats de recherche. */
.search-page-main {
  min-height: 68vh;
  padding: clamp(42px, 6vw, 82px) 0 80px;
  background: linear-gradient(145deg, #f5fbfe 0%, #fff 52%, #fff7f3 100%);
}

.search-page-panel {
  max-width: 1080px;
}

.search-page-heading {
  max-width: 780px;
  margin-bottom: 28px;
}

.search-page-heading h1 {
  margin: 10px 0 12px;
  color: var(--blue);
  font-size: clamp(1.7rem, 3vw, 2.65rem);
  line-height: 1.05;
}

.search-page-heading p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(.94rem, 1.15vw, 1.05rem);
}

.search-results-summary {
  margin: 0 0 18px;
  color: var(--muted);
  font-weight: 700;
}

.search-results-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.search-result-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 25px;
  border: 1px solid #d9e8f0;
  border-radius: 20px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 30px rgba(16, 37, 63, .07);
}

.search-result-card h2 {
  margin: 0 0 12px;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.2;
}

.search-result-card h2 a {
  color: var(--ink);
  text-decoration: none;
}

.search-result-card h2 a:hover {
  color: var(--blue);
}

.search-result-card p {
  flex: 1;
  margin: 0 0 20px;
  color: var(--muted);
  line-height: 1.6;
  font-size: .92rem;
}

.search-result-match {
  margin: 0 0 10px;
  color: #61798b;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.search-result-match strong {
  color: var(--blue);
}

.search-result-card mark {
  padding: 0 .12em;
  border-radius: .2em;
  background: #fff0a8;
  color: #082c43;
  font-weight: 800;
}

.search-result-excerpt {
  overflow-wrap: anywhere;
}

.search-result-action {
  align-self: flex-start;
  color: var(--blue);
  font-weight: 850;
  text-decoration: none;
  font-size: .9rem;
}

.search-result-action::after {
  content: "  →";
  color: var(--coral);
}

.search-results-empty {
  padding: 28px;
  border: 1px solid #d9e8f0;
  border-radius: 20px;
  background: #fff;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 700px) {
  .search-page-main {
    padding: 32px 0 55px;
  }

  .search-results-list {
    grid-template-columns: 1fr;
  }

  .search-result-card {
    padding: 21px;
  }
}

/* Emplacement publicitaire commun, fluide et sans débordement. */
.ad-placement {
  position: relative;
  z-index: 1;
  width: min(100% - 40px,var(--max));
  margin-top: 18px;
  margin-bottom: 18px;
  overflow: hidden;
  text-align: center;
}

.ad-placement .adsbygoogle {
  width: 100%;
  max-width: 100%;
}

/* 4. Page d'accueil : destinations, étapes et itinéraires */

.section {
  padding: calc(var(--section-gap) / 2) 0 ;
}

/* Rythme vertical commun à l’accueil, aux Top 10 et aux futures pages. */
.section,
.ranking,
.budget-section,
.faq,
.related {
  padding-top: calc(var(--section-gap) / 2) !important;
  padding-bottom: calc(var(--section-gap) / 2) !important;
}

.section-intro {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 50px;
  align-items: end;
  margin-bottom: 42px ;
}

.section-intro .lead {
  margin: 0 ;
}

/* Titre éditorial : casse naturelle, sans transformation en capitales. */
.section-intro h2 {
  text-transform: none;
}

.destinations-panel {
  padding: 48px;
  border: 1px solid #cfe1f1;
  border-radius: 28px;
  background: linear-gradient(135deg,#f4faff 0%,#eaf5ff 100%);
}

.destinations-head {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: 58px;
  margin-bottom: 34px;
}

.destinations-copy h2 {
  margin: 12px 0 14px;
  font-family: inherit;
  font-size: clamp(2.3rem,3.3vw,3.7rem);
  line-height: 1.05;
  text-transform: uppercase;
}

.destinations-copy .lead {
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.destination-search-card {
  margin-top: 28px;
  padding: 24px;
  border: 1px solid #d5e4f0;
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 28px rgba(16,37,63,.08);
  text-align: center;
}

.destination-search-card h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: clamp(.88rem,1vw,1.05rem);
  white-space: nowrap;
}

.destination-search-card p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.45;
}

.destination-search-card form {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
}

.destination-search-card .site-search-results {
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  text-align: left;
}

.destination-search-card input {
  min-width: 0;
  min-height: 50px;
  padding: 0 16px;
  border: 2px solid #42a5ff;
  border-radius: 12px;
  color: var(--ink);
  font: inherit;
  outline: 0;
}

.destination-search-card input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(21,146,230,.14);
}

.destination-search-button {
  min-height: 50px;
  padding: 0 22px;
  border: 0;
  border-radius: 12px;
  background: var(--coral, #ff7657);
  color: #fff;
  font-size: .84rem;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.destination-search-card small {
  display: block;
  margin-top: 14px;
  color: var(--muted);
  font-size: .78rem;
}

.destinations-visual {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 18px 42px rgba(16,37,63,.13);
}

.continent-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr;
  gap: 18px;
}

.continent-card {
  min-height: 132px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 54px 24px 24px;
  border: 1px solid #d5e4f0;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(16,37,63,.06);
  transition: transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}

.continent-card-featured {
  grid-row: span 2;
  min-height: 282px;
  border: 2px solid #42a5ff;
}

.continent-card:hover {
  transform: translateY(-4px);
  border-color: #42a5ff;
  box-shadow: 0 16px 34px rgba(16,37,63,.12);
}

.continent-card-icon {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid #cce6fa;
  border-radius: 50%;
  background: #edf8ff;
  color: #178edf;
  font-size: 1.1rem;
}

.continent-card-copy {
  display: grid;
  gap: 3px;
}

.continent-card strong {
  color: var(--ink);
  font-size: 1.18rem;
  line-height: 1.25;
}

.continent-card small {
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.45;
}

.continent-card em {
  width: max-content;
  margin-bottom: 8px;
  padding: 4px 10px;
  border: 1px solid #bde0fb;
  border-radius: 999px;
  background: #edf8ff;
  color: #087bc8;
  font-size: .7rem;
  font-style: normal;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.continent-card b {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: #1592e6;
  font-size: 1.75rem;
  font-weight: 400;
}

.steps {
  background: #fff;
}

.steps-heading {
  max-width: 1050px;
  margin: 0 auto 0 0;
  text-align: left;
}

.steps-heading h2 {
  margin: 10px 0 14px;
  font-family: inherit;
  font-size: clamp(2rem,3vw,3rem);
  text-transform: uppercase;
}

.steps-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 26px;
  margin-top: 40px;
}

.step-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: 4px solid #176ddc;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(16,37,63,.09);
}

.step-card:nth-child(2) {
  border-top-color: #42af49;
}

.step-card:nth-child(3) {
  border-top-color: #ff6b00;
}

.step-card > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.step-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px;
}

.step-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 15px;
}

.step-number {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #176ddc;
  color: #fff;
  font-size: .9rem;
  font-weight: 900;
}

.step-card:nth-child(2) .step-number {
  background: #42af49;
}

.step-card:nth-child(3) .step-number {
  background: #ff6b00;
}

.step-icon {
  color: #176ddc;
  font-size: 1.8rem;
  font-weight: 900;
}

.step-card:nth-child(2) .step-icon {
  color: #42af49;
}

.step-card:nth-child(3) .step-icon {
  color: #ff6b00;
}

.step-card h3 {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: 1.28rem;
}

.step-card p {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: .94rem;
}

.step-button {
  margin-top: auto;
  padding: 14px 18px;
  border-radius: 11px;
  background: #176ddc;
  color: #fff;
  font-size: .82rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  transition: transform .2s ease,filter .2s ease;
}

.step-card:nth-child(2) .step-button {
  background: #42af49;
}

.step-card:nth-child(3) .step-button {
  background: #ff6b00;
}

.step-button:hover {
  transform: translateY(-2px);
  filter: brightness(.95);
}

.step-button:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px;
}

.routes-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 30px;
  margin-top: 42px ;
}

.route-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 10px 30px rgba(16,37,63,.08);
  transition: .25s ;
}

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

.route-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter:
    brightness(var(--photo-brightness))
    contrast(var(--photo-contrast))
    saturate(var(--photo-saturation)) ;
}

.photo-route-bordeaux img {
  object-position: center 54%;
}

.photo-route-rome img {
  object-position: center 48%;
}

.photo-route-prague img {
  object-position: center 46%;
}

.photo-route-barcelone img {
  object-position: center 52%;
}

.route-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 28px 28px ;
}

.route-card p {
  color: var(--muted);
  font-size: .92rem ;
}

.route-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  margin-top: auto;
  padding: 14px 22px;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font-size: .9rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .02em;
  box-shadow: 0 10px 24px rgba(0,119,175,.2);
  transition: transform .2s ease,background-color .2s ease,box-shadow .2s ease ;
}

.route-button::after {
  content: "→";
  font-size: 1.15em ;
}

.route-button:hover {
  transform: translateY(-2px);
  background: var(--blue-dark);
  box-shadow: 0 14px 28px rgba(0,63,105,.24) ;
}

.route-button:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px ;
}

.text-link {
  color: var(--blue);
  font-weight: 850 ;
}

.text-link:after {
  content: " →" ;
}

.europe-showcase {
  background: #fff;
}

.europe-showcase-intro {
  max-width: 1120px;
  margin-bottom: 38px;
}

.europe-showcase-intro h2 {
  margin: 12px 0 16px;
  font-family: inherit;
  font-size: clamp(2rem,3vw,3rem);
  text-transform: uppercase;
  letter-spacing: -.02em;
}

.europe-showcase-intro p {
  max-width: 980px;
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.europe-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 24px;
}

.europe-showcase-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16,37,63,.08);
  transition: transform .25s ease,box-shadow .25s ease;
}

.europe-showcase-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.europe-showcase-card:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 4px;
}

.europe-showcase-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: brightness(var(--photo-brightness)) contrast(var(--photo-contrast)) saturate(var(--photo-saturation));
}

.europe-showcase-copy {
  display: grid;
  gap: 7px;
  padding: 22px 24px 25px;
}

.europe-showcase-icon {
  color: var(--blue);
  font-size: 1.65rem;
  line-height: 1;
}

.europe-showcase-copy strong {
  color: var(--ink);
  font-size: 1.18rem;
}

.europe-showcase-copy small {
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
}

.photo-europe-routes { --photo-brightness: 1.02; --photo-contrast: 1.04; --photo-saturation: 1.03; }
.photo-europe-guides { --photo-brightness: 1.03; --photo-contrast: 1.03; --photo-saturation: 1.02; }
.photo-europe-photos { --photo-brightness: 1.04; --photo-contrast: 1.02; --photo-saturation: 1.03; }
.photo-europe-videos { --photo-brightness: 1.02; --photo-contrast: 1.04; --photo-saturation: 1.04; }
.photo-europe-3d { --photo-brightness: 1.03; --photo-contrast: 1.03; --photo-saturation: 1.02; }
.photo-europe-tips { --photo-brightness: 1.02; --photo-contrast: 1.03; --photo-saturation: 1.04; }

.morocco-showcase {
  padding-top: 34px;
  background: #fff;
}

.morocco-showcase-panel {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 54px;
  padding: 36px;
  border: 1px solid #efd6be;
  border-radius: 22px;
  background: #fffaf5;
}

.morocco-showcase-copy h2 {
  max-width: 680px;
  margin: 14px 0 14px;
  font-family: inherit;
  font-size: clamp(2rem,3vw,3rem);
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: -.02em;
}

.morocco-showcase-copy p {
  max-width: 650px;
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
}

.morocco-showcase-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.morocco-showcase-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid #e8c8aa;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: .82rem;
  font-weight: 850;
  text-transform: uppercase;
  transition: transform .2s ease,border-color .2s ease,background-color .2s ease;
}

.morocco-showcase-actions a:hover {
  transform: translateY(-2px);
  border-color: var(--coral);
  background: #fff3e9;
}

.morocco-showcase-actions a:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px;
}

.morocco-showcase-panel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 17px;
  filter: brightness(1.02) contrast(1.04) saturate(1.04);
}

.top10-discovery {
  background: #fff;
}

.top10-discovery-heading {
  max-width: 1180px;
  margin-bottom: 38px;
}

.top10-discovery-heading h2 {
  margin: 10px 0 12px;
  font-family: inherit;
  font-size: clamp(2rem,3vw,3rem);
  line-height: 1.1;
  text-transform: uppercase;
}

.top10-discovery-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 1.04rem;
}

.top10-discovery-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 22px;
}

.top10-discovery-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16,37,63,.08);
  transition: transform .25s ease,box-shadow .25s ease;
}

.top10-discovery-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.top10-discovery-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.top10-discovery-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px;
}

.top10-discovery-body h3 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 1.14rem;
  line-height: 1.3;
}

.top10-discovery-body p {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.6;
}

.top10-discovery-body a {
  margin-top: auto;
  padding: 13px 16px;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font-size: .8rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  transition: transform .2s ease,background-color .2s ease;
}

.top10-discovery-body a:hover {
  transform: translateY(-2px);
  background: #0876b9;
}

.top10-discovery-body a:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px;
}

.mobile-guide {
  background: #fff;
}

.mobile-guide-panel {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  align-items: center;
  gap: 48px;
  padding: 46px;
  border: 1px solid #cfe1f1;
  border-radius: 28px;
  background: linear-gradient(135deg,#f4faff 0%,#eaf5ff 100%);
}

.mobile-guide-media {
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 18px 42px rgba(16,37,63,.13);
}

.mobile-guide-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.mobile-guide-copy h2 {
  margin: 10px 0 18px;
  font-family: inherit;
  font-size: clamp(2rem,3vw,3rem);
  line-height: 1.05;
  text-transform: uppercase;
}

.mobile-guide-copy p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 1rem;
}

.mobile-guide-benefits {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
  margin: 24px 0;
  padding: 0;
  list-style: none;
}

.mobile-guide-benefits li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 8px 13px;
  border: 1px solid #d8e6f2;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 5px 14px rgba(16,37,63,.05);
}

.mobile-guide-benefits li:before {
  content: "✓";
  margin-right: 7px;
  color: var(--blue);
}

.mobile-guide-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  border-radius: 11px;
  background: var(--blue);
  color: #fff;
  font-size: .82rem;
  font-weight: 900;
  text-transform: uppercase;
  transition: transform .2s ease,background-color .2s ease;
}

.mobile-guide-button:hover {
  transform: translateY(-2px);
  background: #0876b9;
}

.mobile-guide-button:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px;
}

.mobile-guide-copy > small {
  display: block;
  margin-top: 22px;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.55;
}

.feature {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  min-height: 500px;
  background: var(--aqua);
  border-radius: 32px;
  overflow: hidden ;
}

.feature img {
  width: 100%;
  height: 100%;
  object-fit: cover ;
}

.feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(36px,6vw,74px) ;
}

.feature-copy p {
  color: #3e6170 ;
}

.feature-copy .btn {
  align-self: flex-start;
  margin-top: 12px ;
}

.downloads {
  background: #fff ;
}

.downloads-panel {
  display: grid;
  grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr);
  gap: clamp(34px,5vw,72px);
  align-items: center;
  padding: clamp(34px,5vw,58px);
  background: linear-gradient(135deg,#f1f8ff 0%,#eaf5ff 100%);
  border: 1px solid #d7e9f8;
  border-radius: 26px;
  box-shadow: 0 18px 48px rgba(20,68,105,.08) ;
}

.downloads-copy h2 {
  max-width: 650px;
  margin: 12px 0 16px;
  color: var(--blue);
  font-family: var(--font-sans);
  font-size: clamp(2rem,3vw,3rem);
  line-height: 1.02;
  text-transform: uppercase ;
}

/* Le titre Top 10 tient sur une ligne sur les écrans suffisamment larges. */
@media (min-width: 1100px) {
  .top10-discovery-heading h2 {
    white-space: nowrap;
  }
}

.downloads-copy > p {
  max-width: 650px;
  color: #48677c;
  font-size: 1.05rem;
  line-height: 1.65 ;
}

.downloads-benefits {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
  margin: 24px 0 28px;
  padding: 0;
  list-style: none ;
}

.downloads-benefits li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid #dbeaf6;
  border-radius: 999px;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 5px 14px rgba(20,68,105,.05) ;
}

.downloads-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 60px;
  padding: 0 28px;
  background: var(--blue);
  border-radius: 12px;
  color: #fff;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  box-shadow: 0 12px 24px rgba(28,135,217,.22);
  transition: transform .2s ease,box-shadow .2s ease ;
}

.downloads-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(28,135,217,.28) ;
}

.download-formats {
  display: grid;
  gap: 14px ;
}

.format {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px;
  background: #fff;
  border: 1px solid #d7e6f1;
  border-radius: 17px;
  box-shadow: 0 8px 22px rgba(20,68,105,.06) ;
}

.format-icon {
  display: grid;
  place-items: center;
  flex: 0 0 62px;
  height: 62px;
  background: #edf7ff;
  border: 1px solid #d6eafa;
  border-radius: 15px;
  color: var(--blue);
  font-size: 1.85rem;
  font-weight: 800 ;
}

.format h3 {
  margin: 0 0 3px;
  color: var(--ink);
  font-size: 1.55rem ;
}

.format p {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.45 ;
}

.format a {
  color: var(--blue);
  font-size: .85rem;
  font-weight: 900;
  letter-spacing: .035em;
  text-transform: uppercase ;
}

.footer {
  background: #081f31;
  color: #d5e2e8;
  padding: 58px 0 30px ;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3,1fr);
  gap: 38px ;
}

.footer h3 {
  margin-bottom: 14px;
  color: #fff;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .1em ;
}

/* Identité de marque dans le pied de page : blanche et toujours en capitales. */
.footer .brand-name strong {
  color: #fff;
  text-transform: uppercase;
}

.footer a {
  display: block;
  margin: .45rem 0;
  color: #b9cbd4;
  font-size: .9rem ;
}

.footer a:hover {
  color: #fff ;
}

.footer .brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .85rem;
  color: #fff ;
}

/* Alignement constant du nom par rapport au logo, sur tous les écrans. */
.footer .brand-name {
  transform: translateY(5px);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 45px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .8rem;
  color: #8fa7b3 ;
}

/* 5. Page Top 10 : introduction, classement et budgets */

.article-hero {
  position: relative;
  min-height: 690px;
  display: grid;
  align-items: end;
  padding: 0;
  background: #0b4d68;
  color: #fff;
  overflow: hidden ;
}

.article-hero-picture {
  position: absolute;
  inset: 0;
}

.article-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter:
    brightness(var(--photo-brightness))
    contrast(var(--photo-contrast))
    saturate(var(--photo-saturation));
}

.article-hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(5,37,58,var(--hero-veil-left)) 0%,
      rgba(5,37,58,var(--hero-veil-center)) 50%,
      rgba(5,37,58,var(--hero-veil-right)) 100%
    ),
    linear-gradient(
      0deg,
      rgba(5,35,53,var(--hero-veil-bottom)),
      transparent 55%
    );
}

.article-hero > .container {
  position: relative;
  z-index: 1;
  padding: 110px 0 76px;
}

.article-hero h1 {
  max-width: 1180px;
  font-size: clamp(2.8rem,5.4vw,6.25rem) ;
}

.article-hero h1 em {
  color: var(--sun);
  font-style: normal;
}

.article-hero .lead {
  color: #d9edf2 ;
}

.article-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px ;
}

.ranking {
  padding: 90px 0 ;
}

.ranking-head {
  max-width: 1180px;
  margin-bottom: 40px ;
}

.ranking-head h2,
.budget-section h2,
.faq-heading h2,
.top10-library-head h2 {
  color: var(--blue);
  font-family: var(--font-sans);
  font-weight: 900;
  text-transform: uppercase ;
}

.ranking-head .lead {
  max-width: 1120px;
  line-height: 1.7 ;
}

.ranking-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 30px ;
}

.destination-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(16,37,63,.09) ;
}

.destination-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden ;
}

.destination-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter:
    brightness(var(--photo-brightness))
    contrast(var(--photo-contrast))
    saturate(var(--photo-saturation)) ;
}

.photo-pays-inde img,
.photo-pays-nepal img,
.photo-pays-sri-lanka img {
  object-position: center;
}

.photo-pays-pakistan img,
.photo-pays-georgie img,
.photo-pays-turquie img {
  object-position: 54% center;
}

.photo-pays-egypte img,
.photo-pays-tunisie img,
.photo-pays-paraguay img,
.photo-pays-colombie img {
  object-position: 48% center;
}

.rank {
  position: absolute;
  left: 14px;
  top: auto;
  bottom: -60px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  font: 600 1.45rem Georgia,serif;
  box-shadow: 0 8px 20px rgba(0,0,0,.2) ;
}

.destination-body {
  display: flex;
  flex-direction: column;
  padding: 28px 30px 30px 84px ;
}

.capital {
  color: #092746 !important;
  font-size: clamp(1.25rem,2vw,1.65rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .01em ;
}

.destination-body h3 {
  display: none ;
}

.destination-body p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65 ;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  margin-top: auto;
  margin-left: -54px ;
}

.stat {
  padding: 10px 8px;
  background: var(--paper);
  border-radius: 10px ;
}

.stat b {
  display: block;
  color: var(--ink);
  font-size: .88rem ;
}

.stat small {
  color: var(--muted);
  font-size: .69rem ;
}

.card-links {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  margin: 20px 0 0 -54px;
  font-size: .84rem ;
}

.card-links .text-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 10px 14px;
  border-radius: 11px;
  background: var(--blue);
  color: #fff;
  font-weight: 900;
  letter-spacing: .02em;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 9px 18px rgba(28,135,217,.18);
  transition: transform .2s ease,box-shadow .2s ease ;
}

.card-links .text-link:nth-child(2) {
  background: #ff7900;
  box-shadow: 0 9px 18px rgba(255,121,0,.18) ;
}

.card-links .text-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 13px 22px rgba(16,37,63,.2) ;
}

.budget-section {
  padding: 90px 0;
  background: #fff;
  color: var(--ink) ;
}

.budget-section .lead {
  max-width: 1180px;
  color: var(--muted) ;
}

.budget-profiles {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px;
  margin-top: 30px ;
}

.budget-profiles article {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 26px;
  background: #f5f9fd;
  border: 1px solid #dce8f2;
  border-radius: 16px ;
}

.budget-profiles article > span {
  font-size: 1.8rem ;
}

.budget-profiles h3,
.budget-profiles p {
  margin: 0 ;
}

.budget-profiles h3 {
  color: var(--ink);
  font-size: 1rem;
  text-transform: uppercase ;
}

.budget-profiles p {
  color: var(--muted);
  font-size: .9rem ;
}

.budget-table-wrap {
  overflow-x: auto;
  margin-top: 36px;
  border-radius: 18px;
  background: #fff ;
}

.table-swipe-hint {
  display: none;
}

.budget-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--ink);
  min-width: 650px ;
}

.budget-table th,.budget-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line) ;
}

.budget-table th {
  background: #172f55;
  color: #fff;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em ;
}

.budget-table tr:last-child td {
  border-bottom: 0 ;
}

.budget-table td:nth-child(n+2) {
  font-weight: 750 ;
}

.budget-table td:nth-child(n+2):after {
  content: " / jour";
  color: var(--muted);
  font-size: .84em;
  font-weight: 600 ;
}

.method {
  color: var(--muted);
  font-size: .82rem;
  margin-top: 18px ;
}

.faq {
  padding: 90px 0 ;
}

.faq-panel {
  padding: clamp(30px,4vw,46px);
  background: #f5f9fd;
  border: 1px solid #dce8f2;
  border-radius: 24px ;
}

.faq-heading {
  max-width: 1100px;
  margin-bottom: 28px ;
}

.faq-heading h2 {
  color: var(--blue);
  font-family: var(--font-sans);
  font-size: clamp(2rem,3vw,2.8rem);
  text-transform: uppercase ;
}

.faq-list {
  display: grid;
  gap: 12px ;
}

.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 20px ;
}

.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 18px 0;
  font-weight: 800;
  cursor: pointer;
  list-style: none ;
}

.faq summary:after {
  content: "+";
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  margin: -7px 0;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 1.3rem ;
}

.faq details[open] summary:after {
  content: "−" ;
}

.faq details p {
  margin-top: 0;
  color: var(--muted) ;
}

.related {
  padding: 85px 0;
  background: #fff ;
}

.top10-library-head {
  padding: clamp(28px,4vw,44px);
  background: linear-gradient(135deg,#f1f8ff,#eaf5ff);
  border: 1px solid #d7e9f8;
  border-radius: 24px ;
}

.top10-library-head h2 {
  margin: 12px 0 10px;
  color: var(--blue);
  font-family: var(--font-sans);
  font-size: clamp(2rem,3vw,2.8rem);
  text-transform: uppercase ;
}

.top10-library-head p {
  max-width: 1120px;
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.65 ;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
  margin-top: 30px ;
}

.related-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 15px;
  min-width: 0;
  padding: 20px;
  background: #fff;
  border: 1px solid #dce8f2;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(16,37,63,.06);
  transition: transform .2s ease,box-shadow .2s ease,border-color .2s ease ;
}

.related-card .related-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0;
  background: #eef7ff;
  border-radius: 13px;
  font-size: 1.35rem ;
}

.related-card small {
  display: block;
  margin-bottom: 4px;
  color: var(--blue);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase ;
}

.related-card strong {
  display: block;
  color: var(--ink);
  font-size: 1rem ;
}

.related-card p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.4 ;
}

.related-card > b {
  color: var(--blue);
  font-size: 1.25rem ;
}

.related-card.is-current {
  background: #f3f9ff;
  border-color: var(--blue) ;
}

.related-card:hover {
  transform: translateY(-3px);
  border-color: #9fd3fa;
  box-shadow: 0 15px 30px rgba(16,37,63,.12) ;
}

/* 6. Animations et éléments fixes */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s ease,transform .65s ease ;
}

.reveal.visible {
  opacity: 1;
  transform: none ;
}

.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 30;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 0;
  box-shadow: 0 12px 30px rgba(7,80,111,.38);
  opacity: 0;
  pointer-events: none;
  transition: .2s ;
}

.to-top::before {
  content: "➜";
  display: block;
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1;
  transform: rotate(-90deg);
}

.to-top:hover,
.to-top:focus-visible {
  background: var(--coral);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 16px 34px rgba(16,37,63,.42);
}

.to-top.visible {
  opacity: 1;
  pointer-events: auto ;
}

/* Affichage d'accueil complet sur les ordinateurs

   La hauteur et les espacements ci-dessous permettent de voir dès
   l'ouverture : le titre, le texte, les boutons, les avantages et la
   recherche. Les règles tablette et mobile restent indépendantes. */

@media(min-width:1200px) {
  :root {
    --hero-shell-height: calc(100svh - 145px);
  }

  .site-header .container {
    width: min(calc(100% - 32px),1450px);
  }

  .nav-wrap {
    gap: 16px;
  }

  .main-nav {
    gap: 2px;
  }

  .nav-link,.nav-button {
    padding-inline: .62rem;
  }

  .nav-cta {
    padding-inline: 1.35rem;
    white-space: nowrap;
  }

  .hero {
    height: var(--hero-shell-height);
    min-height: var(--hero-shell-height);
    align-items: center;
  }

  .article-hero {
    height: var(--hero-shell-height);
    min-height: var(--hero-shell-height);
    align-items: center;
  }

  .hero-content {
    padding-top: var(--hero-content-edge-space);
    padding-bottom: calc(var(--hero-content-edge-space) + var(--search-panel-overlap));
  }

  .article-hero > .container {
    padding-top: var(--hero-content-edge-space);
    padding-bottom: calc(var(--hero-content-edge-space) + var(--search-panel-overlap));
  }

  .hero h1 {
    max-width: 1180px;
    font-size: clamp(4.5rem,5.4vw,6.25rem);
  }

  .hero .lead {
    margin: 1rem 0 1.25rem;
  }

  .hero-proof {
    margin-top: 1.25rem;
  }
}

/* 7. Adaptation aux tablettes et aux téléphones */

@media(max-width:1199px) {
  .menu-toggle {
    display: block ;
  }
  .main-nav {
    position: fixed;
    inset: 76px 0 auto;
    display: none;
    max-height: calc(100vh - 76px);
    overflow: auto;
    align-items: stretch;
    padding: 14px 20px 24px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow) ;
  }
  .main-nav.open {
    display: grid ;
  }
  .nav-link,.nav-button {
    text-align: left;
    width: 100%;
    padding: .85rem ;
  }
  .nav-item {
    position: static ;
  }
  .dropdown {
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0 0 8px 12px;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--aqua);
    border-radius: 0 ;
  }
  .dropdown a {
    white-space: normal;
  }
  .nav-cta {
    display: none ;
  }
  .continent-grid {
    grid-template-columns: 1fr 1fr ;
  }
  .continent-card-featured {
    grid-column: span 2;
    grid-row: auto ;
  }
  .routes-grid {
    grid-template-columns: 1fr 1fr ;
  }
  .europe-showcase-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  .morocco-showcase-panel {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .top10-discovery-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .ranking-grid {
    grid-template-columns: 1fr ;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr ;
  }
  .related-grid {
    grid-template-columns: 1fr 1fr ;
  }
}

/* La grille Europe reste en 3 × 2 sur ordinateur, y compris sur les
   portables compacts. Elle ne passe à deux colonnes que sur tablette. */
@media(min-width:701px) and (max-width:980px) {
  :root {
    --title-1: clamp(2.15rem,5.4vw,3.2rem);
    --title-2: clamp(1.5rem,3.5vw,2rem);
    --title-3: clamp(1.12rem,2.5vw,1.3rem);
    --title-4: clamp(1rem,2vw,1.15rem);
    --title-5: 1rem;
    --title-6: .88rem;
    --section-gap: 80px;
  }

  .destinations-head {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .europe-showcase-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .steps-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .step-card:last-child {
    grid-column: span 2;
  }

  .mobile-guide-panel {
    grid-template-columns: 1fr;
  }
}

@media(max-width:700px) {
  :root {
    --title-1: clamp(1.85rem,7.4vw,2.25rem);
    --title-2: clamp(1.42rem,6vw,1.72rem);
    --title-3: clamp(1.08rem,4.8vw,1.25rem);
    --title-4: clamp(1rem,4.2vw,1.12rem);
    --title-5: .96rem;
    --title-6: .84rem;
    --section-gap: 56px;
    --mobile-hero-top-gap: 18px;
    --mobile-hero-height: 500px;
  }
  .container {
    width: min(calc(100% - 28px),var(--max)) ;
  }
  .brand-logo {
    width: 52px;
    height: 52px;
  }
  .brand-name strong {
    font-size: .75rem;
  }
  .brand-name small {
    font-size: .48rem;
    letter-spacing: .09em;
  }
  .footer .brand {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    margin-right: 0;
  }
  .footer .brand-logo-footer {
    width: 76px;
    height: 76px;
  }
  .footer .brand-name {
    display: grid;
    gap: .35rem;
    transform: translateY(4px);
    opacity: 1;
    visibility: visible;
  }
  .footer .brand-name strong {
    color: #fff;
    font-size: .92rem;
    line-height: 1.15;
    letter-spacing: .045em;
  }
  .footer .brand-name small {
    color: #42c8e8;
    font-size: .58rem;
    line-height: 1.25;
    letter-spacing: .11em;
  }
  .to-top {
    right: 14px;
    bottom: max(14px, env(safe-area-inset-bottom));
    width: 46px;
    height: 46px;
    border-width: 2px;
    background: var(--coral);
    box-shadow: 0 7px 18px rgba(16,37,63,.34);
  }
  .to-top::before {
    font-size: 1.4rem;
  }
  .hero,
  .article-hero {
    height: auto;
    min-height: 0;
    align-items: start;
  }
  .hero:after {
    background: linear-gradient(0deg,rgba(6,38,57,.93),rgba(6,38,57,.35)) ;
  }
  .hero-content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: auto;
    padding: var(--mobile-hero-top-gap) 0 28px ;
  }
  .article-hero > .container {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: auto;
    padding: var(--mobile-hero-top-gap) 0 28px;
  }

  /* Réglage mobile commun : contenu du héros remonté pour laisser apparaître
     le moteur de recherche dès le premier écran sur toutes les pages. */
  .hero .eyebrow,
  .article-hero .eyebrow {
    margin-bottom: 8px;
    font-size: .68rem;
  }
  .hero h1,
  .article-hero h1 {
    margin-bottom: 12px;
    font-size: clamp(2.05rem, 8.6vw, 2.65rem);
    line-height: 1;
  }
  .hero .lead,
  .article-hero .lead {
    margin: 0;
    font-size: .9rem;
    line-height: 1.45;
  }
  .hero-actions,
  .article-actions {
    gap: 16px;
    margin-top: 24px;
  }
  .hero-actions .btn,
  .article-actions .btn {
    min-height: 44px;
    padding: .58rem 1rem;
    font-size: .88rem;
  }
  .hero-proof {
    display: none;
  }
  .hero-proof span:before {
    width: 18px;
    height: 18px;
    margin-right: .35rem;
  }
  .hero-proof-mobile {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 6px;
    width: min(calc(100% - 20px), 680px);
    margin: 16px auto 0;
    color: var(--ink);
  }
  .hero-proof-mobile span {
    display: flex;
    min-width: 0;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 5px 2px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-size: clamp(.48rem, 2.35vw, .62rem);
    font-weight: 800;
    text-align: center;
    line-height: 1;
    white-space: nowrap;
  }
  .hero-proof-mobile span:before {
    content: "✓";
    display: inline-grid;
    place-items: center;
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    margin-right: 2px;
    border-radius: 50%;
    background: rgba(65,165,254,.12);
    color: var(--coral);
    font-size: .68rem;
    font-weight: 900;
  }
  .search-card {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .search-panel {
    margin-top: clamp(44px, 8svh, 72px);
  }
  .search-card label {
    min-height: 52px ;
  }
  .search-card .btn {
    width: 100% ;
  }
  .ad-placement {
    width: calc(100% - 24px);
    margin-top: 12px;
    margin-bottom: 12px;
  }
  .section-intro {
    grid-template-columns: 1fr;
    gap: 18px ;
  }
  .destinations-panel {
    padding: 24px;
    border-radius: 22px;
  }
  .destinations-head {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 24px;
  }
  .destinations-head > *,
  .destinations-copy,
  .destination-search-card,
  .continent-card-copy {
    min-width: 0;
    max-width: 100%;
  }
  .destination-search-card {
    margin-top: 22px;
    padding: 20px;
  }
  .destination-search-card h3 {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .destination-search-card p,
  .destination-search-card small,
  .destinations-copy .lead,
  .continent-card-copy {
    overflow-wrap: anywhere;
  }
  .destination-search-card form {
    grid-template-columns: 1fr;
  }
  .destination-search-button {
    width: 100%;
  }
  .continent-grid,.steps-grid,.routes-grid,.feature,.downloads-panel,.faq-layout {
    grid-template-columns: 1fr ;
  }
  .step-card:last-child {
    grid-column: auto;
  }
  .europe-showcase-grid {
    grid-template-columns: 1fr;
  }
  .morocco-showcase-panel {
    padding: 24px;
  }
  .morocco-showcase-actions {
    display: grid;
  }
  .morocco-showcase-actions a {
    justify-content: center;
  }
  .top10-discovery-grid {
    grid-template-columns: 1fr;
  }
  .mobile-guide-panel {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 24px;
    border-radius: 22px;
  }
  .mobile-guide-benefits {
    grid-template-columns: 1fr;
  }
  .mobile-guide-button {
    justify-content: center;
    width: 100%;
  }
  .downloads-panel {
    padding: 24px;
    border-radius: 22px;
  }
  .downloads-benefits {
    grid-template-columns: 1fr;
  }
  .downloads-button {
    width: 100%;
    padding-inline: 18px;
    text-align: center;
  }
  .continent-card-featured {
    grid-column: auto ;
    grid-row: auto;
    min-height: 180px;
  }
  .routes-grid {
    gap: 14px ;
  }
  .route-card {
    display: block;
  }

  .route-card-body {
    align-items: stretch;
  }

  .route-button {
    width: 100%;
  }
  .route-card img {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
  .feature img {
    height: 300px ;
  }
  .feature-copy {
    padding: 34px 25px ;
  }
  .destination-card {
    grid-template-columns: 1fr ;
  }
  .destination-media {
    height: 220px ;
  }
  .destination-body {
    padding: 28px 22px 24px 74px ;
  }
  .stats {
    grid-template-columns: 1fr 1fr ;
    margin-left: -52px ;
  }
  .stat:first-child {
    grid-column: span 2 ;
  }
  .card-links {
    grid-template-columns: 1fr;
    margin-left: -52px ;
  }
  .budget-profiles {
    grid-template-columns: 1fr ;
  }
  .table-swipe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 22px 0 10px;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
  }
  .table-swipe-hint span {
    color: var(--coral);
    font-size: 1.25rem;
    line-height: 1;
  }
  .table-swipe-hint + .budget-table-wrap {
    margin-top: 0;
  }
  .faq-panel {
    padding: 24px ;
  }
  .footer-grid {
    grid-template-columns: 1fr ;
  }
  .footer-bottom {
    flex-direction: column ;
  }
  .related-grid {
    grid-template-columns: 1fr ;
  }
}

/* Hero adaptatif sur tout le cycle d'écrans

   Les paliers de largeur choisissent la composition. Les requêtes de hauteur
   ci-dessous empêchent le contenu de sortir du premier écran en paysage. */

/* Tablettes et petits ordinateurs : le contenu reste visible sans attendre
   le bas d'un bandeau de hauteur fixe. */
@media (min-width: 701px) and (max-width: 1199px) {
  :root {
    --hero-content-edge-space: clamp(42px, 7vh, 76px);
    /* Réserve toujours la hauteur nécessaire au moteur de recherche lorsque
       la fenêtre passe progressivement de l'ordinateur au format mobile. */
    --hero-shell-height: clamp(500px, calc(100svh - 160px), 650px);
  }

  .hero,
  .article-hero {
    height: var(--hero-shell-height);
    min-height: var(--hero-shell-height);
    align-items: center;
  }

  .hero-content,
  .article-hero > .container {
    width: min(calc(100% - 48px), var(--max));
    padding-top: var(--hero-content-edge-space);
    padding-bottom: calc(var(--hero-content-edge-space) + var(--search-panel-overlap));
  }

  .hero h1,
  .article-hero h1 {
    max-width: 820px;
    font-size: clamp(2.8rem, 6vw, 4.8rem);
    line-height: .98;
  }

  .hero .lead,
  .article-hero .lead {
    max-width: 720px;
    margin: 1rem 0 1.25rem;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
  }

  .hero-proof {
    margin-top: 1.25rem;
  }
}

/* Fenêtres larges mais basses : téléphones en paysage, tablettes paysage,
   petits portables et fenêtres redimensionnées. */
@media (min-width: 701px) and (max-height: 620px) {
  :root {
    --hero-content-edge-space: 28px;
    --hero-shell-height: max(390px, calc(100svh - 70px));
    --search-panel-overlap: 28px;
  }

  .site-header .container {
    min-height: 70px;
  }

  .brand-logo {
    width: 54px;
    height: 54px;
  }

  .hero,
  .article-hero {
    height: var(--hero-shell-height);
    min-height: var(--hero-shell-height);
    align-items: center;
  }

  .hero-content,
  .article-hero > .container {
    width: min(calc(100% - 48px), var(--max));
    padding-top: var(--hero-content-edge-space);
    padding-bottom: calc(var(--hero-content-edge-space) + var(--search-panel-overlap));
  }

  .hero h1,
  .article-hero h1 {
    max-width: 900px;
    margin-bottom: 10px;
    font-size: clamp(2.25rem, 5.5vw, 4rem);
    line-height: .95;
  }

  .hero .lead,
  .article-hero .lead {
    max-width: 760px;
    margin: .7rem 0 1rem;
    font-size: clamp(.94rem, 1.65vw, 1.08rem);
    line-height: 1.38;
  }

  .hero-actions,
  .article-actions {
    gap: 10px;
  }

  .hero-actions .btn,
  .article-actions .btn {
    min-height: 42px;
    padding: .62rem 1rem;
  }

  .hero-proof {
    margin-top: .9rem;
    gap: 1rem;
  }

  .search-panel {
    margin-top: -28px;
  }
}

/* Téléphone paysage : mêmes informations qu'en portrait, mais disposées sur
   deux colonnes pour utiliser la largeur sans imposer un long défilement. */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  :root {
    --mobile-hero-height: auto;
    --section-gap: 28px;
  }

  .hero,
  .article-hero {
    height: auto;
    min-height: max(350px, calc(100svh - 66px));
    align-items: center;
  }

  .hero-content,
  .article-hero > .container {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr);
    grid-template-rows: auto auto auto;
    column-gap: 24px;
    align-content: center;
    height: auto;
    padding: 24px 0 42px;
  }

  .hero .eyebrow,
  .article-hero .eyebrow,
  .hero h1,
  .article-hero h1,
  .hero .lead,
  .article-hero .lead {
    grid-column: 1;
  }

  .hero .eyebrow,
  .article-hero .eyebrow {
    margin-bottom: 6px;
  }

  .hero h1,
  .article-hero h1 {
    margin: 0 0 8px;
    font-size: clamp(2rem, 5.4vw, 3.2rem);
    line-height: .95;
  }

  .hero .lead,
  .article-hero .lead {
    font-size: .88rem;
    line-height: 1.35;
  }

  .hero-actions,
  .article-actions {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    display: grid;
    margin: 0;
  }

  .hero-actions .btn,
  .article-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 42px;
    padding: .55rem .7rem;
    font-size: .78rem;
    white-space: nowrap;
  }

  .hero-proof {
    display: none;
  }

  .hero-proof-mobile {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
    width: min(calc(100% - 32px), var(--max));
    margin: 12px auto 0;
    color: var(--ink);
  }

  .hero-proof-mobile span {
    display: flex;
    min-width: 0;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
  }

  .hero-proof-mobile span:before {
    content: "✓";
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin-right: 4px;
    border-radius: 50%;
    background: rgba(65,165,254,.12);
    color: var(--coral);
    font-size: .68rem;
    font-weight: 900;
  }

  .search-panel {
    margin-top: -24px;
  }

  .section {
    padding-top: calc(var(--section-gap) / 2);
    padding-bottom: calc(var(--section-gap) / 2);
  }

}

/* Très petits téléphones : les trois repères restent sur une seule rangée. */
@media (max-width: 360px) {
  .hero-proof-mobile {
    gap: 4px;
    width: calc(100% - 12px);
  }

  .hero-proof-mobile span {
    min-height: 40px;
    padding-inline: 1px;
    font-size: .47rem;
  }

  .hero-proof-mobile span:before {
    width: 13px;
    height: 13px;
    flex-basis: 13px;
    font-size: .58rem;
  }
}

/* Très petits téléphones en portrait : aucune largeur fixe ni débordement. */
@media (max-width: 420px) and (orientation: portrait) {
  .hero-actions,
  .article-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero-actions .btn,
  .article-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* MODÈLE MOBILE COMMUN À TOUTES LES PAGES
   Réutiliser mobile-poster-fold, mobile-poster et mobile-poster-search sur
   chaque nouvelle page : affiche verticale complète, puis recherche dessous. */
.standard-mobile-poster {
  display: none;
  overflow: hidden;
  background: #fff;
}

.standard-mobile-intro {
  padding: clamp(34px, 5vw, 72px) 0 clamp(28px, 4vw, 58px);
  background: linear-gradient(135deg, #f4faff 0%, #edf7ff 100%);
}

@media (max-width: 700px) {
  .standard-desktop-hero {
    display: none !important;
  }

  .standard-mobile-poster {
    display: block !important;
    /* Gabarit mobile commun à l’Accueil, au Top 10 et aux guides. */
    aspect-ratio: 793 / 945;
  }

  .mobile-poster img {
    display: block;
    width: 100%;
    height: 100%;
    margin-inline: auto;
    object-fit: cover;
    object-position: center;
  }

  .mobile-poster-fold {
    display: block;
    min-height: 0;
    padding-bottom: 0;
  }

  .mobile-poster + .mobile-poster-search {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    width: min(calc(100% - 28px), var(--max)) !important;
    /* Même séparation que sur l'accueil et le Top 10 : le panneau commence
       sous l'affiche et ne la recouvre jamais. */
    margin-top: 10px !important;
    margin-bottom: max(18px, env(safe-area-inset-bottom)) !important;
    transform: none !important;
  }

  .mobile-poster-proof {
    display: none !important;
  }

  .standard-mobile-intro {
    padding: 30px 0 38px;
  }

  .standard-mobile-intro .btn {
    width: 100%;
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior: auto!important;
    transition: none!important ;
  }
  .reveal {
    opacity: 1;
    transform: none ;
  }
}

/* CHARTE ÉDITORIALE COMMUNE — RÈGLE FINALE PRIORITAIRE
   Ajoutez .editorial-heading au bloc qui contient le surtitre, le titre et
   son texte d'introduction. Cette règle est commune à l'accueil, aux Top 10
   et à toutes les futures pages, sur ordinateur, tablette et mobile. */
.editorial-heading .eyebrow {
  margin: 0 0 14px;
  font-size: clamp(.76rem, .7rem + .18vw, .88rem);
  line-height: 1.35;
  letter-spacing: .14em;
}

.editorial-heading .eyebrow:before {
  flex: 0 0 32px;
  width: 32px;
}

.editorial-heading h2 {
  max-width: 1100px;
  margin: 0 0 20px;
  color: var(--blue);
  font-family: var(--font-sans);
  font-size: clamp(2rem, 1.7rem + 1vw, 2.7rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

.editorial-heading > p,
.editorial-heading > .lead,
.editorial-heading > div > .lead {
  max-width: 1120px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, .96rem + .18vw, 1.1rem);
  line-height: 1.7;
}

@media (max-width: 700px) {
  .editorial-heading .eyebrow {
    margin-bottom: 12px;
    font-size: .76rem;
    line-height: 1.4;
    letter-spacing: .12em;
  }

  .editorial-heading .eyebrow:before {
    flex-basis: 28px;
    width: 28px;
  }

  .editorial-heading h2 {
    margin-bottom: 18px;
    font-size: clamp(1.65rem, 7.2vw, 2rem);
    line-height: 1.1;
  }

  .editorial-heading > p,
  .editorial-heading > .lead,
  .editorial-heading > div > .lead {
    font-size: 1rem;
    line-height: 1.65;
  }
}

/* AFFICHE PRINCIPALE COMMUNE AUX NOUVELLES PAGES
   L'image reste toujours entière. Son contenu HTML vient immédiatement après,
   avec la même construction sur ordinateur, tablette et tous les mobiles. */
.page-poster {
  overflow: hidden;
  background: #fff;
}

.page-poster > img,
.page-poster > picture,
.page-poster > picture > img {
  display: block;
  width: min(100%, 1800px);
  height: auto;
  margin-inline: auto;
  object-fit: contain;
}

.page-poster-intro {
  padding: clamp(34px, 5vw, 72px) 0 clamp(28px, 4vw, 58px);
  background: linear-gradient(135deg, #f4faff 0%, #edf7ff 100%);
}

.page-poster-copy {
  max-width: 1120px;
}

.page-poster-copy h1 {
  max-width: 1000px;
  margin: 0 0 20px;
  color: var(--blue);
  font-family: var(--font-sans);
  font-size: clamp(2.2rem, 1.75rem + 1.55vw, 3.35rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.page-poster-copy > p {
  max-width: 980px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, .96rem + .22vw, 1.14rem);
  line-height: 1.7;
}

/* Variante commune avec texte superposé.
   À réutiliser sur les futures pages avec :
   .page-poster.page-poster--overlay > img + .page-poster-intro */
.page-poster--overlay {
  position: relative;
  height: var(--hero-shell-height, 690px);
  min-height: var(--hero-shell-height, 690px);
  background: #071f36;
}

.page-poster--overlay > img,
.page-poster--overlay > picture,
.page-poster--overlay > picture > img {
  display: block;
  width: 100%;
  max-width: none;
  min-height: inherit;
  object-fit: cover;
}

.page-poster--overlay::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0, 77, 143, .68) 0%, rgba(0, 91, 164, .48) 35%, rgba(0, 91, 164, .12) 57%, rgba(0, 91, 164, 0) 72%);
  content: "";
  pointer-events: none;
}

.page-poster--overlay .page-poster-intro {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: clamp(40px, 6vw, 90px) 0;
  background: transparent;
}

.page-poster--overlay .page-poster-copy {
  width: min(calc(100% - 48px), 1480px);
  max-width: 1480px;
}

.page-poster--overlay .page-poster-copy h1 {
  max-width: 720px;
  color: #fff;
  font-size: clamp(2.75rem, 3.8vw, 4.8rem);
  text-shadow: 0 3px 18px rgba(0, 45, 84, .34);
}

.page-poster--overlay .page-poster-copy > p {
  max-width: 690px;
  color: rgba(255, 255, 255, .94);
  font-size: clamp(1.05rem, 1vw, 1.28rem);
}

.page-poster--overlay .eyebrow {
  color: #74c9ff;
}

@media (max-width: 700px) {
  .page-poster > img,
  .page-poster > picture,
  .page-poster > picture > img {
    width: 100%;
    max-width: none;
    height: auto;
    object-fit: contain;
  }

  .page-poster-intro {
    padding: 30px 0 38px;
  }

  .page-poster-copy {
    width: min(calc(100% - 32px), 1120px);
  }

  .page-poster-copy h1 {
    margin-bottom: 18px;
    font-size: clamp(1.75rem, 8vw, 2.15rem);
    line-height: 1.08;
  }

  .page-poster-copy > p {
    font-size: 1rem;
    line-height: 1.65;
  }

  .page-poster--overlay {
    min-height: 0;
    overflow: visible;
    background: #fff;
  }

  .page-poster--overlay > img,
  .page-poster--overlay > picture,
  .page-poster--overlay > picture > img {
    min-height: 0;
    aspect-ratio: auto;
    object-fit: contain;
  }

  .page-poster--overlay::after {
    display: none;
  }

  .page-poster--overlay .page-poster-intro {
    position: static;
    display: block;
    padding: 30px 0 38px;
    background: linear-gradient(135deg, #f4faff 0%, #edf7ff 100%);
  }

  .page-poster--overlay .page-poster-copy {
    width: min(calc(100% - 32px), 1120px);
  }

  .page-poster--overlay .page-poster-copy h1 {
    color: var(--blue);
    font-size: clamp(1.75rem, 8vw, 2.15rem);
    text-shadow: none;
  }

  .page-poster--overlay .page-poster-copy > p {
    color: var(--muted);
    font-size: 1rem;
  }

  .page-poster--overlay .eyebrow {
    color: var(--blue);
  }
}

/* PRIORITÉ FINALE : gabarit mobile commun, sans recadrage ni débordement. */
@media (max-width: 700px) {
  .home-mobile-poster,
  .top10-mobile-poster,
  .standard-mobile-poster,
  .mobile-poster {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }

  .mobile-poster img,
  .mobile-poster > picture > img,
  .home-mobile-poster img,
  .top10-mobile-poster img,
  .standard-mobile-poster img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    aspect-ratio: 1200 / 1430;
    object-fit: contain !important;
    object-position: center !important;
  }

  .mobile-poster + .mobile-poster-search,
  .mobile-poster-search {
    position: relative !important;
    inset: auto !important;
    width: min(calc(100% - 28px), 660px) !important;
    margin: 10px auto max(20px, env(safe-area-inset-bottom)) !important;
    transform: none !important;
  }

  .mobile-poster-search .search-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .mobile-poster-search .search-card .btn,
  .mobile-poster-search .search-card button {
    width: 100%;
    min-width: 0;
    white-space: nowrap;
  }
}

@media (max-width: 420px) {
  .mobile-poster + .mobile-poster-search,
  .mobile-poster-search {
    width: calc(100% - 20px) !important;
  }
}

/* En-tête mobile réellement fixe

   La hauteur réelle est synchronisée par modern.js. La réserve placée sur le
   body empêche l'en-tête de recouvrir l'affiche ou le contenu de la page. */

@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  html {
    scroll-padding-top: var(--mobile-header-height, 76px);
  }

  body {
    padding-top: var(--mobile-header-height, 76px) !important;
  }

  .site-header,
  .site-header.is-hidden,
  .site-header.header-hidden,
  .site-header.nav-hidden,
  body.is-scrolling-down .site-header,
  body.is-scrolling-up .site-header,
  body.header-hidden .site-header,
  body.nav-hidden .site-header {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 10000 !important;
    width: 100% !important;
    transform: none !important;
    translate: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    will-change: auto !important;
  }

  .site-header .container,
  .site-header .nav-wrap {
    transform: none !important;
    translate: none !important;
  }

  .main-nav {
    position: fixed;
    top: var(--mobile-header-height, 76px);
    z-index: 9999;
  }
}

/* Recherche directe de l accueil : action principale commune. */
.destination-search-button:hover { background: #e8593c; }