/* Automatismes — feuille de style unique. Lisible de loin (vidéoprojecteur) comme de près (tablette, téléphone). */ :root { --fond: #f7f7f5; --carte: #ffffff; --texte: #1b1b1a; --texte-doux: #62615d; --trait: #dedcd6; --accent: #2b5f8f; --accent-clair: #e8f0f7; --sur-accent: #ffffff; /* texte posé sur un aplat d'accent */ --juste: #1d7a4d; --juste-fond: #e6f4ec; --faux: #b3341f; --faux-fond: #fbeae7; --filet: rgba(0, 0, 0, 0.12); --rayon: 12px; } /* --- mode sombre ------------------------------------------------------ Appliqué par theme.js via l'attribut data-theme sur , avant le premier rendu, pour éviter tout clignotement au chargement. L'accent passe du bleu au violet : sur un fond sombre, un violet clair garde un bon contraste là où le bleu d'origine deviendrait terne. Le texte posé SUR l'accent passe au sombre, sinon le bouton principal serait illisible (clair sur clair). --------------------------------------------------------------------- */ :root[data-theme="sombre"] { /* Gris neutres, sans teinte colorée : le violet est réservé aux éléments qui étaient bleus en mode clair (boutons, accents, figures). Volontairement plus clairs que du noir — un fond quasi noir fatigue et écrase le relief entre le fond et les cartes. */ --fond: #262626; --carte: #303030; --texte: #f0f0f0; --texte-doux: #b5b5b5; --trait: #464646; --accent: #a78bfa; --accent-clair: #383046; --sur-accent: #1a1a1a; --juste: #5fd39a; --juste-fond: #2a3b32; --faux: #f4796b; --faux-fond: #3f2e2b; --filet: rgba(255, 255, 255, 0.18); } :root[data-theme="sombre"] input, :root[data-theme="sombre"] textarea { color-scheme: dark; } * { box-sizing: border-box; } /* Doit rester AVANT toute règle fixant « display ». Sans cela, une règle comme « button { display: inline-block } » l'emporte sur la feuille du navigateur et les éléments marqués « hidden » restent visibles — bug silencieux et difficile à repérer. */ [hidden] { display: none !important; } body { margin: 0; padding: 0; background: var(--fond); color: var(--texte); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 17px; line-height: 1.5; } .enveloppe { max-width: 780px; margin: 0 auto; padding: 20px 18px 60px; } h1 { font-size: 1.5rem; margin: 0 0 4px; } h2 { font-size: 1.15rem; margin: 28px 0 10px; } .sous-titre { color: var(--texte-doux); margin: 0 0 24px; } .carte { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 18px; margin-bottom: 16px; } /* --- écrans ---------------------------------------------------------- */ .ecran { display: none; } .ecran.actif { display: block; } /* --- formulaire d'accueil -------------------------------------------- */ fieldset { border: none; padding: 0; margin: 0 0 18px; } legend { font-weight: 600; padding: 0; margin-bottom: 8px; } .choix-ligne { display: flex; flex-wrap: wrap; gap: 8px; } .puce { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--trait); background: var(--carte); border-radius: 999px; padding: 8px 14px; cursor: pointer; user-select: none; } .puce:has(input:checked) { border-color: var(--accent); background: var(--accent-clair); color: var(--accent); font-weight: 600; } .puce input { margin: 0; accent-color: var(--accent); } .liste-competences { display: grid; gap: 8px; } .liste-competences .puce { border-radius: var(--rayon); justify-content: flex-start; } .compteur-generateurs { color: var(--texte-doux); font-size: 0.9rem; margin-left: auto; } /* --- boutons --------------------------------------------------------- */ button, a.bouton-secondaire, a.bouton-discret { font: inherit; /* Couleur explicite : sans elle, le navigateur applique son noir par défaut aux boutons, illisible en mode sombre. Chaque variante la redéfinit si nécessaire. */ color: var(--texte); cursor: pointer; border-radius: 10px; border: 1px solid transparent; padding: 12px 20px; text-decoration: none; display: inline-block; text-align: center; } .bouton-principal { background: var(--accent); color: var(--sur-accent); font-weight: 600; width: 100%; font-size: 1.05rem; padding: 15px 20px; } .bouton-principal:hover { filter: brightness(1.08); } .bouton-principal:disabled { opacity: 0.55; cursor: default; filter: none; } .bouton-secondaire { background: var(--carte); border-color: var(--trait); color: var(--texte); } .bouton-secondaire:hover { border-color: var(--accent); color: var(--accent); } /* Actions de troisième rang : de vrais boutons, simplement plus petits et plus sobres — jamais des liens soulignés. Le sélecteur mentionne aussi « a. » pour que les liens présentés en bouton aient exactement la même hauteur que les