/* ===============================
   PREMIUM_MOBILE.CSS — Mobile & contrôle UI
   (fusion de premium_mobile + media queries inline)
   =============================== */

/* Barre du haut alternative (si utilisée) */
.top-navbar{
  background:#fff;
  color:#4a4a4a;
  text-align:center;
  font-weight:500;
  font-size:14px;
  padding:8px;
  border-bottom:1px solid #e0e0e0;
  position:sticky; top:0; z-index:1000;
}

/* Bouton principal "Valider" (DOB) */
.btn-primary-main{
  background: linear-gradient(90deg, #4a90e2, #357ab8);
  color:#fff !important;
  border:none;
  border-radius:8px;
  padding:10px 18px;
  font-weight:500;
  width:100%;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
  text-align:center;
}
.btn-primary-main:active{
  background: linear-gradient(90deg, #357ab8, #2c5f91);
}

/* Style global mobile (lissage) */
body{
  background:#f6f9fc;              /* cohérent avec desktop gradient */
  font-family:'Inter', sans-serif;
}
.card{
  border:none;
  border-radius:14px;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
  background:#fff;
}

/* Apparence des questions (flat) */
.mb-3.text-sm,
.mb-6[data-cle]{
  padding-bottom:12px;
  margin-bottom:18px;
  border-bottom:1px solid #e0e0e0;
}
.page > div:last-child{
  border-bottom:none !important;
  margin-bottom:0 !important;
}

/* Labels */
label.form-label,
.block.text-lg{
  font-weight:500;
  font-size:15px;
  color:#1c1c1c;
  margin-bottom:6px;
  display:block;
}

/* Radios & checkboxes modernisés */
.option-radio,
.option-checkbox{
  accent-color:#4a90e2;
  width:18px; height:18px; margin-right:8px;
}
.option-radio + span,
.option-checkbox + span{
  font-size:15px;
  color:#333;
}

/* Groupes alignés */
.form-check{
  display:flex; align-items:center; gap:10px;
  margin-bottom:8px;
}

/* Footer de navigation (si vous le réactivez un jour) */
.navigation-footer{
  background:#fff;
  padding:8px 10px;
  border-top:1px solid #e0e0e0;
  display:flex; justify-content:space-between; align-items:center;
  position:sticky; bottom:0; z-index:1000;
}
.navigation-footer button{
  border-radius:8px; padding:8px 16px; font-weight:500;
}

/* Progress fin (variante mobile) */
.progress{
  height:6px;
  background:#e0e0e0;
  border-radius:4px;
  margin-top:4px;
}
.progress-bar{
  background: linear-gradient(90deg, #4a90e2, #357ab8);
  border-radius:4px;
}

/* Boutons de genre (écran DOB) */
.btn-outline-gender{
  border:1px solid #4a90e2;
  border-radius:8px;
  color:#4a90e2;
  padding:8px 14px;
  font-weight:500;
  background:#fff;
  cursor:pointer;
}
.btn-check:checked + .btn-outline-gender,
.btn-outline-gender:hover{
  background: linear-gradient(90deg, #4a90e2, #357ab8);
  color:#fff;
  border-color:transparent;
}
.gender-radio-group label span{
  white-space:nowrap;
  font-weight:500;
}

/* Hero cartes (ratio & cover déjà défini en desktop) – on ajuste juste le comportement XS */
@media (max-width: 380px){
  .welcome-title{ font-size:20px; }
  .welcome-hero{ aspect-ratio:3 / 2; height:auto; }
  .welcome-tests{ grid-template-columns:1fr; }
}
/* Ajustements d’alignement image par carte */
@media (max-width: 480px){
  .hero-hamilton img{ object-position:52% 45%; }
  .hero-fagerstrom img{ object-position:48% 50%; }
  .hero-epworth img{ object-position:50% 50%; }
}

/* Sur mobile : 2 colonnes */
@media (max-width: 767px){
  .welcome-doctors{
    column-count: 2;
    column-gap: 14px;
    font-size: 12px;
  }
}

/* =========================================
   Responsive tuiles + liste médecins (mobile)
   ========================================= */

/* Tuiles — sur mobile on passe à 1 ou 2 colonnes */
/* Tuiles compactes — 2 colonnes même sur mobile */
.welcome-actions {
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
}


@media (min-width: 420px) {
  .welcome-actions { grid-template-columns: repeat(2, minmax(0,1fr)); }
}


/* Médecins — 2 par ligne sur mobile, 3 dès ~480px */
.doctor-list{
  grid-template-columns: repeat(2, minmax(0,1fr));
  font-size: 12px;      /* un cran plus petit sur mobile */
  margin-bottom: 18px;
}
@media (min-width: 480px){
  .doctor-list{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.quiz-feedback {
  margin-top: 15px;
  padding: 12px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.quiz-feedback.correct {
  background-color: #e6ffed;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.quiz-feedback.incorrect {
  background-color: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.quiz-feedback i {
  font-size: 20px;
}
/* Marges latérales confort sur mobile pour le quiz */
@media (max-width: 767px){
  #quiz-container{
    margin-left: 12px;
    margin-right: 12px;
  }
}

.dashboard-main-body{
  justify-content: center !important;
  width: 100%;
}

.repeatable .repeatable-item input.form-control {
  min-height: 44px;
}
.repeatable .repeatable-remove {
  min-width: 40px;
}

/* ===============================
   VERSUS MODE (mobile + commun)
   =============================== */
.vs-option {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 12px;
  padding: 12px 14px;
  min-height: 56px;
  transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.vs-option input[type="radio"]{
  width: 18px; height: 18px;
  flex: 0 0 18px;
  margin: 0 2px 0 2px;
}
.vs-option span { flex: 1 1 auto; line-height: 1.3; }
.vs-option:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }

.vs-option.correct {
  border-color: #198754 !important; /* success */
  background-color: rgba(25,135,84,.08) !important;
}
.vs-option.wrong {
  border-color: #dc3545 !important; /* danger */
  background-color: rgba(220,53,69,.08) !important;
}
.vs-option .vs-badge {
  margin-left: auto;
}

/* Timer pastille plus jolie */
.vs-timer-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(180deg, rgba(13,110,253,.10), rgba(13,110,253,.05));
  box-shadow: 0 2px 6px rgba(0,0,0,.06) inset;
  font-weight: 700;
}
.vs-timer-ico{ opacity:.75 }
#vs-timer{ min-width: 20px; text-align:center; display:inline-block; }
.vs-timer-unit{ opacity:.7; margin-left:2px; }


#vs-feedback { font-weight: 600; }
#vs-feedback.text-success::before { content: "✔ "; }
#vs-feedback.text-danger::before  { content: "✖ "; }
#vs-feedback.text-muted::before   { content: "⏱ "; }

/* === Ressources médicales — alignement absolu des icônes (mobile) === */
#res-cat-list .action-card.res-cat{
  padding-left: 66px !important;  /* retrait texte identique pour toutes les cartes */
}

#res-cat-list .action-card.res-cat .res-icon{
  left: 14px;
  width: 32px;                    /* icône PLUS GRANDE sur mobile aussi */
  height: 32px;
}

#res-cat-list .action-card.res-cat .res-icon i{
  font-size: 22px;
  line-height: 1;
  display: block;
}