:root { --couleur-texte: #1e293b; --couleur-texte-doux: #64748b; --couleur-fond: #f8fafc; --couleur-accent: #2563eb; --couleur-accent-hover: #1d4ed8; --couleur-accent-doux: rgba(37, 99, 235, 0.08); --couleur-bordure: #e2e8f0; --couleur-carte: #ffffff; --couleur-danger: #dc2626; --couleur-succes: #16a34a; --ombre-carte: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --ombre-carte-survol: 0 16px 28px -10px rgba(15, 23, 42, 0.16), 0 4px 10px -4px rgba(15, 23, 42, 0.08); --rayon: 14px; --rayon-sm: 9px; } /* Mode sombre -- basculé via data-theme sur (voir includes/header.php pour le bouton et le script anti-flash). --couleur-accent/-hover/-doux ne sont JAMAIS redéfinies ici : elles restent héritées de :root (valeur par défaut ci-dessus, ou surchargée par includes/header.php si Ben a choisi une couleur personnalisée) -- l'accent doit rester identique dans les deux thèmes. */ :root[data-theme="sombre"] { --couleur-texte: #e2e8f0; --couleur-texte-doux: #94a3b8; --couleur-fond: #0f172a; --couleur-bordure: #334155; --couleur-carte: #1e293b; --ombre-carte: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); --ombre-carte-survol: 0 16px 28px -10px rgba(0, 0, 0, 0.5), 0 4px 10px -4px rgba(0, 0, 0, 0.3); } :root[data-theme="sombre"] .site-header { background: var(--couleur-carte); } :root[data-theme="sombre"] .selecteur-langue { background-color: var(--couleur-carte); } :root[data-theme="sombre"] table.table-admin th { background: #273449; } :root[data-theme="sombre"] .badge-statut-publie { background: #14532d; color: #bbf7d0; } :root[data-theme="sombre"] .badge-statut-brouillon { background: #334155; color: #cbd5e1; } :root[data-theme="sombre"] .badge-statut-archive { background: #78350f; color: #fde68a; } :root[data-theme="sombre"] .admin-hub-card.tache-active { background: #422006; border-color: #92400e; } :root[data-theme="sombre"] .message-flash { background: #052e1f; border-color: #065f46; color: #a7f3d0; } :root[data-theme="sombre"] .message-erreur { background: #2d0a0a; border-color: #7f1d1d; color: #fecaca; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: var(--couleur-texte); background: var(--couleur-fond); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 12px; } h1 { font-size: 2.1rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.15rem; } p { margin: 0 0 16px; } a { color: var(--couleur-accent); text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--couleur-accent-hover); text-decoration: underline; } .conteneur { max-width: 1160px; margin: 0 auto; padding: 0 20px; } /* Header -- deux rangées (logo seul, puis nav) : laisse toute la largeur à la nav pour les futurs ajouts, plutôt que de la faire cohabiter avec le logo sur une seule ligne étroite. Fond teinté avec deux calques (dégradé --couleur-accent-doux en dessous, blanc/carte semi-transparent au-dessus) pour que la couleur choisie se voie aussi dans l'en-tête, pas juste boutons/liens. */ .site-header { background: linear-gradient(var(--couleur-accent-doux), var(--couleur-accent-doux)), rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--couleur-bordure); position: sticky; top: 0; z-index: 50; } /* En-tête plus large que le reste du site (demande de Ben, 2026-07-26) -- override scopé à .site-header seulement, la classe .conteneur générique (utilisée partout ailleurs) ne change pas. */ .site-header .conteneur { max-width: 1400px; } .site-header-logo { padding: 6px 20px 2px; display: flex; align-items: center; justify-content: space-between; } .site-header-nav { padding: 2px 20px 6px; } .bouton-menu-mobile { display: none; background: none; border: 1px solid var(--couleur-bordure); border-radius: 8px; width: 40px; height: 40px; font-size: 18px; line-height: 1; cursor: pointer; color: var(--couleur-texte); flex-shrink: 0; } .bouton-theme { background: none; border: 1px solid var(--couleur-bordure); border-radius: 999px; width: 36px; height: 36px; font-size: 16px; cursor: pointer; margin-left: 6px; flex-shrink: 0; } .site-logo { font-size: 21px; font-weight: 800; color: var(--couleur-texte); letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 9px; } .site-logo-texte::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--couleur-accent); flex-shrink: 0; } .site-logo-image { display: block; height: 34px; width: auto; border-radius: 50%; } .site-nav { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; row-gap: 8px; } .site-nav > a { padding: 6px 14px; border-radius: 999px; color: var(--couleur-texte); font-weight: 500; font-size: 14.5px; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .site-nav > a:hover { background: var(--couleur-accent-doux); color: var(--couleur-accent-hover); text-decoration: none; } /* Menu de langue "maison" (voir includes/header.php) -- remplace un