/**
 * JC Conception — Design System 2026
 * Palette : Deep Navy · Bleu électrique · Blanc
 *
 * Structure :
 *   1. Variables CSS
 *   2. Reset / Base
 *   3. Back to Top
 *   4. Header / Nav
 *   5. Hero
 *   6. Section Header
 *   7. About
 *   8. Services
 *   9. Why Us / Stats
 *  10. Portfolio
 *  11. Testimonials
 *  12. Contact
 *  13. Footer
 *  14. Page Loader
 *  15. États initiaux GSAP
 *  16. Responsive
 */

/* ══════════════════════════════════════════════════════
   1. VARIABLES CSS
   Toutes les valeurs réutilisables du design system.
   Modifier ici pour changer la palette globale du site.
══════════════════════════════════════════════════════ */
:root {
  /* Couleurs principales */
  --navy:       #0a1628;   /* Fond sombre principal (hero, footer, why-us) */
  --navy-mid:   #111f38;   /* Variante légèrement plus claire */
  --navy-light: #1a2f50;   /* Utilisé pour les fonds secondaires sombres */
  --accent:     #1e90ff;   /* Bleu électrique — couleur d'accentuation principale */
  --accent-2:   #00d4ff;   /* Cyan — dégradé secondaire (gradient avec --accent) */
  --white:      #ffffff;
  --off-white:  #f0f6ff;   /* Fond légèrement bleuté pour les sections alternées */
  --gray:       #8899aa;   /* Texte secondaire / descriptions */
  --gray-light: #dde8f5;   /* Bordures subtiles, fonds de badges */

  /* Dimensions */
  --radius:     14px;      /* Rayon des cartes et conteneurs principaux */
  --radius-sm:  8px;       /* Rayon des éléments plus petits (badges, inputs) */

  /* Ombres */
  --shadow:     0 8px 40px rgba(10,22,40,.18);   /* Ombre principale (cartes) */
  --shadow-sm:  0 4px 16px rgba(10,22,40,.10);   /* Ombre légère */

  /* Typographie */
  --font-head:  "Montserrat", sans-serif;         /* Titres : gras, impactant */
  --font-body:  "Open Sans", sans-serif;          /* Corps de texte : lisible */

  /* Transition globale réutilisée sur tous les éléments interactifs */
  --transition: all .35s cubic-bezier(.4,0,.2,1);
}

/* ══════════════════════════════════════════════════════
   2. RESET / BASE
   Normalisation minimale + styles de base du document.
══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

/* Scroll fluide natif pour les ancres (complété par le scroll JS dans gsap-animations.js) */
html { scroll-behavior: smooth; }

body {
  background: var(--white);
  color: #2a3a50;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  overflow-x: hidden; /* Empêche le scroll horizontal causé par les animations GSAP */
}

/* Titres : tous en Montserrat bold */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 16px;
  color: var(--navy);
}

p { margin: 0 0 18px; }

a { color: var(--accent); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--accent-2); }

img { max-width: 100%; }

/* ══════════════════════════════════════════════════════
   3. BACK TO TOP
   Bouton fixe en bas à droite, visible dès 200px de scroll.
   La classe .active est ajoutée/retirée via gsap-animations.js.
══════════════════════════════════════════════════════ */
.back-to-top {
  position: fixed;
  bottom: 28px; right: 28px;
  z-index: 9999;
  background: var(--accent);
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 22px;
  box-shadow: 0 4px 20px rgba(30,144,255,.45);
  opacity: 0; visibility: hidden; /* Masqué par défaut */
  transition: var(--transition);
}
/* Rendu visible par l'ajout de .active (JS scroll listener) */
.back-to-top.active { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--accent-2); transform: translateY(-3px); }

/* ══════════════════════════════════════════════════════
   4. HEADER / NAV
   Header fixe transparent par défaut.
   Devient .header-scrolled (fond opaque + blur) après 80px de scroll.
   Animé à l'entrée par GSAP (y:-80 → 0) après le loader.
══════════════════════════════════════════════════════ */
#header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 9997; /* Sous le loader (99999) mais au-dessus du reste */
  background: rgba(10,22,40,.0); /* Transparent au départ */
  padding: 18px 0;
  transition: var(--transition);
}

/* État scrollé : fond semi-opaque avec flou (backdrop-filter) */
#header.header-scrolled {
  background: rgba(10,22,40,.97);
  padding: 12px 0;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px rgba(0,0,0,.3);
}

#header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo : flex avec gap entre image et texte */
.logo a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: .04em;
}
.logo a:hover { color: var(--accent-2); }
.logo img { height: 38px; width: auto; }

/* Navbar desktop : liens en flex horizontal avec pill actif */
.navbar ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: 6px;
}
.navbar ul li a {
  display: block;
  padding: 8px 16px;
  color: rgba(255,255,255,.85);
  font-size: .9rem;
  font-weight: 600;
  border-radius: 30px; /* Forme "pill" */
  letter-spacing: .03em;
  transition: var(--transition);
}
/* Lien actif et hover : fond bleu translucide */
.navbar ul li a:hover,
.navbar ul li a.active {
  color: #fff;
  background: rgba(30,144,255,.25);
}

/* Icône hamburger — cachée sur desktop, visible sur mobile */
.mobile-nav-toggle {
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  display: none;
}

/* ── Mobile nav (< 992px) ──────────────────────────── */
@media (max-width: 991px) {
  .mobile-nav-toggle { display: block; }
  /* Panel latéral glissant depuis la droite */
  .navbar {
    position: fixed;
    top: 70px; right: -100%; /* Masqué par défaut hors écran */
    width: 280px;
    background: var(--navy);
    border-radius: var(--radius) 0 0 var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    transition: right .35s ease;
  }
  /* .navbar-mobile ajouté par JS au clic sur le hamburger */
  .navbar.navbar-mobile { right: 0; }
  .navbar ul { flex-direction: column; gap: 4px; }
  .navbar ul li a { padding: 12px 20px; }
}

/* ══════════════════════════════════════════════════════
   5. HERO — plein écran
   Section d'accroche avec blobs décoratifs flottants,
   titre principal, description et deux boutons CTA.
   Les blobs sont animés par GSAP en boucle (x/y yoyo sine.inOut).
   La timeline hero démarre avec un délai de 1.3s (après le loader).
══════════════════════════════════════════════════════ */
#hero {
  min-height: 100vh;
  background: var(--navy);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden; /* Empêche les blobs de créer un scroll horizontal */
}

/* Conteneur des blobs — couvre toute la section en absolute */
.hero-bg-blobs {
  position: absolute;
  inset: 0;
  pointer-events: none; /* N'intercepte pas les clics */
  overflow: hidden;
}

/* Blob générique : cercle flou positionné en absolute */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px); /* Flou fort pour l'effet "glow" */
  opacity: .55;
}
/* Blob 1 : bleu, coin haut-gauche */
.blob-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, #1e5fff 0%, transparent 70%);
  top: -120px; left: -150px;
}
/* Blob 2 : cyan, coin bas-droit */
.blob-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, #00d4ff 0%, transparent 70%);
  bottom: -100px; right: -120px;
}
/* Blob 3 : violet, centre-droit — plus discret (opacity .3) */
.blob-3 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, #7b2fff 0%, transparent 70%);
  top: 40%; left: 50%;
  opacity: .3;
}

/* Contenu hero au-dessus des blobs (z-index: 2) */
.hero-content {
  position: relative;
  z-index: 2;
  padding: 120px 0 80px; /* Espace pour le header fixe en haut */
}

/* Label de localisation — pill avec bordure et fond bleu translucide */
.hero-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(30,144,255,.15);
  border: 1px solid rgba(30,144,255,.35);
  color: var(--accent-2);
  padding: 6px 16px;
  border-radius: 30px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

/* Titre principal avec taille fluide (clamp) */
.hero-title {
  font-size: clamp(2.4rem, 5vw, 4rem); /* Responsive sans media query */
  font-weight: 800;
  color: #fff;
  line-height: 1.12;
  margin-bottom: 20px;
}
/* Mot-clé en dégradé via background-clip text */
.hero-title .highlight {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-desc {
  color: rgba(255,255,255,.7);
  font-size: 1.05rem;
  max-width: 520px;
  margin-bottom: 36px;
  line-height: 1.75;
}

/* Groupe de boutons CTA — flex horizontal, passe en colonne sur mobile */
.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Bouton CTA principal — dégradé bleu, ombre portée */
.btn-primary-jc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  padding: 14px 30px;
  border-radius: 50px;
  font-weight: 700;
  font-size: .95rem;
  box-shadow: 0 6px 30px rgba(30,144,255,.45);
  transition: var(--transition);
  border: none;
  cursor: pointer;
}
/* L'effet magnétique GSAP (mousemove/mouseleave) s'ajoute au dessus de ce transform CSS */
.btn-primary-jc:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 40px rgba(30,144,255,.55);
  color: #fff;
}

/* Bouton CTA secondaire — contour, fond transparent */
.btn-outline-jc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: rgba(255,255,255,.85);
  padding: 13px 28px;
  border-radius: 50px;
  font-weight: 600;
  font-size: .95rem;
  border: 2px solid rgba(255,255,255,.3);
  transition: var(--transition);
}
.btn-outline-jc:hover {
  border-color: var(--accent-2);
  color: var(--accent-2);
  transform: translateY(-2px);
}

/* Illustration hero — centrée, masquée sur mobile */
.hero-visual {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}
.hero-visual img {
  max-width: 100%;
  filter: drop-shadow(0 20px 60px rgba(30,144,255,.35)); /* Halo bleu sous l'image */
}

/* Indicateur de scroll en bas du hero — barre animée par GSAP (scaleY pulsé) */
.hero-scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.45);
  font-size: .75rem;
  letter-spacing: .1em;
}
/* La barre est animée par GSAP : scaleY 1 → 0.3 → 1 en boucle */
.scroll-line {
  width: 2px;
  height: 40px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  border-radius: 2px;
}

/* ══════════════════════════════════════════════════════
   6. SECTION HEADER
   En-tête centré commun à toutes les sections (sauf #about).
   Le ::after crée le trait de soulignement coloré en dégradé.
   Pour #portfolio, #testimonials, #contact : masqué par défaut
   (voir section 15 "États initiaux GSAP") → révélé par gsap.to.
══════════════════════════════════════════════════════ */
.section-header {
  text-align: center;
  margin-bottom: 56px;
}
.section-header h3 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 14px;
  position: relative;
  display: inline-block;
}
/* Trait coloré centré sous le titre — généré en CSS pur */
.section-header h3::after {
  content: "";
  display: block;
  width: 60px; height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 2px;
  margin: 12px auto 0;
}
.section-header p {
  color: var(--gray);
  font-size: 1rem;
  max-width: 560px;
  margin: 0 auto; /* Centrage horizontal du texte sous le titre */
}

/* Espacement vertical commun à toutes les sections */
section { padding: 90px 0; }
/* Fond légèrement coloré pour les sections alternées (services, testimonials) */
.section-bg { background: var(--off-white); }
/* Fond sombre (why-us) — texte blanc */
.section-dark {
  background: var(--navy);
  color: rgba(255,255,255,.85);
}
/* Titres en blanc sur les sections sombres */
.section-dark .section-header h3 { color: #fff; }
.section-dark .section-header p { color: rgba(255,255,255,.55); }

/* ══════════════════════════════════════════════════════
   7. ABOUT
   Deux colonnes : texte (features + badges) et image avec badge.
   Les .about-feature entrent depuis la gauche via GSAP ScrollTrigger.
   L'état initial masqué (opacity:0, translateX(-40px)) est dans la
   section 15 "États initiaux GSAP".
══════════════════════════════════════════════════════ */
/* Feature = icône + texte côte à côte */
.about-feature {
  display: flex;
  gap: 18px;
  margin-bottom: 28px;
  align-items: flex-start;
}
/* Carré icon avec fond en dégradé translucide */
.about-feature-icon {
  flex-shrink: 0;
  width: 52px; height: 52px;
  background: linear-gradient(135deg, rgba(30,144,255,.15), rgba(0,212,255,.15));
  border: 1px solid rgba(30,144,255,.25);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  color: var(--accent);
}
.about-feature-text h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--navy);
}
.about-feature-text p {
  color: var(--gray);
  font-size: .9rem;
  margin: 0;
  line-height: 1.6;
}

/* Grille de badges de compétences techniques */
.about-skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
/* Badge individuel : pill bleu translucide */
.skill-badge {
  background: linear-gradient(135deg, rgba(30,144,255,.1), rgba(0,212,255,.1));
  border: 1px solid rgba(30,144,255,.2);
  color: var(--accent);
  padding: 5px 14px;
  border-radius: 30px;
  font-size: .8rem;
  font-weight: 600;
}

/* Contenant de l'image avec positionnement relatif pour le badge absolu */
.about-image-wrap {
  position: relative;
}
.about-image-wrap img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* Badge "42+ Projets" — positionné en absolute en bas à droite de l'image */
.about-badge {
  position: absolute;
  bottom: -16px;
  right: -16px;
  background: var(--accent);
  color: #fff;
  padding: 18px 22px;
  border-radius: var(--radius);
  text-align: center;
  font-family: var(--font-head);
  box-shadow: 0 8px 30px rgba(30,144,255,.4);
}
.about-badge .num {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}
.about-badge .label {
  font-size: .75rem;
  opacity: .9;
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════
   8. SERVICES
   Grille de 6 cartes sur fond --off-white.
   Effet "barre colorée" au hover via ::before pseudo-element.
   État initial masqué dans section 15 → révélé par GSAP avec stagger.
══════════════════════════════════════════════════════ */
.service-card {
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius);
  padding: 36px 30px;
  height: 100%; /* Égalise la hauteur des cartes dans une même ligne */
  transition: var(--transition);
  position: relative;
  overflow: hidden; /* Masque la barre ::before avant hover */
}
/* Barre colorée en haut de la carte — déployée au hover via scaleX */
.service-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.service-card:hover::before { transform: scaleX(1); }
.service-card:hover {
  border-color: rgba(30,144,255,.25);
  box-shadow: 0 12px 40px rgba(10,22,40,.12);
  transform: translateY(-6px);
}

/* Carré icône coloré (couleur définie en inline sur chaque carte) */
.service-icon {
  width: 58px; height: 58px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.service-card h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.service-card p {
  color: var(--gray);
  font-size: .88rem;
  line-height: 1.65;
  margin: 0;
}

/* ══════════════════════════════════════════════════════
   9. WHY US — STATS
   Section sombre avec 3 cartes d'atouts et 4 compteurs.
   Les compteurs sont animés par GSAP (pas PureCounter).
   Les .why-card sont masquées dans section 15 → révélées par GSAP.
══════════════════════════════════════════════════════ */
/* Carte d'atout — fond semi-transparent blanc sur fond navy */
.why-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 36px 28px;
  text-align: center;
  transition: var(--transition);
}
.why-card:hover {
  background: rgba(255,255,255,.10);
  transform: translateY(-4px);
  border-color: rgba(30,144,255,.4);
}
/* Icône de la carte en accent-2 (cyan) */
.why-card i {
  font-size: 2.2rem;
  color: var(--accent-2);
  margin-bottom: 16px;
  display: block;
}
.why-card h5 {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.why-card p {
  color: rgba(255,255,255,.55);
  font-size: .88rem;
  margin: 0;
}

/* Rangée de compteurs séparée des cartes par une ligne horizontale */
.counters-row {
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 60px;
  padding-top: 50px;
}
.counter-item { text-align: center; }
/* Chiffre du compteur — taille fluide, couleur cyan */
.counter-item .count {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--accent-2);
  line-height: 1;
  display: block;
}
.counter-item .count-label {
  color: rgba(255,255,255,.55);
  font-size: .85rem;
  margin-top: 6px;
  display: block;
}

/* ══════════════════════════════════════════════════════
   10. PORTFOLIO
   Grille filtrée par Isotope.js.
   Hover des cartes géré entièrement par GSAP (pas de :hover CSS pour l'overlay).
   .portfolio-info est positionné en absolute → animé en yPercent par GSAP.
══════════════════════════════════════════════════════ */
/* Liste de filtres Isotope */
#portfolio-flters {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 44px;
}
#portfolio-flters li {
  padding: 9px 22px;
  border-radius: 50px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid var(--gray-light);
  color: var(--gray);
  transition: var(--transition);
  letter-spacing: .03em;
}
/* Filtre actif / hover : dégradé bleu */
#portfolio-flters li.filter-active,
#portfolio-flters li:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 20px rgba(30,144,255,.35);
}

.portfolio-item { margin-bottom: 28px; }

/* Wrapper de la carte : overflow hidden pour le scale de l'image */
.portfolio-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  aspect-ratio: 4/3; /* Ratio fixe pour uniformiser les cartes */
}

.portfolio-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
  /* Le scale au hover est géré par GSAP (hoverIn timeline) */
}

/* Overlay d'info — gradient du bas vers transparent, animé par GSAP (yPercent) */
.portfolio-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(10,22,40,.95) 50%, transparent 100%);
  padding: 24px 22px 20px;
  /* opacity & yPercent initialisés par GSAP (gsap.set dans gsap-animations.js) */
}

.portfolio-info h4 {
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 4px;
}
/* Badge catégorie — pill bleu translucide */
.portfolio-info .cat {
  display: inline-block;
  background: rgba(30,144,255,.3);
  border: 1px solid rgba(30,144,255,.5);
  color: var(--accent-2);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}
/* Liens d'action (zoom + détails) */
.portfolio-links {
  display: flex;
  gap: 8px;
}
.portfolio-links a {
  width: 34px; height: 34px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: .95rem;
  transition: var(--transition);
}
.portfolio-links a:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.1);
}

/* ══════════════════════════════════════════════════════
   11. TESTIMONIALS
   Carrousel Swiper — une carte de témoignage à la fois.
   La guillemet ouvrante (::before) est générée en CSS.
   La carte est animée à l'entrée par GSAP (scale + opacity).
══════════════════════════════════════════════════════ */
.testimonial-item {
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius);
  padding: 36px 32px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
/* Photo de profil circulaire avec bordure bleue */
.testimonial-item img {
  width: 70px; height: 70px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 16px;
  border: 3px solid rgba(30,144,255,.3);
  display: block;
}
.testimonial-item h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 4px;
}
/* Titre/rôle en bleu accent */
.testimonial-item h4 {
  color: var(--accent);
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: 16px;
}
.testimonial-item p {
  color: var(--gray);
  font-size: .92rem;
  font-style: italic;
  line-height: 1.7;
  margin: 0;
}
/* Guillemet ouvrante décorative générée en CSS */
.testimonial-item::before {
  content: "\201C"; /* Caractère Unicode " */
  font-size: 4rem;
  color: var(--accent);
  line-height: 1;
  display: block;
  margin-bottom: -10px;
  font-family: Georgia, serif;
  opacity: .35;
}

/* ══════════════════════════════════════════════════════
   12. CONTACT
   Section sur fond --off-white.
   Gauche : 3 items d'info + carte Maps.
   Droite : formulaire blanc avec validation live.
   Bouton .btn-submit avec effet magnétique GSAP au hover.
══════════════════════════════════════════════════════ */
#contact { background: var(--off-white); }

/* Item d'info : icône carrée + texte côte à côte */
.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
}
/* Carré icône avec dégradé bleu */
.contact-info-item i {
  width: 46px; height: 46px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.contact-info-item h4 {
  font-size: .88rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.contact-info-item p {
  color: var(--gray);
  font-size: .88rem;
  margin: 0;
}

/* Iframe Google Maps avec coins arrondis */
.map iframe {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* Carte formulaire sur fond blanc */
.contact-form {
  background: var(--white);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow-sm);
}

/* Champs de formulaire avec focus ring bleu */
.contact-form .form-control {
  border: 1.5px solid var(--gray-light);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: .9rem;
  color: var(--navy);
  transition: var(--transition);
  background: #fff;
}
.contact-form .form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(30,144,255,.12); /* Ring de focus discret */
  outline: none;
}
.contact-form textarea.form-control { resize: vertical; min-height: 130px; }

.contact-form .form-group { margin-bottom: 16px; }

/* Bouton d'envoi — pleine largeur avec dégradé et ombre */
.btn-submit {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  border: none;
  padding: 14px 36px;
  border-radius: 50px;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  box-shadow: 0 6px 25px rgba(30,144,255,.4);
  transition: var(--transition);
  display: block;
  width: 100%;
}
.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 35px rgba(30,144,255,.5);
}

/* Messages de statut du formulaire — gérés par validate.js (affichage/masquage) */
.loading, .error-message, .sent-message {
  display: none; /* Cachés par défaut, affichés par JS selon l'état */
  margin-top: 12px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: .88rem;
}
.loading { color: var(--accent); background: rgba(30,144,255,.08); }
.error-message { color: #e74c3c; background: rgba(231,76,60,.08); }
.sent-message { color: #27ae60; background: rgba(39,174,96,.08); }

/* ══════════════════════════════════════════════════════
   13. FOOTER
   4 colonnes sur fond navy.
   Les chevrons (›) devant les liens sont générés en CSS.
   Chaque colonne est animée à l'entrée par GSAP (stagger).
══════════════════════════════════════════════════════ */
#footer {
  background: var(--navy);
  color: rgba(255,255,255,.65);
  padding: 56px 0 24px;
}

/* Colonne marque : logo + description + réseaux sociaux */
.footer-brand a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 14px;
}
.footer-brand img { height: 32px; }
.footer-brand p { font-size: .88rem; color: rgba(255,255,255,.5); }

/* En-têtes des colonnes liens */
.footer-links h4 {
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.footer-links ul { list-style: none; padding: 0; margin: 0; }
.footer-links ul li { margin-bottom: 8px; }
.footer-links ul li a {
  color: rgba(255,255,255,.5);
  font-size: .88rem;
  transition: var(--transition);
  display: flex; align-items: center; gap: 6px;
}
/* Chevron décoratif généré en CSS avant chaque lien */
.footer-links ul li a::before {
  content: "›";
  color: var(--accent);
}
/* Effet décalage au hover pour simuler un "clic" */
.footer-links ul li a:hover { color: var(--accent-2); padding-left: 4px; }

/* Colonne contact */
.footer-contact h4 {
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.footer-contact p {
  font-size: .88rem;
  color: rgba(255,255,255,.5);
  line-height: 1.8;
  margin: 0;
}
.footer-contact strong { color: rgba(255,255,255,.75); }

/* Icônes réseaux sociaux — cercles avec hover bleu */
.social-links {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.social-links a {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.65);
  font-size: .9rem;
  transition: var(--transition);
}
.social-links a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-3px);
}

/* Ligne de copyright en bas du footer */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 40px;
  padding-top: 20px;
  text-align: center;
  font-size: .82rem;
  color: rgba(255,255,255,.3);
}
.footer-bottom strong { color: rgba(255,255,255,.55); }

/* ══════════════════════════════════════════════════════
   14. PAGE LOADER
   Overlay plein écran affiché avant le contenu.
   Animé par GSAP : barre de progression (0% → 100%) puis
   slide-up (#page-loader yPercent → -100%).
══════════════════════════════════════════════════════ */
/* Overlay couvrant toute la fenêtre, au-dessus de tout (z-index: 99999) */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
/* Conteneur centré : logo + barre de progression */
.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
/* Logo en blanc (filtre invert) pendant le chargement */
.loader-inner img {
  height: 52px;
  width: auto;
  filter: brightness(0) invert(1); /* Convertit l'image en blanc */
  opacity: 0.9;
}
/* Piste de la barre de progression */
.loader-bar {
  width: 200px;
  height: 3px;
  background: rgba(255,255,255,.12); /* Fond quasi-transparent */
  border-radius: 4px;
  overflow: hidden;
}
/* Remplissage animé par GSAP : width 0% → 100% en 0.9s */
.loader-progress {
  height: 100%;
  width: 0%; /* Démarre à 0, animé par GSAP */
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 4px;
}

/* ══════════════════════════════════════════════════════
   15. ÉTATS INITIAUX POUR ANIMATIONS GSAP (stratégie gsap.to)
   Ces éléments démarrent masqués via CSS.
   GSAP les révèle via gsap.to() au scroll (ScrollTrigger).
   Utiliser gsap.to() plutôt que gsap.from() évite un "flash"
   du contenu visible une fraction de seconde avant l'animation.
══════════════════════════════════════════════════════ */
/* Cartes services et why-us : masquées, décalées vers le bas */
.service-card,
.why-card {
  opacity: 0;
  transform: translateY(40px);
}
/* Features about : masquées, décalées vers la droite */
.about-feature {
  opacity: 0;
  transform: translateX(-40px);
}
/* Items portfolio : masqués, décalés vers le bas */
.portfolio-item {
  opacity: 0;
  transform: translateY(40px);
}

/* Section headers de portfolio, testimonials et contact :
   masqués par défaut pour éviter le flash au chargement.
   Révélés par gsap.to() via ScrollTrigger (onEnter).
   Note : #about n'est pas ici car son header utilise du style inline. */
#portfolio .section-header,
#testimonials .section-header,
#contact .section-header {
  opacity: 0;
  transform: translateY(40px);
}

/* ══════════════════════════════════════════════════════
   16. RESPONSIVE
   Ajustements pour les petits écrans.
   Le nav mobile est géré dans la section 4 (@media max 991px).
══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .hero-title { font-size: 2rem; }
  .hero-desc { font-size: .95rem; }
  /* CTA en colonne sur mobile */
  .hero-cta { flex-direction: column; }
  .btn-primary-jc, .btn-outline-jc { justify-content: center; }
  /* Illustration hero cachée sur mobile pour gagner de l'espace */
  .hero-visual { display: none; }
  /* Espacement réduit */
  section { padding: 60px 0; }
  .about-badge { bottom: -8px; right: 0; }
  .contact-form { padding: 24px; }
}

@media (max-width: 575px) {
  /* Compteurs : espacement supplémentaire en extra-small */
  .counter-item { margin-bottom: 24px; }
}