/* ============================================================================
   THÈME : Warm / Organic  -  Bricolage Grotesque + Inter
   Palette: #2d2520 · #faf6f0 · accent #d97706. Rondeurs, ombres douces, chaleur.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=Inter:wght@400;500;600&display=swap');

:root{
  --ink:#2d2520; --ink-soft:#6b5f54; --bg:#faf6f0; --card:#fff; --line:#ece2d4;
  --accent:#d97706; --accent-ink:#b45309; --max:1140px; --r:18px;
  --display:"Bricolage Grotesque",system-ui,sans-serif; --sans:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box;}
html,body{overflow-x:clip;}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.65;font-size:17px;}
main{max-width:var(--max);margin:0 auto;padding:0 1.5rem;}
a{color:var(--accent-ink);text-decoration:none;}a:hover{text-decoration:underline;text-underline-offset:3px;}

.site-header{display:flex;justify-content:space-between;align-items:center;max-width:var(--max);margin:0 auto;padding:1.3rem 1.5rem;}
.brand{font-family:var(--display);font-weight:700;font-size:1.35rem;color:var(--ink);}
.header-cta{font-weight:600;background:var(--ink);color:var(--bg);padding:.6rem 1.1rem;border-radius:999px;}
.header-cta:hover{background:var(--accent);text-decoration:none;}

.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:2.5rem;align-items:center;padding:3rem 0;}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,6vw,4rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 1rem;text-wrap:balance;}
.hero h1 .accent{color:var(--accent);}
.tagline{font-size:1.25rem;color:var(--ink-soft);margin:0 0 1.4rem;max-width:34ch;}
.arguments{list-style:none;padding:0;margin:1.8rem 0 0;display:grid;gap:.6rem;}
.arguments li{padding-left:2rem;position:relative;}
.arguments li::before{content:"";position:absolute;left:0;top:.45em;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(217,119,6,.15);}

.hero-form{position:sticky;top:1.5rem;}
.lead-form{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;display:grid;gap:.85rem;box-shadow:0 18px 40px -20px rgba(45,37,32,.35);}
.lead-form label{display:grid;gap:.3rem;font-size:.85rem;font-weight:600;}
.lead-form input,.lead-form textarea{font:400 1rem var(--sans);padding:.75rem .85rem;border:1px solid var(--line);border-radius:12px;background:var(--bg);}
.lead-form input:focus,.lead-form textarea:focus{outline:none;border-color:var(--accent);background:#fff;}
.lead-form button{font:600 1rem var(--sans);cursor:pointer;border:0;background:var(--accent);color:#fff;padding:.9rem;border-radius:12px;transition:transform .12s,background .12s;}
.lead-form button:hover{background:var(--accent-ink);transform:translateY(-1px);}
.form-note{text-align:center;font-size:.8rem;color:var(--ink-soft);margin:0;}

.hero-media{margin:0 0 2.5rem;}
.hero-media img{width:100%;height:clamp(280px,40vw,460px);object-fit:cover;border-radius:24px;filter:saturate(1.05);}
.hero-media figcaption{font-size:.75rem;color:var(--ink-soft);margin-top:.5rem;}

.content{padding:1.5rem 0;max-width:68ch;margin-inline:auto;font-size:1.05rem;}
.content h2{font-family:var(--display);font-weight:600;font-size:1.8rem;margin:2.4rem 0 1rem;}
.local-facts{list-style:none;padding:1.3rem 1.5rem;margin:2rem 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 30px -22px rgba(45,37,32,.4);}
.local-facts li{display:flex;justify-content:space-between;padding:.45rem 0;border-bottom:1px solid var(--line);}
.local-facts li:last-child{border-bottom:0;}
.local-facts strong{font-weight:600;color:var(--ink-soft);font-size:.85rem;}

.faq{padding:1rem 0 2.5rem;max-width:68ch;}
.faq h2{font-family:var(--display);font-size:1.8rem;}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1rem 1.2rem;margin-bottom:.7rem;}
.faq summary{font-weight:600;cursor:pointer;font-size:1.05rem;}
.faq details div{padding-top:.7rem;color:var(--ink-soft);}

.mesh{padding:2rem 0;border-top:1px solid var(--line);}
.mesh h2{font-family:var(--display);font-size:1.1rem;font-weight:600;margin:0 0 1.2rem;}
.link-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.5rem .8rem;}
.link-grid li{font-size:.95rem;}
.link-grid a{color:var(--ink);display:inline-block;padding:.2rem 0;}
.link-grid a:hover{color:var(--accent-ink);}

.site-footer{margin-top:3rem;border-top:1px solid var(--line);padding:2rem;text-align:center;color:var(--ink-soft);font-size:.88rem;}
.site-footer a{color:var(--ink-soft);}

@media(max-width:820px){
  .site-header{padding:.85rem 1rem;gap:.6rem;}
  .brand{font-size:clamp(.88rem,4vw,1.15rem);white-space:nowrap;gap:.45rem;}
  .brand-logo{height:26px;}
  .header-cta{white-space:nowrap;font-size:.85rem;padding:.5rem .85rem;}
  .hero{grid-template-columns:1fr;gap:1.8rem;padding:2rem 0;}
  .hero-form{position:static;}
  .hero h1{font-size:clamp(2.1rem,9vw,3rem);}
}

/* - Alias composants partagés (components.css, ajouté par le générateur) -- */
:root {
  --cmp-card: var(--card); --cmp-soft: #f6ead8; --cmp-band: #fff;
  --cmp-dark: #3a2f25; --cmp-line: var(--line);
  --cmp-accent: var(--accent); --cmp-accent-dark: var(--accent-ink);
  --cmp-cta: var(--accent); --cmp-cta-dark: var(--accent-ink);
  --cmp-r: var(--r); --cmp-display: var(--display);
}


/* ============================================================================
   COMPOSANTS PARTAGÉS static-local-pages
   Stat-bar, avantages, cartes de prix, simulateur, étapes, tarifs détaillés,
   callout, carte de France, hero CTA, dialog "Être rappelé", barre mobile.

   Ce fichier est AJOUTÉ automatiquement par le générateur après le CSS du
   thème, sauf si le thème contient le marqueur "components:included"
   (cas d'energy.css qui intègre ses propres versions).

   Il consomme des variables namespacées --cmp-* : chaque thème déclare un
   bloc d'alias les reliant à sa palette. Des valeurs de repli neutres sont
   fournies pour rester utilisable tel quel.
   ========================================================================== */

:root {
  --cmp-card-d: var(--cmp-card, #fff);
  --cmp-soft-d: var(--cmp-soft, rgba(0, 0, 0, .05));
  --cmp-band-d: var(--cmp-band, #fff);
  --cmp-dark-d: var(--cmp-dark, #1d1d20);
  --cmp-line-d: var(--cmp-line, var(--line, #ddd));
  --cmp-accent-d: var(--cmp-accent, var(--accent, #333));
  --cmp-accent-dark-d: var(--cmp-accent-dark, var(--cmp-accent, var(--accent, #111)));
  --cmp-cta-d: var(--cmp-cta, var(--cmp-accent, var(--accent, #333)));
  --cmp-cta-dark-d: var(--cmp-cta-dark, var(--cmp-cta, var(--cmp-accent, var(--accent, #111))));
  --cmp-r-d: var(--cmp-r, 12px);
  --cmp-display-d: var(--cmp-display, var(--display, inherit));
}

/* - Pictos --------------------------------------------------------------- */
.ic {
  width: 1.1em; height: 1.1em; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.15em; flex: none;
}
.brand-logo { height: 34px; width: auto; display: block; }
.brand { display: inline-flex; align-items: center; gap: .6rem; }
.header-cta { display: inline-flex; align-items: center; gap: .45rem; border: 0; cursor: pointer; }
.header-cta .ic { width: 1em; height: 1em; }

/* - Titres des sections composant ---------------------------------------- */
.benefits h2, .pricing h2, .steps h2, .estimator h2, .tarifs h2, .france h2 {
  font-family: var(--cmp-display-d); font-weight: 600; font-size: 1.9rem;
  margin: 0 0 1.8rem; text-align: center;
}
.benefits h2::before, .pricing h2::before, .steps h2::before,
.estimator h2::before, .tarifs h2::before, .france h2::before {
  content: ""; display: block; width: 2.6rem; height: 3px; border-radius: 2px;
  background: var(--cmp-accent-d); margin: 0 auto .9rem;
}
.benefits, .pricing, .steps, .estimator, .france { padding: 2.5rem 0 1rem; }

/* - Hero CTA -------------------------------------------------------------- */
.hero-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  margin-top: 1.6rem; padding: .95rem 1.6rem; border-radius: var(--cmp-r-d);
  background: var(--cmp-cta-d); color: #fff; font-weight: 600; font-size: 1.05rem;
  transition: background .15s;
}
.hero-cta:hover { background: var(--cmp-cta-dark-d); text-decoration: none; }
.hero-cta .ic { width: 1.15rem; height: 1.15rem; }

/* - Bandeau de confiance -------------------------------------------------- */
.stat-bar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  margin: 2.5rem 0 1rem; padding: 1.5rem 1.4rem;
  background: var(--cmp-dark-d); border-radius: var(--cmp-r-d);
}
.stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .2rem; }
.stat .ic {
  box-sizing: border-box; width: 2.6rem; height: 2.6rem; padding: .55rem;
  border-radius: 50%; color: #fff; margin-bottom: .4rem; stroke-width: 2.1;
  background: rgba(255, 255, 255, .16);
}
.stat-value { font-family: var(--cmp-display-d); font-weight: 700; font-size: 1.4rem; color: #fff; }
.stat-label { font-size: .82rem; color: rgba(255, 255, 255, .75); }

/* - Avantages ------------------------------------------------------------- */
.benefits, .steps {
  background: var(--cmp-band-d);
  box-shadow: 0 0 0 100vmax var(--cmp-band-d);
  clip-path: inset(0 -100vmax);
  padding-bottom: 2.5rem;
}
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.benefit {
  background: var(--cmp-card-d); border: 1px solid var(--cmp-line-d);
  border-radius: var(--cmp-r-d); padding: 1.4rem;
}
.benefit-ic, .price-ic, .step-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: calc(var(--cmp-r-d) + 4px);
  margin-bottom: .9rem;
  background: linear-gradient(140deg, var(--cmp-accent-d), var(--cmp-accent-dark-d));
}
.benefit-ic .ic, .price-ic .ic, .step-ic .ic {
  width: 1.55rem; height: 1.55rem; color: #fff; stroke-width: 2.1;
}
.benefit h3 { font-family: var(--cmp-display-d); font-size: 1.1rem; margin: 0 0 .4rem; }
.benefit p { margin: 0; opacity: .8; font-size: .95rem; }

/* - Cartes de prix --------------------------------------------------------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; align-items: stretch; }
.price-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--cmp-card-d); border: 1px solid var(--cmp-line-d);
  border-radius: var(--cmp-r-d); padding: 1.7rem 1.6rem;
}
.price-card.is-highlight { transform: translateY(-6px); border-color: var(--cmp-accent-d); }
.price-badge {
  position: absolute; top: -.7rem; left: 50%; transform: translateX(-50%);
  background: var(--cmp-accent-d); color: #fff; font-size: .72rem; font-weight: 600;
  padding: .25rem .7rem; border-radius: 999px; white-space: nowrap;
}
.price-card h3 { font-family: var(--cmp-display-d); font-size: 1.2rem; margin: 0 0 .2rem; }
.price-amount {
  font-family: var(--cmp-display-d); font-weight: 700; font-size: 1.5rem;
  color: var(--cmp-accent-dark-d); margin: 0 0 1rem;
}
.price-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.price-card li { display: flex; align-items: center; gap: .5rem; font-size: .92rem; opacity: .85; }
.price-card li .ic { width: 1.05rem; height: 1.05rem; color: var(--cmp-accent-d); }
.pricing-note { font-size: .85rem; opacity: .75; margin: 1rem 0 0; }

/* - Simulateur ------------------------------------------------------------- */
.est-box {
  background: linear-gradient(135deg, var(--cmp-accent-d) 0%, var(--cmp-accent-dark-d) 100%);
  color: #fff; border-radius: var(--cmp-r-d); padding: 1.6rem; display: grid; gap: 1.1rem;
}
.est-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.est-field { display: grid; gap: .4rem; font-weight: 600; font-size: .9rem; min-width: 0; }
.est-field select {
  font: 400 1rem var(--sans, inherit); padding: .7rem .8rem;
  border-radius: calc(var(--cmp-r-d) - 3px); border: 0; color: #1d1d20; background: #fff;
  width: 100%; min-width: 0;
}
.est-out { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.est-cell { background: rgba(255, 255, 255, .15); border-radius: 10px; padding: .9rem 1rem; display: grid; gap: .2rem; }
.est-k { font-size: .8rem; opacity: .85; }
.est-v { font-family: var(--cmp-display-d); font-weight: 700; font-size: 1.3rem; }
.est-tip {
  margin: 0; font-size: .85rem;
  background: rgba(255, 255, 255, .14); border-radius: 8px; padding: .55rem .85rem;
}
.est-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  background: var(--cmp-cta-d); color: #fff; font-weight: 600; padding: .85rem;
  border-radius: calc(var(--cmp-r-d) - 3px); border: 1px solid rgba(255, 255, 255, .35);
}
.est-cta:hover { text-decoration: none; background: var(--cmp-cta-dark-d); }
.est-note { font-size: .8rem; opacity: .75; margin: .7rem 0 0; }

/* - Étapes ------------------------------------------------------------------ */
.step-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.step {
  position: relative; background: var(--cmp-card-d); border: 1px solid var(--cmp-line-d);
  border-radius: var(--cmp-r-d); padding: 1.6rem 1.2rem 1.2rem;
}
.step-num {
  position: absolute; top: -.8rem; left: 1.2rem; width: 1.8rem; height: 1.8rem;
  border-radius: 50%; background: var(--cmp-accent-d); color: #fff;
  font-family: var(--cmp-display-d); font-weight: 700; font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
}
.step-ic { margin: .5rem 0 .8rem; }
.step h3 { font-family: var(--cmp-display-d); font-size: 1.05rem; margin: 0 0 .35rem; }
.step p { margin: 0; opacity: .8; font-size: .92rem; }

/* - Tarifs détaillés (accordéons) ------------------------------------------- */
.tarifs { padding: 2.5rem 0 1rem; max-width: 880px; margin-inline: auto; }
.tarifs h2 { margin-bottom: .6rem; }
.tarifs-intro { text-align: center; opacity: .8; margin: 0 0 1.6rem; }
.tarif-block {
  background: var(--cmp-card-d); border: 1px solid var(--cmp-line-d);
  border-radius: var(--cmp-r-d); margin-bottom: .8rem; overflow: hidden;
}
.tarif-block summary {
  font-family: var(--cmp-display-d); font-weight: 600; font-size: 1.05rem;
  cursor: pointer; list-style: none; padding: 1.1rem 1.3rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.tarif-block summary::-webkit-details-marker { display: none; }
.tarif-block summary::after {
  content: "▾"; color: var(--cmp-accent-d); font-size: .9rem; transition: transform .15s;
}
.tarif-block[open] summary::after { transform: rotate(180deg); }
.tarif-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tarif-table th {
  text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  background: var(--cmp-dark-d); color: #fff; padding: .7rem 1.3rem; font-weight: 600;
}
.tarif-table td { padding: .75rem 1.3rem; border-bottom: 1px solid var(--cmp-line-d); vertical-align: top; }
.tarif-table tr:last-child td { border-bottom: 0; }
.tarif-table td:first-child { opacity: .8; }
.tarif-table td:last-child { font-weight: 600; color: var(--cmp-accent-dark-d); white-space: nowrap; }
.tarif-table tr.is-included td:last-child { color: inherit; opacity: .7; font-weight: 500; }

/* - Encadré astuce ----------------------------------------------------------- */
.callout {
  display: flex; gap: .9rem; align-items: flex-start;
  background: var(--cmp-soft-d); border: 1px solid var(--cmp-line-d);
  border-left: 4px solid var(--cmp-accent-d); border-radius: var(--cmp-r-d);
  padding: 1.1rem 1.3rem; margin: 1.8rem 0;
}
.callout-ic {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.4rem; height: 2.4rem; border-radius: calc(var(--cmp-r-d) - 2px);
  background: linear-gradient(140deg, var(--cmp-accent-d), var(--cmp-accent-dark-d));
}
.callout-ic .ic { width: 1.25rem; height: 1.25rem; color: #fff; stroke-width: 2.1; }
.callout strong { font-family: var(--cmp-display-d); font-size: 1.02rem; }
.callout p { margin: .25rem 0 0; opacity: .8; font-size: .95rem; }

/* - Carte de France ------------------------------------------------------------ */
.france { text-align: center; }
.fr-map { display: block; width: 100%; max-width: 540px; height: auto; margin: 0 auto; }
.fr-map path { fill: var(--cmp-soft-d); stroke: var(--cmp-card-d); stroke-width: .6; transition: fill .12s; }
.fr-map .dep-on path { fill: var(--cmp-accent-d); }
.fr-map .dep-on:hover path { fill: var(--cmp-accent-dark-d); }
.fr-map a { cursor: pointer; }

/* - Dialog "Être rappelé" -------------------------------------------------------- */
.cb-dialog {
  border: 0; border-radius: var(--cmp-r-d); padding: 0; max-width: 26rem;
  width: calc(100% - 2.5rem); color: inherit; background: var(--cmp-card-d);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .5);
}
.cb-dialog::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px); }
.cb-form { display: grid; gap: .9rem; padding: 1.8rem 1.6rem; position: relative; }
.cb-form h3 { font-family: var(--cmp-display-d); font-size: 1.35rem; margin: 0; }
.cb-form > p { margin: 0; opacity: .8; font-size: .95rem; }
.cb-form label { display: grid; gap: .3rem; font-size: .8rem; font-weight: 600; opacity: .9; }
.cb-form input[type="tel"], .cb-form input[type="text"] {
  font: 400 1.05rem var(--sans, inherit); padding: .8rem .9rem;
  border: 1px solid var(--cmp-line-d); border-radius: calc(var(--cmp-r-d) - 3px);
  background: var(--cmp-soft-d); color: inherit;
}
.cb-form input:focus { outline: 2px solid var(--cmp-accent-d); outline-offset: 1px; }
.cb-submit {
  font: 600 1rem var(--sans, inherit); cursor: pointer; border: 0;
  background: var(--cmp-cta-d); color: #fff; padding: .9rem;
  border-radius: calc(var(--cmp-r-d) - 3px); transition: background .15s;
}
.cb-submit:hover { background: var(--cmp-cta-dark-d); }
.cb-close {
  position: absolute; top: .7rem; right: .7rem; width: 2rem; height: 2rem;
  border: 0; border-radius: 50%; background: var(--cmp-soft-d); color: inherit;
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}

/* - Barre mobile ------------------------------------------------------------------ */
.mobile-cta { display: none; }

/* - Mobile -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  body { padding-bottom: 4.6rem; }
  .stat-bar { grid-template-columns: repeat(2, 1fr); }
  .benefit-grid, .price-grid, .step-grid, .est-fields { grid-template-columns: 1fr; }
  .price-card.is-highlight { transform: none; }
  .hero-cta { display: flex; width: 100%; }
  .tarif-table th, .tarif-table td { padding: .65rem .9rem; }
  .tarif-table td:last-child { white-space: normal; }
  .mobile-cta {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    gap: .5rem; padding: .6rem; background: var(--cmp-card-d);
    border-top: 1px solid var(--cmp-line-d);
  }
  .mobile-cta a, .mobile-cta button {
    flex: 1; display: inline-flex; align-items: center; justify-content: center;
    gap: .4rem; padding: .8rem; border-radius: calc(var(--cmp-r-d) - 2px);
    font-weight: 600; font-size: .95rem; border: 0; cursor: pointer;
    font-family: var(--sans, inherit);
  }
  .mcta-call { background: var(--cmp-soft-d); color: inherit; border: 1px solid var(--cmp-line-d); }
  .mcta-quote { background: var(--cmp-cta-d); color: #fff; }
  .mobile-cta .ic { width: 1.05rem; height: 1.05rem; }
}