/*!
 * Takwa Collection — commande (démonstration) : bandeau démo, étapes, options de livraison/paiement,
 * récapitulatif final, confirmation. Chargé après panier.css (récapitulatif commun).
 */

/* Bandeau « Démonstration » : discret mais explicite */
.bandeau-demo {
  display: flex; align-items: flex-start; gap: .55rem; margin-bottom: var(--e-6); padding: .65rem .9rem;
  border: 1px dashed #D9B66B; border-radius: var(--r-2); background: #FBF0D9; color: #6E4A10;
  font-size: var(--fs-petit); line-height: 1.45;
}
.bandeau-demo .icone { margin-top: .12rem; }
.bandeau-demo strong { font-weight: 600; }

.commande__entete { display: grid; gap: var(--e-2); margin-bottom: var(--e-6); }
.commande__securite { display: flex; align-items: center; gap: .45rem; font-size: var(--fs-petit); color: var(--texte-doux); }
.commande__securite .icone { color: var(--c-succes); }

/* ------------------------------------------------------------ indicateur d'étapes */
.etapes { list-style: none; margin: 0 0 var(--e-6); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: none; }
.etapes__item { position: relative; display: grid; justify-items: center; gap: .35rem; text-align: center; font-size: .62rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); }
.etapes__item::before { content: ""; position: absolute; top: .95rem; left: calc(-50% + 1.2rem); right: calc(50% + 1.2rem); height: 1px; background: var(--filet-fort); }
.etapes__item:first-child::before { display: none; }
.etapes__num { width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--filet-fort); background: var(--fond); font-size: .78rem; letter-spacing: 0; color: var(--texte-doux); transition: background-color var(--t-moyen) var(--ease), color var(--t-moyen) var(--ease), border-color var(--t-moyen) var(--ease); }
.etapes__item.est-faite .etapes__num { background: var(--accent); border-color: var(--accent); color: var(--accent-contraste); }
.etapes__item.est-faite::before, .etapes__item.est-active::before { background: var(--accent); }
.etapes__item.est-active { color: var(--titre); }
.etapes__item.est-active .etapes__num { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--titre); }
@media (min-width: 600px) { .etapes__item { font-size: .68rem; letter-spacing: .14em; } }

/* ------------------------------------------------------------ mise en page */
.commande__grille { display: grid; gap: var(--e-7); align-items: start; }
.commande__principal { min-width: 0; }
.commande__recap { display: none; }
@media (min-width: 1024px) {
  .commande__grille { grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--e-10); }
  .commande__recap { display: block; position: sticky; top: 6.5rem; }
  .resume-mobile { display: none; }
}
.recap--commande { gap: var(--e-3); }
.recap__haut { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); }
.commande__rassurance { margin-top: var(--e-6); padding-inline: var(--e-2); }

/* Récapitulatif repliable (téléphone) */
.resume-mobile { margin-bottom: var(--e-5); border: 1px solid var(--filet); border-radius: var(--r-2); background: var(--fond-carte); }
.resume-mobile > summary { list-style: none; display: flex; align-items: center; gap: .55rem; min-height: 3.25rem; padding: 0 1rem; cursor: pointer; font-size: var(--fs-petit); }
.resume-mobile > summary::-webkit-details-marker { display: none; }
.resume-mobile > summary .icone { color: var(--or-texte); }
.resume-mobile__total { margin-left: auto; font-weight: 500; }
.resume-mobile[open] .accordeon__signe::after { transform: rotate(0deg); }
.resume-mobile__corps { padding: 0 1rem 1rem; }

/* Lignes compactes du récapitulatif */
.mini-lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.mini-ligne { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; gap: var(--e-3); align-items: start; font-size: var(--fs-petit); }
.mini-ligne__media { position: relative; }
.mini-ligne__media img, .mini-ligne__calli { display: block; width: 3.25rem; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-1); background: var(--c-velours); }
.mini-ligne__calli { display: grid; place-items: center; overflow: hidden; background: var(--c-velours) url("../../img/textures/velours-tuile.webp") center / 200px; color: var(--c-or-lumiere); font-family: var(--f-calli); font-size: .95rem; line-height: 1.1; padding: .15rem; }
.mini-ligne__qte { position: absolute; top: -.4rem; right: -.4rem; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; display: grid; place-items: center; border-radius: var(--r-pilule); background: var(--c-emeraude); color: var(--c-ivoire); font-size: .66rem; font-weight: 600; }
.mini-ligne__nom { font-family: var(--f-titre); font-size: 1.05rem; line-height: 1.2; color: var(--titre); }
.mini-ligne__details { list-style: none; margin: .1rem 0 0; padding: 0; font-size: var(--fs-mini); color: var(--texte-doux); line-height: 1.45; }
.mini-ligne__details .calli { font-family: var(--f-calli); font-size: 1.1rem; color: var(--titre); }
.mini-ligne__prix { font-weight: 500; white-space: nowrap; }
.mini-totaux { display: grid; gap: .45rem; margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--filet); }
.mini-totaux .recap-ligne--total { padding-top: var(--e-3); margin-top: .2rem; border-top: 1px solid var(--filet); }
.mini-totaux .recap-ligne--total span:last-child { font-family: var(--f-titre); font-size: 1.4rem; line-height: 1; color: var(--titre); }

/* ------------------------------------------------------------ étapes */
.commande__form { display: grid; gap: var(--e-3); }
.etape { border: 1px solid var(--filet); border-radius: var(--r-2); background: var(--fond-carte); transition: border-color var(--t-moyen) var(--ease), box-shadow var(--t-moyen) var(--ease); }
.etape.est-active { border-color: var(--filet-fort); box-shadow: var(--ombre-1); }
.etape__entete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-4) var(--e-5); }
.etape__titre { display: flex; align-items: center; gap: .75rem; font-size: 1.45rem; }
.etape__titre:focus { outline: none; }
.etape__titre:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.etape__num { width: 1.85rem; height: 1.85rem; display: grid; place-items: center; flex: none; border-radius: 50%; border: 1px solid var(--filet-fort); font-family: var(--f-texte); font-size: .8rem; color: var(--texte-doux); }
.etape.est-active .etape__num { border-color: var(--accent); color: var(--titre); }
.etape.est-faite .etape__num { background: var(--accent); border-color: var(--accent); color: var(--accent-contraste); }
.etape:not(.est-active):not(.est-faite) .etape__titre { color: var(--texte-doux); }
.etape__modifier { min-height: 2.75rem; font-size: var(--fs-mini); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); text-decoration: underline; text-underline-offset: .25em; }
.etape__resume { padding: 0 var(--e-5) var(--e-5) calc(var(--e-5) + 2.6rem); font-size: var(--fs-petit); color: var(--texte-doux); line-height: 1.55; overflow-wrap: anywhere; }
.etape__corps { display: grid; gap: var(--e-5); padding: 0 var(--e-5) var(--e-6); }
.etape__suivant { justify-self: stretch; }
@media (min-width: 600px) { .etape__suivant { justify-self: start; } .etape__corps { padding-inline: var(--e-6); } .etape__entete { padding-inline: var(--e-6); } .etape__resume { padding-left: calc(var(--e-6) + 2.6rem); } }

.formulaire-grille { display: grid; gap: var(--e-4); }
@media (min-width: 600px) { .formulaire-grille { grid-template-columns: 1fr 1fr; gap: var(--e-5) var(--e-4); } .formulaire-grille .champ--large { grid-column: 1 / -1; } }
.commande__newsletter { color: var(--texte-doux); }

/* Options (livraison, paiement) */
.options { border: 0; margin: 0; padding: 0; min-width: 0; }
.options__liste { display: grid; gap: var(--e-3); }
.option { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .2rem var(--e-4); align-items: center; padding: var(--e-4); border: 1px solid var(--filet-fort); border-radius: var(--r-2); cursor: pointer; background: var(--fond-champ); transition: border-color var(--t-rapide) var(--ease), box-shadow var(--t-rapide) var(--ease), background-color var(--t-rapide) var(--ease); }
.option:hover { border-color: var(--texte-doux); }
.option input { -webkit-appearance: none; appearance: none; margin: 0; width: 1.25rem; height: 1.25rem; border: 1px solid var(--filet-fort); border-radius: 50%; display: grid; place-items: center; background: var(--fond-champ); cursor: pointer; }
.option input::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent-contraste); transform: scale(0); transition: transform var(--t-rapide) var(--ease); }
.option input:checked { background: var(--accent); border-color: var(--accent); }
.option input:checked::before { transform: scale(1); }
.option input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.option:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--fond-champ)); }
.option__corps { display: grid; gap: .15rem; min-width: 0; }
.option__nom { display: block; font-weight: 500; color: var(--texte); }
.option__nom .icone { display: inline-block; vertical-align: -.2em; margin-right: .45rem; }
.option__detail { font-size: var(--fs-mini); color: var(--texte-doux); line-height: 1.45; }
.option__prix { font-weight: 500; white-space: nowrap; }
.option__prix--offert { color: var(--c-succes); }
.option__logos { display: flex; flex-wrap: wrap; gap: .3rem; }
.option__logo { display: inline-flex; align-items: center; min-height: 1.5rem; padding: .1rem .45rem; border: 1px solid var(--filet-fort); border-radius: 4px; font-size: .62rem; font-weight: 500; letter-spacing: .05em; color: var(--texte-doux); background: var(--fond-carte); }
.option .icone { color: var(--or-texte); }

.relais, .paiement-cadre { display: grid; gap: .35rem; padding: var(--e-4); border: 1px dashed var(--filet-fort); border-radius: var(--r-2); background: var(--fond-alt); font-size: var(--fs-petit); color: var(--texte-doux); }
.relais__titre { display: flex; align-items: center; gap: .45rem; font-weight: 500; color: var(--texte); }
.relais__titre .icone, .paiement-cadre > .icone { color: var(--or-texte); }
.paiement-cadre__demo { font-size: var(--fs-mini); color: var(--c-alerte); }
.commande__delai, .paiement-plusieurs-fois { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .5rem; font-size: var(--fs-petit); line-height: 1.5; color: var(--texte); }
.commande__delai .icone, .paiement-plusieurs-fois > .icone { color: var(--or-texte); margin-top: .15rem; }
.paiement-plusieurs-fois .note-maquette { grid-column: 2; justify-self: start; }
.etape .note-maquette { justify-self: start; }

/* Récapitulatif final + acceptations */
.recap-final { display: grid; gap: var(--e-4); }
.recap-final__bloc { display: grid; gap: .3rem; padding-bottom: var(--e-4); border-bottom: 1px solid var(--filet); font-size: var(--fs-petit); line-height: 1.55; }
.recap-final__titre { display: flex; justify-content: space-between; gap: var(--e-3); font-size: .68rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--or-texte); }
.recap-final__titre button { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); text-decoration: underline; text-underline-offset: .2em; min-height: 1.75rem; }
.recap-final__texte { color: var(--texte); overflow-wrap: anywhere; }
.recap-final__note { color: var(--texte-doux); font-style: italic; }
.acceptations { display: grid; gap: var(--e-3); padding: var(--e-4); border-radius: var(--r-2); background: var(--fond-alt); }
.case--forte { color: var(--texte); font-size: var(--fs-petit); }
.case--forte a { color: var(--accent); }
.case--perso span { font-weight: 500; }
.case__aide { padding-left: 2rem; }
.acceptations .champ__erreur { padding-left: 2rem; }
.commande__payer { gap: .6rem; }
.commande__payer span:first-of-type { white-space: nowrap; }
.commande__payer-montant { display: none; font-family: var(--f-texte); letter-spacing: .06em; opacity: .9; white-space: nowrap; }
@media (min-width: 600px) { .commande__payer-montant { display: inline; } }
.commande__payer-montant:not(:empty)::before { content: "·"; margin-right: .6rem; }
.commande__demo-note { display: flex; gap: .45rem; align-items: flex-start; font-size: var(--fs-mini); color: var(--texte-doux); }
.commande__demo-note .icone { margin-top: .1rem; flex: none; }
.erreurs-resume { padding: var(--e-4); border: 1px solid color-mix(in srgb, var(--c-erreur) 40%, transparent); border-radius: var(--r-2); background: color-mix(in srgb, var(--c-erreur) 6%, var(--fond)); color: var(--c-erreur); font-size: var(--fs-petit); }

/* ------------------------------------------------------------ confirmation (démonstration) */
.confirmation { display: grid; justify-items: center; text-align: center; gap: var(--e-4); max-width: 40rem; margin-inline: auto; padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 3rem); border: 1px solid var(--filet); border-radius: var(--r-2); background: var(--fond-carte); box-shadow: var(--ombre-1); }
.confirmation__icone { width: 4.5rem; height: 4.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--c-velours) url("../../img/textures/velours-tuile.webp") center / 300px; color: var(--c-or-lumiere); }
.confirmation__titre:focus { outline: none; }
.confirmation__numero { font-size: var(--fs-petit); letter-spacing: .06em; color: var(--texte-doux); }
.confirmation__numero strong { color: var(--texte); letter-spacing: .1em; }
.confirmation__texte { color: var(--texte-doux); line-height: 1.65; overflow-wrap: anywhere; }
.confirmation__suite { list-style: none; margin: var(--e-3) 0 0; padding: 0; display: grid; gap: 0; width: 100%; text-align: left; }
.confirmation__suite li { display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--e-3); align-items: start; padding-block: var(--e-3); border-top: 1px solid var(--filet); font-size: var(--fs-petit); }
.confirmation__suite li:last-child { border-bottom: 1px solid var(--filet); }
.confirmation__suite .icone { color: var(--or-texte); }
.confirmation__suite strong { display: block; color: var(--texte); }
.confirmation__suite span span { color: var(--texte-doux); }
.confirmation__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--e-3) var(--e-5); margin-top: var(--e-4); }

/* QA (22/10) : la case n'accepte que les CGV ; la politique de confidentialité est une simple information */
.acceptations__info { display: flex; gap: .5rem; align-items: flex-start; padding-left: 2rem; font-size: var(--fs-mini); line-height: 1.5; color: var(--texte-doux); }
.acceptations__info .icone { margin-top: .15rem; color: var(--or-texte); flex: none; }
.acceptations__info a { color: var(--texte); }

/* ============================================================================================================
   WORDPRESS / WOOCOMMERCE (thème takwa) — gabarits woocommerce/checkout/*.php et woocommerce/order/*.php du thème
   Les 3 étapes restent ouvertes (formulaire de carte WooPayments et choix Boxtal toujours montés) ; le récapitulatif
   est collant sur ordinateur, repliable sur téléphone. Socle : assets/css/woocommerce.css.
   ============================================================================================================ */

/* En-tête du prototype (inc/pages/commande.php) ; en-tête générique de la page masqué */
.page-woocommerce article.page-info > header.entete-page { display: none; }
.woocommerce-checkout .page-woocommerce__corps { padding-top: var(--e-4); }
.commande__entete .titre-1:focus { outline: none; }

/* Code promo (une ligne discrète) */
.commande__code { margin-bottom: var(--e-5); }
.commande__code-texte { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-petit); color: var(--texte-doux); }
.commande__code-texte .icone { color: var(--or-texte); flex: none; }
.commande__code-texte a { color: var(--accent); }
.woocommerce form.checkout_coupon.commande__code-form { max-width: 34rem; margin: 0 0 var(--e-6); padding: var(--e-5); }
.woocommerce form.checkout_coupon .form-row { margin: 0; }
.woocommerce form.checkout_coupon .button { width: 100%; min-height: 3rem; }

/* Indicateur d'étapes : liens vers les étapes (toutes visibles) */
.etapes__lien { position: relative; display: grid; justify-items: center; gap: .35rem; color: inherit; text-decoration: none; border-radius: var(--r-1); }
.etapes__lien:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.etapes__item .etapes__num { position: relative; z-index: 1; }

/* Le socle met le formulaire de commande WooCommerce en 2 colonnes : ici, la grille du prototype s'en charge */
.woocommerce-checkout form.checkout.commande__formulaire { display: block; }
.woocommerce .commande__etapes.col2-set, .woocommerce-page .commande__etapes.col2-set { grid-template-columns: minmax(0, 1fr); }
.woocommerce .commande__etapes.col2-set > .col-1, .woocommerce .commande__etapes.col2-set > .col-2 { float: none; width: auto; max-width: none; }

/* Étapes : toutes ouvertes ; « faite » quand ses champs obligatoires sont remplis (commande.js) */
.commande__formulaire { margin: 0; }
.commande__principal { display: grid; gap: var(--e-3); align-content: start; }
.commande__etapes { display: grid; gap: var(--e-3); }
.woocommerce .commande__etapes.col2-set { gap: var(--e-3); }
.commande__formulaire .etape { scroll-margin-top: calc(var(--entete-h-compact) + var(--e-4)); }
.commande__formulaire .etape .etape__titre { color: var(--titre); }
.commande__formulaire .etape .etape__num { border-color: var(--accent); color: var(--titre); }
.commande__formulaire .etape.est-faite .etape__num { background: var(--accent); border-color: var(--accent); color: var(--accent-contraste); }
.commande__formulaire .etape.est-active { border-color: var(--filet-fort); box-shadow: var(--ombre-1); }
.commande__formulaire .etape__corps { padding-top: 0; }
.commande__formulaire .etape__corps > * { min-width: 0; }

/* Champs WooCommerce : grille du prototype (prénom / nom et code postal / ville côte à côte) */
.commande__champs { display: grid; gap: var(--e-4); }
.woocommerce form .commande__champs .form-row { float: none; width: auto; margin: 0; }
@media (min-width: 600px) {
  .commande__champs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5) var(--e-4); }
  .commande__champs > .form-row { grid-column: 1 / -1; }
  .commande__champs > #billing_first_name_field, .commande__champs > #billing_last_name_field,
  .commande__champs > #shipping_first_name_field, .commande__champs > #shipping_last_name_field,
  .commande__champs > #billing_postcode_field, .commande__champs > #billing_city_field,
  .commande__champs > #shipping_postcode_field, .commande__champs > #shipping_city_field,
  .commande__champs > #account_first_name_field, .commande__champs > .form-row-first, .commande__champs > .form-row-last { grid-column: auto; }
}
.woocommerce form .form-row .champ__aide { display: block; margin-top: .1rem; font-size: var(--fs-mini); color: var(--texte-doux); text-transform: none; letter-spacing: 0; font-weight: 400; }
.woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields { display: grid; gap: var(--e-4); }
.commande__compte { margin: 0; }
.woocommerce .commande__compte .form-row, .woocommerce .woocommerce-additional-fields .form-row { margin: 0; }
.woocommerce form.woocommerce-checkout h3#ship-to-different-address.commande__autre-adresse { margin: 0; font-family: var(--f-texte); }
.woocommerce form.woocommerce-checkout h3#ship-to-different-address.commande__autre-adresse label { font-size: var(--fs-petit); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--texte); }
.shipping_address { padding-top: var(--e-2); }
.woocommerce .woocommerce-additional-fields textarea { min-height: 5.5rem; }

/* Étape 2 : modes de livraison (tarifs calculés par WooCommerce / Boxtal), délai */
.commande__livraison { display: grid; gap: var(--e-3); }
.commande__sous-titre { font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--texte); }
.commande-livraison { display: grid; gap: var(--e-3); }
.commande__livraison-info { font-size: var(--fs-petit); color: var(--texte-doux); }
.commande__livraison-info--alerte { color: var(--c-alerte); }
.woocommerce .commande-livraison .woocommerce-shipping-methods { gap: var(--e-3); }
.option--livraison, .woocommerce #shipping_method li.option--livraison { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .2rem var(--e-4); }
.option--livraison > label { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem var(--e-4); min-width: 0; cursor: pointer; }
.option--livraison > input[type="hidden"] + label { grid-column: 1 / -1; }
.option--livraison > :not(input):not(label) { grid-column: 2 / -1; font-size: var(--fs-mini); }
.option--livraison .option__nom { font-weight: 500; color: var(--texte); }
.option--livraison .option__prix { font-weight: 500; white-space: nowrap; }
.option--livraison.est-choisie:has(input[type="hidden"]) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--fond-champ)); }
.woocommerce #shipping_method .option--livraison > input[type="radio"] { width: 1.25rem; height: 1.25rem; margin: 0; }
/* Toute la carte est cliquable (le libellé la recouvre) ; le choix du point relais Boxtal reste au-dessus */
.option--livraison > label::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.option--livraison > :not(input):not(label) { position: relative; z-index: 1; }
.commande__livraison .commande__delai { margin-top: var(--e-1); }

/* Étape 3 : paiement */
.commande__formulaire #order_review { padding: 0; border: 0; background: none; }
.woocommerce .commande__formulaire #payment { margin: 0; display: grid; gap: var(--e-5); }
.woocommerce #payment ul.payment_methods.options__liste { margin: 0; gap: var(--e-3); }
.woocommerce #payment ul.payment_methods li.option-paiement {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .2rem var(--e-4);
  padding: var(--e-4); border: 1px solid var(--filet-fort); border-radius: var(--r-2); background: var(--fond-champ);
  transition: border-color var(--t-rapide) var(--ease), box-shadow var(--t-rapide) var(--ease), background-color var(--t-rapide) var(--ease);
}
.woocommerce #payment ul.payment_methods li.option-paiement:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--fond-champ)); }
.woocommerce #payment li.option-paiement > input[type="radio"] {
  -webkit-appearance: none; appearance: none; margin: 0; width: 1.25rem; height: 1.25rem; border: 1px solid var(--filet-fort); border-radius: 50%;
  display: grid; place-items: center; background: var(--fond-champ); cursor: pointer;
}
.woocommerce #payment li.option-paiement > input[type="radio"]::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent-contraste); transform: scale(0); transition: transform var(--t-rapide) var(--ease); }
.woocommerce #payment li.option-paiement > input[type="radio"]:checked { background: var(--accent); border-color: var(--accent); }
.woocommerce #payment li.option-paiement > input[type="radio"]:checked::before { transform: scale(1); }
.woocommerce #payment li.option-paiement > input[type="radio"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.woocommerce #payment li.option-paiement > input[style*="none"] + label { grid-column: 1 / -1; }
.woocommerce #payment li.option-paiement > label { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; font-weight: 500; color: var(--texte); cursor: pointer; }
.woocommerce #payment li.option-paiement > label img { max-height: 1.6rem; width: auto; margin: 0; }
.woocommerce #payment li.option-paiement div.payment_box { grid-column: 1 / -1; margin: var(--e-2) 0 0; padding: 0; background: none; font-size: var(--fs-petit); color: var(--texte-doux); }
.woocommerce #payment li.option-paiement div.payment_box::before { content: none; }
.woocommerce #payment li.option-paiement div.payment_box fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.woocommerce #payment .paiement-aucun { padding: 0; border: 0; background: none; }
.commande__validation { display: grid; gap: var(--e-4); }
.commande__a-payer { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); padding-bottom: var(--e-3); border-bottom: 1px solid var(--filet); font-size: 1.05rem; font-weight: 500; }
.commande__a-payer strong { font-family: var(--f-titre); font-size: 1.55rem; font-weight: 500; line-height: 1; color: var(--titre); }
.commande__a-payer .includes_tax { display: block; font-size: var(--fs-mini); font-weight: 400; color: var(--texte-doux); }

/* Acceptations : case CGV, données personnelles, bijou personnalisé */
.woocommerce .woocommerce-terms-and-conditions-wrapper.acceptations { font-size: var(--fs-petit); color: var(--texte); }
.woocommerce .acceptations .form-row { margin: 0; }
.woocommerce form .acceptations .form-row label.case { font-size: var(--fs-petit); letter-spacing: 0; text-transform: none; font-weight: 400; }
.acceptations .case--forte a { color: var(--accent); }
.acceptations abbr.required { text-decoration: none; color: var(--c-erreur); }
.acceptations__info .woocommerce-privacy-policy-text p { margin: 0; }
.acceptations__info .woocommerce-privacy-policy-text, .acceptations__info .woocommerce-privacy-policy-text a { font-size: inherit; color: inherit; }
.acceptations__info .woocommerce-privacy-policy-text a { text-decoration: underline; text-underline-offset: .2em; }
.acceptations__perso { display: grid; gap: .4rem; padding-top: var(--e-3); border-top: 1px solid var(--filet); }
.acceptations .woocommerce-invalid label.case { color: var(--c-erreur); }

/* Bouton « Commander et payer » : texte seul (checkout.js le réécrit), cadenas en décor */
.woocommerce #place_order.commande__payer { width: 100%; min-height: 3.5rem; gap: .6rem; font-size: .8rem; letter-spacing: .18em; }
.woocommerce #place_order.commande__payer::before {
  content: ""; flex: none; width: 1.1rem; height: 1.1rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Paiements express (WooPayments : Apple Pay, Google Pay) au-dessus des étapes */
.commande__principal #wcpay-express-checkout-element, .commande__principal .wcpay-express-checkout-wrapper { margin: 0; }

/* Récapitulatif (tableau WooCommerce woocommerce-checkout-review-order-table) : colonne, résumé du téléphone,
   détail des commandes (confirmation, compte) */
.recap-commande { width: 100%; margin: 0; border-collapse: collapse; font-size: var(--fs-petit); }
.recap-commande th, .recap-commande td { padding: 0; border: 0; font-weight: 400; text-align: left; vertical-align: top; background: none; }
.recap-commande tbody.mini-lignes { display: grid; gap: var(--e-4); }
.recap-commande .mini-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-3); align-items: start; }
.recap-commande .mini-ligne .product-name { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--e-3); align-items: start; min-width: 0; }
.recap-commande .mini-ligne__media { display: block; position: relative; }
.recap-commande .mini-ligne__media img { display: block; width: 3.25rem; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-1); background: var(--c-velours); }
.recap-commande .mini-ligne__calli { width: 3.25rem; }
.mini-ligne__infos { display: grid; gap: .15rem; min-width: 0; }
.mini-ligne__nom a { color: inherit; text-decoration: none; }
.mini-ligne__nom a:hover { text-decoration: underline; text-decoration-color: var(--filet-fort); }
.mini-ligne__nom .product-quantity { margin-left: .3rem; font-family: var(--f-texte); font-size: var(--fs-mini); font-weight: 400; color: var(--texte-doux); }
.mini-ligne__qte-texte { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mini-ligne__sur-commande { font-size: var(--fs-mini); color: var(--c-bronze); line-height: 1.4; }
.recap-commande .mini-ligne__prix { text-align: right; }
.recap-commande .wc-item-meta li { display: flex; flex-wrap: wrap; gap: 0 .3rem; }
.recap-commande .wc-item-meta strong { font-weight: 400; }
.recap-commande .wc-item-meta p { display: inline; margin: 0; }
.recap-commande tfoot.mini-totaux { display: grid; }
.recap-commande .mini-totaux tr { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); }
.recap-commande .mini-totaux td { margin-left: auto; text-align: right; }
.recap-commande .mini-totaux .recap-ligne--total, .recap-commande .mini-totaux .order-total { align-items: center; }
.recap-commande .mini-totaux .order-total th { font-size: 1.05rem; font-weight: 500; }
.recap-commande .mini-totaux .order-total td { font-family: var(--f-titre); font-size: 1.4rem; line-height: 1; color: var(--titre); }
.recap-commande .mini-totaux .order-total td strong { font-weight: 500; }
.recap-commande .mini-totaux .includes_tax, .recap-commande .mini-totaux small { display: block; font-family: var(--f-texte); font-size: var(--fs-mini); color: var(--texte-doux); }
.mini-totaux__mode { font-size: var(--fs-mini); }
.resume-mobile__corps .recap-commande { margin-top: var(--e-2); }
.resume-mobile__modifier { margin-top: var(--e-4); text-align: right; }
.resume-mobile__total .woocommerce-Price-amount { font: inherit; }
.commande__recap .recap--commande { gap: var(--e-4); }
.woocommerce .blockUI.blockOverlay { border-radius: var(--r-2); }

/* ------------------------------------------------------------ confirmation (page « commande reçue ») */
.woocommerce-order-received .page-woocommerce__corps { padding-top: var(--e-5); }
.commande-recue { display: grid; gap: var(--e-8); }
.confirmation__titre { max-width: 34rem; }
.confirmation__resume { list-style: none; margin: var(--e-2) 0 0; padding: 0; width: 100%; display: grid; text-align: left; border-top: 1px solid var(--filet); }
.confirmation__resume li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem var(--e-3); padding-block: .6rem; border-bottom: 1px solid var(--filet); font-size: var(--fs-petit); }
.confirmation__resume li span { color: var(--texte-doux); }
.confirmation__resume li strong { font-weight: 500; color: var(--texte); text-align: right; overflow-wrap: anywhere; }
@media (min-width: 600px) { .confirmation__resume { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-6); } }
.confirmation__suite li > .icone { margin-top: .1rem; }
.confirmation--echec .confirmation__icone { color: #F2B8A8; }
.commande-recue__details { display: grid; gap: var(--e-6); width: 100%; max-width: 48rem; margin-inline: auto; padding-bottom: var(--section-y); }
.commande-recue__details > p { padding: var(--e-4) var(--e-5); border-radius: var(--r-2); background: var(--fond-alt); font-size: var(--fs-petit); }

/* Détail d'une commande (confirmation, « Mon compte », suivi) */
.commande-detail { display: grid; gap: var(--e-5); padding: clamp(1.25rem, 4vw, 2rem); border: 1px solid var(--filet); border-radius: var(--r-2); background: var(--fond-carte); }
.woocommerce .commande-detail__titre { margin: 0; font-family: var(--f-titre); font-size: var(--fs-h3); font-weight: 500; color: var(--titre); }
.commande-detail .mini-totaux { margin-top: 0; }
.commande-detail__actions td { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e-2); }
.woocommerce .commande-detail__actions .button { width: auto; }
.commande-detail .order-again { margin: 0; }
.commande-adresses__grille { display: grid; gap: var(--e-5); }
@media (min-width: 600px) { .woocommerce .commande-adresses__grille:not(.commande-adresses__grille--une) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.woocommerce .commande-adresses__grille .col-1, .woocommerce .commande-adresses__grille .col-2 { float: none; width: auto; max-width: none; }
.woocommerce .commande-adresses__grille--une, .woocommerce-page .commande-adresses__grille--une { grid-template-columns: minmax(0, 1fr); }
.commande-adresse { padding: var(--e-5); border: 1px solid var(--filet); border-radius: var(--r-2); background: var(--fond-carte); }
.woocommerce .commande-adresse__titre { margin: 0 0 var(--e-3); font-family: var(--f-texte); font-size: .72rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--or-texte); }
.commande-adresse address { font-style: normal; font-size: var(--fs-petit); line-height: 1.65; color: var(--texte); overflow-wrap: anywhere; }
.commande-adresse address p { margin: .2rem 0 0; }

/* Boutons WooCommerce aux couleurs du prototype (le socle les dessine en contour) */
.woocommerce .button.btn--primaire, .woocommerce a.button.btn--primaire, .woocommerce button.button.btn--primaire { color: var(--accent-contraste); background: var(--accent); border-color: var(--accent); }
.woocommerce .button.btn--primaire:hover, .woocommerce a.button.btn--primaire:hover, .woocommerce button.button.btn--primaire:hover { background: var(--accent-survol); border-color: var(--accent-survol); color: var(--accent-contraste); }

/* Très petits écrans (320 px) : libellés de l'indicateur d'étapes sans chevauchement */
@media (max-width: 400px) { .etapes__item { font-size: .55rem; letter-spacing: .03em; } }

/* Vérification de l'e-mail (confirmation ouverte dans un autre navigateur) */
.woocommerce form.confirmation--verification { margin-top: var(--e-4); margin-bottom: var(--section-y); }
.woocommerce .confirmation--verification .form-row { width: 100%; max-width: 24rem; margin: 0; text-align: left; }
.woocommerce .confirmation--verification .button { width: 100%; }

/* Connexion depuis la page de commande (lien « Vous avez déjà un compte ? », gabarit WooCommerce global/form-login.php) :
   introduction détachée des champs, en texte doux. Recette n° 1 du 24/10/2026. */
.woocommerce form.woocommerce-form-login > p:first-child:not(.form-row) { margin: 0 0 var(--e-4); font-size: var(--fs-petit); line-height: 1.5; color: var(--texte-doux); }