:root{
  --noir:#000000;
  --nuit:#0A1118;
  --carte:#101A23;
  --ligne:#1C2A36;
  --vert:#8BD61E;
  --vert-clair:#B4F04F;
  --cyan:#19B6F0;
  --blanc:#FFFFFF;
  --texte:#E8EEF3;
  --doux:#B4C2CD;
  --gris:#9FB3C2;
  --titre:"Montserrat","Segoe UI",system-ui,sans-serif;
  --corps:"Manrope","Segoe UI",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:124px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--noir);color:var(--texte);font-family:var(--corps);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--vert)}
a:hover{color:var(--vert-clair)}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:6px}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
@media (max-width:640px){.wrap{padding:0 20px}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* En-tête */
.site-header{position:sticky;top:0;z-index:10;background:rgba(0,0,0,.92);backdrop-filter:blur(8px);border-bottom:1px solid #16212B}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;padding-top:14px;padding-bottom:14px}
.logo img{height:88px;width:auto}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;font-family:var(--titre);font-size:.875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.nav a{color:var(--texte);text-decoration:none;padding:10px 0}
.nav a:hover,.nav a[aria-current="page"]{color:var(--vert)}
@media (max-width:760px){
  .logo img{height:58px}
  .site-header .wrap{flex-wrap:nowrap}
  .nav{gap:4px 18px;font-size:.78rem;flex-wrap:nowrap}
  .nav .lien-secondaire{display:none}
  .nav:has(.btn) a:not(.btn){display:none}
  .nav .btn{padding:0 16px;white-space:nowrap}
}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 30px;border-radius:999px;font-family:var(--titre);font-weight:700;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;transition:background-color .15s ease}
.btn-vert{background:var(--vert);color:#071006}
.btn-vert:hover{background:var(--vert-clair);color:#071006}
.btn-contour{border:1.5px solid var(--cyan);color:var(--blanc);text-transform:none;letter-spacing:0}
.btn-contour:hover{background:rgba(25,182,240,.12);color:var(--blanc)}
.nav .btn{min-height:44px;padding:0 20px;color:#071006}

/* Hero */
.hero .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:56px;padding-top:80px;padding-bottom:96px}
.hero-texte{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:26px}
.valeurs{display:flex;align-items:center;gap:14px;margin:0;font-family:var(--titre);font-size:.82rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--gris)}
.valeurs::before{content:"";width:40px;height:2px;background:var(--cyan);flex:0 0 auto}
.slogan-hero{align-items:flex-start;line-height:1.45;text-transform:none;letter-spacing:.02em;font-size:1.05rem;font-weight:600;color:#C9D6E0}
.slogan-hero::before{margin-top:.72em}
@media (max-width:640px){.slogan-hero{font-size:.95rem;gap:12px}.slogan-hero::before{width:28px}}
h1,h2,h3{font-family:var(--titre);color:var(--blanc);margin:0}
.hero h1{font-weight:800;font-size:clamp(2.3rem,5vw,4rem);line-height:1.05;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--vert)}
.hero p.intro{margin:0;font-size:1.18rem;color:#C3CFD8;max-width:560px}
.actions{display:flex;flex-wrap:wrap;gap:14px;padding-top:6px}
.hero-photo{flex:1 1 300px;min-width:0;max-width:400px;margin:0 auto;position:relative}
.hero-photo::before{content:"";position:absolute;inset:-14px 14px 14px -14px;border:2px solid var(--cyan);border-radius:28px}
.hero-photo video{position:relative;display:block;width:100%;height:auto;aspect-ratio:3/5;object-fit:cover;border-radius:24px;background:#0A1118}
@media (max-width:640px){.hero .wrap{padding-top:48px;padding-bottom:64px;gap:44px}.hero-photo{max-width:320px}}

/* Sections */
.section{padding:96px 0}
.section.nuit{background:var(--nuit)}
@media (max-width:640px){.section{padding:64px 0}}
.surtitre{margin:0 0 14px;font-family:var(--titre);font-size:.82rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--vert)}
.surtitre.cyan{color:var(--cyan)}
.section h2{font-weight:800;font-size:clamp(1.85rem,3.4vw,2.75rem);line-height:1.12;max-width:720px}

/* Prestations */
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:48px;padding:0;list-style:none}
.carte{background:var(--carte);border:1px solid var(--ligne);border-radius:20px;padding:32px;display:flex;flex-direction:column;gap:16px}
.icone{width:56px;height:56px;border-radius:50%;border:2px solid var(--vert);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.icone svg{width:26px;height:26px;stroke:var(--blanc);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.carte h3{font-weight:700;font-size:1.22rem;line-height:1.3}
.carte p{margin:0;color:var(--doux)}

/* Approche */
.approche{display:flex;flex-wrap:wrap;gap:56px;align-items:flex-start}
.approche-texte{flex:1 1 380px;min-width:0}
.approche-texte p{margin:18px 0 0;font-size:1.08rem;color:var(--doux);max-width:560px}
.piliers{flex:1.2 1 440px;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px;margin:0;padding:0;list-style:none}
.piliers li{border-top:3px solid var(--vert);padding-top:22px}
.piliers li:nth-child(2){border-color:var(--cyan)}
.piliers li:nth-child(3){border-color:var(--blanc)}
.piliers strong{display:block;font-family:var(--titre);font-weight:800;font-size:1.12rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blanc);margin-bottom:8px}
.piliers span{color:var(--doux)}

/* Bandeau devis */
.bandeau{border-radius:28px;border:1px solid var(--ligne);background:var(--carte);padding:56px 48px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.bandeau div{flex:999 1 420px;min-width:0}
.bandeau h2{font-size:clamp(1.6rem,3vw,2.4rem)}
.bandeau h2 em{font-style:normal;color:var(--vert)}
.bandeau p{margin:10px 0 0;color:var(--doux);font-size:1.05rem}
@media (max-width:640px){.bandeau{padding:36px 24px}}

/* Contact */
.page-titre .wrap{padding-top:72px;padding-bottom:32px}
.page-titre h1{font-weight:800;font-size:clamp(2.2rem,4.4vw,3.5rem);line-height:1.08;margin-top:16px}
.page-titre p{margin:16px 0 0;font-size:1.12rem;color:#C3CFD8;max-width:680px}
.contact .wrap{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start;padding-top:16px;padding-bottom:96px}
.formulaire{flex:999 1 560px;min-width:0;background:#0E161E;border:1px solid var(--ligne);border-radius:24px;padding:40px;display:flex;flex-direction:column;gap:22px}
@media (max-width:640px){.formulaire{padding:26px 20px}}
.champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.champ{display:flex;flex-direction:column;gap:8px}
.champ label{font-size:.92rem;font-weight:600;color:#DCE5EC}
.champ input,.champ select,.champ textarea{width:100%;min-height:50px;padding:12px 16px;border-radius:12px;border:1px solid #2A3A48;background:#070C11;color:var(--blanc);font:inherit;font-size:1rem}
.champ textarea{resize:vertical;min-height:150px}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(25,182,240,.25)}
.formulaire .note{margin:0;font-size:.88rem;color:var(--gris)}
.formulaire .btn{align-self:flex-start}
.coordonnees{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:16px}
.coord{display:flex;align-items:center;gap:18px;padding:24px;border-radius:20px;background:#0E161E;border:1px solid var(--ligne);text-decoration:none;color:var(--texte)}
a.coord:hover{border-color:var(--vert);color:var(--texte)}
.coord .icone.cyan{border-color:var(--cyan)}
.coord .icone.blanc{border-color:var(--blanc)}
.coord strong{display:block;font-family:var(--titre);font-weight:700;font-size:1rem;color:var(--blanc);overflow-wrap:anywhere}
.coord strong.grand{font-size:1.4rem;font-weight:800}
.coord span{color:var(--gris);font-size:.95rem}

/* Pied de page */
.site-footer{border-top:1px solid #16212B}
.site-footer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-top:44px;padding-bottom:44px}
.marque{font-family:var(--titre);font-weight:700;font-size:.95rem;letter-spacing:.34em;text-transform:uppercase;color:var(--blanc)}
.slogan{margin:6px 0 0;color:var(--gris);font-size:.95rem}
.site-footer ul{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0;padding:0;list-style:none;font-size:.95rem}
.site-footer ul a{color:var(--texte);text-decoration:none}
.site-footer ul a:hover{color:var(--vert)}
.site-footer li.lieu{color:var(--gris)}