/*
 * Recitoria — responsive.
 *
 * ⚠️ Cette feuille se charge TOUJOURS en dernier, après la feuille de
 * direction. Une direction insérée après elle écraserait silencieusement
 * toutes les règles mobiles du gabarit.
 *
 * Colonnes fixées par palier, jamais repeat(auto-fit, minmax()) : sur des
 * grilles au compte connu, auto-fit produit des lignes orphelines dès que le
 * compte ne tombe pas juste.
 *
 * La vérification se fait par balayage de largeurs en JavaScript (lignes
 * reconstituées par l'offsetTop des enfants), pas par trois captures : la
 * casse se produit dans les plages qu'on ne teste pas, typiquement entre
 * 1050 et 1180 px.
 */

@media (max-width: 1180px) {
  .hero__interieur { gap: 2.2rem; }
  .nav__liste { gap: 1rem; }
  .nav__liste a, .nav__liste span { font-size: 0.9rem; }
}

@media (max-width: 1080px) {
  .grille--n4,
  .grille--n5,
  .grille--n6,
  .grille--n7,
  .grille--n8 { grid-template-columns: repeat(2, 1fr); }

  .pied__colonnes { grid-template-columns: repeat(3, 1fr); }
  .mini-galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-visual,
  .home-visual--inverse { grid-template-columns: 1fr; }
  .home-visual__texte { max-width: 62ch; }

  .conteneur--avec-rail { grid-template-columns: minmax(0, 1fr); }
  .rail { padding-top: 0; max-width: 74ch; }
  .rail__cta { position: static; }
}

@media (max-width: 940px) {
  .entete__interieur { padding-block: 0.75rem; position: relative; }
  .nav { min-width: auto; }

  .nav__bascule { display: inline-flex; }

  .nav__deroulant {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background: var(--surface-entete);
    border-bottom: var(--filet-epaisseur) solid var(--filet-couleur);
    box-shadow: var(--ombre-carte);
    padding: 0.4rem 1.25rem 1.2rem;
  }
  .nav__deroulant--ouvert { display: block; }

  .nav__liste { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; max-width: 100%; }
  .nav__liste li { width: 100%; }
  .nav__liste a, .nav__liste span {
    display: block;
    width: 100%;
    padding-block: 0.85rem;
    border-bottom: var(--filet-epaisseur) solid var(--filet-couleur);
  }
  .nav__liste li:last-child a { border-bottom: none; }

  .hero { padding-block: 2.8rem 2.4rem; }
  .hero--photo { min-height: 540px; padding-block: 4.2rem 3rem; }
  .hero__interieur { grid-template-columns: 1fr; gap: 2rem; }
  .hero__reperes--ligne { grid-template-columns: 1fr; max-width: 520px; }
  .hero__reperes--ligne .repere + .repere {
    border-left: 0;
    border-top: var(--filet-epaisseur) solid var(--filet-hero-reperes);
    padding-left: 0;
    padding-top: 0.9rem;
  }

  .affluence { grid-template-columns: 1fr; gap: 1.8rem; }
  .prehero { min-height: 320px; }
  .prehero__interieur { padding-block: 2.6rem 2.8rem; }
  .prehero__macaron { width: clamp(138px, 20vw, 180px); }

  .appel { grid-template-columns: 1fr; gap: 1.2rem; }

  /* Libellé de bouton long ("Comparer les billets et les séjours") : nowrap
     déborde du conteneur sous ~400px. Pleine largeur, texte autorisé à
     revenir à la ligne plutôt que de sortir du cadre. */
  .cta-btn { white-space: normal; text-align: center; width: 100%; justify-content: center; }

  .decision,
  .decision--n1,
  .decision--n2,
  .decision--n3 { grid-template-columns: 1fr; }

  :root {
    --taille-h1: 2.3rem;
    --taille-h2: 1.6rem;
  }
}

@media (max-width: 720px) {
  .pied__colonnes { grid-template-columns: repeat(2, 1fr); }
  .affluence__bande { grid-template-columns: repeat(2, 1fr); }
  .mini-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .grille--n2,
  .grille--n3,
  .grille--n4,
  .grille--n5,
  .grille--n6,
  .grille--n7,
  .grille--n8 { grid-template-columns: 1fr; }

  .section { padding-block: 2.4rem; }
  .section--mini-galerie { padding-block: 0 2.2rem; }
  .conteneur { padding-inline: 1rem; }
  .appel { padding: 1.5rem 1.4rem; }
  .hero__actions { flex-direction: column; align-items: flex-start; }
  .hero__actions .bouton { max-width: 100%; justify-content: center; text-align: center; }
  .hero--photo { min-height: 590px; padding-block: 3.4rem 3rem; }
  .mini-galerie { gap: 0.85rem; margin-top: -1.4rem; }
  .mini-carte__titre { font-size: 0.94rem; }
  .home-visual { gap: 1.1rem; margin-bottom: 1.7rem; }
  .home-visual__images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 0.7rem;
    min-height: 0;
  }
  .home-visual__image { aspect-ratio: 4 / 3; }
  .home-visual__image--large {
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: 16 / 9;
  }
  .home-stack { grid-template-columns: 1fr; }
  .prehero { min-height: 380px; align-items: center; }
  .prehero__interieur {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 0.9rem;
    padding-block: 2.4rem;
  }
  .prehero__macaron {
    order: -1;
    justify-self: center;
    width: clamp(112px, 34vw, 138px);
    padding: 0.42rem;
  }
  .prehero__badge { margin-inline: auto; }
  .prehero__titre { margin-inline: auto; }
  .nav__liste a, .nav__liste span { font-size: 0.94rem; }

  :root {
    --taille-h1: 2rem;
    --taille-chapo: 1.08rem;
  }
}

@media (max-width: 420px) {
  .pied__colonnes { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .propos { grid-template-columns: 1fr; gap: 1.8rem; }
}