/**
 * CYL&COM — Boutique BBD
 * Panier sur mesure. Toutes les classes sont produites par l'extension.
 */

/* ------------------------------------------------------------------ *
 * 1. Jetons
 *
 * Tout se règle ici : couleurs et polices. Il n'y a pas d'écran
 * d'administration, ces valeurs font foi.
 * ------------------------------------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

.cyl-bbd {
  --cyl-ink: #1d1d1b;
  --cyl-magenta: #a01881;
  --cyl-teal: #008b91;

  --cyl-paper: #f4f3f1;
  --cyl-surface: #ffffff;
  --cyl-line: #e2e0dc;
  --cyl-muted: #6e6c68;

  --cyl-magenta-dark: color-mix(in srgb, var(--cyl-magenta) 82%, #000000);
  --cyl-magenta-soft: color-mix(in srgb, var(--cyl-magenta) 8%, #ffffff);
  --cyl-teal-soft: color-mix(in srgb, var(--cyl-teal) 10%, #ffffff);

  /* Polices. Il n'y a que ces deux variables. */
  --cyl-font-texte: "Inter", sans-serif;
  --cyl-font-titre: "AlsoSans", Sans-serif;

  --cyl-radius: 4px;
  --cyl-radius-lg: 12px;
  --cyl-gap: clamp(1rem, 2.5vw, 1.75rem);
  --cyl-shadow: 0 1px 2px rgba(29, 29, 27, 0.06), 0 14px 36px -20px rgba(29, 29, 27, 0.4);

  /* Largeur de lecture de la page de remerciement. */
  --cyl-largeur-confirm: 60%;
}

.cyl-bbd {
  font-family: var(--cyl-font-texte);
  color: var(--cyl-ink);
  font-feature-settings: "tnum" 1;
}

/* ------------------------------------------------------------------ *
 * 2. Neutralisation
 *
 * Le thème et Elementor habillent tous les boutons et champs du site.
 * On repart d'une base nue à l'intérieur du panier, puis on rhabille.
 * ------------------------------------------------------------------ */

/*
 * Restreint au panier : à l'échelle de .cyl-bbd, cette remise à zéro
 * touchait aussi l'en-tête du site, la recherche et le mini-panier.
 */
.cyl-bbd .cyl-panier button,
.cyl-bbd .cyl-panier input[type="number"] {
  width: 30px;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
}

.cyl-bbd .cyl-panier input[type="number"]:focus-visible {
  border: none !important;
  outline: none;
}

.cyl-bbd .cyl-panier button:hover,
.cyl-bbd .cyl-panier button:focus {
  background: none;
  box-shadow: none;
}

/* Le titre du thème ferait doublon avec celui du bandeau. */
.cyl-bbd--cart .page-header,
.cyl-bbd--cart .entry-title,
.cyl-bbd--cart .wp-block-post-title {
  display: none;
}

/* Pendant une mise à jour, le panier reste lisible mais inerte. */
.cyl-bbd .cyl-panier {
  transition: opacity 0.15s ease;
}

.cyl-bbd .cyl-panier.is-busy {
  opacity: 0.55;
  pointer-events: none;
}

.cyl-bbd .cyl-panier :is(a, button, input):focus-visible,
.cyl-bbd--checkout .woocommerce :is(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--cyl-teal);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * 3. Titre du panier
 * ------------------------------------------------------------------ */

.cyl-bbd .cyl-panier__titre {
  margin: 0 0 var(--cyl-gap);
  font-family: var(--cyl-font-titre);
  font-size: clamp(1.9rem, 5vw, 2.75rem);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--cyl-ink);
}

/* ------------------------------------------------------------------ *
 * 4. Bouton principal
 *
 * Un seul bouton plein par écran : passer commande. Le reste est en
 * texte, pour que l'action décisive reste la plus visible.
 * ------------------------------------------------------------------ */

.cyl-bbd .cyl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  background: var(--cyl-magenta);
  color: #ffffff;
  border-radius: var(--cyl-radius);
  font-family: var(--cyl-font-titre);
  font-size: 0.9375rem;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease;
  line-height: normal;
}

.cyl-bbd .cyl-btn:hover {
  background: var(--cyl-magenta-dark);
  color: #ffffff;
}

/* ------------------------------------------------------------------ *
 * 5. Grille du panier
 * ------------------------------------------------------------------ */

.cyl-bbd .cyl-panier__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

/* ------------------------------------------------------------------ *
 * 6. Lignes produit
 *
 * Pas de filet entre les lignes : l'espace et l'alignement séparent.
 * ------------------------------------------------------------------ */

.cyl-bbd .cyl-panier__articles {
  border-top: 1px solid var(--cyl-line);
}

/*
 * La largeur de la vignette se règle ici, sur la première piste de la
 * grille, et non sur .cyl-article__visuel : une largeur posée sur
 * l'élément déborderait de sa colonne.
 */
.cyl-bbd .cyl-article {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: start;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--cyl-line);
}

/* Le filet du bas ferait doublon avec le vide qui suit la liste. */
.cyl-bbd .cyl-article:last-child {
  border-bottom: 0;
}

.cyl-bbd .cyl-article__visuel img {
  display: block;
  width: 100%;
  /* Légèrement plus haut que large : le format des visuels textile. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--cyl-paper);
  border-radius: var(--cyl-radius);
}

.cyl-bbd .cyl-article__nom {
  margin: 0;
  font-family: var(--cyl-font-titre);
  font-size: 1.0625rem;
  line-height: 1.2;
  text-transform: uppercase;
}

.cyl-bbd .cyl-article__nom a {
  color: var(--cyl-ink);
  text-decoration: none;
}

.cyl-bbd .cyl-article__nom a:hover {
  color: var(--cyl-magenta);
}

/* Prix unitaire : discret, seul le total de ligne est mis en avant. */
.cyl-bbd .cyl-article__unitaire {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--cyl-muted);
  font-variant-numeric: tabular-nums;
}

/* Variantes : le libellé est masqué, la valeur devient une pastille. */
.cyl-bbd .cyl-article__attributs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

/* Le libellé n'est là que pour les lecteurs d'écran. */
.cyl-bbd .cyl-article__attribut-cle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cyl-bbd .cyl-article__pastille {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.4rem;
  background: var(--cyl-surface);
  border: 1px solid var(--cyl-line);
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  color: var(--cyl-ink);
}

.cyl-bbd .cyl-article__pied {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.8rem;
}

.cyl-bbd .cyl-article__prix {
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cyl-bbd .cyl-article__retirer {
  font-size: 0.8125rem;
  color: var(--cyl-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cyl-bbd .cyl-article__retirer:hover {
  color: var(--cyl-magenta);
}

/* Sélecteur de quantité : une pastille compacte, sans aplat de couleur. */
.cyl-bbd .cyl-qte {
  display: inline-flex;
  align-items: center;
  height: 2.25rem;
  background: var(--cyl-surface);
  border: 1px solid var(--cyl-line);
  border-radius: 999px;
  overflow: hidden;
}

.cyl-bbd .cyl-qte__pas {
  width: 2rem;
  height: 100%;
  font-size: 1rem;
  line-height: 1;
  color: var(--cyl-ink);
  cursor: pointer;
  transition: color 0.15s ease;
}

.cyl-bbd .cyl-qte__pas:hover {
  color: var(--cyl-magenta);
}

.cyl-bbd .cyl-qte__champ {
  width: 2rem;
  height: 100%;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  color: var(--cyl-ink);
  -moz-appearance: textfield;
  appearance: textfield;
}

.cyl-bbd .cyl-qte__champ::-webkit-outer-spin-button,
.cyl-bbd .cyl-qte__champ::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

/* ------------------------------------------------------------------ *
 * 7. Récapitulatif
 * ------------------------------------------------------------------ */

.cyl-bbd .cyl-recap {
  position: sticky;
  top: 2rem;
  padding: 1.5rem;
  background: var(--cyl-surface);
  border: 1px solid var(--cyl-line);
  border-radius: var(--cyl-radius-lg);
}

.cyl-bbd .cyl-recap__titre {
  margin: 0 0 1rem;
  font-family: var(--cyl-font-titre);
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--cyl-muted);
}

.cyl-bbd .cyl-recap__ligne {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.cyl-bbd .cyl-recap__ligne--remise {
  color: var(--cyl-teal);
}

/* Le total : le seul chiffre traité en grand, comme un score. */
.cyl-bbd .cyl-recap__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cyl-line);
}

.cyl-bbd .cyl-recap__total-cle {
  font-family: var(--cyl-font-titre);
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--cyl-muted);
}

.cyl-bbd .cyl-recap__total-valeur {
  font-family: var(--cyl-font-titre);
  font-size: 22px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cyl-bbd .cyl-recap__commander {
  display: flex;
  width: 100%;
  margin-top: 1.1rem;
}

.cyl-bbd .cyl-recap__continuer {
  display: block;
  margin-top: 0.8rem;
  font-size: 0.8125rem;
  text-align: center;
  color: var(--cyl-muted);
}

.cyl-bbd .cyl-recap__continuer:hover {
  color: var(--cyl-ink);
}

/* ------------------------------------------------------------------ *
 * 8. Panier vide
 * ------------------------------------------------------------------ */

.cyl-bbd .cyl-panier__vide {
  padding: clamp(2rem, 6vw, 4rem) 0;
  text-align: center;
}

.cyl-bbd--cart:has(.cyl-panier__vide) .cyl-panier__titre {
  display: none;
}

.cyl-bbd .cyl-panier__vide-titre {
  margin: 0 0 1.5rem;
  font-family: var(--cyl-font-titre);
  font-size: clamp(1.5rem, 4vw, 2rem);
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 * 9. Page de commande
 *
 */
body.cyl-bbd--checkout main,
body.cyl-bbd--checkout .site-main {
  background: var(--cyl-paper);
}

/*
 * Pas de mise en page posée ici : le widget Elementor gouverne déjà les
 * deux colonnes de form.checkout. On ne garde que la typographie et les
 * marges, sinon les deux grilles se disputent la même boîte.
 */
body.cyl-bbd--checkout .woocommerce form.checkout {
  align-items: start;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 0 5rem;
  font-family: var(--cyl-font-texte);
  color: var(--cyl-ink);
}

body.cyl-bbd--checkout .cyl-colonne--droite {
  position: sticky;
  top: 1.5rem;
}

/* ---- Cartes d'étape ---- */

body.cyl-bbd--checkout .cyl-etape,
body.cyl-bbd--checkout .cyl-services {
  margin-bottom: 1rem;
  background: var(--cyl-surface);
  border: 1px solid var(--cyl-line);
  border-radius: var(--cyl-radius-lg);
}

body.cyl-bbd--checkout .cyl-etape[hidden] {
  display: none;
}

body.cyl-bbd--checkout .cyl-etape__entete {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 1.75rem;
  padding: 1.6rem 0 1.4rem;
  border-bottom: 1px solid var(--cyl-line);
}

/*
 * La pastille porte le fond, un span intérieur porte le chiffre : même
 * principe que le fil des étapes du bandeau, pour un centrage fiable
 * quelle que soit la police.
 */
body.cyl-bbd--checkout .cyl-etape__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  background: var(--cyl-magenta);
  border: 1px solid var(--cyl-magenta);
  border-radius: 50%;
  color: #ffffff;
}

body.cyl-bbd--checkout .cyl-etape__chiffre {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
}

/*
 * flex: none — sans ça, le titre se comprime pour laisser place au résumé
 * et « Vos coordonnées » se casse sur deux lignes dès que l'adresse est
 * un peu longue.
 */
body.cyl-bbd--checkout .cyl-etape__titre {
  flex: none;
  font-family: var(--cyl-font-titre);
  font-size: 1.25rem;
  line-height: normal;
  text-transform: uppercase;
}

body.cyl-bbd--checkout .cyl-etape__compte {
  font-family: var(--cyl-font-texte);
  font-size: 0.9375rem;
  color: var(--cyl-muted);
}

body.cyl-bbd--checkout .cyl-etape__lien {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--cyl-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.cyl-bbd--checkout .cyl-etape__lien:hover {
  color: var(--cyl-magenta);
}

body.cyl-bbd--checkout .cyl-etape__corps {
  padding: 1.6rem 1.75rem 1.75rem;
}

/* ---- Accordéon : actif seulement si le JS a pris la main ---- */

body.cyl-bbd--checkout .cyl-etape__modifier,
body.cyl-bbd--checkout .cyl-etape__suivant {
  display: none;
}

body.cyl-bbd--checkout .cyl-accordeon .cyl-colonne--gauche .cyl-etape:not(.est-ouverte) .cyl-etape__corps {
  display: none;
}

body.cyl-bbd--checkout .cyl-accordeon .cyl-colonne--gauche .cyl-etape:not(.est-ouverte) .cyl-etape__entete {
  padding-bottom: 1.6rem;
  border-bottom: 0;
}

/* Étape à venir : pastille creuse, titre en gris. */
body.cyl-bbd--checkout .cyl-accordeon .cyl-colonne--gauche .cyl-etape:not(.est-ouverte) .cyl-etape__numero {
  background: none;
  border-color: var(--cyl-line);
  color: var(--cyl-muted);
}

body.cyl-bbd--checkout .cyl-accordeon .cyl-colonne--gauche .cyl-etape:not(.est-ouverte) .cyl-etape__titre {
  color: var(--cyl-muted);
}

/* Étape passée : pastille turquoise, comme le fil du bandeau. */
body.cyl-bbd--checkout .cyl-accordeon .est-validee:not(.est-ouverte) .cyl-etape__numero {
  background: var(--cyl-teal);
  border-color: var(--cyl-teal);
  color: #ffffff;
}

body.cyl-bbd--checkout .cyl-accordeon .est-validee:not(.est-ouverte) .cyl-etape__titre {
  color: var(--cyl-ink);
}

body.cyl-bbd--checkout .cyl-accordeon .est-validee:not(.est-ouverte) .cyl-etape__modifier {
  display: block;
  flex: none;
  margin-left: auto;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--cyl-font-texte);
  font-size: 0.8125rem;
  color: var(--cyl-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

body.cyl-bbd--checkout .cyl-accordeon .est-validee:not(.est-ouverte) .cyl-etape__modifier:hover {
  color: var(--cyl-magenta);
}

/*
 * Le bouton d'étape est plein comme « Commander » : c'est la seule
 * action possible dans une étape ouverte, il n'y a pas de concurrence.
 */
body.cyl-bbd--checkout .cyl-accordeon .est-ouverte .cyl-etape__suivant {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  margin: 1.4rem 0 0 auto;
  padding: 0.75rem 2.5rem;
  background: var(--cyl-magenta);
  border: 0;
  border-radius: var(--cyl-radius);
  font-family: var(--cyl-font-titre);
  font-size: 0.9375rem;
  line-height: normal;
  text-transform: uppercase;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

body.cyl-bbd--checkout .cyl-etape__suivant:hover {
  background: var(--cyl-magenta-dark);
}

/* ---- Champs ---- */

body.cyl-bbd--checkout #customer_details .col-1,
body.cyl-bbd--checkout #customer_details .col-2 {
  width: 100%;
  float: none;
}

body.cyl-bbd--checkout #customer_details .col-2 {
  margin-top: 2rem;
}

body.cyl-bbd--checkout .woocommerce-billing-fields h3,
body.cyl-bbd--checkout .woocommerce-shipping-fields h3,
body.cyl-bbd--checkout .woocommerce-additional-fields h3 {
  margin: 0 0 1.25rem;
  font-family: var(--cyl-font-titre);
  font-size: 0.875rem;
  text-transform: uppercase;
  color: var(--cyl-muted);
}

/* WooCommerce sort un titre vide au-dessus des notes de commande. */
body.cyl-bbd--checkout .woocommerce-additional-fields h3:empty {
  display: none;
}

body.cyl-bbd--checkout .woocommerce form .form-row {
  margin: 0 0 1.1rem;
  padding: 0;
}

body.cyl-bbd--checkout .woocommerce form .form-row label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8125rem;
  color: var(--cyl-muted);
}

body.cyl-bbd--checkout .woocommerce form .form-row .required {
  color: var(--cyl-magenta);
  text-decoration: none;
}

body.cyl-bbd--checkout .woocommerce form .form-row input.input-text,
body.cyl-bbd--checkout .woocommerce form .form-row textarea,
body.cyl-bbd--checkout .woocommerce form .form-row select,
body.cyl-bbd--checkout .select2-container .select2-selection--single {
  width: 100%;
  height: auto;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  background: var(--cyl-surface);
  border: 1px solid var(--cyl-line);
  border-radius: var(--cyl-radius);
  box-shadow: none;
  font-family: var(--cyl-font-texte);
  font-size: 0.9375rem;
  color: var(--cyl-ink);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

body.cyl-bbd--checkout .woocommerce form .form-row textarea {
  min-height: 6rem;
  resize: vertical;
}

body.cyl-bbd--checkout .woocommerce form .form-row input.input-text:focus,
body.cyl-bbd--checkout .woocommerce form .form-row textarea:focus,
body.cyl-bbd--checkout .woocommerce form .form-row select:focus {
  border-color: var(--cyl-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyl-teal) 22%, transparent);
  outline: none;
}

/* Erreur posée par le JS avant de passer à l'étape suivante. */
body.cyl-bbd--checkout .cyl-erreur input.input-text,
body.cyl-bbd--checkout .cyl-erreur select,
body.cyl-bbd--checkout .cyl-erreur .select2-selection--single {
  border-color: var(--cyl-magenta);
}

body.cyl-bbd--checkout .cyl-erreur::after {
  content: "Ce champ est requis.";
  display: block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: var(--cyl-magenta);
}

body.cyl-bbd--checkout #ship-to-different-address {
  margin: 0 0 1.1rem;
}

body.cyl-bbd--checkout #ship-to-different-address label,
body.cyl-bbd--checkout .woocommerce-form__label-for-checkbox span {
  font-size: 0.875rem;
  color: var(--cyl-ink);
}

/*
 * selectWoo pose sa liste directement dans le body, hors du formulaire :
 * ces règles restent accrochées à .cyl-bbd seul.
 */
.cyl-bbd .select2-container .select2-selection--single {
  display: flex;
  align-items: center;
}

.cyl-bbd .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 1.4;
  color: var(--cyl-ink);
}

.cyl-bbd .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 0.6rem;
}

.cyl-bbd .select2-dropdown {
  border-color: var(--cyl-line);
  border-radius: var(--cyl-radius);
}

.cyl-bbd .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--cyl-magenta);
}

/* ---- Étape 2 : modes de livraison en cartes cliquables ---- */

body.cyl-bbd--checkout [data-cyl-livraison],
body.cyl-bbd--checkout [data-cyl-livraison] td {
  display: block;
  padding: 0;
  border: 0;
}

body.cyl-bbd--checkout [data-cyl-livraison] th {
  display: none;
}

body.cyl-bbd--checkout [data-cyl-livraison] ul#shipping_method,
body.cyl-bbd--checkout [data-cyl-livraison] ul.woocommerce-shipping-methods {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.cyl-bbd--checkout [data-cyl-livraison] ul#shipping_method li,
body.cyl-bbd--checkout [data-cyl-livraison] ul.woocommerce-shipping-methods li {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

body.cyl-bbd--checkout [data-cyl-livraison] ul#shipping_method li input[type="radio"],
body.cyl-bbd--checkout [data-cyl-livraison] ul.woocommerce-shipping-methods li input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

body.cyl-bbd--checkout [data-cyl-livraison] ul#shipping_method li label,
body.cyl-bbd--checkout [data-cyl-livraison] ul.woocommerce-shipping-methods li label {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  padding: 1.1rem 1.25rem;
  background: var(--cyl-surface);
  border: 1px solid var(--cyl-line);
  border-radius: var(--cyl-radius);
  font-size: 0.9375rem;
  color: var(--cyl-ink);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

body.cyl-bbd--checkout [data-cyl-livraison] ul#shipping_method li label::before,
body.cyl-bbd--checkout [data-cyl-livraison] ul.woocommerce-shipping-methods li label::before {
  content: "";
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 1px solid var(--cyl-line);
  border-radius: 50%;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

body.cyl-bbd--checkout [data-cyl-livraison] ul#shipping_method li label:hover,
body.cyl-bbd--checkout [data-cyl-livraison] ul.woocommerce-shipping-methods li label:hover {
  border-color: var(--cyl-muted);
}

body.cyl-bbd--checkout [data-cyl-livraison] ul#shipping_method li input:checked + label,
body.cyl-bbd--checkout [data-cyl-livraison] ul.woocommerce-shipping-methods li input:checked + label {
  border-color: var(--cyl-magenta);
  background: var(--cyl-magenta-soft);
}

body.cyl-bbd--checkout [data-cyl-livraison] ul#shipping_method li input:checked + label::before,
body.cyl-bbd--checkout [data-cyl-livraison] ul.woocommerce-shipping-methods li input:checked + label::before {
  border-color: var(--cyl-magenta);
  box-shadow:
    inset 0 0 0 3px var(--cyl-surface),
    inset 0 0 0 1.125rem var(--cyl-magenta);
}

body.cyl-bbd--checkout [data-cyl-livraison] ul#shipping_method li input:focus-visible + label,
body.cyl-bbd--checkout [data-cyl-livraison] ul.woocommerce-shipping-methods li input:focus-visible + label {
  outline: 2px solid var(--cyl-teal);
  outline-offset: 2px;
}

body.cyl-bbd--checkout [data-cyl-livraison] ul#shipping_method li label .amount,
body.cyl-bbd--checkout [data-cyl-livraison] ul.woocommerce-shipping-methods li label .amount {
  margin-left: auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.elementor-widget-woocommerce-checkout-page .woocommerce-shipping-totals td {
  width: 100%;
  max-width: 100% !important;
}

/*
 * La ligne de frais de port 
 */
body.cyl-bbd--checkout .woocommerce-checkout-review-order-table tfoot .order-total th::after {
  content: " (livraison comprise)";
  display: block;
  margin-top: 0.2rem;
  font-family: var(--cyl-font-texte);
  font-size: 0.6875rem;
  text-transform: none;
  letter-spacing: normal;
}

/*
 * Le point plein est dessiné par deux ombres internes : un anneau blanc
 * puis un aplat magenta. Pas de pseudo-élément supplémentaire à placer.
 */
body.cyl-bbd--checkout [data-cyl-livraison] ul#shipping_method li input:checked + label::before {
  border-color: var(--cyl-magenta);
  box-shadow:
    inset 0 0 0 3px var(--cyl-surface),
    inset 0 0 0 1.125rem var(--cyl-magenta);
}

body.cyl-bbd--checkout [data-cyl-livraison] ul#shipping_method li input:focus-visible + label {
  outline: 2px solid var(--cyl-teal);
  outline-offset: 2px;
}

body.cyl-bbd--checkout [data-cyl-livraison] ul#shipping_method li label .amount {
  margin-left: auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

body.cyl-bbd--checkout [data-cyl-livraison] .woocommerce-shipping-destination {
  margin: 1rem 0 0;
  font-size: 0.75rem;
  color: var(--cyl-muted);
}

/* ---- Étape 3 : rappel des coordonnées ---- */

/*
 * Reprise de l'adresse saisie à l'étape 1, juste avant le paiement :
 * c'est le dernier moment utile pour la relire. Fond papier plutôt que
 * carte blanche, pour qu'on la lise comme un rappel et non comme un
 * champ à remplir.
 */
body.cyl-bbd--checkout .cyl-rappel {
  margin-bottom: 1.4rem;
  padding: 1rem 1.25rem;
  background: var(--cyl-paper);
  border-radius: var(--cyl-radius);
}

body.cyl-bbd--checkout .cyl-rappel[hidden] {
  display: none;
}

body.cyl-bbd--checkout .cyl-rappel__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

body.cyl-bbd--checkout .cyl-rappel__titre {
  font-family: var(--cyl-font-titre);
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--cyl-muted);
}

body.cyl-bbd--checkout .cyl-rappel__modifier {
  flex: none;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--cyl-font-texte);
  font-size: 0.8125rem;
  color: var(--cyl-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

body.cyl-bbd--checkout .cyl-rappel__modifier:hover {
  color: var(--cyl-magenta);
}

body.cyl-bbd--checkout .cyl-rappel__corps {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--cyl-ink);
}

/* ---- Étape 3 : code promo ---- */

body.cyl-bbd--checkout [data-cyl-coupon] {
  margin-bottom: 1.4rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--cyl-line);
}

body.cyl-bbd--checkout [data-cyl-coupon][hidden] {
  display: none;
}

body.cyl-bbd--checkout [data-cyl-coupon] .woocommerce-form-coupon-toggle,
body.cyl-bbd--checkout [data-cyl-coupon] .woocommerce-form-coupon {
  max-width: none;
  margin: 0;
  padding: 0;
}

body.cyl-bbd--checkout [data-cyl-coupon] .woocommerce-info {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  font-size: 0.8125rem;
  color: var(--cyl-muted);
}

body.cyl-bbd--checkout [data-cyl-coupon] .woocommerce-info a {
  color: var(--cyl-magenta);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.cyl-bbd--checkout [data-cyl-coupon] .woocommerce-form-coupon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  margin-top: 0.9rem;
  background: none;
  border: 0;
}

body.cyl-bbd--checkout [data-cyl-coupon] .woocommerce-form-coupon > p:first-child {
  display: none;
}

body.cyl-bbd--checkout [data-cyl-coupon] .woocommerce-form-coupon .form-row {
  margin-bottom: 0;
}

/* Bouton secondaire : contour seul, pour ne pas concurrencer « Commander ». */
body.cyl-bbd--checkout [data-cyl-coupon] .woocommerce-form-coupon button {
  min-height: 3rem;
  padding: 0 1.1rem;
  background: none;
  border: 1px solid var(--cyl-ink);
  border-radius: var(--cyl-radius);
  font-family: var(--cyl-font-titre);
  font-size: 0.875rem;
  text-transform: uppercase;
  color: var(--cyl-ink);
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

body.cyl-bbd--checkout [data-cyl-coupon] .woocommerce-form-coupon button:hover {
  background: var(--cyl-ink);
  color: #ffffff;
}

/* ---- Boutons secondaires WooCommerce ---- */

/*
 * button.woocommerce-button sert à tout ce qui n'est pas « Commander » :
 * connexion, application d'un code promo, renvoi de mot de passe. Un seul
 * traitement pour les trois, en contour, pour ne pas concurrencer
 * l'action principale.
 *
 * Le sélecteur d'Elementor est repris tel quel pour passer devant ses
 * propres règles de bouton, sans !important.
 */
body.cyl-bbd--checkout .woocommerce button.woocommerce-button,
body.cyl-bbd--checkout .elementor-widget-woocommerce-checkout-page .woocommerce button.woocommerce-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 3rem;
  padding: 0 1.4rem;
  background: none;
  border: 1px solid var(--cyl-ink);
  border-radius: var(--cyl-radius);
  font-family: var(--cyl-font-titre);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cyl-ink);
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

body.cyl-bbd--checkout .woocommerce button.woocommerce-button:hover,
body.cyl-bbd--checkout .elementor-widget-woocommerce-checkout-page .woocommerce button.woocommerce-button:hover {
  background: var(--cyl-ink);
  border-color: var(--cyl-ink);
  color: #ffffff;
}

body.cyl-bbd--checkout .woocommerce button.woocommerce-button:focus-visible {
  outline: 2px solid var(--cyl-teal);
  outline-offset: 2px;
}

/* Espace entre le lien « Saisir un code » et le champ qui s'ouvre. */
.elementor-widget-woocommerce-checkout-page .woocommerce .coupon-container-grid {
  margin-top: 10px;
}

/* ---- Formulaire de connexion ---- */

body.cyl-bbd--checkout .woocommerce-form-login-toggle .woocommerce-info {
  margin: 0;
  padding: 0.9rem 1.1rem;
  background: var(--cyl-paper);
  border: 0;
  border-left: 3px solid var(--cyl-teal);
  border-radius: 0 var(--cyl-radius) var(--cyl-radius) 0;
  font-size: 0.875rem;
  color: var(--cyl-ink);
}

body.cyl-bbd--checkout .woocommerce-form-login-toggle .woocommerce-info a {
  color: var(--cyl-magenta);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.cyl-bbd--checkout .woocommerce form.woocommerce-form-login {
  margin: 1rem auto 1.5rem;
  padding: 1.5rem;
  background: var(--cyl-surface);
  border: 1px solid var(--cyl-line);
  border-radius: var(--cyl-radius-lg);
}

/* La case « Se souvenir de moi » et le bouton tiennent sur une ligne. */
body.cyl-bbd--checkout .woocommerce form.woocommerce-form-login .form-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

body.cyl-bbd--checkout .woocommerce form.woocommerce-form-login .woocommerce-form-login__rememberme {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--cyl-muted);
}

body.cyl-bbd--checkout .woocommerce form.woocommerce-form-login .lost_password {
  margin: 0.6rem 0 0;
  font-size: 0.8125rem;
}

body.cyl-bbd--checkout .woocommerce form.woocommerce-form-login .lost_password a {
  color: var(--cyl-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.cyl-bbd--checkout .woocommerce form.woocommerce-form-login .lost_password a:hover {
  color: var(--cyl-magenta);
}

/* ---- Étape 3 : paiement ---- */

body.cyl-bbd--checkout #payment {
  background: none;
  border-radius: 0;
}

body.cyl-bbd--checkout #payment ul.payment_methods {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

body.cyl-bbd--checkout #payment ul.payment_methods li {
  margin: 0 0 0.9rem;
  padding: 0;
  border: 0;
  list-style: none;
}

body.cyl-bbd--checkout #payment ul.payment_methods li label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--cyl-ink);
}

body.cyl-bbd--checkout #payment div.payment_box {
  margin: 0.6rem 0 0;
  padding: 0.85rem 1rem;
  background: var(--cyl-paper);
  border-radius: var(--cyl-radius);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--cyl-muted);
}

body.cyl-bbd--checkout #payment div.payment_box::before {
  display: none;
}

body.cyl-bbd--checkout #payment div.payment_box p {
  margin: 0;
}

body.cyl-bbd--checkout #payment .woocommerce-privacy-policy-text,
body.cyl-bbd--checkout #payment .woocommerce-terms-and-conditions-wrapper {
  margin: 1.1rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--cyl-muted);
}

body.cyl-bbd--checkout #payment .form-row.place-order {
  margin: 0;
  padding: 1.4rem 0 0;
}

body.cyl-bbd--checkout .woocommerce #payment #place_order {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--cyl-magenta);
  border: 0;
  border-radius: var(--cyl-radius);
  font-family: var(--cyl-font-titre);
  font-size: 1rem;
  line-height: normal;
  text-transform: uppercase;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

body.cyl-bbd--checkout .woocommerce #payment #place_order:hover {
  background-color: var(--cyl-magenta-dark);
  color: #ffffff;
}

/* ---- Récapitulatif ---- */

body.cyl-bbd--checkout #order_review_heading {
  display: none;
}

body.cyl-bbd--checkout .woocommerce-checkout-review-order-table,
body.cyl-bbd--checkout .woocommerce-checkout-review-order-table tbody,
body.cyl-bbd--checkout .woocommerce-checkout-review-order-table tfoot,
body.cyl-bbd--checkout .woocommerce-checkout-review-order-table tr {
  border: 0;
}

body.cyl-bbd--checkout .woocommerce-checkout-review-order-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

body.cyl-bbd--checkout .woocommerce-checkout-review-order-table thead {
  display: none;
}

body.cyl-bbd--checkout .woocommerce-checkout-review-order-table th,
body.cyl-bbd--checkout .woocommerce-checkout-review-order-table td {
  padding: 0.4rem 0;
  border: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

body.cyl-bbd--checkout .woocommerce-checkout-review-order-table td:last-child,
body.cyl-bbd--checkout .woocommerce-checkout-review-order-table th:last-child {
  text-align: right;
  white-space: nowrap;
}

/* Le prix est repris dans le bloc produit : la colonne de droite est inutile. */
body.cyl-bbd--checkout .woocommerce-checkout-review-order-table .cart_item .product-total,
body.cyl-bbd--checkout .woocommerce-checkout-review-order-table .product-quantity {
  display: none;
}

body.cyl-bbd--checkout .woocommerce-checkout-review-order-table .cart_item td {
  padding: 0 0 1.25rem;
  border: 0;
  vertical-align: top;
}

body.cyl-bbd--checkout .cyl-recap-produit {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

body.cyl-bbd--checkout .cyl-recap-produit__visuel img {
  display: block;
  width: 84px;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--cyl-paper);
  border-radius: var(--cyl-radius);
}

body.cyl-bbd--checkout .cyl-recap-produit__infos {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-top: 0.15rem;
}

body.cyl-bbd--checkout .cyl-recap-produit__nom {
  font-family: var(--cyl-font-titre);
  font-size: 0.9375rem;
  line-height: 1.25;
  text-transform: uppercase;
}

body.cyl-bbd--checkout .cyl-recap-produit__attribut,
body.cyl-bbd--checkout .cyl-recap-produit__qte {
  font-size: 0.75rem;
  color: var(--cyl-muted);
}

body.cyl-bbd--checkout .cyl-recap-produit__cle::after {
  content: " :";
}

body.cyl-bbd--checkout .cyl-recap-produit__prix {
  margin-top: 0.2rem;
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Sous-total et livraison figurent déjà dans les étapes de gauche. */
body.cyl-bbd--checkout .woocommerce-checkout-review-order-table tfoot .cart-subtotal,
body.cyl-bbd--checkout .woocommerce-checkout-review-order-table tfoot .woocommerce-shipping-totals {
  display: none;
}

body.cyl-bbd--checkout .woocommerce-checkout-review-order-table tfoot .cart-discount th,
body.cyl-bbd--checkout .woocommerce-checkout-review-order-table tfoot .cart-discount td {
  color: var(--cyl-teal);
}

/* Le total : le seul chiffre traité en grand, comme sur le panier. */
body.cyl-bbd--checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
body.cyl-bbd--checkout .woocommerce-checkout-review-order-table tfoot .order-total td {
  padding-top: 1rem;
  border-top: 1px solid var(--cyl-line);
  vertical-align: bottom;
}

body.cyl-bbd--checkout .woocommerce-checkout-review-order-table tfoot .order-total th {
  font-family: var(--cyl-font-titre);
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--cyl-muted);
}

body.cyl-bbd--checkout .woocommerce-checkout-review-order-table tfoot .order-total td strong {
  font-family: var(--cyl-font-titre);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--cyl-ink);
}

/* ---- Réassurances ---- */

body.cyl-bbd--checkout .cyl-services {
  padding: 0 1.75rem;
}

body.cyl-bbd--checkout .cyl-service {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--cyl-line);
}

body.cyl-bbd--checkout .cyl-service:last-child {
  border-bottom: 0;
}

body.cyl-bbd--checkout .cyl-service__titre {
  margin: 0 0 0.25rem;
  font-family: var(--cyl-font-titre);
  font-size: 0.875rem;
  text-transform: uppercase;
}

body.cyl-bbd--checkout .cyl-service__detail {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--cyl-muted);
}

/* ---- Bandeaux hors formulaire ---- */

body.cyl-bbd--checkout .woocommerce-form-login-toggle,
body.cyl-bbd--checkout .woocommerce-form-login {
  max-width: 1360px;
  margin: 0 auto 1rem;
}

/* ------------------------------------------------------------------ *
 * 10. Page de remerciement
 *
 * Le balisage vient de inc/thankyou.php. Restent du gabarit natif la
 * phrase de confirmation et la liste de synthèse, écrites en dur dans
 * WooCommerce : seul le CSS peut les retirer.
 * ------------------------------------------------------------------ */

body.cyl-bbd--confirm .woocommerce-thankyou-order-received,
body.cyl-bbd--confirm .woocommerce-order-overview {
  display: none !important;
}

body.cyl-bbd--confirm .woocommerce-order {
  max-width: var(--cyl-largeur-confirm) !important;
  margin-inline: auto !important;
}

/* ---- Confirmation ---- */

.cyl-bbd .cyl-merci__etat {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyl-teal);
}

.cyl-bbd .cyl-merci__coche {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  background: var(--cyl-teal);
  border-radius: 50%;
  font-size: 0.75rem;
  line-height: 1;
  color: #ffffff;
}

.cyl-bbd .cyl-merci__titre {
  margin: 0 0 0.75rem;
  font-family: var(--cyl-font-titre);
  font-size: clamp(1.9rem, 5vw, 2.5rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--cyl-ink);
}

.cyl-bbd .cyl-merci__intro {
  margin: 0 0 2rem;
  font-family: var(--cyl-font-texte);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--cyl-muted);
}

.cyl-bbd .cyl-merci__intro strong {
  font-weight: 700;
  color: var(--cyl-ink);
}

/* ---- Suivi en trois temps ---- */

/*
 * Les filets de séparation sont obtenus par le fond de la liste et un
 * interstice d'un pixel : une seule couleur à régler, et pas de bordure
 * en double entre deux cases.
 */
.cyl-bbd .cyl-suivi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1px;
  margin: 0 0 2rem;
  padding: 0;
  background: var(--cyl-line);
  border: 1px solid var(--cyl-line);
  border-radius: var(--cyl-radius);
  overflow: hidden;
  list-style: none;
}

.cyl-bbd .cyl-suivi__etape {
  margin: 0;
  padding: 1rem 1.1rem;
  background: var(--cyl-surface);
  border-top: 3px solid var(--cyl-line);
}

/* Seule l'étape franchie est colorée : les autres s'allumeront par e-mail. */
.cyl-bbd .cyl-suivi__etape.is-done {
  border-top-color: var(--cyl-teal);
}

.cyl-bbd .cyl-suivi__delai {
  margin: 0 0 0.25rem;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyl-muted);
}

.cyl-bbd .cyl-suivi__etape.is-done .cyl-suivi__delai {
  color: var(--cyl-teal);
}

.cyl-bbd .cyl-suivi__titre {
  margin: 0 0 0.2rem;
  font-family: var(--cyl-font-titre);
  font-size: 0.875rem;
  text-transform: uppercase;
  color: var(--cyl-ink);
}

.cyl-bbd .cyl-suivi__texte {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--cyl-muted);
}

/* ---- Récapitulatif ---- */

.cyl-bbd .cyl-merci__bloc {
  margin: 0 0 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--cyl-surface);
  border: 1px solid var(--cyl-line);
  border-radius: var(--cyl-radius-lg);
}

.cyl-bbd .cyl-merci__soustitre {
  margin: 0 0 1rem;
  font-family: var(--cyl-font-titre);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyl-muted);
}

.cyl-bbd .cyl-merci__articles {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cyl-bbd .cyl-merci-article {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0 0 1rem;
}

.cyl-bbd .cyl-merci-article:not(:last-child) {
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--cyl-line);
}

.cyl-bbd .cyl-merci-article__visuel img {
  display: block;
  width: 46px;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--cyl-paper);
  border-radius: var(--cyl-radius);
}

.cyl-bbd .cyl-merci-article__infos {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  min-width: 0;
}

.cyl-bbd .cyl-merci-article__nom {
  font-family: var(--cyl-font-titre);
  font-size: 0.875rem;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--cyl-ink);
}

.cyl-bbd .cyl-merci-article__meta {
  font-size: 0.75rem;
  color: var(--cyl-muted);
}

/*
 * wc_display_item_meta sort une liste à puces. Elle est remise à plat et
 * séparée de la quantité par un point médian.
 */
.cyl-bbd .cyl-merci-article__meta .wc-item-meta {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cyl-bbd .cyl-merci-article__meta .wc-item-meta li {
  display: inline;
  margin: 0;
}

.cyl-bbd .cyl-merci-article__meta .wc-item-meta li::after {
  content: " · ";
}

.cyl-bbd .cyl-merci-article__meta .wc-item-meta p,
.cyl-bbd .cyl-merci-article__meta .wc-item-meta strong {
  display: inline;
  margin: 0;
  font-weight: 400;
}

.cyl-bbd .cyl-merci-article__prix {
  flex: none;
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cyl-bbd .cyl-merci__totaux {
  padding-top: 1rem;
  border-top: 1px solid var(--cyl-line);
}

.cyl-bbd .cyl-merci__total {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.35rem;
  font-size: 0.875rem;
  color: var(--cyl-muted);
  font-variant-numeric: tabular-nums;
}

/* Le total : le seul chiffre traité en grand, comme sur les autres écrans. */
.cyl-bbd .cyl-merci__paye {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.6rem 0 0;
}

.cyl-bbd .cyl-merci__paye-cle {
  font-family: var(--cyl-font-titre);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyl-muted);
}

.cyl-bbd .cyl-merci__paye-valeur {
  font-family: var(--cyl-font-titre);
  font-size: 22px;
  line-height: 1;
  color: var(--cyl-ink);
  font-variant-numeric: tabular-nums;
}

.cyl-bbd .cyl-merci__paye-valeur .woocommerce-Price-currencySymbol {
  font-size: inherit;
}

/* ---- Livraison et retrait ---- */

.cyl-bbd .cyl-merci__reperes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/*
 * Filet de couleur sur un seul côté : les angles restent vifs de ce côté,
 * arrondis de l'autre. Un rayon complet laisserait le filet flotter.
 */
.cyl-bbd .cyl-repere {
  padding: 1.1rem 1.25rem;
  background: var(--cyl-surface);
  border: 1px solid var(--cyl-line);
  border-left: 3px solid var(--cyl-line);
  border-radius: 0 var(--cyl-radius-lg) var(--cyl-radius-lg) 0;
}

.cyl-bbd .cyl-repere--livraison {
  border-left-color: var(--cyl-magenta);
}

.cyl-bbd .cyl-repere--retrait {
  border-left-color: var(--cyl-teal);
}

.cyl-bbd .cyl-repere__titre {
  margin: 0 0 0.3rem;
  font-family: var(--cyl-font-titre);
  font-size: 0.8125rem;
  text-transform: uppercase;
  color: var(--cyl-ink);
}

.cyl-bbd .cyl-repere__texte {
  margin: 0;
  font-size: 0.8125rem;
  font-style: normal;
  line-height: 1.6;
  color: var(--cyl-muted);
}

/* ---- Invitation ---- */

.cyl-bbd .cyl-merci__invite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.5rem;
  background: var(--cyl-ink);
  border-radius: var(--cyl-radius-lg);
}

.cyl-bbd .cyl-merci__invite-texte {
  min-width: 0;
}

.cyl-bbd .cyl-merci__invite-titre {
  margin: 0 0 0.25rem;
  font-family: var(--cyl-font-titre);
  font-size: 1.0625rem;
  text-transform: uppercase;
  color: #ffffff;
}

.cyl-bbd .cyl-merci__invite-detail {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

.cyl-bbd .cyl-merci__invite-liens {
  display: flex;
  gap: 0.6rem;
  flex: none;
}

/* Bouton secondaire sur fond sombre : contour clair, sans aplat. */
.cyl-bbd .cyl-btn--fantome {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

.cyl-bbd .cyl-btn--fantome:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* ------------------------------------------------------------------ *
 * 12. Adaptations petits écrans
 * ------------------------------------------------------------------ */

@media (max-width: 1100px) {
  body.cyl-bbd--checkout .woocommerce form.checkout {
    padding-bottom: 3.5rem;
  }

  body.cyl-bbd--checkout .cyl-colonne--droite {
    position: static;
  }

  body.cyl-bbd--checkout .cyl-etape__entete {
    flex-wrap: wrap;
    margin: 0 1.1rem;
    padding: 1.25rem 0 1.1rem;
  }

  body.cyl-bbd--checkout .cyl-etape__corps {
    padding: 1.25rem 1.1rem 1.4rem;
  }

  body.cyl-bbd--checkout .cyl-accordeon .est-ouverte .cyl-etape__suivant {
    width: 100%;
    padding: 0.75rem 1.5rem;
  }

  body.cyl-bbd--checkout .cyl-services {
    padding: 0 1.1rem;
  }
  body.cyl-bbd--confirm .woocommerce-order {
    max-width: 90% !important;
  }
}

@media (max-width: 860px) {
  .cyl-bbd .cyl-panier__grille {
    grid-template-columns: 1fr;
  }

  .cyl-bbd .cyl-recap {
    position: static;
  }
}

@media (max-width: 767px) {
  body.cyl-bbd--checkout .elementor-widget-woocommerce-checkout-page .e-checkout__container {
    display: flex;
    flex-direction: column-reverse;
    grid-template-columns: none;
    grid-template-areas: none;
  }

  body.cyl-bbd--checkout .e-checkout__container .cyl-colonne--droite {
    display: contents;
  }

  body.cyl-bbd--checkout .e-checkout__container .cyl-etape--recap {
    order: -1;
  }

  body.cyl-bbd--checkout .e-checkout__container .cyl-colonne--gauche {
    order: 0;
  }

  body.cyl-bbd--checkout .e-checkout__container .cyl-services {
    order: 10;
    margin-top: 1rem;
  }

  body.cyl-bbd--checkout .cyl-recap-produit__visuel img {
    width: 56px;
  }

  body.cyl-bbd--checkout .woocommerce-checkout-review-order-table .cart_item td {
    padding-bottom: 0.85rem;
  }
  body.cyl-bbd--confirm .woocommerce-order {
    max-width: 100% !important;
  }
}

@media (max-width: 560px) {
  .cyl-bbd .cyl-article {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 0.9rem;
    padding: 1.1rem 0;
  }

  .cyl-bbd .cyl-article__nom {
    font-size: 0.9375rem;
  }

  .cyl-bbd .cyl-article__prix {
    font-size: 0.9375rem;
  }

  .cyl-bbd .cyl-article__pied {
    flex-wrap: wrap;
    gap: 0.6rem 0.9rem;
    margin-top: 0.7rem;
  }

  .cyl-bbd .cyl-qte {
    height: 2.75rem;
  }

  .cyl-bbd .cyl-panier .cyl-qte__pas {
    width: 2.75rem;
  }

  .cyl-bbd .cyl-panier .cyl-qte__champ {
    width: 2.5rem;
    font-size: 1rem;
  }

  .cyl-bbd .cyl-article__retirer {
    padding: 0.5rem 0;
  }

  .cyl-bbd .cyl-recap {
    padding: 1.25rem 1.1rem;
  }

  .cyl-bbd .cyl-merci__invite-liens {
    width: 100%;
  }

  .cyl-bbd .cyl-merci__invite-liens .cyl-btn {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cyl-bbd * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}