@import url("../fonts/fonts.css");

/* =========================================================
   DJ de mariage — famille « Nuit et néon »
   Palette magenta / cyan / ambre incandescent sur nuit noire.
   Typo Unbounded (très large, nocturne) + DM Sans.
   ⚠️ Ce modèle frôle « Studio noir » (lux-dark-couture) : deux fonds
   noirs. Ce qui les sépare n’est PAS le fond, c’est la couleur saturée
   et le mouvement. Ici la couleur doit occuper le cadre ; là-bas tout
   est monochrome et piqué. Si une page pouvait passer pour l’autre,
   celle-ci est ratée.
   Architecture tirée de briefs-metiers/fiche-dj.md, partie 3 :
   vérification de date, écoute, les quatre peurs nommées, la technique
   du lieu, la liste des salles. Le produit est invisible et sonore.
   ========================================================= */

:root{
  --nuit:#08070C;
  --nuit-2:#0E0C14;
  --nuit-3:#16131F;
  --magenta:#E8188C;
  --cyan:#22D3EE;
  --ambre:#FF9F45;
  --blanc:#F4F2F7;
  --gris:#8B8798;
  --trait:rgba(244,242,247,.14);

  --titre:"Unbounded","Arial Black",Impact,sans-serif;
  --texte:"DM Sans","Helvetica Neue",Arial,sans-serif;

  --marge:clamp(1.25rem,5vw,4rem);
  --max:1280px;
  --rythme:clamp(4rem,9vw,7.5rem);
  --ease:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--nuit);color:var(--blanc);
  font-family:var(--texte);font-weight:400;
  font-size:clamp(1rem,.96rem + .2vw,1.06rem);line-height:1.7;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;cursor:pointer}
button,summary,label,[role="button"]{cursor:pointer}
::selection{background:var(--magenta);color:var(--blanc)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

.wrap{width:min(100% - var(--marge)*2,var(--max));margin-inline:auto}
.sect{padding:var(--rythme) 0;position:relative}
section[id],header[id]{scroll-margin-top:4.5rem}
.sect--2{background:var(--nuit-2)}

/* ---------- typographie ---------- */
h1,h2,h3{font-family:var(--titre);font-weight:800;margin:0;line-height:1.02;letter-spacing:-.03em}
.display{font-size:clamp(2.1rem,6vw,4.6rem);line-height:.98}
.h2{font-size:clamp(1.6rem,3.6vw,2.6rem);margin-bottom:1.3rem}
.h3{font-size:clamp(1rem,1.6vw,1.15rem);font-weight:600;letter-spacing:-.01em}
p{margin:0 0 1.05em;max-width:62ch;color:var(--gris)}
p:last-child{margin-bottom:0}
p strong{color:var(--blanc);font-weight:500}

.etiq{
  font-family:var(--texte);font-size:.76rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.22em;color:var(--cyan);
  margin:0 0 1.2rem;display:block;
}
.chapo{font-size:clamp(1.05rem,1.9vw,1.25rem);line-height:1.55;max-width:56ch;color:var(--blanc)}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--texte);font-size:.9rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  padding:1rem 1.9rem;border:0;
  background:var(--magenta);color:var(--blanc);
  transition:filter .25s var(--ease);
}
.btn:hover{filter:brightness(1.15)}
.btn--vide{background:transparent;border:1px solid var(--trait);color:var(--blanc)}
.btn--vide:hover{border-color:var(--cyan);color:var(--cyan);filter:none}

/* ---------- navigation ---------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem var(--marge);
  background:rgba(8,7,12,.92);border-bottom:1px solid var(--trait);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.nav__nom{font-family:var(--titre);font-weight:800;font-size:1rem;letter-spacing:-.03em}
.nav__liens{display:none;gap:1.7rem}
.nav__liens a{font-size:.82rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--gris);transition:color .2s}
.nav__liens a:hover{color:var(--cyan)}
.nav__cta{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;background:var(--magenta);color:var(--blanc);padding:.6rem 1rem}
@media(min-width:1000px){.nav__liens{display:flex}}

/* ---------- bandeau : la date AVANT le nom ---------- */
.haut{position:relative;min-height:min(92vh,760px);display:flex;align-items:flex-end;padding:7rem 0 var(--rythme)}
.haut__fond{position:absolute;inset:0;overflow:hidden}
.haut__fond img{width:100%;height:100%;object-fit:cover;opacity:.75}
.haut__fond::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--nuit) 4%,rgba(8,7,12,.35) 55%,rgba(8,7,12,.6))}
.haut .wrap{position:relative;z-index:1}
.haut h1{margin-bottom:1.2rem}

/* le vérificateur de date : la première question du visiteur */
.verif{
  display:grid;gap:.7rem;margin-top:2rem;padding:1.3rem;
  background:rgba(14,12,20,.82);border:1px solid var(--trait);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);max-width:640px;
}
@media(min-width:640px){.verif{grid-template-columns:1fr auto;align-items:end}}
.verif label{display:block;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--cyan);margin-bottom:.45rem}
.verif input{
  font-family:var(--texte);font-size:1rem;color:var(--blanc);width:100%;
  background:var(--nuit);border:1px solid var(--trait);padding:.85rem .9rem;
}
.verif input:focus{outline:none;border-color:var(--magenta)}
.verif__rep{grid-column:1/-1;margin:0;font-size:.95rem}
.verif__rep b{color:var(--blanc)}
.verif__rep--libre b{color:var(--cyan)}
.verif__rep--pris b{color:var(--magenta)}

/* ---------- écoute : le produit invisible ---------- */
.pistes{display:grid;gap:1px;background:var(--trait);margin-top:2.4rem}
.piste{background:var(--nuit);padding:1.2rem 1.3rem;display:grid;gap:1rem;align-items:center}
@media(min-width:760px){.piste{grid-template-columns:3.2rem 15rem 1fr auto}}
.piste__play{
  width:3.2rem;height:3.2rem;border:0;border-radius:50%;
  background:var(--magenta);color:var(--blanc);font-size:1rem;
  display:grid;place-content:center;transition:filter .2s;
}
.piste__play:hover{filter:brightness(1.2)}
.piste__play[aria-pressed="true"]{background:var(--cyan);color:var(--nuit)}
.piste__nom b{display:block;font-family:var(--titre);font-weight:600;font-size:.98rem;letter-spacing:-.02em}
.piste__nom span{font-size:.82rem;color:var(--gris)}
.onde{display:flex;align-items:flex-end;gap:2px;height:44px;overflow:hidden}
.onde i{flex:1;background:var(--trait);min-width:2px;transition:background .2s}
.piste[data-actif="1"] .onde i{background:var(--cyan)}
.piste__duree{font-size:.85rem;color:var(--gris);font-variant-numeric:tabular-nums}
.manque{font-size:.85rem;color:var(--magenta);margin-top:1rem}

/* ---------- la piste, pas le prestataire ---------- */
/* 6 images, 3 colonnes : deux rangees pleines, jamais de case vide */
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1px;background:var(--trait);margin-top:2.4rem}
@media(min-width:900px){.galerie{grid-template-columns:repeat(3,1fr)}}
.galerie figure{margin:0;background:var(--nuit)}
.galerie img{width:100%;aspect-ratio:3/2;object-fit:cover}
.galerie figcaption{font-size:.85rem;color:var(--gris);padding:.8rem 1rem 1.1rem}

/* ---------- les quatre peurs nommées ---------- */
.peurs{display:grid;gap:1px;background:var(--trait);margin-top:2.4rem}
@media(min-width:800px){.peurs{grid-template-columns:1fr 1fr}}
.peur{background:var(--nuit);padding:1.8rem 1.6rem}
.peur__num{font-family:var(--titre);font-weight:800;font-size:.9rem;color:var(--magenta);display:block;margin-bottom:.9rem}
.peur h3{margin-bottom:.9rem;color:var(--blanc)}
.peur h3::before{content:"\201C "}
.peur h3::after{content:" \201D"}

/* ---------- la technique du lieu ---------- */
.tech{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--trait);margin-top:2.4rem}
.tech__c{background:var(--nuit-2);padding:1.6rem 1.4rem}
.tech__c b{display:block;font-family:var(--titre);font-weight:800;font-size:clamp(1.5rem,3vw,2rem);line-height:1;color:var(--cyan)}
.tech__c span{display:block;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--gris);margin-top:.6rem}
.tech__c p{font-size:.92rem;margin-top:.8rem}

/* ---------- la liste des salles ---------- */
.salles{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem;padding:0;list-style:none}
.salles li{font-size:.88rem;color:var(--blanc);border:1px solid var(--trait);padding:.5rem .95rem;transition:border-color .2s,color .2s}
.salles li:hover{border-color:var(--magenta);color:var(--magenta)}

/* ---------- formules ---------- */
.formules{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--trait);margin-top:2.4rem}
.formule{background:var(--nuit);padding:1.8rem 1.5rem;display:grid;gap:.9rem;align-content:start}
.formule--mise{background:var(--nuit-3);outline:1px solid var(--magenta);outline-offset:-1px}
.formule h3{color:var(--blanc)}
.formule__h{font-family:var(--titre);font-weight:800;font-size:2rem;line-height:1;color:var(--ambre)}
.formule__prix{font-family:var(--titre);font-weight:800;font-size:1.35rem;
  color:var(--cyan);margin:-.3rem 0 0;letter-spacing:-.01em}
.formule ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.93rem;color:var(--gris)}
.formule li{display:grid;grid-template-columns:1.1rem 1fr;gap:.6rem}
.formule li::before{content:"\2022";color:var(--cyan)}

/* ---------- bande panoramique ---------- */
.bande{width:100%;aspect-ratio:21/6;object-fit:cover;margin:0}

/* ---------- formulaire ---------- */
.dispo{display:grid;gap:clamp(2rem,5vw,4rem)}
@media(min-width:900px){.dispo{grid-template-columns:.9fr 1.1fr;align-items:start}}
.form{display:grid;gap:1.1rem}
.champ{display:grid;gap:.4rem}
.champ label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--gris)}
.champ input,.champ select,.champ textarea{
  font-family:var(--texte);font-size:1rem;color:var(--blanc);
  background:var(--nuit-2);border:1px solid var(--trait);padding:.85rem .9rem;width:100%;
}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--magenta)}
.champ textarea{min-height:110px;resize:vertical}
.duo{display:grid;gap:1.1rem}
@media(min-width:600px){.duo{grid-template-columns:1fr 1fr}}
.rgpd{font-size:.88rem;color:var(--gris);max-width:52ch}

/* ---------- pied de page ---------- */
.pied{border-top:1px solid var(--trait);padding:3rem 0}
.pied__grille{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-end}
.pied small{color:var(--gris);font-size:.82rem}

/* ---------- comment on construit votre soirée (bloc F) ---------- */
.etapes{display:grid;gap:1px;background:var(--trait);margin-top:2.4rem}
@media(min-width:800px){.etapes{grid-template-columns:1fr 1fr}}
.etape{background:var(--nuit);padding:1.8rem 1.6rem}
.etape--mise{background:var(--nuit-3);outline:1px solid var(--magenta);outline-offset:-1px}
.etape__num{font-family:var(--titre);font-weight:800;font-size:.9rem;color:var(--ambre);display:block;margin-bottom:.9rem}
.etape h3{margin-bottom:.8rem;color:var(--blanc)}
.etape p{font-size:.93rem;margin:0}

/* ---------- avis et chiffres de terrain (bloc G) ---------- */
.chiffres{display:flex;flex-wrap:wrap;gap:clamp(2rem,6vw,4rem);margin-top:2.4rem}
.chiffre b{display:block;font-family:var(--titre);font-weight:800;font-size:clamp(1.05rem,2.6vw,1.45rem);line-height:1;letter-spacing:-.02em;color:var(--magenta)}
.chiffre span{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--gris)}
.avis{display:grid;gap:1px;background:var(--trait);margin-top:2.4rem}
@media(min-width:760px){.avis{grid-template-columns:1fr 1fr}}
.avis__c{margin:0;background:var(--nuit);padding:1.8rem 1.6rem}
.avis__c--son{outline:1px solid var(--cyan);outline-offset:-1px}
.avis__c blockquote{margin:0;color:var(--blanc);font-size:1rem;line-height:1.6;max-width:none}
.avis__c blockquote::before{content:"\201C "}
.avis__c blockquote::after{content:" \201D"}
.avis__c figcaption{margin-top:1.1rem;font-size:.85rem;color:var(--gris)}
.avis__c figcaption b{color:var(--cyan);font-weight:600}
.avis__tag{display:inline-block;margin-top:1rem;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--nuit);background:var(--cyan);padding:.3rem .6rem}
.reco{display:flex;flex-wrap:wrap;gap:.5rem;margin:2rem 0 .6rem;padding:0;list-style:none}
.reco li{font-size:.85rem;color:var(--blanc);border:1px solid var(--trait);padding:.5rem .95rem}
.reco__note{font-size:.85rem;color:var(--gris);margin:0}
.plateformes__titre{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--gris);margin:2.4rem 0 .8rem}
.plateformes{display:flex;flex-wrap:wrap;gap:.8rem}

/* ---------- zone d’intervention (bloc A) ---------- */
.zone{display:grid;gap:1px;background:var(--trait);margin-top:2.4rem}
@media(min-width:800px){.zone{grid-template-columns:repeat(3,1fr)}}
.zone__c{background:var(--nuit-2);padding:1.6rem 1.4rem}
.zone__c b{display:block;font-family:var(--titre);font-weight:800;font-size:.98rem;letter-spacing:-.02em;color:var(--cyan);margin-bottom:.9rem}
.zone__c p{font-size:.92rem;margin:0}
.zone__dep{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem;padding:0;list-style:none}
.zone__dep li{font-size:.85rem;color:var(--blanc);border:1px solid var(--ambre);padding:.4rem .85rem}

/* ---------- FAQ administrative (bloc H) ---------- */
.faq{display:grid;gap:1px;background:var(--trait);margin-top:2.4rem}
.faq details{background:var(--nuit)}
.faq summary{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  list-style:none;cursor:pointer;padding:1.2rem 1.3rem;
  font-family:var(--titre);font-weight:600;font-size:.95rem;letter-spacing:-.02em;
  color:var(--blanc);transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--texte);font-size:1.15rem;font-weight:700;color:var(--magenta);transition:color .2s}
.faq details[open] summary::after{content:"\2212";color:var(--cyan)}
.faq summary:hover{color:var(--cyan)}
.faq__rep{padding:0 1.3rem 1.3rem;font-size:.93rem}
.faq__rep p{margin:0}

/* ---------- révélation au défilement ----------
   ⚠️ jamais de clip-path sur l’élément observé : Chrome calcule le ratio
   d’IntersectionObserver sur la boîte clippée et l’élément ne se révèle
   alors JAMAIS. Rideau en pseudo-élément. ---------- */
.reveal{position:relative}
.reveal::after{
  content:"";position:absolute;inset:0;background:var(--nuit);
  transform-origin:bottom;transform:scaleY(1);
  transition:transform .8s var(--ease);pointer-events:none;z-index:2;
}
.reveal.vu::after{transform:scaleY(0)}
@media(prefers-reduced-motion:reduce){
  .reveal::after{display:none}
  .onde i{transition:none}
  html{scroll-behavior:auto}
}