/* ==========================================================================
   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:#1F36E0; --blue-2:#5C74FF; --lav:#9DA8F5;
  --white:#EDEDF2; --mid:#B3B3BF; --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 25px/1 'Archivo',sans-serif;letter-spacing:-.03em}
.nav-links{display:flex;gap:20px}
.nav-links a{font:500 15.5px 'Figtree',sans-serif;color:rgba(237,237,242,.86)}
.nav-links a:hover{color:#fff}
.nav-cta{background:var(--blue);color:#fff;border-radius:999px;padding:10px 20px;font:700 15px 'Figtree',sans-serif;transition:background .15s;white-space:nowrap}
@media(max-width:1040px) and (min-width:861px){.nav{gap:16px}.nav-links{gap:14px}.nav-links a,.nav-dd-btn{font-size:14.5px}.nav-cta{font-size:14px;padding:9px 16px}.nav-logo b{font-size:21px}}
.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,.86);border-radius:999px;padding:6px 10px;font:700 14px '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,.86);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 14.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:14px;color:rgba(237,237,242,.86)}
.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,.86)}
.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:14px;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,.86)}

/* ============ 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,.86)}

/* ============ 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,.86)}

/* ============ 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 14px 'IBM Plex Mono',monospace;font-style:normal;color:rgba(237,237,242,.86)}
.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:14px;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,.86)}
.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,.86)}
.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,.76)}
.faq-a[hidden]{display:none}
.faq-a a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}

/* ============ 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,.86)}
.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,.86);font-size:15px}
.foot-cols{display:flex;gap:clamp(30px,5vw,70px);flex-wrap:wrap}
.foot-nav{display:flex;flex-direction:column;gap:9px;font-size:15px;color:rgba(237,237,242,.86)}
.foot-nav a:hover{color:#fff}
.foot-nav .t{font-size:14px;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:14.5px;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){
  .sv-word{font-size:max(34px,12.5vw)} /* titre d'une seule ligne (Automatisation., Digitalisation.) qui tienne sur petit écran (2026-10-28) */
  .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:20px}
}
@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%,#1F36E0 100%)}
.sv-word{color:color-mix(in srgb,#1F36E0 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,#1F36E0 calc(var(--hv,0)*100%),#fff)}
.sv-hero .btn-ghost{color:color-mix(in srgb,#1F36E0 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,#1F36E0 calc(var(--hv,0)*100%),#fff);color:color-mix(in srgb,#fff calc(var(--hv,0)*100%),#1F36E0)}

/* 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,.76)}
.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,.76)}
.step h3{color:var(--ink)}
.step p{color:rgba(7,8,13,.76)}
.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,.76)}
.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,.76)}
.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,.76)}
.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(150px,15vw,210px)}
.sv-do::before{content:"";position:absolute;left:0;right:0;top:-1px;height:clamp(110px,12vw,150px);z-index:0;pointer-events:none;
  background:linear-gradient(180deg,#1F36E0 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,#2139E8 0%,#1F36E0 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,.9)}
.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:6px;background:none;border:0;padding:0;cursor:pointer;font:500 15.5px 'Figtree',sans-serif;color:rgba(237,237,242,.86)}
.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 16px 'Figtree',sans-serif}
.nav-dd-menu a span{font:400 14px/1.35 'Figtree',sans-serif;color:rgba(237,237,242,.86)}
.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 14px '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:#1F36E0;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,#1F36E0 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,.9)}
.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}

/* ==========================================================================
   Page Tarifs (tarifs.html) : packs par service,
   Pack Lancement, abonnements, sur mesure. Construit par buildPricing() dans
   services.js (FR pré-rendu dans le HTML).
   ========================================================================== */
.btn-white{background:#fff;color:var(--blue)}
.btn-white:hover{background:#e9ecff}


/* Un bloc par service, avec une marge pour que l'ancre ne passe pas sous le menu fixé */
.sv-pricing{background:var(--paper);color:var(--ink);padding-bottom:0}
.pr-svc{scroll-margin-top:110px;padding:clamp(40px,5vw,70px) 0}
.pr-svc + .pr-svc{border-top:1px solid rgba(7,8,13,.08)}
.pr-grid{margin-top:clamp(28px,3.5vw,44px);display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.pr-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(7,8,13,.07);border-radius:26px;padding:32px 28px 30px;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}
.pr-card:hover{transform:translateY(-6px);border-color:rgba(35,64,240,.3);box-shadow:0 26px 60px rgba(35,64,240,.14)}
.pr-card h3{margin:0;font:800 clamp(21px,1.8vw,25px)/1.2 'Archivo',sans-serif;letter-spacing:-.02em;color:var(--ink)}
.pr-desc{margin:8px 0 0;font:400 15px/1.5 'Figtree',sans-serif;color:rgba(7,8,13,.76)}
.pr-tag{display:inline-block;width:fit-content;margin-bottom:14px;font:700 14px 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);background:rgba(35,64,240,.1);border-radius:999px;padding:6px 11px}
.pr-price{margin:22px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px;color:var(--blue)}
.pr-price small{width:100%;font:600 14px 'Figtree',sans-serif;color:rgba(7,8,13,.76)}
.pr-price b{font:400 clamp(38px,3.6vw,50px)/1 'Anton',sans-serif;letter-spacing:.01em}
.pr-unit{font:600 16px 'Figtree',sans-serif}
.pr-ht{font:700 14px 'IBM Plex Mono',monospace;letter-spacing:.08em;color:rgba(7,8,13,.76)}
.pr-month{margin:10px 0 0;font:400 14.5px/1.5 'Figtree',sans-serif;color:rgba(7,8,13,.76)}
.pr-month b{color:var(--ink);font-weight:800}
.pr-list{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.pr-list li{position:relative;padding-left:28px;font:400 15.5px/1.5 'Figtree',sans-serif;color:rgba(7,8,13,.78)}
.pr-list li::before{content:"";position:absolute;left:0;top:.22em;width:18px;height:18px;border-radius:50%;background:rgba(35,64,240,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232340F0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}
.pr-card .btn{margin-top:auto;padding-top:14px;padding-bottom:14px;justify-content:center}
.pr-card .pr-list{margin-bottom:26px}
.pr-note{margin:22px 0 0;font:400 15px/1.55 'Figtree',sans-serif;color:rgba(7,8,13,.76);max-width:72ch}
/* Pack mis en avant (dégradé bleu, pastille « Le plus choisi ») */
.pr-card.hi{border:0;color:#fff;background:linear-gradient(135deg,#2139E8 0%,#1F36E0 45%,#1a2fd6 100%);box-shadow:0 26px 60px rgba(35,64,240,.28);overflow:hidden}
.pr-card.hi::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,.12) 34px 35px)}
.pr-card.hi > *{position:relative;z-index:1}
.pr-card.hi h3,.pr-card.hi .pr-price,.pr-card.hi .pr-month b{color:#fff}
.pr-card.hi .pr-desc,.pr-card.hi .pr-month,.pr-card.hi .pr-list li{color:rgba(255,255,255,.9)}
.pr-card.hi .pr-price small,.pr-card.hi .pr-ht{color:rgba(255,255,255,.9)}
.pr-card.hi .pr-tag{background:#fff;color:var(--blue)}
.pr-card.hi .pr-list li::before{background:rgba(255,255,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}
.pr-card.hi:hover{box-shadow:0 30px 70px rgba(35,64,240,.4)}

/* Pack Lancement : grande carte bleue en deux colonnes */
.sv-launch{background:var(--paper);color:var(--ink);padding-top:clamp(40px,5vw,70px)}
.pr-launch{position:relative;overflow:hidden;display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;margin-top:18px;border-radius:28px;padding:clamp(28px,4vw,52px);color:#fff;background:linear-gradient(135deg,#2139E8 0%,#1F36E0 45%,#1a2fd6 100%);box-shadow:0 30px 70px rgba(35,64,240,.3)}
.pr-launch::after{content:"";position:absolute;right:-160px;top:-200px;width:520px;height:520px;border-radius:50%;pointer-events:none;background:repeating-radial-gradient(circle,rgba(255,255,255,0) 0 34px,rgba(255,255,255,.12) 34px 35px)}
.pr-launch > *{position:relative;z-index:1}
.pr-launch .pr-tag{background:#fff;color:var(--blue)}
.pr-launch h2{margin:0;font:900 clamp(28px,3.6vw,46px)/1.05 'Archivo',sans-serif;letter-spacing:-.03em;color:#fff}
.pr-launch h2 .dot{color:#9fb0ff}
.pr-launch p{margin:14px 0 0;font:400 16.5px/1.6 'Figtree',sans-serif;color:rgba(255,255,255,.9)}
.pr-launch .pr-list li{color:rgba(255,255,255,.9)}
.pr-launch .pr-list li::before{background:rgba(255,255,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}
.pr-launch-price{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:22px;padding:clamp(22px,3vw,34px);text-align:center;display:flex;flex-direction:column;align-items:center}
.pr-launch-price .pr-price{margin:0;justify-content:center;color:#fff}
.pr-launch-price .pr-price b{font-size:clamp(46px,5vw,68px)}
.pr-launch-price .pr-ht{color:rgba(255,255,255,.9)}
.pr-launch-price .pr-month{color:rgba(255,255,255,.9)}
.pr-launch-price .pr-month b{color:#fff}
.pr-launch-price .btn{margin-top:22px}

/* Inclus dans tous les abonnements : carte bleu nuit avec les cercles gyza */
.sv-abo{background:var(--paper);color:var(--ink);padding-top:clamp(40px,5vw,70px)}
.abo-card{position:relative;overflow:hidden;border-radius:28px;padding:clamp(28px,4vw,52px);color:#fff;background:linear-gradient(135deg,#16235f 0%,#0b1440 60%,#070b24 100%);box-shadow:0 30px 70px rgba(7,8,13,.25)}
.abo-card::after{content:"";position:absolute;right:-140px;bottom:-200px;width:520px;height:520px;border-radius:50%;pointer-events:none;background:repeating-radial-gradient(circle,rgba(255,255,255,0) 0 34px,rgba(255,255,255,.1) 34px 35px)}
.abo-card > *{position:relative;z-index:1}
.abo-card .eyebrow,.abo-card .eyebrow.mono{color:#9fb0ff}
.abo-card h2{margin:0;font:900 clamp(26px,3.4vw,42px)/1.06 'Archivo',sans-serif;letter-spacing:-.03em;color:#fff;max-width:22ch}
.abo-card h2 .dot{color:#9fb0ff}
.abo-p{margin:14px 0 0;max-width:62ch;font:400 16.5px/1.6 'Figtree',sans-serif;color:rgba(255,255,255,.9)}
.abo-list{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;margin-top:28px}
.abo-list li{color:rgba(255,255,255,.9)}
.abo-list li::before{background:rgba(255,255,255,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb0ff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}
.abo-after{margin:28px 0 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font:400 15.5px/1.6 'Figtree',sans-serif;color:rgba(255,255,255,.9);max-width:70ch}

/* Applications sur mesure : carte blanche en deux colonnes */
.sv-custom{background:var(--paper);color:var(--ink);padding-top:clamp(40px,5vw,70px)}
.pr-custom{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;background:#fff;border:1px solid rgba(7,8,13,.07);border-radius:28px;padding:clamp(28px,4vw,52px);box-shadow:0 1px 2px rgba(7,8,13,.04)}
.pr-custom h2{margin:0;font:900 clamp(26px,3.4vw,42px)/1.06 'Archivo',sans-serif;letter-spacing:-.03em;color:var(--blue)}
.pr-custom h2 .dot{color:var(--blue-2)}
.pr-custom p{margin:14px 0 0;font:400 16.5px/1.6 'Figtree',sans-serif;color:rgba(7,8,13,.76)}
.pr-custom .pr-list{margin-top:0}
.pr-custom .btn{margin-top:24px}

/* Décalages d'apparition des cartes */
.pr-card.reveal:nth-child(2){transition-delay:.1s}
.pr-card.reveal:nth-child(3){transition-delay:.2s}

@media(max-width:960px){
  .pr-grid{grid-template-columns:1fr}
  .pr-launch,.pr-custom{grid-template-columns:1fr}
  .abo-list{grid-template-columns:1fr}
  .pr-svc{scroll-margin-top:96px}
}
@media(max-width:600px){
  .pr-card{padding:26px 22px 24px}
  .pr-launch,.abo-card,.pr-custom{border-radius:22px}
}

/* ===== Page Tarifs sur téléphone et tablette : tout reste immobile =====
   Pas d'apparition glissée, pas de soulèvement ni de rotation des cercles au
   toucher, pas de pulsation des icônes. Les fiches sont empilées et fixes. */
@media(hover:none){
  .pr-card:hover,.pr-card.hi:hover{transform:none}
  .pr-card.hi:hover::after,.pr-launch:hover::after{transform:none}
}
@media(max-width:960px){
  .pr-page .reveal,.pr-page .reveal.in{opacity:1;transform:none;transition:none}
  .pr-page .pr-card,.pr-page .pr-card:hover{transform:none;transition:none;border-color:rgba(7,8,13,.07);box-shadow:0 1px 2px rgba(7,8,13,.04)}
  .pr-page .pr-card.hi,.pr-page .pr-card.hi:hover{border:0;box-shadow:0 18px 40px rgba(35,64,240,.22)}
  .pr-page .pr-card.hi::after,.pr-page .pr-launch::after,.pr-page .abo-card::after,.pr-page .pr-banner::after{transition:none;transform:none}
  .pr-page .soc,.pr-page .soc svg{animation:none}
  .pr-page .btn,.pr-page .nav-cta{transition:none}
}

/* ===== Accessibilité : lien d'évitement et contour de focus visible au clavier ===== */
.skip-link{position:absolute;left:16px;top:-60px;z-index:100;background:var(--blue);color:#fff;border-radius:999px;padding:12px 20px;font:700 15px 'Figtree',sans-serif;transition:top .15s}
.skip-link:focus{top:16px;outline:3px solid #fff;outline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #5C74FF;outline-offset:3px;border-radius:6px}
.btn:focus-visible,.nav-cta:focus-visible,.lang-btn:focus-visible,.skip-link:focus-visible{border-radius:999px}

/* ===== Accessibilité tactile : FR / NL / EN et menu burger de 44 px sur téléphone et tablette ===== */
@media(max-width:860px){
  .lang{padding:2px;gap:2px}
  .lang-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 8px;font-size:15px}
  .burger{min-width:44px;min-height:44px;align-items:center;justify-content:center}
}
@media(max-width:360px){
  .nav{gap:6px;padding-left:12px}
  .nav-logo svg{width:38px;height:21px}
  .nav-logo b{font-size:18px}
}

/* ===== Menu qui s'efface quand on descend, revient quand on remonte (2026-10-20) ===== */
header{transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .3s ease}
header.nav-away{transform:translateY(-130%);opacity:0;pointer-events:none}
header.nav-away .nav{pointer-events:none}
@media(prefers-reduced-motion:reduce){ header{transition:opacity .2s ease} header.nav-away{transform:none} }