/* =========================================================================
   REFONTE 2026 — PAGE D'ACCUEIL, part COMMUNE aux deux gabarits
   Chargée sur le template page-homepage.php, pour les DEUX DOM servis par
   le serveur (ordinateur/tablette ET téléphone) — exactement comme
   structure-commune.css l'était dans la maquette. Après tokens.css et
   socle.css ; la feuille du gabarit (home-c1.css ou home-mobile.css) vient
   ensuite et surcharge.
   Origine : part « home » de structure-commune.css (maquette validée le
   07/08/2026), règles et ordre strictement conservés.

   MÉTHODE (héritée de la maquette). Le thème 2016 positionne presque tout
   en absolu, avec des dimensions posées en JavaScript à chaque
   redimensionnement (homeMain). On procède en deux temps :
     §0  NEUTRALISATION — on désarme une fois pour toutes les mécanismes du
         thème qui reprendraient la main (positions absolues, hauteurs JS,
         images de fond conditionnelles).
     §1+ COMPOSITION — on reconstruit ensuite sur une base prévisible.

   CONTRAINTE ABSOLUE : aucune classe, aucun id, aucun name du module
   Reservit n'est renommé, et sa structure DOM n'est pas touchée. Voir
   module-reservit-documentation.md §6 (liste noire).
   ========================================================================= */

/* =========================================================================
   §0 — NEUTRALISATION DU THÈME
   ========================================================================= */

/* 0.1 — hauteurs posées par homeMain() à chaque resize.
   Les blocs déplacés hors du hero recevaient la moitié de sa hauteur. */
.bandeau-offres .box,
.bandeau-offres .offre,
.bandeau-offres .offre-container,
.bandeau-actus .box,
.bandeau-actus .actualite,
.bandeau-actus .box-home{height:auto !important;min-height:0 !important}

/* 0.2 — le module Reservit est recentré en styles inline par homeMain().
   Une déclaration important d'une feuille d'auteur l'emporte sur un style
   inline : c'est le seul moyen propre de reprendre la main sans toucher au JS. */
#home-top .reservit{
  top:auto !important;box-shadow:none !important;
  background:var(--creme);z-index:4;
}

/* 0.3 — éléments du thème qui n'ont plus de sens dans cette composition */
#gofull{display:none !important}   /* masquait le module centré : sans objet */
#scrollup{display:none !important} /* se posait sur la jointure la plus fragile */
/* .godown : pastille de défilement centrée en bas du hero. En C1 elle mord
   le coin du panneau. Les flèches du diaporama suffisent à signaler que le
   hero est vivant. */
.godown{display:none !important}

/* 0.4 — bande blanche parasite de 15px sous la photo */
#home-top{padding-bottom:0 !important}

/* =========================================================================
   §1 — GRILLE UNIQUE
   Défaut n°1 relevé à l'audit : sept bords gauches différents en descendant
   la page. Le plein cadre est réservé au hero et au pied de page.
   On agit sur le .container-fluid de chaque section, JAMAIS sur les colonnes
   Bootstrap : neutraliser leurs flottants casse la mise en colonnes.
   ========================================================================= */

.bandeau-interne,
#introduction > .container-fluid,
#home-avis > .container-fluid{
  max-width:var(--largeur) !important;
  margin-left:auto !important;margin-right:auto !important;
  padding-left:var(--gouttiere) !important;padding-right:var(--gouttiere) !important;
  float:none !important;
}
#introduction .col-md-offset-3{margin-left:0 !important}
#introduction .col-md-6{width:100% !important;padding:0 !important}

/* =========================================================================
   §2 — HERO PLEINE LARGEUR
   Ne PAS neutraliser les marges négatives de .row : elles compensent le
   rembourrage de .container-fluid. Les annuler recrée une gouttière blanche.
   ========================================================================= */

#home-top .padHome{padding-left:0 !important;padding-right:0 !important}
#slider-home{width:100%;overflow:hidden;position:relative}
#slider-home .es-slides > li{height:calc(100vh - var(--header)) !important}

/* VOILE DU HERO — deux couches.
   Le seul dégradé de pied ne protégeait que le bas de l'image : en tablette
   portrait l'accroche remonte au tiers supérieur et tombait sur de la neige
   en plein soleil, où le texte blanc devenait illisible. Une seconde couche
   part du bord gauche, là où vit l'accroche, et s'éteint avant le milieu
   pour ne pas ternir la montagne. */
#slider-home::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 44%),
    linear-gradient(96deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.2) 32%, rgba(0,0,0,0) 58%);
  pointer-events:none;z-index:2;
}

/* =========================================================================
   §3 — ACCROCHE SUR LE HERO
   Le premier écran ne disait rien, alors que l'argument de vente de l'hôtel
   est justement d'être au pied des pistes.
   ========================================================================= */

.hero-accroche{
  position:absolute;left:var(--gouttiere);z-index:3;
  bottom:calc(var(--place-resa) + 40px + var(--bandeau-cookies));   /* 08/10 : bandeau des cookies, voir home-c1.css */
  color:#fff;max-width:620px;
}
.hero-accroche h2{
  font-family:'p22-underground',sans-serif;font-weight:400;
  font-size:60px;line-height:1.05;margin:0 0 14px;color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.28);
}
/* la ligne de services passait à 0,92 d'opacité sur de la neige surexposée :
   elle disparaissait purement et simplement. Blanc plein + même ombre. */
.hero-accroche .services{
  font-family:'brandon-grotesque',sans-serif;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.35);
}

/* =========================================================================
   §4 — BANDE ÉDITORIALE
   La police d'affichage revient à la marque : elle était attribuée à la
   promotion commerciale. Le sous-titre remonte au-dessus du titre pour
   annoncer au lieu de répéter en plus pâle. Mesure ramenée de 104 à 62 signes.
   ========================================================================= */

#introduction{
  background-color:var(--creme) !important;
  padding:var(--entre-sujets) 0 var(--dans-sujet) !important;
  text-align:left !important;
}
#introduction > .container-fluid{border-top:1px solid var(--filet);padding-top:var(--dans-sujet) !important}
#introduction h1{
  font-family:'p22-underground',sans-serif !important;
  font-size:44px !important;line-height:1.1 !important;font-weight:400 !important;
  color:var(--encre) !important;letter-spacing:0 !important;
  text-align:left !important;margin:0 0 24px !important;
  display:flex !important;flex-direction:column;align-items:flex-start;
}
#introduction h1 span{
  display:block !important;order:-1;
  font-family:'brandon-grotesque',sans-serif !important;
  font-size:14px !important;letter-spacing:.22em !important;text-transform:uppercase;
  color:var(--encre-douce) !important;font-weight:600 !important;margin-bottom:18px;
}
#introduction p{
  text-align:left !important;max-width:62ch;
  font-family:'brandon-grotesque',sans-serif;font-size:17px;line-height:1.7;
  color:var(--encre-douce);margin:0 0 var(--dans-bloc);padding:0 !important;
}
#introduction a.btn.btn-primary{
  background:transparent !important;color:var(--encre) !important;
  border:1px solid var(--encre) !important;padding:13px 26px !important;
}
#introduction a.btn.btn-primary:hover{background:var(--encre) !important;color:#fff !important}

/* Lot 3 : le texte de présentation descend du gabarit vers le contenu de la
   page (.post_content). Le thème 2016 donne un fond blanc et des marges à
   .post_content — invisible sur les pages intérieures (fond blanc), mais il
   dessinait ici une boîte blanche au milieu de la bande crème. */
#introduction .post_content{
  background:transparent !important;padding:0 !important;margin:0 !important;
  position:static !important;
}
#introduction .post_content > p{max-width:62ch}
/* le h1 de la bande porte déjà le seuil : les h2 du contenu s'alignent sur le
   rythme de la prose, sans réintroduire l'espacement de page intérieure */
#introduction .post_content h2{margin-top:var(--dans-sujet) !important}

/* signature des hôtes : ce qu'un palace ne peut pas se permettre */
.signature-hotes{
  font-family:'p22-underground',sans-serif;font-size:15px;color:var(--encre-douce);
  margin-top:26px;letter-spacing:.04em;
}

/* =========================================================================
   §6 — L'OFFRE : UNE LIGNE, PAS UNE DALLE
   Elle était vide à 60 %, avec cinq lignes de base différentes. Elle devient
   le bord inférieur de la bande éditoriale, séparée par un filet.
   (le composant .titre-bandeau, partagé, vit dans socle.css §S2)
   ========================================================================= */

.bandeau-offres{
  width:100%;float:left;clear:both;
  background:var(--creme);padding:0 0 var(--entre-sujets);
}
.bandeau-offres .offre-container{
  display:flex;align-items:center;gap:36px;
  background:transparent !important;
  border-top:1px solid var(--filet);
  padding:26px 0 0 !important;position:relative;
}
.bandeau-offres .offre-cat{
  position:static !important;width:auto !important;padding:0 !important;
  text-align:left !important;flex:0 0 auto;
}
.bandeau-offres .offre-cat h2{
  margin:0 !important;font-family:'brandon-grotesque',sans-serif !important;
  font-size:11px !important;letter-spacing:.22em !important;text-transform:uppercase;
  color:var(--encre-douce) !important;font-weight:600 !important;
}
.bandeau-offres .offre-cat .bulle{display:none}
.bandeau-offres .offre-infos{
  position:static !important;transform:none !important;
  width:auto !important;padding:0 !important;text-align:left !important;
  flex:0 1 auto;display:flex;align-items:baseline;gap:28px;color:var(--encre) !important;
}
.bandeau-offres .offre-infos h3{
  margin:0 !important;font-family:'p22-underground',sans-serif !important;
  font-size:22px !important;color:var(--encre) !important;white-space:nowrap;font-weight:400 !important;
}
.bandeau-offres .offre-infos p{display:none}
.bandeau-offres .offre-infos ul{display:flex;gap:22px;margin:0 !important;padding:0 !important;list-style:none}
.bandeau-offres .offre-infos ul li{
  margin:0 !important;white-space:nowrap;font-size:14px;color:var(--encre-douce) !important;
}
.bandeau-offres .offre-infos ul li i{
  background:transparent !important;color:var(--encre-douce) !important;
  width:auto !important;height:auto !important;margin-right:5px !important;
}
/* les deux liens : tertiaires, pas de bouton. Un seul noir plein sur la page. */
.bandeau-offres a.btn.btn-primary,
.bandeau-offres a.btn-offres-all{
  position:static !important;flex:0 0 auto;white-space:nowrap;
  background:transparent !important;border:0 !important;padding:0 !important;
  color:var(--encre) !important;font-size:14px !important;
  border-bottom:1px solid var(--encre) !important;
}
.bandeau-offres a.btn.btn-primary{margin-left:auto !important}
.bandeau-offres a.btn-offres-all{color:var(--encre-douce) !important;border-bottom-color:var(--filet) !important}

/* Toute la ligne mène à l'offre. Adrien, appel du 3/09 : le seul lien cliquable
   était « Toutes les offres », en bout de ligne — « je pense que c'est plus
   intéressant » que la ligne entière le soit. Le lien reste un vrai lien (pas de
   JS) : son ::after couvre le conteneur, déjà positionné plus haut. « Toutes les
   offres » repasse au-dessus pour garder sa propre destination. */
.bandeau-offres .offre-container{cursor:pointer}
.bandeau-offres a.btn-offres::after{content:'';position:absolute;inset:0;z-index:1}
.bandeau-offres a.btn-offres-all{position:relative;z-index:2}

/* =========================================================================
   §7 — LES AVIS : SECOND POINT FOCAL
   Seul endroit où l'on montre le produit vendu. Il était en meurtrière
   (2,3:1), dans une carte grise froide, collé au bloc précédent.
   ========================================================================= */

#home-avis{background:var(--blanc);padding:var(--entre-sujets) 0 !important;margin:0 !important}
#home-avis > .container-fluid{border-top:1px solid var(--filet);padding-top:var(--dans-sujet) !important}
#home-avis .col-sm-7{width:44% !important}
#home-avis .col-sm-5{width:56% !important}
#home-avis .last-review{background:transparent !important;padding-right:56px !important}
/* Le thème illustre ce bloc avec `images/menu/chambre-crychar.jpg`, la même
   chambre que celle du bandeau : deux fois la même pièce sur la page, et une
   chambre à côté d'un avis intitulé « Merveilleux spa ! ». On met le spa. */
#home-avis .gallery{
  background-color:var(--creme) !important;min-height:520px;
  background-image:url(../../../images/home/avis-spa.jpg) !important;
  background-size:cover !important;background-position:center !important;
}
#home-avis .last-review::before{
  content:"\201C";font-family:'p22-underground',serif;font-size:110px;line-height:.7;
  color:var(--filet);display:block;margin-bottom:14px;
}
#home-avis .last-review h3{
  font-family:'p22-underground',sans-serif !important;font-size:24px !important;
  color:var(--encre) !important;margin:0 0 16px !important;font-weight:400 !important;
}
#home-avis .last-review p{font-size:16px;line-height:1.7;color:var(--encre-douce)}
/* A4 (02/10/2026) : la note de l'avis affiché, sur l'échelle de sa source (Booking
   sur 10, en chiffres ; Tripadvisor sur 5, en étoiles), à la place des quatre
   étoiles écrites en dur ; et un lien vers la source, à côté de « Tous les avis ». */
#home-avis .last-review .avis-note{margin:0 0 calc(var(--dans-bloc) / 2);color:var(--encre)}
#home-avis .last-review .avis-note i{color:var(--encre);font-size:18px}
#home-avis .last-review .avis-note--chiffre{
  font-family:'brandon-grotesque',Helvetica,Arial,sans-serif;font-size:14px;
  letter-spacing:.06em;color:var(--encre-douce);
}
#home-avis .last-review .avis-note--chiffre strong{
  font-family:'p22-underground',sans-serif;font-size:28px;font-weight:400;
  letter-spacing:0;color:var(--encre);
}
#home-avis .last-review .avis-liens a + a{margin-left:calc(var(--dans-bloc) / 2)}
/* Le thème posait sur l'angle de .avis un guillemet d'icône blanc (fontello, 50 px,
   ::before de .avis-titre, positionné sur .avis) : invisible sur le blanc, il
   recouvrait la note, désormais première ligne de l'avis. Les guillemets du bloc
   sont déjà dessinés par .last-review::before. */
#home-avis .last-review .avis .avis-titre::before{content:none}
#home-avis a.btn.btn-primary{
  background:transparent !important;border:0 !important;padding:0 !important;
  color:var(--encre) !important;border-bottom:1px solid var(--encre) !important;font-size:14px !important;
}

/* =========================================================================
   §8 — LES ACTUALITÉS : L'ÉLÉMENT LE PLUS CALME
   Elles pesaient plus lourd que l'avis client, pour un contenu placé en
   dernier parce qu'il est secondaire.
   ========================================================================= */

.bandeau-actus{width:100%;float:left;clear:both;background:var(--creme);padding:var(--dans-sujet) 0}
.bandeau-actus .actualite-container{
  height:200px !important;max-width:460px;
  background-size:cover;background-position:center;position:relative;overflow:hidden;
}
/* PASTILLE DE DATE — elle épouse son texte.
   Le thème la dessine en rond de 100px ; ramenée à un carré de 54x54,
   « 18 Nov » tenait sur une seule ligne : il restait les deux tiers de la
   boîte en blanc, ce qui ressemblait à un défaut d'affichage. */
.bandeau-actus .post-date{
  position:absolute !important;top:14px !important;left:14px !important;
  transform:none !important;border-radius:0 !important;
  width:auto !important;height:auto !important;padding:8px 12px !important;
  display:inline-flex !important;align-items:baseline;gap:5px;
  line-height:1 !important;font-size:11px !important;letter-spacing:.08em;
  background:var(--blanc) !important;color:var(--encre) !important;
}
.bandeau-actus .post-date span{
  font-size:11px !important;display:inline !important;margin:0 !important;border:0 !important;
}

/* VOILE DE LA VIGNETTE — la photo d'actualité est une piste enneigée en
   plein soleil. Le dégradé d'origine s'éteignait à 60% de la hauteur et
   laissait le titre en blanc sur blanc dès qu'il passait sur deux lignes. */
.bandeau-actus .post-mask{
  position:absolute;inset:0;display:flex;align-items:flex-end;
  background:linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.42) 46%, rgba(0,0,0,.08) 100%);
}
.bandeau-actus .post-info{padding:0 20px 18px;width:100%}
.bandeau-actus .post-info h3{
  color:#fff !important;margin:0 !important;font-size:16px !important;line-height:1.3;
  font-family:'p22-underground',sans-serif !important;font-weight:400 !important;
  text-shadow:0 1px 12px rgba(0,0,0,.45);
}
.bandeau-actus .post-info p{display:none}
/* Ce lien est POSÉ SUR LA PHOTO : en encre foncée il devenait invisible sur
   la neige. Il passe en blanc, contrairement aux autres liens de la page. */
.bandeau-actus a.btn.btn-primary{
  position:static !important;display:inline-block;margin-top:12px !important;
  background:transparent !important;border:0 !important;padding:0 !important;
  color:#fff !important;border-bottom:1px solid rgba(255,255,255,.7) !important;
  font-size:12px !important;letter-spacing:.1em;
  text-shadow:0 1px 10px rgba(0,0,0,.45);
}

/* =========================================================================
   §9 — MODULE RESERVIT : RÉGLAGES COMMUNS
   Le positionnement du panneau d'angle est en fin de fichier (part C1).
   Le tarif est dé-boutonné : une information ne doit pas avoir l'apparence
   exacte du bouton sur lequel on clique.
   ========================================================================= */

#home-top .reservit,
#home-top .reservit *{box-sizing:border-box}

/* NORMALISATION DES COLONNES.
   Les colonnes Bootstrap du module portent des marges et des rembourrages
   hérités du thème, et les champs une largeur propre. Résultat mesuré : des
   bords gauches à 1073, 1083 et 1240 dans un panneau dont le contenu commence
   à 1073. On remet tout à plat une fois pour toutes ; l'espacement est ensuite
   piloté uniquement par le `gap` des rangées. */
/* Bootstrap pose un `.row::before` et un `.row::after` de nettoyage des
   flottants. Dans un conteneur flexible ils deviennent deux éléments à part
   entière et consomment deux intervalles : les champs perdaient 20px et se
   retrouvaient centrés, en retrait de 10px par rapport aux listes déroulantes
   juste au-dessus. Cause réelle du désalignement, sur les trois variantes. */
#home-top .reservit > .row::before,
#home-top .reservit > .row::after{display:none !important}
#home-top .reservit > .row{padding:0 !important}
#home-top .reservit > .row > div{margin:0 !important;padding:0 !important;float:none !important}
#home-top .reservit input[type=text],
#home-top .reservit .cs-select{width:100% !important;margin:0 !important;float:none !important}
/* le tarif et le bouton portent chacun 10px de marge latérale dans le thème :
   ils rentraient de 10px par rapport aux champs situés au-dessus d'eux */
#home-top .reservit .reservit-best-price,
#home-top .reservit .reservit-validate{margin-left:0 !important;margin-right:0 !important}
/* NORMALISATION DES CHAMPS.
   Le thème habille les listes déroulantes avec un fond gris #eee, un
   rembourrage de 1em sur le texte et un chevron positionné en pourcentage.
   À côté de champs texte blancs à filet fin, cela donnait trois hauteurs
   apparentes, deux fonds et un texte calé en bas. On les aligne strictement. */

#home-top .reservit input[type=text]{
  border:1px solid var(--filet) !important;background:var(--blanc) !important;
  color:var(--encre);height:46px;padding:0 14px !important;
  font-size:13px;line-height:44px;
}
#home-top .reservit input[type=text]::placeholder{color:var(--encre-douce);opacity:1}

#home-top .reservit .cs-select{background:transparent !important}
#home-top .reservit .cs-select > span{
  background:var(--blanc) !important;
  border:1px solid var(--filet) !important;
  height:46px !important;line-height:44px !important;
  padding:0 38px 0 14px !important;
  color:var(--encre-douce) !important;font-size:13px !important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#home-top .reservit .cs-select > span::after{
  right:14px !important;color:var(--encre) !important;font-size:11px !important;
}
/* La liste déroulée hérite du même filet — MAIS uniquement une fois ouverte.
   La peau « elastic » garde `.cs-options` visible et transparente en
   permanence : lui poser une bordure sans condition dessinait un rectangle
   blanc fantôme sous chaque liste, sur tous les écrans. */
#home-top .reservit .cs-select.cs-active .cs-options{border:1px solid var(--filet);border-top:0}
#home-top .reservit .cs-select .cs-options span{padding:10px 14px !important;font-size:13px}
#home-top .reservit .reservit-best-price{
  background:transparent !important;color:var(--encre) !important;
  font-size:13px !important;letter-spacing:.06em;
  line-height:1.25 !important;   /* sinon le thème réserve ~46px et creuse le panneau */
}
#home-top .reservit .reservit-best-price .best-price{color:var(--encre) !important;font-weight:700}
#home-top .reservit .tg4{color:var(--encre-douce) !important}
#home-top .reservit .tg2{color:#8a3b3b !important}
/* BOUTON — centrage par la boîte, jamais par la hauteur de ligne.
   Le thème cale son libellé avec `line-height`. Dès que la hauteur du bouton
   et la hauteur de ligne diffèrent (48 contre 26), le texte se pose en haut
   de la boîte au lieu d'être au milieu. On centre en flex : la hauteur du
   bouton peut alors changer sans jamais désaligner le libellé. */
#home-top .reservit .reservit-validate{
  background:var(--encre) !important;color:var(--blanc) !important;
  height:48px;line-height:1 !important;font-size:13px !important;letter-spacing:.1em;
  display:flex !important;align-items:center !important;justify-content:center !important;
  gap:8px;padding-top:0 !important;padding-bottom:0 !important;
}
#home-top .reservit .reservit-validate .icon{
  /* la police d'icônes ajoute sa propre marge : elle se cumulait à
     l'intervalle du conteneur et ouvrait un blanc de 17px */
  line-height:1;position:static;margin:0 !important;width:auto !important;
}
/* le chevron du sélecteur sortait de son champ, en blanc sur blanc */
#home-top .reservit .cs-select > span::after,
#home-top .reservit .icon-down{color:var(--encre) !important;right:12px !important}

/* =========================================================================
   §10 — TABLETTE PAYSAGE (992 – 1199 px), part home
   (l'en-tête/navigation de ce point de rupture vit dans socle.css §S5)
   ========================================================================= */

@media (min-width:992px) and (max-width:1199px){
  .hero-accroche h2{font-size:46px}
}

/* =========================================================================
   §11 — TABLETTE PORTRAIT (768 – 991 px), part home
   (le menu latéral de ce point de rupture vit dans socle.css §S6)
   Le module de réservation sort du hero et s'empile dessous : réglage
   générique, que la part C1 (fin de fichier) remplace par le panneau d'angle.
   ========================================================================= */

@media (min-width:768px) and (max-width:991px){
  .hero-accroche{bottom:auto;top:38%;transform:translateY(-50%);max-width:none;right:var(--gouttiere)}
  .hero-accroche h2{font-size:38px}

  /* Le passer en `static` laissait le `left` négatif posé en ligne par
     homeMain() : le module partait hors écran. On le garde en absolu et on
     neutralise explicitement les quatre côtés. */
  #home-top .reservit{
    position:absolute !important;transform:none !important;
    top:auto !important;bottom:24px !important;
    left:var(--gouttiere) !important;right:var(--gouttiere) !important;
    width:auto !important;margin:0 !important;
    display:block !important;padding:20px !important;
  }
  /* le rembourrage bas des colonnes s'ajoutait à la marge des rangées :
     32px entre chaque bloc au lieu de 10, le module s'étirait sur 315px */
  /* en flex avec un intervalle explicite : en `block`, les colonnes flottantes
     à 50% se touchaient bord à bord dès que leur rembourrage était neutralisé */
  #home-top .reservit > .row{display:flex;gap:10px;margin:0 0 10px}
  #home-top .reservit > .row > div{flex:1 1 0;min-width:0}
  #home-top .reservit .reservit-best-price{
    border-left:0 !important;padding-left:0 !important;margin:4px 0 14px !important;text-align:left;
  }
  #home-top .reservit .reservit-validate{width:100%;text-align:center}

  #introduction h1{font-size:34px !important}
  /* le bloc offres reste en ligne : à 820px de large, l'empiler laissait les
     trois quarts de la largeur vides */
  .bandeau-offres .offre-container{
    flex-direction:row;align-items:center;gap:22px;flex-wrap:wrap;
  }
  .bandeau-offres .offre-infos{flex-direction:row;align-items:center;gap:18px}
  .bandeau-offres .offre-infos h3{white-space:normal}
  .bandeau-offres a.btn.btn-primary{margin-left:0 !important}

  #home-avis .col-sm-7,#home-avis .col-sm-5{width:100% !important;float:none !important}
  #home-avis .last-review{padding-right:0 !important;margin-bottom:40px}
  #home-avis .gallery{min-height:340px}
}

/* =========================================================================
   TYPOGRAPHIE DU FORMULAIRE — trois niveaux, pas un aplat.
   Les capitales servent le châssis du site (menu, surtitres, boutons) :
   courtes, répétées, reconnues à leur position. Un champ de saisie, lui,
   est du contenu — il se lit. Et une valeur choisie par le visiteur rendue
   en capitales (« 1 ADULTE ») lui renvoie son propre choix en criant.
   L'œil doit suivre : champs → prix → bouton.
   ========================================================================= */

/* 1. champs : contenu, casse normale.
   16px : taille imposée par le seuil d'agrandissement de Safari iOS, ce
   gabarit étant celui que reçoit un iPad. Voir audit-selecteur-dates-mobile.md */
#home-top .reservit input[type=text],
#home-top .reservit input[type=text]::placeholder,
#home-top .reservit .cs-select > span,
#home-top .reservit .cs-select .cs-options span{
  font-family:'brandon-grotesque',Helvetica,Arial,sans-serif !important;
  font-size:16px !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
}

/* 2. tarif : une étiquette discrète, une valeur qui saute aux yeux */
#home-top .reservit .reservit-best-price{
  font-family:'brandon-grotesque',Helvetica,Arial,sans-serif !important;
  font-size:11px !important;letter-spacing:.16em !important;
  text-transform:uppercase !important;color:var(--encre-douce) !important;
}
#home-top .reservit .reservit-best-price .best-price{
  font-size:18px !important;font-weight:700 !important;
  letter-spacing:.01em !important;text-transform:none !important;
  color:var(--encre) !important;margin-left:7px;
}

/* 3. bouton : c'est l'action, elle domine */
#home-top .reservit .reservit-validate{
  font-family:'brandon-grotesque',Helvetica,Arial,sans-serif !important;
  font-size:13px !important;font-weight:700 !important;
  letter-spacing:.14em !important;text-transform:uppercase !important;
}

/* =========================================================================
   TOUR D'HORIZON RESPONSIVE — correctifs (07/08, cinq formats au crible)
   (les correctifs du pied de page et des cibles du prefooter sont dans
   socle.css ; ne restent ici que ceux des sections de la home)
   ========================================================================= */

/* 1. BLOC AVIS — le thème impose `height:250px` (280 dans une seconde règle)
   alors que le contenu en demande 377 à 430 selon la largeur. Le texte
   débordait de sa boîte : en tablette portrait, où les colonnes s'empilent,
   la photo du spa se posait par-dessus la fin de l'avis, la signature et le
   bouton. Défaut le plus grave du tour d'horizon. */
#home-avis .last-review{height:auto !important;min-height:0 !important}

/* 2. MESURE DES PARAGRAPHES — en téléphone paysage la colonne éditoriale
   court sur 844px, soit environ 102 signes par ligne. Le confort de lecture
   se situe entre 45 et 80. */
#introduction p{max-width:68ch}

/* 3. CIBLES TACTILES des sections de la home (cf. socle.css pour le pied) */
@media (pointer:coarse){
  .bandeau-offres a.btn-offres,
  .bandeau-offres a.btn-offres-all,
  .bandeau-actus a.btn.btn-primary,
  #home-avis .last-review a{display:inline-flex !important;align-items:center;min-height:44px !important}
}

/* --- ajustements après seconde passe du tour d'horizon --- */

/* la mesure en `ch` dépend du chasse de la police : on borne en pixels,
   ce qui donne ~72 signes à 16px, dans la fourchette de confort */
#introduction p{max-width:640px !important}

/* en tablette portrait l'accroche se pose au tiers supérieur, sur la partie
   la plus claire de la photo : la fin de la ligne de services (« à vins »)
   se perdait dans la neige. On prolonge la couche latérale du voile. */
@media (min-width:768px) and (max-width:991px){
  #slider-home::after{
    background:
      linear-gradient(to top, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 44%),
      linear-gradient(96deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.3) 46%, rgba(0,0,0,0) 78%);
  }
  .hero-accroche .services{text-shadow:0 2px 20px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.5)}
}