/* HODY CONSTRUCT — pages ville (seo/construction-*.html). Préfixe hv-. Écrit le 13/10/2026 (brief 09), forme de
   moule V3 (page ville), thème sombre Hody. Aucun texte écrit ici.
   Chargée AVANT commun.css (dernière feuille). Le thème assets/eco/ n'est pas modifié : on surcharge.

   Contrastes WCAG calculés (seuil 4,5:1 texte, 3:1 gros titres / éléments d'interface) :
     texte #F0F0F0 / fond #0D0D0D 17,05 ; / surface #161616 15,88 ; doux #A0A0A0 / fond 7,43 ; / surface 6,92
     or #EBC24F / fond 11,44 ; / surface 10,65 ; / noir #000 12,36 ; noir #0D0D0D sur or 11,44
     en-tête de page : texte blanc (86 % pour l'intro) sur photo pleine + voile #0D0D0D .94 -> .60 là où le texte se pose
       (pire cas : photo blanche pure sous le voile à 72 %) = 8,1:1 ; sur mobile voile uniforme .80, pire cas 7,9:1
     bande « Pourquoi » (#000) : blanc 100 % 21 ; blanc 78 % sur cartes (≈ #0f0f0f) 12,4 ; icône #0D0D0D sur or 11,44
     bandeau d'appel : texte posé sur #0D0D0D (voile plein à 72 % du bandeau ; sur mobile le texte est sous la photo, fond #0D0D0D)
   Règles du thème contournées : site.css cible `section>div>:is(p,h3,ul,ol):not([style])` (couleur, max-width 820 px) ;
   ici les textes sont dans des conteneurs intermédiaires (.hv-head, .hv-intro-l…) ou redéclarés avec deux classes. */

/* ---------- base ---------- */
.hv-sec{background:var(--fond);padding:96px 24px}
.hv-sec-2{background:var(--fond-2)}
.hv-wrap{max-width:1240px;margin:0 auto}
.hv-wrap-s{max-width:860px}
.hv-eyebrow{display:block;margin:0 0 14px;font-size:13px;font-weight:700;color:var(--accent-texte);text-transform:uppercase;letter-spacing:.12em}
.hv-head{display:flex;flex-direction:column;gap:14px;margin-bottom:40px;max-width:760px}
.hv-head-c{text-align:center;align-items:center;margin-left:auto;margin-right:auto}
.hv-head .hv-eyebrow{margin:0}
.hv-sec h2,.hv-cta h2{font-size:clamp(28px,3.8vw,46px);font-weight:700;line-height:1.08;letter-spacing:-.02em;color:var(--titre)}
.hv-sec .hv-p{margin:0;max-width:none;font-size:16.5px;line-height:1.75;color:var(--texte-doux)}
.hv-sec .hv-p strong,.hv-lead strong{color:var(--titre);font-weight:700}
.hv-sec .hv-p a,.hv-lead a{color:var(--accent-texte);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.hv-sec .hv-p a:hover,.hv-lead a:hover{color:var(--accent-texte-fonce);text-decoration-thickness:2px}
.hv-grid{display:grid;gap:22px}
.hv-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hv-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hv-cell{display:flex;min-width:0}
.hv-cell>*{flex:1;min-width:0}

/* ---------- en-tête de page ---------- */
.hv-hero{position:relative;overflow:hidden;background:#0D0D0D;border-bottom:1px solid var(--bord)}
.hv-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform-origin:70% 50%;animation:hvZoom 12s ease-out both}
.hv-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,13,13,.94) 0%,rgba(13,13,13,.84) 40%,rgba(13,13,13,.6) 72%,rgba(13,13,13,.3) 100%)}
.hv-hero-in{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:68px 24px 60px}
.hv-hero-txt{display:flex;flex-direction:column;max-width:780px}
.hv-crumb{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13px;color:rgba(255,255,255,.72);margin-bottom:26px}
.hv-crumb a{color:rgba(255,255,255,.72)}
.hv-crumb span:last-child{color:#fff;font-weight:600}
.hv-hero .hv-eyebrow{color:var(--accent)}
.hv-hero h1{font-size:clamp(32px,5vw,56px);font-weight:700;line-height:1.05;letter-spacing:-.02em;color:#fff;margin:0 0 20px}
.hv-hero .hv-hero-p{margin:0;max-width:700px;font-size:16.5px;line-height:1.7;color:rgba(255,255,255,.86)}
@keyframes hvZoom{from{transform:scale(1.1)}to{transform:scale(1)}}

/* ---------- 1 : texte local en deux colonnes ---------- */
.hv-intro{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;align-items:start}
.hv-lead{margin:0;max-width:none;padding-left:26px;border-left:3px solid var(--accent);font-size:19px;line-height:1.75;color:var(--texte)}
.hv-intro-r h2{margin:0 0 20px}

/* ---------- 2 : métiers (cartes) ---------- */
.hv-svc{display:flex;flex-direction:column;background:var(--fond);border:1px solid var(--bord);border-radius:24px;overflow:hidden;color:var(--titre);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .35s}
.hv-svc:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 55%,var(--bord));box-shadow:0 22px 46px rgba(0,0,0,.45);color:var(--titre)}
.hv-svc-img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--fond-2)}
.hv-svc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s ease}
.hv-svc:hover .hv-svc-img img{transform:scale(1.06)}
.hv-svc-body{position:relative;display:flex;flex-direction:column;gap:14px;flex:1;padding:24px 24px 28px}
.hv-svc h3{font-size:21px;font-weight:700;line-height:1.15;color:var(--titre);margin:0;padding-right:44px}
.hv-svc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14.5px;line-height:1.5;color:var(--texte-doux)}
.hv-svc li{position:relative;padding-left:20px}
.hv-svc li::before{content:"";position:absolute;left:0;top:.52em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.hv-go{position:absolute;top:22px;right:22px;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--sur-accent);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;transition:transform .3s}
.hv-svc:hover .hv-go{transform:translateX(4px)}

/* ---------- 3 : « Pourquoi choisir… » (bande sombre) ---------- */
.hv-why{background:var(--bandeau);border-top:1px solid var(--bord);border-bottom:1px solid var(--bord)}
.hv-why h2,.hv-why h3{color:#fff}
.hv-why .hv-eyebrow{color:var(--accent)}
.hv-why-card{display:flex;flex-direction:column;gap:14px;height:100%;padding:30px 26px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:24px;transition:background .3s,transform .3s,border-color .3s}
.hv-why-card:hover{background:rgba(255,255,255,.09);border-color:color-mix(in srgb,var(--accent) 45%,transparent);transform:translateY(-4px)}
.hv-ico{width:46px;height:46px;border-radius:14px;background:var(--accent);color:var(--sur-accent);display:flex;align-items:center;justify-content:center}
.hv-why h3{font-size:19px;font-weight:700;line-height:1.2;margin:0}
.hv-why-card p{margin:0;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.78)}

/* ---------- 4 : encart « Nos chantiers » : 3 photos seules + texte V1 ----------
   La boîte .article-realisations (centrée, teintée or) vient de commun.css ; ici : photos au-dessus, largeur de la colonne. */
.hv-chantiers.article-realisations{max-width:none;margin:8px 0 0;padding:28px 28px 40px}
.hv-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 32px;border-radius:16px}
.hv-photos img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:16px;border:1px solid var(--bord);transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s}
.hv-photos:hover img{border-color:color-mix(in srgb,var(--accent) 50%,var(--bord))}
.hv-photos img:hover{transform:translateY(-4px)}
.hv-photos:focus-visible{outline:3px solid var(--accent);outline-offset:4px}

/* ---------- 5 : communes (pastilles) ---------- */
.hv-chips{display:flex;flex-wrap:wrap;gap:10px}
.hv-chip{display:inline-flex;align-items:center;gap:8px;background:var(--fond);border:1px solid var(--bord);color:var(--texte);border-radius:40px;padding:11px 20px;font-size:14px;font-weight:600;line-height:1.2;transition:border-color .25s,color .25s,transform .25s}
.hv-chip span{color:var(--accent-texte);transition:transform .2s}
.hv-chip:hover{border-color:var(--accent);color:var(--accent-texte)!important;transform:translateY(-2px)}
.hv-chip:hover span{transform:translateX(3px)}
.hv-chip:focus-visible,.hv-svc:focus-visible,.hv-btn:focus-visible,.hv-faq-item button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ---------- 6 : FAQ (accordéon du thème : [data-faq-item], .open posé par site.js ; aria-expanded par ville.js) ---------- */
.hv-faq{display:flex;flex-direction:column;gap:12px}
.hv-faq-item{background:var(--carte);border:1px solid var(--bord);border-radius:20px;transition:border-color .3s,box-shadow .3s}
.hv-faq-item button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 24px;background:none;border:0;border-radius:20px;cursor:pointer;font-family:'Bricolage Grotesque',sans-serif;font-size:16.5px;font-weight:600;line-height:1.35;color:var(--titre);text-align:left}
.hv-faq-item [data-faq-icon]{flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-family:'Plus Jakarta Sans',sans-serif}
.hv-faq-clip{overflow:hidden}
.hv-faq-a{padding:0 24px 24px;font-size:15px;line-height:1.75;color:var(--texte-doux)}
.hv-faq-a p{margin:0}

/* ---------- 7 : bandeau d'appel (vraie photo, sujet dans le tiers gauche) ---------- */
.hv-cta{background:var(--fond);padding:0 24px 36px}
.hv-cta-card{position:relative;max-width:1240px;margin:0 auto;border-radius:32px;overflow:hidden;background:#0D0D0D;border:1px solid var(--bord);min-height:380px;display:flex;align-items:center}
.hv-cta-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hv-pos,20% 50%)}
.hv-cta-card::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,13,13,.1) 0%,rgba(13,13,13,.5) 34%,rgba(13,13,13,.93) 56%,#0D0D0D 72%)}
.hv-cta-txt{position:relative;z-index:1;margin-left:auto;max-width:600px;padding:52px 48px;display:flex;flex-direction:column;gap:16px}
.hv-cta-txt .hv-eyebrow{color:var(--accent);margin:0}
.hv-cta h2{font-size:clamp(26px,3.4vw,40px);color:#fff}
.hv-cta-txt p{margin:0;font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.86)}
.hv-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;margin-top:6px;background:var(--accent);color:var(--sur-accent);border-radius:40px;padding:15px 28px;font-size:15px;font-weight:700;line-height:1.2;transition:transform .25s,background .2s,box-shadow .25s}
.hv-btn:hover{background:var(--accent-fonce);color:var(--sur-accent);transform:translateY(-2px);box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 35%,transparent)}
.hv-btn span{transition:transform .2s}
.hv-btn:hover span{transform:translateX(4px)}

/* ---------- tablette ---------- */
@media (max-width:1100px){
  .hv-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hv-intro{gap:44px}
}
@media (max-width:980px){
  .hv-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- mobile : tout est empilé à la verticale (jamais de rail horizontal de cartes) ---------- */
@media (max-width:820px){
  .hv-sec{padding:68px 20px}
  .hv-intro{grid-template-columns:1fr;gap:34px}
  .hv-lead{font-size:17.5px;padding-left:20px}
  .hv-hero::after{background:rgba(13,13,13,.8)}
  .hv-hero-in{padding:48px 20px 44px}
  .hv-cta{padding:0 20px 28px}
  .hv-cta-card{flex-direction:column;align-items:stretch;min-height:0;border-radius:24px}
  .hv-cta-img{position:relative;inset:auto;height:250px;flex:none}
  .hv-cta-card::after{display:none}
  .hv-cta-txt{margin:0;max-width:none;padding:32px 24px 36px}
  .hv-btn{align-self:stretch;justify-content:center}
}
@media (max-width:640px){
  .hv-grid-3,.hv-grid-4{grid-template-columns:1fr}
  .hv-photos{grid-template-columns:1fr;gap:12px}
  .hv-chantiers.article-realisations{padding:18px 16px 30px}
  .hv-faq-item button{padding:18px 18px;font-size:16px}
  .hv-faq-a{padding:0 18px 20px}
  .hv-chip{padding:10px 16px}
}

/* ---------- mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  .hv-hero-img{animation:none}
  .hv-svc,.hv-svc-img img,.hv-go,.hv-why-card,.hv-photos img,.hv-chip,.hv-chip span,.hv-btn,.hv-btn span,.hv-faq-item{transition:none}
  .hv-svc:hover,.hv-svc:hover .hv-svc-img img,.hv-svc:hover .hv-go,.hv-why-card:hover,.hv-photos img:hover,.hv-chip:hover,.hv-chip:hover span,.hv-btn:hover,.hv-btn:hover span{transform:none}
}