:root{
    --graphite:#F7F4EC;
    --graphite-2:#FFFFFF;
    --paper:#221F1C;
    --paper-dim:#6B6357;
    --copper:#A8552A;
    --copper-soft:#8C4A22;
    --blueprint:#3E6488;
    --walnut:#6B4126;
    --line:rgba(34,31,28,0.12);
    --ok:#4F7A49;
    --err:#B5453F;
    --header-bg:rgba(247,244,236,0.88);
    --overlay-bg:rgba(20,18,15,0.45);
    --card-light-bg:#F3EEE3;
    --card-light-ink:#221F1C;
    --card-light-ink-dim:#5B5347;
    --radius:2px;
  }
  html[data-theme="dark"]{
    --graphite:#17181A;
    --graphite-2:#1F2124;
    --paper:#EFEAE0;
    --paper-dim:#D9D2C2;
    --copper:#C97D4B;
    --copper-soft:#E3B48C;
    --blueprint:#5C82A3;
    --walnut:#7A4E30;
    --line:rgba(239,234,224,0.14);
    --ok:#8FAF8A;
    --err:#C97D7D;
    --header-bg:rgba(23,24,26,0.88);
    --overlay-bg:rgba(10,10,10,0.55);
    --card-light-bg:#F3EEE3;
    --card-light-ink:#221F1C;
    --card-light-ink-dim:#5B5347;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;background:var(--graphite);color:var(--paper);font-family:'Manrope',sans-serif;-webkit-font-smoothing:antialiased;}
  h1,h2,h3,.display{font-family:'Fraunces',serif;font-weight:500;letter-spacing:-0.01em;margin:0;}
  .mono{font-family:'IBM Plex Mono',monospace;letter-spacing:0.06em;text-transform:uppercase;}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1200px;margin:0 auto;padding:0 32px;}
  @media(max-width:640px){.wrap{padding:0 20px;}}
  @media (prefers-reduced-motion: reduce){*{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}}
  button{font-family:inherit;}
  input,select,textarea{
    font-family:'Manrope',sans-serif; font-size:14px;
    background:var(--graphite); color:var(--paper);
    border:1px solid var(--line); border-radius:var(--radius);
    padding:12px 14px; width:100%; outline:none;
    transition:border-color .2s;
  }
  input:focus,select:focus,textarea:focus{border-color:var(--copper);}
  label{font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--paper-dim); display:block; margin-bottom:8px;}
  .field{margin-bottom:18px;}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  @media(max-width:520px){.field-row{grid-template-columns:1fr;}}

  /* ---------- Header ---------- */
  header{position:sticky; top:0; z-index:50; background:var(--header-bg); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
  .nav{display:flex; align-items:center; justify-content:space-between; height:76px; gap:20px;}
  .logo{font-family:'Fraunces',serif; font-size:22px; font-weight:600; display:flex; align-items:center; gap:10px;}
  .logo .dot{width:8px;height:8px;border-radius:50%;background:var(--copper);box-shadow:0 0 0 3px rgba(201,125,75,0.2);}
  nav.links{display:flex; gap:36px; align-items:center;}
  nav.links a{font-size:13px; font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:0.08em; color:var(--paper-dim); position:relative; padding-bottom:4px; transition:color .2s;}
  nav.links a:hover{color:var(--paper);}
  nav.links a::after{content:'';position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--copper); transition:width .25s ease;}
  nav.links a:hover::after{width:100%;}
  .btn{font-family:'IBM Plex Mono',monospace; font-size:12.5px; text-transform:uppercase; letter-spacing:0.08em; padding:12px 22px; border:1px solid var(--copper); color:var(--copper); border-radius:var(--radius); display:inline-flex; align-items:center; gap:8px; transition:background .2s, color .2s, transform .2s; cursor:pointer; background:transparent;}
  .btn:hover{background:var(--copper); color:var(--graphite); transform:translateY(-1px);}
  .btn.solid{background:var(--copper); color:var(--graphite);}
  .btn.solid:hover{background:var(--copper-soft); border-color:var(--copper-soft);}
  .btn.ghost{border-color:var(--line); color:var(--paper);}
  .btn.ghost:hover{border-color:var(--paper); background:transparent; color:var(--paper);}
  .btn.block{width:100%; justify-content:center;}
  .btn[disabled]{opacity:0.4; cursor:not-allowed; pointer-events:none;}
  .header-actions{display:flex; gap:14px; align-items:center;}
  .cart-btn{position:relative; display:flex; align-items:center; gap:8px; padding:10px 16px; border:1px solid var(--line); border-radius:var(--radius); cursor:pointer; background:transparent; color:var(--paper); transition:border-color .2s;}
  .cart-btn:hover{border-color:var(--copper);}
  .cart-badge{position:absolute; top:-7px; right:-7px; background:var(--copper); color:var(--graphite); font-family:'IBM Plex Mono',monospace; font-size:10px; min-width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 4px;}
  .burger{display:none;}
  @media(max-width:900px){nav.links{display:none;} .burger{display:block;}}

  /* ---------- Hero ---------- */
  .hero{position:relative; padding:96px 0 60px; overflow:hidden; border-bottom:1px solid var(--line);}
  .hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center;}
  @media(max-width:900px){.hero-grid{grid-template-columns:1fr; gap:40px;}}
  .eyebrow{font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:0.14em; color:var(--copper); display:flex; align-items:center; gap:10px; margin-bottom:22px;}
  .eyebrow::before{content:'';width:26px;height:1px;background:var(--copper);}
  .hero h1{font-size:clamp(38px,5.4vw,64px); line-height:1.04; color:var(--paper);}
  .hero h1 em{font-style:italic; color:var(--copper-soft);}
  .hero p.lead{margin-top:24px; font-size:17px; line-height:1.65; color:var(--paper-dim); max-width:480px;}
  .hero-actions{margin-top:36px; display:flex; gap:16px; flex-wrap:wrap;}
  .hero-stats{margin-top:52px; display:flex; gap:40px; flex-wrap:wrap;}
  .hero-stats div{border-left:1px solid var(--line); padding-left:16px;}
  .hero-stats .num{font-family:'Fraunces',serif; font-size:26px; color:var(--copper-soft);}
  .hero-stats .lbl{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--paper-dim); text-transform:uppercase; letter-spacing:0.06em;}
  .hero-art{position:relative; aspect-ratio:1/1; max-width:520px; margin:0 auto;}
  .hero-art svg{width:100%; height:100%;}
  .toolpath{fill:none; stroke:var(--blueprint); stroke-width:1.4; stroke-dasharray:4 5; stroke-linecap:round; opacity:0.9;}
  .cutline{fill:none; stroke:var(--copper); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1400; stroke-dashoffset:1400; animation:draw 3.2s ease forwards 0.4s;}
  @keyframes draw{ to{ stroke-dashoffset:0; } }
  .rosace-fill{fill:var(--walnut); opacity:0; animation:fadeIn 1.2s ease forwards 3.4s;}
  @keyframes fadeIn{ to{opacity:0.9;} }
  .crosshair{stroke:var(--paper-dim); stroke-width:0.6; opacity:0.35;}
  .coord{font-family:'IBM Plex Mono',monospace; font-size:9px; fill:var(--paper-dim); opacity:0.5;}

  /*  Section  */
  .section{padding:100px 0;}
  .section.tight{padding:80px 0;}
  .sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:56px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:28px;}
  .sec-head .eyebrow{margin-bottom:12px;}
  .sec-head h2{font-size:clamp(28px,3.4vw,40px); color:var(--paper);}
  .sec-head p{color:var(--paper-dim); max-width:380px; font-size:14.5px; line-height:1.6;}

  /*  Categories  */
  .cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
  @media(max-width:900px){.cat-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:560px){.cat-grid{grid-template-columns:1fr;}}
  .cat-card{background:var(--graphite); padding:34px 28px; min-height:190px; display:flex; flex-direction:column; justify-content:space-between; transition:background .3s; position:relative; overflow:hidden;}
  .cat-card:hover{background:var(--graphite-2);}
  .cat-card .idx{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--copper); letter-spacing:0.08em;}
  .cat-card h3{font-size:21px; margin-top:20px; color:var(--paper);}
  .cat-card .n{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--paper-dim); margin-top:8px;}
  .cat-card svg{position:absolute; right:-10px; bottom:-10px; width:96px; height:96px; stroke:var(--line); fill:none; stroke-width:1; transition:stroke .3s, transform .5s;}
  .cat-card:hover svg{stroke:var(--copper); transform:rotate(12deg) scale(1.05);}

  /*  Steps  */
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0;}
  @media(max-width:800px){.steps{grid-template-columns:1fr; gap:40px;}}
  .step{padding:0 28px; position:relative;}
  .step:first-child{padding-left:0;}
  .step:not(:last-child)::after{content:''; position:absolute; top:20px; right:-1px; height:1px; width:56px; background:repeating-linear-gradient(90deg,var(--copper) 0 6px, transparent 6px 11px);}
  @media(max-width:800px){.step:not(:last-child)::after{display:none;}}
  .step .num{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--copper); border:1px solid var(--copper); width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
  .step h3{margin-top:22px; font-size:20px; color:var(--paper);}
  .step p{margin-top:12px; color:var(--paper-dim); font-size:14.5px; line-height:1.65;}

  /*  Products  */
  .prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
  @media(max-width:1000px){.prod-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:560px){.prod-grid{grid-template-columns:1fr;}}
  .prod-card{background:var(--graphite-2); border:1px solid var(--line); display:flex; flex-direction:column; transition:border-color .25s, transform .25s;}
  .prod-card:hover{border-color:var(--copper); transform:translateY(-4px);}
  .prod-thumb{aspect-ratio:4/3; position:relative; overflow:hidden; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:center; background:var(--graphite);}
  .prod-thumb svg{width:70%; height:70%;}
  .prod-thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease;}
  .prod-card:hover .prod-thumb img{transform:scale(1.04);}
  .prod-tag{position:absolute; top:10px; left:10px; font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color:var(--graphite); background:var(--copper-soft); padding:4px 8px;}
  .prod-body{padding:18px 18px 20px;}
  .prod-body .maker{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--paper-dim); text-transform:uppercase; letter-spacing:0.05em;}
  .prod-body h3{font-size:16.5px; margin-top:8px; color:var(--paper); font-weight:500;}
  .prod-foot{display:flex; justify-content:space-between; align-items:center; margin-top:16px;}
  .price{font-family:'Fraunces',serif; font-size:19px; color:var(--copper-soft);}
  .price small{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--paper-dim);}
  .add{width:32px; height:32px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition:border-color .2s, background .2s; font-size:16px; color:var(--paper); cursor:pointer; background:transparent;}
  .add:hover{border-color:var(--copper); background:var(--copper); color:var(--graphite);}
  .add.added{background:var(--ok); border-color:var(--ok); color:var(--graphite);}

  /*  Footer  */
  footer{border-top:1px solid var(--line); padding:56px 0 32px;}
  .foot-grid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px;}
  @media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr;}}
  .foot-grid h4{font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--paper-dim); margin-bottom:16px;}
  .foot-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
  .foot-grid a{font-size:14px; color:var(--paper); opacity:0.85; transition:opacity .2s;}
  .foot-grid a:hover{opacity:1; color:var(--copper-soft);}
  .foot-bottom{margin-top:48px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--paper-dim);}

  .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}

  /*  Cart drawer  */
  .overlay{position:fixed; inset:0; background:var(--overlay-bg); opacity:0; pointer-events:none; transition:opacity .3s; z-index:90;}
  .overlay.open{opacity:1; pointer-events:auto;}
  .drawer{position:fixed; top:0; right:0; height:100%; width:420px; max-width:92vw; background:var(--graphite-2); border-left:1px solid var(--line); z-index:95; transform:translateX(100%); transition:transform .35s ease; display:flex; flex-direction:column;}
  .drawer.open{transform:translateX(0);}
  .drawer-head{display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line);}
  .drawer-head h3{font-size:19px;}
  .drawer-close{background:none; border:none; color:var(--paper); font-size:22px; cursor:pointer; line-height:1; padding:4px;}
  .drawer-body{flex:1; overflow-y:auto; padding:20px 24px;}
  .cart-empty{text-align:center; color:var(--paper-dim); font-size:13.5px; padding:60px 10px;}
  .cart-item{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line);}
  .cart-item .thumb{width:56px; height:56px; background:var(--graphite); border:1px solid var(--line); flex-shrink:0; display:flex; align-items:center; justify-content:center;}
  .cart-item .thumb svg{width:60%; height:60%; stroke:var(--copper); fill:none; stroke-width:1.5;}
  .cart-item .info{flex:1; min-width:0;}
  .cart-item .name{font-size:13.5px; color:var(--paper);}
  .cart-item .unit{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--paper-dim); margin-top:4px;}
  .qty-ctrl{display:flex; align-items:center; gap:10px; margin-top:10px;}
  .qty-ctrl button{width:22px; height:22px; border:1px solid var(--line); background:none; color:var(--paper); cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center;}
  .qty-ctrl button:hover{border-color:var(--copper);}
  .qty-ctrl .qn{font-family:'IBM Plex Mono',monospace; font-size:12.5px; min-width:16px; text-align:center;}
  .item-remove{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--paper-dim); background:none; border:none; cursor:pointer; text-decoration:underline; padding:0; margin-left:auto;}
  .item-remove:hover{color:var(--err);}
  .item-total{font-family:'Fraunces',serif; color:var(--copper-soft); font-size:14.5px; white-space:nowrap;}

  .drawer-foot{border-top:1px solid var(--line); padding:20px 24px 26px;}
  .sub-row{display:flex; justify-content:space-between; margin-bottom:6px; font-size:13.5px; color:var(--paper-dim);}
  .total-row{display:flex; justify-content:space-between; margin:14px 0 20px; font-family:'Fraunces',serif; font-size:20px; color:var(--paper);}
  .total-row span:last-child{color:var(--copper-soft);}

  .checkout-form{display:none;}
  .checkout-form.show{display:block;}
  .back-link{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--paper-dim); background:none; border:none; cursor:pointer; display:flex; align-items:center; gap:6px; margin-bottom:18px;}
  .back-link:hover{color:var(--copper-soft);}
  .cart-list-view.hide, .cart-foot-default.hide{display:none;}

  .wa-note{display:flex; gap:10px; align-items:flex-start; font-size:12px; color:var(--paper-dim); background:var(--graphite); border:1px solid var(--line); padding:12px 14px; margin-top:14px; line-height:1.5;}
  .wa-note b{color:var(--copper-soft);}

/* 
   LANGUE ARABE — police, RTL, sélecteur de langue
    */

.lang-switch{
  display:flex; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.lang-btn{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.06em;
  padding:9px 13px; background:transparent; color:var(--paper-dim); border:none; cursor:pointer;
  transition:background .2s, color .2s;
}
.lang-btn + .lang-btn{ border-left:1px solid var(--line); }
.lang-btn:hover{ color:var(--paper); }
.lang-btn.active{ background:var(--copper); color:var(--graphite); }

/* Police arabe : Tajawal pour le texte courant, Markazi Text pour les titres */
html[lang="ar"] body{
  font-family:'Tajawal','Manrope',sans-serif;
}
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] .display,
html[lang="ar"] .logo{
  font-family:'Markazi Text','Fraunces',serif;
  font-weight:700;
}
html[lang="ar"] .price{
  font-family:'Markazi Text','Fraunces',serif;
  font-weight:700;
}
html[lang="ar"] .mono,
html[lang="ar"] .eyebrow,
html[lang="ar"] .idx,
html[lang="ar"] .n,
html[lang="ar"] .num,
html[lang="ar"] .lbl,
html[lang="ar"] .maker,
html[lang="ar"] .prod-tag,
html[lang="ar"] label,
html[lang="ar"] .cart-item .unit,
html[lang="ar"] .lang-btn,
html[lang="ar"] .btn,
html[lang="ar"] .foot-grid h4,
html[lang="ar"] .foot-bottom,
html[lang="ar"] .form-note,
html[lang="ar"] .wa-note{
  font-family:'Tajawal','IBM Plex Mono',monospace;
  letter-spacing:0;
}

/*  Overrides RTL  */
html[dir="rtl"]{
  text-align:right;
}
html[dir="rtl"] .eyebrow::before{
  order:2;
}
html[dir="rtl"] .hero-stats div{
  border-left:none;
  border-right:1px solid var(--line);
  padding-left:0;
  padding-right:16px;
}
html[dir="rtl"] .step:not(:last-child)::after{
  right:auto; left:-1px;
  background:repeating-linear-gradient(270deg,var(--copper) 0 6px, transparent 6px 11px);
}
html[dir="rtl"] .item-remove{
  margin-left:0; margin-right:auto;
}
html[dir="rtl"] .cat-card svg{
  right:auto; left:-10px;
}
html[dir="rtl"] .cart-item{
  text-align:right;
}
html[dir="rtl"] .drawer{
  border-left:none;
  border-right:1px solid var(--line);
}
html[dir="rtl"] .back-link{
  flex-direction:row-reverse;
}
html[dir="rtl"] .qty-ctrl{
  flex-direction:row-reverse;
  justify-content:flex-end;
}
html[dir="rtl"] .cart-item .thumb{
  order:2;
}
html[dir="rtl"] .cart-item .item-total{
  order:0;
}

/* 
   BASCULE MODE CLAIR / MODE NUIT
    */
.theme-toggle{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:var(--radius); background:transparent;
  cursor:pointer; color:var(--paper); transition:border-color .2s;
}
.theme-toggle:hover{ border-color:var(--copper); }
.theme-toggle svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.6; }
.theme-toggle .icon-moon{ display:block; }
.theme-toggle .icon-sun{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }

/* 
   PAGE DE COMMANDE AUTONOME (commande.html) */
.order-header{ display:flex; align-items:center; justify-content:space-between; padding:26px 0; }
.order-header .back{ font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--paper-dim); display:flex; align-items:center; gap:8px; }
.order-header .back:hover{ color:var(--copper); }
.order-title{ padding:20px 0 40px; border-bottom:1px solid var(--line); margin-bottom:44px; }
.order-title h1{ font-size:clamp(28px,3.6vw,42px); }
.order-title p{ color:var(--paper-dim); margin-top:10px; font-size:14.5px; }

.order-grid{ display:grid; grid-template-columns:1.2fr 0.95fr; gap:48px; align-items:start; padding-bottom:100px; }
@media(max-width:900px){ .order-grid{ grid-template-columns:1fr; } }

.order-items{ border:1px solid var(--line); background:var(--graphite-2); }
.order-items .cart-item{ padding:20px; }
.order-items .cart-item .thumb{ width:72px; height:72px; }
.order-items .cart-item .name{ font-size:15px; }

.order-empty{ text-align:center; padding:80px 20px; border:1px solid var(--line); background:var(--graphite-2); color:var(--paper-dim); }
.order-empty a{ color:var(--copper); text-decoration:underline; }

.order-summary{ border:1px solid var(--line); background:var(--graphite-2); padding:28px; position:sticky; top:100px; }
@media(max-width:520px){ .order-summary{ padding:20px; } }
.order-summary h3{ font-size:16px; margin-bottom:20px; }
.clear-cart-link{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--paper-dim); background:none; border:none; cursor:pointer; text-decoration:underline; padding:0; margin-top:14px; }
.clear-cart-link:hover{ color:var(--err); }