/** * La recherche de destinations : le bouton d'ouverture dans la barre du méga * menu, et la fenêtre en verre dépoli qui s'ouvre au centre de l'écran. * * Ne lit que les tokens déclarés dans le :root de main.css, jamais de couleur * écrite en dur. */ /* ── Le bouton d'ouverture, dans la barre du menu ─────────────────────────── */ /* * Masqué tant que le script n'a pas confirmé sa présence (classe posée sur * , même convention que le chevron du méga menu) : un bouton qui * n'ouvrirait rien n'a rien à faire dans la tabulation. */ .ml-recherche-declencheur { display: none; } html.ml-js-recherche .ml-recherche-declencheur { display: inline-flex; align-items: center; gap: 0.45rem; /* * LA MARGE AUTOMATIQUE A DÉMÉNAGÉ sur « .ml-nav-actions » * (assets/css/mega-menu.css), le conteneur qui porte maintenant le bouton * de contact ET celui ci. Portée par ce bouton seul, elle l'aurait poussé * loin de son voisin au lieu de pousser les deux ensemble. */ padding: 0.55rem 0.9rem; border: 1px solid var(--ml-border-strong); border-radius: var(--ml-radius-pill); background: transparent; color: var(--ml-header-fg, var(--ml-primary)); font: inherit; font-size: var(--ml-fs-sm); line-height: 1; cursor: pointer; transition: background-color 200ms var(--ml-ease), border-color 200ms var(--ml-ease); } html.ml-js-recherche .ml-recherche-declencheur:hover { background: rgba(102, 31, 128, 0.08); border-color: var(--ml-accent); } /* Sur le haut de page sombre, tant que la barre reste transparente (même condition que le texte blanc du logo et des liens, voir main.css) : un survol blanc translucide plutôt que le violet, illisible sur ce fond. */ html.ml-js-scroll body.ml-has-dark-header .ml-header:not(.is-scrolled) .ml-recherche-declencheur:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.5); } /* LA LOUPE SEULE, À TOUTES LES LARGEURS (constat de Marino). Le mot « Rechercher » ne cédait la place qu'en dessous de 480px, et deux libellés de plus dans la barre la faisaient déborder. Une loupe se lit sans mot, ce qui n'est pas le cas de « Contact » : c'est lui qui garde son texte, et lui seul. LE MOT RESTE DANS LE DOCUMENT, seul son affichage est masqué : c'est ce qui nomme le bouton pour une synthèse vocale. Le retirer laisserait un bouton sans nom. */ html.ml-js-recherche .ml-recherche-declencheur { padding: 0.6rem; border-radius: 50%; } .ml-recherche-declencheur-texte { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── La fenêtre : un natif ───────────────────────────────────────── */ .ml-recherche-dialogue { box-sizing: border-box; width: min(640px, calc(100vw - 2 * var(--ml-space-md))); max-height: min(560px, calc(100svh - 2 * var(--ml-space-md))); padding: 0; margin: auto; border: none; border-radius: var(--ml-radius-lg); background: transparent; color: var(--ml-text); overflow: hidden; } .ml-recherche-dialogue:not([open]) { display: none; } /* Empêche la page de défiler derrière la fenêtre pendant qu'elle est ouverte. Un natif bloque déjà le clic et le tabulateur sur le reste du document, mais pas toujours le doigt sur iOS : sans ce verrou, glisser sur l'écran fait défiler la page au lieu de la liste de résultats. Les classes sont posées par le script, jamais par CSS seul (voir bloquerDefilementArrierePlan() dans recherche-destinations.js). */ html.ml-recherche-ouverte { overflow: hidden; } html.ml-recherche-ouverte body { position: fixed; inset-inline: 0; overflow: hidden; /* Le décalage vertical (top) est posé par le script à l'ouverture, pour garder le point de défilement exact et l'y remettre à la fermeture. */ } /* Le fond flouté derrière la fenêtre. Repli sur un fond simplement plus sombre si le navigateur ne sait pas flouter (même logique que la barre de menu et les pilules de verre du haut de page des pays, voir assets/css/fiche-pays.css). */ .ml-recherche-dialogue::backdrop { background: rgba(34, 29, 41, 0.6); } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ml-recherche-dialogue::backdrop { background: rgba(34, 29, 41, 0.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } } /* Le panneau en verre dépoli : même esprit que .ml-pays-pilule (assets/css/fiche-pays.css), adapté à une grande surface lisible. */ .ml-recherche-panneau { display: flex; flex-direction: column; height: 100%; max-height: inherit; background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: var(--ml-shadow-lg); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ml-recherche-panneau { background: var(--ml-bg); } } /* Sur petit écran, la fenêtre prend TOUT l'écran (constat de Marino : elle n'avait été ni pensée ni testée au delà d'un ordinateur). La barre de saisie reste en haut, la liste défile sous elle. Le script ajuste ensuite la hauteur réelle à la zone visible quand le clavier logiciel se montre (voir ajusterHauteurClavier() dans recherche-destinations.js), puisque aucune unité de hauteur CSS, svh comprise, ne le compte. */ @media (max-width: 640px) { .ml-recherche-dialogue { width: 100%; max-width: 100%; height: 100svh; max-height: 100svh; margin: 0; border-radius: 0; } .ml-recherche-panneau { border-radius: 0; } } /* Apparition douce, jamais de rebond. Coupée sous prefers-reduced-motion. */ @media (prefers-reduced-motion: no-preference) { .ml-recherche-dialogue[open] { animation: ml-recherche-apparition 220ms var(--ml-ease); } .ml-recherche-dialogue[open]::backdrop { animation: ml-recherche-fond 220ms var(--ml-ease); } } @keyframes ml-recherche-apparition { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes ml-recherche-fond { from { opacity: 0; } to { opacity: 1; } } /* ── L'en-tête : la loupe, le champ, le bouton de fermeture ──────────────── */ .ml-recherche-entete { display: flex; align-items: center; flex: 0 0 auto; gap: var(--ml-space-xs); padding: var(--ml-space-sm) var(--ml-space-md); border-block-end: 1px solid var(--ml-border); border-start-start-radius: var(--ml-radius-lg); border-start-end-radius: var(--ml-radius-lg); color: var(--ml-text-mid); } .ml-recherche-champ { flex: 1; min-width: 0; border: none; background: transparent; font: inherit; /* --ml-fs-lg vaut 18px (racine à 16px, jamais réduite ailleurs dans le thème) : au dessus du seuil de 16px sous lequel iOS zoome la page à la mise au point du champ. Vérifié, à ne jamais faire descendre en dessous de 16px sur ce champ. */ font-size: var(--ml-fs-lg); color: var(--ml-text); } .ml-recherche-champ::placeholder { color: var(--ml-text-dim); } /* * LE CONTOUR VIOLET CARRÉ, RETIRÉ (constat de Marino). Le thème pose un contour * de deux pixels sur tout champ qui prend le focus (main.css). Sur un champ * sans bordure ni fond, étiré sur toute la largeur de la barre, ça dessinait un * rectangle flottant au milieu du panneau. * * C'est la BARRE ENTIÈRE qui s'allume désormais, en suivant l'arrondi du * panneau : le focus reste parfaitement visible, il désigne simplement la bonne * chose. « :focus-within » plutôt que « :has » : il est supporté partout depuis * longtemps, et la visibilité du focus n'est pas une chose que l'on met derrière * une condition. */ .ml-recherche-champ:focus, .ml-recherche-champ:focus-visible { outline: none; } .ml-recherche-entete:focus-within { box-shadow: inset 0 0 0 2px var(--ml-accent); } /* * LA SECONDE CROIX, RETIRÉE elle aussi. Un champ « search » reçoit du * navigateur son propre bouton d'effacement, dessiné à sa façon, bleu sous * Chrome : il arrivait juste à côté de notre bouton de fermeture, deux croix * l'une contre l'autre sans qu'on sache laquelle fait quoi. * * Le type « search » est gardé pour ce qu'il apporte au clavier et aux * lecteurs d'écran, seule sa décoration est masquée. */ .ml-recherche-champ::-webkit-search-cancel-button, .ml-recherche-champ::-webkit-search-decoration, .ml-recherche-champ::-webkit-search-results-button, .ml-recherche-champ::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; display: none; } .ml-recherche-fermer { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; /* 44px : cible tactile minimale confortable (audit mobile), comme ailleurs sur le site (voir assets/css/assistant-modale.css). 36px était trop petit au pouce. */ width: 44px; height: 44px; border: none; border-radius: 50%; background: transparent; color: var(--ml-text-mid); cursor: pointer; transition: background-color 200ms var(--ml-ease); } .ml-recherche-fermer:hover { background: var(--ml-accent-soft); color: var(--ml-accent-dark); } /* ── Les résultats ───────────────────────────────────────────────────────── */ .ml-recherche-resultats { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--ml-space-sm) var(--ml-space-md) var(--ml-space-md); } .ml-recherche-soustitre { margin: 0 0 var(--ml-space-xs); color: var(--ml-text-mid); font-size: var(--ml-fs-sm); } .ml-recherche-vide { margin: 0; padding: var(--ml-space-md) 0; color: var(--ml-text-mid); text-align: center; } .ml-recherche-liste { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; } .ml-recherche-resultat { display: flex; align-items: center; gap: var(--ml-space-sm); padding: var(--ml-space-xs) var(--ml-space-sm); border-radius: var(--ml-radius-sm); color: var(--ml-text); text-decoration: none; transition: background-color 150ms var(--ml-ease); } .ml-recherche-resultat:hover, .ml-recherche-resultat:focus-visible { background: var(--ml-accent-soft); } .ml-recherche-resultat-vignette { flex: 0 0 56px; width: 56px; height: 56px; overflow: hidden; border-radius: var(--ml-radius-sm); background: var(--ml-bg-alt); } .ml-recherche-resultat-vignette.is-vide { background: linear-gradient(135deg, var(--ml-accent-soft), var(--ml-bg-alt)); } .ml-recherche-resultat-vignette img { display: block; width: 100%; height: 100%; object-fit: cover; } .ml-recherche-resultat-texte { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 2px; } .ml-recherche-resultat-nom { overflow: hidden; color: var(--ml-primary); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; } .ml-recherche-resultat-pays { overflow: hidden; color: var(--ml-text-mid); font-size: var(--ml-fs-sm); white-space: nowrap; text-overflow: ellipsis; } .ml-recherche-resultat-langue { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; padding: 0.3em 0.55em; border-radius: var(--ml-radius-pill); background: var(--ml-accent-soft); color: var(--ml-accent-dark); font-size: var(--ml-fs-sm); font-weight: 600; } /* ── Zones sûres, plein écran mobile ────────────────────────────────────── Encoche en haut, barre d'outils Safari en bas, coins arrondis du téléphone sur les côtés en paysage : ajoutées à l'espacement existant, jamais à sa place. Placé après les règles de base de l'en-tête et des résultats, pour les surcharger dans la cascade plutôt que de s'y perdre. Sans effet tant que header.php ne porte pas « viewport-fit=cover » dans sa balise meta viewport : env() y rend alors 0, ce qui reste inoffensif. */ @media (max-width: 640px) { .ml-recherche-entete { border-start-start-radius: 0; border-start-end-radius: 0; padding-top: calc(var(--ml-space-sm) + env(safe-area-inset-top, 0px)); padding-left: calc(var(--ml-space-md) + env(safe-area-inset-left, 0px)); padding-right: calc(var(--ml-space-md) + env(safe-area-inset-right, 0px)); } .ml-recherche-resultats { padding-bottom: calc(var(--ml-space-md) + env(safe-area-inset-bottom, 0px)); padding-left: calc(var(--ml-space-md) + env(safe-area-inset-left, 0px)); padding-right: calc(var(--ml-space-md) + env(safe-area-inset-right, 0px)); } } @media (prefers-reduced-motion: reduce) { .ml-recherche-declencheur, .ml-recherche-fermer, .ml-recherche-resultat { transition: none; } }