/* ==========================================================================
   CHOIX DU PERSONNAGE (app/Views/partials/gender-choice.php)
   --------------------------------------------------------------------------
   Deux cartes côte à côte (50 % chacune) : portrait rectangulaire sur toute la
   largeur et libellé « Enquêteur » / « Enquêteuse ». Boutons radio natifs masqués visuellement,
   la carte cochée est encadrée. Chargé par l'inscription et « Mon profil ».
   ========================================================================== */

.gender-choice{margin:0;padding:0;border:0;min-width:0}
.gender-choice__legend{padding:0;margin-bottom:.6rem;font-size:1rem;font-weight:600}
.gender-choice__options{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

.gender-card{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:.6rem;
  padding:.45rem .45rem .75rem;
  border:2px solid rgba(105,170,245,.35);border-radius:.9rem;
  background:rgba(4,16,40,.55);
  cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s;
}
.gender-card:hover{border-color:rgba(120,190,255,.75);background:rgba(20,60,120,.45)}

/* bouton radio natif : invisible mais présent (clavier, lecteurs d'écran) */
.gender-card__input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}

.gender-card__avatar{
  display:block;width:100%;height:auto;aspect-ratio:1;border-radius:.6rem;object-fit:cover;
  border:1px solid rgba(160,205,255,.4);
  transition:border-color .2s,box-shadow .2s;
}
.gender-card__label{font-size:1.05rem;font-weight:700;color:#e6f0ff}

/* carte sélectionnée */
.gender-card:has(.gender-card__input:checked){
  border-color:#3aa0ff;
  background:linear-gradient(180deg,rgba(30,144,255,.28),rgba(11,102,212,.18));
  box-shadow:0 0 1.2rem rgba(30,150,255,.45),inset 0 0 .8rem rgba(80,170,255,.2);
}
.gender-card:has(.gender-card__input:checked) .gender-card__avatar{border-color:rgba(255,255,255,.85)}
.gender-card:has(.gender-card__input:checked) .gender-card__label{color:#fff}

/* focus clavier */
.gender-card:has(.gender-card__input:focus-visible){outline:2px solid #8fd0ff;outline-offset:2px}

.gender-choice .field__error{margin-top:.5rem;font-size:.92rem;color:#ffb3b3}

@media (max-width:420px){
  .gender-choice__options{gap:.6rem}
}