/* ═══════════════════════════════════════════════════════════════
   LA TERRASSE — adaptations aux largeurs d'écran
   ═══════════════════════════════════════════════════════════════
   Ce fichier regroupe les 45 requêtes média liées à la largeur,
   extraites de style.css et conservées DANS LEUR ORDRE D'ORIGINE.

   ► Il doit être chargé APRÈS style.css. L'inverse casserait la
     cascade : plusieurs règles ici ont la même spécificité que leur
     équivalent de base et ne l'emportent que par leur position.

   Les requêtes liées aux préférences du visiteur — thème sombre,
   réduction des animations — sont restées dans style.css : elles
   ne relèvent pas de la largeur d'écran mais du confort, et les
   séparer aurait éloigné chaque règle de ce qu'elle corrige.

   Points de rupture, du plus petit au plus grand :
     400 · 420 · 520 · 560 · 620 · 640 · 700 · 759 / 760 · 820
     860 · 900 · 920 · 960 · 980 · 1020 / 1021 · 1040 · 1100 · 1240
   Le détail de ce que chacun modifie est dans responsive/POINTS-DE-RUPTURE.md
   ═══════════════════════════════════════════════════════════════ */

@media (max-width:1020px){
    .hdr__nav{display:none}
    .hdr__burger{display:flex}
    .hdr__cta{display:none}
}

@media (min-width:1021px){ .mnav{display:none} }

@media (min-width:900px){.promise{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:end}}

@media (min-width:640px){.usecases{grid-template-columns:1fr 1fr}}

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

@media (min-width:960px){.day{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:start}}

@media (min-width:960px){.day__media{position:sticky;top:6.5rem;aspect-ratio:4/4.4}}

@media (max-width:520px){
    .tl__btn{grid-template-columns:1fr;gap:.35rem}
}

@media (min-width:900px){.room__head{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}}

@media (min-width:820px){.stats{grid-template-columns:repeat(4,1fr)}}

@media (min-width:900px){.equip{grid-template-columns:minmax(0,.42fr) minmax(0,1fr)}}

@media (min-width:560px){.equip__list{grid-template-columns:1fr 1fr}}

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

@media (min-width:820px){
    .gal{grid-template-columns:repeat(3,1fr)}
    .gal__cell:first-child{grid-column:span 2;grid-row:span 2}
}

@media (min-width:900px){.tour__head{grid-template-columns:minmax(0,1fr) minmax(0,.72fr)}}

@media (max-width:640px){
    /* trois vignettes deviennent illisibles sur téléphone : on n'en
       garde qu'une, et les étiquettes disparaissent */
    .pano--off .pano__seg:not(:first-child){display:none}
    .pano--off .pano__seg::after{display:none}
}

@media (max-width:640px){
    /* le cadre est bas sur téléphone : on resserre pour que les deux
       boutons tiennent sans déborder */
    .pano--off{aspect-ratio:16/13}
    .tour__off{gap:.4rem}
    .tour__off-mk{width:1.9rem}
    .tour__off-p{display:none}
    .tour__off-cta{flex-direction:column;width:100%;max-width:19rem}
}

@media (max-width:400px){.fab__soc{width:2.5rem;height:2.5rem}.fab{gap:.4rem}.fab__top{margin-right:.2rem}}

@media (max-width:700px){.thres{height:215vh}}

@media (min-width:620px){
    .xp{grid-template-columns:1fr 1fr}
    /* la dernière carte occupe la largeur restante : la grille reste pleine */
    .xp__card:last-child{grid-column:1/-1;min-height:clamp(11rem,15vw,13rem)}
}

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

@media (min-width:700px){.xp__kicker{white-space:nowrap}}

@media (min-width:900px){.cfg__head{grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}}

@media (min-width:960px){
    .cfg__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
    /* étape des coordonnées : le récapitulatif est masqué, le formulaire
       reprend toute la largeur — sinon la colonne vide laisse voir le
       fond gris de la grille */
    .cfg__grid:has(> .cfg__side[hidden]){grid-template-columns:1fr}
}

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

@media (min-width:560px){.form{grid-template-columns:1fr 1fr}}

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

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

@media (min-width:760px){.avis{grid-template-columns:1fr 1fr}}

@media (min-width:960px){
    /* la carte à gauche, les indications à droite, sur une seule ligne :
       les deux colonnes s'étirent à la même hauteur */
    .acc{grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);align-items:center}
    .acc > div{grid-column:1;grid-row:1}
    .acc > .map{grid-column:2;grid-row:1;aspect-ratio:5/4.4}
    .acc .times{margin-top:2rem}
}

@media (min-width:960px){.map{aspect-ratio:16/13}}

@media (max-width:620px){
    /* le pied de cadre passe sur deux lignes : on garde de la carte visible
       et on remonte le repère du sud-ouest au-dessus de lui */
    .map{aspect-ratio:4/3.9}
    .map__foot{padding:.75rem .85rem;gap:.35rem}
    .map__foot small,.map .link-arrow{font-size:.6rem}
    .map__lbl{font-size:.55rem}
    .map__lbl--sw{bottom:6.4rem}
}

@media (min-width:760px){.fil{left:.45rem;width:2.6rem}}

@media (min-width:1240px){.fil{left:1rem;width:3.2rem}}

@media (max-width:759px){
    .fil__draw{stroke-width:2.4}
    .fil__node{width:.42rem;height:.42rem;margin:-.21rem 0 0 -.21rem}
}

@media (max-width:700px){.final__wm{width:70vw;right:-16%;bottom:-8%;opacity:.05}}

@media (min-width:620px){.final__contact{grid-template-columns:repeat(2,auto);gap:1.4rem 2.4rem}}

@media (min-width:920px){.final__contact{grid-template-columns:repeat(4,auto);gap:2rem}}

@media (min-width:760px){.ftr__top{grid-template-columns:minmax(0,.9fr) repeat(2,minmax(0,.55fr))}}

@media (min-width:640px){.board{grid-template-columns:1fr 1fr}}

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

@media (min-width:700px){.incl{grid-template-columns:1fr 1fr}}

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

@media (min-width:900px){
    .shuttle{grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr) minmax(0,.72fr)}
}

@media (min-width:900px){.faq{grid-template-columns:minmax(0,.62fr) minmax(0,1fr)}}
