/* ============================================================
   SCALAB — home.css
   Styles SPÉCIFIQUES à la page d'accueil (index.html) :
   hero, scroll-snap des sections, vision, piliers, blockchain,
   stats, et le bloc d'inscription Invest.
   Les styles communs (nav, footer, curseur…) sont dans base.css.
   ============================================================ */

/* ---- Scroll-snap des sections principales ---- */
header,#vision,#consulting,#crypto,#invest{position:relative}
header,#consulting,#crypto,#invest{min-height:100vh;display:flex;flex-direction:column;justify-content:center}
#vision{min-height:70vh;display:flex;flex-direction:column;justify-content:center}

/* ---- Largeur de contenu cappée ---- */
section > .sectag,
section > .sectitle,
.pillars,
.invest,
.stats,
.vision h2{max-width:var(--maxw);width:100%;margin-left:auto;margin-right:auto}
section > .sectag,section > .sectitle{width:100%}

/* ---- HERO ---- */
header{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:0 calc((100% - var(--maxw)) / 2 + clamp(20px,5vw,64px));position:relative;align-items:flex-start;width:100%}
.hero-inner{max-width:var(--maxw);width:100%;margin:0 auto}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.4em;text-transform:uppercase;color:var(--v2);margin-bottom:28px;opacity:0;animation:rise .9s .2s forwards}
h1{font-size:clamp(40px,8.4vw,116px);font-weight:800;line-height:.96;letter-spacing:-.035em;max-width:15ch}
h1 .l{display:inline-block;opacity:0;transform:translateY(40px);animation:reveal .9s forwards}
h1 .grad{color:var(--v2)}
.sub{margin-top:32px;font-size:clamp(16px,1.7vw,21px);color:var(--muted);max-width:56ch;opacity:0;animation:rise 1s 1.1s forwards}
.herobtns{margin-top:44px;display:flex;gap:16px;flex-wrap:wrap;opacity:0;animation:rise 1s 1.3s forwards}
.scrollhint{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase;opacity:0;animation:rise 1s 1.6s forwards;z-index:3}
.scrollhint .bar{display:block;width:1px;height:40px;margin:12px auto 0;background:linear-gradient(var(--v2),transparent);animation:drop 2s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes reveal{to{opacity:1;transform:none}}
@keyframes rise{to{opacity:1;transform:none}}

/* ---- Grille de perspective (Consulting) ---- */
#consulting #gridCv{filter:blur(0.6px);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.15) 30%, rgba(0,0,0,0.5) 42%, rgba(0,0,0,0.85) 52%, #000 64%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.15) 30%, rgba(0,0,0,0.5) 42%, rgba(0,0,0,0.85) 52%, #000 64%);
  mask-composite:intersect}

/* ---- VISION ---- */
.vision{text-align:center;padding-top:clamp(70px,10vh,120px);padding-bottom:clamp(70px,10vh,120px);position:relative}
.vision .vision-frame{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:48px;padding:0 20px}
.vision-logo{display:inline-flex;align-items:center;gap:clamp(16px,2.5vw,28px);font-family:var(--disp);font-weight:600;letter-spacing:-.01em;color:#fff;font-size:clamp(48px,7vw,96px)}
.vision-logo .mk{width:1em;height:1em;color:var(--v2);display:inline-flex;align-items:center;justify-content:center;filter:drop-shadow(0 0 24px rgba(157,92,255,.5));flex-shrink:0}
.vision-logo .mk svg{width:100%;height:100%}
.vision-logo .wm{font-weight:600;letter-spacing:-.01em;line-height:1}
.vision-logo .wm b{color:var(--v2);font-weight:600}
.vision h2{font-size:clamp(22px,3.4vw,40px);font-weight:400;letter-spacing:-.015em;line-height:1.28;margin:0;color:#e7e2f6;max-width:30ch}
.vision h2 b{font-weight:700;color:var(--v2)}
@media(max-width:640px){
  .vision .vision-frame{gap:36px}
}

/* ---- PILIERS ---- */
.pillars{display:grid;gap:13px;position:relative;z-index:2}
.pillar-stage{position:relative;width:100%}
.pillar-stage .card-canvas{position:absolute;inset:-8% -4%;width:108%;height:116%;z-index:0;pointer-events:none}
.pillar-stage .pillar{position:relative;z-index:2;width:100%}
.pillar{border:1px solid var(--pl,var(--line));padding:clamp(30px,3.6vw,52px);position:relative;overflow:hidden;transition:.5s;clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  background:linear-gradient(105deg,rgba(12,10,28,0.80) 0%,rgba(12,10,28,0.58) 40%,rgba(12,10,28,0.08) 100%);backdrop-filter:blur(5px)}
.pillar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ph,var(--v2))}
.pillar::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,0%),var(--pg,rgba(124,58,237,.16)),transparent 45%);opacity:0;transition:.5s}
.pillar:hover{border-color:var(--ph,rgba(157,92,255,.5));transform:translateY(-4px);background:linear-gradient(105deg,rgba(14,11,32,0.88) 0%,rgba(14,11,32,0.70) 50%,rgba(14,11,32,0.28) 100%)}
.pillar:hover::before{opacity:1}
.pillar .idx{font-family:var(--mono);font-size:13.5px;letter-spacing:.06em;color:var(--ph,var(--v2));font-weight:600}
.pillar h3{font-size:clamp(28px,3.3vw,44px);font-weight:800;margin:14px 0 8px;letter-spacing:-.02em;color:#fff}
.pillar .tagline{color:var(--ph,var(--accent));font-family:var(--mono);font-size:14.5px;letter-spacing:.03em;margin-bottom:20px;font-weight:500}
.pillar p{color:#cfc9e6;font-size:17px;line-height:1.62;max-width:62ch}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.chip{font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;padding:9px 15px;border:1px solid var(--pl,var(--line));color:#e7e2f6;background:rgba(124,58,237,.10);font-weight:500}
.badge{display:inline-flex;align-items:center;gap:8px;margin-top:26px;padding:12px 18px;background:rgba(124,58,237,.14);border:1px solid rgba(157,92,255,.35);font-size:14px;color:#f0edfa}
.badge .k{color:var(--v2);font-weight:700;font-family:var(--mono)}

/* Ligne social proof "Ils nous font confiance" (juste du texte, pas d'encadré) */
.trust-line{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin-top:28px;
  flex-wrap:wrap;
}
.trust-label{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
  white-space:nowrap;
}
.trust-text{
  font-size:15px;
  color:var(--ink);
  line-height:1.5;
}

/* Bloc produit/marketplace : séparateur discret + labels muted + CTA style standard
   Les couleurs s'adaptent à la couleur du pôle via la variable --ph
   (violet pour 0x, bleu pour Consulting) */
.apps-block{
  margin-top:32px;
  padding-top:26px;
  border-top:1px solid var(--pl,rgba(157,92,255,.20));
  position:relative;
}
.apps-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.apps-tag{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
}
.apps-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--muted);
  letter-spacing:.05em;
  font-weight:500;
  text-transform:uppercase;
}
.apps-status i{
  width:7px;
  height:7px;
  background:#2eb46e;
  box-shadow:0 0 10px #2eb46e,0 0 20px rgba(46,180,110,.4);
  animation:pulse 1.6s infinite;
  font-style:normal;
  border-radius:50%;
}
.apps-title-row{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:8px;
  flex-wrap:wrap;
}
.apps-logo{
  height:40px;
  width:auto;
  display:block;
  flex-shrink:0;
}
.apps-title{
  font-size:19px;
  font-weight:700;
  color:#fff;
  letter-spacing:-.01em;
  margin-bottom:8px;
}
.apps-lead{
  font-size:15px;
  line-height:1.65;
  color:var(--muted);
  margin:0 0 18px;
  max-width:60ch;
}
/* CTA prend automatiquement la couleur du pôle via --ph */
.apps-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.08em;
  font-weight:600;
  color:var(--ph,#a05cff);
  text-decoration:none;
  padding:11px 22px;
  border:1px solid var(--pl,rgba(160,92,255,.35));
  background:rgba(0,0,0,.25);
  transition:.3s;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  text-transform:uppercase;
}
.apps-cta:hover{
  background:var(--ph,#a05cff);
  color:#fff;
  transform:translateX(3px);
}
.more-link{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;font-weight:600;color:var(--ph,var(--v2));text-decoration:none;padding:11px 22px;border:1px solid var(--pl,var(--line));background:rgba(0,0,0,.25);transition:.3s;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);text-transform:uppercase}
.more-link:hover{background:var(--ph,var(--v2));color:#fff;transform:translateX(3px)}
.status{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:13px;letter-spacing:.05em;color:var(--accent);margin-top:22px;font-weight:500}
.status i{width:8px;height:8px;background:var(--v2);box-shadow:0 0 12px var(--v2);animation:pulse 2s infinite;font-style:normal}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}

/* ---- Blockchain (Crypto) ---- */
#crypto{overflow:hidden;position:relative}
#crypto #chainCv{left:50%;width:124%;transform:translateX(-50%);
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%)}
#crypto .chain-canvas{z-index:0;opacity:1}
#crypto .pillar{background:linear-gradient(105deg,rgba(12,10,28,0.82) 0%,rgba(12,10,28,0.58) 40%,rgba(12,10,28,0.06) 100%)}
#crypto .pillar:hover{background:linear-gradient(105deg,rgba(14,11,32,0.88) 0%,rgba(14,11,32,0.66) 50%,rgba(14,11,32,0.22) 100%)}

/* ---- STATS ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);overflow:hidden;position:relative;z-index:2}
.stat{background:var(--bg2);padding:clamp(28px,4vw,44px) 28px;text-align:center;position:relative;overflow:hidden;transition:background .4s}
.stat::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(157,92,255,.22),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none}
.stat:hover{background:#120e26}
.stat:hover::before{opacity:1}
.stat .n{font-family:var(--mono);font-size:clamp(34px,5vw,58px);font-weight:700;letter-spacing:-.02em;color:var(--v2);position:relative}
.stat .lbl{color:var(--muted);font-size:13.5px;margin-top:8px;position:relative}

/* ---- INVEST + inscription ---- */
#invest{position:relative}
#invest #flowCv{
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%)}
#invest .pillars{position:relative;z-index:2}
.signup{margin-top:30px;padding-top:26px;border-top:1px solid var(--pl,var(--line));display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.signup-head{display:flex;flex-direction:column;gap:4px;flex:1;min-width:240px}
.signup-title{font-weight:700;font-size:17px;color:#fff;letter-spacing:-.01em}
.signup-sub{font-family:var(--mono);font-size:12.5px;color:var(--muted);letter-spacing:.02em}
.form{display:flex;gap:12px;flex-wrap:wrap;flex:1;min-width:300px;position:relative;z-index:3}
.form input{flex:1;min-width:180px;padding:15px 18px;border:1px solid var(--pl,var(--line));background:rgba(0,0,0,.35);color:var(--ink);font-family:var(--mono);font-size:14px;outline:none;transition:.3s;position:relative;z-index:3;pointer-events:auto;cursor:text}
.form input:focus{border-color:var(--ph,var(--v2));box-shadow:0 0 0 3px rgba(124,58,237,.15)}
.form .btn-p{border:none;cursor:pointer;position:relative;z-index:3;pointer-events:auto}
.form .btn-p[disabled]{opacity:.6;cursor:wait}
.disclaimer{flex-basis:100%;font-family:var(--mono);font-size:12px;color:var(--v2);margin-top:6px;min-height:0;transition:color .3s}
.disclaimer.error{color:#ff8a8a}
.rgpd-notice{flex-basis:100%;font-family:var(--disp);font-size:11.5px;line-height:1.55;color:var(--muted);margin-top:14px;padding-top:14px;border-top:1px solid var(--line);opacity:.8}
.rgpd-notice a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.rgpd-notice a:hover{color:#fff}
/* honeypot anti-spam : invisible pour l'humain, piège pour les bots */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============================================================
   RESPONSIVE — MOBILE (smartphones)
   Le design PC (>860px) reste strictement inchangé : tout ce qui suit
   ne s'active que sous les points de rupture.
   ============================================================ */

@media(max-width:980px){.pillar p{font-size:16px}}

/* ---- Smartphone : refonte du comportement de défilement et des animations ---- */
@media(max-width:860px){
  /* Défilement libre : plus de snap ni de hauteurs forcées -> le footer devient atteignable
     (déclenché sur la largeur ET sur tactile, pour que le test en mode responsive marche aussi) */
  header,#vision,#consulting,#crypto,#invest{min-height:auto}
  header{min-height:88vh}                 /* le hero garde de la présence sans bloquer */
  #consulting,#crypto,#invest{min-height:auto;padding-top:clamp(70px,12vh,110px);padding-bottom:clamp(70px,12vh,110px)}
  #vision{min-height:auto}

  /* ---- Animations en BANDES entre les sections (sous chaque bloc) ----
     Sur mobile, les cartes remplissent l'écran : on sort donc chaque canvas
     en bande horizontale visible sous le contenu de sa section. */
  #consulting{padding-bottom:180px}
  #crypto,#invest{padding-bottom:230px}      /* place pour la bande d'animation */
  #consulting .pillars,#crypto .pillars,#invest .pillars{position:relative;z-index:2}
  #consulting #gridCv,
  #crypto #chainCv,
  #invest #flowCv{
    display:block;opacity:1;
    top:auto;bottom:24px;left:0;height:180px;width:100%;
    transform:none;                                       /* annule le centrage PC du chainCv */
    contain:layout paint;                                 /* perf : la bande ne déborde pas */
  }
  /* le quadrillage : on garde la position d'avant, mais plus haute pour remonter derrière la carte */
  #consulting #gridCv{height:480px;bottom:-40px;z-index:1}
  #consulting .pillars{z-index:2}
  .pillar{backdrop-filter:blur(3px)}

  /* Sphère du hero : descendue en fond et recentrée pour ne plus déborder */
  header .hero-inner{position:relative;z-index:2}
  #heroCv{opacity:.35}

  /* Grille de perspective : un peu plus discrète sur petit écran */
  #consulting #gridCv{opacity:.7}
}

/* ---- Ajustements de mise en page fine ---- */
@media(max-width:720px){.signup{flex-direction:column;align-items:stretch}.form{flex-direction:column}.form .btn-p{width:100%;justify-content:center}}
@media(max-width:680px){
  h1{font-size:clamp(38px,12vw,64px)}
  .pillar{padding:26px 22px}
  .pillar h3{font-size:30px}
  .form{flex-direction:column}
  .form .btn-p{width:100%;justify-content:center}
  .fbottom{flex-direction:column;gap:8px}
  .pillar-stage .card-canvas{inset:-4% -2%;width:104%;height:108%}
}


/* ============================================================
   Section #proof : chiffres allégés + témoignages côte à côte
   ============================================================ */
#proof{padding:clamp(60px,8vh,100px) clamp(20px,5vw,64px);max-width:1280px;margin:0 auto;position:relative;z-index:2}
.proof-grid{display:grid;grid-template-columns:minmax(340px,1.4fr) minmax(240px,0.85fr);gap:clamp(30px,5vw,60px);align-items:start}

/* Colonne chiffres : plus discrets, taille réduite */
.proof-stats{display:flex;flex-direction:column;gap:14px}
.proof-stat{padding:20px 22px;border:1px solid var(--line);background:rgba(12,10,28,0.35);position:relative;overflow:hidden;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:.4s}
.proof-stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--v2);opacity:.4;transition:.4s}
.proof-stat:hover{border-color:rgba(157,92,255,.35);background:rgba(20,15,42,0.45)}
.proof-stat:hover::before{opacity:.8;width:3px}
.ps-num{font-family:var(--mono);font-size:clamp(28px,3.4vw,38px);font-weight:700;letter-spacing:-.02em;color:#fff;line-height:1}
.ps-num span{color:var(--v2);font-size:.6em;font-weight:600}
.ps-lbl{color:var(--muted);font-size:12.5px;margin-top:6px;line-height:1.4;max-width:28ch;font-family:var(--mono);letter-spacing:.02em}

/* Colonne témoignages mise en avant */
.proof-quotes{position:relative}
.quote-stack{position:relative;min-height:340px}
.quote-card{position:absolute;inset:0;display:flex;flex-direction:column;padding:42px 44px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(20,15,42,0.85),rgba(12,10,28,0.45));clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .55s ease,transform .55s ease,visibility .55s}
.quote-card.active{opacity:1;visibility:visible;transform:translateY(0)}
.qmark{font-family:var(--disp);font-size:96px;line-height:.6;color:var(--v2);opacity:.5;margin-bottom:8px;font-weight:900}
.qtxt{font-size:18px;line-height:1.62;color:#e7e2f6;margin-bottom:28px;font-style:italic;font-weight:400}
.qmeta{margin-top:auto;padding-top:20px;border-top:1px solid var(--line)}
.qname{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:#fff;font-weight:600;text-transform:uppercase}
.qrole{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--muted);margin-top:4px}
.quote-nav{display:flex;gap:10px;justify-content:center;margin-top:28px}
.qdot{width:28px;height:3px;background:var(--line);border:none;cursor:pointer;padding:0;transition:.3s}
.qdot.active{background:var(--v2);width:42px}
.qdot:hover:not(.active){background:rgba(157,92,255,.5)}

/* Responsive */
@media(max-width:860px){
  .proof-grid{grid-template-columns:1fr}
  .quote-stack{min-height:360px}
  .quote-card{padding:30px 26px}
  .qtxt{font-size:16px}
}
@media(max-width:480px){
  .quote-stack{min-height:400px}
  .qtxt{font-size:15.5px}
}

/* ============================================================
   Footer agrandi avec accroche (devient une "section" finale)
   ============================================================ */
footer#footer{padding:0;position:relative;border-top:none}
.footer-hook{padding:clamp(70px,10vh,120px) clamp(20px,5vw,64px) 60px;max-width:1080px;margin:0 auto;text-align:left}
.footer-hook .sectag{margin-bottom:18px}
.footer-hook .sectitle{font-size:clamp(34px,4.5vw,58px);line-height:1.05;letter-spacing:-.025em;font-weight:800;margin-bottom:22px}
.footer-hook .sectitle b{color:var(--v2);font-weight:800}
.footer-lead{font-size:clamp(15.5px,1.4vw,18px);line-height:1.6;color:#cfc9e6;max-width:62ch;margin-bottom:36px}
.footer-ctas{display:flex;gap:14px;flex-wrap:wrap}
.footer-ctas .btn{font-size:13px}
footer#footer .fgrid{padding:50px clamp(20px,5vw,64px) 30px;border-top:1px solid var(--line);max-width:none;margin:0}
footer#footer .fbottom{padding:0 clamp(20px,5vw,64px) 40px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--muted)}

@media(max-width:680px){
  .footer-hook{padding-top:60px;padding-bottom:40px}
  .footer-ctas{flex-direction:column;align-items:stretch}
  .footer-ctas .btn{text-align:center}
}

/* ============================================================
   RESPONSIVE FIXES home : très petits écrans (320-380px)
   ============================================================ */
@media(max-width:380px){
  /* Hero : padding réduit, titre rétréci */
  header{padding-left:16px;padding-right:16px;padding-top:90px;padding-bottom:30px;min-height:auto;justify-content:flex-start}
  .eyebrow{margin-top:0}
  .h1 .l{font-size:38px}
  .sub{font-size:14.5px}
  /* CTAs : compacts */
  .herobtns{flex-direction:column;gap:10px;width:100%}
  .herobtns .btn{width:100%;justify-content:center;text-align:center}
  /* Scrollhint : caché sur très petit, peu utile */
  .scrollhint{display:none}
  /* Vision : padding/taille */
  .vision-logo{font-size:38px;gap:12px}
  .vision h2{font-size:20px;line-height:1.3}
  /* Piliers : padding interne */
  .pillar{padding:24px 20px}
  /* Section proof : pas de 2 colonnes */
  .proof-grid{grid-template-columns:1fr}
  .quote-card{padding:24px 20px}
  /* Footer : compact */
  .footer-hook{padding:50px 20px 30px}
  .footer-hook .sectitle{font-size:28px}
}

/* ============================================================
   RESPONSIVE FIXES home : très grands écrans (1800px+)
   Nav, hero et contenu doivent profiter de l'espace
   ============================================================ */
@media(min-width:1800px) and (max-width:2200px){
  /* Écrans 24-27" (1920-2160px) : on AGRANDIT légèrement la nav et le hero,
     MAIS on garde les blocs des sections (piliers) à leur taille d'origine.
     L'utilisateur a confirmé qu'ils étaient parfaits à --maxw:1080px. */
  .logo{font-size:23px}
  .logo .mk{width:30px;height:30px}
  .navlinks{gap:38px;font-size:14px}
  .navcta{font-size:13px;padding:13px 24px}
  .h1 .l{font-size:clamp(110px,7vw,140px)}
  .sub{font-size:19px;max-width:62ch}
  .vision-logo{font-size:clamp(84px,6vw,108px)}
  .vision h2{font-size:clamp(32px,2.2vw,42px);max-width:34ch}
  .footer-hook .sectitle{font-size:clamp(50px,3.5vw,64px)}
  /* IMPORTANT : on ne touche PAS à --maxw ni au padding des sections piliers ici */
}

@media(min-width:2201px){
  /* Très grands écrans (> 2200px : 4K, ultra-wide) : là on peut vraiment
     élargir le maxw, sinon ça fait beaucoup de vide. */
  :root{--maxw:1600px}
  /* On ne touche pas au padding de la nav : le flexbox de base.css gère déjà */
  .logo{font-size:24px}
  .logo .mk{width:32px;height:32px}
  .navlinks{gap:42px;font-size:14.5px}
  .navlinks a{font-size:14.5px}
  .navcta{font-size:13.5px;padding:14px 26px}
  header{max-width:1600px;margin:0 auto;padding-left:clamp(40px,4vw,80px);padding-right:clamp(40px,4vw,80px)}
  .h1 .l{font-size:clamp(120px,8vw,160px)}
  .sub{font-size:20px;max-width:65ch}
  .herobtns .btn{font-size:13.5px;padding:16px 28px}
  .vision-logo{font-size:clamp(96px,7vw,128px)}
  .vision h2{font-size:clamp(36px,2.5vw,48px);max-width:36ch}
  #consulting,#crypto,#invest{padding-left:clamp(40px,4vw,80px);padding-right:clamp(40px,4vw,80px)}
  .footer-hook,footer#footer .fgrid,footer#footer .fbottom{max-width:1600px;margin:0 auto;padding-left:clamp(40px,4vw,80px);padding-right:clamp(40px,4vw,80px)}
  .footer-hook .sectitle{font-size:clamp(58px,4vw,72px)}
}

/* ============================================================
   Section "Qui je suis" — encart personnel entre Vision et Piliers
   ============================================================ */
#about{
  padding:clamp(80px,12vh,140px) clamp(20px,5vw,64px);
  min-height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:2;
}
.about-inner{
  max-width:1280px;
  margin:0 auto;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:0;
  position:relative;
}
.about-text{
  position:relative;
  flex:0 0 480px;
  max-width:480px;
}
.about-signature{
  flex:1 0 100%;
  display:flex;
  justify-content:center;
  margin-top:30px;
}
.about-signature > span{
  display:inline-block;
  padding-top:24px;
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.08em;
  color:var(--ink);
  opacity:.85;
  position:relative;
}
.about-signature > span::before{
  content:"—";
  margin-right:10px;
  color:var(--v2);
}
.about-inner::before{
  content:"";
  position:absolute;
  top:-30px;
  left:24%;
  transform:translateX(-50%);
  width:1px;
  height:42px;
  background:linear-gradient(to bottom,transparent,var(--v2));
  opacity:.6;
}
.about-tag{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--v2);
  margin-bottom:24px;
  opacity:.9;
}
.about-title{
  font-size:clamp(28px,3.2vw,42px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0 0 30px;
  color:var(--ink);
}
.about-lead{
  font-size:clamp(15px,1.4vw,16.5px);
  line-height:1.75;
  color:var(--muted);
  margin:0 0 20px;
}
.about-lead:last-of-type{
  margin-bottom:32px;
}

/* === Portrait ASCII === */
.about-portrait{
  flex:0 0 auto;
  width:780px;
  height:760px;
  overflow:hidden;
  position:relative;
  margin-left:-80px;
}
.ascii-portrait{
  font-family:'JetBrains Mono','Courier New',Courier,monospace !important;
  font-size:5px;
  line-height:5px;
  letter-spacing:0;
  white-space:pre !important;
  word-wrap:normal;
  overflow-wrap:normal;
  word-break:keep-all;
  background:linear-gradient(135deg,#5b2cd9 0%,#7c3aff 10%,#9d5cff 20%,#c478ff 30%,#e090e8 40%,#ff8aab 50%,#ff7a6e 58%,#ff9b4f 66%,#ffb547 74%,#e8a850 82%,#f5c97a 90%,#ffe5b3 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  margin:0;
  padding:0;
  font-weight:700;
  user-select:none;
  filter:drop-shadow(0 0 40px rgba(157,92,255,0.4)) drop-shadow(0 0 80px rgba(255,150,90,0.2));
  display:block;
  tab-size:1;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(1);
  transform-origin:center center;
}

@media(max-width:1080px){
  .about-inner{
    flex-direction:column;
    gap:24px;
    max-width:760px;
    text-align:center;
    align-items:center;
  }
  .about-text{
    flex:0 0 auto;
    max-width:680px;
  }
  /* Sur mobile/tablette : portrait visible, plus petit */
  .about-portrait{
    display:block;
    width:100%;
    max-width:560px;
    height:440px;
    margin-left:0;
    overflow:hidden;
    position:relative;
  }
  .ascii-portrait{
    transform:translate(-50%,-50%) scale(0.72);
  }
  .about-signature{margin-top:0}
  .about-inner::before{left:50%}
}
@media(max-width:860px){
  #about{padding:50px 24px}
  .about-title{font-size:26px;margin-bottom:24px}
  .about-lead{font-size:15px;line-height:1.7}
  .about-portrait{max-width:500px;height:400px}
  .ascii-portrait{transform:translate(-50%,-50%) scale(0.64)}
}
@media(max-width:480px){
  #about{padding:40px 20px}
  .about-portrait{max-width:420px;height:340px}
  .ascii-portrait{transform:translate(-50%,-50%) scale(0.54)}
}