/* =====================================================================
   CENT POUR CENT DE CUIR — styles spécifiques du site (complète tokens.css)
   Rendus de gravure LASER (décision patron) + composants de pages.
   ===================================================================== */

/* --- HÉROS (accueil) --- */
.hero{position:relative;min-height:78vh;display:flex;align-items:center;overflow:hidden}
.hero__fond{position:absolute;inset:0;z-index:0}
.hero__voile{position:absolute;inset:0;background:linear-gradient(90deg,rgba(43,26,15,.86) 0 42%,rgba(43,26,15,.35) 100%);z-index:1}
.hero .conteneur{position:relative;z-index:2}
.hero__txt{max-width:640px;color:var(--encre-inverse)}
.hero h1{color:var(--encre-inverse);font-size:clamp(2.4rem,6vw,var(--fs-3xl));line-height:1.05}
.hero .surtitre{color:var(--or-clair)}
.hero .surtitre::before{background:var(--or-clair)}
.hero p{color:var(--lin);font-size:var(--fs-md)}

/* --- Étapes --- */
.etapes{display:grid;gap:var(--sp-6);grid-template-columns:repeat(4,1fr)}
.etape-num{text-align:center;padding:var(--sp-5)}
.etape-num .num{font-family:var(--font-titre);font-size:var(--fs-2xl);color:var(--or-patine);display:block;margin-bottom:var(--sp-2)}
@media(max-width:820px){.etapes{grid-template-columns:1fr 1fr}}

/* --- Bandeau personnalisation --- */
.perso{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--sp-8);align-items:center}
.perso__visuel{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--ombre-flot);background:var(--cuir-chocolat);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.grav-demo{font-family:var(--font-grav-serif);font-size:clamp(1.5rem,4vw,2.6rem);color:#D8B877;text-shadow:0 1px 1px rgba(0,0,0,.5),0 0 2px rgba(216,184,119,.4);letter-spacing:.04em;transform:rotate(-2deg)}
@media(max-width:820px){.perso{grid-template-columns:1fr}}

/* --- Fiche article --- */
.fil{font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--texte-2);padding-block:var(--sp-4)}
.produit{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--sp-8);align-items:start}
.gal__principale{border-radius:var(--r-lg);overflow:hidden;background:var(--bg-alt);box-shadow:var(--ombre-carte)}
.prix-gros{font-family:var(--font-titre);font-size:var(--fs-2xl);color:var(--accent-fort)}
.liste-cuir{list-style:none;padding:0;margin:var(--sp-4) 0;display:grid;gap:var(--sp-2)}
.liste-cuir li{display:flex;gap:var(--sp-3);font-size:var(--fs-sm);color:var(--texte-2)}
.liste-cuir li::before{content:"—";color:var(--or-patine)}
.encart-perso{background:var(--parchemin);border:1px solid var(--lin);border-left:3px solid var(--or-patine);border-radius:var(--r-md);padding:var(--sp-5);margin-top:var(--sp-5)}
@media(max-width:820px){.produit{grid-template-columns:1fr}}

/* --- Configurateur --- */
.config{display:grid;grid-template-columns:1fr 460px;gap:var(--sp-8);align-items:start}
.apercu{position:sticky;top:96px}
.scene{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--cuir-chocolat);box-shadow:var(--ombre-flot)}
.scene__img{width:100%;display:block}
.zone{position:absolute;border:1px dashed rgba(216,184,119,.55);border-radius:4px;display:flex;align-items:center;justify-content:center;padding:6px}
.zone__label{position:absolute;top:-10px;left:8px;background:var(--cuir-ebene);color:var(--or-clair);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:2px 6px;border-radius:3px}
.grave{font-family:var(--font-grav-serif);text-align:center;line-height:1.15;white-space:pre-wrap;max-width:100%;word-break:break-word;transition:all var(--t-rapide)}
/* Rendus LASER (ton sur ton + variante contrastée/brûlée) */
.r-laser{color:#2f1c0e;text-shadow:0 1px 0 rgba(255,255,255,.10),0 -1px 1px rgba(0,0,0,.45)}
.r-laser-fonce{color:#170d05;text-shadow:0 1px 0 rgba(255,255,255,.06),0 -1px 1px rgba(0,0,0,.6);font-weight:600}
.scene__legende{display:flex;justify-content:space-between;align-items:center;padding:var(--sp-3) var(--sp-4);background:var(--cuir-ebene);color:var(--lin);font-size:var(--fs-xs);letter-spacing:.05em}
.panneau{background:var(--surface);border:1px solid var(--bordure);border-radius:var(--r-lg);box-shadow:var(--ombre-douce)}
.etape{border-bottom:1px solid var(--bordure);padding:var(--sp-5)}
.etape:last-child{border-bottom:0}
.etape__titre{display:flex;align-items:center;gap:var(--sp-3);font-family:var(--font-titre);font-size:var(--fs-lg);margin:0 0 var(--sp-4)}
.etape__num{width:28px;height:28px;flex:none;border-radius:var(--r-pill);background:var(--cuir-tabac);color:var(--ivoire);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-corps);font-size:var(--fs-sm);font-weight:700}
.compteur{font-size:var(--fs-xs);color:var(--texte-2);text-align:right;margin-top:2px}
.position-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:150px}
.position-grid button{aspect-ratio:1;border:1px solid var(--bordure);background:var(--ivoire);border-radius:var(--r-sm);cursor:pointer;color:var(--texte-2)}
.position-grid button.actif{background:var(--cuir-tabac);color:#fff;border-color:var(--cuir-tabac)}
.slider{width:100%}
.recap{background:var(--cuir-ebene);color:var(--encre-inverse);border-radius:0 0 var(--r-lg) var(--r-lg);padding:var(--sp-5)}
.recap h3{color:var(--or-clair);font-family:var(--font-corps);font-size:var(--fs-xs);letter-spacing:var(--ls-caps);text-transform:uppercase}
.ligne{display:flex;justify-content:space-between;padding:var(--sp-2) 0;font-size:var(--fs-sm);color:var(--lin);border-bottom:1px dotted rgba(245,238,225,.15)}
.ligne--total{border:0;padding-top:var(--sp-4);font-family:var(--font-titre);font-size:var(--fs-xl);color:var(--ivoire)}
.ligne--total span:last-child{color:var(--or-clair)}
.trad-preview{background:var(--parchemin);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);margin-top:var(--sp-3);display:none;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.trad-preview.on{display:flex}
.trad-preview b{font-family:var(--font-grav-cjk);font-size:var(--fs-xl);color:var(--accent-fort)}
@media(max-width:960px){.config{grid-template-columns:1fr}.apercu{position:static}}

/* --- Panier / commande / tableaux --- */
.tableau{width:100%;border-collapse:collapse;background:var(--surface);font-size:var(--fs-sm)}
.tableau th,.tableau td{text-align:left;padding:var(--sp-3);border-bottom:1px solid var(--bordure);vertical-align:top}
.tableau th{background:var(--parchemin);font-family:var(--font-corps);letter-spacing:.04em}
.mini-vignette{width:60px;height:74px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--bordure);background:var(--bg-alt)}
.encadre{background:var(--surface);border:1px solid var(--bordure);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--ombre-douce)}
.alerte{background:#fbeee0;border-left:3px solid var(--alerte);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm);color:var(--encre);margin-bottom:var(--sp-4)}
.alerte--err{background:#f6e3df;border-left-color:var(--erreur)}
.alerte--ok{background:#eaeede;border-left-color:var(--succes)}
.retour{display:inline-block;margin-bottom:var(--sp-4);font-size:var(--fs-sm)}
.aide-bulle{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--lin);color:var(--encre);font-size:11px;font-weight:700;cursor:help;margin-left:.3em;vertical-align:middle}

/* --- Badges de statut (back-office) --- */
.badge--statut{background:var(--parchemin);color:var(--encre);border:1px solid var(--bordure)}
.badge--attente{background:#fbeecf;color:#6b4a10}
.badge--ok2{background:#e5ecd6;color:#3d4a22}

/* --- Admin léger (réf. DYIMMO) --- */
.admin-wrap{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
.admin-side{background:var(--cuir-ebene);color:var(--lin);padding:var(--sp-5) var(--sp-4)}
.admin-side h1{color:var(--or-clair);font-size:var(--fs-md)}
.admin-side a{display:block;color:var(--lin);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);font-size:var(--fs-sm)}
.admin-side a:hover,.admin-side a.actif{background:rgba(245,238,225,.10);color:var(--or-clair)}
.admin-main{padding:var(--sp-6);background:var(--bg)}
.kpi-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--sp-4);margin-bottom:var(--sp-6)}
.kpi{background:var(--surface);border:1px solid var(--bordure);border-left:3px solid var(--or-patine);border-radius:var(--r-md);padding:var(--sp-4)}
.kpi .n{font-family:var(--font-titre);font-size:var(--fs-xl);color:var(--accent-fort)}
.kpi .l{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--texte-2)}
@media(max-width:760px){.admin-wrap{grid-template-columns:1fr}.admin-side{position:static}}