/* BH Couverture · identité : bleu marine profond, blanc, rouge (bleu blanc rouge), titrage Archivo large comme le logo.
   Feuille chargée en dernier : elle redéfinit les couleurs et ajoute les composants propres au site. */
:root {
  --ink: #0A1530; --ink-2: #0F1D3E; --ink-3: #1A2B55;
  --navy: #0A1530; --navy-2: #0F1D3E; --navy-3: #1A2B55;
  --bone: #F5F7FB; --paper: #EEF1F7; --stone: #98A4BC; --soft: #53607A;
  --orange: #E1262F; --orange-deep: #B5121B; --red: #E1262F; --red-deep: #B5121B; --yellow: #E1262F;
  --blue: #2752E0; --blue-l: #86A6FF; --blue-d: #16308F;
  --line-d: rgba(245, 247, 251, .13); --line-l: rgba(10, 21, 48, .12);
  --hud: rgba(245, 247, 251, .88);
  --tri: linear-gradient(90deg, var(--blue) 0 33.3%, #fff 33.3% 66.6%, var(--red) 66.6%);
}
body { background: var(--ink); }
::selection { background: var(--blue); color: #fff; }

/* titrage : capitales larges, comme le nom dans le logo */
.dsp { font-stretch: 100%; font-weight: 800; letter-spacing: -.028em; line-height: .9; }
.dsp--hero { letter-spacing: -.035em; }
.dsp em, .it { color: var(--blue-l); }
.on-paper .dsp em, .on-paper .it { color: var(--red-deep); }
.s-hero .dsp--hero, .v-hero .dsp--hero { font-size: clamp(2.3rem, .8rem + 5.2vw, 6.6rem); }

/* repère tricolore devant les surtitres */
.kicker { color: var(--bone); }
.on-paper .kicker { color: var(--ink); }
.kicker::before { width: 1.5rem; height: 3px; background: var(--tri); opacity: 1; border-radius: 2px; box-shadow: 0 0 0 1px rgba(10, 21, 48, .12); }
.phase .kicker, .phase .kicker::before { color: var(--bone); }
.tricolore { display: flex; height: 4px; }
.tricolore i { flex: 1; }
.tricolore i:nth-child(1) { background: var(--blue); }
.tricolore i:nth-child(2) { background: #fff; }
.tricolore i:nth-child(3) { background: var(--red); }

/* logo : pictogramme + nom ; version claire sur fond sombre, version marine sur fond clair */
.logo img { display: block; }
.logo .lg-d { display: none; }
.bar.on-paper-bar:not(.is-solid) .logo .lg-w { display: none; }
.bar.on-paper-bar:not(.is-solid) .logo .lg-d { display: block; }
.menu-open .bar .logo .lg-w { display: block !important; }
.menu-open .bar .logo .lg-d { display: none !important; }
.brand__logo, .bar.is-solid .brand__logo { height: auto; width: auto; filter: none; }
.logo--lock { display: inline-flex; align-items: center; gap: .7rem; color: inherit; }
.logo__m img { height: 2.7rem; width: auto; }
.bar.is-solid .logo__m img { height: 2.3rem; }
.logo__t { display: flex; flex-direction: column; gap: .32rem; line-height: 1; }
.logo__t b { font: 800 1.08rem/1 var(--f-display); font-stretch: 125%; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.logo__t small { font: 600 .56rem/1 var(--f-display); font-stretch: 112%; letter-spacing: .34em; text-transform: uppercase; opacity: .72; white-space: nowrap; }
.logo--full img { width: 100%; height: auto; }
.logo--icon img { width: 100%; height: auto; }
.foot__logo.logo { width: min(15rem, 62vw); }
.loader__logo { width: min(17rem, 58vw); }
.chat__mark { width: 2.3rem; }
@media (max-width: 759px) {
  .logo__m img { height: 2.2rem; }
  .logo__t b { font-size: .9rem; letter-spacing: .05em; }
  .logo__t small { font-size: .5rem; letter-spacing: .28em; }
}
@media (max-width: 380px) { .logo__t small { display: none; } }
.foot__big span { background: var(--tri); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .16; }
.loader__bar i { background: var(--tri) !important; }

/* boutons : rouge pour l'action, bleu au survol des contours */
.btn--ghost:hover { border-color: var(--blue-l); }

/* en-tête de page métier : image fixe en lent mouvement (pas de film) */
.s-hero picture { display: contents; }
.poster--kb { animation: kb 26s ease-in-out infinite alternate; transform-origin: 62% 40%; }
@keyframes kb { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-2%, -1.5%, 0); } }
@media (prefers-reduced-motion: reduce) { .poster--kb { animation: none; } }
.s-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 21, 48, .55) 0%, rgba(10, 21, 48, .08) 32%, rgba(10, 21, 48, .78) 100%); pointer-events: none; }

/* calculateur de TVA : nature des travaux */
.tva__rates { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.4rem; font-size: .84rem; color: var(--stone); }
.tva__rates > span { width: 100%; font: 500 .66rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; }
.tva__rates button { display: inline-flex; align-items: baseline; gap: .55rem; border: 1px solid rgba(245, 247, 251, .22); background: none; color: var(--bone); border-radius: 12px; padding: .65rem .9rem; font: inherit; cursor: pointer; transition: background .3s, border-color .3s; }
.tva__rates button b { font: 800 1.15rem/1 var(--f-display); }
.tva__rates button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); }
.on-paper .tva__rates button { color: var(--ink); border-color: var(--line-l); }
.on-paper .tva__rates button[aria-pressed="true"] { color: #fff; }

/* les toits du Nord : quatre couvertures */
.roofs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 3.2rem; }
.roof-card { position: relative; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: rgba(245, 247, 251, .04); border: 1px solid var(--line-d); color: inherit; text-decoration: none; transition: border-color .4s, transform .6s var(--ease); }
.roof-card:hover { border-color: rgba(134, 166, 255, .55); transform: translateY(-4px); }
.roof-card__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.roof-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 30%; transition: transform 1.2s var(--ease); }
.roof-card:hover .roof-card__img img { transform: scale(1.06); }
.roof-card__txt { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.1rem 1.3rem; }
.roof-card__txt b { font: 700 1.06rem/1.2 var(--f-text); }
.roof-card__txt span:last-child { color: var(--stone); font-size: .92rem; line-height: 1.45; }
.roof-card__n { font: 500 .66rem/1 var(--f-mono); letter-spacing: .16em; color: var(--blue-l); }
@media (max-width: 980px) { .roofs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .roofs { grid-template-columns: minmax(0, 1fr); } }

/* méthode en quatre temps */
.method__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .method__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .method__grid--4 { grid-template-columns: minmax(0, 1fr); } }

/* conseils : cartes et articles */
.cons-sec { padding: clamp(5rem, 9vw, 8rem) 0; }
.cons-sec:not(.on-paper) { background: var(--ink-2); }
.cons-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2.8rem; }
.cons-card { display: flex; flex-direction: column; gap: .7rem; color: inherit; text-decoration: none; padding: .7rem .7rem 1.3rem; border-radius: 22px; border: 1px solid var(--line-d); background: rgba(245, 247, 251, .03); transition: border-color .4s, transform .6s var(--ease); }
.on-paper .cons-card { border-color: var(--line-l); background: #fff; }
.cons-card:hover { transform: translateY(-4px); border-color: var(--blue-l); }
.cons-card__img { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; margin-bottom: .4rem; }
.cons-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.cons-card:hover .cons-card__img img { transform: scale(1.05); }
.cons-card .kicker, .cons-card b, .cons-card p, .cons-card__go { padding: 0 .5rem; }
.cons-card b { font: 800 1.3rem/1.05 var(--f-display); letter-spacing: -.02em; text-transform: uppercase; }
.cons-card p { margin: 0; color: var(--stone); font-size: .95rem; line-height: 1.5; }
.on-paper .cons-card p { color: var(--soft); }
.cons-card__go { display: inline-flex; align-items: center; gap: .5rem; margin-top: auto; font-weight: 600; font-size: .92rem; color: var(--blue-l); }
.on-paper .cons-card__go { color: var(--blue); }
.cons-card__go svg { width: 1rem; height: 1rem; }
@media (max-width: 980px) { .cons-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cons-grid { grid-template-columns: minmax(0, 1fr); } }

.art__hero { position: relative; min-height: 86vh; min-height: 86svh; display: grid; align-items: end; overflow: hidden; background: var(--ink); }
.art__hero picture { display: contents; }
.art__hero .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art__hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 21, 48, .5) 0%, rgba(10, 21, 48, .15) 35%, rgba(10, 21, 48, .9) 100%); }
.art__hero-in { position: relative; z-index: 2; padding: calc(var(--bar) + 5rem) var(--gutter) clamp(2.5rem, 7vh, 4.5rem); max-width: 68rem; display: flex; flex-direction: column; gap: 1.2rem; }
.art__hero-in .dsp { font-size: clamp(2.1rem, 1rem + 4vw, 5rem); }
.art__hero .s-hero__meta { z-index: 3; }
.art__body { padding: clamp(4rem, 8vw, 7rem) 0; background: var(--paper); color: var(--ink); }
.art__grid { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 4rem; align-items: start; }
.art__toc { position: sticky; top: calc(var(--bar) + 2rem); }
.art__toc ol { list-style: none; margin: 0; padding: 0; counter-reset: t; display: grid; gap: .2rem; border-left: 2px solid var(--line-l); }
.art__toc li { counter-increment: t; }
.art__toc a { display: block; padding: .45rem 0 .45rem 1rem; color: var(--soft); text-decoration: none; font-size: .9rem; line-height: 1.35; }
.art__toc a::before { content: counter(t, decimal-leading-zero) "  "; font: 500 .66rem/1 var(--f-mono); color: var(--red-deep); }
.art__toc a:hover { color: var(--ink); }
.art__txt { max-width: 46rem; }
.art__txt section + section { margin-top: 2.6rem; }
.art__txt h2 { margin: 0 0 .8rem; font: 800 clamp(1.35rem, 1rem + 1vw, 1.9rem)/1.1 var(--f-display); letter-spacing: -.02em; text-transform: uppercase; }
.art__txt p { margin: 0; font-size: 1.08rem; line-height: 1.75; color: #29344D; }
.art__svc { margin-top: 3.4rem; padding: 1.2rem; border-radius: 22px; background: #fff; border: 1px solid var(--line-l); }
.art__svc a { display: grid; grid-template-columns: 11rem 1fr; gap: .4rem 1.2rem; align-items: center; color: inherit; text-decoration: none; margin-top: 1rem; }
.art__svc img { grid-row: span 2; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; }
.art__svc b { display: flex; align-items: center; gap: .5rem; font: 800 1.15rem/1.1 var(--f-display); text-transform: uppercase; }
.art__svc b svg { width: 1.1rem; height: 1.1rem; color: var(--red); }
.art__svc span { color: var(--soft); font-size: .92rem; }
@media (max-width: 900px) { .art__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; } .art__toc { position: static; } }
@media (max-width: 520px) { .art__svc a { grid-template-columns: minmax(0, 1fr); } .art__svc img { grid-row: auto; } }

/* départements de la zone */
.flag--d59, .flag--d62 { display: inline-grid; place-items: center; width: 2.2rem !important; height: 1.5rem !important; border-radius: 6px; background: var(--blue); color: #fff; font: 600 .7rem/1 var(--f-mono); box-shadow: inset 0 -3px 0 var(--red); }

/* carte : cercle des 50 km et France */
.m-dep { fill: rgba(39, 82, 224, .14); stroke: rgba(134, 166, 255, .45); }