/* ============================================================================
   BDC PUBLIC — feuille de style commune aux 2 pages (22/09/2026)
   ============================================================================
   Même raison d'être que bdc-commun.js : ce qui est identique entre
   bdc-essai.html et bdc-immediat.html n'existe qu'en un seul exemplaire.
   Aucune dépendance au CSS de l'app — les pages publiques vivent avant le gate.
   ========================================================================== */
:root{
  --mm-encre:#0E2438;
  --mm-or:#C0894A;
  --mm-fond:#fdfbf6;
  --mm-surface:#fff;
  --mm-bord:#e5e0d3;
  --mm-muted:#64748b;
  --mm-rouge:#b3122c;
}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--mm-fond);font-family:Arial,Helvetica,sans-serif;color:var(--mm-encre);}
.wrap{max-width:1100px;margin:0 auto;padding:22px 16px 48px;}
.brand{display:flex;justify-content:center;margin-bottom:6px;}
.brand svg{width:min(260px,64vw);height:auto;}
.retour{display:block;text-align:center;font-size:0.8rem;color:var(--mm-muted);margin-bottom:18px;}
h1{font-size:clamp(1.05rem,3.6vw,1.45rem);text-align:center;margin:0 0 6px;font-weight:800;}
.parcours{text-align:center;font-weight:700;color:var(--mm-rouge);font-size:0.92rem;margin:0 0 4px;}
/* Mise en page des titres (16/10/2026) : aucun mot seul en dernière ligne d'un titre,
   lignes équilibrées (text-wrap:balance — sans effet sur un titre d'une ligne). */
h1,h2,.parcours{text-wrap:balance;}
.nw{white-space:nowrap;}
/* Introduction des pages à case (16/10/2026) : une phrase par ligne. Les textes
   réécrits selon la case passent par textContent : leurs retours à la ligne (\n)
   sont rendus par pre-line. « à droite » sur ordinateur, « ci-dessous » quand
   l'aperçu passe sous le formulaire (même seuil que .grid, 900 px). */
.lignes{white-space:pre-line;}
.ecran-etroit{display:none;}
@media (max-width:899.98px){ .ecran-large{display:none;} .ecran-etroit{display:inline;} }
.case-note{margin-top:-6px;}

/* Pages à case (/commander, /bdc-reseau — body.page-case), 16/10/2026.
   Téléphone : l'introduction et les conditions se lisent comme un seul paragraphe
   (rendu validé par Daniel le 16/10). Ordinateur (900 px et plus) : une seule
   largeur pour toute la page, celle du bloc formulaire + aperçu ; conditions en
   encadré sous la case ; 3 étapes numérotées côte à côte ; texte de base plus
   grand, formulaire plus large, aperçu de même largeur qu'avant. */
.page-case .chapo-intro{margin-bottom:0;}
.etapes{display:none;}
@media (min-width:900px){
  html:has(body.page-case){font-size:17px;}
  .page-case .wrap{max-width:1180px;}
  .page-case .grid{grid-template-columns:minmax(0,460px) 1fr;}
  .page-case .cmd-choix{max-width:none;}
  .page-case .chapo-intro{display:none;}
  .page-case .chapo-cond{text-align:center;max-width:none;margin:-8px 0 18px;padding:14px 16px;border:1px solid var(--mm-bord);border-radius:12px;background:var(--mm-surface);color:#334155;font-size:0.9rem;}
  .page-case .cmd-choix small{display:block;max-width:640px;margin:0 auto;text-align:center;text-wrap:balance;}
  .page-case .etapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;margin:0 0 20px;padding:0;}
  .page-case .etapes li{background:var(--mm-surface);border:1px solid var(--mm-bord);border-radius:12px;padding:12px 14px;font-size:0.92rem;font-weight:700;color:var(--mm-encre);text-align:center;}
  .page-case .etape-num{color:var(--mm-or);}
}
/* Bannière de la page réseau : texte long sur ordinateur, court sous 600 px
   (2 lignes nettes au lieu de 3). */
.parcours-court{display:none;}
@media (max-width:600px){ .parcours-long{display:none;} .parcours-court{display:inline;} }
.chapo{text-align:center;color:var(--mm-muted);font-size:0.86rem;margin:0 auto 22px;max-width:620px;line-height:1.5;}

/* Deux colonnes sur écran large, empilées sous 900 px : le formulaire d'abord,
   l'aperçu en dessous — on ne fait jamais scroller un mobile à travers un
   document A4 pour atteindre le premier champ. */
.grid{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:20px;align-items:start;}
@media (max-width:899.98px){ .grid{grid-template-columns:1fr;} .apercu{order:2;} .form{order:1;} }

.form{display:flex;flex-direction:column;gap:12px;background:var(--mm-surface);border:1px solid var(--mm-bord);border-radius:12px;padding:16px;}
.form label.lbl{display:block;font-size:0.74rem;text-transform:uppercase;letter-spacing:.04em;color:var(--mm-muted);margin-bottom:4px;}
.form input[type=text],.form input[type=email],.form input[type=tel]{width:100%;padding:10px 12px;border:1px solid #d8d3c7;border-radius:8px;font-size:0.92rem;font-family:inherit;color:var(--mm-encre);background:#fff;}
.form input:focus{outline:2px solid var(--mm-or);outline-offset:1px;}
.radios{display:flex;flex-direction:column;gap:6px;}
.radios label{display:flex;align-items:center;gap:8px;font-size:0.86rem;}
.radios input{width:auto;}
.oblig{color:var(--mm-rouge);}

.btn{display:inline-block;padding:11px 20px;border-radius:9px;font-size:0.92rem;font-weight:700;text-decoration:none;font-family:inherit;border:none;cursor:pointer;text-align:center;}
.btn-primary{background:var(--mm-encre);color:#fff;}
.btn-primary:hover{filter:brightness(1.18);}
.btn-or{background:var(--mm-or);color:#fff;}
.btn-or:hover{filter:brightness(1.1);}
.btn-ghost{background:#fff;color:var(--mm-encre);border:1.5px solid var(--mm-encre);}
.btn-ghost:hover{background:#f5f2ea;}
.btn-block{display:block;width:100%;}
.btn[disabled]{opacity:.6;cursor:wait;}

.msg{color:var(--mm-rouge);font-size:0.84rem;margin:0;}
.apercu .apercu-lbl{font-size:0.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mm-muted);margin-bottom:6px;}
#bdc-preview{width:100%;height:76vh;min-height:420px;border:1px solid var(--mm-bord);border-radius:10px;background:#fff;}
@media (max-width:899.98px){ #bdc-preview{height:58vh;} }

/* Bloc révélé APRÈS impression seulement (cf. bdc-commun.js, séquencement). */
.suite{margin-top:26px;border:2px solid var(--mm-or);border-radius:12px;background:var(--mm-surface);padding:20px;}
.suite h2{font-size:1rem;margin:0 0 8px;}
.suite p{font-size:0.88rem;color:#334155;line-height:1.55;margin:0 0 14px;}
.suite .actions{display:flex;flex-wrap:wrap;gap:10px;}
.suite .note{font-size:0.78rem;color:var(--mm-muted);margin:14px 0 0;}
/* Étape 2 — l'envoi du bon signé, sous le paiement (option A, 09/10/2026).
   Séparé par un filet à l'intérieur du même encadré : le visiteur doit voir que
   c'est une SUITE de ce qu'il vient de faire, pas une alternative à côté. */
.envoi{margin-top:18px;padding-top:16px;border-top:2px dashed var(--mm-bord);}
.pied{text-align:center;font-size:0.74rem;color:var(--mm-muted);margin-top:28px;line-height:1.6;}
/* Mention de sécurité du paiement (15/10/2026), juste au-dessus du bouton qui
   ouvre Stripe : petit texte discret, cadenas au trait, retour à la ligne libre. */
.suite p.securite{display:flex;gap:7px;align-items:flex-start;font-size:0.78rem;color:var(--mm-muted);line-height:1.5;margin:0 0 12px;max-width:640px;}
.securite svg{flex:none;width:14px;height:14px;margin-top:2px;}