/* ═══════════════════════════════════════════════════════════════════════ HEADER & FOOTER — MONDES PERDUS Cohérent avec la palette et la typographie des templates articles. ═══════════════════════════════════════════════════════════════════════ */ /* ── 0. Tokens de design ────────────────────────────────────────────── */ :root { --mp-bg: #2c2416; /* brun très foncé — fond header/footer */ --mp-bg-hover: #372c1b; /* hover léger sur fond sombre */ --mp-bg-dropdown: #241e12; /* dropdown légèrement plus sombre */ --mp-border: rgba(196, 154, 108, 0.18); --mp-text: #e8e0d0; /* texte clair sur fond sombre */ --mp-text-muted: #9e8e7a; /* texte atténué */ --mp-accent: #c49a6c; /* doré chaud — cohérent avec les articles */ --mp-accent-hover: #ddb07a; --mp-header-h: 110px; --mp-r: 5px; /* border-radius standard */ --mp-ease: 0.18s ease; } /* ── 1. Reset global ────────────────────────────────────────────────── */ /* Supprime la marge/bande blanche par défaut du navigateur */ html, body { margin: 0; padding: 0; } /* Barre d'administration WordPress — WordPress ajoute padding-top: 32px sur quand la barre est visible. On l'annule pour que le header sticky colle bien en haut de page. */ html.wp-toolbar { padding-top: 0 !important; } /* ── 2. Suppression du header/footer natif GeneratePress ────────────── */ #site-header, .site-header, #site-footer, .site-footer, .generate-back-to-top { display: none !important; } /* ══════════════════════════════════════════════════════════════════════ 2. HEADER ══════════════════════════════════════════════════════════════════════ */ #mp-header { position: sticky; top: 0; z-index: 1000; background: var(--mp-bg); border-bottom: 1px solid var(--mp-border); height: var(--mp-header-h); /* Légère ombre pour marquer la séparation avec le contenu */ box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35); } .mp-header-inner { display: flex; align-items: center; justify-content: space-between; max-width: 1100px; margin: 0 auto; padding: 0 2.5rem; height: 100%; } /* ── Logo ── */ .mp-logo-link { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; border-bottom: none !important; outline-offset: 4px; } .mp-logo { max-height: 90px; width: auto; display: block; transition: opacity var(--mp-ease); } .mp-logo-link:hover .mp-logo { opacity: 0.82; } /* ── Navigation ── */ .mp-nav { display: flex; align-items: center; } .mp-nav-list { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: 0; } .mp-nav-item { position: relative; } .mp-nav-link { display: inline-flex; align-items: center; gap: 5px; padding: 0.45rem 1.05rem; font-family: 'Source Serif 4', Georgia, serif; font-size: 11.5px; font-weight: 300; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mp-text); text-decoration: none; border-bottom: 2px solid transparent !important; white-space: nowrap; transition: color var(--mp-ease), border-color var(--mp-ease); } .mp-nav-link:hover, .mp-nav-item.mp-dropdown--open > .mp-nav-link { color: var(--mp-accent); border-bottom-color: var(--mp-accent) !important; } /* Chevron du menu déroulant */ .mp-chevron { flex-shrink: 0; opacity: 0.65; transition: transform var(--mp-ease), opacity var(--mp-ease); } .mp-has-dropdown:hover .mp-chevron, .mp-has-dropdown.mp-dropdown--open .mp-chevron { transform: rotate(180deg); opacity: 1; } /* ── Menu déroulant Encyclopédie ── */ .mp-dropdown { position: absolute; top: calc(100% + 4px); right: 0; min-width: 210px; background: var(--mp-bg-dropdown); border: 1px solid var(--mp-border); border-radius: var(--mp-r); list-style: none; margin: 0; padding: 0.5rem 0; /* Animation d'apparition */ opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--mp-ease), transform var(--mp-ease), visibility var(--mp-ease); pointer-events: none; z-index: 200; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); } /* Affichage au survol (desktop) */ .mp-has-dropdown:hover .mp-dropdown { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* Petit pont invisible pour éviter le gap entre lien et dropdown */ .mp-has-dropdown::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 6px; } .mp-dropdown-link { display: block; padding: 0.7rem 1.3rem; font-family: 'Source Serif 4', Georgia, serif; font-size: 13.5px; font-weight: 300; letter-spacing: 0.03em; color: var(--mp-text); text-decoration: none; border-bottom: none !important; transition: color var(--mp-ease), background var(--mp-ease); } .mp-dropdown-link:hover { color: var(--mp-accent); background: var(--mp-bg-hover); } /* Trait d'accroche au-dessus du premier item */ .mp-dropdown li:first-child .mp-dropdown-link { border-top: 1px solid var(--mp-border) !important; border-radius: var(--mp-r) var(--mp-r) 0 0; } .mp-dropdown li:last-child .mp-dropdown-link { border-radius: 0 0 var(--mp-r) var(--mp-r); } /* ── Bouton hamburger ── */ .mp-hamburger { display: none; /* Masqué sur desktop */ flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 7px; border-radius: var(--mp-r); transition: background var(--mp-ease); -webkit-tap-highlight-color: transparent; } .mp-hamburger:hover { background: var(--mp-bg-hover); } .mp-hamburger-bar { display: block; width: 21px; height: 1.5px; background: var(--mp-text); border-radius: 2px; transition: transform 0.24s ease, opacity 0.18s ease; transform-origin: center; } /* Animation → croix */ .mp-hamburger--active .mp-hamburger-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .mp-hamburger--active .mp-hamburger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); } .mp-hamburger--active .mp-hamburger-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ══════════════════════════════════════════════════════════════════════ 3. FOOTER ══════════════════════════════════════════════════════════════════════ */ #mp-footer { background: var(--mp-bg); border-top: 1px solid var(--mp-border); padding: 3.5rem 0 0; font-family: 'Source Serif 4', Georgia, serif; /* Légère ligne décorative au sommet */ box-shadow: 0 -1px 0 rgba(196, 154, 108, 0.06); } .mp-footer-inner { max-width: 1100px; margin: 0 auto; padding: 0 2.5rem; } /* ── Grille 3 colonnes ── */ .mp-footer-grid { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 3rem 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--mp-border); } .mp-footer-heading { font-family: 'Playfair Display', Georgia, serif; font-size: 13px; font-weight: 700; color: var(--mp-text); letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 1rem; } .mp-footer-text { font-size: 13.5px; font-weight: 300; color: var(--mp-text-muted); line-height: 1.65; margin: 0 0 0.85rem; } /* ── Contact ── */ .mp-footer-email { display: inline-block; font-size: 13.5px; font-weight: 300; color: var(--mp-accent); text-decoration: none; border-bottom: 1px solid rgba(196, 154, 108, 0.28) !important; transition: color var(--mp-ease), border-color var(--mp-ease); } .mp-footer-email:hover { color: var(--mp-accent-hover); border-bottom-color: var(--mp-accent-hover) !important; } /* ── Newsletter ── */ .mp-newsletter-form { margin-top: 0.25rem; } .mp-newsletter-row { display: flex; border: 1px solid var(--mp-border); border-radius: var(--mp-r); overflow: hidden; transition: border-color var(--mp-ease); } .mp-newsletter-row:focus-within { border-color: rgba(196, 154, 108, 0.55); } .mp-newsletter-input { flex: 1; min-width: 0; padding: 0.7rem 0.95rem; background: rgba(255, 255, 255, 0.04); border: none; outline: none; font-family: 'Source Serif 4', Georgia, serif; font-size: 13px; font-weight: 300; color: var(--mp-text); } .mp-newsletter-input::placeholder { color: var(--mp-text-muted); } .mp-newsletter-btn { flex-shrink: 0; padding: 0.7rem 1.1rem; background: var(--mp-accent); color: #1c1a17; border: none; cursor: pointer; font-family: 'Source Serif 4', Georgia, serif; font-size: 11px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; transition: background var(--mp-ease); } .mp-newsletter-btn:hover { background: var(--mp-accent-hover); } /* Espace entre la ligne prénom et la ligne e-mail */ .mp-newsletter-row + .mp-newsletter-row { margin-top: 0.6rem; } @media (max-width: 480px) { .mp-newsletter-row--single .mp-newsletter-input { border-radius: var(--mp-r); } } /* Case de consentement */ .mp-newsletter-consent { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.7rem; font-size: 11.5px; font-weight: 300; line-height: 1.5; color: var(--mp-text-muted); } .mp-newsletter-consent input { margin-top: 0.15rem; accent-color: var(--mp-accent); flex-shrink: 0; } .mp-newsletter-consent a { color: var(--mp-accent); text-decoration: none; border-bottom: 1px solid rgba(196, 154, 108, 0.28) !important; } /* Message de retour (succès / erreur) */ .mp-newsletter-status { margin: 0.6rem 0 0; font-size: 12px; font-weight: 300; min-height: 1em; } .mp-newsletter-status--ok { color: var(--mp-accent-hover); } .mp-newsletter-status--err { color: #d98b6a; } /* ── Liens légaux ── */ .mp-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; } .mp-footer-links a { font-size: 13.5px; font-weight: 300; color: var(--mp-text-muted); text-decoration: none; border-bottom: none !important; transition: color var(--mp-ease); } .mp-footer-links a:hover { color: var(--mp-accent); } /* ── Barre copyright ── */ .mp-footer-bottom { padding: 1.3rem 0; text-align: center; } .mp-footer-bottom p { font-size: 11.5px; font-weight: 300; letter-spacing: 0.09em; color: var(--mp-text-muted); margin: 0; } /* ══════════════════════════════════════════════════════════════════════ 4. ACCESSIBILITÉ ══════════════════════════════════════════════════════════════════════ */ /* Classe helper screen-reader-text (WordPress standard) */ .mp-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Focus visible soigné */ #mp-header a:focus-visible, #mp-header button:focus-visible, #mp-footer a:focus-visible, #mp-footer button:focus-visible, #mp-footer input:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 3px; border-radius: 2px; } /* ══════════════════════════════════════════════════════════════════════ 5. RESPONSIVE ══════════════════════════════════════════════════════════════════════ */ /* ── Tablette / mobile (< 900 px) ── */ @media (max-width: 900px) { /* Affiche le hamburger */ .mp-hamburger { display: flex; } /* Nav en panneau plein écran sous le header */ .mp-nav { position: fixed; top: var(--mp-header-h); left: 0; right: 0; bottom: 0; background: var(--mp-bg); border-top: 1px solid var(--mp-border); padding: 1.75rem 1.75rem 3rem; overflow-y: auto; /* Caché par défaut */ opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease; z-index: 999; } .mp-nav--open { opacity: 1; visibility: visible; transform: translateY(0); } /* Empêche le scroll du body quand le menu est ouvert */ body.mp-nav-is-open { overflow: hidden; } .mp-nav-list { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; } .mp-nav-item { width: 100%; border-bottom: 1px solid var(--mp-border); } .mp-nav-link { font-size: 14.5px; letter-spacing: 0.12em; padding: 1rem 0.25rem; width: 100%; border-bottom: none !important; justify-content: space-between; } .mp-nav-link:hover { border-bottom: none !important; } /* Dropdown mobile : s'ouvre vers le bas au clic */ .mp-dropdown { position: static; min-width: 0; width: 100%; background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 0 0 0.5rem; /* État fermé */ opacity: 0; visibility: hidden; max-height: 0; overflow: hidden; transform: none; transition: opacity 0.2s ease, max-height 0.28s ease, visibility 0.2s ease; pointer-events: none; } .mp-has-dropdown::after { display: none; /* Retire le pont invisible (inutile en mobile) */ } .mp-has-dropdown.mp-dropdown--open .mp-dropdown { opacity: 1; visibility: visible; max-height: 220px; pointer-events: auto; } .mp-dropdown li:first-child .mp-dropdown-link, .mp-dropdown li:last-child .mp-dropdown-link { border: none !important; border-radius: 0; } .mp-dropdown-link { padding: 0.6rem 1rem 0.6rem 1.25rem; font-size: 13.5px; color: var(--mp-text-muted); background: transparent; } .mp-dropdown-link:hover { background: transparent; color: var(--mp-accent); } /* Footer */ .mp-footer-grid { grid-template-columns: 1fr; gap: 2rem; } .mp-footer-col--newsletter { order: -1; /* Newsletter en premier sur mobile */ } } /* ── Petit mobile (< 480 px) ── */ @media (max-width: 480px) { .mp-header-inner { padding: 0 1.25rem; } .mp-footer-inner { padding: 0 1.25rem; } /* Newsletter : bouton sous le champ */ .mp-newsletter-row { flex-direction: column; border-radius: var(--mp-r); } .mp-newsletter-input { border-radius: var(--mp-r) var(--mp-r) 0 0; padding: 0.8rem 1rem; } .mp-newsletter-btn { border-radius: 0 0 var(--mp-r) var(--mp-r); padding: 0.8rem 1rem; text-align: center; letter-spacing: 0.14em; } } #wpadminbar { display: none !important; } html { margin-top: 0 !important; } body { margin-top: 0 !important; padding-top: 0 !important; }