/* ============================================================
   SCALAB — pole.css
   Styles SPÉCIFIQUES aux pages des trois pôles :
   consulting.html, crypto.html, invest.html.
   Réutilise base.css pour l'identité globale.
   Variables --ph (couleur du pôle) injectées par chaque page.
   ============================================================ */

/* ---- Conteneur principal ---- */
.pole{position:relative;z-index:2}
.pole-hero{padding:160px clamp(20px,5vw,64px) 90px;max-width:1080px;margin:0 auto;position:relative}
.pole-hero .back{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;color:var(--muted);text-decoration:none;margin-bottom:40px;transition:.25s}
.pole-hero .back:hover{color:var(--ph,var(--v2))}
.pole-hero .back::before{content:"←";font-size:14px}
.pole-hero .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--ph,var(--v2));margin-bottom:22px;display:flex;align-items:center;gap:14px}
.pole-hero .eyebrow::before{content:"";width:40px;height:1px;background:var(--ph,var(--v2))}
.pole-hero h1{font-family:var(--disp);font-size:clamp(38px,6vw,82px);font-weight:800;letter-spacing:-.035em;line-height:1;max-width:16ch;margin-bottom:28px}
.pole-hero h1 .accent{color:var(--ph,var(--v2))}
.pole-hero .lead{font-size:clamp(17px,1.7vw,21px);line-height:1.55;color:#cfc9e6;max-width:62ch}
.pole-hero .lead strong{color:#fff;font-weight:600}

/* ---- Sections de contenu ---- */
.pole section:not(.hero-cosmos):not(.hero-editorial):not(.hero-readout){padding:clamp(50px,7vh,90px) clamp(20px,5vw,64px);max-width:1080px;margin:0 auto;position:relative}
.pole .sec-tag{font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--ph,var(--v2));margin-bottom:20px;display:flex;align-items:center;gap:14px}
.pole .sec-tag::before{content:"";width:40px;height:1px;background:var(--ph,var(--v2))}
.pole .sec-title{font-family:var(--disp);font-size:clamp(26px,3.4vw,42px);font-weight:800;letter-spacing:-.025em;line-height:1.08;margin-bottom:18px;max-width:22ch}
.pole .sec-intro{font-size:17px;line-height:1.65;color:#cfc9e6;max-width:62ch;margin-bottom:40px}
.pole .sec-intro strong{color:#fff;font-weight:600}

/* ---- Grille de cartes (services / valeurs) ---- */
.pole .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:30px}
.pole .card{border:1px solid var(--pl,var(--line));padding:28px 26px;position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(12,10,28,0.65),rgba(12,10,28,0.25));backdrop-filter:blur(3px);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);transition:.4s}
.pole .card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ph,var(--v2));opacity:.6;transition:.4s}
.pole .card:hover{transform:translateY(-3px);border-color:var(--ph,var(--v2))}
.pole .card:hover::before{opacity:1;width:4px}
.pole .card .ico{font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--ph,var(--v2));margin-bottom:14px;font-weight:600}
.pole .card h3{font-family:var(--disp);font-size:19px;font-weight:700;color:#fff;margin-bottom:10px;letter-spacing:-.005em;line-height:1.2}
.pole .card p{font-size:14.5px;line-height:1.6;color:#cfc9e6;margin:0}

/* ---- Chiffres clés ---- */
.pole .metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:30px}
.pole .metric{background:var(--bg2);padding:34px 28px;text-align:center}
.pole .metric .num{font-family:var(--mono);font-size:clamp(30px,4vw,46px);font-weight:700;letter-spacing:-.02em;color:var(--ph,var(--v2))}
.pole .metric .lbl{color:var(--muted);font-size:13px;margin-top:6px;line-height:1.4}

/* ---- Encart de partenariat (0x Scalab) ---- */
.pole .partner-box{margin-top:36px;padding:32px 34px;background:linear-gradient(110deg,rgba(160,92,255,.10),rgba(160,92,255,.02));border:1px solid var(--pl,rgba(160,92,255,.30));clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
.pole .partner-box .partner-label{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ph,var(--v2));margin-bottom:10px;font-weight:600}
.pole .partner-box h3{font-family:var(--disp);font-size:22px;font-weight:700;color:#fff;margin-bottom:10px;letter-spacing:-.01em}
.pole .partner-box p{font-size:15.5px;line-height:1.6;color:#cfc9e6;margin:0}

/* ---- Avertissement (Invest) ---- */
.pole .warning-box{margin-top:30px;padding:24px 28px;background:rgba(232,168,80,.06);border:1px solid rgba(232,168,80,.22);font-family:var(--mono);font-size:13px;line-height:1.7;color:#e8d4a8}
.pole .warning-box strong{color:#f0c27a;display:block;margin-bottom:6px;letter-spacing:.04em}

/* ---- Statut (Invest "bientôt disponible") ---- */
.pole .status-line{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13.5px;letter-spacing:.04em;color:var(--ph,var(--v2));font-weight:500;padding:10px 18px;background:rgba(232,168,80,.08);border:1px solid var(--pl,var(--line));margin-bottom:30px}
.pole .status-line i{width:8px;height:8px;background:var(--ph,var(--v2));box-shadow:0 0 12px var(--ph,var(--v2));animation:pulse 2s infinite;font-style:normal;border-radius:50%}

/* ---- Bloc CTA / Formulaire ---- */
.pole .cta-section{padding:clamp(60px,8vh,100px) clamp(20px,5vw,64px);max-width:880px;margin:30px auto;position:relative}
.pole .cta-section .sec-title{margin-bottom:14px}
.pole .cta-section .sec-intro{margin-bottom:32px}
.pole .contact-form{display:grid;gap:14px;background:linear-gradient(135deg,rgba(12,10,28,0.7),rgba(12,10,28,0.3));border:1px solid var(--pl,var(--line));padding:34px 32px;clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);position:relative;z-index:3}
.pole .contact-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pole .contact-form label{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;display:block;margin-bottom:6px}
.pole .contact-form input,
.pole .contact-form select,
.pole .contact-form textarea{width:100%;padding:13px 16px;border:1px solid var(--pl,var(--line));background:rgba(0,0,0,.4);color:var(--ink);font-family:var(--mono);font-size:14px;outline:none;transition:.3s;position:relative;z-index:3;pointer-events:auto;cursor:text}
.pole .contact-form select{cursor:pointer;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ph,var(--v2)) 50%),linear-gradient(135deg,var(--ph,var(--v2)) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.pole .contact-form textarea{resize:vertical;min-height:120px;font-family:var(--disp);font-size:15px;line-height:1.5}
.pole .contact-form input:focus,
.pole .contact-form select:focus,
.pole .contact-form textarea:focus{border-color:var(--ph,var(--v2));box-shadow:0 0 0 3px rgba(124,58,237,.12)}
.pole .contact-form .submit-row{margin-top:6px;display:flex;justify-content:flex-end;align-items:center;gap:18px;flex-wrap:wrap}
.pole .contact-form .btn-p{background:linear-gradient(100deg,var(--ph,var(--v1)),color-mix(in srgb,var(--ph,var(--v2)) 60%,#fff));color:#fff;border:none;cursor:pointer;font-family:var(--mono);padding:14px 28px;font-size:13.5px;letter-spacing:.04em;font-weight:600;transition:.3s;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);box-shadow:0 6px 30px rgba(124,58,237,.35)}
.pole .contact-form .btn-p:hover{transform:translateY(-2px);box-shadow:0 10px 40px rgba(124,58,237,.5)}
.pole .contact-form .btn-p[disabled]{opacity:.6;cursor:wait}
.pole .form-msg{font-family:var(--mono);font-size:12.5px;color:var(--ph,var(--v2));min-height:18px;transition:color .3s}
.pole .form-msg.error{color:#ff8a8a}
.pole .rgpd-mini{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}
.pole .rgpd-mini a{color:var(--ph,var(--accent));text-decoration:underline;text-underline-offset:2px}
/* honeypot anti-spam */
.pole .hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- Bloc préinscription Invest (réutilise le style email simple) ---- */
.pole .signup-invest{margin-top:30px;padding:30px 32px;background:linear-gradient(135deg,rgba(232,168,80,.06),rgba(232,168,80,.01));border:1px solid var(--pl,rgba(232,168,80,.22));clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
.pole .signup-invest .signup-head{margin-bottom:18px}
.pole .signup-invest .signup-title{display:block;font-weight:700;font-size:17px;color:#fff;letter-spacing:-.01em;margin-bottom:4px}
.pole .signup-invest .signup-sub{font-family:var(--mono);font-size:12.5px;color:var(--muted);letter-spacing:.02em}
.pole .signup-invest .form-line{display:flex;gap:12px;flex-wrap:wrap}
.pole .signup-invest input[type="email"]{flex:1;min-width:200px;padding:14px 18px;border:1px solid var(--pl,var(--line));background:rgba(0,0,0,.4);color:var(--ink);font-family:var(--mono);font-size:14px;outline:none;cursor:text;pointer-events:auto;position:relative;z-index:3}
.pole .signup-invest input[type="email"]:focus{border-color:var(--ph);box-shadow:0 0 0 3px rgba(232,168,80,.15)}
.pole .signup-invest button{font-family:var(--mono);padding:14px 26px;font-size:13.5px;letter-spacing:.04em;font-weight:600;background:linear-gradient(100deg,#c8801e,var(--ph));color:#fff;border:none;cursor:pointer;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:.3s;box-shadow:0 6px 30px rgba(232,168,80,.35)}
.pole .signup-invest button:hover{transform:translateY(-2px);box-shadow:0 10px 40px rgba(232,168,80,.5)}
.pole .signup-invest button[disabled]{opacity:.6;cursor:wait}

/* ---- Responsive ---- */
@media(max-width:760px){
  .pole-hero{padding-top:120px}
  .pole .contact-form .row2{grid-template-columns:1fr}
  .pole .partner-box,
  .pole .warning-box,
  .pole .signup-invest{padding:22px}
}


/* ============================================================
   HEROS REFONDUS — direction artistique forte par page
   ============================================================ */


/* ============================================================
   HEROS — direction artistique par page
   ============================================================ */

/* ---------- CONSULTING : horloge fine + lettres oscillantes ---------- */
.hero-editorial{min-height:96vh;padding:140px clamp(20px,5vw,80px) 80px;max-width:1400px;margin:0 auto;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.hero-editorial canvas.bp-grid{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero-editorial > *{position:relative;z-index:1}
.hero-editorial .back{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;color:var(--muted);text-decoration:none;transition:.25s;align-self:flex-start;margin-bottom:50px}
.hero-editorial .back:hover{color:var(--ph,var(--v2))}
.hero-editorial .back::before{content:"←";font-size:14px;margin-right:4px}
.hero-editorial .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--ph,var(--v2));margin-bottom:24px;display:flex;align-items:center;gap:14px}
.hero-editorial .eyebrow::before{content:"";width:60px;height:1px;background:var(--ph,var(--v2))}
.hero-editorial h1.editorial-title{font-family:var(--disp);font-size:clamp(44px,6.5vw,108px);font-weight:800;letter-spacing:-.035em;line-height:1;margin:0;color:#fff;max-width:14ch}
.hero-editorial h1.editorial-title em{font-style:normal;color:var(--ph,var(--v2));font-weight:800}
.hero-editorial h1.editorial-title .strike{position:relative;display:inline-block;color:rgba(255,255,255,.55);font-weight:600;transition:color 2.4s ease 1s}
.hero-editorial h1.editorial-title .strike::after{
  content:"";
  position:absolute;
  left:0;
  top:55%;
  width:100%;
  height:5px;
  background:rgba(255,255,255,.5);
  transform-origin:left center;
  transform:scaleX(0);
  animation:strikeDraw 2.2s cubic-bezier(.65,.05,.36,1) 1s forwards;
  border-radius:2px;
}
.hero-editorial h1.editorial-title .strike.struck{color:rgba(255,255,255,.35)}
@keyframes strikeDraw{
  0%   {transform:scaleX(0)}
  100% {transform:scaleX(1)}
}
.hero-editorial .meta-row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:60px;flex-wrap:wrap}
.hero-editorial .meta-lead{font-size:17px;line-height:1.55;color:#cfc9e6;max-width:48ch}
.hero-editorial .meta-side{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;text-align:right;line-height:1.8}
.hero-editorial .meta-side b{color:var(--ph,var(--v2));font-weight:600;display:block}

/* ---------- 0x SCALAB : constellation + molécule ---------- */
.hero-cosmos{min-height:100vh;padding:0;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.hero-cosmos canvas.constellation,
.hero-cosmos canvas.molecule{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-cosmos canvas.constellation{z-index:0}
.hero-cosmos canvas.molecule{z-index:1}
.hero-cosmos .cosmos-inner{position:relative;z-index:2;max-width:1100px;padding:140px clamp(20px,5vw,80px) 80px;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-cosmos .back{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;color:var(--muted);text-decoration:none;transition:.25s;align-self:flex-start;margin-bottom:50px}
.hero-cosmos .back:hover{color:var(--ph,var(--v2))}
.hero-cosmos .back::before{content:"←";font-size:14px;margin-right:4px}
.hero-cosmos .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.4em;text-transform:uppercase;color:var(--ph,var(--v2));margin-bottom:50px;opacity:0;animation:cosmosFade 1.4s ease .3s forwards}
.hero-cosmos h1.cosmos-title{font-family:var(--disp);font-size:clamp(40px,6vw,88px);font-weight:300;letter-spacing:-.025em;line-height:1.05;margin:0;color:#fff;max-width:18ch;opacity:0;animation:cosmosFade 1.6s ease .8s forwards}
.hero-cosmos h1.cosmos-title b{color:var(--ph,var(--v2));font-weight:600;font-style:italic}
.hero-cosmos .cosmos-lead{font-size:17px;line-height:1.6;color:#cfc9e6;max-width:54ch;margin-top:40px;opacity:0;animation:cosmosFade 1.6s ease 1.4s forwards}
.hero-cosmos .cosmos-lead strong{color:#fff;font-weight:500}
@keyframes cosmosFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ---------- INVEST : encart pleine largeur, titre intégré, graphique en fond ---------- */
.hero-readout{min-height:96vh;padding:140px clamp(20px,5vw,80px) 80px;max-width:1400px;margin:0 auto;display:flex;flex-direction:column;position:relative;overflow:hidden}
.hero-readout .back{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;color:var(--muted);text-decoration:none;transition:.25s;align-self:flex-start;margin-bottom:50px}
.hero-readout .back:hover{color:var(--ph,var(--v2))}
.hero-readout .back::before{content:"←";font-size:14px;margin-right:4px}

/* Le grand panneau qui contient tout */
.readout-panel-full{position:relative;flex:1;min-height:60vh;background:linear-gradient(160deg,rgba(20,15,42,0.85),rgba(12,10,28,0.65));border:1px solid var(--pl,rgba(232,168,80,.30));padding:46px clamp(28px,4vw,60px) 44px;clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);box-shadow:0 40px 100px rgba(232,168,80,.10), inset 0 0 80px rgba(232,168,80,.03);overflow:hidden;display:flex;flex-direction:column}
.readout-panel-full canvas.rp-bgchart{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.5;pointer-events:none}
.rp-content{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;gap:28px;min-width:0}
.rp-content .eyebrow{margin-top:0;margin-bottom:0}
.rp-content .rp-top{margin-bottom:6px}
.rp-content .readout-title{margin-top:-4px}
.rp-content .rp-bottom{margin-top:auto;padding-top:14px}

/* Bandeau du haut (label live + status) */
.rp-top{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.rp-label-row{display:flex;align-items:center;gap:14px}
.rp-label{font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;color:var(--ph,var(--v2));font-weight:600}
.rp-live{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:#7ee8a9;padding:4px 10px;background:rgba(126,232,169,.08);border:1px solid rgba(126,232,169,.3);font-weight:600;white-space:nowrap}
.rp-live i{width:6px;height:6px;border-radius:50%;background:#7ee8a9;animation:pulse 1.6s ease-in-out infinite;font-style:normal}
.rp-status{display:inline-flex;align-items:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:#e8a850;padding:4px 10px;background:rgba(232,168,80,.08);border:1px solid rgba(232,168,80,.35);font-weight:600;white-space:nowrap}
.rp-top .status-line{margin-bottom:0;display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--ph,var(--v2));padding:10px 18px;background:rgba(232,168,80,.08);border:1px solid var(--pl,var(--line))}
.rp-top .status-line i{width:8px;height:8px;background:var(--ph,var(--v2));box-shadow:0 0 12px var(--ph,var(--v2));animation:pulse 2s infinite;font-style:normal;border-radius:50%}

/* Titre au centre du panneau */
.readout-panel-full .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--ph,var(--v2));margin-bottom:18px;display:flex;align-items:center;gap:14px}
.readout-panel-full .eyebrow::before{content:"";width:60px;height:1px;background:var(--ph,var(--v2))}
.readout-title{font-family:var(--disp);font-size:clamp(48px,7vw,108px);font-weight:800;letter-spacing:-.035em;line-height:.96;margin:0;color:#fff;max-width:14ch;word-wrap:break-word;overflow-wrap:break-word}
.readout-title em{font-style:normal;color:var(--ph,var(--v2));font-weight:800}

/* Bas du panneau : lead + chiffres */
.rp-bottom{display:block}
.readout-lead{font-size:16px;line-height:1.6;color:#cfc9e6;max-width:54ch;margin:0}
.readout-lead strong{color:#fff;font-weight:500}

/* Paragraphe d'introduction (sous le panneau, sur fond neutre — meilleure lisibilité) */
.readout-intro{
  max-width:780px;
  margin:48px auto 0;
  padding:0 8px;
  font-size:clamp(15.5px,1.4vw,17px);
  line-height:1.75;
  color:#bcb6d5;
  text-align:center;
  position:relative;
  z-index:2;
}
.readout-intro strong{color:#fff;font-weight:500}
.rp-figures{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;min-width:0}
.rp-figure{display:flex;flex-direction:column;gap:6px;min-width:0}
.rp-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-v{font-family:var(--mono);font-size:clamp(18px,1.8vw,24px);font-weight:700;color:#fff;letter-spacing:-.005em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-v.matrix{color:#c89345}

/* Responsive Invest */
@media(max-width:880px){
  .rp-figures{grid-template-columns:1fr 1fr}
  .readout-intro{margin-top:36px;font-size:15px}
}
@media(max-width:540px){
  .readout-panel-full{padding:30px 22px}
}

/* Responsive */
@media(max-width:880px){
  .readout-grid{grid-template-columns:1fr;gap:50px}
}
@media(max-width:760px){
  .hero-editorial,.hero-cosmos .cosmos-inner,.hero-readout{padding-top:110px}
  .hero-editorial .meta-row{flex-direction:column;align-items:flex-start;gap:24px}
  .hero-editorial .meta-side{text-align:left}
  .readout-panel{padding:24px 22px}
}

/* ============================================================
   Grille de cartes : version 2×2 stricte
   ============================================================ */
.pole .cards.cards-2x2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:920px}
@media(max-width:680px){
  .pole .cards.cards-2x2{grid-template-columns:1fr}
}

/* ============================================================
   Timeline verticale moderne (méthodologie Consulting)
   ============================================================ */
.timeline{position:relative;padding-left:0;margin-top:50px;max-width:840px}
.timeline-line{position:absolute;left:13px;top:18px;bottom:18px;width:1px;background:rgba(109,139,255,.10);overflow:hidden}
.timeline-line-fill{position:absolute;left:0;top:0;width:100%;height:0;background:linear-gradient(to bottom,var(--ph,#6d8bff) 0%,rgba(109,139,255,.5) 100%);transition:height 3s cubic-bezier(.55,.05,.36,1) .2s;box-shadow:0 0 8px rgba(109,139,255,.4)}
.timeline.in-view .timeline-line-fill{height:100%}

.timeline-step{position:relative;padding:0 0 56px 56px;opacity:0;transform:translateY(14px);transition:opacity .9s ease, transform .9s ease}
.timeline-step:last-child{padding-bottom:0}
.timeline.in-view .timeline-step{opacity:1;transform:translateY(0)}
.timeline.in-view .timeline-step:nth-child(2){transition-delay:.4s}
.timeline.in-view .timeline-step:nth-child(3){transition-delay:.95s}
.timeline.in-view .timeline-step:nth-child(4){transition-delay:1.5s}
.timeline.in-view .timeline-step:nth-child(5){transition-delay:2.05s}
.timeline.in-view .timeline-step:nth-child(6){transition-delay:2.6s}

/* Point sur la ligne */
.timeline-dot{position:absolute;left:0;top:8px;width:28px;height:28px;border-radius:50%;background:var(--bg);border:1.5px solid rgba(109,139,255,.4);transition:border-color .5s ease, box-shadow .5s ease;z-index:1}
.timeline-dot::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--ph,#6d8bff);transform:scale(0);transition:transform .55s cubic-bezier(.55,.05,.36,1)}
.timeline.in-view .timeline-step:nth-child(2) .timeline-dot{border-color:var(--ph,#6d8bff);box-shadow:0 0 0 5px rgba(109,139,255,.10), 0 0 24px rgba(109,139,255,.45);transition-delay:.55s}
.timeline.in-view .timeline-step:nth-child(3) .timeline-dot{border-color:var(--ph,#6d8bff);box-shadow:0 0 0 5px rgba(109,139,255,.10), 0 0 24px rgba(109,139,255,.45);transition-delay:1.1s}
.timeline.in-view .timeline-step:nth-child(4) .timeline-dot{border-color:var(--ph,#6d8bff);box-shadow:0 0 0 5px rgba(109,139,255,.10), 0 0 24px rgba(109,139,255,.45);transition-delay:1.65s}
.timeline.in-view .timeline-step:nth-child(5) .timeline-dot{border-color:var(--ph,#6d8bff);box-shadow:0 0 0 5px rgba(109,139,255,.10), 0 0 24px rgba(109,139,255,.45);transition-delay:2.2s}
.timeline.in-view .timeline-step:nth-child(6) .timeline-dot{border-color:var(--ph,#6d8bff);box-shadow:0 0 0 5px rgba(109,139,255,.10), 0 0 24px rgba(109,139,255,.45);transition-delay:2.75s}
.timeline.in-view .timeline-step:nth-child(2) .timeline-dot::after{transition-delay:.55s;transform:scale(1)}
.timeline.in-view .timeline-step:nth-child(3) .timeline-dot::after{transition-delay:1.1s;transform:scale(1)}
.timeline.in-view .timeline-step:nth-child(4) .timeline-dot::after{transition-delay:1.65s;transform:scale(1)}
.timeline.in-view .timeline-step:nth-child(5) .timeline-dot::after{transition-delay:2.2s;transform:scale(1)}
.timeline.in-view .timeline-step:nth-child(6) .timeline-dot::after{transition-delay:2.75s;transform:scale(1)}

/* Contenu */
.timeline-content{padding-top:2px;position:relative}
.timeline-num{display:inline-flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;color:var(--ph,#6d8bff);font-weight:600;text-transform:uppercase;margin-bottom:14px;padding:6px 14px 6px 0}
.timeline-num::before{content:"";display:inline-block;width:24px;height:1px;background:var(--ph,#6d8bff);opacity:.6}
.timeline-title{font-family:var(--disp);font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-.01em;line-height:1.25;color:#fff;margin:0 0 14px;max-width:30ch}
.timeline-content p{font-size:16px;line-height:1.7;color:#cfc9e6;margin:0;max-width:62ch;font-weight:300}

/* Responsive */
@media(max-width:600px){
  .timeline-step{padding-left:48px;padding-bottom:42px}
  .timeline-content p{font-size:15px}
}

/* ============================================================
   RESPONSIVE FIXES : très petits écrans (320-380px)
   ============================================================ */
@media(max-width:380px){
  /* Heroes : padding réduit pour gagner de l'espace utile */
  .hero-editorial,.hero-cosmos .cosmos-inner,.hero-readout{padding-left:16px;padding-right:16px}

  /* Titres : tailles minimums pour éviter coupures de mots */
  .hero-editorial h1.editorial-title{font-size:34px;line-height:1.02}
  .hero-cosmos h1.cosmos-title{font-size:30px;max-width:14ch}
  .readout-title{font-size:34px;line-height:1.02}

  /* Encart Invest : ne déborde plus, padding plus serré */
  .readout-panel-full{padding:24px 18px;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
  .rp-content{gap:18px}
  .rp-top{flex-direction:column;align-items:flex-start;gap:10px}
  .rp-figures{grid-template-columns:1fr;gap:12px}
  .rp-v{font-size:18px}

  /* Strike sur Consulting : ne déborde pas */
  .hero-editorial h1.editorial-title .strike::after{height:3px}

  /* Cards : padding réduit */
  .pole .card{padding:22px 20px}
}

/* ============================================================
   RESPONSIVE FIXES : tablette portrait à laptop (640-1024px)
   Le contenu doit mieux remplir l'espace sans rester tassé à gauche
   ============================================================ */
@media(min-width:640px) and (max-width:1024px){
  .hero-editorial,.hero-readout{max-width:880px;padding-left:clamp(28px,4vw,48px);padding-right:clamp(28px,4vw,48px)}
  .hero-cosmos .cosmos-inner{max-width:760px}
  /* Titres : tailles plus douces pour cette gamme */
  .hero-editorial h1.editorial-title{font-size:clamp(48px,7vw,82px)}
  .readout-title{font-size:clamp(44px,6.5vw,72px)}
}

/* ============================================================
   RESPONSIVE FIXES : très grands écrans (1800px+)
   Le contenu doit grossir et se centrer correctement
   ============================================================ */
@media(min-width:1800px) and (max-width:2200px){
  /* Écrans 24-27" : on grossit juste les titres pour qu'ils profitent de l'écran,
     MAIS on conserve la largeur d'origine des sections (pas de --maxw modifié). */
  .hero-editorial h1.editorial-title{font-size:clamp(96px,6vw,118px)}
  .hero-cosmos h1.cosmos-title{font-size:clamp(80px,5.5vw,104px)}
  .readout-title{font-size:clamp(96px,6vw,118px)}
  .pole-hero .lead,.cosmos-lead,.readout-lead,.hero-editorial .meta-lead{font-size:18px}
}

@media(min-width:2201px){
  /* Très grands écrans (4K, ultra-wide) : élargir pour combler le vide */
  .pole-hero,.hero-editorial,.hero-readout{max-width:1600px}
  .hero-cosmos .cosmos-inner{max-width:1280px}
  /* On exclut les heros pleine largeur : ils doivent garder 100vw pour leurs canvas */
  .pole section:not(.hero-cosmos):not(.hero-editorial):not(.hero-readout),.pole .cta-section{max-width:1400px}
  .hero-editorial h1.editorial-title{font-size:clamp(108px,7vw,140px)}
  .hero-cosmos h1.cosmos-title{font-size:clamp(88px,6vw,120px)}
  .readout-title{font-size:clamp(108px,7vw,140px)}
  .pole-hero .lead,.cosmos-lead,.readout-lead,.hero-editorial .meta-lead{font-size:19px}
}