/* ====================================================
   CONFIGURATEUR D'ÉTIQUETTES, /devis-etiquettes-sur-mesure
   Moteur d'étapes générique de formulaires.js : progression, rail d'étapes cliquable
   (data-form-rail), mémoire de l'onglet (data-form-memoire), conditions (data-si),
   groupes (data-un-requis), blocs facultatifs (details[data-facultatif]), récapitulatif.
   ==================================================== */

.config-page{--cfg:var(--bleu-etiquette);--cfg-rgb:17,159,174}

/* DA des formulaires du site (30 septembre 2026, demande de Théo) : en-tête et configurateur sur UNE
   surface de marque granulée (var(--fond-marque)), carte blanche à trait jaune comme .form-bleed. */
.config-page>.config-tete,.config-page>.config{background:var(--fond-marque)}

/* En-tête sur fond sombre */
.config-tete{position:relative;padding-block:var(--s-10) var(--s-6);text-align:center}
.config-tete .hero-breadcrumbs{color:rgba(255,255,255,.72)}
.config-tete .hero-breadcrumbs a:hover{color:var(--blanc)}
.config-tete h1{margin:0 auto var(--s-3);max-width:820px;color:var(--blanc)}
.config-tete p{margin:0 auto var(--s-5);max-width:680px;font-size:var(--fs-h5);line-height:1.55;color:rgba(255,255,255,.8)}
.config-atouts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-3) var(--s-5)}
.config-atouts li{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--fs-small);color:rgba(255,255,255,.88)}
.config-atouts i{font-size:1.2rem;color:var(--jaune)}

/* La carte */
.config{padding-block:var(--s-4) var(--s-10)}
.config-carte{position:relative;max-width:920px;margin-inline:auto;background:var(--blanc);border-radius:var(--r-md);padding:var(--s-7) var(--s-7) var(--s-6);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 32px 80px rgba(0,0,0,.32),0 14px 36px rgba(0,0,0,.14);scroll-margin-top:calc(var(--header-height,70px) + var(--s-4))}
.config-carte::before{content:'';position:absolute;top:0;left:var(--s-7);width:48px;height:3px;background:var(--jaune);border-radius:0 0 var(--r-sm) var(--r-sm)}
.config-etat{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);margin-bottom:var(--s-3)}
.config-etat__titre{font-family:'Satoshi',sans-serif;font-weight:600;font-size:1.35rem;color:var(--text);margin:0}
.config-etat__droite{display:flex;align-items:center;gap:var(--s-4)}
.config-etat__num{font-family:'Satoshi',sans-serif;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.config-recommencer{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;font:inherit;font-size:var(--fs-small);color:var(--muted);cursor:pointer;transition:color .2s}
.config-recommencer:hover{color:var(--text)}
.config-recommencer i{font-size:1.05rem}
.config-reprise{display:flex;align-items:center;gap:var(--s-2);margin:0 0 var(--s-3);padding:10px var(--s-4);border-radius:var(--r-md);background:rgba(var(--cfg-rgb),.08);font-size:var(--fs-small);color:var(--text)}
.config-reprise i{color:var(--cfg);font-size:1.15rem}

.config-progression{--p:0%;height:6px;border-radius:var(--r-pill);background:var(--gris);overflow:hidden}
.config-progression::after{content:'';display:block;height:100%;width:var(--p);background:var(--cfg);border-radius:inherit;transition:width .45s cubic-bezier(.22,.61,.36,1)}

/* Rail d'étapes : chaque étape visitée est un bouton qui y ramène */
.config-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;list-style:none;margin:12px 0 var(--s-6);padding:0}
.config-rail__btn{display:grid;gap:2px;width:100%;padding:0;border:0;background:none;font:inherit;text-align:left;color:inherit}
button.config-rail__btn{cursor:pointer}
.config-rail__nom{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:rgba(15,24,46,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.config-rail__etape.is-fait .config-rail__nom{color:var(--muted)}
.config-rail__etape.is-courant .config-rail__nom{color:var(--cfg)}
.config-rail__val{min-height:1.3em;font-size:.8125rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.config-rail__etape.is-courant .config-rail__val{color:var(--muted)}
button.config-rail__btn:hover .config-rail__val{color:var(--cfg);text-decoration:underline;text-underline-offset:3px}
button.config-rail__btn:focus-visible{outline:2px solid var(--cfg);outline-offset:4px;border-radius:var(--r-sm)}

.config-carte form{display:flex;flex-direction:column}
.config-carte .form-page{flex-direction:column;gap:var(--s-6)}
.config-carte .form-page.active{display:flex}
.config-carte .form-page.form-page-1.active{margin-top:0}
.config-carte .form-group{margin-bottom:0;min-width:0}
.config-carte .form-choices .form-label{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:var(--s-3)}
.config-carte .form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}
.config-carte [hidden]{display:none !important}
.config-carte .form-navigation{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);flex-wrap:wrap;padding-top:var(--s-5);border-top:1px solid rgba(15,24,46,.08)}
.config-carte .form-navigation .btn-prev{width:auto;height:auto;margin:0;color:var(--text)!important}
.config-carte .form-navigation .texte-bouton{display:inline-flex;align-items:center;gap:8px}
.config-carte .form-navigation .texte-bouton i{font-size:1.1rem}
.config-carte .btn-submit{display:inline-flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;justify-content:center}
.config-carte .btn-submit .btn-submit__hint{font-family:'Satoshi',sans-serif;font-weight:400;font-size:var(--fs-small);opacity:.78;padding-left:var(--s-3);border-left:1px solid color-mix(in srgb,var(--blanc) 30%,transparent);text-transform:none;color:var(--blanc)}

/* Obligatoire / facultatif : l'astérisque dit « obligatoire », la pastille grise dit « facultatif » */
.config-facultatif{display:inline-block;padding:2px 9px;border-radius:var(--r-pill);background:var(--gris);border:1px solid rgba(15,24,46,.1);font-family:'General Sans',sans-serif;font-size:.6875rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);line-height:1.5;vertical-align:middle}
.config-plusieurs{font-weight:400;font-size:var(--fs-small);color:var(--muted)}
.config-plusieurs::before{content:'· ';}

/* Tuiles illustrées (radio ou case à cocher) */
.config-tuiles{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){.config-tuiles--3{grid-template-columns:repeat(3,minmax(0,1fr))}.config-tuiles--4,.config-tuiles--5{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:900px){.config-tuiles--5{grid-template-columns:repeat(5,minmax(0,1fr))}}
.config-tuile{position:relative;display:block;cursor:pointer;min-width:0}
.config-tuile input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.config-tuile__corps{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;height:100%;padding:18px 12px 16px;border:1.5px solid rgba(15,24,46,.12);border-radius:var(--r-md);background:var(--blanc);text-align:center;transition:border-color .2s,background-color .2s,transform .2s,box-shadow .2s}
.config-tuile:hover .config-tuile__corps{border-color:rgba(var(--cfg-rgb),.55);transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,24,46,.07)}
.config-tuile input:focus-visible+.config-tuile__corps{outline:2px solid var(--cfg);outline-offset:2px}
.config-tuile input:checked+.config-tuile__corps{border-color:var(--cfg);background:rgba(var(--cfg-rgb),.06);box-shadow:0 0 0 1px var(--cfg) inset}
.config-tuile__corps::after{content:'';position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;background:var(--cfg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;opacity:0;transform:scale(.5);transition:opacity .2s,transform .2s}
.config-tuile input:checked+.config-tuile__corps::after{opacity:1;transform:scale(1)}
.config-tuile input[type="checkbox"]+.config-tuile__corps::after{border-radius:var(--r-sm)}
.config-tuile__vis{display:grid;place-items:center;height:46px;min-width:46px;color:var(--bleu-principal);font-size:1.9rem;transition:color .2s}
.config-tuile input:checked+.config-tuile__corps .config-tuile__vis{color:var(--cfg)}
.config-tuile__vis svg{width:58px;height:44px}
.config-tuile__vis svg .t{fill:rgba(var(--cfg-rgb),.14);stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.config-tuile__vis svg .v{fill:var(--blanc);stroke:currentColor;stroke-width:1.8}
.config-tuile__vis svg .l{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.config-tuile__nom{font-family:'Satoshi',sans-serif;font-weight:600;font-size:.9375rem;line-height:1.25;color:var(--text)}
.config-tuile__desc{font-size:.8125rem;line-height:1.35;color:var(--muted);margin-top:-4px}
.config-tuiles--compact .config-tuile__corps{padding:14px 10px 12px;gap:6px}
.config-tuiles--compact .config-tuile__vis{height:36px;font-size:1.55rem}
.config-tuiles--compact .config-tuile__vis svg{width:48px;height:36px}
.config-tuiles--compact .config-tuile__nom{font-size:.875rem}

/* Nuances de matière et de finition */
.config-nuance{display:block;width:54px;height:38px;border-radius:4px;border:1px solid rgba(15,24,46,.14);box-shadow:0 2px 6px rgba(15,24,46,.08)}
.config-tuiles--compact .config-nuance{width:46px;height:32px}
.config-nuance--couche{background:linear-gradient(135deg,#fff 40%,#eef1f4 55%,#fff 70%)}
.config-nuance--velin{background:#f6f1e4}
.config-nuance--kraft{background:#b88a57 radial-gradient(rgba(80,50,20,.25) 1px,transparent 1.2px) 0 0/5px 5px}
.config-nuance--texture{background:#f3ecdc repeating-linear-gradient(45deg,rgba(120,100,70,.12) 0 1px,transparent 1px 4px)}
.config-nuance--pp{background:linear-gradient(135deg,#fff 30%,#e4ebf2 50%,#fff 68%)}
.config-nuance--transparent{background:repeating-conic-gradient(#e7eaee 0% 25%,#fff 0% 50%) 0 0/10px 10px;border-style:dashed}
.config-nuance--metal{background:linear-gradient(135deg,#9aa3ad,#eef1f4 45%,#8b949e 60%,#dfe3e8)}
.config-nuance--polyester{background:linear-gradient(135deg,#e2e6eb,#f7f8fa 50%,#d4d9df)}
.config-nuance--thermique{background:#fff repeating-linear-gradient(0deg,transparent 0 6px,rgba(15,24,46,.28) 6px 7px) 8px 7px/30px 22px no-repeat}
.config-nuance--dorure{background:linear-gradient(135deg,#b98a2e,#f6dc86 45%,#a8761f 62%,#e9c768)}
.config-nuance--gaufrage{background:#f4f4f4;box-shadow:inset 3px 3px 5px rgba(15,24,46,.18),inset -3px -3px 5px #fff}
.config-nuance--vernis{background:#d9dde2 radial-gradient(circle at 50% 50%,rgba(255,255,255,.95) 0 8px,transparent 9px)}
.config-nuance--mat{background:#cfd4da}
.config-nuance--brillant{background:linear-gradient(135deg,#bfc6ce,#fff 42%,#b7bec7 58%)}
.config-nuance--soft{background:#8f97a3;box-shadow:inset 0 0 8px rgba(0,0,0,.25)}
.config-points{display:flex;gap:4px}
.config-points i{display:block;width:14px;height:14px;border-radius:50%;border:1px solid rgba(15,24,46,.15)}
.config-points--fond{padding:6px;border-radius:4px;background:repeating-conic-gradient(#e7eaee 0% 25%,#fff 0% 50%) 0 0/8px 8px}
.config-points .p-noir{background:#15181d}.config-points .p-bleu{background:#2645bc}.config-points .p-rouge{background:#d8343a}
.config-points .p-c{background:#00aeef}.config-points .p-m{background:#ec008c}.config-points .p-j{background:#ffe100}.config-points .p-blanc{background:#fff}

/* Schéma du format */
.config-format{display:grid;grid-template-columns:190px minmax(0,1fr);gap:var(--s-6);align-items:center;padding:var(--s-5);border-radius:var(--r-md);background:var(--gris)}
.config-format__schema{width:100%;height:auto}
.config-format__schema .s-support{fill:var(--blanc);stroke:rgba(15,24,46,.25);stroke-width:1.2}
.config-format__schema .s-etiq{fill:rgba(var(--cfg-rgb),.16);stroke:var(--cfg);stroke-width:1.6}
.config-format__schema .s-etiq--2{opacity:.55}
.config-format__schema .s-fleche{fill:none;stroke:var(--bleu-principal);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.config-format__schema .s-fleche--sens{stroke:var(--muted);stroke-dasharray:3 3}
.config-format__schema .s-texte{font:600 9px 'General Sans',sans-serif;fill:var(--bleu-principal)}
.config-format__schema .s-texte--sens{fill:var(--muted);font-weight:500}
.config-format__champs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}
.config-format__note{grid-column:1/-1;margin:0;font-size:var(--fs-small);color:var(--muted);line-height:1.5}
.config-format .form-input{background:transparent}
.config-unite{position:relative}
.config-unite .form-input{padding-right:42px}
.config-unite::after{content:attr(data-unite);position:absolute;right:0;bottom:12px;font-size:var(--fs-small);color:var(--muted)}
.config-quantite{max-width:320px}

/* Bloc facultatif replié */
.config-plus{border:1.5px dashed rgba(15,24,46,.18);border-radius:var(--r-md);background:var(--blanc)}
.config-plus[open]{border-style:solid;border-color:rgba(15,24,46,.12);background:#fcfcfd}
.config-plus summary{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:4px var(--s-3);padding:var(--s-4) var(--s-5);cursor:pointer;list-style:none}
.config-plus summary::-webkit-details-marker{display:none}
.config-plus__titre{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;font-family:'Satoshi',sans-serif;font-weight:600;color:var(--text)}
.config-plus__titre>i{font-size:1.2rem;color:var(--cfg)}
.config-plus__sujets{grid-column:1;grid-row:2;font-size:var(--fs-small);color:var(--muted)}
.config-plus__compte{grid-column:2;grid-row:1/3;font-size:var(--fs-small);font-weight:500;color:var(--cfg)}
.config-plus__chevron{grid-column:3;grid-row:1/3;font-size:1.2rem;color:var(--muted);transition:transform .25s}
.config-plus[open] .config-plus__chevron{transform:rotate(180deg)}
.config-plus summary:hover .config-plus__titre{color:var(--cfg)}
.config-plus summary:focus-visible{outline:2px solid var(--cfg);outline-offset:2px;border-radius:var(--r-md)}
.config-plus__corps{display:flex;flex-direction:column;gap:var(--s-5);padding:0 var(--s-5) var(--s-5)}

/* Aides contextuelles */
.config-aide{display:flex;gap:var(--s-3);align-items:flex-start;margin:0;padding:var(--s-4);border-radius:var(--r-md);background:rgba(var(--cfg-rgb),.07);font-size:var(--fs-small);line-height:1.6;color:var(--text)}
.config-aide i{flex-shrink:0;font-size:1.3rem;color:var(--cfg);margin-top:1px}

/* Récapitulatif */
.config-recap{border:1px solid rgba(15,24,46,.1);border-radius:var(--r-md);padding:var(--s-5)}
.config-recap h3{font-family:'Satoshi',sans-serif;font-weight:600;font-size:1.05rem;color:var(--text);margin:0 0 4px}
.config-recap__aide{margin:0 0 var(--s-4);font-size:var(--fs-small);color:var(--muted)}
.config-recap dl{margin:0;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--s-2) var(--s-4)}
.config-recap dt{font-size:var(--fs-small);color:var(--muted)}
.config-recap dd{margin:0;font-size:var(--fs-small);color:var(--text);font-weight:500}

@media (prefers-reduced-motion:reduce){.config-progression::after,.config-tuile__corps,.config-tuile__corps::after{transition:none}}

@media (max-width:768px){
  .config-carte{padding:var(--s-5) var(--s-4)}
  .config-rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:4px;scrollbar-width:none}
  .config-rail::-webkit-scrollbar{display:none}
  .config-rail__etape{flex:0 0 auto;max-width:130px;scroll-snap-align:start}
  .config-carte .form-row,.config-format__champs{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
  .config-format{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
  .config-format__schema{max-width:170px;margin-inline:auto}
  .config-plus summary{padding:var(--s-4)}
  .config-plus__corps{padding:0 var(--s-4) var(--s-4)}
  .config-recap dl{grid-template-columns:minmax(0,1fr);gap:2px}
  .config-recap dd{margin-bottom:var(--s-2)}
  .config-carte .form-navigation{flex-direction:column-reverse;align-items:stretch}
  .config-carte .form-navigation>*{width:100%;justify-content:center;display:flex}
  .config-carte .form-navigation>span:empty{display:none}
  .config-etat__titre{font-size:1.15rem}
}