/* ============================================================
   ABYS AI · Le tunnel
   Pleine page, une question a la fois, rien autour.

   PROFONDEUR : trois plans, jamais melanges.
     0 · le fond vert nuit et ses faisceaux qui balayent
     1 · le voile, qui assombrit la bande centrale pour que
         les faisceaux restent DERRIERE le contenu
     2 · les boites, en relief, opaques, jamais traversees
   ============================================================ */
body.corps-tunnel{margin:0;background:#04120E;overflow:hidden}
body.corps-tunnel nav.nav,body.corps-tunnel footer.footer{display:none!important}

.tu{position:fixed;inset:0;display:flex;flex-direction:column;color:#fff;font-family:var(--font);
  background:linear-gradient(168deg,#06231B 0%,#08342A 46%,#063845 100%)}

/* ── Plan 0 : les faisceaux ───────────────────────────────── */
.tu-fond{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.tu-fond span{position:absolute;top:-40%;left:var(--l);width:150px;height:190%;
  transform-origin:top center;transform:rotate(var(--a))}
.tu-fond span::before{content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(167,243,208,.34),rgba(56,189,248,.13) 54%,transparent 82%);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 44%,#000 56%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 44%,#000 56%,transparent 100%);
  filter:blur(8px);mix-blend-mode:screen;transform-origin:top center;will-change:transform;
  animation:tu-ray var(--d) ease-in-out var(--delay,0s) infinite alternate}
@keyframes tu-ray{from{transform:rotate(calc(var(--s) * -1))}to{transform:rotate(var(--s))}}
/* Une poussiere lente, pour que le fond ne soit jamais fige */
.tu-fond i{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(167,243,208,.5);
  animation:tu-poussiere var(--pd) linear var(--pdelay) infinite}
@keyframes tu-poussiere{
  0%{transform:translateY(30px) scale(.6);opacity:0}
  12%{opacity:.75}
  88%{opacity:.5}
  100%{transform:translateY(-90px) scale(1);opacity:0}}

/* ── Plan 1 : le voile ────────────────────────────────────── */
.tu-voile{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(62% 52% at 50% 46%,rgba(3,18,14,.72),transparent 76%)}

/* ── Barre ────────────────────────────────────────────────── */
.tu-bar{position:relative;z-index:4;flex:0 0 auto;display:flex;align-items:center;gap:22px;padding:16px 28px}
.tu-marque{display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff;
  font-size:12.5px;font-weight:300;letter-spacing:.17em;flex:0 0 auto}
.tu-marque sup{font-size:8px;opacity:.55}
.tu-prog{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;max-width:520px;margin:0 auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset}
.tu-prog span{display:block;height:100%;width:0;border-radius:4px;position:relative;
  background:linear-gradient(90deg,#34D399,#38BDF8);transition:width .55s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 14px rgba(52,211,153,.75)}
.tu-sortie{font-size:12px;color:rgba(255,255,255,.4);text-decoration:none;flex:0 0 auto}
.tu-sortie:hover{color:rgba(255,255,255,.85)}

/* ── Scene ────────────────────────────────────────────────── */
.tu-scene{position:relative;z-index:2;flex:1;min-height:0;overflow-y:auto;display:flex;padding:24px}
.tu-carte{width:100%;max-width:780px;margin:auto;animation:tu-entree .55s cubic-bezier(.2,.75,.3,1) both}
.tu-carte.large{max-width:1040px}
@keyframes tu-entree{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* L'apparition en cascade : chaque element porte son rang dans --i */
.tu-mv{animation:tu-monte .42s cubic-bezier(.2,.75,.3,1) both;animation-delay:calc(var(--i,0) * 55ms + 80ms)}
@keyframes tu-monte{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.tu-num{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#6EE7B7;margin:0 0 14px;display:flex;align-items:center;gap:9px}
.tu-num i{width:18px;height:1px;background:linear-gradient(90deg,transparent,#6EE7B7);font-style:normal}
.tu-q{font-size:clamp(26px,4.3vw,42px);font-weight:300;letter-spacing:-.042em;line-height:1.12;margin:0 0 14px;
  text-shadow:0 2px 30px rgba(0,0,0,.5)}
.tu-q strong{font-weight:700;background:linear-gradient(96deg,#fff 20%,#A7F3D0 60%,#7DD3FC);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tu-aide{font-size:15px;line-height:1.72;color:rgba(255,255,255,.66);margin:0 0 30px;max-width:62ch}
.tu-aide b{color:#fff;font-weight:600}

/* ── La matiere des boites : relief, jamais traversees ────── */
.tu-boite{position:relative;border-radius:18px;
  background:linear-gradient(165deg,rgba(14,45,36,.92),rgba(6,26,22,.95));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 70px -46px rgba(0,0,0,.95),
             0 1px 0 rgba(255,255,255,.07) inset,
             0 -20px 40px -30px rgba(52,211,153,.25) inset}

/* Bordure qui tourne : un conique en rotation, masque en anneau de 1,5 px. */
.tu-tourne::after{content:'';position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--deb,0deg),transparent 0 58%,rgba(52,211,153,.9) 74%,rgba(56,189,248,.9) 84%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;animation:tu-anneau 4.5s linear infinite}
@keyframes tu-anneau{to{--deb:360deg}}
@supports not (background:conic-gradient(from 0deg,red,blue)){.tu-tourne::after{display:none}}
/* Sans @property, --deb ne s'anime pas : on fait tourner l'anneau lui-meme. */
@supports not (animation-timeline:auto){
  .tu-tourne::after{animation:tu-anneau2 4.5s linear infinite}
  @keyframes tu-anneau2{to{transform:rotate(360deg)}}
}

/* ── Champs ───────────────────────────────────────────────── */
.tu-saisie{width:100%;padding:18px 22px;border-radius:15px;border:1px solid rgba(255,255,255,.15);
  background:rgba(4,20,16,.6);color:#fff;font-family:var(--font);font-size:19px;outline:none;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
  transition:border-color .2s,background .2s,box-shadow .2s}
.tu-saisie::placeholder{color:rgba(255,255,255,.26)}
.tu-saisie:focus{border-color:#34D399;background:rgba(6,30,24,.75);
  box-shadow:0 0 0 4px rgba(52,211,153,.14),0 1px 0 rgba(255,255,255,.06) inset}
textarea.tu-saisie{font-size:16px;line-height:1.65;min-height:110px;resize:vertical}
.tu-duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:620px){.tu-duo{grid-template-columns:1fr}}
.tu-lab{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.04em;
  color:rgba(255,255,255,.55);margin:0 0 7px}
.tu-eti{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:3px 8px;
  border-radius:999px;background:rgba(52,211,153,.16);color:#6EE7B7}
.tu-eti.vous{background:rgba(255,255,255,.09);color:rgba(255,255,255,.6)}
.tu-unite{position:relative}
.tu-unite s{position:absolute;right:20px;top:50%;transform:translateY(-50%);text-decoration:none;
  font-size:16px;color:rgba(255,255,255,.35)}

/* ── Options en liste ─────────────────────────────────────── */
.tu-choix{display:grid;gap:12px}
.tu-o{position:relative;display:flex;align-items:center;gap:16px;padding:18px 22px;border-radius:16px;cursor:pointer;
  border:1px solid rgba(255,255,255,.11);text-align:left;font-family:var(--font);color:#fff;overflow:hidden;
  background:linear-gradient(165deg,rgba(14,45,36,.9),rgba(6,26,22,.94));
  box-shadow:0 18px 40px -34px rgba(0,0,0,.95),0 1px 0 rgba(255,255,255,.06) inset;
  transition:transform .2s cubic-bezier(.4,0,.2,1),border-color .2s,box-shadow .2s}
.tu-o::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px;
  background:linear-gradient(180deg,#34D399,#38BDF8);opacity:0;transition:opacity .2s}
.tu-o:hover{transform:translateX(5px);border-color:rgba(110,231,183,.5);
  box-shadow:0 24px 50px -30px rgba(0,0,0,.95),0 0 34px -14px rgba(52,211,153,.55)}
.tu-o:hover::before,.tu-o.on::before{opacity:1}
.tu-o.on{border-color:rgba(52,211,153,.75)}
.tu-o i{position:relative;flex:0 0 22px;height:22px;border-radius:50%;border:1.7px solid rgba(255,255,255,.34);
  display:grid;place-items:center;font-style:normal;font-size:11px;color:#04241B;
  transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}
.tu-o:hover i{border-color:rgba(110,231,183,.8);transform:scale(1.08)}
.tu-o.on i{box-shadow:0 0 0 4px rgba(52,211,153,.18);transform:scale(1.06)}
.tu-o.on i::after{content:'';position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(52,211,153,.6);
  animation:tu-onde 1.6s ease-out infinite}
@keyframes tu-onde{0%{transform:scale(.7);opacity:.8}100%{transform:scale(1.5);opacity:0}}
.tu-o.on i{background:#34D399;border-color:#34D399}
.tu-o b{display:block;font-size:16.5px;font-weight:600;margin-bottom:2px}
.tu-o span{display:block;font-size:13.2px;line-height:1.55;color:rgba(255,255,255,.82)}
.tu-o .tu-pic{margin-left:auto;flex:0 0 auto;color:#6EE7B7;opacity:.9}

/* ── Options en cartes ────────────────────────────────────── */
.tu-cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:820px){.tu-cartes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.tu-cartes{grid-template-columns:1fr}}
.tu-c{position:relative;padding:20px 19px;border-radius:17px;cursor:pointer;text-align:left;
  font-family:var(--font);color:#fff;overflow:hidden;border:1px solid rgba(255,255,255,.11);
  background:linear-gradient(165deg,rgba(14,45,36,.9),rgba(6,26,22,.94));
  box-shadow:0 18px 40px -34px rgba(0,0,0,.95),0 1px 0 rgba(255,255,255,.06) inset;
  transition:transform .22s cubic-bezier(.4,0,.2,1),border-color .22s,box-shadow .22s}
.tu-c:hover{transform:translateY(-5px);border-color:rgba(110,231,183,.5);
  box-shadow:0 30px 56px -30px rgba(0,0,0,.95),0 0 38px -16px rgba(52,211,153,.6)}
.tu-c.on{border-color:rgba(52,211,153,.8)}
.tu-c svg{color:#6EE7B7;margin-bottom:12px;display:block}
.tu-c.on svg{animation:tu-pouls 1.6s ease-in-out infinite}
@keyframes tu-pouls{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.tu-c b{display:block;font-size:15.5px;font-weight:600;margin-bottom:4px}
.tu-c span{display:block;font-size:12.8px;line-height:1.55;color:rgba(255,255,255,.8)}
.tu-c .tu-coche{position:absolute;top:14px;right:14px;width:20px;height:20px;border-radius:50%;
  background:#34D399;color:#04241B;display:grid;place-items:center;font-size:11px;font-weight:800;
  opacity:0;transform:scale(.4);transition:all .22s cubic-bezier(.2,1.4,.4,1)}
.tu-c.on .tu-coche{opacity:1;transform:none}

/* Fourchettes : la valeur en gros, la mention en petit */
.tu-c.four b{font-size:18px;letter-spacing:-.025em;line-height:1.25}
.tu-c.four em{display:block;font-style:normal;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.36);margin-bottom:9px}

/* ── Pictogrammes animés ──────────────────────────────────── */
.tu-goutte circle{animation:tu-tombe 2.4s ease-in-out infinite}
.tu-goutte circle:nth-child(2){animation-delay:.8s}
.tu-goutte circle:nth-child(3){animation-delay:1.6s}
@keyframes tu-tombe{0%{transform:translateY(-6px);opacity:0}30%{opacity:1}100%{transform:translateY(10px);opacity:0}}
.tu-barres rect{transform-origin:bottom;animation:tu-pousse 2.2s ease-in-out infinite}
.tu-barres rect:nth-child(2){animation-delay:.25s}
.tu-barres rect:nth-child(3){animation-delay:.5s}
.tu-barres rect:nth-child(4){animation-delay:.75s}
@keyframes tu-pousse{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.tu-flux path{stroke-dasharray:5 7;animation:tu-file 1.5s linear infinite}
@keyframes tu-file{to{stroke-dashoffset:-24}}

/* ── Boutons ──────────────────────────────────────────────── */
.tu-actions{display:flex;align-items:center;gap:14px;margin-top:28px;flex-wrap:wrap}
.tu-b{position:relative;display:inline-flex;align-items:center;gap:10px;padding:16px 32px;border-radius:14px;
  border:none;cursor:pointer;font-family:var(--font);font-size:15.5px;font-weight:700;text-decoration:none;
  background:linear-gradient(100deg,#065F46,#0B8F6B 48%,#0E7490);color:#fff;overflow:hidden;
  box-shadow:0 18px 38px -18px rgba(52,211,153,.95);transition:transform .18s,box-shadow .18s,opacity .18s}
.tu-b::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.3) 48%,transparent 66%);
  transform:translateX(-130%);animation:tu-lustre 3.6s ease-in-out infinite}
@keyframes tu-lustre{0%,62%{transform:translateX(-130%)}86%,100%{transform:translateX(130%)}}
.tu-b:hover{transform:translateY(-3px);box-shadow:0 26px 52px -18px rgba(52,211,153,1)}
.tu-b:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}
.tu-b:disabled::after{display:none}
.tu-b.fant{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);color:#fff;box-shadow:none}
.tu-b.fant::after{display:none}
.tu-b.fant:hover{background:rgba(255,255,255,.1);box-shadow:none}
.tu-b.geant{padding:21px 42px;font-size:18px;border-radius:17px}
.tu-lien{background:none;border:none;cursor:pointer;font-family:var(--font);font-size:13px;
  color:rgba(255,255,255,.72);text-decoration:underline;padding:6px}
.tu-lien:hover{color:#fff}
.tu-err{margin-top:14px;font-size:13.5px;color:#FCA5A5;line-height:1.6}

/* ── Lecture du site ──────────────────────────────────────── */
.tu-lect{display:flex;flex-direction:column;gap:14px;margin:8px 0 4px}
.tu-pas{display:flex;align-items:center;gap:14px;font-size:15.5px;color:rgba(255,255,255,.4);
  opacity:.32;transition:opacity .45s,color .45s}
.tu-pas.on{opacity:1;color:#fff}
.tu-pas.fait{opacity:.72;color:rgba(255,255,255,.6)}
.tu-pas i{flex:0 0 24px;height:24px;border-radius:50%;border:1.8px solid rgba(255,255,255,.2);
  display:grid;place-items:center;font-style:normal;font-size:11px;color:#04241B}
.tu-pas.on i{border-color:#34D399;border-top-color:transparent;animation:tu-tourne .8s linear infinite}
.tu-pas.fait i{border-color:#34D399;background:#34D399;animation:none}
@keyframes tu-tourne{to{transform:rotate(360deg)}}

/* ── Fiche d'identite ─────────────────────────────────────── */
.tu-fiche{border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.11);margin-bottom:20px;
  background:linear-gradient(165deg,rgba(14,45,36,.93),rgba(6,26,22,.96));
  box-shadow:0 34px 76px -46px rgba(0,0,0,.95),0 1px 0 rgba(255,255,255,.07) inset}
.tu-fh{display:flex;align-items:center;gap:19px;padding:23px 25px;border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(120deg,rgba(52,211,153,.11),transparent 62%)}
.tu-logo{width:66px;height:66px;flex:0 0 66px;border-radius:15px;background:#fff;display:grid;place-items:center;
  overflow:hidden;padding:9px;box-shadow:0 12px 30px -14px rgba(0,0,0,.9);
  animation:tu-pose .65s cubic-bezier(.2,1.3,.4,1) both}
@keyframes tu-pose{from{opacity:0;transform:scale(.72) rotate(-8deg)}to{opacity:1;transform:none}}
.tu-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.tu-logo b{color:#04241B;font-size:25px;font-weight:800}
.tu-fh h3{margin:0 0 4px;font-size:22px;font-weight:600;letter-spacing:-.02em}
.tu-fh p{margin:0;font-size:13.5px;color:rgba(255,255,255,.5)}
.tu-fb{padding:20px 25px 22px}
.tu-ligne{display:flex;gap:16px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:14.5px;line-height:1.62}
.tu-ligne:last-child{border-bottom:none}
.tu-ligne em{flex:0 0 155px;font-style:normal;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;
  color:rgba(255,255,255,.33);padding-top:3px}
.tu-ligne span{flex:1;color:rgba(255,255,255,.88)}
.tu-puces{margin:0;padding-left:17px}
.tu-puces li{font-size:14px;line-height:1.7;color:rgba(255,255,255,.82);margin-bottom:5px}
.tu-note{border-radius:16px;padding:18px 20px;display:flex;align-items:center;gap:20px;margin-bottom:18px;
  background:linear-gradient(140deg,rgba(52,211,153,.13),rgba(56,189,248,.07));
  border:1px solid rgba(110,231,183,.24)}
.tu-note b{font-size:36px;font-weight:300;letter-spacing:-.035em;color:#6EE7B7;line-height:1;flex:0 0 auto}
.tu-note span{font-size:13px;line-height:1.62;color:rgba(255,255,255,.66)}

/* ── Synthese ─────────────────────────────────────────────── */
.tu-res{position:relative;border-radius:22px;padding:32px 34px;margin-bottom:36px;overflow:hidden;
  background:linear-gradient(150deg,rgba(16,60,48,.94),rgba(6,30,34,.96));
  border:1px solid rgba(110,231,183,.24);
  box-shadow:0 38px 84px -48px rgba(0,0,0,.95),0 1px 0 rgba(255,255,255,.08) inset}
.tu-res::before{content:'';position:absolute;right:-140px;top:-160px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(52,211,153,.2),transparent 66%);pointer-events:none;
  animation:tu-souffle 11s ease-in-out infinite}
@keyframes tu-souffle{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.2);opacity:1}}
.tu-res>*{position:relative}
.tu-res h2{margin:0 0 14px;font-size:18px;font-weight:500;letter-spacing:.01em;color:rgba(255,255,255,.7)}
.tu-res p{margin:0;font-size:15.5px;line-height:1.8;color:rgba(255,255,255,.78)}
.tu-res p strong{color:#fff;font-weight:600}

/* Le chiffre qui compte : gros, anime, impossible a manquer */
.tu-gros{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:6px 0 16px}
.tu-gros b{font-size:clamp(44px,7vw,74px);font-weight:200;letter-spacing:-.05em;line-height:1.12;
  display:inline-block;padding:.03em .08em .03em 0;isolation:isolate;-webkit-backface-visibility:hidden;transform:translateZ(0);
  background:linear-gradient(96deg,#fff,#A7F3D0 55%,#7DD3FC);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;font-variant-numeric:tabular-nums}
.tu-gros em{font-style:normal;font-size:15px;color:rgba(255,255,255,.6);line-height:1.5;max-width:24ch}

.tu-ech{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
@media (max-width:620px){.tu-ech{grid-template-columns:1fr}}
.tu-e{position:relative;border-radius:16px;padding:18px 20px;overflow:hidden;
  background:linear-gradient(165deg,rgba(4,20,16,.55),rgba(4,16,14,.4));
  border:1px solid rgba(255,255,255,.09);box-shadow:0 1px 0 rgba(255,255,255,.05) inset}
/* LE TITRE DU PALIER SE LIT. Il etait a 11px, en gris a 40 % d'opacite : sur un
   fond sombre, « PREMIER CLIENT » disparaissait sous le chiffre qu'il annonce.
   Un intertitre qu'on ne lit pas ne sert a rien. */
.tu-e em{display:block;font-style:normal;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:9px}
.tu-e b{display:block;font-size:26px;font-weight:400;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.tu-e b.plus{color:#6EE7B7}.tu-e b.moins{color:rgba(255,255,255,.45)}
.tu-e span{display:block;font-size:12px;color:rgba(255,255,255,.58);margin-top:6px}
.tu-e .tu-jauge{position:absolute;left:0;bottom:0;height:3px;width:0;
  background:linear-gradient(90deg,#34D399,#38BDF8);transition:width 1.1s cubic-bezier(.2,.8,.3,1) .3s}

/* ── La lettre ────────────────────────────────────────────── */
.tu-mails{display:grid;gap:18px;margin-bottom:22px}
.tu-mails.deux{grid-template-columns:1fr 1fr}
@media(max-width:820px){.tu-mails.deux{grid-template-columns:1fr}}
.tu-mails .tu-mail{margin-bottom:0}
.tu-mails.deux .tu-mc{font-size:13.6px}
.tu-mail{border-radius:20px;overflow:hidden;background:#fff;color:#0A1F1A;margin-bottom:22px;
  box-shadow:0 40px 90px -46px rgba(0,0,0,.9)}
/* L'ENTETE DE LA LETTRE. Deux lignes d'enveloppe, expediteur et destinataire,
   puis l'objet. Sans le destinataire, l'apercu ressemblait a un brouillon dans
   la boite du dirigeant plutot qu'a un message qui part. */
.tu-mt{padding:16px 22px;background:#F6FBF9;border-bottom:1px solid #E9F2EE;font-size:12.5px;color:#7C8F8A}
.tu-mt .tu-de,.tu-mt .tu-a{display:block;line-height:1.65}
.tu-mt .tu-de{color:#0A1F1A;font-weight:600}
.tu-mt b{display:block;color:#0A1F1A;font-size:15.5px;font-weight:700;margin-top:9px;
  padding-top:9px;border-top:1px solid #E9F2EE}
.tu-mc{padding:24px 26px;font-size:14.8px;line-height:1.88;white-space:pre-wrap;color:#243b35}
.tu-attente{display:flex;align-items:center;gap:13px;padding:30px 26px;color:#5B6B66;font-size:14.5px}
.tu-pts{display:flex;gap:4px}
.tu-pt{width:7px;height:7px;border-radius:50%;background:#10B981;animation:tu-bat 1.2s infinite}
.tu-pt:nth-child(2){animation-delay:.18s}.tu-pt:nth-child(3){animation-delay:.36s}
@keyframes tu-bat{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-7px);opacity:1}}

/* ── Le rappel a l'action, impossible a rater ─────────────── */
.tu-fin{position:relative;border-radius:24px;padding:44px 34px 40px;overflow:hidden;text-align:center;
  isolation:isolate;border:1px solid transparent;background:transparent;margin-top:10px}
.tu-fin .tu-halo-a{position:absolute;z-index:-2;top:50%;left:50%;width:230%;aspect-ratio:1;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0deg,#34D399 45deg,#38BDF8 95deg,transparent 160deg,transparent 360deg);
  animation:tu-halo 6s linear infinite}
.tu-fin .tu-halo-b{position:absolute;z-index:-1;inset:2px;border-radius:22px;pointer-events:none;
  background:linear-gradient(140deg,rgba(9,58,46,.98),rgba(6,32,40,.99))}
.tu-fin::before{content:'';position:absolute;z-index:-1;left:50%;top:-120px;width:520px;height:340px;transform:translateX(-50%);
  border-radius:50%;background:radial-gradient(circle,rgba(52,211,153,.32),transparent 66%);pointer-events:none;
  animation:tu-souffle 6s ease-in-out infinite}
.tu-fin-eti{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#04241B;background:linear-gradient(90deg,#6EE7B7,#7DD3FC);padding:6px 14px;border-radius:999px;margin-bottom:18px}
.tu-fin-milo{--past:52,211,153;width:96px;height:96px;margin:0 auto 16px;border-radius:50%;overflow:hidden;
  border:3px solid rgba(255,255,255,.9);box-shadow:0 18px 40px -14px rgba(0,0,0,.9),0 0 0 6px rgba(52,211,153,.18);
  animation:tu-past-pulse 3.2s ease-in-out infinite}
.tu-fin-milo img{width:100%;height:100%;object-fit:cover;display:block}
.tu-fin .tu-b.geant{font-size:17px;padding:18px 36px}
.tu-fin h2{margin:0 0 12px;font-size:clamp(26px,3.8vw,38px);font-weight:300;letter-spacing:-.035em;color:#fff}
.tu-fin h2 strong{font-weight:700}
.tu-fin p{margin:0 auto 28px;max-width:56ch;font-size:15.5px;line-height:1.75;color:rgba(255,255,255,.85)}
.tu-fin .tu-actions{justify-content:center;margin-top:0}
.tu-souris{display:block;margin:18px auto 0;color:rgba(255,255,255,.35);animation:tu-descend 2s ease-in-out infinite}
@keyframes tu-descend{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(6px);opacity:.9}}

/* Un rappel colle en bas tant que le bouton du bas n'est pas visible */
/* Un bouton qui flotte, pas un voile qui bave sur le texte : le degrade
   couvrait a moitie le titre suivant et salissait la page. */
/* LE BOUTON FLOTTANT SE RANGE A DROITE. Centre, il se posait en plein milieu du
   texte : sur l'ecran des resultats il barrait la phrase « par an de temps passe
   a chercher et a relancer ». Un rappel a l'action ne doit jamais couvrir ce
   qu'il est cense faire lire. A droite, et la scene garde de la marge en bas
   pour qu'aucune ligne ne finisse dessous. */
/* Le bouton flottant a ete retire : il passait par-dessus le texte. */
.tu-scene{padding-bottom:40px}

/* ── Ce que Milo fait, en clair ────────────────────────────
   Le tunnel chiffrait un gain sans jamais dire le travail derriere. Le visiteur
   voyait « 22 812 € » et devait deviner ce qu'on lui vend. */
.tu-fait{border-radius:20px;padding:26px 28px;margin-top:22px;
  background:linear-gradient(165deg,rgba(4,20,16,.55),rgba(4,16,14,.4));
  border:1px solid rgba(255,255,255,.09)}
.tu-fait h3{margin:0 0 6px;font-size:19px;font-weight:300;letter-spacing:-.03em;color:#fff}
.tu-fait h3 strong{font-weight:700}
.tu-fait > p{margin:0 0 18px;font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.6)}
.tu-fait ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.tu-fait li{position:relative;padding-left:26px;font-size:13.8px;line-height:1.62;color:rgba(255,255,255,.82)}
.tu-fait li::before{content:'';position:absolute;left:4px;top:8px;width:7px;height:7px;border-radius:50%;
  background:linear-gradient(135deg,#34D399,#38BDF8)}
.tu-fait li b{color:#fff;font-weight:650}

/* ── La tuile lumineuse ────────────────────────────────────
   Le referencement IA n'est pas une note d'aide, c'est un choix : meme forme que
   les autres tuiles, et une bordure qui tourne pour qu'on la voie en premier.
   Un degrade conique tourne derriere la carte, le contenu est pose dessus sur
   un fond opaque : seul le liseré de deux pixels reste visible. Aucun objet
   dessine, juste une lumiere. */
.tu-c.lumiere{position:relative;isolation:isolate;overflow:hidden;border-color:transparent;
  background:#08251E}
/* Un grand carre en degrade conique tourne derriere la tuile ; le debordement est
   coupe par la tuile elle-meme, et un fond opaque pose au-dessus ne laisse voir
   qu'un lisere de 2 px qui tourne. */
.tu-c.lumiere::before{content:'';position:absolute;z-index:-2;top:50%;left:50%;
  width:220%;aspect-ratio:1;
  background:conic-gradient(from 0deg,transparent 0deg,#34D399 55deg,#38BDF8 110deg,
             transparent 185deg,transparent 360deg);
  animation:tu-halo 4.2s linear infinite}
.tu-c.lumiere::after{content:'';position:absolute;z-index:-1;inset:2px;border-radius:15px;
  background:linear-gradient(165deg,#0A2C24,#061B16)}
.tu-c.lumiere:hover::before{animation-duration:2.6s}
.tu-c.lumiere.on::after{background:linear-gradient(165deg,#0F3A2E,#061B16)}
@keyframes tu-halo{
  from{transform:translate(-50%,-50%) rotate(0turn)}
  to{transform:translate(-50%,-50%) rotate(1turn)}}
@media(prefers-reduced-motion:reduce){
  .tu-c.lumiere::before{animation:none;transform:translate(-50%,-50%);
    background:linear-gradient(135deg,#34D399,#38BDF8)}
}

/* ── La scene de Milo ──────────────────────────────────────
   Quatre temps, quatre photos, une phrase chacun. Le bloc qui donne envie ;
   le detail se lit ailleurs. La photo est grande, le texte court, et la
   transition est un fondu double, pas un glissement : rien ne bouge sous l'oeil.
   REGLE DE MAISON : de vraies photos, jamais de dessin vectoriel. */
.tu-milo{position:relative;border-radius:24px;padding:30px 32px 26px;margin:52px 0 56px;overflow:hidden;
  background:linear-gradient(160deg,rgba(9,42,34,.92),rgba(4,20,16,.86));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95),0 1px 0 rgba(255,255,255,.06) inset}
.tu-milo::before{content:'';position:absolute;inset:-40% -10% auto -10%;height:70%;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 0%,rgba(52,211,153,.16),transparent 70%)}
.tu-milo-t{position:relative;margin-bottom:22px}
.tu-milo-t span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#6EE7B7;margin-bottom:7px}
.tu-milo-t h2{margin:0;font-size:clamp(22px,3.1vw,30px);font-weight:300;letter-spacing:-.035em;color:#fff}
.tu-milo-t h2 strong{font-weight:700}

.tu-milo-m{margin:10px 0 0;display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.03em;
  color:#04241B;background:linear-gradient(96deg,#6EE7B7,#7DD3FC);padding:5px 12px;border-radius:999px}
.tu-milo-s{position:relative;min-height:300px}

.tu-mo{position:absolute;inset:0;margin:0;display:grid;grid-template-columns:290px 1fr;gap:34px;
  align-items:center;opacity:0;visibility:hidden;transform:translateY(10px) scale(.985);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1),visibility .7s}
.tu-mo.on{opacity:1;visibility:visible;transform:none}
.tu-mo img{width:290px;height:290px;object-fit:cover;border-radius:22px;display:block;
  box-shadow:0 34px 74px -26px rgba(0,0,0,.98);border:1px solid rgba(255,255,255,.14)}
.tu-mo figcaption em{display:block;font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#6EE7B7;margin-bottom:10px}
.tu-mo figcaption b{display:block;font-size:clamp(28px,4vw,40px);font-weight:300;letter-spacing:-.04em;
  color:#fff;margin-bottom:12px}
.tu-mo figcaption span{display:block;font-size:16.5px;line-height:1.75;color:#fff;opacity:.86;max-width:46ch}
@media(max-width:720px){
  .tu-milo{padding:24px 20px 20px}
  .tu-milo-s{min-height:400px}
  .tu-mo{grid-template-columns:1fr;gap:16px;justify-items:start}
  .tu-mo img{width:180px;height:180px}
}

/* La barre du bas : une fleche, les traits, une fleche. */
.tu-milo-b{position:relative;display:flex;align-items:center;gap:14px;margin-top:26px}
.tu-fl{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;cursor:pointer;
  color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  transition:background .22s,border-color .22s,transform .22s}
.tu-fl:hover{background:rgba(52,211,153,.2);border-color:rgba(110,231,183,.6);transform:scale(1.07)}
.tu-milo-p{position:relative;display:flex;gap:8px;flex:1;justify-content:center}
.tu-mp{width:44px;height:4px;padding:0;border:none;border-radius:3px;cursor:pointer;
  background:rgba(255,255,255,.16);transition:background .3s,width .3s}
.tu-mp:hover{background:rgba(255,255,255,.32)}
.tu-mp.on{width:72px;background:linear-gradient(90deg,#34D399,#38BDF8)}
.tu-mp i{display:none}

/* ── La fenetre des formules ───────────────────────────────
   Le lien partait sur /tarifs.php et le visiteur quittait le tunnel au dernier
   ecran, juste avant d'ouvrir son espace. On ne le sort plus de la piece. */
/* CENTREE, QUOI QU'IL ARRIVE. Le style.css du site remet margin:0 sur tout, et
   c'est ce margin:auto que le navigateur utilise pour centrer un <dialog> :
   la fenetre se retrouvait collee en haut a gauche. On le dit explicitement,
   et elle arrive en zoom. */
dialog.tu-pop{position:fixed;inset:0;margin:auto;border:none;padding:0;max-width:820px;width:calc(100% - 32px);
  max-height:calc(100vh - 32px);overflow:auto;border-radius:24px;
  background:#08251E;color:#fff;box-shadow:0 50px 120px -30px rgba(0,0,0,.95)}
dialog.tu-pop[open]{animation:tu-zoom .38s cubic-bezier(.2,.9,.3,1.15) both}
@keyframes tu-zoom{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
dialog.tu-pop[open]::backdrop{animation:tu-voile .3s ease both}
@keyframes tu-voile{from{opacity:0}to{opacity:1}}
dialog.tu-pop::backdrop{background:rgba(2,14,11,.72);backdrop-filter:blur(3px)}
.tu-pop .in{padding:30px 32px 26px}
.tu-pop h3{margin:0 0 6px;font-size:23px;font-weight:300;letter-spacing:-.035em}
.tu-pop h3 strong{font-weight:700}
.tu-pop .sous{margin:0 0 22px;font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.62)}
.tu-pop .grille{display:grid;gap:18px;grid-template-columns:1fr 1fr;margin-top:28px}
@media(max-width:640px){.tu-pop .grille{grid-template-columns:1fr}}
/* Les cartes de la page tarifs : Milo en or, Milo + en vert, le reflet qui
   balaie, la pastille qui pulse. */
.tu-pop .of{position:relative;border-radius:18px;padding:26px 22px 22px;color:#fff;overflow:visible;
  transition:transform .22s ease,box-shadow .22s ease}
.tu-pop .of:hover{transform:translateY(-4px);box-shadow:0 26px 54px -24px rgba(0,0,0,.9)}
.tu-pop .of.or{background:linear-gradient(150deg,#1C1503 0%,#3A2D0A 100%);border:2px solid #D4AF37}
.tu-pop .of.mieux{background:linear-gradient(150deg,#0A1F1A 0%,#064E3B 100%);border:2px solid #10B981}
.tu-pop .of::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.09) 50%,transparent 58%);
  background-size:260% 100%;background-position:140% 0;animation:tu-balaye 6.5s ease-in-out infinite}
.tu-pop .of.mieux::after{animation-delay:3.2s}
@keyframes tu-balaye{0%,14%{background-position:140% 0}60%,100%{background-position:-120% 0}}
.tu-pop .of em{display:block;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:4px}
.tu-pop .of .nomof{display:block;font-size:14px;font-weight:500;color:rgba(255,255,255,.75);margin-bottom:10px}
.tu-pop .of .prix{font-size:38px;font-weight:300;letter-spacing:-.04em;color:#6EE7B7}
.tu-pop .of.or .prix{color:#F5C542}
.tu-pop .of .prix span{font-size:13px;color:rgba(255,255,255,.5);margin-left:6px;letter-spacing:0}
.tu-pop .of ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.tu-pop .of li{font-size:13.4px;line-height:1.55;color:rgba(255,255,255,.82);padding-left:20px;position:relative}
.tu-pop .of li::before{content:'';position:absolute;left:2px;top:7px;width:6px;height:6px;border-radius:50%;background:#6EE7B7}
.tu-pop .of.or li::before{background:#F5C542}
.tu-pop .reco{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);z-index:3;
  background:linear-gradient(90deg,#10B981,#6EE7B7);color:#03251B;font-size:10px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;padding:5px 14px;border-radius:20px;animation:tu-reco 2.6s ease-in-out infinite}
@keyframes tu-reco{0%,100%{box-shadow:0 6px 18px -6px rgba(16,185,129,.75)}50%{box-shadow:0 6px 26px -4px rgba(110,231,183,.95)}}
/* Le medaillon : une vraie photo de Milo, centree en tete de chaque offre,
   dans un cercle a la couleur de la carte. */
.tu-pop .of{padding-top:34px}
.tu-past{--past:52,211,153;display:block;position:relative;width:82px;height:82px;margin:0 auto 16px;border-radius:50%;
  overflow:hidden;z-index:3;border:3px solid rgb(var(--past));
  box-shadow:0 12px 28px -10px rgba(0,0,0,.8),0 0 0 5px rgba(var(--past),.18);
  animation:tu-past-pulse 3.2s ease-in-out infinite}
.tu-pop .of.or .tu-past{--past:245,197,66}
.tu-past img{width:100%;height:100%;object-fit:cover;display:block}
.tu-past.petit{width:48px;height:48px;flex:0 0 48px;margin:0;border-width:2px;animation:none}
.tu-pop .of em,.tu-pop .of .nomof{text-align:center}
@keyframes tu-past-pulse{0%,100%{box-shadow:0 12px 28px -10px rgba(0,0,0,.8),0 0 0 5px rgba(var(--past),.18)}
  50%{box-shadow:0 12px 28px -10px rgba(0,0,0,.8),0 0 0 12px rgba(var(--past),.05)}}
@media(prefers-reduced-motion:reduce){.tu-pop .of::after,.tu-pop .reco,.tu-past{animation:none}dialog.tu-pop[open]{animation:none}}
.tu-pop .pied2{display:flex;gap:10px;justify-content:flex-end;align-items:center;margin-top:22px;flex-wrap:wrap}
.tu-pop .fermer{background:none;border:none;color:rgba(255,255,255,.6);font-family:inherit;font-size:13.5px;
  cursor:pointer;padding:10px 14px}
.tu-pop .fermer:hover{color:#fff}

/* La legende du grand chiffre, sous le titre et non plus a cote. */
.tu-res-sous{margin:0 0 14px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.62)}

/* ── Le bilan : le raisonnement a gauche, le resultat a droite ──────────
   Le chiffre etait noye au milieu d'un paragraphe gris. A gauche trois lignes
   en blanc, les montants en relief ; a droite le seul nombre qui compte, avec
   sa legende courte dessous. */
.tu-bil{display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center}
@media(max-width:760px){.tu-bil{grid-template-columns:1fr;gap:22px}}
.tu-bil-g h2{margin:0 0 14px;font-size:19px;font-weight:500;color:rgba(255,255,255,.72)}
.tu-bil-g p{margin:0;font-size:17px;line-height:2;color:#fff;font-weight:300}
.tu-bil-g em{font-style:normal;font-weight:600;
  background:linear-gradient(96deg,#fff,#A7F3D0 50%,#7DD3FC);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.tu-bil-d{text-align:right;min-width:min(46vw,300px)}
@media(max-width:760px){.tu-bil-d{text-align:left}}
.tu-bil-d b{display:inline-block;font-size:clamp(46px,7.4vw,78px);font-weight:200;letter-spacing:-.05em;line-height:1.12;
  padding:.03em .08em .03em 0;isolation:isolate;-webkit-backface-visibility:hidden;transform:translateZ(0);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:linear-gradient(96deg,#fff,#A7F3D0 55%,#7DD3FC);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;font-variant-numeric:tabular-nums}
.tu-bil-d span{display:block;margin-top:12px;font-size:14px;line-height:1.5;color:#fff;opacity:.9}

/* ── La lumiere autour de la boite de rentabilite ───────────────────────
   Meme mecanique que la tuile lumineuse : un grand carre en degrade conique
   tourne derriere, la boite le coupe, et un fond pose a 2 px du bord ne
   laisse voir qu'un lisere qui court. Les deux elements sont reels (des <i>)
   parce que ::before et ::after de .tu-res servent deja. */
.tu-res.halo{isolation:isolate;border-color:transparent;background:transparent}
.tu-res.halo .tu-halo-a{position:absolute;z-index:-2;top:50%;left:50%;width:230%;aspect-ratio:1;
  background:conic-gradient(from 0deg,transparent 0deg,#34D399 45deg,#38BDF8 95deg,transparent 160deg,
             transparent 360deg);
  animation:tu-halo 7s linear infinite;pointer-events:none}
.tu-res.halo .tu-halo-b{position:absolute;z-index:-1;inset:2px;border-radius:20px;pointer-events:none;
  background:linear-gradient(150deg,rgba(16,60,48,.985),rgba(6,30,34,.99))}
@media(prefers-reduced-motion:reduce){
  .tu-res.halo .tu-halo-a{animation:none;transform:translate(-50%,-50%);background:linear-gradient(135deg,#34D399,#38BDF8)}
}

/* La mention sous la lettre : petite, en italique, elle ne barre plus la route. */
.tu-souslettre{margin:-4px 0 56px;font-size:13.4px;line-height:1.7;font-style:italic;
  color:rgba(255,255,255,.6)}

/* ── L'ecran de l'option : ce que repond une IA ─────────────────────────
   On ecrit la question, la reponse tombe, et la place du visiteur arrive en
   dernier. Aucun dessin : du texte, une vraie scene de conversation. */
/* ── L'ecran de l'option : une fenetre de conversation avec une IA ───
   Reconnaissable au premier coup d'oeil : un bandeau, la question du visiteur
   dans sa bulle a droite, la reponse de l'assistant a gauche. Aucun dessin. */
.tu-chat{border-radius:20px;margin-bottom:20px;overflow:hidden;
  background:linear-gradient(165deg,#0B1F1D,#071614);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 34px 80px -46px rgba(0,0,0,.95)}
.tu-chat-h{display:flex;align-items:center;gap:10px;padding:13px 18px;font-size:13px;
  background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08)}
.tu-chat-h i{width:9px;height:9px;border-radius:50%;background:#34D399;box-shadow:0 0 0 3px rgba(52,211,153,.2)}
.tu-chat-h b{color:#fff;font-weight:600}
.tu-chat-h span{margin-left:auto;color:rgba(255,255,255,.4);font-size:12px}
.tu-chat-f{padding:22px 20px 24px;display:flex;flex-direction:column;gap:16px}
.tu-chat-m{display:flex;align-items:flex-end;gap:10px;max-width:86%}
.tu-chat-m.moi{align-self:flex-end;flex-direction:row-reverse}
.tu-chat-m .bulle{padding:12px 16px;border-radius:18px;font-size:15px;line-height:1.55;color:#fff}
.tu-chat-m.moi .bulle{background:linear-gradient(135deg,#10B981,#0EA5E9);border-bottom-right-radius:5px}
.tu-chat-m.ia{opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.tu-chat-m.ia.on{opacity:1;transform:none}
.tu-chat-m.ia .bulle{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);border-bottom-left-radius:5px;min-width:180px}
.tu-chat-m.ia em{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font-size:11px;font-weight:800;color:#04241B;background:linear-gradient(135deg,#6EE7B7,#7DD3FC)}
.tu-chat-att{display:flex;gap:5px;padding:4px 2px}
.tu-chat-att i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);animation:tu-att 1.1s ease-in-out infinite}
.tu-chat-att i:nth-child(2){animation-delay:.18s}.tu-chat-att i:nth-child(3){animation-delay:.36s}
@keyframes tu-att{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.tu-ia-cur{display:inline-block;width:2px;height:16px;margin-left:2px;vertical-align:-3px;background:#fff;animation:tu-clign 1s steps(2) infinite}
@keyframes tu-clign{50%{opacity:0}}
.tu-ia-r{display:none;padding-top:4px}
.tu-ia-r.on{display:block;animation:tu-ia-ouvre .5s cubic-bezier(.2,.8,.3,1) both}
@keyframes tu-ia-ouvre{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tu-ia-r>p{margin:0 0 10px;font-size:14.5px;color:rgba(255,255,255,.85)}
.tu-ia-r ol{margin:0;padding:0;list-style:none;counter-reset:ia}
.tu-ia-r li{counter-increment:ia;position:relative;padding:11px 0 11px 34px;opacity:0;transform:translateX(-8px);
  transition:opacity .45s,transform .45s}
.tu-ia-r li.on{opacity:1;transform:none}
.tu-ia-r li::before{content:counter(ia);position:absolute;left:0;top:11px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-size:11.5px;font-weight:700;
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.6)}
.tu-ia-r li b{display:block;font-size:15.5px;font-weight:600;color:rgba(255,255,255,.55)}
.tu-ia-r li span{display:block;font-size:12.6px;color:rgba(255,255,255,.4);margin-top:2px}
.tu-ia-r li.moi::before{background:linear-gradient(96deg,#34D399,#38BDF8);color:#04241B}
.tu-ia-r li.moi b{color:#fff}
.tu-ia-r li.moi span{color:#6EE7B7}

/* La ligne d'option, dans la fenetre des formules. */
.tu-pop .opt{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:nowrap;
  margin-top:14px;padding:16px 20px;border-radius:16px;
  background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.2)}
.tu-pop .opt.on{border-style:solid;border-color:rgba(52,211,153,.7);background:rgba(16,185,129,.12)}
.tu-pop .opt>div:first-child{flex:1 1 auto;min-width:0}
@media(max-width:640px){.tu-pop .opt{flex-wrap:wrap}}
.tu-pop .opt em{display:block;font-style:normal;font-size:15px;font-weight:600;color:#fff}
.tu-pop .opt span{display:block;font-size:12.8px;color:rgba(255,255,255,.62);margin-top:3px}
.tu-pop .prix2{font-size:24px;font-weight:300;letter-spacing:-.03em;color:#fff;white-space:nowrap}
.tu-pop .prix2 span{display:inline;font-size:12.5px;color:rgba(255,255,255,.55);margin-left:6px}

/* ── Le poste, en tuiles ───────────────────────────────────
   Une liste deroulante cache ses options et demande deux gestes. Six tuiles se
   lisent d'un coup d'oeil et se choisissent d'un clic. */
.tu-postes{display:grid;gap:8px;grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.tu-postes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.tu-postes{grid-template-columns:1fr}}
.tu-poste{font-family:inherit;font-size:13.6px;font-weight:600;line-height:1.35;text-align:left;
  padding:13px 15px;border-radius:12px;cursor:pointer;color:rgba(255,255,255,.8);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  transition:border-color .15s,background .15s,color .15s}
.tu-poste:hover{border-color:rgba(52,211,153,.5);color:#fff}
.tu-poste.on{color:#fff;background:rgba(16,185,129,.16);border-color:rgba(52,211,153,.75);
  box-shadow:0 0 0 1px rgba(52,211,153,.35) inset}

/* ── Pied ─────────────────────────────────────────────────── */
.tu-pied{position:relative;z-index:4;flex:0 0 auto;display:flex;justify-content:space-between;gap:16px;
  padding:14px 28px;font-size:11.5px;color:rgba(255,255,255,.32)}
@media (max-width:620px){
  .tu-pied span:last-child{display:none}
  .tu-bar{padding:12px 16px;gap:14px}
  .tu-scene{padding:16px}
  .tu-ligne{flex-direction:column;gap:4px}.tu-ligne em{flex:none}
  .tu-res,.tu-fin{padding:24px 20px}
  .tu-fh{flex-direction:column;align-items:flex-start;gap:14px}
}
@media (prefers-reduced-motion:reduce){
  .tu-carte,.tu-mv,.tu-logo,.tu-pt,.tu-pas.on i,.tu-b::after,.tu-res::before,.tu-fond span::before,
  .tu-fond i,.tu-tourne::after,.tu-c.on svg,.tu-souris,.tu-goutte circle,.tu-barres rect,.tu-flux path{
    animation:none!important}
  .tu-mv{opacity:1!important;transform:none!important}
}

/* Une liste dans un bloc de resultat : quatre lignes qui se lisent d'un oeil,
   chacune marquee par une coche verte plutot qu'une puce. */
.tu-li{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.tu-li li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.86)}
.tu-li li::before{content:'';position:absolute;left:4px;top:7px;width:9px;height:5px;
  border-left:2px solid #34D399;border-bottom:2px solid #34D399;border-radius:1px;
  transform:rotate(-45deg)}

/* ── L'avertissement de nature ─────────────────────────────
   Quand le site lu n'est pas celui d'une entreprise qui vend, on le dit a
   l'ecran plutot que de simuler un chiffre d'affaires pour une structure qui
   n'a pas de clients. Ambre : ce n'est pas une erreur, c'est un doute honnete. */
.tu-alerte{border-radius:16px;padding:18px 20px;margin-bottom:14px;
  background:linear-gradient(165deg,rgba(69,50,10,.6),rgba(30,22,6,.5));
  border:1px solid rgba(251,191,36,.38)}
.tu-alerte b{display:block;font-size:15.5px;font-weight:600;color:#FDE68A;margin-bottom:6px}
.tu-alerte span{display:block;font-size:13.6px;line-height:1.7;color:rgba(255,255,255,.82)}

/* ── Une annee de Milo : ce qu'il produirait, et le temps humain ───────
   Sa propre boite, apres l'agent. Legere : quatre nombres separes par un
   filet, une ligne d'heures, une barre fine et sa legende en chips. Pas de
   tuiles dans la tuile. */
.tu-prod-t span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#6EE7B7;margin-bottom:8px}
.tu-prod-t h2{margin:0 0 26px;font-size:clamp(22px,3.1vw,30px);font-weight:300;letter-spacing:-.035em;color:#fff}
.tu-prod-t h2 strong{font-weight:700}
.tu-prod-g{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
@media(max-width:860px){.tu-prod-g{grid-template-columns:repeat(2,1fr);row-gap:22px}}
.tu-pk{position:relative;padding:4px 22px 4px 0}
.tu-pk+.tu-pk{padding-left:22px;border-left:1px solid rgba(255,255,255,.12)}
@media(max-width:860px){.tu-pk:nth-child(3){padding-left:0;border-left:none}}
.tu-pk b{display:block;font-size:clamp(32px,3.8vw,44px);font-weight:200;letter-spacing:-.045em;line-height:1.05;
  font-variant-numeric:tabular-nums;color:#fff;
  background:linear-gradient(96deg,#fff,#A7F3D0 60%,#7DD3FC);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;-webkit-backface-visibility:hidden;transform:translateZ(0)}
.tu-pk span{display:block;margin-top:8px;font-size:13.5px;font-weight:600;color:#fff}
.tu-pk em{display:block;margin-top:2px;font-size:12px;font-style:normal;color:rgba(255,255,255,.5)}
.tu-hum{margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1)}
.tu-hum-t{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.tu-hum-t span{flex:1 1 100%;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.tu-hum-t b{font-size:clamp(28px,3.4vw,38px);font-weight:200;letter-spacing:-.04em;color:#fff;line-height:1}
.tu-hum-t b i{font-style:normal;font-variant-numeric:tabular-nums}
.tu-hum-t em{font-style:normal;font-size:14px;color:#6EE7B7;font-weight:600}
.tu-hum-b{display:flex;height:6px;border-radius:4px;overflow:hidden;background:rgba(255,255,255,.08);gap:2px}
.tu-hum-b i{display:block;width:0;height:100%;transition:width 1.2s cubic-bezier(.2,.8,.3,1)}
.tu-hum-l{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.tu-hum-l li{display:flex;align-items:center;gap:7px;font-size:12.5px;color:rgba(255,255,255,.62)}
.tu-hum-l li i{flex:0 0 7px;width:7px;height:7px;border-radius:50%}
.tu-hum-l li b{font-weight:600;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.tu-prod-h{margin:18px 0 0;font-size:12px;line-height:1.65;font-style:italic;color:rgba(255,255,255,.45)}

/* ── Le temps perdu, en chaud ───────────────────────────────────────────
   Le bloc « le temps que ca vous prend deja » parle d'une perte : les
   montants, les heures et le taux horaire passent en rouge orange. */
.tu-res.chaud{background:linear-gradient(150deg,rgba(60,26,14,.9),rgba(30,14,16,.95));border-color:rgba(251,146,60,.3)}
.tu-res.chaud::before{background:radial-gradient(circle,rgba(251,146,60,.2),transparent 66%)}
.tu-res.chaud .tu-bil-g em,.tu-res.chaud .tu-bil-d b{
  background:linear-gradient(96deg,#FDE68A,#FB923C 55%,#F87171);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.tu-prod-s{margin:-14px 0 34px;font-size:14px;line-height:1.7;color:rgba(255,255,255,.66);max-width:64ch}

/* ── Une annee de Milo : l'entree en scene ────────────────────────────────
   Tant que la section n'est pas a l'ecran, les nombres attendent en bas et
   invisibles ; ils se levent l'un apres l'autre, la barre se remplit, la
   legende s'ecrit. Un reflet balaie la boite au moment ou tout se pose. */
.tu-prod.att .tu-pk{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .6s cubic-bezier(.2,.8,.3,1)}
.tu-prod.att .tu-pk.on{opacity:1;transform:none}
.tu-prod.att .tu-hum{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .55s cubic-bezier(.2,.8,.3,1)}
.tu-prod.att .tu-hum.on{opacity:1;transform:none}
.tu-prod.att .tu-hum-l li{opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .35s}
.tu-prod.att .tu-hum-l li.on{opacity:1;transform:none}
.tu-prod.joue::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.07) 50%,transparent 60%);
  background-size:260% 100%;background-position:140% 0;animation:tu-balaye-1 1.6s ease-out .9s both}
@keyframes tu-balaye-1{from{background-position:140% 0}to{background-position:-120% 0}}
.tu-prod.att .tu-pk b{transition:letter-spacing .6s}
@media(prefers-reduced-motion:reduce){.tu-prod.att .tu-pk,.tu-prod.att .tu-hum,.tu-prod.att .tu-hum-l li{opacity:1;transform:none}.tu-prod.joue::after{animation:none}}

/* ── Le bouton flottant, a droite ─────────────────────────────────────────
   Il arrive quand on descend, il s'efface quand « L'etape suivante » est a
   l'ecran. Fixe dans la fenetre, jamais dans le texte : a droite, en bas,
   avec sa propre ombre. Sur mobile il n'a pas la place, il n'y est pas. */
.tu-flot{position:fixed;right:28px;bottom:28px;z-index:40;display:inline-flex;align-items:center;gap:10px;
  padding:15px 22px 15px 24px;border-radius:999px;text-decoration:none;font-family:var(--font);
  font-size:14.5px;font-weight:700;color:#fff;
  background:linear-gradient(96deg,#10B981,#0EA5E9);
  box-shadow:0 22px 50px -14px rgba(0,0,0,.9),0 12px 30px -12px rgba(52,211,153,.9);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.96);
  transition:opacity .35s,transform .4s cubic-bezier(.2,.8,.3,1),visibility .35s}
.tu-flot.on{opacity:1;visibility:visible;transform:none}
.tu-flot:hover{transform:translateY(-2px);box-shadow:0 26px 56px -14px rgba(0,0,0,.9),0 16px 36px -12px rgba(52,211,153,1)}
.tu-flot svg{transition:transform .25s}
.tu-flot:hover svg{transform:translateX(3px)}
@media(max-width:900px){.tu-flot{display:none}}