/*
  ============================================================
  ADM TECH SERVICE — Feuille de Styles Principale
  style.css
  Version : 1.0.0
  Charte graphique : Bleu #1A3A6B | Orange #F15A24 | Montserrat
  ============================================================

  TABLE DES MATIÈRES :
  1.  Variables CSS (Design Tokens)
  2.  Reset & Base
  3.  Typographie
  4.  Utilitaires / Classes communes
  5.  Layout — Container & Grid
  6.  Boutons
  7.  Barre de scroll
  8.  Header & Navigation
  9.  Hero Section
 10.  Bandeau Marques
 11.  Section À Propos
 12.  Section Services
 13.  Section Pourquoi Nous
 14.  Section Processus
 15.  Section Contact
 16.  Footer
 17.  Retour en haut (FAB)
 18.  Animations & Keyframes
 19.  Media Queries (Responsive)
  ============================================================

  COMMENT MODIFIER :
  - Couleurs     → Section 1 (variables :root)
  - Espacement   → Variables --space-* dans :root
  - Police       → Variable --font-primary dans :root
  - Breakpoints  → Section 19 (fin du fichier)
  ============================================================
*/


/* ============================================================
   1. VARIABLES CSS — Design Tokens
   Modifier ici pour changer toute la charte graphique
   ============================================================ */
:root {
  /* === COULEURS PRINCIPALES === */
  --color-blue:        #1A3A6B;   /* Bleu ADM — couleur dominante (60%) */
  --color-blue-dark:   #122B52;   /* Bleu foncé — hover, variantes */
  --color-blue-light:  #4A90D9;   /* Bleu clair — liens, interactifs */
  --color-orange:      #F15A24;   /* Orange ADM — accent secondaire (30%) */
  --color-orange-light:#FF8C42;   /* Orange clair — hover sur fonds clairs */

  /* === COULEURS NEUTRES === */
  --color-black:       #1D1D1B;   /* Noir profond — texte principal */
  --color-white:       #FFFFFF;   /* Blanc pur — fond principal */
  --color-gray-dark:   #4A4A4A;   /* Gris foncé — textes secondaires, footer */
  --color-gray-mid:    #9E9E9E;   /* Gris moyen — placeholders, labels */
  --color-gray-light:  #F0F0F0;   /* Gris clair — arrière-plans sections alt */
  --color-gray-border: #E0E0E0;   /* Bordures légères */

  /* === TYPOGRAPHIE === */
  --font-primary: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; /* Police officielle */

  /* Tailles de texte (mobile-first, base 16px) */
  --text-xs:   0.75rem;   /* 12px — mentions légales */
  --text-sm:   0.875rem;  /* 14px — labels, badges */
  --text-base: 1rem;      /* 16px — corps de texte */
  --text-lg:   1.125rem;  /* 18px — lead text */
  --text-xl:   1.25rem;   /* 20px — sous-titres */
  --text-2xl:  1.5rem;    /* 24px — titres sections mobile */
  --text-3xl:  1.875rem;  /* 30px — titres sections */
  --text-4xl:  2.25rem;   /* 36px — titre hero mobile */
  --text-5xl:  3rem;      /* 48px — titre hero desktop */
  --text-6xl:  3.75rem;   /* 60px — titre hero large */

  /* Graisse de police */
  --font-regular:    400;
  --font-medium:     500;
  --font-semibold:   600;
  --font-bold:       700;
  --font-extrabold:  800;

  /* Hauteur de ligne */
  --leading-tight:   1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.75;

  /* === ESPACEMENT === */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* === LAYOUT === */
  --container-max:  1280px;   /* Largeur max du container */
  --container-pad:  1.5rem;   /* Padding horizontal container (mobile) */
  --header-h:       72px;     /* Hauteur du header fixe */

  /* === EFFETS === */
  --radius-sm:  0.25rem;   /*  4px */
  --radius-md:  0.5rem;    /*  8px */
  --radius-lg:  1rem;      /* 16px */
  --radius-xl:  1.5rem;    /* 24px */
  --radius-full: 9999px;   /* Pilule */

  /* Ombres */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 16px rgba(26,58,107,.1), 0 2px 8px rgba(0,0,0,.06);
  --shadow-lg:  0 8px 32px rgba(26,58,107,.15), 0 4px 16px rgba(0,0,0,.08);
  --shadow-xl:  0 16px 48px rgba(26,58,107,.2);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 300ms cubic-bezier(.34,1.56,.64,1);

  /* === Z-INDEX === */
  --z-base:    1;
  --z-header:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-fab:     150;
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */

/* Box-sizing universel */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Comportement de scroll fluide */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h); /* Compense le header fixe */
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-primary);
  font-weight: var(--font-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-black);
  background-color: var(--color-white);
  overflow-x: hidden; /* Empêche le scroll horizontal parasite */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Liens */
a {
  color: var(--color-blue);
  text-decoration: none;
  transition: color var(--transition-base);
}
a:hover { color: var(--color-orange); }
a:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Images responsives par défaut */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Listes sans style par défaut (reset pour les listes nav) */
ul, ol { list-style: none; }

/* Boutons reset */
button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

/* Inputs, selects reset */
input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* SVG inline par défaut */
svg { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* Accessibilité — éléments visuellement cachés mais lisibles par lecteur d'écran */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}


/* ============================================================
   3. TYPOGRAPHIE
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-blue);
}

h1 { font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl)); font-weight: var(--font-extrabold); }
h2 { font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl)); }
h3 { font-size: clamp(var(--text-xl),  2.5vw, var(--text-2xl)); }
h4 { font-size: var(--text-xl); }

p { line-height: var(--leading-relaxed); color: var(--color-gray-dark); }

strong { font-weight: var(--font-semibold); color: var(--color-black); }

/* Texte accentué orange — classe utilitaire */
.text-highlight { color: var(--color-orange); }

/* Classe pour masquer un élément sur mobile uniquement */
.hide-mobile { display: none; }


/* ============================================================
   4. UTILITAIRES
   ============================================================ */

/* Tag de section (pastille "Qui sommes-nous ?") */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: var(--space-4);
}
.section-tag::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-orange);
  flex-shrink: 0;
}

/* En-tête de section centré */
.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-16);
}
.section-header .section-tag { justify-content: center; }
.section-header .section-tag::before { display: none; }

/* Sous-titre de section */
.section-subtitle {
  font-size: var(--text-lg);
  color: var(--color-gray-dark);
  margin-top: var(--space-4);
  line-height: var(--leading-relaxed);
}

/* Séparateur de sections */
.section {
  padding: var(--space-24) 0;
}
.section--alt {
  background-color: var(--color-gray-light);
}


/* ============================================================
   5. LAYOUT — Container
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}


/* ============================================================
   6. BOUTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.75rem;
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: 1;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    transform var(--transition-spring),
    box-shadow var(--transition-base);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

/* Effet ripple au clic */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.15);
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.btn:active::after { opacity: 1; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Bouton primaire — Bleu fond, texte blanc */
.btn-primary {
  background-color: var(--color-blue);
  color: var(--color-white);
  border-color: var(--color-blue);
  box-shadow: 0 4px 16px rgba(26,58,107,.25);
}
.btn-primary:hover {
  background-color: var(--color-blue-dark);
  border-color: var(--color-blue-dark);
  box-shadow: 0 8px 24px rgba(26,58,107,.35);
  color: var(--color-white);
}

/* Bouton outline — Contour bleu, fond transparent */
.btn-outline {
  background-color: transparent;
  color: var(--color-blue);
  border-color: var(--color-blue);
}
.btn-outline:hover {
  background-color: var(--color-blue);
  color: var(--color-white);
}

/* Bouton orange accent */
.btn-accent {
  background-color: var(--color-orange);
  color: var(--color-white);
  border-color: var(--color-orange);
  box-shadow: 0 4px 16px rgba(241,90,36,.25);
}
.btn-accent:hover {
  background-color: #d44a1a;
  border-color: #d44a1a;
  color: var(--color-white);
}

/* Tailles */
.btn-sm  { padding: 0.5rem 1.25rem; font-size: var(--text-sm); }
.btn-lg  { padding: 1rem 2rem; font-size: var(--text-lg); }
.btn-full { width: 100%; }

/* Loader dans le bouton (form submit) */
.btn-loader {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.btn.loading .btn-text  { opacity: 0.6; }
.btn.loading .btn-loader { display: block; }
.btn.loading .btn-icon  { display: none; }


/* ============================================================
   7. BARRE DE PROGRESSION DU SCROLL
   ============================================================ */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-blue), var(--color-orange));
  z-index: var(--z-modal);
  transition: width 50ms linear;
}


/* ============================================================
   8. HEADER & NAVIGATION
   ============================================================ */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  z-index: var(--z-header);
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    background-color var(--transition-base);
}

/* État scrollé — ombre apparaît */
.header.scrolled {
  box-shadow: var(--shadow-md);
  border-bottom-color: var(--color-gray-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--space-8);
}

/* ---- Logo ---- */
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo-svg {
  height: 44px;
  width: auto;
  transition: transform var(--transition-spring);
}
.logo:hover .logo-svg { transform: scale(1.03); }

/* ---- Navigation desktop ---- */
.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav-link {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-black);
  border-radius: var(--radius-md);
  letter-spacing: 0.02em;
  transition:
    color var(--transition-base),
    background-color var(--transition-base);
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color-orange);
  transform: translateX(-50%);
  transition: width var(--transition-base);
}
.nav-link:hover, .nav-link[aria-current="page"] {
  color: var(--color-blue);
  background-color: rgba(26,58,107,.05);
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { width: calc(100% - 2rem); }

/* ---- Actions header ---- */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

.header-phone {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-blue);
  transition: color var(--transition-base);
}
.header-phone:hover { color: var(--color-orange); }

/* ---- Burger Menu (mobile) ---- */
.burger {
  display: none;  /* Affiché uniquement en mobile via media query */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-base);
}
.burger:hover { background-color: var(--color-gray-light); }

.burger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-blue);
  border-radius: 2px;
  transition:
    transform var(--transition-base),
    opacity var(--transition-base);
  transform-origin: center;
}
/* État ouvert du burger */
.burger.open .burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open .burger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger.open .burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ============================================================
   9. HERO SECTION
   ============================================================ */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--header-h);
  overflow: hidden;
  background: linear-gradient(145deg, var(--color-blue) 0%, #1e4a8a 50%, #0e2a50 100%);
}

/* --- Fond géométrique décoratif --- */
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.08;
}
/* Grande forme bleue claire en arrière-plan */
.hero-shape--1 {
  width: 700px; height: 700px;
  top: -200px; right: -150px;
  background: radial-gradient(circle, var(--color-blue-light), transparent 70%);
  animation: floatSlow 8s ease-in-out infinite;
}
/* Forme orange — accent */
.hero-shape--2 {
  width: 400px; height: 400px;
  bottom: -100px; left: -100px;
  background: radial-gradient(circle, var(--color-orange), transparent 70%);
  opacity: 0.12;
  animation: floatSlow 10s ease-in-out infinite reverse;
}
/* Petite forme accent droite */
.hero-shape--3 {
  width: 200px; height: 200px;
  top: 30%; right: 10%;
  background: var(--color-orange);
  opacity: 0.06;
  animation: floatSlow 6s ease-in-out infinite;
}

/* Grille de points (motif) */
.hero-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.15) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* --- Contenu hero --- */
.hero-content {
  position: relative;
  z-index: var(--z-base);
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  text-align: center;
}

/* Badge d'accroche */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-6);
}
.badge-dot {
  width: 8px; height: 8px;
  background: var(--color-orange);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

/* Titre hero */
.hero-title {
  font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl));
  font-weight: var(--font-extrabold);
  color: var(--color-white);
  line-height: 1.1;
  margin-bottom: var(--space-6);
  letter-spacing: -0.02em;
}
.hero-title .text-highlight {
  color: var(--color-orange);
  display: inline-block;
  position: relative;
}

/* Sous-titre hero */
.hero-subtitle {
  font-size: clamp(var(--text-base), 2vw, var(--text-xl));
  color: rgba(255,255,255,0.8);
  line-height: var(--leading-relaxed);
  max-width: 680px;
  margin: 0 auto var(--space-10);
}

/* CTA hero */
.hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-16);
}

/* Bouton outline blanc sur fond sombre */
.hero .btn-outline {
  color: var(--color-white);
  border-color: rgba(255,255,255,0.5);
}
.hero .btn-outline:hover {
  background-color: rgba(255,255,255,0.1);
  border-color: var(--color-white);
  color: var(--color-white);
}

/* Stats de confiance */
.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.stat-item { text-align: center; }
.stat-number {
  display: block;
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  color: var(--color-white);
  line-height: 1;
}
.stat-label {
  font-size: var(--text-xs);
  color: rgba(255,255,255,.65);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: var(--space-1);
}
.stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,.2);
}

/* Flèche scroll bas */
.hero-scroll {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.5);
  animation: bounceY 2s ease-in-out infinite;
  transition: color var(--transition-base);
}
.hero-scroll:hover { color: var(--color-orange); }


/* ============================================================
   10. BANDEAU MARQUES
   ============================================================ */

.brands-bar {
  background: var(--color-blue);
  padding: var(--space-6) 0;
  overflow: hidden;
}

.brands-label {
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: var(--space-4);
}

.brands-track { overflow: hidden; }

/* Défilement automatique (marquee) */
.brands-list {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  animation: marquee 20s linear infinite;
  width: max-content;
}
.brands-list:hover { animation-play-state: paused; }

.brand-item {
  font-size: var(--text-lg);
  font-weight: var(--font-extrabold);
  color: rgba(255,255,255,.4);
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: color var(--transition-base);
}
.brand-item:hover { color: rgba(255,255,255,.9); }


/* ============================================================
   11. SECTION À PROPOS
   ============================================================ */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

/* Texte */
.about-lead {
  font-size: var(--text-lg);
  color: var(--color-blue);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-4);
  line-height: var(--leading-relaxed);
}
.about-text p { margin-bottom: var(--space-4); }
.about-text .btn { margin-top: var(--space-6); }

/* Liste de valeurs */
.about-values {
  margin: var(--space-6) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.about-values li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: var(--font-medium);
  color: var(--color-black);
  font-size: var(--text-base);
}
.value-icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: var(--color-orange);
  stroke-width: 2.5;
}

/* Colonne KPIs */
.about-kpis { display: flex; flex-direction: column; gap: var(--space-4); }

.kpi-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-gray-border);
  transition:
    transform var(--transition-spring),
    box-shadow var(--transition-base);
}
.kpi-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Carte principale (agréé) */
.kpi-main {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-white);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.kpi-main .kpi-icon {
  width: 56px; height: 56px;
  background: rgba(255,255,255,.15);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--color-white);
}
.kpi-main .kpi-label {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-white);
}
.kpi-main .kpi-desc { font-size: var(--text-sm); color: rgba(255,255,255,.7); margin-top: 2px; }

/* Grille 2x2 de KPIs numériques */
.kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.kpi-grid .kpi-card {
  text-align: center;
  padding: var(--space-5);
}
.kpi-number {
  display: inline-block;
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  color: var(--color-blue);
  line-height: 1;
}
.kpi-unit {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-orange);
}
.kpi-label {
  font-size: var(--text-sm);
  color: var(--color-gray-dark);
  margin-top: var(--space-2);
  line-height: 1.3;
}


/* ============================================================
   12. SECTION SERVICES
   ============================================================ */

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.service-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  border: 1px solid var(--color-gray-border);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--transition-spring),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: var(--color-blue-light);
}

/* Numéro décoratif en arrière-plan */
.service-num {
  position: absolute;
  top: -16px; right: var(--space-8);
  font-size: 6rem;
  font-weight: var(--font-extrabold);
  color: var(--color-gray-light);
  line-height: 1;
  user-select: none;
  pointer-events: none;
  transition: color var(--transition-base);
}
.service-card:hover .service-num { color: rgba(26,58,107,.06); }

/* Icône */
.service-icon {
  width: 64px; height: 64px;
  background: rgba(26,58,107,.08);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue);
  margin-bottom: var(--space-6);
  transition:
    background-color var(--transition-base),
    color var(--transition-base);
}
.service-card:hover .service-icon {
  background: var(--color-blue);
  color: var(--color-white);
}

/* Titre service */
.service-title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-blue);
  margin-bottom: var(--space-4);
}

/* Description */
.service-desc {
  font-size: var(--text-base);
  color: var(--color-gray-dark);
  margin-bottom: var(--space-6);
  line-height: var(--leading-relaxed);
}

/* Liste de produits */
.service-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}
.service-list li {
  font-size: var(--text-sm);
  color: var(--color-gray-dark);
  padding-left: var(--space-5);
  position: relative;
}
.service-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  background: var(--color-orange);
  border-radius: 50%;
}

/* CTA lien service */
.service-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-blue);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition:
    color var(--transition-base),
    border-color var(--transition-base),
    gap var(--transition-spring);
}
.service-cta:hover {
  color: var(--color-orange);
  border-color: var(--color-orange);
  gap: var(--space-3);
}

/* Carte centrale mise en valeur */
.service-card--featured {
  background: var(--color-blue);
  border-color: var(--color-blue);
}
.service-card--featured .service-num { color: rgba(255,255,255,.04); }
.service-card--featured .service-icon {
  background: rgba(255,255,255,.12);
  color: var(--color-white);
}
.service-card--featured:hover .service-icon {
  background: var(--color-orange);
  color: var(--color-white);
}
.service-card--featured .service-title { color: var(--color-white); }
.service-card--featured .service-desc  { color: rgba(255,255,255,.75); }
.service-card--featured .service-list li { color: rgba(255,255,255,.8); }
.service-card--featured .service-list li::before { background: var(--color-orange); }
.service-card--featured .service-cta {
  color: var(--color-orange);
  border-color: transparent;
}
.service-card--featured .service-cta:hover { color: var(--color-white); border-color: var(--color-white); }

/* Badge */
.service-badge {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  padding: var(--space-1) var(--space-3);
  background: var(--color-orange);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  border-radius: var(--radius-full);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* ============================================================
   13. SECTION POURQUOI NOUS
   ============================================================ */

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-16);
  align-items: start;
}

.why-text .section-tag { justify-content: flex-start; }
.why-text p { margin-top: var(--space-4); }

/* Grille 2x2 des raisons */
.reasons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.reason-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--color-gray-border);
  transition:
    transform var(--transition-spring),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}
.reason-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-blue-light);
}

.reason-icon {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, rgba(26,58,107,.08), rgba(241,90,36,.08));
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-blue);
  margin-bottom: var(--space-4);
  transition:
    background var(--transition-base),
    color var(--transition-base);
}
.reason-card:hover .reason-icon {
  background: var(--color-orange);
  color: var(--color-white);
}

.reason-card h3 {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-blue);
  margin-bottom: var(--space-2);
}
.reason-card p {
  font-size: var(--text-sm);
  color: var(--color-gray-dark);
  line-height: var(--leading-relaxed);
}


/* ============================================================
   14. SECTION PROCESSUS
   ============================================================ */

.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  position: relative;
}

/* Ligne de connexion entre étapes */
.process-steps::before {
  content: '';
  position: absolute;
  top: 24px;  /* aligne avec les numéros */
  left: calc(12.5% + 24px);
  right: calc(12.5% + 24px);
  height: 2px;
  background: linear-gradient(90deg, var(--color-blue-light), var(--color-orange));
  opacity: 0.3;
  z-index: 0;
}

.step-card {
  position: relative;
  text-align: center;
  padding: 0 var(--space-4);
  z-index: var(--z-base);
}

.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  background: var(--color-blue);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--font-extrabold);
  border-radius: 50%;
  margin: 0 auto var(--space-4);
  position: relative;
  z-index: var(--z-base);
  box-shadow: 0 0 0 6px rgba(26,58,107,.1);
}
.step-card:last-child .step-num { background: var(--color-orange); box-shadow: 0 0 0 6px rgba(241,90,36,.1); }

.step-icon {
  width: 56px; height: 56px;
  background: var(--color-white);
  border: 2px solid var(--color-gray-border);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-blue);
  margin: 0 auto var(--space-4);
  transition:
    background var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base);
}
.step-card:hover .step-icon {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-white);
}

.step-card h3 {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-blue);
  margin-bottom: var(--space-2);
}
.step-card p {
  font-size: var(--text-sm);
  color: var(--color-gray-dark);
  line-height: var(--leading-relaxed);
}


/* ============================================================
   15. SECTION CONTACT
   ============================================================ */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--space-12);
  align-items: start;
}

/* Infos de contact */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.contact-icon {
  width: 44px; height: 44px;
  background: rgba(26,58,107,.08);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-blue);
  flex-shrink: 0;
}
.contact-item strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-blue);
  margin-bottom: var(--space-1);
  letter-spacing: 0.04em;
}
.contact-item p, .contact-item a {
  font-size: var(--text-sm);
  color: var(--color-gray-dark);
  line-height: var(--leading-relaxed);
  display: block;
}
.contact-item a:hover { color: var(--color-orange); }

/* Réseaux sociaux */
.contact-social {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-gray-border);
}
.contact-social span { font-size: var(--text-sm); color: var(--color-gray-dark); }
.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: var(--color-gray-light);
  border-radius: var(--radius-md);
  color: var(--color-blue);
  transition:
    background var(--transition-base),
    color var(--transition-base),
    transform var(--transition-spring);
}
.social-link:hover {
  background: var(--color-blue);
  color: var(--color-white);
  transform: translateY(-2px);
}

/* Formulaire */
.contact-form-wrap {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-gray-border);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.form-group label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-blue);
  letter-spacing: 0.02em;
}
.form-group label span { color: var(--color-orange); }

.form-group input,
.form-group textarea,
.form-group select {
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--color-gray-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--color-black);
  background: var(--color-white);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
  appearance: none;
  -webkit-appearance: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--color-gray-mid);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(26,58,107,.12);
}
/* Erreur */
.form-group input.error,
.form-group textarea.error,
.form-group select.error {
  border-color: #e74c3c;
}
.form-error {
  font-size: var(--text-xs);
  color: #e74c3c;
  display: none;
}
.form-error.visible { display: block; }

.form-group textarea { resize: vertical; min-height: 120px; }

/* Select flèche personnalisée */
.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231A3A6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

/* Champ honeypot anti-spam (masqué) */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Message de succès */
.form-success {
  display: none;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: rgba(39,174,96,.1);
  border: 1px solid rgba(39,174,96,.3);
  border-radius: var(--radius-md);
  color: #27ae60;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  margin-top: var(--space-4);
}
.form-success.visible { display: flex; }


/* ============================================================
   16. FOOTER
   ============================================================ */

.footer {
  background: var(--color-blue);
  padding: var(--space-16) 0 0;
  color: rgba(255,255,255,.75);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1.3fr;
  gap: var(--space-10);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid rgba(255,255,255,.1);
}

/* Colonne marque */
.footer-brand .footer-logo { margin-bottom: var(--space-4); }
.footer-desc {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.6);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-2);
}
.footer-slogan {
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-orange);
  font-weight: var(--font-medium);
}

/* Titres de colonnes */
.footer-heading {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-white);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}

/* Liens footer */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-links a {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.6);
  transition: color var(--transition-base), padding-left var(--transition-base);
}
.footer-links a:hover {
  color: var(--color-orange);
  padding-left: var(--space-2);
}

/* Contact list footer */
.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255,255,255,.6);
}
.footer-contact-list li svg { color: var(--color-orange); flex-shrink: 0; margin-top: 2px; }
.footer-contact-list a {
  color: rgba(255,255,255,.6);
  transition: color var(--transition-base);
}
.footer-contact-list a:hover { color: var(--color-orange); }

/* Barre de copyright */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) 0;
  font-size: var(--text-xs);
  color: rgba(255,255,255,.4);
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer-legal {
  display: flex;
  gap: var(--space-6);
}
.footer-legal a {
  color: rgba(255,255,255,.4);
  font-size: var(--text-xs);
  transition: color var(--transition-base);
}
.footer-legal a:hover { color: var(--color-orange); }


/* ============================================================
   17. RETOUR EN HAUT (FAB)
   ============================================================ */

.back-to-top {
  position: fixed;
  bottom: var(--space-8);
  right: var(--space-8);
  width: 44px; height: 44px;
  background: var(--color-orange);
  color: var(--color-white);
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(241,90,36,.35);
  z-index: var(--z-fab);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition:
    opacity var(--transition-base),
    transform var(--transition-spring),
    background-color var(--transition-base);
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover {
  background: var(--color-blue);
  transform: translateY(-2px);
}


/* ============================================================
   18. ANIMATIONS & KEYFRAMES
   ============================================================ */

/* Float lent — formes de fond hero */
@keyframes floatSlow {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(20px, -20px) scale(1.05); }
}

/* Scroll flèche hero */
@keyframes bounceY {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* Défilement marques */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Pulse du badge */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.3); opacity: 0.6; }
}

/* Rotation spinner */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* --- Animations d'entrée (scroll-triggered par main.js) --- */

/* État initial — éléments cachés avant animation */
[data-animate] {
  opacity: 0;
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

/* Directions d'animation */
[data-animate="fade-up"]    { transform: translateY(32px); }
[data-animate="fade-down"]  { transform: translateY(-32px); }
[data-animate="fade-right"] { transform: translateX(-32px); }
[data-animate="fade-left"]  { transform: translateX(32px); }
[data-animate="zoom-in"]    { transform: scale(0.92); }

/* État visible — déclenché par JS */
[data-animate].animated {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* Délais d'animation (data-delay en ms) — définis en JS via style.transitionDelay */


/* ============================================================
   19. MEDIA QUERIES — RESPONSIVE DESIGN
   Mobile-first : styles de base = mobile, puis on élargit
   ============================================================ */

/* --------- TABLETTE : ≥ 640px --------- */
@media (min-width: 640px) {
  :root {
    --container-pad: 2rem;
  }

  .hide-mobile { display: inline; }

  /* Hero — légère réduction du padding */
  .hero-content { padding-top: var(--space-20); padding-bottom: var(--space-20); }

  /* Grille services → 2 colonnes sur tablette */
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card--featured { grid-column: 1 / -1; } /* Pleine largeur */
}

/* --------- TABLETTE LARGE : ≥ 768px --------- */
@media (min-width: 768px) {
  :root {
    --container-pad: 2.5rem;
  }

  .section { padding: var(--space-20) 0; }

  /* About grid → 2 colonnes */
  .about-grid { grid-template-columns: 1fr 1fr; gap: var(--space-12); }

  /* Why grid → 2 colonnes */
  .why-grid { grid-template-columns: 1fr 1.2fr; }

  /* Process → 2×2 */
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .process-steps::before { display: none; } /* Ligne horizontale cachée en 2 col */

  /* Contact grid */
  .contact-grid { grid-template-columns: 1fr 1.4fr; }

  /* Footer grid → 2×2 */
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* --------- DESKTOP : ≥ 1024px --------- */
@media (min-width: 1024px) {
  :root {
    --container-pad: 3rem;
    --header-h: 80px;
  }

  .section { padding: var(--space-24) 0; }

  /* Afficher nav desktop, masquer burger */
  .nav { display: flex; }
  .burger { display: none; }
  .header-phone { display: flex; }

  /* Services → 3 colonnes */
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .service-card--featured { grid-column: auto; } /* Reset */

  /* Process → 4 colonnes */
  .process-steps {
    grid-template-columns: repeat(4, 1fr);
  }
  .process-steps::before { display: block; } /* Ligne connexion réapparaît */

  /* Why grid → proportions finales */
  .why-grid { grid-template-columns: 1fr 1.4fr; }

  /* Footer → 4 colonnes */
  .footer-grid { grid-template-columns: 1.8fr 1fr 1fr 1.3fr; }
}

/* --------- DESKTOP LARGE : ≥ 1280px --------- */
@media (min-width: 1280px) {
  :root {
    --container-pad: 4rem;
  }
}

/* --------- MOBILE SEULEMENT : < 1024px --------- */
@media (max-width: 1023px) {
  /* Masquer nav desktop, afficher burger */
  .nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-border);
    padding: var(--space-6) var(--container-pad);
    box-shadow: var(--shadow-lg);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition:
      transform var(--transition-base),
      opacity var(--transition-base);
    z-index: calc(var(--z-header) - 1);
  }
  .nav.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-list { flex-direction: column; gap: var(--space-1); align-items: stretch; }
  .nav-link { padding: var(--space-4); }

  /* Cacher le téléphone en header mobile */
  .header-phone { display: none; }

  /* Afficher le burger */
  .burger { display: flex; }

  /* Hero content */
  .hero-content { padding-top: var(--space-12); padding-bottom: var(--space-12); }

  /* KPI grid → 2×2 */
  .kpi-grid { grid-template-columns: 1fr 1fr; }

  /* Services → 1 colonne */
  .services-grid { grid-template-columns: 1fr; }
  .service-card--featured { grid-column: auto; }

  /* Why → 1 colonne */
  .why-grid { grid-template-columns: 1fr; }
  .reasons-grid { grid-template-columns: 1fr 1fr; }

  /* Process → 2 colonnes */
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .process-steps::before { display: none; }

  /* Contact → 1 colonne */
  .contact-grid { grid-template-columns: 1fr; }

  /* Formulaire → row devient colonne */
  .form-row { grid-template-columns: 1fr; }

  /* Footer → 2 colonnes */
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* --------- TRÈS PETIT MOBILE : < 480px --------- */
@media (max-width: 479px) {
  :root { --container-pad: 1rem; }

  .hero-cta { flex-direction: column; }
  .hero-stats { gap: var(--space-4); }
  .stat-divider { display: none; }

  /* About KPIs → 1 colonne */
  .kpi-grid { grid-template-columns: 1fr; }

  /* Raisons → 1 colonne */
  .reasons-grid { grid-template-columns: 1fr; }

  /* Contact form → padding réduit */
  .contact-form-wrap { padding: var(--space-6); }

  /* Footer → 1 colonne */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }

  /* Retour en haut — position ajustée */
  .back-to-top { bottom: var(--space-4); right: var(--space-4); }
}

/* --------- PRÉFÉRENCE ACCESSIBILITÉ : Pas d'animations --------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-animate] { opacity: 1; transform: none; }
}

/* --------- IMPRESSION --------- */
@media print {
  .header, .hero, .brands-bar, .back-to-top, .hero-scroll,
  .scroll-progress, .burger, .contact-form-wrap { display: none !important; }
  body { font-size: 12pt; color: #000; }
  .footer { background: none; color: #000; }
  a { color: #000; text-decoration: underline; }
}