/* =====================================================================
   LinkedIn Local Morocco & LogiTerre 2026
   BRAND SYSTEM — Charte graphique unifiée v6.0
   Police : Inter (corps) + Syne (titres display)
   Couleurs : LLM Blue #0A66C2 | Orange #E87722 | Navy #001A3A
   ===================================================================== */

/* ── Google Fonts ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Syne:wght@600;700;800&display=swap');

/* ── Variables racines ────────────────────────────────────────────── */
:root {
  /* --- Couleurs LLM (LinkedIn Local Morocco) --- */
  --llm-blue:           #0A66C2;   /* Bleu LinkedIn officiel */
  --llm-blue-dark:      #004182;
  --llm-blue-mid:       #1A7FD4;
  --llm-blue-light:     #C7E0F7;
  --llm-orange:         #E87722;   /* Orange signature LLM */
  --llm-orange-dark:    #CC5E00;
  --llm-orange-light:   #F7A955;
  --llm-orange-bg:      rgba(232,119,34,0.10);

  /* --- Alias teal → remappé sur llm-blue-mid pour cohérence LLM --- */
  --logi-teal:          #1A7FD4;   /* remplacé : plus de cyan hors charte */

  /* --- Couleurs LogiTerre --- */
  --logi-blue:          #0070C0;
  --logi-blue-dark:     #004F7C;
  --logi-blue-mid:      #0088CC;
  --logi-blue-deep:     #002D5B;
  --logi-cyan:          #00B4D8;
  --logi-navy:          #003F88;
  --logi-green:         #3AAA35;
  --logi-green-light:   #8DC63F;

  /* --- Couleurs neutres UI --- */
  --navy:               #001A3A;
  --navy-mid:           #002D5B;
  --gold:               #C9A84C;
  --gold-light:         #E8C96A;
  --white:              #FFFFFF;
  --text-dark:          #0F172A;
  --text-medium:        #475569;
  --text-light:         #94A3B8;
  --border:             #E2E8F0;
  --border-dark:        #CBD5E1;
  --bg-light:           #F8FAFC;
  --bg-mid:             #F1F5F9;

  /* --- Barre de couleurs --- */
  --bar-cyan:           #00B4D8;
  --bar-navy:           #003F88;
  --bar-orange:         #E87722;
  --bar-red:            #E63946;

  /* --- Gradients --- */
  --grad-hero:    linear-gradient(145deg, #001228 0%, #001A3A 40%, #002D5B 70%, #0A66C2 100%);
  --grad-blue:    linear-gradient(135deg, #0A66C2, #004182);
  --grad-logi:    linear-gradient(135deg, #0070C0, #004F7C);
  --grad-orange:  linear-gradient(135deg, #E87722, #CC5E00);
  --grad-cyan:    linear-gradient(135deg, #00B4D8, #0070C0);
  --grad-dark:    linear-gradient(180deg, #001A3A 0%, #000D1F 100%);
  --grad-premium: linear-gradient(135deg, #E87722 0%, #CC5E00 40%, #004182 100%);
  --grad-gold:    linear-gradient(135deg, #C9A84C 0%, #E8C96A 50%, #C9A84C 100%);

  /* --- Ombres --- */
  --shadow-xs:    0 1px 3px rgba(15,23,42,0.06);
  --shadow-sm:    0 2px 8px rgba(15,23,42,0.08);
  --shadow-md:    0 8px 24px rgba(15,23,42,0.10);
  --shadow-lg:    0 20px 48px rgba(15,23,42,0.12);
  --shadow-xl:    0 32px 80px rgba(15,23,42,0.16);
  --shadow-blue:  0 8px 28px rgba(10,102,194,0.30);
  --shadow-orange:0 8px 28px rgba(232,119,34,0.28);
  --shadow-gold:  0 8px 28px rgba(201,168,76,0.32);
  --card-shadow:  0 4px 16px rgba(15,23,42,0.06), 0 1px 4px rgba(15,23,42,0.04);
  --hover-shadow: 0 16px 48px rgba(15,23,42,0.14);

  /* --- Typographie LLM --- */
  --font-display: 'Syne', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Layout --- */
  --container-max: 1280px;
  --radius-sm:     8px;
  --radius-md:     12px;
  --radius-lg:     20px;
  --radius-xl:     28px;
  --radius-full:   999px;
}

/* ── Reset minimal ────────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0; padding: 0;
  box-sizing: border-box;
}
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ── Scrollbar LLM ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--llm-blue); border-radius: 3px; }

/* ── Système typographique unifié LLM ────────────────────────────── */
/*
   RÈGLE ABSOLUE :
   • Syne   → --font-display  → h1, h2, h3, .section-title, .display-*, prix
   • Inter  → --font-heading  → h4, h5, h6, boutons, labels, badges
   • Inter  → --font-body     → p, li, input, textarea, select, body
   Aucune autre famille (Raleway, Open Sans, Georgia…) n'est autorisée.
*/

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-dark);
}
h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-dark);
}
p, li, td, th, blockquote {
  font-family: var(--font-body);
}
input, textarea, select, button {
  font-family: var(--font-body);
}
/* Helpers typographiques utilitaires */
.font-display  { font-family: var(--font-display) !important; }
.font-heading  { font-family: var(--font-heading) !important; }
.font-body     { font-family: var(--font-body)    !important; }

/* ── Composants de boutons harmonisés LLM ────────────────────────── */
.btn-llm-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--grad-orange);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
  box-shadow: var(--shadow-orange);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.btn-llm-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(232,119,34,0.4);
  opacity: 0.92;
}

.btn-llm-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  background: transparent;
  color: var(--llm-blue);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--radius-full);
  border: 2px solid var(--llm-blue);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.btn-llm-secondary:hover {
  background: var(--llm-blue);
  color: #fff;
  box-shadow: var(--shadow-blue);
}

.btn-llm-outline-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(255,255,255,0.35);
  cursor: pointer;
  transition: all 0.2s;
  backdrop-filter: blur(4px);
  text-decoration: none;
}
.btn-llm-outline-white:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.6);
}

/* ── Badge / Pill branding ────────────────────────────────────────── */
.badge-llm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.badge-llm-blue   { background: rgba(10,102,194,0.12); color: var(--llm-blue); }
.badge-llm-orange { background: rgba(232,119,34,0.12); color: var(--llm-orange); }
.badge-llm-green  { background: rgba(58,170,53,0.12);  color: var(--logi-green); }
.badge-llm-gold   { background: rgba(201,168,76,0.12); color: var(--gold); }
.badge-llm-navy   { background: rgba(0,26,58,0.12);    color: var(--navy); }

/* ── Carte LLM ────────────────────────────────────────────────────── */
.card-llm {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--card-shadow);
  transition: transform 0.25s, box-shadow 0.25s;
  overflow: hidden;
}
.card-llm:hover {
  transform: translateY(-4px);
  box-shadow: var(--hover-shadow);
}

/* ── Barre de couleurs signature ──────────────────────────────────── */
.brand-color-bar {
  display: flex;
  height: 4px;
}
.brand-color-bar .bcb-cyan   { flex: 1; background: var(--bar-cyan); }
.brand-color-bar .bcb-navy   { flex: 1; background: var(--bar-navy); }
.brand-color-bar .bcb-orange { flex: 1; background: var(--bar-orange); }
.brand-color-bar .bcb-red    { flex: 1; background: var(--bar-red); }

/* ── Icône LLM (carré "in" LinkedIn) ─────────────────────────────── */
.llm-in-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: var(--llm-blue);
  border-radius: 6px;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: -1px;
}

/* ── Inputs / Formulaires harmonisés ─────────────────────────────── */
.input-llm,
input[type="text"].input-llm,
input[type="email"].input-llm,
input[type="tel"].input-llm,
select.input-llm,
textarea.input-llm {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-dark);
  background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.input-llm:focus {
  border-color: var(--llm-blue);
  box-shadow: 0 0 0 3px rgba(10,102,194,0.12);
}
label.label-llm {
  display: block;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-medium);
  margin-bottom: 6px;
}
label.label-llm .req { color: var(--llm-orange); }

/* ── Section heading standard ────────────────────────────────────── */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--llm-orange);
  margin-bottom: 16px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.5vw, 42px);
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}
.section-subtitle {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-medium);
  max-width: 640px;
  line-height: 1.7;
}

/* ── Footer harmonisé ────────────────────────────────────────────── */
.footer-llm {
  background: linear-gradient(160deg, #0A66C2 0%, #004182 35%, #002D5B 65%, #001A3A 100%);
  color: rgba(255,255,255,0.82);
  font-family: var(--font-body);
  padding: 60px 0 32px;
}
.footer-llm h4 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: white;
  margin-bottom: 20px;
}
.footer-llm a {
  color: rgba(255,255,255,0.80);
  text-decoration: none;
  font-size: 14px;
  line-height: 2;
  transition: color 0.2s;
}
.footer-llm a:hover { color: white; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 24px;
  margin-top: 48px;
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* ── Animations communes ──────────────────────────────────────────── */
@keyframes fadeUp    { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }
@keyframes float     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes pulse     { 0%,100%{opacity:1} 50%{opacity:0.55} }
@keyframes shimmer   { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes slideRight{ from{transform:translateX(-20px);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes loadBar   { from{width:0} to{width:100%} }
@keyframes confirmPop{ 0%{transform:scale(0)} 70%{transform:scale(1.1)} 100%{transform:scale(1)} }
@keyframes spin      { to{transform:rotate(360deg)} }