/** * Bois de Faral — Habillage CSS du widget de réservation Hippocamp (story 9.4) * * Moteur tiers : le script (inc/scripts.php:bdf_hippocamp_script(), chargé en JS natif, * PAS d'iframe) génère lui-même tout le DOM du widget et du tunnel dans * #hippocamp-search-widget-container. Ce fichier ne fait QUE surcharger en CSS ce que le * script produit ; le HTML n'est ni versionné ni modifiable ici. * * Sélecteurs réels relevés par inspection DevTools sur dev.bois-de-faral.com * (2026-07-19, aucune trace de ces classes dans le dépôt avant cette story) : * * - #hippocamp-search-widget-container reçoit lui-même la classe .bootstrap-iso (ajoutée * par le script, en plus de .bdf-hippocamp-container.notranslate posées par le thème). * 4 feuilles CSS tierces cross-origin (app.hippo-camp.fr) y sont associées : * bootstrap-iso.4.6.0.min.css (Bootstrap 4.6 scopé sous .bootstrap-iso, y compris son * font-family système), skeleton.min.css (skeleton de chargement .fakeData), search.min.css * (classes propres à Hippocamp, .hpc-* et .cm-*), bootstrap-slider.min.css (slider prix/âges). * Ces 4 feuilles sont cross-origin : le NAVIGATEUR ne peut pas lire leurs `cssRules`. * Elles restent en revanche parfaitement téléchargeables en HTTP — voir le § « LES * FEUILLES DU WIDGET SONT LISIBLES » plus bas, qui corrige l'axiome inverse posé ici * par la story 9.4. * - Barre repliée : #hc-form-container.hippo-card > .row > .col-md-3/.col-md-2, chaque champ * dans .input-group.flex-nowrap avec #addon-wrapping.input-group-text (icône .fa). * Dates : #hc-search-field-datefilter.form-control (affichage), calendrier ouvert par * bootstrap-daterangepicker STANDARD, injecté en enfant direct de (PAS dans le * conteneur du widget) : .daterangepicker > .drp-calendar.left/.right > .calendar-table > * table td.available/.off/.weekend/.in-range/.active/.start-date/.end-date, * .drp-buttons > .cancelBtn/.applyBtn.btn-primary. * Flexibilité : #hpc-selected_flexibility_button_container.dropdown. * Voyageurs : #persons_label.form-control ouvre #persons_picker.cm-persons-picker (dans le * conteneur) > .cm-persons-card > .cm-person-row > .cm-person-info(.cm-person-title/ * .cm-person-subtitle) + .cm-qty-control(.btn-qty-light/.cm-qty-input/.btn-qty-primary). * Recherche : #hc-widget-search-btn.btn.btn-lg.btn-success.pro-button.w-100. * - Résultats : #hc-widget-search-results > #hc-filters-and-results-container > .row > * #hc-widget-search-results-list (section.hippo-product > .container.bg-white.shadow-sm * par hébergement) + colonne filtre (#hc-results-sorter, #hpc-price-range-slider-container * — bootstrap-slider standard, classes .slider-selection/.slider-handle). * - Tunnel (4 étapes, DOM partagé par les 4 conteneurs #hc-widget-billingitems-form/ * -customer-form/-payment-form/-insurance-form, togglés en .d-none) : stepper commun * .hpc-steps-bar > .hpc-step-item[.active|.done] > .hpc-step-dot (chiffre, ou * quand .done — confirmé en DOM réel, pas de SVG) + * .hpc-step-label (texte réel : Options/Coordonnées/Récapitulatif/Paiement, identique * aux maquettes). Couleur de l'état actif/done pilotée par la custom property CSS * --hpc-btn-color (fallback #28a745), qui traverse la frontière cross-origin par * héritage normal — pas besoin de !important pour la recolorer depuis ce fichier. * Étape "Récapitulatif" : PAS de conteneur dédié — Hippocamp la marque .done * automatiquement et fusionne son contenu en tête de #hc-widget-payment-form * (#hpc_order_summary_notice, .hippo-card.sticky-summary > .h4 pour le total). * Options : #billing-items-container > .hpc-option-card(.hpc-option-main > * .hpc-option-info/.hpc-option-pricing.hpc-new-price ; .hpc-option-footer > * .hpc-qty-control(.btn-qty-light/.btn-qty-primary) + .hpc-option-total), total de * l'étape #totalWithOptions.amount.h4 (div, pas un vrai titre). * Paiement : .payment-method(.selected), .hpc-check-card/.hpc-transfer-card, * .hpc-check-btn/.hpc-transfer-btn (dégradé vert Bootstrap par défaut). * - Aucun total n'est porté par un vrai h1-h4 (toujours span/div/strong) : la règle * thème.json ciblant les titres ne peut pas s'y appliquer par erreur (AC4 déjà correct * par construction côté Hippocamp, restait la police système par défaut à corriger). * * Piège vérifié en DevTools : une règle générique "#hippocamp-search-widget-container *" * casse le rendu des icônes .fa (elles perdent leur police d'icônes) — toute règle de * police globale doit explicitement exclure .fa. * * ── LES FEUILLES DU WIDGET SONT LISIBLES : les télécharger avant de supposer ── * Le blocage CORS empêche le NAVIGATEUR de lire `cssRules` — pas un `curl`. Les feuilles * sont publiquement servies et doivent être consultées avant tout diagnostic de cascade : * curl -sO https://app.hippo-camp.fr/media/com_campingmanager/widgets/css/search.min.css * curl -sO https://app.hippo-camp.fr/media/com_campingmanager/widgets/css/bootstrap-iso.4.6.0.min.css * (La 9.4 puis la 9.11 avaient posé l'inverse en axiome — « CORS-bloquées, donc * inauditables » — ce qui a produit le diagnostic erroné corrigé ci-dessous.) * * ── POURQUOI PRESQUE TOUT DOIT ÊTRE PRÉFIXÉ ── * Ce n'est PAS une affaire d'ordre des feuilles. Une déclaration auteur `!important` n'est * jamais battue par une déclaration auteur normale, quel que soit l'ordre : entre deux * `!important`, c'est la SPÉCIFICITÉ qui tranche (puis l'ordre, à spécificité égale). * Le cas réel qui laissait le bouton Rechercher à 14px malgré son !important — * search.min.css : * #hippo-main-search-container button { font-size:14px !important } → 0-1-0-1 * contre la règle du thème : * #hc-widget-search-btn { font-size:… !important } → 0-1-0-0 * Hippocamp gagnait sur la spécificité, pas sur la position. Préfixer par * #hippocamp-search-widget-container porte la règle à 0-2-0-0 et reprend la main. * * Corollaire : l'ordre des feuilles (thème en position ~33, widget en 36-41) ne joue QUE * pour départager deux déclarations de même importance ET de même spécificité. C'est le cas * du conteneur `.daterangepicker`, d'où le préfixe `body` sur sa règle de police. * * Règle de travail : préfixer par #hippocamp-search-widget-container. Les règles en * `#hc-*` + classe (0-1-1-0) déjà présentes plus bas n'ont pas toutes été reprises — elles * sont mesurées opérantes aujourd'hui, mais restent à durcir si une régression apparaît * (cf. deferred-work.md). Ne pas lire l'absence de préfixe comme une validation. * (Seul .daterangepicker échappe au préfixe — injecté hors du conteneur, cf. § dédié.) */ /* ======================================== Typographie (AC1 + AC4) — une seule règle couvre tout le widget, y compris les totaux ======================================== */ #hippocamp-search-widget-container, #hippocamp-search-widget-container *:not(.fa) { font-family: var(--font-body); } /* Le calendrier (.daterangepicker) est injecté hors du conteneur (enfant de ) : règle séparée, même principe. Le conteneur lui-même est préfixé par `body` : à spécificité égale, daterangepicker.css (chargée après) gagnait et le laissait en arial — seuls ses descendants passaient en Nunito (mesuré en recette 2026-08-01). */ body .daterangepicker, .daterangepicker *:not(.fa) { font-family: var(--font-body); } /* ======================================== Barre de recherche repliée (AC1, AC2) ======================================== */ #hc-form-container .form-control, #hc-form-container select.form-control { border-color: var(--paper-300) !important; color: var(--ink-900); } #hc-form-container .form-control:focus { border-color: var(--green-500) !important; box-shadow: 0 0 0 3px var(--green-100) !important; } #hc-form-container .input-group-prepend .input-group-text { background: var(--paper-100) !important; border-color: var(--paper-300) !important; color: var(--green-700); } #hc-form-container label { color: var(--ink-900) !important; } /* Bouton Rechercher : recalibré à une taille ~.bdf-btn--md (au lieu de .btn-lg), centré dans sa colonne (au lieu de .w-100 pleine largeur), couleur --red-500/--red-600 au hover (cf. .bdf-btn--warm, maquette design-system/refresh-2026-07/ui_kits/reservation). Sélecteur préfixé par #hippocamp-search-widget-container : cf. § « Ordre des feuilles » en tête de fichier. Sans ce préfixe, `font-size` restait à 14px malgré le !important (recette 2026-08-01, AC2 non satisfaite jusque-là). */ #hippocamp-search-widget-container #hc-widget-search-btn { display: flex !important; /* fit-content (pas auto) : un flex block-level en width:auto s'étire à 100 % et annule margin:0 auto ; fit-content le dimensionne au contenu → centrage fiable (story 9.4 review, AC2). */ width: fit-content !important; margin: 0 auto !important; /* PAS de padding vertical : la hauteur est verrouillée à 40px par search.min.css et box-sizing vaut border-box, donc `padding:11px` ne « ne fait rien » — il écrase la boîte de contenu à 16px pour un texte de 23px (line-height 25,5px). Le libellé débordait alors vers le bas, désaligné de 4,5px et décalé par rapport à l'icône (remonté par Samuel sur capture, 2026-08-01). Les trois propriétés d'alignement ci-dessous reprennent celles de .bdf-btn (primitives.css:18). */ padding: 0 24px !important; align-items: center !important; justify-content: center !important; gap: .55em !important; line-height: 1 !important; font-size: var(--text-md) !important; font-weight: 800; border-radius: var(--radius-pill) !important; background: var(--red-500) !important; border-color: var(--red-600) !important; /* color explicite : sans elle, le contraste du libellé restait délégué au widget (blanc sur --red-500 = 5,34:1 aujourd'hui, mais non verrouillé). Clôt l'item « CTA sans color explicite » de deferred-work.md pour ce bouton. */ color: var(--paper-0) !important; } /* À --text-md (17px) le libellé « Rechercher » mesure 164px, alors que l'espace utile d'une .col-md-2 n'est que de ~122px : `margin:0 auto` ne peut pas centrer plus large que son parent, et le bouton débordait de 8px (≥1024) à 43px (768). On laisse la colonne s'ajuster à son contenu. `margin-inline:auto` sur la COLONNE est indispensable : sans lui, la colonne épouse le bouton (elle ne fait que +30px, le padding Bootstrap), donc le `margin:0 auto` du bouton résout à zéro et ne centre plus rien — le test « centré dans son parent » devient vrai par construction. Mesuré contre la carte, le bouton était alors à 8px du bord gauche pour 518px de vide à droite à 768px. Avec `margin-inline:auto` : 263/263 à 768px, 82/82 à 390px (review 2026-08-01). Toute vérification de ce centrage doit se faire contre #hc-form-container, jamais contre la colonne. `max-width:100%` : filet contre un libellé plus long que le conteneur (fit-content ne descend jamais sous min-content), et amortit la perte de la règle dans un moteur sans `:has()`, où la font-size agrandie s'appliquerait sans l'élargissement de colonne. */ #hippocamp-search-widget-container #hc-form-container .row > div:has(> #hc-widget-search-btn) { flex: 0 0 auto !important; width: auto !important; max-width: 100% !important; } /* Le centrage ne vaut QUE lorsque le bouton passe seul sur sa ligne. Tant qu'il partage la ligne avec les champs, `margin-inline:auto` le faisait flotter au milieu de l'espace libre résiduel — 47px de vide après le sélecteur de voyageurs au lieu des 30px de gouttière Bootstrap (remonté par Samuel sur capture, 2026-08-01). Seuil à 1023.98px : c'est en dessous de 1024 que la colonne wrappe, les 3 champs occupant déjà 75% de la row. Dépend de la largeur du libellé « Rechercher » — à revérifier si le widget change de langue ou de libellé. Media query déclarée APRÈS la règle qu'elle surcharge : une media query n'ajoute aucune spécificité (piège déjà rencontré sur le séparateur du menu mobile, story 9.9). */ @media (max-width: 1023.98px) { #hippocamp-search-widget-container #hc-form-container .row > div:has(> #hc-widget-search-btn) { margin-inline: auto !important; } } /* Hauteur : search.min.css impose `#hc-widget-search-btn{height:40px!important}`, comme aux champs de la barre. .bdf-btn--md ferait ~44px. Écart ASSUMÉ (arbitrage Samuel, 2026-08-01) : forcer 44px désalignerait le bouton des champs. Conséquence à ne pas oublier — puisque la hauteur est imposée, c'est l'alignement flex qui centre le contenu, jamais le padding vertical (cf. commentaire ci-dessus). */ #hippocamp-search-widget-container #hc-widget-search-btn:hover, #hippocamp-search-widget-container #hc-widget-search-btn:focus { background: var(--red-600) !important; border-color: var(--red-600) !important; } /* Focus : traité globalement en fin de fichier (§ Anneau de focus). */ /* Bascule "Flexibilité" (dates exactes / +/- N jours) */ #hippocamp-search-widget-container #hpc-selected_flexibility_button { color: var(--green-700) !important; } #hippocamp-search-widget-container #hpc-selected_flexibility_dropdown .dropdown-item:hover { background: var(--green-50); color: var(--green-700); } /* ======================================== Calendrier (bootstrap-daterangepicker, injecté hors du conteneur widget) Ces sélecteurs .daterangepicker NE PEUVENT PAS être préfixés par #hippocamp-search-widget-container : le widget injecte le calendrier en enfant direct de , hors du conteneur. Seule instance daterangepicker de ce site aujourd'hui (aucun autre plugin Bootstrap chargé) — non-scopage assumé (story 9.4 review). À reconsidérer si un autre composant utilisant la même librairie est ajouté au site. ======================================== */ /* --green-600 (pas --green-500, ≈3,3:1 < AA sur blanc — même dette que le stepper AC7) */ /* Préfixe `body` obligatoire ici : search.min.css pose exactement les mêmes sélecteurs, en !important et à spécificité IDENTIQUE — .daterangepicker td.in-range { background-color:#ccc !important } (0-0-2-1) .daterangepicker td.active { background-color:#666 !important } (0-0-2-1) — donc départagés par l'ordre, que le widget gagne toujours (chargé après). C'est le seul endroit du fichier où l'ordre des feuilles joue réellement, faute de pouvoir scoper par #hippocamp-search-widget-container (calendrier injecté dans ). Sans ce durcissement, la plage sélectionnée s'affichait en GRIS #ccc au lieu de --green-100 (mesuré à la code review du 2026-08-01). */ body .daterangepicker td.active, body .daterangepicker td.active:hover, body .daterangepicker td.start-date.active, body .daterangepicker td.end-date.active { background-color: var(--green-600) !important; border-color: transparent; color: var(--paper-0) !important; } body .daterangepicker td.in-range { background-color: var(--green-100) !important; color: var(--ink-900) !important; } .daterangepicker .drp-calendar .calendar-table { border-color: var(--paper-300); } .daterangepicker .applyBtn { background-color: var(--green-600) !important; border-color: var(--green-700) !important; /* Sans couleur explicite, le libellé restait NOIR sur --green-600, soit 4,33:1 — sous AA (mesuré en recette 2026-08-01). En blanc : 4,85:1. */ color: var(--paper-0) !important; } .daterangepicker .applyBtn:hover { background-color: var(--green-700) !important; border-color: var(--green-700) !important; } .daterangepicker .cancelBtn { color: var(--ink-700); } /* ======================================== Sélecteur de voyageurs (.cm-persons-picker, DANS le conteneur widget) ======================================== */ /* Sélecteurs préfixés #hippocamp-search-widget-container : classes génériques (.btn-*, .cm-*) scopées au conteneur pour éviter toute fuite de style hors du widget (story 9.4 review). */ #hippocamp-search-widget-container .cm-persons-card { border: var(--border-w) solid var(--paper-300); } #hippocamp-search-widget-container .cm-person-title { color: var(--ink-900); } #hippocamp-search-widget-container .cm-person-subtitle { color: var(--ink-500); } /* Les boutons +/- du sélecteur voyageurs (barre repliée) sont de simples .btn-success (pas .btn-qty-primary, réservé aux quantités de l'étape Options ci-dessous) — sélecteurs réels distincts, vérifiés en DOM (#increment_adults/#increment_children). Même dette de contraste AA que .btn-qty-primary. */ #hippocamp-search-widget-container .cm-qty-control .btn-success { background: var(--green-600) !important; border-color: var(--green-700) !important; color: var(--paper-0) !important; } #hippocamp-search-widget-container .cm-qty-control .btn-success:hover { background: var(--green-700) !important; } #hippocamp-search-widget-container .cm-qty-control .btn-light { background: var(--paper-200) !important; color: var(--ink-900) !important; } /* --green-500 blanc ≈3,3:1 < AA (même dette que .bdf-qty__btn--add, primitives.css) */ #hippocamp-search-widget-container .btn-qty-primary { background: var(--green-600) !important; border-color: var(--green-700) !important; color: var(--paper-0) !important; } #hippocamp-search-widget-container .btn-qty-primary:hover { background: var(--green-700) !important; } #hippocamp-search-widget-container .btn-qty-light { background: var(--paper-200) !important; color: var(--ink-900) !important; } /* ======================================== Résultats de recherche ======================================== */ #hc-widget-search-results-list section.hippo-product > .container { border-color: var(--paper-300) !important; } #hippocamp-search-widget-container #hc-results-sorter { border-color: var(--paper-300); color: var(--ink-700); } #hippocamp-search-widget-container #hc-results-sorter:hover { background: var(--paper-100) !important; } /* Slider de prix (bootstrap-slider) — dégradé rose/rouge par défaut, recoloré à la marque */ #hc-filters-toggler-container .slider-selection { background: var(--red-500) !important; } #hc-filters-toggler-container .slider-handle { box-shadow: 0 2px 6px rgba(50, 47, 42, 0.25) !important; } /* Bouton "Réserver" de chaque carte résultat — sélecteur réel .hpc-cta-btn (pas .btn-success, vérifié en DOM : "btn btn-customized hpc-cta-btn btn-block text-white"). Rouge --warm + pilule : le ui_kit reservation/ rend ce CTA en .bdf-btn--md .bdf-btn--warm (arbitrage Samuel du 2026-08-01, cf. § CTA du tunnel ci-dessous). */ #hippocamp-search-widget-container #hc-widget-search-results-list .hpc-cta-btn { background: var(--red-500) !important; border-color: var(--red-600) !important; color: var(--paper-0) !important; border-radius: var(--radius-pill) !important; padding: 11px 24px !important; font-size: var(--text-md) !important; font-weight: 800 !important; } #hippocamp-search-widget-container #hc-widget-search-results-list .hpc-cta-btn:hover { background: var(--red-600) !important; } /* Air sous le bouton : son conteneur (.col-…-3.info) n'a aucun padding vertical, et le passage à --text-md l'a fait passer de 35 à 49,5px de haut — il touchait le bas de la carte (1px), ce qui se voit (remonté par Samuel sur capture, 2026-08-01). */ #hippocamp-search-widget-container #hc-widget-search-results-list .hpc-cta-btn { margin-bottom: var(--space-4) !important; } /* ======================================== Stepper du tunnel — 4 étapes (AC3, AC7) .hpc-steps-bar/.hpc-step-item/.hpc-step-dot/.hpc-step-label déjà posés par Hippocamp (search.min.css) ; la classe .bdf-stepper elle-même ne peut pas être injectée dans le HTML tiers — on reproduit son rendu visuel sur les classes réelles du widget. ======================================== */ #hippocamp-search-widget-container { /* Custom property : traverse la frontière cross-origin par héritage normale (testé en DevTools), pas besoin de !important pour ce point précis. Recolore l'état actif ET la ligne de progression (search.min.css : .hpc-step-item.active{background|::before: var(--hpc-btn-color,#28a745)}). --green-600 (au lieu de --green-500) pour la même raison de contraste AA que le done ci-dessous. */ --hpc-btn-color: var(--green-600); } /* Conteneur : blanc bordé, comme .bdf-stepper (primitives.css:89-99). */ #hippocamp-search-widget-container .hpc-steps-bar { background: var(--paper-0) !important; border: var(--border-w) solid var(--paper-300) !important; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); } /* Pastille aux dimensions du ui_kit : 30px, numéro --text-sm/800. Le widget rend 26px/12px, et 20px/10px sous 575px — breakpoint réel lu dans search.min.css (`@media (max-width:575px){.hpc-step-label{display:none}}`), où il masque aussi les libellés. Ce n'est donc PAS 768px : au palier 768 les libellés restent visibles. */ #hippocamp-search-widget-container .hpc-step-dot { width: 30px !important; height: 30px !important; font-size: var(--text-sm) !important; font-weight: 800; border: 2px solid transparent; box-sizing: border-box; } #hippocamp-search-widget-container .hpc-step-label { color: var(--ink-500); font-size: var(--text-sm) !important; font-weight: 700; } /* Trait de progression. search.min.css le pose en `top:12px;height:2px;background:#dee2e6`, calé pour une pastille de 26px. Passée à 30px (centre à 15px), il restait 2px trop haut — mesuré aux paliers 1440 et 390 (review 2026-08-01). Repositionné sur le nouveau centre et ramené aux valeurs de .bdf-stepper__line : 3px sur --paper-200 (le #dee2e6 d'origine est hors rampe et visible sur les 4 étapes). */ #hippocamp-search-widget-container .hpc-step-item::before { top: 13.5px !important; /* 15 (centre de la pastille) − 3/2 */ height: 3px !important; background: var(--paper-200) !important; border-radius: 2px; } /* ÉTAT « À VENIR » — corrige le défaut le plus grave relevé en recette (2026-08-01) : Hippocamp rend le chiffre en blanc sur #dee2e6, soit 1,30:1, très loin des 4,5:1 d'AA — les étapes 2/3/4 étaient illisibles, et sous 575px, où les libellés passent en display:none, il ne restait que des pastilles vides. La 9.4 n'avait traité que .active et .done. --paper-200 + --ink-700 = 7,06:1 (mesuré). Le ui_kit prescrit --ink-500, qui ne donnerait que 4,11:1 : on prend le ton au-dessus pour passer AA. */ #hippocamp-search-widget-container .hpc-step-item:not(.active):not(.done) .hpc-step-dot { background: var(--paper-200) !important; color: var(--ink-700) !important; border-color: var(--paper-300); } /* ÉTAT COURANT — halo du ui_kit (.bdf-stepper__step--current). */ #hippocamp-search-widget-container .hpc-step-item.active .hpc-step-dot { border-color: var(--green-700); box-shadow: 0 0 0 4px var(--green-100); } #hippocamp-search-widget-container .hpc-step-item.active .hpc-step-label { color: var(--green-700); } /* --done : fond gris (#6c757d) par défaut, recoloré à la marque ; --green-500 blanc ≈3,3:1 < AA (même dette que le stepper .bdf-stepper), --green-600 ≈4,9:1 passe AA. */ #hippocamp-search-widget-container .hpc-step-item.done .hpc-step-dot, #hippocamp-search-widget-container .hpc-step-item.done::before { background: var(--green-600) !important; } /* Bordure --green-700 (et non --green-600, qui est la couleur du fond : l'anneau était invisible, 1,00:1). Aligné sur .bdf-stepper__step--done, primitives.css:95. */ #hippocamp-search-widget-container .hpc-step-item.done .hpc-step-dot { border-color: var(--green-700); } #hippocamp-search-widget-container .hpc-step-item.done .hpc-step-label { color: var(--ink-900); } /* ======================================== Étape Options (AC3 total, AC7 qty) ======================================== */ #hc-widget-billingitems-form .hpc-option-card { border-bottom-color: var(--paper-300); } #hc-widget-billingitems-form .hpc-option-title { color: var(--ink-900); } #hc-widget-billingitems-form .hpc-option-subtitle { color: var(--ink-500); } /* Prix — traités au niveau du conteneur, et non du seul #hc-widget-billingitems-form : la même classe porte les prix des CARTES DE RÉSULTATS, qui étaient donc hors de portée de la règle d'origine. C'est bien un défaut de PORTÉE, pas de cascade : `#hc-widget-billingitems-form .hpc-new-price` (0-1-1-0) battait déjà `.hpc-new-price` (0-0-1-0) côté widget. Le !important n'est ici qu'une ceinture, pas la correction. (search.min.css déclare `color:#1a7f2b` sur ces classes ; le #28a745 relevé à l'écran vient d'une autre règle du widget sur .hpc-price-customized.) */ #hippocamp-search-widget-container .hpc-new-price, #hippocamp-search-widget-container .hpc-price-value { color: var(--green-700) !important; } /* ======================================== CTA du tunnel — « Valider » (Options) et « Plus qu'une étape ! » (Coordonnées) Les 4 écrans du ui_kit rendent ces CTA en .bdf-btn--lg .bdf-btn--warm (rouge #c03e0b, pilule, 20px/800) ; le thème les laissait en vert Bootstrap 14px/400 radius 4px. Alignement sur le mockup arbitré avec Samuel le 2026-08-01. NB : #hc-widget-search-btn porte lui aussi .pro-button — il garde sa taille --md via sa propre règle plus haut, d'où le ciblage par conteneur d'étape et non par .pro-button seul. ======================================== */ #hippocamp-search-widget-container #hc-widget-billingitems-form .pro-button, #hippocamp-search-widget-container #hc-widget-customer-form .pro-button { background: var(--red-500) !important; border-color: var(--red-600) !important; color: var(--paper-0) !important; border-radius: var(--radius-pill) !important; padding: 15px 32px !important; font-size: var(--text-lg) !important; font-weight: 800 !important; width: fit-content !important; } #hippocamp-search-widget-container #hc-widget-billingitems-form .pro-button:hover, #hippocamp-search-widget-container #hc-widget-customer-form .pro-button:hover { background: var(--red-600) !important; border-color: var(--red-600) !important; } /* Focus : traité globalement en fin de fichier (§ Anneau de focus). */ /* ======================================== Étape Coordonnées ======================================== */ #hc-widget-customer-form .form-control { border-color: var(--paper-300) !important; } #hc-widget-customer-form .form-control:focus { border-color: var(--green-500) !important; box-shadow: 0 0 0 3px var(--green-100) !important; } #hc-widget-customer-form label { color: var(--ink-900) !important; } /* (le CTA « Plus qu'une étape ! » est traité avec celui de l'étape Options, § CTA du tunnel) */ #hippocamp-search-widget-container .hpc-trust-badge { background: var(--green-50) !important; border-color: var(--green-300) !important; color: var(--green-800) !important; } /* ======================================== Récapitulatif (fusionné en tête de l'étape Paiement) + Paiement ======================================== */ #hc-widget-payment-form .hippo-card.sticky-summary .h4 { color: var(--ink-900); } #hippocamp-search-widget-container #hpc_order_summary_notice { background: var(--green-50) !important; color: var(--green-800) !important; } #hippocamp-search-widget-container .payment-method.selected { border-color: var(--green-500) !important; background: var(--green-50) !important; } #hippocamp-search-widget-container .hpc-check-btn, #hippocamp-search-widget-container .hpc-transfer-btn { /* Départ du dégradé à --green-600 (pas --green-500 ≈3,3:1 < AA) : le texte des CTA est blanc, la moitié claire doit rester au-dessus de AA (story 9.4 review, AC7). */ background: linear-gradient(135deg, var(--green-600), var(--green-700)) !important; } #hippocamp-search-widget-container .hpc-check-price, #hippocamp-search-widget-container .hpc-transfer-price { color: var(--green-700); } #hippocamp-search-widget-container .hpc-copy-feedback { color: var(--green-700) !important; } /* ======================================== Couleurs hors rampe de tokens (recette 2026-08-01) La contrainte projet « pas de couleur hors rampe » n'était pas tenue : 47 éléments du widget rendaient encore des couleurs Bootstrap. Traités ici de façon générique pour couvrir aussi les écrans non parcourus en recette (assurance, confirmation). ======================================== */ /* Texte courant : bootstrap-iso pose `color:#212529` sur le conteneur, hérité par ~131 éléments (mesuré). Une seule déclaration sur le conteneur en ramène l'essentiel dans la rampe ; les éléments portant une couleur explicite sont traités individuellement plus bas. */ #hippocamp-search-widget-container { color: var(--ink-900); } /* Liens : le widget les rend en vert Bootstrap. On exclut les .btn, dont le vert est un fond porteur de texte blanc (le recolorer donnerait vert sur vert), et les contrôles de carrousel, blancs sur photo. --green-700 sur blanc = 7,08:1. L'exclusion doit être répétée sur :hover — à spécificité égale, la règle déclarée après gagne, et les flèches viraient au vert sombre au survol (review 2026-08-01). */ #hippocamp-search-widget-container a:not(.btn):not([class*="carousel-control"]) { color: var(--green-700) !important; } #hippocamp-search-widget-container a:not(.btn):not([class*="carousel-control"]):hover { color: var(--green-800) !important; } /* Boutons chèque/virement : ils portent un dégradé --green-600→700 posé plus haut. S'ils sont des sans .btn (non vérifiable — absents du DOM tant qu'aucune méthode de paiement n'est choisie), la règle de lien ci-dessus (0-1-2-1) battrait leur règle de fond (0-1-1-0) et écrirait --green-700 sur vert : 1,0 à 1,5:1, texte invisible. Garde-fou préventif. */ #hippocamp-search-widget-container .hpc-check-btn, #hippocamp-search-widget-container .hpc-transfer-btn { color: var(--paper-0) !important; } /* Textes secondaires : #6c757d, #777 (4,48:1 — SOUS AA), #999 (2,85:1) → rampe encre. */ #hippocamp-search-widget-container .text-muted, #hippocamp-search-widget-container .hpc-price-label, #hippocamp-search-widget-container .hpc-option-subtitle, #hippocamp-search-widget-container .cm-person-subtitle, #hippocamp-search-widget-container .hpc-old-price, #hippocamp-search-widget-container .hpc-copy-btn { color: var(--ink-500) !important; } /* Total de l'étape Options : le ui_kit le rend en --text-2xl/800/--green-700 (.opt-foot__amt) ; Hippocamp le laissait à 24px/500 en #212529. */ #hippocamp-search-widget-container #totalWithOptions { color: var(--green-700) !important; font-size: var(--text-2xl) !important; font-weight: 800 !important; } /* Messages de validation : #dc3545 → --red-600 (7,31:1 sur blanc, dans la rampe). */ #hippocamp-search-widget-container .invalid-feedback, #hippocamp-search-widget-container .text-danger { color: var(--red-600) !important; } /* Reste des couleurs Bootstrap/propriétaires relevées dans search.min.css et bootstrap-iso (arbitrage Samuel du 2026-08-01 : tout neutraliser, y compris sur les écrans non parcourus en recette — assurance, confirmation, paiement par chèque/virement). */ #hippocamp-search-widget-container .hpc-promo-badge { /* fond #ff385c */ background: var(--red-500) !important; color: var(--paper-0) !important; } #hippocamp-search-widget-container .slider-selection { /* dégradé #ff385c → #e61e4d */ background: linear-gradient(90deg, var(--red-500), var(--red-600)) !important; } #hippocamp-search-widget-container .slider-track, #hippocamp-search-widget-container .btn-qty-light, #hippocamp-search-widget-container .cm-person-row { /* #f0f0f0 */ background-color: var(--paper-200) !important; border-bottom-color: var(--paper-300); } #hippocamp-search-widget-container .hpc-ref-box { /* pointillé #d4a017 */ border-color: var(--ochre-500) !important; } #hippocamp-search-widget-container .hpc-check-reference, #hippocamp-search-widget-container .hpc-transfer-reference { /* fond #fff8e1 */ background: var(--paper-100) !important; } #hippocamp-search-widget-container .payment-method, /* bordure #eee */ #hippocamp-search-widget-container .hpc-option-card { border-color: var(--paper-300) !important; } #hippocamp-search-widget-container .badge-info, #hippocamp-search-widget-container .badge-primary, #hippocamp-search-widget-container .badge-secondary { /* #17a2b8 / #007bff / #6c757d */ background-color: var(--green-600) !important; color: var(--paper-0) !important; } #hippocamp-search-widget-container .badge-warning { /* #ffc107 */ background-color: var(--ochre-400) !important; color: var(--ink-900) !important; } #hippocamp-search-widget-container .badge-danger { /* #dc3545 */ background-color: var(--red-600) !important; color: var(--paper-0) !important; } #hippocamp-search-widget-container .tooltip-inner { /* #111 */ background-color: var(--ink-900) !important; color: var(--paper-0) !important; } #hippocamp-search-widget-container .badge-light { /* texte #212529 en propre */ background-color: var(--paper-100) !important; color: var(--ink-900) !important; } /* Boutons outline (tri des résultats, « remonter ») : fond transparent, c'est leur COULEUR DE TEXTE qui est visible — exclue de la règle de lien par `:not(.btn)`, elle restait au vert Bootstrap. */ #hippocamp-search-widget-container .btn-outline-secondary, #hippocamp-search-widget-container .btn-default { color: var(--green-700) !important; border-color: var(--paper-300) !important; } /* Contrôles de carrousel : exclus de la règle de lien parce qu'on les croyait blancs sur photo — ils héritaient en fait du vert Bootstrap (mesuré). Leur glyphe est une image de fond, `color` ne porte que le libellé .sr-only ; on les fixe en blanc, l'intention Bootstrap sur média sombre. */ #hippocamp-search-widget-container [class*="carousel-control"] { color: var(--paper-0) !important; } /* Compteurs de quantité : `color:#000` (noir pur, hors rampe). */ #hippocamp-search-widget-container .cm-qty-input, #hippocamp-search-widget-container .hpc-qty-input { color: var(--ink-900) !important; } /* Conteneurs d'étape : #333 / #adb5bd. Ils ne portent aucun texte en propre (le chiffre et le libellé ont leur propre couleur, traitée plus haut), mais restent hors rampe pour tout contenu que le widget y ajouterait. */ #hippocamp-search-widget-container .hpc-step-item { color: var(--ink-900); } /* ======================================== Anneau de focus — TOUS les contrôles du widget (AC2, WCAG 2.4.7 + 1.4.11) La recette n'avait couvert que 3 boutons. En réalité `bootstrap-iso` pose `.btn:focus{outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}` (0-0-2-0), qui bat le `*:focus-visible` du thème (primitives.css, § anneau de focus, 0-0-1-0) : AUCUN contrôle du widget n'avait d'anneau conforme — le CTA « Réserver », repeint en rouge, ne gardait qu'un halo bleu à 1,39:1. Story 9.12 (2026-08-15) : le thème passe à --focus-ring pour tout le site — il n'y a donc plus d'écart de COULEUR entre ce bloc et le thème (l'ancien commentaire qui le présentait comme un écart assumé n'a plus d'objet, supprimé), et la couleur n'est plus écrite en dur ici : elle vient du token, source unique, pour que la divergence qui a ouvert la 9.12 ne puisse pas se reproduire. Le bloc reste néanmoins nécessaire tel quel : il ne sert plus à changer la couleur, mais à battre la spécificité de `.btn:focus{outline:0}` de bootstrap-iso (0-0-2-0 contre 0-0-1-0 pour `*:focus-visible`), qui gagnerait sinon même avec la bonne couleur posée globalement — supprimer ce bloc ferait disparaître l'anneau sur tous les contrôles du widget, régression déjà mesurée avant la 9.11. Le widget est sur fond clair : pas de variante --focus-ring-on-dark ici. box-shadow neutralisé sur les seuls boutons : les champs conservent le leur, qui porte l'état de focus voulu par le thème (--green-100). ======================================== */ #hippocamp-search-widget-container :is(button, a, input, select, textarea, .btn, .payment-method):focus-visible, .daterangepicker :is(button, .btn):focus-visible { outline: var(--border-w-bold) solid var(--focus-ring) !important; outline-offset: 2px !important; } #hippocamp-search-widget-container :is(button, .btn):focus, .daterangepicker :is(button, .btn):focus { box-shadow: none !important; } /* ======================================== Pattern pop-up CSS-only "pas de deep-link" (AC5) Aucun CTA existant sur le site ne pointe aujourd'hui vers une étape/l'inventaire du tunnel Hippocamp (audité : seul #inventaire trouvé, ancre interne à la fiche gîte, inc/shortcodes.php:334 — sans rapport). Rien à convertir. Pattern réutilisable déjà en place pour une future pop-up de contenu (Story 9.6, inventaire complet) : lightbox :target de la galerie photo, custom.css:816-843 (.bdf-gite-gallery ... a:target img) — même mécanique lien-ancre "#id" + règle ":target", zéro JavaScript. ======================================== */