.elementor-408 .elementor-element.elementor-element-841050a{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-4685b74 *//* =========================================================
   Moteur de réservation UP Hotel (myIBE)
   Charte Hôtel Le Riquewihr***
   ---------------------------------------------------------
   À coller dans WordPress (voir notes en bas du fichier).
   Ne modifie que font-family / color / background / border /
   border-radius : les propriétés validées par UP Hotel.
   ========================================================= */

:root{
  --riq-or:          #C9B458;   /* doré des boutons  */
  --riq-or-fonce:    #B39D45;   /* doré au survol    */
  --riq-marine:      #16384C;   /* bleu nuit         */
  --riq-marine-clair:#28516A;   /* bleu au survol    */
  --riq-texte:       #16384C;
  --riq-gris:        #6B7A85;
  --riq-bordure:     #DCDCD4;
  --riq-fond:        #FFFFFF;
  --riq-police:      'Poppins', 'Helvetica Neue', Arial, sans-serif;
}

/* ---------------------------------------------------------
   1. Cadre général
   --------------------------------------------------------- */

ibe-up{
  display: block;
  max-width: 1200px;   /* largeur recommandée par UP Hotel */
  margin: 0 auto;
}

ibe-up, ibe-up *,
.cdk-overlay-container, .cdk-overlay-container *{
  font-family: var(--riq-police) !important;
}

ibe-up .mat-body,
ibe-up .mat-body-1,
ibe-up .mat-typography,
ibe-up .mat-card-content,
ibe-up .mat-list-base .mat-list-item{
  color: var(--riq-texte) !important;
}

/* Cartes (chambres, tarifs, récapitulatif) */
ibe-up .mat-card{
  background: var(--riq-fond) !important;
  border: 1px solid var(--riq-bordure) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Barre de titre / étapes */
ibe-up .mat-toolbar,
ibe-up .mat-toolbar.mat-primary{
  background: var(--riq-marine) !important;
  color: #FFFFFF !important;
}

/* ---------------------------------------------------------
   2. Boutons
   --------------------------------------------------------- */

/* Bouton principal : doré, texte marine, angles droits — comme
   le bouton "RÉSERVER UNE CHAMBRE" du site */
ibe-up .mat-raised-button.mat-primary,
ibe-up .mat-flat-button.mat-primary,
ibe-up .mat-fab.mat-primary,
ibe-up .mat-mini-fab.mat-primary{
  background-color: var(--riq-or) !important;
  color: var(--riq-marine) !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: none !important;
}

ibe-up .mat-raised-button.mat-primary:hover,
ibe-up .mat-flat-button.mat-primary:hover{
  background-color: var(--riq-or-fonce) !important;
}

/* Bouton secondaire : contour marine */
ibe-up .mat-stroked-button,
ibe-up .mat-stroked-button.mat-primary{
  color: var(--riq-marine) !important;
  border: 1px solid var(--riq-marine) !important;
  border-radius: 0 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
}

ibe-up .mat-stroked-button:hover{
  background-color: var(--riq-marine) !important;
  color: #FFFFFF !important;
}

/* Boutons texte, liens et icônes */
ibe-up .mat-button.mat-primary,
ibe-up .mat-icon-button.mat-primary,
ibe-up .mat-icon.mat-primary,
ibe-up a{
  color: var(--riq-marine) !important;
}

ibe-up .mat-button.mat-primary:hover,
ibe-up a:hover{
  color: var(--riq-or-fonce) !important;
}

/* Bouton désactivé */
ibe-up .mat-raised-button[disabled][disabled],
ibe-up .mat-flat-button[disabled][disabled]{
  background-color: #E9E6DC !important;
  color: var(--riq-gris) !important;
}

/* ---------------------------------------------------------
   3. Champs de formulaire
   --------------------------------------------------------- */

ibe-up .mat-form-field-label,
ibe-up .mat-hint,
ibe-up .mat-select-placeholder{
  color: var(--riq-gris) !important;
}

ibe-up .mat-input-element,
ibe-up .mat-select-value{
  color: var(--riq-texte) !important;
  caret-color: var(--riq-marine) !important;
}

/* État focus : marine (plus lisible que le doré sur du blanc) */
ibe-up .mat-form-field.mat-focused .mat-form-field-label,
ibe-up .mat-form-field.mat-focused .mat-select-arrow,
ibe-up .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{
  color: var(--riq-marine) !important;
}

ibe-up .mat-form-field.mat-focused .mat-form-field-ripple,
ibe-up .mat-form-field-appearance-legacy .mat-form-field-underline{
  background-color: var(--riq-marine) !important;
}

ibe-up .mat-form-field-appearance-outline .mat-form-field-outline{
  color: var(--riq-bordure) !important;
}

/* Cases à cocher, boutons radio, interrupteurs */
ibe-up .mat-checkbox-checked.mat-primary .mat-checkbox-background,
ibe-up .mat-checkbox-checked.mat-accent .mat-checkbox-background,
ibe-up .mat-radio-button.mat-primary.mat-radio-checked .mat-radio-inner-circle,
ibe-up .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb{
  background-color: var(--riq-marine) !important;
}

ibe-up .mat-radio-button.mat-primary.mat-radio-checked .mat-radio-outer-circle{
  border-color: var(--riq-marine) !important;
}

/* ---------------------------------------------------------
   4. Étapes du tunnel (stepper)
   --------------------------------------------------------- */

ibe-up .mat-step-header .mat-step-icon-selected,
ibe-up .mat-step-header .mat-step-icon-state-done,
ibe-up .mat-step-header .mat-step-icon-state-edit{
  background-color: var(--riq-or) !important;
  color: var(--riq-marine) !important;
}

ibe-up .mat-step-header .mat-step-icon{
  background-color: #E9E6DC !important;
  color: var(--riq-gris) !important;
}

ibe-up .mat-step-label.mat-step-label-active{
  color: var(--riq-marine) !important;
}

ibe-up .mat-progress-spinner circle,
ibe-up .mat-spinner circle{
  stroke: var(--riq-or) !important;
}

ibe-up .mat-progress-bar-fill::after{
  background-color: var(--riq-or) !important;
}

/* ---------------------------------------------------------
   5. Calendrier et menus déroulants
   ATTENTION : Angular les injecte à la fin du <body>,
   PAS à l'intérieur de <ibe-up>. D'où les sélecteurs
   .cdk-overlay-container sans préfixe.
   --------------------------------------------------------- */

.cdk-overlay-container .mat-datepicker-content,
.cdk-overlay-container .mat-select-panel,
.cdk-overlay-container .mat-menu-panel,
.cdk-overlay-container .mat-autocomplete-panel{
  background: var(--riq-fond) !important;
  border: 1px solid var(--riq-bordure) !important;
  border-radius: 0 !important;
}

/* Dates sélectionnées (arrivée / départ) */
.cdk-overlay-container .mat-calendar-body-selected,
.cdk-overlay-container .mat-datepicker-content.mat-accent .mat-calendar-body-selected{
  background-color: var(--riq-or) !important;
  color: var(--riq-marine) !important;
}

/* Date du jour */
.cdk-overlay-container .mat-calendar-body-today:not(.mat-calendar-body-selected){
  border-color: var(--riq-marine) !important;
}

.cdk-overlay-container .mat-calendar-body-cell-content,
.cdk-overlay-container .mat-calendar-period-button,
.cdk-overlay-container .mat-calendar-body-label{
  color: var(--riq-texte) !important;
}

.cdk-overlay-container .mat-calendar-arrow{
  border-top-color: var(--riq-marine) !important;
}

.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button,
.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button,
.cdk-overlay-container .mat-datepicker-toggle-active{
  color: var(--riq-marine) !important;
}

/* Options des listes déroulantes */
.cdk-overlay-container .mat-option.mat-selected:not(.mat-option-disabled),
.cdk-overlay-container .mat-primary .mat-option.mat-selected:not(.mat-option-disabled){
  color: var(--riq-marine) !important;
  background: rgba(201, 180, 88, .15) !important;
}

.cdk-overlay-container .mat-option:hover:not(.mat-option-disabled){
  background: rgba(22, 56, 76, .06) !important;
}

/* Fenêtres modales et infobulles */
.cdk-overlay-container .mat-dialog-container{
  border-radius: 0 !important;
}

.cdk-overlay-container .mat-tooltip{
  background: var(--riq-marine) !important;
  color: #FFFFFF !important;
  border-radius: 0 !important;
}

/* ---------------------------------------------------------
   6. Paiement (Adyen) — OPTIONNEL
   Zone sensible : on ne touche qu'aux couleurs.
   Supprimez ce bloc au moindre doute.
   --------------------------------------------------------- */

ibe-up .adyen-checkout__button--pay{
  background: var(--riq-or) !important;
  color: var(--riq-marine) !important;
  border-radius: 0 !important;
  font-weight: 600;
}

ibe-up .adyen-checkout__button--pay:hover{
  background: var(--riq-or-fonce) !important;
}

ibe-up .adyen-checkout__input:focus,
ibe-up .adyen-checkout__input--focus{
  border-color: var(--riq-marine) !important;
  box-shadow: 0 0 0 1px var(--riq-marine) !important;
}

ibe-up .adyen-checkout__label--focused .adyen-checkout__label__text{
  color: var(--riq-marine) !important;
}

/* =========================================================
   NOTES
   ---------------------------------------------------------
   1. Couleurs : remplacez --riq-or et --riq-marine par les
      valeurs exactes de vos couleurs globales Elementor
      (Elementor > Réglages du site > Couleurs globales).

   2. Police : remplacez 'Poppins' par la police réellement
      utilisée sur le site. La police manuscrite des titres
      ne doit PAS être appliquée ici : elle est illisible en
      petits caractères et sur un formulaire.

   3. Où coller ce fichier :
      - le plus simple : Apparence > Personnaliser >
        CSS additionnel (les !important sont là pour ça) ;
      - le plus propre : dans un <style> placé juste APRÈS
        le <link> de ibe.min.css dans votre code de pied de
        page (Elementor > Custom Code, position "Body - End").

   4. Après chaque mise à jour du moteur par UP Hotel,
      revérifiez le rendu : calendrier, liste des chambres,
      page de paiement.
   ========================================================= *//* End custom CSS */