:root{
--bg: #f3f4f6;
--bg-2:#eef0f3;
--surface:#ffffff;
--ink:#0a0a0a;
--ink-2:#111114;
--muted:#6b7280;
--muted-2:#9aa0a6;
--line: rgba(10,10,10,0.08);
--blue:#1561ff;
--blue-2:#3b5bf3;
--indigo:#4338ff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
background:var(--bg);
color:var(--ink);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
letter-spacing:-0.011em;
}
a{color:inherit;text-decoration:none}
/* ---------- Nav ---------- */
.nav-wrap{
position:sticky; top:0; z-index:50;
background:rgba(243,244,246,0.78);
backdrop-filter: saturate(140%) blur(14px);
-webkit-backdrop-filter: saturate(140%) blur(14px);
border-bottom:1px solid var(--line);
}
.nav{
max-width:1400px; margin:0 auto;
height:140px;
padding: 0 56px;
display:grid;
grid-template-columns: 1fr auto 1fr;
align-items:center;
}
.logo{
font-weight:700; font-size:22px; letter-spacing:-0.02em;
display:flex; align-items:center; gap: 28px;
}
.logo img{
display:block; height:120px; width:auto;
transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.logo a{ display:inline-flex; align-items:center; }
.logo a:hover img{ transform: scale(1.04) rotate(-2deg); }
.logo .ai{ color:var(--muted-2); font-weight:600; margin-left:6px; }
.nav-link-inline{
font-size:15.5px; font-weight:600; color:#1a1a1a;
padding: 10px 0;
border-bottom: 2px solid transparent;
transition: border-color .2s ease, color .2s ease;
}
.nav-link-inline:hover{ color:#000; border-bottom-color:#0a0a0a; }
.nav-links{
display:flex; gap:12px; justify-content:center; align-items:center;
font-size:15.5px; color:#3a3a3a; font-weight:500;
}
.nav-links a:hover{color:#000}
/* Boutons d'audience dans la nav : accès direct aux deux pages dédiées */
.nav-audience-btn{
display:inline-flex; align-items:center;
padding:9px 19px;
border-radius:999px;
font-size:14px; font-weight:700;
border:1.5px solid transparent;
transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.nav-audience-btn:hover{ transform: translateY(-1px); }
.nav-audience-btn--pro{ color:#1561ff; border-color: rgba(21,97,255,0.32); }
.nav-audience-btn--pro:hover{ background: rgba(21,97,255,0.08); }
.nav-audience-btn--pro.is-active{ background:#1561ff; color:#fff; border-color:#1561ff; }
.nav-audience-btn--etu{ color:#3A45C4; border-color: rgba(58,69,196,0.34); }
.nav-audience-btn--etu:hover{ background: rgba(58,69,196,0.08); }
.nav-audience-btn--etu.is-active{ background:#3A45C4; color:#fff; border-color:#3A45C4; }
.nav-cta-wrap{display:flex; justify-content:flex-end}
.nav-phone{
display:inline-flex; align-items:center; gap:10px;
background:#0a0a0a; color:#fff;
padding: 13px 22px 13px 18px; border-radius:999px;
font-weight:600; font-size:15.5px; letter-spacing:.2px;
transition: transform .15s ease, background .15s ease, box-shadow .2s ease;
font-variant-numeric: tabular-nums;
}
.nav-phone:hover{ background:#000; transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(10,10,10,0.45); }
.nav-phone svg{ width:18px; height:18px; flex:none; }
.nav-phone .label{ font-size:11px; font-weight:500; opacity:.6; letter-spacing:.14em; text-transform:uppercase; display:block; line-height:1; margin-bottom:2px; white-space: nowrap; }
.nav-phone .num{ display:block; line-height:1; white-space: nowrap; }
.nav-phone .stack{ display:flex; flex-direction:column; align-items:flex-start; }
.btn-pill-dark{
background:#0a0a0a; color:#fff;
padding: 13px 28px; border-radius:999px;
font-weight:500; font-size:15px;
transition: transform .15s ease, background .15s ease;
}
.btn-pill-dark:hover{ background:#000; transform: translateY(-1px) }
/* ---------- Section frame ---------- */
section{ padding: 120px 56px; }
.wrap{ max-width: 1240px; margin: 0 auto; }
.center{ text-align:center }
/* ---------- Hero ---------- */
.hero{
min-height: calc(100vh - 140px);
padding: 28px 56px 0;
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
grid-template-areas:
"title anim"
"audience anim"
"value anim"
"ctas anim"
"marquee marquee";
column-gap: clamp(20px, 3vw, 48px);
row-gap: clamp(10px, 1.4vh, 22px);
align-content: center;
justify-items: start;
max-width: 1600px;
margin-inline: auto;
text-align: left;
}
.hero > .hero-bg{ grid-area: 1 / 1 / -1 / -1; }
.hero-bg{
position: absolute;
inset: -60px 0 auto 0;
height: 880px;
z-index: -1;
pointer-events: none;
overflow: hidden;
mask-image: linear-gradient(to bottom, #000 0%, #000 65%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 65%, transparent 100%);
opacity: 0.7 !important;
animation: none !important;
}
.hero-bg svg{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero > *:not(.hero-bg){ position: relative; }
.hero-bg .orbite-ligne{ fill:none; stroke:#7C6FFF; stroke-opacity:.12; stroke-width:1; }
.hero-bg .orbite-1,.hero-bg .orbite-2,.hero-bg .orbite-3,
.hero-bg .orbite-4,.hero-bg .orbite-5,.hero-bg .orbite-6{ transform-origin:800px 450px; }
.hero-bg .orbite-1{ animation: orbitRot 19s linear infinite; }
.hero-bg .orbite-2{ animation: orbitRot 23s linear infinite reverse; }
.hero-bg .orbite-3{ animation: orbitRot 27s linear infinite; }
.hero-bg .orbite-4{ animation: orbitRot 30s linear infinite reverse; }
.hero-bg .orbite-5{ animation: orbitRot 25s linear infinite reverse; }
.hero-bg .orbite-6{ animation: orbitRot 32s linear infinite; }
@keyframes orbitRot { to { transform: rotate(360deg); } }
.hero-bg .logo-static-1{ animation: orbitCounter 19s linear infinite; }
.hero-bg .logo-static-2{ animation: orbitCounter 23s linear infinite reverse; }
.hero-bg .logo-static-3{ animation: orbitCounter 27s linear infinite; }
.hero-bg .logo-static-4{ animation: orbitCounter 30s linear infinite reverse; }
.hero-bg .logo-static-5{ animation: orbitCounter 25s linear infinite reverse; }
.hero-bg .logo-static-6{ animation: orbitCounter 32s linear infinite; }
@keyframes orbitCounter { to { transform: rotate(-360deg); } }
.hero-bg .float-1,.hero-bg .float-2,.hero-bg .float-3,
.hero-bg .float-4,.hero-bg .float-5,.hero-bg .float-6{
animation: floatY 3.5s ease-in-out infinite;
transform-box: fill-box; transform-origin: center;
}
.hero-bg .float-2{ animation-duration:4.2s; animation-delay:-1.2s; }
.hero-bg .float-3{ animation-duration:3.2s; animation-delay:-0.6s; }
.hero-bg .float-4{ animation-duration:4.5s; animation-delay:-2.3s; }
.hero-bg .float-5{ animation-duration:3.8s; animation-delay:-3.1s; }
.hero-bg .float-6{ animation-duration:4.0s; animation-delay:-1.8s; }
@keyframes floatY { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }
.hero-bg .particle{
transform-box: fill-box; transform-origin: center;
animation: twinkle 2.2s ease-in-out infinite;
}
.hero-bg .particle.p2{ animation-duration:2.6s; animation-delay:-0.8s; }
.hero-bg .particle.p3{ animation-duration:1.8s; animation-delay:-1.5s; }
.hero-bg .particle.p4{ animation-duration:3.0s; animation-delay:-2.2s; }
.hero-bg .particle.p5{ animation-duration:2.2s; animation-delay:-0.4s; }
.hero-bg .particle.p6{ animation-duration:2.8s; animation-delay:-2.8s; }
.hero-bg .particle.p7{ animation-duration:2.0s; animation-delay:-1.1s; }
.hero-bg .particle.p8{ animation-duration:2.5s; animation-delay:-3.4s; }
@keyframes twinkle { 0%,100%{ opacity:.25; transform: scale(0.8); } 50%{ opacity:1; transform: scale(1.3); } }
@media (prefers-reduced-motion: reduce){
.hero-bg svg *{ animation: none !important; }
}
.hero h1{
grid-area: title;
font-size: clamp(42px, 5.8vw, 84px);
line-height: 1.03;
letter-spacing:-0.035em;
font-weight:800;
margin: 0;
max-width: 820px;
color:#0b0b0d;
text-align: left;
}
.hero h1 .accent{
background: linear-gradient(90deg, #1561ff 0%, #4338ff 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
/* Slogan « L'intelligence mais pas que artificielle » — « mais pas que » = la touche humaine */
.hero h1 .twist{
font-style: italic;
background: linear-gradient(90deg, #1561ff 0%, #6e4cff 55%, #a855f7 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
white-space: nowrap;
padding: 0 .03em;
}
.hero h1 .hero-tagline{
display:block;
margin-top:.30em;
font-size: clamp(19px, 2vw, 32px);
font-weight:600;
letter-spacing:-0.02em;
line-height:1.15;
color:#4b5563;
}
.hl-violet{ color:#6e4cff; font-weight:700; }
/* Deux publics affichés dès l'arrivée sur le site */
.hero-audience{
grid-area: audience;
display:flex; gap:12px; flex-wrap:wrap;
margin: 2px 0 4px;
}
.audience-pill{
display:inline-flex; align-items:center; gap:9px;
padding:8px 16px 8px 8px;
border-radius:999px;
background:#fff;
border:1.5px solid rgba(10,10,10,0.09);
font-size:14.5px; font-weight:600; color:#1a1a1a;
box-shadow: 0 1px 0 rgba(0,0,0,0.02);
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.audience-pill:hover{ transform: translateY(-1px); box-shadow: 0 12px 22px -14px rgba(10,10,10,0.35); }
.audience-pill__ico{
display:inline-flex; align-items:center; justify-content:center;
width:26px; height:26px; border-radius:50%; flex:none;
}
.audience-pill__ico svg{ width:14px; height:14px; }
.audience-pill__tag{
font-size:10px; font-weight:700; letter-spacing:.09em;
padding:3px 8px; border-radius:999px; margin-left:2px;
}
.audience-pill--pro{ border-color: rgba(21,97,255,0.30); }
.audience-pill--pro:hover{ background: rgba(21,97,255,0.05); }
.audience-pill--pro .audience-pill__ico{ background: rgba(21,97,255,0.10); color:#1561ff; }
.audience-pill--pro .audience-pill__tag{ background: rgba(21,97,255,0.10); color:#1561ff; }
.audience-pill--etu{ border-color: rgba(58,69,196,0.32); }
.audience-pill--etu:hover{ background: rgba(58,69,196,0.05); }
.audience-pill--etu .audience-pill__ico{ background: rgba(58,69,196,0.10); color:#3A45C4; }
.audience-pill--etu .audience-pill__tag{ background: rgba(58,69,196,0.10); color:#3A45C4; }
/* Étiquette d'audience sur les pages dédiées (occupe la même zone de grille) */
.hero-page-tag{ grid-area: audience; margin: 2px 0 4px; }
.page-tag{
display:inline-flex; align-items:center;
font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
padding:8px 16px; border-radius:999px;
}
.page-tag--pro{ color:#1561ff; background: rgba(21,97,255,0.10); border:1.5px solid rgba(21,97,255,0.28); }
.page-tag--etu{ color:#3A45C4; background: rgba(58,69,196,0.10); border:1.5px solid rgba(58,69,196,0.30); }
.hero p.hero-valueprop{
grid-area: value;
margin: 0;
max-width: 680px;
font-size: clamp(18px, 1.45vw, 23px);
line-height: 1.55;
color:#4b5563;
font-weight:400;
text-align: left;
}
.hero-anim{
grid-area: anim;
margin: 0;
max-width: 1100px;
width: 100%;
display:flex;
justify-content:center;
align-items:center;
align-self: center;
justify-self: stretch;
}
.hero-anim svg{
width: 100%;
height: auto;
max-height: 85vh;
display:block;
margin: 0 auto;
border-radius: 14px;
}
@keyframes dashFlow { to { stroke-dashoffset: -200; } }
.hero-anim .flow{ animation: dashFlow 6s linear infinite; }
@keyframes ringPulse {
0% { transform: scale(0.92); opacity: .35; }
100% { transform: scale(1.12); opacity: 0; }
}
.hero-anim .ring{
transform-box: fill-box;
transform-origin: center;
animation: ringPulse 2.6s ease-out infinite;
}
.hero-anim .ring.r2{ animation-delay: 1.3s; }
@keyframes agentBob { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-3px) } }
.hero-anim .agent{
transform-box: fill-box;
transform-origin: center;
animation: agentBob 3.6s ease-in-out infinite;
}
.hero p.lead{ display: none; }
.hero-ctas{
grid-area: ctas;
margin: 0;
display:flex; gap:28px; align-items:center; justify-content:flex-start; flex-wrap:wrap;
}
.btn-blue{
background: var(--blue); color:#fff;
padding: 18px 34px; border-radius:999px;
font-weight:500; font-size:17px;
display:inline-flex; align-items:center; gap:14px;
box-shadow: 0 8px 26px -10px rgba(21,97,255,0.55);
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-blue:hover{ background:#0d52e0; transform: translateY(-1px); box-shadow: 0 14px 32px -10px rgba(21,97,255,0.6); }
.link-arrow{
color: var(--blue);
font-weight:500; font-size:17px;
display:inline-flex; align-items:center; gap:10px;
}
.link-arrow .a{ transition: transform .2s ease }
.link-arrow:hover .a{ transform: translateX(4px) }
/* ---------- Logos marquee under hero CTA ---------- */
.tools-marquee{
grid-area: marquee;
margin: clamp(16px, 2.5vh, 36px) auto 0;
width: 100%;
max-width: 1280px;
padding: 0 0 0;
justify-self: stretch;
align-self: end;
}
.tools-marquee__label{
text-align:center;
font-size: 12px;
letter-spacing: 2.5px;
text-transform: uppercase;
font-weight: 600;
color: #6b7280;
margin: 0 0 12px;
}
.tools-marquee__band{
position: relative;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.tools-marquee__track{
display: flex;
align-items: center;
width: max-content;
animation: tools-marquee-scroll 48s linear infinite;
will-change: transform;
}
.tools-marquee__track:hover{ animation-play-state: paused; }
.tools-marquee__slide{
display: block;
height: clamp(70px, 9vh, 100px);
width: auto;
aspect-ratio: 54 / 5;
flex-shrink: 0;
pointer-events: none;
user-select: none;
}
@keyframes tools-marquee-scroll{
from{ transform: translateX(0); }
to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
.tools-marquee__track{ animation: none; }
}
@media (max-width: 640px){
.tools-marquee{ padding: 0 12px; }
.tools-marquee__label{ font-size: 11px; letter-spacing: 2px; }
.tools-marquee__slide{ height: 64px; }
}
/* ---------- Tool strip ---------- */
.tools{
padding: 40px 56px 100px;
}
.tools .eyebrow{
text-align:center;
text-transform:uppercase;
letter-spacing: 0.18em;
font-size: 12.5px;
color:#8a8f98;
font-weight:500;
margin-bottom: 44px;
}
.tool-row{
display:flex; justify-content:center; align-items:center; gap:88px; flex-wrap:wrap;
max-width: 1140px; margin: 0 auto;
}
.tool-logo{
height: 72px; width:auto; display:block;
object-fit: contain;
}
/* ---------- Philosophy ---------- */
.eyebrow-blue{
color: var(--blue);
font-weight:600;
letter-spacing:0.18em;
text-transform:uppercase;
font-size:13px;
text-align:center;
}
h2.section-title{
text-align:center;
margin: 22px auto 28px;
max-width: 1080px;
font-size: clamp(38px, 4.2vw, 64px);
line-height: 1.07;
letter-spacing:-0.03em;
font-weight:800;
color:#0b0b0d;
}
p.section-lead{
margin: 0 auto;
max-width: 760px;
text-align:center;
font-size: clamp(17px, 1.3vw, 20px);
line-height: 1.55;
color:#6b7280;
font-weight:400;
}
.principles{
margin-top: 110px;
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 64px;
}
.principle{ text-align:center; }
.principle .ico{
width:64px; height:64px;
background:#eef0f3;
border-radius:16px;
display:flex; align-items:center; justify-content:center;
margin: 0 auto 28px;
font-size:30px;
line-height:1;
}
.principle h3{
font-size: 26px; font-weight:700; letter-spacing:-0.02em;
margin:0 0 18px;
color:#0b0b0d;
}
.principle p{
margin:0; max-width: 340px; margin-inline:auto;
font-size:17px; line-height:1.55; color:#6b7280;
}
/* ---------- Trust ---------- */
.trust{
padding: 90px 56px;
background: #eef0f3;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}
.trust .label{
text-align:center; color:#8a8f98;
font-size:15px; font-weight:400; margin-bottom:36px;
}
.trust-row{
display:flex; justify-content:center; gap:96px; flex-wrap:wrap;
color:#6b7280; font-weight:600; font-size:20px;
}
/* ---------- Services ---------- */
.services-grid{
margin-top: 90px;
display:grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
.scard{
background:#fff;
border-radius:22px;
padding: 32px 30px 28px;
min-height: 360px;
display:flex; flex-direction:column;
box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 24px 40px -28px rgba(0,0,0,0.08);
position:relative;
}
.scard .stag{
font-size:14px; color:#7a7f87; font-weight:500; margin-bottom:18px;
}
.scard h4{
margin:0 0 18px;
font-size:26px; font-weight:700; letter-spacing:-0.02em;
color:#0b0b0d;
}
.scard p{
margin:0 0 26px;
font-size:15.5px; line-height:1.55; color:#6b7280;
}
.scard .divider{
border-top:1px solid var(--line);
margin-top:auto;
padding-top:18px;
font-size:15px; color:#0b0b0d; font-weight:500;
}
.scard.dark{
background:#0c0c0e;
color:#fff;
box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 24px 50px -22px rgba(0,0,0,0.4);
}
.scard.dark .stag{ color:#a8acb4 }
.scard.dark h4{ color:#fff }
.scard.dark p{ color:#a8acb4 }
.scard.dark .divider{ color:#fff; border-color: rgba(255,255,255,0.1) }
.premium-badge{
position:absolute; top:18px; right:18px;
background: linear-gradient(135deg,#3b5bf3, #1561ff);
color:#fff; font-size:11px; font-weight:700;
letter-spacing:0.15em; padding:7px 12px; border-radius:999px;
}
/* ---------- Métiers ---------- */
#metiers-pro, #metiers-etu{ scroll-margin-top: 150px; }
.metiers-eyebrow{
text-align:center;
font-size:13px; font-weight:700; letter-spacing:.22em;
color:#1561ff; text-transform:uppercase;
margin: 0 0 16px;
}
.metiers-grid{
margin-top: 64px;
display:grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
/* Grille de la branche professionnels (B2B) : 3 métiers */
.metiers-grid--pro{ margin-top: 0; grid-template-columns: repeat(3, 1fr); }
.mcard{
border-radius: 28px;
padding: 32px 28px 28px;
color:#fff;
display:flex; flex-direction:column;
position:relative;
overflow:hidden;
min-height: 460px;
border: 1px solid rgba(255,255,255,0.10);
box-shadow: 0 30px 50px -28px rgba(0,0,0,0.35), inset 0 -70px 90px -55px rgba(0,0,0,0.55);
isolation: isolate;
}
/* Aurore bleue qui dérive doucement en fond */
.mcard::before{
content:""; position:absolute; z-index:-1; pointer-events:none;
width:150%; height:150%; left:-25%; top:-35%;
background: radial-gradient(circle at 50% 50%, var(--m-glow, rgba(120,170,255,0.40)) 0%, transparent 58%);
filter: blur(6px);
animation: m-aurora 16s ease-in-out infinite;
}
/* Reflet qui balaie la carte au survol */
.mcard::after{
content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.16) 48%, transparent 64%);
transform: translateX(-130%);
transition: transform 0s;
}
.mcard:hover::after{ transform: translateX(130%); transition: transform .95s cubic-bezier(.22,1,.36,1); }
@keyframes m-aurora{
0%{ transform: translate(-8%,-6%) scale(1); }
50%{ transform: translate(8%,7%) scale(1.28); }
100%{ transform: translate(-8%,-6%) scale(1); }
}
/* Décalage de l'aurore pour que les 4 cartes ne bougent pas à l'unisson */
.metiers-grid .mcard:nth-child(2)::before{ animation-delay: -4s; }
.metiers-grid .mcard:nth-child(3)::before{ animation-delay: -8s; }
.metiers-grid .mcard:nth-child(4)::before{ animation-delay: -12s; }
.mcard .mico{
width:56px; height:56px;
display:flex; align-items:center; justify-content:center;
border-radius:16px;
background: rgba(255,255,255,0.14);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.22);
margin-bottom: 22px;
transition: transform .35s cubic-bezier(.22,1,.36,1), background .35s ease, box-shadow .35s ease;
}
.mcard:hover .mico{
transform: scale(1.08);
background: rgba(255,255,255,0.24);
box-shadow: 0 12px 28px -10px rgba(0,0,0,0.45);
}
.mcard .mico svg{
width:30px; height:30px;
stroke:#fff; fill:none; stroke-width:1.7;
stroke-linecap:round; stroke-linejoin:round;
animation: m-float 6.5s ease-in-out infinite;
}
@keyframes m-float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-5px); } }
.mcard .mtag{
text-transform:uppercase; letter-spacing:0.16em;
font-size:11.5px; font-weight:700; color: rgba(255,255,255,0.7);
margin-bottom: 8px;
}
.mcard h4{
font-size: clamp(22px, 1.8vw, 26px);
font-weight:700; letter-spacing:-0.02em;
margin:0 0 18px;
line-height:1.15;
}
.mcard .mdivider{
height:1px;
background: linear-gradient(90deg, rgba(255,255,255,0.28), rgba(255,255,255,0));
margin: 4px 0 18px;
}
.mcard .muses{
list-style:none; padding:0; margin: 0 0 24px;
display:flex; flex-direction:column; gap:11px;
}
.mcard .muses li{
display:flex; align-items:flex-start; gap:10px;
font-size:14.5px; line-height:1.45;
color: rgba(255,255,255,0.92);
}
.mcard .muses li::before{
content:""; flex:none;
width:18px; height:18px; margin-top:1px;
border-radius:50%;
background:
url("data:image/svg+xml;utf8,") center/12px no-repeat,
rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.28);
}
.mcard .mfoot{
margin-top:auto;
display:inline-flex; align-items:center; gap:8px;
font-size:14px; font-weight:600;
color:#fff;
padding-top: 6px;
border-top: 1px solid rgba(255,255,255,0.14);
padding-top: 18px;
transition: gap .25s ease;
}
.mcard .mfoot .arrow{
display:inline-flex; align-items:center; justify-content:center;
width:28px; height:28px; border-radius:50%;
background: rgba(255,255,255,0.16);
border: 1px solid rgba(255,255,255,0.22);
transition: transform .25s ease, background .25s ease;
}
.mcard:hover .mfoot{ gap:12px; }
.mcard:hover .mfoot .arrow{ background: rgba(255,255,255,0.28); transform: translateX(2px); }
/* Famille bleue harmonisée : navy → royal → indigo → azur */
.m-juridique{ --m-glow: rgba(95,135,235,0.30); background: radial-gradient(130% 120% at 12% 0%, #1B2A4A 0%, #0A1430 72%); }
.m-chiffre{ --m-glow: rgba(130,180,255,0.44); background: radial-gradient(130% 120% at 12% 0%, #1E5BE6 0%, #0A2E9E 78%); }
.m-etudiants{ --m-glow: rgba(140,150,255,0.42); background: radial-gradient(130% 120% at 12% 0%, #3A45C4 0%, #1A2270 78%); }
.m-flux{ --m-glow: rgba(130,200,255,0.46); background: radial-gradient(130% 120% at 12% 0%, #2080EE 0%, #0A4BBE 80%); }
/* (ancienne carte santé, conservée au cas où, alignée sur le bleu) */
.m-sante{ --m-glow: rgba(120,185,255,0.42); background: radial-gradient(130% 120% at 12% 0%, #1A6FE0 0%, #0A3C9E 80%); }
@media (prefers-reduced-motion: reduce){
.mcard::before, .mcard .mico svg{ animation: none; }
.mcard::after, .mcard:hover::after{ transition: none; }
}
.metiers-footnote{
margin-top: 40px;
text-align:center;
font-size: 15px; color: var(--muted);
}
.metiers-footnote b{ color: #0a0a0a; font-weight:600; }
.metiers-footnote a{ color: #1561ff; font-weight:600; border-bottom: 1px solid currentColor; }
/* ---------- Métiers : deux branches B2B / B2C ---------- */
.metiers-branch{ margin-top: 60px; }
.metiers-branch + .metiers-branch{ margin-top: 56px; }
.branch-head{ display:flex; align-items:center; gap:16px; margin-bottom: 26px; }
.branch-head h3{
margin:0; color:#0a0a0a;
font-size: clamp(19px, 1.7vw, 24px);
font-weight:700; letter-spacing:-0.015em;
}
.branch-tag{
flex:none;
font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
color:#1561ff; background: rgba(21,97,255,0.09);
border:1px solid rgba(21,97,255,0.22);
padding:5px 11px; border-radius:999px;
}
.branch-line{ flex:1; height:1px; background: linear-gradient(90deg, rgba(10,10,10,0.14), rgba(10,10,10,0)); }
/* Bloc étudiant : la carte + le panneau des 3 modules */
.etudiants-block{
display:grid; grid-template-columns: 0.92fr 1.08fr; gap:22px; align-items:stretch;
}
.modules-panel{
background: linear-gradient(180deg, #f6f7ff 0%, #ecefff 100%);
border:1px solid rgba(58,69,196,0.18);
border-radius:28px;
padding: 32px 32px 28px;
display:flex; flex-direction:column;
}
.modules-panel__eyebrow{
font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
color:#3A45C4; margin:0 0 6px;
}
.modules-panel__title{
margin:0 0 22px; color:#0a0a0a;
font-size: clamp(19px,1.5vw,22px); font-weight:700; letter-spacing:-0.01em;
}
.modules-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.module{
display:flex; gap:16px; align-items:flex-start;
padding:17px 0;
border-top:1px solid rgba(58,69,196,0.14);
}
.module:first-child{ border-top:none; padding-top:2px; }
.module:last-child{ padding-bottom:2px; }
.module__num{
flex:none; width:36px; height:36px;
display:flex; align-items:center; justify-content:center;
font-size:13px; font-weight:700; color:#3A45C4;
background: rgba(58,69,196,0.10);
border:1px solid rgba(58,69,196,0.22);
border-radius:11px;
}
.module__body{ display:flex; flex-direction:column; gap:5px; }
.module__tool{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#3A45C4; }
.module__title{ margin:0; font-size:15.5px; font-weight:600; color:#0a0a0a; line-height:1.35; }
.module__desc{ margin:0; font-size:13.5px; line-height:1.5; color:#565c6b; }
/* Chapô d'une branche (introduction B2C) */
.branch-lead{
margin: -6px 0 28px; max-width: 760px;
font-size: 16px; line-height:1.6; color:#6b7280;
}
.branch-lead strong{ color:#3A45C4; font-weight:700; }
/* Pied du panneau modules : résultat + CTA */
.modules-panel__foot{
margin-top: 22px; padding-top: 20px;
border-top: 1px solid rgba(58,69,196,0.16);
display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:space-between;
}
.modules-panel__result{
margin:0; flex:1 1 260px;
font-size:13.5px; line-height:1.5; color:#3A45C4; font-weight:600;
}
.modules-cta{
flex:none; display:inline-flex; align-items:center; gap:8px;
font-size:13.5px; font-weight:700; color:#fff; text-decoration:none;
background:#3A45C4; border:1px solid #3A45C4;
border-radius:999px; padding:11px 20px;
transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.modules-cta span{ transition: transform .25s ease; }
.modules-cta:hover{ background:#2d37a8; transform: translateY(-1px); box-shadow: 0 12px 24px -12px rgba(58,69,196,0.6); }
.modules-cta:hover span{ transform: translateX(3px); }
/* Lien vers la page dédiée, sous chaque branche métiers */
.branch-more{
display:inline-flex; align-items:center; gap:9px;
margin-top:24px;
font-size:15px; font-weight:600; color:#1561ff;
}
.branch-more span{ transition: transform .2s ease; }
.branch-more:hover span{ transform: translateX(4px); }
@media (max-width: 1080px){
.etudiants-block{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
.branch-head{ gap:12px; margin-bottom:20px; }
.branch-lead{ font-size:15px; }
.modules-panel{ padding: 24px 20px; }
.modules-panel__foot{ flex-direction:column; align-items:flex-start; }
.modules-cta{ width:100%; justify-content:center; }
}
/* ---------- Programme étudiant (page dédiée) ---------- */
.programme-grid{
display:grid; grid-template-columns: repeat(3, 1fr);
gap:22px; margin-top:52px;
}
.programme-card{
background:#fff; border:1px solid rgba(58,69,196,0.14);
border-radius:24px; padding:30px 26px 28px;
box-shadow: 0 30px 60px -40px rgba(58,69,196,0.25);
display:flex; flex-direction:column;
}
.programme-card__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.programme-card__num{
font-size:14px; font-weight:800; color:#3A45C4;
background: rgba(58,69,196,0.10); border:1px solid rgba(58,69,196,0.22);
border-radius:10px; padding:5px 11px;
}
.programme-card__tool{
font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
color:#3A45C4;
}
.programme-card__title{ font-size:19px; font-weight:700; letter-spacing:-0.01em; color:#0a0a0a; margin:0 0 12px; line-height:1.3; }
.programme-card__desc{ font-size:14.5px; line-height:1.55; color:#565c6b; margin:0 0 20px; }
.programme-card__points{ list-style:none; margin:auto 0 0; padding:16px 0 0; border-top:1px solid rgba(58,69,196,0.14); display:flex; flex-direction:column; gap:10px; }
.programme-card__points li{
display:flex; align-items:flex-start; gap:9px;
font-size:13.5px; line-height:1.5; color:#3a3f4d;
}
.programme-card__points li::before{
content:""; flex:none; width:16px; height:16px; margin-top:2px; border-radius:50%;
background:
url("data:image/svg+xml;utf8,") center/11px no-repeat,
rgba(58,69,196,0.10);
border: 1px solid rgba(58,69,196,0.22);
}
@media (max-width: 1080px){
.programme-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
.programme-grid{ grid-template-columns: 1fr; margin-top:36px; }
}
/* ---------- Flow / orchestration animation ---------- */
.flow-section{ padding: 40px 56px 60px; }
.flow-anim{ margin: 0 auto; max-width: 960px; width: 100%; }
.flow-anim svg{ width:100%; height:auto; display:block; }
.flow-anim .flow{ animation: dashFlow 6s linear infinite; }
.flow-anim .ring{
transform-box: fill-box; transform-origin: center;
animation: ringPulse 2.8s ease-out infinite;
}
.flow-anim .ring.r2{ animation-delay: 1.4s; }
@keyframes hubBob { 0%,100%{ transform: scale(1) } 50%{ transform: scale(1.04) } }
.flow-anim .hub-orb{
transform-box: fill-box; transform-origin: center;
animation: hubBob 4.2s ease-in-out infinite;
}
@media (max-width: 1020px){
.flow-section{ padding: 20px 24px 40px; }
}
/* ---------- Final CTA ---------- */
.final{
padding: 160px 56px 120px;
text-align:center;
}
.final h2{
font-size: clamp(40px, 4.6vw, 68px);
font-weight:800; letter-spacing:-0.03em; line-height:1.07;
margin:0 auto 26px; max-width: 980px; color:#0b0b0d;
}
.final p{
color:#6b7280; font-size: clamp(17px,1.3vw,20px);
margin: 0 auto 44px;
}
/* ---------- Footer ---------- */
footer{
padding: 40px 56px 36px;
border-top:1px solid var(--line);
}
.foot-row{
max-width:1240px; margin: 0 auto;
display:flex; justify-content:space-between; align-items:center; gap:24px;
color:#8a8f98; font-size:15px;
}
.foot-row .links{ display:flex; gap:46px }
.foot-row .links a:hover{ color:#0b0b0d }
@media (max-width: 1020px){
.nav{ padding: 0 24px; grid-template-columns: auto 1fr auto }
.nav-links{ display:none }
.nav-link-inline{ display:none }
.nav-phone{ padding: 11px 16px; gap: 8px; }
.nav-phone .label{ display:none; }
.nav-phone .num{ font-size:14px; }
section{ padding: 80px 24px }
.hero{
min-height: 0;
padding: 56px 24px 40px;
grid-template-columns: 1fr;
grid-template-areas:
"title"
"audience"
"value"
"anim"
"ctas"
"marquee";
row-gap: 24px;
justify-items: center;
text-align: center;
}
.hero h1, .hero p.hero-valueprop{ text-align: center; max-width: 100%; }
.hero-audience{ justify-content: center; }
.hero-ctas{ justify-content: center; }
.hero-anim{ max-width: 100%; }
.hero-anim svg{ height: auto; width: 100%; max-height: 360px; }
.tools{ padding: 30px 24px 60px }
.trust{ padding: 60px 24px }
.principles{ grid-template-columns: 1fr; gap: 56px; margin-top:70px }
.services-grid{ grid-template-columns: repeat(2,1fr) }
.metiers-grid{ grid-template-columns: repeat(2,1fr) }
.tool-row{ justify-content:center; gap:40px }
.final{ padding: 90px 24px 70px }
footer{ padding: 30px 24px }
.foot-row{ flex-direction:column; gap:14px }
}
@media (max-width: 620px){
.services-grid{ grid-template-columns: 1fr }
.metiers-grid{ grid-template-columns: 1fr }
.trust-row{ gap: 30px 46px }
}
/* ---------- Tweakable animations ---------- */
:root{ --anim-speed: 1; --reveal-dist: 28px; }
/* Scroll reveal */
[data-reveal]{
opacity: 0;
transform: translateY(var(--reveal-dist));
transition:
opacity calc(.7s / var(--anim-speed)) cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms),
transform calc(.8s / var(--anim-speed)) cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms);
will-change: opacity, transform;
}
[data-reveal].is-visible{ opacity:1; transform: none; }
@media (prefers-reduced-motion: reduce){
[data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
}
/* Hero entrance (replaces initial reveal for hero kids) */
@keyframes heroIn {
from { opacity: 0; transform: translateY(24px); filter: blur(6px); }
to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes heroInDramatic {
from { opacity: 0; transform: translateY(40px) scale(.96); filter: blur(10px); }
to { opacity: 1; transform: none; filter: blur(0); }
}
.hero-anim-in[ ] { /* keep specificity high */ }
html[data-hero-entrance="subtle"] .hero-anim-in > *{ animation: heroIn calc(.9s / var(--anim-speed)) cubic-bezier(.2,.7,.2,1) both; }
html[data-hero-entrance="dramatic"] .hero-anim-in > *{ animation: heroInDramatic calc(1.1s / var(--anim-speed)) cubic-bezier(.2,.7,.2,1) both; }
html[data-hero-entrance="subtle"] .hero-anim-in > *:nth-child(1){ animation-delay: 0ms; }
html[data-hero-entrance="subtle"] .hero-anim-in > *:nth-child(2){ animation-delay: 100ms; }
html[data-hero-entrance="subtle"] .hero-anim-in > *:nth-child(3){ animation-delay: 180ms; }
html[data-hero-entrance="subtle"] .hero-anim-in > *:nth-child(4){ animation-delay: 260ms; }
html[data-hero-entrance="subtle"] .hero-anim-in > *:nth-child(5){ animation-delay: 340ms; }
html[data-hero-entrance="dramatic"] .hero-anim-in > *:nth-child(1){ animation-delay: 0ms; }
html[data-hero-entrance="dramatic"] .hero-anim-in > *:nth-child(2){ animation-delay: 140ms; }
html[data-hero-entrance="dramatic"] .hero-anim-in > *:nth-child(3){ animation-delay: 240ms; }
html[data-hero-entrance="dramatic"] .hero-anim-in > *:nth-child(4){ animation-delay: 340ms; }
html[data-hero-entrance="dramatic"] .hero-anim-in > *:nth-child(5){ animation-delay: 440ms; }
/* when hero entrance is on, suppress its data-reveal so it doesn't double-play */
html:not([data-hero-entrance="off"]) .hero [data-reveal]{ opacity:1; transform:none; transition:none; }
/* Animated gradient on accent text */
@keyframes gradShift { 0%,100%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } }
html[data-anim-gradient="on"] .hero h1 .accent{
background: linear-gradient(90deg,#1561ff 0%,#4338ff 35%,#7a5aff 55%,#1561ff 100%);
background-size: 220% 100%;
-webkit-background-clip:text; background-clip:text; color:transparent;
animation: gradShift calc(7s / var(--anim-speed)) ease-in-out infinite;
}
/* Floating background blobs */
.blob{
position: fixed; pointer-events:none; z-index: 0;
width: 520px; height: 520px; border-radius: 50%;
filter: blur(80px); opacity: 0;
transition: opacity .8s ease;
}
.blob.b1{ background: radial-gradient(closest-side, rgba(21,97,255,.35), transparent 70%); top: -160px; left: -120px; }
.blob.b2{ background: radial-gradient(closest-side, rgba(99,82,210,.30), transparent 70%); top: 30vh; right: -180px; }
.blob.b3{ background: radial-gradient(closest-side, rgba(46,204,109,.22), transparent 70%); bottom: -200px; left: 30vw; }
@keyframes blobFloat1 { 0%,100%{ transform: translate(0,0) } 50%{ transform: translate(60px,40px) } }
@keyframes blobFloat2 { 0%,100%{ transform: translate(0,0) } 50%{ transform: translate(-50px,30px) } }
@keyframes blobFloat3 { 0%,100%{ transform: translate(0,0) } 50%{ transform: translate(40px,-60px) } }
html[data-blobs="on"] .blob{ opacity: 1; }
html[data-blobs="on"] .blob.b1{ animation: blobFloat1 calc(18s / var(--anim-speed)) ease-in-out infinite; }
html[data-blobs="on"] .blob.b2{ animation: blobFloat2 calc(22s / var(--anim-speed)) ease-in-out infinite; }
html[data-blobs="on"] .blob.b3{ animation: blobFloat3 calc(26s / var(--anim-speed)) ease-in-out infinite; }
.nav-wrap, section, footer, .tools{ position: relative; z-index: 1; }
/* Card hover lift */
.scard, .mcard, .principle{ transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease; }
.mcard:hover{ border-color: rgba(255,255,255,0.24); }
html[data-card-lift="on"] .scard:hover{ transform: translateY(-8px); box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 36px 50px -28px rgba(0,0,0,0.18); }
html[data-card-lift="on"] .mcard:hover{ transform: translateY(-8px) scale(1.01); box-shadow: 0 40px 60px -28px rgba(0,0,0,0.45); }
html[data-card-lift="on"] .principle:hover .ico{ transform: translateY(-4px) rotate(-3deg); }
.principle .ico{ transition: transform .4s cubic-bezier(.2,.7,.2,1); }
/* Tool logos hover wiggle */
.tool-logo{ transition: transform .35s cubic-bezier(.2,.7,.2,1), filter .35s ease; }
html[data-tool-wiggle="on"] .tool-logo:hover{ transform: translateY(-6px) rotate(-4deg) scale(1.06); }
@keyframes toolFloat { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-4px) } }
html[data-tool-wiggle="on"] .tool-logo{ animation: toolFloat calc(4s / var(--anim-speed)) ease-in-out infinite; }
html[data-tool-wiggle="on"] .tool-logo:nth-child(2){ animation-delay: .4s; }
html[data-tool-wiggle="on"] .tool-logo:nth-child(3){ animation-delay: .8s; }
html[data-tool-wiggle="on"] .tool-logo:nth-child(4){ animation-delay: 1.2s; }
/* CTA pulse */
@keyframes ctaPulse {
0%,100% { box-shadow: 0 8px 26px -10px rgba(21,97,255,0.55), 0 0 0 0 rgba(21,97,255,0.45); }
50% { box-shadow: 0 12px 30px -10px rgba(21,97,255,0.65), 0 0 0 14px rgba(21,97,255,0); }
}
html[data-cta-pulse="on"] .btn-blue{ animation: ctaPulse calc(2.4s / var(--anim-speed)) ease-in-out infinite; }
/* ============================================================
RESPONSIVE PATCH — Greg AI
Ajouté sur le fichier original pour rendre le site
pleinement responsive de 320px à 1920px
============================================================ */
/* ---------- NAV HAMBURGER ---------- */
.nav-hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 8px;
background: none;
border: none;
border-radius: 8px;
transition: background .2s;
}
.nav-hamburger:hover { background: rgba(0,0,0,.05); }
.nav-hamburger span {
display: block;
width: 22px;
height: 2px;
background: #0a0a0a;
border-radius: 2px;
transition: transform .25s ease, opacity .25s ease;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Mobile drawer */
.nav-mobile-drawer {
display: none;
flex-direction: column;
gap: 0;
background: rgba(243,244,246,0.97);
backdrop-filter: saturate(140%) blur(14px);
-webkit-backdrop-filter: saturate(140%) blur(14px);
border-top: 1px solid var(--line);
padding: 8px 0 16px;
position: absolute;
top: 100%;
left: 0; right: 0;
z-index: 100;
box-shadow: 0 12px 32px -8px rgba(0,0,0,.14);
}
.nav-mobile-drawer.open { display: flex; }
.nav-mobile-drawer a {
padding: 14px 24px;
font-size: 16px;
font-weight: 500;
color: #1a1a1a;
border-bottom: 1px solid var(--line);
}
.nav-mobile-drawer a:last-child { border-bottom: none; }
.nav-mobile-drawer a:active { background: rgba(0,0,0,.04); }
/* ---------- LOGO SIZE RESPONSIVE ---------- */
@media (max-width: 1020px) {
.logo img { height: 80px; }
.nav { height: 100px; position: relative; }
.nav-hamburger { display: flex; }
.nav-wrap { position: sticky; top: 0; z-index: 100; }
}
@media (max-width: 640px) {
.logo img { height: 60px; }
.nav { height: 80px; padding: 0 16px; }
}
/* ---------- HERO RESPONSIVE COMPLET ---------- */
@media (max-width: 1200px) {
.hero {
grid-template-columns: 1fr 1fr;
padding: 40px 40px 0;
}
}
@media (max-width: 1020px) {
.hero {
grid-template-columns: 1fr;
grid-template-areas:
"title"
"audience"
"value"
"anim"
"ctas"
"marquee";
padding: 40px 20px 0;
row-gap: 20px;
text-align: center;
justify-items: center;
}
.hero h1 { text-align: center; max-width: 100%; font-size: clamp(36px, 7vw, 60px); }
.hero p.hero-valueprop { text-align: center; max-width: 100%; font-size: 18px; }
.hero-audience { justify-content: center; }
.hero-ctas { justify-content: center; flex-wrap: wrap; gap: 16px; }
.hero-anim { max-width: min(560px, 90vw); }
.hero-anim svg { max-height: 300px; }
}
@media (max-width: 640px) {
.hero { padding: 28px 16px 0; row-gap: 16px; }
.hero h1 { font-size: clamp(28px, 8vw, 46px); }
.hero p.hero-valueprop { font-size: 16px; }
.btn-blue { padding: 16px 24px; font-size: 15px; }
.link-arrow { font-size: 15px; }
}
/* ---------- TOOLS STRIP ---------- */
@media (max-width: 1020px) {
.tools { padding: 24px 20px 60px; }
.tool-row { gap: 28px; }
.tool-logo { height: 52px; }
}
@media (max-width: 640px) {
.tools { padding: 16px 16px 48px; }
.tool-row { gap: 20px 32px; }
.tool-logo { height: 40px; }
}
/* ---------- PHILOSOPHY SECTION ---------- */
@media (max-width: 1020px) {
section { padding: 72px 20px; }
}
@media (max-width: 640px) {
section { padding: 56px 16px; }
h2.section-title { font-size: clamp(28px, 6.5vw, 46px); }
p.section-lead { font-size: 16px; }
.principles { grid-template-columns: 1fr; gap: 44px; margin-top: 52px; }
.principle h3 { font-size: 22px; }
}
/* ---------- SERVICES GRID ---------- */
@media (max-width: 1080px) {
.services-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px) {
.services-grid { grid-template-columns: 1fr; }
#services { padding: 20px 16px 80px; }
.services__title { font-size: clamp(24px, 6vw, 38px); }
.services__subtitle { font-size: 15px; }
}
/* Services CTA */
@media (max-width: 880px) {
.services-cta__inner {
grid-template-columns: 1fr;
padding: 28px 20px;
}
.services-cta__actions { min-width: 0; }
.services-cta__title { font-size: clamp(22px, 5vw, 30px); }
}
/* ---------- METIERS GRID ---------- */
@media (max-width: 1080px) {
.metiers-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.metiers-grid { grid-template-columns: 1fr; }
.mcard { min-height: 380px; }
}
/* ---------- TRUST ---------- */
@media (max-width: 640px) {
.trust { padding: 56px 16px; }
.trust-row { gap: 24px 32px; font-size: 17px; }
}
/* ---------- FINAL CTA ---------- */
@media (max-width: 1020px) {
.final { padding: 80px 20px 64px; }
}
@media (max-width: 640px) {
.final { padding: 56px 16px 48px; }
.final h2 { font-size: clamp(28px, 7vw, 48px); }
.final p { font-size: 16px; }
}
/* ---------- FOOTER ---------- */
@media (max-width: 1020px) {
footer { padding: 28px 20px; }
.foot-row { flex-direction: column; gap: 12px; text-align: center; }
.foot-row .links { gap: 28px; }
}
@media (max-width: 640px) {
footer { padding: 20px 16px; }
.foot-row .links { gap: 20px; flex-wrap: wrap; justify-content: center; }
}
/* ---------- MARQUEE BANDS ---------- */
@media (max-width: 640px) {
.tools-marquee__label { font-size: 10px; letter-spacing: 1.8px; }
.tools-marquee__slide { height: 56px; }
.clients-marquee__slide { height: 72px; }
.clients-marquee { padding: 4px 12px 48px; }
}
/* ---------- NAV PHONE BUTTON ---------- */
@media (max-width: 400px) {
.nav-phone { padding: 10px 12px; }
.nav-phone .num { font-size: 13px; }
}
/* ---------- SERVICES CARD STAGE HEIGHT ON MOBILE ---------- */
@media (max-width: 640px) {
.card__stage { height: 120px; }
.card__name { font-size: 20px; }
.card__desc { font-size: 13.5px; }
}
/* ---------- FLOW SECTION ---------- */
@media (max-width: 640px) {
.flow-section { padding: 12px 16px 40px; }
}
/* ---------- CONTACT FORM (if present) ---------- */
@media (max-width: 640px) {
.contact-form { padding: 0 0; }
input, textarea, select { font-size: 16px !important; } /* Prevent iOS zoom */
}
/* ---------- TWEAKS PANEL: hide on very small ---------- */
@media (max-width: 480px) {
/* TweakPanel can overflow on tiny screens — push it */
[class*="twk-panel"], [class*="TweaksPanel"] {
max-width: 94vw;
right: 3vw !important;
}
}
/* ============================================================
RESPONSIVE — RENFORCEMENT MOBILE (anti-débordement)
============================================================ */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { max-width: 100%; }
img, svg, video { max-width: 100%; height: auto; }
/* Empêche les grilles/sections de pousser la largeur */
section, .wrap, .services__inner, .clients-marquee__inner,
.tools-marquee, .services-cta__inner, .foot-row { max-width: 100%; }
/* Tablettes et mobiles : forcer la pile verticale */
@media (max-width: 900px) {
.hero {
grid-template-columns: 1fr !important;
grid-template-areas:
"title"
"audience"
"value"
"anim"
"ctas"
"marquee" !important;
text-align: center;
justify-items: center;
min-height: 0;
padding-top: 32px;
}
.hero h1, .hero p.hero-valueprop { text-align: center !important; max-width: 100% !important; }
.hero-audience { justify-content: center !important; }
.hero-ctas { justify-content: center !important; }
}
/* Vrai mobile (téléphone) */
@media (max-width: 600px) {
.hero h1 { font-size: clamp(26px, 8vw, 40px) !important; line-height: 1.1; }
.hero p.hero-valueprop { font-size: 16px !important; }
.hero-anim { max-width: 100% !important; }
.hero-anim svg { max-height: 260px !important; }
.btn-blue { width: 100%; justify-content: center; box-sizing: border-box; }
.hero-ctas { width: 100%; }
.services__grid { grid-template-columns: 1fr !important; }
.metiers-grid { grid-template-columns: 1fr !important; }
.principles { grid-template-columns: 1fr !important; }
.services-cta__inner { grid-template-columns: 1fr !important; }
.services-cta__btn { width: 100%; box-sizing: border-box; }
h2.section-title { font-size: clamp(26px, 7vw, 40px); }
.services__title { font-size: clamp(24px, 7vw, 36px); }
.final h2 { font-size: clamp(26px, 7.5vw, 42px); }
}
/* Très petit (≤380px) */
@media (max-width: 380px) {
.nav { padding: 0 12px; }
section { padding-left: 14px; padding-right: 14px; }
.hero { padding-left: 14px; padding-right: 14px; }
}
/* ============================================================
CORRECTIF MOBILE FINAL — priorité maximale
============================================================ */
@media (max-width: 1020px) {
/* NAV : on ne garde que le logo + le hamburger */
.nav {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
height: 72px !important;
padding: 0 16px !important;
}
.nav-link-inline { display: none !important; }
.nav-links { display: none !important; }
.nav-cta-wrap { display: none !important; } /* le tel est dans le menu */
.nav-hamburger { display: flex !important; }
.logo img { height: 52px !important; }
.logo { gap: 0 !important; }
/* HERO : forcer l'affichage (l'animation d'entrée masquait tout) */
.hero,
.hero * { animation: none !important; }
.hero [data-reveal],
.hero h1,
.hero p.hero-valueprop,
.hero .hero-anim,
.hero .hero-ctas,
.hero-anim-in > * {
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
.hero {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
min-height: 0 !important;
padding: 28px 18px 0 !important;
gap: 18px !important;
}
.hero h1 {
order: 1;
font-size: clamp(26px, 7.5vw, 40px) !important;
line-height: 1.12 !important;
max-width: 100% !important;
margin: 0 !important;
overflow-wrap: anywhere;
}
.hero p.hero-valueprop {
order: 2;
font-size: 16px !important;
line-height: 1.5 !important;
max-width: 100% !important;
margin: 0 !important;
overflow-wrap: anywhere;
}
.hero .hero-anim {
order: 3;
width: 100% !important;
max-width: 460px !important;
margin: 4px auto !important;
}
.hero .hero-anim svg { max-height: 240px !important; width: 100% !important; }
.hero .hero-ctas {
order: 4;
width: 100% !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 12px !important;
margin: 0 !important;
}
.hero .tools-marquee { order: 5; width: 100% !important; }
.btn-blue {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
box-sizing: border-box !important;
white-space: normal !important;
}
.link-arrow { justify-content: center !important; }
}
/* ---------- next block ---------- */
.hero-prm{ }
/* Background glows breathe */
.hero-prm .glow-v, .hero-prm .glow-g{ transform-box: fill-box; transform-origin: center; animation: hpGlow 8s ease-in-out infinite; }
.hero-prm .glow-g{ animation-delay: -3s; }
@keyframes hpGlow{ 0%,100%{ opacity:.8; transform: scale(1); } 50%{ opacity:1; transform: scale(1.06); } }
/* Particles twinkle */
.hero-prm .pt{ transform-box: fill-box; transform-origin: center; animation: hpTwinkle 2.6s ease-in-out infinite; }
.hero-prm .pt2{ animation-duration: 3.1s; animation-delay: -0.7s; }
.hero-prm .pt3{ animation-duration: 2.2s; animation-delay: -1.4s; }
.hero-prm .pt4{ animation-duration: 2.9s; animation-delay: -2.1s; }
@keyframes hpTwinkle{ 0%,100%{ opacity:.25; transform: scale(.7); } 50%{ opacity:1; transform: scale(1.3); } }
/* Badge ring pulsing outward */
.hero-prm .badge{ transform-origin: 320px 40px; animation: hpBadgePulse 3.2s ease-in-out infinite; }
@keyframes hpBadgePulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.03); } }
.hero-prm .badge-ring{ transform-box: fill-box; transform-origin: center; animation: hpRingExpand 2.4s ease-out infinite; }
@keyframes hpRingExpand{ 0%{ transform: scale(1); opacity:.9; } 100%{ transform: scale(1.18); opacity: 0; } }
/* Scanline sweep across the panel */
.hero-prm .scanline{ animation: hpScan 5s ease-in-out infinite; }
@keyframes hpScan{ 0%{ transform: translateX(0); opacity: 0; } 8%{ opacity:.6; } 90%{ opacity:.6; transform: translateX(378px); } 100%{ opacity: 0; transform: translateX(378px); } }
/* Core pulse */
.hero-prm .core-pulse{ animation: hpCore 2.6s ease-in-out infinite; }
@keyframes hpCore{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.07); } }
.hero-prm .core circle{ animation: hpCoreRot 14s linear infinite; transform-origin: 448px 200px; }
@keyframes hpCoreRot{ to{ transform: rotate(360deg); } }
/* Orbit dots */
.hero-prm .od-1{ animation: hpOrbit 3.2s linear infinite; }
.hero-prm .od-2{ animation: hpOrbit 3.2s linear infinite; animation-delay: -1.06s; }
.hero-prm .od-3{ animation: hpOrbit 3.2s linear infinite; animation-delay: -2.13s; }
@keyframes hpOrbit{ to{ transform: rotate(360deg); } }
/* Wires + flowing flux */
.hero-prm .wire{ fill: none; stroke: #2A3450; stroke-width: 1.5; stroke-linecap: round; }
.hero-prm .flux{ fill: none; stroke: url(#gradAccent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 14 86; animation: hpFlux 2.4s linear infinite; }
.hero-prm .fx-2{ animation-delay: -0.6s; }
.hero-prm .fx-3{ animation-delay: -1.2s; }
.hero-prm .fx-4{ animation-delay: -1.8s; }
@keyframes hpFlux{ to{ stroke-dashoffset: -100; } }
/* Modules: stagger appear + bar grow + check pop */
.hero-prm .module{ opacity: 0; animation: hpModIn 6s ease-out infinite; }
.hero-prm .mod-1{ animation-delay: 0s; }
.hero-prm .mod-2{ animation-delay: .35s; }
.hero-prm .mod-3{ animation-delay: .7s; }
.hero-prm .mod-4{ animation-delay: 1.05s; }
@keyframes hpModIn{ 0%{ opacity:0; transform: translateX(-6px);} 10%,95%{ opacity:1; transform: translateX(0);} 100%{ opacity:0; transform: translateX(-6px);} }
.hero-prm .mbar{ stroke-dasharray: 64; stroke-dashoffset: 64; animation: hpBar 6s ease-out infinite; }
.hero-prm .mbar-1{ animation-delay: .2s; }
.hero-prm .mbar-2{ animation-delay: .55s; }
.hero-prm .mbar-3{ animation-delay: .9s; }
.hero-prm .mbar-4{ animation-delay: 1.25s; }
@keyframes hpBar{ 0%,5%{ stroke-dashoffset: 64; } 30%,95%{ stroke-dashoffset: 0; } 100%{ stroke-dashoffset: 64; } }
.hero-prm .mcheck{ opacity: 0; transform: scale(.3); animation: hpCheck 6s ease-out infinite; }
.hero-prm .mcheck-1{ animation-delay: .55s; }
.hero-prm .mcheck-2{ animation-delay: .9s; }
.hero-prm .mcheck-3{ animation-delay: 1.25s; }
.hero-prm .mcheck-4{ animation-delay: 1.6s; }
@keyframes hpCheck{ 0%,8%{ opacity:0; transform: scale(.3);} 18%,95%{ opacity:1; transform: scale(1);} 100%{ opacity:0; transform: scale(.3);} }
/* GRATUIT stamp */
.hero-prm .stamp{ opacity: 0; transform: scale(1.3) rotate(-3deg); animation: hpStamp 6s ease-out infinite; }
@keyframes hpStamp{ 0%,30%{ opacity:0; transform: scale(1.3) rotate(-3deg);} 40%,95%{ opacity:1; transform: scale(1) rotate(0deg);} 100%{ opacity:0; transform: scale(1.3) rotate(-3deg);} }
@media (prefers-reduced-motion: reduce){
.hero-prm *{ animation: none !important; opacity: 1 !important; transform: none !important; }
.hero-prm .mbar{ stroke-dashoffset: 0 !important; }
}
/* ---------- next block ---------- */
/* ---------- Services (animated) ---------- */
#services{
--ga-ink:#0F1E3D; --ga-ink-soft:#5A6B85; --ga-primary:#6D5EF8;
--ga-primary-2:#4F46E5; --ga-accent:#00C896; --ga-amber:#F5A623;
--ga-line:#E9ECF5; --ga-card:#FFFFFF; --ga-premium:#0B1220;
position:relative; overflow:hidden; padding:24px 24px 130px;
color:var(--ga-ink);
}
.services__inner{ position:relative; z-index:1; max-width:1280px; margin:0 auto; }
.services__eyebrow{ text-align:center; font-size:13px; font-weight:700; letter-spacing:3px; color:var(--ga-primary); margin:0 0 18px; }
.services__title{ text-align:center; font-size:clamp(28px,4vw,46px); line-height:1.12; font-weight:800; letter-spacing:-.6px; margin:0 auto 20px; max-width:780px; color:var(--ga-ink); }
.services__subtitle{ text-align:center; font-size:clamp(16px,1.6vw,19px); line-height:1.6; color:var(--ga-ink-soft); max-width:680px; margin:0 auto 56px; }
.services__grid{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width:1080px){ .services__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .services__grid{ grid-template-columns:1fr; } }
/* ---------- Services bottom CTA ---------- */
.services-cta{ margin-top: 56px; position:relative; z-index:1; }
.services-cta__inner{
position:relative;
display:grid;
grid-template-columns: minmax(0, 1.4fr) auto;
align-items:center;
gap: clamp(28px, 4vw, 64px);
padding: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 56px);
border-radius: 28px;
background:
radial-gradient(120% 140% at 100% 0%, rgba(99,82,210,0.18) 0%, rgba(99,82,210,0) 55%),
radial-gradient(100% 120% at 0% 100%, rgba(21,97,255,0.16) 0%, rgba(21,97,255,0) 50%),
linear-gradient(180deg, #0d0d12 0%, #07070a 100%);
color:#fff;
overflow:hidden;
box-shadow: 0 40px 60px -32px rgba(0,0,0,0.45);
}
.services-cta__inner::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:
linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px) 0 0/64px 64px,
linear-gradient(0deg, rgba(255,255,255,0.06) 1px, transparent 1px) 0 0/64px 64px;
mask-image: radial-gradient(80% 100% at 50% 50%, #000 0%, transparent 75%);
-webkit-mask-image: radial-gradient(80% 100% at 50% 50%, #000 0%, transparent 75%);
opacity:.5;
}
.services-cta__copy{ position:relative; }
.services-cta__eyebrow{
margin:0 0 10px; font-size:12.5px; font-weight:700;
letter-spacing:.18em; text-transform:uppercase;
color:#a8b3ff;
}
.services-cta__title{
margin:0 0 12px;
font-size: clamp(24px, 2.6vw, 34px);
line-height:1.15; letter-spacing:-0.02em; font-weight:800;
text-wrap: balance;
}
.services-cta__lead{
margin:0; max-width: 56ch;
font-size: 15.5px; line-height:1.55;
color: rgba(255,255,255,0.72);
}
.services-cta__actions{
position:relative;
display:flex; flex-direction:column; align-items:stretch; gap:14px;
min-width: 280px;
}
.services-cta__btn{
display:inline-flex; align-items:center; justify-content:space-between;
gap:18px;
background:#1561ff; color:#fff;
padding:18px 24px;
border-radius: 999px;
font-weight:600; font-size:16px;
box-shadow: 0 18px 40px -16px rgba(21,97,255,0.7), inset 0 1px 0 rgba(255,255,255,0.15);
transition: transform .15s ease, box-shadow .2s ease, background .15s ease;
}
.services-cta__btn:hover{
background:#0e4ee0;
transform: translateY(-2px);
box-shadow: 0 22px 46px -14px rgba(21,97,255,0.85), inset 0 1px 0 rgba(255,255,255,0.18);
}
.services-cta__btn span{ font-size:20px; transition: transform .2s ease; }
.services-cta__btn:hover span{ transform: translateX(4px); }
.services-cta__phone{
display:inline-flex; align-items:center; gap:10px; justify-content:center;
color: rgba(255,255,255,0.78); font-size:14px;
padding: 6px 12px;
}
.services-cta__phone svg{ width:16px; height:16px; flex:none; opacity:.7; }
.services-cta__phone b{ color:#fff; font-weight:600; font-variant-numeric: tabular-nums; }
.services-cta__phone:hover{ color:#fff; }
@media (max-width: 880px){
.services-cta__inner{ grid-template-columns: 1fr; padding: 32px 24px; }
.services-cta__actions{ min-width: 0; }
}
#services .card{
position:relative; background:var(--ga-card); border:1px solid var(--ga-line);
border-radius:22px; padding:0 0 26px; display:flex; flex-direction:column; overflow:hidden;
transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1), border-color .5s ease;
opacity:0; transform:translateY(30px);
}
#services .card.is-visible{ opacity:1; transform:translateY(0); }
#services .card:nth-child(1){ transition-delay:.05s; }
#services .card:nth-child(2){ transition-delay:.15s; }
#services .card:nth-child(3){ transition-delay:.25s; }
#services .card:nth-child(4){ transition-delay:.35s; }
#services .card:hover{ transform:translateY(-12px); box-shadow:0 28px 60px -20px rgba(15,30,61,.28); border-color:rgba(109,94,248,.5); }
.card__stage{ position:relative; height:150px; background:linear-gradient(180deg, rgba(109,94,248,.05), rgba(109,94,248,0)); border-bottom:1px solid var(--ga-line); overflow:hidden; }
.card__body{ padding:24px 26px 0; display:flex; flex-direction:column; flex-grow:1; }
.card__tag{ font-size:12.5px; font-weight:600; letter-spacing:.3px; color:var(--ga-primary); margin:0 0 8px; }
.card__name{ font-size:24px; font-weight:800; letter-spacing:-.4px; margin:0 0 14px; color:var(--ga-ink); }
.card__desc{ font-size:14.5px; line-height:1.6; color:var(--ga-ink-soft); margin:0; flex-grow:1; }
.card__divider{ height:1px; background:var(--ga-line); margin:20px 0 16px; transition:background .45s ease; }
#services .card:hover .card__divider{ background:rgba(109,94,248,.28); }
.card__outcome{ font-size:14px; font-weight:700; color:var(--ga-ink); margin:0; display:flex; gap:8px; align-items:flex-start; }
.card__outcome .arrow{ color:var(--ga-primary); transition:transform .4s cubic-bezier(.22,1,.36,1); flex-shrink:0; }
#services .card:hover .card__outcome .arrow{ transform:translateX(6px); }
.card__loader{ position:absolute; left:0; bottom:0; height:3px; width:100%; background:linear-gradient(90deg,var(--ga-primary),var(--ga-accent)); transform:scaleX(0); transform-origin:left; transition:transform .6s cubic-bezier(.22,1,.36,1); }
#services .card:hover .card__loader{ transform:scaleX(1); }
/* ---- Indice cliquable "Voir le détail" ---- */
#services .card[data-service]{ cursor:pointer; }
.card__more{ display:inline-flex; align-items:center; gap:7px; margin-top:16px; font-size:13px; font-weight:700; color:var(--ga-primary); opacity:.85; transition:opacity .35s ease, gap .35s ease; }
#services .card:hover .card__more{ opacity:1; gap:10px; }
.card__more-chevron{ display:inline-block; font-size:16px; line-height:1; transition:transform .45s cubic-bezier(.22,1,.36,1); }
#services .card.is-active .card__more-chevron{ transform:rotate(180deg); }
#services .card.is-active{ border-color:rgba(109,94,248,.55); box-shadow:0 24px 50px -22px rgba(109,94,248,.4); }
#services .card.is-active .card__loader{ transform:scaleX(1); }
/* ---- Panneau de détail qui se déplie ---- */
.svc-detail{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .65s cubic-bezier(.22,1,.36,1); margin-top:0; }
.svc-detail.open{ grid-template-rows:1fr; margin-top:30px; }
.svc-detail__inner{ overflow:hidden; min-height:0; }
.svc-panel{ position:relative; background:linear-gradient(180deg,#fff, #FAFBFF); border:1px solid rgba(109,94,248,.22); border-radius:24px; padding:clamp(26px,4vw,52px); box-shadow:0 30px 70px -34px rgba(109,94,248,.35); }
.svc-panel::before{ content:""; position:absolute; left:0; top:0; height:100%; width:4px; border-radius:24px 0 0 24px; background:linear-gradient(180deg,var(--ga-primary),var(--ga-accent)); }
/* Révélation en cascade du contenu */
.svc-panel__head, .svc-panel .svc-feature, .svc-panel__foot{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.svc-detail.open .svc-panel__head{ opacity:1; transform:none; transition-delay:.18s; }
.svc-detail.open .svc-panel .svc-feature:nth-child(1){ opacity:1; transform:none; transition-delay:.30s; }
.svc-detail.open .svc-panel .svc-feature:nth-child(2){ opacity:1; transform:none; transition-delay:.40s; }
.svc-detail.open .svc-panel .svc-feature:nth-child(3){ opacity:1; transform:none; transition-delay:.50s; }
.svc-detail.open .svc-panel__foot{ opacity:1; transform:none; transition-delay:.62s; }
.svc-panel__eyebrow{ font-size:12.5px; font-weight:700; letter-spacing:.4px; color:var(--ga-primary); margin:0 0 10px; }
.svc-panel__title{ font-size:clamp(24px,3vw,34px); font-weight:800; letter-spacing:-.5px; line-height:1.15; color:var(--ga-ink); margin:0 0 16px; }
.svc-panel__lead{ font-size:clamp(15px,1.5vw,17px); line-height:1.65; color:var(--ga-ink-soft); max-width:760px; margin:0; }
.svc-panel__lead strong{ color:var(--ga-ink); }
.svc-panel__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin:34px 0; }
@media (max-width:880px){ .svc-panel__grid{ grid-template-columns:1fr; gap:18px; } }
.svc-feature{ position:relative; background:#fff; border:1px solid var(--ga-line); border-radius:16px; padding:22px 22px 20px; transition:transform .4s ease, border-color .4s ease, box-shadow .4s ease; }
.svc-feature:hover{ transform:translateY(-4px); border-color:rgba(109,94,248,.4); box-shadow:0 18px 40px -24px rgba(109,94,248,.4); }
.svc-feature__num{ display:inline-block; font-size:13px; font-weight:800; letter-spacing:1px; color:var(--ga-primary); background:rgba(109,94,248,.10); border-radius:8px; padding:4px 9px; margin-bottom:14px; }
.svc-feature__title{ font-size:16.5px; font-weight:800; color:var(--ga-ink); margin:0 0 8px; }
.svc-feature__txt{ font-size:14px; line-height:1.6; color:var(--ga-ink-soft); margin:0; }
.svc-panel__foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; padding-top:24px; border-top:1px solid var(--ga-line); }
.svc-panel__outcome{ font-size:15px; font-weight:700; color:var(--ga-ink); margin:0; display:flex; gap:9px; align-items:flex-start; max-width:560px; }
.svc-panel__arrow{ color:var(--ga-primary); flex-shrink:0; }
.svc-panel__btn{ display:inline-flex; align-items:center; gap:9px; background:var(--ga-primary); color:#fff; font-size:14.5px; font-weight:700; text-decoration:none; padding:14px 24px; border-radius:999px; white-space:nowrap; transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, gap .35s ease; box-shadow:0 14px 30px -12px rgba(109,94,248,.6); }
.svc-panel__btn:hover{ transform:translateY(-2px); gap:13px; box-shadow:0 20px 40px -14px rgba(109,94,248,.7); }
/* Variante premium (Solution sécurisée) */
.svc-panel--premium{ background:linear-gradient(180deg,#0B1220,#0E1626); border-color:rgba(0,200,150,.28); box-shadow:0 30px 70px -34px rgba(0,200,150,.4); }
.svc-panel--premium::before{ background:linear-gradient(180deg,var(--ga-accent),#34E0AE); }
.svc-panel--premium .svc-panel__eyebrow{ color:var(--ga-accent); }
.svc-panel--premium .svc-panel__title{ color:#fff; }
.svc-panel--premium .svc-panel__lead{ color:rgba(255,255,255,.66); }
.svc-panel--premium .svc-panel__lead strong{ color:#fff; }
.svc-panel--premium .svc-feature{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.10); }
.svc-panel--premium .svc-feature:hover{ border-color:rgba(0,200,150,.45); box-shadow:0 18px 40px -24px rgba(0,200,150,.45); }
.svc-panel--premium .svc-feature__num{ color:var(--ga-accent); background:rgba(0,200,150,.14); }
.svc-panel--premium .svc-feature__title{ color:#fff; }
.svc-panel--premium .svc-feature__txt{ color:rgba(255,255,255,.6); }
.svc-panel--premium .svc-panel__foot{ border-top-color:rgba(255,255,255,.12); }
.svc-panel--premium .svc-panel__outcome{ color:#fff; }
.svc-panel--premium .svc-panel__arrow{ color:var(--ga-accent); }
.svc-panel--premium .svc-panel__btn{ background:var(--ga-accent); color:#04221A; box-shadow:0 14px 30px -12px rgba(0,200,150,.6); }
.svc-panel--premium .svc-panel__btn:hover{ box-shadow:0 20px 40px -14px rgba(0,200,150,.7); }
@media (prefers-reduced-motion: reduce){
.svc-detail{ transition:none; }
.svc-panel__head, .svc-panel .svc-feature, .svc-panel__foot{ transition:none; }
}
/* DÉMO 1 — CONFIGURATION */
.cfg{ position:absolute; inset:0; padding:22px 24px; display:flex; flex-direction:column; gap:13px; justify-content:center; }
.cfg__row{ display:flex; align-items:center; gap:12px; }
.cfg__label{ height:7px; border-radius:4px; background:#DDE3F0; flex-grow:1; }
.cfg__label.s{ max-width:60%; }
.cfg__label.m{ max-width:78%; }
.cfg__toggle{ width:34px; height:19px; border-radius:999px; background:#D4DAEA; position:relative; flex-shrink:0; }
.cfg__toggle::after{ content:""; position:absolute; top:2.5px; left:2.5px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.cfg__toggle.t1{ animation:srv-toggleOn 6s ease-in-out infinite; }
.cfg__toggle.t2{ animation:srv-toggleOn 6s ease-in-out infinite 1s; }
.cfg__toggle.t3{ animation:srv-toggleOn 6s ease-in-out infinite 2s; }
@keyframes srv-toggleOn{ 0%,8%{ background:#D4DAEA; } 16%,75%{ background:var(--ga-accent); } 83%,100%{ background:#D4DAEA; } }
.cfg__toggle.t1::after{ animation:srv-toggleSlide 6s ease-in-out infinite; }
.cfg__toggle.t2::after{ animation:srv-toggleSlide 6s ease-in-out infinite 1s; }
.cfg__toggle.t3::after{ animation:srv-toggleSlide 6s ease-in-out infinite 2s; }
@keyframes srv-toggleSlide{ 0%,8%{ transform:translateX(0); } 16%,75%{ transform:translateX(15px); } 83%,100%{ transform:translateX(0); } }
/* DÉMO 2 — FORMATION */
.frm{ position:absolute; inset:0; padding:22px 24px; display:flex; flex-direction:column; gap:14px; justify-content:center; }
.frm__bars{ display:flex; align-items:flex-end; gap:7px; height:58px; padding:0 2px; }
.frm__bar{ flex:1; min-height:10px; border-radius:5px 5px 0 0; background:linear-gradient(180deg,#9C90FF,var(--ga-primary)); transform-origin:bottom; box-shadow:0 2px 6px rgba(109,94,248,.18); }
.frm__bar.b1{ animation:srv-barGrow 4.5s ease-in-out infinite; }
.frm__bar.b2{ animation:srv-barGrow 4.5s ease-in-out infinite .25s; }
.frm__bar.b3{ animation:srv-barGrow 4.5s ease-in-out infinite .5s; }
.frm__bar.b4{ animation:srv-barGrow 4.5s ease-in-out infinite .75s; }
.frm__bar.b5{ animation:srv-barGrow 4.5s ease-in-out infinite 1s; }
@keyframes srv-barGrow{ 0%{ transform:scaleY(.4); } 50%{ transform:scaleY(1); } 100%{ transform:scaleY(.4); } }
.frm__track{ position:relative; height:8px; border-radius:999px; background:#E4E8F3; overflow:hidden; }
.frm__fill{ height:100%; border-radius:999px; background:linear-gradient(90deg,var(--ga-primary),var(--ga-accent)); width:0; animation:srv-fillProgress 4.5s ease-in-out infinite; }
@keyframes srv-fillProgress{ 0%{ width:8%; } 55%{ width:100%; } 100%{ width:8%; } }
/* DÉMO 3 — INTÉGRATION */
.itg{ position:absolute; inset:0; }
.itg svg{ width:100%; height:100%; }
.itg__link{ stroke:#D4DAEA; stroke-width:2; fill:none; }
.itg__flow{ stroke:var(--ga-primary); stroke-width:2.5; fill:none; stroke-dasharray:10 90; stroke-linecap:round; animation:srv-flowMove 2.4s linear infinite; }
.itg__flow.f2{ stroke:var(--ga-accent); animation-delay:.8s; }
.itg__flow.f3{ stroke:var(--ga-amber); animation-delay:1.6s; }
@keyframes srv-flowMove{ to{ stroke-dashoffset:-100; } }
.itg__node{ fill:#fff; stroke:#D4DAEA; stroke-width:2; }
.itg__hub{ fill:var(--ga-primary); animation:srv-hubPulse 2.4s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
@keyframes srv-hubPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } }
.itg__node-dot{ fill:var(--ga-ink-soft); }
/* DÉMO 4 — SÉCURISÉE */
.sec{ position:absolute; inset:0; display:grid; place-items:center; }
.sec svg{ width:100px; height:100px; overflow:visible; }
.sec__shield{ fill:rgba(0,200,150,.12); stroke:var(--ga-accent); stroke-width:2.5; animation:srv-shieldGlow 3.5s ease-in-out infinite; }
@keyframes srv-shieldGlow{ 0%,100%{ filter:drop-shadow(0 0 0 rgba(0,200,150,0)); } 50%{ filter:drop-shadow(0 0 10px rgba(0,200,150,.5)); } }
.sec__check{ fill:none; stroke:var(--ga-accent); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:26; stroke-dashoffset:26; animation:srv-checkDraw 3.5s ease-in-out infinite; }
@keyframes srv-checkDraw{ 0%,30%{ stroke-dashoffset:26; } 45%,85%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:26; } }
.sec__bit{ fill:var(--ga-accent); opacity:0; }
.sec__bit.d1{ animation:srv-bitRise 3.5s ease-in-out infinite; }
.sec__bit.d2{ animation:srv-bitRise 3.5s ease-in-out infinite .5s; }
.sec__bit.d3{ animation:srv-bitRise 3.5s ease-in-out infinite 1s; }
@keyframes srv-bitRise{ 0%{ opacity:0; transform:translateY(8px); } 40%{ opacity:.8; } 100%{ opacity:0; transform:translateY(-14px); } }
/* PREMIUM */
#services .card--premium{ background:var(--ga-premium); border-color:rgba(255,255,255,.08); }
#services .card--premium .card__stage{ background:linear-gradient(180deg, rgba(0,200,150,.10), rgba(0,200,150,0)); border-bottom-color:rgba(255,255,255,.08); }
#services .card--premium .card__tag{ color:var(--ga-accent); }
#services .card--premium .card__name{ color:#fff; }
#services .card--premium .card__desc{ color:rgba(255,255,255,.62); }
#services .card--premium .card__divider{ background:rgba(255,255,255,.10); }
#services .card--premium:hover .card__divider{ background:rgba(0,200,150,.4); }
#services .card--premium .card__outcome{ color:#fff; }
#services .card--premium .card__outcome .arrow{ color:var(--ga-accent); }
#services .card--premium .card__loader{ background:linear-gradient(90deg,var(--ga-accent),#34E0AE); }
#services .card--premium:hover{ border-color:rgba(0,200,150,.55); box-shadow:0 28px 60px -20px rgba(0,200,150,.32); }
.card__badge{ position:absolute; top:16px; right:16px; z-index:3; background:var(--ga-primary); color:#fff; font-size:11px; font-weight:800; letter-spacing:1.2px; padding:6px 12px; border-radius:999px; }
@media (prefers-reduced-motion: reduce){
.cfg__toggle, .cfg__toggle::after, .frm__bar, .frm__fill,
.itg__flow, .itg__hub, .sec__shield, .sec__check, .sec__bit{ animation:none !important; }
#services .card{ opacity:1 !important; transform:none !important; transition:box-shadow .3s ease, border-color .3s ease; }
#services .card:hover{ transform:none; }
.cfg__toggle{ background:var(--ga-accent); } .cfg__toggle::after{ transform:translateX(15px); }
.frm__fill{ width:80%; } .sec__check{ stroke-dashoffset:0; }
}
/* ---------- next block ---------- */
.clients-marquee{
position: relative;
padding: 24px 24px 80px;
background: transparent;
}
.clients-marquee__inner{
max-width: 1280px;
margin: 0 auto;
}
.clients-marquee__label{
text-align: center;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: #6D5EF8;
margin: 0 0 22px;
}
.clients-marquee__band{
position: relative;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.clients-marquee__track{
display: flex;
align-items: center;
width: max-content;
animation: clients-marquee-scroll 42s linear infinite;
will-change: transform;
}
.clients-marquee__track:hover{ animation-play-state: paused; }
.clients-marquee__slide{
display: block;
height: clamp(120px, 14vh, 160px);
width: auto;
aspect-ratio: 5.01 / 1;
flex-shrink: 0;
user-select: none;
}
@keyframes clients-marquee-scroll{
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
.clients-marquee__track{ animation: none; }
}
@media (max-width: 640px){
.clients-marquee{ padding: 8px 12px 56px; }
.clients-marquee__label{ font-size: 11px; letter-spacing: 2px; }
.clients-marquee__slide{ height: 88px; }
}
/* ============ BOUTON FLOTTANT — RÉSERVATION CAL.COM ============ */
#booking-widget{
--bw-primary:#0D52E0; --bw-primary-2:#1561ff;
position:fixed; right:24px; bottom:24px; z-index:9999; font-family:inherit;
}
.bw-fab{
position:relative; width:64px; height:64px; border:none; border-radius:50%; cursor:pointer;
background:radial-gradient(120% 120% at 30% 25%, var(--bw-primary-2), var(--bw-primary));
color:#fff; display:grid; place-items:center; padding:0;
box-shadow:0 14px 34px -8px rgba(13,82,224,.7), 0 0 0 0 rgba(13,82,224,.5);
transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
animation:bw-pulse 2.6s ease-out infinite;
}
.bw-fab:hover{ transform:scale(1.06); }
.bw-fab svg{ width:26px; height:26px; }
@keyframes bw-pulse{
0%{ box-shadow:0 14px 34px -8px rgba(13,82,224,.7), 0 0 0 0 rgba(13,82,224,.45); }
70%{ box-shadow:0 14px 34px -8px rgba(13,82,224,.7), 0 0 0 18px rgba(13,82,224,0); }
100%{ box-shadow:0 14px 34px -8px rgba(13,82,224,.7), 0 0 0 0 rgba(13,82,224,0); }
}
@media (max-width:480px){
#booking-widget{ right:16px; bottom:16px; }
.bw-fab{ width:58px; height:58px; }
}
@media (prefers-reduced-motion: reduce){ .bw-fab{ animation:none; } }
/* =========================================================
CAS D'USAGE INTERACTIFS (démos) — ajout
========================================================= */
.usecases-sec{padding:74px 0;background:var(--bg)}
.ix-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.ix-head{text-align:center;max-width:780px;margin:0 auto 40px}
.ix-eyebrow{font-size:13px;font-weight:800;letter-spacing:3px;color:var(--blue);margin:0 0 14px}
.ix-title{font-size:clamp(26px,3.6vw,42px);line-height:1.12;font-weight:800;letter-spacing:-.6px;color:var(--ink);margin:0 0 16px}
.ix-sub{font-size:clamp(15px,1.5vw,18px);line-height:1.6;color:var(--muted);margin:0}
.ix-sub b{color:var(--ink);font-weight:700}
.ix{display:grid;grid-template-columns:262px 1fr;gap:20px;align-items:start}
.ix-tabs{display:flex;flex-direction:column;gap:9px}
.ix-tab{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:12px 14px;cursor:pointer;transition:.18s;font-family:inherit;position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(10,10,10,.03)}
.ix-tab::before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:var(--blue);opacity:0;transition:.18s}
.ix-tab:hover{border-color:rgba(10,10,10,.16);transform:translateX(2px)}
.ix-tab.active{border-color:rgba(21,97,255,.4);background:linear-gradient(100deg,rgba(21,97,255,.07),transparent 72%),var(--surface)}
.ix-tab.active::before{opacity:1}
.ix-tab:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ix-tab .ic{flex:0 0 auto;width:38px;height:38px;border-radius:11px;background:rgba(21,97,255,.10);border:1px solid rgba(21,97,255,.18);color:var(--blue);display:flex;align-items:center;justify-content:center}
.ix-tab .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ix-tab .tt{display:flex;flex-direction:column;min-width:0}
.ix-tab .tt b{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.15}
.ix-tab .tt span{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2);margin-top:2px}
.ix-tab.active .tt span{color:var(--blue)}
.ix-stage{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 1px 2px rgba(10,10,10,.04),0 22px 50px -30px rgba(10,10,10,.28);overflow:hidden;min-height:404px}
.ix-demo{display:none;padding:24px}
.ix-demo.active{display:block;animation:ixfade .4s ease}
.ix-demo.ix-reset,.ix-demo.ix-reset *,.ix-demo.ix-reset *::before,.ix-demo.ix-reset *::after{transition:none!important;animation:none!important}
@keyframes ixfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ix-demo__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.ix-demo__head .t .k{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin:0 0 6px}
.ix-demo__head .t h3{font-size:21px;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin:0 0 5px}
.ix-demo__head .t p{font-size:13.5px;color:var(--muted);margin:0;max-width:50ch}
.ix-run{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:13px;font-weight:700;color:#fff;background:var(--blue);border:1px solid transparent;border-radius:11px;padding:10px 16px;cursor:pointer;transition:.18s;box-shadow:0 8px 20px -12px rgba(21,97,255,.8)}
.ix-run:hover{background:var(--blue-2);transform:translateY(-1px)}
.ix-run:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ix-run svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ix-screen{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:14px}
.ix-screen .bar{display:flex;align-items:center;gap:6px;margin-bottom:12px}
.ix-screen .bar i{width:9px;height:9px;border-radius:50%;background:rgba(10,10,10,.16);display:block}
.ix-screen .bar span{margin-left:8px;font-size:11px;color:var(--muted-2);font-weight:600}
.ix-rows .ix-row{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:var(--surface);margin-bottom:8px;position:relative;overflow:hidden}
.ix-rows .ix-row:last-child{margin-bottom:0}
.ix-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .3s ease var(--d,0s)}
.ix-demo.run .ix-row::before{transform:scaleX(1)}
.ix-row .cell-main{display:flex;flex-direction:column;min-width:0}
.ix-row .cell-main b{font-size:13px;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ix-row .cell-main small{font-size:11px;color:var(--muted-2)}
.ix-row .amt{font-variant-numeric:tabular-nums;font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.ix-statewrap{margin-left:auto;position:relative;min-width:158px;height:26px;display:flex;align-items:center;justify-content:flex-end}
.ix-statewrap .s-before,.ix-statewrap .s-after{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:999px;white-space:nowrap}
.ix-statewrap .s-before{background:#fff1e2;color:#b45309;opacity:1;transition:opacity .25s ease var(--d,0s)}
.ix-statewrap .s-after{position:absolute;right:0;background:#e7f7ee;color:#15803d;opacity:0;transform:translateY(6px);transition:opacity .35s ease var(--d,0s),transform .35s ease var(--d,0s)}
.ix-demo.run .ix-statewrap .s-before{opacity:0}
.ix-demo.run .ix-statewrap .s-after{opacity:1;transform:none}
.ix-rows .ix-row:nth-child(1){--d:.12s}
.ix-rows .ix-row:nth-child(2){--d:.26s}
.ix-rows .ix-row:nth-child(3){--d:.40s}
.ix-rows .ix-row:nth-child(4){--d:.54s}
.chat{display:flex;flex-direction:column;gap:12px;min-height:150px}
.chat .msg{max-width:88%;padding:11px 14px;border-radius:14px;font-size:13.5px;line-height:1.5}
.chat .msg.user{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:5px}
.chat .msg.ai{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--ink);min-width:170px;opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}
.ix-demo.run .chat .msg.ai{opacity:1;transform:none}
.chat .typing{display:inline-flex;gap:5px;padding:4px 0;opacity:0}
.ix-demo.run .chat .typing{animation:ixtype 1.05s ease forwards}
.chat .typing i{width:6px;height:6px;border-radius:50%;background:var(--muted-2)}
.ix-demo.run .chat .typing i{animation:ixblink 1s infinite}
.ix-demo.run .chat .typing i:nth-child(2){animation-delay:.16s}
.ix-demo.run .chat .typing i:nth-child(3){animation-delay:.32s}
.chat .ai-answer{opacity:0;transition:opacity .45s ease}
.ix-demo.run .chat .ai-answer{opacity:1;transition:opacity .5s ease .95s}
.chat .ai-answer b{color:var(--blue-2);font-weight:700}
.chat .sources{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.chat .sources span{font-size:10.5px;font-weight:700;color:var(--blue);background:rgba(21,97,255,.09);border:1px solid rgba(21,97,255,.2);padding:3px 8px;border-radius:6px;opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .3s ease}
.ix-demo.run .chat .sources span{opacity:1;transform:none}
.ix-demo.run .chat .sources span:nth-child(1){transition-delay:1.25s}
.ix-demo.run .chat .sources span:nth-child(2){transition-delay:1.4s}
.ix-demo.run .chat .sources span:nth-child(3){transition-delay:1.55s}
@keyframes ixtype{0%{opacity:0}12%{opacity:1}80%{opacity:1}100%{opacity:0}}
@keyframes ixblink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.ix-result{margin-top:12px;padding:10px 13px;border-radius:11px;background:#e7f7ee;border:1px solid rgba(21,128,61,.22);font-size:12.5px;font-weight:700;color:#15803d;opacity:0;transform:translateY(6px);transition:opacity .4s ease .95s,transform .4s ease .95s}
.ix-demo.run .ix-result{opacity:1;transform:none}
.ix-gain{margin-top:16px;font-size:13px;font-weight:700;color:var(--blue);display:flex;align-items:center;gap:8px}
.ix-gain span{font-weight:800}
@media(max-width:900px){
.ix{grid-template-columns:1fr}
.ix-tabs{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:6px}
.ix-tab{flex:0 0 auto;min-width:186px}
}
@media(max-width:560px){
.usecases-sec{padding:52px 0}
.ix-demo{padding:18px}
.ix-demo__head{flex-direction:column}
.ix-row{flex-wrap:wrap}
.ix-statewrap{min-width:120px}
}
/* ---------- FAQ ---------- */
.faq-sec{ padding: 104px 24px 96px; }
.faq-wrap{ max-width: 880px; }
.faq-sec .section-title{ margin-top: 18px; }
.faq-lead-link{ color: var(--blue); font-weight:600; text-decoration: underline; text-underline-offset: 3px; }
.faq-lead-link:hover{ color: var(--indigo); }
.faq-list{
margin-top: 52px;
display:flex; flex-direction: column;
gap: 14px;
}
.faq-item{
background: var(--surface);
border: 1px solid var(--line);
border-radius: 18px;
padding: 0 26px;
transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.faq-item:hover{ border-color: rgba(21,97,255,0.28); }
.faq-item[open]{
border-color: rgba(21,97,255,0.40);
box-shadow: 0 10px 34px -14px rgba(21,97,255,0.28);
}
.faq-q{
list-style: none;
cursor: pointer;
display:flex; align-items:center; justify-content: space-between; gap: 20px;
padding: 24px 0;
font-size: clamp(16px, 1.35vw, 19px);
font-weight: 600;
letter-spacing: -0.015em;
color: var(--ink);
outline: none;
}
.faq-q::-webkit-details-marker{ display:none; }
.faq-item[open] .faq-q{ color: var(--blue); }
.faq-q:focus-visible{ border-radius: 10px; box-shadow: 0 0 0 3px rgba(21,97,255,0.35); }
/* Icône +/− dessinée en CSS */
.faq-ico{
position: relative;
flex: 0 0 22px; width: 22px; height: 22px;
border-radius: 50%;
background: rgba(21,97,255,0.10);
transition: background .25s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.faq-ico::before, .faq-ico::after{
content:""; position:absolute; top:50%; left:50%;
width: 10px; height: 2px; border-radius: 2px;
background: var(--blue);
transform: translate(-50%,-50%);
transition: opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.faq-ico::after{ transform: translate(-50%,-50%) rotate(90deg); }
.faq-item[open] .faq-ico{ background: rgba(21,97,255,0.16); transform: rotate(180deg); }
.faq-item[open] .faq-ico::after{ opacity: 0; }
.faq-a{
padding: 0 0 26px;
max-width: 720px;
}
.faq-a p{
margin: 0;
font-size: clamp(15px, 1.15vw, 17px);
line-height: 1.62;
color: var(--muted);
font-weight: 400;
}
.faq-a p + p{ margin-top: 12px; }
.faq-a strong{ color: var(--ink-2); font-weight: 600; }
.faq-item[open] .faq-a{ animation: faqSlide .3s cubic-bezier(.2,.7,.2,1); }
@keyframes faqSlide{ from{ opacity:0; transform: translateY(-6px); } to{ opacity:1; transform: none; } }
@media (prefers-reduced-motion: reduce){
.faq-item[open] .faq-a{ animation: none; }
.faq-ico, .faq-ico::before, .faq-ico::after{ transition: none; }
}
/* Bandeau CTA sous la FAQ */
.faq-cta{
margin-top: 44px;
display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
gap: 10px 20px;
text-align:center;
}
.faq-cta > span{ color: var(--muted); font-size: 16px; }
.faq-cta-btn{
display:inline-flex; align-items:center; gap:8px;
background: var(--blue);
color:#fff; font-weight:600; font-size:15px;
padding: 13px 24px; border-radius: 999px;
transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
box-shadow: 0 8px 22px -10px rgba(21,97,255,0.6);
}
.faq-cta-btn:hover{ background: var(--indigo); transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(67,56,255,0.6); }
@media(max-width:640px){
.faq-sec{ padding: 72px 18px 68px; }
.faq-list{ margin-top: 38px; }
.faq-item{ padding: 0 20px; border-radius: 16px; }
.faq-q{ padding: 20px 0; }
}