/* M'trix — la page de commande (vente officielle)

   Reprend les jetons, l'en-tête et le pied de site.css. À gauche, la
   paire choisie en grand sur sa teinte ; à droite, le formulaire. Les
   champs font 16 px de texte (pas de zoom forcé sur téléphone), 50 px de
   haut au moins, et chaque erreur s'affiche sous son champ. */

@property --fa { syntax: '<color>'; inherits: true; initial-value: #E9E9EC; }
@property --fb { syntax: '<color>'; inherits: true; initial-value: #CBCBD1; }

.page-cmd { background: var(--paper); }
.tete--page { position: relative; background: var(--paper); border-bottom: 1px solid var(--line); }

/* ---------- La grille ---------- */
.cmd__grille { display: grid; }
@media (min-width: 960px) { .cmd__grille { grid-template-columns: 5fr 6fr; align-items: start; } }

/* ---------- La paire choisie ---------- */
.cmd__vitrine {
  position: relative; overflow: hidden; aspect-ratio: 4 / 3; container-type: inline-size;
  background: radial-gradient(ellipse 72% 66% at 50% 42%, var(--fa), var(--fb));
  transition: --fa .7s ease, --fb .7s ease;
}
@media (min-width: 960px) {
  .cmd__vitrine { position: sticky; top: 0; height: 100svh; aspect-ratio: auto; }
}
.cmd__vitrine::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 40% 64% at 50% -8%, rgba(255,255,255,.32), transparent 72%);
  transition: opacity .7s ease;
}
.cmd__vitrine[data-vedette]::before { opacity: 1; }
.cmd__vitrine-img {
  position: absolute; left: 8%; right: 8%; top: 8%; width: 84%; height: 58%; object-fit: contain;
  filter: drop-shadow(0 30px 26px rgba(12,12,13,.28));
  transition: opacity .25s ease, transform .45s cubic-bezier(.16,1,.3,1);
  animation: plane 6s ease-in-out infinite alternate;
}
.cmd__vitrine-img.est-change { opacity: 0; transform: translateY(14px) rotate(-6deg); }
.cmd__vitrine-bas { position: absolute; left: clamp(18px, 4cqi, 44px); right: clamp(18px, 4cqi, 44px); bottom: clamp(16px, 5cqi, 44px); }
.cmd__vitrine-modele {
  margin: 0; font-family: 'Chakra Petch', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(12,12,13,.6);
}
.cmd__vitrine-nom {
  margin: 4px 0 8px; font-family: 'Archivo Black', 'Archivo', sans-serif; text-transform: uppercase;
  font-size: clamp(32px, 11cqi, 104px); line-height: .92; letter-spacing: -.04em; white-space: nowrap;
}
.cmd__vitrine-prix { margin: 0; font-family: 'Archivo Black', 'Archivo', sans-serif; font-size: clamp(18px, 3.4cqi, 26px); }
.cmd__vitrine-prix span {
  margin-left: 8px; font-family: 'Chakra Petch', sans-serif; font-size: 11.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(12,12,13,.6);
}
.cmd__vitrine-modele, .cmd__vitrine-nom, .cmd__vitrine-prix, .cmd__vitrine-prix span { transition: color .6s ease; }
.cmd__vitrine[data-vedette] .cmd__vitrine-nom, .cmd__vitrine[data-vedette] .cmd__vitrine-prix { color: #F4F3F0; }
.cmd__vitrine[data-vedette] .cmd__vitrine-modele, .cmd__vitrine[data-vedette] .cmd__vitrine-prix span { color: rgba(244,243,240,.6); }

/* ---------- Le formulaire ---------- */
.cmd__corps { padding: clamp(28px, 5vw, 64px) var(--gut) var(--sp-xl); max-width: 660px; }
@media (min-width: 960px) { .cmd__corps { padding-inline: clamp(32px, 5vw, 72px); } }
.cmd__titre {
  margin: 0 0 10px; font-family: 'Archivo Black', 'Archivo', sans-serif; text-transform: uppercase;
  font-size: clamp(40px, 6vw, 76px); line-height: .9; letter-spacing: -.04em;
}
.cmd__intro { margin: 0 0 28px; color: #45474C; font-size: 16px; }

.cmd__bandeau, .cmd__alerte, .cmd__erreurs {
  display: flex; gap: 12px; align-items: flex-start; margin: 0 0 24px; padding: 16px 18px;
  border-left: 3px solid var(--orange); background: var(--smoke); font-size: 15px;
}
.cmd__bandeau p, .cmd__erreurs p { margin: 0; }
.cmd__bandeau i { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--orange); }
.cmd__bandeau--ambre { border-left-color: #B7791F; background: #FDF6E7; }
.cmd__alerte, .cmd__erreurs { border-left-color: #C8202A; background: #FBECEA; color: #7E1A13; }
.cmd__erreurs { display: block; }
.cmd__erreurs ul { margin: 8px 0 0; padding-left: 18px; }
.cmd__erreurs a { color: inherit; }

.cmd__bloc { min-width: 0; margin: 0 0 34px; padding: 0; border: 0; }
.cmd__bloc[disabled] { opacity: .5; }
.cmd__legende {
  display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 16px; padding: 0;
  font-family: 'Chakra Petch', sans-serif; font-size: 12.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
}
.cmd__legende::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.cmd__qte { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 20px; }
.cmd__qte .cmd__label { margin: 0; }
.cmd__stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 99px; }
.cmd__pas {
  width: 46px; height: 46px; border: 0; border-radius: 50%; background: none; cursor: pointer;
  font-size: 20px; color: var(--ink); transition: background .2s ease;
}
.cmd__pas:hover { background: var(--smoke); }
.cmd__stepper input {
  width: 52px; border: 0; background: none; text-align: center; color: var(--ink);
  font-family: 'Archivo Black', 'Archivo', sans-serif; font-size: 18px; -moz-appearance: textfield;
}
.cmd__stepper input::-webkit-outer-spin-button, .cmd__stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cmd__champ { margin-bottom: 18px; }
.cmd__label {
  display: block; margin-bottom: 7px; font-family: 'Chakra Petch', sans-serif; font-size: 12px;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.cmd__label span { color: var(--grey); letter-spacing: 0; text-transform: none; font-family: 'Archivo', sans-serif; font-weight: 400; }
.cmd__champ input, .cmd__champ select, .cmd__champ textarea {
  width: 100%; min-height: 52px; padding: 12px 15px; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--paper); color: var(--ink); font-family: 'Archivo', sans-serif; font-size: 16px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cmd__champ textarea { min-height: 80px; resize: vertical; }
/* Les listes : la flèche native remplacée par un chevron fin, à droite. */
.cmd__champ select {
  appearance: none; -webkit-appearance: none; padding-right: 46px; cursor: pointer;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230C0C0D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center / 12px 8px;
}
.cmd__champ input:focus, .cmd__champ select:focus, .cmd__champ textarea:focus {
  border-color: var(--ink); box-shadow: 0 0 0 4px rgba(232,130,43,.22);
}
.cmd__aide { margin: 7px 0 0; font-size: 13.5px; color: var(--grey); }
.est-faux input, .est-faux select { border-color: #C8202A; }
.est-faux .cmd__aide, .cmd__err { color: #A3241A; }
.cmd__err { margin: 10px 0 0; font-size: 13.5px; }

.cmd__recap { margin: 6px 0 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.cmd__recap p { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 8px; color: var(--grey); }
.cmd__recap b { color: var(--ink); font-weight: 600; text-align: right; }
.cmd__total { margin-top: 14px !important; padding-top: 14px; border-top: 1px solid var(--line); }
.cmd__total span, .cmd__total b { font-family: 'Archivo Black', 'Archivo', sans-serif; font-size: 24px; color: var(--ink); font-weight: 400; }

.cmd__payer {
  width: 100%; min-height: 60px; border: 0; border-radius: 99px; cursor: pointer;
  background: var(--ink); color: var(--paper);
  font-family: 'Chakra Petch', sans-serif; font-size: 14px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  transition: background .25s ease, transform .25s ease;
}
.cmd__payer:hover { background: #2A2A2F; transform: translateY(-1px); }
.cmd__payer:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.cmd__securite { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--grey); }

.cmd__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Les écrans de fin ---------- */
.cmd-fin { max-width: 640px; margin: 0 auto; padding: var(--sp-xl) var(--gut); text-align: center; }
.cmd-fin__img {
  display: block; width: min(380px, 78%); margin: 0 auto var(--sp-m);
  filter: drop-shadow(0 26px 22px rgba(12,12,13,.24));
  animation: plane 6s ease-in-out infinite alternate;
}
.cmd-fin__etat {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-family: 'Chakra Petch', sans-serif; font-size: 12.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--orange-txt);
}
.cmd-fin__etat i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(232,130,43,.22); }
.cmd-fin__etat--non { color: #A3241A; }
.cmd-fin__titre {
  margin: 0 0 14px; font-family: 'Archivo Black', 'Archivo', sans-serif; text-transform: uppercase;
  font-size: clamp(40px, 8vw, 92px); line-height: .9; letter-spacing: -.04em;
}
.cmd-fin__txt { margin: 0 auto 22px; max-width: 42ch; color: #45474C; }
.cmd-fin__recap { margin: 0 auto 18px; max-width: 420px; text-align: left; border-top: 1px solid var(--line); }
.cmd-fin__recap div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cmd-fin__recap dt { color: var(--grey); }
.cmd-fin__recap dd { margin: 0; font-weight: 600; text-align: right; }
.cmd-fin__garde { font-size: 13.5px; color: var(--grey); }
.cmd-fin form { max-width: 420px; margin: 0 auto 16px; }
.cmd-fin__lien {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--ink);
  font-family: 'Chakra Petch', sans-serif; font-size: 12.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  border-bottom: 1px solid var(--ink);
}
.cmd-fin__roue {
  display: block; width: 44px; height: 44px; margin: 0 auto 20px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--orange);
  animation: tourne 1s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }
.cmd-fin__txt--non { color: #A3241A; }

/* ---------- Le suivi de commande : une frise, comme chez Apple ----------
   Chaque étape franchie a son point plein et sa coche ; l'étape en cours
   pulse en orange ; le trait qui relie les points se fonce à mesure que
   la commande avance. Le texte dit aussi « fait » ou « à venir » aux
   lecteurs d'écran : l'état ne passe pas que par la couleur. */
.suivi { list-style: none; margin: 6px auto 28px; padding: 0; max-width: 420px; text-align: left; }
.suivi__etape { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding-bottom: 22px; }
.suivi__etape::before {
  content: ''; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px;
  border-radius: 2px; background: var(--line);
}
.suivi__etape:last-child { padding-bottom: 0; }
.suivi__etape:last-child::before { display: none; }
.suivi__etape.est-fait:not(.est-courant)::before { background: var(--ink); }
.suivi__point {
  position: relative; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; border: 2px solid var(--line); background: var(--paper);
  font-size: 13px; line-height: 1; color: #B9B6AE;
}
.est-fait .suivi__point { background: var(--ink); border-color: var(--ink); }
.est-fait .suivi__point::after {
  content: ''; width: 10px; height: 5px; margin-top: -2px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}
.est-courant .suivi__point {
  background: var(--orange); border-color: var(--orange);
  box-shadow: 0 0 0 6px rgba(232,130,43,.18); animation: pouls 2.2s ease-in-out infinite;
}
.suivi__etape--avis .suivi__point::after { content: none; }
.suivi__etape--avis.est-fait .suivi__point { background: var(--orange); border-color: var(--orange); color: #fff; }
.suivi__nom { margin: 3px 0 0; font-size: 15.5px; font-weight: 600; color: var(--grey); }
.est-fait .suivi__nom { color: var(--ink); }
.est-courant .suivi__nom { font-weight: 700; }
.suivi__date { margin: 2px 0 0; font-size: 13px; color: var(--grey); font-variant-numeric: tabular-nums; }
.suivi__detail {
  margin: 8px 0 0; padding: 9px 12px; border-radius: 10px; background: #F6F4F0;
  font-size: 14px; color: #45474C;
}
.suivi__etoiles { margin: 2px 0 0; font-size: 19px; letter-spacing: 2px; color: var(--orange); }
@keyframes pouls { 50% { box-shadow: 0 0 0 10px rgba(232,130,43,.06); } }

/* ---------- L'avis : cinq étoiles, de vrais boutons radio ----------
   Affichés de 5 à 1 puis retournés en ligne : la case cochée et le survol
   colorent les étoiles « précédentes » avec le seul sélecteur ~. Chaque
   étoile fait 44 px, la taille d'un doigt. */
.avis {
  max-width: 420px; margin: 0 auto 26px; padding: 18px; text-align: left;
  border: 1px solid var(--line); border-radius: 16px; background: var(--paper);
}
.avis__etoiles { margin: 0 0 10px; padding: 0; border: 0; }
.avis__etoiles legend { padding: 0; margin-bottom: 6px; font-size: 16px; font-weight: 700; }
.avis__rang { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.avis__rang input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.avis__rang label {
  display: grid; place-items: center; min-width: 44px; min-height: 44px; cursor: pointer;
  font-size: 32px; line-height: 1; color: #D9D6CE; transition: color .15s ease, transform .15s ease;
}
.avis__rang input:checked ~ label,
.avis__rang label:hover, .avis__rang label:hover ~ label { color: var(--orange); }
.avis__rang label:hover { transform: scale(1.12); }
.avis__rang input:focus-visible + label { outline: 2px solid var(--orange-txt); outline-offset: -4px; border-radius: 8px; }
.avis__label { display: block; margin: 4px 0 6px; font-weight: 600; }
.avis__label span { font-weight: 400; color: var(--grey); }
.avis textarea {
  display: block; width: 100%; min-height: 92px; margin-bottom: 14px; padding: 12px 14px; resize: vertical;
  font: inherit; font-size: 16px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper);
}
.avis textarea:focus { outline: none; border-color: var(--ink); }

/* ---------- Suivre ma commande ---------- */
.suivre { display: grid; gap: 6px; max-width: 420px; margin: 0 auto 18px; text-align: left; }
.suivre label { margin-top: 8px; font-weight: 600; }
.suivre input {
  min-height: 50px; padding: 12px 14px; font: inherit; font-size: 16px;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper);
}
.suivre input:focus { outline: none; border-color: var(--ink); }
.suivre .cmd__payer { margin-top: 14px; }

@media (prefers-reduced-motion: reduce) {
  .est-courant .suivi__point { animation: none; }
  .avis__rang label { transition: none; }
  .cmd__vitrine-img, .cmd-fin__img, .cmd-fin__roue { animation: none; }
  .cmd__vitrine, .cmd__vitrine-img, .cmd__payer { transition: none; }
}