
:root{color-scheme:dark;--bg:#080f18;--panel:#111e2a;--panel2:#152738;--txt:#f1f7fb;--muted:#a6b9c6;--accent:#80e8db;--line:#263746}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0;background:var(--bg);color:var(--txt);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}button{font:inherit}p{margin-top:0}h1,h2,h3{line-height:1.15;letter-spacing:-.04em;margin:0 0 22px}h1{font-size:clamp(3.4rem,6vw,6.8rem);max-width:740px}h2{font-size:clamp(2.3rem,4vw,4.5rem)}h3{font-size:1.45rem}h1 em,.contact-box em{font-style:normal;color:var(--accent)}h2 span{color:var(--muted)}.container{width:min(1180px,calc(100% - 48px));margin-inline:auto}.section{padding:112px 0}.eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.17em;color:var(--accent)}.eyebrow.muted{color:var(--muted)}.skip-link{position:absolute;left:12px;top:-80px;background:var(--accent);color:var(--bg);padding:10px;z-index:100}.skip-link:focus{top:12px}
.site-header{position:sticky;top:0;z-index:50;background:#080f18e8;backdrop-filter:blur(18px);border-bottom:1px solid #253544}.nav-wrap{height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;gap:14px;align-items:center}.brand-mark{display:flex;gap:4px;transform:skew(-12deg)}.brand-mark span{width:7px;height:28px;background:var(--accent);display:block}.brand-mark span:nth-child(2){height:20px;align-self:end;opacity:.8}.brand-mark span:nth-child(3){height:25px;opacity:.6}.brand-text{display:flex;flex-direction:column;line-height:1.1;gap:7px;font-size:.9rem;letter-spacing:.1em}.brand-text small{color:var(--muted);font-size:.57rem;letter-spacing:.17em}.main-nav{display:flex;align-items:center;gap:30px;font-size:.85rem}.main-nav a:hover,.inline-link:hover{color:var(--accent)}.nav-contact{border:1px solid var(--accent);padding:11px 16px;border-radius:6px}.menu-toggle{display:none}
.hero{position:relative;overflow:hidden;min-height:760px;padding-bottom:44px;background:radial-gradient(circle at 83% 38%,#183b4a 0%,transparent 37%),linear-gradient(160deg,#0b1420,#080f18 75%)}.hero-layout{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:45px;min-height:560px}.hero-description{max-width:540px;color:var(--muted);font-size:1.15rem}.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:34px 0}.button{display:inline-flex;align-items:center;gap:12px;padding:15px 21px;border-radius:6px;font-weight:700;font-size:.86rem;transition:transform .2s,background .2s}.button:hover{transform:translateY(-3px)}.button-primary{background:var(--accent);color:#07141d}.button-quiet{border:1px solid #415363}.hero-meta{display:flex;flex-wrap:wrap;gap:24px;color:var(--muted);font-size:.78rem}.meta-icon{color:var(--accent)}.hero-bottom{display:flex;justify-content:space-between;color:#78909f;font-size:.66rem;letter-spacing:.18em}.hero-visual{position:relative;perspective:1100px;padding:65px 6px}.control-surface{padding:20px;border:1px solid #36596b;border-radius:17px;background:linear-gradient(145deg,#1c3445,#0b1521);box-shadow:0 45px 90px #0009,0 0 90px #2bafaf1c;transform:rotateY(-9deg) rotateX(5deg)}.surface-top,.surface-bottom,.panel-header{display:flex;justify-content:space-between;align-items:center;font-size:.62rem;letter-spacing:.15em;color:#87a1b3}.surface-symbol{font-weight:900;color:var(--accent);font-size:1rem}.surface-live i,.status-dot,.tag-pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:6px;box-shadow:0 0 12px var(--accent)}.preview-deck{display:grid;grid-template-columns:1.35fr 1fr;gap:11px;margin:20px 0}.preview-screen{min-height:154px;border:6px solid #090f18;border-radius:8px;background:radial-gradient(circle at 68% 29%,#38b8ac66,transparent 43%),linear-gradient(145deg,#112c42,#090f19);position:relative;display:flex;justify-content:space-between;align-items:end;padding:12px;color:#b8ffef;font-size:.66rem;letter-spacing:.12em}.screen-side{background:radial-gradient(circle at 45% 45%,#4d679c55,transparent 42%),#102033}.preview-screen b{font-size:2rem;opacity:.35}.screen-grid{position:absolute;inset:0;background:linear-gradient(90deg,transparent 49%,#ffffff0e 50%,transparent 51%),linear-gradient(transparent 49%,#ffffff0e 50%,transparent 51%);background-size:30px 30px}.fader-deck{display:flex;justify-content:space-between;gap:16px;padding:12px}.meter-bars{display:flex;gap:3px;height:42px;align-items:end}.meter-bars i{display:block;width:8px;background:var(--accent);border-radius:2px;height:50%;opacity:.8}.meter-bars i:nth-child(3n){height:90%}.meter-bars i:nth-child(4n){height:67%}.meter-label{color:var(--muted);font-size:.6rem}.mini-controls{display:flex;align-items:center;gap:8px}.control-button{width:17px;height:17px;background:#31495a;border-radius:4px}.control-button.on{background:var(--accent)}.control-button.hot{background:#e87a8a}.floating-tag{position:absolute;right:0;bottom:25px;background:#1b303e;border:1px solid #2f6870;padding:12px 16px;border-radius:7px;font-size:.63rem;letter-spacing:.15em;box-shadow:0 14px 25px #0008}.visual-orbit{position:absolute;inset:14%;border:1px solid #2c6c7b55;border-radius:50%;pointer-events:none}.orbit-two{inset:6%;transform:rotate(45deg)}
.section-intro{display:grid;grid-template-columns:1fr 2.4fr;gap:35px;align-items:start;margin-bottom:42px}.section-intro p:last-child,.expertise-copy>p:not(.eyebrow),.approach-heading>p:not(.eyebrow){color:var(--muted);max-width:640px}.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.service-card{position:relative;min-height:320px;padding:30px 24px;background:linear-gradient(150deg,#152736,#101c29);border:1px solid var(--line);border-radius:12px;transition:transform .2s,border-color .2s}.service-card:hover{transform:translateY(-6px);border-color:#4da7a3}.card-number{font-size:.7rem;color:#7895a7}.service-icon{width:45px;height:45px;margin:36px 0 22px;color:var(--accent)}.service-icon svg{width:100%}.service-card p{font-size:.88rem;color:var(--muted)}.expertise{background:#101d29}.expertise-layout,.approach-layout{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center}.expertise-panel{border:1px solid #365060;border-radius:12px;padding:28px;background:#132636}.panel-dot{width:8px;height:8px;background:var(--accent);border-radius:50%}.skill-list{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0}.skill-list span{border:1px solid #365466;padding:9px 12px;border-radius:5px;font-size:.85rem}.panel-note{font-size:.75rem;color:var(--muted)}.inline-link{color:var(--accent);font-size:.87rem;font-weight:800}.approach-steps{border-top:1px solid var(--line)}.approach-step{border-bottom:1px solid var(--line);padding:22px 0}.approach-step span{font-size:.68rem;color:var(--accent);letter-spacing:.14em}.approach-step h3{margin:8px 0}.approach-step p{color:var(--muted);font-size:.87rem}.contact-section{padding:50px 0 110px}.contact-box{border:1px solid #3c726e;border-radius:16px;background:radial-gradient(circle at 90% 10%,#245b555e,transparent 48%),#132735;padding:60px;display:flex;align-items:end;justify-content:space-between;gap:40px}.contact-box h2{max-width:720px}.contact-box p:not(.eyebrow){color:var(--muted);max-width:560px}.contact-actions{display:flex;flex-direction:column;gap:12px;align-items:start;min-width:210px}.contact-actions small{color:var(--muted)}.is-unavailable{opacity:.5;cursor:not-allowed;pointer-events:none}.site-footer{border-top:1px solid var(--line);padding:32px 0;color:var(--muted);font-size:.78rem}.footer-layout{display:flex;justify-content:space-between;gap:20px}.footer-brand{font-weight:900;color:white;letter-spacing:.08em}.footer-brand span{color:var(--muted);font-weight:400}
.js-ready .reveal{opacity:0;transform:translateY(18px);transition:opacity .65s,transform .65s}.js-ready .reveal.is-visible{opacity:1;transform:none}
@media(max-width:960px){.services-grid{grid-template-columns:repeat(2,1fr)}.hero-layout{grid-template-columns:1fr}.hero{min-height:0}.hero-visual{max-width:620px;width:100%;margin:auto}.expertise-layout,.approach-layout{gap:35px}.contact-box{padding:35px;display:block}.contact-actions{margin-top:20px}}
@media(max-width:680px){.container{width:min(100% - 32px,1180px)}.section{padding:74px 0}.nav-wrap{height:72px}.brand-text{font-size:.72rem}.menu-toggle{display:flex;flex-direction:column;gap:5px;background:none;border:1px solid #3e5c6e;border-radius:6px;padding:10px;cursor:pointer}.menu-toggle span{width:23px;height:2px;background:white}.main-nav{display:none;position:absolute;left:0;right:0;top:72px;background:#0d1a27;padding:25px;flex-direction:column;align-items:stretch;gap:20px;border-bottom:1px solid #334a5b}.main-nav.is-open{display:flex}.hero-layout{gap:0}.hero{padding-top:65px}.hero-visual{padding:44px 0}.control-surface{transform:none}.preview-screen{min-height:110px}.floating-tag{right:8px;bottom:10px}.hero-bottom{margin-top:12px}.section-intro,.expertise-layout,.approach-layout{grid-template-columns:1fr;gap:18px}.services-grid{grid-template-columns:1fr}.service-card{min-height:235px}.service-icon{margin:18px 0}.contact-box{padding:30px 23px}.footer-layout{flex-direction:column;gap:10px}h1{font-size:clamp(2.75rem,12vw,4.4rem)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.js-ready .reveal{opacity:1;transform:none}}

/* Identité Dylan DE RAM et photographie corporate */
.brand{min-width:0;display:inline-flex;align-items:center}
.brand-logo{width:min(280px,28vw);height:auto;max-height:70px;object-fit:contain;object-position:left center;display:block}
.hero-visual{perspective:none;padding:22px 0}
.hero-photo-card{position:relative;margin:0;width:100%;aspect-ratio:5/6;border:1px solid #355367;border-radius:16px;overflow:hidden;background:#10222e;box-shadow:0 35px 85px #0009,0 0 65px #2bafaf14}
.hero-photo-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#07152108 36%,#071521aa 100%);pointer-events:none}
.hero-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center center;filter:saturate(.85) contrast(1.07)}
.hero-photo-caption{position:absolute;bottom:23px;left:24px;right:24px;z-index:1;color:#f3f9fc;font-size:.72rem;letter-spacing:.1em;font-weight:800}
.hero-photo-caption small{display:block;margin-top:6px;color:#c2d3dc;letter-spacing:0;font-weight:400;font-size:.68rem}
.contact-actions{min-width:230px}
.contact-actions .button{width:100%;justify-content:space-between}
@media(max-width:960px){.brand-logo{width:255px;max-width:40vw}.hero-photo-card{aspect-ratio:16/10;max-height:510px}}
@media(max-width:680px){.brand-logo{width:212px;max-width:64vw;max-height:56px}.hero-visual{padding:34px 0 12px}.hero-photo-card{aspect-ratio:5/4}.hero-photo-caption{left:15px;bottom:16px}}

/* Informations légales */
.footer-legal{display:flex;align-items:center;flex-wrap:wrap;gap:18px}
.footer-legal a{font-size:.78rem;color:var(--muted);text-decoration:underline;text-decoration-color:#4b6b7d;text-underline-offset:4px}
.footer-legal a:hover,.legal-content a:hover{color:var(--accent)}
.legal-page{min-height:65vh;padding-top:85px;padding-bottom:95px;background:radial-gradient(circle at 85% 10%,#17354466,transparent 42%),var(--bg)}
.legal-page h1{font-size:clamp(2.65rem,5vw,4.9rem);margin:12px 0 20px}
.legal-lead{max-width:790px;font-size:1.1rem;color:var(--muted)}
.legal-content{max-width:890px;margin-top:48px;display:grid;gap:18px}
.legal-content section{background:linear-gradient(145deg,#142737,#101c29);border:1px solid var(--line);border-radius:13px;padding:27px 32px}
.legal-content h2{font-size:clamp(1.35rem,2.5vw,1.85rem);letter-spacing:-.025em;margin:0 0 14px}
.legal-content p{font-size:.94rem;color:#c7d6df;line-height:1.85}
.legal-content p:last-child{margin-bottom:0}
.legal-content a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.legal-details{margin:16px 0;display:grid;gap:10px}
.legal-details>div{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.legal-details dt{color:var(--muted)}.legal-details dd{margin:0;color:var(--txt)}
.legal-back{margin-top:45px}
@media(max-width:960px){.footer-layout{flex-wrap:wrap}}
@media(max-width:680px){.legal-page{padding-top:55px;padding-bottom:65px}.legal-content{gap:12px;margin-top:28px}.legal-content section{padding:23px 20px}.legal-details>div{grid-template-columns:1fr;gap:2px}.footer-legal{gap:18px}}
