/* ============================================================
   page-index.css — CSS spécifique à index.html
   ============================================================ */

/* ─────────── HERO ─────────── */
#hero{background:var(--white);padding:80px 0 56px}
.hero-grid{display:grid;grid-template-columns:55% 45%;gap:56px;align-items:center}
.hero-h1{font-size:50px;font-weight:800;line-height:1.05;letter-spacing:-.025em;color:var(--anthracite)}
.hero-h1 span{color:var(--indigo)}
.hero-sub{font-size:18px;color:var(--g700);line-height:1.6;max-width:480px}
.hero-ctas{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
@media(max-width:768px){
  #hero{padding:56px 0 40px}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-h1{font-size:34px}
  .hero-sub{font-size:16px}
  .hero-illustration{display:none}
}

/* ── Illustration hero : réseau radial hub INITO + outils, histoire animée en boucle de 26s ──
   Les trains de particules sont désormais RÉCURRENTS : chaque connexion déjà établie continue
   d'envoyer des trains jusqu'au retournement de carte (pas un aller-retour unique). Pour éviter
   la saturation visuelle, les départs sont séquencés dans le temps entre connexions, comme des
   trains en gare : un seul trajet actif à la fois sur l'ensemble du réseau. Les outils intégrés
   depuis le plus longtemps (ERP/Email) profitent donc de plus de départs que les derniers arrivés.
   Pause "carte vierge" raccourcie une 2e fois (1.5s → 0.5s) : l'ERP réapparaît encore plus vite après le retournement. */
.hero-illustration{position:relative;aspect-ratio:480/340;perspective:1800px}
.flip-card{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:card-flip 26s linear infinite}
.flip-front,.flip-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#EEF2FF 0%,#E0E7FF 100%)}
.flip-front svg{display:block;width:100%;height:100%}
.flip-back{transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center}
.flip-logo-mark{width:64px;height:64px;border-radius:16px}
.flip-logo-word{font-size:40px}
.flip-tagline{font-size:15px;color:var(--g700);max-width:280px;line-height:1.5;
  opacity:0;clip-path:inset(0 100% 0 0);animation:tagline-reveal 26s linear infinite}
/* La tagline n'apparaît pas en même temps que le logo au retournement : elle se révèle en fondu,
   de gauche à droite (clip-path qui s'ouvre), une fois le retournement terminé (84.23% = fin du flip-out).
   Pas de fondu de sortie explicite : comme le logo, elle reste pleinement visible jusqu'à ce que le
   retournement suivant la fasse disparaître naturellement (backface-visibility), pas avant. */
@keyframes tagline-reveal{
  0%,84.23%{opacity:0;clip-path:inset(0 100% 0 0)}
  88.08%,100%{opacity:1;clip-path:inset(0 0% 0 0)}
}
@keyframes card-flip{
  0%,81.92%{transform:rotateY(0deg)}
  84.23%,95.77%{transform:rotateY(180deg)}
  98.08%,100%{transform:rotateY(360deg)}
}

/* Trait ondulant de fond : première chose qui se passe dans la boucle, se dessine de gauche à droite
   (stroke-dashoffset, longueur réelle du path ≈533, arrondie à 545) au lieu d'apparaître déjà présent,
   puis reste dessiné (immobile) jusqu'au redémarrage de la boucle suivante. */
.bg-wave{stroke-dasharray:545;stroke-dashoffset:545;animation:bg-wave-draw 26s linear infinite}
@keyframes bg-wave-draw{0%{stroke-dashoffset:545}3.08%,94.23%{stroke-dashoffset:0}95.38%,100%{stroke-dashoffset:545}}

/* Outils + hub : popup à leur instant précis, restent visibles, disparaissent avant le retournement
   (masqués par la carte pendant le flip et le hold sur le logo, donc l'écran est vierge au redémarrage) */
.pop-erp,.pop-email,.pop-hub,.pop-siteweb,.pop-crm,.pop-rs{
  transform-box:fill-box;transform-origin:center;opacity:0;
  animation-duration:26s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop-erp{0%,1.54%{opacity:0;transform:scale(.3)}3.46%,94.23%{opacity:1;transform:scale(1)}95.38%,100%{opacity:0}}
@keyframes pop-email{0%,4.23%{opacity:0;transform:scale(.3)}6.15%,94.23%{opacity:1;transform:scale(1)}95.38%,100%{opacity:0}}
@keyframes pop-hub{0%,6.92%{opacity:0;transform:scale(.3)}8.85%,94.23%{opacity:1;transform:scale(1)}95.38%,100%{opacity:0}}
@keyframes pop-siteweb{0%,22.31%{opacity:0;transform:scale(.3)}24.23%,94.23%{opacity:1;transform:scale(1)}95.38%,100%{opacity:0}}
@keyframes pop-crm{0%,25%{opacity:0;transform:scale(.3)}26.92%,94.23%{opacity:1;transform:scale(1)}95.38%,100%{opacity:0}}
@keyframes pop-rs{0%,46.15%{opacity:0;transform:scale(.3)}48.08%,94.23%{opacity:1;transform:scale(1)}95.38%,100%{opacity:0}}
/* Outils "fantômes" : popup l'un après l'autre (bulles, tailles variées) juste avant le retournement,
   reliés au hub par un trait discret, en second plan (opacité réduite), pas de particules */
.ghost-node{transform-box:fill-box;transform-origin:center;opacity:0;
  animation-duration:26s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
@keyframes ghost-1{0%,73.08%{opacity:0;transform:scale(.3)}75%,94.23%{opacity:1;transform:scale(1)}95.38%,100%{opacity:0}}
@keyframes ghost-2{0%,74.81%{opacity:0;transform:scale(.3)}76.73%,94.23%{opacity:1;transform:scale(1)}95.38%,100%{opacity:0}}
@keyframes ghost-3{0%,76.15%{opacity:0;transform:scale(.3)}78.08%,94.23%{opacity:1;transform:scale(1)}95.38%,100%{opacity:0}}
@keyframes ghost-4{0%,77.23%{opacity:0;transform:scale(.3)}79.15%,94.23%{opacity:1;transform:scale(1)}95.38%,100%{opacity:0}}
@keyframes ghost-5{0%,78.08%{opacity:0;transform:scale(.3)}80%,94.23%{opacity:1;transform:scale(1)}95.38%,100%{opacity:0}}
.ghost-1{animation-name:ghost-1}
.ghost-2{animation-name:ghost-2}
.ghost-3{animation-name:ghost-3}
.ghost-4{animation-name:ghost-4}
.ghost-5{animation-name:ghost-5}
.ghost-line{stroke-dasharray:4 6;stroke-linecap:round;opacity:0;
  animation-duration:26s;animation-iteration-count:infinite;animation-timing-function:ease}
@keyframes ghost-line-1{0%,73.08%{opacity:0}75%,94.23%{opacity:.4}95.38%,100%{opacity:0}}
@keyframes ghost-line-2{0%,74.81%{opacity:0}76.73%,94.23%{opacity:.4}95.38%,100%{opacity:0}}
@keyframes ghost-line-3{0%,76.15%{opacity:0}78.08%,94.23%{opacity:.4}95.38%,100%{opacity:0}}
@keyframes ghost-line-4{0%,77.23%{opacity:0}79.15%,94.23%{opacity:.4}95.38%,100%{opacity:0}}
@keyframes ghost-line-5{0%,78.08%{opacity:0}80%,94.23%{opacity:.4}95.38%,100%{opacity:0}}
.ghost-line-1{animation-name:ghost-line-1}
.ghost-line-2{animation-name:ghost-line-2}
.ghost-line-3{animation-name:ghost-line-3}
.ghost-line-4{animation-name:ghost-line-4}
.ghost-line-5{animation-name:ghost-line-5}
.pop-erp{animation-name:pop-erp}
.pop-email{animation-name:pop-email}
.pop-hub{animation-name:pop-hub}
.pop-siteweb{animation-name:pop-siteweb}
.pop-crm{animation-name:pop-crm}
.pop-rs{animation-name:pop-rs}

/* Traits : apparaissent une fois le nœud posé, glow statique (pas de sens de marche des pointillés) */
.tool-line{stroke-dasharray:5 7;stroke-linecap:round;opacity:0;filter:drop-shadow(0 0 2px rgba(99,102,241,.5));
  animation-duration:26s;animation-iteration-count:infinite;animation-timing-function:ease}
@keyframes line-erp{0%,9.62%{opacity:0}11.15%,94.23%{opacity:1}95.38%,100%{opacity:0}}
@keyframes line-email{0%,10.38%{opacity:0}11.92%,94.23%{opacity:1}95.38%,100%{opacity:0}}
@keyframes line-site{0%,24.23%{opacity:0}25.77%,94.23%{opacity:1}95.38%,100%{opacity:0}}
@keyframes line-crm{0%,26.92%{opacity:0}28.46%,94.23%{opacity:1}95.38%,100%{opacity:0}}
@keyframes line-rs{0%,48.08%{opacity:0}49.62%,94.23%{opacity:1}95.38%,100%{opacity:0}}
.line-erp{animation-name:line-erp}
.line-email{animation-name:line-email}
.line-site{animation-name:line-site}
.line-crm{animation-name:line-crm}
.line-rs{animation-name:line-rs}

/* Anneau "ping" : pulse en continu (visible seulement quand son nœud parent l'est) */
.ping{transform-box:fill-box;transform-origin:center}
@supports (offset-path: path("M0 0 L1 1")){
  .ping{animation:ping-pulse 1.6s ease-out infinite}
}
@keyframes ping-pulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.5);opacity:0}}

/* Pulsation séquentielle des 3 connecteurs du mark INITO, à chaque "départ de train" traité par le hub
   (un blip par occurrence des trajets ci-dessous, dans l'ordre chronologique) */
.hub-node{transform-box:fill-box;transform-origin:center;animation:hub-node-pulse 26s linear infinite}
@keyframes hub-node-pulse{
  0%,15.38%,17.31%,23.85%,25.77%,32.31%,34.23%,40.77%,42.69%,49.23%,51.15%,57.69%,59.62%,66.15%,68.08%,100%{transform:scale(1)}
  16.35%,24.81%,33.27%,41.73%,50.19%,58.65%,67.12%{transform:scale(1.3)}
}
/* Les traits entre les 3 nœuds du mark s'illuminent aux mêmes instants ("digestion" visible sur tout le logo) */
.hub-mark-path{animation:hub-mark-glow 26s linear infinite}
@keyframes hub-mark-glow{
  0%,15.38%,17.31%,23.85%,25.77%,32.31%,34.23%,40.77%,42.69%,49.23%,51.15%,57.69%,59.62%,66.15%,68.08%,100%{opacity:.5}
  16.35%,24.81%,33.27%,41.73%,50.19%,58.65%,67.12%{opacity:1}
}

/* Halo lumineux qui tourne sur la bordure du badge 24/7, en continu, pour signaler l'activité */
.badge-halo{stroke-dasharray:18 115;stroke-linecap:round;animation:badge-halo-spin 3s linear infinite}
@keyframes badge-halo-spin{to{stroke-dashoffset:-133}}

/* Particules : chaque trajet a plusieurs occurrences (départs successifs, séquencés dans le temps entre
   connexions pour qu'un seul train ne soit jamais actif que sur un trajet à la fois) */
.travel-dot{opacity:0}
@supports (offset-path: path("M0 0 L1 1")){
  .travel-dot{animation-duration:26s;animation-iteration-count:infinite;animation-timing-function:linear}
}
@keyframes d-erp-out{0%{offset-distance:0%;opacity:0}12.69%{offset-distance:0%;opacity:0}13.27%{opacity:1}14.81%{opacity:1}15.38%{offset-distance:100%;opacity:0}21.15%{offset-distance:0%;opacity:0}21.73%{opacity:1}23.27%{opacity:1}23.85%{offset-distance:100%;opacity:0}38.08%{offset-distance:0%;opacity:0}38.65%{opacity:1}40.19%{opacity:1}40.77%{offset-distance:100%;opacity:0}63.46%{offset-distance:0%;opacity:0}64.04%{opacity:1}65.58%{opacity:1}66.15%{offset-distance:100%;opacity:0}100%{offset-distance:100%;opacity:0}}
@keyframes d-email-in{0%{offset-distance:0%;opacity:0}17.31%{offset-distance:0%;opacity:0}17.88%{opacity:1}19.42%{opacity:1}20%{offset-distance:100%;opacity:0}25.77%{offset-distance:0%;opacity:0}26.35%{opacity:1}27.88%{opacity:1}28.46%{offset-distance:100%;opacity:0}42.69%{offset-distance:0%;opacity:0}43.27%{opacity:1}44.81%{opacity:1}45.38%{offset-distance:100%;opacity:0}68.08%{offset-distance:0%;opacity:0}68.65%{opacity:1}70.19%{opacity:1}70.77%{offset-distance:100%;opacity:0}100%{offset-distance:100%;opacity:0}}
@keyframes d-site-out{0%{offset-distance:0%;opacity:0}29.62%{offset-distance:0%;opacity:0}30.19%{opacity:1}31.73%{opacity:1}32.31%{offset-distance:100%;opacity:0}46.54%{offset-distance:0%;opacity:0}47.12%{opacity:1}48.65%{opacity:1}49.23%{offset-distance:100%;opacity:0}100%{offset-distance:100%;opacity:0}}
@keyframes d-crm-in{0%{offset-distance:0%;opacity:0}34.23%{offset-distance:0%;opacity:0}34.81%{opacity:1}36.35%{opacity:1}36.92%{offset-distance:100%;opacity:0}51.15%{offset-distance:0%;opacity:0}51.73%{opacity:1}53.27%{opacity:1}53.85%{offset-distance:100%;opacity:0}59.62%{offset-distance:0%;opacity:0}60.19%{opacity:1}61.73%{opacity:1}62.31%{offset-distance:100%;opacity:0}100%{offset-distance:100%;opacity:0}}
@keyframes d-rs-out{0%{offset-distance:0%;opacity:0}55%{offset-distance:0%;opacity:0}55.58%{opacity:1}57.12%{opacity:1}57.69%{offset-distance:100%;opacity:0}100%{offset-distance:100%;opacity:0}}
@supports (offset-path: path("M0 0 L1 1")){
  .d-erp-out{animation-name:d-erp-out}
  .d-email-in{animation-name:d-email-in}
  .d-site-out{animation-name:d-site-out}
  .d-crm-in{animation-name:d-crm-in}
  .d-rs-out{animation-name:d-rs-out}
}

@media(prefers-reduced-motion:reduce){
  .flip-card{animation:none}
  .pop-erp,.pop-email,.pop-hub,.pop-siteweb,.pop-crm,.pop-rs{animation:none;opacity:1;transform:scale(1)}
  .tool-line{animation:none;opacity:1}
  .ping,.hub-node,.hub-mark-path,.badge-halo,.travel-dot,.ghost-node,.ghost-line{animation:none}
  .flip-tagline{animation:none;opacity:1;clip-path:none}
  .bg-wave{animation:none;stroke-dashoffset:0}
}

/* ─────────── PROOF BAR ─────────── */
#proof-bar{background:var(--g50);padding:32px 0;border-top:1px solid var(--g100);border-bottom:1px solid var(--g100)}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.proof-item{padding:4px 24px;border-left:1px solid var(--g100);text-align:center}
.proof-item:first-child{border-left:none}
.proof-value{font-size:26px;font-weight:800;color:var(--indigo);letter-spacing:-.02em;line-height:1.1}
.proof-label{font-size:13px;font-weight:600;color:var(--anthracite);margin-top:4px}
.proof-detail{font-size:11px;color:var(--g400);margin-top:3px}
@media(max-width:768px){
  .proof-grid{grid-template-columns:1fr 1fr;gap:1px;background:var(--g100)}
  .proof-item{background:var(--g50);border-left:none;padding:20px 16px}
}

/* ─────────── DOULEURS ─────────── */
#douleurs{background:var(--white);padding:72px 0}
.douleurs-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:44px;gap:32px}
.douleurs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.douleur-card{background:var(--white);border-radius:14px;padding:32px 26px 26px;border:1px solid var(--g100);display:flex;flex-direction:column;gap:14px;position:relative;box-shadow:var(--shadow-card)}
.douleur-card.accent{background:linear-gradient(180deg,var(--indigo-50) 0%,var(--white) 60%);border:1.5px solid var(--indigo);box-shadow:0 12px 32px rgba(99,102,241,.12)}
.douleur-icon-wrap{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.douleur-icon-wrap.normal{background:var(--g50);color:var(--g700)}
.douleur-icon-wrap.accent{background:var(--indigo-50);color:var(--indigo)}
.douleur-header-row{display:flex;align-items:center;justify-content:space-between}
.douleur-num{font-size:36px;font-weight:800;letter-spacing:-.04em;line-height:1}
.douleur-num.normal{color:var(--g100)}
.douleur-num.accent{color:#C7D2FE}
.cost-badge{display:inline-flex;align-self:flex-start;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.02em;font-family:'Inter',monospace}
.cost-badge.red{background:#FEE2E2;color:#991B1B}
.cost-badge.amber{background:var(--amber-100);color:#92400E}
.douleur-title{font-weight:700;font-size:19px;line-height:1.25;color:var(--anthracite);letter-spacing:-.01em}
.douleur-text{font-size:14px;color:var(--g700);line-height:1.6}
.douleur-tag{border-top:1px solid var(--g100);padding-top:14px;margin-top:4px;font-size:11px;color:var(--g400);font-family:'Inter',monospace;letter-spacing:.02em}
.notre-diff-badge{position:absolute;top:-10px;right:20px;padding:4px 12px;background:var(--indigo);color:#fff;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:999px}
@media(max-width:768px){
  .douleurs-header{flex-direction:column;gap:8px}
  .douleurs-grid{grid-template-columns:1fr;gap:12px}
}

/* ─────────── PROMESSE ─────────── */
#promesse{background:var(--anthracite);padding:88px 0;text-align:center;position:relative;overflow:hidden}
.promesse-glow{position:absolute;top:-100px;right:-60px;width:360px;height:360px;background:radial-gradient(circle,rgba(99,102,241,.25) 0%,transparent 65%);pointer-events:none}
.promesse-inner{max-width:640px;margin:0 auto;position:relative}
.promesse-quote-mark{font-size:72px;color:var(--indigo);opacity:.4;line-height:.7;font-family:Georgia,serif;margin-bottom:16px}
.promesse-text{font-weight:500;line-height:1.5;color:#fff;font-style:italic;font-size:26px;margin-bottom:24px}
.promesse-text strong{font-style:normal;color:#818CF8}
.promesse-author{font-size:13px;color:var(--g400)}
@media(max-width:768px){.promesse-text{font-size:20px}}

/* ─────────── PROCESS ─────────── */
#process{background:var(--white);padding:72px 0}
.process-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:44px;gap:32px}
.process-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.process-line{position:absolute;top:36px;left:17%;right:17%;height:2px;background:repeating-linear-gradient(to right,#C7D2FE 0 6px,transparent 6px 12px);z-index:0}
.process-card{border-radius:14px;padding:28px 26px 26px;display:flex;flex-direction:column;gap:14px;position:relative;z-index:1}
.process-card.dark{background:var(--anthracite);border:none}
.process-card.light{background:var(--g50);border:1px solid var(--g100)}
.process-circle{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.process-circle.dark{background:var(--indigo);border:4px solid var(--anthracite);box-shadow:0 0 0 2px var(--indigo);color:#fff}
.process-circle.light{background:#fff;border:4px solid var(--g50);box-shadow:0 0 0 2px #C7D2FE;color:var(--indigo)}
.process-step-header{display:flex;align-items:center;justify-content:space-between}
.process-num{font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:1}
.process-title{font-weight:700;font-size:19px;line-height:1.25;letter-spacing:-.01em}
.process-title.dark{color:#fff;margin-top:4px}
.process-title.light{color:var(--anthracite);margin-top:4px}
.process-desc{font-size:13.5px;line-height:1.55}
.process-desc.dark{color:#C8C8DC}
.process-desc.light{color:var(--g700)}
.process-deliverables{padding-top:14px;margin-top:4px;display:flex;flex-direction:column;gap:7px}
.process-deliverables.dark{border-top:1px solid rgba(255,255,255,.08)}
.process-deliverables.light{border-top:1px solid var(--g100)}
.deliverable{font-size:12px;display:flex;align-items:center;gap:8px}
.deliverable.dark{color:#C8C8DC}
.deliverable.light{color:var(--g700)}
.duration-tag{position:absolute;top:16px;right:16px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.duration-tag.dark{color:#818CF8;background:rgba(99,102,241,.18);border:1px solid rgba(99,102,241,.3)}
.duration-tag.light{color:var(--g400);background:#fff;border:1px solid var(--g100)}
@media(max-width:768px){
  .process-header{flex-direction:column;gap:8px}
  .process-grid{grid-template-columns:1fr}
  .process-line{display:none}
}

/* ─────────── WORKFLOWS ─────────── */
#automatisations{background:var(--g50);padding:88px 0}
.wf-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:40px;gap:32px}
.wf-featured{background:var(--white);border-radius:16px;border:1px solid var(--g100);overflow:hidden;margin-bottom:16px;box-shadow:0 2px 12px rgba(99,102,241,.06)}
.wf-featured-grid{display:grid;grid-template-columns:50% 50%;min-height:360px}
.wf-featured-illus{background:var(--indigo-50);overflow:hidden}
.wf-featured-content{padding:40px;display:flex;flex-direction:column;gap:16px;justify-content:center}
.wf-featured-badges{display:flex;gap:8px;flex-wrap:wrap}
.wf-featured-title{font-size:28px;font-weight:700;color:var(--anthracite);letter-spacing:-.02em;line-height:1.15}
.wf-featured-desc{font-size:15px;color:var(--g700);line-height:1.65}
.wf-featured-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:4px}
.wf-stat-val{font-size:22px;font-weight:800;color:var(--amber);letter-spacing:-.02em;line-height:1}
.wf-stat-lbl{font-size:11px;color:var(--g400);margin-top:4px}
.wf-connect{font-size:12px;color:var(--g400);font-family:'Inter',monospace}
.wf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.wf-card{background:var(--white);border-radius:12px;border:1px solid var(--g100);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.wf-card:hover{box-shadow:0 8px 24px rgba(99,102,241,.1);transform:translateY(-2px)}
.wf-card-illus{height:140px;background:linear-gradient(135deg,var(--indigo-50) 0%,#E0E7FF 100%);overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative}
.wf-card-illus-dots{position:absolute;inset:0;background-image:radial-gradient(circle at 2px 2px,#C7D2FE 1px,transparent 0);background-size:14px 14px;opacity:.5}
.wf-card-body{padding:20px 22px;display:flex;flex-direction:column;gap:8px}
.wf-card-cat{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--g400)}
.wf-card-title{font-weight:700;font-size:16px;color:var(--anthracite);line-height:1.3}
.wf-card-gain{font-size:13px;color:var(--amber);font-weight:600}
.wf-card-plus{border-radius:12px;border:1.5px dashed var(--g200);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;background:transparent;min-height:240px}
.wf-plus-icon{width:44px;height:44px;border-radius:50%;background:var(--indigo-50);display:flex;align-items:center;justify-content:center;color:var(--indigo);font-size:22px;font-weight:300}
.wf-plus-title{font-size:14px;font-weight:600;color:var(--anthracite);text-align:center}
.wf-plus-desc{font-size:12px;color:var(--g700);text-align:center;max-width:200px}
.wf-footer{display:flex;justify-content:center;margin-top:32px}
@media(max-width:768px){
  .wf-header{flex-direction:column;gap:8px}
  .wf-featured-grid{grid-template-columns:1fr}
  .wf-featured-illus{height:200px}
  .wf-featured-content{padding:24px}
  .wf-featured-title{font-size:22px}
  .wf-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){.wf-grid{grid-template-columns:1fr}}

/* ─────────── CAS CLIENT ─────────── */
#cas-client{background:var(--white);padding:72px 0}
.cas-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.cas-text-side{display:flex;flex-direction:column;gap:16px}
.cas-problem{font-size:15px;color:var(--g700);line-height:1.65;max-width:380px}
.cas-dark-card{background:var(--anthracite);border-radius:16px;padding:40px 36px;display:flex;flex-direction:column;gap:24px;position:relative;overflow:hidden}
.cas-glow{position:absolute;top:-60px;right:-40px;width:220px;height:220px;background:radial-gradient(circle,rgba(99,102,241,.25) 0%,transparent 70%)}
.cas-results-label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#818CF8;position:relative}
.cas-results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative}
.cas-stat-val{font-weight:800;color:var(--amber);letter-spacing:-.02em;line-height:1;font-size:30px;white-space:nowrap}
.cas-stat-lbl{font-size:12px;color:var(--g400);line-height:1.3;margin-top:6px}
.cas-testimonial{border-top:1px solid rgba(255,255,255,.08);padding-top:20px;font-size:13px;color:#C8C8DC;line-height:1.6;position:relative;font-style:italic}
.cas-testimonial-author{font-size:11px;color:var(--g400);font-style:normal;margin-top:8px}
@media(max-width:768px){
  .cas-grid{grid-template-columns:1fr;gap:32px}
}

/* ─────────── SOUVERAINETE ─────────── */
#souverainete{background:var(--anthracite);padding:88px 0;position:relative;overflow:hidden}
.souv-glow{position:absolute;top:-80px;left:-60px;width:320px;height:320px;background:radial-gradient(circle,rgba(99,102,241,.2) 0%,transparent 65%)}
.souv-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;position:relative}
.souv-title{font-size:34px;font-weight:700;color:#fff;line-height:1.2;letter-spacing:-.02em}
.souv-title span{color:#818CF8}
.souv-desc{font-size:15px;color:var(--g400);line-height:1.7;max-width:440px}
.souv-options{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.souv-option{padding:16px 18px;border-radius:10px;background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.2);display:flex;gap:14px;align-items:center}
.souv-option-icon{color:#818CF8;flex-shrink:0}
.souv-option-title{font-weight:600;color:#fff;font-size:14px}
.souv-option-sub{font-size:12px;color:var(--g400);margin-top:2px}
.souv-link{font-size:14px;color:#818CF8;font-weight:600;text-decoration:none}
.souv-link:hover{color:#A5B4FC}
@media(max-width:768px){
  .souv-grid{grid-template-columns:1fr;gap:40px}
  .souv-title{font-size:26px}
  .souv-schema{display:none}
}

/* ─────────── JULIEN ─────────── */
#julien{background:var(--g50);padding:88px 0}
.julien-grid{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:center}
.julien-photo{width:100%;aspect-ratio:3/4;background:repeating-linear-gradient(-45deg,var(--g100),var(--g100) 1.5px,transparent 1.5px,transparent 10px);border:1.5px dashed var(--g200);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--g400);font-size:13px;text-align:center;padding:16px}
.julien-eyebrow{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--indigo)}
.julien-title{font-size:32px;font-weight:700;color:var(--anthracite);line-height:1.2;letter-spacing:-.02em;max-width:480px}
.julien-text{font-size:16px;color:var(--g700);line-height:1.7;max-width:520px}
.julien-link{font-size:14px;color:var(--indigo);font-weight:600;text-decoration:none}
.julien-link:hover{color:var(--indigo-d)}
@media(max-width:768px){
  .julien-grid{grid-template-columns:1fr;gap:32px}
  .julien-photo{aspect-ratio:16/9;max-height:200px}
  .julien-title{font-size:26px}
}

/* ─────────── OFFRES ─────────── */
#offres{background:var(--g50);padding:88px 0}
.offres-intro{margin-bottom:40px}
.offres-title{font-size:32px;font-weight:700;color:var(--anthracite);letter-spacing:-.01em;margin-bottom:12px}
.offres-sub{font-size:15px;color:var(--g700);max-width:520px}
.offre-row-label{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo);margin-bottom:14px}
.offre-row-a{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:36px}
.offre-row-b{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:24px}
.offre-card{background:var(--white);border-radius:12px;padding:28px;border:1px solid var(--g100);display:flex;flex-direction:column;gap:14px}
.offre-card-header{display:flex;align-items:flex-start;gap:16px}
.offre-icon{width:44px;height:44px;border-radius:10px;background:var(--indigo-50);display:flex;align-items:center;justify-content:center;color:var(--indigo);flex-shrink:0}
.offre-card-name{font-weight:700;font-size:17px;color:var(--anthracite)}
.offre-card-meta{font-size:13px;color:var(--g400);font-family:'Inter',monospace;margin-top:2px}
.offre-card-desc{font-size:13px;color:var(--g700);line-height:1.55}
.offre-card-note{font-size:12px;color:var(--g400);margin-top:4px}
.offre-card-featured{border:2px solid var(--indigo);box-shadow:var(--shadow-featured);position:relative}
.offre-featured-tag{position:absolute;top:-12px;right:16px}
.offre-price{display:flex;align-items:baseline;gap:6px}
.offre-price-val{font-size:26px;font-weight:800;color:var(--anthracite);letter-spacing:-.02em}
.offre-price-sub{font-size:12px;color:var(--g400)}

/* Strip abonnements */
.abonnements-strip{background:var(--white);border-radius:12px;border:1px solid var(--g100);padding:20px 28px;margin-top:0}
.abonnements-strip-title{font-size:12px;font-weight:600;color:var(--g700);margin-bottom:16px}
.abonnements-strip-title span{color:var(--indigo);font-weight:700}
.abonnements-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.abonnement-tier{padding:12px 20px;border-left:1px solid var(--g100);text-align:center}
.abonnement-tier:first-child{border-left:none}
.abonnement-tier.featured{background:var(--indigo-50)}
.abonnement-name{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--g400);margin-bottom:4px}
.abonnement-name.featured{color:var(--indigo)}
.abonnement-price{font-size:20px;font-weight:800;color:var(--anthracite);letter-spacing:-.02em;line-height:1}
.abonnement-price.featured{color:var(--indigo)}
.abonnement-scope{font-size:11px;color:var(--g400);margin-top:4px}
.abonnements-footer{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--g100)}
.abonnements-note{font-size:12px;color:var(--g400)}
.abonnements-link{font-size:12px;color:var(--indigo);font-weight:600;text-decoration:none}
.offre-reassurance{font-size:12px;color:var(--g400);text-align:center;margin-top:8px}
@media(max-width:768px){
  .offre-row-a{grid-template-columns:1fr;gap:12px}
  .offre-row-b{grid-template-columns:1fr;gap:12px}
  .abonnements-tiers{grid-template-columns:1fr;gap:1px;background:var(--g100)}
  .abonnement-tier{background:var(--white);border-left:none;padding:12px 16px}
}

/* ─────────── LEAD MAGNET ─────────── */
#veille{background:var(--indigo);padding:72px 0;text-align:center;position:relative;overflow:hidden}
.veille-glow{position:absolute;top:-100px;right:-100px;width:360px;height:360px;background:radial-gradient(circle,rgba(255,255,255,.15) 0%,transparent 65%)}
.veille-inner{max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:16px;align-items:center;position:relative}
.veille-title{font-size:30px;font-weight:700;color:#fff;line-height:1.3;letter-spacing:-.01em}
.veille-desc{font-size:15px;color:#E0E7FF;line-height:1.6}
.veille-value-badge{background:rgba(255,255,255,.15);color:#E0E7FF;border:1px solid rgba(255,255,255,.25);padding:5px 14px;border-radius:999px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.veille-form{display:flex;gap:10px;width:100%;max-width:380px;margin-top:4px}
.veille-input{flex:1;padding:12px 14px;border-radius:var(--radius-btn);border:none;font-family:'Inter',sans-serif;font-size:14px;color:var(--g700)}
.veille-note{font-size:12px;color:#C7D2FE}
@media(max-width:480px){.veille-form{flex-direction:column}.veille-title{font-size:24px}}

/* ─────────── CTA FINAL ─────────── */
#cta-final{background:var(--white);padding:96px 0;text-align:center}
.cta-final-inner{max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:24px;align-items:center}
.cta-final-title{font-size:38px;font-weight:700;color:var(--anthracite);letter-spacing:-.02em;line-height:1.15}
.cta-final-sub{font-size:16px;color:var(--g700);max-width:480px;line-height:1.6}
.cta-final-proofs{display:flex;gap:24px;flex-wrap:wrap;justify-content:center}
.proof-check{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--g700)}
.check-icon{color:#059669}
@media(max-width:480px){.cta-final-title{font-size:28px}}

/* ─────────── FAQ ─────────── */
#faq{background:var(--g50);padding:88px 0}
.faq-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:56px;align-items:start}
.faq-side-title{font-size:32px;font-weight:700;color:var(--anthracite);letter-spacing:-.01em;line-height:1.2;margin-bottom:16px}
.faq-side-desc{font-size:14px;color:var(--g700);line-height:1.65;margin-bottom:24px;max-width:320px}
.faq-list{display:flex;flex-direction:column;gap:8px}
.faq-item{background:var(--white);border-radius:12px;border:1px solid var(--g100);overflow:hidden}
.faq-question{padding:18px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;user-select:none}
.faq-question-text{font-size:15px;font-weight:600;color:var(--anthracite);line-height:1.4}
.faq-chevron{flex-shrink:0;transition:transform .2s;color:var(--indigo)}
.faq-item.open .faq-chevron{transform:rotate(180deg)}
.faq-answer{display:none;padding:0 24px 22px;font-size:14px;color:var(--g700);line-height:1.65}
.faq-item.open .faq-answer{display:block}
@media(max-width:768px){
  .faq-grid{grid-template-columns:1fr;gap:32px}
}