/* ═══════════════════════════════════════════════════════════════════════════ * style.css — Styles communs au site Taxi Balagne * ─────────────────────────────────────────────────────────────────────── * Design tokens, reset, typographie, layout primitives, composants * partagés (header sticky, footer, boutons, cartes). * ═══════════════════════════════════════════════════════════════════════════ */ /* ─── Polices Google Fonts (chargées dans le via ) ────────── * Inter (corps de texte), Newsreader Italic (accents éditoriaux), * Caveat (signatures manuscrites), JetBrains Mono (labels & nombres). * ─────────────────────────────────────────────────────────────────────── */ /* ─── Design tokens ──────────────────────────────────────────────────── */ :root { /* surfaces */ --surface: #ffffff; --surface-muted: #f7f8fa; --paper: #fbfaf7; /* crème chaud pour les sections narratives */ /* bordures */ --border: #eaecef; --border-warm: #c5bfa8; /* filets sur fond crème */ /* texte */ --text: #0f1218; --text-muted: #6b7280; /* couleurs primaires */ --primary: #000000; --primary-foreground: #ffffff; /* identité taxi (jaune) */ --taxi: #f2b01e; --taxi-soft: #fef5d7; --taxi-deep: #8b6b00; /* identité médical (bleu) */ --medical: #1e5f8c; --medical-soft: #bcd0dd; /* santé / territoire (vert maquis) */ --health: #3d7a4f; /* dimensions */ --header-h: 64px; --container-max: 1180px; --container-pad: 56px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px; /* ombres */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08); /* transitions */ --t-fast: 150ms; --t-med: 250ms; --ease: cubic-bezier(0.2, 0.7, 0.3, 1); } /* ─── Reset ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--surface); color: var(--text); font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; height: auto; } button { font: inherit; cursor: pointer; } /* ─── Helpers ─────────────────────────────────────────────────────────── */ .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; } .tabular { font-variant-numeric: tabular-nums; } .italic { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 500; } .caveat { font-family: 'Caveat', cursive; } .eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); } .eyebrow--taxi { color: var(--taxi-deep); } .eyebrow--medical { color: var(--medical); } .eyebrow--health { color: var(--health); } /* Container layout */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); } @media (max-width: 768px) { :root { --container-pad: 20px; --header-h: 56px; } } /* Barre jaune signature (h-1 w-16) */ .taxi-bar { display: inline-block; height: 4px; width: 48px; background: var(--taxi); border-radius: 999px; } /* Filet horizontal sur fond crème */ .divider { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; } .divider::after { content: ''; flex: 1; height: 1px; background: var(--border-warm); } .divider::before { content: ''; flex: 0 0 0; height: 1px; background: var(--border-warm); } /* ─── Header sticky ───────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.95); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--t-med) var(--ease), background var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); } .site-header.is-scrolled { background: rgba(255, 255, 255, 0.98); border-bottom-color: var(--border); box-shadow: var(--shadow-sm); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); } .brand { display: flex; align-items: baseline; gap: 12px; color: var(--text); } .brand__name { font-size: 22px; font-weight: 800; letter-spacing: -0.025em; line-height: 1; } .brand__tagline { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; } .main-nav { display: flex; gap: 28px; font-size: 14px; } .main-nav a { color: var(--text-muted); font-weight: 500; padding-bottom: 4px; border-bottom: 2px solid transparent; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .main-nav a:hover { color: var(--text); } .main-nav a[aria-current="page"] { color: var(--text); font-weight: 600; } /* Filet sous l'onglet actif — couleur définie par-page via attribut data */ .main-nav a[aria-current="page"][data-accent="taxi"] { border-bottom-color: var(--taxi); } .main-nav a[aria-current="page"][data-accent="medical"] { border-bottom-color: var(--medical); } .main-nav a[aria-current="page"][data-accent="health"] { border-bottom-color: var(--health); } .main-nav a[aria-current="page"][data-accent="neutral"] { border-bottom-color: var(--text); } .header-cta { display: flex; align-items: center; gap: 16px; } .header-cta__tel { font-size: 14px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Icône téléphone — visible uniquement sur mobile (remplace le n° texte) */ .header-cta__tel-icon { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); flex-shrink: 0; transition: background var(--t-fast) var(--ease); } .header-cta__tel-icon:hover { background: var(--surface-muted); } /* Bouton burger — visible uniquement sur mobile */ .header-burger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 0; flex-shrink: 0; transition: background var(--t-fast) var(--ease); } .header-burger:hover { background: var(--surface-muted); } @media (max-width: 1000px) { .header-cta { gap: 8px; } .header-cta__tel { display: none; } .header-cta__tel-icon { display: inline-flex; } .header-burger { display: inline-flex; } .main-nav { display: none; } /* remplacé par menu burger */ .brand__tagline { display: none; } } @media (max-width: 380px) { .header-cta { gap: 6px; } } /* ─── Bouton réserver ─────────────────────────────────────────────────── */ .btn-reserver { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 22px; background: var(--primary); color: var(--primary-foreground); font-size: 15px; font-weight: 600; letter-spacing: -0.005em; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); white-space: nowrap; } .btn-reserver:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } /* Version compacte sur mobile (sans flèche, padding réduit) */ @media (max-width: 1000px) { .btn-reserver { height: 40px; padding: 0 14px; font-size: 14px; gap: 0; } } @media (max-width: 380px) { .btn-reserver { padding: 0 12px; font-size: 13px; } } /* ─── Menu mobile (drawer) — style éditorial ──────────────────────────── */ .mobile-menu { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; } .mobile-menu.is-open { visibility: visible; pointer-events: auto; } .mobile-menu__backdrop { position: absolute; inset: 0; background: rgba(15, 18, 24, 0.45); opacity: 0; transition: opacity 220ms var(--ease); } .mobile-menu.is-open .mobile-menu__backdrop { opacity: 1; } .mobile-menu__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); background: var(--paper); box-shadow: -20px 0 60px rgba(0, 0, 0, 0.14); transform: translateX(100%); transition: transform 280ms var(--ease); display: flex; flex-direction: column; overflow-y: auto; } .mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); } .mobile-menu__header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 18px; border-bottom: 1px solid var(--border-warm); background: var(--surface); flex-shrink: 0; } .mobile-menu__header-left { display: flex; align-items: center; gap: 12px; } .mobile-menu__eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.16em; } .mobile-menu__close { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border-warm); border-radius: var(--radius-sm); color: var(--text); padding: 0; transition: background var(--t-fast) var(--ease); } .mobile-menu__close:hover { background: rgba(197, 191, 168, 0.18); } .mobile-menu__nav { display: flex; flex-direction: column; padding: 4px 0 0; } .mobile-menu__nav a { display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: center; padding: 18px 24px; font-size: 17px; color: var(--text); font-weight: 500; letter-spacing: -0.005em; border-bottom: 1px dashed var(--border-warm); transition: background var(--t-fast) var(--ease); } .mobile-menu__nav a:last-child { border-bottom: none; } .mobile-menu__nav a:hover { background: rgba(197, 191, 168, 0.14); } .mobile-menu__nav-num { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.1em; } /* Active : label en Newsreader italique, num en couleur d'accent */ .mobile-menu__nav a[aria-current="page"] .mobile-menu__nav-label { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 500; font-size: 22px; letter-spacing: -0.01em; line-height: 1; } .mobile-menu__nav a[aria-current="page"][data-accent="taxi"] .mobile-menu__nav-num { color: var(--taxi-deep); } .mobile-menu__nav a[aria-current="page"][data-accent="medical"] .mobile-menu__nav-num { color: var(--medical); } .mobile-menu__nav a[aria-current="page"][data-accent="health"] .mobile-menu__nav-num { color: var(--health); } .mobile-menu__nav a[aria-current="page"][data-accent="neutral"] .mobile-menu__nav-num { color: var(--text); } .mobile-menu__nav a[aria-current="page"] .mobile-menu__nav-num { color: var(--taxi-deep); } .mobile-menu__nav .chev { color: var(--text-muted); flex-shrink: 0; opacity: 0.5; } .mobile-menu__footer { margin-top: auto; padding: 32px 24px 32px; border-top: 1px solid var(--border-warm); background: var(--surface); flex-shrink: 0; text-align: center; } .mobile-menu__footer-head { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 500; font-size: 28px; letter-spacing: -0.02em; color: var(--text); margin: 0; line-height: 1.1; } .mobile-menu__footer-caveat { font-family: 'Caveat', cursive; font-size: 22px; color: var(--taxi-deep); margin-top: 4px; line-height: 1; } .mobile-menu__footer-tel-block { display: block; margin-top: 22px; color: inherit; text-align: center; } .mobile-menu__footer-tel-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; display: block; margin-bottom: 6px; } .mobile-menu__footer-tel { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); letter-spacing: -0.01em; display: block; line-height: 1; } .mobile-menu__reserve { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 48px; padding: 0 20px; background: var(--primary); color: var(--primary-foreground); font-size: 15px; font-weight: 600; letter-spacing: -0.005em; border-radius: var(--radius-sm); margin-top: 18px; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .mobile-menu__reserve:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } body.menu-open { overflow: hidden; } /* ─── Fil d'Ariane (← Accueil) ──────────────────────────────────────── */ .breadcrumb { padding: 20px 0 0; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; } .breadcrumb__back { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-weight: 600; transition: color var(--t-fast) var(--ease); } .breadcrumb__back:hover { color: var(--text); } .breadcrumb__back svg { transition: transform var(--t-fast) var(--ease); } .breadcrumb__back:hover svg { transform: translateX(-2px); } /* ─── Eyebrow row + ornement (motif —·••·—) ──────────────────────────── */ .eyebrow-row { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; } .ornament { display: inline-flex; align-items: center; gap: 8px; } .ornament__line { width: 28px; height: 1px; background: var(--border-warm); } .ornament__dot { width: 4px; height: 4px; background: var(--border-warm); border-radius: 999px; } /* Variante compacte : trait plus court (pages intérieures) */ .ornament--compact .ornament__line { width: 20px; } /* Bouton primaire pleine largeur (CTA final) */ .btn-form { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px; padding: 0 32px; background: var(--primary); color: var(--primary-foreground); font-size: 16px; font-weight: 600; border-radius: var(--radius-sm); border: none; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .btn-form:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } /* Bouton secondaire bordé */ .btn-outline { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 24px; border: 1.5px solid var(--text); color: var(--text); font-size: 16px; font-weight: 600; border-radius: var(--radius-sm); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .btn-outline:hover { background: var(--text); color: var(--surface); } /* ─── Footer ──────────────────────────────────────────────────────────── */ .site-footer { background: var(--text); color: #cfd2d7; padding: 56px var(--container-pad) 40px; margin-top: 0; } .site-footer__grid { max-width: var(--container-max); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 56px; } @media (max-width: 768px) { .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } } .site-footer__brand-name { font-size: 22px; font-weight: 800; color: #ffffff; letter-spacing: -0.02em; } .site-footer__brand-sub { font-size: 11px; color: #cfd2d7; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; } .site-footer__col-title { font-size: 11px; font-weight: 600; color: #ffffff; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 14px; } .site-footer a { display: block; font-size: 13px; color: #cfd2d7; padding: 5px 0; white-space: nowrap; transition: color var(--t-fast) var(--ease); } .site-footer a:hover { color: #ffffff; } .site-footer__legal { font-size: 13px; color: #a8acb3; line-height: 1.6; } /* ─── Sections (alternance de fonds) ──────────────────────────────────── */ .sec { padding: 72px 0; } .sec--white { background: var(--surface); } .sec--muted { background: var(--surface-muted); } .sec--paper { background: var(--paper); } .sec--marine { background: #1a2530; color: #f4f5f7; } .sec--taxi { background: var(--taxi-soft); border-top: 1px solid #e8d490; } .sec--medical { background: var(--surface); border-top: 4px solid var(--medical); } /* ─── Cards ───────────────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px 22px; box-shadow: var(--shadow-sm); } .card--lg { border-radius: var(--radius-lg); padding: 24px 28px; } /* .card--filet-top : ancien filet coloré en haut des cartes — neutralisé pour conserver une bordure 1px uniforme sur tout le site. */ .card--filet-top { border-top-width: 1px; } .card--filet-top.card--medical, .card--filet-top.card--taxi, .card--filet-top.card--health { border-top-color: var(--border); } /* ─── Pills / badges ──────────────────────────────────────────────────── */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--text); } .pill--medical { background: var(--surface); border-color: var(--medical); color: var(--medical); } .pill--taxi { background: var(--taxi-soft); border-color: transparent; color: var(--taxi-deep); } .pill--health-filled { background: var(--health); border-color: var(--health); color: #ffffff; font-weight: 700; } /* ─── Skip-to-content (a11y) ──────────────────────────────────────────── */ .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 16px; top: 16px; z-index: 200; padding: 8px 14px; background: var(--text); color: var(--surface); border-radius: var(--radius-sm); } /* ─── Stationnement / station cards (partagé entre ou-je-vous-emmene et contact) ─── */ .stat-grid { display: grid; gap: 20px; margin-top: 12px; } @media (min-width: 700px) { .stat-grid { grid-template-columns: 1fr 1fr; gap: 28px; } } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 26px 26px 22px; box-shadow: var(--shadow-sm); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .stat-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: var(--taxi-soft); color: var(--taxi-deep); margin-bottom: 16px; } .stat-card__label { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; margin-bottom: 8px; } .stat-card__title { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 8px; } .stat-card__contexte { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin: 0; } @media (max-width: 600px) { .stat-card { padding: 22px 20px 20px; } .stat-card__icon { width: 38px; height: 38px; margin-bottom: 14px; } .stat-card__title { font-size: 19px; } }