/* ============ SabiSys - styles partagés ============ */
:root{
  --ink:#323232;
  --paper:#fbfafc;
  --card:rgba(255,255,255,.72);
  --line:rgba(50,50,50,.09);
  --muted:#6d6d76;
  --accent:#e54f65;
  --accent2:#b23a72;
  --grad:linear-gradient(100deg,#e54f65,#b23a72);
  --dark:#323232;
  --r:22px;
  --rail:280px;
}
*{margin:0;padding:0;box-sizing:border-box}
/* Le défilement fluide est activé en JS après le chargement */
body{background:var(--paper);color:var(--ink);font-family:'Montserrat',system-ui,sans-serif;line-height:1.7;-webkit-font-smoothing:antialiased}
/* aucun overflow-x sur html/body : toute valeur non-visible peut casser position:fixed sur Safari iOS */
body::before{content:"";position:fixed;inset:-12%;z-index:-2;background:
  radial-gradient(700px 480px at 12% -5%,rgba(229,79,101,.30),transparent 65%),
  radial-gradient(800px 540px at 95% 12%,rgba(178,58,114,.24),transparent 65%),
  radial-gradient(620px 480px at 50% 105%,rgba(229,79,101,.16),transparent 65%),
  radial-gradient(460px 360px at 80% 68%,rgba(120,120,190,.12),transparent 65%);
  animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-2.5%,1.8%) scale(1.06)}
  100%{transform:translate(2%, -1.5%) scale(1.03)}
}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E")}
@media(prefers-reduced-motion:reduce){body::before{animation:none}}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;font-weight:800}
a{color:inherit;text-decoration:none}
a[href^="tel:"]{white-space:nowrap}
img{max-width:100%}
main{margin-left:calc(var(--rail) + 32px)}
.wrap{max-width:980px;margin:0 auto;padding:0 36px}
section{padding:90px 0;scroll-margin-top:24px}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);background:rgba(229,79,101,.09);border:1px solid rgba(229,79,101,.2);padding:7px 16px;border-radius:14px 5px 14px 5px;margin-bottom:20px}
.sec-title{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:16px}
h1.sec-title{font-size:clamp(2.1rem,4vw,3.15rem)}
.apropos h1.sec-title{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-sub{color:var(--muted);max-width:620px;margin-bottom:50px;font-weight:500}
.isvg{display:inline-block;width:16px;height:16px;vertical-align:-3px;margin-right:7px}

/* SIDEBAR */
aside{position:fixed;top:16px;left:16px;bottom:16px;width:var(--rail);z-index:50;display:flex;flex-direction:column;padding:30px 24px;
  background:rgba(255,255,255,.65);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line);border-radius:44px 12px 44px 12px;box-shadow:0 12px 40px rgba(50,50,50,.09)}
.side-logo img{height:52px;display:block}
.side-nav{margin-top:36px;display:flex;flex-direction:column;gap:4px;flex:1;overflow-y:auto;scrollbar-width:none}
.side-nav::-webkit-scrollbar{display:none}
.side-nav a{display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:18px 6px 18px 6px;font-size:.87rem;font-weight:600;color:var(--muted);transition:.2s}
.side-nav a i,.mobile-menu a i{flex:none;width:19px;height:19px;background:rgba(50,50,50,.45);transition:.2s;
  -webkit-mask:var(--mi) center/contain no-repeat;mask:var(--mi) center/contain no-repeat}
.side-nav a:hover{background:rgba(229,79,101,.07);color:var(--ink)}
.side-nav a:hover i{background:var(--accent)}
.side-nav a.active{background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(229,79,101,.3)}
.side-nav a.active i{background:#fff}
.side-nav a:nth-child(1),.mobile-menu a:nth-child(1){--mi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10l9-7 9 7v10a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E")}
.side-nav a:nth-child(2),.mobile-menu a:nth-child(2){--mi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E")}
.side-nav a:nth-child(3),.mobile-menu a:nth-child(3){--mi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3'/%3E%3Cpath d='M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E")}
.side-nav a:nth-child(4),.mobile-menu a:nth-child(4){--mi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z'/%3E%3C/svg%3E")}
.side-nav a:nth-child(5),.mobile-menu a:nth-child(5){--mi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")}
.side-nav a:nth-child(6),.mobile-menu a:nth-child(6){--mi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 5-5.5 8-5.5s6.5 1.5 8 5.5'/%3E%3C/svg%3E")}
.side-nav a:nth-child(7),.mobile-menu a:nth-child(7){--mi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.2 9a2.8 2.8 0 1 1 4 2.6c-.9.4-1.2 1-1.2 1.9'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E")}
.side-nav a:nth-child(8),.mobile-menu a:nth-child(8){--mi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E")}
.side-actions{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.side-support{background:var(--grad);color:#fff;font-weight:700;padding:13px 16px;border-radius:18px 6px 18px 6px;font-size:.85rem;text-align:center;transition:.2s}
.side-support:hover{filter:brightness(1.1)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(229,79,101,.4)}70%{box-shadow:0 0 0 9px rgba(229,79,101,0)}100%{box-shadow:0 0 0 0 rgba(229,79,101,0)}}
.side-audit{background:rgba(229,79,101,.1);color:var(--accent);font-weight:700;padding:12px 16px;border-radius:18px 6px 18px 6px;font-size:.81rem;text-align:center;transition:.2s}
.side-audit:hover{background:rgba(229,79,101,.18)}
.side-meta{margin-top:16px;font-size:.9rem;color:var(--ink);font-weight:700;line-height:2.1}
.side-meta a:hover{color:var(--accent)}
.side-meta small{display:block;font-size:.72rem;color:var(--muted);font-weight:500;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);line-height:1.8}
.mobile-bar{display:none}
.mobile-menu{display:none}
.bottom-nav{display:none}

/* MENU RÉDUIT (rail d'icônes) */
.side-logo{position:relative;display:block}
.side-logo::after{content:"";position:absolute;top:0;left:0;right:0;margin:0 auto;width:60px;height:60px;background:url(logo-icone.webp) center/contain no-repeat;opacity:0;pointer-events:none}
.side-nav a{transition:background .2s,color .2s}
.nav-toggle{position:absolute;top:30px;right:-14px;width:28px;height:28px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 4px 14px rgba(50,50,50,.15);display:grid;place-items:center;cursor:pointer;color:var(--accent);font-size:1rem;font-weight:800;font-family:inherit;line-height:1;transition:.2s;z-index:5}
.nav-toggle:hover{background:var(--accent);color:#fff}
body.nav-mini aside{width:88px;padding:24px 16px}
body.nav-mini main{margin-left:calc(88px + 32px)}
body.nav-mini .side-logo img{opacity:0;height:60px}
body.nav-mini .side-logo::after{opacity:1}
body.nav-mini .side-nav a{justify-content:center;padding:12px;font-size:0;gap:0}
body.nav-mini .side-nav a i{width:19px;height:19px}
body.nav-mini .side-support{font-size:0;padding:13px}
body.nav-mini .side-support .isvg{margin-right:0;width:18px;height:18px}
body.nav-mini .side-audit{opacity:0;visibility:hidden;height:0;padding:0;overflow:hidden}
body.nav-mini .side-meta{opacity:0;visibility:hidden;height:0;margin:0;overflow:hidden}
@media(max-width:1080px){.nav-toggle{display:none}}

/* Écrans peu hauts : le menu se compacte pour tenir sans ascenseur */
@media (max-height: 900px){
  aside{padding:20px 20px}
  .side-logo img{height:40px}
  .side-nav{margin-top:18px;gap:2px}
  .side-nav a{padding:8px 12px;font-size:.83rem;gap:11px}
  .side-nav a i{width:17px;height:17px}
  .side-actions{gap:8px;margin-top:10px}
  .side-support{padding:11px 14px;font-size:.82rem}
  .side-audit{padding:9px 14px;font-size:.78rem}
  .side-meta{margin-top:10px;font-size:.85rem;line-height:1.9}
  .side-meta small{display:none}
}

/* SUPPORT FLOTTANT */
.float-support{position:fixed;top:18px;right:18px;z-index:55;background:var(--grad);color:#fff;font-weight:700;padding:13px 22px;border-radius:18px 6px 18px 6px;font-size:.87rem;box-shadow:0 10px 26px rgba(229,79,101,.35);transition:.2s;animation:pulse 2.5s infinite}
.float-support:hover{filter:brightness(1.1);transform:translateY(-2px)}
@media(max-width:1080px){.float-support{display:none}}

/* HERO */
.hero{background:var(--dark);border-radius:44px 12px 44px 12px;margin:16px 28px 0 0;padding:172px 0 64px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
  radial-gradient(60% 80% at 15% 0%,rgba(229,79,101,.35),transparent 60%),
  radial-gradient(50% 70% at 90% 100%,rgba(178,58,114,.3),transparent 65%)}
.hero>.wrap{position:relative}
.hero h1{color:#fff}
.hero p.lead{color:#b9b9c2}
.hero .tagline{color:#ff8fa0}
.hero .hl{background-image:linear-gradient(transparent 60%,rgba(229,79,101,.55) 60%,rgba(229,79,101,.55) 94%,transparent 94%)}
.hero .trust-main{background:rgba(255,255,255,.08)}
.hero .trust-main span{color:#fff}
.hero .trust-main small{color:#a9a9b2}
.hero .t-item{background:rgba(255,255,255,.08);color:#fff}
.hero .btn-glass{background:rgba(255,255,255,.12);color:#fff}
.tagline{display:inline-block;font-size:.85rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
.hero h1{font-size:clamp(2.2rem,4.4vw,3.6rem);font-weight:900;max-width:840px;margin-bottom:20px}
.hero p.lead{color:var(--muted);font-size:1.07rem;max-width:660px;margin-bottom:38px;font-weight:500}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;padding:15px 28px;border-radius:22px 8px 22px 8px;font-weight:700;font-size:.94rem;transition:.25s;border:0;cursor:pointer;font-family:inherit}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 30px rgba(229,79,101,.32)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(229,79,101,.4)}
.btn-glass{background:#f3f2f5;color:var(--ink)}
.btn-glass:hover{background:#fdeef1;color:var(--accent)}

/* TRUST */
.trust{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;margin-top:56px}
.trust-main{background:#fdeef1;border-radius:32px 8px 32px 8px;padding:26px 30px;display:flex;gap:24px;align-items:center}
.trust-main b{font-size:3.2rem;font-weight:900;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;flex:none}
.trust-main span{display:block;font-weight:800;font-size:1.05rem;line-height:1.4}
.trust-main small{color:var(--muted);font-size:.85rem;font-weight:500}
.trust-side{display:grid;gap:14px}
.t-item{background:#f3f2f5;border-radius:22px 6px 22px 6px;padding:14px 22px;font-weight:700;font-size:.95rem;display:flex;align-items:center;gap:10px}
.t-item em{flex:none;white-space:nowrap;font-style:normal;font-weight:900;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* BAND */
.band{padding:0 36px;margin-top:34px}
.band-in{max-width:980px;margin:0 auto;background:var(--grad);border-radius:28px 9px 28px 9px;padding:15px 28px;display:flex;justify-content:center;gap:10px 34px;flex-wrap:wrap;color:#fff;font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 14px 34px rgba(229,79,101,.28)}
.band-in span::before{content:"◆";margin-right:12px;font-size:.5rem;vertical-align:middle;opacity:.6}

/* SERVICES bento (aplats doux, forme feuille) */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.b-card{display:block;background:#f3f2f5;border-radius:36px 8px 36px 8px;padding:32px;transition:.3s;position:relative;overflow:hidden}
.b-card:nth-child(odd){background:#fdeef1}
.b-card:hover{transform:translateY(-5px) scale(1.01)}
.b-card:nth-child(odd):hover{background:#fbe2e8}
.b-card:nth-child(even):hover{background:#ecebef}
.b-card .num{position:absolute;top:20px;right:26px;font-size:2.4rem;font-weight:900;color:rgba(229,79,101,.16);line-height:1}
.b-card:nth-child(even) .num{color:rgba(50,50,50,.1)}
.b-card .ico{width:52px;height:52px;border-radius:18px 6px 18px 6px;background:rgba(229,79,101,.12);display:grid;place-items:center;margin-bottom:18px}
.b-card .ico svg{width:24px;height:24px}
.b-card h3{font-size:1.12rem;margin-bottom:10px}
.b-card p{color:var(--muted);font-size:.91rem;font-weight:500}
.span3{grid-column:span 3}
.span2{grid-column:span 2}
.span6{grid-column:span 6;display:flex;gap:28px;align-items:center}
.span6 .ico{margin-bottom:0;flex:none}
.span6 div h3{margin-bottom:6px}

/* CYBER */
.cyber-panel{background:var(--dark);border-radius:52px 12px 52px 12px;padding:60px 44px;color:#f2f2f4;position:relative;overflow:hidden}
.cyber-panel::before{content:"";position:absolute;inset:0;background:
  radial-gradient(500px 300px at 90% 0%,rgba(229,79,101,.22),transparent 60%),
  radial-gradient(420px 300px at 0% 100%,rgba(178,58,114,.18),transparent 60%)}
.cyber-panel>*{position:relative}
.cyber-panel .sec-title{color:#fff}
.cyber-panel .sec-sub{color:#a9a9b2}
.cyber-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cyb{background:rgba(255,255,255,.09);border-radius:30px 8px 30px 8px;padding:28px;transition:.3s}
.cyb:hover{background:rgba(229,79,101,.16);transform:translateY(-4px)}
.cyb .ico{width:52px;height:52px;border-radius:18px 6px 18px 6px;background:#fff;display:grid;place-items:center;margin-bottom:16px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.cyb .ico svg{width:24px;height:24px}
.cyb h3{color:#fff;font-size:1.07rem;margin-bottom:10px}
.cyb p{color:#a9a9b2;font-size:.89rem;font-weight:500}

/* SLA */
.sla-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.sla-grid ul{list-style:none;display:grid;gap:18px;margin-top:6px}
.sla-grid li{display:flex;gap:16px;color:var(--muted);font-weight:500}
.sla-grid li b{color:var(--ink);font-weight:700}
.check{flex:none;width:26px;height:26px;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:.75rem;margin-top:3px;border-radius:10px 4px 10px 4px;box-shadow:0 6px 14px rgba(229,79,101,.3)}
.panel{background:#fff;border-radius:40px 10px 40px 10px;padding:36px;box-shadow:0 24px 60px rgba(50,50,50,.1)}
.panel h3{margin-bottom:18px;font-size:1.1rem}
.step{display:flex;gap:16px;padding:13px 0;border-top:1px solid var(--line)}
.step:first-of-type{border-top:0}
.step b{flex:none;width:34px;height:34px;border-radius:13px 5px 13px 5px;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.92rem;box-shadow:0 6px 14px rgba(229,79,101,.28)}
.step div span{display:block;font-weight:700;font-size:.93rem}
.step div small{color:var(--muted);font-weight:500}

/* APROPOS */
.apropos-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.founder{margin-bottom:16px}
.founder img{width:100%;max-width:340px;display:block;border-radius:40px 10px 40px 10px;box-shadow:0 24px 60px rgba(50,50,50,.16)}
.founder figcaption{margin-top:12px;font-size:.95rem}
.founder figcaption b{display:block;font-weight:800}
.founder figcaption span{color:var(--muted);font-weight:500;font-size:.82rem}
.apropos p.body{color:var(--muted);margin-bottom:18px;font-weight:500}
.apropos p.body strong{color:var(--ink)}

/* POURQUOI */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.why{background:#f3f2f5;border-radius:32px 8px 32px 8px;padding:30px;transition:.3s}
.why:nth-child(odd){background:#fdeef1}
.why:hover{transform:translateY(-4px)}
.why:nth-child(odd):hover{background:#fbe2e8}
.why:nth-child(even):hover{background:#ecebef}
.why h3{font-size:1.02rem;margin-bottom:8px}
.why h3 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.why p{color:var(--muted);font-size:.91rem;font-weight:500}

/* CLIENTS (banderole) */
.clients{padding:0 0 90px}
.clients .wrap{margin-bottom:34px}
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:16px;width:max-content;animation:defile 60s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.m-item{flex:none;background:#f3f2f5;border-radius:20px 6px 20px 6px;padding:14px 26px;font-weight:700;font-size:.92rem;color:var(--ink);white-space:nowrap;display:flex;align-items:center;gap:10px}
.m-item:nth-child(odd){background:#fdeef1}
.m-item small{color:var(--muted);font-weight:500;font-size:.78rem}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}.marquee{-webkit-mask-image:none;mask-image:none}}

/* FAQ */
.faq details{background:#f3f2f5;border-radius:26px 6px 26px 6px;margin-bottom:14px;overflow:hidden;transition:.25s}
.faq details[open]{background:#fdeef1}
.faq summary{cursor:pointer;padding:21px 24px;font-weight:700;font-size:.96rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:1.5rem;font-weight:400;flex:none}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 24px 21px;color:var(--muted);font-size:.92rem;font-weight:500}
.faq details p a{color:var(--accent);font-weight:700}

/* CONTACT */
.contact-box{background:var(--dark);border-radius:52px 12px 52px 12px;padding:58px 40px;text-align:center;color:#fff;position:relative;overflow:hidden}
.contact-box::before{content:"";position:absolute;inset:0;background:
  radial-gradient(560px 320px at 50% -10%,rgba(229,79,101,.28),transparent 65%)}
.contact-box>*{position:relative}
.contact-box .kicker{background:rgba(229,79,101,.16);border-color:rgba(229,79,101,.4)}
.contact-box h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:16px;color:#fff}
.contact-box>p{color:#a9a9b2;max-width:560px;margin:0 auto 32px;font-weight:500}
.contact-box>p strong{color:#fff}
.contact-box .btn-row{justify-content:center}
.btn-ghostw{border:1px solid rgba(255,255,255,.35);color:#fff;background:rgba(255,255,255,.06);backdrop-filter:blur(10px)}
.btn-ghostw:hover{border-color:var(--accent);color:var(--accent)}
.contact-lines{display:flex;justify-content:center;gap:14px 34px;flex-wrap:wrap;margin-top:34px;color:#a9a9b2;font-size:.89rem;font-weight:500}
.contact-lines a{color:#fff;font-weight:700}
.contact-lines a:hover{color:var(--accent)}
.c-form{max-width:540px;margin:34px auto 0;display:grid;gap:12px;text-align:left}
.c-form input,.c-form textarea,.c-form select{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;padding:14px 18px;border-radius:16px 5px 16px 5px;font-family:inherit;font-size:.92rem;font-weight:500;width:100%;resize:vertical}
.c-form select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e54f65' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:16px}
.c-form select option{background:#323232;color:#fff}
.c-form input::placeholder,.c-form textarea::placeholder{color:#a9a9b2}
.c-form input:focus,.c-form textarea:focus,.c-form select:focus{outline:none;border-color:var(--accent);background-color:rgba(255,255,255,.12)}
.c-form button{justify-self:center;cursor:pointer;border:0;font-family:inherit}
.c-form .form-note{font-size:.76rem;color:#8b8b94;text-align:center;font-weight:500}
.sujet-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;text-align:left}
.s-opt{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:16px 5px 16px 5px;padding:12px 16px;cursor:pointer;font-size:.87rem;font-weight:600;color:#e6e6ea;transition:.2s}
.s-opt svg{width:18px;height:18px;flex:none}
.s-opt input{display:none}
.s-opt:hover{border-color:var(--accent)}
.s-opt:has(input:checked){background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 8px 20px rgba(229,79,101,.3)}
@media(max-width:560px){.sujet-grid{grid-template-columns:1fr}}

/* FOOTER */
footer{padding:20px 0 34px;color:var(--muted);font-size:.83rem;font-weight:500}
.foot-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--line);padding-top:28px}
.foot-tag{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;letter-spacing:.04em}
footer a:hover{color:var(--accent)}

/* COOKIES */
.cookies{position:fixed;left:calc(var(--rail) + 48px);right:16px;bottom:16px;z-index:100;background:rgba(255,255,255,.85);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:18px;padding:18px 22px;display:none;gap:16px;align-items:center;flex-wrap:wrap;box-shadow:0 16px 48px rgba(50,50,50,.18)}
.cookies.show{display:flex}
.cookies p{flex:1;min-width:240px;font-size:.85rem;color:var(--muted);margin:0;font-weight:500}
.cookies p b{color:var(--ink)}
.cookies .btn-c{padding:10px 18px;border-radius:14px 5px 14px 5px;font-weight:700;font-size:.83rem;cursor:pointer;border:0;font-family:inherit;transition:.2s}
.cookies .accept{background:var(--grad);color:#fff}
.cookies .accept:hover{filter:brightness(1.1)}
.cookies .refuse{background:none;border:1px solid var(--line);color:var(--muted)}
.cookies .refuse:hover{color:var(--ink);border-color:var(--muted)}

/* MODALE CGV */
.cgv-modal{position:fixed;inset:0;z-index:200;background:rgba(20,20,22,.7);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:24px}
.cgv-modal.open{display:flex}
.cgv-box{background:#fff;border-radius:24px 8px 24px 8px;width:min(900px,100%);height:min(85vh,900px);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.cgv-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line)}
.cgv-head b{font-size:.95rem}
.cgv-head .cgv-dl{font-size:.8rem;font-weight:700;color:var(--accent)}
.cgv-head .cgv-dl:hover{text-decoration:underline}
.cgv-close{background:#fdeef1;color:var(--accent);border:0;width:36px;height:36px;border-radius:12px 4px 12px 4px;font-size:1.1rem;font-weight:800;cursor:pointer;transition:.2s}
.cgv-close:hover{background:var(--accent);color:#fff}
.cgv-box iframe{flex:1;border:0;width:100%}

/* RETOUR EN HAUT */
.to-top{position:fixed;bottom:20px;right:20px;z-index:55;width:46px;height:46px;border-radius:16px 5px 16px 5px;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border:1px solid var(--line);box-shadow:0 10px 26px rgba(50,50,50,.14);display:grid;place-items:center;color:var(--accent);font-size:1.15rem;font-weight:800;cursor:pointer;opacity:0;pointer-events:none;transition:.3s}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{background:var(--accent);color:#fff}

/* SCROLL REVEAL */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.side-support,.float-support{animation:none}}

/* RESPONSIVE */
@media(max-width:1080px){
  aside{display:none}
  main{margin-left:0;padding-top:88px;padding-bottom:92px}
  section{scroll-margin-top:84px}
  .cookies{left:16px;bottom:84px}
  .to-top{bottom:88px}
  .bottom-nav{display:flex;position:fixed;bottom:calc(10px + env(safe-area-inset-bottom));left:10px;right:10px;z-index:70;background:transparent;transform:translateZ(0);border:1px solid var(--line);border-radius:22px 8px 22px 8px;box-shadow:0 12px 32px rgba(50,50,50,.14);justify-content:space-around;padding:8px 4px}
  .bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.6rem;font-weight:700;color:var(--muted);padding:4px 10px;border-radius:12px;letter-spacing:.02em}
  .bottom-nav a svg{width:20px;height:20px}
  .bottom-nav a.bn-active{color:var(--accent)}
  .mobile-bar{display:flex;position:fixed;top:10px;left:10px;right:10px;z-index:60;background:transparent;transform:translateZ(0);border:1px solid var(--line);border-radius:22px 8px 22px 8px;box-shadow:0 12px 32px rgba(50,50,50,.14);align-items:center;justify-content:space-between;padding:12px 18px}
  .mobile-bar img{height:40px}
  .mobile-bar .mb-right{display:flex;gap:10px;align-items:center}
  .mobile-bar .side-support{padding:9px 14px;font-size:.8rem;animation:none;border-radius:14px 5px 14px 5px}
  .burger{background:none;border:0;cursor:pointer;padding:6px 2px;display:block;font-size:0;line-height:0;color:transparent}
  .burger::before{content:"";display:block;width:25px;height:25px;background:var(--ink);transition:.2s;-webkit-mask:var(--mb) center/contain no-repeat;mask:var(--mb) center/contain no-repeat;--mb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E")}
  .burger.x::before{background:var(--accent);--mb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
  .mobile-menu{position:fixed;top:84px;max-height:calc(100dvh - 190px);overflow-y:auto;left:12px;right:12px;background:rgba(255,255,255,.96);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:26px 9px 26px 9px;flex-direction:column;padding:20px 24px;gap:13px;z-index:60;font-weight:600;box-shadow:0 16px 40px rgba(50,50,50,.14)}
  .mobile-menu.open{display:flex}
  .mobile-menu a{display:flex;align-items:center;gap:12px}
  .mobile-menu .mm-cta{background:var(--grad);color:#fff;justify-content:center;text-align:center;padding:13px;border-radius:16px 6px 16px 6px;font-weight:700}
  .mobile-menu .mm-meta{border-top:1px solid var(--line);padding-top:14px;font-size:.95rem;font-weight:700;line-height:2}
  .mobile-menu .mm-meta small{display:block;color:var(--muted);font-weight:500;font-size:.75rem;line-height:1.6}
}
@media(max-width:900px){
  .trust{grid-template-columns:1fr}
  .trust-main{flex-direction:column;align-items:flex-start;gap:10px}
  .span3,.span2,.span6{grid-column:span 6}
  .span6{flex-direction:column;align-items:flex-start;gap:16px}
  .cyber-grid{grid-template-columns:1fr}
  .sla-grid,.apropos-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  section{padding:64px 0}
  .hero{padding:70px 0 56px}
  .wrap{padding:0 24px}
  .band{padding:0 24px}
  .cyber-panel{padding:46px 26px}
}


/* Survol des cartes */
@media(hover:hover){
.b-card:hover,.why:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(50,50,50,.12)}
.cyb:hover{transform:translateY(-5px);background:rgba(255,255,255,.14)}
}

/* Surligneur rose sur mots-clés */
.hl{background-image:linear-gradient(transparent 60%,rgba(229,79,101,.24) 60%,rgba(229,79,101,.24) 94%,transparent 94%)}
.cyber-panel .hl{background-image:linear-gradient(transparent 60%,rgba(229,79,101,.5) 60%,rgba(229,79,101,.5) 94%,transparent 94%)}

/* Flèche animée sur les boutons principaux */
.btn-primary::after,.side-audit::after{content:"\2192";display:inline-block;opacity:0;margin-left:0;transform:translateX(-8px);transition:.25s}
.btn-primary:hover::after,.side-audit:hover::after{opacity:1;margin-left:9px;transform:none}


/* Cascade : les cartes d'une grille apparaissent en léger décalé */
.reveal:nth-child(2){transition-delay:.08s}
.reveal:nth-child(3){transition-delay:.16s}
.reveal:nth-child(4){transition-delay:.24s}
.reveal:nth-child(5){transition-delay:.32s}
.reveal:nth-child(6){transition-delay:.4s}

/* Transitions douces entre les pages (navigateurs récents, sans effet ailleurs) */
@view-transition{navigation:auto}
aside{view-transition-name:sidebar}
::view-transition-old(root){animation-duration:.22s}
::view-transition-new(root){animation-duration:.22s}


/* Densité écrans de bureau standards (24" 1080p) : les sections clés tiennent à l'écran */
@media(min-width:1081px) and (max-height:1160px){
  section{padding:56px 0}
  .hero{padding:172px 0 48px}
  .sec-sub{margin-bottom:36px}
  .cyber-panel{padding:44px 40px}
  .cyb{padding:24px}
  .cyb .ico,.b-card .ico{width:46px;height:46px;margin-bottom:12px}
  .contact-box{padding:38px 40px}
  .contact-box>p{margin-bottom:20px}
  .c-form{margin-top:20px;gap:9px}
  .c-form input,.c-form textarea{padding:11px 16px}
  .c-form textarea{min-height:74px}
  .contact-lines{margin-top:22px}
  .founder img{max-width:250px}
  .founder{margin-bottom:12px}
  .panel{padding:24px 28px}
  .step{padding:10px 0}
  .apropos p.body{margin-bottom:13px;font-size:.95rem}
  .apropos-grid{gap:36px}
}


/* Bande de valeurs : alignement propre en 2 colonnes sur mobile */
@media(max-width:680px){
  .band-in{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;gap:12px 26px;padding:18px 22px;text-align:left}
  .band-in span::before,.band-in span:first-child::before{content:"◆";margin-right:10px;font-size:.5rem;vertical-align:middle;opacity:.6}
  .band-in span:last-child{grid-column:1/-1;text-align:left}
}


/* Intro accueil : le S s'allume, le logo se révèle (une fois par session) */
.intro{position:fixed;inset:0;z-index:200;background:#fbfafc;display:grid;place-items:center;transition:opacity .5s ease,visibility .5s}
.intro.fin{opacity:0;visibility:hidden}
.intro.voile{background:transparent;pointer-events:none}
.intro-in{position:relative;display:grid;place-items:center;min-height:160px}
.intro-s{width:132px;opacity:0;transform:scale(.5);animation:introS .6s cubic-bezier(.34,1.56,.64,1) .1s forwards}

@keyframes introS{to{opacity:1;transform:scale(1)}}
body.intro-active{overflow:hidden}
@media(prefers-reduced-motion:reduce){.intro{display:none}}


/* État réduit appliqué avant le premier rendu : aucune animation au chargement */
body.nav-noanim aside,body.nav-noanim main,body.nav-noanim .side-logo img,body.nav-noanim .side-logo::after,body.nav-noanim .side-nav a,body.nav-noanim .side-support,body.nav-noanim .side-audit,body.nav-noanim .side-meta{transition:none!important}


@media(max-width:1080px){
  .hero{margin:8px 12px 0;border-radius:32px 10px 32px 10px}
}


/* Logo complet intégré dans la bande sombre de l'accueil */
.hero-logo{position:absolute;top:42px;left:46px;width:min(34vw,300px);max-width:none;pointer-events:none;filter:drop-shadow(0 10px 24px rgba(0,0,0,.3))}
@media(max-width:1080px){
  .hero-logo{width:min(56vw,250px);top:36px;left:26px}
  .hero{padding:132px 0 46px}
}
.side-logo{display:none}
.side-nav{margin-top:10px}
.page-logo{display:block;padding:58px 0 0 46px}
.page-logo~section:first-of-type{padding-top:46px}

.page-logo img{width:230px;display:block}
@media(max-width:1080px){.page-logo{display:none}}


/* Slogan séparé du logo, lisible, sous le wordmark du hero */
.hero-slogan{position:absolute;top:122px;left:50px;font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#ff8fa0}
.hero-slogan strong{color:#fff}
@media(max-width:1080px){.hero-slogan{top:96px;left:28px;font-size:.68rem}}


/* Le monogramme S en filigrane dans le hero */
.hero-s{position:absolute;right:-50px;bottom:-70px;width:min(30vw,400px);max-width:none;filter:brightness(0) invert(1);opacity:.07;pointer-events:none}
@media(max-width:1080px){.hero-s{width:220px;right:-40px;bottom:-50px}}


/* Fonds assortis aux variantes du logo (guideline) */
body.fond-rose{--paper:#fdf3f5}
body.fond-gris{--paper:#f4f4f6}

/* Ecrans peu hauts : les panneaux a theme (cyber, contact, assistance) tiennent entiers a l'ecran */
@media(min-width:1081px) and (max-height:1000px){
  .page-logo{padding:26px 0 0 46px}
  .page-logo~section:first-of-type{padding-top:26px}
  section{padding:44px 0}
  .cyber-panel{padding:36px 40px}
  .cyb p{font-size:.88rem;line-height:1.55}
  .contact-box{padding:26px 40px}
  .contact-box>p{max-width:640px;margin-bottom:14px}
  .c-form{margin-top:12px;gap:6px}
  .c-form input,.c-form textarea{padding:8px 16px}
  .c-form textarea{min-height:58px}
  .contact-lines{margin-top:14px;gap:8px 30px;font-size:.84rem}
  .contact-box .sec-title{font-size:2.1rem;margin-bottom:12px}
  .contact-box .kicker{margin-bottom:12px}
  .c-form textarea{min-height:52px}
  .panel{padding:20px 28px}
}

/* Banniere reduite : coordonnees et audit en icones avec infobulle */
.side-mini-info{display:none}
body.nav-mini .side-mini-info{display:flex;flex-direction:column;gap:8px;align-items:center}
.side-mini-info a{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:15px 5px 15px 5px;background:#fdeef1;border:1px solid rgba(229,79,101,.18);transition:.15s}
.side-mini-info a svg{width:19px;height:19px;stroke:var(--accent)}
.side-mini-info a:hover{background:var(--accent);border-color:var(--accent)}
.side-mini-info a:hover svg{stroke:#fff}
.side-mini-info a::after{content:attr(data-tip);position:absolute;left:calc(100% + 16px);top:50%;transform:translateY(-50%);background:var(--dark);color:#fff;font-size:.78rem;font-weight:600;padding:7px 14px;border-radius:12px 4px 12px 4px;white-space:nowrap;opacity:0;pointer-events:none;transition:.15s;z-index:60}
.side-mini-info a:hover::after{opacity:1}
@media(max-width:1080px){.side-mini-info{display:none!important}}

/* Accueil mobile : numero + horaire a gauche de la barre */
@media(max-width:1080px){
  .mb-info{display:flex;flex-direction:column;line-height:1.3;text-decoration:none}
  .mb-info b{font-size:.95rem;font-weight:800;color:var(--ink)}
  .mb-info small{font-size:.66rem;font-weight:600;color:#5a5a61;letter-spacing:.02em}
}

/* Barres mobiles cameleon : quasi transparentes, texte blanc au-dessus des zones sombres */
@media(max-width:1080px){
  .mobile-bar::before,.bottom-nav::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;background:rgba(255,255,255,.14);backdrop-filter:blur(20px) saturate(1.25);-webkit-backdrop-filter:blur(20px) saturate(1.25);transition:background .3s}
  .mobile-bar.sur-sombre,.bottom-nav.sur-sombre{border-color:rgba(255,255,255,.22)}
  .mobile-bar.sur-sombre::before,.bottom-nav.sur-sombre::before{background:rgba(35,35,40,.28)}
  .bottom-nav.sur-sombre a{color:#fff}
  .bottom-nav.sur-sombre a.bn-active{color:#ff8fa0}
  .mobile-bar.sur-sombre .mb-info b{color:#fff}
  .mobile-bar.sur-sombre .mb-info small{color:rgba(255,255,255,.78)}
  .mobile-bar.sur-sombre .burger::before{background:#fff}
  .mobile-bar.sur-sombre>a>img{filter:drop-shadow(0 0 4px rgba(255,255,255,.9))}
}

/* Micro-interactions : cartes qui s'elevent, icones qui s'allument */
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .b-card,.cyb{transition:transform .25s ease,box-shadow .25s ease}
  .b-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(50,50,50,.13)}
  .cyb:hover{transform:translateY(-5px);box-shadow:0 18px 36px rgba(0,0,0,.35)}
  .b-card .ico,.cyb .ico{transition:background .25s ease}
  .b-card .ico svg,.cyb .ico svg{transition:stroke .25s ease}
  .b-card:hover .ico,.cyb:hover .ico{background:var(--grad)}
  .b-card:hover .ico svg,.cyb:hover .ico svg{stroke:#fff}
}

/* Menu burger : pictogrammes SVG au lieu des emojis */
@media(max-width:1080px){
  .mm-line{white-space:nowrap;display:inline-flex;align-items:center;gap:7px;margin-right:16px}
  .mm-meta a{display:inline;padding:0}
  .mm-meta svg{width:14px;height:14px;flex:none}
}