/* ========================================================================= clean.css — couche de design partagée du thème « clean ». Élève les primitifs Bootstrap 4 / Froala à l'identité du Pilotage (encre prune, accent teal, neutres clairs). CSS uniquement : aucun markup ni logique modifiés. Chargée APRÈS bootstrap/froala pour gagner la cascade. ========================================================================= */ :root { /* Identité ASVE (asve-vaureal.fr) : crème + prune + sarcelle. */ --ink: #312F36; /* titres, texte fort (quasi-noir prune) */ --ink-body: #44404D; /* corps — prune, ~9:1 sur crème */ --ink-muted: #6b6672; /* secondaire — ~4.7:1 sur crème (AA) */ --ink-faint: #938d97; /* méta uniquement */ --line: #efe4da; /* bordures calmes (crème-tintées) */ --line-strong:#ddcfc1; --surf: #ffffff; --bg: #FFF6EF; /* fond de page — crème chaud ASVE */ --surf-2: #f7ece2; /* en-têtes de table, zones calmes */ --teal: #0396A6; /* accent / primaire (sarcelle ASVE) */ --teal-dk: #03707d; /* liens, hover (AA sur crème/blanc) */ --teal-50: #e6f4f5; --teal-100: #c9e7ea; --ok: #2f8f63; --ok-bg: #e7f4ec; --ok-ink: #1f6b48; --ok-bd: #c5e6d3; --warn: #a9760f; --warn-bg:#faf0d6; --warn-ink:#7a5510; --warn-bd:#ecd9a6; --dang: #cf4655; --dang-bg:#fbe9eb; --dang-ink:#9a2f3b; --dang-bd:#f0c4ca; --info: #0396A6; --info-bg:#e6f4f5; --info-ink:#03707d; --info-bd:#bfe2e6; --radius: 14px; --radius-sm: 10px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(40,36,50,.05); --shadow: 0 1px 2px rgba(40,36,50,.05), 0 12px 30px -16px rgba(40,36,50,.18); --shadow-lg: 0 18px 50px -20px rgba(40,36,50,.28); --ease: cubic-bezier(.22,1,.36,1); } /* ----------------------------------------------------------------- base */ body { background: var(--bg); color: var(--ink-body); font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-size: 16px; line-height: 1.55; /* Tracking positif léger au corps (lisibilité petites tailles) — leçon Google Education. */ letter-spacing: .01em; /* Sticky footer : body en colonne flex + wrapper .app-main qui pousse le footer en bas quand le contenu est court. Les barres/overlays en position:fixed sont hors flux flex -> non affectés (l'ancien essai cassait car le contenu n'avait pas de wrapper flexible). */ min-height: 100vh; display: flex; flex-direction: column; } /* Wrapper du bloc content (inséré dans base.twig) : occupe l'espace restant. */ .app-main { flex: 1 0 auto; } /* IA désactivée (aucune clé configurée) : on masque tous les déclencheurs IA -> aucune réponse "mock" exposée à l'utilisateur. Le serveur refuse aussi enqueue (double garde). */ body.ai-off [data-exam-ai], body.ai-off [data-hw-translate], body.ai-off [data-hw-translate-btn], body.ai-off #aibrief, body.ai-off #aibrief-btn, body.ai-off #execDigestBtn, body.ai-off #execDigest, body.ai-off [data-ai-student], body.ai-off [data-ai-group], body.ai-off [data-ai-mount-all] { display: none !important; } /* Inter : activer les vraies fractions/ligatures + chiffres lisibles. */ body { font-feature-settings: "cv05" 1, "ss01" 1; } ::selection { background: var(--teal-100); color: var(--ink); } /* --------------------------------------------------------- typographie */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--ink); font-weight: 700; letter-spacing: -.014em; line-height: 1.2; text-wrap: balance; } h1, .h1 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.35rem); letter-spacing: -.02em; } h2, .h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); } h3, .h3 { font-weight: 600; } p { line-height: 1.6; } small, .text-sm, .small { letter-spacing: .015em; } a { color: var(--teal-dk); transition: color .15s var(--ease); } a:hover { color: var(--teal); text-decoration: none; } .text-muted { color: var(--ink-muted) !important; } .text-dark { color: var(--ink) !important; } hr { border-top-color: var(--line); } /* --------------------------------------------------------------- navbar */ header .navbar { padding-top: .6rem; padding-bottom: .6rem; } .navbar-brand img { transition: transform .2s var(--ease); } .navbar-brand:hover img { transform: translateY(-1px); } .navbar .nav-link { color: var(--ink-body) !important; font-weight: 600; border-radius: var(--radius-sm); transition: background .15s var(--ease), color .15s var(--ease); } .navbar .nav-link:hover { color: var(--teal-dk) !important; background: var(--teal-50); } .navbar .nav-item.active .nav-link, .navbar .nav-item.active > .nav-link { color: var(--teal-dk) !important; background: var(--teal-50); } .dropdown-menu { border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: .4rem; } .dropdown-item { border-radius: 8px; padding: .5rem .75rem; font-weight: 500; } .dropdown-item:hover { background: var(--teal-50); color: var(--teal-dk); } .dropdown-divider { border-top-color: var(--line); } /* --------------------------------------------------------------- boutons */ .btn { border-radius: var(--radius-sm); font-weight: 600; letter-spacing: .005em; transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease), transform .08s var(--ease); } .btn:active { transform: translateY(1px); } .btn:focus, .btn.focus { box-shadow: 0 0 0 3px rgba(10,138,153,.28); } /* NB : on ne stylise QUE les variantes Bootstrap standard + .btn-default. Les classes maison (btn-blue/btn-cyan/btn-pri/btn-ok/btn-list) sont appliquées de façon imprévisible (ex. btn-blue sur un