/* Fenêtre d'inscription à l'essai gratuit.
 *
 * Les couleurs sont écrites en clair plutôt qu'en variables CSS, et c'est
 * délibéré : ce fichier est chargé aussi bien par page.html (dont les
 * variables valent jaune/anthracite) que par bulletin-exemple.html, qui
 * porte celles du rapport (vert/prune, valeurs différentes sous les mêmes
 * noms). Deux jeux homonymes sur la même page, et l'un écrase l'autre en
 * silence — déjà rencontré en publiant le numéro témoin.
 */

.essai-voile {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(20, 20, 15, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  opacity: 0; transition: opacity .18s ease;
}
.essai-voile[data-visible="oui"] { opacity: 1; }
.essai-voile[hidden] { display: none !important; }

.essai-boite {
  background: #ffffff; color: #1a1a17;
  border-radius: 4px; border-top: 5px solid #f4c400;
  max-width: 27rem; width: 100%;
  padding: 1.6rem 1.7rem 1.5rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
  transform: translateY(8px); transition: transform .18s ease;
  max-height: calc(100vh - 2.5rem); overflow-y: auto;
}
.essai-voile[data-visible="oui"] .essai-boite { transform: none; }

.essai-etiquette {
  display: inline-block; background: #f4c400; color: #1a1a17;
  font-size: .7rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; padding: .2rem .5rem; border-radius: 2px;
  margin-bottom: .9rem;
}
/* Toutes les propriétés sont réaffirmées, y compris celles qui semblent
 * inutiles : page.html met ses h2 en majuscules, grisés, avec un filet
 * au-dessus. Sans remise à zéro explicite, le titre de la fenêtre héritait
 * de tout ça — vu à l'écran avant correction. */
.essai-boite h2 {
  font-size: 1.28rem; line-height: 1.25; font-weight: 700;
  margin: 0 0 .7rem; letter-spacing: -.01em;
  text-transform: none; color: inherit;
  border: 0; padding: 0;
}
.essai-boite p { margin: 0 0 .9rem; font-size: .95rem; }
.essai-boite .essai-appui { color: #6b6656; font-size: .88rem; }

.essai-points { list-style: none; margin: 0 0 1.1rem; padding: 0; font-size: .92rem; }
.essai-points li { position: relative; padding-left: 1.3rem; margin: .35rem 0; }
.essai-points li::before {
  content: "✓"; position: absolute; left: 0; color: #1a1a17; font-weight: 700;
}

.essai-champ { display: flex; flex-direction: column; gap: .5rem; }
.essai-champ label {
  font-size: .82rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: #6b6656;
}
.essai-champ input {
  font: inherit; padding: .7rem .8rem; border-radius: 3px;
  border: 2px solid #d9d2ae; background: #fffdf2; color: #1a1a17;
  width: 100%;
}
.essai-champ input:focus-visible { outline: 2px solid #f4c400; outline-offset: 1px; border-color: #1a1a17; }
/* Jaune plein, texte sombre — dans les deux thèmes. Un fond sombre sur une
 * boîte sombre faisait passer le bouton pour du texte : c'est l'élément qui
 * décide de l'inscription, il doit être le plus visible de la fenêtre. */
.essai-champ button {
  font: inherit; font-weight: 700; cursor: pointer;
  padding: .8rem 1rem; border: none; border-radius: 3px;
  background: #f4c400; color: #1a1a17;
  letter-spacing: .01em;
}
.essai-champ button:hover { background: #ffd21a; }
.essai-champ button:disabled { opacity: .55; cursor: progress; }

.essai-message { margin: .8rem 0 0; font-size: .9rem; }
.essai-message[data-ton="erreur"] { color: #8a3b12; font-weight: 600; }
.essai-message[data-ton="succes"] { color: #1f5f4b; font-weight: 600; }

.essai-pied {
  margin: 1rem 0 0; font-size: .8rem; color: #6b6656; line-height: 1.5;
}
.essai-pied a { color: inherit; }

.essai-fermer {
  position: absolute; top: .55rem; right: .7rem;
  background: none; border: none; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: #6b6656; padding: .2rem .4rem;
}
.essai-fermer:hover { color: #1a1a17; }
.essai-enveloppe { position: relative; width: 100%; max-width: 27rem; }

/* Onglet de rappel : c'est lui qui permet de revenir à la fenêtre une fois
 * qu'elle a été fermée. Discret, en bas à gauche, il ne recouvre jamais un
 * bouton d'achat (qui vit dans le flux ou en haut à droite). */
.essai-rappel {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 9997;
  background: #f4c400; color: #1a1a17;
  font: 700 .82rem/1 ui-sans-serif, system-ui, -apple-system, sans-serif;
  border: none; border-radius: 3px; cursor: pointer;
  padding: .65rem .9rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.essai-rappel[hidden] { display: none !important; }
.essai-rappel:focus-visible { outline: 2px solid #1a1a17; outline-offset: 2px; }

@media (prefers-color-scheme: dark) {
  .essai-boite { background: #1c1b14; color: #ece9dd; }
  .essai-boite .essai-appui, .essai-champ label, .essai-pied { color: #a09a86; }
  .essai-champ input { background: #14140f; color: #ece9dd; border-color: #4a4636; }
  .essai-points li::before { color: #f4c400; }
  .essai-message[data-ton="succes"] { color: #6dd0ab; }
  .essai-message[data-ton="erreur"] { color: #e0a06a; }
  .essai-fermer { color: #a09a86; }
  .essai-fermer:hover { color: #ece9dd; }
}

@media (max-width: 30rem) {
  .essai-boite { padding: 1.3rem 1.2rem 1.2rem; }
  .essai-boite h2 { font-size: 1.15rem; }
}