/* Palette: Bleu roi (#1E3A8A / #0EA5E9 accents), Noir (#0B0E11), Blanc (#FFFFFF) */
/* Reset & base */
:root {
  --blue-royal: #1e3a8a;
  --blue-royal-2: #0ea5e9;
  --blue-royal-3: #3b82f6;
  --black: #0b0e11;
  --white: #ffffff;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-700: #374151;
  --shadow: 0 10px 25px rgba(0,0,0,0.1);
  /* Ajout des variables utilisées par le body */
  --ink: #0b0e11;
  --bg: #ffffff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--ink); background: var(--bg);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { width: min(1100px, 92%); margin: 0 auto; }
.section { padding: 80px 0; }
.section.alt { background: #0e1420; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--gray-200); }
.header-inner {
  /* Suppression du display:grid pour respecter le flex défini en HTML */
  align-items: center;
  padding: 14px 0;
}
.brand { display: grid; grid-auto-flow: column; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 0.3px; }
.main-nav ul {
  /* Retrait de l’override en grid pour que Tailwind (flex) s’applique bien */
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav a { padding: 8px 10px; border-radius: 8px; color: var(--gray-700); }
.main-nav a:hover { color: var(--ink); background: rgba(0,0,0,0.04); }
.main-nav .cta { color: #fff; background: linear-gradient(135deg, var(--blue-royal), var(--blue-royal-3)); box-shadow: var(--shadow); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: transparent; border: none; cursor: pointer; }
.nav-toggle span { width: 24px; height: 2px; background: var(--black); display: block; }

/* Hero */
.hero { padding: 110px 0 60px; background: radial-gradient(1200px 600px at 20% 0%, rgba(14,165,233,0.08), transparent 60%), linear-gradient(to bottom, #ffffff, #f7fafc); }
.hero-inner { display: grid; place-items: center; text-align: center; min-height: 65vh; }
.hero-copy { max-width: 760px; }
.hero h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.1; margin: 0 0 16px; color: var(--ink); }
.hero p { color: var(--gray-700); font-size: 18px; }
.hero-actions { display: grid; grid-auto-flow: column; gap: 12px; justify-content: center; }
.icon-circle { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--blue-royal), var(--blue-royal-3)); box-shadow: var(--shadow); }
.hero-services { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.service-card { padding: 18px; background: #ffffff; border: 1px solid var(--gray-200); border-radius: 14px; box-shadow: var(--shadow); }
.service-card h3 { margin: 10px 0 6px; }
.service-card p { margin: 0; color: var(--gray-700); }

/* About */
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 30px; }
.about-aside { display: grid; gap: 20px; }
.about-highlight { padding: 16px; border: 1px dashed rgba(255,255,255,0.2); border-radius: 12px; background: rgba(59,130,246,0.08); }
.about-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.about-stats div { text-align: center; padding: 14px; background: rgba(255,255,255,0.04); border-radius: 12px; }
.about-stats strong { display: block; font-size: 22px; color: var(--blue-royal-3); }
.about-stats span { color: var(--gray-200); }
.check-list { color: var(--gray-200); }

/* Services */
.services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.service-item { padding: 18px; border-radius: 14px; background: #ffffff; border: 1px solid var(--gray-200); box-shadow: var(--shadow); }
.service-item h3 { margin: 0 0 8px; }
.service-item p { color: var(--gray-700); margin: 0; }

/* Portfolio */
.filters { display: grid; grid-auto-flow: column; gap: 10px; margin-bottom: 18px; }
.filter { padding: 8px 12px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); color: var(--white); border-radius: 10px; cursor: pointer; }
.filter.active, .filter:hover { background: linear-gradient(135deg, var(--blue-royal), var(--blue-royal-3)); border-color: transparent; }
.gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.card { border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); }
.card figcaption { padding: 10px; color: var(--gray-700); }
.ph { height: 160px; background: linear-gradient(135deg, rgba(59,130,246,0.3), rgba(14,165,233,0.3)); }
.ph1 { filter: hue-rotate(0deg); } .ph2 { filter: hue-rotate(40deg); } .ph3 { filter: hue-rotate(80deg); }
.ph4 { filter: hue-rotate(120deg); } .ph5 { filter: hue-rotate(160deg); } .ph6 { filter: hue-rotate(200deg); }

/* Form */
.form { display: grid; gap: 16px; }
.form-field { display: grid; gap: 8px; }
.form-field label { color: var(--gray-200); }
input, select, textarea { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); color: var(--white); }
input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.5); }
.file-field input { padding: 8px; }
.form-actions { display: grid; grid-auto-flow: column; gap: 10px; align-items: center; }
.form-note { color: var(--gray-200); font-size: 13px; }

/* Contact */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--gray-200); }
.socials .social { display: inline-block; text-align: center; line-height: 28px; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--gray-200); background: #ffffff; margin-left: 8px; }
.socials .social:hover { background: linear-gradient(135deg, var(--blue-royal), var(--blue-royal-3)); }
.map-wrap { border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); }
.map-wrap iframe { width: 100%; height: 280px; display: block; }
.contact-actions { margin-top: 14px; display: grid; grid-auto-flow: column; gap: 10px; }

/* Footer */
.site-footer { border-top: 1px solid var(--gray-200); background: #f9fafb; }
.footer-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 18px 0; }
.footer-inner p { color: var(--gray-700); }
.footer-inner nav a { color: var(--gray-700); margin-right: 12px; }
.footer-inner nav a:hover { color: var(--ink); }

/* Buttons */
.btn { display: inline-block; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--gray-200); background: #ffffff; color: var(--ink); cursor: pointer; }
.btn:hover { box-shadow: var(--shadow); }
.btn-primary { background: linear-gradient(135deg, var(--blue-royal), var(--blue-royal-3)); border-color: transparent; box-shadow: var(--shadow); color: #fff; }
.btn-primary:hover { filter: brightness(1.05); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--gray-200); }

/* Back to top */
.back-to-top { position: fixed; right: 16px; bottom: 16px; padding: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--blue-royal), var(--blue-royal-3)); color: var(--white); border: none; display: none; box-shadow: var(--shadow); }
.back-to-top.show { display: inline-block; }

/* Responsive */
@media (max-width: 900px) {
  .hero-inner, .grid-2 { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: repeat(2,1fr); }
  .gallery { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
  .main-nav { position: fixed; inset: 60px 0 auto; background: rgba(255,255,255,0.98); padding: 10px 4%; transform: translateY(-150%); transition: transform .3s ease; }
  .main-nav.open { transform: translateY(0); }
  /* Empilement vertical du menu en mobile */
  .main-nav ul { display: flex; flex-direction: column; gap: 8px; }
  .nav-toggle { display: flex; }
  .services-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
}
.quick-services { padding: 24px 0 32px; background: #ffffff; border-top: 1px solid var(--gray-200); }
.quick-services .service-card { background: #ffffff; border: 1px solid var(--gray-200); }
.quick-services .service-card p { color: var(--gray-700); }
@media (max-width: 640px) {
  /* Footer en une colonne sur mobile */
  .footer-inner { grid-template-columns: 1fr; row-gap: 8px; }
}
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.snow { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.flake { position: absolute; top: -2rem; left: var(--left); width: var(--size); height: var(--size); opacity: var(--opacity); animation: fall var(--duration) linear var(--delay) infinite; background: radial-gradient(circle at 50% 50%, rgba(147,197,253,0.25), rgba(147,197,253,0) 60%); border-radius: 9999px; }
.flake svg { width: 100%; height: 100%; color: var(--color, #93c5fd); stroke: currentColor; stroke-width: 1.8; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35)); mix-blend-mode: multiply; }
@keyframes fall { to { transform: translateY(110vh) rotate(360deg); } }