/* =============================================
   KAF LOGISTICS — variables.css
   Thème CLAIR uniquement · Palette agricole
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Inter:wght@300;400;500;600;700&family=Noto+Sans+Arabic:wght@300;400;600;700&display=swap');

/* ══════════════════════════════════════════════
   DESIGN TOKENS — PALETTE AGRICOLE
   Vert foncé · Terre · Or chaud · Ivoire
   ══════════════════════════════════════════════ */
:root {
  /* Verts agricoles */
  --green:       #2D5016;   /* vert foncé feuillage */
  --green-mid:   #3D6B20;   /* vert moyen */
  --green-lt:    #5A8A35;   /* vert clair */
  --green-soft:  #EAF2E0;   /* vert très pâle (fond) */
  --green-10:    rgba(45,80,22,.10);
  --green-20:    rgba(45,80,22,.20);
  --green-40:    rgba(45,80,22,.40);

  /* Terre & Or */
  --earth:       #8B6914;   /* brun doré / terre */
  --earth-lt:    #C49A2A;   /* or chaud */
  --earth-dk:    #5C4510;   /* terre foncée */
  --earth-10:    rgba(139,105,20,.10);
  --earth-20:    rgba(139,105,20,.20);
  --earth-glow:  0 8px 28px rgba(139,105,20,.28);

  /* Ivoire / Naturel */
  --ivory:       #F8F5EC;   /* fond principal */
  --ivory2:      #F0EBE0;   /* fond secondaire */
  --ivory3:      #E6DDD0;   /* fond tertiaire */

  /* Texte */
  --text:        #1A2008;   /* vert très foncé presque noir */
  --text2:       #3D4A28;   /* vert foncé */
  --text3:       #7A8560;   /* vert grisé */

  /* Surfaces */
  --surface:     #FFFFFF;
  --surface2:    #F5F1E8;

  /* Bordures */
  --border:      rgba(45,80,22,.14);
  --border2:     rgba(45,80,22,.07);

  /* Ombres */
  --shadow-sm:   0 2px 10px rgba(45,80,22,.08);
  --shadow-md:   0 8px 32px rgba(45,80,22,.10);
  --shadow-lg:   0 24px 64px rgba(45,80,22,.13);
  --shadow-green:0 8px 28px rgba(45,80,22,.22);

  /* Navigation */
  --nav-bg:      rgba(248,245,236,.96);

  /* Typographie */
  --font-serif:  'Playfair Display', Georgia, serif;
  --font-sans:   'Inter', system-ui, sans-serif;
  --font-arabic: 'Noto Sans Arabic', sans-serif;

  /* Layout */
  --nav-h:  70px;
  --r-sm:   6px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-xl:   36px;

  /* Transitions */
  --t-fast: .18s ease;
  --t-med:  .32s ease;
  --t-slow: .55s ease;
}

/* ══════════════════════════════════════════════
   RESET & BASE
   ══════════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }

body {
  font-family: var(--font-sans);
  background: var(--ivory);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width:100%; display:block; }
a   { text-decoration:none; color:inherit; }
ul,ol { list-style:none; }
button { cursor:pointer; font-family:inherit; }
input,textarea,select { font-family:inherit; }

/* RTL Arabe */
[data-lang="ar"] body,
[data-lang="ar"] * { font-family:var(--font-arabic) !important; }
[data-lang="ar"] body { direction:rtl; }

/* ══════════════════════════════════════════════
   TYPOGRAPHIE
   ══════════════════════════════════════════════ */
h1,h2,h3 { font-family:var(--font-serif); line-height:1.1; font-weight:600; color:var(--text); }
h1 { font-size:clamp(42px, 6vw, 76px); }
h2 { font-size:clamp(30px, 4.5vw, 52px); }
h3 { font-size:clamp(20px, 2.5vw, 28px); }
h4 { font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--green-mid); }
p  { color:var(--text2); font-size:15px; line-height:1.8; }
em { font-style:italic; color:var(--green-mid); }

/* ══════════════════════════════════════════════
   UTILITAIRES
   ══════════════════════════════════════════════ */
.section-wrap     { padding:96px 6%; }
.section-wrap--alt{ background:var(--ivory2); }
.section-wrap--green { background:var(--green); }

.section-label {
  display:inline-flex; align-items:center; gap:12px;
  font-size:11px; font-weight:700; letter-spacing:4px;
  text-transform:uppercase; color:var(--green-mid);
  margin-bottom:14px;
}
.section-label::before {
  content:''; display:block;
  width:26px; height:1.5px; background:var(--green-mid); flex-shrink:0;
}
[data-lang="ar"] .section-label { flex-direction:row-reverse; }
[data-lang="ar"] .section-label::before { display:none; }
[data-lang="ar"] .section-label::after {
  content:''; display:block;
  width:26px; height:1.5px; background:var(--green-mid);
}

.divider {
  width:44px; height:2.5px;
  background:linear-gradient(90deg, var(--green-mid), transparent);
  margin:18px 0 26px;
}
[data-lang="ar"] .divider { background:linear-gradient(270deg, var(--green-mid), transparent); }

/* Boutons */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 30px; border-radius:var(--r-sm);
  font-weight:600; font-size:13px; letter-spacing:1px;
  text-transform:uppercase; transition:all var(--t-med);
  white-space:nowrap; position:relative; overflow:hidden; border:none;
}
.btn-primary {
  background:var(--green); color:#fff;
}
.btn-primary::after {
  content:''; position:absolute; inset:0;
  background:var(--green-mid);
  transform:translateX(-101%); transition:transform var(--t-med);
}
.btn-primary > * { position:relative; z-index:1; }
.btn-primary:hover::after { transform:translateX(0); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:var(--shadow-green); }

.btn-outline {
  background:transparent; border:1.5px solid var(--green);
  color:var(--green);
}
.btn-outline:hover {
  background:var(--green-10); transform:translateY(-2px);
}

.btn-earth {
  background:var(--earth); color:#fff;
}
.btn-earth:hover {
  background:var(--earth-lt); transform:translateY(-2px);
  box-shadow:var(--earth-glow);
}

/* Liste à puce verte */
.green-list { display:flex; flex-direction:column; gap:12px; }
.green-list li {
  display:flex; align-items:flex-start; gap:12px;
  font-size:14.5px; color:var(--text2); line-height:1.65;
}
.green-list li::before {
  content:''; display:block;
  width:16px; height:1.5px; background:var(--green-mid);
  margin-top:11px; flex-shrink:0;
}
[data-lang="ar"] .green-list li { flex-direction:row-reverse; }
[data-lang="ar"] .green-list li::before { display:none; }

/* Reveal scroll */
.reveal {
  opacity:0; transform:translateY(36px);
  transition:opacity .72s ease, transform .72s ease;
}
.reveal.left  { transform:translateX(-36px); }
.reveal.right { transform:translateX(36px); }
.reveal.visible { opacity:1 !important; transform:none !important; }

/* Scroll-top */
#scroll-top {
  position:fixed; bottom:28px; right:28px; z-index:900;
  width:42px; height:42px; border-radius:50%;
  background:var(--green); color:#fff; border:none;
  font-size:16px; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  box-shadow:var(--shadow-green); transition:all var(--t-med);
}
#scroll-top.visible { opacity:1; pointer-events:all; }
#scroll-top:hover   { transform:translateY(-3px); }

/* Toast */
.toast {
  position:fixed; bottom:28px; left:50%;
  transform:translateX(-50%) translateY(14px);
  padding:12px 26px; border-radius:30px;
  font-size:13px; font-weight:700; letter-spacing:.5px;
  opacity:0; pointer-events:none;
  transition:all .4s ease; z-index:9999; white-space:nowrap;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.ok   { background:var(--green); color:#fff; }
.toast.err  { background:#b83232; color:#fff; }

@media (max-width:768px) {
  .section-wrap { padding:68px 5%; }
}
@media (max-width:480px) {
  .section-wrap { padding:52px 4%; }
}