/* Identité Suporia : logo original, repères techniques et flux. */
:root { color-scheme:dark; --bg:#08121f; --panel:#0e1c2e; --ink:#f0f5ff; --muted:#aabbd0; --accent:#8ddff5; --violet:#b6a7ff; --rule:#2a3c51; --max:1240px; font-family:"Segoe UI",Arial,sans-serif; font-synthesis:none; text-rendering:optimizeLegibility; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:105px; }
body { min-width:320px; margin:0; background:var(--bg); color:var(--ink); line-height:1.65; }
::selection { color:#08121f; background:var(--accent); }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; }
a,button { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:10px; left:12px; z-index:200; padding:10px 18px; background:var(--ink); color:var(--bg); transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.container { width:min(calc(100% - 80px),var(--max)); margin-inline:auto; }
.section { padding-block:90px; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:Bahnschrift,"Segoe UI",Arial,sans-serif; }
h1,h2 { font-weight:650; }
h1 em,h2 em { font-style:normal; }
.site-header { position:fixed; inset:0 0 auto; z-index:100; background:#08121ff5; border-bottom:1px solid var(--rule); }
.site-header.is-scrolled { background:#08121f; }
.header-inner { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:22px; flex-shrink:0; }
.brand img { width:155px; height:auto; }
.brand-descriptor { max-width:115px; padding-left:20px; border-left:1px solid #496079; color:var(--muted); font-size:10px; line-height:1.65; letter-spacing:.1em; text-transform:uppercase; }
.main-navigation { display:flex; align-items:center; gap:27px; font-size:.84rem; font-weight:600; }
.main-navigation > a { padding-block:11px; color:#c1cede; }
.main-navigation > a:hover { color:var(--accent); }
.main-navigation .nav-cta { color:var(--ink); padding:10px 16px; border:1px solid #546a86; border-radius:3px; }
.main-navigation .nav-cta:hover { border-color:var(--accent); }
.menu-button { display:none; width:46px; height:46px; padding:10px; background:transparent; border:1px solid #546a86; border-radius:3px; }
.menu-button span:not(.sr-only) { display:block; height:2px; margin-block:5px; background:var(--ink); }
.menu-button[aria-expanded="true"] span:nth-child(2) { transform:translateY(7px) rotate(45deg); }
.menu-button[aria-expanded="true"] span:nth-child(3) { opacity:0; }
.menu-button[aria-expanded="true"] span:nth-child(4) { transform:translateY(-7px) rotate(-45deg); }
.eyebrow,.card-eyebrow,.case-label,.service-index { font-family:Consolas,"Courier New",monospace; font-size:.74rem; line-height:1.6; font-weight:500; letter-spacing:.06em; text-transform:uppercase; }
.eyebrow { display:flex; gap:12px; align-items:center; color:var(--accent); margin-bottom:27px; }
.eyebrow > span { width:8px; height:8px; flex:0 0 8px; background:var(--accent); }
.hero { position:relative; padding-top:160px; padding-bottom:74px; background:linear-gradient(110deg,#08121f 40%,#0b1629); border-bottom:1px solid var(--rule); }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,1fr); gap:80px; align-items:center; }
.hero h1 { font-size:clamp(3.8rem,6.2vw,6rem); line-height:1.02; letter-spacing:-.065em; margin-bottom:27px; }
.hero h1 em { display:block; color:var(--accent); }
.hero-intro { max-width:560px; margin-bottom:29px; font-size:1.08rem; line-height:1.75; color:#beccdc; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:13px 19px; gap:15px; font-size:.9rem; font-weight:650; border-radius:3px; }
.button-primary { background:#90daf1; color:#0a1724; border:1px solid #90daf1; }
.button-primary:hover { background:#b2e9f7; border-color:#b2e9f7; }
.button-secondary { padding-inline:0; min-height:auto; border-bottom:1px solid #778ba3; border-radius:0; }
.button-secondary:hover { color:var(--accent); border-color:var(--accent); }
.direct-contact { margin:15px 0 0; color:var(--muted); font-size:.82rem; }
.direct-contact a { display:inline-block; color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
.direct-contact a:hover { color:var(--accent); }
.consultant-signature { display:flex; gap:14px; align-items:center; margin-top:29px; }
.initials { display:grid; place-items:center; flex:0 0 42px; height:45px; color:var(--violet); border-left:2px solid var(--violet); font-family:Bahnschrift,"Segoe UI",sans-serif; font-size:19px; }
.consultant-signature p { margin:0; font-size:.9rem; }
.consultant-signature p > strong,.consultant-signature p > span { display:block; }
.consultant-signature p > span { max-width:365px; margin-top:2px; font-size:.78rem; color:var(--muted); }
.systems-visual { position:relative; margin:0; min-width:0; }
.diagram-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; border-top:1px solid #425870; font-family:Consolas,"Courier New",monospace; color:var(--muted); font-size:.65rem; letter-spacing:.06em; text-transform:uppercase; }
.diagram-heading span:last-child { color:var(--accent); }
.systems-diagram { display:block; width:100%; height:auto; }
.diagram-input { font-family:"Segoe UI",Arial,sans-serif; font-size:17px; fill:#e4f0ff; }
.processor-title { font-family:Bahnschrift,"Segoe UI",Arial,sans-serif; fill:#d7eaff; font-size:62px; font-weight:650; letter-spacing:-2px; }
.processor-label { font-family:Consolas,monospace; fill:#b6a7ff; font-size:10px; letter-spacing:2px; }
.diagram-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.diagram-actions a { position:relative; display:block; border-top:2px solid #8ddff5; background:#0f2234; padding:12px 9px; text-align:center; font-size:.8rem; font-weight:600; border-radius:0 0 3px 3px; }
.diagram-actions a:nth-child(2) { border-color:var(--violet); }
.diagram-actions a:hover { background:#20334b; }
.diagram-actions span { display:block; margin-bottom:3px; color:var(--muted); font:10px Consolas,monospace; }
.diagram-actions b { color:var(--accent); font-weight:400; margin-left:3px; }
.systems-visual figcaption { color:var(--muted); font-size:.83rem; margin-top:20px; padding-left:12px; border-left:1px solid #53667e; }
.section-heading { display:grid; grid-template-columns:1.1fr .85fr; gap:100px; align-items:end; margin-bottom:45px; }
.section-heading h2,.expertise-layout h2,.contact h2 { font-size:clamp(2.4rem,4.2vw,3.8rem); letter-spacing:-.05em; line-height:1.1; margin:0; }
.section-heading > p { color:var(--muted); margin:0 0 4px; max-width:450px; font-size:.98rem; }
.services { background:#0a1524; }
.service-grid { border-top:1px solid #476079; }
.service-card { display:grid; grid-template-columns:95px .95fr 1.25fr 1fr; gap:28px; padding:34px 18px 34px 0; align-items:start; border-bottom:1px solid var(--rule); }
.service-card:hover { background:#101f31; }
.service-index { color:var(--accent); padding-top:6px; }
.service-card:nth-child(2) .service-index { color:var(--violet); }
.service-card h3 { font-size:1.4rem; font-weight:600; letter-spacing:-.03em; line-height:1.3; margin:0; }
.service-card > p { margin:0; color:var(--muted); font-size:.92rem; }
.deliverable { border-left:1px solid #42566e; padding-left:23px; }
.deliverable strong { font-size:.76rem; color:var(--accent); font-weight:650; }
.deliverable p { margin:9px 0 0; font-size:.86rem; color:#c0cedf; }
.follow-through { margin:28px 0 0; max-width:900px; color:var(--muted); font-size:.93rem; }
.follow-through strong { color:var(--ink); }
.text-link { display:inline-flex; align-items:center; gap:16px; padding:4px 0; border-bottom:1px solid #758ba5; margin-top:30px; font-size:.9rem; font-weight:600; }
.text-link:hover { color:var(--accent); border-color:var(--accent); }
.services-contact { margin-top:20px; }
.use-cases { background:#101e31; border-block:1px solid #294159; }
.use-case-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px; counter-reset:cases; }
.use-case { display:flex; flex-direction:column; border-top:1px solid #566e8a; padding-top:20px; counter-increment:cases; }
.use-case::before { content:"0" counter(cases); display:block; font-family:Bahnschrift,"Segoe UI",sans-serif; font-size:3.9rem; font-weight:600; letter-spacing:-.04em; color:#7791b4; line-height:1; margin-bottom:24px; }
.case-label { font-size:.69rem; color:var(--accent); }
.use-case h3 { font-size:1.35rem; font-weight:600; line-height:1.4; letter-spacing:-.025em; margin:18px 0; }
.use-case > p { color:var(--muted); margin:0 0 25px; font-size:.92rem; }
.use-case .case-outcome { margin:auto 0 0; padding-top:20px; border-top:1px solid #405673; font-size:.85rem; }
.case-outcome strong { display:block; color:var(--violet); font-size:.74rem; margin-bottom:8px; }
.use-cases .text-link { margin-top:38px; }
.expertise-layout,.about-layout { display:grid; grid-template-columns:1fr .9fr; gap:100px; }
.expertise-intro { margin:27px 0 0; color:var(--muted); max-width:460px; }
.expertise-list { counter-reset:expertise; }
.expertise-list article { counter-increment:expertise; position:relative; padding:25px 0 25px 58px; border-bottom:1px solid var(--rule); }
.expertise-list article:first-child { border-top:1px solid var(--rule); }
.expertise-list article::before { content:"[0" counter(expertise) "]"; position:absolute; left:0; top:27px; font-family:Consolas,monospace; font-size:14px; color:var(--accent); }
.expertise-list h3 { margin:0 0 10px; font-size:1.1rem; line-height:1.4; }
.expertise-list p { margin:0; color:var(--muted); font-size:.93rem; }
.about-section { background:#101c2d; border-block:1px solid var(--rule); }
.about-copy h2 { font-size:clamp(3.8rem,6.2vw,5.8rem); letter-spacing:-.065em; line-height:1; margin-bottom:25px; }
.about-copy h2 em { color:#b7bcff; }
.about-copy > p:not(.eyebrow) { color:#beccdc; margin:22px 0 0; }
.about-copy > p.about-role { font-size:.83rem; font-weight:650; color:var(--accent); margin-top:0; margin-bottom:30px; }
.experience-notes article { border-bottom:1px solid #385069; padding:17px 0; }
.experience-notes h3 { margin:0 0 6px; font-size:1rem; line-height:1.4; }
.experience-notes article p { color:var(--muted); margin:0; font-size:.9rem; }
.card-eyebrow { color:var(--accent); margin-bottom:14px; }
.experience-notes .current-experience { padding:24px; background:#14283c; border-top:2px solid var(--accent); border-bottom:1px solid #3a5570; margin-bottom:29px; }
.experience-notes .current-experience .card-eyebrow { color:var(--accent); font-size:.72rem; margin-bottom:14px; }
.experience-notes .current-experience h3 { font-weight:600; font-size:1.5rem; margin-bottom:14px; }
.experience-notes .current-experience .current-experience-focus { color:#bfbcf8; margin-top:14px; }
.previous-experience-label { margin-bottom:0; font-size:.65rem; color:#a4b3c8; }
.credentials { padding-top:21px; }
.credentials strong { font-size:.76rem; }
.credentials p { color:var(--muted); font-size:.85rem; margin:4px 0 14px; }
.contact { background:#111a30; position:relative; border-bottom:1px solid var(--rule); }
.contact::before { content:""; position:absolute; top:0; left:max(40px,calc((100% - var(--max))/2)); width:110px; height:3px; background:var(--accent); }
.contact-panel { display:grid; grid-template-columns:1.1fr 1fr; gap:85px; align-items:center; }
.contact h2 { max-width:610px; }
.contact-panel > div:first-child > p:not(.eyebrow) { color:#beccdc; margin:27px 0 0; max-width:570px; }
.contact-next { font-size:.92rem; }
.contact-actions { min-width:0; }
.contact-primary { display:block; padding:24px 0; border-block:1px solid #546c8a; }
.contact-primary > span { display:block; font-family:Consolas,monospace; text-transform:uppercase; letter-spacing:.06em; font-size:.73rem; margin-bottom:12px; color:var(--muted); }
.contact-primary > strong { display:block; font-family:Bahnschrift,"Segoe UI",sans-serif; font-size:clamp(1.6rem,2.7vw,2.6rem); font-weight:600; letter-spacing:-.04em; line-height:1.3; color:var(--accent); }
.contact-primary:hover strong { text-decoration:underline; text-underline-offset:8px; text-decoration-thickness:1px; }
.contact-secondary { margin-top:24px; border:none; background:transparent; padding:0; text-align:left; }
.contact-secondary > span { display:block; font-size:.74rem; margin-bottom:4px; color:var(--muted); }
.contact-secondary > strong { font-weight:600; font-size:.9rem; text-decoration:underline; text-underline-offset:5px; }
.contact-hint { color:var(--muted); font-size:.84rem; margin:28px 0 0; }
.site-footer { padding:40px 0 26px; }
.footer-grid { display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; }
.footer-grid p { font-size:.8rem; color:var(--muted); margin:17px 0 0; }
.footer-grid .brand img { width:130px; }
.footer-links { display:flex; gap:22px; font-size:.78rem; }
.footer-links a:hover { color:var(--accent); }
.footer-grid .copyright { grid-column:1/-1; border-top:1px solid var(--rule); padding-top:22px; margin:0; font-size:.72rem; }
.legal-header { border-bottom:1px solid var(--rule); }
.back-link { font-size:.86rem; text-decoration:underline; text-underline-offset:5px; }
.legal-main { width:min(calc(100% - 48px),860px); margin-inline:auto; padding:70px 0 100px; }
.legal-main h1 { font-size:clamp(2.5rem,6vw,4.5rem); letter-spacing:-.04em; line-height:1.1; margin-bottom:24px; }
.legal-updated { color:var(--muted); font-size:.85rem; margin-bottom:45px; }
.legal-section { border-top:1px solid var(--rule); padding:26px 0; }
.legal-section h2 { font-size:1.6rem; margin-bottom:15px; line-height:1.2; }
.legal-section p,.legal-section li { color:var(--muted); }
.legal-section p { margin-bottom:12px; }
.legal-section a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
@media (max-width:1100px) {
  .brand-descriptor { display:none; }
  .main-navigation { gap:20px; }
  .hero-grid { gap:42px; }
  .hero h1 { font-size:4.5rem; }
  .section-heading,.expertise-layout,.about-layout { gap:60px; }
  .service-card { grid-template-columns:82px .9fr 1.1fr 1fr; gap:20px; }
  .service-card h3 { font-size:1.25rem; }
  .service-index { font-size:.64rem; }
  .contact-panel { gap:45px; }
}
@media (max-width:800px) {
  html { scroll-padding-top:90px; }
  .container { width:calc(100% - 48px); }
  .section { padding-block:62px; }
  .header-inner { min-height:78px; flex-wrap:wrap; }
  .brand img { width:140px; }
  .main-navigation { width:100%; flex-wrap:wrap; gap:15px; padding-bottom:14px; }
  .js .menu-button { display:block; }
  .js .main-navigation { position:absolute; top:77px; left:0; right:0; padding:16px 24px 25px; display:none; background:#0a1727; border-bottom:1px solid #47617e; }
  .js .main-navigation.is-open { display:grid; gap:5px; }
  .main-navigation > a { padding:12px 0; }
  .main-navigation .nav-cta { justify-self:start; padding:12px 16px; }
  .hero { padding-top:121px; }
  .hero-grid { grid-template-columns:1fr; gap:40px; }
  .hero h1 { font-size:clamp(3.5rem,9vw,5.5rem); max-width:660px; }
  .hero-intro { max-width:580px; }
  .systems-visual { width:min(100%,540px); margin-inline:auto; }
  .section-heading { grid-template-columns:1fr; gap:24px; margin-bottom:35px; }
  .section-heading > p { max-width:580px; }
  .section-heading h2,.expertise-layout h2,.contact h2 { font-size:clamp(2.4rem,6.5vw,3.3rem); }
  .service-card { grid-template-columns:95px 1fr; gap:18px; padding-block:30px; }
  .service-card h3 { font-size:1.5rem; }
  .service-card > p,.deliverable { grid-column:2; }
  .deliverable { border-left:0; border-top:1px solid #3e546e; padding:16px 0 0; }
  .service-index { font-size:.7rem; }
  .use-case-grid { grid-template-columns:1fr; gap:34px; }
  .use-case h3 { font-size:1.5rem; max-width:600px; }
  .use-case::before { font-size:3rem; margin-bottom:20px; }
  .use-case .case-outcome { max-width:580px; }
  .expertise-layout,.about-layout,.contact-panel { grid-template-columns:1fr; gap:38px; }
  .expertise-intro,.about-copy > p { max-width:600px; }
  .about-copy h2 { font-size:4.5rem; }
  .contact-primary > strong { font-size:clamp(1.6rem,6vw,2.9rem); }
  .footer-grid { grid-template-columns:1fr; gap:25px; }
  .footer-links { flex-wrap:wrap; }
  .footer-grid .copyright { grid-column:auto; }
}
@media (max-width:450px) {
  .container { width:calc(100% - 40px); }
  .section { padding-block:53px; }
  .hero { padding-top:112px; }
  .hero h1 { font-size:clamp(3.1rem,13vw,4rem); }
  .hero-intro { font-size:1rem; }
  .hero-actions { gap:18px; align-items:start; }
  .button { font-size:.84rem; }
  .button-primary { min-height:48px; padding:12px 14px; }
  .button-secondary { padding-top:12px; padding-bottom:7px; }
  .direct-contact { font-size:.8rem; }
  .consultant-signature p > span { font-size:.75rem; }
  .eyebrow { font-size:.65rem; letter-spacing:.04em; gap:8px; }
  .diagram-heading { font-size:.55rem; }
  .diagram-actions { gap:6px; }
  .diagram-actions a { font-size:.68rem; padding:10px 3px; }
  .diagram-actions b { margin-left:0; }
  .systems-visual figcaption { font-size:.78rem; }
  .section-heading h2,.expertise-layout h2,.contact h2 { font-size:2.4rem; }
  .service-card { grid-template-columns:1fr; gap:13px; padding-right:0; }
  .service-card > p,.deliverable { grid-column:auto; }
  .service-card h3 { font-size:1.5rem; }
  .service-card > p { margin:0 0 6px; }
  .service-index { padding-top:0; }
  .about-copy h2 { font-size:4rem; }
  .expertise-list article { padding-left:43px; }
  .expertise-list article::before { font-size:12px; }
  .footer-links { gap:14px; }
  .legal-main { width:calc(100% - 40px); }
  .legal-header .back-link { font-size:.74rem; }
  .contact::before { left:20px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }