/* ==========================================================================
   ROCKWOOL Quiz Expert — écrans question / correction / résultat
   Repères repris de RW_Webdesign_Question.psd et RW_Webdesign_Score_ok.psd
   (canvas 1920 × 1270) : carte 1313 × 478 en x 304 → 1617, y 333.
   ========================================================================== */

:root {
  --green: #42B045;
  --red-wrong: #E62E29;
  --grey-line: #B2B2B2;
  --container-quiz: 1313px;
}

.body--quiz { background: #3d3d3d; }

/* Les cartes sont en display:grid, qui l'emporterait sur le display:none de
   l'attribut hidden (règle UA, spécificité plus faible). */
[hidden] { display: none !important; }

.quiz {
  background: #3d3d3d url("../assets/bg-quiz.jpg") center top / cover no-repeat;
  min-height: calc(100vh - 92px - var(--footer-h));
  padding-block: 76px 80px;
}

.quiz__inner {
  width: min(100% - var(--gutter) * 2, var(--container-quiz));
  margin-inline: auto;
}

/* --- En-tête ------------------------------------------------------------- */

.quiz__head {
  display: flex;
  align-items: center;
  gap: 69px;
  padding-left: 54px;
  margin-bottom: 60px;
}

.quiz__logo { width: 213px; flex: none; }

.quiz__title {
  color: var(--white);
  font-size: 28px;
  font-weight: 900;
  line-height: 1.25;
  max-width: 887px;
}

/* --- Carte --------------------------------------------------------------- */

.card {
  background: var(--white);
  border-radius: var(--radius-card);
}

/* row-gap explicitement à 0 : le gap raccourci s'appliquerait aussi aux lignes et
   décalerait le texte de question sous la colonne réponses. */
.card--question {
  display: grid;
  grid-template-columns: minmax(0, 490px) minmax(0, 493px);
  /* Lignes explicites : la colonne réponses s'étend sur les deux lignes et, en rangées
     auto, sa hauteur excédentaire serait répartie sur les deux — ce qui pousserait le
     texte de question vers le bas. Le 1fr absorbe tout le surplus dans la 2e ligne. */
  grid-template-rows: auto 1fr;
  column-gap: 202px;
  row-gap: 0;
  padding: 61px 66px 92px 61px;
  min-height: 478px;
}

.card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

/* --- Progression --------------------------------------------------------- */

.steps { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }

.steps__item {
  width: 27px;
  height: 13px;
  border-radius: 999px;
  background: var(--grey-line);
}
.steps__item[data-state="current"] { background: var(--red); }
.steps__item[data-state="done"] { background: var(--red); opacity: 0.45; }

/* C'est un <button> et non un lien : rejouer la vidéo ouvre une modale et ne
   quitte pas la page, sinon la partie en cours serait perdue. */
.link-video {
  border: 0;
  padding: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
  color: var(--grey-line);
  font-size: 16px;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-video:hover { color: var(--ink); }
.link-video:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* --- Question ------------------------------------------------------------ */

.question { display: contents; }

.question__text {
  grid-column: 1;
  margin-top: 36px;
  font-size: 22px;
  line-height: 1.3;
}

.answers {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin-top: 57px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.answers__list { display: flex; flex-direction: column; gap: 25px; }

/* Le bouton radio natif reste dans le flux pour l'accessibilité, mais la pilule
   entière sert de cible : on le masque visuellement plutôt que de le supprimer. */
.answer-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 73px;
  padding: 0 26px;
  border: 2px solid var(--grey-line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 17px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.answer-option:hover { border-color: var(--ink); }

/* Masquage visuel sans sortir de l'arbre d'accessibilité : une taille nulle ferait
   disparaître le radio pour les lecteurs d'écran et le rendrait non focusable. */
.answer-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.answer-option__dot {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--grey-line);
  background: transparent;
  transition: background 140ms ease, border-color 140ms ease;
}

.answer-option__label { flex: 1; text-align: center; padding-right: 46px; }

.answer-option:has(input:checked) {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}
.answer-option:has(input:checked) .answer-option__dot {
  background: var(--white);
  border-color: var(--white);
}
.answer-option:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }

.answers__submit { height: 71px; width: 100%; }
.answers__submit:disabled { background: var(--grey-line); cursor: not-allowed; }

/* --- Pastilles de score --------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 169px;
  height: 73px;
  padding: 0 24px;
  border-radius: 999px;
  color: var(--white);
  font-size: 17px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.pill--green { background: var(--green); }

.dots { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }

.dots__item {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--grey-line);
  display: grid;
  place-items: center;
}
.dots__item[data-state="right"] { background: var(--green); }
.dots__item[data-state="wrong"] { background: var(--red-wrong); }
.dots__item svg { width: 17px; height: 17px; color: var(--white); }

/* --- Modale de correction ------------------------------------------------- */

.modal__card--answer {
  width: min(100% - var(--gutter) * 2, 699px);
  padding: 37px 60px 49px;
  text-align: left;
}

.answer__top { display: flex; align-items: center; gap: 18px; margin-bottom: 47px; }
.answer__top .pill { min-width: 169px; }

.answer__text { font-size: 18px; line-height: 1.5; }
.answer__text p + p { margin-top: 18px; }

/* --- Modale vidéo --------------------------------------------------------- */

.modal__card--video {
  width: min(100% - var(--gutter) * 2, 1100px);
  padding: 24px;
  background: var(--ink);
}
.modal__card--video .modal__close { color: #ddd; top: 6px; right: 12px; }
.modal__card--video .modal__close:hover { color: var(--white); }

.modal__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 893 / 529;
  border-radius: 12px;
  background: #000;
}

.answer__next {
  height: 72px;
  min-width: 352px;
  margin: 49px auto 0;
  display: flex;
  gap: 18px;
  font-weight: 900;
  font-size: 15px;
}

/* --- Écran résultat ------------------------------------------------------- */

/* Padding droit à 103px : le PSD cale la colonne texte sur x=1025 → 1514, pas sur un
   gabarit symétrique. Le CTA reste centré sur la boîte de contenu. */
.card--score {
  display: grid;
  grid-template-columns: minmax(0, 549px) minmax(0, 490px);
  column-gap: 111px;
  row-gap: 74px;
  padding: 41px 103px 57px 61px;
  min-height: 683px;
  align-content: start;
}

.score__badge {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 409px;
  align-self: center;
}

.score__copy { grid-column: 2; grid-row: 1; }

.score__circle {
  position: absolute;
  width: 387px;
  height: 387px;
  border-radius: 50%;
  background: var(--green);
}

/* Les 3 badges ont des ratios très différents (Rockexplorer est large et plat, 2.465 ;
   Rockstar est haut, 0.66). max-height cadre les deux badges verticaux, max-width
   empêche Rockexplorer de déborder du cercle. min() et non 340px seul : cette règle
   écrase le max-width:100% global, et Rockexplorer sortirait de la carte en mobile. */
.score__badge-img { position: relative; max-height: 409px; max-width: min(340px, 100%); width: auto; }

.score__head { display: flex; align-items: center; gap: 20px; }
.score__label { font-size: 24px; font-weight: 900; }

.score__lead { margin-top: 45px; font-size: 18px; font-weight: 900; line-height: 1.5; }
.score__body { margin-top: 30px; font-size: 18px; line-height: 1.5; }
.score__body p + p { margin-top: 18px; }

.score__copy .dots { margin-top: 30px; }

/* Le placement explicite passe sur le conteneur : le bouton n'est plus seul,
   le lien vers le règlement le suit. */
.score__actions {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.score__cta {
  height: 71px;
  min-width: 491px;
}

/* Accès au règlement avant de valider, là où il est utile. Il reste par
   ailleurs accessible en permanence depuis le pied de page. */
.link-rules {
  display: inline-block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-rules:hover { color: var(--red); }
.link-rules:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* --- Formulaire de participation (embed Marketo) ---------------------------
   Le vocabulaire visuel est celui de l'ancien formulaire maison : champs en
   pilule de 56px, bordure 2px grise virant au noir au survol, libellés en 900,
   astérisque rouge, bouton noir de 71px.

   forms2.min.js charge sa propre feuille de style ET pose des largeurs en
   style inline sur .mktoForm, .mktoFormCol, .mktoFieldWrap, .mktoLabel,
   .mktoOffset, .mktoGutter et .mktoField. Les !important ci-dessous ne sont
   donc pas de la surenchère : sans eux, les largeurs inline de Marketo
   l'emportent et la grille se disloque.
   -------------------------------------------------------------------------- */

.card--form {
  display: block;
  padding: 61px 66px 57px;
  max-width: 1024px;
  margin-inline: auto;
}

.form__head { text-align: center; margin-bottom: 45px; }
.form__title { font-size: 28px; font-weight: 900; line-height: 1.25; }
.form__intro {
  margin: 12px auto 0;
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.45;
  color: #555;
}
.form__intro sup { font-size: 0.7em; }

.form__embed { max-width: 820px; margin-inline: auto; }

/* Structure : une grille 2 colonnes, chaque .mktoFormRow étant une cellule. */
.mktoForm {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 32px;
  font-family: var(--font-brand) !important;
  font-size: 17px !important;
  color: var(--ink) !important;
}
.mktoForm * { font-family: var(--font-brand) !important; }

/* Neutralise la gouttière et le décalage inline de Marketo, qui feraient
   déborder les champs hors de leur colonne. */
.mktoForm .mktoOffset,
.mktoForm .mktoGutter,
.mktoForm .mktoClear,
.mktoForm > .mktoClear { display: none !important; }

.mktoForm .mktoFormRow,
.mktoForm .mktoFormCol,
.mktoForm .mktoFieldWrap {
  width: 100% !important;
  min-height: 0 !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Les lignes qui ne se prêtent pas au demi-format occupent toute la largeur :
   zones de texte, cases à cocher, mentions légales, bouton. */
.mktoForm .mktoFormRow:has(textarea),
.mktoForm .mktoFormRow:has(.mktoCheckboxList),
.mktoForm .mktoFormRow:has(.mktoRadioList),
.mktoForm .mktoFormRow:has(.mktoHtmlText),
.mktoForm .mktoButtonRow { grid-column: 1 / -1; }

/* Marketo émet, entre les champs visibles, des lignes sans contenu affichable :
   champs cachés, .mktoPlaceholder des champs conditionnels, inputs techniques
   posés directement sur le <form>. En display:grid chacune consommait une
   cellule, d'où le grand vide observé au-dessus du bouton. Le marqueur fiable
   est l'absence de .mktoFieldWrap, seul conteneur des champs réellement rendus. */
.mktoForm .mktoFormRow:not(:has(.mktoFieldWrap)),
.mktoForm .mktoFormRow:has(.mktoFieldWrap > input[type="hidden"]),
.mktoForm > input,
.mktoForm .mktoInstruction:empty { display: none !important; }

/* --- Libellés -------------------------------------------------------------- */

/* .mktoAsterix est un <div> flottant placé AVANT le texte dans le DOM, d'où le
   « *Prénom: » de Marketo. row-reverse le renvoie après le libellé, comme sur
   l'ancien formulaire, sans toucher au contenu. */
.mktoForm .mktoLabel {
  display: flex !important;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 3px;
  width: 100% !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
  color: var(--ink) !important;
}

.mktoForm .mktoAsterix {
  float: none !important;
  display: inline !important;
  padding: 0 !important;
  color: var(--red) !important;
}

/* --- Champs ---------------------------------------------------------------- */

/* height en !important : la feuille de Marketo contient un bloc responsive
   « @media (max-width: 480px) » qui impose height:1.6em !important aux inputs,
   soit 25,5px — les champs s'écrasaient à moins de la moitié de leur hauteur
   en mobile, alors que les select, non visés par ce bloc, restaient corrects. */
.mktoForm input[type="text"],
.mktoForm input[type="email"],
.mktoForm input[type="tel"],
.mktoForm input[type="url"],
.mktoForm input[type="number"],
.mktoForm input[type="date"],
.mktoForm select.mktoField,
.mktoForm textarea.mktoField {
  width: 100% !important;
  height: 56px !important;
  padding: 0 24px !important;
  border: 2px solid var(--grey-line) !important;
  border-radius: 999px !important;
  background-color: var(--white) !important;
  color: var(--ink) !important;
  font-size: 17px !important;
  line-height: 52px !important;
  box-shadow: none !important;
  transition: border-color 140ms ease;
}

.mktoForm textarea.mktoField {
  height: auto !important;
  min-height: 120px !important;
  padding: 16px 24px !important;
  border-radius: 24px !important;
  line-height: 1.5 !important;
  resize: vertical;
}

.mktoForm input:hover,
.mktoForm select.mktoField:hover,
.mktoForm textarea.mktoField:hover { border-color: var(--ink) !important; }

.mktoForm input:focus,
.mktoForm select.mktoField:focus,
.mktoForm textarea.mktoField:focus {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  border-color: var(--ink) !important;
}

.mktoForm select.mktoField {
  appearance: none;
  padding-right: 52px !important;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: right 26px center, right 20px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* --- Cases à cocher et boutons radio ---------------------------------------- */

/* Pour une case à cocher, Marketo met le texte de consentement dans .mktoLabel
   (donc rendu comme un libellé de champ, en gras, au-dessus) et laisse le
   <label> de la case vide. La case se retrouvait seule sous un pavé gras, sans
   rapport lisible entre les deux. On rétablit ici la forme attendue :
   [case] [texte à côté, en graisse normale]. */
.mktoForm .mktoFormRow:has(.mktoCheckboxList) .mktoFieldWrap,
.mktoForm .mktoFormRow:has(.mktoRadioList) .mktoFieldWrap {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
}

/* display:block et non le row-reverse des autres libellés : sur un texte de
   consentement qui court sur plusieurs lignes, l'astérisque partait seul sur
   une première ligne. Ici il reste simplement en tête du texte. */
.mktoForm .mktoFormRow:has(.mktoCheckboxList) .mktoLabel,
.mktoForm .mktoFormRow:has(.mktoRadioList) .mktoLabel {
  display: block !important;
  grid-column: 2;
  grid-row: 1;
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  cursor: pointer;
}
.mktoForm .mktoFormRow:has(.mktoCheckboxList) .mktoAsterix,
.mktoForm .mktoFormRow:has(.mktoRadioList) .mktoAsterix { padding-right: 4px !important; }

.mktoForm .mktoCheckboxList,
.mktoForm .mktoRadioList {
  grid-column: 1;
  grid-row: 1;
  width: auto !important;
  padding: 0 !important;
}

.mktoForm .mktoCheckboxList > input,
.mktoForm .mktoRadioList > input {
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  accent-color: var(--red);
  cursor: pointer;
}

/* Le <label> de la case est vide : il ajouterait une ligne blanche. */
.mktoForm .mktoCheckboxList > label:empty,
.mktoForm .mktoRadioList > label:empty { display: none !important; }

.mktoForm .mktoCheckboxList > label,
.mktoForm .mktoRadioList > label {
  display: inline !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  cursor: pointer;
}

/* --- Textes libres (mentions légales) --------------------------------------- */

.mktoForm .mktoHtmlText {
  width: 100% !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #777 !important;
}
.mktoForm .mktoHtmlText a { color: var(--ink) !important; }

/* --- Erreurs ---------------------------------------------------------------- */

.mktoForm .mktoError { right: auto !important; left: 0 !important; bottom: -28px !important; }
.mktoForm .mktoError .mktoErrorArrowWrap { display: none !important; }
.mktoForm .mktoError .mktoErrorMsg {
  background: var(--red-wrong) !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  color: var(--white) !important;
}
.mktoForm .mktoField.mktoInvalid { border-color: var(--red-wrong) !important; }

/* --- Bouton ----------------------------------------------------------------- */

.mktoForm .mktoButtonRow { margin-top: 16px; }
.mktoForm .mktoButtonWrap { margin-left: 0 !important; display: flex; justify-content: center; }

.mktoForm .mktoButton {
  height: 71px !important;
  min-width: 343px;
  padding: 0 40px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--black) !important;
  background-image: none !important;
  color: var(--white) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}
.mktoForm .mktoButton:hover { background: #2b2b2b !important; }
.mktoForm .mktoButton:active { transform: scale(0.98); }
.mktoForm .mktoButton:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

/* --- Écran « déjà joué » ---------------------------------------------------- */

.card--done {
  display: block;
  max-width: 820px;
  margin-inline: auto;
  padding: 61px 66px 57px;
  text-align: center;
}
.done__title { font-size: 28px; font-weight: 900; line-height: 1.25; }
.done__text { margin-top: 16px; font-size: 18px; line-height: 1.5; color: #555; }

/* Même traitement que l'écran de résultat : cercle vert en fond, badge par
   dessus. Cadrage réduit, le badge n'étant ici qu'un rappel. */
.done__badge {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 240px;
  margin-top: 32px;
}
.done__circle {
  position: absolute;
  width: 228px;
  height: 228px;
  border-radius: 50%;
  background: var(--green);
}
/* Les 3 badges ont des ratios très différents : max-height cadre les deux
   verticaux, max-width empêche Rockexplorer de déborder du cercle. */
.done__badge-img {
  position: relative;
  max-height: 240px;
  max-width: min(200px, 100%);
  width: auto;
}

.done__recap {
  margin-top: 20px;
  font-size: 20px;
  font-weight: 900;
  color: var(--red);
}
.done__actions {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.done__btn { height: 71px; min-width: 300px; }
.card--done .link-rules { margin-top: 24px; }

/* --- Adaptatif ------------------------------------------------------------ */

@media (max-width: 1360px) {
  .card--question { gap: 60px; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); padding: 48px; }
  .card--score { gap: 48px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 48px; }
  .quiz__head { padding-left: 0; gap: 40px; }
  .quiz__title { font-size: 24px; }
  .score__actions { width: 100%; }
  .score__cta { min-width: 0; width: 100%; max-width: 491px; }
}

@media (max-width: 900px) {
  .card--question,
  .card--score {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 32px;
    padding: 32px 24px;
  }
  .card--form,
  .card--done { padding: 32px 24px; }
  .form__title,
  .done__title { font-size: 24px; }
  .mktoForm { grid-template-columns: minmax(0, 1fr); }
  .mktoForm .mktoButtonWrap { width: 100%; }
  .mktoForm .mktoButton { min-width: 0; width: 100%; }
  .done__actions { flex-direction: column; }
  .done__btn { min-width: 0; width: 100%; }
  .modal__card--video { padding: 16px; }
  .question__text { margin-top: 32px; }
  /* Les placements explicites du desktop créeraient une 2e colonne implicite. */
  .answers,
  .score__badge,
  .score__copy,
  .score__actions { grid-column: 1; grid-row: auto; }
  .score__actions { width: 100%; }
  .score__cta { min-width: 0; width: 100%; max-width: 491px; }
  .answers { margin-top: 0; }
  .score__badge { min-height: 0; }
  .score__circle { width: 260px; height: 260px; }
  .score__badge-img { max-height: 280px; }
  .quiz__head { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 32px; }
  .quiz__logo { width: 170px; }
  .modal__card--answer { padding: 28px 24px 32px; }
  .answer__next { min-width: 0; width: 100%; }
}

@media (max-width: 620px) {
  .steps__item { width: 18px; }
  /* 8 pastilles + 7 écarts doivent tenir dans la carte (≈279px à 375px de large). */
  .dots { gap: 4px; }
  .dots__item { width: 28px; height: 28px; }
  .dots__item svg { width: 13px; height: 13px; }
  .answer__top { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pill { min-width: 0; height: 56px; }
  .score__head { flex-wrap: wrap; }
}