/**
 * Styles du simulateur.
 *
 * Les valeurs viennent du design system Highkeek — relevé sur www.highkeek.fr
 * le 30/08/2026, §06 de `Pro-website/docs/highkeek-design-system.html`, même
 * table que `Pro-website/highkeek-pro-web/tailwind.config.ts`. Elles sont
 * redéclarées ici en variables locales : le module ne lit aucune variable ni
 * aucun sélecteur du thème, et une boutique qui veut d'autres couleurs n'a
 * qu'à surcharger `.hkf { --hkf-… }`.
 *
 * Les règles qui doivent l'emporter sur les boutons du thème (`.btn`) sont
 * portées à deux classes (`.hkf .hkf__submit`) : l'ordre de chargement des
 * feuilles n'est pas garanti, la spécificité si.
 */
.hkf {
  /* — Marque et neutres. */
  --hkf-ink: #000000;
  --hkf-ink-2: #444444;
  --hkf-muted: #6e6e6e;
  --hkf-surface: #f4f4f4;
  --hkf-line: #dededa;
  --hkf-paper: #ffffff;

  /* — Action. Le bleu porte les liens, le bouton primaire et le focus des
       champs ; le noir porte les boutons PrestaShop, et #333333 est le survol
       commun à tous les boutons noirs. */
  --hkf-blue: #1a55a3;
  --hkf-blue-hover: #4054b2;
  --hkf-ink-hover: #333333;
  --hkf-danger: #b5202e;

  /* — Sur fond noir uniquement : le jaune fait 1,4:1 sur blanc. */
  --hkf-yellow: #ffd51d;
  --hkf-night-text: #c9c9c4;

  /* — Formes. Pilule pour les boutons, 30 px pour les champs, 10 px pour les
       médias et les cartes. */
  --hkf-radius-pill: 50px;
  --hkf-radius-field: 30px;
  --hkf-radius-media: 10px;

  --hkf-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);

  /* Polices du site quand le thème les a chargées, repli système sinon. Le
     module ne déclare aucun @font-face et ne va chercher aucun fichier
     dehors : rien à charger, rien à faire fuiter. */
  --hkf-font-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hkf-font-display: "Coolvetica", "Archivo", var(--hkf-font-body);

  color: var(--hkf-ink);
  font-family: var(--hkf-font-body);
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px;
}

.hkf :focus-visible {
  outline: 3px solid var(--hkf-blue);
  outline-offset: 2px;
}

.hkf .hkf__subtitle {
  color: var(--hkf-muted);
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 30px;
}

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

.hkf .hkf__progress {
  margin-bottom: 30px;
}

.hkf .hkf__progress-bar {
  background: var(--hkf-surface);
  border-radius: var(--hkf-radius-pill);
  height: 8px;
  overflow: hidden;
}

.hkf .hkf__progress-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--hkf-ink);
  border-radius: var(--hkf-radius-pill);
  transition: width 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hkf .hkf__progress-label {
  color: var(--hkf-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  margin-top: 10px;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * Écrans et questions
 * ------------------------------------------------------------------------ */

.hkf .hkf__screen {
  border: 0;
  margin: 0 0 30px;
  padding: 0;
}

/* Sans JS, tous les écrans restent visibles et séparés par un filet. */
.hkf:not(.hkf--enhanced) .hkf__screen + .hkf__screen {
  border-top: 1px solid var(--hkf-line);
  padding-top: 30px;
}

.hkf__question + .hkf__question {
  margin-top: 30px;
}

.hkf .hkf__label {
  display: block;
  font-family: var(--hkf-font-display);
  font-size: clamp(22px, 3.2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: 10px;
}

.hkf .hkf__optional,
.hkf .hkf__help {
  color: var(--hkf-muted);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
}

.hkf .hkf__help {
  margin-bottom: 20px;
}

/* ---------------------------------------------------------------------------
 * Options
 * ------------------------------------------------------------------------ */

.hkf .hkf__options {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.hkf .hkf__option {
  background: var(--hkf-paper);
  border: 1px solid var(--hkf-line);
  border-radius: var(--hkf-radius-media);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  position: relative;
  transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
}

.hkf .hkf__option:hover {
  border-color: var(--hkf-ink);
}

.hkf .hkf__option:active {
  transform: scale(0.99);
}

/* La pastille dessinée remplace le bouton radio natif — mais seulement là où
   `:has()` répond, faute de quoi l'état coché deviendrait invisible. */
@supports selector(:has(*)) {
  .hkf .hkf__option {
    display: grid;
    grid-template-columns: 22px 1fr;
    column-gap: 12px;
    row-gap: 4px;
  }

  .hkf .hkf__option::before {
    border: 2px solid var(--hkf-line);
    border-radius: 50%;
    content: '';
    grid-column: 1;
    grid-row: 1;
    height: 22px;
    margin-top: 1px;
    transition: border-color 120ms ease, background 120ms ease;
    width: 22px;
  }

  .hkf .hkf__option-label,
  .hkf .hkf__option-help {
    grid-column: 2;
  }

  .hkf .hkf__option input {
    height: 1px;
    margin: 0;
    opacity: 0;
    position: absolute;
    width: 1px;
  }

  .hkf .hkf__option:hover::before {
    border-color: var(--hkf-ink);
  }

  .hkf .hkf__option:has(input:checked)::before {
    background: radial-gradient(circle at center, var(--hkf-ink) 0 5px, transparent 5px);
    border-color: var(--hkf-ink);
  }
}

/* Le vrai bouton radio est masqué : l'anneau de focus se pose sur la tuile. */
.hkf .hkf__option:focus-within {
  outline: 3px solid var(--hkf-blue);
  outline-offset: 2px;
}

.hkf .hkf__option:has(input:checked) {
  background: var(--hkf-surface);
  border-color: var(--hkf-ink);
}

.hkf .hkf__option input {
  margin-right: 8px;
}

.hkf .hkf__option-label {
  font-weight: 600;
  line-height: 1.35;
}

.hkf .hkf__option-help {
  color: var(--hkf-muted);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* ---------------------------------------------------------------------------
 * Champ numérique
 * ------------------------------------------------------------------------ */

.hkf .hkf__number {
  align-items: center;
  display: flex;
  gap: 10px;
}

.hkf .hkf__number input {
  background: var(--hkf-surface);
  border: 1px solid var(--hkf-line);
  border-radius: var(--hkf-radius-field);
  color: var(--hkf-ink);
  font-family: var(--hkf-font-display);
  font-size: 1.75rem;
  font-weight: 600;
  max-width: 180px;
  padding: 14px 24px;
  text-align: center;
  transition: border-color 120ms ease, background-color 120ms ease;
  width: 100%;
}

.hkf .hkf__number input:focus {
  background: var(--hkf-paper);
  border-color: var(--hkf-blue);
}

.hkf .hkf__unit {
  color: var(--hkf-muted);
  font-size: 1rem;
}

/* ---------------------------------------------------------------------------
 * Boutons
 * ------------------------------------------------------------------------ */

.hkf .hkf__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.hkf .hkf__submit,
.hkf .hkf__back,
.hkf .hkf__card-cta {
  border: 0;
  border-radius: var(--hkf-radius-pill);
  cursor: pointer;
  font-family: var(--hkf-font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  padding: 14px 30px;
  text-decoration: none;
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.hkf .hkf__submit {
  background: var(--hkf-blue);
  color: var(--hkf-paper);
}

.hkf .hkf__submit:hover:not(:disabled) {
  background: var(--hkf-blue-hover);
  box-shadow: var(--hkf-shadow);
}

.hkf .hkf__submit:disabled {
  cursor: default;
  opacity: 0.6;
}

.hkf .hkf__back {
  background: var(--hkf-paper);
  box-shadow: inset 0 0 0 1px var(--hkf-line);
  color: var(--hkf-ink);
}

.hkf .hkf__back:hover {
  background: var(--hkf-surface);
  box-shadow: inset 0 0 0 1px var(--hkf-ink);
}

.hkf .hkf__error {
  color: var(--hkf-danger);
  font-size: 0.9375rem;
  margin-top: 20px;
}

/* ---------------------------------------------------------------------------
 * Résultat
 *
 * Le bandeau est noir : c'est le seul fond sur lequel le jaune de marque est
 * lisible (1,4:1 sur blanc, 14,8:1 sur noir), et c'est le moment du parcours
 * où une affirmation est à sa place.
 * ------------------------------------------------------------------------ */

.hkf .hkf__result-head {
  align-items: center;
  background: var(--hkf-ink);
  border-radius: var(--hkf-radius-media);
  color: var(--hkf-paper);
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  padding: 20px;
}

.hkf .hkf__result-title,
.hkf__result-head .hkf__result-title {
  color: var(--hkf-paper);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin: 0;
  text-transform: uppercase;
}

/* Ce que le moteur a dû concéder pour trouver l'article : taille décalée,
   modèle changé, rupture. Dit ici, sous le titre, et pas ailleurs. */
.hkf .hkf__result-note {
  color: var(--hkf-night-text);
  font-size: 0.875rem;
  line-height: 1.45;
  margin: 6px 0 0;
}

.hkf .hkf__seal {
  color: var(--hkf-yellow);
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
 * Carte produit
 *
 * Deux colonnes dès qu'il y a une image : l'œil descend le long des faits —
 * nom, description, taille, prix, action — au lieu de traverser une colonne
 * centrée haute d'un écran. Sur mobile, la même carte s'empile.
 * ------------------------------------------------------------------------ */

.hkf .hkf__card {
  background: var(--hkf-paper);
  border: 1px solid var(--hkf-line);
  border-radius: var(--hkf-radius-media);
  display: grid;
  gap: 20px;
  padding: 20px;
  text-align: left;
}

.hkf .hkf__card--primary {
  border-color: var(--hkf-ink);
  border-width: 2px;
}

.hkf .hkf__card-media {
  align-items: center;
  background: var(--hkf-surface);
  border-radius: var(--hkf-radius-media);
  display: flex;
  justify-content: center;
  padding: 20px;
}

.hkf .hkf__card-image {
  display: block;
  height: auto;
  max-width: 100%;
}

.hkf .hkf__card-body {
  align-self: center;
}

.hkf .hkf__card-title {
  font-family: var(--hkf-font-display);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 10px;
}

/* Description courte de la fiche produit. Deux lignes situent le modèle ;
   au-delà, elle repousse le prix et le bouton hors de l'écran. */
.hkf .hkf__card-desc {
  color: var(--hkf-ink-2);
  display: -webkit-box;
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0 0 20px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Bande de faits : la taille trouvée et le prix — les deux réponses que le
   parent est venu chercher — côte à côte et lisibles d'un coup d'œil. */
.hkf .hkf__facts {
  border: 1px solid var(--hkf-line);
  border-radius: var(--hkf-radius-media);
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  margin: 0 0 20px;
}

.hkf .hkf__fact {
  padding: 10px 16px;
}

.hkf__fact + .hkf__fact {
  border-left: 1px solid var(--hkf-line);
}

.hkf .hkf__fact dt {
  color: var(--hkf-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hkf .hkf__fact dd {
  font-family: var(--hkf-font-display);
  font-size: 1.375rem;
  font-weight: 600;
  margin: 4px 0 0;
}

/* Contour plutôt qu'aplat : le rouge du système n'a pas de teinte claire
   documentée, et un fond inventé sortirait de la palette. */
.hkf .hkf__badge {
  border-radius: var(--hkf-radius-pill);
  box-shadow: inset 0 0 0 1px currentColor;
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  margin: 0 0 20px;
  padding: 4px 14px;
}

.hkf .hkf__badge--rupture {
  color: var(--hkf-danger);
}

.hkf .hkf__card-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.hkf .hkf__card-cta {
  background: var(--hkf-ink);
  color: var(--hkf-paper);
  display: inline-block;
}

.hkf .hkf__card-cta:hover {
  background: var(--hkf-ink-hover);
  color: var(--hkf-paper);
}

.hkf .hkf__card-link {
  color: var(--hkf-blue);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hkf .hkf__card-link:hover {
  color: var(--hkf-blue-hover);
}

/* L'alternative se lit comme une alternative : même carte, un cran en dessous
   en surface, en taille et en poids de bouton. */
.hkf .hkf__alternative {
  margin-top: 30px;
}

.hkf .hkf__alternative-title {
  color: var(--hkf-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.hkf__alternative .hkf__card {
  background: var(--hkf-surface);
  border-color: transparent;
}

/* La carte alternative est posée sur la surface : le cadre de l'image et la
   bande de faits inversent, sans quoi ils seraient gris sur gris. */
.hkf__alternative .hkf__card-media {
  background: var(--hkf-paper);
}

.hkf__alternative .hkf__facts {
  background: var(--hkf-paper);
  border-color: transparent;
}

.hkf__alternative .hkf__card-title {
  font-size: clamp(20px, 2.4vw, 24px);
}

.hkf__alternative .hkf__fact dd {
  font-size: 1.1875rem;
}

.hkf .hkf__alternative .hkf__card-cta {
  background: var(--hkf-paper);
  box-shadow: inset 0 0 0 1px var(--hkf-ink);
  color: var(--hkf-ink);
}

.hkf .hkf__alternative .hkf__card-cta:hover {
  background: var(--hkf-ink);
  color: var(--hkf-paper);
}

/* Sans ce retour, le résultat est une impasse : le formulaire est masqué et
   la seule issue est de recharger la page. */
.hkf .hkf__restart {
  background: none;
  border: 0;
  color: var(--hkf-blue);
  cursor: pointer;
  font: inherit;
  margin-top: 30px;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hkf .hkf__restart:hover {
  color: var(--hkf-blue-hover);
}

/* Deux colonnes seulement quand il y a une image à poser à gauche. */
@media (min-width: 641px) {
  .hkf .hkf__card--media {
    grid-template-columns: 240px 1fr;
  }

  .hkf__alternative .hkf__card--media {
    grid-template-columns: 160px 1fr;
  }
}

.hkf .hkf__legal {
  border-top: 1px solid var(--hkf-line);
  color: var(--hkf-muted);
  font-size: 0.75rem;
  line-height: 1.5;
  margin-top: 50px;
  padding-top: 20px;
}

/* Le bloc d'accroche (`teaser.tpl`) n'est plus habillé ici : il vit dans
   `home.css`, la feuille des blocs qui peuvent apparaître n'importe où.
   Tant qu'il était décrit dans cette feuille-ci — chargée sur la seule page du
   simulateur — il rendait sans style partout où il servait vraiment. */

/* ---------------------------------------------------------------------------
 * Animations — décoratives uniquement.
 * Aucune ne porte d'état : le questionnaire reste utilisable si le moteur les
 * ignore. `prefers-reduced-motion`, en fin de fichier, les neutralise en bloc.
 * ------------------------------------------------------------------------ */

@keyframes hkf-enter-forward {
  from { opacity: 0; transform: translate3d(26px, 0, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes hkf-enter-back {
  from { opacity: 0; transform: translate3d(-26px, 0, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes hkf-leave-forward {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translate3d(-18px, 0, 0); }
}

@keyframes hkf-leave-back {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translate3d(18px, 0, 0); }
}

@keyframes hkf-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes hkf-rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes hkf-zoom {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: none; }
}

@keyframes hkf-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes hkf-seal-pop {
  from { transform: scale(0.8); }
  60% { transform: scale(1.06); }
  to { transform: none; }
}

@keyframes hkf-spin {
  to { transform: rotate(360deg); }
}

@keyframes hkf-shake {
  0%, 100% { transform: none; }
  25% { transform: translate3d(-4px, 0, 0); }
  75% { transform: translate3d(4px, 0, 0); }
}

/* Bascule d'écran. L'écran sortant part à l'opposé de celui qui entre ; les
   deux ne sont jamais visibles ensemble, la page ne change donc pas de
   hauteur pendant la transition. */
.hkf--enhanced .hkf__screen--enter-forward {
  animation: hkf-enter-forward 280ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.hkf--enhanced .hkf__screen--enter-back {
  animation: hkf-enter-back 280ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.hkf--enhanced .hkf__screen--leave-forward {
  animation: hkf-leave-forward 160ms ease-in both;
}

.hkf--enhanced .hkf__screen--leave-back {
  animation: hkf-leave-back 160ms ease-in both;
}

.hkf .hkf__form--leaving {
  animation: hkf-fade-out 160ms ease-in both;
}

.hkf .hkf__error:not([hidden]) {
  animation: hkf-shake 320ms ease-in-out;
}

.hkf .hkf__submit--busy {
  align-items: center;
  display: inline-flex;
  gap: 10px;
}

.hkf .hkf__spinner {
  animation: hkf-spin 800ms linear infinite;
}

/* r = 10, circonférence ≈ 63 : un arc de 44 et un vide de 19. */
.hkf .hkf__spinner circle {
  stroke-dasharray: 44 19;
}

/* Découverte du résultat : l'attribut `hidden` tombe, la cascade part. */
.hkf__result:not([hidden]) .hkf__result-head {
  animation: hkf-rise 320ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.hkf__result:not([hidden]) .hkf__seal {
  animation: hkf-seal-pop 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* r = 24, circonférence ≈ 151. */
.hkf__result:not([hidden]) .hkf__seal-circle {
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: hkf-draw 520ms ease-out 60ms both;
}

/* Longueur du tracé de la coche ≈ 34. */
.hkf__result:not([hidden]) .hkf__seal-check {
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: hkf-draw 260ms ease-out 520ms both;
}

.hkf__result:not([hidden]) .hkf__card--primary {
  animation: hkf-rise 380ms cubic-bezier(0.22, 0.61, 0.36, 1) 120ms both;
}

.hkf__result:not([hidden]) .hkf__card-image {
  animation: hkf-zoom 460ms cubic-bezier(0.22, 0.61, 0.36, 1) 220ms both;
}

.hkf__result:not([hidden]) .hkf__alternative {
  animation: hkf-rise 380ms cubic-bezier(0.22, 0.61, 0.36, 1) 300ms both;
}

@media (max-width: 480px) {
  .hkf {
    padding: 0 16px;
  }

  .hkf .hkf__options {
    grid-template-columns: 1fr;
  }

  .hkf .hkf__number input {
    max-width: none;
  }

  /* Les deux boutons prennent la largeur : la cible est plus sûre au pouce,
     et « Retour » cesse de se disputer la place avec « Continuer ». */
  .hkf .hkf__actions {
    flex-direction: column-reverse;
  }

  .hkf .hkf__submit,
  .hkf .hkf__back,
  .hkf .hkf__card-cta {
    width: 100%;
  }

  .hkf .hkf__result-head {
    gap: 16px;
    padding: 16px;
  }
}

/* Le JS lit la même préférence et saute le séquencement ; ce bloc couvre ce
   qui reste purement CSS. `0.01ms` plutôt que `none` : les états finaux
   (sceau tracé, cartes visibles) sont appliqués, pas perdus. */
@media (prefers-reduced-motion: reduce) {
  .hkf *,
  .hkf *::before,
  .hkf *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}