/* Visuel en direct des configurateurs Abri Cerisier
   Ordinateur (≥ 1100 px)          : colonne de droite qui suit le défilement.
   Tablette paysage (900–1099 px)  : panneau fixe à droite, la page se recale à côté.
   Tablette portrait et téléphone  : visuel ancré en bas (compact), repliable en bouton, plein écran à la demande. */
.cer-plan, .cer-plan-fab {
  --cer-olive: #515136; --cer-olive-dk: #3d3d28; --cer-sable: #f4f2ec; --cer-ligne: #e3dfd3;
  --cer-texte: #2b2b22; --cer-doux: #77755f; --cer-alerte: #9a3412;
  box-sizing: border-box;
}
.cer-plan *, .cer-plan *::before, .cer-plan *::after { box-sizing: border-box; }

/* ── Panneau ── */
.cer-plan__in { background: #fff; border: 1px solid var(--cer-ligne); border-radius: 14px; box-shadow: 0 10px 30px rgba(43, 43, 34, .08); padding: 18px 18px 14px; color: var(--cer-texte); }
.cer-plan__head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
.cer-plan__heading { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.cer-plan__kicker { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cer-doux); }
.cer-plan__title { font-size: 19px; line-height: 1.25; font-weight: 600; color: var(--cer-olive-dk); }
.cer-plan__expand, .cer-plan__close { display: none; flex: 0 0 auto; min-height: 40px; border: 0; cursor: pointer; font: inherit; color: var(--cer-olive-dk); }
.cer-plan__expand { padding: 0 12px; border-radius: 20px; background: var(--cer-sable); font-size: 13px; font-weight: 600; white-space: nowrap; }
.cer-plan__close { width: 40px; background: transparent; font-size: 26px; line-height: 1; }
.cer-plan__tabs { display: flex; gap: 4px; background: var(--cer-sable); border-radius: 10px; padding: 4px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.cer-plan__tabs::-webkit-scrollbar { display: none; }
.cer-plan__tabs button { flex: 1 0 auto; min-height: 36px; padding: 6px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--cer-doux); font: inherit; font-size: 13px; cursor: pointer; transition: background .15s, color .15s; }
.cer-plan__tabs button.on { background: #fff; color: var(--cer-olive-dk); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.cer-plan__stage { position: relative; background: linear-gradient(180deg, #f8f8f5 0%, #fdfdfb 100%); border: 1px solid #efede6; border-radius: 10px; overflow: hidden; }
.cer-plan__stage svg { display: block; width: 100%; height: auto; aspect-ratio: 380 / 280; }
.cer-plan__stage svg[data-v="plan"] { aspect-ratio: 480 / 340; }
.cer-plan__empty { padding: 48px 20px; text-align: center; color: var(--cer-doux); font-size: 14px; line-height: 1.5; }
.cer-plan__dims { display: grid; grid-template-columns: 1fr auto; margin: 14px 0 0; font-size: 13.5px; }
.cer-plan__dims dt, .cer-plan__dims dd { margin: 0; padding: 7px 0; border-bottom: 1px solid #f0eee7; }
.cer-plan__dims dt { color: var(--cer-doux); }
.cer-plan__dims dd { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 12px; }
.cer-plan__warn p { margin: 10px 0 0; padding: 8px 10px; font-size: 12.5px; line-height: 1.4; color: var(--cer-alerte); background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; }
.cer-plan__place { margin-top: 12px; border-top: 1px solid var(--cer-ligne); padding-top: 10px; }
.cer-plan__place summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--cer-olive-dk); min-height: 40px; display: flex; align-items: center; list-style: none; }
.cer-plan__place summary::-webkit-details-marker { display: none; }
.cer-plan__place summary::after { content: '+'; margin-left: auto; font-size: 20px; font-weight: 400; }
.cer-plan__place[open] summary::after { content: '−'; }
.cer-plan__pl { padding: 10px 0; border-bottom: 1px dashed var(--cer-ligne); display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; font-size: 13px; }
.cer-plan__pl .n { grid-column: 1 / -1; font-weight: 600; color: var(--cer-texte); }
.cer-plan__pl label { display: flex; flex-direction: column; gap: 4px; color: var(--cer-doux); }
.cer-plan__pl select { min-height: 44px; border: 1px solid var(--cer-ligne); border-radius: 8px; padding: 0 8px; background: #fff; font: inherit; font-size: 14px; color: var(--cer-texte); }
.cer-plan__pl input[type=range] { width: 100%; min-height: 44px; accent-color: var(--cer-olive); }
.cer-plan__hint { font-size: 13px; color: var(--cer-doux); margin: 8px 0 0; line-height: 1.45; }
.cer-plan__note { font-size: 11.5px; color: var(--cer-doux); margin: 12px 0 0; line-height: 1.45; }
.cer-plan-fab { display: none; }
.cer-plan__title .cer-s { display: none; }

/* Formulaire du site à côté du panneau : petits groupes de choix sur 3 colonnes, libellés sans coupure */
.cer-plan-on .wapf-field-container[style*="width:33"] .wapf-swatch-wrapper,
.cer-plan-on .wapf-field-container[style*="width: 33"] .wapf-swatch-wrapper { --wapf-cols: 3; --wapf-cols-t: 3; --wapf-cols-m: 3; }
.cer-plan-on .wapf-swatch-label { overflow-wrap: normal; word-break: normal; hyphens: auto; }

/* ── Ordinateur ── */
@media (min-width: 1100px) {
  .cer-plan-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) clamp(360px, 34vw, 520px); column-gap: 32px; align-items: start; }
  .cer-plan-grid > *:not(.cer-plan) { grid-column: 1; min-width: 0; }
  .cer-plan-grid > .cer-plan { grid-column: 2; grid-row: 1 / span 60; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; scrollbar-width: thin; }
  .admin-bar .cer-plan-grid > .cer-plan { top: 56px; }
  .cer-plan-on .wapf-swatch-label { font-size: 15px; line-height: 1.3; }
}

/* ── Tablette paysage : panneau fixe à droite ── */
@media (min-width: 900px) and (max-width: 1099.98px) and (orientation: landscape) {
  body.cer-plan-on { padding-right: clamp(320px, 36vw, 400px); }
  .cer-plan { position: fixed; top: 0; right: 0; bottom: 0; width: clamp(320px, 36vw, 400px); z-index: 100000; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); overflow-y: auto; background: #f7f6f2; border-left: 1px solid var(--cer-ligne); }
  .cer-plan__in { box-shadow: none; padding: 14px; }
  .cer-plan__title { font-size: 17px; }
  .cer-plan-on .wapf-swatch-label { font-size: 15px; line-height: 1.3; }
}

/* ── Tablette portrait et téléphone : visuel ancré en bas ── */
@media (max-width: 899.98px), (max-width: 1099.98px) and (orientation: portrait) {
  .cer-plan { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100000; padding: 0 8px calc(8px + env(safe-area-inset-bottom)); pointer-events: none; transition: transform .25s ease; }
  .cer-plan__in { pointer-events: auto; max-width: 720px; margin: 0 auto; padding: 10px 12px 10px; border-radius: 16px; box-shadow: 0 -6px 28px rgba(43, 43, 34, .18); }
  .cer-plan__head { align-items: center; margin-bottom: 8px; }
  .cer-plan__kicker { display: none; }
  .cer-plan__title { font-size: 15px; }
  .cer-plan__title .cer-l { display: none; } .cer-plan__title .cer-s { display: inline; }
  body.cer-plan-open .cer-plan__title .cer-l { display: inline; } body.cer-plan-open .cer-plan__title .cer-s { display: none; }
  .cer-plan__expand, .cer-plan__close { display: block; }
  .cer-plan__tabs, .cer-plan__dims, .cer-plan__place, .cer-plan__note { display: none; }
  .cer-plan__stage { cursor: zoom-in; }
  .cer-plan__stage svg { max-height: 30vh; }
  .cer-plan__warn p { margin-top: 6px; font-size: 12px; }
  /* replié : simple bouton */
  body.cer-plan-min .cer-plan { transform: translateY(115%); }
  .cer-plan-fab { position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 100001; min-height: 48px; padding: 0 20px; border: 0; border-radius: 24px; background: var(--cer-olive); color: #fff; font: inherit; font-size: 15px; font-weight: 600; box-shadow: 0 8px 22px rgba(43, 43, 34, .3); cursor: pointer; }
  body.cer-plan-min .cer-plan-fab { display: block; }
  /* plein écran : toutes les vues, les cotes et le placement */
  body.cer-plan-open { overflow: hidden; }
  body.cer-plan-open .cer-plan { top: 0; padding: 0; background: rgba(30, 30, 24, .5); transform: none; }
  body.cer-plan-open .cer-plan__in { height: 100%; border-radius: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: calc(12px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); box-shadow: none; }
  body.cer-plan-open .cer-plan__stage { cursor: default; }
  body.cer-plan-open .cer-plan__stage svg { max-height: none; }
  body.cer-plan-open .cer-plan__tabs { display: flex; }
  body.cer-plan-open .cer-plan__dims { display: grid; }
  body.cer-plan-open .cer-plan__place, body.cer-plan-open .cer-plan__note, body.cer-plan-open .cer-plan__kicker { display: block; }
  body.cer-plan-open .cer-plan__expand { display: none; }
  body.cer-plan-open .cer-plan__title { font-size: 18px; }
  /* plein écran : le dessin reste visible en haut pendant qu'on règle les portes et fenêtres juste dessous */
  body.cer-plan-open .cer-plan__vis { position: sticky; top: calc(-12px - env(safe-area-inset-top)); z-index: 3; background: #fff; margin: 0 -16px; padding: 8px 16px 10px; box-shadow: 0 6px 12px -10px rgba(30, 30, 24, .35); }
  body.cer-plan-open .cer-plan__stage svg { max-height: 40vh; }
  body.cer-plan-open .cer-plan__place { margin-top: 6px; }
}
@media (max-width: 599.98px) { .cer-plan__stage svg { max-height: 24vh; } }
@media (prefers-reduced-motion: reduce) { .cer-plan, .cer-plan__tabs button { transition: none; } }
@media print { .cer-plan, .cer-plan-fab { display: none !important; } }

/* ── Blocs « PRIX total » et « Afficher le détail… » du site : remplacés par le panneau (prix en tête, détail à l'agrandissement).
   Masqués seulement : les champs restent dans le formulaire et partent au panier comme avant. */
.cer-plan-on .blocdimpr1, .cer-plan-on .blocdimpr { display: none !important; }

/* Prix total en tête du panneau */
.cer-plan__prix { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 12px 16px; border-radius: 12px; background: var(--cer-olive); color: #fff; }
.cer-plan__prix[hidden] { display: none !important; }
.cer-plan__prix span { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .85; line-height: 1.3; }
.cer-plan__prix strong { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cer-plan__prix strong small { font-size: 12px; font-weight: 400; opacity: .85; margin-left: 4px; }
/* Détail de la configuration (choix et prix, lus dans le configurateur) */
.cer-plan__detail { margin-top: 12px; border-top: 1px solid var(--cer-ligne); padding-top: 10px; }
.cer-plan__detail summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--cer-olive-dk); min-height: 40px; display: flex; align-items: center; list-style: none; }
.cer-plan__detail summary::-webkit-details-marker { display: none; }
.cer-plan__detail summary::after { content: '+'; margin-left: auto; font-size: 20px; font-weight: 400; }
.cer-plan__detail[open] summary::after { content: '−'; }
.cer-plan__lignes { font-size: 13px; }
.cer-plan__lignes .g { margin: 10px 0 2px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cer-doux); }
.cer-plan__lignes .l { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 7px 0; border-bottom: 1px solid #f0eee7; }
.cer-plan__lignes .l .k { color: var(--cer-doux); font-size: 12px; }
.cer-plan__lignes .l .v { grid-column: 1; color: var(--cer-texte); line-height: 1.35; }
.cer-plan__lignes .l .p { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--cer-olive-dk); }
.cer-plan__lignes .tot { display: flex; justify-content: space-between; padding: 10px 0 2px; font-weight: 700; font-size: 14px; color: var(--cer-olive-dk); }
/* Visuel ancré (tablette portrait, téléphone) : le prix remplace le titre dans la barre */
@media (max-width: 899.98px), (max-width: 1099.98px) and (orientation: portrait) {
  .cer-plan__prix { margin: 0 0 8px; padding: 8px 12px; }
  .cer-plan__prix span { font-size: 10.5px; }
  .cer-plan__prix strong { font-size: 19px; }
  .cer-plan__detail { display: none; }
  body.cer-plan-open .cer-plan__detail { display: block; }
}
/* Visuel ancré : une seule ligne en tête = prix + Agrandir + réduire */
@media (max-width: 899.98px), (max-width: 1099.98px) and (orientation: portrait) {
  body:not(.cer-plan-open) .cer-plan__in { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 6px; align-items: start; }
  body:not(.cer-plan-open) .cer-plan__in > * { grid-column: 1 / -1; }
  body:not(.cer-plan-open) .cer-plan__prix { grid-column: 1; grid-row: 1; }
  body:not(.cer-plan-open) .cer-plan__head { display: contents; }
  body:not(.cer-plan-open) .cer-plan__heading { display: none; }
  body:not(.cer-plan-open) .cer-plan__expand { grid-column: 2; grid-row: 1; margin-top: 3px; }
  body:not(.cer-plan-open) .cer-plan__close { grid-column: 3; grid-row: 1; }
  .cer-plan__prix { cursor: zoom-in; }
  body.cer-plan-open .cer-plan__prix { cursor: default; }
}
@media (max-width: 899.98px), (max-width: 1099.98px) and (orientation: portrait) {
  body:not(.cer-plan-open) .cer-plan__prix span { display: none; }
  body:not(.cer-plan-open) .cer-plan__prix { justify-content: flex-start; }
  /* ancré : prix + dessin seulement (les photos sont dans le plein écran) ; jamais plus haut que l'écran, le × reste visible */
  body:not(.cer-plan-open) .cer-plan__real { display: none; }
  body:not(.cer-plan-open) .cer-plan__in { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Refonte du formulaire (version test, avec ?apercu=plan) : étapes en cartes, textes à taille
   raisonnable, options en cartes homogènes avec coche et prix en pastille, oui / non en pilules.
   Le formulaire du site (WAPF) n'est pas modifié : seulement sa présentation.
   ════════════════════════════════════════════════════════════════════════════ */
.cer-plan-on form.cart {
  --cf-olive: #515136; --cf-olive-dk: #3d3d28; --cf-sable: #f5f3ee; --cf-sable2: #ece9e0; --cf-ligne: #e4e0d5;
  --cf-texte: #23251b; --cf-doux: #77755f;
  font-size: 15px; line-height: 1.45; color: var(--cf-texte); counter-reset: cfstep;
}
/* Étapes : cartes blanches numérotées */
.cer-plan-on .wapf-section.TITRE, .cer-plan-on .wapf-section.TITRE2 {
  background: #fff !important; border: 1px solid var(--cf-ligne) !important; border-radius: 16px !important;
  padding: 22px 22px 16px !important; margin: 0 0 14px !important; box-shadow: 0 1px 2px rgba(35, 37, 27, .04);
  counter-increment: cfstep;
}
.cer-plan-on form.cart .wapf-field-label { font-size: 15px !important; font-weight: 600 !important; color: var(--cf-texte); line-height: 1.35; margin: 0 0 10px; }
.cer-plan-on form.cart .sTITRE .wapf-field-label { font-size: 14px !important; font-weight: 500 !important; color: var(--cf-doux); }
.cer-plan-on form.cart .wapf-field-label.cer-step-h { display: flex; align-items: center; gap: 12px; font-size: 17.5px !important; font-weight: 600 !important; color: var(--cf-olive-dk); margin-bottom: 14px; }
.cer-plan-on form.cart .wapf-field-label.cer-step-h::before {
  content: counter(cfstep); flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--cf-olive); color: #fff; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
}
.cer-plan-on form.cart .wapf-field-description { font-size: 13px; color: var(--cf-doux); line-height: 1.45; margin-top: 8px; }
.cer-plan-on form.cart .wapf-field-container { margin-bottom: 16px; }
.cer-plan-on form.cart .wapf-field-container .wapf-field-container:last-child { margin-bottom: 4px; }

/* Options avec image : cartes homogènes, coche de sélection */
.cer-plan-on .wapf-image-swatch-wrapper { gap: 10px !important; }
.cer-plan-on .wapf-swatch--image { position: relative; border-radius: 12px; }
.cer-plan-on .wapf-swatch--image.apf-pick-box, .cer-plan-on .wapf-swatch--image .apf-pick-box {
  border: 1.5px solid var(--cf-ligne) !important; border-radius: 12px; background: #fff; padding: 8px 8px 10px; height: 100%;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cer-plan-on .wapf-swatch--image:hover.apf-pick-box, .cer-plan-on .wapf-swatch--image:hover .apf-pick-box { border-color: #c9c3b2 !important; box-shadow: 0 6px 16px rgba(35, 37, 27, .08); transform: translateY(-1px); }
.cer-plan-on .wapf-swatch--image.wapf-checked.apf-pick-box, .cer-plan-on .wapf-swatch--image.wapf-checked .apf-pick-box {
  border-color: var(--cf-olive) !important; box-shadow: inset 0 0 0 1px var(--cf-olive), 0 6px 16px rgba(81, 81, 54, .14); background: #fbfaf6;
}
.cer-plan-on .wapf-swatch--image.wapf-checked::after {
  content: '✓'; position: absolute; top: 7px; right: 7px; z-index: 2; width: 22px; height: 22px; border-radius: 50%;
  background: var(--cf-olive); color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.cer-plan-on .wapf-swatch--image img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 8px; background: var(--cf-sable); }
.cer-plan-on form.cart .wapf-swatch-label { font-size: 13.5px !important; line-height: 1.3; margin-top: 8px; color: var(--cf-texte); }
/* Prix des options : pastille « +480 € » / « Inclus » */
.cer-plan-on form.cart .wapf-pricing-hint.cer-pill {
  display: inline-block; margin: 5px 0 0; padding: 2px 9px; border-radius: 999px; background: var(--cf-sable2);
  color: var(--cf-olive-dk); font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.cer-plan-on form.cart .wapf-pricing-hint.cer-pill--0 { background: transparent; color: var(--cf-doux); font-weight: 500; padding: 0; }

/* Choix sans image (oui / non, sur-mesure…) : pilules */
.cer-plan-on .wapf-swatch-wrapper:not(.wapf-image-swatch-wrapper), .cer-plan-on .wapf-radios { display: flex !important; flex-wrap: wrap; gap: 8px; }
.cer-plan-on .wapf-swatch--text, .cer-plan-on .wapf-radio label.wapf-input-label {
  display: inline-flex !important; align-items: center; gap: 6px; min-height: 44px; padding: 9px 18px !important;
  border: 1.5px solid var(--cf-ligne) !important; border-radius: 999px !important; background: #fff !important;
  color: var(--cf-texte) !important; font-size: 14px !important; font-weight: 500; cursor: pointer; transition: border-color .15s, background .15s;
}
.cer-plan-on .wapf-swatch--text:hover, .cer-plan-on .wapf-radio label.wapf-input-label:hover { border-color: #c9c3b2 !important; }
.cer-plan-on .wapf-swatch--text.wapf-checked, .cer-plan-on .wapf-radio.wapf-checked label.wapf-input-label {
  background: var(--cf-olive) !important; border-color: var(--cf-olive) !important; color: #fff !important;
}
.cer-plan-on .wapf-radio .wapf-custom { display: none !important; }
.cer-plan-on .wapf-radio .wapf-pricing-hint.cer-pill, .cer-plan-on .wapf-swatch--text .wapf-pricing-hint.cer-pill { margin: 0; }
.cer-plan-on .wapf-swatch--text.wapf-checked .cer-pill, .cer-plan-on .wapf-radio.wapf-checked .cer-pill { background: rgba(255, 255, 255, .18); color: #fff; }

/* Guides comparatifs : un simple lien */
.cer-plan-on .cerisier-toggle { margin-bottom: 8px !important; }
.cer-plan-on .cerisier-toggle .wapf-swatch--text, .cer-plan-on .cerisier-toggle .wapf-choice label {
  min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important;
  color: var(--cf-olive) !important; font-size: 13px !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.cer-plan-on .cerisier-toggle .wapf-swatch--text::before { content: 'ⓘ'; margin-right: 6px; text-decoration: none; display: inline-block; }

/* Listes et nombres */
.cer-plan-on form.cart select.wapf-input, .cer-plan-on form.cart input.wapf-input[type=number], .cer-plan-on form.cart input.wapf-input[type=text] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 48px; padding: 0 40px 0 14px; border: 1.5px solid var(--cf-ligne) !important;
  border-radius: 12px !important; background: #fff; font-size: 15px; color: var(--cf-texte); box-shadow: none;
}
.cer-plan-on form.cart select.wapf-input {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23515136' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 14px center;
}
.cer-plan-on form.cart select.wapf-input:focus, .cer-plan-on form.cart input.wapf-input:focus { border-color: var(--cf-olive) !important; outline: none; box-shadow: 0 0 0 3px rgba(81, 81, 54, .12); }
/* Dimensions : − / + autour de la liste */
.cer-plan-on .cer-stepper { display: flex; align-items: stretch; gap: 6px; }
.cer-plan-on .cer-stepper select.wapf-input { flex: 1 1 auto; text-align: center; text-align-last: center; padding: 0 12px; background-image: none !important; font-weight: 600; }
.cer-plan-on .cer-stepper__b {
  flex: 0 0 48px; height: 48px; border: 0; border-radius: 12px; background: var(--cf-sable2); color: var(--cf-olive-dk);
  font-size: 22px; line-height: 1; cursor: pointer; transition: background .15s;
}
.cer-plan-on .cer-stepper__b:hover { background: #dfdbcf; }
.cer-plan-on .cer-stepper__b:active { transform: scale(.96); }

/* Menuiseries : ajout et suppression */
.cer-plan-on form.cart .wapf-add-clone {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px;
  border: 1.5px dashed var(--cf-olive) !important; border-radius: 12px !important; background: #fff !important; color: var(--cf-olive-dk) !important;
  font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
}
.cer-plan-on form.cart .wapf-add-clone::before { content: '+'; font-size: 20px; font-weight: 400; }
.cer-plan-on form.cart .wapf-add-clone:first-letter { text-transform: uppercase; }
.cer-plan-on form.cart .wapf-del-clone { background: transparent !important; border: 0 !important; color: #9a3412 !important; font-size: 13px !important; text-decoration: underline; text-transform: none !important; padding: 4px 0 !important; }

/* Panier : pas de quantité (un configurateur = un ouvrage), bouton principal */
.cer-plan-on form.cart .quantity { display: none !important; }
.cer-plan-on form.cart .single_add_to_cart_button {
  width: 100% !important; min-height: 56px; border-radius: 14px !important; background: var(--cf-olive) !important; border-color: var(--cf-olive) !important;
  font-size: 16px !important; font-weight: 600 !important; letter-spacing: .02em !important; text-transform: none !important;
}
.cer-plan-on form.cart .single_add_to_cart_button:hover { background: var(--cf-olive-dk) !important; }

/* Panneau : variation du prix et réalisations */
.cer-plan__prix { position: relative; }
.cer-plan__delta { position: absolute; right: 12px; top: -12px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff; background: #2f6f3e; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); animation: cerDelta .25s ease-out; transition: opacity .5s, transform .5s; pointer-events: none; }
.cer-plan__delta.down { background: #8a4b2a; }
.cer-plan__delta.out { opacity: 0; transform: translateY(-6px); }
@keyframes cerDelta { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cer-plan__real { margin-top: 14px; }
.cer-plan__real:empty { display: none; }
.cer-plan__realh { font-size: 14px; font-weight: 600; color: var(--cer-olive-dk); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.cer-plan__realh span { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--cer-olive); padding: 2px 8px; border-radius: 999px; }
.cer-plan__realmain { margin: 0; }
.cer-plan__realmain .z { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.cer-plan__realmain img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.cer-plan__realmain figcaption { font-size: 12.5px; color: var(--cer-texte); margin-top: 6px; font-weight: 500; }
.cer-plan__realw { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--cer-doux); }
.cer-plan__realw span { color: var(--cer-olive-dk); font-weight: 600; }
.cer-plan__realth { display: flex; gap: 6px; margin-top: 8px; }
.cer-plan__realth button { flex: 1 1 0; padding: 0; border: 2px solid transparent; border-radius: 8px; background: none; cursor: pointer; overflow: hidden; }
.cer-plan__realth button.on { border-color: var(--cer-olive); }
.cer-plan__realth img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cer-plan__realn { font-size: 11.5px; color: var(--cer-doux); margin: 6px 0 0; line-height: 1.4; }
.cer-plan__realn a { color: var(--cer-olive); font-weight: 600; }
.cer-lb { position: fixed; inset: 0; z-index: 200000; background: rgba(20, 20, 16, .88); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; cursor: zoom-out; }
.cer-lb img { max-width: 100%; max-height: 82vh; border-radius: 10px; }
.cer-lb p { color: #fff; margin: 12px 0 0; font-size: 14px; text-align: center; }
.cer-lb button { position: absolute; top: 12px; right: 16px; width: 44px; height: 44px; border: 0; background: rgba(255, 255, 255, .15); color: #fff; font-size: 26px; border-radius: 50%; cursor: pointer; }

/* Téléphone : cartes plus compactes, 3 vignettes par ligne */
@media (max-width: 767.98px) {
  .cer-plan-on .wapf-section.TITRE, .cer-plan-on .wapf-section.TITRE2 { padding: 16px 14px 10px !important; border-radius: 14px !important; margin-bottom: 12px !important; }
  .cer-plan-on .wapf-image-swatch-wrapper { --wapf-cols-m: 3 !important; gap: 8px !important; }
  .cer-plan-on .wapf-swatch--image.apf-pick-box, .cer-plan-on .wapf-swatch--image .apf-pick-box { padding: 6px 6px 8px; }
  .cer-plan-on form.cart .wapf-swatch-label { font-size: 12.5px !important; }
  .cer-plan-on form.cart .wapf-field-label.cer-step-h { font-size: 16px !important; gap: 10px; }
  .cer-plan-on form.cart .wapf-field-label.cer-step-h::before { flex-basis: 26px; width: 26px; height: 26px; font-size: 13px; }
  .cer-plan-on .wapf-swatch--text, .cer-plan-on .wapf-radio label.wapf-input-label { padding: 8px 14px !important; font-size: 13.5px !important; }
  .cer-plan__real { display: none; }
  body.cer-plan-open .cer-plan__real { display: block; }
}

/* Ajustements après essai */
.cer-plan-on .wapf-radio input[type=radio], .cer-plan-on .wapf-swatch--text input[type=radio] { position: absolute !important; opacity: 0 !important; width: 1px; height: 1px; pointer-events: none; }
/* « Comparer les options » : en haut à droite de la carte, à côté du titre de l'étape */
.cer-plan-on .wapf-section.TITRE, .cer-plan-on .wapf-section.TITRE2 { position: relative; }
.cer-plan-on .wapf-section > .cerisier-toggle { position: absolute !important; top: 25px; right: 22px; width: auto !important; margin: 0 !important; z-index: 1; }
.cer-plan-on .wapf-section:has(> .cerisier-toggle) .cer-step-h { padding-right: 170px; }
.cer-plan-on .stepper-fix { display: none; }
@media (max-width: 767.98px) {
  .cer-plan-on .wapf-section > .cerisier-toggle { top: -11px; right: 12px; background: #fff; padding: 0 6px; }
  .cer-plan-on .wapf-section:has(> .cerisier-toggle) .cer-step-h { padding-right: 0; }
  .cer-plan-on .cer-stepper { gap: 4px; }
  .cer-plan-on .cer-stepper__b { flex: 0 0 38px; height: 46px; font-size: 20px; }
  .cer-plan-on .cer-stepper select.wapf-input { flex: 1 1 0; min-width: 0; width: auto; padding: 0 2px; font-size: 16px; }
}
/* boutons − / + : le thème impose largeur et marges aux boutons */
.cer-plan-on .cer-stepper__b { min-width: 0 !important; padding: 0 !important; margin: 0 !important; width: 48px; box-shadow: none !important; }
.cer-plan-on .cer-stepper select.wapf-input { min-width: 0 !important; margin: 0 !important; }
@media (max-width: 767.98px) {
  .cer-plan-on .cer-stepper__b { width: 36px !important; flex: 0 0 36px !important; }
  .cer-plan-on .cer-stepper select.wapf-input { padding: 0 2px !important; }
  .cer-plan-on .wapf-section > .cerisier-toggle { top: 19px; right: 14px; padding: 0; background: transparent; }
  .cer-plan-on .wapf-section:has(> .cerisier-toggle) .cer-step-h { padding-right: 104px; }
  .cer-plan-on .cerisier-toggle .wapf-swatch--text { font-size: 12px !important; }
}
@media (max-width: 767.98px) {
  .cer-plan-on .wapf-image-swatch-wrapper:has(> div.wapf-swatch:nth-of-type(4):last-child) { --wapf-cols-m: 2 !important; } /* 4 choix : 2 × 2 */
  .cer-plan-on .wapf-image-swatch-wrapper:has(> div.wapf-swatch:nth-of-type(2):last-child) { --wapf-cols-m: 2 !important; }
}
@media (max-width: 767.98px) {
  /* questions en tiers de largeur (Type / Matière / Style des menuiseries…) : l'une sous l'autre sur téléphone */
  .cer-plan-on .wapf-field-container[style*="width:33"], .cer-plan-on .wapf-field-container[style*="width: 33"] { width: 100% !important; }
  .cer-plan-on .wapf-field-container[style*="width:33"] .wapf-image-swatch-wrapper, .cer-plan-on .wapf-field-container[style*="width: 33"] .wapf-image-swatch-wrapper { --wapf-cols-m: 3 !important; }
}

/* Vignettes d'options : jamais moins de 120 px de large (la colonne du formulaire est étroite à côté du visuel) ;
   les grilles déjà larges de WAPF (2 ou 3 colonnes) sont conservées */
.cer-plan-on .wapf-swatch--image .wapf-swatch-label { hyphens: manual; -webkit-hyphens: manual; }
@media (min-width: 768px) {
  .cer-plan-on .wapf-image-swatch-wrapper { grid-template-columns: repeat(auto-fill, minmax(max(var(--cer-vmin, 120px), calc((100% - 10px * (var(--wapf-cols, 4) - 1)) / var(--wapf-cols, 4))), 1fr)) !important; }
  /* Type / Matière / Style : une question par ligne, mêmes vignettes que les autres */
  .cer-plan-on .wapf-field-container[style*="width:33"]:has(.wapf-image-swatch-wrapper),
  .cer-plan-on .wapf-field-container[style*="width: 33"]:has(.wapf-image-swatch-wrapper) { width: 100% !important; }
  .cer-plan-on .wapf-field-container[style*="width:33"] .wapf-image-swatch-wrapper,
  .cer-plan-on .wapf-field-container[style*="width: 33"] .wapf-image-swatch-wrapper { --wapf-cols: 6 !important; }
  /* deux choix seulement (Matière, Style) : deux questions côte à côte, deux vignettes chacune */
  .cer-plan-on .wapf-field-container[style*="width:33"]:has(.wapf-image-swatch-wrapper > .wapf-swatch:nth-of-type(2):last-of-type),
  .cer-plan-on .wapf-field-container[style*="width: 33"]:has(.wapf-image-swatch-wrapper > .wapf-swatch:nth-of-type(2):last-of-type) { width: 50% !important; }
  .cer-plan-on .wapf-field-container[style*="width:33"] .wapf-image-swatch-wrapper:has(> .wapf-swatch:nth-of-type(2):last-of-type),
  .cer-plan-on .wapf-field-container[style*="width: 33"] .wapf-image-swatch-wrapper:has(> .wapf-swatch:nth-of-type(2):last-of-type) { --wapf-cols: 2 !important; --cer-vmin: 96px; }
}