/* D.F.L CONSTRUCTION — page Actualités (blog/index.html) et 12 articles (blog/<slug>.html). Préfixe des classes : db-.
   Chargé APRÈS site.css et AVANT commun.css. Écrit le 14/10/2026 sur le moule V3 (blog.css du moule, thème sombre) repassé en CLAIR.
   Aucun texte n'est écrit ici.
   Contrastes calculés (WCAG, seuil 4,5:1 pour le texte ; 3:1 pour les éléments d'interface) :
     texte #1c1c1c sur fond #ffffff = 17,04:1 ; sur fond doux #faf8f5 (boîtes) = 16,08:1
     texte doux #666666 sur #ffffff (cartes, date) = 5,74:1 ; sur #faf8f5 (boîtes) = 5,42:1
     accent #1f3c88 sur #ffffff = 10,19:1 ; sur #faf8f5 = 9,62:1 (« Lire l'article », eyebrow, liens du sommaire au survol)
     bouton : #ffffff sur #1f3c88 = 10,19:1 ; au survol #ffffff sur #1a3373 = 11,90:1
     bordure #ebe6df = filet décoratif (1,24:1), jamais un texte ; anneaux de focus #1f3c88 sur blanc = 10,19:1 (≥ 3:1)
     bandeau d'article : photo à 40 % d'opacité sous un dégradé ardoise #131c33 (94 % -> 78 % -> 40 %). Pire cas théorique = photo BLANCHE sous le texte
       (zone du texte sur ordinateur : voile >= 60 %, fond #394054) : titre blanc 10,29:1 ; chapô blanc 82 % 7,55:1 ; fil d'Ariane blanc 72 % 6,25:1 ;
       bleu éclairci #8fb4ff 4,97:1. Même au bord droit extrême (voile 40 %, fond #4c5264) : titre 7,75:1, chapô 5,87:1. Les vraies photos ne sont pas blanches : valeurs plus hautes.
     carte « Nos chantiers » : texte posé sur la zone pleine #faf8f5 (jamais sur la photo).
     bandeau d'appel de la page Actualités : voile ardoise >= 84 % sous le texte, pire cas photo blanche : titre blanc 10,29:1 ; texte blanc 88 % 8,41:1 ;
       bleu éclairci #8fb4ff 4,97:1 (13,49 / 10,80 / 6,51:1 au bord du voile à 92 %). */

/* ---------- 0. Bandeau d'article : photo -1 sous un voile ardoise ---------- */
.db-hero-photo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.4}

/* ---------- 1. Corps d'article ---------- */
.db-article .db-meta{font-size:13px;color:var(--texte-doux);margin:0 0 28px}
.db-article .db-boite{background:var(--fond-2);border:1px solid var(--bord);border-radius:20px;padding:24px 28px;margin:0 0 24px}
.db-article .db-boite h2{font-size:17px;font-weight:700;margin:0 0 10px;color:var(--titre)}
.db-article .db-resume{border-left:3px solid var(--accent);border-radius:0 20px 20px 0}
.db-article .db-resume ul{margin:0;padding-left:20px;font-size:15px;line-height:1.7}
.db-article .db-sommaire{margin-bottom:28px}
.db-article .db-sommaire ol{margin:0;padding-left:20px;font-size:14.5px;line-height:1.9}
.db-article .db-sommaire a{color:var(--texte);text-decoration:none}
.db-article .db-sommaire a:hover{color:var(--accent-texte);text-decoration:underline;text-underline-offset:2px}
.db-article .db-sommaire a:focus-visible,.db-article .db-puce:focus-visible,.db-article .db-btn:focus-visible,.db-article .db-btn-devis:focus-visible,.db-retour a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.db-article h2[id]{scroll-margin-top:96px}
.db-article [data-faq-a-wrap] p{margin:0}
/* la citation passe par la règle .prose blockquote du thème ; ici c'est un <p> : même rendu */
.db-article .db-citation{margin:26px 0;padding:20px 24px;border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);border-radius:0 16px 16px 0;font-size:16px;line-height:1.6;font-style:italic;color:var(--texte)}

/* photos d'article : pleine largeur de la colonne ; les photos verticales (ou carrées) ne s'étalent pas à 820 px de large */
.db-article .db-figure{margin:0 0 28px}
.db-article .db-figure img{display:block;width:100%;height:auto;border-radius:20px;cursor:zoom-in}
.db-article .db-figure--etroite{max-width:440px;margin-left:auto;margin-right:auto}

/* liens du corps de texte (la prose du thème les souligne) : bleu de l'accent */
.db-article p a:not([class]),.db-article li a:not([class]){color:var(--accent-texte)}
.db-article p a:not([class]):hover,.db-article li a:not([class]):hover{color:var(--accent-texte-fonce)}

/* « À lire aussi » */
.db-article .db-lire-aussi{margin:40px 0 0;padding-top:24px;border-top:1px solid var(--bord)}
.db-article .db-lire-aussi h3{margin-top:0}

/* communes desservies : encadré à filet bleu, noms en gras (liens quand la page ville existe) */
.db-article .db-zones{margin:32px 0;padding:6px 24px;border-left:3px solid var(--accent);background:var(--fond-2);border-radius:0 16px 16px 0}
.db-article .db-zones h3{margin:16px 0 4px}
.db-article .db-zones p{margin:4px 0 16px}

/* appel à l'action de fin d'article */
.db-article .db-cta{border-radius:24px;padding:28px;margin:24px 0}
.db-article .db-cta h3{font-size:19px;font-weight:700;margin:0 0 6px;color:var(--titre)}
.db-article .db-cta p{margin:0 0 16px;font-size:14px;color:var(--texte-doux)}
.db-article .db-btn-devis{display:inline-block;background:var(--accent);color:var(--sur-accent);border-radius:40px;padding:16px 28px;font-size:14px;font-weight:700;text-decoration:none;transition:background .2s,transform .2s,box-shadow .25s}
.db-article .db-btn-devis:hover{background:var(--accent-fonce);color:var(--sur-accent)}

/* lien « ← Retour aux actualités » : hors du verrou de publication, toujours visible */
.db-retour{margin:28px 0 0}
.db-retour a{color:var(--accent-texte);font-weight:600}

/* ---------- 2. Carte « Nos chantiers » (fin d'article) : photo + texte V1 + boutons ---------- */
.db-article .db-chantiers{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);margin:40px 0;background:var(--fond-2);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:24px;overflow:hidden}
.db-article .db-chantiers-photo{position:relative;min-height:260px}
.db-article .db-chantiers-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.db-article .db-chantiers-txt{padding:32px 30px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.db-article .db-eyebrow{display:block;margin:0 0 8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--accent-texte)}
.db-article .db-chantiers h3{margin:0 0 8px;font-size:clamp(22px,2.6vw,28px);font-weight:700;line-height:1.15;color:var(--titre)}
.db-article .db-chantiers .db-sub{margin:0 0 20px;font-size:15px;line-height:1.6;color:var(--texte-doux)}
.db-article .db-btns{display:flex;flex-wrap:wrap;gap:10px}
.db-article a.db-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;background:var(--accent);color:var(--sur-accent);font-size:14px;font-weight:700;line-height:1.2;text-decoration:none;border-radius:40px;box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 30%,transparent);transition:background .2s,transform .2s,box-shadow .2s}
.db-article a.db-btn span{transition:transform .18s ease}
.db-article a.db-btn:hover{background:var(--accent-fonce);color:var(--sur-accent);transform:translateY(-2px);box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 40%,transparent)}
.db-article a.db-btn:hover span{transform:translateX(4px)}

/* ---------- 3. Page Actualités : grille de cartes ---------- */
.db-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
a.db-card{flex-direction:column;background:var(--carte);border:1px solid var(--bord);border-radius:20px;overflow:hidden;color:var(--titre);text-decoration:none;transition:transform .3s,box-shadow .3s}
a.db-card:hover{box-shadow:0 14px 34px rgba(19,28,51,.12)}
.db-card-media{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--fond-2)}
.db-card-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
a.db-card:hover .db-card-media img{transform:scale(1.05)}
.db-card-body{display:flex;flex-direction:column;gap:10px;flex:1;padding:24px 26px 26px}
.db-card-date{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--texte-doux)}
.db-card-body h3{margin:0;font-size:19px;font-weight:700;line-height:1.35;color:var(--titre)}
.db-card-body p{margin:0;flex:1;font-size:14px;line-height:1.6;color:var(--texte-doux)}
.db-card-more{font-size:14px;font-weight:700;color:var(--accent-texte)}
a.db-card:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ---------- 4. Page Actualités : bandeau d'appel (vraie photo, sujet dans le tiers gauche, texte à droite) ---------- */
.db-appel{position:relative;overflow:hidden;background:rgb(var(--overlay-rgb));min-height:340px;display:flex;align-items:center}
.db-appel-photo{position:absolute;inset:0;background-size:cover;background-position:left center}
.db-appel-voile{position:absolute;inset:0;background:linear-gradient(270deg,rgba(var(--overlay-rgb),.92) 0%,rgba(var(--overlay-rgb),.84) 42%,rgba(var(--overlay-rgb),.08) 78%,rgba(var(--overlay-rgb),0) 100%)}
.db-appel-txt{position:relative;width:100%;max-width:1240px;margin:0 auto;padding:64px 24px;display:flex;flex-direction:column;align-items:flex-end;text-align:left}
.db-appel-txt>div{width:min(520px,100%);display:flex;flex-direction:column;align-items:flex-start;gap:14px;color:#fff}
.db-appel-eyebrow{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--accent-sur-sombre)}
.db-appel h2{margin:0;font-size:clamp(28px,4vw,40px);font-weight:700;line-height:1.1;letter-spacing:-.02em;color:#fff}
.db-appel p{margin:0;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.88);max-width:none}
.db-appel a.db-appel-btn{display:inline-block;margin-top:6px;background:var(--accent);color:var(--sur-accent);border-radius:40px;padding:15px 28px;font-size:14px;font-weight:700;text-decoration:none;box-shadow:0 0 0 1.5px rgba(255,255,255,.55);transition:background .2s,transform .2s}
.db-appel a.db-appel-btn:hover{background:var(--accent-fonce);transform:translateY(-2px)}
.db-appel a.db-appel-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ---------- 5. Mobile ---------- */
@media (max-width:760px){
  .db-article .db-chantiers{grid-template-columns:1fr}
  .db-article .db-chantiers-photo{min-height:0;aspect-ratio:16/9}
  .db-article .db-chantiers-txt{padding:26px 20px}
  .db-article .db-boite{padding:20px 20px}
  .db-article .db-zones{padding:4px 18px}
  .db-article .db-figure img{border-radius:16px}
  .db-grille{grid-template-columns:1fr}
  /* bandeau d'appel : le texte occupe toute la largeur, voile plus fort en bas */
  .db-appel{min-height:380px;align-items:flex-end}
  .db-appel-voile{background:linear-gradient(0deg,rgba(var(--overlay-rgb),.92) 0%,rgba(var(--overlay-rgb),.84) 55%,rgba(var(--overlay-rgb),.12) 100%)}
  .db-appel-txt{padding:48px 20px 36px;align-items:flex-start}
}
@media (max-width:520px){
  .db-article a.db-btn{padding:12px 16px}
}

/* ---------- 6. Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  .db-card-media img,a.db-card,.db-article a.db-btn,.db-article a.db-btn span,.db-article .db-btn-devis,.db-appel a.db-appel-btn{transition:none}
  a.db-card:hover,a.db-card:hover .db-card-media img,.db-article a.db-btn:hover,.db-article a.db-btn:hover span,.db-appel a.db-appel-btn:hover{transform:none}
}