/* Quizz « Cognac Trip » — page /CognacTripQuizz
 * =============================================================================
 * Feuille dédiée plutôt qu'un ajout à site.css : la page est une opération
 * ponctuelle, autonome, et on veut pouvoir la retirer sans toucher au reste.
 * Les couleurs reprennent celles du site et de l'email de confirmation. */

.lqx-quizz {
  /* Aucune couleur propre : on consomme les tokens de site.css, déjà chargée
     par partials/head. Redéfinir une palette locale, c'était garantir qu'un
     jour la page dériverait du reste du site. */
  max-width: 780px;
  width: 100%;
  margin: 0 auto;
  /* Peu d'espace au-dessus du logo : l'en-tête du site est juste au-dessus,
     les deux marges s'additionnaient. */
  padding: 18px 16px 72px;
  box-sizing: border-box;
  color: var(--ink);
}

/* Marque Liquidex en tête de page — le lien reprend .lqx-mark/.lqx-wordmark
   de site.css, donc exactement la même marque que l'en-tête. */
.lqx-quizz__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  text-decoration: none;
  color: var(--ink);
}

.lqx-quizz__hero { text-align: center; margin-bottom: 32px; }

.lqx-quizz__title { margin: 0; font-size: 34px; line-height: 1.15; }

/* Le titre porte le lien vers l'article. Il garde l'aspect d'un titre : la
   couleur du texte, pas celle d'un lien, et le soulignement n'apparaît qu'au
   survol — sinon la page s'ouvre sur ce qui ressemble à un lien de navigation
   plutôt que sur un titre. */
.lqx-quizz__title a {
  color: inherit;
  text-decoration: none;
}

.lqx-quizz__title a:hover,
.lqx-quizz__title a:focus-visible {
  color: var(--gold-deep);
  text-decoration: underline;
  text-underline-offset: 5px;
}

.lqx-quizz__panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 24px;
  margin-bottom: 20px;
}

.lqx-quizz__panel--error { text-align: center; }

.lqx-quizz__panel-title { margin: 0 0 6px; font-size: 17px; }

.lqx-quizz__panel-hint {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--ink-mute);
}

/* Consigne mise en avant, dorée et resserrée.
   --gold-deep et non --gold : sur fond blanc, le doré du site plafonne à
   2,88:1 de contraste, illisible pour du texte courant. --gold-deep monte à
   4,25:1, au plus près du seuil AA (4,5) sans quitter la palette. */
.lqx-quizz__panel-hint--gold {
  margin-bottom: 10px;
  color: var(--gold-deep);
  font-weight: 600;
}

/* Le lien vers l'article vit dans une consigne déjà dorée : le distinguer par
   la couleur ne marcherait pas. On le souligne, c'est le seul repère qui reste
   lisible sur un texte de même teinte. */
.lqx-quizz__panel-hint--gold a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Coordonnées ---- */

.lqx-quizz__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.lqx-quizz__field { display: flex; flex-direction: column; gap: 6px; }

.lqx-quizz__field > span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink);
  font-weight: 700;
}

.lqx-quizz__field input,
.lqx-quizz__field select {
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  width: 100%;
  box-sizing: border-box;
}

.lqx-quizz__field select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238E887B' stroke-width='1.8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }

.lqx-quizz__field input:focus-visible,
.lqx-quizz__field select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

/* Piège à robots : retiré du flux ET du parcours clavier, sans display:none
   (certains robots ignorent les champs masqués de cette façon). */
.lqx-quizz__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Le lot ---- */

.lqx-quizz__prize {
  background: var(--surface);
  /* Bordure uniforme sur les quatre côtés. Un liseré doré à gauche donnait
     l'impression d'un encart d'alerte, et cassait l'alignement visuel avec les
     autres tuiles de la page, toutes cerclées de --line. */
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 24px;
  margin-bottom: 20px;
  text-align: center;
}

.lqx-quizz__prize-title {
  margin: 0 0 12px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  /* Même doré que les autres textes mis en avant de la page (--gold-deep) :
     --gold ne tient que 2,88:1 de contraste, et surtout la page affichait
     deux dorés différents. */
  color: var(--gold-deep);
}

.lqx-quizz__prize-lede {
  margin: 0 auto 14px;
  max-width: 520px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.lqx-quizz__prize-lede strong { color: var(--gold-deep); }

.lqx-quizz__prize-deadline {
  margin: 0 auto 12px;
  max-width: 520px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}

.lqx-quizz__prize-deadline strong { color: var(--gold-deep); }

/* La date de tirage passe à la ligne : deux informations distinctes, qui se
   lisaient comme une seule phrase quand elles s'enchaînaient. */
.lqx-quizz__prize-deadline span { display: block; }

.lqx-quizz__prize-houses-label {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-mute);
}

/* ---- Questions ---- */

.lqx-quizz__list { margin: 0; padding: 0; list-style: none; }

/* Pas de filet entre les questions : l'espacement seul assure la séparation.
   La première ne porte donc pas de retrait supplémentaire en haut. */
.lqx-quizz__question { padding: 14px 0; }
.lqx-quizz__question:first-child { padding-top: 0; }

.lqx-quizz__question.is-invalid {
  background: #FFF8EC;
  border-radius: 10px;
  padding-left: 12px;
  padding-right: 12px;
}

.lqx-quizz__question-text {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 600;
}

.lqx-quizz__number {
  display: inline-block;
  min-width: 24px;
  margin-right: 8px;
  color: var(--gold);
  font-weight: 700;
}

.lqx-quizz__options { display: grid; gap: 10px; }

/* L'opération est terminée : les propositions ne sont plus des contrôles mais
   une correction à lire. Plus de bouton radio, plus de case à cocher, donc
   plus de curseur « main » ni d'effet au survol — rien ne doit laisser croire
   qu'on peut encore répondre. */
.lqx-quizz__option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}

/* La bonne réponse garde exactement l'apparence d'origine ; ce sont les autres
   qui reculent. Gris sur gris, sans barrer ni marquer d'une croix : la page
   corrige, elle ne sanctionne pas. Le contraste reste au-dessus du seuil de
   lisibilité — une réponse effacée doit rester lisible, sinon la correction
   perd la moitié de son sens. */
.lqx-quizz__option--wrong {
  border-color: #E7E2D6;
  background: #F4F1EA;
}

.lqx-quizz__option--wrong .lqx-quizz__option-text { color: #8E887B; }

.lqx-quizz__option-text { font-size: 14.5px; line-height: 1.5; }

/* ---- Catalogue des échantillons (fin de page) ---- */

.lqx-quizz__samples {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 28px;
}

/* Toutes les références en noir, liées ou non. Les douze « Not Bottled »
   n'ont pas de fiche produit, mais elles font partie du lot au même titre que
   les autres : les laisser en gris les faisait passer pour secondaires. */
.lqx-quizz__samples li {
  break-inside: avoid;
  font-size: 13.5px;
  line-height: 1.5;
  padding: 5px 0 5px 15px;
  position: relative;
  color: var(--ink);
}

.lqx-quizz__samples li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 12px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
}

.lqx-quizz__samples a { color: var(--ink); text-underline-offset: 3px; }
.lqx-quizz__samples a:hover { color: var(--gold-deep); }

/* ---- Consentement, erreurs, envoi ---- */

/* Invitation à suivre les comptes, juste avant la validation. Même doré que
   les autres consignes mises en avant : --gold-deep, car --gold plafonne à
   2,88:1 de contraste sur fond blanc. Un filet dessus la sépare du catalogue
   sans ajouter un panneau de plus. */
.lqx-quizz__follow {
  margin: 0 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #E7E1D4;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gold-deep);
  font-weight: 600;
}

/* Comme pour le lien de l'article : sur un texte déjà doré, la couleur ne
   distingue plus rien, seul le soulignement reste lisible. */
.lqx-quizz__follow a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lqx-quizz__follow a:hover { color: var(--ink); }

.lqx-quizz__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
  cursor: pointer;
}

.lqx-quizz__consent input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--gold);
}

.lqx-quizz__consent a { color: #9A7522; }

.lqx-quizz__error {
  margin: 16px 0 0;
  padding: 11px 14px;
  border-radius: 10px;
  background: #FDECEC;
  border: 1px solid #F3C9C9;
  color: #8C2C2C;
  font-size: 13.5px;
}

.lqx-quizz__submit {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 14px 20px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--ink);
  background: var(--gold);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}

.lqx-quizz__submit:hover:not(:disabled) { background: #A97F26; color: #fff; }
.lqx-quizz__submit:disabled { opacity: 0.6; cursor: default; }

/* ---- Résultat ---- */

.lqx-quizz__result { text-align: center; padding: 34px 24px; }

.lqx-quizz__result-text {
  margin: 0 auto;
  max-width: 460px;
  font-size: 21px;
  line-height: 1.55;
  color: var(--ink);
}

.lqx-quizz__result-text strong {
  color: var(--gold-deep);
  font-size: 25px;
}

.lqx-quizz__result-note {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (max-width: 620px) {
  .lqx-quizz { padding: 28px 14px 56px; }
  .lqx-quizz__title { font-size: 26px; }
  .lqx-quizz__panel { padding: 20px 16px; border-radius: 14px; }
  .lqx-quizz__fields { grid-template-columns: minmax(0, 1fr); }
  .lqx-quizz__samples { columns: 1; }
}