/*
   ASSISTANT CALL — Centre de contacts externalisé
   Direction : lime électrique + bleu profond, page posée sur
   un dégradé, visages de conseillers en couronne.
   Outfit (titres) · Plus Jakarta Sans (texte) */

/* 1. Jetons */
:root{
  --paper:    #FFFFFF;
  --paper-2:  #F4F7F2;
  --card:     #FFFFFF;
  --ink:      #0B0E14;
  --ink-soft: #4C5462;
  --mut:      #5C6675;
  --line:     #E6EAE2;
  --line-2:   #D2D9CC;

  /* Bleus du logo. « lime » garde son nom de jeton — trop de regles
     s'y referent — mais porte desormais le bleu clair de la marque. */
  --lime:     #38B6FF;   /* accent clair : surlignes, decor, fond sombre */
  --lime-dk:  #00A8FC;
  --lime-ink: #0A57C2;   /* le meme accent, lisible en TEXTE sur clair */
  --bleu:     #0A5BE0;
  --bleu-dk:  #063FA8;
  --bleu-lt:  #57A9FF;
  --marine:   #000E38;   /* le marine du nom dans le logo */
  --bleu-plein: var(--bleu);  /* en clair, fond et encre coincident */

  --brand:    var(--bleu);
  --brand-dk: var(--bleu-dk);
  --brand-lt: var(--bleu-lt);
  --signal:   var(--lime-ink);
  --signal-lt:var(--lime);
  --on-brand: #FFFFFF;
  --band:     #06122E;

  --degrade:  linear-gradient(125deg,#00C4FC 0%,#38B6FF 26%,#0A5BE0 62%,#001C7E 100%);

  --sans:  'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --disp:  'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  --mono:  var(--disp);

  --ease:  cubic-bezier(.22,1,.36,1);
  --pad:   clamp(20px, 5vw, 72px);
  --r:     20px;
  --r-lg:  30px;
  --sh:    0 2px 6px rgba(11,14,20,.04), 0 18px 44px -22px rgba(11,14,20,.24);
  --sh-lg: 0 40px 90px -40px rgba(11,14,20,.42);
  --head-h: 76px;
}
html{color-scheme:light}

[data-theme="dark"]{
  --paper:    #0C1017;
  --paper-2:  #131926;
  --card:     #151C2A;
  --ink:      #F2F5F0;
  --ink-soft: #B6BFCB;
  --mut:      #8B96A6;
  --line:     #232C3D;
  --line-2:   #2F3A4E;

  /* Le lime reste lisible en sombre : c'est le lime de TEXTE qui change. */
  --lime-ink: #6FC6FF;
  --bleu:     #7E9BFF;   /* encre : reste claire sur fond sombre */
  --bleu-dk:  #2B54EA;
  --bleu-lt:  #A8BEFF;
  --bleu-plein: #0B47C4; /* fond plein : porte du texte blanc */
  --band:     #080B14;
  --degrade:  linear-gradient(125deg,#0093C4 0%,#2A82D8 26%,#0A47B0 62%,#001240 100%);
  --sh:    0 2px 6px rgba(0,0,0,.4), 0 18px 44px -22px rgba(0,0,0,.7);
  --sh-lg: 0 40px 90px -40px rgba(0,0,0,.85);
}
[data-theme="dark"]{color-scheme:dark}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:calc(var(--head-h) + 18px)}
body{
  font-family:var(--sans);background:var(--paper);color:var(--ink);
  font-size:16px;line-height:1.65;overflow-x:clip;-webkit-font-smoothing:antialiased;
  transition:background .4s var(--ease),color .4s var(--ease);
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button,input,select,textarea{font:inherit;color:inherit;outline:none}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--brand);color:#fff}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:12px;z-index:1000;background:var(--bleu-plein);color:#fff;padding:12px 18px;border-radius:8px}
.skip:focus{left:12px}

/* 2. Typographie */
h1,h2,h3,h4{font-family:var(--disp);font-weight:600;letter-spacing:-.035em;line-height:1.1;color:var(--ink);overflow-wrap:break-word}
.h-xl{font-size:clamp(38px,6.4vw,80px);line-height:1.02;font-weight:600;letter-spacing:-.045em}
.h-lg{font-size:clamp(30px,4.4vw,56px);line-height:1.06;letter-spacing:-.04em}
.h-md{font-size:clamp(22px,2.5vw,32px)}
.h-sm{font-size:clamp(18px,1.9vw,22px)}
.lead{font-size:clamp(16px,1.5vw,19px);color:var(--ink-soft);max-width:62ch}
.kick{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--bleu)}
.kick::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px color-mix(in srgb,var(--lime) 30%,transparent)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* 3. Mise en page */
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}
.sec{padding:clamp(64px,8vw,124px) 0}
.sec.tight{padding:clamp(44px,5vw,74px) 0}
.sec.alt{background:var(--paper-2)}
.sec-head{max-width:760px;margin-bottom:clamp(34px,4.4vw,58px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .kick{justify-content:center}
.sec-head h2{margin:14px 0 14px}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(26px,4vw,64px);align-items:center}
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}
.g4{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px}

/* 4. Boutons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--disp);font-size:14px;font-weight:600;letter-spacing:.01em;
  padding:15px 30px;border-radius:999px;border:1px solid transparent;position:relative;overflow:hidden;
  transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s,box-shadow .3s;
  white-space:nowrap;
}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover .arr{transform:translateX(4px)}
.btn-primary{background:var(--lime);color:#00204A;box-shadow:0 14px 30px -14px rgba(56,182,255,.9)}
[data-theme="dark"] .btn-primary{background:var(--lime);color:#00204A}
.btn-primary:hover{background:var(--lime-dk);box-shadow:0 20px 38px -14px rgba(56,182,255,1)}
.btn-signal{background:var(--bleu-plein);color:#fff}
.btn-signal:hover{background:var(--bleu-dk)}
[data-theme="dark"] .btn-signal:hover{background:#0A3FB0}
.btn-ghost{border-color:var(--line-2);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn-white{background:#fff;color:#0B2547}
.btn-outline-w{border-color:rgba(255,255,255,.42);color:#fff}
.btn-outline-w:hover{background:rgba(255,255,255,.12);border-color:#fff}
/* Reflet qui balaie les boutons pleins */
.btn-primary::after,.btn-signal::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);
  transform:skewX(-18deg);transition:left .7s var(--ease);
}
.btn-primary:hover::after,.btn-signal:hover::after{left:130%}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.lnk{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;color:var(--brand)}
.lnk .arr{transition:transform .3s var(--ease)}
.lnk:hover .arr{transform:translateX(4px)}

/* 5. En-tête */
.topbar{background:var(--band);color:rgba(255,255,255,.76);font-size:12.5px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:38px;padding-block:7px}
.topbar a:hover{color:#fff}
.topbar .tb-r{display:flex;gap:20px}
@media(max-width:760px){.topbar .tb-r{display:none}}

#head{position:sticky;top:0;z-index:900;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
#head.stuck{border-color:var(--line);box-shadow:0 10px 30px -22px rgba(11,18,32,.6)}
.head-in{display:flex;align-items:center;gap:clamp(14px,2.4vw,44px);min-height:var(--head-h);max-width:1460px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto;color:var(--ink)}
.brand svg{height:40px;width:auto;color:var(--ink)}
/* Le sous-titre du logo : olive sur fond clair, lime sur fond sombre. */
.lg-sub{fill:var(--lime-ink)}
[data-theme="dark"] .lg-sub{fill:var(--lime)}
.ft-logo{height:44px;width:auto;color:var(--ink)}
.nav{display:none;align-items:center;gap:clamp(13px,1.5vw,26px);flex:0 0 auto}
/* Seuil unique et mesure : a 1280 px les sept rubriques tiennent sans
   mordre sur la colonne de droite. En dessous, le menu compact prend
   le relais — jamais les deux absents, jamais les deux presents. */
@media(min-width:1280px){.nav{display:flex}}
.nav a{font-size:14px;font-weight:500;color:var(--ink-soft);position:relative;padding:6px 0;white-space:nowrap;transition:color .25s}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--signal);border-radius:2px;transition:width .3s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a.on::after{width:100%}
.nav a.on{color:var(--ink);font-weight:600}
.head-r{display:flex;align-items:center;gap:14px}
.head-r .btn{padding:11px 18px;font-size:13.5px}
@media(max-width:1279px){.head-r .btn{display:none}}
.tgl{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);display:grid;place-items:center;background:var(--card);transition:border-color .25s,transform .25s}
.tgl:hover{border-color:var(--brand);transform:translateY(-1px)}
.tgl svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round}
.burger{width:42px;height:42px;border-radius:11px;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;gap:5px;align-content:center}
@media(min-width:1280px){.burger{display:none}}
.burger i{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger.x i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.x i:nth-child(2){opacity:0}
.burger.x i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mob{position:fixed;inset:var(--head-h) 0 auto 0;z-index:880;background:var(--paper);border-bottom:1px solid var(--line);padding:16px var(--pad) 26px;transform:translateY(-14px);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s var(--ease);max-height:calc(100dvh - var(--head-h));overflow-y:auto}
.mob.open{opacity:1;transform:none;pointer-events:auto}
.mob a{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-family:var(--disp);font-size:19px;font-weight:600}
.mob a span{font-family:var(--mono);font-size:11px;color:var(--mut)}
.mob .btn{width:100%;margin-top:20px}

/* 6. Héros : la page posée sur un dégradé */
.hero{position:relative;background:var(--degrade);padding:clamp(14px,1.6vw,22px) clamp(14px,1.6vw,22px) 0;overflow:hidden}
.hero-card{
  position:relative;background:var(--paper);border-radius:clamp(24px,3vw,42px);
  padding:clamp(46px,7vw,104px) var(--pad) clamp(30px,3.6vw,52px);
  text-align:center;overflow:hidden;box-shadow:0 40px 90px -50px rgba(11,14,20,.5);
}
/* Ondes concentriques : le signal qui part du plateau */
.hero-card::before,.hero-card::after{
  content:"";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  border:1px solid var(--line);border-radius:50%;pointer-events:none;
}
.hero-card::before{width:min(1180px,128vw);aspect-ratio:1}
.hero-card::after{width:min(860px,94vw);aspect-ratio:1}
.hero-ring{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:min(560px,64vw);aspect-ratio:1;border:1px solid var(--line);border-radius:50%;pointer-events:none}
.hero-in{position:relative;z-index:3;max-width:940px;margin:0 auto}
.hero h1{margin:16px 0 0}
.hero h1 .trait{
  display:block;width:min(340px,52%);height:clamp(9px,1.1vw,14px);margin:clamp(12px,1.4vw,20px) auto 0;
  border-radius:999px;background:var(--degrade);
}
.hero .lead{margin:24px auto 30px;max-width:56ch;color:var(--ink-soft)}
.hero .btn-row{justify-content:center}

/* Couronne de conseillers : des visages, pas des icônes */
.crew{position:absolute;inset:0;z-index:2;pointer-events:none}
.crew figure{
  position:absolute;width:clamp(56px,5.9vw,78px);aspect-ratio:1;margin:0;
  border-radius:50%;animation:flotte 7s var(--ease) infinite;
}
.crew img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:4px solid var(--paper);box-shadow:0 16px 30px -14px rgba(11,14,20,.5)}
.crew figure::after{
  content:"";position:absolute;right:-4px;bottom:-2px;width:38%;aspect-ratio:1;border-radius:50%;
  background:var(--bleu) var(--tel) center/56% no-repeat;border:3px solid var(--paper);
}
.crew figure:nth-child(2n)::after{background-color:var(--lime-dk)}
.crew .p1{left:4%;top:33%;animation-delay:0s}
.crew .p2{left:11%;top:66%;animation-delay:.9s}
.crew .p3{left:19%;top:5%;animation-delay:1.7s}
.crew .p4{right:4.5%;top:29%;animation-delay:.5s}
.crew .p5{right:12%;top:64%;animation-delay:1.3s}
.crew .p6{right:20%;top:4%;animation-delay:2.1s}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@media(max-width:900px){.crew .p3,.crew .p6{display:none}.crew figure{width:52px}}
@media(max-width:620px){.crew{display:none}}

/* Preuves sous le titre */
.hero-proof{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:30px;font-size:14px;color:var(--mut)}
.hero-proof span{display:inline-flex;align-items:center;gap:8px}
.hero-proof svg{width:15px;height:15px;stroke:var(--lime-ink);fill:none;stroke-width:2.6;flex:none}

/* Bandeau de secteurs, posé sur le dégradé */
.clients{position:relative;z-index:2;background:rgba(8,12,24,.34);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(18px,3.4vw,50px);padding:clamp(22px,3vw,38px) var(--pad)}
.clients span{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:600;font-size:clamp(14px,1.5vw,17px);color:rgba(255,255,255,.94);letter-spacing:-.01em}
.clients svg{width:20px;height:20px;stroke:rgba(255,255,255,.94);fill:none;stroke-width:1.8;flex:none}
.clients .note{width:100%;text-align:center;font-family:var(--sans);font-weight:500;font-size:12px;color:rgba(255,255,255,.86)}

/* 7. Bandeau de chiffres */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--card)}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.stats{grid-template-columns:1fr}}
.stat{padding:clamp(20px,2.6vw,30px);border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
@media(max-width:820px){.stat:nth-child(2n){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}}
.stat b{display:block;font-family:var(--mono);font-size:clamp(26px,3.4vw,40px);font-weight:700;color:var(--brand);letter-spacing:-.03em;line-height:1.1}
.stat>span{font-size:13px;color:var(--mut)}
/* les compteurs vivent dans le <b> : ils gardent sa taille */
.stat b span{font-size:inherit;color:inherit;font-weight:inherit}

/* 8. Cartes */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.6vw,30px);transition:transform .4s var(--ease),box-shadow .4s,border-color .4s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--line-2)}
.card h3{margin-bottom:9px}
.card p{color:var(--ink-soft);font-size:14.8px}
.ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand);margin-bottom:16px;transition:background .3s,color .3s,transform .3s var(--ease)}
.ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.card:hover .ico{background:var(--brand-dk);color:#fff;transform:translateY(-2px)}
[data-theme="dark"] .card:hover .ico{background:var(--brand-lt);color:#08111F}
.card-n{position:absolute;top:16px;right:20px;font-family:var(--disp);font-weight:600;font-size:12px;color:var(--line-2)}
.card.fort{background:var(--bleu-plein);border-color:var(--bleu-plein)}
.card.fort h3,.card.fort p{color:#fff}
.card.fort p{opacity:.86}
.card.fort .card-n{color:rgba(255,255,255,.4)}
.card.fort .ico{background:rgba(255,255,255,.16);color:#fff}
.card.fort:hover .ico{background:var(--lime);color:#00204A}

/* Carte service avec liste de livrables */
.svc-list{margin-top:16px;border-top:1px solid var(--line)}
.svc-list li{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-soft)}
.svc-list li::before{content:"";flex:none;width:11px;height:6px;margin-top:7px;border-left:2px solid var(--signal);border-bottom:2px solid var(--signal);transform:rotate(-45deg)}

/* 9. Méthode en frise collante */
.flow{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(26px,4vw,62px);align-items:start}
@media(max-width:900px){.flow{grid-template-columns:1fr}}
.flow-side{position:sticky;top:calc(var(--head-h) + 28px)}
@media(max-width:900px){.flow-side{position:static}}
.flow-bar{height:4px;background:var(--line);border-radius:3px;margin-top:22px;overflow:hidden}
.flow-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--signal));border-radius:3px;transition:width .25s linear}
.step{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:clamp(22px,2.6vw,30px) 0;border-bottom:1px solid var(--line);opacity:.45;transition:opacity .45s var(--ease)}
.step.on{opacity:1}
.step-n{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--signal);padding-top:5px}
.step h3{margin-bottom:7px}
.step p{color:var(--ink-soft);font-size:14.8px;max-width:60ch}

/* 10. Secteurs */
.sector{display:flex;align-items:center;gap:16px;padding:18px 20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);transition:transform .35s var(--ease),border-color .35s,background .35s}
.sector:hover{transform:translateY(-3px);border-color:var(--brand);background:color-mix(in srgb,var(--brand) 5%,var(--card))}
.sector svg{width:22px;height:22px;stroke:var(--brand);fill:none;stroke-width:1.9;flex:none}
.sector b{font-family:var(--disp);font-size:15.5px}
.sector span{display:block;font-size:13px;color:var(--mut)}

/* 11. Formules */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:940px){.plans{grid-template-columns:1fr}}
.plan{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,2.8vw,34px);transition:transform .4s var(--ease),box-shadow .4s}
.plan:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.plan.mid{border-color:var(--brand);box-shadow:var(--sh);position:relative}
.plan.mid::before{content:"Le plus demandé";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--signal);color:#04160C;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:5px 13px;border-radius:999px;white-space:nowrap}
.plan h3{font-size:20px}
.plan .price{font-family:var(--mono);font-size:15px;color:var(--signal);margin:8px 0 18px;font-weight:600}
.plan ul{border-top:1px solid var(--line);margin-bottom:22px}
.plan li{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-soft)}
.plan li::before{content:"";flex:none;width:11px;height:6px;margin-top:7px;border-left:2px solid var(--signal);border-bottom:2px solid var(--signal);transform:rotate(-45deg)}
.plan .btn{margin-top:auto;width:100%}

/* 12. Témoignages */
.quote{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--signal);border-radius:var(--r);padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column}
.quote p{font-size:15.5px;color:var(--ink);font-style:italic}
.quote .who{margin-top:auto;padding-top:18px;font-size:13px;color:var(--mut)}
.quote .who b{display:block;font-family:var(--disp);font-style:normal;color:var(--ink);font-size:14.5px}

/* 13. FAQ */
.faq{border-top:1px solid var(--line);max-width:900px}
.faq-i{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;text-align:left;font-family:var(--disp);font-size:clamp(16px,1.8vw,19px);font-weight:600}
.faq-q i{position:relative;width:26px;height:26px;flex:none;border-radius:50%;border:1px solid var(--line-2);transition:background .3s,border-color .3s,transform .3s var(--ease)}
.faq-q i::before,.faq-q i::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink);transform:translate(-50%,-50%);transition:background .3s,opacity .25s}
.faq-q i::before{width:11px;height:2px}
.faq-q i::after{width:2px;height:11px}
.faq-i.open .faq-q i{background:var(--brand-dk);border-color:var(--brand-dk);transform:rotate(90deg)}
.faq-i.open .faq-q i::before,.faq-i.open .faq-q i::after{background:#fff}
.faq-i.open .faq-q i::after{opacity:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.faq-a p{padding-bottom:20px;color:var(--ink-soft);font-size:15px;max-width:74ch}

/* 14. Bandeau d'appel */
.band{position:relative;overflow:hidden;background:var(--band);color:#fff;text-align:center;padding:clamp(58px,7vw,104px) 0}
.band::before{content:"";position:absolute;inset:0;background:
  radial-gradient(620px 320px at 50% -10%, rgba(43,217,124,.22), transparent 70%),
  radial-gradient(560px 300px at 92% 110%, rgba(46,111,208,.3), transparent 70%)}
.band .wrap{position:relative;z-index:2}
.band h2{color:#fff;max-width:20ch;margin:0 auto 16px}
.band p{color:rgba(255,255,255,.76);max-width:56ch;margin:0 auto 30px}
.band .btn-row{justify-content:center}

/* 15. Formulaire */
.form{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3.2vw,40px);box-shadow:var(--sh)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.f-row{grid-template-columns:1fr}}
.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--mut);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:10px;
  background:var(--paper);font-size:15px;transition:border-color .25s,box-shadow .25s,background .25s;
}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);background:var(--card);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent)}
.field input::placeholder,.field textarea::placeholder{color:var(--mut)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fmsg{display:none;border-radius:10px;padding:13px 15px;font-size:14px;font-weight:500;margin-bottom:16px}
.fmsg.on{display:block}
.fmsg.ok{background:color-mix(in srgb,var(--signal) 14%,transparent);border:1px solid color-mix(in srgb,var(--signal) 45%,transparent);color:var(--signal)}
.fmsg.err{background:rgba(214,69,55,.12);border:1px solid rgba(214,69,55,.42);color:#D64537}
[data-theme="dark"] .fmsg.err{color:#FF9C90}
.fmsg.wait{background:var(--paper-2);border:1px solid var(--line);color:var(--mut)}
.form .btn[disabled]{opacity:.6;cursor:progress;transform:none}
.f-note{font-size:12.5px;color:var(--mut);margin-top:14px}

.contact-list{border-top:1px solid var(--line)}
.contact-list li{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.contact-list svg{width:19px;height:19px;stroke:var(--signal);fill:none;stroke-width:1.9;flex:none;margin-top:3px}
.contact-list b{display:block;font-size:12.5px;color:var(--mut);font-weight:600;margin-bottom:2px}
.contact-list a,.contact-list span{font-size:15.5px}
.contact-list a:hover{color:var(--brand)}

/* 16. Journal */
.post{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s}
.post:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.post-top{padding:20px 22px 0}
.post-k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--signal)}
.post-in{padding:12px 22px 22px;display:flex;flex-direction:column;flex:1}
.post h3{font-size:18px;margin-bottom:9px}
.post p{color:var(--ink-soft);font-size:14.5px;margin-bottom:16px}
.post .lnk{margin-top:auto}
.post-date{font-size:12.5px;color:var(--mut)}

/* 17. Pied de page */
footer{background:var(--paper-2);border-top:1px solid var(--line);padding-top:clamp(48px,6vw,76px)}
.ft-top{display:grid;grid-template-columns:1.8fr 1fr 1fr 1.3fr;gap:clamp(26px,4vw,52px);padding-bottom:clamp(36px,4.4vw,56px)}
@media(max-width:900px){.ft-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ft-top{grid-template-columns:1fr}}
.ft-top p{font-size:14.5px;color:var(--ink-soft);max-width:36ch;margin-top:16px}
.ft-h{font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:16px}
.ft-col a,.ft-col li{display:block;font-size:14.5px;color:var(--ink-soft);padding:5px 0;transition:color .25s}
.ft-col a:hover{color:var(--brand)}
.ft-bot{border-top:1px solid var(--line);padding:20px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--mut)}
.ft-bot nav{display:flex;gap:20px;flex-wrap:wrap}
.ft-bot a:hover{color:var(--ink)}

/* 18. Boutons flottants */
.wa{position:fixed;right:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,24px);z-index:930;display:inline-flex;align-items:center;gap:9px;padding:12px 18px 12px 14px;border-radius:999px;background:#25D366;color:#04160C;font-size:13px;font-weight:700;box-shadow:0 16px 32px -14px rgba(37,211,102,.85);transition:transform .3s var(--ease)}
.wa:hover{transform:translateY(-3px)}
.wa svg{width:19px;height:19px;fill:#04160C;flex:none}
@media(max-width:600px){.wa span{display:none}.wa{padding:14px}}

/* 19. Assistant */
.bot-fab{position:fixed;left:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,24px);z-index:930;display:inline-flex;align-items:center;gap:10px;padding:12px 18px 12px 13px;border-radius:999px;background:var(--brand-dk);color:#fff;font-size:13px;font-weight:600;box-shadow:0 16px 32px -14px rgba(11,42,86,.95);transition:transform .3s var(--ease)}
[data-theme="dark"] .bot-fab{background:var(--brand-lt);color:#08111F}
.bot-fab:hover{transform:translateY(-3px)}
.bot-fab svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;flex:none}
.bot-fab b{width:8px;height:8px;border-radius:50%;background:var(--signal-lt);flex:none}
@media(max-width:600px){.bot-fab span{display:none}.bot-fab{padding:14px}}

aside.bot{position:fixed;left:clamp(14px,2vw,24px);bottom:calc(clamp(14px,2vw,24px) + 62px);z-index:931;width:min(390px,calc(100vw - 28px));max-height:min(620px,76dvh);display:none;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-lg);overflow:hidden}
aside.bot.open{display:flex}
.bot-head{display:flex;align-items:center;gap:12px;padding:15px 17px;background:var(--band);color:#fff}
.bot-head b{font-family:var(--disp);font-size:15px}
.bot-head small{display:block;font-size:11.5px;color:rgba(255,255,255,.7)}
.bot-head .dot{margin-left:auto}
.bot-x{color:rgba(255,255,255,.8);font-size:22px;line-height:1;padding:2px 4px}
.bot-x:hover{color:#fff}
.bot-log{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:11px;background:var(--paper)}
.msg{display:block;font-size:14.2px;line-height:1.6;padding:11px 14px;border-radius:13px;max-width:86%}
.msg.bot{background:var(--card);border:1px solid var(--line);border-bottom-left-radius:4px;align-self:flex-start}
.msg.me{background:var(--brand-dk);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
[data-theme="dark"] .msg.me{background:var(--brand-lt);color:#08111F}
.msg a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.msg.me a{color:#fff}
.msg b{font-weight:700}
.bot-choices{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 14px;background:var(--paper)}
.bot-choices button{font-size:12.5px;padding:8px 13px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);color:var(--ink-soft);transition:border-color .25s,color .25s,transform .25s}
.bot-choices button:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}
.bot-form{display:flex;border-top:1px solid var(--line);background:var(--card)}
.bot-form input{flex:1;border:0;background:none;padding:14px 17px;font-size:14px}
.bot-form button{padding:0 18px;font-weight:700;font-size:13px;color:var(--brand)}
.typing{display:inline-flex;gap:4px;align-items:center}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--mut);animation:blink 1.3s infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.28}30%{opacity:1}}

/* 20. Animations d'entrée */
.rv{opacity:0;transform:translateY(24px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-1{transition-delay:.08s}.rv-2{transition-delay:.16s}.rv-3{transition-delay:.24s}.rv-4{transition-delay:.32s}
.bar-read{position:fixed;top:0;left:0;height:3px;width:0;z-index:950;background:linear-gradient(90deg,var(--brand),var(--signal));transition:width .1s linear}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .step{opacity:1}
}

/* 6b. Bandeau des pages intérieures */
.phero{position:relative;background:var(--degrade);padding:clamp(14px,1.6vw,22px) clamp(14px,1.6vw,22px) 0}
.phero-card{position:relative;background:var(--paper);border-radius:clamp(24px,3vw,42px);padding:clamp(38px,5.4vw,74px) var(--pad) clamp(32px,4vw,56px);overflow:hidden;box-shadow:0 40px 90px -50px rgba(11,14,20,.5)}
.phero-card::before{content:"";position:absolute;right:-8%;top:-40%;width:min(680px,72vw);aspect-ratio:1;border:1px solid var(--line);border-radius:50%;pointer-events:none}
.phero-in{position:relative;z-index:2;max-width:900px}
.phero h1{margin:14px 0 0;font-size:clamp(32px,4.8vw,60px);line-height:1.04;letter-spacing:-.04em}
.phero .lead{margin-top:20px}
.crumb{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--mut)}
.crumb a:hover{color:var(--bleu)}
.phero-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.tag{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;border:1px solid var(--line-2);font-size:13.5px;font-weight:500;color:var(--ink-soft);transition:border-color .25s,color .25s}
.tag:hover{border-color:var(--bleu);color:var(--bleu)}
.tag b{width:6px;height:6px;border-radius:50%;background:var(--lime-dk)}

/* Bloc prestation détaillée */
.offer{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);padding:clamp(34px,4.6vw,64px) 0;border-bottom:1px solid var(--line)}
@media(max-width:900px){.offer{grid-template-columns:1fr;gap:22px}}
.offer:last-of-type{border-bottom:0}
.offer-side{position:sticky;top:calc(var(--head-h) + 24px);align-self:start}
@media(max-width:900px){.offer-side{position:static}}
.offer-no{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--bleu);color:#fff;font-family:var(--disp);font-weight:600;font-size:15px;margin-bottom:16px}
.offer h2{font-size:clamp(24px,3vw,36px);letter-spacing:-.035em}
.offer-side p{color:var(--ink-soft);font-size:15px;margin-top:12px}
.offer-body p{color:var(--ink-soft);margin-bottom:18px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:6px}
@media(max-width:620px){.duo{grid-template-columns:1fr}}
.mini{background:var(--paper-2);border-radius:var(--r);padding:20px 22px}
.mini .mini-h{font-size:14px;font-weight:600;margin-bottom:12px;color:var(--ink);letter-spacing:-.01em}
.mini li{position:relative;padding-left:20px;font-size:14px;color:var(--ink-soft);margin-bottom:8px;line-height:1.5}
.mini li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:5px;border-left:2px solid var(--lime-dk);border-bottom:2px solid var(--lime-dk);transform:rotate(-45deg)}
.mini.kpi-box li::before{border-color:var(--bleu)}

/* Équipe */
.crew-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
.mate{text-align:center}
.mate img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-lg);margin-bottom:14px}
.mate b{display:block;font-family:var(--disp);font-size:16px;font-weight:600}
.mate span{font-size:13.5px;color:var(--mut)}

/* Texte long */
.prose{max-width:min(72ch,100%);overflow-wrap:break-word}
.prose p{color:var(--ink-soft);margin-bottom:18px}
.prose h2{font-size:clamp(22px,2.6vw,30px);margin:34px 0 14px}
.prose h3{font-size:19px;margin:26px 0 10px}
.prose ul{margin:0 0 22px}
.prose li{position:relative;padding-left:22px;margin-bottom:10px;color:var(--ink-soft)}
.prose li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:5px;border-left:2px solid var(--lime-dk);border-bottom:2px solid var(--lime-dk);transform:rotate(-45deg)}
.prose blockquote{margin:26px 0;padding:20px 24px;border-radius:var(--r);background:var(--paper-2);border-left:4px solid var(--lime);font-size:17px;color:var(--ink)}

/* 21. Assistant : jauge, pastille, état ouvert */
.bot-jauge{height:3px;background:var(--line);overflow:hidden;display:none}
.bot.en-cours .bot-jauge{display:block}
.bot-jauge i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--bleu),var(--lime));transition:width .4s var(--ease)}
.bot-fab .pastille{width:9px;height:9px;border-radius:50%;background:var(--lime);flex:none;transition:transform .3s var(--ease)}
.bot-fab .pastille.on{animation:sonne 1.6s var(--ease) infinite}
@keyframes sonne{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
.bot-fab.actif{transform:translateY(-2px)}
.bot-form button{font-size:19px;line-height:1}
.msg.bot a{font-weight:600}

/* 22. Retour en haut */
.haut{
  position:fixed;right:clamp(14px,2vw,24px);bottom:calc(clamp(14px,2vw,24px) + 58px);z-index:920;
  width:42px;height:42px;border-radius:50%;background:var(--card);border:1px solid var(--line);
  display:grid;place-items:center;box-shadow:var(--sh);
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .3s,transform .3s var(--ease),border-color .25s;
}
.haut.on{opacity:1;pointer-events:auto;transform:none}
.haut:hover{border-color:var(--bleu)}
.haut svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* 23. Sommaire actif */
.tag.on{border-color:var(--bleu);color:var(--bleu);background:color-mix(in srgb,var(--bleu) 8%,transparent)}
.tag.on b{background:var(--bleu)}

/* 24. Estimateur de dispositif */
.estim{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(24px,3.4vw,50px);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3.4vw,44px);box-shadow:var(--sh)}
@media(max-width:860px){.estim{grid-template-columns:1fr}}
.estim-champ{margin-bottom:26px}
.estim-champ label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;font-weight:600;margin-bottom:12px}
.estim-champ label span{font-family:var(--disp);font-size:17px;color:var(--bleu)}
.estim-champ input[type=range]{
  width:100%;height:6px;border-radius:999px;appearance:none;-webkit-appearance:none;
  background:linear-gradient(90deg,var(--lime),var(--bleu));outline:none;padding:0;border:0;
}
.estim-champ input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--card);
  border:3px solid var(--bleu);cursor:grab;box-shadow:0 4px 12px -4px rgba(11,14,20,.5);
}
.estim-champ input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--card);border:3px solid var(--bleu);cursor:grab;
}
.estim-champ small{display:block;margin-top:9px;font-size:12.5px;color:var(--mut)}
.estim-out{background:var(--paper-2);border-radius:var(--r);padding:clamp(20px,2.6vw,28px)}
.estim-out .ligne{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.estim-out .ligne:last-of-type{border-bottom:0}
.estim-out .ligne span{font-size:14px;color:var(--ink-soft)}
.estim-out b{font-family:var(--disp);font-size:clamp(20px,2.4vw,26px);color:var(--ink);letter-spacing:-.02em}
.estim-out b.pulse{animation:saute .45s var(--ease)}
@keyframes saute{0%{transform:scale(1)}45%{transform:scale(1.14)}100%{transform:scale(1)}}
.estim-out .form-suggeree b{color:var(--bleu)}
.estim-note{font-size:13.5px;color:var(--ink-soft);margin:16px 0 20px;min-height:40px}
.estim-avert{font-size:12.5px;color:var(--mut);margin-top:14px}
.estim-out .btn{width:100%}

/* 25. Démonstration d'appel */
.demo{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,2.6vw,32px)}
@media(max-width:900px){.demo{grid-template-columns:1fr}}
.demo-fenetre{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh)}
.demo-barre-haute{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.demo-etat{font-size:12.5px;font-weight:600;color:var(--mut)}
.demo.actif .demo-etat{color:var(--bleu)}
.demo.fini .demo-etat{color:var(--lime-ink)}
.demo-chrono{margin-left:auto;font-family:var(--disp);font-weight:600;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.demo-barre{height:3px;background:var(--line)}
.demo-barre i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--bleu),var(--lime));transition:width .2s linear}
.demo-log{height:clamp(260px,34vw,330px);overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;background:var(--paper)}
.demo-msg{font-size:14.4px;line-height:1.6;padding:11px 15px;border-radius:14px;max-width:88%;animation:entre .35s var(--ease)}
.demo-msg .demo-qui{display:block;font-size:11px;font-weight:600;letter-spacing:.04em;margin-bottom:4px;opacity:.7}
.demo-msg.ac{background:var(--bleu);color:#fff;align-self:flex-start;border-bottom-left-radius:4px}
.demo-msg.cli{background:var(--card);border:1px solid var(--line);align-self:flex-end;border-bottom-right-radius:4px}
@keyframes entre{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.demo-pied{display:flex;align-items:center;gap:14px;padding:14px 18px;border-top:1px solid var(--line)}
.demo-play{display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border-radius:999px;background:var(--lime);color:#00204A;font-family:var(--disp);font-weight:600;font-size:14px;transition:background .25s,transform .25s var(--ease)}
.demo-play:hover{transform:translateY(-2px)}
.demo-play.on{background:var(--ink);color:var(--paper)}
.demo-play svg{width:15px;height:15px;fill:currentColor}
.demo-pied small{font-size:12.5px;color:var(--mut)}
.demo-fiche{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,2.6vw,28px);align-self:start}
.demo-fiche h3{font-size:16px;margin-bottom:4px}
.demo-fiche p{font-size:13px;color:var(--mut);margin-bottom:16px}
.demo-fiche ul{display:flex;flex-direction:column;gap:9px}
.demo-fiche li{position:relative;padding-left:24px;font-size:14px;color:var(--ink);opacity:0;transform:translateX(-6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.demo-fiche li.in{opacity:1;transform:none}
.demo-fiche li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:6px;border-left:2px solid var(--lime-dk);border-bottom:2px solid var(--lime-dk);transform:rotate(-45deg)}
.demo-fiche li.vide{opacity:1;color:var(--mut);font-style:italic;padding-left:0}
.demo-fiche li.vide::before{display:none}

/* 26. Le coût des appels manqués */
.couts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.cout{background:var(--card);padding:clamp(22px,2.6vw,30px);transition:background .35s}
.cout:hover{background:var(--paper-2)}
.cout b{display:block;font-family:var(--disp);font-size:clamp(26px,3vw,36px);color:var(--bleu);letter-spacing:-.03em;margin-bottom:8px}
.cout h3{font-size:16px;margin-bottom:7px}
.cout p{font-size:14px;color:var(--ink-soft)}

/* 27. Comparatif interne / externalisé */
.compa{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
@media(max-width:720px){.compa{grid-template-columns:1fr}}
.compa-col{border:1px solid var(--line);border-radius:var(--r);padding:22px}
.compa-col.nous{border-color:var(--bleu);background:color-mix(in srgb,var(--bleu) 5%,transparent)}
.compa-col h4{font-size:14px;font-weight:600;margin-bottom:14px;color:var(--ink)}
.compa-col .tot{font-family:var(--disp);font-size:clamp(22px,2.6vw,28px);color:var(--ink);letter-spacing:-.02em}
.compa-col.nous .tot{color:var(--bleu)}
.compa-col ul{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.compa-col li{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--ink-soft);padding:6px 0}
.compa-col li span:last-child{font-weight:600;color:var(--ink)}

/* 28. Outils */
.outils{display:flex;flex-wrap:wrap;gap:10px}
.outil{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:14px;font-weight:500;transition:border-color .25s,transform .25s var(--ease)}
.outil:hover{border-color:var(--bleu);transform:translateY(-2px)}
.outil i{width:8px;height:8px;border-radius:2px;background:var(--bleu);flex:none}
.outil:nth-child(3n) i{background:var(--lime-dk)}

/* 29. Demande de rappel dans l'assistant */
.bot-rappel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:11px;align-self:stretch}
.bot-rappel label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;color:var(--mut)}
.bot-rappel input,.bot-rappel select{padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font-size:14.5px;color:var(--ink)}
.bot-rappel input:focus,.bot-rappel select:focus{border-color:var(--bleu);box-shadow:0 0 0 3px color-mix(in srgb,var(--bleu) 15%,transparent)}
.bot-rappel .btn{width:100%;padding:12px 20px;font-size:14px}
.bot-rappel-note{font-size:11.5px;color:var(--mut);text-align:center}
.bot-rappel-err{font-size:12.5px;color:#D64537;text-align:center}
[data-theme="dark"] .bot-rappel-err{color:#FF9C90}

/* 30. Mouvements */
html:not(.pret) body{opacity:0}
html.pret body{opacity:1;transition:opacity .5s var(--ease)}

[data-anim]{opacity:0;transition:opacity .75s var(--ease),transform .75s var(--ease)}
[data-anim].in{opacity:1;transform:none}
[data-anim="monte"]{transform:translateY(26px)}
[data-anim="gauche"]{transform:translateX(-34px)}
[data-anim="droite"]{transform:translateX(34px)}
[data-anim="zoom"]{transform:scale(.94)}
/* Sur mobile, une entree laterale deborde de la colonne : on la
   transforme en entree verticale. */
@media(max-width:900px){
  [data-anim="gauche"],[data-anim="droite"]{transform:translateY(26px)}
}
/* Révélation par masque : le visuel se dévoile du bas vers le haut */
[data-anim="masque"]{opacity:1;clip-path:inset(100% 0 0 0);transform:none;transition:clip-path 1.1s var(--ease)}
[data-anim="masque"].in{clip-path:inset(0 0 0 0)}

/* Titres mot à mot */
.mot{display:inline-block;opacity:0;transform:translateY(.5em) rotate(1.4deg);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.mot.in{opacity:1;transform:none}

/* Inclinaison des cartes au survol */
.card,.plan,.quote,.post,.mate{--rx:0deg;--ry:0deg;transform-style:preserve-3d}
.card:hover,.plan:hover,.quote:hover,.post:hover{
  transform:translateY(-4px) perspective(700px) rotateX(var(--rx)) rotateY(var(--ry));
}
.mate:hover img{transform:perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.02)}
.mate img{transition:transform .45s var(--ease)}

/* 31. Visuels de section */
.visuel{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg)}
.visuel img{width:100%;height:100%;object-fit:cover;display:block;
  transform:translateY(var(--para,0)) scale(1.06);transition:transform .6s var(--ease)}
.visuel:hover img{transform:translateY(var(--para,0)) scale(1.1)}
.visuel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,transparent 40%,color-mix(in srgb,var(--bleu) 42%,transparent))}
.visuel.haut{aspect-ratio:4/5}
.visuel.large{aspect-ratio:16/9}
.visuel.carre{aspect-ratio:1}
.visuel-lgd{position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff;padding:44px 18px 16px;
  font-size:13.5px;font-weight:500;
  background:linear-gradient(transparent,rgba(6,9,16,.86))}
.visuel-etiq{position:absolute;left:18px;top:18px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.94);color:#0B0E14;
  font-size:12.5px;font-weight:600}
.visuel-etiq i{width:7px;height:7px;border-radius:50%;background:var(--lime-dk)}

/* Bandeau illustré pleine largeur */
.bande-img{position:relative;min-height:clamp(240px,32vw,380px);display:grid;place-items:center;
  overflow:hidden;text-align:center;color:#fff}
.bande-img img{position:absolute;inset:0;width:100%;height:110%;object-fit:cover;
  transform:translateY(var(--para,0))}
.bande-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(11,14,20,.82),color-mix(in srgb,var(--bleu) 60%,rgba(11,14,20,.6)))}
.bande-img .dedans{position:relative;z-index:2;max-width:760px;padding:clamp(30px,4vw,54px) var(--pad)}
.bande-img h2{color:#fff}
.bande-img p{color:rgba(255,255,255,.84);margin-top:14px}

/* Le héros gagne une pointe de mouvement */
.hero-card{animation:monteDoux .9s var(--ease) both}
@keyframes monteDoux{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  html:not(.pret) body{opacity:1}
  [data-anim],[data-anim="masque"],.mot{opacity:1!important;transform:none!important;clip-path:none!important}
  .hero-card{animation:none}
  .visuel img,.bande-img img{transform:none!important}
}

/* 32. Lecteur d'extrait sonore */
.ecoute{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.4vw,28px);align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(20px,2.6vw,30px);box-shadow:var(--sh);transition:border-color .35s}
.ecoute.joue{border-color:var(--bleu)}
@media(max-width:620px){.ecoute{grid-template-columns:1fr;justify-items:start}}
.ecoute-play{display:inline-flex;align-items:center;gap:11px;padding:14px 24px;border-radius:999px;
  background:var(--lime);color:#00204A;font-family:var(--disp);font-weight:600;font-size:15px;
  transition:background .25s,transform .25s var(--ease);white-space:nowrap}
.ecoute-play:hover{transform:translateY(-2px)}
.ecoute.joue .ecoute-play{background:var(--ink);color:var(--paper)}
.ecoute-play svg{width:15px;height:15px;fill:currentColor}
.ecoute.joue .ecoute-play .ico-play{display:none}
.ecoute-play .ico-pause{display:none}
.ecoute.joue .ecoute-play .ico-pause{display:block}
.ecoute-droite{min-width:0;width:100%}
.ecoute-haut{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:12px}
.ecoute-haut b{font-size:14.5px;font-weight:600}
.ecoute-chrono{font-family:var(--disp);font-weight:600;font-size:13.5px;color:var(--mut);font-variant-numeric:tabular-nums}

/* L'onde suit réellement le son : chaque barre est pilotée par l'analyseur */
.onde{display:flex;align-items:center;gap:3px;height:52px;margin-bottom:12px}
.onde i{flex:1;height:100%;min-width:2px;border-radius:3px;transform:scaleY(.08);transform-origin:center;
  background:linear-gradient(180deg,var(--lime),var(--bleu));transition:transform .09s linear;opacity:.55}
.ecoute.joue .onde i{opacity:1}

.ecoute-barre{height:5px;border-radius:3px;background:var(--line);cursor:pointer;overflow:hidden}
.ecoute-barre i{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--bleu),var(--lime))}
.ecoute-note{font-size:12.5px;color:var(--mut);margin-top:12px}

/* 33. Bulle d'accroche de l'assistant */
.bot-bulle{
  position:fixed;left:clamp(14px,2vw,24px);bottom:calc(clamp(14px,2vw,24px) + 62px);z-index:929;
  max-width:min(300px,calc(100vw - 34px));padding:15px 34px 15px 17px;
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--lime);
  border-radius:16px 16px 16px 4px;box-shadow:var(--sh-lg);cursor:pointer;
  opacity:0;transform:translateY(10px) scale(.96);transform-origin:left bottom;
  transition:opacity .3s var(--ease),transform .35s var(--ease);
}
.bot-bulle.on{opacity:1;transform:none;animation:bulleEntree .45s var(--ease)}
@keyframes bulleEntree{0%{transform:translateY(10px) scale(.96)}60%{transform:translateY(-3px) scale(1.02)}100%{transform:none}}
.bot-bulle:hover{border-color:var(--bleu)}
.bot-bulle p{font-size:14.2px;line-height:1.5;color:var(--ink)}
.bot-bulle-cta{display:inline-block;margin-top:9px;font-size:12.5px;font-weight:600;color:var(--bleu)}
.bot-bulle-cta::after{content:" \2192"}
.bot-bulle-x{position:absolute;top:8px;right:10px;font-size:17px;line-height:1;color:var(--mut);padding:3px 5px;border-radius:6px}
.bot-bulle-x:hover{color:var(--ink);background:var(--paper-2)}
@media(max-width:600px){.bot-bulle{bottom:calc(clamp(14px,2vw,24px) + 64px);max-width:calc(100vw - 28px)}}
@media(prefers-reduced-motion:reduce){.bot-bulle,.bot-bulle.on{animation:none;transition:opacity .2s}}

/* La colonne de droite de la demonstration : visuel puis fiche. */
.demo-cote{display:flex;flex-direction:column;gap:18px;align-self:start}
.demo-cote .visuel{aspect-ratio:16/10}

/* 34. Statut du plateau, calculé en direct */
.pastille-etat{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--mut);
  margin-right:9px;vertical-align:middle;transition:background .3s}
#statut-plateau.ouvert .pastille-etat{background:var(--lime-dk);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--lime-dk) 60%,transparent);animation:pulse 2.4s infinite}
#statut-plateau.ferme .pastille-etat{background:var(--mut)}
#statut-plateau .statut-txt{font-size:.86em}

/* 35. Carte de situation */
.carte{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)}
.carte iframe{width:100%;height:clamp(220px,26vw,300px);border:0;display:block;filter:grayscale(.3)}
[data-theme="dark"] .carte iframe{filter:grayscale(.4) invert(.9) hue-rotate(180deg)}
.carte .f-note{padding:14px 16px;margin:0}

/* 36. Créneaux de rappel cliquables dans l'assistant */
.bot-creneaux{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.bot-creneaux legend{font-size:.74rem;font-weight:600;color:var(--mut);
  margin-bottom:7px;padding:0;letter-spacing:.01em}
.bot-creneaux label{margin:0;cursor:pointer}
.bot-creneaux input{position:absolute;opacity:0;width:0;height:0}
.bot-creneaux span{display:inline-block;padding:7px 12px;border:1px solid var(--line);
  border-radius:999px;font-size:.78rem;background:var(--bg);color:var(--mut);
  transition:background .18s,color .18s,border-color .18s,transform .18s}
.bot-creneaux label:hover span{border-color:var(--ink);color:var(--ink);transform:translateY(-1px)}
.bot-creneaux input:checked+span{background:var(--lime);border-color:var(--lime);
  color:#101418;font-weight:600}
.bot-creneaux input:focus-visible+span{outline:2px solid var(--bleu);outline-offset:2px}

/* ── 37. Appel final sur photo 
   La photo est teintée de la couleur de la bande : une seule
   famille chromatique du haut en bas du bloc, plus de raccord
   entre deux bleus voisins. */
.band-photo{padding:clamp(74px,9vw,132px) 0}
.band-photo>img{position:absolute;inset:0;width:100%;height:112%;object-fit:cover;
  transform:translateY(var(--para,0));z-index:0}
.band-photo::before{z-index:1;background:
  linear-gradient(180deg,color-mix(in srgb,var(--band) 76%,transparent),
                          color-mix(in srgb,var(--band) 93%,transparent)),
  radial-gradient(620px 320px at 50% -10%, rgba(43,217,124,.16), transparent 70%),
  radial-gradient(560px 300px at 92% 110%, rgba(46,111,208,.24), transparent 70%)}
.band-photo h2{max-width:22ch}

/* ── 38. Photo révélée au survol des cartes 
   L'image n'est demandée qu'une fois la page chargée (voir
   main.js) : elle enrichit le survol sans peser au premier
   affichage. Le voile garantit le contraste du texte. */
.card[data-fond]::before{content:"";position:absolute;inset:0;background-image:var(--fond);
  background-size:cover;background-position:center;opacity:0;transform:scale(1.09);
  transition:opacity .55s var(--ease),transform 1.1s var(--ease);z-index:0;pointer-events:none}
.card[data-fond]::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(155deg,rgba(8,11,19,.82),rgba(8,11,19,.52));
  opacity:0;transition:opacity .55s var(--ease)}
.card[data-fond]>*{position:relative;z-index:2}
.card[data-fond].vu:hover::before,.card[data-fond].vu:focus-within::before{opacity:1;transform:scale(1)}
.card[data-fond].vu:hover::after,.card[data-fond].vu:focus-within::after{opacity:1}
.card[data-fond].vu:hover h3,.card[data-fond].vu:focus-within h3{color:#fff}
.card[data-fond].vu:hover p,.card[data-fond].vu:focus-within p{color:rgba(255,255,255,.88)}
.card[data-fond].vu:hover .card-n{color:rgba(255,255,255,.5)}
.card[data-fond].vu:hover .ico{background:var(--lime);color:#00204A}
@media(hover:none){.card[data-fond]::before,.card[data-fond]::after{display:none}}

/* ── 39. Écran de chargement 
   Sept barres qui montent et redescendent, comme le niveau
   sonore d'une ligne qui s'ouvre. */
html.charge,html.charge body{overflow:hidden}
html.charge .bot-fab,html.charge .wa,html.charge .bot-bulle,html.charge .haut{opacity:0;pointer-events:none}
#chargement{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;
  background:var(--paper);transition:opacity .55s var(--ease),visibility .55s}
#chargement.fini{opacity:0;visibility:hidden}
.ch-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px}

/* Le logo entre en scene, puis respire doucement. */
.ch-logo{height:clamp(120px,17vw,180px);width:auto;position:relative;z-index:2;
  animation:chEntree .7s var(--ease) both, chSouffle 2.8s var(--ease) .7s infinite}
@keyframes chEntree{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes chSouffle{0%,100%{transform:scale(1)}50%{transform:scale(1.028)}}

/* Deux halos partent du logo, comme l'onde d'un appel qui s'etablit.
   Ils naissent derriere lui et s'effacent en s'ecartant. */
.ch-in::before,.ch-in::after{content:"";position:absolute;top:clamp(60px,8.5vw,90px);left:50%;
  width:clamp(120px,17vw,180px);aspect-ratio:1;margin-left:calc(clamp(120px,17vw,180px) / -2);
  margin-top:calc(clamp(120px,17vw,180px) / -2);
  border:2px solid var(--bleu);border-radius:50%;opacity:0;z-index:1;
  animation:chHalo 2.6s var(--ease) infinite}
.ch-in::after{animation-delay:1.3s;border-color:var(--lime-dk)}
@keyframes chHalo{
  0%{transform:scale(.72);opacity:0}
  18%{opacity:.5}
  100%{transform:scale(1.85);opacity:0}
}

/* L'onde sonore reste, en retrait : elle dit que la ligne est ouverte. */
.ch-onde{display:flex;align-items:flex-end;gap:5px;height:26px;position:relative;z-index:2}
.ch-onde i{width:4px;height:100%;border-radius:2px;background:var(--bleu);opacity:.55;
  transform-origin:bottom;transform:scaleY(.18);animation:chOnde 1.15s var(--ease) infinite}
.ch-onde i:nth-child(2){animation-delay:.09s;background:var(--lime-dk)}
.ch-onde i:nth-child(3){animation-delay:.18s}
.ch-onde i:nth-child(4){animation-delay:.27s;background:var(--lime-dk)}
.ch-onde i:nth-child(5){animation-delay:.36s}
.ch-onde i:nth-child(6){animation-delay:.45s;background:var(--lime-dk)}
.ch-onde i:nth-child(7){animation-delay:.54s}
@keyframes chOnde{0%,100%{transform:scaleY(.18)}45%{transform:scaleY(1)}}

.ch-barre{position:absolute;left:50%;bottom:14vh;transform:translateX(-50%);
  width:min(190px,42vw);height:2px;border-radius:2px;background:var(--line);overflow:hidden}
/* La barre grandit sur place : une translation la ferait sortir de son
   cadre et compterait comme un débordement de page à 375 px. */
.ch-barre i{display:block;height:100%;width:100%;border-radius:2px;transform-origin:left;
  background:linear-gradient(90deg,var(--bleu),var(--lime));animation:chFile 1.4s var(--ease) infinite}
@keyframes chFile{0%{transform:scaleX(0);opacity:1}70%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@media(prefers-reduced-motion:reduce){
  .ch-onde i,.ch-barre i,.ch-logo,.ch-in::before,.ch-in::after{animation:none}
  .ch-onde i{transform:scaleY(.6)}
  .ch-in::before,.ch-in::after{display:none}
}

/* ── 40. Indicatif téléphonique 
   Le sélecteur reste étroit : c'est le numéro qui compte. */
.tel-groupe{display:flex;gap:8px}
.tel-groupe select{flex:0 0 auto;width:clamp(120px,34%,152px);min-width:0}
.tel-groupe input{flex:1 1 auto;min-width:0}
@media(max-width:420px){.tel-groupe{flex-wrap:wrap}.tel-groupe select,.tel-groupe input{width:100%;flex:1 1 100%}}

/* 41. Pays de l'estimateur */
.estim-pays{margin-bottom:22px}
.estim-pays select{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:11px;
  background:var(--paper);color:var(--ink);font-family:inherit;font-size:15px}
.estim-pays label{display:block;margin-bottom:8px}

/* -- 42. Selecteur de langue ------------------------------
   Deux etiquettes, pas un menu deroulant : avec deux langues,
   un choix visible coute moins qu'un clic pour l'ouvrir. */
.lang{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);
  border-radius:999px;background:var(--paper);flex:none}
.lang a{display:inline-block;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:600;
  letter-spacing:.04em;color:var(--mut);transition:background .25s,color .25s}
.lang a:hover{color:var(--ink)}
.lang a.on{background:var(--ink);color:var(--paper)}
[data-theme="dark"] .lang a.on{background:var(--lime);color:#00204A}
/* Changer de langue ne doit pas demander d'ouvrir le menu : le
   selecteur reste dans l'en-tete a toutes les largeurs, et se resserre
   plutot que de disparaitre. L'exemplaire du menu deroulant ferait
   double emploi. */
/* Sous 480 px, l'en-tete tient quatre elements sur une seule ligne :
   marque, langue, theme et menu. Les paliers sont poses la ou la mesure
   les demande — a 390 px, un palier arrete a 380 laissait le bouton de
   menu sortir du cadre. */
@media(max-width:600px){
  .lang{padding:2px}
  .lang a{padding:5px 8px;font-size:11.5px;letter-spacing:.02em}
}

/* Mentions légales dans le pied de page */
.ft-legal{font-size:12px;line-height:1.7;color:var(--mut);margin-bottom:14px;max-width:70ch}
.ft-legal a{color:var(--mut);text-decoration:underline;text-underline-offset:2px}
.ft-legal a:hover{color:var(--ink)}
.ft-legal sup{font-size:.7em}

/* Signature de l'agence : deux initiales, discrètes mais cliquables */
.ft-kg{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:7px;
  border:1px solid var(--line);font-size:10.5px;font-weight:700;letter-spacing:.04em;
  color:var(--mut);transition:border-color .25s,color .25s}
.ft-kg:hover{border-color:var(--brand);color:var(--brand)}

/* Ce titre tient sur une ligne : bride a 20 caracteres, « aussi »
   se retrouvait seul en seconde ligne. */
.band-devis h2{max-width:none;white-space:nowrap;font-size:clamp(21px,3.1vw,42px)}
@media(max-width:560px){.band-devis h2{white-space:normal;max-width:18ch}}

/* Étapes de recrutement et critères de sélection */
.etape-n{display:block;font-family:var(--disp);font-size:12px;font-weight:700;
  letter-spacing:.16em;color:var(--signal);margin-bottom:12px}
.crit{margin-top:34px;padding:clamp(24px,3vw,36px);border:1px solid var(--line);
  border-radius:var(--r);background:var(--card)}
.crit-l{list-style:none;display:grid;gap:16px;margin:18px 0 0}
@media(min-width:820px){.crit-l{grid-template-columns:1fr 1fr;gap:18px 34px}}
.crit-l li{display:grid;gap:3px;padding-left:16px;border-left:2px solid var(--line)}
.crit-l b{font-size:14.5px;font-weight:600;color:var(--ink)}
.crit-l span{font-size:14px;color:var(--ink-soft);line-height:1.6}
.crit .f-note{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}

/* Logo : deux variantes, une par theme.
   Le CSS masque celle qui ne sert pas — la bascule est immediate,
   sans requete supplementaire au changement de theme. */
.lg-sombre{display:none}
[data-theme="dark"] .lg-clair{display:none}
[data-theme="dark"] .lg-sombre{display:block}

/* Le bloc de marque ne se comprime jamais sous sa largeur utile et son
   nom ne se coupe pas : c'est un logotype, pas un paragraphe. */
.brand{display:flex;align-items:center;gap:11px;margin-right:auto;color:var(--ink);
  flex:0 0 auto;min-width:0;white-space:nowrap}
.lg-sym{height:42px;width:auto;flex:none}
.lg-txt{display:flex;align-items:center;line-height:1;white-space:nowrap}
.lg-txt b{font-family:var(--disp);font-size:18px;font-weight:700;letter-spacing:-.015em;
  color:var(--ink);white-space:nowrap}
@media(max-width:520px){.lg-txt b{font-size:16px}.lg-sym{height:36px}.brand{gap:9px}}

/* Sous 480 px, l'en-tete tient quatre elements sur une seule ligne :
   marque, langue, theme et menu. Les paliers sont poses la ou la mesure
   les demande — un palier arrete a 380 laissait, a 390 px, le bouton de
   menu sortir du cadre. */
@media(max-width:480px){
  .head-in{padding-left:16px;padding-right:16px;gap:12px}
  .head-r{gap:8px}
  .lang a{padding:5px 7px;font-size:11px}
  .tgl,.burger{width:38px;height:38px}
  .lg-sym{height:32px}
  .lg-txt b{font-size:15px}
  .brand{gap:8px}
}
/* En dessous, le nom cede la place au symbole : le lien porte de toute
   facon « Assistant Call » en etiquette accessible. */
@media(max-width:345px){
  .lg-txt{display:none}
}

/* Le pied de page reprend le logo complet, en petit format */
.ft-logo{height:60px;width:auto}

/* Ecran de chargement : le logo respire au-dessus de l'onde */
.ch-logo{height:clamp(120px,17vw,180px);width:auto}

/* ── Partenaires ────────────────────────────────────────────────────
   Les logos defilent en continu. La serie est ecrite deux fois et le
   ruban translate d'exactement la moitie de sa largeur : au moment ou
   l'animation reboucle, le second exemplaire occupe la place du premier
   et la couture ne se voit pas. La duree depend du nombre de logos, pas
   d'une valeur choisie au juge.

   Les logos restent sur une plaque blanche dans les deux themes : trois
   d'entre eux sont dessines en encre foncee et disparaitraient sur un
   fond sombre. On ne recolore pas le logo d'un tiers. */
.parts-piste{position:relative;overflow:hidden;padding:6px 0 4px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.parts-ruban{display:flex;align-items:flex-start;gap:18px;width:max-content;
  list-style:none;padding:0;margin:0;animation:defile 34s linear infinite}
.parts-piste:hover .parts-ruban,
.parts-piste:focus-within .parts-ruban{animation-play-state:paused}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.part{flex:0 0 auto;width:212px;display:flex;flex-direction:column;
  align-items:center;gap:12px}
.part-lg{display:flex;align-items:center;justify-content:center;
  width:100%;height:118px;padding:18px 22px;border-radius:16px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh);
  transition:transform .28s ease,box-shadow .28s ease}
.part:hover .part-lg{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.part-lg img{max-width:100%;max-height:56px;width:auto;height:auto;object-fit:contain}
/* Un logo carre pose a la meme hauteur qu'un logo allonge parait deux
   fois plus gros : on lui laisse un peu plus de hauteur, pas davantage. */
.part-lg.carre img{max-height:79px}
.part b{font-family:var(--disp);font-size:15px;font-weight:600;color:var(--ink);
  text-align:center;line-height:1.3}
[data-theme="dark"] .part-lg{border-color:rgba(255,255,255,.14)}

@media(max-width:600px){
  .part{width:168px}
  .part-lg{height:100px;padding:14px 16px}
  .part-lg img{max-height:46px}
  .part-lg.carre img{max-height:66px}
  .parts-ruban{gap:14px;animation-duration:26s}
}
/* Une animation qui defile sans fin peut gener : on la retire pour qui
   l'a demande au systeme, et le ruban redevient une simple rangee. */
@media(prefers-reduced-motion:reduce){
  .parts-ruban{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .parts-piste{-webkit-mask-image:none;mask-image:none}
  .parts-ruban>.part[aria-hidden="true"]{display:none}
}

/* Un logo carre pose a la meme hauteur qu'un logo allonge parait deux
   fois plus gros : on lui laisse un peu plus de hauteur, pas davantage. */
.part-lg.carre img{max-height:79px}
.part b{font-family:var(--disp);font-size:15px;font-weight:600;color:var(--ink)}
[data-theme="dark"] .part-lg{border-color:rgba(255,255,255,.14)}

@media(max-width:900px){.parts{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:420px){.part-lg{height:100px;padding:14px 16px}
  .part-lg img{max-height:46px}.part-lg.carre img{max-height:66px}}