/* En-tête (nav à onglets) + pied de page communs — omniaamplecti.fr Utilise les variables CSS définies dans chaque page : --nav-h, --paper, --paper-dark, --brand, --gold, --muted, --ink */ /* ── NAV ── Scopé au bandeau du site (nav[data-site-nav]) : un

interne à une page (ex. la pagination de la base de chansons) ne doit PAS être fixé en haut ni recouvrir le bandeau. */ nav[data-site-nav] { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h, 72px); display: flex; align-items: center; justify-content: space-between; padding: 0 3rem; background: var(--paper); border-bottom: 1px solid rgba(184,154,90,0.25); z-index: 100; transition: transform 0.32s ease; /* Police de référence du bandeau : indépendante de la police du de la page (certaines pages utilisent un corps monospace ou serif). */ font-family: 'Montserrat', sans-serif; } /* Masqué en descendant, réaffiché en remontant (voir site.js) */ nav.nav--hidden { transform: translateY(-100%); } .nav-logo { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 400; font-style: normal; letter-spacing: 0.03em; color: var(--brand, #1d3a5f); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; } .nav-logo img { height: 2em; width: auto; margin-right: 0.5em; vertical-align: middle; } .nav-links { display: flex; gap: 2.5rem; list-style: none; } .nav-item { position: relative; } /* Abréviation d'onglet (1re lettre) : cachée par défaut, visible en mode compact mobile */ .tab-abbr { display: none; } .nav-tab { font-family: 'Montserrat', sans-serif; font-size: 0.72rem; font-weight: 300; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); background: none; border: none; cursor: pointer; padding: 0.5rem 0; display: inline-flex; align-items: center; gap: 0.4rem; transition: color 0.2s; } .nav-tab .caret { font-size: 0.55rem; line-height: 1; transition: transform 0.25s; /* neutralise d'éventuelles classes .caret propres à une page */ display: inline; width: auto; height: auto; min-width: 0; min-height: 0; border: none; background: none; border-radius: 0; box-shadow: none; color: inherit; place-items: initial; } .nav-tab:hover, .nav-item.open .nav-tab { color: var(--gold); } .nav-item.open .nav-tab .caret { transform: rotate(180deg); } /* ── DROPDOWN ── */ .dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); min-width: 250px; background: var(--paper); border: 1px solid rgba(184,154,90,0.25); box-shadow: 0 14px 34px rgba(26,24,20,0.10); list-style: none; padding: 0.5rem 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; z-index: 200; } .dropdown::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } .nav-item:hover .dropdown, .nav-item.open .dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .dropdown li a { display: block; padding: 0.7rem 1.5rem; font-size: 0.78rem; font-weight: 300; letter-spacing: 0.04em; text-transform: none; color: var(--ink); text-decoration: none; transition: background 0.2s, color 0.2s, padding-left 0.2s; white-space: nowrap; } .dropdown li a:hover { background: var(--paper-dark); color: var(--gold); padding-left: 1.8rem; } .dropdown li.dropdown-empty { padding: 0.7rem 1.5rem; font-size: 0.75rem; font-style: italic; color: var(--muted); white-space: nowrap; } /* Sous-titres « Ressources » / « Jeux » dans les menus déroulants */ .dropdown li.dropdown-group { padding: 0.55rem 1.5rem 0.35rem; font-size: 0.6rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); white-space: nowrap; pointer-events: none; user-select: none; } .dropdown li.dropdown-group:not(:first-child) { margin-top: 0.25rem; padding-top: 0.7rem; border-top: 1px solid rgba(184,154,90,0.18); } /* En-tête de groupe dans un menu déroulant (Ressources / Jeux) */ .dropdown li.dropdown-group { padding: 0.55rem 1.5rem 0.35rem; font-size: 0.6rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); white-space: nowrap; pointer-events: none; user-select: none; } .dropdown li.dropdown-group:not(:first-child) { margin-top: 0.25rem; padding-top: 0.7rem; border-top: 1px solid rgba(184,154,90,0.18); } /* ── FOOTER ── */ footer { border-top: 1px solid rgba(184,154,90,0.2); margin-top: 6rem; width: 100%; scroll-margin-top: var(--nav-h, 72px); } .footer-inner { max-width: 1100px; margin: 0 auto; padding: 4rem 3rem 3rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 2rem; /* Police de référence du pied de page, indépendante du de la page. */ font-family: 'Montserrat', sans-serif; } .footer-logo { font-family: 'Cormorant Garamond', serif; font-style: normal; font-size: 1.2rem; color: var(--brand, #1d3a5f); display: inline-flex; align-items: center; } .footer-links { display: flex; flex-wrap: wrap; gap: 1.2rem 2.5rem; list-style: none; margin: 0; padding: 0; } .footer-links a { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color 0.2s; } .footer-links a:hover { color: var(--gold); } .footer-copy { font-size: 0.7rem; letter-spacing: 0.1em; color: var(--muted); } /* ── ENTRÉE COMPTE (bandeau) ── */ .nav-account { display: flex; align-items: center; } .account-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.85rem 0.3rem 0.35rem; border: 1px solid rgba(184,154,90,0.45); border-radius: 999px; color: var(--brand, #1d3a5f); text-decoration: none; font-family: 'Montserrat', sans-serif; font-size: 0.7rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; transition: border-color 0.2s, color 0.2s, background 0.2s; } .account-chip:hover { border-color: var(--gold); color: var(--gold); background: rgba(184,154,90,0.07); } .account-ava { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--paper-dark, #e6ecf6); color: var(--brand, #1d3a5f); font-family: 'Cormorant Garamond', serif; font-size: 0.95rem; text-transform: none; letter-spacing: 0; } .account-ava img { width: 100%; height: 100%; object-fit: cover; display: block; } .account-ava svg { display: block; } /* Entrée admin « Statistiques » (visible seulement pour l'administrateur) */ .admin-chip .account-ava { background: rgba(184,154,90,0.16); font-size: 0.85rem; } .admin-chip:hover { border-color: var(--gold); color: var(--gold); background: rgba(184,154,90,0.07); } /* ── RESPONSIVE ── */ @media (max-width: 820px) { /* Page d'accueil : le bandeau peut s'étaler sur plusieurs lignes */ nav[data-home] { flex-direction: column; height: auto; padding: 1rem 1.5rem; gap: 0.6rem; } nav[data-home] .nav-links { gap: 1.1rem; flex-wrap: wrap; justify-content: center; } /* Toutes les autres pages : bandeau compact tenant sur UNE seule ligne. Logo + nom du site conservés ; onglets réduits à leur 1re lettre. */ nav[data-site-nav]:not([data-home]) { padding: 0 0.5rem; gap: 0.35rem; } nav:not([data-home]) .nav-logo { margin-right: 0.2rem; font-size: 1.05rem; } nav:not([data-home]) .nav-logo img { height: 1.7em; margin-right: 0.35em; } nav:not([data-home]) .nav-links { flex-wrap: nowrap; gap: clamp(0.3rem, 2vw, 0.9rem); } nav:not([data-home]) .tab-full { display: none; } nav:not([data-home]) .tab-abbr { display: inline; } nav:not([data-home]) .nav-tab { padding: 0.5rem 0; gap: 0.12rem; letter-spacing: 0.06em; font-size: 0.72rem; } nav:not([data-home]) .nav-tab .caret { font-size: 0.46rem; } /* Bandeau compact : l'entrée compte se réduit à sa pastille (avatar/icône). */ nav:not([data-home]) .account-label { display: none; } nav:not([data-home]) .account-chip { padding: 0; border-color: transparent; gap: 0; background: transparent; } nav:not([data-home]) .account-ava { width: 24px; height: 24px; } } @media (max-width: 600px) { .footer-inner { padding: 3rem 1.5rem; flex-direction: column; text-align: center; } .footer-links { gap: 0.7rem 1.4rem; justify-content: center; } .dropdown { min-width: 200px; } /* Sur téléphone : nom du site en icône seule → place pour le bouton compte, plus aucun débordement horizontal du bandeau. */ nav:not([data-home]) .nav-logo-text { display: none; } } /* ── Étoile ★ des jeux favoris dans les menus (posée par site.js) ── */ .dropdown li a .nav-fav-star { color: var(--gold); font-size: 0.85em; margin-left: 0.4em; vertical-align: baseline; } /* ── Raccourci « Jeux du jour » dans le bandeau (même police/couleur que les onglets) ── */ .nav-daily-link { display: inline-flex; align-items: center; gap: 0.45em; font-family: 'Montserrat', sans-serif; font-size: 0.72rem; font-weight: 300; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: 0.5rem 0; transition: color 0.2s; } .nav-daily-link:hover { color: var(--gold); } .nav-daily-link .tab-abbr { font-size: 1rem; letter-spacing: 0; } /* Compte admin (bandeau plus chargé) : seul l'emoji calendrier, à toute largeur. */ .nav-daily--min .tab-full { display: none; } .nav-daily--min .tab-abbr { display: inline; } /* Écran trop étroit pour une seule ligne : on ne garde que l'emoji calendrier. */ @media (max-width: 820px) { .nav-daily-link .tab-full { display: none; } .nav-daily-link .tab-abbr { display: inline; } }