/* ==========================================================================
   Pages services gyza (site-web, automatisation, digitalisation,
   marketing-digital). Mêmes couleurs, polices, menu et pied de page que
   index.html. Le contenu de chaque page vit dans son propre fichier HTML.
   ========================================================================== */
:root{
  --ink:#07080d; --paper:#F5F4EF;
  --blue:#2340F0; --blue-2:#5C74FF; --lav:#9DA8F5;
  --white:#EDEDF2; --mid:#8A8896; --hair:rgba(255,255,255,.12);
  --orange:#E04400; --orange-2:#F06A20; --burnt:#361202; --burnt-2:#2b0d03;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--white);font-family:'Figtree',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
canvas{display:block}
.mono{font-family:'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
.dot{color:var(--blue-2)}

/* ============ NAV (identique à l'accueil) ============ */
header{position:fixed;top:18px;left:0;right:0;z-index:60;display:flex;justify-content:center;pointer-events:none}
.nav{position:relative;pointer-events:auto;display:flex;align-items:center;gap:26px;background:rgba(7,8,13,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--hair);border-radius:999px;padding:9px 12px 9px 20px}
.nav-logo{display:flex;align-items:center;gap:9px}
.nav-logo svg{display:block}
.nav-logo b{font:800 20px/1 'Archivo',sans-serif;letter-spacing:-.03em}
.nav-links{display:flex;gap:20px}
.nav-links a{font:500 13.5px 'Figtree',sans-serif;color:rgba(237,237,242,.72)}
.nav-links a:hover{color:#fff}
.nav-cta{background:var(--blue);color:#fff;border-radius:999px;padding:9px 18px;font:700 13.5px 'Figtree',sans-serif;transition:background .15s}
.nav-cta:hover{background:#1B32C8}
.burger{display:none;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:20px;height:2px;background:#fff;border-radius:2px}
.lang{display:flex;align-items:center;gap:2px;border:1px solid var(--hair);border-radius:999px;padding:3px}
.lang-btn{border:0;cursor:pointer;background:transparent;color:rgba(237,237,242,.65);border-radius:999px;padding:5px 9px;font:700 11.5px 'Figtree',sans-serif}
.lang-btn:hover{color:#fff}
.lang-btn.active{background:var(--blue);color:#fff}

/* Réseaux sociaux : pulsation bleue permanente */
.soc{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:rgba(237,237,242,.72);border:1px solid rgba(92,116,255,.5);animation:socRing 1.8s ease-in-out infinite;transition:color .2s}
.soc svg{color:#7D90FF;animation:socGlow 1.8s ease-in-out infinite}
.soc:hover,.soc:hover svg{color:#fff}
.soc + .soc svg,.soc + .soc{animation-delay:.9s}
@keyframes socGlow{0%,100%{transform:scale(1);filter:drop-shadow(0 0 2px rgba(92,116,255,.7)) drop-shadow(0 0 5px rgba(35,64,240,.4))}50%{transform:scale(1.12);filter:drop-shadow(0 0 6px rgba(140,158,255,1)) drop-shadow(0 0 18px rgba(35,64,240,1))}}
@keyframes socRing{0%,100%{box-shadow:0 0 6px rgba(35,64,240,.25),inset 0 0 4px rgba(35,64,240,.15)}50%{box-shadow:0 0 22px rgba(60,90,255,.85),inset 0 0 12px rgba(35,64,240,.45)}}
.nav-social{display:flex;gap:6px}
.nav-social .soc{width:34px;height:34px;border-radius:50%}
.nav-social-m{display:none}
.foot-social{display:flex;gap:10px;margin-top:18px}
.foot-social .soc{height:38px;padding:0 14px;border-radius:999px;font:500 13.5px 'Figtree',sans-serif}

/* ============ HERO du service (zone brun-orangé + cercles) ============ */
.sv-hero{position:relative;overflow:hidden;min-height:88svh;display:flex;align-items:center;padding:150px 24px clamp(70px,9vw,120px);background:linear-gradient(180deg,#07080d 0%,#2b0d03 58%,#6a2a0a 100%)}
#gz-rings{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* Au bout d'une seconde, le hero passe de l'orange au bleu gyza (fondu). */
.sv-hero::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#07080d 0%,#0b1440 55%,#1a2c93 100%);opacity:0;transition:opacity 1.6s ease}
.sv-hero.blue::before{opacity:1}
.sv-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;background:linear-gradient(180deg,rgba(7,8,13,0),var(--ink));pointer-events:none}
.sv-hero-in{position:relative;z-index:1;width:100%;max-width:1200px;margin:0 auto}
.sv-crumb{display:flex;align-items:center;gap:10px;font-size:11px;color:rgba(237,237,242,.55)}
.sv-crumb a:hover{color:#fff}
.sv-crumb i{font-style:normal;color:var(--orange-2);transition:color 1.6s}
.sv-hero.blue .sv-crumb i{color:var(--lav)}
.sv-word{margin:18px 0 0;font:400 clamp(58px,13vw,190px)/.88 'Anton',sans-serif;letter-spacing:.01em;text-transform:uppercase;color:#fff}
.sv-word .dot{color:var(--orange-2);transition:color 1.6s}
.sv-hero.blue .sv-word .dot{color:var(--blue-2)}
.sv-lead{margin:26px 0 0;max-width:640px;font:400 clamp(17px,1.6vw,20px)/1.55 'Figtree',sans-serif;color:rgba(237,237,242,.78)}
.sv-actions{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:15px 26px;font:700 15px 'Figtree',sans-serif;transition:background .15s,border-color .15s,color .15s}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 14px 34px rgba(35,64,240,.35)}
.btn-blue:hover{background:#1B32C8}
.btn-ghost{border:1px solid rgba(255,255,255,.28);color:#fff}
.btn-ghost:hover{border-color:var(--orange-2);color:var(--orange-2)}

/* ============ Titres de section ============ */
.sec{position:relative;z-index:1;padding:clamp(70px,9vw,130px) 24px}
.sec-in{max-width:1180px;margin:0 auto}
.eyebrow{display:flex;align-items:center;gap:14px;font-size:11px;color:var(--lav);margin:0 0 16px}
/* Petits sur-titres : même police que les textes, sans trait devant */
.eyebrow,.eyebrow.mono{font:600 15px/1.3 'Figtree',sans-serif;letter-spacing:0;text-transform:none}
.sec h2{margin:0;font:900 clamp(30px,4.4vw,58px)/1.04 'Archivo',sans-serif;letter-spacing:-.035em;max-width:18ch}
.sec-sub{margin:18px 0 0;max-width:620px;font:400 17px/1.6 'Figtree',sans-serif;color:rgba(237,237,242,.66)}

/* ============ Ce que je fais : cartes ============ */
.sv-do{background:var(--ink)}
.do-grid{margin-top:clamp(34px,4vw,56px);display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.do-card{position:relative;background:rgba(255,255,255,.035);border:1px solid var(--hair);border-radius:20px;padding:28px 26px 30px;transition:border-color .25s,transform .25s,background .25s}
.do-card:hover{border-color:rgba(92,116,255,.55);background:rgba(35,64,240,.08);transform:translateY(-4px)}
.do-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(35,64,240,.16);color:var(--blue-2);margin-bottom:20px}
.do-card h3{margin:0;font:800 19px/1.25 'Archivo',sans-serif;letter-spacing:-.01em;color:#fff}
.do-card p{margin:10px 0 0;font:400 15.5px/1.6 'Figtree',sans-serif;color:rgba(237,237,242,.66)}

/* ============ Méthode : 4 étapes reliées (points connectés gyza) ============ */
.sv-method{background:radial-gradient(90% 70% at 50% 40%,#0d1330 0%,#07080d 72%)}
.steps{margin-top:clamp(40px,5vw,70px);display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative}
.steps::before{content:"";position:absolute;left:12%;right:12%;top:27px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--blue-2));opacity:.55;transform-origin:left;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
.steps.in::before{transform:scaleX(1)}
.step{position:relative;text-align:center;padding:0 6px}
.step-dot{position:relative;z-index:1;width:56px;height:56px;margin:0 auto 22px;border-radius:50%;background:var(--blue);display:grid;place-items:center;font:800 18px 'Archivo',sans-serif;color:#fff;box-shadow:0 0 0 8px rgba(35,64,240,.14),0 12px 30px rgba(35,64,240,.4)}
.step h3{margin:0;font:800 19px/1.25 'Archivo',sans-serif;color:#fff}
.step p{margin:10px 0 0;font:400 15px/1.6 'Figtree',sans-serif;color:rgba(237,237,242,.64)}

/* ============ Exemples réels ============ */
.sv-cases{background:linear-gradient(180deg,#07080d 0%,#2b0d03 45%,#6a2a0a 100%)}
.sv-cases .eyebrow{color:var(--orange-2)}
.sv-cases h2 .dot{color:var(--orange-2)}
.cases{margin-top:clamp(34px,4vw,56px);display:flex;flex-direction:column;gap:22px}
.case{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(22px,3vw,44px);align-items:center;background:rgba(7,8,13,.55);border:1px solid rgba(255,255,255,.13);border-radius:24px;padding:clamp(18px,2.4vw,28px);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.case.no-media{grid-template-columns:1fr}
.case-media{border-radius:16px;overflow:hidden;background:#0c0e18;border:1px solid var(--hair)}
.case-chrome{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--hair);background:rgba(255,255,255,.03)}
.case-chrome span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.case-chrome em{margin-left:8px;font:500 11px 'IBM Plex Mono',monospace;font-style:normal;color:rgba(237,237,242,.5)}
.case-media video{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.case-body{padding:6px clamp(4px,1vw,14px)}
.case-tag{display:inline-block;font-size:10.5px;color:var(--orange-2);border:1px solid rgba(240,106,32,.45);border-radius:999px;padding:5px 11px}
.case h3{margin:14px 0 0;font:900 clamp(22px,2.4vw,30px)/1.1 'Archivo',sans-serif;letter-spacing:-.02em;color:#fff}
.case p{margin:12px 0 0;font:400 16px/1.6 'Figtree',sans-serif;color:rgba(237,237,242,.72)}
.case ul{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.case li{position:relative;padding-left:24px;font:400 15.5px/1.5 'Figtree',sans-serif;color:rgba(237,237,242,.85)}
.case li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:50%;background:var(--orange-2);box-shadow:0 0 10px rgba(240,106,32,.7)}

/* ============ FAQ (fond papier, comme l'accueil) ============ */
.faq{position:relative;z-index:2;padding:clamp(60px,8vw,120px) 24px;background:var(--paper);color:var(--ink)}
.faq-inner{max-width:860px;margin:0 auto}
.faq .eyebrow{color:var(--blue)}
.faq h2{margin:0 0 30px;font:900 clamp(28px,3.8vw,48px)/1.06 'Archivo',sans-serif;letter-spacing:-.03em}
.faq-item{border-top:1px solid rgba(7,8,13,.14)}
.faq-item:last-child{border-bottom:1px solid rgba(7,8,13,.14)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;background:none;border:0;cursor:pointer;padding:22px 2px;text-align:left;color:var(--ink)}
.faq-q span:first-child{font:800 18px 'Archivo',sans-serif;letter-spacing:-.01em}
.faq-sign{flex:none;font:800 22px/1 'Archivo',sans-serif;color:var(--blue);transition:transform .2s}
.faq-q[aria-expanded="true"] .faq-sign{transform:rotate(45deg)}
.faq-a{margin:0;padding:0 40px 24px 2px;font:400 16px/1.65 'Figtree',sans-serif;color:rgba(7,8,13,.66)}
.faq-a[hidden]{display:none}

/* ============ Appel à l'action + autres services ============ */
.sv-cta{position:relative;overflow:hidden;padding:clamp(70px,9vw,130px) 24px;background:radial-gradient(90% 65% at 50% 32%,#0d1330 0%,#07080d 72%)}
.cta-card{position:relative;max-width:1000px;margin:0 auto;text-align:center;background:rgba(12,14,28,.55);border:1px solid rgba(255,255,255,.13);border-radius:26px;padding:clamp(40px,6vw,76px) clamp(24px,5vw,64px);box-shadow:0 44px 110px rgba(0,0,0,.5)}
.cta-card h2{margin:0 auto;max-width:20ch;font:900 clamp(28px,3.8vw,48px)/1.06 'Archivo',sans-serif;letter-spacing:-.03em}
.cta-card p{margin:18px auto 0;max-width:560px;font:400 17px/1.6 'Figtree',sans-serif;color:rgba(237,237,242,.7)}
.cta-card .sv-actions{justify-content:center}
/* Autres services : grands mots empilés, alternés gauche / droite, comme la
   section services de l'accueil. Blanc, et bleu au survol. */
.others{max-width:1200px;margin:clamp(60px,7vw,110px) auto 0}
.others-grid{display:flex;flex-direction:column;gap:clamp(10px,2vw,26px)}
.other{display:flex;align-items:baseline;gap:clamp(14px,2vw,28px);width:fit-content;max-width:100%;color:#fff}
.other:nth-child(even){align-self:flex-end;text-align:right}
.other b{font:400 clamp(32px,5.6vw,80px)/.95 'Anton',sans-serif;text-transform:uppercase;letter-spacing:.01em;transition:color .25s}
.other b .dot{color:#fff;transition:color .25s}
.other .arr{flex:none;color:#fff;font:600 15px 'Figtree',sans-serif;white-space:nowrap;transition:transform .25s,color .25s}
.other:hover b{color:var(--blue-2)}
.other:hover b .dot{color:var(--blue-2)}
.other:hover .arr{color:var(--blue-2)}
.other:hover .arr{transform:translateX(6px)}

/* ============ FOOTER ============ */
footer{position:relative;z-index:2;background:#050609;border-top:1px solid var(--hair);padding:clamp(50px,6vw,80px) 24px 36px}
.foot{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px}
.foot-brand b{font:800 22px 'Archivo',sans-serif;letter-spacing:-.03em}
.foot-brand p{margin:12px 0 0;color:rgba(237,237,242,.6);font-size:14px}
.foot-cols{display:flex;gap:clamp(30px,5vw,70px);flex-wrap:wrap}
.foot-nav{display:flex;flex-direction:column;gap:9px;font-size:14px;color:rgba(237,237,242,.7)}
.foot-nav a:hover{color:#fff}
.foot-nav .t{font-size:11px;color:var(--mid);margin-bottom:4px}
.foot-bottom{max-width:1180px;margin:40px auto 0;padding-top:22px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--mid)}
.foot-copy{color:var(--blue-2)}

/* ============ Apparition au scroll ============ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
.do-card.reveal:nth-child(3n+2),.step.reveal:nth-child(2){transition-delay:.1s}
.do-card.reveal:nth-child(3n+3),.step.reveal:nth-child(3){transition-delay:.2s}
.step.reveal:nth-child(4){transition-delay:.3s}

/* ============ RESPONSIVE ============ */
@media(max-width:960px){
  .do-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr;row-gap:40px}
  .steps::before{display:none}
  .case{grid-template-columns:1fr}
}
@media(max-width:860px){
  .nav{gap:12px;padding:8px 10px 8px 16px}
  .nav-links{position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;gap:2px;background:rgba(7,8,13,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--hair);border-radius:18px;padding:8px;box-shadow:0 30px 70px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .22s ease,transform .22s ease,visibility .22s}
  .nav-links.open{opacity:1;visibility:visible;transform:none}
  .nav-links a{padding:13px 14px;border-radius:12px;font:500 15px 'Figtree',sans-serif;color:rgba(237,237,242,.9)}
  .burger{display:flex}
  .burger span{transition:transform .22s ease,opacity .18s ease}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .nav > .nav-social{display:none}
  .nav-social-m{display:flex;gap:10px;padding:10px 14px 6px;border-top:1px solid var(--hair);margin-top:4px}
  .nav-social-m .soc{width:40px;height:40px;border-radius:50%}
}
@media(max-width:600px){
  .other,.other:nth-child(even){align-self:flex-start;flex-direction:column;gap:4px;text-align:left}
  .do-grid,.steps{grid-template-columns:1fr}
  .step{text-align:left;display:grid;grid-template-columns:56px 1fr;column-gap:18px}
  .step-dot{margin:0;grid-row:span 2}
  .step p{grid-column:2}
}
@media(max-width:560px){
  .nav{gap:10px}
  .nav-cta{display:none}
  .lang-btn{padding:5px 7px}
  .nav-logo b{font-size:18px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .steps::before{transform:scaleX(1);transition:none}
}

/* ===== VERSION BLANC + BLEU ===== */
.sv-hero{background:var(--paper)}
/* Hero : bleu en haut de page, puis gris clair au fil du scroll (--hv de 0 à 1,
   posé par services.js). Les textes passent du blanc au bleu en même temps. */
.sv-hero::before{display:block;opacity:calc(1 - var(--hv,0));transition:none;background:linear-gradient(180deg,#0b1440 0%,#1a2fd6 60%,#2340F0 100%)}
.sv-word{color:color-mix(in srgb,#2340F0 calc(var(--hv,0)*100%),#fff)}
.sv-word .dot,.sv-hero.blue .sv-word .dot{color:color-mix(in srgb,#5C74FF calc(var(--hv,0)*100%),#9fb0ff)}
.sv-lead{color:color-mix(in srgb,rgba(7,8,13,.7) calc(var(--hv,0)*100%),rgba(255,255,255,.86))}
.sv-crumb{color:color-mix(in srgb,rgba(7,8,13,.5) calc(var(--hv,0)*100%),rgba(255,255,255,.7))}
.sv-crumb i,.sv-hero.blue .sv-crumb i{color:color-mix(in srgb,#2340F0 calc(var(--hv,0)*100%),#fff)}
.sv-hero .btn-ghost{color:color-mix(in srgb,#2340F0 calc(var(--hv,0)*100%),#fff);border-color:color-mix(in srgb,rgba(35,64,240,.35) calc(var(--hv,0)*100%),rgba(255,255,255,.55))}
.sv-hero .btn-blue{background:color-mix(in srgb,#2340F0 calc(var(--hv,0)*100%),#fff);color:color-mix(in srgb,#fff calc(var(--hv,0)*100%),#2340F0)}

/* Tout le reste de la page en gris clair, textes foncés et bleus */
.sv-do,.sv-method,.sv-cta{background:var(--paper);color:var(--ink)}
.sec h2{color:var(--blue)}
.sec h2 .dot{color:var(--blue-2)}
.eyebrow,.eyebrow.mono{color:var(--blue)}
.sec-sub{color:rgba(7,8,13,.62)}
.do-card{background:#fff;border-color:rgba(7,8,13,.08)}
.do-card:hover{background:#fff;border-color:rgba(35,64,240,.45);box-shadow:0 18px 40px rgba(35,64,240,.1)}
.do-ic{background:rgba(35,64,240,.1);color:var(--blue)}
.do-card h3{color:var(--ink)}
.do-card p{color:rgba(7,8,13,.62)}
.step h3{color:var(--ink)}
.step p{color:rgba(7,8,13,.62)}
.step-dot{box-shadow:0 0 0 8px rgba(35,64,240,.1),0 12px 30px rgba(35,64,240,.3)}
.cta-card{background:#fff;border-color:rgba(7,8,13,.08);box-shadow:0 30px 70px rgba(35,64,240,.1)}
.cta-card h2{color:var(--blue)}
.cta-card h2 .dot{color:var(--blue-2)}
.cta-card p{color:rgba(7,8,13,.66)}
.other,.other b,.other .arr{color:var(--blue)}
.other b .dot{color:var(--blue-2)}
.other:hover b,.other:hover .arr{color:#0b1a8c}
.other:hover b .dot{color:var(--blue)}
/* Pied de page bleu nuit */
footer{background:#060a1c}
.btn-ghost{border-color:rgba(35,64,240,.35);color:var(--blue)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.sv-cases{background:var(--paper);color:var(--ink)}
.sv-cases h2{color:var(--blue)}
.sv-cases h2 .dot{color:var(--blue-2)}
.sv-cases .eyebrow{color:var(--blue)}
.sv-cases .sec-sub{color:rgba(7,8,13,.62)}
.case{background:#fff;border-color:rgba(7,8,13,.1);box-shadow:0 20px 50px rgba(35,64,240,.08);backdrop-filter:none;-webkit-backdrop-filter:none}
.case h3{color:var(--blue)}
.case p{color:rgba(7,8,13,.68)}
.case li{color:rgba(7,8,13,.8)}
.case li::before{background:var(--blue);box-shadow:none}
.case-tag{color:var(--blue);border-color:rgba(35,64,240,.35)}
.foot-copy{color:var(--blue-2)}
.sv-hero::after{display:none}
/* Barre de menu plus opaque sur les fonds blancs */
.nav{background:rgba(7,8,13,.88)}

/* Le bleu du haut descend dans la section suivante et s'y fond en gris
   (s'efface lui aussi au fil du scroll, via --hv posé sur <html>). */
.sv-do{position:relative;padding-top:clamp(120px,13vw,190px)}
.sv-do::before{content:"";position:absolute;left:0;right:0;top:-1px;height:clamp(240px,30vw,400px);z-index:0;pointer-events:none;
  background:linear-gradient(180deg,#2340F0 0%,rgba(35,64,240,.75) 25%,rgba(35,64,240,.3) 60%,rgba(245,244,239,0) 100%);opacity:calc(1 - var(--hv,0))}
.sv-do .sec-in{position:relative;z-index:1}
.sv-hero.blue::before{opacity:calc(1 - var(--hv,0))}

/* ===== « Ce que je fais » en grille bento =====
   3 lignes : une grande carte + une normale, en alternance. La 1re est bleue,
   la 4e bleu nuit (avec les cercles gyza en filigrane), les autres blanches.
   Grand numéro 01…06 en fond, icône qui s'anime au survol. */
.do-grid{gap:18px}
.do-card{display:flex;flex-direction:column;min-height:250px;border-radius:26px;padding:34px 32px 34px;overflow:hidden;background:#fff;border:1px solid rgba(7,8,13,.07);box-shadow:0 1px 2px rgba(7,8,13,.04);transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s,border-color .3s}
.do-card:nth-child(1),.do-card:nth-child(4),.do-card:nth-child(5){grid-column:span 2}
.do-card h3{margin-top:auto;padding-top:26px;font:800 clamp(20px,1.7vw,24px)/1.2 'Archivo',sans-serif;letter-spacing:-.02em;position:relative;z-index:1}
.do-card p{position:relative;z-index:1;font-size:15.5px;max-width:46ch}
.do-num{position:absolute;top:14px;right:24px;font:400 clamp(64px,6vw,92px)/1 'Anton',sans-serif;color:rgba(35,64,240,.07);transition:color .4s,transform .5s cubic-bezier(.22,1,.36,1)}
.do-ic{position:relative;z-index:1;width:54px;height:54px;border-radius:17px;margin:0;background:rgba(35,64,240,.09);color:var(--blue);transition:background .35s,color .35s,transform .45s cubic-bezier(.22,1,.36,1)}
.do-ic svg{width:25px;height:25px}
.do-card:hover{transform:translateY(-6px);border-color:rgba(35,64,240,.3);box-shadow:0 26px 60px rgba(35,64,240,.14)}
.do-card:hover .do-ic{background:var(--blue);color:#fff;transform:rotate(-8deg) scale(1.08)}
.do-card:hover .do-num{color:rgba(35,64,240,.16);transform:translateY(4px)}
/* cartes mises en avant */
.do-card:nth-child(1),.do-card:nth-child(4){border:0;color:#fff}
.do-card:nth-child(1){background:linear-gradient(135deg,#3a55ff 0%,#2340F0 45%,#1a2fd6 100%)}
.do-card:nth-child(4){background:linear-gradient(135deg,#16235f 0%,#0b1440 60%,#070b24 100%)}
.do-card:nth-child(1)::after,.do-card:nth-child(4)::after{content:"";position:absolute;right:-120px;bottom:-160px;width:420px;height:420px;border-radius:50%;pointer-events:none;
  background:repeating-radial-gradient(circle,rgba(255,255,255,0) 0 34px,rgba(255,255,255,.13) 34px 35px);transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.do-card:nth-child(1):hover::after,.do-card:nth-child(4):hover::after{transform:rotate(25deg) scale(1.08)}
.do-card:nth-child(1) h3,.do-card:nth-child(4) h3{color:#fff}
.do-card:nth-child(1) p,.do-card:nth-child(4) p{color:rgba(255,255,255,.8)}
.do-card:nth-child(1) .do-ic,.do-card:nth-child(4) .do-ic{background:rgba(255,255,255,.14);color:#fff}
.do-card:nth-child(1):hover .do-ic,.do-card:nth-child(4):hover .do-ic{background:#fff;color:var(--blue)}
.do-card:nth-child(1) .do-num,.do-card:nth-child(4) .do-num{color:rgba(255,255,255,.14)}
.do-card:nth-child(1):hover,.do-card:nth-child(4):hover{box-shadow:0 30px 70px rgba(35,64,240,.35)}
@media(max-width:960px){.do-card:nth-child(5){grid-column:auto}.do-card:nth-child(1),.do-card:nth-child(4){grid-column:span 2}.do-card{min-height:220px}}
@media(max-width:600px){.do-card:nth-child(n){grid-column:auto}.do-card{min-height:0;padding:28px 24px}}

/* ===== Sous-menu « Services » (clic, ou survol sur ordinateur) ===== */
.nav-dd{position:relative}
.nav-dd-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;cursor:pointer;font:500 13.5px 'Figtree',sans-serif;color:rgba(237,237,242,.72)}
.nav-dd-btn:hover,.nav-dd.open .nav-dd-btn{color:#fff}
.nav-dd-btn svg{transition:transform .25s}
.nav-dd.open .nav-dd-btn svg{transform:rotate(180deg)}
.nav-dd-menu{position:absolute;top:calc(100% + 24px);left:50%;z-index:70;width:320px;display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:18px;background:rgba(7,8,13,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 70px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translate(-50%,-6px);transition:opacity .2s,transform .2s,visibility .2s}
.nav-dd-menu::before{content:"";position:absolute;left:0;right:0;top:-26px;height:26px}
.nav-dd.open .nav-dd-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav-dd-menu a{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:12px;color:#fff;transition:background .15s}
.nav-dd-menu a b{font:700 14.5px 'Figtree',sans-serif}
.nav-dd-menu a span{font:400 13px/1.35 'Figtree',sans-serif;color:rgba(237,237,242,.55)}
.nav-dd-menu a:hover{background:rgba(35,64,240,.22)}
.nav-dd-menu a.cur{background:rgba(35,64,240,.14)}
.nav-dd-menu a.cur b{color:#9fb0ff}
.nav-dd-menu a.all{flex-direction:row;margin-top:4px;padding-top:13px;border-top:1px solid rgba(255,255,255,.1);border-radius:0 0 12px 12px;font:600 13px 'Figtree',sans-serif;color:#9fb0ff}
@media(hover:hover) and (min-width:861px){.nav-dd:hover .nav-dd-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}.nav-dd:hover .nav-dd-btn{color:#fff}.nav-dd:hover .nav-dd-btn svg{transform:rotate(180deg)}}
@media(max-width:860px){
  .nav-dd-btn{width:100%;justify-content:space-between;padding:13px 14px;border-radius:12px;font:500 15px 'Figtree',sans-serif;color:rgba(237,237,242,.9)}
  .nav-dd-menu{position:static;width:auto;transform:none;opacity:1;visibility:visible;box-shadow:none;background:transparent;border:0;padding:0 0 4px 10px;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav-dd-menu::before{display:none}
  .nav-dd:not(.open) .nav-dd-menu{display:none}
  .nav-dd.open .nav-dd-menu{transform:none}
  .nav-dd-menu a{padding:10px 14px}
}

/* « Voir ma méthode » devient blanc au survol */
.sv-hero .btn-ghost:hover,.btn-ghost:hover{background:#fff;color:#2340F0;border-color:#fff}
.btn-ghost{transition:background .2s,border-color .2s,color .2s}

/* « Réalisations / Idées » : de nouveau un dégradé bleu gyza -> bleu nuit presque noir.
   Les cartes restent blanches par-dessus ; les titres de section passent en blanc. */
.sv-cases{background:linear-gradient(180deg,#2340F0 0%,#1a2fd6 28%,#0b1440 70%,#07080d 100%);color:#fff}
.sv-cases h2{color:#fff}
.sv-cases h2 .dot{color:#9fb0ff}
.sv-cases .eyebrow,.sv-cases .eyebrow.mono{color:#c3ccff}
.sv-cases .sec-sub{color:rgba(255,255,255,.78)}
.sv-cases .case{box-shadow:0 26px 60px rgba(0,0,0,.28)}

/* Vidéos des exemples : affichées en entier et centrées dans leur cadre (plus de recadrage) */
.case-media{align-self:center}
.case-media video{aspect-ratio:auto;height:auto;object-fit:contain;object-position:center;background:#0c0e18}

/* Points des exemples : texte plus grand, sans puce */
.case ul{gap:10px}
.case li{padding-left:0;font-size:17.5px;line-height:1.5}
.case li::before{display:none}