avec une
![]()
dedans (cf. partners.php). Le SVG `deco-vague.svg` est dark, les zones
transparentes laissent voir la section adjacente. Position via modifiers :
`.bm-split__vague--top` : au-dessus de la section (extension dans la section précédente)
`.bm-split__vague--bottom` : sous la section (extension dans la section suivante, SVG flippé) */
.bm-split__vague {
position: absolute;
display: flex;
align-items: flex-end;
left: 50%;
width: 635px;
max-width: 62%;
height: 40px;
z-index: 3;
pointer-events: none;
}
.bm-split__vague img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
.bm-split__vague--top {
top: -40px;
align-items: end;
margin-bottom: -1px; /* recouvrement section précédente */
transform: translateX(-50%) translateY(1px);
}
/* Variante alignée à gauche (Rupture de canalisation — page Urgences). */
.bm-split__vague--left {
left: 0;
right: auto;
transform: none;
margin-left: clamp(20px, 6.6vw, 100px);
}
.bm-split__vague--top.bm-split__vague--left {
transform: none;
}
.bm-split__vague--bottom {
bottom: -40px;
transform: translateX(-50%) scaleY(-1) translateY(1px);
margin-top: -1px; /* recouvrement section suivante */
}
/* Section « Assainissement » (page VRD) : pas de padding bas (demande client). */
#assainissement {
padding-bottom: 0;
}
/* Photo à gauche : on inverse l'ordre visuel sans toucher au DOM. */
.bm-split--image-left {
flex-direction: row-reverse;
}
.bm-split__col {
flex: var(--bm-split-text) 1 0;
display: flex;
flex-direction: column;
gap: 40px;
min-width: 0;
}
.bm-split__title h2 {
color: var(--bm-primary);
line-height: 60px;
}
.bm-split__title h3 {
color: var(--bm-primary);
line-height: 41px;
}
.bm-split--dark .bm-split__title h2,
.bm-split--dark .bm-split__title h3 {
color: var(--bm-light);
}
.bm-split__title .bm-badge-h2,
.bm-split__title .bm-badge-h3 {
margin-top: 6px;
}
/* Title row : titre + badge sur même ligne (variante inline). */
.bm-split__title-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
gap: 6px;
}
.bm-split__title-row h2,
.bm-split__title-row h3 {
margin: 0;
}
.bm-split__title-row .bm-badge-h2,
.bm-split__title-row .bm-badge-h3 {
margin-top: 0;
}
/* Lead : sous-titre Antonio Bold (callout 32). */
.bm-split__lead {
font-family: var(--bm-font-title);
font-weight: 700;
font-size: var(--bm-fs-h3);
line-height: 1.28;
color: var(--bm-secondary);
}
.bm-split--dark .bm-split__lead {
color: var(--bm-light);
}
.bm-split__body {
display: flex;
flex-direction: column;
gap: 20px;
}
.bm-split__body p {
font-size: 16px;
line-height: 22px;
}
/* Compense la marge native des bm-list-waves quand utilisée dans un split. */
.bm-split__col .bm-list-waves {
margin-top: 0;
}
/* Media : flex row. 1 figure remplit, 2 figures se partagent (50/50). */
.bm-split__media {
flex: var(--bm-split-media) 1 0;
display: flex;
flex-direction: row;
gap: clamp(6px, 1vw, 12px);
align-items: center;
min-width: 0;
}
.bm-split__media-item {
flex: 1 1 0;
margin: 0;
min-width: 0;
border-radius: var(--bm-radius);
overflow: hidden;
aspect-ratio: var(--bm-split-media-ratio, 555 / 676);
}
/* Image solo : la hauteur ne dépasse jamais 666 px (cap Figma). `object-fit:
cover` sur l'![]()
gère le recadrage si le ratio appelle une hauteur plus
grande que ce plafond. */
.bm-split__media-item:only-child {
max-height: 666px;
}
.bm-split__media-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Tilt : rotation décorative. Sur le single (1 enfant), légère ; sur le dual,
opposée selon le rang. Spécificité haute (.bm-split--media-tilt + .bm-split__media)
pour ne pas être écrasé par des règles parentes. */
.bm-split--media-tilt .bm-split__media .bm-split__media-item:only-child {
transform: rotate(-4.5deg) translateY(5%);
}
.bm-split--media-tilt
.bm-split__media
.bm-split__media-item:first-child:not(:only-child) {
transform: rotate(-8deg);
}
.bm-split--media-tilt .bm-split__media .bm-split__media-item:nth-child(2) {
transform: rotate(7deg);
}
/* Sections à média incliné AVEC vague en haut (« Rupture de canalisation »,
« Terrassement en milieu urbain »…) : l'image inclinée débordait sous la
section. La section garde overflow:visible pour que la vague dépasse en haut ;
c'est la COLONNE média qui reçoit overflow:hidden, ce qui rogne le débord de
l'image (bas + côtés) sans toucher la vague. (clip-path sur la section
faisait disparaître l'image inclinée — bug de compositing transform+clip.) */
/* Section « Rupture de canalisation » (et similaires média-incliné) : la vague est
SORTIE de la section, dans ce wrapper positionné. La section elle-même porte
overflow-hidden (classe utilitaire) pour couper le débord bas de l'image inclinée ;
la vague, hors de la section, dépasse donc en haut (top:-40px vs le wrapper) sans
être rognée. La vague étant absolute, le wrapper doit être positionné. */
.bm-split-vague-wrap {
position: relative;
}
/* Variante asymétrique (Figma 6054:1648 — section « Un matériel moderne ») :
image gauche plus haute et au-dessus (z-index supérieur), image droite plus
carrée et décalée vers le bas + chevauchement par marge négative. Proportions
issues du Figma (399 + 434 sur un cadre 733 → 54 % / 59 % avec overlap 13 %). */
.bm-split--media-offset .bm-split__media {
align-items: flex-start;
gap: 0;
position: relative;
}
.bm-split--media-offset .bm-split__media-item:first-child {
flex: 0 0 54%;
aspect-ratio: 399 / 547;
z-index: 2;
}
.bm-split--media-offset .bm-split__media-item:nth-child(2) {
flex: 0 0 59%;
aspect-ratio: 434 / 395;
margin-top: clamp(40px, 8vw, 150px);
margin-left: -13%;
z-index: 1;
}
.bm-split--media-offset.bm-split--media-tilt
.bm-split__media-item:first-child:not(:only-child) {
transform: rotate(-6deg);
}
.bm-split--media-offset.bm-split--media-tilt
.bm-split__media-item:nth-child(2) {
transform: rotate(4deg);
}
/* Supprime juste le padding-bottom (section flush avec la suivante). */
.bm-split--no-pb {
padding-bottom: 0;
}
/* Supprime le padding-top (utilisé après un wave / bm-vague-centred quand la
section précédente assure déjà l'espace haut). */
.bm-split--no-pt {
padding-top: 0;
}
/* Variante « Un matériel moderne » : la pile (cluster bm-locale__photos)
peut déborder en bas avec ses rotations, donc on coupe l'overflow ; le
padding-bottom retiré (no-pb) est réinjecté sur la colonne de gauche
(texte + logo Euro 6) pour préserver l'espace blanc de la maquette.
Détection via `:has()` du logo `bm-img-euro6` — la règle est auto-scoped
à cette section sans ajouter de modifier supplémentaire. */
.bm-split--no-pb:has(.bm-img-euro6) {
overflow: hidden;
}
.bm-split--no-pb:has(.bm-img-euro6) > .bm-split__col {
padding-bottom: clamp(60px, 8vw, 100px);
}
/* Le cluster bm-locale__photos imbriqué dans .bm-split__media (flex row,
align-items: center) n'a pas de largeur intrinsèque : ses enfants sont
tous en position absolute, donc le flex item collapse à 0 et les photos
disparaissent. On force le cluster à occuper toute la largeur du media
pour activer l'aspect-ratio (733/547) — même rendu que la home locale. */
.bm-split__media > .bm-locale__photos {
flex: 1 1 0;
width: 100%;
align-self: center;
}
/* Section « Une plateforme de valorisation interne » (page valeurs et RSE) :
contenu en flux vertical au lieu du positionnement absolute par défaut du
.bm-sec. Le parent .bm-sec est déjà display: flex; flex-direction: column;
gap: 40px — il suffit de désactiver position: absolute sur les enfants
(.bm-sec__center et .bm-sec__item). align-items reste à `stretch` (défaut)
pour que les items occupent le max-w-[836px] de la section (Tailwind). */
.bm-sec--plateforme {
height: auto;
padding-block: clamp(60px, 8vw, 100px);
}
.bm-sec--plateforme > .bm-sec__center,
.bm-sec--plateforme > .bm-sec__item {
position: static;
}
/* Les 2 figures de la paire sont en position: absolute (cf. .bm-photo-pair >
.bm-photo). Sans `top` explicite dans les inline styles, la 2ᵉ se range à
sa static position = sous la 1ʳᵉ. On force top: 0 pour qu'elles restent
côte à côte (left:0 / left:50% pilote l'axe horizontal) à tous les viewports. */
.bm-sec--plateforme .bm-photo-pair > .bm-photo {
top: 0;
}
@media (max-width: 1024px) {
.bm-split,
.bm-split--image-left {
flex-direction: column;
gap: clamp(40px, 6vw, 60px);
}
.bm-split__col,
.bm-split__media {
flex: 0 0 auto;
width: 100%;
}
.bm-split__media {
padding-inline: 20px !important;
}
.bm-split__media-item {
margin-inline: auto;
}
.bm-split--media-tilt .bm-split__media-item {
transform: none;
}
}
/* --- Bande vague + feeds (accueil) ---------------------------------------- */
.bm-wave-band {
height: 220px;
background: var(--bm-light);
overflow: hidden;
position: relative;
}
.bm-wave-band {
background-image: url("../img/deco-vague-large.svg");
background-repeat: no-repeat;
background-position: center top;
background-size: 100% 221px;
}
.bm-feeds {
display: flex;
gap: 20px;
height: 750px;
background: var(--bm-light);
}
.bm-feeds__card {
flex: 1 1 0;
background: #acacac;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 290px;
}
.bm-feeds__title {
font-family: var(--bm-font-text);
font-weight: 700;
font-size: 26px;
line-height: 32px;
color: var(--bm-primary);
}
.bm-feeds__icon {
display: block;
margin-top: 22px;
width: 84px;
height: 84px;
}
.bm-feeds__icon svg {
width: 100%;
height: 100%;
}
/* Carte hôte du widget Elfsight (Instagram) */
.bm-feeds__card--widget {
background: var(--bm-white);
padding: 0;
display: block;
overflow: hidden;
}
.bm-feeds__card--widget > div {
width: 100%;
height: 100%;
overflow: auto;
}
/* --- Bande CTA (réutilisée sur toutes les pages) --------------------------- */
.bm-cta {
position: relative;
background:
linear-gradient(var(--bm-black-80), var(--bm-black-80)),
var(--bm-cta-img, none) center / cover no-repeat,
var(--bm-dark);
color: var(--bm-light);
}
.bm-cta__inner {
position: relative;
padding-block: 195px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* max-width retiré : la bande CTA occupe toute la largeur */
.bm-cta__inner.bm-container {
max-width: none;
}
.bm-cta__title {
color: var(--bm-light);
line-height: 60px;
}
.bm-badge-h2--secondary-text {
background: var(--bm-light);
color: var(--bm-secondary);
}
.bm-cta__text {
margin-top: 40px;
max-width: 646px;
font-size: 16px;
line-height: 22px;
}
.bm-cta .bm-btn {
margin-top: 40px;
}
.bm-cta::after {
content: none;
position: absolute;
bottom: 0;
background-repeat: no-repeat;
background-size: 100% 100%;
}
/* --- Pages internes : sections génériques pilotées par variables --------- */
/* Intro de page : & + paragraphe centré. Flex column simple, plus de
positionnement absolu — la hauteur s'adapte au contenu. La variable
`--h` est conservée comme `min-height` pour préserver l'espace blanc
minimal souhaité par la maquette quand le texte est court. */
.bm-page-intro {
position: relative;
background: var(--bm-light);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-block: clamp(60px, 8vw, 100px);
min-height: var(--h, auto);
}
.bm-page-intro__col {
width: 100%;
max-width: var(--w, 868px);
padding-inline: clamp(20px, 6.6vw, 100px);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.bm-page-intro__col .bm-intro__amp {
margin-top: 0;
}
.bm-page-intro__col p {
margin-top: 40px;
font-size: 16px;
line-height: 22px;
}
.bm-page-intro__col .bm-waves {
margin-top: 20px;
}
/* Section générique : enfants positionnés par variables */
.bm-sec {
position: relative;
display: flex;
flex-direction: column;
gap: 40px;
height: var(--h);
background: var(--bm-light);
}
.bm-sec--dark {
background: var(--bm-dark);
color: var(--bm-light);
}
.bm-sec__item {
position: absolute;
left: calc((100% - 1512px) / 2 + var(--x, 0px));
top: var(--y, 0px);
width: var(--w, auto);
}
.bm-sec h2 {
color: var(--bm-primary);
line-height: 60px;
}
.bm-sec--dark h2 {
color: var(--bm-light);
}
.bm-sec p {
font-size: 16px;
line-height: 22px;
}
.bm-sec__text {
margin-top: 40px;
}
.bm-sec__text + .bm-sec__text {
margin-top: 20px;
}
.bm-photo {
margin: 0;
width: var(--w, auto);
border-radius: var(--bm-radius);
overflow: hidden;
height: var(--ph, auto);
}
.bm-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Photo tiltée : rotation pilotée par --rot (cf. Figma 6062:572). */
.bm-photo--tilt {
transform: rotate(var(--rot, 0deg));
}
/* Paire de photos cote-à-cote (Plateforme valorisation, Valorisation des
déblais, Voirie, Des moyens performants…) : positionnement absolu en %
pour conserver l'assemblage Figma de manière responsive (les photos
restent côte-à-côte avec leurs chevauchements et rotations, ne s'empilent
jamais verticalement). Le ratio total est porté par `aspect-ratio` ;
chaque photo est positionnée via `left/top/width/height` inline (% du
conteneur). Les rotations restent sur `--rot` (cf. `.bm-photo--tilt`). */
.bm-photo-pair {
position: relative;
width: 100%;
max-width: 100%;
margin-inline: auto;
}
.bm-photo-pair > .bm-photo {
position: absolute;
margin: 0;
}
/* Liste à puces vagues (pages services) */
.bm-list-waves {
list-style: none;
margin: 40px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 20px;
}
.bm-list-waves li {
font-size: 16px;
line-height: 22px;
}
.bm-list-waves li::after {
content: "";
display: block;
width: 106px;
height: 7px;
margin-top: 10px;
background-color: var(--bm-secondary);
-webkit-mask: url("../img/deco-wave-single.svg") 0 0 / 100% 100% no-repeat;
mask: url("../img/deco-wave-single.svg") 0 0 / 100% 100% no-repeat;
mask-position: -10px;
}
/* Sur fond sombre (`bm-split--dark` ou `bm-team`), la ligne passe en jaune
(cf. Figma 6061:491 pour `Une logique de circuit court`). */
.bm-split--dark .bm-list-waves li::after,
.bm-team .bm-list-waves li::after {
background-color: var(--bm-tertiary);
}
/* Vague de transition centrée (clair -> sombre), zone tampon 38 px */
.bm-vague-centred {
position: relative;
height: 38px;
background: var(--bm-light);
z-index: 2;
}
.bm-vague-centred::before {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -1px;
width: 635px;
height: 40px;
background: url("../img/deco-vague.svg") 0 0 / 100% 100% no-repeat;
}
/* CTA avec vague claire en bas (pages services) : on utilise la silhouette
SVG en mask + fond `--bm-light` pour que la vague reste visible quelle
que soit la zone (sombre) du photo-fond du CTA — un simple `fill="#00041B"`
serait noyé sur le dark de la `--bm-cta-img` photo + black-80 overlay. */
.bm-cta--vague::after {
content: "";
left: 50%;
transform: translateX(-50%);
width: 635px;
height: 40px;
background: var(--bm-dark);
-webkit-mask: url("../img/deco-vague.svg") center bottom / 100% 100% no-repeat;
mask: url("../img/deco-vague.svg") center bottom / 100% 100% no-repeat;
}
@media (max-width: 1024px) {
.bm-menu__scroll {
justify-content: start;
}
.bm-page-intro {
min-height: auto;
padding-block: 32px;
}
.bm-page-intro__col {
max-width: 688px;
padding-inline: 20px;
}
.bm-sec {
height: auto;
padding: 32px 0;
}
.bm-sec__item {
position: static;
width: auto;
margin-inline: auto;
padding-inline: 20px;
}
/* Réduit aussi les paddings des composants principaux : split, feature,
expertise, vrd-intro, vrd-travaux — ils utilisent tous le même clamp
d'origine `clamp(60px, 8vw, 100px)` qui reste trop large en mobile. */
.bm-split,
.bm-feature,
.bm-expertise,
.bm-vrd-intro,
.bm-vrd-travaux {
padding-block: 32px;
padding-inline: 20px;
}
.bm-vrd-travaux {
gap: 32px;
padding-block: 0; /* pas de padding vertical (demande client), même en mobile */
}
.bm-expertise {
gap: 24px;
}
.bm-photo {
width: 100%;
max-width: 666px;
height: auto;
border-radius: var(--bm-radius);
}
.bm-cta--vague::after {
width: 530px;
}
}
@media (max-width: 640px) {
.bm-page-intro__col,
.bm-sec__item {
padding-inline: 20px;
}
.bm-cta--vague::after {
width: 266px;
height: 28px;
}
.bm-hero::after {
background-size: cover;
}
}
/* Chips « & » (VRD, etc.) */
.bm-chips {
display: flex;
justify-content: center;
gap: 20px;
overflow: hidden;
white-space: nowrap;
}
/* Variante : wrap centré (autorise plusieurs lignes, pour la 1ère section VRD). */
.bm-chips--wrap {
flex-wrap: wrap;
overflow: visible;
white-space: normal;
row-gap: 20px;
}
/* Variante : carrousel défilant linéairement (comme bm-partners), pour la
section « Découvrez l'ensemble de nos travaux » (page VRD). */
.bm-chips-marquee {
position: relative;
width: 100%;
overflow: hidden;
-webkit-mask-image: linear-gradient(
90deg,
transparent,
#000 3%,
#000 92%,
transparent
);
mask-image: linear-gradient(
90deg,
transparent,
#000 3%,
#000 92%,
transparent
);
}
.bm-chips-marquee__track {
display: flex;
align-items: center;
gap: clamp(20px, 3vw, 40px);
width: max-content;
animation: bm-marquee 38s linear infinite;
}
.bm-chips-marquee:hover .bm-chips-marquee__track {
animation-play-state: paused;
}
.bm-no-anim .bm-chips-marquee__track {
animation: none !important;
}
.bm-chip {
position: relative;
height: 84px;
display: inline-flex;
align-items: center;
padding-left: 31px;
flex: 0 0 auto;
}
.bm-chip::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 91px;
height: 84px;
background: url("../img/icon-quote.svg") 0 0 / contain no-repeat;
opacity: 0.12;
}
.bm-chip span {
position: relative;
font-family: var(--bm-font-title);
font-weight: 700;
font-size: var(--bm-fs-h3);
line-height: 41px;
color: var(--bm-primary);
}
/* Callout secondaire (texte 32 bleu) */
.bm-callout {
font-family: var(--bm-font-title);
font-weight: 700;
font-size: var(--bm-fs-h3);
line-height: 41px;
color: var(--bm-secondary);
}
/* Titre H2 + badge sur une même ligne */
.bm-h2-line {
display: flex;
align-items: flex-start;
gap: 6px;
white-space: nowrap;
}
.bm-h2-line .bm-badge-h2 {
margin-top: 0;
}
/* Titre de section centré */
.bm-sec__center {
position: absolute;
left: 0;
right: 0;
top: var(--y, 0px);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* CTA : variantes padding et titre inline */
.bm-cta__inner {
padding-block: var(--cta-pt, 195px);
}
.bm-cta--inline .bm-cta__title {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 6px;
white-space: normal;
}
.bm-cta--inline .bm-badge-h2 {
margin-top: 0;
}
/* Titres H3 + badge inline (sous-sections 32px) */
.bm-h3-line {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 6px;
white-space: nowrap;
}
.bm-h3-line h3 {
line-height: 41px;
}
.bm-badge-h3 {
display: inline-flex;
background: var(--bm-secondary);
color: var(--bm-light);
font-family: var(--bm-font-title);
font-weight: 700;
font-size: var(--bm-fs-h3);
line-height: 41px;
padding: 0 6px 6px;
}
.bm-badge-h3--primary {
background: var(--bm-primary);
}
@media (max-width: 1024px) {
.bm-chips {
flex-wrap: wrap;
white-space: normal;
}
.bm-h2-line,
.bm-h3-line {
white-space: normal;
}
.bm-split__title-row {
flex-direction: column;
}
.bm-split--no-pb {
padding-bottom: 0 !important;
}
.bm-sec__center {
position: static;
padding: 0 40px;
}
}
/* --- Sections génériques ---------------------------------------------- */
.bm-section {
position: relative;
}
/* Révélations au scroll : état final par défaut (fallback sans JS) */
[data-reveal] {
opacity: 1;
transform: none;
}
[data-reveal].is-armed {
opacity: 0;
transform: translateY(24px);
}
[data-reveal].is-visible {
opacity: 1;
transform: none;
transition:
opacity 0.6s ease,
transform 0.6s ease;
}
/* ===================================================================
Responsive — frames Figma 768 (≤1024) et 390 (≤640)
Specs : _tools/responsive-spec.txt (géométrie exacte des frames)
=================================================================== */
@media (max-width: 1024px) {
:root {
--container-pad: 40px;
--bm-fs-h1: 70px;
--bm-fs-h1bis: 60px;
--bm-fs-h2: 48px;
--bm-fs-h3: 28px;
--bm-fs-callout: 32px;
}
/* Header : logo + Contact + Menu */
.bm-header__cta {
display: none;
}
.bm-header__cta.bm-btn--secondary {
display: inline-flex;
}
/* Les 3 boutons du menu : empilés verticalement, calés à gauche, sous la nav */
.bm-menu__extra {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.bm-menu__list {
justify-content: flex-start;
gap: 20px;
}
/* Hero (fluide : on n'ajuste que la typo, la vague et la largeur du bas) */
.bm-hero__title h1 {
max-width: 488px;
line-height: 1.1;
}
.bm-hero__badge {
font-size: 60px;
}
.bm-hero__bottom {
width: 479px;
max-width: calc(100% - 80px);
}
.bm-hero__wave {
background-image: url("../img/deco-hero-bottom-tablet.svg");
}
/* Intro : le collage en % s'adapte à la largeur (plus de repositionnement px) */
.bm-intro__col {
padding-inline: var(--container-pad);
}
.bm-intro__tiles {
height: 684px;
}
/* Publics : photo + cartes superposées, aside dessous (1 colonne) */
.bm-publics {
grid-template-columns: 1fr;
gap: 40px;
}
.bm-publics__cards {
width: clamp(200px, 38%, 280px);
right: clamp(-20px, -2vw, -8px);
}
/* Expertises : deck sous la liste (1 colonne) */
.bm-expertises__vague {
width: 531px;
background-image: url("../img/deco-vague-tablet.svg");
background-size: 100%;
margin-bottom: -1px;
}
.bm-expertises__inner {
grid-template-columns: 1fr;
gap: clamp(32px, 6vw, 56px);
/* Le padding-bottom revient sur la section en mobile (le col empilé
n'a plus de raison de le porter seul). */
padding-bottom: clamp(40px, 6vw, 80px);
}
.bm-expertises__col {
padding-bottom: 0;
}
/* Chantiers : photo en haut, contenu dessous (1 colonne) */
.bm-chantiers {
grid-template-columns: 1fr;
gap: 40px;
}
.bm-chantiers__media {
max-width: 420px;
}
.bm-chantiers__line {
display: none;
}
/* Locale : 1 colonne, photos dessous */
.bm-locale {
grid-template-columns: 1fr;
gap: 48px;
}
/* Partenaires */
.bm-partners__inner {
padding-left: 40px;
}
.bm-partners h3 {
line-height: 1.28;
}
.bm-badge-h2 {
font-size: 48px;
line-height: 60px;
}
/* Urgence : photo centrée dessous + vague de transition */
.bm-urgence {
grid-template-columns: 1fr;
margin-top: 39px;
padding-bottom: clamp(60px, 8vw, 100px);
}
.bm-urgence__photo {
max-width: 421px;
margin-inline: auto;
}
/* Feeds : 2 cartes côte à côte 398 */
.bm-feeds {
height: 398px;
}
.bm-feeds__title {
font-size: 24px;
line-height: 28px;
color: var(--bm-light);
}
/* CTA */
.bm-cta__inner {
padding-block: 196px;
padding-inline: 40px;
}
.bm-cta__text {
max-width: 646px;
}
.bm-cta--vague::after {
width: 530px;
-webkit-mask-image: url("../img/deco-vague-cta-tablet.svg");
mask-image: url("../img/deco-vague-cta-tablet.svg");
}
/* Footer */
.bm-footer__inner {
padding: 100px 40px;
gap: 40px;
}
.bm-footer__logo img {
width: 326px;
}
.bm-footer__btp74 img {
width: 99px;
}
}
@media (max-width: 640px) {
:root {
--container-pad: 20px;
--bm-fs-h1: 62px;
--bm-fs-h1bis: 52px;
--bm-fs-h2: 40px;
--bm-fs-h3: 24px;
--bm-fs-callout: 28px;
}
.bm-header__inner {
padding-left: 0;
}
.bm-header__logo {
padding-left: 40px;
}
.bm-header__cta.bm-btn--secondary {
display: none;
}
/* Hero (fluide) */
.bm-hero__title h1 {
max-width: 350px;
line-height: 1.08;
}
.bm-hero__badge {
font-size: 52px;
padding: 0 7px 10px;
letter-spacing: 0.03em;
}
.bm-hero__bottom {
width: 288px;
}
.bm-hero__wave {
width: 100%;
height: 28px;
background-image: url("../img/deco-hero-bottom-mobile.svg");
background-position-y: bottom;
background-size: 100%;
margin-bottom: -1px;
}
.bm-hero__scroll {
width: 19px;
height: 40px;
margin-bottom: 24px;
}
.bm-hero__scroll svg {
width: 19px;
height: 40px;
}
/* Intro : une colonne (texte centré), collage décoratif masqué en mobile */
.bm-intro__amp {
display: block;
margin-top: 0;
}
.bm-intro__col {
width: min(520px, 100%);
margin-inline: auto;
}
.bm-intro__col p:first-of-type {
margin-top: 40px;
}
/* Publics : cartes en ligne sous la photo */
.bm-publics__cards {
position: static;
transform: none;
right: auto;
width: 100%;
flex-direction: row;
margin-top: 20px;
}
.bm-card-public {
flex: 1;
}
/* Expertises */
.bm-expertises__vague {
width: 340px;
background-image: url("../img/deco-vague-mobile.svg");
background-size: 100%;
}
.bm-badge-h2 {
font-size: 40px;
line-height: 60px;
padding: 0 6px 6px;
}
.bm-expertises__thumbs {
margin-top: 40px;
}
.bm-expertises__tab {
font-size: 24px;
line-height: 31px;
padding: 3px 12px 8px;
}
/* Chantiers */
.bm-chantiers__media {
max-width: 100%;
}
.bm-step h3 {
font-size: 28px;
line-height: 36px;
}
/* Locale : photos empilées (rotation conservée) */
.bm-locale__photos {
aspect-ratio: auto;
display: flex;
flex-direction: column;
gap: 28px;
padding-top: 400px;
padding-inline: 20px;
}
.bm-locale__photo {
left: auto;
width: 100%;
height: auto;
}
.bm-locale__photo--tall {
position: absolute;
top: 0;
right: 0;
max-height: 470px;
aspect-ratio: 346 / 474;
transform: rotate(-3deg);
}
.bm-locale__photo--wide {
position: relative;
bottom: -10%;
max-height: 320px;
aspect-ratio: 350 / 320;
transform: rotate(12deg);
}
/* Partenaires */
.bm-partners__inner {
padding-left: 20px;
}
.bm-partners h3 {
font-size: 24px;
line-height: 31px;
}
.bm-chantiers .bm-badge-h2 {
padding-bottom: 0;
}
.bm-cta .bm-badge-h2 {
padding-bottom: 4px;
}
.bm-partners .bm-waves {
margin-top: 40px;
}
/* Vague de transition sombre → clair avant urgence */
.bm-urgence {
margin-top: 26px;
}
/* Urgence */
.bm-rse-card h3 {
font-size: 24px;
line-height: 31px;
}
.bm-urgence__photo {
max-width: 349px;
}
/* Grande vague : variante 652 px */
.bm-wave-band {
background-image: url("../img/deco-vague-large-mobile.svg");
background-size: 640px auto;
background-position: bottom;
height: 140px;
}
/* Feeds : empilés 390 */
.bm-feeds {
flex-direction: column;
height: 800px;
}
.bm-feeds__card {
flex: 0 0 390px;
}
.bm-feeds__title {
font-size: 24px;
line-height: 28px;
}
/* CTA */
.bm-cta__inner {
padding-block: 110px;
padding-inline: 20px;
}
.bm-cta__title {
font-size: 40px;
line-height: 60px;
}
.bm-cta__text {
margin-top: 40px;
}
.bm-cta--vague::after {
width: 266px;
height: 28px;
-webkit-mask-image: url("../img/deco-vague-cta-mobile.svg");
mask-image: url("../img/deco-vague-cta-mobile.svg");
}
/* Footer */
.bm-footer__inner {
padding: 100px 20px;
gap: 40px;
}
.bm-footer__brand {
flex-direction: column;
align-items: flex-start;
gap: 60px;
}
.bm-footer__logo img {
width: 326px;
}
.bm-footer__btp74 img {
width: 99px;
}
.bm-footer__cols {
flex-direction: column;
gap: 40px;
}
.bm-footer__col--right {
text-align: left;
}
.bm-footer__title {
font-size: 28px;
line-height: 36px;
}
}
/* --- Formulaires WPForms (cf. WPFORMS.md §4 — exception visuelle autorisée) --- */
.bm-form-host .wpforms-field {
width: 100% !important;
margin: 0;
padding: 0;
/* 16px entre les champs. !important indispensable : une règle de reset
`.wpforms-field { margin-bottom: 0 !important }` (plus haut) annule sinon
l'espacement sur les deux formulaires. */
margin-bottom: 16px !important;
}
.bm-form-host .wpforms-field-medium,
.bm-form-host .wpforms-field-small,
.bm-form-host .wpforms-field-large {
max-width: 100% !important;
}
.bm-form-host .wpforms-field-label {
display: block;
font-size: 16px;
font-weight: 300;
line-height: 22px;
margin-bottom: 8px;
}
.bm-form-host input[type="text"],
.bm-form-host input[type="tel"],
.bm-form-host input[type="email"],
.bm-form-host input[type="date"],
.bm-form-host input[type="number"],
.bm-form-host textarea {
width: 100% !important;
max-width: 100% !important;
background: var(--bm-light) !important;
color: var(--bm-dark) !important;
border: 0 !important;
border-radius: 4px;
padding: 10px 14px;
font-family: var(--bm-font-text);
font-size: 16px;
}
.bm-form-host textarea {
min-height: 110px;
}
/* Checkboxes : on neutralise le rendu natif pour pouvoir styler la bordure
et la coche aux couleurs de la marque. Bordure `--bm-light` par défaut,
bascule en `--bm-secondary` quand la case est cochée, et le carré central
est lui aussi en `--bm-secondary`. */
.bm-form-host input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
border: 1px solid var(--bm-light);
border-radius: 3px;
background: transparent;
position: relative;
flex: 0 0 auto;
cursor: pointer;
}
.bm-form-host input[type="checkbox"]:checked {
border-color: var(--bm-secondary);
}
.bm-form-host input[type="checkbox"]:checked::after {
content: "";
position: absolute;
inset: 3px;
background: var(--bm-secondary);
border-radius: 2px;
}
/* WPForms CSS étant désactivé (cf. Configuration.php wpforms_disable_css), on ré-
implémente les classes utilitaires que le plugin fournit normalement, sinon les
réglages du formulaire (colonnes, label masqué) n'ont aucun effet visuel. */
/* label_hide=1 : masquage accessible (reste lisible par lecteur d'écran) — cache
les libellés « Appareils » et « RGPD » comme sur la maquette. */
.bm-form-host .wpforms-label-hide {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Listes de cases (Appareils + consentement RGPD) : reset puce + case/label alignés. */
.bm-form-host .wpforms-field-checkbox ul,
.bm-form-host .wpforms-field-gdpr-checkbox ul {
list-style: none;
margin: 0;
padding: 0;
}
.bm-form-host .wpforms-field-checkbox li,
.bm-form-host .wpforms-field-gdpr-checkbox li {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0 0 10px;
}
.bm-form-host .wpforms-field-label-inline {
font-size: 16px;
font-weight: 300;
line-height: 22px;
margin: 0;
cursor: pointer;
}
/* input_columns=2 : les 10 « Appareils » sur 2 colonnes, remplissage vertical
(1→5 à gauche, 6→10 à droite) pour coller à la maquette. WPForms pose la classe
wpforms-list-2-columns sur le CONTENEUR du champ, pas sur la
- : c'est donc la
- sont les cases) qu'il faut passer en grid. La maquette (node 6077:1470) garde ces 2 colonnes même en mobile (428px) → pas de repli 1 colonne. */ .bm-form-host .wpforms-list-2-columns ul, .bm-form-host ul.wpforms-list-2-columns { display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, auto); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } .bm-form-host button[type="submit"] { border: 0; background: var(--bm-secondary); color: var(--bm-dark); font-family: var(--bm-font-text); font-size: 16px; font-weight: 600; padding: 12px 18px; border-radius: 4px; cursor: pointer; margin-top: 10px; } .bm-form-host button[type="submit"]:hover { filter: brightness(1.1); } .bm-form-host .wpforms-error { color: var(--bm-tertiary); font-size: 14px; margin-top: 4px; display: block; } .bm-form-host--dark { color: var(--bm-light); } .bm-form-host--dark .wpforms-field-label { color: var(--bm-light); } /* --- Popup succès ---------------------------------------------------------- */ .bm-popup { position: fixed; inset: 0; z-index: 300; } .bm-popup[hidden] { display: none; } .bm-popup__backdrop { position: absolute; inset: 0; background: var(--bm-black-80); } .bm-popup__box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100% - 40px)); background: var(--bm-light); color: var(--bm-dark); border-radius: var(--bm-radius); padding: 48px 40px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; } .bm-popup__box h2 { color: var(--bm-primary); } /* --- Parc matériel (location) -------------------------------------------- */ /* Section grid 2 colonnes (photos / texte) — remplace l'ancien .bm-sec absolute. La pile de photos est enroulée dans `.bm-photo-cluster` qui reste relative ; les photos à l'intérieur gardent leurs positions absolutes via les variables --x/--y/--w/--ph (cf. pattern réutilisable demandé par l'utilisateur — pas de scale percentage ici, positions px). */ .bm-parc { position: relative; display: grid; grid-template-columns: minmax(0, 615fr) minmax(0, 597fr); gap: clamp(40px, 6vw, 100px); padding: clamp(60px, 8vw, 100px) clamp(20px, 6.6vw, 100px); align-items: center; background: var(--bm-dark); color: var(--bm-light); } .bm-parc__col { min-width: 0; } .bm-parc__col h2 { color: var(--bm-light); line-height: 60px; } .bm-parc__text { margin-top: 40px; font-size: 16px; line-height: 22px; } .bm-parc__text + .bm-parc__text { margin-top: 20px; } .bm-photo-cluster { position: relative; width: 100%; aspect-ratio: 615 / 503; min-width: 0; } .bm-photo-cluster > .bm-photo { position: absolute; width: var(--w, auto); height: var(--ph, auto); margin: 0; } .bm-photo-cluster > .bm-photo:nth-child(1) { right: 0; top: 0; height: 100%; } .bm-photo-cluster > .bm-photo:nth-child(2) { left: 0; top: 10%; height: 80%; } @media (max-width: 1024px) { .bm-parc { grid-template-columns: 1fr; } } /* --- Atouts d'engin (slider, page location) ------------------------------ */ .bm-engin { position: relative; padding: clamp(60px, 8vw, 100px) clamp(20px, 6.6vw, 100px); background: var(--bm-light); display: flex; flex-direction: column; gap: 40px; align-items: center; } .bm-engin__swiper { width: 100%; max-width: 1312px; overflow: visible; margin-inline: auto; } .bm-engin__slide { display: flex; align-items: center; justify-content: center; } /* Fan layout : 5 cartes en absolute dans un conteneur ratio 1312/424 (cf. Figma 6073:3516). La carte centrale (pos-2) est la plus grande et au premier plan. Symétrique : pos-0/pos-4 (313px), pos-1/pos-3 (373px), pos-2 (424px). */ .bm-engin__fan { position: relative; width: 100%; aspect-ratio: 1312 / 424; } .bm-engin__card { position: absolute; aspect-ratio: 1 / 1; border-radius: var(--bm-radius); padding: 40px; color: var(--bm-dark); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; /* aspect-ratio est une *préférence* en CSS : sans overflow:hidden, un contenu un peu long pousse la hauteur et casse le carré. On force le ratio en clippant l'éventuel débord (cohérent avec Figma où le contenu des petites cartes passe en partie sous la grande). */ overflow: hidden; } /* Les cartes périphériques utilisent max(%, px) : le % donne la taille Figma quand le viewport est large, le plancher px évite qu'elles rétrécissent au point que le contenu (h3 + p + waves + padding 80px) ne tienne plus dans le carré. La centrale (pos-2) garde son % pur comme demandé. */ .bm-engin__card--pos-0 { left: 0; top: 13.09%; /* 55.5 / 424 */ width: max(23.86%, 270px); /* 313 / 1312 ; plancher 270px */ z-index: 1; } .bm-engin__card--pos-1 { left: 16.24%; /* 213 / 1312 */ top: 6.01%; /* 25.5 / 424 */ width: max(28.43%, 300px); /* 373 / 1312 ; plancher 300px */ z-index: 2; } .bm-engin__card--pos-2 { position: relative; left: 50%; top: 0; width: 32.32%; /* 424 / 1312 — centrale, % fixe (demandé) */ transform: translateX(-50%); z-index: 3; } .bm-engin__card--pos-3 { left: 55.64%; /* 730 / 1312 */ top: 5.9%; /* 25 / 424 */ width: max(28.43%, 300px); z-index: 2; } .bm-engin__card--pos-4 { left: 76.14%; /* 999 / 1312 */ top: 13.09%; /* 55.5 / 424 */ width: max(23.86%, 270px); z-index: 1; } .bm-engin__card h3 { line-height: 41px; } .bm-engin__card p { margin-top: 20px; font-size: 16px; line-height: 22px; } .bm-engin__card .bm-waves { margin-top: 20px; } .bm-engin__card--dark, .bm-engin__card--dark h3 { color: var(--bm-light); } /* Carte centrale : hauteur mini 330px dès 1024px (demande client) pour qu'elle reste proportionnellement plus grande que les cartes voisines aux largeurs intermédiaires (en dessous de 1024px on ne touche à rien). */ @media (min-width: 1024px) { .bm-engin__card--pos-2 { min-height: 330px; } } /* Responsive : la disposition desktop (fan étalé aux positions Figma) est CONSERVÉE jusqu'à 1024px inclus (demande client — le resserrement intermédiaire 1024-1280 posait problème visuellement). En dessous de 1024px seulement, on rapproche les cartes périphériques pour réduire le débord (bloc ci-dessous). pos-2 y passe en width:100% (plafond 340px). */ @media (max-width: 1023.98px) { .bm-engin__card--pos-0 { left: 0; /* 2N pour N=20 */ } .bm-engin__card--pos-1 { left: 40px; } .bm-engin__card--pos-3 { left: auto; right: 40px; } .bm-engin__card--pos-4 { left: auto; right: 0; } .bm-engin__card--pos-2 { width: 100%; max-width: 340px; } } @media (max-width: 639.98px) { .bm-engin__card--pos-1 { left: 20px; } .bm-engin__card--pos-3 { right: 20px; } } @media (max-width: 390px) { .bm-engin__card--pos-0, .bm-engin__card--pos-1, .bm-engin__card--pos-3, .bm-engin__card--pos-4 { display: none; } } .bm-engin__nav { display: flex; flex-direction: row; gap: 20px; align-items: center; justify-content: center; } .bm-engin__btn { background: transparent; border: 0; padding: 0; cursor: pointer; } .bm-engin__btn .bm-stepper__btn-circle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 45px; border-radius: 4px; background: var(--bm-secondary); transition: background 0.3s ease; } .bm-engin__btn .bm-stepper__btn-circle svg { width: 18px; height: 18px; color: var(--bm-light); } .bm-engin__btn--prev .bm-stepper__btn-circle svg { transform: rotate(-90deg); } .bm-engin__btn--next .bm-stepper__btn-circle svg { transform: rotate(90deg); } .bm-engin__btn:hover .bm-stepper__btn-circle { background: var(--bm-primary); } .bm-engin__btn.swiper-button-disabled { opacity: 0.4; cursor: not-allowed; } /* --- Deck de cartes (location) -------------------------------------------- */ .bm-deck { position: relative; height: 424px; } .bm-deck__card { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border-radius: var(--bm-radius); padding: 40px; color: var(--bm-dark); display: flex; flex-direction: column; justify-content: center; } .bm-deck__card--dark { color: var(--bm-light); } .bm-deck__card--dark h3 { color: var(--bm-light); } .bm-deck__card h3 { line-height: 41px; } .bm-deck__card p { margin-top: 20px; font-size: 16px; line-height: 22px; } .bm-deck__card .bm-waves { margin-top: 20px; align-self: center; } .bm-hero__btn { margin-top: 20px; } @media (max-width: 1024px) { .bm-deck { height: auto; display: flex; flex-direction: column; gap: 20px; } .bm-deck__card { position: static; width: auto; height: auto; } } /* --- bm-vrd-intro : intro VRD en colonne flex (icône, texte, chips wrap, texte) — remplace l'ancien `.bm-sec` à position absolute. */ .bm-vrd-intro { position: relative; padding: clamp(60px, 8vw, 100px) clamp(20px, 6.6vw, 100px); display: flex; flex-direction: column; align-items: center; gap: 40px; background: var(--bm-light); text-align: center; } .bm-vrd-intro__text { width: 100%; max-width: 868px; } .bm-vrd-intro__text p { font-size: 16px; line-height: 22px; } .bm-vrd-intro__text .bm-waves { display: inline-block; margin-top: 20px; } .bm-vrd-intro > .bm-intro__amp { margin: 0; } /* --- bm-vrd-travaux : section « Découvrez l'ensemble de nos travaux » (page VRD). Layout grid pour deux sous-rangées (voirie / réseau humide) + carrousel chips défilant. */ .bm-vrd-travaux { position: relative; /* padding top/bottom retiré (demande client) — l'espacement vertical est porté par les sections adjacentes. */ padding: 0 clamp(20px, 6.6vw, 100px); display: flex; flex-direction: column; gap: clamp(60px, 7vw, 100px); background: var(--bm-light); } .bm-vrd-travaux__head { text-align: center; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 6px; } .bm-vrd-travaux__head .bm-badge-h2 { margin-top: 0; } .bm-vrd-travaux__row { display: grid; gap: clamp(20px, 3vw, 50px); align-items: center; } .bm-vrd-travaux__row--voirie { grid-template-columns: minmax(0, 60%) minmax(0, 40%); } .bm-vrd-travaux__row--humide { grid-template-columns: minmax(0, 370fr) minmax(0, 318fr) minmax(0, 424fr); } .bm-vrd-travaux__row .bm-photo { width: 100%; height: auto; } .bm-vrd-travaux__text p { margin-top: 20px; font-size: 16px; line-height: 22px; } .bm-vrd-travaux__callout { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } @media (max-width: 1024px) { .bm-vrd-travaux__row--voirie, .bm-vrd-travaux__row--humide { grid-template-columns: 1fr; justify-items: center; text-align: center; } .bm-vrd-travaux__row .bm-photo { max-width: 666px; } .bm-vrd-travaux__callout { align-items: center; } } /* --- bm-expertise : section 2 colonnes texte + pile de 3 photos ---------- Cf. Figma 6067:894 (page terrassement). Layout en grid 2 colonnes ; la pile de photos sur la colonne droite : photo 1 alignée à droite (sans rotation), photo 2 alignée à gauche (rotate -8.6°), photo 3 centrée (rotate +10.9°), chevauchements via marges négatives. */ .bm-expertise { position: relative; margin: 0 auto; padding: clamp(60px, 8vw, 100px) clamp(20px, 6.6vw, 100px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: start; } .bm-expertise__col { display: flex; flex-direction: column; gap: 40px; min-width: 0; } .bm-expertise__title { display: flex; flex-direction: column; gap: 6px; } .bm-expertise__title h2 { line-height: 60px; } .bm-expertise__title .bm-badge-h2 { margin-top: 0; } .bm-expertise__text { font-size: 16px; line-height: 22px; } /* Pile de 3 photos en positionnement absolu, échelles en % du conteneur (aspect-ratio 646/972 issu du Figma 6067:893). Position et taille de chaque photo via styles inline en pourcentages — l'assemblage se maintient identique en responsive (mêmes ratios, conteneur shrinké). */ .bm-expertise__stack { position: relative; width: 100%; aspect-ratio: 646 / 972; } .bm-expertise__stack > .bm-photo { position: absolute; margin: 0; } @media (max-width: 1024px) { .bm-expertise { grid-template-columns: 1fr; } } /* --- bm-feature : photo + carte overlay qui chevauche -------------------- Composant réutilisable (entreprise « Des moyens matériels », valeurs « Déconstruction et valorisation »). Proportions pilotées par variables : --bm-feature-photo / --bm-feature-card (sans unité, %) + --bm-feature-overlap (sans unité, %) + --bm-feature-photo-ratio. La carte chevauche la photo via marge négative. */ .bm-feature { --bm-feature-photo: 73; --bm-feature-card: 42; --bm-feature-overlap: 15; --bm-feature-photo-ratio: 957 / 924; position: relative; margin: 0 auto; padding: clamp(60px, 8vw, 100px) clamp(20px, 6.6vw, 100px); display: flex; flex-direction: row; align-items: center; justify-content: center; } /* Section « Déconstruction et valorisation » (page Valeurs & RSE) : pas de padding bas (demande client) — ciblage par aria-label pour n'affecter que cette instance de .bm-feature. */ .bm-feature[aria-label="Déconstruction et valorisation des matériaux"] { padding-bottom: 0; } .bm-feature__photo { margin: 0; width: calc(var(--bm-feature-photo) * 1%); max-height: 666px; aspect-ratio: var(--bm-feature-photo-ratio); border-radius: var(--bm-radius); overflow: hidden; position: relative; z-index: 1; } .bm-feature__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .bm-feature__card { width: calc(var(--bm-feature-card) * 1%); margin-left: calc(var(--bm-feature-overlap) * -1%); position: relative; z-index: 2; display: flex; flex-direction: column; gap: 40px; } .bm-feature__title { display: flex; flex-direction: column; gap: 6px; } .bm-feature__title h2 { color: var(--bm-primary); line-height: 60px; } .bm-feature__title .bm-badge-h2 { margin-top: 0; } .bm-feature__body { display: flex; flex-direction: column; gap: 20px; } .bm-feature__body p { font-size: 16px; line-height: 22px; } @media (max-width: 1024px) { .bm-feature { flex-direction: column; gap: clamp(40px, 6vw, 60px); } .bm-feature__photo, .bm-feature__card { width: 100%; margin: 0 auto; } } /* Carte texte sur photo (valeurs) + logo euro6 */ .bm-card-overlay { background: var(--bm-primary); color: var(--bm-light); border-radius: var(--bm-radius); padding: 40px; } .bm-card-overlay h2 { color: var(--bm-light); } .bm-img-euro6 { width: 199px; height: auto; margin-top: 0; } /* CTA sans texte : resserre l'espace bouton */ .bm-cta__text:empty { display: none; } /* --- Timeline (entreprise) -- Swiper horizontal + ligne décorative --------- Le slider tourne en boucle (`loop: true`), la ligne du dessus est rendue edge-to-edge pour donner l'impression d'être infinie ; chaque slide porte son propre dot qui scroll avec la carte. */ .bm-timeline { position: relative; margin: 0 auto; padding: clamp(60px, 8vw, 100px) 0; overflow: hidden; } /* Ligne horizontale décorative qui traverse toute la section, derrière les cartes. */ .bm-timeline__rail { position: absolute; top: calc(clamp(60px, 8vw, 100px) + 12px); left: 0; right: 0; height: 3px; background: var(--bm-primary); z-index: 1; } .bm-timeline__swiper { position: relative; z-index: 2; padding-inline: clamp(20px, 6.6vw, 100px); overflow: visible; } .bm-timeline__swiper .swiper-wrapper { display: flex; align-items: stretch; } .bm-timeline__slide { width: 424px; display: flex; height: auto; flex-direction: column; gap: 40px; } .bm-timeline__dot { width: 24px; height: 24px; border-radius: 50%; background: var(--bm-primary); margin-left: 188px; flex-shrink: 0; } .bm-timeline__card { width: 100%; height: 100%; background: var(--bm-primary); color: var(--bm-light); border-radius: var(--bm-radius); padding: 40px; display: flex; flex-direction: column; gap: 20px; } .bm-timeline__year { font-family: var(--bm-font-title); font-weight: 700; font-size: var(--bm-fs-h3); line-height: 41px; color: var(--bm-tertiary); } .bm-timeline__card h3 { color: var(--bm-light); line-height: 41px; } .bm-timeline__text { font-size: 16px; line-height: 22px; } .bm-timeline__card .bm-waves { color: var(--bm-secondary); } /* Nav : 2 boutons fléchés (gauche / droite), même skin que le stepper. */ .bm-timeline__nav { display: flex; flex-direction: row; gap: 20px; margin-top: 40px; padding-inline: clamp(20px, 6.6vw, 100px); position: relative; z-index: 2; } .bm-timeline__btn { width: 44px; height: 45px; border: 0; border-radius: 4px; background: var(--bm-secondary); color: var(--bm-primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: filter 0.2s ease; } .bm-timeline__btn:hover { filter: brightness(1.1); } .bm-timeline__btn:focus-visible { outline: 2px solid var(--bm-tertiary); outline-offset: 2px; } .bm-timeline__btn.swiper-button-disabled { opacity: 0.4; cursor: not-allowed; } .bm-timeline__btn--prev .bm-stepper__btn-circle svg { transform: rotate(-90deg); } .bm-timeline__btn--next .bm-stepper__btn-circle svg { transform: rotate(90deg); } /* --- Team / Collaborateurs (entreprise) --- Swiper fade + deck décoratif ---- Section dark avec une vague en haut (`.bm-team__vague`, même pattern que `.bm-expertises__vague`) ; le slider crossfade entre les cartes employés (CPT `bm_employee` + ACF photo/position/name), 2 cartes décoratives absolument positionnées donnent l'illusion d'un deck empilé derrière. */ .bm-team { position: relative; background: var(--bm-dark); color: var(--bm-light); padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 8vw, 100px); } .bm-team__vague { position: absolute; top: -40px; left: 0; width: 635px; max-width: 62%; height: 40px; background: url("../img/deco-vague.svg") 0 0 / 100% 100% no-repeat, var(--bm-light); z-index: 3; background-position-y: bottom; background-size: 100%; margin-bottom: -1px; } .bm-team__inner { margin: 0 auto; padding-inline: clamp(20px, 6.6vw, 100px); display: flex; flex-direction: row; gap: clamp(40px, 7vw, 100px); align-items: center; } /* Conteneur slider + stack décoratif. */ .bm-team__slider { flex: 868 1 0; position: relative; min-width: 0; aspect-ratio: 868 / 698; } .bm-team__swiper { position: relative; width: 100%; height: 100%; } .bm-team__swiper .swiper-wrapper { height: 100%; } /* Chaque slide contient 3 photos : 2 cartes décor "back" (les 2 employés suivants dans la liste, en plus petit, décalées à gauche avec rotation) + 1 carte principale à droite avec nom + rôle (Figma 6047:502). */ .bm-team__slide { position: relative; width: 100%; height: 100%; } .bm-team__back { position: absolute; border-radius: var(--bm-radius); overflow: hidden; pointer-events: none; } .bm-team__back img { width: 100%; height: 100%; object-fit: cover; display: block; } .bm-team__back--far { left: 0; top: 25%; width: 20%; aspect-ratio: 252 / 342; z-index: 1; } .bm-team__back--far::after { position: absolute; content: ""; inset: 0; width: 100%; height: 100%; background: linear-gradient( 270deg, rgba(0, 0, 0, 0.7) 49.86%, rgba(0, 0, 0, 0) 100% ); } .bm-team__back--mid { left: 0; top: -15%; transform: translate(50%, 50%); width: 35%; aspect-ratio: 285 / 388; z-index: 2; } .bm-team__back--mid::after { position: absolute; content: ""; inset: 0; width: 100%; height: 100%; background: linear-gradient( 270deg, rgba(0, 0, 0, 0.7) 49.86%, rgba(0, 0, 0, 0) 100% ); } /* Carte principale (droite) — photo + rôle + nom */ .bm-team__card { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 60%; height: 100%; border-radius: var(--bm-radius); display: flex; flex-direction: column; gap: 12px; align-items: start; box-sizing: border-box; z-index: 3; } .bm-team__photo { margin: 0; width: 100%; flex: 1 1 auto; border-radius: var(--bm-radius); overflow: hidden; min-height: 0; } .bm-team__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .bm-team__role { font-size: 16px; line-height: 22px; color: var(--bm-tertiary); margin: 0; } .bm-team__name { font-family: var(--bm-font-title); font-weight: 700; font-size: var(--bm-fs-h3); line-height: 1.28; color: var(--bm-light); margin: 0; } /* Colonne texte droite. */ .bm-team__text { flex: 313 1 0; display: flex; flex-direction: column; gap: 40px; min-width: 0; } .bm-team__title { display: flex; flex-direction: column; gap: 6px; } .bm-team__title h2 { color: var(--bm-light); line-height: 67px; } .bm-team__lead { font-size: 16px; line-height: 22px; } .bm-team__count { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; } .bm-team__count .bm-callout { color: var(--bm-light); } .bm-team__count .bm-waves { color: var(--bm-secondary); } @media (max-width: 1024px) { .bm-team__inner { flex-direction: column-reverse; gap: 60px; } .bm-team__slider, .bm-team__text { flex: 0 0 auto; width: 100%; } } /* --- Carte directeur (entreprise) ------------------------------------------- */ .bm-director .bm-photo { height: 590px; } .bm-director__role { margin-top: 20px; font-size: 16px; line-height: 19px; color: var(--bm-tertiary); } .bm-director__name { margin-top: 12px; font-family: var(--bm-font-title); font-weight: 700; font-size: var(--bm-fs-h3); line-height: 49px; color: var(--bm-light); } /* --- Hero contact + carte coordonnées --------------------------------------- */ .bm-hero--contact .bm-hero__badge { font-size: 64px; margin: 0; } /* Layout flex hero contact : titre à gauche, carte coordonnées à droite, centrés verticalement, padding identique pour les autres heros. */ .bm-hero--contact__inner { position: absolute; inset: 0; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: clamp(40px, 6vw, 100px); padding: clamp(60px, 8vw, 100px) clamp(20px, 6.6vw, 100px); z-index: 2; } .bm-hero--contact__title { display: flex; flex-direction: column; gap: 20px; color: var(--bm-light); max-width: 720px; } .bm-hero--contact__title h1 { font-family: var(--bm-font-title); font-weight: 700; font-size: clamp(40px, 6vw, 74px); line-height: 1.08; text-transform: uppercase; color: var(--bm-light); } .bm-contact-card { flex: 0 0 auto; width: min(350px, 100%); height: fit-content; background: var(--bm-dark); border-radius: var(--bm-radius); padding: 40px; color: var(--bm-light); display: flex; flex-direction: column; gap: 40px; align-items: start; justify-content: center; /* Bloc « Nous contacter » (tél + e-mail) aligné à gauche ; le bloc « Nous rencontrer » reste à droite via .self-end/.text-end sur ses éléments. */ text-align: left; } .bm-contact-card__title { font-family: var(--bm-font-title); font-weight: 700; font-size: var(--bm-fs-h3); line-height: 41px; color: var(--bm-secondary); margin: 0; } .bm-contact-card__item { font-size: 16px; line-height: 22px; margin: 0; } .bm-contact-card__sep { border: 0; height: 1px; background: var(--bm-tertiary); width: 100%; } /* --- Section contact : Google Maps + formulaire --------------------------- Grid 2 colonnes : carte iframe à gauche, conteneur formulaire (tiles home-style) à droite. Filtre CSS sur l'iframe pour approximer un thème nuit (inversion + rotation hue) sans clé API Maps. */ .bm-contact { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(40px, 6vw, 100px); padding-block: clamp(60px, 8vw, 100px); background: var(--bm-dark); color: var(--bm-light); min-height: 900px; } /* Vague décorative en haut (cf. Figma 6077:2107) : SVG dark qui déborde d'1 px vers le haut pour couvrir la seam avec la section précédente (light) — les zones transparentes du SVG laissent voir le fond clair au-dessus, ce qui crée la silhouette de vague. Même mécanique que `.bm-split__vague--top`. */ .bm-contact__vague { display: flex; align-items: end; position: absolute; top: -40px; left: 50%; width: 635px; max-width: 62%; height: 40px; z-index: 3; transform: translateX(-50%) translateY(1px); pointer-events: none; } .bm-contact__vague img { width: 100%; height: auto; display: block; object-fit: contain; } .bm-contact__map { position: relative; overflow: hidden; height: 583px; border-top-right-radius: 18px; border-bottom-right-radius: 18px; /* Cellule grid : on aligne le bloc carte en bas de la ligne pour qu'il soit à la même base visuelle que l'assemblage de tuiles (qui se cale aussi en bas via .bm-contact .bm-intro__tiles). */ align-self: end; } .bm-contact__map-iframe { display: block; width: 100%; height: 100%; min-height: 600px; filter: invert(0.92) hue-rotate(180deg) saturate(0.6) brightness(0.95); } .bm-intro--contact { background: var(--bm-dark); min-height: 900px; } .bm-intro--contact .bm-intro__col h2 { color: var(--bm-light); } /* La colonne form prend toute la largeur de sa cellule grid (.bm-intro__col--form est plafonné à 428px en variante home, on lève la contrainte en contact). */ .bm-intro--contact .bm-intro__col--form { max-width: none; } @media (max-width: 1024px) { .bm-contact { grid-template-columns: 1fr; } .bm-contact__map-iframe { min-height: 320px; } } /* Liste expertises en variante claire (contact) */ .bm-expertises__list--light a { color: var(--bm-dark); border-bottom-color: var(--bm-dark); } .bm-expertises__list--light a:hover { color: var(--bm-secondary); } @media (max-width: 1024px) { .bm-timeline__slide { width: 280px; } .bm-timeline__dot { margin-inline: auto; } .bm-hero--contact__inner { position: relative; inset: auto; flex-direction: column; align-items: stretch; padding-block: 40px; } .bm-contact-card { width: 100%; align-items: flex-start; text-align: left; } } .bm-form-required { font-size: 16px; line-height: 22px; } /* Sections formulaire : hauteur mini maquette, l'item central est en flux (exception WPForms : le formulaire réel est plus haut que le gabarit Figma ; le bouton Envoyer doit rester visible) */ .bm-sec--flow { overflow: hidden; height: auto; min-height: var(--h); } .bm-sec--flow > .bm-sec__item:not(.bm-photo):not(.bm-intro__tiles) { position: relative; left: auto; margin: 100px auto; } .bm-sec--flow .bm-form-host .wpforms-field { margin-bottom: 12px; } .bm-sec--flow .bm-form-host .wpforms-field-label { margin-bottom: 6px; } .bm-sec--flow .bm-form-host input[type="text"], .bm-sec--flow .bm-form-host input[type="tel"], .bm-sec--flow .bm-form-host input[type="email"], .bm-sec--flow .bm-form-host input[type="date"] { padding: 8px 12px; } .bm-sec--flow .bm-form-host textarea { min-height: 90px; } @media (max-width: 1024px) { .bm-sec--flow { height: auto; min-height: 0; padding-bottom: 60px; } } /* --- Correctifs a11y / cascade ------------------------------------------- */ /* .bm-sec p (16px) écrasait le callout : rappel de taille (et large-text => contraste 3:1 OK) */ .bm-sec .bm-callout, .bm-callout { font-size: var(--bm-fs-h3); line-height: 41px; } /* Labels WPForms sur section sombre : lisibilité garantie quel que soit l'ordre de cascade */ .bm-form-host--dark .wpforms-field-label, .bm-form-host--dark label, .bm-form-host--dark .wpforms-field-sublabel { color: var(--bm-light) !important; } /* Cartes publics (home) : h2 pour l'ordre des titres, rendu identique au h3 32px */ .bm-card-public h2 { color: var(--bm-light); font-size: var(--bm-fs-h3); line-height: 41px; } .just-self-end { justify-self: end; } /* --- Page 404 --------------------------------------------------------- Layout centré plein écran (header/footer compensés via min-height), badge code 404, h1 thématique avec span .bm-badge-h2--inline (« en chantier »), bouton retour accueil. */ .bm-404 { position: relative; min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: clamp(60px, 8vw, 100px) clamp(20px, 6.6vw, 100px); background: var(--bm-light); } .bm-404__inner { max-width: 820px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 32px; } .bm-404__code { font-family: var(--bm-font-title); font-weight: 700; font-size: clamp(88px, 12vw, 168px); line-height: 1; letter-spacing: 0.04em; color: var(--bm-secondary); margin: 0; } .bm-404 h1 { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--bm-primary); } .bm-404__text { font-size: 20px; line-height: 30px; color: var(--bm-dark); max-width: 620px; margin: 0; } .bm-404__btn { margin-top: 24px; } /* --- Page Mentions légales ------------------------------------------- Hero sombre avec h1 + badge, contenu généré par le shortcode `[netdev_mentions_legales]` (plugin maison) restylé pour matcher la typo et la palette. */ .bm-legal { background: var(--bm-light); } .bm-legal__hero { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: clamp(80px, 12vw, 160px) clamp(20px, 6.6vw, 100px) clamp(40px, 6vw, 60px); background: var(--bm-dark); color: var(--bm-light); } .bm-legal__hero h1 { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--bm-light); } .bm-legal__badge { font-family: var(--bm-font-title); font-weight: 700; font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bm-secondary); margin: 0; } .bm-legal__content { max-width: 868px; margin-inline: auto; padding: clamp(60px, 8vw, 100px) clamp(20px, 6.6vw, 100px); } /* Sortie HTML du shortcode netdev_mentions_legales : on restyle ses h2 en titres bleu primary (typo Antonio), ses paragraphes en 16/22, et les liens en bleu secondary avec underline. */ .netdev-mentions-legales { display: flex; flex-direction: column; gap: 32px; font-size: 16px; line-height: 22px; color: var(--bm-dark); } .netdev-mentions-legales h2 { font-family: var(--bm-font-title); font-weight: 700; font-size: var(--bm-fs-h3); line-height: 41px; color: var(--bm-primary); margin: 0; } .netdev-mentions-legales h2 + p { margin-top: -12px; } .netdev-mentions-legales p { margin: 0; } .netdev-mentions-legales p + p { margin-top: 12px; } .netdev-mentions-legales a { color: var(--bm-secondary); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; } .netdev-mentions-legales a:hover { color: var(--bm-primary); } .netdev-mentions-legales strong { font-weight: 600; color: var(--bm-primary); }
- (dont les