/* =========================================================================
   PLAZUR — Configurateur / Assistant Projet Plasturgie
   Mobile-first. Réutilise les tokens --plz-* de plz-foundations.css.
   Aucun débordement horizontal ; barre de progression jamais tronquée.
   ========================================================================= */

.plz-cfg{
  --cfg-line:var(--plz-line,rgba(16,24,32,.12));
  --cfg-navy:var(--plz-navy,#101820);
  --cfg-red:var(--plz-red,#b6312b);
  --cfg-bg:var(--plz-bg,#f7f5f1);
  --cfg-white:var(--plz-bg-white,#fff);
  --cfg-radius:var(--plz-radius-lg,12px);
  max-width:900px;margin:0 auto;padding:8px 0 24px;
  color:var(--cfg-navy);
  font-family:var(--plz-font-sans,Inter,system-ui,sans-serif);
  scroll-margin-top:80px;
}
.plz-cfg *,.plz-cfg *::before,.plz-cfg *::after{box-sizing:border-box;}

/* --- Intro --- */
.plz-cfg__intro{margin-bottom:28px;}
.plz-cfg__title{font-size:clamp(26px,4vw,40px);font-weight:700;line-height:1.12;letter-spacing:-.015em;margin:0 0 12px;color:var(--cfg-navy);}
.plz-cfg__title em{font-family:var(--plz-font-serif,Georgia,serif);font-style:italic;font-weight:500;color:var(--cfg-red);}
.plz-cfg__lead{font-size:16px;line-height:1.65;color:var(--plz-text-soft,#4b4b4b);max-width:60ch;margin:0;}
.plz-cfg__req-mark{color:var(--cfg-red);font-weight:700;}

/* =========================================================================
   Barre de progression
   ========================================================================= */
.plz-cfg__progress{margin-bottom:26px;}

/* Vue mobile : "Étape X / 8" + nom court (aucune troncature) */
.plz-cfg__progress-mobile{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px;
}
.plz-cfg__progress-count{
  font-family:var(--plz-font-mono,monospace);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cfg-red);font-weight:700;
}
.plz-cfg__progress-name{font-size:15px;font-weight:600;color:var(--cfg-navy);}

/* Liste des étapes : masquée sur mobile, visible dès 640px, labels qui passent
   à la ligne (jamais coupés). */
.plz-cfg__steps{
  display:none;list-style:none;margin:0 0 12px;padding:0;
  gap:6px;
}
.plz-cfg__step{flex:1 1 0;min-width:0;}
.plz-cfg__step-btn{
  display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;
  background:none;border:0;padding:6px 4px 0;cursor:pointer;color:var(--plz-text-mute,#8a857d);
  font-family:inherit;text-align:center;
}
.plz-cfg__step-num{
  width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;border:1.5px solid var(--cfg-line);background:var(--cfg-white);
  transition:background .2s,border-color .2s,color .2s;flex:none;
}
.plz-cfg__step-label{
  font-size:11.5px;line-height:1.25;font-weight:600;
  white-space:normal;overflow-wrap:anywhere;hyphens:auto;
}
.plz-cfg__step.is-active .plz-cfg__step-num{background:var(--cfg-red);border-color:var(--cfg-red);color:#fff;}
.plz-cfg__step.is-active{color:var(--cfg-navy);}
.plz-cfg__step.is-done .plz-cfg__step-num{background:var(--cfg-navy);border-color:var(--cfg-navy);color:#fff;}
.plz-cfg__step.is-done{color:var(--cfg-navy);}
.plz-cfg__step-btn:hover .plz-cfg__step-num{border-color:var(--cfg-navy);}

/* Rail de progression */
.plz-cfg__progress-bar{height:5px;border-radius:999px;background:var(--plz-gray,#e7e3dc);overflow:hidden;}
.plz-cfg__progress-fill{display:block;height:100%;width:0;background:var(--cfg-red);border-radius:999px;transition:width .35s ease;}

@media(min-width:640px){
  .plz-cfg__progress-mobile{display:none;}
  .plz-cfg__steps{display:flex;}
}

/* =========================================================================
   Panneau d'étape
   ========================================================================= */
.plz-cfg__form{background:var(--cfg-white);border:1px solid var(--cfg-line);border-radius:var(--cfg-radius);padding:26px 22px;box-shadow:var(--plz-shadow-2,0 12px 32px -16px rgba(16,24,32,.18));}
@media(max-width:480px){.plz-cfg__form{padding:20px 16px;}}

.plz-cfg__panel{border:0;margin:0;padding:0;min-width:0;}
.plz-cfg__panel-title{
  display:block;width:100%;font-size:20px;font-weight:700;color:var(--cfg-navy);
  margin:0 0 18px;padding:0 0 14px;border-bottom:1px solid var(--cfg-line);line-height:1.25;
}
.plz-cfg__panel-step{
  display:block;font-family:var(--plz-font-mono,monospace);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cfg-red);font-weight:700;margin-bottom:6px;
}
.plz-cfg__panel-help{font-size:14px;color:var(--plz-text-mute,#8a857d);font-style:italic;margin:-8px 0 18px;}

/* --- Champs --- */
.plz-cfg__field{margin-bottom:22px;}
.plz-cfg__field[hidden]{display:none;}
.plz-cfg__label,.plz-cfg__field > .plz-cfg__label{
  display:block;font-size:14.5px;font-weight:600;color:var(--cfg-navy);margin-bottom:9px;line-height:1.4;
}
.plz-cfg__help{display:block;font-size:13px;color:var(--plz-text-mute,#8a857d);margin:-4px 0 9px;}

.plz-cfg__input{
  width:100%;font-family:inherit;font-size:15px;color:var(--plz-text,#151515);
  background:var(--cfg-white);border:1px solid var(--cfg-line);border-radius:var(--plz-radius,6px);
  padding:12px 14px;line-height:1.4;transition:border-color .2s,box-shadow .2s;
}
.plz-cfg__textarea{resize:vertical;min-height:88px;}
.plz-cfg__input:focus,.plz-cfg__input:focus-visible{
  outline:none;border-color:var(--cfg-red);box-shadow:0 0 0 3px rgba(182,49,43,.15);
}
select.plz-cfg__input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23101820' d='M6 8 0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;cursor:pointer;}

.plz-cfg__input-wrap{position:relative;display:flex;align-items:center;}
.plz-cfg__suffix{position:absolute;right:14px;font-size:13px;color:var(--plz-text-mute,#8a857d);pointer-events:none;font-weight:600;}
.plz-cfg__field--number .plz-cfg__input{padding-right:46px;}

/* --- Options radio / checkbox : cartes cliquables --- */
.plz-cfg__options{display:grid;gap:9px;}
@media(min-width:560px){
  .plz-cfg__field--radio .plz-cfg__options,
  .plz-cfg__field--checkboxes .plz-cfg__options{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.plz-cfg__opt{
  display:flex;align-items:flex-start;gap:11px;padding:12px 14px;cursor:pointer;
  border:1px solid var(--cfg-line);border-radius:var(--plz-radius,6px);background:var(--cfg-white);
  transition:border-color .18s,background .18s,box-shadow .18s;font-size:14.5px;line-height:1.4;
}
.plz-cfg__opt:hover{border-color:var(--cfg-navy);}
.plz-cfg__opt input{margin:2px 0 0;flex:none;width:18px;height:18px;accent-color:var(--cfg-red);cursor:pointer;}
.plz-cfg__opt:has(input:checked){border-color:var(--cfg-red);background:rgba(182,49,43,.05);box-shadow:inset 0 0 0 1px var(--cfg-red);}
.plz-cfg__opt input:focus-visible{outline:2px solid var(--cfg-red);outline-offset:2px;}
.plz-cfg__opt-txt{color:var(--cfg-navy);}

/* --- Consentement RGPD --- */
.plz-cfg__consent{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.55;color:var(--plz-text-soft,#4b4b4b);cursor:pointer;padding:14px;border:1px solid var(--cfg-line);border-radius:var(--plz-radius,6px);background:var(--cfg-bg);}
.plz-cfg__consent input{margin:2px 0 0;flex:none;width:18px;height:18px;accent-color:var(--cfg-red);cursor:pointer;}
.plz-cfg__consent a{color:var(--cfg-red);text-decoration:underline;}

/* --- Groupe coordonnées (2 colonnes) --- */
@media(min-width:560px){
  .plz-cfg__field--coord{display:inline-block;width:calc(50% - 8px);vertical-align:top;margin-right:14px;}
  .plz-cfg__field--coord:nth-child(2n){margin-right:0;}
}

/* --- Erreurs --- */
.plz-cfg__field-error{display:none;font-size:13px;color:var(--plz-red-dark,#8e231d);margin-top:7px;font-weight:600;}
.plz-cfg__field.is-error .plz-cfg__field-error{display:block;}
.plz-cfg__field.is-error .plz-cfg__input{border-color:var(--plz-red-dark,#8e231d);box-shadow:0 0 0 3px rgba(142,35,29,.12);}
.plz-cfg__field.is-error .plz-cfg__opt,
.plz-cfg__field.is-error .plz-cfg__consent{border-color:var(--plz-red-dark,#8e231d);}
.plz-cfg__form-error{margin:16px 0 0;padding:12px 14px;background:rgba(142,35,29,.08);border:1px solid var(--plz-red-dark,#8e231d);border-radius:var(--plz-radius,6px);color:var(--plz-red-dark,#8e231d);font-size:14px;font-weight:600;}

/* --- Honeypot (invisible) --- */
.plz-cfg__hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden;}

/* =========================================================================
   Récapitulatif
   ========================================================================= */
.plz-cfg__recap-title{font-size:22px;font-weight:700;margin:0 0 6px;color:var(--cfg-navy);}
.plz-cfg__recap-lead{font-size:15px;color:var(--plz-text-soft,#4b4b4b);margin:0 0 20px;}
.plz-cfg__recap-section{border:1px solid var(--cfg-line);border-radius:var(--cfg-radius);padding:16px 18px;margin-bottom:14px;background:var(--cfg-bg);}
.plz-cfg__recap-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.plz-cfg__recap-head h4{font-size:16px;font-weight:700;margin:0;color:var(--cfg-navy);}
.plz-cfg__edit{font-size:13px;font-weight:700;color:var(--cfg-red)!important;padding:4px 6px!important;flex:none;}
.plz-cfg__edit:hover{text-decoration:underline;}
.plz-cfg__recap-list{margin:0;}
.plz-cfg__recap-row{display:grid;grid-template-columns:1fr;gap:2px;padding:7px 0;border-top:1px solid var(--cfg-line);}
.plz-cfg__recap-row:first-child{border-top:0;}
@media(min-width:560px){.plz-cfg__recap-row{grid-template-columns:minmax(0,40%) minmax(0,60%);gap:14px;}}
.plz-cfg__recap-row dt{font-size:13.5px;font-weight:600;color:var(--plz-text-soft,#4b4b4b);}
.plz-cfg__recap-row dd{margin:0;font-size:14.5px;color:var(--cfg-navy);overflow-wrap:anywhere;}
.plz-cfg__recap-empty{color:var(--plz-text-mute,#8a857d);font-style:italic;}

/* =========================================================================
   Navigation
   ========================================================================= */
.plz-cfg__nav{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--cfg-line);flex-wrap:wrap;}
.plz-cfg__nav-spacer{flex:1 1 auto;}
.plz-cfg__prev{padding-left:0!important;}
.plz-cfg .plz-cfg__submit{white-space:normal;line-height:1.25;text-align:center;}
@media(max-width:480px){
  .plz-cfg__nav{gap:10px;}
  .plz-cfg__next,.plz-cfg__submit{flex:1 1 100%;}
  .plz-cfg__nav-spacer{display:none;}
}

/* =========================================================================
   Écrans d'état (succès / erreur)
   ========================================================================= */
.plz-cfg__status{text-align:center;padding:34px 20px;}
.plz-cfg__status h3{font-size:22px;font-weight:700;margin:0 0 10px;color:var(--cfg-navy);line-height:1.3;}
.plz-cfg__status p{font-size:15.5px;color:var(--plz-text-soft,#4b4b4b);margin:0 auto 8px;max-width:52ch;}
.plz-cfg__status-icon{width:64px;height:64px;border-radius:50%;background:var(--cfg-navy);color:#fff;font-size:32px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px;font-weight:700;}
.plz-cfg__status-icon--error{background:var(--plz-red-dark,#8e231d);}
.plz-cfg__retry{margin-top:16px;}

/* Focus visible générique (accessibilité clavier) */
.plz-cfg button:focus-visible,.plz-cfg a:focus-visible{outline:2px solid var(--cfg-red);outline-offset:2px;border-radius:4px;}
