/* -------------------------------------------------- 0. RESET & GLOBALS -------------------------------------------------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; /* gestion fiable des tailles */ } /* -------------------------------------------------- 1. TYPOGRAPHIE & COULEURS DE BASE -------------------------------------------------- */ body { background: #000; /* fond noir général */ color: #111; /* gris très foncé pour le texte courant */ font-family: 'Work Sans', sans-serif; line-height: 1.5; } h1, h2, h3, h4, h5, h6 { font-weight: 600; color: #444; } /* -------------------------------------------------- 2. HEADER (TITRE + MENU) -------------------------------------------------- */ /* Bandeau titre principal */ #main-header { background: rgba(0,0,0,0.8); /* La on peut modifier couleur carte et transparence */ /* contraste titre blanc / fond noir */ text-align: center; padding: 30px 0; transition: transform .3s ease, opacity .3s ease; z-index: 5; /* sous la nav sticky */ } #site-title { color: #fff; font-size: 2.5rem; } /* Barre de navigation collante */ #top-bar{ position: sticky; top: 0; z-index: 1000; will-change: transform; } .menu { top: 0; z-index: 1000; display: flex; justify-content: center; gap: 20px; background: rgba(0,0,0,0.8); padding: 10px 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); } .menu a { color: #fff; text-decoration: none; } .menu a:hover { color: #aaa; } /* ------------------------------------------------------------------------------------- 4. ON GERE LE LAYOUT GENERIQUE D UNE SECTION (ex : bio, sifflet etc.) AVEC TEXTE + IMAGE ------------------------------------------------------------------------------------- */ /* ===== Chapitre générique ======================================== */ .chapter{ margin: 0; padding: 0; display: flow-root; /* crée un nouveau contexte → pas de marge qui s’échappe */ } /* ----- Bandeau image full-bleed (comme ta capture) ---------------- */ .chapter-hero{ position: relative; margin: 0; /* “full-bleed” : on casse les marges du conteneur pour prendre tout l’écran */ display: block; /* enlève l’espace inline */ width: 100%; /* largeur = largeur dispo (plein écran) */ height: auto; /* ← conserve le ratio H/L, donc jamais tronquée */ max-width: 100%; } .chapter-img{ width: 100%; height: auto; object-fit: cover; /* remplit sans déformer (recadre si besoin) */ display: block; /* plus de comportement inline → pas d’espace fantôme */ line-height: 0; /* annule l’espace lié à la hauteur de ligne */ } /* 1) Gradient for readability at the bottom of the photo */ .chapter-hero::after{ content:""; position:absolute; inset:0; background: linear-gradient( to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,0) 70% ); pointer-events:none; } /* ==== TITRE DE CHAPITRE — version simple (2 réglages) ==== */ /* ↳ Tu peux ne modifier que ces deux lignes */ :root{ --title-size: clamp(2.2rem, 5vw, 7rem); /* taille du h2 (mini, fluide, maxi) */ --glass-pad: 16px; /* marge autour du titre dans l'encadré flouté */ } .chapter-title{ position: absolute; left: clamp(16px, 6vw, 80px); bottom: clamp(16px, 6vw, 80px); color: #fff; z-index: 2; display: inline-block; } /* “verre” flouté derrière le titre */ .chapter-title::before{ content: ""; position: absolute; inset: calc(-1 * var(--glass-pad)); border-radius: 12px; background: rgba(15,15,15,.34); backdrop-filter: blur(6px) saturate(115%); -webkit-backdrop-filter: blur(6px) saturate(115%); box-shadow: 0 12px 40px rgba(0,0,0,.35); z-index: -1; } .chapter-title h2{ margin: 0; font: 800 var(--title-size)/.95 'Work Sans', system-ui, sans-serif; letter-spacing: -0.02em; text-transform: lowercase; color: #fff; /* halo discret pour la lisibilité */ text-shadow: 0 0 16px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.35); } /* ----- Carte sous le bandeau ------------------------------------- */ /* Par défaut on la rend “full-bleed” comme l’image */ .chapter-card{ position: relative; padding: 2rem clamp(1rem, 5vw, 10rem); margin: 0; width: auto; /* pas 100vw */ margin-left: calc(50% - 50vw); /* étire jusqu’aux bords */ margin-right: calc(50% - 50vw); padding: clamp(20px, 4vw, 48px); box-sizing: border-box; /* au cas où le reset manque */ background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.10); line-height: 1.6; /* définit l’interligne à 1.6 (160% de la taille de police).*/ } .chapter-card p { text-align: justify; /* justifie le texte : les lignes s'étirent pour que les deux bords gauche et droit soient alignés, comme dans les livres ou journaux */ hyphens: auto; /* active la césure automatique (par ex. "chan-sons"), pour éviter de grands espaces entre les mots en justification */ margin-bottom: 1rem; /* ajoute un espace vertical sous chaque paragraphe pour bien séparer les blocs de texte (1rem = taille de la police actuelle) */ } /* Styles appliqués aux textes en gras dans la carte */ .chapter-card strong { display: block; /* transforme en élément de type "bloc" : il prend toute la largeur et force un retour à la ligne après lui */ font-size: 1.1em; /* augmente légèrement la taille du texte (110% de la taille normale) */ color: #333; /* couleur gris foncé (au lieu de noir pur) pour plus de douceur visuelle */ } /* Variante si un jour tu veux une carte contenue et centrée (pas full-bleed) */ .chapter-card.-contained{ width: min(1100px, calc(100vw - 40px)); left: auto; right: auto; margin: 0; border-radius: 10px; } .chapter-card > :first-child{ margin-top: 0; } .chapter-card > :last-child { margin-bottom: 0; } /* -------------------------------------------------- 5. AGENDA -------------------------------------------------- */ #agenda { max-width: 1800px; margin: 0 ; } .event { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; } .date { font-weight: 600; font-size: 1.2em; min-width: 130px; } .details div { font-size: 1.05em; font-weight: 300; line-height: 1.4; } /* -------------------------------------------------- 6. FORMULAIRE DE CONTACT -------------------------------------------------- */ form input, form textarea { width: 100%; padding: 10px; margin: 8px 0; border: 1px solid #ccc; border-radius: 4px; } form button { padding: 10px 20px; background: #222; color: #fff; border: none; cursor: pointer; } form button:hover { background: #444; } /* -------------------------------------------------- 7. AUDIO PLAYER -------------------------------------------------- */ audio { width: 100%; margin-top: 10px; } /* -------------------------------------------------- 8. VIDEO PLAYER -------------------------------------------------- */ .video-wrapper{ position: relative; padding-bottom: 56.25%; /* ratio 16:9 */ height: 0; margin-top: 5px; /* espace au-dessus */ margin-bottom: 20px; /* espace au-dessous */ } .video-wrapper iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-wrapper video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Grille responsive : 1 colonne mobile, 2 colonnes tablette, 3 colonnes (ou plus) desktop */ .video-grid { display: grid; gap: 1.25rem; /* espace entre vidéos */ grid-template-columns: 1fr; /* mobile */ } @media (min-width: 768px) { .video-grid { grid-template-columns: repeat(2, 1fr); } /* tablette */ } @media (min-width: 1200px) { .video-grid { grid-template-columns: repeat(3, 1fr); } /* ordi */ } /* Bloc vidéo au bon ratio 16:9 */ .video { width: 100%; aspect-ratio: 16 / 9; /* moderne */ } /* Fallback pour vieux navigateurs (sans aspect-ratio) */ @supports not (aspect-ratio: 16 / 9) { .video { position: relative; padding-top: 56.25%; } .video > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } } /* Par défaut (navigateurs modernes), l’iframe remplit le bloc */ .video > iframe { width: 100%; height: 100%; border: 0; } /* -------------------------------------------------- 9. FOOTER -------------------------------------------------- */ footer { position: fixed; bottom: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 20px 30px; background: #000; color: #fff; font-size: 14px; z-index: 1000; /* S'assure qu'il est au-dessus des autres éléments */ } .footer-right a { margin-left: 15px; color: #fff; font-size: 20px; text-decoration: none; } .footer-right a:hover { color: #1db954; /* vert Spotify au survol */ } /* ------------------- ESSAI POUR PORTABLE ------------------- */ /* ------------------------------------------------------------------ MEDIA QUERIES — TABLETTE & TÉLÉPHONE ------------------------------------------------------------------ */ /* =========================== TABLETTE (≤ 768 px) =========================== */ @media (max-width: 768px){ /* — Header / top bar — */ #top-bar{ position: static; /* plus de sticky en mobile */ background: transparent; /* plus de bandeau noir */ box-shadow: none; } #main-header{ padding: 16px 0; /* header plus compact */ background: rgba(0,0,0,.6); } /* — On désactive le menu horizontal, on affiche le burger — */ .menu{ display: none !important; } #burger{ display: block; } /* bouton burger visible */ /* .mobile-nav est déjà display:flex par défaut (et masquée via transform) */ .chapter-hero{ /* hauteurs mini/maxi raisonnables pour petits écrans */ min-height: 180px; max-height: 55vh; overflow: hidden; /* cache le dépassement de l’image */ } .chapter-img{ width: 100%; height: 100%; object-fit: cover; /* on assume le recadrage */ object-position: center top; /* cadre vers le haut : utile si le sujet est en haut */ display:block; } /* Titre overlay plus compact pour ne pas bouffer l’image */ :root{ --title-size: clamp(1.6rem, 6vw, 2.4rem); --glass-pad: 10px; } .chapter-title{ left: clamp(12px, 5vw, 28px); bottom: clamp(12px, 5vw, 28px); } /* Sélecteur principal pour la "carte de chapitre". Ici on applique des styles généraux au conteneur .chapter-card */ .chapter-card{ margin-left: 0; margin-right: 0; padding: clamp(16px, 4vw, 24px); border-radius: 0; line-height: 1.6; } /* Styles appliqués à tous les

(paragraphes) contenus dans .chapter-card */ .chapter-card p { text-align: justify; /* justifie le texte : les lignes s'étirent pour que les deux bords gauche et droit soient alignés, comme dans les livres ou journaux */ hyphens: auto; /* active la césure automatique (par ex. "chan-sons"), pour éviter de grands espaces entre les mots en justification */ margin-bottom: 1rem; /* ajoute un espace vertical sous chaque paragraphe pour bien séparer les blocs de texte (1rem = taille de la police actuelle) */ } /* Styles appliqués aux textes en gras dans la carte */ .chapter-card strong { display: block; /* transforme en élément de type "bloc" : il prend toute la largeur et force un retour à la ligne après lui */ font-size: 1.1em; /* augmente légèrement la taille du texte (110% de la taille normale) */ color: #333; /* couleur gris foncé (au lieu de noir pur) pour plus de douceur visuelle */ } /* — Footer — évite qu’il masque le contenu en mobile — */ footer{ position: static; /* plus “fixed” en mobile */ padding: 14px 16px; font-size: 12px; } } /* =========================== TÉLÉPHONE (≤ 479 px) =========================== */ @media (max-width: 479px){ /* — Header encore plus compact — */ #main-header{ padding: 12px 0; } #site-title{ font-size: 1.6rem; } /* — Titre sur image — un cran plus petit — */ .chapter-hero{ min-height: 140px; /* plus petit qu’en tablette */ max-height: 50vh; overflow: hidden; } .chapter-img{ width: 100%; height: 100%; object-fit: cover; /* on garde le recadrage */ object-position: center top; /* sujet cadré vers le haut */ display: block; } /* Titre overlay — encore plus compact */ :root{ --title-size: clamp(1.4rem, 6vw, 2rem); --glass-pad: 8px; } .chapter-title{ left: clamp(10px, 4vw, 20px); bottom: clamp(10px, 4vw, 20px); } .chapter-card p { text-align: justify; /* justifie le texte : les lignes s'étirent pour que les deux bords gauche et droit soient alignés, comme dans les livres ou journaux */ hyphens: auto; /* active la césure automatique (par ex. "chan-sons"), pour éviter de grands espaces entre les mots en justification */ margin-bottom: 1rem; /* ajoute un espace vertical sous chaque paragraphe pour bien séparer les blocs de texte (1rem = taille de la police actuelle) */ } /* Styles appliqués aux textes en gras dans la carte */ .chapter-card strong { display: block; /* transforme en élément de type "bloc" : il prend toute la largeur et force un retour à la ligne après lui */ font-size: 1.1em; /* augmente légèrement la taille du texte (110% de la taille normale) */ color: #333; /* couleur gris foncé (au lieu de noir pur) pour plus de douceur visuelle */ } /* — Vidéo — marge plus compacte — */ .video-wrapper{ margin-bottom: 12px; } } /* ------------------------------------------------------------------ MENU MOBILE PLEIN-ÉCRAN ------------------------------------------------------------------ • #burger → icône « hamburger » affichée uniquement en mobile • .mobile-nav → overlay noir couvrant tout l’écran avec les liens • .open / body.nav-open → états activés par le JS (toggle) Le tout reste invisible sur desktop grâce aux media-queries ajoutées plus bas. ------------------------------------------------------------------ */ /* ========== 1. Icône BURGER (3 barres horizontales) =============== */ #burger{ position: fixed; /* reste collé au viewport, même lors du scroll */ top: 16px; /* marge depuis le bord supérieur */ right: 16px; /* marge depuis le bord droit */ width: 32px; /* largeur de l’icône */ height: 24px; /* hauteur totale (distance entre 1re & 3e barre) */ cursor: pointer; /* pointeur main au survol */ z-index: 1201; /* → au-dessus de .mobile-nav (z-index 1200) */ display: none; /* on le révélera seulement sur mobile (@media) */ } /* Les trois traits (pseudoelements + span central) */ #burger span, /* barre centrale */ #burger::before, /* barre du haut */ #burger::after{ /* barre du bas */ content: ""; /* crée un rectangle */ position: absolute; left: 0; top: 0; /* on ajustera top/bottom plus bas */ width: 100%; height: 3px; /* épaisseur = 3 px */ background: rgb(108, 106, 106); /* couleur blanche (change → rouge, etc.) */ transition: transform .35s ease, opacity .35s ease; /* anim. douce */ } #burger::before{ top: 0; } /* 1re barre en haut */ #burger span { top: 50%; transform: translateY(0 vh); } /* barre du milieu */ #burger::after { top: 100%; } /* 3e barre en bas */ /* ÉTAT OUVERT : les trois barres se transforment en croix */ #burger.open::before{ transform: translateY( 12px) rotate( 45deg); } #burger.open::after { transform: translateY(-12px) rotate(-45deg); } #burger.open span { opacity: 0; } /* barre centrale disparaît */ /* ========== 2. OVERLAY DE NAVIGATION (affiché en plein écran) ====== */ .mobile-nav{ position: fixed; top: 0vh; /* Espace par rapport au haut de la page */ left: 0; right: 0; /* Pas de marges particulières à gauche et à droite */ height: 100vh; /* Le menu déroulant fait 100% de la hauteur totale de la page au max ou sinon s'adapte à la taille du menu déroulant */ display: flex; /* centrage flexbox */ flex-direction: column; align-items: center; justify-content: center; gap: 16px; /* espace vertical entre les liens */ background: rgba(0,0,0,.85); /* voile noir semi-opaque */ backdrop-filter: blur(2px); /* floute légèrement le fond */ transform: translateY(-100vh); /* caché au-dessus de l’écran */ transition: transform 0.7s cubic-bezier(.4,0,.2,1); /* glisse doux */ z-index: 1200; /* juste sous l’icône burger */ overflow-y: auto; /* padding: 64px 0 32px; */ } /* Style des liens à l’intérieur de l’overlay */ .mobile-nav a{ font-family: 'Work Sans', sans-serif; font-weight: 300; letter-spacing: 1.5px; font-size: clamp(1.4rem, 3.3vw, 1.7rem); /* taille fluide 1.4–2 rem */ color: #fff; text-decoration: none; text-transform: lowercase; position: relative; /* permet la ligne decorative */ } /* Ligne blanche horizontale qui traverse l’écran */ .mobile-nav a::after{ content:""; position:absolute; /* centrage horizontal */ left:50%; transform:translateX(-50%); width:300px; /* ← longueur identique pour tous les traits */ height:1px; bottom:-10px; /* espace sous le texte */ background:#fff; opacity:.6; } /* Pas de ligne après le dernier lien */ .mobile-nav a:last-child::after{ display: none; } /* ÉTAT OUVERT déclenché par JS → l’overlay descend à Y = 0 */ .mobile-nav.open{ transform: translateY(0%); } /* ========== 3. Empêche le fond de défiler quand le menu est ouvert == */ body.nav-open{ overflow: hidden; } /* ========== 4. Points de rupture =================================== */ /* Mobile / tablette : on cache le menu horizontal classique et on montre le burger + overlay */ @media (max-width: 768px){ .menu { display: none; } /* barre horizontale masquée */ #burger { display: block; } /* icône visible */ #top-bar { display: none; } } /* Desktop : on masque complètement l’overlay pour éviter un tabindex ou une apparition accidentelle */ @media (min-width: 769px){ .mobile-nav{ display: none; } #top-bar { display: block; } body { padding-bottom: calc(54px + 1rem); } /* au cas où tes cartes aient un margin-bottom faible */ /* .chapter-card:last-child { margin-bottom: calc(54px + 1rem); } */ } /* ------------------------------------------------------- LIENS INTERACTIFS VERS LES PAGES DES AUTRES ARTISTES ------------------------------------------------------- */ /* Style sobre pour les liens vers des artistes */ a.artist-link { color: inherit; /* hérite de la couleur du texte environnant */ text-decoration: none; /* enlève le soulignement */ /* font-style: italic; optionnel : ajoute une touche élégante */ cursor: pointer; } a.artist-link:hover { text-decoration: underline; /* sous-ligne uniquement au survol */ color: #a58b6f; /* ou un gris doux */ } a.classic-link { color: #b4745e; /* hérite de la couleur du texte environnant */ text-decoration: none; /* enlève le soulignement */ /* font-style: italic; optionnel : ajoute une touche élégante */ cursor: pointer; } a.classic-link:hover { text-decoration: underline; /* sous-ligne uniquement au survol */ color: #a58b6f; /* ou un gris doux */ } /* Petite liste de couleurs possibles : Brun doré léger #a58b6f Chaleureux, classique Cuivre atténué #b4745e Doux, un peu rétro Bleu-gris désaturé #6c7a89 Calme, raffiné Vert olive clair #839073 Naturel, discret Violet fumé #8b6d9c */