:root{
  --navy: #0b2e3c;
  --navy-2:#0a3a53;
  --light: #9fd2f1;
  --bg: #f4f1ed;
  --text: #0b2e3c;
  --muted: rgba(11,46,60,.78);
  --max: 1200px;
  --radius: 14px;
}

*{ 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: #ffffff;
}

.container{
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
}

h1,h2{
  font-family: Poppins, Inter, system-ui, sans-serif;
  margin:0;
  letter-spacing: -0.02em;
}

h1{
  color: #fff;
  font-weight: 800;
  text-align:center;
  font-size: clamp(34px, 4.5vw, 64px);
  line-height: 1.05;
  text-transform: uppercase;
}

h2{
  font-weight: 800;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.05;
  color: var(--navy);
}

p{
  font-size: 20px;
  line-height: 1.7;
  margin: 0 0 18px 0;
  color: var(--muted);
}

strong{ color: var(--navy); font-weight: 800; }

.hero{
  position: relative;
  min-height: 86vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.hero__bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(7,25,34,.65), rgba(7,25,34,.55)),
    url("./assets/images/hero-bg.jpg");
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}

.hero__content{
  position: relative;
  padding: 96px 0;
  text-align:center;
}

.hero__lead{
  margin: 36px auto 0 auto;
  max-width: 980px;
  color: rgba(255,255,255,.86);
  font-size: clamp(18px, 1.6vw, 26px);
  line-height: 1.8;
}

.hero__actions{
  margin-top: 40px;
  display:flex;
  gap: 18px;
  justify-content:center;
  flex-wrap: wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-family: Poppins, Inter, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .02em;
  border-radius: 8px;
  padding: 16px 26px;
  border: 2px solid transparent;
  transition: transform .08s ease, filter .15s ease;
  user-select:none;
}

.btn:active{ transform: translateY(1px); }
.btn:hover{ filter: brightness(1.03); }

.btn--light{
  background: var(--light);
  color: #ffffff;
}

.btn--dark{
  background: var(--navy);
  color: #ffffff;
}

.btn--wide{ width: min(320px, 100%); margin-top: 18px; }
.btn--xl{ width: min(420px, 100%); padding: 18px 26px; margin-top: 20px; }
.btn--contact{ width: min(360px, 100%); padding: 18px 26px; border-radius: 10px; }

.section{
  padding: 84px 0;
}

.section--plain{ background: #ffffff; }
.section--tint{ background: var(--bg); }

.two-col{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 54px;
  align-items:start;
}

.two-col__right p{ margin-top: 22px; }

.note{
  margin-top: 34px;
  font-size: 22px;
  color: var(--muted);
}

.media{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items:center;
}

.media--reverse{
  grid-template-columns: 1fr 1fr;
}

.media--reverse .media__content{ order: 1; }
.media--reverse .media__img, .media--reverse .media__aside{ order: 2; }

.media--align-start{ align-items:start; }

.media__img{
  position: relative;
  border-radius: 0;
  overflow:hidden;
}

.media__img img{
  width: 100%;
  height: auto;
  display:block;
}

.media__img--left{
  border-left: 12px solid var(--navy);
  padding-left: 12px;
}

.media__img--bar::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width: 26px;
  height:100%;
  background: var(--light);
}

.media__content{
  padding: 4px 0;
}

.list{
  margin: 18px 0 0 0;
  padding-left: 28px;
  font-size: 22px;
  line-height: 1.85;
  color: var(--muted);
}

.list li{ margin: 10px 0; }

.list--spaced li{ margin: 18px 0; }

.emphasis{
  font-weight: 800;
  color: var(--navy);
  margin-top: 16px;
}

.lead-italic{
  margin-top: 18px;
  font-style: italic;
  font-weight: 600;
  color: var(--muted);
}

.media__aside{
  display:flex;
  flex-direction:column;
  gap: 20px;
}

.smallprint p{
  font-size: 18px;
  line-height: 1.8;
  color: rgba(11,46,60,.72);
}

.contact{
  background: var(--navy);
  padding: 84px 0;
  color:#fff;
}

.contact__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items:start;
}

.contact__title{
  color:#fff;
  font-size: clamp(40px, 4.5vw, 62px);
}

.contact__info p{
  color: rgba(255,255,255,.88);
  font-size: 26px;
  line-height: 1.75;
  margin: 0 0 18px 0;
}

.contact__prompt{
  margin-top: 30px !important;
}

.footer{
  background: var(--navy);
  padding: 18px 0 26px;
}

.footer__inner{
  display:flex;
  justify-content:flex-end;
}

.footer__link{
  color: rgba(255,255,255,.72);
  text-decoration:none;
  font-size: 14px;
}

.footer__link:hover{ color: rgba(255,255,255,.9); }

@media (max-width: 980px){
  .two-col{ grid-template-columns: 1fr; gap: 28px; }
  .media{ grid-template-columns: 1fr; gap: 34px; }
  .media--reverse .media__content{ order: 2; }
  .media--reverse .media__img, .media--reverse .media__aside{ order: 1; }
  .contact__grid{ grid-template-columns: 1fr; gap: 28px; }
  p{ font-size: 18px; }
  .list{ font-size: 20px; }
  .contact__info p{ font-size: 20px; }
  .hero{ min-height: 78vh; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .btn{ transition:none; }
}



/* =========================
   Page estimation
   ========================= */

.page-hero{
  position: relative;
  min-height: 46vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  padding: 56px 0 34px 0;
}
.page-hero__bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(7,25,34,.72), rgba(7,25,34,.60)),
    url("./assets/images/estimation.jpg");
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}
.page-hero__content{ position: relative; padding: 38px 0; }
.page-hero__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.page-hero__title{
  margin: 0 0 10px 0;
  text-align:left;
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1.05;
}
.page-hero__lead{
  max-width: 880px;
  color: rgba(255,255,255,.86);
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
}
.page-hero__lead strong{ color:#fff; }

.page-main{ background: #fff; }

.link-back{
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-weight: 700;
  font-family: Poppins, Inter, system-ui, sans-serif;
  letter-spacing: -.01em;
}
.link-back:hover{ text-decoration: underline; }

.btn--sm{ padding: 10px 14px; font-size: 14px; border-radius: 12px; }

.callout{
  background: #ffffff;
  border: 1px solid rgba(11,46,60,.14);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  max-width: 880px;
}
.callout h3{
  margin: 0 0 10px 0;
  font-family: Poppins, Inter, system-ui, sans-serif;
  color: var(--navy);
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: 22px;
}
.callout p{ margin: 0 0 14px 0; font-size: 18px; }

/* Layout estimation (inspiration "best-in-class" estimate pages)
   - colonne gauche : pédagogie / réassurance
   - colonne droite : outil dans une carte */
.est-grid{
  display:grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 44px;
  align-items:start;
}
.est-copy{
  padding-top: 6px;
}
.est-title{
  font-family: Poppins, Inter, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: 1.05;
  color: var(--navy);
  margin: 0 0 14px 0;
}
.est-lead{
  font-size: 18px;
  line-height: 1.7;
  margin: 0 0 18px 0;
  color: rgba(11,46,60,.80);
  max-width: 52ch;
}
.est-steps{
  display:grid;
  gap: 12px;
  margin: 18px 0 22px 0;
}
.est-step{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(11,46,60,.10);
  background: rgba(159,210,241,.16);
}
.est-step__n{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family: Poppins, Inter, system-ui, sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  background: var(--navy);
  flex: 0 0 auto;
  margin-top: 2px;
}
.est-step span{
  color: rgba(11,46,60,.82);
  font-size: 16px;
  line-height: 1.6;
}
.est-note{
  border-radius: 18px;
  border: 1px solid rgba(11,46,60,.12);
  background: #fff;
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
  padding: 16px 16px;
  max-width: 56ch;
}
.est-note__title{
  font-family: Poppins, Inter, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: 6px;
}
.est-note p{
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(11,46,60,.78);
}
.est-tool{
  position: relative;
}

.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}

/* =========================
   Simulateur (fourni)
   ========================= */

#simu-girardin{
  max-width: 100%;
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
#simu-girardin.pf-card{
  background: #ffffff;
  border: 1px solid rgba(11,46,60,.14);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 18px 44px rgba(0,0,0,.10);
}
#simu-girardin h2{
  margin-top: 0;
  font-family: Poppins, Inter, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 22px;
  color: var(--navy);
}
#simu-girardin form{ display: grid; gap: 12px; margin-top: 12px; }
#simu-girardin label{ font-weight: 700; color: var(--navy); font-size: 14px; }
#simu-girardin input,
#simu-girardin select{
  width: 100%;
  padding: 12px 12px;
  border: 1px solid rgba(11,46,60,.18);
  border-radius: 14px;
  font-size: 16px;
  background: #fff;
}
#simu-girardin input::placeholder{ color: rgba(11,46,60,.45); }
#simu-girardin input:focus,
#simu-girardin select:focus{ outline: 3px solid rgba(159,210,241,.55); border-color: rgba(11,46,60,.35); }
#simu-girardin .pf-amount{ display: grid; grid-template-columns: 1fr 110px; gap: 10px; align-items:center; }
#simu-girardin .pf-btn{
  background: var(--navy);
  color: #fff;
  padding: 14px 16px;
  border: 0;
  border-radius: 14px;
  font-weight: 800;
  cursor: pointer;
  font-size: 15px;
  font-family: Poppins, Inter, system-ui, sans-serif;
  letter-spacing: .01em;
}
#simu-girardin .pf-btn:hover{ filter: brightness(1.05); }
#simu-girardin .pf-help{ font-size: 13px; color: rgba(11,46,60,.65); margin-top: -6px; }
#simu-girardin .pf-result{
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(11,46,60,.12);
  background: rgba(159,210,241,.18);
}
#simu-girardin .pf-badge-ok,
#simu-girardin .pf-badge-ko{
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 800;
  margin-left: 8px;
  font-size: 12px;
}
#simu-girardin .pf-badge-ok{ background: rgba(16,185,129,.16); color: #065f46; }
#simu-girardin .pf-badge-ko{ background: rgba(239,68,68,.16); color: #7f1d1d; }
#simu-girardin .pf-summary{ margin: 10px 0; color: rgba(11,46,60,.86); font-size: 15px; line-height: 1.6; }
#simu-girardin .pf-money{ font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
#simu-girardin .pf-error{ color: #7f1d1d; font-weight: 700; }
#simu-girardin .pf-note{ font-size: 13px; color: rgba(11,46,60,.70); margin-top: 12px; line-height: 1.55; }
#simu-girardin .pf-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
#simu-girardin .pf-btn-primary{
  background: var(--light);
  color: #fff;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 800;
  text-decoration: none;
  display: inline-block;
  font-family: Poppins, Inter, system-ui, sans-serif;
}
#simu-girardin .pf-btn-primary:hover{ filter: brightness(1.03); }
#simu-girardin .pf-sub{ font-size: 13px; color: rgba(11,46,60,.70); margin-top: 6px; line-height: 1.55; }

@media (max-width: 640px){
  .page-hero__top{ flex-direction: column; align-items: flex-start; }
  .footer__inner{ flex-direction: column; align-items: flex-start; }
  .est-grid{ grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 980px){
  .est-grid{ grid-template-columns: 1fr; gap: 28px; }
  .est-lead{ max-width: 100%; }
}