:root {
--primary-color: #2ECC71;
--secondary-color: #27ae60;
--primary-texte: #19703E;
--secondary-texte: #19713E;
--primary-fg: #141A21;
--primary-bouton: #2ECC71;
--secondary-fg: #141A21;
--hero-fg: #FFFFFF;
--primary-clair: #2ECC71;
--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: 12px;
--card-radius: 12px;
--hero-gradient: linear-gradient(#0F172A, #0F172A);
--cta-gradient: linear-gradient(var(--cta-bg), var(--cta-bg));
--dark-color: #0F172A;
--gray-dark: #556070;
--light-bg: #F5F7F9;
--ink: #0F172A;
--line: #E3E7EC;
--tint: color-mix(in srgb, var(--primary-color) 9%, #FFFFFF);
--cta-bg: #1C7A44;
--primary-texte: var(--cta-bg);
--vra-accent: var(--cta-bg);
--vra-accent-fonce: color-mix(in srgb, var(--cta-bg) 68%, #000000);
--vra-tint-fort: color-mix(in srgb, var(--primary-color) 26%, #FFFFFF);
--vra-gris: #556070;
--vra-ambre: #B86A00;
--vra-ambre-texte: #8A4F00;
--vra-r: 12px;
}
* {
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;
}
.f2diyr 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;
}
.f2diyr h2:first-child {
margin-top: 40px;
}
.f2diyr 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;
}
.f2diyr p {
line-height: 1.8;
margin-bottom: 25px;
}
.f2diyr p.intro,
.f2diyr p.highlight {
font-size: 1.1rem;
padding: 25px;
margin-bottom: 30px;
background: var(--tint);
border: none;
border-radius: var(--card-radius);
color: var(--ink);
}
.f2diyr p.cta {
font-size: 1.1rem;
font-weight: 600;
color: var(--secondary-texte);
margin-bottom: 30px;
}
.f2diyr p.subtitle {
font-weight: 600;
margin-bottom: 15px;
}
.f2diyr ul,
.f2diyr ol {
margin-bottom: 30px;
padding-left: 20px;
}
.f2diyr ul li,
.f2diyr ol li {
margin-bottom: 15px;
padding-left: 10px;
line-height: 1.7;
}
.f2diyr ul li strong,
.f2diyr ol li strong {
color: var(--primary-texte);
}
@media (max-width: 768px) {
.f2diyr h2 {
font-size: 1.5rem;
margin-top: 35px;
margin-bottom: 20px;
}
.f2diyr h2:first-child {
margin-top: 25px;
}
.f2diyr h3 {
font-size: 1.25rem;
margin-top: 25px;
}
.f2diyr p.intro,
.f2diyr p.highlight {
font-size: 1rem;
padding: 20px;
}
.f2diyr 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.x10v67 .hero-ville,
body.x10v67 .hero-departement,
body.x10v67 .hero-region {
background: var(--hero-gradient) !important;
text-align: left !important;
padding: 70px 0 !important;
}
body.x10v67 .hero-ville h1,
body.x10v67 .hero-departement h1,
body.x10v67 .hero-region h1 {
font-size: 2.6rem !important;
letter-spacing: -0.02em;
}
body.x10v67 .cta-button {
border-radius: var(--btn-radius) !important;
box-shadow: none !important;
border: 2px solid white !important;
}
body.x10v67 .cta-button:hover {
box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
}
body.x10v67 .installer-card {
border-left: none !important;
border-top: 4px solid var(--primary-color) !important;
border-radius: var(--card-radius) !important;
}
body.x10v67 .installer-card:hover {
transform: translateY(-4px) !important;
transform: translateX(0) !important;
}
body.x10v67 .stations-stat, body.x10v67 .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.x10v67 .ville-card {
border-left: none !important;
border: 2px solid #e0e0e0 !important;
border-radius: var(--card-radius) !important;
}
body.x10v67 .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.x10v67 .dept-card {
border-radius: var(--card-radius) !important;
border: none !important;
box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
}
body.x10v67 .dept-card:hover {
box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important;
border-color: transparent !important;
}
body.x10v67 .dept-link,
body.x10v67 .region-link {
border-radius: var(--card-radius) !important;
background: var(--primary-color) !important;
}
body.x10v67 .section h2 {
position: relative;
display: inline-block;
}
body.x10v67 #searchInput {
border-radius: var(--btn-radius) !important;
}
body.x10v67 #searchForm button[type="submit"] {
border-radius: var(--btn-radius) !important;
}
body.x10v67 #autocompleteResults {
border-radius: var(--card-radius) !important;
}
@media (max-width: 768px) {
body.x10v67 .hero-ville,
body.x10v67 .hero-departement,
body.x10v67 .hero-region {
text-align: center !important;
}
}
body.y2es9a .breadcrumbs {
background: var(--paper-alt);
border-bottom: 1px solid var(--paper-line);
}
body.y2es9a .section[style*="background: white"] {
background: var(--paper-bg) !important;
}
body.y2es9a .section[style*="background: #f8f9fa"] {
background: var(--paper-alt) !important;
}
body.y2es9a .hero-ville,
body.y2es9a .hero-departement,
body.y2es9a .hero-region {
background: var(--hero-gradient) !important;
border-bottom: 5px solid var(--primary-color) !important;
padding: 90px 0 !important;
}
body.y2es9a .hero-ville h1,
body.y2es9a .hero-departement h1,
body.y2es9a .hero-region h1 {
font-size: 2.9rem !important;
font-weight: 600 !important;
}
body.y2es9a .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.y2es9a .cta-button:hover {
transform: translate(3px, 3px) !important;
box-shadow: 2px 2px 0 var(--primary-color) !important;
}
body.y2es9a .section > .container > div[style*="gradient"] {
border-radius: var(--card-radius) !important;
}
body.y2es9a div:has(> #searchForm) {
border-radius: var(--card-radius) !important;
box-shadow: 10px 10px 0 rgba(22,32,43,0.25) !important;
}
body.y2es9a .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.y2es9a .installer-card:hover {
transform: none !important;
border-color: var(--primary-color) !important;
box-shadow: 5px 5px 0 var(--primary-color) !important;
}
body.y2es9a .stations-stat, body.y2es9a .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.y2es9a .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.y2es9a .ville-card:hover {
transform: none !important;
border-color: var(--primary-color) !important;
box-shadow: 5px 5px 0 var(--primary-color) !important;
}
body.y2es9a .dept-card {
border: 1px solid var(--paper-line) !important;
border-radius: var(--card-radius) !important;
box-shadow: none !important;
}
body.y2es9a .dept-card:hover {
transform: none !important;
border-color: var(--ink) !important;
box-shadow: 6px 6px 0 rgba(22,32,43,0.10) !important;
}
body.y2es9a .dept-link,
body.y2es9a .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.y2es9a .dept-link:hover,
body.y2es9a .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.y2es9a .section > .container > h2 {
padding-top: 18px;
border-top: 2px solid var(--ink);
}
body.y2es9a #searchInput {
border-radius: var(--btn-radius) !important;
border-color: var(--paper-line) !important;
}
body.y2es9a #searchForm button[type="submit"] {
border-radius: var(--btn-radius) !important;
}
body.y2es9a #autocompleteResults {
border-radius: var(--card-radius) !important;
border: 1px solid var(--paper-line);
}
body.fblmgu section[style*="padding: 15px 0"] {
background: #FFFFFF !important;
padding: 10px 0 !important;
font-size: 0.85rem;
}
body.fblmgu [style*="color: var(--primary-texte)"]:not(.cta-button),
body.fblmgu .f2diyr li strong {
color: var(--cta-bg) !important;
}
body.fblmgu [style*="color: var(--gray-dark)"][style*="opacity"] {
opacity: 1 !important;
}
body.fblmgu .section[style*="background: #f8f9fa"] {
background: var(--light-bg) !important;
}
body.fblmgu .section[style*="padding: 60px 0"] {
padding: 48px 0 !important;
}
body.fblmgu .section ~ .section {
content-visibility: auto;
contain-intrinsic-size: auto 600px;
}
body.fblmgu .hero-ville,
body.fblmgu .hero-departement,
body.fblmgu .hero-region,
body.fblmgu .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.fblmgu .hero-ville .container,
body.fblmgu .hero-departement .container,
body.fblmgu .hero-region .container {
max-width: 860px;
}
body.fblmgu .hero-ville h1,
body.fblmgu .hero-departement h1,
body.fblmgu .hero-region h1,
body.fblmgu .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.fblmgu .hero-ville p,
body.fblmgu .hero-departement p,
body.fblmgu .hero-region p,
body.fblmgu .section:has(#searchForm) h1 + p {
color: var(--gray-dark) !important;
opacity: 1 !important;
font-size: 1.05rem !important;
}
body.fblmgu .hero-ville p { margin-bottom: 24px !important; }
body.fblmgu .hero-departement h1,
body.fblmgu .hero-region h1 {
margin-bottom: 24px !important;
}
body.fblmgu .section:has(#searchForm) > .container > div {
text-align: left !important;
max-width: 720px !important;
}
body.fblmgu .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.fblmgu .cta-button[style*="background: white"] {
color: var(--ink) !important;
}
body.fblmgu .cta-button[style*="background: white"]:hover {
background: var(--tint) !important;
}
body.fblmgu .cta-button[style*="background: var(--primary-color)"],
body.fblmgu .hero-ville .cta-button,
body.fblmgu .hero-departement .cta-button,
body.fblmgu .hero-region .cta-button {
background: var(--cta-bg) !important;
color: #FFFFFF !important;
}
body.fblmgu .cta-button[style*="background: var(--primary-color)"]:hover,
body.fblmgu .hero-ville .cta-button:hover,
body.fblmgu .hero-departement .cta-button:hover,
body.fblmgu .hero-region .cta-button:hover {
background: var(--ink) !important;
}
body.fblmgu .section > .container > div[style*="gradient"] {
border-radius: var(--card-radius) !important;
padding: 32px 24px !important;
}
body.fblmgu .section:not([style*="gradient"]) > .container > h2,
body.fblmgu .section:not([style*="gradient"]) > .container > h2 + p {
text-align: left !important;
}
body.fblmgu .section > .container > h2 {
font-size: 1.85rem !important;
font-weight: 800;
margin-bottom: 10px !important;
}
body.fblmgu .section > .container > h2 + p {
font-size: 1rem !important;
margin-bottom: 24px !important;
}
body.fblmgu div:has(> .installer-card) {
gap: 10px !important;
}
body.fblmgu .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.fblmgu .installer-card:hover {
border-color: var(--primary-color) !important;
}
body.fblmgu .installer-card h3 {
font-size: 1.1rem !important;
color: var(--ink) !important;
margin-bottom: 6px !important;
}
body.fblmgu .installer-card h3 + div {
margin-bottom: 0 !important;
gap: 4px 14px !important;
font-size: 0.9rem !important;
}
body.fblmgu .installer-card > div > div {
min-width: 0 !important;
}
body.fblmgu .stations-stat, body.fblmgu .dpe-stat {
background: var(--tint) !important;
border: none !important;
border-radius: var(--card-radius) !important;
padding: 22px 16px !important;
}
body.fblmgu .stations-stat div:first-child, body.fblmgu .dpe-stat div:first-child {
color: var(--cta-bg) !important;
}
body.fblmgu .ville-card,
body.fblmgu .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.fblmgu .ville-card:hover,
body.fblmgu .dept-card:hover {
border-color: var(--primary-color) !important;
box-shadow: none !important;
}
body.fblmgu .ville-card h3 {
font-size: 1.1rem !important;
margin-bottom: 6px !important;
}
body.fblmgu .dept-link,
body.fblmgu .region-link {
border-radius: var(--btn-radius) !important;
box-shadow: none !important;
transform: none !important;
}
body.fblmgu .dept-link:hover,
body.fblmgu .region-link:hover {
background: var(--cta-bg) !important;
}
body.fblmgu div:has(> #searchForm) {
border: 1px solid var(--line);
border-radius: var(--card-radius) !important;
box-shadow: none !important;
}
body.fblmgu #searchInput {
border-radius: var(--btn-radius) !important;
}
body.fblmgu #searchForm button[type="submit"] {
border-radius: var(--btn-radius) !important;
background: var(--cta-bg) !important;
}
body.fblmgu #autocompleteResults {
border-radius: var(--card-radius) !important;
border: 1px solid var(--line);
}
body.fblmgu .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.fblmgu .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.fblmgu .map-facade:hover strong {
border-color: var(--primary-color);
}
body.fblmgu .map-facade span {
color: var(--gray-dark);
font-size: 0.9rem;
}
body.fblmgu #map {
height: 460px !important;
box-shadow: none !important;
border: 1px solid var(--line);
}
@media (max-width: 768px) {
body.fblmgu .site-header {
padding: 8px 0;
}
body.fblmgu .site-header .container {
flex-direction: row;
gap: 12px;
}
body.fblmgu .site-logo img {
height: 36px;
}
body.fblmgu .site-nav a:not(.open-devis-modal) {
display: none;
}
body.fblmgu .site-nav a.open-devis-modal {
padding: 10px 14px;
font-size: 0.95rem;
white-space: nowrap;
}
body.fblmgu .hero-ville,
body.fblmgu .hero-departement,
body.fblmgu .hero-region,
body.fblmgu .section:has(#searchForm) {
padding: 28px 0 28px !important;
}
body.fblmgu .hero-ville h1,
body.fblmgu .hero-departement h1,
body.fblmgu .hero-region h1,
body.fblmgu .section:has(#searchForm) h1 {
font-size: 1.7rem !important;
margin-bottom: 10px !important;
}
body.fblmgu .hero-ville p,
body.fblmgu .hero-departement p,
body.fblmgu .hero-region p {
font-size: 0.95rem !important;
}
body.fblmgu .hero-ville p { margin-bottom: 18px !important; }
body.fblmgu .hero-departement h1,
body.fblmgu .hero-region h1 {
margin-bottom: 18px !important;
}
body.fblmgu .cta-button {
display: block !important;
width: 100%;
text-align: center;
font-size: 1.1rem !important;
padding: 16px 20px !important;
}
body.fblmgu .section[style*="padding: 60px 0"],
body.fblmgu .section[style*="padding: 80px 0"]:not(:has(#searchForm)) {
padding: 32px 0 !important;
}
body.fblmgu .section > .container > h2 {
font-size: 1.4rem !important;
}
body.fblmgu .section > .container > div[style*="gradient"] {
padding: 24px 18px !important;
}
body.fblmgu .section > .container > div[style*="gradient"] h3 {
font-size: 1.3rem !important;
}
body.fblmgu .section > .container > div[style*="gradient"] p {
margin-bottom: 18px !important;
}
body.fblmgu .section[style*="gradient"] h2 {
font-size: 1.5rem !important;
}
body.fblmgu .section[style*="gradient"] p {
margin-bottom: 20px !important;
}
body.fblmgu .installer-card {
padding: 14px 16px !important;
}
body.fblmgu .ville-card {
padding: 14px 16px !important;
}
body.fblmgu div:has(> .ville-card) {
gap: 10px !important;
}
body.fblmgu .stations-stat div:first-child, body.fblmgu .dpe-stat div:first-child {
font-size: 2.2rem !important;
}
body.fblmgu .map-facade {
height: 200px;
}
body.fblmgu #map {
height: 360px !important;
}
body.fblmgu div:has(> #searchForm) {
padding: 18px 16px !important;
}
body.fblmgu #searchForm button[type="submit"] {
border-radius: var(--btn-radius) !important;
}
}
body.t1ppbr { background: #FFFFFF; color: var(--ink); font-family: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 17px; line-height: 1.6; font-variant-numeric: tabular-nums; }
body.t1ppbr ::selection { background: var(--vra-tint-fort); }
body.t1ppbr :focus-visible { outline: 3px solid var(--vra-accent); outline-offset: 2px; border-radius: 4px; }
body.t1ppbr :where(.t10, .vra-tete, .vra-pied) a { color: var(--vra-accent); text-underline-offset: 3px; }
body.t1ppbr .t10 :where(h1, h2, h3, p, ul) { margin: 0; color: inherit; font-family: inherit; }
body.t1ppbr .t10 *, body.t1ppbr .vra-tete *, body.t1ppbr .vra-pied * { box-sizing: border-box; }
body.t1ppbr .vra-sr { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap }
body.t1ppbr .vra-cadre { max-width:1280px;margin:0 auto;padding:0 24px }
body.t1ppbr .vra-btn { display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:var(--vra-r);background:var(--vra-accent);color:#fff;font-weight:600;text-decoration:none;border:0;font-size:16px;cursor:pointer;transition:background .15s }
body.t1ppbr .vra-btn:hover { background:var(--vra-accent-fonce) }
body.t1ppbr .vra-tete { border-bottom:1px solid var(--line);background:#fff }
body.t1ppbr .vra-tete .vra-cadre { display:flex;align-items:center;gap:32px;min-height:72px }
body.t1ppbr .vra-logo { font-weight:700;font-size:21px;letter-spacing:-.01em;color:var(--ink);text-decoration:none;margin-right:auto }
body.t1ppbr .vra-logo b { color:var(--vra-accent);font-weight:700 }
body.t1ppbr .vra-nav { display:flex;gap:28px }
body.t1ppbr .vra-nav a { color:var(--ink);text-decoration:none;font-size:16px }
body.t1ppbr .vra-nav a:hover { color:var(--vra-accent) }
body.t1ppbr .vra-heros { padding:24px 0 32px }
body.t1ppbr .vra-fil { font-size:14px;color:var(--vra-gris);margin-bottom:14px }
body.t1ppbr .vra-fil a { color:var(--vra-gris) }
body.t1ppbr .vra-heros h1 { font-size:clamp(28px,3.3vw,42px);line-height:1.14;font-weight:700;letter-spacing:-.015em;max-width:24em;text-wrap:balance }
body.t1ppbr .vra-synthese { margin-top:14px;max-width:62ch;font-size:18px;color:#334155 }
body.t1ppbr .vra-synthese b { color:var(--ink) }
body.t1ppbr .vra-grille { display:grid;grid-template-columns:372px minmax(0,1fr);gap:40px;align-items:start;padding-bottom:56px }
body.t1ppbr .vra-col { position:sticky;top:20px;display:grid;gap:16px }
body.t1ppbr .vra-boussole { background:var(--tint);border-radius:var(--vra-r);padding:20px 16px 18px }
body.t1ppbr .vra-boussole h2 { font-size:19px;line-height:1.3;font-weight:700;padding:0 8px }
body.t1ppbr .vra-rose { position:relative;width:100%;max-width:340px;aspect-ratio:1;margin:6px auto 2px }
body.t1ppbr .vra-rose svg.fond { position:absolute;inset:0;width:100%;height:100% }
body.t1ppbr .vra-rose .anneau { fill:none;stroke:color-mix(in srgb,var(--vra-accent) 22%,transparent);stroke-width:1 }
body.t1ppbr .vra-rose .axes line { stroke:color-mix(in srgb,var(--vra-accent) 16%,transparent);stroke-width:1 }
body.t1ppbr .vra-rose .parts path { fill:color-mix(in srgb,var(--primary-color) 42%,#fff);transition:fill .18s }
body.t1ppbr .vra-rose .parts path.vu { fill:color-mix(in srgb,var(--primary-color) 75%,#fff) }
body.t1ppbr .vra-rose .parts path.actif { fill:var(--vra-accent) }
body.t1ppbr .vra-dir,
body.t1ppbr .vra-toutes { font:inherit;color:var(--ink);background:none;border:0;cursor:pointer;padding:0 }
body.t1ppbr .vra-dir { position:absolute;width:52px;height:48px;margin:-24px 0 0 -26px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;transition:background .15s,color .15s }
body.t1ppbr .vra-dir svg { display:none }
body.t1ppbr .vra-dir .l { font-size:13px;color:var(--vra-gris);font-weight:600 }
body.t1ppbr .vra-dir .n { font-size:20px;font-weight:700 }
body.t1ppbr .vra-dir:hover:not(:disabled) { background:#fff }
body.t1ppbr .vra-dir[aria-pressed=true] { background:var(--vra-accent);color:#fff }
body.t1ppbr .vra-dir[aria-pressed=true] .l { color:#fff }
body.t1ppbr .vra-dir:disabled { cursor:default;color:#7A8594 }
body.t1ppbr .vra-dir:disabled .l { color:#7A8594 }
body.t1ppbr .vra-dir:disabled .n { font-weight:400 }
body.t1ppbr .vra-dir-N { left:50%;top:7.5% }
body.t1ppbr .vra-dir-NE { left:82.5%;top:17.5% }
body.t1ppbr .vra-dir-E { left:92.5%;top:50% }
body.t1ppbr .vra-dir-SE { left:82.5%;top:82.5% }
body.t1ppbr .vra-dir-S { left:50%;top:92.5% }
body.t1ppbr .vra-dir-SO { left:17.5%;top:82.5% }
body.t1ppbr .vra-dir-O { left:7.5%;top:50% }
body.t1ppbr .vra-dir-NO { left:17.5%;top:17.5% }
body.t1ppbr .vra-toutes { position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;font-size:12px;color:var(--vra-gris);font-weight:600;transition:background .15s,color .15s }
body.t1ppbr .vra-toutes b { font-size:21px;color:var(--ink) }
body.t1ppbr .vra-toutes[aria-pressed=true] { background:var(--ink);color:#fff }
body.t1ppbr .vra-toutes[aria-pressed=true] b { color:#fff }
body.t1ppbr .vra-etat { padding:0 8px;font-size:15.5px;line-height:1.45;min-height:45px }
body.t1ppbr .vra-etat b { font-weight:700 }
body.t1ppbr .vra-devis { background:var(--ink);color:#fff;border-radius:var(--vra-r);padding:20px 24px 22px }
body.t1ppbr .vra-devis h2 { font-size:19px;line-height:1.3;font-weight:700 }
body.t1ppbr .vra-devis p { font-size:15px;line-height:1.45;margin:6px 0 14px;color:#CBD5E1 }
body.t1ppbr .vra-devis .vra-btn { width:100%;background:var(--primary-color);color:var(--primary-fg) }
body.t1ppbr .vra-devis .vra-btn:hover { background:#fff }
body.t1ppbr .vra-liste { min-width:0 }
body.t1ppbr .vra-entete,
body.t1ppbr .vra-ligne { display:grid;grid-template-columns:30px minmax(0,1fr) minmax(0,372px) 104px;column-gap:20px }
body.t1ppbr .vra-entete { padding:0 0 10px;font-size:14px;color:var(--vra-gris);border-bottom:2px solid var(--ink) }
body.t1ppbr .vra-entete .r { text-align:right }
body.t1ppbr .vra-ligne { padding:18px 0;border-bottom:1px solid var(--line);align-items:start }
body.t1ppbr .vra-ligne[hidden] { display:none }
body.t1ppbr .vra-no { font-size:15px;color:var(--vra-gris);padding-top:2px }
body.t1ppbr .vra-qui h3 { font-size:18px;line-height:1.3;font-weight:700;overflow-wrap:anywhere }
body.t1ppbr .vra-qui .ou { font-size:15.5px;line-height:1.4;margin-top:3px }
body.t1ppbr .vra-qui .ou b { color:var(--vra-accent);font-weight:600 }
body.t1ppbr .vra-qui .rs { font-size:14px;line-height:1.4;color:var(--vra-gris);margin-top:2px }
body.t1ppbr .vra-certs { display:grid;gap:10px }
body.t1ppbr .vra-cert { display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:12px;align-items:start }
body.t1ppbr .vra-pastille { font-size:14px;line-height:1.25;font-weight:600;background:var(--tint);color:var(--vra-accent-fonce);padding:4px 8px;border-radius:6px;justify-self:start }
body.t1ppbr .vra-val { min-width:0 }
body.t1ppbr .vra-val .date { display:block;font-size:15px;line-height:1.3;white-space:nowrap }
body.t1ppbr .vra-jauge { display:grid;grid-template-columns:repeat(12,1fr);gap:2px;margin-top:6px;max-width:132px }
body.t1ppbr .vra-jauge i { height:7px;border-radius:1px;background:var(--line) }
body.t1ppbr .vra-jauge i.on { background:var(--vra-accent) }
body.t1ppbr .vra-jauge.proche i.on { background:var(--vra-ambre) }
body.t1ppbr .vra-cert:has(.proche) .date { color:var(--vra-ambre-texte);font-weight:600 }
body.t1ppbr .vra-lien { font-size:14.5px;line-height:1.35 }
body.t1ppbr .vra-exact { font-size:14px;color:var(--vra-gris) }
body.t1ppbr .vra-exact summary { cursor:pointer;width:max-content }
body.t1ppbr .vra-exact summary:hover { color:var(--ink) }
body.t1ppbr .vra-exact ul { padding:6px 0 0 16px;line-height:1.4 }
body.t1ppbr .vra-dist { text-align:right }
body.t1ppbr .vra-dist .km { display:block;font-size:22px;line-height:1.1;font-weight:700;letter-spacing:-.01em }
body.t1ppbr .vra-dist .km .u { font-size:15px;font-weight:600 }
body.t1ppbr .vra-dist .cap { display:inline-flex;align-items:center;gap:5px;font-size:14.5px;color:var(--vra-accent);margin-top:5px;font-weight:600;white-space:nowrap }
body.t1ppbr .vra-dist .cap svg { width:14px;height:14px;flex:none }
body.t1ppbr .vra-plus { display:block;width:100%;min-height:52px;margin-top:16px;background:#fff;color:var(--vra-accent);border:1px solid var(--vra-accent);border-radius:var(--vra-r);font:600 16px Archivo,sans-serif;cursor:pointer;transition:background .15s,color .15s }
body.t1ppbr .vra-plus:hover { background:var(--vra-accent);color:#fff }
body.t1ppbr .vra-plus[hidden] { display:none }
body.t1ppbr .vra-pied-liste { margin-top:18px;font-size:15.5px;color:var(--vra-gris);max-width:70ch }
body.t1ppbr .vra-pied-liste+.vra-pied-liste { margin-top:8px }
body.t1ppbr .vra-carte { margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--tint);border-radius:var(--vra-r);padding:16px 20px }
body.t1ppbr .vra-carte p { font-size:16px;line-height:1.4 }
body.t1ppbr .vra-carte button { flex:none;background:#fff;color:var(--vra-accent);min-height:44px;padding:0 18px;border:1px solid var(--vra-accent);border-radius:var(--vra-r);font:600 15.5px Archivo,sans-serif;cursor:pointer }
body.t1ppbr .vra-carte button:hover { background:var(--vra-accent);color:#fff }
body.t1ppbr .vra-bande { background:#F5F7F9;padding:56px 0 }
body.t1ppbr .vra-bande h2,
body.t1ppbr .vra-texte h2 { font-size:clamp(23px,2.3vw,29px);line-height:1.22;font-weight:700;letter-spacing:-.01em;text-wrap:balance }
body.t1ppbr .vra-deux { display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:start }
body.t1ppbr .vra-chiffres { display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:24px 0 }
body.t1ppbr .vra-chiffres b { display:block;font-size:34px;line-height:1.1;font-weight:700 }
body.t1ppbr .vra-chiffres span { display:block;font-size:15px;line-height:1.35;color:var(--vra-gris);margin-top:6px }
body.t1ppbr .vra-dpe { display:flex;height:30px;border-radius:6px;overflow:hidden }
body.t1ppbr .vra-dpe span { min-width:18px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#0F172A;min-width:0 }
body.t1ppbr .vra-dpe span.c { color:#fff }
body.t1ppbr .vra-note { font-size:14.5px;line-height:1.45;color:var(--vra-gris);margin-top:12px }
body.t1ppbr .vra-deux p+p { margin-top:12px }
body.t1ppbr .vra-texte { padding:56px 0 }
body.t1ppbr .vra-texte-grille { display:grid;grid-template-columns:minmax(0,720px) 340px;justify-content:space-between;gap:48px }
body.t1ppbr .vra-rail .vra-devis { position:sticky;top:24px }
body.t1ppbr .vra-devis .titre { font-size:19px;line-height:1.3;font-weight:700;color:#fff;margin:0 }
body.t1ppbr .vra-devis .mention { font-size:13.5px;margin:12px 0 0;color:#CBD5E1 }
body.t1ppbr .vra-sign { display:flex;align-items:center;gap:12px;font-size:15px;color:var(--vra-gris);padding-bottom:20px;margin-bottom:28px;border-bottom:1px solid var(--line) }
body.t1ppbr .vra-sign i { width:40px;height:40px;border-radius:50%;background:var(--vra-tint-fort);display:grid;place-items:center;font-style:normal;font-weight:700;color:var(--vra-accent-fonce) }
body.t1ppbr .vra-sign b { color:var(--ink) }
body.t1ppbr .vra-texte h2 { margin:36px 0 10px }
body.t1ppbr .vra-texte h2:first-of-type { margin-top:0 }
body.t1ppbr .vra-texte ul { padding-left:20px }
body.t1ppbr .vra-texte li { margin-top:6px }
body.t1ppbr .vra-final { background:var(--vra-accent);color:#fff;padding:48px 0 }
body.t1ppbr .vra-final .vra-cadre { display:flex;align-items:center;justify-content:space-between;gap:32px }
body.t1ppbr .vra-final h2 { font-size:clamp(23px,2.4vw,30px);line-height:1.2;font-weight:700;max-width:24em }
body.t1ppbr .vra-final .vra-btn { background:#fff;color:var(--vra-accent-fonce);flex:none }
body.t1ppbr .vra-final .vra-btn:hover { background:var(--ink);color:#fff }
body.t1ppbr .vra-pied { background:var(--ink);color:#CBD5E1;padding:32px 0;font-size:15px }
body.t1ppbr .vra-pied a { color:#fff }
@media (max-width:1180px) {
body.t1ppbr .vra-grille { grid-template-columns:320px minmax(0,1fr);gap:28px }
body.t1ppbr .vra-texte-grille { grid-template-columns:minmax(0,1fr) 300px;gap:32px }
body.t1ppbr .vra-entete { display:none }
body.t1ppbr .vra-liste { border-top:2px solid var(--ink) }
body.t1ppbr .vra-ligne { grid-template-columns:30px minmax(0,1fr) 96px;column-gap:14px }
body.t1ppbr .vra-certs { grid-column:2/-1;grid-row:2;margin-top:12px }
body.t1ppbr .vra-dist { grid-column:3;grid-row:1 }
}
@media (max-width:820px) {
body.t1ppbr .vra-cadre { padding:0 16px }
body.t1ppbr .vra-nav,
body.t1ppbr .vra-tete .vra-btn { display:none }
body.t1ppbr .vra-tete .vra-cadre { min-height:60px }
body.t1ppbr .vra-heros { padding:14px 0 20px }
body.t1ppbr .vra-synthese { font-size:17px }
body.t1ppbr .vra-grille { display:flex;flex-direction:column;gap:20px;padding-bottom:40px }
body.t1ppbr .vra-col { display:contents }
body.t1ppbr .vra-boussole { order:1;padding:16px 12px 12px }
body.t1ppbr .vra-liste { order:2;width:100% }
body.t1ppbr .vra-devis { order:3;width:100% }
body.t1ppbr .vra-rose { max-width:none;aspect-ratio:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0 10px }
body.t1ppbr .vra-rose svg.fond { display:none }
body.t1ppbr .vra-dir,
body.t1ppbr .vra-toutes { position:static;margin:0;width:auto;height:58px;border-radius:10px;background:#fff;flex-direction:row;gap:8px }
body.t1ppbr .vra-dir svg { display:block;width:15px;height:15px;color:var(--vra-accent);flex:none }
body.t1ppbr .vra-dir[aria-pressed=true] svg { color:#fff }
body.t1ppbr .vra-dir .n { font-size:19px }
body.t1ppbr .vra-dir:disabled { background:none }
body.t1ppbr .vra-dir:disabled svg { color:#7A8594 }
body.t1ppbr .vra-toutes { background:var(--ink);color:#fff;font-size:13px }
body.t1ppbr .vra-toutes[aria-pressed=false] { background:#fff;color:var(--vra-gris) }
body.t1ppbr .vra-toutes b { font-size:19px;color:inherit }
body.t1ppbr .vra-toutes[aria-pressed=false] b { color:var(--ink) }
body.t1ppbr .vra-dir-NO { order:1 }
body.t1ppbr .vra-dir-N { order:2 }
body.t1ppbr .vra-dir-NE { order:3 }
body.t1ppbr .vra-dir-O { order:4 }
body.t1ppbr .vra-toutes { order:5 }
body.t1ppbr .vra-dir-E { order:6 }
body.t1ppbr .vra-dir-SO { order:7 }
body.t1ppbr .vra-dir-S { order:8 }
body.t1ppbr .vra-dir-SE { order:9 }
body.t1ppbr .vra-etat { min-height:0 }
body.t1ppbr .vra-ligne { grid-template-columns:minmax(0,1fr) 88px;column-gap:12px;padding:16px 0 }
body.t1ppbr .vra-no { display:none }
body.t1ppbr .vra-qui { grid-column:1;grid-row:1 }
body.t1ppbr .vra-dist { grid-column:2;grid-row:1 }
body.t1ppbr .vra-certs { grid-column:1/-1;grid-row:2 }
body.t1ppbr .vra-cert { grid-template-columns:minmax(0,1fr) 192px;column-gap:12px;row-gap:4px;align-items:center }
body.t1ppbr .vra-pastille { grid-column:1;grid-row:1 }
body.t1ppbr .vra-val { display:contents }
body.t1ppbr .vra-val .date { grid-column:2;grid-row:1;text-align:right }
body.t1ppbr .vra-jauge { grid-column:1;grid-row:2;margin-top:0;max-width:none }
body.t1ppbr .vra-lien { grid-column:2;grid-row:2;text-align:right }
body.t1ppbr .vra-certs { gap:12px;margin-top:10px }
body.t1ppbr .vra-carte { flex-direction:column;align-items:stretch }
body.t1ppbr .vra-bande,
body.t1ppbr .vra-texte { padding:40px 0 }
body.t1ppbr .vra-texte-grille { display:block }
body.t1ppbr .vra-rail { display:none }
body.t1ppbr .vra-deux { grid-template-columns:1fr;gap:32px }
body.t1ppbr .vra-chiffres { gap:12px }
body.t1ppbr .vra-chiffres b { font-size:28px }
body.t1ppbr .vra-final .vra-cadre { flex-direction:column;align-items:stretch }
}
@media (prefers-reduced-motion:reduce) {
}
body.t1ppbr .vra-dpe-seul { display:grid;grid-template-columns:4fr 8fr;gap:56px;align-items:start }
body.t1ppbr .vra-dpe-seul .vra-chiffres { margin-top:0 }
body.t1ppbr .vra-filtres { background:var(--tint);border-radius:var(--vra-r);padding:20px 24px 18px }
body.t1ppbr .vra-filtres h2 { font-size:19px;line-height:1.3;font-weight:700 }
body.t1ppbr .vra-champ { display:block;margin-top:14px }
body.t1ppbr .vra-champ span { display:block;font-size:15px;font-weight:600;margin-bottom:5px }
body.t1ppbr .vra-champ input,
body.t1ppbr .vra-champ select { width:100%;height:48px;border:1px solid #AEB8C4;border-radius:10px;background:#fff;padding:0 12px;font:400 16px Archivo,sans-serif;color:var(--ink) }
body.t1ppbr .vra-champ input:focus,
body.t1ppbr .vra-champ select:focus { outline:3px solid var(--vra-accent);outline-offset:0;border-color:var(--vra-accent) }
body.t1ppbr .vra-rayons { display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px }
body.t1ppbr .vra-rayons button { height:44px;border:0;border-radius:10px;background:#fff;font:600 15px Archivo,sans-serif;color:var(--ink);cursor:pointer }
body.t1ppbr .vra-rayons button:hover:not(:disabled) { background:var(--vra-tint-fort) }
body.t1ppbr .vra-rayons button[aria-pressed=true] { background:var(--vra-accent);color:#fff }
body.t1ppbr .vra-rayons button:disabled { color:#7A8594;background:none;cursor:default }
body.t1ppbr .vra-case { display:flex;align-items:center;gap:10px;min-height:40px;font-size:16px;cursor:pointer }
body.t1ppbr .vra-case input { width:20px;height:20px;accent-color:var(--vra-accent);margin:0 }
body.t1ppbr .vra-groupe { margin-top:12px;padding:0;border:0 }
body.t1ppbr .vra-groupe legend { font-size:15px;font-weight:600;padding:0 }
body.t1ppbr .vra-plus-filtres summary { display:none }
body.t1ppbr .vra-etat-liste { font-size:16px;margin-bottom:12px;min-height:26px }
body.t1ppbr .vra-etat-liste button { background:none;border:0;padding:0;font:inherit;color:var(--vra-accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer;margin-left:6px }
body.t1ppbr .vra-dep .vra-entete,
body.t1ppbr .vra-dep .vra-ligne { grid-template-columns:minmax(0,1fr) minmax(0,372px) }
body.t1ppbr .vra-dep.avec-dist .vra-entete,
body.t1ppbr .vra-dep.avec-dist .vra-ligne { grid-template-columns:minmax(0,1fr) minmax(0,372px) 104px }
body.t1ppbr .vra-dep:not(.avec-dist) .vra-dist,
body.t1ppbr .vra-dep:not(.avec-dist) .vra-entete .r { display:none }
body.t1ppbr .vra-vide { padding:32px 0;border-bottom:1px solid var(--line) }
body.t1ppbr .vra-vide[hidden] { display:none }
body.t1ppbr .vra-liens { display:flex;flex-wrap:wrap;gap:8px }
body.t1ppbr .vra-liens a { display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;background:var(--tint);color:var(--vra-accent-fonce);font-weight:600;font-size:15.5px;text-decoration:none;transition:background .15s }
body.t1ppbr .vra-liens a:hover { background:var(--vra-tint-fort) }
body.t1ppbr .vra-liens a small { font-weight:400;font-size:14px;margin-left:6px;color:var(--vra-gris) }
body.t1ppbr .vra-villes-tete { margin:0 auto 32px }
body.t1ppbr .vra-villes-tete h2 { font-size:19px;line-height:1.3;font-weight:700;margin-bottom:10px }
body.t1ppbr .vra-maillage { padding:56px 0;border-top:1px solid var(--line) }
body.t1ppbr .vra-maillage h2 { font-size:clamp(23px,2.3vw,29px);line-height:1.22;font-weight:700;letter-spacing:-.01em;margin-bottom:16px }
body.t1ppbr .vra-maillage .sous { margin:-8px 0 16px;color:var(--vra-gris);font-size:16px }
body.t1ppbr .vra-maillage>.vra-cadre+.vra-cadre { margin-top:44px }
body.t1ppbr .vra-regs .vra-entete,
body.t1ppbr .vra-reg { display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 72px 92px;column-gap:24px }
body.t1ppbr .vra-reg { padding:20px 0;border-bottom:1px solid var(--line);align-items:center }
body.t1ppbr .vra-reg h3 { font-size:19px;line-height:1.3;font-weight:700 }
body.t1ppbr .vra-reg h3 a { color:var(--ink);text-decoration:none }
body.t1ppbr .vra-reg h3 a:hover { color:var(--vra-accent);text-decoration:underline }
body.t1ppbr .vra-reg .code { font-size:15px;color:var(--vra-gris);font-weight:400;margin-left:4px }
body.t1ppbr .vra-reg .villes { font-size:15px;line-height:1.45;color:var(--vra-gris);margin-top:3px }
body.t1ppbr .vra-reg .villes a { color:var(--vra-accent) }
body.t1ppbr .vra-part { height:12px;background:var(--line);border-radius:2px;overflow:hidden }
body.t1ppbr .vra-part i { display:block;height:100%;background:var(--vra-accent) }
body.t1ppbr .vra-reg .n { font-size:22px;font-weight:700;text-align:right;line-height:1.1 }
body.t1ppbr .vra-reg .n small { display:none }
body.t1ppbr .vra-reg .c { font-size:15.5px;text-align:right;color:var(--vra-gris);line-height:1.25 }
body.t1ppbr .vra-regs .vra-entete span:nth-child(n+3) { text-align:right }
body.t1ppbr .vra-acc { background:var(--tint);padding:48px 0 56px }
body.t1ppbr .vra-acc-grille { display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center }
body.t1ppbr .vra-acc h1 { font-size:clamp(30px,3.9vw,50px);line-height:1.1;font-weight:700;letter-spacing:-.018em;text-wrap:balance }
body.t1ppbr .vra-acc .vra-synthese { margin-top:16px }
body.t1ppbr .vra-cherche { display:flex;gap:8px;margin-top:28px;max-width:600px }
body.t1ppbr .vra-cherche input { flex:1;min-width:0;height:56px;border:1px solid #AEB8C4;border-radius:var(--vra-r);padding:0 16px;font:400 18px Archivo,sans-serif;background:#fff;color:var(--ink) }
body.t1ppbr .vra-cherche input:focus { outline:3px solid var(--vra-accent);outline-offset:0 }
body.t1ppbr .vra-cherche .vra-btn { min-height:56px }
body.t1ppbr .vra-cherche-note { font-size:15px;color:var(--vra-gris);margin-top:8px }
body.t1ppbr .vra-exemple { display:block;background:#fff;border-radius:var(--vra-r);padding:18px 18px 16px;color:var(--ink);text-decoration:none;max-width:420px;justify-self:end;width:100%;transition:background .15s }
body.t1ppbr .vra-exemple .vra-rose { margin:2px auto 4px;max-width:300px }
body.t1ppbr .vra-exemple .vra-dir,
body.t1ppbr .vra-exemple .vra-toutes { cursor:inherit }
body.t1ppbr .vra-exemple span.vra-dir,
body.t1ppbr .vra-exemple span.vra-toutes { display:flex }
body.t1ppbr .vra-exemple .vra-toutes { background:var(--ink);color:#fff }
body.t1ppbr .vra-exemple .vra-toutes b { color:#fff }
body.t1ppbr .vra-exemple .titre { display:block;font-size:17px;font-weight:700;line-height:1.3 }
body.t1ppbr .vra-exemple .suite { display:block;font-size:15.5px;line-height:1.4;color:var(--vra-accent);font-weight:600;margin-top:4px }
body.t1ppbr .vra-exemple:hover .suite { text-decoration:underline;text-underline-offset:3px }
body.t1ppbr .vra-releve { border-bottom:1px solid var(--line);padding:32px 0 }
body.t1ppbr .vra-releve h2 { font-size:17px;font-weight:700;line-height:1.3 }
body.t1ppbr .vra-releve .vra-cadre { display:grid;grid-template-columns:3fr 2fr 3fr 3fr 2fr;gap:32px;align-items:start }
body.t1ppbr .vra-releve b { display:block;font-size:28px;line-height:1.1;font-weight:700 }
body.t1ppbr .vra-releve span { display:block;font-size:15px;line-height:1.35;color:var(--vra-gris);margin-top:5px }
body.t1ppbr .vra-releve .src { font-size:14.5px;color:var(--vra-gris);line-height:1.4;font-weight:400;margin-top:5px }
body.t1ppbr .vra-lire { padding:56px 0 8px }
body.t1ppbr .vra-lire h2 { font-size:clamp(23px,2.3vw,29px);line-height:1.22;font-weight:700;letter-spacing:-.01em }
body.t1ppbr .vra-lire-fiche { display:grid;grid-template-columns:minmax(0,1fr) 240px 150px;gap:32px;margin-top:20px;border-top:2px solid var(--ink);border-bottom:1px solid var(--line);padding:18px 0;align-items:start }
body.t1ppbr .vra-lire-fiche .nom { font-size:18px;font-weight:700;line-height:1.3 }
body.t1ppbr .vra-lire-fiche .ou { font-size:15.5px;line-height:1.4;margin-top:3px }
body.t1ppbr .vra-lire-notes { display:grid;grid-template-columns:minmax(0,1fr) 240px 150px;gap:32px;margin-top:12px }
body.t1ppbr .vra-lire-notes p { font-size:15.5px;line-height:1.45;color:var(--vra-gris) }
body.t1ppbr .vra-lire-notes b { color:var(--ink);font-weight:600 }
body.t1ppbr .vra-texte details { border-bottom:1px solid var(--line);padding:12px 0 }
body.t1ppbr .vra-texte summary { cursor:pointer;font-weight:600 }
body.t1ppbr .vra-texte details p { margin-top:8px }
@media (max-width:1180px) {
body.t1ppbr .vra-dep .vra-entete { display:none }
body.t1ppbr .vra-dep .vra-ligne,
body.t1ppbr .vra-dep.avec-dist .vra-ligne { grid-template-columns:minmax(0,1fr) 96px }
body.t1ppbr .vra-dep .vra-certs { grid-column:1/-1 }
body.t1ppbr .vra-dep .vra-dist { grid-column:2 }
body.t1ppbr .vra-dep:not(.avec-dist) .vra-ligne { grid-template-columns:minmax(0,1fr) }
body.t1ppbr .vra-regs .vra-entete,
body.t1ppbr .vra-reg { grid-template-columns:minmax(0,1fr) 72px 92px }
body.t1ppbr .vra-regs .vra-entete span:nth-child(2),
body.t1ppbr .vra-reg .vra-part { display:none }
body.t1ppbr .vra-releve .vra-cadre { grid-template-columns:1fr 1fr;gap:24px }
body.t1ppbr .vra-releve .vra-cadre>div:first-child { grid-column:1/-1 }
body.t1ppbr .vra-acc-grille { grid-template-columns:minmax(0,1fr) 340px;gap:32px }
}
@media (max-width:820px) {
body.t1ppbr .vra-dpe-seul { grid-template-columns:1fr;gap:20px }
body.t1ppbr .vra-filtres { order:1;padding:16px;width:100% }
body.t1ppbr .vra-plus-filtres summary { display:block;margin-top:12px;min-height:44px;line-height:44px;font-weight:600;cursor:pointer;color:var(--vra-accent) }
body.t1ppbr .vra-dep .vra-entete { display:none }
body.t1ppbr .vra-regs .vra-entete { display:none }
body.t1ppbr .vra-regs { order:2;width:100% }
body.t1ppbr .vra-regs { border-top:2px solid var(--ink) }
body.t1ppbr .vra-reg { grid-template-columns:minmax(0,1fr) auto;column-gap:12px }
body.t1ppbr .vra-reg .c { grid-column:1/-1;text-align:left;margin-top:4px }
body.t1ppbr .vra-reg .c .vra-sr { position:static;width:auto;height:auto;clip-path:none }
body.t1ppbr .vra-reg .n small { display:block;font-size:13.5px;font-weight:400;color:var(--vra-gris) }
body.t1ppbr .vra-maillage { padding:40px 0 }
body.t1ppbr .vra-acc { padding:24px 0 32px }
body.t1ppbr .vra-acc-grille { grid-template-columns:1fr;gap:28px }
body.t1ppbr .vra-exemple { justify-self:stretch;max-width:none }
body.t1ppbr .vra-exemple .vra-rose { aspect-ratio:1;display:block;max-width:300px }
body.t1ppbr .vra-exemple .vra-rose svg.fond { display:block }
body.t1ppbr .vra-exemple .vra-dir,
body.t1ppbr .vra-exemple .vra-toutes { position:absolute;width:52px;height:48px;margin:-24px 0 0 -26px;background:none;flex-direction:column;gap:0 }
body.t1ppbr .vra-exemple .vra-dir svg { display:none }
body.t1ppbr .vra-exemple .vra-toutes { width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--ink) }
body.t1ppbr .vra-cherche { flex-direction:column }
body.t1ppbr .vra-cherche input { flex:none;width:100% }
body.t1ppbr .vra-releve .vra-cadre { grid-template-columns:1fr 1fr }
body.t1ppbr .vra-lire { padding:40px 0 0 }
body.t1ppbr .vra-lire-fiche,
body.t1ppbr .vra-lire-notes { grid-template-columns:1fr;gap:12px }
}
body.t1ppbr .vra-logo { display: inline-flex; align-items: center; gap: 10px; }
body.t1ppbr .vra-logo img { max-height: 44px; width: auto; }
body.t1ppbr .vra-exemple .vra-rose { display: block; }
body.t1ppbr .vra-boussole h2 { text-wrap: balance; }
body.t1ppbr .vra-dir.vide .n { font-weight: 400; color: var(--vra-gris); }
body.t1ppbr .vra-dir.vide .l { color: var(--vra-gris); }
body.t1ppbr .vra-exemple .vra-toutes { font-size: 12px; }
body.t1ppbr .vra-carte button { width: auto; height: auto; display: inline-flex; align-items: center; }
body.t1ppbr .vra-devis .mention { font-size: 13.5px; margin: 12px 0 0; color: #CBD5E1; }
body.t1ppbr .vra-devis p.titre { font-size: 19px; line-height: 1.3; font-weight: 700; color: #FFFFFF; margin: 0; }
body.t1ppbr .vra-final p { margin-top: 8px; opacity: .95; }
body.t1ppbr .vra-corps h2 { margin: 36px 0 10px; }
body.t1ppbr .vra-corps h2:first-child { margin-top: 0; }
body.t1ppbr .vra-corps p + p { margin-top: 12px; }
body.t1ppbr .vra-corps ul { padding-left: 20px; margin: 10px 0; }
body.t1ppbr .vra-corps li { margin-top: 6px; }
body.t1ppbr .vra-corps details { border-bottom: 1px solid var(--line); padding: 12px 0; }
body.t1ppbr .vra-corps summary { cursor: pointer; font-weight: 600; }
body.t1ppbr .vra-corps details p { margin-top: 8px; }
body.t1ppbr .vra-sign { color: var(--vra-gris); font-size: 15px; padding-bottom: 16px; margin-bottom: 28px; border-bottom: 1px solid var(--line); display: block; }
body.t1ppbr .vra-sign:not(:has(*)) { display: none; }
body.t1ppbr .vra-sign > * { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; max-width: none !important; }
body.t1ppbr .vra-blocs .section { padding: 48px 0 !important; }
body.t1ppbr .vra-blocs .container, body.t1ppbr .vra-donnees .container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
body.t1ppbr .vra-donnees { padding: 0; }
body.t1ppbr .vra-donnees .section { background: transparent !important; padding: 48px 0 !important; }
body.t1ppbr .vra-donnees .section + .section { padding-top: 0 !important; }
body.t1ppbr .vra-donnees .dpe-stat { background: #FFFFFF !important; border-radius: var(--vra-r); box-shadow: none; }
body.t1ppbr .vra-recherche { position: relative; }
body.t1ppbr .vra-cherche-col { flex-direction: column; margin-top: 12px; }
body.t1ppbr .vra-cherche-col input { flex: none; width: 100%; height: 48px; font-size: 16px; }
body.t1ppbr .vra-cherche-col .vra-btn { min-height: 48px; }
body.t1ppbr .vra-suggestions { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin-top: 4px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
body.t1ppbr .vra-suggestions[hidden] { display: none; }
body.t1ppbr .vra-suggestions a { display: block; padding: 10px 14px; color: var(--ink); text-decoration: none; }
body.t1ppbr .vra-suggestions a:hover { background: var(--tint); }
body.t1ppbr .vra-tete .vra-btn, body.t1ppbr .vra-tete .vra-btn:hover { color: #FFFFFF; }
body.t1ppbr .vra-pied { padding: 48px 0; margin: 0; }
body.t1ppbr .vra-pied .vra-cadre { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
body.t1ppbr .vra-pied h2 { font-size: 17px; line-height: 1.3; font-weight: 700; color: #FFFFFF; margin: 0 0 10px; }
body.t1ppbr .vra-pied p { margin: 0; color: #CBD5E1; max-width: 46ch; }
body.t1ppbr .vra-pied ul { list-style: none; margin: 0; padding: 0; }
body.t1ppbr .vra-pied li { margin-top: 6px; }
body.t1ppbr .vra-pied a { color: #FFFFFF; }
@media (max-height: 880px) and (min-width: 821px) {
body.t1ppbr .vra-col-dep .vra-devis { display: none; }
}
@media (max-width: 820px) {
body.t1ppbr .vra-pied .vra-cadre { grid-template-columns: 1fr; gap: 24px; }
body.t1ppbr .vra-blocs .container, body.t1ppbr .vra-donnees .container { padding: 0 16px; }
}
.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;
}
.f2diyr 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;
}