/* TennisShop — le guide « Trouve ta raquette ».
   Chargée uniquement sur /guide-raquette/ (voir inc/assets.php). */

.guide{padding-block:clamp(1.8rem,3.6vw,3rem)}
.guide-intro{max-width:62ch;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.guide-intro h1{margin-bottom:.8rem;text-wrap:balance}
.guide-intro p{color:var(--gris);line-height:1.6}
/* Le questionnaire est centré ; la page de résultats, non : elle se lit
   comme un document, de gauche à droite.
   La largeur de lecture de 62 caractères vaut pour un paragraphe, pas pour un
   titre : elle cassait « Trouve ta raquette » en deux lignes. Le bloc
   centré est donc plus large, et c'est le paragraphe seul qui se borne. */
.guide-intro.est-centre{max-width:44rem;margin-inline:auto;text-align:center}
.guide-intro.est-centre h1{text-wrap:nowrap}
.guide-intro.est-centre p{text-wrap:balance}
@media(max-width:560px){
  /* Sous cette largeur le titre ne tient plus sur une ligne : mieux vaut
     deux lignes équilibrées qu'un débordement. */
  .guide-intro.est-centre h1{text-wrap:balance}
}

/* ---------- Le questionnaire ---------- */
.guide-form{max-width:66rem;margin-inline:auto;text-align:center}

.guide-progres{margin-bottom:1.8rem}
.guide-jauge{height:6px;border-radius:999px;background:var(--ligne);overflow:hidden}
.guide-jauge span{display:block;height:100%;width:0;border-radius:999px;background:var(--azur);
  transition:width .28s ease}
.guide-compte{margin-top:.55rem;font-size:.8rem;font-weight:700;color:var(--gris)}

.guide-question{border:0;padding:0;margin:0 0 1.6rem}
/* Le pas-à-pas n'affiche qu'une question : elle n'a plus besoin de se
   séparer de la suivante. */
.est-pas-a-pas .guide-question{margin-bottom:0}
.guide-question legend{display:block;width:100%;margin-bottom:1.4rem;text-wrap:balance}
.guide-numero{display:block;margin-bottom:.45rem;font-size:.78rem;font-weight:800;
  letter-spacing:.06em;color:var(--azur)}
.est-pas-a-pas .guide-numero{display:none}

/* Une colonne par réponse, bornée : à deux réponses on veut deux cartes
   normales au milieu, pas deux panneaux étirés sur toute la largeur.
   --colonnes est posé par le gabarit. */
.guide-options{display:grid;gap:12px;justify-content:center;
  grid-template-columns:repeat(var(--colonnes,3),minmax(0,12.5rem))}

/* Le radio reste focalisable au clavier : on le masque sans le retirer du flux
   d'accessibilité, et c'est son étiquette qui porte tout le dessin. */
.guide-radio{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.guide-option{display:flex;flex-direction:column;justify-content:center;
  padding:1.2rem 1.1rem;border:2px solid var(--ligne);
  border-radius:var(--r-carte);background:var(--blanc);cursor:pointer;text-align:center;
  transition:border-color .16s ease, background-color .16s ease}
.guide-option:hover{border-color:var(--azur)}
.guide-option b{display:block;font-size:1rem;font-weight:700;line-height:1.25}
.guide-option-detail{display:block;margin-top:.3rem;font-size:.8rem;color:var(--gris);line-height:1.4}
.guide-radio:checked + .guide-option{border-color:var(--azur);background:var(--azur-pale)}
.guide-radio:focus-visible + .guide-option{outline:3px solid var(--azur);outline-offset:2px}

/* Carte à photo : la photo occupe toute la carte, le libellé se pose dessus
   sur un fond dégradé qui garantit le contraste quelle que soit l'image. */
.guide-option.a-visuel{position:relative;padding:0;overflow:hidden;
  display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);aspect-ratio:3/4;
  /* Fond sombre le temps que la photo arrive : le libellé est blanc, il
     reste lisible, et la carte ne clignote pas en blanc. */
  background:var(--encre)}
.guide-option-fond{grid-area:1/1;width:100%;height:100%;object-fit:cover;
  transition:transform .3s ease}
.guide-option.a-visuel:hover .guide-option-fond{transform:scale(1.05)}
.guide-option.a-visuel .guide-option-texte{grid-area:1/1;align-self:end;z-index:2;
  padding:2.5rem .9rem 1rem;color:#fff;
  background:linear-gradient(to top,rgba(8,40,74,.94) 0%,rgba(8,40,74,.62) 50%,rgba(8,40,74,0) 100%)}
.guide-option.a-visuel .guide-option-detail{color:rgba(255,255,255,.82)}
.guide-radio:checked + .guide-option.a-visuel{background:var(--encre)}
.guide-radio:checked + .guide-option.a-visuel .guide-option-texte{
  background:linear-gradient(to top,rgba(29,95,208,.96) 0%,rgba(29,95,208,.68) 50%,rgba(29,95,208,0) 100%)}
@media(prefers-reduced-motion:reduce){
  .guide-option.a-visuel:hover .guide-option-fond{transform:none}
}

.guide-retour{margin-top:1.4rem;padding:0;background:none;border:0;cursor:pointer;
  font-size:.86rem;font-weight:700;color:var(--gris)}
.guide-retour:hover{color:var(--azur)}

.guide-envoi{margin-top:1.8rem}
.guide-note{margin-top:.8rem;font-size:.82rem;color:var(--gris)}

@media(max-width:820px){
  /* Quatre colonnes de photos ne tiennent plus : deux par deux, et les
     réponses restent de la même taille d'une question à l'autre. */
  .guide-options{grid-template-columns:repeat(2,minmax(0,1fr));max-width:28rem;margin-inline:auto}
}
@media(max-width:400px){
  .guide-option.a-visuel{aspect-ratio:4/5}
  .guide-option.a-visuel .guide-option-texte{padding:2rem .7rem .8rem}
  .guide-option b{font-size:.92rem}
}

/* ---------- Le rappel des réponses ---------- */
.guide-rappel{margin-bottom:clamp(1.6rem,3vw,2.2rem);padding:1.2rem 1.4rem;
  border:1px solid var(--ligne);border-radius:var(--r-carte);background:var(--blanc)}
.guide-rappel-titre{font-size:.78rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gris);margin-bottom:.9rem}
.guide-rappel ul{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.9rem}
.guide-rappel a{display:block}
.guide-rappel li a{padding:.45rem .8rem;border:1px solid var(--ligne);border-radius:999px;
  transition:border-color .16s ease, background-color .16s ease}
.guide-rappel li a:hover{border-color:var(--azur);background:var(--azur-pale)}
.guide-rappel li span{display:block;font-size:.7rem;color:var(--gris);line-height:1.2}
.guide-rappel li b{display:block;font-size:.86rem;font-weight:700;line-height:1.25}

/* ---------- Les trois raquettes ---------- */
/* Trois colonnes : la carte produit du site, puis ce qui la rapproche des
   réponses. */
.guide-resultats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  list-style:none;margin:0;padding:0;align-items:start}
.guide-resultat{position:relative;display:flex;flex-direction:column;gap:.9rem}
.guide-resultat .produit{width:100%}
.guide-resultat.est-premier .produit{outline:2px solid var(--encre);outline-offset:-2px}
.guide-medaille{position:absolute;top:-11px;left:50%;transform:translateX(-50%);z-index:3;
  padding:.3rem .8rem;border-radius:var(--r-pilule);background:var(--balle);color:var(--encre);
  font-size:.7rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}

.guide-reserve{padding:.6rem .8rem;border-radius:10px;
  background:#FDF3E7;color:#7A4A12;font-size:.82rem;line-height:1.4}

.guide-arguments{display:grid;gap:.4rem;padding:0 .2rem}
.guide-arguments li{position:relative;padding-left:1.4rem;font-size:.88rem;line-height:1.4}
.guide-arguments li::before{position:absolute;left:0;top:0;font-weight:900}
.guide-arguments .est-pour::before{content:"\2713";color:#1B8A4B}

.guide-suite{margin-top:1.6rem}
.guide-vide{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding:1.4rem;
  border:1px solid var(--ligne);border-radius:var(--r-carte);background:var(--blanc);color:var(--gris)}

@media(max-width:1000px){
  .guide-resultats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .guide-resultats{grid-template-columns:1fr;gap:28px}
}