/* ═══════════════════════════════════════════════════════════
   L'ecran de COMPARAISON des quatre auto-ecoles  BoostDriving

   Charge par trouver-mon-auto-ecole.php et par le banc d'essai
   test-comparaison.php. Il ne modifie AUCUNE regle existante : toutes
   ses classes sont prefixees .bdmc, et il ne touche ni a .bdm-card, ni
   a .bdm-panel, ni a quoi que ce soit du questionnaire. L'ordre de
   chargement n'a donc aucune importance pour lui.

   Ecrit POUR 390 px, et pense pour cette largeur d'abord :

     - la grille est en 2 x 2, pas en 4 colonnes. Quatre colonnes sur
       un telephone donnent 85 px par ecole : un prix a quatre
       chiffres n'y tient pas, un nom encore moins. Deux rangees de
       deux laissent 174 px par case, et les quatre restent visibles
       ensemble, ce qui est TOUT l'interet de l'ecran ;
     - les quatre colonnes reviennent a 860 px, quand chaque case
       peut a nouveau depasser 170 px ;
     - le panneau occupe tout l'ecran sur telephone, et devient une
       boite centree a partir de 900 px.

   Le module vit HORS de .matching-page (il s'injecte dans <body>).
   Il redeclare donc sur .bdmc les variables --bdm-* dont il se sert,
   et les quelques regles de .bdm-btn : sans cela, ses boutons
   perdraient tout style des qu'on le poserait sur une autre page.
   ═══════════════════════════════════════════════════════════ */

.bdmc {
  /* Alias locaux : memes valeurs que .matching-page, redeclarees ici
     parce que l'ecran s'ouvre en dehors de ce conteneur. */
  --bdm-blue:      var(--bd2-accent);
  --bdm-blue-deep: var(--bd2-accent-deep);
  --bdm-blue-soft: var(--bd2-accent-soft);
  --bdm-blue-tint: var(--bd2-accent-tint);

  --bdm-ink:   #0D1220;
  --bdm-ink60: #3A4055;
  --bdm-ink40: #6B7280;
  --bdm-ink20: #9AA0B0;

  --bdm-paper: #F6F4EF;
  --bdm-card:  #FFFFFF;
  --bdm-line:  #E6E2D7;
  --bdm-line2: #F0EDE3;

  --bdm-good:      var(--bd2-green);
  --bdm-good-soft: var(--bd2-green-soft);
  --bdm-grad:      var(--bd2-grad);

  position: fixed;
  inset: 0;
  z-index: 2000;
  font-family: var(--bd2-font);
  color: var(--bdm-ink);
}
.bdmc[hidden] { display: none; }

/* Le fond de page ne defile plus tant que l'ecran est ouvert : deux
   zones qui defilent l'une derriere l'autre rendent le geste illisible. */
html.bdmc-fige,
html.bdmc-fige body { overflow: hidden; }

.bdmc__voile {
  position: absolute;
  inset: 0;
  background: rgba(13, 18, 32, .45);
  animation: bdIn .18s var(--bd2-ease) both;
}

/* ─── Le panneau ──────────────────────────────────────────── */

.bdmc__panneau {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bdm-paper);
  animation: bdmcMonte .26s var(--bd2-ease-out) both;
}
.bdmc__panneau:focus { outline: none; }

@keyframes bdmcMonte {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bdmc__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 10px;
  background: var(--bdm-card);
  border-bottom: 1px solid var(--bdm-line2);
}
.bdmc__head-txt { min-width: 0; flex: 1 1 auto; }
.bdmc__sur {
  margin: 0;
  font-family: var(--bd2-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: var(--bd2-ls-caps);
  text-transform: uppercase;
  color: var(--bdm-blue-deep);
}
.bdmc__titre {
  margin: 1px 0 0;
  font-family: var(--bd2-font-title);
  font-size: 24px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: var(--bd2-ls-title);
  color: var(--bdm-ink);
}
.bdmc__fermer {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bdm-line);
  border-radius: var(--bd2-r-pill);
  background: var(--bdm-card);
  color: var(--bdm-ink60);
  cursor: pointer;
  transition: border-color .16s var(--bd2-ease), color .16s var(--bd2-ease);
}
.bdmc__fermer:hover { border-color: var(--bdm-ink); color: var(--bdm-ink); }

/* ─── Les onglets ─────────────────────────────────────────── */

.bdmc__onglets {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  padding: 10px 16px 11px;
  background: var(--bdm-card);
  border-bottom: 1px solid var(--bdm-line);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.bdmc__onglets::-webkit-scrollbar { display: none; }

.bdmc__onglet {
  flex: 0 0 auto;
  padding: 9px 15px;
  border: 1px solid var(--bdm-line);
  border-radius: var(--bd2-r-pill);
  background: var(--bdm-card);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--bdm-ink60);
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s var(--bd2-ease), color .18s var(--bd2-ease),
              border-color .18s var(--bd2-ease), transform .18s var(--bd2-ease-pop);
}
.bdmc__onglet:hover { border-color: var(--bdm-ink20); color: var(--bdm-ink); }
.bdmc__onglet.is-actif {
  background: var(--bdm-ink);
  border-color: var(--bdm-ink);
  color: #FFFFFF;
  transform: translateY(-1px);
}

/* ─── La zone qui defile ──────────────────────────────────── */

.bdmc__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px 28px;
}

/* Le reglage : la duree du forfait, sur l'onglet Prix. C'est une
   question posee AVANT la reponse, elle se lit donc au-dessus des
   cases, pas dedans. */
.bdmc__reglage {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.bdmc__reglage[hidden] { display: none; }
.bdmc__reglage-lib {
  font-family: var(--bd2-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: var(--bd2-ls-caps);
  text-transform: uppercase;
  color: var(--bdm-ink40);
}
.bdmc__seg {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  background: var(--bdm-line2);
  border: 1px solid var(--bdm-line);
  border-radius: var(--bd2-r-pill);
}
.bdmc__seg-btn {
  padding: 7px 16px;
  border: 0;
  border-radius: var(--bd2-r-pill);
  background: transparent;
  font-size: 13.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--bdm-ink60);
  cursor: pointer;
  transition: background .18s var(--bd2-ease), color .18s var(--bd2-ease), box-shadow .18s var(--bd2-ease);
}
.bdmc__seg-btn.is-actif {
  background: var(--bdm-card);
  color: var(--bdm-ink);
  box-shadow: 0 1px 2px rgba(13, 18, 32, .10);
}

/* ─── La grille : 2 x 2 sur telephone ─────────────────────── */

.bdmc__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}
.bdmc__grille.is-entree > .bdmc-case {
  animation: bdmcPose .34s var(--bd2-ease-out) both;
  animation-delay: calc(var(--i) * 45ms);
}
@keyframes bdmcPose {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ─── Une case = une auto-ecole ───────────────────────────── */

.bdmc-case {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px 11px 0;
  background: var(--bdm-card);
  border: 1px solid var(--bdm-line);
  border-radius: var(--bd2-r-lg);
  box-shadow: var(--bd2-shadow-soft);
  transition: border-color .2s var(--bd2-ease), box-shadow .2s var(--bd2-ease);
}
.bdmc-case__head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--bdm-line2);
  min-width: 0;
}
.bdmc-case__photo {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  object-fit: cover;
  background: var(--bdm-line2);
}
.bdmc-case__photo--vide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--bdm-ink40);
}
.bdmc-case__ident { min-width: 0; }
.bdmc-case__nom {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--bdm-ink);
  /* Deux lignes, ni plus ni MOINS : la hauteur est reservee meme quand
     le nom tient sur une seule ligne. Sans ce plancher, un nom court et
     un nom long decalent les deux cases d'une ligne, et les chiffres
     qu'on veut comparer ne sont plus a la meme hauteur. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;   /* 2 lignes a line-height 1.2 */
}
.bdmc-case__lieu {
  margin: 2px 0 0;
  font-size: 10.5px;
  line-height: 1.25;
  color: var(--bdm-ink40);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bdmc-case__corps {
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 10px;
}

/* Le chiffre qui compare. Chasse fixe (tabular-nums) : sans elle,
   deux prix de meme longueur ne s'alignent pas d'une case a l'autre
   et l'oeil ne peut plus les superposer. */
.bdmc-case__chiffre {
  margin: 0;
  font-size: 25px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--bdm-ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}
.bdmc-case__chiffre--sm { font-size: 21px; }
.bdmc-case__chiffre span {
  font-size: .55em;
  font-weight: 700;
  color: var(--bdm-ink40);
  letter-spacing: 0;
}
.bdmc-case__barre {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--bdm-ink20);
  text-decoration: line-through;
}
.bdmc-case__cond {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--bdm-ink60);
}
.bdmc-case__meta {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--bdm-ink40);
}
.bdmc-case__meta strong { color: var(--bdm-ink60); font-weight: 700; }
.bdmc-case__meta--langues { font-style: italic; }
.bdmc-case__note {
  margin: 8px 0 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--bdm-ink60);
}
.bdmc-case__note span { font-weight: 500; color: var(--bdm-ink40); }

/* Une duree que l'ecole ne vend pas se DIT. Elle ne laisse pas un
   blanc, qui se lirait comme un prix manquant. */
.bdmc-case__absent { padding: 2px 0; }
.bdmc-case__absent-h {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--bdm-ink20);
}
.bdmc-case__absent-t {
  display: block;
  margin-top: 2px;
  font-size: 16px;
  font-weight: 700;
  color: var(--bdm-ink20);
}
.bdmc-case__absent-n {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--bdm-ink40);
}
.bdmc-case__vide {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--bdm-ink20);
  font-style: italic;
}

.bdmc-case__plus {
  flex: 0 0 auto;
  margin: 0 -11px;
  padding: 9px 8px;
  border: 0;
  border-top: 1px solid var(--bdm-line2);
  border-radius: 0 0 var(--bd2-r-lg) var(--bd2-r-lg);
  background: transparent;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--bdm-blue-deep);
  cursor: pointer;
  transition: background .16s var(--bd2-ease);
}
.bdmc-case__plus:hover { background: var(--bdm-blue-tint); }
/* Le nom dans le bouton sert au lecteur d'ecran et aux grands
   ecrans ; a 174 px il ferait deborder la ligne. */
.bdmc-case__plus-nom {
  display: none;
  font-weight: 500;
  color: var(--bdm-ink40);
}

/* La source des horaires montres. « Conduite » est la bonne reponse,
   « Bureau » est un repli assume : les deux ne se lisent pas pareil, et
   la case doit dire lequel elle affiche. */
.bdmc-case__source {
  margin: 0 0 5px;
  font-family: var(--bd2-font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: var(--bd2-ls-caps);
  text-transform: uppercase;
}
.bdmc-case__source--conduite { color: var(--bdm-blue-deep); }
.bdmc-case__source--bureau   { color: var(--bdm-ink20); }

/* ─── Les sept pastilles de jours ─────────────────────────── */

.bdmc-dots {
  display: flex;
  gap: 3px;
  margin: 9px 0 0;
}
.bdmc-dot {
  flex: 1 1 0;
  min-width: 0;
  height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--bdm-line2);
  font-size: 9.5px;
  font-weight: 800;
  color: var(--bdm-ink20);
}
.bdmc-dot.is-on {
  background: var(--bdm-blue-soft);
  color: var(--bdm-blue-deep);
}

/* ─── Puces (samedi, soir, permis, langues) ───────────────── */

.bdmc-puces {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
}
.bdmc-puce {
  padding: 3px 7px;
  border-radius: var(--bd2-r-pill);
  background: var(--bdm-line2);
  border: 1px solid var(--bdm-line);
  font-size: 10px;
  font-weight: 600;
  color: var(--bdm-ink60);
  white-space: nowrap;
}
.bdmc-puces--fortes .bdmc-puce {
  background: var(--bdm-blue-tint);
  border-color: var(--bdm-blue-soft);
  color: var(--bdm-blue-deep);
  font-weight: 700;
}

/* ─── Liste des moyens de paiement ────────────────────────── */

/* Les cinq lignes sont TOUJOURS les cinq memes, dans le meme ordre :
   c'est ce qui permet de balayer une ligne d'une case a l'autre. La
   marque reste dans l'encre du texte, sans vert ni rouge : l'ecran
   constate, il n'approuve pas. */
.bdmc-servs {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
}
.bdmc-serv {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--bdm-ink20);
}
.bdmc-serv.is-on { color: var(--bdm-ink); font-weight: 600; }
.bdmc-serv__marque {
  flex: 0 0 auto;
  width: 12px;
  text-align: center;
  font-weight: 700;
  color: var(--bdm-ink10, #C9CDD6);
}
.bdmc-serv.is-on .bdmc-serv__marque { color: var(--bdm-ink); }

/* ─── Jauge de reussite ───────────────────────────────────── */

.bdmc-jauge {
  height: 6px;
  margin: 8px 0 0;
  border-radius: var(--bd2-r-pill);
  background: var(--bdm-line2);
  overflow: hidden;
}
.bdmc-jauge__barre {
  display: block;
  height: 100%;
  width: var(--bdmc-taux, 0%);
  border-radius: inherit;
  background: var(--bdm-blue);
  animation: bdBar .5s var(--bd2-ease-out) both;
}

/* ─── Le pied de page ─────────────────────────────────────── */

.bdmc__pied {
  margin: 16px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--bdm-ink40);
}

/* ─── Le tiroir de detail ─────────────────────────────────── */

.bdmc-tiroir {
  position: absolute;
  inset: 0;
  z-index: 5;
}
.bdmc-tiroir[hidden] { display: none; }
.bdmc-tiroir__voile {
  position: absolute;
  inset: 0;
  background: rgba(13, 18, 32, .45);
  animation: bdIn .16s var(--bd2-ease) both;
}
.bdmc-tiroir__boite {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 86%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 16px 24px;
  background: var(--bdm-card);
  border-radius: var(--bd2-r-xl) var(--bd2-r-xl) 0 0;
  box-shadow: 0 -14px 40px -20px rgba(13, 18, 32, .35);
  animation: bdmcTiroirMonte .26s var(--bd2-ease-out) both;
}
.bdmc-tiroir__boite:focus { outline: none; }
@keyframes bdmcTiroirMonte {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.bdmc-tiroir__poignee {
  display: block;
  width: 38px;
  height: 4px;
  margin: 0 auto 12px;
  border-radius: var(--bd2-r-pill);
  background: var(--bdm-line);
}
.bdmc-tiroir__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--bdm-line2);
}
.bdmc-tiroir__head .bdmc-case__photo { width: 40px; height: 40px; border-radius: 12px; }
.bdmc-tiroir__nom {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
}
.bdmc-tiroir__lieu {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--bdm-ink40);
}
.bdmc-tiroir__score {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 6px 11px;
  border-radius: var(--bd2-r-pill);
  background: var(--bdm-good-soft);
  color: var(--bdm-good);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.bdmc-tiroir__stitre {
  margin: 16px 0 8px;
  font-family: var(--bd2-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: var(--bd2-ls-caps);
  text-transform: uppercase;
  color: var(--bdm-ink40);
}
.bdmc-tiroir__stitre:first-of-type { margin-top: 4px; }
.bdmc-tiroir__vide,
.bdmc-tiroir__txt {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--bdm-ink60);
}
.bdmc-tiroir__vide { color: var(--bdm-ink20); font-style: italic; }

.bdmc-tiroir__lignes { margin: 0; }
.bdmc-tiroir__ligne {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--bdm-line2);
  font-size: 13.5px;
}
.bdmc-tiroir__ligne:last-child { border-bottom: 0; }
.bdmc-tiroir__ligne dt { color: var(--bdm-ink60); font-weight: 600; }
.bdmc-tiroir__ligne dd { margin: 0; color: var(--bdm-ink); font-variant-numeric: tabular-nums; }
.bdmc-tiroir__ligne.is-off dt,
.bdmc-tiroir__ligne.is-off dd { color: var(--bdm-ink20); font-weight: 500; }

.bdmc-tiroir__formules { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.bdmc-tiroir__formule {
  padding: 10px 12px;
  border: 1px solid var(--bdm-line);
  border-radius: var(--bd2-r-md);
  background: var(--bdm-paper);
}
.bdmc-tiroir__formule-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.bdmc-tiroir__formule-nom { font-size: 13.5px; font-weight: 700; min-width: 0; }
.bdmc-tiroir__formule-prix {
  flex: 0 0 auto;
  font-size: 14.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bdmc-tiroir__formule-prix s {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--bdm-ink20);
  text-align: right;
}
.bdmc-tiroir__formule-cond {
  margin: 3px 0 0;
  font-size: 11.5px;
  color: var(--bdm-ink40);
}
.bdmc-tiroir__formule-desc {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--bdm-ink60);
}

/* Rapport au CPF, dans le tiroir de comparaison (10/09/2026).
   L'ecran principal de l'assistant porte deja cette mention sous le libelle de
   chaque formule ; ce tiroir affichait les MEMES donnees sans elle, et c'est
   pourtant l'ecran ou l'eleve met deux ou trois prix cote a cote. Un tarif de
   grille CPF ne se compare pas au tarif standard de l'ecole d'a cote : il doit
   se voir ici plus qu'ailleurs.
   La mention vit sous le libelle, dans la colonne de GAUCHE : la colonne de
   droite ne porte que des montants, qui se lisent a la verticale. */
.bdmc-tiroir__formule-cpf {
  display: inline-block;
  margin: 4px 0 0;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.6;
  border: 1px solid currentColor;
  cursor: help;
}
.bdmc-tiroir__formule-cpf--reserve { color: var(--bdm-blue-deep); }
.bdmc-tiroir__formule-cpf--avantage { color: var(--bdm-good); }

.bdmc-tiroir__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 18px;
}

/* Les boutons : le module s'ouvre hors de .matching-page, il redit
   donc ici le strict necessaire, sans toucher aux regles d'origine. */
.bdmc .bdm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 13px 18px;
  border-radius: var(--bd2-r-pill);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--bdm-ink);
  background: var(--bdm-card);
  cursor: pointer;
  transition: transform .16s var(--bd2-ease), box-shadow .16s var(--bd2-ease),
              background .16s var(--bd2-ease), border-color .16s var(--bd2-ease);
}
.bdmc .bdm-btn--secondary { border-color: var(--bdm-line); }
.bdmc .bdm-btn--secondary:hover { border-color: var(--bdm-blue); }
.bdmc .bdm-btn--primary {
  background: var(--bdm-grad);
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: var(--bd2-shadow-glow);
}
.bdmc .bdm-btn--primary:hover { filter: brightness(1.03); transform: translateY(-1px); }

/* ═══ Ecrans plus larges ═══════════════════════════════════ */

/* A partir de 560 px, les cases respirent : le nom du bouton
   « Détail » peut reapparaitre. */
@media (min-width: 560px) {
  .bdmc-case__plus-nom { display: inline; }
  .bdmc__scroll { padding: 18px 24px 32px; }
  .bdmc__head, .bdmc__onglets { padding-left: 24px; padding-right: 24px; }
}

/* A 860 px, chaque colonne repasse au-dessus de 170 px : les quatre
   ecoles tiennent enfin sur UNE rangee, ce qui est la meilleure
   lecture possible. C'est le seul moment ou passer en 4 colonnes
   ameliore quelque chose. */
@media (min-width: 860px) {
  .bdmc__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .bdmc-case { padding: 15px 14px 0; }
  .bdmc-case__plus { margin: 0 -14px; }
  .bdmc-case__nom { font-size: 13.5px; }
  .bdmc-case__chiffre { font-size: 29px; }
  .bdmc-case__chiffre--sm { font-size: 24px; }
  .bdmc-case__photo { width: 34px; height: 34px; }
  .bdmc-serv { font-size: 12.5px; }
}

/* A 900 px, le plein ecran n'a plus de sens : le panneau devient une
   boite posee sur le voile, et le tiroir se centre avec elle. */
@media (min-width: 900px) {
  .bdmc__panneau {
    inset: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(1120px, calc(100vw - 48px));
    max-height: min(880px, calc(100vh - 48px));
    border-radius: var(--bd2-r-xl);
    overflow: hidden;
    box-shadow: 0 40px 90px -40px rgba(13, 18, 32, .5);
  }
  @keyframes bdmcMonte {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
  }
  .bdmc__titre { font-size: 28px; }
  .bdmc-tiroir__boite {
    left: 50%;
    right: auto;
    bottom: 50%;
    transform: translate(-50%, 50%);
    width: min(620px, calc(100vw - 48px));
    max-height: min(760px, calc(100vh - 64px));
    border-radius: var(--bd2-r-xl);
  }
  @keyframes bdmcTiroirMonte {
    from { opacity: 0; transform: translate(-50%, calc(50% + 18px)); }
    to   { opacity: 1; transform: translate(-50%, 50%); }
  }
  .bdmc-tiroir__poignee { display: none; }
}

/* ═══ Mouvement reduit : la mise en scene s'eteint, la lecture
   reste identique. ════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .bdmc__voile,
  .bdmc__panneau,
  .bdmc-tiroir__voile,
  .bdmc-tiroir__boite,
  .bdmc__grille.is-entree > .bdmc-case,
  .bdmc-jauge__barre { animation: none !important; }
  .bdmc__onglet,
  .bdmc-case,
  .bdmc .bdm-btn { transition: none !important; }
}