:root {
--primary-color: #6323d8;
--secondary-color: #27ae60;
--primary-texte: #6323D8;
--secondary-texte: #19713E;
--primary-fg: #FFFFFF;
--primary-bouton: #6323D8;
--secondary-fg: #141A21;
--hero-fg: #FFFFFF;
--primary-clair: #B99CED;
--dark-color: #2C3E50;
--gray-dark: #616A6B;
--light-bg: #F8F9FA;
--primary-light: #D5F4E6;
--shadow: 0 2px 10px rgba(0,0,0,0.1);
--transition: all 0.3s ease;
--btn-radius: 14px;
--card-radius: 16px;
--hero-gradient: linear-gradient(#F4F6F8, #F4F6F8);
--cta-gradient: linear-gradient(var(--primary-color), var(--primary-color));
--dark-color: #141A21;
--gray-dark: #4F5A67;
--light-bg: #F4F6F8;
--ink: #141A21;
--line: #E3E7EC;
--page-bg: #F4F6F8;
--tint: #FCE9E4;
--tint: color-mix(in srgb, var(--primary-color) 14%, #FFFFFF);
--cta-bg: var(--primary-color);
--peps-fg: #FFFFFF;
--peps-texte: var(--secondary-color);
--peps-texte: color-mix(in srgb, var(--primary-color) 62%, #000000);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: var(--dark-color);
line-height: 1.6;
background: #FFFFFF;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.site-header {
background: white;
box-shadow: var(--shadow);
padding: 15px 0;
position: sticky;
top: 0;
z-index: 1000;
}
.site-header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.site-logo img {
height: 50px;
width: auto;
}
.site-nav a {
color: var(--dark-color);
text-decoration: none;
padding: 10px 20px;
border-radius: 5px;
transition: var(--transition);
font-weight: 600;
}
.site-nav a:hover {
background: var(--primary-light);
color: var(--primary-texte);
}
body {
color: var(--ink);
-webkit-text-size-adjust: 100%;
text-rendering: optimizeSpeed;
}
h1, h2, h3 {
letter-spacing: -0.02em;
line-height: 1.2;
}
.site-header {
box-shadow: none;
border-bottom: 1px solid var(--line);
padding: 8px 0;
}
.site-logo img {
height: 40px;
}
.site-nav {
display: flex;
align-items: center;
gap: 4px;
}
.site-nav a {
padding: 10px 14px;
border-radius: var(--btn-radius);
transition: background-color .15s;
}
.site-nav a:hover {
background: var(--light-bg);
color: var(--ink);
}
.site-nav a.open-devis-modal:hover {
background: var(--ink) !important;
color: #FFF;
}
.fiche-num {
display: none;
}
.breadcrumbs {
background: var(--light-bg);
padding: 15px 0;
margin-bottom: 30px;
}
.breadcrumbs ul {
list-style: none;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.breadcrumbs li:not(:last-child)::after {
content: "›";
margin-left: 10px;
color: var(--gray-dark);
}
.breadcrumbs a {
color: var(--primary-texte);
text-decoration: none;
}
.breadcrumbs a:hover {
text-decoration: underline;
}
.section {
padding: 40px 0;
}
.j1zt5b h2 {
color: var(--primary-texte);
font-size: 2rem;
margin-top: 50px;
margin-bottom: 25px;
padding-bottom: 15px;
color: var(--ink);
font-size: 1.6rem;
border-bottom: none;
padding-bottom: 0;
}
.j1zt5b h2:first-child {
margin-top: 40px;
}
.j1zt5b h3 {
color: var(--secondary-texte);
font-size: 1.5rem;
margin-top: 35px;
margin-bottom: 20px;
color: var(--ink);
font-size: 1.25rem;
padding-left: 0;
border-left: none;
}
.j1zt5b p {
line-height: 1.8;
margin-bottom: 25px;
}
.j1zt5b p.intro,
.j1zt5b p.highlight {
font-size: 1.1rem;
padding: 25px;
margin-bottom: 30px;
background: var(--tint);
border: none;
border-radius: var(--card-radius);
color: var(--ink);
}
.j1zt5b p.cta {
font-size: 1.1rem;
font-weight: 600;
color: var(--secondary-texte);
margin-bottom: 30px;
}
.j1zt5b p.subtitle {
font-weight: 600;
margin-bottom: 15px;
}
.j1zt5b ul,
.j1zt5b ol {
margin-bottom: 30px;
padding-left: 20px;
}
.j1zt5b ul li,
.j1zt5b ol li {
margin-bottom: 15px;
padding-left: 10px;
line-height: 1.7;
}
.j1zt5b ul li strong,
.j1zt5b ol li strong {
color: var(--primary-texte);
}
@media (max-width: 768px) {
.j1zt5b h2 {
font-size: 1.5rem;
margin-top: 35px;
margin-bottom: 20px;
}
.j1zt5b h2:first-child {
margin-top: 25px;
}
.j1zt5b h3 {
font-size: 1.25rem;
margin-top: 25px;
}
.j1zt5b p.intro,
.j1zt5b p.highlight {
font-size: 1rem;
padding: 20px;
}
.j1zt5b p.cta {
font-size: 1rem;
}
.container {
padding: 0 15px;
}
.site-header .container {
flex-direction: column;
gap: 15px;
}
.hero-region h1,
.hero-departement h1,
.hero-ville h1 {
font-size: 1.5rem !important;
margin-bottom: 20px !important;
line-height: 1.3 !important;
}
.hero-region,
.hero-departement,
.hero-ville {
padding: 40px 0 !important;
}
.hero-region .cta-button,
.hero-departement .cta-button,
.hero-ville .cta-button {
font-size: 1.1rem !important;
padding: 15px 30px !important;
}
.hero-region p,
.hero-departement p,
.hero-ville p {
font-size: 0.9rem !important;
}
.section h1 {
font-size: 1.75rem !important;
line-height: 1.3 !important;
}
.section p {
font-size: 1rem !important;
}
.section > .container > div > div {
padding: 25px 20px !important;
}
.section.dpe-block > .container > div > div {
padding: 0 !important;
}
#searchForm > div {
position: relative !important;
}
#searchInput {
padding: 15px 20px !important;
font-size: 1rem !important;
margin-bottom: 10px !important;
}
#searchForm button[type="submit"] {
position: static !important;
transform: none !important;
width: 100% !important;
padding: 15px 25px !important;
border-radius: 50px !important;
margin-top: 10px !important;
}
#searchForm button[type="submit"]:hover {
transform: scale(1.02) !important;
}
}
body.hl3286 .hero-ville,
body.hl3286 .hero-departement,
body.hl3286 .hero-region {
background: var(--hero-gradient) !important;
text-align: left !important;
padding: 70px 0 !important;
}
body.hl3286 .hero-ville h1,
body.hl3286 .hero-departement h1,
body.hl3286 .hero-region h1 {
font-size: 2.6rem !important;
letter-spacing: -0.02em;
}
body.hl3286 .cta-button {
border-radius: var(--btn-radius) !important;
box-shadow: none !important;
border: 2px solid white !important;
}
body.hl3286 .cta-button:hover {
box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
}
body.hl3286 .installer-card {
border-left: none !important;
border-top: 4px solid var(--primary-color) !important;
border-radius: var(--card-radius) !important;
}
body.hl3286 .installer-card:hover {
transform: translateY(-4px) !important;
transform: translateX(0) !important;
}
body.hl3286 .stations-stat, body.hl3286 .dpe-stat {
border: 2px solid #e0e0e0 !important;
border-top: 4px solid var(--primary-color) !important;
border-radius: var(--card-radius) !important;
background: white !important;
}
body.hl3286 .ville-card {
border-left: none !important;
border: 2px solid #e0e0e0 !important;
border-radius: var(--card-radius) !important;
}
body.hl3286 .ville-card:hover {
border-color: var(--primary-color) !important;
background: linear-gradient(135deg, rgba(46,204,113,0.03), rgba(39,174,96,0.06)) !important;
}
body.hl3286 .dept-card {
border-radius: var(--card-radius) !important;
border: none !important;
box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
}
body.hl3286 .dept-card:hover {
box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important;
border-color: transparent !important;
}
body.hl3286 .dept-link,
body.hl3286 .region-link {
border-radius: var(--card-radius) !important;
background: var(--primary-color) !important;
}
body.hl3286 .section h2 {
position: relative;
display: inline-block;
}
body.hl3286 #searchInput {
border-radius: var(--btn-radius) !important;
}
body.hl3286 #searchForm button[type="submit"] {
border-radius: var(--btn-radius) !important;
}
body.hl3286 #autocompleteResults {
border-radius: var(--card-radius) !important;
}
@media (max-width: 768px) {
body.hl3286 .hero-ville,
body.hl3286 .hero-departement,
body.hl3286 .hero-region {
text-align: center !important;
}
}
body.h2ch2q .breadcrumbs {
background: var(--paper-alt);
border-bottom: 1px solid var(--paper-line);
}
body.h2ch2q .section[style*="background: white"] {
background: var(--paper-bg) !important;
}
body.h2ch2q .section[style*="background: #f8f9fa"] {
background: var(--paper-alt) !important;
}
body.h2ch2q .hero-ville,
body.h2ch2q .hero-departement,
body.h2ch2q .hero-region {
background: var(--hero-gradient) !important;
border-bottom: 5px solid var(--primary-color) !important;
padding: 90px 0 !important;
}
body.h2ch2q .hero-ville h1,
body.h2ch2q .hero-departement h1,
body.h2ch2q .hero-region h1 {
font-size: 2.9rem !important;
font-weight: 600 !important;
}
body.h2ch2q .cta-button {
border-radius: var(--btn-radius) !important;
box-shadow: 6px 6px 0 var(--primary-color) !important;
border: 1px solid rgba(22,32,43,0.15) !important;
}
body.h2ch2q .cta-button:hover {
transform: translate(3px, 3px) !important;
box-shadow: 2px 2px 0 var(--primary-color) !important;
}
body.h2ch2q .section > .container > div[style*="gradient"] {
border-radius: var(--card-radius) !important;
}
body.h2ch2q div:has(> #searchForm) {
border-radius: var(--card-radius) !important;
box-shadow: 10px 10px 0 rgba(22,32,43,0.25) !important;
}
body.h2ch2q .installer-card {
border-left: none !important;
border: 1px solid var(--paper-line) !important;
border-radius: var(--card-radius) !important;
box-shadow: 5px 5px 0 rgba(22,32,43,0.06) !important;
}
body.h2ch2q .installer-card:hover {
transform: none !important;
border-color: var(--primary-color) !important;
box-shadow: 5px 5px 0 var(--primary-color) !important;
}
body.h2ch2q .stations-stat, body.h2ch2q .dpe-stat {
background: var(--paper-alt) !important;
border: 1px solid var(--paper-line) !important;
border-top: 4px solid var(--primary-color) !important;
border-radius: var(--card-radius) !important;
box-shadow: 5px 5px 0 rgba(22,32,43,0.06) !important;
}
body.h2ch2q .ville-card {
border-left: none !important;
border: 1px solid var(--paper-line) !important;
border-radius: var(--card-radius) !important;
box-shadow: 5px 5px 0 rgba(22,32,43,0.06) !important;
}
body.h2ch2q .ville-card:hover {
transform: none !important;
border-color: var(--primary-color) !important;
box-shadow: 5px 5px 0 var(--primary-color) !important;
}
body.h2ch2q .dept-card {
border: 1px solid var(--paper-line) !important;
border-radius: var(--card-radius) !important;
box-shadow: none !important;
}
body.h2ch2q .dept-card:hover {
transform: none !important;
border-color: var(--ink) !important;
box-shadow: 6px 6px 0 rgba(22,32,43,0.10) !important;
}
body.h2ch2q .dept-link,
body.h2ch2q .region-link {
background: var(--ink) !important;
border-radius: var(--btn-radius) !important;
border-bottom: 3px solid var(--primary-color) !important;
box-shadow: none !important;
}
body.h2ch2q .dept-link:hover,
body.h2ch2q .region-link:hover {
transform: none !important;
background: var(--primary-color) !important;
border-bottom-color: var(--ink) !important;
box-shadow: 5px 5px 0 rgba(22,32,43,0.15) !important;
}
body.h2ch2q .section > .container > h2 {
padding-top: 18px;
border-top: 2px solid var(--ink);
}
body.h2ch2q #searchInput {
border-radius: var(--btn-radius) !important;
border-color: var(--paper-line) !important;
}
body.h2ch2q #searchForm button[type="submit"] {
border-radius: var(--btn-radius) !important;
}
body.h2ch2q #autocompleteResults {
border-radius: var(--card-radius) !important;
border: 1px solid var(--paper-line);
}
body.n28vbo section[style*="padding: 15px 0"] {
background: #FFFFFF !important;
padding: 10px 0 !important;
font-size: 0.85rem;
}
body.n28vbo [style*="color: var(--primary-texte)"]:not(.cta-button),
body.n28vbo .j1zt5b li strong {
color: var(--cta-bg) !important;
}
body.n28vbo [style*="color: var(--gray-dark)"][style*="opacity"] {
opacity: 1 !important;
}
body.n28vbo .section[style*="background: #f8f9fa"] {
background: var(--light-bg) !important;
}
body.n28vbo .section[style*="padding: 60px 0"] {
padding: 48px 0 !important;
}
body.n28vbo .section ~ .section {
content-visibility: auto;
contain-intrinsic-size: auto 600px;
}
body.n28vbo .hero-ville,
body.n28vbo .hero-departement,
body.n28vbo .hero-region,
body.n28vbo .section:has(#searchForm) {
background: var(--tint) !important;
color: var(--ink) !important;
text-align: left !important;
padding: 56px 0 48px !important;
border-bottom: 1px solid var(--line);
}
body.n28vbo .hero-ville .container,
body.n28vbo .hero-departement .container,
body.n28vbo .hero-region .container {
max-width: 860px;
}
body.n28vbo .hero-ville h1,
body.n28vbo .hero-departement h1,
body.n28vbo .hero-region h1,
body.n28vbo .section:has(#searchForm) h1 {
font-size: 2.6rem !important;
font-weight: 800 !important;
line-height: 1.15 !important;
margin-bottom: 14px !important;
color: var(--ink) !important;
}
body.n28vbo .hero-ville p,
body.n28vbo .hero-departement p,
body.n28vbo .hero-region p,
body.n28vbo .section:has(#searchForm) h1 + p {
color: var(--gray-dark) !important;
opacity: 1 !important;
font-size: 1.05rem !important;
}
body.n28vbo .hero-ville p { margin-bottom: 24px !important; }
body.n28vbo .hero-departement h1,
body.n28vbo .hero-region h1 {
margin-bottom: 24px !important;
}
body.n28vbo .section:has(#searchForm) > .container > div {
text-align: left !important;
max-width: 720px !important;
}
body.n28vbo .cta-button {
border-radius: var(--btn-radius) !important;
box-shadow: none !important;
transform: none !important;
font-size: 1.2rem !important;
padding: 16px 32px !important;
transition: background-color .15s !important;
}
body.n28vbo .cta-button[style*="background: white"] {
color: var(--ink) !important;
}
body.n28vbo .cta-button[style*="background: white"]:hover {
background: var(--tint) !important;
}
body.n28vbo .cta-button[style*="background: var(--primary-color)"],
body.n28vbo .hero-ville .cta-button,
body.n28vbo .hero-departement .cta-button,
body.n28vbo .hero-region .cta-button {
background: var(--cta-bg) !important;
color: #FFFFFF !important;
}
body.n28vbo .cta-button[style*="background: var(--primary-color)"]:hover,
body.n28vbo .hero-ville .cta-button:hover,
body.n28vbo .hero-departement .cta-button:hover,
body.n28vbo .hero-region .cta-button:hover {
background: var(--ink) !important;
}
body.n28vbo .section > .container > div[style*="gradient"] {
border-radius: var(--card-radius) !important;
padding: 32px 24px !important;
}
body.n28vbo .section:not([style*="gradient"]) > .container > h2,
body.n28vbo .section:not([style*="gradient"]) > .container > h2 + p {
text-align: left !important;
}
body.n28vbo .section > .container > h2 {
font-size: 1.85rem !important;
font-weight: 800;
margin-bottom: 10px !important;
}
body.n28vbo .section > .container > h2 + p {
font-size: 1rem !important;
margin-bottom: 24px !important;
}
body.n28vbo div:has(> .installer-card) {
gap: 10px !important;
}
body.n28vbo .installer-card {
padding: 16px 20px !important;
border: 1px solid var(--line) !important;
border-radius: var(--card-radius) !important;
box-shadow: none !important;
transform: none !important;
transition: border-color .15s !important;
}
body.n28vbo .installer-card:hover {
border-color: var(--primary-color) !important;
}
body.n28vbo .installer-card h3 {
font-size: 1.1rem !important;
color: var(--ink) !important;
margin-bottom: 6px !important;
}
body.n28vbo .installer-card h3 + div {
margin-bottom: 0 !important;
gap: 4px 14px !important;
font-size: 0.9rem !important;
}
body.n28vbo .installer-card > div > div {
min-width: 0 !important;
}
body.n28vbo .stations-stat, body.n28vbo .dpe-stat {
background: var(--tint) !important;
border: none !important;
border-radius: var(--card-radius) !important;
padding: 22px 16px !important;
}
body.n28vbo .stations-stat div:first-child, body.n28vbo .dpe-stat div:first-child {
color: var(--cta-bg) !important;
}
body.n28vbo .ville-card,
body.n28vbo .dept-card {
border: 1px solid var(--line) !important;
border-radius: var(--card-radius) !important;
box-shadow: none !important;
transform: none !important;
padding: 18px 20px !important;
}
body.n28vbo .ville-card:hover,
body.n28vbo .dept-card:hover {
border-color: var(--primary-color) !important;
box-shadow: none !important;
}
body.n28vbo .ville-card h3 {
font-size: 1.1rem !important;
margin-bottom: 6px !important;
}
body.n28vbo .dept-link,
body.n28vbo .region-link {
border-radius: var(--btn-radius) !important;
box-shadow: none !important;
transform: none !important;
}
body.n28vbo .dept-link:hover,
body.n28vbo .region-link:hover {
background: var(--cta-bg) !important;
}
body.n28vbo div:has(> #searchForm) {
border: 1px solid var(--line);
border-radius: var(--card-radius) !important;
box-shadow: none !important;
}
body.n28vbo #searchInput {
border-radius: var(--btn-radius) !important;
}
body.n28vbo #searchForm button[type="submit"] {
border-radius: var(--btn-radius) !important;
background: var(--cta-bg) !important;
}
body.n28vbo #autocompleteResults {
border-radius: var(--card-radius) !important;
border: 1px solid var(--line);
}
body.n28vbo .map-facade {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 260px;
margin-bottom: 20px;
border: 1px solid var(--line);
border-radius: var(--card-radius);
background-color: var(--tint);
background-image:
linear-gradient(rgba(15,23,42,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(15,23,42,0.05) 1px, transparent 1px);
background-size: 32px 32px;
color: var(--ink);
font: inherit;
cursor: pointer;
}
body.n28vbo .map-facade strong {
display: inline-block;
padding: 12px 22px;
border-radius: var(--btn-radius);
background: #FFFFFF;
border: 1px solid var(--line);
font-size: 1.05rem;
}
body.n28vbo .map-facade:hover strong {
border-color: var(--primary-color);
}
body.n28vbo .map-facade span {
color: var(--gray-dark);
font-size: 0.9rem;
}
body.n28vbo #map {
height: 460px !important;
box-shadow: none !important;
border: 1px solid var(--line);
}
@media (max-width: 768px) {
body.n28vbo .site-header {
padding: 8px 0;
}
body.n28vbo .site-header .container {
flex-direction: row;
gap: 12px;
}
body.n28vbo .site-logo img {
height: 36px;
}
body.n28vbo .site-nav a:not(.open-devis-modal) {
display: none;
}
body.n28vbo .site-nav a.open-devis-modal {
padding: 10px 14px;
font-size: 0.95rem;
white-space: nowrap;
}
body.n28vbo .hero-ville,
body.n28vbo .hero-departement,
body.n28vbo .hero-region,
body.n28vbo .section:has(#searchForm) {
padding: 28px 0 28px !important;
}
body.n28vbo .hero-ville h1,
body.n28vbo .hero-departement h1,
body.n28vbo .hero-region h1,
body.n28vbo .section:has(#searchForm) h1 {
font-size: 1.7rem !important;
margin-bottom: 10px !important;
}
body.n28vbo .hero-ville p,
body.n28vbo .hero-departement p,
body.n28vbo .hero-region p {
font-size: 0.95rem !important;
}
body.n28vbo .hero-ville p { margin-bottom: 18px !important; }
body.n28vbo .hero-departement h1,
body.n28vbo .hero-region h1 {
margin-bottom: 18px !important;
}
body.n28vbo .cta-button {
display: block !important;
width: 100%;
text-align: center;
font-size: 1.1rem !important;
padding: 16px 20px !important;
}
body.n28vbo .section[style*="padding: 60px 0"],
body.n28vbo .section[style*="padding: 80px 0"]:not(:has(#searchForm)) {
padding: 32px 0 !important;
}
body.n28vbo .section > .container > h2 {
font-size: 1.4rem !important;
}
body.n28vbo .section > .container > div[style*="gradient"] {
padding: 24px 18px !important;
}
body.n28vbo .section > .container > div[style*="gradient"] h3 {
font-size: 1.3rem !important;
}
body.n28vbo .section > .container > div[style*="gradient"] p {
margin-bottom: 18px !important;
}
body.n28vbo .section[style*="gradient"] h2 {
font-size: 1.5rem !important;
}
body.n28vbo .section[style*="gradient"] p {
margin-bottom: 20px !important;
}
body.n28vbo .installer-card {
padding: 14px 16px !important;
}
body.n28vbo .ville-card {
padding: 14px 16px !important;
}
body.n28vbo div:has(> .ville-card) {
gap: 10px !important;
}
body.n28vbo .stations-stat div:first-child, body.n28vbo .dpe-stat div:first-child {
font-size: 2.2rem !important;
}
body.n28vbo .map-facade {
height: 200px;
}
body.n28vbo #map {
height: 360px !important;
}
body.n28vbo div:has(> #searchForm) {
padding: 18px 16px !important;
}
body.n28vbo #searchForm button[type="submit"] {
border-radius: var(--btn-radius) !important;
}
}
body.cwaw3h {
background: var(--page-bg);
}
body.cwaw3h .site-header {
background: #FFFFFF;
}
body.cwaw3h section[style*="padding: 15px 0"] {
background: var(--page-bg) !important;
}
body.cwaw3h .section[style*="background: #f8f9fa"],
body.cwaw3h .section[style*="background: white"]:not(.j1zt5b) {
background: var(--page-bg) !important;
}
body.cwaw3h .dept-link,
body.cwaw3h .region-link {
background: #FFFFFF !important;
color: var(--ink) !important;
border: 1px solid var(--line);
}
body.cwaw3h .dept-link:hover,
body.cwaw3h .region-link:hover {
background: var(--cta-bg) !important;
color: var(--peps-fg) !important;
border-color: var(--cta-bg);
}
body.cwaw3h .hero-ville,
body.cwaw3h .hero-departement,
body.cwaw3h .hero-region,
body.cwaw3h .section:has(#searchForm) {
background: var(--page-bg) !important;
border-bottom: none;
}
body.cwaw3h [style*="color: var(--primary-texte)"]:not(.cta-button),
body.cwaw3h .j1zt5b li strong,
body.cwaw3h .stations-stat div:first-child, body.cwaw3h .dpe-stat div:first-child {
color: var(--peps-texte) !important;
}
body.cwaw3h .cta-button,
body.cwaw3h .cta-button[style*="background: white"],
body.cwaw3h .cta-button[style*="background: var(--primary-color)"],
body.cwaw3h .hero-ville .cta-button,
body.cwaw3h .hero-departement .cta-button,
body.cwaw3h .hero-region .cta-button {
background: var(--primary-color) !important;
color: var(--peps-fg) !important;
border-radius: var(--btn-radius) !important;
font-weight: 800 !important;
}
body.cwaw3h .cta-button:hover,
body.cwaw3h .cta-button[style*="background: white"]:hover,
body.cwaw3h .cta-button[style*="background: var(--primary-color)"]:hover,
body.cwaw3h .hero-ville .cta-button:hover,
body.cwaw3h .hero-departement .cta-button:hover,
body.cwaw3h .hero-region .cta-button:hover {
background: var(--ink) !important;
color: #FFFFFF !important;
}
body.cwaw3h .section > .container > div[style*="gradient"],
body.cwaw3h .section[style*="gradient"]:not(:has(#searchForm)) {
background: var(--primary-color) !important;
color: var(--peps-fg) !important;
}
body.cwaw3h .section > .container > div[style*="gradient"] *,
body.cwaw3h .section[style*="gradient"]:not(:has(#searchForm)) *:not(.cta-button) {
color: var(--peps-fg) !important;
}
body.cwaw3h .section > .container > div[style*="gradient"] .cta-button,
body.cwaw3h .section[style*="gradient"]:not(:has(#searchForm)) .cta-button {
background: var(--ink) !important;
color: #FFFFFF !important;
}
body.cwaw3h .section:has(#searchForm) h1,
body.cwaw3h .section:has(#searchForm) h1 + p {
color: var(--ink) !important;
}
body.cwaw3h #searchInput {
color: var(--ink) !important;
}
body.cwaw3h .installer-card {
background: #FFFFFF !important;
}
body.cwaw3h .fiche-num {
display: inline-grid;
place-items: center;
width: 28px;
height: 28px;
margin-right: 8px;
border-radius: 50%;
background: var(--primary-color);
color: var(--peps-fg);
font-size: 0.85rem;
font-weight: 800;
vertical-align: 2px;
font-variant-numeric: tabular-nums;
}
body.cwaw3h .installer-card span[style*="white-space: nowrap"] {
color: var(--peps-texte) !important;
}
body.cwaw3h .cta-inline {
display: grid;
gap: 12px;
padding: 18px 20px;
border-radius: var(--card-radius);
background: var(--primary-color);
color: var(--peps-fg);
}
body.cwaw3h .cta-inline p {
margin: 0;
font-weight: 700;
}
body.cwaw3h .cta-inline .cta-button {
background: var(--ink) !important;
color: #FFFFFF !important;
justify-self: start;
text-decoration: none;
}
body.cwaw3h .radar-rayons {
max-width: 440px;
margin: 0 auto;
padding: 12px 12px 10px;
background: #FFFFFF;
border: 1px solid var(--line);
border-radius: var(--card-radius);
}
body.cwaw3h .radar-rayons svg {
display: block;
width: 100%;
height: auto;
}
body.cwaw3h .radar-anneau { fill: #F7F9FB; stroke: #E3E7EC; }
body.cwaw3h .radar-anneau-proche { fill: var(--tint); stroke: #DDE2E8; }
body.cwaw3h .radar-km { fill: #7A8592; font-size: 9px; text-anchor: middle; }
body.cwaw3h .radar-centre { fill: var(--ink); }
body.cwaw3h .radar-point-loin { fill: #A9B3BE; }
body.cwaw3h .radar-point circle { fill: var(--primary-color); stroke: #FFFFFF; stroke-width: 1.5; }
body.cwaw3h .radar-point text { fill: var(--peps-fg); font-size: 8px; font-weight: 800; text-anchor: middle; }
body.cwaw3h .radar-legende {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 4px 16px;
margin: 6px 4px 0;
font-size: 0.85rem;
color: var(--gray-dark);
}
body.cwaw3h .radar-legende strong {
color: var(--peps-texte);
}
body.cwaw3h .radar-bloc {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 20px;
}
body.cwaw3h .radar-panneau {
display: none;
}
@media (min-width: 900px) {
body.cwaw3h .radar-bloc {
grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
align-items: stretch;
}
body.cwaw3h .radar-bloc .radar-rayons {
max-width: none;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
body.cwaw3h .radar-panneau {
display: flex;
flex-direction: column;
gap: 14px;
padding: 22px 24px;
background: #FFFFFF;
border: 1px solid var(--line);
border-radius: var(--card-radius);
}
body.cwaw3h .radar-panneau-titre {
margin: 0;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--gray-dark);
}
body.cwaw3h .radar-panneau ol {
list-style: none;
margin: 0;
padding: 0;
display: grid;
}
body.cwaw3h .radar-panneau li {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 9px 0;
border-bottom: 1px solid var(--line);
}
body.cwaw3h .radar-panneau li:last-child {
border-bottom: none;
}
body.cwaw3h .radar-panneau-num {
display: inline-grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--primary-color);
color: var(--peps-fg);
font-size: 0.8rem;
font-weight: 800;
}
body.cwaw3h .radar-panneau-nom {
font-weight: 650;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.cwaw3h .radar-panneau-km {
font-weight: 800;
color: var(--peps-texte);
font-variant-numeric: tabular-nums;
}
body.cwaw3h .radar-panneau .cta-button {
margin-top: auto;
text-align: center;
text-decoration: none;
font-size: 1.05rem !important;
padding: 14px 20px !important;
}
}
body.cwaw3h .site-nav a.open-devis-modal:hover {
background: var(--ink) !important;
color: #FFFFFF !important;
}
@media (max-width: 768px) {
body.cwaw3h .radar-section {
padding: 24px 0 !important;
}
body.cwaw3h .cta-inline .cta-button {
justify-self: stretch;
}
}
.icone {
flex: none;
vertical-align: -0.125em;
}
#searchInput.champ-loupe,
input.champ-loupe {
padding-left: 48px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: 16px center !important;
background-size: 20px 20px !important;
}
:focus-visible {
outline: 3px solid var(--dark-color) !important;
outline-offset: 2px !important;
box-shadow: 0 0 0 2px #FFFFFF !important;
}
.fil-ariane a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
section:has(> .container > .fil-ariane) {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
[style*="color: var(--gray-dark)"][style*="opacity"] {
opacity: 1 !important;
}
.j1zt5b a {
color: var(--primary-texte);
}
@media (max-width: 768px) {
.accueil .acc-liste-communes a,
.accueil .acc-liste-maj a,
.footer-col a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
}
:root {
--s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px;
--s6: 48px; --s7: 56px; --s8: 64px; --s10: 80px; --s12: 96px;
}
.aside-devis {
display: none;
}
.dept-recherche {
position: relative;
max-width: 560px;
margin: var(--s4) auto 0;
text-align: left;
}
.dept-recherche label {
display: block;
margin-bottom: var(--s1);
font-weight: 600;
}
.dept-recherche input {
width: 100%;
min-height: 52px;
padding: 12px 16px;
border: 2px solid rgba(0, 0, 0, 0.12);
border-radius: var(--btn-radius);
background-color: #FFFFFF;
color: var(--dark-color);
font-size: 1rem;
}
.dept-resultats {
position: absolute;
left: 0;
right: 0;
top: 100%;
z-index: 50;
margin-top: 6px;
overflow: hidden;
border-radius: var(--card-radius);
background: #FFFFFF;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.dept-resultats a {
display: flex;
align-items: center;
min-height: 48px;
padding: 0 var(--s2);
border-bottom: 1px solid #EEF0F2;
color: var(--dark-color);
text-decoration: none;
}
.dept-resultats a:hover {
background: var(--light-bg);
}
.dept-resultats p {
margin: 0;
padding: var(--s2);
color: var(--gray-dark);
}
.villes-liens {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 0 var(--s3);
margin: 0;
padding: 0;
list-style: none;
}
.villes-liens a {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--s1);
min-height: 44px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
color: var(--primary-texte);
font-weight: 600;
text-decoration: none;
}
.villes-liens a:hover {
text-decoration: underline;
}
.villes-liens span {
color: var(--gray-dark);
font-size: 0.9rem;
font-weight: 400;
}
.villes-liens-compact {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.villes-liens-compact a {
min-height: 36px;
font-weight: 500;
font-size: 0.95rem;
}
.tableau-entreprises table {
width: 100%;
border-collapse: collapse;
overflow: hidden;
border-radius: var(--card-radius);
background: #FFFFFF;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
font-size: 0.95rem;
}
.tableau-entreprises th,
.tableau-entreprises td {
padding: 12px 16px;
border-bottom: 1px solid #EEF0F2;
text-align: left;
vertical-align: top;
}
.tableau-entreprises thead th {
background: var(--light-bg);
color: var(--gray-dark);
font-size: 0.85rem;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.tableau-entreprises tbody th {
color: var(--dark-color);
font-weight: 600;
}
.tableau-detail,
.tableau-qualif {
display: block;
}
.tableau-detail {
color: var(--gray-dark);
font-size: 0.85rem;
font-weight: 400;
}
.tableau-qualif + .tableau-qualif {
margin-top: 4px;
}
.tableau-entreprises a {
color: var(--primary-texte);
white-space: nowrap;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.filtre-entreprises [hidden] {
display: none !important;
}
.filtre-sentinelle {
height: 1px;
}
.filtre-outils {
position: sticky;
top: 0;
z-index: 20;
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) auto;
column-gap: var(--s1);
align-items: end;
margin-bottom: var(--s1);
padding: var(--s2) 0 var(--s1);
background: inherit;
background-color: var(--light-bg);
}
.filtre-outils.colle {
box-shadow: 0 6px 12px -8px rgba(0, 0, 0, 0.25);
}
.filtre-ligne,
.filtre-panneau,
.filtre-ligne-panneau {
display: contents;
}
.filtre-puces,
.filtre-etat {
grid-column: 1 / -1;
}
.filtre-champ {
position: relative;
}
.filtre-champ label {
display: block;
margin-bottom: 4px;
font-size: 0.85rem;
font-weight: 600;
color: var(--dark-color);
}
.filtre-entreprises *,
.filtre-entreprises *::before,
.filtre-entreprises *::after {
box-sizing: border-box;
}
.filtre-champ input,
.filtre-champ select {
width: 100%;
min-height: 48px;
padding: 0 44px;
border: 2px solid rgba(0, 0, 0, 0.12);
border-radius: var(--btn-radius);
background: #FFFFFF;
color: var(--dark-color);
font: inherit;
font-size: 1rem;
}
.filtre-champ select {
padding: 0 12px;
}
.filtre-ico {
position: absolute;
left: 14px;
bottom: 14px;
width: 20px;
height: 20px;
color: var(--gray-dark);
pointer-events: none;
}
.filtre-effacer {
position: absolute;
right: 4px;
bottom: 4px;
width: 40px;
height: 40px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--gray-dark);
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
}
.filtre-kbd {
position: absolute;
right: 12px;
bottom: 13px;
padding: 0 5px;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
color: var(--gray-dark);
font-size: 0.75rem;
pointer-events: none;
}
.filtre-suggestions {
position: absolute;
left: 0;
right: 0;
top: 100%;
z-index: 30;
max-height: 300px;
margin: 4px 0 0;
padding: 4px;
overflow: auto;
list-style: none;
border-radius: var(--card-radius);
background: #FFFFFF;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}
.filtre-suggestions li {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
border-radius: 8px;
cursor: pointer;
}
.filtre-suggestions li[aria-selected="true"],
.filtre-suggestions li:hover {
background: var(--light-bg);
}
.filtre-cp {
color: var(--gray-dark);
font-size: 0.9rem;
}
.filtre-puces {
display: flex;
flex-wrap: wrap;
gap: var(--s1);
margin-top: var(--s2);
}
.filtre-puce {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 40px;
padding: 0 14px;
border: 1.5px solid rgba(0, 0, 0, 0.12);
border-radius: 999px;
background: #FFFFFF;
color: var(--dark-color);
font: inherit;
font-size: 0.92rem;
cursor: pointer;
}
.filtre-n {
color: var(--gray-dark);
font-size: 0.85rem;
}
.filtre-puce[aria-pressed="true"] {
border-color: var(--primary-bouton, var(--primary-color));
background: var(--primary-bouton, var(--primary-color));
color: var(--primary-fg, #FFFFFF);
}
.filtre-puce[aria-pressed="true"] .filtre-n {
color: inherit;
opacity: 0.85;
}
.filtre-etat {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: var(--s2);
margin-top: var(--s2);
}
.filtre-compte {
font-weight: 600;
color: var(--dark-color);
}
.filtre-reinit {
padding: 8px 0;
border: 0;
background: none;
color: var(--primary-texte);
font: inherit;
font-weight: 600;
text-decoration: underline;
cursor: pointer;
}
.filtre-bouton {
display: none;
}
.e-nom {
display: block;
}
.e-cp,
.e-vide {
color: var(--gray-dark);
}
.e-vide {
font-style: italic;
}
.e-distance {
display: block;
color: var(--primary-texte);
font-size: 0.88rem;
font-weight: 600;
}
.tableau-entreprises tbody tr:nth-child(even) {
background: color-mix(in srgb, var(--primary-color) 4%, #F7F8FA);
}
.filtre-js .tableau-entreprises tbody tr {
background: #FFFFFF;
}
.filtre-js .tableau-entreprises tbody tr.ligne-alt {
background: color-mix(in srgb, var(--primary-color) 4%, #F7F8FA);
}
.tableau-echeance {
color: #8A5300;
font-weight: 600;
}
.tableau-entreprises mark {
padding: 0 1px;
border-radius: 3px;
background: #FFE58A;
color: inherit;
}
.filtre-vide,
.filtre-plus {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: var(--s1);
margin-top: var(--s3);
}
.filtre-vide {
flex-direction: column;
align-items: center;
padding: var(--s4) var(--s3);
border-radius: var(--card-radius);
background: #FFFFFF;
text-align: center;
}
.filtre-vide p {
margin: 0;
}
.filtre-action {
min-height: 48px;
padding: 0 var(--s3);
border: 2px solid var(--primary-texte);
border-radius: var(--btn-radius);
background: #FFFFFF;
color: var(--primary-texte);
font: inherit;
font-weight: 700;
cursor: pointer;
}
@media (max-width: 768px) {
.filtre-outils {
display: block;
padding-top: var(--s1);
}
.filtre-ligne {
display: flex;
align-items: flex-end;
gap: var(--s1);
}
.filtre-champ-q {
flex: 1;
min-width: 0;
}
.filtre-champ-q label,
.filtre-kbd {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
.filtre-bouton {
display: inline-flex;
flex: none;
align-items: center;
gap: 6px;
min-height: 48px;
padding: 0 14px;
border: 2px solid rgba(0, 0, 0, 0.12);
border-radius: var(--btn-radius);
background: #FFFFFF;
color: var(--dark-color);
font: inherit;
font-weight: 600;
cursor: pointer;
}
.filtre-bouton[aria-expanded="true"] {
border-color: var(--primary-texte);
}
.filtre-nb {
display: inline-grid;
place-items: center;
min-width: 22px;
height: 22px;
border-radius: 999px;
background: var(--primary-bouton, var(--primary-color));
color: var(--primary-fg, #FFFFFF);
font-size: 0.8rem;
}
.filtre-panneau {
display: none;
}
.filtre-panneau.ouvert {
display: block;
margin-top: var(--s2);
padding: var(--s2);
border-radius: var(--card-radius);
background: #FFFFFF;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.filtre-ligne-panneau {
display: grid;
gap: var(--s2);
}
.filtre-etat {
margin-top: var(--s1);
}
}
@media (max-width: 768px) {
.villes-liens {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 var(--s2);
}
.villes-liens span {
display: none;
}
.tableau-entreprises thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
.tableau-entreprises table,
.tableau-entreprises tbody,
.tableau-entreprises tr,
.tableau-entreprises th,
.tableau-entreprises td {
display: block;
width: 100%;
}
.tableau-entreprises tr {
padding: 12px 16px;
border-bottom: 1px solid #EEF0F2;
}
.tableau-entreprises th,
.tableau-entreprises td {
padding: 2px 0;
border: 0;
}
.tableau-entreprises td::before {
content: attr(data-libelle) " : ";
color: var(--gray-dark);
}
}
.guides-entete {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: var(--s1) var(--s3);
margin-bottom: var(--s3);
}
.guides-entete .titre-section {
margin: 0 !important;
text-align: left !important;
}
.guides-entete a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--primary-texte);
font-weight: 600;
}
.guides-grille {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--s3);
}
.guide-carte {
display: flex;
flex-direction: column;
gap: var(--s1);
padding: var(--s3);
border-radius: var(--card-radius);
background: #FFFFFF;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
color: var(--dark-color);
text-decoration: none;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.guide-carte:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
transform: translateY(-2px);
}
.guide-carte h2,
.guide-carte h3 {
margin: 0;
font-size: 1.15rem;
line-height: 1.35;
color: var(--dark-color);
}
.guide-carte p {
margin: 0;
color: var(--gray-dark);
font-size: 0.95rem;
line-height: 1.55;
}
.guide-categorie {
margin: 0;
color: var(--primary-texte);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.guide-lecture {
margin-top: auto;
color: var(--gray-dark);
font-size: 0.85rem;
}
.guide-carte {
overflow: hidden;
}
.guide-carte-image {
display: block;
width: calc(100% + 2 * var(--s3));
max-width: none;
height: auto;
aspect-ratio: 16 / 9;
margin: calc(-1 * var(--s3)) calc(-1 * var(--s3)) var(--s1);
object-fit: cover;
}
.guide-image {
display: block;
width: 100%;
height: auto;
margin: 0 0 var(--s3);
border-radius: var(--card-radius);
}
.guide-colonne {
max-width: 760px;
margin: 0 auto;
}
.guide-titre {
margin: 0 0 var(--s2);
color: var(--dark-color);
font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem);
line-height: 1.2;
}
.guide-chapo {
margin: 0 0 var(--s2);
color: var(--gray-dark);
font-size: 1.15rem;
line-height: 1.6;
}
.guide-colonne > .guide-lecture {
display: block;
margin-bottom: var(--s3);
}
.guide-contenu {
color: var(--dark-color);
font-size: 1.05rem;
line-height: 1.8;
}
.guide-devis {
margin-top: var(--s6);
padding: var(--s3);
border-radius: var(--card-radius);
background: var(--light-bg);
}
.guide-devis p {
margin: 0 0 var(--s2);
font-weight: 600;
color: var(--dark-color);
}
.guide-devis .cta-button {
display: inline-flex;
align-items: center;
min-height: 48px;
padding: 0 var(--s3);
border-radius: var(--btn-radius);
background: var(--cta-bg, var(--primary-bouton));
color: var(--primary-fg);
font-weight: 700;
text-decoration: none;
}