/* ══════════════════════════════════════════════════════════════════
   site-2026.css — design system partagé des PAGES DE SITE mARTketing
   (Archivo). Reprend les tokens/composants validés sur la home refaite.
   Namespace neutre : réutilisable sur systeme-art, gohighlevel, coachs…
   ══════════════════════════════════════════════════════════════════ */
:root{
  --ink:#17160f; --paper:#faf8f1; --paper2:#f3f1e8; --neon:#e4ff00; --blue:#2836ff;
  --dark:#0c0c0a; --dark2:#100f0b; --blue-soft:#eef1f8; --accent:#b4420f;
  --border:rgba(23,22,15,.13);
  --ff:'Archivo',sans-serif; --ff-serif:'Spectral',serif; --ff-mono:'Space Mono',monospace; --ff-hand:'Kalam',cursive;
}
*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{background:var(--paper); color:var(--ink); font-family:var(--ff); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
a{color:var(--blue); text-decoration:none;}
a:hover{color:var(--ink);}
img{max-width:100%; display:block;}
::selection{background:var(--neon); color:var(--ink);}

/* ── PAGE WRAPPER + grille millimétrée ── */
.page{position:relative; z-index:2; min-height:100%; background:var(--paper); overflow:hidden; padding:44px 6vw 0;}
.page::before{content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(rgba(23,22,15,.034) 1px, transparent 1px), linear-gradient(90deg, rgba(23,22,15,.034) 1px, transparent 1px);
  background-size:34px 34px;}
.wrap{position:relative; z-index:1; max-width:1160px; margin:0 auto;}

/* ── NAV + MÉGA-MENU ── */
.nav{position:relative; z-index:60; display:flex; align-items:center; justify-content:space-between; gap:24px; padding-bottom:30px;}
.nav-logo{display:flex; align-items:center; flex-shrink:0;}
.nav-logo img{height:30px; width:auto;}
.nav-links{display:flex; align-items:center; gap:26px; font-family:var(--ff-mono); font-size:13px; letter-spacing:.03em; color:var(--ink);}
.nav-item{position:static; padding-bottom:30px; margin-bottom:-30px;}
.nav-trigger{display:flex; align-items:center; gap:8px; cursor:pointer; padding:6px 0; color:var(--ink)!important; border-bottom:2px solid transparent; transition:border-color .18s;}
.nav-item:hover .nav-trigger{border-color:var(--neon);}
.nav-trigger .dt{font-size:9px; color:rgba(23,22,15,.28); transition:color .18s;}
.nav-item:hover .nav-trigger .dt{color:var(--blue);}
.nav-links>a:not(.nav-cta){color:var(--ink)!important; padding:6px 0; border-bottom:2px solid transparent; transition:border-color .18s;}
.nav-links>a:not(.nav-cta):hover{border-color:var(--neon);}
.nav-cta{background:var(--dark2); color:#fff!important; padding:13px 22px; border-radius:3px; border:0!important; transition:transform .18s; white-space:nowrap;}
.nav-cta:hover{transform:translateY(-2px);}

/* méga-panneaux : pleine largeur nav, ouverture au survol (CSS pur) */
.mega{position:absolute; top:calc(100% - 30px); left:0; right:0; z-index:70; padding-top:30px; display:none;}
.nav-item:hover>.mega{display:block;}
/* garde-fou : jamais laisser un white-space:nowrap hérité gonfler les colonnes de grille du méga */
.mega{white-space:normal;}
.mega-inner>*{min-width:0;}
.mega-inner{background:#fffdf3; border:1px solid rgba(23,22,15,.16); border-top:4px solid var(--neon); border-radius:0 0 5px 5px; box-shadow:0 26px 50px -18px rgba(23,22,15,.3); display:grid; overflow:hidden;}
.mega-inner a{color:var(--ink);}
/* colonne sombre commune */
.mega-dark{padding:34px 30px 32px; background:var(--dark2); display:flex; flex-direction:column;}
.mega-dark .k{font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--neon); margin-bottom:16px;}
.mega-dark .t{font-family:var(--ff-serif); font-style:italic; font-size:25px; line-height:1.18; color:#fff; margin-bottom:12px;}
.mega-dark p{margin:0 0 22px; font-size:14px; line-height:1.55; color:rgba(255,255,255,.7);}
.mega-dark .foot{margin-top:auto; display:flex; flex-direction:column; gap:12px; align-items:flex-start;}
.mega-dark .cta-neon{background:var(--neon); color:var(--dark2)!important; text-align:center; align-self:stretch; font-weight:700; font-size:14.5px; padding:13px; border-radius:3px; transition:transform .18s;}
.mega-dark .cta-neon:hover{transform:translateY(-2px);}
.mega-dark .cta-ghost{font-family:var(--ff-mono); font-size:12px; color:rgba(255,255,255,.75)!important;}
.mega-dark .cta-ghost:hover{color:var(--neon)!important;}
/* A.R.T. : 3 lettres + carte dark */
.mega-art .mega-inner{grid-template-columns:1fr 1fr 1fr .9fr;}
.mega-step{padding:34px 30px 32px; border-right:1px solid rgba(23,22,15,.12); display:block; transition:background .15s;}
.mega-step:hover{background:rgba(228,255,0,.13);}
.mega-step .badge{position:relative; display:inline-block; margin-bottom:16px;}
.mega-step .badge .disc{position:absolute; top:6px; left:4px; width:40px; height:40px; border-radius:50%; background:var(--neon);}
.mega-step .badge .ltr{position:relative; font-weight:900; font-size:58px; line-height:.8; letter-spacing:-.04em; color:var(--ink);}
.mega-step .tt{font-weight:800; font-size:19px; letter-spacing:-.01em; color:var(--ink); margin-bottom:10px;}
.mega-step .tt span{font-family:var(--ff-mono); font-weight:400; font-size:11px; color:rgba(23,22,15,.4); margin-left:8px;}
.mega-step p{margin:0; font-size:14.5px; line-height:1.55; color:rgba(23,22,15,.68);}
/* Pour qui : 4 profils */
.mega-qui .mega-inner{grid-template-columns:repeat(4,1fr);}
.mega-prof{padding:32px 28px; border-right:1px solid rgba(23,22,15,.12); display:flex; flex-direction:column; transition:background .15s;}
.mega-prof:last-child{border-right:0;}
.mega-prof:hover{background:rgba(228,255,0,.13);}
.mega-prof .hd{display:flex; align-items:baseline; gap:10px; margin-bottom:12px;}
.mega-prof .hd .nm{font-weight:800; font-size:19px; letter-spacing:-.01em; color:var(--ink);}
.mega-prof.soon .hd .nm{color:rgba(23,22,15,.5);}
.mega-prof .tag{font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(23,22,15,.4); border:1px solid rgba(23,22,15,.2); padding:3px 7px;}
.mega-prof p{margin:0 0 18px; font-size:14.5px; line-height:1.55; color:rgba(23,22,15,.66);}
.mega-prof .go{margin-top:auto; font-weight:700; font-size:14.5px; color:var(--ink); border-bottom:2px solid var(--neon); padding-bottom:2px; align-self:flex-start;}
/* Mes programmes : intro + 6 paliers + carte dark */
.mega-prog .mega-inner{grid-template-columns:.72fr 1.6fr .85fr;}
.mega-prog .intro{padding:34px 30px; border-right:1px solid rgba(23,22,15,.12);}
.mega-prog .intro .hh{font-family:var(--ff-hand); font-weight:700; font-size:26px; line-height:1.2; color:var(--ink);}
.mega-prog .intro .ss{font-family:var(--ff-mono); font-size:11px; line-height:1.7; color:rgba(23,22,15,.5); margin-top:20px;}
.mega-row{display:grid; grid-template-columns:42px 1fr auto; gap:18px; align-items:center; padding:15px 26px; border-bottom:1px solid rgba(23,22,15,.09); transition:background .15s;}
.mega-row:hover{background:rgba(228,255,0,.15);}
.mega-row .num{font-family:var(--ff-mono); font-size:12px; color:rgba(23,22,15,.35);}
.mega-row .nm{display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; color:var(--ink);}
.mega-row .vedette{background:var(--dark2); color:var(--neon); font-family:var(--ff-mono); font-size:9px; letter-spacing:.16em; padding:3px 7px;}
.mega-row .sub{display:block; font-size:13.5px; color:rgba(23,22,15,.6); margin-top:3px;}
.mega-row .pr{font-family:var(--ff-hand); font-weight:700; font-size:17px; color:var(--ink);}
/* GoHighLevel : grille modules + carte dark */
.mega-ghl .mega-inner{grid-template-columns:1fr .62fr;}
.mega-ghl .body{padding:32px 30px;}
.mega-ghl .kv{display:flex; align-items:center; gap:12px; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--blue); margin-bottom:14px;}
.mega-ghl .kv span{width:6px; height:6px; background:var(--blue);}
.mega-ghl .lead{font-family:var(--ff-serif); font-style:italic; font-size:30px; line-height:1.14; color:var(--ink); margin-bottom:24px;}
.mega-mods{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.mega-mod{border:1px solid rgba(23,22,15,.14); border-radius:3px; padding:13px 14px; display:block; transition:background .15s,border-color .15s;}
.mega-mod:hover{background:rgba(228,255,0,.16); border-color:var(--ink);}
.mega-mod .n{display:block; font-weight:700; font-size:14px; color:var(--ink);}
.mega-mod .r{display:block; font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(23,22,15,.45); margin-top:5px;}
.mega-ghl .mega-dark .t{font-size:34px; line-height:1.1;}

/* MOBILE : méga-menus off, le trigger devient un simple lien vers sa page */
@media (max-width:1000px){
  .nav{flex-wrap:wrap;}
  .nav-links{gap:18px 20px; flex-wrap:wrap; font-size:12px;}
  .mega{display:none!important;}
  .nav-trigger .dt{display:none;}
}

/* ── TYPO helpers ── */
.hl{background:var(--neon); padding:0 8px; -webkit-box-decoration-break:clone; box-decoration-break:clone;}
.ser{font-family:var(--ff-serif); font-style:italic; font-weight:500; letter-spacing:-.01em;}
.h-xl{margin:0; font-weight:900; font-size:clamp(52px,6.6vw,94px); line-height:.9; letter-spacing:-.04em; color:var(--ink);}
.h2{margin:0; font-weight:900; font-size:clamp(44px,6vw,84px); line-height:.92; letter-spacing:-.04em; color:var(--ink);}
.lead{font-size:20px; line-height:1.6; color:rgba(23,22,15,.78); text-wrap:pretty;}
.lead strong{font-weight:700; color:var(--ink);}

/* ── EYEBROW section ── */
.eyebrow{display:flex; align-items:center; gap:14px; font-family:var(--ff-mono); font-size:13px; letter-spacing:.26em; text-transform:uppercase; color:var(--blue); margin-bottom:30px;}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--blue); flex-shrink:0;}
.eyebrow .bar{width:26px; height:1px; background:var(--blue); flex-shrink:0;}
.eyebrow.center{justify-content:center;}
.eyebrow.center .bar{width:40px;}
.eyebrow.neon{color:var(--neon);}
.eyebrow.neon .dot{background:var(--neon);} .eyebrow.neon .bar{background:rgba(228,255,0,.5);}

/* ── section header (titre + chapô 2 col) ── */
.sec{padding:100px 0 96px;}
.sec-head{display:grid; grid-template-columns:1.15fr .85fr; gap:50px; align-items:end; margin-bottom:60px;}
.sec-head .lead{margin:0 0 6px;}

/* ── BOUTONS ── */
.btn-neon{display:inline-block; background:var(--neon); color:var(--dark2); font-weight:700; font-size:18px; padding:18px 30px; border-radius:3px; box-shadow:6px 7px 0 rgba(23,22,15,.16); transition:transform .16s, box-shadow .16s;}
.btn-neon:hover{transform:translate(-1px,-2px); box-shadow:8px 10px 0 rgba(23,22,15,.22); color:var(--dark2);}
.btn-dark{display:inline-block; background:var(--dark2); color:#fff; font-weight:700; font-size:17px; padding:16px 28px; border-radius:3px; transition:transform .18s;}
.btn-dark:hover{transform:translateY(-2px); color:#fff;}
.link-under{font-weight:700; font-size:16px; color:var(--ink); border-bottom:2px solid rgba(23,22,15,.18); padding-bottom:3px; transition:border-color .16s;}
.link-under:hover{border-color:var(--neon); color:var(--ink);}
.hand{font-family:var(--ff-hand); font-weight:700; font-size:22px; color:var(--blue); line-height:1.15;}
.microcopy{font-family:var(--ff-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(23,22,15,.5);}

/* ── BANDE pleine largeur ── */
.band{position:relative; z-index:1; margin:0 -6vw; padding:96px 6vw;}
.band-inner{max-width:1160px; margin:0 auto;}
.band.dark{background:var(--dark); color:#fff;}
.band.blue{background:var(--blue-soft);}

/* ── STATS ── */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:0;}
.stat{padding:0 32px; border-left:1px solid rgba(255,255,255,.12);}
.band.dark .stat .v{font-weight:900; font-size:clamp(44px,5vw,72px); line-height:1; letter-spacing:-.04em; color:var(--neon);}
.band.dark .stat .l{font-size:16px; color:rgba(255,255,255,.72); margin-top:14px;}

/* ── PERSONA / AVATAR cards ── */
.persona-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.persona{position:relative; background:#fff; border:1px solid var(--border); border-radius:5px; overflow:hidden; box-shadow:8px 12px 0 rgba(23,22,15,.05); display:flex; flex-direction:column;}
.persona-photo{position:relative; aspect-ratio:4/3; background:#d9dae2;}
.persona-photo img{width:100%; height:100%; object-fit:cover;}
.persona-photo.soon img{filter:grayscale(100%); opacity:.7;}
.persona-num{position:absolute; top:-10px; left:20px; z-index:2; background:var(--neon); color:var(--dark2); font-family:var(--ff-mono); font-size:11px; letter-spacing:.16em; padding:5px 10px;}
.persona-body{padding:26px 24px; display:flex; flex-direction:column; flex:1;}
.persona-body .kick{font-family:var(--ff-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(23,22,15,.5); margin-bottom:12px;}
.persona-body h3{margin:0 0 12px; font-weight:800; font-size:24px; letter-spacing:-.02em; color:var(--ink); text-transform:lowercase;}
.persona-body p{margin:0 0 22px; font-size:15px; line-height:1.5; color:rgba(23,22,15,.7); flex:1;}
.persona-body a{font-weight:700; font-size:15px; color:var(--ink);}
.persona-body a:hover{color:var(--blue);}

/* ── VS grid (comparatif 2 col) ── */
.vs{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--ink); border-radius:5px; overflow:hidden;}
.vs-col{padding:52px 48px;}
.vs-col.neg{background:var(--paper2); border-right:1px solid var(--ink);}
.vs-col.pos{background:#fff;}
.vs-kick{font-family:var(--ff-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:22px;}
.vs-col.neg .vs-kick{color:rgba(23,22,15,.5);}
.vs-col.pos .vs-kick{color:var(--blue);}
.vs-h{font-weight:900; font-size:clamp(30px,3.4vw,40px); color:var(--ink); margin-bottom:24px; letter-spacing:-.025em; text-transform:lowercase; line-height:1.02;}
.vs-list{display:flex; flex-direction:column; gap:14px;}
.vs-item{display:flex; gap:12px; align-items:baseline;}
.vs-item p{margin:0; font-size:17px; line-height:1.5; color:rgba(23,22,15,.82);}
.vs-item .x{font-family:var(--ff-serif); font-style:italic; font-size:20px; color:rgba(23,22,15,.4); flex-shrink:0; line-height:1;}
.check{width:18px; height:18px; flex-shrink:0; margin-top:3px;}

/* ── STEPS / phases pleine largeur ── */
.steps{display:flex; flex-direction:column;}
.step{display:grid; grid-template-columns:clamp(90px,12vw,150px) 1fr; gap:clamp(24px,4vw,56px); padding:44px 0; align-items:start; border-top:1px solid var(--border);}
.step:first-child{border-top:none; padding-top:16px;}
.step-mark{display:inline-flex; align-items:center; justify-content:center; font-weight:900; font-size:clamp(88px,12vw,150px); line-height:.82; letter-spacing:-.05em; color:var(--ink); aspect-ratio:1; border-radius:6px;}
.step-body{padding-top:12px;}
.step-meta{font-family:var(--ff-mono); font-size:13px; color:var(--blue); letter-spacing:.14em; text-transform:uppercase; margin-bottom:18px;}
.step-body .desc{font-size:19px; color:rgba(23,22,15,.8); line-height:1.55; margin:0 0 18px; max-width:720px;}
.step-body .kpi{font-family:var(--ff-serif); font-style:italic; font-size:18px; color:var(--ink); line-height:1.5; margin:0; max-width:720px;}

/* ── FIT / NON-FIT ── */
.fit-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px;}
.fit-card{padding:40px 36px; border:1px solid var(--ink); border-radius:5px;}
.fit-card.yes{background:#fff;} .fit-card.no{background:var(--paper2);}
.fit-kick{font-family:var(--ff-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:18px;}
.fit-card.yes .fit-kick{color:var(--blue);} .fit-card.no .fit-kick{color:rgba(23,22,15,.5);}
.fit-h{font-weight:900; font-size:clamp(26px,3vw,32px); color:var(--ink); margin-bottom:24px; letter-spacing:-.025em; text-transform:lowercase;}
.fit-note{margin-top:24px; padding:16px 20px; background:#fff; border:1px dashed var(--blue); border-radius:4px;}
.fit-note p{font-family:var(--ff-serif); font-style:italic; font-size:16px; color:rgba(23,22,15,.72); line-height:1.55; margin:0;}
.fit-note strong{color:var(--ink); font-weight:600; font-style:normal;}

/* ── FAQ accordéon ── */
.faq{max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:14px;}
.faq details{background:#fff; border:1px solid var(--border); border-radius:5px; box-shadow:6px 8px 0 rgba(23,22,15,.05); overflow:hidden;}
.faq summary{list-style:none; cursor:pointer; padding:24px 28px; font-weight:700; font-size:20px; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+'; font-family:var(--ff-mono); font-size:24px; color:var(--blue); transition:transform .2s;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details > div{padding:0 28px 26px; font-family:var(--ff-serif); font-size:18px; line-height:1.7; color:rgba(23,22,15,.78);}

/* ── CALENDRIER (façade GHL) ── */
.calbox{position:relative; min-height:636px; border:1px solid var(--ink); border-radius:5px; background:var(--paper); overflow:hidden;}
.calbox iframe{width:100%; border:none; overflow:hidden; display:block; min-height:700px; margin-top:-64px;}
.cal-shimmer{position:absolute; inset:0; background:linear-gradient(110deg,var(--paper) 0%,var(--paper2) 50%,var(--paper) 100%); background-size:200% 100%; animation:cal-shimmer 2s linear infinite;}
@keyframes cal-shimmer{0%{background-position:200% 0} 100%{background-position:-200% 0}}

/* ── FOOTER (partagé, avec stabilo) ── */
.site-footer{position:fixed; left:0; right:0; bottom:0; z-index:1; width:100%; background:var(--dark); border-top:6px solid var(--neon); padding:84px 6vw 40px; color:#fff;}
@media(max-width:760px){ .site-footer{position:static;} }
.foot-strokes-wrap{position:absolute; top:0; left:0; right:0; transform:translateY(-46%); pointer-events:none; text-align:center;}
.foot-strokes{width:1300px; max-width:88%;}
.foot-grid{max-width:1160px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1.4fr 1fr; gap:40px;}
.foot-logo img{height:34px; width:auto; margin-bottom:26px;}
.foot-tag{font-family:var(--ff-serif); font-style:italic; font-size:22px; line-height:1.4; color:rgba(255,255,255,.85); margin:0;}
.foot-h{font-family:var(--ff-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--neon); margin-bottom:22px;}
.foot-col{display:flex; flex-direction:column; gap:13px; font-family:var(--ff-mono); font-size:13.5px;}
.foot-col a{color:rgba(255,255,255,.82);}
.foot-col a:hover{color:var(--neon);}
.foot-col .soon{color:rgba(255,255,255,.4);} .foot-col .soon span{font-size:10px; letter-spacing:.14em;}
.foot-plat{display:grid; grid-template-columns:1fr 1fr; gap:13px 24px;}
.foot-bottom{max-width:1160px; margin:64px auto 0; padding-top:26px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-family:var(--ff-mono); font-size:12px; letter-spacing:.05em; color:rgba(255,255,255,.45);}

/* ── RESPONSIVE ── */
@media (max-width:900px){
  .sec-head{grid-template-columns:1fr; gap:24px; margin-bottom:48px;}
  .stats{grid-template-columns:1fr 1fr; gap:40px 0;}
  .stat{padding:0 24px;}
  .persona-grid{grid-template-columns:1fr 1fr;}
  .vs{grid-template-columns:1fr;}
  .vs-col.neg{border-right:none; border-bottom:1px solid var(--ink);}
  .step{grid-template-columns:1fr; gap:16px; padding:32px 0;}
  .step-mark{width:100px; height:100px; font-size:100px;}
  .fit-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .page{padding:28px 5vw 0;}
  .band{padding:64px 5vw;}
  .persona-grid{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr; gap:28px;}
  .foot-grid{grid-template-columns:1fr; gap:32px;}
  .faq summary{font-size:18px; padding:20px 22px;}
}