/* ===================================================================== *
 *  FEATURES — Villa « en un clin d’œil »                                *
 *  Feuille d’override à placer APRES les feuilles du template           *
 * ===================================================================== */

/* ------------------------------------------------------------------ */
/* 1. GOUTTIÈRE locale 8 px                                           */
/* ------------------------------------------------------------------ */
#features .row            { margin-left:-8px;  margin-right:-8px; }
#features [class*="col-"] { padding-left:8px;  padding-right:8px; }

/* ------------------------------------------------------------------ */
/* 2. TEXTE d’instruction                                             */
/* ------------------------------------------------------------------ */
.features-instruction{
  font:400 .85rem/1.4 "Roboto",sans-serif;
  margin:0 0 10px;
  color:#6c757d;
}

/* ------------------------------------------------------------------ */
/* 3. LISTES « points forts »                                         */
/* ------------------------------------------------------------------ */
.features-list-colored{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
}

.features-list-colored li{
  display:flex;
  align-items:center;
  gap:6px;
  flex:1 1 30%;
  min-width:140px;
  padding:6px 10px;
  background:#f7f7f7;        /* retire si tu préfères transparent   */
  border-radius:4px;
  cursor:pointer;
  transition:color .2s;
}

.features-list-colored li:hover{ color:#0d6efd; }

.features-list-colored i,
.features-list-colored .fa{
  font-size:20px;
  color:#0d6efd;
}

/* ► variantes « une seule ligne » ---------------------------------- */
.features-list-colored.inline,
.features-list-colored.chambres,
.features-list-colored.sdb,
.features-list-colored.cuisine-vie{
  flex-wrap:nowrap;
  justify-content:center;
}

.features-list-colored.inline li,
.features-list-colored.chambres li,
.features-list-colored.sdb li,
.features-list-colored.cuisine-vie li{
  flex:0 1 auto;
  min-width:0;
}

/* ------------------------------------------------------------------ */
/* 4.  TITRES des groupes (Chambres, SDB, Cuisine…)                   */
/* ------------------------------------------------------------------ */
:root{
  /* Décalage vertical commun (0 px par défaut) */
  --feature-title-offset:0px;
}

.features-heading{
  display:flex;
  align-items:center;
  justify-content:center;
  width:max-content;          /* largeur collée au contenu            */
  margin:8px auto 4px;        /* haut : 8 px · bas : 4 px             */
  gap:4px;                    /* icône ↔ texte                        */
  font:700 1.5rem/1.3 "Roboto",sans-serif;
  transform:translateY(var(--feature-title-offset));
}

.features-heading i,
.features-heading .fa{
  font-size:1.5em;            /* ≃ 22-24 px (suivant la police)       */
}

/* Si tu veux *ponctuellement* descendre un titre : */
/* .features-heading.sdb{ --feature-title-offset:15px; }             */

/* ------------------------------------------------------------------ */
/* 5.  CARROUSEL – fondu Bootstrap 3                                  */
/* ------------------------------------------------------------------ */
.carousel-fade .item                     { transition:opacity .8s ease; }
.carousel-fade .carousel-inner           { background:#000;             }
.carousel-fade .carousel-inner .item     { opacity:0;                   }
.carousel-fade .carousel-inner .active   { opacity:1;                   }
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right{ left:0; opacity:0;        }
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right{ left:0; opacity:1;          }

.carousel-control{ width:8%; background:none; }
.carousel-control .glyphicon{
  font-size:32px;
  top:50%;
  transform:translateY(-50%);
}

/* ------------------------------------------------------------------ */
/* 6.  SECTION « section-white small-padding-bottom »                 */
/* ------------------------------------------------------------------ */
.section-white.small-padding-bottom{ padding:0; }
/* Garde l’iframe fluide et 16:9 */
.map-responsive{
  position:relative;
  padding-bottom:56.25%; /* 9/16 = 0.5625 */
  height:0;
  overflow:hidden;
}
.map-responsive iframe{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
}
/* -- SITUATION : liste sans puce, icône colorée -------------------- */
.location-highlights li{
  margin:6px 0;
  font-size:15px;
  line-height:1.55;
}
.location-highlights i{
  width:22px;            /* aligner proprement la colonne d’icônes */
  color:#34b1c4;         /* bleu “brand” Bootstrap de votre site   */
}
/* ▸▸  mêmes gouttières que #features  ◂◂ */
#activities .row            { margin-left:-8px;  margin-right:-8px; }
#activities [class*="col-"] { padding-left:8px;  padding-right:8px; }

/* ▸▸  on ré-utilise déjà .features-list-colored  ◂◂ */
#activities .features-list-colored.activities li{
  flex:1 1 100%;                 /* 1 par ligne en mobile          */
}

@media (min-width:992px){        /* 2 par ligne sur desktop        */
  #activities .features-list-colored.activities li{ flex:1 1 48%; }
}

/* ▸▸  titre “Activités :” même look que les autres  ◂◂ */
#activities .features-heading{
  font-size:1.35rem;   /* même taille que “3 Chambres :” */
  margin:10px 0 12px;  /* petit espacement */
}
/* ─────────  légende SOUS la photo  ───────── */
#activities .caption-below{
  position: static;          /* on enlève l’absolu par défaut      */
  padding:12px 0 4px;        /* air au-dessus, peu en dessous      */
  color:#444;                /* texte sombre                       */
  background:#fff;           /* même fond que la section           */
  text-align:center;
}

/* petit ajustement typo */
#activities .caption-below h5{
  font:400 0.95rem/1.4 "Roboto",sans-serif;
  margin:0;
}
/* =====  NAVBAR – bouton « Réservation »  ===== */
.navbar-default .navbar-nav > li > a.purchase{
    /* visuel identique aux autres liens  */
    font-weight:400;            /* ↞ comme les autres <a> */
    text-transform:uppercase;   /* ↞ idem                */

    /* seule différence : couleur du texte */
    color:#323232 !important;      /* texte noir            */
    background:#34b1c4;         /* fond bleu existant    */
    border:1px solid #34b1c4;   /* bordure bleue         */
}

.navbar-default .navbar-nav > li > a.purchase:hover{
    color:#000;                 /* reste noir au survol  */
    background:#2980b9;         /* bleu foncé, comme avant */
    border-color:#2980b9;
}
/* === CARROUSEL ACTIVITÉS : réserve l’espace 16:9 = 56,25 % === */
#actCarousel .carousel-inner{
    /* cas moderne */
    aspect-ratio: 16 / 9;
    position: relative;     /* pour placer les images en absolu */
    overflow: hidden;       /* masque tout débordement */
}

/* fallback < 2021 sans aspect-ratio --------------------------- */
@supports not (aspect-ratio: 16 / 9){
  #actCarousel .carousel-inner::before{
      content:"";
      display:block;
      padding-top:56.25%;   /* 100 / (16/9)  */
  }
  #actCarousel .carousel-inner::after{
      content:"";
      display:block;
      clear:both;           /* remise en flux propre */
  }
}

#actCarousel .carousel-inner .item,
#actCarousel .carousel-inner img{
    position:absolute;
    inset:0;                /* top:0; right:0; bottom:0; left:0 */
    width:100%;
    height:100%;
    object-fit:cover;       /* couvre sans déformer */
    display:block;
}
/* ——— légende en dessous ——— */
.act-caption{
  margin:12px 0 0;
  font-size:15px;
  line-height:1.4;
  color:#454545;
}
#actCarousel .item{position:relative;overflow:hidden;width:100%;padding-top:56.25%;}
#actCarousel .item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
#actCarousel .carousel-inner{background:#f4f4f4 !important;}
/* Neutralise le filtre NB du template */
html:not(.page-ready) img,
html:not(.page-ready) video,
html:not(.page-ready) .features-icon,
html:not(.page-ready) .btn-blue {
    filter: none !important;
}
/* Masquer la section vide */
#situation {
  display: none;
}

/* Ajuster la largeur du calendrier à 80% de la fenêtre max 800px */
#calendar {
  width: 80%;
  max-width: 800px;
  margin: 0 auto 40px;
}
#pricing .legend-box {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #dc3545;
  margin-right: 8px;
  vertical-align: middle;
}

#pricing i.text-primary {
  color: #0d6efd;
}
/* === Booking Modal – récapitulatif === */
.booking-summary {
  font-size: 16px;
  line-height: 1.5;
}
.booking-summary p {
  margin: 0.25rem 0;
}
.booking-summary hr {
  border-color: #ddd;
  margin: 0.5rem 0;
}
/*────────────────  Ajustements supplémentaires mode sombre  ─────────────*/

/* 1)  textes encore trop gris  → presque blancs */
.text-muted,
.text-muted * ,
.grey,
.grey * ,
.features-instruction,
.pricing-note,
.contact-commnent,
.contact-input,
.contact-submit,
#price-box small,
.section-subtitle{
  color:#e0e0e0 !important;   /* quasi-blanc */
}

/* 2)  contrôles Bootstrap des carrousels (flèches gauche/droite) */
.carousel-control{
  width:5%;                    /* zone cliquable réduite si besoin */
  background:rgba(0,0,0,.45);  /* fond translucide foncé */
}
.carousel-control:hover{
  background:rgba(0,0,0,.70);
}
.carousel-control .glyphicon{
  color:#e6e6e6;               /* flèche claire */
  font-size:40px;
  top:50%;
  margin-top:-20px;
}

/* 3)  barre d’en-tête / navigation */
.navbar,
.navbar-default{
  background:#141414 !important;
  border-color:#222 !important;
}
.navbar .navbar-brand,
.navbar .nav>li>a{
  color:#e6e6e6 !important;
}
.navbar .nav>li>a:hover,
.navbar .navbar-brand:hover{
  color:#69a7ff !important;    /* accent bleu sur survol */
}

/* optionnel : ombre légère sous la barre */
.header .navbar{
  box-shadow:0 2px 4px rgba(0,0,0,.6);
}
/*────────────────  MODE SOMBRE (fond très foncé)  ────────────────*/
body{
  background:#0d0d0d;          /* quasi-noir */
  color:#e6e6e6;               /* texte principal clair */
}

/* sections autrefois blanches / grises */
.section-white,
.section-grey,
.section-dark{
  background:#141414 !important;
  color:#e6e6e6 !important;
}

/* encadrés et cellules calendrier */
#price-box,
.footer,
#calendar .fc-daygrid-day{
  background:#1a1a1a !important;
  border-color:#333 !important;
}

/* ⇢ TOUS les textes “gris” deviennent gris clair */
.text-muted,
.text-muted * ,
.grey,
.grey * ,
.features-instruction,
.pricing-note,
.contact-commnent,
.contact-input,
.contact-submit{
  color:#bbbbbb !important;    /* gris clair */
}

/* couleurs d’accent, inchangées ou ajustées */
.blue{ color:#69a7ff; }
.red { color:#ff7b7b; }

/* boutons principaux (bleu) */
.btn-blue{
  background:#0d6efd;
  border-color:#0d6efd;
}
.btn-blue:hover{
  background:#0b5ed7;
  border-color:#0b5ed7;
}
/*────────────────  Ajustements supplémentaires mode sombre  ─────────────*/

/* 1)  textes encore trop gris  → presque blancs */
.text-muted,
.text-muted * ,
.grey,
.grey * ,
.features-instruction,
.pricing-note,
.contact-commnent,
.contact-input,
.contact-submit,
#price-box small,
.section-subtitle{
  color:#e0e0e0 !important;   /* quasi-blanc */
}

/* 2)  contrôles Bootstrap des carrousels (flèches gauche/droite) */
.carousel-control{
  width:5%;                    /* zone cliquable réduite si besoin */
  background:rgba(0,0,0,.45);  /* fond translucide foncé */
}
.carousel-control:hover{
  background:rgba(0,0,0,.70);
}
.carousel-control .glyphicon{
  color:#e6e6e6;               /* flèche claire */
  font-size:40px;
  top:50%;
  margin-top:-20px;
}

/* 3)  barre d’en-tête / navigation */
.navbar,
.navbar-default{
  background:#141414 !important;
  border-color:#222 !important;
}
.navbar .navbar-brand,
.navbar .nav>li>a{
  color:#e6e6e6 !important;
}
.navbar .nav>li>a:hover,
.navbar .navbar-brand:hover{
  color:#69a7ff !important;    /* accent bleu sur survol */
}

/* optionnel : ombre légère sous la barre */
.header .navbar{
  box-shadow:0 2px 4px rgba(0,0,0,.6);
}
/*────────── Correctifs finaux mode sombre ──────────*/

/* 1)  Titres, sous-titres, petites légendes */
h1, h2, h3, h4, h5, h6,
.section-title,
.medium-title,
.features-heading,
#price-box h3,
.legend,
.separator_wrapper .icon,
.separator_wrapper_white .icon,
#price-box strong{
  color:#f2f2f2 !important;     /* quasi-blanc */
}

/* 2)  Listes-boutons qui contrôlent les carrousels
      (.features-list-colored & .activities)              */
.features-list-colored li,
.features-list-colored li i{
  color:#e6e6e6 !important;     /* texte + icône clairs */
}

.features-list-colored li:hover,
.features-list-colored li:focus{
  color:#69a7ff !important;     /* survol bleu, même logique qu’avant */
}

/* 3)  Petits textes d’info encore ternes */
.features-instruction,
.location-highlights li,
.pricing-note,
.section-subtitle,
.contact input,
.contact textarea,
.contact label{
  color:#d8d8d8 !important;
}

/* 4)  Séparateurs horizontaux (facultatif) */
.separator_wrapper:before,
.separator_wrapper_white:before{
  background:#333 !important;
}
/*────────  Fond des boutons-puces des carrousels  ────────*/
.features-list-colored li{
  background:#1a1a1a;        /* gris foncé au repos */
  border:1px solid #333;     /* fin liseré, même palette */
  border-radius:6px;         /* angles doux (optionnel) */
  padding:8px 12px;          /* garde la zone cliquable */
  display:inline-block;      /* évite le fond plein de la <ul> */
  margin:8px 0;              /* même écart qu’avant */
}

.features-list-colored li:hover,
.features-list-colored li:focus,
.features-list-colored li.active{      /* .active si Bootstrap l’ajoute */
  background:#263d5f;        /* bleu gris discret */
  color:#69a7ff !important;  /* texte & icône bleus (déjà défini) */
  border-color:#3c4d6b;
}
/*──────────  Réduction des espacements verticaux  ──────────*/
/* 1) Google Maps (section-grey juste avant la carte) */
#situation.section-grey,
#situation + .section-grey{          /* la <section> qui contient l'iframe */
  padding-top:10px !important;
  padding-bottom:10px !important;
}

/* 2) Activités */
#activities{
  padding-top:10px !important;
  padding-bottom:10px !important;
}

/* 3) Calendrier & Tarifs */
#pricing{
  padding-top:10px !important;
  padding-bottom:10px !important;
}

/* 4) Contact */
#contact{
  padding-top:10px !important;
  padding-bottom:10px !important;
}

/* (optionnel) marge interne des conteneurs
   pour garder un peu d'air même si la section est serrée */
#activities .container,
#pricing   .container,
#contact   .container,
#situation + .section-grey .container{
  padding-top:0 !important;
  padding-bottom:0 !important;
}
/* Écart vertical réduit entre les boutons “Activités” */
.features-list-colored.activities li{
  margin:5px 0 !important;     /* haut / bas = 5 px, largeur inchangée */
  padding:4px 8px;             /* conserve un peu d’air dans le bouton */
}
/* Écart vertical réduit dans #features (colonne descriptions) */
#features .features-list-colored li{
  margin:15px 0 !important;   /* haut / bas 5 px */
  padding:4px 10px;          /* garde un peu d’air dans le bouton */
}
/* Couleur blanche pour la légende des activités */
#actCaption{
  color:#f2f2f2 !important;   /* texte clair */
  font-weight:400;            /* garde la graisse normale */
}

#calendar td.free  { background:#8fbe77 !important; } /* vert      */
#calendar td.past  { background:#000    !important; } /* noir, prioritaire */
/* --- bouton Envoyer du formulaire de contact ----------------- */
.contact-submit{
  background:#5f5f5f !important;   /* gris foncé */
  border:1px solid #5f5f5f !important;
  color:#fff !important;           /* texte blanc */
}
.contact-submit:hover{
  background:#707070 !important;
  border-color:#707070 !important;
}
/* légende collée au calendrier, mais 20 px avant #price-box */
#pricing .legend{
  margin:6px 0 20px;   /* 6 px top · 0 px latéraux · 20 px bottom */
  font-size:15px;
}
/* ====== Modal « bookingModal » – thème sombre ====== */
#bookingModal .modal-content{
  background:#2b2b2b;           /* gris anthracite */
  color:#f1f1f1;                /* texte principal */
  border:1px solid #444;
}

/* titres, petits textes et traits horizontaux */
#bookingModal .modal-title,
#bookingModal .booking-summary p,
#bookingModal label,
#bookingModal small{
  color:#f1f1f1 !important;
}
#bookingModal hr{
  border-color:#555;
}

/* champs de saisie */
#bookingModal input[type="email"],
#bookingModal input[type="password"],
#bookingModal input[type="date"],
#bookingModal input[type="number"]{
  background:#1d1d1d;
  color:#fff;
  border:1px solid #555;
}
#bookingModal input:focus{
  border-color:#0d6efd;         /* rappel du bleu Bootstrap */
  box-shadow:none;
}

/* cases à cocher (animaux + CGV) */
#bookingModal input[type="checkbox"]{
  accent-color:#0d6efd;         /* chrome / edge / ff récents */
}

/* boutons du footer */
#bookingModal .modal-footer .btn{
  min-width:120px;
}
#bookingModal .btn-blue{        /* déjà présent mais on ré-affirme */
  background:#0d6efd;
  border-color:#0d6efd;
  color:#fff;
}
#bookingModal .btn-blue:hover{
  background:#0b5ed7;
  border-color:#0b5ed7;
}
#bookingModal .btn-default{     /* bouton Annuler en gris foncé */
  background:#444;
  border-color:#444;
  color:#f1f1f1;
}
#bookingModal .btn-default:hover{
  background:#555;
  border-color:#555;
}

/* ——— Overlay langue ——— */
#lang-overlay{
  position:fixed;
  inset:0;
  background:#fff;
  z-index:20000;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:24px;
  font-family:Roboto, sans-serif;
  text-align:center;
  visibility:hidden;            /* masqué par défaut */
}

/* ——— Boutons ——— */
#lang-overlay button{
  min-width:160px;
  padding:12px 24px;
  font-size:18px;
  border:0;
  border-radius:6px;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  cursor:pointer;
  transition:transform .15s;
}
#lang-overlay button:hover{ transform:scale(1.05); }


/* Masque la page tant qu'on n’a pas choisi langue ou type */
body.preLangHidden  > *:not(#chooser-overlay),
body.preTypeHidden  > *:not(#chooser-overlay){
  display:none !important;
}
/* ——— Overlay langue : thème sombre ——— */
#lang-overlay{
    background:#000;          /* fond noir */
    color:#fff;               /* texte blanc */
}

/* Boutons gris */
#lang-overlay button{
    background:#666;          /* gris moyen */
    color:#fff;               /* libellé blanc */
}
#lang-overlay button:hover{
    background:#777;          /* un ton plus clair au survol */
    transform:scale(1.05);    /* (garde l’animation existante) */
}
#lang-overlay, #type-overlay{
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,.6); color:#fff;
  display:flex; flex-direction:column; gap:2rem;
  justify-content:center; align-items:center;
}

body.preLangHidden, body.preTypeHidden{overflow:hidden}
/* ────── Overlays langue + type ────── */
.overlay{
  position:fixed; inset:0; z-index:20000;
  display:flex; flex-direction:column; gap:2rem;
  justify-content:center; align-items:center;
  font-family:Roboto,sans-serif;
  text-align:center;
  background:rgba(0,0,0,.65);   /* dégradé sombre lisible */
  color:#fff;
}

.overlay-btns{
  display:flex; gap:1.5rem; flex-wrap:wrap;
  justify-content:center;
}

.overlay-btns button{
  min-width:180px; padding:14px 28px;
  font-size:18px; font-weight:600;
  background:#666; color:#fff;
  border:0; border-radius:6px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  cursor:pointer; transition:transform .15s, background .15s;
}
.overlay-btns button:hover{ background:#777; transform:scale(1.05); }

/* Masque la page tant qu’on n’a pas la réponse correspondante */
body.preLangHidden > *:not(#chooser-overlay){ display:none!important; }
body.preTypeHidden > *:not(#chooser-overlay){ display:none!important; }
/* ─── Overlay : on empile les deux étapes l'une sous l'autre ─── */
.overlay         { justify-content:flex-start; padding-top:8vh; }

/* chaque étape occupe toute la largeur mais ne se compresse pas */
.step             { width:100%; text-align:center; margin-bottom:4rem; }

/* quand la langue est choisie, on la grise un peu */
.step.faded       { opacity:.35; pointer-events:none; }

/* petit paragraphe d'aide */
.step-help        { font-size:1rem; margin:1rem 0 2rem; color:#ddd; }
/* overrides.css – juste après les règles .overlay … */
/* double la taille du texte d’aide */
.step-help{
  font-size: 2rem;          /* texte 2× plus grand */
  max-width: 680px;
  line-height: 1.35;

  /* ↓↓↓ centrage horizontal du PARAGRAPHE et de son texte ↓↓↓ */
  margin: .5rem auto 1.2rem;   /* auto à gauche & droite ⇒ bloc centré */
  text-align: center;          /* centre chaque ligne à l’intérieur     */
}
/* Cartes d'options dans le modal réservation */
.option-card{
  background:#f7f9ff;
  border:1px solid #d0d9ff;
  border-radius:12px;
  padding:16px 18px;
  box-shadow:0 4px 10px rgba(13,110,253,.06);
  margin-bottom:16px;
}
.option-title{
  font-weight:600;
  font-size:16px;
  display:block;
  margin-bottom:8px;
}
.option-sub{
  font-size:14px;
  color:#5f6b7a;
  margin-top:6px;
}

/* Checkbox bien visible */
.big-check label{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  font-size:16px;
}
.big-check input[type="checkbox"]{
  transform:scale(1.25);
}

/* --- forcer l’empilement vertical du texte et de la .price-line --- */
.features-heading{
  /* deux solutions, choisis celle que tu préfères */

  /* ① garder le flex mais en colonne */
  /* flex-direction: column;          */

  /* ② (plus simple ici) repasser en bloc classique */
  display: block !important;

  text-align: center;        /* centre le contenu */
  width: 100%;               /* prend toute la largeur dispo */
}

.features-heading .price-line{
  display: block;            /* une vraie ligne distincte   */
  margin-top: .25rem;        /* petit espace au-dessus      */
  font-size: 1.5rem;
  font-weight: 400;
  color: #e8e8e8;
}
/* met en avant les deux premiers atouts du sous-titre d’accueil */
.lead-highlight{
  font-weight:700;          /* gras */
  color:#0d6efd;            /* même bleu “brand” que les boutons */
  font-size:1.15em;         /* légèrement plus grand */
  letter-spacing:.2px;
}
/* === Bouton "Vue annuelle" ======================================= */
.btn-year-15 {
  background:#303337;          /* même bleu que .btn-blue */
  color:#fff;
  border:none;
  border-radius:50px;          /* pill-shape */
  font-size:18px;              /* ≃ ×2 le .btn-sm (≈ 13-14 px) */
  font-weight:600;
  padding:10px 20px;           /* ≃ ×2 l’épaisseur */
  line-height:1.2;
  transition:background .2s;
}
/* ­­­­­­­­­­­­­­­­­­­ Agrandir uniquement les titres des deux chambres */
.room-title {
  font-size: 3em;          /* +30 % par rapport au <h3> Bootstrap */
  line-height: 1.25;         /* garde une belle hauteur de ligne   */
}
/* 1. VUE ANNUELLE — fond noir + texte blanc */

#bookingModal .option-card {
  background-color: rgba(50, 50, 50, 0.55) !important;
  color: #fff !important;
  border: 1px solid #444;
}
#bookingModal .option-card input,
#bookingModal .option-card label,
#bookingModal .option-card .option-title,
#bookingModal .option-card .option-sub {
  background-color: rgba(50, 50, 50, 0.55) !important;
  color: #fff !important;
}
/*──────────── 1) BANNIÈRE + EN-TÊTE JOURS DU CALENDRIER MENSUEL ───────────*/
#calendar .fc-header-toolbar,                               /* bandeau entier   */
#calendar .fc-header-toolbar .fc-toolbar-chunk,             /* sous-conteneurs  */
#calendar th.fc-col-header-cell,                            /* <th> Lu-Di       */
#calendar .fc-col-header-cell-cushion {                     /* libellé “Lu” …   */
  background:#2b2b2b !important;        /* gris foncé        */
  color:#d1d1d1       !important;        /* texte gris clair  */
}

/*──────────── 2) MODAL « VUE ANNUELLE » — corps complet sombre ────────────*/
#yearModal-ch1 .modal-content,
#yearModal-ch2 .modal-content,
#yearModal-ch1 .modal-header,          /* bandeau titre du modal */
#yearModal-ch2 .modal-header,
#yearCal        .fc-scrollgrid,
#yearCal-ch1    .fc-scrollgrid,
#yearCal-ch2    .fc-scrollgrid {       /* zones qui restaient blanches */
  background:#2b2b2b !important;
  color:#fff      !important;
  border-color:#444 !important;        /* raccord avec le reste */
}
/* ——— Désactivation des floats Bootstrap sur mobile ——— */
@media (max-width:767px){
  #contact-form .col-md-6,
  #contact-form .col-md-12{
    float:none !important;   /* ← on écrase Bootstrap */
    width:100% !important;   /* sécurité */
    clear:both;              /* commence toujours sur une nouvelle ligne */
  }

  /* les champs eux-mêmes n’ont plus besoin de flotter */
  #contact-form input.contact-input,
  #contact-form textarea.contact-commnent{
    float:none;
  }
}
/* =========================
   PATCH #1 — Masquer "English"
   (ne supprime rien dans le HTML)
   ========================= */
#step-lang [data-lang="en"] { 
  display: none !important; 
}

/* =========================
   PATCH #2 — Overlay mobile : centrer et rendre scrollable
   (corrige : titre "Choisissez votre formule" trop haut
    + boutons coupés sur GSM)
   Remplace SANS TOUT CASSER :
   - l’alignement "flex-start" de .overlay
   - les gros paddings du bloc .chooser-inner
   ========================= */

/* permet le scroll quand le contenu dépasse la hauteur écran */
#chooser-overlay {
  /* ligne existante au-dessus dans ton template :
     #chooser-overlay{ position:fixed; inset:0; z-index:20000; ... } */
  overflow: auto; 
  /* ajoute des marges de sécurité (iOS notch compris) */
  padding: max(12px, env(safe-area-inset-top)) 16px 
           max(20px, calc(env(safe-area-inset-bottom) + 12px));
}

/* centre verticalement UNIQUEMENT l’overlay du chooser */
#chooser-overlay .chooser-inner{
  /* ligne existante juste au-dessus dans le template :
     #chooser-overlay .chooser-inner{ ... display:flex; align-items:flex-start; padding: clamp(140px,18vh,250px) ... } */
  min-height: 100dvh;          /* hauteur écran moderne (corrige les barres mobiles) */
  display: flex;
  align-items: center;          /* <-- au lieu de flex-start */
  justify-content: center;      
  padding: 0 !important;        /* neutralise le gros padding vertical */
}

/* limite la largeur et garde un bon rendu */
#chooser-overlay .step-card{
  width: 100%;
  max-width: 600px;             /* raisonnable pour 2 boutons */
  margin: 0 auto;
}

/* boutons : pile bien sur mobile, non coupés */
@media (max-width: 575.98px){
  #chooser-overlay .overlay-btns{
    display: grid;
    grid-template-columns: 1fr; /* 1 par ligne */
    gap: 12px;
  }
  #chooser-overlay h2{
    font-size: 22px;
    margin-bottom: 12px;
  }
  #chooser-overlay .overlay-btns button{
    padding: 12px 14px;
    font-size: 16px;
  }
}