/* Écran Réservation : les trois cartes (Contrat, Acompte, Caution) et leurs états ouverte, terminée (résumé d'une ligne), à venir, absente.
   Les statuts viennent de reservation/parcours.js par data-statut ; la coche apparaît quand data-fait vaut « oui ». */

.carte {
  min-inline-size: 0;
  padding: var(--e5);
  background: var(--surface);
  border: var(--filet-trait);
  border-radius: var(--rayon-m);
  box-shadow: var(--ombre-carte);
}
.carte[data-statut="absente"] { display: none; }
.carte[data-statut="a-venir"] { background: var(--fond); border-style: dashed; box-shadow: none; }
.carte[data-statut="terminee"] { padding-block: var(--e3); }

/* En-tête : pastille, titre (ou résumé), montant (ou « Revoir »), ligne d'attente */
.carte__tete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--e3); min-block-size: var(--reservation-coche); }
.pastille { inline-size: var(--reservation-coche); block-size: var(--reservation-coche); border-color: var(--dominante); color: var(--dominante); }
.carte[data-statut="a-venir"] .pastille { border-color: var(--filet-fort); color: var(--sourdine); }
.carte[data-fait="oui"] .pastille { background: var(--dominante); border-color: var(--dominante); color: var(--surface); }
.carte[data-fait="oui"] .pastille__numero { display: none; }
.carte[data-fait="oui"] .pastille .coche { display: block; }
.carte__titre { font-family: var(--police-texte); font-size: var(--t-h4); font-weight: 600; line-height: 1.3; }
.carte[data-statut="a-venir"] .carte__titre { color: var(--sourdine); font-weight: 600; font-family: var(--police-texte); font-size: var(--t-corps); }
.carte__montant { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-h4); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.carte__montant .exemple { font-size: var(--t-micro); }
.carte__resume, .carte__attente, .revoir { display: none; }
.carte__resume { font-weight: 600; }
.carte__attente { grid-column: 2; color: var(--sourdine); }
.carte[data-statut="a-venir"] .carte__montant, .carte[data-statut="terminee"] .carte__montant { display: none; }
.carte[data-statut="a-venir"] .carte__attente { display: block; }
.carte[data-statut="terminee"] .carte__resume { display: block; }
.carte[data-statut="terminee"] .revoir { display: inline-flex; }
.carte[data-statut="terminee"] .carte__titre {
  position: absolute;
  inline-size: var(--trait);
  block-size: var(--trait);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.revoir {
  align-items: center;
  min-block-size: var(--cible);
  min-inline-size: var(--cible);
  padding-inline: var(--e2);
  background: transparent;
  border: 0;
  color: var(--dominante);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.carte__corps { display: grid; gap: var(--e3); margin-block-start: var(--e3); }
.carte[data-statut="a-venir"] .carte__corps, .carte[data-statut="terminee"] .carte__corps { display: none; }
.carte[data-statut="terminee"][data-revoir="oui"] .carte__corps { display: grid; }
.carte__aide { color: var(--sourdine); text-wrap: pretty; }
.carte__pied { display: none; gap: var(--e3); flex-wrap: wrap; }
.carte__pied[data-bouton] { display: flex; }
.carte__pied .btn { display: none; }
.carte__pied[data-bouton="signer"] [data-action="signer"], .carte__pied[data-bouton="continuer"] [data-action="continuer"],
.carte__pied[data-bouton="regler"] [data-action="regler"], .carte__pied[data-bouton="poser"] [data-action="poser"],
.carte__pied[data-bouton="confirmer"] [data-action="confirmer"] { display: inline-flex; }

/* Carte 1 : contrat, champs, case, signature */
.contrat {
  block-size: calc(var(--champ-h) * 3 + var(--e4));
  padding: var(--e3);
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: var(--filet-fort) var(--surface);
  background: var(--surface);
  border: var(--trait-champ) solid var(--filet-fort);
  border-radius: var(--rayon-s);
}
.contrat__article + .contrat__article { margin-block-start: var(--e3); }
.contrat__article strong { display: block; }
.contrat__champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); align-items: start; }
.reservation .champ input { block-size: var(--champ-h); }
.reservation .champ input:disabled { background: var(--fond); color: var(--encre); -webkit-text-fill-color: var(--encre); opacity: 1; }
.contrat__lu { padding-block-start: calc(var(--t-corps) * var(--lh-corps) + var(--e2)); }
.case { position: relative; display: flex; align-items: center; gap: var(--e2); min-block-size: var(--cible); cursor: pointer; }
.case__entree { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: var(--cible); block-size: var(--cible); margin: 0; opacity: 0; cursor: pointer; }
.case__boite {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--case);
  block-size: var(--case);
  margin-inline: calc((var(--cible) - var(--case)) / 2);
  background: var(--surface);
  border: var(--trait-champ) solid var(--filet-fort);
  border-radius: var(--rayon-s);
  color: var(--surface);
}
.case__boite .coche { inline-size: var(--icone-s); block-size: var(--icone-s); }
.case__entree:checked + .case__boite { background: var(--dominante); border-color: var(--dominante); }
.case__entree:checked + .case__boite .coche { display: block; }
.case__entree:focus-visible + .case__boite { outline: var(--anneau) solid var(--dominante); outline-offset: var(--anneau-decalage); }

.signature { position: relative; margin: 0; background: var(--fond); border: var(--trait-champ) dashed var(--filet-fort); border-radius: var(--rayon-s); }
.signature__svg { display: block; inline-size: 100%; block-size: calc(var(--champ-h) * 2 + var(--e3)); }
.signature__base { stroke: var(--filet-fort); stroke-width: var(--trait-champ); }
.signature__trait {
  fill: none;
  stroke: var(--dominante);
  stroke-width: calc(var(--trait-fort) + var(--trait) / 2);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
html[data-etat="contrat"] .signature__trait { visibility: hidden; stroke-dashoffset: 1; }
.signature__invite { position: absolute; inset-block-start: var(--champ-h); inset-inline: 0; padding-inline-start: var(--reservation-signature-retrait); text-align: start; color: var(--sourdine); opacity: 0; pointer-events: none; }
html[data-etat="contrat"] .signature__invite { opacity: 1; }
.signature__legende { padding: 0 var(--e3) var(--e2) var(--reservation-signature-retrait); font-size: var(--t-micro); font-weight: 600; color: var(--encre); }

/* Carte 2 : choix du mode de paiement, détail du virement, statut, échéancier */
.choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.choix legend { grid-column: 1 / -1; margin-block-end: var(--e1); padding: 0; font-weight: 600; }
.choix__option {
  --bord: var(--trait-champ);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  min-block-size: calc(var(--champ-h) + var(--e4));
  padding: calc(var(--e3) + var(--trait-champ) - var(--bord));
  background: var(--surface);
  border: var(--bord) solid var(--filet-fort);
  border-radius: var(--rayon-m);
  cursor: pointer;
}
.choix__option:has(.choix__entree:checked) { --bord: var(--trait-fort); background: var(--dominante-douce); border-color: var(--dominante); }
.choix__option:has(.choix__entree:focus-visible) { outline: var(--anneau) solid var(--dominante); outline-offset: var(--anneau-decalage); }
.choix__entree { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choix__rond { position: relative; flex: none; inline-size: var(--icone-m); block-size: var(--icone-m); margin-block-start: var(--e1); border: var(--trait-fort) solid var(--filet-fort); border-radius: 50%; background: var(--surface); }
.choix__rond::after { content: ""; position: absolute; inset: var(--e1); border-radius: 50%; background: var(--dominante); transform: scale(0); }
.choix__option:has(.choix__entree:checked) .choix__rond { border-color: var(--dominante); }
.choix__option:has(.choix__entree:checked) .choix__rond::after { transform: scale(1); }
.choix__texte { display: grid; gap: var(--e1); }
.choix__titre { font-weight: 600; color: var(--encre); }
.choix__detail { font-size: var(--t-corps); color: var(--sourdine); }

.virement { display: none; gap: var(--e2); margin: 0; padding: var(--e3); background: var(--fond); border-radius: var(--rayon-s); }
html[data-paiement="sepa"] .virement { display: grid; }
.virement > div { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.virement dt { font-weight: 600; }
.virement dd { margin: 0; display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.virement__valeur { font-variant-numeric: tabular-nums; }

#erreur-paiement, #erreur-caution { display: none; }
html[data-erreur="paiement"] #erreur-paiement, html[data-erreur="caution"] #erreur-caution { display: flex; }

.statut { position: relative; display: grid; min-block-size: var(--champ-h); margin: 0; overflow: hidden; border-radius: var(--rayon-s); }
.carte[data-fait="non"] .statut { display: none; }
.statut__attente, .statut__fait { grid-area: 1 / 1; display: flex; align-items: center; gap: var(--e2); padding-inline: var(--e3); }
.statut__attente { display: none; background: var(--info-pale); color: var(--info); }
html[data-paiement="sepa"] .statut__attente { display: flex; }
.statut__fait { background: var(--succes-pale); color: var(--succes); font-weight: 600; transform-origin: 0 50%; }
.statut__fait .coche { display: block; flex: none; inline-size: var(--icone-m); block-size: var(--icone-m); }
.statut__texte--sepa, html[data-paiement="sepa"] .statut__texte--carte { display: none; }
html[data-paiement="sepa"] .statut__texte--sepa { display: inline; }

.echeancier { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: var(--e3); margin: 0; }
.echeancier > div { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; min-block-size: var(--ligne-devis); border-block-end: var(--filet-trait); }
.echeancier dd { display: contents; }
.echeance__montant { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.echeance__repere { padding-inline: var(--e2); background: var(--dominante-douce); color: var(--encre); border-radius: var(--rayon-s); font-size: var(--t-micro); font-weight: 600; line-height: var(--lh-corps); text-align: center; }
.echeance__repere--date { background: var(--accent-pale); }

/* Carte 3 : empreinte et badge « Caution posée » */
.empreinte { display: flex; align-items: flex-start; gap: var(--e4); }
.empreinte__anneau { display: block; flex: none; inline-size: var(--cercle-coche); block-size: var(--cercle-coche); color: var(--dominante); }
.empreinte__anneau svg { display: block; inline-size: 100%; block-size: 100%; }
.empreinte__texte { display: grid; gap: var(--e2); max-inline-size: 72ch; }
.empreinte__phrase { font-weight: 600; }
.empreinte__phrase--posee, .carte[data-fait="oui"] .empreinte__phrase--a-poser { display: none; }
.carte[data-fait="oui"] .empreinte__phrase--posee { display: block; }
.pose {
  display: none;
  align-items: center;
  gap: var(--e2);
  inline-size: fit-content;
  min-block-size: var(--taille-picto);
  padding-inline: var(--e3);
  background: var(--succes-pale);
  color: var(--succes);
  border: var(--trait) solid var(--succes);
  border-radius: var(--rayon-l);
  font-size: var(--t-micro);
  font-weight: 600;
}
.pose .coche { inline-size: var(--icone-s); block-size: var(--icone-s); }
.carte[data-fait="oui"] .pose, .carte[data-fait="oui"] .pose .coche { display: inline-flex; }

@media (max-width: 759px) {
  .carte { padding: var(--e4); }
  .carte[data-statut="terminee"] { padding-block: var(--e3); }
  .contrat { block-size: calc(var(--champ-h) * 3 + var(--e5)); }
  .contrat__champs, .choix { grid-template-columns: minmax(0, 1fr); }
  .contrat__lu { padding-block-start: 0; }
  .carte__pied .btn { inline-size: 100%; }
  .carte__montant { grid-column: 2 / -1; grid-row: 2; margin-block-start: var(--e2); }
  .echeancier { grid-template-columns: minmax(0, 1fr) auto; }
  .echeancier > div { padding-block: var(--e2); }
  .echeance__repere { grid-column: 1 / -1; justify-self: start; text-align: start; }
  .empreinte { gap: var(--e3); }
}