/* JB Pastor : styles communs (en-tête, pied de page, typographie, boutons, cartes).
   Mesures issues des maquettes XD (1920 px). Grille XD = grille Bootstrap 5 (12 col., gouttière 24, conteneur 1320).
   Avenir remplacée par Jost (Avenir non licenciée en webfont). */

:root {
	--jbp-red: #d9000d;
	--jbp-grey: #707070;
	--jbp-blue: #99b5cd;
	--jbp-black-85: rgba(0, 0, 0, .85);
	--jbp-bg-blue: #d9e4ec;   /* #99b5cd à 37 % sur blanc */
	--jbp-bg-sky: #f4f8fe;    /* #e2ebfc à 37 % sur blanc */
	--jbp-font: "Jost", "Helvetica Neue", Arial, sans-serif;
	--bs-body-font-family: var(--jbp-font);
	--bs-font-sans-serif: var(--jbp-font);
	--jbp-fa: "Font Awesome 6 Pro";
	--jbp-container: 1296px; /* largeur utile du .container xxl (1320 - 24) */
}

body { font-family: var(--jbp-font); }
.jbp { font-family: var(--jbp-font); color: var(--jbp-grey); -webkit-font-smoothing: antialiased; }
.jbp :where(p, h1, h2, h3, ul) { margin: 0; padding: 0; }
.jbp img { display: block; max-width: 100%; height: auto; }

/* Titres de section : Medium 56 / 60, -0.03em */
.jbp-h2 { font: 500 56px/60px var(--jbp-font); letter-spacing: -.03em; color: #000; }
.jbp-text { font: 400 16px/22px var(--jbp-font); color: var(--jbp-grey); }
.jbp-kicker { font: 900 22px/21px var(--jbp-font); letter-spacing: .02em; text-transform: uppercase; color: #000; }

/* Bouton pilule : 256 × 50, Black 17, +0.02em */
.jbp-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 256px; height: 50px; flex-shrink: 0; border-radius: 27px;
	background: var(--jbp-blue); color: #fff; text-decoration: none;
	font: 900 17px/21px var(--jbp-font); letter-spacing: .02em; text-transform: uppercase;
	transition: background-color .2s;
}
.jbp-btn:hover, .jbp-btn:focus-visible { background: #7f9fbb; color: #fff; }

/* Pagination des carrousels (statique pour cette passe) */
.jbp-dots { display: flex; gap: 8px; list-style: none; }
.jbp-dots li { width: 8px; height: 8px; border-radius: 10px; background: var(--jbp-blue); opacity: .2; }
.jbp-dots li.is-active { width: 31px; opacity: 1; }
.jbp-dots--lg { gap: 10px; }
.jbp-dots--lg li { width: 10px; height: 10px; }
.jbp-dots--lg li.is-active { width: 40px; }

/* ---------- En-tête (superposé au hero) ---------- */
.jbp-header { position: absolute; inset: 0 0 auto; z-index: 10; }
body:not(.jbp) .jbp-header { position: relative; }
.jbp-header .container { display: flex; align-items: flex-start; }
.jbp-header__logo { margin: 46px 0 0 -7px; flex: 0 0 175px; }
.jbp-nav { display: grid; grid-template-columns: 110px 181px 160px 185px 200px 210px 19px; align-items: center; margin: 85px 0 0 63px; list-style: none; }
.jbp-nav a { font: 300 15px/23px var(--jbp-font); color: var(--jbp-black-85); text-decoration: none; text-transform: uppercase; }
.jbp-nav a[aria-current="page"] { font-weight: 900; }
.jbp-nav a:hover { color: var(--jbp-red); }
.jbp-nav__lang img { width: 19px; height: 19px; }

/* Cartes chantier (accueil, Nos entreprises…) */
.jbp-card__media img { width: 100%; aspect-ratio: 416 / 299; object-fit: cover; }
.jbp-card__title { margin-top: 32px; }
.jbp-card__status { margin-top: 13px; font: 400 17px/21px var(--jbp-font); letter-spacing: .02em; text-transform: uppercase; }
.jbp-card__status::before { content: attr(data-icon); display: inline-block; width: 31px; font: 300 15px/1 var(--jbp-fa); }
.jbp-card__text { margin-top: 21px; }

/* Bloc page intérieure : visuel en fond + panneau blanc (Nos entreprises…) */
.jbp-pagehead { position: relative; height: auto; padding-bottom: 80px; background: #dfe7f7 url(../img/hero-page.jpg) center top / cover no-repeat; }
.jbp-pagehead .container { position: relative; z-index: 2; padding-top: 191px; }
.jbp-panel { margin: 0 -24px; padding: 34px 24px 100px; border-radius: 10px; background: #fff; }
.jbp-breadcrumb { font: 500 14px/21px var(--jbp-font); letter-spacing: .02em; }
.jbp-breadcrumb a { color: inherit; text-decoration: none; }
.jbp-h1 { margin-top: 9px; font: 500 56px/80px var(--jbp-font); letter-spacing: -.03em; color: #000; }

/* Section « chantiers » sur fond bleu ciel : titre + 3 cartes + bouton (Nos entreprises, Histoire…) */
.jbp-current { padding: 101px 0 93px; background: var(--jbp-bg-sky); }
.jbp-current .jbp-h2 { margin-bottom: 49px; }
.jbp-current .jbp-card__title + .jbp-card__text { margin-top: 25px; }
.jbp-current__cta { margin-top: 89px; text-align: center; }
.jbp-btn--wide { width: 416px; max-width: 100%; }

/* Séparateur avant le pied de page (accueil) */
.jbp-rule { border-top: 1px solid var(--jbp-grey); }

/* ---------- Pied de page ---------- */
.jbp-footer { padding: 0 0 142px; }
.jbp-footer .row { padding-top: 84px; }
.jbp-footer__col { position: relative; font: 500 14px/21px var(--jbp-font); letter-spacing: .02em; }
.jbp-footer__col a { color: inherit; text-decoration: none; }
.jbp-footer__col a:hover { color: var(--jbp-red); }
.jbp-footer__col--line::before { content: ""; position: absolute; left: calc(var(--bs-gutter-x) * .5); top: 13px; width: 1px; height: 295px; background: var(--jbp-grey); }
.jbp-footer__crest { width: 141px; margin: 9px 0 0 -31px; }
.jbp-footer__crest + p { margin-top: 18.5px; }
.jbp-footer__brand { padding-left: 76px; } /* 12 de gouttière + 64 */
.jbp-footer__brand p { margin-top: 13px; }
.jbp-footer__group img { width: 200px; margin: 2px 0 0 78px; }
.jbp-footer__group p { margin: 46px 0 0 112px; }
.jbp-footer__legal { padding-left: 98px; padding-top: 8px; } /* 12 + 86 */
.jbp-footer__badge { width: 132px; margin-top: 34px; }

@media (max-width: 1399.98px) {
	:root { --jbp-container: 1116px; }
	.jbp-nav { grid-template-columns: repeat(6, auto) 19px; justify-content: space-between; flex: 1; }
}
@media (max-width: 1199.98px) { :root { --jbp-container: 936px; } }
@media (max-width: 991.98px) {
	.jbp-header .container { flex-wrap: wrap; }
	.jbp-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 24px 0 0; flex-basis: 100%; }
	.jbp-h2, .jbp-h1 { font-size: 40px; line-height: 44px; }
	.jbp-pagehead { height: auto; padding-bottom: 60px; }
	.jbp-pagehead .container { padding-top: 220px; }
	.jbp-panel { margin: 0; padding: 32px 24px 48px; }
	.jbp-card { margin-bottom: 48px; }
	.jbp-footer { padding-bottom: 80px; }
	.jbp-footer .row { padding-top: 60px; row-gap: 40px; }
	.jbp-footer__col--line::before { display: none; }
	.jbp-footer__brand, .jbp-footer__legal { padding-left: 12px; }
	.jbp-footer__group img, .jbp-footer__group p { margin-left: 0; }
}
@media (max-width: 575.98px) {
	.jbp-h2, .jbp-h1 { font-size: 32px; line-height: 36px; }
	.jbp-nav a { font-size: 13px; }
}
