/* ==========================================================================
Nouveau header (feature/nouveau-header)
Voir HEADER_NEW.md pour l'activation.
========================================================================== */
:root {
--mcm-c-text: #222;
--mcm-c-bg: #fff;
--mcm-c-accent: #f5a623; /* jaune bouton promo + barre bas */
--mcm-c-cart-badge: #ff5a66;
--mcm-c-pink: #e94596;
--mcm-c-violet: #562E74;
--mcm-c-blue: #4DCEE3;
--mcm-c-green: #9BB54D;
--mcm-c-pink-soft: #f392c1;
--mcm-c-violet-soft: #E4C0DE;
--mcm-c-blue-soft: #B6EAF2;
--mcm-c-green-soft: #D7F0E1;
--mcm-c-gray: #a8a6a4;
--mcm-c-gray-soft: #f3f3f3;
--mcm-header-h: 140px;
--mcm-radius: 8px;
--mcm-ff: "Comfortaa", "Helvetica Neue", Arial, sans-serif;
}
/* Hide ancien header lorsque le nouveau est actif */
body.mcm-new-header-active #header:not(.mcm-header),
body.mcm-new-header-active #header_meta {
display: none !important;
}
/* Neutralise la compensation Enfold (padding-top de #main pour header sticky)
#top est porté par , donc on reste sur un seul sélecteur. */
body.mcm-new-header-active#top #main,
body.mcm-new-header-active #main {
padding-top: 0 !important;
}
/* La 1re section du page builder peut aussi avoir un offset ajouté pour le
header transparent/sticky d'origine. */
body.mcm-new-header-active .avia-builder-el-0,
body.mcm-new-header-active .avia-builder-el-0 > .container,
body.mcm-new-header-active .avia-builder-el-0 .slideshow_caption,
body.mcm-new-header-active .avia-builder-el-0 .slideshow_inner_caption {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* ------- Structure ------- */
/* Bande pleine largeur, fixée en haut de l'écran */
.mcm-header-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #fff;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
z-index: 1000;
}
body.admin-bar .mcm-header-bar { top: 32px; }
@media screen and (max-width: 782px) {
body.admin-bar .mcm-header-bar { top: 0; }
#wpadminbar { display: none !important; }
html { margin-top: 0 !important; }
}
/* Compensation du header fixe (hauteur = min-height du header + shadow) */
body.mcm-new-header-active #wrap_all { padding-top: var(--mcm-header-h); }
.mcm-header {
position: relative;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 40px;
min-height: var(--mcm-header-h);
max-width: 1130px;
margin: 0 auto;
padding: 0 20px;
font-family: var(--mcm-ff);
}
.mcm-header * { box-sizing: border-box; }
.mcm-logo { justify-self: center; display: block; }
.mcm-logo img {
display: block;
height: 130px;
padding: 5px 0;
width: auto;
max-width: none;
max-height: none;
object-fit: contain;
}
/* ------- Nav principale ------- */
.mcm-nav > ul {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.mcm-nav--right > ul { justify-content: flex-end; }
.mcm-nav__item { position: static; }
.mcm-nav__item > a,
.mcm-nav__item > button {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 4px;
font: 500 15px/1 var(--mcm-ff);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--mcm-c-text);
text-decoration: none;
background: none;
border: 0;
cursor: pointer;
}
.mcm-nav__item > a:hover,
.mcm-nav__item > a[aria-expanded="true"] {
color: var(--mcm-c-violet);
}
/* Bonus / Aide dupliqués dans le nav gauche : masqués sur desktop */
.mcm-nav__item--mobile-only { display: none; }
.mcm-nav-mobile-head { display: none; }
.mcm-mega-back { display: none; }
/* PROMO badge */
.mcm-nav__item.is-badge > a {
background: var(--mcm-c-accent);
color: #fff;
border-radius: 0;
padding: 8px 14px;
}
.mcm-nav__item.is-badge > a:hover { color: #fff; }
/* Chevron pour les items qui ont un méga-menu */
.mcm-nav__item.has-mega > a::after {
content: '';
display: inline-block;
width: 0;
height: 0;
margin-left: 0;
border-top: 5px solid currentColor;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
transition: transform .2s ease;
}
.mcm-nav__item.has-mega > a[aria-expanded="true"]::after,
.mcm-nav__item.has-mega:hover > a::after {
transform: rotate(180deg);
}
/* Icônes */
.mcm-icon {
display: inline-block;
width: 22px;
height: 22px;
background: center/contain no-repeat;
}
.mcm-icon--user { background-image: url("data:image/svg+xml;utf8,"); }
.mcm-icon--search { background-image: url("data:image/svg+xml;utf8,"); }
.mcm-icon--cart { background-image: url("data:image/svg+xml;utf8,"); }
.mcm-nav__item--cart > a,
.mcm-nav__item--account > a {
position: relative;
}
.mcm-cart-count {
position: absolute;
top: 4px;
right: 0;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
background: var(--mcm-c-cart-badge);
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 18px;
text-align: center;
}
.mcm-search-toggle { line-height: 0; }
/* ------- Méga-menu ------- */
.mcm-megamenu {
position: absolute;
left: 0;
right: 0;
top: 100%;
display: none;
padding: 0;
color: #fff;
box-shadow: 0 12px 32px rgba(0,0,0,0.12);
z-index: 400;
}
/* Pont invisible entre le lien (li) et le méga-menu : évite la perte de hover
quand le curseur passe dans l'espace vide entre les deux. */
.mcm-megamenu::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: -60px;
height: 60px;
}
.mcm-nav__item.has-mega:hover > .mcm-megamenu,
.mcm-nav__item.has-mega > a[aria-expanded="true"] + .mcm-megamenu,
.mcm-megamenu.is-open {
display: block;
}
.mcm-megamenu__inner {
display: grid;
grid-template-columns: 3fr 1.5fr;
align-items: stretch;
gap: 0;
max-width: 1400px;
margin: 0 auto;
}
.mcm-megamenu__left {
display: flex;
flex-direction: column;
}
.mcm-megamenu__cols {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
padding: 32px 32px 20px;
flex: 1;
}
/* Thèmes par item : la couleur forte couvre tout le bloc gauche (cols + footer),
la teinte douce couvre l'aside. */
#mcm-mega-produits .mcm-megamenu__left { background: var(--mcm-c-pink); }
#mcm-mega-produits .mcm-aside { background: var(--mcm-c-pink-soft); }
#mcm-mega-enseignants .mcm-megamenu__left { background: var(--mcm-c-violet); }
#mcm-mega-enseignants .mcm-aside { background: var(--mcm-c-violet-soft); }
#mcm-mega-bonus .mcm-megamenu__left,
#mcm-mega-bonus-mobile .mcm-megamenu__left { background: var(--mcm-c-blue); }
#mcm-mega-bonus .mcm-aside,
#mcm-mega-bonus-mobile .mcm-aside { background: var(--mcm-c-blue-soft); }
#mcm-mega-aide .mcm-megamenu__left,
#mcm-mega-aide-mobile .mcm-megamenu__left { background: var(--mcm-c-green); }
#mcm-mega-aide .mcm-aside,
#mcm-mega-aide-mobile .mcm-aside { background: var(--mcm-c-green-soft); }
#mcm-mega-compte .mcm-megamenu__left { background: var(--mcm-c-gray); }
#mcm-mega-compte .mcm-aside { background: var(--mcm-c-gray-soft); }
/* Colonnes listes */
.mcm-col__title {
margin: 0 0 12px;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.mcm-col--list ul {
margin: 0;
padding: 0;
list-style: none;
}
.mcm-col--list li { margin-bottom: 0; }
.mcm-col--list li.has-break { margin-top: 14px; }
.mcm-col--list a {
color: #fff;
font-size: 14px;
font-weight: 300;
letter-spacing: 0.1em;
text-decoration: none;
}
.mcm-col--list a:hover { text-decoration: underline; }
.mcm-col--list .is-strong > a { font-weight: 700; }
/* Colonne icône : texte AU-DESSUS de l'icône */
.mcm-col--icon {
display: flex;
flex-direction: column-reverse;
align-items: center;
justify-content: flex-end;
gap: 10px;
padding: 16px 8px;
color: #fff;
text-decoration: none;
text-align: center;
}
.mcm-col--icon .mcm-col__title {
margin: 0;
font-size: 12px;
}
/* Enseignants : 1re colonne (texte) ≈ 40 %, 3 colonnes icône élargies pour titres sur 2 lignes */
#mcm-mega-enseignants .mcm-megamenu__cols {
grid-template-columns: 2fr 1fr 1fr 1fr;
align-items: start;
}
/* Enseignants : titres des pictos alignés en haut avec le titre de la 1re colonne, interligne resserré */
#mcm-mega-enseignants .mcm-col--icon { padding-top: 0; }
#mcm-mega-enseignants .mcm-col--icon .mcm-col__title,
#mcm-mega-bonus .mcm-col--icon .mcm-col__title,
#mcm-mega-aide .mcm-col--icon .mcm-col__title,
#mcm-mega-compte .mcm-col--icon .mcm-col__title { line-height: 1.15; }
/* Bonus & Aide : 4 colonnes icônes resserrées et centrées horizontalement */
#mcm-mega-bonus .mcm-megamenu__cols,
#mcm-mega-aide .mcm-megamenu__cols {
grid-template-columns: repeat(4, 140px);
justify-content: center;
gap: 0;
}
#mcm-mega-bonus .mcm-col--icon,
#mcm-mega-aide .mcm-col--icon {
max-width: 140px;
justify-self: center;
}
#mcm-mega-bonus .mcm-col--icon { padding: 16px 5px; }
/* Compte : 5 colonnes icônes resserrées et centrées horizontalement */
#mcm-mega-compte .mcm-megamenu__cols {
grid-template-columns: repeat(5, 140px);
justify-content: center;
gap: 0;
}
#mcm-mega-compte .mcm-col--icon {
max-width: 140px;
justify-self: center;
}
/* Aside Compte : descriptif lisible sur fond gris clair */
.mcm-aside--gray h3,
.mcm-aside--gray p { color: #222; }
.mcm-aside--gray { color: #222; }
/* Formulaire login dans l'aside Compte (mêmes pills que la newsletter) */
.mcm-login {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
}
.mcm-login__row {
display: flex;
align-items: center;
background: #fff;
border-radius: 8px;
overflow: hidden;
}
.mcm-login input[type="text"],
.mcm-login input[type="email"],
.mcm-login input[type="password"] {
flex: 1;
min-width: 0;
padding: 10px 14px;
border: 0 !important;
border-radius: 0 !important;
font: inherit;
font-size: 16px;
background: transparent !important;
margin: 0 !important;
color: #1B77B5;
}
.mcm-login input::placeholder { color: #1B77B5; opacity: 1; }
.mcm-login button[type="submit"] {
padding: 8px 14px;
margin: 4px;
border: 0;
border-radius: 12px;
background: var(--mcm-c-accent);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.mcm-login__links {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 6px;
}
.mcm-login__links a {
font-size: 14px;
font-weight: 700;
color: #222;
text-decoration: none;
}
.mcm-login__links a:hover { text-decoration: underline; }
.mcm-col__icon {
display: flex;
align-items: center;
justify-content: center;
width: 95px;
height: 95px;
border-radius: 50%;
background: #fff;
}
.mcm-col__icon img { max-width: 75px; max-height: 75px; }
.mcm-icon-placeholder {
width: 32px;
height: 32px;
border: 2px dashed rgba(255,255,255,0.5);
border-radius: 50%;
}
/* Aside */
.mcm-aside {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 14px;
padding: 32px 28px;
color: #fff;
text-align: center;
}
.mcm-aside h3 {
margin: 0;
font-size: 17px;
text-transform: uppercase;
font-weight: 800;
}
/* Titre aside : couleur forte du thème */
.mcm-aside--pink h3 { color: var(--mcm-c-pink); }
.mcm-aside--violet h3 { color: var(--mcm-c-violet); }
.mcm-aside--blue h3 { color: var(--mcm-c-blue); }
.mcm-aside--green h3 { color: var(--mcm-c-green); }
.mcm-aside p {
margin: 0;
font-size: 14px;
line-height: 1.45;
}
/* Aside Bonus : texte -10% en noir */
.mcm-aside--blue p { color: #222; }
/* Aside Produits : descriptif en noir */
.mcm-aside--pink p { color: #222; }
/* Aside Enseignants : descriptif en noir */
.mcm-aside--violet p { color: #222; }
/* Aside Bonus : "pas de spam" en jaune, plus grand */
.mcm-aside--blue .mcm-newsletter small { color: var(--mcm-c-accent); opacity: 1; font-size: 14px; }
/* Aside Bonus : input email */
.mcm-aside--blue .mcm-newsletter input {
color: #1B77B5;
border: 1px solid #ccc;
}
.mcm-aside--blue .mcm-newsletter input::placeholder { color: #1B77B5; opacity: 1; }
.mcm-aside__cta {
display: inline-flex;
align-items: center;
gap: 8px;
align-self: center;
padding: 6px 24px 6px 20px;
background: #fff;
color: var(--mcm-c-text);
border-radius: 999px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
overflow: visible;
position: relative;
}
.mcm-aside__cta-icon {
position: absolute;
width: 40px;
height: 40px;
object-fit: contain;
right: -18px;
top: 50%;
transform: translateY(-60%);
}
/* Couleur du CTA par thème : reprend la teinte forte du méga-menu */
.mcm-aside--pink .mcm-aside__cta { background: var(--mcm-c-pink); color: #fff; }
.mcm-aside--violet .mcm-aside__cta { background: var(--mcm-c-violet); color: #fff; }
.mcm-aside--blue .mcm-aside__cta { background: var(--mcm-c-blue); color: #fff; }
.mcm-aside--green .mcm-aside__cta { background: var(--mcm-c-green); color: #fff; }
.mcm-aside__img {
max-width: 220px;
align-self: center;
}
/* Newsletter */
.mcm-newsletter {
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
}
.mcm-newsletter__row {
display: flex;
align-items: center;
background: #fff;
border-radius: 8px;
overflow: hidden;
}
.mcm-newsletter input {
flex: 1;
min-width: 0;
padding: 10px 14px;
border: 0 !important;
border-radius: 0 !important;
font: inherit;
font-size: 16px;
background: transparent !important;
margin: 0 !important;
}
.mcm-newsletter button {
padding: 8px 14px;
margin: 4px;
border: 0;
border-radius: 12px;
background: var(--mcm-c-accent);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.mcm-newsletter__icon {
width: 24px;
height: 24px;
object-fit: contain;
}
.mcm-arrow {
display: inline-block;
width: 0; height: 0;
border-left: 8px solid #fff;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
.mcm-newsletter small {
font-size: 11px;
opacity: 0.85;
}
/* Footer de mega-menu (dans la zone gauche uniquement : sous les 4 colonnes) */
.mcm-megamenu__footer {
padding: 0 32px 24px;
}
.mcm-megamenu__footer form {
max-width: 520px;
margin: 0 auto;
}
/* Barre de recherche : loupe hors pilule, input + GO dans la pilule blanche */
.mcm-mega-search {
display: flex;
align-items: center;
gap: 16px;
background: transparent;
}
.mcm-mega-search__icon {
flex: 0 0 38px;
width: 38px;
height: 38px;
background: center/contain no-repeat;
background-image: url("data:image/svg+xml;utf8,");
}
.mcm-mega-search__pill {
display: flex;
flex: 1;
align-items: center;
gap: 8px;
height: 42px;
background: #fff;
border-radius: 999px;
padding: 0 4px 0 22px;
}
.mcm-mega-search input[type="search"] {
flex: 1;
min-width: 0;
height: auto;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
-webkit-appearance: none;
appearance: none;
padding: 0 !important;
margin: 0 !important;
font-size: 14px;
line-height: 1.2;
color: var(--mcm-c-text);
background: transparent !important;
border-radius: 0 !important;
}
.mcm-mega-search input[type="search"]::placeholder { color: #7ca7b5; opacity: 1; }
.mcm-mega-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.mcm-mega-search button {
flex: 0 0 auto;
height: 34px;
padding: 0 20px;
background: var(--mcm-c-accent);
color: #fff;
border: 0;
border-radius: 999px;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1;
cursor: pointer;
}
.mcm-promo-banner {
text-align: left;
}
.mcm-promo-banner__text {
margin: 0;
font-size: 20px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.03em;
line-height: 1.6;
color: #fff;
}
.mcm-promo-banner__text .hl-yellow,
.mcm-promo-banner__text .hl-pink {
padding: 2px 10px;
border-radius: 4px;
color: #fff;
}
.mcm-promo-banner__text .hl-yellow { background: var(--mcm-c-accent); }
.mcm-promo-banner__text .hl-pink { background: var(--mcm-c-pink); }
.mcm-promo-banner__note {
margin: 6px 0 0;
font-size: 12px;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: rgba(255,255,255,0.9);
}
/* Overlay recherche : toujours invisible (gb-search gère son propre overlay).
Le formulaire reste dans le DOM pour que gb-search le hijacke au focus. */
.mcm-search-overlay,
.mcm-search-overlay.is-open {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
pointer-events: none;
}
/* ------- Burger mobile ------- */
.mcm-burger {
display: none;
width: 40px;
height: 40px;
background: none;
border: 0;
padding: 0;
cursor: pointer;
justify-self: start;
}
.mcm-burger span {
display: block;
width: 26px;
height: 3px;
margin: 5px auto;
background: var(--mcm-c-text);
border-radius: 2px;
transition: transform .2s, opacity .2s;
}
.mcm-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.mcm-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mcm-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* ============ Responsive ============ */
@media (max-width: 1200px) {
.mcm-nav__item > a,
.mcm-nav__item > button { padding: 12px 10px; font-size: 12px; }
.mcm-nav__item--account .mcm-nav__label { display: none; }
}
@media (max-width: 1024px) {
.mcm-header {
grid-template-columns: 1fr auto 1fr;
padding: 0 16px;
min-height: 106px;
}
body.mcm-new-header-active #wrap_all { padding-top: 106px; }
.mcm-burger {
display: block;
grid-column: 1;
grid-row: 1;
}
/* En-tête du panneau mobile (logo + bouton fermer) */
.mcm-nav-mobile-head {
display: grid;
grid-template-columns: 40px 1fr 40px;
align-items: center;
padding: 16px 20px;
}
.mcm-nav-mobile-logo {
display: block;
grid-column: 2;
justify-self: center;
}
.mcm-nav-mobile-logo img { height: 80px; width: auto; }
.mcm-nav-close {
grid-column: 3;
justify-self: end;
background: none;
border: 0;
font-size: 28px;
line-height: 1;
padding: 4px 8px;
cursor: pointer;
color: var(--mcm-c-text);
}
/* Panneau principal — pleine largeur */
.mcm-nav--left {
position: fixed;
top: 0; bottom: 0;
left: 0;
width: 100%;
background: #fff;
transform: translateX(-100%);
transition: transform .25s ease;
overflow-y: auto;
padding: 0 0 20px;
z-index: 999;
}
.mcm-nav--left.is-open { transform: translateX(0); }
.mcm-nav--left > ul {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.mcm-nav--left .mcm-nav__item { border-top: 1px solid #eee; }
.mcm-nav--left .mcm-nav__item--mobile-only { display: list-item; }
.mcm-nav--left .mcm-nav__item > a {
display: flex;
justify-content: space-between;
padding: 16px 20px;
font-size: 16px;
}
/* Promo : en dernier dans la nav mobile, sans fond jaune */
.mcm-nav--left .mcm-nav__item.is-badge { order: 99; }
.mcm-nav--left .mcm-nav__item.is-badge > a {
background: none;
color: var(--mcm-c-text);
padding: 16px 20px;
}
/* Chevron vers la droite pour indiquer un sous-panneau */
.mcm-nav--left .mcm-nav__item.has-mega > a::after {
transform: rotate(-90deg);
}
/* ---- Sous-panneaux (megamenus) en slide-over ---- */
.mcm-nav--left .mcm-megamenu {
position: fixed;
top: 0; bottom: 0;
left: 0;
width: 100%;
background: #fff;
overflow-y: auto;
z-index: 1000;
box-shadow: none;
padding: 0 0 20px;
visibility: hidden;
transform: translateX(100%);
transition: transform .25s ease, visibility 0s .25s;
}
.mcm-nav--left .mcm-megamenu::before { display: none; }
.mcm-nav--left .mcm-megamenu.is-open {
visibility: visible;
transform: translateX(0);
transition: transform .25s ease, visibility 0s 0s;
}
/* Bouton retour en haut du sous-panneau */
.mcm-mega-back {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 16px 20px;
background: none;
border: 0;
border-bottom: 1px solid #eee;
font: 700 14px/1 var(--mcm-ff);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--mcm-c-text);
cursor: pointer;
}
.mcm-mega-back__arrow {
font-size: 20px;
}
/* Contenu du sous-panneau */
.mcm-nav--left .mcm-megamenu__inner {
display: flex;
flex-direction: column;
}
.mcm-nav--left .mcm-megamenu__left { flex-direction: column; }
.mcm-nav--left .mcm-megamenu__cols {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 16px 20px;
gap: 12px;
}
.mcm-nav--left .mcm-megamenu__footer { padding: 12px 20px; }
/* Colonnes icônes en grille horizontale sur mobile */
.mcm-nav--left .mcm-col--icon {
flex-direction: row;
justify-content: flex-start;
padding: 8px 0;
gap: 12px;
}
.mcm-nav--left .mcm-col__icon {
width: 44px;
height: 44px;
flex: 0 0 44px;
}
.mcm-nav--left .mcm-col__icon img { max-width: 28px; max-height: 28px; }
.mcm-nav--left .mcm-col--icon .mcm-col__title {
text-align: left;
font-size: 13px;
}
/* Aside : compact sur mobile */
.mcm-nav--left .mcm-aside {
padding: 16px 20px;
gap: 10px;
}
.mcm-nav--left .mcm-aside__img { max-width: 100px; }
/* Barre de recherche compacte */
.mcm-nav--left .mcm-mega-search { flex-wrap: nowrap; }
.mcm-nav--left .mcm-mega-search__icon { flex: 0 0 24px; width: 24px; height: 24px; }
/* Enseignants : texte pleine largeur, pictos services masqués sur mobile */
.mcm-nav--left [id*="enseignants"] .mcm-megamenu__cols {
grid-template-columns: 1fr !important;
}
.mcm-nav--left [id*="enseignants"] .mcm-megamenu__cols > .mcm-col--list {
grid-column: 1 / -1;
}
.mcm-nav--left [id*="enseignants"] .mcm-col--icon { display: none; }
.mcm-nav--left [id*="enseignants"] .mcm-col__icon {
width: 52px;
height: 52px;
flex: 0 0 52px;
}
/* Bonus / Aide : colonnes icônes en grille 2x2 */
.mcm-nav--left [id*="bonus"] .mcm-megamenu__cols,
.mcm-nav--left [id*="aide"] .mcm-megamenu__cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.mcm-nav--left [id*="bonus"] .mcm-col--icon,
.mcm-nav--left [id*="aide"] .mcm-col--icon {
flex-direction: column-reverse;
max-width: none;
padding: 10px 4px;
gap: 6px;
text-align: center;
justify-content: flex-end;
}
.mcm-nav--left [id*="bonus"] .mcm-col--icon .mcm-col__title,
.mcm-nav--left [id*="aide"] .mcm-col--icon .mcm-col__title { text-align: center; }
/* Bonus / Aide : pictos agrandis sur mobile */
.mcm-nav--left [id*="bonus"] .mcm-col__icon,
.mcm-nav--left [id*="aide"] .mcm-col__icon {
width: 80px;
height: 80px;
flex: 0 0 80px;
}
.mcm-nav--left [id*="bonus"] .mcm-col__icon img,
.mcm-nav--left [id*="aide"] .mcm-col__icon img {
max-width: 60px;
max-height: 60px;
}
/* Placement explicite dans la grille */
.mcm-header { position: relative; }
.mcm-logo {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.mcm-nav--right { grid-column: 3; grid-row: 1; justify-self: end; }
/* Nav droite : on garde uniquement les icônes */
.mcm-nav--right .mcm-nav__item:not(.mcm-nav__item--account):not(.mcm-nav__item--search):not(.mcm-nav__item--cart) {
display: none;
}
.mcm-nav--right .mcm-nav__label { display: none; }
.mcm-nav--right .mcm-nav__item > a,
.mcm-nav--right .mcm-nav__item > button { padding: 8px; }
.mcm-nav--right .mcm-icon { width: 28px; height: 28px; }
.mcm-logo img { height: 90px; padding: 8px 0; }
/* Loupe de recherche à gauche du logo */
.mcm-nav__item--search {
position: absolute;
left: 52px;
top: 50%;
transform: translateY(-50%);
}
/* Marges symétriques entre icônes et logo */
.mcm-burger { margin-right: 4px; }
.mcm-nav--right > ul { gap: 0; }
/* Backdrop */
body.mcm-nav-open::after {
content: '';
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
z-index: 998;
}
body.mcm-nav-open { overflow: hidden; }
html { overflow-x: hidden; }
}
@media (max-width: 480px) {
.mcm-header {
padding: 0 10px;
min-height: 96px;
}
body.mcm-new-header-active #wrap_all { padding-top: 96px; }
.mcm-logo img { height: 102px; padding: 7px 0; }
.mcm-nav__item--search { left: 46px; }
}
/* ==========================================================================
Newsletter — loader bouton + popup notif (succès / erreur)
========================================================================== */
.mcm-newsletter button[type="submit"] { position: relative; }
.mcm-newsletter button.is-loading .mcm-newsletter__icon,
.mcm-newsletter button.is-loading .mcm-arrow { visibility: hidden; }
.mcm-newsletter button.is-loading::after {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 18px; height: 18px;
margin: -9px 0 0 -9px;
border: 2px solid rgba(255,255,255,0.4);
border-top-color: #fff;
border-radius: 50%;
animation: mcm-spin 0.7s linear infinite;
}
@keyframes mcm-spin { to { transform: rotate(360deg); } }
.mcm-notif {
position: fixed;
inset: 0;
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s ease;
}
.mcm-notif.is-open { opacity: 1; }
.mcm-notif.is-closing { opacity: 0; }
.mcm-notif__backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.45);
}
.mcm-notif__box {
position: relative;
max-width: 460px;
width: calc(100% - 32px);
background: #fff;
color: var(--mcm-c-text);
padding: 28px 32px;
border-radius: 10px;
box-shadow: 0 12px 40px rgba(0,0,0,0.25);
font-family: var(--mcm-ff);
transform: translateY(-8px);
transition: transform 0.2s ease;
}
.mcm-notif.is-open .mcm-notif__box { transform: translateY(0); }
.mcm-notif--success .mcm-notif__box { border-top: 4px solid var(--mcm-c-green); }
.mcm-notif--error .mcm-notif__box { border-top: 4px solid var(--mcm-c-cart-badge); }
.mcm-notif__close {
position: absolute;
top: 6px;
right: 10px;
width: 32px;
height: 32px;
background: transparent;
border: 0;
font-size: 22px;
line-height: 1;
cursor: pointer;
color: #888;
}
.mcm-notif__close:hover { color: #222; }
.mcm-notif__msg {
margin: 0;
font-size: 16px;
line-height: 1.5;
text-align: center;
}