/* ============================================================
styleheaderexo.css — Header sobre centré (pages d'exercices)
Même esprit que styleheader.css (brand-soft), mais :
- logo + nom centrés
- dimensions légèrement augmentées (seul élément du header)
- neutralise les anciennes règles header de stylesexos.css
À charger dans le APRÈS stylesexos.css :
============================================================ */
/* --- Variables header (préfixées hdr-) --- */
:root {
--hdr-bg: #fef9ec;
--hdr-blue: #3a9fd6;
--hdr-text-head: #1a2d6b;
}
/* ===== Barre header ===== */
.site-header {
position: sticky;
top: 0;
z-index: 100;
overflow: visible; /* annule overflow:hidden de stylesexos */
display: flex;
align-items: center;
justify-content: center;
padding: 14px 20px;
background: rgba(254, 249, 236, 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
/* Neutralise le liseré dégradé défini dans stylesexos.css */
.site-header::before {
content: none;
}
.header-content {
position: relative;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between; /* brand à gauche, Mode éval à droite */
width: 100%;
max-width: 1200px;
padding: 0;
gap: 16px;
box-sizing: border-box;
}
/* --- Brand soft centrée --- */
.brand-soft {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
transition: transform 0.2s ease;
}
.brand-soft:hover { transform: translateY(-1px); }
.brand-soft-logo {
height: 42px;
width: 42px;
border-radius: 12px;
object-fit: cover;
display: block;
}
.brand-soft-name {
font-family: 'Nunito', sans-serif;
font-weight: 900;
font-size: clamp(1.35rem, 4vw, 1.8rem);
letter-spacing: -0.02em;
color: var(--hdr-text-head);
line-height: 1;
}
.brand-soft-accent { color: var(--hdr-blue); }
/* --- Mode éval intégré au header (à droite) ---
Le toggle lui-même (.eval-toggle, .eval-toggle-circle, .active)
garde ses styles de stylesexos.css ; on ne redéfinit ici que
le conteneur, qui n'est plus un bloc flottant sous le header. */
.site-header .eval-toggle-container {
margin: 0;
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.site-header .eval-toggle-label {
margin-right: 0;
white-space: nowrap;
}
/* ===== Responsive ===== */
@media (max-width: 768px) {
.site-header { padding: 10px 14px; }
.brand-soft-logo { height: 36px; width: 36px; border-radius: 10px; }
.site-header .eval-toggle-container { gap: 8px; }
.site-header .eval-toggle-label { font-size: 14px; }
}
@media (max-width: 480px) {
.site-header { padding: 8px 12px; }
.brand-soft-logo { height: 32px; width: 32px; border-radius: 9px; }
.brand-soft-name { font-size: 1.25rem; }
/* Libellé toujours visible, en version compacte */
.site-header .eval-toggle-container { gap: 6px; }
.site-header .eval-toggle-label { font-size: 13px; }
.site-header .eval-toggle { width: 48px; height: 26px; }
.site-header .eval-toggle-circle { width: 20px; height: 20px; }
.site-header .eval-toggle.active .eval-toggle-circle { transform: translateX(22px); }
}