/* ============================================================
   DIGITAL SYSTEMS — Landing page
   Direction : précision suisse / blueprint technique.
   Palette de marque : #284662 → #4a667f, gris #939fa8, fond blanc.
   ============================================================ */

:root{
  --paper:#ffffff;
  --paper-2:#f4f6f8;
  --ink:#0f1a24;
  --ink-2:#3d4a56;
  --blue-1:#284662;
  --blue-2:#4a667f;
  --grey:#939fa8;
  --line:#e2e7ea;
  --line-2:#cfd7dd;
  --grad:linear-gradient(120deg,#284662 0%,#4a667f 100%);

  --shell:1240px;
  --pad:clamp(20px,5vw,64px);
  --sec-y:clamp(72px,10vw,140px);

  --f-disp:"Archivo","Helvetica Neue",Helvetica,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  --f-ser:"Instrument Serif",Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-disp);
  font-size:clamp(15.5px,.55vw + 14px,17px);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.028em;line-height:1.06}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

:focus-visible{outline:2px solid var(--blue-1);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:14px 20px}
.skip:focus{left:0}

/* ---------- trame blueprint ---------- */
.grid-lines{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  max-width:var(--shell);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.grid-lines i{border-left:1px solid var(--line);opacity:.55}
.grid-lines i:first-child{border-left:none}
@media (max-width:900px){.grid-lines{display:none}}

.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 var(--pad);position:relative;z-index:1}
.shell--narrow{max-width:900px}

/* ---------- typographie utilitaire ---------- */
.eyebrow{
  font-family:var(--f-mono);font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--grey);
  display:flex;align-items:center;gap:12px;
}
.eyebrow .num{
  color:var(--blue-1);position:relative;padding-right:14px;
}
.eyebrow .num::after{content:"";position:absolute;right:0;top:50%;width:6px;height:1px;background:var(--line-2)}

h1{font-size:clamp(2.55rem,6.2vw,4.9rem);font-weight:800;letter-spacing:-.038em}
h1 em{font-family:var(--f-ser);font-style:italic;font-weight:400;letter-spacing:-.01em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
h2{font-size:clamp(1.85rem,3.4vw,3rem);font-weight:700}
h2 em{font-family:var(--f-ser);font-style:italic;font-weight:400;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
h3{font-size:clamp(1.12rem,1.5vw,1.36rem);font-weight:700}

.lead{font-size:clamp(1.02rem,1.15vw,1.2rem);color:var(--ink-2);max-width:48ch}

/* ---------- boutons ---------- */
.btn{
  --bg:var(--blue-1);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-disp);font-size:.94rem;font-weight:600;letter-spacing:-.01em;
  padding:13px 24px;border:1px solid transparent;border-radius:2px;
  background:var(--grad);color:#fff;cursor:pointer;
  position:relative;overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s ease;
  box-shadow:0 1px 0 rgba(40,70,98,.4);
}
.btn::after{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateY(101%);transition:transform .38s cubic-bezier(.2,.8,.3,1);z-index:0;
}
.btn>*{position:relative;z-index:1}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(40,70,98,.65)}
.btn:hover::after{transform:translateY(0)}
.btn--sm{padding:10px 18px;font-size:.86rem}
.btn--lg{padding:16px 30px;font-size:1rem}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2);box-shadow:none}
.btn--ghost:hover{color:#fff;border-color:var(--ink)}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.86);backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s;
}
.hdr.is-stuck{border-bottom-color:var(--line);box-shadow:0 1px 20px -10px rgba(15,26,36,.25)}
.hdr__in{display:flex;align-items:center;gap:clamp(16px,3vw,44px);height:78px}
.hdr.is-stuck .hdr__in{height:66px}
.hdr__in{transition:height .3s ease}
.hdr__logo img{height:36px;width:auto;transition:height .3s ease}
.hdr.is-stuck .hdr__logo img{height:30px}

/* marque d'origine : volontairement collée au logo et non au sélecteur
   de langue, où un drapeau se lirait comme un choix de langue */
.hdr__ch{display:flex;align-items:center;gap:7px;padding-left:16px;
  border-left:1px solid var(--line);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grey);white-space:nowrap}
.ch{width:13px;height:13px;flex:none;border-radius:2px;display:block}
@media (max-width:1180px){.hdr__ch{display:none}}

.hdr__nav{display:flex;gap:clamp(14px,1.8vw,28px);margin-left:auto}
.hdr__nav a{
  font-size:.9rem;font-weight:500;color:var(--ink-2);padding:6px 0;position:relative;
}
.hdr__nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--grad);
  transition:width .3s cubic-bezier(.2,.8,.3,1);
}
.hdr__nav a:hover{color:var(--ink)}
.hdr__nav a:hover::after{width:100%}

.hdr__side{display:flex;align-items:center;gap:16px;margin-left:auto}
.hdr__nav+.hdr__side{margin-left:0}
.lang{display:flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:12px;color:var(--grey)}
.lang__b{background:none;border:0;padding:2px;font:inherit;color:var(--grey);cursor:pointer;letter-spacing:.06em}
.lang__b.is-on{color:var(--blue-1);font-weight:500}
.lang__b:hover{color:var(--ink)}

.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;
  background:none;border:1px solid var(--line);border-radius:2px;cursor:pointer}
.burger i{display:block;height:1.5px;width:16px;margin:0 auto;background:var(--ink);transition:transform .3s}
.burger[aria-expanded="true"] i:first-child{transform:translateY(3.2px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-3.2px) rotate(-45deg)}

.mnav{position:fixed;inset:78px 0 auto;z-index:99;background:#fff;border-bottom:1px solid var(--line);
  padding:20px var(--pad) 32px;display:flex;flex-direction:column;gap:4px}
.mnav a{padding:13px 0;border-bottom:1px solid var(--line);font-size:1.05rem;font-weight:500}
.mnav a.btn{border:0;margin-top:16px;justify-content:center}

@media (max-width:980px){
  .hdr__nav{display:none}
  .burger{display:flex}
  /* le CTA vit dans le menu mobile : il ferait déborder la barre */
  .hdr__side>.btn{display:none}
  .hdr__in,.hdr.is-stuck .hdr__in{height:64px}
  .mnav{top:64px;max-height:calc(100vh - 64px);overflow-y:auto}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding-top:clamp(48px,7vw,92px);position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;top:-140px;right:-10%;width:min(720px,70vw);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,rgba(74,102,127,.13),transparent 66%);
  pointer-events:none;
}
.hero__in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,60px);align-items:center;
  padding-bottom:clamp(48px,7vw,90px)}
.hero__txt>*+*{margin-top:24px}
.hero h1{margin-top:20px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px!important}

.hero__facts{display:flex;flex-wrap:wrap;gap:0;margin-top:52px!important;border-top:1px solid var(--line)}
.hero__facts li{flex:1 1 130px;padding:20px 22px 0 0;display:flex;flex-direction:column;gap:2px}
.hero__facts strong{font-size:1.65rem;font-weight:700;letter-spacing:-.03em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__facts span{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--grey);line-height:1.5}

.hero__viz{position:relative}
.hero__viz svg{width:100%;height:auto;overflow:visible}
@media (max-width:900px){
  .hero__in{grid-template-columns:1fr}
  .hero__viz{order:-1;max-width:340px;margin:0 auto}
}

/* ---------- bandeau produits ---------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-2)}
.marquee .shell{display:flex;align-items:center;gap:clamp(20px,4vw,56px);flex-wrap:wrap;padding-top:24px;padding-bottom:24px}
.marquee__lbl{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.marquee__list{display:flex;flex-wrap:wrap;gap:clamp(18px,3.4vw,48px);margin-left:auto}
.marquee__list li{
  font-size:clamp(1.05rem,1.7vw,1.35rem);font-weight:700;letter-spacing:-.03em;color:var(--blue-1);
  opacity:.82;transition:opacity .25s
}
.marquee__list li:hover{opacity:1}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{padding:var(--sec-y) 0;position:relative}
.sec--alt{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec--form{background:var(--paper-2);border-top:1px solid var(--line)}

.sec__hd{max-width:none;margin-bottom:clamp(38px,5vw,64px)}
.sec__hd h2{margin-top:18px;max-width:21ch}
.sec__intro{margin-top:20px;color:var(--ink-2);max-width:56ch}

@media (min-width:1000px){
  .sec__hd{display:grid;grid-template-columns:1.05fr .95fr;column-gap:clamp(30px,5vw,80px);align-items:end}
  .sec__hd .eyebrow{grid-column:1/-1}
  .sec__hd h2{grid-column:1}
  .sec__intro{grid-column:2;margin-top:0;padding-bottom:6px}
}

/* ---------- section sombre ---------- */
.sec--dark{background:var(--ink);color:#e8edf1;overflow:hidden;padding-bottom:clamp(56px,6vw,96px)}
.sec--dark::before{
  content:"";position:absolute;top:-30%;left:-8%;width:60%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(74,102,127,.35),transparent 62%);pointer-events:none
}
.sec--dark h2{color:#fff}
.sec--dark h2 em{background:linear-gradient(120deg,#8fb0cc,#cfdae4);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec--dark .eyebrow{color:#7b8e9d}
.sec--dark .eyebrow .num{color:#8fb0cc}
.sec--dark .sec__intro{color:#aebac5}

/* ============================================================
   CARTES SERVICES
   ============================================================ */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.card{background:#fff;padding:clamp(26px,2.6vw,38px);position:relative;transition:background .3s}
.card::before{
  content:"";position:absolute;left:0;top:0;width:2px;height:0;background:var(--grad);
  transition:height .45s cubic-bezier(.2,.8,.3,1)
}
.card:hover::before{height:100%}
.card:hover{background:#fbfcfd}
.card__k{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;color:var(--grey);margin-bottom:20px}
.card h3{margin-bottom:12px;max-width:16ch}
.card>p{color:var(--ink-2);font-size:.95rem}
.card ul{margin-top:22px;border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:9px}
.card ul li{font-size:.87rem;color:var(--ink-2);padding-left:16px;position:relative}
.card ul li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;
  border:1.5px solid var(--blue-2)}

/* ============================================================
   IA
   ============================================================ */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:rgba(255,255,255,.11)}
.duo__b{background:var(--ink);padding:clamp(26px,2.8vw,42px) clamp(24px,2.6vw,40px)}
.duo__b .eyebrow{color:#8fb0cc}
.duo__b h3{margin:16px 0 14px;color:#fff;font-size:clamp(1.25rem,2vw,1.7rem);max-width:20ch}
.duo__b p{color:#aebac5;font-size:.96rem}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(30px,4vw,52px)}
.chips li{
  font-family:var(--f-mono);font-size:12.5px;letter-spacing:.01em;color:#c6d1da;
  border:1px solid rgba(255,255,255,.16);border-radius:2px;padding:9px 14px;
  transition:border-color .25s,color .25s,transform .25s
}
.chips li:hover{border-color:#8fb0cc;color:#fff;transform:translateY(-2px)}

/* ============================================================
   RÉALISATIONS
   ============================================================ */
/* ============================================================
   RÉALISATIONS — un laptop, quatre produits
   ------------------------------------------------------------
   Une seule capture, assez grande pour être lue, plutôt que
   quatre vignettes de 192 px que personne ne déchiffre. Les
   quatre noms restent visibles en permanence dans la colonne
   de droite : on n'échange pas la lisibilité contre l'oubli
   de trois produits sur quatre.

   Le châssis est dessiné en CSS, pas en image : net à toutes
   les résolutions, et le site ne charge toujours aucun visuel
   décoratif.
   ============================================================ */
.show{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);
  gap:clamp(24px,3.4vw,52px);align-items:start}

/* L'angle de l'écran suit la position de la section dans la fenêtre :
   il s'ouvre en descendant, se referme en s'éloignant. Le mouvement
   appartient à l'objet — un laptop s'ouvre — et sa vitesse est celle du
   visiteur, pas une durée choisie à sa place.

   Lié au défilement plutôt que déclenché : pas de seuil à franchir, donc
   pas de clignotement quand on s'arrête juste sur la limite, et rien à
   « rejouer » puisque rien ne se joue.

   --lid est posé image par image en JS ; la valeur ici est l'état de
   repos, avant que le script ne prenne la main. */
.lap{width:100%;perspective:1500px}
.lap__body{background:#18222c;border-radius:12px 12px 4px 4px;
  padding:14px 14px 18px;position:relative;
  transform-origin:50% 100%;
  transform:rotateX(var(--lid,-64deg));
  opacity:var(--lid-o,.62);
  box-shadow:0 calc(40px * var(--lid-p,0) + 6px) calc(70px * var(--lid-p,0) + 16px)
             -50px rgba(15,26,36,.85)}
.lap__body::after{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.22)}
.lap__scr{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:3px;
  background:#0f1a24;cursor:zoom-in}
.lap__scr img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
  transition:opacity .35s ease}
.lap__scr.is-swap img{opacity:0}
.lap__scr::after{content:"\2922";position:absolute;right:10px;bottom:10px;
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:2px;background:rgba(15,26,36,.74);color:#fff;font-size:13px;pointer-events:none;
  opacity:0;transform:translateY(5px);transition:opacity .25s ease,transform .25s ease}
.lap__scr:hover::after,.lap__scr:focus-visible::after{opacity:1;transform:none}
.lap__foot{height:13px;margin:0 -5.5%;border-radius:0 0 13px 13px;
  background:linear-gradient(180deg,#d9dfe4,#b2bcc4);position:relative}
.lap__foot::after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:13%;height:4px;border-radius:0 0 5px 5px;background:rgba(15,26,36,.16)}

.show__side{display:flex;flex-direction:column;gap:22px;min-width:0}
.show__tabs{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.show__t{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;
  background:none;border:0;border-bottom:1px solid var(--line);border-left:2px solid transparent;
  padding:13px 0 13px 14px;cursor:pointer;width:100%;
  transition:border-color .25s ease,padding-left .25s ease,background .25s ease}
.show__t b{font-family:var(--f-disp);font-size:1.05rem;font-weight:700;letter-spacing:-.03em;
  color:#6b7885;transition:color .25s ease}
.show__t span{font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grey);transition:color .25s ease}
.show__t:hover{background:#f7f9fa;padding-left:17px}
.show__t:hover b{color:var(--ink)}
.show__t.is-on{border-left-color:var(--blue-1);padding-left:18px;background:#fbfcfd}
.show__t.is-on b{color:var(--ink)}
.show__t.is-on span{color:var(--blue-2)}

.show__p{display:flex;flex-direction:column;gap:14px;align-items:flex-start;
  animation:fade .4s ease}
/* Un produit encore en rodage le dit sur sa fiche. Le taire jusqu'à la
   demande de démonstration coûterait plus cher que de l'annoncer. */
.show__etat{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:#8a6d2f;background:#fdf8ee;border:1px solid #ecdfc4;border-radius:2px;
  padding:6px 10px}
.show__etat::before{content:"";width:6px;height:6px;border-radius:50%;background:#c99a2e;flex:none}
.show__p>p:first-child{font-size:.94rem;color:var(--ink-2)}
.show__p>.show__etat:first-child{font-size:10px;color:#8a6d2f}
.show__p>.show__etat+p{font-size:.94rem;color:var(--ink-2)}
.show__res{font-size:.83rem;color:var(--grey);padding-top:14px;border-top:1px solid var(--line);width:100%}
.show__link{display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--blue-1);border-bottom:1px solid var(--line-2);padding-bottom:3px;
  transition:border-color .25s ease,gap .25s ease}
.show__link:hover{border-bottom-color:var(--blue-1);gap:11px}
.show__link i{font-style:normal;font-size:11px}

@media (max-width:900px){
  .show{grid-template-columns:minmax(0,1fr);gap:26px}
  /* Le capot ferme est incline vers le spectateur : la perspective l elargit
     de quelques pixels au-dela de sa boite. On retreint la scene pour que ce
     debord ne fasse pas defiler la page horizontalement. */
  .lap{padding:0 10px}
  .lap__body{padding:9px 9px 12px}
  .show__t{padding:12px 0 12px 12px}
  .show__t.is-on{padding-left:15px}
}

.cases{margin-top:clamp(48px,6vw,84px)}
.cases .eyebrow{margin-bottom:26px}
.cases__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.case{background:#fff;padding:clamp(22px,2.2vw,30px)}
.case__sec{font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-2);margin-bottom:14px}
.case h4{font-size:1.02rem;font-weight:700;margin-bottom:10px;letter-spacing:-.02em;line-height:1.28}
.case p:last-child{font-size:.89rem;color:var(--ink-2)}

.work__link{display:inline-flex;align-items:center;gap:7px;margin-top:12px;align-self:flex-start;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--blue-1);border-bottom:1px solid var(--line-2);padding-bottom:3px;
  transition:border-color .25s ease,gap .25s ease}
.work__link:hover{border-bottom-color:var(--blue-1);gap:11px}
.work__link i{font-style:normal;font-size:11px}

/* captures produit — le bloc disparaît si le fichier n'existe pas */
.work__shot{position:relative;margin:2px 0 6px;border:1px solid var(--line);border-radius:2px;
  overflow:hidden;background:var(--paper-2);aspect-ratio:16/10;cursor:zoom-in}
.work__shot::after{content:"\2922";position:absolute;right:8px;bottom:8px;
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border-radius:2px;background:rgba(15,26,36,.74);color:#fff;font-size:13px;pointer-events:none;
  opacity:0;transform:translateY(5px);transition:opacity .25s ease,transform .25s ease}
.work__shot:hover::after,.work__shot:focus-visible::after{opacity:1;transform:none}
.work__shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
  transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.work:hover .work__shot img{transform:scale(1.035)}

/* ============================================================
   MÉTHODE
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(22px,2.6vw,36px);
  counter-reset:s}
.step{position:relative;padding-top:26px;border-top:1px solid var(--line-2)}
.step__n{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--blue-2);
  position:absolute;top:-1px;left:0;background:var(--paper-2);padding-right:12px;transform:translateY(-50%)}
.step h3{margin-bottom:10px;max-width:18ch}
.step p{font-size:.92rem;color:var(--ink-2)}

/* ============================================================
   POURQUOI
   ============================================================ */
.whys{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:clamp(22px,2.4vw,38px)}
.why h3{margin-bottom:10px;max-width:20ch}
.why p{font-size:.92rem;color:var(--ink-2)}
.why{padding-left:20px;border-left:2px solid var(--line)}
.why:hover{border-left-color:var(--blue-2)}
.why{transition:border-color .3s}

/* ============================================================
   FAQ
   ============================================================ */
.faq{border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-size:clamp(1rem,1.3vw,1.13rem);font-weight:600;letter-spacing:-.022em;
  transition:color .2s
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--blue-2);border-bottom:1.5px solid var(--blue-2);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--blue-1)}
.faq details p{padding:0 40px 26px 0;color:var(--ink-2);font-size:.95rem;max-width:70ch;
  animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ============================================================
   L'ENCART SIGNÉ — qui lira la demande
   ------------------------------------------------------------
   Placé juste avant le formulaire, pas dans une section « à
   propos » : c'est au moment de laisser ses coordonnées qu'on
   veut savoir qui va les lire.

   Pas de portrait : une signature manuscrite. Sur un site dont
   l'argument est « nous montrons au lieu de raconter », un
   visuel d'entreprise annulerait l'effet des démonstrations qui
   précèdent.
   ============================================================ */
.signe{display:grid;grid-template-columns:1fr auto;align-items:end;
  gap:clamp(18px,3vw,44px);margin-bottom:clamp(28px,3.6vw,44px);
  padding:clamp(24px,2.8vw,34px) clamp(24px,2.8vw,36px);
  background:#fff;border:1px solid var(--line);border-left:2px solid var(--blue-1);
  border-radius:2px}
.signe__txt{min-width:0}
.signe blockquote{margin:14px 0 18px;max-width:60ch}
.signe blockquote p{font-size:clamp(.97rem,1.15vw,1.08rem);line-height:1.62;color:var(--ink)}
.signe blockquote p+p{margin-top:12px}
.signe__nom{display:flex;flex-direction:column;gap:3px}
.signe__nom b{font-size:.95rem;font-weight:700;letter-spacing:-.022em}
.signe__nom span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grey)}
.signe__img{flex:none;width:auto;height:clamp(104px,10vw,142px);margin-bottom:-6px}

@media (max-width:700px){
  .signe{grid-template-columns:1fr;gap:14px}
  .signe__img{height:84px;justify-self:start}
}

/* ============================================================
   FORMULAIRE
   ============================================================ */
.qf{background:#fff;border:1px solid var(--line);border-radius:2px;padding:clamp(24px,3.4vw,48px);
  box-shadow:0 30px 60px -50px rgba(15,26,36,.5)}
.qf__bar{height:2px;background:var(--line);margin-bottom:14px;overflow:hidden}
.qf__bar span{display:block;height:100%;width:33.33%;background:var(--grad);
  transition:width .45s cubic-bezier(.2,.8,.3,1)}
.qf__prog{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--grey);margin-bottom:28px}
.qf__prog b{color:var(--blue-1)}

.qf__s{display:none;border:0;padding:0;margin:0;min-width:0}
.qf__s.is-on{display:block;animation:fade .4s ease}
.qf__s legend{font-size:clamp(1.15rem,1.8vw,1.5rem);font-weight:700;letter-spacing:-.028em;padding:0;margin-bottom:8px}
.qf__hint{font-size:.85rem;color:var(--grey);margin-bottom:22px}

.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:14px}
.opt{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:2px;
  padding:14px 16px;cursor:pointer;font-size:.92rem;transition:border-color .22s,background .22s}
.opt:hover{border-color:var(--line-2);background:#fbfcfd}
.opt input{appearance:none;width:17px;height:17px;flex:none;border:1.5px solid var(--line-2);border-radius:2px;
  cursor:pointer;position:relative;transition:border-color .2s,background .2s}
.opt input:checked{background:var(--blue-1);border-color:var(--blue-1)}
.opt input:checked::after{content:"";position:absolute;left:5px;top:1.5px;width:4px;height:9px;
  border:solid #fff;border-width:0 1.8px 1.8px 0;transform:rotate(43deg)}
.opt:has(input:checked){border-color:var(--blue-1);background:#f6f9fb}

.qf__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:600px){.qf__row{grid-template-columns:1fr}}
.f{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.f label{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.f label i{font-style:normal;color:var(--grey);text-transform:none;letter-spacing:0}
.f input,.f select,.f textarea{
  font-family:var(--f-disp);font-size:.97rem;color:var(--ink);
  border:1px solid var(--line);border-radius:2px;padding:12px 14px;background:#fff;
  transition:border-color .22s,box-shadow .22s;width:100%
}
.f textarea{resize:vertical;line-height:1.55}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--blue-2);
  box-shadow:0 0 0 3px rgba(74,102,127,.12)}
.f input::placeholder,.f textarea::placeholder{color:#b3bcc4}

.consent{display:flex;gap:11px;align-items:flex-start;font-size:.87rem;color:var(--ink-2);
  margin-top:6px;cursor:pointer}
.consent input{appearance:none;width:17px;height:17px;flex:none;margin-top:2px;
  border:1.5px solid var(--line-2);border-radius:2px;position:relative;cursor:pointer}
.consent input:checked{background:var(--blue-1);border-color:var(--blue-1)}
.consent input:checked::after{content:"";position:absolute;left:5px;top:1.5px;width:4px;height:9px;
  border:solid #fff;border-width:0 1.8px 1.8px 0;transform:rotate(43deg)}

.qf__err{color:#a8323c;font-size:.85rem;margin-top:14px}
.qf__nav{display:flex;gap:12px;margin-top:32px;padding-top:26px;border-top:1px solid var(--line)}
/* Le moment de la conversion : ce n'était qu'un cadre vert. C'est
   pourtant le seul instant de la page qui compte commercialement.
   On récapitule ce que le visiteur vient de demander — il se sait
   entendu —, on annonce précisément la suite et depuis quelle
   adresse, et on lui propose une sortie plutôt qu'un cul-de-sac. */
.qf__ok{display:flex;flex-direction:column;align-items:flex-start;gap:22px;
  margin-top:22px;padding:clamp(22px,2.6vw,30px);border-radius:2px;
  background:#f4f8f5;border:1px solid #cfe0d6}
.qf__okt{font-size:clamp(1.15rem,1.8vw,1.42rem);font-weight:700;letter-spacing:-.028em;
  color:#2c5a41;display:flex;align-items:center;gap:11px}
.qf__okt::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;
  background:#3d8a63 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 7'/%3E%3C/svg%3E") center/12px no-repeat}
.qf__block{width:100%}
.qf__okk{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);margin-bottom:11px}
.qf__recap{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;font-size:.89rem}
.qf__recap dt{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey);padding-top:3px}
.qf__recap dd{margin:0;color:var(--ink)}
.qf__steps{display:flex;flex-direction:column;gap:10px;counter-reset:ok}
.qf__steps li{counter-increment:ok;position:relative;padding-left:26px;
  font-size:.89rem;line-height:1.55;color:var(--ink-2)}
.qf__steps li::before{content:counter(ok);position:absolute;left:0;top:0;
  font-family:var(--f-mono);font-size:10px;color:#3d8a63;
  width:17px;height:17px;border:1px solid #cfe0d6;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:#fff}
.qf__steps b{color:var(--ink)}
.qf__ko{margin-top:22px;padding:18px 20px;border-radius:2px;font-size:.94rem}
.qf__ko{background:#fbf2f2;border:1px solid #e8cfd1;color:#8f3138}
.qf.is-sent .qf__s,.qf.is-sent .qf__nav,.qf.is-sent .qf__bar,.qf.is-sent .qf__prog{display:none}

/* ============================================================
   SOUS LE CAPOT — la page se mesure elle-même
   ------------------------------------------------------------
   Sobre volontairement : ce sont les chiffres qui parlent. Le
   « 0 » des serveurs tiers est le seul mis en avant, parce qu'il
   est celui que personne ne peut afficher sans avoir fait le
   travail.
   ============================================================ */
.hood{padding:clamp(40px,5vw,64px) 0;border-top:1px solid var(--line);background:#fff}
.hood .eyebrow{margin-bottom:26px}
.hood__n{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:clamp(18px,2.4vw,34px);border-top:1px solid var(--line);padding-top:22px}
.hood__n li{display:flex;flex-direction:column;gap:5px}
.hood__n b{font-size:clamp(1.5rem,2.4vw,1.9rem);font-weight:700;letter-spacing:-.035em;
  line-height:1;color:var(--ink)}
.hood__n li:nth-child(2) b{background:var(--grad);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.hood__n span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--grey);line-height:1.5}
.hood__note{margin-top:26px;max-width:64ch;font-size:.85rem;color:var(--ink-2)}

/* ============================================================
   FOOTER
   ============================================================ */
.ft{background:#fff;border-top:1px solid var(--line);padding-top:clamp(48px,6vw,80px)}
.ft__in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(28px,4vw,60px);padding-bottom:48px}
@media (max-width:800px){.ft__in{grid-template-columns:1fr 1fr}.ft__brand{grid-column:1/-1}}
.ft__brand img{height:42px;width:auto;margin-bottom:18px}
.ft__brand p{font-size:.9rem;color:var(--ink-2);max-width:38ch}
.ft__col{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.ft__k{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:6px}
.ft__col a{font-size:.9rem;color:var(--ink-2);transition:color .2s}
.ft__col a:hover{color:var(--blue-1)}
.ft__col a.btn{color:#fff;margin-top:10px}
.ft__addr{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--ink-2)}
.ft__addr .ch{width:15px;height:15px}
.ft__bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:22px;padding-bottom:30px;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;color:var(--grey)}
.ft__bot a:hover{color:var(--blue-1)}

/* ============================================================
   PAGE INTROUVABLE
   ============================================================ */
.err{padding:clamp(70px,11vw,150px) 0 clamp(60px,8vw,110px)}
.err h1{margin:20px 0 26px;font-size:clamp(2.1rem,5vw,3.6rem)}
.err .lead{max-width:52ch}
.err__nav{display:flex;flex-wrap:wrap;gap:0;margin:38px 0 34px;border-top:1px solid var(--line)}
.err__nav a{flex:1 1 220px;padding:16px 20px 16px 0;border-bottom:1px solid var(--line);
  font-size:.95rem;font-weight:500;color:var(--ink-2);position:relative;
  transition:color .22s ease,padding-left .22s ease}
.err__nav a::before{content:"\2192";position:absolute;left:0;opacity:0;color:var(--blue-2);
  transition:opacity .22s ease}
.err__nav a:hover{color:var(--blue-1);padding-left:22px}
.err__nav a:hover::before{opacity:1}
.err__en{margin-top:34px;font-size:.85rem;color:var(--grey);max-width:56ch}

/* ============================================================
   RÉVÉLATION AU SCROLL
   ============================================================ */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal[data-d="4"]{transition-delay:.36s}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .viz__links path,.viz__nodes circle{animation:none;stroke-dashoffset:0;opacity:1}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ============================================================
   HERO — CONSTELLATION D'AGENTS
   Le symbole de la marque, au travail : un orchestrateur au
   centre, six agents autour, des impulsions qui circulent.
   ============================================================ */
.ags{position:relative}
.ags svg{width:100%;height:auto;overflow:visible;display:block}

.ags__glow{opacity:0;animation:agsGlow 1.2s .2s ease forwards}
@keyframes agsGlow{to{opacity:1}}

.ag__ring{fill:none;stroke:#c2ccd4;stroke-width:1.2;opacity:.85}
.ag__spoke{stroke:#c8d1d8;stroke-width:1;opacity:.7}

.ag__beam{stroke:url(#gr);stroke-width:2.4;stroke-linecap:round;fill:none;opacity:0}
.ag__beam.is-live{opacity:1}

.ag__hubring{fill:#fff;stroke:url(#gr);stroke-width:2;
  transform-box:fill-box;transform-origin:center;animation:hubBreathe 3.4s ease-in-out infinite}
.ag__hubcore{fill:var(--blue-1)}
@keyframes hubBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

.ag__halo{fill:#fff;stroke:var(--line-2);stroke-width:1.6;
  transform-box:fill-box;transform-origin:center;
  transition:stroke .35s ease,stroke-width .35s ease,transform .45s cubic-bezier(.2,1.3,.4,1)}
.ag__core{fill:var(--grey);transition:fill .35s ease,r .35s ease}
.ag.is-on .ag__halo{stroke:var(--blue-1);stroke-width:2.6;transform:scale(1.22)}
.ag.is-on .ag__core{fill:var(--blue-1)}
.ag.is-warm .ag__core{fill:var(--blue-2)}

/* onde émise par l'agent qui vient de recevoir le relais */
.ag__wave{fill:none;stroke:var(--blue-2);stroke-width:2;opacity:0;
  transform-box:fill-box;transform-origin:center}
.ag__wave.is-go{animation:agWave .9s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes agWave{0%{opacity:.55;transform:scale(.7)}100%{opacity:0;transform:scale(2.5)}}

.ags__cap{margin-top:18px;display:flex;flex-direction:column;gap:3px;min-height:48px;
  padding-left:16px;border-left:2px solid var(--line-2);transition:border-color .35s}
.ags__cap.is-live{border-left-color:var(--blue-2)}
.ags__cap b{font-family:var(--f-mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue-1)}
.ags__cap span{font-size:.88rem;color:var(--ink-2);line-height:1.45}
.ags__cap.is-swap b,.ags__cap.is-swap span{opacity:0;transform:translateY(4px)}
.ags__cap b,.ags__cap span{transition:opacity .22s ease,transform .22s ease}

@media (max-width:900px){
  .ags__cap{margin-top:14px;min-height:44px}
}

/* ============================================================
   LABO — DÉMONSTRATIONS QUI TOURNENT DANS LA PAGE
   ============================================================ */
.lab{background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden;
  box-shadow:0 44px 90px -70px rgba(15,26,36,.65)}

.lab__tabs{display:flex;border-bottom:1px solid var(--line);background:#fafbfc;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.lab__tabs::-webkit-scrollbar{display:none}
.lab__tab{flex:1 0 auto;min-width:132px;background:none;border:0;
  border-bottom:2px solid transparent;padding:16px 20px;cursor:pointer;white-space:nowrap;
  font-family:var(--f-disp);font-size:.9rem;font-weight:600;letter-spacing:-.012em;color:var(--grey);
  transition:color .22s,background .22s,border-color .22s}
.lab__tab:hover{color:var(--ink)}
.lab__tab.is-on{color:var(--blue-1);border-bottom-color:var(--blue-1);background:#fff}

.lab__p{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(0,.82fr)}
.lab__view{padding:clamp(18px,2.2vw,30px);background:var(--paper-2);min-width:0;
  border-right:1px solid var(--line);min-height:430px;display:flex;align-items:stretch}
.lab__info{padding:clamp(24px,2.6vw,38px);min-width:0;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.lab__info h3{max-width:20ch}
.lab__info>p{font-size:.92rem;color:var(--ink-2)}
.lab__b{display:flex;flex-direction:column;gap:8px}
.lab__b li{font-size:.85rem;line-height:1.5;color:var(--ink-2);padding-left:17px;position:relative}
.lab__b li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;border:1.5px solid var(--blue-2)}
.lab__res{margin-top:auto!important;padding-top:16px;border-top:1px solid var(--line);
  font-size:.83rem!important;color:var(--grey)!important;width:100%}

@media (max-width:940px){
  .lab__p{grid-template-columns:minmax(0,1fr)}
  .lab__view{border-right:0;border-bottom:1px solid var(--line);min-height:0}
  .lab__tab{min-width:118px;padding:14px;font-size:.84rem}
}
/* sur petit écran, les cinq onglets tiennent sur deux rangées :
   un défilement horizontal sans indice visuel se rate trop facilement */
@media (max-width:620px){
  .lab__tabs{flex-wrap:wrap;overflow:visible}
  .lab__tab{flex:1 1 33.333%;min-width:0;padding:13px 6px;font-size:.79rem;
    border-bottom:1px solid var(--line)}
  .lab__tab.is-on{border-bottom:2px solid var(--blue-1)}
  .lab__view{padding:14px}
  .dv__body{min-height:290px}
  .cht__body{min-height:220px}
  /* colonnes secondaires masquées : mieux vaut trois colonnes lisibles
     que quatre colonnes écrasées */
  .sa__tb th:nth-child(2),.sa__tb td:nth-child(2){display:none}
  .sa__kpi{grid-template-columns:1fr 1fr}
  .sa__kpi div:last-child{display:none}
  .rfn__hero{min-height:120px}
  .rfn__h1{font-size:15px}
  .rfn__sect{display:none}
}

/* ---------- châssis navigateur ---------- */
.dv{display:flex;flex-direction:column;width:100%;background:#fff;
  border:1px solid var(--line-2);border-radius:6px;overflow:hidden;
  box-shadow:0 20px 44px -34px rgba(15,26,36,.55)}
.dv__bar{display:flex;align-items:center;gap:10px;padding:9px 12px;
  background:#eaeef1;border-bottom:1px solid var(--line-2)}
.dv__dots{display:flex;gap:5px;flex:none}
.dv__dots i{width:8px;height:8px;border-radius:50%;background:#c4ccd3}
.dv__url{flex:1;background:#fff;border:1px solid var(--line);border-radius:3px;
  padding:4px 10px;font-family:var(--f-mono);font-size:10.5px;color:var(--grey);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dv__body{position:relative;flex:1;overflow:hidden;min-height:330px}

/* ---------- démo : agents ---------- */
.agx{display:flex;flex-direction:column;gap:9px;width:100%}
.agx__top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.agx__job{color:var(--blue-1)}
.lane{border:1px solid var(--line);background:#fff;border-radius:3px;padding:11px 13px;
  opacity:.42;transition:opacity .4s ease,border-color .4s ease,box-shadow .4s ease}
.lane.is-on{opacity:1;border-color:var(--blue-2);box-shadow:0 10px 26px -20px rgba(40,70,98,.8)}
.lane.is-done{opacity:1}
.lane__hd{display:flex;align-items:center;gap:10px}
.lane__n{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--blue-1);flex:1}
.lane__st{font-family:var(--f-mono);font-size:10px;letter-spacing:.07em;padding:3px 9px;border-radius:99px;
  background:#eef1f4;color:var(--grey);white-space:nowrap;transition:background .3s,color .3s}
.lane.is-on .lane__st{background:#e4edf5;color:var(--blue-1)}
.lane.is-done .lane__st{background:#eaf3ee;color:#3a7a58}
.lane__log{margin-top:7px;display:flex;flex-direction:column;gap:3px}
.lane__log li{font-family:var(--f-mono);font-size:11px;line-height:1.5;color:var(--ink-2);
  opacity:0;transform:translateY(-3px);transition:opacity .3s ease,transform .3s ease;
  padding-left:12px;position:relative}
.lane__log li::before{content:"›";position:absolute;left:0;color:var(--grey)}
.lane__log li.in{opacity:1;transform:none}
.agx__out{margin-top:auto;border:1px solid var(--line);border-left:2px solid var(--blue-1);
  background:#fff;border-radius:3px;padding:12px 14px;opacity:0;transform:translateY(6px);
  transition:opacity .45s ease,transform .45s ease}
.agx__out.in{opacity:1;transform:none}
.agx__out b{display:block;font-size:.88rem;margin-bottom:3px}
.agx__out span{font-size:.82rem;color:var(--ink-2)}

/* ---------- démo : automatisation ---------- */
.au{display:flex;flex-direction:column;gap:10px;width:100%}
.au__steps{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.au__steps i{height:2px;background:var(--line-2);border-radius:2px;overflow:hidden;position:relative}
.au__steps i::after{content:"";position:absolute;inset:0;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.au__steps i.on::after{transform:scaleX(1)}
.au__blk{border:1px solid var(--line);background:#fff;border-radius:3px;padding:12px 14px;
  opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.au__blk.in{opacity:1;transform:none}
.au__k{font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--grey);margin-bottom:7px}
.au__mail b{font-size:.85rem}
.au__mail p{font-size:.82rem;color:var(--ink-2);margin-top:4px;line-height:1.5}
.au__chips{display:flex;flex-wrap:wrap;gap:6px}
.au__chips span{font-family:var(--f-mono);font-size:10.5px;padding:4px 9px;border-radius:2px;
  background:#eef3f7;color:var(--blue-1);border:1px solid #dde6ee;
  opacity:0;transform:scale(.8);transition:opacity .3s,transform .3s cubic-bezier(.2,1.4,.4,1)}
.au__chips span.in{opacity:1;transform:none}
.au__tbl{width:100%;border-collapse:collapse;font-size:.8rem}
.au__tbl th{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey);text-align:left;padding:0 8px 6px 0;font-weight:400}
.au__tbl td{padding:7px 8px 0 0;color:var(--ink-2);border-top:1px solid var(--line)}
.au__tbl tr.au__row td{color:var(--ink);font-weight:600}
.au__draft{font-size:.83rem;color:var(--ink-2);line-height:1.55;white-space:pre-wrap;min-height:3.4em}
.au__caret{display:inline-block;width:1px;height:.95em;background:var(--blue-1);
  vertical-align:-2px;animation:caret .85s steps(1) infinite}
@keyframes caret{0%,50%{opacity:1}51%,100%{opacity:0}}
.au__gain{display:flex;align-items:baseline;gap:8px;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--grey)}
.au__gain b{font-family:var(--f-disp);font-size:1.15rem;letter-spacing:-.02em;color:var(--blue-1)}

/* ---------- démo : chatbot ---------- */
.cht{display:flex;flex-direction:column;width:100%;background:#fff;
  border:1px solid var(--line);border-radius:4px;overflow:hidden}
.cht__hd{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid var(--line)}
.cht__hd b{font-size:.86rem}
.cht__hd em{font-style:normal;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grey);margin-left:auto}
.cht__live{width:7px;height:7px;border-radius:50%;background:#4caf7d;
  box-shadow:0 0 0 3px rgba(76,175,125,.16);flex:none}
.cht__body{flex:1;padding:15px;display:flex;flex-direction:column;gap:9px;
  overflow-y:auto;min-height:262px;max-height:330px}
.msg{max-width:82%;padding:9px 13px;font-size:.86rem;line-height:1.5;
  animation:msgIn .34s cubic-bezier(.2,.8,.3,1)}
@keyframes msgIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.msg--u{align-self:flex-end;background:var(--grad);color:#fff;
  border-radius:12px 12px 3px 12px}
.msg--b{align-self:flex-start;background:var(--paper-2);border:1px solid var(--line);
  border-radius:12px 12px 12px 3px;color:var(--ink)}
.msg--b b{color:var(--blue-1)}
.dots{align-self:flex-start;display:flex;gap:4px;padding:11px 14px;background:var(--paper-2);
  border:1px solid var(--line);border-radius:12px 12px 12px 3px}
.dots i{width:5px;height:5px;border-radius:50%;background:var(--grey);animation:dot 1.1s infinite}
.dots i:nth-child(2){animation-delay:.16s}.dots i:nth-child(3){animation-delay:.32s}
@keyframes dot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.cht__sug{display:flex;flex-wrap:wrap;gap:6px;padding:11px 14px;border-top:1px solid var(--line);
  background:#fafbfc}
.cht__hint{align-self:center;margin-right:2px;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.cht__sug button{font-family:var(--f-disp);font-size:.78rem;color:var(--ink-2);cursor:pointer;
  background:#fff;border:1px solid var(--line-2);border-radius:99px;padding:6px 12px;
  transition:border-color .2s,color .2s,transform .2s}
.cht__sug button:hover{border-color:var(--blue-2);color:var(--blue-1);transform:translateY(-1px)}
.cht__sug button:disabled{opacity:.4;cursor:default;transform:none}

/* ---------- démo : refonte (avant / après) ---------- */
.ba{position:absolute;inset:0;overflow:hidden;cursor:ew-resize;
  -webkit-user-select:none;user-select:none;touch-action:pan-y}
.ba__s{position:absolute;inset:0;overflow:hidden}
.ba__s--new{clip-path:inset(0 0 0 var(--x,50%))}
.ba__bar{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:#fff;
  box-shadow:0 0 0 1px rgba(15,26,36,.18);pointer-events:none}
.ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:36px;height:36px;border-radius:50%;background:#fff;display:flex;align-items:center;
  justify-content:center;gap:3px;box-shadow:0 4px 14px rgba(15,26,36,.28);color:var(--blue-1);
  font-size:11px;letter-spacing:-1px}
.ba__tag{position:absolute;bottom:10px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:4px 9px;border-radius:2px;pointer-events:none}
.ba__tag--o{left:10px;background:rgba(15,26,36,.72);color:#fff}
.ba__tag--n{right:10px;background:var(--blue-1);color:#fff}

/* le « vieux site » — préfixe rf- pour éviter toute collision */
.rfo{height:100%;background:#e9e6de;font-family:"Times New Roman",Times,serif;color:#111;
  padding:14px;font-size:12px;text-align:center;overflow:hidden}
.rfo__hd{background:linear-gradient(#4a6fa8,#2b4a78);color:#fff;padding:9px;margin:-14px -14px 9px;
  font-size:17px;font-weight:700;text-shadow:1px 1px 0 rgba(0,0,0,.35)}
.rfo__nav{background:#c8c2b4;padding:4px;font-size:11px;margin-bottom:10px}
.rfo__nav a{color:#00c;text-decoration:underline;margin:0 5px}
.rfo__b{font-size:11.5px;line-height:1.45;text-align:justify;margin-bottom:8px}
.rfo__img{height:52px;background:repeating-linear-gradient(45deg,#cfcabb 0 8px,#c4bfb0 8px 16px);
  border:1px solid #a9a396;margin-bottom:8px;display:flex;align-items:center;justify-content:center;
  font-size:10px;color:#6b6659}
.rfo__ct{font-size:10px;color:#555;border-top:1px solid #b5afa1;padding-top:6px}

/* le « site refait » */
.rfn{height:100%;background:#fff;padding:16px 18px;overflow:hidden;display:flex;flex-direction:column}
.rfn__hd{display:flex;align-items:center;justify-content:space-between;padding-bottom:11px;
  border-bottom:1px solid var(--line)}
.rfn__lg{font-weight:800;font-size:12.5px;letter-spacing:-.03em}
.rfn__nv{display:flex;gap:11px;font-size:9.5px;color:var(--grey)}
.rfn__hero{position:relative;margin:12px 0 0;border-radius:3px;overflow:hidden;
  min-height:178px;background:var(--ink)}
.rfn__hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rfn__ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:flex-end;text-align:right;padding:14px 15px;
  background:linear-gradient(to left,rgba(8,15,22,.93) 18%,rgba(8,15,22,.55) 54%,rgba(8,15,22,0) 82%)}
.rfn__h1{color:#fff;font-size:20px;font-weight:800;letter-spacing:-.035em;line-height:1.08;
  margin:0 0 9px;max-width:15ch;text-shadow:0 1px 12px rgba(0,0,0,.4)}
.rfn__badge{position:absolute;top:11px;left:11px;display:flex;flex-direction:column;gap:1px;
  background:rgba(255,255,255,.94);color:var(--ink);border-radius:2px;padding:6px 9px;
  font-size:8px;letter-spacing:.09em;line-height:1.2}
.rfn__badge b{font-size:15px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--blue-1)}
.rfn__p{margin-top:11px;font-size:10.5px;color:var(--ink-2);line-height:1.5}
.rfn__cta{display:inline-flex;align-self:flex-end;background:var(--grad);color:#fff;
  font-size:10.5px;font-weight:600;padding:8px 15px;border-radius:2px}
.rfn__sect{margin:14px 0 0;padding-top:11px;border-top:1px solid var(--line);
  font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--grey)}
.rfn__grid{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
.rfn__grid div{background:#fff;padding:9px 8px}
.rfn__grid b{display:block;font-size:10px;margin-bottom:2px}
.rfn__grid span{font-size:8.5px;color:var(--grey);line-height:1.4}

/* ---------- démo : tableau de bord SaaS ---------- */
.sa{height:100%;padding:15px 17px;display:flex;flex-direction:column;gap:12px;background:#fff}
.sa__hd{display:flex;align-items:center;justify-content:space-between}
.sa__hd b{font-size:.9rem;letter-spacing:-.02em}
.sa__hd em{margin-left:auto;font-style:normal;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--grey)}
.sa__pdf{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--blue-1);
  border:1px solid var(--line-2);border-radius:2px;padding:5px 9px;margin-left:12px;
  transition:background .3s,border-color .3s,color .3s,transform .3s}
.sa__pdf::before{content:"⤓";font-size:11px;line-height:1}
.sa__pdf.is-hit{background:var(--grad);border-color:transparent;color:#fff;transform:translateY(-1px)}
.sa__toast{display:flex;align-items:center;gap:8px;margin-top:auto;
  border:1px solid #cfe0d6;background:#f2f7f4;border-radius:2px;padding:9px 11px;
  font-size:.78rem;color:#2c5a41;opacity:0;transform:translateY(6px);
  transition:opacity .45s ease,transform .45s ease}
.sa__toast.in{opacity:1;transform:none}
.sa__toast i{flex:none;width:6px;height:6px;border-radius:50%;background:#4caf7d}
.sa__kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.sa__kpi div{border:1px solid var(--line);border-radius:3px;padding:10px 11px}
.sa__kpi span{display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grey);margin-bottom:4px}
.sa__kpi b{font-size:1.32rem;font-weight:700;letter-spacing:-.03em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sa__ch{border:1px solid var(--line);border-radius:3px;padding:11px;display:flex;
  align-items:flex-end;gap:5px;height:112px}
.sa__ch i{flex:1;background:var(--grad);border-radius:1px;height:0;opacity:.85;
  transition:height .7s cubic-bezier(.2,.8,.3,1)}
.sa__ch i:last-child{opacity:1}
.sa__tb{width:100%;border-collapse:collapse;font-size:.78rem}
.sa__tb th{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey);text-align:left;font-weight:400;padding-bottom:5px}
.sa__tb td{padding:6px 0;border-top:1px solid var(--line);color:var(--ink-2)}
.sa__tb tr{opacity:0;transform:translateY(-4px);transition:opacity .35s,transform .35s}
.sa__tb tr.in{opacity:1;transform:none}
.sa__tb td:last-child,.sa__tb th:last-child{text-align:right}
.sa__ok{color:#3a7a58;font-family:var(--f-mono);font-size:10px}

/* ---------- rappel « ça tourne en direct » ---------- */
.lab__live{display:flex;align-items:flex-start;gap:8px;margin-top:14px;width:100%;
  font-size:.78rem;line-height:1.45;color:var(--grey)}
.lab__live i{flex:none;margin-top:6px;width:6px;height:6px;border-radius:50%;background:#4caf7d;
  box-shadow:0 0 0 3px rgba(76,175,125,.18);animation:live 2s ease-in-out infinite}
@keyframes live{0%,100%{opacity:1}50%{opacity:.35}}

@media (prefers-reduced-motion:reduce){
  .lap__body{transform:none!important;opacity:1!important}
  .ag__hubring,.ag__wave,.dots i,.au__caret,.lab__live i,.ags__glow{animation:none!important}
  .msg{animation:none!important}
}

/* ============================================================
   AGRANDISSEMENT D'UNE CAPTURE
   ============================================================ */
.lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,60px);background:rgba(9,16,23,.93);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:lbIn .24s ease}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb__f{margin:0;display:flex;flex-direction:column;gap:14px;max-width:min(1200px,100%)}
.lb__f img{display:block;max-width:100%;max-height:calc(100vh - 170px);object-fit:contain;
  border-radius:3px;background:#fff;box-shadow:0 50px 100px -40px rgba(0,0,0,.85)}
.lb__f figcaption{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.15em;
  text-transform:uppercase;color:#9db0be;text-align:center}
.lb__x{position:absolute;top:clamp(12px,2vw,26px);right:clamp(12px,2vw,26px);
  width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.08);color:#fff;
  transition:background .2s ease,border-color .2s ease}
.lb__x:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.55)}
.lb__nav{flex:none;width:46px;height:46px;border-radius:50%;cursor:pointer;
  font-size:22px;line-height:1;padding-bottom:3px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.08);color:#fff;
  transition:background .2s ease,border-color .2s ease}
.lb__nav:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.55)}
.lb__nav--p{margin-right:clamp(10px,2vw,26px)}
.lb__nav--n{margin-left:clamp(10px,2vw,26px)}
@media (max-width:620px){
  .lb{padding:14px}
  .lb__nav{position:absolute;bottom:18px;margin:0;width:42px;height:42px}
  .lb__nav--p{left:22px}
  .lb__nav--n{right:22px}
  .lb__f figcaption{padding:0 60px}
}
@media (prefers-reduced-motion:reduce){.lb{animation:none}}

/* ============================================================
   IMPRESSION
   ------------------------------------------------------------
   Presque personne ne s'en occupe. Chez Digital Systems c'est
   thématiquement juste : le site vend des cockpits qui
   s'exportent en PDF, il serait malvenu qu'il s'imprime mal.

   On garde ce qui a du sens sur papier — le propos, les
   réalisations, la méthode, les réponses — et on retire ce qui
   n'en a aucun : la navigation, les démonstrations animées, le
   formulaire, les mesures du navigateur.
   ============================================================ */
@media print {
  @page { margin: 16mm 14mm; }

  html, body { background: #fff !important; color: #000 !important; font-size: 10.5pt }
  .grid-lines, .hdr, .mnav, .lb, .burger, .lang,
  #demos, .hood, .qf, .signe__img, .marquee,
  .hero__viz, .ft__col, .btn { display: none !important }

  /* Fonds sombres et dégradés : illisibles à l'encre, coûteux en toner */
  .sec--dark, .sec--alt, .sec--form, .duo__b { background: #fff !important; color: #000 !important }
  .sec--dark h2, .sec--dark h3, .duo__b h3, .duo__b p, .sec--dark .sec__intro { color: #000 !important }
  .chips li { border-color: #999 !important; color: #000 !important }
  h1 em, h2 em, .hero__facts strong, .sa__kpi b {
    -webkit-text-fill-color: #000 !important; color: #000 !important; background: none !important }

  /* Rien ne doit rester invisible à cause d'une animation non jouée */
  /* Les dégradés d'ambiance laissent des taches grises à l'encre */
  .hero::before, .sec--dark::before, .ags__glow { display: none !important }

  /* Ces grilles dessinent leurs séparateurs avec un fond gris visible
     dans les interstices. À cheval sur deux pages, le fond reste seul
     en bas de la première : un rectangle gris sans contenu. On rend
     donc leurs bordures aux éléments eux-mêmes. */
  .cards, .cases__g, .duo { background: none !important; border: none !important; gap: 0 !important }
  .card, .case, .duo__b { border: 1px solid #d8dde1 !important }

  .reveal { opacity: 1 !important; transform: none !important }
  .lap__body { transform: none !important; opacity: 1 !important; box-shadow: none !important }
  .lab, .qf__ok, .signe, .lap__body, .cards, .show { box-shadow: none !important }

  /* Les réponses de la FAQ, dépliées : une question sans sa réponse
     n'apprend rien au lecteur d'un papier. */
  .faq details > *:not(summary) { display: block !important }
  .faq summary::after { display: none }

  /* Une adresse cliquable ne l'est plus sur papier : on l'écrit. */
  .show__link[href^="http"]::after,
  .ft a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #555 }

  .sec { padding: 14mm 0 !important; break-inside: auto }
  .sec__hd, .card, .step, .why, .case, .faq details, .signe,
  .show, .duo__b { break-inside: avoid }
  h1, h2, h3 { break-after: avoid }
  a { color: #000 !important; text-decoration: none }
}