/* ============================================================================
   Et Bien Dansez Maintenant · la réservation d'une soirée · 12/10/2026
   S'ajoute à style.css et à inscription.css : mêmes cartes, mêmes boutons, mêmes couleurs de jour et de nuit.
   ========================================================================== */

/* étape 1 : les places, avec leurs boutons plus et moins */
.places { display: grid; gap: 14px; margin-top: 18px; }
.ligne-places { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border: 1.5px solid var(--trait); border-radius: 18px; background: var(--fond); transition: border-color .15s ease, background .15s ease; }
.ligne-places.choisie { border-color: var(--marque); background: var(--marque-clair); }
.ligne-places .nom { display: block; font: 600 19px/1.25 var(--titre); color: var(--encre); }
.ligne-places .texte { display: block; font-size: 14px; line-height: 1.45; color: var(--doux); margin-top: 3px; }
.plus-moins { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.plus-moins button { width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1.5px solid var(--trait); background: var(--carte); color: var(--encre); font: 500 24px/1 var(--corps); cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.plus-moins button:hover:not(:disabled) { border-color: var(--marque); transform: scale(1.06); }
.plus-moins button:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }
.plus-moins button:disabled { opacity: .35; cursor: default; }
.plus-moins output { min-width: 46px; text-align: center; font: 600 27px/1 var(--titre); color: var(--encre); font-variant-numeric: tabular-nums; }

/* étape 2 : les trois façons de régler, avec le montant à droite */
.carte-choix.mode { padding-right: 132px; }
.carte-choix .prix-mode { position: absolute; right: 18px; top: 17px; text-align: right; font-size: 12.5px; line-height: 1.35; color: var(--doux); }
.carte-choix .prix-mode b { display: block; font: 600 23px/1.1 var(--titre); color: var(--encre); }
.carte-choix:has(input:disabled) { opacity: .5; cursor: default; }
.carte-choix:has(input:disabled):hover { transform: none; border-color: var(--trait); }
#choix-reglement .sans-paiement { margin-top: 0; }

/* le panneau « votre réservation » */
.mini-soiree { display: flex; gap: 12px; align-items: center; padding-bottom: 12px; margin-bottom: 4px; }
.mini-soiree .jour-mois { flex: none; width: 58px; height: 58px; border-radius: 14px; background: var(--marque-clair); color: var(--marque-texte); display: grid; place-content: center; text-align: center; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; line-height: 1.15; }
.mini-soiree .jour-mois b { display: block; font: 600 23px/1 var(--titre); letter-spacing: 0; }
.mini-soiree > div:last-child b { display: block; font: 600 17px/1.2 var(--titre); color: var(--encre); }
.mini-soiree small { display: block; font-size: 12.5px; line-height: 1.4; color: var(--doux); margin-top: 2px; }

/* la page de fin : le numéro, puis la marche à suivre pour régler */
.numero-resa { display: inline-flex; align-items: center; gap: 12px; margin: 20px 0 0; padding: 11px 20px; border-radius: 999px; background: var(--marque-clair); color: var(--encre); font-size: 14.5px; }
.numero-resa b { font: 600 21px/1 var(--titre); letter-spacing: .04em; color: var(--marque-texte); }
.reglement-carte { text-align: left; margin-top: 24px; border: 1.5px solid var(--marque); border-radius: 20px; overflow: hidden; background: var(--carte); }
.reglement-carte > header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; background: var(--marque); color: #fff; padding: 16px 22px; }
.reglement-carte > header h3 { color: #fff; font-size: 21px; }
.reglement-carte > header b { font: 600 27px/1 var(--titre); white-space: nowrap; }
.reglement-carte .dedans { padding: 4px 22px 18px; }
.rib { margin: 0; }
.rib > div { display: grid; grid-template-columns: 172px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--trait); }
.rib dt { font-size: 12.5px; font-weight: 600; color: var(--doux); text-transform: uppercase; letter-spacing: .05em; }
.rib dd { margin: 0; font-size: 16px; font-weight: 600; color: var(--encre); overflow-wrap: anywhere; }
.mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace; font-weight: 500; letter-spacing: .03em; }
.rib .fort dd { color: var(--vif); font-weight: 700; }
.copier { border: 1.5px solid var(--trait); background: var(--fond); color: var(--encre); font: 600 13px/1 var(--corps); padding: 8px 13px; border-radius: 999px; cursor: pointer; min-width: 78px; }
.copier:hover { border-color: var(--marque); }
@media (max-width: 600px) { .copier { min-height: 44px; padding: 12px 16px; } }   /* 18/10/2026 : 31 px de haut, empilés à 50 px d'écart : on copiait la mauvaise ligne */
.copier.fait { border-color: var(--or); background: var(--or); color: #2A2236; }
.note-reglement { font-size: 14.5px; line-height: 1.55; color: var(--texte); margin: 14px 0 0; }
.note-reglement b { color: var(--encre); }
.pas-cheque { list-style: none; counter-reset: pas; margin: 0; padding: 0; }
.pas-cheque li { counter-increment: pas; position: relative; padding: 14px 0 14px 46px; border-bottom: 1px solid var(--trait); font-size: 16px; line-height: 1.45; color: var(--encre); font-weight: 600; }
.pas-cheque li:last-child { border-bottom: 0; padding-bottom: 4px; }
.pas-cheque li::before { content: counter(pas); position: absolute; left: 0; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--marque-clair); color: var(--marque-texte); display: grid; place-items: center; font: 600 14px/1 var(--corps); }
.pas-cheque li > b { display: block; font-size: 12.5px; font-weight: 600; color: var(--doux); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.enveloppe { display: inline-block; font-style: normal; font-weight: 500; margin-top: 6px; padding: 12px 18px; border: 1.5px dashed var(--doux); border-radius: 12px; background: var(--fond); line-height: 1.5; }

/* l'aperçu du mail de confirmation */
.apercu-mail { text-align: left; margin-top: 14px; border: 1px solid var(--trait); border-radius: 16px; background: var(--fond); overflow: hidden; }
.apercu-mail summary { cursor: pointer; padding: 14px 18px; font-size: 15px; font-weight: 600; color: var(--marque-texte); }
.apercu-mail .mail { border-top: 1px solid var(--trait); background: var(--carte); }
.mail-tete { padding: 14px 18px; border-bottom: 1px solid var(--trait); font-size: 14px; line-height: 1.6; color: var(--encre); }
.mail-tete span { display: inline-block; width: 52px; color: var(--doux); font-size: 13px; }
.mail-corps { padding: 16px 18px 18px; font-size: 14.5px; line-height: 1.55; color: var(--texte); }
.mail-corps p { margin: 0; overflow-wrap: anywhere; }
.mail-corps p.vide { height: 12px; }

@media (max-width: 640px) {
  .ligne-places { padding: 16px; gap: 10px; }
  .plus-moins button { width: 40px; height: 40px; }
  .plus-moins output { min-width: 36px; font-size: 24px; }
  .carte-choix.mode { padding-right: 18px; }
  .carte-choix .prix-mode { position: static; text-align: left; display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
  .rib > div { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
  .rib dt { grid-column: 1 / -1; }
  .reglement-carte > header, .reglement-carte .dedans { padding-left: 16px; padding-right: 16px; }
}
@media print {
  .copier, .apercu-mail summary { display: none !important; }
  .reglement-carte > header { background: none; color: #000; border-bottom: 1.5px solid #000; }
  .reglement-carte > header h3 { color: #000; }
}

/* ---------- les visuels du règlement (ajout du 12/10/2026) : la carte du RIB, le chèque tout rempli, le dos du chèque, l'enveloppe ----------
   Chaque visuel se met à l'échelle de sa propre largeur (unités cqw) : il garde ses proportions sur téléphone comme sur ordinateur.
   Les couleurs du papier sont fixes : un chèque reste un chèque, de jour comme de nuit. */
.apercu-reglement:empty { display: none; }
.apercu-reglement { margin-top: 22px; padding-top: 22px; border-top: 1px dashed var(--trait); }
.apercu-reglement h3 { font-size: 20px; margin: 0 0 16px; }
.visuel-rib, .visuel-cheque, .visuel-dos, .visuel-enveloppe { margin: 0; container-type: inline-size; position: relative; overflow: hidden; }

/* la carte du RIB */
.visuel-rib { max-width: 540px; border-radius: 22px; color: #fff; background: radial-gradient(130% 150% at 0% 0%, #7E3355 0%, #4A2140 52%, #2A1830 100%); box-shadow: 0 24px 42px -24px rgba(42, 20, 48, .75); }
.visuel-rib::after { content: ""; position: absolute; right: -11cqw; top: -14cqw; width: 38cqw; height: 38cqw; border-radius: 50%; border: .35cqw solid rgba(214, 163, 65, .55); pointer-events: none; }
.visuel-rib > * { position: relative; z-index: 1; margin-left: 5cqw; margin-right: 5cqw; }
.rib-haut { display: flex; align-items: center; gap: 2.6cqw; margin-top: 4.6cqw; }
.rib-haut img { width: 9.5cqw; height: 9.5cqw; min-width: 36px; min-height: 36px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85); object-fit: cover; }
.rib-qui small, .rib-iban small, .rib-bas small { display: block; font: 600 clamp(11px, 2.4cqw, 12.5px)/1.3 var(--corps); letter-spacing: .1em; text-transform: uppercase; opacity: .85; }   /* 18/10/2026 : 9,5 px à peine lisibles au téléphone */
.rib-qui b { display: block; font: 600 clamp(16px, 4.1cqw, 22px)/1.2 var(--titre); }
.rib-type { margin-left: auto; font: 700 clamp(11px, 2.5cqw, 13px)/1 var(--corps); letter-spacing: .14em; color: #2A2236; background: #FFD98A; border-radius: 999px; padding: 1.3cqw 2.2cqw; }
.rib-iban { margin-top: 5cqw; }
.rib-iban b { display: block; font: 500 clamp(13px, 4.15cqw, 22px)/1.35 ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace; letter-spacing: .04em; white-space: normal; }   /* 15/10/2026 : à 360-390 px l'IBAN sortait de la carte ; il passe à la ligne entre deux groupes de chiffres */
.rib-bas { display: flex; flex-wrap: wrap; gap: 3cqw 6cqw; margin-top: 3.8cqw; margin-bottom: 5cqw; }
.rib-bas b { display: block; font: 600 clamp(14px, 3.4cqw, 18px)/1.3 var(--corps); }
.rib-bas .rib-ref b { color: #FFD98A; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .03em; }
.rib-bas .rib-ref.provisoire b { font: italic 500 clamp(13px, 3.1cqw, 16px)/1.3 var(--corps); letter-spacing: 0; }

/* le chèque, déjà rempli à l'encre bleue */
.visuel-cheque { max-width: 600px; aspect-ratio: 2.2 / 1; display: flex; flex-direction: column; border-radius: 12px; color: #2B3A55; border: 1px solid #D9C9BD;
  background: repeating-linear-gradient(115deg, rgba(91, 42, 74, .05) 0 2px, transparent 2px 9px), linear-gradient(135deg, #FBF3E6, #F7E8EC 58%, #EFE4F3);
  box-shadow: 0 22px 38px -24px rgba(42, 34, 54, .6); transform: rotate(-1.1deg); margin: 6px 4px 10px; }
.visuel-cheque > * { margin-left: 4.8cqw; margin-right: 4.8cqw; }
.chq-haut { display: flex; justify-content: space-between; align-items: center; margin-top: 4cqw; }
.chq-banque { display: inline-flex; align-items: center; gap: 1.8cqw; font: 700 2.4cqw/1 var(--corps); letter-spacing: .16em; text-transform: uppercase; color: #5B2A4A; opacity: .7; }
.chq-banque i { width: 5.2cqw; height: 5.2cqw; border-radius: 50%; border: .55cqw solid #D6A341; }
.chq-somme { display: inline-flex; align-items: center; gap: 1.6cqw; border: .35cqw solid #5B2A4A; border-radius: 1.5cqw; padding: .7cqw 2.4cqw .9cqw; background: rgba(255, 255, 255, .78); }
.chq-somme small { font: 700 3.2cqw/1 var(--corps); color: #5B2A4A; }
.main { font: 700 5.6cqw/1.05 'Caveat', 'Segoe Script', 'Bradley Hand', 'Comic Sans MS', cursive; color: #1F3A8A; white-space: nowrap; }
.main.pale { color: rgba(31, 58, 138, .36); font-weight: 600; }
.chq-somme b { font: 700 6.4cqw/1 'Caveat', 'Segoe Script', 'Bradley Hand', 'Comic Sans MS', cursive; color: #1F3A8A; }
.chq-ligne { display: flex; align-items: baseline; gap: 2.2cqw; margin-top: 2.4cqw; padding-bottom: .5cqw; border-bottom: .25cqw solid rgba(43, 58, 85, .32); }
.chq-ligne small, .chq-bas small { flex: none; font: 500 2.3cqw/1.2 var(--corps); color: #4A5568; white-space: nowrap; }
.chq-ligne .main.ordre { font-size: 7.4cqw; letter-spacing: .05em; }
/* le trait de stylo qui ferme la ligne, après le montant et après le nom (14/10/2026) */
.chq-trait { flex: 1 1 auto; min-width: 5cqw; align-self: center; height: 0; margin-top: 1.4cqw; border-top: .5cqw solid #1F3A8A; border-radius: .5cqw; transform: rotate(-.7deg); opacity: .9; }
.chq-bas { display: flex; justify-content: space-between; align-items: flex-end; gap: 3cqw; margin-top: auto; }
.chq-fait { display: flex; align-items: baseline; gap: 1.6cqw; }
.chq-fait .main, .chq-signe .main { font-size: 4.5cqw; padding: 0 1.2cqw .3cqw; border-bottom: .25cqw solid rgba(43, 58, 85, .32); }
.chq-signe { text-align: center; }
.chq-signe .main { display: block; min-width: 24cqw; transform: rotate(-3deg); transform-origin: left bottom; }
.chq-pied { margin-top: 2.2cqw; margin-bottom: 2.6cqw; font: 500 2.4cqw/1 ui-monospace, Consolas, 'Courier New', monospace; letter-spacing: .32em; color: rgba(43, 58, 85, .5); white-space: nowrap; }

/* le dos du chèque et l'enveloppe, côte à côte */
.duo-cheque { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 16px; max-width: 600px; }
.duo-cheque > div { min-width: 0; }
.visuel-dos, .visuel-enveloppe { aspect-ratio: 2.2 / 1; border-radius: 10px; border: 1px solid #D9C9BD; box-shadow: 0 16px 28px -22px rgba(42, 34, 54, .55); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.visuel-dos { background: linear-gradient(135deg, #FDF8EF, #F4EAE2); gap: 2.5cqw; }
.visuel-dos small { font: 600 4.4cqw/1 var(--corps); letter-spacing: .1em; text-transform: uppercase; color: #7B7386; }
.visuel-dos .main { font-size: 14cqw; }
.visuel-dos .main.pale { font-size: 8.5cqw; white-space: normal; text-align: center; padding: 0 6cqw; }
.visuel-enveloppe { background: #fff; align-items: flex-start; }
.numero-resa { flex-wrap: wrap; justify-content: center; }
.numero-resa b { white-space: nowrap; }
.visuel-enveloppe::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46%; background: linear-gradient(to bottom right, rgba(91, 42, 74, .07) 49.6%, transparent 50%) left / 50.2% 100% no-repeat, linear-gradient(to bottom left, rgba(91, 42, 74, .07) 49.6%, transparent 50%) right / 50.2% 100% no-repeat; pointer-events: none; }
.visuel-enveloppe .timbre { position: absolute; right: 5cqw; top: 6cqw; width: 12cqw; height: 14cqw; border: .7cqw dashed #B9553A; border-radius: 1.2cqw; background: rgba(222, 122, 92, .16); }
.visuel-enveloppe address { position: relative; font: 600 5.4cqw/1.45 var(--corps); font-style: normal; color: #2A2236; margin: 9cqw 0 0 13cqw; }
.pas-visuel { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; font-size: 15.5px; font-weight: 600; color: var(--encre); }
.pas-visuel b { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--marque-clair); color: var(--marque-texte); display: grid; place-items: center; font: 600 14px/1 var(--corps); }
.reglement-carte .visuel-rib { margin: 18px 0 8px; }
.reglement-carte .visuel-cheque { margin-top: 8px; }
@media (max-width: 640px) { .duo-cheque { grid-template-columns: 1fr; max-width: 340px; } }
@media print { .visuel-rib { box-shadow: none; } .visuel-cheque { transform: none; box-shadow: none; } }