/* Page de commande d'un bon. Chargée après bon.css : mêmes couleurs, mêmes polices, le même bon en aperçu.
   Téléphone d'abord ; sur ordinateur, le formulaire à gauche et le bon qui se remplit à droite. */

:root { --ease-sortie: cubic-bezier(0.16, 1, 0.3, 1); --rouge: #e08f8f; }
.page-commande [hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

body.page-commande {
  display: block;
  padding: max(24px, env(safe-area-inset-top)) clamp(16px, 5vw, 56px) max(64px, env(safe-area-inset-bottom));
}

.commande {
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'tete' 'cote' 'form' 'etapes';
  row-gap: 40px;
}
.tete { grid-area: tete; }
/* L'aperçu garde la largeur du vrai bon (sur tablette, il s'étirait en bandeau) */
.cote { grid-area: cote; width: 100%; max-width: 26rem; }
.formulaire { grid-area: form; }
.etapes { grid-area: etapes; }

/* ---------- En-tête ---------- */
.tete .logo {
  display: inline-block;
  padding: 8px 0;
  color: var(--blanc);
  text-decoration: none;
}
.tete .logo:focus-visible { outline: 2px solid var(--blanc); outline-offset: 4px; }
.tete h1 {
  margin-top: 36px;
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.75rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.chapeau {
  margin-top: 18px;
  max-width: 34em;
  font-size: 17px;
  line-height: 1.5;
  color: var(--argent);
  text-wrap: pretty;
}
.offre {
  display: inline-block;
  margin-top: 18px;
  padding: 7px 11px 6px;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--blanc);
  box-shadow: inset 0 0 0 1px var(--acier);
}

/* ---------- L'aperçu du bon ---------- */
.apercu { margin: 0; }
.apercu .portrait { opacity: 0; transition: opacity 0.6s var(--ease-sortie); }
.apercu.photo-prete .portrait { opacity: 1; }
.apercu .dedicace.vide { color: var(--acier); }
.apercu .dedicace q { overflow-wrap: anywhere; }
.apercu .infos dd.a-venir { color: var(--acier); letter-spacing: 0.01em; }
.qr-attente path { fill: var(--noir); }
.apercu figcaption { margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--acier); }
/* Téléphone : le corps du bon suffit, le talon prendrait un écran entier */
@media (max-width: 959px) {
  .apercu .pli, .apercu .talon { display: none; }
}

/* ---------- Le formulaire ---------- */
.formulaire fieldset { border: 0; border-top: 1px solid var(--graphite); padding: 24px 0 0; margin: 0 0 40px; min-width: 0; }
.formulaire legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 6px;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--blanc);
}
.formulaire legend + * { clear: both; }
.formulaire legend + .montants { margin-top: 18px; }
.aide { margin-bottom: 18px; font-size: 14px; line-height: 1.5; color: var(--acier); max-width: 46em; }

.paire { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 14px; }
@media (min-width: 560px) { .paire { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.champ { display: block; margin-bottom: 16px; }
.champ > span { display: block; margin-bottom: 8px; font-size: 13px; color: var(--acier); }
.champ input, .champ textarea {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 13px 14px;
  border: 0;
  border-radius: 0;
  background: var(--fusain);
  box-shadow: inset 0 0 0 1px var(--graphite);
  color: var(--blanc);
  caret-color: var(--blanc);
  font: 16px/1.4 var(--corps);
  transition: box-shadow 0.2s var(--ease-sortie);
}
.champ textarea { min-height: 96px; resize: vertical; }
@media (hover: hover) {
  .champ input:hover, .champ textarea:hover { box-shadow: inset 0 0 0 1px #4a4a4a; }
}
.champ input:focus, .champ textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--blanc); }
.champ[aria-invalid='true'] input { box-shadow: inset 0 0 0 1px #c96a6a; }
.champ[aria-invalid='true'] > span { color: var(--rouge); }

/* Les montants : des tuiles ; la choisie prend les coins du site */
.montants { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .montants { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.montant { position: relative; display: block; }
.montant.autre { grid-column: 1 / -1; }
@media (min-width: 560px) { .montant.autre { grid-column: span 2; } }
.montant input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.montant span {
  position: relative;
  display: block;
  height: 100%;
  min-height: 86px;
  padding: 18px 16px 16px;
  background: var(--fusain);
  box-shadow: inset 0 0 0 1px var(--graphite);
  transition: box-shadow 0.2s var(--ease-sortie), background-color 0.2s var(--ease-sortie);
}
.montant b {
  display: block;
  font: 800 32px/1 var(--titre);
  letter-spacing: -0.035em;
  color: var(--argent);
  font-variant-numeric: tabular-nums;
}
.montant small { display: block; margin-top: 8px; font-size: 13px; line-height: 1.3; color: var(--acier); }
.montant span::after {
  --coin: 16px;
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  color: var(--blanc);
  background:
    linear-gradient(currentColor, currentColor) top left / var(--coin) 2px no-repeat,
    linear-gradient(currentColor, currentColor) top left / 2px var(--coin) no-repeat,
    linear-gradient(currentColor, currentColor) top right / var(--coin) 2px no-repeat,
    linear-gradient(currentColor, currentColor) top right / 2px var(--coin) no-repeat,
    linear-gradient(currentColor, currentColor) bottom left / var(--coin) 2px no-repeat,
    linear-gradient(currentColor, currentColor) bottom left / 2px var(--coin) no-repeat,
    linear-gradient(currentColor, currentColor) bottom right / var(--coin) 2px no-repeat,
    linear-gradient(currentColor, currentColor) bottom right / 2px var(--coin) no-repeat;
  transition: opacity 0.2s var(--ease-sortie);
}
@media (hover: hover) {
  .montant:hover span { box-shadow: inset 0 0 0 1px #4a4a4a; }
}
.montant input:checked + span { background: #1c1c1c; box-shadow: inset 0 0 0 1px #5a5a5a; }
.montant input:checked + span::after { opacity: 1; }
.montant input:checked + span b { color: var(--blanc); }
.montant input:checked + span small { color: var(--argent); }
.montant input:focus-visible + span { outline: 2px solid var(--blanc); outline-offset: 3px; }
.libre { display: none; margin: 14px 0 0; max-width: 22rem; }
.libre.ouvert { display: block; }

/* ---------- La caisse : conditions, ce qu'on paie, le bouton ---------- */
.caisse {
  padding: 24px 22px 22px;
  background: var(--fusain);
  box-shadow: inset 0 0 0 1px var(--graphite);
}
.coche { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--argent); cursor: pointer; }
.coche input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--blanc); cursor: pointer; }
.coche[aria-invalid='true'] input { outline: 2px solid #c96a6a; outline-offset: 2px; }
.coche[aria-invalid='true'] > span { color: var(--rouge); }

.recap { margin-top: 22px; border-top: 1px dashed #3a3a3a; }
.recap div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 14px; }
.recap dt { font-size: 15px; color: var(--acier); }
.recap dd { font: 700 17px/1.2 var(--titre); color: var(--argent); font-variant-numeric: tabular-nums; }
.recap .a-payer dt { color: var(--blanc); }
.recap .a-payer dd { font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -0.03em; color: var(--blanc); }

/* Le bouton du site : argent, capitales espacées, balayage blanc au survol, dans un cadre à coins */
.coins.cadre-bouton { --coin: 0.9rem; display: block; margin-top: 22px; padding: 0.6rem; color: rgba(245, 245, 245, 0.8); }
.payer {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 1.05rem 1.6rem;
  border: 0;
  border-radius: 0;
  background: linear-gradient(#fff, #fff) left / 0% 100% no-repeat, var(--argent);
  color: var(--noir);
  font: 700 15px/1.2 var(--titre);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-size 0.5s var(--ease-sortie);
}
@media (hover: hover) { .payer:hover { background-size: 100% 100%, auto; } }
.payer:focus-visible { outline: 2px solid var(--blanc); outline-offset: 4px; background-size: 100% 100%, auto; }
.payer[disabled] { opacity: 0.55; cursor: progress; }
.erreur { margin-top: 14px; font-size: 14px; line-height: 1.45; color: var(--rouge); }
.erreur:empty { display: none; }
.confiance { margin-top: 14px; font-size: 13px; line-height: 1.45; color: var(--acier); }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Comment ça marche ---------- */
.etapes { border-top: 1px solid var(--graphite); padding-top: 32px; }
.etapes h2 {
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(28px, 1.2rem + 1.6vw, 40px);
  line-height: 1;
  letter-spacing: -0.03em;
}
.etapes ol { list-style: none; counter-reset: etape; display: grid; gap: 28px; margin-top: 28px; }
@media (min-width: 720px) { .etapes ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.etapes li { counter-increment: etape; }
.etapes li::before {
  content: counter(etape);
  display: block;
  margin-bottom: 12px;
  font-family: var(--titre);
  font-weight: 800;
  font-size: 72px;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px #5a5a5a;
}
.etapes b { display: block; font: 700 19px/1.25 var(--titre); color: var(--blanc); }
.etapes li > span { display: block; margin-top: 6px; max-width: 30em; font-size: 15px; line-height: 1.5; color: var(--acier); }

/* ---------- Ordinateur : deux colonnes, le bon reste en vue ---------- */
@media (min-width: 960px) {
  body.page-commande { padding-top: max(40px, env(safe-area-inset-top)); }
  .commande {
    grid-template-columns: minmax(0, 1fr) 24rem;
    grid-template-areas: 'tete cote' 'form cote' 'etapes etapes';
    column-gap: clamp(48px, 7vw, 112px);
    row-gap: 48px;
  }
  .cote { align-self: start; position: sticky; top: 32px; }
  .tete h1 { margin-top: 56px; }
  .etapes { margin-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-commande *, .page-commande *::after { transition: none !important; }
}