/* ==========================================================================
   Nineteen Fifty Stars — composants
   Vocabulaire visuel réutilisable. Dépend de socle.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Boutons
   Un bouton néon : le trait s'allume, la lueur monte, rien ne bouge en layout.
   -------------------------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-6);
  font-family: var(--titre);
  font-weight: 600;
  font-size: var(--t-petit);
  letter-spacing: 0.02em;
  color: var(--blanc-neon);
  background: transparent;
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon-pill);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  isolation: isolate;
  transition:
    border-color var(--duree-courte) var(--doux),
    box-shadow    var(--duree-courte) var(--doux),
    color         var(--duree-courte) var(--doux);
}

/* La lueur vit dans un pseudo-élément : on anime son opacité, pas un filtre. */
.bouton::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--bleu-lueur) 45%, transparent) 0%,
    transparent 72%);
  opacity: 0;
  transition: opacity var(--duree) var(--doux);
}

.bouton:hover,
.bouton:focus-visible {
  border-color: var(--bleu);
  box-shadow: 0 0 22px color-mix(in srgb, var(--bleu-lueur) 38%, transparent);
}
.bouton:hover::before,
.bouton:focus-visible::before { opacity: 1; }

.bouton:active { transform: translateY(1px); }

/* Variante principale : le trait est déjà allumé. */
.bouton--plein {
  border-color: var(--bleu);
  background: color-mix(in srgb, var(--bleu-lueur) 14%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--bleu-lueur) 24%, transparent);
}
.bouton--plein:hover,
.bouton--plein:focus-visible {
  background: color-mix(in srgb, var(--bleu-lueur) 24%, transparent);
  box-shadow: 0 0 34px color-mix(in srgb, var(--bleu-lueur) 48%, transparent);
}

.bouton--rose { border-color: color-mix(in srgb, var(--rose) 42%, transparent); }
.bouton--rose::before {
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--rose-lueur) 45%, transparent) 0%,
    transparent 72%);
}
.bouton--rose:hover,
.bouton--rose:focus-visible {
  border-color: var(--rose);
  box-shadow: 0 0 22px color-mix(in srgb, var(--rose-lueur) 38%, transparent);
}

/* --------------------------------------------------------------------------
   Surtitres
   -------------------------------------------------------------------------- */

.surtitre {
  display: block;
  font-family: var(--titre);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bleu);
  margin-bottom: var(--e-4);
}
.surtitre--rose { color: var(--rose); }

/* --------------------------------------------------------------------------
   Cartes
   -------------------------------------------------------------------------- */

.carte {
  position: relative;
  padding: var(--e-6);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background:
    linear-gradient(180deg, var(--voile), transparent 60%),
    var(--nuit-2);
  transition:
    border-color var(--duree) var(--doux),
    transform    var(--duree) var(--sortie);
}
.carte:hover { border-color: var(--trait-fort); }

/* Le liseré supérieur : une ligne de néon posée sur l'arête de la carte. */
.carte--liseré::after {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 1px;
  border-radius: var(--rayon) var(--rayon) 0 0;
  background: linear-gradient(90deg,
    transparent, var(--bleu) 22%, var(--rose) 78%, transparent);
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   Cadres d'appareil
   Les captures du jeu et de l'application sont claires et colorées, à
   l'opposé du fond nuit. Plutôt que de les atténuer, on les encadre dans un
   écran qui rayonne : un néon éclaire ce qui l'entoure, le contraste devient
   l'effet recherché.
   -------------------------------------------------------------------------- */

.appareil {
  --cadre: 10px;
  position: relative;
  display: block;
  width: 100%;
  max-width: 280px;
  margin-inline: auto;
  padding: var(--cadre);
  border-radius: 34px;
  background: linear-gradient(160deg, var(--nuit-3), var(--nuit));
  border: 1px solid var(--trait-fort);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--bleu-lueur) 18%, transparent),
    0 0 40px color-mix(in srgb, var(--bleu-lueur) 26%, transparent),
    0 24px 60px rgb(0 0 0 / 0.55);
}

.appareil img {
  width: 100%;
  border-radius: 24px;
  display: block;
}

/* Pas d'encoche dessinée : les captures d'écran contiennent déjà la barre
   d'état et l'encoche réelles de l'appareil. En ajouter une ferait doublon. */

/* La lumière que l'écran projette au sol. */
.appareil::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 100%;
  height: 64px;
  background: radial-gradient(ellipse at 50% 0%,
    color-mix(in srgb, var(--bleu) 42%, transparent) 0%,
    color-mix(in srgb, var(--bleu-lueur) 18%, transparent) 45%,
    transparent 72%);
  filter: blur(16px);
  pointer-events: none;
}

.appareil--tablette {
  --cadre: 12px;
  max-width: 520px;
  border-radius: 26px;
}
.appareil--tablette img { border-radius: 16px; }

.appareil--rose {
  border-color: color-mix(in srgb, var(--rose) 42%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--rose-lueur) 20%, transparent),
    0 0 40px color-mix(in srgb, var(--rose-lueur) 28%, transparent),
    0 24px 60px rgb(0 0 0 / 0.55);
}
.appareil--rose::after {
  background: radial-gradient(ellipse at 50% 0%,
    color-mix(in srgb, var(--rose) 42%, transparent) 0%,
    color-mix(in srgb, var(--rose-lueur) 18%, transparent) 45%,
    transparent 72%);
}

/* --------------------------------------------------------------------------
   Formulaire
   -------------------------------------------------------------------------- */

.champ { margin-bottom: var(--e-5); }

.champ label {
  display: block;
  font-family: var(--titre);
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--texte);
  margin-bottom: var(--e-2);
}

.champ .aide {
  display: block;
  font-size: var(--t-micro);
  color: var(--texte-faible);
  margin-top: var(--e-2);
  font-family: var(--corps);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.champ input,
.champ textarea,
.champ select {
  width: 100%;
  padding: var(--e-3) var(--e-4);
  background: var(--nuit);
  color: var(--texte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-sm);
  transition: border-color var(--duree-courte) var(--doux),
              box-shadow   var(--duree-courte) var(--doux);
}

.champ textarea { min-height: 8rem; resize: vertical; }

.champ input:hover,
.champ textarea:hover,
.champ select:hover { border-color: var(--trait-fort); }

.champ input:focus,
.champ textarea:focus,
.champ select:focus {
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bleu-lueur) 22%, transparent);
  /* L'anneau ci-dessus fait office d'indicateur : on évite le doublon visuel,
     mais focus-visible du socle reste actif pour la navigation au clavier. */
  outline: none;
}

/* Erreur : jamais la couleur seule — un texte l'accompagne toujours. */
.champ[data-erreur] input,
.champ[data-erreur] textarea {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose-lueur) 22%, transparent);
}
.champ .erreur {
  display: block;
  margin-top: var(--e-2);
  font-size: var(--t-petit);
  color: var(--rose);
}

/* --------------------------------------------------------------------------
   Animations d'entrée
   L'état masqué n'est posé QUE si le JS a pris la main : sans JavaScript,
   le contenu reste visible. C'est la règle qui évite la page blanche.
   -------------------------------------------------------------------------- */

.js [data-anime] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  will-change: opacity, transform;
}

/* Une fois l'entrée jouée, on relâche will-change : le garder coûte de la
   mémoire GPU pour rien sur les longues pages. */
.js [data-anime].vu { will-change: auto; }

/* --------------------------------------------------------------------------
   Téléphone
   Le numéro est inséré par assets/js/telephone.js ; ces liens restent masqués
   tant que le script ne les a pas remplis.
   -------------------------------------------------------------------------- */

.tel {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  color: var(--bleu);
  font-family: var(--titre);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}
.tel:hover,
.tel:focus-visible { color: var(--blanc-neon); }

/* Une règle `display` l'emporte sur l'attribut hidden : on le rétablit, sinon
   un lien vide s'afficherait quand le script ne s'exécute pas. */
.tel[hidden] { display: none; }

.tel svg { width: 18px; height: 18px; flex-shrink: 0; }