/*
---
REGLES GENERALES
---
*/

:root
{
--color1: #a81d22;
--color2: #e4575d;
--color3: #211517;
--color4: #1c1416;
--color5: #faf8f6;
--color6: #f1ebe7;
--color7: #211b1c;
--color8: #6d6162;
--color9: #453c3d;
--color10: #a39697;
--color11: #ddd3ce;
--color12: #7c1216;
--color13: #8c1418;
--color14: #f3c7c9;
--color15: #c9b4b5;
--color16: #b98a8c;
--font1: 'Barlow', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
--font2: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
}

/* Polices locales (Permanent Marker de la maquette remplacée par Barlow Condensed) */
@font-face
{
font-family: 'Barlow';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/Barlow-Regular.ttf') format('truetype');
}
@font-face
{
font-family: 'Barlow';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/Barlow-Medium.ttf') format('truetype');
}
@font-face
{
font-family: 'Barlow';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/Barlow-SemiBold.ttf') format('truetype');
}
@font-face
{
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/BarlowCondensed-Medium.ttf') format('truetype');
}
@font-face
{
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/BarlowCondensed-SemiBold.ttf') format('truetype');
}
@font-face
{
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/BarlowCondensed-Bold.ttf') format('truetype');
}

html
{
scroll-behavior: smooth;
}

body
{
margin: 0;
background: var(--color5);
color: var(--color7);
font-family: var(--font1);
-webkit-font-smoothing: antialiased;
}

img
{
max-width: 100%;
}

a
{
color: #f50202;
text-decoration: none;
}

a:hover
{
color: var(--color12);
}

::selection
{
background: var(--color1);
color: #fff;
}

.faux_gras{font-weight: bold;}
.faux_br{display: block}

h1, h2, h3, h4, .h2
{
margin: 0 0 .4em;
font-family: var(--font2);
font-weight: 700;
line-height: 1.02;
color: var(--color7);
text-transform: uppercase;
}

/* Texte courant — style global, pas de classe par paragraphe (référence : intro page Transports) */
p
{
margin: 0 0 1.2em;
font-family: var(--font1);
font-size: 16.5px;
line-height: 1.7;
color: var(--color8);
}

/* Listes à puces — style global réutilisable (puce ✓ couleur principale). Ne cible que les <ul> de contenu sans classe : les menus (navbar-nav, list-unstyled…) portent une classe et sont exclus. */
ul:not([class])
{
margin: 0 0 1.2em;
padding: 0;
list-style: none;
}
ul:not([class]) li
{
position: relative;
margin-bottom: 16px;
padding-left: 30px;
font-family: var(--font1);
font-size: 16px;
line-height: 1.55;
color: var(--color9);
}
ul:not([class]) li:last-child
{
margin-bottom: 0;
}
ul:not([class]) li::before
{
content: "✓";
position: absolute;
top: 0;
left: 0;
font-family: var(--font2);
font-size: 20px;
font-weight: 700;
line-height: 1;
color: var(--color1);
}
ul:not([class]) li strong
{
font-weight: 600;
color: var(--color9);
}

/* Masquage visuel accessible (titre lu par les lecteurs d'écran / indexé, invisible à l'écran) */
.visually_hidden
{
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
}

/*
Boutons
*/
.btn_std
{
display: inline-flex;
align-items: center;
gap: 12px;
padding: 15px 28px;
border: none;
border-radius: 3px;
background: var(--color1);
color: #fff;
font-family: var(--font2);
font-size: 20px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 10px 30px rgba(120, 10, 14, .35);
transition: background .2s ease, transform .2s ease;
}
.btn_std:hover
{
background: var(--color13);
color: #fff;
transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce)
{
	.btn_std
	{
	transition: none;
	}
	.btn_std:hover
	{
	transform: none;
	}
}

/*
Header / Navigation (skill menu-principal adaptée à la maquette)
*/
.main-nav,
.main-nav-clone
{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
}
.main-nav
{
background: transparent;
}
.main-nav-clone
{
z-index: 1000;
background: rgba(250, 248, 246, .96);
box-shadow: 0 6px 24px rgba(33, 20, 21, .10);
opacity: 0;
visibility: hidden;
transform: translateY(-12px);
transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
pointer-events: none;
}
.main-nav-clone.is-visible
{
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}

.main-nav .navbar,
.main-nav-clone .navbar
{
padding: 0;
}
.main_nav__container
{
display: flex;
align-items: center;
justify-content: flex-start;
gap: 28px;
width: 100%;
max-width: 1920px;
margin: 0 auto;
padding: 14px 4vw;
transition: padding .35s ease;
}
.main-nav-clone .main_nav__container
{
padding-top: 10px;
padding-bottom: 10px;
}

.main_nav__logo
{
position: relative;
display: block;
flex: 0 0 auto;
width: 210px;
height: 51px;
margin-right: auto;
padding: 0;
}

@media screen and (min-width: 992px) and (max-width: 1059px)
{
	.main_nav__logo
	{
	width: 150px;
	}
}

@media screen and (min-width: 1400px)
{
	.main_nav__logo
	{
	width: 270px;
	}
}

.main_nav__logo_img
{
position: absolute;
inset: 0;
width: 210px;
height: 51px;
object-fit: contain;
transition: opacity .35s ease;
}

@media screen and (min-width: 992px) and (max-width: 1059px)
{
	.main_nav__logo_img
	{
	width: 150px;
	}
}

@media screen and (min-width: 1400px)
{
	.main_nav__logo_img
	{
	width: 270px;
	}
}

.main-nav .main_nav__logo_img--white,
.main-nav-clone .main_nav__logo_img--color
{
opacity: 1;
}
.main-nav .main_nav__logo_img--color,
.main-nav-clone .main_nav__logo_img--white
{
opacity: 0;
}

.main_nav__collapse
{
flex-grow: 0;
flex-basis: auto;
}
.main_nav__menu
{
gap: 24px;
margin: 0;
padding: 0;
font-family: var(--font2);
}
.main_nav__menu .nav-item
{
margin: 0;
}
.main_nav__menu .nav-link
{
position: relative;
padding: 6px 0;
color: rgba(255, 255, 255, .92);
font-size: 16.5px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
transition: color .35s ease;
}
.main-nav-clone .main_nav__menu .nav-link
{
color: var(--color7);
}
.main_nav__menu .nav-link::before
{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-bottom: 2px solid var(--color1);
transform: scaleX(0);
transform-origin: left;
transition: transform .4s ease;
}
.main_nav__menu .nav-link:hover,
.main_nav__menu .nav-link.active
{
color: var(--color2);
}
.main_nav__menu .nav-link:hover::before,
.main_nav__menu .nav-link.active::before
{
transform: scaleX(1);
}

.main_nav__menu .dropdown-menu
{
margin: 0;
padding: 8px 0;
border: none;
border-radius: 0;
background: #fff;
box-shadow: 0 10px 30px rgba(33, 20, 21, .12);
}
.main_nav__menu .dropdown-item
{
padding: 8px 20px;
font-family: var(--font2);
font-size: 15px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--color7);
}
.main_nav__menu .dropdown-item:hover,
.main_nav__menu .dropdown-item.active
{
background: transparent;
color: var(--color1);
}
@media screen and (min-width: 992px)
{
	.main_nav__menu .dropdown .dropdown-menu
	{
	display: block;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
	}
	.main_nav__menu .dropdown:hover .dropdown-menu
	{
	opacity: 1;
	visibility: visible;
	}
}

.main_nav__controls
{
display: flex;
align-items: center;
gap: 16px;
flex: 0 0 auto;
}
.main_nav__phone
{
display: inline-flex;
align-items: center;
gap: 10px;
padding: 11px 20px;
border-radius: 3px;
background: var(--color1);
box-shadow: 0 6px 18px rgba(120, 10, 14, .35);
color: #fff;
font-family: var(--font2);
font-size: 19px;
font-weight: 700;
letter-spacing: 1px;
transition: background .2s ease;
}
.main_nav__phone:hover
{
background: var(--color13);
color: #fff;
}
.main_nav__controls .main_nav__phone
{
display: none;
}
@media screen and (min-width: 992px)
{
	.main_nav__controls .main_nav__phone
	{
	display: inline-flex;
	}
}

@media screen and (max-width: 1249px)
{
	.main_nav__controls .main_nav__phone
	{
	display: none;
	}
}

.main_nav__phone_dot
{
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
}
@media (prefers-reduced-motion: no-preference)
{
	.main_nav__phone_dot
	{
	animation: evi_bounce 1.6s ease-in-out infinite;
	}
}
@keyframes evi_bounce
{
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-1.5px); }
}

.main_nav__burger
{
display: inline-flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
padding: 10px;
background: transparent;
border: 0;
cursor: pointer;
}
.main_nav__burger span
{
display: block;
width: 100%;
height: 2px;
background: #fff;
transition: background .35s ease;
}
.main-nav-clone .main_nav__burger span
{
background: var(--color7);
}

/* Offcanvas (menu mobile) — fond blanc */
.main_offcanvas
{
width: min(360px, 86vw);
background: #fff;
color: var(--color8);
overflow-y: auto;
}
.main_offcanvas__header
{
padding: 18px 24px;
margin-bottom: 8px;
border-bottom: 1px solid var(--color11);
}
.main_offcanvas__header img
{
width: 88px;
height: auto;
}
/* Croix Bootstrap laissée dans sa couleur d'origine (sombre) : lisible sur fond blanc. */
.main_offcanvas .btn-close
{
opacity: .8;
transition: transform .4s ease;
}
.main_offcanvas .btn-close:hover
{
opacity: 1;
transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce)
{
	.main_offcanvas .btn-close
	{
	transition: none;
	}
	.main_offcanvas .btn-close:hover
	{
	transform: none;
	}
}
.main_offcanvas__body
{
padding: 0 0 30px;
}
.main_offcanvas__menu
{
margin: 0;
padding: 0;
}
.main_offcanvas__menu .nav-link
{
display: block;
padding: 14px 24px;
border-bottom: 1px solid var(--color11);
color: var(--color7);
font-family: var(--font2);
font-size: 18px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.main_offcanvas__menu .nav-link:hover
{
color: var(--color12);
}
.main_offcanvas__menu .nav-link.active
{
color: var(--color1);
}
.main_offcanvas__menu .nav-link span
{
display: inline-flex;
transform: rotate(180deg);
transition: transform .3s ease;
}
.main_offcanvas__menu .nav-link.collapsed span
{
transform: rotate(0deg);
}
.main_offcanvas__menu .collapse .nav-link
{
font-size: 16px;
text-transform: none;
}
.main_offcanvas__phone
{
display: inline-flex;
margin: 24px 24px 0;
}

/*
Bandeau hero interne
*/
.banner_interne
{
position: relative;
display: flex;
align-items: flex-end;
overflow: hidden;
min-height: 56vh;
max-width: 1920px;
margin-left: auto;
margin-right: auto;
background: var(--color4);
}
.banner_interne__img
{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 58%;
}
.banner_interne__overlay
{
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(23, 13, 14, .55) 0%, rgba(23, 13, 14, .25) 45%, rgba(23, 13, 14, .82) 100%);
}
.banner_interne__content
{
position: relative;
max-width: 900px;
padding: 150px 4vw 56px;
}
.banner_interne__breadcrumb
{
margin: 0 0 14px;
color: var(--color14);
font-family: var(--font2);
font-size: 17px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
}
.banner_interne__breadcrumb a
{
color: var(--color14);
}
.banner_interne__breadcrumb a:hover
{
color: #fff;
}
.banner_interne__title
{
margin: 0 0 18px;
font-family: var(--font2);
font-weight: 700;
font-size: clamp(40px, 5.4vw, 72px);
line-height: 1;
color: #fff;
text-transform: uppercase;
text-wrap: pretty;
text-shadow: 0 0 10px #3f3f3f;
}
.banner_interne__title .titre_part2
{
color: var(--color2);
}
.banner_interne__subtitle
{
margin: 0;
max-width: 560px;
color: rgba(255, 255, 255, .85);
font-size: 17.5px;
line-height: 1.6;
text-wrap: pretty;
}

/*
Footer
*/
.site_footer
{
padding: 70px 0 36px;
background: var(--color3);
color: rgba(255, 255, 255, .75);
}
.site_footer__logo
{
display: inline-block;
margin-bottom: 16px;
}
.site_footer__logo img
{
width: 230px;
height: auto;
}
.site_footer__desc p
{
margin: 0;
color: rgba(255, 255, 255, .75);
font-size: 14.5px;
line-height: 1.7;
text-wrap: pretty;
}
.site_footer__title
{
margin-bottom: 16px;
font-family: var(--font2);
font-size: 15px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
color: #fff;
}
.site_footer__address
{
margin: 0 0 8px;
font-style: normal;
font-size: 14.5px;
line-height: 1.7;
}
.site_footer__phone
{
margin: 0;
font-size: 14.5px;
}
.site_footer__phone a
{
color: var(--color2);
}
.site_footer__phone a:hover
{
color: #fff;
}
.site_footer__menu
{
display: flex;
flex-direction: column;
gap: 9px;
margin: 0;
padding: 0;
font-size: 14.5px;
}
.site_footer__menu a
{
color: rgba(255, 255, 255, .75);
}
.site_footer__menu a:hover,
.site_footer__menu .current-menu-item > a
{
color: #fff;
}
.site_footer__zones
{
margin: 0;
font-size: 14.5px;
line-height: 1.7;
text-wrap: pretty;
}
.site_footer__bottom
{
margin-top: 50px;
}
.site_footer__bottom_inner
{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 12px;
padding-top: 22px;
border-top: 1px solid rgba(255, 255, 255, .12);
}
.site_footer__copy,
.site_footer__legal
{
margin: 0;
font-size: 13px;
color: rgba(255, 255, 255, .45);
}
.site_footer__legal a
{
color: rgba(255, 255, 255, .45);
}
.site_footer__legal a:hover
{
color: #fff;
}
.site_footer__agency
{
margin: 12px 0 0;
font-size: 13px;
color: rgba(255, 255, 255, .45);
}
.site_footer__agency a
{
color: rgba(255, 255, 255, .45);
}
.site_footer__agency a:hover
{
color: #fff;
}

/*
Bande prestations (chapô + grille de cartes numérotées)
*/
.bande_prestations
{
padding: 100px 0 60px;
}
.bande_prestations__head
{
margin-bottom: 48px;
}
.bande_prestations__eyebrow
{
margin: 0 0 10px;
font-family: var(--font2);
font-size: 17px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--color1);
}
.bande_prestations__title
{
margin: 0 0 18px;
font-size: clamp(32px, 3.6vw, 48px);
}
.bande_prestations__lead
{
margin: 0;
text-wrap: pretty;
}
.bande_prestations__card
{
background: #fff;
border-top: 4px solid var(--color1);
padding: 32px 28px 34px;
box-shadow: 0 14px 40px rgba(33, 20, 21, .08);
transition: box-shadow .25s ease;
}
.bande_prestations__card:hover
{
box-shadow: 0 20px 50px rgba(33, 20, 21, .18);
}
.bande_prestations__num
{
margin: 0 0 16px;
font-family: var(--font2);
font-size: 18px;
font-weight: 700;
letter-spacing: 1px;
color: var(--color15);
}
.bande_prestations__card_title
{
margin: 0 0 12px;
font-size: 25px;
}
.bande_prestations__card_text
{
margin: 0;
font-size: 15px;
line-height: 1.65;
text-wrap: pretty;
}

/*
Bande prestations 2 (fork de « bande prestations »)
Variante : le titre est un h2 (le h1 est ailleurs dans la page), le chapô est en colonne
à droite du titre, et chaque carte se termine par un lien vers la page du service.
*/
/*.bande_prestations2
{
padding: 110px 0 0;
}*/
.bande_prestations2__head
{
margin-bottom: 54px;
}
.bande_prestations2__eyebrow
{
margin: 0 0 10px;
font-family: var(--font2);
font-size: 17px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--color1);
}
.bande_prestations2__title
{
margin: 0;
font-size: clamp(34px, 4vw, 52px);
}
.bande_prestations2__lead
{
margin: 0;
text-wrap: pretty;
}
.bande_prestations2__card
{
display: flex;
flex-direction: column;
background: #fff;
border-top: 4px solid var(--color1);
padding: 36px 32px 40px;
box-shadow: 0 14px 40px rgba(33, 20, 21, .08);
transition: box-shadow .25s ease;
}
.bande_prestations2__card:hover
{
box-shadow: 0 24px 54px rgba(33, 20, 21, .18);
}
.bande_prestations2__num
{
margin: 0 0 18px;
font-family: var(--font2);
font-size: 18px;
font-weight: 700;
letter-spacing: 1px;
color: var(--color15);
}
.bande_prestations2__card_title
{
margin: 0 0 14px;
font-size: 27px;
}
/* Le texte occupe l'espace restant : les liens s'alignent en bas des cartes d'une même ligne. */
.bande_prestations2__card_text
{
flex: 1 0 auto;
margin: 0 0 20px;
font-size: 15px;
line-height: 1.65;
text-wrap: pretty;
}
.bande_prestations2__link
{
font-family: var(--font2);
font-size: 15px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--color1);
}
.bande_prestations2__link::after
{
content: " →";
}
.bande_prestations2__link:hover
{
text-decoration: underline;
}

/*
Bande moyens (texte + liste + image légendée)
*/
.bande_moyens
{
padding-bottom: 70px;
}
.bande_moyens__eyebrow
{
margin: 0 0 10px;
font-family: var(--font2);
font-size: 17px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--color1);
}
.bande_moyens__title
{
margin: 0 0 22px;
font-size: clamp(32px, 3.6vw, 48px);
}
/* Éléments optionnels : le visuel accueille une pastille débordant de l'image
   (l'image légendée garde son overflow hidden, la pastille est donc posée à côté). */
.bande_moyens__visuel
{
position: relative;
}
.bande_moyens__pastille
{
position: absolute;
right: -8px;
bottom: -18px;
margin: 0;
padding: 12px 22px;
border-radius: 3px;
background: var(--color1);
box-shadow: 0 12px 28px rgba(120, 10, 14, .4);
font-family: var(--font2);
font-size: 19px;
color: #fff;
}
.bande_moyens__lien
{
display: inline-block;
border-bottom: 2px solid var(--color1);
padding-bottom: 4px;
font-family: var(--font2);
font-size: 19px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--color1);
}
.bande_moyens__lien::after
{
content: " →";
}
.bande_moyens__lien:hover
{
border-color: var(--color12);
color: var(--color12);
}

/*
Image légendée (photo cadrée + légende sur dégradé) — réutilisable.
Le <figure> vit dans une colonne Bootstrap (et n'est pas la colonne lui-même) :
image et légende font ainsi exactement la largeur de contenu de la colonne,
et le dégradé de la légende ne déborde pas.
*/
.image_legende
{
position: relative;
margin: 0;
overflow: hidden;
border-radius: 4px;
}
.image_legende__img
{
display: block;
width: 100%;
height: 320px;
object-fit: cover;
}
@media screen and (min-width: 768px)
{
	.image_legende__img
	{
	height: 420px;
	}
}
@media screen and (min-width: 992px)
{
	.image_legende__img
	{
	height: 480px;
	}
}
.image_legende__caption
{
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 40px 18px 14px;
background: linear-gradient(transparent, rgba(23, 13, 14, .85));
color: #fff;
font-family: var(--font2);
font-size: 16px;
letter-spacing: 1.5px;
text-transform: uppercase;
}

/*
Bande installations (texte + chiffres clés + image légendée)
*/
.bande_installations
{
padding-bottom: 80px;
}
.bande_installations__eyebrow
{
margin: 0 0 10px;
font-family: var(--font2);
font-size: 17px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--color1);
}
.bande_installations__title
{
margin: 0 0 22px;
font-size: clamp(32px, 3.6vw, 48px);
}
.bande_installations__stat
{
border-left: 2px solid rgba(168, 29, 34, .45);
padding-left: 18px;
}
.bande_installations__chiffre
{
margin: 0;
font-family: var(--font2);
font-weight: 700;
font-size: 34px;
line-height: 1;
color: var(--color7);
}
@media screen and (min-width: 768px)
{
	.bande_installations__chiffre
	{
	font-size: 42px;
	}
}
.bande_installations__label
{
margin: 8px 0 0;
font-family: var(--font2);
font-size: 15px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--color8);
}

/*
Bande zone d'intervention (fond sombre + pastilles)
*/
.bande_zone_intervention
{
position: relative;
max-width: 1920px;
margin: 0 auto;
padding: 90px 0;
overflow: hidden;
background: var(--color3);
}
.bande_zone_intervention__map
{
position: absolute;
right: -4%;
top: 50%;
transform: translateY(-50%);
opacity: .14;
filter: brightness(1.6);
pointer-events: none;
}

@media screen and (min-width: 767px)
{
	.bande_zone_intervention__map
	{
	width: min(58vw, 820px);
	}
}

.bande_zone_intervention__inner
{
position: relative;
}
.bande_zone_intervention__eyebrow
{
margin: 0 0 10px;
font-family: var(--font2);
font-size: 17px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--color2);
}
.bande_zone_intervention__title
{
margin: 0 0 34px;
font-size: clamp(32px, 3.6vw, 48px);
color: #fff;
}
.bande_zone_intervention__zones
{
display: flex;
flex-wrap: wrap;
gap: 12px;
max-width: 720px;
}
.bande_zone_intervention__zone
{
padding: 9px 18px;
border: 1px solid rgba(255, 255, 255, .3);
border-radius: 30px;
font-family: var(--font2);
font-size: 16px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255, 255, 255, .9);
}
.bande_zone_intervention__zone--highlight
{
border-color: var(--color1);
background: var(--color1);
color: #fff;
}

/*
Bande CTA (appel à l'action, fond rouge)
*/
.bande_cta
{
max-width: 1920px;
margin: 0 auto;
padding: 80px 0;
background: var(--color1);
}
/* Surtitre optionnel (ligne manuscrite de la maquette, rendue en Barlow Condensed, sans inclinaison) */
.bande_cta__eyebrow
{
margin: 0 0 12px;
font-family: var(--font2);
font-size: 21px;
letter-spacing: 1px;
color: rgba(255, 255, 255, .85);
}
.bande_cta__title
{
margin: 0 0 12px;
font-size: clamp(32px, 3.8vw, 50px);
line-height: 1;
color: #fff;
}
.bande_cta__text
{
margin: 0;
color: rgba(255, 255, 255, .85);
font-size: 17px;
line-height: 1.6;
}
.bande_cta__text a
{
color: #fff;
text-decoration: underline;
}
.bande_cta__text a:hover
{
color: var(--color14);
}
.bande_cta__phone
{
display: inline-flex;
flex-direction: column;
gap: 4px;
padding: 24px 38px;
border-radius: 4px;
background: #fff;
color: var(--color1);
box-shadow: 0 18px 50px rgba(60, 5, 8, .4);
transition: transform .2s ease;
}
.bande_cta__phone:hover
{
transform: translateY(-4px);
color: var(--color12);
}
.bande_cta__phone_label
{
font-family: var(--font2);
font-size: 15px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--color16);
}
.bande_cta__phone_number
{
font-family: var(--font2);
font-size: 38px;
font-weight: 700;
line-height: 1;
}

/*
Bande historique — intro parcours (chapô)
*/
.bande_historique_intro
{
padding: 100px 0 10px;
}
.bande_historique_intro__eyebrow
{
margin: 0 0 10px;
font-family: var(--font2);
font-size: 17px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--color1);
}
.bande_historique_intro__title
{
margin: 0 0 18px;
font-size: clamp(32px, 3.6vw, 48px);
}
.bande_historique_intro__text
{
text-wrap: pretty;
}

/*
Bande frise chronologique (dates + fil + étapes) — réutilisable
*/
.bande_timeline
{
position: relative;
max-width: 1920px;
margin: 0 auto;
padding: 40px 0 80px;
overflow: hidden;
}
.bande_timeline__deco
{
position: absolute;
top: 60px;
right: -14%;
width: min(56vw, 760px);
opacity: .05;
pointer-events: none;
}
.bande_timeline__item
{
padding-bottom: 44px;
}
.bande_timeline__item--last
{
padding-bottom: 0;
}
.bande_timeline__date_col
{
padding-right: 16px;
text-align: right;
}
.bande_timeline__date
{
margin: 0;
font-family: var(--font2);
font-weight: 700;
font-size: clamp(28px, 5vw, 40px);
line-height: 1;
color: var(--color1);
}
.bande_timeline__track
{
display: flex;
flex-direction: column;
align-items: center;
width: 28px;
}
.bande_timeline__dot
{
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--color1);
box-shadow: 0 0 0 4px rgba(168, 29, 34, .18);
}
.bande_timeline__item--last .bande_timeline__dot
{
background: var(--color3);
box-shadow: 0 0 0 4px rgba(33, 21, 23, .15);
}
.bande_timeline__line
{
flex: 1;
width: 2px;
background: var(--color11);
}
.bande_timeline__item:first-child .bande_timeline__line
{
background: linear-gradient(var(--color1), var(--color11));
}
.bande_timeline__content
{
padding-left: 20px;
padding-top: 2px;
}
.bande_timeline__title
{
margin: 0 0 10px;
font-size: 26px;
}
.bande_timeline__text
{
max-width: 560px;
color: var(--color8);
text-wrap: pretty;
}

/*
Galerie photos pleine largeur (grille 4 colonnes, lightbox)
*/
.bande_galerie
{
max-width: 1920px;
margin: 0 auto;
}
.bande_galerie__cell
{
overflow: hidden;
}
.bande_galerie__link
{
display: block;
}
.bande_galerie__img
{
display: block;
width: 100%;
/*height: clamp(150px, 17vw, 280px);*/
object-fit: cover;
transition: transform .4s ease;
}
.bande_galerie__link:hover .bande_galerie__img
{
transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce)
{
	.bande_galerie__img
	{
	transition: none;
	}
	.bande_galerie__link:hover .bande_galerie__img
	{
	transform: none;
	}
}

/*
Bande CTA finale (fond sombre, citation + bouton lien) — réutilisable
*/
.bande_cta_final
{
max-width: 1920px;
margin: 0 auto;
padding: 90px 4vw;
background: #2a1b1e;
}
.bande_cta_final__inner
{
text-align: center;
}
.bande_cta_final__title
{
margin: 0 0 18px;
font-family: var(--font1);
font-size: clamp(22px, 3vw, 30px);
font-style: italic;
font-weight: 500;
line-height: 1.3;
text-transform: none;
color: var(--color2);
}
.bande_cta_final__text
{
margin: 0 0 34px;
text-wrap: pretty;
}
.bande_cta_final__text p
{
color: rgba(255, 255, 255, .8);
}
.bande_cta_final__text p:last-child
{
margin-bottom: 0;
}
.bande_cta_final__btn
{
display: inline-flex;
align-items: center;
gap: 12px;
padding: 15px 28px;
border-radius: 3px;
background: var(--color1);
color: #fff;
font-family: var(--font2);
font-size: 20px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
box-shadow: 0 10px 30px rgba(120, 10, 14, .45);
transition: background .2s ease, transform .2s ease;
}
.bande_cta_final__btn::after
{
content: "→";
font-size: 20px;
}
.bande_cta_final__btn:hover
{
background: var(--color13);
color: #fff;
transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce)
{
	.bande_cta_final__btn
	{
	transition: none;
	}
	.bande_cta_final__btn:hover
	{
	transform: none;
	}
}

/*
Bande hero (diaporama Swiper plein écran)
Le ratio de la bande est constant : l'image est recadrée côté serveur par kama au même
ratio, donc elle reste visible en entier quelle que soit la largeur. En dessous de 768px,
hauteur fixe : l'image est alors rognée par le cadre.
Les tailles de texte sont en vw (clamp) pour rester proportionnées à la hauteur du cadre.
*/
.bande_hero
{
max-width: 1920px;
margin: 0 auto;
}
.bande_hero__slider
{
position: relative;
height: 650px;
background: var(--color4);
}
@media screen and (min-width: 576px)
{
	.bande_hero__slider
	{
	height: 550px;
	}
}
@media screen and (min-width: 768px)
{
	.bande_hero__slider
	{
	height: 600px;
	}
}
/* À partir de 992px, ratio du format d'image retenu (1920x830) : l'image reste visible en entier */
@media screen and (min-width: 992px)
{
	.bande_hero__slider
	{
	height: auto;
	aspect-ratio: 1920 / 830;
	}
}
.bande_hero__slide
{
position: relative;
display: flex;
align-items: center;
overflow: hidden;
}
.bande_hero__img
{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

.bande_hero__img.center-center{object-position: center center;}
.bande_hero__img.right-center{object-position: right center;}

.bande_hero__overlay
{
position: absolute;
inset: 0;
background: linear-gradient(100deg, rgba(23, 13, 14, .88) 0%, rgba(23, 13, 14, .62) 42%, rgba(23, 13, 14, .15) 75%, rgba(23, 13, 14, .35) 100%);
}
/* Contenu aligné près du bord gauche du viewport (4vw, comme le logo du header),
   pas dans un container centré : c'est la disposition de la maquette. */
.bande_hero__container
{
position: relative;
z-index: 2;
width: 100%;
max-width: 1920px;
margin: 0 auto;
padding: 90px 4vw 80px;
}
@media screen and (min-width: 992px)
{
	.bande_hero__container
	{
	padding-top: 70px;
	padding-bottom: 40px;
	}
}
.bande_hero__content
{
max-width: 780px;
}
.bande_hero__eyebrow
{
display: flex;
align-items: center;
gap: 14px;
margin: 0 0 clamp(10px, 1.4vw, 22px);
font-family: var(--font2);
font-size: clamp(13px, 1.25vw, 18px);
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--color14);
}
.bande_hero__eyebrow::before
{
content: "";
flex: 0 0 auto;
width: clamp(38px, 5vw, 76px);
height: 2px;
background: var(--color1);
}
.bande_hero__title
{
margin: 0 0 clamp(12px, 1.6vw, 24px);
font-family: var(--font2);
font-size: clamp(30px, 4vw, 84px);
font-weight: 700;
line-height: .98;
text-transform: uppercase;
text-wrap: pretty;
color: #fff;
}
/* La partie colorée du titre reste sur une seule ligne */
.bande_hero__title .titre_part2
{
color: var(--color2);
}
.bande_hero__text
{
max-width: 540px;
margin: 0 0 clamp(18px, 2.4vw, 38px);
text-wrap: pretty;
}
.bande_hero__text p
{
margin: 0;
font-size: clamp(14px, 1.25vw, 18px);
line-height: 1.6;
color: rgba(255, 255, 255, .82);
}
.bande_hero__buttons
{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(10px, 1.1vw, 16px);
}
.bande_hero__buttons .btn_std
{
padding: clamp(10px, 1.1vw, 16px) clamp(16px, 2vw, 30px);
font-size: clamp(15px, 1.65vw, 24px);
}
/* Variante contour, scopée à la bande (2e lien de la diapositive) */
.bande_hero .btn_std.bande_hero__btn_ghost
{
border: 1px solid rgba(255, 255, 255, .45);
background: transparent;
box-shadow: none;
}
.bande_hero .btn_std.bande_hero__btn_ghost:hover
{
border-color: #fff;
background: rgba(255, 255, 255, .08);
}

/* Flèches de défilement : en bas à droite, hors du texte, sur fond rouge + ombre
   pour rester visibles sur une image claire */
.bande_hero__nav
{
position: absolute;
right: 4vw;
bottom: 24px;
z-index: 3;
display: flex;
gap: 10px;
}
.bande_hero__nav .bande_hero__arrow
{
position: static;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border: none;
border-radius: 3px;
background: var(--color1);
color: #fff;
box-shadow: 0 10px 26px rgba(23, 13, 14, .55);
cursor: pointer;
transition: background .2s ease, transform .2s ease;
--swiper-navigation-size: 15px;
}
/* Swiper injecte un <svg> en width/height 100% : on lui rend sa taille propre
   pour que le chevron ne remplisse pas tout le bouton. */
.bande_hero__nav .bande_hero__arrow svg
{
width: auto;
height: 18px;
}
.bande_hero__nav .bande_hero__arrow:hover
{
background: var(--color13);
transform: translateY(-2px);
}
.bande_hero__nav .bande_hero__arrow:focus-visible
{
outline: 2px solid #fff;
outline-offset: 2px;
}
/* Swiper masque la navigation quand il n'y a rien à faire défiler */
.bande_hero__nav .swiper-button-lock
{
display: none;
}
@media (prefers-reduced-motion: reduce)
{
	.bande_hero__nav .bande_hero__arrow
	{
	transition: none;
	}
	.bande_hero__nav .bande_hero__arrow:hover
	{
	transform: none;
	}
}

/*
Bande présentation (texte principal + image légendée à droite)
Même structure que la bande « moyens » des pages Transports / Services logistiques :
l'image étant déjà à droite en desktop, le texte s'empile naturellement en premier en
mobile — aucune classe order n'est nécessaire.
*/
.bande_presentation
{
padding: 90px 0;
}
.bande_presentation__eyebrow
{
margin: 0 0 10px;
font-family: var(--font2);
font-size: 17px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--color1);
}
.bande_presentation__title
{
margin: 0 0 22px;
font-size: clamp(32px, 3.6vw, 48px);
}
/* Image appelée à kama sans hauteur : on laisse son ratio naturel, sans recadrage CSS,
   pour pouvoir poser une image plus haute si besoin. */
.bande_presentation .image_legende__img
{
height: auto;
}

/*
Bandeau défilant (marquee décoratif)
La piste contient deux fois la même liste : le défilement de -50% boucle donc sans rupture.
*/
.bande_defilante
{
max-width: 1920px;
margin: 0 auto;
padding: 13px 0;
overflow: hidden;
background: var(--color1);
}
.bande_defilante__piste
{
display: flex;
width: max-content;
animation: evi_defilement 28s linear infinite;
}
.bande_defilante__lot
{
display: flex;
}
.bande_defilante__item
{
white-space: nowrap;
font-family: var(--font2);
font-size: clamp(13px, 1.2vw, 17px);
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: #fff;
}
.bande_defilante__item::after
{
content: "✦";
margin: 0 clamp(12px, 1.4vw, 20px);
letter-spacing: 0;
}
@keyframes evi_defilement
{
from
{
transform: translateX(0);
}
to
{
transform: translateX(-50%);
}
}
@media (prefers-reduced-motion: reduce)
{
	.bande_defilante__piste
	{
	animation: none;
	}
}

/*
Bande flotte (titre + galerie de photos légendées)
*/
.bande_flotte
{
padding: 0 0 110px;
}
.bande_flotte__head
{
margin-bottom: 44px;
}
.bande_flotte__eyebrow
{
margin: 0 0 10px;
font-family: var(--font2);
font-size: 17px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--color1);
}
.bande_flotte__title
{
margin: 0;
font-size: clamp(34px, 4vw, 52px);
}
/* Une photo par ligne sous 500px, deux ensuite : aucun palier Bootstrap n'existe
   à 500px, la borne haute évite d'écraser le col-xl-3 (4 par ligne). */
@media screen and (min-width: 500px) and (max-width: 1199.98px)
{
	.bande_flotte__item
	{
	width: 50%;
	}
}
/* Lien lightbox : bloc, pour que la vignette ne laisse pas d'espace sous elle. */
.bande_flotte__link
{
display: block;
}
/* Vignettes de hauteur constante (maquette), quel que soit le nombre de colonnes. */
.bande_flotte .image_legende__img
{
height: 320px;
transition: transform .5s ease;
}
.bande_flotte .image_legende:hover .image_legende__img
{
transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce)
{
	.bande_flotte .image_legende__img
	{
	transition: none;
	}
	.bande_flotte .image_legende:hover .image_legende__img
	{
	transform: none;
	}
}

/*
Bande chiffres clés (fond sombre + camion décoratif qui traverse la bande)
*/
.bande_chiffres
{
position: relative;
max-width: 1920px;
margin: 0 auto;
padding: 90px 4vw 120px;
overflow: hidden;
background: var(--color3);
}
/* Un chiffre par ligne en dessous de 400px, deux ensuite : aucun palier Bootstrap
   n'existe à 400px, la borne haute évite d'écraser le col-lg-3 (4 par ligne). */
@media screen and (min-width: 400px) and (max-width: 991.98px)
{
	.bande_chiffres__item
	{
	width: 50%;
	}
}
.bande_chiffres__item
{
border-left: 2px solid rgba(168, 29, 34, .6);
padding-left: 24px;
}
.bande_chiffres__nombre
{
margin: 0;
font-family: var(--font2);
font-size: clamp(46px, 5vw, 62px);
font-weight: 700;
line-height: 1;
color: #fff;
}
.bande_chiffres__unite
{
font-size: .55em;
color: var(--color2);
}
.bande_chiffres__legende
{
margin: 10px 0 0;
font-family: var(--font2);
font-size: 16px;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255, 255, 255, .6);
}
.bande_chiffres__route
{
position: absolute;
left: 0;
right: 0;
bottom: 34px;
height: 46px;
}
.bande_chiffres__ligne
{
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 2px dashed rgba(255, 255, 255, .22);
}
.bande_chiffres__camion
{
position: absolute;
bottom: 2px;
left: -90px;
width: 74px;
height: 34px;
animation: evi_camion 11s linear infinite;
}
.bande_chiffres__caisse
{
position: absolute;
left: 0;
bottom: 8px;
width: 48px;
height: 22px;
border-radius: 2px;
background: #f0ece9;
}
.bande_chiffres__cabine
{
position: absolute;
left: 50px;
bottom: 8px;
width: 20px;
height: 17px;
border-radius: 2px 4px 1px 1px;
background: var(--color1);
}
.bande_chiffres__vitre
{
position: absolute;
left: 56px;
bottom: 16px;
width: 9px;
height: 6px;
border-radius: 1px;
background: #bfd7e2;
}
.bande_chiffres__roue
{
position: absolute;
bottom: 0;
width: 9px;
height: 9px;
border: 2px solid #3a3234;
border-radius: 50%;
background: #0e0a0b;
}
/* Les trois roues sont les 4e, 5e et 6e enfants du camion : seule leur position varie. */
.bande_chiffres__roue:nth-child(4)
{
left: 8px;
}
.bande_chiffres__roue:nth-child(5)
{
left: 30px;
}
.bande_chiffres__roue:nth-child(6)
{
left: 54px;
}
@keyframes evi_camion
{
from
{
left: -90px;
}
to
{
left: 104%;
}
}
@media (prefers-reduced-motion: reduce)
{
	/* Camion immobile mais visible : l'animation le laisserait hors cadre. */
	.bande_chiffres__camion
	{
	animation: none;
	left: 8%;
	}
}

/*
Carte actualité (vignette d'article + pastille date) — réutilisable
*/
.carte_actu
{
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 4px;
background: #fff;
box-shadow: 0 14px 40px rgba(33, 20, 21, .08);
cursor: pointer;
transition: transform .25s ease, box-shadow .25s ease;
}
.carte_actu:hover
{
transform: translateY(-6px);
box-shadow: 0 24px 54px rgba(33, 20, 21, .14);
}
@media (prefers-reduced-motion: reduce)
{
	.carte_actu
	{
	transition: box-shadow .25s ease;
	}
	.carte_actu:hover
	{
	transform: none;
	}
}
.carte_actu__visuel
{
position: relative;
height: 240px;
overflow: hidden;
background: var(--color3);
}
.carte_actu__img
{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Pastille posée sur l'image : date de publication */
.carte_actu__date
{
position: absolute;
top: 14px;
left: 14px;
margin: 0;
padding: 6px 12px;
border-radius: 2px;
background: var(--color1);
color: #fff;
font-family: var(--font2);
font-size: 13.5px;
font-weight: 700;
letter-spacing: 2px;
line-height: 1.2;
text-transform: uppercase;
}
.carte_actu__content
{
display: flex;
flex-direction: column;
flex: 1;
gap: 12px;
padding: 26px 26px 30px;
}
.carte_actu__title
{
margin: 0;
font-size: 25px;
line-height: 1.1;
}
.carte_actu__text
{
margin: 0;
flex: 1;
font-size: 15px;
line-height: 1.65;
text-wrap: pretty;
}
.carte_actu__link
{
font-family: var(--font2);
font-size: 15.5px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--color1);
}
.carte_actu__link::after
{
content: " →";
}
.carte_actu:hover .carte_actu__link
{
color: var(--color12);
}

/*
Bande liste actualités (grille de cartes + pagination)
*/
.bande_liste_actus
{
padding: 0 0 110px;
}

.bande_liste_actus__container
{
margin-top: 90px;
}

.bande_liste_actus__pagination
{
margin-top: 60px;
}

/*
Pagination WP-PageNavi (markup généré par le plugin)
*/
.wp-pagenavi
{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font2);
}
.wp-pagenavi a,
.wp-pagenavi span
{
padding: 8px 15px;
border: 1px solid var(--color11);
border-radius: 3px;
font-size: 17px;
font-weight: 600;
letter-spacing: 1px;
color: var(--color9);
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.wp-pagenavi a:hover,
.wp-pagenavi span.current
{
border-color: var(--color1);
background: var(--color1);
color: #fff;
}
/* « Page 1 sur 2 » seul sur la 1re ligne, les numéros de page centrés sur la 2e */
.wp-pagenavi span.pages
{
flex: 0 0 100%;
padding: 0;
border: none;
text-align: center;
color: var(--color8);
}

/*
Bande actualités (sur-titre + titre + 3 cartes + lien vers l'archive)
*/
.bande_actus
{
padding: 110px 0 110px;
}
.bande_actus__head
{
margin-bottom: 44px;
}
.bande_actus__eyebrow
{
margin: 0 0 10px;
font-family: var(--font2);
font-size: 17px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--color1);
}
.bande_actus__title
{
margin: 0;
font-size: clamp(34px, 4vw, 52px);
}
/* Bouton sous le titre en petits écrans, aligné à droite (bord de la 3e carte) à partir de lg */
.bande_actus__head_action
{
text-align: left;
}
@media screen and (min-width: 992px)
{
	.bande_actus__head_action
	{
	text-align: right;
	}
}

/*
Formulaire en carte blanche (Contact Form 7) — réutilisable
Composant partagé par la bande contact (page Contact) et la bande devis (accueil).
*/
.form_carte
{
padding: 40px 36px 25px 36px;
border-radius: 6px;
background: #fff;
box-shadow: 0 24px 60px rgba(33, 20, 21, .12);
}
.form_carte__title
{
margin: 0 0 20px;
font-size: 30px;
}
.form_carte .formfield_wrapper
{
margin-bottom: 16px;
}
.form_carte .formfield_wrapper p
{
margin: 0;
}
.form_carte input[type="text"],
.form_carte input[type="email"],
.form_carte input[type="tel"],
.form_carte select,
.form_carte textarea
{
width: 100%;
font-family: var(--font1);
font-size: 15.5px;
padding: 12px 14px;
border: 1px solid var(--color11);
border-radius: 3px;
background: var(--color5);
color: var(--color7);
outline: none;
transition: border-color .2s ease;
}
.form_carte input[type="text"]:focus,
.form_carte input[type="email"]:focus,
.form_carte input[type="tel"]:focus,
.form_carte select:focus,
.form_carte textarea:focus
{
border-color: var(--color1);
}
.form_carte textarea
{
height: 130px;
resize: vertical;
}
/* Honeypot Contact Form 7 */
.ne_pas_remplir
{
display: none;
}
.form_carte .wpcf7-checkbox .wpcf7-list-item
{
margin: 0;
}
.form_carte .wpcf7-checkbox label
{
display: flex;
gap: 10px;
align-items: flex-start;
font-family: var(--font1);
font-size: 13px;
line-height: 1.5;
color: var(--color8);
}
.form_carte .wpcf7-checkbox input
{
margin-top: 3px;
flex: 0 0 auto;
}
.form_carte .mention_rgpd_formulaire
{
margin: 4px 0 0;
font-size: 12.5px;
line-height: 1.5;
color: var(--color10);
}
.form_carte .wpcf7-submit
{
margin-top: 6px;
padding: 15px 28px;
border: none;
border-radius: 3px;
background: var(--color1);
color: #fff;
font-family: var(--font2);
font-size: 20px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 10px 26px rgba(120, 10, 14, .3);
transition: transform .2s ease, background .2s ease;
}
.form_carte .wpcf7-submit:hover
{
background: var(--color13);
transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce)
{
	.form_carte .wpcf7-submit
	{
	transition: background .2s ease;
	}
	.form_carte .wpcf7-submit:hover
	{
	transform: none;
	}
}
.form_carte .wpcf7-not-valid-tip
{
margin-top: 5px;
font-family: var(--font1);
font-size: 13px;
color: var(--color1);
}
.form_carte .wpcf7-response-output
{
margin: 4px 0 0;
padding: 12px 16px;
font-family: var(--font1);
font-size: 14px;
border-radius: 3px;
}

/*
Bande devis (texte + arguments + formulaire en carte, carte d'Europe en fond)
*/
.bande_devis
{
position: relative;
max-width: 1920px;
margin: 0 auto;
padding: 110px 0;
overflow: hidden;
background: var(--color6);
}
.bande_devis__deco
{
position: absolute;
right: -6%;
top: 50%;
width: min(62vw, 900px);
transform: translateY(-50%);
opacity: .07;
pointer-events: none;
}
.bande_devis .container
{
position: relative;
}
.bande_devis__eyebrow
{
margin: 0 0 10px;
font-family: var(--font2);
font-size: 17px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--color1);
}
.bande_devis__title
{
margin: 0 0 22px;
font-size: clamp(34px, 4vw, 52px);
}
.bande_devis__lead
{
max-width: 460px;
}

/*
---
PAGE ACCUEIL
---
*/

/* Section services accueil */
/* Espacement avec la bande suivante posé en marge, pas en padding bas de la bande. */
.home_page .bande72519
{
margin-bottom: 90px;
}

/* Section entreprise accueil */
/* Respiration plus large que sur les pages Transports / Services logistiques,
   et ombre portée sous la photo comme dans la maquette. */
.home_page .bande65310
{
padding: 110px 0;
}
.home_page .bande65310 .image_legende
{
box-shadow: 0 24px 60px rgba(33, 20, 21, .22);
}

/*
.home_page .bande52108 
{
margin-bottom: 
}*/

/*
---
PAGE TRANSPORTS
---
*/


/*
---
PAGE SERVICES LOGISTIQUES
---
*/

/*
---
PAGE CONTACT
---
*/

/* Section contact */
.bande_contact
{
position: relative;
max-width: 1920px;
margin: 0 auto;
padding: 0 0 110px;
overflow: hidden;
background: var(--color6);
}
.bande_contact__deco
{
position: absolute;
right: -6%;
bottom: -4%;
width: min(58vw, 820px);
opacity: .06;
pointer-events: none;
}
.bande_contact .container
{
position: relative;
}

.bande_contact__container
{
margin-top: 110px;
}

/* Colonne infos + carte */
.bande_contact__infos
{
display: flex;
flex-direction: column;
gap: 34px;
}
.bande_contact__phone
{
display: flex;
flex-direction: column;
gap: 4px;
padding: 28px 34px;
border-radius: 4px;
background: var(--color1);
color: #fff;
box-shadow: 0 18px 50px rgba(120, 10, 14, .3);
transition: transform .2s ease;
}
.bande_contact__phone:hover
{
transform: translateY(-4px);
color: #fff;
}
.bande_contact__phone_label
{
font-family: var(--font2);
font-size: 15px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: rgba(255, 255, 255, .75);
}
.bande_contact__phone_number
{
font-family: var(--font2);
font-size: 44px;
font-weight: 700;
line-height: 1;
}
.bande_contact__lines
{
display: flex;
flex-direction: column;
gap: 20px;
}
.bande_contact__line
{
display: flex;
gap: 16px;
align-items: baseline;
}
.bande_contact__label
{
flex: 0 0 92px;
font-family: var(--font2);
font-weight: 700;
font-size: 17px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color1);
}
.bande_contact__value
{
margin: 0;
font-size: 16px;
line-height: 1.6;
color: var(--color9);
}
.bande_contact__map
{
height: 506px;
border-radius: 4px;
overflow: hidden;
background: var(--color11);
}
.bande_contact__map iframe
{
display: block;
width: 100%;
height: 100%;
border: 0;
}


/*
---
ACTUS PAGE DETAIL
---
*/

.page_detail_actu h1
{
margin-bottom: 5px;
}

/*
@media screen and (min-width: 768px)
{
	.page_detail_actu h1
	{
	font-size: 30px;
	}
}*/

.page_detail_actu .chapeau
{
margin-bottom: 25px;
font-weight: bold;
color: #333;
text-align: justify;
}

/*
@media screen and (min-width: 500px)
{
	.page_detail_actu .chapeau,
	.page_detail_actu .txt p
	{
	text-align: justify;
	}
}*/

.page_detail_actu .txt h2 
{
font-size: 28px;
margin-top: 25px;
margin-bottom: 15px;
}

.page_detail_actu .txt h3
{
font-size: 23px;
margin-top: 25px;
margin-bottom: 15px;
}

.page_detail_actu .txt p
{
margin-bottom: 15px;
}

@media screen and (min-width: 576px)
{
	.page_detail_actu .txt p
	{
	text-align: justify;
	}
}

.page_detail_actu ul
{
margin-bottom: 15px;
}

.page_detail_actu .date
{
margin-bottom: 20px;
}

.image_actu_wrapper
{
border-radius: 8px;
overflow: hidden;
margin: 10px auto 30px auto;
}

.page_detail_actu .txt h2
{
font-size: 35px;
margin-top: 25px;
margin-bottom: 15px;
}

.page_detail_actu .txt h3
{
margin-top: 25px;
margin-bottom: 15px;
}

/* ==========================================================================
   Blocs articles / actualités — Transports Werlé
   À coller dans Apparence > Personnaliser > CSS additionnel
   Blocs couverts : .cmm-essentiel, .cmm-conseil, blockquote.cmm-avis,
   table.cmm-tableau, .cmm-faq, figure.cmm-photo
   Couleur d'accent modifiable en un seul endroit ci-dessous.
   ========================================================================== */

:root {
	--cmm-accent: #a3242b;        /* rouge Werlé : à ajuster si besoin */
	--cmm-accent-clair: #fdf3f3;  /* fond très léger dérivé de l'accent */
	--cmm-encre: #1d1d1f;         /* texte foncé */
	--cmm-gris: #f5f4f2;          /* fond neutre */
	--cmm-bord: #e3e0dc;          /* bordures discrètes */
}

/* --------------------------------------------------------------------------
   1. L'essentiel — encadré de synthèse (extraction IA / lecture rapide)
   -------------------------------------------------------------------------- */

.cmm-essentiel {
	background: var(--cmm-gris);
	border-left: 4px solid var(--cmm-accent);
	border-radius: 0 8px 8px 0;
	padding: 1.25rem 1.5rem;
	margin: 1.75rem 0 2.25rem;
}

.cmm-essentiel > p:first-child {
	margin: 0 0 0.65rem;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cmm-accent);
}

.cmm-essentiel ul {
	margin: 0;
	padding-left: 0;
}

.cmm-essentiel li {
	margin-bottom: 0.5rem;
	line-height: 1.55;
}

.cmm-essentiel li:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   2. Conseil terrain (EEAT) — parole d'expert signée
   -------------------------------------------------------------------------- */

.cmm-conseil {
	position: relative;
	background: var(--cmm-accent-clair);
	border: 1px solid color-mix(in srgb, var(--cmm-accent) 25%, white);
	border-radius: 8px;
	padding: 1.4rem 1.5rem 1.25rem;
	margin: 2.25rem 0;
}

.cmm-conseil p:last-child
{
margin-bottom: 0;
}

.cmm-conseil::before {
	content: "Conseil de pro";
	position: absolute;
	top: -0.75rem;
	left: 1.25rem;
	background: var(--cmm-accent);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.25rem 0.7rem;
	border-radius: 99px;
}

.cmm-conseil p {
	margin: 0;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   3. Avis client — citation authentique
   -------------------------------------------------------------------------- */

blockquote.cmm-avis {
	background: #fff;
	border: 1px solid var(--cmm-bord);
	border-radius: 8px;
	padding: 1.5rem 1.75rem 1.25rem;
	margin: 2.25rem 0;
	font-style: italic;
	position: relative;
}

blockquote.cmm-avis::before {
	content: "\201C";
	position: absolute;
	top: 0.1rem;
	left: 1rem;
	font-size: 3.2rem;
	line-height: 1;
	color: var(--cmm-accent);
	font-style: normal;
	opacity: 0.35;
}

blockquote.cmm-avis p {
	margin: 0 0 0.75rem;
	line-height: 1.65;
}

blockquote.cmm-avis .cmm-avis-auteur {
	margin: 0;
	font-style: normal;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--cmm-accent);
}

blockquote.cmm-avis .cmm-avis-auteur::before {
	content: "— ";
}

/* --------------------------------------------------------------------------
   4. Tableau GEO — comparatifs extractibles
   -------------------------------------------------------------------------- */

table.cmm-tableau {
	width: 100%;
	border-collapse: collapse;
	margin: 1.75rem 0 2.25rem;
	font-size: 0.95rem;
	background: #fff;
	border: 1px solid var(--cmm-bord);
	border-radius: 8px;
	overflow: hidden;
}

table.cmm-tableau th {
	background: var(--cmm-encre);
	color: #fff;
	text-align: left;
	padding: 0.75rem 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

table.cmm-tableau td {
	padding: 0.75rem 1rem;
	border-top: 1px solid var(--cmm-bord);
	vertical-align: top;
	line-height: 1.5;
}

table.cmm-tableau tbody tr:nth-child(even) {
	background: var(--cmm-gris);
}

table.cmm-tableau tbody tr:hover {
	background: var(--cmm-accent-clair);
}

/* Première colonne = entrée de lecture */
table.cmm-tableau td:first-child {
	font-weight: 600;
	color: var(--cmm-encre);
}

/* Tableau scrollable sur mobile sans casser la mise en page */
@media (max-width: 640px) {
	table.cmm-tableau {
		display: block;
		border: 0;
		border-radius: 0;
		overflow: visible;
		background: transparent;
	}
	table.cmm-tableau thead,
	table.cmm-tableau tbody,
	table.cmm-tableau tr,
	table.cmm-tableau td {
		display: block;
		width: 100%;
	}
	/* En-tête masqué visuellement mais lu par les lecteurs d'écran */
	table.cmm-tableau thead {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
	/* Chaque ligne devient une carte */
	table.cmm-tableau tbody tr,
	table.cmm-tableau tbody tr:nth-child(even),
	table.cmm-tableau tbody tr:hover {
		background: #fff;
	}
	table.cmm-tableau tbody tr {
		border: 1px solid var(--cmm-bord);
		border-radius: 8px;
		margin-bottom: 0.75rem;
		padding: 0.25rem 0;
		overflow: hidden;
	}
	table.cmm-tableau tbody tr:last-child {
		margin-bottom: 0;
	}
	table.cmm-tableau td {
		border-top: 0;
		padding: 0.5rem 1rem;
	}
	/* L'intitulé de colonne au-dessus de la valeur */
	table.cmm-tableau td::before {
		content: attr(data-label);
		display: block;
		font-size: 0.72rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		
		opacity: 0.55;
		margin-bottom: 0.15rem;
	}
	
	table.cmm-tableau th td::before
	{
	color: #fff;
	}
	
	/* Première cellule = titre de la carte */
	table.cmm-tableau td:first-child {
		background: #111;
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
		border-bottom: 1px solid var(--cmm-bord);
		font-size: 1.02rem;
		color: #fff;
	}
	table.cmm-tableau td:last-child {
		padding-bottom: 0.75rem;
	}
}

/* --------------------------------------------------------------------------
   5. FAQ — questions/réponses en fin d'article
   -------------------------------------------------------------------------- */

.cmm-faq {
	margin: 2.5rem 0 1rem;
	padding-top: 1.5rem;
	border-top: 2px solid var(--cmm-bord);
}

.cmm-faq h2 {
	margin-bottom: 1.25rem;
}

.cmm-faq h3 {
	font-size: 1.05rem;
	margin: 1.5rem 0 0.4rem;
	padding-left: 1rem;
	border-left: 3px solid var(--cmm-accent);
	line-height: 1.4;
}

.cmm-faq h3 + p {
	margin-top: 0.25rem;
	padding-left: 1rem;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   6. Photo légendée dans les articles
   -------------------------------------------------------------------------- */

figure.cmm-photo {
	margin: 2rem 0;
}

figure.cmm-photo img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
}

figure.cmm-photo figcaption {
	margin-top: 0.5rem;
	font-size: 0.85rem;
	color: #6b6b6b;
	padding-left: 0.75rem;
	border-left: 3px solid var(--cmm-accent);
	line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Confort de lecture mobile pour tous les blocs
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
	.cmm-essentiel,
	.cmm-conseil,
	blockquote.cmm-avis {
		padding: 1.1rem 1.1rem 1rem;
	}
}

/*navigation entre posts*/

.post_navigation
{
margin-top: 30px;
}

.post_navigation .col2
{
text-align: right;
}

.post_navigation a
{
display: inline-block;
margin: 0 5px;
transition: opacity 0.3s linear;
}

.bloc_cta_actu
{
background-color: var(--color3);
padding: 30px 15px;
margin-top: 35px;
border-radius: 7px;
}

@media screen and (min-width: 576px)
{
	.bloc_cta_actu
	{
	padding: 45px;
	}
}

.bloc_cta_actu .title1
{
color: #fff;
margin-top: 0;
text-align: center;
margin-bottom: 15px;
}

.bloc_cta_actu .cta_txt
{
margin-bottom: 25px;
color: #fff;
}

.page_detail_actu
{
margin: 70px 0;
}

.page_detail_actu main .bloc_cta_actu p
{
text-align: center;
color: #fff;
}

.bloc_cta_actu .boutons
{
display: flex;
justify-content: center;
gap: 30px;
}

@media screen and (max-width: 767px)
{
	.bloc_cta_actu .boutons
	{
	flex-direction: column;
	}
}

@media screen and (min-width: 576px)
{
	.bloc_cta_actu .boutons .btn_std
	{
	justify-content: center;
	}
}

.post-template-default .main_content_style .lien_retour
{
font-size: 14px;
margin-top: 30px;
display: inline-block;
color: #808080;
}

/*
Plan du site
*/

.sitemap-page-list
{
list-style-type: none;
margin: 0;
padding: 0;
}

.sitemap-page-list ul
{
padding: 0;
margin: 0;
}

.sitemap-page-list li
{
font-size: 16px;
border-bottom: 1px solid #bcd7d9;
padding-bottom: 5px;
margin-bottom: 5px;
}

.sitemap-page-list li ul
{
padding-top: 10px;
}

.sitemap-page-list li ul li
{
border-top: 1px solid #bcd7d9;
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}

.sitemap-page-list a
{
text-decoration: none;
color: #333;
}

/*message quand les cookies ne sont pas autorisés*/

.tac_float
{
padding: 15px
}

.tac_float button
{
display: block!important;
margin: 15px auto 0 auto;
}

/*
Required WordPress CSS
*/
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}
.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

/* WordPress gallery */

.gallery {
	margin-bottom: 1.6em;
}
.gallery-item {
	display: inline-block;
	padding: 1.79104477%;
	text-align: center;
	vertical-align: top;
	width: 100%;
}
.gallery-columns-2 .gallery-item {
	max-width: 50%;
}
.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}
.gallery-columns-4 .gallery-item {
	max-width: 25%;
}
.gallery-columns-5 .gallery-item {
	max-width: 20%;
}
.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}
.gallery-icon img {
	margin: 0 auto;
}
.gallery-caption {
	color: #707070;
	color: rgba(51, 51, 51, 0.7);
	display: block;
	font-family: "Noto Sans", sans-serif;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1.5;
	padding: 0.5em 0;
}
.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
	display: none;
}

.wp-caption {
	border: 1px solid #f1f1f1;
	margin-bottom: 1.5em;
	max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
	display: block;
	margin: 1.2% auto 0;
	max-width: 98%;
}
.wp-caption-text {
	text-align: center;
}
.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}
/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}