/* ===================================================================
   Château de la Huberdière — habillage du moteur de réservation Octorate
   À coller dans : Booking Engine EVO > Add-ons - Design > onglet CSS
   S'applique à TOUTES les pages du moteur (accueil + résultats + tunnel).

   Sûr : le champ CSS est vide aujourd'hui, on n'écrase rien.
   Réversible : vider le champ rétablit l'état actuel.
   Tester dans l'aperçu Octorate avant de publier.
   =================================================================== */

/* Polices de la charte (titres Playfair, corps Montserrat) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Montserrat:wght@300;400;500;600&display=swap');

/* 1) COULEUR D'ACCENT
   Tout le moteur pilote sa couleur via une seule variable (~45 règles :
   boutons, en-têtes, icônes, bordures). On la passe au bordeaux. */
:root { --color: #8B0000 !important; }

/* 2) BOUTONS VERTS — toutes les variantes
   Le vert visible (#47A447) est posé sur le <span> interne via reservation.css,
   et il existe une variante « Offert ». On force tout, élément ET span, en !important. */
.customButtonGreen, .customButtonGreen .ui-button-text,
.customButtonGreenOffert, .customButtonGreenOffert .ui-button-text,
.GreenButton, .GreenButton .ui-button-text,
section.room div.offert .button,
section.room div.options .row .action a.button {
  background: #8B0000 !important;
  background-color: #8B0000 !important;
  border-color: #6f0000 !important;
  border-radius: 4px !important;
}
.customButtonGreen:hover, .customButtonGreen .ui-button-text:hover,
.customButtonGreenOffert:hover, .customButtonGreenOffert .ui-button-text:hover,
section.room div.offert .button:hover,
section.room div.options .row .action a.button:hover {
  background-color: #6f0000 !important;
}
/* La pastille verte animée (effet « Bounce ») des boutons et bandes -> bordeaux */
.BounceColor:before, .BounceColor .ui-button-text:before { background: #6f0000 !important; }

/* 2bis) BOUTON BLEU « Disponibilité »
   Classe `.BlueButton` ; le bleu (#3e98d3) est posé sur le <span> interne via le thème.
   On couvre toutes les variantes d'état PrimeFaces (default/hover/active/focus). */
.BlueButton, .BlueButton .ui-button-text,
.BlueButton.ui-state-default .ui-button-text,
.BlueButton.ui-state-active .ui-button-text,
.BlueButton.ui-state-focus .ui-button-text {
  background: #8B0000 !important;
  background-color: #8B0000 !important;
  border-color: #6f0000 !important;
  color: #fff !important;
}
.BlueButton:hover, .BlueButton:hover .ui-button-text,
.BlueButton.ui-state-hover .ui-button-text {
  background-color: #6f0000 !important;
}

/* 3) TYPOGRAPHIE */
body, .usertheme2, input, select, textarea, button,
.customSelect, .datetheme2 {
  font-family: 'Montserrat', -apple-system, 'Helvetica Neue', Arial, sans-serif !important;
}
h1, h2, h3, h4,
.RoomHeader, .text1SubHeader, .textBoldSubHeader {
  font-family: 'Playfair Display', Georgia, serif !important;
  letter-spacing: .01em;
}

/* 4) FOND CRÈME + CARTE CHAMBRE ADOUCIE
   Fond posé sur body (le canevas), pas sur .usertheme2 (présent sur ~40
   sous-blocs). Arrondi limité à .RoomSection (la carte), pas à .box (82 usages). */
body { background: #F4F2EC !important; }
.RoomSection {
  border-radius: 8px !important;
  border-color: #e7e2d6 !important;
}

/* 5) PRIX en bordeaux (montant + centimes en exposant)
   Les centimes « ,00 » sont un <sup> vert (#227426) dans .price -> bordeaux. */
.price, .PriceChange { color: #8B0000 !important; }
.price sup { color: #8B0000 !important; }

/* 6) CHAMPS DE RECHERCHE & SÉLECTEURS (accueil + résultats)
   dates, nombre de personnes, devise, langue : boîtes claires et nettes */
.datetheme2, .customSelect {
  border: 1px solid #d8d2c4 !important;
  border-radius: 4px !important;
  background: #fff !important;
}

/* 7) BOUTONS SECONDAIRES cohérents (en-tête, ajout de chambre)
   .customButton couvre déjà le bouton « ajouter une chambre » (classe combinée). */
.customButton, .headerButton {
  border-radius: 4px !important;
}

/* 8) EN-TÊTE — sélecteurs langue (FR) + devise (EUR) sur une seule ligne
   Le vrai conteneur visible est `.information .flexGap1rem` (et non `.commandDiv`,
   qui est masqué, hauteur 0). Par défaut les deux blocs se décalaient. On les
   remet sur une ligne, alignés à droite, centrés verticalement. */
.information .flexGap1rem {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}
.information .flexGap1rem > div { margin: 0 !important; }

/* 9) BOÎTES DE RECHERCHE (dates + adultes/enfants/chambres) trop hautes -> compactées
   La hauteur d'origine (~99px) vient d'un gros padding-top sur le libellé du mois et
   du compteur (`em`, 17 à 23px), pas du chiffre. On resserre : boîtes ramenées à
   ~66-77px, sans les élargir.
   - `margin-top: 0` : Octorate posait `margin-top:-21px` sur chaque boîte. Sur une
     seule ligne (desktop) c'est uniforme et invisible ; dès que la barre passe sur
     deux rangées (aperçu Octorate, mobile), la rangée du bas remontait dans celle du
     haut (chevauchement). On neutralise, le desktop reste propre (vérifié à 1440px).
   - `> p:empty { ... }` : l'espaceur de la boîte de recherche portait un
     `border-bottom: 5px` BLANC qui retombait pile sur « JUIN 2026 » = le « trait
     blanc » sur l'année, et une hauteur inutile.
   IMPORTANT — la page `calendar.xhtml` (calendrier des tarifs) réutilise la MÊME
   classe `.datetheme2` pour ses cases prix. On NE peut PAS scoper à `.customHeaderIndex`
   (absent de l'aperçu back-office, ce qui faisait sauter la compaction). On distingue
   donc autrement : les cases calendrier n'ont NI `customSpan`, NI `em`, NI `label`, et
   leur `margin-top` est déjà 0 -> toutes nos règles y sont sans effet, SAUF celle du
   `<p>`. Or dans la barre de recherche le `<p>` est VIDE (espaceur), alors que sur le
   calendrier le `<p>` contient la DATE. On cible donc `> p:empty` : la date du
   calendrier (non vide) n'est jamais touchée, plus de chevauchement. */
.datetheme2 { margin-top: 0 !important; }
.datetheme2 em { padding-top: 4px !important; }
.datetheme2 .customSpan { font-size: 20px !important; line-height: 1.1 !important; }
.datetheme2 .customSpan.paddingTop6 { padding-top: 2px !important; }
.datetheme2 > p:empty { margin: 0 !important; height: 0 !important; border: 0 !important; }
.datetheme2 > label { font-size: 11px !important; }

/* 10) PETIT ÉCRAN — la barre de recherche de l'accueil n'a AUCUNE règle responsive
   côté Octorate (les media queries du thème ne couvrent que la page résultats). Sous
   ~1100px (aperçu back-office Octorate ET mobile), le formulaire à 1000px déborde et
   passe sur deux rangées : on le met en colonne/centré. Scopé à max-width:1100px,
   donc aucun effet sur le desktop (vérifié à 1440px = une seule ligne). */
@media (max-width: 1100px) {
  .information.flex-auto {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    padding: 12px 0 !important;
  }
  .information .flexGap1rem { justify-content: center !important; }
  .customHeaderIndex {
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 12px 16px !important;
    width: 100% !important;
  }
  /* Centrer les groupes de boîtes (dates / personnes) comme le bouton.
     Octorate les imbrique dans des conteneurs `flex-auto` (qui grandissent) et
     `justifyContentBetween` (qui écartent) : `justify-content:center` sur le parent
     ne suffisait pas. On stoppe la croissance et on centre chaque rangée. */
  .customHeaderIndex .flexGap3rem { width: 100% !important; justify-content: center !important; }
  .customHeaderIndex .justifyContentBetween { justify-content: center !important; flex: 0 1 auto !important; }
  .customHeaderIndex .flex-auto { flex: 0 1 auto !important; }
  .customHeaderIndex .customButton.headerButton {
    width: auto !important;
    min-width: 180px !important;
  }
}