/*
Theme Name: Estrella SEO
Theme URI: https://estrellaseo.com
Author: Estrella SEO
Description: Landing page pour agence SEO — offres, paiement par email/Stripe et assistant chat.
Version: 1.0
Text Domain: estrella-seo
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Public+Sans:wght@400;500;600;700&display=swap');

:root{
  --ink:#12232E;
  --ink-2:#1B2A2F;
  --paper:#EFE6D0;
  --paper-soft:#F7F1E2;
  --gold:#C9A227;
  --gold-soft:#E4C765;
  --teal:#2F6E6E;
  --white:#FBF8F1;
  --line: rgba(201,162,39,0.35);
  --radius: 2px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink-2);
  font-family:'Public Sans', sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{ font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.01em; }
a{ color:inherit; }
.wrap{ max-width:1120px; margin:0 auto; padding:0 32px; }

/* NAV */
nav{
  position:sticky; top:0; z-index:50;
  background:var(--paper); border-bottom:1px solid var(--line);
}
nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand{ font-family:'Fraunces', serif; font-weight:700; font-size:22px; color:var(--ink); display:flex; align-items:center; gap:8px;}
.brand svg{ width:22px; height:22px; }
nav ul{ display:flex; list-style:none; gap:32px; font-size:15px; }
nav a.navlink{ text-decoration:none; color:var(--ink-2); border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color .2s;}
nav a.navlink:hover{ border-color:var(--gold); }
.nav-cta{
  background:var(--ink); color:var(--paper); padding:10px 20px; border-radius:var(--radius);
  text-decoration:none; font-size:14px; font-weight:600;
}
@media(max-width:720px){ nav ul{ display:none; } }

/* HERO */
.hero{ background:var(--ink); color:var(--white); position:relative; overflow:hidden; }
.hero .wrap{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center; padding-top:88px; padding-bottom:88px; }
.hero .eyebrow{ color:var(--gold-soft); font-size:14px; margin-bottom:18px; }
.hero h1{ font-size:clamp(36px, 5vw, 58px); line-height:1.05; margin-bottom:22px; color:var(--white); }
.hero p.lead{ font-size:18px; color:rgba(251,248,241,0.78); max-width:46ch; margin-bottom:32px; }
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  padding:14px 26px; border-radius:var(--radius); font-weight:600; font-size:15px;
  transition:transform .15s ease, background .2s ease;
  cursor:pointer; border:none; font-family:inherit;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--gold); color:var(--ink); }
.btn-primary:hover{ background:var(--gold-soft); }
.btn-ghost{ background:transparent; color:var(--white); border:1px solid rgba(251,248,241,0.35); }
.btn-ghost:hover{ border-color:var(--gold-soft); }

.star-motif{ width:100%; height:auto; opacity:0.9; }

/* stats bar */
.stats{ background:var(--teal); color:var(--white); }
.stats .wrap{ display:flex; justify-content:space-between; padding:28px 32px; flex-wrap:wrap; gap:20px; }
.stat{ text-align:left; }
.stat .num{ font-family:'Fraunces', serif; font-size:32px; font-weight:600; }
.stat .label{ font-size:13px; color:rgba(251,248,241,0.75); margin-top:2px; }

/* SECTION generic */
section{ padding:88px 0; }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head .kicker{ color:var(--teal); font-weight:600; font-size:14px; margin-bottom:10px; }
.section-head h2{ font-size:clamp(28px,3.4vw,40px); color:var(--ink); }

/* SERVICES */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
.service{ border-top:1px solid var(--line); padding-top:22px; }
.service .idx{ font-family:'Fraunces', serif; color:var(--gold); font-size:15px; margin-bottom:14px; }
.service h3{ font-size:20px; color:var(--ink); margin-bottom:10px; }
.service p{ font-size:15px; color:rgba(27,42,47,0.75); }
@media(max-width:840px){ .services-grid{ grid-template-columns:1fr; } .hero .wrap{ grid-template-columns:1fr; } }

/* PRICING */
.pricing{ background:var(--paper-soft); }
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.plan{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:36px 30px; display:flex; flex-direction:column; position:relative;
}
.plan.featured{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold); }
.plan .idx{ font-family:'Fraunces', serif; color:var(--gold); font-size:14px; margin-bottom:18px; }
.plan h3{ font-size:22px; color:var(--ink); margin-bottom:6px; }
.plan .tagline{ font-size:14px; color:rgba(27,42,47,0.6); margin-bottom:24px; }
.plan .price{ font-family:'Fraunces', serif; font-size:44px; color:var(--ink); margin-bottom:2px; }
.plan .price span{ font-size:15px; font-family:'Public Sans',sans-serif; color:rgba(27,42,47,0.6); font-weight:400; }
.plan ul{ list-style:none; margin:24px 0 30px; flex:1; }
.plan li{ font-size:14.5px; padding:9px 0; border-top:1px solid rgba(27,42,47,0.08); display:flex; gap:10px; }
.plan li:first-child{ border-top:none; }
.plan li svg{ flex-shrink:0; margin-top:3px; }
.choose-btn{
  background:var(--ink); color:var(--paper); border:none; padding:14px; border-radius:var(--radius);
  font-weight:600; font-size:15px; cursor:pointer; width:100%; font-family:inherit; transition:background .2s;
}
.choose-btn:hover{ background:var(--teal); }
@media(max-width:840px){ .pricing-grid{ grid-template-columns:1fr; } }

/* PAYMENT MODAL */
.modal-overlay{
  position:fixed; inset:0; background:rgba(18,35,46,0.55); display:none;
  align-items:center; justify-content:center; z-index:200; padding:20px;
}
.modal-overlay.open{ display:flex; }
.modal{
  background:var(--white); max-width:460px; width:100%; border-radius:var(--radius);
  padding:36px 32px; position:relative;
}
.modal-close{ position:absolute; top:16px; right:16px; background:none; border:none; cursor:pointer; font-size:20px; color:var(--ink-2); }
.modal h3{ font-size:24px; color:var(--ink); margin-bottom:6px; }
.modal .sub{ font-size:14px; color:rgba(27,42,47,0.65); margin-bottom:26px; }
.pay-option{
  display:flex; align-items:center; gap:14px; padding:16px; border:1px solid var(--line);
  border-radius:var(--radius); margin-bottom:14px; cursor:pointer; text-decoration:none; color:var(--ink-2);
  transition:border-color .2s, background .2s;
}
.pay-option:hover{ border-color:var(--gold); background:var(--paper-soft); }
.pay-option .picon{ width:38px; height:38px; border-radius:50%; background:var(--paper); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pay-option .ptext strong{ display:block; font-size:15px; }
.pay-option .ptext span{ font-size:13px; color:rgba(27,42,47,0.6); }

/* CONTACT / FOOTER */
footer{ background:var(--ink); color:var(--white); padding:64px 0 32px; }
footer .wrap{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; }
footer h4{ font-size:15px; margin-bottom:16px; color:var(--gold-soft); }
footer p, footer a{ font-size:14px; color:rgba(251,248,241,0.7); text-decoration:none; line-height:2; }
footer .brand{ color:var(--white); margin-bottom:14px; }
.foot-bottom{ margin-top:48px; padding-top:24px; border-top:1px solid rgba(251,248,241,0.12); font-size:13px; color:rgba(251,248,241,0.5); }
@media(max-width:720px){ footer .wrap{ grid-template-columns:1fr; } }

/* CHAT WIDGET */
#chat-bubble{
  position:fixed; bottom:26px; right:26px; width:60px; height:60px; border-radius:50%;
  background:var(--gold); color:var(--ink); border:none; cursor:pointer; z-index:300;
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(18,35,46,0.25);
  transition:transform .2s;
}
#chat-bubble:hover{ transform:scale(1.06); }
#chat-panel{
  position:fixed; bottom:100px; right:26px; width:360px; max-width:calc(100vw - 40px);
  height:480px; max-height:70vh; background:var(--white); border-radius:8px; z-index:300;
  box-shadow:0 12px 40px rgba(18,35,46,0.3); display:none; flex-direction:column; overflow:hidden;
  border:1px solid var(--line);
}
#chat-panel.open{ display:flex; }
.chat-head{ background:var(--ink); color:var(--white); padding:16px 18px; display:flex; align-items:center; justify-content:space-between; }
.chat-head .t1{ font-family:'Fraunces', serif; font-size:16px; }
.chat-head .t2{ font-size:12px; color:rgba(251,248,241,0.65); }
.chat-head button{ background:none; border:none; color:var(--white); font-size:18px; cursor:pointer; }
#chat-messages{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; font-size:14px; }
.msg{ max-width:85%; padding:10px 13px; border-radius:10px; line-height:1.45; }
.msg.bot{ background:var(--paper-soft); align-self:flex-start; border-bottom-left-radius:2px; }
.msg.user{ background:var(--ink); color:var(--white); align-self:flex-end; border-bottom-right-radius:2px; }
.msg.typing{ background:var(--paper-soft); align-self:flex-start; color:rgba(27,42,47,0.5); font-style:italic; }
#chat-form{ display:flex; border-top:1px solid var(--line); padding:10px; gap:8px; }
#chat-input{ flex:1; border:1px solid var(--line); border-radius:6px; padding:10px 12px; font-family:inherit; font-size:14px; outline:none; }
#chat-input:focus{ border-color:var(--gold); }
#chat-send{ background:var(--ink); color:var(--paper); border:none; border-radius:6px; padding:0 16px; cursor:pointer; font-weight:600; }

/* CONTACT PAGE */
.contact-hero{ background:var(--ink); color:var(--white); padding:72px 0 56px; }
.contact-hero .eyebrow{ color:var(--gold-soft); font-size:14px; margin-bottom:14px; }
.contact-hero h1{ font-size:clamp(30px,4vw,46px); color:var(--white); margin-bottom:16px; }
.contact-hero p.lead{ font-size:17px; color:rgba(251,248,241,0.78); max-width:52ch; }

.contact-body{ padding:72px 0; }
.contact-grid{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:56px; align-items:start; }
@media(max-width:840px){ .contact-grid{ grid-template-columns:1fr; } }

.contact-info h3{ font-size:20px; color:var(--ink); margin-bottom:20px; }
.contact-list{ list-style:none; display:flex; flex-direction:column; gap:20px; }
.contact-list li{ border-top:1px solid var(--line); padding-top:14px; }
.contact-list li:first-child{ border-top:none; padding-top:0; }
.contact-list strong{ display:block; font-size:13px; color:var(--teal); margin-bottom:4px; text-transform:uppercase; letter-spacing:.03em; }
.contact-list a, .contact-list span{ font-size:15px; color:var(--ink-2); text-decoration:none; }
.contact-list a:hover{ color:var(--teal); }

.contact-form-wrap{ background:var(--paper-soft); border:1px solid var(--line); border-radius:var(--radius); padding:32px; }
.contact-form{ display:flex; flex-direction:column; gap:6px; }
.contact-form label{ font-size:13px; font-weight:600; color:var(--ink-2); margin-top:12px; }
.contact-form label:first-of-type{ margin-top:0; }
.contact-form input, .contact-form textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:6px;
  font-family:inherit; font-size:14px; outline:none; background:var(--white); resize:vertical;
}
.contact-form input:focus, .contact-form textarea:focus{ border-color:var(--gold); }
.contact-form .choose-btn{ margin-top:20px; width:auto; padding:14px 32px; }

.contact-notice{ padding:14px 16px; border-radius:6px; font-size:14px; margin-bottom:20px; }
.contact-notice-success{ background:rgba(47,110,110,0.12); color:var(--teal); border:1px solid var(--teal); }
.contact-notice-error{ background:rgba(179,64,42,0.1); color:#B3402A; border:1px solid #B3402A; }