/* PadelShop — le guide « Trouvez votre 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 << Trouvez votre 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:58rem;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,13.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 : le classement se lit d'un coup d'œil, et les trois
   raquettes se comparent ligne à ligne au lieu de se suivre. */
.guide-resultats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  list-style:none;margin:0;padding:0;align-items:stretch}
.guide-resultat{display:flex;flex-direction:column;
  padding:clamp(1rem,1.6vw,1.3rem);border:2px solid var(--ligne);border-radius:var(--r-carte);
  background:var(--blanc)}
.guide-resultat.est-premier{border-color:var(--azur)}

.guide-resultat-visuel{position:relative;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);
  place-items:center;height:210px;margin-bottom:1rem;border-radius:12px;background:var(--chaux);padding:14px}
/* La photo est enveloppée dans un lien : c'est lui la case de la grille, donc
   c'est lui qu'il faut dimensionner. Sans ça le max-height de l'image se
   mesure sur une hauteur automatique, ne borne rien, et la photo déborde
   par-dessus le score. */
.guide-resultat-visuel a{display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);
  place-items:center;align-self:stretch;justify-self:stretch;min-width:0;min-height:0}
.guide-resultat-visuel img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.guide-medaille{position:absolute;top:-10px;left:50%;transform:translateX(-50%);z-index:2;
  padding:.28rem .7rem;border-radius:999px;background:var(--azur);color:#fff;
  font-size:.66rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}

.guide-resultat-corps{display:flex;flex-direction:column;flex:1}

.guide-score{margin-bottom:.6rem}
.guide-score-valeur{font-size:1.5rem;font-weight:800;line-height:1;color:var(--azur);
  font-variation-settings:'wdth' 112}
.guide-score-texte{margin-left:.35rem;font-size:.76rem;font-weight:600;color:var(--gris)}
.guide-score-jauge{margin-top:.45rem;height:5px;border-radius:999px;
  background:var(--ligne);overflow:hidden}
.guide-score-jauge span{display:block;height:100%;border-radius:999px;background:var(--azur)}

.guide-resultat h2{margin-bottom:.45rem;font-size:1rem;text-wrap:balance}
.guide-resultat h2 a:hover{color:var(--azur)}
.guide-prix{display:flex;align-items:baseline;flex-wrap:wrap;gap:.45rem;margin-bottom:.8rem}
.guide-prix b{font-size:1.05rem;font-weight:800}
.guide-prix s{font-size:.82rem;color:var(--gris)}
.guide-rupture{font-size:.72rem;font-weight:700;color:var(--brique)}

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

.guide-arguments{display:grid;gap:.38rem;margin-bottom:1rem}
.guide-arguments li{position:relative;padding-left:1.4rem;font-size:.82rem;line-height:1.4;
  color:#243B52}
.guide-arguments li::before{position:absolute;left:0;top:0;font-weight:800}
.guide-arguments .est-pour::before{content:"\2713";color:#1B8A4B}
.guide-arguments .est-contre::before{content:"\2013";color:var(--gris)}

/* Le bouton passe avant le détail des notes : qui est convaincu par le
   pourcentage et les deux arguments n'a pas à franchir sept barres pour
   trouver le lien. La marge auto le pousse en bas des cartes courtes, si bien
   que les trois boutons s'alignent. */
.guide-resultat .btn{margin-top:auto;width:100%}

.guide-axes{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--ligne)}
.guide-axe{display:grid;grid-template-columns:5.8rem minmax(0,1fr) 1.6rem;align-items:center;
  gap:.5rem;margin-bottom:.35rem}
.guide-axe-nom{font-size:.72rem;font-weight:600;color:var(--gris);line-height:1.2}
/* Pas d'overflow:hidden : le repère de la cible dépasse volontairement en
   haut et en bas de la piste. La barre se contente d'un rayon identique. */
.guide-axe-piste{position:relative;height:7px;border-radius:999px;background:var(--chaux)}
.guide-axe-note{display:block;height:100%;border-radius:999px;background:var(--court)}
.guide-axe-cible{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--brique);
  transform:translateX(-1px)}
.guide-axe-valeur{font-size:.74rem;font-weight:700;text-align:right;
  font-variant-numeric:tabular-nums}
.guide-axes-legende{margin-top:.7rem;font-size:.7rem;color:var(--gris);line-height:1.4}

.guide-suite{margin-top:1.4rem}
.guide-vide{padding:1.4rem;border:1px solid var(--ligne);border-radius:var(--r-carte);
  background:var(--blanc);color:var(--gris)}

@media(max-width:1000px){
  /* Trois colonnes deviennent illisibles avant la tablette : on repasse à
     deux, la troisième raquette prenant toute la largeur en dessous. */
  .guide-resultats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .guide-resultats{grid-template-columns:1fr}
  .guide-resultat-visuel{height:190px}
  .guide-axe{grid-template-columns:6.5rem minmax(0,1fr) 1.8rem}
}

/* ---------- Les trois formes, sous les résultats ---------- */
.guide-formes{margin-top:clamp(2rem,4vw,3rem);padding-top:clamp(1.6rem,3vw,2.4rem);border-top:1px solid var(--ligne)}
.guide-formes-texte{color:var(--gris);margin:.6rem 0 1.6rem;max-width:60ch}
/* Quatre formes au catalogue : deux par deux plutôt qu'une rangée de trois
   qui laisse la dernière toute seule en dessous. */
.formes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.forme{border:2px solid var(--ligne);border-radius:var(--r-carte);padding:1.5rem;background:var(--chaux);
  display:grid;grid-template-columns:auto 1fr;gap:1.25rem;align-items:center;text-align:left;
  transition:border-color .16s ease, background-color .16s ease;}
.forme:hover{border-color:var(--azur);background:var(--azur-pale)}
.forme svg{width:78px;color:var(--court)}
.forme h3{margin-bottom:.35rem}
.forme p{font-size:.84rem;color:var(--gris);line-height:1.5}
.forme-spec{margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--ligne);font-size:.78rem;color:var(--encre);font-weight:600}
.forme-tag{display:inline-block;margin-top:.5rem;font-size:.74rem;font-weight:700;color:var(--azur)}
@media(max-width:820px){
  .formes{grid-template-columns:1fr}
}