/* ============================================================
   HARMATTAN DRONE SERVICE, css/home.css
   Relooking v2 du 2026-07-02 (TY-INFO)
   Direction artistique : salle de contrôle aérienne, éditorial
   technique. Charte graphique v2.0 strictement conservée
   (palette, typographies, règles d'usage de l'accent).
   Compatibilité : tous les noms de classes de la v1 sont
   conservés, les 6 autres pages continuent de fonctionner.
   Sauvegarde v1 : www/sauvegardes/2026-07-02-avant-relooking/
   ============================================================ */

/* ============================================================
   TOKENS HARMATTAN DRONE SERVICE
   (palette et typo validées client)
============================================================ */
:root {
  /* Couleurs */
  --bg:            #06090E;
  --green-dark:    #06402E;
  --green-mid:     #1C4D3E;
  --accent:        #00E5A0;
  --yellow:        #F4CE3A;
  --text-secondary:#5B7186;
  --text-tertiary: #7E94A8;
  --text-muted:    #9FB1C2;
  --ardoise:       #0E1722;
  --alerte:        #FF5C5C;
  --brume:         #E6EDF3;
  --border-subtle: rgba(255,255,255,.06);
  --border-accent: rgba(0,229,160,.2);
  --white:         #FFFFFF;
  --bg-light:      #faf9f5;

  /* Typo */
  --font-head:  'Chakra Petch', monospace, sans-serif;
  --font-body:  'Inter Tight', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'Courier New', monospace;

  /* Misc */
  --radius:     8px;
  --radius-sm:  4px;
  --radius-lg: 16px;
  --ease:      cubic-bezier(.4,0,.2,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --t:         .3s;
  --t-slow:    .65s;
}

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-muted);
  line-height: 1.65;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img { display: block; }

h1, h2, h3, h4, h5 { font-family: var(--font-head); color: var(--white); }

.container {
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Sélection de texte aux couleurs de la marque */
::selection { background: var(--accent); color: var(--bg); }

/* Barre de défilement discrète (WebKit) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #16202c; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--green-mid); }

/* Focus clavier visible (accessibilité) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   COMPOSANTS PARTAGÉS
============================================================ */

/* Pastille étiquette de section (style v1 restauré à la demande
   de Thierry le 2026-07-02) */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border: 1px solid var(--border-accent);
  background: rgba(0,229,160,.07);
  border-radius: 100px;
  /* Charte [06] : JetBrains Mono pour libellés et annotations */
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
}
.section-tag::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: blink 2.2s ease-in-out infinite;
}
@keyframes blink {
  0%,100% { opacity: 1; }
  50%      { opacity: .25; }
}

/* Titres de section (mutualisé, remplace les styles inline v1) */
.section-title {
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.15;
}

/* Boutons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  overflow: hidden;
  transition: all var(--t) var(--ease);
}
.btn .icon { transition: transform var(--t) var(--ease); }
.btn:hover .icon { transform: translateX(3px); }

.btn-primary {
  background: var(--accent);
  color: var(--bg);
}
/* Reflet balayant au survol */
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s var(--ease-out);
  pointer-events: none;
}
.btn-primary:hover::before { transform: translateX(120%); }
.btn-primary:hover {
  background: #00c98c;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,229,160,.28);
}
.btn-outline {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,.18);
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}

/* Icônes SVG inline */
.icon { flex-shrink: 0; }

/* ------------------------------------------------------------
   RÉVÉLATIONS AU SCROLL
   .fade / .fade-dN : système v1 conservé (autres pages)
   [data-rv]        : système v2, variantes de mouvement
------------------------------------------------------------ */
.fade {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}
.fade.visible { opacity: 1; transform: translateY(0); }
.fade-d1 { transition-delay: .1s; }
.fade-d2 { transition-delay: .2s; }
.fade-d3 { transition-delay: .3s; }
.fade-d4 { transition-delay: .4s; }

[data-rv] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
  will-change: opacity, transform;
}
[data-rv="left"]  { transform: translateX(-32px); }
[data-rv="right"] { transform: translateX(32px); }
[data-rv="scale"] { transform: scale(.94); }
[data-rv].in {
  opacity: 1;
  transform: none;
}
/* Décalages en cascade */
[data-rv-d="1"] { transition-delay: .1s; }
[data-rv-d="2"] { transition-delay: .2s; }
[data-rv-d="3"] { transition-delay: .3s; }
[data-rv-d="4"] { transition-delay: .4s; }
[data-rv-d="5"] { transition-delay: .5s; }

/* ============================================================
   NAVIGATION
============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  padding: 18px 0;
  transition: background var(--t), padding var(--t), border-color var(--t), box-shadow var(--t);
}
.nav.scrolled {
  background: rgba(6,9,14,.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border-subtle);
  padding: 12px 0;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-logo-img {
  display: inline-block;
  height: 82px;
  width: auto;
  max-width: none;
  flex-shrink: 0;
  transition: filter var(--t);
}
.nav-logo:hover .nav-logo-img { filter: drop-shadow(0 0 10px rgba(0,229,160,.35)); }
/* Fallback texte si image ne se charge pas */
.nav-logo-text {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .95rem;
  color: var(--white);
  letter-spacing: .04em;
  line-height: 1.15;
}
.nav-logo-text span {
  display: block;
  font-size: .58rem;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Liens */
.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
}
.nav-links a {
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-muted);
  position: relative;
  transition: color var(--t);
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(0,229,160,.6);
  transition: width var(--t) var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--white); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

/* ============================================================
   HERO
============================================================ */
.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 120px 0 90px;
}

/* Fond topo (courbes de niveau) : retiré le 2026-06-29 à la demande
   du client. Fichier topo.png conservé. Pour réactiver, décommenter. */
/*
.hero-topo {
  position: absolute;
  inset: 0;
  background: url("../assets/textures/topo.png") center / cover no-repeat;
  opacity: .06;
  pointer-events: none;
  z-index: 0;
}
*/

/* Grille technique, plus resserrée et estompée vers le bas */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,229,160,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,160,.03) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 85% at 65% 0%, black 25%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 85% at 65% 0%, black 25%, transparent 100%);
}
/* Fine ligne de séparation en bas du hero */
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,229,160,.22), transparent);
}

/* Règle graduée verticale, détail HUD (masquée sur écrans étroits) */
.hero-ruler {
  position: absolute;
  left: 26px; top: 22%; bottom: 22%;
  width: 9px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(126,148,168,.4) 0 1px,
    transparent 1px 16px
  );
  opacity: .3;
  pointer-events: none;
}

/* Halos */
.hero-glow-1 {
  position: absolute;
  top: -15%; right: -8%;
  width: 580px; height: 580px;
  background: radial-gradient(circle, rgba(0,229,160,.07) 0%, transparent 65%);
  pointer-events: none;
}
.hero-glow-2 {
  position: absolute;
  bottom: -5%; left: -3%;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(6,64,46,.28) 0%, transparent 65%);
  pointer-events: none;
}

/* Composition asymétrique : le texte respire davantage */
.hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 72px;
  align-items: center;
}

/* Surtitre mono, motif « // » de la charte */
.hero-kicker {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 26px;
  opacity: 0;
  animation: rise-in .8s var(--ease-out) .15s forwards;
}

/* Badge certif en haut du hero (conservé pour les autres pages) */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(0,229,160,.07);
  border: 1px solid rgba(0,229,160,.22);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 28px;
}
.hero-badge-dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: blink 2s ease-in-out infinite;
}

/* Dust : conservé pour retour arrière éventuel (retiré de l'affichage) */
.hero-dust {
  position: absolute;
  right: -4%;
  top: 15%;
  width: 52%;
  max-width: 820px;
  opacity: .38;
  pointer-events: none;
  z-index: 0;
}

/* Titre : plus grand, révélation ligne par ligne au chargement */
.hero h1 {
  font-size: clamp(2.9rem, 5.4vw, 4.9rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.04;
  letter-spacing: -.028em;
  margin-bottom: 28px;
}
.hero h1 .accent { color: var(--accent); font-style: normal; }
.hero h1 .line {
  display: block;
  overflow: hidden;
}
.hero h1 .line-in {
  display: block;
  transform: translateY(112%);
  animation: line-up .95s var(--ease-out) forwards;
}
.hero h1 .line:nth-child(2) .line-in { animation-delay: .14s; }
@keyframes line-up {
  to { transform: translateY(0); }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-desc {
  font-size: 1.05rem;
  color: var(--text-tertiary);
  line-height: 1.72;
  max-width: 560px;
  margin-bottom: 40px;
  opacity: 0;
  animation: rise-in .8s var(--ease-out) .4s forwards;
}

.hero-ctas {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 48px;
  opacity: 0;
  animation: rise-in .8s var(--ease-out) .55s forwards;
}

/* Bandeau certifs sous les CTAs */
.hero-certifs {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 32px;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  opacity: 0;
  animation: rise-in .8s var(--ease-out) .7s forwards;
}
.certif-label {
  font-family: var(--font-mono);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--text-secondary);
}
.certif-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: border-color var(--t), color var(--t), transform var(--t);
}
.certif-pill:hover {
  border-color: var(--border-accent);
  color: var(--brume);
  transform: translateY(-2px);
}
.certif-pill svg { color: var(--accent); }

/* Visuel drone côté droit */
.hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  opacity: 0;
  animation: rise-in 1s var(--ease-out) .35s forwards;
}
.drone-arena {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 1;
}

/* Équerres HUD aux coins de l'arène */
.drone-arena::before,
.drone-arena::after,
.hud-tr, .hud-bl {
  position: absolute;
  width: 26px; height: 26px;
  pointer-events: none;
}
.drone-arena::before {
  content: '';
  top: -10px; left: -10px;
  border-top: 1px solid rgba(0,229,160,.45);
  border-left: 1px solid rgba(0,229,160,.45);
}
.drone-arena::after {
  content: '';
  bottom: -10px; right: -10px;
  border-bottom: 1px solid rgba(0,229,160,.45);
  border-right: 1px solid rgba(0,229,160,.45);
}
.hud-tr {
  top: -10px; right: -10px;
  border-top: 1px solid rgba(0,229,160,.2);
  border-right: 1px solid rgba(0,229,160,.2);
}
.hud-bl {
  bottom: -10px; left: -10px;
  border-bottom: 1px solid rgba(0,229,160,.2);
  border-left: 1px solid rgba(0,229,160,.2);
}

/* Balayage radar dans l'arène */
.drone-radar {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0,229,160,.09) 0%, transparent 16%);
  animation: rot 7.5s linear infinite;
  pointer-events: none;
}

/* Anneaux de visée */
.ring {
  position: absolute;
  border: 1px solid rgba(0,229,160,.12);
  border-radius: 50%;
}
.ring-1 { inset: 0; }
.ring-2 {
  inset: 16%;
  border-color: rgba(0,229,160,.18);
  border-style: dashed;
  animation: rot 26s linear infinite;
}
.ring-3 {
  inset: 31%;
  border-color: rgba(0,229,160,.26);
  animation: rot-inv 40s linear infinite;
}
@keyframes rot {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes rot-inv {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}
.ring-2::before {
  content: '';
  position: absolute;
  top: -3px; left: 50%;
  width: 5px; height: 5px;
  background: var(--accent);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 8px var(--accent);
}
.ring-3::before {
  content: '';
  position: absolute;
  bottom: -3px; left: 50%;
  width: 4px; height: 4px;
  background: rgba(0,229,160,.5);
  border-radius: 50%;
  transform: translateX(-50%);
}

/* Cercle central drone */
.drone-center {
  position: absolute;
  inset: 22%;
  background: radial-gradient(ellipse at 40% 30%, var(--green-mid) 0%, var(--green-dark) 60%, rgba(6,64,46,.4) 100%);
  border-radius: 50%;
  border: 1px solid rgba(0,229,160,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible; /* drone agrandi x2 : ne pas rogner le dessin du drone */
}
/* Crosshair */
.drone-center::before {
  content: '';
  position: absolute;
  width: 1px; top: 0; bottom: 0;
  left: 50%;
  background: rgba(0,229,160,.18);
}
.drone-center::after {
  content: '';
  position: absolute;
  height: 1px; left: 0; right: 0;
  top: 50%;
  background: rgba(0,229,160,.18);
}

/* Flottement du drone (vol stationnaire) */
.drone-float {
  animation: hover-drift 5.5s ease-in-out infinite;
}
@keyframes hover-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
/* Drone agrandi x2 (demande client) : seul le dessin est grossi,
   pas les anneaux ni le cercle central. */
.drone-center svg { transform: scale(2); transform-origin: center; }

/* Coordonnées tech en superposition, curseur clignotant */
.drone-coords {
  position: absolute;
  bottom: 22px; right: 14px;
  font-family: var(--font-mono);
  font-size: .6rem;
  color: rgba(0,229,160,.45);
  line-height: 1.85;
  text-align: right;
}
.drone-coords::after {
  content: '_';
  color: var(--accent);
  animation: blink 1.1s steps(1) infinite;
}

/* Indicateur scroll */
.scroll-hint {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: .45;
  pointer-events: none;
}
.scroll-hint span {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.scroll-line {
  width: 1px; height: 38px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: scroll-ani 2.1s ease-in-out infinite;
}
@keyframes scroll-ani {
  0%   { transform: scaleY(0); transform-origin: top; }
  49%  { transform: scaleY(1); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ============================================================
   STATS BAR (télémétrie)
============================================================ */
.stats-bar {
  background: var(--green-dark);
  border-top: 1px solid rgba(0,229,160,.12);
  border-bottom: 1px solid rgba(0,229,160,.12);
  padding: 46px 0;
  position: relative;
  overflow: hidden;
}
/* Balayage lumineux très lent sur toute la barre */
.stats-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0%, rgba(0,229,160,.05) 50%, transparent 100%);
  background-size: 240% 100%;
  animation: hvSweep 11s linear infinite;
  pointer-events: none;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
}
.stat-item {
  text-align: center;
  padding: 0 20px;
  position: relative;
}
.stat-item + .stat-item::before {
  content: '';
  position: absolute;
  left: 0; top: 10%; height: 80%;
  width: 1px;
  background: rgba(0,229,160,.14);
}
.stat-num {
  font-family: var(--font-head);
  font-size: 2.9rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.stat-num sup { font-size: 1.4rem; }
.stat-label {
  font-family: var(--font-mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(159,177,194,.7);
}

/* ============================================================
   SERVICES
============================================================ */
.services { padding: 110px 0; position: relative; }

.section-header { margin-bottom: 56px; }
.section-header h2 {
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.18;
  margin-bottom: 16px;
}
.section-header p {
  font-size: 1rem;
  color: var(--text-tertiary);
  max-width: 650px;
  line-height: 1.72;
}

/* Grille non-standard : 1 vedette pleine largeur + 2 cartes */
.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.service-card {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 38px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--t), background var(--t), transform var(--t) var(--ease), box-shadow var(--t);
  cursor: default;
}
.service-card:hover {
  border-color: rgba(0,229,160,.22);
  background: rgba(0,229,160,.03);
  transform: translateY(-5px);
  box-shadow: 0 18px 44px rgba(0,0,0,.4);
}
/* Ligne d'accent en haut, dessinée au survol */
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--accent), transparent 70%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.service-card:hover::before { transform: scaleX(1); }
/* Lueur coin sup-droit */
.service-card::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(0,229,160,.07), transparent 70%);
  opacity: 0;
  transition: opacity var(--t);
}
.service-card:hover::after { opacity: 1; }

/* Numéro fantôme éditorial (01, 02, 03) */
.service-num {
  position: absolute;
  top: 22px; right: 30px;
  font-family: var(--font-head);
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(230,237,243,.05);
  transition: color var(--t);
  pointer-events: none;
  z-index: 0;
}
.service-card:hover .service-num { color: rgba(0,229,160,.14); }

/* Carte vedette = occupe 2 colonnes */
.service-card.featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
  padding: 48px;
}

.service-icon-wrap {
  width: 52px; height: 52px;
  background: rgba(0,229,160,.09);
  border: 1px solid rgba(0,229,160,.18);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  transition: background var(--t), transform .45s var(--ease-out);
}
.service-card:hover .service-icon-wrap {
  background: rgba(0,229,160,.15);
  transform: translateY(-3px) rotate(-4deg);
}

.service-tag {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(0,229,160,.08);
  border: 1px solid rgba(0,229,160,.18);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.service-card h3 {
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: .01em;
  margin-bottom: 12px;
}
.service-card p {
  font-size: .9rem;
  color: var(--text-tertiary);
  line-height: 1.72;
  margin-bottom: 22px;
}
.service-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  transition: gap var(--t);
}
.service-link:hover { gap: 12px; }

/* Visuel carte vedette, avec ligne de balayage verticale */
.service-visual {
  background: linear-gradient(135deg, var(--green-dark), rgba(28,77,62,.5));
  border-radius: var(--radius);
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,229,160,.1);
  position: relative;
  overflow: hidden;
}
.service-visual-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,229,160,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,160,.05) 1px, transparent 1px);
  background-size: 28px 28px;
}
.service-visual::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -20%;
  height: 34%;
  background: linear-gradient(to bottom, transparent, rgba(0,229,160,.08), transparent);
  animation: scan-y 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes scan-y {
  0%   { transform: translateY(-60%); }
  55%  { transform: translateY(320%); }
  100% { transform: translateY(320%); }
}

/* ============================================================
   RÉALISATIONS (GALERIE)
============================================================ */
.gallery-section {
  padding: 110px 0;
  background: linear-gradient(to bottom, var(--bg) 0%, rgba(6,64,46,.06) 100%);
}
.section-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 44px;
  gap: 24px;
}

/* Grille 3+2 avec premier item sur 2 lignes */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 220px 220px;
  gap: 14px;
}
.gallery-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
}
.gallery-item:first-child {
  grid-row: 1 / 3;
}

/* Équerre HUD au survol (coin haut-gauche) */
.gallery-item::after {
  content: '';
  position: absolute;
  top: 14px; left: 14px;
  width: 22px; height: 22px;
  border-top: 1px solid rgba(0,229,160,.7);
  border-left: 1px solid rgba(0,229,160,.7);
  opacity: 0;
  transform: translate(-6px,-6px);
  transition: opacity var(--t), transform var(--t) var(--ease-out);
  z-index: 3;
  pointer-events: none;
}
.gallery-item:hover::after {
  opacity: 1;
  transform: translate(0,0);
}

/* Index mono en haut à droite */
.gallery-idx {
  position: absolute;
  top: 14px; right: 16px;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  color: rgba(230,237,243,.4);
  z-index: 3;
  transition: color var(--t);
  pointer-events: none;
}
.gallery-item:hover .gallery-idx { color: var(--accent); }

/* Fonds CSS pour chaque item, zoom lent au survol */
.gallery-bg {
  position: absolute;
  inset: 0;
  transition: transform 1.1s var(--ease-out);
}
.gallery-item:hover .gallery-bg { transform: scale(1.07); }
.g1 { background: linear-gradient(145deg, #061c12, #0d3522); }
.g2 { background: linear-gradient(145deg, #08111d, #152235); }
.g3 { background: linear-gradient(145deg, #130d1e, #241438); }
.g4 { background: linear-gradient(145deg, #181100, #2c1f00); }
.g5 { background: linear-gradient(145deg, #06090E, #0d1a2a); }

/* Légende : désormais visible en permanence, glisse au survol */
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6,9,14,.92) 0%, rgba(6,9,14,.15) 52%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  z-index: 2;
}
.gallery-title {
  font-family: var(--font-head);
  font-size: .9rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 4px;
  transition: transform var(--t) var(--ease-out);
}
.gallery-cat {
  font-family: var(--font-mono);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--accent);
  opacity: .75;
  transition: opacity var(--t), transform var(--t) var(--ease-out);
}
.gallery-item:hover .gallery-title { transform: translateY(-2px); }
.gallery-item:hover .gallery-cat   { opacity: 1; transform: translateY(-2px); }

/* Icône placeholder au centre */
.gallery-icon-placeholder {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  opacity: .1;
  transition: opacity var(--t);
}
.gallery-item:hover .gallery-icon-placeholder { opacity: .22; }

/* ============================================================
   POURQUOI NOUS
============================================================ */
.why-section { padding: 110px 0; }
.why-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 80px;
  align-items: center;
}
.why-desc {
  font-size: 1rem;
  color: var(--text-tertiary);
  line-height: 1.72;
  margin-bottom: 48px;
}
.why-features {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.why-feature {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding-left: 16px;
  border-left: 1px solid var(--border-subtle);
  transition: border-color var(--t);
}
.why-feature:hover { border-left-color: var(--border-accent); }
.why-icon {
  width: 44px; height: 44px;
  min-width: 44px;
  background: rgba(0,229,160,.08);
  border: 1px solid rgba(0,229,160,.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  transition: background var(--t), transform .45s var(--ease-out);
}
.why-feature:hover .why-icon {
  background: rgba(0,229,160,.14);
  transform: translateY(-2px);
}
.why-feature-title {
  font-family: var(--font-head);
  font-size: .98rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 6px;
  letter-spacing: .01em;
}
.why-feature-text {
  font-size: .875rem;
  color: var(--text-tertiary);
  line-height: 1.68;
}

/* Card certifications */
.certif-card {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 44px;
  position: relative;
  overflow: hidden;
}
.certif-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
/* Balayage lumineux discret (motif de la charte) */
.certif-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0%, rgba(0,229,160,.04) 50%, transparent 100%);
  background-size: 240% 100%;
  animation: hvSweep 10s linear infinite;
  pointer-events: none;
}
.certif-card h3 {
  font-size: 1.22rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.certif-card > p {
  font-size: .9rem;
  color: var(--text-tertiary);
  line-height: 1.68;
  margin-bottom: 30px;
}
.certif-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.certif-box {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
  transition: border-color var(--t), background var(--t), transform var(--t);
}
.certif-box:hover {
  border-color: var(--border-accent);
  background: rgba(0,229,160,.05);
  transform: translateY(-3px);
}
.certif-box-icon {
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 6px;
  line-height: 1;
}
.certif-box-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-tertiary);
  line-height: 1.4;
}

/* ============================================================
   CTA CONTACT
============================================================ */
.cta-section {
  padding: 130px 0;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--green-dark) 0%, rgba(6,9,14,0) 55%);
}
.cta-section::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,229,160,.28), transparent);
}

/* Texte fantôme défilant en arrière-plan (signature mémorable) */
.cta-marquee {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.cta-marquee-track {
  display: flex;
  flex-shrink: 0;
  animation: marquee 52s linear infinite;
}
.cta-marquee-track span {
  white-space: nowrap;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(4.5rem, 11vw, 9.5rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0,229,160,.07);
  padding-right: 80px;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

.cta-inner {
  position: relative;
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
  z-index: 1;
}
.cta-inner .section-tag { justify-content: center; }
.cta-inner h2 {
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 20px;
}
.cta-inner p {
  font-size: 1rem;
  color: var(--text-tertiary);
  line-height: 1.72;
  margin-bottom: 40px;
}
.cta-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ============================================================
   FOOTER
============================================================ */
.footer {
  background: rgba(0,0,0,.35);
  border-top: 1px solid var(--border-subtle);
  padding: 64px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 56px;
  margin-bottom: 56px;
}
.footer-logo-area .nav-logo-text { margin-top: 14px; }
.footer-about {
  font-size: .875rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-top: 14px;
  max-width: 350px;
}
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--accent);
  margin-bottom: 20px;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
}
.footer-links a {
  font-size: .875rem;
  color: var(--text-secondary);
  transition: color var(--t), padding-left var(--t) var(--ease);
}
.footer-links a:hover { color: var(--accent); padding-left: 6px; }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
  gap: 16px;
}
.footer-bottom p, .footer-bottom a {
  font-size: .8rem;
  color: var(--text-secondary);
}
.footer-bottom a:hover { color: var(--accent); }
.footer-legal { display: flex; gap: 22px; }

/* ============================================================
   BANDEAU COOKIE
============================================================ */
.cookie-banner {
  position: fixed;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: rgba(28,29,36,.96);
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(16px);
  border-radius: var(--radius-lg);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 880px;
  width: calc(100% - 32px);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.cookie-text {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.cookie-text a { color: var(--accent); text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-accept, .cookie-refuse {
  padding: 8px 16px;
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t);
}
.cookie-accept:hover, .cookie-refuse:hover { transform: translateY(-1px); }
.cookie-accept { background: var(--accent); color: var(--bg); }
.cookie-refuse {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

/* ============================================================
   RESPONSIVE (bases)
============================================================ */
@media (max-width: 1100px) {
  .hero-ruler { display: none; }
}
@media (max-width: 960px) {
  .hero-content { grid-template-columns: 1fr; }
  .hero-visual  { display: none; }
  .why-grid     { grid-template-columns: 1fr; gap: 48px; }
  .footer-grid  { grid-template-columns: 1fr 1fr; gap: 40px; }
  .stats-grid   { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .stat-item + .stat-item::before { display: none; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card.featured { grid-column: 1; display: block; }
  .service-visual { margin-top: 28px; }
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .gallery-grid .gallery-item { min-height: 200px; }
  .gallery-item:first-child { grid-row: auto; }
  .nav-links { display: none; }
}
@media (max-width: 580px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .footer-grid  { grid-template-columns: 1fr; }
  .section-header-row { flex-direction: column; align-items: flex-start; }
  .hero-certifs { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   BADGE CHARTE : "Vol en cours. Restez connectés."
   Extrait fidèle de la charte graphique v2.0
============================================================ */
@keyframes badge-drift {
  0%   { transform: rotate(-2deg) translate(0px, 0px); }
  18%  { transform: rotate(-1deg) translate(-38px, -60px); }
  35%  { transform: rotate(-3deg) translate(18px, -115px); }
  52%  { transform: rotate(-1.5deg) translate(-48px, -80px); }
  68%  { transform: rotate(-2.5deg) translate(22px, -42px); }
  84%  { transform: rotate(-1deg) translate(-20px, -98px); }
  100% { transform: rotate(-2deg) translate(0px, 0px); }
}
.charter-badge {
  position: absolute;
  right: 5%;
  bottom: 14%;
  width: 176px;
  aspect-ratio: 1 / 1;
  background: #06090E;
  border: 1px solid #182230;
  border-radius: 8px;
  overflow: hidden;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 8;
  animation: badge-drift 22s ease-in-out infinite;
  box-shadow: 0 20px 56px rgba(0,0,0,.7), 0 0 0 1px rgba(0,229,160,.08);
  pointer-events: none;
}
/* Sweep horizontal, animation de la charte */
.charter-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(0,229,160,.04) 40%,
    rgba(0,229,160,.09) 52%,
    rgba(0,229,160,.04) 64%,
    transparent 100%
  );
  background-size: 220% 100%;
  animation: hvSweep 9s linear infinite;
}
@keyframes hvSweep {
  0%   { background-position: 220% 0; }
  100% { background-position: -20% 0; }
}
/* Monogramme H */
.charter-badge-h {
  position: relative;
  width: 36px; height: 36px;
  border: 1px solid #00E5A0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Chakra Petch', monospace;
  font-weight: 700;
  font-size: 18px;
  color: #00E5A0;
  flex-shrink: 0;
}
/* Texte principal */
.charter-badge-text {
  position: relative;
  font-family: 'Chakra Petch', monospace;
  font-weight: 700;
  font-size: 20px;
  color: #E6EDF3;
  line-height: 1.12;
}
.charter-badge-text .c-dot  { color: #00E5A0; }
.charter-badge-text .c-line { color: #00E5A0; display: block; }
/* Annotation bas */
.charter-badge-sub {
  position: relative;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 8.5px;
  letter-spacing: .18em;
  color: #5B7186;
  margin-top: 10px;
}

/* ============================================================
   AJOUTS PRODUCTION (accessibilité + menu mobile)
============================================================ */

/* Lien d'évitement clavier */
.skip-link {
  position: absolute;
  left: -9999px; top: 0;
  z-index: 10000;
  background: var(--accent);
  color: var(--bg);
  padding: 10px 16px;
  font-family: var(--font-head);
  font-weight: 600;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* Bouton menu mobile (hamburger), masqué sur desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px; height: 2px;
  margin: 0 auto;
  background: var(--white);
  transition: transform var(--t), opacity var(--t);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu déroulant mobile */
@media (max-width: 960px) {
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(6,9,14,.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    padding: 10px 0;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 13px 32px; }
  .nav-links a::after { display: none; }
}

/* ============================================================
   MOUVEMENT RÉDUIT (accessibilité)
   Toutes les animations et transitions sont neutralisées,
   les éléments animés au chargement restent visibles.
============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .hero-kicker, .hero-desc, .hero-ctas, .hero-certifs, .hero-visual { opacity: 1 !important; }
  .hero h1 .line-in { transform: none !important; }
  [data-rv] { opacity: 1 !important; transform: none !important; }
}