/* =================================================================
   THEME.CSS — Design system
   Site lead-gen PAC / Climatisation
   ================================================================= */

:root {
  /* --- Ratios de proportion --- */
  --ratio: 1.618;
  --ratio-sq: 2.618;   /* ²  */
  --ratio-inv: 0.618; /* 1/ */

  /* --- Échelle typographique (progression harmonique) --- */
  --fs-xs:   0.694rem;  
  --fs-sm:   0.875rem;  
  --fs-base: 1rem;      
  --fs-md:   1.25rem;   
  --fs-lg:   1.618rem;  
  --fs-xl:   2.618rem;  
  --fs-2xl:  4.236rem;  
  --fs-3xl:  6.854rem;  

  /* --- Espacements (px) --- */
  --space-3:  3px;
  --space-5:  5px;
  --space-8:  8px;
  --space-13:  13px;
  --space-21:  21px;
  --space-34: 34px;
  --space-55: 55px;
  --space-89: 89px;
  --space-144: 144px;

  /* --- Grilles de mise en page --- */
  --grid-ratio: 1.618fr 1fr;
  --hero-major: 61.8%;
  --hero-minor: 38.2%;

  /* --- Largeurs --- */
  --maxw: 1144px;          /* ~ harmonique 1144 */
  --radius: 13px;          /* harmonique */
  --radius-sm: 8px;

  /* --- Palette : bleu / blanc / azur (ciel & mer) --- */
  --ink:      #0a2540;     /* bleu marine profond, texte principal */
  --deep:     #0d3b66;     /* bleu profond, fonds foncés & titres */
  --steel:    #1d6fb8;     /* bleu franc */
  --frost:    #4ea8de;     /* azur */
  --azur:     #2196f3;     /* azur vif, accents & liens */
  --azur-l:   #6ec6ff;     /* azur clair lumineux */
  --ice:      #e3f2fd;     /* bleu glace très clair */
  --paper:    #ffffff;     /* blanc dominant */
  --paper-2:  #f5fafe;     /* blanc bleuté */
  --copper:   #e8722d;     /* orange (conserve la touche chaude CTA) */
  --copper-l: #ff8c42;
  --ember:    #f26419;     /* accent CTA chaud (bouton devis) */
  --gold:     #4ea8de;     /* ré-affecté en azur (ex-doré) */
  --line:     rgba(10,37,64,0.10);

  --shadow-1: 0 2px 8px rgba(10,37,64,0.07);
  --shadow-2: 0 8px 34px rgba(10,37,64,0.13);
  --shadow-3: 0 21px 55px rgba(10,37,64,0.18);

  --font-display: 'Saira Condensed', 'Archivo Narrow', sans-serif;
  --font-body: 'Archivo Narrow', 'Saira Condensed', system-ui, sans-serif;
}

/* ---------- Reset léger ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: 0;
  color: var(--deep);
}
h1 { font-size: clamp(2.618rem, 6vw, var(--fs-2xl)); }
h2 { font-size: clamp(2rem, 4vw, var(--fs-xl)); margin-bottom: var(--space-34); }
h3 { font-size: var(--fs-lg); margin-bottom: var(--space-13); }
p  { margin-bottom: var(--space-21); max-width: 68ch; }

/* ---------- Conteneur ---------- */
.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--space-34);
}
.section { padding-block: var(--space-89); }
.section--tight { padding-block: var(--space-55); }

/* ---------- En-tête / nav sticky ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(246,244,238,0.86);
  backdrop-filter: blur(13px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 89px; /* harmonique */
}
.brand { display: flex; align-items: center; gap: var(--space-8); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); color: var(--deep); }
.brand .brand-mark { width: 34px; height: 34px; }
.nav-links { display: flex; gap: var(--space-34); align-items: center; }
.nav-links a { font-size: var(--fs-sm); font-weight: 500; color: var(--steel); transition: color .2s; }
.nav-links a:hover { color: var(--ember); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-8);
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm);
  padding: var(--space-13) var(--space-34);
  border-radius: var(--radius-sm); border: 0; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s;
  text-align: center; line-height: 1.2;
}
.btn--cta {
  background: var(--ember); color: #fff;
  box-shadow: var(--shadow-1);
}
.btn--cta:hover { transform: translateY(-2px); box-shadow: 0 13px 34px rgba(217,79,42,0.32); }
.btn--ghost { background: transparent; color: var(--deep); border: 1.5px solid var(--steel); }
.btn--ghost:hover { background: var(--deep); color: #fff; }
.btn--lg { font-size: var(--fs-base); padding: var(--space-21) var(--space-55); }

/* ---------- HERO (split  : 61.8 / 38.2) ---------- */
.hero { position: relative; background: linear-gradient(150deg, var(--deep) 0%, var(--ink) 55%, #06203b 100%); color: var(--paper); overflow: hidden; }
.hero::after { content:""; position:absolute; right:-10%; bottom:-30%; width:60%; height:120%; background: radial-gradient(circle, rgba(110,198,255,0.18) 0%, transparent 60%); pointer-events:none; }
.hero .wrap { position: relative; z-index: 2; }
.hero-grid {
  display: grid;
  grid-template-columns: var(--hero-major) var(--hero-minor);
  align-items: center;
  min-height: clamp(420px, 61.8vh, 680px);
  gap: var(--space-55);
}
.hero h1 { color: var(--paper); }
.hero h1 .accent { color: var(--azur-l); font-style: normal; }
.hero-lead { font-size: var(--fs-md); color: var(--ice); max-width: 46ch; margin-block: var(--space-34); }
.hero-cta-row { display: flex; gap: var(--space-21); flex-wrap: wrap; align-items: center; margin-top: var(--space-34); }
.hero-trust { display: flex; gap: var(--space-34); margin-top: var(--space-55); font-size: var(--fs-sm); color: var(--frost); flex-wrap: wrap; }
.hero-trust strong { color: var(--gold); font-family: var(--font-display); font-size: var(--fs-lg); display: block; }

/* Pompe à chaleur dessinée — hero */
.pac-blueprint { position: absolute; right: -2%; top: 50%; transform: translateY(-50%); width: min(52vw, 600px); z-index: 1; pointer-events: none; }
.pac-blueprint [data-draw] {
  fill: none; stroke: var(--frost); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  animation: pacdraw 2.2s ease forwards .3s;
}
.pac-blueprint .fan { transform-origin: 295px 235px; animation: pacdraw 1.6s ease forwards 1.2s, pacspin 9s linear infinite 2.9s; }
.pac-blueprint .wave { fill: none; stroke: var(--azur-l); stroke-width: 1.4; stroke-linecap: round; opacity: 0; animation: pacfade .8s ease forwards; }
.pac-blueprint .w1 { animation-delay: 2.3s; }
.pac-blueprint .w2 { animation-delay: 2.6s; }
.pac-blueprint .w3 { animation-delay: 2.9s; }
@keyframes pacdraw { to { stroke-dashoffset: 0; } }
@keyframes pacfade { to { opacity: .9; } }
@keyframes pacspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pac-blueprint [data-draw], .pac-blueprint .fan, .pac-blueprint .wave { animation: none; stroke-dashoffset: 0; opacity: .9; }
}


/* ---------- Cartes services (grille harmonique) ---------- */
.card-grid { display: grid; gap: var(--space-34); }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
/* Grille  asymétrique : une carte vedette + reste */
.card-grid--ratio { grid-template-columns: var(--grid-ratio); }

.card {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--space-34);
  box-shadow: var(--shadow-1);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
  display: flex; flex-direction: column; gap: var(--space-13);
  position: relative; overflow: hidden;
}
.card::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background: linear-gradient(90deg, var(--copper), var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: rgba(194,112,61,0.4); }
.card:hover::before { transform: scaleX(1); }
.card .card-icon { width: 55px; height: 55px; display:flex; align-items:center; justify-content:center; border-radius: var(--radius-sm); background: var(--ice); color: var(--steel); }
.card h3 { margin: 0; }
.card p { font-size: var(--fs-sm); color: #46586a; margin: 0; }
.card .card-link { margin-top: auto; font-weight: 600; font-size: var(--fs-sm); color: var(--ember); display: inline-flex; gap: 5px; }
.card--feature { background: linear-gradient(155deg, var(--deep), var(--ink)); color: var(--paper); }
.card--feature h3, .card--feature p { color: var(--paper); }
.card--feature p { color: var(--ice); }

/* ---------- Bandeau  explicatif ---------- */
.proof-band { background: var(--ink); color: var(--ice); }
.proof-band .wrap { display: grid; grid-template-columns: var(--grid-ratio); gap: var(--space-55); align-items: center; }
.proof-band h2 { color: var(--paper); }
.big-figure { font-family: var(--font-display); font-size: var(--fs-3xl); color: var(--gold); line-height: 0.9; }
.big-figure span { display:block; font-size: var(--fs-sm); font-family: var(--font-body); color: var(--frost); letter-spacing: 0.2em; text-transform: uppercase; margin-top: var(--space-13); }

/* ---------- Bloc devis (conversion) ---------- */
.quote-block { background: linear-gradient(135deg, var(--copper) 0%, var(--ember) 100%); border-radius: var(--radius); padding: var(--space-34) var(--space-21); }
.quote-intro { max-width: 640px; margin: 0 auto var(--space-21); text-align: center; color: #fff; }
.quote-intro p { margin-left: auto; margin-right: auto; color: rgba(255,255,255,0.92); }
.quote-block h2 { color: #fff; }
.quote-form { background: #fff; border-radius: var(--radius); padding: var(--space-21); box-shadow: var(--shadow-3); max-width: 700px; margin: 0 auto; min-width: 0; }
.quote-form h3 { color: var(--deep); text-align: center; }
/* Le widget VUD prend toute la largeur de sa carte */
.quote-form #v387580d4b2d { width: 100%; max-width: 100%; overflow-x: auto; }
.quote-form #v387580d4b2d * { max-width: 100%; }
.field { margin-bottom: var(--space-13); }
.field label { display:block; font-size: var(--fs-xs); font-weight:600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--steel); margin-bottom: 3px; }
.field input, .field select, .field textarea {
  width: 100%; padding: var(--space-13) var(--space-21); font-family: var(--font-body); font-size: var(--fs-sm);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--paper-2); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--copper); background:#fff; }

/* ---------- Sections de contenu / prose ---------- */
.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--space-55); }
.prose h3 { margin-top: var(--space-34); color: var(--steel); }
.prose ul.bullets { margin: var(--space-21) 0; padding-left: 0; }
.prose ul.bullets li { position: relative; padding-left: var(--space-34); margin-bottom: var(--space-13); }
.prose ul.bullets li::before { content:"→"; position:absolute; left:0; color: var(--copper); font-weight:700; }

/* Encart "à retenir" (GEO/SGEO ready) */
.takeaway { background: var(--ice); border-left: 4px solid var(--copper); border-radius: var(--radius-sm); padding: var(--space-34); margin: var(--space-34) 0; }
.takeaway strong { color: var(--deep); display:block; margin-bottom: var(--space-8); font-family: var(--font-display); }

/* ---------- Fil d'ariane ---------- */
.crumbs { font-size: var(--fs-xs); color: var(--frost); padding-top: var(--space-34); display:flex; gap: var(--space-8); flex-wrap: wrap; }
.crumbs a { color: var(--steel); }
.crumbs a:hover { color: var(--ember); }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; padding: var(--space-21) 0; font-family: var(--font-display); font-size: var(--fs-md); color: var(--deep); list-style: none; display:flex; justify-content: space-between; align-items:center; gap: var(--space-21); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; color: var(--copper); font-size: var(--fs-lg); transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding-bottom: var(--space-21); color: #46586a; font-size: var(--fs-sm); }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--ink); color: var(--ice); padding-block: var(--space-55) var(--space-34); margin-top: var(--space-89); }
.footer-grid { display: grid; grid-template-columns: 1.618fr 1fr 1fr 1fr; gap: var(--space-55); }
.site-footer h4 { color: var(--paper); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--space-21); }
.site-footer a { color: var(--frost); font-size: var(--fs-sm); display:block; padding: 3px 0; transition: color .2s; }
.site-footer a:hover { color: var(--copper-l); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); margin-top: var(--space-55); padding-top: var(--space-34); font-size: var(--fs-xs); color: var(--frost); display:flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-21); }

/* ---------- Eyebrow / labels ---------- */
.eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--copper); margin-bottom: var(--space-13); display:block; }
.section-head { max-width: 55ch; margin-bottom: var(--space-55); }

/* ---------- Animations chargement (staggered) ---------- */
@keyframes rise { from { opacity:0; transform: translateY(21px); } to { opacity:1; transform:none; } }
.reveal { animation: rise .7s cubic-bezier(.2,.7,.3,1) both; }
.d1 { animation-delay: .05s; } .d2 { animation-delay: .13s; } .d3 { animation-delay: .21s; } .d4 { animation-delay: .34s; }

@keyframes draw { to { stroke-dashoffset: 0; } }


/* ---------- Responsive ---------- */
/* ============ RESPONSIVE (mobile-first cascade) ============ */

/* Tablette large / petit desktop */
@media (max-width: 980px) {
  :root { --maxw: 100%; }
  .quote-grid { grid-template-columns: 1fr; gap: var(--space-21); }
  .card-grid--ratio { grid-template-columns: 1fr; }
}

/* Tablette */
@media (max-width: 880px) {
  .hero-grid, .proof-band .wrap { grid-template-columns: 1fr; }
  .card-grid--3 { grid-template-columns: 1fr 1fr; }
  .card-grid--2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; position: absolute; top: 89px; left:0; right:0; flex-direction: column; background: var(--paper); padding: var(--space-21); border-bottom: 1px solid var(--line); gap: var(--space-13); box-shadow: var(--shadow-2); }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links .btn--cta { width: 100%; justify-content: center; }
  .nav-toggle { display: block; font-size: var(--fs-lg); color: var(--deep); }
  /* La PAC passe en fond discret derrière le texte, sans le gêner */
  .pac-blueprint { opacity: 0.22; right: -20%; top: 38%; width: 90vw; }
  .hero-grid { position: relative; z-index: 2; }
  .proof-band .wrap { gap: var(--space-21); }
}

/* Mobile */
@media (max-width: 640px) {
  .section { padding-block: var(--space-34); }
  .section--tight { padding-block: var(--space-21); }
  .wrap { padding-inline: var(--space-21); }
  h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
  h2 { font-size: clamp(1.7rem, 6vw, 2.2rem); }
  .card-grid--3 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-21); }
  .hero-grid { min-height: auto; padding-block: var(--space-34); }
  .hero-cta-row { flex-direction: column; align-items: stretch; }
  .hero-cta-row .btn { width: 100%; justify-content: center; }
  .hero-trust { gap: var(--space-13) var(--space-21); }
  .quote-block { padding: var(--space-21); }
  .quote-form { padding: var(--space-13); }
  .big-figure { font-size: var(--fs-2xl) !important; }
  /* PAC encore plus discrète, ne déborde pas */
  .pac-blueprint { opacity: 0.16; width: 110vw; right: -30%; }
}

/* Petit mobile */
@media (max-width: 400px) {
  .wrap { padding-inline: var(--space-13); }
  .brand { font-size: var(--fs-base); }
  .hero-trust { flex-direction: column; gap: var(--space-8); }
}

/* ===== Bande CTA avant footer ===== */
.pre-footer { background: linear-gradient(135deg, var(--deep), var(--ink)); color:#fff; text-align:center; padding-block: var(--space-34); }
.pre-footer h2 { color:#fff; margin-bottom: var(--space-8); }
.pre-footer p { color: var(--ice); max-width:52ch; margin:0 auto var(--space-21); }
.footer-bottom span:last-child{display:inline-flex;gap:8px;white-space:nowrap}
.footer-bottom span:last-child a{display:inline}
@media (min-width:881px){.pac-blueprint{right:2%;width:min(44vw,520px)}}
@media (max-width:880px){.pac-blueprint{display:none}}
@media (max-width:880px){
.pac-blueprint{display:block;position:static;transform:none;width:80%;max-width:340px;margin:24px auto 0;opacity:.5;right:auto;top:auto}
.hero-grid{display:flex;flex-direction:column}
}