:root{
/* ---- palette epuree : sombre par defaut, un seul accent ---- */
--bg: #08080a;
--bg-soft: #08080a;
--surface: #0f0f13;
--surface-2: #16161c;
--border: rgba(255,255,255,0.075);
--border-strong: rgba(255,255,255,0.14);
--text: #f4f4f7;
--text-dim: #a2a2ae;
--text-mute: #6d6d7a;
--purple: #9b2fe0;
--purple-deep: #c9a8ff;
--accent: #8b3ff0;
--accent-soft: #c2a0ff;
--link-accent: #c2a0ff;
--msg-ok: #c2a0ff;
--msg-ko: #f0a2a2;
--blue: #9b2fe0;
--green: #9b2fe0;
--lime: #9b2fe0;
/* ---- pictogrammes : quatre teintes prises sur le degrade de marque ----
violet #47039c (Violet C) · bleu #04acff (306 C) · vert #05ca5c (7479 C)
et l'indigo median violet-bleu. Sur fond sombre elles sont assez
lumineuses pour se detacher ; --cN-rgb teinte la pastille, --cN-ink
colore le trait du picto. */
--grad-marque:linear-gradient(90deg,#a06cf5 0%,#04acff 52%,#05ca5c 100%);
--c1-rgb:154,108,245; --c1-ink:#a06cf5;
--c2-rgb:4,172,255; --c2-ink:#04acff;
--c3-rgb:5,202,92; --c3-ink:#05ca5c;
--c4-rgb:90,139,240; --c4-ink:#5a8bf0;
--grad: linear-gradient(90deg, #8b3ff0 0%, #9b2fe0 100%);
--grad-action: linear-gradient(90deg, #7b2fd8 0%, #9b2fe0 100%);
--btn-click: #f4f4f7;
--grad-soft: linear-gradient(135deg, rgba(155,47,224,0.16), rgba(155,47,224,0.06));
--radius-lg: 20px;
--radius-md: 14px;
--radius-sm: 10px;
--font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
--font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
'Liberation Mono', 'Courier New', monospace;
--sec-gap: clamp(88px, 10vw, 152px);
/* logos des technologies : lisibles sur fond sombre (theme par defaut) */
--logo-ink:#f1f1f6; --logo-paper:#0b0b0f; --logo-rim:rgba(255,255,255,.9);
--logo-win:#3fa4ff; --logo-k8s:#5b8def; --logo-pg:#7fb2e0;
--logo-tux:#23232b; --logo-tuxb:#ffc23d;
}
*{box-sizing:border-box; margin:0; padding:0;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
html[dir="rtl"] body{font-family:'Cairo', 'Inter', 'Helvetica Neue', Arial, sans-serif;}
html[dir="rtl"] .price-feat{direction:rtl;}
html[lang="tz"] body{font-family:'Noto Sans Tifinagh', 'Inter', sans-serif;}
body{
background:var(--bg);
color:var(--text);
font-family:var(--font-main);
font-size:16.5px;
line-height:1.68;
-webkit-font-smoothing:antialiased;
overflow-x:clip;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 40px;}
section{position:relative;}
.eyebrow{display:inline-flex; align-items:center; gap:10px; padding:0; border:none; background:none; font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--text-mute); font-family:var(--font-display);}
.eyebrow .dot{display:none;}
.hero-h1{font-size:clamp(34px,5.4vw,64px); line-height:1.08; max-width:16ch; margin-bottom:22px;}
.hero-claim{font-size:clamp(17px,1.9vw,23px); line-height:1.5; color:var(--text); font-weight:600; max-width:44ch; margin-bottom:14px;}
.hero-claim2{font-size:clamp(15px,1.55vw,18px); line-height:1.6; color:var(--text-dim); max-width:52ch; margin-bottom:30px;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; letter-spacing:-0.03em; line-height:1.08;}
.grad-text{
background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.flag-dz{display:inline-block; width:18px; height:13px; border-radius:3px; overflow:hidden; vertical-align:middle; margin-inline-start:6px; box-shadow:0 0 0 1px var(--border-strong); flex:none;}
.flag-dz svg{display:block; width:100%; height:100%;}
.btn{display:inline-flex; align-items:center; gap:9px; padding:14px 28px; border-radius:999px; font-size:14.5px; font-weight:600; border:1px solid transparent; cursor:pointer; transition:background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease; white-space:nowrap;}
.btn:hover{transform:none; opacity:.92;}
/* dégradé réservé aux actions décisives : lancement d'instance, connexion au portail */
.btn-primary{background:var(--accent); color:#fff; border-color:transparent; box-shadow:none;}
.btn-primary:hover{background:var(--purple); box-shadow:none;}
.btn-primary:active{background:#6f28c4; transform:none; box-shadow:none;}
.btn-ghost{background:rgba(17,12,22,0.035); color:var(--text); border-color:var(--border-strong);}
.btn-ghost:hover{background:rgba(31,23,40,0.06); border-color:rgba(31,23,40,0.45); color:var(--btn-click);}
.btn-ghost:active.btn-ghost.is-active{background:var(--btn-click); border-color:var(--btn-click); color:#ffffff;
box-shadow:0 5px 16px -6px rgba(31,23,40,0.5);}
.btn:focus-visible{outline:2px solid var(--btn-click); outline-offset:2px;}
.btn-sm{padding:10px 20px; font-size:13.5px; border-radius:999px;}
header{
position:sticky; position:-webkit-sticky; top:0; z-index:200; isolation:isolate;
background:rgba(255,255,255,0.78); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
border-bottom:1px solid var(--border);
}
header > .wrap > nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.logo{display:flex; align-items:center; gap:9px;}
.logo img{height:26px; width:auto;}
.logo .logo-icon{height:26px; width:26px; border-radius:7px;}
.navlinks{display:flex; align-items:center; gap:28px;}
.navlinks a{font-size:14.5px; color:var(--text-dim); font-weight:500; display:flex; align-items:center; gap:4px;}
.navlinks a:hover{color:var(--text);}
.navright{display:flex; align-items:center; gap:12px;}
.langdrop{position:relative; display:flex; align-items:center;}
.langdrop-toggle{display:flex; align-items:center; gap:6px; background:none; border:1px solid var(--border); border-radius:999px; color:var(--text-dim); font-size:12.5px; font-weight:400; padding:7px 14px; cursor:pointer; transition:color .16s ease, border-color .16s ease; font-family:inherit; white-space:nowrap;}
.langdrop-toggle:hover, .langdrop.force-open .langdrop-toggle{border-color:var(--text-mute); color:var(--text);}
.langdrop-toggle svg{width:11px; height:11px; transition:transform .18s ease; flex:none;}
.langdrop.force-open .langdrop-toggle svg{transform:rotate(180deg);}
.langdrop-current[lang="tz"]{font-family:'Noto Sans Tifinagh', sans-serif; font-size:14px;}
.langdrop-menu{
position:absolute; top:100%; right:0; margin-top:10px; background:var(--surface); border:1px solid var(--border-strong);
border-radius:14px; padding:6px; min-width:198px; box-shadow:0 24px 60px -20px rgba(0,0,0,.3);
opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .16s ease, transform .16s ease, visibility .16s; z-index:60;
}
[dir="rtl"] .langdrop-menu{right:auto; left:0;}
.langdrop.force-open .langdrop-menu{opacity:1; visibility:visible; transform:translateY(0);}
.langdrop-menu button{
display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left;
background:none; border:none; color:var(--text-dim); font-size:13.5px; font-weight:400; font-family:inherit;
padding:9px 11px; border-radius:10px; cursor:pointer; white-space:nowrap;
}
[dir="rtl"] .langdrop-menu button{text-align:right;}
.langdrop-menu button:hover{background:var(--bg-soft); color:var(--text);}
.langdrop-menu button.active{color:var(--text); background:var(--bg-soft);}
.langdrop-menu button.active::after{content:"✓"; color:#4c1887; font-weight:800;}
.langdrop-menu button[data-lang="tz"]{font-family:'Noto Sans Tifinagh', sans-serif;}
@media (max-width:1180px){ .langdrop-toggle{padding:6px 9px; font-size:11.5px;} }
.navmobile-btn{display:none; background:none; border:none; color:var(--text); font-size:22px; cursor:pointer;}
.navdrop{position:relative; display:flex; align-items:center;}
.navdrop-label{display:flex; align-items:center; gap:4px; padding:8px 10px; border-radius:999px; transition:background .15s ease;}
.navdrop-label a{font-size:14.5px; color:var(--text-dim); font-weight:500;}
.navdrop:hover .navdrop-label, .navdrop:focus-within .navdrop-label, .navdrop.force-open .navdrop-label{background:rgba(17,12,22,0.05);}
.navdrop:hover .navdrop-label a, .navdrop:focus-within .navdrop-label a, .navdrop.force-open .navdrop-label a{color:var(--text);}
.navdrop-toggle{background:none; border:none; color:var(--text-mute); cursor:pointer; padding:2px; line-height:1; display:flex; align-items:center;}
.navdrop-toggle svg{width:12px; height:12px; transition:transform .18s ease;}
.navdrop:hover .navdrop-toggle svg, .navdrop:focus-within .navdrop-toggle svg, .navdrop.force-open .navdrop-toggle svg{transform:rotate(180deg); color:var(--text);}
.navdrop-menu{
position:absolute; top:100%; left:0; margin-top:10px; background:var(--surface); border:1px solid var(--border-strong);
border-radius:14px; padding:10px; min-width:260px; box-shadow:0 24px 60px -20px rgba(0,0,0,.3);
opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .16s ease, transform .16s ease, visibility .16s; z-index:60;
}
[dir="rtl"] .navdrop-menu{left:auto; right:0;}
.navdrop:hover .navdrop-menu, .navdrop:focus-within .navdrop-menu, .navdrop.force-open .navdrop-menu{opacity:1; visibility:visible; transform:translateY(0);}
.navdrop-menu-head{display:block; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--text-mute); padding:4px 12px 8px;}
.navdrop-menu a{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; font-size:13.5px; color:var(--text-dim); white-space:nowrap;}
.navdrop-menu a:hover{background:var(--bg-soft); color:var(--text);}
.navdrop-menu.wide{min-width:460px; display:grid; grid-template-columns:1fr 1fr; gap:2px 4px;}
.navdrop-menu.wide .navdrop-menu-head{grid-column:1 / -1;}
.nd-ic{width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex:none;}
.nd-ic svg{width:14px; height:14px;}
.nd-ic{box-shadow:inset 0 1px 0 rgba(255,255,255,0.7);}
.nd-ic svg{width:16px; height:16px;}
.nd-ic.c-purple{background:linear-gradient(150deg,rgba(var(--c1-rgb),.22),rgba(var(--c1-rgb),.11));} .nd-ic.c-purple svg{color:var(--c1-ink);}
.nd-ic.c-blue{background:linear-gradient(150deg,rgba(var(--c2-rgb),.22),rgba(var(--c2-rgb),.11));} .nd-ic.c-blue svg{color:var(--c2-ink);}
.nd-ic.c-green{background:linear-gradient(150deg,rgba(var(--c3-rgb),.22),rgba(var(--c3-rgb),.11));} .nd-ic.c-green svg{color:var(--c3-ink);}
.nd-ic.c-lime{background:linear-gradient(150deg,rgba(var(--c4-rgb),.22),rgba(var(--c4-rgb),.11));} .nd-ic.c-lime svg{color:var(--c4-ink);}
.social-rail{
position:fixed; left:22px; top:50%; transform:translateY(-50%); z-index:45;
display:flex; flex-direction:column; align-items:center; gap:10px;
padding:16px 11px; border-radius:999px;
background:rgba(255,255,255,0.75); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
border:1px solid var(--border-strong); box-shadow:0 20px 50px -20px rgba(34,24,46,0.28);
}
[dir="rtl"] .social-rail{left:auto; right:22px;}
.social-rail-label{writing-mode:vertical-rl; transform:rotate(180deg); font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-mute);}
[dir="rtl"] .social-rail-label{transform:rotate(0deg);}
.social-rail-line{width:16px; height:1px; background:var(--border-strong);}
.social-rail-btn{
width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
border:1px solid transparent; transition:all .2s ease;
}
.social-rail-btn svg{width:16px; height:16px;}
.social-rail-btn{cursor:pointer; padding:0;}
.social-rail-btn.mailto{background:var(--grad-soft); color:var(--purple-deep); border-color:rgba(131,72,199,0.28);}
.social-rail-btn.mailto:hover{background:var(--btn-click); border-color:var(--btn-click); color:#ffffff;}
.social-rail-btn.linkedin{background:rgba(10,102,194,0.12); color:#0A66C2; border-color:rgba(10,102,194,0.22);}
.social-rail-btn.facebook{background:rgba(24,119,242,0.12); color:#1877F2; border-color:rgba(24,119,242,0.22);}
.social-rail-btn.tiktok{background:rgba(1,1,1,0.08); color:#010101; border-color:rgba(1,1,1,0.18);}
.social-rail-btn:hover{transform:translateY(-2px) scale(1.07); color:#ffffff;}
.social-rail-btn.linkedin:hover{background:#0A66C2; border-color:#0A66C2;}
.social-rail-btn.facebook:hover{background:#1877F2; border-color:#1877F2;}
.social-rail-btn.tiktok:hover{background:#010101; border-color:#010101;}
@media (max-width:1180px){ .social-rail{display:none;} }
.hero{padding:90px 0 50px; position:relative;}
html:not([data-theme="light"]) .hero::before{opacity:.22;}
.hero::before{
content:""; position:absolute; top:-200px; left:50%; transform:translateX(-50%);
width:1100px; height:600px; background:var(--grad-soft); filter:blur(80px); opacity:.55; z-index:0;
}
.hero-inner{position:relative; z-index:1; text-align:center; max-width:900px; margin:0 auto;}
.hero h1{font-size:clamp(36px,5.2vw,60px); margin:24px 0 20px;}
.hero p.lead{font-size:18.5px; color:var(--text-dim); max-width:680px; margin:0 auto 34px;}
.hero-lead-list{list-style:none; margin:0; padding:0; text-align:start; display:flex; flex-direction:column; gap:6px;}
.hero-lead-list li{
display:flex; align-items:flex-start; gap:12px; font-size:17px; color:var(--text-dim); line-height:1.45;
padding:12px 16px; border-radius:12px; background:var(--surface); border:1px solid var(--border);
box-shadow:0 10px 26px -18px rgba(34,24,46,0.18);
opacity:0; transform:translateX(-16px); animation:heroLeadIn .6s cubic-bezier(.16,.9,.35,1) forwards;
}
[dir="rtl"] .hero-lead-list li{transform:translateX(16px);}
.hero-lead-list li:nth-child(1){animation-delay:.05s;}
.hero-lead-list li:nth-child(2){animation-delay:.22s;}
.hero-lead-list li:nth-child(3){animation-delay:.39s;}
.hero-lead-list li:nth-child(4){animation-delay:.56s;}
.hero-lead-list li:hover{border-color:var(--text-mute); transform:translateX(0) translateY(-2px); box-shadow:0 16px 34px -18px rgba(34,24,46,0.28);}
.hero-lead-ic{flex:none; width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center;
margin-top:0; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
box-shadow:inset 0 1px 0 rgba(255,255,255,.30), 0 8px 18px -10px rgba(0,0,0,.7);
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}
.hero-lead-ic svg{width:19px; height:19px; display:block;}
.hero-lead-ic .duo-b{fill:currentColor; opacity:.42;}
.hero-lead-ic .duo-f{fill:currentColor;}
.hero-lead-ic .duo-w{fill:#100d14;}
.hero-lead-ic.c-purple{color:var(--c1-ink);} .hero-lead-ic.c-blue{color:var(--c2-ink);}
.hero-lead-ic.c-green{color:var(--c3-ink);} .hero-lead-ic.c-lime{color:var(--c4-ink);}
.hero-lead-list li span{color:var(--text); font-weight:600;}
@keyframes heroLeadIn{ to{ opacity:1; transform:translateX(0); } }
@media (prefers-reduced-motion:reduce){ .hero-lead-list li{animation:none; opacity:1; transform:none;} }
.hero-ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:40px;}
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:900px; margin:0 auto; text-align:start;}
.trust-card{background:none; border:none; box-shadow:none; display:flex; align-items:center; gap:14px; padding:0; border-radius:0;}
.trust-card .feat-ic{width:46px; height:46px; margin-bottom:0; flex:none;}
.trust-card .feat-ic svg{width:22px; height:22px;}
.iso-badge{width:46px; height:46px; flex:none; border-radius:8px; background:#fff; border:none; display:flex; align-items:center; justify-content:center; padding:4px; box-shadow:none;}
.iso-badge img{width:100%; height:100%; object-fit:contain; display:block;}
.trust-card span{font-size:14px; font-weight:700; color:var(--text); line-height:1.3;}
.ic-purple{color:var(--c1-ink);} .ic-blue{color:var(--c2-ink);} .ic-green{color:var(--c3-ink);} .ic-lime{color:var(--c4-ink);}
/* ===== BANNIÈRE NEOCLOUD ===== */
.neo-banner{position:relative; width:100%; min-height:100svh; overflow:hidden; background:#110d16; display:flex;}
.neo-bg{position:absolute; inset:0; display:grid; grid-template-columns:1.05fr 1fr;}
.neo-bg img{width:100%; height:100%; object-fit:cover; display:block;}
.neo-bg-a{object-position:50% 45%; transform-origin:60% 45%; animation:kenburns 26s ease-in-out infinite;}
.neo-bg-b{object-position:50% 38%;
-webkit-mask-image:linear-gradient(90deg, transparent 0%, #000000 26%);
mask-image:linear-gradient(90deg, transparent 0%, #000000 26%);}
.neo-banner-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,7,13,0.74) 0%, rgba(10,7,13,0.55) 42%, rgba(10,7,13,0.88) 100%);}
.neo-banner-content{position:relative; z-index:2; width:100%; max-width:1320px; margin:0 auto;
display:flex; flex-direction:column; align-items:center; padding:34px 34px 56px;}
.neo-banner-main{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:16px;}
.neo-banner-content .hero-lead-list{max-width:820px; margin-top:8px; text-align:start;}
.neo-banner-content .hero-lead-list li{background:transparent; border:none; box-shadow:none; padding:3px 0; font-size:clamp(14px,1.45vw,16.5px); line-height:1.35; color:#ffffff;}
.neo-banner-content .hero-lead-list li:hover{transform:none; box-shadow:none; border:none;}
.neo-banner-content .hero-lead-list li span{color:#ffffff; font-weight:500; text-shadow:0 2px 14px rgba(0,0,0,0.65);}
.neo-banner-content .hero-lead-list li{align-items:center; gap:12px;}
@media (max-width:820px){
.neo-bg{grid-template-columns:1fr;}
.neo-bg-b{display:none;}
.neo-banner-content{padding:92px 20px 44px; gap:13px;}
}
.neo-logo{width:min(88vw,760px); display:block; filter:drop-shadow(0 8px 44px rgba(0,0,0,0.6)); animation:neoIn .9s cubic-bezier(.16,.9,.35,1) backwards;}
.neo-logo .oc-svg-logo{width:100%; height:auto; display:block;}
@keyframes neoIn{ from{opacity:0; transform:translateY(26px) scale(.94);} to{opacity:1; transform:none;} }
@media (prefers-reduced-motion:reduce){ .neo-logo{animation:none;} }
.neo-banner-sub{
/* l'accroche est le de l'accueil : on fige la marge d'un paragraphe
pour que le passage de
a
ne deplace rien */
margin:1em 0;
font-family:'Inter',system-ui,sans-serif;
font-size:clamp(17px,2.05vw,27px); color:#ffffff; max-width:36ch; line-height:1.4;
text-shadow:0 4px 26px rgba(0,0,0,0.8); font-weight:700; letter-spacing:-0.02em;
}
@media (max-width:640px){ .neo-banner-sub{font-size:17px; max-width:26ch; line-height:1.45;} }
@keyframes kenburns{
0%{transform:scale(1) translate3d(0,0,0);}
50%{transform:scale(1.09) translate3d(-1.2%,-1%,0);}
100%{transform:scale(1) translate3d(0,0,0);}
}
@media (prefers-reduced-motion: reduce){ .neo-bg-a{animation:none;} }
.neo-brand{font-weight:800;}
.neo-brand .nb-o{color:#ffffff;}
.neo-brand .nb-c{background:linear-gradient(90deg,#8348c7,#7b27dc 45%,#7e52b1 78%,#7237b6); -webkit-background-clip:text; background-clip:text; color:transparent;}
/* ===== BANDES PHOTO PLEINE LARGEUR ===== */
.photo-band{position:relative; width:100%; overflow:hidden; background:#110d16; min-height:clamp(420px,52vh,560px); display:flex; align-items:center;}
.photo-band.slim{min-height:clamp(240px,30vh,340px);}
.photo-band>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.photo-band>img.focus-face{object-position:50% 22%;}
.photo-band-overlay{position:absolute; inset:0; background:linear-gradient(100deg, rgba(10,7,13,0.86) 0%, rgba(10,7,13,0.62) 46%, rgba(10,7,13,0.30) 100%);}
.photo-band.slim .photo-band-overlay{background:linear-gradient(180deg, rgba(10,7,13,0.55), rgba(10,7,13,0.72));}
.photo-band-content{position:relative; z-index:2; width:100%; max-width:1240px; margin:0 auto; padding:56px 32px;}
.photo-band .hero-lead-list{max-width:660px;}
.photo-band .hero-lead-list li{background:transparent; border:none; box-shadow:none; padding:9px 0; font-size:clamp(15px,1.7vw,19px); color:#ffffff;}
.photo-band .hero-lead-list li:hover{transform:none; box-shadow:none; border:none;}
.photo-band .hero-lead-list li span{color:#ffffff; font-weight:500; text-shadow:0 2px 14px rgba(0,0,0,0.6);}
.photo-band .hero-lead-ic{box-shadow:0 3px 14px rgba(0,0,0,0.45);}
.pb-quote{font-size:clamp(17px,2.3vw,28px); font-weight:600; color:#ffffff; text-align:center; max-width:26ch; margin:0 auto; line-height:1.35; text-shadow:0 3px 20px rgba(0,0,0,0.6);}
@media (max-width:640px){ .photo-band-content{padding:38px 22px;} }
.hero-stats{display:flex; justify-content:center; margin-top:52px; flex-wrap:wrap;}
.hero-stat{padding:0 42px; text-align:center; border-inline-start:1px solid var(--border);}
.hero-stat:first-child{border-inline-start:none;}
.hs-value{font-size:clamp(24px,3vw,34px); font-weight:800;}
.hs-label{font-size:12.5px; color:var(--text-mute); text-transform:uppercase; letter-spacing:.06em; font-weight:700; margin-top:6px;}
.section-pad{padding:var(--sec-gap) 0;}
.sec-head{max-width:820px; margin:0 0 clamp(44px,5vw,72px); text-align:start;}
.sec-head h2{font-size:clamp(34px,4.6vw,60px); margin:16px 0 20px; letter-spacing:-0.035em; line-height:1.04; font-weight:600; max-width:20ch;}
.sec-head p{color:var(--text-dim); font-size:clamp(16px,1.5vw,19px); line-height:1.6; max-width:62ch;}
/* POURQUOI LE CLOUD, comparatif avant / après */
.advantages{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-soft);}
.adv-tabs{display:flex; justify-content:center; gap:8px; margin-bottom:36px; flex-wrap:wrap;}
.adv-tab{padding:10px 22px; border-radius:999px; border:1px solid var(--border); background:none; color:var(--text-mute); font-size:13.5px; font-weight:500; cursor:pointer; transition:color .16s ease, border-color .16s ease; font-family:inherit;}
.adv-tab:hover{color:var(--text);}
.adv-tab.active{background:none; color:var(--text); border-color:var(--accent);}
.uc-panel .uc-photo{max-width:1180px; margin-left:auto; margin-right:auto; height:clamp(300px,38vw,460px);}
.uc-panel .uc-photo img{transform-origin:60% 45%; animation:kenburns 24s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){ .uc-panel .uc-photo img{animation:none;} }
/* CAS D'USAGE */
.usecases{padding:88px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-soft);}
.uc-tabs{display:flex; justify-content:center; gap:10px; margin-bottom:40px; flex-wrap:wrap;}
.uc-tab{display:flex; align-items:center; gap:9px; padding:9px 18px; border-radius:999px; border:1px solid var(--border); background:none; color:var(--text-mute); font-size:13.5px; font-weight:500; cursor:pointer; transition:color .16s ease, border-color .16s ease; font-family:inherit;}
[dir="rtl"] .uc-tab{padding:8px 9px 8px 18px;}
.uc-tab:hover{color:var(--text);}
.uc-tab.active{border-color:var(--accent); box-shadow:none; color:var(--text); background:none;}
.uc-tab-ic{width:22px; height:22px; border-radius:0; display:flex; align-items:center; justify-content:center; flex:none; background:none; box-shadow:none; color:currentColor;}
.uc-tab-ic svg{width:17px; height:17px;}
.uc-tab-ic.c-purple{background:linear-gradient(150deg,rgba(var(--c1-rgb),.22),rgba(var(--c1-rgb),.11)); color:var(--c1-ink);}
.uc-tab-ic.c-blue{background:linear-gradient(150deg,rgba(var(--c2-rgb),.22),rgba(var(--c2-rgb),.11)); color:var(--c2-ink);}
.uc-tab-ic.c-green{background:linear-gradient(150deg,rgba(var(--c3-rgb),.22),rgba(var(--c3-rgb),.11)); color:var(--c3-ink);}
.uc-tab-ic.c-lime{background:linear-gradient(150deg,rgba(var(--c4-rgb),.22),rgba(var(--c4-rgb),.11)); color:var(--c4-ink);}
.uc-tab.active .uc-tab-ic{box-shadow:0 5px 12px -5px currentColor, inset 0 1px 0 rgba(255,255,255,0.7);}
.uc-stage{max-width:1180px; margin:0 auto;}
.uc-panel{display:none;}
.uc-panel.active{display:block; animation:ucfade .4s ease;}
@keyframes ucfade{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}
.uc-photo{width:100%; height:clamp(360px, 48vw, 600px); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:28px; position:relative; box-shadow:0 34px 80px -32px rgba(34,24,46,0.28);}
.uc-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.uc-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,6,9,0.05) 0%, rgba(7,6,9,0.30) 42%, rgba(7,6,9,0.86) 100%); pointer-events:none;}
.uc-photo-caption{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:38px 42px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; pointer-events:none;}
.uc-photo-tag{display:inline-flex; align-items:center; gap:8px; padding:6px 15px; border-radius:999px; background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.32); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#ffffff;}
.uc-photo-tag svg{width:14px; height:14px;}
.uc-photo-title{font-size:clamp(24px,3.1vw,38px); font-weight:800; color:#ffffff; line-height:1.14; letter-spacing:-0.02em; text-shadow:0 3px 18px rgba(0,0,0,0.5); max-width:20ch;}
.uc-photo-sub{font-size:clamp(14px,1.35vw,16.5px); color:rgba(255,255,255,0.9); line-height:1.55; max-width:60ch; text-shadow:0 2px 12px rgba(0,0,0,0.55);}
[dir="rtl"] .uc-photo-caption{align-items:flex-end; text-align:right;}
.uc-partner{display:inline-flex; align-items:center; gap:10px; margin-top:6px; padding:8px 15px; border-radius:12px; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.28); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-size:12.5px; color:rgba(255,255,255,0.94); line-height:1.4; font-weight:500;}
.uc-partner .ucp-badge{font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:999px; background:var(--grad); color:#060508; flex:none;}
.uc-partner .ucp-logo{height:20px; width:auto; flex:none;}
.uc-partner .axxam-logo{height:26px; width:auto; flex:none; background:#ffffff; padding:3px 7px; border-radius:6px;}
.uc-partner .ucp-wordmark{font-size:13px; font-weight:800; letter-spacing:.09em; color:#ffffff; flex:none;}
.org-chip{display:inline-flex; align-items:center; gap:6px; flex:none; padding:4px 11px; border-radius:7px;
background:#ffffff; color:#18141d; font-size:11.5px; font-weight:800; letter-spacing:.06em;
box-shadow:0 2px 8px rgba(0,0,0,0.25);}
.org-chip .org-dot{width:7px; height:7px; border-radius:2px; background:var(--oc); flex:none;}
@media (max-width:640px){ .uc-partner{display:none;} }
@media (max-width:640px){ .uc-photo{height:340px;} .uc-photo-caption{padding:24px 22px; gap:9px;} .uc-photo-sub{display:none;} }
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.feat-card{background:none; border:none; box-shadow:none; padding:0; padding-inline-end:26px; border-radius:0; transition:none;}
.feat-card:hover{background:none; border:none; box-shadow:none; transform:none; border:none;}
.feat-ic{width:30px; height:30px; border-radius:0; background:none; box-shadow:none; display:flex; align-items:center; justify-content:center; margin-bottom:20px; color:var(--accent-soft);}
.feat-ic svg{width:26px; height:26px; color:inherit;}
.feat-ic.c-purple{background:linear-gradient(150deg,rgba(var(--c1-rgb),.22),rgba(var(--c1-rgb),.11)); box-shadow:0 8px 18px -8px rgba(var(--c1-rgb),0.6), inset 0 1px 0 rgba(var(--c1-rgb),0.7);} .feat-ic.c-purple svg{color:var(--c1-ink);}
.feat-ic.c-blue{background:linear-gradient(150deg,rgba(var(--c2-rgb),.22),rgba(var(--c2-rgb),.11)); box-shadow:0 8px 18px -8px rgba(var(--c2-rgb),0.6), inset 0 1px 0 rgba(var(--c2-rgb),0.7);} .feat-ic.c-blue svg{color:var(--c2-ink);}
.feat-ic.c-green{background:linear-gradient(150deg,rgba(var(--c3-rgb),.22),rgba(var(--c3-rgb),.11)); box-shadow:0 8px 18px -8px rgba(var(--c3-rgb),0.6), inset 0 1px 0 rgba(var(--c3-rgb),0.7);} .feat-ic.c-green svg{color:var(--c3-ink);}
.feat-ic.c-lime{background:linear-gradient(150deg,rgba(var(--c4-rgb),.22),rgba(var(--c4-rgb),.11)); box-shadow:0 8px 18px -8px rgba(var(--c4-rgb),0.6), inset 0 1px 0 rgba(var(--c4-rgb),0.7);} .feat-ic.c-lime svg{color:var(--c4-ink);}
/* pictos duotone : la forme pleine claire hérite de la couleur du bloc */
.duo-b{fill:currentColor; opacity:.30;}
.duo-f{fill:currentColor;}
.duo-w{fill:#ffffff;}
.feat-card h3{font-size:17.5px; margin-bottom:8px;}
.feat-card p{font-size:14.5px; color:var(--text-dim);}
.infra{background:var(--bg-soft); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
/* ===== CARTES STATIQUES ===== */
.staticmap{margin-top:30px; border-radius:var(--radius-lg); border:1px solid var(--border-strong); background:#fcfbfe; padding:20px 18px 16px; box-shadow:0 26px 60px -34px rgba(34,24,46,0.2);}
.staticmap svg{width:100%; height:auto; display:block;}
.staticmap .sm-t{font-size:12.5px; font-weight:800; fill:#110d15; font-family:inherit;}
.staticmap .sm-s{font-size:9.5px; fill:#787082; font-family:inherit;}
.staticmap .sm-s.future{fill:#77777f;}
.staticmap .sm-sea{font-size:11px; fill:#b3acbb; font-style:italic; font-family:inherit;}
.staticmap .sm-dot{stroke:#ffffff; stroke-width:2.2;}
.staticmap .sm-dot.own{fill:#4c1887;}
.staticmap .sm-dot.other{fill:#1a1a1a;}
.staticmap .sm-dot.own.future{fill:#8b8b98;}
.staticmap .sm-halo{fill:rgba(76,24,135,0.16);}
.staticmap .sm-live{stroke:#7b3ac5; stroke-width:2.2; opacity:.85;}
.staticmap .sm-arch{stroke:#8b8b98; stroke-width:1.5; stroke-dasharray:4 3; opacity:.85;}
.staticmap .sm-future{stroke:#8b8b98; stroke-width:2; stroke-dasharray:6 4;}
.staticmap .sm-arch-g line{stroke:#d1bee6; stroke-width:1.4; stroke-dasharray:4 4; opacity:.8;}
.staticmap .sm-lead line{stroke:#d7c8e8; stroke-width:1.1; stroke-dasharray:3 3;}
/* carte Algérie sur fond photo Constantine */
.staticmap.dz-photo{position:relative; overflow:hidden; padding:0; border:none; background:#16101d;}
.staticmap.dz-photo .dz-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42%;}
.staticmap.dz-photo .dz-bg-ov{position:absolute; inset:0; background:linear-gradient(160deg, rgba(16,10,22,0.74), rgba(19,11,29,0.62) 45%, rgba(16,10,22,0.80));}
.staticmap.dz-photo svg{position:relative; z-index:2; display:block; box-sizing:border-box; width:100%; padding:26px 22px 8px;}
.staticmap.dz-photo .sm-t{fill:#ffffff;}
.staticmap.dz-photo .sm-s{fill:rgba(255,255,255,0.82);}
.staticmap.dz-photo .sm-s.future{fill:#c6c6d0;}
.staticmap.dz-photo .sm-sea{fill:rgba(255,255,255,0.55);}
.staticmap.dz-photo .sm-dot{stroke:#16101d; stroke-width:2.4;}
.staticmap.dz-photo .sm-dot.own{fill:#bd95eb;}
.staticmap.dz-photo .sm-dot.other{fill:#ffffff;}
.staticmap.dz-photo .sm-dot.own.future{fill:#b9b9c6;}
.staticmap .sm-dot.own.build{fill:#9a9aa6;}
.staticmap.dz-photo .sm-dot.own.build{fill:#b3b3c0;}
.staticmap .sm-s.build{fill:#6f6f7a;}
.staticmap.dz-photo .sm-s.build{fill:#c2c2cd;}
.staticmap.dz-photo .sm-halo{fill:rgba(162,108,224,0.35);}
.staticmap.dz-photo .sm-live{stroke:#a971e8;}
.staticmap.dz-photo .sm-lead line{stroke:rgba(255,255,255,0.38);}
.staticmap.dz-photo .sm-arch{stroke:rgba(255,255,255,0.5);}
.staticmap.dz-photo .sm-legend{position:relative; z-index:2; border-top:1px solid rgba(255,255,255,0.18); margin:0; padding:14px 24px 18px;}
.staticmap.dz-photo .sm-legend span{color:rgba(255,255,255,0.9);}
.org-img{height:52px; width:auto; display:block; background:#ffffff; padding:7px 12px; border-radius:10px; box-shadow:0 4px 14px rgba(0,0,0,0.32);}
.sm-legend{display:flex; gap:20px; flex-wrap:wrap; padding:14px 6px 2px; border-top:1px solid var(--border); margin-top:10px;}
.sm-legend span{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-dim);}
.sm-legend .lg-dot{width:10px; height:10px; border-radius:50%; flex:none;}
.sm-legend .lg-line{width:18px; height:3px; border-radius:2px; flex:none;}
.expansion-track{display:grid; grid-template-columns:repeat(8,1fr); gap:12px; position:relative;}
.expansion-track::before{content:""; position:absolute; top:34px; left:4%; right:4%; height:2px; background:linear-gradient(90deg,#8348c7,#7b27dc,#6321ae); opacity:.3; z-index:0;}
.expansion-card{background:none; border:none; box-shadow:none; position:relative; z-index:1; padding:16px 10px; border-radius:0; text-align:center; transition:none;}
.expansion-card:hover{background:none; border:none; box-shadow:none; transform:none; box-shadow:none;}
.expansion-card.hq{background:var(--grad); border-color:transparent;}
.expansion-card.hq .ec-country, .expansion-card.hq .ec-desc{color:#ffffff;}
.expansion-card .ec-year{display:inline-block; font-size:11px; font-weight:800; color:#ffffff; background:var(--grad); padding:3px 10px; border-radius:999px; margin-bottom:10px;}
.expansion-card.hq .ec-year{background:rgba(255,255,255,0.28);}
.ec-country{font-size:14.5px; font-weight:800; color:var(--text); margin-bottom:4px;}
.ec-desc{font-size:11.5px; color:var(--text-mute); line-height:1.4;}
@media (max-width:900px){ .expansion-track{grid-template-columns:repeat(3,1fr);} .expansion-track::before{display:none;} }
@media (max-width:560px){ .expansion-track{grid-template-columns:repeat(2,1fr);} }
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.step{background:none; border:none; box-shadow:none; padding:0; padding-inline-end:24px; border-radius:0;}
.step .num{width:36px; height:36px; border-radius:10px; background:var(--text); color:#ffffff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; margin-bottom:16px;}
.step h3{font-size:16.5px; margin-bottom:8px;}
.step p{font-size:14px; color:var(--text-dim);}
.store{padding:56px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.store-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; flex-wrap:wrap; gap:12px;}
.store-head h3{font-size:19px;}
.store-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:14px;}
.store-tile{background:none; border:none; box-shadow:none; aspect-ratio:1; border-radius:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; font-size:12px; color:var(--text-dim); font-weight:500; text-align:center; padding:8px; transition:opacity .16s ease;}
.store-tile:hover{background:none; border:none; box-shadow:none; transform:none; box-shadow:none; opacity:.72;}
.store-tile .st-badge{width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:none; background:#ffffff; border:1px solid var(--border); padding:9px;}
.store-tile .st-badge svg{width:23px; height:23px; color:#ffffff;}
.store-tile .st-badge img{width:100%; height:100%; object-fit:contain;}
.store-tile.more .st-badge{background:var(--grad); border-color:transparent;}
.tech-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:26px;}
.tech-col{background:none; border:none; box-shadow:none; padding:0; padding-inline-end:14px; border-radius:0;}
.tc-head{display:flex; align-items:flex-start; gap:9px; font-size:12.5px; font-weight:800; letter-spacing:.02em; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--border); line-height:1.3;}
.tc-head svg{width:18px; height:18px; flex:none; margin-top:1px;}
.tc-head.c-purple{color:var(--c1-ink);} .tc-head.c-blue{color:var(--c2-ink);}
.tc-head.c-green{color:var(--c3-ink);} .tc-head.c-lime{color:var(--c4-ink);}
.tc-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.tc-list li{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--text-dim); line-height:1.35;}
.tc-list li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--border-strong); flex:none;}
.tc-list li img{width:18px; height:18px; object-fit:contain; flex:none;}
.tc-logo{width:18px; height:18px; flex:none; display:block;}
.tc-list li:has(.tc-logo)::before{display:none;}
.tc-badge{width:17px; height:17px; border-radius:4px; flex:none; display:flex; align-items:center; justify-content:center; color:#ffffff; font-size:8px; font-weight:800; letter-spacing:-.02em;}
@media (max-width:1100px){ .tech-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:700px){ .tech-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:1000px){ .cat-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .cat-grid{grid-template-columns:1fr;} }
.store-lead{color:var(--text-dim); font-size:14.5px; max-width:560px; margin:-18px 0 26px;}
/* PARTENARIATS */
.partners{padding:88px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.partners-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:40px;}
/* A PROPOS */
.about{padding:88px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-soft);}
.about-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:44px; align-items:start; max-width:1080px; margin:0 auto;}
.about-founder{background:none; border:none; box-shadow:none; padding:0; border-radius:0; text-align:start;}
.about-avatar{width:76px; height:76px; border-radius:50%; object-fit:cover; display:block; margin:0 auto 16px; box-shadow:0 0 0 3px var(--surface), 0 0 0 5px transparent; background:var(--grad); padding:3px;}
.about-founder h3{font-size:18px; margin-bottom:4px;}
.about-role{font-size:13px; color:var(--text-mute); font-weight:600; margin-bottom:14px;}
.about-bio{font-size:13.5px; color:var(--text-dim); line-height:1.6; margin-bottom:22px; text-align:start;}
.about-stats{display:flex; flex-direction:column; gap:12px; text-align:start;}
.about-stat{background:none; border:none; box-shadow:none; display:flex; align-items:baseline; gap:12px; padding:12px 0; border-top:1px solid var(--border);}
.about-stat span{font-size:20px; font-weight:800; flex:none;}
.about-stat small{font-size:12px; color:var(--text-mute); line-height:1.4;}
.about-li-card{margin-top:18px; padding:16px 16px 14px; border-radius:14px; background:rgba(10,102,194,0.06); border:1px solid rgba(10,102,194,0.22); text-align:start;}
.about-li-head{display:flex; align-items:center; gap:9px; margin-bottom:10px;}
.about-li-head svg{width:20px; height:20px; color:#0A66C2; flex:none;}
.about-li-head strong{font-size:13px; color:var(--text);}
.about-li-card p{font-size:12.5px; color:var(--text-dim); line-height:1.55; margin-bottom:12px;}
.about-li-cta{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:#0A66C2;}
.about-li-cta:hover{text-decoration:underline;}
.about-vision{background:none; border:none; box-shadow:none; padding:0; border-radius:0; position:relative;}
.about-quote-mark{font-size:60px; line-height:1; font-weight:800; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:-14px;}
.about-quote{font-size:19px; font-weight:600; color:var(--text); line-height:1.5; margin-bottom:28px;}
.about-timeline{display:flex; flex-direction:column; gap:18px;}
.about-tl-item{display:flex; gap:14px; align-items:flex-start;}
.about-tl-item strong{font-size:14px; display:block; margin-bottom:3px;}
.about-tl-item p{font-size:13.5px; color:var(--text-dim); line-height:1.5;}
.config-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:920px; margin:0 auto;}
.price-card{padding:34px; border-radius:var(--radius-lg); border:1px solid transparent;
background:linear-gradient(var(--surface),var(--surface)) padding-box,
linear-gradient(135deg, rgba(131,72,199,.45), rgba(123,39,220,.40) 55%, rgba(99,33,174,.38)) border-box;
box-shadow:0 18px 42px -30px rgba(34,24,46,.34);}
.price-card.feat{border:1px solid transparent;
background:linear-gradient(var(--surface),var(--surface)) padding-box, var(--grad) border-box;
box-shadow:0 24px 52px -28px rgba(34,24,46,.42);}
.price-badge{position:absolute; top:-13px; left:34px; background:var(--grad); color:#060508; font-size:11.5px; font-weight:800; padding:5px 13px; border-radius:999px;}
html[dir="rtl"] .price-badge{left:auto; right:34px;}
.price-card h3{font-size:19px; margin-bottom:6px;}
.price-card p.desc{font-size:14px; color:var(--text-dim); margin-bottom:22px;}
.price-feat{display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--text-dim); padding:10px 0; border-top:1px solid var(--border);}
.price-feat:first-of-type{border-top:none;}
.price-feat svg{width:17px; height:17px; color:var(--c3-ink); flex:none; margin-top:2px;}
.price-feat.hl{color:var(--text); font-weight:600;}
.price-feat.hl svg{color:var(--c2-ink);}
.price-feat.no{color:var(--text-mute); opacity:0.65;}
.price-feat.no svg{color:var(--text-mute);}
.security{}
.sec-detail-list{display:flex; flex-direction:column; gap:12px;}
.sec-detail{background:none; border:none; box-shadow:none; display:flex; align-items:flex-start; gap:18px; padding:22px 0; border-radius:0; border-top:1px solid var(--border); transition:none;}
.sec-detail:hover{background:none; border:none; box-shadow:none; transform:none; box-shadow:none;}
.sec-detail .feat-ic{width:44px; height:44px; flex:none; margin-bottom:0;}
.sec-detail .feat-ic svg{width:21px; height:21px;}
.sec-detail h3{font-size:15.5px; margin-bottom:5px;}
.sec-detail p{font-size:13.5px; color:var(--text-dim); line-height:1.55;}
@media (max-width:560px){ .sec-detail{flex-direction:column; padding:20px 18px;} }
.pioneer{padding:90px 0;}
.pioneer-inner{background:none; border:none; box-shadow:none; border-radius:0; padding:clamp(48px,6vw,80px) 0; text-align:center; position:relative; overflow:hidden;}
.pioneer-inner h2{font-size:clamp(26px,3.2vw,38px); margin-bottom:16px;}
.pioneer-inner p{color:var(--text-dim); font-size:16px; max-width:560px; margin:0 auto 30px;}
.finalcta{padding:20px 0 100px;}
.finalcta-inner{background:none; border:none; box-shadow:none; border-radius:0; padding:clamp(56px,7vw,96px) 0; text-align:center; position:relative; overflow:hidden; border-top:1px solid var(--border);}
.finalcta-inner h2{font-size:clamp(28px,3.6vw,42px); color:var(--text); margin-bottom:14px;}
.finalcta-inner p{color:var(--text-dim); font-size:16.5px; margin-bottom:30px;}
.oc-strong{color:#070608; font-weight:800;}
footer{border-top:1px solid var(--border); padding:60px 0 32px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:46px;}
.foot-brand img{height:24px; margin-bottom:14px;}
.foot-brand p{color:var(--text-mute); font-size:13.5px; margin:0 0 12px; max-width:260px;}
.foot-tagline{font-size:13px; color:var(--text-dim); font-style:italic;}
.foot-col h4{font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-mute); margin-bottom:16px;}
.foot-col a{display:block; font-size:14px; color:var(--text-dim); margin-bottom:11px;}
.foot-col a:hover{color:var(--text);}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:24px; border-top:1px solid var(--border); font-size:13px; color:var(--text-mute); flex-wrap:wrap; gap:12px;}
@media (max-width:900px){
.navlinks{display:none;}
.navmobile-btn{display:block;}
.navdrop{flex-direction:column; align-items:flex-start; width:100%;}
.navdrop-label{padding:0;}
.navdrop:hover .navdrop-label, .navdrop:focus-within .navdrop-label, .navdrop.force-open .navdrop-label{background:none;}
.navdrop-menu.navdrop-menu.wide{
position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none;
background:none; padding:2px 0 0 14px; margin-top:6px; min-width:0; display:block;
}
.feat-grid.partners-grid{grid-template-columns:repeat(2,1fr);}
.trust-grid{grid-template-columns:repeat(2,1fr);}
.about-grid{grid-template-columns:1fr; gap:36px;}
.navdrop-menu.wide{grid-template-columns:1fr;}
.steps{grid-template-columns:1fr;}
.store-grid{grid-template-columns:repeat(3,1fr);}
.config-grid{grid-template-columns:1fr;}
.foot-grid{grid-template-columns:1fr 1fr; row-gap:30px;}
}
@media (max-width:560px){
.feat-grid{grid-template-columns:1fr;}
.partners-grid{grid-template-columns:1fr;}
.trust-grid{grid-template-columns:1fr;}
.uc-tab span:last-child{display:none;}
.hero-ctas{flex-direction:column; align-items:stretch;}
.wrap{padding:0 20px;}
.hero-photos{height:220px;}
.hero-stat{border-inline-start:none; border-top:1px solid var(--border); padding:16px 22px 0; margin-top:16px; flex:1 1 40%;}
.hero-stat:first-child{border-top:none; margin-top:0; padding-top:0;}
.foot-grid{grid-template-columns:1fr;}
}
/* ===================== RESPONSIVE, RENFORCEMENT MOBILE ===================== */
html{-webkit-text-size-adjust:100%;}
img,svg,video{max-width:100%;}
body{overflow-x:clip;}
.staticmap svg, .triad-diagram svg{max-width:100%; height:auto;}
@media (max-width:1024px){
.partners-grid{grid-template-columns:1fr; gap:24px;}
.sec-layout{flex-direction:column;}
}
@media (max-width:900px){
.section-pad{padding:64px 0;}
.bene-split{grid-template-columns:1fr;}
.partner-modes{grid-template-columns:1fr; gap:14px;}
.uc-panel .uc-photo{height:clamp(240px,44vw,320px);}
.sm-legend{gap:12px;}
.sm-legend span{font-size:11.5px;}
}
@media (max-width:700px){
.sec-head h2, h2{font-size:clamp(22px,6vw,30px); line-height:1.2;}
.sec-head p{font-size:14.5px;}
.section-pad{padding:52px 0;}
.wrap{padding:0 18px;}
.neo-banner{min-height:100svh;}
.neo-logo{width:92vw;}
.neo-banner-content .hero-lead-list li{font-size:14px; gap:11px; padding:5px 0;}
.hero-lead-ic{width:32px; height:32px; border-radius:10px;}
.hero-lead-ic svg{width:19px; height:19px;}
.photo-band{min-height:auto;}
.photo-band-content{padding:40px 18px;}
.photo-band .hero-lead-list li{font-size:15px; gap:10px;}
.uc-tabs.adv-tabs{gap:8px; overflow-x:auto; flex-wrap:nowrap; justify-content:flex-start;
padding-bottom:8px; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
.uc-tabs::-webkit-scrollbar.adv-tabs::-webkit-scrollbar{display:none;}
.uc-tab.adv-tab{flex:0 0 auto; white-space:nowrap;}
.uc-tab span:last-child, .adv-tab span:last-child{display:inline;}
.tech-grid{grid-template-columns:1fr 1fr; gap:12px;}
.tech-col{padding:14px 12px;}
.tc-head{font-size:11.5px;}
.tc-list li{font-size:12.5px;}
.partner-feat{font-size:13px;}
.partner-note{padding:14px 15px; font-size:12.5px;}
.sec-detail{padding:16px 16px; gap:13px;}
.sec-detail .feat-ic{width:38px; height:38px;}
.sec-detail h3{font-size:14.5px;}
.sec-detail p{font-size:13px;}
.staticmap{padding:14px 10px 12px;}
.expansion-track{grid-template-columns:repeat(2,1fr); gap:10px;}
.about-stats{flex-wrap:wrap; gap:16px;}
.config-card{padding:26px 20px;}
.social-rail{display:none;}
}
@media (max-width:480px){
.wrap{padding:0 15px;}
.neo-banner-sub{font-size:16px; max-width:24ch;}
.uc-photo{height:300px;}
.uc-photo-title{font-size:21px;}
.partner-hero{height:180px;}
.ph-title{font-size:18px;}
.tech-grid{grid-template-columns:1fr;}
.expansion-track{grid-template-columns:1fr;}
.hero-stats{gap:0;}
.hero-stat{flex:1 1 100%; padding-inline:0;}
.btn{width:100%; justify-content:center;}
.navright .btn{width:auto;}
.foot-bottom{flex-direction:column; align-items:flex-start; gap:8px;}
}
/* ===== RESSOURCES / LIVRES BLANCS ===== */
.resources{background:var(--bg-soft); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.res-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.res-card{background:none; border:none; box-shadow:none; display:flex; flex-direction:column; border-radius:0; overflow:hidden; transition:opacity .16s ease;}
.res-card:hover{background:none; border:none; box-shadow:none; transform:none; box-shadow:none; opacity:.9;}
.res-cover{position:relative; height:130px; display:flex; align-items:center; justify-content:center;}
.res-cover.c1{background:linear-gradient(135deg,#8348c7,#6836a1);}
.res-cover.c2{background:linear-gradient(135deg,#7b27dc,#4e198b);}
.res-cover.c3{background:linear-gradient(135deg,#6321ae,#401d68);}
.res-cover svg{width:46px; height:46px; color:#ffffff; opacity:.95;}
.res-badge{position:absolute; top:12px; left:14px; font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.35); color:#ffffff;}
[dir="rtl"] .res-badge{left:auto; right:14px;}
.res-body{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1;}
.res-body h3{font-size:17px; margin-bottom:12px; line-height:1.25;}
.res-bul{list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:8px; flex:1;}
.res-bul li{position:relative; padding-inline-start:16px; font-size:13.5px; color:var(--text-dim); line-height:1.5;}
.res-bul li::before{content:""; position:absolute; inset-inline-start:0; top:7px; width:6px; height:6px; border-radius:50%; background:var(--grad);}
.res-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:14px; border-top:1px solid var(--border);}
.res-meta{font-size:11.5px; font-weight:700; color:var(--text-mute); text-transform:uppercase; letter-spacing:.04em;}
@media (max-width:900px){ .res-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){ .res-grid{grid-template-columns:1fr;} .res-foot .btn{width:100%; justify-content:center;} }
/* bullets sur photo (avant/après) */
.uc-photo-bul{list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px 22px; max-width:62ch;}
.uc-photo-bul li{display:flex; align-items:flex-start; gap:9px; font-size:clamp(13px,1.25vw,15.5px); font-weight:600; color:#ffffff; line-height:1.4; text-shadow:0 2px 12px rgba(0,0,0,0.65);}
.uc-photo-bul svg{width:15px; height:15px; flex:none; margin-top:3px; color:#7e52b1;}
@media (max-width:700px){ .uc-photo-bul{grid-template-columns:1fr; gap:6px;} .uc-photo-bul li:nth-child(n+3){display:none;} }
/* ===== PARTENAIRES, CARTES PHOTO ===== */
.pcard-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:18px;}
.pcard{position:relative; grid-column:span 3; min-height:300px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 24px 54px -30px rgba(34,24,46,0.34);}
.pcard.wide{grid-column:span 3;}
.pcard img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.pcard-ov{position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,6,11,0.18) 0%, rgba(8,6,11,0.62) 52%, rgba(8,6,11,0.9) 100%);}
.pcard-cap{position:absolute; inset:auto 0 0 0; z-index:2; padding:26px 26px 24px; display:flex; flex-direction:column; align-items:flex-start; gap:11px;}
.pcard-tag{font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; padding:5px 13px; border-radius:999px; background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.4); color:#ffffff; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}
.pcard-tag.alt{background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.36); color:#ffffff; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}
.pcard-cap h3{font-size:clamp(19px,2.1vw,25px); font-weight:800; color:#ffffff; line-height:1.16; letter-spacing:-0.02em; text-shadow:0 3px 16px rgba(0,0,0,0.6);}
.pcard-bul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px;}
.pcard-bul li{position:relative; padding-inline-start:17px; font-size:13.5px; font-weight:500; color:rgba(255,255,255,0.95); line-height:1.45; text-shadow:0 2px 12px rgba(0,0,0,0.7);}
.pcard-bul li::before{content:""; position:absolute; inset-inline-start:0; top:6px; width:7px; height:7px; border-radius:2px; background:var(--grad);}
[dir="rtl"] .pcard-cap{align-items:flex-end; text-align:right;}
.pcard-badge{position:absolute; z-index:4; top:18px; inset-inline-end:18px; display:flex; align-items:center; justify-content:center;
width:74px; height:74px; padding:9px; border-radius:18px; background:rgba(255,255,255,0.96);
box-shadow:0 12px 30px -12px rgba(0,0,0,.65); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}
.pcard-badge.wide{width:104px; height:64px; padding:8px 12px; border-radius:16px;}
.pcard-badge img{position:static; width:100%; height:100%; object-fit:contain; display:block;}
.pcard-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px;}
@media (max-width:900px){ .pcard-grid{grid-template-columns:1fr 1fr;} .pcard.pcard.wide{grid-column:span 1;} }
@media (max-width:640px){ .pcard-grid{grid-template-columns:1fr;} .pcard{min-height:260px;} .pcard-cap{padding:20px 20px 18px;} .pcard-cta .btn{width:100%; justify-content:center;} }
/* ===== BLOC IHM / CONSOLE ===== */
/* ===== BANDEAU TECHNOLOGIES ===== */
.tech-hero{position:relative; border-radius:var(--radius-lg); overflow:hidden; margin-bottom:26px; box-shadow:0 26px 60px -32px rgba(34,24,46,0.4);}
.tech-hero>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.tech-hero>img.tech-bg{object-position:50% 50%;}
.tech-hero-ov{position:absolute; inset:0; background:linear-gradient(135deg, rgba(16,11,22,0.80) 0%, rgba(25,16,36,0.62) 45%, rgba(16,11,22,0.84) 100%);}
.tech-hero-in{position:relative; z-index:2; padding:32px 30px 30px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px 30px;}
.th-cat{font-size:12.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#ffffff; margin-bottom:11px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.18);}
.th-chips{display:flex; flex-wrap:wrap; gap:8px;}
.th-chip{display:inline-flex; align-items:center; gap:7px; padding:6px 11px 6px 7px; border-radius:9px; background:rgba(255,255,255,0.94); color:#18141d; font-size:12px; font-weight:700; box-shadow:0 3px 10px rgba(0,0,0,0.3);}
.th-logo{width:16px; height:16px; flex:none; display:block;}
.th-img{height:15px; width:auto; max-width:56px; object-fit:contain; flex:none; display:block;}
.tc-img{height:16px; width:auto; max-width:58px; object-fit:contain; flex:none; display:block;}
@media (max-width:900px){ .tech-hero-in{grid-template-columns:1fr 1fr; padding:26px 22px;} }
@media (max-width:600px){ .tech-hero-in{grid-template-columns:1fr; gap:20px;} .th-chip{font-size:11.5px;} }
.pcard-org{display:flex; align-items:center;}
.org-logo{display:inline-flex; align-items:center; gap:9px; padding:7px 14px 7px 8px; border-radius:10px;
background:#ffffff; color:#18141d; font-size:14px; font-weight:800; letter-spacing:.04em;
box-shadow:0 3px 12px rgba(0,0,0,0.3);}
.org-logo svg{width:24px; height:24px; flex:none;}
.fc-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px;}
.fc-chip{display:inline-flex; align-items:center; gap:7px; padding:6px 11px 6px 7px; border-radius:9px;
background:var(--bg-soft); border:1px solid var(--border); font-size:12px; font-weight:700; color:var(--text-dim);}
.fc-logo{width:16px; height:16px; flex:none; display:block;}
.sec-photo{max-width:1180px; margin:0 auto 30px; height:clamp(340px,42vw,500px);}
.sec-bul{grid-template-columns:1fr 1fr 1fr !important;}
@media (max-width:900px){ .sec-bul{grid-template-columns:1fr 1fr !important;} }
@media (max-width:640px){ .sec-bul{grid-template-columns:1fr !important;} }
.res-cover{position:relative; height:150px; overflow:hidden; display:block; padding:0;}
.res-cover>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.res-cover-ov{position:absolute; inset:0;}
.res-cover.c1 .res-cover-ov{background:linear-gradient(160deg,rgba(47,22,76,.55),rgba(124,61,196,.72));}
.res-cover.c2 .res-cover-ov{background:linear-gradient(160deg,rgba(42,17,71,.55),rgba(97,31,173,.72));}
.res-cover.c3 .res-cover-ov{background:linear-gradient(160deg,rgba(28,11,48,.55),rgba(74,25,130,.72));}
.res-badge-k8s{display:inline-flex; align-items:center; gap:7px;}
.res-badge-k8s .wp-k8s{width:16px; height:16px; display:block; flex:none;}
.res-cover .res-badge{position:absolute; z-index:2; top:14px; inset-inline-start:14px;}
/* ===== cartes : liaisons animées ===== */
.sm-link{fill:none; stroke-linecap:round;}
.sm-link.live{stroke:rgba(169,113,232,0.55); stroke-width:1.8;}
.sm-link.arch{stroke:rgba(255,255,255,0.30); stroke-width:1.5; stroke-dasharray:5 4;}
.sm-link.build{stroke:rgba(165,113,224,0.65); stroke-width:1.8;}
.sm-link.future{stroke:rgba(137,71,213,0.55); stroke-width:1.8; stroke-dasharray:7 5;}
.sm-bullet{filter:drop-shadow(0 0 5px currentColor);}
.sm-bullet.live{fill:#bc91ed; color:#bc91ed;}
.sm-bullet.arch{fill:#ede2fa; color:#d0b2f2;}
.sm-bullet.build{fill:#c2c2cd; color:#b3b3c0;}
.sm-bullet.future{fill:#c6c6d0; color:#8b8b98;}
.staticmap .sm-halo{animation:smPulse 2.6s ease-in-out infinite;}
@keyframes smPulse{0%,100%{opacity:.35; transform:scale(1);} 50%{opacity:.75; transform:scale(1.18);}}
.staticmap .sm-halo{transform-box:fill-box; transform-origin:center;}
@media (prefers-reduced-motion:reduce){
.sm-flow{display:none;}
.staticmap .sm-halo{animation:none;}
}
/* ===== bouton posé sur une photo (sans dégradé) ===== */
.btn-onphoto{background:rgba(255,255,255,0.95); color:#18141d; border-color:rgba(255,255,255,0.9);
box-shadow:0 10px 26px -12px rgba(0,0,0,0.7); padding:11px 20px; font-size:14px;}
.btn-onphoto:hover{background:#ffffff; color:#000000;}
.btn-onphoto:active{background:var(--btn-click); color:#ffffff; border-color:var(--btn-click);}
.pcard-btn{align-self:flex-start; margin-top:4px;}
/* ===== modale de contact ===== */
.modal{position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center; padding:24px;}
.modal.open{display:flex;}
.modal-back{position:absolute; inset:0; background:rgba(14,10,18,0.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
animation:mFade .22s ease;}
.modal-card{position:relative; z-index:2; width:min(560px,100%); max-height:88vh; overflow:auto;
border-radius:24px; background:var(--surface); box-shadow:0 40px 90px -30px rgba(14,10,18,.6);
animation:mUp .28s cubic-bezier(.16,.9,.35,1);}
@keyframes mFade{from{opacity:0}to{opacity:1}}
@keyframes mUp{from{opacity:0; transform:translateY(18px) scale(.97)}to{opacity:1; transform:none}}
.modal-head{position:relative; padding:30px 30px 26px; border-radius:24px 24px 0 0; overflow:hidden;
background:var(--grad-action); color:#ffffff;}
.modal-head::after{content:""; position:absolute; inset:0;
background:radial-gradient(120% 90% at 15% 0%, rgba(255,255,255,.32), transparent 60%);}
.modal-head>*{position:relative; z-index:2;}
.modal-eyebrow{display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.4); margin-bottom:12px;}
.modal-head h3{font-size:23px; font-weight:800; letter-spacing:-0.02em; line-height:1.2; margin-bottom:6px;}
.modal-head p{font-size:13.5px; color:rgba(255,255,255,.86); line-height:1.5;}
.modal-close{position:absolute; top:16px; inset-inline-end:16px; z-index:3; width:34px; height:34px; border-radius:10px;
border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.14); color:#ffffff; cursor:pointer;
display:flex; align-items:center; justify-content:center; font-size:17px; line-height:1;}
.modal-close:hover{background:rgba(255,255,255,.26);}
.modal-body{padding:26px 30px 30px; display:flex; flex-direction:column; gap:13px;}
.modal-body label{display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:700; color:var(--text);}
.modal-body input, .modal-body select, .modal-body textarea{
font-family:inherit; font-size:14px; padding:11px 13px; border-radius:11px; border:1px solid var(--border-strong);
background:var(--bg); color:var(--text); width:100%;}
.modal-body input:focus, .modal-body select:focus, .modal-body textarea:focus{
outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(123,39,220,.18);}
.modal-body input.err, .modal-body textarea.err{border-color:#9463cc; box-shadow:0 0 0 2px rgba(148,99,204,.25);}
.modal-body textarea{resize:vertical; min-height:96px;}
.modal-row{display:grid; grid-template-columns:1fr 1fr; gap:13px;}
.modal-msg{font-size:12.5px; line-height:1.5; margin:0;}
.modal-msg.ok{color:#491a7e;} .modal-msg.ko{color:#6325a9;}
.modal-legal{font-size:11.5px; color:var(--text-mute); line-height:1.55;}
@media (max-width:560px){ .modal{padding:0;} .modal-card{border-radius:0; max-height:100vh; height:100%;}
.modal-head{border-radius:0;} .modal-row{grid-template-columns:1fr;} }
.lead-stores{display:inline-flex; align-items:center; gap:8px; margin-inline-start:10px; vertical-align:-8px;}
.lead-stores img{height:26px; width:auto; display:block; border-radius:5px;}
@media (max-width:640px){ .lead-stores img{height:22px;} }
/* ===== picto duotone à côté des titres de section ===== */
.eyebrow-ic{display:none;}
.eyebrow-ic svg{width:20px; height:20px; display:block;}
.eyebrow-ic.c-purple{background:linear-gradient(150deg,rgba(var(--c1-rgb),.22),rgba(var(--c1-rgb),.11)); color:var(--c1-ink); box-shadow:0 6px 14px -7px rgba(var(--c1-rgb),.6), inset 0 1px 0 rgba(var(--c1-rgb),.75);}
.eyebrow-ic.c-blue{background:linear-gradient(150deg,rgba(var(--c2-rgb),.22),rgba(var(--c2-rgb),.11)); color:var(--c2-ink); box-shadow:0 6px 14px -7px rgba(var(--c2-rgb),.6), inset 0 1px 0 rgba(var(--c2-rgb),.75);}
.eyebrow-ic.c-green{background:linear-gradient(150deg,rgba(var(--c3-rgb),.22),rgba(var(--c3-rgb),.11)); color:var(--c3-ink); box-shadow:0 6px 14px -7px rgba(var(--c3-rgb),.6), inset 0 1px 0 rgba(var(--c3-rgb),.75);}
.eyebrow-ic.c-lime{background:linear-gradient(150deg,rgba(var(--c4-rgb),.22),rgba(var(--c4-rgb),.11)); color:var(--c4-ink); box-shadow:0 6px 14px -7px rgba(var(--c4-rgb),.6), inset 0 1px 0 rgba(var(--c4-rgb),.75);}
.sm-orbit{fill:none; stroke:rgba(208,178,242,.30); stroke-width:1; stroke-dasharray:3 7;}
@media (prefers-reduced-motion:reduce){ .sm-orbit{animation:none;} }
/* ===== thème sombre (le thème clair reste le défaut) ===== */
/* ===== mode clair (bascule ; le sombre est le defaut) ===== */
html[data-theme="light"]{
/* logos des technologies : couleurs de marque sur fond clair */
--logo-ink:#15151b; --logo-paper:#ffffff; --logo-rim:transparent;
--logo-win:#0078d4; --logo-k8s:#326ce5; --logo-pg:#336791;
--logo-tux:#14141a; --logo-tuxb:#f0a30a;
--bg:#ffffff; --bg-soft:#ffffff; --surface:#fafafc; --surface-2:#f2f2f6;
--border:rgba(10,12,24,0.09); --border-strong:rgba(10,12,24,0.16);
--text:#0b0b10; --text-dim:#54566a; --text-mute:#8a8d9e;
--purple:#5e23de; --purple-deep:#47039c; --accent:#5e23de; --accent-soft:#7a4fe0;
--link-accent:#5e23de; --msg-ok:#3f1a8f; --msg-ko:#a3261f;
--btn-click:#14162b;
/* pictogrammes : teintes exactes de la charte, bleu et vert legerement
assombris pour rester lisibles sur fond blanc (seuil 3:1) */
--grad-marque:linear-gradient(90deg,#47039c 0%,#04acff 52%,#05ca5c 100%);
--c1-rgb:71,3,156; --c1-ink:#47039c;
--c2-rgb:4,172,255; --c2-ink:#0499e3;
--c3-rgb:5,202,92; --c3-ink:#04a84c;
--c4-rgb:38,88,206; --c4-ink:#2658ce;
--grad-soft:linear-gradient(135deg, rgba(94,35,222,0.10), rgba(94,35,222,0.04));
}
html:not([data-theme="light"]) .btn-ghost{background:rgba(255,255,255,0.05); color:var(--text);}
html:not([data-theme="light"]) .btn-ghost:hover{background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.4); color:#ffffff;}
html:not([data-theme="light"]) .btn-ghost:active{background:#f4f4f6; color:#101013; border-color:#f4f4f6;}
html:not([data-theme="light"]) .iso-badge{background:#ffffff;}
html:not([data-theme="light"]) .step .num{background:#f4f4f6; color:#101013;}
html:not([data-theme="light"]) .btn-onphoto{background:rgba(255,255,255,.94); color:#18141d;}
html:not([data-theme="light"]) .modal-body input, html:not([data-theme="light"]) .modal-body select,
html:not([data-theme="light"]) .modal-body textarea{background:var(--surface-2);}
html:not([data-theme="light"]) .res-cover img, html:not([data-theme="light"]) .wp-cover img{filter:brightness(.92);}
.theme-toggle{width:36px; height:36px; border-radius:999px; border:1px solid var(--border); background:none; color:var(--text-dim); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex:none; transition:color .18s ease, border-color .18s ease;}
.theme-toggle:hover{color:var(--text); border-color:var(--text-mute);}
.theme-toggle svg{width:17px; height:17px; display:block;}
.theme-toggle .ic-moon{display:block;} .theme-toggle .ic-sun{display:none;}
html:not([data-theme="light"]) .theme-toggle .ic-moon{display:none;}
html:not([data-theme="light"]) .theme-toggle .ic-sun{display:block;}
/* ===== actualités ===== */
.news{background:var(--bg-soft); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.news-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:24px; align-items:start;}
.news-li{background:none; border:none; box-shadow:none; padding:0 0 4px; border-radius:0; display:flex; flex-direction:column; gap:14px; align-items:flex-start;}
.news-li-top{display:flex; align-items:center; gap:13px;}
.news-li-ic{width:30px; height:30px; border-radius:0; flex:none; display:flex; align-items:center; justify-content:center; background:none; color:var(--text-dim);}
.news-li-ic svg{width:21px; height:21px;}
.news-li-top strong{display:block; font-size:16px;}
.news-li-top span{font-size:13px; color:var(--text-dim);}
.news-li p{font-size:14.5px; color:var(--text-dim); line-height:1.55;}
.news-links{background:none; border:none; box-shadow:none; padding:0; border-radius:0;}
.news-links h3{font-size:16.5px; margin-bottom:14px;}
.news-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.news-list li + li{border-top:1px solid var(--border);}
.news-list a{display:flex; flex-direction:column; gap:3px; padding:13px 0; transition:padding-inline-start .15s ease;}
.news-list a:hover{padding-inline-start:6px;}
.news-src{font-size:14.5px; font-weight:700;}
.news-note{font-size:13px; color:var(--text-dim);}
/* ===== nous contacter ===== */
.contact-band{background:var(--bg);}
.contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:26px; align-items:start;}
.contact-cards{display:flex; flex-direction:column; gap:12px;}
.contact-card{background:none; border:none; box-shadow:none; display:flex; align-items:center; gap:16px; padding:16px 0; border-radius:0; border-top:1px solid var(--border); transition:none;}
a.contact-card:hover{transform:translateY(-2px); box-shadow:0 16px 34px -22px rgba(34,24,46,.3);}
.cc-ic{width:30px; height:30px; border-radius:0; flex:none; display:flex; align-items:center; justify-content:center; background:none; box-shadow:none; color:var(--accent-soft);}
.cc-ic svg{width:22px; height:22px;}
.cc-ic.c-purple{background:linear-gradient(150deg,rgba(var(--c1-rgb),.22),rgba(var(--c1-rgb),.11)); color:var(--c1-ink);}
.cc-ic.c-blue{background:linear-gradient(150deg,rgba(var(--c2-rgb),.22),rgba(var(--c2-rgb),.11)); color:var(--c2-ink);}
.cc-ic.c-green{background:linear-gradient(150deg,rgba(var(--c3-rgb),.22),rgba(var(--c3-rgb),.11)); color:var(--c3-ink);}
.cc-tx{display:flex; flex-direction:column; line-height:1.25;}
.cc-tx small{font-size:11.5px; font-weight:600; color:var(--text-mute);}
.cc-tx strong{font-size:15.5px; font-weight:700;}
.contact-cta{margin-top:6px; align-self:flex-start;}
.contact-map{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-strong); min-height:340px;
box-shadow:0 22px 50px -32px rgba(34,24,46,.3);}
.contact-map iframe{width:100%; height:100%; min-height:340px; border:0; display:block;}
html:not([data-theme="light"]) .contact-map iframe{filter:invert(.92) hue-rotate(180deg);}
@media (max-width:900px){
.news-grid, .contact-grid{grid-template-columns:1fr;}
.contact-cta{width:100%; justify-content:center;}
.contact-map{min-height:260px;} .contact-map iframe{min-height:260px;}
}
/* ===== affinage mobile ===== */
@media (max-width:900px){
.navlinks{
display:none; position:absolute; top:60px; left:0; right:0; flex-direction:column; align-items:stretch;
background:var(--bg); padding:18px 22px 22px; border-bottom:1px solid var(--border);
gap:4px; max-height:calc(100svh - 60px); overflow-y:auto; box-shadow:0 24px 40px -24px rgba(0,0,0,.35);
}
.navlinks.open{display:flex;}
.navlinks > a{padding:12px 4px; border-bottom:1px solid var(--border); font-size:16px;}
.navdrop{width:100%;}
.navdrop-label{justify-content:space-between; padding:12px 4px; border-bottom:1px solid var(--border);}
.navdrop-label a{font-size:16px;}
.navdrop-menu{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
border:none; padding:4px 0 10px 8px; min-width:0; width:100%; display:none; background:transparent;}
.navdrop.force-open .navdrop-menu{display:block;}
.navright{gap:8px;}
.navright .btn{padding:10px 14px; font-size:13px;}
}
@media (max-width:640px){
.neo-banner-content{padding:86px 18px 40px; gap:11px;}
.neo-logo{width:94vw;}
.neo-banner-sub{font-size:15.5px; max-width:30ch;}
.neo-banner-content .hero-lead-list{max-width:100%;}
.neo-banner-content .hero-lead-list li{font-size:13.5px; gap:9px; padding:4px 0;}
.hero{padding:44px 0 30px;}
.trust-grid{grid-template-columns:1fr;}
.hero-stats{grid-template-columns:1fr 1fr; gap:12px;}
.sec-head{margin-bottom:32px;}
.eyebrow{font-size:13.5px; padding:6px 15px 6px 6px;}
.eyebrow-ic{width:28px; height:28px; border-radius:9px;}
.eyebrow-ic svg{width:17px; height:17px;}
.uc-photo-title{font-size:17px;}
.uc-photo-bul li{font-size:12.5px;}
.ihm-block{padding:22px 18px 0;}
.ihm-shots{min-height:180px;}
.ihm-desk{width:100%; max-width:none;}
.ihm-mob{display:none;}
.tech-hero-in{padding:22px 18px;}
.staticmap.dz-photo svg, .staticmap.af-plain svg{padding:14px 8px 4px;}
.sm-legend{gap:10px; font-size:11.5px; padding:12px 16px 14px;}
.pcard-badge{width:58px; height:58px; padding:7px; top:14px; inset-inline-end:14px;}
.pcard-badge.wide{width:84px; height:52px;}
.pcard-btn{width:100%; justify-content:center;}
.price-grid{grid-template-columns:1fr;}
.foot-grid{grid-template-columns:1fr; gap:26px;}
.modal-head{padding:24px 22px 20px;}
.modal-body{padding:20px 22px 24px;}
.news-li, .news-links{padding:20px 18px;}
.contact-card{padding:14px 15px; gap:12px;}
.cc-tx strong{font-size:14.5px;}
.social-rail{display:none;}
}
@media (max-width:420px){
.hero-stats{grid-template-columns:1fr;}
.neo-banner-content .hero-lead-list li{font-size:13px;}
}
/* ===== frise de déploiement (bannière) ===== */
@media (max-width:1080px){ .neo-banner-content{padding:92px 24px 48px;} }
/* ===== contact : 2 adresses ===== */
.cc-tels{display:flex; flex-wrap:wrap; gap:6px 14px;}
.cc-tels a{font-size:15.5px; font-weight:700;}
.cc-tels a:hover{color:var(--purple);}
.contact-card.static{cursor:default;}
.contact-maps{display:flex; flex-direction:column; gap:14px;}
.contact-map{position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-strong);
min-height:200px; box-shadow:0 22px 50px -32px rgba(34,24,46,.3);}
.contact-map iframe{width:100%; height:100%; min-height:200px; border:0; display:block;}
.map-tag{position:absolute; z-index:2; top:12px; inset-inline-start:12px; font-size:11px; font-weight:800;
letter-spacing:.05em; text-transform:uppercase; padding:5px 12px; border-radius:999px;
background:rgba(255,255,255,.94); color:#18141d; box-shadow:0 6px 16px -8px rgba(0,0,0,.5);}
.map-link{font-size:13px; font-weight:700; color:var(--purple); text-decoration:underline; text-underline-offset:3px;}
.map-link:hover{color:var(--purple-deep);}
.about-sub{padding:56px 0 0;}
.about-sub + .about-sub{padding-top:52px;}
.about-subwrap{max-width:1240px; margin:0 auto; padding:0;}
.about-sub .sec-head{margin-bottom:34px;}
.about-sub#news{border-top:1px solid var(--border); margin-top:56px;}
.about-sub#contact{border-top:1px solid var(--border); margin-top:52px; padding-bottom:8px;}
/* ===== mode sombre : rattrapage des textes et fonds codés en dur ===== */
html:not([data-theme="light"]) .oc-strong{color:#f6f3f9;}
html:not([data-theme="light"]) .hs-value{color:#f6f3f9;}
html:not([data-theme="light"]) .pcard-tag{color:#ffffff;}
html:not([data-theme="light"]) .price-badge{color:#100d14;}
html:not([data-theme="light"]) .eyebrow{color:#e1cef7; border-color:rgba(131,72,199,.42);}
html:not([data-theme="light"]) .hero-lead-ic svg{color:#100d14;}
html:not([data-theme="light"]) .map-tag{background:rgba(28,28,33,.94); color:#f6f3f9;}
html:not([data-theme="light"]) .map-link{color:#d1b4f3;}
html:not([data-theme="light"]) .cc-tels a:hover{color:#d1b4f3;}
html:not([data-theme="light"]) .btn-primary{color:#ffffff;}
html:not([data-theme="light"]) .th-chip{background:rgba(255,255,255,.93); color:#18141d;}
html:not([data-theme="light"]) .modal-head h3, html:not([data-theme="light"]) .modal-head p{color:#ffffff;}
html:not([data-theme="light"]) .modal-eyebrow{color:#ffffff;}
html:not([data-theme="light"]) .wp-tag, html:not([data-theme="light"]) .res-badge{color:#ffffff;}
html:not([data-theme="light"]) .uc-photo-title, html:not([data-theme="light"]) .uc-photo-sub,
html:not([data-theme="light"]) .uc-photo-bul li, html:not([data-theme="light"]) .pcard-cap h3,
html:not([data-theme="light"]) .pcard-bul li, html:not([data-theme="light"]) .neo-banner-sub,
html:not([data-theme="light"]) .tl-date{background:none; color:#ffffff;
text-shadow:0 2px 12px rgba(0,0,0,.72);}
html:not([data-theme="light"]) .iso-badge{border-color:rgba(255,255,255,.2);}
html:not([data-theme="light"]) .pcard-badge{background:rgba(255,255,255,.96);}
html:not([data-theme="light"]) .finalcta-inner{background:var(--surface); border-color:var(--border-strong);}
html:not([data-theme="light"]) .staticmap:not(.dz-photo):not(.af-plain){background:var(--surface);}
html:not([data-theme="light"]) .lead-store{color:#ffffff;}
html:not([data-theme="light"]) svg text.sm-t{fill:#f6f3f9;}
html:not([data-theme="light"]) .theme-toggle{background:var(--surface-2);}
.cc-tel{display:inline-flex; align-items:center; gap:8px;}
.wa-btn{width:26px; height:26px; border-radius:8px; flex:none; display:inline-flex; align-items:center; justify-content:center;
background:rgba(37,211,102,.14); color:#1FA855; border:1px solid rgba(37,211,102,.28); transition:all .16s ease;}
.wa-btn svg{width:15px; height:15px; display:block;}
.wa-btn:hover{background:#25D366; border-color:#25D366; color:#ffffff; transform:translateY(-1px);}
.social-rail-btn.whatsapp{background:rgba(37,211,102,.14); color:#1FA855; border-color:rgba(37,211,102,.26);}
.social-rail-btn.whatsapp:hover{background:#25D366; border-color:#25D366;}
html:not([data-theme="light"]) .wa-btn{background:rgba(37,211,102,.18); color:#5ee39a;}
/* ===== carte Afrique : tracé seul sur photo ===== */
.staticmap.af-outline .af-shape{stroke:#ebdefa; stroke-width:2.2; fill:none;}
.staticmap.af-outline .af-shape + .af-shape{stroke-width:1.6;}
.staticmap.af-outline .sm-orbit{stroke:rgba(221,199,246,.42);}
/* ===== mode sombre : barre de navigation, rail social et surfaces translucides ===== */
html:not([data-theme="light"]) header{background:rgba(16,16,19,0.86); border-bottom-color:rgba(255,255,255,0.10);}
html:not([data-theme="light"]) .navdrop-menu{background:#1c1c21; border-color:rgba(255,255,255,0.14);
box-shadow:0 28px 64px -22px rgba(0,0,0,.75);}
html:not([data-theme="light"]) .navdrop-menu a{color:var(--text-dim);}
html:not([data-theme="light"]) .navdrop-menu a:hover{background:rgba(255,255,255,0.06); color:#ffffff;}
html:not([data-theme="light"]) .navdrop:hover .navdrop-label,
html:not([data-theme="light"]) .navdrop:focus-within .navdrop-label,
html:not([data-theme="light"]) .navdrop.force-open .navdrop-label{background:rgba(255,255,255,0.07);}
html:not([data-theme="light"]) .langdrop-menu{background:#1c1c21; border-color:rgba(255,255,255,0.14);}
html:not([data-theme="light"]) .langdrop-menu button{color:var(--text-dim);}
html:not([data-theme="light"]) .langdrop-menu button:hover{background:rgba(255,255,255,0.06); color:#ffffff;}
html:not([data-theme="light"]) .langdrop-toggle{background:var(--surface-2); border-color:var(--border-strong); color:var(--text-dim);}
html:not([data-theme="light"]) .navmobile-btn{color:var(--text);}
html:not([data-theme="light"]) .navlinks{background:#101013;}
/* le nom de marque dans le menu doit suivre la couleur du texte courant */
.navlinks .oc-strong, .navdrop-label .oc-strong{color:inherit;}
html:not([data-theme="light"]) .navlinks .oc-strong{color:inherit;}
/* rail social : fond et icônes lisibles en sombre */
html:not([data-theme="light"]) .social-rail{background:rgba(28,28,33,0.86); border-color:rgba(255,255,255,0.14);
box-shadow:0 20px 50px -20px rgba(0,0,0,.7);}
html:not([data-theme="light"]) .social-rail-label{color:var(--text-mute);}
html:not([data-theme="light"]) .social-rail-line{background:rgba(255,255,255,0.2);}
html:not([data-theme="light"]) .social-rail-btn.mailto{background:rgba(131,72,199,.26); color:#d9c0f5; border-color:rgba(131,72,199,.42);}
html:not([data-theme="light"]) .social-rail-btn.whatsapp{background:rgba(37,211,102,.22); color:#5ee39a; border-color:rgba(37,211,102,.40);}
html:not([data-theme="light"]) .social-rail-btn.linkedin{background:rgba(10,102,194,.28); color:#7ab8f5; border-color:rgba(10,102,194,.45);}
html:not([data-theme="light"]) .social-rail-btn.facebook{background:rgba(24,119,242,.28); color:#7fb6fa; border-color:rgba(24,119,242,.45);}
html:not([data-theme="light"]) .social-rail-btn.tiktok{background:rgba(255,255,255,.14); color:#f6f3f9; border-color:rgba(255,255,255,.28);}
html:not([data-theme="light"]) .social-rail-btn:hover{color:#ffffff;}
html:not([data-theme="light"]) .social-rail-btn.tiktok:hover{background:#f6f3f9; color:#010101; border-color:#f6f3f9;}
.neo-banner-content{padding:104px 34px 64px; flex:1 1 auto; justify-content:center;}
/* ===== bloc console OneCloud ===== */
.console-block{margin-top:28px; border-radius:var(--radius-lg); overflow:hidden;
background:linear-gradient(160deg,#1f142b 0%,#2f1a47 46%,#211233 100%);
box-shadow:0 30px 70px -34px rgba(34,24,46,.5);}
.console-head{text-align:center; padding:40px 32px 0; max-width:820px; margin:0 auto;}
.console-kicker{display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:.02em; text-transform:none;
color:#d9c0f5; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18);
padding:6px 14px; border-radius:999px; margin-bottom:16px;}
.console-head h3{color:#ffffff; font-size:clamp(22px,2.6vw,32px); line-height:1.2; letter-spacing:-.02em; margin-bottom:12px;}
.console-head p{color:rgba(255,255,255,.8); font-size:14.5px; line-height:1.5; margin-bottom:18px;}
.console-head
.console-stage{position:relative; display:flex; align-items:flex-end; justify-content:center;
gap:18px; padding:38px 32px 0; min-height:300px;}
.console-browser{flex:1 1 auto; max-width:660px; border-radius:14px 14px 0 0; overflow:hidden;
border:1px solid rgba(255,255,255,.22); border-bottom:none; background:#16101d;
box-shadow:0 26px 60px -20px rgba(0,0,0,.75);}
.cb-bar{display:flex; align-items:center; gap:6px; padding:9px 14px; background:rgba(255,255,255,.09);
border-bottom:1px solid rgba(255,255,255,.12);}
.cb-bar i{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.32); flex:none;}
.cb-bar i:first-child{background:#ff5f57;} .cb-bar i:nth-child(2){background:#febc2e;} .cb-bar i:nth-child(3){background:#28c840;}
.cb-bar em{margin-inline-start:12px; font-style:normal; font-size:11.5px; color:rgba(255,255,255,.6);
background:rgba(255,255,255,.08); padding:3px 12px; border-radius:999px;}
.console-browser img{display:block; width:100%;}
.console-phone{flex:0 0 auto; width:132px; text-align:center;}
.console-phone img{display:block; width:100%; border-radius:16px 16px 0 0;
border:1px solid rgba(255,255,255,.28); border-bottom:none; box-shadow:0 22px 46px -16px rgba(0,0,0,.8);}
.console-phone figcaption{font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
color:rgba(255,255,255,.55); padding-bottom:8px; order:-1; margin-bottom:9px;}
.console-phone{display:flex; flex-direction:column;}
.console-phone.dark{margin-bottom:22px;}
.console-feats{list-style:none; margin:0; padding:30px 32px 34px; display:grid;
grid-template-columns:repeat(3,1fr); gap:18px 26px; border-top:1px solid rgba(255,255,255,.10); margin-top:0;}
.console-feats li{display:flex; align-items:flex-start; gap:12px; color:rgba(255,255,255,.86);
font-size:14px; line-height:1.5;}
.cf-ic{width:36px; height:36px; border-radius:11px; flex:none; display:flex; align-items:center; justify-content:center;
box-shadow:inset 0 1px 0 rgba(255,255,255,.16);}
.cf-ic svg{width:20px; height:20px; display:block;}
.cf-ic.c-purple{background:rgba(var(--c1-rgb),.24); color:var(--c1-ink);}
.cf-ic.c-blue{background:rgba(var(--c2-rgb),.24); color:var(--c2-ink);}
.cf-ic.c-green{background:rgba(var(--c3-rgb),.24); color:var(--c3-ink);}
.cf-ic.c-lime{background:rgba(var(--c4-rgb),.24); color:var(--c4-ink);}
@media (max-width:980px){
.console-feats{grid-template-columns:1fr 1fr;}
.console-stage{gap:12px; padding:30px 20px 0; min-height:250px;}
.console-phone{width:106px;}
}
@media (max-width:680px){
.console-head{padding:30px 20px 0;}
.console-stage{flex-direction:column; align-items:center; padding:26px 18px 0; min-height:0;}
.console-browser{max-width:100%; border-radius:14px; border-bottom:1px solid rgba(255,255,255,.22);}
.console-phone{width:132px; flex-direction:row; align-items:center; gap:12px; margin:0;}
.console-phone.dark{margin-bottom:0;}
.console-phone img{border-radius:14px; border-bottom:1px solid rgba(255,255,255,.28);}
.console-phone figcaption{display:none;}
.console-stage{padding-bottom:24px;}
.console-feats{grid-template-columns:1fr; padding:24px 20px 28px;}
}
/* ===== trajectoire de déploiement ===== */
.roadmap{position:relative; padding:56px 0 64px; background:var(--bg-soft);
border-bottom:1px solid var(--border); overflow:hidden;}
html:not([data-theme="light"]) .roadmap::before{opacity:.35;}
.roadmap::before{content:""; position:absolute; inset:0;
background:radial-gradient(70% 120% at 12% 0%, rgba(131,72,199,.10), transparent 60%),
radial-gradient(60% 120% at 90% 100%, rgba(123,39,220,.10), transparent 60%);}
.roadmap .wrap{position:relative; z-index:1;}
.rm-head{text-align:center; margin-bottom:38px;}
.rm-eyebrow{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.10em; text-transform:uppercase;
color:var(--purple-deep); background:var(--grad-soft); border:1px solid rgba(123,39,220,.24);
padding:6px 16px; border-radius:999px; margin-bottom:14px;}
.rm-head h2{font-size:clamp(24px,3vw,36px); letter-spacing:-.025em;}
.rm-rail{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr);
gap:22px; position:relative;}
.rm-rail::before{content:""; position:absolute; top:23px; left:16%; right:16%; height:3px; border-radius:3px;
background:var(--grad-marque); opacity:.30;}
.rm-rail::after{content:""; position:absolute; top:23px; left:16%; width:26%; height:3px; border-radius:3px;
background:linear-gradient(90deg,var(--c1-ink),var(--c2-ink));
box-shadow:0 0 14px rgba(123,39,220,.6); animation:rmFlow 4.5s ease-in-out infinite;}
@keyframes rmFlow{0%{left:16%; width:8%; opacity:.2} 45%{width:26%; opacity:1} 100%{left:74%; width:8%; opacity:.2}}
.rm-step{position:relative; display:flex; flex-direction:column; align-items:center; padding-top:0;}
.rm-node{width:48px; height:48px; border-radius:16px; display:flex; align-items:center; justify-content:center;
background:var(--surface); border:1px solid var(--border-strong); position:relative; z-index:2;
box-shadow:0 10px 24px -14px rgba(34,24,46,.4); transition:transform .2s ease, box-shadow .2s ease;}
.rm-num{font-size:17px; font-weight:800; color:var(--text-mute);}
.rm-step.is-now .rm-node{background:var(--grad-action); border-color:transparent;
box-shadow:0 0 0 7px rgba(150,94,215,.16), 0 12px 26px -12px rgba(108,66,157,.6);}
.rm-step.is-now .rm-card{position:relative; border-color:transparent; background:var(--surface);
box-shadow:0 20px 44px -22px rgba(108,66,157,.45);}
.rm-step.is-now .rm-card::before{content:""; position:absolute; inset:-2px; border-radius:calc(var(--radius-md) + 2px);
padding:2px; background:var(--grad); z-index:0;
-webkit-mask:linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0);
-webkit-mask-composite:xor; mask:linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0);
mask-composite:exclude; animation:rmGlow 3.2s ease-in-out infinite;}
.rm-step.is-now .rm-card::after{content:""; position:absolute; inset:-14px; border-radius:26px; z-index:-1;
background:radial-gradient(60% 70% at 50% 50%, rgba(131,72,199,.20), rgba(123,39,220,.14) 55%, transparent 75%);
animation:rmHalo 3.2s ease-in-out infinite;}
.rm-step.is-now .rm-card > *{position:relative; z-index:1;}
@keyframes rmGlow{0%,100%{opacity:.75} 50%{opacity:1}}
@keyframes rmHalo{0%,100%{opacity:.55; transform:scale(.98)} 50%{opacity:1; transform:scale(1.02)}}
@media (prefers-reduced-motion:reduce){
.rm-step.is-now .rm-card::before, .rm-step.is-now .rm-card::after{animation:none;}
}
.rm-step.is-now .rm-num{color:#ffffff;}
.rm-card{margin-top:18px; width:100%; padding:22px 22px 24px; border-radius:var(--radius-md);
background:var(--surface); border:1px solid var(--border); text-align:center;
box-shadow:0 16px 38px -26px rgba(34,24,46,.32); transition:transform .2s ease, box-shadow .2s ease;}
.rm-step:hover .rm-card{transform:translateY(-4px); box-shadow:0 24px 50px -24px rgba(34,24,46,.4);}
.rm-step:hover .rm-node{transform:translateY(-3px);}
.rm-date{display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
color:var(--text-mute); margin-bottom:9px;}
.rm-card h3{display:flex; align-items:center; justify-content:center; gap:9px;
font-size:19px; letter-spacing:-.02em; margin-bottom:7px;}
.rm-card p{font-size:14px; color:var(--text-dim); line-height:1.5;}
.rm-badge{display:inline-block; margin-top:12px; font-size:10.5px; font-weight:800; letter-spacing:.06em;
text-transform:uppercase; padding:5px 12px; border-radius:999px;}
.rm-badge.live{background:rgba(99,33,174,.14); color:#491a7e; border:1px solid rgba(99,33,174,.3);}
.rm-flag{display:inline-block; width:30px; height:21px; border-radius:4px; overflow:hidden; flex:none;
box-shadow:0 0 0 1px var(--border-strong);}
.rm-africa{display:inline-block; width:24px; height:27px; color:var(--purple); flex:none;}
.rm-flag svg, .rm-africa svg{display:block; width:100%; height:100%;}
html:not([data-theme="light"]) .rm-node{background:var(--surface-2);}
html:not([data-theme="light"]) .rm-badge.live{background:rgba(99,33,174,.18); color:#a87fd6; border-color:rgba(99,33,174,.34);}
html:not([data-theme="light"]) .rm-africa{color:#d1b4f3;}
@media (max-width:860px){
.roadmap{padding:44px 0 48px;}
.rm-rail{grid-template-columns:1fr; gap:0; }
.rm-rail::before{top:24px; bottom:34px; left:23px; right:auto; width:3px; height:auto;
background:linear-gradient(180deg,#47039c,#04acff 52%,#05ca5c);}
.rm-rail::after{display:none;}
.rm-step{flex-direction:row; align-items:flex-start; gap:16px; padding-bottom:18px;}
.rm-node{width:46px; height:46px; flex:none;}
.rm-card{margin-top:0; text-align:start;}
.rm-card h3{justify-content:flex-start;}
}
@media (prefers-reduced-motion:reduce){ .rm-rail::after{animation:none;} }
/* ===== carte PaaS / SaaS ===== */
.feat-card.paas-card{grid-column:1 / -1; padding:0; overflow:hidden;}
.paas-grid{display:grid; grid-template-columns:1fr 1fr;}
.paas-side{padding:26px 26px 28px;}
.paas-side + .paas-side{border-inline-start:1px solid var(--border);}
.paas-tag{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
padding:5px 13px; border-radius:999px; margin-bottom:12px;
background:rgba(123,39,220,.14); color:#4e198b; border:1px solid rgba(123,39,220,.28);}
.paas-tag.alt{background:rgba(131,72,199,.14); color:var(--purple-deep); border-color:rgba(131,72,199,.28);}
.paas-side h3{font-size:18px; margin-bottom:8px;}
.paas-side > p{font-size:14px; color:var(--text-dim); line-height:1.55;}
.paas-vs{margin-top:14px; padding:11px 14px; border-radius:10px; background:var(--bg-soft);
border:1px solid var(--border); font-size:13px !important;}
.paas-vs-l{display:block; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
color:var(--text-mute); margin-bottom:4px;}
.paas-gain{position:relative; margin-top:12px; padding-inline-start:22px; font-size:13.5px !important;
color:var(--text) !important; font-weight:600;}
.paas-gain::before{content:""; position:absolute; inset-inline-start:0; top:5px; width:13px; height:13px;
border-radius:4px; background:linear-gradient(135deg,var(--c1-ink),var(--c2-ink));}
html:not([data-theme="light"]) .paas-tag{color:#bc91ed;}
html:not([data-theme="light"]) .paas-tag.alt{color:#d1b4f3;}
@media (max-width:760px){
.paas-grid{grid-template-columns:1fr;}
.paas-side + .paas-side{border-inline-start:none; border-top:1px solid var(--border);}
.paas-side{padding:22px 20px 24px;}
}
/* ===== boutons de la barre de navigation : même trait fin que le sélecteur de langue ===== */
.navright .btn-sm{
padding:7px 15px; font-size:12.5px; font-weight:500; border-radius:999px;
border:1px solid var(--border-strong); background:none; color:var(--text-dim);
box-shadow:none; transition:all .15s ease;
}
.navright .btn-sm:hover{transform:none; border-color:var(--text-mute); color:var(--text); background:none; box-shadow:none;}
.navright .btn-primary.btn-sm{
background:none; color:var(--purple-deep); border-color:rgba(131,72,199,.42); font-weight:600;
}
.navright .btn-primary.btn-sm:hover{
background:var(--grad-action); border-color:transparent; color:#ffffff; filter:none;
box-shadow:0 6px 18px -8px rgba(108,66,157,.55);
}
.navright .btn-sm:active{background:var(--btn-click); border-color:var(--btn-click); color:#ffffff;}
html:not([data-theme="light"]) .navright .btn-primary.btn-sm{color:#d1b4f3; border-color:rgba(131,72,199,.5);}
/* ===== pilier 6 : logos partenaires dans l'image ===== */
.pcard-partners{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px;}
.pp-logo{display:flex; align-items:center; justify-content:center; height:54px; padding:8px 16px;
border-radius:12px; background:rgba(255,255,255,.95); box-shadow:0 10px 24px -12px rgba(0,0,0,.6);
transition:transform .16s ease, box-shadow .16s ease;}
.pp-logo:hover{transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(0,0,0,.7);}
.pp-logo img{position:static; width:auto; height:100%; max-width:150px; object-fit:contain; display:block;}
@media (max-width:640px){ .pp-logo{height:44px; padding:6px 12px;} .pp-logo img{max-width:120px;} }
/* ===== bouton de thème aligné sur les boutons de la barre ===== */
.navright{display:flex; align-items:center; gap:10px;}
.theme-toggle{width:auto; height:auto; padding:7px 13px; border-radius:999px;
border:1px solid var(--border-strong); background:none; color:var(--text-dim);}
.theme-toggle svg{width:15px; height:15px;}
.theme-toggle:hover{border-color:var(--text-mute); color:var(--text); background:none;}
html:not([data-theme="light"]) .theme-toggle{background:none;}
/* ===== pastille pays face au titre ===== */
.feat-card .h3-pill{display:inline; margin-inline-end:10px;}
.dz-pill{display:inline-flex; align-items:center; gap:8px; vertical-align:2px;
padding:5px 13px 5px 6px; border-radius:999px; font-size:12.5px; font-weight:800; letter-spacing:.01em;
color:var(--text); background:linear-gradient(135deg, rgba(0,98,51,.12), rgba(210,16,52,.10));
border:1px solid rgba(0,98,51,.30); box-shadow:0 4px 12px -8px rgba(0,98,51,.5);}
.dz-pill-flag{width:24px; height:17px; border-radius:4px; overflow:hidden; flex:none;
box-shadow:0 0 0 1px rgba(255,255,255,.7);}
.dz-pill-flag svg{display:block; width:100%; height:100%;}
html:not([data-theme="light"]) .dz-pill{color:#f4f4f6; border-color:rgba(76,22,138,.42);
background:linear-gradient(135deg, rgba(76,22,138,.18), rgba(210,16,52,.14));}
/* ===== pastille pays dans la barre de navigation ===== */
.nav-dz{display:inline-flex; align-items:center; gap:9px; flex:none; margin-inline-start:14px;
padding:6px 8px 6px 15px; border-radius:999px; font-size:14.5px; font-weight:500;
letter-spacing:0; text-transform:none; color:var(--text-dim); white-space:nowrap;
background:linear-gradient(135deg, rgba(0,98,51,.10), rgba(123,39,220,.10));
border:1px solid var(--border-strong);}
.nav-dz-flag{width:26px; height:18px; border-radius:4px; overflow:hidden; flex:none;
box-shadow:0 0 0 1px rgba(255,255,255,.65);}
.nav-dz-flag svg{display:block; width:100%; height:100%;}
html:not([data-theme="light"]) .nav-dz{color:#cdacf2; border-color:rgba(255,255,255,.18);
background:linear-gradient(135deg, rgba(76,22,138,.16), rgba(123,39,220,.14));}
@media (max-width:1180px){ .nav-dz span:last-child{display:none;} .nav-dz{padding:5px 6px; margin-inline-start:10px;} }
.nd-ic.li{background:rgba(10,102,194,.14);} .nd-ic.li svg{color:#0A66C2;}
html:not([data-theme="light"]) .nd-ic.li{background:rgba(10,102,194,.26);} html:not([data-theme="light"]) .nd-ic.li svg{color:#7ab8f5;}
/* ===== barre de navigation : plus compacte et plus contrastée ===== */
.navlinks{gap:2px;}
.navlinks > a{font-size:13.5px; font-weight:600; color:var(--text); padding:8px 11px; border-radius:999px;}
.navlinks > a:hover{background:rgba(17,12,22,.05);}
.navdrop-label{padding:8px 10px; gap:5px;}
.navdrop-label a{font-size:13.5px; font-weight:600; color:var(--text);}
.navdrop-menu a{font-size:13px; padding:8px 11px; color:var(--text);}
.navdrop-menu-head{font-size:10.5px; padding:4px 11px 7px;}
.navdrop-menu.wide{min-width:520px;}
.nd-ic{width:24px; height:24px; border-radius:7px;}
.nd-ic svg{width:14px; height:14px;}
html:not([data-theme="light"]) .navlinks > a{color:var(--text);}
html:not([data-theme="light"]) .navlinks > a:hover{background:rgba(255,255,255,.07);}
html:not([data-theme="light"]) .navdrop-label a{color:var(--text);}
html:not([data-theme="light"]) .navdrop-menu a{color:var(--text-dim);}
@media (max-width:1240px){ .navlinks > a, .navdrop-label a{font-size:13px; padding:7px 8px;} }
/* ===== cas d'usage mis en avant ===== */
.uc-tab.is-featured{position:relative; border-color:transparent;}
.uc-tab.is-featured::before{content:""; position:absolute; inset:-2px; border-radius:999px; padding:2px;
background:var(--grad); -webkit-mask:linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0);
-webkit-mask-composite:xor; mask:linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0);
mask-composite:exclude; animation:ucGlow 3.2s ease-in-out infinite;}
.uc-tab.is-featured > *{position:relative; z-index:1;}
@keyframes ucGlow{0%,100%{opacity:.7} 50%{opacity:1}}
.uc-panel[data-uc-panel="startups"] .uc-photo{position:relative;}
.uc-panel[data-uc-panel="startups"] .uc-photo::after{content:""; position:absolute; inset:0; z-index:3;
border-radius:inherit; pointer-events:none; padding:3px; background:var(--grad);
-webkit-mask:linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0);
-webkit-mask-composite:xor; mask:linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0);
mask-composite:exclude; animation:ucGlow 3.2s ease-in-out infinite;}
.uc-tag-ic{display:inline-flex; width:16px; height:16px;}
.uc-tag-ic svg{width:16px; height:16px;}
.uc-tag-ic .duo-b{fill:#ffffff; opacity:.45;} .uc-tag-ic .duo-f{fill:#ffffff;}
@media (prefers-reduced-motion:reduce){
.uc-tab.is-featured::before, .uc-panel[data-uc-panel="startups"] .uc-photo::after{animation:none;}
}
/* ===== marque OneCloud utilisée comme pictogramme ===== */
.oc-mark{width:100%; height:100%; display:block; border-radius:22%;}
.eyebrow-ic.brand{background:none; box-shadow:none; padding:0; width:26px; height:26px; border-radius:7px; overflow:hidden;}
.console-kicker.brand{display:inline-flex; align-items:center; gap:9px; padding-inline-start:6px;}
.console-kicker .oc-mark.sm{width:17px; height:17px; border-radius:5px; flex:none;}
/* ===== cartes : marqueurs et typographie ===== */
.sm-mark{filter:drop-shadow(0 2px 5px rgba(0,0,0,.5));}
.staticmap.af-plain .sm-mark, .staticmap.af-outline .sm-mark{filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));}
.staticmap .sm-t{font-family:'Inter',system-ui,sans-serif;
font-size:15px; font-weight:800; letter-spacing:-.01em;}
.staticmap .sm-s{font-family:'Inter',system-ui,sans-serif;
font-size:11.5px; font-weight:600; letter-spacing:.01em;}
.lg-mark{width:15px; height:15px; border-radius:4px; flex:none; position:relative; display:inline-block;
background:#18141d;}
.lg-mark.own{background:#8f53d4;}
/* sites anonymises : un seul et meme marqueur pour tous */
.lg-mark.site{background:#b98bff;}
.staticmap.dz-photo .lg-mark.site{background:#b98bff;}
.staticmap.dz-photo .lg-mark.site::after{background:#ffffff;} .lg-mark.build{background:#6f6f7a;} .lg-mark.other{background:#18141d;}
.lg-mark::after{content:""; position:absolute; left:34%; top:22%; width:26%; height:56%;
background:#ffffff; clip-path:polygon(0 26%,100% 0,100% 100%,0 74%);}
.staticmap.dz-photo .lg-mark.other{background:#f4f4f6;}
.staticmap.dz-photo .lg-mark.other::after{background:#18141d;}
/* ===== texte : segment avant les deux-points en gras ===== */
.law-flag{display:inline-block; width:1.05em; height:0.72em; border-radius:2px; overflow:hidden;
margin-inline-start:7px; vertical-align:-1px; box-shadow:0 0 0 1px rgba(0,0,0,.14);}
.law-flag svg{display:block; width:100%; height:100%;}
.lead-strong{font-weight:800; color:var(--text);}
.hero-lead-list .lead-strong, .uc-photo-bul .lead-strong, .pcard-bul .lead-strong{color:#ffffff;}
.console-feats .lead-strong{color:#ffffff;}
/* ===== mode sombre : neutraliser les halos sur les textes posés sur photo ===== */
html:not([data-theme="light"]) .uc-photo-title,
html:not([data-theme="light"]) .uc-photo-sub,
html:not([data-theme="light"]) .uc-photo-bul li,
html:not([data-theme="light"]) .uc-photo-bul li span,
html:not([data-theme="light"]) .pcard-cap h3,
html:not([data-theme="light"]) .pcard-bul li,
html:not([data-theme="light"]) .neo-banner-sub,
html:not([data-theme="light"]) .neo-banner-content .hero-lead-list li span,
html:not([data-theme="light"]) .th-kicker,
html:not([data-theme="light"]) .console-head h3,
html:not([data-theme="light"]) .console-head p{
text-shadow:0 2px 12px rgba(0,0,0,.75) !important;
-webkit-text-stroke:0 !important;
}
html:not([data-theme="light"]) .uc-photo-tag,
html:not([data-theme="light"]) .pcard-tag{
background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.34); color:#ffffff;
text-shadow:none !important;
}
html:not([data-theme="light"]) .uc-photo img,
html:not([data-theme="light"]) .pcard img,
html:not([data-theme="light"]) .neo-bg img{filter:none !important;}
html:not([data-theme="light"]) .staticmap.dz-photo .sm-t,
html:not([data-theme="light"]) .staticmap.dz-photo .sm-s{filter:none;}
/* ===== cartes partenaires : contenu centré et logos alignés ===== */
.pcard-cap{align-items:center; text-align:center; padding:26px 24px 24px;}
[dir="rtl"] .pcard-cap{align-items:center; text-align:center;}
.pcard-bul{align-items:center;}
.pcard-bul li{padding-inline-start:0; text-align:center; max-width:52ch;}
.pcard-bul li::before{display:none;}
.pcard-partners{justify-content:center; margin-top:14px;}
.pcard-btn{align-self:center; margin-top:12px;}
.pp-logo{height:56px; min-width:120px;}
.pp-logo img{max-width:150px;}
.pcard.has-logos .pcard-cap, .pcard.has-logo .pcard-cap{padding-bottom:24px;}
@media (max-width:640px){ .pp-logo{height:46px; min-width:96px;} .pp-logo img{max-width:118px;} }
/* ===== pictogramme IA, visible partout où l'IA est évoquée ===== */
.ai-ic{display:inline-flex; width:1.25em; height:1.25em; vertical-align:-.24em; margin-inline-start:7px; flex:none;
color:var(--purple);}
.ai-ic svg{width:100%; height:100%; display:block;}
.ai-ic .duo-b{fill:currentColor; opacity:.30;}
.ai-ic .duo-f{fill:currentColor;}
.ai-ic .duo-w{fill:#ffffff;}
html:not([data-theme="light"]) .ai-ic{color:#d1b4f3;}
.uc-photo-bul .ai-ic, .pcard-bul .ai-ic, .hero-lead-list .ai-ic,
.uc-photo-sub .ai-ic, .console-feats .ai-ic{color:#d8bff4;}
.uc-photo-bul .ai-ic .duo-w, .pcard-bul .ai-ic .duo-w,
.hero-lead-list .ai-ic .duo-w, .console-feats .ai-ic .duo-w{fill:#18141d;}
.ai-badge{position:absolute; z-index:3; top:14px; inset-inline-end:14px; width:44px; height:44px;
border-radius:13px; display:flex; align-items:center; justify-content:center;
background:rgba(255,255,255,.94); box-shadow:0 10px 24px -12px rgba(0,0,0,.6);}
.ai-badge .ai-ic{width:26px; height:26px; margin:0; vertical-align:0; color:var(--purple-deep);}
/* ===== listes des cartes partenaires : puces à gauche avec picto ===== */
.pcard-cap{align-items:flex-start; text-align:start;}
[dir="rtl"] .pcard-cap{align-items:flex-end; text-align:right;}
.pcard-cap h3{text-align:start;}
.pcard-bul{align-items:stretch; gap:9px;}
.pcard-bul li{display:flex; align-items:flex-start; gap:11px; padding-inline-start:0; text-align:start; max-width:62ch;}
.pb-ic{width:26px; height:26px; border-radius:8px; flex:none; display:flex; align-items:center; justify-content:center;
margin-top:1px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.24);
box-shadow:inset 0 1px 0 rgba(255,255,255,.28);}
.pb-ic svg{width:16px; height:16px; display:block;}
.pb-ic .duo-b{fill:currentColor; opacity:.45;} .pb-ic .duo-f{fill:currentColor;} .pb-ic .duo-w{fill:#18141d;}
.pb-ic.c-purple{color:var(--c1-ink);} .pb-ic.c-blue{color:var(--c2-ink);}
.pb-ic.c-green{color:var(--c3-ink);} .pb-ic.c-lime{color:var(--c4-ink);}
.pcard-partners{justify-content:flex-start;}
.pcard-btn{align-self:flex-start;}
.pcard-partners.eq{gap:10px;}
.pcard-partners.eq .pp-logo{height:46px; min-width:88px; padding:7px 12px;}
.pcard-partners.eq .pp-logo img{max-width:108px;}
.pp-logo.sq{min-width:56px;} .pp-logo.sq img{max-width:44px;}
@media (max-width:640px){
.pcard-partners.eq .pp-logo{height:38px; min-width:70px; padding:6px 9px;}
.pcard-partners.eq .pp-logo img{max-width:84px;}
}
/* ===== cartes partenaires : hauteur homogène, titres alignés, logos discrets ===== */
.pcard-grid{align-items:stretch;}
.pcard{display:flex;}
.pcard-cap{position:relative; inset:auto; width:100%; margin-top:auto; padding:24px 24px 22px; gap:9px;}
.pcard{min-height:340px;}
.pcard.wide{min-height:360px;}
.pcard-cap h3{font-size:clamp(18px,1.9vw,23px); line-height:1.2; margin:0;}
.pcard-bul li{font-size:13px; line-height:1.45;}
.pcard-bul{gap:7px;}
/* logos : transparents, cadrés, plus petits */
.pcard-partners{gap:8px; margin-top:12px; align-items:center;}
.pp-logo{height:34px; min-width:0; padding:0 6px; border-radius:8px;
background:rgba(255,255,255,.92); box-shadow:0 6px 16px -10px rgba(0,0,0,.55);
display:inline-flex; align-items:center; justify-content:center;}
.pp-logo img{position:static; height:22px; width:auto; max-width:96px; object-fit:contain; display:block;}
.pp-logo.sq{padding:0 4px;} .pp-logo.sq img{max-width:26px; height:26px;}
.pcard-partners.eq{gap:7px;}
.pcard-partners.eq .pp-logo{height:30px; padding:0 6px;}
.pcard-partners.eq .pp-logo img{height:19px; max-width:78px;}
.pp-logo:hover{transform:translateY(-2px); box-shadow:0 10px 22px -10px rgba(0,0,0,.6);}
@media (max-width:640px){
.pcard-partners .pp-logo{height:28px;} .pcard-partners .pp-logo img{height:18px; max-width:74px;}
.pcard-cap{padding:20px 18px 18px;} .pcard{min-height:300px;}
}
.map-brand{display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap; text-align:start;}
.map-brand.over.center{position:absolute; z-index:4; inset-inline-start:50%; top:50%;
transform:translate(-50%,-50%); justify-content:center; align-items:center; gap:20px;
width:min(640px, calc(100% - 60px)); padding:0; background:none; border:none; box-shadow:none;
pointer-events:none; text-align:start;}
[dir="rtl"] .map-brand.over.center{transform:translate(50%,-50%);}
.map-brand.over .map-brand-mark{width:clamp(72px,7vw,104px); height:clamp(72px,7vw,104px);
border-radius:22%; box-shadow:0 16px 40px -14px rgba(0,0,0,.75);}
.map-brand.over .map-brand-tx strong{font-size:clamp(30px,3.6vw,46px); color:#ffffff; margin-bottom:6px;
text-shadow:0 3px 18px rgba(0,0,0,.75);}
.map-brand.over .map-brand-tx span{font-size:clamp(13px,1.35vw,15.5px); color:rgba(255,255,255,.94);
line-height:1.5; text-shadow:0 2px 12px rgba(0,0,0,.8);}
@media (max-width:820px){
.map-brand.over.center{position:static; transform:none; width:auto; margin:16px 16px 0;
flex-direction:column; text-align:center; gap:12px;}
[dir="rtl"] .map-brand.over.center{transform:none;}
}
.map-brand-mark{width:92px; height:92px; border-radius:24px; overflow:hidden; flex:none;
box-shadow:0 18px 40px -20px rgba(76,24,135,.65);}
.map-brand-mark svg{width:100%; height:100%; display:block;}
.map-brand-tx{max-width:56ch;}
.map-brand-tx strong{display:block; font-size:clamp(26px,3.2vw,38px); font-weight:800;
letter-spacing:-.03em; line-height:1.1; margin-bottom:8px;}
.map-brand-tx span{display:block; font-size:16px; color:var(--text-dim); line-height:1.55;}
@media (max-width:700px){
.map-brand{flex-direction:column; text-align:center; gap:18px;}
.map-brand-mark{width:72px; height:72px; border-radius:19px;}
.map-brand-tx span{font-size:14.5px;}
}
/* ===== parcours de souscription ===== */
.journey{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; position:relative;}
.journey::before{content:""; position:absolute; top:38px; left:16%; right:16%; height:3px; border-radius:3px;
background:var(--grad-marque); opacity:.28;}
.journey::after{content:""; position:absolute; top:38px; left:16%; width:24%; height:3px; border-radius:3px;
background:linear-gradient(90deg,var(--c1-ink),var(--c2-ink));
box-shadow:0 0 14px rgba(123,39,220,.55); animation:jnFlow 5s ease-in-out infinite;}
@keyframes jnFlow{0%{left:16%; width:6%; opacity:.25} 45%{width:24%; opacity:1} 100%{left:76%; width:6%; opacity:.25}}
.jn-step{position:relative;}
.jn-card{position:relative; z-index:1; height:100%; padding:22px 22px 0; border-radius:var(--radius-lg);
background:var(--surface); border:1px solid var(--border); overflow:hidden;
box-shadow:0 18px 42px -28px rgba(34,24,46,.34); transition:transform .22s ease, box-shadow .22s ease;
opacity:0; transform:translateY(18px); animation:jnIn .6s cubic-bezier(.16,.9,.35,1) forwards;
animation-delay:calc(var(--i) * .16s);}
@keyframes jnIn{to{opacity:1; transform:none}}
.jn-step:hover .jn-card{transform:translateY(-5px); box-shadow:0 26px 54px -26px rgba(34,24,46,.42);}
.jn-num{position:absolute; top:16px; inset-inline-end:18px; font-size:34px; font-weight:800;
letter-spacing:-.04em; color:var(--text); opacity:.10;}
.jn-ic{width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center;
margin-bottom:14px; background:var(--grad-soft); color:var(--purple);
box-shadow:0 8px 18px -10px rgba(131,72,199,.55), inset 0 1px 0 rgba(255,255,255,.7);}
.jn-ic svg{width:24px; height:24px; display:block;}
.jn-ic .duo-b{fill:currentColor; opacity:.3;} .jn-ic .duo-f{fill:currentColor;}
.jn-card h3{font-size:17px; line-height:1.25; margin-bottom:7px;}
.jn-card p{font-size:14px; color:var(--text-dim); line-height:1.55;}
.jn-sso{display:flex; gap:8px; margin-top:12px;}
.jn-sso-b{width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center;
background:var(--bg); border:1px solid var(--border-strong);}
.jn-sso-b svg{width:17px; height:17px; display:block;}
.jn-sso-b.mail{color:var(--purple);}
.jn-shot{margin:16px 0 22px; border-radius:12px; overflow:hidden; border:1px solid var(--border-strong);
background:var(--bg); box-shadow:0 14px 30px -20px rgba(34,24,46,.45); transition:box-shadow .22s ease;}
.jn-bar{display:flex; align-items:center; gap:5px; padding:7px 11px; background:var(--surface-2);
border-bottom:1px solid var(--border);}
.jn-bar i{width:7px; height:7px; border-radius:50%; background:var(--text-mute); opacity:.55; flex:none;}
.jn-bar i:first-child{background:#ff5f57; opacity:1;} .jn-bar i:nth-child(2){background:#febc2e; opacity:1;}
.jn-bar i:nth-child(3){background:#28c840; opacity:1;}
.jn-bar em{margin-inline-start:8px; font-style:normal; font-size:10.5px; font-weight:600; color:var(--text-mute);
background:var(--bg); padding:2px 10px; border-radius:999px; border:1px solid var(--border);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.jn-shot img{display:block; width:100%; transition:transform .5s ease;}
.jn-step:hover .jn-shot{box-shadow:0 20px 40px -20px rgba(34,24,46,.55);}
.jn-step:hover .jn-shot img{transform:scale(1.02);}
.jn-card{padding:22px 22px 0;}
html:not([data-theme="light"]) .jn-sso-b{background:var(--surface-2);}
@media (max-width:900px){
.journey{grid-template-columns:1fr; gap:18px;}
.journey::before, .journey::after{display:none;}
}
@media (prefers-reduced-motion:reduce){
.journey::after{animation:none;}
.jn-card{opacity:1; transform:none; animation:none;}
}
.uc-partner{display:inline-flex; align-items:center; gap:12px; margin-top:12px; padding:9px 15px 9px 10px;
border-radius:12px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); max-width:60ch;
transition:background .16s ease, transform .16s ease;}
.uc-partner:hover{background:rgba(255,255,255,.22); transform:translateY(-2px);}
.uc-partner img{height:26px; width:auto; max-width:120px; object-fit:contain; flex:none;
background:rgba(255,255,255,.94); border-radius:7px; padding:3px 7px;}
.uc-partner span{font-size:12.5px; color:rgba(255,255,255,.95); line-height:1.45; font-weight:500;}
@media (max-width:640px){ .uc-partner{gap:9px; padding:7px 12px 7px 8px;} .uc-partner span{font-size:11.5px;} .uc-partner img{height:22px;} }
/* ===== marque OneCloud à côté du nom de rubrique ===== */
.eb-mark{display:inline-flex; width:17px; height:17px; border-radius:5px; overflow:hidden; flex:none;
margin-inline-start:9px; vertical-align:-3px;}
.eb-mark svg{width:100%; height:100%; display:block;}
.rm-eyebrow{display:inline-flex; align-items:center;}
/* titres de rubrique : police alignée et un cran plus grande */
.eyebrow{font-size:15.5px; font-weight:800; letter-spacing:.005em; padding:7px 16px 7px 8px;}
.eyebrow-ic{width:32px; height:32px; border-radius:10px;}
.eyebrow-ic svg{width:19px; height:19px;}
.rm-eyebrow{font-size:15.5px; font-weight:800; letter-spacing:.005em; text-transform:none;
padding:7px 14px 7px 16px;}
html:not([data-theme="light"]) .eb-mark{box-shadow:0 0 0 1px rgba(255,255,255,.16);}
/* ===== marque du OneCloud Store ===== */
.eyebrow-ic.store{background:none; box-shadow:none; padding:0; width:30px; height:30px; border-radius:8px; overflow:hidden;}
.eyebrow-ic.store svg{width:100%; height:100%;}
/* ===== bouclier de la section Sécurité ===== */
.sec-shield{position:absolute; z-index:2; inset-inline-end:5%; top:50%; transform:translateY(-50%);
width:clamp(150px,20vw,280px); color:rgba(255,255,255,.16); pointer-events:none;}
.sec-shield svg{width:100%; height:100%; display:block;}
@media (max-width:820px){ .sec-shield{inset-inline-end:4%; width:120px; color:rgba(255,255,255,.12);} }
.jn-url{font-style:normal; font-size:10.5px; font-weight:700; color:var(--purple);
background:var(--bg); padding:2px 10px; border-radius:999px; border:1px solid var(--border);
margin-inline-start:8px; text-decoration:underline; text-underline-offset:2px;}
.jn-url:hover{color:var(--purple-deep); background:var(--grad-soft);}
.jn-mfa{display:inline-flex; align-items:center; gap:8px; margin-top:11px; padding:7px 13px 7px 9px;
border-radius:999px; background:var(--grad-soft); border:1px solid rgba(131,72,199,.3);
font-size:12px; font-weight:700; color:var(--purple-deep);}
.jn-mfa svg{width:17px; height:17px; flex:none; color:var(--c1-ink);}
.jn-mfa .duo-b{fill:currentColor; opacity:.32;} .jn-mfa .duo-f{fill:currentColor;}
html:not([data-theme="light"]) .jn-mfa{color:#d8bff4; border-color:rgba(131,72,199,.42);}
.neo-hl{font-style:normal; font-weight:800; color:#ffffff; padding:0; border-radius:0;
background:none; box-shadow:none; white-space:normal;
background-image:linear-gradient(90deg,#8348c7,#7b27dc);
background-repeat:no-repeat; background-size:100% 3px; background-position:0 100%;
padding-bottom:2px;}
/* ===== mode sombre : pictogrammes plus contrastés ===== */
html:not([data-theme="light"]) .duo-b{opacity:.42;}
html:not([data-theme="light"]) .duo-w{fill:#111012;}
/* pastilles de rubrique : fond plus dense, teinte plus claire */
html:not([data-theme="light"]) .eyebrow-ic.c-purple{background:rgba(var(--c1-rgb),.30); color:var(--c1-ink);
box-shadow:0 6px 16px -8px rgba(var(--c1-rgb),.7), inset 0 1px 0 rgba(var(--c1-rgb),.14);}
html:not([data-theme="light"]) .eyebrow-ic.c-blue{background:rgba(var(--c2-rgb),.30); color:var(--c2-ink);
box-shadow:0 6px 16px -8px rgba(var(--c2-rgb),.7), inset 0 1px 0 rgba(var(--c2-rgb),.14);}
html:not([data-theme="light"]) .eyebrow-ic.c-green{background:rgba(var(--c3-rgb),.30); color:var(--c3-ink);
box-shadow:0 6px 16px -8px rgba(var(--c3-rgb),.7), inset 0 1px 0 rgba(var(--c3-rgb),.14);}
html:not([data-theme="light"]) .eyebrow-ic.c-lime{background:rgba(var(--c4-rgb),.32); color:var(--c4-ink);
box-shadow:0 6px 16px -8px rgba(var(--c4-rgb),.7), inset 0 1px 0 rgba(var(--c4-rgb),.14);}
/* cartes d'arguments */
html:not([data-theme="light"]) .feat-ic.c-purple{background:rgba(var(--c1-rgb),.28); color:var(--c1-ink);}
html:not([data-theme="light"]) .feat-ic.c-blue{background:rgba(var(--c2-rgb),.28); color:var(--c2-ink);}
html:not([data-theme="light"]) .feat-ic.c-green{background:rgba(var(--c3-rgb),.28); color:var(--c3-ink);}
html:not([data-theme="light"]) .feat-ic.c-lime{background:rgba(var(--c4-rgb),.30); color:var(--c4-ink);}
html:not([data-theme="light"]) .feat-ic svg{color:inherit;}
html:not([data-theme="light"]) .feat-ic.c-purple svg{color:var(--c1-ink);}
html:not([data-theme="light"]) .feat-ic.c-blue svg{color:var(--c2-ink);}
html:not([data-theme="light"]) .feat-ic.c-green svg{color:var(--c3-ink);}
html:not([data-theme="light"]) .feat-ic.c-lime svg{color:var(--c4-ink);}
/* onglets et menus */
html:not([data-theme="light"]) .uc-tab-ic.c-purple, html:not([data-theme="light"]) .nd-ic.c-purple{background:rgba(var(--c1-rgb),.30);}
html:not([data-theme="light"]) .uc-tab-ic.c-blue, html:not([data-theme="light"]) .nd-ic.c-blue{background:rgba(var(--c2-rgb),.30);}
html:not([data-theme="light"]) .uc-tab-ic.c-green, html:not([data-theme="light"]) .nd-ic.c-green{background:rgba(var(--c3-rgb),.30);}
html:not([data-theme="light"]) .uc-tab-ic.c-lime, html:not([data-theme="light"]) .nd-ic.c-lime{background:rgba(var(--c4-rgb),.32);}
html:not([data-theme="light"]) .uc-tab-ic.c-purple, html:not([data-theme="light"]) .nd-ic.c-purple svg{color:var(--c1-ink);}
html:not([data-theme="light"]) .uc-tab-ic.c-blue, html:not([data-theme="light"]) .nd-ic.c-blue svg{color:var(--c2-ink);}
html:not([data-theme="light"]) .uc-tab-ic.c-green, html:not([data-theme="light"]) .nd-ic.c-green svg{color:var(--c3-ink);}
html:not([data-theme="light"]) .uc-tab-ic.c-lime, html:not([data-theme="light"]) .nd-ic.c-lime svg{color:var(--c4-ink);}
html:not([data-theme="light"]) .cc-ic.c-purple{background:rgba(var(--c1-rgb),.28); color:var(--c1-ink);}
html:not([data-theme="light"]) .cc-ic.c-blue{background:rgba(var(--c2-rgb),.28); color:var(--c2-ink);}
html:not([data-theme="light"]) .cc-ic.c-green{background:rgba(var(--c3-rgb),.28); color:var(--c3-ink);}
html:not([data-theme="light"]) .cc-ic.c-lime{background:rgba(var(--c4-rgb),.30); color:var(--c4-ink);}
html:not([data-theme="light"]) .jn-ic{background:rgba(131,72,199,.26); color:#dcc5f6;}
/* pictos posés sur une photo : blancs et nets, quel que soit le thème */
.hero-lead-ic, .pb-ic, .uc-tag-ic{color:#ffffff !important;}
.hero-lead-ic .duo-b, .pb-ic .duo-b, .uc-tag-ic .duo-b{fill:#ffffff; opacity:.42;}
.hero-lead-ic .duo-f, .pb-ic .duo-f, .uc-tag-ic .duo-f{fill:#ffffff;}
.hero-lead-ic .duo-w, .pb-ic .duo-w, .uc-tag-ic .duo-w{fill:#18141d;}
.hero-lead-ic, .pb-ic{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.32);}
html:not([data-theme="light"]) .hero-lead-ic, html:not([data-theme="light"]) .pb-ic{
background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.36);}
.cf-ic{color:#ffffff;}
.cf-ic.c-purple{background:rgba(var(--c1-rgb),.26); color:var(--c1-ink);}
.cf-ic.c-blue{background:rgba(var(--c2-rgb),.26); color:var(--c2-ink);}
.cf-ic.c-green{background:rgba(var(--c3-rgb),.26); color:var(--c3-ink);}
.cf-ic.c-lime{background:rgba(var(--c4-rgb),.28); color:var(--c4-ink);}
/* ===== plaques givrées derrière les étiquettes de site ===== */
.staticmap.af-outline
html[data-theme="dark"]
/* ===== étiquettes de site : plaque givrée ===== */
.staticmap .sm-t, .staticmap .sm-s, .staticmap .sm-a{paint-order:stroke; filter:none;}
.sm-a{font-family:'Inter',system-ui,sans-serif; font-size:10.5px;
font-weight:600; fill:rgba(255,255,255,.66); letter-spacing:.01em;}
html[data-theme="dark"]
/* ===== fonctionnalités du portail ===== */
.pf-lead{margin:14px 0 8px; font-weight:700; font-size:13.5px; color:var(--text);}
.pf-grid{list-style:none; margin:0 0 4px; padding:0; display:grid;
grid-template-columns:repeat(auto-fill, minmax(178px,1fr)); gap:7px;}
.pf-grid li{display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:11px;
background:var(--surface-2); border:1px solid var(--border); font-size:12.5px;
font-weight:600; color:var(--text); line-height:1.25;}
.pf-ic{flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
background:rgba(124,61,196,.12); color:#7c3dc4;}
.pf-ic svg{width:16px; height:16px;}
html:not([data-theme="light"]) .pf-grid li{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12);}
html:not([data-theme="light"]) .pf-ic{background:rgba(189,149,235,.24); color:#dcc5f6;}
[dir="rtl"] .pf-grid li{flex-direction:row-reverse; text-align:right;}
@media (max-width:640px){ .pf-grid{grid-template-columns:1fr 1fr; gap:6px;}
.pf-grid li{font-size:11.5px; padding:6px 8px;} }
.pf-wrap{margin-top:16px; padding-top:16px; border-top:1px solid var(--border);}
html:not([data-theme="light"]) .pf-wrap{border-top-color:rgba(255,255,255,.14);}
.console-block .pf-grid{grid-template-columns:repeat(auto-fill,minmax(196px,1fr));}
/* ===== Plateforme OneCloud : fonctionnalités, présentation unifiée ===== */
.plat-feats{list-style:none; margin:0; padding:28px 32px 34px; display:grid;
grid-template-columns:repeat(3,1fr); gap:22px 30px;
border-top:1px solid rgba(255,255,255,.10);}
.plat-feats li{display:flex; align-items:flex-start; gap:12px;}
.plat-ic{flex:none; width:26px; height:26px; display:grid; place-items:center;
color:rgba(255,255,255,.92); background:none; border:0;}
.plat-ic svg{width:22px; height:22px; display:block;}
.plat-ic .duo-b{fill:currentColor; opacity:.28;}
.plat-ic .duo-f{fill:currentColor;}
.plat-feats strong{display:block; font-size:14px; font-weight:800; color:#ffffff;
letter-spacing:-.01em; margin-bottom:2px;}
.plat-feats span[data-i18n]{display:block; font-size:12.8px; line-height:1.5;
color:rgba(255,255,255,.72); font-weight:400;}
[dir="rtl"] .plat-feats li{flex-direction:row-reverse; text-align:right;}
@media (max-width:960px){ .plat-feats{grid-template-columns:1fr 1fr; gap:18px 24px;} }
@media (max-width:640px){ .plat-feats{grid-template-columns:1fr; padding:22px 20px 26px;} }
/* ===== À propos, introduction ===== */
.about-intro{max-width:900px; margin:0 auto 30px;}
.about-intro p{font-size:15.5px; line-height:1.72; color:var(--text-dim); margin:0 0 14px;}
.about-pills{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 20px;}
.ab-pill{display:flex; flex-direction:column; gap:2px; padding:10px 14px; border-radius:12px;
border:1px solid var(--border); background:var(--surface-2); min-width:150px;}
.ab-pill strong{font-size:13.5px; font-weight:800; color:var(--text); letter-spacing:-.01em;}
.ab-pill span{font-size:12px; color:var(--text-dim); line-height:1.4;}
html:not([data-theme="light"]) .ab-pill{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12);}
/* ===== Actualités ===== */
.news-feed{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; margin-bottom:22px;}
.news-feed:empty{display:none;}
.news-card{display:flex; flex-direction:column; border:1px solid var(--border); border-radius:16px;
overflow:hidden; background:var(--surface); text-decoration:none; color:inherit;
transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;}
.news-card:hover{transform:translateY(-3px); border-color:rgba(124,61,196,.45);
box-shadow:0 16px 34px -20px rgba(31,23,40,.5);}
.nc-img{display:block; aspect-ratio:16/9; overflow:hidden; background:var(--surface-2);}
.nc-img img{width:100%; height:100%; object-fit:cover; display:block;}
.nc-noimg{background:linear-gradient(135deg,#7c3dc422,#7b27dc22);}
.nc-body{display:block; padding:14px 16px 16px;}
.nc-meta{display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap;}
.nc-tag{font-style:normal; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
color:#7c3dc4; background:rgba(124,61,196,.10); padding:3px 8px; border-radius:999px;}
.nc-meta time{font-size:11.5px; color:var(--text-dim);}
.news-card strong{display:block; font-size:15px; line-height:1.35; margin-bottom:5px; color:var(--text);}
.nc-desc{display:block; font-size:13px; line-height:1.55; color:var(--text-dim);}
html:not([data-theme="light"]) .nc-tag{color:#dcc5f6; background:rgba(189,149,235,.18);}
.news-empty{margin:0 0 22px; font-size:14px; color:var(--text-dim); font-style:italic;}
.news-panels{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:22px;}
.news-panel{border:1px solid var(--border); border-radius:18px; padding:20px 22px 22px; background:var(--surface);}
.np-ic{display:grid; place-items:center; width:38px; height:38px; border-radius:12px; margin-bottom:12px;
background:rgba(10,102,194,.12); color:#0a66c2;}
.np-ic svg{width:21px; height:21px;}
.np-ic.gn{background:rgba(124,61,196,.12); color:#7c3dc4;}
.np-ic.gn .duo-b{fill:currentColor; opacity:.30;} .np-ic.gn .duo-f{fill:currentColor;}
.news-panel h3{margin:0 0 8px; font-size:16px; letter-spacing:-.01em;}
.news-panel p{margin:0 0 14px; font-size:13.5px; line-height:1.6; color:var(--text-dim);}
.gn-chips{display:flex; flex-wrap:wrap; gap:8px;}
.gn-chip{display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px;
border:1px solid var(--border); background:var(--surface-2); font-size:12.5px; font-weight:600;
color:var(--text); text-decoration:none; transition:border-color .2s ease, color .2s ease;}
.gn-chip::after{content:"↗"; font-size:11px; opacity:.55;}
.gn-chip:hover{border-color:rgba(124,61,196,.5); color:#7c3dc4;}
html:not([data-theme="light"]) .news-panel, html:not([data-theme="light"]) .gn-chip{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12);}
html:not([data-theme="light"]) .gn-chip:hover{color:#dcc5f6; border-color:rgba(189,149,235,.5);}
html:not([data-theme="light"]) .np-ic{background:rgba(184,139,236,.18); color:#c49eef;}
html:not([data-theme="light"]) .np-ic.gn{background:rgba(189,149,235,.20); color:#dcc5f6;}
@media (max-width:820px){ .news-panels{grid-template-columns:1fr;} }
/* ===== cartes géographiques réduites de 30 % ===== */
.staticmap.dz-photo{margin-left:auto; margin-right:auto;}
.staticmap.africa.af-outline .map-brand.over.center{width:min(460px, calc(100% - 44px));}
.plat-pays{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px;}
.plat-pays a{display:inline-flex; align-items:center; justify-content:center; height:26px;
padding:0 7px; border-radius:7px; background:rgba(255,255,255,.94);
box-shadow:0 4px 12px -6px rgba(0,0,0,.6); transition:transform .18s ease;}
.plat-pays a:hover{transform:translateY(-2px);}
.plat-pays img{height:16px; width:auto; max-width:64px; object-fit:contain; display:block;}
/* ===== Ce que nous commercialisons ===== */
.offer-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:16px; margin-bottom:20px;}
.offer-card{border:1px solid var(--border); border-radius:18px; padding:22px 22px 20px; background:var(--surface);
display:flex; flex-direction:column;}
.of-ic{width:38px; height:38px; display:grid; place-items:center; margin-bottom:12px;
border-radius:12px; background:rgba(124,61,196,.10); color:#7c3dc4;}
.of-ic svg{width:22px; height:22px;}
.of-ic .duo-b{fill:currentColor; opacity:.30;} .of-ic .duo-f{fill:currentColor;}
.offer-card h3{margin:0 0 8px; font-size:16px; line-height:1.3; letter-spacing:-.01em;}
.offer-card p{margin:0 0 12px; font-size:13.5px; line-height:1.6; color:var(--text-dim);}
.offer-tag{margin-top:auto; align-self:flex-start; font-size:11.5px; font-weight:800;
letter-spacing:.03em; text-transform:uppercase; padding:5px 11px; border-radius:999px;
background:rgba(124,61,196,.10); color:#7c3dc4;}
.offer-link{margin-top:auto; align-self:flex-start; font-size:13.5px; font-weight:700;
color:#7c3dc4; text-decoration:none;}
.offer-link:hover{text-decoration:underline;}
.offer-units{border:1px solid var(--border); border-radius:18px; padding:22px 24px 24px; background:var(--surface-2);}
.offer-units h3{margin:0 0 14px; font-size:15px; letter-spacing:-.01em;}
.ou-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-bottom:12px;}
.ou{padding:13px 16px; border-radius:13px; background:var(--surface); border:1px solid var(--border);}
.ou strong{display:block; font-size:14.5px; font-weight:800; letter-spacing:-.01em; margin-bottom:3px;}
.ou span{display:block; font-size:12.5px; color:var(--text-dim); line-height:1.45;}
.ou-note{margin:0 0 16px; font-size:12.5px; color:var(--text-dim); font-style:italic;}
.ou-cta{display:flex; gap:10px; flex-wrap:wrap;}
html:not([data-theme="light"]) .offer-card, html:not([data-theme="light"]) .ou{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12);}
html:not([data-theme="light"]) .offer-units{background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.12);}
html:not([data-theme="light"]) .of-ic, html:not([data-theme="light"]) .offer-tag{background:rgba(189,149,235,.20); color:#dcc5f6;}
html:not([data-theme="light"]) .offer-link{color:#dcc5f6;}
/* ===== fil Google Actualités intégré ===== */
.gn-tabs{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px;}
.gn-tab{border:1px solid var(--border); background:var(--surface-2); color:var(--text);
font-size:12px; font-weight:700; padding:6px 11px; border-radius:999px; cursor:pointer;
font-family:inherit; transition:all .18s ease;}
.gn-tab:hover{border-color:rgba(124,61,196,.45);}
.gn-tab.is-on{background:#7c3dc4; border-color:#7c3dc4; color:#ffffff;}
.gn-list{list-style:none; margin:0; padding:0; display:grid; gap:2px;}
.gn-list li{border-bottom:1px solid var(--border);}
.gn-list li:last-child{border-bottom:0;}
.gn-list a{display:block; padding:9px 2px; text-decoration:none; color:inherit;}
.gn-list a:hover .gn-t{color:#7c3dc4;}
.gn-t{display:block; font-size:13.5px; font-weight:650; line-height:1.4; color:var(--text);}
.gn-m{display:block; font-size:11.5px; color:var(--text-dim); margin-top:2px;}
.gn-load{height:38px; border-radius:8px; border-bottom:0 !important;
background:linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
background-size:200% 100%; animation:gnShine 1.3s linear infinite; margin-bottom:6px;}
@keyframes gnShine{to{background-position:-200% 0;}}
.gn-fallback{margin:6px 0 0; font-size:12.5px; color:var(--text-dim); line-height:1.55;}
.gn-fallback a{display:inline-block; margin-top:6px; font-weight:700; color:#7c3dc4; text-decoration:none;}
html:not([data-theme="light"]) .gn-tab{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12);}
html:not([data-theme="light"]) .gn-tab.is-on{background:#a572e0; border-color:#a572e0;}
html:not([data-theme="light"]) .gn-list a:hover .gn-t, html:not([data-theme="light"]) .gn-fallback a{color:#dcc5f6;}
/* ===== liens institutionnels ===== */
.foot-inst{display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px;
padding:18px 0 4px; border-top:1px solid var(--border); margin-top:8px;}
.fi-label{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:800;
letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim);}
.foot-inst a{font-size:12.5px; color:var(--text-dim); text-decoration:none; line-height:1.45;}
.foot-inst a:hover{color:#7c3dc4; text-decoration:underline;}
html:not([data-theme="light"]) .foot-inst{border-top-color:rgba(255,255,255,.12);}
html:not([data-theme="light"]) .foot-inst a:hover{color:#dcc5f6;}
/* ===== Qui nous sommes, récit ===== */
.ab-story{max-width:1000px; margin:0 auto;}
.ab-lede p{font-size:clamp(17px,1.7vw,20px); line-height:1.65; color:var(--text);
margin:0 0 30px; font-weight:400;}
.ab-lede strong{font-weight:800; letter-spacing:-.01em;}
.ab-beats{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:32px;}
.ab-beat{position:relative; padding:22px 22px 20px; border-radius:18px;
border:1px solid var(--border); background:var(--surface); overflow:hidden;}
.ab-beat::before{content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px;
background:linear-gradient(180deg,#7c3dc4,#7b27dc);}
.ab-n{display:block; font-size:12px; font-weight:800; letter-spacing:.16em;
color:#7c3dc4; margin-bottom:8px;}
.ab-beat h3{margin:0 0 8px; font-size:17px; letter-spacing:-.02em;}
.ab-beat p{margin:0; font-size:13.8px; line-height:1.62; color:var(--text-dim);}
html:not([data-theme="light"]) .ab-beat{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12);}
html:not([data-theme="light"]) .ab-n{color:#dcc5f6;}
.ab-quote{margin:0; padding:28px 30px 24px; border-radius:22px;
background:linear-gradient(135deg, rgba(124,61,196,.09), rgba(123,39,220,.07));
border:1px solid var(--border);}
.ab-quote blockquote{margin:0 0 20px; font-size:clamp(17px,1.8vw,21px); line-height:1.55;
font-weight:600; letter-spacing:-.015em; color:var(--text);}
.ab-quote figcaption{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.ab-avatar{width:52px; height:52px; border-radius:50%; object-fit:cover; flex:none;
border:2px solid rgba(255,255,255,.85); box-shadow:0 8px 20px -10px rgba(31,23,40,.6);}
.ab-who{display:flex; flex-direction:column; line-height:1.3;}
.ab-who strong{font-size:15px; font-weight:800; letter-spacing:-.01em;}
.ab-who em{font-style:normal; font-size:12.5px; color:var(--text-dim);}
.ab-li{margin-inline-start:auto; display:inline-flex; align-items:center; gap:8px;
padding:9px 16px; border-radius:999px; background:#0a66c2; color:#ffffff;
font-size:13px; font-weight:700; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease;}
.ab-li svg{width:17px; height:17px;}
.ab-li:hover{transform:translateY(-2px); box-shadow:0 12px 26px -12px rgba(10,102,194,.8);}
html:not([data-theme="light"]) .ab-quote{border-color:rgba(255,255,255,.12);
background:linear-gradient(135deg, rgba(131,72,199,.16), rgba(123,39,220,.10));}
html:not([data-theme="light"]) .ab-quote blockquote::before{color:#dcc5f6;}
@media (max-width:860px){ .ab-beats{grid-template-columns:1fr;} }
@media (max-width:560px){ .ab-li{margin-inline-start:0; width:100%; justify-content:center;} }
/* ===== bloc de marque posé sur les cartes : panneau transparent centré ===== */
.map-brand.over.center{
position:absolute; z-index:4; inset-inline-start:50%; top:50%;
transform:translate(-50%,-50%);
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:12px; text-align:center;
width:min(440px, calc(100% - 72px)); max-height:calc(100% - 56px);
padding:20px 24px 22px; border-radius:20px;
background:rgba(20,14,26,.34); border:1px solid rgba(255,255,255,.22);
backdrop-filter:blur(9px) saturate(120%); -webkit-backdrop-filter:blur(9px) saturate(120%);
box-shadow:0 22px 60px -28px rgba(0,0,0,.85);
pointer-events:none;
}
[dir="rtl"] .map-brand.over.center{transform:translate(50%,-50%);}
.map-brand.over.center .map-brand-mark{
width:clamp(56px,5.2vw,74px); height:clamp(56px,5.2vw,74px);
border-radius:22%; box-shadow:0 14px 32px -14px rgba(0,0,0,.8); margin:0;}
.map-brand.over.center .map-brand-tx{max-width:100%; text-align:center;}
.map-brand.over.center .map-brand-tx strong{
font-size:clamp(24px,2.6vw,34px); color:#ffffff; margin-bottom:6px; line-height:1.05;
text-shadow:0 3px 16px rgba(0,0,0,.7);}
.map-brand.over.center .map-brand-tx span{
font-size:clamp(12px,1.15vw,14px); color:rgba(255,255,255,.94); line-height:1.5;
text-shadow:0 2px 10px rgba(0,0,0,.72);}
/* carte d'Afrique : encore 30 % de moins, panneau proportionné */
.staticmap.africa.af-outline .map-brand.over.center{
width:min(300px, calc(100% - 48px)); padding:15px 18px 16px; gap:9px; border-radius:16px;}
.staticmap.africa.af-outline .map-brand.over.center .map-brand-mark{
width:clamp(42px,3.8vw,54px); height:clamp(42px,3.8vw,54px);}
.staticmap.africa.af-outline .map-brand.over.center .map-brand-tx strong{font-size:clamp(19px,1.9vw,25px);}
.staticmap.africa.af-outline .map-brand.over.center .map-brand-tx span{font-size:clamp(10.5px,.95vw,12px);}
@media (max-width:820px){
.map-brand.over.center{position:static; transform:none; width:auto; max-height:none;
margin:14px 14px 0;}
[dir="rtl"] .map-brand.over.center{transform:none;}
}
/* ===== nom du CEO : lien LinkedIn ===== */
.li-name{display:inline-flex; align-items:center; gap:5px; color:inherit;
text-decoration:none; border-bottom:1px solid rgba(10,102,194,.45);
transition:color .18s ease, border-color .18s ease;}
.li-name svg{width:.92em; height:.92em; flex:none; color:#0a66c2; opacity:.9;
vertical-align:-.08em;}
.li-name:hover{color:#0a66c2; border-bottom-color:#0a66c2;}
html:not([data-theme="light"]) .li-name{border-bottom-color:rgba(194,154,239,.5);}
html:not([data-theme="light"]) .li-name svg{color:#c49eef;}
html:not([data-theme="light"]) .li-name:hover{color:#c49eef; border-bottom-color:#c49eef;}
/* ===== Configurations : titre fort, sous-titre discret ===== */
#config .sec-head h2{font-weight:900; letter-spacing:-.03em;}
#config .sec-head p{font-size:13.5px; line-height:1.6; font-weight:400;
color:var(--text-dim); max-width:64ch; margin-inline:auto; text-align:center;}
/* tracés des cartes réduits à 70 % dans un cadre inchangé */
.staticmap.dz-photo, .staticmap.africa.af-outline{max-width:none;}
.map-scale{transform-box:view-box;}
/* étiquettes de site : pas de fond, lisibilité par ombre portée */
.staticmap.dz-photo .sm-t{paint-order:stroke; stroke:rgba(12,8,16,.55); stroke-width:3.2px;
stroke-linejoin:round;}
.staticmap.dz-photo .sm-s, .staticmap.dz-photo .sm-a{paint-order:stroke;
stroke:rgba(12,8,16,.5); stroke-width:2.4px; stroke-linejoin:round;}
/* carte d'Afrique : libellés de pays plus petits */
.staticmap.africa.af-outline .sm-t{font-size:12.5px;}
.staticmap.africa.af-outline .sm-s{font-size:10px;}
.fi-label .flag-dz{width:20px; height:14px; border-radius:3px; overflow:hidden; flex:none;
box-shadow:0 0 0 1px rgba(0,0,0,.10);}
.fi-label .flag-dz svg{width:100%; height:100%; display:block;}
.ab-p2{display:block; margin-top:11px;}
.ab-beats .ab-beat:first-child{grid-column:1 / -1;}
.ab-beats .ab-beat:first-child p{max-width:none;}
@media (max-width:860px){ .ab-beats .ab-beat:first-child{grid-column:auto;} }
/* ===== marque sur les cartes : logotype complet, sans panneau ===== */
.map-brand.over.center{
background:none !important; border:0 !important; box-shadow:none !important;
backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
padding:0 !important; width:min(560px, calc(100% - 60px)) !important; gap:14px !important;
}
.staticmap.africa.af-outline .map-brand.over.center{
width:min(380px, calc(100% - 44px)) !important; gap:10px !important;}
.map-brand-logo{display:block; width:100%; max-width:420px; height:auto;
filter:drop-shadow(0 6px 22px rgba(0,0,0,.75));}
.staticmap.africa.af-outline .map-brand-logo{max-width:280px;}
.map-brand.over.center .map-brand-tx span{
font-size:clamp(12.5px,1.2vw,14.5px); color:#ffffff; line-height:1.5;
text-shadow:0 2px 12px rgba(0,0,0,.85);}
@media (max-width:820px){
.map-brand-logo{max-width:260px;}
.staticmap.africa.af-outline .map-brand-logo{max-width:210px;}
}
.pr-tab{border:1px solid var(--border); background:var(--surface-2); color:var(--text);
font-size:12px; font-weight:700; padding:6px 11px; border-radius:999px; cursor:pointer;
font-family:inherit; transition:all .18s ease;}
.pr-tab:hover{border-color:rgba(124,61,196,.45);}
.pr-tab.is-on{background:#7c3dc4; border-color:#7c3dc4; color:#ffffff;}
.np-ic.press{background:rgba(99,33,174,.14); color:#4e1b89;}
.np-ic.press .duo-b{fill:currentColor; opacity:.30;} .np-ic.press .duo-f{fill:currentColor;}
html:not([data-theme="light"]) .pr-tab{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12);}
html:not([data-theme="light"]) .pr-tab.is-on{background:#a572e0; border-color:#a572e0;}
html:not([data-theme="light"]) .np-ic.press{background:rgba(179,140,224,.20); color:#be9be5;}
.about-last{padding-top:8px;}
.about-last .sec-head{margin-bottom:26px;}
/* ===== identifiants légaux en pied de page ===== */
.foot-ids{display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px;
padding-inline-start:18px; margin-inline-start:4px;
border-inline-start:1px solid var(--border);}
.foot-ids > span{display:inline-flex; align-items:baseline; gap:7px;}
.foot-ids small{font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
color:var(--text-dim);}
.foot-ids strong{font-size:12.5px; font-weight:700; letter-spacing:.02em; color:var(--text);
font-variant-numeric:tabular-nums;}
@media (max-width:640px){ .foot-ids{gap:8px 18px;} .foot-ids strong{font-size:12px;} }
.about-contact{padding:0 0 8px;}
@media (max-width:820px){
.foot-ids{padding-inline-start:0; margin-inline-start:0; border-inline-start:0;
flex-basis:100%; margin-top:6px;}
}
html:not([data-theme="light"]) .foot-ids{border-inline-start-color:rgba(255,255,255,.14);}
/* tags de l'accroche : raccourcis vers les cas d'usage */
.law-flag{display:inline-flex; width:1.02em; height:.72em; border-radius:2px; overflow:hidden;
flex:none; margin-inline-start:.42em; vertical-align:-.04em;
box-shadow:0 0 0 1px rgba(0,0,0,.10);}
.law-flag svg{width:100%; height:100%; display:block;}
/* photos des cas d'usage agrandies */
.uc-photo{height:clamp(420px, 56vw, 720px);}
.uc-panel .uc-photo{max-width:1320px; height:clamp(400px, 50vw, 640px);}
.uc-photo-caption{padding:44px 48px;}
.uc-photo-title{max-width:24ch;}
.uc-photo-bul{max-width:70ch; gap:9px 26px;}
@media (max-width:1100px){ .uc-photo, .uc-panel .uc-photo{height:clamp(380px,58vw,520px);} }
@media (max-width:820px){ .uc-photo, .uc-panel .uc-photo{height:400px;}
.uc-photo-caption{padding:26px 24px;} }
@media (max-width:640px){ .uc-photo, .uc-panel .uc-photo{height:360px;} }
/* ===== marque sur les cartes : ancrée en bas à gauche ===== */
.map-brand.over.center{
inset-inline-start:34px !important; inset-inline-end:auto !important;
top:auto !important; bottom:30px !important;
transform:none !important;
align-items:flex-start !important; text-align:start !important;
width:min(430px, calc(100% - 68px)) !important;
}
[dir="rtl"] .map-brand.over.center{
inset-inline-start:34px !important; align-items:flex-start !important; text-align:end !important;}
.map-brand.over.center .map-brand-tx{text-align:inherit;}
.map-brand-logo{max-width:280px;}
.staticmap.africa.af-outline .map-brand.over.center{
inset-inline-start:26px !important; bottom:24px !important;
width:min(300px, calc(100% - 52px)) !important;}
.staticmap.africa.af-outline .map-brand-logo{max-width:210px;}
@media (max-width:820px){
.map-brand.over.center{position:static !important; width:auto !important;
margin:14px 16px 2px !important; bottom:auto !important;}
.map-brand-logo{max-width:220px;}
.staticmap.africa.af-outline .map-brand-logo{max-width:190px;}
}
/* ===== Comment ça marche : captures alignées, texte dessous ===== */
.jn-card{display:flex; flex-direction:column; padding:0 0 22px;}
.jn-shot{order:-1; margin:0 0 18px; border-radius:0; border:0;
border-bottom:1px solid var(--border-strong); box-shadow:none;}
.jn-shot img{width:100%; height:100%; object-fit:cover; object-position:top center;}
.jn-shot > img, .jn-shot picture{display:block;}
.jn-shot{position:relative;}
.jn-shot::after{content:""; display:block;}
.jn-card > :not(.jn-shot):not(.jn-num){margin-inline:22px;}
.jn-ic{margin-top:2px;}
.jn-num{top:auto; bottom:16px; inset-inline-end:20px; font-size:30px;}
/* toutes les captures au même format, donc au même niveau */
.jn-shot{aspect-ratio:16/10; overflow:hidden; display:flex; flex-direction:column;}
.jn-bar{flex:none;}
.jn-shot img{flex:1; min-height:0;}
.jn-card h3{margin-top:2px;}
.jn-card p{margin-bottom:0;}
.jn-sso, .jn-mfa{margin-top:12px;}
@media (max-width:820px){
.jn-card > :not(.jn-shot):not(.jn-num){margin-inline:20px;}
.jn-shot{aspect-ratio:16/9;}
}
.cert-star{font-size:.72em; font-weight:800; color:#7c3dc4; margin-inline-start:1px;
vertical-align:super; line-height:0;}
html:not([data-theme="light"]) .cert-star{color:#dcc5f6;}
.neo-trust .cert-star, .hero-trust .cert-star{color:inherit; opacity:.85;}
.foot-note{margin:0; padding:14px 0 0; font-size:12px; line-height:1.55;
color:var(--text-dim); font-style:italic;}
/* ===== sélecteur de région ===== */
.regdrop{position:relative; display:inline-flex; align-items:center; margin-inline-start:14px; flex:none;}
.regdrop-toggle{display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-family:inherit;
background:linear-gradient(135deg, rgba(76,22,138,.10), rgba(123,39,220,.09));
border:1px solid var(--border-strong); border-radius:999px; padding:5px 11px 5px 7px;
color:var(--text); font-size:14.5px; font-weight:500; transition:border-color .18s ease;}
.regdrop-toggle:hover, .regdrop.force-open .regdrop-toggle{border-color:var(--text-mute);}
.regdrop-toggle > svg{width:11px; height:11px; flex:none; transition:transform .18s ease; opacity:.65;}
.regdrop.force-open .regdrop-toggle > svg{transform:rotate(180deg);}
.reg-flag{width:26px; height:18px; border-radius:4px; overflow:hidden; flex:none;
box-shadow:0 0 0 1px rgba(17,12,22,.14);}
.reg-flag svg{display:block; width:100%; height:100%;}
.regdrop-menu{position:absolute; top:100%; inset-inline-start:0; margin-top:10px; z-index:60;
background:var(--surface); border:1px solid var(--border-strong); border-radius:16px; padding:7px;
min-width:258px; box-shadow:0 26px 64px -22px rgba(0,0,0,.32);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .18s ease, transform .18s ease, visibility .18s;}
.regdrop.force-open .regdrop-menu{opacity:1; visibility:visible; transform:translateY(0);}
.regdrop-head{display:block; padding:6px 10px 8px; font-size:10.5px; font-weight:800;
letter-spacing:.11em; text-transform:uppercase; color:var(--text-mute);}
.regdrop-item{display:flex; align-items:center; gap:10px; width:100%; text-align:start;
background:none; border:0; border-radius:11px; padding:8px 10px; cursor:pointer;
font-family:inherit; font-size:13.5px; color:var(--text-dim); transition:background .16s ease;}
.regdrop-item:hover{background:var(--bg-soft); color:var(--text);}
.regdrop-item.active{background:var(--bg-soft); color:var(--text); font-weight:700;}
.reg-name{flex:1;}
.reg-state{font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
padding:3px 8px; border-radius:999px; background:var(--surface-2); color:var(--text-mute);}
.regdrop-item.active .reg-state{background:rgba(99,33,174,.16); color:#4e1b89;}
.regdrop-item[data-soon]{opacity:.72;}
.regdrop-item[data-soon]:hover{opacity:1;}
.regdrop-item.shake{animation:regShake .42s ease;}
@keyframes regShake{0%,100%{transform:translateX(0);}25%{transform:translateX(-4px);}
50%{transform:translateX(4px);}75%{transform:translateX(-2px);}}
.regdrop-note{margin:6px 4px 2px; padding:8px 8px 4px; border-top:1px solid var(--border);
font-size:11px; line-height:1.5; color:var(--text-mute);}
[dir="rtl"] .regdrop-menu{inset-inline-start:auto; inset-inline-end:0;}
html:not([data-theme="light"]) .regdrop-toggle{color:#cdacf2; border-color:rgba(255,255,255,.18);
background:linear-gradient(135deg, rgba(76,22,138,.16), rgba(123,39,220,.14));}
html:not([data-theme="light"]) .regdrop-menu{background:#1c1c21; border-color:rgba(255,255,255,.14);}
html:not([data-theme="light"]) .regdrop-item:hover, html:not([data-theme="light"]) .regdrop-item.active{
background:rgba(255,255,255,.06); color:#ffffff;}
html:not([data-theme="light"]) .reg-state{background:rgba(255,255,255,.08);}
html:not([data-theme="light"]) .regdrop-item.active .reg-state{background:rgba(179,140,224,.20); color:#be9be5;}
@media (max-width:1180px){ .regdrop-toggle{padding:4px 9px 4px 6px; font-size:13px;}
.regdrop-current{display:none;} }
/* le bloc de marque se cale au-dessus de la légende, jamais dessus */
.map-brand.over.center{
bottom:calc(var(--legend-h, 64px) + 22px) !important;
}
.staticmap.africa.af-outline .map-brand.over.center{
bottom:calc(var(--legend-h, 48px) + 18px) !important;
}
@media (max-width:820px){
.map-brand.over.center{bottom:auto !important;}
}
@keyframes wcIn{to{opacity:1; transform:none;}} .wc-ic .duo-f{fill:currentColor;}
html:not([data-theme="light"]) .wc-card{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12);}
html:not([data-theme="light"]) .why[data-mode="before"] .wc-card{background:rgba(255,255,255,.03);}
html:not([data-theme="light"]) .why-switch{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12);}
html:not([data-theme="light"]) .wc-ic.c-purple{background:rgba(var(--c1-rgb),.24); color:var(--c1-ink);}
html:not([data-theme="light"]) .wc-ic.c-blue{background:rgba(var(--c2-rgb),.24); color:var(--c2-ink);}
html:not([data-theme="light"]) .wc-ic.c-green{background:rgba(var(--c3-rgb),.24); color:var(--c3-ink);}
html:not([data-theme="light"]) .wc-ic.c-lime{background:rgba(var(--c4-rgb),.26); color:var(--c4-ink);}
html:not([data-theme="light"]) .why[data-mode="after"] .wc-tag{background:rgba(189,149,235,.20); color:#dcc5f6;}
@media (max-width:960px){ .wc-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){ .wc-grid{grid-template-columns:1fr;} }
/* ===== NéoCloud : marque mise en avant ===== */
.neo-badge{display:inline-block; font-style:normal; font-weight:900; letter-spacing:-.01em;
color:#ffffff; padding:2px 12px 3px; border-radius:999px; white-space:nowrap;
border:2px solid transparent; background-clip:padding-box; position:relative;
background:rgba(255,255,255,.10);
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
text-shadow:0 2px 10px rgba(0,0,0,.5);}
.neo-badge::before{content:""; position:absolute; inset:-2px; border-radius:inherit; padding:2px;
pointer-events:none;
background:linear-gradient(135deg,#8348c7,#7b27dc 45%,#6321ae 75%,#6923ba);
-webkit-mask:linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0);
-webkit-mask-composite:xor; mask:linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0);
mask-composite:exclude;}
@media (max-width:640px){ .neo-badge{padding:1px 9px 2px;} }
/* ===== À propos : fil conducteur entre les trois temps ===== */
.ab-beats{grid-template-columns:repeat(3,1fr); gap:20px; position:relative;}
.ab-beats .ab-beat:first-child{grid-column:auto;}
.ab-beats::before{content:""; position:absolute; top:40px; left:14%; right:14%; height:2px;
background:var(--grad-marque);
opacity:.30; z-index:0;}
.ab-beat{position:relative; z-index:1; padding-top:52px;}
.ab-beat::after{content:""; position:absolute; top:31px; inset-inline-start:22px;
width:18px; height:18px; border-radius:50%;
background:var(--surface); border:2px solid var(--c1-ink);
box-shadow:0 0 0 4px var(--bg);}
.ab-beat:nth-child(2)::after{border-color:var(--c2-ink);}
.ab-beat:nth-child(3)::after{border-color:var(--c3-ink);}
.ab-beat .ab-n{position:absolute; top:14px; inset-inline-start:22px; margin:0;
font-size:11.5px; letter-spacing:.18em;}
.ab-beat:nth-child(2) .ab-n{color:#6324aa;}
.ab-beat:nth-child(3) .ab-n{color:#491a7e;}
html:not([data-theme="light"]) .ab-beat::after{background:#1c1c21; box-shadow:0 0 0 4px var(--bg);}
html:not([data-theme="light"]) .ab-beats::before{opacity:.45;}
@media (max-width:860px){
.ab-beats{grid-template-columns:1fr; gap:16px;}
.ab-beats::before{top:0; bottom:0; left:31px; right:auto; width:2px; height:auto;}
[dir="rtl"] .ab-beats::before{left:auto; right:31px;}
}
/* noms des langues en gras */
.langdrop-menu button{font-weight:700;}
.langdrop-current{font-weight:700;}
.ab-beat p strong{color:var(--text); font-weight:800;}
html:not([data-theme="light"]) .ab-beat p strong{color:#ffffff;}
/* citation : guillemets ouvrant et fermant, dans le flux du texte */
.ab-quote blockquote{padding-inline-start:0; padding-inline-end:0; position:relative;}
.ab-quote blockquote::before{content:"\201C"; position:static; inset:auto;
font-size:1.4em; line-height:0; vertical-align:-.14em; margin-inline-end:.1em;
color:#7c3dc4; opacity:.5; font-family:Georgia,serif;}
.ab-quote blockquote::after{content:"\201D"; position:static; inset:auto;
font-size:1.4em; line-height:0; vertical-align:-.14em; margin-inline-start:.06em;
color:#7c3dc4; opacity:.5; font-family:Georgia,serif;}
html:not([data-theme="light"]) .ab-quote blockquote::before,
html:not([data-theme="light"]) .ab-quote blockquote::after{color:#dcc5f6;}
/* =====================================================================
SYSTEME EPURE - regle unique de mise en page
Fond noir profond, un seul accent violet, pas d'encadres :
ce sont l'espace et des filets fins qui separent les blocs.
===================================================================== */
/* --- 1. respiration verticale ------------------------------------- */
.section-pad, .usecases, .partners, .about, .store, .pioneer{padding:var(--sec-gap) 0;}
.roadmap{padding:var(--sec-gap) 0;}
.news{padding:0;}
.about-sub{padding:clamp(56px,6vw,88px) 0 0;}
.about-sub + .about-sub{padding-top:clamp(56px,6vw,88px);}
.finalcta{padding:0 0 var(--sec-gap);}
footer{padding:clamp(64px,7vw,96px) 0 36px;}
/* --- 2. plus de bandes de couleur : un filet fin suffit ------------ */
.usecases, .advantages, .infra, .about, .resources, .partners, .store,
.news, .roadmap, .section-pad.security{background:var(--bg);}
.usecases, .advantages, .infra, .about, .resources, .partners, .store,
.news, .roadmap{border-top:1px solid var(--border); border-bottom:none;}
.about.about-last, .about.about-contact{border-top:1px solid var(--border);}
.roadmap::before, .hero::before{display:none;}
.pioneer-inner{background:none; border:none;}
/* filet decoratif : hachure fine, jamais un bloc colore */
.sec-head::after{content:""; display:block; width:64px; height:1px; margin-top:clamp(28px,3vw,40px);
background:repeating-linear-gradient(90deg, var(--accent) 0 10px, transparent 10px 16px); opacity:.7;}
[dir="rtl"] .sec-head{margin-inline:0;}
/* --- 3. titres et corps de texte ----------------------------------- */
h2{font-size:clamp(30px,3.6vw,50px); font-weight:600; letter-spacing:-0.035em; line-height:1.06;}
h3{font-weight:600; letter-spacing:-0.02em;}
.sec-head h2, .rm-head h2, .pioneer-inner h2, .finalcta-inner h2{
font-family:var(--font-display); font-weight:600;}
.rm-head h2{font-size:clamp(30px,3.6vw,50px); letter-spacing:-0.035em;}
.finalcta-inner h2{font-size:clamp(32px,4.2vw,56px); letter-spacing:-0.035em;}
.pioneer-inner h2{font-size:clamp(30px,3.6vw,48px);}
.sec-head p, .finalcta-inner p, .pioneer-inner p, .store-lead{
font-size:clamp(16px,1.5vw,18.5px); line-height:1.62; color:var(--text-dim);}
.finalcta-inner p, .pioneer-inner p{max-width:58ch; margin-inline:auto;}
.feat-card p, .step p, .sec-detail p, .rm-card p, .res-bul li, .price-feat{font-size:15px; line-height:1.62;}
.feat-card h3, .step h3, .rm-card h3{font-size:19px; margin-bottom:10px;}
.grad-text{background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--accent-soft);}
.oc-strong{color:var(--text); font-weight:700;}
.about-quote-mark{background:none; -webkit-background-clip:border-box; background-clip:border-box;
color:var(--accent); opacity:.5;}
/* --- 4. sur-titres de rubrique : petites capitales grises ---------- */
.eyebrow, .rm-eyebrow, .modal-eyebrow, .paas-tag, .rm-date, .res-meta{
background:none !important; border:none !important; padding:0 !important; border-radius:0 !important;
box-shadow:none !important; color:var(--text-mute) !important;
font-family:var(--font-display); font-size:12px !important; font-weight:700 !important;
letter-spacing:.2em !important; text-transform:uppercase;}
.eyebrow-ic, .eyebrow .dot{display:none !important;}
.rm-eyebrow{margin-bottom:16px;}
.modal-eyebrow{color:rgba(255,255,255,.72) !important; margin-bottom:14px;}
.rm-head{text-align:start; margin-bottom:clamp(40px,5vw,64px);}
/* --- 5. deboxage : cartes reduites a leur contenu ------------------ */
.rm-card, .rm-node, .news-card, .news-panel, .offer-card, .offer-units, .ou,
.config-card, .paas-vs, .about-li-card, .partner-note, .jn-sso, .gn-wrap,
.pf-grid li, .cmp-card, .cmp-panel, .staticmap:not(.dz-photo):not(.af-plain){
background:none; box-shadow:none;}
.rm-card, .news-card, .news-panel, .offer-card, .offer-units,
.config-card, .about-li-card, .partner-note, .cmp-card{border:none;}
.rm-card{padding:20px 0 0; border-radius:0; text-align:start;}
.rm-node{width:40px; height:40px; border:1px solid var(--border); border-radius:0;
background:none; box-shadow:none;}
.rm-step.is-now .rm-node{background:none; border-color:var(--accent);}
.rm-step.is-now .rm-card{background:none; box-shadow:none;}
.rm-step.is-now .rm-card::before, .rm-step.is-now .rm-card::after{display:none;}
.rm-step:hover .rm-card, .rm-step:hover .rm-node{transform:none; box-shadow:none;}
.rm-num{color:var(--text-dim);}
.rm-step.is-now .rm-num{color:var(--accent-soft);}
.rm-card h3{justify-content:flex-start;}
.rm-badge.live{background:none; border:none; padding:0; color:var(--accent-soft);}
.rm-rail::before{background:var(--border); opacity:1; height:1px; top:20px;}
.rm-rail::after{background:var(--accent); height:1px; top:20px; box-shadow:none;}
.news-card{border-radius:0;}
.news-panel, .offer-card, .offer-units, .config-card{border-radius:0; padding:0;}
.ou{background:none; border:none; padding:12px 0; border-top:1px solid var(--border); border-radius:0;}
.pf-grid li{border:none; padding:6px 0;}
.paas-vs{border:none; padding:12px 0 0; border-top:1px solid var(--border); border-radius:0;}
.about-li-card{padding:18px 0 0; border-top:1px solid var(--border); border-radius:0; margin-top:22px;}
.staticmap{border:none; box-shadow:none; padding:0; border-radius:0;}
.price-card{background:none; border:none; box-shadow:none; padding:34px 0 0;
border-top:1px solid var(--border); border-radius:0;}
.price-card.feat{background:none; border:none; border-top:1px solid var(--accent);}
.price-badge{position:static; display:inline-block; background:none; color:var(--accent-soft);
padding:0 0 10px; font-size:12px; letter-spacing:.2em; text-transform:uppercase;}
.contact-map{border:none; box-shadow:none;}
.res-cover{border-radius:0;}
.expansion-track::before{background:var(--border); opacity:1;}
.expansion-card.hq{background:none; border:none;}
.expansion-card.hq .ec-country, .expansion-card.hq .ec-desc{color:var(--text);}
.expansion-card .ec-year{background:none; color:var(--accent-soft); padding:0 0 6px; font-size:11.5px; letter-spacing:.16em;}
.expansion-card.hq .ec-year{background:none; color:var(--accent);}
.store-tile .st-badge{background:none; border:1px solid var(--border); border-radius:10px;}
.store-tile.more .st-badge{background:none; border:1px solid var(--accent);}
.about-vision{background:none;}
/* --- 6. pictogrammes : monochromes et discrets ---------------------- */
.feat-ic, .cc-ic, .uc-tab-ic, .eyebrow-ic, .news-li-ic, .nd-ic, .cf-ic, .pf-ic, .st-badge svg{
background:none !important; box-shadow:none !important; border:none !important;}
.feat-ic svg, .cc-ic svg, .nd-ic svg, .pf-ic svg{color:currentColor;}
.feat-ic.c-purple svg, .feat-ic.c-blue svg, .feat-ic.c-green svg, .feat-ic.c-lime svg,
.ic-purple, .ic-blue, .ic-green, .ic-lime,
.tc-head.c-purple, .tc-head.c-blue, .tc-head.c-green, .tc-head.c-lime{color:var(--c4-ink);}
.nd-ic{color:var(--text-mute);}
.navdrop-menu a:hover .nd-ic{color:var(--accent-soft);}
.cf-ic, .pf-ic{color:var(--accent-soft);}
.duo-b{opacity:.34;}
.tc-head{border-bottom:1px solid var(--border); color:var(--text-mute);
text-transform:uppercase; letter-spacing:.14em; font-size:11.5px; font-weight:700;}
.tc-list li::before{background:var(--text-mute); opacity:.5;}
.res-bul li::before, .pcard-bul li::before{background:var(--accent); opacity:.85;}
/* --- 7. barre de navigation et rail social -------------------------- */
header{background:rgba(8,8,10,0.82); border-bottom:1px solid var(--border);}
html[data-theme="light"] header{background:rgba(255,255,255,0.86);}
.logo img{opacity:.96;}
html[data-theme="light"] .logo img{filter:none;}
.foot-brand img{opacity:.92;}
html[data-theme="light"] .foot-brand img{filter:none;}
.navdrop-menu, .langdrop-menu, .regdrop-menu{background:var(--surface); border:1px solid var(--border);
box-shadow:0 30px 70px -30px rgba(0,0,0,.85);}
html[data-theme="light"] .navdrop-menu, html[data-theme="light"] .langdrop-menu,
html[data-theme="light"] .regdrop-menu{box-shadow:0 30px 70px -34px rgba(20,24,50,.35);}
.social-rail{background:none; border:1px solid var(--border); box-shadow:none;}
.social-rail-btn{background:none !important; border:1px solid transparent !important; color:var(--text-mute) !important;}
.social-rail-btn:hover{transform:none; color:var(--text) !important; border-color:var(--border-strong) !important;}
.wa-btn{background:none; border:1px solid var(--border); color:var(--text-mute);}
.wa-btn:hover{background:none; border-color:var(--border-strong); color:var(--text); transform:none;}
/* --- 8. textes poses sur photo : lisibilite d'abord ----------------- */
.neo-banner-overlay{background:linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.48) 40%, rgba(8,8,10,0.96) 100%);}
.photo-band-overlay{background:linear-gradient(100deg, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.64) 48%, rgba(0,0,0,0.34) 100%);}
.uc-photo::after{background:linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.40) 42%, rgba(0,0,0,0.90) 100%);}
.pcard-ov{background:linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.62) 50%, rgba(0,0,0,0.92) 100%);}
.uc-photo-title, .pcard-cap h3, .neo-banner-sub, .pb-quote{text-shadow:0 2px 18px rgba(0,0,0,.85);}
.uc-photo-sub, .uc-photo-bul li, .pcard-bul li{text-shadow:0 2px 14px rgba(0,0,0,.8);}
.uc-photo-tag, .pcard-tag, .pcard-tag.alt{background:none; border:none; backdrop-filter:none;
-webkit-backdrop-filter:none; padding:0; color:rgba(255,255,255,.78); letter-spacing:.2em; font-weight:700;}
.btn-onphoto{background:#fff; color:#08080a; border-color:#fff;}
.btn-onphoto:hover{background:#fff; opacity:.9;}
/* --- 9. formulaire de contact --------------------------------------- */
.modal-card{background:var(--surface); border:1px solid var(--border); border-radius:18px;}
.modal-head{background:none; border-bottom:1px solid var(--border); color:var(--text);}
.modal-head::after{display:none;}
.modal-head h3{color:var(--text);}
.modal-head p{color:var(--text-dim);}
.modal-eyebrow{color:var(--text-mute) !important;}
.modal-close{border:1px solid var(--border); background:none; color:var(--text-dim);}
.modal-close:hover{background:none; color:var(--text);}
.modal-body input, .modal-body select, .modal-body textarea{
background:none; border:1px solid var(--border); border-radius:10px;}
.modal-body input:focus, .modal-body select:focus, .modal-body textarea:focus{
border-color:var(--accent); box-shadow:none;}
/* --- 10. bas de page ------------------------------------------------ */
.foot-col h4{letter-spacing:.2em; font-size:11.5px; font-weight:700; color:var(--text-mute);}
.foot-bottom{border-top:1px solid var(--border);}
/* --- 11. adaptations mobiles --------------------------------------- */
@media (max-width:900px){
.section-pad, .usecases, .partners, .about, .store, .pioneer, .roadmap{padding:64px 0;}
.feat-card, .step, .tech-col{padding-inline-end:0;}
}
@media (max-width:700px){
.sec-head h2, h2{font-size:clamp(26px,7vw,34px); line-height:1.1;}
.sec-head p{font-size:15.5px;}
.section-pad, .usecases, .partners, .about, .store, .pioneer, .roadmap{padding:52px 0;}
.wrap{padding:0 20px;}
.eyebrow, .rm-eyebrow{font-size:11px !important; letter-spacing:.18em !important;}
}
/* --- 12. comparateur « Pourquoi OneCloud » -------------------------- */
/* --- 13. listes, chips et pastilles restantes ----------------------- */
.hero-lead-list li{background:none; border:none; box-shadow:none; padding:10px 0;}
.hero-lead-list li:hover{transform:none; box-shadow:none; border:none;}
.fc-chip, .tc-badge, .gn-tab, .pr-tab, .jn-sso-b{background:none; border:1px solid var(--border); color:var(--text-dim);}
.gn-tab.is-on, .pr-tab.is-on, .gn-tab.active, .pr-tab.active{border-color:var(--accent); color:var(--text);}
.price-feat svg{color:var(--accent-soft);}
.price-feat.hl svg{color:var(--accent);}
.console-block{background:#0c0c10; border:1px solid var(--border);}
.neo-brand .nb-c{background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--accent-soft);}
.expansion-track::before{height:1px; top:34px;}
/* --- 14. arbitrages de specificite avec les anciennes regles sombres - */
html:not([data-theme="light"]) .finalcta-inner{background:none; border-color:var(--border);}
html:not([data-theme="light"]) .staticmap:not(.dz-photo):not(.af-plain){background:none;}
html:not([data-theme="light"]) .theme-toggle{background:none;}
html:not([data-theme="light"]) .langdrop-toggle{background:none; border-color:var(--border);}
html:not([data-theme="light"]) .navlinks{background:var(--bg);}
html:not([data-theme="light"]) .navdrop-menu, html:not([data-theme="light"]) .langdrop-menu{
background:var(--surface); border-color:var(--border);}
html:not([data-theme="light"]) .rm-node{background:none;}
html:not([data-theme="light"]) .rm-badge.live{background:none; border:none; color:var(--accent-soft);}
html:not([data-theme="light"]) .eyebrow{color:var(--text-mute) !important; border:none !important;}
html:not([data-theme="light"]) .btn-ghost{background:none; border-color:var(--border-strong); color:var(--text);}
html:not([data-theme="light"]) .btn-ghost:hover{background:rgba(255,255,255,.06); border-color:var(--text-mute); color:#fff;}
html:not([data-theme="light"]) .navright .btn-primary.btn-sm{color:var(--accent-soft); border-color:rgba(155,47,224,.5);}
html:not([data-theme="light"]) .navright .btn-primary.btn-sm:hover{background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:none;}
html:not([data-theme="light"]) .social-rail{background:none; border-color:var(--border); box-shadow:none;}
html:not([data-theme="light"]) .social-rail-btn.mailto,
html:not([data-theme="light"]) .social-rail-btn.whatsapp,
html:not([data-theme="light"]) .social-rail-btn.linkedin,
html:not([data-theme="light"]) .social-rail-btn.facebook,
html:not([data-theme="light"]) .social-rail-btn.tiktok{
background:none; border-color:transparent; color:var(--text-mute);}
html:not([data-theme="light"]) .social-rail-btn:hover{color:var(--text); border-color:var(--border-strong);}
html:not([data-theme="light"]) .wa-btn{background:none; color:var(--text-mute);}
/* --- 15. accents textuels lisibles sur fond noir -------------------- */
.langdrop-menu button.active::after{color:var(--link-accent);}
.gn-chip:hover, .gn-list a:hover .gn-t, .gn-fallback a, .foot-inst a:hover,
.li-name:hover, .cert-star, .ab-beat:nth-child(2) .ab-n, .ab-beat:nth-child(3) .ab-n,
.np-ic.gn, .nc-tag, .map-link, .cc-tels a:hover{color:var(--link-accent);}
.np-ic.gn, .np-ic.press, .regdrop-item.active .reg-state, .nc-tag{background:none;}
.modal-msg.ok{color:var(--msg-ok);} .modal-msg.ko{color:var(--msg-ko);}
.modal-body input.err, .modal-body textarea.err{border-color:var(--msg-ko); box-shadow:none;}
.li-name svg{color:var(--link-accent);}
.about-li-cta, .about-li-head svg{color:var(--link-accent);}
.news-li-ic{color:var(--text-dim);}
/* --- 16. arabe et tifinagh : polices et interlettrage adaptes -------- */
html[dir="rtl"]{--font-display:'Cairo','Inter','Helvetica Neue',Arial,sans-serif;}
html[lang="tz"]{--font-display:'Noto Sans Tifinagh','Inter','Helvetica Neue',Arial,sans-serif;}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4,
html[dir="rtl"] .sec-head h2, html[dir="rtl"] .finalcta-inner h2, html[dir="rtl"] .rm-head h2{
letter-spacing:normal; line-height:1.22;}
html[dir="rtl"] .eyebrow, html[dir="rtl"] .rm-eyebrow, html[dir="rtl"] .modal-eyebrow,
html[dir="rtl"] .paas-tag, html[dir="rtl"] .rm-date, html[dir="rtl"] .res-meta,
html[dir="rtl"] .foot-col h4, html[dir="rtl"] .tc-head, html[dir="rtl"] .wc-tag,
html[dir="rtl"] .uc-photo-tag, html[dir="rtl"] .pcard-tag, html[dir="rtl"] .price-badge,
html[dir="rtl"] .expansion-card .ec-year{letter-spacing:normal !important; text-transform:none;}
html[lang="tz"] .eyebrow, html[lang="tz"] .rm-eyebrow, html[lang="tz"] .foot-col h4,
html[lang="tz"] .tc-head, html[lang="tz"] .wc-tag, html[lang="tz"] .price-badge{
letter-spacing:.08em !important; text-transform:none;}
html[lang="tz"] h1, html[lang="tz"] h2, html[lang="tz"] h3, html[lang="tz"] h4{
letter-spacing:normal; line-height:1.2;}
/* --- 17. derniers calages ------------------------------------------- */
.rm-step{align-items:flex-start;}
.rm-node{border-radius:999px;}
.rm-card h3{text-align:start;}
.rm-rail{gap:34px;}
@media (max-width:860px){ .rm-step{flex-direction:row; align-items:flex-start;} }
.feat-grid{gap:clamp(28px,3.4vw,52px);}
.steps, .res-grid, .partners-grid, .config-grid, .wc-grid, .contact-grid, .news-grid{
gap:clamp(28px,3.2vw,48px);}
.trust-grid{gap:clamp(20px,2.4vw,34px);}
.uc-tabs, .adv-tabs{margin-bottom:clamp(32px,4vw,52px);}
.foot-grid{gap:clamp(32px,4vw,56px);}
/* ancres : ne pas passer sous l'en-tête collant */
html{scroll-padding-top:92px;}
/* ==========================================================================
STORE PILOTE : carrousel d'entrée de page
========================================================================== */
.pilot{padding:clamp(56px,6.4vw,96px) 0 clamp(50px,5.6vw,84px);
border-top:1px solid var(--border); border-bottom:1px solid var(--border); overflow:hidden;}
.pil-head{margin-bottom:clamp(26px,3.2vw,42px);}
.pil-head h2{max-width:24ch;}
.pil-when{font-style:normal; margin-inline-start:12px; padding:4px 11px; border-radius:999px;
border:1px solid var(--border-strong); color:var(--accent-soft); letter-spacing:.14em; font-size:11px;}
.pil-rail{position:relative; overflow:hidden; padding:6px 0 10px;}
.pil-track{display:flex; align-items:flex-start; gap:20px;
padding-inline:max(40px, calc((100vw - 1180px) / 2 + 40px));
transition:transform .62s cubic-bezier(.4,0,.2,1); will-change:transform;}
.pil-card{flex:0 0 clamp(266px, 74vw, 352px); display:flex; flex-direction:column; gap:16px;
padding:30px 26px 26px; border:1px solid var(--border); border-radius:20px;
background:var(--surface); transition:border-color .2s ease, background .2s ease;}
.pil-card:hover{border-color:var(--border-strong); background:var(--surface-2);}
.pil-card.is-open{border-color:var(--border-strong);}
/* fiche au repos : logo de la technologie + nom, rien d'autre */
.pil-logo{display:flex; align-items:center; min-height:54px;}
.pil-logo .tl{height:46px; width:auto; max-width:112px; display:block;}
.pil-name{font-size:21px; font-weight:600; letter-spacing:-0.025em; line-height:1.28;
min-height:2.56em;}
/* depliage des details */
.pil-toggle{display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
padding:6px 0; background:none; border:0; cursor:pointer; font-family:var(--font-display);
font-size:13px; font-weight:600; color:var(--accent-soft); transition:color .18s ease;}
.pil-toggle:hover{color:var(--text);}
.pil-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:4px; border-radius:6px;}
.pil-chev{width:15px; height:15px; flex:none; transition:transform .22s ease;}
.pil-toggle .pil-less{display:none;}
.pil-toggle[aria-expanded="true"] .pil-more-lab{display:none;}
.pil-toggle[aria-expanded="true"] .pil-less{display:inline;}
.pil-toggle[aria-expanded="true"] .pil-chev{transform:rotate(180deg);}
.pil-det{display:flex; flex-direction:column; gap:14px; animation:pilOpen .26s ease both;}
@keyframes pilOpen{from{opacity:0; transform:translateY(-5px);} to{opacity:1; transform:none;}}
.pil-tag{font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
color:var(--text-mute); font-family:var(--font-display); line-height:1.35;}
.pil-block{display:block;}
.pil-lab{display:block; margin-bottom:6px; font-size:10.5px; font-weight:700; letter-spacing:.14em;
text-transform:uppercase; color:var(--text-mute); font-family:var(--font-display);}
.pil-block p{color:var(--text-dim); font-size:14.5px; line-height:1.62;}
.pil-btn{margin-top:4px; align-self:flex-start; padding:11px 24px; font-size:13.5px;}
.pil-nav{display:flex; align-items:center; justify-content:space-between; gap:20px;
margin-top:clamp(20px,2.4vw,30px);}
.pil-dots{display:flex; align-items:center; gap:8px;}
.pil-dots button{width:8px; height:8px; padding:0; border:none; border-radius:999px; cursor:pointer;
background:var(--border-strong); transition:width .25s ease, background .25s ease;}
.pil-dots button.is-on{width:24px; background:var(--accent);}
.pil-arrows{display:flex; gap:10px;}
.pil-arrow{width:42px; height:42px; display:grid; place-items:center; border-radius:999px;
border:1px solid var(--border-strong); background:transparent; color:var(--text-dim); cursor:pointer;
transition:color .18s ease, border-color .18s ease;}
.pil-arrow:hover{color:var(--text); border-color:var(--accent);}
.pil-arrow svg{width:19px; height:19px;}
[dir="rtl"] .pil-arrow svg{transform:scaleX(-1);}
.pil-cta{display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:clamp(24px,2.8vw,36px);
padding-top:clamp(22px,2.6vw,30px); border-top:1px solid var(--border);}
.btn-lg{padding:16px 32px; font-size:15px;}
.pil-cta-note{color:var(--text-mute); font-size:13.5px; line-height:1.5;}
@media (max-width:820px){
.pil-track{padding-inline:24px; gap:16px;}
.pil-nav{flex-direction:column-reverse; align-items:flex-start;}
.pil-cta{flex-direction:column; align-items:flex-start;}
}
@media (prefers-reduced-motion: reduce){ .pil-track{transition:none;}
.pil-det{animation:none;} .pil-chev{transition:none;} }
/* ==========================================================================
PAGES DÉDIÉES : bandeau de titre et lien de retour
========================================================================== */
.pagehead{padding:clamp(52px,6vw,86px) 0 clamp(20px,2.4vw,34px);}
.pagehead h1{font-size:clamp(32px,4.4vw,56px); font-weight:600; letter-spacing:-0.035em;
line-height:1.06; margin:14px 0 18px; max-width:22ch;}
.pagehead p{color:var(--text-dim); font-size:clamp(16px,1.5vw,19px); line-height:1.6; max-width:62ch;}
.backhome{display:inline-flex; align-items:center; gap:8px; margin-bottom:22px; padding:9px 18px;
border:1px solid var(--border-strong); border-radius:999px; color:var(--text-dim);
font-size:13.5px; font-weight:600; text-decoration:none; transition:color .18s ease, border-color .18s ease;}
.backhome:hover{color:var(--text); border-color:var(--accent);}
.backhome svg{width:16px; height:16px;}
[dir="rtl"] .backhome svg{transform:scaleX(-1);}
.backhome-foot{margin:0 0 clamp(60px,7vw,96px);}
/* cas d'usage : secteurs en retrait */
.uc-sep{flex-basis:100%; text-align:center; margin:14px 0 2px; font-size:10.5px; font-weight:700; letter-spacing:.14em;
text-transform:uppercase; color:var(--text-mute); font-family:var(--font-display);}
.uc-tab.uc-sec{opacity:.62;}
.uc-tab.uc-sec:hover, .uc-tab.uc-sec.active{opacity:1;}
/* ==========================================================================
CARTES GEOGRAPHIQUES — emprise reduite d'environ un tiers
Les etiquettes de site sont agrandies d'autant dans le repere du SVG
pour rester lisibles a l'ecran malgre le cadre plus etroit.
========================================================================== */
.staticmap.dz-photo, .staticmap.africa.af-outline{max-width:760px;
margin-inline:auto; margin-top:26px;}
.staticmap.africa.af-outline .sm-t{font-size:18px;}
.staticmap.dz-photo .sm-t{font-size:15px;}
.staticmap.dz-photo .sm-s{font-size:11.5px;}
.staticmap.dz-photo .sm-a{font-size:10.5px;}
.staticmap.dz-photo .sm-sea, .staticmap.africa.af-outline .sm-sea{font-size:13px;}
.staticmap.africa.af-outline .map-brand.over.center{width:min(320px, calc(100% - 40px));}
.staticmap.africa.af-outline .map-brand-logo{max-width:190px;}
.staticmap.dz-photo .sm-legend, .staticmap.africa.af-outline .sm-legend{
padding:12px 18px 15px;}
@media (max-width:820px){
.staticmap.dz-photo, .staticmap.africa.af-outline{max-width:none;}
}
/* ===== jalons de trajectoire posés sur le visuel ===== */
.neo-mile{list-style:none; display:flex; flex-wrap:wrap; align-items:center;
gap:0 clamp(18px,3vw,44px); margin:26px 0 0; padding:14px 0 0;
border-top:1px solid rgba(255,255,255,.12);}
.neo-mile li{display:flex; align-items:baseline; gap:8px; position:relative;
font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size:11px; letter-spacing:.04em; color:rgba(255,255,255,.46);
white-space:nowrap;}
.neo-mile em{font-style:normal; font-weight:600; color:rgba(255,255,255,.62);}
.neo-mile span[data-i18n]{text-transform:uppercase; letter-spacing:.11em; font-size:10px;}
.nm-dot{width:5px; height:5px; border-radius:50%; flex:none;
background:rgba(255,255,255,.34); align-self:center;}
.neo-mile li.is-now{color:rgba(255,255,255,.92);}
.neo-mile li.is-now em{color:#fff;}
.neo-mile li.is-now .nm-dot{background:#a678ff; box-shadow:0 0 0 3px rgba(166,120,255,.22);}
@media (max-width:760px){
.neo-mile{gap:12px 22px; margin-top:20px; padding-top:16px;}
.neo-mile li{padding-inline-start:17px;}
.neo-mile li:not(:last-child)::after{display:none;}
.neo-mile em{font-size:12.5px;}
.neo-mile span[data-i18n]{font-size:9.5px;}
}
/* ===== cas d'usage : index numéroté à gauche, scène à droite ===== */
.uc-layout{display:grid; grid-template-columns:minmax(216px,258px) 1fr;
gap:clamp(26px,3.2vw,54px); align-items:start;}
.uc-layout .uc-tabs{display:flex; flex-direction:column; gap:0; margin:0;
justify-content:flex-start; flex-wrap:nowrap;
border-inline-start:1px solid var(--border); position:sticky; top:96px;}
.uc-layout .uc-tab{position:relative; width:100%; justify-content:flex-start;
gap:12px; padding:11px 14px; border:0; border-radius:0; background:none;
font-family:var(--font-mono); font-size:12.4px; font-weight:500; letter-spacing:.01em;
color:var(--text-mute); text-align:start; cursor:pointer;
transition:color .18s ease, background .18s ease;}
.uc-layout .uc-tab::before{content:""; position:absolute; inset-inline-start:-1px; top:6px; bottom:6px;
width:2px; background:var(--accent); opacity:0; transition:opacity .2s ease;}
.uc-layout .uc-tab:hover{color:var(--text);}
.uc-layout .uc-tab.active{color:var(--text); background:rgba(255,255,255,.035);}
.uc-layout .uc-tab.active::before{opacity:1;}
.uc-n{font-style:normal; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em;
color:var(--text-mute); opacity:.5; flex:none; width:20px;}
.uc-layout .uc-tab.active .uc-n{color:var(--accent); opacity:1;}
.uc-layout .uc-tab-ic{display:none;}
.uc-layout .uc-sep{display:block; width:100%; margin:16px 0 6px; padding:0 14px;
font-family:var(--font-mono); font-size:9.5px; font-weight:600; letter-spacing:.16em;
text-transform:uppercase; color:var(--text-mute); opacity:.6;}
.uc-layout .uc-tab.uc-sec{opacity:.55; font-size:11.8px;}
.uc-layout .uc-tab.uc-sec:hover, .uc-layout .uc-tab.uc-sec.active{opacity:1;}
.uc-layout .uc-stage{min-width:0;}
.uc-layout .uc-photo, .uc-layout .uc-panel .uc-photo{height:clamp(360px,42vw,540px); max-width:none;}
[dir="rtl"] .uc-layout .uc-tabs{border-inline-start:0; border-inline-end:1px solid var(--border);}
@media (max-width:960px){
.uc-layout{grid-template-columns:1fr; gap:22px;}
.uc-layout .uc-tabs{flex-direction:row; overflow-x:auto; border-inline-start:0;
border-bottom:1px solid var(--border); position:static; padding-bottom:2px; scrollbar-width:none;}
.uc-layout .uc-tabs::-webkit-scrollbar{display:none;}
.uc-layout .uc-tab{width:auto; flex:0 0 auto; white-space:nowrap; padding:10px 14px;}
.uc-layout .uc-tab::before{inset-inline:0; top:auto; bottom:-1px; height:2px; width:auto;}
.uc-layout .uc-sep{display:none;}
.uc-n{display:none;}
}
/* ===== tags de l'accroche : jetons de code ===== */
/* ===== terminal plus présent ===== */
/* ===== menu principal : une seule ligne ===== */
@media (min-width:981px){
.navlinks{gap:0;}
.navlinks > a, .navdrop-label a{font-size:12.4px; padding:7px 9px; white-space:nowrap;}
nav{gap:12px;}
}
@media (min-width:981px) and (max-width:1280px){
.navlinks > a, .navdrop-label a{font-size:11.7px; padding:6px 7px;}
}
/* ===== logotype OneCloud, barre de navigation ===== */
.logo{display:inline-flex; align-items:center; gap:0;}
.logo img{height:30px; width:auto; display:block;
opacity:1;
transition:opacity .18s ease, transform .18s ease;
shape-rendering:geometricPrecision;}
.logo:hover img{opacity:.82;}
html[data-theme="light"] .logo img{filter:none;}
@media (max-width:1280px){ .logo img{height:27px;} }
@media (max-width:980px){ .logo img{height:25px;} }
/* pied de page */
.foot-brand img{height:32px; width:auto; opacity:.92;}
html[data-theme="light"] .foot-brand img{filter:none;}
/* ===== À propos : trois temps, pastilles alignées hors du texte ===== */
.ab-beats{grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,34px); position:relative;}
.ab-beats::before{top:13px; left:0; right:0; height:1px;
background:linear-gradient(90deg, transparent, var(--border) 12%, var(--border) 88%, transparent);
opacity:1;}
.ab-beat{padding:44px 0 0 !important; border:0 !important; background:none !important;
border-radius:0 !important; overflow:visible;}
.ab-beat::before{content:none !important;}
.ab-beat::after{top:7px; inset-inline-start:0; width:13px; height:13px;
border-width:2px; box-shadow:0 0 0 5px var(--bg);}
html:not([data-theme="light"]) .ab-beat::after{background:#08080a; box-shadow:0 0 0 5px #08080a;}
.ab-beat .ab-n{position:static; margin:0 0 10px; display:block;
font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.18em;
text-transform:uppercase;}
.ab-beat h3{margin:0 0 10px; font-size:17.5px; letter-spacing:-.02em; line-height:1.25;}
.ab-beat p{font-size:14px; line-height:1.68;}
@media (max-width:860px){
.ab-beats{grid-template-columns:1fr; gap:24px;}
.ab-beats::before{top:0; bottom:0; left:6px; right:auto; width:1px; height:auto;
background:linear-gradient(180deg, transparent, var(--border) 8%, var(--border) 92%, transparent);}
[dir="rtl"] .ab-beats::before{left:auto; right:6px;}
.ab-beat{padding:0 0 0 30px !important;}
[dir="rtl"] .ab-beat{padding:0 30px 0 0 !important;}
.ab-beat::after{top:4px; inset-inline-start:0;}
}
.cc-maplink{display:inline-flex; align-items:center; gap:6px; margin-top:7px;
font-family:var(--font-mono); font-size:11.5px; letter-spacing:.02em;
color:var(--link-accent); text-decoration:none; opacity:.9;}
.cc-maplink svg{width:13px; height:13px; flex:none;}
.cc-maplink:hover{opacity:1; text-decoration:underline;}
/* ===== Store : fiches compactes, tout sur une page ===== */
.st-cats{gap:clamp(16px,1.8vw,24px);}
.st-cat-h{margin:0 0 9px; font-size:10px; letter-spacing:.18em;}
.st-grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:7px;}
.st-card{padding:7px 10px; gap:8px; border-radius:10px;}
.st-logo{width:18px; height:18px;}
.st-name{font-size:11.8px; line-height:1.2;}
.st-card.is-lead{padding:12px 13px; gap:9px;}
.st-logo.lg{width:26px; height:26px;}
.st-card.is-lead .st-name{font-size:13px;}
.oc-sub{--ocs-h:38px; max-width:250px;}
.oc-sub.is-lg{--ocs-h:42px; max-width:290px;}
.oc-sub-lab{font-size:12px;}
.oc-sub.is-lg .oc-sub-lab{font-size:12.8px;}
.oc-sub-thumb svg{width:15px; height:15px;}
.oc-sub-hint{font-size:9.8px;}
@media (min-width:1100px){
.st-grid{grid-template-columns:repeat(auto-fill,minmax(138px,1fr));}
}
@media (max-width:640px){
.st-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));}
.st-card.is-lead{grid-column:1 / -1;}
}
/* ===== arguments : lignes pleine largeur, chiffre à droite ===== */
.arg-list{display:flex; flex-direction:column;}
.arg-row{display:grid; grid-template-columns:48px 1fr minmax(150px,210px);
gap:clamp(18px,2.4vw,42px); align-items:start;
padding:clamp(26px,2.8vw,38px) 0; border-top:1px solid var(--border);}
.arg-row:last-child{border-bottom:1px solid var(--border);}
.arg-n{font-style:normal; font-family:var(--font-mono); font-size:11px; font-weight:500;
letter-spacing:.14em; color:var(--text-mute); opacity:.55; padding-top:5px;}
.arg-tx{min-width:0;}
.arg-k{display:block; font-family:var(--font-mono); font-size:9.8px; font-weight:600;
letter-spacing:.2em; text-transform:uppercase; color:var(--accent-soft); margin-bottom:9px;}
.arg-row h3{margin:0 0 9px; font-size:clamp(19px,2.1vw,27px); line-height:1.22;
letter-spacing:-.024em; max-width:22ch;}
.arg-row p{margin:0; font-size:14.4px; line-height:1.66; color:var(--text-dim); max-width:56ch;}
.arg-fig{text-align:end; padding-top:2px;}
.arg-fig strong{display:block; font-family:var(--font-mono); font-variant-numeric:tabular-nums;
font-size:clamp(22px,2.5vw,32px); font-weight:600; letter-spacing:-.03em; color:var(--text);
line-height:1.05;}
.arg-fig span{display:block; margin-top:6px; font-family:var(--font-mono); font-size:10.4px;
letter-spacing:.09em; color:var(--text-mute);}
.arg-row{transition:background .22s ease;}
.arg-row:hover{background:rgba(255,255,255,.022);}
html[data-theme="light"] .arg-row:hover{background:rgba(10,12,24,.025);}
[dir="rtl"] .arg-fig{text-align:start;}
@media (max-width:860px){
.arg-row{grid-template-columns:1fr; gap:14px; padding:24px 0;}
.arg-n{padding-top:0;}
.arg-fig{text-align:start; display:flex; align-items:baseline; gap:10px;}
.arg-fig span{margin-top:0;}
}
/* ===== Store : catalogue en lignes, une catégorie par ligne ===== */
.st-cats{gap:0;}
.st-cat{display:grid; grid-template-columns:minmax(150px,190px) 1fr;
gap:clamp(14px,2vw,34px); align-items:baseline;
padding:13px 0; border-top:1px solid var(--border);}
.st-cat:last-child{border-bottom:1px solid var(--border);}
.st-cat-h{margin:0; display:flex; align-items:baseline; gap:9px;
font-family:var(--font-mono); font-size:10.4px; font-weight:500; letter-spacing:.16em;
text-transform:uppercase; color:var(--text-mute); white-space:nowrap;}
.st-cat-h::after{content:none;}
.st-cat-n{opacity:.5;}
.st-cat-c{margin-inline-start:auto; opacity:.45;}
.st-grid{display:flex; flex-wrap:wrap; gap:6px; grid-template-columns:none;}
.st-card{display:inline-flex; align-items:center; gap:7px; width:auto;
padding:5px 10px 5px 7px; border-radius:7px;
border:1px solid var(--border); background:none;}
.st-card:hover{border-color:rgba(166,120,255,.45); background:rgba(166,120,255,.07);}
.st-logo{width:15px; height:15px;}
.st-name{font-size:11.6px; font-weight:500; white-space:nowrap;}
/* les cinq services du pilote gardent leur dépliant, sans devenir des pavés */
.st-card.is-lead{display:inline-flex; flex-direction:row; align-items:center;
grid-column:auto; width:auto; padding:5px 10px 5px 7px; gap:7px;
background:rgba(166,120,255,.09); border-color:rgba(166,120,255,.34);}
.st-card.is-lead .st-card-h{display:inline-flex; align-items:center; gap:7px;}
.st-card.is-lead .st-logo.lg{width:16px; height:16px;}
.st-card.is-lead .st-name{font-size:11.6px; font-weight:600;}
/* le dépliant sort de la ligne et occupe toute la largeur */
.st-card.is-open{flex-wrap:wrap; width:100%; align-items:flex-start;
padding:11px 13px; border-radius:11px;}
[dir="rtl"] .st-cat-c{margin-inline-start:auto;}
@media (max-width:820px){
.st-cat{grid-template-columns:1fr; gap:8px; padding:14px 0;}
.st-cat-c{margin-inline-start:8px;}
}
/* ===== barre de navigation : logo plus grand, intitulés courts ===== */
.logo img{height:38px;}
@media (max-width:1280px){ .logo img{height:34px;} }
@media (max-width:980px){ .logo img{height:30px;} }
@media (min-width:981px){
nav{gap:16px;}
.navlinks{gap:2px;}
.navlinks > a, .navdrop-label a{font-size:13px; padding:7px 10px; white-space:nowrap;
letter-spacing:-.005em;}
}
@media (min-width:981px) and (max-width:1280px){
.navlinks > a, .navdrop-label a{font-size:12.4px; padding:6px 8px;}
}
/* ===== Technologie Store : mur filtrable, compact ===== */
.st-wall-wrap{margin-top:4px;}
.st-filters{display:flex; flex-wrap:wrap; gap:5px; margin-bottom:14px;
padding-bottom:14px; border-bottom:1px solid var(--border);}
.stf{display:inline-flex; align-items:center; gap:6px; cursor:pointer;
padding:5px 10px; border-radius:999px; border:1px solid var(--border);
background:none; color:var(--text-mute);
font-family:var(--font-mono); font-size:10.6px; font-weight:500; letter-spacing:.05em;
transition:color .16s ease, border-color .16s ease, background .16s ease;}
.stf i{font-style:normal; font-size:9.4px; opacity:.5; font-variant-numeric:tabular-nums;}
.stf:hover{color:var(--text); border-color:var(--border-strong);}
.stf.is-on{color:#fff; background:rgba(166,120,255,.16); border-color:rgba(166,120,255,.5);}
html[data-theme="light"] .stf.is-on{color:#0c0d16; background:rgba(155,47,224,.12);}
.st-wall{display:flex; flex-wrap:wrap; gap:6px; align-items:flex-start;}
.st-wall .st-card{display:inline-flex; align-items:center; gap:7px; width:auto;
padding:6px 11px 6px 8px; border-radius:8px;
border:1px solid var(--border); background:none;}
.st-wall .st-card[hidden]{display:none;}
.st-wall .st-card:hover{border-color:rgba(166,120,255,.45); background:rgba(166,120,255,.07);}
.st-wall .st-logo{width:16px; height:16px;}
.st-wall .st-name{font-size:11.8px; font-weight:500; white-space:nowrap;}
.st-wall .st-card.is-lead{flex-direction:row; align-items:center; width:auto; padding:6px 11px 6px 8px;
gap:7px; background:rgba(166,120,255,.10); border-color:rgba(166,120,255,.34);}
.st-wall .st-card.is-lead .st-card-h{display:inline-flex; align-items:center; gap:7px;}
.st-wall .st-card.is-lead .st-logo.lg{width:17px; height:17px;}
.st-wall .st-card.is-lead .st-name{font-size:11.8px; font-weight:600;}
/* fiche ouverte : elle prend la ligne entière */
.st-lab{display:block; font-family:var(--font-mono); font-size:9.4px; letter-spacing:.16em;
text-transform:uppercase; color:var(--text-mute); margin-bottom:5px;}
@media (max-width:640px){
.st-wall .st-name{font-size:11.2px;}
}
/* ===== logo : gabarit fixe, insensible au changement de langue ===== */
.logo{flex:0 0 auto; width:131px; height:40px; display:inline-flex; align-items:center;}
.logo img{width:131px; height:40px; max-width:none; object-fit:contain; flex:none;}
.navlinks{min-width:0;}
@media (max-width:1280px){ .logo, .logo img{width:117px; height:36px;} }
@media (max-width:980px){ .logo, .logo img{width:103px; height:31px;} }
/* ===== pied de page simplifié ===== */
footer{border-top:1px solid var(--border); margin-top:clamp(60px,7vw,110px);
padding:clamp(34px,4vw,54px) 0 clamp(24px,2.6vw,34px);}
.foot-grid{display:none;}
.foot-top{display:flex; align-items:center; gap:clamp(18px,3vw,40px); flex-wrap:wrap;
padding-bottom:22px; border-bottom:1px solid var(--border);}
.foot-logo{flex:0 0 auto; display:inline-flex;}
.foot-logo img{width:124px; height:36px; object-fit:contain;
opacity:.92;}
html[data-theme="light"] .foot-logo img{filter:none;}
.foot-nav{display:flex; flex-wrap:wrap; gap:4px 6px; margin-inline-start:auto;}
.foot-nav a{font-size:12.8px; color:var(--text-dim); text-decoration:none;
padding:6px 9px; border-radius:7px; transition:color .16s ease, background .16s ease;}
.foot-nav a:hover{color:var(--text); background:rgba(255,255,255,.05);}
html[data-theme="light"] .foot-nav a:hover{background:rgba(10,12,24,.05);}
.foot-legal{display:flex; flex-wrap:wrap; gap:6px 20px; padding:18px 0;
border-bottom:1px solid var(--border);}
.foot-legal a{font-size:11.8px; color:var(--text-mute); text-decoration:none;
display:inline-flex; align-items:center;}
.foot-legal a:hover{color:var(--text); text-decoration:underline;}
.foot-bottom{display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px; padding-top:16px;}
.fb-l, .fb-m{display:inline-flex; align-items:center; font-size:11.6px; color:var(--text-mute);}
.foot-ids{display:inline-flex; flex-wrap:wrap; gap:6px 16px; margin-inline-start:auto;
padding-inline-start:0; margin-inline-end:0; border:0;}
.foot-ids > span{display:inline-flex; align-items:baseline; gap:6px;}
.foot-ids small{font-family:var(--font-mono); font-size:9.2px; font-weight:600;
letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute); opacity:.75;}
.foot-ids strong{font-family:var(--font-mono); font-size:11px; font-weight:500;
color:var(--text-dim); font-variant-numeric:tabular-nums;}
.foot-note{margin:14px 0 0; font-size:10.8px; color:var(--text-mute); opacity:.75;}
.foot-inst, .foot-brand, .foot-col, .foot-tagline{display:none;}
@media (max-width:820px){
.foot-top{gap:14px;}
.foot-nav{margin-inline-end:0; width:100%;}
.foot-ids{margin-inline-start:0; width:100%;}
}
/* ===== plus aucun bouton violet ===== */
.btn-primary, .finalcta .btn-primary, .contact-cta, .hero-ctas .btn-primary{
background:#08080b !important; border:1px solid #26262e !important; color:#fff !important;
box-shadow:none !important;}
.btn-primary:hover, .contact-cta:hover{border-color:#4a4a58 !important; background:#101015 !important;}
html[data-theme="light"] .btn-primary, html[data-theme="light"] .contact-cta{
background:#0a0a0d !important; border-color:#0a0a0d !important; color:#fff !important;}
html[data-theme="light"] .btn-primary:hover{background:#1a1a20 !important;}
.navright .btn-primary{background:#08080b !important;}
/* ==================================================================
Barre de navigation : rien ne se chevauche, rien n'est tronqué
================================================================== */
nav{display:flex; align-items:center; flex-wrap:nowrap; gap:14px;}
.logo{flex:0 0 auto;}
.regdrop{flex:0 0 auto;}
.navlinks{flex:1 1 auto; min-width:0; justify-content:center;
display:flex; align-items:center; gap:0;}
.navright{flex:0 0 auto; display:flex; align-items:center; gap:8px;}
.navdrop{flex:0 0 auto;}
.navlinks > a, .navdrop-label a{white-space:nowrap;}
/* le menu déroulant reste visible au-dessus de tout */
.navdrop-menu{z-index:80;}
.langdrop-menu, .regdrop-menu{z-index:90;}
/* menu compact tant que la place manque */
@media (min-width:1101px){
.navlinks > a, .navdrop-label a{font-size:12.6px; padding:7px 9px;}
}
@media (min-width:1101px) and (max-width:1360px){
nav{gap:10px;}
.navlinks > a, .navdrop-label a{font-size:12px; padding:6px 7px;}
.navright{gap:6px;}
.navright .btn-ghost{display:none;} /* on garde le seul bouton Démarrer */
.regdrop-current{display:none;} /* drapeau seul */
.regdrop-toggle{padding:4px 7px 4px 5px;}
}
@media (max-width:1100px){
.navlinks{display:none;}
.navmobile-btn{display:inline-flex;}
.navright .btn-ghost{display:none;}
.regdrop-current{display:none;}
}
@media (max-width:1100px){
.navlinks.open{display:flex; position:absolute; top:64px; left:0; right:0;
flex-direction:column; align-items:stretch; gap:0; z-index:70;
background:var(--bg); padding:14px 22px 20px;
border-bottom:1px solid var(--border);
box-shadow:0 26px 50px -26px rgba(0,0,0,.7);}
.navlinks.open > a, .navlinks.open .navdrop{width:100%;}
.navlinks.open .navdrop-label a{font-size:15px; padding:12px 4px;}
.navlinks.open > a{font-size:15px; padding:12px 4px; border-bottom:1px solid var(--border);}
}
@media (max-width:620px){
.navright .btn-primary{padding:7px 13px; font-size:12px;}
.logo, .logo img{width:96px; height:29px;}
}
/* ==================================================================
Barre de navigation : logo qui s'adapte, quatre menus seulement
================================================================== */
nav{display:flex; align-items:center; flex-wrap:nowrap; gap:clamp(8px,1.2vw,18px);}
/* le logo se dimensionne avec la fenêtre, sans jamais être écrasé */
.logo{flex:0 0 auto; width:clamp(88px,8.4vw,112px); height:auto; display:inline-flex; align-items:center;}
.logo img{width:100%; height:auto; aspect-ratio:560 / 171; max-width:none; object-fit:contain; flex:none;}
@media (max-width:1280px){ .logo{width:clamp(84px,8vw,100px);} }
@media (max-width:980px){ .logo{width:92px;} }
@media (max-width:620px){ .logo{width:82px;} }
.regdrop{flex:0 0 auto;}
.navlinks{flex:1 1 auto; min-width:0; display:flex; align-items:center;
justify-content:center; gap:0;}
.navright{flex:0 0 auto; display:flex; align-items:center; gap:8px;}
.navdrop{flex:0 0 auto;}
.navlinks > a, .navdrop-label a{white-space:nowrap;}
.navdrop-menu{z-index:80;}
.langdrop-menu, .regdrop-menu{z-index:90;}
@media (min-width:1025px){
.navlinks > a, .navdrop-label a{font-size:13px; padding:7px 10px;}
}
@media (min-width:1025px) and (max-width:1240px){
.navlinks > a, .navdrop-label a{font-size:12.2px; padding:6px 8px;}
.navright{gap:6px;}
.navright .btn-ghost{display:none;}
.regdrop-current{display:none;}
.regdrop-toggle{padding:4px 7px 4px 5px;}
}
@media (max-width:1024px){
.navlinks{display:none;}
.navmobile-btn{display:inline-flex;}
.navright .btn-ghost{display:none;}
.regdrop-current{display:none;}
.navlinks.open{display:flex; position:absolute; top:64px; left:0; right:0;
flex-direction:column; align-items:stretch; gap:0; z-index:70;
background:var(--bg); padding:14px 22px 20px;
border-bottom:1px solid var(--border);
box-shadow:0 26px 50px -26px rgba(0,0,0,.7);}
.navlinks.open > a, .navlinks.open .navdrop{width:100%;}
.navlinks.open .navdrop-label a{font-size:15px; padding:12px 4px;}
.navlinks.open > a{font-size:15px; padding:12px 4px; border-bottom:1px solid var(--border);}
}
@media (max-width:620px){
.navright .btn-primary{padding:7px 13px; font-size:12px;}
}
/* le pied de page perd aussi l'entrée Partenaires de premier niveau */
.foot-logo img{width:112px; height:auto; aspect-ratio:560 / 171;}
/* ===== Store : fiche pilote et panneau de détail unique ===== */
.st-wall .st-card.is-lead{padding:0; background:rgba(166,120,255,.10);
border-color:rgba(166,120,255,.34); overflow:hidden;}
.st-open{display:inline-flex; align-items:center; gap:7px; cursor:pointer;
border:0; background:none; font-family:inherit; color:inherit;
padding:6px 10px 6px 8px;}
.st-open .st-logo.lg{width:17px; height:17px; flex:none;}
.st-open .st-name{font-family:var(--font-mono); font-size:11.8px; font-weight:600;
color:var(--text); white-space:nowrap;}
.st-plus{position:relative; width:11px; height:11px; flex:none; margin-inline-start:2px;
opacity:.7;}
.st-plus::before, .st-plus::after{content:""; position:absolute; inset-inline:0; top:50%;
height:1.5px; background:var(--accent-soft); transform:translateY(-50%);
transition:transform .2s ease, opacity .2s ease;}
.st-plus::after{transform:translateY(-50%) rotate(90deg);}
.st-card.is-lead.is-open .st-plus::after{transform:translateY(-50%) rotate(0deg); opacity:0;}
.st-card.is-lead.is-open{background:rgba(166,120,255,.2); border-color:rgba(166,120,255,.7);}
.st-panel{margin-top:0;}
.st-panel.is-open{margin-top:12px;}
.stp{border:1px solid rgba(166,120,255,.34); border-radius:14px; padding:16px 18px 18px;
background:var(--surface-2);}
.stp[hidden]{display:none;}
.stp-head{display:flex; align-items:center; gap:10px; margin-bottom:12px;
padding-bottom:11px; border-bottom:1px solid var(--border);}
.stp-head .st-logo.lg{width:22px; height:22px; flex:none;}
.stp-head h4{margin:0; flex:1; font-size:15px; letter-spacing:-.02em;}
.stp-close{flex:none; width:28px; height:28px; border-radius:50%; cursor:pointer;
display:grid; place-items:center; border:1px solid var(--border);
background:none; color:var(--text-mute); transition:color .16s ease, border-color .16s ease;}
.stp-close svg{width:14px; height:14px;}
.stp-close:hover{color:var(--text); border-color:var(--border-strong);}
.stp-body{display:flex; flex-wrap:wrap; gap:16px 26px; margin-bottom:14px;}
.stp-body .st-block{flex:1 1 260px; min-width:0;}
.stp .st-lab{display:block; font-family:var(--font-mono); font-size:9.4px; letter-spacing:.16em;
text-transform:uppercase; color:var(--text-mute); margin-bottom:5px;}
.stp p{margin:0; font-size:13px; line-height:1.58; color:var(--text-dim);}
@media (max-width:640px){ .stp-body{flex-direction:column; gap:12px;} }
/* ===== paire de boutons finale : sobre, sans aplat criard ===== */
.cta-pair{display:inline-flex; flex-wrap:wrap; gap:0; margin-top:6px;
border:1px solid var(--border-strong); border-radius:14px; overflow:hidden;
background:var(--surface);}
html:not([data-theme="light"]) .cta-pair{background:rgba(255,255,255,.03);}
.cta{display:inline-flex; align-items:center; gap:10px; text-decoration:none;
padding:15px 22px; font-size:14px; font-weight:600; letter-spacing:-.005em;
color:var(--text); position:relative;
transition:background .18s ease, color .18s ease;}
.cta + .cta{border-inline-start:1px solid var(--border-strong);}
.cta-ar{width:17px; height:17px; flex:none; opacity:.55;
transition:transform .22s cubic-bezier(.2,.85,.25,1), opacity .18s ease;}
.cta:hover{background:rgba(255,255,255,.05);}
html[data-theme="light"] .cta:hover{background:rgba(10,12,24,.04);}
.cta:hover .cta-ar{transform:translateX(4px); opacity:1;}
[dir="rtl"] .cta-ar{transform:scaleX(-1);}
[dir="rtl"] .cta:hover .cta-ar{transform:scaleX(-1) translateX(4px);}
.cta:focus-visible{outline:2px solid var(--accent-soft); outline-offset:-2px;}
/* le premier porte l'accent, en filet et non en aplat */
.cta-1{color:#fff; background:#0c0c11;}
.cta-1::after{content:""; position:absolute; inset-inline:16px; bottom:9px; height:1.5px;
border-radius:2px; background:linear-gradient(90deg,#8b3ff0,#04acff);
transform:scaleX(0); transform-origin:0 50%; transition:transform .26s cubic-bezier(.2,.85,.25,1);}
.cta-1:hover{background:#14141b;}
.cta-1:hover::after{transform:scaleX(1);}
html[data-theme="light"] .cta-1{background:#0a0a0d; color:#fff;}
html[data-theme="light"] .cta-1:hover{background:#1a1a20;}
@media (max-width:560px){
.cta-pair{display:flex; width:100%; flex-direction:column;}
.cta{justify-content:space-between; padding:14px 18px;}
.cta + .cta{border-inline-start:0; border-top:1px solid var(--border-strong);}
}
/* ===== sous-menu Usages : deux colonnes, comme Produit ===== */
@media (min-width:1025px){
.navdrop-menu.uc-wide{min-width:500px; grid-template-columns:1fr 1fr; gap:2px 6px;}
.navdrop-menu.uc-wide .navdrop-menu-head{grid-column:1 / -1; margin-top:2px;}
.navdrop-menu.uc-wide .navdrop-menu-head:first-child{margin-top:0;}
.navdrop-menu.uc-wide a{white-space:nowrap;}
}
@media (min-width:1025px) and (max-width:1240px){
.navdrop-menu.uc-wide{min-width:460px;}
.navdrop-menu.wide{min-width:440px;}
}
/* « Neo » surligné dans l'accroche */
.neo-banner-sub .neo-hl{font-weight:800; color:#fff;
background-image:linear-gradient(90deg,#8b3ff0,#04acff);
background-repeat:no-repeat; background-size:100% 3px; background-position:0 100%;
padding-bottom:3px;}
/* état de la région active : libellé daté */
.reg-state{white-space:nowrap; font-size:9.6px; letter-spacing:.04em; padding:3px 9px;}
.regdrop-item.active .reg-state{background:rgba(5,202,92,.16); color:#5ee39a;}
html[data-theme="light"] .regdrop-item.active .reg-state{color:#059f52;}
.regdrop-menu{min-width:298px;}
.regdrop-item{gap:9px;}
.reg-name{flex:1 1 auto; min-width:0;}
/* ==========================================================================
INDUSTRIE : une ligne de production, une plateforme
========================================================================== */
.indus .sec-head{margin-bottom:clamp(34px,4vw,52px);}
/* ---- comparatif local / cloud ---- */
.ind-compare{display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch;
gap:clamp(16px,2.2vw,30px); margin-bottom:clamp(40px,4.6vw,64px);}
.ind-way{border:1px solid var(--border); border-radius:var(--radius-lg); padding:clamp(22px,2.4vw,32px);
background:var(--surface); display:flex; flex-direction:column; min-width:0;}
.ind-old{background:transparent;}
.ind-old h3, .ind-old .ind-total strong{color:var(--text-dim);}
.ind-new{border-color:rgba(155,47,224,.34); background:linear-gradient(160deg, rgba(155,47,224,.09), rgba(155,47,224,.02) 62%), var(--surface);}
.ind-way-tag{display:inline-flex; align-self:flex-start; padding:5px 12px; border-radius:999px;
font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
border:1px solid var(--border-strong); color:var(--text-mute); margin-bottom:14px;}
.ind-new .ind-way-tag{border-color:rgba(155,47,224,.5); color:var(--accent-soft); background:rgba(155,47,224,.1);}
.ind-way h3{font-size:clamp(17px,1.7vw,20.5px); font-weight:700; letter-spacing:-.015em; line-height:1.28; margin-bottom:20px;}
.ind-steps{list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:0; flex:1;}
.ind-steps li{display:grid; grid-template-columns:minmax(96px,132px) 1fr; gap:14px; align-items:baseline;
padding:11px 0; border-top:1px solid var(--border);}
.ind-steps li:first-child{border-top:0; padding-top:0;}
.ind-steps em{font-family:var(--font-mono); font-style:normal; font-size:12.5px; font-weight:600;
color:var(--text-mute); letter-spacing:-.01em;}
.ind-new .ind-steps em{color:var(--accent-soft);}
.ind-steps span{font-size:14.5px; line-height:1.45; color:var(--text-dim);}
.ind-total{display:flex; flex-direction:column; gap:3px; padding-top:16px; border-top:1px solid var(--border-strong);}
.ind-total strong{font-size:clamp(20px,2.3vw,27px); font-weight:800; letter-spacing:-.025em; color:var(--text);}
.ind-new .ind-total strong{color:var(--accent-soft);}
.ind-total span{font-size:13px; line-height:1.5; color:var(--text-mute);}
.ind-arrow{display:flex; align-items:center; justify-content:center; color:var(--text-mute); flex:none;}
.ind-arrow svg{width:26px; height:26px;}
[dir="rtl"] .ind-arrow svg{transform:scaleX(-1);}
/* ---- scenarios ---- */
.ind-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,34px) clamp(24px,3vw,44px);
margin-bottom:clamp(34px,4vw,52px);}
.ind-card{min-width:0;}
.ind-ic{display:flex; align-items:center; justify-content:center; width:34px; height:34px; margin-bottom:16px; color:var(--accent-soft);}
.ind-ic svg{width:34px; height:34px;}
.ind-ic .duo-b{fill:currentColor; opacity:.26;}
.ind-ic .duo-f{fill:currentColor;}
.ind-ic .duo-w{fill:var(--bg);}
.ind-card h3{font-size:16.5px; font-weight:700; letter-spacing:-.012em; line-height:1.32; margin-bottom:9px;}
.ind-card p{font-size:14.5px; line-height:1.6; color:var(--text-dim); max-width:44ch;}
/* ---- note sur les equipes RUN ---- */
.ind-run{display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;
padding:clamp(22px,2.4vw,30px); border-radius:var(--radius-lg); border:1px solid var(--border-strong);
background:linear-gradient(135deg, rgba(155,47,224,.10), rgba(155,47,224,.03)); margin-bottom:clamp(30px,3.4vw,44px);}
.ind-run-ic{flex:none; color:var(--accent-soft);}
.ind-run-ic svg{width:26px; height:26px; display:block;}
.ind-run-ic .duo-b{fill:currentColor; opacity:.24;}
.ind-run-ic .duo-f{fill:currentColor;}
.ind-run h3{font-size:clamp(16px,1.6vw,19px); font-weight:700; letter-spacing:-.015em; margin-bottom:8px;}
.ind-run p{font-size:14.5px; line-height:1.65; color:var(--text-dim); max-width:88ch;}
.ind-run strong{color:var(--text); font-weight:650;}
/* ---- chiffres ---- */
.ind-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,28px);
padding-top:clamp(24px,2.8vw,34px); border-top:1px solid var(--border);}
.ind-kpi{display:flex; flex-direction:column; gap:5px; min-width:0;}
.ind-kpi strong{font-size:clamp(22px,2.6vw,32px); font-weight:800; letter-spacing:-.03em; line-height:1;
background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.ind-kpi span{font-size:12.8px; line-height:1.45; color:var(--text-mute);}
/* ---- theme clair ---- */
html[data-theme="light"] .ind-ic .duo-w{fill:#ffffff;}
/* ---- adaptations ---- */
@media (max-width:1000px){
.ind-grid{grid-template-columns:repeat(2,1fr);}
.ind-kpis{grid-template-columns:repeat(2,1fr); gap:22px;}
}
@media (max-width:820px){
.ind-compare{grid-template-columns:1fr;}
.ind-arrow{transform:rotate(90deg); padding:2px 0;}
[dir="rtl"] .ind-arrow svg{transform:none;}
}
@media (max-width:640px){
.ind-grid{grid-template-columns:1fr; gap:22px;}
.ind-steps li{grid-template-columns:1fr; gap:2px; padding:9px 0;}
.ind-run{grid-template-columns:1fr; gap:12px;}
.ind-kpis{grid-template-columns:1fr; gap:16px;}
.ind-kpi{flex-direction:row; align-items:baseline; gap:10px;}
.ind-kpi strong{font-size:20px; flex:none; min-width:88px;}
}
/* ==========================================================================
CAS D'USAGE DÉTAILLÉS (page dédiée)
========================================================================== */
.usecases-full .uc-photo{height:clamp(280px,32vw,400px); margin-bottom:0;}
.usecases-full .uc-panel.active{padding-bottom:8px;}
.ucd{padding-top:clamp(26px,3vw,38px);}
.ucd-head{display:block; font-family:var(--font-mono); font-size:10.5px; font-weight:700;
letter-spacing:.16em; text-transform:uppercase; color:var(--text-mute); margin-bottom:20px;}
.ucd-grid{display:grid; grid-template-columns:repeat(2,1fr);
gap:clamp(20px,2.4vw,30px) clamp(26px,3.4vw,52px); margin-bottom:clamp(28px,3.2vw,42px);}
.ucd-card{display:grid; grid-template-columns:34px 1fr; grid-template-rows:auto auto;
column-gap:14px; align-items:start; min-width:0;}
.ucd-n{grid-row:1 / span 2; font-family:var(--font-mono); font-size:11.5px; font-weight:700;
color:var(--accent-soft); padding-top:3px; letter-spacing:-.01em;}
.ucd-card h3{font-size:16px; font-weight:700; letter-spacing:-.012em; line-height:1.32; margin-bottom:7px;}
.ucd-card p{font-size:14.5px; line-height:1.6; color:var(--text-dim);}
.ucd-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,30px);
padding-top:clamp(20px,2.4vw,28px); border-top:1px solid var(--border);}
.ucd-kpi{display:flex; flex-direction:column; gap:5px; min-width:0;}
.ucd-kpi strong{font-size:clamp(20px,2.3vw,28px); font-weight:800; letter-spacing:-.03em; line-height:1;
background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.ucd-kpi span{font-size:12.8px; line-height:1.45; color:var(--text-mute);}
/* comparatif repris du bloc Industrie, à l'échelle d'un panneau */
.ucd-compare{margin-bottom:clamp(30px,3.4vw,44px);}
.ucd-compare .ind-way{padding:clamp(18px,2vw,26px);}
.ucd-compare .ind-way h3{font-size:clamp(15.5px,1.5vw,18.5px); margin-bottom:16px;}
.ucd-compare .ind-way-tag{margin-bottom:12px;}
.ucd-compare .ind-steps{margin-bottom:18px;}
.ucd-compare .ind-steps li{grid-template-columns:minmax(86px,124px) 1fr; padding:9px 0; gap:12px;}
.ucd-compare .ind-steps em{font-size:12px;}
.ucd-compare .ind-steps span{font-size:13.8px;}
.ucd-compare .ind-total{padding-top:14px;}
.ucd-compare .ind-total strong{font-size:clamp(18px,2vw,23px);}
.ucd-compare .ind-arrow svg{width:22px; height:22px;}
@media (max-width:640px){
.ucd-compare .ind-steps li{grid-template-columns:1fr; gap:2px;}
}
/* Industrie : six scénarios et quatre chiffres au lieu de quatre et trois */
.ucd-grid-6{grid-template-columns:repeat(3,1fr);}
.ucd-kpis-4{grid-template-columns:repeat(4,1fr);}
.ucd .ind-run{margin:0 0 clamp(24px,2.8vw,34px);}
@media (max-width:1000px){ .ucd-grid-6{grid-template-columns:repeat(2,1fr);} }
@media (max-width:860px){ .ucd-grid-6{grid-template-columns:1fr;} .ucd-kpis-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .ucd-kpis-4{grid-template-columns:1fr;} }
/* lien depuis la page d'accueil */
.uc-more{display:flex; width:fit-content; margin:clamp(26px,3vw,38px) auto 0; align-items:center; gap:8px; padding:11px 20px;
border-radius:999px; border:1px solid var(--border-strong); background:var(--surface);
color:var(--text); font-size:14px; font-weight:600; text-decoration:none;
transition:border-color .18s ease, background .18s ease;}
.uc-more:hover{border-color:rgba(155,47,224,.55); background:var(--surface-2);}
@media (max-width:860px){
.ucd-grid{grid-template-columns:1fr; gap:20px;}
.ucd-kpis{grid-template-columns:1fr; gap:15px;}
.ucd-kpi{flex-direction:row; align-items:baseline; gap:11px;}
.ucd-kpi strong{font-size:19px; flex:none; min-width:92px;}
}
@media (max-width:640px){
.usecases-full .uc-photo{height:250px;}
.ucd-card{grid-template-columns:28px 1fr; column-gap:10px;}
}
/* ==========================================================================
BANDE D'ACCÈS AUX CAS D'USAGE (page d'accueil)
========================================================================== */
.ucb-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.ucb-chip{display:flex; align-items:center; gap:12px; min-width:0;
padding:15px 18px; border-radius:var(--radius-md); text-decoration:none;
border:1px solid var(--border); background:var(--surface); color:var(--text);
font-size:14.5px; font-weight:600; letter-spacing:-.008em; line-height:1.25;
transition:border-color .18s ease, background .18s ease, transform .18s ease;}
.ucb-chip:hover{border-color:rgba(155,47,224,.5); background:var(--surface-2); transform:translateY(-2px);}
.ucb-chip > span:nth-child(2){flex:1; min-width:0;}
.ucb-ic{flex:none; width:26px; height:26px; display:flex; align-items:center; justify-content:center; color:var(--accent-soft);}
.ucb-ic svg{width:26px; height:26px;}
.ucb-ic .duo-b{fill:currentColor; opacity:.26;}
.ucb-ic .duo-f{fill:currentColor;}
.ucb-ic .duo-w{fill:var(--bg);}
.ucb-go{flex:none; width:17px; height:17px; color:var(--text-mute); opacity:0; transform:translateX(-4px);
transition:opacity .18s ease, transform .18s ease;}
.ucb-chip:hover .ucb-go{opacity:1; transform:translateX(0);}
.uc-more .ucb-go{opacity:1; transform:none; color:inherit;}
[dir="rtl"] .ucb-go{transform:scaleX(-1) translateX(-4px);}
[dir="rtl"] .ucb-chip:hover .ucb-go, [dir="rtl"] .uc-more .ucb-go{transform:scaleX(-1);}
html[data-theme="light"] .ucb-ic .duo-w{fill:#ffffff;}
@media (max-width:1080px){ .ucb-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:760px){ .ucb-grid{grid-template-columns:repeat(2,1fr); gap:10px;} }
@media (max-width:480px){
.ucb-grid{grid-template-columns:1fr;}
.ucb-chip{padding:13px 15px; font-size:14px;}
}
/* pied : un bouton ordinaire, à la taille de son texte */
.st-foot{display:flex; flex-direction:column; align-items:center; gap:12px;
margin-top:clamp(26px,3.2vw,40px);}
.btn-sub{display:inline-flex; align-items:center; justify-content:center; gap:9px;
height:46px; padding:0 26px; border-radius:11px; border:0;
background:var(--grad); color:#ffffff; text-decoration:none;
font-size:14.8px; font-weight:700; letter-spacing:-.01em; white-space:nowrap;
box-shadow:0 12px 28px -14px rgba(139,63,240,.8);
transition:transform .16s ease, filter .16s ease;}
.btn-sub:hover{transform:translateY(-1px); filter:brightness(1.06);}
.btn-sub:active{transform:none;}
.btn-sub svg{width:17px; height:17px; flex:none;}
[dir="rtl"] .btn-sub svg{transform:scaleX(-1);}
.st-foot-note{font-size:12.8px; color:var(--text-mute); text-align:center; max-width:52ch;}
@media (max-width:420px){
.btn-sub{width:100%; padding:0 18px;}
}
/* ==========================================================================
TECHNOLOGIE STORE — ruban de logos
Aucun détail affiché : les logos défilent, les bords s'estompent.
========================================================================== */
.mq{position:relative; display:flex; flex-direction:column; gap:clamp(12px,1.6vw,20px);
padding:clamp(10px,1.6vw,18px) 0; overflow:hidden;
mask-image:linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);}
.mq-row{overflow:hidden;}
.mq-track{display:flex; align-items:center; gap:clamp(12px,1.6vw,20px); width:max-content;
will-change:transform;}
.mq-r1 .mq-track{animation:mq-l 46s linear infinite;}
.mq-r2 .mq-track{animation:mq-r 52s linear infinite;}
@keyframes mq-l{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@keyframes mq-r{from{transform:translateX(-50%);} to{transform:translateX(0);}}
.mq:hover .mq-track{animation-play-state:paused;}
.mq-i{flex:none; display:flex; align-items:center; justify-content:center;
width:clamp(74px,7.4vw,96px); height:clamp(60px,5.8vw,74px);
border:1px solid var(--border); border-radius:14px; background:var(--surface);
opacity:.62; filter:grayscale(1);
transition:opacity .25s ease, filter .25s ease, border-color .25s ease;}
.mq-i:hover{opacity:1; filter:none; border-color:rgba(155,47,224,.4);}
.mq-i svg, .mq-i img{width:clamp(28px,2.8vw,34px); height:clamp(28px,2.8vw,34px);
object-fit:contain; display:block;}
@media (prefers-reduced-motion:reduce){
.mq-track{animation:none !important;}
.mq-row{overflow-x:auto;}
.mq-i{opacity:1; filter:none;}
}
@media (max-width:640px){
.mq-i{width:64px; height:54px; border-radius:12px;}
.mq-i svg, .mq-i img{width:26px; height:26px;}
}
/* ==========================================================================
CONSOLE — fonctionnalités en pastilles
========================================================================== */
.plat-tags-wrap{padding:clamp(20px,2.4vw,30px) clamp(18px,2.4vw,32px) clamp(24px,2.8vw,32px);
border-top:1px solid rgba(255,255,255,.10);}
.plat-tags-lab{display:block; margin-bottom:16px; font-family:var(--font-mono);
font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
color:rgba(255,255,255,.46);}
.cons-grid{list-style:none; margin:0; padding:0; display:grid;
grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(10px,1.3vw,14px);}
.cons-card{display:flex; align-items:flex-start; gap:13px; min-width:0;
padding:clamp(14px,1.5vw,18px); border-radius:14px;
border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04);
transition:border-color .18s ease, background .18s ease, transform .18s ease;}
.cons-card:hover{border-color:rgba(194,160,255,.5); background:rgba(255,255,255,.08);
transform:translateY(-2px);}
.cons-ic{flex:none; width:30px; height:30px; display:flex; align-items:center; justify-content:center;
color:#c2a0ff; margin-top:1px;}
.cons-ic svg{width:30px; height:30px; display:block;}
.cons-ic .duo-b{fill:currentColor; opacity:.26;}
.cons-ic .duo-f{fill:currentColor;}
.cons-ic .duo-w{fill:#12091f;}
.cons-tx{display:flex; flex-direction:column; gap:4px; min-width:0;}
.cons-tx strong{font-size:14.4px; font-weight:650; letter-spacing:-.012em; line-height:1.3;
color:rgba(255,255,255,.96);}
.cons-tx span{font-size:12.8px; line-height:1.5; color:rgba(255,255,255,.6);}
[dir="rtl"] .cons-card{text-align:right;}
@media (max-width:980px){ .cons-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:600px){
.cons-grid{grid-template-columns:1fr;}
.cons-card{padding:13px 14px; gap:11px;}
.cons-ic, .cons-ic svg{width:26px; height:26px;}
.cons-tx strong{font-size:13.6px;}
}
/* ==========================================================================
FILET DE SÉCURITÉ RESPONSIVE
Rien ne doit déborder horizontalement, quelle que soit la largeur.
========================================================================== */
/* clip et non hidden : hidden casserait le bandeau collant */
html, body{max-width:100%; overflow-x:clip;}
img, svg, video, iframe, canvas{max-width:100%;}
img, video{height:auto;}
pre, code, table{max-width:100%; overflow-x:auto;}
.wrap{width:100%; padding-inline:clamp(16px,4vw,32px);}
/* grilles : repli général sous 720px, au cas où une règle aurait été oubliée */
@media (max-width:720px){
.arg-row{grid-template-columns:1fr !important; gap:12px;}
.st-cat{grid-template-columns:1fr !important;}
.uc-layout{grid-template-columns:1fr !important;}
.lg-layout{grid-template-columns:1fr !important;}
}
/* cibles tactiles : 40px minimum sur mobile */
@media (max-width:820px){
.btn, .cta, .stf, .uc-tab, .langdrop-menu button, .regdrop-item,
.dock-row, .social-rail-btn, .st-open, .stp-close{min-height:40px;}
}
/* cartes et visuels : jamais plus large que l'écran */
@media (max-width:900px){
.staticmap, .staticmap.dz-photo, .staticmap.africa.af-outline{max-width:100% !important;}
.contact-map iframe{min-height:220px;}
.console-browser, .console-phone{max-width:100%;}
}
/* typographie : on évite les titres qui débordent sur très petit écran */
@media (max-width:380px){
h1{font-size:clamp(24px,8vw,30px) !important;}
.sec-head h2{font-size:clamp(20px,6.6vw,26px) !important;}
.arg-fig strong{font-size:19px;}
.neo-banner-sub{font-size:15px !important;}
}
/* ===== bloc « Qu'est-ce qu'un NeoCloud ? » ==========================
Pose la categorie avant les six arguments de la section. Grille de
quatre encarts, deux par ligne sur ecran large, adaptee aux deux
themes via les variables de surface.
================================================================== */
.neoc{margin:0 0 clamp(30px,3.6vw,46px);}
.neoc-title{margin:0 0 6px; font-size:clamp(17px,1.5vw,20px); font-weight:750;
letter-spacing:-.015em; color:var(--text);}
.neoc-lead{margin:0 0 clamp(14px,1.5vw,20px); max-width:64ch;
font-size:clamp(13.5px,1.05vw,15px); line-height:1.55; color:var(--text-mute);}
.neoc-grid{list-style:none; margin:0; padding:0; display:grid;
grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(10px,1.2vw,14px);}
.neoc-card{display:flex; align-items:flex-start; gap:13px; min-width:0;
padding:clamp(14px,1.5vw,18px); border-radius:14px;
border:1px solid var(--border); background:var(--surface-2);
transition:border-color .18s ease, transform .18s ease;}
.neoc-card:hover{border-color:var(--border-strong); transform:translateY(-2px);}
.neoc-ic{flex:none; width:30px; height:30px; display:flex; align-items:center;
justify-content:center; color:#8b3ff0; margin-top:1px;}
.neoc-ic svg{width:30px; height:30px; display:block;}
.neoc-ic .duo-b{fill:currentColor; opacity:.24;}
.neoc-ic .duo-f{fill:currentColor;}
.neoc-tx{display:flex; flex-direction:column; gap:4px; min-width:0;}
.neoc-tx strong{font-size:14.6px; font-weight:680; letter-spacing:-.012em;
line-height:1.3; color:var(--text);}
.neoc-tx span{font-size:13px; line-height:1.55; color:var(--text-mute);}
html:not([data-theme="light"]) .neoc-ic{color:#c2a0ff;}
[dir="rtl"] .neoc-card{text-align:right;}
@media (max-width:760px){
.neoc-grid{grid-template-columns:1fr;}
.neoc-card{padding:13px 14px; gap:11px;}
.neoc-ic, .neoc-ic svg{width:26px; height:26px;}
.neoc-tx strong{font-size:13.8px;}
}
/* encart ludique de la definition NeoCloud, page Ressources */
.neoc-fun{margin:clamp(12px,1.4vw,16px) 0 0; padding:clamp(15px,1.6vw,19px) clamp(16px,1.8vw,22px);
border-radius:14px; border:1px dashed var(--border-strong);
background:linear-gradient(135deg, rgba(139,63,240,.06), rgba(4,172,255,.05));}
.neoc-fun strong{display:block; margin-bottom:5px; font-size:12.4px; font-weight:750;
letter-spacing:.07em; text-transform:uppercase; color:#8b3ff0;}
.neoc-fun p{margin:0; font-size:14px; line-height:1.62; color:var(--text);}
html:not([data-theme="light"]) .neoc-fun strong{color:#c2a0ff;}
/* pastille « ? » de l'accroche : renvoi vers la definition */
/* ===== « Aller plus loin » : liste de renvois numerotes ==============
Une ligne par destination, numero en chasse fixe a gauche, chevron a
droite. Deux colonnes sur large, une seule en dessous de 760 px.
================================================================== */
.res-links{list-style:none; margin:0; padding:0; display:grid;
grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(10px,1.2vw,14px);}
.res-links li{min-width:0;}
.res-links a{display:flex; align-items:center; gap:14px; min-width:0;
padding:clamp(15px,1.6vw,19px) clamp(16px,1.8vw,20px);
border-radius:14px; border:1px solid var(--border); background:var(--surface-2);
color:var(--text); text-decoration:none; font-size:15px; font-weight:650;
letter-spacing:-.01em; line-height:1.35;
transition:border-color .18s ease, transform .18s ease, background .18s ease;}
.res-links a:hover{border-color:var(--border-strong); transform:translateY(-2px);}
.res-links a:focus-visible{outline:2px solid #8b3ff0; outline-offset:2px;}
.rl-n{flex:none; font-family:var(--font-mono); font-size:12px; font-weight:600;
letter-spacing:.06em; color:#8b3ff0; opacity:.85;}
.res-links a > span[data-i18n]{flex:1 1 auto; min-width:0;}
/* chevron, tourne dans le sens de lecture */
.res-links a::after{content:""; flex:none; width:8px; height:8px;
border-inline-end:2px solid currentColor; border-block-start:2px solid currentColor;
transform:rotate(45deg); opacity:.38;
transition:opacity .18s ease, translate .18s ease;}
[dir="rtl"] .res-links a::after{transform:rotate(-135deg);}
.res-links a:hover::after{opacity:.85; translate:3px 0;}
[dir="rtl"] .res-links a:hover::after{translate:-3px 0;}
html:not([data-theme="light"]) .rl-n{color:#c2a0ff;}
@media (max-width:760px){
.res-links{grid-template-columns:1fr;}
.res-links a{padding:14px 15px; gap:12px; font-size:14.2px;}
}
/* ===================================================================
Pictogrammes de contenu : trait et pastille à la couleur de la charte
-------------------------------------------------------------------
Les quatre teintes tournent d'une carte à l'autre. Les pastilles qui
portaient déjà un fond gardent leur forme et changent seulement de
teinte ; celles qui n'en avaient pas n'en reçoivent pas.
=================================================================== */
.cons-ic.c-purple,.of-ic.c-purple,.neoc-ic.c-purple,.ai-ic.c-purple,
.uc-tag-ic.c-purple,.np-ic.c-purple,.ind-run-ic.c-purple{color:var(--c1-ink);}
.cons-ic.c-blue,.of-ic.c-blue,.neoc-ic.c-blue,.ai-ic.c-blue,
.uc-tag-ic.c-blue,.np-ic.c-blue,.ind-run-ic.c-blue{color:var(--c2-ink);}
.cons-ic.c-green,.of-ic.c-green,.neoc-ic.c-green,.ai-ic.c-green,
.uc-tag-ic.c-green,.np-ic.c-green,.ind-run-ic.c-green{color:var(--c3-ink);}
.cons-ic.c-lime,.of-ic.c-lime,.neoc-ic.c-lime,.ai-ic.c-lime,
.uc-tag-ic.c-lime,.np-ic.c-lime,.ind-run-ic.c-lime{color:var(--c4-ink);}
.of-ic.c-purple,.np-ic.c-purple{background:rgba(var(--c1-rgb),.17);}
.of-ic.c-blue,.np-ic.c-blue{background:rgba(var(--c2-rgb),.17);}
.of-ic.c-green,.np-ic.c-green{background:rgba(var(--c3-rgb),.17);}
.of-ic.c-lime,.np-ic.c-lime{background:rgba(var(--c4-rgb),.17);}
/* ---------- carte de partenaire principal ----------
Un rang affiché, un liseré de marque : la carte se distingue des
autres sans changer de gabarit. */
.pcard-cle{position:relative;}
.pcard-cle::after{content:""; position:absolute; inset-block-start:0; inset-inline:0;
height:3px; z-index:3; border-radius:3px;
background:linear-gradient(90deg,#47039c 0%,#04acff 52%,#05ca5c 100%);}
.pcard-rang{display:inline-flex; align-items:center; align-self:flex-start;
height:26px; padding:0 12px; margin-bottom:10px; border-radius:999px;
font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
color:#ffffff; background:linear-gradient(90deg,#47039c,#0f6bc4);}
.pcard-cle .pp-logo{background:#ffffff; border-radius:10px; padding:8px 12px;}
.pcard-cle .pp-logo img{height:30px; width:auto; display:block;}
/* =====================================================================
Derniers pictogrammes restés neutres
---------------------------------------------------------------------
Les coches posées sur les photos des cas d'usage étaient d'un violet
éteint, invisible sur une image claire. Elles passent au vert de la
charte, avec une lueur sombre qui les détache de n'importe quel fond.
Les flèches de comparaison prennent le bleu, puisqu'elles indiquent
un passage d'un état à un autre.
Restent volontairement hors couleur : les drapeaux nationaux, les
logos de réseaux sociaux, les chevrons de navigation et le bouclier
décoratif en filigrane.
===================================================================== */
.uc-photo-bul svg{color:#2fd97a;
filter:drop-shadow(0 1px 3px rgba(4,20,10,.85));}
.uc-photo-tag svg, .uc-photo-sub svg, .uc-photo-title svg{color:#7ee0ff;
filter:drop-shadow(0 1px 3px rgba(4,12,26,.8));}
.ind-arrow{color:var(--c2-ink);}
.ind-run-ic{color:var(--c1-ink);}
.rm-africa{color:var(--c1-ink);}
.map-brand-tx{color:var(--c2-ink);}
/* =====================================================================
Démonstration vidéo de l'application mobile
---------------------------------------------------------------------
Les deux captures statiques laissent place à un seul téléphone, plus
grand, qui montre l'application en fonctionnement. La lecture démarre
quand la vidéo entre dans l'écran et s'arrête quand elle en sort :
rien ne tourne en arrière-plan, et la vidéo n'est même pas téléchargée
tant que le visiteur n'est pas descendu jusqu'à elle.
Sans son, en boucle, et en lecture intégrée : les trois conditions
que les navigateurs exigent pour autoriser un démarrage automatique.
===================================================================== */
.console-phone.demo{width:248px; position:relative;}
.console-video{display:block; width:100%; height:auto; border-radius:22px;
background:#0b0b10; box-shadow:0 26px 60px -28px rgba(0,0,0,.75);}
html[data-theme="light"] .console-video{box-shadow:0 26px 60px -30px rgba(10,12,24,.45);}
/* commande de lecture, discrète tant qu'on ne survole pas */
.console-video-btn{
position:absolute; inset-block-end:42px; inset-inline-end:12px;
width:38px; height:38px; border:0; border-radius:50%; cursor:pointer;
display:flex; align-items:center; justify-content:center;
background:rgba(12,6,28,.62); color:#ffffff;
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
opacity:0; transition:opacity .2s ease, background .2s ease;
}
.console-phone.demo:hover .console-video-btn,
.console-video-btn:focus-visible{opacity:1;}
.console-video-btn:hover{background:rgba(94,35,222,.82);}
.console-video-btn svg{width:19px; height:19px; fill:currentColor;}
.console-video-btn .ic-pause{display:none;}
.console-video-btn[aria-pressed="true"] .ic-play{display:none;}
.console-video-btn[aria-pressed="true"] .ic-pause{display:block;}
@media (max-width:900px){
.console-phone.demo{width:210px;}
.console-video-btn{opacity:1;} /* pas de survol sur mobile */
}
@media (max-width:640px){ .console-phone.demo{width:186px;} }
/* Le visiteur qui a demandé moins d'animation garde l'affiche fixe et
la commande visible : à lui de lancer la lecture s'il le souhaite. */
@media (prefers-reduced-motion:reduce){ .console-video-btn{opacity:1;} }
/* =====================================================================
Console et téléphone : hauteurs rigoureusement égales
---------------------------------------------------------------------
Les deux formats sont opposés — la capture de console fait 1600x784
(2,041:1), la vidéo du téléphone 540x1174 (0,460:1). Les aligner « à
peu près » en réglant deux largeurs au jugé laisse toujours quelques
pixels d'écart en pied de scène.
Une seule variable, --scene-h, fixe la hauteur des deux. Chaque
largeur en découle par le calcul, en retranchant pour la console la
barre de fenêtre qui la surmonte. Le résultat est exact par
construction : changer --scene-h déplace les deux ensemble, sans
jamais les désaligner.
436 px : la plus grande valeur qui tienne dans les 1036 px utiles de
la scène, gouttière comprise.
===================================================================== */
.console-stage{--scene-h:436px; --cb-bar-h:38px; align-items:flex-end;}
.console-browser{
flex:0 0 auto; max-width:none;
width:calc((var(--scene-h) - var(--cb-bar-h)) * 1600 / 784);
}
.cb-bar{height:var(--cb-bar-h); box-sizing:border-box; padding-block:0;}
.console-browser img{
display:block; width:100%;
height:calc(var(--scene-h) - var(--cb-bar-h));
object-fit:cover; object-position:top center;
}
.console-phone.demo{
flex:0 0 auto; position:relative;
width:calc(var(--scene-h) * 540 / 1174);
}
.console-video{
display:block; width:100%; height:var(--scene-h);
object-fit:cover; border-radius:22px 22px 0 0;
}
/* La légende passe en médaillon posé sur la vidéo : sous elle, elle
allongeait la figure et rompait l'alignement en pied de scène. */
.console-phone.demo figcaption{
position:absolute; inset-block-start:10px; inset-inline:10px;
display:block; text-align:center; font-size:11px; font-weight:700;
letter-spacing:.06em; text-transform:uppercase; color:#ffffff;
background:rgba(10,4,26,.58); border-radius:999px; padding:5px 10px;
backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
pointer-events:none;
}
.console-video-btn{inset-block-end:14px;}
@media (max-width:1100px){ .console-stage{--scene-h:372px;} }
@media (max-width:900px){
/* la scène passe en colonne : chacun retrouve une largeur naturelle */
.console-stage{--scene-h:auto;}
.console-browser{width:min(100%,560px);}
.console-browser img{height:auto;}
.console-phone.demo{width:206px;}
.console-video{height:auto;}
}
@media (max-width:640px){ .console-phone.demo{width:184px;} }
/* =====================================================================
Deux blocs : le portail web, puis l'application mobile
---------------------------------------------------------------------
Les deux visuels partageaient une scène unique, ce qui subordonnait
le téléphone au portail : on lisait « la console, et accessoirement
une application ». Ce sont deux produits, ils ont chacun leur bloc,
leur titre et leur liste de fonctions.
Le portail occupe toute la largeur de son bloc : sa capture est
panoramique, elle ne demandait qu'à respirer. L'application se
présente en vis-à-vis, vidéo à gauche, fonctions à droite.
===================================================================== */
.console-block + .console-block{margin-top:22px;}
/* ---------- bloc 1 : le portail ---------- */
.console-stage.solo{justify-content:center; padding-inline:36px;}
.console-stage.solo .console-browser{
width:100%; max-width:980px;
}
.console-stage.solo .console-browser img{
height:auto; object-fit:contain;
}
/* ---------- bloc 2 : l'application mobile ---------- */
.mob-stage{
display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr);
gap:clamp(24px,3.5vw,54px); align-items:center;
padding:34px 36px 40px;
}
.mob-stage .console-phone.demo{width:246px; margin:0;}
.mob-stage .console-video{height:auto; border-radius:22px;}
.mob-list{list-style:none; margin:0; padding:0; display:grid; gap:18px;}
.mob-list li{display:flex; align-items:flex-start; gap:14px;}
.mob-list .cons-ic{flex:none; width:40px; height:40px; border-radius:12px;
display:flex; align-items:center; justify-content:center;}
.mob-list .cons-ic svg{width:21px; height:21px;}
.mob-list .cons-tx{display:flex; flex-direction:column; gap:3px; min-width:0;}
.mob-list strong{color:#ffffff; font-size:15.5px; font-weight:700; line-height:1.3;}
.mob-list .cons-tx span{color:rgba(255,255,255,.72); font-size:14px; line-height:1.55;}
.mob-list li:nth-child(1) .cons-ic{background:rgba(var(--c1-rgb),.16); color:var(--c1-ink);}
.mob-list li:nth-child(2) .cons-ic{background:rgba(var(--c2-rgb),.16); color:var(--c2-ink);}
.mob-list li:nth-child(3) .cons-ic{background:rgba(var(--c3-rgb),.16); color:var(--c3-ink);}
.mob-list li:nth-child(4) .cons-ic{background:rgba(var(--c4-rgb),.16); color:var(--c4-ink);}
@media (max-width:820px){
.mob-stage{grid-template-columns:1fr; justify-items:center; text-align:start;
padding:28px 22px 32px; gap:26px;}
.mob-stage .console-phone.demo{width:212px;}
.mob-list{max-width:520px;}
}
@media (max-width:560px){
.mob-stage .console-phone.demo{width:186px;}
.mob-list li{gap:11px;}
.mob-list .cons-ic{width:34px; height:34px; border-radius:10px;}
}
/* =====================================================================
Respiration des sections et position des ancres
---------------------------------------------------------------------
Deux defauts avaient la meme cause : des respirations qui s'ajoutent.
1. Le vide. Une section porte deja sa respiration (--sec-gap, jusqu'a
152 px) ; son premier sous-bloc en ajoutait une seconde (jusqu'a
88 px). Sur la page Offre, 240 px de blanc separaient le chapeau
du premier intitule. Le sous-bloc de tete n'en a pas besoin : la
section l'a deja pose.
2. Les ancres. Un lien vers #offer amenait le haut de la section en
haut de la fenetre : le titre se retrouvait 92 px (scroll-padding)
plus 240 px (respirations) plus bas, soit hors de vue.
La compensation retranche desormais la respiration propre de
l'element vise, de sorte que ce soit le TITRE, et non le bord de
la section, qui vienne se placer sous l'en-tete.
===================================================================== */
/* ---------- 1. plus de respiration en double ---------- */
.about > .about-sub:first-child,
.about-subwrap > .about-sub:first-child{padding-top:0;}
/* un chapeau de page est deja une respiration : la section qui suit se resserre */
.pagehead + section{padding-top:clamp(26px,3vw,44px);}
/* ---------- 2. ancres : viser le titre, pas le bord ---------- */
:root{
--entete-h:74px; /* barre collee : 45 px de contenu + 2x14 de marge + 1 de filet */
--ancre:calc(var(--entete-h) + 22px);
--sec-gap-eff:var(--sec-gap); /* suit les paliers ci-dessous */
--sub-gap-eff:clamp(56px,6vw,88px);
--tete-gap:clamp(26px,3vw,44px);
}
html{scroll-padding-top:0;} /* tout est gere par element, sinon les deux s'ajoutent */
[id]{scroll-margin-top:var(--ancre);}
.section-pad[id], .usecases[id], .partners[id], .about[id], .store[id],
.pioneer[id], .roadmap[id], .infra[id], .expansion[id], .news[id]{
scroll-margin-top:calc(var(--ancre) - var(--sec-gap-eff));
}
.about-sub[id]{scroll-margin-top:calc(var(--ancre) - var(--sub-gap-eff));}
/* Une section qui suit un chapeau de page a vu sa respiration ramenee a
--tete-gap : la compensation doit suivre, sinon elle retranche une
respiration de 152 px qui n'existe plus et le titre passe SOUS
l'en-tete — la page parait tronquee. */
.pagehead + section[id]{scroll-margin-top:calc(var(--ancre) - var(--tete-gap));}
/* le premier sous-bloc n'a plus de respiration propre : rien a retrancher */
.about > .about-sub:first-child[id]{scroll-margin-top:var(--ancre);}
@media (max-width:900px){ :root{--sec-gap-eff:64px; --entete-h:68px;} }
@media (max-width:860px){ :root{--sub-gap-eff:56px;} }
@media (max-width:700px){ :root{--sec-gap-eff:52px;} }