/* =====================================================================
   NOVA SPHERE — feuille de style
   Toutes les couleurs sont rangées ici, en haut, dans des « variables ».
   Pour le futur thème sombre, il suffira de redéfinir ces variables.
   ===================================================================== */

:root {
  /* Couleurs tirées des rendus 3D d'Issa */
  --halo:   #f4f3f8;  /* blanc lavande, le fond */
  --givre:  #c9ccf0;  /* bleu pervenche très pâle */
  --ultra:  #3b3fd8;  /* bleu roi saturé */
  --abysse: #0a0b2e;  /* bleu nuit, presque noir : le texte */
  --lagon:  #3fc6d9;  /* turquoise, par petites touches */
  --ciel:   #7fa8f5;  /* bleu clair */
  --violet: #7a3cf0;  /* violet électrique */

  /* Polices */
  --police-titre: "Michroma", "Arial Black", sans-serif;
  --police-texte: "Sora", system-ui, sans-serif;

  /* Mouvement : un ralenti doux, sans à-coups */
  --glisse: cubic-bezier(0.19, 1, 0.22, 1);

  /* Marges sur les bords de l'écran */
  --marge: clamp(16px, 3vw, 40px);
  --bord-globe: 14px; /* distance entre le globe (en haut à gauche) et le bord de l'écran */

  /* Curseurs rétro en pixel art (style Windows 98/2000), un peu plus grands que la normale.
     Les deux nombres = la « pointe » du curseur (le point qui clique), en pixels. */
  --curseur: url("../images/curseurs/fleche.svg") 0 0, auto;
  --curseur-main: url("../images/curseurs/main.svg") 6 0, pointer;
}

/* La flèche partout sur le site… */
html { cursor: var(--curseur); }
/* … la main qui pointe sur tout ce qui se clique… */
a, button, label, select, summary, input[type="range"], input[type="file"] { cursor: var(--curseur-main); }
/* … et la barre de texte habituelle dans les champs à remplir */
input:not([type="range"]):not([type="file"]):not([type="hidden"]), textarea { cursor: text; }

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  color: var(--abysse);
  font-family: var(--police-texte);
  font-weight: 400;
  /* Fond de secours si l'animation ne peut pas tourner (vieux navigateur) */
  background:
    radial-gradient(60% 70% at 72% 35%, var(--violet), transparent 70%),
    radial-gradient(50% 60% at 20% 80%, var(--ultra), transparent 70%),
    var(--ciel);
}

/* ---------- Fond animé ---------- */
#fond {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Grain « à l'ancienne » posé sur tout l'écran.
   C'est une petite texture de bruit générée par le navigateur (SVG). */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.22;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.04 0 0 0 0 0.05 0 0 0 0 0.18 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- Barre du haut ---------- */
.barre {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Globe collé près du bord gauche (place gagnée pour le mini-lecteur) */
  padding: 12px var(--marge) 12px var(--bord-globe);
}

/* ---------- Fenêtre « NS Network » sous le globe (au survol seulement) ---------- */
.globe-zone { position: relative; }
.ns-network {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 8px; /* espace « invisible » : la souris peut descendre du globe à la fenêtre sans la fermer */
  width: 176px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.5s var(--glisse), visibility 0.3s;
}
/* Ouverte au survol de la souris, ou quand on arrive dessus à la touche Tab (pas après un simple clic) */
.globe-zone:hover .ns-network,
.globe-zone:has(:focus-visible) .ns-network {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.ns-network-titre {
  margin: 0;
  padding: 5px 12px;
  font-family: var(--police-titre);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--halo);
  border-radius: 10px 10px 0 0;
  background: linear-gradient(90deg, var(--abysse), var(--ultra) 70%, var(--violet));
}
.ns-network-corps {
  display: grid;
  gap: 6px;
  padding: 10px;
  border-radius: 0 0 10px 10px;
  background: rgb(244 243 248 / 0.85);
  backdrop-filter: blur(14px);
  border: 1px solid rgb(255 255 255 / 0.7);
  border-top: 0;
  box-shadow: 0 10px 24px rgb(10 11 46 / 0.3);
}
.ns-bouton {
  font: inherit;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--abysse);
  background: transparent;
  border: 1px solid rgb(10 11 46 / 0.45);
  cursor: var(--curseur-main);
  transition: background 0.3s ease, color 0.3s ease;
}
.ns-bouton:hover { background: rgb(10 11 46 / 0.08); }
.ns-bouton-plein { background: var(--abysse); color: var(--halo); border-color: var(--abysse); }
.ns-bouton-plein:hover { background: var(--ultra); }
.ns-network-note { margin: 0; font-size: 12px; color: var(--ultra); }
.ns-network-note:empty { display: none; }
/* Écrans tactiles (pas de survol possible) : la fenêtre ne s'affiche pas */
@media (hover: none) { .ns-network { display: none; } }

/* Le globe 3D qui tourne (dessiné par js/menu.js) */
.barre-logo { display: block; border-radius: 50%; }
.barre-logo .globe {
  display: block;
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 3px 8px rgb(10 11 46 / 0.35));
}

/* Bouton en forme de pilule (Menu / Close) */
.pilule {
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--abysse);
  background: rgb(244 243 248 / 0.35);
  border: 1px solid rgb(10 11 46 / 0.55);
  border-radius: 999px;
  padding: 10px 28px;
  cursor: var(--curseur-main);
  backdrop-filter: blur(8px);
  transition: background 0.4s ease, color 0.4s ease;
}
.pilule:hover {
  background: var(--abysse);
  color: var(--halo);
}

/* Contour visible quand on navigue au clavier (accessibilité) */
:focus-visible {
  outline: 2px solid var(--ultra);
  outline-offset: 4px;
}

/* ---------- Centre : le logo cliquable ---------- */
.page-accueil { overflow: hidden; } /* l'accueil tient sur un seul écran */

.accueil {
  position: relative;
  z-index: 5;
  height: 100%;
  display: grid;
  place-items: center;
  padding: var(--marge);
}

.entree {
  /* On retire l'apparence par défaut d'un bouton */
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: var(--curseur-main);
  display: grid;
  justify-items: center;
  gap: 8px;
  --taille: clamp(340px, 60vw, 860px);
}

.entree-logo {
  width: var(--taille);
  height: auto;
  /* L'image a beaucoup de vide en haut et en bas : on le compense */
  margin-block: calc(var(--taille) * -0.25);
  /* Chrome plus contrasté + fin contour bleu nuit + halo sombre : le nom se lit tout de suite */
  filter: contrast(1.25) saturate(1.3)
          drop-shadow(0 0 1.5px rgb(10 11 46 / 0.95))
          drop-shadow(0 0 26px rgb(10 11 46 / 0.55));
  transition: transform 1.2s var(--glisse);
}
.entree:hover .entree-logo { transform: scale(1.03); }

.entree-texte {
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 8px 22px;
  border-radius: 999px;
  border: 1px solid rgb(10 11 46 / 0.35);
  background: rgb(244 243 248 / 0.35);
  backdrop-filter: blur(8px);
  transition: background 0.4s ease, color 0.4s ease;
}
.entree:hover .entree-texte {
  background: var(--abysse);
  color: var(--halo);
}

/* Petite phrase en bas à gauche */
.signature {
  position: fixed;
  left: var(--marge);
  bottom: var(--marge);
  z-index: 5;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--halo);
  text-shadow: 0 1px 8px rgb(10 11 46 / 0.6); /* reste lisible sur les zones claires */
}
/* Dans le menu (fond clair), la petite phrase repasse en bleu nuit */
.menu .signature { color: var(--abysse); text-shadow: none; }

/* ---------- Menu plein écran ---------- */
.menu {
  /* <dialog> prend tout l'écran */
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--abysse);
  /* Effet « verre dépoli » : on voit l'animation floutée derrière */
  background: rgb(244 243 248 / 0.55);
  backdrop-filter: blur(28px) saturate(1.4);
}
.menu::backdrop { background: transparent; }

.menu[open] { animation: apparait 0.9s var(--glisse); }

@keyframes apparait {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.menu-liens {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(4px, 1.2vh, 14px);
  padding: 96px var(--marge);
}

.menu-liens a {
  font-family: var(--police-titre);
  /* La taille suit la largeur ET la hauteur de l'écran : les 8 rubriques tiennent toujours */
  font-size: clamp(30px, min(7vw, 8vh), 88px);
  line-height: 1.05;
  color: var(--abysse);
  text-decoration: none;
  width: fit-content;
  transition: color 0.4s ease, transform 0.9s var(--glisse);
}
.menu-liens a:hover,
.menu-liens a:focus-visible {
  color: var(--ultra);
  transform: translateX(0.3em);
}
/* La rubrique où l'on se trouve : en bleu, avec l'étoile du logo */
.menu-liens a[aria-current="page"] { color: var(--ultra); }
.menu-liens a[aria-current="page"]::after { content: " ✦"; font-size: 0.5em; vertical-align: super; }

/* Les liens du menu arrivent l'un après l'autre à l'ouverture */
.menu[open] .menu-liens a { animation: glisse-entree 1s var(--glisse) both; }
.menu[open] .menu-liens a:nth-child(2) { animation-delay: 0.05s; }
.menu[open] .menu-liens a:nth-child(3) { animation-delay: 0.10s; }
.menu[open] .menu-liens a:nth-child(4) { animation-delay: 0.15s; }
.menu[open] .menu-liens a:nth-child(5) { animation-delay: 0.20s; }
.menu[open] .menu-liens a:nth-child(6) { animation-delay: 0.25s; }

@keyframes glisse-entree {
  from { opacity: 0; transform: translateY(0.6em); }
  to   { opacity: 1; transform: none; }
}

/* =====================================================================
   PAGES INTÉRIEURES (Bio, Music, Videos, Dates, Contact)
   Même fond animé ; le contenu est posé dans une « fenêtre » de verre,
   avec une barre de titre dégradée façon interface de l'an 2000.
   ===================================================================== */
.contenu {
  position: relative;
  z-index: 5;
  max-width: 920px;
  margin: 0 auto;
  padding: 140px var(--marge) 120px;
}

.titre {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: clamp(52px, 10vw, 136px);
  line-height: 1;
  margin: 0 0 32px;
  color: var(--halo);
  text-shadow: 0 2px 24px rgb(10 11 46 / 0.45);
}

.fenetre {
  background: rgb(244 243 248 / 0.8);
  backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid rgb(255 255 255 / 0.7);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgb(10 11 46 / 0.3);
}

/* Barre de titre de la fenêtre : nom de fichier + rayures */
.fenetre-barre {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--halo);
  background: linear-gradient(90deg, var(--abysse), var(--ultra) 70%, var(--violet));
}
.fenetre-barre::after {
  content: "";
  margin-left: auto;
  width: 64px;
  height: 10px;
  background: repeating-linear-gradient(-60deg, var(--halo) 0 3px, transparent 3px 8px);
  opacity: 0.8;
}

.fenetre-corps {
  padding: clamp(24px, 4vw, 48px);
  font-size: 17px;
  line-height: 1.65;
}
.fenetre-corps > p { max-width: 62ch; margin: 0 0 1em; }
.fenetre-corps > p:last-child { margin-bottom: 0; }
.fenetre-corps a:not(.pilule) { color: var(--ultra); }

/* Liste des sorties (page Music) : grandes covers, chacune mène à la page de l'album */
.sorties {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 36px 28px;
}
.fenetre-corps .sortie a { color: inherit; text-decoration: none; display: block; }
.sortie img { transition: transform 0.9s var(--glisse), box-shadow 0.9s var(--glisse); }
.sortie a:hover img,
.sortie a:focus-visible img {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 40px rgb(59 63 216 / 0.4);
}
.sortie p { margin: 4px 0 0; font-size: 14px; color: rgb(10 11 46 / 0.7); }
.sortie img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 12px 30px rgb(10 11 46 / 0.25);
}
.sortie h2 {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.3;
  margin: 14px 0 0;
}

/* Liste de liens (page Contact) */
.liens-contact {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* La pilule sert aussi de lien d'action dans les pages */
a.pilule { display: inline-block; text-decoration: none; }

/* ---------- Page d'un album ---------- */
/* Titres d'album parfois longs : un peu plus petits, et lignes équilibrées */
#fiche-album .titre { font-size: clamp(38px, 8vw, 120px); text-wrap: balance; }
.retour { margin: 0 0 8px; }
.retour a {
  color: var(--halo);
  text-decoration: none;
  text-shadow: 0 1px 6px rgb(10 11 46 / 0.6);
}
.retour a:hover { text-decoration: underline; }

.fenetre-corps.album {
  display: grid;
  grid-template-columns: minmax(0, 380px) 1fr;
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}
.album-pochette {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgb(10 11 46 / 0.35);
}
/* Description, sous la cover */
.album-description { margin: 20px 0 0; font-size: 16px; line-height: 1.6; }

/* En-tête de la colonne de droite : bouton rond + infos */
.album-entete { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.album-infos { margin: 0; font-size: 14px; font-weight: 600; color: var(--ultra); }

/* Bouton rond lecture / pause : une petite sphère de verre bleue */
.rond-lecture {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  cursor: var(--curseur-main);
  color: #fff;
  border: 2px solid rgb(255 255 255 / 0.8);
  background: radial-gradient(circle at 35% 28%, #fff 0 7%, #9fd4ff 20%, var(--ultra) 58%, var(--abysse) 100%);
  box-shadow: 0 8px 22px rgb(59 63 216 / 0.45), inset 0 -6px 12px rgb(63 198 217 / 0.6);
  transition: transform 0.6s var(--glisse), box-shadow 0.6s var(--glisse);
}
.rond-lecture:hover { transform: scale(1.06); box-shadow: 0 10px 30px rgb(59 63 216 / 0.6), inset 0 -6px 12px rgb(63 198 217 / 0.8); }
.rond-lecture svg { width: 46%; height: 46%; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.5)); }
.rond-lecture .icone-pause,
.rond-lecture.joue .icone-play { display: none; }
.rond-lecture.joue .icone-pause { display: block; }

/* Liste des morceaux, avec la durée alignée à droite */
.album-pistes {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: piste;
  border-top: 1px solid rgb(10 11 46 / 0.15);
}
.album-pistes li { border-bottom: 1px solid rgb(10 11 46 / 0.15); }
/* Chaque morceau est un bouton : un clic le lance dans le mini-lecteur */
.album-pistes button {
  width: 100%;
  display: flex;
  gap: 12px;
  padding: 9px 6px;
  font: inherit;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: var(--curseur-main);
}
.album-pistes button:hover { background: rgb(59 63 216 / 0.08); }
.album-pistes button[aria-current="true"] { background: rgb(59 63 216 / 0.14); color: var(--ultra); font-weight: 600; }
.album-pistes .numero { min-width: 2ch; color: rgb(10 11 46 / 0.5); font-variant-numeric: tabular-nums; }
.album-pistes .duree { margin-left: auto; font-variant-numeric: tabular-nums; color: rgb(10 11 46 / 0.7); }

/* =====================================================================
   MINI-LECTEUR (pages d'album) : capsule fixée en haut à gauche,
   même métal graphite et mêmes boutons bleus que le grand lecteur
   ===================================================================== */
.mini {
  position: fixed;
  top: 12px;
  left: calc(var(--bord-globe) + 66px); /* juste à droite du globe */
  z-index: 20;
  width: min(560px, calc(100vw - var(--bord-globe) - 66px - 120px));
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 12px 6px;
  border-radius: 30px;
  color: var(--halo);
  border: 1.5px solid #14172b;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.45) 0%, rgb(255 255 255 / 0) 45%),
    linear-gradient(180deg, #9aa1c6 0%, #555c82 55%, #2e3352 100%);
  box-shadow: 0 10px 30px rgb(10 11 46 / 0.45);
  animation: apparait 0.6s var(--glisse);
}
.mini[hidden] { display: none; }
.mini-pochette { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #14172b; object-fit: cover; flex-shrink: 0; }
.mini.joue .mini-pochette { animation: tourne-disque 6s linear infinite; } /* la pochette tourne comme un CD */
@keyframes tourne-disque { to { transform: rotate(360deg); } }

.mini-bt,
.mini-fermer {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  cursor: var(--curseur-main);
  color: #cfe9ff;
  border: 1px solid rgb(159 208 255 / 0.6);
  background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / 0.5) 0 10%, rgb(63 124 255 / 0.6) 45%, rgb(11 26 110 / 0.9) 100%);
}
.mini-bt { width: 30px; height: 30px; }
.mini-bt svg { width: 50%; height: 50%; }
.mini-lecture {
  width: 40px;
  height: 40px;
  color: #fff;
  border: 2px solid rgb(255 255 255 / 0.75);
  background: radial-gradient(circle at 35% 28%, #fff 0 7%, #9fd4ff 20%, var(--ultra) 58%, var(--abysse) 100%);
  box-shadow: 0 0 12px rgb(63 124 255 / 0.7);
}
.mini-lecture .icone-pause,
.mini.joue .mini-lecture .icone-play { display: none; }
.mini.joue .mini-lecture .icone-pause { display: block; }
.mini-bt:hover, .mini-fermer:hover { filter: brightness(1.2); }

.mini-infos { flex: 1; min-width: 0; }
.mini-infos p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-titre { font-size: 13px; font-weight: 600; text-shadow: 0 1px 2px rgb(0 0 0 / 0.5); }
.mini-temps { font-size: 12px; color: #9fe8ff; font-variant-numeric: tabular-nums; }

.mini-volume { display: flex; align-items: center; gap: 4px; color: #cfe9ff; }
.mini-volume svg { width: 16px; height: 16px; }
.mini-volume input { width: 70px; }
.mini-fermer { width: 22px; height: 22px; }
.mini-fermer svg { width: 55%; height: 55%; }

/* Barre de progression : une fine rainure le long du bas de la capsule */
.mini-avance {
  position: absolute;
  left: 54px;
  right: 22px;
  bottom: 4px;
  margin: 0;
}

/* Glissières du mini-lecteur (progression, volume) */
.mini input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  cursor: var(--curseur-main);
  background:
    linear-gradient(90deg, var(--lagon), var(--ultra)) 0 0 / var(--rempli, 0%) 100% no-repeat,
    #0b0d22;
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.7);
}
.mini input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #0a0d33;
  background: radial-gradient(circle at 40% 30%, #fff 0 20%, #9fd0ff 45%, #2f45c9 90%);
}
.mini input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #0a0d33;
  background: radial-gradient(circle at 40% 30%, #fff 0 20%, #9fd0ff 45%, #2f45c9 90%);
}

/* Téléphone : on garde l'essentiel (pas de volume ni de bouton précédent) */
@media (max-width: 600px) {
  .mini { left: calc(var(--bord-globe) + 54px); width: calc(100vw - var(--bord-globe) - 54px - 112px); gap: 6px; padding-right: 8px; }
  .mini-pochette, .mini-volume, #mini-prec { display: none; }
  .mini-avance { left: 10px; right: 10px; }
}

/* Sortie précédente / suivante */
.album-navigation {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
}
.album-navigation .nav-suivant { margin-left: auto; }

@media (max-width: 700px) {
  .fenetre-corps.album { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .mini.joue .mini-pochette { animation: none; }
}

/* ---------- Vidéo YouTube (page Videos) ---------- */
.video { aspect-ratio: 16 / 9; margin: 0 0 24px; }
.video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 12px;
}

/* ---------- Liste des réseaux sociaux ---------- */
.reseaux {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.reseaux .pilule {
  display: block;
  text-align: center;
  font-family: var(--police-titre);
  font-size: 16px;
  padding: 18px 24px;
}

/* ---------- Formulaire de contact ---------- */
.formulaire { display: grid; gap: 18px; max-width: 640px; }
.formulaire label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.formulaire input,
.formulaire textarea {
  font: inherit;
  font-size: 16px; /* 16 px minimum : évite le zoom automatique sur iPhone */
  font-weight: 400;
  color: var(--abysse);
  background: rgb(255 255 255 / 0.7);
  border: 1px solid rgb(10 11 46 / 0.3);
  border-radius: 10px;
  padding: 12px 14px;
}
.formulaire textarea { min-height: 180px; resize: vertical; }
.formulaire input[type="file"] { padding: 10px; }
.formulaire .aide { font-weight: 400; font-size: 13px; color: rgb(10 11 46 / 0.7); }
.formulaire .pilule { justify-self: start; }
.cache { display: none; } /* piège à robots, invisible pour les humains */

/* Pièces jointes : un bouton + la liste des fichiers choisis */
.pieces { display: grid; gap: 10px; justify-items: start; }
.pieces-titre { font-size: 14px; font-weight: 600; }
.bouton-fichiers { position: relative; }
.bouton-fichiers:focus-within { outline: 2px solid var(--ultra); outline-offset: 4px; }
/* Caché à l'œil mais toujours utilisable au clavier et par les lecteurs d'écran */
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.liste-fichiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; }
.liste-fichiers:empty { display: none; }
.liste-fichiers li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgb(255 255 255 / 0.6);
  border: 1px solid rgb(10 11 46 / 0.15);
  overflow-wrap: anywhere;
}
.retirer {
  font: inherit;
  font-size: 13px;
  color: var(--ultra);
  background: none;
  border: 0;
  cursor: var(--curseur-main);
  text-decoration: underline;
  flex-shrink: 0;
}
.message-info {
  padding: 14px 18px;
  border-radius: 10px;
  background: rgb(59 63 216 / 0.12);
  border: 1px solid rgb(59 63 216 / 0.4);
}
.message-info[hidden] { display: none; }

/* =====================================================================
   INTRO DE L'ACCUEIL (js/intro.js)
   « intro-attente » : seulement le fond, flouté, + « Click to start »
   « intro-lancee »  : tout apparaît par étapes (les délais sont ici)
   ===================================================================== */
.intro-attente #fond,
.intro-attente .accueil,
.intro-attente .signature,
.intro-attente .barre,
.intro-attente .mini { pointer-events: none; }

/* 1. Le fond : flouté au départ, net en ~4,5 s */
.intro-attente #fond { filter: blur(22px) saturate(1.25); transform: scale(1.08); }
.intro-lancee #fond { transition: filter 4.5s ease, transform 4.5s cubic-bezier(0.19, 1, 0.22, 1); }

/* « Hello World ^^ » : s'écrit au centre comme sur un vieux terminal, puis s'efface */
.intro-hello {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex; /* le texte et le curseur restent côte à côte, au centre */
  align-items: center;
  justify-content: center;
  margin: 0;
  white-space: pre;
  font-family: "Share Tech Mono", monospace;
  font-size: clamp(28px, 4vw, 52px);
  color: var(--halo);
  text-shadow: 0 0 14px rgb(63 198 217 / 0.9), 0 0 2px #fff;
  pointer-events: none;
  transition: opacity 1s ease, filter 1s ease, transform 1.2s var(--glisse);
}
.intro-hello::after { content: "_"; animation: clignote 0.8s steps(1) infinite; } /* curseur qui clignote */
.intro-hello.efface { opacity: 0; filter: blur(8px); transform: scale(1.08); }
@keyframes clignote { 50% { opacity: 0; } }

/* 2. Le logo : apparaît en douceur juste après « Hello World » (à partir de 2,6 s) */
/* (mêmes filtres que le logo normal + un flou, pour que le passage de l'un à l'autre soit fluide) */
.intro-attente .entree-logo {
  opacity: 0;
  transform: scale(0.9);
  filter: contrast(1.25) saturate(1.3)
          drop-shadow(0 0 1.5px rgb(10 11 46 / 0.95))
          drop-shadow(0 0 26px rgb(10 11 46 / 0.55)) blur(10px);
}
.intro-lancee .entree-logo {
  transition: opacity 2.4s ease 2.6s, transform 3s cubic-bezier(0.19, 1, 0.22, 1) 2.6s, filter 2.4s ease 2.6s;
}

/* 3. Le reste (bouton Enter, phrase du bas, menu, globe) : à partir de 4 s */
.intro-attente .entree-texte,
.intro-attente .signature,
.intro-attente .barre { opacity: 0; visibility: hidden; }
.intro-lancee .entree-texte,
.intro-lancee .signature,
.intro-lancee .barre { transition: opacity 1.4s ease 4s, visibility 0s linear 4s; }

/* Écran de départ : « Click to start » */
.intro-depart {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  transition: opacity 0.8s ease;
}
.intro-depart.disparait { opacity: 0; pointer-events: none; }
.intro-bouton {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 30px;
  font-family: var(--police-titre);
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--halo);
  border: 1px solid rgb(255 255 255 / 0.55);
  border-radius: 999px;
  background: rgb(10 11 46 / 0.25);
  backdrop-filter: blur(10px);
  cursor: var(--curseur-main);
  animation: respire 2.4s ease-in-out infinite;
}
.intro-bouton:hover { background: rgb(10 11 46 / 0.45); }
/* Petites barres d'égaliseur qui dansent : « il y a du son » */
.intro-son { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.intro-son i { width: 3px; background: var(--halo); border-radius: 2px; animation: barre-son 0.9s ease-in-out infinite alternate; }
.intro-son i:nth-child(2) { animation-delay: -0.3s; }
.intro-son i:nth-child(3) { animation-delay: -0.6s; }
.intro-son i:nth-child(4) { animation-delay: -0.15s; }
@keyframes barre-son { from { height: 4px; } to { height: 16px; } }
@keyframes respire { 50% { box-shadow: 0 0 28px rgb(159 232 255 / 0.45); } }
.intro-sans-son {
  font: inherit;
  font-size: 13px;
  color: rgb(244 243 248 / 0.8);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: var(--curseur-main);
}
.intro-sans-son:hover { color: var(--halo); }

@media (prefers-reduced-motion: reduce) {
  .intro-bouton, .intro-son i, .intro-hello::after { animation: none !important; }
  .intro-son i { height: 10px; }
}

/* ---------- Petits écrans (téléphones) ---------- */
@media (max-width: 600px) {
  .barre-logo .globe { width: 46px; height: 46px; }
  .pilule { padding: 9px 22px; }
  .contenu { padding-top: 110px; }
  .sorties { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
  .fenetre-corps { font-size: 16px; }
}

/* La phrase du bas est masquée dans le menu sur les écrans peu hauts (8 rubriques) */
@media (max-height: 700px) {
  .menu .signature { display: none; }
}

/* ---------- Animations désactivées par l'utilisateur ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* =====================================================================
   PAGE EN CONSTRUCTION (Bio, Videos, Samples & Presets, Merch)
   Barre de chargement rayée, façon installateur des années 2000
   ===================================================================== */
.chantier { display: grid; justify-items: center; gap: 18px; padding: 28px 0 18px; text-align: center; }
.chantier-titre {
  margin: 0;
  font-family: var(--police-titre);
  font-size: clamp(18px, 3vw, 26px);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ultra);
}
.chantier-barre {
  width: min(360px, 100%);
  height: 22px;
  padding: 3px;
  border-radius: 12px;
  border: 1px solid rgb(10 11 46 / 0.35);
  background: linear-gradient(180deg, #fff, var(--givre));
  box-shadow: inset 0 1px 3px rgb(10 11 46 / 0.25);
}
.chantier-barre span {
  display: block;
  height: 100%;
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.55) 0 40%, rgb(255 255 255 / 0) 60%),
    repeating-linear-gradient(-45deg, var(--ultra) 0 12px, var(--ciel) 12px 24px);
  background-size: 100% 100%, 34px 34px;
  animation: chantier-defile 1s linear infinite;
}
@keyframes chantier-defile { to { background-position: 0 0, 34px 0; } }
.chantier-texte { margin: 0; color: rgb(10 11 46 / 0.75); }

@media (prefers-reduced-motion: reduce) {
  .chantier-barre span { animation: none; }
}