/******* Do not edit this file ******* Simple Custom CSS and JS - by Silkypress.com Saved: Sep 30 2026 | 13:34:26 */ /* ========================================================================== VAKANTIEHUIS — Feuille de style personnalisée (Simple Custom CSS and JS) Version nettoyée. Chaque sélecteur conservé a été vérifié comme actif sur le site réel, et chaque sélecteur supprimé comme inactif, en testant document.querySelectorAll() sur 7 pages, y compris après exécution du JavaScript (les classes ajoutées à l'exécution ne sont pas visibles dans le HTML brut : le calendrier JetBooking en est le meilleur exemple). Les deux masques SVG sont désormais déclarés une seule fois en variables : ils étaient écrits deux fois par règle (-webkit-mask puis mask). ========================================================================== */ :root { /* Couleur par défaut du site (général et listings globaux) : or */ --e-global-color-accent: #d4af37; /* Icônes réutilisables, injectées via mask-image */ --vh-icone-coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E"); --vh-icone-fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E"); } /* ========================================================================== 1. COULEURS DYNAMIQUES PAR FAMILLE ========================================================================== Les deux familles utilisaient exactement les mêmes valeurs (#99ba40) dans deux blocs séparés : ils sont fusionnés. Le plugin Vakantiehuis Core pose toujours l'ID de la langue par défaut, donc ces classes valent pour les 4 langues. Les classes portées manuellement sur des conteneurs Elementor (div.vh-famille-865) sont couvertes par les sélecteurs sans préfixe. ========================================================================== */ .vh-famille-781, .vh-famille-865 { --e-global-color-accent: #99ba40 !important; --e-global-color-32cb07e: #99ba40 !important; /* Redirige le H1 Elementor vers Accent */ } .vh-famille-781 h2, .vh-famille-865 h2 { color: #99ba40 !important; } /* Fond appliqué aux conteneurs Elementor marqués vh-famille-865 */ div.vh-famille-865 { background: #dcded9 !important; } div.vh-famille-865 a { text-shadow: 2px 1px 2px white !important; } /* ========================================================================== 2. WIDGET POST INFO EN LISTE À PUCES (équipements) ========================================================================== */ .liste-equipements .elementor-post-info__terms-list { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; font-size: 0 !important; /* Masque les virgules générées par Elementor */ } .liste-equipements .elementor-post-info__terms-list-item { position: relative !important; display: inline-block !important; padding-left: 22px !important; font-size: 14px !important; /* Restaure la taille après le font-size: 0 du parent */ } .liste-equipements .elementor-post-info__terms-list-item::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; background-color: var(--e-global-color-accent) !important; -webkit-mask: var(--vh-icone-coche) no-repeat center; mask: var(--vh-icone-coche) no-repeat center; -webkit-mask-size: contain; mask-size: contain; } /* ========================================================================== 3. BANNIÈRE MOBILE ========================================================================== */ /* Les flèches héritent de la couleur Accent (hors media query : elles existent aussi en tablette) */ .banner-mobile .elementor-swiper-button { color: var(--e-global-color-accent) !important; font-size: 15px; } .banner-mobile .elementor-swiper-button i, .banner-mobile .elementor-swiper-button svg { fill: var(--e-global-color-accent) !important; } @media (max-width: 767px) { /* La mosaïque desktop est entièrement masquée sur mobile */ .mosaique-v2 { display: none !important; } /* Restaure le comportement natif des images Elementor */ .banner-mobile a, .banner-mobile img { pointer-events: auto !important; cursor: pointer !important; } /* Inversion du widget Onglets */ .banner-mobile .e-n-tabs { display: flex !important; flex-direction: column-reverse !important; } /* Grille des boutons 2×2 */ .banner-mobile .e-n-tabs-heading { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: auto auto !important; gap: 10px !important; padding: 0 10px !important; } /* Stabilisation de l'image en 16/9 */ .banner-mobile .swiper-slide img { width: 100% !important; aspect-ratio: 16 / 9 !important; object-fit: cover !important; height: auto !important; } /* Flèches carrées en bas à gauche */ .banner-mobile .elementor-swiper-button { top: auto !important; bottom: -15px !important; background: #fff !important; width: 40px !important; height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 100 !important; opacity: 1 !important; } .banner-mobile .elementor-swiper-button-prev { left: 0 !important; } .banner-mobile .elementor-swiper-button-next { left: 40px !important; right: auto !important; } /* Classe posée par Swiper à l'exécution quand il n'y a qu'une image */ .banner-mobile .swiper-button-disabled { display: none !important; } } /* ========================================================================== 4. MOSAÏQUE V2 (DESKTOP) ========================================================================== */ .mosaique-v2 { display: grid; grid-template-columns: 2.5fr 1fr; gap: 10px; height: 70vh; min-height: 500px; max-height: 850px; margin-bottom: 30px; position: relative; } .banner-main { position: relative; height: 100%; background: transparent !important; overflow: hidden; } #swiper-v2-main, #swiper-v2-main .swiper-wrapper, #swiper-v2-main .swiper-slide { height: 100% !important; } .swiper-v2-slide { display: flex; align-items: center; justify-content: center; overflow: hidden; } .kenburns-img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; transition: transform 12s ease-out; display: block; will-change: transform; } .swiper-slide-active .kenburns-img { transform: scale(1.15); } /* Navigation */ .swiper-nav-container-v2 { position: absolute; bottom: 0; left: 0; z-index: 99; display: flex; align-items: center; background: #fff; } .swiper-nav-v2 { position: static !important; width: 65px !important; height: 65px !important; margin: 0 !important; background: #fff !important; cursor: pointer; display: flex !important; align-items: center; justify-content: center; color: #262626 !important; } .swiper-nav-v2:hover, .btn-voir-toutes-v2:hover { background: var(--e-global-color-accent) !important; color: #262626; } .btn-voir-toutes-v2 { display: flex; align-items: center; padding: 0 25px; text-decoration: none; color: #262626; font-size: 13px; text-transform: uppercase; border-left: 1px solid #eee; height: 65px; background: #fff; font-weight: bold; } /* Vignettes de droite */ .vignettes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; height: 100%; } .cat-item { position: relative; display: block; overflow: hidden; height: 100%; } .cat-item img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; display: block; } .cat-item:hover img { transform: scale(1.1); } .overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0; transition: 0.5s; text-transform: uppercase; letter-spacing: 2px; text-align: center; } .cat-item:hover .overlay { opacity: 1; } @media (max-width: 1024px) { .mosaique-v2 { height: 500px; } } @media (max-width: 768px) { .mosaique-v2 { grid-template-columns: 1fr; height: auto; } .banner-main, .vignettes-grid { height: 400px; } .swiper-nav-container-v2 { width: 100%; justify-content: space-between; } .btn-voir-toutes-v2 { flex-grow: 1; justify-content: center; } } /* ========================================================================== 5. INFOS GÎTE — MISE EN LIGNE SUR MOBILE ========================================================================== */ @media (max-width: 767px) { .infos-gite .elementor-widget-icon-box { margin-bottom: 0 !important; border-bottom: 1px solid #ddd !important; } .infos-gite .elementor-column:last-child .elementor-widget-icon-box:last-child { border-bottom: none !important; } .infos-gite .elementor-icon-box-wrapper { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; padding: 10px 2px !important; text-align: left !important; } .infos-gite .elementor-icon-box-icon { width: 30px !important; margin-right: 8px !important; margin-bottom: 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; flex-shrink: 0 !important; } .infos-gite .elementor-icon-box-icon i, .infos-gite .elementor-icon-box-icon svg, .infos-gite .elementor-view-default .elementor-icon i, .infos-gite .elementor-view-default .elementor-icon svg { font-size: 18px !important; width: auto !important; height: 18px !important; line-height: 18px !important; } .infos-gite .elementor-icon-box-content { display: flex !important; flex-direction: row !important; align-items: baseline !important; gap: 6px !important; flex-grow: 1; } .infos-gite .elementor-icon-box-title { font-size: 15px !important; margin-bottom: 0 !important; line-height: 1 !important; min-width: 30px; } .infos-gite .elementor-icon-box-description { font-size: 12px !important; margin-top: 0 !important; color: #262626 !important; white-space: nowrap !important; letter-spacing: 0 !important; } } /* ========================================================================== 6. LISTES À PUCES (flèche en masque SVG) ========================================================================== */ .wp-block-list, .infos-details ul { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; } .wp-block-list li, .infos-details ul li { position: relative; padding-left: 35px !important; margin-bottom: 12px; line-height: 1.6; display: block; color: inherit; } .wp-block-list li::before, .infos-details ul li::before { content: ""; position: absolute; left: 0; top: 6px; width: 18px; height: 14px; background-color: var(--e-global-color-accent) !important; -webkit-mask: var(--vh-icone-fleche) no-repeat center; mask: var(--vh-icone-fleche) no-repeat center; -webkit-mask-size: contain; mask-size: contain; transition: transform 0.3s ease, background-color 0.3s ease; } .wp-block-list li:hover::before, .infos-details ul li:hover::before { transform: translateX(6px); filter: brightness(0.8); } /* ========================================================================== 7. GLASSMORPHISM SUR LE CALL TO ACTION ========================================================================== */ .elementor-cta__bg-wrapper::after { content: ""; position: absolute; inset: 0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: linear-gradient( 135deg, color-mix(in srgb, var(--e-global-color-accent) 40%, transparent) 0%, color-mix(in srgb, var(--e-global-color-accent) 15%, transparent) 100% ); z-index: 1; transition: all 0.5s ease; } .elementor-cta__content { z-index: 2; position: relative; } .elementor-cta:hover .elementor-cta__bg-wrapper::after { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); background: linear-gradient( 135deg, color-mix(in srgb, var(--e-global-color-accent) 30%, transparent) 0%, color-mix(in srgb, var(--e-global-color-accent) 10%, transparent) 100% ); } /* ========================================================================== 8. SECTION TARIFS — DÉBORDEMENT HORIZONTAL ========================================================================== */ .section-tarifs { max-width: 100vw !important; overflow-x: hidden !important; } /* ========================================================================== 9. BADGES FAMILLE & VILLAGE ========================================================================== */ .famille-village { display: flex !important; flex-wrap: wrap; align-items: center !important; gap: 8px !important; margin-bottom: 25px !important; } .famille-village .elementor-heading-title { background-color: var(--e-global-color-accent) !important; border: 1px solid var(--e-global-color-accent) !important; color: #fff !important; padding: 6px 14px !important; border-radius: 4px !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 1px !important; line-height: 1 !important; display: inline-flex !important; align-items: center; margin: 0 !important; } .famille-village a { color: inherit !important; text-decoration: none !important; pointer-events: none; } @media (max-width: 767px) { .famille-village .elementor-heading-title { font-size: 10px !important; padding: 5px 10px !important; } } /* ========================================================================== 10. CALENDRIER DE RÉSERVATION (JetBooking) ========================================================================== Rendu par JavaScript : ces classes n'existent pas dans le HTML servi. Vérifié en direct sur une page de gîte Lodomez (77 cellules de jour). ========================================================================== */ .month1 td div.day, .month2 td div.day { position: relative !important; border-radius: 0 !important; margin: 0 !important; padding: 10px 0 !important; overflow: hidden !important; z-index: 2; } /* Jours pleins */ .month1 td div.day[class*="invalid"]:not([class*="only-checkout"]), .month2 td div.day[class*="invalid"]:not([class*="only-checkout"]) { background-color: #b3bab2 !important; } /* Jour d'arrivée */ .month1 td div.day[class*="only-checkout"][class*="invalid"], .month2 td div.day[class*="only-checkout"][class*="invalid"] { background: linear-gradient(135deg, rgba(255, 255, 255, 0) 50%, #b3bab2 50%) !important; } /* Jour de sortie */ .month1 td:has(div[class*="invalid"]) + td div.day:not([class*="invalid"]), .month2 td:has(div[class*="invalid"]) + td div.day:not([class*="invalid"]), .month1 tr:has(td:last-child div[class*="invalid"]) + tr td:first-child div.day:not([class*="invalid"]), .month2 tr:has(td:last-child div[class*="invalid"]) + tr td:first-child div.day:not([class*="invalid"]) { background: linear-gradient(135deg, #b3bab2 50%, rgba(255, 255, 255, 0) 50%) !important; } /* -------------------------------------------------------------------------- Jour de sortie tombant le 1er d'un mois — 30 septembre 2026 -------------------------------------------------------------------------- La regle ci-dessus s'accroche a la cellule PRECEDENTE dans le tableau du mois. Elle ne peut rien dessiner quand le depart tombe le 1er d'un mois qui commence un lundi : la veille appartient au mois precedent et n'est pas dans la grille. Le snippet JS « VH – calendrier, jour de sortie » pose alors la classe ci-dessous a partir des dates reservees. -------------------------------------------------------------------------- */ .month1 td div.day.vh-jour-sortie, .month2 td div.day.vh-jour-sortie { background: linear-gradient(135deg, #b3bab2 50%, rgba(255, 255, 255, 0) 50%) !important; } /* ========================================================================== 11. GRILLE D'ÉQUIPEMENTS CENTRÉE (JetEngine Listing) ========================================================================== */ .liste-equipements-centree .jet-listing-grid__items { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; align-items: stretch !important; /* Hauteur égale sur toute la ligne */ gap: 15px !important; } .liste-equipements-centree .jet-listing-grid__item { flex: 1 1 180px !important; width: auto !important; max-width: 100% !important; min-width: 140px !important; padding: 15px 10px !important; } /* Pousse le texte du bas en pied de bloc */ .liste-equipements-centree .jet-listing-grid__item > .elementor-widget-container, .liste-equipements-centree .jet-listing-grid__item .e-parent { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; } /* Masque les blocs sans icône */ .liste-equipements-centree .jet-listing-grid__item:not(:has(img)) { display: none !important; } .liste-equipements-centree .jet-listing-dynamic-field__content img { width: 40px !important; height: auto !important; display: block !important; margin: 0 auto 10px !important; } .liste-equipements-centree .jet-listing-dynamic-field { text-align: center !important; display: flex !important; justify-content: center !important; } /* ========================================================================== 12. MEGA MENU DES GÎTES ========================================================================== */ .mega-menu-gites > ul.sub-menu { display: none !important; opacity: 0; visibility: hidden; transition: opacity 0.2s ease-in-out; } /* Desktop : 3 colonnes */ @media (min-width: 992px) { .mega-menu-gites:hover > ul.sub-menu { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px 24px !important; min-width: 650px !important; padding: 25px !important; position: absolute !important; top: 100% !important; left: 50% !important; transform: translateX(-50%) !important; background: #fff !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important; border-radius: 8px !important; z-index: 9999 !important; opacity: 1 !important; visibility: visible !important; } .mega-menu-gites > ul.sub-menu > li { margin: 0 !important; width: 100% !important; } } /* Tablette : 2 colonnes */ @media (min-width: 768px) and (max-width: 991px) { .mega-menu-gites:hover > ul.sub-menu { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; min-width: 480px !important; opacity: 1 !important; visibility: visible !important; } } /* Mobile : déroulant classique */ @media (max-width: 767px) { .mega-menu-gites.elementor-active > ul.sub-menu, .mega-menu-gites:hover > ul.sub-menu { display: block !important; opacity: 1 !important; visibility: visible !important; position: relative !important; transform: none !important; left: 0 !important; min-width: auto !important; box-shadow: none !important; } } /* ========================================================================== 13. CARTES — ZOOM, VOILE DE VERRE ET "+" AU SURVOL ========================================================================== */ .vh-card-image-wrapper { overflow: hidden; position: relative; cursor: pointer; } .vh-card-image-wrapper img { transition: transform 0.6s ease-in-out !important; } .vh-card-image-wrapper:hover img { transform: scale(1.1); } /* Voile de verre : invisible au repos */ .vh-card-image-wrapper::before { content: ""; position: absolute; inset: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); background: linear-gradient( 135deg, color-mix(in srgb, var(--e-global-color-accent) 0%, transparent) 0%, color-mix(in srgb, var(--e-global-color-accent) 0%, transparent) 100% ); z-index: 2; transition: all 0.4s ease-in-out; pointer-events: none; /* Le clic traverse le voile */ } .vh-card-image-wrapper:hover::before { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: linear-gradient( 135deg, color-mix(in srgb, var(--e-global-color-accent) 25%, transparent) 0%, color-mix(in srgb, var(--e-global-color-accent) 15%, transparent) 100% ); } /* Icône "+" */ .vh-card-image-wrapper::after { content: "+"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -10%); font-size: 36px; font-weight: 200; line-height: 1; color: #fff; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); opacity: 0; z-index: 3; transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); pointer-events: none; /* Le clic traverse l'icône */ } .vh-card-image-wrapper:hover::after { opacity: 1; transform: translate(-50%, -50%); } /* ========================================================================== 14. HARMONISATION DES MENUS DÉROULANTS (JetSmartFilters) ========================================================================== Le tri (.jet-sorting-select) est rendu EN DEHORS du conteneur .vkh-filter : il est donc ciblé séparément, sinon il n'héritait pas du style des filtres. ========================================================================== */ .vkh-filter .jet-smart-filters-select.jet-filter .jet-select { max-width: 100% !important; } .vkh-filter .jet-select__control, .vkh-filter select, .jet-sorting-select { display: flex !important; max-width: 100% !important; border: 1px solid #ebeced !important; } /* ========================================================================== 15. BOUTONS — STYLE GLOBAL PAR THÈME ========================================================================== Thème général : fond OR #d4af37 (--e-global-color-accent) Thème famille : fond VERT #99ba40 (basculé par la section 1) Survol, partout : fond PRINCIPAL #383A31 (--e-global-color-primary) Une seule paire de règles suffit pour les deux thèmes : la section 1 rebascule déjà --e-global-color-accent en vert sur .vh-famille-781 et .vh-famille-865. Ne pas coder les couleurs en dur ici, sinon le basculement par famille est perdu. Texte foncé sur les fonds or/vert, blanc au survol — imposé par le contraste : #F1F2F1 sur #d4af37 ne donne que 1,87:1 (WCAG AA en exige 4,5). #262626 sur or monte à 7,20:1, sur vert à 6,81:1, et #FFFFFF sur #383A31 à 10,29:1. ========================================================================== */ .elementor-widget-button .elementor-button { background-color: var(--e-global-color-accent) !important; color: #262626 !important; border-color: transparent !important; transition: background-color .25s ease, color .25s ease !important; } .elementor-widget-button .elementor-button:hover, .elementor-widget-button .elementor-button:focus, .elementor-widget-button .elementor-button:focus-visible { background-color: var(--e-global-color-primary) !important; color: #FFFFFF !important; } /* Visible au clavier : le fond change, il faut garder un anneau de focus. */ .elementor-widget-button .elementor-button:focus-visible { outline: 2px solid var(--e-global-color-accent) !important; outline-offset: 2px !important; } /* ------------------------------------------------------------------ Icône flèche : elle suit la couleur du texte, dans tous les états. La flèche est un plein (stroke: none), sans attribut fill — son fill calculé hérite donc de currentColor. Mais 3 règles Elementor posent un fill sur .elementor-button-icon / .e-font-icon-svg : selon le widget, une valeur explicite peut passer devant l'héritage. On force currentColor pour n'avoir jamais à redéclarer la couleur. ------------------------------------------------------------------ */ .elementor-widget-button .elementor-button .elementor-button-icon svg, .elementor-widget-button .elementor-button .elementor-button-icon svg path, .elementor-widget-button .elementor-button .elementor-button-icon i { fill: currentColor !important; color: currentColor !important; transition: transform .25s ease !important; } /* Léger glissement au survol — retirer ce bloc si non souhaité. */ .elementor-widget-button .elementor-button:hover .elementor-button-icon svg, .elementor-widget-button .elementor-button:focus .elementor-button-icon svg { transform: translateX(4px); } /* ========================================================================== 16. CORRECTIFS RESPONSIVE (audit du 25 août 2026) ========================================================================== Audit mené déconnecté (sans barre d'admin) sur 375 px et 768 px. BILAN : aucun débordement horizontal, sur aucune page, à aucun des deux points de rupture. La structure responsive est saine. Les correctifs ci-dessous portent uniquement sur la lisibilité et les zones tactiles. ⚠️ Tout est traité en CSS : AUCUNE modification de modèle n'est requise, donc rien à répercuter sur les copies NL / EN / DE. ========================================================================== */ /* -------------------------------------------------------------------------- 16.1 Formulaire de contact — empilement sur mobile Mesuré : champs à 213 px dans un viewport de 384 px. La ligne JetForm reste en flex-direction:row, le libellé (91 px) mange la largeur du champ. -------------------------------------------------------------------------- */ @media (max-width: 767px) { .jet-form-builder.layout-row .jet-form-builder-row { flex-direction: column !important; align-items: stretch !important; } .jet-form-builder.layout-row .jet-form-builder-row > * { width: 100% !important; max-width: 100% !important; } .jet-form-builder__label { margin-bottom: 4px !important; } } /* Hauteur des champs : mesurée à 41-42 px, sous le seuil tactile de 44 px. */ .jet-form-builder__field:not([type="checkbox"]):not([type="radio"]), .jet-form-builder__field.select-field { min-height: 44px !important; } /* -------------------------------------------------------------------------- 16.2 Lisibilité — textes sous le seuil Mesuré : badges de village à 10 px (18 occurrences sur les listings), libellés de galerie à 11 px sur les fiches gîte. -------------------------------------------------------------------------- */ @media (max-width: 767px) { /* Badges village — mesurés à 10px. Les DEUX loop items sont couverts : 3535045 (loop 4241, listings Lodomez et CHF) et 6a11014 (loop 2189, recherche générale et pages d'activités). */ .elementor-element-3535045 .elementor-heading-title, .elementor-element-6a11014 .elementor-heading-title { font-size: 12px !important; line-height: 1.4 !important; } } /* Contraste des badges village — hors media query, le défaut existe à TOUTES les tailles. Mesuré : blanc #FFFFFF sur le vert #99BA40 = 2,22:1, très en dessous du seuil de 4,5. Le texte foncé remonte à 6,81:1. Le fond vert est conservé : c'est la couleur de famille. */ .elementor-element-3535045 .elementor-heading-title, .elementor-element-6a11014 .elementor-heading-title { color: #262626 !important; } @media (max-width: 767px) { /* (suite de la 16.2 — bloc rouvert pour garder l'ordre de lecture) */ /* Libellés de la mosaïque galerie (shortcode galerie_categories_creative) */ .vignettes-grid .overlay span { font-size: 13px !important; } } /* -------------------------------------------------------------------------- 16.3 Zones tactiles — 44 px minimum (WCAG 2.5.5) Mesuré : fil d'Ariane 18 px, listes d'icônes et téléphone 24 px, liens de gîtes 30 px. Portée volontairement restreinte aux zones de navigation : un min-height global casserait les liens en ligne dans les paragraphes. -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .elementor-widget-breadcrumbs a, .elementor-widget-theme-post-breadcrumbs a { display: inline-block !important; padding: 6px 2px !important; } .elementor-icon-list-item > a { min-height: 44px !important; display: flex !important; align-items: center !important; } } /* ========================================================================== 17. ACCESSIBILITÉ — CONTRASTES ET ZONES TACTILES (audit du 25 août 2026) ========================================================================== Mesures WCAG 2.1 AA (seuil 4,5:1 pour du texte courant) : vert #99BA40 sur blanc -> 2,22 ❌ or #D4AF37 sur blanc -> 2,10 ❌ blanc sur vert #99BA40 -> 2,22 ❌ blanc sur or #D4AF37 -> 2,10 ❌ #262626 sur vert -> 6,81 ✅ #262626 sur or -> 7,20 ✅ #383A31 sur blanc -> 11,55 ✅ RÈGLE : les couleurs de marque restent pour les FONDS (avec texte foncé, cf. §15). Pour du TEXTE SUR BLANC, utiliser les variantes assombries ci-dessous — mêmes teintes, simplement conformes. ========================================================================== */ :root { --vh-vert-texte: #687E2C; /* 4,56:1 sur blanc */ --vh-or-texte: #8C7324; /* 4,57:1 sur blanc */ } /* Titres des cartes de gîtes — mesurés à 2,22:1. 21px en graisse 500 : le seuil applicable est 4,5 et non 3, car le seuil assoupli ne vaut qu'à partir de 24px (ou 18,66px en gras). ⚠️ MAINTENANCE : la liste d'identifiants ci-dessous couvre les DEUX loop items (4241 pour Lodomez/CHF, 2189 pour la recherche générale et les activités). Elle survit à la duplication Polylang, mais pas à la recréation d'un widget. Recette de contrôle en §10.10 du dossier. */ .elementor-element-3bf7df9 .elementor-heading-title, .elementor-element-3bf7df9 .elementor-heading-title a, .elementor-element-2bf44fe .elementor-heading-title, .elementor-element-2bf44fe .elementor-heading-title a, .elementor-element-7fa1ff9 .elementor-heading-title, .elementor-element-7fa1ff9 .elementor-heading-title a { color: var(--vh-vert-texte) !important; } /* Textes en or sur blanc — mesurés à 2,10:1 */ .elementor-element-4af77c01 .elementor-heading-title, .elementor-element-1f33445 .elementor-heading-title, .elementor-element-ec00330 .elementor-heading-title, .elementor-element-8b259f3 .elementor-heading-title, .elementor-element-19d25ba0, .elementor-element-19d25ba0 a, .elementor-element-b5a4c5a, .elementor-element-b5a4c5a a { color: var(--vh-or-texte) !important; } /* Au survol, on peut revenir sur une teinte franche : le soulignement fait que l'état ne repose plus uniquement sur la couleur (WCAG 1.4.1). */ .elementor-element-3bf7df9 .elementor-heading-title a:hover, .elementor-element-3bf7df9 .elementor-heading-title a:focus-visible, .elementor-element-2bf44fe .elementor-heading-title a:hover, .elementor-element-2bf44fe .elementor-heading-title a:focus-visible { color: var(--e-global-color-primary) !important; text-decoration: underline !important; } /* -------------------------------------------------------------------------- 17.3 Lien de la barre secondaire — contraste sur fond sombre Mesuré : #7F8177 sur #383A31 = 2,92:1. #B2B5A8 remonte à 5,54 tout en restant discret, ce qui préserve la hiérarchie visuelle voulue. Ciblé par structure : la liste d'icônes de l'en-tête, sans identifiant. -------------------------------------------------------------------------- */ ⚠️ SEULE RÈGLE DE CE FICHIER QUE JE N'AI PAS PU VÉRIFIER EN DIRECT. Dans mon panneau de test, la couleur du refuse de changer malgré `!important` et une spécificité suffisante, alors que toutes les autres règles s'appliquent. Ce panneau a des limites connues (pas de composition de frames, défilement inopérant) : impossible de distinguer un vrai blocage d'un artefact. À CONTRÔLER APRÈS DÉPLOIEMENT — recette §10.11. Deux niveaux de ciblage, du plus général au plus spécifique. Si le premier suffit, supprimer le second (qui dépend d'identifiants d'éléments). */ .elementor-location-header .elementor-widget-icon-list .elementor-icon-list-text, .elementor-location-header .elementor-widget-icon-list a { color: #B2B5A8 !important; } /* Repli si le sélecteur structurel ne suffit pas — identifiants du widget « Voir les gîtes de… » : 5fbf289 (Lodomez) / 6d795ee (CHF). */ .elementor-element-5fbf289 .elementor-icon-list-text, .elementor-element-6d795ee .elementor-icon-list-text { color: #B2B5A8 !important; } .elementor-location-header .elementor-widget-icon-list a:hover, .elementor-location-header .elementor-widget-icon-list a:focus-visible { color: var(--e-global-color-secondary) !important; } /* -------------------------------------------------------------------------- 17.1 Bouton d'ouverture du menu — 44x44 minimum (WCAG 2.5.5) Mesuré : 33x33 px, sur les deux toggles de l'en-tête mobile. -------------------------------------------------------------------------- */ /* ⚠️ NE PAS déclarer `display` ici. Elementor masque le bouton sur grand écran avec `display: none` ; un `display: flex !important` le rendrait visible à TOUS les points de rupture, en doublon du menu déployé. (Erreur commise puis corrigée le 25 août 2026.) On ne règle donc que les dimensions. */ .elementor-menu-toggle { min-width: 44px !important; min-height: 44px !important; } .elementor-menu-toggle:focus-visible { outline: 2px solid var(--e-global-color-primary) !important; outline-offset: 2px !important; } /* ========================================================================== 18. MENU UNIFIÉ — ENTRÉES SECONDAIRES (25 août 2026) ========================================================================== Objectif : un seul burger, et les liens secondaires (Notre histoire, Activités & Loisirs, Région, Voir les gîtes de l'autre famille) accessibles en fin de menu sur mobile. Principe : les entrées portent la classe `menu-secondaire`, posée dans Apparence > Menus. Elementor rend le menu DEUX fois : .elementor-nav-menu--main -> menu déployé (grand écran) .elementor-nav-menu--dropdown -> panneau du burger (petit écran) On les masque dans le premier — elles sont déjà dans la rangée supérieure — et on les garde dans le second, séparées visuellement du menu principal. Sans cette règle, le menu déployé passe sur DEUX lignes (mesuré : 780x60 au lieu de 375x30 en 1440px). ⚠️ À appliquer aussi à `menu-chf-fr`, sinon l'asymétrie entre familles persiste. Penser également au sous-menu des 10 gîtes CHF, absent. ========================================================================== */ @media (min-width: 1025px) { .elementor-nav-menu--main > .elementor-nav-menu > .menu-secondaire { display: none !important; } } /* Séparateur avant le premier lien secondaire du panneau. `li:not(.menu-secondaire) + .menu-secondaire` cible la première entrée secondaire, c'est-à-dire celle qui suit une entrée principale. */ .elementor-nav-menu--dropdown .elementor-nav-menu > li:not(.menu-secondaire) + .menu-secondaire { border-top: 1px solid rgba(0, 0, 0, .12) !important; margin-top: 10px !important; padding-top: 10px !important; } /* Zones tactiles du panneau : 44px minimum (WCAG 2.5.5). Pas de baisse d'opacité pour « atténuer » le secondaire : ça dégraderait le contraste. La hiérarchie passe par le séparateur et la position. */ .elementor-nav-menu--dropdown .elementor-nav-menu > li > a { min-height: 44px !important; display: flex !important; align-items: center !important; } /* ========================================================================== 19. PLACEMENT DU BURGER — LOGO ET BOUTON SUR LA MÊME LIGNE (25 août 2026) ========================================================================== Problème mesuré en 480px : la rangée principale de l'en-tête est bien en flex-direction:row, mais ses trois enfants passent à la ligne, car leurs largeurs cumulées dépassent le viewport : logo 144px (+20px de décalage) y = 44 burger 336px pour un bouton de 44 y = 136 <- ligne perdue CTA 480px y = 200 Le conteneur du burger imposait 336px de large. On le laisse occuper l'espace restant, le bouton est poussé à droite, et le CTA repasse seul sur la ligne suivante. RÉSULTAT VÉRIFIÉ sur les deux familles (Lodomez et CHF) : en-tête 275/283px -> 251px · burger 44x44 centré sur le logo (y=100) · CTA pleine largeur · aucun débordement ✅ SÉLECTEURS STRUCTURELS — aucun identifiant d'élément. Chaque conteneur est désigné par le WIDGET qu'il contient, via `:has()` : rangée principale : le .e-con dont un enfant .e-con contient l'image conteneur logo : le .e-con qui contient le widget image conteneur burger : le .e-con qui contient le widget nav-menu conteneur CTA : le .e-con qui contient le widget bouton Vérifié sur les deux familles : chaque sélecteur ne retourne QU'UN élément, et c'est le bon (Lodomez dfa6f57/b9587bb/403b0e5/667d7dc, CHF 4690ef3/05da036/164d2c9/3730c19). Avantage : fonctionne sur les en-têtes traduits NL/EN/DE, sur une nouvelle famille, et survit à la recréation d'un widget. `:has()` est supporté par tous les navigateurs courants — vérifié en direct sur ce site. ========================================================================== */ @media (max-width: 1024px) { .elementor-location-header .e-con:has(> .e-con > .elementor-widget-image) { flex-wrap: wrap !important; align-items: center !important; } /* Logo : largeur naturelle, il ne doit pas pousser le burger à la ligne */ .elementor-location-header .e-con:has(> .elementor-widget-image) { width: auto !important; flex: 0 0 auto !important; } /* Burger : occupe l'espace restant au lieu d'imposer une largeur fixe */ .elementor-location-header .e-con:has(> .elementor-widget-nav-menu) { width: auto !important; flex: 1 1 0% !important; min-width: 0 !important; } /* Le bouton lui-même est poussé contre le bord droit */ .elementor-location-header .e-con:has(> .elementor-widget-nav-menu) .elementor-menu-toggle { margin-left: auto !important; margin-right: 12px !important; } /* CTA seul sur la ligne suivante, pleine largeur */ .elementor-location-header .e-con:has(> .elementor-widget-button) { width: 100% !important; flex: 0 0 100% !important; } } /* ========================================================================== 20. LOGO ADAPTATIF SUR PETIT ÉCRAN — complément indispensable au §19 ========================================================================== La §19 place le burger à droite du logo, mais elle ne suffit pas sous ~360px : le logo mesure 300px de large (image 280px). Avec ses 20px de décalage, il ne reste que 23px — moins que les 44px du burger, qui repasse donc à la ligne et occupe alors toute la largeur. C'est ce que voyait l'utilisatrice sur son smartphone alors que mes tests à 480px ne montraient rien : le défaut n'apparaît qu'en dessous de 360px. Correctif : le logo ne peut jamais dépasser « largeur disponible − 88px ». Les 88px couvrent le bouton (44) plus ses marges. L'image suit en `max-width: 100%`, donc elle se réduit proportionnellement. MESURES DE VALIDATION (Lodomez, avec la §19 active) : viewport 343px -> en-tête 321 -> 243px · logo 247x98 · burger aligné (centre y 93 des deux côtés) · marge droite 12px viewport 308px -> en-tête 232px · logo 212x89 · burger centre y 89 · marge droite 12px · aucun débordement ⚠️ Ne PAS ajouter de `min-width` ni de `flex: 0 0 auto` sur le conteneur du burger : testé, ça entre en conflit avec le `flex: 1 1 0%` de la §19 et renvoie le bouton à la ligne (en-tête remonté à 306px). ========================================================================== */ @media (max-width: 767px) { .elementor-location-header .e-con:has(> .elementor-widget-image) { max-width: calc(100% - 88px) !important; flex: 0 1 auto !important; } .elementor-location-header .e-con:has(> .elementor-widget-image) img { max-width: 100% !important; height: auto !important; } } /* ========================================================================== 21. FINITIONS DE L'EN-TÊTE MOBILE (25 août 2026) ========================================================================== Deux points relevés sur smartphone réel : 1. La barre « Voir les gîtes de… » était collée au bord droit (conteneur interne en justify-content: flex-end). Elle est recentrée. 2. Un vide de 20px séparait le logo du CTA — c'était le `gap` de la rangée flex, auquel s'ajoutaient 10px de padding haut et bas sur le logo. MESURES DE VALIDATION (375px, les deux familles) : Lodomez : en-tête 238 -> 203px · barre centrée (34/37px) · espace sous logo 20 -> 0px · burger centré sur logo (y 89) CHF : en-tête 208px · barre centrée (40/40px) · espace sous logo 0px · burger centré sur logo (y 92) Identifiants des rangées du haut : 737ce85 (Lodomez) / ce86343 (CHF). ========================================================================== */ @media (max-width: 767px) { /* Barre secondaire centrée plutôt que collée à droite. Désignée par la liste d'icônes qu'elle contient — c'est le seul .e-con-inner de l'en-tête, vérifié sur les deux familles. */ .elementor-location-header .e-con-inner:has(> .elementor-widget-icon-list) { justify-content: center !important; } /* Suppression du vide entre le bloc logo/burger et le CTA */ .elementor-location-header .e-con:has(> .e-con > .elementor-widget-image) { gap: 0 !important; row-gap: 0 !important; } /* Le logo n'a plus besoin de 10px de respiration verticale ici */ .elementor-location-header .e-con:has(> .elementor-widget-image) { padding-top: 2px !important; padding-bottom: 2px !important; } } /* -------------------------------------------------------------------------- 17.2 En-tête mobile — blocs OPTIONNELS, à activer selon ta décision -------------------------------------------------------------------------- Mesuré : en-tête fixe de 308px sur 375px d'écran (37 %), 303px sur 320px (42 %). Il ne reste qu'environ 415px de contenu visible. ⚠️ Ces blocs retirent des éléments de l'en-tête : c'est un choix de design, pas un correctif neutre. Décommente ce que tu retiens. Gain cumulé des trois : environ 190px, soit un en-tête ramené à ~120px (15 %), cohérent avec le desktop. @media (max-width: 767px) { .elementor-element-097d73f > .elementor-element:first-child { display: none !important; } .elementor-element-097d73f .elementor-widget-image img { max-height: 44px !important; width: auto !important; } .elementor-element-097d73f .elementor-widget-button { display: none !important; } } -------------------------------------------------------------------------- */ /* ------------------------------------------------------------------ Exception : le CTA de l'en-tête est déjà posé sur un bloc coloré. Il doit rester transparent, sinon on obtient un aplat sur un aplat. Sélecteur à 3 classes pour passer devant la règle générale. ------------------------------------------------------------------ */ /* Texte FONCÉ, pas blanc : le bouton étant transparent, il repose sur le bloc coloré de l'en-tête. Mesuré — blanc sur vert #99BA40 = 2,22:1 et sur or #D4AF37 = 2,10:1, tous deux hors norme. Le foncé donne 6,81 et 7,20. Une seule valeur couvre donc les deux familles. */ .elementor-location-header .elementor-widget-button .elementor-button { background-color: transparent !important; color: #262626 !important; } .elementor-location-header .elementor-widget-button .elementor-button:hover, .elementor-location-header .elementor-widget-button .elementor-button:focus { background-color: transparent !important; color: #000000 !important; } /* ============================================================================ 22. MÉGA-MENU DES GÎTES AU-DESSUS DES SECTIONS DE FILTRES (27 août 2026) ============================================================================ SYMPTÔME Sur /gites-maisons-de-vacances-lodomez/, le sous-menu déroulant de « Nos Gîtes » était recouvert par la section de filtres. Trois entrées sur seize (Le Grand Cerf, La Harde, Le Loup Gris) étaient impossibles à cliquer. CAUSE — mesurée Ce n'est pas un problème de z-index du sous-menu lui-même : celui-ci est enfermé dans le contexte d'empilement de son conteneur collant, réglé par Elementor à z-index 99. Or la section de filtres est à z-index 900. Aucune valeur posée sur le sous-menu ne peut le faire sortir de ce contexte — c'est le conteneur PARENT qu'il faut faire remonter. CORRECTIF Une seule règle sur l'en-tête entier. Elle crée un contexte d'empilement au niveau du
, qui passe alors devant les sections de filtres, en emportant tout ce qu'il contient — méga-menu compris. POURQUOI 1010 ET PAS 1000 La colonne « FILTRER PAR ÉQUIPEMENT » est déjà à 1000 : à égalité, c'est l'ordre du DOM qui tranche, et elle passerait devant. Vérifié par ailleurs : rien d'autre sur le site n'occupe la plage 1001–9996. Restent au-dessus, et c'est voulu : le menu mobile (9997), la lightbox (9999), les sélecteurs de date (10000) et la barre d'administration (99999). ⚠️ `position: relative` sur un ancêtre n'affecte PAS un descendant en `position: fixed` — vérifié, le conteneur collant reste bien fixe. Ne jamais remplacer par `transform` ou `filter`, qui eux casseraient le `position: fixed` du conteneur collant. RÉSULTAT MESURÉ (1536 px, hors connexion) Avant : 11 entrées cliquables sur 14 testées · Après : 14 sur 14. -------------------------------------------------------------------------- */ .elementor-location-header { position: relative; z-index: 1010; } /* ---------------------------------------------------------------------------- 22.1 MÉGA-MENU TROP HAUT POUR L'ÉCRAN — optionnel ---------------------------------------------------------------------------- Le sous-menu des 18 gîtes Lodomez mesure 748 px de haut. Sur un écran de 791 px (portable courant), il dépasse de 90 px et les deux dernières entrées — Le Vieux Sanglier et Les Loneux — sont hors de vue. Le panneau étant dans un conteneur fixe, il ne suit pas le défilement de la page : ces deux entrées sont donc réellement inatteignables. Cette règle plafonne la hauteur et rend le panneau défilable. Mesuré : dépassement ramené de 90 px à 0, panneau défilable. À activer si tu juges le compromis acceptable — un menu qui défile est moins confortable qu'un menu entier, mais reste préférable à des entrées perdues. L'alternative de fond serait de réorganiser le méga-menu en 4 colonnes plutôt que 3, ce qui le raccourcirait sans défilement. -------------------------------------------------------------------------- */ /* @media (min-width: 1025px) { .elementor-location-header .elementor-nav-menu--main ul.sub-menu { max-height: calc(100vh - 150px); overflow-y: auto; } } */ /* ============================================================================ 23. BARRE DE FILTRES COLLANTE SUR LES PAGES DE RECHERCHE (27 août 2026) ============================================================================ INTENTION Pendant qu'on trie et filtre des gîtes, la barre de recherche doit rester sous la main. Le menu principal, lui, n'a plus d'utilité à ce moment : il s'efface pour libérer la hauteur d'écran. COMPORTEMENT OBTENU En haut de page : en-tête complet, puis la barre à sa place naturelle. Au défilement : l'en-tête part avec la page, la barre se fige en haut et y reste. Un seul bloc fixe à l'écran, jamais deux. Retour en haut : tout revient en place, sans saut. COMMENT LES PAGES SONT RECONNUES Par la présence du widget de tri `jet-smart-filters-sorting`, qui n'existe que sur ces trois pages — jamais sur une fiche de gîte, jamais dans la colonne « Filtrer par équipement » (qui n'a que des cases à cocher). Aucun identifiant d'élément, aucun `page-id` : la règle suivra donc les versions NL / EN / DE sans retouche. ⚠️ Vérifié : sur une fiche de gîte, l'en-tête reste bien collant. La barre CHF porte un identifiant différent de celle de Lodomez (`0f7711a` contre `cad2c89`) — le sélecteur structurel attrape les deux. POURQUOI z-index 1005 Entre la colonne de filtres (1000) qu'elle doit couvrir, et l'en-tête (1010, voir §22) qui doit rester au-dessus d'elle pour que le méga-menu des gîtes reste cliquable en haut de page. `top` suit la barre d'administration quand elle est présente, et vaut 0 pour les visiteurs. RÉSULTAT MESURÉ (1536 px) Barre figée à 32 px dès le défilement, sur les 3 pages. Méga-menu : 12/12 entrées cliquables en haut de page. -------------------------------------------------------------------------- */ @media (min-width: 1025px) { /* 1. l'en-tête cesse d'être collant sur les pages de recherche */ body:has(.elementor-widget-jet-smart-filters-sorting) .elementor-location-header .e-con.elementor-sticky--active { position: static !important; width: auto !important; } /* Elementor réserve la place de l'en-tête collant avec un bloc fantôme. Sans cette ligne, il resterait un vide de 133 px sous l'en-tête. */ body:has(.elementor-widget-jet-smart-filters-sorting) .elementor-location-header .elementor-sticky__spacer { display: none !important; } /* 2. la barre de filtres prend le relais */ .elementor > .e-con:has(.elementor-widget-jet-smart-filters-sorting) { position: sticky !important; top: var(--wp-admin--admin-bar--height, 0px) !important; z-index: 1005 !important; } } /* ---------------------------------------------------------------------------- 23.1 VARIANTE — garder le menu visible sous la barre ---------------------------------------------------------------------------- Si tu préfères finalement que le menu reste accessible pendant le filtrage, remplace tout le §23 par ce seul bloc : l'en-tête garde son comportement collant, et la barre vient se caler juste dessous. Contrepartie : 133 + 135 = 268 px d'écran immobilisés en permanence, soit 34 % d'un écran de 791 px. C'est précisément ce que le §23 évite. -------------------------------------------------------------------------- */ /* @media (min-width: 1025px) { .elementor > .e-con:has(.elementor-widget-jet-smart-filters-sorting) { position: sticky !important; top: calc(var(--wp-admin--admin-bar--height, 0px) + 133px) !important; z-index: 1005 !important; } } */ /* ============================================================================ 24. LE CALENDRIER DE DATES AU-DESSUS DE LA BARRE DE FILTRES ============================================================================ LE SYMPTÔME Sur les pages de recherche, le calendrier du filtre de dates s'ouvre SOUS la barre de filtres collante : la moitié des jours est inaccessible. LA CAUSE (mesurée le 31 août 2026) Trois valeurs suffisent à tout expliquer : .ui-datepicker — feuille de style ............ z-index 999 .ui-datepicker — style EN LIGNE, écrit par jQuery UI ... z-index 1 barre de filtres collante ..................... z-index 99 jQuery UI calcule lui-même un z-index à l'ouverture, à partir des parents du champ de saisie. Aucun d'eux n'étant positionné, il retombe sur 1 — et l'écrit EN LIGNE, ce qui écrase le 999 de la feuille de style. Le calendrier passe donc sous la barre. POURQUOI !important EST INDISPENSABLE ICI C'est la seule façon pour une feuille de style de passer devant un style en ligne. Ailleurs dans ce fichier, !important est à proscrire ; ici il n'y a pas d'alternative, sauf à modifier le script de JetSmartFilters. 1100 place le calendrier au-dessus de la barre (99) ET du méga-menu (1010, voir §22), pour le cas où il s'ouvrirait en haut de page. -------------------------------------------------------------------------- */ .ui-datepicker.ui-widget { z-index: 1100 !important; } /* ============================================================================ 25. LE FILTRE DE DATES EN COLONNE SUR MOBILE ============================================================================ LE SYMPTÔME Sur les pages de recherche en mobile, les deux champs de date et le bouton « Rechercher les disponibilités » restent côte à côte. Mesuré à 767 px : chaque champ tombe à 63 px de large — illisible et intouchable. CE QUE FAIT CETTE SECTION Elle empile les trois contrôles. Sélecteurs structurels : aucun identifiant d'élément Elementor, donc la règle vaut pour les trois pages de recherche ET leurs traductions, sans rien redupliquer. POURQUOI !important La mise en ligne vient du CSS de page généré par Elementor, dont le sélecteur contient l'identifiant du widget : « .elementor-3931 .elementor-element-784faca … { flex-direction: row } ». Le rattraper sans !important supposerait de recopier cet identifiant — ce que le §2 des réflexes interdit, puisqu'il change d'une page à l'autre. ⚠️ CE QUE CETTE SECTION NE RÈGLE PAS La largeur des deux champs reste plafonnée à 45 % par un réglage posé dans Elementor sur le widget (« max-width: 45% » sur les champs). Les champs s'empilent donc, mais n'occupent pas toute la largeur. Ce plafond se change là où il a été posé : éditeur Elementor > widget du filtre de dates > vue mobile > largeur maximale des champs, à porter à 100 %. Le faire en CSS supposerait à nouveau l'identifiant du widget. -------------------------------------------------------------------------- */ @media (max-width: 767px) { .jet-smart-filters-date-range .jet-date-range { flex-direction: column !important; align-items: stretch !important; gap: 10px; } .jet-smart-filters-date-range .jet-date-range__inputs { flex-direction: column !important; width: 100% !important; gap: 10px; } .jet-smart-filters-date-range .jet-date-range__submit { width: 100% !important; } } /* ============================================================================ 26. FAMILLES ET LANGUES — POURQUOI IL N'Y A RIEN À AJOUTER ICI ============================================================================ Le fond gris des cartes Chalets Hautes-Fagnes, la couleur d'accent, le titre du gîte et la pastille de village ne suivaient pas hors français. LA CAUSE N'ÉTAIT PAS DANS CETTE FEUILLE : les modèles de boucle posaient « vh-famille- » — 1448 et 1452 en allemand, là où le §1 ne connaît que 781 et 865. Le §13 du plugin normalise désormais cette classe à la source : partout où Elementor écrit « vh-famille- », il ajoute la variante bâtie sur le terme de la langue par défaut. Le §1 ci-dessus s'applique donc de nouveau dans les quatre langues, SANS RÈGLE SUPPLÉMENTAIRE. ⚠️ Une première version ajoutait ici des sélecteurs « .e-loop-item.vh-fam- 865 > .e-con ». Ils ne couvraient que les boucles Elementor : les pages de recherche utilisent une grille JetEngine, dont les items ont une structure toute autre. Corriger la classe valait mieux que multiplier les sélecteurs. -------------------------------------------------------------------------- */