/* ZYNTROL Buyback — frontend.css
 * Reprend le look du form FluentForms (dark, accent bleu Zyntrol).
 * Tout est scopé sous .zbc-wrap pour éviter les conflits.
 */

.zbc-wrap {
  --zbc-accent:      #3b82f6;
  --zbc-accent-2:    #60a5fa;
  --zbc-bg:          #0f1115;
  --zbc-card-bg:     #161a22;
  --zbc-card-border: #262d3a;
  --zbc-text:        #e6e9ef;
  --zbc-muted:       #9aa3b2;
  --zbc-radius:      14px;
  --zbc-price:       #3b82f6;

  background: var(--zbc-bg);
  color: var(--zbc-text);
  padding: 28px;
  border-radius: var(--zbc-radius);
  border: 1px solid var(--zbc-card-border);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  max-width: var(--zbc-max-width, 1280px);
  margin: 0 auto;
  box-sizing: border-box;
}
.zbc-wrap *, .zbc-wrap *::before, .zbc-wrap *::after { box-sizing: border-box; }

/* Header */
.zbc-header { margin-bottom: 32px; }
.zbc-title {
  font-size: 26px; font-weight: 800; margin: 0 0 8px;
  letter-spacing: -0.01em; color: var(--zbc-text);
}
.zbc-subtitle { color: var(--zbc-muted); margin: 0; font-size: 14px; line-height: 1.55; }

/* Form layout — espacement aéré pour une meilleure UX */
.zbc-grid { display: grid; gap: 28px; }
.zbc-row { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .zbc-row { grid-template-columns: 1fr; gap: 24px; } }

.zbc-field { display: flex; flex-direction: column; gap: 10px; }
.zbc-offer-card { margin: 10px 0; }
.zbc-fieldset { margin-top: 6px; }
.zbc-label { font-size: 13px; font-weight: 600; color: var(--zbc-text); }
.zbc-req { color: #ef4444; margin-left: 2px; }

/* Inputs */
.zbc-input {
  width: 100%;
  background: var(--zbc-card-bg);
  border: 1px solid var(--zbc-card-border);
  color: var(--zbc-text);
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s, background .15s;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
}
.zbc-input::placeholder { color: var(--zbc-muted); opacity: 0.7; }
.zbc-input:hover { border-color: #3a4252; }
.zbc-input:focus {
  outline: none;
  border-color: var(--zbc-accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.18);
  background: #1a1f29;
}
select.zbc-input {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%239aa3b2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  min-height: 46px;
  line-height: 1.5;
  text-overflow: ellipsis;
}
.zbc-wrap select.zbc-input { line-height: 1.5 !important; min-height: 46px !important; }
.zbc-input.zbc-error { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.15); }

/* Fieldset */
.zbc-fieldset {
  border: 1px dashed var(--zbc-card-border);
  border-radius: 12px;
  padding: 22px;
  margin: 0;
  display: flex; flex-direction: column; gap: 22px;
}
.zbc-legend { padding: 0 8px; color: var(--zbc-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }

/* Offer card */
.zbc-offer-card {
  background: linear-gradient(135deg, rgba(59,130,246,0.10), rgba(96,165,250,0.04));
  border: 1px solid rgba(59,130,246,0.35);
  border-radius: var(--zbc-radius);
  padding: 26px;
  text-align: center;
  position: relative;
}
.zbc-offer-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--zbc-muted); text-transform: uppercase; margin-bottom: 8px;
}
.zbc-offer-amount {
  font-size: 56px; font-weight: 900; color: var(--zbc-price);
  line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), color .25s;
}
.zbc-offer-amount.zbc-pulse { animation: zbc-pulse 0.4s ease; }
@keyframes zbc-pulse { 0%{transform:scale(1)} 40%{transform:scale(1.06)} 100%{transform:scale(1)} }
.zbc-offer-breakdown {
  margin-top: 14px;
  display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center;
  font-size: 12px; color: var(--zbc-muted);
}
.zbc-breakdown-item b { color: var(--zbc-text); }
.zbc-bonus b { color: #fbbf24; }

/* Payment */
.zbc-payment-options { display: flex; flex-direction: column; gap: 10px; }
.zbc-payment-option {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--zbc-card-bg);
  border: 1px solid var(--zbc-card-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.zbc-payment-option:hover { border-color: #3a4252; }
.zbc-payment-option input[type=radio] { accent-color: var(--zbc-accent); width: 16px; height: 16px; margin: 0; flex-shrink: 0; }
.zbc-payment-option:has(input:checked) { border-color: var(--zbc-accent); background: rgba(59,130,246,0.08); }
.zbc-payment-text { font-size: 14px; color: var(--zbc-text); font-weight: 600; }
.zbc-bonus-badge { color: #fbbf24; font-weight: 700; margin-left: 6px; }

/* Submit */
.zbc-submit {
  background: linear-gradient(135deg, var(--zbc-accent), var(--zbc-accent-2));
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 0;
  border-radius: 10px;
  padding: 16px 22px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, filter .15s;
  width: 100%;
  font-family: inherit;
  box-shadow: 0 6px 18px rgba(59,130,246,0.35);
}
.zbc-submit:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); }
.zbc-submit:active:not(:disabled) { transform: translateY(0); }
.zbc-submit:disabled { opacity: 0.6; cursor: progress; }

/* Conditions */
.zbc-conditions { font-size: 12px; color: var(--zbc-muted); line-height: 1.6; margin-top: 4px; }
.zbc-conditions p { margin: 0; }

/* Success */
.zbc-success {
  text-align: center;
  padding: 48px 24px;
  background: linear-gradient(135deg, rgba(16,185,129,0.10), rgba(59,130,246,0.05));
  border: 1px solid rgba(16,185,129,0.4);
  border-radius: var(--zbc-radius);
}
.zbc-success-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: #10b981; color: #fff; font-size: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px; font-weight: 700;
}
.zbc-success-title { font-size: 24px; font-weight: 800; margin: 0 0 8px; color: var(--zbc-text); }
.zbc-success-msg { color: var(--zbc-muted); margin: 0 0 14px; line-height: 1.55; }
.zbc-success-order { color: var(--zbc-muted); font-size: 13px; margin: 0; }
.zbc-success-order b { color: var(--zbc-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Inline form errors */
.zbc-error-msg {
  color: #ef4444;
  font-size: 12px;
  margin-top: 4px;
}

/* ============================================================
   FIX v1.0.16 — espacement vertical correct
   Cause : .zbc-col-main n'avait pas de display flex/grid donc le
   gap de .zbc-grid ne s'appliquait pas entre les .zbc-field,
   d'où l'effet "label collé au champ précédent".
   ============================================================ */
.zbc-wrap .zbc-col-main {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Neutralise le margin-bottom !important global sur les <label> */
.zbc-wrap .zbc-label,
.zbc-wrap label.zbc-payment-option,
.zbc-wrap .zbc-field > label {
  margin-bottom: 0 !important;
}

/* Respiration interne du champ (label → input) un poil plus aérée */
.zbc-wrap .zbc-field { gap: 12px; }

/* Espace au-dessus & en-dessous de l'adresse d'expédition */
.zbc-wrap .zbc-fieldset { margin: 12px 0 20px; }

/* ============================================================
   v1.0.18 — Custom radio (rond + ✓ centré) façon "Services" du configurateur Réparation
   ============================================================ */
.zbc-wrap .zbc-payment-option { position: relative; }
.zbc-wrap .zbc-payment-option input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  margin: 0; padding: 0;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
}
.zbc-wrap .zbc-payment-option::before {
  content: "";
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 2px solid var(--zbc-card-border, #2a3140);
  border-radius: 50%;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.zbc-wrap .zbc-payment-option:has(input:checked) {
  border-color: var(--zbc-accent) !important;
  background: rgba(59,130,246,0.08);
}
.zbc-wrap .zbc-payment-option:has(input:checked)::before {
  content: "✓";
  background: var(--zbc-accent);
  border-color: var(--zbc-accent);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.18);
  padding-bottom: 1px; /* optical centering of the ✓ glyph */
}

/* Vignette modèle sélectionné */
.zbc-model-image {
  margin: 16px auto 0;
  max-width: 260px;
  text-align: center;
  animation: zbcFadeIn .25s ease-out;
}
.zbc-model-image img {
  max-width: 100%;
  max-height: 220px;
  height: auto;
  width: auto;
  display: inline-block;
  object-fit: contain;
  border-radius: 8px;
}
@keyframes zbcFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   FIX v1.1.10 — .zbc-fieldset force display:flex qui surcharge
   l'attribut HTML hidden. On force display:none quand [hidden]
   est présent sur .zbc-bank-fields.
   ============================================================ */
.zbc-wrap .zbc-bank-fields[hidden] {
  display: none !important;
}

/* ============================================================
   v1.1.18 — Case à cocher de consentement à l'offre (style payment-option)
   ============================================================ */
.zbc-wrap .zbc-consent {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 18px 0 14px;
  padding: 14px 16px;
  background: var(--zbc-card-bg);
  border: 1px solid var(--zbc-card-border);
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--zbc-text);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.zbc-wrap .zbc-consent:hover { border-color: #3a4252; }
.zbc-wrap .zbc-consent input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  margin: 0; padding: 0;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
}
.zbc-wrap .zbc-consent::before {
  content: "";
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 1px;
  border: 2px solid var(--zbc-card-border, #2a3140);
  border-radius: 6px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.zbc-wrap .zbc-consent:has(input:checked) {
  border-color: var(--zbc-accent);
  background: rgba(59,130,246,0.08);
}
.zbc-wrap .zbc-consent:has(input:checked)::before {
  content: "✓";
  background: var(--zbc-accent);
  border-color: var(--zbc-accent);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.18);
  padding-bottom: 1px;
}
.zbc-wrap .zbc-consent.zbc-error { border-color: #EF4444; }
.zbc-wrap .zbc-consent .zbc-required { color: #EF4444; font-weight: 600; }
.zbc-wrap .zbc-consent a {
  color: var(--zbc-accent);
  text-decoration: underline;
}
.zbc-wrap .zbc-consent a:hover { opacity: .85; }

/* v1.2.0 — Étape Révision HW */
.zbc-wrap .zbc-rev-field.is-error,
.zbc-wrap .zbc-rev-field.zbc-error { outline: 2px solid #ef4444; outline-offset: 4px; border-radius: 10px; }
.zbc-wrap .zbc-rev-buttons {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.zbc-wrap .zbc-rev-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px; min-width: 86px;
  background: var(--zbc-card-bg, #fff);
  border: 1px solid var(--zbc-card-border, #cbd5e1);
  color: var(--zbc-text, inherit);
  border-radius: 10px; font-weight: 600; font-size: 14px;
  cursor: pointer; transition: all .15s ease;
}
.zbc-wrap .zbc-rev-btn:hover {
  border-color: var(--zbc-accent, #3b82f6);
  transform: translateY(-1px);
}
.zbc-wrap .zbc-rev-btn.is-active {
  background: var(--zbc-accent, #3b82f6);
  border-color: var(--zbc-accent, #3b82f6);
  color: #fff;
}

/* v1.2.3 — Bouton "i" d'aide (Révision / SN) — couleur amber très visible */
.zbc-wrap .zbc-help-info-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; margin-left:8px;
  border-radius:50%;
  font:800 13px/1 system-ui, -apple-system, sans-serif;
  font-style:italic;
  color:#0b0f1a;
  background:#fbbf24;
  border:1px solid #fbbf24;
  box-shadow:0 0 0 2px rgba(251,191,36,.25), 0 2px 8px -2px rgba(251,191,36,.5);
  cursor:pointer; vertical-align:middle;
  transition:transform .15s, box-shadow .15s, background .15s;
  user-select:none;
  flex-shrink:0;
}
.zbc-wrap .zbc-help-info-btn:hover{
  background:#fcd34d;
  transform:scale(1.12);
  box-shadow:0 0 0 3px rgba(251,191,36,.35), 0 4px 12px -2px rgba(251,191,36,.6);
}
.zbc-wrap .zbc-help-info-btn:focus-visible{
  outline:2px solid #fbbf24; outline-offset:2px;
}

/* Modale d'aide */
.zbc-help-modal{
  position:fixed; inset:0; z-index:100000;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  animation:zbcHelpFade .15s ease-out;
}
@keyframes zbcHelpFade{ from{opacity:0} to{opacity:1} }
.zbc-help-modal__backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(4px);
  cursor:pointer;
}
.zbc-help-modal__panel{
  position:relative;
  background:#161a22; color:#e6e9ef;
  border:1px solid #262d3a;
  border-radius:14px;
  max-width:480px; width:100%;
  max-height:85vh; overflow-y:auto;
  padding:24px 24px 20px;
  box-shadow:0 25px 60px -15px rgba(0,0,0,.7);
  animation:zbcHelpPop .2s cubic-bezier(.16,1,.3,1);
}
@keyframes zbcHelpPop{ from{opacity:0; transform:translateY(8px) scale(.97)} to{opacity:1; transform:none} }
.zbc-help-modal__close{
  position:absolute; top:10px; right:10px;
  width:32px; height:32px; border-radius:50%;
  border:0; background:transparent; color:#9aa3b2;
  font-size:24px; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.zbc-help-modal__close:hover{ background:rgba(255,255,255,.08); color:#fff; }
.zbc-help-modal__title{
  margin:0 32px 16px 0;
  font-size:1.2rem; font-weight:700; color:#fff;
}
.zbc-help-modal__media{
  margin:0 0 16px; border-radius:10px; overflow:hidden; background:rgba(0,0,0,.25);
}
.zbc-help-modal__image{
  display:block; width:100%; height:auto; max-height:360px; object-fit:contain; background:#000;
}
.zbc-help-modal__video{
  position:relative; width:100%; padding-top:56.25%; background:#000;
}
.zbc-help-modal__video iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.zbc-help-modal__body{
  color:#e6e9ef; font-size:.95rem; line-height:1.55;
}
@media (max-width:480px){
  .zbc-help-modal__panel{ padding:20px 18px 16px; }
  .zbc-help-modal__title{ font-size:1.05rem; }
}

/* ============================================================
   v1.3.0 — Hook-up des variables CSS exposées par l'admin
   (couleurs, tailles, graisses). Ces règles surchargent les
   valeurs codées en dur plus haut grâce à la cascade. Si une
   variable est vide, on retombe sur la valeur d'origine.
   ============================================================ */

/* Header */
.zbc-wrap .zbc-title {
  color: var(--zbc-title-color);
  font-size: var(--zbc-title-size);
  font-weight: var(--zbc-title-weight);
}
.zbc-wrap .zbc-subtitle {
  color: var(--zbc-subtitle-color);
  font-size: var(--zbc-subtitle-size);
}

/* Labels & helps */
.zbc-wrap .zbc-label {
  color: var(--zbc-label-color);
  font-size: var(--zbc-label-size);
  font-weight: var(--zbc-label-weight);
}
.zbc-wrap .zbc-req,
.zbc-wrap .zbc-required { color: var(--zbc-req-color) !important; }
.zbc-wrap .zbc-help {
  color: var(--zbc-help-color);
  font-size: var(--zbc-help-size);
}

/* Inputs */
.zbc-wrap .zbc-input {
  background: var(--zbc-input-bg);
  border-color: var(--zbc-input-border);
  color: var(--zbc-input-text);
  font-size: var(--zbc-input-size);
  border-radius: var(--zbc-input-radius);
}
.zbc-wrap .zbc-input:focus {
  border-color: var(--zbc-input-focus-border);
  background: var(--zbc-input-focus-bg);
}

/* Fieldset / legend */
.zbc-wrap .zbc-fieldset { border-color: var(--zbc-fieldset-border); }
.zbc-wrap .zbc-legend   { color: var(--zbc-legend-color); }

/* Offer card */
.zbc-wrap .zbc-offer-card {
  background: linear-gradient(135deg, var(--zbc-offer-bg-from), var(--zbc-offer-bg-to));
  border-color: var(--zbc-offer-border);
}
.zbc-wrap .zbc-offer-label {
  color: var(--zbc-offer-label-color);
  font-size: var(--zbc-offer-label-size);
}
.zbc-wrap .zbc-offer-amount {
  color: var(--zbc-offer-amount-color);
  font-size: var(--zbc-offer-amount-size);
  font-weight: var(--zbc-offer-amount-weight);
}
.zbc-wrap .zbc-offer-breakdown { color: var(--zbc-breakdown-color); }
.zbc-wrap .zbc-bonus b         { color: var(--zbc-bonus-color); }

/* Payment cards */
.zbc-wrap .zbc-payment-option {
  background: var(--zbc-pay-bg);
  border-color: var(--zbc-pay-border);
}
.zbc-wrap .zbc-payment-text {
  color: var(--zbc-pay-text-color);
  font-size: var(--zbc-pay-text-size);
  font-weight: var(--zbc-pay-text-weight);
}
.zbc-wrap .zbc-payment-option:has(input:checked) {
  background: var(--zbc-pay-selected-bg) !important;
  border-color: var(--zbc-pay-selected-border) !important;
}
.zbc-wrap .zbc-bonus-badge { color: var(--zbc-pay-bonus-badge); }

/* Submit */
.zbc-wrap .zbc-submit {
  background: linear-gradient(135deg, var(--zbc-submit-bg-from), var(--zbc-submit-bg-to));
  color: var(--zbc-submit-color);
  font-size: var(--zbc-submit-size);
  font-weight: var(--zbc-submit-weight);
  border-radius: var(--zbc-submit-radius);
  box-shadow: 0 6px 18px var(--zbc-submit-shadow);
}

/* Conditions */
.zbc-wrap .zbc-conditions {
  color: var(--zbc-cond-color);
  font-size: var(--zbc-cond-size);
}

/* Success */
.zbc-wrap .zbc-success {
  background: linear-gradient(135deg, var(--zbc-success-bg-from), var(--zbc-success-bg-to));
  border-color: var(--zbc-success-border);
}
.zbc-wrap .zbc-success-icon  { background: var(--zbc-success-icon-bg); color: var(--zbc-success-icon-color); }
.zbc-wrap .zbc-success-title { color: var(--zbc-success-title-color); }
.zbc-wrap .zbc-success-msg,
.zbc-wrap .zbc-success-order { color: var(--zbc-success-msg-color); }

/* Info "i" button — surcharge l'amber codé en dur */
.zbc-wrap .zbc-help-info-btn {
  background: var(--zbc-info-bg) !important;
  color: var(--zbc-info-color) !important;
  border-color: var(--zbc-info-border) !important;
  box-shadow: 0 0 0 2px var(--zbc-info-glow), 0 2px 8px -2px var(--zbc-info-glow) !important;
  width: var(--zbc-info-size) !important;
  height: var(--zbc-info-size) !important;
}

/* ----- Modale d'aide « i » : montée en gamme + style éditable -----
   Les variables --zbc-modal-* sont définies sur :root par le template
   (la modale étant rendue hors de .zbc-wrap par le JS, on les expose
   globalement pour garantir l'application). */
.zbc-help-modal__backdrop { background: var(--zbc-modal-backdrop, rgba(0,0,0,.65)) !important; }
.zbc-help-modal__panel {
  background: var(--zbc-modal-bg, #1a1f2e) !important;
  background-color: var(--zbc-modal-bg, #1a1f2e) !important;
  border-color: var(--zbc-modal-border, rgba(255,255,255,0.1)) !important;
  border-radius: var(--zbc-modal-radius, 16px) !important;
  padding: 28px 28px 24px;
}
.zbc-help-modal__title {
  color: var(--zbc-modal-title-color, #fff);
  font-size: var(--zbc-modal-title-size, 20px);
  font-weight: var(--zbc-modal-title-weight, 800);
  margin: 0 32px 6px 0;
  letter-spacing: -0.01em;
}
.zbc-help-modal__subtitle {
  color: var(--zbc-modal-subtitle-color, #9aa3b2);
  font-size: var(--zbc-modal-subtitle-size, 14px);
  font-weight: var(--zbc-modal-subtitle-weight, 600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 18px;
}
.zbc-help-modal__body {
  color: var(--zbc-modal-body-color, #e6e9ef);
  font-size: var(--zbc-modal-body-size, 15px);
}
.zbc-help-modal__close { color: var(--zbc-modal-close-color, #9aa3b2); }

/* ============================================================
   v1.3.3 — Case « Je ne sais pas » harmonisée avec le consentement
   ============================================================ */
.zbc-wrap .zbc-rev-unknown {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 6px;
  padding: 12px 14px;
  background: var(--zbc-card-bg);
  border: 1px solid var(--zbc-card-border);
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--zbc-text);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.zbc-wrap .zbc-rev-unknown:hover { border-color: #3a4252; }
.zbc-wrap .zbc-rev-unknown input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  margin: 0; padding: 0;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
}
.zbc-wrap .zbc-rev-unknown::before {
  content: "";
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 2px solid var(--zbc-card-border, #2a3140);
  border-radius: 6px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.zbc-wrap .zbc-rev-unknown:has(input:checked) {
  border-color: var(--zbc-accent);
  background: rgba(59,130,246,0.08);
}
.zbc-wrap .zbc-rev-unknown:has(input:checked)::before {
  content: "✓";
  background: var(--zbc-accent);
  border-color: var(--zbc-accent);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.18);
  padding-bottom: 1px;
}

/* v1.3.4 — Cloudflare Turnstile */
.zbc-turnstile-field{margin:14px 0 6px;}
.zbc-turnstile{display:flex;justify-content:flex-start;min-height:65px;}