/* D.F.L CONSTRUCTION — pages ville (seo/construction-*.html). Préfixe dv-. Écrit le 14/10/2026 (brief 08) sur le moule V3
   des pages ville (thème sombre), repassé en CLAIR aux couleurs de la V1 DFL. 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 #1c1c1c / fond #fff 17,04 ; / fond doux #faf8f5 16,08 ; doux #666 / fond 5,74 ; / fond doux 5,42
     bleu #1f3c88 / fond 10,19 ; / fond doux 9,62 ; / encart (10 % de bleu sur blanc) 8,62 ; blanc sur bleu 10,19
     en-tête de page : texte blanc (intro à 88 %) sur photo pleine + voile ardoise #131c33 .90 -> .64 sous le texte ;
       pire cas = photo BLANCHE PURE sous le voile (à 64 %) : blanc 100 % 5,6:1, intro à 88 % 4,9:1 ; les vraies photos
       sont plus sombres (mesure par photo dans docs/captures-villes/verif-contraste.py : voir 08-RENDU.md) ;
       sur mobile voile uniforme .80 (pire cas blanc pur : 9,4:1)
     bande « Pourquoi » (#131c33) : blanc 100 % 16,4 ; blanc 80 % sur cartes (≈ #1b2339) 10,5 ;
       bleu éclairci #8fb4ff (eyebrow) 8,17 ; icône #131c33 sur #8fb4ff 8,17
     bandeau d'appel : texte blanc posé sur #131c33 (voile plein à 70 % du bandeau ; sur mobile le texte est sous la photo,
       fond #131c33) ; bouton #1f3c88 sur blanc 10,19 ; eyebrow #8fb4ff sur #131c33 8,17
   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 (.dv-head, .dv-intro-l…) ou redéclarés avec deux classes. */

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

/* ---------- en-tête de page (vraie photo de chantier + voile ardoise) ---------- */
.dv-hero{position:relative;overflow:hidden;background:#131c33;border-bottom:1px solid var(--bord)}
.dv-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--dv-hero-pos,50% 50%);transform-origin:70% 50%;animation:dvZoom 12s ease-out both}
.dv-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(19,28,51,.9) 0%,rgba(19,28,51,.82) 40%,rgba(19,28,51,.64) 72%,rgba(19,28,51,.3) 100%)}
.dv-hero-in{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:68px 24px 60px}
.dv-hero-txt{display:flex;flex-direction:column;max-width:780px}
.dv-crumb{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13px;color:rgba(255,255,255,.82);margin-bottom:26px}
.dv-crumb a{color:rgba(255,255,255,.82);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.dv-crumb a:hover{color:#fff;text-decoration-thickness:2px}
.dv-crumb span:last-child{color:#fff;font-weight:600}
.dv-hero .dv-eyebrow{color:var(--accent-sur-sombre)}
.dv-hero h1{font-size:clamp(32px,5vw,56px);font-weight:700;line-height:1.05;letter-spacing:-.02em;color:#fff;margin:0 0 20px}
.dv-hero .dv-hero-p{margin:0;max-width:700px;font-size:16.5px;line-height:1.7;color:rgba(255,255,255,.88)}
@keyframes dvZoom{from{transform:scale(1.1)}to{transform:scale(1)}}

/* ---------- 1 : texte local en deux colonnes ---------- */
.dv-intro{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;align-items:start}
.dv-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)}
.dv-intro-r h2{margin:0 0 20px}

/* ---------- 2 : métiers (cartes) ---------- */
.dv-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}
.dv-svc:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 45%,var(--bord));box-shadow:0 18px 40px rgba(19,28,51,.14);color:var(--titre)}
.dv-svc-img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--fond-2)}
.dv-svc-img img{width:100%;height:100%;object-fit:cover;object-position:var(--dv-pos,50% 50%);display:block;transition:transform .7s ease}
.dv-svc:hover .dv-svc-img img{transform:scale(1.06)}
.dv-svc-body{position:relative;display:flex;flex-direction:column;gap:14px;flex:1;padding:24px 24px 28px}
.dv-svc h3{font-size:21px;font-weight:700;line-height:1.15;color:var(--titre);margin:0;padding-right:44px}
.dv-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)}
.dv-svc li{position:relative;padding-left:20px}
.dv-svc li::before{content:"";position:absolute;left:0;top:.52em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.dv-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}
.dv-svc:hover .dv-go{transform:translateX(4px)}

/* ---------- 3 : « Pourquoi choisir… » (bande sombre ardoise) ---------- */
.dv-why{background:var(--bandeau);border-top:1px solid var(--bord);border-bottom:1px solid var(--bord)}
.dv-why h2,.dv-why h3{color:#fff}
.dv-why .dv-eyebrow{color:var(--accent-sur-sombre)}
.dv-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,.12);border-radius:24px;transition:background .3s,transform .3s,border-color .3s}
.dv-why-card:hover{background:rgba(255,255,255,.09);border-color:color-mix(in srgb,var(--accent-sur-sombre) 55%,transparent);transform:translateY(-4px)}
.dv-ico{width:46px;height:46px;border-radius:14px;background:var(--accent-sur-sombre);color:var(--bandeau);display:flex;align-items:center;justify-content:center}
.dv-why h3{font-size:19px;font-weight:700;line-height:1.2;margin:0}
.dv-why-card p{margin:0;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.8)}

/* ---------- 4 : encart « Nos chantiers » : 3 photos seules + texte V1 ----------
   La boîte .article-realisations (centrée, teintée de bleu) vient de commun.css ; ici : photos au-dessus, largeur de la colonne.
   Photos seules : ni titre, ni légende, ni compteur ; pas de carrousel, pas d'autoplay. */
.dv-chantiers.article-realisations{max-width:none;margin:8px 0 0;padding:28px 28px 40px}
.dv-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 32px;border-radius:16px}
.dv-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}
.dv-photos:hover img{border-color:color-mix(in srgb,var(--accent) 50%,var(--bord))}
.dv-photos img:hover{transform:translateY(-4px)}
.dv-photos:focus-visible{outline:3px solid var(--accent);outline-offset:4px}

/* ---------- 5 : communes (pastilles) ---------- */
.dv-chips{display:flex;flex-wrap:wrap;gap:10px}
.dv-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}
.dv-chip span{color:var(--accent-texte);transition:transform .2s}
.dv-chip:hover{border-color:var(--accent);color:var(--accent-texte)!important;transform:translateY(-2px)}
.dv-chip:hover span{transform:translateX(3px)}
.dv-chip:focus-visible,.dv-svc:focus-visible,.dv-btn:focus-visible,.dv-faq-item button:focus-visible,.dv-crumb a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.dv-hero .dv-crumb a:focus-visible,.dv-cta .dv-btn:focus-visible{outline-color:#fff}

/* ---------- 6 : FAQ (accordéon du thème : [data-faq-item], .open posé par site.js ; aria-expanded par ville.js) ---------- */
.dv-faq{display:flex;flex-direction:column;gap:12px}
.dv-faq-item{background:var(--carte);border:1px solid var(--bord);border-radius:20px;transition:border-color .3s,box-shadow .3s}
.dv-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}
.dv-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}
.dv-faq-clip{overflow:hidden}
.dv-faq-a{padding:0 24px 24px;font-size:15px;line-height:1.75;color:var(--texte-doux)}
.dv-faq-a p{margin:0}

/* ---------- 7 : bandeau d'appel (vraie photo, sujet dans le tiers gauche, voile ardoise à droite sous le texte) ---------- */
.dv-cta{background:var(--fond);padding:0 24px 36px}
.dv-cta-card{position:relative;max-width:1240px;margin:0 auto;border-radius:32px;overflow:hidden;background:#131c33;border:1px solid var(--bord);min-height:380px;display:flex;align-items:center}
.dv-cta-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--dv-cta-pos,20% 50%)}
.dv-cta-card::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(19,28,51,.08) 0%,rgba(19,28,51,.5) 34%,rgba(19,28,51,.94) 56%,#131c33 70%)}
.dv-cta-txt{position:relative;z-index:1;margin-left:auto;max-width:600px;padding:52px 48px;display:flex;flex-direction:column;gap:16px}
.dv-cta-txt .dv-eyebrow{color:var(--accent-sur-sombre);margin:0}
.dv-cta h2{font-size:clamp(26px,3.4vw,40px);color:#fff}
.dv-cta-txt p{margin:0;font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.88)}
.dv-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;margin-top:6px;background:#fff;color:var(--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}
.dv-btn:hover{background:#eef2fb;color:var(--accent-fonce);transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.3)}
.dv-btn span{transition:transform .2s}
.dv-btn:hover span{transform:translateX(4px)}

/* ---------- tablette ---------- */
@media (max-width:1100px){
  .dv-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dv-intro{gap:44px}
}
@media (max-width:980px){
  .dv-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){
  .dv-sec{padding:68px 20px}
  .dv-intro{grid-template-columns:1fr;gap:34px}
  .dv-lead{font-size:17.5px;padding-left:20px}
  .dv-hero::after{background:rgba(19,28,51,.8)}
  .dv-hero-in{padding:48px 20px 44px}
  .dv-cta{padding:0 20px 28px}
  .dv-cta-card{flex-direction:column;align-items:stretch;min-height:0;border-radius:24px}
  .dv-cta-img{position:relative;inset:auto;height:250px;flex:none}
  .dv-cta-card::after{display:none}
  .dv-cta-txt{margin:0;max-width:none;padding:32px 24px 36px}
  .dv-btn{align-self:stretch;justify-content:center}
}
@media (max-width:640px){
  .dv-grid-3,.dv-grid-4{grid-template-columns:1fr}
  .dv-photos{grid-template-columns:1fr;gap:12px}
  .dv-chantiers.article-realisations{padding:18px 16px 30px}
  .dv-faq-item button{padding:18px 18px;font-size:16px}
  .dv-faq-a{padding:0 18px 20px}
  .dv-chip{padding:10px 16px}
}

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