/* ============================================================
   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 .5s cubic-bezier(.2,.75,.3,1) both;animation-delay:calc(var(--i,0) * 75ms + 120ms)}
@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)}