:root {
--primary-color: #82dc1f;
--secondary-color: #23b18a;
--primary-texte: #416E10;
--secondary-texte: #17735A;
--primary-fg: #141A21;
--primary-bouton: #82DC1F;
--secondary-fg: #141A21;
--hero-fg: #141A21;
--primary-clair: #82DC1F;
--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: 50px;
--card-radius: 12px;
--hero-gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
--cta-gradient: linear-gradient(135deg, #576BC7 0%, #764ba2 100%);
}
* {
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);
}
.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;
}
.s9htp6 h2 {
color: var(--primary-texte);
font-size: 2rem;
margin-top: 50px;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 3px solid var(--primary-color);
}
.s9htp6 h2:first-child {
margin-top: 40px;
}
.s9htp6 h3 {
color: var(--secondary-texte);
font-size: 1.5rem;
margin-top: 35px;
margin-bottom: 20px;
padding-left: 15px;
border-left: 5px solid var(--secondary-color);
}
.s9htp6 p {
line-height: 1.8;
margin-bottom: 25px;
}
.s9htp6 p.intro,
.s9htp6 p.highlight {
font-size: 1.1rem;
padding: 25px;
margin-bottom: 30px;
background: linear-gradient(135deg, rgba(46, 204, 113, 0.05) 0%, rgba(39, 174, 96, 0.05) 100%);
border-left: 4px solid var(--primary-color);
border-radius: 8px;
}
.s9htp6 p.cta {
font-size: 1.1rem;
font-weight: 600;
color: var(--secondary-texte);
margin-bottom: 30px;
}
.s9htp6 p.subtitle {
font-weight: 600;
margin-bottom: 15px;
}
.s9htp6 ul,
.s9htp6 ol {
margin-bottom: 30px;
padding-left: 20px;
}
.s9htp6 ul li,
.s9htp6 ol li {
margin-bottom: 15px;
padding-left: 10px;
line-height: 1.7;
}
.s9htp6 ul li strong,
.s9htp6 ol li strong {
color: var(--primary-texte);
}
@media (max-width: 768px) {
.s9htp6 h2 {
font-size: 1.5rem;
margin-top: 35px;
margin-bottom: 20px;
}
.s9htp6 h2:first-child {
margin-top: 25px;
}
.s9htp6 h3 {
font-size: 1.25rem;
margin-top: 25px;
}
.s9htp6 p.intro,
.s9htp6 p.highlight {
font-size: 1rem;
padding: 20px;
}
.s9htp6 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.x1fp7w .hero-ville,
body.x1fp7w .hero-departement,
body.x1fp7w .hero-region {
background: var(--hero-gradient) !important;
text-align: left !important;
padding: 70px 0 !important;
}
body.x1fp7w .hero-ville h1,
body.x1fp7w .hero-departement h1,
body.x1fp7w .hero-region h1 {
font-size: 2.6rem !important;
letter-spacing: -0.02em;
}
body.x1fp7w .cta-button {
border-radius: var(--btn-radius) !important;
box-shadow: none !important;
border: 2px solid white !important;
}
body.x1fp7w .cta-button:hover {
box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
}
body.x1fp7w .installer-card {
border-left: none !important;
border-top: 4px solid var(--primary-color) !important;
border-radius: var(--card-radius) !important;
}
body.x1fp7w .installer-card:hover {
transform: translateY(-4px) !important;
transform: translateX(0) !important;
}
body.x1fp7w .stations-stat, body.x1fp7w .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.x1fp7w .ville-card {
border-left: none !important;
border: 2px solid #e0e0e0 !important;
border-radius: var(--card-radius) !important;
}
body.x1fp7w .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.x1fp7w .dept-card {
border-radius: var(--card-radius) !important;
border: none !important;
box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
}
body.x1fp7w .dept-card:hover {
box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important;
border-color: transparent !important;
}
body.x1fp7w .dept-link,
body.x1fp7w .region-link {
border-radius: var(--card-radius) !important;
background: var(--primary-color) !important;
}
body.x1fp7w .section h2 {
position: relative;
display: inline-block;
}
body.x1fp7w #searchInput {
border-radius: var(--btn-radius) !important;
}
body.x1fp7w #searchForm button[type="submit"] {
border-radius: var(--btn-radius) !important;
}
body.x1fp7w #autocompleteResults {
border-radius: var(--card-radius) !important;
}
@media (max-width: 768px) {
body.x1fp7w .hero-ville,
body.x1fp7w .hero-departement,
body.x1fp7w .hero-region {
text-align: center !important;
}
}
body.l2cwc7 .breadcrumbs {
background: var(--paper-alt);
border-bottom: 1px solid var(--paper-line);
}
body.l2cwc7 .section[style*="background: white"] {
background: var(--paper-bg) !important;
}
body.l2cwc7 .section[style*="background: #f8f9fa"] {
background: var(--paper-alt) !important;
}
body.l2cwc7 .hero-ville,
body.l2cwc7 .hero-departement,
body.l2cwc7 .hero-region {
background: var(--hero-gradient) !important;
border-bottom: 5px solid var(--primary-color) !important;
padding: 90px 0 !important;
}
body.l2cwc7 .hero-ville h1,
body.l2cwc7 .hero-departement h1,
body.l2cwc7 .hero-region h1 {
font-size: 2.9rem !important;
font-weight: 600 !important;
}
body.l2cwc7 .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.l2cwc7 .cta-button:hover {
transform: translate(3px, 3px) !important;
box-shadow: 2px 2px 0 var(--primary-color) !important;
}
body.l2cwc7 .section > .container > div[style*="gradient"] {
border-radius: var(--card-radius) !important;
}
body.l2cwc7 div:has(> #searchForm) {
border-radius: var(--card-radius) !important;
box-shadow: 10px 10px 0 rgba(22,32,43,0.25) !important;
}
body.l2cwc7 .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.l2cwc7 .installer-card:hover {
transform: none !important;
border-color: var(--primary-color) !important;
box-shadow: 5px 5px 0 var(--primary-color) !important;
}
body.l2cwc7 .stations-stat, body.l2cwc7 .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.l2cwc7 .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.l2cwc7 .ville-card:hover {
transform: none !important;
border-color: var(--primary-color) !important;
box-shadow: 5px 5px 0 var(--primary-color) !important;
}
body.l2cwc7 .dept-card {
border: 1px solid var(--paper-line) !important;
border-radius: var(--card-radius) !important;
box-shadow: none !important;
}
body.l2cwc7 .dept-card:hover {
transform: none !important;
border-color: var(--ink) !important;
box-shadow: 6px 6px 0 rgba(22,32,43,0.10) !important;
}
body.l2cwc7 .dept-link,
body.l2cwc7 .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.l2cwc7 .dept-link:hover,
body.l2cwc7 .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.l2cwc7 .section > .container > h2 {
padding-top: 18px;
border-top: 2px solid var(--ink);
}
body.l2cwc7 #searchInput {
border-radius: var(--btn-radius) !important;
border-color: var(--paper-line) !important;
}
body.l2cwc7 #searchForm button[type="submit"] {
border-radius: var(--btn-radius) !important;
}
body.l2cwc7 #autocompleteResults {
border-radius: var(--card-radius) !important;
border: 1px solid var(--paper-line);
}
.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;
}
.s9htp6 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;
}
}
[style*="background: var(--primary-color)"] {
color: var(--primary-fg) !important;
background: var(--primary-bouton) !important;
}
[style*="background: var(--primary-color)"]:hover {
filter: brightness(0.92);
}
[style*="background: var(--hero-gradient)"],
[style*="background: var(--hero-gradient)"] [style*="color: white"],
[style*="background: var(--hero-gradient)"] h1,
[style*="background: var(--hero-gradient)"] h2,
[style*="background: var(--hero-gradient)"] p {
color: var(--hero-fg) !important;
}
: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;
}
.titre-section {
font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem) !important;
line-height: 1.25;
margin-bottom: var(--s2) !important;
}
section.section[style*="padding: 60px 0"] {
padding: var(--s6) 0 !important;
}
@media (min-width: 1024px) {
section.section[style*="padding: 60px 0"] {
padding: var(--s8) 0 !important;
}
}
@media (max-width: 768px) {
.site-header .container {
flex-direction: row !important;
justify-content: space-between;
align-items: center;
gap: var(--s2) !important;
}
.site-logo img {
height: 40px;
width: auto;
}
.site-nav a:first-child {
display: none;
}
.titre-section,
.titre-section + p {
text-align: left !important;
}
}
@media (min-width: 1024px) {
.fiches-grille {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s3) !important;
}
}
.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;
}