/* ============================================================================ Réseaux VITALIS — Styles communs à toutes les pages Chargé dans le des 28 pages. Ce qui est propre à une seule page (animations @keyframes, composants uniques) reste dans le de la page. 1. Base 2. Barre du haut, en-tête et menus 3. Accessibilité 4. Finitions et micro-interactions 5. Responsive Important : le runtime DC rend les pages avec React, qui RÉÉCRIT les attributs style (« grid-template-columns:repeat(4,1fr) » devient « grid-template-columns: repeat(4, 1fr); », #1B1740 devient rgb(27, 23, 64)…). Un sélecteur [style*="…"] doit donc viser cette forme normalisée ; on lui préfère les attributs data-* posés sur les blocs, qui eux ne changent pas. ============================================================================ */ /* ============================================================================ 1. Base ============================================================================ */ *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:96px} [id]{scroll-margin-top:96px} body{margin:0;background:#F4F6FB;color:#171436;font-family:'Manrope',system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden} /* clip (et non hidden) : coupe les débordements sans créer de conteneur de défilement, l'en-tête sticky continue donc de fonctionner */ @supports (overflow:clip){html,body{overflow-x:clip}} ::selection{background:#0088CC;color:#fff} img{max-width:100%} input,select,textarea{min-width:0;max-width:100%} @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} html{scroll-behavior:auto!important} } /* ============================================================================ 2. Barre du haut, en-tête et menus ============================================================================ */ /* Barre du haut (téléphone, e-mail, SAV) = le bloc placé juste avant
*/ div:has(+ header) a,div:has(+ header) span{white-space:nowrap} div:has(+ header) a{transition:color .18s ease} div:has(+ header) a:hover{color:#fff!important} /* Liens du menu */ header nav>a,header nav>div>button,header>div>div:last-child>a{white-space:nowrap} header nav>a,header nav [data-svc-wrap]>button,header nav [data-sol-wrap]>button{text-transform:uppercase;letter-spacing:.04em;transition:background-color .18s ease,color .18s ease} header nav>a:hover,header nav [data-svc-wrap]>button:hover,header nav [data-sol-wrap]>button:hover{background-color:#EEF3FA} /* Sous-menus « Nos services » / « Solutions » : ouverture au survol en CSS (fiable, survit au re-render du runtime) ; clavier et tactile : rv-ui.js */ [data-svc-wrap]:hover [data-svc-panel],[data-sol-wrap]:hover [data-sol-panel]{opacity:1!important;visibility:visible!important;transform:translateY(0)!important} [data-svc-panel]::before,[data-sol-panel]::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px} [data-svc-panel] a,[data-sol-panel] a{transition:color .18s ease} [data-svc-panel] a:hover,[data-sol-panel] a:hover{color:#0088CC!important} [data-svc-wrap]>button svg,[data-sol-wrap]>button svg{transition:transform .22s ease} [data-svc-wrap]>button[aria-expanded="true"] svg,[data-sol-wrap]>button[aria-expanded="true"] svg{transform:rotate(180deg)} /* Menu complet (ordinateur) : centré entre le logo et le bouton d'action */ @media (min-width:1025px){ header nav{flex:1 1 auto!important;justify-content:center!important;margin-left:0!important} header nav>a,header nav [data-svc-wrap]>button,header nav [data-sol-wrap]>button{font-size:13px!important;font-weight:700!important} } @media (min-width:1025px) and (max-width:1200px){ header nav{gap:2px!important} header nav>a,header nav>div>button{padding-left:10px!important;padding-right:10px!important} } @media (max-width:1280px){ /* « Solutions » ancré à droite pour ne pas sortir de l'écran */ [data-sol-panel]{left:auto!important;right:0!important} } @media (max-width:1200px){ /* deux boutons d'action dans l'en-tête (ex. Internet) : on garde le principal */ header>div>div:last-child:has(>[data-hov-cta])>[data-hov-ghost]{display:none!important} } /* Menu mobile (bouton créé par rv-ui.js) : le menu complet demande ~975 px */ .rv-burger{display:none} @keyframes rv-navopen{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} @media (max-width:1024px){ header>div{gap:14px!important} .rv-burger{display:inline-flex;align-items:center;justify-content:center;order:10;width:44px;height:44px;padding:0;border:1px solid #E3E8F2;border-radius:11px;background:#fff;cursor:pointer;flex-shrink:0} header nav{display:none!important} header nav.rv-open{ display:flex!important;position:absolute;top:100%;left:0;right:0;z-index:80;height:auto; /* !important : le style en ligne du