/* ============================================================
   KOREXA — Pages secteur (partagé par toutes les pages secteur-*.html)
   Réutilise les tokens et utilitaires de style.css. Auto-suffisant
   pour les composants propres aux pages secteur.
   ============================================================ */

/* ---- Hero ---- */
.hero-secteur{padding:160px 0 80px;background:linear-gradient(160deg,#1C1E25 0%,#16181C 55%,#101216 100%);position:relative;overflow:hidden}
.hero-secteur .grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:60px 60px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 30% 50%,#000,transparent);mask-image:radial-gradient(ellipse 70% 60% at 30% 50%,#000,transparent)}
/* Halo via mask radial — surtout pas de filter:blur ici : les layers de flou sont peints en rectangles noirs sur WebKit iOS (Safari + Chrome iPhone). */
.hero-orb{position:absolute;border-radius:50%;-webkit-mask-image:radial-gradient(circle closest-side,#000 25%,transparent 100%);mask-image:radial-gradient(circle closest-side,#000 25%,transparent 100%)}
.hero-secteur .inner{position:relative;z-index:2;max-width:780px}
.hero-secteur .eyebrow{color:var(--accent)}
.hero-secteur h1{font-size:clamp(40px,6vw,72px);color:#fff;margin-bottom:24px}
.hero-secteur h1 .gold{color:var(--accent);font-style:italic}
.hero-secteur p{font-size:19px;color:rgba(255,255,255,.7);max-width:600px;margin-bottom:36px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:36px}
.hero-pills{display:flex;gap:14px;flex-wrap:wrap}
.hero-pill{display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:100px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);font-size:13px;color:rgba(255,255,255,.85);font-weight:500}

/* ---- Bénéfices : "Ce qu'un bon site apporte à votre métier" ---- */
.sec-benefits{padding:110px 0;background:var(--bg-2)}
.ben-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ben-card{background:var(--surface);border-radius:var(--radius-lg);padding:40px 32px;border:1px solid var(--border-subtle);transition:all .5s var(--transition);position:relative;overflow:hidden}
.ben-card::after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--secondary),var(--accent));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--transition)}
.ben-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:transparent}
.ben-card:hover::after{transform:scaleX(1)}
.ben-icon{width:60px;height:60px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:24px;background:var(--amber-subtle);border:1px solid var(--border-amber);transition:all .5s var(--transition)}
.ben-card:hover .ben-icon{transform:scale(1.1) rotate(-5deg)}
.ben-card h3{font-size:22px;color:var(--primary);margin-bottom:12px}
.ben-card p{font-size:15px;color:var(--text-2);line-height:1.6}

/* ---- "Ce que Korexa crée pour vous" ---- */
.sec-creates{padding:110px 0;background:var(--bg)}
.creates-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.creates-item{display:flex;gap:16px;align-items:flex-start;background:var(--surface);border-radius:var(--radius-lg);padding:26px 24px;border:1px solid var(--border-subtle);transition:all .4s var(--transition)}
.creates-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--secondary)}
.creates-ico{flex-shrink:0;width:46px;height:46px;border-radius:var(--radius-md);background:var(--amber-subtle);border:1px solid var(--border-amber);display:flex;align-items:center;justify-content:center;font-size:20px}
.creates-item h4{font-size:17px;color:var(--primary);margin-bottom:6px}
.creates-item p{font-size:13.5px;color:var(--muted);line-height:1.55}

/* ---- "Exemple de structure de site" (arborescence) ---- */
.sec-structure{padding:110px 0;background:var(--bg-2)}
.structure-wrap{max-width:820px;margin:0 auto}
.structure-card{background:linear-gradient(160deg,#1E2028 0%,#141519 100%);border-radius:var(--radius-xl);padding:48px;box-shadow:var(--shadow-xl);position:relative;overflow:hidden}
.structure-card .orb{position:absolute;width:300px;height:300px;border-radius:50%;background:var(--secondary);opacity:.18;top:-100px;right:-80px;-webkit-mask-image:radial-gradient(circle closest-side,#000 25%,transparent 100%);mask-image:radial-gradient(circle closest-side,#000 25%,transparent 100%)}
.structure-tree{position:relative;z-index:2;display:flex;flex-direction:column;gap:14px}
.tree-node{display:flex;gap:20px;align-items:flex-start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-left:3px solid var(--accent);border-radius:var(--radius-md);padding:18px 22px}
.tree-node .tn-page{font-family:var(--font-head);font-size:20px;color:#fff;font-weight:600;min-width:170px;flex-shrink:0}
.tree-node .tn-desc{font-size:14px;color:rgba(255,255,255,.7);line-height:1.5}

/* ---- Témoignage (preuve sociale, placeholder) ---- */
.sec-proof{padding:110px 0;background:var(--bg)}
.testimonial-card{max-width:760px;margin:0 auto;background:linear-gradient(135deg,#221C12 0%,#1A1814 52%,#16180C 100%);border-radius:var(--radius-xl);padding:56px 48px;border:1px solid var(--border-amber);box-shadow:var(--shadow-lg);text-align:center;position:relative;overflow:hidden}
.testimonial-card .quote-mark{font-family:var(--font-head);font-size:90px;line-height:.5;color:var(--accent);opacity:.3;height:42px}
.testimonial-card blockquote{font-family:var(--font-head);font-size:clamp(22px,2.6vw,30px);color:var(--primary);line-height:1.4;font-style:italic;margin:8px 0 32px}
.testimonial-author{display:inline-flex;align-items:center;justify-content:center;gap:14px}
.ta-avatar{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-hover));display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:22px;font-weight:600;color:var(--on-amber);flex-shrink:0}
.ta-meta{text-align:left}
.ta-name{font-size:16px;font-weight:700;color:var(--primary)}
.ta-role{font-size:13px;color:var(--muted)}
.ta-placeholder{display:block;width:fit-content;margin:22px auto 0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--bg-2);border:1px dashed var(--border);border-radius:100px;padding:5px 14px}

/* ---- CTA final ---- */
.cta-secteur{padding:100px 0}
.cta-box{background:linear-gradient(135deg,#221C12 0%,#1A1814 48%,#141519 100%);border-radius:var(--radius-xl);padding:80px 60px;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;position:relative;overflow:hidden}
.cta-box .orb{position:absolute;border-radius:50%;opacity:.2;-webkit-mask-image:radial-gradient(circle closest-side,#000 25%,transparent 100%);mask-image:radial-gradient(circle closest-side,#000 25%,transparent 100%)}
.cta-box .orb-1{width:400px;height:400px;background:var(--secondary);top:-150px;left:-100px}
.cta-box .orb-2{width:300px;height:300px;background:var(--accent);bottom:-100px;right:-50px}
.cta-content{position:relative;z-index:2}
.cta-content h2{font-size:clamp(28px,3.5vw,46px);color:#fff;margin-bottom:16px}
.cta-content h2 .gold{color:var(--accent);font-style:italic}
.cta-content p{font-size:17px;color:rgba(255,255,255,.7)}
.cta-actions{display:flex;flex-direction:column;gap:14px;align-items:center;position:relative;z-index:2;flex-shrink:0}
.cta-actions .resp{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.6)}
.cta-actions .resp .dot{width:8px;height:8px;border-radius:50%;background:var(--success)}

/* ---- Responsive ---- */
@media(max-width:1024px){
  .creates-grid{grid-template-columns:repeat(2,1fr)}
  .cta-box{grid-template-columns:1fr;text-align:center}
  .cta-actions{flex-direction:row;justify-content:center;flex-wrap:wrap}
}
@media(max-width:768px){
  .hero-secteur{padding:140px 0 64px}
  .ben-grid{grid-template-columns:1fr}
  .creates-grid{grid-template-columns:1fr}
  .structure-card{padding:32px 22px}
  .tree-node{flex-direction:column;gap:6px}
  .tree-node .tn-page{min-width:0}
  .testimonial-card{padding:40px 26px}
  .cta-box{padding:48px 28px}
  .cta-actions{flex-direction:column}
}