/* Charte : musicall-marque/couleurs/couleurs.css — « jour » pour vendre, « nuit » pour jouer. */
@font-face{font-family:Geist;font-weight:400;font-display:swap;src:url(/assets/fonts/Geist-Regular.woff2) format("woff2")}
@font-face{font-family:Geist;font-weight:500;font-display:swap;src:url(/assets/fonts/Geist-Medium.woff2) format("woff2")}
@font-face{font-family:Geist;font-weight:600;font-display:swap;src:url(/assets/fonts/Geist-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-weight:400;font-display:swap;src:url(/assets/fonts/GeistMono-Regular.woff2) format("woff2")}
:root{
  --porcelaine:#F3F4F5; --blanc:#FFFFFF; --graphite:#1B1D20; --ardoise:#5E646B; --aluminium:#D6DADE;
  --laque:#0C0C0E; --encre:#0B1020; --tranche:#121935; --brume:#8FA0C8; --clair:#E6E9F2; --gravure:#AEB2B8;
  --led:#FFFFFF; --joue:#42D689; --relais:#FFC857; --focus:#2F6FEB;
  --sans:Geist,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gouttiere:clamp(20px,5vw,56px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--porcelaine);color:var(--graphite);font:17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,ul,dl,dd{margin:0}
h1,h2,h3{text-wrap:balance;font-weight:600;letter-spacing:-.03em;line-height:1.02}
a{color:inherit}
a:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:4px}
img,svg{max-width:100%}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--gouttiere)}
.sur-titre{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ardoise)}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--ardoise);max-width:40ch}
.bouton{display:inline-block;background:var(--graphite);color:var(--porcelaine);text-decoration:none;font-weight:500;font-size:16px;padding:13px 24px;border-radius:999px;transition:background .2s}
.bouton:hover{background:#34373c}
.bouton.contour{background:transparent;color:var(--graphite);box-shadow:inset 0 0 0 1.5px var(--graphite)}
.bouton.contour:hover{background:var(--graphite);color:var(--porcelaine)}
.bouton.clair{background:var(--clair);color:var(--laque)}
.bouton.clair:hover{background:var(--led)}
.fiche .actions{margin-top:30px}
.lien{font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.lien:hover{border-bottom-width:2px}

/* symbole « Cm » : c'est le trait qui s'allume. Les styles n'entrent pas dans <use> : tout passe par des variables. */
@property --lueur{syntax:"<length>";inherits:true;initial-value:0px}
.cm{display:block;overflow:visible;aspect-ratio:81/57;height:auto;--filtre:none}
svg.cm.allume{color:var(--led);--lueur:6px;--filtre:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 var(--lueur) rgba(225,233,255,.9))}
@media (prefers-reduced-motion: no-preference){
  .respire{animation:respire 5s ease-in-out infinite}
  @keyframes respire{0%,100%{--lueur:3px}50%{--lueur:11px}}
}

/* navigation */
.nav{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--porcelaine) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid color-mix(in srgb,var(--aluminium) 70%,transparent)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:58px}
.nav .marque img{height:21px;width:auto;display:block}
.nav ul{list-style:none;padding:0;display:flex;gap:clamp(14px,3vw,32px);font-size:14.5px;align-items:center}
.nav a{text-decoration:none;color:var(--ardoise)}
.nav ul a{display:inline-flex;align-items:center;height:32px;line-height:1}
.nav a:hover{color:var(--graphite)}

/* bandeau d'annonce (au-dessus de la navigation, comme une vitrine) */
.annonce{background:var(--laque);color:var(--clair);font-size:14px;text-align:center}
.annonce .wrap{padding-block:10px}
.annonce a{color:var(--led);font-weight:500;text-decoration:none;white-space:nowrap}
.annonce a::after{content:" ›"}
.annonce a:hover{text-decoration:underline}
.nav .compte-nav a{display:inline-flex;align-items:center;gap:6px}
.nav .compte-nav svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.nav a[aria-current="page"]{color:var(--graphite);font-weight:500}

/* héros : texte centré, puis la scène du boîtier */
.heros{padding-block:clamp(44px,7vw,92px) clamp(48px,7vw,96px);text-align:center}
.heros .wrap:first-child{display:flex;flex-direction:column;align-items:center}
.heros h1{font-size:clamp(52px,8.4vw,112px);margin-block:14px 22px}
.heros .lead{margin-inline:auto;max-width:44ch}
.heros .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;align-items:center;margin-top:30px}
/* état de la vente, dans le sur-titre : « MusiCall Box · ● Précommandes ouvertes » */
.etat-vente{color:var(--graphite)}
.etat-vente::before{content:"·";color:var(--ardoise);margin-inline:.6em}
.etat-vente.ouvert::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--joue);vertical-align:1px;margin-inline:.8em .6em;box-shadow:0 0 0 3px color-mix(in srgb,var(--joue) 22%,transparent)}
.heros-prix{margin-top:18px;font-size:clamp(18px,1.6vw,21px);font-weight:500}

.scene-heros{margin-top:clamp(40px,6vw,72px);position:relative;overflow:hidden;border-radius:32px;aspect-ratio:16/8.4;display:grid;place-items:center;
  background:radial-gradient(70% 90% at 50% 8%,#26272c 0%,#111114 45%,var(--laque) 75%)}
.scene-heros .halo{position:absolute;width:60%;aspect-ratio:1;left:20%;top:-10%;border-radius:50%;background:radial-gradient(closest-side,rgba(143,160,200,.20),transparent 70%);filter:blur(10px)}
.scene-heros .flotte{width:min(26%,300px);position:relative;z-index:1;display:grid;place-items:center}
.scene-heros .boitier{width:100%}
.scene-heros .sol{position:absolute;left:30%;right:30%;bottom:9%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.85),transparent)}
.scene-infos{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding:18px clamp(18px,3vw,32px);font-size:14px;color:var(--brume);text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.progression{display:inline-flex;align-items:center;gap:12px;color:var(--clair)}
.jauge{display:inline-block;width:120px;height:4px;border-radius:2px;background:#2b2d33;overflow:hidden}
.jauge i{display:block;height:100%;background:var(--led);border-radius:2px}
@media (prefers-reduced-motion: no-preference){
  .scene-heros .flotte{animation:flotte 7s ease-in-out infinite}
  .scene-heros .sol{animation:ombre 7s ease-in-out infinite}
  .scene-heros .boitier::before{animation:reflet 6.5s ease-in-out infinite}
  .scene-heros .halo{animation:halo 12s ease-in-out infinite alternate}
  @keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  @keyframes ombre{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.88);opacity:.75}}
  @keyframes reflet{0%,15%{transform:translateX(-60%)}55%,100%{transform:translateX(60%)}}
  @keyframes halo{from{transform:translateX(-8%)}to{transform:translateX(8%)}}
}

/* quatre maisons, un seul groupe : liaisons animées */
.liaison{background:var(--encre);color:var(--clair);padding-block:clamp(64px,9vw,128px);text-align:center;overflow:hidden}
.liaison .sur-titre{color:var(--brume)}
.liaison h2{font-size:clamp(38px,5.4vw,68px);margin-block:16px 22px}
.liaison .lead{color:var(--brume);margin-inline:auto;max-width:46ch}
.reseau{position:relative;margin-top:clamp(28px,5vw,56px)}
.reseau svg{display:block;width:100%;height:auto;overflow:visible}
.noeuds rect{fill:#0c0c0e;stroke:#3a4a7a;stroke-width:1.5}
.noeuds .led{fill:var(--led);filter:drop-shadow(0 0 5px rgba(225,233,255,.9))}
.noeuds .onde{fill:none;stroke:var(--brume);stroke-width:1;opacity:0}
.impulsions path{stroke:var(--led);stroke-dasharray:3 97;stroke-dashoffset:100;opacity:0;filter:drop-shadow(0 0 4px rgba(225,233,255,.95))}
.musicien{position:absolute;transform:translate(-50%,34px);font-size:13.5px;color:var(--brume);white-space:nowrap}
.musicien b{color:var(--clair);font-weight:500;margin-right:4px}
.musicien.moi b{color:var(--joue)}
@media (prefers-reduced-motion: no-preference){
  .impulsions path{animation:impulsion var(--d) linear var(--r) infinite}
  .noeuds .onde{animation:onde 4s ease-out infinite}
  @keyframes impulsion{0%{stroke-dashoffset:100;opacity:0}8%{opacity:1}92%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
  @keyframes onde{0%{r:14;opacity:.6}100%{r:46;opacity:0}}
}

/* précommander en confiance */
.confiance{padding-block:0 clamp(64px,9vw,128px)}
.confiance h2{font-size:clamp(30px,3.6vw,44px);max-width:20ch}
.confiance ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,40px);margin-top:clamp(28px,4vw,48px)}
.confiance li{border-top:1px solid var(--aluminium);padding-top:20px}
.confiance svg{width:28px;height:28px;fill:none;stroke:var(--graphite);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.confiance h3{font-size:18px;letter-spacing:-.015em;line-height:1.25;margin-bottom:8px}
.confiance p{color:var(--ardoise);font-size:15.5px}

/* vérification de l'e-mail par code (assets/verif.js) */
.verif-etape{display:grid;gap:10px}
.verif-etape label{font-size:15px;font-weight:500}
.verif-etape input{font:16px var(--sans);padding:12px 14px;border:1px solid var(--aluminium);border-radius:12px;background:var(--blanc);color:var(--graphite)}
.verif-etape input:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
#verif-code{font-size:24px;letter-spacing:.3em;font-variant-numeric:tabular-nums;max-width:220px}
.verif-etape .bouton{appearance:none;border:0;cursor:pointer;justify-self:start;margin-top:4px}
.verif-etape .bouton:disabled{opacity:.6;cursor:default}
.verif-liens{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:4px}
.verif-lien{appearance:none;background:none;border:0;padding:0;cursor:pointer;font:500 14.5px var(--sans);color:var(--graphite);text-decoration:underline;text-underline-offset:3px}
.verif-lien:disabled{color:var(--ardoise);text-decoration:none;cursor:default}
.verif-info{color:var(--ardoise);font-size:15px}
.verif-retour{min-height:1.4em;font-size:15px;margin-top:10px}
.verif-retour.erreur{color:#B42318}
.verif-piege{position:absolute;left:-9999px}

/* barre d'achat flottante (comme le bouton « Acheter » des pages produit
   d'Apple) : en bas à droite sur ordinateur, sur toute la largeur au téléphone */
.barre-achat{position:fixed;right:24px;bottom:24px;z-index:20;display:flex;animation:barre-in .35s ease-out;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 18px;border-radius:999px;
  background:color-mix(in srgb,var(--blanc) 86%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 10px 30px -10px rgba(0,0,0,.35),0 0 0 1px var(--aluminium)}
.barre-achat div{display:flex;flex-direction:column;line-height:1.2;font-size:15px}
.barre-achat span{color:var(--ardoise);font-size:13.5px}
.barre-achat .bouton{padding:10px 18px;font-size:15px}
@keyframes barre-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.barre-achat{animation:none}}

/* la scène du boîtier (illustration en attendant la photo) */
.scene{background:radial-gradient(90% 70% at 50% 18%,#1d1e22 0%,var(--laque) 62%);border-radius:28px;aspect-ratio:1/1.05;display:grid;place-items:center;position:relative;overflow:hidden}
.scene::after{content:"";position:absolute;left:0;right:0;bottom:12%;height:16%;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.65),transparent 70%)}
.boitier{width:min(58%,300px);aspect-ratio:94/119.5;border-radius:9% / 7%;position:relative;z-index:1;overflow:hidden;
  background:linear-gradient(162deg,#3a3b40 0%,#0d0d0f 34%,#050506 58%,#17171a 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 0 1px rgba(255,255,255,.05),inset 0 -10px 24px rgba(0,0,0,.6),0 34px 60px -20px rgba(0,0,0,.95)}
.boitier::before{content:"";position:absolute;inset:-25%;background:linear-gradient(116deg,transparent 40%,rgba(255,255,255,.12) 46%,rgba(255,255,255,.02) 51%,transparent 57%)}
.boitier .cm{position:absolute;left:50%;top:42%;width:34%;transform:translate(-50%,-50%);color:var(--gravure)}

/* ce que vous n'avez plus à faire */
.sans{padding-block:clamp(56px,8vw,112px);border-top:1px solid var(--aluminium)}
.sans h2{font-size:clamp(34px,4.6vw,58px);max-width:16ch}
.sans ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:clamp(36px,5vw,64px)}
.sans li{border-top:1px solid var(--graphite);padding-top:18px}
.sans h3{font-size:22px;letter-spacing:-.02em;line-height:1.2;margin-bottom:10px}
.sans p{color:var(--ardoise)}

/* le boîtier : fiche technique */
.nuit{background:var(--laque);color:var(--clair)}
.fiche{padding-block:clamp(64px,9vw,128px)}
.fiche .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,6vw,96px);align-items:start}
.fiche .sur-titre{color:var(--gravure)}
.fiche h2{font-size:clamp(34px,4.6vw,58px);margin-block:16px 22px}
.fiche .lead{color:var(--brume)}
.fiche dl{display:grid;grid-template-columns:minmax(110px,.42fr) 1fr}
.fiche dt,.fiche dd{padding-block:16px;border-top:1px solid #26272c}
.fiche dt{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--gravure);padding-top:19px}
.fiche dd{color:var(--clair)}
.fiche dd small{display:block;color:var(--brume);font-size:14.5px;margin-top:2px}

/* l'app */
.app-section{background:var(--encre);color:var(--clair);padding-block:clamp(64px,9vw,128px)}
.app-section .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,96px);align-items:center}
.app-section .sur-titre{color:var(--brume)}
.app-section h2{font-size:clamp(34px,4.6vw,58px);margin-block:16px 22px}
.app-section .lead{color:var(--brume)}
.app-section ul{list-style:none;padding:0;display:grid;gap:0;margin-top:34px;max-width:52ch}
.app-section li{padding-block:14px;border-top:1px solid #1E2742;color:var(--brume)}
.app-section li b{color:var(--clair);font-weight:500}
.telephone{justify-self:center;width:min(100%,330px);aspect-ratio:9/18.5;background:#05070f;border-radius:44px;padding:12px;box-shadow:0 0 0 1px #262d45,0 40px 80px -30px rgba(0,0,0,.8)}
.ecran{height:100%;border-radius:34px;background:var(--encre);padding:34px 16px 16px;display:flex;flex-direction:column;gap:10px;overflow:hidden;font-size:13px}
.ecran .salle{display:flex;justify-content:space-between;align-items:baseline;padding-inline:4px;margin-bottom:4px}
.ecran .salle b{font-size:17px;font-weight:600;letter-spacing:-.01em}
.ecran .salle span{color:var(--brume);font-size:12px}
.tranche{background:var(--tranche);border:1px solid #1E2742;border-radius:14px;padding:12px 14px}
.tranche.moi{border-color:#3a4a7a}
.tranche .haut{display:flex;justify-content:space-between;align-items:center}
.tranche .qui{font-weight:500;color:var(--clair)}
.etat{font-family:var(--mono);font-size:11px;display:inline-flex;align-items:center;gap:6px}
.etat::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.etat.joue{color:var(--joue)}.etat.relais{color:var(--relais)}
.curseur{height:4px;border-radius:2px;background:#1E2742;margin-top:12px;position:relative}
.curseur::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--v);background:var(--brume);border-radius:2px}
.curseur::after{content:"";position:absolute;top:50%;left:var(--v);width:14px;height:14px;border-radius:50%;background:var(--clair);transform:translate(-50%,-50%)}
.parler{margin-top:auto;border-radius:14px;background:linear-gradient(180deg,#ff5f8f,#d9366b);color:#fff;text-align:center;font-weight:600;padding:14px;font-size:14px}

/* fiabilité */
.preuves{padding-block:clamp(64px,9vw,128px)}
.preuves h2{font-size:clamp(40px,6vw,76px);margin-block:16px 0}
.preuves .grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,6vw,96px);margin-top:clamp(36px,5vw,64px)}
.preuve{padding-block:22px;border-top:1px solid var(--aluminium)}
.preuve h3{font-size:21px;letter-spacing:-.015em;line-height:1.25;margin-bottom:6px}
.preuve p{color:var(--ardoise)}

/* prix */
.prix{padding-block:0 clamp(64px,9vw,128px)}
.panneau{background:var(--blanc);border-radius:28px;padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px)}
.panneau h2{font-size:clamp(34px,4.4vw,54px);margin-block:14px 18px}
.offres{display:grid;gap:0;align-content:start}
.offre{display:grid;grid-template-columns:1fr auto;gap:4px 20px;padding-block:22px;border-top:1px solid var(--aluminium);align-items:baseline}
.offre:first-child{border-top:0;padding-top:4px}
.offre h3{font-size:20px;letter-spacing:-.015em;line-height:1.25}
.offre .montant{font-size:clamp(34px,4vw,44px);font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.offre p{grid-column:1/-1;color:var(--ardoise);font-size:15.5px}
.panneau .actions{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;margin-top:30px}
.montant.a-venir{font-size:17px;font-weight:500;letter-spacing:0;color:var(--ardoise)}
.cloture{margin-top:22px;font-size:15.5px;color:var(--graphite);max-width:46ch}
.note{font-size:14.5px;color:var(--ardoise);margin-top:18px;max-width:46ch}

/* pied */
footer{background:var(--laque);color:var(--brume);padding-block:56px 112px}  /* bas : place pour le bouton « Acheter » flottant */
footer .wrap{display:grid;grid-template-columns:auto 1fr;gap:28px 24px;align-items:center}
footer .cm{width:42px;color:var(--gravure)}
footer p{color:var(--clair);font-size:18px;letter-spacing:-.01em}
footer .plan{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,max-content);gap:28px clamp(48px,9vw,128px);padding-block:8px 6px}
footer .plan h2{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:#8b8f97;margin-bottom:14px}
footer .plan ul{list-style:none;padding:0;display:grid;gap:10px;font-size:14.5px}
footer a{text-decoration:none}
footer a:hover{color:var(--clair)}
footer small{grid-column:1/-1;font-size:13px;color:#6b7280;border-top:1px solid #26272c;padding-top:22px}
footer small .liens-legaux{display:inline-flex;flex-wrap:wrap;gap:6px 18px;margin-left:18px}
footer small .liens-legaux a{color:inherit}
footer small .liens-legaux a:hover{color:var(--clair)}

@media (max-width:900px){
  .scene-heros{aspect-ratio:4/3.4}
  .scene-heros .flotte{width:min(42%,260px)}
  .confiance ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .musicien{font-size:12px;transform:translate(-50%,24px)}
  .fiche .wrap,.app-section .wrap,.panneau{grid-template-columns:1fr}
  .sans ul{grid-template-columns:1fr}
  .preuves .grille{grid-template-columns:1fr}
  .scene{aspect-ratio:1/.9}
  footer .plan{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
}
@media (max-width:560px){
  footer small .liens-legaux{display:flex;margin:10px 0 0}
  .nav ul li:not(.mobile){display:none}
  .nav .compte-nav span{display:none}
  .nav .compte-nav svg{width:22px;height:22px}
  .fiche dl{grid-template-columns:1fr}
  .fiche dd{border-top:0;padding-top:0}
  .offre{grid-template-columns:1fr}
  .barre-achat{left:12px;right:12px;bottom:12px}
  .confiance ul{grid-template-columns:1fr}
  .musicien{font-size:11px}
  .musicien b{display:block;margin:0}
  .scene-infos{justify-content:center;text-align:center}
  .annonce{font-size:13px}
  .annonce .long{display:none}
}