/*
Theme Name: Cecilia Contact V01 Test Autonome
Author: OpenAI
Description: Prototype autonome de la page Contact reproduisant la maquette validée.
Version: 1.0.0
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Montserrat:wght@400;500;600&display=swap');

:root{
  --ink:#19364b;
  --forest:#174f38;
  --terracotta:#9a432a;
  --paper:#fbf6f0;
  --sage:#eef4e8;
  --blush:#faece6;
  --line:#d9d8d1;
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Montserrat', Arial, Helvetica, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit}
.contact-page{overflow:hidden}

/* Header */
.site-header{
  height:6.12vw; min-height:60px; max-height:76px;
  padding:0 6.65vw;
  display:flex; align-items:center;
  background:#fff; border-bottom:1px solid rgba(20,50,70,.06);
  position:relative; z-index:20;
}
.brand{display:flex;flex-direction:column;flex:0 0 auto;min-width:20.7vw}
.brand strong{font:500 2.03vw/.95 var(--serif);letter-spacing:.01em}
.brand span{font:500 .66vw/1.2 var(--sans);margin-top:.24vw}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:2.12vw;white-space:nowrap;font:500 .70vw/1 var(--sans)}
.site-nav a{position:relative}
.site-nav .active::after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:-1.48vw;width:3.95vw;height:1px;background:#c88d70}
.search-link{width:1.38vw;height:1.38vw;display:flex;align-items:center;justify-content:center}
.search-link svg{width:100%;height:100%}
.nav-cta{background:#355f3c;color:#fff!important;border-radius:999px;padding:1.05vw 2.08vw;font-weight:600}
.menu-toggle{display:none}

/* Hero */
.contact-hero{
  height:36.35vw;
  min-height:410px;
  display:grid; grid-template-columns:45.0% 55.0%;
  background:var(--paper);
}
.contact-hero-copy{
  padding:4.0vw 4.4vw 3.2vw 6.65vw;
  display:flex;flex-direction:column;justify-content:center;
}
.eyebrow{color:#9d4a31;font:600 .70vw/1 var(--sans);letter-spacing:.14em;margin-bottom:1.35vw}
.contact-hero h1{
  margin:0;color:#9a432a;
  font:500 4.60vw/.91 var(--serif);
  letter-spacing:-.028em;
}
.contact-hero p{
  margin:1.38vw 0 1.55vw;
  max-width:35vw;
  font:500 1.03vw/1.5 var(--sans);
  color:#213b4f;
}
.hero-btn{
  display:inline-flex;width:max-content;align-items:center;gap:1.05vw;
  background:#37623d;color:#fff;border-radius:999px;
  padding:1.25vw 2.25vw;font:600 .82vw/1 var(--sans);
}
.hero-values{
  margin-top:1.75vw;
  font:500 1.55vw/1 var(--serif);
  color:#744838;
  letter-spacing:.02em;
  word-spacing:.24em;
}
.contact-hero-photo{
  width:100%;height:100%;object-fit:cover;
}

/* Main contact area */
.contact-main{
  padding:2.05vw 6.7vw 1.85vw;
  display:grid;grid-template-columns:31% 1fr;gap:4.8vw;
  background:#fff;
}
.contact-aside{padding-top:.45vw}
.info-block{
  display:grid;grid-template-columns:5.3vw 1fr;gap:1.15vw;
  padding:0 0 2.18vw;
  margin-bottom:1.6vw;
  border-bottom:1px solid #d9ddd7;
}
.info-block:last-of-type{border-bottom:none;margin-bottom:.35vw}
.icon-circle{
  width:5.3vw;height:5.3vw;border-radius:50%;
  background:var(--sage);display:flex;align-items:center;justify-content:center;
}
.icon-circle svg{width:2.55vw;height:2.55vw;stroke:#173b31;fill:none;stroke-width:1.6}
.info-block h2{margin:.15vw 0 .55vw;font:500 1.62vw/1 var(--serif);color:#1e3849}
.info-block p{margin:0;font:400 .81vw/1.55 var(--sans);color:#425866}
.info-block strong{display:block;margin-top:.55vw;font:600 .77vw/1.2 var(--sans);color:#173a48}
.signature-contact{width:28vw;max-width:100%;margin-top:.8vw}

.contact-card{
  background:#fff;border-radius:1.35vw;
  box-shadow:0 8px 30px rgba(68,63,52,.08);
  padding:2.1vw 2.7vw 2.0vw;
}
.contact-card h2{margin:0;color:#a14830;font:500 2.58vw/1 var(--serif)}
.contact-card>p{margin:.58vw 0 1.48vw;font:400 .92vw/1.42 var(--sans);color:#263f51}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:.86vw 1.0vw}
.field, .field-wide{
  border:1px solid #d3d6d4;border-radius:.74vw;background:#fff;
  padding:0 1.35vw;height:4.10vw;min-height:44px;
  color:#61717d;font:400 .76vw/1 var(--sans);outline:0
}
.field-wide{grid-column:1/-1}
select.field-wide{appearance:auto}
textarea.field-wide{height:9.7vw;min-height:118px;padding-top:1.18vw;resize:vertical}
.consent{
  grid-column:1/-1;display:flex;align-items:flex-start;gap:.7vw;
  font:400 .70vw/1.35 var(--sans);color:#3a4e5c;margin:.32vw 0 .52vw;
}
.consent input{width:1.28vw;height:1.28vw;min-width:16px;min-height:16px;margin:0}
.submit-btn{
  grid-column:1/-1;width:28vw;max-width:100%;
  border:0;border-radius:999px;background:#37623d;color:#fff;
  height:4.05vw;min-height:44px;font:600 .80vw/1 var(--sans);
}

/* Three benefits */
.contact-benefits{
  margin:0 3.9vw 1.0vw;
  min-height:14.4vw;
  border-radius:.85vw;
  background:#f0f4eb;
  display:grid;grid-template-columns:repeat(3,1fr);
  align-items:center;
}
.benefit{text-align:center;padding:1.2vw 2vw}
.benefit-icon{
  width:5.0vw;height:5.0vw;border-radius:50%;
  background:#e4ecdf;margin:0 auto .75vw;
  display:flex;align-items:center;justify-content:center
}
.benefit-icon svg{width:2.55vw;height:2.55vw;stroke:#183b31;fill:none;stroke-width:1.7}
.benefit h3{margin:0 0 .45vw;font:500 1.55vw/1 var(--serif)}
.benefit p{margin:0;font:400 .73vw/1.45 var(--sans);color:#445965}

/* Quote image band */
.quote-band{
  height:13.35vw;
  background:url("assets/images/quote-bg.png") center/cover no-repeat;
}

/* Ressources gratuites */
.resources-lead{
  min-height:8.75vw;background:#faece7;
  display:flex;align-items:center;padding:1.75vw 6.45vw;gap:1.25vw
}
.resources-icon{
  width:4.4vw;height:4.4vw;border-radius:50%;
  background:#f7dcd2;display:flex;align-items:center;justify-content:center;flex:0 0 auto
}
.resources-icon svg{width:2.55vw;height:2.55vw;stroke:#a24c30;fill:none;stroke-width:1.5}
.resources-copy h2{margin:0;color:#9c442b;font:500 2.0vw/.98 var(--serif)}
.resources-copy p{margin:.35vw 0 0;color:#9b5a44;font:400 .69vw/1.3 var(--sans)}
.resources-form{
  margin-left:auto;display:flex;align-items:center;gap:1vw;width:35.4vw
}
.resources-form input{
  flex:1;height:3.55vw;min-height:42px;border:0;border-radius:999px;background:#fff;
  padding:0 1.45vw;font:400 .70vw/1 var(--sans);outline:0
}
.resources-form button{
  border:0;border-radius:999px;background:#174f38;color:#fff;
  height:3.55vw;min-height:42px;width:12.6vw;
  font:600 .72vw/1 var(--sans)
}

/* Footer */
.footer{background:#174f38;color:#fff;padding:3.15vw 6.65vw 1.18vw}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr .8fr 1fr;gap:4.1vw}
.footer-brand strong{display:block;font:500 1.72vw/1 var(--serif)}
.footer-brand .subtitle{margin:.42vw 0 1.25vw;font:500 .67vw/1.25 var(--sans)}
.footer-brand .promise{margin:0;font:400 .75vw/1.45 var(--sans)}
.footer h3{margin:0 0 .98vw;font:600 .72vw/1 var(--sans)}
.footer a{display:block;margin-bottom:.45vw;font:400 .68vw/1.1 var(--sans)}
.social-icons{display:flex;align-items:center;gap:1.1vw}
.social-icons a{margin:0;display:flex;align-items:center;justify-content:center}
.social-icons svg{width:1.45vw;height:1.45vw;min-width:18px;min-height:18px}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.45);margin-top:2.45vw;padding-top:.92vw;
  display:flex;justify-content:space-between;font:400 .59vw/1.2 var(--sans)
}

/* Responsive */
@media(max-width:1050px){
  .site-header{height:72px;padding:0 24px}.brand{min-width:auto}.brand strong{font-size:23px}.brand span{font-size:9px}
  .site-nav{display:none}.menu-toggle{display:block;margin-left:auto;border:0;background:none;font-size:25px;color:var(--ink)}
  .contact-hero{grid-template-columns:1fr;height:auto;min-height:0}
  .contact-hero-copy{padding:58px 7%}.contact-hero h1{font-size:58px}.eyebrow{font-size:11px}.contact-hero p{font-size:15px;max-width:650px}
  .hero-btn{font-size:12px;padding:15px 24px}.hero-values{font-size:24px}.contact-hero-photo{aspect-ratio:1.45/1}
  .contact-main{grid-template-columns:1fr;padding:48px 7%;gap:36px}
  .info-block{grid-template-columns:60px 1fr}.icon-circle{width:60px;height:60px}.icon-circle svg{width:30px;height:30px}
  .info-block h2{font-size:25px}.info-block p{font-size:12px}.info-block strong{font-size:11px}.signature-contact{width:310px}
  .contact-card{padding:32px;border-radius:16px}.contact-card h2{font-size:38px}.contact-card>p{font-size:13px}
  .field,.field-wide{font-size:11px;height:48px;border-radius:9px}.contact-form{gap:12px}.consent{font-size:10px}.submit-btn{width:320px;height:48px;font-size:11px}
  textarea.field-wide{height:130px}
  .contact-benefits{margin:0 4% 18px;min-height:170px}.benefit-icon{width:58px;height:58px}.benefit-icon svg{width:30px;height:30px}.benefit h3{font-size:25px}.benefit p{font-size:11px}
  .quote-band{height:170px}
  .resources-lead{padding:24px 6%;min-height:110px;flex-wrap:wrap}.resources-icon{width:56px;height:56px}.resources-copy h2{font-size:29px}.resources-copy p{font-size:10px}.resources-form{width:min(460px,100%);margin-left:auto}.resources-form input,.resources-form button{height:46px;font-size:11px}.resources-form button{width:145px}
  .footer{padding:46px 6% 18px}.footer-grid{grid-template-columns:1.6fr 1fr 1fr;gap:34px}.footer-brand strong{font-size:25px}.footer-brand .subtitle,.footer h3,.footer a{font-size:10px}.footer-brand .promise{font-size:11px}.footer-bottom{font-size:9px}
}
@media(max-width:650px){
  .contact-hero h1{font-size:46px}
  .contact-form{grid-template-columns:1fr}.field,.field-wide,.consent,.submit-btn{grid-column:1}
  .contact-benefits{grid-template-columns:1fr;padding:20px 0}.benefit{padding:20px 8%}
  .quote-band{height:150px;background-position:center}
  .resources-lead{display:grid;grid-template-columns:auto 1fr}.resources-form{grid-column:1/-1;margin:8px 0 0;width:100%}
  .footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.footer-bottom{flex-direction:column;gap:6px}
}

.ct-whatsapp-contact{display:inline-block;background:#315a45;color:#fff!important;text-decoration:none!important;padding:10px 16px;border-radius:999px;font-weight:600}
.ct-whatsapp-contact:hover,.ct-whatsapp-contact:focus{opacity:.9;color:#fff!important}

.whatsapp-box{display:flex;gap:18px;align-items:flex-start;margin-top:22px;padding:22px 24px;background:#eef4ef;border-radius:18px}
.whatsapp-icon{width:46px;height:46px;flex:0 0 46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#315a45;color:#fff;font-size:20px}
.whatsapp-box h2{margin:0 0 6px}
.whatsapp-box p{margin:0 0 14px}
.whatsapp-btn{display:inline-block;background:#315a45;color:#fff!important;text-decoration:none!important;padding:11px 18px;border-radius:999px;font-weight:600;font-size:12px}
.whatsapp-btn:hover,.whatsapp-btn:focus{opacity:.9;color:#fff!important}