/* ===========================================================================
   Polices
   Inter et Inter Tight en version variable, graisses 400 a 700, servies par
   le site. Deux sous-ensembles : « latin » couvre l'integralite du texte du
   site, accents et ligature œ compris ; « latin-ext » n'est la que pour un
   caractere rare ajoute plus tard, et ne part sur le reseau que si une page
   en contient un.
   font-display:swap fait paraitre le texte immediatement dans la police
   systeme, puis bascule : jamais de blanc a l'ecran en attendant.
   =========================================================================== */
@font-face{
  font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("assets/polices/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("assets/polices/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Inter Tight";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("assets/polices/inter-tight-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Inter Tight";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("assets/polices/inter-tight-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================
   Placier du Web : refonte
   Design system inspiré de clarasight.com (cloné au pixel)
   Couleurs : #514FEE (violet), #070628 (navy), #F7F7FF (fond)
   ========================================================= */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{min-height:100vh}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}
input,textarea{font:inherit}

/* ---------- Tokens ---------- */
:root{
  --navy:#070628;
  --navy-2:#0d0b3d;
  --indigo:#211f80;
  --purple:#514fee;
  --purple-600:#413fdc;
  --purple-700:#3634c4;
  --periwinkle:#8c8cf5;
  --lav-1:#bfbffa;
  --lav-2:#e6e6fc;
  --bg:#f7f7ff;
  --white:#f7f7ff;
  --pure-white:#ffffff;
  --ink:#070628;
  --ink-80:rgba(7,6,40,.82);
  --ink-60:rgba(7,6,40,.6);
  --ink-45:rgba(7,6,40,.45);
  --ink-12:rgba(7,6,40,.12);
  --ink-08:rgba(7,6,40,.08);
  --on-dark:#f7f7ff;
  --on-dark-60:rgba(247,247,255,.62);
  --on-dark-40:rgba(247,247,255,.4);
  --on-dark-12:rgba(247,247,255,.12);
  --radius-lg:28px;
  --radius-md:20px;
  --radius-sm:14px;
  --maxw:1280px;
  --pad:24px;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --font-head:"Inter Tight","Inter",-apple-system,"Segoe UI",Arial,sans-serif;
  --shadow-card:0 1px 2px rgba(7,6,40,.04),0 12px 32px -12px rgba(7,6,40,.12);
  --shadow-float:0 8px 40px -8px rgba(7,6,40,.18);
  --gradient-hero:linear-gradient(180deg,
      #070628 0%, #08071f 4%, #0c0a30 8%, #100e3a 12%, #16144a 16%,
      #1d1a63 22%, #2a2790 28%, #3d3ab6 36%, #514fee 50%,
      #8a8af4 65%, #bfbffa 78%, #e6e6fc 88%, #f7f7ff 100%);
}

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink-80);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  font-family:var(--font-head);
  color:var(--ink);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.02em;
}
.eyebrow{
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--purple);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--purple);
  box-shadow:0 0 0 4px rgba(81,79,238,.18);
}
.eyebrow.on-dark{color:var(--periwinkle)}
.eyebrow.on-dark::before{background:var(--periwinkle);box-shadow:0 0 0 4px rgba(140,140,245,.2)}

/* ---------- Layout ---------- */
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:110px}
.section-head{max-width:720px;margin-bottom:56px}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2{
  font-size:clamp(30px,4.4vw,46px);
  margin-top:18px;
}
.section-head p{
  font-size:clamp(16px,1.5vw,18px);
  color:var(--ink-60);
  margin-top:18px;
  max-width:620px;
}
.section-head.center p{margin-inline:auto}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 24px;border-radius:9999px;
  font-weight:500;font-size:15px;line-height:1;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease,color .18s ease;
  white-space:nowrap;
}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--purple);color:var(--on-dark)}
.btn-primary:hover{background:var(--purple-600);transform:translateY(-1px);box-shadow:0 10px 24px -8px rgba(81,79,238,.6)}
.btn-white{background:var(--pure-white);color:var(--ink)}
.btn-white:hover{transform:translateY(-1px);box-shadow:0 12px 30px -10px rgba(7,6,40,.5)}
.btn-ghost{background:rgba(247,247,255,.12);color:var(--on-dark);backdrop-filter:blur(6px);border:1px solid rgba(247,247,255,.16)}
.btn-ghost:hover{background:rgba(247,247,255,.2)}
.btn-dark{background:var(--ink);color:var(--on-dark)}
.btn-dark:hover{background:#141238;transform:translateY(-1px)}
.btn-outline{border:1px solid var(--ink-12);color:var(--ink);background:var(--pure-white)}
.btn-outline:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn-lg{padding:16px 30px;font-size:16px}

.link-arrow{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:500;color:var(--purple);font-size:15px;
  transition:gap .18s ease;
}
.link-arrow svg{width:15px;height:15px;transition:transform .18s ease}
.link-arrow:hover{gap:10px}
.link-arrow:hover svg{transform:translateX(2px)}

/* =========================================================
   Announcement bar
   ========================================================= */
.announce{
  background:var(--navy);
  color:var(--on-dark);
  text-align:center;
  font-size:13.5px;
  padding:9px 16px;
  position:relative;z-index:60;
}
.announce a{display:inline-flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap}
.announce .dot{width:6px;height:6px;border-radius:50%;background:var(--periwinkle);flex:none}
.announce .sep{opacity:.3}
.announce .go{color:var(--periwinkle);display:inline-flex;align-items:center;gap:5px;font-weight:500}

/* =========================================================
   Navbar (floating pill)
   ========================================================= */
.nav{
  position:sticky;top:14px;z-index:50;
  padding-inline:var(--pad);
  margin-top:14px;
}
.nav__inner{
  max-width:var(--maxw);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
  padding:10px 12px 10px 22px;
  border-radius:9999px;
  background:rgba(247,247,255,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(247,247,255,.5);
  box-shadow:var(--shadow-float);
  transition:background .3s ease,box-shadow .3s ease;
}
.nav.scrolled .nav__inner{background:rgba(255,255,255,.86)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:600;font-size:19px;letter-spacing:-.02em;color:var(--ink)}
.brand__mark{width:30px;height:30px;flex:none}
.brand__logo{height:62px;width:auto;display:block;margin-block:-15px}
.mobile-menu__head .brand__logo{height:54px;margin-block:-13px}
.footer__brand .brand__logo{height:68px;margin-block:-16px;filter:brightness(0) invert(1)}
.nav__menu{display:flex;align-items:center;gap:4px}
.nav__menu a{
  padding:9px 15px;border-radius:9999px;font-size:14.5px;font-weight:500;
  color:var(--ink-80);transition:background .16s ease,color .16s ease;
}
.nav__menu a:hover{background:var(--ink-08);color:var(--ink)}
.nav__menu a.active{background:var(--ink-08);color:var(--ink);font-weight:600}
.nav__right{display:flex;align-items:center;gap:8px}
.nav__right .signin{padding:9px 14px;font-size:14.5px;font-weight:500;color:var(--ink-80)}
.nav__right .signin:hover{color:var(--ink)}
.nav__burger{display:none;width:42px;height:42px;border-radius:12px;align-items:center;justify-content:center}
.nav__burger svg{width:22px;height:22px}

/* Mobile menu panel */
.mobile-menu{
  position:fixed;inset:0;z-index:70;
  background:rgba(7,6,40,.4);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .25s ease;
}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu__panel{
  position:absolute;top:14px;right:14px;left:14px;
  background:var(--pure-white);border-radius:24px;padding:22px;
  box-shadow:var(--shadow-float);
  transform:translateY(-12px);transition:transform .25s ease;
}
.mobile-menu.open .mobile-menu__panel{transform:none}
.mobile-menu__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.mobile-menu__close{width:40px;height:40px;border-radius:12px;background:var(--ink-08);display:flex;align-items:center;justify-content:center}
.mobile-menu a.m-link{display:block;padding:14px 12px;font-size:17px;font-weight:500;color:var(--ink);border-radius:12px}
.mobile-menu a.m-link:hover{background:var(--ink-08)}
.mobile-menu__cta{margin-top:14px;display:grid;gap:10px}
.mobile-menu__cta .btn{justify-content:center;width:100%}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  margin-top:-92px;padding-top:92px;
  background:var(--gradient-hero);
  overflow:hidden;
}
.hero__glow{
  position:absolute;left:50%;top:24%;transform:translateX(-50%);
  width:900px;height:520px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(140,140,245,.55),rgba(140,140,245,0) 62%);
  filter:blur(20px);opacity:.7;
}
.hero__inner{
  position:relative;z-index:2;
  max-width:900px;margin-inline:auto;
  text-align:center;
  padding:118px 24px 66px;
}
.hero h1{
  color:var(--on-dark);
  font-size:clamp(38px,6.4vw,66px);
  line-height:1.04;
  font-weight:400;
  letter-spacing:-.025em;
  background:linear-gradient(180deg,#ffffff,rgba(255,255,255,.82));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero p.sub{
  color:rgba(247,247,255,.78);
  font-size:clamp(16px,1.9vw,20px);
  line-height:1.5;
  max-width:600px;margin:22px auto 0;
}
.hero__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}

/* trusted logos */
.trusted{position:relative;z-index:2;padding-bottom:60px}
.trusted p{
  text-align:center;font-size:13.5px;color:rgba(7,6,40,.5);
  margin-bottom:30px;font-weight:500;
}
.trusted__row{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(26px,5vw,56px);
  flex-wrap:wrap;
}
/* Infinite logo marquee */
.marquee{
  position:relative;overflow:hidden;width:100%;
  padding-block:6px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
}
.marquee__track{
  display:flex;align-items:center;width:max-content;
  animation:marquee-scroll 38s linear infinite;
  will-change:transform;
}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{
  display:flex;align-items:center;flex:none;
  gap:clamp(40px,6vw,72px);
  padding-right:clamp(40px,6vw,72px);
}
/* --marquee-period vaut la largeur d'UN groupe, mesuree et posee par le
   script. La valeur de repli, 50%, correspond au cas a deux groupes : elle
   sert si le script ne tourne pas. Sans cette variable, la piste ne pouvait
   contenir que deux groupes, et un groupe plus etroit que la fenetre laissait
   un trou visible a chaque boucle. */
@keyframes marquee-scroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-1 * var(--marquee-period,50%)),0,0)}
}
/* =========================================================
   Secteurs : ruban a defilement continu
   Bati sur le composant .marquee du bandeau de places de marche.
   La regle de mouvement reduit de ce composant s'applique donc
   telle quelle : le ruban se replie en grille centree, soit la
   mise en page d'origine, sans une ligne de plus.
   ========================================================= */
.sectors__marquee{margin-top:38px}

.marquee--sectors{
  /* Place pour le soulevement au survol et l'ombre portee : sans elle,
     overflow:hidden les rognerait net. */
  padding-block:12px 24px;
  /* Fondu plus court que celui des logos : sur des cartes, un fondu a 10 %
     mangerait une carte entiere de chaque cote. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 46px,#000 calc(100% - 46px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 46px,#000 calc(100% - 46px),transparent 100%);
}
/* Duree posee par le script pour tenir une vitesse constante quelle que soit
   la largeur. La valeur de repli sert si le script ne tourne pas. */
.marquee--sectors .marquee__track{animation-duration:var(--scar-dur,54s)}
.marquee--sectors .marquee__group{
  align-items:stretch;
  gap:16px;padding-right:16px;
}
/* Largeur de carte independante du nombre de cartes visibles : le ruban est
   continu, il n'y a plus de notion de page a decouper. */
.marquee--sectors .sector{flex:0 0 clamp(228px,21vw,300px)}

/* Pauses. Le survol est deja prevu par .marquee ; on ajoute le focus clavier,
   l'appui du doigt (seul equivalent du survol sur ecran tactile) et la sortie
   d'ecran, qui evite d'animer ce que personne ne regarde. */
.marquee:focus-within .marquee__track,
.marquee.is-held .marquee__track,
.marquee.is-off .marquee__track{animation-play-state:paused}

@media (max-width:560px){
  .marquee--sectors{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);
  }
  .marquee--sectors .marquee__group{gap:14px;padding-right:14px}
}

/* Mouvement reduit : le composant .marquee arrete deja l'animation et masque
   le second groupe. On reprend ici la grille EXACTE d'origine, 4 puis 2 puis 1
   colonne, plutot que de laisser le flex-wrap decider. Laisse a lui-meme il
   produisait des lignes de 6 puis 2, ce qui n'est la mise en page de personne. */
@media (prefers-reduced-motion:reduce){
  .marquee--sectors .marquee__group:first-child{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:16px;padding-right:0;width:100%;
  }
  .marquee--sectors .sector{flex:none;width:auto;max-width:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:960px){
  .marquee--sectors .marquee__group:first-child{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce) and (max-width:560px){
  .marquee--sectors .marquee__group:first-child{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none;justify-content:center;width:100%}
  .marquee__group:not(:first-child){display:none}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee__group{flex-wrap:wrap;justify-content:center;padding-right:0}
}
/* Recolorable brand logos (symbols use currentColor) */
.mlogo{display:block;color:#0c0b2c;opacity:.82;transition:opacity .2s ease,transform .2s ease}
.mlogo:hover{opacity:1;transform:translateY(-1px)}
.lg-amazon{width:34px;height:34px}
.lg-fnac{width:36px;height:36px}
.lg-leroy{width:34px;height:34px}
.lg-leboncoin{width:104px;height:26px}
/* Cdiscount : mot-symbole allonge, rapport 4,66, donc cale sur la hauteur
   des autres mots-symboles. La Redoute : bloc carre plein, plus dense a
   surface egale, donc legerement sous la taille des pictogrammes. */
.lg-cdiscount{width:102px;height:22px}
.lg-decathlon{width:126px;height:19px}
.lg-laredoute{width:30px;height:30px}
/* text wordmarks for Decathlon / Cdiscount */

/* =========================================================
   Why (big statement)
   ========================================================= */
.why{padding-block:96px}
.why__inner{max-width:960px;margin-inline:auto;text-align:center}
.why__inner .eyebrow{margin-bottom:26px}
.why h2{
  font-size:clamp(26px,3.6vw,40px);
  font-weight:500;line-height:1.22;letter-spacing:-.02em;
  color:var(--ink);
}
.why h2 .muted{color:var(--ink-45)}
.why h2 .accent{color:var(--purple)}

/* =========================================================
   Data unification (feature spotlight)
   ========================================================= */
.data{padding-block:40px 100px}
.data__card{
  background:var(--navy);
  border-radius:var(--radius-lg);
  padding:clamp(30px,5vw,64px);
  color:var(--on-dark);
  position:relative;overflow:hidden;
  background-image:
     radial-gradient(1200px 400px at 80% -10%,rgba(81,79,238,.45),transparent 60%),
     radial-gradient(700px 320px at 0% 120%,rgba(81,79,238,.28),transparent 60%);
}
.data__grid{display:grid;grid-template-columns:1.02fr 1fr;gap:48px;align-items:center}
.data__text .eyebrow{margin-bottom:20px}
.data__text h2{color:var(--on-dark);font-size:clamp(26px,3.4vw,38px);line-height:1.1}
.data__text p{color:var(--on-dark-60);margin-top:18px;font-size:17px;max-width:440px}
.data__text .link-arrow{color:var(--periwinkle);margin-top:26px}

/* =========================================================
   Operating system / Services (feature cards)
   ========================================================= */
.services{padding-block:40px 110px}
.services__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;
}
.fcard{
  background:var(--pure-white);
  border:1px solid var(--ink-08);
  border-radius:var(--radius-md);
  padding:28px 26px 30px;
  box-shadow:var(--shadow-card);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  position:relative;overflow:hidden;
}
.fcard:hover{transform:translateY(-4px);box-shadow:0 18px 44px -16px rgba(7,6,40,.24);border-color:var(--ink-12)}
.fcard__icon{
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#efeefe,#e2e1fd);
  color:var(--purple);margin-bottom:22px;
  border:1px solid rgba(81,79,238,.14);
}
.fcard__icon svg{width:24px;height:24px}
.fcard .tag{font-size:12.5px;font-weight:600;color:var(--purple);letter-spacing:.02em;text-transform:uppercase}
.fcard h3{font-size:20px;margin:12px 0 10px;line-height:1.12}
.fcard p{color:var(--ink-60);font-size:15px;line-height:1.55}
.services__foot{display:flex;justify-content:center;margin-top:44px}

/* =========================================================
   Outcomes (dark stats)
   ========================================================= */
.outcomes{
  background:var(--navy);color:var(--on-dark);
  border-radius:var(--radius-lg);
  max-width:calc(var(--maxw) - var(--pad) * 2);margin-inline:auto;width:calc(100% - var(--pad) * 2);
  padding:clamp(46px,6vw,80px) clamp(24px,5vw,64px);
  position:relative;overflow:hidden;
  background-image:radial-gradient(900px 380px at 90% 0%,rgba(81,79,238,.4),transparent 62%);
}
.outcomes__wrap{max-width:var(--maxw);margin-inline:auto}
.outcomes__head{max-width:640px;margin-bottom:52px}
.outcomes__head .eyebrow{margin-bottom:18px}
.outcomes__head h2{color:var(--on-dark);font-size:clamp(28px,3.8vw,42px)}
.outcomes__head p{color:var(--on-dark-60);margin-top:18px;font-size:17px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stat{border-top:1px solid var(--on-dark-12);padding-top:26px}
.stat .num{
  font-family:var(--font-head);font-weight:500;letter-spacing:-.03em;
  font-size:clamp(40px,6vw,64px);line-height:1;
  background:linear-gradient(180deg,#ffffff,var(--periwinkle));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.stat .label{color:var(--on-dark-60);margin-top:14px;font-size:15px;max-width:230px}
.outcomes__wrap{position:relative;z-index:1}
.outcomes__chart{position:absolute;left:0;right:0;bottom:0;height:160px;display:flex;align-items:flex-end;gap:clamp(8px,2vw,20px);padding:0 clamp(24px,5vw,64px);opacity:.14;pointer-events:none;z-index:0}
.outcomes__chart span{flex:1;height:100%;background:linear-gradient(180deg,var(--periwinkle),transparent);border-radius:8px 8px 0 0;transform-origin:bottom;transform:scaleY(var(--h));animation:eq 2.8s ease-in-out infinite alternate;animation-delay:var(--d)}
@keyframes eq{to{transform:scaleY(calc(var(--h) * .55))}}
.outcomes__logos{margin-top:48px;padding-top:36px;border-top:1px solid var(--on-dark-12);display:flex;flex-direction:column;gap:20px}
.olog-label{font-size:13.5px;color:var(--on-dark-40);font-weight:500}
.olog-row{display:flex;align-items:center;gap:clamp(22px,4vw,44px);flex-wrap:wrap}
.olog{color:rgba(247,247,255,.6);transition:color .2s ease}
.olog:hover{color:rgba(247,247,255,.95)}
@media (prefers-reduced-motion:reduce){.outcomes__chart span{animation:none}}

/* =========================================================
   Featured testimonial
   ========================================================= */
.testi{padding-block:40px 96px}
.testi__card{
  position:relative;max-width:800px;margin-inline:auto;
  background:var(--pure-white);border:1px solid var(--ink-08);
  border-radius:var(--radius-lg);padding:clamp(30px,4vw,48px);
  box-shadow:var(--shadow-card);overflow:hidden;
}
.testi__card::before{content:"";position:absolute;top:-60px;right:-40px;width:200px;height:200px;background:radial-gradient(circle,rgba(252,87,87,.1),transparent 70%);pointer-events:none}
.testi__quote{position:absolute;top:6px;left:24px;font-family:var(--font-head);font-weight:700;font-size:120px;line-height:1;color:rgba(81,79,238,.1);pointer-events:none}
.testi__top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.malt-badge{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border-radius:9999px;background:rgba(252,87,87,.09);border:1px solid rgba(252,87,87,.2);font-weight:600;font-size:13.5px;color:#e1443f}
/* Logotype Malt : mot large et bas, rapport 3,51. Une boite carree lui
   laissait 71 % de vide vertical, d'ou son air minuscule partout. */
.malt-logo{width:30px;height:8.6px;color:#fc5757;flex:none}
.testi__rating{display:flex;align-items:center;gap:8px}
.testi__rating .stars{display:flex;gap:2px;color:#ffb020}
.testi__rating .stars svg{width:18px;height:18px}
.testi__rating b{font-family:var(--font-head);font-weight:600;font-size:17px;color:var(--ink)}
.testi blockquote{
  position:relative;font-family:var(--font-head);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(21px,2.9vw,30px);line-height:1.32;color:var(--ink);
}
.testi__author{margin-top:28px;padding-top:24px;border-top:1px solid var(--ink-08);display:flex;align-items:center;gap:14px}
.testi__avatar{
  width:50px;height:50px;border-radius:50%;flex:none;
  background:linear-gradient(150deg,var(--purple),var(--periwinkle));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-family:var(--font-head);font-size:19px
}
.testi__meta{display:flex;flex-direction:column;gap:2px}
.testi__meta .name{font-family:var(--font-head);font-weight:600;color:var(--ink);font-size:16px}
.testi__meta .role{color:var(--ink-45);font-size:13.5px}
.testi__link{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--purple);font-weight:500;font-size:14.5px;transition:gap .18s ease}
.testi__link svg{width:15px;height:15px}
.testi__link:hover{gap:10px}

/* Malt profile card (community banner) */
.malt-card{
  background:var(--pure-white);border-radius:20px;padding:24px;
  box-shadow:0 30px 60px -24px rgba(7,6,40,.5);min-width:300px;
}
.malt-card__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.malt-card__head .malt-logo{width:44px;height:12.5px}
.malt-verified{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#1f9d63}
.malt-verified svg{width:16px;height:16px}
.malt-card__profile{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.malt-card__ava{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:center 15%;flex:none;border:2px solid rgba(81,79,238,.15)}
.malt-card__name{display:block;font-family:var(--font-head);font-weight:600;font-size:17px;color:var(--ink)}
.malt-card__role{display:block;font-size:13.5px;color:var(--ink-45)}
.malt-card__rating{display:flex;align-items:center;gap:8px;padding:14px 0;border-top:1px solid var(--ink-08);border-bottom:1px solid var(--ink-08)}
.malt-card__rating .stars{display:flex;gap:2px;color:#ffb020}
.malt-card__rating .stars svg{width:18px;height:18px}
.malt-card__rating b{font-family:var(--font-head);font-weight:600;font-size:18px;color:var(--ink)}
.malt-card__reviews{font-size:12.5px;color:var(--ink-45);margin-left:auto}
.malt-card__chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.malt-chip{font-size:12.5px;font-weight:500;color:var(--ink-80);background:var(--bg);border:1px solid var(--ink-08);border-radius:9999px;padding:6px 12px}
.cbanner__text .btn{margin-top:26px}
@media (max-width:960px){.malt-card{min-width:0}.testi__author{flex-wrap:wrap}.testi__link{margin-left:0}}

/* Malt rating pill (dark sections) */
.malt-rating{display:inline-flex;align-items:center;gap:12px;margin:24px 0;padding:12px 18px;border-radius:14px;background:rgba(247,247,255,.07);border:1px solid var(--on-dark-12);transition:background .2s ease,transform .2s ease}
.malt-rating:hover{background:rgba(247,247,255,.13);transform:translateY(-1px)}
.malt-rating .malt-logo{width:38px;height:10.8px;color:#fc5757;flex:none}
.malt-rating__stars{display:flex;gap:2px;color:#ffb020}
.malt-rating__stars svg{width:16px;height:16px}
.malt-rating__txt{font-size:14px;color:var(--on-dark-60)}
.malt-rating__txt b{color:#fff;font-family:var(--font-head);font-weight:600}

/* =========================================================
   Method (dark section w/ checklist)
   ========================================================= */
.method{
  background:var(--navy);color:var(--on-dark);
  border-radius:var(--radius-lg);
  max-width:calc(var(--maxw) - var(--pad) * 2);margin-inline:auto;width:calc(100% - var(--pad) * 2);
  padding:clamp(46px,6vw,72px) clamp(24px,5vw,64px);
  position:relative;overflow:hidden;
  background-image:radial-gradient(800px 360px at 6% 110%,rgba(81,79,238,.34),transparent 60%);
}
.method__grid{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.method__text .eyebrow{margin-bottom:18px}
.method__text h2{color:var(--on-dark);font-size:clamp(28px,3.6vw,40px);line-height:1.1}
.method__text .btn{margin-top:30px}
.checklist{display:grid;gap:16px}
.checklist li{display:flex;gap:14px;align-items:flex-start;font-size:16.5px;color:var(--on-dark);}
.checklist .ci{
  width:26px;height:26px;border-radius:8px;flex:none;margin-top:1px;
  background:rgba(81,79,238,.24);border:1px solid rgba(140,140,245,.4);
  display:flex;align-items:center;justify-content:center;color:var(--periwinkle);
}
.checklist .ci svg{width:15px;height:15px}
.method__badges{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.badge-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:9999px;font-size:13.5px;font-weight:500;
  background:rgba(247,247,255,.07);border:1px solid var(--on-dark-12);color:var(--on-dark-60);
}
.badge-chip .d{width:7px;height:7px;border-radius:50%;background:var(--periwinkle)}

/* =========================================================
   Community banner (purple CTA)
   ========================================================= */
.cbanner{padding-block:96px}
.cbanner__inner{
  max-width:var(--maxw);margin-inline:auto;
  background:var(--purple);
  border-radius:var(--radius-lg);
  padding:clamp(40px,5vw,64px);
  color:#fff;position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.4fr auto;gap:32px;align-items:center;
  background-image:
    radial-gradient(600px 300px at 100% 0%,rgba(255,255,255,.22),transparent 60%),
    radial-gradient(500px 260px at 0% 120%,rgba(7,6,40,.28),transparent 60%);
}
.cbanner .eyebrow{color:#fff;margin-bottom:16px}
.cbanner .eyebrow::before{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.22)}
.cbanner h2{color:#fff;font-size:clamp(26px,3.4vw,38px);line-height:1.1}
.cbanner p{color:rgba(255,255,255,.82);margin-top:16px;max-width:520px;font-size:16.5px}
.cbanner__deco{position:absolute;right:-40px;top:-40px;width:260px;height:260px;opacity:.5;pointer-events:none}

/* =========================================================
   FAQ
   ========================================================= */
.faq{padding-block:100px}
.faq__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.faq__list{display:grid;gap:12px}
.faq-item{
  background:var(--pure-white);
  border:1px solid var(--ink-08);
  border-radius:var(--radius-sm);
  overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;
}
.faq-item.open{border-color:var(--ink-12);box-shadow:var(--shadow-card)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 22px;font-family:var(--font-head);font-weight:500;font-size:17.5px;
  color:var(--ink);text-align:left;letter-spacing:-.01em;
}
.faq-icon{
  width:28px;height:28px;border-radius:8px;flex:none;
  background:var(--ink-08);display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,transform .2s ease;color:var(--ink)
}
.faq-item.open .faq-icon{background:var(--purple);color:#fff;transform:rotate(45deg)}
.faq-icon svg{width:15px;height:15px}
.faq-a{max-height:0;overflow:hidden;transition:max-height .32s ease}
.faq-a__inner{padding:0 22px 22px;color:var(--ink-60);font-size:15.5px;line-height:1.6}

/* =========================================================
   Final CTA + Footer
   ========================================================= */
.final{padding-block:20px 100px}
.final__inner{
  max-width:var(--maxw);margin-inline:auto;text-align:center;
  padding:clamp(40px,5vw,60px) 24px;
}
.final h2{font-size:clamp(30px,4.4vw,48px);margin-bottom:20px}
.final p{color:var(--ink-60);font-size:18px;max-width:520px;margin:0 auto 30px}
.final__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Contact form */
.contact{padding-block:20px 100px}
.contact__inner{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start;
  background:var(--pure-white);border:1px solid var(--ink-08);
  border-radius:var(--radius-lg);padding:clamp(30px,4vw,52px);box-shadow:var(--shadow-card);
}
.contact__left .eyebrow{margin-bottom:18px}
.contact__left h2{font-size:clamp(26px,3.2vw,36px)}
.contact__left p{color:var(--ink-60);margin-top:16px;font-size:16.5px}
.contact__info{margin-top:28px;display:grid;gap:14px}
.contact__info a{display:inline-flex;align-items:center;gap:12px;color:var(--ink-80);font-weight:500}
.contact__info .ii{width:40px;height:40px;border-radius:12px;background:linear-gradient(160deg,#efeefe,#e2e1fd);display:flex;align-items:center;justify-content:center;color:var(--purple)}
.contact__info .ii svg{width:18px;height:18px}
form.form{display:grid;gap:16px}
.field{display:grid;gap:7px}
.field.row{grid-template-columns:1fr 1fr;gap:16px}
.field label{font-size:13.5px;font-weight:500;color:var(--ink-80)}
.field .req{color:var(--purple)}
.field input,.field textarea{
  width:100%;padding:13px 15px;border-radius:12px;
  border:1px solid var(--ink-12);background:#fbfbff;color:var(--ink);
  transition:border-color .16s ease,box-shadow .16s ease;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(81,79,238,.14)}
.field textarea{min-height:120px;resize:vertical}
form.form .btn{justify-content:center;margin-top:6px}
.form-note{font-size:13px;color:var(--ink-45);text-align:center}
.form-success{
  display:none;padding:14px 16px;border-radius:12px;background:rgba(81,79,238,.1);
  color:var(--purple-700);font-size:14.5px;font-weight:500;text-align:center;
}
.form-success.show{display:block}

/* Message d'erreur du formulaire. Meme gabarit que le succes, teinte rouge.
   role="alert" est porte par le HTML : le texte est annonce des son apparition. */
.form-error{
  display:none;margin-top:14px;padding:14px 16px;border-radius:12px;
  background:#fdecee;border:1px solid #f5c2ca;color:#8f1d2f;
  font-size:14.5px;line-height:1.55;
}
.form-error.show{display:block}

/* Pot de miel. Masque sans display:none ni visibility:hidden : certains
   robots ignorent les champs ainsi caches, alors qu'ils remplissent un champ
   simplement sorti du cadre. Retire du parcours clavier par tabindex="-1"
   et de l'arbre d'accessibilite par aria-hidden dans le HTML. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Footer */
/* ---- Advanced footer ---- */
.footer{position:relative;background:var(--navy);color:var(--on-dark);overflow:hidden;padding-top:90px}
.footer::before{content:"";position:absolute;top:-160px;left:50%;transform:translateX(-50%);width:1100px;height:520px;background:radial-gradient(ellipse at center,rgba(81,79,238,.32),transparent 66%);pointer-events:none}
.footer::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(140,140,245,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(140,140,245,.05) 1px,transparent 1px);background-size:52px 52px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 60%);mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 60%);pointer-events:none}
.footer__inner{position:relative;z-index:2;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* pre-footer CTA */
.footer__cta{
  background:
    radial-gradient(600px 300px at 100% 0%,rgba(255,255,255,.22),transparent 60%),
    radial-gradient(520px 260px at 0% 120%,rgba(7,6,40,.28),transparent 60%),
    linear-gradient(120deg,#514fee,#7a78f2 55%,#9491f6);
  border-radius:var(--radius-lg);
  padding:clamp(34px,4.5vw,54px);
  display:grid;grid-template-columns:1.4fr auto;gap:30px;align-items:center;
  position:relative;overflow:hidden;
  box-shadow:0 40px 80px -34px rgba(81,79,238,.7);
}
.footer__cta .eyebrow{color:#fff;margin-bottom:14px}
.footer__cta .eyebrow::before{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.22)}
.footer__cta h2{color:#fff;font-size:clamp(26px,3.4vw,40px);line-height:1.08}
.footer__cta p{color:rgba(255,255,255,.85);margin-top:12px;font-size:16.5px;max-width:460px}
.footer__cta-actions{display:flex;flex-direction:column;gap:12px;min-width:210px}
.footer__cta-actions .btn{justify-content:center;width:100%}

/* trust bar */
.footer__trust{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  margin-top:48px;padding-bottom:48px;border-bottom:1px solid var(--on-dark-12);
}
.trust-item{display:flex;align-items:center;gap:14px}
.trust-item>span:last-child{display:flex;flex-direction:column;gap:2px}
.trust-item .ti{width:46px;height:46px;border-radius:13px;flex:none;background:rgba(81,79,238,.2);border:1px solid rgba(140,140,245,.35);color:var(--periwinkle);display:flex;align-items:center;justify-content:center}
.trust-item .ti svg{width:23px;height:23px}
.trust-item .tv{font-family:var(--font-head);font-weight:600;font-size:18px;color:#fff;line-height:1.05}
.trust-item .tl{font-size:12.5px;color:var(--on-dark-60);margin-top:2px}
.trust-item .stars{display:flex;gap:1px;color:#ffb020}
.trust-item .stars svg{width:14px;height:14px}

/* main grid */
.footer__main{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px;padding-top:52px}
.footer__brand .brand{color:var(--on-dark);margin-bottom:20px}
.footer__brand p{color:var(--on-dark-60);font-size:15px;max-width:290px;line-height:1.6}
.footer__contact{display:grid;gap:10px;margin-top:22px}
.footer__contact a{display:inline-flex;align-items:center;gap:11px;color:var(--on-dark);font-weight:500;font-size:14.5px;transition:color .16s ease;width:fit-content}
.footer__contact a:hover{color:var(--periwinkle)}
.footer__contact .ci{width:34px;height:34px;border-radius:10px;flex:none;background:rgba(247,247,255,.07);border:1px solid var(--on-dark-12);display:flex;align-items:center;justify-content:center;color:var(--periwinkle)}
.footer__contact .ci svg{width:16px;height:16px}
.footer__brand .socials{display:flex;gap:10px;margin-top:24px}
.footer__brand .socials a{width:40px;height:40px;border-radius:11px;background:rgba(247,247,255,.08);border:1px solid var(--on-dark-12);display:flex;align-items:center;justify-content:center;color:var(--on-dark);transition:background .18s ease,transform .18s ease}
.footer__brand .socials a:hover{background:var(--purple);transform:translateY(-2px);border-color:transparent}
.footer__brand .socials svg{width:18px;height:18px}
/* Le logotype Malt n'est pas une icone carree comme LinkedIn : il lui
   faut sa propre boite, sinon il se retrouve deux fois plus petit. */
.footer__brand .socials .malt-mark{width:26px;height:7.4px}
.footer__col h3{color:var(--on-dark);font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:18px;opacity:.65}
.footer__col a{display:block;color:var(--on-dark-60);font-size:15px;padding:6px 0;transition:color .16s ease,transform .16s ease}
.footer__col a:hover{color:var(--on-dark);transform:translateX(3px)}

/* giant watermark */
.footer__word{position:relative;z-index:1;margin-top:44px;text-align:center;font-family:var(--font-head);font-weight:700;letter-spacing:-.03em;font-size:clamp(34px,11.4vw,134px);line-height:.82;background:linear-gradient(180deg,rgba(140,140,245,.2),rgba(140,140,245,.02));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;user-select:none;pointer-events:none;white-space:nowrap;overflow:hidden}

.footer__bottom{
  position:relative;z-index:2;
  /* Pas de remontee : elle faisait passer la bordure haute a travers
     le filigrane geant place juste au-dessus. */
  margin-top:6px;
  /* Le bouton WhatsApp flotte a 20 px du bas et mesure 56 px : sans cette
     reserve il passe par-dessus les mentions legales. 20 + 56 + 20 de
     respiration. */
  padding:24px 0 96px;
  border-top:1px solid var(--on-dark-12);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:var(--on-dark-40);font-size:13.5px;
}
.footer__bottom a{color:var(--on-dark-60);transition:color .16s ease}
.footer__bottom a:hover{color:var(--on-dark)}

@media (max-width:960px){
  .footer__cta{grid-template-columns:1fr}
  .footer__trust{grid-template-columns:repeat(2,1fr);gap:22px}
  .footer__main{grid-template-columns:1fr 1fr;gap:32px}
  .footer__brand{grid-column:1/-1}
}
@media (max-width:560px){
  .footer__trust{grid-template-columns:1fr}
  .footer__main{grid-template-columns:1fr}
}

/* =========================================================
   Interior pages
   ========================================================= */
.footer__legal{display:flex;gap:18px;flex-wrap:wrap}
.footer__credit{color:var(--on-dark-40)}
.footer__credit a{color:var(--on-dark-60);text-decoration:none}
.footer__credit a:hover{color:var(--on-dark);text-decoration:underline}
.footer__legal a{color:var(--on-dark-40)}
.footer__legal a:hover{color:var(--on-dark)}

/* Page hero (compact gradient) */
.page-hero{
  position:relative;margin-top:-92px;padding:150px 0 70px;
  background:linear-gradient(180deg,#070628 0%,#0d0b34 14%,#1d1a63 34%,#3d3ab6 62%,#6f6df0 84%,#8f8ef6 100%);
  overflow:hidden;text-align:center;
}
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:80px;background:linear-gradient(180deg,transparent,var(--bg))}
.page-hero__glow{position:absolute;left:50%;top:30%;transform:translateX(-50%);width:820px;height:420px;background:radial-gradient(ellipse at center,rgba(140,140,245,.5),transparent 62%);filter:blur(24px);pointer-events:none}
.page-hero .inner{position:relative;z-index:2;max-width:820px;margin-inline:auto;padding-inline:24px}
.page-hero .eyebrow{color:var(--lav-1);justify-content:center;margin-bottom:20px}
.page-hero .eyebrow::before{background:var(--lav-1);box-shadow:0 0 0 4px rgba(191,191,250,.2)}
.page-hero h1{
  color:#fff;font-weight:400;letter-spacing:-.025em;
  font-size:clamp(34px,5.4vw,58px);line-height:1.05;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.82));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.page-hero p.lead{color:rgba(247,247,255,.8);font-size:clamp(16px,1.8vw,20px);max-width:600px;margin:20px auto 0;line-height:1.5}
.page-hero__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.breadcrumb{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:26px;font-size:13px;color:rgba(247,247,255,.5)}
.breadcrumb a{color:rgba(247,247,255,.7)}
.breadcrumb a:hover{color:#fff}

/* Approach band */
.approach{padding-block:80px 20px}
.approach__inner{max-width:940px;margin-inline:auto;text-align:center}
.approach h2{font-size:clamp(24px,3.2vw,36px);line-height:1.2;font-weight:500}
.approach h2 .muted{color:var(--ink-45)}
.approach__pills{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:9999px;background:var(--pure-white);border:1px solid var(--ink-08);box-shadow:var(--shadow-card);font-weight:500;font-size:14.5px}
.pill svg{width:16px;height:16px;color:var(--purple)}

/* Service detail rows */
.srow{padding-block:60px}
.srow__grid{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.srow.rev .srow__media{order:-1}
.srow__text .tag{font-size:12.5px;font-weight:600;color:var(--purple);letter-spacing:.03em;text-transform:uppercase}
.srow__text h2{font-size:clamp(26px,3.4vw,38px);margin:10px 0 14px;line-height:1.1}
.srow__text .desc{color:var(--ink-60);font-size:17px;margin-bottom:22px}
.deliverables{display:grid;gap:12px;margin-bottom:24px}
.deliverables li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--ink-80)}
.deliverables .ci{width:24px;height:24px;border-radius:7px;flex:none;margin-top:1px;background:rgba(81,79,238,.1);color:var(--purple);display:flex;align-items:center;justify-content:center}
.deliverables .ci svg{width:14px;height:14px}
.miniq{background:linear-gradient(160deg,#f2f1ff,#eceafd);border:1px solid rgba(81,79,238,.14);border-radius:16px;padding:20px 22px;margin-bottom:24px}
.miniq .q{display:flex;gap:10px;align-items:center;font-family:var(--font-head);font-weight:600;color:var(--ink);font-size:15.5px;margin-bottom:8px}
.miniq .q svg{width:18px;height:18px;color:var(--purple);flex:none}
.miniq p{color:var(--ink-60);font-size:14.5px;line-height:1.55}
.srow__media{position:relative}
.mockup{background:var(--navy);border-radius:24px;padding:26px;box-shadow:var(--shadow-float);position:relative;overflow:hidden;background-image:radial-gradient(700px 300px at 100% 0%,rgba(81,79,238,.4),transparent 60%)}
.mockup.light{background:var(--pure-white);border:1px solid var(--ink-08);background-image:radial-gradient(600px 260px at 100% 0%,rgba(81,79,238,.08),transparent 60%)}

/* Tools band */
.tools{padding-block:70px}
.tools__inner{max-width:var(--maxw);margin-inline:auto;background:var(--pure-white);border:1px solid var(--ink-08);border-radius:var(--radius-lg);padding:clamp(32px,4vw,48px);box-shadow:var(--shadow-card);text-align:center}
.tools h3{font-size:clamp(22px,2.8vw,30px);margin-bottom:10px}
.tools p{color:var(--ink-60);max-width:560px;margin:0 auto 30px}
.tools__row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.tool-chip{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:14px;background:var(--bg);border:1px solid var(--ink-08);font-weight:600;font-family:var(--font-head);color:var(--ink);font-size:15px;transition:transform .18s ease,box-shadow .18s ease}
.tool-chip:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.tool-chip .td{width:10px;height:10px;border-radius:3px}
.tool-chip .tool-logo{width:24px;height:24px;object-fit:contain;border-radius:6px;flex:none}

/* Steps / timeline */
.steps{padding-block:90px}
.steps__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:52px}
.step{position:relative;padding:28px 24px;background:var(--pure-white);border:1px solid var(--ink-08);border-radius:var(--radius-md);box-shadow:var(--shadow-card)}
.step__n{width:44px;height:44px;border-radius:12px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:600;font-size:18px;margin-bottom:18px}
.step h3{font-size:18px;margin-bottom:8px}
.step p{color:var(--ink-60);font-size:14.5px;line-height:1.55}
.step:not(:last-child)::after{content:"";position:absolute;top:50px;right:-13px;width:26px;height:2px;background:repeating-linear-gradient(90deg,var(--ink-12) 0 4px,transparent 4px 8px);z-index:2}

/* Pricing */
.pricing{padding-block:40px 100px}
.pricing__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px;align-items:stretch}
.price-card{display:flex;flex-direction:column;background:var(--pure-white);border:1px solid var(--ink-08);border-radius:var(--radius-lg);padding:32px 28px;box-shadow:var(--shadow-card);position:relative;transition:transform .2s ease,box-shadow .2s ease}
.price-card:hover{transform:translateY(-4px);box-shadow:0 20px 48px -18px rgba(7,6,40,.24)}
.price-card.feat{background:var(--navy);color:var(--on-dark);border-color:transparent;background-image:radial-gradient(600px 300px at 100% 0%,rgba(81,79,238,.5),transparent 60%)}
.price-card.feat h3,.price-card.feat .price{color:#fff}
.price-card.feat .pc-desc{color:var(--on-dark-60)}
.price-card.feat .pc-list li{color:var(--on-dark)}
.price-card.feat .pc-list .ci{background:rgba(140,140,245,.22);color:var(--periwinkle)}
.pc-badge{position:absolute;top:20px;right:20px;font-size:11.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#fff;background:var(--purple);padding:5px 11px;border-radius:9999px}
.price-card .pc-name{font-size:13px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--purple)}
.price-card.feat .pc-name{color:var(--periwinkle)}
.price-card h3{font-size:23px;margin:10px 0 6px}
.price-card .price{font-family:var(--font-head);font-weight:600;font-size:34px;letter-spacing:-.02em;color:var(--ink);margin-bottom:4px}
.price-card .price small{font-size:14px;font-weight:500;color:var(--ink-45)}
.price-card.feat .price small{color:var(--on-dark-60)}
.price-card .pc-desc{color:var(--ink-60);font-size:14.5px;margin-bottom:22px;min-height:44px}
.pc-list{display:grid;gap:12px;margin-bottom:26px;flex:1}
.pc-list li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px}
.pc-list .ci{width:22px;height:22px;border-radius:6px;flex:none;margin-top:1px;background:rgba(81,79,238,.1);color:var(--purple);display:flex;align-items:center;justify-content:center}
.pc-list .ci svg{width:13px;height:13px}
.price-card .btn{justify-content:center;width:100%}

/* Presentation / About */
.about-intro{padding-block:70px}
.about-intro__grid{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.about-portrait{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/5;background:linear-gradient(160deg,#514fee,#8c8cf5);box-shadow:var(--shadow-float);display:flex;align-items:flex-end;justify-content:center}
.about-portrait .ap-mono{font-family:var(--font-head);font-weight:700;font-size:clamp(90px,16vw,150px);color:rgba(255,255,255,.9);position:absolute;top:44%;left:50%;transform:translate(-50%,-50%)}
.about-portrait .ap-tag{position:relative;z-index:3;margin:0 0 22px;background:rgba(7,6,40,.45);backdrop-filter:blur(8px);color:#fff;padding:10px 18px;border-radius:9999px;font-size:14px;font-weight:500;border:1px solid rgba(255,255,255,.2)}
.about-portrait .ap-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%;z-index:0}
.about-portrait--photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(155deg,rgba(81,79,238,.28),rgba(140,140,245,.12) 45%,transparent 70%);mix-blend-mode:soft-light}
.about-portrait--photo::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 45%,rgba(7,6,40,.6) 100%)}
.about-portrait--ring{position:absolute;inset:0;z-index:2;border-radius:24px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.about-story{max-width:820px;margin-inline:auto}
.about-story h2{font-size:clamp(24px,3.2vw,34px);margin:44px 0 14px}
.about-story h2:first-child{margin-top:0}
.about-story p{color:var(--ink-70,rgba(7,6,40,.72));font-size:17px;line-height:1.7;margin-bottom:16px;color:var(--ink-80)}
.about-story .lead{font-size:19px;color:var(--ink)}

/* Sectors grid */
.sectors{padding-block:80px}
.sectors__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.sector{background:var(--pure-white);border:1px solid var(--ink-08);border-radius:16px;padding:22px;box-shadow:var(--shadow-card);transition:transform .18s ease,box-shadow .18s ease}
.sector:hover{transform:translateY(-3px);box-shadow:0 16px 36px -16px rgba(7,6,40,.2)}
.sector .si{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#efeefe,#e2e1fd);color:var(--purple);margin-bottom:14px}
.sector .si svg{width:24px;height:24px}
.sector h3{font-size:16px;margin-bottom:6px}
.sector p{color:var(--ink-60);font-size:13.5px;line-height:1.5}

/* Values / highlights */
.values{padding-block:20px 90px}
.values__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.value{padding:28px;background:var(--pure-white);border:1px solid var(--ink-08);border-radius:var(--radius-md);box-shadow:var(--shadow-card)}
.value .vi{width:50px;height:50px;border-radius:13px;background:linear-gradient(160deg,#efeefe,#e2e1fd);color:var(--purple);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.value .vi svg{width:24px;height:24px}
.value h3{font-size:19px;margin-bottom:8px}
.value p{color:var(--ink-60);font-size:15px;line-height:1.6}

/* Contact page */
.contact-page{padding-block:80px}
.contact-page__grid{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start}
.contact-cards{display:grid;gap:16px}
.ccard{display:flex;gap:16px;align-items:center;padding:22px;background:var(--pure-white);border:1px solid var(--ink-08);border-radius:18px;box-shadow:var(--shadow-card);transition:transform .18s ease,box-shadow .18s ease}
.ccard:hover{transform:translateY(-2px);box-shadow:0 14px 32px -14px rgba(7,6,40,.2)}
.ccard .ci{width:52px;height:52px;border-radius:14px;flex:none;background:linear-gradient(160deg,#efeefe,#e2e1fd);color:var(--purple);display:flex;align-items:center;justify-content:center}
.ccard .ci svg{width:24px;height:24px}
.ccard .cl{font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-45)}
.ccard .cv{font-family:var(--font-head);font-weight:600;font-size:18px;color:var(--ink)}
.ccard .cv:hover{color:var(--purple)}
.contact-note{margin-top:20px;display:flex;gap:12px;align-items:flex-start;padding:18px 20px;border-radius:14px;background:rgba(81,79,238,.08);color:var(--purple-700);font-size:14.5px}
.contact-note svg{width:20px;height:20px;flex:none;margin-top:1px}
.contact-form-wrap{background:var(--pure-white);border:1px solid var(--ink-08);border-radius:var(--radius-lg);padding:clamp(28px,3.5vw,44px);box-shadow:var(--shadow-card)}
.contact-form-wrap h2{font-size:clamp(22px,2.8vw,30px);margin-bottom:8px}
.contact-form-wrap>p{color:var(--ink-60);margin-bottom:26px}

/* Blog */
.blog-list{padding-block:80px}
.blog-feature{max-width:var(--maxw);margin:0 auto 40px;display:grid;grid-template-columns:1.1fr .9fr;gap:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--navy);color:var(--on-dark);box-shadow:var(--shadow-float)}
.blog-feature__img{min-height:320px;background:linear-gradient(150deg,#514fee,#8c8cf5);position:relative;overflow:hidden}
.blog-feature__body{padding:clamp(30px,4vw,48px);display:flex;flex-direction:column;justify-content:center}
.blog-feature .cat{font-size:12.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--periwinkle);margin-bottom:14px}
.blog-feature h2{color:#fff;font-size:clamp(24px,3vw,32px);line-height:1.15;margin-bottom:14px}
.blog-feature p{color:var(--on-dark-60);font-size:16px;margin-bottom:22px}
.blog-grid{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bcard{display:flex;flex-direction:column;background:var(--pure-white);border:1px solid var(--ink-08);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card);transition:transform .2s ease,box-shadow .2s ease}
.bcard:hover{transform:translateY(-4px);box-shadow:0 20px 44px -18px rgba(7,6,40,.24)}
.bcard__img{aspect-ratio:16/10;position:relative;overflow:hidden}
/* Les vignettes remplacent les illustrations SVG : elles doivent remplir
   leur cadre sans se deformer, quel que soit le rapport de la source. */
.bcard__img img,.blog-feature__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bcard__body{padding:24px;display:flex;flex-direction:column;flex:1}
.bcard .cat{font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--purple);margin-bottom:10px}
.bcard h3{font-size:19px;line-height:1.2;margin-bottom:10px}
.bcard p{color:var(--ink-60);font-size:14.5px;line-height:1.55;flex:1;margin-bottom:16px}
.bcard .meta{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-45)}
.bcard .link-arrow{font-size:14px;margin-top:auto}
.blog-cta{padding-block:20px 100px;text-align:center}

/* Legal pages */
.legal{padding-block:70px 90px}
.legal__inner{max-width:800px;margin-inline:auto}
.legal h2{font-size:24px;margin:38px 0 14px}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:var(--ink-70,rgba(7,6,40,.72));font-size:15.5px;line-height:1.7;margin-bottom:12px;color:var(--ink-80)}
.legal ul{padding-left:22px;margin-bottom:16px;list-style:disc}
.legal a{color:var(--purple);text-decoration:underline}
.legal strong{color:var(--ink)}

/* CTA band (reusable) */
.ctaband{padding-block:20px 100px}
.ctaband__inner{max-width:var(--maxw);margin-inline:auto;background:var(--navy);border-radius:var(--radius-lg);padding:clamp(44px,6vw,72px);text-align:center;color:var(--on-dark);position:relative;overflow:hidden;background-image:radial-gradient(700px 340px at 50% 0%,rgba(81,79,238,.5),transparent 62%)}
.ctaband__inner h2{color:#fff;font-size:clamp(28px,4vw,44px);margin-bottom:16px}
.ctaband__inner p{color:var(--on-dark-60);font-size:18px;max-width:520px;margin:0 auto 30px}
.ctaband__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

@media (max-width:960px){
  .srow__grid,.about-intro__grid,.contact-page__grid,.blog-feature{grid-template-columns:1fr;gap:34px}
  .srow.rev .srow__media{order:0}
  .steps__grid{grid-template-columns:repeat(2,1fr)}
  .step:nth-child(2)::after{display:none}
  .pricing__grid,.values__grid,.blog-grid{grid-template-columns:1fr}
  .sectors__grid{grid-template-columns:repeat(2,1fr)}
  .step::after{display:none}
}
@media (max-width:720px){
  .sectors__grid{grid-template-columns:1fr 1fr}
  .steps__grid{grid-template-columns:1fr}
}

/* =========================================================
   Homepage enrichments : richer services bento, sectors,
   expert strip, benefits, tools band
   ========================================================= */

/* ---- Services bento ---- */
.services__grid{grid-template-columns:repeat(3,1fr);gap:20px;grid-auto-rows:1fr}
.fcard{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#ffffff,#fafaff);
  border:1px solid var(--ink-08);border-radius:22px;
  padding:30px 28px;
  box-shadow:0 1px 2px rgba(7,6,40,.04),0 14px 34px -22px rgba(7,6,40,.3);
  transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease,border-color .28s ease;
}
.fcard::before{content:"";position:absolute;top:-55px;right:-55px;width:190px;height:190px;background:radial-gradient(circle,rgba(81,79,238,.16),transparent 68%);opacity:.7;transition:opacity .3s ease;pointer-events:none}
.fcard:hover{transform:translateY(-6px);box-shadow:0 28px 56px -22px rgba(81,79,238,.42);border-color:rgba(81,79,238,.28)}
.fcard:hover::before{opacity:1}
.fcard:hover .fcard__icon{transform:scale(1.07) rotate(-3deg)}
.fcard__icon{
  width:58px;height:58px;border-radius:16px;
  background:linear-gradient(155deg,#6f6df0,#9d9df8);
  color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:22px;
  box-shadow:0 12px 26px -10px rgba(81,79,238,.7),inset 0 1px 0 rgba(255,255,255,.4);
  border:none;transition:transform .28s ease;position:relative;z-index:1;
}
.fcard__icon svg{width:26px;height:26px}
.fcard h3{margin-top:12px}
.fcard .link-arrow{margin-top:18px}
.fcard>*{position:relative;z-index:1}
.fcard__mini{margin-top:auto;padding-top:20px;position:relative;z-index:1}
.fcard__mini .mbox{background:linear-gradient(160deg,#f5f4ff,#eceafd);border:1px solid rgba(81,79,238,.12);border-radius:14px;padding:13px 15px;overflow:hidden}
.fcard__mini svg{display:block;width:100%;height:auto}

/* Featured (span 2, split with visual) */
.fcard--feat{grid-column:span 2;display:grid;grid-template-columns:1.02fr .98fr;gap:30px;align-items:center;padding:34px}
.fcard--feat .fc-body{display:flex;flex-direction:column}
.fc-visual{
  align-self:stretch;border-radius:18px;overflow:hidden;position:relative;
  background:var(--navy);min-height:210px;display:flex;
  background-image:radial-gradient(600px 260px at 100% 0%,rgba(81,79,238,.5),transparent 60%);
  box-shadow:0 20px 44px -20px rgba(7,6,40,.5);
}
.fc-visual svg{width:100%;height:100%;display:block}

/* Wide banner (span 3) */

/* ---- Sectors (colorful) ---- */
.sector{
  position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--ink-08);border-radius:18px;padding:24px 22px;
  box-shadow:0 1px 2px rgba(7,6,40,.04),0 12px 28px -20px rgba(7,6,40,.3);
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
.sector::before{content:"";position:absolute;top:-40px;right:-40px;width:120px;height:120px;border-radius:50%;background:var(--accbg,#efeefe);opacity:.5;transition:opacity .3s ease;pointer-events:none}
.sector:hover{transform:translateY(-5px);box-shadow:0 16px 36px -16px rgba(7,6,40,.2);border-color:var(--acc,rgba(81,79,238,.3))}
.sector:hover::before{opacity:.85}
.sector .si{
  width:50px;height:50px;border-radius:14px;position:relative;z-index:1;
  background:var(--accbg,linear-gradient(160deg,#efeefe,#e2e1fd));
  color:var(--acc,var(--purple));
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  box-shadow:inset 0 0 0 1px rgba(7,6,40,.04);
}
.sector .si svg{width:25px;height:25px}
.sector h3,.sector p{position:relative;z-index:1}

/* ---- Expert strip ---- */
.expert{padding-block:96px}
.expert__grid{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:center}
.expert__photo{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:1/1;box-shadow:var(--shadow-float);background:linear-gradient(160deg,#514fee,#8c8cf5)}
.expert__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 16%}
.expert__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(81,79,238,.32),rgba(140,140,245,.1) 45%,transparent 68%);mix-blend-mode:soft-light}
.expert__photo::before{content:"";position:absolute;inset:0;z-index:2;border-radius:26px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.expert__badge{position:absolute;left:18px;bottom:18px;z-index:3;display:flex;align-items:center;gap:10px;background:rgba(7,6,40,.5);backdrop-filter:blur(8px);color:#fff;padding:10px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.18)}
.expert__badge .d{width:9px;height:9px;border-radius:50%;background:#5ad19b;box-shadow:0 0 0 4px rgba(90,209,155,.25)}
.expert__badge b{font-family:var(--font-head);font-weight:600;font-size:14px}
.expert__badge span{display:block;font-size:12px;color:rgba(247,247,255,.6)}
.expert__content h2{font-size:clamp(28px,3.6vw,42px);line-height:1.08;margin:16px 0 18px}
.expert__content p{color:var(--ink-60);font-size:17px;line-height:1.7;margin-bottom:16px}
.expert__stats{display:flex;gap:14px;flex-wrap:wrap;margin:26px 0 28px}
.expert__stat{flex:1;min-width:120px;padding:16px 18px;border-radius:14px;background:var(--pure-white);border:1px solid var(--ink-08);box-shadow:var(--shadow-card)}
.expert__stat .n{font-family:var(--font-head);font-weight:600;font-size:26px;letter-spacing:-.02em;background:linear-gradient(180deg,var(--purple),var(--periwinkle));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.expert__stat .l{font-size:12.5px;color:var(--ink-45);margin-top:2px}
.expert__cta{display:flex;gap:12px;flex-wrap:wrap}

/* ---- Benefits ---- */
.benefits{padding-block:96px}
.benefits__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px}
.benefit{
  position:relative;overflow:hidden;padding:28px 24px;border-radius:20px;
  background:linear-gradient(180deg,#ffffff,#fafaff);border:1px solid var(--ink-08);
  box-shadow:0 1px 2px rgba(7,6,40,.04),0 14px 34px -22px rgba(7,6,40,.3);
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
.benefit::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--purple),var(--periwinkle));transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.benefit:hover{transform:translateY(-6px);box-shadow:0 28px 54px -20px rgba(81,79,238,.4);border-color:rgba(81,79,238,.3)}
.benefit:hover::after{transform:scaleX(1)}
.benefit:hover .benefit__ic{transform:scale(1.08) rotate(-4deg)}
.benefit:hover .benefit__n{color:rgba(81,79,238,.2)}
.benefit__n{position:absolute;top:14px;right:22px;font-family:var(--font-head);font-weight:700;font-size:60px;line-height:1;color:rgba(81,79,238,.09);pointer-events:none;transition:color .25s ease;z-index:0}
.benefit__ic{position:relative;z-index:1;width:54px;height:54px;border-radius:16px;background:linear-gradient(155deg,#6f6df0,#9d9df8);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:0 12px 26px -10px rgba(81,79,238,.6),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.benefit__ic svg{width:25px;height:25px}
.benefit h3{position:relative;z-index:1;font-size:18px;margin-bottom:8px;line-height:1.2}
.benefit p{position:relative;z-index:1;color:var(--ink-60);font-size:14.5px;line-height:1.55}

@media (max-width:960px){
  .services__grid{grid-template-columns:repeat(2,1fr)}
  .fcard--feat{grid-column:span 2;grid-template-columns:1fr}
  .fcard--feat .fc-visual{min-height:190px}
  /* 210 px de panneau sous le texte se lisent comme un trou sur mobile.
     On resserre : le motif reste lisible, le vide disparait. */
  .fc-visual{min-height:150px}
  .benefits__grid{grid-template-columns:repeat(2,1fr)}
  .expert__grid{grid-template-columns:1fr;gap:36px}
  .expert__photo{max-width:420px;margin-inline:auto;width:100%}
}
@media (max-width:720px){
  .services__grid{grid-template-columns:1fr}
  .fcard--feat{grid-column:span 1}
  .benefits__grid{grid-template-columns:1fr}
}

/* =========================================================
   Section photos (modern image treatment)
   ========================================================= */
.imgframe{position:relative;border-radius:24px;overflow:hidden;box-shadow:0 26px 60px -26px rgba(7,6,40,.45);isolation:isolate;height:100%}
.imgframe img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.benefits__media:hover .imgframe img,.tools__media:hover .imgframe img,.values__media:hover .imgframe img,.sectors__img:hover .imgframe img{transform:scale(1.05)}
.imgframe::after{content:"";position:absolute;inset:0;border-radius:24px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);pointer-events:none;z-index:3}
.imgframe--tint::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(155deg,rgba(81,79,238,.22),rgba(140,140,245,.06) 50%,transparent 72%);mix-blend-mode:soft-light;pointer-events:none}
.img-float{position:absolute;z-index:2;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);border:1px solid rgba(255,255,255,.7);border-radius:16px;padding:12px 15px;box-shadow:0 16px 34px -14px rgba(7,6,40,.45)}
.img-float .ic{width:38px;height:38px;border-radius:11px;background:linear-gradient(155deg,#6f6df0,#9d9df8);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 8px 18px -8px rgba(81,79,238,.7)}
.img-float .ic svg{width:20px;height:20px}
.img-float .n{font-family:var(--font-head);font-weight:700;font-size:16px;color:var(--ink);line-height:1.05}
.img-float .l{font-size:11.5px;color:var(--ink-45);margin-top:1px}
.img-float.tl{top:16px;left:16px}
.img-float.tr{top:16px;right:16px}
.img-float.br{right:16px;bottom:16px}
.img-float.bl{left:16px;bottom:16px}

/* Benefits with image (2-col) */
.benefits__inner{display:grid;grid-template-columns:.92fr 1.08fr;gap:48px;align-items:center;margin-top:52px}
.benefits__media{position:relative;aspect-ratio:4/5}
.benefits .benefits__grid{grid-template-columns:repeat(2,1fr);margin-top:0}

/* Sectors bento (image tile + cards) */
.sectors__grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr}
.sectors__img{grid-column:span 2;grid-row:span 2;position:relative;min-height:264px}
.sectors__img .so{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,6,40,.02),rgba(7,6,40,.55));pointer-events:none}
.sectors__img .slabel{position:absolute;left:22px;bottom:20px;z-index:2;color:#fff}
.sectors__img .slabel b{display:block;font-family:var(--font-head);font-weight:600;font-size:20px;letter-spacing:-.01em}
.sectors__img .slabel span{font-size:13px;color:rgba(247,247,255,.72)}

/* Tools with image (2-col) */
.tools__inner{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center;text-align:left}
.tools__inner .eyebrow{justify-content:flex-start}
.tools__inner h3{margin-bottom:12px}
.tools__inner p{margin-inline:0}
.tools__inner .tools__row{justify-content:flex-start}
.tools__media{position:relative;aspect-ratio:5/4}

/* Values with image (2-col, presentation) */
.values__inner{display:grid;grid-template-columns:.92fr 1.08fr;gap:48px;align-items:center;margin-top:48px}
.values__media{position:relative;aspect-ratio:4/5}
.values__list{display:grid;gap:16px}
.value.value--row{display:flex;gap:18px;align-items:flex-start;padding:24px 26px}
.value.value--row .vi{margin-bottom:0;flex:none}
.value.value--row h3{margin-bottom:6px}

@media (max-width:960px){
  .benefits__inner,.tools__inner,.values__inner{grid-template-columns:1fr;gap:34px}
  .benefits__media,.tools__media,.values__media{max-width:540px;margin-inline:auto;width:100%}
  .tools__inner{text-align:center}
  .tools__inner .eyebrow,.tools__inner .tools__row{justify-content:center}
  .tools__inner>p{margin-inline:auto}
  .sectors__grid{grid-template-columns:repeat(2,1fr)}
  .sectors__img{grid-column:span 2;grid-row:span 1;min-height:220px}
}
@media (max-width:720px){
  .benefits .benefits__grid{grid-template-columns:1fr}
  .sectors__grid{grid-template-columns:1fr}
  .sectors__img{grid-column:span 1;aspect-ratio:16/10;min-height:0}
}

/* =========================================================
   Liveliness : subtle motion
   ========================================================= */
@keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes float-y-alt{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@keyframes glow-pulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.82;transform:scale(1.16)}}
@keyframes orb-drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(26px,-20px) scale(1.1)}}

/* Benefits : floating stat cards */
.benefits__media .img-float{animation:float-y 4.6s ease-in-out infinite}
.benefits__media .img-float.tr{animation:float-y-alt 5.6s ease-in-out infinite}

/* Final CTA : launchpad */
.final{padding-block:40px 24px}
.final__panel{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  background:var(--navy);color:var(--on-dark);text-align:center;
  padding:clamp(60px,8vw,96px) 24px;
  background-image:radial-gradient(760px 360px at 50% 128%,rgba(81,79,238,.6),transparent 60%);
}
.final__panel::before{content:"";position:absolute;width:360px;height:360px;left:-90px;top:-90px;border-radius:50%;background:radial-gradient(circle,rgba(140,140,245,.3),transparent 70%);animation:orb-drift 9s ease-in-out infinite;pointer-events:none}
.final__panel::after{content:"";position:absolute;width:320px;height:320px;right:-80px;bottom:-80px;border-radius:50%;background:radial-gradient(circle,rgba(81,79,238,.32),transparent 70%);animation:orb-drift 11s ease-in-out infinite reverse;pointer-events:none}
/* 640 px ne suffisaient pas au titre a 50 px : le point d'interrogation
   tombait seul sur une deuxieme ligne. Le paragraphe garde sa propre
   largeur de lecture, il ne s'etale pas pour autant. */
.final__content{position:relative;z-index:2;max-width:900px;margin-inline:auto}
.final__content .eyebrow{color:var(--periwinkle);justify-content:center;margin-bottom:18px}
.final__content .eyebrow::before{background:var(--periwinkle);box-shadow:0 0 0 4px rgba(140,140,245,.2)}
.final__content h2{color:#fff;font-size:clamp(30px,4.6vw,50px);line-height:1.05;letter-spacing:-.02em}
.final__content p{color:var(--on-dark-60);font-size:18px;margin:18px auto 30px;max-width:490px}
.final__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.final__orbits{position:absolute;inset:0;z-index:1;pointer-events:none}
.fbubble{position:absolute;width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.96);display:flex;align-items:center;justify-content:center;box-shadow:0 16px 34px -12px rgba(7,6,40,.55);border:1px solid rgba(255,255,255,.6)}
.fbubble svg{width:28px;height:28px}
.fbubble.sm{width:44px;height:44px;border-radius:13px}
.fbubble.sm svg{width:22px;height:22px}
.fbubble.sm .malt-mark{width:32px;height:9.1px}
.fb1{left:5%;top:24%;animation:float-y 5s ease-in-out infinite}
.fb2{right:6%;top:18%;animation:float-y-alt 6s ease-in-out infinite}
.fb3{left:11%;bottom:16%;animation:float-y-alt 5.4s ease-in-out infinite}
.fb4{right:9%;bottom:22%;animation:float-y 6.6s ease-in-out infinite}
.fb5{left:23%;top:11%;animation:float-y 7s ease-in-out infinite}
.fb6{right:22%;bottom:10%;animation:float-y-alt 6.3s ease-in-out infinite}

@media (max-width:860px){.fb5,.fb6{display:none}}
@media (max-width:640px){.final__orbits{display:none}}
@media (prefers-reduced-motion:reduce){
  .benefits__media .img-float,.sector::before,.sector:hover .si,.final__panel::before,.final__panel::after,.fbubble{animation:none}
}

/* =========================================================
   Reveal animations
   ========================================================= */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}
.reveal.d5{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:960px){
  .services__grid{grid-template-columns:repeat(2,1fr)}
  .data__grid,.method__grid,.contact__inner,.faq__grid{grid-template-columns:1fr;gap:36px}
  .cbanner__inner{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr;gap:32px}
  .footer__brand{grid-column:1/-1}
}
@media (max-width:720px){
  .section{padding-block:76px}
  .nav__menu,.nav__right .signin,.nav__right .btn{display:none}
  .nav__burger{display:flex}
  .stats{grid-template-columns:1fr;gap:8px}
  .stat{padding-top:22px}
  .services__grid{grid-template-columns:1fr;grid-auto-rows:auto}
  /* L'illustration suit le texte au lieu d'etre plaquee en bas de carte. */
  .fcard__mini{margin-top:22px}
  .fcard{padding-bottom:24px}
  .field.row{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .hero__inner{padding-top:80px}
}
@media (max-width:460px){
  .footer__grid{grid-template-columns:1fr}
  .btn{padding:12px 20px}
}

/* =========================================================
   Article de blog
   Colonne de lecture etroite pour le confort, sommaire
   colle a gauche sur grand ecran, replie en accordeon sur
   mobile. Aucune couleur en dur : tout vient des tokens.
   ========================================================= */
.article{padding-block:56px 90px}
.article__grid{
  display:grid;gap:44px;align-items:start;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:1040px){
  .article__grid{grid-template-columns:280px minmax(0,840px);justify-content:center;gap:64px}
}

/* ---------- Sommaire ---------- */
.toc{
  position:relative;background:var(--pure-white);border:1px solid var(--ink-08);
  border-radius:16px;padding:20px 22px;box-shadow:var(--shadow-card);
}
@media (min-width:1040px){ .toc{position:sticky;top:104px} }
.toc__title{
  margin:0 0 12px;font:700 13px/1.3 var(--font-head);letter-spacing:.06em;
  text-transform:uppercase;color:var(--purple);
}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:toc}
.toc li{counter-increment:toc;margin:0}
.toc a:not(.btn){
  display:flex;gap:10px;padding:7px 0;text-decoration:none;
  font-size:14px;line-height:1.45;color:var(--ink-60);
  border-top:1px solid var(--ink-08);transition:color .16s ease;
}
.toc li:first-child a:not(.btn){border-top:0}
.toc a:not(.btn)::before{content:counter(toc);flex:none;font-weight:700;color:var(--purple);opacity:.55}
.toc a:not(.btn):hover{color:var(--purple)}
.toc a.is-current{color:var(--ink);font-weight:600}
.toc a.is-current::before{opacity:1}
.toc__cta{margin-top:16px;padding-top:16px;border-top:1px solid var(--ink-08)}
.toc__cta p{margin:0 0 10px;font-size:13.5px;line-height:1.5;color:var(--ink-60)}
.toc__cta .btn{width:100%;justify-content:center}
/* Sur mobile le sommaire devient un volet : il ne doit pas manger un ecran. */
.toc summary{display:none}
@media (max-width:1039px){
  .toc{padding:0;overflow:hidden}
  .toc>summary{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:16px 20px;cursor:pointer;list-style:none;
    font:700 15px/1.3 var(--font-head);color:var(--ink);
  }
  .toc>summary::-webkit-details-marker{display:none}
  .toc>summary::after{
    content:"";width:9px;height:9px;flex:none;
    border-right:2px solid var(--purple);border-bottom:2px solid var(--purple);
    transform:rotate(45deg);transition:transform .2s ease;
  }
  .toc[open]>summary::after{transform:rotate(-135deg)}
  .toc__inner{padding:0 20px 18px}
  .toc__title{display:none}
}

/* ---------- Corps de l'article ---------- */
.prose{max-width:840px}
.prose>*:first-child{margin-top:0}
.prose p{margin:0 0 21px;font-size:17.5px;line-height:1.75;color:var(--ink-80)}
.prose .lead{font-size:20.5px;line-height:1.6;color:var(--ink);font-weight:500;margin-bottom:30px}
.prose h2{
  margin:46px 0 16px;font:700 clamp(24px,2.6vw,30px)/1.25 var(--font-head);
  color:var(--ink);letter-spacing:-.01em;scroll-margin-top:100px;
}
.prose h3{margin:32px 0 12px;font:600 20px/1.35 var(--font-head);color:var(--ink);scroll-margin-top:100px}
.prose ul,.prose ol{margin:0 0 22px;padding-left:0;list-style:none}
.prose ol{counter-reset:pl}
.prose li{position:relative;padding-left:28px;margin-bottom:11px;font-size:16.5px;line-height:1.7;color:var(--ink-80)}
.prose ul>li::before{
  content:"";position:absolute;left:4px;top:.65em;width:7px;height:7px;
  border-radius:2px;background:var(--purple);opacity:.8;
}
.prose ol>li{counter-increment:pl}
.prose ol>li::before{
  content:counter(pl);position:absolute;left:0;top:.05em;
  font:700 13px/1.6 var(--font-head);color:var(--purple);
}
.prose strong{color:var(--ink);font-weight:650}
/* :not(.btn) est indispensable : sans lui, cette regle (0,1,1) l'emporte
   sur .btn-primary (0,1,0) et peint le texte des boutons en violet sur un
   fond violet, donc invisible. Meme piege pour le sommaire plus haut. */
.prose a:not(.btn){color:var(--purple);text-decoration:underline;text-underline-offset:3px}
.prose a:not(.btn):hover{color:var(--purple-700)}
.prose figure{margin:0 0 30px}
.prose figure img{width:100%;height:auto;display:block;border-radius:16px;border:1px solid var(--ink-08)}
.prose figcaption{margin-top:10px;font-size:13.5px;color:var(--ink-45);text-align:center}
.prose blockquote{
  margin:0 0 26px;padding:18px 22px;border-left:3px solid var(--purple);
  background:var(--bg);border-radius:0 12px 12px 0;
  font-size:17.5px;line-height:1.65;color:var(--ink);font-style:normal;
}
.prose blockquote p:last-child{margin-bottom:0}

/* Tableau comparatif : il doit defiler seul, jamais pousser la page. */
.prose .table-wrap{overflow-x:auto;margin:0 0 26px;border:1px solid var(--ink-08);border-radius:14px}
.prose table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.prose th,.prose td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--ink-08)}
.prose th{background:var(--bg);font:700 13.5px/1.3 var(--font-head);color:var(--ink)}
.prose tr:last-child td{border-bottom:0}

/* ---------- Encadre a retenir ---------- */
.callout{
  margin:0 0 28px;padding:20px 22px;border-radius:14px;
  background:var(--bg);border:1px solid var(--ink-08);border-left:3px solid var(--purple);
}
.callout p:last-child{margin-bottom:0}
.callout__t{
  margin:0 0 8px;font:700 13px/1.3 var(--font-head);letter-spacing:.06em;
  text-transform:uppercase;color:var(--purple);
}

/* ---------- Appels a l'action dans l'article ---------- */
.cta-inline{
  margin:34px 0;padding:26px 28px;border-radius:18px;color:#fff;
  background:linear-gradient(135deg,var(--navy-2) 0%,var(--indigo) 55%,var(--purple) 100%);
}
.cta-inline h3{margin:0 0 8px;font:700 21px/1.3 var(--font-head);color:#fff}
.cta-inline p{margin:0 0 18px;font-size:15.5px;line-height:1.6;color:var(--on-dark-60)}
.cta-inline .btn{margin:0}

.article__end{margin-top:44px;padding-top:32px;border-top:1px solid var(--ink-08)}
.article__end p{font-size:16px;line-height:1.7;color:var(--ink-60)}

/* ---------- Meta de l'article ---------- */
.article-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  margin-top:16px;font-size:14px;color:var(--on-dark-60);
}
.article-meta .dot{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5}

/* ---------- Articles lies ---------- */
.related{padding-block:0 90px}
.related__title{margin:0 0 22px;font:700 22px/1.3 var(--font-head);color:var(--ink)}
.related__grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.related__card{
  display:block;text-decoration:none;padding:22px;border-radius:16px;
  background:var(--pure-white);border:1px solid var(--ink-08);box-shadow:var(--shadow-card);
  transition:transform .2s ease,border-color .2s ease;
}
.related__card:hover{transform:translateY(-3px);border-color:rgba(81,79,238,.35)}
.related__card .cat{
  display:inline-block;margin-bottom:10px;padding:4px 10px;border-radius:99px;
  background:rgba(81,79,238,.1);color:var(--purple);
  font:600 11.5px/1.3 var(--font-head);letter-spacing:.04em;text-transform:uppercase;
}
.related__card h3{margin:0 0 8px;font:600 17px/1.35 var(--font-head);color:var(--ink)}
.related__card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-60)}

@media (prefers-reduced-motion:reduce){
  .related__card,.toc a,.toc>summary::after{transition:none}
}

/* =========================================================
   Bouton flottant WhatsApp
   Aux couleurs du site plutot qu'au vert de la marque : la
   pastille reste identifiable par son pictogramme, et la page
   ne gagne pas une septieme couleur.
   ========================================================= */
.wa-float{
  position:fixed;right:20px;z-index:60;
  /* env() tient compte de la barre de gestes iOS : sans lui, le bouton
     se retrouve dessous et devient difficile a atteindre. */
  bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;padding:0;border-radius:50%;
  background:linear-gradient(150deg,var(--purple),var(--purple-700));
  color:#fff;text-decoration:none;
  box-shadow:0 14px 34px -10px rgba(81,79,238,.62),0 0 0 1px rgba(255,255,255,.14) inset;
  transition:transform .18s ease,box-shadow .18s ease;
}
.wa-float:hover{transform:translateY(-2px);box-shadow:0 20px 44px -12px rgba(81,79,238,.72),0 0 0 1px rgba(255,255,255,.2) inset}
.wa-float:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.wa-float__ico{width:26px;height:26px;flex:none;display:block}
/* Le libelle est masque partout : le pictogramme de WhatsApp est
   universellement reconnu, et le nom reste dans l'aria-label pour les
   lecteurs d'ecran. */
.wa-float__txt{display:none}

/* Sur ecran etroit, la pastille se reduit au pictogramme : un libelle y
   mangerait la largeur utile sans rien apporter. */
@media (max-width:720px){
  .wa-float{right:16px;bottom:calc(16px + env(safe-area-inset-bottom, 0px));width:52px;height:52px}
}

@media (prefers-reduced-motion:reduce){
  .wa-float{transition:none}
  .wa-float:hover{transform:none}
}

/* =========================================================
   Panneau signature de l'agence
   Remplace la photo du fondateur sur l'accueil. Il occupe la
   meme cellule de grille que .expert__photo, avec le meme
   rayon et la meme ombre : le rythme de la section ne bouge
   pas, seul le contenu change de nature.
   ========================================================= */
.agency-card{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:26px;padding:34px 32px 30px;
  display:flex;flex-direction:column;
  min-height:clamp(380px,38vw,470px);
  background:linear-gradient(155deg,var(--navy) 0%,var(--navy-2) 34%,var(--indigo) 72%,#2f2ca8 100%);
  box-shadow:var(--shadow-float);
  color:var(--on-dark);
}
/* Halo, repris du vocabulaire des cartes de service. */
.agency-card::before{
  content:"";position:absolute;top:-90px;right:-90px;width:280px;height:280px;
  border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(140,140,245,.36),transparent 68%);
}
.agency-card::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:26px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.agency-card>*{position:relative;z-index:1}

.agency-card__top{display:flex;align-items:center;gap:10px}
.agency-card__pulse{
  width:9px;height:9px;border-radius:50%;flex:none;
  background:#5ad19b;box-shadow:0 0 0 4px rgba(90,209,155,.22);
  animation:agency-pulse 2.6s ease-in-out infinite;
}
@keyframes agency-pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(90,209,155,.22)}
  50%{box-shadow:0 0 0 8px rgba(90,209,155,.07)}
}
.agency-card__kicker{
  font-family:var(--font-head);font-weight:600;font-size:12.5px;
  letter-spacing:.09em;text-transform:uppercase;
  /* --lav-1 et non --periwinkle : sur le point le plus clair du degrade,
     le periwinkle tombe a 3,51 de contraste pour un texte de 13 px. */
  color:var(--lav-1);
}

.agency-card__name{
  margin:22px 0 0;font-family:var(--font-head);font-weight:700;
  font-size:clamp(30px,3.4vw,40px);line-height:1.02;letter-spacing:-.025em;color:#fff;
}
/* La seconde ligne du nom passe en graisse plus legere : le logotype du site
   fonctionne sur ce meme contraste entre les deux mots. */
.agency-card__name span{display:block;font-weight:400;color:var(--lav-1)}

.agency-card__claim{
  margin:16px 0 0;font-size:15.5px;line-height:1.6;
  /* Opacite portee de .62 a .74 : a .62 le texte passait tout juste le seuil
     sur le point le plus clair du fond, sans marge. */
  color:rgba(247,247,255,.74);max-width:30ch;
}

.agency-card__caps{
  list-style:none;margin:24px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
.agency-card__caps li{
  font-size:13px;font-weight:500;line-height:1;
  padding:9px 13px;border-radius:9999px;
  background:rgba(247,247,255,.09);
  border:1px solid rgba(247,247,255,.16);
  color:var(--on-dark);
}

.agency-card__meta{
  margin-top:auto;padding-top:24px;
  border-top:1px solid rgba(247,247,255,.14);
  display:flex;flex-wrap:wrap;gap:10px 22px;
  font-size:13px;color:rgba(247,247,255,.74);
}
.agency-card__meta span{display:inline-flex;align-items:center;gap:7px}
.agency-card__meta svg{width:15px;height:15px;flex:none;color:var(--lav-1)}

/* En une colonne, le panneau garde la largeur maximale de l'ancienne photo
   pour ne pas s'etirer sur toute la page. */
@media (max-width:960px){
  .agency-card{max-width:460px;margin-inline:auto;width:100%;min-height:0;padding:30px 26px 26px}
}
@media (max-width:560px){
  .agency-card__caps li{font-size:12.5px;padding:8px 11px}
}

@media (prefers-reduced-motion:reduce){
  .agency-card__pulse{animation:none}
}

/* Bascule du menu burger, avancée à 820 px.
   Avec cinq liens plus le lien Malt et le bouton, la barre complète ne tient
   plus entre 721 et 820 px : le contenu mesure 667 px pour 658 px disponibles
   et pousse la page de 25 px vers la droite. Le seuil de 720 px suffisait à
   quatre liens, plus à cinq. Ces déclarations doublent celles du bloc 720 px,
   sans conflit : en dessous de 720 les deux donnent le même résultat. */
@media (max-width:820px){
  .nav__menu,.nav__right .signin,.nav__right .btn{display:none}
  .nav__burger{display:flex}
}

/* =========================================================
   PAGE OFFRE D'ACCOMPAGNEMENT
   ========================================================= */

/* ---------- Le modèle : comparaison en vis-à-vis ----------
   La colonne de gauche décrit ce qui se fait ailleurs, celle de
   droite l'offre. Le contraste porte tout l'argument : la gauche
   reste neutre et en retrait, la droite prend la couleur. */
.model{padding-block:96px}
.model__grid{
  display:grid;gap:18px;align-items:stretch;
  grid-template-columns:1fr auto 1fr;
  max-width:1060px;margin:52px auto 0;
}
.model__col{
  padding:30px 28px;border-radius:20px;
  border:1px solid var(--ink-08);background:var(--pure-white);
}
.model__col--old{background:var(--bg);box-shadow:none}
.model__col--new{
  background:linear-gradient(160deg,var(--navy-2) 0%,var(--indigo) 62%,#332fb0 100%);
  border-color:transparent;color:var(--on-dark);
  box-shadow:0 26px 56px -24px rgba(33,31,128,.7);
}
.model__tag{
  display:inline-block;margin-bottom:18px;
  font-family:var(--font-head);font-weight:600;font-size:12.5px;
  letter-spacing:.08em;text-transform:uppercase;
}
.model__col--old .model__tag{color:var(--ink-45)}
.model__col--new .model__tag{color:var(--lav-1)}

.model__list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.model__list li{
  position:relative;padding-left:30px;
  font-size:15.5px;line-height:1.6;
}
.model__col--old .model__list li{color:var(--ink-60)}
.model__col--new .model__list li{color:rgba(247,247,255,.86)}
.model__col--new .model__list strong{color:#fff;font-weight:650}
/* Croix pour l'ancien modèle, coche pour le nôtre : le sens se lit
   avant même la phrase. */
.model__col--old .model__list li::before{
  content:"";position:absolute;left:0;top:.42em;width:15px;height:15px;
  background:
    linear-gradient(currentColor,currentColor) center/11px 1.8px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.8px 11px no-repeat;
  transform:rotate(45deg);color:var(--ink-45);opacity:.6;
}
.model__col--new .model__list li::before{
  content:"";position:absolute;left:0;top:.36em;width:16px;height:16px;
  border-radius:50%;background:rgba(255,255,255,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
}
.model__col--new .model__list li::after{
  content:"";position:absolute;left:4.5px;top:.62em;width:7px;height:4px;
  border-left:1.9px solid #fff;border-bottom:1.9px solid #fff;
  transform:rotate(-45deg);
}

.model__vs{display:flex;align-items:center;justify-content:center}
.model__vs span{
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--pure-white);border:1px solid var(--ink-08);
  box-shadow:var(--shadow-card);
  font-family:var(--font-head);font-weight:700;font-size:13px;
  letter-spacing:.04em;color:var(--ink-45);text-transform:uppercase;
}
.model__note{
  max-width:640px;margin:26px auto 0;text-align:center;
  font-size:14.5px;line-height:1.65;color:var(--ink-45);
}
@media (max-width:900px){
  .model{padding-block:76px}
  .model__grid{grid-template-columns:1fr;gap:14px;margin-top:40px}
  .model__vs{padding:2px 0}
  .model__vs span{width:40px;height:40px;font-size:12px}
}

/* ---------- Zéro frais pour démarrer ---------- */
.zerofee{padding-block:0 96px}
.zerofee__panel{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--navy) 0%,var(--indigo) 55%,#2f2da1 100%);
  color:var(--on-dark);
  padding:clamp(36px,5vw,60px);
  display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;
}
.zerofee__panel::before{
  content:"";position:absolute;width:360px;height:360px;right:-110px;top:-130px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(140,140,245,.2),transparent 70%);
}
.zerofee__panel>*{position:relative;z-index:1}
.zerofee__text .eyebrow{color:var(--lav-1);margin-bottom:14px}
.zerofee__text h2{color:#fff;font-size:clamp(25px,3.1vw,36px);line-height:1.12;margin-bottom:16px}
.zerofee__text p{color:rgba(247,247,255,.78);font-size:16.5px;line-height:1.65;max-width:52ch}
.zerofee__cta{margin-top:28px}

/* Le tableau chiffré rend l'argument concret : trois lignes à zéro,
   puis la seule ligne qui coûte quelque chose. */
.zerofee__fig{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;padding:22px 24px;backdrop-filter:blur(6px);
}
.zf-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0}
.zf-lab{font-size:14.5px;color:rgba(247,247,255,.78)}
.zf-val{
  font-family:var(--font-head);font-weight:700;font-size:16px;color:#fff;
  white-space:nowrap;
}
.zf-val--free{color:#7ee2b0}
.zf-sep{height:1px;background:rgba(255,255,255,.18);margin:8px 0}
.zf-row--total .zf-lab{color:#fff;font-weight:600}
.zf-row--total .zf-val{font-size:18px}
@media (max-width:900px){
  .zerofee{padding-block:0 76px}
  .zerofee__panel{grid-template-columns:1fr;gap:30px}
}

/* ---------- Périmètre délégué ---------- */
.deleg{padding-block:0 96px}
.deleg__grid{
  display:grid;gap:20px;margin-top:52px;
  grid-template-columns:repeat(2,1fr);align-items:start;
}
.deleg__card{
  position:relative;overflow:hidden;
  padding:32px 30px;border-radius:22px;
  background:var(--pure-white);border:1px solid var(--ink-08);
  box-shadow:var(--shadow-card);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.deleg__card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -22px rgba(7,6,40,.26)}
.deleg__card--feat{
  border-color:rgba(81,79,238,.28);
  box-shadow:0 26px 54px -24px rgba(81,79,238,.42);
}
.deleg__card--feat:hover{box-shadow:0 32px 64px -24px rgba(81,79,238,.5)}
.deleg__ic{
  display:grid;place-items:center;width:44px;height:44px;border-radius:13px;
  background:var(--lav-2);color:var(--purple-700);margin-bottom:16px;
}
.deleg__ic svg{width:23px;height:23px}
/* Sur la carte mise en avant, le fond est sombre : on inverse le contraste. */
.deleg__card--feat .deleg__ic{background:rgba(247,247,255,.14);color:#fff}
.deleg__badge{
  display:inline-block;margin-bottom:16px;padding:6px 13px;border-radius:9999px;
  font-family:var(--font-head);font-weight:600;font-size:12px;
  letter-spacing:.05em;text-transform:uppercase;
  background:var(--bg);border:1px solid var(--ink-08);color:var(--ink-60);
}
.deleg__card--feat .deleg__badge{
  background:rgba(81,79,238,.1);border-color:rgba(81,79,238,.2);color:var(--purple-700);
}
.deleg__card h3{font-size:21px;line-height:1.22;margin-bottom:12px}
.deleg__card>p{color:var(--ink-60);font-size:15.5px;line-height:1.65;margin-bottom:20px}
.deleg__list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.deleg__list li{
  position:relative;padding-left:26px;font-size:15px;line-height:1.55;color:var(--ink-80);
}
.deleg__list li::before{
  content:"";position:absolute;left:1px;top:.5em;width:8px;height:8px;
  border-radius:2px;background:var(--purple);opacity:.75;
}
@media (max-width:820px){
  .deleg{padding-block:0 76px}
  .deleg__grid{grid-template-columns:1fr;margin-top:40px}
}

@media (prefers-reduced-motion:reduce){
  .deleg__card{transition:none}
  .deleg__card:hover{transform:none}
}

/* ---------- Renvoi vers l'offre depuis la page services ---------- */
.offer-teaser{padding-block:0 96px}
.offer-teaser__panel{
  display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;
  padding:clamp(28px,4vw,44px);border-radius:var(--radius-lg);
  background:var(--pure-white);border:1px solid var(--ink-08);
  box-shadow:var(--shadow-card);
}
.offer-teaser__text .eyebrow{margin-bottom:12px}
.offer-teaser__text h2{font-size:clamp(23px,2.8vw,32px);line-height:1.15;margin-bottom:12px}
.offer-teaser__text p{color:var(--ink-60);font-size:16.5px;line-height:1.65;max-width:60ch}
@media (max-width:820px){
  .offer-teaser{padding-block:0 76px}
  .offer-teaser__panel{grid-template-columns:1fr;gap:24px}
  .offer-teaser__cta .btn{width:100%;justify-content:center}
}

/* ---------- Seuil du menu burger ----------
   Le menu de bureau compte six liens depuis l'ajout de l'Offre. Mesure faite :
   marque 62 + liens 521 + bloc droit 284 + espaces 32 = 899 px de contenu,
   pour une barre qui vaut la largeur de fenetre moins 63. En dessous de
   1024 px, flexbox comprime la marque jusqu'a 0 et fait passer « Mon profil
   Malt » sur deux lignes. On bascule donc sur le burger a 1023 px, ou la barre
   offre encore 62 px de respiration. Cette regle vient apres celles de 820 px
   et de 720 px, qu'elle englobe. */
@media (max-width:1023px){
  .nav__menu,.nav__right .signin,.nav__right .btn{display:none}
  .nav__burger{display:flex}
}

/* =========================================================
   SIGNATURE AGENCE : sections image + texte alternees
   ========================================================= */
.showcase{padding-block:96px;
  /* Les traces mordent volontairement sur le bord de l'image ; sans
     ce clip elles depassent aussi le bord de la fenetre. */
  overflow:clip}
.showcase__grid{
  display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,86px);
  align-items:center;
}
/* La variante inversee met l'image a gauche. On agit sur l'ordre visuel
   uniquement : l'ordre du DOM reste texte puis image, pour que la lecture
   au clavier et a l'oral suive toujours la meme logique. */
.showcase--reverse .showcase__text{order:2}
.showcase--reverse .showcase__media{order:1}

.showcase__pill{
  display:inline-block;padding:7px 16px;border-radius:9999px;
  background:var(--lav-2);color:var(--purple-700);
  font-size:13px;font-weight:600;letter-spacing:.01em;margin-bottom:20px;
}
.showcase__text h2{font-size:clamp(28px,4vw,42px);line-height:1.12;letter-spacing:-.02em;margin-bottom:18px}
.showcase__text>p{color:var(--ink-60);font-size:17px;line-height:1.68;max-width:56ch}

.showcase__list{display:grid;gap:15px;margin:28px 0 32px}
.showcase__list li{
  display:grid;grid-template-columns:26px 1fr;gap:13px;align-items:start;
  font-size:16px;line-height:1.55;color:var(--ink-80);
}
.showcase__list .tick{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--lav-2);color:var(--purple-700);margin-top:1px;
}
.showcase__list .tick svg{width:14px;height:14px}
.showcase__text .btn svg{width:18px;height:18px}

/* --- Le cadre image et sa trace dessinee --- */
.showcase__media{position:relative}
.showcase__frame{
  position:relative;z-index:1;border-radius:22px;overflow:hidden;
  box-shadow:0 30px 64px -30px rgba(7,6,40,.4);
}
.showcase__frame img{width:100%;height:auto}

.showcase__trace{
  /* z-index 2 : au-dessus du cadre (1). Sous le cadre, le trait etait
     tranche net au bord de la photo au lieu de courir par-dessus. */
  position:absolute;z-index:2;color:var(--purple);opacity:.92;
  pointer-events:none;
}
/* Les vagues debordent a droite, la boucle a gauche : la trace doit mordre
   sur le cadre pour se lire comme un trait pose par-dessus, pas comme une
   decoration posee a cote. */
.showcase__trace--vagues{width:clamp(78px,9vw,124px);right:-30px;top:8%}
.showcase--reverse .showcase__trace--vagues{right:auto;left:-30px;transform:scaleX(-1)}
.showcase__trace--boucle{width:clamp(150px,17vw,232px);left:-20px;top:-42px}
.showcase__trace--points{width:clamp(46px,5vw,72px);right:-26px;top:10%}
.showcase__trace--arc{width:clamp(150px,17vw,236px);left:-18px;top:-46px}

@media (max-width:900px){
  .showcase{padding-block:72px}
  .showcase__grid{grid-template-columns:1fr;gap:36px}
  /* Sur une colonne, on remet l'image apres le texte dans les deux sens :
     alterner n'a plus de sens et couperait le lien titre / illustration. */
  .showcase--reverse .showcase__text,
  .showcase--reverse .showcase__media{order:initial}
  .showcase__trace--vagues{width:64px;right:-14px;top:-26px}
  .showcase--reverse .showcase__trace--vagues{left:auto;right:-14px;transform:none}
  .showcase__trace--boucle{width:132px;left:-22px;top:-30px}
  .showcase__trace--points{width:40px;right:-12px;top:-22px}
  .showcase__trace--arc{width:134px;left:-18px;top:-32px}
  .showcase__text .btn{width:100%;justify-content:center}
}

/* --- Variante : liste a titre + explication --- */
.showcase__list--riche{gap:20px}
.showcase__list--riche li{align-items:start;line-height:1.5}
.showcase__list--riche li>span:last-child{display:block}
.showcase__list--riche b{
  display:block;font-weight:650;font-size:16px;color:var(--ink);
  margin-bottom:3px;letter-spacing:-.01em;
}
.showcase__list--riche li>span:last-child{font-size:15px;color:var(--ink-60);line-height:1.6}

/* --- Variante : rangee de logos partenaires --- */
.showcase__chips{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 32px}
.showcase__chips .tool-chip{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px;border-radius:12px;
  background:var(--pure-white);border:1px solid var(--ink-08);
  font-size:14.5px;font-weight:600;color:var(--ink-80);
  box-shadow:0 6px 16px -12px rgba(7,6,40,.5);
}
.showcase__chips .tool-logo{width:22px;height:22px;object-fit:contain;flex:0 0 22px}

@media (max-width:900px){
  .showcase__chips{margin:22px 0 28px}
  .showcase__chips .tool-chip{font-size:13.5px;padding:8px 13px}
}

/* =========================================================
   AVIS GOOGLE
   ========================================================= */
.greviews{position:relative;padding-block:96px;overflow:hidden}
/* Semis de points : il isole le bloc d'avis du reste de la page sans
   ajouter ni bordure ni aplat de couleur. */
.greviews__pois{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(var(--ink-12) 1.4px,transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 76% 62% at 50% 50%,#000 38%,transparent 76%);
          mask-image:radial-gradient(ellipse 76% 62% at 50% 50%,#000 38%,transparent 76%);
}
.greviews>.container{position:relative;z-index:1}
.greviews__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}

.grev{
  background:var(--pure-white);border:1px solid var(--ink-08);
  border-radius:18px;padding:24px;
  box-shadow:0 14px 34px -22px rgba(7,6,40,.34);
}
.grev__head{display:grid;grid-template-columns:44px 1fr 22px;gap:12px;align-items:center;margin-bottom:14px}
.grev__ava{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--indigo),var(--purple));
  color:#fff;font-family:var(--font-head);font-weight:650;font-size:18px;
}
.grev__ident{display:flex;flex-direction:column;gap:2px;min-width:0}
.grev__nom{font-size:15.5px;font-weight:650;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grev__date{font-size:13px;color:var(--ink-60)}
.grev__g{width:22px;height:22px}

.grev__note{display:flex;align-items:center;gap:7px;margin-bottom:12px}
.grev__etoiles{display:inline-flex;gap:2px;color:#fbbc05}
.grev__etoiles svg{width:17px;height:17px}
.grev__verifie{display:inline-flex;color:#4285f4}
.grev__verifie svg{width:15px;height:15px}

.grev__texte{
  font-size:15px;line-height:1.62;color:var(--ink-80);
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
}
.grev.est-ouvert .grev__texte{-webkit-line-clamp:unset;overflow:visible}
.grev__origine{
  margin-top:9px;font-size:12.5px;font-style:italic;color:var(--ink-60);
}
.grev__plus{
  margin-top:10px;font-size:13.5px;font-weight:600;color:var(--ink-45);
  padding:0;border-radius:6px;
}
.grev__plus:hover{color:var(--purple)}
.grev__plus:focus-visible{outline:2px solid var(--purple);outline-offset:3px}

/* --- Bandeau de note sous les cartes --- */
.gscore{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;
  margin-top:36px;padding:18px 26px;border-radius:9999px;
  background:var(--pure-white);border:1px solid var(--ink-08);
  box-shadow:0 14px 34px -24px rgba(7,6,40,.3);width:max-content;margin-inline:auto;max-width:100%;
}
.gscore__g{width:24px;height:24px}
.gscore__chiffre{font-family:var(--font-head);font-size:24px;font-weight:700;line-height:1;color:var(--ink)}
.gscore__etoiles{display:inline-flex;gap:2px;color:#fbbc05}
.gscore__etoiles svg{width:18px;height:18px}
.gscore__txt{font-size:15px;color:var(--ink-60)}
.gscore__txt b{color:var(--ink)}
.gscore__lien{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:600;color:var(--purple)}
.gscore__lien svg{width:17px;height:17px}
.gscore__lien:hover{color:var(--purple-700)}

@media (max-width:900px){
  .greviews{padding-block:72px}
  .greviews__grid{grid-template-columns:1fr;gap:18px}
  .gscore{border-radius:20px;justify-content:flex-start;text-align:left}
}

/* =========================================================
   COUVERTURE MARKETPLACE, PAR FAMILLE
   ========================================================= */
.mplaces{padding-block:0 96px}
.mplaces__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch;
}
.mpfam{
  background:var(--pure-white);border:1px solid var(--ink-08);
  border-radius:18px;padding:24px;height:100%;
  transition:transform .18s ease,box-shadow .18s ease;
}
.mpfam:hover{transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(7,6,40,.4)}
.mpfam__head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.mpfam__ic{
  width:40px;height:40px;border-radius:12px;flex:0 0 40px;
  display:grid;place-items:center;background:var(--accbg);color:var(--acc);
}
.mpfam__ic svg{width:21px;height:21px}
.mpfam__head h3{font-size:16.5px;line-height:1.25;letter-spacing:-.01em}
.mpfam__list{display:flex;flex-wrap:wrap;gap:7px}
.mpfam__list li{
  padding:6px 12px;border-radius:9999px;background:var(--bg);
  border:1px solid var(--ink-08);font-size:13.5px;color:var(--ink-80);
}

/* La derniere carte est un appel a l'action : elle passe sur le fond sombre
   pour se distinguer des sept cartes de listing. */
.mpfam--cta{
  background:linear-gradient(150deg,var(--navy-2) 0%,var(--indigo) 100%);
  border-color:transparent;color:var(--on-dark);
  display:flex;flex-direction:column;gap:12px;
}
.mpfam--cta:hover{box-shadow:0 22px 46px -26px rgba(33,31,128,.7)}
.mpfam--cta h3{font-size:17px;line-height:1.28;color:#fff}
.mpfam--cta p{font-size:14.5px;line-height:1.58;color:rgba(247,247,255,.82);flex:1}
.mpfam--cta .btn{width:100%;justify-content:center;font-size:14.5px;padding-block:11px}
.mpfam--cta .btn svg{width:16px;height:16px}

.mplaces__note{
  margin-top:26px;text-align:center;font-size:13px;color:var(--ink-60);
}

@media (max-width:1080px){.mplaces__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){
  .mplaces{padding-block:0 72px}
  .mplaces__grid{grid-template-columns:1fr}
}

/* =========================================================
   PIED DE PAGE : bloc de note Google
   ========================================================= */
.gbadge{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  width:max-content;max-width:100%;margin:26px 0 4px;
  padding:16px 24px;border-radius:16px;
  background:var(--pure-white);border:1px solid rgba(7,6,40,.06);
  box-shadow:0 16px 38px -26px rgba(0,0,0,.6);
  transition:transform .18s ease;
}
.gbadge:hover{transform:translateY(-2px)}
.gbadge__titre{font-size:12.5px;font-weight:600;color:var(--ink-60);letter-spacing:.01em}
.gbadge__g{width:26px;height:26px;margin-top:2px}
.gbadge__note{font-family:var(--font-head);font-size:26px;font-weight:700;line-height:1;color:var(--ink)}
.gbadge__etoiles{display:inline-flex;gap:3px;color:#fbbc05;margin:2px 0 1px}
.gbadge__etoiles svg{width:17px;height:17px}
.gbadge__pied{font-size:12px;color:var(--ink-60)}
.gbadge__pied b{color:var(--ink-60)}

/* Marqueur des valeurs a reprendre sur la fiche Google. Il ne change rien
   a l'affichage : il sert a les retrouver, et le build refuse de passer en
   production tant qu'il en reste une. */
[data-a-remplir]{font-variant-numeric:tabular-nums}

/* Le filigrane du pied de page est barre sur petit ecran.
   La barre du bas remonte de 10 px pour glisser sous les grandes lettres :
   a 134 px de haut la bordure passe dessous, a 35 px elle traverse le mot.
   En dessous de 720 px on annule la remontee. */
@media (max-width:720px){
  .footer__word{margin-top:34px}
  .footer__bottom{padding-top:20px}
}

/* ---------- Gestionnaires de flux : texte a gauche, logos a droite ----------
   .tools__inner est une grille a deux colonnes. Le texte doit donc former
   UN seul enfant, sinon chaque paragraphe part dans une case et le
   sur-titre se retrouve seul face au titre. */
.tools__text{display:flex;flex-direction:column;align-items:flex-start}
.tools__text .eyebrow{justify-content:flex-start;margin-bottom:14px}
.tools__text h3{margin-bottom:12px}
.tools__text>p{margin:0;max-width:46ch}

/* Les pastilles sont plus grandes que dans le reste du site : elles
   occupent seules la colonne de droite et doivent tenir le poids visuel
   du bloc de texte en face. */
.tools__row--panneau{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:flex-start;align-content:center;
}
.tools__row--panneau .tool-chip{
  padding:15px 22px;border-radius:16px;font-size:15.5px;gap:13px;
  background:var(--pure-white);border:1px solid var(--ink-12);
}
.tools__row--panneau .tool-logo{width:34px;height:34px;border-radius:8px}
.tools__row--panneau .tool-chip:hover{box-shadow:0 14px 30px -18px rgba(7,6,40,.45)}

@media (max-width:1000px){
  /* Sur une colonne, le texte se recentre et les pastilles suivent. */
  .tools__text{align-items:center;text-align:center}
  .tools__text .eyebrow{justify-content:center}
  .tools__text>p{margin-inline:auto}
  .tools__row--panneau{justify-content:center}
}
@media (max-width:520px){
  .tools__row--panneau .tool-chip{padding:12px 16px;font-size:14.5px;gap:10px}
  .tools__row--panneau .tool-logo{width:28px;height:28px}
}

/* =========================================================
   SELECTEUR DE LANGUE
   ========================================================= */
.lang{position:relative}

.lang__btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 11px 8px 9px;border-radius:9999px;
  /* Un cran plus sombre que le bandeau, jamais plus clair : le bouton se
     creuse dans la barre au lieu d'en sortir. En blanc plein, il attirait
     l'oeil avant la marque. L'assombrissement étant relatif, il tient sur
     les deux états du bandeau, translucide puis blanc après défilement. */
  background:rgba(7,6,40,.06);border:1px solid rgba(7,6,40,.07);
  font-size:13.5px;font-weight:650;color:var(--ink-80);
  line-height:1;cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.lang__btn:hover{background:rgba(7,6,40,.1);border-color:rgba(7,6,40,.1)}
.lang__btn:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.lang__btn[aria-expanded="true"]{border-color:var(--purple);box-shadow:0 0 0 3px rgba(81,79,238,.14)}

/* Le drapeau porte son propre liseré : sur fond blanc, la bande blanche du
   drapeau français se confondrait avec le bouton sans lui. */
.lang__flag{
  width:22px;height:22px;flex:none;border-radius:50%;
  /* Le liseré intérieur détache le drapeau du fond : sans lui, la bande
     blanche du tricolore se confondrait avec le bouton. */
  box-shadow:0 0 0 1px rgba(7,6,40,.16) inset;
}
.lang__code{letter-spacing:.03em}
.lang__chev{width:14px;height:14px;color:var(--ink-45);transition:transform .18s ease}
.lang__btn[aria-expanded="true"] .lang__chev{transform:rotate(180deg)}

/* --- Le menu déroulant --- */
.lang__menu{
  position:absolute;top:calc(100% + 10px);right:0;z-index:60;
  min-width:212px;padding:6px;
  background:var(--pure-white);border:1px solid var(--ink-08);
  border-radius:16px;box-shadow:0 22px 46px -20px rgba(7,6,40,.34);
  /* L'animation part du coin haut droit, celui du bouton. */
  transform-origin:top right;
  animation:langOuvre .16s cubic-bezier(.2,.7,.2,1);
}
.lang__menu[hidden]{display:none}
@keyframes langOuvre{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}

.lang__opt{
  display:flex;align-items:center;gap:11px;
  padding:10px 12px;border-radius:11px;
  font-size:14.5px;font-weight:550;color:var(--ink-80);
  transition:background .14s ease;
}
a.lang__opt:hover{background:var(--bg)}
a.lang__opt:focus-visible{outline:2px solid var(--purple);outline-offset:-2px}
.lang__nom{flex:1}
.lang__coche{width:16px;height:16px;color:var(--purple);flex:none}

.lang__opt.est-actif{color:var(--ink);font-weight:650}
/* L'anglais n'est pas encore traduit : il se montre, mais ne promet pas un
   lien qui n'existe pas. */
.lang__opt.est-bientot{cursor:default;color:var(--ink-45)}
.lang__opt.est-bientot .lang__flag{opacity:.6}
.lang__badge{
  font-size:11px;font-weight:650;letter-spacing:.02em;
  padding:3px 8px;border-radius:9999px;
  background:var(--lav-2);color:var(--purple-700);flex:none;
}


/* ---------- Le sélecteur dans le bandeau mobile ----------
   Il n'est plus dans le menu burger : une langue doit se voir sans avoir
   à ouvrir quoi que ce soit. */
@media (max-width:1023px){
  .lang__btn{
    position:relative;
    padding:5px 8px 5px 6px;gap:5px;
  }
  /* Le bouton dessiné mesure 32 px de haut, la zone tactile 44. On réduit
     le dessin sans réduire la cible : c'est le doigt qui impose 44 px,
     pas l'œil. */
  .lang__btn::after{
    content:"";position:absolute;left:0;right:0;
    top:50%;transform:translateY(-50%);height:44px;
  }
  .lang__flag{width:20px;height:20px}
  .lang__chev{width:12px;height:12px}
  .lang__code{font-size:12.5px}
  .lang__menu{min-width:198px}
}
/* Sous 340 px, le libellé « FR » cède la place : le drapeau et le chevron
   suffisent à comprendre, et le bandeau reste respirable. */
@media (max-width:340px){
  .lang__code{display:none}
  .lang__btn{padding-inline:8px}
}

/* ---------- Erreurs de formulaire, champ par champ ---------- */
.field__err{
  display:none;margin-top:7px;
  font-size:13.5px;line-height:1.45;color:#c02a42;
}
.field__err.est-visible{display:flex;gap:6px;align-items:flex-start}
/* Le pictogramme evite que la couleur porte seule l'information. */
.field__err.est-visible::before{
  content:"";flex:none;width:15px;height:15px;margin-top:1px;
  background:currentColor;
  -webkit-mask:var(--ico-alerte) center/contain no-repeat;
          mask:var(--ico-alerte) center/contain no-repeat;
}
:root{
  --ico-alerte:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 5a1.2 1.2 0 011.2 1.3l-.35 5a.85.85 0 01-1.7 0l-.35-5A1.2 1.2 0 0112 7zm0 9.2a1.3 1.3 0 110 2.6 1.3 1.3 0 010-2.6z'/%3E%3C/svg%3E");
}

/* Le champ fautif se signale par sa bordure ET par son fond, pour rester
   lisible sur un ecran mal calibre. */
.field input.est-invalide,
.field textarea.est-invalide{
  border:1px solid #c02a42;
  background:#fdf4f5;
}
.field input.est-invalide:focus,
.field textarea.est-invalide:focus{
  border-color:#c02a42;
  box-shadow:0 0 0 3px rgba(192,42,66,.16);
}

@media (prefers-reduced-motion:no-preference){
  .field__err.est-visible{animation:errApparait .18s ease}
}
@keyframes errApparait{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}