/* Enzo Cartier : surcouche de la template JulianVoss */

/* Pastille logo à la place du logo Webflow */
._w-logo { background-image: url("../images/favicon-48.png"); min-width: 22px; }

/* Info : ligne supplémentaire (Format) dans la grille 12 colonnes */
.ec-info-label { grid-area: 9 / 1 / 10 / 2; margin-top: 60px; }
.ec-info-value { grid-area: 9 / 3 / 10 / 6; margin-top: 60px; }

/* Sections ajoutées (Musique, Live) */
.ec-section { background-color: #000; padding-top: 120px; padding-bottom: 120px; }
.ec-tag { display: flex; justify-content: space-between; align-items: stretch; margin-bottom: 40px; }
.ec-lead { max-width: 620px; margin-bottom: 30px; opacity: .85; }
.ec-player { margin-top: 50px; border-radius: 12px; overflow: hidden; }
.ec-player iframe { display: block; border: 0; }
.ec-platforms { margin-top: 40px; display: flex; flex-flow: column; gap: 10px; }
.ec-platform-links { display: flex; flex-wrap: wrap; column-gap: 26px; row-gap: 4px; }
.ec-platform-links .button-link { position: static; }

/* Live */
.ec-live-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: start; }
.ec-date-row { align-items: flex-start; gap: 30px; }
.ec-date-row .p-0 { min-width: 110px; padding-top: 4px; }
.ec-date-body { flex: 1; text-align: right; }
.ec-date-detail { color: #ffffff99; font-size: 15px; line-height: 1.35; margin: 4px 0 0; }
.ec-live-side { display: flex; flex-flow: column; }
.ec-live-side .subhead.third { margin-top: 12px; }

/* Booking dans le footer blanc */
.ec-booking { display: flex; flex-flow: column; gap: 10px; padding-left: 2%; padding-right: 2%; }
.ec-dark { color: #000; }
.ec-mail { color: #000; font-size: clamp(28px, 5.4vw, 88px); line-height: 1; letter-spacing: -2px; font-weight: 500; text-decoration: none; word-break: break-word; }
.ec-mail:hover { font-style: italic; }
.ec-booking-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; color: #000; font-size: 16px; opacity: .75; }
.ec-meta-link { color: #000; text-decoration: none; }
.ec-meta-link:hover { text-decoration: underline; }

/* Pages intérieures */
.ec-right { text-align: right; }
.line-flex { gap: 24px; }
.line-flex .p-0 { flex-shrink: 0; }
.ec-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #111; overflow: hidden; }
.ec-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ec-ratio { aspect-ratio: 16 / 10; }
.ec-next { display: flex; flex-flow: column; align-items: flex-start; gap: 8px; }
.ec-bio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.ec-text { color: #ffffffcc; font-size: 18px; line-height: 1.55; margin-bottom: 18px; max-width: 640px; }
.ec-strong { color: #fff; }
.ec-inline { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ec-rider-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px 60px; }
.ec-rider-row { align-items: flex-start; }
.ec-rider-row .top-text { max-width: 70%; }

/* Presse */
.ec-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.ec-card { display: flex; flex-flow: column; gap: 12px; }
.ec-card-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; overflow: hidden; background: #111; }
.ec-card-img.ec-light, .photo-wrapper.ec-light { background: #fff; }
.ec-card-img.ec-photo img { width: 100%; height: 100%; object-fit: cover; }
.ec-contain { width: 100%; height: 100%; object-fit: contain !important; }
.ec-card-img.ec-logo { aspect-ratio: 4 / 3; padding: 12%; }
.ec-card-img.ec-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ec-bg-dark { background: #1a1a1a; }
.ec-bg-light { background: #f2f2ee; }
.ec-card-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ec-note { max-width: 760px; opacity: .8; }

@media screen and (max-width: 991px) {
  .ec-info-label, .ec-info-value { margin-top: 0; }
  .ec-live-grid, .ec-bio-grid, .ec-rider-grid { grid-template-columns: 1fr; gap: 50px; }
  .ec-cards { grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 767px) {
  .ec-section { padding-top: 80px; padding-bottom: 80px; }
  .ec-date-row { flex-flow: column; gap: 6px; }
  .ec-date-body { text-align: left; }
  .ec-cards { grid-template-columns: 1fr; }
  .ec-rider-row { flex-flow: column; gap: 6px; }
  .ec-rider-row .top-text { max-width: 100%; }
  .ec-right { text-align: left; }
  .ec-text { font-size: 16px; }
}

/* Nom : tient sur une ligne (12 signes au lieu de 11 dans la template) */
.first-name { white-space: nowrap; }
h1.first-name:not(._01):not(.for-page) { font-size: 12.4vw; }
@media screen and (max-width: 767px) { h1.first-name:not(._01):not(.for-page) { font-size: 12.4vw; letter-spacing: -2px; } }

/* Lisibilité du haut du hero sur les photos claires */
.author-photo::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 22%; background: linear-gradient(#0000008c, #0000); pointer-events: none; z-index: 2; }

/* Titres de liste sur une ligne : la colonne 3 est libre */
#w-node-_6bde7ddc-2d8e-0c83-28fd-1d38eccaac5d-9614723f.thumb-title-wrapper { grid-column-end: 4; }
.thumb-title { white-space: nowrap; }
.thumb-title-wrap { max-width: none; }
@media screen and (max-width: 767px) {
  .thumb-title { white-space: normal; }
  #Musique .thumb-title-wrapper { height: auto; }
  #Musique .thumb-title.hide-mobile { display: none; }
}
.ec-tag .big-title { white-space: nowrap; }
@media screen and (max-width: 767px) { .ec-tag .big-title { font-size: 13vw; letter-spacing: -2px; } }

/* Logo en bas à gauche du hero : version blanche, lisible */
._w-logo { background-image: url("../images/logo-enzo-cartier.svg"); background-size: contain; background-repeat: no-repeat; background-position: 0 50%; display: inline-block; width: 68px; min-width: 68px; height: 42px; font-size: 0; vertical-align: middle; margin-right: 6px; }
@media screen and (max-width: 767px) { ._w-logo { width: 54px; min-width: 54px; height: 34px; } }

/* Lecteur vidéo : affiche cliquable, iframe chargée au clic */
.ec-video-poster { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; }
.ec-video-img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, filter .6s ease; filter: brightness(.8); }
.ec-video-poster:hover .ec-video-img { transform: scale(1.03); filter: brightness(.6); }
.ec-play { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: #fff; color: #000; display: flex; align-items: center; justify-content: center; transition: transform .3s ease; }
.ec-play svg { margin-left: 4px; }
.ec-video-poster:hover .ec-play { transform: scale(1.08); }
.ec-video-label { position: absolute; left: 20px; bottom: 18px; font-size: 14px; text-transform: uppercase; letter-spacing: .2px; }
.ec-wide { aspect-ratio: 16 / 9; }
@media screen and (max-width: 767px) { .ec-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; } }

/* Section Musique en fond blanc : suit la transition blanche de fin de section Sets */
#Musique { background-color: #fff; color: #000;
  --_color---button-color--first-color: #000;
  --_color---page-color--fourth-color: #000;
  --_color---page-color--first-color: #fff;
  --_color---page-color--third-color: #000000b3; }
#Musique .subhead, #Musique .big-title, #Musique .thumb-title, #Musique .paragraph-services, #Musique .navigation-text-main { color: #000; }
#Musique .work-grid { border-bottom-color: #0003; }
#Musique .work-line { background-color: #0003; }
#Musique .ec-lead { opacity: .8; }
#Musique .thumb-title { font-size: min(var(--_title---counter-title), 3.4vw); }
@media screen and (max-width: 767px) { #Musique .thumb-title { font-size: 1.9rem; } }

/* Live : marge basse, le footer blanc remonte de 20vh par-dessus */
#Live { padding-bottom: calc(20vh + 140px); }
@media screen and (max-width: 767px) { #Live { padding-bottom: 110px; } }
.ec-no-sticky { padding-bottom: calc(20vh + 120px); }
@media screen and (max-width: 767px) { .ec-no-sticky { padding-bottom: 80px; } }

/* ---------- Lecteur musique (accueil) ---------- */
.ec-sc { position: fixed; width: 1px; height: 1px; left: -9999px; bottom: 0; opacity: 0; pointer-events: none; border: 0; }
.ec-mp { position: fixed; z-index: 1000; right: 2%; bottom: 20px; display: flex; align-items: center; gap: 14px; color: #fff; mix-blend-mode: difference; font-size: 12px; line-height: 1; letter-spacing: .2px; text-transform: uppercase; font-weight: 500; user-select: none; }
.ec-clock { white-space: nowrap; }
.ec-sep { width: 1px; height: 14px; background: currentColor; opacity: .45; }
.ec-now { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.ec-mp[data-state="idle"] .ec-now { animation: ecBlink 2.2s ease-in-out infinite; }
@keyframes ecBlink { 50% { opacity: .35; } }
.ec-pbtn { appearance: none; background: none; border: 0; padding: 4px; margin: 0; color: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; transition: transform .2s ease, opacity .2s ease; }
.ec-pbtn svg { width: 16px; height: 16px; display: block; }
.ec-pbtn:hover { transform: scale(1.12); }
.ec-pbtn:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.ec-toggle { width: 30px; height: 30px; border: 1px solid currentColor; }
.ec-toggle svg { width: 13px; height: 13px; }
.ec-toggle .ic-pause { display: none; }
.ec-mp[data-state="playing"] .ic-play { display: none; }
.ec-mp[data-state="playing"] .ic-pause { display: block; }
.ec-mp[data-state="idle"] .ec-toggle { animation: ecPulse 2.2s ease-out infinite; }
@keyframes ecPulse { 0% { box-shadow: 0 0 0 0 #ffffff80; } 70% { box-shadow: 0 0 0 9px #fff0; } 100% { box-shadow: 0 0 0 0 #fff0; } }
/* égaliseur animé */
.ec-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; width: 14px; }
.ec-eq i { display: block; width: 2px; height: 3px; background: currentColor; }
.ec-mp[data-state="playing"] .ec-eq i { animation: ecEq .9s ease-in-out infinite; }
.ec-mp[data-state="playing"] .ec-eq i:nth-child(2) { animation-delay: -.3s; animation-duration: .7s; }
.ec-mp[data-state="playing"] .ec-eq i:nth-child(3) { animation-delay: -.5s; animation-duration: 1.1s; }
.ec-mp[data-state="playing"] .ec-eq i:nth-child(4) { animation-delay: -.15s; animation-duration: .8s; }
@keyframes ecEq { 0%,100% { height: 3px; } 50% { height: 12px; } }
/* volume : clic = muet, survol = curseur */
.ec-vol { display: flex; align-items: center; }
.ec-mute .ic-x { display: none; }
.ec-mp.is-muted .ec-mute .ic-x { display: block; }
.ec-mp.is-muted .ec-mute .ic-wave1, .ec-mp.is-muted .ec-mute .ic-wave2 { display: none; }
.ec-range-wrap { width: 0; overflow: hidden; transition: width .3s ease; display: flex; align-items: center; }
.ec-vol:hover .ec-range-wrap, .ec-vol:focus-within .ec-range-wrap, .ec-vol.open .ec-range-wrap { width: 86px; }
.ec-range { -webkit-appearance: none; appearance: none; width: 76px; margin: 0 0 0 6px; height: 16px; background: transparent; cursor: pointer; --p: 22%; }
.ec-range::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, currentColor var(--p), #ffffff4d var(--p)); color: #fff; }
.ec-range::-moz-range-track { height: 2px; background: #ffffff4d; }
.ec-range::-moz-range-progress { height: 2px; background: #fff; }
.ec-range::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%; background: #fff; margin-top: -4px; border: 0; }
.ec-range::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 0; }
/* laisser respirer le bas du footer sous le lecteur */
#Contact .container._02 { padding-bottom: 44px; }
@media screen and (max-width: 767px) {
  .ec-mp { right: 12px; left: 12px; bottom: 12px; justify-content: flex-end; gap: 10px; font-size: 11px; }
  .ec-now { max-width: 34vw; }
  .ec-clock, .ec-sep { display: none; }
  .ec-vol.open .ec-range-wrap { width: 80px; }
}
/* pastille verre dépoli : lisible sur photo claire comme sur les sections blanches */
.ec-mp { mix-blend-mode: normal; background: #0000006b; -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border: 1px solid #ffffff1f; border-radius: 999px; padding: 6px 8px 6px 16px; bottom: 16px; }
@media screen and (max-width: 767px) { .ec-mp { left: auto; right: 10px; bottom: 10px; padding: 5px 6px 5px 12px; } }

/* volume en popover au-dessus du bouton : la barre ne change plus de largeur */
.ec-vol { position: relative; }
.ec-range-wrap, .ec-vol:hover .ec-range-wrap, .ec-vol:focus-within .ec-range-wrap, .ec-vol.open .ec-range-wrap { width: auto; }
.ec-range-wrap { position: absolute; right: -8px; bottom: calc(100% + 12px); padding: 10px 14px; border-radius: 999px; background: #000000b3; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid #ffffff1f; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.ec-range-wrap::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.ec-vol:hover .ec-range-wrap, .ec-vol:focus-within .ec-range-wrap, .ec-vol.open .ec-range-wrap { opacity: 1; visibility: visible; transform: none; }
.ec-range { width: 96px; margin: 0; }
@media screen and (max-width: 767px) { .ec-vol.open .ec-range-wrap { width: auto; } }

/* Logo SVG : grand logo de fin de section (remplace le ©) */
.ec-logo-big { display: flex; align-items: center; line-height: 1; }
.ec-logo-svg { display: block; height: .72em; width: auto; }
.ec-logo-big { position: relative; display: inline-flex; }
.ec-logo-fill { position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; opacity: 0; pointer-events: none; }
.ec-logo-big .ec-logo-svg { position: relative; }
/* Musique : titres réduits, hauteur et écart recalés sur la taille (sinon le double du survol dépasse) */
#Musique { --tt: min(4rem, 3.4vw); }
#Musique .thumb-title { font-size: var(--tt); }
#Musique .thumb-title-wrapper { height: calc(var(--tt) * .985); }
#Musique .thumb-title-wrap { row-gap: calc(var(--tt) * .156); column-gap: 0; }
@media screen and (max-width: 991px) { #Musique { --tt: 1.9rem; } #Musique .thumb-title-wrapper { height: auto; } }

/* Musique : 4 titres Spotify en ligne (au lieu du grand lecteur vertical) */
.ec-more { margin-top: 60px; display: flex; flex-flow: column; gap: 14px; }
.ec-embeds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ec-embed { border-radius: 12px; overflow: hidden; background: #121212; height: 152px; }
.ec-embed iframe { display: block; border: 0; width: 100%; height: 152px; }
@media screen and (max-width: 1100px) { .ec-embeds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (max-width: 560px) { .ec-embeds { grid-template-columns: 1fr; } }
.ec-logo-big { will-change: transform; }

/* Logo de fin de section : SVG redimensionné en vrai (pas de scale CSS) pour rester net */
.ec-logo-big { position: relative; display: block; width: calc(.72em * 706 / 429); height: .72em; will-change: auto; }
.ec-logo-big .ec-logo-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.ec-logo-fill { display: none; }
