/* ==========================================================================
   Funnel de soumission — portes et fenetres en fibre de verre
   Page unique, bilingue FR/EN, orientee conversion.
   ========================================================================== */

:root{
  --ink:#0B1220;
  --body:#414F5B;
  --muted:#6C7A87;
  --line:#E3E8E9;

  --green:#17805A;
  --green-dark:#0F5C41;
  --green-soft:#EAF5F0;

  --amber:#EE9F2E;
  --amber-dark:#D2851A;

  --paper:#FFFFFF;
  --soft:#F5F7F6;

  --radius:14px;
  --radius-l:22px;

  --shadow:0 1px 2px rgba(11,18,32,.05), 0 12px 30px -12px rgba(11,18,32,.18);
  --shadow-l:0 30px 60px -22px rgba(11,18,32,.38);

  --wrap:1140px;
  --gutter:clamp(18px,5vw,44px);

  --sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
         "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--sans);font-size:17px;line-height:1.62;
  color:var(--body);background:var(--paper);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,picture,svg{display:block;max-width:100%;}
img{height:auto;}
a{color:inherit;}
button,input,select,textarea{font:inherit;color:inherit;}
h1,h2,h3,p,ul,ol{margin:0;}
ul{padding:0;list-style:none;}
.hero__media picture,.tile__img picture{display:block;width:100%;height:100%;}

h1,h2,h3{color:var(--ink);font-weight:700;line-height:1.1;letter-spacing:-.03em;text-wrap:balance;}
h1{font-size:clamp(2.15rem,1.45rem + 3.1vw,3.5rem);}
h2{font-size:clamp(1.8rem,1.3rem + 2.2vw,2.75rem);}
h3{font-size:clamp(1.12rem,1.02rem + .45vw,1.35rem);letter-spacing:-.022em;}
p{text-wrap:pretty;}
strong{color:var(--ink);font-weight:650;}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);}
.section{padding-block:clamp(56px,7vw,100px);}
.section--soft{background:var(--soft);}
.section--ink{background:var(--ink);color:#B4C0CB;}
.section--ink h2,.section--ink h3{color:#fff;}

.eyebrow{
  display:inline-block;font-size:.735rem;font-weight:750;letter-spacing:.15em;
  text-transform:uppercase;color:var(--green);margin-bottom:.75rem;
}
.section--ink .eyebrow{color:var(--amber);}
.head{max-width:60ch;margin-bottom:clamp(30px,3.5vw,50px);}
.head--center{margin-inline:auto;text-align:center;}
.head p{margin-top:.9rem;font-size:clamp(1.02rem,.97rem + .3vw,1.18rem);}

/* ---------------- Buttons ---------------- */
.btn{
  --bg:var(--green);--fg:#fff;--bd:var(--green);
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.95em 1.7em;background:var(--bg);color:var(--fg);
  border:1.5px solid var(--bd);border-radius:999px;
  font-size:.97rem;font-weight:650;letter-spacing:-.01em;line-height:1.2;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease;
  box-shadow:var(--shadow);
}
.btn:hover{transform:translateY(-2px);}
.btn:focus-visible{outline:3px solid var(--amber);outline-offset:3px;}
.btn--cta{--bg:var(--amber);--bd:var(--amber);--fg:#2A1A03;}
.btn--cta:hover{--bg:var(--amber-dark);--bd:var(--amber-dark);}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:#CBD4D6;box-shadow:none;}
.btn--ghost:hover{--bd:var(--ink);}
.btn--lg{padding:1.08em 2em;font-size:1.03rem;}
.btn--block{width:100%;}

/* ---------------- Header ---------------- */
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .2s ease;
}
.header.is-stuck{border-bottom-color:var(--line);}
.header__in{display:flex;align-items:center;gap:14px;min-height:66px;}

.mark{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;flex:none;}
.mark svg{width:30px;height:30px;flex:none;}
.mark span{
  font-size:.99rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.15;
}
.header__spacer{margin-left:auto;}

.lang{display:inline-flex;padding:3px;background:var(--soft);border:1px solid var(--line);border-radius:999px;flex:none;}
.lang button{
  padding:.32em .72em;border:0;border-radius:999px;background:transparent;
  font-size:.775rem;font-weight:750;letter-spacing:.04em;color:var(--muted);cursor:pointer;
}
.lang button[aria-pressed="true"]{background:var(--paper);color:var(--green);box-shadow:var(--shadow);}

/* ---------------- Hero ---------------- */
.hero{position:relative;isolation:isolate;background:var(--ink);overflow:hidden;}
.hero__media{position:absolute;inset:0;z-index:-2;}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 60%;}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(103deg,rgba(8,14,25,.94) 0%,rgba(8,14,25,.80) 46%,rgba(8,14,25,.55) 100%);
}
.hero__in{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,64px);
  align-items:center;padding-block:clamp(44px,5.5vw,84px);
}
.hero h1{color:#fff;}
.hero h1 em{font-style:normal;color:var(--amber);}
.hero__lead{margin-top:1.15rem;color:#C6D2DC;font-size:clamp(1.03rem,.98rem + .4vw,1.22rem);max-width:52ch;}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.8rem;}
.chips li{
  display:flex;align-items:center;gap:.45em;
  padding:.42em .9em;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  color:#DCE6EE;font-size:.83rem;font-weight:560;
}
.chips svg{width:14px;height:14px;color:var(--amber);flex:none;}

/* ---------------- Form card ---------------- */
.card{
  background:var(--paper);border-radius:var(--radius-l);
  box-shadow:var(--shadow-l);padding:clamp(22px,2.4vw,32px);
  color:var(--body);
}
.card h2,.card h3{color:var(--ink);}

.card__top{margin-bottom:1.15rem;}
.card__top h2{font-size:clamp(1.3rem,1.15rem + .7vw,1.6rem);}
.card__top p{font-size:.9rem;color:var(--muted);margin-top:.3rem;}

.bar{display:flex;gap:6px;margin-bottom:1.35rem;}
.bar span{flex:1;height:4px;border-radius:99px;background:var(--line);transition:background-color .3s ease;}
.bar span.is-on{background:var(--green);}

.step{display:none;}
.step.is-on{display:block;animation:fade .35s ease;}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.qlabel{display:block;font-size:.85rem;font-weight:700;color:var(--ink);margin-bottom:.6rem;}
.qlabel .opt{font-weight:500;color:var(--muted);}

.picks{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:1.25rem;}
.pick{
  display:flex;align-items:center;gap:.6rem;padding:.85em .9em;
  background:var(--soft);border:1.5px solid var(--line);border-radius:var(--radius);
  font-size:.9rem;font-weight:560;color:var(--ink);text-align:left;cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease,transform .15s ease;
}
.pick:hover{border-color:var(--green);transform:translateY(-1px);}
.pick[aria-pressed="true"]{background:var(--green-soft);border-color:var(--green);}
.pick svg{width:19px;height:19px;color:var(--green);flex:none;}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
.f{display:flex;flex-direction:column;gap:.35rem;}
.f--full{grid-column:1/-1;}
.f label{font-size:.83rem;font-weight:700;color:var(--ink);}
.f label .opt{font-weight:500;color:var(--muted);}
.f input,.f select,.f textarea{
  width:100%;padding:.76em .9em;background:var(--soft);
  border:1.5px solid var(--line);border-radius:11px;font-size:.95rem;color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;
}
.f textarea{resize:vertical;min-height:88px;}
.f select{
  appearance:none;cursor:pointer;padding-right:2.4em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C7A87' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8em center;background-size:16px;
}
.f input::placeholder,.f textarea::placeholder{color:#9AA7B0;}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:0;background:var(--paper);border-color:var(--green);
  box-shadow:0 0 0 4px rgba(23,128,90,.13);
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}

.actions{display:flex;gap:9px;margin-top:1.3rem;}
.actions .btn{flex:1;}
.actions .btn--ghost{flex:0 0 auto;padding-inline:1.15em;}

.note{margin-top:.85rem;font-size:.775rem;color:var(--muted);line-height:1.5;text-align:center;}

.msg{display:none;margin-top:1rem;padding:.85em 1em;border-radius:11px;font-size:.9rem;}
.msg.is-on{display:block;background:#FDF0EC;border:1px solid #F2CDC2;color:#8C3A20;}

.spinner{
  width:1em;height:1em;border:2px solid rgba(255,255,255,.45);
  border-top-color:#2A1A03;border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.done{display:none;text-align:center;padding:clamp(22px,3vw,38px) 0;}
.done.is-on{display:block;}
.done__ic{
  display:grid;place-items:center;width:58px;height:58px;margin:0 auto 1.1rem;
  background:var(--green-soft);color:var(--green);border-radius:50%;
}
.done__ic svg{width:28px;height:28px;}
.done p{color:var(--muted);margin-top:.5rem;font-size:.95rem;}
.is-hidden{display:none !important;}

/* ---------------- Value tiles ---------------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);}
.tiles--2{grid-template-columns:repeat(2,1fr);}
.tile__img--tall{aspect-ratio:16/10;}
.tile .checks{margin-top:1.15rem;}
.tile .checks li{font-size:.9rem;}
.tile .checks svg{width:17px;height:17px;margin-top:.2em;}
.klimat{
  display:inline-flex;align-items:center;gap:.45em;margin-bottom:.7rem;
  padding:.3em .8em;border-radius:999px;
  font-size:.72rem;font-weight:750;letter-spacing:.09em;text-transform:uppercase;
}
.klimat--cold{background:#E7F0F7;color:#1C5679;}
.klimat--hot{background:#FDF0DF;color:#96601A;}
.tile{
  display:flex;flex-direction:column;overflow:hidden;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius-l);
  transition:transform .2s ease,box-shadow .2s ease;
}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.tile__img{aspect-ratio:4/3;overflow:hidden;background:var(--green-soft);}
.tile__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.tile:hover .tile__img img{transform:scale(1.04);}
.tile__body{padding:clamp(19px,2vw,26px);flex:1;}
.tile h3{margin-bottom:.45rem;}
.tile p{font-size:.93rem;color:var(--muted);}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:1rem;}
.tags li{padding:.3em .65em;background:var(--soft);border:1px solid var(--line);border-radius:7px;font-size:.775rem;}

/* ---------------- Split ---------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,70px);align-items:center;}
.split--flip .split__media{order:2;}
.split__media{border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow-l);}
.split__body p+p{margin-top:.9rem;}
.checks{margin-top:1.5rem;display:grid;gap:.75rem;}
.checks li{display:flex;gap:.7em;font-size:.97rem;}
.checks svg{width:19px;height:19px;flex:none;margin-top:.22em;color:var(--green);}
.section--ink .checks svg{color:var(--amber);}
.checks b{color:var(--ink);font-weight:650;}
.section--ink .checks b{color:#fff;}

/* ---------------- Numbers ---------------- */
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);}
.num{padding:clamp(20px,2.2vw,30px);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-l);}
.num b{display:block;font-size:clamp(1.9rem,1.3rem + 2vw,2.7rem);font-weight:750;letter-spacing:-.04em;color:var(--green);line-height:1;}
.num b sup{font-size:.4em;top:-1.2em;}
.num span{display:block;margin-top:.6rem;font-size:.9rem;color:var(--muted);line-height:1.45;}

/* ---------------- Steps ---------------- */
.flow{counter-reset:n;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,34px);}
.flow li{position:relative;padding-top:2.6rem;}
.flow li::before{
  counter-increment:n;content:counter(n);
  position:absolute;top:0;left:0;display:grid;place-items:center;
  width:32px;height:32px;border-radius:50%;
  background:var(--amber);color:#2A1A03;font-size:.9rem;font-weight:750;
}
.flow h3{font-size:1.05rem;margin-bottom:.35rem;}
.flow p{font-size:.92rem;color:#98A6B2;}

/* ---------------- Final CTA ---------------- */
.final{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:center;}

/* ---------------- Footer ---------------- */
.footer{background:var(--ink);color:#7C8A97;padding-block:34px;border-top:1px solid rgba(255,255,255,.08);}
.footer__in{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;align-items:center;font-size:.82rem;}
.footer a{color:#A9B6C1;}

/* ---------------- Sticky mobile CTA ---------------- */
.mob{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-top:1px solid var(--line);
}
.mob .btn{width:100%;}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.reveal.is-in{opacity:1;transform:none;}

/* ---------------- Responsive ---------------- */
@media (max-width:980px){
  .hero__in{grid-template-columns:1fr;}
  .tiles,.nums,.flow{grid-template-columns:1fr 1fr;}
  .tiles--2 .tile:last-child{grid-column:auto;}
  .flow li:last-child,.tiles .tile:last-child,.nums .num:last-child{grid-column:1/-1;}
  .split,.final{grid-template-columns:1fr;}
  .split--flip .split__media{order:0;}
  body{padding-bottom:72px;}
  .mob{display:block;}
}
@media (max-width:720px){
  /* Le CTA collant en bas d'ecran suffit : on libere la barre du haut. */
  .header .btn--cta{display:none;}
}
@media (max-width:600px){
  body{font-size:16.5px;}
  .tiles,.nums,.flow,.picks,.fields{grid-template-columns:1fr;}
  .flow li:last-child,.tiles .tile:last-child,.nums .num:last-child{grid-column:auto;}
  .mark span{font-size:.9rem;}
  .actions{flex-wrap:wrap;}
  .actions .btn{flex:1 1 100%;}
  .actions .btn--ghost{order:2;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;}
}