/* ============================================================
   PAGES DE GUIDE (24/09/2026) : prix-permis-de-conduire,
   aides-permis-de-conduire, taux-de-reussite-auto-ecole.
   Complète assets/style/socle.css (variables --rf-*) et
   l'ancien fichier commun de maquette (fondu dans assets/style/socle.css et les feuilles de page) (bd-*, dont la carte avec photo).
   Classes préfixées bd-gui- : rien de commun avec les trois autres
   guides du même chantier (préfixe bd-gd2-).
   ============================================================ */

/* Réponse chiffrée du haut de page, quand il n'y a pas deux valeurs
   à comparer (sinon on reprend la carte à deux barres du modèle, .rf-prix) */

.bd-gui-reponse {
  margin: 0;
  padding: 32px;
  background: var(--rf-blanc);
  border: 1px solid var(--rf-ligne);
  border-radius: var(--rf-rayon);
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04), 0 24px 48px -24px rgba(3, 105, 161, 0.22);
  text-align: center;
}

.bd-gui-reponse__valeur {
  font-size: var(--rf-t-page);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--rf-encre);
  margin: 0 0 12px;
  font-variant-numeric: tabular-nums;
}

.bd-gui-reponse__legende {
  font-size: var(--rf-t-inter);
  font-weight: 600;
  color: var(--rf-gris);
  margin: 0 0 8px;
}

.bd-gui-reponse__detail {
  font-size: var(--rf-t-petit);
  color: var(--rf-gris-clair);
  margin: 0;
}

/* Tableau de données (départements, dispositifs...) */

.bd-gui-tableau {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--rf-ligne);
  border-radius: var(--rf-rayon);
}

.bd-gui-tableau table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
}

.bd-gui-tableau th,
.bd-gui-tableau td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  font-size: var(--rf-t-petit);
  color: var(--rf-gris);
}

.bd-gui-tableau thead th {
  font-weight: 600;
  color: var(--rf-gris-clair);
  background: #F8FAFC;
  border-bottom: 1px solid var(--rf-ligne);
  white-space: nowrap;
}

.bd-gui-tableau tbody tr + tr td,
.bd-gui-tableau tbody tr + tr th {
  border-top: 1px solid var(--rf-ligne);
}

.bd-gui-tableau tbody th {
  font-weight: 600;
  color: var(--rf-encre);
  text-align: left;
}

.bd-gui-tableau a {
  color: var(--rf-lien);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bd-gui-non-publiable {
  color: var(--rf-gris-clair);
  font-style: italic;
}

.bd-gui-vide {
  padding: 24px 16px;
  text-align: center;
  color: var(--rf-gris-clair);
}

/* Une ligne dont le dispositif est supprimé reste lisible mais s'efface un peu. */
.bd-gui-tableau tr.bd-gui-ligne-eteinte td,
.bd-gui-tableau tr.bd-gui-ligne-eteinte th {
  opacity: 0.6;
}

/* Petites pastilles d'état (aides : en vigueur / suspendu / supprimé) */

.bd-gui-etat {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: var(--rf-t-petit);
  font-weight: 600;
  white-space: nowrap;
}

.bd-gui-etat--vigueur {
  background: var(--rf-accent-doux);
  color: var(--rf-lien);
}

.bd-gui-etat--suspendu {
  background: #FEF3C7;
  color: #92400E;
}

.bd-gui-etat--eteint {
  background: #F1F5F9;
  color: var(--rf-gris-clair);
}

/* Liste condensée (options de prix, dispositifs par situation) */

.bd-gui-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
}

.bd-gui-liste li {
  padding-top: 20px;
  border-top: 1px solid var(--rf-ligne);
  color: var(--rf-gris);
}

.bd-gui-liste strong {
  color: var(--rf-encre);
}

/* Téléphone */

@media (max-width: 640px) {
  .bd-gui-reponse {
    padding: 24px 20px;
  }

  .bd-gui-tableau th,
  .bd-gui-tableau td {
    padding: 12px 10px;
  }
}

/* ============================================================
   Barre d'heures en mots (ex maquette.css). Colonne de gauche des
   lignes rf-heures__ligne dont le libelle est un mot (« Automatique »),
   pas un pourcentage : 44px la laissait deborder de 3px sur telephone.
   ============================================================ */
/* Barre d'heures dont le libellé est un mot (« Automatique »), pas un
   pourcentage : la colonne de 44 px du socle le laissait déborder de 3 px
   sur téléphone. Même largeur sur chaque ligne, pour que les barres restent
   comparables. */
.bd-heures--mots .rf-heures__ligne {
  grid-template-columns: 44px minmax(0, 1fr) 92px;
}