:root{
  --primary:#FC5000;
  --bg:#FFFFFF;
  --dark:#1D1D1B;
  --light:#FFFFFF;
  --border:#f0f0f0;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--dark);
  line-height: 1.5;
}

/* Global fonts per language */
html[dir="ltr"] body, html[dir="ltr"] button, html[dir="ltr"] input, html[dir="ltr"] textarea{ 
  font-family: 'Baloo 2', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; 
}
html[dir="rtl"] body, html[dir="rtl"] button, html[dir="rtl"] input, html[dir="rtl"] textarea{ 
  font-family: 'Cairo', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; 
}

.container{max-width:1120px;margin-inline:auto;padding:0 16px}

/* ====== NAVBAR ====== */
.navbar{
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(6px);
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-logo{width:36px;height:36px;border-radius:8px;display:block;object-fit:contain;background:transparent;opacity:.85;transition:opacity .2s ease}
.brand-logo:hover{opacity:1}
.brand-name{font-weight:800;font-size:20px;color:#000;line-height:1.05}
.nav-links{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
html[dir="rtl"] .nav-links{ direction: rtl; flex-direction: row-reverse; }
.nav-btn{background:transparent;border:0;color:var(--dark);font-weight:600;cursor:pointer;padding:6px 8px;border-radius:8px}
.nav-btn:focus{outline:2px solid rgba(0,0,0,.08)}
.lang-btn{border:1px solid var(--primary);color:var(--primary);background:transparent;border-radius:999px;padding:8px 12px;font-weight:600;cursor:pointer}
.btn-blog{display:inline-block;padding:10px 14px;border-radius:999px;border:1px solid rgba(0,0,0,.1);font-weight:600;text-decoration:none;color:var(--dark)}
.btn-blog:hover{opacity:.85}

/* ====== BOUTONS GÉNÉRIQUES ====== */
.btn{display:inline-block;border-radius:999px;padding:12px 18px;font-weight:700;border:2px solid transparent;cursor:pointer;text-decoration:none}
.btn-primary{background:var(--primary);color:#fff}
.btn-outline{border-color:var(--primary);color:var(--primary);background:transparent}

/* ====== HERO ====== */
.hero{display:grid;grid-template-areas:"img" "text";grid-auto-columns: 1fr;gap:24px;padding:56px 0}
.hero-content{ grid-area:text; }
.hero-visual{  grid-area:img;  }
.hero h1{font-size:40px;line-height:1.1;color:var(--primary);margin:0}
.hero p{opacity:.9;margin:10px 0 0}
.hero-ctas{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
/* Center CTAs on full-bleed hero */
.hero.full-bleed .hero-ctas{ justify-content: center; align-items: center; }

.badges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px}
.badge{background:#fff;border:1px solid #eee;border-radius:10px;padding:6px 8px;font-size:12px;display:flex;gap:6px;align-items:center}

/* Image du hero */
.hero-visual img{width:100%;height:auto;display:block;border-radius:24px;max-width:none;margin-inline:auto}

/* Full-bleed hero (cover entire width) */
.hero.full-bleed{ position: relative; display:block; padding:0; }
.full-bleed{ position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw; }
.hero.full-bleed .hero-visual img{ width:100vw; height:70vh; max-width:none; object-fit:cover; border-radius:0; }
.hero.full-bleed .hero-content{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:1; }
.hero.full-bleed .hero-overlay{ position:absolute; inset:0; background:transparent; z-index:0; }
.hero.full-bleed .hero-inner{ width:100%; text-align:center; }
.hero.full-bleed h1{ color: var(--primary); text-shadow:none; font-size: clamp(52px, 8vw, 96px); font-weight:700; }
.hero.full-bleed p, .hero.full-bleed li{ color:#000; text-shadow:none; }
.hero.full-bleed .btn-outline{ border-color:#fff; color:#fff; }
.hero.full-bleed .btn-primary{ box-shadow:0 4px 14px rgba(0,0,0,.12); }

/* Hero fonts by language direction */
html[dir="ltr"] .hero.full-bleed h1,
html[dir="ltr"] .hero.full-bleed p,
html[dir="ltr"] .hero.full-bleed li{ font-family: 'Baloo 2', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

html[dir="rtl"] .hero.full-bleed h1,
html[dir="rtl"] .hero.full-bleed p,
html[dir="rtl"] .hero.full-bleed li{ font-family: 'Cairo', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* ====== CARTES / GRILLES ====== */
.grid{display:grid;gap:16px}
.cards{grid-template-columns:repeat(auto-fit,minmax(200px,240px));justify-content:center;margin-top:24px}
.card{background:#fff;border:2px solid var(--primary);overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.04); display:flex; flex-direction:column; height:100%;}
.card img{width:auto;max-width:100%;height:auto;object-fit:contain;display:block;margin-inline:auto}
.card .p{padding:14px; display:flex; flex-direction:column; gap:4px; flex:1;}
.card .p h3{ margin: 0 0 4px; }
.card .p p{ margin: 0; }
/* Square frame for WHY section cards */
.why-slider .card{ border-radius:0; }

/* ====== BUY BUTTONS (cards) ====== */
.card .btn{ font-size:13px; padding:6px 8px; white-space:nowrap; }
.buy-grid{ display:grid; grid-template-columns: repeat(2, max-content); justify-content:center; align-items:center; gap:6px; }
.buy-grid .btn-primary{ grid-column: 1 / -1; }
.buy-grid{ margin-top:auto; }

/* ====== SLIDER (Produits) ====== */
.slider{ position:relative; padding: 0 28px; }
.slider-track{ display:flex; gap:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding: 8px 4px; scroll-behavior:smooth; scroll-snap-type: x proximity; scroll-padding-inline: calc(50% - 120px); align-items:stretch; }
.slider-track::-webkit-scrollbar{ display:none; }
.slide{ flex: 0 0 auto; width: 240px; scroll-snap-align: center; display:flex; }
.slider-btn{ position:absolute; top:50%; transform: translateY(-50%); background:#fff; border:1px solid rgba(0,0,0,.12); border-radius:999px; width:44px; height:44px; font-size:20px; line-height:1; z-index:5; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.12); }
/* Bigger arrows for WHY and PRODUCTS sliders */
.why-slider .slider-btn, .products-slider .slider-btn{ width:56px; height:56px; font-size:26px; }
.slider-btn.left{ left:2px; }
.slider-btn.right{ right:2px; }
.slider-btn:hover{ background:#fafafa; }

/* Utility: make inner block full viewport width */
.full-bleed-inner{ position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw; }

/* ====== SECTION GÉNÉRIQUE ====== */
.section{padding:28px 0}
.section h2{color:var(--primary);margin:0 0 12px;text-align:center}

/* ====== FOOTER ====== */
.footer{border-top:1px solid var(--border);background:#fff;margin-top:40px}
.footer-inner{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:16px 0;font-size:14px;color:#555;flex-wrap:wrap}
.socials a{color:#999;text-decoration:none;margin-left:12px;display:inline-flex;gap:6px;align-items:center}
.socials a svg{width:18px;height:18px;display:block}

/* ====== DESKTOP OVERRIDES: Center WHY-US cards ====== */
@media (min-width: 992px){
  .why-slider{ padding: 0 16px; }
  .why-slider .slider-track{ 
    justify-content: center; 
    flex-wrap: wrap; 
    overflow: visible; 
    scroll-padding-inline: 0; 
  }
  /* Desktop layout for products: show about 4 cards */
  .products-gradient .slider{ padding: 0 96px; }
  .products-gradient .slide{ width: 260px; }
  .products-gradient .slider-track{ justify-content: center; }
  /* Desktop: larger slider arrows for WHY and PRODUCTS */
  .why-slider .slider-btn, .products-gradient .slider-btn{ width:64px; height:64px; font-size:32px; }
}

/* ====== IMAGES SÛRES ====== */
img, video { max-width: 100%; height: auto; display: block; }
img.rounded{border-radius:12px}
.rounded{border-radius:12px}

/* ====== UTILITAIRES ====== */
.mt-8{margin-top:8px}
.mt-12{margin-top:12px}
.mt-16{margin-top:16px}
.opacity-70{opacity:.7}
.opacity-80{opacity:.8}
.opacity-85{opacity:.85}
.grid-2{grid-template-columns:1fr 1fr}
.grid-auto-fit-180{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.flex-between{display:flex;justify-content:space-between;align-items:center}
.img-error{border:2px solid red}
.max-h-420{max-height:420px;object-fit:cover}

/* ====== RTL (arabe) ====== */
[dir="rtl"] .nav-inner{flex-direction:row-reverse}
[dir="rtl"] .nav-links{flex-direction:row-reverse; direction: rtl;}
[dir="rtl"] .nav-btn{ text-align: right; }
[dir="rtl"] .hero{direction:rtl}

/* ====== ACCESSIBILITÉ ====== */
:focus-visible{outline:2px dashed rgba(0,0,0,.25);outline-offset:2px;border-radius:8px}

/* ====== RESPONSIVE (Desktop) ====== */
@media (min-width: 860px){
  .hero{grid-template-areas: "text img";grid-template-columns:1fr 1.2fr;align-items:center}
  .hero h1{font-size:48px}
  .hero-visual img{max-width:1040px}
  .hero.full-bleed{ display:block; grid-template-areas: initial; grid-template-columns: initial; }
}

/* Afficher le texte du brand */
.brand-name{ display:inline-block; }
/* Override taille logo (agrandi) */
.brand-logo{ width:80px; height:80px; }

/* ===== NAVBAR MOBILE COMPACT ===== */
@media (max-width: 600px){
  .container{ padding: 0 8px; }
  .nav-inner{ gap: 6px; padding: 8px 0; }
  .nav-links{ gap: 6px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; white-space: nowrap; justify-content:center; }
  .nav-links::-webkit-scrollbar{ display:none; }
  .nav-btn{ padding: 4px 6px; font-size: 12px; }
  .lang-btn{ padding: 4px 8px; font-size: 12px; }
  .btn-blog{ padding: 6px 8px; font-size: 12px; white-space: nowrap; }
  .brand-logo{ width:40px; height:40px; }
  .brand-name{ font-size: 16px; }
}

/* ===== NAVBAR MOBILE EN 2 LIGNES (fusion des doublons) ===== */
@media (max-width: 680px){
  .nav-inner{ display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand lang" "links links"; row-gap: 6px; padding: 8px 0; }
  .brand{ grid-area: brand; }
  .nav-links{ grid-area: links; display: flex; flex-wrap: nowrap; gap: 6px 8px; justify-content: center; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; white-space:nowrap; }
  .nav-links::-webkit-scrollbar{ display:none; }
  #langToggle, .lang-btn{ grid-area: lang; justify-self: end; }
  .nav-btn{ padding: 4px 6px; font-size: 12px; line-height:1; }
  .btn-blog{ padding: 6px 8px; font-size: 12px; line-height:1; white-space: nowrap; }
  .container{ padding: 0 10px; }
}

/* ===== SCROLL REVEAL ===== */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ===== BACK TO TOP BUTTON ===== */
.to-top{ position:fixed; right:16px; bottom:16px; z-index:60; background:rgba(255,255,255,.6); border:1px solid rgba(0,0,0,.15); backdrop-filter: blur(8px) saturate(140%); color:#333; padding:10px 12px; border-radius:999px; cursor:pointer; box-shadow:0 4px 18px rgba(0,0,0,.12); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; }
.to-top.show{ opacity:1; pointer-events:auto; transform: translateY(0); }
.to-top:hover{ background:rgba(255,255,255,.9); }

/* ===== CONTACT LIGHT GRADIENT ===== */
.contact-gradient{ background: linear-gradient(180deg, rgba(252,80,0,.04) 0%, #ffffff 100%); border-radius:12px; }
.contact-gradient.full-bleed{ border-radius:0; }

/* ===== PRODUCTS / ABOUT GRADIENTS ===== */
.products-gradient{ background: linear-gradient(180deg, rgba(16,185,129,.06) 0%, #ffffff 100%); border-radius:12px; }
.products-gradient.full-bleed{ border-radius:0; }
.about-gradient{ background: linear-gradient(180deg, rgba(59,130,246,.06) 0%, #ffffff 100%); border-radius:12px; }
.about-gradient.full-bleed{ border-radius:0; }