/* HECTOR SOLUTION — Site vitrine v2 */
:root {
  --primary: #c8960c;
  --dark: #f5f5f5;
  --darker: #ffffff;
  --text: #1a1a1a;
  --text2: #555555;
  --surface: #ffffff;
  --border: #e0e0e0;
  --success: #c8960c;
  --radius: 14px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--darker); color: var(--text); line-height: 1.6; }
a { color: var(--primary); text-decoration: none; transition: color .2s; }
.container { max-width: 1000px; margin: 0 auto; padding: 0 24px; }
.container-sm { max-width: 640px; }
.accent { color: var(--primary); }

/* BUTTONS */
.btn { display:inline-block; padding:10px 24px; border-radius:8px; font-weight:700; font-size:14px; cursor:pointer; transition:all .2s; border:2px solid transparent; text-align:center; }
.btn-primary { background:var(--primary); color:#000; border-color:var(--primary); }
.btn-primary:hover { background:#d4940a; transform:translateY(-2px); box-shadow:0 8px 30px rgba(240,165,0,.25); }
.btn-outline { background:transparent; color:var(--text); border-color:var(--border); }
.btn-outline:hover { border-color:var(--primary); color:var(--primary); }
.btn-ghost { background:none; border:1px solid var(--border); color:var(--text); padding:6px 14px; font-size:12px; border-radius:6px; }
.btn-ghost:hover { border-color:var(--primary); color:var(--primary); }
.btn-lg { padding:14px 32px; font-size:16px; }
.btn-sm { padding:6px 12px; font-size:11px; }

/* HEADER */
header { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(255,255,255,.95); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); box-shadow:0 2px 12px rgba(0,0,0,.06); }
nav { max-width:1000px; margin:0 auto; padding:10px 24px; display:flex; align-items:center; gap:20px; }
.logo { display:flex; align-items:baseline; gap:5px; text-decoration:none; }
.logo-h { font-size:18px; font-weight:900; color:var(--primary); letter-spacing:1px; }
.logo-s { font-size:12px; font-weight:600; color:var(--text2); letter-spacing:3px; text-transform:uppercase; }
.nav-links { display:flex; gap:24px; margin-left:auto; font-size:13px; font-weight:500; }
.nav-links a { color:var(--text2); }
.nav-links a:hover { color:var(--primary); }
.nav-portals { display:flex; gap:6px; }
/* MOBILE MENU */
.nav-burger { display:none; background:none; border:none; color:#1a1a1a; font-size:24px; cursor:pointer; padding:4px 8px; }
@media(max-width:768px) {
  .nav-links { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(255,255,255,.98); flex-direction:column; align-items:center; justify-content:center; gap:28px; z-index:200; }
  .nav-links.open { display:flex; }
  .nav-links a { font-size:20px; font-weight:700; color:#1a1a1a; }
  .nav-portals { display:none; }
  .nav-burger { display:block; }
  .hero h1 { font-size:26px; }
  .hero-sub { font-size:14px; }
  .hero img { height:100px !important; }
  .home-grid { grid-template-columns:1fr; gap:12px; }
  .home-card { padding:24px 16px; }
  .home-card h2 { font-size:17px; }
  .hc-icon { font-size:36px; margin-bottom:10px; }
  .container { padding:0 16px; }
  .section { padding:50px 16px; }
  .subpage-hero { padding:100px 16px 30px; }
  .subpage-hero h1 { font-size:22px; }
  .features-grid { grid-template-columns:1fr; }
  .pricing-grid { grid-template-columns:1fr; max-width:320px; }
  .pricing-popular { transform:none; }
  .compliance-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .footer-content { flex-direction:column; text-align:center; }
  .footer-contact { text-align:center; }
  .footer-links { justify-content:center; }
  nav { padding:8px 12px; }
}
/* TABLETTE */
@media(min-width:769px) and (max-width:1024px) {
  .home-grid { gap:14px; }
  .features-grid { grid-template-columns:repeat(2, 1fr); }
  .hero img { height:120px !important; }
}

/* HERO */
.hero { min-height:85vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:80px 24px 60px; margin-top:70px; background:radial-gradient(ellipse at 50% 30%, rgba(240,165,0,.06) 0%, transparent 60%), var(--darker); }
.hero-content { max-width:700px; }
.hero h1 { font-size:clamp(30px,5vw,50px); font-weight:900; line-height:1.15; margin-bottom:20px; letter-spacing:-.5px; background:linear-gradient(135deg, #1a1a1a 30%, var(--primary) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-sub { font-size:17px; color:var(--text2); margin-bottom:32px; line-height:1.7; }

/* SECTIONS */
.section { padding:80px 24px; }
.section-dark { background:var(--dark); }
.section-title { font-size:clamp(22px,3.5vw,32px); font-weight:800; text-align:center; margin-bottom:10px; color:var(--text); }
.section-sub { text-align:center; color:var(--text2); font-size:15px; max-width:500px; margin:0 auto 40px; }

/* ABOUT */
.about-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center; }
@media(max-width:768px) { .about-grid { grid-template-columns:1fr; } }
.about-text h2 { font-size:28px; font-weight:800; margin-bottom:16px; }
.about-lead { font-size:16px; color:var(--text); font-weight:600; margin-bottom:12px; line-height:1.6; }
.about-text p { font-size:14px; color:var(--text2); margin-bottom:12px; line-height:1.7; }
.about-values { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:20px; }
.value { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--surface); border:1px solid var(--border); border-radius:8px; font-size:13px; }
.value span { font-size:18px; }
.about-card { display:flex; justify-content:center; }
.about-card-inner { text-align:center; padding:32px; background:linear-gradient(145deg, var(--surface), rgba(240,165,0,.03)); border:2px solid var(--border); border-radius:16px; width:260px; box-shadow:0 0 40px rgba(240,165,0,.06); }

/* SOLUTION CARDS */
.solutions-grid { display:flex; flex-direction:column; gap:12px; }
.solution-card { display:grid; grid-template-columns:80px 1fr 40px; gap:16px; align-items:center; padding:24px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); transition:all .25s; text-decoration:none; color:var(--text); }
.solution-card:hover { border-color:var(--sc-color, var(--primary)); transform:translateX(6px); box-shadow:0 8px 30px rgba(0,0,0,.2); }
.sc-icon { font-size:44px; text-align:center; }
.sc-content h3 { font-size:17px; font-weight:700; margin-bottom:4px; }
.sc-content p { font-size:13px; color:var(--text2); margin-bottom:8px; line-height:1.5; }
.sc-tags { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:6px; }
.sc-tags span { padding:2px 8px; border-radius:10px; font-size:10px; font-weight:600; background:rgba(255,255,255,.04); border:1px solid var(--border); color:var(--text2); }
.sc-price { font-size:13px; color:var(--text2); }
.sc-price b { color:var(--sc-color, var(--primary)); }
.sc-arrow { font-size:20px; color:var(--border); transition:color .2s; }
.solution-card:hover .sc-arrow { color:var(--sc-color, var(--primary)); }
@media(max-width:600px) { .solution-card { grid-template-columns:1fr; text-align:center; } .sc-icon { font-size:36px; } .sc-arrow { display:none; } .sc-tags { justify-content:center; } }

/* CONTACT */
.contact-form { display:flex; flex-direction:column; gap:10px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:500px) { .form-row { grid-template-columns:1fr; } }
.contact-form input, .contact-form select, .contact-form textarea {
  padding:12px 16px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:14px; font-family:inherit; transition:border-color .2s;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline:none; border-color:var(--primary); }
.form-status { padding:12px; border-radius:8px; text-align:center; font-weight:600; margin-top:4px; }
.form-status.ok { background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.2); color:var(--success); display:block!important; }
.form-status.err { background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.2); color:#ef4444; display:block!important; }

/* FOOTER */
footer { background:#1a1a1a; color:#fff; border-top:1px solid var(--border); padding:32px 24px 16px; }
.footer-content { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; margin-bottom:20px; }
.footer-tagline { font-size:12px; color:var(--text2); margin-top:4px; }
.footer-links { display:flex; flex-wrap:wrap; gap:12px; }
.footer-links a { font-size:12px; color:var(--text2); }
.footer-links a:hover { color:var(--primary); }
.footer-contact { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--text2); text-align:right; }
.footer-contact a { color:var(--text2); }
.footer-bottom { text-align:center; font-size:10px; color:#888; opacity:.8; padding-top:16px; border-top:1px solid #333; }

/* HOME GRID */
.home-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:700px; margin:0 auto; }
@media(max-width:600px) { .home-grid { grid-template-columns:1fr; } }
.home-card { display:flex; flex-direction:column; align-items:center; text-align:center; padding:40px 24px; background:var(--surface); border:2px solid var(--border); border-radius:16px; text-decoration:none; color:var(--text); transition:all .3s; }
.home-card:hover { border-color:var(--hc, var(--primary)); transform:translateY(-6px); box-shadow:0 0 40px rgba(245,158,11,.1), 0 16px 40px rgba(0,0,0,.25); }
.hc-icon { font-size:52px; margin-bottom:16px; }
.home-card h2 { font-size:20px; font-weight:800; margin-bottom:8px; color:var(--hc, var(--primary)); }
.home-card p { font-size:14px; color:var(--text2); margin-bottom:16px; }
.hc-cta { font-size:13px; font-weight:700; color:var(--hc, var(--primary)); opacity:.7; transition:opacity .2s; }
.home-card:hover .hc-cta { opacity:1; }

/* BADGE */
.badge { display:inline-block; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:600; background:rgba(240,165,0,.1); color:var(--primary); border:1px solid rgba(240,165,0,.2); }
.badge-soon { background:rgba(59,130,246,.1); color:#3b82f6; border-color:rgba(59,130,246,.2); }

/* PAGE BANNER — compact, sous le header */
.page-banner { margin-top:70px; padding:20px 24px; background:#fafafa; border-bottom:1px solid var(--border); }
.banner-content { max-width:1000px; margin:0 auto; display:flex; align-items:center; gap:16px; }
.banner-icon { font-size:36px; }
.banner-content h1 { font-size:20px; font-weight:800; margin:0; color:var(--text); }
.banner-content p { font-size:13px; color:var(--text2); margin:2px 0 0; }
.banner-content img { flex-shrink:0; }
@media(max-width:600px) { .banner-content { flex-direction:column; text-align:center; } .banner-content h1 { font-size:17px; } }

/* SUBPAGE HERO */
.subpage-hero { padding:100px 24px 50px; margin-top:70px; text-align:center; background:radial-gradient(ellipse at 50% 20%, rgba(240,165,0,.06) 0%, transparent 50%), var(--darker); }
.subpage-hero h1 { font-size:clamp(26px,4vw,42px); font-weight:900; margin-bottom:12px; background:linear-gradient(135deg, #fff 0%, var(--primary) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.subpage-hero p { font-size:16px; color:var(--text2); max-width:500px; margin:0 auto; }
.back-link { display:inline-block; margin-bottom:16px; font-size:13px; color:var(--text2); }
.back-link:hover { color:var(--primary); }

/* FEATURES GRID (subpages) */
.features-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.feature { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; transition:border-color .2s; }
.feature:hover { border-color:var(--primary); }
.feature-icon { font-size:24px; display:block; margin-bottom:8px; }
.feature h4 { font-size:14px; font-weight:700; margin-bottom:4px; }
.feature p { font-size:12px; color:var(--text2); line-height:1.5; }

/* PRICING (subpages) */
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:800px; margin:0 auto; }
@media(max-width:700px) { .pricing-grid { grid-template-columns:1fr; max-width:340px; } }
.pricing-card { background:var(--surface); border:2px solid var(--border); border-radius:14px; padding:20px 16px; text-align:center; position:relative; transition:all .3s; }
.pricing-card:hover { transform:translateY(-4px); }
.pricing-popular { border-color:var(--primary); background:linear-gradient(180deg, rgba(240,165,0,.06), var(--surface)); transform:scale(1.04); }
.pricing-badge { position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--primary); color:#000; padding:3px 14px; border-radius:20px; font-size:10px; font-weight:700; white-space:nowrap; }
.pricing-name { font-size:12px; font-weight:800; letter-spacing:2px; color:var(--text2); margin-bottom:6px; }
.pricing-price { font-size:12px; color:var(--text2); margin-bottom:10px; line-height:1.3; }
.pricing-price b { font-size:28px; color:var(--primary); }
.pricing-features { list-style:none; text-align:left; margin:16px 0; }
.pricing-features li { padding:4px 0; font-size:12px; color:var(--text2); border-bottom:1px solid rgba(255,255,255,.03); }
.pricing-features li::before { content:'✓ '; color:var(--success); font-weight:700; }
.pricing-note { text-align:center; margin-top:16px; font-size:12px; color:var(--text2); }

/* COMPLIANCE (subpages) */
.compliance-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:600px) { .compliance-grid { grid-template-columns:1fr; } }
.compliance-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
.compliance-card h4 { margin-bottom:8px; font-size:14px; }
.compliance-card ul { list-style:none; }
.compliance-card li { padding:3px 0; font-size:12px; color:var(--text2); }
.compliance-card li::before { content:'✓ '; color:var(--success); font-weight:700; }

/* TRUST */
.trust-row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:20px 0; }
.trust-row span { padding:5px 12px; background:var(--surface); border:1px solid var(--border); border-radius:20px; font-size:11px; }

/* ── EFFETS VISUELS ── */
/* Ombres sur les cartes au hover */
.solution-card:hover { box-shadow:0 8px 30px rgba(0,0,0,.08); }
.card:hover, .feature:hover { box-shadow:0 6px 20px rgba(0,0,0,.06); }
.pricing-popular { box-shadow:0 8px 30px rgba(200,150,12,.15); }

/* Separateurs de sections avec glow */
.section-dark { border-top:1px solid rgba(240,165,0,.1); border-bottom:1px solid rgba(240,165,0,.1); }

/* Logo glow */
nav img, .hero img { filter:drop-shadow(0 0 20px rgba(240,165,0,.2)); transition:filter .3s; }
nav img:hover, .hero img:hover { filter:drop-shadow(0 0 30px rgba(240,165,0,.4)); }

/* Bouton glow */
.btn-primary { box-shadow:0 0 20px rgba(240,165,0,.2); }
.btn-primary:hover { box-shadow:0 0 40px rgba(240,165,0,.35); }

/* Animation d'entree douce pour le hero */
.hero-content { animation: heroFadeIn .8s ease-out; }
@keyframes heroFadeIn {
  from { opacity:0; transform:translateY(20px); }
  to { opacity:1; transform:translateY(0); }
}

/* Ligne lumineuse sous le header */
header::after { content:''; position:absolute; bottom:-1px; left:10%; right:10%; height:1px; background:linear-gradient(90deg, transparent, rgba(240,165,0,.3), transparent); }

/* Points lumineux subtils en fond */
.hero::after { content:''; position:absolute; top:20%; right:10%; width:300px; height:300px; background:radial-gradient(circle, rgba(240,165,0,.04) 0%, transparent 70%); pointer-events:none; }
.hero::before { content:''; position:absolute; bottom:10%; left:5%; width:200px; height:200px; background:radial-gradient(circle, rgba(59,130,246,.03) 0%, transparent 70%); pointer-events:none; }