/* Écran Devis : carte Récapitulatif (lignes de devis, Total, bouton), bande Échéancier et caution, barre basse du téléphone.
   Le Total prend trois visages : montant (fond doux), « À calculer » (état avant-total), message (erreur). État « total » : fond de dominante
   et anneau autour de la carte. Tout par les jetons ; seuls transform et opacity s'animent. */

.recap {
  --devis-total-fond: var(--dominante-douce);
  --devis-total-fond-valeur: var(--dominante);
  grid-column: 8 / span 5;
  position: sticky;
  inset-block-start: calc(var(--entete-h) + var(--e4));
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  border-block-start-width: 0; /* pas de légende ici : la carte n'a pas la bande des fieldset */
  padding-block-start: var(--devis-carte-pad);
  border-radius: var(--rayon-l);
}
.recap h2 { font-family: var(--police-texte); font-size: var(--t-h4); font-weight: 600; line-height: 1.3; }
.recap__entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2); }
.recap__villa { display: flex; align-items: center; gap: var(--e3); }
.recap__villa .devis__aide { margin-block-start: 0; }
.recap__nom { font-weight: 600; }
html[data-etat="total"] .recap {
  box-shadow: var(--ombre-carte), 0 0 0 var(--anneau-decalage) var(--fond), 0 0 0 calc(var(--anneau-decalage) + var(--anneau)) var(--dominante);
}

/* Lignes de devis */
.ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  min-block-size: var(--ligne-devis);
  padding-block: var(--e2);
  border-block-end: var(--trait) solid var(--filet);
}
.ligne__texte { display: flex; flex-direction: column; min-inline-size: 0; }
.ligne__sous { font-size: var(--t-micro); line-height: 1.5; color: var(--sourdine); }
.ligne__montant { flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Total */
.total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  min-block-size: var(--socle-h);
  padding-inline: var(--e3);
  background: var(--devis-total-fond);
  border-radius: var(--rayon-m);
  font-size: var(--t-h4);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.total__montant { margin-inline-start: auto; text-align: end; }
.total__icone { display: none; flex: none; inline-size: var(--icone-m); block-size: var(--icone-m); color: var(--attention); }
.total[data-mode="attente"] .total__montant { font-size: var(--t-micro); color: var(--sourdine); }
.total[data-mode="dates"] .total__montant, .total[data-mode="corriger"] .total__montant { font-size: var(--t-corps); color: var(--attention); }
.total[data-mode="dates"] .total__icone, .total[data-mode="corriger"] .total__icone { display: block; }
html[data-etat="total"] .total[data-mode="montant"] { background: var(--devis-total-fond-valeur); color: var(--surface); }

.total, .recap__bouton { margin-block-start: var(--e2); }
.recap__acompte { color: var(--sourdine); }
[data-masque="true"] { visibility: hidden; }
.recap__bouton { inline-size: 100%; min-block-size: var(--hauteur-bouton); }
.recap .btn[aria-disabled="true"] { background: var(--dominante-pale); border-color: var(--dominante-pale); color: var(--sourdine); cursor: not-allowed; }
.recap__paiement { margin-block-start: 0; text-align: center; }
.total__montant.fondu { animation: devis-fondu var(--d-micro) linear; }

/* Échéancier et caution */
.echeancier { margin-block-start: var(--e6); }
.echeancier__entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); margin-block-end: var(--e4); }
.echeancier__liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e3); }
.versement {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e2);
  min-inline-size: 0;
  padding: var(--e4);
  background: var(--surface);
  border-radius: var(--rayon-m);
  box-shadow: var(--ombre-carte);
}
.versement__titre { font-weight: 600; }
.versement__date {
  padding: var(--e1) var(--e2);
  background: var(--accent-pale);
  color: var(--encre);
  border-radius: var(--rayon-s);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.4;
}
.versement__note { font-size: var(--t-micro); line-height: 1.5; color: var(--sourdine); }
.versement__montant { margin-block-start: auto; font-size: var(--t-h4); font-weight: 600; font-variant-numeric: tabular-nums; }
.versement__montant.est-attente { font-size: var(--t-micro); color: var(--sourdine); }
.versement__bouclier { flex: none; inline-size: calc(var(--e3) + var(--e2)); block-size: calc(var(--e3) + var(--e2)); color: var(--dominante); }
/* Caution : le bouclier est en ligne avec le titre (comme les titres des trois versements, au même top), le texte est calé en bas */
.versement__tete { display: flex; align-items: center; gap: var(--e2); }
.versement--caution .versement__montant { margin-block-start: 0; }
.versement__texte { margin-block-start: auto; font-size: var(--t-micro); line-height: 1.5; color: var(--sourdine); }
.versement.entree { animation: devis-entree var(--d-moyen) var(--ease-entree) both; }

/* Barre basse du téléphone */
.barre {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  min-block-size: calc(var(--ligne-devis) + var(--e3));
  padding-inline: var(--gouttiere);
  background: var(--surface);
  border-block-start: var(--trait) solid var(--filet);
}
.barre__total { display: flex; align-items: baseline; gap: var(--e2); font-size: var(--t-h4); font-weight: 600; font-variant-numeric: tabular-nums; }
.barre .btn { min-block-size: var(--cible); padding-inline: var(--e3); }

@keyframes devis-entree { from { opacity: 0; transform: translateY(var(--decalage-entree)); } }
@keyframes devis-fondu { from { opacity: 0; } }

@media (min-width: 760px) {
  .barre { display: none; }
}
@media (max-width: 959px) {
  .recap { grid-column: 1 / -1; position: static; }
  .echeancier__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  .echeancier { margin-block-start: var(--e5); }
  .echeancier__liste { grid-template-columns: minmax(0, 1fr); }
  .versement { padding: var(--e3); }
  .pied { padding-block-end: calc(var(--ligne-devis) + var(--e6)); }
}
@media (prefers-reduced-motion: reduce) {
  .versement.entree { animation: none; }
}