/* Site Commerce · css/fx-succes.css : Lot 3 · Sélection et succès, les retours.
   Les règles de fx/succes.js : le ticket de caisse du devis envoyé, le
   bouton qui se contracte, le balayage de l'entrée en mode édition. Aucune
   règle n'est écrite sur un identifiant : le clone qui emporte la feuille à
   sa fermeture (fx/feuille.js) n'en porte pas, il doit garder le ticket.
   Aucune variable lue ici n'est hors des jetons --cv-* de la coquille. */

/* ── Le succès : la feuille devient le ticket ─────────────────────────────
   Le formulaire (vidé par chooser.js) s'efface, le message de succès reste
   lu par les lecteurs d'écran (zone vivante, masquée à l'écran : le ticket
   le dit), « Fermer » descend sous le ticket. */
.is-ticket .cv-dialog-sub,
.is-ticket .cv-form > .cv-row2,
.is-ticket .cv-form > .cv-field,
.is-ticket .cv-form > .hp,
.is-ticket .cv-form > .cv-note { display: none; }
.is-ticket .cv-form > .msg {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.is-ticket .cv-dialog-body { display: flex; flex-direction: column; }
.is-ticket .cv-form { flex: 1 0 auto; display: flex; flex-direction: column; gap: 14px; }
/* Le temps que la feuille se resserre sur le ticket (cf. fx/succes.js) : le
   contenu ne s'étire plus, il est déjà à sa place finale, et la découpe ronge
   le bas resté vide. */
.is-resserre .cv-dialog-body,
.is-resserre .cv-form,
.is-resserre .cv-ticket-zone { flex-grow: 0; }

.cv-ticket-zone {
  flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4px 0 6px; min-height: 0;
}
/* La fente : le ticket sort de dessous sa lèvre basse. */
.cv-ticket-fente {
  position: relative; z-index: 2; flex: none;
  width: min(316px, 100%); height: 9px; border-radius: 999px;
  background: var(--cv-fg);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .55), 0 1px 0 var(--cv-line);
}
/* En sombre, la fente reste un creux : plus sombre que la feuille, jamais
   la couleur du texte (elle se lisait comme une barre blanche). */
[data-theme="dark"] .cv-ticket-fente {
  background: #050505;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .09);
}
/* La découpe coupe tout ce qui est au-dessus du milieu de la fente, et
   laisse passer l'ombre sur les côtés et dessous. */
.cv-ticket-sortie {
  flex: none; width: min(292px, calc(100% - 24px)); margin-top: -4px;
  clip-path: inset(0 -32px -48px -32px);
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .14)) drop-shadow(0 1px 1px rgba(0, 0, 0, .1));
}
/* Le papier : un ticket est un papier, il reste clair dans les deux thèmes.
   Bord bas en dents de scie : une découpe (vingt dents de 7 px), ni image
   ni dégradé. L'ombre de la sortie en suit le contour. */
.cv-ticket {
  position: relative; padding: 18px 20px 30px;
  background: #fffdf8; color: #1d1a16;
  font: 500 13px/1.55 var(--cv-mono);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), 97.5% 100%, 95% calc(100% - 7px), 92.5% 100%, 90% calc(100% - 7px), 87.5% 100%, 85% calc(100% - 7px), 82.5% 100%, 80% calc(100% - 7px), 77.5% 100%, 75% calc(100% - 7px), 72.5% 100%, 70% calc(100% - 7px), 67.5% 100%, 65% calc(100% - 7px), 62.5% 100%, 60% calc(100% - 7px), 57.5% 100%, 55% calc(100% - 7px), 52.5% 100%, 50% calc(100% - 7px), 47.5% 100%, 45% calc(100% - 7px), 42.5% 100%, 40% calc(100% - 7px), 37.5% 100%, 35% calc(100% - 7px), 32.5% 100%, 30% calc(100% - 7px), 27.5% 100%, 25% calc(100% - 7px), 22.5% 100%, 20% calc(100% - 7px), 17.5% 100%, 15% calc(100% - 7px), 12.5% 100%, 10% calc(100% - 7px), 7.5% 100%, 5% calc(100% - 7px), 2.5% 100%, 0% calc(100% - 7px));
}
[data-theme="dark"] .cv-ticket { background: #f1ede4; }
.cv-ticket-ligne { margin: 0; overflow-wrap: anywhere; }
.cv-ticket-titre {
  margin-bottom: 10px; padding-bottom: 10px; text-align: center;
  font-weight: 700; letter-spacing: .01em;
  border-bottom: 1px dashed rgba(29, 26, 22, .32);
}
.cv-ticket-nom { font-weight: 700; font-size: 15px; line-height: 1.4; }
.cv-ticket-filet { height: 0; margin: 12px 0 10px; border-top: 2px dotted rgba(29, 26, 22, .42); }
.cv-ticket-merci { text-align: center; font-weight: 700; font-size: 15px; }

/* Un téléphone couché n'a que 390 px de haut : le ticket se resserre pour
   que « Fermer » tienne sous lui sans défiler. */
@media (max-height: 520px) {
  .cv-ticket-zone { padding: 0; }
  .cv-ticket { padding: 12px 16px 20px; font-size: 12px; line-height: 1.42; }
  .cv-ticket-titre { margin-bottom: 6px; padding-bottom: 6px; }
  .cv-ticket-nom, .cv-ticket-merci { font-size: 13.5px; }
  .cv-ticket-filet { margin: 7px 0 6px; }
  .is-ticket .cv-form { gap: 10px; }
}

/* ── Le bouton d'envoi qui se contracte (clone éphémère) ─────────────────
   Son état de base est invisible : l'animation le montre, puis il quitte le
   DOM. Au-dessus de la feuille (50), sous la visite guidée (200). */
.cv-envoi {
  position: fixed; z-index: 51; display: grid; place-items: center;
  border-radius: var(--cv-r-btn); background: var(--cv-cta); color: var(--cv-on-cta);
  font: 600 15px/1 var(--cv-body); pointer-events: none; opacity: 0;
}
.cv-envoi-txt, .cv-envoi-coche { grid-area: 1 / 1; }
.cv-envoi-coche { width: 26px; height: 26px; }
.cv-envoi-coche path {
  stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}

/* ── L'entrée en mode édition ─────────────────────────────────────────────
   Un balayage lumineux unique, sur la scène (sous le store), éphémère. La
   bande est une lumière crème (visible sur une vitrine sombre) au cœur terre
   cuite (visible sur une vitrine claire) ; ses bords sont adoucis par un
   flou de la bande elle-même, jamais par un dégradé (la coquille n'en porte
   pas) ni par un flou de ce qui est derrière. */
.cv-balayage { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.cv-balayage-bande {
  position: absolute; top: -12%; bottom: -12%; left: 0; width: 30%; opacity: 0;
  background: rgba(255, 246, 236, .32); filter: blur(26px);
}
.cv-balayage-bande::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 38%; width: 24%;
  background: rgba(196, 87, 47, .3); filter: blur(10px);
}