:root{
    /* ── PERSPECTIVE DE CHAQUE PLAN ─────────────────────────────────
       *-persp : profondeur (px). Plus petit = perspective plus marquée.
       *-vp    : point de fuite, en % de l'ÉCRAN « X% Y% ».
                 X : 0%=gauche · 50%=centre · 100%=droite  (ne déplace PAS le bloc).
       *-left  : position horizontale du bloc (négatif = vers la gauche, positif = vers la droite).
       Le plan 3 est celui de devant (au premier plan).                 */
    --p1-persp:1050px;  --p1-vp:50% 42%;  --p1-left:-30%;  --p1-blur:0px;
    --p2-persp:1050px;  --p2-vp:52% 42%;  --p2-left:6%;   --p2-blur:0px;
    --p3-persp:1600px;   --p3-vp:55% 50%;  --p3-left:15%;  --p3-blur:0px;   /* seul plan : fenêtre de profil qui part vers le fond */
    /* *-blur : flou de profondeur. Plus il est fort, plus c'est joli MAIS lourd (saccades). */

    /* ── VITESSE & DÉPART DE CHAQUE PLAN ────────────────────────────
       *-speed : cadence d'écriture (ms par ligne — plus petit = plus rapide).
       *-head  : hauteur de départ de l'écriture (en lignes depuis le haut).   */
    --p1-speed:620;  --p1-head:36;
    --p2-speed:500;  --p2-head:18;
    --p3-speed:300;  --p3-head:24;

    /* ── COULEURS DE FOND ───────────────────────────────────────────
       Dégradé du fond (centre -> bords) + teinte des halos bleus flous. */
    --bg-1:#0b1e42;  --bg-2:#061029;  --bg-3:#02060f;
    --bokeh:rgba(90,170,255,.45);

    /* ── BOÎTE CENTRALE (nom du studio) ── */
    --glass:rgba(255,255,255,.12);          /* fond translucide "verre dépoli" (le dernier nombre = opacité) */
    --glass-border:rgba(255,255,255,.28);   /* couleur du liseré */
    --name:#eaf2ff;                          /* couleur du texte */
    --brand-font:'Roboto', sans-serif;       /* police du nom "bodhidev" (signature + encadré) */
    --name-weight:400;                       /* graisse du nom : 300 léger · 400 · 500 · 700 · 900 gras */
    --studio-x:22%;    /* décalage horizontal : 0 = centré, positif = vers la droite */
    --name-size:clamp(1.8rem,6vw,4rem);      /* TAILLE DU TEXTE -> taille de la boîte */
    --box-pad:clamp(1.4rem,4vw,2.6rem) clamp(2rem,7vw,4.5rem);  /* marge intérieure : (haut/bas) (gauche/droite) */
    --box-radius:22px;                       /* arrondi des coins */
    --box-blur:14px;                         /* intensité du flou "verre dépoli" */
    --form-width:min(86vw,420px);            /* largeur du formulaire quand il est ouvert */
    --halo:rgba(90,150,255,.45);             /* halo lumineux sous la boîte (blanc : rgba(255,255,255,.45)) */

    /* ── COULEURS DU CODE (coloration syntaxique) ── */
    --def:#6fb0f5; --kw:#bcdcff; --str:#4fd6e6; --num:#9acbff; --fn:#8ec9ff;
    --com:#3d6ba0; --var:#7fc8ff; --punc:#5488c9; --gutter:#2f5c92; --scr:#3f6ea5;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  body{
    background:radial-gradient(120% 90% at 52% 30%, var(--bg-1) 0%, var(--bg-2) 45%, var(--bg-3) 100%);
    color:var(--def);
    font-family:'JetBrains Mono',ui-monospace,monospace;
    height:100dvh; overflow:hidden;
    -webkit-user-select:none; user-select:none;   /* pas de surlignage du code au clic/double-clic */
  }
  /* mais le formulaire reste sélectionnable/éditable */
  .studio-form, .studio-form *{ -webkit-user-select:text; user-select:text }

  .bokeh{position:fixed;inset:0;overflow:hidden;z-index:0}
  .blob{
    position:absolute;border-radius:50%;
    background:radial-gradient(circle, var(--bokeh), transparent 70%);
    filter:blur(30px);
    animation:float var(--bd) ease-in-out infinite alternate;
  }
  @keyframes float{to{transform:translate(var(--bx),var(--by))}}

  .scene{
    position:fixed;inset:0;
    overflow:hidden; z-index:1;
  }

  /* Chaque plan a sa propre "scène" -> sa propre perspective + point de fuite
     (réglés dans le :root), sans jamais déplacer le bloc lui-même. */
  .stage{position:absolute; inset:0; mix-blend-mode:screen}
  .s1{perspective:var(--p1-persp); perspective-origin:var(--p1-vp)}
  .s2{perspective:var(--p2-persp); perspective-origin:var(--p2-vp)}
  .s3{perspective:var(--p3-persp); perspective-origin:var(--p3-vp)}

  .plane{
    position:absolute; top:-40%;
    width:132%; height:184%;
    transform-style:preserve-3d;
  }
  /* Position (left) + orientation (rotate* / translateZ) de chaque plan.
     Le point de fuite et la profondeur se règlent dans le :root, plus haut. */
  .p1{ left:var(--p1-left); transform:rotateX(10deg) rotateY(-24deg) rotateZ(-4deg) translateZ(-290px) scale(1.30); filter:blur(var(--p1-blur)); opacity:.38; }
  .p2{ left:var(--p2-left); transform:rotateX(-4deg) rotateY(6deg) rotateZ(1.5deg) translateZ(-40px) scale(1.05); filter:blur(var(--p2-blur)); opacity:.72; }
  .p3{ left:var(--p3-left); transform:rotateX(6deg) rotateY(32deg) rotateZ(-2deg) translateZ(0) scale(1.15); filter:blur(var(--p3-blur)); opacity:.95; }

  .track{will-change:transform; backface-visibility:hidden; contain:layout; transform:translateZ(0)}

  .ln{
    display:flex; align-items:baseline;
    height:34px; line-height:34px;
    font-size:19px; white-space:pre; font-weight:500; padding:0 2rem;
    contain:layout style;
  }
  .g{flex:0 0 auto;width:3.4em;text-align:right;margin-right:1.1em;color:var(--gutter);opacity:.7}
  .c{text-shadow:0 0 6px rgba(90,160,255,.75), 0 0 16px rgba(40,110,255,.35)}
  .c.writing{text-shadow:0 0 12px rgba(185,222,255,1), 0 0 30px rgba(90,170,255,.9)}
  .c.writing *{color:#dcefff}

  /* (flash d'illumination retiré : le filter + transition repeignait tout en continu) */

  .kw{color:var(--kw)} .str{color:var(--str)} .num{color:var(--num)}
  .fn{color:var(--fn)} .com{color:var(--com);font-style:italic}
  .var{color:var(--var)} .punc{color:var(--punc)}
  .scr{color:var(--scr);opacity:.85}

  .vignette{
    position:fixed;inset:0;z-index:3;pointer-events:none;
    box-shadow:inset 0 0 260px rgba(0,0,0,.78);
    background:
      linear-gradient(180deg, var(--bg-3) 0%, transparent 14%, transparent 86%, var(--bg-3) 100%),
      radial-gradient(120% 90% at 54% 42%, transparent 38%, rgba(2,6,15,.6) 100%);
  }
  .brand{
    position:fixed;left:clamp(16px,3vw,40px);bottom:clamp(14px,3vh,30px);
    z-index:6;font-size:.82rem;letter-spacing:.04em;color:rgba(150,195,255,.7);
    text-shadow:0 0 12px rgba(40,110,255,.5);
  }
  .brand b{color:#dcebff;font-weight:var(--name-weight);font-family:var(--brand-font);cursor:pointer;transition:color .2s}
  .brand b:hover{color:#fff}

  /* ── Boîte centrale en verre dépoli ── */
  .studio{
    position:fixed; inset:0; z-index:5;
    display:grid; place-items:center;
    pointer-events:none;
    opacity:0; transition:opacity 1s ease;
    transform:translateX(var(--studio-x));   /* décale la boîte horizontalement */
  }
  .studio.show{opacity:1}
  .studio-box{
    padding:var(--box-pad);
    border-radius:var(--box-radius);
    background:var(--glass);
    border:1px solid var(--glass-border);
    box-shadow:0 28px 80px 6px var(--halo), 0 24px 90px rgba(8,24,70,.5), inset 0 1px 0 rgba(255,255,255,.35);
    transform:scale(.94);
    transition:transform 1s cubic-bezier(.2,.9,.25,1);
  }
  .studio.show .studio-box{
    transform:scale(1);
    backdrop-filter:blur(var(--box-blur)) saturate(140%);
    -webkit-backdrop-filter:blur(var(--box-blur)) saturate(140%);
  }
  .studio-name{
    font-family:var(--brand-font);
    font-size:var(--name-size);
    font-weight:var(--name-weight); letter-spacing:.02em; white-space:nowrap;
    color:var(--name);
    text-shadow:0 0 18px rgba(150,200,255,.7), 0 2px 30px rgba(40,110,255,.4);
  }
  .studio-name .u{
    display:inline-block; opacity:0; transform:translateY(.28em);
    animation:letterIn .5s forwards;
  }
  @keyframes letterIn{to{opacity:1;transform:none}}

  /* ── Interactivité + formulaire de contact ── */
  .studio-box{pointer-events:none}
  .studio.show .studio-box{pointer-events:auto; cursor:pointer}
  .studio-box.form-open{cursor:default}
  /* Survol : halo bleu autour de la boîte (aucun changement de texte) */
  .studio.show .studio-box.hint{
    border-color:rgba(150,205,255,.6);
    box-shadow:
      0 0 0 1px rgba(130,195,255,.55),
      0 0 46px 8px rgba(80,160,255,.55),
      0 24px 90px rgba(8,24,70,.5),
      inset 0 1px 0 rgba(255,255,255,.45);
  }

  .studio-form{display:none; position:relative; width:var(--form-width); text-align:left}
  .studio-box.form-open .studio-name{display:none}
  .studio-box.form-open .studio-form{
    display:block;
    transform-origin:top center;
    animation:formIn .42s cubic-bezier(.2,.8,.25,1) both;
  }
  @keyframes formIn{
    from{opacity:0; transform:translateY(-8px) scaleY(.86)}
    to  {opacity:1; transform:none}
  }
  .studio-box.form-open .studio-form > *{ animation:fieldIn .4s ease both }
  .studio-box.form-open .studio-form > *:nth-child(1){animation-delay:.06s}
  .studio-box.form-open .studio-form > *:nth-child(2){animation-delay:.11s}
  .studio-box.form-open .studio-form > *:nth-child(3){animation-delay:.16s}
  .studio-box.form-open .studio-form > *:nth-child(4){animation-delay:.21s}
  .studio-box.form-open .studio-form > *:nth-child(5){animation-delay:.26s}
  .studio-box.form-open .studio-form > *:nth-child(6){animation-delay:.31s}
  .studio-box.form-open .studio-form > *:nth-child(7){animation-delay:.36s}
  .studio-box.form-open .studio-form > *:nth-child(8){animation-delay:.41s}
  @keyframes fieldIn{
    from{opacity:0; transform:translateY(8px)}
    to  {opacity:1; transform:none}
  }
  /* Fermeture — phase 1 : les champs se replient */
  .studio-box.form-open.fields-out .studio-form > *{ animation:fieldOut .24s ease both }
  @keyframes fieldOut{
    from{opacity:1; transform:none}
    to  {opacity:0; transform:translateY(8px)}
  }
  /* Fermeture — phase 2 : le contenu se replie et la boîte se rétracte */
  .studio-box.form-open.box-out .studio-form{ animation:formOut .26s ease both }
  @keyframes formOut{
    from{opacity:1; transform:none}
    to  {opacity:0; transform:translateY(-8px) scaleY(.86)}
  }
  /* La grande boîte : arrivée (pop) et départ (rétraction) */
  .studio.show .studio-box.form-open{ animation:boxIn .4s cubic-bezier(.2,.9,.3,1.12) both }
  .studio.show .studio-box.form-open.box-out{ animation:boxOut .26s ease both }
  @keyframes boxIn{  from{transform:scale(.85)} to{transform:scale(1)} }
  @keyframes boxOut{ from{transform:scale(1)}   to{transform:scale(.9)} }
  @media (prefers-reduced-motion:reduce){
    .studio-box.form-open .studio-form,
    .studio-box.form-open .studio-form > *,
    .studio-box.form-open.fields-out .studio-form > *,
    .studio-box.form-open.box-out .studio-form,
    .studio.show .studio-box.form-open,
    .studio.show .studio-box.form-open.box-out{ animation:none }
  }
  .studio-form h3{
    margin:0 0 .9rem; font-size:1.15rem; font-weight:700; color:var(--name);
    text-shadow:0 0 14px rgba(120,180,255,.5);
  }
  .studio-form input, .studio-form textarea{
    display:block; width:100%; margin:.45rem 0; padding:.7rem .85rem;
    font:inherit; font-size:.9rem; color:var(--name); resize:vertical;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.22); border-radius:10px; outline:none;
    transition:border-color .2s, box-shadow .2s, background .2s;
  }
  .studio-form input::placeholder, .studio-form textarea::placeholder{color:rgba(220,232,255,.5)}
  .studio-form input:focus, .studio-form textarea:focus{
    border-color:rgba(140,200,255,.7);
    box-shadow:0 0 0 3px rgba(90,160,255,.18);
    background:rgba(255,255,255,.12);
  }
  .sf-send{
    width:100%; margin-top:.6rem; padding:.75rem 1rem;
    font:inherit; font-weight:700; color:#04121f; cursor:pointer;
    background:linear-gradient(180deg,#bfe0ff,#8ec9ff);
    border:none; border-radius:10px; box-shadow:0 8px 24px rgba(60,140,255,.35);
    transition:transform .15s, box-shadow .2s, opacity .2s;
  }
  .sf-send:hover{transform:translateY(-1px); box-shadow:0 10px 30px rgba(60,140,255,.5)}
  .sf-send:disabled{opacity:.6; cursor:default; transform:none}
  .sf-close{
    position:absolute; top:-.4rem; right:-.2rem; width:2rem; height:2rem;
    line-height:1.7rem; text-align:center; background:none; border:none;
    color:var(--name); font-size:1.5rem; cursor:pointer; opacity:.7;
  }
  .sf-close:hover{opacity:1}
  .sf-status{margin:.6rem 0 0; font-size:.82rem; min-height:1.1em; color:rgba(220,232,255,.7)}
  .sf-status.ok{color:#9be7b4}
  .sf-status.err{color:#ff9ba6}
  .sf-hp{position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0}