/* Site par Orz · Dylan · NoemaWorks · https://noemaworks.net
   mobile.css : charge en dernier. DESIGN.md section 8, 360 a 430 px d'abord. */

/* ------------------------------------------------- 1200 px : grille resserree */

@media (max-width: 1200px) {
  :root { --section-pad: 104px; }

  .stations__layout { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
  .stations__viewport { --stations-fondu: 48px; }
  .station { width: 340px; }
  .station__media { height: 440px; }
  .gallery { grid-auto-rows: 200px; }
}

/* --------------------------------------- 1040 px : la nav passe en panneau */

@media (max-width: 1040px) {
  .nav__links,
  .nav__tel { display: none; }

  .nav__burger { display: inline-flex; }

  .hero__copy { grid-column: 1 / span 8; }
  #dragon-anchor-hero { grid-column: 9 / span 4; width: min(38vw, 380px); }

  .concept__text { grid-column: 1 / span 7; }
  .concept__photo { grid-column: 8 / span 5; }

  .tarifs__head { grid-column: 1 / span 5; }
  .tarifs__body { grid-column: 6 / span 7; }

  .avis__score { grid-column: 1 / span 5; }
  .avis__deck,
  .avis__nav { grid-column: 6 / span 7; }

  .infos__side { grid-column: 1 / span 6; }
  .infos__map-wrap { grid-column: 7 / span 6; }
  #map { height: 440px; }
  .map-fallback { height: 440px; }

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

/* ------------------------------------ 860 px : une colonne, barre du bas */

@media (max-width: 860px) {
  :root {
    --gutter: 20px;
    --edge: 20px;
    --section-pad: 80px;
  }

  body { padding-bottom: 56px; }

  .mobile-bar { display: flex; }

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

  .wrap { width: calc(100% - 2 * var(--edge)); }

  /* --- hero --- */
  .hero {
    min-height: 100dvh;
    padding-block: calc(var(--nav-h) + 28px) 96px;
    justify-content: flex-end;
  }

  .hero__media { inset: -4% 0; }

  .hero__veil {
    background:
      linear-gradient(to top,
        rgb(14 10 10 / .92) 0%,
        rgb(14 10 10 / .78) 34%,
        rgb(14 10 10 / .42) 62%,
        rgb(14 10 10 / .12) 88%),
      linear-gradient(to right, rgb(14 10 10 / .40), rgb(14 10 10 / .12));
  }

  /* le calque du dragon est fixe en z-index 20 : on remonte le texte du hero
     au-dessus pour que le dragon reste derriere le titre, comme prevu. */
  .hero__inner {
    position: relative;
    z-index: calc(var(--z-dragon) + 1);
  }

  .hero__copy {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 2;
  }

  .hero h1 { max-width: 12ch; }

  .hero .lead {
    max-width: 30ch;
    font-size: 1.0625rem;
    margin-bottom: 28px;
  }

  /* le dragon passe derriere le titre, en SVG 2D (mode lite) */
  #dragon-anchor-hero {
    grid-column: 1;
    grid-row: 1;
    position: absolute;
    top: 5%;
    right: -8%;
    width: 44vw;
    z-index: 0;
    opacity: .42;
    justify-self: end;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .hero__actions .btn {
    width: 100%;
    min-height: 52px;
  }

  .hero__actions .tel-link {
    justify-content: center;
    min-height: 48px;
  }

  /* les compteurs et le bouton de rugissement passent sous le pli */
  .hero__foot {
    position: static;
    transform: none;
    left: auto;
    bottom: auto;
    width: calc(100% - 2 * var(--edge));
    margin: 32px auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .roar-btn { min-height: 48px; }

  /* --- chiffres --- */
  .figures { grid-template-columns: minmax(0, 1fr); }

  .figure__cell { padding-right: 0; }

  .figure__cell + .figure__cell {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line-on-rice);
    margin-top: 28px;
    padding-top: 28px;
  }

  .figure-xl { font-size: clamp(4.5rem, 22vw, 7rem); }

  .figure__label { margin-top: 10px; max-width: none; }

  /* --- concept --- */
  #concept { padding-top: 56px; }

  .concept__text { grid-column: 1; }

  .concept__photo {
    grid-column: 1;
    margin-top: 40px;
  }

  .concept__photo img { height: 58vh; max-height: 460px; }

  /* --- cinq coins --- */
  .coin__media img { object-position: 50% 42%; }

  .coin__plinth {
    min-height: 104px;
    padding-block: 18px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    /* Les boutons ronds flottent dans le coin bas droit. Sans cette reserve,
       la derniere ligne de l'explication passait dessous et paraissait
       tranchee net au bord de l'ecran. */
    padding-right: calc(var(--edge) + 60px);
  }

  .coin__word { font-size: clamp(2.5rem, 15vw, 4.5rem); }

  /* Au doigt, le kicker redisait en petit ce que l'explication du socle donne
     en entier, et la barre du haut lui coupait la moitie des lettres quand le
     panneau entrait dans l'ecran. L'explication porte le message a elle seule. */
  .coin__kicker { display: none; }

  /* --- stations : liste verticale --- */
  .stations__layout {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 0;
  }

  /* La gouttiere de 20 px vaut pour tout le texte du site. Le plein bord reste
     reserve aux photos, comme le reste de la page. */
  .stations__head { padding-inline: var(--edge); }

  .stations__head h2 { max-width: none; }

  /* Liste verticale : plus de sortie par la gauche, donc plus de fondu ni de
     debord dans la gouttiere, et rien a tirer. */
  .stations__viewport {
    overflow: visible;
    scroll-snap-type: none;
    cursor: auto;
    margin-left: 0;
    padding-left: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .stations__track {
    flex-direction: column;
    width: auto;
    gap: 44px;
    padding-right: 0;
    margin-top: 40px;
    transform: none !important;
  }

  .station,
  .station:nth-child(even) { width: 100%; margin-top: 0; }

  .station__media,
  .station:nth-child(even) .station__media {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  /* Le bloc de texte de chaque carte reprend la gouttiere. La photo au-dessus
     reste pleine largeur, le rythme vertical vient toujours de .station__index. */
  .station__body { padding-inline: var(--edge); }

  .station--mer .station__body { padding: 18px 20px 22px; }

  /* --- tarifs --- */
  .tarifs__head,
  .tarifs__body { grid-column: 1; }

  .tarifs__body { margin-top: 40px; }

  .tarif-row { gap: 10px; padding-block: 12px; }

  .tarif-row__label { max-width: 55%; font-size: 1rem; }

  .tarif-bloc--adulte .tarif-row__price { font-size: 1.75rem; }

  .tarif-row__price { font-size: 1.375rem; }

  .tarifs__link .btn { width: 100%; }

  /* --- a la une --- */
  .alaune__photo,
  .alaune__text { grid-column: 1; }

  .alaune__photo {
    margin-left: calc(-1 * var(--edge));
    width: calc(100% + 2 * var(--edge));
    margin-bottom: 32px;
  }

  /* une seule colonne de page : les deux photos reprennent leur format, sans
     suivre la hauteur du texte */
  .alaune__photo { gap: 8px; min-height: 0; }

  .alaune__photo img,
  .alaune__video { height: auto; aspect-ratio: 4 / 5; }

  .alaune__photo img:only-child { aspect-ratio: 3 / 2; }

  .alaune__text h3 { max-width: none; }

  /* --- galerie : 2 colonnes, 8 photos puis un bouton --- */
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 160px;
    gap: 4px;
  }

  .gallery .g-6x2,
  .gallery .g-3x2,
  .gallery .g-4x2,
  .gallery .g-6x1,
  .gallery .g-4x1,
  .gallery .g-3x1 {
    grid-column: span 1;
    grid-row: span 1;
  }

  .gallery__item:nth-child(1),
  .gallery__item:nth-child(7) { grid-column: span 2; }

  .gallery:not(.is-open) .gallery__item:nth-child(n + 9) { display: none; }

  .gallery__more { display: inline-flex; }

  .gallery.is-open ~ .gallery__more { display: none; }

  .lightbox__prev { left: 12px; }
  .lightbox__next { right: 12px; }
  .lightbox__close { top: 12px; right: 12px; }

  /* --- reels --- */
  .reels { gap: 16px; }

  .reel { width: 78vw; }

  .reel:nth-child(odd) .reel__frame,
  .reel:nth-child(even) .reel__frame { transform: none; }

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

  .ig__legend { opacity: 1; font-size: .6875rem; padding: 8px 10px; }

  /* --- avis : une carte, glissement au doigt --- */
  .avis__score,
  .avis__deck,
  .avis__nav { grid-column: 1; }

  .avis__deck {
    display: flex;
    gap: 16px;
    margin-top: 40px;
    min-height: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    margin-inline: calc(-1 * var(--edge));
    padding-inline: var(--edge);
    scrollbar-width: none;
  }

  .avis__deck::-webkit-scrollbar { display: none; }

  .avis-card {
    grid-area: auto;
    flex: none;
    width: min(84vw, 420px);
    scroll-snap-align: center;
    transform: none !important;
    z-index: auto;
  }

  .avis-card blockquote { font-size: 1.125rem; max-width: none; }

  .avis__nav { margin-top: 20px; gap: 10px 14px; }

  /* Neuf pastilles de 44 px ne tiennent pas dans la largeur. Au doigt, la carte
     se fait glisser, et les fleches avec le compteur disent ou on en est. */
  .avis__controls { display: none; }

  .avis__lien { margin-left: 0; flex-basis: 100%; }

  .avis__dot::before {
    content: "";
    display: block;
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: var(--line-on-rice);
  }

  .avis__dot[aria-current="true"]::before { background: var(--lacquer-deep); }

  /* --- infos --- */
  .infos__side,
  .infos__map-wrap { grid-column: 1; }

  .infos__map-wrap { margin-top: 40px; }

  #map,
  .map-fallback { height: 320px; }

  #map { touch-action: pan-y; }

  /* --- pied de page --- */
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }

  .footer__logo { width: 220px; }

  .site-footer { padding-block: 80px 24px; }

  .footer__bottom { margin-top: 48px; }

  .signature { margin-left: 0; }

  /* --- carte.html --- */
  .menu-nav { margin-bottom: 48px; }

  .ardoise__row { padding-block: 12px; }

  .ardoise__row--buffet .ardoise__price { font-size: 1.5rem; }

  .page-head { padding-block: calc(var(--nav-h) + 56px) 40px; }
}

/* ---- sous 700 px, main.js n'epingle plus les cinq coins : on revient a la
   liste verticale, sinon seul le dernier panneau serait visible. ---------- */

@media (max-width: 699px) {
  .is-preloaded .coins { height: auto; overflow: visible; }

  .is-preloaded .coin {
    position: relative;
    inset: auto;
    height: 68vh;
    transform: none !important;
  }
}

/* --------------------------------------- 430 px : la plus petite largeur */

@media (max-width: 430px) {
  .hero h1 { font-size: clamp(2.2rem, 11vw, 2.9rem); max-width: 14ch; }

  .hero .lead { max-width: 26ch; }

  .hero__counters { font-size: .8125rem; gap: 6px 12px; }

  .nav__word { font-size: 1.0625rem; }

  .coin__word { font-size: clamp(2.25rem, 14vw, 3.5rem); }

  .menu__links a { font-size: clamp(1.75rem, 8.5vw, 2.25rem); }

  .footer__logo { width: 180px; }

  .figure-xl { font-size: clamp(4rem, 24vw, 6rem); }

  .tarif-row__label { max-width: 52%; font-size: .9375rem; }

  .tarif-bloc--adulte .tarif-row__price { font-size: 1.5rem; }

  .tarif-row__price { font-size: 1.1875rem; }
}

/* ------------------------------------------- cibles tactiles : 48 px min */

@media (pointer: coarse) {
  .nav__links a,
  .menu__links a,
  .footer__col a,
  .footer__bottom a,
  .menu-nav__list a,
  .menu-nav__list button,
  .link-arrow,
  .tel-link {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
  }

  .footer__col ul { gap: 2px; }

  .gallery__item { cursor: default; }
}

/* ------------------------------------------------------------------------
   Passe tactile : releves d'une verification reelle a 390 px.
   Cibles portees a 44 px et lisibilite des plus petits textes.
   ------------------------------------------------------------------- */

@media (max-width: 900px) {
  /* kickers : 11 px passait sous le seuil de lisibilite au doigt */
  .coin__kicker { font-size: .9375rem; padding: 10px 16px; }
  .od-map__aide { font-size: .8125rem; }
}

@media (pointer: coarse), (max-width: 900px) {
  /* la marque de la barre de navigation : 40 px de haut, il en faut 44 */
  .nav__brand { min-height: 44px; }

  /* liens flechees et lien telephone : la zone tactile suit le texte */
  .link-arrow,
  .tel-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* pastilles du deck d'avis : 32x24 devient 44x44, le point reste petit */
  .avis__dot {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    background: none;
    border: 0;
    padding: 0;
  }

  /* les commandes de zoom de la carte suivent le meme seuil */
  .leaflet-control-zoom a {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
  }
}

@media (pointer: coarse), (max-width: 900px) {
  /* liens du pied de page et de la ligne legale : la zone tactile suit le texte.
     Les attributions Leaflet restent a leur taille : ce sont des mentions
     obligatoires, et non des commandes. */
  .footer__col li > a,
  .footer__legal a,
  .footer__bottom a,
  .footer nav a,
  .credits-list li > a,
  .credits-block dd > a,
  .signature a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .avis__dot { min-width: 44px; }
}

/* Les six puces du deck d'avis portees a 44 px pour le pouce ne tiennent plus
   sur une ligne en dessous de 400 px : 6 x 44 plus 5 gaps font 334 px dans une
   rangee de 280, et le surplus faisait defiler la page de 34 px vers la droite.
   On autorise le retour a la ligne et on resserre l'ecart : la cible reste a
   44 px, la rangee ne deborde plus. */
@media (max-width: 420px) {
  .avis__controls {
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
  }
}