/* M'trix — la réservation.

   Toute la page tient sur une idée : on ne vend pas une paire de lunettes,
   on vend une place numérotée à un prix qui ne reviendra pas. Le prix est
   donc l'élément le plus gros de l'écran, l'échelle des paliers montre
   l'étau qui se resserre, et l'écran de fin est un noir total : on change
   de monde au moment où l'argent est rentré. */

.cmd-page { background: var(--paper); }

/* ---------- En-tête allégé ---------- */
.bar--mince { justify-content: space-between; }
.bar__retour {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--grey); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.bar__retour:hover { color: var(--orange); border-bottom-color: var(--orange); }

.alerte {
  max-width: 760px; margin: 18px auto 0; padding: 13px 18px;
  background: #FCEDEA; border: 1px solid #F0C8C0; color: #A5301F;
  font-size: 14.5px; line-height: 1.5; border-radius: 2px;
}

/* =====================================================================
   ÉCRAN 1 — le choix

   Rendu volontairement sobre : une photo, un prix, des pastilles de
   couleur, un bouton. C'est le magasin, pas le feu d'artifice — celui-là
   vient après, une fois payé.
   ===================================================================== */
.res {
  display: grid; grid-template-columns: 1fr;
  gap: 0; align-items: start;
}
@media (min-width: 900px) {
  .res { grid-template-columns: 1fr 1fr; min-height: calc(100vh - 66px); }
}

/* ---------- La paire ---------- */
.res__vue {
  position: relative; overflow: hidden;
  background: var(--smoke);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(28px, 6vw, 60px) var(--gut);
  min-height: 40vh;
}
@media (min-width: 900px) {
  .res__vue { position: sticky; top: 66px; height: calc(100vh - 66px); min-height: 0; }
}

.res__fond { display: none; }   /* le filigrane géant est retiré : trop chargé */

/* Les photos se superposent : une seule visible, les autres en attente */
.res__photo {
  position: absolute; width: min(78%, 460px); height: auto;
  mix-blend-mode: multiply;                 /* mange le fond blanc du studio */
  opacity: 0; transform: scale(.97);
  transition: opacity .3s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
.res__photo.est-vue { opacity: 1; transform: none; }

.res__leg {
  position: absolute; left: var(--gut); bottom: clamp(18px, 3vw, 30px); margin: 0;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--grey);
}

/* ---------- Le panneau ---------- */
.res__panneau {
  padding: clamp(28px, 5vw, 60px) var(--gut) clamp(110px, 12vw, 64px);
  display: flex; flex-direction: column;
}
@media (min-width: 900px) { .res__panneau { justify-content: center; max-width: 520px; } }

.res__eyebrow {
  margin: 0 0 10px;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--grey);
}

.res__prix { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; }
.res__prix b {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(32px, 5vw, 42px); font-weight: 700; line-height: 1.05; letter-spacing: -.02em;
}
.res__prix span {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .1em;
  color: var(--grey);
}
.res__prix--fin b { font-size: clamp(28px, 4.5vw, 36px); }

.res__reste {
  margin: 0 0 clamp(22px, 3.5vw, 30px);
  font-size: 14.5px; line-height: 1.55; color: var(--grey);
}
.res__reste strong { color: var(--orange); font-weight: 600; }

/* ---------- L'échelle des paliers : discrète, lisible d'un regard ---------- */
.echelle {
  list-style: none; margin: 0 0 clamp(24px, 4vw, 32px); padding: 14px 16px;
  background: var(--smoke); border-radius: 6px;
}
.echelle__pas {
  display: grid; grid-template-columns: 54px 1fr auto;
  align-items: center; gap: 12px;
  padding: 7px 0;
}
.echelle__prix {
  font-family: 'Chakra Petch', sans-serif; font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--grey);
}
.echelle__barre {
  height: 3px; background: #E4E2DC; border-radius: 2px; position: relative; overflow: hidden;
}
.echelle__barre i {
  position: absolute; inset: 0 auto 0 0; width: var(--part, 0%); border-radius: 2px;
  background: var(--grey); transition: width .6s cubic-bezier(.16,1,.3,1);
}
.echelle__etat {
  font-family: 'Chakra Petch', sans-serif; font-size: 10.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--grey);
}

.echelle__pas.est-epuise { opacity: .5; }
.echelle__pas.est-epuise .echelle__prix { text-decoration: line-through; }
.echelle__pas.est-epuise .echelle__barre i { background: var(--ink); }

.echelle__pas.est-encours .echelle__prix { color: var(--ink); }
.echelle__pas.est-encours .echelle__etat { color: var(--orange); }
.echelle__pas.est-encours .echelle__barre i { background: var(--orange); }

.echelle__pas.est-normal .echelle__prix,
.echelle__pas.est-normal .echelle__etat { opacity: .55; }
.echelle__pas.est-normal .echelle__barre { background: none; }

/* ---------- Le coloris : pastilles rondes, coche à la sélection ---------- */
.teintes { border: 0; padding: 0; margin: 0 0 clamp(24px, 4vw, 32px); }
.teintes legend {
  padding: 0; margin-bottom: 11px;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--grey);
}
.teintes__rang { display: flex; flex-wrap: wrap; gap: 10px; }

.teintes__opt {
  display: inline-flex; align-items: center; gap: 0;
  position: relative; cursor: pointer;
}
.teintes__opt input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}

.teintes__puce {
  position: relative;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.14);
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow .15s ease, transform .15s ease;
}
/* L'anneau de sélection : un cercle propre, jamais un cadre qui déborde */
.teintes__opt input:checked ~ .teintes__puce {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink);
}
.teintes__opt:hover .teintes__puce { transform: scale(1.06); }
.teintes__opt input:focus-visible ~ .teintes__puce { outline: 2px solid var(--orange); outline-offset: 3px; }

/* La coche, visible seulement sur la couleur claire où la pastille se voit mal sinon */
.teintes__puce::after {
  content: ''; width: 9px; height: 6px;
  border-left: 2px solid; border-bottom: 2px solid; border-color: transparent;
  transform: translateY(-1px) rotate(-45deg);
}
.teintes__opt input:checked ~ .teintes__puce::after { border-color: #fff; }
.teintes__opt[data-clair="1"] input:checked ~ .teintes__puce::after { border-color: #14100C; }

.teintes__txt {
  margin-left: 9px;
  font-family: 'Chakra Petch', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .05em; color: var(--grey);
}
.teintes__opt input:checked ~ .teintes__txt { color: var(--ink); }

/* ---------- Le bouton : simple, net ---------- */
.payer {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; border: 0; cursor: pointer; text-decoration: none;
  padding: 17px 22px; border-radius: 6px;
  background: var(--ink); color: #F4F3F0;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: 13.5px; letter-spacing: .06em;
  transition: background .18s ease, transform .12s ease;
}
.payer__prix { color: var(--orange); font-variant-numeric: tabular-nums; }
.payer:hover:not(:disabled) { background: #24242A; }
.payer:active:not(:disabled) { transform: scale(.99); }
.payer:disabled, .payer.est-occupe { opacity: .5; cursor: wait; }
.payer--test { background: #5E6066; }

.payer__sous { margin: 11px 0 0; font-size: 13px; line-height: 1.55; color: var(--grey); }
.payer__sous b { color: var(--ink); }

.res__fine {
  margin: clamp(22px, 4vw, 30px) 0 0; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.6; color: var(--grey);
}
.res__fine b { color: var(--ink); }

/* Sur téléphone, le bouton reste sous le pouce */
@media (max-width: 899px) {
  .payer { position: sticky; bottom: 14px; box-shadow: 0 8px 26px rgba(0,0,0,.16); }
}
/* =====================================================================
   ÉCRANS 2 et 3 — l'argent est rentré, on bascule en noir
   ===================================================================== */
.cmd-page--fin { background: var(--ink); color: #F4F3F0; }
.cmd-page--fin .bar { background: var(--ink); border-bottom-color: #232326; }
.cmd-page--fin .bar__retour { color: #8C8D93; }
.cmd-page--fin .foot { background: var(--ink); border-top-color: #232326; color: #8C8D93; }

.fin { max-width: 640px; margin: 0 auto; padding: clamp(34px, 7vw, 76px) var(--gut) clamp(60px, 9vw, 100px); }

.bravo { text-align: center; margin-bottom: clamp(40px, 7vw, 72px); }
.bravo--court { margin-bottom: clamp(30px, 5vw, 48px); }

.bravo__eyebrow {
  margin: 0 0 clamp(18px, 3vw, 26px);
  font-family: 'Chakra Petch', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
  color: var(--orange);
}

/* Le numéro de place : le plus gros élément de toute la commande */
.bravo__place {
  margin: 0 0 6px;
  font-family: 'Archivo Black', 'Archivo', sans-serif;
  font-size: clamp(88px, 22vw, 176px); line-height: .82; letter-spacing: -.055em;
  color: var(--orange);
  animation: tombe .75s cubic-bezier(.16,1,.3,1) both;
}
.bravo__place i {
  font-style: normal; font-size: .27em; letter-spacing: -.02em; color: #5E4227;
}
@keyframes tombe {
  from { opacity: 0; transform: translateY(26px) scale(.9); }
  to   { opacity: 1; transform: none; }
}

.bravo__titre {
  margin: 0 0 clamp(16px, 3vw, 22px);
  font-family: 'Archivo Black', 'Archivo', sans-serif;
  font-size: clamp(28px, 5.5vw, 46px); line-height: 1; letter-spacing: -.035em;
  text-wrap: balance;
  animation: monte .6s .12s cubic-bezier(.16,1,.3,1) both;
}
.bravo__dit {
  margin: 0 auto; max-width: 42ch;
  font-size: clamp(15px, 2vw, 17px); line-height: 1.7; color: #A9AAB0;
  animation: monte .6s .22s cubic-bezier(.16,1,.3,1) both;
}
.bravo__dit b { color: #F4F3F0; font-weight: 600; }
.bravo__dit span { display: block; margin-top: 9px; color: var(--orange); }
@keyframes monte {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Le formulaire de livraison ---------- */
.ou { border-top: 1px solid #232326; padding-top: clamp(30px, 5vw, 46px); }
.ou h2 {
  margin: 0 0 10px;
  font-family: 'Archivo Black', 'Archivo', sans-serif;
  font-size: clamp(20px, 3.4vw, 27px); line-height: 1.12; letter-spacing: -.02em;
}
.ou__sous { margin: 0 0 clamp(24px, 4vw, 32px); font-size: 14.5px; line-height: 1.65; color: #8C8D93; }
.ou__sous b { color: var(--orange); font-family: 'Chakra Petch', sans-serif; letter-spacing: .06em; }

.ou__duo { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 560px) { .ou__duo { grid-template-columns: 1fr 1fr; gap: 14px; } }

.champ { display: block; margin-bottom: 16px; }
.champ > span {
  display: block; margin-bottom: 7px;
  font-family: 'Chakra Petch', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: #8C8D93;
}
.champ > span small { text-transform: none; letter-spacing: .02em; font-weight: 500; opacity: .75; }
.champ input, .champ textarea {
  font: inherit; font-size: 16px; width: 100%;
  padding: 15px 16px; border-radius: 2px;
  border: 1px solid #2E2E32; background: #141416; color: #F4F3F0;
  transition: border-color .2s ease, background .2s ease;
}
.champ input::placeholder, .champ textarea::placeholder { color: #5A5B61; }
.champ input:focus, .champ textarea:focus {
  outline: none; border-color: var(--orange); background: #18181B;
}
.champ textarea { resize: vertical; }
.err { display: block; margin-top: 6px; font-style: normal; font-size: 13px; color: #F08A72; }

.cmd-page--fin .payer { background: var(--orange); color: #14100C; margin-top: 10px; }
.cmd-page--fin .payer::after { background: #F4F3F0; }
.cmd-page--fin .payer:hover::after { transform: none; }

/* ---------- La carte de place ---------- */
.carte-zone { text-align: center; }
.carte-zone__dit {
  margin: 0 0 clamp(18px, 3vw, 26px);
  font-family: 'Chakra Petch', sans-serif;
  font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: #6E6F75;
}

.carte {
  position: relative; overflow: hidden; text-align: left;
  max-width: 340px; margin: 0 auto;
  padding: 26px 24px 22px;
  background: #121214; border: 1px solid #2A2A2E; border-radius: 3px;
  box-shadow: 0 26px 60px rgba(0,0,0,.5);
  animation: carteEntre .8s .3s cubic-bezier(.16,1,.3,1) both;
}
@keyframes carteEntre {
  from { opacity: 0; transform: translateY(24px) rotate(-1.6deg); }
  to   { opacity: 1; transform: none; }
}
/* Trame oblique de M'TRIX, comme sur le reste du site */
.carte__trame {
  position: absolute; inset: -40%;
  background-image: repeating-linear-gradient(-24deg, transparent 0 46px, rgba(255,255,255,.028) 46px 47px);
  pointer-events: none;
}

.carte__haut {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 18px; border-bottom: 1px dashed #303036;
  position: relative;
}
.carte__marque {
  font-family: 'Archivo Black', 'Archivo', sans-serif;
  font-size: 15px; letter-spacing: .18em;
}
.carte__an {
  font-family: 'Chakra Petch', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .16em; color: #6E6F75;
}

.carte__num {
  position: relative; margin: 20px 0 0;
  font-family: 'Archivo Black', 'Archivo', sans-serif;
  font-size: 78px; line-height: .84; letter-spacing: -.05em; color: var(--orange);
}
.carte__num i { font-style: normal; font-size: .3em; color: #57452F; }

.carte__mot {
  position: relative; margin: 8px 0 22px;
  font-family: 'Chakra Petch', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: #8C8D93;
}

.carte__bas {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px 10px; padding-top: 18px; border-top: 1px dashed #303036;
}
.carte__bas > span:last-child { grid-column: 1 / -1; }
.carte__bas i {
  display: block; font-style: normal; margin-bottom: 3px;
  font-family: 'Chakra Petch', sans-serif; font-size: 9.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: #5E5F65;
}
.carte__bas b {
  font-family: 'Chakra Petch', sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: .04em; color: #F4F3F0;
}

.carte-zone__liens {
  max-width: 340px; margin: clamp(26px, 4vw, 34px) auto 0;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.carte-zone__liens .payer { justify-content: center; }
.lien-nu {
  font-family: 'Chakra Petch', sans-serif; font-size: 11.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: #6E6F75; text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.lien-nu:hover { color: var(--orange); border-bottom-color: var(--orange); }

/* ---------- File d'attente (écran de choix) ---------- */
.file {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 16px 18px; border-radius: 4px;
  background: var(--smoke); border: 1px solid #E4E2DC;
  animation: fileEntre .35s ease both;
}
@keyframes fileEntre { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.file__pastille {
  flex: 0 0 auto; margin-top: 4px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--orange);
  animation: filePouls 1.6s ease-in-out infinite;
}
@keyframes filePouls { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.75); } }
.file p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); }
.file b { color: var(--ink); }

/* ---------- Statut de paiement ---------- */
.bravo__eyebrow--attend { color: var(--orange); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .res__photo, .payer, .payer::after, .echelle__barre i,
  .bravo__place, .bravo__titre, .bravo__dit, .carte { animation: none; transition: none; }
  .res__reste i, .file, .file__pastille { animation: none; }
}

/* ==================== Écran livraison — formulaire félicitations ==================== */
.fin--livraison {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(40px, 8vw, 80px);
}

@media (min-width: 900px) {
  .fin--livraison { grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: clamp(50px, 6vw, 90px); }
}

.livr__hero {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 5vw, 40px);
  order: 2;
}

@media (min-width: 900px) { .livr__hero { order: 1; } }

.livr__photo {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #F7F4EF;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(30px, 5vw, 50px);
  aspect-ratio: 1;
  min-height: 300px;
}

.livr__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}

.livr__haut {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.livr__eyebrow {
  margin: 0;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #E8822B;
}

.livr__titre {
  margin: 0;
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(38px, 8vw, 52px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.02em;
}

.livr__titre span { color: #E8822B; }

.livr__couleur {
  margin: 0;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #A9AAAE;
}

.livr__place {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: clamp(16px, 2vw, 24px) 0 0;
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(42px, 10vw, 64px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.01em;
  color: #0C0C0D;
}

.livr__place span {
  font-size: clamp(18px, 4vw, 24px);
  color: #8C8D93;
}

.livr__prix {
  margin: clamp(14px, 2vw, 20px) 0 0;
  font-size: clamp(13.5px, 2vw, 15px);
  line-height: 1.55;
  color: #A9AAAE;
}

.livr__prix b { color: #F4F3F0; font-weight: 600; }

.livr__prix span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #E8822B;
}

.livr__form-zone {
  order: 1;
}

@media (min-width: 900px) { .livr__form-zone { order: 2; display: flex; flex-direction: column; justify-content: center; } }

.livr__form-zone h2 {
  margin: 0 0 clamp(12px, 2vw, 16px);
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(28px, 5vw, 36px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: #0C0C0D;
}

.livr__form-sous {
  margin: 0 0 clamp(24px, 4vw, 32px);
  font-size: 14px;
  line-height: 1.6;
  color: #8C8D93;
}

.livr__form-sous b { color: #E8822B; }

.livr__form {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vw, 24px);
}

.livr__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2vw, 18px);
}

@media (min-width: 560px) { .livr__grid { grid-template-columns: 1fr 1fr; } }

.livr__champ {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.livr__champ--full { grid-column: 1 / -1; }

.livr__label {
  display: block;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8C8D93;
}

.livr__label small {
  font-family: 'Archivo', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  opacity: .75;
  display: block;
  margin-top: 2px;
}

.livr__champ input,
.livr__champ textarea {
  font-family: 'Archivo', sans-serif;
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid #363639;
  border-radius: 8px;
  background: transparent;
  color: #F4F3F0;
  transition: border-color .15s ease, background .15s ease;
}

.livr__champ input::placeholder,
.livr__champ textarea::placeholder {
  color: #5A5B61;
}

.livr__champ input:focus,
.livr__champ textarea:focus {
  outline: none;
  border-color: #E8822B;
  background: rgba(232, 130, 43, .04);
}

.livr__champ textarea {
  resize: vertical;
  font-family: 'Archivo', sans-serif;
}

.livr__err {
  display: block;
  font-size: 11.5px;
  color: #F08A72;
  font-family: 'Chakra Petch', sans-serif;
  letter-spacing: .05em;
}

.livr__btn {
  margin-top: 8px;
  padding: 16px 24px;
  background: #E8822B;
  border: 0;
  border-radius: 8px;
  color: #14100C;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, transform .1s ease;
}

.livr__btn:hover:not(:disabled) { background: #F2933F; transform: translateY(-1px); }
.livr__btn:active:not(:disabled) { transform: translateY(0); }
.livr__btn:disabled { opacity: .5; cursor: not-allowed; }