/* =========================================================================
   REFONTE 2026 — PAGE D'ACCUEIL, gabarit ORDINATEUR/TABLETTE (C1)
   Chargé sur page-homepage.php hors téléphone, APRÈS home-commun.css —
   comme structure-c1.css venait après structure-commune.css dans la
   maquette. Panneau d'angle validé le 07/08/2026 (« Version 2 » commerciale
   = fichier c1).
   ========================================================================= */

/* =========================================================================
   PART C1 — Module de réservation soudé à l'angle inférieur droit.
   (ex structure-c1.css, chargé en dernier dans la maquette : reste en fin
   de fichier pour préserver la cascade)
   Registre éditorial : l'image domine, la réservation s'efface sans
   disparaître. C'est l'ancrage d'angle du Beau-Rivage, mais déployé
   au lieu d'être replié derrière un bouton.

   ⚠️ TOUT ce bloc est borné à 992px et au-delà, plus une section tablette
   portrait. Sans ces bornes, ses règles écrasaient à poids égal la mise en
   page tablette du §11 : le panneau restait collé dans l'angle, débordait
   de l'écran et se faisait couper en bas.
   ========================================================================= */

@media (min-width:992px){

  /* Ici le module occupe un ANGLE, pas toute la largeur : l'accroche n'a donc
     pas à lui céder de la hauteur, elle doit seulement ne pas passer dessous.
     C'est une contrainte horizontale. */
  :root{--place-resa:0px}

  #home-top .reservit{
    width:380px !important;
    left:auto !important;
    right:0 !important;
    bottom:0 !important;
    transform:none !important;
    display:block !important;
    padding:26px 28px 28px;
    text-align:left;
  }
  #home-top .reservit > .row{margin:0 0 10px;display:flex;flex-wrap:wrap;gap:10px}
  #home-top .reservit > .row > div{padding:0;flex:1 1 0;min-width:0}

  /* Les quatre champs prennent toute la largeur du panneau. Côte à côte,
     une demi-colonne offre 127px utiles alors que « Jour de départ » en
     demande 138 depuis le passage à 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 > .row:has(.cs-select) > div,
  #home-top .reservit > .row.reservit-date > div{flex:1 1 100%}

  #home-top .reservit .reservit-best-price{
    margin:18px 0 14px;text-align:left;border:0 !important;padding:0 !important;
  }
  #home-top .reservit .reservit-validate{
    width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  }

  /* Les flèches du diaporama sont calées à mi-hauteur du hero : à droite,
     elles tombaient sur le coin supérieur du panneau (mesuré : recouvrement
     de 27px en tablette paysage). On les remonte au tiers. */
  #slider-home .es-prev,
  #slider-home .es-next{top:34% !important}

  /* l'accroche s'arrête avant le panneau au lieu de passer dessous ; 08/10 : elle remonte, comme le panneau,
     de la hauteur du bandeau des cookies tant qu'il est affiché (il coupait « AUX GETS » à 1366 × 768) */
  .hero-accroche{
    bottom:calc(56px + var(--bandeau-cookies));
    max-width:calc(100% - 380px - var(--gouttiere) - 48px);
  }
}

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

/* TABLETTE PORTRAIT (768 – 991 px) — sans cette section, le §11 reprenait
   la main et C1 rendait la même chose que C2 : le panneau d'angle, qui EST
   son identité, disparaissait. Le hero fait ici 1073px de haut : l'accroche
   n'a plus à partager la largeur, elle passe au-dessus du panneau. */

@media (min-width:768px) and (max-width:991px){
  #home-top .reservit{
    position:absolute !important;transform:none !important;
    width:380px !important;
    left:auto !important;right:var(--gouttiere) !important;
    top:auto !important;bottom:24px !important;
    display:block !important;padding:24px 26px 26px !important;
    text-align:left;
  }
  #home-top .reservit > .row{display:flex !important;flex-wrap:wrap;gap:10px;margin:0 0 10px !important}
  #home-top .reservit > .row > div{padding:0 !important;flex:1 1 0;min-width:0}
  #home-top .reservit > .row:has(.cs-select) > div,
  #home-top .reservit > .row.reservit-date > div{flex:1 1 100%}
  #home-top .reservit .reservit-best-price{
    margin:18px 0 14px !important;text-align:left;border:0 !important;padding:0 !important;
  }
  #home-top .reservit .reservit-validate{
    width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  }
  /* l'accroche occupe le haut du hero, le panneau le bas : aucun partage
     de largeur, donc aucune ligne à rallonge */
  .hero-accroche{top:30% !important;bottom:auto !important;max-width:none}
}