/* ═══════════════════════════════════════════════════════════
   Pop-up d'apercu d'une auto-ecole depuis les resultats du matching
   BoostDriving

   Habille la coquille HTML deja posee dans includes/matching-ecrans.php
   (bloc #bdmApercu, commente "APERCU") et remplie par assets/js/matching.js.
   Ce fichier n'ecrit ni HTML ni JS : uniquement la mise en page et les
   classes de contenu reutilisables que le JavaScript pose dans les
   quatre panneaux d'onglet.

   Scope : .matching-page, comme matching.css et matching-carte.css.
   Additive : aucune regle existante de matching.css, matching-carte.css,
   matching-choregraphies.css ou matching-empilement-mobile.css n'est
   redefinie ici, a une exception assumee et documentee plus bas
   (.matching-page .bdm-card__actions, pour accueillir un second bouton).

   ─── Contrat de contenu pour assets/js/matching.js ─────────────────
   A l'interieur d'un panneau (.bdm-apercu__panel), le JS compose avec :
     .bdm-apercu__bloc            un bloc de contenu
       .bdm-apercu__bloc-titre    son titre (facultatif)
     .bdm-apercu__groupe          un groupe de formules repliable (onglet
                                   Tarifs), avec .is-ouvert quand il est
                                   deplie, sur ce meme element
       .bdm-apercu__groupe-tete   le bouton qui ouvre et ferme, porteur de
                                   aria-expanded et de aria-controls
       .bdm-apercu__groupe-titre  le nom du groupe (boite et parcours)
       .bdm-apercu__groupe-resume nombre de formules et prix d'entree, vu
                                   du seul etat replie
       .bdm-apercu__groupe-chevron  l'icone, pivotee par .is-ouvert
       .bdm-apercu__groupe-corps  la liste des lignes du groupe, masquee
                                   par l'attribut hidden quand il est replie
     .bdm-apercu__formule         l'enveloppe d'UNE formule (onglet Tarifs) :
                                   sa ligne, puis son detail repliable ; c'est
                                   elle qui porte le filet de separation
       .bdm-apercu__detail-tete   le bouton "Voir le detail", pose dans la
                                   colonne de gauche, porteur de aria-expanded
                                   et de aria-controls, avec .is-ouvert deplie
       .bdm-apercu__detail-lib    son libelle, reecrit par le JS a l'ouverture
       .bdm-apercu__detail-chevron  son icone, pivotee par .is-ouvert
       .bdm-apercu__detail        le detail range, masque par l'attribut
                                   hidden quand il est replie
       .bdm-apercu__detail-seul   description d'un seul tenant, rendue en une
                                   ligne plutot qu'en liste a une puce
       .bdm-apercu__detail-titre  l'intitule d'un groupe, quand l'ecole en a
                                   ecrit un avant ses deux-points
       .bdm-apercu__detail-liste  la liste des inclusions (ul, sans puce CSS)
       .bdm-apercu__detail-item   une inclusion, precedee d'une coche
       .bdm-apercu__detail-reserve  ce qui RETIRE ou CONDITIONNE (non compris,
                                   hors frais, en option), jamais coche
       .bdm-apercu__detail-ico    la gouttiere d'icone, largeur fixe, commune
                                   aux inclusions et aux reserves
     .bdm-apercu__ligne           une ligne libelle/valeur (tarif, horaire)
       .bdm-apercu__ligne-lib     la colonne de gauche
       .bdm-apercu__ligne-val     la colonne de droite, en gras, jamais coupee
     .bdm-apercu__ligne--today    variante a ajouter sur la ligne du jour
                                   courant, dans l'onglet Horaires
     .bdm-apercu__barre           un prix barre, place avant le prix effectif
     .bdm-apercu__promo           une pastille "offre en cours"
     .bdm-apercu__puces           une liste de pastilles (ul ou div)
       .bdm-apercu__puce          une pastille (paiement, permis, langue...)
     .bdm-apercu__vide            message court quand l'onglet n'a rien a
                                   montrer, en gris, sans mise en scene
   ─────────────────────────────────────────────────────────────────── */

/* ─── Conteneur racine ──────────────────────────────────────
   position: fixed pour couvrir tout le viewport, tres au-dessus du
   reste de la page (le plus haut z-index existant sur cette page est
   20, sur l'autocompletion BAN). L'attribut hidden du HTML est deja
   force par la regle globale ".matching-page [hidden] { display: none
   !important }" de matching.css (ligne 87) : ce display: none l'emporte
   quoi qu'il arrive sur le display: flex ci-dessous. La regle
   :not([hidden]) qui suit est une ceinture-et-bretelles locale, pour
   que ce fichier reste comprehensible seul, sans dependre de la lecture
   de matching.css pour savoir pourquoi la pop-up ne s'affiche pas par
   defaut. ───────────────────────────────────────────────────── */
.matching-page .bdm-apercu {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
}
.matching-page .bdm-apercu:not([hidden]) {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.matching-page .bdm-apercu__voile {
  position: absolute;
  inset: 0;
  /* Seule couleur ecrite en dur du fichier avec l'ombre de la boite
     plus bas : un voile n'est pas une couleur de marque, tokens-v2.css
     procede de la meme facon pour ses propres ombres. */
  background: rgba(13, 18, 32, .55);
  cursor: pointer;
  /* Empeche un geste de defilement tactile demarre sur le voile de se
     propager a la page derriere. Mitigation partielle seulement : elle
     ne couvre pas la molette de souris, voir doutes du rapport. */
  touch-action: none;
}

/* ─── Boite : mobile d'abord, feuille glissee par le bas ────
   Convention mobile-first du fichier parent (matching.css, commentaire
   d'entete) : la base sert au telephone, le palier suivant elargit.
   ───────────────────────────────────────────────────────────── */
.matching-page .bdm-apercu__boite {
  position: relative;
  z-index: 1;
  width: 100%;
  /* HAUTEUR CONSTANTE (2026-09-03), et non plus un simple plafond. Avec
     max-height seul, la boite se reglait sur le contenu de l'onglet
     ouvert : passer de "Horaires" (sept jours plus la conduite) a
     "Paiement" (une rangee de pastilles) faisait sauter la pop-up d'une
     hauteur a l'autre sous le doigt. La hauteur est donc figee : le
     corps (.bdm-apercu__corps, flex: 1 1 auto) absorbe la difference,
     en defilant quand l'onglet deborde et en laissant du blanc quand il
     est court. La position des onglets, du bouton du pied et de la
     croix ne bouge plus d'un onglet a l'autre. */
  height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--bdm-card);
  border-radius: var(--bdm-radius-md) var(--bdm-radius-md) 0 0;
  box-shadow: var(--bdm-shadow-lg);
  overflow: hidden;
  animation: bdUp .22s var(--bd2-ease-out);
}

@media (min-width: 641px) {
  .matching-page .bdm-apercu:not([hidden]) { align-items: center; }
  .matching-page .bdm-apercu__boite {
    width: 100%;
    max-width: 640px;
    /* Meme hauteur constante qu'en mobile, plafonnee a 720px : au-dela,
       un ecran haut etirerait la boite sans rien ajouter a lire. */
    height: min(88vh, 720px);
    border-radius: var(--bdm-radius-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  .matching-page .bdm-apercu__boite { animation: none; }
}

/* ─── Verrou du defilement de fond ───────────────────────────
   Seule regle de tout ce fichier qui ne commence pas par .matching-page :
   exception ouverte par le superviseur du chantier, pour ce cas precis
   seulement. Le verrou doit agir sur <body>, qui porte le defilement du
   document, alors que la portee .matching-page vit sur le <main> de
   trouver-mon-auto-ecole.php, pas sur <body> ; aucun selecteur
   commencant par .matching-page ne peut donc atteindre cet element.
   La classe bdm-apercu-ouvert est posee et retiree par
   assets/js/matching.js sur document.body, uniquement a l'ouverture et
   sur tous les chemins de fermeture de cette pop-up ; elle n'existe sur
   aucune autre page du site, cette regle ne peut donc rien affecter
   ailleurs. Les deux mitigations tactiles posees plus haut (touch-action
   sur le voile, overscroll-behavior sur le corps) restent utiles a cote
   de ce verrou, pour le cas ou la classe n'est pas encore posee. ─────
   ────────────────────────────────────────────────────────────────── */
body.bdm-apercu-ouvert { overflow: hidden; }

/* ─── En-tete : photo, nom/ville, score, fermer ─────────────
   Grille plutot que flex : la coquille HTML place photo, nom, ville,
   score et fermer comme cinq freres directs (pas de wrapper autour de
   nom+ville), la grille permet de les empiler sans avoir a modifier le
   HTML. ───────────────────────────────────────────────────────── */
.matching-page .bdm-apercu__head {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  padding: 16px 56px 16px 16px;
  border-bottom: 1px solid var(--bdm-line);
}

.matching-page .bdm-apercu__photo {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 56px;
  height: 56px;
  border-radius: var(--bdm-radius-sm);
  overflow: hidden;
  background: var(--bdm-line2);
  background-size: cover;
  background-position: center;
  /* Sans photo, matching.js pose ici le pictogramme "school" en 26px
     (assets/js/matching.js, ICONS.school). Il faut donc centrer et
     depeindre CE conteneur, comme le fait deja .bdm-card__photo--vide
     sur la carte de resultat (matching.css ligne 767) : sinon l'icone
     se colle en haut a gauche du carre et herite de l'encre foncee du
     titre voisin. Les trois lignes sont sans effet quand une <img>
     remplit la boite, elle occupe deja 100% des deux cotes. */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bdm-ink20);
}
.matching-page .bdm-apercu__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.matching-page .bdm-apercu__nom {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--bdm-ink);
  overflow-wrap: break-word;
}
.matching-page .bdm-apercu__ville {
  grid-column: 2;
  grid-row: 2;
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--bdm-ink40);
}

.matching-page .bdm-apercu__score {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  border-radius: var(--bdm-radius-sm);
  background: var(--bdm-good-soft);
  color: var(--bdm-good);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

/* La valeur et son libelle sont deux <span> voisins, que rien ne separe
   dans le HTML. Poses en ligne, ils sortaient colles : la recette du
   2026-09-02 a releve « 96%compatible » d'un seul tenant sur les
   captures. Ils se posent donc en colonne, comme sur la carte de
   resultat (matching.css, ligne 800), pour que la meme information
   garde la meme forme des deux cotes du clic. Les couleurs sont celles
   heritees de la pastille, aucune n'est redite ici. */
.matching-page .bdm-apercu__score-val {
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}
.matching-page .bdm-apercu__score-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Cible tactile de 44px minimum : la croix visuelle est petite (18px),
   le bouton qui la porte est agrandi par le padding, pas par la taille
   de l'icone. */
.matching-page .bdm-apercu__fermer {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--bdm-ink60);
  cursor: pointer;
  transition: background .16s var(--bd2-ease), color .16s var(--bd2-ease);
}
.matching-page .bdm-apercu__fermer:hover {
  background: var(--bdm-line2);
  color: var(--bdm-ink);
}
.matching-page .bdm-apercu__fermer svg { width: 18px; height: 18px; }

/* ─── Onglets ─────────────────────────────────────────────── */
.matching-page .bdm-apercu__tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  padding: 0 12px;
  border-bottom: 1px solid var(--bdm-line);
  overflow-x: auto;
  overflow-y: hidden;
  /* Barre de defilement masquee : la rangee scrolle si elle deborde,
     mais rien ne doit le laisser deviner visuellement. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.matching-page .bdm-apercu__tabs::-webkit-scrollbar { display: none; }

.matching-page .bdm-apercu__tab {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 14px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--bdm-ink40);
  white-space: nowrap;
  cursor: pointer;
  transition: color .16s var(--bd2-ease), border-color .16s var(--bd2-ease);
}
/* Le trait sous le libelle porte la distinction, pas seulement la
   couleur (recette d'accessibilite de la tache). */
.matching-page .bdm-apercu__tab.is-active {
  color: var(--bdm-ink);
  border-bottom-color: var(--bdm-blue);
}

/* ─── Corps : seule zone qui defile ──────────────────────────
   flex: 1 1 auto avec min-height: 0 est ce qui permet a un enfant flex
   de devenir plus petit que son contenu et donc de faire apparaitre sa
   propre barre de defilement, plutot que de pousser la boite (et le
   pied) hors de l'ecran. C'est le point le plus important de ce
   fichier : sans min-height: 0, le bouton du pied disparaitrait sous
   un contenu long. ─────────────────────────────────────────────── */
.matching-page .bdm-apercu__corps {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Une fois le defilement du corps arrive en butee (haut ou bas), on
     empeche le geste de continuer sur la page derriere. Ne couvre pas
     un defilement demarre en dehors du corps (molette au-dessus du
     voile, par exemple). */
  overscroll-behavior: contain;
}

.matching-page .bdm-apercu__panel { padding: 18px 20px 28px; }

.matching-page .bdm-apercu__pied {
  flex: 0 0 auto;
  padding: 14px 20px;
  border-top: 1px solid var(--bdm-line);
  background: var(--bdm-card);
}

/* ─── Contenus generiques des panneaux ──────────────────────── */
.matching-page .bdm-apercu__bloc { margin: 0 0 22px; }
.matching-page .bdm-apercu__bloc:last-child { margin-bottom: 0; }
.matching-page .bdm-apercu__bloc-titre {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--bdm-ink40);
}

/* ─── Groupes de formules (2026-09-02) ───────────────────────
   Les formules sont rangees par boite et par parcours, et un seul groupe
   est ouvert, celui qui repond aux reponses de l'eleve. Une tete de
   groupe est un vrai bouton : elle porte aria-expanded, elle se prend au
   clavier, et sa cible tactile fait 48 px de haut. Le resume (nombre de
   formules et prix d'entree) ne s'affiche que REPLIE : ouvert, les lignes
   le disent mieux que lui. ──────────────────────────────────────────── */
.matching-page .bdm-apercu__groupe + .bdm-apercu__groupe {
  border-top: 1px solid var(--bdm-line);
}
.matching-page .bdm-apercu__groupe-tete {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 10px 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--bdm-ink);
}
.matching-page .bdm-apercu__groupe-titre {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 700;
}
.matching-page .bdm-apercu__groupe-resume {
  flex: 0 0 auto;
  font-size: 12.5px;
  color: var(--bdm-ink40);
  white-space: nowrap;
}
.matching-page .bdm-apercu__groupe.is-ouvert .bdm-apercu__groupe-resume { display: none; }
.matching-page .bdm-apercu__groupe-chevron {
  flex: 0 0 auto;
  display: flex;
  color: var(--bdm-ink40);
  transition: transform .18s ease;
}
.matching-page .bdm-apercu__groupe.is-ouvert .bdm-apercu__groupe-chevron {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .matching-page .bdm-apercu__groupe-chevron { transition: none; }
}
/* Le retrait dit que ces lignes appartiennent a la tete au-dessus. Il
   reste faible pour ne pas rogner la place du libelle sur telephone. */
.matching-page .bdm-apercu__groupe-corps { padding: 0 0 6px 10px; }

.matching-page .bdm-apercu__ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bdm-line2);
}
.matching-page .bdm-apercu__ligne:last-child { border-bottom: none; }

.matching-page .bdm-apercu__ligne-lib {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14.5px;
  color: var(--bdm-ink60);
}
/* Seconde ligne d'un libelle, posee UNIQUEMENT sur deux formules qu'aucun
   attribut structure ne separe (voir apercuLibellesGroupe dans matching.js).
   Elle porte le nom donne par l'ecole, donc elle doit se lire comme une
   precision et jamais comme un second tarif : plus petite, plus pale, et sur
   sa propre ligne pour ne pas allonger celle du dessus. */
.matching-page .bdm-apercu__ligne-note {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--bdm-ink40);
}
/* Rapport au CPF, pose sous le libelle d'une ligne de tarif (apercuNoteCpf
   dans matching.js). Deux tons volontairement distincts : un tarif de grille
   CPF est une MISE EN GARDE sur la comparaison du prix, la simple
   eligibilite est un AVANTAGE. Les rendre identiques reviendrait a dire la
   meme chose de deux situations opposees. */
.matching-page .bdm-apercu__ligne-note--cpf {
  color: var(--bdm-blue-deep);
  font-weight: 600;
}
.matching-page .bdm-apercu__ligne-note--cpf-ok {
  color: var(--bdm-good);
  font-weight: 600;
}
/* Etiquette CPF questionnable : la note est un bouton, avec un « ? » cercle.
   Elle garde la taille et la couleur de la note ordinaire, pour ne pas peser
   plus lourd que le prix qu'elle accompagne. */
.matching-page .bdm-apercu__ligne-note--ask {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.matching-page .bdm-apercu__note-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border: 1.1px solid currentColor;
  border-radius: 50%;
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1;
  opacity: .75;
}
.matching-page .bdm-apercu__note-tip {
  display: block;
  margin: 4px 0 2px;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--bdm-line2);
  color: var(--bdm-ink60);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
}
.matching-page .bdm-apercu__ligne-val {
  flex: 0 0 auto;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--bdm-ink);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --- Detail d'une formule (2026-09-08) ----------------------
   Le libelle d'une ligne ne dit que la duree et la condition de code : deux
   forfaits 20 h a 200 EUR d'ecart s'y lisent a l'identique. Le detail porte
   ce que l'ecole a ecrit de son forfait (livret, frais de dossier, acces au
   code, presentations a l'examen), et c'est la seule chose dans la pop-up
   qui reponde a "qu'est-ce que je paie en plus".

   Il est replie au repos et n'ouvre que le sien : 95 pour cent des formules
   en portent un, tous deplies d'office ils repousseraient les prix hors de
   l'ecran. Le filet de separation quitte la ligne pour l'enveloppe, sans
   quoi un detail ouvert se retrouvait detache du prix qu'il explique. --- */
.matching-page .bdm-apercu__formule { border-bottom: 1px solid var(--bdm-line2); }
.matching-page .bdm-apercu__formule:last-child { border-bottom: none; }
.matching-page .bdm-apercu__formule .bdm-apercu__ligne { border-bottom: none; }

/* display:flex plutot qu'inline-flex, et largeur au contenu : le bouton est
   ainsi un bloc DANS la colonne de gauche, donc sur sa propre ligne sous le
   libelle, sans jamais venir pousser le prix. */
.matching-page .bdm-apercu__detail-tete {
  display: flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  margin-top: 3px;
  padding: 5px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  color: var(--bdm-blue-deep);
  cursor: pointer;
}
.matching-page .bdm-apercu__detail-tete:hover .bdm-apercu__detail-lib { text-decoration: underline; }
.matching-page .bdm-apercu__detail-chevron {
  flex: 0 0 auto;
  display: flex;
  transition: transform .18s ease;
}
.matching-page .bdm-apercu__detail-tete.is-ouvert .bdm-apercu__detail-chevron {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .matching-page .bdm-apercu__detail-chevron { transition: none; }
}
.matching-page .bdm-apercu__detail {
  margin: 2px 0 12px;
  padding: 10px 12px;
  border-radius: var(--bdm-radius-sm);
  background: var(--bdm-blue-tint);
}
.matching-page .bdm-apercu__detail[hidden] { display: none; }

/* Une description d'un seul tenant : une ligne, pas une liste a une puce. */
.matching-page .bdm-apercu__detail-seul {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--bdm-ink60);
}

/* Intitule d'un groupe ("AAC manuelle :", "Vehicule adapte :"). Il n'existe
   que quand l'ecole en a ecrit un, il n'est jamais invente. */
.matching-page .bdm-apercu__detail-titre {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bdm-ink80);
}
.matching-page .bdm-apercu__detail-titre + .bdm-apercu__detail-liste { margin-top: 0; }

.matching-page .bdm-apercu__detail-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
}
.matching-page .bdm-apercu__detail-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--bdm-ink60);
}

/* La coche et le "i" partagent une gouttiere de largeur fixe : les libelles
   s'alignent alors sur une seule verticale, quel que soit le signe qui les
   precede. C'est ce qui fait qu'une liste se BALAIE au lieu de se lire. */
.matching-page .bdm-apercu__detail-ico {
  flex: 0 0 auto;
  display: flex;
  width: 14px;
  /* Cale l'icone sur la premiere ligne de texte plutot que sur le haut de la
     boite : sur un libelle de deux lignes, elle glissait vers le haut. */
  margin-top: 2px;
  color: var(--bdm-good);
}

/* Une reserve RETIRE ou CONDITIONNE ("evaluation non comprise", "hors frais
   de dossier"). Elle ne peut pas porter la meme coche verte que ce qui est
   inclus : elle prend le "i", la couleur d'alerte douce, et un filet qui la
   detache de la liste au-dessus. */
.matching-page .bdm-apercu__detail-reserve {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(13, 18, 32, .07);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--bdm-ink40);
}
.matching-page .bdm-apercu__detail-reserve:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.matching-page .bdm-apercu__detail-reserve .bdm-apercu__detail-ico { color: var(--bdm-warn); }
.matching-page .bdm-apercu__detail-reserve + .bdm-apercu__detail-reserve {
  margin-top: 4px;
  padding-top: 0;
  border-top: none;
}

/* Un second groupe dans le meme detail (l'ecole a ecrit deux phrases) : il
   respire, sans filet, le titre suffit a le separer. */
.matching-page .bdm-apercu__detail-liste + .bdm-apercu__detail-titre { margin-top: 10px; }
.matching-page .bdm-apercu__detail-liste + .bdm-apercu__detail-liste { margin-top: 5px; }

/* Ligne du jour courant dans l'onglet Horaires : le fond porte la mise
   en evidence, le filet de separation s'efface pour ne pas la couper. */
.matching-page .bdm-apercu__ligne--today {
  margin: 0 -10px;
  padding: 10px;
  border-bottom-color: transparent;
  border-radius: var(--bdm-radius-sm);
  background: var(--bdm-blue-tint);
}
.matching-page .bdm-apercu__ligne--today .bdm-apercu__ligne-lib {
  color: var(--bdm-blue-deep);
  font-weight: 700;
}

.matching-page .bdm-apercu__barre {
  margin-right: 6px;
  color: var(--bdm-ink20);
  font-weight: 500;
  text-decoration: line-through;
}

.matching-page .bdm-apercu__promo {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  margin-left: 8px;
  border-radius: var(--bd2-r-pill);
  background: var(--bdm-coral-soft);
  color: var(--bdm-coral);
  font-size: 11px;
  font-weight: 700;
}

.matching-page .bdm-apercu__puces {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.matching-page .bdm-apercu__puce {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--bdm-line);
  border-radius: var(--bd2-r-pill);
  background: var(--bdm-card);
  font-size: 12.5px;
  color: var(--bdm-ink60);
}

.matching-page .bdm-apercu__vide {
  padding: 12px 0;
  color: var(--bdm-ink40);
  font-size: 13.5px;
}

/* ─── Bouton "Voir la fiche" sur la carte de resultat ────────
   Action secondaire, nettement moins appuyee que .bdm-card__cta : la
   classe .bdm-btn--secondary de matching.css (fond blanc, filet, encre)
   suffit deja a la distinguer du bouton principal en degrade. La cible
   tactile de 44px est deja couverte par .bdm-btn (min-height: 48px,
   matching.css ligne 299) : aucune redefinition necessaire ici. */
.matching-page .bdm-card__apercu { flex: 1 1 auto; }

/* Redeclaration assumee (seule autorisee par le brief) de
   .bdm-card__actions : la regle de matching.css (colonne, gap 8px)
   reste la base pour un seul bouton et pour tout le mobile. A partir
   de 480px, deux boutons cote a cote : le principal plus large que le
   secondaire, comme au clavier lu de gauche a droite le regard va au
   secondaire puis au principal. */
@media (min-width: 480px) {
  .matching-page .bdm-card__actions {
    flex-direction: row;
    align-items: stretch;
  }
  .matching-page .bdm-card__actions .bdm-card__apercu {
    width: auto;
    flex: 1 1 0;
  }
  .matching-page .bdm-card__actions .bdm-card__cta {
    width: auto;
    flex: 1.6 1 0;
  }
}