/* Compo'Perso : configurateur sur la fiche produit.
   L'accent reprend la couleur principale du thème quand elle existe (--wp--preset--color--primary),
   sinon le bleu nuit du module. Les teintes claires en sont dérivées avec color-mix, avec un repli
   neutre pour les vieux navigateurs. Tout est personnalisable via les variables ci-dessous. */
.cperso {
  --cperso-accent: var(--wp--preset--color--primary, #0b2545);
  --cperso-accent-ink: #fff;
  --cperso-accent-soft: rgba(0, 0, 0, .05);
  --cperso-accent-line: rgba(0, 0, 0, .18);
  --cperso-border: rgba(0, 0, 0, .1);
  --cperso-soft: rgba(0, 0, 0, .035);
  --cperso-surface: #fff;
  --cperso-radius: 14px;
  --cperso-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 30px rgba(0, 0, 0, .06);
  --cperso-error: #c0392b;
  margin: 0 0 1.5em;
  width: 100%;
  clear: both;
  min-width: 0;
  font-size: clamp(14px, .9em, 16px);
  line-height: 1.45;
}
@supports (color: color-mix(in srgb, red 10%, white)) {
  .cperso {
    --cperso-accent-soft: color-mix(in srgb, var(--cperso-accent) 8%, white);
    --cperso-accent-line: color-mix(in srgb, var(--cperso-accent) 45%, white);
    /* Seconde teinte du dégradé du bouton « Étape suivante » : l'accent légèrement éclairci. */
    --cperso-accent-2: color-mix(in srgb, var(--cperso-accent) 72%, white);
  }
}
.cperso-intro { margin: 0 0 1em; opacity: .85; }

/* ---------- Barre de progression ---------- */
.cperso-progress { display: flex; gap: .5em; list-style: none; margin: 0 0 1.4em; padding: 0; }
.cperso-progress-item {
  flex: 1; display: flex; align-items: center; gap: .5em; padding: .45em .7em; margin: 0;
  border-radius: 999px; background: var(--cperso-soft); border: 1px solid transparent;
  font-size: .88em; line-height: 1.2; cursor: pointer; opacity: .6; transition: opacity .15s, background .15s, border-color .15s;
}
.cperso-progress-item.is-current, .cperso-progress-item.is-done { opacity: 1; }
.cperso-progress-item.is-current { background: var(--cperso-accent-soft); border-color: var(--cperso-accent-line); font-weight: 600; }
.cperso-progress-item.is-done:hover { background: var(--cperso-accent-soft); }
.cperso-progress-num {
  flex: none; display: inline-grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%;
  background: var(--cperso-accent-line); color: var(--cperso-accent-ink); font-weight: 700; font-size: .9em;
}
.cperso-progress-item.is-current .cperso-progress-num, .cperso-progress-item.is-done .cperso-progress-num { background: var(--cperso-accent); }
.cperso-progress-item.is-done .cperso-progress-num { position: relative; color: transparent; }
.cperso-progress-item.is-done .cperso-progress-num::before { content: "\2713"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--cperso-accent-ink); }
.cperso-progress-label { overflow-wrap: normal; word-break: normal; hyphens: manual; }
/* Plus de 4 étapes : seule l'étape en cours affiche son nom, les autres se réduisent à leur pastille. */
.cperso--many .cperso-progress-item { flex: 0 0 auto; justify-content: center; padding: .45em; }
.cperso--many .cperso-progress-item .cperso-progress-label { display: none; }
.cperso--many .cperso-progress-item.is-current { flex: 1 1 auto; justify-content: flex-start; padding: .45em .9em .45em .45em; }
.cperso--many .cperso-progress-item.is-current .cperso-progress-label { display: inline; }
@media (max-width: 600px) { .cperso-progress-label { display: none; } .cperso-progress-item { justify-content: center; padding: .5em; } }

/* ---------- Étapes ---------- */
.cperso-step {
  border: 0; border-radius: var(--cperso-radius); background: var(--cperso-surface); box-shadow: var(--cperso-shadow);
  padding: 1.1em 1.3em 1em; margin: 0 0 1em; min-width: 0;
}
.cperso.is-js .cperso-step { display: none; }
.cperso.is-js .cperso-step.is-current { display: block; animation: cperso-in .25s ease-out; }
@keyframes cperso-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Une <legend> se place sur le bord du fieldset : le float la ramène à l'intérieur de la carte. */
.cperso-step-title { display: flex; align-items: center; gap: .6em; float: left; width: 100%; box-sizing: border-box; padding: 0; margin: 0 0 .5em; font-weight: 700; font-size: 1.1em; line-height: 1.3; }
.cperso-step-title + * { clear: both; }
.cperso-step::after { content: ""; display: table; clear: both; }
.cperso-step-num {
  flex: none; display: inline-grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%;
  background: var(--cperso-accent); color: var(--cperso-accent-ink); font-size: .8em; font-weight: 700;
}
.cperso-step-title .required { color: var(--cperso-error); text-decoration: none; border: 0; }
.cperso-help { margin: 0 0 1em; opacity: .75; font-size: .95em; }
.cperso-text {
  width: 100%; max-width: 420px; padding: .6em .9em; border: 1px solid var(--cperso-border); border-radius: 10px; font: inherit; line-height: 1.4;
  background: var(--cperso-surface); font-size: 1em; transition: border-color .15s, box-shadow .15s;
}
.cperso-text:focus { outline: 0; border-color: var(--cperso-accent); box-shadow: 0 0 0 3px var(--cperso-accent-soft); }
.cperso-info { background: var(--cperso-accent-soft); border-left: 4px solid var(--cperso-accent); border-radius: 12px; padding: 1em 1.2em; }
.cperso-info > :last-child { margin-bottom: 0; }
.cperso-error { display: flex; align-items: center; gap: .5em; color: var(--cperso-error); font-weight: 600; margin: 1em 0 0; }
.cperso-error::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--cperso-error); color: #fff; font-size: .85em; }
.cperso-error[hidden] { display: none; }

/* ---------- Choix unique ---------- */
.cperso-choices { display: grid; gap: .5em; }
.cperso-choice {
  display: flex; align-items: center; gap: .7em; padding: .65em .9em; margin: 0;
  border: 1px solid var(--cperso-border); border-radius: 12px; background: var(--cperso-surface); cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.cperso-choice:hover { border-color: var(--cperso-accent-line); }
.cperso-choice:has(input:checked) { border-color: var(--cperso-accent); background: var(--cperso-accent-soft); box-shadow: inset 0 0 0 1px var(--cperso-accent); }
.cperso-choice input { margin: 0; flex: none; accent-color: var(--cperso-accent); }
.cperso-choice-label { font-weight: 500; }
.cperso-choice-price { margin-left: auto; padding: .2em .7em; border-radius: 999px; background: var(--cperso-accent-soft); font-weight: 600; font-size: .9em; white-space: nowrap; }

/* ---------- Sélection d'éléments ---------- */
.cperso-counter {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .1em .45em; width: auto; max-width: 100%; margin: 0 0 1em; padding: .4em 1em;
  border-radius: 999px; background: var(--cperso-accent-soft); font-weight: 700; font-size: .92em; line-height: 1.3;
}
.cperso-counter-main, .cperso-min { white-space: nowrap; }
.cperso-min { font-weight: 400; opacity: .75; }
.cperso-step.is-full .cperso-counter { background: var(--cperso-accent); color: var(--cperso-accent-ink); }
.cperso-step.is-full .cperso-min { opacity: .85; }
.cperso-group + .cperso-group { margin-top: 1.3em; }
.cperso-group-title { display: flex; align-items: center; gap: .7em; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .78em; opacity: .7; margin: 0 0 .6em; }
.cperso-group-title::after { content: ""; flex: 1; height: 1px; background: var(--cperso-border); }
.cperso-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; }
@media (min-width: 700px) { .cperso-items { grid-template-columns: 1fr 1fr; } }
.cperso-item {
  border: 1px solid var(--cperso-border); border-radius: 12px; background: var(--cperso-surface); margin: 0;
  transition: border-color .15s, background .15s, box-shadow .15s, opacity .15s;
}
.cperso-item:hover { border-color: var(--cperso-accent-line); }
.cperso-item.is-checked { border-color: var(--cperso-accent); background: var(--cperso-accent-soft); box-shadow: inset 0 0 0 1px var(--cperso-accent); }
.cperso-item.is-disabled { opacity: .45; }
.cperso-item-main { display: flex; align-items: flex-start; gap: .6em; padding: .6em .8em; cursor: pointer; margin: 0; }
.cperso-item.is-disabled .cperso-item-main { cursor: not-allowed; }
.cperso-item-main input { margin: .2em 0 0; flex: none; accent-color: var(--cperso-accent); }
.cperso-item-text { display: flex; flex-direction: column; line-height: 1.35; }
.cperso-item-name { font-weight: 600; }
.cperso-item-sub { font-size: .88em; opacity: .7; }
.cperso-item-more { border-top: 1px dashed var(--cperso-border); margin: 0 1em; padding: .1em 0 .5em; font-size: .9em; }
.cperso-item-more summary { cursor: pointer; padding: .4em 0; color: var(--cperso-accent); font-weight: 600; list-style: none; }
.cperso-item-more summary::-webkit-details-marker { display: none; }
.cperso-item-more summary::before { content: "+"; display: inline-block; width: 1.2em; font-weight: 700; }
.cperso-item-more[open] summary::before { content: "\2212"; }
.cperso-item-desc > :last-child { margin-bottom: 0; }

.cperso-item[hidden], .cperso-group[hidden] { display: none; }

/* ---------- Thèmes (ce que recherche le client), avant une liste à cocher ---------- */
.cperso-themes { display: flex; flex-wrap: wrap; gap: .55em; }
.cperso-theme {
  position: relative; display: inline-flex; align-items: center; gap: .5em; margin: 0; padding: .55em 1.1em .55em .8em;
  border: 1px solid var(--cperso-border); border-radius: 999px; background: var(--cperso-surface); cursor: pointer;
  font-weight: 500; line-height: 1.2; user-select: none; transition: border-color .15s, background .15s, color .15s, transform .1s, box-shadow .15s;
}
.cperso-theme input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.cperso-theme::before {
  content: "+"; flex: none; display: inline-grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: 50%;
  background: var(--cperso-accent-soft); color: var(--cperso-accent); font-weight: 700; font-size: .9em; transition: background .15s, color .15s;
}
.cperso-theme:hover { border-color: var(--cperso-accent-line); transform: translateY(-1px); }
.cperso-theme.is-checked, .cperso-theme:has(input:checked) { background: var(--cperso-accent); border-color: var(--cperso-accent); color: var(--cperso-accent-ink); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .35); }
.cperso-theme.is-checked::before, .cperso-theme:has(input:checked)::before { content: "\2713"; background: rgba(255, 255, 255, .22); color: var(--cperso-accent-ink); }
.cperso-theme:has(input:focus-visible) { outline: 3px solid var(--cperso-accent-line); outline-offset: 2px; }
.cperso-skip { margin: 1.1em 0 0; font-size: .92em; }
.cperso-link {
  background: none; border: 0; padding: 0; margin: 0; min-height: 0; font: inherit; font-weight: 600; text-transform: none; letter-spacing: normal;
  color: var(--cperso-accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; box-shadow: none;
}
.cperso-link:hover { text-decoration-thickness: 2px; background: none; color: var(--cperso-accent); }
.cperso-filterbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4em 1em;
  margin: 0 0 1em; padding: .65em 1em; border-radius: 12px; background: var(--cperso-accent-soft); font-size: .92em;
}
.cperso-filterbar[hidden] { display: none; }
.cperso-filter-text { font-weight: 600; }

/* ---------- Navigation ---------- */
.cperso-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8em; margin: 0 0 1.2em; }
.cperso-nav[hidden] { display: none; }
.cperso-nav button { font: inherit; text-transform: none; letter-spacing: normal; min-height: 0; cursor: pointer; }
.cperso-nav .cperso-prev[hidden], .cperso-nav .cperso-next[hidden] { display: none; }

/* « Retour » : discret, en lien avec une flèche qui recule au survol. */
.cperso-nav .cperso-prev {
  grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: .45em;
  padding: .55em .2em; border: 0; background: none; box-shadow: none; color: inherit; opacity: .7; font-weight: 600; font-size: .95em;
  transition: opacity .15s;
}
.cperso-nav .cperso-prev:hover { opacity: 1; background: none; color: inherit; }
.cperso-prev-arrow { display: inline-block; transition: transform .2s; }
.cperso-nav .cperso-prev:hover .cperso-prev-arrow { transform: translateX(-3px); }

.cperso-nav-pos { grid-column: 2; font-size: .85em; opacity: .6; white-space: nowrap; }

/* « Étape suivante » : pastille en dégradé, flèche dans une bulle qui avance au survol, reflet lumineux. */
.cperso-nav .cperso-next {
  grid-column: 3; justify-self: end; position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: .8em; padding: .5em .5em .5em 1.5em;
  border: 0; border-radius: 999px; color: var(--cperso-accent-ink); font-weight: 700; font-size: 1em; line-height: 1.2; letter-spacing: .01em;
  background: var(--cperso-accent);
  background: linear-gradient(135deg, var(--cperso-accent) 0%, var(--cperso-accent-2, var(--cperso-accent)) 100%);
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s;
}
.cperso-nav .cperso-next::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-20deg); transition: left .6s ease;
}
.cperso-nav .cperso-next:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -12px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .22); filter: saturate(1.1); color: var(--cperso-accent-ink); }
.cperso-nav .cperso-next:hover::before { left: 130%; }
.cperso-nav .cperso-next:active { transform: translateY(0) scale(.98); }
.cperso-nav .cperso-next:focus-visible, .cperso-nav .cperso-prev:focus-visible { outline: 3px solid var(--cperso-accent-line); outline-offset: 3px; }
.cperso-next-arrow {
  flex: none; display: inline-grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%;
  background: rgba(255, 255, 255, .18); transition: transform .2s ease, background .2s;
}
.cperso-next-arrow svg { display: block; }
.cperso-nav .cperso-next:hover .cperso-next-arrow { transform: translateX(3px); background: rgba(255, 255, 255, .3); }
@media (max-width: 520px) {
  .cperso-nav { grid-template-columns: auto 1fr; }
  .cperso-nav-pos { display: none; }
  .cperso-nav .cperso-next { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .cperso-nav .cperso-next, .cperso-nav .cperso-next::before, .cperso-next-arrow, .cperso-prev-arrow, .cperso-theme { transition: none; }
}
.cperso-total { display: flex; align-items: baseline; gap: .5em; font-size: 1.1em; margin: 0 0 1em; }
.cperso-total[hidden] { display: none; }
.cperso-total-amount { font-size: 1.25em; color: var(--cperso-accent); }

/* Le bouton « Ajouter au panier » et la quantité n'apparaissent qu'à la dernière étape. */
form.cart.cperso-form:not(.cperso-at-last) .single_add_to_cart_button,
form.cart.cperso-form:not(.cperso-at-last) .quantity { display: none !important; }
form.cart.cperso-form { flex-wrap: wrap; }