/* Styles des widgets VLBH. Ils utilisent les jetons du child theme (tokens.css) ; rien n'est codé en dur. */ /* Les conteneurs « Contenu 1280 » portent une largeur fixe : comme le max-width de la maquette, ils ne doivent jamais dépasser la zone de contenu de leur section (sinon débordement entre 1200 et 1360 px). */ .elementor .e-con { max-width: 100%; } /* — Barre de dates — mesures de la maquette (SearchStrip) : grille 1fr 1fr 1fr auto, écart 20, labels 11/10, champs 50, bouton 55 ; message sous la barre (14 + filet + 12). */ .vlbh-date-bar { display: block; } .vlbh-date-bar__grille { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 20px; align-items: end; } /* Trois champs, trois colonnes, ecrites en toutes lettres. `repeat(auto-fit, minmax(160px,1fr))` ne convient pas ici : le bouton occupe la ligne entiere (`grid-column: 1 / -1`), donc aucune piste n'est jamais vide, donc auto-fit n'en replie aucune. La grille gardait autant de pistes de 160 px qu'il en tenait — sept a 1440 px — les trois champs se serraient a gauche et « Combien de voyageurs ? » se faisait couper. Mesure : 163 px de large pour 260 px necessaires au texte. Le vide a droite et le texte tronque avaient la meme cause. */ .vlbh-date-bar--grille .vlbh-date-bar__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; } .vlbh-date-bar--grille .vlbh-date-bar__champ { align-content: start; } .vlbh-date-bar__champ { display: grid; gap: 7px; min-width: 0; } .vlbh-date-bar label { display: grid; gap: 2px; } .vlbh-date-bar__fr { font: 600 11px/1.25 var(--font-sans); letter-spacing: 1.32px; text-transform: uppercase; color: var(--forest-800); } .vlbh-date-bar__en { font: 500 10px/1.25 var(--font-sans); letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold-900); } .vlbh-date-bar__saisie { position: relative; display: block; } .vlbh-date-bar__ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; fill: none; stroke: var(--gold-700); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } /* Sélecteurs longs : les réglages « Champs de formulaire » du Kit Elementor (input:not(...):not(...)) passent devant une simple classe. */ form.vlbh-date-bar .vlbh-date-bar__champ .vlbh-date-bar__saisie input, form.vlbh-date-bar .vlbh-date-bar__champ .vlbh-date-bar__saisie select { width: 100%; height: auto; padding: 12px 14px 12px 40px; border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); background: var(--cream-050); color: var(--text-primary); font: 400 16px/1.4 var(--font-body); appearance: none; -webkit-appearance: none; box-shadow: none; transition: var(--transition-color), box-shadow var(--dur-fast) var(--ease-out); } form.vlbh-date-bar .vlbh-date-bar__champ .vlbh-date-bar__saisie select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 13px center; background-size: 16px; } /* « right 13px calc(50% + 8px) » : trois valeurs, syntaxe invalide — le navigateur jetait la déclaration et peignait le chevron en haut à gauche, hors du champ. La maquette le pose à 13 px du bord droit, centré. */ /* Un champ de date vide n’affiche rien sur telephone — ni sous iOS, ni sous Android — la ou un navigateur de bureau ecrit « jj/mm/aaaa ». Le site ecrit donc son propre indice, et masque celui du navigateur tant que le champ est vide et hors du focus. Des qu’on le touche ou qu’une date est choisie, le rendu natif reprend la main : on ne cache jamais une valeur, seulement un vide. L’apparence du champ n’est PAS touchee ici, et il ne faut pas la toucher : lui rendre son rendu natif (`appearance: auto`) donne au controle, sous Safari, une largeur minimale intrinseque plus grande que la place disponible — elle elargit la page, qui se laisse alors pousser vers la droite. Constate sur iPhone, apparu puis disparu avec cette seule declaration. Chrome ne la reproduit pas. */ .vlbh-date-bar__format { position: absolute; left: 40px; top: 50%; transform: translateY(-50%); pointer-events: none; font: 400 16px/1.4 var(--font-body); color: var(--text-secondary); } .vlbh-date-bar__saisie.est-remplie .vlbh-date-bar__format, .vlbh-date-bar__saisie input[type="date"]:focus ~ .vlbh-date-bar__format { display: none; } .vlbh-date-bar__saisie:not(.est-remplie) input[type="date"]:not(:focus) { color: transparent; } /* Avec l’apparence neutralisee, Safari rend la valeur du champ de date centree et flanquee de ses propres marges : la date ne tombe alors pas la ou l’indice la promettait, et l’interieur du champ parait mal cale. Ces deux pseudo-elements sont propres a WebKit ; ailleurs ils sont ignores, et sous Chrome ils alignent la valeur exactement sur le bord du remplissage, comme l’indice. */ form.vlbh-date-bar .vlbh-date-bar__champ .vlbh-date-bar__saisie input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; } form.vlbh-date-bar .vlbh-date-bar__champ .vlbh-date-bar__saisie input[type="date"]::-webkit-datetime-edit { padding: 0; } /* Hauteur commune aux trois champs. Le champ de date mesurait 50,4 px quand le menu deroulant en faisait 48,4, a remplissage et interligne identiques : la boite interne du controle natif ajoute deux pixels que le modele de boite ne prevoit pas. Les compenser par le remplissage serait fragile, la valeur variant d’un moteur a l’autre ; une hauteur explicite donne le meme resultat partout. */ form.vlbh-date-bar .vlbh-date-bar__champ .vlbh-date-bar__saisie input[type="date"], form.vlbh-date-bar .vlbh-date-bar__champ .vlbh-date-bar__saisie select { height: 48px; } form.vlbh-date-bar .vlbh-date-bar__champ .vlbh-date-bar__saisie input:focus, form.vlbh-date-bar .vlbh-date-bar__champ .vlbh-date-bar__saisie select:focus { border-color: var(--border-gold); box-shadow: var(--ring-focus); outline: none; } form.vlbh-date-bar button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 55px; padding: 17px 36px; border: 1px solid var(--gold-500); border-radius: var(--radius-pill); background: var(--cream-050); color: var(--forest-800); font: 600 14px/1 var(--font-sans); letter-spacing: 0.84px; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: var(--transition-color), transform var(--dur-instant) var(--ease-out); } form.vlbh-date-bar button:hover { background: var(--gold-050); border-color: var(--gold-700); color: var(--forest-900); } form.vlbh-date-bar button:active { transform: var(--press-translate); } .vlbh-date-bar__ico-btn { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .vlbh-date-bar__info { display: flex; align-items: center; gap: 9px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule-soft); } .vlbh-date-bar--grille .vlbh-date-bar__info { margin-top: 18px; padding-top: 0; border-top: 0; } .vlbh-date-bar__info[hidden] { display: none; } .vlbh-date-bar__ico-info { flex: 0 0 auto; width: 15px; height: 15px; fill: none; stroke: var(--gold-700); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .vlbh-date-bar__message { font: 400 14.5px/1.5 var(--font-body); color: var(--text-secondary); } /* En mode grille, les champs se repartissent automatiquement : un quatrieme element retomberait en bas d’une ligne incomplete selon la largeur. Le bouton prend donc toute la ligne, sous les champs — pleine largeur au telephone comme sur l’accueil, a sa largeur propre au-dela. */ .vlbh-date-bar--grille .vlbh-date-bar__grille > button { grid-column: 1 / -1; justify-self: stretch; } @media (min-width: 768px) { .vlbh-date-bar--grille .vlbh-date-bar__grille > button { justify-self: center; } } @media (max-width: 1080px) and (min-width: 641px) { .vlbh-date-bar--accueil .vlbh-date-bar__grille { grid-template-columns: 1fr 1fr; } .vlbh-date-bar--accueil .vlbh-date-bar__champ:nth-child(3) { min-width: 240px; } .vlbh-date-bar--accueil button { grid-column: 1 / -1; } } @media (max-width: 640px) { .vlbh-date-bar--accueil .vlbh-date-bar__grille { grid-template-columns: 1fr; } } /* La barre des logements est en mode grille : « auto-fit » sur des colonnes de 160 px au minimum. Entre 408 et 583 px de large, ca donne exactement deux colonnes pour trois champs — Arrivee et Depart cote a cote, Voyageurs seul sur une deuxieme ligne, avec un trou a sa droite. Mesure a 430 px, la largeur des grands iPhone. En dessous du point de rupture mobile, une seule colonne, comme sur l’accueil ; a partir de 768 px les trois tiennent sur une ligne, verifie. */ /* En dessous de 960 px, trois colonnes laisseraient moins de 260 px au champ voyageurs : on passe a deux et le troisieme prend la ligne pour lui. */ @media (max-width: 959px) and (min-width: 768px) { .vlbh-date-bar--grille .vlbh-date-bar__grille { grid-template-columns: 1fr 1fr; } .vlbh-date-bar--grille .vlbh-date-bar__champ:nth-child(3) { grid-column: 1 / -1; } } @media (max-width: 767px) { .vlbh-date-bar--grille .vlbh-date-bar__grille { grid-template-columns: 1fr; } } /* Bandeau « Toute la villa » allumé quand le groupe dépasse la capacité d'un hébergement. */ .vlbh-villa-band { transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .vlbh-villa-band.is-actif { border-color: var(--gold-300) !important; box-shadow: 0 0 0 3px rgba(219,180,100,.25); } /* cartes grisees par la logique de capacite (mode grille) */ .vlbh-logement-card { transition: opacity var(--dur-base) var(--ease-out); } .vlbh-logement-card[data-dim="1"] { opacity: .38; } /* — Cadre Smoobu — */ /* — Rail de réservation — */ .vlbh-rail { display: grid; gap: var(--space-4); padding: var(--pad-card-lg); background: var(--surface-card); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--shadow-md); } .vlbh-rail__prix { display: flex; align-items: baseline; gap: 6px; font: var(--type-data); color: var(--forest-800); } .vlbh-rail__prix small { font: var(--type-small); color: var(--text-muted); } .vlbh-rail__dates { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } .vlbh-rail__dates label { display: grid; gap: 6px; font: var(--type-label); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); } .vlbh-rail__dates input { height: 46px; padding: var(--pad-field); border: var(--border-hair) solid var(--border-hairline); border-radius: var(--field-radius); background: var(--cream-050); font: var(--weight-medium) var(--text-base) var(--font-sans); color: var(--text-primary); min-width: 0; } .vlbh-rail__lignes { display: grid; gap: 8px; padding-top: var(--space-3); border-top: 1px solid var(--rule-soft); font: var(--type-small); color: var(--text-secondary); } .vlbh-rail__lignes div { display: flex; justify-content: space-between; gap: var(--space-3); } .vlbh-rail__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--space-3); border-top: 1px solid var(--rule-gold); font: var(--weight-semibold) var(--text-md) var(--font-sans); color: var(--forest-800); } .vlbh-rail__total b { font: var(--weight-semibold) var(--text-xl) var(--font-display); } .vlbh-rail__caution { font: var(--type-body-en); color: var(--text-faint); } .vlbh-rail__erreur { color: var(--red-600); font: var(--type-small); min-height: 1.2em; } div.vlbh-rail button { height: 52px; border: 0; border-radius: var(--radius-pill); background: var(--forest-800); color: var(--cream-100); font: var(--weight-semibold) var(--text-sm) var(--font-sans); letter-spacing: var(--tracking-label); cursor: pointer; transition: var(--transition-color), var(--transition-lift); } div.vlbh-rail button:hover { background: var(--forest-700); transform: var(--hover-lift); } /* — Météo — composant WeatherCard de la maquette (ton crème) : 24 de marge interne, blocs espacés de 20, 5 jours. — */ .vlbh-meteo { display: grid; gap: 20px; padding: 24px; background: var(--cream-050); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); color: var(--forest-800); } .vlbh-meteo svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; display: block; } .vlbh-meteo__tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .vlbh-meteo__intro { display: grid; gap: 4px; min-width: 0; } .vlbh-meteo__lieu { font: 600 10px/1.65 var(--font-sans); letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-accent); } .vlbh-meteo__resume { font: 400 15px/1.65 var(--font-body); color: var(--forest-800); } .vlbh-meteo__resume-en { font: italic 400 13px/1.65 var(--font-serif); color: var(--text-accent); } .vlbh-meteo__now { display: flex; align-items: center; gap: 16px; flex: none; color: var(--gold-800); } .vlbh-meteo__temp { font: 500 46px/1 var(--font-display); letter-spacing: -0.46px; color: var(--forest-800); } .vlbh-meteo__filet { height: 1px; background: var(--border-hairline); } .vlbh-meteo__jours { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .vlbh-meteo__jour { display: grid; justify-items: center; gap: 6px; color: var(--forest-700); } .vlbh-meteo__jour-nom { font: 600 9.5px/1.65 var(--font-sans); letter-spacing: 1.14px; text-transform: uppercase; color: var(--text-accent); } .vlbh-meteo__max { font: 600 13px/1.65 var(--font-sans); color: var(--forest-800); } .vlbh-meteo__min { font: 400 11px/1.65 var(--font-sans); color: var(--text-accent); } .vlbh-meteo__pied { display: grid; gap: 6px; } .vlbh-meteo__mer { display: flex; align-items: center; gap: 8px; color: var(--text-accent); font: 400 13px/1.65 var(--font-body); } .vlbh-meteo__mer span { color: var(--forest-800); } /* Ligne de provenance : même place que celle de la maquette, qui y annonçait des données d'exemple. */ .vlbh-meteo__source { font: 400 9px/1.65 var(--font-sans); color: var(--text-accent); } /* — Galerie par pièce (overlay) — */ .vlbh-galerie { position: fixed; inset: 0; z-index: var(--z-couche, 2147483000); background: rgba(14, 34, 22, .94); color: var(--cream-100); overflow: auto; } .vlbh-galerie[hidden] { display: none; } .vlbh-galerie__barre { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: rgba(14, 34, 22, .9); backdrop-filter: var(--glass-blur); } .vlbh-galerie__pieces { display: flex; gap: 8px; overflow-x: auto; flex: 1; } div.vlbh-galerie__pieces button { flex: 0 0 auto; height: 36px; padding: 0 14px; border: 1px solid var(--border-on-dark); border-radius: var(--radius-pill); background: transparent; color: var(--cream-100); font: var(--weight-medium) var(--text-xs) var(--font-sans); cursor: pointer; } div.vlbh-galerie__pieces button[aria-current="true"] { background: var(--gold-500); color: var(--forest-900); border-color: var(--gold-500); } .vlbh-galerie__fermer, .vlbh-galerie__nav { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--border-on-dark); border-radius: var(--radius-circle); background: transparent; color: var(--cream-100); cursor: pointer; font-size: 22px; line-height: 1; } .vlbh-galerie__grille { display: grid; gap: var(--space-4); padding: var(--space-6) var(--space-5) var(--space-16); max-width: 1200px; margin: 0 auto; } .vlbh-galerie__piece h3 { font: var(--type-h3); color: var(--gold-200); margin: var(--space-4) 0 var(--space-3); } .vlbh-galerie__piece h3 em { font: var(--type-body-en); color: var(--cream-200); } .vlbh-galerie__photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); } div.vlbh-galerie__photos button { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius-md); overflow: hidden; } div.vlbh-galerie__photos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .vlbh-galerie__photo { position: fixed; inset: 0; display: none; place-items: center; padding: var(--space-6); margin: 0; cursor: zoom-out; } .vlbh-galerie.is-photo .vlbh-galerie__photo { display: grid; } .vlbh-galerie.is-photo .vlbh-galerie__grille { visibility: hidden; } div.vlbh-galerie__photo img { max-width: 100%; max-height: 82vh; border-radius: var(--radius-md); } .vlbh-galerie__photo figcaption { margin-top: var(--space-3); text-align: center; font: var(--type-body-en); color: var(--cream-200); } .vlbh-galerie__nav { display: none; } .vlbh-galerie.is-photo .vlbh-galerie__nav { display: grid; } .vlbh-galerie__nav--prev { position: fixed; left: 18px; top: 50%; transform: translateY(-50%); } .vlbh-galerie__nav--next { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); } body.vlbh-galerie-ouverte { overflow: hidden; } /* — Carte — Leaflet dans le cadre de la maquette (or 1 px, 12 px d'arrondi), marqueur = pastille remplie 32 px + halo. — */ .vlbh-carte { position: relative; width: 100%; min-height: 320px; border: var(--card-border); border-radius: var(--card-radius); overflow: hidden; background: var(--cream-400); z-index: 0; } .vlbh-carte--cadre { border: 1px solid var(--gold-500); border-radius: var(--radius-md); } .vlbh-carte .leaflet-popup-content-wrapper { border-radius: var(--radius-md); font: 400 13px/1.5 var(--font-sans); color: var(--text-primary); } .vlbh-carte__villa { background: none; border: 0; } .vlbh-carte__badge { position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--forest-800); box-shadow: var(--shadow-badge); display: grid; place-items: center; color: var(--cream-100); } .vlbh-carte__badge svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .vlbh-carte__halo { position: absolute; inset: -14px; border-radius: 50%; border: 2px solid var(--gold-500); } .vlbh-carte__etiquette { position: absolute; left: 16px; bottom: 14px; z-index: 500; font: 600 11px/1.65 var(--font-sans); letter-spacing: 1.32px; text-transform: uppercase; color: var(--forest-800); pointer-events: none; text-shadow: 0 0 6px var(--cream-050), 0 0 2px var(--cream-050); } .vlbh-carte__itineraire { display: inline-block; margin-top: 6px; color: var(--text-link); font-weight: 600; } /* — Mosaïque — grande photo (hauteur reglable), vignettes 116x64 bord or 2px, legende en bas a droite. */ /* — Mosaïque : la carte photo de la maquette (LogementCard). Grande photo 4/3 révélée par découpe (ac-wipe-right) avec zoom 1.14 → 1 (ac-zoom), vignettes à parts égales. — */ .vlbh-mosaique { display: flex; flex-direction: column; gap: 16px; } .vlbh-mosaique__grande { position: relative; margin: 0; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; background: var(--cream-500); } .vlbh-mosaique--fixe .vlbh-mosaique__grande { aspect-ratio: auto; height: var(--vlbh-mos-h, 450px); } .vlbh-mosaique .vlbh-mosaique__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: transform 1500ms var(--ease-soft); } .vlbh-mosaique .vlbh-mosaique__img.is-active { opacity: 1; } .vlbh-mosaique__badge { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--border-hairline); border-radius: var(--radius-pill); background: var(--cream-050); color: var(--forest-800); font: 600 10.5px/1.65 var(--font-sans); letter-spacing: 1.26px; text-transform: uppercase; } .vlbh-mosaique__badge svg { width: 12px; height: 12px; fill: none; stroke: var(--gold-700); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .vlbh-mosaique__legende { position: absolute; right: 16px; bottom: 14px; margin: 0; color: var(--cream-100); font: 400 11px/1.65 var(--font-sans); letter-spacing: 1.32px; text-transform: uppercase; text-shadow: 0 1px 6px rgba(22,53,33,.6); } .vlbh-mosaique__vignettes { display: flex; gap: 10px; flex: 0 0 auto; } div.vlbh-mosaique__vignettes button { flex: 1 1 0; min-width: 0; height: 64px; padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm); overflow: hidden; background: none; cursor: pointer; opacity: .82; transition: var(--transition-color); } div.vlbh-mosaique__vignettes button img { display: block; width: 100%; height: 100%; object-fit: cover; } div.vlbh-mosaique__vignettes button[aria-selected="true"] { border-color: var(--gold-500); opacity: 1; } /* Carte logement : côte à côte seulement au-delà de 1080 px (maquette) ; empilée, la photo passe en premier et perd son padding bas. */ @media (max-width: 1080px) { .vlbh-logement-card { grid-template-columns: 1fr !important; min-width: 0 !important; } .vlbh-logement-card > * { min-width: 0 !important; } .vlbh-logement-card .vlbh-photo-block { order: -1; padding-bottom: 0 !important; } } /* — Pastilles et ligne meta des cartes logement — */ .vlbh-chips { display: flex; flex-wrap: wrap; gap: 8px; } .vlbh-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid transparent; border-radius: var(--radius-pill); background: var(--forest-800); color: var(--cream-100); font: 600 10.5px/1.65 var(--font-sans); letter-spacing: 1.26px; text-transform: uppercase; } .vlbh-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font: 400 11.5px/1.65 var(--font-sans); letter-spacing: 1.38px; text-transform: uppercase; color: var(--olive-700); } .vlbh-meta__sep { color: var(--gold-900); } /* — Galerie horizontale (« Autour de la maison ») — mesures de la maquette : intro 300, cartes 420 en 3/4, écart 32, piste à 40 du bord. — */ .vlbh-gh { position: relative; height: 100vh; background: var(--forest-900); } .vlbh-gh__grille { position: absolute; inset: 0; background-image: linear-gradient(var(--gold-300) 1px, transparent 1px), linear-gradient(90deg, var(--gold-300) 1px, transparent 1px); background-size: 40px 40px; opacity: .08; pointer-events: none; } .vlbh-gh__colle { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; grid-template-rows: 1fr auto; } .vlbh-gh__scene { position: relative; display: grid; align-items: center; min-width: 0; padding-top: 40px; padding-bottom: 24px; } .vlbh-gh__piste { display: flex; gap: 32px; align-items: center; padding-left: 40px; will-change: transform; } .vlbh-gh__intro { flex: 0 0 300px; padding-right: 24px; } .vlbh-gh__eyebrow { font: 500 10px/1.65 var(--font-sans); letter-spacing: 2px; text-transform: uppercase; color: var(--gold-200); } .vlbh-gh .vlbh-gh__titre { margin: 14px 0 0; font: 600 42px/1.12 var(--font-serif); color: var(--cream-100); letter-spacing: 0; } .vlbh-gh .vlbh-gh__script { font: 400 42px/1.12 var(--font-script); color: var(--gold-200); } .vlbh-gh .vlbh-gh__texte { margin: 18px 0 0; max-width: 280px; font: 400 15.5px/1.6 var(--font-body); color: var(--cream-200); } .vlbh-gh__cta { margin-top: 22px; } .vlbh-gh a.vlbh-gh__bouton { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 26px; border: 1px solid transparent; border-radius: var(--radius-pill); background: #fff; color: var(--text-accent); font: 600 12.5px/normal var(--font-sans); letter-spacing: 0.75px; text-transform: uppercase; text-decoration: none; transition: var(--transition-color), transform var(--dur-instant) var(--ease-out); } .vlbh-gh a.vlbh-gh__bouton:hover { color: var(--forest-900); background: var(--cream-200); } .vlbh-gh__bouton:active { transform: var(--press-translate); } .vlbh-gh__bouton svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .vlbh-gh__carte { margin: 0; flex: 0 0 420px; } /* Variante « fluide » de la fiche logement : carte bornée par la hauteur d'écran, intro réduite sur téléphone. */ .vlbh-gh--fluide .vlbh-gh__carte { flex-basis: clamp(220px, min(78vw, (100vh - 230px) * 0.75), 420px); } @media (max-width: 640px) { .vlbh-gh--fluide .vlbh-gh__intro { flex-basis: min(260px, 78vw); } } .vlbh-gh__photo { position: relative; overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 3 / 4; } .vlbh-gh .vlbh-gh__photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .vlbh-gh__legende { margin-top: 12px; display: flex; align-items: baseline; gap: 10px; } .vlbh-gh__num { font: 400 15px/1.65 var(--font-display); color: var(--gold-300); } .vlbh-gh__fr { display: block; font: 600 13.5px/1.65 var(--font-sans); color: var(--cream-100); } .vlbh-gh__en { display: block; font: italic 400 12px/1.65 var(--font-body); color: var(--gold-200); } .vlbh-gh__fin { flex: 0 0 40px; } .vlbh-gh__pied { padding: 0 40px 32px; } .vlbh-gh__barre { height: 2px; background: rgba(250,242,232,.18); border-radius: 999px; overflow: hidden; } .vlbh-gh__progression { height: 100%; width: 0; background: var(--gold-300); } .vlbh-gh__mention { margin-top: 12px; font: 400 10.5px/1.65 var(--font-sans); letter-spacing: 1.26px; text-transform: uppercase; color: var(--cream-300); opacity: .7; } /* ——— Icônes Lucide posées par Elementor (SVG téléversés) ——— Un fichier Lucide est un tracé ouvert : il porte fill="none" et dessine au trait. Elementor, lui, peint tout SVG d'icône avec « fill » : les vagues deviennent un pâté, la voiture une tache, et le trait retombe sur currentColor. On rend le remplissage à none. Le sélecteur d'Elementor porte l'id de l'élément : il faut « important » pour repasser devant. Au survol c'est pire : Elementor n'ajoute le « fill » QUE sur :hover — la flèche d'un bouton se remplissait d'un coup sous le curseur. « important » vaut aussi pour cet état ; le trait, lui, suit currentColor et change donc de couleur avec le texte du bouton, comme il faut. */ .elementor-icon svg[fill="none"], .elementor-icon-list-icon svg[fill="none"], .elementor-button-icon svg[fill="none"] { fill: none !important; } /* Les listes à icônes ne transmettent pas la couleur choisie au trait (Elementor ne la pose que sur le « fill » du SVG et sur la police d'icône) : la maquette les veut à l'or clair, pastilles du bandeau comme coordonnées du pied. */ .elementor-widget-icon-list .elementor-icon-list-icon svg[fill="none"] { stroke: var(--gold-200) !important; } /* ───────────────────────────────────────────────────────────────────────────── Le survol que le kit Elementor impose a tous les boutons. `.elementor-kit-6 button:hover` repeint TOUT bouton en vert foret, texte creme, pilule 999 px. Nos boutons ne sont pas des boutons Elementor : ce sont des surfaces — une case de mosaique, une vignette, un onglet, une croix, une etoile. Dix-huit familles neutralisaient le kit a l'etat normal et l'oubliaient au survol : la photo disparaissait sous un aplat vert, la vignette devenait un ovale. On enumere plutot qu'on ne generalise : une regle large battrait aussi les survols legitimes (barre de dates, colonne de reservation), qui sont moins specifiques. La classe doublee reprend la ruse deja employee plus haut dans ce fichier pour passer devant le kit. ───────────────────────────────────────────────────────────────────────────── */ button.vlbh-mosaic__zoom.vlbh-mosaic__zoom:hover, button.vlbh-mosaic__zoom.vlbh-mosaic__zoom:focus, button.vlbh-lightbox__vignette.vlbh-lightbox__vignette:hover, button.vlbh-lightbox__vignette.vlbh-lightbox__vignette:focus, button.vlbh-lightbox__rond.vlbh-lightbox__rond:hover, button.vlbh-lightbox__rond.vlbh-lightbox__rond:focus, button.vlbh-panneau__fermer.vlbh-panneau__fermer:hover, button.vlbh-panneau__fermer.vlbh-panneau__fermer:focus, button.vlbh-galerie__fermer.vlbh-galerie__fermer:hover, button.vlbh-galerie__fermer.vlbh-galerie__fermer:focus, button.vlbh-faq__bouton.vlbh-faq__bouton:hover, button.vlbh-faq__bouton.vlbh-faq__bouton:focus, button.vlbh-onglet.vlbh-onglet:hover, button.vlbh-onglet.vlbh-onglet:focus, button.vlbh-act-chip.vlbh-act-chip:hover, button.vlbh-act-chip.vlbh-act-chip:focus, button.vlbh-lv-chip.vlbh-lv-chip:hover, button.vlbh-lv-chip.vlbh-lv-chip:focus, button.vlbh-lg-tab.vlbh-lg-tab:hover, button.vlbh-lg-tab.vlbh-lg-tab:focus, button.vlbh-depot__etoile.vlbh-depot__etoile:hover, button.vlbh-depot__etoile.vlbh-depot__etoile:focus, button.vlbh-galerie-pieces__filtre.vlbh-galerie-pieces__filtre:hover, button.vlbh-galerie-pieces__filtre.vlbh-galerie-pieces__filtre:focus, .vlbh-mosaique__vignettes.vlbh-mosaique__vignettes button:hover, .vlbh-mosaique__vignettes.vlbh-mosaique__vignettes button:focus, .vlbh-galerie__photos.vlbh-galerie__photos button:hover, .vlbh-galerie__photos.vlbh-galerie__photos button:focus, .vlbh-galerie__pieces.vlbh-galerie__pieces button:hover, .vlbh-galerie__pieces.vlbh-galerie__pieces button:focus, .vlbh-galerie-pieces__photo.vlbh-galerie-pieces__photo button:hover, .vlbh-galerie-pieces__photo.vlbh-galerie-pieces__photo button:focus, .vlbh-lightbox__pieces.vlbh-lightbox__pieces button:hover, .vlbh-lightbox__pieces.vlbh-lightbox__pieces button:focus, .vlbh-onglets__barre.vlbh-onglets__barre button:hover, .vlbh-onglets__barre.vlbh-onglets__barre button:focus { background-color: transparent; color: inherit; } /* La forme, la ou elle n'est ni pilule ni cercle : le kit la remplacait par 999 px. */ button.vlbh-mosaic__zoom.vlbh-mosaic__zoom:hover, button.vlbh-mosaic__zoom.vlbh-mosaic__zoom:focus, button.vlbh-faq__bouton.vlbh-faq__bouton:hover, button.vlbh-faq__bouton.vlbh-faq__bouton:focus, .vlbh-galerie-pieces__photo.vlbh-galerie-pieces__photo button:hover, .vlbh-galerie-pieces__photo.vlbh-galerie-pieces__photo button:focus { border-radius: 0; } button.vlbh-lightbox__vignette.vlbh-lightbox__vignette:hover, button.vlbh-lightbox__vignette.vlbh-lightbox__vignette:focus, .vlbh-galerie__photos.vlbh-galerie__photos button:hover, .vlbh-galerie__photos.vlbh-galerie__photos button:focus { border-radius: var(--radius-md); } .vlbh-mosaique__vignettes.vlbh-mosaique__vignettes button:hover, .vlbh-mosaique__vignettes.vlbh-mosaique__vignettes button:focus, button.vlbh-depot__etoile.vlbh-depot__etoile:hover, button.vlbh-depot__etoile.vlbh-depot__etoile:focus { border-radius: var(--radius-sm); } /* Et puisque ces surfaces n'avaient aucun survol a elles, on leur en donne un, dans le vocabulaire de la maquette : l'opacite et le lisere, jamais un fond. */ .vlbh-mosaique__vignettes.vlbh-mosaique__vignettes button:hover { opacity: 1; border-color: var(--gold-300); } .vlbh-mosaique__vignettes.vlbh-mosaique__vignettes button[aria-selected="true"]:hover { border-color: var(--gold-500); } .vlbh-mosaic__zoom.vlbh-mosaic__zoom:hover ~ * img, .vlbh-lightbox__vignette.vlbh-lightbox__vignette:hover img { opacity: .92; } /* ───────────────────────────────────────────────────────────────────────────── Sélecteur de langue de l'en-tête : une piste, deux segments, celui de la page en relief. Pas d'ombre portée — le relief se dit par le ton, comme partout ailleurs sur ce site : la piste est un sable un peu plus soutenu que le fond de page, le segment actif est le crème le plus clair. ───────────────────────────────────────────────────────────────────────────── */ .vlbh-langues { display: inline-flex; align-items: center; gap: 0; padding: 0; overflow: hidden; border: 1px solid var(--border-hairline, #E7D8BB); border-radius: var(--radius-sm, 8px); background: #F1E6D3; line-height: 1; } .vlbh-langues__seg { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 32px; padding: 1.5px 0 0; border: 0; border-radius: 0; /* Largeur identique pour les deux segments : EN est plus large que FR, et une largeur qui suit le texte donnait deux boites inegales — ca se voit tout de suite. L'interlettrage ajoute un blanc apres la derniere lettre : `text-indent` le reprend a gauche pour que le mot reste optiquement centre. Le padding du haut redescend le texte : FR et EN n'ont que des capitales, et la boite de ligne leur reserve une descendante qu'elles n'utilisent pas. Decalage mesure. */ font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; letter-spacing: 1.26px; text-indent: 1.26px; line-height: 1; color: var(--ink-500, #5C6652); text-decoration: none; white-space: nowrap; transition: color 180ms var(--ease-soft, ease), background-color 180ms var(--ease-soft, ease), border-color 180ms var(--ease-soft, ease); } .vlbh-langues__seg--on { background: var(--cream-100, #FDFAF4); color: #163521; } a.vlbh-langues__seg:hover, a.vlbh-langues__seg:focus-visible { color: #163521; background: rgba(253, 250, 244, .62); } a.vlbh-langues__seg:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; } /* Le commutateur garde le meme gabarit sur tous les supports : 78 × 34. Il grossissait au telephone (98 × 44), ou l'en-tete est deja le plus charge — c'est l'inverse qu'il faut. Au point de rupture mobile d'Elementor, le bouton « Réserver » de l'en-tete s'efface : logo, commutateur et bouton de menu totalisaient 393 px pour 390 de large. */ @media (max-width: 767px) { .vlbh-header .elementor-widget-button { display: none; } /* Le commutateur et le bouton de menu ne font plus qu’un bloc, cale a droite. Le commutateur flottait au milieu de la barre, entre le logo et le menu, sans rien a quoi se rattacher. La marge automatique absorbe l’espace libre avant que le `space-between` du conteneur ne le repartisse : inutile de toucher au gabarit pour obtenir le groupe. */ .vlbh-header > .e-con { margin-left: auto; } .vlbh-header > .elementor-widget-nav-menu { order: 1; margin-left: 4px; } } /* ───────────────────────────────────────────────────────────────────────────── Hero de l’accueil au telephone : la carte est ancree par le bas, et les puces du diaporama lui laissent de l’air. La carte portait « top: 387px » ET « bottom: 0 ». En sur-contrainte, le navigateur ecarte « bottom » : elle etait donc ancree par le haut et sa hauteur suivait le texte — 233 px sur trois lignes, 213 sur deux. Dans le second cas il restait une bande de photo de 20 px sous la carte. « top: auto » rend la main a « bottom: 0 » : le bas de la carte touche le bas du hero, quelle que soit la longueur du texte, en francais comme en anglais. Les puces, elles, se reglent la ou elles sont ecrites : dans le CSS personnalise du widget diaporama (« 210px en mobile », porte a 232), avec un !important et trois classes qu’aucune feuille du plugin ne pouvait battre. */ @media (max-width: 767px) { .vlbh-hero .vlbh-hero-card { top: auto; bottom: 0; } } /* ─── Classement « Meublé de tourisme 4 étoiles » ───────────────────────────── Deux objets, une classe. La plaque est une pièce officielle : on la pose, on ne la retouche pas — un seul réglage, sa largeur, et le reste suit. Sa hauteur est déclarée dans le gabarit (820 × 580) pour que le pied de page ne se tasse pas pendant le chargement de l'image. La phrase, elle, parle la langue de la maison : les quatre étoiles sont remplies par une règle sur le SVG lui-même, et non par héritage — un fichier Lucide porte fill="none" en attribut, et un attribut de présentation bat la valeur héritée du parent. C'est la raison pour laquelle viser le parent ne suffisait pas. */ .vlbh-classement { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); } .vlbh-classement__plaque { display: block; width: 100%; max-width: 200px; height: auto; border-radius: var(--radius-xs, 4px); } .vlbh-classement__phrase { margin: 0; max-width: var(--prose-max, 680px); font: var(--type-body); color: var(--text-secondary); } /* --- Le classement sur la fiche --------------------------------------------- Au pied du site, le classement est une mention legale ; sur la fiche, c'est l'argument. Il lui faut donc un corps, et pas une legende de plus sous la galerie. Bande horizontale, deux moities qui ne disent pas la meme chose : le sceau a gauche, le constat a droite, un filet entre les deux — l'ordre d'un certificat. Le fond chaud et le filet suffisent a le detacher du creme de la page ; pas d'ombre portee, qui ferait flotter une piece officielle. */ .vlbh-classement--phrase { flex-direction: row; align-items: stretch; gap: var(--space-6); padding: var(--space-5) var(--space-6); border: 1px solid var(--border-hairline); border-radius: var(--radius-md); background: var(--gold-050); text-align: left; } /* `stretch` et non `center` : c'est ce qui donne au filet toute la hauteur de la bande. Centre, il ne mesurait que les 99 px du texte contre 130 px de plaque, et un filet plus court que ce qu'il separe ne separe rien. La plaque se recentre donc elle-meme. */ .vlbh-classement--phrase .vlbh-classement__plaque { flex: 0 0 auto; align-self: center; width: 184px; max-width: none; } .vlbh-classement__dit { display: grid; align-content: center; gap: 7px; min-width: 0; padding-left: var(--space-6); border-left: 1px solid var(--rule-gold); } .vlbh-classement__titre { margin: 0; font: var(--type-h3); color: var(--text-primary); } /* 78ch et non la pleine largeur : a 1280 px la bande donnerait 1043 px de texte, soit cent trente signes par ligne, le double du confort de lecture. Le vide a droite est le prix d'une ligne qui se lit ; il se tient, le fond chaud faisant tenir la bande entiere pour un seul objet. */ .vlbh-classement--phrase .vlbh-classement__phrase { max-width: 78ch; font: var(--type-small); color: var(--text-secondary); } /* Sous 640 px, la plaque a 184 px ne laisserait que 155 px au texte : un titre serif y tiendrait sur quatre lignes. On empile — et la plaque garde sa taille, celle ou son petit texte, « ministere charge du tourisme », reste lisible. Calee a gauche comme le texte : un sceau centre au-dessus d'un constat aligne a gauche fait deux mises en page dans une meme boite. */ @media (max-width: 639px) { .vlbh-classement--phrase { flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-5); } .vlbh-classement--phrase .vlbh-classement__plaque { align-self: flex-start; } .vlbh-classement__dit { padding-left: 0; border-left: 0; } } /* La plaque dans le bandeau d'accueil : posée au coin opposé de la carte, sur la même ligne de base, avec l'ombre de la carte — sans elle, un rectangle bleu flotterait sur la photo au lieu d'y être posé. */ .vlbh-classement--hero .vlbh-classement__plaque { box-shadow: 0 18px 44px rgba(18, 44, 30, 0.32); } /* ─── La plaque flottante ───────────────────────────────────────────────────── Elle salue, elle ne s'installe pas : deux cents pixels de défilement et elle s'efface ; elle ne revient qu'en haut de page. Deux seuils et non un seul — avec un seul, s'arrêter pile dessus la ferait clignoter. `pointer-events: none` parce qu'elle ne mène nulle part : sans cela, elle volerait les clics de ce qu'elle recouvre. `visibility: hidden` une fois effacée, pour qu'elle sorte aussi de l'arbre d'accessibilité. Rang 29 : juste sous la barre de prix collante (30), qui doit toujours gagner. */ .vlbh-classement-flottant { position: fixed; right: 20px; bottom: 20px; z-index: 29; width: 132px; pointer-events: none; transition: opacity 260ms var(--ease-soft), transform 260ms var(--ease-soft), visibility 0s linear 0s; } .vlbh-classement-flottant .vlbh-classement__plaque { display: block; width: 100%; max-width: none; height: auto; border-radius: var(--radius-xs, 4px); box-shadow: 0 10px 28px rgba(18, 44, 30, 0.30); } .vlbh-classement-flottant.est-masquee { opacity: 0; visibility: hidden; transform: translate3d(0, 14px, 0); transition-delay: 0s, 0s, 260ms; } /* Sous 1080 px la barre de prix occupe le bas de l'écran : la plaque monte au-dessus d'elle. */ @media (max-width: 1079px) { body:has(.vlbh-barre) .vlbh-classement-flottant { bottom: 88px; } } @media (max-width: 767px) { .vlbh-classement-flottant { right: 14px; bottom: 14px; width: 104px; } body:has(.vlbh-barre) .vlbh-classement-flottant { bottom: 82px; } } @media (prefers-reduced-motion: reduce) { .vlbh-classement-flottant { transition: none; } } /* ---- La visite en video -------------------------------------------------- Rangee en premiere vignette de sa piece, jamais dans une section a part : c'est ce que font Booking et Vrbo, et c'est juste — une video de chambre est une vue de la chambre, pas un evenement. Airbnb, lui, ne l'accepte meme pas. La vignette est carree comme les autres ; la video, verticale, la remplit en `cover`. La bande du bas porte le mot, pour qu'on sache que ca bouge avant de cliquer. */ .vlbh-lightbox__vignette--video { position: relative; overflow: hidden; } .vlbh-lightbox__vignette--video video { width: 100%; height: 100%; object-fit: cover; display: block; } .vlbh-vignette-video__jouer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(18, 44, 30, 0.55); backdrop-filter: blur(3px); color: #fff; pointer-events: none; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .vlbh-vignette-video__jouer svg { fill: currentColor; stroke: none; margin-left: 2px; } .vlbh-lightbox__vignette--video:hover .vlbh-vignette-video__jouer { background: rgba(18, 44, 30, 0.78); transform: translate(-50%, -50%) scale(1.08); } .vlbh-vignette-video__mot { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 9px; background: linear-gradient(to top, rgba(18, 44, 30, 0.72), transparent); color: #fff; font: 600 11px/1.2 var(--font-sans); letter-spacing: 1.1px; text-transform: uppercase; pointer-events: none; } /* La couche de lecture. Largeur plafonnee a la definition native du fichier : une video de 480 px etiree sur 900 px ne gagne pas en detail, elle en perd. C'est le materiau qui fixe la taille d'affichage, pas l'envie. */ .vlbh-lightbox__video { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 24px; background: rgba(12, 28, 19, 0.92); } .vlbh-lightbox__video[hidden] { display: none; } /* `max-height: 100%` ne mord pas ici : la couche est une grille, et un pourcentage de hauteur se resout contre une piste indefinie. Mesure : 854 px de video dans une couche de 620, 258 px dans le vide sous l ecran. On mesure donc contre l ecran lui-meme. `dvh` et non `vh`, pour que la barre d adresse des telephones ne mange pas le bas. */ .vlbh-lightbox__video video { max-width: min(480px, 100%); max-height: calc(100dvh - 48px); width: auto; height: auto; border-radius: var(--radius-sm); background: #000; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5); } .vlbh-lightbox__video-fermer { position: absolute; top: 18px; right: 18px; } @media (max-width: 767px) { .vlbh-lightbox__video { padding: 12px; } .vlbh-lightbox__video video { max-height: calc(100dvh - 24px); } .vlbh-lightbox__video-fermer { top: 10px; right: 10px; } }