/* Base commune des 6 sites d'exemple (concaténée avant la feuille du site). */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;min-height:100vh;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video,picture{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
table{border-collapse:collapse}
.skip{position:absolute;left:12px;top:-200px;z-index:1000;padding:14px 18px;background:#fff;color:#000;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
main:focus{outline:none}
[hidden]{display:none!important}
summary{cursor:pointer}
.credits{font-size:14px}
.credits summary{min-height:44px;display:inline-flex;align-items:center}
.credits ul{padding-left:1.2em;margin:.5em 0}
.credits li{margin:0}
.credits a{display:inline-flex;align-items:center;min-height:44px}
.err{display:flex;gap:.4em;align-items:flex-start;font-size:14px;margin-top:6px}
.err::before{content:"!";flex:none;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:2px solid currentColor;font-size:11px;font-weight:700;line-height:1}
body.menu-ouvert{overflow:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
/* Formulaires par étapes : les étapes 2+ sont masquées dès le premier rendu (évite un décalage quand ex.js, en defer, les cache) */
@media (scripting:enabled){form[data-etapes]:not(.et-pret) [data-etape]~[data-etape]{display:none}}

/* Les Nuits Bleues : fiche design/musique.md (section 11 prioritaire). Nuit totale, chrome froid ; Syne + Manrope ; coins à 0, filets 1 px chrome 15 %. */
@font-face{font-family:"Syne";src:url(../fonts/syne.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:optional}
@font-face{font-family:"Manrope";src:url(../fonts/manrope.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:optional}
:root{--nuit:#070B1A;--nuit2:#0F1733;--brume:#1B2A6B;--chrome:#D9DEE8;--gris:#8C97B5;--elec:#7C95FF;--halo:#B7C5FF;
--filet:rgb(217 222 232 / .15);--ti:"Syne",ui-sans-serif,system-ui,sans-serif;--tx:"Manrope",ui-sans-serif,system-ui,sans-serif;
--m:20px;--sec:88px;--hd:72px;--max:1600px;--ease:cubic-bezier(.16,1,.3,1)}
@media (min-width:761px){:root{--m:56px;--sec:136px;--hd:88px}}
html{background:var(--nuit);color-scheme:dark;scroll-padding-top:calc(var(--hd) + 16px)}
body{background:var(--nuit);color:var(--chrome);font:400 16px/1.65 var(--tx)}
@media (min-width:1024px){body{font-size:18px}}
:focus-visible{outline:2px solid var(--halo);outline-offset:2px;box-shadow:0 0 0 4px var(--brume)}
.skip{background:var(--chrome);color:var(--nuit)}
a{color:var(--elec);text-underline-offset:4px}
a:hover{color:var(--halo)}

/* Titres */
.h1{font:800 clamp(40px,11.5vw,176px)/.9 var(--ti);text-transform:uppercase;letter-spacing:0;overflow-wrap:anywhere}
.h2{font:700 clamp(30px,5vw,76px)/1 var(--ti);letter-spacing:-.01em;margin-bottom:40px;text-wrap:balance}
.h2 .large{font-weight:800}
.h2 .etroit{font-weight:400}
.h3,h3{font:700 20px/1.25 var(--ti)}
@media (min-width:1024px){.h3,h3{font-size:26px}}
.texte{max-width:34em;color:var(--chrome)}
.gris{color:var(--gris)}
.lien{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:700 14px/1.2 var(--tx);letter-spacing:.16em;text-transform:uppercase;color:var(--elec);text-decoration:none}
.lien:hover{color:var(--halo)}

/* Boutons : un seul plein électrique par écran, les autres fantômes (contour chrome) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:48px;padding:0 22px;border:1px solid var(--chrome);border-radius:0;background:transparent;color:var(--chrome);
  font:700 13px/1.2 var(--tx);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s}
@media (min-width:1024px){.btn{font-size:14px}}
.btn .fl{font-size:18px;letter-spacing:0;transition:transform .3s var(--ease)}
.btn:hover .fl{transform:translateX(4px)}
.btn-plein{background:var(--elec);border-color:var(--elec);color:var(--nuit)}
.btn-plein:hover{background:var(--halo);border-color:var(--halo);color:var(--nuit)}
.btn-fant:hover{background:var(--chrome);color:var(--nuit)}
.btn-petit{min-height:44px;padding:0 16px}

/* En-tête transparent, plein au défilement */
.hd{position:fixed;inset:0 0 auto;z-index:50;height:var(--hd);display:flex;align-items:center;gap:12px;padding:0 var(--m);transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
.hd.est-plein,body.menu-ouvert .hd{background:rgb(7 11 26 / .94);border-bottom-color:var(--filet)}
.hd-logo{display:flex;align-items:center;min-height:44px;min-width:44px;margin-right:auto}
.hd-logo img{width:40px;height:40px}
.hd-ecouter{min-height:44px;padding:0 16px}
.hd-menu{display:inline-flex;align-items:center;gap:12px;min-height:44px;min-width:44px;padding:0 4px 0 12px;border:0;background:none;color:var(--chrome);font:700 13px/1 var(--tx);letter-spacing:.16em;text-transform:uppercase}
.hd-menu .traits{display:grid;gap:6px;width:22px}
.hd-menu .traits i{display:block;height:1.5px;background:currentColor;transition:transform .3s var(--ease)}
.hd-menu[aria-expanded=true] .traits i:first-child{transform:translateY(3.75px) rotate(45deg)}
.hd-menu[aria-expanded=true] .traits i:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.menu{position:fixed;inset:var(--hd) 0 0;z-index:-1;background:var(--nuit);overflow-y:auto;padding:24px var(--m) 48px}
.menu-liste{display:grid;gap:4px;max-width:var(--max);margin:0 auto}
.menu-liste a{display:flex;align-items:baseline;gap:16px;min-height:56px;padding:6px 0;border-bottom:1px solid var(--filet);color:var(--chrome);text-decoration:none;font:800 48px/1.05 var(--ti)}
.menu-liste a:hover,.menu-liste a[aria-current]{color:var(--halo)}
.menu-liste .num{font:700 13px/1 var(--tx);letter-spacing:.16em;color:var(--gris);min-width:2.4em}
@media (min-width:1024px){.menu-liste a{font-size:72px}}
@media (max-width:359px){.menu-liste a{font-size:40px}}

/* Brume (crochet Animation) : le contenu passe au-dessus */
.hero,.ent,.album,.dates-bloc{position:relative;overflow:clip}
.hero>:not(.nb-brume),.ent>:not(.nb-brume),.album>:not(.nb-brume),.dates-bloc>:not(.nb-brume){position:relative;z-index:1}
.hero>.hero-photo,.ent>.ent-photo{position:absolute;z-index:0}

/* Sections */
.bloc{position:relative;max-width:var(--max);margin:0 auto;padding:var(--sec) var(--m) 0}
main{padding-bottom:var(--sec)}
.plus{margin-top:24px}

/* Héros : 100svh, titre en bas */
.hero{min-height:100svh;display:flex;align-items:flex-end}
.hero-photo{inset:0}
.hero-photo picture,.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(7 11 26 / .55) 0,rgb(7 11 26 / 0) 22%,rgb(7 11 26 / .25) 45%,rgb(7 11 26 / .92) 78%,var(--nuit) 100%)}
.hero-in{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--m) 48px}
.hero-titre{font-family:var(--ti);line-height:.9;text-transform:uppercase}
.nb-nuits{display:block;font-weight:800;font-size:clamp(42px,13.5vw,200px);letter-spacing:.01em}
.nb-blu{display:block;font-weight:560;font-size:clamp(20px,5.2vw,78px);letter-spacing:.9em;margin-top:.35em;padding-left:.08em}
.nb-blu span{display:inline-block}
.hero-sous{margin:20px 0 28px;font:500 17px/1.4 var(--tx);color:var(--chrome);max-width:24em}
@media (min-width:1024px){.hero-in{padding-bottom:72px}.hero-sous{font-size:21px}}

/* Manifeste : une phrase au centre de l'écran */
.manif{position:relative;padding:0 var(--m)}
.nb-manif-cadre{min-height:100svh;display:grid;place-items:center}
.nb-manif{font:700 clamp(28px,4.4vw,64px)/1.18 var(--ti);max-width:18ch;text-align:center;margin:auto;text-wrap:balance;color:var(--chrome)}

/* Album : pochette carrée (duotone nuit et électrique en CSS) + titres et dates */
.album-grille{display:grid;gap:40px}
@media (min-width:1024px){.album-grille{grid-template-columns:5fr 6fr;gap:80px;align-items:center}}
.pochette{position:relative;aspect-ratio:1;overflow:hidden;background:var(--elec);isolation:isolate}
.pochette picture,.pochette img{width:100%;height:100%;object-fit:cover}
.pochette img{filter:grayscale(1) contrast(1.15) brightness(1.05);mix-blend-mode:multiply}
.pochette::after{content:"";position:absolute;inset:0;background:var(--nuit);mix-blend-mode:lighten;opacity:.92;z-index:1}
.poch-txt{position:absolute;inset:auto 0 0;z-index:2;display:flex;justify-content:space-between;gap:12px;padding:16px 18px;font:800 13px/1.2 var(--ti);letter-spacing:.16em;color:var(--chrome);text-transform:uppercase}
.album-meta{display:flex;flex-wrap:wrap;gap:6px 0;margin:-16px 0 28px;font:700 13px/1.5 var(--tx);letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.album-meta{column-gap:1.4em}
.album-meta li{white-space:nowrap}
.album-page .texte{margin:-16px 0 24px}
.album-page .album-meta{margin-top:0}
.pistes{border-top:1px solid var(--filet);margin-bottom:32px}
.pistes li{display:grid;grid-template-columns:2.6em 1fr auto;align-items:baseline;gap:8px;padding:12px 0;border-bottom:1px solid var(--filet)}
.pistes .n{font:700 13px/1 var(--tx);color:var(--gris);letter-spacing:.08em;font-variant-numeric:tabular-nums}
.pistes .t{font:700 18px/1.3 var(--ti)}
.pistes .d{font-variant-numeric:tabular-nums;color:var(--gris);font-size:15px}
@media (min-width:1024px){.pistes .t{font-size:22px}}

/* Machines et voix : 2 photos noir et blanc en grand */
.machines{display:grid;gap:40px}
.mach-photos{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.mach-photos figure{overflow:hidden}
.mach-photos picture{display:block;height:100%}
.mach-photos img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08)}
.mach-1{grid-column:1/-1;aspect-ratio:4/3}
.mach-2{grid-column:2/-1;aspect-ratio:4/3;margin-top:-56px;position:relative;border:8px solid var(--nuit)}
@media (min-width:1024px){
  .machines{grid-template-columns:7fr 4fr;gap:80px;align-items:end}
  .mach-photos{grid-template-columns:repeat(7,1fr)}
  .mach-1{grid-column:1/7;aspect-ratio:3/2}.mach-2{grid-column:4/8;margin-top:-140px}
}

/* Dates en lignes */
.bloc-in{max-width:var(--max);margin:0 auto}
.dates{border-top:1px solid var(--filet)}
.date{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 16px;padding:18px 0;border-bottom:1px solid var(--filet)}
.date .jour{grid-column:1/-1;font:800 28px/1 var(--ti);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.date .lieu{display:grid;gap:2px}
.date .ville{font:700 17px/1.3 var(--tx)}
.date .salle{color:var(--gris);font-size:15px}
.date .fin{display:flex;align-items:center;gap:14px;justify-self:end}
.date .prix{font-variant-numeric:tabular-nums;color:var(--chrome)}
.date .tag{font:700 12px/1 var(--tx);letter-spacing:.16em;text-transform:uppercase;color:var(--gris);border:1px solid var(--filet);padding:8px 10px}
.date.passee .jour,.date.passee .ville{color:var(--gris);text-decoration:line-through;text-decoration-thickness:1px}
@media (min-width:761px){
  .date{grid-template-columns:minmax(190px,1.1fr) 2fr auto;gap:24px;padding:22px 0}
  .date .jour{grid-column:auto;font-size:44px}
  .date .lieu{grid-template-columns:1fr 1.4fr;align-items:baseline;gap:24px}
  .date .ville{font-size:20px}
}
.statut{margin-top:20px;padding:14px 16px;border:1px solid var(--elec);background:var(--nuit2);color:var(--chrome);font-size:15px;max-width:40em}

/* Presse : citations très grandes, guillemets fins */
.citations{display:grid;gap:72px}
.citation blockquote p{font:700 clamp(30px,5.2vw,80px)/1.08 var(--ti);text-wrap:balance;max-width:18ch}
.citation blockquote p::before{content:"« ";font-weight:400}
.citation blockquote p::after{content:" »";font-weight:400}
.citation figcaption{margin-top:20px;font:700 13px/1.5 var(--tx);letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
@media (min-width:1024px){.presse .citation:nth-child(2){justify-self:end;text-align:right}.presse .citation:nth-child(2) blockquote p{margin-left:auto}}
.avis .citations-liste{gap:96px}
@media (min-width:1024px){.avis .citations-liste{gap:160px}.avis li:nth-child(even) .citation{text-align:right}.avis li:nth-child(even) blockquote p{margin-left:auto}}
.avis li:nth-child(n+3) blockquote p{font-size:clamp(26px,3.8vw,60px);max-width:22ch}

/* En-tête des pages intérieures */
.ent{min-height:52svh;display:flex;align-items:flex-end;padding:calc(var(--hd) + 48px) 0 48px}
.ent-in{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--m)}
.ent-photo{inset:0}
.ent-photo picture,.ent-photo img{width:100%;height:100%;object-fit:cover}
.ent-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(7 11 26 / .5),rgb(7 11 26 / .35) 40%,var(--nuit))}
.ent-photo-oui{min-height:72svh}
@media (min-width:1024px){.ent{min-height:64svh;padding-bottom:72px}.ent-photo-oui{min-height:86svh}}

/* Page musique */
.album-page{padding-top:48px}
.album-bas{display:grid;gap:48px;margin-top:72px}
@media (min-width:1024px){.album-bas{grid-template-columns:1fr 1fr;gap:80px}}
.formats .h3,.credits-disque .h3{margin-bottom:20px}
.formats-liste{border-top:1px solid var(--filet);margin-bottom:24px}
.formats-liste li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--filet)}
.f-nom{font-weight:700}.f-det{display:block;font-weight:400;color:var(--gris);font-size:15px}
.f-prix{font-variant-numeric:tabular-nums;white-space:nowrap}
.cred-liste li{padding:12px 0;border-bottom:1px solid var(--filet);color:var(--chrome)}
.clips-liste{display:grid;gap:48px}
@media (min-width:1024px){.clips-liste{grid-template-columns:repeat(3,1fr);gap:32px}}
.clip-btn{position:relative;display:block;width:100%;padding:0;border:0;background:var(--nuit2);aspect-ratio:16/9;overflow:hidden}
.clip-img,.clip-img picture,.clip-img img{display:block;width:100%;height:100%;object-fit:cover}
.clip-img img{transition:transform .8s var(--ease),opacity .4s;opacity:.8}
.clip-btn:hover .clip-img img{transform:scale(1.04);opacity:1}
.clip-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border:1px solid var(--chrome);background:rgb(7 11 26 / .55);border-radius:50%}
.clip-play::after{content:"";position:absolute;left:26px;top:21px;border:11px solid transparent;border-left:17px solid var(--chrome);border-right:0}
.clip-titre{margin-top:16px}
.clip-titre .d,.dlg-t .d{font:400 15px/1 var(--tx);color:var(--gris);margin-left:8px;font-variant-numeric:tabular-nums}
.clip-txt{color:var(--gris);margin-top:4px}
.nb-dialog{width:min(1100px,calc(100% - 24px));max-width:none;max-height:calc(100svh - 24px);padding:0;border:1px solid var(--filet);background:var(--nuit2);color:var(--chrome)}
.nb-dialog::backdrop{background:rgb(7 11 26 / .85)}
.dlg-in{position:relative;padding:64px 16px 24px}
.dlg-x{position:absolute;top:8px;right:8px;min-height:44px;padding:0 14px;border:1px solid var(--chrome);background:none;color:var(--chrome);font:700 13px/1 var(--tx);letter-spacing:.16em;text-transform:uppercase}
.dlg-img{aspect-ratio:16/9;overflow:hidden}
.dlg-img picture,.dlg-img img{width:100%;height:100%;object-fit:cover}
.dlg-t{font:700 26px/1.2 var(--ti);margin-top:20px}
.dlg-msg{margin-top:8px;color:var(--chrome)}
@media (min-width:761px){.dlg-in{padding:72px 32px 32px}}

/* Filtres de la page Dates */
.filtres{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:24px}
.filtre-liste{display:flex;flex-wrap:wrap;gap:8px}
.pastille{min-height:44px;padding:0 18px;border:1px solid var(--filet);background:none;color:var(--chrome);font:700 13px/1 var(--tx);letter-spacing:.12em;text-transform:uppercase}
.pastille:hover{border-color:var(--chrome)}
.pastille[aria-pressed=true]{background:var(--chrome);color:var(--nuit);border-color:var(--chrome)}
.compte{color:var(--gris);font-size:15px}
.dates-page{padding-top:48px}
.public{margin-top:var(--sec);aspect-ratio:16/9;overflow:hidden}
.public img{width:100%;height:100%;object-fit:cover}

/* Le duo : 3 écrans */
.ecran{display:grid;max-width:var(--max);margin:0 auto}
.ecran-photo{aspect-ratio:4/5;overflow:hidden}
.ecran-photo picture,.ecran-photo img{width:100%;height:100%;object-fit:cover}
.ecran-txt{padding:40px var(--m) 72px}
.ecran-n{font:800 14px/1 var(--ti);letter-spacing:.16em;color:var(--gris);margin-bottom:20px}
@media (min-width:1024px){
  .ecran{min-height:100svh;grid-template-columns:7fr 5fr;align-items:center}
  .ecran-photo{height:100svh;aspect-ratio:auto}
  .ecran-txt{padding:0 var(--m) 0 72px}
  .ecran-inv .ecran-photo{order:2}.ecran-inv .ecran-txt{padding:0 72px 0 var(--m)}
}

/* Contact */
.cblocs{display:grid;gap:48px}
@media (min-width:1024px){.cblocs{grid-template-columns:repeat(3,1fr);gap:40px}}
.cbloc{border-top:1px solid var(--filet);padding-top:24px}
.cbloc .h3{margin-bottom:14px}
.cbloc p+p{margin-top:12px}
.cbloc p{overflow-wrap:anywhere}
.lettre{margin-top:20px}
.lettre-ligne{display:flex;flex-wrap:wrap;gap:8px}
.lettre-ligne input{flex:1 1 180px}
.form-grille{display:grid;gap:48px}
@media (min-width:1024px){.form-grille{grid-template-columns:5fr 6fr;gap:80px;align-items:start}}
.studio{aspect-ratio:4/5;overflow:hidden}
.studio img{width:100%;height:100%;object-fit:cover}
.form{display:grid;gap:24px}
.champ{display:grid;gap:8px;border:0;padding:0;margin:0;min-width:0}
.champ label,.champ legend{font:700 13px/1.4 var(--tx);letter-spacing:.16em;text-transform:uppercase;color:var(--chrome);padding:0}
.sujets legend{margin-bottom:8px}
input[type=text],input[type=email],textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid rgb(217 222 232 / .45);border-radius:0;background:var(--nuit2);color:var(--chrome);font-size:16px}
textarea{resize:vertical;min-height:144px}
input:focus-visible,textarea:focus-visible{border-color:var(--halo)}
[aria-invalid=true]{border-color:#FF9B9B!important}
.radios{display:flex;flex-wrap:wrap;gap:8px}
.radio{position:relative;display:inline-flex}
.radio input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.radio span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid rgb(217 222 232 / .45);font:700 13px/1 var(--tx);letter-spacing:.12em;text-transform:uppercase}
.radio input:checked+span{background:var(--chrome);color:var(--nuit);border-color:var(--chrome)}
.radio input:focus-visible+span{outline:2px solid var(--halo);outline-offset:2px;box-shadow:0 0 0 4px var(--brume)}
.err{color:#FF9B9B}

/* Pied */
.pied{border-top:1px solid var(--filet);padding:56px var(--m) 32px;background:var(--nuit)}
.pied-in{max-width:var(--max);margin:0 auto;display:grid;gap:16px}
.pied-in img{width:auto;height:40px}
.reseaux,.mail{color:var(--chrome)}
.pied-bas{max-width:var(--max);margin:32px auto 0;display:grid;gap:8px;color:var(--gris)}
.credits{color:var(--gris);font-size:13px}
.credits a{color:var(--gris)}
.imagine{font-size:13px}
.imagine a{display:inline-flex;align-items:center;min-height:44px;color:var(--gris)}
.imagine a:hover{color:var(--chrome)}
@media (min-width:1024px){.pied-in{grid-template-columns:auto 1fr auto;align-items:center;gap:40px}}
/* Images à cadre fixe : l'image remplit son cadre */
.studio picture,.public picture{display:block;height:100%}