/* =========================================================
   GANELON – style.css (full rewrite)
   Palette : primaire #3b82f6, foncé #0f172a, clair #f8fafc
   Typo système. Accessibilité (focus visibles).
   ========================================================= */

/* ------------------ Reset & Base ------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{height:100%;margin:0;padding:0}
img{max-width:100%;display:block;height:auto}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit}
hr{border:none;border-top:1px solid var(--border);margin:2rem 0}

:root{
  --bg:#ffffff; --bg-soft:#f8fafc; --text:#0f172a; --muted:#64748b;
  --primary:#3b82f6; --primary-600:#2563eb; --primary-50:#eff6ff;
  --border:#e5e7eb; --shadow:0 8px 30px rgba(2,6,23,.08);
  --radius:14px; --radius-sm:10px;
  --danger:#dc2626; --success:#16a34a; --warning:#f59e0b;

  /* Sidebars */
  --sidebar-w:260px;
  --sidebar-bg:#0b1220; --sidebar-fg:#cbd5e1; --sidebar-border:#1e293b33;
}

body{
  background:var(--bg); color:var(--text);
  font:16px/1.55 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ------------------ Typography (fluid) ------------------ */
h1,.h1{font-size:clamp(1.6rem,2.6vw + .6rem,2.75rem);line-height:1.15;margin:.2rem 0}
h2,.h2{font-size:clamp(1.25rem,1.6vw + .5rem,2rem);line-height:1.2;margin:.2rem 0 1rem}
h3,.h3{font-size:clamp(1.1rem,1vw + .4rem,1.35rem);line-height:1.25;margin:.2rem 0 .6rem}
p,.p{font-size:clamp(1rem,.3vw + .95rem,1.125rem);margin:.5rem 0}

/* ------------------ Containers & Layout ------------------ */
.container{width:min(1140px,92%);margin-inline:auto}

/* ------------------ Header (public) ------------------ */
.site-header{
  position:sticky; top:0; z-index:60; background:#fff;
  border-bottom:1px solid var(--border); backdrop-filter:saturate(120%) blur(8px)
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  gap:.8rem; padding:.75rem 0;
}
.brand .logo{height:64px; width:auto}
.main-nav{display:flex; align-items:center; gap:.8rem; flex-wrap:wrap}
.main-nav a{padding:.5rem .7rem; color:var(--text); border-radius:8px}
.main-nav a:hover{color:var(--primary); background:var(--primary-50)}
.main-nav .btn{margin-left:.3rem}

@media (max-width:640px){
  .site-header .container{flex-wrap:wrap}
  .main-nav{width:100%; justify-content:center; gap:.4rem}
}

/* ------------------ Buttons ------------------ */
.btn{
  --_bg:var(--primary); --_fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  min-height:44px; padding:.78rem 1.1rem; border-radius:var(--radius-sm);
  border:1px solid transparent; background:var(--_bg); color:var(--_fg);
  box-shadow:0 2px 10px rgba(37,99,235,.18); cursor:pointer; text-decoration:none;
  transition:.2s ease; will-change:transform
}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(37,99,235,.2);text-decoration:none}
.btn:active{transform:translateY(0) scale(.98)}
.btn-outline{--_bg:transparent;--_fg:var(--primary);border-color:var(--primary);
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(180deg,#93c5fd,#3b82f6) border-box;border:1px solid transparent}
.btn-outline:hover{background:var(--primary);color:#fff}
.btn-ghost{--_bg:transparent;--_fg:var(--text);border-color:transparent;box-shadow:none}
.btn-ghost:hover{background:var(--primary-50);color:var(--primary)}
.btn-danger{--_bg:var(--danger)}
.btn-small,.btn-sm{padding:.45rem .65rem;font-size:.9rem}
.btn[disabled],.btn:disabled{opacity:.6;cursor:not-allowed}

/* ------------------ Utilities ------------------ */
.muted{color:var(--muted)}
.mt-1{margin-top:1rem}
.inline{display:inline}
.maxw-900{max-width:900px}
.hp{position:absolute!important;left:-999rem!important;top:auto!important}

/* ------------------ Hero (animated, clean) ------------------ */
.hero{
  position:relative; min-height:clamp(380px, 42vw, 520px);
  display:flex; align-items:center; justify-content:center;
  text-align:center; color:var(--text); overflow:hidden; background:var(--bg-soft)
}
/* gradient animé avec tes couleurs */
.hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, var(--primary-600), var(--primary), var(--primary-50), var(--bg));
  background-size:380% 380%;
  animation:heroGradient 16s ease infinite;
  z-index:0;
}
/* voile glass lisible */
.hero::after{
  content:""; position:absolute; inset:0;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(18px) saturate(140%);
  z-index:1;
}
.hero-content{position:relative; z-index:2; max-width:800px; padding:0 1rem}
.hero h1{margin:0 0 .5rem}
.hero p{margin:.4rem 0 0; color:var(--muted)}
.hero .btn{margin-top:1.2rem; padding:.9rem 1.6rem; background:var(--primary); color:#fff}
.hero .btn:hover{background:var(--primary-600); transform:translateY(-3px)}
/* particules optionnelles si <span> dans .hero */
.hero span{
  position:absolute; border-radius:50%; background:var(--primary-50);
  opacity:.38; animation:float 18s linear infinite; z-index:0;
}
.hero span:nth-child(1){width:120px;height:120px;left:8%; top:62%}
.hero span:nth-child(2){width:80px; height:80px; left:72%; top:22%; animation-delay:4s}
.hero span:nth-child(3){width:200px;height:200px;left:50%; top:78%; animation-delay:8s}
.hero span:nth-child(4){width:60px; height:60px; left:86%; top:68%; animation-delay:12s}

@keyframes heroGradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes float{
  0%{transform:translateY(0) scale(1);opacity:.38}
  50%{transform:translateY(-100px) scale(1.08);opacity:.6}
  100%{transform:translateY(0) scale(1);opacity:.38}
}

/* ------------------ Sections ------------------ */
section{padding:3rem 0}
section h2{margin:0 0 1.25rem}

/* ------------------ Cards & Grids ------------------ */
.grid{display:grid; gap:clamp(.9rem,1.6vw,1.2rem); grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}

.card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1rem
}
.card img{border-radius:12px; margin-bottom:.7rem}
.card-quote{
  min-width:280px; border:1px solid var(--border); border-radius:var(--radius);
  padding:1rem 1.2rem; background:#fff; box-shadow:var(--shadow)
}
.card-quote blockquote{margin:0 0 .7rem; font-size:1.05rem}
.card-quote figcaption{color:var(--muted)}

/* ------------------ Carousel (scroll-snap) ------------------ */
.carousel{display:flex; gap:1rem; overflow:auto; padding-bottom:.4rem; scroll-snap-type:x mandatory}
.carousel>*{scroll-snap-align:start}
.carousel::-webkit-scrollbar{height:10px}
.carousel::-webkit-scrollbar-thumb{background:#cbd5e1; border-radius:999px}
.carousel.logos .logo-slide{
  background:#fff; border:1px solid var(--border); border-radius:14px;
  padding:.8rem; min-width:140px; display:grid; place-items:center; box-shadow:var(--shadow)
}
.carousel.logos img{max-height:46px; width:auto}

/* ------------------ Footer ------------------ */
.site-footer{border-top:1px solid var(--border); background:var(--bg-soft)}
.site-footer .container{padding:1.2rem 0; text-align:center; color:var(--muted)}

/* =========================================================
   FORMULAIRES (public + admin + client)
   ========================================================= */
.form{display:grid; gap:.9rem}
.form label{display:grid; gap:.45rem; font-weight:600}
.form .check{display:flex; align-items:center; gap:.5rem; font-weight:500}
.form .checkline{display:flex; align-items:center; gap:.5rem; padding:.35rem .4rem; border-radius:10px}
.form .checkline:hover{background:var(--bg-soft)}

input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="tel"],
input[type="file"],select,textarea{
  padding:.65rem .75rem; border:1px solid var(--border); border-radius:12px;
  background:#fff; color:var(--text); outline:none; transition:.15s ease
}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--primary); box-shadow:0 0 0 4px rgba(59,130,246,.15)}
.form-actions{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap}
.form-feedback{color:var(--muted)}
.success{color:var(--success)}
.error{color:var(--danger); background:#fee2e2; border:1px solid #fecaca; padding:.5rem .7rem; border-radius:10px}

/* grid helpers */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:.9rem}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem}
@media (max-width:800px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* qty inline */
.qty{display:flex; align-items:center; gap:.6rem}
.input-qty,.input-qty-cart{width:86px}

/* password eye */
.pwd-wrap{position:relative}
.btn-eye{position:absolute; right:.4rem; top:50%; transform:translateY(-50%); border:none; background:transparent; cursor:pointer; font-size:1rem; opacity:.7}
.btn-eye:hover{opacity:1}

/* previews */
.img-preview{width:100%; max-width:260px; border:1px solid var(--border); border-radius:12px; object-fit:cover; display:block}
.img-preview.contain{object-fit:contain; background:var(--bg-soft)}

/* =========================================================
   PAGES PUBLIQUES
   ========================================================= */
.services .card p{color:var(--muted)}
#contact .form{max-width:800px; margin-inline:auto}

/* =========================================================
   BOUTIQUE PUBLIQUE & ESPACE CLIENT
   ========================================================= */
.client-page{background:linear-gradient(180deg,#fff,#f8fafc 40%)}

/* ---- Sidebar CLIENT (fixe desktop) ---- */
.sidebar-client{
  position:fixed; inset:0 auto 0 0; width:var(--sidebar-w);
  overflow-y:auto; background:var(--sidebar-bg); color:var(--sidebar-fg);
  border-right:1px solid var(--sidebar-border); z-index:50; padding:1rem
}
.sidebar-client .logo-client{display:flex; align-items:center; gap:.6rem; margin-bottom:1rem}
.sidebar-client .logo-client img{height:120px}
.nav-client ul{list-style:none; padding:0; margin:0; display:grid; gap:.4rem}
.nav-client a{display:block; padding:.55rem .7rem; border-radius:10px; color:inherit}
.nav-client a:hover{background:#0f172a}
.nav-client a.active{background:#111827; color:#fff}

/* ---- Contenu client (décalage) ---- */
.main-client{margin-left:var(--sidebar-w); padding:1.2rem; min-height:100dvh}
.header-client{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; flex-wrap:wrap}
.filter-cat select{min-width:240px}
.products-section .grid-products{display:grid; gap:1rem; grid-template-columns:repeat(3,1fr)}
@media (max-width:1024px){.products-section .grid-products{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.products-section .grid-products{grid-template-columns:1fr}}
.card-product{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:1rem; box-shadow:var(--shadow); display:grid; gap:.6rem
}
.card-product h3{margin:.2rem 0}
.card-product .muted{font-size:.95rem}
.prod-img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; background:#f1f5f9; border:1px solid var(--border)}
.prod-img.placeholder{display:grid; place-items:center; color:var(--muted); font-size:.95rem; font-style:italic}
.price{font-weight:700}
.tiers summary{cursor:pointer; color:var(--primary)}
.tier-list{margin:.5rem 0 0; padding-left:1rem; color:var(--muted)}

/* ---- Panier overlay ---- */
.cart-overlay{
  position:fixed; inset:0; display:grid; place-items:center; padding:2rem 1rem;
  background:rgba(2,6,23,.55); backdrop-filter:blur(6px); opacity:1; visibility:visible; transition:.2s ease; z-index:70
}
.cart-overlay[aria-hidden="true"]{opacity:0; visibility:hidden; pointer-events:none}
.cart-content{
  width:min(900px,96vw); max-height:88vh; overflow:auto; background:#fff; border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1.2rem; position:relative
}
.close-cart{position:absolute; right:.6rem; top:.6rem; border:none; background:#f1f5f9; width:34px; height:34px; border-radius:10px; cursor:pointer}
.cart-table{width:100%; border-collapse:collapse; margin:.8rem 0}
.cart-table th,.cart-table td{border-bottom:1px solid var(--border); padding:.55rem .4rem; text-align:left}
.cart-table thead th{position:sticky; top:0; background:#f8fafc; z-index:1}
.totals{background:#f8fafc; border:1px dashed #cbd5e1; padding:1rem; border-radius:12px; margin-top:1rem}
.sum-lines{display:flex; gap:1rem; flex-wrap:wrap; justify-content:flex-end; margin-top:.6rem}
.cart-total{font-size:1.1rem}

/* =========================================================
   AUTH
   ========================================================= */
.login-page{display:grid; place-items:center; min-height:100vh; background:var(--bg-soft)}
.logo-login{height:150px; margin:0 auto .6rem; display:block}

/* =========================================================
   ADMIN
   ========================================================= */

/* ---- Sidebar ADMIN (fixe desktop) ---- */
.sidebar{
  position:fixed; inset:0 auto 0 0; width:var(--sidebar-w);
  overflow-y:auto; background:var(--sidebar-bg); color:var(--sidebar-fg);
  border-right:1px solid var(--sidebar-border); z-index:50; padding:1rem;
  display:flex; flex-direction:column; gap:1rem
}
.logo-admin{display:flex; align-items:center; gap:.6rem}
.logo-admin img{height:120px}
.logo-admin h2{font-size:1.1rem; margin:0}
.nav-admin ul{list-style:none; margin:0; padding:0; display:grid; gap:.25rem}
.nav-admin a{
  display:block; color:inherit; padding:.6rem 1rem; border-radius:.6rem; margin:.15rem .2rem;
  transition:background .15s ease, transform .12s ease
}
.nav-admin a:hover{background:#0f172a; transform:translateX(2px)}
.nav-admin a.active{background:#111827; color:#fff; font-weight:600}

/* ---- Contenu ADMIN (décalé) ---- */
.main-admin{margin-left:var(--sidebar-w); padding:1.2rem; min-height:100dvh}
.header-admin{
  position:sticky; top:0; z-index:40; background:linear-gradient(#fff,rgba(255,255,255,.94));
  backdrop-filter:blur(6px); border-bottom:1px solid var(--border); padding:.8rem 0; margin-bottom:1rem
}

/* ---- Tables / cartes ---- */
.table-section{background:#fff; border:1px solid var(--border); border-radius:14px; padding:1rem; box-shadow:var(--shadow)}
.table-admin{width:100%; border-collapse:collapse}
.table-admin th,.table-admin td{border-bottom:1px solid var(--border); padding:.6rem .5rem; text-align:left; vertical-align:middle}
.table-admin thead th{background:#f8fafc; font-weight:700; letter-spacing:.2px}
.table-admin .actions{white-space:nowrap}
.thumb-small{width:54px; height:54px; object-fit:cover; border-radius:10px; border:1px solid var(--border)}

/* ---- Dashboard ---- */
.chart-card{background:#fff; border:1px solid var(--border); border-radius:14px; padding:1rem; box-shadow:var(--shadow)}
#chartOrders{width:100%; max-width:100%; height:360px; display:block}

/* ---- Order details ---- */
.order-details-row td{background:#fbfdff}
.order-details-container{padding:.8rem}
.order-details-table td,.order-details-table th{background:transparent}

/* ---- Modals (CRUD) ---- */
.modal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(2,6,23,.55); backdrop-filter:blur(6px); padding:1rem; z-index:80;
  opacity:0; transform:scale(.98); transition:opacity .18s ease, transform .18s ease
}
.modal.is-open,.modal[open],.modal[data-open="1"]{display:flex; opacity:1; transform:none}
.modal-content{
  background:#fff; border-radius:16px; padding:1rem; width:min(900px,96vw);
  box-shadow:var(--shadow); position:relative; max-height:90vh; overflow:auto
}
.modal-close{
  position:absolute; right:.6rem; top:.6rem; border:none; background:#f1f5f9;
  width:34px; height:34px; border-radius:10px; cursor:pointer
}

/* ---- Cat picker ---- */
.cat-picker{display:grid; gap:.6rem; border:1px solid var(--border); border-radius:12px; padding:.6rem}
.cat-picker .cat-search{width:100%}
.cat-picker .cat-list{max-height:180px; overflow:auto; border:1px dashed #e2e8f0; padding:.4rem; border-radius:10px}
.cat-picker .cat-chips{display:flex; flex-wrap:wrap; gap:.4rem}
.cat-picker .cat-chips .chip{background:var(--primary-50); color:var(--primary); padding:.25rem .5rem; border-radius:999px; font-size:.85rem}
.cat-picker .cat-tools{display:flex; gap:.4rem}

/* ---- Tier editor ---- */
.tier-editor{border:1px solid var(--border); border-radius:12px; padding:.6rem}
.tier-editor legend{font-weight:700}
.tier-toolbar{display:flex; gap:.4rem; margin-bottom:.4rem}
.tier-table{width:100%; border-collapse:collapse}
.tier-table th,.tier-table td{border-bottom:1px solid var(--border); padding:.5rem}
.tier-table input[type="number"]{width:120px}

/* =========================================================
   ESPACE CLIENT – commandes
   ========================================================= */
.orders-section{display:grid; gap:1rem}
.order-card{background:#fff; border:1px solid var(--border); border-radius:14px; padding:1rem; box-shadow:var(--shadow)}
.order-header{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.status{padding:.2rem .55rem; border-radius:999px; font-size:.85rem; border:1px solid}
.status.pending{color:#92400e;background:#fff7ed;border-color:#fde68a}
.status.accepted{color:#065f46;background:#ecfdf5;border-color:#a7f3d0}
.status.refused{color:#7f1d1d;background:#fef2f2;border-color:#fecaca}
.status.printing{color:#1e40af;background:#eff6ff;border-color:#bfdbfe}
.status.shipped{color:#0369a1;background:#e0f2fe;border-color:#bae6fd}
.status.delivered{color:#166534;background:#ecfdf5;border-color:#86efac}
.status.received{color:#065f46;background:#ecfdf5;border-color:#a7f3d0}
.order-items{margin:.5rem 0; padding-left:1.2rem}
.order-total{font-size:1.05rem}

/* =========================================================
   SETTINGS PAGE
   ========================================================= */
.maxw-900 textarea{min-height:220px}

/* =========================================================
   MISC / PAGES SIMPLES
   ========================================================= */
.main-centered{min-height:60vh; display:grid; place-items:center; text-align:center; gap:1rem; padding:2rem}

/* =========================================================
   Focus visibles & Accessibilité
   ========================================================= */
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid color-mix(in oklab, var(--primary) 50%, transparent);
  outline-offset:3px; border-radius:10px
}

/* =========================================================
   Animations douces (respecte prefers-reduced-motion)
   ========================================================= */
@media (prefers-reduced-motion:no-preference){
  @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .card,.card-product,.table-section,.chart-card,.order-card,.services .card,.card-quote{animation:fadeUp .45s ease both}
  .table-admin tbody tr{transition:background .15s ease}
  .table-admin tbody tr:hover{background:#f8fafc}
  .cart-content{transform:translateY(8px) scale(.98); transition:transform .22s ease}
  .cart-overlay:not([aria-hidden="true"]) .cart-content{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .hero::before,.hero span{animation:none}
}

/* =========================================================
   Responsive – Sidebars non fixes sur mobile
   ========================================================= */
@media (max-width:980px){
  .sidebar,.sidebar-client{
    position:static; inset:auto; width:auto; height:auto; max-height:none;
    border-right:none; border-bottom:1px solid var(--sidebar-border)
  }
  .main-admin,.main-client{margin-left:0; padding:1rem}
}

/* =========================================================
   Print
   ========================================================= */
@media print{
  .site-header,.site-footer,.sidebar,.sidebar-client,.btn,.close-cart,.modal{display:none!important}
  .container,.main-admin,.main-client{width:100%; margin:0; padding:0}
  a{color:#000; text-decoration:underline}
}