/* KA DIGITAL V2 — styles */
:root{
  --bg:#fef7e4;          /* fond crème */
  --bg-alt:#e7c082;      /* doré doux (sections foncées) */
  --card:#fef7e4;        /* cartes claires */
  --text:#2b2b2b;        /* gris très foncé */
  --muted:#6e6e6e;       /* gris secondaire */
  --gold:#feeab2;        /* accent or */
  --gold-strong:#e1b04a;
  --gold2:#feeab2;
  --dark:#3a2c12;
  --radius:16px;
  --container:1180px;
  --gap:clamp(16px,2vw,28px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text); background:var(--bg); line-height:1.6;
}
img{max-width:100%; height:auto; display:block; border-radius:14px}

.container{ width:min(100% - 2rem, var(--container)); margin-inline:auto }
.section{ padding: clamp(56px, 8vw, 100px) 0 }
.section-title{ font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin:0 0 1rem }
.section-title span{ color: var(--gold) }
.center{text-align:center}
.muted{color:var(--muted)}

/* Header */
.header{ position:sticky; top:0; z-index:10; background:rgba(251,241,216,.72); backdrop-filter: blur(8px); border-bottom:1px solid rgba(0,0,0,.06) }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:.75rem 0 }
.brand{ font-weight:700; text-decoration:none; color:var(--text) }
.navlist{ display:flex; gap:1rem }
.navlist a{ text-decoration:none; color:var(--text); padding:.5rem .75rem; border-radius:10px }
.navlist a:hover{ background:rgba(0,0,0,.04) }
.burger{ display:none; background:none; border:0; font-size:1.3rem }

/* Buttons */
.btn{ display:inline-block; padding:.9rem 1.1rem; border-radius:12px; font-weight:600; text-decoration:none; border:1px solid rgba(0,0,0,.08) }
.btn-primary{ background: linear-gradient(90deg, var(--gold-strong), var(--gold)); color:#1b1b1b; border:0 }
.btn-ghost{ background:transparent }
.btn-dark{ background:#3a2c12; color:#fff; border:0 }
.btn:hover{ transform: translateY(-1px); box-shadow:0 10px 20px rgba(0,0,0,.08) }

/* Hero */
.hero{ position:relative; overflow:hidden }
.hero-wrap{ display:grid; grid-template-columns: 1.3fr .7fr; gap: var(--gap); align-items:center }
.hero-copy h1{ font-size: clamp(2rem, 4vw, 3.25rem); line-height:1.15; margin:0 0 .75rem }
.hero-copy .lead{ color:var(--muted); margin:.25rem 0 1.25rem }
.hero-art img{ border-radius: 40px }
.hero-arc{ display:none; position:absolute; right:-15vw; top:0; bottom:0; width:55vw; background: radial-gradient(80% 100% at 10% 50%, rgba(0,0,0,.06), rgba(0,0,0,0)); clip-path: ellipse(70% 65% at 0% 50%); }

/* Intro */
.intro .kicker{ color: var(--gold-strong); letter-spacing:.02em; font-weight:700; margin:0 0 .5rem }
.intro .intro-text{ max-width: 70ch }

/* Cards / sections */
.cards{ display:grid; gap: var(--gap) }
.cards.three{ grid-template-columns: repeat(3, 1fr) }
.card{ background:var(--card); border:1px solid rgba(0,0,0,.08); padding:clamp(16px,2.2vw,22px); border-radius:16px }
.card .price{ font-weight:700 }
.card .card-index{ font-weight:700; color: var(--muted); margin-bottom:.25rem }
.cards-section{}
.cards-section.alt{ background: var(--bg-alt) }

/* CM dark variant */
.alt{ background: var(--bg-alt) }
.alt .section-title{ color:#2b2b2b }
.alt .card.dark{ background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); color:#1b1b1b }
.alt .card.dark .price{ font-weight:700 }
.alt .card.dark ul{ margin: .5rem 0 0 1rem }

/* SEO */
.seo .seo-grid{ display:grid; grid-template-columns: 1.3fr .7fr; gap: var(--gap); align-items:center }
.seo-card{ background:linear-gradient(90deg, rgba(226,180,76,.25), rgba(241,213,122,.25)); border:1px solid rgba(0,0,0,.08); padding:clamp(14px,2vw,20px); border-radius:16px; margin-bottom: var(--gap) }
.seo-card h3{ margin:.25rem 0 .5rem }

/* Works */
.work-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap) }

/* Testimonials */
.quote .stars{ color:#f6c453; margin:0 0 .5rem }
.quote .author{ font-weight:700; margin:.5rem 0 0 }

/* Contact */
.contact .contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items:center }
.contact a{ color: var(--dark) }

/* Footer */
.footer{ border-top:1px solid rgba(0,0,0,.08); background:rgba(255,255,255,.45) }
.foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding: 1rem 0 }

/* Responsive */
@media (max-width: 1024px){
  .hero-wrap{ grid-template-columns: 1fr }
  .seo .seo-grid{ grid-template-columns:1fr }
  .contact .contact-grid{ grid-template-columns:1fr }
}
@media (max-width: 820px){
  .cards.three{ grid-template-columns: 1fr 1fr }
  .work-grid{ grid-template-columns:1fr }
}
@media (max-width: 640px){
  .cards.three{ grid-template-columns: 1fr }
  .navlist{ display:none; position:absolute; right:1rem; top:60px; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:.5rem; width:min(86vw, 320px); box-shadow:0 12px 30px rgba(0,0,0,.12) }
  .burger{ display:inline-block }
}

.btn-dark{ background: linear-gradient(90deg, var(--gold-strong), var(--gold)); color:#1b1b1b; border:0 }

.hero-art{ overflow:hidden; border-radius:40px }
.hero-art img{ object-fit:cover; width:100%; height:100%; transform:scale(1.05) }

#services-sites .card{ background: linear-gradient(180deg, rgba(231,192,130,.25), rgba(231,192,130,.15)); border-color: rgba(0,0,0,.12) }
#services-sites h3{ color:#1e1e1e }

.section-title span{ color: var(--gold-strong) }

.final-cta .container{ background:var(--bg-alt); color:#1b1b1b; border:1px solid rgba(0,0,0,.15); box-shadow:0 12px 40px rgba(0,0,0,.08); padding: clamp(24px,4vw,40px); border-radius:18px }
.final-cta h2 span{ color: var(--gold-strong) }

.intro-bg{
  position:relative;
  background: url('assets/lobby.png') center/cover no-repeat;
  isolation:isolate;
}
.intro-bg::before{
  content:'';
  position:absolute; inset:0;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(2px);
  z-index:0;
}
.intro-bg .container{ position:relative; z-index:1 }

@media (min-width:1025px){ .hero-art img{max-width:90%; margin-left:auto} }

/* CTA custom sampled colors */
:root{
  --cta-bg:#fbeab9;
  --cta-panel:#fff2cf;
  --cta-border:#e2c37e;
  --cta-btn-dark:#d6a651;
  --cta-btn-light:#f1d78a;
  --cta-muted:#7d6750;
}
.final-cta .container{
  background: var(--cta-bg);
  border:1px solid var(--cta-border);
  box-shadow:0 10px 32px rgba(0,0,0,.08);
}
.final-cta .container .hint{
  background: var(--cta-panel);
  border-radius:14px;
  padding:1rem 1.2rem;
}
.final-cta .cta-row .btn.btn-primary{
  background: linear-gradient(90deg, var(--cta-btn-dark), var(--cta-btn-light));
  color:#1b1b1b;
}
.final-cta p{ color: var(--cta-muted) }

.intro-bg{ background-position: center 55%; }

.final-cta .hint{ margin-bottom: 1rem; }
.final-cta .cta-row{ margin-top: 1rem; gap: .6rem; justify-content:center; }
.btn-outline{ background: transparent; color: #000; border: 1px solid #000; }
.btn-outline:hover{ background: rgba(0,0,0,.04); }

.btn-outline{ background: transparent; color: #000 !important; border: 1px solid #000; text-decoration:none; }
.btn-outline:hover{ background: rgba(0,0,0,.04); color:#000 !important; }

.intro-bg .container{ text-align:center; max-width:800px; }
.intro-bg .intro-text{ margin-inline:auto; }

.btn-outline,
.btn-outline:link,
.btn-outline:visited,
.btn-outline:hover,
.btn-outline:active {
  color: #000 !important;
  border: 1px solid #000;
  background: transparent;
  text-decoration: none !important;
}

/* --- Force black text for specific links --- */

/* Global reset: inherit colors for anchors to avoid UA blue */
a, a:link, a:visited { color: inherit !important; text-decoration: none; }
a:hover, a:active    { color: inherit !important; text-decoration: underline; }

/* Final CTA secondary button: always black text & border */
.final-cta .btn-outline,
.final-cta .btn-outline:link,
.final-cta .btn-outline:visited,
.final-cta .btn-outline:hover,
.final-cta .btn-outline:active {
  color: #000 !important;
  border: 1px solid #000 !important;
  background: transparent !important;
  text-decoration: none !important;
}

/* Footer nav links: always black */
.footer nav a,
.footer nav a:link,
.footer nav a:visited,
.footer nav a:hover,
.footer nav a:active {
  color: #000 !important;
  text-decoration: none;
}
.footer nav a:hover { text-decoration: underline; }

/* Patch V11 — Hero centré sans image */
.hero-centered {
  padding-top: clamp(56px, 7vw, 96px);
}
.hero-wrap-centered {
  display: grid;
  grid-template-columns: 1fr; /* 1 seule colonne (plus d'image) */
}
.hero-copy.centered {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}
.centered-cta {
  justify-content: center;
}

#hero-title {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.15;
  margin: 0 0 .5rem;
}
#hero-subtitle {
  color: var(--muted);
  margin: .25rem 0 1.25rem;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
}

/* Mobile */
@media (max-width:640px) {
  #hero-title { font-size: clamp(1.8rem, 6vw, 2.4rem); }
}

/* Bouton secondaire toujours noir (évite le bleu par défaut des liens) */
.btn-outline,
.btn-outline:link,
.btn-outline:visited,
.btn-outline:hover,
.btn-outline:active {
  color: #000 !important;
  border: 1px solid #000;
  background: transparent;
  text-decoration: none !important;
}