/* =============================================================================
Green Cut — THÈME « Design 2 » (Terroir premium)
-----------------------------------------------------------------------------
Reskin global appliqué PAR-DESSUS style.css (chargé après lui dans header.php).
Objectif : donner tout le site l'identité design-2 (vert forêt profond + crème
+ accent chartreuse, rythme éditorial) SANS toucher au HTML → 100 % réversible
(retirer le dans header.php suffit à revenir au design classique).
Police : on conserve la police ACTUELLE du site (var(--inter) = "Inter",
sans-serif, avec repli système). Aucune police externe ajoutée.
============================================================================= */
:root {
--d2-forest: #0c1f14;
--d2-forest-2: #10291a;
--d2-forest-3: #16351f;
--d2-cream: #f4efe3;
--d2-cream-2: #ece5d3;
--d2-chartreuse: #cde94b;
--d2-lime-deep: #86b52a;
--d2-ink: #16241b;
--d2-mut-dark: #b9c6b3; /* texte secondaire sur fond sombre */
--d2-mut-light:#5d6a56; /* texte secondaire sur fond crème */
--d2-line-dark: rgba(255, 255, 255, .12);
--d2-line-light: rgba(12, 31, 20, .14);
--d2-radius: 8px;
--d2-shadow: 0 22px 48px rgba(6, 20, 12, .14);
/* On réoriente quelques variables du thème d'origine */
--primary-color: #2f8f3f;
--sub-bg: var(--d2-cream);
--heading-color: var(--d2-ink);
--paragraph: #3a483f;
}
/* ---------- BASE : crème par défaut → tout contenu non thémé reste lisible --- */
body {
background: var(--d2-cream);
color: var(--paragraph);
font-family: var(--inter);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--inter);
color: var(--d2-ink);
letter-spacing: -.015em;
}
a { color: inherit; }
/* Loader */
#loading { background: var(--d2-forest) !important; }
/* Libellés « kicker » (les h5 de section-header : leaf + petit texte) */
.section-header h5 {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 13px !important;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--d2-lime-deep);
}
.section-header h5 img { filter: none; }
.section-header h2 {
color: var(--d2-ink);
font-weight: 800;
letter-spacing: -.02em;
}
.section-header p { color: var(--d2-mut-light); }
/* =============================================================================
BOUTONS
============================================================================= */
.btn-one,
.btn-one:link,
.btn-one:visited {
background: var(--d2-chartreuse) !important;
color: var(--d2-forest) !important;
border: 1px solid var(--d2-chartreuse) !important;
border-radius: 4px !important;
font-weight: 700;
}
.btn-one::before,
.btn-one::after { display: none !important; }
.btn-one:hover {
background: #d9f26a !important;
color: var(--d2-forest) !important;
transform: translateY(-3px);
}
.btn-one i { color: var(--d2-forest) !important; }
/* Bouton clair (hero / sections sombres) */
.btn-one-white,
.btn-one-white:link,
.btn-one-white:visited {
background: transparent !important;
color: #fff !important;
border: 1px solid rgba(255, 255, 255, .55) !important;
border-radius: 4px !important;
font-weight: 600;
}
.btn-one-white::before,
.btn-one-white::after { display: none !important; }
.btn-one-white:hover {
background: var(--d2-chartreuse) !important;
color: var(--d2-forest) !important;
border-color: var(--d2-chartreuse) !important;
transform: translateY(-3px);
}
.btn-one-white i { color: inherit !important; }
/* =============================================================================
EN-TÊTE / NAVIGATION (sombre)
============================================================================= */
.header-top {
background: var(--d2-forest) !important;
border-bottom: 1px solid var(--d2-line-dark);
}
.header-top .info li,
.header-top .info li a,
.header-top .link-info li a { color: var(--d2-mut-dark) !important; }
.header-top .info li a:hover { color: var(--d2-chartreuse) !important; }
.header-top .bor-left { border-left-color: var(--d2-line-dark) !important; }
.header-section,
.header.sticky .header-section,
.header-section.sticky {
background: rgba(12, 31, 20, .92) !important;
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--d2-line-dark);
}
.main-menu > li > a {
color: #f4efe3 !important;
font-weight: 500;
}
.main-menu > li > a:hover { color: var(--d2-chartreuse) !important; }
.menu-btn a {
background: var(--d2-chartreuse) !important;
color: var(--d2-forest) !important;
border-radius: 4px !important;
}
.menu-btn a span,
.menu-btn a i { color: var(--d2-forest) !important; }
.header-bar span { background: #fff !important; }
/* Menu mobile déroulant */
@media (max-width: 1199px) {
.main-menu {
background: var(--d2-forest-2) !important;
border: 1px solid var(--d2-line-dark);
}
.main-menu > li > a { color: #f4efe3 !important; }
}
/* =============================================================================
HERO (banner-three)
============================================================================= */
.banner-three { background: var(--d2-forest); }
.banner-three .slide-bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(12, 31, 20, .48) 0%, rgba(12, 31, 20, .40) 45%, rgba(12, 31, 20, .88) 100%);
}
.banner-three__content h4 {
display: inline-block;
font-size: 13px !important;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--d2-chartreuse) !important;
/* on neutralise le contour noir hérité pour un rendu net sur l'overlay */
text-shadow: 0 2px 10px rgba(0, 0, 0, .5) !important;
margin-bottom: 6px;
}
.banner-three__content h1,
.banner-three__content h2 {
font-weight: 800 !important;
letter-spacing: -.02em;
}
/* =============================================================================
RYTHME DES SECTIONS (alternance sombre / crème)
============================================================================= */
/* --- Sections CRÈME (texte sombre) --- */
.work,
.project,
.pubs,
.service-single,
.sub-bg {
background: var(--d2-cream) !important;
color: var(--paragraph);
}
/* --- Sections SOMBRES (texte crème) --- */
.offer-highlight,
.statistic-area,
.involve-two,
.help-area,
.partners {
background: var(--d2-forest) !important;
}
.statistic-area { background: var(--d2-forest-2) !important; }
.involve-two, .help-area { background: var(--d2-forest) !important; }
.offer-highlight .section-header h2,
.statistic-area .section-header h2,
.involve-two .section-header h2,
.help-area .section-header h2,
.partners .section-header h2 { color: #fff !important; }
.offer-highlight .section-header p,
.statistic-area .section-header p,
.involve-two .section-header p,
.help-area .section-header p,
.partners .section-header p { color: var(--d2-mut-dark) !important; }
/* =============================================================================
SERVICES (work / work__item) — cartes crème éditoriales
============================================================================= */
.work__item {
background: #fff !important;
border: 1px solid var(--d2-line-light);
border-radius: var(--d2-radius) !important;
box-shadow: none !important;
transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.work__item:hover {
transform: translateY(-6px);
box-shadow: var(--d2-shadow);
border-color: transparent;
}
.work__item-icon {
background: var(--d2-forest) !important;
border-radius: 12px !important;
}
.work__item-icon i { color: var(--d2-chartreuse) !important; }
.work__item h3 { color: var(--d2-ink) !important; font-weight: 700; }
.work__item p { color: var(--d2-mut-light) !important; }
/* =============================================================================
OFFRE DU MOMENT (offer-highlight) — sur fond sombre
============================================================================= */
.offer-highlight__card {
background: var(--d2-forest-2) !important;
border: 1px solid var(--d2-line-dark) !important;
border-radius: var(--d2-radius) !important;
box-shadow: none !important;
}
.offer-highlight__content h2 { color: #fff !important; }
.offer-highlight__content .section-header h5 { color: var(--d2-chartreuse); }
.offer-highlight__intro { color: var(--d2-mut-dark) !important; }
.offer-highlight__badge {
background: var(--d2-chartreuse) !important;
color: var(--d2-forest) !important;
border-radius: 4px !important;
}
.offer-highlight__prices {
background: rgba(255, 255, 255, .04) !important;
border: 1px dashed var(--d2-line-dark) !important;
border-radius: 6px !important;
}
.offer-highlight__price-item + .offer-highlight__price-item { border-top-color: var(--d2-line-dark) !important; }
.offer-highlight__size { color: var(--d2-chartreuse) !important; }
.offer-highlight__new-price { color: #fff !important; }
.offer-highlight__old-price { color: var(--d2-mut-dark) !important; }
.offer-highlight__deadline { color: var(--d2-mut-dark) !important; }
/* =============================================================================
CHIFFRES CLÉS (statistic-area) — bande sombre, nombres chartreuse
============================================================================= */
.statistic__item {
background: rgba(255, 255, 255, .05) !important;
border: 1px solid var(--d2-line-dark) !important;
border-radius: var(--d2-radius) !important;
}
.statistic__item h2,
.statistic__item h2 .count { color: var(--d2-chartreuse) !important; font-weight: 800; }
.statistic__item p { color: var(--d2-mut-dark) !important; }
/* =============================================================================
DOMAINES (project) — fond crème
============================================================================= */
.project.sub-bg,
.project { background: var(--d2-cream) !important; }
.project .section-header h2 { color: var(--d2-ink) !important; }
.project .section-header p { color: var(--d2-mut-light) !important; }
.project__item h3 { color: var(--d2-ink) !important; font-weight: 700; }
.project__item p { color: var(--d2-mut-light) !important; }
.project__item {
border-left: 2px solid var(--d2-chartreuse);
padding-left: 18px;
}
.bor-right { border-right-color: var(--d2-line-light) !important; }
.project-arry-prev, .project-arry-next,
.banner-three__arry-prev, .banner-three__arry-next {
border-color: var(--d2-line-light) !important;
color: var(--d2-ink) !important;
}
.project-arry-next.active { background: var(--d2-chartreuse) !important; color: var(--d2-forest) !important; }
/* =============================================================================
ACCOMPAGNEMENT + ACCORDÉON (involve-two / help-area) — fond sombre
============================================================================= */
.involve-two .section-header h2,
.help-area .section-header h2 { color: #fff !important; }
.accordion-item {
background: transparent !important;
border: none !important;
border-top: 1px solid var(--d2-line-dark) !important;
}
.accordion-item:last-child { border-bottom: 1px solid var(--d2-line-dark) !important; }
.accordion-button {
background: transparent !important;
color: #fff !important;
font-weight: 600;
box-shadow: none !important;
padding-left: 0;
padding-right: 0;
}
.accordion-button:not(.collapsed) { color: var(--d2-chartreuse) !important; }
.accordion-button::after {
filter: brightness(0) saturate(100%) invert(84%) sepia(31%) saturate(680%) hue-rotate(28deg) brightness(101%) contrast(88%);
}
.accordion-body { padding-left: 0; padding-right: 0; }
.accordion-body p { color: var(--d2-mut-dark) !important; }
/* =============================================================================
PARTENAIRES — bande sombre + cartes crème (logos lisibles)
============================================================================= */
.partners { background: var(--d2-forest) !important; }
.partners .section-header h2 { color: #fff !important; }
.partners .section-header p { color: var(--d2-mut-dark) !important; }
.partners__card {
background: var(--d2-cream) !important;
border: 1px solid var(--d2-line-dark) !important;
border-radius: 10px !important;
box-shadow: none !important;
}
.partners__card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(0, 0, 0, .32) !important; }
/* Page « Partenaires » : cartes détaillées */
.partner-card {
background: #fff !important;
border: 1px solid var(--d2-line-light);
border-radius: var(--d2-radius) !important;
box-shadow: none !important;
transition: transform .25s ease, box-shadow .25s ease;
}
.partner-card:hover { transform: translateY(-6px); box-shadow: var(--d2-shadow) !important; }
.partner-card h4 { color: var(--d2-ink) !important; font-weight: 700; }
.partner-card p { color: var(--d2-mut-light) !important; }
/* =============================================================================
PUBLICATIONS (pubs) — fond crème, cartes design-2
============================================================================= */
.pubs { background: var(--d2-cream) !important; }
.pubs .section-header h2 { color: var(--d2-ink) !important; }
.pubs__card {
background: #fff !important;
border: 1px solid var(--d2-line-light) !important;
border-radius: var(--d2-radius) !important;
box-shadow: none !important;
}
.pubs__card:hover { box-shadow: var(--d2-shadow) !important; }
.pubs__date {
background: var(--d2-chartreuse) !important;
color: var(--d2-forest) !important;
border-radius: 4px !important;
box-shadow: none !important;
}
.pubs__body h3 { color: var(--d2-ink) !important; }
.pubs__body p { color: var(--d2-mut-light) !important; }
/* =============================================================================
BANNIÈRE DES PAGES INTÉRIEURES (page-banner) — bande sombre
============================================================================= */
.page-banner {
background: var(--d2-forest) !important;
position: relative;
}
.page-banner::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(12, 31, 20, .55), rgba(12, 31, 20, .82));
}
.page-banner .container { position: relative; z-index: 2; }
.page-banner h1 { color: #fff !important; font-weight: 800; }
.page-banner p { color: var(--d2-mut-dark) !important; }
/* =============================================================================
PAGES SERVICES (occasion / location — service-single)
============================================================================= */
.service-single { background: var(--d2-cream) !important; }
.service-single h3, .service-single h4 { color: var(--d2-ink) !important; }
.service-single p, .service-single li { color: var(--d2-mut-light) !important; }
.service-single__left-item .image img { border-radius: var(--d2-radius); }
.item-two {
border-radius: var(--d2-radius) !important;
position: relative;
overflow: hidden;
}
.item-two::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(12, 31, 20, .35), rgba(12, 31, 20, .85));
}
.item-two .wrp { position: relative; z-index: 2; }
.item-two .wrp h3, .item-two .wrp a { color: #fff !important; }
.item-two .wrp i { color: var(--d2-chartreuse) !important; }
.item-three.sub-bg {
background: #fff !important;
border: 1px solid var(--d2-line-light);
border-radius: var(--d2-radius) !important;
}
.item-three .content h3 { color: var(--d2-ink) !important; }
.item-three .content p { color: var(--d2-mut-light) !important; }
.item-three > a {
background: var(--d2-chartreuse) !important;
color: var(--d2-forest) !important;
border-radius: 4px !important;
font-weight: 700;
}
.item-three > a i { color: var(--d2-forest) !important; }
.item-three > a:hover { background: #d9f26a !important; }
/* =============================================================================
ZONE D'INTERVENTION (zi-card)
============================================================================= */
.zi-card {
background: #fff !important;
border: 1px solid var(--d2-line-light);
border-radius: var(--d2-radius) !important;
box-shadow: none !important;
}
.zi-card:hover { box-shadow: var(--d2-shadow) !important; }
.zi-card__body h3 { color: var(--d2-ink) !important; font-weight: 700; }
.zi-card__body .zi-meta { color: var(--d2-lime-deep) !important; }
.zi-card__body p { color: var(--d2-mut-light) !important; }
/* =============================================================================
CONTACT (.content sombre + .form-area crème)
============================================================================= */
.contact .content {
border-radius: var(--d2-radius);
position: relative;
overflow: hidden;
}
.contact .content::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(155deg, rgba(12, 31, 20, .78), rgba(16, 41, 26, .92));
}
.contact .content > * { position: relative; z-index: 2; }
.contact .content h2,
.contact .content p,
.contact .content li,
.contact .content a { color: #fff !important; }
.contact .content i { color: var(--d2-chartreuse) !important; }
.form-area {
background: #fff !important;
border: 1px solid var(--d2-line-light);
border-radius: var(--d2-radius) !important;
box-shadow: var(--d2-shadow);
padding: 38px !important;
}
@media (max-width: 767px) {
.form-area { padding: 22px !important; }
}
.form-area .form-control,
.form-area input,
.form-area textarea,
.form-area select {
border-radius: 6px !important;
border: 1px solid var(--d2-line-light) !important;
}
.form-area .form-control:focus {
border-color: var(--d2-lime-deep) !important;
box-shadow: 0 0 0 3px rgba(134, 181, 42, .18) !important;
}
/* Bouton d'envoi du formulaire de contact (sans classe .btn-one) */
.form-area button[type="submit"],
.form-area .btn {
background: var(--d2-chartreuse) !important;
color: var(--d2-forest) !important;
border: 1px solid var(--d2-chartreuse) !important;
border-radius: 4px !important;
font-weight: 700;
}
.form-area button[type="submit"] i,
.form-area .btn i { color: var(--d2-forest) !important; }
.form-area button[type="submit"]:hover,
.form-area .btn:hover { background: #d9f26a !important; }
/* =============================================================================
NEWSLETTER (our-info / newsletter-title) — bande sombre
============================================================================= */
.newsletter-title { background-color: var(--d2-forest) !important; }
.newsletter-title::before { background: rgba(12, 31, 20, .78) !important; }
.our-info__input input {
border-radius: 4px !important;
border: 1px solid var(--d2-line-dark) !important;
background: rgba(255, 255, 255, .06);
color: #fff;
}
.our-info__input input::placeholder { color: var(--d2-mut-dark); }
.our-info__submit { background: var(--d2-chartreuse) !important; color: var(--d2-forest) !important; border-radius: 4px !important; }
.our-info__submit i { color: var(--d2-forest) !important; }
.our-info__social-icon a {
background: rgba(255, 255, 255, .08) !important;
color: #fff !important;
}
.our-info__social-icon a:hover { background: var(--d2-chartreuse) !important; color: var(--d2-forest) !important; }
/* =============================================================================
PAGES LÉGALES / CONTENU GÉNÉRIQUE (défaut crème lisible)
============================================================================= */
main > section { color: var(--paragraph); }
main h1, main h2, main h3, main h4 { color: var(--d2-ink); }
main a:not(.btn-one):not(.btn-one-white):not(.our-info__submit) { color: var(--d2-lime-deep); }
/* =============================================================================
PIED DE PAGE (footer) — sombre
============================================================================= */
.footer {
background: var(--d2-forest) !important;
position: relative;
}
.footer::before { display: none !important; }
.footer__item p,
.footer__item ul li,
.footer__item ul li a,
.footer__item-map-popup { color: var(--d2-mut-dark) !important; }
.footer__item-title h4 { color: #fff !important; font-weight: 700; }
.footer__item ul li a:hover,
.footer__item-map-popup:hover { color: var(--d2-chartreuse) !important; }
.footer .primary-color { color: var(--d2-chartreuse) !important; }
.footer__item-title-line,
.footer__item-title-line2 { background: var(--d2-chartreuse) !important; }
.footer__copyright {
background: var(--d2-forest-2) !important;
border-top: 1px solid var(--d2-line-dark);
}
.footer__copyright p { color: var(--d2-mut-dark) !important; }
.footer__copyright a { color: var(--d2-chartreuse) !important; }
.footer__rating a { color: #fff !important; }
/* Bouton retour haut de page */
.scroll-up svg path { stroke: var(--d2-chartreuse) !important; }
.scroll-up { background: var(--d2-forest-2) !important; }
/* =============================================================================
DÉTAILS UTILITAIRES
============================================================================= */
.primary-color { color: var(--d2-lime-deep) !important; }
.bor { border-color: var(--d2-line-light) !important; }
hr { border-color: var(--d2-line-light); }
/* =============================================================================
CORRECTIFS AUDIT — contraste sur crème, verts hérités (#4baf47), libellés boutons
(bloc chargé en dernier : surcharge les règles précédentes)
============================================================================= */
:root { --d2-green-cream: #2a6d1f; } /* vert foncé lisible sur crème (~4.9:1) */
/* Kicker (h5) : vert foncé lisible sur CRÈME par défaut… */
.section-header h5 { color: var(--d2-green-cream) !important; }
/* …et chartreuse sur les sections SOMBRES */
.offer-highlight .section-header h5,
.statistic-area .section-header h5,
.involve-two .section-header h5,
.help-area .section-header h5,
.partners .section-header h5 { color: var(--d2-chartreuse) !important; }
/* Feuille du kicker : verte sur crème (via le SVG), chartreuse sur sombre (filtre) */
.section-header h5 img { filter: none; }
.offer-highlight .section-header h5 img,
.statistic-area .section-header h5 img,
.involve-two .section-header h5 img,
.help-area .section-header h5 img,
.partners .section-header h5 img {
filter: brightness(0) saturate(100%) invert(84%) sepia(31%) saturate(680%) hue-rotate(28deg) brightness(101%) contrast(88%);
}
/* Libellés de boutons : le texte est dans un (non couvert plus haut) */
.btn-one span { color: var(--d2-forest) !important; }
.btn-one:hover span { color: var(--d2-forest) !important; }
.btn-one-white span { color: #fff !important; }
.btn-one-white:hover span { color: var(--d2-forest) !important; }
/* Verts hérités #4baf47 codés en dur en style inline (liens légaux/RGPD, nombre « 404 »…) */
[style*="4baf47" i] { color: var(--d2-green-cream) !important; }
/* Pictos verts trop clairs sur crème → vert qui passe le contraste ; chartreuse sur sombre */
.primary-color { color: #2f8f3f !important; }
.footer .primary-color,
.contact .content .primary-color { color: var(--d2-chartreuse) !important; }
.materiel-list .electric { color: var(--d2-green-cream) !important; }
/* Détails hérités restants */
.our-info__input-envelope { color: var(--d2-mut-dark) !important; }
.header-top .info li i { color: var(--d2-chartreuse) !important; }
/* =============================================================================
CORRECTIF CLICS — les voiles décoratifs ne doivent JAMAIS bloquer les clics
(sinon le bouton Facebook de la newsletter, les CTA du hero, etc. deviennent
non cliquables car recouverts par l'overlay d'assombrissement)
============================================================================= */
.banner-three .slide-bg::after,
.page-banner::after,
.item-two::after,
.contact .content::after,
.newsletter-title::before { pointer-events: none !important; }
/* Sécurité : les éléments interactifs de la newsletter passent au premier plan */
.our-info__input,
.our-info__social-icon,
.our-info__logo { position: relative; z-index: 2; }
/* =============================================================================
BOUTONS EN VERT DU LOGO (au lieu du chartreuse « jaune »)
Vert échantillonné sur le logo Green Cut (~#009700). Texte blanc.
============================================================================= */
:root {
--d2-btn: #008c00;
--d2-btn-hover: #00711f;
--d2-btn-text: #ffffff;
}
.btn-one, .btn-one:link, .btn-one:visited,
.menu-btn a,
.our-info__submit,
.form-area button[type="submit"], .form-area .btn,
.item-three > a {
background: var(--d2-btn) !important;
color: var(--d2-btn-text) !important;
border-color: var(--d2-btn) !important;
}
.btn-one span, .menu-btn a span, .item-three > a span,
.form-area button[type="submit"] span,
.btn-one i, .menu-btn a i, .our-info__submit i, .item-three > a i,
.offer-highlight__badge i, .form-area button[type="submit"] i {
color: var(--d2-btn-text) !important;
}
.btn-one:hover, .menu-btn a:hover, .our-info__submit:hover,
.form-area button[type="submit"]:hover, .item-three > a:hover {
background: var(--d2-btn-hover) !important;
border-color: var(--d2-btn-hover) !important;
}
.btn-one:hover span, .btn-one:hover i { color: var(--d2-btn-text) !important; }
/* Boutons « outline » clairs (hero) : au survol → vert du logo, pas chartreuse */
.btn-one-white:hover {
background: var(--d2-btn) !important;
border-color: var(--d2-btn) !important;
color: #fff !important;
}
.btn-one-white:hover span,
.btn-one-white:hover i { color: #fff !important; }
/* =============================================================================
« TOUT EN VERT » — on remplace l'accent chartreuse (jaune-vert) partout par
le vert du logo. Levier : on redéfinit les variables d'accent → toutes les
règles qui les utilisent basculent d'un coup.
- sur fond SOMBRE : vert vif du logo (lisible)
- sur fond CRÈME : vert foncé du logo (lisible)
============================================================================= */
:root {
--d2-chartreuse: #00a300; /* accent VIF (sections sombres) = vert du logo */
--d2-lime-deep: #2a6d1f; /* accent FONCÉ (sections crème) = vert du logo */
}
/* Badges pleins (« Offre du moment », date des publications) → vert plein + blanc,
comme les boutons (au lieu d'un aplat chartreuse à texte foncé) */
.offer-highlight__badge,
.pubs__date {
background: var(--d2-btn) !important;
color: #fff !important;
}
.offer-highlight__badge i,
.pubs__date i { color: #fff !important; }
/* Feuille du kicker sur sections SOMBRES : le SVG est vert foncé → on l'éclaircit
en vert vif (au lieu du filtre chartreuse précédent) */
.offer-highlight .section-header h5 img,
.statistic-area .section-header h5 img,
.involve-two .section-header h5 img,
.help-area .section-header h5 img,
.partners .section-header h5 img {
filter: brightness(2.4) saturate(1.25) !important;
}
/* Flèche des accordéons : blanche sur fond sombre (neutre, plus de jaune) */
.accordion-button::after { filter: brightness(0) invert(1) !important; }
.accordion-button:not(.collapsed)::after { filter: brightness(0) invert(1) !important; }
/* =============================================================================
ESPACEMENT HAUT DES BANDES — plusieurs sections n'avaient que pb-130 ou mt-130
(invisible sur fond blanc uniforme), donc le contenu « colle » en haut de la
bande colorée. On garantit un padding-top cohérent.
============================================================================= */
.work { padding-top: 130px !important; }
.offer-highlight { padding-top: 100px !important; }
.pubs { padding-top: 110px !important; }
.involve-two,
.help-area {
margin-top: 0 !important;
padding-top: 120px !important;
}
@media (max-width: 767px) {
.work { padding-top: 70px !important; }
.offer-highlight { padding-top: 60px !important; }
.pubs { padding-top: 60px !important; }
.involve-two, .help-area { padding-top: 70px !important; }
}
/* =============================================================================
FORMULAIRE DE CONTACT — refonte propre des champs
(les champs étaient en display:inline sans marge → « bandes blanches » entre
eux, et un fond crème terne. On passe à des champs blancs nets et espacés.)
============================================================================= */
.form-area form { display: block; }
.form-area form input:not([type="checkbox"]):not([type="radio"]),
.form-area form textarea {
display: block !important;
width: 100% !important;
background: #fff !important;
border: 1.5px solid var(--d2-line-light) !important;
border-radius: 10px !important;
padding: 15px 18px !important;
margin: 0 0 16px 0 !important;
color: var(--d2-ink) !important;
font-size: 15px !important;
font-family: var(--inter) !important;
line-height: 1.4 !important;
box-shadow: none !important;
transition: border-color .2s ease, box-shadow .2s ease;
}
/* Select natif : NE PAS forcer display (nice-select le masque en display:none et
affiche son propre widget). Ces styles ne s'appliquent QUE si nice-select est
absent — sinon le