/** * POMAR — widget météo autonome ("check the Algarve weather"). * Complètement séparé de weather-modal.css (voir includes/class-pomar-weather-check-render.php * pour le pourquoi de cette duplication volontaire). Même palette de marque * que le widget de /search-results/ (cohérence visuelle du site), mais le * bouton déclencheur a une forme différente (carte, pas pilule) et un texte * explicite ("no booking needed") pour ne jamais être confondu avec le * formulaire de réservation MPHB. * * Les variables sont déclarées à la fois sur .pomar-wcheck-widget (le bouton) * et .pomar-wcheck-scrim (la modale, ajoutée directement à par le JS, * donc PAS un descendant du bouton — elle a besoin de ses propres variables). */ .pomar-wcheck-widget, .pomar-wcheck-scrim { --pomar-wc-accent: #C9A227; --pomar-wc-accent-soft: #F6E9B8; --pomar-wc-brown: #6E4B2A; --pomar-wc-brown-dark: #3B2C1C; --pomar-wc-cream: #FFFDF7; --pomar-wc-border: #E7DACA; --pomar-wc-text: #3B2C1C; --pomar-wc-text-muted: #7A6A57; } /* ==== Bouton déclencheur — volontairement une CARTE, pas une pilule ==== * Objectif produit explicite : qu'on ne puisse jamais le confondre avec le * formulaire de dates de réservation. Icône + titre + sous-texte * "no booking needed" plutôt qu'un simple bouton texte. */ .pomar-wcheck-widget { margin: 16px 0; /* Centré par défaut : pensé pour être posé dans un bloc de mise en avant (héro, bandeau...) plutôt que dans du texte courant. Le bouton étant en inline-flex, text-align sur le parent suffit à le centrer sans toucher au JS. Si un jour ce widget est posé dans un paragraphe de contenu courant où un alignement à gauche serait préférable, remplacer ici par `text-align: left;` (ou surcharger via le thème). */ text-align: center; } .pomar-wcheck-btn { display: inline-flex; align-items: center; gap: 16px; max-width: 100%; padding: 16px 22px; border-radius: 16px; border: 1.5px dashed var(--pomar-wc-brown); background: var(--pomar-wc-cream); cursor: pointer; text-align: left; transition: background-color .2s ease, border-style .2s ease; } .pomar-wcheck-btn:hover { background: var(--pomar-wc-accent-soft); border-style: solid; } /* * Tracking GTM (v2.4.2) : quel que soit l'élément enfant visuellement cliqué * (icône, titre, sous-texte), on veut que ce soit TOUJOURS le bouton * lui-même qui reçoive l'événement de clic — pas un de ses enfants — pour * que les variables GTM (Click ID / Click Classes / Click Text) soient * toujours cohérentes. `pointer-events: none` sur les enfants fait * exactement ça : ils deviennent "transparents" aux clics, qui retombent * sur le bouton parent. Le survol (:hover) n'est pas affecté puisqu'il est * appliqué au bouton lui-même, pas à ses enfants. */ .pomar-wcheck-btn * { pointer-events: none; } .pomar-wcheck-icon { display: inline-flex; flex: none; } .pomar-wcheck-icon-svg { display: block; } .pomar-wcheck-btn-text { display: flex; flex-direction: column; gap: 3px; } .pomar-wcheck-btn-title { font-weight: 700; font-size: 17px; color: var(--pomar-wc-brown, #6E4B2A); } .pomar-wcheck-btn-sub { font-size: 14px; line-height: 1.35; color: var(--pomar-wc-text-muted, #7A6A57); } /* ==== Scrim + modale (même langage visuel que weather-modal.css) ==== */ .pomar-wcheck-scrim { position: fixed; inset: 0; z-index: 100000; background: rgba(59, 44, 28, .42); display: flex; align-items: center; justify-content: center; padding: 24px; } .pomar-wcheck-scrim[hidden] { display: none; } .pomar-wcheck-modal { width: min(780px, 100%); max-height: 90vh; overflow-y: auto; background: var(--pomar-wc-cream, #FFFDF7); border-radius: 20px; box-shadow: 0 24px 60px -20px rgba(36, 28, 20, .35); } .pomar-wcheck-head { padding: 28px 32px 22px; border-bottom: 1px solid var(--pomar-wc-border, #E7DACA); display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; } .pomar-wcheck-eyebrow { font-size: 13.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--pomar-wc-text-muted, #7A6A57); margin-bottom: 8px; } .pomar-wcheck-title { margin: 0; font-size: 30px; line-height: 1.25; color: var(--pomar-wc-text, #3B2C1C); } .pomar-wcheck-sub { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--pomar-wc-text-muted, #7A6A57); } .pomar-wcheck-close { appearance: none; border: 0; background: transparent; font-size: 30px; line-height: 1; cursor: pointer; color: var(--pomar-wc-text-muted, #7A6A57); flex: none; } .pomar-wcheck-body { padding: 24px 32px; } .pomar-wcheck-loading, .pomar-wcheck-error { font-size: 15px; color: var(--pomar-wc-text-muted, #7A6A57); } /* ---- Étape 1 : formulaire de dates ---- */ .pomar-wcheck-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; } @media (max-width: 480px) { .pomar-wcheck-fields { grid-template-columns: 1fr; } } .pomar-wcheck-field { display: flex; flex-direction: column; gap: 6px; } .pomar-wcheck-field label { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--pomar-wc-text-muted, #7A6A57); } .pomar-wcheck-field input[type="date"] { font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--pomar-wc-border, #E7DACA); background: #fff; color: var(--pomar-wc-text, #3B2C1C); } .pomar-wcheck-submit { appearance: none; border: 0; border-radius: 999px; padding: 0 26px; height: 46px; background: var(--pomar-wc-brown, #6E4B2A); color: #fff; font: inherit; font-weight: 600; font-size: 14.5px; letter-spacing: .06em; text-transform: lowercase; cursor: pointer; } .pomar-wcheck-submit:hover { opacity: .9; } .pomar-wcheck-form-note { margin: 14px 0 0; font-size: 14.5px; line-height: 1.4; color: var(--pomar-wc-brown, #6E4B2A); } .pomar-wcheck-back { margin-top: 14px; appearance: none; border: 1px solid var(--pomar-wc-brown, #6E4B2A); background: #fff; border-radius: 999px; padding: 8px 20px; font: inherit; font-size: 14px; font-weight: 600; color: var(--pomar-wc-brown, #6E4B2A); cursor: pointer; } .pomar-wcheck-link { appearance: none; border: 0; background: transparent; padding: 0; font: inherit; font-size: inherit; color: var(--pomar-wc-brown, #6E4B2A); text-decoration: underline; cursor: pointer; } /* ---- Étape 2 : résultats (identique dans l'esprit au widget de /search-results/) ---- */ .pomar-wcheck-results-head { margin-bottom: 20px; } /* Rappel non-bloquant du minimum de séjour (14 nuits), affiché uniquement * si les dates choisies sont plus courtes — voir showResultsStep() dans * weather-check.js. Volontairement discret (pas rouge/erreur) : la météo * reste valable, ce n'est qu'une information sur la réservation. */ .pomar-wcheck-stay-warning { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--pomar-wc-accent-soft, #F6E9B8); font-size: 14px; line-height: 1.4; color: var(--pomar-wc-brown, #6E4B2A); } .pomar-wcheck-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 640px) { .pomar-wcheck-kpis { grid-template-columns: 1fr; } } .pomar-wcheck-kpi { background: #fff; border: 1px solid var(--pomar-wc-border, #E7DACA); border-radius: 14px; padding: 20px 18px; } .pomar-wcheck-kpi-label { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--pomar-wc-text-muted, #7A6A57); font-weight: 600; } .pomar-wcheck-kpi-value { margin-top: 12px; font-weight: 700; font-size: 42px; line-height: 1; color: var(--pomar-wc-text, #3B2C1C); white-space: nowrap; } .pomar-wcheck-kpi-value small { font-size: 18px; font-weight: 500; color: var(--pomar-wc-text-muted, #7A6A57); } /* Même raison qu'en v2.3.1 sur le widget de /search-results/ : la valeur * "Daylight" combine deux heures et déborderait sur 2 lignes à 42px. */ .pomar-wcheck-kpi-value--compact { font-size: 38px; letter-spacing: -.01em; } .pomar-wcheck-kpi-value--compact small { font-size: 16px; } .pomar-wcheck-kpi-bar { margin-top: 12px; height: 6px; border-radius: 999px; background: var(--pomar-wc-border, #E7DACA); overflow: hidden; } .pomar-wcheck-kpi-bar i { display: block; height: 100%; background: var(--pomar-wc-accent, #C9A227); } .pomar-wcheck-kpi-note { margin-top: 10px; font-size: 14.5px; line-height: 1.4; color: var(--pomar-wc-text-muted, #7A6A57); } .pomar-wcheck-quote { padding: 4px 32px 24px; font-size: 16px; line-height: 1.5; color: var(--pomar-wc-text, #3B2C1C); } .pomar-wcheck-quote em { font-style: italic; color: var(--pomar-wc-brown, #6E4B2A); } .pomar-wcheck-foot { padding: 18px 32px 26px; border-top: 1px solid var(--pomar-wc-border, #E7DACA); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; } /* Le [hidden] du navigateur (display:none) a la même spécificité que la * règle "display: flex" ci-dessus ; sans ce override explicite, l'attribut * hidden posé par showFormStep() / setFootVisible(false) en JS n'a aucun * effet visuel et le CTA reste visible pendant l'étape formulaire. */ .pomar-wcheck-foot[hidden] { display: none; } .pomar-wcheck-footnote { margin: 0; font-size: 14.5px; line-height: 1.4; color: var(--pomar-wc-text-muted, #7A6A57); flex: 1 1 260px; } .pomar-wcheck-cta { appearance: none; border: 0; border-radius: 999px; padding: 0 22px; height: 44px; background: var(--pomar-wc-brown, #6E4B2A); color: #fff; font: inherit; font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: lowercase; cursor: pointer; flex: none; } .pomar-wcheck-cta:hover { opacity: .9; }