/* ============================================================
styleheader.css — Header + nav réutilisable (MathsPrime)
À appeler dans le EN PLUS du CSS propre à la page :
Police recommandée (à charger dans le ) :
============================================================ */
/* --- Variables nécessaires au header (préfixées hdr- pour ne pas
entrer en conflit avec les variables de la page hôte) --- */
:root {
--hdr-bg: #fef9ec;
--hdr-bg2: #fff5e0;
--hdr-card: #ffffff;
--hdr-blue: #3a9fd6;
--hdr-text-head: #1a2d6b;
--hdr-text-muted:#7a6e62;
--hdr-border: #ddd0b8;
}
/* ===== Barre header ===== */
.site-header {
position: sticky;
top: 0;
z-index: 100;
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);
}
.header-content {
position: relative;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 1200px;
gap: 16px;
box-sizing: border-box;
}
/* --- Logo soft à gauche --- */
.brand-soft {
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
transition: transform 0.2s ease;
}
.brand-soft:hover { transform: translateY(-1px); }
.brand-soft-logo {
height: 38px;
width: 38px;
border-radius: 11px;
object-fit: cover;
display: block;
}
.brand-soft-name {
font-family: 'Nunito', sans-serif;
font-weight: 900;
font-size: clamp(1.25rem, 3.2vw, 1.6rem);
letter-spacing: -0.02em;
color: var(--hdr-text-head);
line-height: 1;
}
.brand-soft-accent { color: var(--hdr-blue); }
/* --- Raccourcis à droite --- */
.header-nav {
display: flex;
align-items: center;
gap: 6px;
}
.header-nav-link {
font-family: 'Nunito', sans-serif;
font-weight: 700;
font-size: 15px;
color: var(--hdr-text-head);
text-decoration: none;
padding: 8px 14px;
border-radius: 10px;
transition: background 0.2s ease, color 0.2s ease;
white-space: nowrap;
}
.header-nav-link:hover {
background: rgba(0,0,0,0.04);
color: var(--hdr-blue);
}
.header-nav-cta {
font-family: 'Nunito', sans-serif;
font-weight: 800;
font-size: 15px;
color: #fff;
text-decoration: none;
padding: 10px 20px;
border-radius: 12px;
background: linear-gradient(160deg, #0d1b5e 0%, #0a6fa8 60%, #0891B2 100%);
box-shadow: 0 4px 0 #0a4a78;
transition: transform 0.15s ease, box-shadow 0.15s ease;
white-space: nowrap;
margin-left: 6px;
}
.header-nav-cta:hover {
transform: translateY(-2px);
box-shadow: 0 6px 0 #0a4a78;
color: #fff;
}
/* --- Menu déroulant "Cours" --- */
.header-dropdown { position: relative; }
.header-dropdown-toggle {
font-family: 'Nunito', sans-serif;
font-weight: 700;
font-size: 15px;
color: var(--hdr-text-head);
background: none;
border: none;
cursor: pointer;
padding: 8px 14px;
border-radius: 10px;
display: inline-flex;
align-items: center;
gap: 5px;
transition: background 0.2s ease, color 0.2s ease;
}
.header-dropdown:hover .header-dropdown-toggle {
background: rgba(0,0,0,0.04);
color: var(--hdr-blue);
}
.dd-caret {
font-size: 11px;
transition: transform 0.2s ease;
}
.header-dropdown:hover .dd-caret { transform: rotate(180deg); }
/* Menu niveau 1 (Leçons / Exercices) */
.header-dropdown-menu {
position: absolute;
top: 100%;
left: 0;
margin-top: 6px;
min-width: 200px;
background: var(--hdr-card);
border: 2px solid var(--hdr-border);
border-radius: 16px;
box-shadow: 0 10px 30px rgba(20,30,60,0.12);
padding: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
z-index: 200;
}
/* Pont invisible pour éviter la coupure au survol */
.header-dropdown::after {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 10px;
}
.header-dropdown:hover .header-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dd-branch { position: relative; }
.dd-branch-label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-family: 'Nunito', sans-serif;
font-weight: 800;
font-size: 14.5px;
color: var(--hdr-text-head);
padding: 11px 14px;
border-radius: 11px;
cursor: default;
transition: background 0.18s ease, color 0.18s ease;
}
.dd-branch:hover .dd-branch-label {
background: var(--hdr-bg2);
color: var(--hdr-blue);
}
.dd-arrow {
font-size: 16px;
color: var(--hdr-text-muted);
font-weight: 900;
}
/* Sous-menu niveau 2 (6e, 5e, …) affiché en face */
.dd-submenu {
position: absolute;
top: -8px;
left: 100%;
margin-left: 8px;
min-width: 90px;
background: var(--hdr-card);
border: 2px solid var(--hdr-border);
border-radius: 14px;
box-shadow: 0 10px 30px rgba(20,30,60,0.12);
padding: 7px;
display: flex;
flex-direction: column;
gap: 2px;
opacity: 0;
visibility: hidden;
transform: translateX(-6px);
transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.dd-branch:hover .dd-submenu {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.dd-submenu a {
font-family: 'Nunito', sans-serif;
font-weight: 800;
font-size: 14px;
color: var(--hdr-text-head);
text-decoration: none;
padding: 8px 14px;
border-radius: 9px;
transition: background 0.15s ease, color 0.15s ease;
white-space: nowrap;
}
.dd-submenu a:hover {
background: var(--hdr-blue);
color: #fff;
}
.dd-submenu a sup { font-size: 0.7em; }
/* ===== Responsive ===== */
@media (max-width: 768px) {
.site-header { padding: 10px 14px; }
.nav-desktop { display: none !important; }
.header-nav { gap: 4px; }
.header-nav-link { padding: 8px 12px; font-size: 14px; }
/* Connexion mis en valeur comme un bouton (seul raccourci visible) */
.header-connexion-link {
color: #fff !important;
background: linear-gradient(160deg, #0d1b5e 0%, #0a6fa8 60%, #0891B2 100%);
box-shadow: 0 4px 0 #0a4a78;
font-weight: 800;
padding: 10px 20px !important;
border-radius: 12px;
}
.header-connexion-link:hover {
background: linear-gradient(160deg, #0d1b5e 0%, #0a6fa8 60%, #0891B2 100%);
color: #fff !important;
}
}
/* Masqué sur PC, visible sur mobile (inverse de nav-desktop) */
.hide-desktop { display: none !important; }
@media (max-width: 768px) {
.hide-desktop { display: flex !important; }
}
@media (max-width: 480px) {
.site-header { padding: 8px 12px; }
.brand-soft-logo { height: 32px; width: 32px; }
}