/* LÉA OLIVIER — feuille de style Direction artistique : papier crème, encre chaude, accent terre brûlée. */ /* //{ 1. Tokens */ :root { /* //{ */ --encre: #17120F; --encre-douce: #3A3129; --gris: #6E6357; --gris-clair: #736757; --papier: #F7F2E9; --papier-2: #EFE7D9; --papier-3: #E4D9C6; --accent: #C4552F; --accent-texte: #9C3F1F; /* accent lisible en petit texte sur fond clair */ --accent-bouton: #BB4E29; /* accent validant AA avec du texte blanc */ --accent-clair: #E08155; --accent-sombre: #9C3F1F; --vert: #4E6B52; /* --- palette tirée de ses photos : la sangle tissée du ukulélé, le pantalon terracotta, le fond menthe de la scène du BZ Festival ------------- */ --terre: #C4552F; /* chevrons rouges de la sangle */ --safran: #E2A03F; /* chevrons jaunes */ --safran-fonce: #7E5106; /* la même teinte, lisible en petit texte */ --turquoise: #1F7F7B; /* carrés bleus de la sangle, fond de scène */ --turquoise-clair: #5FC4B8; --petrole: #10302F; /* fond de section, version profonde du turquoise */ --framboise: #B83A5E; --framboise-clair: #E27A96; --olive: #6E7A3C; --olive-clair: #A8B56E; /* le ruban tissé : le motif signature du site */ --ruban: repeating-linear-gradient(115deg,var(--terre) 0 13px,var(--safran) 13px 24px,var(--papier-3) 24px 31px,var(--turquoise) 31px 44px,var(--framboise) 44px 53px,var(--olive) 53px 66px); --ligne: rgba(23,18,15,.14); --ligne-nuit: rgba(247,242,233,.16); --ff-display: "Fraunces","Iowan Old Style",Georgia,serif; --ff-texte: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --gutter: clamp(20px,5vw,64px); --max: 1180px; --r: 14px; --r-lg: 22px; --ombre: 0 1px 2px rgba(23,18,15,.05),0 8px 24px -12px rgba(23,18,15,.18); --ombre-lg: 0 2px 4px rgba(23,18,15,.06),0 24px 60px -24px rgba(23,18,15,.30); --t: 420ms cubic-bezier(.2,.7,.25,1); } /* //} */ /* //} */ /* //{ 2. Reset */ *,*::before,*::after { /* //{ */ box-sizing: border-box; } /* //} */ * { /* //{ */ margin: 0; } /* //} */ html { /* //{ */ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* //} */ @media (prefers-reduced-motion: reduce) { /* //{ */ html { /* //{ */ scroll-behavior: auto; } /* //} */ *,*::before,*::after { /* //{ */ animation-duration: .01ms !important; transition-duration: .01ms !important; } /* //} */ } /* //} */ body { /* //{ */ font-family: var(--ff-texte); font-size: 17px; line-height: 1.65; color: var(--encre-douce); background: var(--papier); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* //} */ img,svg,iframe { /* //{ */ display: block; max-width: 100%; } /* //} */ button,input,select,textarea { /* //{ */ font: inherit; color: inherit; } /* //} */ button { /* //{ */ cursor: pointer; background: none; border: 0; } /* //} */ a { /* //{ */ color: inherit; } /* //} */ h1,h2,h3,h4 { /* //{ */ font-family: var(--ff-display); font-weight: 400; line-height: 1.08; color: var(--encre); font-variation-settings: "SOFT" 30,"WONK" 1,"opsz" 40; letter-spacing: -.015em; } /* //} */ :focus-visible { /* //{ */ outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* //} */ /* grain discret sur tout le document */ body::after { /* //{ */ content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E"); mix-blend-mode: multiply; } /* //} */ /* //} */ /* //{ 3. Utilitaires */ .wrap { /* //{ */ width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); } /* //} */ .sr { /* //{ */ position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* //} */ .skip { /* //{ */ position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--encre); color: var(--papier); padding: 10px 18px; border-radius: 0 0 10px 10px; transition: top .2s; } /* //} */ .skip:focus { /* //{ */ top: 0; } /* //} */ section { /* //{ */ padding-block: clamp(64px,9vw,130px); position: relative; } /* //} */ .eyebrow { /* //{ */ font-size: 12px; letter-spacing: .18em; text-transform: uppercase; // i- font-weight: 600; color: var(--accent-texte); display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } /* //} */ .eyebrow::after { /* //{ */ content: ""; flex: 1; height: 1px; background: var(--ligne); max-width: 120px; } /* //} */ .titre-section { /* //{ */ font-size: clamp(34px,5.2vw,60px); margin-bottom: 14px; } /* //} */ .chapo { /* //{ */ font-size: clamp(17px,1.6vw,19px); color: var(--gris); max-width: 62ch; } /* //} */ /* boutons */ .btn { /* //{ */ display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 28px; border-radius: 100px; font-weight: 600; font-size: 15px; text-decoration: none; transition: var(--t); border: 1.5px solid transparent; white-space: nowrap; } /* //} */ .btn-1 { /* //{ */ background: var(--accent-bouton); color: #fff; box-shadow: var(--ombre); } /* //} */ .btn-1:hover { /* //{ */ background: var(--accent-sombre); transform: translateY(-2px); box-shadow: var(--ombre-lg); } /* //} */ .btn-2 { /* //{ */ border-color: var(--ligne); color: var(--encre); } /* //} */ .btn-2:hover { /* //{ */ border-color: var(--encre); background: rgba(23,18,15,.04); transform: translateY(-2px); } /* //} */ .btn-nuit { /* //{ */ border-color: var(--ligne-nuit); color: var(--papier); } /* //} */ .btn-nuit:hover { /* //{ */ background: rgba(247,242,233,.1); border-color: var(--papier); transform: translateY(-2px); } /* //} */ .btn[disabled] { /* //{ */ opacity: .45; pointer-events: none; } /* //} */ /* révélation au scroll */ .rvl { /* //{ */ opacity: 0; transform: translateY(26px); transition: opacity .8s ease,transform .8s cubic-bezier(.2,.7,.25,1); } /* //} */ .rvl.vu { /* //{ */ opacity: 1; transform: none; } /* //} */ /* //} */ /* //{ 4. Navigation */ .nav { /* //{ */ position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px var(--gutter); transition: background .4s,backdrop-filter .4s,padding .4s,box-shadow .4s; } /* //} */ .nav--pose { /* //{ */ background: rgba(247,242,233,.88); backdrop-filter: blur(14px) saturate(1.3); padding-block: 12px; box-shadow: 0 1px 0 var(--ligne); } /* //} */ .nav__logo { /* //{ */ font-family: var(--ff-display); font-size: 21px; letter-spacing: -.02em; text-decoration: none; color: var(--papier); transition: color .4s; white-space: nowrap; } /* //} */ .nav--pose .nav__logo { /* //{ */ color: var(--encre); } /* //} */ .nav__logo b { /* //{ */ font-weight: 600; } /* //} */ .nav__liens { /* //{ */ display: flex; align-items: center; gap: 4px; } /* //} */ .nav__liens a { /* //{ */ font-size: 14.5px; font-weight: 500; text-decoration: none; padding: 9px 14px; border-radius: 100px; color: rgba(247,242,233,.82); transition: color .4s,background .2s; } /* //} */ .nav--pose .nav__liens a:not(.nav__cta) { /* //{ */ color: var(--gris); } /* //} */ .nav__liens a:not(.nav__cta):hover { /* //{ */ background: rgba(247,242,233,.14); color: var(--papier); } /* //} */ .nav--pose .nav__liens a:not(.nav__cta):hover { /* //{ */ background: rgba(23,18,15,.06); color: var(--encre); } /* //} */ .nav__cta { /* //{ */ margin-left: 10px; padding: 11px 22px; font-size: 14.5px; color: var(--papier); border-color: rgba(247,242,233,.42); } /* //} */ .nav__cta:hover { /* //{ */ background: rgba(247,242,233,.12); border-color: var(--papier); color: var(--papier); } /* //} */ .nav--pose .nav__cta { /* //{ */ color: var(--encre); border-color: var(--ligne); } /* //} */ .nav--pose .nav__cta:hover { /* //{ */ background: rgba(23,18,15,.05); border-color: var(--encre); color: var(--encre); } /* //} */ .nav--ouvert .nav__cta { /* //{ */ color: var(--encre); border-color: var(--ligne); } /* //} */ .nav__burger { /* //{ */ display: none; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; } /* //} */ .nav__burger span { /* //{ */ display: block; width: 20px; height: 1.8px; background: var(--papier); position: relative; transition: var(--t); } /* //} */ .nav--pose .nav__burger span { /* //{ */ background: var(--encre); } /* //} */ .nav__burger span::before,.nav__burger span::after { /* //{ */ content: ""; position: absolute; left: 0; width: 20px; height: 1.8px; background: inherit; transition: var(--t); } /* //} */ .nav__burger span::before { /* //{ */ top: -6px; } /* //} */ .nav__burger span::after { /* //{ */ top: 6px; } /* //} */ .nav--ouvert .nav__burger span { /* //{ */ background: transparent; } /* //} */ .nav--ouvert .nav__burger span::before { /* //{ */ top: 0; transform: rotate(45deg); background: var(--encre); } /* //} */ .nav--ouvert .nav__burger span::after { /* //{ */ top: 0; transform: rotate(-45deg); background: var(--encre); } /* //} */ @media (max-width: 940px) { /* //{ */ .nav__burger { /* //{ */ display: flex; } /* //} */ .nav__liens { /* //{ */ position: fixed; inset: 0 0 auto 0; padding: 88px var(--gutter) 32px; flex-direction: column; align-items: stretch; gap: 2px; background: var(--papier); box-shadow: var(--ombre-lg); transform: translateY(-102%); transition: transform .45s cubic-bezier(.2,.7,.25,1); z-index: -1; } /* //} */ .nav--ouvert .nav__liens { /* //{ */ transform: none; } /* //} */ .nav__liens a:not(.nav__cta) { /* //{ */ color: var(--encre); font-size: 20px; font-family: var(--ff-display); padding: 14px 8px; border-bottom: 1px solid var(--ligne); border-radius: 0; } /* //} */ .nav__cta { /* //{ */ margin: 18px 8px 0; } /* //} */ .nav--ouvert .nav__logo { /* //{ */ color: var(--encre); } /* //} */ } /* //} */ /* //} */ /* //{ 5. Hero */ .hero { /* //{ */ min-height: 100svh; display: flex; align-items: flex-end; position: relative; background: var(--encre); color: var(--papier); padding: 0 0 clamp(40px,6vw,72px); overflow: hidden; } /* //} */ .hero__img { /* //{ */ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 26%; filter: saturate(.92) contrast(1.03); transform: scale(1.06); animation: zoomlent 18s ease-out forwards; } /* //} */ @keyframes zoomlent { /* //{ */ to { /* //{ */ transform: scale(1); } /* //} */ } /* //} */ .hero::before { /* //{ */ content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top,rgba(12,9,7,.94) 0%,rgba(12,9,7,.62) 42%,rgba(12,9,7,.30) 72%,rgba(12,9,7,.55) 100%),radial-gradient(120% 80% at 80% 20%,rgba(196,85,47,.20),transparent 60%); } /* //} */ .hero__in { /* //{ */ position: relative; z-index: 2; width: 100%; } /* //} */ .hero h1 { /* //{ */ color: var(--papier); font-size: clamp(56px,12.5vw,172px); line-height: .86; font-weight: 300; font-variation-settings: "SOFT" 60,"WONK" 1,"opsz" 144; letter-spacing: -.035em; margin-bottom: 26px; } /* //} */ .hero h1 em { /* //{ */ display: block; font-style: normal; color: var(--accent-clair); } /* //} */ .hero__accroche { /* //{ */ font-family: var(--ff-display); font-size: clamp(20px,2.7vw,30px); line-height: 1.35; color: rgba(247,242,233,.94); max-width: 22ch; margin-bottom: 14px; } /* //} */ .hero__meta { /* //{ */ display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; letter-spacing: .04em; color: rgba(247,242,233,.7); margin-bottom: 34px; text-transform: uppercase; // i- font-weight: 500; } /* //} */ .hero__meta span { /* //{ */ display: flex; align-items: center; gap: 9px; } /* //} */ .hero__meta span +span::before { /* //{ */ content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } /* //} */ .hero__actions { /* //{ */ display: flex; flex-wrap: wrap; gap: 12px; } /* //} */ .hero__scroll { /* //{ */ position: absolute; bottom: 24px; right: var(--gutter); z-index: 2; writing-mode: vertical-rl; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; // i- color: rgba(247,242,233,.55); display: flex; align-items: center; gap: 12px; } /* //} */ .hero__scroll::after { /* //{ */ content: ""; width: 1px; height: 46px; background: linear-gradient(var(--accent),transparent); } /* //} */ @media (max-width: 820px) { /* //{ */ .hero__scroll { /* //{ */ display: none; } /* //} */ } /* //} */ /* //} */ /* //{ 6. Bandeau de confiance */ .bandeau { /* //{ */ background: var(--encre); color: rgba(247,242,233,.62); padding-block: 22px; border-top: 1px solid var(--ligne-nuit); } /* //} */ .bandeau .wrap { /* //{ */ display: flex; flex-wrap: wrap; gap: 10px 38px; justify-content: center; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; // i- font-weight: 500; text-align: center; } /* //} */ /* //} */ /* //{ 7. Vidéos */ .videos { /* //{ */ background: var(--papier-2); } /* //} */ .video-vedette { /* //{ */ margin-top: 42px; } /* //} */ .lite { /* //{ */ position: relative; aspect-ratio: 16/9; border-radius: var(--r-lg); overflow: hidden; background: var(--encre) center/cover no-repeat; cursor: pointer; box-shadow: var(--ombre-lg); border: 0; width: 100%; display: block; } /* //} */ .lite::before { /* //{ */ content: ""; position: absolute; inset: 0; background: linear-gradient(to top,rgba(12,9,7,.78),rgba(12,9,7,.05) 55%); transition: background .4s; } /* //} */ .lite:hover::before { /* //{ */ background: linear-gradient(to top,rgba(12,9,7,.86),rgba(12,9,7,.2) 60%); } /* //} */ .lite__play { /* //{ */ position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; background: rgba(247,242,233,.94); display: grid; place-items: center; transition: var(--t); box-shadow: 0 10px 40px rgba(0,0,0,.4); } /* //} */ .lite:hover .lite__play { /* //{ */ transform: scale(1.1); background: var(--accent); } /* //} */ .lite__play svg { /* //{ */ width: 26px; height: 26px; fill: var(--encre); margin-left: 4px; transition: fill .3s; } /* //} */ .lite:hover .lite__play svg { /* //{ */ fill: #fff; } /* //} */ .lite__lg { /* //{ */ position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 26px; text-align: left; color: var(--papier); } /* //} */ .lite__lg strong { /* //{ */ display: block; font-family: var(--ff-display); font-size: clamp(19px,2.2vw,27px); font-weight: 400; } /* //} */ .lite__lg small { /* //{ */ font-size: 13px; color: rgba(247,242,233,.66); letter-spacing: .06em; } /* //} */ .lite iframe { /* //{ */ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* //} */ .video-grille { /* //{ */ display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 20px; margin-top: 20px; } /* //} */ .video-grille .lite { /* //{ */ border-radius: var(--r); box-shadow: var(--ombre); } /* //} */ .video-grille .lite__play { /* //{ */ width: 52px; height: 52px; } /* //} */ .video-grille .lite__play svg { /* //{ */ width: 18px; height: 18px; } /* //} */ .video-grille .lite__lg { /* //{ */ padding: 16px 18px; } /* //} */ /* //} */ /* //{ 8. Bio */ .bio__grid { /* //{ */ display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px,6vw,80px); align-items: start; margin-top: 42px; } /* //} */ @media (max-width: 900px) { /* //{ */ .bio__grid { /* //{ */ grid-template-columns: 1fr; } /* //} */ } /* //} */ .bio__portrait { /* //{ */ position: relative; } /* //} */ .bio__portrait img { /* //{ */ width: 100%; border-radius: var(--r-lg); box-shadow: var(--ombre-lg); aspect-ratio: 4/5; object-fit: cover; } /* //} */ .bio__portrait::after { /* //{ */ content: ""; position: absolute; inset: 16px -16px -16px 16px; border: 1.5px solid var(--accent); border-radius: var(--r-lg); z-index: -1; } /* //} */ .bio__texte p { /* //{ */ margin-bottom: 20px; } /* //} */ .bio__texte p:first-of-type { /* //{ */ font-size: clamp(20px,2.3vw,26px); font-family: var(--ff-display); line-height: 1.4; color: var(--encre); } /* //} */ .bio__refs { /* //{ */ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; } /* //} */ .tag { /* //{ */ font-size: 13px; font-weight: 500; padding: 7px 15px; border-radius: 100px; background: var(--papier-3); color: var(--encre-douce); } /* //} */ .bio__citation { /* //{ */ margin-top: 34px; padding: 22px 26px; border-left: 3px solid var(--accent); background: var(--papier-2); border-radius: 0 var(--r) var(--r) 0; font-family: var(--ff-display); font-size: 19px; line-height: 1.5; color: var(--encre); } /* //} */ /* //} */ /* //{ 9. Compositions */ .compos { /* //{ */ background: var(--encre); color: rgba(247,242,233,.76); } /* //} */ .compos h2,.compos h3 { /* //{ */ color: var(--papier); } /* //} */ .compos .chapo { /* //{ */ color: rgba(247,242,233,.66); } /* //} */ .compos .eyebrow::after { /* //{ */ background: var(--ligne-nuit); } /* //} */ .compos__liste { /* //{ */ margin-top: 44px; border-top: 1px solid var(--ligne-nuit); } /* //} */ .compo { /* //{ */ display: grid; grid-template-columns: 90px 1fr auto; gap: 22px; align-items: center; padding: 26px 8px; border-bottom: 1px solid var(--ligne-nuit); text-decoration: none; transition: background .3s,padding .3s; } /* //} */ .compo:hover { /* //{ */ background: rgba(247,242,233,.045); padding-inline: 18px 18px; } /* //} */ .compo__annee { /* //{ */ font-family: var(--ff-display); font-size: 17px; color: var(--accent-clair); } /* //} */ .compo__titre { /* //{ */ font-family: var(--ff-display); font-size: clamp(26px,4vw,44px); color: var(--papier); font-weight: 300; } /* //} */ .compo__ecouter { /* //{ */ display: flex; align-items: center; gap: 10px; font-size: 13.5px; letter-spacing: .1em; text-transform: uppercase; // i- color: rgba(247,242,233,.6); transition: color .3s; } /* //} */ .compo:hover .compo__ecouter { /* //{ */ color: var(--accent-clair); } /* //} */ .compo__ecouter svg { /* //{ */ width: 34px; height: 34px; border-radius: 50%; border: 1px solid currentColor; padding: 9px; } /* //} */ @media (max-width: 620px) { /* //{ */ .compo { /* //{ */ grid-template-columns: 1fr auto; gap: 4px 16px; } /* //} */ .compo__annee { /* //{ */ grid-column: 1; font-size: 14px; } /* //} */ .compo__titre { /* //{ */ grid-column: 1; } /* //} */ .compo__ecouter { /* //{ */ grid-row: 1 / span 2; grid-column: 2; } /* //} */ .compo__ecouter span { /* //{ */ display: none; } /* //} */ } /* //} */ /* //} */ /* //{ 10. Références / historique */ .refs__liste { /* //{ */ margin-top: 44px; border-top: 1px solid var(--ligne); } /* //} */ .ref { /* //{ */ display: grid; grid-template-columns: 120px 1fr auto; gap: 24px; align-items: baseline; padding: 20px 6px; border-bottom: 1px solid var(--ligne); } /* //} */ .ref__date { /* //{ */ font-family: var(--ff-display); font-size: 15px; color: var(--accent-texte); letter-spacing: .02em; white-space: nowrap; } /* //} */ .ref__lieu { /* //{ */ font-family: var(--ff-display); font-size: clamp(19px,2.2vw,25px); color: var(--encre); } /* //} */ .ref__lieu span { /* //{ */ color: var(--gris-clair); } /* //} */ .ref__ctx { /* //{ */ font-size: 14.5px; color: var(--gris); text-align: right; max-width: 34ch; } /* //} */ .ref a { /* //{ */ color: var(--accent); } /* //} */ @media (max-width: 760px) { /* //{ */ .ref { /* //{ */ grid-template-columns: 1fr; gap: 4px; } /* //} */ .ref__ctx { /* //{ */ text-align: left; } /* //} */ } /* //} */ /* //} */ /* //{ 11. Tarifs */ .tarifs { /* //{ */ background: var(--papier-2); } /* //} */ .tarifs__grille { /* //{ */ display: grid; grid-template-columns: repeat(auto-fit,minmax(226px,1fr)); gap: 16px; margin-top: 46px; } /* //} */ .formule { /* //{ */ background: var(--papier); border: 1px solid var(--ligne); border-radius: var(--r-lg); padding: 28px 26px 26px; display: flex; flex-direction: column; position: relative; transition: var(--t); } /* //} */ .formule:hover { /* //{ */ transform: translateY(-4px); box-shadow: var(--ombre-lg); border-color: transparent; } /* //} */ .formule--vedette { /* //{ */ background: var(--encre); border-color: var(--encre); } /* //} */ .formule--vedette .formule__nom,.formule--vedette .formule__prix { /* //{ */ color: var(--papier); } /* //} */ .formule--vedette .formule__pour,.formule--vedette .formule__duree { /* //{ */ color: rgba(247,242,233,.62); } /* //} */ .formule--vedette li { /* //{ */ color: rgba(247,242,233,.82); border-color: var(--ligne-nuit); } /* //} */ .formule__badge { /* //{ */ position: absolute; top: -11px; left: 26px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; // i- padding: 5px 12px; border-radius: 100px; } /* //} */ .formule__nom { /* //{ */ font-family: var(--ff-display); font-size: 25px; color: var(--encre); margin-bottom: 4px; } /* //} */ .formule__duree { /* //{ */ font-size: 13px; letter-spacing: .1em; text-transform: uppercase; // i- color: var(--gris-clair); margin-bottom: 18px; } /* //} */ .formule__prix { /* //{ */ font-family: var(--ff-display); font-size: 42px; color: var(--encre); line-height: 1; margin-bottom: 4px; } /* //} */ .formule__prix small { /* //{ */ font-size: 14px; font-family: var(--ff-texte); color: var(--gris); display: block; margin-bottom: 10px; } /* //} */ .formule__pour { /* //{ */ font-size: 14.5px; color: var(--gris); margin-bottom: 18px; } /* //} */ .formule ul { /* //{ */ list-style: none; padding: 0; margin: 0 0 22px; flex: 1; } /* //} */ .formule li { /* //{ */ font-size: 14.5px; padding: 9px 0 9px 26px; border-top: 1px solid var(--ligne); position: relative; } /* //} */ .formule li::before { /* //{ */ content: ""; position: absolute; left: 2px; top: 16px; width: 9px; height: 5px; border-left: 1.8px solid var(--accent); border-bottom: 1.8px solid var(--accent); transform: rotate(-45deg); } /* //} */ .formule .btn { /* //{ */ width: 100%; } /* //} */ .tarifs__conditions { /* //{ */ margin-top: 34px; display: grid; gap: 9px; max-width: 78ch; } /* //} */ .tarifs__conditions li { /* //{ */ list-style: none; font-size: 14.5px; color: var(--gris); padding-left: 22px; position: relative; } /* //} */ .tarifs__conditions li::before { /* //{ */ content: "\2014"; position: absolute; left: 0; color: var(--accent-texte); } /* //} */ /* //} */ /* //{ 12. Agenda */ .programmer { /* //{ */ background: var(--encre); color: rgba(247,242,233,.78); } /* //} */ .programmer h2,.programmer h3,.programmer h4 { /* //{ */ color: var(--papier); } /* //} */ .programmer .chapo { /* //{ */ color: rgba(247,242,233,.66); } /* //} */ .programmer .eyebrow::after { /* //{ */ background: var(--ligne-nuit); } /* //} */ .programmer__cols { /* //{ */ display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px,4vw,54px); margin-top: 46px; align-items: start; } /* //} */ @media (max-width: 980px) { /* //{ */ .programmer__cols { /* //{ */ grid-template-columns: 1fr; } /* //} */ } /* //} */ .cal { /* //{ */ background: rgba(247,242,233,.05); border: 1px solid var(--ligne-nuit); border-radius: var(--r-lg); padding: 24px; } /* //} */ .cal__barre { /* //{ */ display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; } /* //} */ .cal__mois { /* //{ */ font-family: var(--ff-display); font-size: 23px; color: var(--papier); text-transform: capitalize; } /* //} */ .cal__nav { /* //{ */ display: flex; gap: 8px; } /* //} */ .cal__nav button { /* //{ */ width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ligne-nuit); color: var(--papier); display: grid; place-items: center; transition: var(--t); } /* //} */ .cal__nav button:hover:not([disabled]) { /* //{ */ background: var(--accent); border-color: var(--accent); } /* //} */ .cal__nav button[disabled] { /* //{ */ opacity: .3; cursor: not-allowed; } /* //} */ .cal__nav svg { /* //{ */ width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; } /* //} */ .cal__jours,.cal__grille { /* //{ */ display: grid; grid-template-columns: repeat(7,1fr); gap: 5px; } /* //} */ .cal__jours { /* //{ */ margin-bottom: 8px; } /* //} */ .cal__jours span { /* //{ */ text-align: center; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; // i- color: rgba(247,242,233,.4); font-weight: 600; } /* //} */ .j { /* //{ */ aspect-ratio: 1; border-radius: 11px; display: grid; place-items: center; position: relative; font-size: 14.5px; font-weight: 500; color: rgba(247,242,233,.8); transition: var(--t); border: 1px solid transparent; } /* //} */ .j--vide { /* //{ */ visibility: hidden; } /* //} */ .j--passe { /* //{ */ color: rgba(247,242,233,.2); cursor: default; } /* //} */ .j--libre { /* //{ */ background: rgba(247,242,233,.07); border-color: var(--ligne-nuit); cursor: pointer; } /* //} */ .j--libre:hover { /* //{ */ background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.09); } /* //} */ .j--sel { /* //{ */ background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; box-shadow: 0 0 0 3px rgba(196,85,47,.3); } /* //} */ .j--confirme { /* //{ */ background: rgba(196,85,47,.16); border-color: rgba(196,85,47,.5); color: var(--accent-clair); cursor: default; } /* //} */ .j--option { /* //{ */ background: rgba(224,193,85,.12); border-color: rgba(224,193,85,.42); color: #E0C155; cursor: default; } /* //} */ .j--indispo { /* //{ */ background: rgba(247,242,233,.03); color: rgba(247,242,233,.22); cursor: default; text-decoration: line-through; text-decoration-thickness: 1px; } /* //} */ .j__pt { /* //{ */ position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; } /* //} */ .cal__legende { /* //{ */ display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--ligne-nuit); font-size: 12.5px; color: rgba(247,242,233,.6); } /* //} */ .cal__legende span { /* //{ */ display: flex; align-items: center; gap: 7px; } /* //} */ .cal__legende i { /* //{ */ width: 11px; height: 11px; border-radius: 4px; display: block; border: 1px solid; } /* //} */ .lg-libre { /* //{ */ background: rgba(247,242,233,.09); border-color: var(--ligne-nuit); } /* //} */ .lg-confirme { /* //{ */ background: rgba(196,85,47,.2); border-color: rgba(196,85,47,.55); } /* //} */ .lg-option { /* //{ */ background: rgba(224,193,85,.15); border-color: rgba(224,193,85,.45); } /* //} */ .lg-indispo { /* //{ */ background: rgba(247,242,233,.03); border-color: rgba(247,242,233,.14); } /* //} */ /* créneaux */ .creneaux__titre { /* //{ */ font-size: 15px; letter-spacing: .1em; text-transform: uppercase; // i- color: rgba(247,242,233,.55); font-family: var(--ff-texte); font-weight: 600; margin-bottom: 16px; } /* //} */ .creneaux__vide { /* //{ */ padding: 30px 26px; border: 1px dashed var(--ligne-nuit); border-radius: var(--r-lg); color: rgba(247,242,233,.5); font-size: 15px; text-align: center; } /* //} */ .creneau { /* //{ */ width: 100%; display: flex; align-items: center; gap: 16px; text-align: left; padding: 16px 18px; border: 1px solid var(--ligne-nuit); border-radius: var(--r); margin-bottom: 10px; transition: var(--t); background: rgba(247,242,233,.04); } /* //} */ .creneau:hover { /* //{ */ border-color: var(--accent); background: rgba(196,85,47,.12); transform: translateX(3px); } /* //} */ .creneau--actif { /* //{ */ border-color: var(--accent); background: rgba(196,85,47,.18); } /* //} */ .creneau__h { /* //{ */ font-family: var(--ff-display); font-size: 19px; color: var(--papier); white-space: nowrap; } /* //} */ .creneau__txt strong { /* //{ */ display: block; font-size: 15px; color: var(--papier); font-weight: 600; } /* //} */ .creneau__txt small { /* //{ */ font-size: 13px; color: rgba(247,242,233,.55); } /* //} */ .creneau__coche { /* //{ */ margin-left: auto; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ligne-nuit); display: grid; place-items: center; flex-shrink: 0; } /* //} */ .creneau--actif .creneau__coche { /* //{ */ background: var(--accent); border-color: var(--accent); } /* //} */ .creneau__coche svg { /* //{ */ width: 11px; height: 11px; stroke: #fff; fill: none; stroke-width: 3; opacity: 0; } /* //} */ .creneau--actif .creneau__coche svg { /* //{ */ opacity: 1; } /* //} */ .selection { /* //{ */ background: rgba(196,85,47,.14); border: 1px solid rgba(196,85,47,.4); border-radius: var(--r); padding: 16px 18px; margin-bottom: 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* //} */ .selection strong { /* //{ */ font-family: var(--ff-display); font-size: 19px; color: var(--papier); } /* //} */ .selection button { /* //{ */ margin-left: auto; font-size: 13px; color: var(--accent-clair); text-decoration: underline; } /* //} */ /* prochaines dates */ .prochaines { /* //{ */ margin-top: 26px; } /* //} */ .prochaine { /* //{ */ display: flex; align-items: center; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--ligne-nuit); text-decoration: none; } /* //} */ .prochaine__d { /* //{ */ text-align: center; min-width: 54px; } /* //} */ .prochaine__d b { /* //{ */ display: block; font-family: var(--ff-display); font-size: 26px; color: var(--accent-clair); line-height: 1; } /* //} */ .prochaine__d small { /* //{ */ font-size: 11px; letter-spacing: .12em; text-transform: uppercase; // i- color: rgba(247,242,233,.5); } /* //} */ .prochaine__i strong { /* //{ */ display: block; font-family: var(--ff-display); font-size: 19px; color: var(--papier); font-weight: 400; } /* //} */ .prochaine__i small { /* //{ */ font-size: 13.5px; color: rgba(247,242,233,.55); } /* //} */ /* //} */ /* //{ 13. Formulaire */ .demande { /* //{ */ background: var(--papier-2); } /* //} */ .form { /* //{ */ margin-top: 42px; background: var(--papier); border: 1px solid var(--ligne); border-radius: var(--r-lg); padding: clamp(24px,4vw,44px); box-shadow: var(--ombre); } /* //} */ .form__grid { /* //{ */ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } /* //} */ @media (max-width: 720px) { /* //{ */ .form__grid { /* //{ */ grid-template-columns: 1fr; } /* //} */ } /* //} */ .champ { /* //{ */ display: flex; flex-direction: column; gap: 7px; } /* //} */ .champ--large { /* //{ */ grid-column: 1 / -1; } /* //} */ .champ label { /* //{ */ font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; // i- color: var(--gris); } /* //} */ .champ label .req { /* //{ */ color: var(--accent-texte); } /* //} */ .champ input,.champ select,.champ textarea { /* //{ */ padding: 13px 15px; border: 1.5px solid var(--ligne); border-radius: 11px; background: var(--papier-2); font-size: 16px; transition: var(--t); font-family: inherit; width: 100%; } /* //} */ .champ textarea { /* //{ */ min-height: 120px; resize: vertical; } /* //} */ .champ input:focus,.champ select:focus,.champ textarea:focus { /* //{ */ outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px rgba(196,85,47,.12); } /* //} */ .champ input[aria-invalid="true"],.champ select[aria-invalid="true"] { /* //{ */ border-color: #B3261E; } /* //} */ .champ .aide { /* //{ */ font-size: 12.5px; color: var(--gris-clair); } /* //} */ .champ .err { /* //{ */ font-size: 12.5px; color: #B3261E; font-weight: 500; display: none; } /* //} */ .champ .err.on { /* //{ */ display: block; } /* //} */ .form__pied { /* //{ */ display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--ligne); } /* //} */ .form__rgpd { /* //{ */ font-size: 13px; color: var(--gris-clair); flex: 1; min-width: 240px; } /* //} */ .pot { /* //{ */ position: absolute; left: -9999px; } /* //} */ .form__ok,.form__ko { /* //{ */ display: none; padding: 26px; border-radius: var(--r); margin-top: 22px; font-size: 16px; } /* //} */ .form__ok { /* //{ */ background: rgba(78,107,82,.12); border: 1px solid rgba(78,107,82,.4); color: #38503C; } /* //} */ .form__ko { /* //{ */ background: rgba(179,38,30,.08); border: 1px solid rgba(179,38,30,.35); color: #8C1D18; } /* //} */ .form__ok.on,.form__ko.on { /* //{ */ display: block; } /* //} */ .form__ok strong { /* //{ */ display: block; font-family: var(--ff-display); font-size: 22px; margin-bottom: 6px; color: #2F4433; } /* //} */ /* //} */ /* //{ 14. Espace pro */ .pro__cols { /* //{ */ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,64px); margin-top: 44px; } /* //} */ @media (max-width: 860px) { /* //{ */ .pro__cols { /* //{ */ grid-template-columns: 1fr; } /* //} */ } /* //} */ .fiche { /* //{ */ border-top: 1px solid var(--ligne); } /* //} */ .fiche__l { /* //{ */ display: grid; grid-template-columns: 130px 1fr; gap: 18px; padding: 14px 4px; border-bottom: 1px solid var(--ligne); font-size: 15px; } /* //} */ .fiche__l dt { /* //{ */ font-weight: 600; color: var(--encre); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; // i- } /* //} */ .fiche__l dd { /* //{ */ margin: 0; color: var(--gris); } /* //} */ @media (max-width: 520px) { /* //{ */ .fiche__l { /* //{ */ grid-template-columns: 1fr; gap: 3px; } /* //} */ } /* //} */ .pro__kit { /* //{ */ display: grid; gap: 12px; margin-top: 8px; } /* //} */ .kit { /* //{ */ display: flex; align-items: center; gap: 15px; padding: 17px 20px; border: 1px solid var(--ligne); border-radius: var(--r); text-decoration: none; transition: var(--t); background: var(--papier); } /* //} */ .kit:hover { /* //{ */ border-color: var(--accent); transform: translateX(4px); box-shadow: var(--ombre); } /* //} */ .kit svg { /* //{ */ width: 21px; height: 21px; stroke: var(--accent); fill: none; stroke-width: 1.7; flex-shrink: 0; } /* //} */ .kit strong { /* //{ */ display: block; font-size: 15.5px; color: var(--encre); font-weight: 600; } /* //} */ .kit small { /* //{ */ font-size: 13px; color: var(--gris-clair); } /* //} */ /* //} */ /* //{ 15. Pied de page */ .pied { /* //{ */ background: var(--encre); color: rgba(247,242,233,.6); padding-block: clamp(50px,7vw,80px) 30px; } /* //} */ .pied h2 { /* //{ */ color: var(--papier); font-size: clamp(32px,5vw,56px); margin-bottom: 18px; } /* //} */ .pied__haut { /* //{ */ display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; padding-bottom: 46px; border-bottom: 1px solid var(--ligne-nuit); } /* //} */ @media (max-width: 820px) { /* //{ */ .pied__haut { /* //{ */ grid-template-columns: 1fr; } /* //} */ } /* //} */ .pied__contacts { /* //{ */ display: grid; gap: 14px; align-content: start; } /* //} */ .pied__contacts a { /* //{ */ display: flex; align-items: center; gap: 13px; text-decoration: none; font-size: 17px; color: rgba(247,242,233,.85); transition: color .3s; } /* //} */ .pied__contacts a:hover { /* //{ */ color: var(--accent-clair); } /* //} */ .pied__contacts svg { /* //{ */ width: 19px; height: 19px; stroke: var(--accent); fill: none; stroke-width: 1.7; } /* //} */ .pied__contacts small { /* //{ */ display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; // i- color: rgba(247,242,233,.62); margin-bottom: 3px; } /* //} */ .pied__bas { /* //{ */ display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; padding-top: 26px; font-size: 13px; color: rgba(247,242,233,.58); } /* //} */ .pied__bas a { /* //{ */ text-decoration: none; } /* //} */ .pied__bas a:hover { /* //{ */ color: var(--accent-clair); } /* //} */ /* //} */ /* //{ 16. Modale vidéo */ .modale { /* //{ */ position: fixed; inset: 0; z-index: 300; background: rgba(8,6,5,.94); backdrop-filter: blur(8px); display: none; place-items: center; padding: var(--gutter); } /* //} */ .modale[open],.modale.on { /* //{ */ display: grid; } /* //} */ .modale__box { /* //{ */ width: min(1600px,95vw); aspect-ratio: 16/9; position: relative; } /* //} */ .modale__box iframe { /* //{ */ position: absolute; inset: 0; width: 90%; height: 400px; border: 0; border-radius: var(--r); } /* //} */ .modale__x { /* //{ */ position: absolute; top: -4px; right: 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ligne-nuit); color: var(--papier); display: grid; place-items: center; } /* //} */ .modale__x:hover { /* //{ */ background: var(--accent); border-color: var(--accent); } /* //} */ .modale__x svg { /* //{ */ width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; } /* //} */ /* VERSION 2 — site de présentation Écoute permanente, galerie, partie booking assagie. */ /* //} */ /* //{ Fonds de section */ .ecoute { /* //{ */ background: var(--papier); } /* //} */ .videos { /* //{ */ background: var(--papier-2); } /* //} */ .images { /* //{ */ background: var(--encre); color: rgba(247,242,233,.76); } /* //} */ .images h2 { /* //{ */ color: var(--papier); } /* //} */ .images .chapo { /* //{ */ color: rgba(247,242,233,.66); } /* //} */ .images .eyebrow { /* //{ */ color: var(--accent-clair); } /* //} */ .images .eyebrow::after { /* //{ */ background: var(--ligne-nuit); } /* //} */ /* //} */ /* //{ Bouton « écouter » du hero */ .btn-ecoute svg { /* //{ */ width: 15px; height: 15px; flex-shrink: 0; } /* //} */ /* //} */ /* //{ Liste de pistes */ .pistes { /* //{ */ margin-top: 40px; display: grid; gap: 2px; } /* //} */ .piste { /* //{ */ display: grid; grid-template-columns: 46px 1fr auto; gap: 18px; align-items: center; padding: 13px 16px; border-radius: var(--r); border: 1.5px solid transparent; transition: background .25s,border-color .25s; text-align: left; width: 100%; } /* //} */ .piste:hover { /* //{ */ background: var(--papier-2); } /* //} */ .piste--actif { /* //{ */ background: var(--papier-2); border-color: rgba(196,85,47,.42); } /* //} */ .piste__pp { /* //{ */ width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--ligne); display: grid; place-items: center; transition: var(--t); flex-shrink: 0; } /* //} */ .piste:hover .piste__pp { /* //{ */ border-color: var(--accent); background: var(--accent-bouton); } /* //} */ .piste:hover .piste__pp svg { /* //{ */ fill: #fff; } /* //} */ .piste--actif .piste__pp { /* //{ */ border-color: var(--accent); background: var(--accent-bouton); } /* //} */ .piste--actif .piste__pp svg { /* //{ */ fill: #fff; } /* //} */ .piste__pp svg { /* //{ */ width: 15px; height: 15px; fill: var(--encre); margin-left: 2px; transition: fill .25s; } /* //} */ .piste--actif .piste__pp .ico-p1 { /* //{ */ display: none; } /* //} */ .piste__pp .ico-p2 { /* //{ */ display: none; margin-left: 0; } /* //} */ .piste--actif .piste__pp .ico-p2 { /* //{ */ display: block; } /* //} */ .piste__t strong { /* //{ */ display: block; font-family: var(--ff-display); font-size: clamp(20px,2.4vw,27px); font-weight: 400; color: var(--encre); line-height: 1.2; } /* //} */ .piste__t small { /* //{ */ font-size: 13.5px; color: var(--gris); } /* //} */ .piste__meta { /* //{ */ display: flex; align-items: center; gap: 14px; } /* //} */ .piste__tag { /* //{ */ font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; // i- padding: 5px 11px; border-radius: 100px; white-space: nowrap; } /* //} */ .tag-composition { /* //{ */ background: rgba(196,85,47,.14); color: var(--accent-texte); } /* //} */ .tag-reprise { /* //{ */ background: var(--papier-3); color: var(--encre-douce); } /* //} */ .tag-live { /* //{ */ background: rgba(78,107,82,.14); color: #3E5742; } /* //} */ /* égaliseur du titre en cours */ .eq { /* //{ */ display: none; gap: 2.5px; align-items: flex-end; height: 16px; width: 18px; } /* //} */ .piste--actif.piste--joue .eq { /* //{ */ display: flex; } /* //} */ .eq i { /* //{ */ display: block; width: 3px; background: var(--accent); border-radius: 2px; animation: eq .9s ease-in-out infinite; } /* //} */ .eq i:nth-child(1) { /* //{ */ height: 40%; animation-delay: -.5s; } /* //} */ .eq i:nth-child(2) { /* //{ */ height: 95%; animation-delay: -.25s; } /* //} */ .eq i:nth-child(3) { /* //{ */ height: 60%; } /* //} */ .eq i:nth-child(4) { /* //{ */ height: 80%; animation-delay: -.7s; } /* //} */ @keyframes eq { /* //{ */ 0%,100% { /* //{ */ transform: scaleY(.35); } /* //} */ 50% { /* //{ */ transform: scaleY(1); } /* //} */ } /* //} */ @media (prefers-reduced-motion: reduce) { /* //{ */ .eq i { /* //{ */ animation: none; } /* //} */ } /* //} */ .ecoute__note { /* //{ */ margin-top: 26px; font-size: 14.5px; color: var(--gris-clair); } /* //} */ .ecoute__note a { /* //{ */ color: var(--accent-texte); } /* //} */ @media (max-width: 620px) { /* //{ */ /* le sous-titre porte déjà l'information de l'étiquette : on l'enlève */ .piste { /* //{ */ grid-template-columns: 42px 1fr; gap: 14px; padding: 12px 10px; } /* //} */ .piste__meta { /* //{ */ display: none; } /* //} */ .piste__pp { /* //{ */ width: 42px; height: 42px; } /* //} */ } /* //} */ /* //} */ /* //{ Lecteur permanent */ .player { /* //{ */ position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; background: rgba(18,14,11,.96); backdrop-filter: blur(16px) saturate(1.3); border-top: 1px solid var(--ligne-nuit); color: var(--papier); transform: translateY(115%); transition: transform .5s cubic-bezier(.2,.7,.25,1); } /* //} */ .player--on { /* //{ */ transform: none; } /* //} */ body.a-player { /* //{ */ padding-bottom: 82px; } /* //} */ .player__in { /* //{ */ max-width: var(--max); margin-inline: auto; padding: 11px var(--gutter); display: flex; align-items: center; gap: 15px; } /* //} */ .player__pp { /* //{ */ width: 44px; height: 44px; border-radius: 50%; background: var(--accent-bouton); display: grid; place-items: center; flex-shrink: 0; transition: var(--t); } /* //} */ .player__pp:hover { /* //{ */ background: var(--accent-clair); transform: scale(1.06); } /* //} */ .player__pp svg { /* //{ */ width: 16px; height: 16px; color: #fff; grid-area: 1/1; } /* //} */ .player__pp .ico-play { /* //{ */ margin-left: 3px; } /* //} */ .player__pp .ico-pause,.player__pp .ico-charge { /* //{ */ display: none; } /* //} */ .player--joue .player__pp .ico-play { /* //{ */ display: none; } /* //} */ .player--joue .player__pp .ico-pause { /* //{ */ display: block; } /* //} */ .player--charge .player__pp .ico-play,.player--charge .player__pp .ico-pause { /* //{ */ display: none; } /* //} */ .player--charge .player__pp .ico-charge { /* //{ */ display: block; animation: tourne 1s linear infinite; } /* //} */ @keyframes tourne { /* //{ */ to { /* //{ */ transform: rotate(360deg); } /* //} */ } /* //} */ .player__txt { /* //{ */ min-width: 0; flex: 0 1 240px; } /* //} */ .player__txt strong { /* //{ */ display: block; font-family: var(--ff-display); font-size: 17px; font-weight: 400; color: var(--papier); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* //} */ .player__txt small { /* //{ */ display: block; font-size: 12px; color: rgba(247,242,233,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* //} */ .player__barre { /* //{ */ flex: 1; height: 22px; display: flex; align-items: center; cursor: pointer; min-width: 60px; } /* //} */ .player__barre::before { /* //{ */ content: ""; position: absolute; left: 0; right: 0; height: 3px; border-radius: 3px; background: rgba(247,242,233,.18); pointer-events: none; } /* //} */ .player__barre { /* //{ */ position: relative; } /* //} */ .player__prog { /* //{ */ position: absolute; left: 0; height: 3px; border-radius: 3px; width: 0; background: var(--accent-clair); transition: width .25s linear; } /* //} */ .player__temps { /* //{ */ font-size: 12.5px; color: rgba(247,242,233,.6); font-variant-numeric: tabular-nums; } /* //} */ .player__nav,.player__x,.player__yt { /* //{ */ width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: rgba(247,242,233,.72); transition: var(--t); flex-shrink: 0; } /* //} */ .player__nav:hover,.player__x:hover,.player__yt:hover { /* //{ */ background: rgba(247,242,233,.1); color: var(--papier); } /* //} */ .player__nav svg,.player__x svg,.player__yt svg { /* //{ */ width: 16px; height: 16px; } /* //} */ .player__host { /* //{ */ position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } /* //} */ @media (max-width: 760px) { /* //{ */ .player__barre,.player__temps,.player__yt { /* //{ */ display: none; } /* //} */ .player__txt { /* //{ */ flex: 1; } /* //} */ .player__in { /* //{ */ gap: 12px; padding-inline: 16px; } /* //} */ body.a-player { /* //{ */ padding-bottom: 74px; } /* //} */ } /* //} */ /* //} */ /* //{ Galerie mosaïque */ .mosaique { /* //{ */ margin-top: 44px; columns: 3 250px; column-gap: 12px; } /* //} */ .vign { /* //{ */ position: relative; overflow: hidden; border-radius: var(--r); cursor: pointer; background: rgba(247,242,233,.06); border: 0; padding: 0; display: block; width: 100%; break-inside: avoid; margin: 0 0 12px; } /* //} */ .vign img { /* //{ */ width: 100%; height: auto; display: block; transition: transform .7s cubic-bezier(.2,.7,.25,1); } /* //} */ /* une photo « grand » traverse toute la largeur de la mosaïque */ .vign--grand { /* //{ */ column-span: all; margin-bottom: 12px; } /* //} */ .vign--grand img { /* //{ */ aspect-ratio: 21 / 9; object-fit: cover; } /* //} */ .vign:hover img { /* //{ */ transform: scale(1.06); } /* //} */ .vign::after { /* //{ */ content: ""; position: absolute; inset: 0; background: rgba(12,9,7,.2); opacity: 0; transition: opacity .35s; } /* //} */ .vign:hover::after { /* //{ */ opacity: 1; } /* //} */ .vign__loupe { /* //{ */ position: absolute; right: 12px; bottom: 12px; width: 36px; height: 36px; border-radius: 50%; background: rgba(247,242,233,.92); display: grid; place-items: center; opacity: 0; transform: translateY(6px); transition: var(--t); z-index: 2; } /* //} */ .vign:hover .vign__loupe { /* //{ */ opacity: 1; transform: none; } /* //} */ .vign__loupe svg { /* //{ */ width: 15px; height: 15px; stroke: var(--encre); fill: none; stroke-width: 2; } /* //} */ @media (max-width: 900px) { /* //{ */ .mosaique { /* //{ */ columns: 2 180px; } /* //} */ } /* //} */ @media (max-width: 520px) { /* //{ */ .mosaique { /* //{ */ column-gap: 9px; } /* //} */ .vign { /* //{ */ margin-bottom: 9px; } /* //} */ .vign--grand img { /* //{ */ aspect-ratio: 16 / 10; } /* //} */ } /* //} */ /* portrait de la bio : cadrage 4/5 centré sur le visage */ .bio__portrait img { /* //{ */ height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 42%; } /* //} */ /* //} */ /* //{ Mur Instagram */ .insta-mur { /* //{ */ display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 16px; margin-top: 16px; } /* //} */ .insta-mur iframe { /* //{ */ width: 100%; border: 0; border-radius: var(--r); background: var(--papier); min-height: 480px; } /* //} */ /* //} */ /* //{ Appel Instagram */ .insta-cta { /* //{ */ margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 24px 28px; border: 1px solid var(--ligne-nuit); border-radius: var(--r-lg); background: rgba(247,242,233,.045); } /* //} */ .insta-cta__ico { /* //{ */ width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex-shrink: 0; background: linear-gradient(135deg,#C4552F,#E08155); } /* //} */ .insta-cta__ico svg { /* //{ */ width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 1.8; } /* //} */ .insta-cta__txt { /* //{ */ flex: 1; min-width: 200px; } /* //} */ .insta-cta__txt strong { /* //{ */ display: block; font-family: var(--ff-display); font-size: 21px; color: var(--papier); font-weight: 400; } /* //} */ .insta-cta__txt small { /* //{ */ font-size: 14px; color: rgba(247,242,233,.62); } /* //} */ /* //} */ /* //{ Visionneuse photo */ .visio { /* //{ */ position: fixed; inset: 0; z-index: 300; background: rgba(8,6,5,.96); backdrop-filter: blur(10px); display: none; place-items: center; padding: clamp(16px,5vw,60px); } /* //} */ .visio.on { /* //{ */ display: grid; } /* //} */ .visio img { /* //{ */ max-width: 100%; max-height: 88vh; border-radius: var(--r); object-fit: contain; } /* //} */ .visio__x,.visio__fl { /* //{ */ position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--ligne-nuit); color: var(--papier); display: grid; place-items: center; transition: var(--t); background: rgba(12,9,7,.5); } /* //} */ .visio__x { /* //{ */ top: 20px; right: 20px; } /* //} */ .visio__fl--g { /* //{ */ left: 16px; top: 50%; transform: translateY(-50%); } /* //} */ .visio__fl--d { /* //{ */ right: 16px; top: 50%; transform: translateY(-50%); } /* //} */ .visio__x:hover,.visio__fl:hover { /* //{ */ background: var(--accent-bouton); border-color: var(--accent-bouton); } /* //} */ .visio__x svg,.visio__fl svg { /* //{ */ width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; } /* //} */ /* //} */ /* //{ Prochaines dates publiques (section Dates) */ .pub-dates { /* //{ */ display: grid; gap: 12px; margin: 40px 0 8px; } /* //} */ .pub-date { /* //{ */ display: flex; align-items: center; gap: 22px; padding: 20px 24px; text-decoration: none; background: var(--papier-2); border: 1.5px solid rgba(196,85,47,.3); border-radius: var(--r-lg); transition: var(--t); } /* //} */ .pub-date:hover { /* //{ */ transform: translateY(-2px); box-shadow: var(--ombre); border-color: var(--accent); } /* //} */ .pub-date__d { /* //{ */ text-align: center; min-width: 62px; } /* //} */ .pub-date__d b { /* //{ */ display: block; font-family: var(--ff-display); font-size: 32px; color: var(--accent-texte); line-height: 1; } /* //} */ .pub-date__d small { /* //{ */ font-size: 11px; letter-spacing: .12em; text-transform: uppercase; // i- color: var(--gris); } /* //} */ .pub-date__i strong { /* //{ */ display: block; font-family: var(--ff-display); font-size: 22px; color: var(--encre); font-weight: 400; } /* //} */ .pub-date__i small { /* //{ */ font-size: 14px; color: var(--gris); } /* //} */ .pub-date__fl { /* //{ */ margin-left: auto; font-size: 13px; color: var(--accent-texte); font-weight: 600; } /* //} */ .pub-titre { /* //{ */ font-size: 13px; letter-spacing: .12em; text-transform: uppercase; // i- color: var(--gris); font-weight: 600; margin-top: 40px; } /* //} */ /* //} */ /* //{ Volets repliables (tarifs, fiche technique) */ .volet { /* //{ */ margin-top: 18px; border: 1px solid var(--ligne-nuit); border-radius: var(--r-lg); background: rgba(247,242,233,.04); overflow: hidden; } /* //} */ .volet +.volet { /* //{ */ margin-top: 12px; } /* //} */ .volet summary { /* //{ */ display: flex; align-items: center; gap: 18px; padding: 22px 26px; cursor: pointer; list-style: none; transition: background .25s; } /* //} */ .volet summary::-webkit-details-marker { /* //{ */ display: none; } /* //} */ .volet summary:hover { /* //{ */ background: rgba(247,242,233,.05); } /* //} */ .volet summary strong { /* //{ */ display: block; font-family: var(--ff-display); font-size: 21px; color: var(--papier); font-weight: 400; } /* //} */ .volet summary small { /* //{ */ font-size: 14px; color: rgba(247,242,233,.6); } /* //} */ .volet__chev { /* //{ */ margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ligne-nuit); display: grid; place-items: center; flex-shrink: 0; transition: var(--t); } /* //} */ .volet__chev svg { /* //{ */ width: 15px; height: 15px; stroke: var(--papier); fill: none; stroke-width: 2; transition: transform .3s; } /* //} */ .volet[open] .volet__chev svg { /* //{ */ transform: rotate(180deg); } /* //} */ .volet[open] .volet__chev { /* //{ */ background: var(--accent-bouton); border-color: var(--accent-bouton); } /* //} */ .volet__corps { /* //{ */ padding: 4px 26px 30px; } /* //} */ .volet__h3 { /* //{ */ font-size: 15px; letter-spacing: .1em; text-transform: uppercase; // i- color: rgba(247,242,233,.6); font-family: var(--ff-texte); font-weight: 600; margin-bottom: 16px; } /* //} */ @media (max-width: 560px) { /* //{ */ .volet summary { /* //{ */ padding: 18px; gap: 12px; } /* //} */ .volet__corps { /* //{ */ padding: 4px 18px 24px; } /* //} */ } /* //} */ /* tarifs à l'intérieur d'un volet (fond sombre) */ .volet .tarifs__grille { /* //{ */ margin-top: 8px; } /* //} */ .volet .formule--vedette { /* //{ */ background: rgba(196,85,47,.14); border-color: rgba(196,85,47,.5); } /* //} */ .volet .formule--vedette .formule__nom,.volet .formule--vedette .formule__prix { /* //{ */ color: var(--papier); } /* //} */ .volet .formule--vedette .formule__pour,.volet .formule--vedette .formule__duree { /* //{ */ color: rgba(247,242,233,.66); } /* //} */ .volet .formule--vedette li { /* //{ */ color: rgba(247,242,233,.85); border-color: var(--ligne-nuit); } /* //} */ .volet .formule--vedette li::before { /* //{ */ border-color: var(--accent-clair); } /* //} */ .volet .formule--vedette .btn-nuit { /* //{ */ border-color: rgba(247,242,233,.4); } /* //} */ .volet .tarifs__conditions li { /* //{ */ color: rgba(247,242,233,.62); } /* //} */ .volet .tarifs__conditions li::before { /* //{ */ color: var(--accent-clair); } /* //} */ /* fiche technique dans un volet */ .volet .fiche { /* //{ */ border-top-color: var(--ligne-nuit); } /* //} */ .volet .fiche__l { /* //{ */ border-bottom-color: var(--ligne-nuit); } /* //} */ .volet .fiche__l dt { /* //{ */ color: var(--papier); } /* //} */ .volet .fiche__l dd { /* //{ */ color: rgba(247,242,233,.68); } /* //} */ .volet .pro__cols { /* //{ */ margin-top: 0; } /* //} */ /* //} */ /* //{ Formulaire dans la section sombre */ .programmer .form { /* //{ */ margin-top: 30px; } /* //} */ .form__titre { /* //{ */ font-size: 26px; margin-bottom: 22px; } /* //} */ /* //} */ /* //{ Divers */ .bio__intro-influences { /* //{ */ margin-top: 30px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; // i- color: var(--gris-clair); font-weight: 600; } /* //} */ .bio__refs { /* //{ */ margin-top: 12px; } /* //} */ #dates .refs__liste { /* //{ */ margin-top: 20px; } /* //} */ /* ---------- Corrections de contexte : cartes claires sur section sombre --- */ .programmer .formule__nom { /* //{ */ color: var(--encre); } /* //} */ .programmer .formule li { /* //{ */ color: var(--encre-douce); } /* //} */ .programmer .form__titre { /* //{ */ color: var(--encre); } /* //} */ .programmer .volet .volet__h3 { /* //{ */ color: rgba(247,242,233,.6); } /* //} */ .programmer .volet .formule--vedette .formule__nom { /* //{ */ color: var(--papier); } /* //} */ .programmer .volet .formule--vedette li { /* //{ */ color: rgba(247,242,233,.85); } /* //} */ /* champs de saisie : la carte est claire même dans la section sombre */ .form input,.form select,.form textarea { /* //{ */ color: var(--encre); } /* //} */ .form ::placeholder { /* //{ */ color: var(--gris-clair); opacity: 1; } /* //} */ .form option { /* //{ */ color: var(--encre); background: var(--papier); } /* //} */ /* VERSION 3 — la couleur Palette tirée de ses photos. Le ruban tissé reprend la sangle de son ukulélé : c'est le motif signature qui revient dans toute la page. */ :root { /* //{ */ --papier-chaud: #F8EEDB; } /* //} */ /* //} */ /* //{ Le ruban tissé */ .eyebrow::after { /* //{ */ height: 4px; border-radius: 4px; max-width: 96px; background: var(--ruban); opacity: .95; } /* //} */ /* bande pleine largeur à chaque changement d'ambiance */ .videos::before,.images::before,.programmer::before,.pied::before { /* //{ */ content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--ruban); } /* //} */ .pied { /* //{ */ position: relative; } /* //} */ /* //} */ /* //{ Fonds de section */ .ecoute { /* //{ */ background: var(--papier); } /* //} */ .videos { /* //{ */ background: var(--petrole); color: rgba(247,242,233,.78); } /* //} */ .videos h2,.videos h3 { /* //{ */ color: var(--papier); } /* //} */ .videos .chapo { /* //{ */ color: rgba(247,242,233,.68); } /* //} */ .videos .eyebrow { /* //{ */ color: var(--turquoise-clair); } /* //} */ #dates { /* //{ */ background: var(--papier-chaud); } /* //} */ #dates .ref { /* //{ */ border-bottom-color: rgba(23,18,15,.12); } /* //} */ /* //} */ /* //{ Ses chansons : une couleur par type */ .tag-composition { /* //{ */ background: rgba(196,85,47,.15); color: var(--accent-texte); } /* //} */ .tag-reprise { /* //{ */ background: rgba(184,58,94,.14); color: #8E2144; } /* //} */ .tag-live { /* //{ */ background: rgba(31,127,123,.15); color: #14605C; } /* //} */ .piste--actif { /* //{ */ background: var(--papier-2); border-color: rgba(31,127,123,.45); } /* //} */ .piste:hover .piste__pp,.piste--actif .piste__pp { /* //{ */ border-color: var(--turquoise); background: var(--turquoise); } /* //} */ .eq i { /* //{ */ background: var(--turquoise); } /* //} */ /* //} */ /* //{ Influences : un pastel par courant */ .bio__refs .tag:nth-child(5n+1) { /* //{ */ background: rgba(196,85,47,.14); color: var(--accent-texte); } /* //} */ .bio__refs .tag:nth-child(5n+2) { /* //{ */ background: rgba(226,160,63,.22); color: var(--safran-fonce); } /* //} */ .bio__refs .tag:nth-child(5n+3) { /* //{ */ background: rgba(31,127,123,.15); color: #14605C; } /* //} */ .bio__refs .tag:nth-child(5n+4) { /* //{ */ background: rgba(184,58,94,.13); color: #8E2144; } /* //} */ .bio__refs .tag:nth-child(5n+5) { /* //{ */ background: rgba(110,122,60,.18); color: #4C5528; } /* //} */ /* //} */ /* //{ Citation de la bio */ .bio__citation { /* //{ */ border-left-color: var(--turquoise); } /* //} */ /* //} */ /* //{ Galerie : un voile coloré au survol */ .vign:nth-child(5n+1)::after { /* //{ */ background: rgba(196,85,47,.30); } /* //} */ .vign:nth-child(5n+2)::after { /* //{ */ background: rgba(31,127,123,.32); } /* //} */ .vign:nth-child(5n+3)::after { /* //{ */ background: rgba(226,160,63,.28); } /* //} */ .vign:nth-child(5n+4)::after { /* //{ */ background: rgba(184,58,94,.28); } /* //} */ .vign:nth-child(5n+5)::after { /* //{ */ background: rgba(110,122,60,.30); } /* //} */ /* //} */ /* //{ Le parcours : une pastille de couleur par date */ .ref__date { /* //{ */ color: var(--accent-texte); } /* //} */ .ref:nth-child(4n+2) .ref__date { /* //{ */ color: #14605C; } /* //} */ .ref:nth-child(4n+3) .ref__date { /* //{ */ color: var(--safran-fonce); } /* //} */ .ref:nth-child(4n+4) .ref__date { /* //{ */ color: #8E2144; } /* //} */ /* //} */ /* //{ Calendrier : le code couleur des disponibilités */ .j--libre:hover { /* //{ */ background: var(--turquoise); border-color: var(--turquoise); color: #fff; } /* //} */ .j--sel { /* //{ */ background: var(--turquoise) !important; border-color: var(--turquoise) !important; box-shadow: 0 0 0 3px rgba(31,127,123,.38); } /* //} */ .j--confirme { /* //{ */ background: rgba(196,85,47,.20); border-color: rgba(196,85,47,.55); color: #F0A184; } /* //} */ .j--option { /* //{ */ background: rgba(226,160,63,.16); border-color: rgba(226,160,63,.5); color: var(--safran); } /* //} */ .lg-libre { /* //{ */ background: rgba(95,196,184,.22); border-color: rgba(95,196,184,.5); } /* //} */ .lg-confirme { /* //{ */ background: rgba(196,85,47,.24); border-color: rgba(196,85,47,.6); } /* //} */ .lg-option { /* //{ */ background: rgba(226,160,63,.22); border-color: rgba(226,160,63,.55); } /* //} */ /* //} */ /* //{ Créneaux : même code que le calendrier */ .creneau:hover { /* //{ */ border-color: var(--turquoise-clair); background: rgba(31,127,123,.18); } /* //} */ .creneau--actif { /* //{ */ border-color: var(--turquoise-clair); background: rgba(31,127,123,.24); } /* //} */ .creneau--actif .creneau__coche { /* //{ */ background: var(--turquoise); border-color: var(--turquoise); } /* //} */ .selection { /* //{ */ background: rgba(31,127,123,.18); border-color: rgba(95,196,184,.45); } /* //} */ .selection button { /* //{ */ color: var(--turquoise-clair); } /* //} */ /* //} */ /* //{ Formules : une couleur par formule */ .formule::before { /* //{ */ content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--c,var(--terre)); border-radius: var(--r-lg) var(--r-lg) 0 0; } /* //} */ .formule:nth-child(1) { /* //{ */ --c: var(--terre); } /* //} */ .formule:nth-child(2) { /* //{ */ --c: var(--safran); } /* //} */ .formule:nth-child(3) { /* //{ */ --c: var(--turquoise); } /* //} */ .formule:nth-child(4) { /* //{ */ --c: var(--framboise); } /* //} */ .formule li::before { /* //{ */ border-color: var(--c,var(--terre)); } /* //} */ .formule__duree { /* //{ */ color: var(--gris-clair); } /* //} */ .volet .formule--vedette { /* //{ */ background: rgba(226,160,63,.13); border-color: rgba(226,160,63,.42); } /* //} */ .volet .formule--vedette li::before { /* //{ */ border-color: var(--safran); } /* //} */ .formule__badge { /* //{ */ background: var(--accent-bouton); } /* //} */ /* //} */ /* //{ Kit de communication */ .pro__kit .kit:nth-child(4n+1) svg { /* //{ */ stroke: var(--terre); } /* //} */ .pro__kit .kit:nth-child(4n+2) svg { /* //{ */ stroke: var(--safran-fonce); } /* //} */ .pro__kit .kit:nth-child(4n+3) svg { /* //{ */ stroke: var(--turquoise); } /* //} */ .pro__kit .kit:nth-child(4n+4) svg { /* //{ */ stroke: var(--framboise); } /* //} */ .kit:hover { /* //{ */ border-color: var(--turquoise); } /* //} */ /* //} */ /* //{ Lecteur : la barre de progression reprend le ruban */ .player__prog { /* //{ */ background: var(--ruban); background-size: 200px 100%; } /* //} */ /* //} */ /* //{ Pied de page */ .pied__contacts a:nth-child(1) svg { /* //{ */ stroke: var(--terre); } /* //} */ .pied__contacts a:nth-child(2) svg { /* //{ */ stroke: var(--safran); } /* //} */ .pied__contacts a:nth-child(3) svg { /* //{ */ stroke: var(--turquoise-clair); } /* //} */ .pied__contacts a:hover { /* //{ */ color: var(--turquoise-clair); } /* //} */ /* ---------- Accueil : une seconde lueur, froide, pour la profondeur ------ */ .hero::before { /* //{ */ background: linear-gradient(to top,rgba(12,9,7,.94) 0%,rgba(12,9,7,.60) 42%,rgba(12,9,7,.26) 72%,rgba(12,9,7,.52) 100%),radial-gradient(90% 60% at 82% 16%,rgba(226,160,63,.26),transparent 62%),radial-gradient(70% 55% at 6% 92%,rgba(31,127,123,.34),transparent 66%); } /* //} */ .hero__meta span +span::before { /* //{ */ background: var(--turquoise-clair); } /* //} */ /* //} */ /* //{ Appel Instagram */ .insta-cta__ico { /* //{ */ background: linear-gradient(135deg,var(--framboise),var(--terre) 45%,var(--safran)); } /* //} */ .insta-cta { /* //{ */ border-color: rgba(226,160,63,.3); background: rgba(226,160,63,.07); } /* //} */ /* //} */ /* //{ Volets */ .volet[open] .volet__chev { /* //{ */ background: var(--turquoise); border-color: var(--turquoise); } /* //} */ /* //} */ /* //{ Formulaire */ .champ input:focus,.champ select:focus,.champ textarea:focus { /* //{ */ border-color: var(--turquoise); box-shadow: 0 0 0 4px rgba(31,127,123,.14); } /* //} */ .form__ok { /* //{ */ background: rgba(31,127,123,.10); border-color: rgba(31,127,123,.4); color: #14605C; } /* //} */ .form__ok strong { /* //{ */ color: #0F4B48; } /* //} */ /* //} */ /* //{ Une couleur par section */ #ecouter .eyebrow { /* //{ */ color: var(--accent-texte); } /* //} */ .videos .eyebrow { /* //{ */ color: var(--turquoise-clair); } /* //} */ #artiste .eyebrow { /* //{ */ color: #8E2144; } /* //} */ .images .eyebrow { /* //{ */ color: var(--safran); } /* //} */ #dates .eyebrow { /* //{ */ color: #4C5528; } /* //} */ .programmer .eyebrow { /* //{ */ color: var(--accent-clair); } /* //} */ /* //} */ /* //{ Une couleur par type de chanson */ .piste--composition { /* //{ */ --pc: var(--terre); } /* //} */ .piste--reprise { /* //{ */ --pc: var(--framboise); } /* //} */ .piste--live { /* //{ */ --pc: var(--turquoise); } /* //} */ .piste:hover .piste__pp,.piste--actif .piste__pp { /* //{ */ background: var(--pc); border-color: var(--pc); } /* //} */ .piste--actif { /* //{ */ border-color: color-mix(in srgb,var(--pc) 45%,transparent); } /* //} */ .eq i:nth-child(1) { /* //{ */ background: var(--terre); } /* //} */ .eq i:nth-child(2) { /* //{ */ background: var(--safran); } /* //} */ .eq i:nth-child(3) { /* //{ */ background: var(--turquoise); } /* //} */ .eq i:nth-child(4) { /* //{ */ background: var(--framboise); } /* //} */ /* //} */ /* //{ La bio : la citation prend le rose de la section */ #artiste .bio__citation { /* //{ */ border-left-color: var(--framboise); background: rgba(184,58,94,.06); } /* //} */ #artiste .bio__intro-influences { /* //{ */ color: #8E2144; } /* //} */ /* //} */ /* //{ Le parcours : un filet coloré sous le titre */ #dates .refs__liste { /* //{ */ border-top: 2px solid var(--olive-clair); } /* //} */ /* //} */ /* //{ Écouter : la note de bas de section */ .ecoute__note a { /* //{ */ color: var(--turquoise); text-decoration-color: var(--turquoise-clair); } /* //} */ /* //} */ /* //{ Pistes : chaque bouton porte la couleur de son type */ .piste__pp { /* //{ */ border-color: color-mix(in srgb,var(--pc,var(--terre)) 50%,transparent); } /* //} */ .piste__pp svg { /* //{ */ fill: var(--pc,var(--terre)); } /* //} */ .piste:hover .piste__pp svg,.piste--actif .piste__pp svg { /* //{ */ fill: #fff; } /* //} */ .piste:hover { /* //{ */ background: color-mix(in srgb,var(--pc) 7%,var(--papier)); } /* //} */ .piste--actif { /* //{ */ background: color-mix(in srgb,var(--pc) 10%,var(--papier)); } /* //} */ /* //} */ /* //{ Le ruban signature, tout en haut de la page */ body::before { /* //{ */ content: ""; position: fixed; inset: 0 0 auto 0; height: 5px; z-index: 140; background: var(--ruban); pointer-events: none; } /* //} */ .nav { /* //{ */ padding-top: 22px; } /* //} */ .nav--pose { /* //{ */ padding-top: 16px; } /* //} */ /* lueur froide un peu plus présente dans l'angle bas gauche de l'accueil */ .hero::before { /* //{ */ background: linear-gradient(to top,rgba(12,9,7,.94) 0%,rgba(12,9,7,.60) 42%,rgba(12,9,7,.26) 72%,rgba(12,9,7,.52) 100%),radial-gradient(90% 60% at 84% 14%,rgba(226,160,63,.30),transparent 62%),radial-gradient(85% 65% at 2% 98%,rgba(31,127,123,.52),transparent 64%); } /* //} */ /* VERSION 4 — seventies Typographie groovy, palette élargie, vagues et soleils. */ :root { /* //{ */ --ff-groovy: "Shrikhand","Cooper Black","Bookman Old Style",Georgia,serif; --creme: #FBF3DF; /* crème jaune du moodboard */ --chocolat: #4A2B1B; /* brun seventies */ --moutarde: #D9A227; /* bande de vagues multicolores, le motif seventies par excellence */ --vagues: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 30' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-width='4.5' stroke-linecap='round'%3E%3Cpath stroke='%23C4552F' d='M0 5 Q15 -3 30 5 T60 5 T90 5 T120 5'/%3E%3Cpath stroke='%23E2A03F' d='M0 12 Q15 4 30 12 T60 12 T90 12 T120 12'/%3E%3Cpath stroke='%231F7F7B' d='M0 19 Q15 11 30 19 T60 19 T90 19 T120 19'/%3E%3Cpath stroke='%23B83A5E' d='M0 26 Q15 18 30 26 T60 26 T90 26 T120 26'/%3E%3C/g%3E%3C/svg%3E"); /* marguerite, en ornement */ --marguerite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23E2A03F'%3E%3Cellipse cx='20' cy='7' rx='5.2' ry='8'/%3E%3Cellipse cx='20' cy='33' rx='5.2' ry='8'/%3E%3Cellipse cx='7' cy='20' rx='8' ry='5.2'/%3E%3Cellipse cx='33' cy='20' rx='8' ry='5.2'/%3E%3Cellipse cx='11' cy='11' rx='5.2' ry='7.4' transform='rotate(-45 11 11)'/%3E%3Cellipse cx='29' cy='29' rx='5.2' ry='7.4' transform='rotate(-45 29 29)'/%3E%3Cellipse cx='29' cy='11' rx='5.2' ry='7.4' transform='rotate(45 29 11)'/%3E%3Cellipse cx='11' cy='29' rx='5.2' ry='7.4' transform='rotate(45 11 29)'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='6.5' fill='%23C4552F'/%3E%3C/svg%3E"); } /* //} */ /* //} */ /* //{ Typographie groovy */ .hero h1,.titre-section,.nav__logo,.pied h2 { /* //{ */ font-family: var(--ff-groovy); font-weight: 400; font-variation-settings: normal; } /* //} */ .hero h1 { /* //{ */ font-size: clamp(48px,10.5vw,132px); line-height: 1.0; letter-spacing: -.005em; } /* //} */ .hero h1 em { /* //{ */ margin-top: -.06em; } /* //} */ .titre-section { /* //{ */ font-size: clamp(30px,4.8vw,54px); line-height: 1.06; letter-spacing: 0; } /* //} */ .nav__logo { /* //{ */ font-size: 19px; letter-spacing: 0; } /* //} */ .nav__logo b { /* //{ */ font-weight: 400; } /* //} */ .pied h2 { /* //{ */ font-size: clamp(30px,4.6vw,50px); } /* //} */ .formule__prix { /* //{ */ font-family: var(--ff-groovy); letter-spacing: 0; } /* //} */ .pub-date__d b,.prochaine__d b { /* //{ */ font-family: var(--ff-groovy); } /* //} */ /* //} */ /* //{ Les vagues remplacent le ruban entre les sections */ .videos::before,.images::before,.programmer::before,.pied::before,.presse::before { /* //{ */ height: 26px; background: var(--vagues) center/220px 26px repeat-x; } /* //} */ .presse { /* //{ */ position: relative; background: var(--creme); } /* //} */ /* la bande tissée reste tout en haut de la page : c'est sa sangle */ body::before { /* //{ */ height: 6px; } /* //} */ /* //} */ /* //{ Soleil rayonnant derrière « Son univers » */ .images { /* //{ */ position: relative; overflow: hidden; } /* //} */ .images::after { /* //{ */ content: ""; position: absolute; left: 50%; top: -10%; width: 150vw; aspect-ratio: 1; transform: translateX(-50%); pointer-events: none; z-index: 0; opacity: .1; background: repeating-conic-gradient(from 0deg at 50% 0%,var(--safran) 0deg 5deg,transparent 5deg 11deg); -webkit-mask-image: radial-gradient(60% 45% at 50% 0%,#000,transparent 72%); mask-image: radial-gradient(60% 45% at 50% 0%,#000,transparent 72%); } /* //} */ .images .wrap { /* //{ */ position: relative; z-index: 1; } /* //} */ /* //} */ /* //{ La nouveauté */ .nv { /* //{ */ margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; padding: 24px 28px; border-radius: var(--r-lg); position: relative; background: linear-gradient(105deg,rgba(226,160,63,.20),rgba(196,85,47,.14) 60%,rgba(184,58,94,.12)); border: 1.5px solid rgba(226,160,63,.45); } /* //} */ .nv::after { /* //{ */ content: ""; position: absolute; right: 18px; top: -16px; width: 40px; height: 40px; background: var(--marguerite) center/contain no-repeat; transform: rotate(12deg); } /* //} */ .nv__pastille { /* //{ */ font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; // i- background: var(--accent-bouton); color: #fff; padding: 6px 13px; border-radius: 100px; } /* //} */ .nv__txt { /* //{ */ flex: 1; min-width: 190px; } /* //} */ .nv__txt strong { /* //{ */ display: block; font-family: var(--ff-groovy); font-size: clamp(26px,3.4vw,38px); color: var(--encre); font-weight: 400; line-height: 1.1; } /* //} */ .nv__txt small { /* //{ */ font-size: 14.5px; color: var(--gris); } /* //} */ .nv__actions { /* //{ */ display: flex; flex-wrap: wrap; gap: 10px; } /* //} */ .nv__actions .btn { /* //{ */ padding: 13px 24px; } /* //} */ @media (max-width: 560px) { /* //{ */ .nv { /* //{ */ padding: 20px; } /* //} */ .nv__actions { /* //{ */ width: 100%; } /* //} */ .nv__actions .btn { /* //{ */ flex: 1; } /* //} */ } /* //} */ /* //} */ /* //{ La presse */ .presse__liste { /* //{ */ display: grid; gap: 20px; margin-top: 44px; grid-template-columns: repeat(auto-fit,minmax(330px,1fr)); } /* //} */ .coupure { /* //{ */ display: flex; gap: 20px; align-items: flex-start; padding: 20px; background: var(--papier); border: 1px solid var(--ligne); border-radius: var(--r-lg); transition: var(--t); } /* //} */ .coupure:hover { /* //{ */ transform: translateY(-3px); box-shadow: var(--ombre-lg); } /* //} */ .coupure__img { /* //{ */ position: relative; width: 116px; flex: none; border-radius: var(--r); overflow: hidden; border: 0; padding: 0; background: var(--papier-3); cursor: pointer; line-height: 0; } /* //} */ .coupure__img img { /* //{ */ width: 100%; height: auto; display: block; transition: transform .6s; } /* //} */ .coupure__img:hover img { /* //{ */ transform: scale(1.05); } /* //} */ .coupure__loupe { /* //{ */ position: absolute; inset: auto 6px 6px auto; width: 26px; height: 26px; border-radius: 50%; background: rgba(247,242,233,.94); display: grid; place-items: center; } /* //} */ .coupure__loupe svg { /* //{ */ width: 12px; height: 12px; stroke: var(--encre); fill: none; stroke-width: 2.2; } /* //} */ .coupure__src { /* //{ */ font-size: 12px; letter-spacing: .1em; text-transform: uppercase; // i- color: var(--gris-clair); font-weight: 600; } /* //} */ .coupure__txt h3 { /* //{ */ font-size: clamp(19px,2.1vw,23px); margin: 6px 0 10px; line-height: 1.2; } /* //} */ .coupure blockquote { /* //{ */ margin: 0; font-family: var(--ff-display); font-size: 16.5px; line-height: 1.45; color: var(--encre-douce); padding-left: 14px; border-left: 3px solid var(--safran); } /* //} */ @media (max-width: 420px) { /* //{ */ .coupure { /* //{ */ flex-direction: column; } /* //} */ .coupure__img { /* //{ */ width: 100%; max-width: 180px; } /* //} */ } /* //} */ /* //} */ /* //{ Affiche rattachée à une date */ .ref--affiche { /* //{ */ grid-template-columns: 120px 1fr auto auto; } /* //} */ .ref__aff { /* //{ */ display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer; margin-left: 18px; } /* //} */ .ref__aff img { /* //{ */ width: 42px; height: 58px; object-fit: cover; border-radius: 6px; border: 1.5px solid var(--ligne); transition: var(--t); } /* //} */ .ref__aff:hover img { /* //{ */ transform: scale(1.07); border-color: var(--accent); } /* //} */ .ref__aff span { /* //{ */ font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; // i- color: var(--gris-clair); font-weight: 600; } /* //} */ @media (max-width: 760px) { /* //{ */ .ref--affiche { /* //{ */ grid-template-columns: 1fr auto; } /* //} */ .ref__aff { /* //{ */ margin-left: 0; grid-row: 1 / span 3; } /* //} */ } /* //} */ /* //} */ /* //{ Appel aux musiciens, en pied de page */ .pied__appel { /* //{ */ margin-top: 6px; padding: 14px 16px; border-radius: var(--r); background: rgba(226,160,63,.12); border: 1px solid rgba(226,160,63,.3); font-size: 14px; color: rgba(247,242,233,.8); line-height: 1.5; } /* //} */ .pied__appel strong { /* //{ */ display: block; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; // i- color: var(--safran); margin-bottom: 4px; } /* //} */ /* //} */ /* //{ L'image d'accueil s'adapte à l'écran */ .hero__media { /* //{ */ position: absolute; inset: 0; display: block; } /* //} */ .hero__media .hero__img { /* //{ */ width: 100%; height: 100%; object-fit: cover; } /* //} */ @media (min-width: 860px) { /* //{ */ .hero__img { /* //{ */ object-position: 50% 38%; } /* //} */ } /* //} */ @media (max-width: 859px) { /* //{ */ .hero__img { /* //{ */ object-position: 50% 30%; } /* //} */ } /* //} */ /* VERSION 5 — aplats de couleur Chaque section est un bloc plein, dans l'esprit des affiches seventies. Le rouge est volontairement plus profond que sur les références : il doit rester lisible avec du texte crème (contraste 7:1). */ :root { /* //{ */ --tomate: #933019; /* brique brûlée */ --choco: #3C2418; /* brun seventies */ --mout: #E5A81F; /* moutarde */ --petro: #123634; /* pétrole */ --nuit: #23140C; /* pied de page */ --creme-doux: rgba(251,243,223,.84); /* ressort : léger dépassement, pour que ça « rebondisse » sous la souris */ --ressort: linear(0,0.02 1.5%,0.09 3.2%,0.34 6.5%,1.12 12%,1.25 14%,1.28 15.5%,1.22 17.5%,0.98 23%,0.92 26%,0.94 30%,1.03 38%,1.05 43%,0.99 55%,1.01 70%,1); --doux: 340ms cubic-bezier(.2,.7,.25,1); } /* //} */ html,body { /* //{ */ background: var(--creme); } /* //} */ /* //} */ /* //{ Les blocs */ .ecoute,#artiste,#dates { /* //{ */ background: var(--creme); } /* //} */ .videos { /* //{ */ background: var(--tomate); color: var(--creme-doux); } /* //} */ .videos h2,.videos h3,.videos .eyebrow { /* //{ */ color: var(--creme); } /* //} */ .videos .chapo { /* //{ */ color: var(--creme-doux); } /* //} */ .videos .lite__lg strong { /* //{ */ color: var(--creme); } /* //} */ .images { /* //{ */ background: var(--choco); } /* //} */ .presse { /* //{ */ background: var(--mout); color: var(--encre-douce); } /* //} */ .presse h2 { /* //{ */ color: var(--encre); } /* //} */ .presse .chapo { /* //{ */ color: var(--encre-douce); } /* //} */ .presse .eyebrow { /* //{ */ color: var(--choco); } /* //} */ .presse .eyebrow::after { /* //{ */ opacity: 1; } /* //} */ .coupure { /* //{ */ background: var(--creme); border-color: rgba(60,36,24,.22); } /* //} */ .coupure blockquote { /* //{ */ border-left-color: var(--tomate); } /* //} */ .programmer { /* //{ */ background: var(--petro); } /* //} */ .programmer .eyebrow { /* //{ */ color: var(--mout); } /* //} */ .pied { /* //{ */ background: var(--nuit); } /* //} */ /* les vagues restent la couture entre deux blocs */ .videos::before,.images::before,.programmer::before,.pied::before,.presse::before { /* //{ */ z-index: 3; } /* //} */ /* //} */ /* //{ Des titres à la hauteur des aplats */ .titre-section { /* //{ */ font-size: clamp(34px,6.4vw,78px); line-height: .98; margin-bottom: 18px; } /* //} */ .chapo { /* //{ */ font-size: clamp(17px,1.7vw,20px); } /* //} */ @media (max-width: 620px) { /* //{ */ .titre-section { /* //{ */ font-size: clamp(32px,9vw,46px); } /* //} */ } /* //} */ /* Ce qui bouge sous la souris Propriétés de transformation individuelles, avec identité posée sur l'état de repos : sans elle, le survol créerait un contexte d'empilement et les éléments sauteraient les uns par-dessus les autres. */ /* 1 — les photos de la mosaïque */ .vign { /* //{ */ translate: 0; rotate: 0deg; scale: 1; transition: scale var(--doux),rotate var(--doux),box-shadow var(--doux); } /* //} */ .vign:hover,.vign:focus-visible { /* //{ */ scale: 1.05; rotate: -1.6deg; z-index: 3; box-shadow: 9px 11px 0 rgba(31,127,123,.32); } /* //} */ .mosaique:hover .vign:not(:hover) { /* //{ */ opacity: .62; } /* //} */ .vign { /* //{ */ transition: scale var(--doux),rotate var(--doux),box-shadow var(--doux),opacity var(--doux); } /* //} */ /* 2 — les boutons : l'ombre dure de l'affiche seventies */ .btn { /* //{ */ translate: 0; scale: 1; transition: translate var(--doux),scale var(--doux),box-shadow var(--doux),background var(--doux),border-color var(--doux),color var(--doux); } /* //} */ .btn-1:hover,.btn-1:focus-visible { /* //{ */ translate: -3px -3px; transform: none; box-shadow: 6px 6px 0 var(--encre); } /* //} */ .btn-2:hover,.btn-2:focus-visible { /* //{ */ translate: -3px -3px; transform: none; box-shadow: 5px 5px 0 var(--encre); } /* //} */ .btn-nuit:hover,.btn-nuit:focus-visible { /* //{ */ translate: -3px -3px; transform: none; box-shadow: 5px 5px 0 rgba(251,243,223,.5); } /* //} */ .programmer .btn-2:hover { /* //{ */ box-shadow: 5px 5px 0 rgba(251,243,223,.35); } /* //} */ /* 3 — les cartes de tarif */ .formule { /* //{ */ translate: 0; scale: 1; transition: translate var(--doux),box-shadow var(--doux),border-color var(--doux); } /* //} */ .formule:hover { /* //{ */ translate: 0 -7px; transform: none; } /* //} */ .formule::before { /* //{ */ transition: height var(--doux); } /* //} */ .formule:hover::before { /* //{ */ height: 11px; } /* //} */ /* 4 — les titres à écouter */ .piste__pp { /* //{ */ scale: 1; transition: scale .5s var(--ressort),background var(--doux),border-color var(--doux); } /* //} */ .piste:hover .piste__pp,.piste--actif .piste__pp { /* //{ */ scale: 1.16; } /* //} */ .piste__t { /* //{ */ translate: 0; transition: translate var(--doux); } /* //} */ .piste:hover .piste__t { /* //{ */ translate: 5px; } /* //} */ /* 5 — la marguerite tourne */ .nv::after { /* //{ */ rotate: 12deg; scale: 1; transition: rotate .7s var(--ressort),scale .7s var(--ressort); } /* //} */ .nv:hover::after { /* //{ */ rotate: 84deg; scale: 1.15; } /* //} */ /* 6 — les liens, soulignés d'une vague qui se déroule */ .ecoute__note a,.ref a,.coupure a,.chapo a { /* //{ */ text-decoration: none; position: relative; padding-bottom: 6px; } /* //} */ .ecoute__note a::after,.ref a::after,.coupure a::after,.chapo a::after { /* //{ */ content: ""; position: absolute; left: 0; bottom: 0; height: 6px; width: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8'%3E%3Cpath d='M0 5 Q5 0 10 5 T20 5 T30 5 T40 5' fill='none' stroke='%23C4552F' stroke-width='2.6'/%3E%3C/svg%3E") repeat-x; background-size: 26px 6px; transition: width var(--doux); } /* //} */ .ecoute__note a:hover::after,.ref a:hover::after,.coupure a:hover::after,.chapo a:hover::after { /* //{ */ width: 100%; } /* //} */ /* 7 — un soleil surgit à côté du titre de section */ .titre-section { /* //{ */ position: relative; display: inline-block; padding-right: 8px; } /* //} */ .titre-section::after { /* //{ */ content: ""; position: absolute; right: -34px; top: .06em; width: 26px; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='%23E2A03F' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M20 2v6M20 32v6M2 20h6M32 20h6M7 7l4 4M29 29l4 4M33 7l-4 4M11 29l-4 4'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='7' fill='%23C4552F'/%3E%3C/svg%3E") center/contain no-repeat; opacity: 0; scale: .4; rotate: -40deg; transition: opacity .45s ease,scale .6s var(--ressort),rotate .6s var(--ressort); } /* //} */ section:hover .titre-section::after { /* //{ */ opacity: 1; scale: 1; rotate: 0deg; } /* //} */ @media (max-width: 620px) { /* //{ */ .titre-section::after { /* //{ */ display: none; } /* //} */ } /* //} */ /* 8 — les étiquettes se remplissent */ .piste__tag { /* //{ */ scale: 1; transition: scale .45s var(--ressort),background var(--doux),color var(--doux); } /* //} */ .piste:hover .tag-composition { /* //{ */ background: var(--terre); color: #fff; scale: 1.08; } /* //} */ .piste:hover .tag-reprise { /* //{ */ background: var(--framboise); color: #fff; scale: 1.08; } /* //} */ .piste:hover .tag-live { /* //{ */ background: var(--turquoise); color: #fff; scale: 1.08; } /* //} */ /* 9 — les coupures de presse et les affiches */ .coupure { /* //{ */ translate: 0; transition: translate var(--doux),box-shadow var(--doux); } /* //} */ .coupure:hover { /* //{ */ translate: 0 -4px; transform: none; } /* //} */ .coupure__img img { /* //{ */ scale: 1; transition: scale .6s var(--doux); } /* //} */ .coupure__img:hover img { /* //{ */ scale: 1.07; } /* //} */ .ref__aff img { /* //{ */ scale: 1; rotate: 0deg; transition: scale .5s var(--ressort),rotate var(--doux),border-color var(--doux); } /* //} */ .ref__aff:hover img { /* //{ */ scale: 1.14; rotate: -3deg; } /* //} */ /* les lignes du parcours s'éclairent au passage */ .ref { /* //{ */ transition: background var(--doux),padding-left var(--doux); } /* //} */ .ref:hover { /* //{ */ background: rgba(196,85,47,.07); padding-left: 10px; } /* //} */ /* la navigation */ .nav__liens a { /* //{ */ translate: 0; transition: translate var(--doux),color .4s,background .2s; } /* //} */ .nav__liens a:not(.nav__cta):hover { /* //{ */ translate: 0 -2px; } /* //} */ /* respect du réglage « réduire les animations » du système */ @media (prefers-reduced-motion: reduce) { /* //{ */ .vign:hover,.ref__aff:hover img { /* //{ */ rotate: 0deg; } /* //} */ .titre-section::after { /* //{ */ display: none; } /* //} */ } /* //} */ /* V6 — Les affiches (septembre 2026) ------------------------------------------------------------------------- Sept affiches façon pochette d'album / poster de film, dans le prolongement direct du fond 70's colour-blocké de la V5 : même police Shrikhand, même grain, même palette. La teinte de l'affiche Mi Amor devient ici la couleur de fond de la section « Ses chansons » — un aplat rose qui rejoint les aplats tomate / choco / moutarde / pétrole déjà en place plus bas sur la page. */ :root { /* //{ */ --rose-mi-amor: #F3C9CF; } /* //} */ /* « Ses chansons » prend la couleur de l'affiche Mi Amor ------------------- Lisibilité d'abord : les teintes du reste du site (turquoise, gris clair, accent) passent sous le seuil AA sur ce rose précis. On les remplace ici par des encres plus sombres, déjà présentes dans la palette. */ .ecoute { /* //{ */ background: var(--rose-mi-amor); } /* //} */ .ecoute .titre-section,.ecoute h3 { /* //{ */ color: var(--choco); } /* //} */ .ecoute .eyebrow { /* //{ */ color: var(--tomate); } /* //} */ .ecoute .eyebrow::after { /* //{ */ opacity: 1; } /* //} */ .ecoute .chapo { /* //{ */ color: var(--encre-douce); } /* //} */ .ecoute__note { /* //{ */ color: var(--encre-douce); } /* //} */ .ecoute__note a { /* //{ */ color: var(--choco); } /* //} */ .ecoute__note a::after { /* //{ */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8'%3E%3Cpath d='M0 5 Q5 0 10 5 T20 5 T30 5 T40 5' fill='none' stroke='%233C2418' stroke-width='2.6'/%3E%3C/svg%3E"); } /* //} */ .ecoute .piste__t small { /* //{ */ color: var(--encre-douce); } /* //} */ .ecoute .tag-composition { /* //{ */ background: rgba(60,36,24,.14); color: var(--choco); } /* //} */ .ecoute .tag-live { /* //{ */ color: #2E4A33; } /* //} */ .ecoute .piste:hover,.ecoute .piste--actif { /* //{ */ background: var(--creme); } /* //} */ /* //} */ /* //{ Les singles : pochette + les deux dernières affiches */ .singles { /* //{ */ display: grid; gap: 20px; margin: 40px 0 50px; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); } /* //} */ .single { /* //{ */ position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: var(--r-lg); overflow: hidden; cursor: pointer; background: var(--choco); text-align: left; box-shadow: var(--ombre); translate: 0; rotate: 0deg; scale: 1; transition: translate var(--doux),rotate var(--doux),scale var(--doux),box-shadow var(--doux); } /* //} */ .single img { /* //{ */ display: block; width: 100%; height: auto; } /* //} */ .single--pochette { /* //{ */ cursor: default; background: var(--creme); box-shadow: var(--ombre); } /* //} */ .single__pastille { /* //{ */ position: absolute; top: 13px; left: 13px; z-index: 2; background: var(--tomate); color: var(--creme); font: 700 10.5px/1 var(--ff-texte); letter-spacing: .09em; text-transform: uppercase; // i- padding: 7px 12px; border-radius: 100px; } /* //} */ .single__play { /* //{ */ position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 50%; background: rgba(251,243,223,.94); display: grid; place-items: center; opacity: 0; translate: 0 8px; scale: .85; transition: opacity var(--doux),translate var(--doux),scale var(--doux); } /* //} */ .single__play svg { /* //{ */ width: 17px; height: 17px; fill: var(--choco); } /* //} */ .single:hover,.single:focus-visible { /* //{ */ translate: 0 -6px; rotate: -.6deg; scale: 1.01; box-shadow: var(--ombre-lg); } /* //} */ .single:hover .single__play,.single:focus-visible .single__play { /* //{ */ opacity: 1; translate: 0; scale: 1; } /* //} */ /* //} */ /* //{ Les affiches éditoriales (bio + sur scène) */ .affiches-duo { /* //{ */ display: grid; gap: 20px; margin-top: 46px; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); } /* //} */ .affiche-carte { /* //{ */ position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: var(--r-lg); overflow: hidden; cursor: pointer; background: var(--choco); box-shadow: var(--ombre); translate: 0; rotate: 0deg; scale: 1; transition: translate var(--doux),rotate var(--doux),scale var(--doux),box-shadow var(--doux); } /* //} */ .affiche-carte--fixe { /* //{ */ cursor: default; } /* //} */ .affiche-carte img { /* //{ */ display: block; width: 100%; height: auto; } /* //} */ .affiche-carte__play { /* //{ */ position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 50%; background: rgba(251,243,223,.94); display: grid; place-items: center; opacity: 0; translate: 0 8px; scale: .85; transition: opacity var(--doux),translate var(--doux),scale var(--doux); } /* //} */ .affiche-carte__play svg { /* //{ */ width: 15px; height: 15px; fill: var(--choco); } /* //} */ .affiche-carte:not(.affiche-carte--fixe):hover,.affiche-carte:not(.affiche-carte--fixe):focus-visible { /* //{ */ translate: 0 -6px; rotate: -.7deg; box-shadow: var(--ombre-lg); } /* //} */ .affiche-carte:hover .affiche-carte__play,.affiche-carte:focus-visible .affiche-carte__play { /* //{ */ opacity: 1; translate: 0; scale: 1; } /* //} */ /* la paire de la bio respire un peu plus, sous le texte */ .affiches-duo--bio { /* //{ */ margin-top: 42px; } /* //} */ @media (max-width: 620px) { /* //{ */ .singles,.affiches-duo { /* //{ */ grid-template-columns: 1fr 1fr; gap: 12px; } /* //} */ .single--pochette { /* //{ */ grid-column: 1 / -1; max-width: 320px; margin-inline: auto; } /* //} */ } /* //} */ /* ---------- Liens détectés indisponibles au chargement ------------------ Un identifiant YouTube confirmé mort (401/404 sur l'oEmbed, ou erreur de lecture réelle) est estompé et désactivé partout où il apparaît, sans jamais casser la mise en page. */ .est-indispo { /* //{ */ opacity: .38; filter: grayscale(.6); cursor: not-allowed !important; pointer-events: none; } /* //} */ .piste.est-indispo:hover { /* //{ */ background: transparent; } /* //} */ /* //} */ /* //{ Ce qui bouge sous la souris, suite */ @media (prefers-reduced-motion: reduce) { /* //{ */ .single:hover,.single:focus-visible,.affiche-carte:hover,.affiche-carte:focus-visible { /* //{ */ translate: 0; rotate: 0deg; scale: 1; } /* //} */ } /* //} */ /* //} */