/* ==========================================================================
   V&P Philadelphia — la page de commande (order.html)

   Elle n invente ni couleur ni courbe : tout vient des jetons de base.css.
   Une page interne qui se fabrique sa propre palette casse l unite du site.

   Pourquoi une PAGE et pas le tiroir du panier : une grille de creneaux au
   quart d heure fait jusqu a trente-six pastilles, plus six champs, plus le
   recapitulatif. Dans un panneau lateral de 380px sur un telephone, ca
   demande un defilement dans un defilement. Une page donne aussi une vraie
   adresse, un vrai h1, un retour arriere qui marche, et une portee de focus
   propre. Le tiroir garde son role : montrer le panier et y envoyer.
   ========================================================================== */

/* Un en-tete de page court : le formulaire doit arriver haut, pas apres un
   demi-ecran de decor. */
.pagehead--court{min-height:0;padding-top:calc(var(--nav-h) + clamp(24px,4vw,54px));padding-bottom:clamp(18px,3vw,34px)}
.pagehead--court h1{margin-bottom:.5rem}

.ordr__vide{padding:clamp(30px,6vw,70px) var(--gutter) clamp(60px,10vw,120px);max-width:var(--maxw);margin-inline:auto}
.ordr__vide h2{margin-top:0}

.ordr__grille{
  max-width:var(--maxw);margin-inline:auto;
  padding:0 var(--gutter) clamp(60px,10vw,120px);
  display:grid;gap:clamp(22px,3vw,44px);
  align-items:start;
}

/* Au-dessus de 900px : le formulaire a gauche, le recapitulatif colle a
   droite. Le recapitulatif est PREMIER dans le HTML (sur telephone, on veut
   voir ce qu on commande avant de taper son nom) et il est renvoye a droite
   par la grille, pas par un ordre de source different. */
@media (min-width:900px){
  .ordr__grille{grid-template-columns:minmax(0,1fr) minmax(300px,360px)}
  .recap{grid-column:2;grid-row:1;position:sticky;top:calc(var(--nav-h) + 16px)}
  .ordr{grid-column:1;grid-row:1}
  .ordr__ok{grid-column:1;grid-row:1}
}

/* --------------------------------------------------------------------------
   LE RECAPITULATIF
   -------------------------------------------------------------------------- */
.recap{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:clamp(16px,2.2vw,24px);
}
.recap__titre{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-faint);font-weight:500;
  margin:0 0 1rem;
}
.recap__liste{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.recap__l{
  display:grid;grid-template-columns:44px 1fr auto;gap:.7rem;align-items:center;
}
.recap__img{
  width:44px;height:44px;border-radius:10px;object-fit:cover;
  background:var(--canvas);border:1px solid var(--line-soft);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--tone) 26%, transparent);
}
.recap__txt{display:grid;gap:.12rem;min-width:0}
.recap__txt b{font-size:.9rem;font-weight:500;color:var(--text-primary);line-height:1.3}
.recap__txt i{font-style:normal;font-size:.78rem;color:var(--text-secondary)}
.recap__prix{font-family:var(--font-mono);font-size:.88rem;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.recap__total{
  display:flex;align-items:baseline;justify-content:space-between;
  margin:1.1rem 0 0;padding-top:.9rem;border-top:1px solid var(--line-soft);
}
.recap__total span{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-faint);
}
.recap__total b{font-family:var(--font-mono);font-size:1.2rem;font-variant-numeric:tabular-nums}
/* Le code promo ne retranche rien du total au-dessus. Cette ligne est donc
   obligatoire, sinon un total qui ne bouge pas se lit comme un code refuse. */
.recap__promo{
  margin:.9rem 0 0;font-size:.78rem;line-height:1.5;color:var(--text-primary);
  border:1px solid var(--accent);background:var(--accent-muted);
  border-radius:10px;padding:.6rem .7rem;
}
.recap__note{margin:.9rem 0 0;font-size:.76rem;line-height:1.5;color:var(--text-faint)}
.recap__edit{margin:.6rem 0 0;font-size:.8rem}
.recap__edit a{color:var(--text-secondary)}
.recap__edit a:hover{color:var(--accent-hover)}

/* --------------------------------------------------------------------------
   LE FORMULAIRE
   -------------------------------------------------------------------------- */
.ordr{display:grid;gap:1.2rem;max-width:60ch}
.ordr[hidden]{display:none}
.ordr__paire{display:grid;gap:1.2rem}
@media (min-width:560px){.ordr__paire{grid-template-columns:1fr 1fr}}

.ordr__opt{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;
  color:var(--text-faint);text-transform:lowercase;
}
/* L adresse du point de retrait, sous le titre de la page. Elle est en
   police d etiquette et non en corps de texte : c est une donnee, pas une
   phrase, et elle doit se lire d un coup. Le souligne dit qu elle ouvre la
   carte. */
.pagehead__adr{
  margin:.6rem 0 0;
  font-family:var(--font-mono);font-size:.82rem;letter-spacing:.06em;
  color:var(--text-secondary);
}
.pagehead__map{
  color:var(--text-primary);
  text-decoration:underline;
  text-decoration-color:rgba(168,85,247,.7);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
.pagehead__map:hover{color:var(--accent);text-decoration-color:var(--accent)}
.pagehead__map:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

.ordr__aide{margin:.35rem 0 0;font-size:.8rem;line-height:1.5;color:var(--text-faint)}
.ordr__aide a{color:var(--text-secondary)}
.ordr__aide a:hover{color:var(--accent-hover)}

/* L erreur est annoncee (role=alert) ET montree : la couleur seule ne dit
   rien a qui ne la voit pas. */
.ordr__err{
  margin:.35rem 0 0;font-size:.82rem;line-height:1.45;color:#FFB4A8;
}
.field input[aria-invalid="true"]{border-color:#E8493A}

.ordr__fs{border:0;margin:0;padding:0;min-width:0}
.ordr__fs legend{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-faint);padding:0;margin-bottom:.5rem;
}
.ordr__fs.is-ko legend{color:#FFB4A8}

/* --- les pastilles de choix ------------------------------------------------
   De vrais boutons radio, masques visuellement et habilles par leur
   etiquette : les fleches du clavier, la selection unique et l annonce par
   lecteur d ecran viennent du navigateur, gratuitement. Le radio n est PAS
   en display:none, sinon il sort de l ordre de tabulation et le groupe
   devient inatteignable au clavier. */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips--slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:.5rem;margin-top:.6rem}
.chip{position:relative;min-width:0}
.chip input{
  position:absolute;width:1px;height:1px;opacity:0;margin:0;
  pointer-events:none;
}
.chip label{
  display:grid;gap:.1rem;cursor:pointer;text-align:center;
  border:1px solid var(--line);border-radius:12px;background:var(--panel);
  padding:.55rem .7rem;color:var(--text-primary);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.chip label b{font-size:.86rem;font-weight:500;line-height:1.25}
.chip label i{font-style:normal;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.08em;color:var(--text-faint)}
.chip label:hover{border-color:var(--accent)}
.chip input:checked + label{
  border-color:var(--accent);background:var(--accent-muted);
  box-shadow:inset 0 0 0 1px var(--accent);
}
/* Le contour de focus vit sur l etiquette, le radio etant invisible. */
.chip input:focus-visible + label{outline:2px solid var(--accent-hover);outline-offset:2px}

.chips--slots .chip label{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.02em;
  padding:.5rem .35rem;
}
.chips--pay{grid-template-columns:1fr 1fr;display:grid;gap:.5rem}
.chip--pay label{padding:.75rem .8rem}

/* --- le consentement et l envoi -------------------------------------------- */
.ordr__consent{
  margin:0;font-size:.8rem;line-height:1.55;color:var(--text-secondary);
  border-left:2px solid var(--line);padding-left:.9rem;
}
.ordr__consent a{color:var(--accent-hover)}
.ordr__send{justify-content:center;width:100%}
/* Le bouton eteint n est PAS un bouton violet a 45 % d opacite : mesure sur
   les pixels rendus, son texte tombait a 1,84:1, donc le message qui explique
   pourquoi il est eteint etait le moins lisible de la page. Il devient un
   bouton neutre et lisible, qui ne se donne plus l air d etre le passage a
   l action. */
.ordr__send[disabled]{
  background:var(--panel);color:var(--text-secondary);
  border:1px solid var(--line);cursor:not-allowed;transform:none;
}
.ordr__send[disabled]:hover{background:var(--panel);transform:none}

/* L etat d envoi. Il ne dit JAMAIS un succes : le succes a son propre bloc.
   Celui-ci porte les refus, les pannes, et l etat non configure. */
.ordr__etat{
  margin:0;border-radius:10px;padding:.85rem 1rem;
  font-size:.86rem;line-height:1.5;color:var(--text-primary);
  border:1px solid var(--line);background:var(--panel);
}
.ordr__etat--ko{border-color:var(--ember);background:var(--ember-muted)}

/* Le piege anti-robot. Sorti du flux ET du champ des lecteurs d ecran, mais
   pas en display:none : certains robots ignorent les champs caches ainsi. */
.ordr__piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.ordr__ok{
  border:1px solid var(--accent);background:var(--accent-muted);
  border-radius:16px;padding:clamp(20px,3vw,32px);max-width:60ch;
}
.ordr__ok:focus{outline:2px solid var(--accent-hover);outline-offset:3px}
.ordr__ok h2{margin-top:0}
.ordr.is-sent{display:none}

@media (prefers-reduced-motion:reduce){
  .chip label{transition:none}
}

/* --------------------------------------------------------------------------
   CONTRASTE : la seule deviation assumee par rapport au reste du site.

   Le site pose ses etiquettes et ses notes en --text-faint (#6E6E78), qui
   mesure 3,8:1 sur le fond de page — sous le seuil AA de 4,5:1 pour du texte
   courant. Ailleurs c'est une note decorative sous un paragraphe deja lu.
   Ici ce sont les ETIQUETTES D'UN FORMULAIRE DE COMMANDE : le mot qui dit ce
   qu'on tape dans le champ, et la consigne qui dit d'ou a quand on peut se
   faire livrer. Un client qui ne les lit pas se trompe de creneau.
   Elles passent donc en --text-secondary (#A1A1AA), mesure 7,8:1 sur les
   pixels rendus. Ne pas les ramener a --text-faint « par coherence ».
   -------------------------------------------------------------------------- */
.ordr .field label,
.ordr__fs legend,
.ordr__aide,
.ordr__opt,
.chip label i,
.recap__note{color:var(--text-secondary)}