:root {
  --navy: #071a33; --navy-2: #0b2344; --blue: #1769ff; --blue-dark: #0752d6;
  --green: #37c978; --ink: #10213a; --muted: #607089; --surface: #f5f8fc;
  --white: #fff; --line: #dce5ef; --radius: 22px; --shadow: 0 18px 55px rgba(18, 47, 86, .1);
  --container: 1180px; --header: 80px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header); }
body { margin: 0; font-family: "Inter", system-ui, sans-serif; color: var(--ink); background: var(--white); line-height: 1.65; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.section { padding: 110px 0; }
.skip-link { position: fixed; z-index: 999; top: 8px; left: 8px; padding: 10px 16px; background: var(--navy); color: #fff; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.site-header { height: var(--header); position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92); border-bottom: 1px solid rgba(220,229,239,.8); backdrop-filter: blur(14px); }
.nav-wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; }
.brand-logo { display: block; width: auto; height: 66px; object-fit: contain; }
.site-footer .brand-logo { height: 74px; }
.main-nav { display: flex; align-items: center; gap: 31px; font-size: 14px; font-weight: 600; }.main-nav > a:not(.btn) { transition: color .2s; }.main-nav > a:not(.btn):hover { color: var(--blue); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 12px; color: #fff; background: var(--blue); font-weight: 700; cursor: pointer; box-shadow: 0 10px 25px rgba(23,105,255,.22); transition: transform .2s, background .2s, box-shadow .2s; }
.btn:hover { background: var(--blue-dark); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(23,105,255,.3); }.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(23,105,255,.35); outline-offset: 3px; }
.btn-small { min-height: 42px; padding: 0 18px; color: #fff !important; }.nav-dropdown { position:relative; }.nav-dropdown summary { list-style:none;cursor:pointer;user-select:none; }.nav-dropdown summary::-webkit-details-marker { display:none; }.nav-dropdown summary span { margin-left:7px;transition:transform .2s; }.nav-dropdown[open] summary span { transform:rotate(180deg); }.nav-dropdown-menu { position:absolute;top:calc(100% + 10px);right:0;z-index:20;display:grid;min-width:210px;padding:8px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 18px 40px rgba(7,26,51,.16); }.nav-dropdown:not([open]) .nav-dropdown-menu { display:none; }.nav-dropdown-menu a { padding:11px 13px;border-radius:8px;color:var(--ink);font-size:13px; }.nav-dropdown-menu a:hover { color:var(--blue);background:#edf4ff; }.nav-toggle { display: none; border: 0; background: none; padding: 8px; }.nav-toggle span { display: block; width: 25px; height: 2px; margin: 5px; background: var(--ink); transition: .25s; }
.hero { min-height: calc(100vh - var(--header)); display: flex; align-items: center; position: relative; overflow: hidden; padding-block: 90px; background: linear-gradient(135deg,#fff 35%,#f2f7ff 100%); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(rgba(23,105,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(23,105,255,.05) 1px,transparent 1px); background-size: 55px 55px; mask-image: linear-gradient(to right,transparent,black); }
.hero-glow { position: absolute; width: 500px; height: 500px; border-radius: 50%; right: -150px; top: -170px; background: rgba(23,105,255,.12); filter: blur(50px); }
.hero-grid { position: relative; display: flex; justify-content: center; }
.hero-copy { width: min(100%, 900px); text-align: center; }
.hero-copy .eyebrow,.hero-actions,.trust-list { justify-content: center; }
.hero-copy h1,.hero-lead { margin-inline: auto; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--blue); font-size: 12px; letter-spacing: .15em; text-transform: uppercase; font-weight: 800; }.eyebrow span { width: 28px; height: 2px; background: currentColor; }
h1,h2,h3,p { margin-top: 0; }h1,h2 { letter-spacing: -.055em; line-height: 1.08; }h1 { margin: 22px 0 24px; max-width: 720px; font-size: clamp(44px,5vw,72px); }h2 { margin-bottom: 20px; font-size: clamp(35px,4vw,54px); }h1 em,h2 em { color: var(--blue); font-style: normal; }.hero-lead { max-width: 680px; color: var(--muted); font-size: 18px; }.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0; }.btn-ghost { color: var(--ink); background: #fff; border: 1px solid var(--line); box-shadow: none; }.btn-ghost:hover { color: var(--blue); background: #fff; box-shadow: var(--shadow); }
.trust-list { display: flex; flex-wrap: wrap; gap: 14px 22px; list-style: none; padding: 0; margin: 0; color: #44546a; font-size: 12px; font-weight: 600; }.trust-list span { color: var(--green); margin-right: 5px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 50px; margin-bottom: 50px; }.section-heading h2 { margin-bottom: 0; }.section-heading > p { max-width: 430px; color: var(--muted); }.services { background: var(--surface); }.services-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }.service-card { position: relative; min-height: 330px; display: flex; flex-direction: column; padding: 28px; border: 1px solid #e3eaf2; border-radius: var(--radius); background: #fff; overflow: hidden; transition: transform .25s,border .25s,box-shadow .25s; }.service-card:hover { transform: translateY(-6px); border-color: rgba(23,105,255,.35); box-shadow: var(--shadow); }.service-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 38px; border-radius: 14px; color: var(--blue); background: #edf4ff; font-size: 22px; }.energy .service-icon { color: #159354; background: #e9faf1; }.card-number { position: absolute; top: 28px; right: 28px; color: #b3bfce; font: 600 11px monospace; }.service-card h3 { font-size: 19px; letter-spacing: -.03em; }.service-card p { color: var(--muted); font-size: 14px; }.service-card > a:not(.btn) { margin-top: auto; color: var(--blue); font-size: 13px; font-weight: 700; }.service-card a span { transition: margin .2s; }.service-card a:hover span { margin-left: 5px; }.project-card { justify-content: center; color: #fff; background: linear-gradient(145deg,var(--blue),#0a4dca); }.project-card p { color: rgba(255,255,255,.75); }.project-plus { position: absolute; right: 15px; top: -40px; font-size: 140px; font-weight: 200; opacity: .08; }.btn-light { width: fit-content; min-height: 44px; margin-top: 10px; color: var(--blue); background: #fff; box-shadow: none; }.btn-light:hover { color: var(--blue); background: #fff; }
.about { color: #fff; background: var(--navy); position: relative; overflow: hidden; }.about::after { content:""; position:absolute; width:500px;height:500px;right:-200px;bottom:-300px;border:1px solid rgba(255,255,255,.1);border-radius:50%;box-shadow:0 0 0 90px rgba(255,255,255,.025),0 0 0 180px rgba(255,255,255,.02); }.about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; position: relative; z-index: 1; }.eyebrow.light { color: #69a0ff; }.about-copy p:not(.eyebrow) { color: #aab8c9; max-width: 520px; }.about-copy h2 em { color: #6ba3ff; }.text-link { display: inline-flex; gap: 12px; margin-top: 20px; color: #fff; font-weight: 700; }.advantages { display: grid; }.advantage { display: grid; grid-template-columns: 50px 1fr; gap: 22px; padding: 28px 0; border-bottom: 1px solid rgba(255,255,255,.12); }.advantage > span { color: #629bfa; font: 600 12px monospace; }.advantage h3 { margin-bottom: 8px; font-size: 20px; }.advantage p { margin: 0; color: #91a2b8; font-size: 14px; }
.contact { color:#fff;background:linear-gradient(145deg,#0a2b55,var(--navy)); }.contact-grid { display:flex;justify-content:center; }.contact-info { width:min(100%,900px);text-align:center; }.contact-info .eyebrow { justify-content:center; }.contact-info h2 { max-width:760px;margin-inline:auto; }.contact-info h2 em { color:#72a8ff; }.contact-info > p:not(.eyebrow) { max-width:680px;margin-inline:auto;color:#a5b6ca; }.quick-contact { margin-top:45px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px; }.quick-contact > a,.quick-contact > div { display:flex;align-items:center;text-align:left;gap:15px;padding:18px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.035);transition:background .2s,border-color .2s; }.quick-contact > a:hover { background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2); }.quick-contact > * > span { display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border:1px solid rgba(255,255,255,.13);border-radius:11px;color:#70a7ff; }.quick-contact small,.quick-contact strong { display:block; }.quick-contact small { color:#8397ae;font-size:10px;text-transform:uppercase;letter-spacing:.1em; }.quick-contact strong { font-size:14px;overflow-wrap:anywhere; }
.site-footer { padding-top:70px;color:#a0aec0;background:#041327; }.footer-grid { display:grid;grid-template-columns:2fr repeat(3,1fr);gap:60px;padding-bottom:55px; }.brand-light { color:#fff; }.footer-brand p { max-width:330px;margin-top:20px;font-size:13px; }.footer-grid h3 { color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.1em; }.footer-grid > div:not(.footer-brand) { display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:13px; }.footer-grid a:hover { color:#fff; }.footer-bottom { display:flex;justify-content:space-between;padding-block:20px;border-top:1px solid rgba(255,255,255,.09);font-size:11px; }.footer-bottom p { margin:0; }.footer-bottom div { display:flex;gap:24px; }
.reveal { opacity:1;transform:none; }.reveal.visible { opacity:1;transform:none; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important; }.reveal { opacity:1;transform:none; } }
@media (max-width: 1020px) { .main-nav { gap:17px; }.services-grid { grid-template-columns:repeat(2,1fr); }.about-grid { gap:50px; }.footer-grid { grid-template-columns:1.6fr repeat(3,1fr);gap:30px; } }
@media (max-width: 800px) { :root { --header:70px; }.section { padding:80px 0; }.nav-toggle { display:block;z-index:2; }.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); }.main-nav { position:fixed;inset:var(--header) 0 auto 0;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:18px 20px 28px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 20px 35px rgba(7,26,51,.12);transform:translateY(-130%);visibility:hidden;transition:transform .3s,visibility .3s; }.main-nav.open { transform:none;visibility:visible; }.main-nav > a { padding:12px; }.main-nav .btn { margin-top:8px; }.nav-dropdown { width:100%; }.nav-dropdown summary { width:100%;justify-content:center; }.nav-dropdown-menu { position:static;margin-top:8px;box-shadow:none; }.nav-dropdown-menu a { padding:12px; }.hero { padding-block:65px; }.hero-copy { text-align:center; }.hero-copy .eyebrow,.hero-actions { justify-content:center; }.hero-lead { margin-inline:auto; }.trust-list { justify-content:center; }.section-heading { display:block; }.section-heading > p { margin-top:20px; }.about-grid { grid-template-columns:1fr; }.about-grid { gap:45px; }.footer-grid { grid-template-columns:repeat(2,1fr); }.footer-brand { grid-column:1/-1; } }
@media (max-width: 560px) { .container { width:min(calc(100% - 28px),var(--container)); }.section { padding:68px 0; }h1 { font-size:40px; }.hero-lead { font-size:16px; }.hero-actions { flex-direction:column; }.hero-actions .btn { width:100%; }.trust-list { display:grid;text-align:left; }.services-grid { grid-template-columns:1fr; }.service-card { min-height:285px; }.footer-grid { grid-template-columns:1fr; }.footer-brand { grid-column:auto; }.footer-bottom { flex-direction:column;gap:12px; }.footer-bottom div { flex-wrap:wrap;gap:12px 20px; } }

/* Pôles étendus : sécurité, logiciels et jeux */
.security-card .service-icon { color:#5267df; background:#eef0ff; }
.software { background:#fff; }
.purple { color:#7657e8; }
.specialty-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.specialty-card { min-height:220px; padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:0 8px 30px rgba(18,47,86,.06); transition:transform .25s,border-color .25s; }
.specialty-card:hover { transform:translateY(-5px); border-color:#9179ed; }
.specialty-card > span { display:grid; place-items:center; width:44px; height:44px; margin-bottom:28px; border-radius:13px; color:#7657e8; background:#f0edff; font-weight:800; }
.specialty-card h3 { margin-bottom:8px; font-size:18px; }.specialty-card p { margin:0; color:var(--muted); font-size:13px; }
.center-action { margin-top:34px; text-align:center; }.btn-purple { background:#7657e8; box-shadow:0 10px 25px rgba(118,87,232,.25); }.btn-purple:hover { background:#6044cd; }
.gaming { position:relative; overflow:hidden; color:#fff; background:linear-gradient(145deg,#090c22,#17103d); }.gaming .section-heading > p,.gaming .specialty-card p { color:#a9a8c5; }.gaming h2 em,.game { color:#ad8cff; }.gaming .specialty-card { color:#fff; border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.045); backdrop-filter:blur(8px); }.gaming .specialty-card:hover { border-color:#8e6de8; }.game-grid { position:absolute; inset:0; opacity:.15; background-image:linear-gradient(rgba(150,120,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(150,120,255,.25) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,black,transparent); }
.gaming .container { position:relative; }
@media (max-width:800px) { .specialty-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:800px) { .quick-contact { grid-template-columns:1fr;max-width:520px;margin-inline:auto; } }
@media (max-width:560px) { .specialty-grid { grid-template-columns:1fr; }.specialty-card { min-height:auto; } }
/* Visuels métiers optimisés */
.service-photo { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px; background:#e8eef7; }
.service-card .service-photo { order:-2; height:150px; margin:0 0 20px; }
.service-card:has(.service-photo) .service-icon { order:-1; width:40px; height:40px; margin:0 0 16px; }
.service-card:has(.service-photo) { min-height:510px; }
.specialty-card .service-photo { height:170px; margin:0 0 20px; }
.specialty-card:has(.service-photo) > span { margin-bottom:16px; }
@media (max-width:560px) { .service-card:has(.service-photo) { min-height:480px; }.service-card .service-photo,.specialty-card .service-photo { height:auto; } }
/* Pages Devis et Contact */
.form-page { background:#f4f7fb; }
.form-page-main { min-height:calc(100vh - var(--header)); }
.form-hero { padding:80px 0 100px;background:linear-gradient(135deg,#fff 20%,#edf4ff 100%); }
.form-page-grid { display:grid;grid-template-columns:minmax(280px,.75fr) minmax(500px,1.25fr);gap:70px;align-items:start; }
.form-intro { position:sticky;top:calc(var(--header) + 45px);padding-top:35px; }
.form-intro h1 { font-size:clamp(42px,5vw,66px); }
.form-intro > p:not(.eyebrow) { max-width:570px;color:var(--muted);font-size:17px; }
.form-benefits { display:grid;gap:12px;margin:32px 0 0;padding:0;list-style:none;color:#34445a;font-size:14px;font-weight:700; }
.form-benefits li::before { content:"✓";margin-right:10px;color:var(--green); }
.contact-details { display:grid;gap:10px;margin-top:34px; }
.contact-details > * { display:block;padding:17px 19px;border:1px solid #dce5f0;border-radius:13px;background:rgba(255,255,255,.75); }
.contact-details small,.contact-details strong { display:block; }
.contact-details small { margin-bottom:4px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.1em; }
.contact-details strong { color:var(--ink);font-size:14px;overflow-wrap:anywhere; }
.standalone-form { padding:38px;border:1px solid #e1e8f0;border-radius:24px;background:#fff;box-shadow:0 24px 65px rgba(15,47,84,.13); }
.form-title { margin-bottom:28px;padding-bottom:22px;border-bottom:1px solid var(--line); }
.form-title h2 { margin-bottom:7px;font-size:27px;letter-spacing:-.04em; }
.form-title p { margin:0;color:var(--muted);font-size:12px; }
.fields-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:19px; }
.field { display:flex;flex-direction:column;gap:7px; }
.field-wide { grid-column:1/-1; }
.field label { color:#415269;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; }
.field input,.field select,.field textarea { width:100%;padding:12px 14px;border:1px solid #d4deea;border-radius:10px;color:var(--ink);background:#fbfcfe;outline:none;transition:border-color .2s,box-shadow .2s; }
.field input,.field select { height:48px; }
.field textarea { resize:vertical;line-height:1.55; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,105,255,.11); }
.field .invalid { border-color:#c82b22;box-shadow:0 0 0 3px rgba(200,43,34,.09); }
.data-notice { margin:22px 0 0;color:var(--muted);font-size:11px;line-height:1.55; }
.form-submit { width:100%;margin-top:22px; }
.standalone-status { min-height:20px;margin:12px 0 0;text-align:center;font-size:12px;font-weight:700; }
.standalone-status.error { color:#c82b22; }
.standalone-status.success { color:#16814c; }
.compact-footer { padding-top:0; }
@media (max-width:900px) { .form-page-grid { grid-template-columns:1fr;gap:42px; }.form-intro { position:static;padding-top:0;text-align:center; }.form-intro .eyebrow { justify-content:center; }.form-intro > p:not(.eyebrow) { margin-inline:auto; }.form-benefits,.contact-details { max-width:560px;margin-inline:auto; }.contact-details { text-align:left; } }
@media (max-width:560px) { .form-hero { padding:50px 0 70px; }.standalone-form { padding:25px 18px; }.fields-grid { grid-template-columns:1fr; }.field-wide { grid-column:auto; }.form-intro h1 { font-size:39px; } }
/* Thème noir global */
:root { --ink:#f4f7fb;--muted:#a5b0c0;--surface:#050505;--white:#000;--line:#252b35;--shadow:0 18px 55px rgba(0,0,0,.45); }
body,.form-page { color:var(--ink);background:#000; }
.site-header { background:rgba(0,0,0,.9);border-bottom-color:#252525; }
.main-nav > a:not(.btn) { color:#f4f7fb; }
.nav-toggle span { background:#fff; }
.hero,.services,.software,.form-hero { background:#000; }
.hero::before { opacity:.5;mask-image:linear-gradient(to right,transparent,black); }
.hero-lead,.section-heading > p,.service-card p,.specialty-card p,.form-intro > p:not(.eyebrow),.data-notice { color:var(--muted); }
.trust-list { color:#c6ced9; }
.service-card,.specialty-card,.standalone-form { color:var(--ink);border-color:#252b35;background:#0b0d10;box-shadow:0 16px 45px rgba(0,0,0,.35); }
.service-card:hover,.specialty-card:hover { border-color:rgba(23,105,255,.65); }
.service-icon { background:#101b2c; }
.energy .service-icon { background:#0d2118; }
.about,.contact,.gaming { background:#030303; }
.nav-dropdown-menu { border-color:#292f39;background:#0b0d10;box-shadow:0 18px 40px rgba(0,0,0,.55); }
.nav-dropdown-menu a { color:#f4f7fb; }
.nav-dropdown-menu a:hover { background:#14203a; }
.btn-ghost { color:#fff;background:#0d1015;border-color:#303743; }
.btn-ghost:hover { color:#fff;background:#151a22; }
.contact-details > * { border-color:#292f39;background:#0b0d10; }
.contact-details strong { color:#f4f7fb; }
.form-title { border-bottom-color:#292f39; }
.field label { color:#cbd3df; }
.field input,.field select,.field textarea { color:#f4f7fb;border-color:#343b47;background:#11151b;color-scheme:dark; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--blue); }
.site-footer { background:#000;border-top:1px solid #20242c; }
@media (max-width:800px) { .main-nav { color:#f4f7fb;background:#080a0d;border-bottom-color:#252b35; }.main-nav > a { color:#f4f7fb; } }
/* Taille mobile du logo */
@media (max-width:800px) { .brand-logo { height:54px; }.site-footer .brand-logo { height:66px; } }

/* Navigation étendue : le menu DJ-Orel reste lisible sans débordement. */
.site-header .nav-wrap { width:min(calc(100% - 40px),1500px); }
.site-header .main-nav { gap:clamp(13px,1.35vw,28px);font-size:13px; }
@media (max-width:1180px) {
  .site-header .nav-toggle { display:block;z-index:2; }
  .site-header .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .site-header .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
  .site-header .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  .site-header .main-nav { position:fixed;inset:var(--header) 0 auto 0;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:18px 20px 28px;color:#f4f7fb;background:#080a0d;border-bottom:1px solid #252b35;box-shadow:0 20px 35px rgba(0,0,0,.4);transform:translateY(-130%);visibility:hidden;transition:transform .3s,visibility .3s; }
  .site-header .main-nav.open { transform:none;visibility:visible; }
  .site-header .main-nav > a { padding:12px;color:#f4f7fb;text-align:center; }
}