/* ============================================================ GuidoMusic — thème partagé Le seul endroit où vivent les couleurs, les polices, les ombres et les classes communes à toutes les pages. Chargé AVANT le style.css de chaque page : tout y est surchargeable. ============================================================ */ :root { /* ---- Papier & encre ---- */ --creme: #fdf6ec; --creme-fonce: #f0ece4; /* survol discret sur fond papier */ --papier: #ffffff; --encre: #1b1a1f; --encre-douce: #6b6875; /* ---- Couleurs d'accent : une par page ---- */ --jaune: #ffc93c; --corail: #ff6b5b; --menthe: #2fbf71; --indigo: #5465ff; /* ---- Sémantique ---- */ --succes: #2fbf71; --tiede: #ffb300; --erreur: #e5484d; /* ---- Ombres franches "sticker" ---- */ --ombre-sm: 3px 3px 0 var(--encre); --ombre-md: 4px 4px 0 var(--encre); --ombre: 6px 6px 0 var(--encre); --ombre-hover: 9px 9px 0 var(--encre); --ombre-plate: 0 0 0 var(--encre); /* état :active, le bouton s'enfonce */ /* ---- Traits & rayons ---- */ --bordure: 3px solid var(--encre); --rayon-panneau: 18px; --rayon-bouton: 12px; --rayon-pilule: 999px; /* ---- Typographie ---- */ --police-titre: "Space Grotesk", "Trebuchet MS", sans-serif; --police-texte: "Inter", system-ui, sans-serif; /* ---- Accent par défaut, si la page n'en déclare pas ---- */ --accent: var(--jaune); --sur-accent: var(--encre); } /* Une page choisit sa couleur avec . --sur-accent = la couleur de texte lisible SUR cet accent : l'indigo est sombre, il lui faut du papier là où les trois autres gardent l'encre. */ [data-accent="jaune"] { --accent: var(--jaune); --sur-accent: var(--encre); } [data-accent="corail"] { --accent: var(--corail); --sur-accent: var(--encre); } [data-accent="menthe"] { --accent: var(--menthe); --sur-accent: var(--encre); } [data-accent="indigo"] { --accent: var(--indigo); --sur-accent: var(--papier); } /* ============================================================ Base ============================================================ */ * { box-sizing: border-box; } body { font-family: var(--police-texte); background-color: var(--creme); color: var(--encre); margin: 0; padding: 0; } /* Gabarit par défaut : celui des pages internes (exercices et cours). L'accueil élargit et désaligne dans son propre style.css. */ #app { max-width: 460px; margin: 0 auto; padding: 0 20px 40px; text-align: center; } h1 { font-family: var(--police-titre); font-size: clamp(1.6rem, 5vw, 2.2rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 24px; } .hidden { display: none !important; } /* ============================================================ Header injecté par nav.js Deux variantes : complète sur l'accueil, "slim" sur les pages internes. ============================================================ */ .site-header { position: sticky; top: 0; z-index: 50; background-color: var(--creme); margin-bottom: 24px; } .header-inner { max-width: 900px; margin: 0 auto; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } /* Variante slim : on garde la marque et les menus, on rend la barre discrète pour ne pas manger la hauteur d'écran pendant un exercice. */ .site-header.slim .header-inner { padding: 8px 20px; } .site-header.slim .brand-name { font-size: 1.05rem; } .site-header.slim .equalizer { height: 18px; } .site-header.slim .nav-trigger { font-size: 0.9rem; padding: 6px 12px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--encre); } /* La flèche n'apparaît que sur les pages internes : la marque y sert aussi de bouton "retour à l'accueil". */ .brand-retour { font-size: 1rem; transition: transform 0.15s; } .brand:hover .brand-retour { transform: translateX(-3px); } .brand-name { font-family: var(--police-titre); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; } /* Égaliseur animé : 4 barres qui "jouent" en continu */ .equalizer { display: flex; align-items: flex-end; gap: 3px; height: 24px; } .equalizer span { width: 5px; border-radius: 2px; background-color: var(--encre); animation: dance 1s ease-in-out infinite alternate; } .equalizer span:nth-child(1) { height: 40%; background-color: var(--corail); animation-delay: -0.1s; } .equalizer span:nth-child(2) { height: 90%; background-color: var(--jaune); animation-delay: -0.5s; } .equalizer span:nth-child(3) { height: 60%; background-color: var(--menthe); animation-delay: -0.3s; } .equalizer span:nth-child(4) { height: 100%; background-color: var(--indigo); animation-delay: -0.7s; } @keyframes dance { from { transform: scaleY(0.35); } to { transform: scaleY(1); } } @media (prefers-reduced-motion: reduce) { .equalizer span { animation: none; } } /* Bande de touches de piano : la signature visuelle de tout le site. Elle appartient au header, donc elle est en pleine largeur sur toutes les pages sans avoir besoin de marges négatives. */ .keys-strip { height: 14px; background-color: var(--papier); border-top: var(--bordure); border-bottom: var(--bordure); background-image: repeating-linear-gradient( to right, var(--encre) 0 7px, transparent 7px 24px ); } /* ---------- Navigation déroulante ---------- */ .site-nav { position: relative; } .nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; } .nav-item { position: relative; } .nav-trigger { font-family: var(--police-titre); font-size: 1rem; font-weight: 500; color: var(--encre); background: transparent; border: 3px solid transparent; border-radius: 10px; padding: 8px 14px; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: background-color 0.15s, border-color 0.15s; } .nav-trigger:hover { background-color: rgba(27, 26, 31, 0.06); } .nav-item.open .nav-trigger { background-color: var(--papier); border-color: var(--encre); } .chevron { font-size: 0.75rem; transition: transform 0.2s; } .nav-item.open .chevron { transform: rotate(180deg); } .dropdown { display: none; position: absolute; top: calc(100% + 10px); right: 0; min-width: min(250px, calc(100vw - 40px)); background-color: var(--papier); border: var(--bordure); border-radius: 14px; box-shadow: var(--ombre); padding: 8px; text-align: left; } .nav-item.open .dropdown { display: block; } .dropdown a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--encre); text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: background-color 0.15s, transform 0.15s; } .dropdown a:hover { background-color: var(--jaune); transform: translateX(3px); } /* La page où l'on se trouve déjà, marquée pour éviter le clic inutile */ .dropdown a[aria-current="page"] { background-color: var(--accent); color: var(--sur-accent); cursor: default; } .dropdown a[aria-current="page"]:hover { transform: none; } /* ============================================================ Bouton retour Reste dans le HTML comme filet de sécurité si le JS ne tourne pas ; nav.js pose .has-nav sur et la marque prend le relais. ============================================================ */ .back-btn { display: inline-block; font-family: var(--police-titre); font-weight: 500; font-size: 0.85rem; color: var(--encre); text-decoration: none; background-color: var(--papier); border: var(--bordure); border-radius: var(--rayon-pilule); padding: 7px 16px; margin-bottom: 24px; box-shadow: var(--ombre-sm); transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s; } .back-btn:hover { background-color: var(--accent); color: var(--sur-accent); transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--encre); } .has-nav .back-btn { display: none; } /* ============================================================ Briques réutilisables ============================================================ */ /* Le panneau "sticker" : fond papier, trait franc, ombre décalée. C'est le motif de base de tout le site (cartes, résultats, partition…). */ .panneau { background-color: var(--papier); border: var(--bordure); border-radius: var(--rayon-panneau); box-shadow: var(--ombre); padding: 20px; } /* En-tête coloré d'un exercice (tonalité, BPM, score…) */ .game-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; background-color: var(--accent); color: var(--sur-accent); border: var(--bordure); border-radius: var(--rayon-panneau); box-shadow: var(--ombre); padding: 16px 20px; margin-bottom: 24px; } /* Texte de retour d'un exercice. Les deux paires de noms coexistent : .success/.error et .correct/.wrong sont historiques selon les pages. */ .success, .correct { color: var(--succes); } .error, .wrong { color: var(--erreur); } .instructions { color: var(--encre-douce); font-size: 0.9rem; line-height: 1.6; margin-bottom: 20px; } .instructions strong { color: var(--encre); } /* ============================================================ Mobile ============================================================ */ @media (max-width: 560px) { /* Seule la barre complète de l'accueil s'empile : la slim tient sur une ligne, c'est tout son intérêt. */ .site-header:not(.slim) .header-inner { flex-direction: column; align-items: stretch; gap: 14px; } .site-header:not(.slim) .nav-list { justify-content: center; } .site-header:not(.slim) .dropdown { right: auto; left: 50%; transform: translateX(-50%); } .site-header.slim .header-inner { gap: 10px; } .site-header.slim .brand-name { display: none; } }