/* ============================================================
   DIGITAL DRIVER — Site vitrine
   Palette : bleu nuit (#0b2545) + orange (#ff6b35)
   ============================================================ */

:root {
  --navy: #0b2545;
  --navy-2: #13315c;
  --navy-3: #1b3a6b;
  --blue-soft: #e8eef6;
  --orange: #ff6b35;
  --orange-dark: #e8551c;
  --ink: #1d2733;
  --muted: #5b6b7d;
  --line: #e2e8f1;
  --white: #ffffff;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 18px 40px -18px rgba(11, 37, 69, .35);
  --shadow-lg: 0 30px 60px -20px rgba(11, 37, 69, .45);
  --maxw: 1140px;
  --font-head: "Poppins", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

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

.accent { color: var(--orange); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 13px 26px; border-radius: 999px;
  font-family: var(--font-head); font-weight: 600; font-size: .95rem;
  cursor: pointer; border: 2px solid transparent; transition: transform .2s, box-shadow .2s, background .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--orange); color: #fff; box-shadow: 0 12px 24px -10px rgba(255, 107, 53, .7); }
.btn-primary:hover { background: var(--orange-dark); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 37, 69, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }

.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 38px; height: auto; display: block;
  border-radius: 8px;
}
.brand-mark--footer { background: rgba(255,255,255,.08); padding: 6px; border-radius: 8px; }
.brand-text { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: #fff; }
.brand-text .accent { color: var(--orange); }

.main-nav { display: flex; gap: 26px; }
.main-nav a {
  color: rgba(255,255,255,.82); font-weight: 500; font-size: .94rem; position: relative; padding: 4px 0;
}
.main-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--orange); transition: width .25s;
}
.main-nav a:hover { color: #fff; }
.main-nav a:hover::after { width: 100%; }

.nav-cta { padding: 9px 20px; font-size: .88rem; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: .3s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--navy); color: #fff; overflow: hidden; padding: 70px 0 130px; }
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(700px 500px at 85% -10%, rgba(255,107,53,.28), transparent 60%),
    radial-gradient(600px 400px at 0% 100%, rgba(27,58,107,.7), transparent 60%),
    linear-gradient(135deg, #0b2545, #0a1d38);
}

/* canvas-ui "Ripple" effect layer (adapted from DavidHDev/canvas-ui) */
.hero-ripple {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; display: block;
}

/* canvas-ui "Bubble" — bottom of page (full-bleed footer backdrop) */
.site-footer { position: relative; overflow: hidden; }
.bubble-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%; z-index: 0;
  display: block; pointer-events: none;
  mix-blend-mode: screen;
}
.site-footer .container, .site-footer .footer-bottom { position: relative; z-index: 1; }

/* Fallback when WebGL2 is unavailable: CSS drifting bubbles */
.site-footer.bubble-fallback::after {
  content: ""; position: absolute; inset: -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 12% 80%, rgba(255,255,255,.10) 0 8%, rgba(255,255,255,.04) 9%, transparent 11%),
    radial-gradient(circle at 32% 30%, rgba(255,107,53,.16) 0 6%, rgba(255,107,53,.05) 7%, transparent 9%),
    radial-gradient(circle at 68% 65%, rgba(160,200,255,.12) 0 5%, rgba(160,200,255,.04) 6%, transparent 8%),
    radial-gradient(circle at 88% 22%, rgba(255,255,255,.09) 0 4%, transparent 6%);
  filter: blur(1px);
  animation: dd-bubble-drift 26s ease-in-out infinite alternate;
}
@keyframes dd-bubble-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -42px, 0) scale(1.08); }
}

/* canvas-ui "ParticleScroll" — references background */
#magnifyCanvas, #magnifyRefsCanvas, #particleCanvas,
#particleEventCanvas, #particleGalleryCanvas { pointer-events: none; }
#realisations, #evenementiel, #galerie { position: relative; overflow: hidden; }
.particle-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; display: block;
}
#realisations .container,
#evenementiel .container,
#galerie .container { position: relative; z-index: 1; }

/* canvas-ui "Magnify" — services overlay + CSS fallback */
#services { position: relative; overflow: hidden; }
.force-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; display: block; pointer-events: none;
}
#services .container { position: relative; z-index: 1; }
.magnify-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 5; display: block; pointer-events: none;
}
/* Fallback: gentle magnify-on-hover for each service card (everywhere) */
#services.magnify-fallback .service-card { transition: transform .3s, box-shadow .3s; }
#services.magnify-fallback .service-card:hover { transform: translateY(-6px) scale(1.04); box-shadow: var(--shadow-lg); }
#services.magnify-fallback .service-card:hover .service-ico { transform: scale(1.12); }

/* canvas-ui "Magnify" — loupe DOM sur "Références & réalisations" */
.mag-lens {
  position: absolute; left: 0; top: 0; z-index: 6;
  border-radius: 50%; pointer-events: none; opacity: 0;
  transform: translate3d(-9999px, -9999px, 0);
  background-color: #0b2545; background-repeat: no-repeat;
  border: 2px solid rgba(255, 107, 53, .92);
  box-shadow:
    0 0 0 7px rgba(255, 107, 53, .16),
    0 0 0 8px rgba(255, 255, 255, .10),
    0 18px 44px rgba(0, 0, 0, .38),
    inset 0 0 26px rgba(0, 0, 0, .45);
  transition: opacity .18s ease, border-color .2s ease;
  will-change: transform;
}
.mag-lens.is-on { opacity: 1; }
.mag-lens.is-pressed { border-color: #fff; }
/* reflet de verre */
.mag-lens::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .26), transparent 46%),
    radial-gradient(circle at 72% 82%, rgba(255, 255, 255, .10), transparent 42%);
  pointer-events: none;
}
/* réticule / HUD inspiré du shader Magnify */
.mag-lens::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 38px; height: 38px; transform: translate(-50%, -50%);
  background:
    linear-gradient(rgba(255, 107, 53, .95), rgba(255, 107, 53, .95)) center / 100% 1px no-repeat,
    linear-gradient(rgba(255, 107, 53, .95), rgba(255, 107, 53, .95)) center / 1px 100% no-repeat,
    radial-gradient(circle, rgba(255, 107, 53, .9) 0 1.5px, transparent 2px) center / 100% 100% no-repeat;
  opacity: .85; pointer-events: none;
}
/* pendant la loupe, on neutralise le zoom au survol des vignettes */
#realisations.mag-lens-on .ref-card:hover img { transform: none; }
/* géométrie figée pendant la loupe : sinon la mesure de l'image bouge */
#realisations.mag-lens-on .ref-card img { transition: none; }
#realisations.mag-lens-on .ref-card img,
#realisations.mag-lens-on .ref-wide img { cursor: zoom-in; }
/* dernier repli (mouvement réduit) : simple mise en avant au survol */
#realisations.magnify-static .ref-card,
#realisations.magnify-static .ref-wide { transition: transform .3s, box-shadow .3s; }
#realisations.magnify-static .ref-card:hover,
#realisations.magnify-static .ref-wide:hover { transform: scale(1.03); box-shadow: var(--shadow-lg); }

.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.eyebrow {
  display: inline-block; font-size: .8rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--orange); font-weight: 600; margin-bottom: 18px;
}
.hero h1 { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.1; margin-bottom: 20px; }
.lead { font-size: 1.08rem; color: rgba(255,255,255,.86); max-width: 540px; margin-bottom: 30px; }
.lead strong { color: #fff; }

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 42px; }

.hero-stats { list-style: none; display: flex; gap: 34px; flex-wrap: wrap; }
.hero-stats li { display: flex; flex-direction: column; }
.hero-stats strong { font-family: var(--font-head); font-size: 1.7rem; color: #fff; }
.hero-stats span { font-size: .82rem; color: rgba(255,255,255,.7); }

.hero-card {
  position: relative; justify-self: end; width: 100%; max-width: 380px;
  border-radius: 22px; padding: 34px;
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: var(--shadow-lg); overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}
.hero-card.glass-object {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(18px) saturate(1.35) contrast(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.35) contrast(1.08);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow:
    0 20px 60px -12px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.12) inset,
    inset 0 1px 0 rgba(255,255,255,0.22);
}
.hero-card.glass-object::before {
  content: ""; position: absolute; inset: 0; border-radius: 22px; pointer-events: none; z-index: 1;
  background:
    linear-gradient(105deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 18%, transparent 32%),
    radial-gradient(420px 280px at 85% 15%, rgba(255,107,53,0.10), transparent 60%);
  opacity: 0.9;
}
.hero-card.glass-object::after {
  content: ""; position: absolute; inset: -1px; border-radius: 22px; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, transparent 40%, rgba(80,160,255,0.08) 48%, rgba(255,107,53,0.08) 52%, transparent 60%);
  opacity: 0; transition: opacity 0.35s;
}
.hero-card.glass-object:hover::after { opacity: 1; }
.hero-card-glow {
  position: absolute; width: 220px; height: 220px; right: -60px; top: -60px;
  background: radial-gradient(circle, rgba(255,107,53,.55), transparent 70%);
}
.hero-card.glass-object .hero-card-glow {
  background: radial-gradient(circle, rgba(255,107,53,0.42), transparent 68%);
  filter: blur(2px);
}
.hero-card-inner { position: relative; z-index: 3; transform: translateZ(18px); }
.hero-card.glass-object .dd-logo { transform: translateZ(24px); }
.hero-card.glass-object .hero-card-chips span { backdrop-filter: blur(4px); }
.glass-object-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 22px;
  pointer-events: none; z-index: 0; display: block;
  opacity: 0.55; mix-blend-mode: screen;
}
.hero { perspective: 1200px; }
.dd-logo {
  width: 96px; height: auto; display: block;
  border-radius: 18px; padding: 8px;
  background: rgba(255,255,255,.95);
  margin-bottom: 18px; box-shadow: 0 12px 26px -8px rgba(255,107,53,.8);
}
.hero-card-name { font-family: var(--font-head); font-weight: 700; letter-spacing: 2px; font-size: 1.15rem; }
.hero-card-sub { color: rgba(255,255,255,.7); font-size: .9rem; margin-bottom: 20px; }
.hero-card-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-card-chips span {
  font-size: .74rem; padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.14);
}

.hero-wave {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 84px;
  background: var(--white);
  /* Tracé manuel stable : une seule courbe souple côté droit, pas de zigzag */
  clip-path: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 84' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0,46 C320,49 620,44 840,40 C1020,36 1180,29 1440,26 L1440,84 L0,84 Z'/%3E%3C/svg%3E") no-repeat center bottom / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 84' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0,46 C320,49 620,44 840,40 C1020,36 1180,29 1440,26 L1440,84 L0,84 Z'/%3E%3C/svg%3E") no-repeat center bottom / 100% 100%;
}

/* ---------- Sections ---------- */
.section { padding: 86px 0; }
.section-alt { background: var(--blue-soft); }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 52px; }
.kicker {
  display: inline-block; font-size: .78rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--orange-dark); font-weight: 700; margin-bottom: 12px;
}

/* canvas-ui "Decrypt Reveal" homage */
[data-decrypt] { transition: opacity .3s ease; }
.is-decrypting {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .03em;
  color: var(--orange);
}
.section-head h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.5rem); color: var(--navy); line-height: 1.2; }
.section-sub { color: var(--muted); margin-top: 14px; font-size: 1.02rem; }

/* ---------- Magnify (Canvas UI) — section #apropos (remplace Glass) ---------- */
#apropos { position: relative; overflow: hidden; }
#apropos .container { position: relative; z-index: 1; }
#apropos .magnify-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 2; display: block; pointer-events: none;
}
/* Loupe Magnify viseur sniper — fidèle au modèle canvasui.dev/magnify */
#apropos .mag-lens {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: rgba(255,107,53,.95) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.60) inset,
    0 0 0 7px rgba(255,107,53,.12),
    0 14px 36px rgba(11,37,69,.16) !important;
}
#apropos .mag-lens .magnify-clone-wrap {
  background: transparent !important;
  opacity: 1;
}
#apropos .mag-lens .magnify-clone {
  background: transparent !important;
  opacity: 1;
  filter: contrast(1.08);
}
#apropos .mag-lens .magnify-clone .container {
  background: transparent !important;
}
#apropos .mag-lens .magnify-clone .about-card {
  background: var(--navy);
  opacity: 1;
}
/* Aberration chromatique + haze sniper (comme shader Magnify) */
#apropos .mag-lens .magnify-clone * {
  text-shadow:
    -0.7px 0 rgba(80,160,255,0.45),
     0.7px 0 rgba(255,107,53,0.42);
}
#apropos .mag-lens .magnify-haze {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(circle at 50% 50%, transparent 62%, rgba(255,107,53,0.06) 82%, rgba(255,107,53,0.10) 100%);
  opacity: 0.55;
}
#apropos .mag-lens .magnify-ripple {
  position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%; pointer-events: none; z-index: 2;
  border: 1.5px solid rgba(255,107,53,0.9);
  opacity: 0; transform: scale(0.2);
  animation: magnify-ripple 1.1s ease-out forwards;
}
@keyframes magnify-ripple {
  0% { opacity: 0.85; transform: scale(0.2); }
  100% { opacity: 0; transform: scale(8); }
}
#apropos.magnify-fallback { /* fallback actif si WebGL indisponible */ }
#apropos.magnify-static .mag-lens { display: none; }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 1.5fr .9fr; gap: 44px; align-items: start; }
.about-text p { margin-bottom: 16px; color: #36475a; font-size: 1.04rem; }
.about-card {
  background: var(--navy); color: #fff; border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow);
}
.about-card h3 { font-family: var(--font-head); font-size: 1.1rem; margin-bottom: 18px; color: var(--orange); }
.meta-list { display: grid; gap: 16px; }
.meta-list > div { display: flex; flex-direction: column; border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 14px; }
.meta-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.meta-list dt { font-size: .76rem; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.6); }
.meta-list dd { font-size: 1rem; font-weight: 500; }

.check-list { list-style: none; display: grid; gap: 12px; margin-top: 22px; }
.check-list li { position: relative; padding-left: 30px; color: #36475a; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 18px; height: 18px;
  background: var(--orange); border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px; background-repeat: no-repeat; background-position: center;
}

/* ---------- Services ---------- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.service-card {
  background: #fff; border-radius: var(--radius); padding: 32px 28px;
  border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(255,107,53,.4); }
.service-ico {
  width: 56px; height: 56px; border-radius: 14px; margin-bottom: 20px;
  background: var(--navy); display: grid; place-items: center;
  background-image: var(--ico); background-size: 26px; background-repeat: no-repeat; background-position: center;
}
.service-card h3 { font-family: var(--font-head); font-size: 1.22rem; color: var(--navy); margin-bottom: 10px; }
.service-card p { color: var(--muted); font-size: .98rem; }

/* ---------- Why ---------- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.why-item {
  background: #fff; border-radius: var(--radius); padding: 30px; border: 1px solid var(--line);
  position: relative; overflow: hidden; transition: transform .25s;
}
.why-item:hover { transform: translateY(-5px); }
.why-num { font-family: var(--font-head); font-size: 2.4rem; font-weight: 800; color: var(--blue-soft); position: absolute; top: 12px; right: 18px; }
.why-item h3 { font-family: var(--font-head); font-size: 1.12rem; color: var(--navy); margin-bottom: 8px; position: relative; }
.why-item p { color: var(--muted); font-size: .95rem; }

/* ---------- Split (formations) ---------- */
.section-split { background: var(--navy); color: #fff; }
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split-media { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.split-media img { width: 100%; height: 440px; object-fit: cover; }
.split-badge {
  position: absolute; left: 18px; top: 18px; background: var(--orange); color: #fff;
  font-family: var(--font-head); font-weight: 600; font-size: .8rem; padding: 8px 16px; border-radius: 999px;
}
.split-text .kicker { color: var(--orange); }
.split-text h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 14px; }
.split-text .section-sub { color: rgba(255,255,255,.78); }
.training-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 26px 0 10px; }
.split-text .check-list li { color: rgba(255,255,255,.9); }
.split-text .check-list li::before { background-color: var(--orange); }
.training-note { color: rgba(255,255,255,.72); font-size: .95rem; margin-top: 8px; }

/* canvas-ui "Liquid" — section Formations (fluide réactif au pointeur) */
#formations { position: relative; overflow: hidden; }
.liquid-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; display: block; pointer-events: none;
  mix-blend-mode: screen; opacity: .6;
}
#formations .container { position: relative; z-index: 0; }

/* Fallback : pas de WebGL2 / pas de cibles flottantes */
#formations.liquid-fallback::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(420px 320px at 22% 38%, rgba(255,107,53,.20), transparent 62%),
    radial-gradient(360px 280px at 74% 66%, rgba(255,107,53,.14), transparent 64%);
  animation: dd-liquid-drift 18s ease-in-out infinite alternate;
}
@keyframes dd-liquid-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.12); }
}

/* ---------- Événementiel ---------- */
.equip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 44px; }
.equip-card { margin: 0; background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .25s; }
.equip-card:hover { transform: translateY(-5px); }
.equip-card img { height: 180px; width: 100%; object-fit: contain; background: #f4f7fc; padding: 14px; }
.equip-card figcaption { text-align: center; font-family: var(--font-head); font-weight: 600; color: var(--navy); padding: 12px; }

.production-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.prod-card { background: #fff; border-radius: var(--radius); padding: 30px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.prod-card h3 { font-family: var(--font-head); color: var(--navy); margin: 16px 0 14px; font-size: 1.2rem; }
.prod-card ul { list-style: none; display: grid; gap: 10px; }
.prod-card li { position: relative; padding-left: 22px; color: var(--muted); }
.prod-card li::before { content: "▸"; position: absolute; left: 0; color: var(--orange); }
.prod-ico { width: 50px; height: 50px; border-radius: 12px; background: var(--navy); background-image: var(--ico); background-size: 24px; background-repeat: no-repeat; background-position: center; }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.gallery-item { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); position: relative; }
.gallery-item img { height: 200px; width: 100%; object-fit: cover; transition: transform .4s; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; color: #fff; font-size: .9rem; font-weight: 500;
  background: linear-gradient(transparent, rgba(11,37,69,.85));
}

/* ---------- Réalisations ---------- */
.ref-clients {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 42px;
}
.ref-clients span {
  font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: .95rem;
  padding: 10px 22px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow);
}
.ref-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 18px; }
.ref-card { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.ref-card img { height: 200px; width: 100%; object-fit: cover; transition: transform .4s; }
.ref-card:hover img { transform: scale(1.06); }
.ref-wide { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.ref-wide img { width: 100%; height: 260px; object-fit: cover; }

/* ---------- Tarifs — Parallax scrolling (renforcé GSAP + CSS) ---------- */
#tarifs { position: relative; overflow: hidden; background: var(--white); }
.tarifs-parallax-bg {
  position: absolute; inset: -22% 0 -22% 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(680px 440px at 18% 22%, rgba(255,107,53,.10), transparent 62%),
    radial-gradient(720px 460px at 82% 78%, rgba(11,37,69,.08), transparent 64%),
    radial-gradient(520px 320px at 50% 50%, rgba(11,37,69,.04), transparent 68%),
    linear-gradient(180deg, rgba(232,238,246,.60), rgba(255,255,255,0));
  will-change: transform;
}
#tarifs .container { position: relative; z-index: 1; }
#tarifs [data-parallax] { will-change: transform; }
.tarif-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--navy), var(--navy-3)); color: #fff;
  border-radius: var(--radius); padding: 40px; box-shadow: var(--shadow-lg);
}
.tarif-banner h3 { font-family: var(--font-head); font-size: 1.5rem; margin-bottom: 8px; }
.tarif-banner p { color: rgba(255,255,255,.82); max-width: 560px; }
/* Entrée par les côtés — bannière "Un devis personnalisé" */
.tarif-banner.reveal > div,
.tarif-banner.reveal > a {
  opacity: 0;
  will-change: transform, opacity;
  transition: transform .75s cubic-bezier(.22,1,.36,1), opacity .55s ease;
}
.tarif-banner.reveal > div { transform: translate3d(-64px,0,0); }
.tarif-banner.reveal > a   { transform: translate3d(64px,0,0); transition-delay: .12s; }
.tarif-banner.reveal.in > div,
.tarif-banner.reveal.in > a { transform: translate3d(0,0,0); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .tarif-banner.reveal > div,
  .tarif-banner.reveal > a { transform: none !important; opacity: 1 !important; transition: none !important; }
}

/* ---------- Contact ---------- */
.section-contact { background: var(--navy); color: #fff; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: start; }
.contact-info .kicker { color: var(--orange); }
.contact-info h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 12px; }
.contact-info .section-sub { color: rgba(255,255,255,.78); }
.contact-list { list-style: none; display: grid; gap: 22px; margin-top: 30px; }
.contact-list li { display: flex; gap: 16px; align-items: flex-start; }
.contact-list a { display: block; color: rgba(255,255,255,.9); }
.contact-list a:hover { color: var(--orange); }
.contact-list strong { display: block; font-family: var(--font-head); font-size: .92rem; color: #fff; margin-bottom: 2px; }
.c-ico { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 11px; background: rgba(255,255,255,.08); background-image: var(--ico); background-size: 20px; background-repeat: no-repeat; background-position: center; }

.contact-form {
  background: #fff; color: var(--ink); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow-lg);
}
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .85rem; font-weight: 600; color: var(--navy); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: .96rem; color: var(--ink); background: #fafcff; transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,107,53,.15);
}
.field textarea { resize: vertical; }
.form-note { margin-top: 14px; font-size: .92rem; font-weight: 500; min-height: 20px; }
.form-note.ok { color: #1a8a4a; }
.form-note.err { color: var(--orange-dark); }

/* ---------- Footer ---------- */
.site-footer { background: #071a33; color: rgba(255,255,255,.78); padding: 56px 0 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 40px; }
.footer-brand { display: flex; flex-direction: column; gap: 10px; }
.footer-brand .brand-text { color: #fff; }
.footer-brand p { font-size: .92rem; color: rgba(255,255,255,.6); max-width: 320px; margin-top: 6px; }
.footer-col h4 { color: #fff; font-family: var(--font-head); font-size: 1rem; margin-bottom: 14px; }
.footer-col a, .footer-col span { display: block; font-size: .9rem; color: rgba(255,255,255,.65); margin-bottom: 9px; }
.footer-col a:hover { color: var(--orange); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 18px 0; }
.footer-bottom .container { display: flex; justify-content: center; align-items: center; text-align: center; gap: 10px; font-size: .85rem; color: rgba(255,255,255,.55); }

/* ---------- Icon data-uri ---------- */
[data-ico="graph"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6b35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E"); }
[data-ico="print"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6b35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 6 2 18 2 18 9'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E"); }
[data-ico="code"]  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6b35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E"); }
[data-ico="edu"]   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6b35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10L12 5 2 10l10 5 10-5z'/%3E%3Cpath d='M6 12v5c0 1 3 3 6 3s6-2 6-3v-5'/%3E%3C/svg%3E"); }
[data-ico="film"]  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6b35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='2.5'/%3E%3Cpath d='M2 8h20M2 16h20M8 2v20M16 2v20'/%3E%3C/svg%3E"); }
[data-ico="event"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6b35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V7l7-4 7 4v14'/%3E%3Cpath d='M9 9h.01M15 9h.01M9 13h.01M15 13h.01M9 17h.01M15 17h.01'/%3E%3C/svg%3E"); }
[data-ico="mail"]  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6b35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M22 6l-10 7L2 6'/%3E%3C/svg%3E"); }
[data-ico="phone"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6b35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
[data-ico="pin"]   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6b35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
[data-ico="social"]{ --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6b35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z'/%3E%3C/svg%3E"); }

/* ---------- Numérotation visuelle des images (repérage) ---------- */
.img-num-wrap { position: relative; }
.img-num {
  position: absolute; left: 10px; top: 10px; z-index: 4;
  min-width: 28px; height: 28px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--orange); color: #fff;
  font-family: var(--font-head); font-weight: 800; font-size: 0.82rem;
  border-radius: 999px; line-height: 1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.22), 0 0 0 2px rgba(255,255,255,0.92);
  pointer-events: none; user-select: none;
}
.img-num--logo { left: 6px; top: 6px; min-width: 24px; height: 24px; font-size: 0.74rem; }
.img-num--hero { background: var(--navy); box-shadow: 0 4px 12px rgba(0,0,0,0.28), 0 0 0 2px rgba(255,255,255,0.9); }
.num-legend {
  position: fixed; right: 14px; bottom: 14px; z-index: 60;
  background: rgba(11,37,69,0.92); color: #fff; backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 12px;
  padding: 10px 12px; font-size: 0.72rem; line-height: 1.4;
  box-shadow: 0 12px 28px rgba(0,0,0,0.22); max-width: 220px;
}
.num-legend strong { display: block; font-family: var(--font-head); font-size: 0.78rem; margin-bottom: 4px; color: var(--orange); }
.num-legend ol { margin: 0; padding-left: 16px; }
.num-legend li { margin: 1px 0; }
.num-legend button { margin-top: 6px; width: 100%; padding: 6px; border-radius: 8px; border: 0; background: var(--orange); color: #fff; font-weight: 600; font-size: 0.72rem; cursor: pointer; }
@media print { .img-num, .num-legend { display: none !important; } }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-card { justify-self: start; max-width: 420px; }
  .about-grid { grid-template-columns: 1fr; }
  .services-grid, .why-grid { grid-template-columns: repeat(2, 1fr); }
  .ref-grid, .gallery, .equip-grid, .production-grid { grid-template-columns: repeat(2, 1fr); }
  .split-grid, .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .main-nav {
    position: fixed; inset: 72px 0 auto 0; flex-direction: column; gap: 0;
    background: var(--navy); padding: 10px 24px 22px; transform: translateY(-130%);
    transition: transform .3s ease; box-shadow: var(--shadow-lg);
  }
  .main-nav.open { transform: translateY(0); }
  .main-nav a { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav-toggle { display: flex; }
  .nav-cta { display: none; }
  .services-grid, .why-grid, .ref-grid, .gallery, .equip-grid, .production-grid, .training-cols { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
  .tarif-banner { padding: 28px; }
  .footer-bottom .container { flex-direction: column; gap: 8px; text-align: center; }
}