/* * Styléo Design System * Charte graphique unifiée (couleurs, typo, ombres, gradients) * Inspirée par https://www.styleo.fr * * PALIERS RESPONSIVE — quatre, et pas un de plus. Les mêmes dans `mailpilot.css` et dans * `app.js` (`matchMedia`), sinon une règle CSS et le code qui la double basculent à deux * largeurs différentes et l'interface se contredit pendant quelques pixels. * * 1150px bascule large / étroit : au-dessus, les volets tiennent côte à côte * 900px intermédiaire : les colonnes latérales passent en tiroir (agendas) * 760px téléphone : un seul volet à la fois, en-tête sur une ligne * 560px petit téléphone : les lignes de champs s'empilent * * S'y ajoute un palier de HAUTEUR, et un seul : `max-height: 500px` en paysage, le téléphone * couché. Il ne redispose rien, il comprime le chrome. Il vit en fin de `mailpilot.css`. * * `min-width: 761px` apparaît une fois, pour le menu réduit : c'est le miroir exact du palier * 760, la façon d'écrire « au-dessus du téléphone », et non un cinquième seuil. * * Une valeur ne peut pas venir d'une variable ici : `@media` n'évalue pas `var()`. * Les seuils sont donc écrits en clair, et cette liste est leur inventaire. */ :root { /* Palette neutre (encre & papier) */ --ink: #0b0b0c; --ink-2: #242429; --muted: #6e6e76; --paper: #f3f2ee; --white: #fff; /* * Teinte des bordures, séparateurs et survols : la composante RVB seule, pour qu'une même * déclaration serve les deux thèmes en ne changeant que l'opacité au point d'usage * (`rgba(var(--teinte-rgb), .12)`). C'est de l'encre sur du papier, et du blanc sur du noir — * l'inverse donnerait des traits invisibles. */ --teinte-rgb: 11, 11, 12; /* Lignes & bordures */ /* Surfaces translucides (en-tête, cartes, modales) : le fond transparaît derrière, il faut donc une teinte qui appartienne au thème — un blanc en dur y ferait un voile laiteux. */ /* État « or » (survol d'un bouton, onglet actif, pastille allumée) : aplat en clair, voile en sombre. Le trio fond/texte/trait va ensemble — le changer d'un côté seulement casse la lisibilité de l'autre. */ --or-fond: var(--yellow); --or-texte: #0b0b0c; --or-trait: var(--yellow); --verre: rgba(255, 255, 255, .92); --verre-header: rgba(255, 255, 255, .84); --line: rgba(11, 11, 12, .13); --line-strong: rgba(11, 11, 12, .24); /* Palette d'accent (couleurs primaires & états) */ --coral: #ff2f63; /* Corail — RÉSERVÉ au dégradé & lueurs de fond (jamais en aplat d'UI) */ --orange: #f8784d; /* Orange chaud — accent d'UI (index, liens, focus, états) */ --yellow: #ffc43d; /* Or — hover boutons, alertes */ --green: #2da56f; /* Vert — succès, positif */ --success: var(--green); /* alias sémantique (badges « ✓ configurée », etc.) */ --danger: #c53b45; /* Rouge — erreurs, danger */ /* Accent de travail (UI). Le corail ne sert QUE dans le dégradé/lueurs (charte Styléo). */ --accent: var(--orange); --accent-soft: rgba(248, 120, 77, .10); --accent-line: rgba(248, 120, 77, .30); --accent-text: #b5531f; /* orange foncé lisible pour texte sur fond clair */ /* Gradient signature (corail → orange → or) : moments expressifs uniquement */ --gradient: linear-gradient(120deg, var(--coral), var(--orange) 55%, var(--yellow)); /* Ombre standard */ --shadow: 0 24px 70px rgba(11, 11, 12, .12); --shadow-sm: 0 8px 24px rgba(11, 11, 12, .08); /* Échelle de rayons (cohérence visuelle) */ --radius-sm: 10px; /* inputs, petits boutons, stepper */ --radius: 14px; /* cartes internes, alertes, tables, propositions */ --radius-lg: 18px; /* cartes principales, modale */ --radius-pill: 999px; /* boutons pilule, tags */ /* Courbe de transition partagée */ --ease: .18s ease; /* Typographie */ --font-display: "New Amsterdam", Haettenschweiler, "Arial Narrow", sans-serif; --font-body: "Open Sans", sans-serif; /* Spacing */ --gap: 1rem; --gap-lg: 2rem; --gap-xl: 3rem; } /* =================================================================================== * THÈME SOMBRE * * Seuls les JETONS changent : aucune règle de mise en page n'est dupliquée, et une * couleur oubliée quelque part se voit immédiatement au lieu de se cacher. * * Ce n'est pas une inversion mécanique du thème clair. Les surfaces sombres montent * en clarté à mesure qu'elles s'élèvent (fond de page < carte < champ), là où en clair * c'est l'inverse — c'est ainsi qu'on lit la profondeur sans ombres portées, qui ne se * voient pas sur du noir. Les accents sont éclaircis : l'orange de la charte, posé sur * du sombre, perd le contraste qu'il a sur du papier. * * Deux sélecteurs pour un seul jeu : le choix explicite de l'utilisateur, et le mode * « auto » qui suit le système. La duplication est assumée — une media query ne peut * pas être factorisée avec un attribut. * ================================================================================= */ :root[data-theme="dark"] { --ink: #f0ebe3; /* l'encre devient claire : c'est le TEXTE, pas la couleur sombre. Blanc-CRÈME et non blanc pur : moins dur, et fidèle au papier. */ --ink-2: #d3ccc1; --muted: #9a9188; --paper: #15120f; /* fond de page : la surface la plus basse, brun très sombre */ --white: #1f1b17; /* surface élevée (cartes, champs, menus) */ --or-fond: rgba(255, 209, 102, .16); --or-texte: #ffd9a0; --or-trait: rgba(255, 209, 102, .45); --verre: rgba(33, 29, 24, .92); --verre-header: rgba(21, 18, 15, .82); --teinte-rgb: 240, 235, 227; --line: rgba(240, 235, 227, .14); --line-strong: rgba(240, 235, 227, .26); /* Accents éclaircis pour tenir le contraste sur fond sombre. */ --orange: #ff8f66; --yellow: #ffd166; --green: #4fc48c; --danger: #ff7b85; --accent-soft: rgba(255, 143, 102, .14); --accent-line: rgba(255, 143, 102, .38); --accent-text: #ffb694; /* le texte d'accent doit rester lisible SUR du sombre */ /* Les ombres restent noires, et plus franches : sur fond sombre, une ombre légère ne détache rien du tout. */ --shadow: 0 24px 70px rgba(0, 0, 0, .55); --shadow-sm: 0 8px 24px rgba(0, 0, 0, .40); } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --ink: #f0ebe3; --ink-2: #d3ccc1; --muted: #9a9188; --paper: #15120f; --white: #1f1b17; --or-fond: rgba(255, 209, 102, .16); --or-texte: #ffd9a0; --or-trait: rgba(255, 209, 102, .45); --verre: rgba(33, 29, 24, .92); --verre-header: rgba(21, 18, 15, .82); --teinte-rgb: 240, 235, 227; --line: rgba(240, 235, 227, .14); --line-strong: rgba(240, 235, 227, .26); --orange: #ff8f66; --yellow: #ffd166; --green: #4fc48c; --danger: #ff7b85; --accent-soft: rgba(255, 143, 102, .14); --accent-line: rgba(255, 143, 102, .38); --accent-text: #ffb694; --shadow: 0 24px 70px rgba(0, 0, 0, .55); --shadow-sm: 0 8px 24px rgba(0, 0, 0, .40); } } /* * Sélecteur d'apparence — discret, collé au pied de la barre. * * Ce n'est pas un réglage de travail : on le touche une fois, peut-être deux. Il se tient donc * en retrait, sous forme de trois pictogrammes sans libellé (le titre au survol suffit), et * `margin-top: auto` le pousse en bas quelle que soit la longueur du menu. */ .theme-switch { display: flex; gap: 2px; /* Centré dans son pied, qui porte désormais le collage en bas et le fond. */ margin: 0 auto; padding: 2px; background: rgba(var(--teinte-rgb), .05); border-radius: var(--radius-pill); width: fit-content; } /* * Pied de barre : fond PLEIN sur toute la largeur, et collé en bas. * * Le sélecteur d'apparence portait seul le `sticky`, avec un halo de 6 px pour tout fond. Sur un * écran court — un téléphone couché — le menu passe dessous et se lisait de part et d'autre des * trois pictogrammes : « INTELLIGE ☀ CIELLE ». Un fond qui ne couvre pas toute la largeur ne * sépare rien. */ .sidebar-pied { /* * PAS `sticky`. Il l'a été, pour rester joignable quand le menu dépasse l'écran — mais un * élément collé ne réserve pas sa place : il flottait au-dessus de la fin du menu et * recouvrait « Ajouter une boîte mail… », qu'on ne pouvait plus ni lire ni atteindre. * En fin de flux, `margin-top: auto` le pose en bas quand il y a de la place, et le laisse * après le contenu quand il faut dérouler. C'est un réglage d'ambiance : le dérouler pour * l'atteindre coûte moins cher que de perdre une commande derrière lui. */ z-index: 2; /* Marges négatives : le fond rejoint les bords de la barre malgré son retrait — d'où le jeton, qui garantit que les deux valeurs restent la même. */ margin: auto calc(var(--sidebar-retrait) * -1) calc(var(--sidebar-retrait-y) * -1); padding: 10px var(--sidebar-retrait); background: var(--white); border-top: 1px solid var(--line); } .theme-opt { display: flex; align-items: center; justify-content: center; width: 30px; height: 26px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--muted); cursor: pointer; transition: background var(--ease), color var(--ease); } .theme-opt span { display: none; } /* le libellé vit dans l'infobulle : la place est comptée */ .theme-opt .lc { width: 14px; height: 14px; } .theme-opt:hover { color: var(--ink); } .theme-opt.active { background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .14); } /* Au doigt, 30 px de large se ratent une fois sur trois : le sélecteur s'élargit sur mobile, où la place ne manque pas — le tiroir fait 280 px et le pied est vide. */ @media (max-width: 760px) { /* * Au doigt, la cible doit être atteignable — pas monumentale. Les trois pictogrammes * s'étiraient sur toute la largeur du tiroir en 74 x 42 px chacun : un réglage qu'on * touche une fois par an occupait le pied du menu comme s'il en était le sujet. * Largeur naturelle, centrée, et une cible qui reste confortable. */ .theme-switch { padding: 3px; } .theme-opt { width: 46px; height: 34px; } .theme-opt .lc { width: 16px; height: 16px; } } /* Réinitialisation & normes */ * { box-sizing: border-box; } [hidden] { display: none !important; } html { min-width: 320px; background: var(--paper); } body { margin: 0; color: var(--ink); background: radial-gradient(circle at 5% 8%, rgba(255, 196, 61, .12), transparent 20rem), radial-gradient(circle at 95% 18%, rgba(255, 47, 99, .08), transparent 23rem), var(--paper); font: 15px/1.55 var(--font-body); } button, input, select, textarea { font: inherit; } button { color: inherit; } button, select { cursor: pointer; } /* Focus visible (accessibilité) */ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(248, 120, 77, .35); outline-offset: 2px; } /* Noise pattern (texture subtile) */ .noise { position: fixed; inset: 0; z-index: -1; opacity: .07; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); } /* ============================================================ */ /* LAYOUT PRINCIPAL */ /* ============================================================ */ .app-container { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; gap: 0; } .app-sidebar { background: var(--white); border-right: 1px solid var(--line); overflow-y: auto; /* * Le retrait latéral est un JETON, parce que le pied s'en sert en négatif pour aller * chercher les bords. Deux valeurs écrites séparément, c'est un pied plus large que sa * barre dès qu'un mode change le retrait — et une barre de défilement horizontale. */ --sidebar-retrait: var(--gap); --sidebar-retrait-y: var(--gap-lg); padding: var(--sidebar-retrait-y) var(--sidebar-retrait); /* Colonne : c'est ce qui permet au sélecteur d'apparence de tomber en PIED de barre (margin-top: auto) plutôt que de flotter sous la dernière entrée du menu. */ display: flex; flex-direction: column; /* * Collée à la fenêtre, avec son propre défilement. * * C'est la PAGE qui défile dans cette application, barre comprise : sur un écran long comme * « IA & confidentialité », la barre s'étirait sur toute la hauteur du contenu et son pied * partait à 2 500 px — il fallait dérouler la page entière pour retrouver le sélecteur * d'apparence, et le menu lui-même disparaissait dès qu'on lisait le bas d'une page. */ position: sticky; top: 0; height: 100vh; align-self: start; } .app-main { display: flex; flex-direction: column; /* min-width: 0 est INDISPENSABLE, pas une précaution : .app-main est un élément de grille, sa largeur minimale automatique vaut donc « min-content ». Sans cette ligne, un seul contenu large enfoui n'importe où (un tableau, un graphique) élargit toute la colonne, et la page entière part en travers — les conteneurs à défilement placés autour du contenu large n'y peuvent alors plus rien, puisque c'est leur ANCÊTRE qui s'élargit. */ min-width: 0; } .app-header { position: sticky; top: 0; z-index: 30; background: var(--verre-header); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); min-height: 72px; padding: var(--gap) var(--gap-lg); display: flex; align-items: center; justify-content: space-between; } .app-header h2 { font-family: var(--font-display); letter-spacing: .03em; margin: 0; font-size: 20px; } /* Bouton hamburger (mobile) + conteneur du titre + contrôles de droite */ .header-title { display: flex; align-items: center; gap: 10px; min-width: 0; } .header-controls { display: flex; align-items: center; gap: 1rem; } .nav-burger { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); cursor: pointer; } .nav-burger .lc { width: 20px; height: 20px; } .sidebar-backdrop { display: none; } .app-content { flex: 1; overflow-y: auto; padding: var(--gap-lg); min-width: 0; /* même raison que .app-main : ne jamais se laisser élargir par son contenu */ } /* Fondu d'apparition au changement de vue / d'étape (re-déclenché par display none→block) */ @keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } #view-new, #view-drafts, #view-calendar, #view-history, #step1, #step2, #step3, #step4 { animation: viewIn .25s ease; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ============================================================ */ /* NAVIGATION */ /* ============================================================ */ .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); } /* * MENU RÉDUIT — la barre tombe à la largeur d'un pictogramme. * * Sur un portable, et plus encore sur une tablette en paysage, 280 px de menu permanent prennent * un tiers de la largeur pour une navigation qu'on utilise quelques secondes par heure. Replié, * il ne reste que les pictogrammes ; le libellé passe dans `title`, il n'est pas supprimé. * * Rien de tout cela ne joue sous 760 px : là, le menu est déjà un tiroir ouvert au burger, et il * n'occupe la largeur que le temps qu'on s'en serve. */ .sidebar-tete { display: flex; align-items: center; gap: 8px; margin-bottom: var(--gap-xl); } .brand { flex: 1 1 auto; min-width: 0; } .nav-repli { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); color: var(--muted); cursor: pointer; } .nav-repli:hover { background: var(--or-fond); border-color: var(--or-trait); color: var(--or-texte); } .nav-repli .lc { width: 16px; height: 16px; } /* * Le mode réduit ne vaut qu'AU-DESSUS du palier téléphone. `min-width: 761px` est le miroir * exact de `max-width: 760px`, pas un cinquième palier : sous cette largeur le menu est un * tiroir, il ne prend de la place que le temps qu'on s'en sert, et le réduire n'aurait aucun * effet — sauf à écraser la grille du tiroir, ce que ces règles feraient sans cette borne. */ @media (min-width: 761px) { /* La colonne suit : sans elle, la barre rétrécirait dans une piste restée à 280 px. */ .nav-reduit.app-container { grid-template-columns: 64px 1fr; } .nav-reduit .app-sidebar { --sidebar-retrait: 10px; } .nav-reduit .brand, .nav-reduit .nav-label, .nav-reduit .nav-section-title, .nav-reduit .sidebar-boites { display: none; } .nav-reduit .sidebar-tete { justify-content: center; margin-bottom: var(--gap-lg); } .nav-reduit .nav-link { justify-content: center; padding: 10px 0; gap: 0; } /* * Replié, les titres de rubrique disparaissent — et avec eux la marge qui portait le rythme. * Il repasse donc au `gap`, et se resserre : sans libellé à séparer, huit pixels suffisent à * lire trois groupes de pictogrammes, là où seize creusaient des trous. */ .nav-reduit .nav-menu { gap: 8px; } /* En colonne : trois pictogrammes côte à côte dans 64 px seraient trop serrés pour être visés, et débordaient de la barre. Empilés, ils gardent une cible confortable. */ .nav-reduit .theme-switch { flex-direction: column; } .nav-reduit .theme-opt { width: 30px; height: 26px; } /* Le bouton de repli n'a plus qu'à se centrer : la marque a disparu à côté de lui. */ .nav-reduit .nav-repli { margin: 0 auto; } } .brand strong { font-family: var(--font-display); font-size: 26px; font-weight: 400; letter-spacing: .04em; } .brand img { height: 38px; width: auto; object-fit: contain; /* Le logo est un JPEG sur fond blanc : `multiply` fait disparaître ce fond dans le papier. */ mix-blend-mode: multiply; } /* * En sombre, `multiply` noircirait le logo au point de l'effacer. On lui rend donc son fond * blanc, sur une pastille discrète. Inverser l'image aurait été plus simple, mais retournerait * aussi les couleurs de la marque — un logo Styléo bleu ne serait plus le logo Styléo. */ :root[data-theme="dark"] .brand img { mix-blend-mode: screen; filter: invert(1) hue-rotate(180deg); } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] .brand img { mix-blend-mode: screen; filter: invert(1) hue-rotate(180deg); } } .brand-divider { width: 1px; height: 24px; background: var(--line-strong); } /* * RYTHME VERTICAL DU MENU — une seule valeur, portée par les titres de rubrique. * * L'espace qui précède un groupe appartient à SON titre, jamais à un `gap` de conteneur. C'est * ce qui rend « Boîtes ouvertes » — qui vit hors de `.nav-menu`, en frère dans la barre — * exactement aussi espacé que « Configuration » : les deux portent le même titre, donc la même * marge. Avec un `gap` sur le menu, le premier groupe hors menu retombait à zéro et l'œil * voyait aussitôt que le rythme se cassait. */ .nav-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } /* Espacements resserrés : la barre porte maintenant huit entrées, et l'aération d'origine faisait déborder la dernière section sous la ligne de flottaison sur un portable. */ /* * Aucune marge ici : le rythme appartient au titre, et à lui seul. Cette marge s'ajoutait à * celle du titre pour donner 36 px entre rubriques, quand « Boîtes ouvertes » — qui n'est pas * une `.nav-section` — n'en recevait que 20. Deux sources d'espacement pour un même rythme, et * l'œil voyait immédiatement lequel des groupes n'était pas à sa place. */ .nav-section { margin: 0; } .nav-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; /* Le premier nombre EST le rythme entre groupes (cf. .nav-menu). */ margin: 20px 0 4px; } /* Le premier groupe suit la marque, qui pose déjà son propre écart. */ .nav-menu > .nav-section:first-child > .nav-section-title { margin-top: 0; } .nav-link { position: relative; display: flex; align-items: center; gap: 12px; /* 32 px de retrait mangeaient la largeur utile : « Comment ça marche » revenait à la ligne et cette entrée devenait deux fois plus haute que ses voisines. Le retrait s'aligne aussi sur celui des titres de rubrique, qui n'en avaient pas. */ padding: 10px var(--gap); background: transparent; border: none; border-radius: 10px; color: var(--muted); text-decoration: none; cursor: pointer; transition: background var(--ease), color var(--ease); font-weight: 600; font-size: 14px; } .nav-link:hover { background: rgba(var(--teinte-rgb), .045); color: var(--ink); } .nav-link.active { background: rgba(var(--teinte-rgb), .05); color: var(--ink); } /* Marqueur dégradé (au lieu d'un aplat rose) */ .nav-link.active::before { content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 3px; background: var(--gradient); } /* Une entrée de menu tient sur UNE ligne, à toute largeur : un libellé qui passe à la ligne double la hauteur de sa case et désaligne toute la colonne. Il se coupe plutôt. */ .nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-icon { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } /* ============================================================ */ /* FORMULAIRES */ /* ============================================================ */ .form-group { margin-bottom: var(--gap-lg); } .form-group label { display: block; margin-bottom: 8px; color: var(--ink-2); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .form-group .help-text { font-size: 12px; color: var(--muted); margin-top: 6px; } .form-input, .form-textarea { width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); color: var(--ink); font-size: 15px; transition: border-color .2s, box-shadow .2s; } .form-input:hover, .form-textarea:hover { border-color: var(--line-strong); } .form-input:focus, .form-textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(248, 120, 77, .09); } .form-textarea { resize: vertical; min-height: 120px; } /* Étape 2 : sélection des réseaux (configurés vs à configurer) */ .net-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(45, 165, 111, .12); color: var(--green); white-space: nowrap; } .net-badge.todo { background: rgba(255, 196, 61, .16); color: #8a6d0b; } /* Picto « coût » cliquable (réseaux payants) + table de tarifs de la modale */ .cost-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 9px 2px 7px; border-radius: 999px; background: rgba(255, 196, 61, .16); color: #8a6d0b; border: 1px solid rgba(255, 196, 61, .5); cursor: pointer; white-space: nowrap; transition: filter var(--ease); } .cost-badge:hover { filter: brightness(.96); } .cost-badge .lc { width: 13px; height: 13px; } /* Indicateur budget/dépense IA dans l'en-tête (à côté du fournisseur) */ .budget-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; transition: filter var(--ease); } .budget-chip[hidden] { display: none; } .budget-chip:hover { filter: brightness(.97); } /* Icônes de marque des réseaux (sprite SVG) */ .ni { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -0.16em; fill: currentColor; flex-shrink: 0; } /* Icônes UI (Lucide, sprite SVG) — héritent la couleur du texte */ .lc { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -0.16em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } /* ============================================================ */ /* BOUTONS */ /* ============================================================ */ /* Bouton Styléo : pilule encre → hover jaune */ .btn { /* Couleur du TEXTE portée par une variable, que chaque variante redéfinit. Elle sert deux fois : ici, et dans la règle de rattrapage `a.btn:link` plus bas. Sans elle, ce rattrapage devrait répéter la couleur de chaque variante, et une variante ajoutée plus tard serait oubliée — c'est-à-dire retomberait au bleu souligné du navigateur. */ --btn-fg: var(--white); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; background: var(--ink); color: var(--btn-fg); border: 1px solid var(--ink); border-radius: var(--radius-pill); font-weight: 800; font-size: 12px; cursor: pointer; transition: transform .2s, background .2s, box-shadow .2s, color .2s, border-color .2s; text-decoration: none; box-shadow: 0 10px 22px rgba(11, 11, 12, .16); } .btn:hover { /* L'or de la charte reste CLAIR dans les deux thèmes : le texte posé dessus doit rester sombre. « var(--ink) » s'éclaircit avec le thème et s'effacerait sur son propre fond — c'est le piège de tout fond qui ne suit pas le thème. */ color: var(--or-texte); background: var(--or-fond); border-color: var(--or-trait); transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn:disabled { opacity: .4; cursor: not-allowed; transform: none; } /* * Bouton porté par un LIEN (``), et non par un `