/* ============================================================ MediTravel Solutions — Front v3 Direction artistique : bleu médical clair + accent orange. Polices : Barlow (titres) · Source Sans 3 (corps) · Barlow Condensed (chiffres) ============================================================ */ :root { --v3-navy: #0B3C6B; --v3-navy-deep: #082744; --v3-blue: #1272C4; --v3-blue-mid: #11538F; --v3-blue-link: #0E5AA0; --v3-orange: #F0700F; /* orange plus vif et contrasté (texte blanc lisible) */ --v3-orange-hi: #FF8A29; /* highlight dégradé */ --v3-orange-deep: #D85E06; /* survol */ --v3-orange-soft: #FFC08A; /* accents sur fond foncé, plus lumineux */ --v3-orange-pale: #FFF1E4; --v3-orange-ink: #B85305; --v3-bg: #F5F8FB; --v3-panel: #EAF2FB; --v3-ink: #12263A; --v3-ink-soft: #56697C; --v3-muted: #7D8FA1; --v3-line: #E7EDF4; --v3-line-2: #D6E3EF; --v3-shell: 1280px; /* Couleurs de lien/texte sur fond FONCÉ (footer, panneaux CTA, hero) */ --v3-on-dark: #C4D6E8; /* texte courant clair */ --v3-on-dark-strong: #FFFFFF; /* titres */ --v3-on-dark-link: #CBDDEE; /* liens */ --v3-on-dark-muted: #8FA6BC; /* texte secondaire */ /* Ombres cohérentes (élévation) */ --v3-sh-1: 0 2px 10px rgba(11,60,107,.06); --v3-sh-2: 0 8px 26px rgba(11,60,107,.09); --v3-sh-3: 0 20px 46px rgba(11,60,107,.14); --v3-sans: 'Source Sans 3', system-ui, sans-serif; --v3-title: 'Barlow', sans-serif; --v3-cond: 'Barlow Condensed', sans-serif; } * { box-sizing: border-box; } body.v3 { margin: 0; background: var(--v3-bg); color: var(--v3-ink); font-family: var(--v3-sans); -webkit-font-smoothing: antialiased; /* Garde-fou débordement horizontal (défense en profondeur). En RTL, tout élément hors-champ positionné par un « left » physique négatif (ex. ancien honeypot « left:-9999px ») gonflait la largeur de défilement et décalait toute la page → page blanche sur mobile. Le clip sur AVEC « position:relative » établit le bloc conteneur et confine ce débordement ; les champs masqués utilisent désormais la technique « clip:rect(0,0,0,0) » sans empreinte de mise en page (voir formulaires). */ position: relative; overflow-x: hidden; overflow-x: clip; } body.v3 a { color: var(--v3-blue-link); text-decoration: none; transition: color .2s; } body.v3 a:hover { color: var(--v3-orange); } /* Lien d'action « En savoir plus → » — visible, avec flèche orange animée */ .v3-more { display: inline-flex; align-items: center; gap: 6px; font-family: var(--v3-title); font-weight: 700; font-size: 14.5px; color: var(--v3-orange-ink); } .v3-more::after { content: "→"; color: var(--v3-orange); transition: transform .2s ease; } .v3-more:hover { color: var(--v3-orange-deep); } .v3-more:hover::after { transform: translateX(4px); } @keyframes v3In { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .v3-shell { max-width: var(--v3-shell); margin: 0 auto; padding-left: 24px; padding-right: 24px; } /* ---- Skip link ---- */ .v3-skip { position: absolute; inset-inline-start: -999px; top: 0; background: #fff; color: var(--v3-navy); padding: 10px 16px; z-index: 200; } .v3-skip:focus { inset-inline-start: 8px; top: 8px; } /* ---- Topbar ---- */ .v3-topbar { background: var(--v3-navy); color: #CFE2F5; font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: center; padding: 9px 24px; } .v3-topbar .sep { color: var(--v3-orange); } /* ---- Header ---- */ .v3-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.95); backdrop-filter: blur(12px); box-shadow: 0 2px 14px rgba(11,60,107,.08); } .v3-header-in { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding-top: 14px; padding-bottom: 14px; } .v3-logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; } .v3-logo-mark { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(140deg, var(--v3-blue), var(--v3-navy)); color: #fff; display: grid; place-items: center; font-family: var(--v3-cond); font-weight: 700; font-size: 22px; } .v3-logo-img { height: 46px; width: auto; display: block; } .v3-logo-txt { display: flex; flex-direction: column; line-height: 1.12; } .v3-logo-name { font-family: var(--v3-title); font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--v3-navy); } .v3-logo-sub { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--v3-muted); } .v3-nav { margin-left: auto; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; } .v3-nav a { padding: 10px 13px; border-radius: 8px; font-size: 15px; font-weight: 600; color: var(--v3-ink); } .v3-nav a:hover, .v3-nav a.is-active { background: var(--v3-panel); color: var(--v3-blue-link); } .v3-header-actions { display: flex; align-items: center; gap: 10px; } .v3-lang { display: flex; gap: 2px; background: var(--v3-panel); border-radius: 8px; padding: 3px; } .v3-lang a { font-family: var(--v3-title); font-size: 13px; font-weight: 700; padding: 8px 11px; border-radius: 6px; border: none; cursor: pointer; background: transparent; color: var(--v3-ink-soft); line-height: 1; } .v3-lang a.on { background: var(--v3-blue); color: #fff; } /* ---- Boutons ---- Les couleurs de texte sont préfixées par body.v3 pour battre en spécificité la règle globale « body.v3 a » (sinon les boutons héritent du bleu). */ .v3-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--v3-title); font-weight: 700; border-radius: 8px; border: none; cursor: pointer; text-align: center; transition: .2s; white-space: nowrap; } .v3-btn:active { transform: translateY(1px); } .v3-btn:focus-visible { outline: 3px solid rgba(240,112,15,.55); outline-offset: 2px; } body.v3 .v3-btn-orange { background: linear-gradient(135deg, var(--v3-orange-hi), var(--v3-orange)); color: #fff; padding: 14px 24px; font-size: 15px; box-shadow: 0 8px 18px rgba(216,94,6,.32); } body.v3 .v3-btn-orange:hover { background: linear-gradient(135deg, var(--v3-orange), var(--v3-orange-deep)); color: #fff; box-shadow: 0 12px 26px rgba(216,94,6,.42); transform: translateY(-2px); } .v3-btn-lg { padding: 17px 30px; font-size: 16px; } body.v3 .v3-btn-navy { background: var(--v3-navy); color: #fff; padding: 16px 28px; font-size: 15.5px; } body.v3 .v3-btn-navy:hover { background: var(--v3-orange); color: #fff; transform: translateY(-2px); } body.v3 .v3-btn-ghost { border: 1.5px solid rgba(255,255,255,.55); color: #fff; padding: 17px 30px; font-size: 16px; background: none; } body.v3 .v3-btn-ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; } body.v3 .v3-btn-line { border: 1.5px solid var(--v3-line-2); color: var(--v3-navy); padding: 14px 24px; font-size: 15px; background: none; } body.v3 .v3-btn-line:hover { border-color: var(--v3-blue); color: var(--v3-blue-link); background: var(--v3-panel); } /* Le bouton soumission de formulaire est un