/* ═══════════════════════════════════════════════════════════
   Assistant de matching eleve <-> auto-ecole  BoostDriving
   Scope : .matching-page (n'affecte pas le reste du site)

   Mobile-first (critere de recette de la tache T6) : la carte resultat
   tient sur 360 px de large sans defilement horizontal, cibles tactiles de
   48 px minimum. Indépendance totale du simulateur de budget (decision
   D13) : tokens et classes propres a cette page (prefixe bdm-*), aucun
   import ni reference vers assets/style/pages/simulateur.css.
   ═══════════════════════════════════════════════════════════ */

/* Les tokens de mise en page viennent de assets|style|tokens-v2.css,
   charge avant ce fichier par trouver-mon-auto-ecole.php. Les couleurs et
   les polices sont celles du design system BoostDriving. */

/* ─── Tokens locaux ────────────────────────────────────
   Les noms de variables historiques (--bdm-*) sont CONSERVES pour ne
   rien casser dans les 1000 lignes qui suivent : seules leurs valeurs
   changent. Elles pointent sur l'identite BoostDriving, la meme que
   l'accueil : cyan du logo, papier creme, encre #0D1220, traits chauds.
   Le bleu marine de la maquette a ete abandonne le 2026-08-21.
   ──────────────────────────────────────────────────── */
.matching-page {
  --bdm-blue:        var(--bd2-accent);        /* #0EA5E9, cyan du logo */
  --bdm-blue-deep:   var(--bd2-accent-deep);   /* #0369A1 */
  --bdm-blue-soft:   var(--bd2-accent-soft);   /* #E0F2FE */
  --bdm-blue-tint:   var(--bd2-accent-tint);   /* #F0F9FF */
  --bdm-coral:       var(--bd2-pink);          /* #F0739B, rose du logo */
  --bdm-coral-soft:  #FDEBF2;

  --bdm-ink:    #0D1220;   /* meme encre que l'accueil */
  --bdm-ink80:  #222842;
  --bdm-ink60:  #3A4055;
  --bdm-ink40:  #6B7280;
  --bdm-ink20:  #9AA0B0;
  --bdm-ink10:  #C9CDD6;

  --bdm-paper:  #F6F4EF;   /* papier creme, comme l'accueil */
  --bdm-card:   #FFFFFF;
  --bdm-line:   #E6E2D7;   /* trait chaud, pas gris bleute */
  --bdm-line2:  #F0EDE3;

  --bdm-good:        var(--bd2-green);
  --bdm-good-soft:   var(--bd2-green-soft);
  --bdm-warn:        #92400E;
  --bdm-warn-soft:   #FEF3C7;
  --bdm-danger:      #991B1B;
  --bdm-danger-soft: #FEE2E2;

  /* Le degrade du logo revient sur les appels a l'action, comme partout
     ailleurs sur le site. */
  --bdm-grad:      var(--bd2-grad);
  --bdm-grad-soft: var(--bd2-grad-soft);

  --bdm-shadow-sm: 0 1px 2px rgba(13,18,32,.04), 0 1px 3px rgba(13,18,32,.06);
  --bdm-shadow-md: var(--bd2-shadow-soft);
  --bdm-shadow-lg: var(--bd2-shadow-card);
  --bdm-shadow-ring: 0 0 0 4px rgba(14,165,233,.18);

  /* Trois familles, celles du systeme editorial de l'accueil. Le titre a
     empattements est reserve a l'intro et a l'argumentaire ; les questions
     restent en sans-serif, plus rapides a lire. */
  --bdm-font-sans:    var(--bd2-font);
  --bdm-font-display: var(--bd2-font-title);
  --bdm-font-mono:    var(--bd2-font-mono);

  --bdm-radius-sm: var(--bd2-r-md);  /* 14px */
  --bdm-radius-md: var(--bd2-r-lg);  /* 18px */
  --bdm-radius-lg: var(--bd2-r-xl);  /* 22px */

  background: var(--bdm-paper);
  font-family: var(--bdm-font-sans);
  color: var(--bdm-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 70vh;
}

.matching-page *,
.matching-page *::before,
.matching-page *::after { box-sizing: border-box; }

/* Garde-fou : l'attribut hidden doit toujours gagner, meme face a une regle
   display: flex/grid plus specifique sur le meme element (ex. .bdm-loading).
   Bug reel rencontre en test navigateur (T6) : spinner et resultats affiches
   en meme temps tant que cette regle etait absente. */
.matching-page [hidden] { display: none !important; }

.matching-page button,
.matching-page input { font-family: inherit; }

/* base.css impose Geist a h1..h6 par un selecteur d'element : on le
   neutralise dans la portee de la page. Les titres editoriaux (intro et
   argumentaire) reprennent ensuite Instrument Serif un par un. */
.matching-page h1,
.matching-page h2,
.matching-page h3,
.matching-page h4,
.matching-page h5,
.matching-page h6 { font-family: var(--bdm-font-sans); }

.matching-page input { outline: none; }

.matching-page .bdm-container {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 20px 64px;
}

/* ─── Mode focus ─────────────────────────────────────────────
   Des la premiere question, matching.js pose .matching-page--focus :
   le fil d'Ariane s'efface et la page ne montre plus que la question.
   Le header et le footer du site restent en place (decision D3).
   ──────────────────────────────────────────────────────────── */
.matching-page .bdm-crumb { margin-bottom: 4px; }
.matching-page--focus .bdm-crumb { display: none; }
.matching-page--focus .bdm-container { padding-top: 0; }

/* ─── Stepper / barre de progression ─────────────────────────
   Maquette : filet de 3 px colle en haut de la zone de questions, piste
   #EDF0F5, remplissage bleu plein, libelle a droite au-dessus du filet.
   ──────────────────────────────────────────────────────────── */
.matching-page .bdm-stepper {
  position: sticky;
  top: 0;
  z-index: 12;
  margin: 0 0 8px;
  padding-top: 14px;
  background: rgba(246, 244, 239, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* Le libelle passe au-dessus du filet (order: -1), comme la maquette. */
  display: flex;
  flex-direction: column;
}
.matching-page .bdm-stepper__track {
  height: 3px;
  border-radius: 0;
  background: var(--bdm-line2);
  overflow: hidden;
}
.matching-page .bdm-stepper__fill {
  /* Largeur de depart posee ici et non en attribut style : la progression est
     ensuite pilotee en JS (element.style.width), seule valeur dynamique de la
     page. Aucun style inline dans le HTML rendu. */
  width: 0;
  height: 3px;
  background: var(--bdm-grad);
  border-radius: 0 3px 3px 0;
  transition: width .45s var(--bd2-ease);
}
.matching-page .bdm-stepper__label {
  margin: 0 0 10px;
  font-family: var(--bdm-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--bd2-ls-caps);
  text-transform: uppercase;
  color: var(--bdm-ink40);
  order: -1;
  align-self: flex-end;
}

/* ─── Badge ──────────────────────────────────────────────── */
.matching-page .bdm-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border-radius: var(--bd2-r-pill);
  background: var(--bdm-card);
  border: 1px solid var(--bdm-line);
  color: var(--bdm-ink60);
  font-family: var(--bdm-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--bd2-ls-caps);
  text-transform: uppercase;
  margin-bottom: 26px;
}
/* Pastille verte en tete du badge, reprise de la maquette. */
.matching-page .bdm-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bdm-blue);
  flex: none;
}

/* ─── Panneaux ───────────────────────────────────────────── */
.matching-page .bdm-panel { display: none; animation: bdUp .38s var(--bd2-ease-out) both; }
.matching-page .bdm-panel--active { display: block; }

.matching-page .bdm-panel__head { margin-bottom: 32px; padding-top: 30px; }
.matching-page .bdm-panel__title {
  margin: 0;
  font-size: clamp(1.5rem, 6vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  text-wrap: balance;
}
.matching-page .bdm-panel__hint {
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: var(--bd2-lh-body);
  color: var(--bdm-ink40);
}
.matching-page .bdm-panel__body { margin-bottom: 36px; }
.matching-page .bdm-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.matching-page .bdm-panel__footer .bdm-btn--primary { margin-left: auto; }

/* Encart d'information gris sous le corps d'une question (maquette). */
.matching-page .bdm-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 24px;
  padding: 15px 17px;
  border-radius: var(--bdm-radius-sm);
  background: var(--bdm-card);
  border: 1px solid var(--bdm-line);
}
.matching-page .bdm-note__mark {
  flex: none;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--bdm-blue);
}
.matching-page .bdm-note p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--bdm-ink60);
}

/* ─── Intro ──────────────────────────────────────────────── */
.matching-page .bdm-intro {
  padding: 48px 0 12px;
  text-align: left;
}
.matching-page .bdm-intro__title {
  font-family: var(--bdm-font-display);
  margin: 0 0 16px;
  font-size: clamp(2.1rem, 8.6vw, 3.1rem);
  font-weight: 400;
  letter-spacing: var(--bd2-ls-title);
  line-height: 1.08;
  text-wrap: balance;
}
.matching-page .bdm-intro__lead {
  margin: 0 0 32px;
  font-size: 16.5px;
  line-height: var(--bd2-lh-loose);
  color: var(--bdm-ink60);
  max-width: 52ch;
  text-wrap: pretty;
}
.matching-page .bdm-intro__lead strong { font-weight: 700; color: var(--bdm-ink); }

/* Ligne de reassurance de la maquette : elements separes par un point
   median discret, la mention gratuite en vert. */
.matching-page .bdm-intro__reassurance {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-family: var(--bdm-font-mono);
  font-size: 12px;
  color: var(--bdm-ink40);
}
.matching-page .bdm-intro__reassurance li { position: relative; }
.matching-page .bdm-intro__reassurance li + li::before {
  content: '\00B7';
  margin-right: 9px;
  opacity: .45;
}
.matching-page .bdm-intro__free {
  color: var(--bdm-good);
  font-weight: 600;
}

/* ─── Boutons ────────────────────────────────────────────── */
.matching-page .bdm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 15px 22px;
  border-radius: var(--bd2-r-pill);
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  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), color .16s var(--bd2-ease);
  text-decoration: none;
  color: var(--bd2-ink);
  background: #FFFFFF;
}
.matching-page .bdm-btn:disabled { opacity: .45; cursor: not-allowed; }
.matching-page .bdm-btn--full { width: 100%; }
.matching-page .bdm-btn--lg {
  min-height: 56px;
  padding: 18px 32px;
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--bd2-r-pill);
}

.matching-page .bdm-btn--primary {
  background: var(--bdm-grad);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  font-size: 15.5px;
  box-shadow: var(--bd2-shadow-glow);
}
.matching-page .bdm-btn--primary:hover:not(:disabled) {
  background: var(--bd2-grad-deep);
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.matching-page .bdm-btn--secondary {
  background: var(--bdm-card);
  border-color: var(--bdm-line);
  color: var(--bdm-ink);
}
.matching-page .bdm-btn--secondary:hover:not(:disabled) { border-color: var(--bdm-blue); }

.matching-page .bdm-btn--ghost {
  background: transparent;
  border-color: var(--bdm-line);
  color: var(--bdm-ink60);
}
.matching-page .bdm-btn--ghost:hover:not(:disabled) {
  border-color: var(--bdm-ink);
  color: var(--bdm-ink);
}

.matching-page .bdm-link {
  color: var(--bdm-blue-deep);
  font-weight: 600;
  text-decoration: none;
}
.matching-page .bdm-link:hover { text-decoration: underline; }
.matching-page .bdm-link--back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 14px;
  font-size: 14px;
  color: var(--bdm-ink40);
  cursor: pointer;
  min-height: 44px;
}
.matching-page .bdm-link--back:hover { color: var(--bdm-ink); }

/* ─── Options (choix unique / multiple) ─────────────────────
   Mise en page de la maquette, couleurs BoostDriving : cartes de 20 px
   de rembourrage, rayon 14 px, trait chaud, pastille de selection a
   droite. Selectionnee : bord cyan de 1.5 px et fond bleu tres pale.
   Deux colonnes des 640 px, une seule en dessous.
   Cibles tactiles >= 48 px (contrainte mobile de la tache T6). ────────── */
.matching-page .bdm-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.matching-page .bdm-options--col { grid-template-columns: 1fr; }

.matching-page .bdm-option {
  position: relative;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 20px 20px 22px;
  border-radius: var(--bdm-radius-sm);
  border: 1px solid var(--bdm-line);
  background: var(--bdm-card);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: var(--bd2-ls-tight);
  color: var(--bdm-ink);
  text-align: left;
  cursor: pointer;
  transition: transform .16s var(--bd2-ease), border-color .16s var(--bd2-ease), background .16s var(--bd2-ease);
}
.matching-page .bdm-option:hover { transform: translateY(-2px); border-color: var(--bdm-blue); }

/* Pastille de selection. Ronde par defaut (choix unique), carree quand la
   question accepte plusieurs reponses (.bdm-options--multi). */
.matching-page .bdm-option::after {
  content: '';
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--bdm-ink10);
  background: var(--bdm-card);
  transition: border-color .16s var(--bd2-ease), background .16s var(--bd2-ease);
}
.matching-page .bdm-options--multi .bdm-option::after { border-radius: 6px; }

/* Le survol porte une pseudo-classe : sans ce doublon, il l'emporterait sur
   l'etat selectionne et lui reprendrait sa bordure bleue. */
.matching-page .bdm-option--active,
.matching-page .bdm-option--active:hover {
  border: 1.5px solid var(--bdm-blue);
  background: var(--bdm-blue-tint);
  color: var(--bdm-ink);
  /* Le bord passe de 1 a 1.5 px : on compense pour que la carte ne bouge pas. */
  padding: 19.5px 19.5px 19.5px 21.5px;
}
.matching-page .bdm-option--active::after {
  border-color: var(--bdm-blue);
  background: var(--bdm-blue);
  /* Coche blanche dessinee en SVG inline dans le CSS, pas de fichier ni de
     balise supplementaire dans le HTML. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 13px 13px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ─── Separateur "ou" ────────────────────────────────────── */
.matching-page .bdm-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--bdm-ink20);
  font-family: var(--bdm-font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--bd2-ls-caps);
}
.matching-page .bdm-sep::before,
.matching-page .bdm-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bdm-line);
}

.matching-page .bdm-geo-cached { margin-bottom: 10px; }

/* ─── Champs / labels ────────────────────────────────────── */
.matching-page .bdm-field { margin-bottom: 18px; }
.matching-page .bdm-field:last-child { margin-bottom: 0; }
.matching-page .bdm-label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--bdm-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--bd2-ls-caps);
  text-transform: uppercase;
  color: var(--bdm-ink40);
}
/* Champ haut et arrondi, repris de la maquette (62 px, rayon 14). */
.matching-page .bdm-input {
  width: 100%;
  min-height: 62px;
  padding: 16px 20px;
  border-radius: var(--bdm-radius-sm);
  border: 1.5px solid var(--bdm-line);
  background: var(--bdm-card);
  font-size: 17px; /* >=16px : evite le zoom auto iOS */
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--bd2-ink);
}
.matching-page .bdm-input::placeholder { color: var(--bdm-ink20); font-weight: 400; }
.matching-page .bdm-input:focus { border-color: var(--bdm-blue); box-shadow: var(--bdm-shadow-ring); }
.matching-page .bdm-hint {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--bdm-ink40);
}

/* ─── Aide a la saisie des coordonnees (niveau 2, 09/09/2026) ─────────
   Suggestion de faute de frappe sous le champ email, et relecture des
   coordonnees avant envoi. Les deux blocs s'ouvrent et se ferment par
   l'attribut hidden ; c'est le garde-fou global en tete de fichier
   (.matching-page [hidden]) qui les masque, d'ou l'absence de regle de
   masquage ici. Leurs conteneurs restent donc en bloc. */
.matching-page .bdm-suggest {
  margin: 8px 0 0;
  padding: 10px 14px;
  border-radius: var(--bdm-radius-sm);
  background: var(--bdm-warn-soft);
  color: var(--bdm-warn);
  font-size: 13.5px;
  line-height: 1.5;
}
.matching-page .bdm-suggest__btn {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--bdm-warn);
  text-decoration: underline;
  cursor: pointer;
}

.matching-page .bdm-recap {
  margin: 0 0 14px;
  padding: 16px 18px;
  border: 1.5px solid var(--bdm-blue);
  border-radius: var(--bdm-radius-sm);
  background: var(--bdm-blue-soft);
}
.matching-page .bdm-recap:focus { outline: none; }
.matching-page .bdm-recap__intro {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--bdm-blue-deep);
}
.matching-page .bdm-recap__ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
}
.matching-page .bdm-recap__ligne:last-of-type { margin-bottom: 0; }
.matching-page .bdm-recap__cle {
  flex: none;
  font-family: var(--bdm-font-mono);
  font-size: 11px;
  letter-spacing: var(--bd2-ls-caps);
  text-transform: uppercase;
  color: var(--bdm-ink40);
}
.matching-page .bdm-recap__valeur {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--bd2-ink);
  text-align: right;
  overflow-wrap: anywhere; /* une adresse longue se coupe au lieu de deborder de la carte */
}
.matching-page .bdm-recap__note {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--bdm-warn);
}
.matching-page .bdm-recap__corriger {
  margin-top: 8px;
  padding: 10px 0 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bdm-blue-deep);
  text-decoration: underline;
  cursor: pointer;
}

/* ─── Autocompletion BAN : liste pleine largeur sous le champ
   (contrainte mobile explicite de la tache T6) ─────────────────────── */
.matching-page .bdm-autocomplete { position: relative; }
.matching-page .bdm-autocomplete__list {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 6px);
  z-index: 20;
  background: var(--bdm-card);
  border: 1px solid var(--bdm-line);
  border-radius: var(--bdm-radius-sm);
  box-shadow: var(--bdm-shadow-lg);
  max-height: 280px;
  overflow-y: auto;
}
.matching-page .bdm-autocomplete__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: none;
  border-bottom: 1px solid var(--bdm-line2);
  background: none;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.matching-page .bdm-autocomplete__item:last-child { border-bottom: none; }
.matching-page .bdm-autocomplete__item:hover { background: var(--bdm-blue-soft); }
.matching-page .bdm-autocomplete__name { font-weight: 600; color: var(--bdm-ink); }
.matching-page .bdm-autocomplete__cp { font-size: 12px; color: var(--bdm-ink40); font-family: var(--bdm-font-mono); }
.matching-page .bdm-autocomplete__empty { padding: 14px 16px; font-size: 13px; color: var(--bdm-ink40); }

/* ─── Messages d'etat ────────────────────────────────────── */
.matching-page .bdm-msg {
  margin: 10px 0 0;
  padding: 10px 14px;
  border-radius: var(--bdm-radius-sm);
  font-size: 13px;
  line-height: 1.5;
}
.matching-page .bdm-msg--info { background: var(--bdm-blue-soft); color: var(--bdm-blue-deep); }
.matching-page .bdm-msg--error { background: var(--bdm-danger-soft); color: #B91C1C; }
/* Message autonome en tete d'ecran (page de transfert), et non colle sous un
   champ : il lui faut sa propre respiration verticale. */
.matching-page .bdm-msg--bloc { margin: 0 0 18px; padding: 14px 16px; }

/* ─── Questionnaire adaptatif v2 (phase 3, 21/08/2026) ───────
   Ecran projet (deux groupes), alerte de couverture et fourchette du pool sur
   l'ecran budget, cartes de duel. Memes tokens, memes rayons que le reste. */

/* Ecran projet : deux questions empilees sur un seul ecran. */
.matching-page .bdm-group + .bdm-group { margin-top: 28px; }
.matching-page .bdm-group__label {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: var(--bd2-ls-tight);
  color: var(--bdm-ink80);
}

/* Sous-titre issu du pool (« Autour de toi : de 990 € a 1 450 € »). */
.matching-page .bdm-panel__hint--pool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bdm-blue-soft);
  color: var(--bdm-blue-deep);
  font-weight: 600;
}
.matching-page .bdm-panel__hint--pool[hidden] { display: none; }

/* Alerte de couverture, en tete de l'ecran budget (spec v2 §3, option (a)). */
.matching-page .bdm-alerte {
  margin: 0 0 22px;
  padding: 16px 18px;
  border-radius: var(--bdm-radius-md);
  border: 1px solid #FCD34D;
  background: var(--bdm-warn-soft);
  color: var(--bdm-warn);
}
.matching-page .bdm-alerte[hidden] { display: none; }
.matching-page .bdm-alerte__txt {
  margin: 0 0 12px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
}
.matching-page .bdm-alerte__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.matching-page .bdm-alerte__actions .bdm-btn { padding: 10px 16px; font-size: 14px; }

/* Duels : deux cartes cote a cote, un bouton « les deux me vont » dessous.
   Le second duel apparait sous le premier, sans changer d'ecran. */
.matching-page .bdm-duel + .bdm-duel {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px dashed var(--bdm-line);
}
.matching-page .bdm-duel[hidden] { display: none; }
.matching-page .bdm-duel__q {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: var(--bd2-ls-tight);
  color: var(--bdm-ink);
}
.matching-page .bdm-duel__cartes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.matching-page .bdm-duelcarte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 112px;
  padding: 18px 18px 16px;
  border-radius: var(--bdm-radius-md);
  border: 1px solid var(--bdm-line);
  background: var(--bdm-card);
  color: var(--bdm-ink);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--bdm-shadow-sm);
  transition: transform .16s var(--bd2-ease), border-color .16s var(--bd2-ease), background .16s var(--bd2-ease);
}
.matching-page .bdm-duelcarte:hover { transform: translateY(-2px); border-color: var(--bdm-blue); }
.matching-page .bdm-duelcarte--active,
.matching-page .bdm-duelcarte--active:hover {
  border-color: var(--bdm-blue);
  background: var(--bdm-blue-tint);
  box-shadow: var(--bdm-shadow-ring);
}
.matching-page .bdm-duelcarte__k {
  font-family: var(--bdm-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bdm-ink40);
  margin-bottom: 6px;
}
.matching-page .bdm-duelcarte__l1 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: var(--bd2-ls-tight);
  line-height: 1.2;
}
.matching-page .bdm-duelcarte__l2 {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--bdm-ink60);
}
.matching-page .bdm-duel__note {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: var(--bd2-lh-body);
  color: var(--bdm-ink40);
  text-align: center;
}
.matching-page .bdm-duel__egal {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 13px 16px;
  border-radius: var(--bdm-radius-sm);
  border: 1px dashed var(--bdm-ink10);
  background: transparent;
  color: var(--bdm-ink60);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .16s var(--bd2-ease), color .16s var(--bd2-ease), background .16s var(--bd2-ease);
}
.matching-page .bdm-duel__egal:hover { border-color: var(--bdm-blue); color: var(--bdm-ink); }
.matching-page .bdm-duel__egal.bdm-option--active {
  border: 1.5px solid var(--bdm-blue);
  background: var(--bdm-blue-tint);
  color: var(--bdm-ink);
  padding: 12.5px 15.5px;
}
@media (max-width: 480px) {
  .matching-page .bdm-duel__cartes { grid-template-columns: 1fr; }
  .matching-page .bdm-duelcarte { min-height: 0; }
}

/* ─── Ecran resultats ────────────────────────────────────── */
.matching-page .bdm-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 64px 20px;
  text-align: center;
  color: var(--bdm-ink60);
  font-weight: 600;
}
.matching-page .bdm-loading__spinner {
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 3px solid var(--bdm-line);
  border-top-color: var(--bdm-blue);
  animation: bdmSpin .8s linear infinite;
}
@keyframes bdmSpin { to { transform: rotate(360deg); } }

.matching-page .bdm-res-error {
  text-align: center;
  padding: 48px 20px;
  color: var(--bdm-ink60);
}
.matching-page .bdm-res-error p { margin: 0 0 18px; }

.matching-page .bdm-res-empty {
  text-align: center;
  padding: 32px 16px;
  background: var(--bdm-card);
  border: 1px solid var(--bdm-line);
  border-radius: var(--bdm-radius-md);
  margin-bottom: 16px;
}
.matching-page .bdm-res-empty p:first-child { font-weight: 700; margin: 0 0 10px; }
.matching-page .bdm-res-empty__ville { margin: 14px 0 0; font-size: 13px; color: var(--bdm-ink40); }

.matching-page .bdm-res-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Carte resultat : garantie de tenir sur 360 px sans defilement horizontal
   (critere de recette explicite de la tache T6). ─────────────────────── */
.matching-page .bdm-card {
  background: var(--bdm-card);
  border: 1px solid var(--bdm-line);
  border-radius: var(--bdm-radius-md);
  padding: 16px;
  box-shadow: var(--bdm-shadow-sm);
  min-width: 0;
}
/* Ecole preselectionnee par le lien de l'email de plan B (parametre ?ecole=) :
   l'eleve doit retrouver du premier coup d'oeil celle sur laquelle il a clique,
   sans que les autres cessent d'etre choisissables. */
.matching-page .bdm-card--preselec {
  border-color: var(--bdm-blue);
  box-shadow: var(--bdm-shadow-ring);
}
.matching-page .bdm-card__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  min-width: 0;
}
.matching-page .bdm-card__photo {
  flex: 0 0 56px;
  width: 56px; height: 56px;
  border-radius: var(--bdm-radius-sm);
  object-fit: cover;
  background: var(--bdm-line2);
}
.matching-page .bdm-card__photo--vide {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bdm-ink20);
}
.matching-page .bdm-card__head-txt { flex: 1 1 auto; min-width: 0; }
.matching-page .bdm-card__name {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: break-word;
}
.matching-page .bdm-card__ville {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--bdm-ink40);
}
.matching-page .bdm-card__ville svg { flex: 0 0 auto; }
.matching-page .bdm-card__score {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  border-radius: var(--bdm-radius-sm);
  background: var(--bdm-good-soft);
}
.matching-page .bdm-card__score-val { font-size: 17px; font-weight: 800; color: #047857; line-height: 1; }
.matching-page .bdm-card__score-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #047857; }

.matching-page .bdm-card__note {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bdm-warn);
}
.matching-page .bdm-card__note svg { fill: currentColor; stroke: none; }
.matching-page .bdm-card__note-vol { color: var(--bdm-ink40); font-weight: 500; }

.matching-page .bdm-card__formule {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bdm-ink60);
}

.matching-page .bdm-card__raisons {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.matching-page .bdm-card__raison {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--bdm-ink60);
}
.matching-page .bdm-card__raison svg { flex: 0 0 auto; margin-top: 2px; color: var(--bdm-good); }
.matching-page .bdm-card__raison--discret { color: var(--bdm-ink40); font-style: italic; }
.matching-page .bdm-card__raison--discret svg { color: var(--bdm-ink20); }

.matching-page .bdm-card__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.matching-page .bdm-card__cta { width: 100%; }
.matching-page .bdm-card__fiche { text-align: center; font-size: 13.5px; min-height: 44px; display: flex; align-items: center; justify-content: center; }

/* ─── Ajustement rapide des resultats ────────────────────── */
.matching-page .bdm-refine__label {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--bdm-ink40);
}
.matching-page .bdm-refine__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.matching-page .bdm-chip {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--bdm-line);
  background: var(--bdm-card);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bdm-ink);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.matching-page .bdm-chip:hover { border-color: var(--bdm-blue); }
.matching-page .bdm-chip--active {
  border-color: var(--bdm-blue);
  background: var(--bdm-blue-soft);
  box-shadow: var(--bdm-shadow-ring);
  color: var(--bdm-blue-deep);
}
.matching-page .bdm-chip--ghost { border-style: dashed; color: var(--bdm-ink40); }
.matching-page .bdm-chip--ghost:hover { color: var(--bdm-ink); }

/* ─── Barre d'actions des resultats, fixee au bas de l'ecran ──────────
   Les deux gestes de l'ecran de resultats, revenir sur ses reponses et
   comparer, etaient poses sous le titre, dans le fil. Des la premiere
   carte defilee ils sortaient de l'ecran, et il fallait remonter toute
   la liste pour les retrouver. Ils sont donc passes en fin de
   #bdmResContent le 09/09/2026, dans une pastille fixee au viewport.

   LE PIEGE, et la raison de la regle qui suit : .bdm-panel joue bdUp en
   fill-mode both. La derniere image de l'animation, translateY(0), reste
   donc posee indefiniment, et un element transforme est bloc conteneur
   de TOUT descendant en position fixed. Sans neutralisation, la barre se
   calerait sur le panneau, haut de plusieurs ecrans, au lieu du
   viewport : elle tomberait hors de vue.

   Le bloc occupe toute la largeur alors que la pastille est etroite :
   sans pointer-events, un doigt pose a cote des boutons ne toucherait
   plus la carte qui defile dessous.
   ──────────────────────────────────────────────────────────────────── */

/* Fill-mode backwards : l'animation joue a l'identique et se termine a la
   position naturelle du panneau (rien ne bouge a l'ecran), mais elle ne
   laisse plus de transform derriere elle. Seul le panneau des resultats
   est concerne, les autres gardent le comportement d'origine. */
.matching-page #bdm-panel-resultats { animation-fill-mode: backwards; }

/* Rangee ordinaire, dans le fil. Elle sert les deux bancs d'essai
   (test-comparaison.php, test-choregraphies-resultats.php), qui reprennent la
   classe .bdm-refine seule, sans l'identifiant ni le reste de l'ecran : la
   barre fixe ci-dessous est donc posee sur #bdmRefine, jamais sur la classe,
   pour qu'un banc ne se retrouve pas avec une pastille flottante au bas de sa
   page de demonstration. */
.matching-page .bdm-refine {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

.matching-page #bdmRefine {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: flex;
  justify-content: center;
  gap: 4px;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  padding: 4px;
  border-radius: var(--bd2-r-pill);
  border: 1px solid var(--bdm-line);
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: var(--bdm-shadow-lg);
  pointer-events: none;
}
.matching-page #bdmRefine > * { pointer-events: auto; }

/* Sans flou, une pastille translucide laisserait lire le texte des cartes
   au travers : le fond redevient opaque. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .matching-page #bdmRefine { background: var(--bdm-card); }
}

/* La barre est hors du flux : tout defile derriere elle, et rien n'est donc
   masque durablement, SAUF le tout dernier ecran de la page. Arrive en bas,
   la pastille couvrirait la derniere ligne du pied de site, celle de Contact
   et des Mentions legales. Ce pied n'est pas un descendant de .matching-page,
   d'ou le :has() : la garde au sol ne se pose que sur l'ecran de resultats,
   jamais sur l'intro ni sur les questions, et .site-footer n'a par ailleurs
   aucun padding-bottom propre a ecraser. */
body:has(.matching-page #bdm-panel-resultats.bdm-panel--active) .site-footer {
  padding-bottom: 66px;
}

/* Les deux fenetres de la page (apercu d'une ecole, comparaison) figent le
   defilement et couvrent l'ecran, avec des z-index de 500 et 2000. La barre
   passerait dessous, donc visible en transparence sous leur voile, alors
   qu'elle ne commande plus rien a ce moment-la. */
body.bdm-apercu-ouvert .matching-page #bdmRefine,
html.bdmc-fige .matching-page #bdmRefine { display: none; }

/* Puce de la barre : plus basse et plus discrete que la puce ordinaire,
   sans cadre, elle se lit comme une action de service et ne concurrence
   pas le bouton de rappel des cartes. */
.matching-page .bdm-chip--barre {
  gap: 7px;
  min-height: 38px;
  padding: 8px 13px;
  font-size: 12.5px;
  white-space: nowrap;
  border-color: transparent;
  background: transparent;
  color: var(--bdm-ink60);
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.matching-page .bdm-chip--barre svg { flex: 0 0 auto; color: var(--bdm-ink20); }
.matching-page .bdm-chip--barre:hover {
  border-color: transparent;
  background: var(--bdm-line2);
  color: var(--bdm-ink);
}
.matching-page .bdm-chip--barre:hover svg { color: var(--bdm-ink40); }
.matching-page .bdm-chip--barre:focus-visible {
  outline: 2px solid var(--bdm-blue);
  outline-offset: 2px;
}

/* Le geste principal de la barre, teinte et non plein : deux boutons
   pleins cote a cote se disputeraient l'attention avec le CTA des cartes. */
.matching-page .bdm-chip--accent,
.matching-page .bdm-chip--accent:hover {
  background: var(--bdm-blue-soft);
  color: var(--bdm-blue-deep);
}
.matching-page .bdm-chip--accent svg,
.matching-page .bdm-chip--accent:hover svg { color: var(--bdm-blue); }
.matching-page .bdm-chip--accent:hover { box-shadow: var(--bdm-shadow-ring); }

/* Fin de libelle, retiree sur les petits ecrans : « Modifier » et
   « Comparer les 4 » tiennent cote a cote des 320 px de large, les deux
   phrases entieres non. Le nombre d'ecoles, seule partie informative du
   libelle, reste visible dans les deux cas, et le nom accessible reste
   entier (aria-label pose dans le gabarit et par majBoutonCompare). */
.matching-page .bdm-refine__plus { display: none; }
@media (min-width: 480px) {
  .matching-page .bdm-refine__plus { display: inline; }
  .matching-page .bdm-chip--barre { font-size: 13px; padding: 8px 15px; }
}

/* Le titre des resultats etait suivi du bloc d'ajustement, qui posait la
   respiration avant la liste. Celui-ci est parti en bas de l'ecran. */
.matching-page .bdm-res-content > .bdm-panel__title { margin-bottom: 18px; }

/* ─── Lead ───────────────────────────────────────────────── */
.matching-page .bdm-rappel-creneau { margin-top: 12px; }
.matching-page .bdm-rappel-creneau .bdm-options { grid-template-columns: repeat(3, 1fr); }
.matching-page .bdm-rappel-creneau .bdm-option { justify-content: center; padding: 12px 6px; font-size: 13.5px; }
.matching-page .bdm-rappel-creneau .bdm-hint { margin: 0 0 8px; }
.matching-page .bdm-rappel-creneau .bdm-hint--moment { margin-top: 14px; }

.matching-page .bdm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.matching-page .bdm-mention {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--bdm-ink40);
}

/* ─── Confirmation ───────────────────────────────────────── */
.matching-page .bdm-confirmation {
  text-align: center;
  padding: 40px 16px 20px;
}
.matching-page .bdm-confirmation__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px; height: 76px;
  border-radius: 999px;
  background: var(--bdm-good-soft);
  color: var(--bdm-good);
  margin-bottom: 22px;
}
.matching-page .bdm-confirmation__text {
  max-width: 46ch;
  margin: 0 auto 28px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--bdm-ink60);
}
.matching-page .bdm-confirmation__text strong { color: var(--bdm-ink); }

/* ─── Desktop (>= 640px) : options en grille, panel plus large ────────── */
@media (min-width: 640px) {
  .matching-page .bdm-container { padding: 24px 24px 80px; }
  .matching-page .bdm-options:not(.bdm-options--col) { grid-template-columns: repeat(2, 1fr); }
  .matching-page .bdm-options--col { grid-template-columns: 1fr; max-width: 480px; }
  .matching-page .bdm-card__head { align-items: center; }
  .matching-page .bdm-panel__head { padding-top: 44px; }
  .matching-page .bdm-intro { padding-top: 56px; }
}

/* La maquette fige le questionnaire a 720 px : il ne s'elargit plus au-dela,
   pour que la ligne de lecture reste courte et la question dominante. */

/* ═══════════════════════════════════════════════════════════
   ARGUMENTAIRE DE L'ÉCRAN D'ACCUEIL  (#bdmLanding)

   Ces sections ne vivent QUE sur l'écran intro : showPanel() de
   matching.js pose l'attribut [hidden] sur #bdmLanding dès la première
   question. Elles sont volontairement hors .bdm-container (largeur
   pleine, gouttière propre via .bdm-lwrap), là où les panneaux du
   questionnaire restent contraints à 720/820 px.

   Mobile-first comme le reste du fichier : tout tient sur 360 px, les
   grilles ne passent à deux colonnes qu'à partir de 720 px.
   ═══════════════════════════════════════════════════════════ */

.matching-page .bdm-landing { margin: 0; }

.matching-page .bdm-lsec { padding: 48px 0; }
.matching-page .bdm-lsec--flip { padding-top: 8px; }

/* Gouttiere calee au pixel pres sur .bdm-container : le bord gauche des
   titres de l'argumentaire doit tomber exactement sous celui du H1, a tous
   les paliers (720 px par defaut, 820 px au-dela de 860 px de viewport). */
.matching-page .bdm-lwrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ─── Titrage commun aux sections ────────────────────────── */
.matching-page .bdm-lkicker {
  display: inline-block;
  margin-bottom: 14px;
  font-family: var(--bdm-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--bd2-ls-kicker);
  text-transform: uppercase;
  color: var(--bdm-coral);
}
.matching-page .bdm-lkicker--invert { color: var(--bdm-coral); }

.matching-page .bdm-ltitle {
  margin: 0 0 14px;
  font-family: var(--bdm-font-display);
  font-size: clamp(1.8rem, 6.8vw, 2.6rem);
  font-weight: 400;
  letter-spacing: var(--bd2-ls-title);
  line-height: var(--bd2-lh-title);
  color: var(--bdm-ink);
  text-wrap: balance;
}
.matching-page .bdm-ltitle--invert { color: #FFFFFF; }

.matching-page .bdm-llead {
  margin: 0 0 32px;
  font-size: 16px;
  line-height: var(--bd2-lh-loose);
  color: var(--bdm-ink60);
  max-width: 62ch;
  text-wrap: pretty;
}
.matching-page .bdm-llead--invert { color: rgba(255,255,255,.78); }

/* ─── Titre du hero : la ligne accentuée du renversement ─── */
/* Signature de la marque : la ligne accentuee en italique et en degrade,
   exactement comme les <em> des titres de l'accueil. */
.matching-page .bdm-intro__accent {
  font-style: italic;
  background: var(--bdm-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .matching-page .bdm-intro__accent {
    background: none;
    color: var(--bdm-blue-deep);
    -webkit-text-fill-color: currentColor;
  }
}

/* ─── Avant / après ──────────────────────────────────────── */
.matching-page .bdm-flip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.matching-page .bdm-flip__col {
  background: var(--bdm-card);
  border: 1px solid var(--bdm-line);
  border-radius: var(--bdm-radius-lg);
  padding: 22px 20px;
  box-shadow: var(--bdm-shadow-sm);
}
.matching-page .bdm-flip__col--apres {
  border-color: var(--bdm-blue);
  box-shadow: var(--bdm-shadow-md);
}
.matching-page .bdm-flip__tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--bdm-font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--bdm-line2);
  color: var(--bdm-ink40);
}
.matching-page .bdm-flip__col--apres .bdm-flip__tag {
  background: var(--bdm-blue-soft);
  color: var(--bdm-blue-deep);
}
.matching-page .bdm-flip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}
.matching-page .bdm-flip__list li {
  position: relative;
  padding-left: 27px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--bdm-ink60);
}
.matching-page .bdm-flip__list li::before {
  position: absolute;
  left: 0; top: 0;
  width: 19px; height: 19px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.matching-page .bdm-flip__col--avant .bdm-flip__list li::before {
  content: '\00d7';
  background: var(--bdm-line2);
  color: var(--bdm-ink20);
}
.matching-page .bdm-flip__col--apres .bdm-flip__list li::before {
  content: '\2713';
  background: var(--bdm-good-soft);
  color: var(--bdm-good);
}
.matching-page .bdm-flip__col--apres .bdm-flip__list li { color: var(--bdm-ink80); }

/* ─── Comment ça marche ──────────────────────────────────── */
.matching-page .bdm-lsec--how {
  background: var(--bdm-card);
  border-top: 1px solid var(--bdm-line);
  border-bottom: 1px solid var(--bdm-line);
}
.matching-page .bdm-how {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 26px;
  counter-reset: none;
}
.matching-page .bdm-how__step {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: start;
}
.matching-page .bdm-how__num {
  font-family: var(--bdm-font-mono);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  background: var(--bdm-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .matching-page .bdm-how__num {
    background: none;
    color: var(--bdm-blue-deep);
    -webkit-text-fill-color: currentColor;
  }
}
.matching-page .bdm-how__h {
  margin: 0 0 7px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bdm-ink);
}
.matching-page .bdm-how__txt p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--bdm-ink60);
}
.matching-page .bdm-how__txt em { font-style: normal; font-weight: 600; color: var(--bdm-ink); }
.matching-page .bdm-how__meta {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--bdm-font-mono);
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--bdm-ink40);
}

.matching-page .bdm-chipsrow {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.matching-page .bdm-chipsrow li {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--bdm-line);
  background: var(--bdm-paper);
  font-size: 12.5px;
  color: var(--bdm-ink60);
}

/* ─── L'élève est roi (bande sombre) ─────────────────────── */
.matching-page .bdm-lsec--king {
  background: var(--bdm-ink);
  padding: 52px 0;
}
.matching-page .bdm-king {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.matching-page .bdm-king__item {
  padding: 20px;
  border-radius: var(--bdm-radius-md);
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
}
.matching-page .bdm-king__item strong {
  display: block;
  margin-bottom: 7px;
  font-size: 15.5px;
  font-weight: 700;
  color: #FFFFFF;
}
.matching-page .bdm-king__item span {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.68);
}

/* ─── FAQ ────────────────────────────────────────────────── */
.matching-page .bdm-faq {
  margin-top: 22px;
  border-top: 1px solid var(--bdm-line);
}
.matching-page .bdm-faq__item { border-bottom: 1px solid var(--bdm-line); }
.matching-page .bdm-faq__q {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 17px 38px 17px 0;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--bdm-ink);
  min-height: 48px;
  display: flex;
  align-items: center;
}
.matching-page .bdm-faq__q::-webkit-details-marker { display: none; }
.matching-page .bdm-faq__q::after {
  content: '';
  position: absolute;
  right: 6px; top: 50%;
  width: 9px; height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--bdm-ink20);
  border-bottom: 2px solid var(--bdm-ink20);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.matching-page .bdm-faq__item[open] .bdm-faq__q::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}
.matching-page .bdm-faq__a {
  margin: 0;
  padding: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--bdm-ink60);
  max-width: 66ch;
}

/* ─── Rappel de fin ──────────────────────────────────────── */
.matching-page .bdm-lcta {
  margin-top: 38px;
  text-align: center;
}
.matching-page .bdm-lcta__txt {
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bdm-ink);
}
.matching-page .bdm-lcta__sub {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--bdm-ink40);
}

/* ─── Tablette et plus ───────────────────────────────────── */
@media (min-width: 640px) {
  .matching-page .bdm-lwrap { padding: 0 24px; }
}
/* Le questionnaire est fige a 720 px : l'argumentaire garde exactement la
   meme gouttiere a tous les paliers, plus d'elargissement a 820 px. */

@media (min-width: 720px) {
  .matching-page .bdm-lsec { padding: 64px 0; }
  .matching-page .bdm-lsec--flip { padding-top: 16px; }
  .matching-page .bdm-lsec--king { padding: 68px 0; }
  .matching-page .bdm-flip { grid-template-columns: 1fr 1fr; gap: 18px; }
  .matching-page .bdm-flip__col { padding: 26px 24px; }
  .matching-page .bdm-king { grid-template-columns: 1fr 1fr; gap: 14px; }
  .matching-page .bdm-how { gap: 30px; }
  .matching-page .bdm-how__step { grid-template-columns: 62px 1fr; gap: 20px; }
  .matching-page .bdm-how__num { font-size: 26px; }
}

/* Le questionnaire reprend toute la place dès qu'il démarre : sans
   l'argumentaire sous lui, la gouttière basse du conteneur suffit. */
.matching-page .bdm-landing[hidden] { display: none !important; }

/* ============================================================
   Habillage (portage de la maquette, 24/09/2026)
   Ex l'ancienne feuille d'outils de la maquette, section 2 (.matching-page).
   Rescope du 25/09/2026 (verificateur, etape 21) : toutes les regles sont
   sous body.bd-body, jamais .matching-page seul. lead-transfert.php (hors
   portage) charge cette feuille et pose lui aussi <main class="matching-page">
   mais SANS body.bd-body : un selecteur .matching-page nu y appliquerait a
   tort les jetons et arrondis de l'assistant porte.
   ============================================================ */
/* ─── 2. Assistant (body.bd-body .matching-page, variables --bdm-* et --bd2-*) ─── */

body.bd-body .matching-page {
  /* Instrument Serif retire (heritee de tokens-v2.css / --bd2-font-title). */
  --bd2-font-title:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bdm-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Encre et gris alignes sur le socle, comme pour le simulateur. */
  --bdm-ink:   #0B1220;
  --bdm-ink80: #1E293B;
  --bdm-ink60: #334155;
  --bdm-ink40: #4B5563;
  --bdm-ink20: #64748B;

  /* Arrondi des options/conteneurs legerement agrandi vers 16 px (etait
     14 px) : deja tres proche, simple mise a niveau sur la regle commune. */
  --bdm-radius-sm: 16px;
}

/* Les boutons (.bdm-btn) sont deja en pilule dans la feuille d'origine
   (--bd2-r-pill) : rien a faire. Les puces de reponse (options, chips)
   gardent leur arrondi de conteneur, deja coherent. */

body.bd-body .matching-page .bdm-ltitle,
body.bd-body .matching-page .bdm-intro__title,
body.bd-body .matching-page .bdm-panel__title,
body.bd-body .matching-page .bdm-how__h,
body.bd-body .matching-page .bdm-faq__q,
body.bd-body .matching-page .bdm-demo__q {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* La fenetre de contact direct et l'apercu d'ecole : conteneur a 16 px,
   coherent avec le reste (elle utilisait deja un arrondi proche). */
body.bd-body .matching-page .bdm-apercu__boite,
body.bd-body .matching-page .bdm-contact__boite {
  border-radius: 20px;
}

/* ============================================================
   Habillage (portage de la maquette, correction du 24/09/2026)
   La partie commune (jetons, titres, accent des em, etiquettes, boutons
   generiques) est dans assets/style/socle.css, une seule fois. Ne reste ici
   que ce qui perdrait a specificite egale si on le montait dans le socle
   (charge avant cette feuille) : le bouton primaire de l'assistant, contre
   la regle native .matching-page .bdm-btn--primary (ligne 322 de ce
   fichier, degrade bdm-grad).
   ============================================================ */
body.bd-body .bdm-btn--primary {
  background: #0B1220;
  color: #FFFFFF;
  box-shadow: none;
}

body.bd-body .bdm-btn--primary:hover {
  background: #1E293B;
}