/* UrbanVoirie — Header mobile. Tout le rendu est sous 1024 px ; au-dessus le header et son panneau ne s'affichent pas (le méga menu du header desktop reste seul). Aucune police n'est chargée : --uvhm-police prend celle du site (DM Sans), sinon la police système. */ .uvhm,.uvhm-menu{ --uvhm-bleu:#1B86D0;--uvhm-bleu-fonce:#0F3557;--uvhm-bandeau:#0B2942;--uvhm-or:#C19B2B; --uvhm-texte:#0F1E2E;--uvhm-texte-2:#4A5A6B;--uvhm-gris:#7A8896;--uvhm-gris-clair:#8A96A3;--uvhm-bandeau-texte:#B9CBDA; --uvhm-filet:#DDE3E9;--uvhm-filet-doux:#E6EAEE;--uvhm-filet-leger:#F0F3F6;--uvhm-fond:#F7F9FA;--uvhm-fond-2:#F4F8FB;--uvhm-fond-3:#FBFCFD; --uvhm-rayon:4px;--uvhm-voile:rgba(15,30,46,.35);--uvhm-z:9998; --uvhm-police:'DM Sans','Figtree',system-ui,-apple-system,'Segoe UI',sans-serif; /* Hauteur réservée sous le header fixé : bandeau 32 + barre 60 + recherche 67. Le script la remesure. */ --uvhm-hauteur:159px; font-family:var(--uvhm-police);color:var(--uvhm-texte);line-height:1.3;-webkit-font-smoothing:antialiased; text-transform:none;letter-spacing:normal } /* Remises à zéro à spécificité nulle : elles ne battent jamais les règles des composants. */ .uvhm *,.uvhm *::before,.uvhm *::after,.uvhm-menu *,.uvhm-menu *::before,.uvhm-menu *::after{box-sizing:border-box} .uvhm :where(a),.uvhm-menu :where(a){text-decoration:none;color:inherit;transition:color .15s} .uvhm :where(p,form,nav,details),.uvhm-menu :where(p,form,nav,details){margin:0;padding:0} .uvhm :where(button,input),.uvhm-menu :where(button,input){font:inherit} .uvhm :where(svg),.uvhm-menu :where(svg){display:block;flex:0 0 auto} .uvhm :where(a,span,p,input,button,summary),.uvhm-menu :where(a,span,p,input,button,summary){font-family:inherit;text-transform:none;letter-spacing:normal} .uvhm-vh{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Liens : deux classes pour passer devant la couleur de lien du thème et du kit Elementor (.elementor-kit-N a). */ .uvhm .uvhm-logo,.uvhm-menu .uvhm-logo,.uvhm .uvhm-bandeau__contact,.uvhm .uvhm-burger,.uvhm .uvhm-panier,.uvhm-menu .uvhm-fermer,.uvhm-menu .uvhm-famille--lien,.uvhm-menu .uvhm-famille__lien,.uvhm-menu .uvhm-famille__tout,.uvhm-menu .uvhm-pastille,.uvhm-menu .uvhm-pages__lien,.uvhm-menu .uvhm-cta,.uvhm-menu .uvhm-pied__contact{text-decoration:none;box-shadow:none} /* Contour de focus : visible au clavier ; le script pose uvhm-souris sur au toucher ou à la souris (Safari iOS montre sinon le contour après un simple appui). */ .uvhm :focus-visible,.uvhm-menu :focus-visible{outline:2px solid var(--uvhm-bleu-fonce);outline-offset:2px;border-radius:2px} .uvhm-souris .uvhm :focus-visible,.uvhm-souris .uvhm-menu :focus-visible,.uvhm-menu .uvhm-panneau:focus{outline:none} /* Astra pose « outline: thin dotted » sur a:focus : retiré tant que le focus n'est pas clavier. */ .uvhm :focus:not(:focus-visible),.uvhm-menu :focus:not(:focus-visible){outline:none} /* Au-dessus du seuil : rien n'est affiché (sauf l'aperçu de l'éditeur Elementor). */ @media (min-width:1025px){ .uvhm:not(.uvhm--apercu),.uvhm-menu{display:none} body.uvhm-actif{padding-top:0} } @media (max-width:1024px){ /* La feuille réserve la place dès le rendu serveur : pas de saut de contenu. */ body.uvhm-actif{padding-top:calc(var(--uvhm-hauteur,159px) + env(safe-area-inset-top,0px))} .uvhm{position:fixed;top:0;left:0;right:0;z-index:var(--uvhm-z);width:100%;max-width:100vw;overflow-x:clip;background:#fff} /* 1. Bandeau utilitaire : couvre la zone de sécurité iOS (aucune bande blanche sous l'encoche). */ .uvhm-bandeau{display:flex;align-items:center;justify-content:space-between;gap:16px;height:calc(32px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 16px 0;background:var(--uvhm-bandeau);color:var(--uvhm-bandeau-texte);font-size:12.5px;line-height:1} .uvhm-bandeau__texte{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .uvhm .uvhm-bandeau__contact{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;font-weight:700;color:#fff;white-space:nowrap} .uvhm .uvhm-bandeau__contact:hover{color:#fff} /* 2. Barre principale : menu, logo centré, panier. */ .uvhm-barre{display:flex;align-items:center;justify-content:space-between;gap:8px;height:60px;padding:0 14px;border-bottom:1px solid var(--uvhm-filet-doux)} .uvhm .uvhm-burger,.uvhm-menu .uvhm-fermer,.uvhm .uvhm-panier{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;margin:0;padding:0;background:none;border:0;border-radius:var(--uvhm-rayon);color:var(--uvhm-texte);cursor:pointer;-webkit-tap-highlight-color:transparent} .uvhm .uvhm-logo,.uvhm-menu .uvhm-logo{display:flex;align-items:center;min-width:0;color:var(--uvhm-texte)} .uvhm .uvhm-logo__img{display:block;height:32px;width:auto;max-width:190px;max-height:32px;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;object-fit:contain} .uvhm .uvhm-logo__texte,.uvhm-menu .uvhm-logo__texte{font-weight:700;font-size:19px;letter-spacing:-.01em;color:var(--uvhm-texte);white-space:nowrap} .uvhm .uvhm-logo__img[hidden],.uvhm .uvhm-logo__texte[hidden],.uvhm-menu .uvhm-logo__img[hidden],.uvhm-menu .uvhm-logo__texte[hidden]{display:none} .uvhm .uvhm-panier{position:relative} .uvhm-panier__nb{position:absolute;top:4px;right:2px;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;background:var(--uvhm-bleu-fonce);border-radius:9px;font-weight:700;font-size:11px;line-height:1;color:#fff} .uvhm-panier__nb[hidden]{display:none} /* 3. Ligne de recherche : se replie au défilement (piste de grille 1fr → 0fr + opacité, 200 ms), quelle que soit la hauteur du champ (module ou FiboSearch). La place sous le header reste celle du header déployé : aucun saut de contenu. */ .uvhm-recherche-ligne{display:grid;grid-template-rows:1fr;padding:10px 14px 12px;border-bottom:1px solid var(--uvhm-filet-doux);overflow:hidden;transition:grid-template-rows .2s ease,padding .2s ease,opacity .16s ease} .uvhm-recherche-ligne>*{min-height:0} .uvhm--compact .uvhm-recherche-ligne{grid-template-rows:0fr;padding-top:0;padding-bottom:0;opacity:0;border-bottom-width:0;pointer-events:none} /* Champ du module. 16 px : sous cette taille, iOS zoome la page à la prise de focus. */ .uvhm .uvhm-recherche,.uvhm-menu .uvhm-recherche{position:relative;display:flex;align-items:center;gap:10px;height:44px;margin:0;padding:0 13px;background:var(--uvhm-fond);border:1px solid var(--uvhm-filet);border-radius:var(--uvhm-rayon);color:var(--uvhm-gris-clair)} .uvhm .uvhm-recherche--module:focus-within,.uvhm-menu .uvhm-recherche--module:focus-within{border-color:var(--uvhm-bleu);box-shadow:0 0 0 2px rgba(27,134,208,.15)} .uvhm .uvhm-recherche input[type=search],.uvhm-menu .uvhm-recherche input[type=search]{flex:1 1 auto;min-width:0;width:auto;height:42px;margin:0;padding:0;background:none;border:0;border-radius:0;outline:none;box-shadow:none;font:inherit;font-size:16px;line-height:42px;color:var(--uvhm-texte);-webkit-appearance:none;appearance:none} .uvhm .uvhm-recherche input[type=search]::-webkit-search-cancel-button,.uvhm .uvhm-recherche input[type=search]::-webkit-search-decoration, .uvhm-menu .uvhm-recherche input[type=search]::-webkit-search-cancel-button,.uvhm-menu .uvhm-recherche input[type=search]::-webkit-search-decoration{-webkit-appearance:none;display:none} .uvhm .uvhm-recherche input::placeholder,.uvhm-menu .uvhm-recherche input::placeholder{color:var(--uvhm-gris-clair);opacity:1;font-style:normal} .uvhm-recherche__loupe{color:var(--uvhm-gris-clair)} /* Champ rendu par FiboSearch : même boîte, loupe à gauche, croix de réinitialisation centrée à droite. */ .uvhm .uvhm-recherche--fibo,.uvhm-menu .uvhm-recherche--fibo{display:block;height:auto;padding:0;border:0;background:none;box-shadow:none} .uvhm-recherche--fibo .dgwt-wcas-search-wrapp{display:block;width:100%;min-width:0;max-width:none;margin:0;line-height:normal} .uvhm-recherche--fibo .dgwt-wcas-search-form{margin:0;padding:0} /* Le style « pirx » de FiboSearch entoure le champ de 10 px de blanc arrondi : retiré, c'est notre boîte qui fait le cadre. */ .uvhm-recherche--fibo .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp{position:relative;height:44px;margin:0;padding:0;width:100%;max-width:none;background:none;border-radius:0;box-shadow:none;overflow:visible} .uvhm-recherche--fibo .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input{display:block;width:100%;height:44px;margin:0;padding:0 44px 0 40px;background:var(--uvhm-fond);border:1px solid var(--uvhm-filet);border-radius:var(--uvhm-rayon);box-shadow:none;font-family:inherit;font-size:16px;line-height:1;color:var(--uvhm-texte)} .uvhm-recherche--fibo .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input:focus{border-color:var(--uvhm-bleu);box-shadow:0 0 0 2px rgba(27,134,208,.15)} .uvhm-recherche--fibo .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input::placeholder{color:var(--uvhm-gris-clair);font-style:normal;font-weight:400;opacity:1} /* Bouton de recherche FiboSearch (style « pirx », option « bouton » active) : il porte la loupe. FiboSearch le pose à 23 px / 21 px pour son propre cadre et le déplace à droite quand on tape ; ici il reste à gauche, centré, décoratif. Sélecteurs longs à dessein : ils doivent passer devant .dgwt-wcas-style-pirx.dgwt-wcas-search-filled … button. */ .uvhm-recherche--fibo .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit, .uvhm-recherche--fibo .dgwt-wcas-search-wrapp.dgwt-wcas-search-filled .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit{display:flex;align-items:center;justify-content:center;position:absolute;left:4px;right:auto;top:50%;bottom:auto;width:33px;height:33px;min-width:0;min-height:0;margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;text-shadow:none;transform:translateY(-50%);pointer-events:none;animation:none;opacity:1;color:var(--uvhm-gris-clair)} .uvhm-recherche--fibo .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit::before{display:none} .uvhm-recherche--fibo .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit svg,.uvhm-recherche--fibo .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit .dgwt-wcas-ico-magnifier{position:static;left:auto;right:auto;top:auto;bottom:auto;width:17px;height:17px;max-width:17px;max-height:17px;margin:0;transform:none;opacity:1} /* Quand on tape, FiboSearch resserre le rembourrage du champ : on garde le nôtre. */ .uvhm-recherche--fibo .dgwt-wcas-search-wrapp.dgwt-wcas-search-filled .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input{padding:0 44px 0 40px} /* Loupe : FiboSearch la positionne par rapport au conteneur du champ, avec des hauteurs en pourcentage prévues pour son propre rembourrage. On l'épingle au centre gauche du champ, qu'elle soit seule ou dans un conteneur .dgwt-wcas-search-icon. */ .uvhm-recherche--fibo .dgwt-wcas-sf-wrapp .dgwt-wcas-search-icon,.uvhm-recherche--fibo .dgwt-wcas-sf-wrapp .dgwt-wcas-ico-magnifier{position:absolute;left:14px;right:auto;top:50%;bottom:auto;width:17px;height:17px;max-width:17px;max-height:17px;margin:0;padding:0;transform:translateY(-50%);display:block;opacity:1;cursor:default;pointer-events:none} .uvhm-recherche--fibo .dgwt-wcas-search-icon .dgwt-wcas-ico-magnifier{position:static;top:auto;transform:none;width:17px;height:17px} .uvhm-recherche--fibo .dgwt-wcas-ico-magnifier path{fill:var(--uvhm-gris-clair)} /* Croix de réinitialisation, préchargeur et micro : à droite, centrés sur les 44 px (FiboSearch décale le préchargeur de 40 px quand la recherche vocale est disponible ; ici il reste au bord, le micro est masqué dès qu'on tape). */ .uvhm-recherche--fibo .dgwt-wcas-search-wrapp .dgwt-wcas-close,.uvhm-recherche--fibo .dgwt-wcas-search-wrapp .dgwt-wcas-preloader,.uvhm-recherche--fibo .dgwt-wcas-search-wrapp .dgwt-wcas-voice-search{position:absolute;right:0;left:auto;top:0;bottom:0;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;background-position:center} .uvhm-recherche--fibo .dgwt-wcas-close:not(.dgwt-wcas-inner-preloader){width:44px} .uvhm-recherche--fibo .dgwt-wcas-close svg{width:16px;height:16px} .uvhm-recherche--fibo .dgwt-wcas-close path{fill:var(--uvhm-gris-clair)} .uvhm-recherche--fibo .dgwt-wcas-voice-search-supported .dgwt-wcas-close{right:0} /* Panneau plein écran : voile, translation 8 px + opacité (220 ms), corps défilant, pied collant. Sans script : ouvert par :target (lien #uvhm-menu), fermé par le lien #uvhm-header. */ .uvhm-menu{position:fixed;inset:0;z-index:calc(var(--uvhm-z) + 1);display:none} .uvhm-menu:target,.uvhm-menu.uvhm-ouvert{display:block} .uvhm-menu__voile{position:absolute;inset:0;display:block;background:var(--uvhm-voile);opacity:0;transition:opacity .2s ease} .uvhm-panneau{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff;transform:translateY(-8px);opacity:0;transition:transform .22s ease,opacity .22s ease} .uvhm-menu:target .uvhm-menu__voile,.uvhm-menu.uvhm-visible .uvhm-menu__voile{opacity:1} .uvhm-menu:target .uvhm-panneau,.uvhm-menu.uvhm-visible .uvhm-panneau{transform:none;opacity:1} body.uvhm-verrou{overflow:hidden} .uvhm-panneau__tete{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;height:calc(60px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 10px 0 16px;border-bottom:1px solid var(--uvhm-filet-doux)} .uvhm-menu .uvhm-logo__img{display:block;height:30px;width:auto;max-width:180px;max-height:30px;margin:0;padding:0;border:0;box-shadow:none;background:none;object-fit:contain} .uvhm-panneau__corps{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:8px} .uvhm-panneau__recherche{margin:12px 16px 14px} /* Libellés de section : 11,5 px / 700 / .12em / majuscules. */ .uvhm-libelle{margin:0;padding:0 16px 6px;font-weight:700;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--uvhm-gris-clair)} .uvhm-libelle--univers{padding-top:18px} .uvhm-libelle--bloc{padding:0 0 10px} .uvhm-vide{padding:0 16px 12px;font-size:14px;color:var(--uvhm-gris)} /* Familles : titre 16,5 px / 600, 700 + liseré 3 px + fond quand la famille est ouverte. */ .uvhm-menu .uvhm-famille{display:block;border-bottom:1px solid var(--uvhm-filet-doux);color:var(--uvhm-texte)} .uvhm-menu .uvhm-famille__tete,.uvhm-menu .uvhm-famille--lien{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 16px;list-style:none;cursor:pointer;color:var(--uvhm-texte);-webkit-tap-highlight-color:transparent} .uvhm-famille__tete::-webkit-details-marker,.uvhm-famille__tete::marker{display:none;content:''} .uvhm-menu .uvhm-famille__titre{flex:1 1 auto;min-width:0;font-weight:600;font-size:16.5px;line-height:1.25;color:var(--uvhm-texte)} .uvhm-nb{flex:0 0 auto;font-size:12.5px;font-weight:500;color:var(--uvhm-gris-clair);font-variant-numeric:tabular-nums} .uvhm-famille__chevron{color:var(--uvhm-gris-clair);transition:transform .18s ease} .uvhm-famille__fleche{color:#C3CCD5} .uvhm-famille__corps{display:flex;flex-direction:column;background:var(--uvhm-fond-3);border-top:1px solid var(--uvhm-filet-leger)} .uvhm-menu .uvhm-famille__lien{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:0 16px 0 30px;font-size:15px;color:var(--uvhm-texte-2)} .uvhm-menu .uvhm-famille__lien:hover{color:var(--uvhm-texte)} .uvhm-menu .uvhm-famille__tout{display:flex;align-items:center;min-height:46px;padding:0 16px 0 30px;font-weight:700;font-size:14.5px;color:var(--uvhm-bleu-fonce)} .uvhm-menu .uvhm-famille__tout:hover{color:var(--uvhm-bleu)} details.uvhm-famille[open]{background:var(--uvhm-fond-2);box-shadow:inset 3px 0 0 var(--uvhm-bleu-fonce)} details.uvhm-famille[open] .uvhm-famille__titre{font-weight:700} details.uvhm-famille[open] .uvhm-famille__chevron{transform:rotate(180deg);color:var(--uvhm-bleu-fonce)} details.uvhm-famille[open] .uvhm-famille__corps{background:#fff} /* Accès rapide par classe : pastilles 36 px. */ .uvhm-bloc{padding:16px 16px 4px} .uvhm-pastilles{display:flex;flex-wrap:wrap;gap:8px} .uvhm-menu .uvhm-pastille{display:inline-flex;align-items:center;height:36px;padding:0 14px;background:#fff;border:1px solid var(--uvhm-filet);border-radius:var(--uvhm-rayon);font-weight:600;font-size:14px;color:var(--uvhm-texte)} .uvhm-menu .uvhm-pastille:hover{border-color:var(--uvhm-bleu);color:var(--uvhm-bleu)} .uvhm-menu .uvhm-pastille--extra{color:var(--uvhm-bleu-fonce)} /* Liens de pages : 50 px, filet léger. */ .uvhm-pages{display:flex;flex-direction:column;margin-top:16px;border-top:1px solid var(--uvhm-filet-doux)} .uvhm-menu .uvhm-pages__lien{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:0 16px;border-bottom:1px solid var(--uvhm-filet-leger);font-size:15.5px;color:var(--uvhm-texte-2)} .uvhm-menu .uvhm-pages__lien:hover{color:var(--uvhm-texte)} .uvhm-menu .uvhm-pages__meta,.uvhm-menu .uvhm-pages__info{flex:0 0 auto;font-weight:700;font-size:13.5px;color:var(--uvhm-bleu-fonce)} .uvhm-pages__meta:empty{display:none} /* Pied collant, compact : CTA devis + bouton contact sur une ligne de 46 px, note sur une ligne. */ .uvhm-panneau__pied{flex:0 0 auto;padding:10px 16px calc(8px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--uvhm-filet-doux);box-shadow:0 -6px 16px rgba(15,30,46,.05)} .uvhm-pied__ligne{display:flex;gap:8px} .uvhm-menu .uvhm-cta{flex:1 1 auto;display:flex;align-items:center;justify-content:center;height:46px;padding:0 16px;background:var(--uvhm-bleu-fonce);border:0;border-radius:var(--uvhm-rayon);font-weight:700;font-size:15px;color:#fff;text-align:center} .uvhm-menu .uvhm-cta:hover{background:#0B2942;color:#fff} .uvhm-menu .uvhm-pied__contact{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:52px;height:46px;border:1px solid #C7D2DC;border-radius:var(--uvhm-rayon);color:var(--uvhm-bleu-fonce)} .uvhm-pied__note{margin:6px 0 0;font-size:12.5px;line-height:1.3;color:var(--uvhm-gris-clair);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Très petits écrans (320 px) : le bandeau garde une ligne, le logo cède la place. */ @media (max-width:359.98px){ .uvhm-bandeau{padding-left:12px;padding-right:12px;font-size:12px} .uvhm-barre{padding:0 8px} .uvhm .uvhm-logo__img{max-width:150px} .uvhm-pastille{padding:0 12px} } } /* Aperçu dans l'éditeur Elementor : header en flux, largeur d'un téléphone, panneau masqué. */ .uvhm.uvhm--apercu{position:static;display:block;max-width:430px;margin:0 auto;border:1px solid #DDE3E9;border-radius:8px;overflow:hidden} .uvhm.uvhm--apercu .uvhm-bandeau{height:32px;padding-top:0} .uvhm.uvhm--apercu + .uvhm-menu,.uvhm--apercu ~ .uvhm-menu{display:none} .uvhm-note-editeur{max-width:430px;margin:0 auto 10px;padding:10px 12px;background:#FDF3F2;border:1px solid #F0CFCB;border-radius:4px;font-size:13px;line-height:1.4;color:#0F1E2E} @media (prefers-reduced-motion:reduce){ .uvhm *,.uvhm-menu *,.uvhm-menu__voile,.uvhm-panneau{transition:none !important} }