/* ============================================================ La Checklist, design system, monochrome ============================================================ */ :root { /* Niveaux de gris, du blanc au noir */ --bg: #ffffff; --surface: #ffffff; --surface-alt: #fafafa; --text: #0a0a0a; --text-soft: #525252; --text-muted: #a3a3a3; --ink: #0a0a0a; /* accent = noir */ --ink-hover: #404040; --border: #ececec; --border-strong: #dcdcdc; --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.04); --shadow-md: 0 4px 14px rgba(10, 10, 10, 0.06); --shadow-lg: 0 24px 48px -16px rgba(10, 10, 10, 0.20); --radius: 16px; --radius-sm: 8px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --pad: clamp(16px, 6vw, 72px); --maxw: 1120px; /* Échelle d'espacement : base 4px, toutes les valeurs sont paires. On l'utilise partout (marges, paddings, gaps) pour un rythme cohérent. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; font-size: 100%; /* Garde-fou : jamais de défilement horizontal sur mobile. Sur (pas ) pour ne pas casser la toolbar sticky. */ overflow-x: hidden; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 0.9375rem; /* 15px */ line-height: 1.6; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Footer collé en bas : la colonne occupe au moins toute la hauteur, le contenu principal s'étire et pousse le footer tout en bas. */ min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } /* Le contenu principal prend l'espace disponible pour repousser le footer. */ body > main { flex: 1 0 auto; } /* Contenu principal : colonne centrée et lisible */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } /* Footer : contenu pleine largeur, bord à bord */ .footer-inner { width: 100%; padding-inline: var(--pad); } /* ============================================================ Barre d'outils (remplace la navbar : mode outil) Boutons de navigation à gauche/droite, le titre de la page se réduit dans la barre au scroll pour laisser place à l'usage. Générée par le JS (buildToolbar) à partir de PAGES. ============================================================ */ .toolbar { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); } .toolbar-inner { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); min-height: 52px; display: flex; align-items: center; gap: var(--sp-3); } /* Logo (footer) */ .logo { font-size: 0.8125rem; font-weight: 700; text-decoration: none; color: var(--text); letter-spacing: 0.08em; transition: opacity 0.2s var(--ease); } .logo:hover { opacity: 0.6; } .logo span { color: var(--text-muted); } /* Boutons de navigation (pilule) */ .tb-btn { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; color: var(--text-soft); background: var(--surface); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-strong); border-radius: 999px; cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); } .tb-btn:hover { color: var(--bg); background: var(--ink); border-color: var(--ink); } .tb-btn svg { width: 16px; height: 16px; flex-shrink: 0; } /* Titre + mini-progression : masqués tant qu'on n'a pas scrollé */ .tb-status { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-3); opacity: 0; transform: translateY(2px); pointer-events: none; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); } .toolbar.is-scrolled .tb-status { opacity: 1; transform: none; } .tb-title { font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tb-mini { flex-shrink: 0; width: clamp(48px, 14vw, 140px); height: 5px; background: var(--border-strong); border-radius: 999px; overflow: hidden; } .tb-mini-fill { height: 100%; width: 0%; background: var(--ink); border-radius: 999px; transition: width 0.5s var(--ease); } /* Précédent / suivant (icône seule) */ .tb-nav { display: flex; gap: var(--sp-2); margin-left: auto; } .tb-icon { padding: var(--sp-2); } .tb-icon.is-disabled, .tb-icon.is-disabled:hover { opacity: 0.35; color: var(--text-soft); background: var(--surface); border-color: var(--border-strong); cursor: default; } @media (max-width: 440px) { .tb-back span { display: none; } } /* Contenu principal */ main.container { padding-top: clamp(40px, 7vw, 72px); padding-bottom: clamp(48px, 8vw, 88px); } /* ============================================================ Typographie ============================================================ */ h1 { font-size: clamp(2.25rem, 7vw, 4.25rem); font-weight: 800; line-height: 0.98; letter-spacing: -0.02em; text-transform: uppercase; margin-bottom: var(--sp-4); } .subtitle { color: var(--text-soft); font-size: clamp(1rem, 2vw, 1.1875rem); line-height: 1.5; max-width: 58ch; margin-bottom: clamp(24px, 4vw, 32px); } h2 { font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-soft); margin: var(--sp-8) 0 var(--sp-4); } /* ============================================================ Page d'accueil, grille de cartes ============================================================ */ .hero { margin-bottom: clamp(36px, 6vw, 56px); } /* Dans un hero, l'espace avant la suite est géré par .hero : la subtitle ne rajoute pas sa propre marge (sinon double gap avant la grille). */ .hero .subtitle { margin-bottom: 0; } /* ============================================================ Landing : hero centré + recherche « liquid glass » ============================================================ */ .home-hero { position: relative; text-align: center; padding-block: clamp(28px, 7vw, 72px) clamp(20px, 4vw, 36px); margin-bottom: clamp(28px, 5vw, 48px); } .home-hero h1, .home-hero .subtitle, .home-hero .search { position: relative; z-index: 1; } .home-hero .subtitle { margin-inline: auto; } /* Halo diffus derrière la recherche : donne au verre quelque chose à réfracter. Uniquement des gris (palette monochrome). */ .hero-aura { position: absolute; z-index: 0; left: 50%; top: 50%; width: min(680px, 92%); height: 300px; transform: translate(-50%, -30%); pointer-events: none; background: radial-gradient(closest-side, rgba(10, 10, 10, 0.14), transparent) 8% 40% / 46% 80% no-repeat, radial-gradient(closest-side, rgba(10, 10, 10, 0.10), transparent) 92% 20% / 50% 90% no-repeat, radial-gradient(closest-side, rgba(10, 10, 10, 0.07), transparent) 50% 100% / 62% 80% no-repeat; filter: blur(26px); } .search { position: relative; max-width: 560px; margin: clamp(20px, 4vw, 32px) auto 0; } .search-field { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-radius: 999px; background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: 0 10px 30px -10px rgba(10, 10, 10, 0.22), 0 2px 6px rgba(10, 10, 10, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.85); transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease); } .search-field:focus-within { border-color: rgba(10, 10, 10, 0.32); box-shadow: 0 16px 44px -12px rgba(10, 10, 10, 0.30), 0 0 0 4px rgba(10, 10, 10, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9); } .search-ico { width: 22px; height: 22px; flex-shrink: 0; color: var(--text-soft); } .search-field input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-family: inherit; font-size: 1.0625rem; /* 17px : pas de zoom auto sur iOS */ letter-spacing: -0.01em; color: var(--text); } .search-field input::placeholder { color: var(--text-muted); } .search-results { position: absolute; left: 0; right: 0; z-index: 30; margin-top: var(--sp-2); padding: var(--sp-2); list-style: none; text-align: left; background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); max-height: 60vh; overflow-y: auto; } .search-results[hidden] { display: none; } .search-item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); cursor: pointer; } .search-item[aria-selected="true"] { background: var(--surface-alt); } .si-title { font-weight: 600; font-size: 0.9375rem; color: var(--text); } .si-group { flex-shrink: 0; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); border: 1px solid var(--border-strong); border-radius: 999px; padding: 2px var(--sp-2); } .search-empty { padding: var(--sp-3) var(--sp-4); color: var(--text-muted); font-size: 0.875rem; } .browse-title { text-align: center; color: var(--text-muted); margin: 0 0 var(--sp-5); } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); } .card { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: start; column-gap: var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: var(--sp-4); text-decoration: none; color: inherit; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--ink); } .card .icon { grid-column: 1; grid-row: 1; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--surface-alt); border: 1px solid var(--border); color: var(--ink); font-size: 1.25rem; transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease); } .card:hover .icon { transform: scale(1.05); background: var(--ink); color: var(--bg); } .card h2 { grid-column: 2; grid-row: 1; font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; text-transform: none; color: var(--text); margin: 0 0 var(--sp-1); } .card p { grid-column: 2; grid-row: 2; font-size: 0.8125rem; line-height: 1.45; color: var(--text-soft); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Mobile : une seule colonne, cartes plus compactes et mieux détachées du fond blanc (bordure + léger fond), description sur une ligne. */ @media (max-width: 560px) { .grid { grid-template-columns: 1fr; gap: var(--sp-3); } .card { padding: var(--sp-3) var(--sp-4); border-color: var(--border-strong); background: var(--surface-alt); } .card .icon { width: 32px; height: 32px; font-size: 1.125rem; } .card p { -webkit-line-clamp: 1; line-clamp: 1; } } /* ============================================================ Barre de progression ============================================================ */ .progress-wrap { padding: var(--sp-4) 0 var(--sp-5); margin-bottom: var(--sp-3); } .progress-bar { height: 6px; background: var(--border-strong); border-radius: 999px; overflow: hidden; } .progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #404040, var(--ink)); border-radius: 999px; transition: width 0.5s var(--ease); } .progress-label { font-size: 0.8125rem; font-weight: 500; color: var(--text-soft); margin-top: var(--sp-2); } /* ============================================================ Checklist ============================================================ */ .category { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: var(--sp-2) var(--sp-6); margin-bottom: var(--sp-4); box-shadow: var(--shadow-sm); } .todo-item { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-4) 0; cursor: pointer; border-bottom: 1px solid var(--border); } .todo-item:last-child { border-bottom: none; } .todo-item input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border: 2px solid var(--border-strong); border-radius: var(--radius-sm); margin-top: 1px; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.1s var(--ease); cursor: pointer; flex-shrink: 0; } .todo-item:hover input[type="checkbox"] { border-color: var(--ink); } .todo-item input[type="checkbox"]:active { transform: scale(0.9); } .todo-item input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(10, 10, 10, 0.12); } .todo-item input[type="checkbox"]:checked { background-color: var(--ink); border-color: var(--ink); } .todo-item input[type="checkbox"]:checked::after { content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-0.5px, -1px); } .todo-content { display: flex; flex-direction: column; gap: 2px; /* flex-basis 0 : le texte occupe l'espace restant et reste toujours à côté de la case (jamais poussé dessous), même quand la ligne peut passer à la ligne pour le bouton de lien. */ flex: 1 1 0; min-width: 0; } .title { font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.01em; transition: color 0.25s var(--ease); } .desc { font-size: 0.8438rem; line-height: 1.45; color: var(--text-soft); } .todo-item input[type="checkbox"]:checked ~ .todo-content .title { text-decoration: line-through; text-decoration-color: var(--text-muted); color: var(--text-muted); } .todo-item input[type="checkbox"]:checked ~ .todo-content .desc { color: var(--text-muted); } /* Masquage temporaire des liens d'affiliation pas encore renseignés. Tant qu'un lien pointe vers le placeholder TON_LIEN_AFFILIE_ICI, il est masqué (on ne veut rien afficher qui mène nulle part). Dès qu'on remplace le href par le vrai lien, il réapparaît tout seul, sans toucher au CSS. */ a[href="TON_LIEN_AFFILIE_ICI"] { display: none; } /* Item de la section "matériel recommandé" dont le lien n'est pas rempli */ .resources li:has(> a[href="TON_LIEN_AFFILIE_ICI"]) { display: none; } /* Section "matériel recommandé" entièrement vide (aucun vrai lien) : on la cache */ .resources:not(:has(a:not([href="TON_LIEN_AFFILIE_ICI"]))) { display: none; } /* Lien discret en bout de ligne (affiliation ou lien utile officiel) */ .aff-link, .item-link { flex-shrink: 0; align-self: center; display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1; white-space: nowrap; color: var(--text-soft); background: #fff; text-decoration: none; transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease); } .aff-link:hover, .item-link:hover { color: var(--ink); border-color: var(--ink); background: var(--surface-alt); } .aff-link:focus-visible, .item-link:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(10, 10, 10, 0.12); } .aff-link svg, .item-link svg { width: 13px; height: 13px; flex-shrink: 0; } /* Sur mobile, le bouton passe sous le texte, aligné à droite (proche du pouce) plutôt que d'écraser le texte. La case et le titre restent alignés. */ @media (max-width: 480px) { .todo-item { flex-wrap: wrap; } .aff-link, .item-link { margin-left: auto; margin-top: var(--sp-2); } } /* ============================================================ Ressources / Affiliation ============================================================ */ .resources { margin-top: var(--sp-8); background: var(--surface-alt); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: var(--sp-6); } .resources h3 { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text); margin-bottom: var(--sp-2); } .resources p { font-size: 0.875rem; color: var(--text-soft); margin-bottom: var(--sp-4); } .resources ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); } .resources li { font-size: 0.875rem; line-height: 1.5; color: var(--text-soft); } .resources a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); transition: text-decoration-color 0.2s var(--ease); } .resources a:hover { text-decoration-color: var(--ink); } /* ============================================================ Tâches personnelles (ajout à la main) + note de stockage ============================================================ */ .user-tasks { margin-top: var(--sp-8); } .storage-note { max-width: 68ch; margin-bottom: var(--sp-4); font-size: 0.8125rem; line-height: 1.5; color: var(--text-muted); } .task-del { margin-left: auto; align-self: center; background: none; border: none; color: var(--text-muted); font-size: 1.375rem; line-height: 1; cursor: pointer; padding: 0 var(--sp-1); transition: color 0.2s var(--ease); } .task-del:hover { color: var(--ink); } .add-task { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); } .add-task input { flex: 1; min-width: 0; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border-strong); border-radius: 12px; font-family: inherit; font-size: 0.9375rem; color: var(--text); background: var(--surface); transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); } .add-task input::placeholder { color: var(--text-muted); } .add-task input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(10, 10, 10, 0.06); } .add-task button { flex-shrink: 0; padding: var(--sp-3) var(--sp-6); border: none; border-radius: 12px; background: var(--ink); color: var(--bg); font-family: inherit; font-weight: 600; font-size: 0.875rem; cursor: pointer; transition: background 0.2s var(--ease); } .add-task button:hover { background: var(--ink-hover); } /* ============================================================ Texte éditorial (intro, contexte de catégorie) ============================================================ */ .intro { max-width: 66ch; margin-bottom: clamp(24px, 3vw, 32px); color: var(--text-soft); font-size: 0.9063rem; line-height: 1.6; } .intro p + p { margin-top: var(--sp-2); } /* Intro placée sous une grille de cartes (ex. hub onboarding) : on respire, comme après le hero. */ .grid + .intro { margin-top: clamp(36px, 6vw, 56px); } /* Intro repliable : contenu masqué mais présent dans le HTML (SEO ok). Animation douce via grid-template-rows (0fr -> 1fr). */ .intro-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease); } .intro-more > * { overflow: hidden; } .intro.is-open .intro-more { grid-template-rows: 1fr; } .intro.is-open .intro-more p { margin-top: var(--sp-2); } .intro-toggle { display: inline-flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-3); padding: 0; border: none; background: none; color: var(--text); font-family: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: color 0.2s var(--ease); } .intro-toggle:hover { color: var(--text-soft); } .intro-toggle svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); } .intro.is-open .intro-toggle svg { transform: rotate(180deg); } .cat-intro { max-width: 68ch; margin: 0 0 var(--sp-4); color: var(--text-muted); font-size: 0.875rem; line-height: 1.55; } /* ============================================================ FAQ (dépliable, sans JavaScript) ============================================================ */ .faq { margin-top: clamp(40px, 6vw, 56px); } .faq-item { border-bottom: 1px solid var(--border); } .faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) 0; font-weight: 600; font-size: 0.9375rem; color: var(--text); transition: color 0.2s var(--ease); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--text-soft); } .faq-item summary::after { content: "+"; flex-shrink: 0; font-size: 1.25rem; font-weight: 400; line-height: 1; color: var(--text-muted); transition: transform 0.2s var(--ease); } .faq-item[open] summary::after { content: "\2212"; } /* signe moins */ .faq-answer { padding: 0 0 var(--sp-5); max-width: 68ch; color: var(--text-soft); font-size: 0.9063rem; line-height: 1.6; } /* ============================================================ Sources officielles ============================================================ */ .sources { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--border); } .sources h3 { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text); margin-bottom: var(--sp-2); } .sources ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); } .sources li { font-size: 0.8125rem; line-height: 1.5; color: var(--text-muted); } .sources a { color: var(--text-soft); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); transition: text-decoration-color 0.2s var(--ease); } .sources a:hover { text-decoration-color: var(--ink); } /* Étiquette pour une source non officielle (blog, avis...) */ .source-tag { display: inline-block; font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); border: 1px solid var(--border-strong); border-radius: 999px; padding: 2px var(--sp-2); margin-left: var(--sp-2); vertical-align: middle; } /* ============================================================ Footer (identique partout) ============================================================ */ .site-footer { flex-shrink: 0; /* ne se comprime jamais : reste collé en bas */ width: 100%; border-top: 1px solid var(--border); background: var(--surface-alt); } .footer-inner { padding-top: clamp(36px, 6vw, 56px); padding-bottom: clamp(36px, 6vw, 56px); text-align: center; color: var(--text-muted); } .footer-logo { display: inline-block; margin-bottom: var(--sp-4); } .footer-tagline { font-size: 0.875rem; color: var(--text-soft); margin-bottom: var(--sp-4); } /* Liens légaux : rangée sobre et centrée, façon néobanque. */ .footer-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-2) var(--sp-8); margin-bottom: var(--sp-5); } .footer-links a, .footer-links .footer-cookies { font-family: inherit; font-size: 0.8125rem; color: var(--text-soft); text-decoration: none; background: none; border: none; padding: 0; cursor: pointer; transition: color 0.2s var(--ease); } .footer-links a:hover, .footer-links .footer-cookies:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .affiliate-notice { font-size: 0.75rem; color: var(--text-muted); max-width: min(760px, 90%); margin: 0 auto var(--sp-4); } .copyright { font-size: 0.75rem; color: var(--text-muted); } /* ============================================================ Pages légales (mentions légales, CGU) : prose sobre et lisible ============================================================ */ .legal { max-width: 72ch; margin-inline: auto; color: var(--text-soft); } .legal h2 { font-size: 1.125rem; color: var(--text); margin-top: var(--sp-10); margin-bottom: var(--sp-3); } .legal p, .legal ul { margin-bottom: var(--sp-4); } .legal ul { padding-left: var(--sp-5); } .legal li { margin-bottom: var(--sp-2); } .legal a { color: var(--ink); text-underline-offset: 3px; } .legal .updated { font-size: 0.8125rem; color: var(--text-muted); } /* ============================================================ Bandeau de consentement cookies ============================================================ */ .cookie-banner { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); width: calc(100% - 32px); max-width: 640px; display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); background: var(--ink); color: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 100; animation: rise 0.4s var(--ease) both; } .cookie-text { flex: 1; font-size: 0.8125rem; line-height: 1.5; color: rgba(255, 255, 255, 0.82); } .cookie-actions { display: flex; gap: var(--sp-2); flex-shrink: 0; } .cookie-btn { padding: var(--sp-2) var(--sp-4); border-radius: 999px; font-family: inherit; font-weight: 600; font-size: 0.8125rem; cursor: pointer; border: 1px solid transparent; transition: background 0.2s var(--ease), border-color 0.2s var(--ease); } .cookie-refuse { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); } .cookie-refuse:hover { border-color: #fff; } .cookie-accept { background: #fff; color: var(--ink); } .cookie-accept:hover { background: #e5e5e5; } @media (max-width: 520px) { .cookie-banner { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; transform: none; flex-direction: column; align-items: stretch; padding: var(--sp-4); } .cookie-actions { justify-content: flex-end; } } /* ============================================================ Icônes Material Symbols ============================================================ */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; line-height: 1; } /* ============================================================ Animation d'entrée ============================================================ */ @media (prefers-reduced-motion: no-preference) { .card, .category { animation: rise 0.5s var(--ease) both; } .grid > .card:nth-child(2) { animation-delay: 0.05s; } .grid > .card:nth-child(3) { animation-delay: 0.1s; } .grid > .card:nth-child(4) { animation-delay: 0.15s; } @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } }