/* * GoLoisir — Design system du site public. * Écrit à la main (pas de Tailwind ici) : le site public doit être rapide * et indexable, un CDN de plusieurs Mo non purgé serait contre-productif. * Cf. backend/docs/site-public.md pour les décisions de design. */ :root { /* Le thème clair reste la base. Le sombre n'est activé que lorsque le navigateur ou le système annonce explicitement cette préférence. */ color-scheme: light; /* --- Couleurs de marque (imposées) --- */ --navy: #10245E; --navy-700: #1a3373; --turquoise: #16B8B4; --turquoise-600: #129e9b; --coral: #FF5A55; --yellow: #FFBD27; /* Couleur des titres : var(--navy) en clair (identité de marque), une teinte plus claire en sombre pour rester lisible — le bleu marine plein sur fond sombre tombe sous 2:1 de contraste, corrigé ici (WCAG 2.1 AA). */ --heading: var(--navy); /* --- Neutres --- */ --bg: #FFFFFF; --bg-tint: #F6F8FC; --bg-tint-2: #EEF2FA; --ink: #14172B; --ink-soft: #4B5170; --ink-faint: #7B8098; --border: #E3E7F1; --white: #FFFFFF; /* --- États sémantiques --- */ --success: #1B8A5A; --focus-ring: #16B8B4; /* --- Typographie --- */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.375rem; --fs-xl: 1.75rem; --fs-2xl: 2.25rem; --fs-3xl: 2.75rem; /* --- Échelle d'espacement (base 4px) --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* --- Rayons --- */ --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px; /* --- Ombres légères --- */ --shadow-sm: 0 1px 2px rgba(16, 36, 94, 0.06); --shadow-md: 0 4px 16px rgba(16, 36, 94, 0.08); --shadow-lg: 0 12px 32px rgba(16, 36, 94, 0.12); --container-max: 1240px; } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --bg: #0F1224; --bg-tint: #171B33; --bg-tint-2: #1E2340; --ink: #F2F4FA; --ink-soft: #C3C8DE; --ink-faint: #8E93AE; --border: #2B3055; --white: #171B33; --heading: #9FB6FF; } } /* --- Reset minimal --- */ *, *::before, *::after { box-sizing: border-box; } /* Le footer est toujours la dernière section (fond navy). Sur mobile, quand la barre d'adresse se rétracte pendant le scroll, le navigateur agrandit temporairement la zone visible au-delà du contenu réel : sans fond propre sur , cette zone hérite du fond de (blanc / très sombre selon le thème) et casse la continuité visuelle avec le footer. On aligne sur le navy du footer pour que ce dépassement reste cohérent quel que soit le thème — cf. retour utilisateur du 10/08/2026 (espace blanc visible sous le footer en version mobile). */ html { background: var(--navy); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); color: var(--ink); background: var(--bg); line-height: 1.5; overflow-x: clip; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 800; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } /* Focus visible partout — accessibilité clavier (WCAG 2.1 AA) */ :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-sm); } .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--sp-4); } @media (min-width: 768px) { .container { padding-inline: var(--sp-8); } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--sp-4); top: -50px; background: var(--navy); color: #fff; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); z-index: 100; transition: top .15s ease; } .skip-link:focus { top: var(--sp-4); } /* ============================= Boutons ============================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-weight: 700; font-size: var(--fs-sm); line-height: 1; padding: 13px 22px; border-radius: var(--r-pill); border: 2px solid transparent; min-height: 44px; transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease; } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--coral); color: #fff; } .btn-primary:hover { background: #e8493f; } .btn-secondary { background: var(--navy); color: #fff; } .btn-secondary:hover { background: var(--navy-700); } .btn-outline { background: transparent; color: var(--heading); border-color: var(--border); } .btn-outline:hover { border-color: var(--navy); } .btn-ghost { background: transparent; color: var(--ink-soft); } .btn-ghost:hover { color: var(--ink); background: var(--bg-tint); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn-block { width: 100%; } .btn-sm { padding: 9px 16px; font-size: var(--fs-xs); min-height: 36px; } /* ============================= Badges / Chips ============================= */ .badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); background: var(--bg-tint-2); color: var(--heading); } .badge-free { background: rgba(22,184,180,.14); color: var(--turquoise-600); } .badge-coral { background: rgba(255,90,85,.12); color: #d94641; } .badge-yellow { background: rgba(255,189,39,.18); color: #8a5c05; } /* Mises en avant sponsorisées : jamais dépendant de la seule couleur (brief §8 accessibilité) — icône + texte, contraste AA sur fond clair comme sombre. */ .badge-sponsored { background: #17357a; color: #fff; } .badge-sponsored svg { flex: none; } /* Transparence IA (brief obligations transparence) — violet volontairement distinct du turquoise (Gratuit), du jaune (Coup de cœur) et du navy plein (Sponsorisé) pour ne jamais être confondu avec eux, tout en gardant un contraste AA sur fond clair comme sombre (texte blanc sur #4C3B8C ≈ 6.3:1). */ .badge-ai { background: #4C3B8C; color: #fff; } .badge-ai svg { flex: none; } .sponsored-section { margin: var(--sp-8) 0; } .sponsored-section__head { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-4); } .sponsored-section__head h2 { margin: 0; } .sponsored-section__tooltip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--bg-tint-2); color: var(--ink-soft); font-size: 11px; font-weight: 700; cursor: help; } .sponsored-section__tooltip:hover .sponsored-section__tooltip-text, .sponsored-section__tooltip:focus-visible .sponsored-section__tooltip-text { display: block; } .sponsored-section__tooltip-text { display: none; position: absolute; z-index: 5; bottom: 130%; left: 50%; transform: translateX(-50%); width: 240px; padding: 10px 12px; border-radius: var(--r-md); background: var(--navy-900); color: #fff; font-size: var(--fs-xs); font-weight: 400; line-height: 1.4; text-align: left; } .chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 10px 16px; border-radius: var(--r-pill); border: 1.5px solid var(--border); background: var(--white); color: var(--ink); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; min-height: 44px; } .chip:hover { border-color: var(--turquoise); } .chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; } /* ============================= Header ============================= */ .site-header { border-bottom: 1px solid var(--border); background: var(--white); position: sticky; top: 0; z-index: 40; } .site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-3); } .site-header__logo img { height: 34px; width: auto; } .site-header__nav { display: none; align-items: center; gap: var(--sp-6); } .site-header__nav a { font-weight: 600; font-size: var(--fs-sm); color: var(--ink-soft); } .site-header__nav a:hover, .site-header__nav a[aria-current="page"] { color: var(--heading); } /* Contrôle de localisation du bandeau (29/08/2026, "comme sur iOS/Android") — pastille avec pin + libellé, même esprit que le bouton de localisation natif des apps (barre du haut de l'accueil). */ .site-header__location { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--r-pill); color: var(--heading); font-weight: 700; font-size: var(--fs-sm); background: var(--bg-tint); max-width: 220px; } .site-header__location svg { flex: 0 0 auto; color: var(--turquoise-600); } .site-header__location span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .site-header__location:hover { border-color: rgba(22, 184, 180, .55); background: var(--bg-tint-2); } .site-header__actions { display: flex; align-items: center; gap: var(--sp-2); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-pill); color: var(--ink-soft); border: 1px solid transparent; position: relative; } .icon-btn:hover { background: var(--bg-tint); color: var(--heading); } .icon-btn .count { position: absolute; top: 2px; right: 2px; background: var(--coral); color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding-inline: 3px; } /* Badge de profil connecté (demande du 28/08/2026) : initiales dans un cercle plein plutôt que la silhouette générique, pour que le header confirme d'un coup d'œil "vous êtes connecté(e)" sans avoir à cliquer — même logique de couleur que .btn-secondary (navy plein, texte blanc). */ .site-header__avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .01em; } .icon-btn--avatar:hover .site-header__avatar { background: var(--navy-700); } .hamburger { display: inline-flex; } @media (min-width: 900px) { .site-header__nav { display: flex; } .hamburger { display: none; } } /* Menu mobile plein écran */ .mobile-nav { display: none; } .mobile-nav.is-open { display: block; position: fixed; inset: 0; background: var(--bg); z-index: 60; padding: var(--sp-4); overflow-y: auto; } .mobile-nav__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-6); } .mobile-nav a { display: block; padding: var(--sp-4) 0; font-size: var(--fs-md); font-weight: 700; border-bottom: 1px solid var(--border); color: var(--ink); } /* 2e déclencheur de la popup de localisation (30/08/2026, "ne s'affiche pas sur web taille mobile") — même look que les liens .mobile-nav a ci-dessus, en