/* =========================================================================
   HÔTEL LA GARENNE — feuille de style du projet (v3)
   Identité : bleu et or du logo, crème et bleu ciel, tons volontairement sourds.
   Polices : Montserrat (structure) + Lora italique (chapôs).
   Icônes : Material Symbols fournies par le plugin HWD (.hwd-ms).
   Seul endroit où écrire du CSS pour ce site.
   ========================================================================= */
:root{
  --lg-bleu:#3E72AE;
  --lg-bleu-nuit:#1F4A73;
  --lg-bleu-ciel:#EAF0F5;
  --lg-sable:#B49B7E;
  --lg-sable-pale:#ECE6DC;
  --lg-creme:#FAF8F4;
  --lg-encre:#2B3339;
  --lg-gris:#6E7780;
}

/* ---- Base --------------------------------------------------------------- */
body{ -webkit-font-smoothing:antialiased; }
img{ height:auto; }
.elementor-widget-text-editor p:last-child{ margin-bottom:0; }

/* ---- Filigrane ---------------------------------------------------------
   Le filigrane de l'emblème n'est PAS ici : il est dans
   Elementor → Réglages du site → CSS personnalisé, pour être modifiable
   sans toucher aux fichiers (taille, position, opacité, couleur).
   Le dessin est le fichier assets/marque.svg de ce thème enfant.
   Une copie du bloc est fournie dans le plugin : assets/filigrane.css
   ------------------------------------------------------------------------ */

/* ---- En-têtes de section réellement centrés ----------------------------- */
.lg-entete-section{ text-align:center; align-items:center; }
.lg-entete-section > *{ width:100%; max-width:760px; margin-inline:auto; }
.lg-entete-section .elementor-heading-title{ text-align:center; }

/* ---- Icônes Material ---------------------------------------------------- */
.hwd-ms{ --hwd-ms-wght:250; }
.elementor-icon .hwd-ms, .elementor-icon-list-icon .hwd-ms{ line-height:1; }
.elementor-widget-icon-box .elementor-icon{ transition:transform .25s ease; }
.elementor-widget-icon-box:hover .elementor-icon{ transform:translateY(-3px); }
.elementor-icon-list-item a{ color:inherit; text-decoration:none; }
.elementor-icon-list-item a:hover{ color:var(--lg-sable); }
.elementor-icon-list-icon{ display:flex; align-items:flex-start; }

/* ---- Hero --------------------------------------------------------------- */
.lg-hero{ overflow:hidden; }
.lg-hero h1,.lg-hero h5,.lg-hero p{ text-shadow:0 1px 20px rgba(10,24,40,.42); }
.lg-hero .elementor-background-video-container,
.lg-hero .elementor-background-video-embed{ background:transparent!important; }

/* ---- Cartes ------------------------------------------------------------- */
.lg-carte .elementor-widget-image img{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; }
/* Chambres : deux cartes par ligne, slider de photos (décalé en JS) */
@media (min-width:1025px){ .page-id-42 .elementor-element.lg-carte{ width:calc(50% - 13px); } }
.lg-carte .lg-slider-chambre{ width:100%; margin:0; }
.lg-carte .lg-slider-chambre .elementor-image-carousel-wrapper{ width:100%; }
.lg-carte .lg-slider-chambre .swiper-slide-image{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; cursor:zoom-in; }
.lg-carte .lg-slider-chambre .swiper-slide figure{ margin:0; }
.lg-carte .lg-slider-chambre .elementor-swiper-button{ color:#fff; font-size:22px; text-shadow:0 1px 6px rgba(0,0,0,.45); }
.lg-carte .lg-slider-chambre .swiper-pagination-bullet{ background:#fff; opacity:.65; }
.lg-carte .lg-slider-chambre .swiper-pagination-bullet-active{ opacity:1; }
.lg-carte .lg-slider-chambre .swiper-pagination{ bottom:10px; }
.lg-carte:has(.lg-slider-chambre):hover{ transform:none; }
.lg-carte[id]{ scroll-margin-top:118px; }
.lg-carte{ transition:transform .28s ease, box-shadow .28s ease; }
.lg-carte:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(31,74,115,.13)!important; }

/* ---- En-tête ------------------------------------------------------------ */
.lg-entete.elementor-sticky--effects{ box-shadow:0 2px 18px rgba(31,74,115,.12)!important; }
.lg-entete.elementor-sticky--effects .lg-logo img{ max-width:134px; }
.lg-entete .lg-logo img{ transition:max-width .25s ease; }
[id="reserver"]{ scroll-margin-top:118px; }
@media (max-width:1024px){
  .lg-logo img{ max-width:150px; }
  .elementor-nav-menu--dropdown,.hfe-nav-menu--dropdown{ box-shadow:0 14px 34px rgba(31,74,115,.16); }
}
@media (max-width:480px){ .lg-logo img{ max-width:122px; } }

/* ---- Pied de page ------------------------------------------------------- */
.lg-footer a{ color:#CBD8E4; text-decoration:none; }
.lg-footer a:hover{ color:#FFFFFF; }
.lg-footer-titre{ position:relative; padding-bottom:12px; }
.lg-footer-titre::after{
  content:''; position:absolute; left:0; bottom:0; width:26px; height:2px; background:var(--lg-sable);
}
.lg-footer-liens a{ display:inline-block; transition:transform .18s ease; }
.lg-footer-liens a:hover{ transform:translateX(3px); }
.lg-footer .elementor-icon-list-text{ color:#CBD8E4; font-size:14px; line-height:1.65; }
.lg-footer .elementor-icon-list-item{ align-items:flex-start; }

/* ---- Barre de réservation -----------------------------------------------
   Les styles sont volontairement verrouillés : ces champs sont dans un widget
   HTML, ils héritent sinon des styles de boutons globaux d'Elementor.         */
.lg-moteur{
  display:flex; flex-wrap:wrap; align-items:stretch; gap:10px;
  background:#fff; border:1px solid #E1D9CB; border-radius:4px; padding:12px;
  box-shadow:0 2px 14px rgba(31,74,115,.06);
}
.lg-moteur__champ{
  position:relative; display:flex; align-items:center; flex:1 1 180px; min-width:158px;
  border:1px solid #DDE4EA; border-radius:3px; background:#FCFDFE; transition:border-color .18s ease;
}
.lg-moteur__champ:focus-within{ border-color:var(--lg-bleu); }
.lg-moteur__champ > .hwd-ms:first-child{
  font-size:20px; color:var(--lg-sable); margin-left:13px; pointer-events:none; --hwd-ms-wght:250;
}
.lg-moteur .lg-moteur__champ input,
.lg-moteur .lg-moteur__champ select{
  flex:1 1 auto; width:100%; border:0!important; outline:0; background:transparent!important;
  box-shadow:none!important; cursor:pointer; border-radius:0;
  font:500 14.5px/1 Montserrat,system-ui,sans-serif!important; color:var(--lg-encre)!important;
  letter-spacing:normal!important; text-transform:none!important;
  padding:15px 12px!important; margin:0; appearance:none; -webkit-appearance:none; min-height:0; height:auto;
}
.lg-moteur__champ input::placeholder{ color:#9AA3AC; font-weight:500; opacity:1; }
.lg-moteur__champ select:invalid{ color:#9AA3AC; }
.lg-moteur__chevron{ font-size:19px; color:#9AA3AC; margin-right:11px; pointer-events:none; }
.lg-moteur .lg-moteur__btn{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--lg-sable)!important; color:#fff!important; border:0!important; border-radius:3px!important;
  cursor:pointer; box-shadow:none!important;
  font:600 12.5px/1 Montserrat,system-ui,sans-serif!important; letter-spacing:.11em!important;
  text-transform:uppercase!important; padding:0 26px!important; margin:0; min-height:0;
  transition:background .18s ease;
}
.lg-moteur .lg-moteur__btn:hover{ background:var(--lg-bleu)!important; }
.lg-moteur .lg-moteur__btn .hwd-ms{ font-size:19px; --hwd-ms-wght:300; }
.lg-moteur__note{
  flex:1 1 100%; margin:0; padding:0;
  font:600 11px/1.5 Montserrat,system-ui,sans-serif; letter-spacing:.06em; color:#B0392F;
}
.lg-moteur__note:empty{ display:none; }
@media (max-width:767px){
  .lg-moteur{ padding:10px; gap:8px; }
  .lg-moteur__champ{ flex:1 1 100%; }
  .lg-moteur .lg-moteur__btn{ width:100%; padding:17px 20px!important; }
}

/* ---- Calendrier ---------------------------------------------------------- */
.lg-cal{
  position:absolute; z-index:9999; top:calc(100% + 8px); left:0; width:292px;
  background:#fff; border:1px solid #DDE4EA; border-radius:4px; padding:14px;
  box-shadow:0 16px 40px rgba(31,74,115,.18);
  font-family:Montserrat,system-ui,sans-serif; user-select:none;
}
.lg-cal[hidden]{ display:none; }
.lg-cal__tete{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.lg-cal__mois{ font-size:13.5px; font-weight:700; color:var(--lg-bleu-nuit); text-transform:capitalize; }
.lg-cal .lg-cal__nav{
  border:0!important; background:#F1F5F9!important; color:var(--lg-bleu-nuit)!important;
  width:30px!important; height:30px!important; min-height:0; border-radius:3px!important;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  padding:0!important; margin:0; box-shadow:none!important; letter-spacing:normal!important;
}
.lg-cal .lg-cal__nav:hover{ background:var(--lg-bleu)!important; color:#fff!important; }
.lg-cal .lg-cal__nav .hwd-ms{ font-size:19px; }
.lg-cal__grille{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.lg-cal__jour-nom{
  font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#9AA3AC; text-align:center; padding:6px 0;
}
.lg-cal .lg-cal__jour{
  border:0!important; background:transparent!important; color:var(--lg-encre)!important;
  cursor:pointer; border-radius:3px!important; padding:0!important; margin:0; min-height:0;
  height:34px; box-shadow:none!important; text-transform:none!important; letter-spacing:normal!important;
  font:500 13px/1 Montserrat,system-ui,sans-serif!important;
}
.lg-cal .lg-cal__jour:hover:not(:disabled){ background:var(--lg-bleu-ciel)!important; }
.lg-cal .lg-cal__jour:disabled{ color:#C8CED4!important; cursor:default; }
.lg-cal .lg-cal__jour--sel{ background:var(--lg-bleu)!important; color:#fff!important; font-weight:700!important; }
.lg-cal .lg-cal__jour--vide{ visibility:hidden; }
@media (max-width:767px){ .lg-cal{ left:0; right:0; width:auto; } }

/* ---- Blocs « à compléter » ---------------------------------------------- */
.lg-placeholder{
  display:block; border:1px dashed #C3CEDA; border-radius:3px;
  background:repeating-linear-gradient(135deg,#F9FBFD,#F9FBFD 10px,#EFF4F9 10px,#EFF4F9 20px);
  padding:18px 20px;
}
.lg-placeholder strong{
  display:block; font:600 11.5px/1.4 Montserrat,system-ui,sans-serif;
  letter-spacing:.11em; text-transform:uppercase; color:var(--lg-bleu); margin-bottom:6px;
}
.lg-placeholder span{ font:400 15px/1.65 Montserrat,system-ui,sans-serif; color:var(--lg-gris); }

/* ---- Formulaire Elementor Pro ------------------------------------------- */
.lg-formulaire .elementor-field-label{
  letter-spacing:.1em; text-transform:uppercase; color:var(--lg-gris);
  font-family:Montserrat,system-ui,sans-serif; font-weight:600; font-size:11.5px;
}
.lg-formulaire .elementor-field-group .elementor-field{ padding:12px; }
.lg-formulaire .elementor-field-type-acceptance label{ font-size:13.5px; line-height:1.55; color:var(--lg-gris); }
.lg-formulaire .elementor-message-success{ background:var(--lg-bleu-ciel); color:var(--lg-bleu-nuit); border-radius:3px; }

/* LG:GALERIES début — bloc ajouté par le plugin « nouvelles photos v4 ».
   Il met en grille les galeries et recadre toutes les vignettes au même
   format (3/2), ce qui permet de mélanger photos horizontales, verticales
   et carrées sans casser l'alignement.
   Vous pouvez modifier ces règles ici, ou les surcharger depuis
   Elementor → Réglages du site → CSS personnalisé (chargé après ce fichier). */
.lg-galerie .gallery{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
  /* Elementor pose une marge droite négative sur la galerie (c'est sa façon de
     gérer l'espacement en flottant). Avec une grille CSS, cette marge fait
     déborder la dernière colonne : on la neutralise. */
  margin:0 !important;
  padding:0 !important;
  width:100%;
}
.lg-galerie .gallery-item{
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  float:none !important;
}
.lg-galerie .gallery-item .gallery-icon{ margin:0; }
.lg-galerie .gallery-item a{
  display:block;
  overflow:hidden;
  border-radius:2px;
}
.lg-galerie .gallery-item img{
  width:100%;
  height:auto;
  aspect-ratio:3 / 2;
  object-fit:cover;
  display:block;
  border:0 !important;
  border-radius:2px;
  transition:transform .45s ease, filter .45s ease;
}
.lg-galerie .gallery-item a:hover img{ transform:scale(1.04); filter:brightness(1.04); }

/* Galeries à trois colonnes */
#lg-galerie-piscine .gallery,
#lg-galerie-superieures .gallery{ grid-template-columns:repeat(3, minmax(0, 1fr)); }

@media (max-width:1024px){
  .lg-galerie .gallery,
  #lg-galerie-piscine .gallery,
  #lg-galerie-superieures .gallery{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:767px){
  .lg-galerie .gallery,
  #lg-galerie-piscine .gallery,
  #lg-galerie-superieures .gallery{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
}
/* ---- Rangées de photos ----
   Uniformise la hauteur des photos d'une même rangée : sans cela, une photo
   verticale et une photo horizontale côte à côte ne s'alignent pas. */
.lg-photos-4-5 .elementor-widget-image img{
  width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover; display:block;
}
.lg-photos-3-2 .elementor-widget-image img{
  width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover; display:block;
}

/* ---- Correctif de mise en page (sans rapport avec les photos) ----
   Sur la page « Nos chambres », deux blocs avaient une largeur fixe en pixels
   (780 px et 760 px) supérieure à la place disponible sur une tablette en
   portrait (768 px) : la page se décalait de 12 px vers la droite et une barre
   de défilement horizontale apparaissait. Aucun conteneur ne doit dépasser son
   parent ; cette règle le garantit partout, sans rien changer en grand écran. */
.e-con{ max-width:100%; }
/* LG:GALERIES fin */

/* Bandeau de consentement : texte clair sur le fond sombre du bandeau
   (le kit Elementor imposait du bleu foncé sur fond transparent : illisible) */
.eucc-banner .eucc-btn { color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.65); font-family: inherit; letter-spacing: .04em; }
.eucc-banner .eucc-btn:hover, .eucc-banner .eucc-btn:focus-visible { background: rgba(255,255,255,.26); color: #fff; }
.eucc-banner .eucc-btn--ghost { background: transparent; border-color: rgba(255,255,255,.4); }
.eucc-banner__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.eucc-banner .eucc-btn { width: auto; min-width: 0; padding: 11px 16px; white-space: nowrap; flex: 0 0 auto; letter-spacing: .02em; }
@media (max-width: 640px) { .eucc-banner__actions { flex-direction: column; align-items: stretch; } .eucc-banner .eucc-btn { width: 100%; } }

/* ---------- Page « Réserver » : widget Open System ---------- */
.lg-os{ min-height:360px; }
.lg-os__attente{ color:var(--lg-gris); text-align:center; padding:48px 0; }
.lg-os__erreur{ background:var(--lg-bleu-ciel); padding:20px 24px; border-radius:4px; }
.lg-os__erreur a{ color:var(--lg-bleu-nuit); text-decoration:underline; }
/* couleurs de l'hôtel à la place du vert d'Open System */
.lg-os a.OsMoteurBtnRecherche,
.lg-os .btn-reserver a{ background:var(--lg-bleu) !important; border-color:var(--lg-bleu) !important; color:#fff !important; }
.lg-os a.OsMoteurBtnRecherche:hover,
.lg-os .btn-reserver a:hover{ background:var(--lg-bleu-nuit) !important; border-color:var(--lg-bleu-nuit) !important; }
.lg-os .osw-prix-valeur,
.lg-os .osw-prix-valeur *{ color:var(--lg-bleu-nuit) !important; border-color:var(--lg-bleu-nuit) !important; }

/* Lightbox des chambres : pas de nom de fichier en légende */
.elementor-lightbox .elementor-slideshow__title,
.elementor-lightbox .elementor-slideshow__description{ display:none; }

/* Lien « Paramètres de confidentialité » du pied de page (bouton du bandeau cookies rendu comme un lien) */
.elementor-location-footer .eucc-manage-link{background:none;border:0;padding:0;margin:0;font:inherit;color:#CBD8E4;text-decoration:none;cursor:pointer}
.elementor-location-footer .eucc-manage-link:hover{color:#FFFFFF}