/* =========================================================
   TravauxPresto — Thème V2 « blanc · bleu · touche orange »
   À charger APRÈS assets/style.css (surcharge, sans le modifier).
   Retour arrière : retirer la ligne <link> de theme-v2.css.
   ========================================================= */

:root {
  /* Blanc dominant */
  --bg: #FFFFFF;
  --bg-alt: #F5F8FD;
  --bg-dark: #0E2A52;

  /* Texte */
  --ink: #0E2A52;
  --ink-2: #173F7F;
  --text: #3A4A63;
  --muted: #64748B;
  --line: #E3E8F0;
  --line-2: #CBD5E1;

  /* Bleu « chantier » = couleur principale */
  --primary: #1F4E9C;
  --primary-2: #173F7F;
  --primary-3: #3A6BC0;
  --primary-bg: #EEF3FB;
  --phone-cta: #1F4E9C;
  --phone-cta-hover: #173F7F;

  /* Bleus de support (remplacent les beiges) */
  --stone-50: #F5F8FD;
  --stone-100: #EEF3FB;
  --stone-200: #DCE7F7;
  --stone-400: #B7C9E6;

  /* Orange = touche d'accent (actions, chiffres) */
  --accent: #C84B16;
  --accent-2: #A83F13;
  --accent-bg: #FDEADF;
  --accent-soft: #F2A07A;

  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 4px 16px rgba(14, 42, 82, 0.08);
  --shadow-lg: 0 14px 36px rgba(14, 42, 82, 0.14);

  --font-serif: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-name: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* ---------- Typographie : Manrope partout, titres en 800 ---------- */
h1, h2, h3, h4 { font-family: var(--font); color: var(--ink); }
h1, h2 { font-weight: 800; letter-spacing: -0.025em; }
h3 { font-weight: 800; }
.hero h1 .accent { font-style: normal; font-weight: 800; color: var(--primary); }
.logo-name { font-family: var(--font); }

/* ---------- Boutons : orange = action, bleu = secondaire ---------- */
.btn { border-radius: 12px; font-weight: 700; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: #FFFFFF; }
.btn-outline { background: #FFFFFF; color: var(--primary); border-color: var(--primary); border-width: 2px; }
.btn-outline:hover { background: var(--primary-bg); border-color: var(--primary-2); color: var(--primary-2); }
.hero-cta .btn-outline { background: #FFFFFF; border-color: var(--primary); }
.hero-cta .btn-outline:hover { background: var(--primary-bg); border-color: var(--primary-2); color: var(--primary-2); }
.btn-white { background: #FFFFFF; color: var(--primary); }
.btn-white:hover { background: var(--primary-bg); color: var(--primary-2); }
.cta-band .btn-white, .section-dark .btn-white { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.cta-band .btn-white:hover, .section-dark .btn-white:hover { background: var(--accent-2); border-color: var(--accent-2); color: #FFFFFF; }

/* ---------- Kicker (petit trait) ---------- */
.kicker { background: var(--accent); }

/* ---------- Header ---------- */
.site-header { background: rgba(255, 255, 255, 0.97); }
.logo-tag { color: var(--muted); font-weight: 600; }
.nav > a, .nav > .has-submenu > a { color: var(--ink); font-weight: 600; }
.nav > a.active, .nav > .has-submenu.active > a { color: var(--primary); border-bottom: 2px solid var(--accent); padding-bottom: 0.3rem; }
.header-phone { background: var(--primary); }
.header-phone:hover { background: var(--primary-2); }
.header-actions .btn-primary { background: var(--accent); border-color: var(--accent); }

/* Méga-menu à 4 colonnes, ancré sur la largeur du header */
@media (min-width: 1025px) {
  .header-inner { position: relative; }
  .has-submenu:has(> .mega-menu) { position: static; }
  .mega-menu {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    transform: translateY(8px);
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 1.75rem 2rem;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    top: 100%;
  }
  .has-submenu:hover .mega-menu,
  .has-submenu:focus-within .mega-menu { transform: translateY(0); }
  .mega-menu-group h4 { color: var(--primary); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 2px solid var(--accent-bg); padding-bottom: 0.5rem; }
  .mega-menu-group a { font-weight: 600; color: var(--ink); }
  .mega-menu-group a:hover { background: var(--primary-bg); color: var(--primary); }
}
.mega-menu-group a.active { color: var(--primary); background: var(--primary-bg); }
.submenu a:hover, .submenu a.active { background: var(--primary-bg); color: var(--primary); }

/* ---------- Hero accueil ---------- */
.hero { background: linear-gradient(180deg, var(--bg-alt) 0%, #FFFFFF 100%); }
.hero-shape { display: none; }
.hero h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.07; font-weight: 800; letter-spacing: -0.03em; }
.hero-lead { font-size: 1.1rem; }
.hero .trust-bar svg, .hero .trust-bar .check { color: var(--primary); }
.hero-carousel, .hero-form { border-radius: 22px; }
.hero-form { box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.hero-form-head h3 { color: var(--ink); }

/* ---------- Sections ---------- */
.section-alt { background: var(--bg-alt); }
.section-warm { background: var(--bg-alt); }
.section-dark { background: var(--bg-dark); color: #DCE7F7; }
.section-dark .stat-label { color: #C3D2EA; }
.section-dark .stat-num { color: var(--accent-soft); }
.section:not(.section-dark) .stat-num { color: var(--accent); }
.section:not(.section-dark) .stat-num .suffix { color: var(--accent); }
.section-header h2 { font-family: var(--font); font-weight: 800; }
.heading-with-icon { color: var(--ink); }

/* ---------- Cartes / blocs ---------- */
.card { border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow); }
.card-icon.icon-primary, .card-icon.icon-ochre, .card-icon.icon-terracotta { background: var(--primary-bg); color: var(--primary); }
.domain-block { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.domain-badge { background: var(--accent); color: #FFFFFF; }
.duo-panel { border-radius: 20px; }
.duo-panel.duo-panel-permis { background: var(--bg-alt); border: 1px solid var(--stone-200); }
.duo-panel.dark, .duo-panel.duo-panel-aides { background: var(--bg-dark); }
.duo-panel.dark .card-icon { background: var(--accent); color: #FFFFFF; }
.energy-showcase { align-items: center; }
.energy-points .check { color: var(--accent-soft); }
.step { border-radius: var(--radius-lg); }
.step-num { color: var(--accent); }
.steps-recap-arrow { color: var(--accent); }

/* Section « rénovation énergétique » de l'accueil : bandeau bleu */
.section-energy { background: var(--primary); }
.section-energy h2, .section-energy .energy-points li { color: #FFFFFF; }
.section-energy .energy-photo-b { border-color: var(--primary); }

/* ---------- Pages intérieures ---------- */
.page-header {
  background: linear-gradient(180deg, var(--bg-alt) 0%, #FFFFFF 100%);
  border-bottom: 0;
}
.page-header h1 { font-weight: 800; }
.info-strip { background: var(--primary); border-radius: 18px; }
.info-strip-item .num { font-family: var(--font); font-weight: 800; color: #FFFFFF; }
.info-strip-item .lbl { color: #DCE7F7; }
.article h2 { font-family: var(--font); font-weight: 800; color: var(--ink); }
.article h3 { color: var(--ink); }
.article strong { color: var(--ink); }
.article a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.info-card { background: var(--bg-alt); border: 1px solid var(--stone-200); border-radius: var(--radius-lg); }
.feature-item { border-radius: var(--radius-lg); border-top: 4px solid var(--primary); }
.faq { border-radius: var(--radius-lg); }
.faq summary .plus { color: var(--accent); }

/* ---------- Bandeau bleu bas de page ---------- */
.cta-band { background: var(--primary); border-radius: 20px; }
.cta-band::before { opacity: 0.08; }
.cta-band h2, .cta-band p { color: #FFFFFF; }

/* ---------- Footer ---------- */
.site-footer { background: #0A1F3F; }
.footer-brand .logo-tag, .footer-brand p, .footer-col li, .footer-col a, .footer-bottom, .footer-bottom a { color: #B7C9E6; }
.footer-col h4 { color: #FFFFFF; }
.footer-col a:hover, .footer-bottom a:hover { color: #FFFFFF; }

/* =========================================================
   Nouveaux blocs de l'accueil V2
   ========================================================= */

/* 5 cartes de réassurance */
.v2-values { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.v2-value {
  flex: 1 1 200px;
  min-width: 0;
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  border-top: 4px solid var(--primary);
  padding: 1.4rem 1.3rem;
}
.v2-value .n { font-size: 1.9rem; font-weight: 800; color: var(--accent); line-height: 1; }
.v2-value h3 { margin-top: 0.8rem; font-size: 1.05rem; color: var(--ink); }
.v2-value p { margin-top: 0.5rem; font-size: 0.93rem; line-height: 1.55; color: var(--text); }

/* Tuiles « Je souhaite… » */
.v2-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 1.75rem; }
.v2-tile {
  display: block;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.v2-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.v2-tile img { width: 100%; height: 150px; object-fit: cover; }
.v2-tile-body { padding: 1.1rem 1.1rem 1.25rem; }
.v2-tile h3 { font-size: 1.05rem; color: var(--ink); }
.v2-tile p { margin-top: 0.35rem; font-size: 0.9rem; line-height: 1.5; color: var(--text); }
.v2-tile .more { display: inline-block; margin-top: 0.7rem; font-size: 0.88rem; font-weight: 700; color: var(--accent); }
@media (max-width: 1024px) { .v2-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .v2-tiles { grid-template-columns: 1fr; } .v2-tile img { height: 170px; } }

/* Pastilles secteurs */
.v2-towns { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.v2-towns a {
  background: #FFFFFF;
  border: 1.5px solid var(--line-2);
  border-radius: 999px;
  padding: 0.7rem 1.3rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
}
.v2-towns a:hover { border-color: var(--primary); color: var(--primary); }

/* Bloc final : portrait + texte + appel à l'action */
.v2-contact { display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: center; }
.v2-contact-photo { flex: 0 1 260px; min-width: 200px; }
.v2-contact-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 24px; box-shadow: var(--shadow-lg); }
.v2-contact-photo .name { margin-top: 0.8rem; font-weight: 800; color: var(--ink); }
.v2-contact-photo .role { font-size: 0.88rem; color: var(--muted); font-weight: 600; }
.v2-contact-copy { flex: 1 1 320px; min-width: 0; }
.v2-contact-copy h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); line-height: 1.15; }
.v2-contact-copy p { margin-top: 0.9rem; font-size: 1.05rem; }
.v2-contact-points { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-direction: column; gap: 0.6rem; font-weight: 700; color: var(--ink); }
.v2-contact-points li { display: flex; gap: 0.6rem; align-items: center; }
.v2-contact-points .check { color: var(--accent); }
.v2-contact-actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* Pages intérieures : fil d'Ariane + encart de rappel */
.v2-breadcrumb { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.88rem; font-weight: 600; color: var(--muted); margin-bottom: 1.25rem; }
.v2-breadcrumb a { color: var(--muted); }
.v2-breadcrumb a:hover { color: var(--primary); }
.v2-breadcrumb span:last-child { color: var(--primary); }
.v2-layout { display: flex; flex-wrap: wrap; gap: 3rem; align-items: flex-start; }
.v2-layout > .article { flex: 1 1 620px; min-width: 0; max-width: none; }
.v2-aside {
  flex: 0 1 340px;
  min-width: 280px;
  position: sticky;
  top: 96px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.v2-aside-head { background: var(--primary); padding: 1.3rem 1.5rem; }
.v2-aside-head strong { display: block; font-size: 1.15rem; line-height: 1.25; color: #FFFFFF; }
.v2-aside-head span { display: block; margin-top: 0.4rem; font-size: 0.88rem; color: #DCE7F7; }
.v2-aside-body { padding: 1.3rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.9rem; }
.v2-aside-person { display: flex; gap: 0.8rem; align-items: center; }
.v2-aside-person img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; object-position: top; }
.v2-aside-person .name { font-weight: 800; color: var(--ink); font-size: 0.95rem; }
.v2-aside-person .role { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.v2-aside .btn { width: 100%; }
.v2-aside small { font-size: 0.78rem; color: var(--muted); line-height: 1.5; }
@media (max-width: 900px) { .v2-aside { position: static; flex-basis: 100%; } }