/* ==========================================================================
   Configurateur de housse, CBS Emballages
   Fichier associé : configurateur.js. Aucune dépendance, aucune ressource distante.
   Couleurs et polices : celles de style.css (variables --ink, --navy, --paper…).

   Balisage attendu :
   [data-cfg][data-cfg-main="type"]        racine ; data-cfg-main = clé du premier choix
     .cfg-step                             une étape (numérotée via data-step, JS)
       [data-cfg-field][data-key][data-label]   un champ : boutons radio ou nombre
         label.cfg-opt > input[type=radio][value][data-label] + .cfg-card
         label.cfg-sw > input[type=radio][value][data-label] + .cfg-sw-c + .cfg-sw-n   pastille de couleur
         input[type=number][data-cfg-num]
     [data-for="coton transparente"]       visible seulement pour ces valeurs du premier choix
     input[data-cfg-auto]                  option retenue d'office dès qu'elle est proposée
     [data-cfg-recap]                      liste du récapitulatif, remplie par le script
     [data-cfg-preview]                    photo du récapitulatif
     a[data-cfg-go]                        bouton vers la page devis
   ========================================================================== */

[hidden]{display:none!important}

.cfg{background:var(--paper);padding:72px 0 110px;--gold-t:#846637}
.cfg-head{max-width:640px}
.cfg-head h1{font-size:clamp(36px,3.6vw,52px);line-height:1.08;margin-top:16px}
.cfg-head .txt{margin-top:22px}
.cfg-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,390px);column-gap:clamp(32px,4.4vw,56px);align-items:start;margin-top:44px}
.cfg-steps{min-width:0}

/* ---------- étapes ---------- */
/* v3k : numéro via data-step (JS), car display:none des étapes wizard casse counter() */
.cfg-step{border-top:1px solid var(--rule);padding:30px 0 40px}
.cfg-step:last-child{border-bottom:1px solid var(--rule)}
.cfg-step > h2{display:flex;align-items:baseline;gap:14px;font-size:27px;line-height:1.15}
.cfg-step > h2::before{content:attr(data-step);font-style:italic;font-size:30px;line-height:1;color:var(--gold-t);min-width:22px}
.cfg-hint{margin-top:12px;max-width:600px;font-size:14.5px;line-height:1.65;color:var(--body)}
.cfg-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.cfg-opts-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cfg-opts-2.cfg-opts-3t{grid-template-columns:repeat(3,minmax(0,1fr))}
.cfg-opts-5{grid-template-columns:repeat(5,minmax(0,1fr))}

/* ---------- cartes cliquables ---------- */
.cfg-opt{display:block;position:relative;min-width:0;cursor:pointer}
.cfg-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.cfg-card{display:flex;flex-direction:column;height:100%;min-height:76px;background:#fff;border:1px solid var(--cardline);border-radius:6px;padding:16px 16px 17px;box-shadow:0 1px 2px rgba(22,41,74,.04)}
.cfg-opt:hover .cfg-card{border-color:var(--muted)}
.cfg-opt input:checked + .cfg-card{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.cfg-opt input:focus-visible + .cfg-card{outline:2px solid var(--ink);outline-offset:3px}
.cfg-n{display:block;font-family:PF,Georgia,serif;font-size:19px;line-height:1.25;color:var(--ink);padding-right:26px;overflow-wrap:anywhere}
.cfg-d{display:block;margin-top:6px;font-size:13.5px;line-height:1.55;color:var(--body)}
/* repère du choix retenu : pastille bleu nuit, coche dessinée en CSS */
.cfg-card::after{content:"";position:absolute;right:14px;top:16px;width:18px;height:18px;border-radius:50%;border:1px solid var(--muted);background:#fff}
.cfg-opt-ph .cfg-card::after{right:26px;top:26px}
.cfg-opt-ph .cfg-n{padding-right:0}
.cfg-opt input:checked + .cfg-card::after{border-color:var(--navy);background:var(--navy) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6'/%3E%3C/svg%3E") center / 18px 18px no-repeat}

/* ---------- visuels : photos du site, recadrées en CSS ---------- */
.cfg-ph{display:block;margin-bottom:14px}
.cfg-ph img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 38%;border-radius:4px;background:var(--line)}
.cfg-opts-2 .cfg-ph img{aspect-ratio:1/1;object-position:50% 42%}
.cfg-credit{display:block;margin-top:6px;font-size:11px;font-weight:400;line-height:1.4;letter-spacing:.01em;color:var(--muted)}

/* ---------- matière : photo resserrée sur la housse, ou texture dessinée en CSS ---------- */
.cfg-crop,.cfg-tex{display:block;aspect-ratio:4/5;border-radius:4px;overflow:hidden;background:var(--line)}
.cfg-crop img{height:100%;aspect-ratio:auto;border-radius:0;transform:scale(var(--zoom,1.6));transform-origin:var(--ox,50%) var(--oy,45%)}
.cfg-crop-coton{--zoom:1.7;--ox:50%;--oy:52%}
.cfg-crop-transparent{--zoom:1.5;--ox:50%;--oy:48%}
/* Sergé et non-tissé : aucune photo. Fond et traits aux teintes de la charte. */
.cfg-tex-serge{background:repeating-linear-gradient(135deg,#ECE5D9 0 4px,#E0D7C8 4px 5.5px)}
.cfg-tex-non-tisse{background:#ECE5D9 radial-gradient(circle,#E0D7C8 0 1.3px,transparent 1.6px) 0 0 / 8px 8px}

/* ---------- couleur : pastilles rondes ---------- */
.cfg-sws{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px 4px;margin-top:22px}
.cfg-sw{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0;padding:8px 0 4px;cursor:pointer;text-align:center}
.cfg-sw input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.cfg-sw-c{display:block;width:56px;height:56px;border-radius:50%;background:var(--sw);border:1px solid var(--rule);box-shadow:0 0 0 3px var(--paper),0 0 0 4px transparent}
.cfg-sw-n{font-size:14px;line-height:1.35;color:var(--ink)}
.cfg-sw:hover .cfg-sw-c{box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--muted)}
.cfg-sw input:checked ~ .cfg-sw-c{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--navy)}
.cfg-sw input:checked ~ .cfg-sw-n{font-weight:600}
.cfg-sw input:focus-visible ~ .cfg-sw-c{outline:2px solid var(--ink);outline-offset:8px}
/* Teintes reprises de style.css : --ivory, bleu du monogramme du pied, --ink, gris des légendes, filet des questions. */
.cfg-sw-ivoire{--sw:#FDFBF7}
.cfg-sw-marine{--sw:#1C3552}
.cfg-sw-noir{--sw:#121A27}
.cfg-sw-gris{--sw:#AEB6C4}
.cfg-sw-beige{--sw:#E0D7C8}
/* Pantone sur demande : les cinq teintes ci-dessus en éventail, aucune autre couleur. */
.cfg-sw-pantone{--sw:conic-gradient(#FDFBF7 0 20%,#E0D7C8 0 40%,#AEB6C4 0 60%,#1C3552 0 80%,#121A27 0)}

/* ---------- quantité ---------- */
.cfg-num{margin-top:22px;max-width:300px}
.cfg-num label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold-t)}
.cfg-num input{display:block;width:100%;height:52px;margin-top:8px;padding:0 14px;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--muted);border-radius:4px}

/* ---------- récapitulatif ---------- */
.cfg-side{position:sticky;top:24px;min-width:0}
.cfg-panel{background:#fff;border:1px solid var(--cardline);border-radius:6px;padding:28px 26px 28px;box-shadow:0 1px 2px rgba(22,41,74,.04)}
.cfg-panel h2{font-size:24px;line-height:1.2}
.cfg-sum{display:grid;grid-template-columns:118px minmax(0,1fr);column-gap:20px;margin-top:20px;align-items:start}
.cfg-sum .cfg-ph{margin:0}
.cfg-sum .cfg-ph img{aspect-ratio:2/3;object-position:50% 50%}
.cfg-recap > div{padding:9px 0 10px;border-top:1px solid var(--line)}
.cfg-recap > div:first-child{border-top:0;padding-top:0}
.cfg-recap dt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold-d)}
.cfg-recap dd{margin-top:3px;min-height:21px;font-size:14px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.cfg-recap dd:empty::before{content:"";display:block;width:22px;margin-top:10px;border-top:1px solid var(--rule)}
.cfg-panel .btn{width:100%;margin-top:24px;height:auto;min-height:56px;padding:14px 20px;white-space:normal;text-align:center;line-height:1.3}

@media (max-width:1000px){
  .cfg-grid{grid-template-columns:1fr;row-gap:40px}
  .cfg-side{position:static}
}
@media (max-width:900px){
  .cfg{padding:56px 0 72px}
}
@media (max-width:600px){
  .cfg-opts,.cfg-opts-5,.cfg-opts-2.cfg-opts-3t{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cfg-sws{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cfg-n{font-size:17px}
  .cfg-num{max-width:none}
}
@media (prefers-reduced-motion:no-preference){
  .cfg-card{transition:border-color .2s ease}
  .cfg-sw-c{transition:box-shadow .2s ease}
}

/* v3h-credit */ .cfg-credit{display:none!important}

/* v3j configurateur : parcours pas à pas sur place */
.cfg-wizard{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin:0 0 18px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.cfg-wizard-steps{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.cfg-wizard-dot{appearance:none;border:1px solid var(--rule);background:var(--ivory,#FDFBF7);color:var(--body);font:inherit;font-size:12px;font-weight:600;letter-spacing:.04em;padding:8px 12px;border-radius:999px;cursor:pointer;min-height:40px}
.cfg-wizard-dot[aria-current="step"]{border-color:var(--navy);color:var(--navy);background:#fff}
.cfg-wizard-dot:disabled{opacity:.45;cursor:default}
.cfg-wizard-back{appearance:none;border:0;background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:600;padding:8px 4px;cursor:pointer;border-bottom:1px solid var(--ink);min-height:40px}
.cfg-wizard-back:disabled,.cfg-wizard-back[hidden]{opacity:.35;cursor:default;border-bottom-color:transparent}
.cfg-step.cfg-away{display:none!important}
.cfg-step.is-active{display:block}
.cfg-step.is-enter{animation:cfgStepIn .3s ease}
@keyframes cfgStepIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cfg-step.is-enter{animation:none}}
.cfg-steps{min-height:320px}
.cfg-step{border-top:0;padding-top:12px}



/* v3v : fondu doux entre deux options (image du récap et textes) */
.cfg-ph-fade{position:relative}
.cfg-ph-fade img[data-cfg-preview-next]{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;
  opacity:0;pointer-events:none;
  transition:opacity 360ms cubic-bezier(.4,0,.2,1);
}
.cfg-ph-fade img[data-cfg-preview-next].is-in{opacity:1}
.cfg-recap{
  transition:opacity 180ms cubic-bezier(.4,0,.2,1),min-height 360ms cubic-bezier(.4,0,.2,1);
}
.cfg-recap.is-fading{opacity:0}
@media (prefers-reduced-motion:reduce){
  .cfg-ph-fade img[data-cfg-preview-next]{transition:none;opacity:0!important}
  .cfg-recap{transition:none}
  .cfg-recap.is-fading{opacity:1}
}