/* =========================================================
OVEO Plomberie - Feuille de style principale
Couleurs reprises du logo : teal foncΓ© + teal clair
========================================================= */
:root {
--teal-dark: #0E5C5E;
--teal: #14746F;
--teal-light: #3DCFC8;
--teal-soft: #E6F7F5;
--accent: #FF6B35; /* CTA urgence */
--accent-dark: #E55520;
--text: #1A2A2C;
--text-soft: #4A5A5C;
--muted: #7B8A8C;
--bg: #ffffff;
--bg-soft: #F5FAFA;
--bg-dark: #0E5C5E;
--border: #DCE8E8;
--shadow-sm: 0 2px 6px rgba(14,92,94,0.08);
--shadow: 0 6px 18px rgba(14,92,94,0.10);
--shadow-lg: 0 12px 36px rgba(14,92,94,0.16);
--radius: 10px;
--radius-lg: 18px;
--container: 1200px;
--transition: 0.25s ease;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
color: var(--text);
background: var(--bg);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-dark); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--teal-light); }
h1, h2, h3, h4 { font-family: 'Poppins', 'Inter', sans-serif; color: var(--teal-dark); line-height: 1.25; font-weight: 700; }
h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1rem; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 1rem; }
h3 { font-size: 1.3rem; margin-bottom: 0.75rem; }
p { margin-bottom: 1rem; color: var(--text-soft); }
.container { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 5rem 0; }
.section-soft { background: var(--bg-soft); }
.section-dark { background: var(--bg-dark); color: #fff; }
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }
.section-dark p { color: rgba(255,255,255,0.85); }
.text-center { text-align: center; }
.eyebrow {
display: inline-block;
font-size: 0.85rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 2px;
color: var(--teal-light);
margin-bottom: 0.75rem;
}
/* ==================== Boutons ==================== */
.btn {
display: inline-flex; align-items: center; gap: 0.55rem;
padding: 0.95rem 1.8rem; border-radius: 50px;
font-weight: 600; font-size: 1rem;
border: 2px solid transparent;
cursor: pointer; transition: all var(--transition);
text-decoration: none;
}
.btn-primary { background: var(--teal-dark); color: #fff; }
.btn-primary:hover { background: var(--teal); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-outline { background: transparent; color: var(--teal-dark); border-color: var(--teal-dark); }
.btn-outline:hover { background: var(--teal-dark); color: #fff; }
.btn-light { background: #fff; color: var(--teal-dark); }
.btn-light:hover { background: var(--teal-soft); color: var(--teal-dark); }
/* ==================== Top bar ==================== */
.topbar {
background: var(--teal-dark); color: #fff;
font-size: 0.88rem;
}
.topbar .container {
display: flex; justify-content: space-between; align-items: center;
padding-top: 0.55rem; padding-bottom: 0.55rem; flex-wrap: wrap; gap: 0.5rem;
}
.topbar a { color: #fff; }
.topbar a:hover { color: var(--teal-light); }
.topbar-info { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.topbar-info span { display: inline-flex; align-items: center; gap: 0.35rem; }
/* ==================== Header / Nav ==================== */
.site-header {
background: #fff;
position: sticky; top: 0; z-index: 100;
box-shadow: var(--shadow-sm);
}
.site-header .container {
display: flex; justify-content: space-between; align-items: center;
padding-top: 0.9rem; padding-bottom: 0.9rem;
}
.brand { display: flex; align-items: center; gap: 0.85rem; }
.brand img { height: 56px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-weight: 800; font-size: 1.35rem; color: var(--teal-dark); letter-spacing: 1px; }
.brand-tag { font-size: 0.78rem; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.main-nav ul { display: flex; gap: 1.6rem; list-style: none; align-items: center; }
.main-nav a {
color: var(--text); font-weight: 500; font-size: 0.96rem;
padding: 0.5rem 0; position: relative;
}
.main-nav a:hover, .main-nav a.active { color: var(--teal-dark); }
.main-nav a.active::after, .main-nav a:hover::after,
.main-nav li.active > a::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
height: 3px; background: var(--teal-light); border-radius: 2px;
}
.main-nav li.active > a { color: var(--teal-dark); }
.nav-cta { background: var(--accent); color: #fff !important; padding: 0.6rem 1.2rem !important; border-radius: 50px; }
.nav-cta:hover { background: var(--accent-dark); }
.nav-cta::after { display: none !important; }
/* Dropdown for services */
.has-dropdown { position: relative; }
.dropdown {
position: absolute; top: 100%; left: -1rem;
background: #fff; min-width: 290px;
box-shadow: var(--shadow-lg); border-radius: var(--radius);
padding: 0.5rem 0; opacity: 0; visibility: hidden;
transform: translateY(8px); transition: all var(--transition);
list-style: none !important; flex-direction: column !important;
display: flex !important; gap: 0 !important;
}
.has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown li { width: 100%; }
.dropdown a {
display: block; padding: 0.7rem 1.2rem; font-size: 0.92rem;
color: var(--text); border-bottom: 1px solid var(--bg-soft);
}
.dropdown a:hover { background: var(--teal-soft); color: var(--teal-dark); }
.dropdown a::after { display: none !important; }
/* Item urgence dans le menu */
.dropdown a.urgence-item {
color: var(--accent);
font-weight: 600;
}
.dropdown a.urgence-item::before {
content: "π¨";
margin-right: 0.4rem;
}
.dropdown a.urgence-item:hover {
background: rgba(255,107,53,0.08);
color: var(--accent-dark);
}
/* Hamburger mobile */
.menu-toggle {
display: none; background: none; border: 0;
font-size: 1.6rem; cursor: pointer; color: var(--teal-dark);
}
/* ==================== Hero ==================== */
.hero {
background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal) 60%, var(--teal-light) 100%);
color: #fff; padding: 5.5rem 0 6rem;
position: relative; overflow: hidden;
}
.hero::before {
content: ""; position: absolute; right: -100px; top: -100px;
width: 500px; height: 500px; border-radius: 50%;
background: rgba(255,255,255,0.06);
}
.hero::after {
content: ""; position: absolute; left: -150px; bottom: -150px;
width: 400px; height: 400px; border-radius: 50%;
background: rgba(255,255,255,0.04);
}
.hero .container { position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; }
.hero h1 { color: #fff; font-size: clamp(2.2rem, 4.2vw, 3.4rem); margin-bottom: 1.2rem; }
.hero h1 span { color: var(--teal-light); }
.hero h1 span.flash {
color: #FFB800;
background: linear-gradient(180deg, transparent 60%, rgba(255,107,53,0.85) 60%, rgba(255,184,0,0.85) 100%);
padding: 0 .25em;
border-radius: 6px;
font-weight: 800;
text-shadow: 0 2px 10px rgba(255,107,53,0.5);
display: inline-block;
}
.hero p.lead { font-size: 1.15rem; color: rgba(255,255,255,0.92); margin-bottom: 2rem; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.hero-points { display: flex; gap: 2rem; flex-wrap: wrap; }
.hero-points span { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; }
.hero-points span::before { content: "β"; display: inline-grid; place-items: center; width: 24px; height: 24px; background: var(--teal-light); color: var(--teal-dark); border-radius: 50%; font-weight: 800; }
.hero-card {
background: rgba(255,255,255,0.08); backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.18);
border-radius: var(--radius-lg); padding: 2rem;
box-shadow: var(--shadow-lg);
}
.hero-card h3 { color: #fff; }
.hero-card .urgent-num {
display: block; font-size: 2rem; font-weight: 800;
color: var(--teal-light); margin: 0.5rem 0 1rem;
}
/* Smaller hero on inner pages */
.page-hero {
background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal) 100%);
color: #fff; padding: 4rem 0 3.5rem;
text-align: center;
}
.page-hero h1 { color: #fff; }
.page-hero .breadcrumb { color: rgba(255,255,255,0.8); font-size: 0.9rem; margin-top: 0.5rem; }
.page-hero .breadcrumb a { color: var(--teal-light); }
/* ==================== Cards ==================== */
.grid { display: grid; gap: 1.8rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card {
background: #fff; padding: 2rem; border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm); transition: all var(--transition);
border: 1px solid var(--border);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--teal-light); }
.card .icon {
width: 60px; height: 60px; border-radius: 14px;
display: grid; place-items: center;
background: var(--teal-soft); color: var(--teal-dark);
font-size: 1.6rem; margin-bottom: 1rem;
}
.card h3 { color: var(--teal-dark); }
.card .more { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; margin-top: 0.5rem; }
.card .more::after { content: "β"; transition: transform var(--transition); }
.card:hover .more::after { transform: translateX(4px); }
/* ==================== Stats ==================== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.stat { text-align: center; padding: 1rem; }
.stat .num { font-size: 2.6rem; font-weight: 800; color: var(--teal-light); display: block; line-height: 1; }
.stat .label { font-size: 0.95rem; color: rgba(255,255,255,0.85); margin-top: 0.5rem; display: block; }
/* ==================== Why us / features ==================== */
.feature {
display: flex; gap: 1.2rem; align-items: flex-start;
}
.feature .icon {
flex-shrink: 0; width: 50px; height: 50px; border-radius: 12px;
background: var(--teal-soft); color: var(--teal-dark);
display: grid; place-items: center; font-size: 1.4rem;
}
.feature h4 { color: var(--teal-dark); margin-bottom: 0.4rem; font-size: 1.1rem; }
/* ==================== Testimonials ==================== */
.testimonial {
background: #fff; padding: 2rem; border-radius: var(--radius-lg);
border: 1px solid var(--border);
position: relative;
}
.testimonial::before {
content: '"'; position: absolute; top: 0.5rem; left: 1rem;
font-size: 4rem; color: var(--teal-light); font-family: Georgia, serif; line-height: 1;
}
.testimonial p { font-style: italic; color: var(--text); margin-bottom: 1rem; padding-top: 1rem; }
.testimonial .author { font-weight: 700; color: var(--teal-dark); }
.testimonial .stars { color: #FFB400; margin-bottom: 0.5rem; }
/* ==================== CTA section ==================== */
.cta-band {
background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal) 100%);
color: #fff; padding: 4rem 0; text-align: center;
}
.cta-band h2 { color: #fff; margin-bottom: 1rem; }
.cta-band p { color: rgba(255,255,255,0.9); max-width: 700px; margin: 0 auto 2rem; }
.cta-band .btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
/* ==================== Form ==================== */
.form-wrap {
background: #fff; padding: 2.5rem; border-radius: var(--radius-lg);
box-shadow: var(--shadow);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.form-group label { font-weight: 600; color: var(--teal-dark); font-size: 0.92rem; }
.form-group input, .form-group select, .form-group textarea {
padding: 0.85rem 1rem; border: 2px solid var(--border);
border-radius: var(--radius); font-size: 1rem; font-family: inherit;
transition: border var(--transition);
background: #fff;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
outline: none; border-color: var(--teal-light);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.checkbox-group { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; color: var(--text-soft); }
.checkbox-group input { margin-top: 0.3rem; }
.urgency-radios {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.6rem;
}
.urgency-radios label {
display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
padding: 0.65rem 0.7rem; border: 2px solid var(--border);
border-radius: 50px; cursor: pointer; transition: all var(--transition);
font-weight: 500;
font-size: 0.88rem;
text-align: center;
white-space: nowrap;
}
.urgency-radios input { display: none; }
.urgency-radios input:checked + label,
.urgency-radios label:has(input:checked) {
border-color: var(--teal-dark); background: var(--teal-soft); color: var(--teal-dark);
}
.urgency-radios label.urgent { color: var(--accent); }
.urgency-radios input:checked + .urgent { background: var(--accent); color: #fff; border-color: var(--accent); }
/* ==================== Cities list (zones) ==================== */
.zones-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 0.75rem;
}
.zone-pill {
background: #fff; border: 1px solid var(--border);
padding: 0.75rem 1rem; border-radius: var(--radius);
font-size: 0.92rem; transition: all var(--transition);
display: flex; align-items: center; gap: 0.5rem;
}
.zone-pill:hover { background: var(--teal-soft); border-color: var(--teal-light); }
.zone-pill::before {
content: "π"; font-size: 0.95rem;
}
/* ==================== FAQ / accordion ==================== */
.faq-item {
background: #fff; border: 1px solid var(--border);
border-radius: var(--radius); margin-bottom: 0.75rem;
overflow: hidden;
}
.faq-item summary {
padding: 1.2rem 1.5rem; cursor: pointer; font-weight: 600;
color: var(--teal-dark); list-style: none;
display: flex; justify-content: space-between; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--teal-light); transition: transform var(--transition); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .answer { padding: 0 1.5rem 1.2rem; color: var(--text-soft); }
/* ==================== Footer ==================== */
.site-footer {
background: #0A4A4C; color: rgba(255,255,255,0.85);
padding: 4rem 0 1.5rem; font-size: 0.94rem;
}
.site-footer h4 { color: #fff; margin-bottom: 1.2rem; font-size: 1.05rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; margin-bottom: 2.5rem; }
.site-footer a { color: rgba(255,255,255,0.85); }
.site-footer a:hover { color: var(--teal-light); }
.site-footer ul { list-style: none; }
.site-footer ul li { margin-bottom: 0.55rem; }
.footer-brand img { height: 70px; margin-bottom: 1rem; filter: brightness(0) invert(1); }
.footer-brand p { color: rgba(255,255,255,0.75); }
.footer-contact-line { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.7rem; }
.footer-contact-line strong { color: #fff; display: block; font-size: 0.85rem; }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.15);
padding-top: 1.5rem; text-align: center; font-size: 0.85rem;
color: rgba(255,255,255,0.6);
}
/* ==================== Floating buttons ==================== */
.float-call {
position: fixed; bottom: 1.5rem; right: 1.5rem;
background: var(--accent); color: #fff;
width: 60px; height: 60px; border-radius: 50%;
display: grid; place-items: center;
box-shadow: 0 4px 20px rgba(255,107,53,0.5);
z-index: 90; font-size: 1.5rem;
animation: pulse 2s infinite;
}
.float-call:hover { background: var(--accent-dark); color: #fff; }
@keyframes pulse {
0%, 100% { box-shadow: 0 4px 20px rgba(255,107,53,0.5); }
50% { box-shadow: 0 4px 30px rgba(255,107,53,0.8); }
}
/* ==================== Two-column content ==================== */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.two-col img, .two-col .img-block {
border-radius: var(--radius-lg); box-shadow: var(--shadow);
background: linear-gradient(135deg, var(--teal-soft), #fff);
min-height: 320px; display: grid; place-items: center;
font-size: 8rem; color: var(--teal-light);
}
/* ==================== Service detail content ==================== */
.service-content { max-width: 800px; }
.service-content h2 { margin-top: 2rem; }
.service-content ul { margin: 1rem 0 1.5rem 1.5rem; color: var(--text-soft); }
.service-content ul li { margin-bottom: 0.5rem; }
.price-box {
background: var(--teal-soft); padding: 1.5rem;
border-left: 4px solid var(--teal-light);
border-radius: var(--radius); margin: 1.5rem 0;
}
.price-box strong { color: var(--teal-dark); }
/* ==================== Responsive ==================== */
@media (max-width: 980px) {
.grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
.stats { grid-template-columns: repeat(2, 1fr); }
.hero-grid, .two-col { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
.form-row { grid-template-columns: 1fr; }
.menu-toggle { display: block; }
.main-nav {
position: absolute; top: 100%; left: 0; right: 0;
background: #fff; box-shadow: var(--shadow);
max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
}
.main-nav.open { max-height: 800px; }
.main-nav ul { flex-direction: column; padding: 1rem 1.5rem; gap: 0.4rem; align-items: flex-start; }
.main-nav a { display: block; padding: 0.7rem 0; width: 100%; }
.dropdown {
position: static; opacity: 1; visibility: visible; transform: none;
box-shadow: none; padding-left: 1rem; max-height: 0; overflow: hidden;
transition: max-height 0.3s ease;
}
.has-dropdown.open .dropdown { max-height: 500px; }
.topbar-info { font-size: 0.8rem; gap: 0.8rem; justify-content: center; width: 100%; }
.topbar .container { justify-content: center; }
/* Mobile: topbar en blanc au lieu de vert (demande Mael 2026-05-27) */
.topbar { background: #fff; color: var(--text); border-bottom: 1px solid rgba(0,0,0,0.08); }
.topbar a { color: var(--text); }
.topbar a:hover { color: var(--teal-dark); }
}
@media (max-width: 600px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.stats { grid-template-columns: 1fr 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.section { padding: 3.5rem 0; }
.hero { padding: 3.5rem 0 4rem; }
.form-wrap { padding: 1.5rem; }
}
/* =========================================================
ENRICHISSEMENTS V2 β photos, animations, timeline, map
========================================================= */
/* ---------- Hero avec photo de fond ---------- */
.hero-photo {
background:
linear-gradient(135deg, rgba(14,92,94,0.92) 0%, rgba(20,116,111,0.85) 50%, rgba(61,207,200,0.55) 100%),
url('https://images.unsplash.com/photo-1607472586893-edb57bdc0e39?w=1600&q=80&auto=format&fit=crop') center/cover no-repeat;
position: relative;
}
.hero-photo::before, .hero-photo::after { display: none; }
/* Hero side card β photo */
.hero-img-frame {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
aspect-ratio: 4/5;
background: linear-gradient(135deg, var(--teal) 0%, var(--teal-light) 100%);
}
.hero-img-frame img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.6s ease;
}
.hero-img-frame:hover img { transform: scale(1.04); }
.hero-img-frame::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(14,92,94,0.4) 100%);
}
.hero-img-badge {
position: absolute; bottom: 1.2rem; left: 1.2rem; right: 1.2rem;
background: rgba(255,255,255,0.95); backdrop-filter: blur(10px);
padding: 1rem 1.2rem; border-radius: var(--radius);
display: flex; align-items: center; gap: 0.8rem;
z-index: 2;
}
.hero-img-badge .pulse {
width: 12px; height: 12px; background: #2ecc71; border-radius: 50%;
box-shadow: 0 0 0 0 rgba(46,204,113,0.6); animation: pulseGreen 2s infinite;
}
@keyframes pulseGreen {
0%, 100% { box-shadow: 0 0 0 0 rgba(46,204,113,0.6); }
50% { box-shadow: 0 0 0 8px rgba(46,204,113,0); }
}
.hero-img-badge strong { color: var(--teal-dark); display: block; }
.hero-img-badge span { font-size: 0.85rem; color: var(--text-soft); }
/* ---------- Section avec dΓ©cor flottant ---------- */
.section-decor { position: relative; overflow: hidden; }
.section-decor::before {
content: ""; position: absolute; top: -100px; right: -100px;
width: 320px; height: 320px; border-radius: 50%;
background: radial-gradient(circle, var(--teal-light) 0%, transparent 70%);
opacity: 0.18; pointer-events: none;
}
.section-decor::after {
content: ""; position: absolute; bottom: -80px; left: -80px;
width: 260px; height: 260px; border-radius: 50%;
background: radial-gradient(circle, var(--teal-dark) 0%, transparent 70%);
opacity: 0.10; pointer-events: none;
}
.section-decor > .container { position: relative; z-index: 2; }
/* ---------- Service cards ENRICHIES (avec photo) ---------- */
.service-card-rich {
background: #fff;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: all 0.35s ease;
display: flex; flex-direction: column;
border: 1px solid var(--border);
position: relative;
}
.service-card-rich:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
border-color: var(--teal-light);
}
.service-card-rich .photo {
position: relative;
aspect-ratio: 16/10;
overflow: hidden;
background: linear-gradient(135deg, var(--teal-dark), var(--teal-light));
}
.service-card-rich .photo img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.6s ease;
}
.service-card-rich:hover .photo img { transform: scale(1.06); }
.service-card-rich .photo::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(14,92,94,0.55) 100%);
}
.service-card-rich .badge {
position: absolute; top: 1rem; left: 1rem; z-index: 2;
background: rgba(255,255,255,0.95);
color: var(--teal-dark);
padding: 0.4rem 0.9rem; border-radius: 50px;
font-size: 0.78rem; font-weight: 600;
display: inline-flex; align-items: center; gap: 0.4rem;
}
.service-card-rich .icon-floating {
width: 56px; height: 56px; border-radius: 14px;
background: linear-gradient(135deg, var(--teal-soft), #fff);
border: 2px solid var(--teal-light);
box-shadow: 0 6px 18px rgba(14,92,94,0.18);
display: grid; place-items: center; font-size: 1.6rem;
margin-bottom: 1rem;
}
.service-card-rich .body { padding: 1.6rem; flex: 1; display: flex; flex-direction: column; }
/* Lien Γ©tirΓ© sur toute la carte (carte 100% cliquable) */
.service-card-rich .card-link {
position: absolute; inset: 0; z-index: 4;
text-indent: -9999px; overflow: hidden; white-space: nowrap;
}
.service-card-rich .card-link:focus-visible {
outline: 3px solid var(--teal-light); outline-offset: -3px;
}
/* === VARIANTE COMPACTE (page services.html β pour que les 6 rentrent en 3x2) === */
.grid-compact { gap: 1.2rem !important; }
.grid-compact .service-card-rich .photo { aspect-ratio: 16/8; }
.grid-compact .service-card-rich .body { padding: 1.1rem 1.1rem 1.2rem; gap: 0; }
.grid-compact .service-card-rich h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.grid-compact .service-card-rich p { font-size: 0.85rem; line-height: 1.45; margin-bottom: 0.5rem; }
.grid-compact .service-card-rich .icon-floating {
width: 42px; height: 42px; font-size: 1.2rem; margin-bottom: 0.6rem;
border-radius: 10px; box-shadow: 0 4px 12px rgba(14,92,94,0.18);
}
.grid-compact .service-card-rich .badge { font-size: 0.7rem; padding: 0.3rem 0.7rem; }
.grid-compact .service-card-rich .more { font-size: 0.85rem; margin-top: auto; }
.service-card-rich h3 { color: var(--teal-dark); margin-bottom: 0.6rem; }
.service-card-rich p { flex: 1; }
.service-card-rich .more {
margin-top: 1rem; font-weight: 700; color: var(--teal-dark);
display: inline-flex; align-items: center; gap: 0.4rem;
}
.service-card-rich .more::after { content: "β"; transition: transform var(--transition); }
.service-card-rich:hover .more::after { transform: translateX(5px); }
/* ---------- Process timeline (Γ©tapes numΓ©rotΓ©es) ---------- */
.process-timeline {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem;
position: relative;
}
.process-timeline::before {
content: ""; position: absolute; top: 30px; left: 5%; right: 5%;
height: 2px; background: linear-gradient(90deg, var(--teal-light) 0%, var(--teal-dark) 100%);
z-index: 0;
}
.process-step {
position: relative; text-align: center; padding: 0 0.5rem; z-index: 1;
}
.process-step .num {
width: 60px; height: 60px; border-radius: 50%;
background: #fff; border: 3px solid var(--teal-light);
color: var(--teal-dark); font-weight: 800; font-size: 1.3rem;
display: grid; place-items: center; margin: 0 auto 1rem;
box-shadow: 0 4px 12px rgba(14,92,94,0.15);
transition: all var(--transition);
}
.process-step:hover .num {
background: var(--teal-dark); color: #fff; transform: scale(1.1);
}
.process-step h4 { color: var(--teal-dark); font-size: 1.05rem; margin-bottom: 0.4rem; }
.process-step p { font-size: 0.92rem; color: var(--text-soft); margin: 0; }
/* ---------- Stats v2 (sur fond clair) ---------- */
.stats-card {
background: #fff; padding: 1.8rem 1.2rem; border-radius: var(--radius-lg);
text-align: center; box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
transition: all var(--transition);
}
.stats-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.stats-card .num {
font-size: 2.6rem; font-weight: 800;
background: linear-gradient(135deg, var(--teal-dark), var(--teal-light));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
display: block; line-height: 1;
}
.stats-card .label { color: var(--text-soft); margin-top: 0.5rem; display: block; font-size: 0.95rem; }
.stats-card .icon-stat {
width: 50px; height: 50px; border-radius: 12px;
background: var(--teal-soft); color: var(--teal-dark);
display: grid; place-items: center; font-size: 1.4rem;
margin: 0 auto 1rem;
}
/* ---------- Image gallery ---------- */
.gallery-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 200px 200px;
gap: 1rem;
}
.gallery-grid .gallery-item {
border-radius: var(--radius-lg); overflow: hidden;
position: relative;
background: linear-gradient(135deg, var(--teal-dark), var(--teal-light));
box-shadow: var(--shadow-sm);
transition: all var(--transition);
}
.gallery-grid .gallery-item:hover { transform: scale(1.02); box-shadow: var(--shadow); }
.gallery-grid .gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-grid .gallery-item:nth-child(1) { grid-row: span 2; }
/* ---------- Inline mini form (homepage) ---------- */
.form-mini {
background: #fff; padding: 2rem;
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
border-top: 4px solid var(--teal-light);
}
.form-mini h3 { color: var(--teal-dark); margin-bottom: 0.5rem; }
.form-mini .form-mini-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; margin-bottom: 0.85rem;
}
.form-mini input, .form-mini select, .form-mini textarea {
width: 100%;
padding: 0.75rem 0.95rem;
border: 2px solid var(--border);
border-radius: var(--radius); font-size: 0.95rem; font-family: inherit;
background: #fff;
}
.form-mini input:focus, .form-mini select:focus, .form-mini textarea:focus {
outline: none; border-color: var(--teal-light);
}
.form-mini textarea { resize: vertical; min-height: 90px; margin-bottom: 0.85rem; }
.form-mini button { width: 100%; justify-content: center; }
.form-mini .small {
font-size: 0.78rem; color: var(--muted); margin-top: 0.6rem; text-align: center;
}
/* ---------- Map Leaflet wrapper ---------- */
.map-wrap {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow);
border: 1px solid var(--border);
height: 500px;
position: relative;
}
#oveo-map { width: 100%; height: 100%; }
.map-legend {
position: absolute; bottom: 1rem; left: 1rem;
background: rgba(255,255,255,0.95); backdrop-filter: blur(8px);
padding: 0.85rem 1.1rem; border-radius: var(--radius);
box-shadow: var(--shadow-sm); font-size: 0.88rem;
z-index: 1000; max-width: 250px;
}
.map-legend strong { color: var(--teal-dark); display: block; margin-bottom: 0.3rem; }
.map-legend .legend-line { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.2rem; }
.map-legend .dot {
width: 12px; height: 12px; border-radius: 50%;
}
.map-legend .dot.dot-toulouse { background: var(--accent); }
.map-legend .dot.dot-zone { background: var(--teal-light); }
/* Pills zones modernisΓ©es */
.zone-pill-v2 {
background: #fff; border: 1px solid var(--border);
padding: 0.7rem 1rem; border-radius: 50px;
font-size: 0.92rem; transition: all var(--transition);
display: inline-flex; align-items: center; gap: 0.5rem;
cursor: default; font-weight: 500;
}
.zone-pill-v2:hover {
background: var(--teal-dark); color: #fff;
border-color: var(--teal-dark); transform: translateY(-2px);
}
.zone-pill-v2:hover::before { color: #fff; }
.zone-pill-v2::before {
content: "β’"; color: var(--teal-light); font-size: 1.2rem; line-height: 0;
}
.zones-cluster {
display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem;
}
.zones-cluster-title {
display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem;
}
.zones-cluster-title .num-cluster {
background: var(--teal-soft); color: var(--teal-dark);
padding: 0.3rem 0.8rem; border-radius: 50px;
font-size: 0.85rem; font-weight: 600;
}
/* ---------- Quote/highlight box ---------- */
.highlight-box {
background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal) 100%);
color: #fff;
padding: 2.5rem;
border-radius: var(--radius-lg);
text-align: center;
position: relative;
overflow: hidden;
}
.highlight-box::before {
content: '"'; position: absolute; top: -20px; left: 20px;
font-size: 9rem; color: rgba(255,255,255,0.10);
font-family: Georgia, serif; line-height: 1;
}
.highlight-box p { font-size: 1.15rem; color: #fff; font-style: italic; margin-bottom: 1rem; position: relative; z-index: 1; }
.highlight-box strong { color: var(--teal-light); }
/* ---------- Photo with frame ---------- */
.photo-frame {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.photo-frame::before {
content: ""; position: absolute;
top: 1rem; left: 1rem; right: -1rem; bottom: -1rem;
border: 3px solid var(--teal-light);
border-radius: var(--radius-lg); z-index: -1;
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-frame-wrap {
position: relative; padding: 0 1rem 1rem 0;
}
/* Floating accent */
.floating-accent {
position: absolute; padding: 0.7rem 1.1rem;
background: #fff; border-radius: var(--radius);
box-shadow: var(--shadow);
display: flex; align-items: center; gap: 0.6rem;
font-weight: 600; color: var(--teal-dark);
font-size: 0.9rem;
z-index: 5;
animation: floatY 3s ease-in-out infinite;
}
.floating-accent .icon-acc {
width: 36px; height: 36px; border-radius: 8px;
background: var(--teal-soft); display: grid; place-items: center;
color: var(--teal-dark); font-size: 1.1rem;
}
@keyframes floatY {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* Reveal on scroll β visible par dΓ©faut (progressive enhancement) */
.reveal {
opacity: 1; transform: none;
transition: opacity 0.7s ease, transform 0.7s ease;
}
/* Animation appliquΓ©e seulement si JS marque le body */
.js-reveal-enabled .reveal {
opacity: 0; transform: translateY(20px);
}
.js-reveal-enabled .reveal.visible { opacity: 1; transform: translateY(0); }
/* ---------- Service detail hero with photo ---------- */
.service-hero-photo {
position: relative;
background:
linear-gradient(135deg, rgba(14,92,94,0.85) 0%, rgba(20,116,111,0.7) 100%),
var(--teal-dark);
background-size: cover; background-position: center;
color: #fff; padding: 5rem 0 4rem;
}
.service-hero-photo h1 { color: #fff; max-width: 700px; }
.service-hero-photo .breadcrumb { color: rgba(255,255,255,0.85); }
.service-hero-photo .breadcrumb a { color: var(--teal-light); }
.service-hero-photo .lead { color: rgba(255,255,255,0.92); max-width: 700px; font-size: 1.1rem; margin-top: 0.5rem; }
/* Icon grid (4 colonnes avec icones) */
.icon-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem;
}
.icon-grid-2 { grid-template-columns: repeat(2, 1fr); }
.icon-feature {
background: #fff; padding: 1.5rem 1.2rem; border-radius: var(--radius-lg);
text-align: center; border: 1px solid var(--border);
transition: all var(--transition);
}
.icon-feature:hover {
transform: translateY(-4px); border-color: var(--teal-light);
box-shadow: var(--shadow);
}
.icon-feature .ic {
width: 56px; height: 56px; border-radius: 14px;
background: linear-gradient(135deg, var(--teal-soft), #fff);
border: 2px solid var(--teal-light);
display: grid; place-items: center; margin: 0 auto 0.8rem;
font-size: 1.5rem;
}
.icon-feature h4 { color: var(--teal-dark); font-size: 1rem; margin-bottom: 0.3rem; }
.icon-feature p { font-size: 0.88rem; margin: 0; }
/* Icon feature WITH PHOTO (image + picto) */
.icon-feature-img {
background: #fff; border-radius: var(--radius-lg);
border: 1px solid var(--border);
overflow: hidden;
transition: all var(--transition);
display: flex; flex-direction: column;
}
.icon-feature-img:hover {
transform: translateY(-4px); border-color: var(--teal-light);
box-shadow: var(--shadow);
}
.icon-feature-img .feat-photo {
position: relative;
aspect-ratio: 16/10;
overflow: hidden;
background: linear-gradient(135deg, var(--teal-dark), var(--teal-light));
}
.icon-feature-img .feat-photo img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.6s ease;
}
.icon-feature-img:hover .feat-photo img { transform: scale(1.06); }
.icon-feature-img .feat-photo::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(14,92,94,0.5) 100%);
}
.icon-feature-img .feat-picto {
position: absolute; bottom: -20px; right: 1rem; z-index: 2;
width: 44px; height: 44px; border-radius: 12px;
background: #fff; box-shadow: var(--shadow-sm);
display: grid; place-items: center; font-size: 1.25rem;
}
.icon-feature-img .feat-body {
padding: 1.6rem 1rem 1rem;
text-align: center;
}
.icon-feature-img h4 { color: var(--teal-dark); font-size: 1rem; margin-bottom: 0.3rem; }
.icon-feature-img p { font-size: 0.88rem; margin: 0; color: var(--text-soft); }
/* CTA-Devis bouton spΓ©cial (gros, visuel) */
.btn-devis {
display: inline-flex; align-items: center; gap: 0.6rem;
padding: 1rem 1.8rem; border-radius: 50px;
background: linear-gradient(135deg, #FF8C00 0%, var(--accent) 100%);
color: #fff; font-weight: 700; font-size: 1rem;
box-shadow: 0 6px 18px rgba(255,107,53,0.35);
transition: all var(--transition);
}
.btn-devis:hover {
transform: translateY(-2px); color: #fff;
box-shadow: 0 10px 24px rgba(255,107,53,0.5);
}
.btn-devis::before { content: "β"; font-size: 1.1rem; }
/* ============== FEATURE LIST (pour remplacer listes brutes) ============== */
.feature-list {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
margin: 1.5rem 0;
list-style: none !important; padding: 0 !important;
}
.feature-list li {
background: #fff; padding: 1rem 1.1rem;
border-radius: var(--radius); border: 1px solid var(--border);
display: flex; align-items: flex-start; gap: 0.7rem;
transition: all var(--transition);
margin: 0 !important;
}
.feature-list li:hover {
border-color: var(--teal-light); transform: translateX(3px);
}
.feature-list li::before {
content: "β"; flex-shrink: 0;
width: 22px; height: 22px; border-radius: 50%;
background: var(--teal-light); color: #fff;
display: grid; place-items: center;
font-weight: 800; font-size: 0.78rem;
margin-top: 2px;
}
.feature-list li strong { color: var(--teal-dark); }
/* Mini cards (pictos avec couleur d'accent et titre) */
.mini-card-row {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
margin: 1.5rem 0;
}
.mini-card {
background: linear-gradient(135deg, var(--teal-soft), #fff);
padding: 1.2rem; border-radius: var(--radius);
border-left: 4px solid var(--teal-light);
text-align: left;
}
.mini-card .ic { font-size: 1.6rem; margin-bottom: 0.4rem; }
.mini-card h4 { color: var(--teal-dark); font-size: 1rem; margin-bottom: 0.3rem; }
.mini-card p { font-size: 0.88rem; margin: 0; color: var(--text-soft); }
/* ============== Responsive ============== */
@media (max-width: 980px) {
.process-timeline { grid-template-columns: repeat(2, 1fr); }
.process-timeline::before { display: none; }
.icon-grid { grid-template-columns: repeat(2, 1fr); }
.icon-grid-2 { grid-template-columns: repeat(2, 1fr); }
.feature-list { grid-template-columns: 1fr; }
.mini-card-row { grid-template-columns: 1fr; }
.gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 200px; }
.gallery-grid .gallery-item:nth-child(1) { grid-row: span 1; }
.form-mini .form-mini-grid { grid-template-columns: 1fr; }
.map-wrap { height: 400px; }
}
@media (max-width: 700px) {
/* Header / nav mobile */
.topbar { font-size: 0.78rem; }
.topbar .container { gap: 0.4rem; padding-top: 0.4rem; padding-bottom: 0.4rem; }
.topbar-info { gap: 0.6rem !important; justify-content: center; width: 100%; }
.site-header .container { padding-top: 0.7rem; padding-bottom: 0.7rem; }
.brand img { height: 44px; }
.brand-name { font-size: 1.15rem; }
.brand-tag { font-size: 0.7rem; }
/* Sections */
.section { padding: 3rem 0; }
.container { padding: 0 1rem; }
h1 { font-size: 1.7rem !important; }
h2 { font-size: 1.4rem !important; }
h3 { font-size: 1.15rem !important; }
/* Hero */
.hero { padding: 2.5rem 0 3rem; }
.hero-grid { gap: 1.5rem; }
.hero-img-frame { aspect-ratio: 4/3; }
.hero-points { gap: 0.8rem; font-size: 0.88rem; }
.hero-cta { gap: 0.6rem; }
.hero-cta .btn { width: 100%; justify-content: center; padding: 0.85rem 1.2rem; font-size: 0.95rem; }
/* Service hero photo (pages internes) */
.service-hero-photo { padding: 3rem 0 2.5rem; }
.service-hero-photo .lead { font-size: 0.95rem; }
.page-hero { padding: 3rem 0 2rem; }
/* Grids */
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.stats { grid-template-columns: 1fr 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
/* Process timeline */
.process-timeline { grid-template-columns: 1fr; gap: 1rem; }
.process-step { display: flex; gap: 1rem; align-items: flex-start; text-align: left; padding: 0; }
.process-step .num { margin: 0; flex-shrink: 0; width: 50px; height: 50px; font-size: 1.1rem; }
.process-step h4 { font-size: 1rem; margin-bottom: 0.2rem; }
.process-step p { font-size: 0.9rem; }
/* Cards */
.card { padding: 1.5rem; }
.icon-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.icon-grid-2 { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.icon-feature { padding: 1rem 0.7rem; }
.icon-feature .ic { width: 44px; height: 44px; font-size: 1.2rem; }
.icon-feature h4 { font-size: 0.9rem; }
.icon-feature p { font-size: 0.8rem; }
/* Form */
.form-wrap { padding: 1.2rem; }
.form-row { grid-template-columns: 1fr; }
.urgency-radios label { font-size: 0.88rem; padding: 0.5rem 0.8rem; }
/* Two-col stack */
.two-col { gap: 2rem; }
.photo-frame-wrap { padding: 0; }
.photo-frame { box-shadow: var(--shadow); }
.photo-frame::before { display: none; }
.floating-accent { display: none; }
/* Map */
.map-wrap { height: 320px; }
.map-legend { font-size: 0.78rem; padding: 0.6rem 0.8rem; max-width: 200px; }
/* Testimonials */
.testimonial { padding: 1.5rem; }
/* CTA band */
.cta-band { padding: 3rem 0; }
.cta-band .btns { gap: 0.6rem; flex-direction: column; }
.cta-band .btn { width: 100%; justify-content: center; }
/* Float call button */
.float-call { width: 52px; height: 52px; font-size: 1.3rem; bottom: 1rem; right: 1rem; }
/* Service cards */
.service-card-rich { margin-bottom: 0.5rem; }
.service-card-rich .body { padding: 1.2rem; }
/* Highlight box */
.highlight-box { padding: 1.8rem 1.2rem; }
.highlight-box p { font-size: 1rem; }
/* Zone pills smaller on mobile */
.zone-pill-v2 { font-size: 0.85rem; padding: 0.55rem 0.85rem; }
.zones-cluster { gap: 0.4rem; }
.zones-cluster-title h3 { font-size: 1.1rem !important; }
.num-cluster { font-size: 0.78rem; padding: 0.25rem 0.6rem; }
/* FAQ */
.faq-item summary { padding: 1rem 1.1rem; font-size: 0.95rem; }
.faq-item .answer { padding: 0 1.1rem 1rem; font-size: 0.9rem; }
}
@media (max-width: 480px) {
.icon-grid, .icon-grid-2 { grid-template-columns: 1fr; }
.stats { grid-template-columns: 1fr; }
h1 { font-size: 1.5rem !important; }
h2 { font-size: 1.25rem !important; }
}
/* =========================================================
FINAL β composants ajoutΓ©s pour le site final
1. Section "Prestations" en liste (inspirΓ©e site 2)
2. Estimateur express (inspirΓ© site 3)
3. Carte satellite mixΓ©e
4. Formulaire avec encarts (inspirΓ© site 3)
5. Pages services Γ©purΓ©es
========================================================= */
/* ---------- Logo PNG ---------- */
.brand img.brand-logo-png { height: 64px; width: auto; }
.footer-brand img.brand-logo-png { height: 64px; filter: none; margin-bottom: 1rem; }
/* ---------- HERO FORM CARD (Γ la place de la photo) ---------- */
.hero-form-card {
background: #fff;
border-radius: var(--radius-lg);
padding: 1.6rem 1.6rem 1.4rem;
box-shadow: var(--shadow-lg);
border-top: 4px solid var(--accent);
position: relative;
}
.hero-form-header {
text-align: center;
margin-bottom: 1.2rem;
}
.hero-form-pulse {
display: inline-flex; align-items: center; gap: 0.4rem;
background: rgba(46,204,113,0.12);
color: #16a34a;
padding: 0.3rem 0.75rem;
border-radius: 50px;
font-size: 0.78rem;
font-weight: 600;
margin-bottom: 0.7rem;
}
.hero-form-pulse .pulse-dot {
width: 8px; height: 8px;
background: #16a34a;
border-radius: 50%;
animation: pulseDot 2s ease-out infinite;
}
@keyframes pulseDot {
0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0.5); }
50% { box-shadow: 0 0 0 8px rgba(22,163,74,0); }
}
.hero-form-card h3 {
color: var(--teal-dark);
font-size: 1.35rem;
margin: 0 0 0.4rem;
letter-spacing: -0.02em;
}
.hero-form-card .hero-form-header p {
color: var(--text-soft);
font-size: 0.92rem;
margin: 0;
}
.hero-form { display: flex; flex-direction: column; gap: 0.7rem; }
.hero-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.hero-form-row.hero-form-row-3 { grid-template-columns: 70px 1fr; }
.hero-form input,
.hero-form select,
.hero-form textarea {
padding: 0.7rem 0.9rem;
border: 1.5px solid var(--border);
border-radius: var(--radius);
font-size: 0.95rem;
font-family: inherit;
background: #fff;
width: 100%;
transition: border var(--transition);
}
.hero-form input:focus,
.hero-form select:focus,
.hero-form textarea:focus {
outline: none;
border-color: var(--teal-light);
box-shadow: 0 0 0 3px rgba(61,207,200,0.15);
}
.hero-form textarea {
resize: vertical;
min-height: 60px;
}
.hero-form-submit {
margin-top: 0.4rem;
width: 100%;
justify-content: center;
padding: 0.95rem 1.5rem;
font-size: 1rem;
}
.hero-form-note {
font-size: 0.78rem;
color: var(--muted);
text-align: center;
margin: 0.4rem 0 0;
}
/* Message de succès */
.hero-form-success {
text-align: center;
padding: 1.5rem 1rem;
animation: fadeInUp 0.5s ease-out;
}
.hero-form-success .hero-form-check {
width: 64px; height: 64px;
margin: 0 auto 1rem;
border-radius: 50%;
background: linear-gradient(135deg, #2ecc71, #16a34a);
color: #fff;
display: grid; place-items: center;
font-size: 2rem;
font-weight: 800;
box-shadow: 0 8px 24px rgba(46,204,113,0.35);
}
.hero-form-success h3 {
font-size: 1.6rem;
color: var(--teal-dark);
margin-bottom: 0.6rem;
}
.hero-form-success p {
color: var(--text-soft);
font-size: 0.95rem;
margin-bottom: 0.6rem;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(15px); }
to { opacity: 1; transform: none; }
}
@media (max-width: 700px) {
.hero-form-card { padding: 1.2rem; }
.hero-form-row { grid-template-columns: 1fr; gap: 0.5rem; }
.hero-form-card h3 { font-size: 1.2rem; }
}
/* Message de remerciement gΓ©nΓ©rique (formulaires hors hero) */
.form-thank-you {
background: linear-gradient(135deg, var(--teal-soft) 0%, #fff 100%);
border: 2px solid var(--teal-light);
border-radius: var(--radius-lg);
padding: 2.5rem 2rem;
text-align: center;
margin-bottom: 1.5rem;
animation: fadeInUp 0.5s ease-out;
box-shadow: var(--shadow);
}
.form-thank-you .form-thank-check {
width: 72px; height: 72px;
margin: 0 auto 1.2rem;
border-radius: 50%;
background: linear-gradient(135deg, #2ecc71, #16a34a);
color: #fff;
display: grid; place-items: center;
font-size: 2.4rem;
font-weight: 800;
box-shadow: 0 8px 24px rgba(46,204,113,0.35);
}
.form-thank-you h3 {
font-size: 1.8rem;
color: var(--teal-dark);
margin-bottom: 0.6rem;
}
.form-thank-you p {
color: var(--text-soft);
font-size: 1rem;
margin-bottom: 0.5rem;
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
/* ---------- 1. SECTION PRESTATIONS LIST (inspirΓ©e site 2) ---------- */
.prestations-list {
display: flex; flex-direction: column;
border-top: 1px solid var(--border);
margin-top: 1rem;
}
.prestation-row {
display: grid;
grid-template-columns: 60px 1.2fr 1.4fr 220px;
column-gap: 1.5rem;
align-items: center;
padding: 1.6rem 1rem;
border-bottom: 1px solid var(--border);
transition: background 0.25s ease, border-color 0.25s ease;
cursor: pointer;
position: relative;
text-decoration: none;
color: inherit;
}
.prestation-row:hover {
background: var(--bg-soft);
}
.prestation-row::after {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: var(--teal-light); transform: scaleY(0); transform-origin: top;
transition: transform 0.4s ease;
}
.prestation-row:hover::after { transform: scaleY(1); }
.prestation-num {
font-family: 'Inter', monospace; font-size: 0.85rem;
color: var(--muted); letter-spacing: 0.08em; font-weight: 600;
}
.prestation-title-block { display: flex; flex-direction: column; gap: 0.2rem; }
.prestation-title {
font-family: 'Poppins', sans-serif; font-size: clamp(1.1rem, 1.8vw, 1.5rem);
font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;
color: var(--teal-dark);
}
.prestation-subtitle {
font-family: 'Inter', sans-serif;
font-size: 0.88rem;
color: var(--muted);
font-weight: 400;
line-height: 1.3;
}
.prestation-desc {
color: var(--text-soft); font-size: 0.95rem; line-height: 1.55;
margin: 0; padding-right: 1rem;
white-space: pre-line; /* respecte les \n dans le HTML */
}
.prestation-meta {
display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem;
justify-self: end;
text-align: right;
}
.prestation-price {
font-family: 'Poppins', sans-serif; font-size: 1.35rem; font-weight: 700;
letter-spacing: -0.02em; color: var(--teal-dark);
white-space: nowrap;
}
.prestation-price small {
font-size: 0.7rem; color: var(--muted); font-weight: 400;
display: block; letter-spacing: 0.04em; text-transform: uppercase;
margin-top: 2px;
}
.prestation-pill {
background: var(--teal-soft); color: var(--teal-dark);
padding: 0.25rem 0.75rem; border-radius: 50px;
font-size: 0.72rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.08em;
}
.prestation-pill.urgent { background: var(--accent); color: #fff; }
@media (max-width: 900px) {
.prestation-row { grid-template-columns: 50px 1fr; gap: 0.5rem 1rem; padding: 1.2rem 0; }
.prestation-desc, .prestation-meta { grid-column: 1 / -1; }
.prestation-meta { flex-direction: row; align-items: center; justify-content: space-between; padding-top: 0.4rem; }
.prestation-title { font-size: 1.1rem; }
}
/* ---------- 2. ESTIMATEUR EXPRESS ---------- */
.estimator-block {
background: linear-gradient(135deg, var(--teal-soft) 0%, #fff 50%, var(--teal-soft) 100%);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: clamp(1.5rem, 3vw, 2.4rem);
box-shadow: var(--shadow);
}
.est-tabs {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem;
margin-bottom: 1.6rem;
}
.est-tab {
display: flex; align-items: center; gap: 0.5rem;
padding: 0.7rem 0.9rem;
background: #fff; border: 2px solid var(--border);
border-radius: 50px; font-size: 0.85rem; font-weight: 600;
color: var(--text-soft); cursor: pointer;
font-family: inherit;
transition: all var(--transition);
justify-content: center;
}
.est-tab .est-tab-num {
width: 24px; height: 24px; background: var(--teal-soft);
color: var(--teal-dark); border-radius: 50%;
display: grid; place-items: center;
font-weight: 700; font-size: 0.78rem;
}
.est-tab.active {
background: var(--teal-dark); color: #fff; border-color: var(--teal-dark);
}
.est-tab.active .est-tab-num { background: var(--teal-light); color: var(--teal-dark); }
.est-tab.done .est-tab-num { background: var(--teal-light); color: #fff; }
.est-tab.done .est-tab-num::before { content: "β"; }
.est-tab.done .est-tab-num span { display: none; }
.est-step { display: none; animation: estFadeIn 0.3s ease-out; }
.est-step.active { display: block; }
@keyframes estFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.est-options {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem;
margin: 1rem 0;
}
.est-step[data-step="2"] .est-options { grid-template-columns: repeat(3, 1fr); }
.est-opt {
display: flex; flex-direction: column; gap: 0.25rem;
padding: 1rem 1.1rem;
background: #fff; border: 2px solid var(--border);
border-radius: var(--radius); cursor: pointer;
transition: all var(--transition);
text-align: left; font: inherit; color: inherit;
}
.est-opt:hover { border-color: var(--teal-light); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.est-opt.selected {
border-color: var(--teal-dark); background: var(--teal-dark); color: #fff;
}
.est-opt.selected .est-opt-meta { color: rgba(255,255,255,0.75); }
.est-opt-icon { font-size: 1.5rem; margin-bottom: 0.3rem; }
.est-opt strong { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 0.98rem; }
.est-opt-meta { font-size: 0.78rem; color: var(--muted); }
.est-controls {
display: flex; justify-content: space-between; align-items: center; gap: 1rem;
margin-top: 1.4rem; padding-top: 1.2rem;
border-top: 1px solid var(--border);
}
.est-link {
color: var(--text-soft); font-size: 0.92rem;
background: none; border: 0; cursor: pointer; font: inherit;
}
.est-link:hover { color: var(--teal-dark); }
.est-result {
background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal) 100%);
color: #fff; border-radius: var(--radius);
padding: 1.4rem 1.6rem; margin-top: 0.5rem;
display: grid; grid-template-columns: 1fr auto; gap: 1rem;
align-items: center;
}
.est-result .est-price {
font-family: 'Poppins', sans-serif; font-size: 1.8rem; font-weight: 800;
color: var(--teal-light); letter-spacing: -0.02em;
}
.est-result p { color: rgba(255,255,255,0.85); margin: 0; font-size: 0.88rem; }
.est-result .est-mono {
font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em;
color: var(--teal-light); font-weight: 600;
}
.est-form-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem;
}
.est-form-grid .field { display: flex; flex-direction: column; gap: 0.3rem; }
.est-form-grid .field.full { grid-column: 1 / -1; }
.est-form-grid label { font-weight: 600; color: var(--teal-dark); font-size: 0.88rem; }
.est-form-grid input {
padding: 0.8rem 1rem; border: 2px solid var(--border);
border-radius: var(--radius); font-size: 1rem; font-family: inherit;
background: #fff;
}
.est-form-grid input:focus { outline: none; border-color: var(--teal-light); }
@media (max-width: 700px) {
.est-tabs { grid-template-columns: 1fr; gap: 0.4rem; }
.est-result { grid-template-columns: 1fr; }
.est-form-grid { grid-template-columns: 1fr; }
.est-options { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.est-options { grid-template-columns: 1fr; }
}
/* ---------- 3. CARTE SATELLITE (mix site 1 + site 2) ---------- */
.map-wrap.satellite {
height: 500px;
background: #1a1a1a;
}
@media (max-width: 980px) { .map-wrap.satellite { height: 420px; } }
@media (max-width: 600px) { .map-wrap.satellite { height: 350px; } }
/* ---------- Map stylisΓ©e style site 3 + fond satellite ---------- */
.zones-wrap-final {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
.zone-map-stylized {
position: relative;
aspect-ratio: 1 / 1;
border-radius: var(--radius-lg);
overflow: hidden;
background:
linear-gradient(rgba(14,92,94,0.18), rgba(14,92,94,0.30)),
url('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/8/93/129') center/cover no-repeat,
linear-gradient(135deg, #4a6741 0%, #6b8b4f 50%, #8c9d68 100%);
border: 1px solid var(--border);
box-shadow: var(--shadow);
padding: 1.5rem;
}
.zone-map-stylized svg {
width: 100%;
height: 100%;
display: block;
}
@media (max-width: 980px) {
.zones-wrap-final { grid-template-columns: 1fr; gap: 2rem; }
.zone-map-stylized { max-width: 480px; margin: 0 auto; }
}
.zone-map-stylized.zone-map-large {
max-width: 700px;
margin: 0 auto;
aspect-ratio: 1 / 1;
}
.zone-map-stylized.zone-map-xl {
max-width: 880px;
margin: 0 auto;
aspect-ratio: 1 / 1;
}
@media (max-width: 700px) {
.zone-map-stylized.zone-map-xl { padding: 1rem; }
}
/* Liste d'infos zones (Γ cΓ΄tΓ© de la map) */
.zone-info-list {
display: flex; flex-direction: column; gap: 1rem;
margin-top: 1.8rem;
}
.zone-info-item {
display: flex; gap: 1rem; align-items: flex-start;
padding: 1rem 1.2rem;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
transition: all var(--transition);
}
.zone-info-item:hover {
border-color: var(--teal-light);
transform: translateX(3px);
box-shadow: var(--shadow-sm);
}
.zone-info-ic {
flex-shrink: 0;
width: 44px; height: 44px;
background: var(--teal-soft);
border-radius: 12px;
display: grid; place-items: center;
font-size: 1.3rem;
}
.zone-info-item strong {
display: block;
font-family: 'Poppins', sans-serif;
font-weight: 700;
color: var(--teal-dark);
font-size: 1rem;
margin-bottom: 0.2rem;
}
.zone-info-item span {
color: var(--text-soft);
font-size: 0.88rem;
line-height: 1.4;
}
/* Cards dΓ©lais d'intervention */
.delay-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.2rem;
}
.delay-card {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.6rem 1.4rem;
position: relative;
overflow: hidden;
transition: all var(--transition);
}
.delay-card:hover {
transform: translateY(-4px);
border-color: var(--teal-light);
box-shadow: var(--shadow);
}
.delay-card::before {
content: "";
position: absolute; top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--teal-dark), var(--teal-light));
}
.delay-card .delay-time {
font-family: 'Poppins', sans-serif;
font-size: 1.8rem;
font-weight: 800;
color: var(--teal-dark);
letter-spacing: -0.02em;
margin-bottom: 0.5rem;
background: linear-gradient(135deg, var(--teal-dark), var(--teal-light));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.delay-card h3 {
font-size: 1.05rem;
margin-bottom: 0.5rem;
color: var(--teal-dark);
}
.delay-card p {
font-size: 0.88rem;
color: var(--text-soft);
line-height: 1.5;
margin: 0;
}
@media (max-width: 980px) {
.delay-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.delay-grid { grid-template-columns: 1fr; }
}
/* ---------- 4. FORMULAIRE AVEC ENCARTS (inspirΓ© site 3, DA site 1) ---------- */
.form-grid-aside {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 2.5rem;
align-items: start;
}
.form-aside-stack {
display: flex; flex-direction: column; gap: 1rem;
position: sticky; top: 90px;
}
.aside-block {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.4rem 1.6rem;
transition: all var(--transition);
}
.aside-block:hover {
border-color: var(--teal-light);
box-shadow: var(--shadow-sm);
}
.aside-block.featured {
background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal) 100%);
color: #fff;
border-color: transparent;
}
.aside-block.featured h3 { color: #fff; }
.aside-block.featured p { color: rgba(255,255,255,0.9); }
.aside-block.featured .urgent-num {
display: block; font-family: 'Poppins', sans-serif;
font-size: 1.8rem; font-weight: 800; color: var(--teal-light);
margin: 0.5rem 0 1rem; letter-spacing: -0.02em;
}
.aside-block.featured .btn-outline-light {
background: transparent; color: #fff;
border: 2px solid rgba(255,255,255,0.4);
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.75rem 1.4rem; border-radius: 50px;
font-weight: 600; font-size: 0.95rem;
width: 100%; justify-content: center;
transition: all var(--transition);
}
.aside-block.featured .btn-outline-light:hover {
background: #fff; color: var(--teal-dark); border-color: #fff;
}
.aside-block .label {
display: inline-block;
font-family: 'Inter', monospace; font-size: 0.7rem;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--teal-light); font-weight: 700;
margin-bottom: 0.4rem;
}
.aside-block.featured .label { color: var(--teal-light); }
.aside-block h3 {
font-family: 'Poppins', sans-serif;
font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem;
color: var(--teal-dark); letter-spacing: -0.02em;
}
.aside-block p {
font-size: 0.92rem; margin-bottom: 0.8rem; color: var(--text-soft);
}
.aside-bullets {
list-style: none; padding: 0; margin: 1rem 0;
display: flex; flex-direction: column; gap: 0.6rem;
}
.aside-bullets li {
display: flex; gap: 0.6rem; align-items: flex-start;
font-size: 0.92rem; color: var(--text);
}
.aside-bullets li::before {
content: ""; flex: 0 0 auto;
width: 18px; height: 18px; border-radius: 50%;
background: var(--teal-light);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: center;
margin-top: 2px;
}
.aside-block.featured .aside-bullets li { color: rgba(255,255,255,0.95); }
@media (max-width: 980px) {
.form-grid-aside { grid-template-columns: 1fr; }
.form-aside-stack { position: static; flex-direction: row; flex-wrap: wrap; }
.form-aside-stack .aside-block { flex: 1 1 280px; }
}
/* ---------- Form tabs (urgence) β DA site 1 ---------- */
.form-tabs {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
background: var(--bg-soft);
padding: 0.4rem;
border-radius: var(--radius);
margin-bottom: 1.5rem;
}
.form-tab {
padding: 0.7rem 0.8rem; text-align: center;
border: 0; background: transparent; font: inherit;
font-size: 0.86rem; font-weight: 600;
color: var(--text-soft); cursor: pointer;
border-radius: calc(var(--radius) - 4px);
transition: all var(--transition);
}
.form-tab.active {
background: var(--teal-dark); color: #fff;
box-shadow: var(--shadow-sm);
}
.form-tab.urgent.active {
background: var(--accent); color: #fff;
}
/* ---------- 5. PAGES SERVICES ΓPURΓES ---------- */
.svc-page-hero {
background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal) 100%);
color: #fff;
padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem);
position: relative;
overflow: hidden;
}
.svc-page-hero::before {
content: ""; position: absolute; right: -120px; top: -120px;
width: 360px; height: 360px; border-radius: 50%;
background: rgba(255,255,255,0.06);
}
.svc-page-hero::after {
content: ""; position: absolute; left: -100px; bottom: -100px;
width: 280px; height: 280px; border-radius: 50%;
background: rgba(255,255,255,0.04);
}
.svc-page-hero .container { position: relative; z-index: 2; }
.svc-page-hero .breadcrumb {
font-size: 0.85rem; color: rgba(255,255,255,0.7);
margin-bottom: 0.7rem;
}
.svc-page-hero .breadcrumb a { color: var(--teal-light); }
.svc-page-hero h1 {
color: #fff; max-width: 800px; margin-bottom: 0.4rem;
}
.svc-page-hero .h1-subtitle {
display: block;
color: rgba(255,255,255,0.7);
font-size: 1rem;
font-weight: 400;
font-family: 'Inter', sans-serif;
margin-bottom: 1.2rem;
max-width: 720px;
}
.svc-page-hero .lead {
color: rgba(255,255,255,0.92);
font-size: clamp(1rem, 1.4vw, 1.15rem); max-width: 720px;
margin-bottom: 1.6rem;
}
.svc-page-hero .hero-actions {
display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 1.5rem;
}
.svc-page-hero .quick-stats {
display: flex; flex-wrap: wrap; gap: 1.5rem;
padding-top: 1.4rem;
border-top: 1px solid rgba(255,255,255,0.15);
font-size: 0.92rem;
}
.svc-page-hero .quick-stats > span {
display: inline-flex; align-items: center; gap: 0.5rem;
color: rgba(255,255,255,0.85);
}
.svc-page-hero .quick-stats strong { color: #fff; font-weight: 700; }
.svc-content-grid {
display: grid;
grid-template-columns: 1fr 320px;
gap: clamp(2rem, 4vw, 3.5rem);
align-items: start;
}
/* Variante : intro + estimateur en pleine largeur */
.svc-intro-fullwidth {
max-width: 920px;
margin: 0 auto;
}
.svc-intro-fullwidth h2 {
margin-top: 0;
font-size: clamp(1.6rem, 2.8vw, 2.2rem);
color: var(--teal-dark);
margin-bottom: 1rem;
}
.svc-intro-fullwidth p {
font-size: 1.05rem;
line-height: 1.7;
color: var(--text-soft);
margin-bottom: 1rem;
}
.svc-intro-fullwidth .estimator-inline { margin-top: 2.5rem; }
.svc-content-main { font-size: 1rem; line-height: 1.7; color: var(--text); }
.svc-content-main h2 {
margin: 2.4rem 0 1rem;
font-size: clamp(1.5rem, 2.4vw, 2rem);
color: var(--teal-dark);
}
.svc-content-main h2:first-child { margin-top: 0; }
.svc-content-main p { margin: 0 0 1rem; color: var(--text-soft); }
.svc-content-main strong { color: var(--teal-dark); font-weight: 700; }
.svc-content-main .callout {
background: var(--teal-soft);
border-left: 4px solid var(--teal-light);
border-radius: var(--radius);
padding: 1.4rem 1.5rem;
margin: 1.6rem 0;
}
.svc-content-main .callout strong {
display: block; margin-bottom: 0.4rem;
font-family: 'Poppins', sans-serif; font-size: 1.05rem;
}
.svc-content-main .callout p:last-child { margin-bottom: 0; }
.svc-aside-sticky {
position: sticky; top: 90px;
display: flex; flex-direction: column; gap: 1rem;
}
@media (max-width: 980px) {
.svc-content-grid { grid-template-columns: 1fr; }
.svc-aside-sticky { position: static; flex-direction: row; flex-wrap: wrap; }
.svc-aside-sticky > * { flex: 1 1 280px; }
}
/* Symptom grid : 2 lignes de 2 */
.symptom-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin: 1.5rem 0;
}
@media (max-width: 600px) { .symptom-grid { grid-template-columns: 1fr; } }
.symptom-card {
background: #fff; border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.2rem 1.3rem;
transition: all var(--transition);
}
.symptom-card:hover {
border-color: var(--teal-light);
transform: translateY(-2px); box-shadow: var(--shadow-sm);
}
.symptom-card .ic {
width: 42px; height: 42px;
background: var(--teal-soft); color: var(--teal-dark);
border-radius: 10px; display: grid; place-items: center;
font-size: 1.2rem; margin-bottom: 0.65rem;
}
.symptom-card h4 {
font-size: 0.98rem; margin-bottom: 0.25rem;
color: var(--teal-dark);
}
.symptom-card p { font-size: 0.85rem; margin: 0; color: var(--text-soft); line-height: 1.45; }
/* Related services β avec images */
.related-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.2rem;
}
/* Variante 3+2 centrΓ© (page d'accueil) */
.related-grid.split-3-2 {
display: flex;
flex-direction: column;
gap: 1.2rem;
max-width: 1100px;
margin: 0 auto;
}
.related-grid.split-3-2 .row {
display: grid;
gap: 1.2rem;
}
.related-grid.split-3-2 .row.row-3 {
grid-template-columns: repeat(3, 1fr);
}
.related-grid.split-3-2 .row.row-2 {
grid-template-columns: repeat(2, 1fr);
max-width: calc(66.6% + 1.2rem * 0.6667);
margin: 0 auto;
width: 100%;
}
@media (max-width: 900px) {
.related-grid.split-3-2 .row.row-3 { grid-template-columns: repeat(2, 1fr); }
.related-grid.split-3-2 .row.row-2 { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
}
@media (max-width: 600px) {
.related-grid.split-3-2 .row.row-3,
.related-grid.split-3-2 .row.row-2 { grid-template-columns: 1fr; max-width: 100%; }
}
.related-card {
background: #fff; border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex; flex-direction: column;
color: var(--text); transition: all var(--transition);
text-decoration: none;
position: relative;
}
.related-card:hover {
border-color: var(--teal-light); transform: translateY(-4px);
box-shadow: var(--shadow); color: var(--teal-dark);
}
.related-card .related-img {
position: relative;
aspect-ratio: 16/10;
overflow: hidden;
background: linear-gradient(135deg, var(--teal-dark), var(--teal-light));
}
.related-card .related-img img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.5s ease;
}
.related-card:hover .related-img img { transform: scale(1.06); }
.related-card .related-img::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(14,92,94,0.45) 100%);
}
.related-card .related-img .ic {
position: absolute; top: 0.85rem; left: 0.85rem; z-index: 2;
width: 38px; height: 38px;
background: rgba(255,255,255,0.95); border-radius: 10px;
display: grid; place-items: center;
font-size: 1.1rem;
box-shadow: var(--shadow-sm);
}
.related-card .related-body {
padding: 1.1rem 1.2rem 1.3rem;
display: flex; flex-direction: column; gap: 0.3rem;
}
.related-card strong {
font-family: 'Poppins', sans-serif;
font-weight: 700; font-size: 1.05rem; color: var(--teal-dark);
}
.related-card span { color: var(--text-soft); font-size: 0.87rem; }
.related-card .related-arrow {
margin-top: 0.5rem;
font-size: 0.85rem; font-weight: 600; color: var(--teal-dark);
display: inline-flex; align-items: center; gap: 0.35rem;
}
.related-card .related-arrow::after { content: "β"; transition: transform var(--transition); }
.related-card:hover .related-arrow::after { transform: translateX(4px); }
/* Section "Pourquoi choisir OVEO" β image plus petite */
.why-photo-frame { padding: 0; }
.why-photo-frame .photo-frame {
max-width: 380px; margin: 0 auto;
aspect-ratio: 4/5;
}
.why-photo-frame .photo-frame img {
width: 100%; height: 100%; object-fit: cover;
}
@media (max-width: 980px) {
.why-photo-frame .photo-frame { max-width: 320px; }
}
/* =========================================================
MOBILE OPTIMISΓ β rΓ¨gles dΓ©diΓ©es tΓ©lΓ©phone
========================================================= */
@media (max-width: 700px) {
/* Container resserrΓ© */
.container { padding: 0 0.9rem; }
/* Topbar plus discrète sur mobile */
.topbar { font-size: 0.74rem; }
.topbar .container {
flex-direction: column; align-items: center;
gap: 0.2rem;
padding-top: 0.4rem; padding-bottom: 0.4rem;
}
.topbar-info { gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.topbar-info span { font-size: 0.74rem; }
/* Header mobile */
.site-header .container {
padding-top: 0.6rem; padding-bottom: 0.6rem;
flex-wrap: wrap; gap: 0.5rem;
}
.brand img.brand-logo-png { height: 44px; }
.brand-name { font-size: 1.05rem; }
.brand-tag { font-size: 0.65rem; }
/* Boutons plus tactiles */
.btn { padding: 0.85rem 1.3rem; font-size: 0.92rem; min-height: 44px; }
.btn-devis { padding: 0.85rem 1.3rem; font-size: 0.92rem; }
/* Hero accueil */
.hero { padding: 2rem 0 2.5rem; }
.hero h1 { font-size: 1.65rem !important; line-height: 1.2; margin-bottom: 0.9rem; }
.hero h1 span.flash { padding: 0 .15em; }
.hero .lead { font-size: 0.95rem; margin-bottom: 1.3rem; }
.hero-cta { gap: 0.5rem; flex-direction: column; }
.hero-cta .btn { width: 100%; justify-content: center; }
.hero-points { gap: 0.6rem; font-size: 0.82rem; flex-wrap: wrap; }
.hero-img-frame { aspect-ratio: 5/4; max-height: 280px; }
/* Stats sur mobile */
.stats-card { padding: 1rem 0.7rem; }
.stats-card .num { font-size: 1.6rem; }
.stats-card .label { font-size: 0.78rem; }
.stats-card .icon-stat { width: 38px; height: 38px; font-size: 1.1rem; margin-bottom: 0.5rem; }
/* Sections plus aΓ©rΓ©es sur mobile */
.section { padding: 2.5rem 0; }
h1 { font-size: 1.6rem !important; }
h2 { font-size: 1.35rem !important; }
h3 { font-size: 1.1rem !important; }
/* Prestations list mobile */
.prestation-row {
grid-template-columns: 40px 1fr;
column-gap: 0.5rem;
padding: 1rem 0.5rem;
align-items: start;
}
.prestation-row:hover {
padding-left: 0.5rem; padding-right: 0.5rem;
}
.prestation-num { font-size: 0.75rem; }
.prestation-title { font-size: 1.05rem; }
.prestation-subtitle { font-size: 0.82rem; }
.prestation-desc {
grid-column: 1 / -1;
font-size: 0.85rem;
margin-top: 0.5rem;
padding-right: 0;
}
.prestation-meta {
grid-column: 1 / -1;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-top: 0.6rem;
border-top: 1px dashed var(--border);
margin-top: 0.6rem;
text-align: left;
justify-self: stretch;
}
.prestation-price { font-size: 1.05rem; text-align: left; }
.prestation-price small { display: inline; margin-left: 0.4rem; }
/* Section Prestations en images */
.related-grid.split-3-2 { gap: 0.8rem; }
.related-grid.split-3-2 .row.row-3,
.related-grid.split-3-2 .row.row-2 { grid-template-columns: 1fr; gap: 0.8rem; max-width: 100%; }
.related-card .related-img { aspect-ratio: 16/9; }
.related-card .related-body { padding: 0.95rem 1rem 1.1rem; }
.related-card strong { font-size: 1rem; }
.related-card span { font-size: 0.82rem; }
/* Carte stylisΓ©e sur mobile */
.zones-wrap-final { gap: 1.5rem; }
.zone-map-stylized { padding: 1rem; max-width: 360px; }
.zone-map-stylized.zone-map-large { max-width: 100%; }
/* Process timeline (dΓ©jΓ gΓ©rΓ©) */
.process-timeline { gap: 0.7rem; }
/* Pourquoi OVEO mobile */
.two-col { gap: 1.5rem; }
.why-photo-frame .photo-frame { max-width: 250px; }
.floating-accent {
font-size: 0.78rem; padding: 0.5rem 0.85rem;
}
.floating-accent .icon-acc { width: 28px; height: 28px; font-size: 0.95rem; }
/* TΓ©moignages */
.testimonial { padding: 1.3rem; }
.testimonial p { font-size: 0.92rem; }
/* Form mobile */
.form-grid-aside { gap: 1.2rem; grid-template-columns: 1fr; }
.form-aside-stack { position: static; flex-direction: column; gap: 0.8rem; }
.form-aside-stack .aside-block { padding: 1.1rem 1.2rem; }
.aside-block.featured .urgent-num { font-size: 1.5rem; }
.form-wrap { padding: 1.2rem; }
.form-row { grid-template-columns: 1fr; gap: 0.8rem; margin-bottom: 0.8rem; }
.form-tabs { grid-template-columns: 1fr 1fr 1fr; gap: 0.3rem; padding: 0.3rem; }
.form-tab { padding: 0.55rem 0.5rem; font-size: 0.75rem; min-height: 36px; }
.urgency-radios { grid-template-columns: 1fr; gap: 0.4rem; }
/* Pages services hero */
.svc-page-hero { padding: 2.2rem 0 2rem; }
.svc-page-hero h1 { font-size: 1.7rem !important; }
.svc-page-hero .h1-subtitle { font-size: 0.9rem; }
.svc-page-hero .lead { font-size: 0.95rem; }
.svc-page-hero .hero-actions { flex-direction: column; gap: 0.5rem; }
.svc-page-hero .hero-actions .btn { width: 100%; justify-content: center; }
.svc-page-hero .quick-stats { flex-direction: column; gap: 0.5rem; padding-top: 1rem; }
/* Pages services contenu */
.svc-content-grid { grid-template-columns: 1fr; gap: 1.5rem; }
.svc-aside-sticky { position: static; flex-direction: column; gap: 0.8rem; }
.svc-aside-sticky > * { flex: none; }
/* Symptom grid mobile */
.symptom-grid { grid-template-columns: 1fr; gap: 0.7rem; }
.symptom-card { padding: 1rem 1.1rem; }
/* CTA band mobile */
.cta-band { padding: 2.5rem 0; }
.cta-band h2 { font-size: 1.4rem !important; }
.cta-band .btns { flex-direction: column; gap: 0.5rem; }
.cta-band .btn { width: 100%; justify-content: center; }
/* Float-call */
.float-call { width: 50px; height: 50px; font-size: 1.25rem; bottom: 1rem; right: 1rem; }
/* Footer */
.site-footer { padding: 2.5rem 0 1rem; font-size: 0.88rem; }
.footer-grid { gap: 1.3rem; grid-template-columns: 1fr; }
.footer-brand img.brand-logo-png { height: 50px; }
/* Zone pills */
.zone-pill-v2 { font-size: 0.82rem; padding: 0.5rem 0.85rem; }
.zones-cluster { gap: 0.35rem; }
/* FAQ mobile */
.faq-item summary { padding: 0.95rem 1.1rem; font-size: 0.95rem; }
.faq-item .answer { padding: 0 1.1rem 1rem; font-size: 0.88rem; }
}
/* Très petits écrans */
@media (max-width: 380px) {
.container { padding: 0 0.7rem; }
h1 { font-size: 1.45rem !important; }
h2 { font-size: 1.2rem !important; }
.hero h1 { font-size: 1.45rem !important; }
.est-opt { padding: 0.7rem 0.85rem; }
.est-opt strong { font-size: 0.88rem; }
}
/* =========================================================
============ V11 β MODIFS DU 2026-05-25 ===============
========================================================= */
/* ---------- Hero V11 : photo plombier (paul.jpg fallback) ---------- */
.hero-photo {
background:
linear-gradient(135deg, rgba(14,92,94,0.88) 0%, rgba(20,116,111,0.78) 45%, rgba(14,92,94,0.55) 100%),
url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1600&q=80&auto=format&fit=crop') center/cover no-repeat;
background-color: var(--teal-dark);
}
/* Effets sur les mots-clΓ©s du H1 V11 */
.hero h1 .flash,
.hero h1 .flash-2 {
display: inline-block;
padding: 0 .28em;
border-radius: 8px;
font-weight: 800;
position: relative;
white-space: nowrap;
}
.hero h1 .flash {
color: #FFD37A;
background: linear-gradient(180deg, transparent 58%, rgba(255,107,53,0.88) 58%, rgba(255,184,0,0.92) 100%);
text-shadow: 0 2px 14px rgba(255,107,53,0.45);
}
.hero h1 .flash-2 {
color: #fff;
background: linear-gradient(135deg, rgba(61,207,200,0.55), rgba(255,255,255,0.18));
border: 1.5px solid rgba(255,255,255,0.6);
box-shadow: 0 4px 18px rgba(61,207,200,0.32);
letter-spacing: 0.01em;
}
/* Sous-titre mΓ©tiers : Plombier Β· Chauffagiste Β· Climaticien */
.hero-trades {
display: inline-flex;
align-items: center;
gap: 0.85rem;
margin: 0.4rem 0 1.4rem;
flex-wrap: wrap;
font-family: 'Poppins', 'Inter', sans-serif;
font-weight: 600;
font-size: clamp(1rem, 1.5vw, 1.18rem);
color: rgba(255,255,255,0.95);
letter-spacing: 0.02em;
}
.hero-trades .trade {
display: inline-flex;
align-items: center;
gap: 0.55rem;
}
.hero-trades .trade .ic {
width: 32px; height: 32px;
display: grid; place-items: center;
background: rgba(255,255,255,0.14);
border: 1px solid rgba(255,255,255,0.22);
border-radius: 10px;
font-size: 1rem;
backdrop-filter: blur(6px);
}
.hero-trades .sep {
width: 6px; height: 6px; border-radius: 50%;
background: var(--teal-light); opacity: 0.7;
}
/* Liste des qualitΓ©s (checks) sous le hero */
.hero-checks {
list-style: none; padding: 0; margin: 1.6rem 0 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.7rem 1.2rem;
}
.hero-checks li {
display: flex;
align-items: flex-start;
gap: 0.7rem;
font-size: 0.98rem;
color: rgba(255,255,255,0.95);
font-weight: 500;
line-height: 1.35;
}
.hero-checks li::before {
content: "β";
flex: 0 0 auto;
width: 24px; height: 24px;
display: grid; place-items: center;
background: var(--teal-light);
color: var(--teal-dark);
border-radius: 50%;
font-weight: 800;
font-size: 0.85rem;
margin-top: 1px;
box-shadow: 0 2px 8px rgba(61,207,200,0.35);
}
@media (max-width: 720px) {
.hero-checks { grid-template-columns: 1fr; }
}
/* ---------- Barre stats flottante (overlap hero β) ---------- */
.stats-overlap-wrap {
position: relative;
z-index: 5;
margin-top: -3.2rem; /* fait empiΓ©ter sur le hero */
margin-bottom: 1.5rem;
}
.stats-overlap-wrap .container { padding: 0 1.5rem; }
.stats-bar {
background: #fff;
border-radius: var(--radius-lg);
box-shadow: 0 18px 48px rgba(14,92,94,0.18), 0 4px 12px rgba(14,92,94,0.08);
border: 1px solid var(--border);
display: grid;
grid-template-columns: repeat(4, 1fr);
overflow: hidden;
}
.stats-bar .stats-cell {
padding: 1.4rem 1.2rem;
display: flex; flex-direction: column; align-items: center;
text-align: center;
position: relative;
}
.stats-bar .stats-cell + .stats-cell::before {
content: "";
position: absolute; left: 0; top: 22%; bottom: 22%;
width: 1px; background: var(--border);
}
.stats-bar .stats-cell .icon-stat {
width: 44px; height: 44px;
border-radius: 12px;
background: var(--teal-soft);
color: var(--teal-dark);
display: grid; place-items: center;
font-size: 1.25rem;
margin-bottom: 0.65rem;
}
.stats-bar .stats-cell .num {
font-family: 'Poppins', sans-serif;
font-weight: 800;
font-size: 1.85rem;
line-height: 1;
background: linear-gradient(135deg, var(--teal-dark), var(--teal-light));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.02em;
}
.stats-bar .stats-cell .label {
font-size: 0.85rem;
color: var(--text-soft);
margin-top: 0.35rem;
font-weight: 500;
}
@media (max-width: 820px) {
.stats-overlap-wrap { margin-top: -1.5rem; }
.stats-bar { grid-template-columns: repeat(2, 1fr); }
.stats-bar .stats-cell:nth-child(3)::before { display: none; }
}
@media (max-width: 480px) {
.stats-bar .stats-cell { padding: 1rem 0.7rem; }
.stats-bar .stats-cell .num { font-size: 1.4rem; }
.stats-bar .stats-cell .label { font-size: 0.76rem; }
.stats-bar .stats-cell .icon-stat { width: 36px; height: 36px; font-size: 1rem; margin-bottom: 0.4rem; }
}
/* ---------- Section "L'Γ©quipe OVEO" (portΓ©e du V5-Apple) ---------- */
.team-section-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 3rem;
align-items: center;
}
.team-shot {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
aspect-ratio: 4 / 5;
background: linear-gradient(160deg, var(--teal-dark), var(--teal-light));
}
.team-shot img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.team-shot::after {
content: '';
position: absolute;
inset: auto 0 0 0;
height: 50%;
background: linear-gradient(180deg, transparent, rgba(0,0,0,0.55));
pointer-events: none;
}
.team-shot-caption {
position: absolute;
bottom: 18px; left: 18px; right: 18px;
z-index: 2;
display: flex; gap: 8px; flex-wrap: wrap;
align-items: center;
}
.team-shot-caption .pill {
background: rgba(255,255,255,0.96);
padding: 6px 14px;
border-radius: 999px;
font-size: 0.84rem;
font-weight: 600;
color: var(--teal-dark);
display: inline-flex;
align-items: center;
gap: 6px;
backdrop-filter: blur(6px);
}
.team-shot-caption .pill.brand {
background: var(--teal-dark);
color: #fff;
letter-spacing: 1px;
}
.team-shot.placeholder::before {
content: 'π· Photo Γ remplacer';
position: absolute;
top: 12px; right: 12px;
background: rgba(0,0,0,0.55);
color: #fff;
font-size: 0.7rem;
padding: 4px 10px;
border-radius: 999px;
font-weight: 500;
letter-spacing: 0.5px;
z-index: 3;
backdrop-filter: blur(4px);
}
.team-mini-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 1.6rem;
}
.team-mini {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.05rem;
transition: all var(--transition);
}
.team-mini:hover {
border-color: var(--teal-light);
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.team-mini .ic {
width: 38px; height: 38px;
background: var(--teal-soft);
color: var(--teal-dark);
border-radius: 10px;
display: grid; place-items: center;
font-size: 1.1rem;
margin-bottom: 10px;
}
.team-mini h4 {
font-size: 0.98rem;
margin-bottom: 4px;
color: var(--teal-dark);
letter-spacing: -0.01em;
}
.team-mini p {
font-size: 0.85rem;
color: var(--text-soft);
margin: 0;
line-height: 1.45;
}
@media (max-width: 980px) {
.team-section-grid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 600px) {
.team-mini-grid { grid-template-columns: 1fr; }
.team-shot { aspect-ratio: 4 / 3; }
}
/* ---------- Pages services V11 : Problèmes / Solutions / Bénéfices ---------- */
.svc-problem-list,
.svc-action-list {
list-style: none;
padding: 0;
margin: 1.2rem 0 1.4rem;
display: flex;
flex-direction: column;
gap: 12px;
}
.svc-problem-list li,
.svc-action-list li {
display: grid;
grid-template-columns: 44px 1fr;
gap: 14px;
align-items: flex-start;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1rem 1.15rem;
transition: all var(--transition);
}
.svc-problem-list li {
border-left: 3px solid #FFB400;
}
.svc-action-list li {
border-left: 3px solid var(--teal-light);
}
.svc-problem-list li:hover,
.svc-action-list li:hover {
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
.svc-problem-list .ic,
.svc-action-list .ic {
width: 44px; height: 44px;
border-radius: 10px;
display: grid; place-items: center;
font-size: 1.2rem;
flex-shrink: 0;
}
.svc-problem-list .ic {
background: rgba(255,180,0,0.12);
color: #B27800;
}
.svc-action-list .ic {
background: var(--teal-soft);
color: var(--teal-dark);
}
.svc-problem-list .item-title,
.svc-action-list .item-title {
font-weight: 700;
color: var(--teal-dark);
font-family: 'Poppins', sans-serif;
font-size: 1rem;
margin-bottom: 0.2rem;
letter-spacing: -0.01em;
}
.svc-problem-list .item-desc,
.svc-action-list .item-desc {
font-size: 0.92rem;
color: var(--text-soft);
line-height: 1.5;
margin: 0;
}
/* Petit texte d'intro sous les listes problèmes/solutions */
.svc-list-blurb {
background: var(--bg-soft);
border-radius: var(--radius);
padding: 0.95rem 1.15rem;
font-size: 0.92rem;
color: var(--text-soft);
line-height: 1.55;
margin-top: 0.4rem;
border-left: 3px solid var(--teal-light);
}
.svc-list-blurb strong { color: var(--teal-dark); }
/* Encarts bΓ©nΓ©fices (4 cards en grid) */
.benefit-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-top: 1.5rem;
}
.benefit-card {
background: linear-gradient(140deg, #fff 0%, var(--teal-soft) 100%);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.4rem 1.2rem;
transition: all var(--transition);
position: relative;
overflow: hidden;
}
.benefit-card::before {
content: "";
position: absolute;
top: -40px; right: -40px;
width: 120px; height: 120px;
background: radial-gradient(circle, rgba(61,207,200,0.2), transparent 70%);
pointer-events: none;
}
.benefit-card:hover {
border-color: var(--teal-light);
transform: translateY(-4px);
box-shadow: var(--shadow);
}
.benefit-card .ic {
width: 46px; height: 46px;
border-radius: 12px;
background: var(--teal-dark);
color: #fff;
display: grid; place-items: center;
font-size: 1.3rem;
margin-bottom: 0.85rem;
}
.benefit-card h4 {
font-size: 1.05rem;
color: var(--teal-dark);
margin-bottom: 0.4rem;
letter-spacing: -0.01em;
}
.benefit-card p {
font-size: 0.88rem;
color: var(--text-soft);
margin: 0;
line-height: 1.5;
}
@media (max-width: 980px) {
.benefit-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
.benefit-cards { grid-template-columns: 1fr; }
.svc-problem-list li,
.svc-action-list li { grid-template-columns: 38px 1fr; gap: 10px; padding: 0.85rem 1rem; }
.svc-problem-list .ic,
.svc-action-list .ic { width: 38px; height: 38px; font-size: 1rem; }
}
/* Sub-section heading pour pages services V11 */
.svc-section-head {
margin-bottom: 0.6rem;
}
.svc-section-head .eyebrow { margin-bottom: 0.45rem; }
.svc-section-head h2 { margin-bottom: 0.4rem; }
.svc-section-head .h-sub {
color: var(--text-soft);
font-size: 0.98rem;
margin: 0 0 0.4rem;
line-height: 1.55;
}
/* ---------- Form contact V11 : form plus large / aside rΓ©duit ---------- */
.form-grid-aside.form-grid-large {
grid-template-columns: 2.1fr 1fr;
gap: 2rem;
}
.form-grid-aside.form-grid-large .form-wrap {
padding: 2.2rem 2.4rem;
}
.form-grid-aside.form-grid-large .aside-block {
padding: 1.1rem 1.25rem;
}
.form-grid-aside.form-grid-large .aside-block h3 { font-size: 1rem; }
.form-grid-aside.form-grid-large .aside-block p { font-size: 0.86rem; margin-bottom: 0.5rem; }
.form-grid-aside.form-grid-large .aside-block.featured .urgent-num {
font-size: 1.45rem; margin: 0.35rem 0 0.7rem;
}
.form-grid-aside.form-grid-large .aside-block.featured .btn-outline-light {
padding: 0.6rem 1rem; font-size: 0.88rem;
}
.form-grid-aside.form-grid-large .form-aside-stack { gap: 0.7rem; }
@media (max-width: 980px) {
.form-grid-aside.form-grid-large { grid-template-columns: 1fr; }
}
/* ---------- Avis sur zones-intervention (2 lignes de 3) ---------- */
.reviews-2x3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.4rem;
}
@media (max-width: 900px) {
.reviews-2x3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.reviews-2x3 { grid-template-columns: 1fr; }
}
/* ---------- Padding du hero V11 plus aΓ©rΓ© pour laisser place Γ la barre ---------- */
.hero-photo.hero-tight { padding-bottom: 7.5rem; }
/* =========================================================
============ V12 β MODIFS DU 2026-05-25 (suite) =======
========================================================= */
/* ---------- Hero V12 : sous-titre mΓ©tiers en top, propre ---------- */
.hero .hero-top {
text-align: center;
margin-bottom: 1.8rem;
}
.hero .hero-top .eyebrow {
display: block;
margin-bottom: 0.55rem;
color: rgba(255,255,255,0.78);
font-size: 0.8rem;
letter-spacing: 2.5px;
}
.hero .hero-trades-clean {
display: inline-flex;
align-items: center;
gap: 0.7rem;
font-family: 'Poppins', 'Inter', sans-serif;
font-weight: 600;
font-size: clamp(0.98rem, 1.4vw, 1.15rem);
color: #fff;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.hero .hero-trades-clean .trades-sep {
color: var(--teal-light);
font-weight: 400;
opacity: 0.85;
}
/* H1 sur 2 lignes avec surlignage simple */
.hero h1.hero-h1-stack {
font-size: clamp(2.1rem, 4.4vw, 3.4rem);
line-height: 1.18;
margin-bottom: 1.4rem;
color: #fff;
}
.hero h1.hero-h1-stack .h1-line {
display: block;
}
.hero h1.hero-h1-stack .hl {
display: inline-block;
background: linear-gradient(180deg, transparent 62%, rgba(255,107,53,0.92) 62%, rgba(255,107,53,0.92) 100%);
padding: 0 .18em;
color: #fff;
font-weight: 800;
border-radius: 2px;
}
/* Anciens effets retirΓ©s (V11 β V12 cleanup) */
.hero h1 .flash,
.hero h1 .flash-2 {
background: none !important;
text-shadow: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
color: inherit !important;
}
/* La grille passe en pleine largeur pour le cΓ΄tΓ© gauche centrΓ© */
.hero .hero-grid > div.reveal { text-align: left; }
.hero .hero-grid > div.reveal .hero-top { text-align: center; }
/* Stats bar V12 : variante sans icΓ΄nes (plus respirante) */
.stats-bar.stats-bar-clean .stats-cell { padding: 1.5rem 1.2rem 1.4rem; }
.stats-bar.stats-bar-clean .stats-cell .icon-stat { display: none; }
.stats-bar.stats-bar-clean .stats-cell .num {
font-size: 2.1rem;
}
.stats-bar.stats-bar-clean .stats-cell .label {
font-size: 0.88rem;
margin-top: 0.45rem;
}
@media (max-width: 480px) {
.stats-bar.stats-bar-clean .stats-cell .num { font-size: 1.5rem; }
.stats-bar.stats-bar-clean .stats-cell .label { font-size: 0.78rem; }
}
/* Service hero variante "tight" pour faire place Γ la barre stats */
.service-hero-photo.service-hero-tight { padding-bottom: 5.5rem; }
/* ---------- Pages services V12 : listes polish + bΓ©nΓ©fices refonte ---------- */
/* Listes problèmes/solutions : plus subtiles, meilleures interactions */
.svc-problem-list li,
.svc-action-list li {
border-radius: 14px;
padding: 1.1rem 1.25rem;
background: #fff;
border: 1px solid var(--border);
border-left-width: 4px;
box-shadow: 0 1px 0 rgba(14,92,94,0.03);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.svc-problem-list li { border-left-color: #F59E0B; }
.svc-action-list li { border-left-color: var(--teal); }
.svc-problem-list li:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(245,158,11,0.10);
border-color: rgba(245,158,11,0.35);
border-left-color: #F59E0B;
}
.svc-action-list li:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(14,92,94,0.12);
border-color: var(--teal-light);
border-left-color: var(--teal-dark);
}
.svc-problem-list .ic,
.svc-action-list .ic {
width: 42px; height: 42px;
border-radius: 12px;
font-size: 1.15rem;
}
.svc-problem-list .ic {
background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(245,158,11,0.08));
color: #B97500;
}
.svc-action-list .ic {
background: linear-gradient(135deg, var(--teal-soft), rgba(61,207,200,0.18));
color: var(--teal-dark);
}
.svc-problem-list .item-title,
.svc-action-list .item-title {
font-size: 1.02rem;
margin-bottom: 0.25rem;
}
.svc-list-blurb {
background: linear-gradient(135deg, #fff 0%, var(--bg-soft) 100%);
border: 1px solid var(--border);
border-left: 3px solid var(--teal-light);
padding: 1rem 1.2rem;
border-radius: 12px;
margin-top: 0.6rem;
font-size: 0.94rem;
}
/* BΓ©nΓ©fices V12 : agencement 2x2 plus aΓ©rΓ© + look pro */
.benefit-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.2rem;
margin-top: 1.5rem;
}
.benefit-card {
display: grid;
grid-template-columns: 56px 1fr;
gap: 1rem;
align-items: flex-start;
background: #fff;
border: 1px solid var(--border);
border-radius: 16px;
padding: 1.4rem 1.5rem;
box-shadow: 0 1px 0 rgba(14,92,94,0.03);
position: relative;
overflow: hidden;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.benefit-card::before {
content: "";
position: absolute;
top: 0; right: 0;
width: 100px; height: 100px;
background: radial-gradient(circle, rgba(61,207,200,0.12), transparent 70%);
transform: translate(35%, -35%);
pointer-events: none;
}
.benefit-card:hover {
transform: translateY(-3px);
box-shadow: 0 16px 36px rgba(14,92,94,0.12);
border-color: var(--teal-light);
}
.benefit-card .ic {
width: 52px; height: 52px;
border-radius: 14px;
background: linear-gradient(135deg, var(--teal-dark), var(--teal));
color: #fff;
display: grid; place-items: center;
font-size: 1.4rem;
margin: 0;
box-shadow: 0 6px 16px rgba(14,92,94,0.22);
}
.benefit-card h4 {
font-size: 1.08rem;
margin: 0 0 0.35rem;
color: var(--teal-dark);
letter-spacing: -0.01em;
}
.benefit-card p {
font-size: 0.92rem;
color: var(--text-soft);
margin: 0;
line-height: 1.55;
}
@media (max-width: 720px) {
.benefit-cards { grid-template-columns: 1fr; }
}
/* ---------- Formulaires V12 : urgent = orange, autres = vert ---------- */
/* Form-tabs (tabs sur pages services + accueil) */
.form-tabs { gap: 0.5rem; }
.form-tab {
background: #fff;
color: var(--text);
border: 2px solid transparent;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all .2s ease;
font-size: 0.92rem;
}
.form-tab:hover {
background: var(--bg-soft);
color: var(--teal-dark);
}
/* Onglet "urgent" actif β orange plein */
.form-tab.urgent.active,
.form-tab.active.urgent {
background: var(--accent);
color: #fff;
border-color: var(--accent);
box-shadow: 0 4px 14px rgba(255,107,53,0.35);
}
/* Onglet "48h" ou "planifiΓ©" actif β vert plein */
.form-tab.active:not(.urgent) {
background: var(--teal-dark);
color: #fff;
border-color: var(--teal-dark);
box-shadow: 0 4px 14px rgba(14,92,94,0.32);
}
/* Radios (formulaire contact) */
.urgency-radios {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
margin-top: 0.3rem;
}
.urgency-radios label {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.7rem 1.1rem;
border: 2px solid var(--border);
border-radius: 10px;
cursor: pointer;
font-weight: 600;
font-size: 0.92rem;
color: var(--text);
background: #fff;
transition: all .2s ease;
user-select: none;
}
.urgency-radios label:hover {
background: var(--bg-soft);
border-color: var(--teal-light);
}
.urgency-radios input[type="radio"] { accent-color: var(--teal-dark); }
/* Radio "urgent" cochΓ©e β orange plein */
.urgency-radios label.urgent:has(input:checked) {
background: var(--accent);
color: #fff;
border-color: var(--accent);
box-shadow: 0 4px 14px rgba(255,107,53,0.35);
}
.urgency-radios label.urgent:has(input:checked) input[type="radio"] { accent-color: #fff; }
/* Radio "48h" ou "planifiΓ©" cochΓ©e β vert plein */
.urgency-radios label:not(.urgent):has(input:checked) {
background: var(--teal-dark);
color: #fff;
border-color: var(--teal-dark);
box-shadow: 0 4px 14px rgba(14,92,94,0.32);
}
.urgency-radios label:not(.urgent):has(input:checked) input[type="radio"] { accent-color: #fff; }
/* =========================================================
============ V13 β MODIFS DU 2026-05-25 (suite 2) =====
========================================================= */
/* ---------- Hero V13 : surlignage type pinceau couvre-tout, titre blanc ---------- */
.hero h1.hero-h1-stack { color: #fff; }
.hero h1.hero-h1-stack .h1-line { color: #fff; }
/* Override V12 highlight + appliquer effet pinceau orange organique */
.hero h1.hero-h1-stack .hl {
position: relative;
display: inline-block;
color: #fff !important;
font-weight: 800;
padding: 0.08em 0.42em 0.12em;
background: transparent !important;
border-radius: 0;
z-index: 1;
margin: 0 0.05em;
}
.hero h1.hero-h1-stack .hl::before {
content: "";
position: absolute;
inset: -0.05em -0.05em -0.02em;
background: var(--accent);
z-index: -1;
/* Bord organique style pinceau (irregular border-radius) */
border-radius: 22px 12px 26px 14px / 16px 24px 14px 22px;
box-shadow: 0 6px 22px rgba(255,107,53,0.32);
transform: rotate(-0.8deg);
transition: transform .35s ease;
}
.hero h1.hero-h1-stack .hl + .hl::before {
/* Alterne légèrement la rotation pour effet plus organique sur la 2e occurrence */
border-radius: 14px 24px 12px 28px / 22px 16px 24px 14px;
transform: rotate(0.6deg);
}
.hero h1.hero-h1-stack .hl:hover::before {
transform: rotate(-1.5deg) scale(1.02);
}
/* ---------- Hero checks V13 : 1 colonne, orange, espace avec CTA ---------- */
.hero-checks.hero-checks-single {
grid-template-columns: 1fr;
gap: 0.65rem;
margin: 1.4rem 0 0;
}
.hero-checks.hero-checks-single li::before {
background: var(--accent);
color: #fff;
box-shadow: 0 2px 10px rgba(255,107,53,0.45);
}
.hero-cta.hero-cta-spaced { margin-top: 2.2rem; }
/* ---------- Services V13 : fix layout benefit-cards (grid 2 cols stricts) ---------- */
.benefit-card {
display: grid;
grid-template-columns: 56px 1fr;
grid-template-areas:
"icon title"
"icon desc";
column-gap: 1rem;
row-gap: 0.35rem;
padding: 1.5rem 1.6rem;
align-items: start;
}
.benefit-card .ic { grid-area: icon; align-self: start; }
.benefit-card h4 { grid-area: title; margin: 0 0 0.1rem; }
.benefit-card p { grid-area: desc; margin: 0; }
/* ---------- Services V13 : emojis colorés (problèmes) vs noirs (solutions) ---------- */
.svc-problem-list .ic,
.svc-action-list .ic {
background: transparent;
border-radius: 0;
width: 40px;
height: 40px;
font-size: 1.6rem;
line-height: 1;
}
/* Problèmes : emojis en couleur native, sans tinted background */
.svc-problem-list .ic {
filter: none;
color: inherit;
}
/* Solutions : emojis en noir/monochrome */
.svc-action-list .ic {
filter: grayscale(1) brightness(0);
color: #0A2540;
}
/* ---------- Contact V13 : urgency-radios pleine largeur, 3 cols ---------- */
.urgency-radios {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.55rem;
width: 100%;
}
.urgency-radios label {
width: 100%;
justify-content: center;
text-align: center;
padding: 0.85rem 0.7rem;
white-space: nowrap;
}
@media (max-width: 520px) {
.urgency-radios { grid-template-columns: 1fr; }
}
/* =========================================================
============ V14 β MODIFS DU 2026-05-25 (suite 3) =====
========================================================= */
/* ---------- Hero V14 : titre 2 lignes plus courtes ---------- */
.hero h1.hero-h1-stack { text-align: left; }
.hero h1.hero-h1-stack .h1-line + .h1-line { margin-top: 0.4rem; display: block; }
/* ---------- Hero checks V14 : couleur de marque (teal-light) au lieu d'orange ---------- */
.hero-checks.hero-checks-single li::before {
background: var(--teal-light);
color: var(--teal-dark);
box-shadow: 0 2px 10px rgba(61,207,200,0.40);
}
/* ---------- Pages services V14 : emojis listes refonte ---------- */
/* Problèmes : emojis en couleurs natives + halo chaud subtil pour harmoniser */
.svc-problem-list .ic {
background: linear-gradient(135deg, rgba(255,180,0,0.16), rgba(245,158,11,0.08));
border-radius: 12px;
width: 44px;
height: 44px;
font-size: 1.45rem;
filter: none;
color: inherit;
}
/* Solutions : emojis en noir & blanc (grayscale seul, garde la structure) */
.svc-action-list .ic {
background: linear-gradient(135deg, rgba(14,92,94,0.08), rgba(20,116,111,0.04));
border-radius: 12px;
width: 44px;
height: 44px;
font-size: 1.45rem;
filter: grayscale(1) contrast(0.95);
color: inherit;
}
/* ---------- Defensive V14 : estimator-block + ses enfants forcΓ©s cliquables ---------- */
.estimator-block {
position: relative;
z-index: 1;
pointer-events: auto;
}
.estimator-block * {
pointer-events: auto;
}
.estimator-block button,
.estimator-block input,
.estimator-block select,
.estimator-block textarea,
.estimator-block label,
.estimator-block .est-tab,
.estimator-block .est-opt,
.estimator-block .btn {
position: relative;
z-index: 2;
pointer-events: auto !important;
cursor: pointer;
}
.estimator-block input,
.estimator-block select,
.estimator-block textarea {
cursor: text;
}
/* =========================================================
============ V15 β MODIFS DU 2026-05-25 (suite 4) =====
========================================================= */
/* ---------- Hero V15 : eyebrow + trades centrΓ©s au-dessus, full-width ---------- */
.hero .hero-top.hero-top-centered {
text-align: center;
margin: 0 auto 2.4rem;
padding-top: 0.5rem;
}
.hero .hero-top.hero-top-centered .eyebrow {
display: block;
color: rgba(255,255,255,0.78);
font-size: 0.82rem;
letter-spacing: 2.5px;
margin-bottom: 0.7rem;
}
.hero .hero-top.hero-top-centered .hero-trades-clean {
display: inline-flex;
justify-content: center;
font-size: clamp(1rem, 1.45vw, 1.18rem);
color: #fff;
}
/* ---------- 5 STYLES DE LISTES (1 par page service) ---------- */
/* Style A β dΓ©pannage : "Cards bordure colorΓ©e + grand emoji rond" (par dΓ©faut, dΓ©jΓ appliquΓ©) */
/* (cf. CSS V11/V12/V13/V14 plus haut) */
/* Style B β chauffe-eau : "Timeline verticale numΓ©rotΓ©e" */
.svc-list-style-B .svc-problem-list,
.svc-list-style-B .svc-action-list {
counter-reset: svc-item;
padding-left: 0;
position: relative;
}
.svc-list-style-B .svc-problem-list::before,
.svc-list-style-B .svc-action-list::before {
content: "";
position: absolute;
left: 22px; top: 12px; bottom: 12px;
width: 2px;
background: linear-gradient(180deg, var(--teal-light), var(--teal-soft));
z-index: 0;
}
.svc-list-style-B .svc-problem-list li,
.svc-list-style-B .svc-action-list li {
counter-increment: svc-item;
grid-template-columns: 46px 1fr;
background: transparent;
border: none;
border-left: none;
padding: 0.5rem 0 0.5rem 0;
box-shadow: none;
position: relative;
z-index: 1;
}
.svc-list-style-B .svc-problem-list li:hover,
.svc-list-style-B .svc-action-list li:hover {
transform: none;
box-shadow: none;
}
.svc-list-style-B .svc-problem-list li > div,
.svc-list-style-B .svc-action-list li > div {
background: #fff;
border: 1px solid var(--border);
border-radius: 12px;
padding: 0.9rem 1.1rem;
transition: all .2s ease;
}
.svc-list-style-B .svc-problem-list li > div:hover { border-color: #F59E0B; box-shadow: 0 6px 16px rgba(245,158,11,0.08); }
.svc-list-style-B .svc-action-list li > div:hover { border-color: var(--teal); box-shadow: 0 6px 16px rgba(14,92,94,0.08); }
.svc-list-style-B .svc-problem-list .ic,
.svc-list-style-B .svc-action-list .ic {
background: #fff;
border: 2px solid var(--border);
border-radius: 50%;
width: 44px; height: 44px;
font-size: 0.95rem;
font-weight: 700;
font-family: 'Poppins', sans-serif;
color: var(--teal-dark);
display: grid; place-items: center;
filter: none;
margin-top: 0;
}
.svc-list-style-B .svc-problem-list .ic::before,
.svc-list-style-B .svc-action-list .ic::before {
content: counter(svc-item, decimal-leading-zero);
}
.svc-list-style-B .svc-problem-list .ic { color: #B97500; border-color: #FCD9A1; }
.svc-list-style-B .svc-action-list .ic { color: var(--teal-dark); border-color: var(--teal-light); }
/* Style C β entretien-chaudiΓ¨re : "Tags pleins arrondis style chip" */
.svc-list-style-C .svc-problem-list,
.svc-list-style-C .svc-action-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.svc-list-style-C .svc-problem-list li,
.svc-list-style-C .svc-action-list li {
display: flex;
align-items: center;
gap: 14px;
background: var(--teal-soft);
border: none;
border-radius: 999px;
padding: 0.65rem 1.3rem 0.65rem 0.65rem;
box-shadow: none;
}
.svc-list-style-C .svc-problem-list li { background: linear-gradient(90deg, rgba(255,237,213,1), rgba(255,247,237,0.7)); }
.svc-list-style-C .svc-action-list li { background: linear-gradient(90deg, var(--teal-soft), rgba(230,247,245,0.6)); }
.svc-list-style-C .svc-problem-list li:hover,
.svc-list-style-C .svc-action-list li:hover {
transform: translateX(3px);
box-shadow: 0 4px 14px rgba(14,92,94,0.08);
}
.svc-list-style-C .svc-problem-list .ic,
.svc-list-style-C .svc-action-list .ic {
width: 40px; height: 40px;
border-radius: 50%;
background: #fff;
font-size: 1.3rem;
flex-shrink: 0;
filter: none;
display: grid; place-items: center;
}
.svc-list-style-C .svc-problem-list .ic { box-shadow: 0 2px 8px rgba(245,158,11,0.25); }
.svc-list-style-C .svc-action-list .ic { box-shadow: 0 2px 8px rgba(14,92,94,0.15); }
.svc-list-style-C .svc-problem-list .item-title,
.svc-list-style-C .svc-action-list .item-title { font-size: 0.98rem; margin: 0; line-height: 1.3; }
.svc-list-style-C .svc-problem-list .item-desc,
.svc-list-style-C .svc-action-list .item-desc { font-size: 0.85rem; margin: 0.15rem 0 0; }
/* Style D β entretien-climatisation : "Bento cards grid 2 cols" */
.svc-list-style-D .svc-problem-list,
.svc-list-style-D .svc-action-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.svc-list-style-D .svc-problem-list li,
.svc-list-style-D .svc-action-list li {
display: block;
background: #fff;
border: 1px solid var(--border);
border-radius: 16px;
padding: 1.4rem 1.4rem 1.2rem;
box-shadow: var(--shadow-sm);
border-left: none;
position: relative;
overflow: hidden;
}
.svc-list-style-D .svc-problem-list li { background: linear-gradient(135deg, #fff 0%, rgba(254,243,199,0.4) 100%); }
.svc-list-style-D .svc-action-list li { background: linear-gradient(135deg, #fff 0%, var(--teal-soft) 100%); }
.svc-list-style-D .svc-problem-list li:hover,
.svc-list-style-D .svc-action-list li:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(14,92,94,0.10);
}
.svc-list-style-D .svc-problem-list .ic,
.svc-list-style-D .svc-action-list .ic {
width: 48px; height: 48px;
font-size: 1.6rem;
margin-bottom: 0.7rem;
background: rgba(255,255,255,0.85);
border-radius: 14px;
display: grid; place-items: center;
filter: none;
box-shadow: 0 2px 8px rgba(14,92,94,0.08);
}
.svc-list-style-D .svc-problem-list .item-title,
.svc-list-style-D .svc-action-list .item-title { font-size: 1.05rem; margin: 0 0 0.3rem; }
.svc-list-style-D .svc-problem-list .item-desc,
.svc-list-style-D .svc-action-list .item-desc { font-size: 0.92rem; }
@media (max-width: 720px) {
.svc-list-style-D .svc-problem-list,
.svc-list-style-D .svc-action-list { grid-template-columns: 1fr; }
}
/* Style E β dΓ©sembouage : "Checklist minimaliste avec barre verticale" */
.svc-list-style-E .svc-problem-list,
.svc-list-style-E .svc-action-list {
padding-left: 1rem;
border-left: 3px solid var(--teal-soft);
margin-left: 0;
}
.svc-list-style-E .svc-problem-list { border-left-color: #FCD9A1; }
.svc-list-style-E .svc-action-list { border-left-color: var(--teal-light); }
.svc-list-style-E .svc-problem-list li,
.svc-list-style-E .svc-action-list li {
background: transparent;
border: none;
border-left: none;
border-bottom: 1px dashed var(--border);
border-radius: 0;
padding: 1rem 0.5rem 1rem 0;
box-shadow: none;
grid-template-columns: 28px 1fr;
gap: 14px;
}
.svc-list-style-E .svc-problem-list li:last-child,
.svc-list-style-E .svc-action-list li:last-child { border-bottom: none; }
.svc-list-style-E .svc-problem-list li:hover,
.svc-list-style-E .svc-action-list li:hover {
transform: translateX(4px);
box-shadow: none;
}
.svc-list-style-E .svc-problem-list .ic,
.svc-list-style-E .svc-action-list .ic {
width: 28px; height: 28px;
background: transparent;
border-radius: 0;
font-size: 1.4rem;
font-weight: 700;
filter: none;
align-items: start;
justify-content: flex-start;
display: inline-flex;
}
.svc-list-style-E .svc-problem-list .item-title,
.svc-list-style-E .svc-action-list .item-title {
font-size: 1.05rem;
margin-bottom: 0.25rem;
}
.svc-list-style-E .svc-problem-list .item-desc,
.svc-list-style-E .svc-action-list .item-desc { font-size: 0.92rem; }
/* =========================================================
============ V16 β STYLE B refonte (2026-05-25) =======
========================================================= */
/* Style B v2 β Bullet centrΓ© verticalement + fond plein colorΓ© + chiffre blanc */
.svc-list-style-B .svc-problem-list li,
.svc-list-style-B .svc-action-list li {
align-items: center; /* β centre vertical de la bulle dans l'encart */
gap: 16px;
}
/* Bulle problèmes : ambre/orange plein, chiffre blanc */
.svc-list-style-B .svc-problem-list .ic {
background: linear-gradient(135deg, #F59E0B, #EA8A00);
border: none;
color: #fff;
font-size: 1.02rem;
font-weight: 800;
width: 46px;
height: 46px;
box-shadow: 0 4px 12px rgba(245,158,11,0.40);
}
/* Bulle solutions : teal plein, chiffre blanc */
.svc-list-style-B .svc-action-list .ic {
background: linear-gradient(135deg, var(--teal-dark), var(--teal));
border: none;
color: #fff;
font-size: 1.02rem;
font-weight: 800;
width: 46px;
height: 46px;
box-shadow: 0 4px 12px rgba(14,92,94,0.32);
}
/* Le contenu emoji est cachΓ© β on n'affiche QUE le counter */
.svc-list-style-B .svc-problem-list .ic,
.svc-list-style-B .svc-action-list .ic {
font-size: 0; /* cache le contenu (emoji inline) */
}
.svc-list-style-B .svc-problem-list .ic::before,
.svc-list-style-B .svc-action-list .ic::before {
content: counter(svc-item, decimal-leading-zero);
font-size: 1.02rem;
font-weight: 800;
font-family: 'Poppins', 'Inter', sans-serif;
letter-spacing: -0.02em;
}
/* Légère anim pour le hover */
.svc-list-style-B .svc-problem-list li:hover .ic { transform: scale(1.06); transition: transform .25s ease; }
.svc-list-style-B .svc-action-list li:hover .ic { transform: scale(1.06); transition: transform .25s ease; }
/* La ligne timeline reste mais plus douce, ne dΓ©passe pas */
.svc-list-style-B .svc-problem-list::before { background: linear-gradient(180deg, #FCD9A1, rgba(252,217,161,0.2)); }
.svc-list-style-B .svc-action-list::before { background: linear-gradient(180deg, var(--teal-light), rgba(61,207,200,0.2)); }
/* =========================================================
============ V17 β STYLE B : EMOJIS dans bulle ========
========================================================= */
/* Restaurer l'affichage de l'emoji et masquer le counter */
.svc-list-style-B .svc-problem-list .ic,
.svc-list-style-B .svc-action-list .ic {
font-size: 1.35rem; /* l'emoji est visible */
line-height: 1;
filter: none; /* emoji en couleurs natives */
}
.svc-list-style-B .svc-problem-list .ic::before,
.svc-list-style-B .svc-action-list .ic::before {
content: none; /* plus de numΓ©ro */
}
/* =========================================================
============ V18 β SEO/GEO 2026-05-25 =================
========================================================= */
/* Trust badge E-E-A-T (page Γ propos) */
.trust-badge-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.4rem;
margin: 0 auto;
max-width: 1080px;
}
.trust-badge {
display: grid;
grid-template-columns: 56px 1fr;
gap: 1.2rem;
align-items: start;
background: linear-gradient(135deg, #fff 0%, var(--teal-soft) 100%);
border: 1px solid var(--border);
border-radius: 16px;
padding: 1.5rem 1.7rem;
box-shadow: 0 4px 14px rgba(14,92,94,0.06);
}
.trust-badge-ic {
width: 52px; height: 52px;
border-radius: 14px;
background: linear-gradient(135deg, var(--teal-dark), var(--teal));
color: #fff;
display: grid; place-items: center;
font-size: 1.5rem;
box-shadow: 0 6px 16px rgba(14,92,94,0.22);
}
.trust-badge-body strong {
display: block;
font-family: 'Poppins', sans-serif;
font-weight: 700;
color: var(--teal-dark);
font-size: 1.05rem;
margin-bottom: 0.4rem;
letter-spacing: -0.01em;
}
.trust-badge-body p {
margin: 0;
font-size: 0.93rem;
line-height: 1.55;
color: var(--text-soft);
}
@media (max-width: 800px) {
.trust-badge-row { grid-template-columns: 1fr; }
}
/* Petite icΓ΄ne footer dΓ©cennale */
.footer-contact-line:has(strong:contains("Garantie")) {
font-size: 0.86rem;
}
/* =========================================================
============ V19 β modifs 2026-05-25 ==================
========================================================= */
/* Hero : rΓ©duire espace au-dessus de l'eyebrow */
.hero { padding-top: 3rem; }
.hero .hero-top.hero-top-centered { padding-top: 0; margin-bottom: 1.8rem; }
/* Header : retire le texte "OVEO", garde logo + tag stackΓ© */
/* V44 (2026-05-27) : align-items center β logo OVEO centrΓ© horizontalement sur la tagline */
.brand { flex-direction: column; align-items: center; gap: 0.25rem; }
.brand img.brand-logo-png { height: 56px; }
.brand .brand-name { display: none; }
.brand .brand-text { display: block; line-height: 1; text-align: center; }
.brand .brand-tag {
font-size: 0.7rem;
letter-spacing: 1.5px;
color: var(--muted);
text-transform: uppercase;
display: block;
margin-top: 0.25rem;
text-align: center;
}
/* Section eyebrow + h2 : un peu plus d'espace sur les pages services */
.svc-section-head { margin-bottom: 1rem; }
.svc-section-head .eyebrow { margin-bottom: 0.7rem; display: inline-block; }
.svc-section-head h2 { margin-top: 0.3rem; }
/* Section equipe : boutons CTA full-width 50/50 + contour lΓ©ger sur appel */
.team-cta-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.team-cta-row .btn {
justify-content: center;
width: 100%;
padding: 0.95rem 1.2rem;
}
.btn-light.btn-with-border {
border: 2px solid var(--teal-dark);
background: #fff;
color: var(--teal-dark);
box-shadow: 0 2px 8px rgba(14,92,94,0.10);
}
.btn-light.btn-with-border:hover {
background: var(--teal-soft);
border-color: var(--teal);
color: var(--teal-dark);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(14,92,94,0.18);
}
@media (max-width: 500px) {
.team-cta-row { grid-template-columns: 1fr; }
}
/* Aside featured contact : numΓ©ro de tel Γ droite dans un bouton visible */
.aside-block.featured.aside-block-phone-row {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
column-gap: 1rem;
row-gap: 0.85rem;
align-items: center;
}
.aside-block.aside-block-phone-row .aside-left {
grid-column: 1; grid-row: 1;
display: flex; flex-direction: column; gap: 0.3rem;
}
.aside-block.aside-block-phone-row .aside-left .label { margin-bottom: 0; }
.aside-block.aside-block-phone-row .aside-left h3 { margin-bottom: 0; }
.aside-block.aside-block-phone-row .phone-btn-cta {
grid-column: 2; grid-row: 1;
background: var(--accent);
color: #fff;
padding: 0.85rem 1.4rem;
border-radius: 50px;
font-weight: 700;
font-size: 1.02rem;
letter-spacing: 0.3px;
display: inline-flex;
align-items: center;
gap: 0.4rem;
box-shadow: 0 4px 14px rgba(255,107,53,0.40);
text-decoration: none !important;
white-space: nowrap;
font-family: 'Poppins', sans-serif;
transition: all .2s ease;
}
.aside-block.aside-block-phone-row .phone-btn-cta::before {
content: "π";
font-size: 1.05rem;
}
.aside-block.aside-block-phone-row .phone-btn-cta:hover {
background: var(--accent-dark);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255,107,53,0.55);
}
.aside-block.aside-block-phone-row .btn-outline-light {
grid-column: 1 / -1;
grid-row: 2;
margin-top: 0;
}
@media (max-width: 560px) {
.aside-block.aside-block-phone-row { grid-template-columns: 1fr; }
.aside-block.aside-block-phone-row .phone-btn-cta {
grid-column: 1; grid-row: 2;
justify-content: center;
}
.aside-block.aside-block-phone-row .btn-outline-light { grid-row: 3; }
}
/* Retour à la ligne après chaque point : style pour les br injectés via JS */
.dot-break::after { content: ""; display: block; height: 0; }
.svc-content-main br.dot-br + br.dot-br { display: none; }
/* =========================================================
============ V20 β Couleur teal peps (2026-05-25) =====
========================================================= */
/* Override des variables : passe du teal très foncé à un teal médian peps,
inspirΓ© du dΓ©gradΓ© du logo OVEO (entre dark et light). */
:root {
--teal-dark: #178A82; /* Γ©tait #0E5C5E β plus vivant, intermΓ©diaire logo */
--teal: #1FA39A; /* Γ©tait #14746F β peps */
--teal-light: #3DCFC8; /* inchangΓ© β accent bright */
--teal-soft: #DFF5F3; /* légèrement plus saturé pour cohérence (était #E6F7F5) */
--bg-dark: #178A82; /* synchronisΓ© avec teal-dark */
--shadow-sm: 0 2px 6px rgba(23,138,130,0.10);
--shadow: 0 6px 18px rgba(23,138,130,0.14);
--shadow-lg: 0 12px 36px rgba(23,138,130,0.20);
}
/* Quelques refresh pour les Γ©lΓ©ments qui utilisent les anciens RGB hardcodΓ©s */
.hero {
background: linear-gradient(135deg, #0E5C5E 0%, var(--teal-dark) 35%, var(--teal) 70%, var(--teal-light) 100%);
}
.hero-photo {
background:
linear-gradient(135deg, rgba(14,92,94,0.82) 0%, rgba(23,138,130,0.72) 45%, rgba(31,163,154,0.55) 100%),
url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1600&q=80&auto=format&fit=crop') center/cover no-repeat;
background-color: var(--teal-dark);
}
.cta-band {
background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal) 100%);
}
.svc-page-hero {
background: linear-gradient(135deg, var(--teal-dark), var(--teal));
}
.btn-primary {
background: var(--teal-dark);
}
.btn-primary:hover {
background: var(--teal);
box-shadow: 0 6px 20px rgba(23,138,130,0.32);
}
/* =========================================================
============ V21 β Heroes services peps (2026-05-25) =
========================================================= */
/* Hero des pages services : fond multi-stops + blobs animΓ©s + grain */
.svc-page-hero {
background: linear-gradient(135deg,
#0E5C5E 0%,
var(--teal-dark) 25%,
var(--teal) 55%,
#2BB5AC 80%,
var(--teal-light) 100%);
position: relative;
overflow: hidden;
isolation: isolate;
}
/* Couche : grand blob jaune/orange peps en haut-droite */
.svc-page-hero::before {
content: "";
position: absolute;
top: -180px; right: -180px;
width: 520px; height: 520px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,184,0,0.22) 0%, rgba(255,107,53,0.10) 45%, transparent 75%);
filter: blur(20px);
animation: heroBlobA 18s ease-in-out infinite;
z-index: 0;
}
/* Couche : blob teal lumineux bas-gauche */
.svc-page-hero::after {
content: "";
position: absolute;
bottom: -200px; left: -120px;
width: 460px; height: 460px;
border-radius: 50%;
background: radial-gradient(circle, rgba(61,207,200,0.32) 0%, rgba(31,163,154,0.16) 50%, transparent 78%);
filter: blur(28px);
animation: heroBlobB 22s ease-in-out infinite;
z-index: 0;
}
.svc-page-hero .container {
position: relative;
z-index: 2;
}
/* Une 3e couche dΓ©corative : motif points subtil (SVG inline) + diagonal shimmer */
.svc-page-hero > .hero-deco {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 70% 30%, rgba(255,255,255,0.06) 0, transparent 22%),
radial-gradient(circle at 20% 75%, rgba(255,255,255,0.05) 0, transparent 20%),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23ffffff' opacity='0.06'/%3E%3C/svg%3E");
background-size: cover, cover, 36px 36px;
pointer-events: none;
z-index: 1;
animation: heroShimmer 14s linear infinite;
}
@keyframes heroBlobA {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(-40px, 30px) scale(1.08); }
66% { transform: translate(20px, -20px) scale(0.95); }
}
@keyframes heroBlobB {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(40px, -30px) scale(1.10); }
}
@keyframes heroShimmer {
from { background-position: 0 0, 100% 100%, 0 0; }
to { background-position: 0 0, 100% 100%, 36px 36px; }
}
/* Variante quand hero a une photo de fond β overlay teal animΓ© pour ne pas perdre la photo */
.service-hero-photo {
position: relative;
overflow: hidden;
isolation: isolate;
}
.service-hero-photo::before {
content: "";
position: absolute;
top: -150px; right: -150px;
width: 480px; height: 480px;
border-radius: 50%;
background: radial-gradient(circle, rgba(61,207,200,0.32) 0%, rgba(31,163,154,0.12) 50%, transparent 78%);
filter: blur(24px);
animation: heroBlobA 20s ease-in-out infinite;
z-index: 1;
pointer-events: none;
}
.service-hero-photo::after {
content: "";
position: absolute;
bottom: -180px; left: -100px;
width: 420px; height: 420px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,184,0,0.18) 0%, rgba(255,107,53,0.06) 50%, transparent 78%);
filter: blur(28px);
animation: heroBlobB 26s ease-in-out infinite;
z-index: 1;
pointer-events: none;
}
.service-hero-photo .container { position: relative; z-index: 3; }
@media (prefers-reduced-motion: reduce) {
.svc-page-hero::before,
.svc-page-hero::after,
.svc-page-hero > .hero-deco,
.service-hero-photo::before,
.service-hero-photo::after { animation: none; }
}
/* =========================================================
============ V22 β Tel orange aside services ===========
========================================================= */
/* Bouton tΓ©lΓ©phone orange peps dans l'aside des pages services */
.svc-aside-sticky .aside-block.featured .urgent-num {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--accent);
color: #fff !important;
padding: 0.95rem 1.3rem;
border-radius: 50px;
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 1.15rem;
letter-spacing: 0.2px;
margin: 0.7rem 0 0.9rem;
box-shadow: 0 6px 20px rgba(255,107,53,0.45);
text-decoration: none !important;
transition: all .2s ease;
text-align: center;
white-space: nowrap;
-webkit-text-fill-color: #fff;
}
.svc-aside-sticky .aside-block.featured .urgent-num::before {
content: "π";
font-size: 1rem;
}
.svc-aside-sticky .aside-block.featured .urgent-num:hover {
background: var(--accent-dark);
color: #fff !important;
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(255,107,53,0.60);
}
.svc-aside-sticky .aside-block.featured .urgent-num:active {
transform: translateY(0);
}
/* V22.1 β retire l'emoji π du bouton tel orange aside services */
.svc-aside-sticky .aside-block.featured .urgent-num::before {
content: none;
}
/* =========================================================
============ V23 β REFONTE MOBILE COMPLΓTE ============
Sauf 1 modif desktop : champ "NΒ° de rue" fusionnΓ© dans Rue
========================================================= */
/* Tout est dans @media max-width:820px (mobile + tablette portrait) */
@media (max-width: 820px) {
/* === Fix overflow horizontal === */
html, body { overflow-x: hidden !important; max-width: 100vw; }
.container { max-width: 100vw; padding-left: 1rem; padding-right: 1rem; box-sizing: border-box; }
section, header, footer, div, .section, .cta-band, .hero { max-width: 100vw; overflow-x: hidden; }
.hero { padding-top: 2rem; padding-bottom: 4rem; }
/* === Float-call : 2x plus gros === */
.float-call {
width: 76px !important; height: 76px !important;
font-size: 2rem !important;
bottom: 1.2rem !important; right: 1.2rem !important;
box-shadow: 0 6px 28px rgba(255,107,53,0.65) !important;
}
/* === Menu : services toujours dΓ©ployΓ©s + contact plus gros === */
.main-nav.open .has-dropdown > a::after { display: none; }
.main-nav.open .dropdown {
position: static !important;
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
box-shadow: none !important;
background: var(--bg-soft) !important;
border-radius: 0;
padding: 0.4rem 0 !important;
margin-top: 0.3rem;
}
.main-nav.open .dropdown a { padding: 0.7rem 1.2rem; font-size: 0.95rem; }
.main-nav .nav-cta {
padding: 0.85rem 1.5rem !important;
font-size: 1rem !important;
font-weight: 700;
}
/* === Hero accueil : titre centrΓ© + plus gros === */
.hero .hero-grid > div.reveal { text-align: center; }
.hero h1.hero-h1-stack {
text-align: center !important;
font-size: clamp(2rem, 7vw, 2.8rem) !important;
line-height: 1.15;
}
.hero h1.hero-h1-stack .h1-line { display: block; }
.hero-checks.hero-checks-single { max-width: 480px; margin-left: auto; margin-right: auto; }
.hero-cta.hero-cta-spaced {
justify-content: center;
flex-wrap: nowrap;
gap: 8px;
}
.hero-cta .btn { flex: 1 1 auto; font-size: 0.92rem; padding: 0.85rem 1rem; min-width: 0; }
/* === Hero pages services : 2 boutons Γ cΓ΄tΓ© + 3 stats compacts === */
.svc-page-hero .hero-actions {
display: flex; gap: 8px; flex-wrap: nowrap; justify-content: center;
}
.svc-page-hero .hero-actions .btn { flex: 1 1 0; font-size: 0.88rem; padding: 0.8rem 0.6rem; }
.svc-page-hero .quick-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 1rem;
}
.svc-page-hero .quick-stats span:nth-child(3) {
grid-column: 1 / -1;
justify-self: center;
max-width: 60%;
}
.svc-page-hero .quick-stats span {
background: rgba(255,255,255,0.10);
padding: 0.6rem 0.7rem;
border-radius: 10px;
font-size: 0.78rem;
text-align: center;
border: 1px solid rgba(255,255,255,0.16);
}
.svc-page-hero .quick-stats span strong { font-size: 0.9rem; display: block; margin-bottom: 2px; }
/* === Stats bar (home/zones/a-propos) : 3 cells max, 1 ligne === */
.stats-bar.stats-bar-clean { grid-template-columns: repeat(3, 1fr); }
.stats-bar.stats-bar-clean .stats-cell:nth-child(4) { display: none; }
.stats-bar.stats-bar-clean .stats-cell { padding: 0.85rem 0.4rem; }
.stats-bar.stats-bar-clean .stats-cell .num { font-size: 1.1rem; }
.stats-bar.stats-bar-clean .stats-cell .label { font-size: 0.65rem; line-height: 1.2; }
.stats-overlap-wrap { margin-top: -1.5rem; margin-bottom: 1rem; }
/* === Form contact (home + page contact) : mΓͺmes rΓ¨gles === */
.form-grid-aside { grid-template-columns: 1fr !important; gap: 1.5rem; }
.form-wrap { padding: 1.5rem !important; }
.form-row { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.form-group { margin-bottom: 0.8rem; }
.form-group input, .form-group select, .form-group textarea { padding: 0.7rem 0.85rem; font-size: 0.93rem; }
/* Hero-form (sidebar accueil) */
.hero-form-card { padding: 1.2rem !important; }
.hero-form-row { grid-template-columns: 1fr 1fr; }
.hero-form input, .hero-form select, .hero-form textarea { padding: 0.65rem 0.8rem; font-size: 0.9rem; }
/* === Aside featured (contact + services) : tel + devis Γ cΓ΄tΓ© + 2 encarts ligne === */
.form-aside-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.form-aside-stack .aside-block.featured { grid-column: 1 / -1; padding: 1rem 1.1rem; }
.form-aside-stack .aside-block:not(.featured) { padding: 0.85rem 1rem; }
.form-aside-stack .aside-block h3 { font-size: 0.95rem; margin-bottom: 0.3rem; }
.form-aside-stack .aside-block p { font-size: 0.82rem; margin-bottom: 0.4rem; }
.form-aside-stack .aside-block.featured .urgent-num { font-size: 1.3rem !important; padding: 0.7rem 1rem !important; }
/* Page contact : aside vert plus fin et centrΓ© */
.aside-block.featured.aside-block-phone-row {
grid-template-columns: 1fr;
max-width: 100%;
}
.aside-block.aside-block-phone-row .phone-btn-cta { grid-column: 1; grid-row: 2; justify-content: center; width: 100%; }
/* === Page services : aside sticky devient inline 2 cards Γ©gales === */
.svc-aside-sticky { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0.7rem !important; position: static !important; }
.svc-aside-sticky .aside-block.featured { grid-column: 1 / -1; padding: 1rem 1.1rem; }
.svc-aside-sticky .aside-block:not(.featured) { padding: 0.85rem 1rem; }
.svc-aside-sticky .aside-block h3 { font-size: 0.95rem; margin-bottom: 0.25rem; }
.svc-aside-sticky .aside-block p { font-size: 0.8rem; margin-bottom: 0.3rem; }
.svc-aside-sticky .aside-block .label { font-size: 0.65rem; margin-bottom: 0.25rem; }
/* Bouton tel orange centrΓ©, + ajout bouton devis Γ cΓ΄tΓ© en mobile */
.svc-aside-sticky .aside-block.featured {
display: grid;
grid-template-columns: 1fr;
gap: 0.6rem;
}
.svc-aside-sticky .aside-block.featured > * { width: 100%; }
.svc-aside-sticky .aside-block.featured .urgent-num { font-size: 1.1rem !important; padding: 0.75rem 1rem !important; margin: 0.3rem 0 0.4rem !important; }
.svc-aside-sticky .aside-block.featured .btn-outline-light { width: 100%; padding: 0.75rem 1rem; font-size: 0.9rem; }
/* Tel + devis cΓ΄te Γ cΓ΄te */
.svc-aside-sticky .aside-block.featured.cta-pair {
grid-template-columns: 1fr 1fr;
align-items: center;
}
/* === Section "Comment Γ§a se passe" : Γ©tape espacΓ©es + centrΓ©es === */
.process-timeline {
display: flex !important;
flex-direction: column;
gap: 1.5rem;
align-items: center;
}
.process-timeline::before { display: none; }
.process-step {
text-align: center;
position: relative;
padding: 0 1rem;
max-width: 280px;
}
.process-step + .process-step::before {
content: "β";
position: absolute;
top: -1.2rem;
left: 50%;
transform: translateX(-50%);
color: var(--teal-light);
font-size: 1.3rem;
opacity: 0.7;
}
.process-step .num { margin-bottom: 0.7rem; }
.process-step h4 { margin-bottom: 0.4rem; }
/* === Section Γ©quipe : 3 mini-cards mΓͺme ligne, centrΓ©es, allΓ©gΓ©es === */
.team-mini-grid {
grid-template-columns: 1fr 1fr 1fr !important;
gap: 8px;
text-align: center;
}
.team-mini {
padding: 0.8rem 0.4rem !important;
text-align: center;
}
.team-mini .ic { margin: 0 auto 6px; width: 32px; height: 32px; font-size: 0.95rem; }
.team-mini h4 { font-size: 0.82rem; margin-bottom: 3px; line-height: 1.2; }
.team-mini p { font-size: 0.7rem; line-height: 1.3; }
.team-section-grid { grid-template-columns: 1fr !important; gap: 1.5rem; }
.team-section-grid > .reveal { text-align: center; }
.team-section-grid .team-shot-caption { justify-content: center; }
/* Boutons CTA Γ©quipe : largeur full 50/50 */
.team-cta-row { grid-template-columns: 1fr 1fr !important; gap: 8px; }
.team-cta-row .btn { font-size: 0.88rem; padding: 0.8rem 0.6rem; }
/* === Benefits cards : 1 col uniforme === */
.benefit-cards { grid-template-columns: 1fr !important; gap: 0.7rem; }
.benefit-card {
padding: 1rem 1.1rem !important;
min-height: 100px;
grid-template-columns: 44px 1fr !important;
align-items: center;
}
.benefit-card .ic { width: 44px; height: 44px; font-size: 1.1rem; }
.benefit-card h4 { font-size: 0.95rem; }
.benefit-card p { font-size: 0.82rem; line-height: 1.4; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
/* === Service lists : titre max 1 ligne, desc max 3 lignes uniforme === */
.svc-list-style-B .svc-problem-list li,
.svc-list-style-B .svc-action-list li {
min-height: 88px;
align-items: center;
}
.svc-list-style-B .svc-problem-list li > div,
.svc-list-style-B .svc-action-list li > div { padding: 0.7rem 0.9rem; }
.svc-list-style-B .item-title {
font-size: 0.9rem !important;
margin-bottom: 0.2rem !important;
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.svc-list-style-B .item-desc {
font-size: 0.78rem !important;
line-height: 1.35 !important;
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.svc-list-style-B .svc-problem-list .ic,
.svc-list-style-B .svc-action-list .ic { width: 40px !important; height: 40px !important; }
/* === Section titres globalement plus compact === */
.section { padding: 3rem 0; }
h1 { font-size: clamp(1.7rem, 6vw, 2.3rem); }
h2 { font-size: clamp(1.3rem, 4.5vw, 1.7rem); }
h3 { font-size: 1.05rem; }
.text-center { padding-left: 1rem; padding-right: 1rem; }
/* === Prestations carousel (apple-like glisser) === */
.prestations-list {
display: flex !important;
flex-direction: row !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding: 1rem;
gap: 12px;
padding: 0.5rem 1rem 1rem;
margin: 0 -1rem;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.prestations-list::-webkit-scrollbar { display: none; }
.prestation-row {
flex: 0 0 82% !important;
scroll-snap-align: start;
grid-template-columns: 1fr !important;
background: #fff;
border-radius: 14px;
padding: 1.1rem 1.2rem !important;
border: 1px solid var(--border);
box-shadow: 0 4px 14px rgba(14,92,94,0.08);
display: flex !important;
flex-direction: column !important;
gap: 0.5rem;
}
.prestation-num { font-size: 0.7rem; color: var(--teal); }
.prestation-title { font-size: 1.05rem !important; }
.prestation-subtitle { font-size: 0.78rem; }
.prestation-desc { font-size: 0.85rem !important; line-height: 1.4 !important; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.prestation-meta { display: flex; justify-content: space-between; align-items: center; margin-top: auto; gap: 0.5rem; }
/* === Related grid (prestations en images) β carousel === */
.related-grid, .related-grid.split-3-2 {
display: flex !important;
flex-direction: row !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 12px;
padding: 0.5rem 1rem 1rem;
margin: 0 -1rem;
grid-template-columns: none !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.related-grid::-webkit-scrollbar { display: none; }
.related-grid > .row { display: contents; }
.related-grid .related-card {
flex: 0 0 75% !important;
scroll-snap-align: start;
}
/* === Testimonials β carousel + plus petits === */
.grid.grid-3:has(.testimonial),
.reviews-2x3 {
display: flex !important;
flex-direction: row !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 12px;
padding: 0.5rem 1rem 1rem;
margin: 0 -1rem;
grid-template-columns: none !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.grid.grid-3:has(.testimonial)::-webkit-scrollbar,
.reviews-2x3::-webkit-scrollbar { display: none; }
.testimonial {
flex: 0 0 80% !important;
scroll-snap-align: start;
padding: 1.2rem !important;
}
.testimonial p { font-size: 0.88rem !important; }
.testimonial .author { font-size: 0.85rem; }
/* === CTA-band : plus fin + 2 boutons cΓ΄te Γ cΓ΄te === */
.cta-band { padding: 2.5rem 0; }
.cta-band h2 { font-size: 1.4rem; margin-bottom: 0.5rem; }
.cta-band p { font-size: 0.92rem; margin-bottom: 1.2rem; }
.cta-band .btns { flex-direction: row; gap: 8px; flex-wrap: nowrap; padding: 0 1rem; }
.cta-band .btn { flex: 1 1 0; font-size: 0.85rem; padding: 0.75rem 0.5rem; width: auto; min-width: 0; white-space: nowrap; }
/* === Footer mobile === */
.footer-grid {
grid-template-columns: 1fr 1fr !important;
gap: 1.2rem !important;
}
.footer-brand { grid-column: 1 / -1; text-align: center; }
.footer-brand img { margin: 0 auto 0.5rem; }
.footer-brand p { font-size: 0.85rem; max-width: 320px; margin: 0 auto; }
.site-footer h4 { font-size: 0.85rem; margin-bottom: 0.6rem; }
.site-footer ul { padding: 0; }
.site-footer ul li { font-size: 0.82rem; padding: 0.15rem 0; list-style: none; }
/* Contact ligne : tel + email mΓͺme ligne, zone + garantie mΓͺme ligne, retire horaires */
.footer-grid > div:nth-child(4) { grid-column: 1 / -1; }
.footer-grid > div:nth-child(4) .footer-contact-line { display: inline-flex !important; width: 48%; vertical-align: top; font-size: 0.78rem; padding: 0.3rem 0.4rem; }
.footer-grid > div:nth-child(4) .footer-contact-line:nth-child(3) { display: none !important; } /* Horaires retirΓ© */
.footer-contact-line div { font-size: 0.78rem; }
.footer-contact-line strong { font-size: 0.7rem; display: block; }
/* === Zones-intervention === */
.zones-wrap-final { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.zone-map-stylized { display: none; } /* SVG dΓ©coratif retirΓ© sur mobile */
/* Bouton "Appeler maintenant" au-dessus map en full width */
.svc-page-hero + .stats-overlap-wrap + section .btn,
.zones-wrap-final + section .btn,
.reach-cta-mobile { width: 100% !important; justify-content: center; }
/* Quick-stats zones : 3 max sur 1 ligne */
.zones-intervention .quick-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
/* === A propos === */
.two-col { grid-template-columns: 1fr !important; gap: 2rem; }
.why-photo-frame { max-width: 280px; margin: 0 auto; }
.photo-frame img { max-width: 100%; }
/* Boutons "Voir nos services" + "Demander un devis" : Γ cΓ΄tΓ© */
.two-col > div > div[style*="display:flex"] { flex-direction: row !important; gap: 8px !important; }
.two-col > div > div[style*="display:flex"] .btn,
.two-col > div > div[style*="display:flex"] .btn-devis { flex: 1 1 0; font-size: 0.85rem; padding: 0.75rem 0.6rem; text-align: center; min-width: 0; }
/* Trust badges : 2 sur 1 col + texte rΓ©duit */
.trust-badge-row { grid-template-columns: 1fr !important; gap: 0.8rem; }
.trust-badge { padding: 1rem 1.1rem; grid-template-columns: 44px 1fr; }
.trust-badge-ic { width: 44px; height: 44px; font-size: 1.2rem; }
.trust-badge-body strong { font-size: 0.95rem; }
.trust-badge-body p { font-size: 0.82rem; line-height: 1.4; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
/* Nos valeurs : 2 par ligne, simplifiΓ©s */
.grid.grid-3:has(.card) { grid-template-columns: 1fr 1fr !important; gap: 0.6rem !important; }
.grid.grid-3 .card { padding: 1rem 0.9rem !important; }
.grid.grid-3 .card h3 { font-size: 0.95rem; margin-bottom: 0.3rem; }
.grid.grid-3 .card p { font-size: 0.78rem; line-height: 1.4; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.grid.grid-3 .card .icon { width: 38px; height: 38px; font-size: 1rem; margin-bottom: 0.5rem; }
/* Icon features sur a-propos : 2 par ligne */
.icon-grid { grid-template-columns: 1fr 1fr !important; gap: 0.7rem; }
.icon-feature { padding: 0.8rem; }
/* === Hero trust elements compact === */
.hero-trades-clean {
font-size: 0.85rem !important;
gap: 0.4rem !important;
}
.hero-top.hero-top-centered .eyebrow { font-size: 0.7rem; letter-spacing: 1.5px; }
/* === Section svc head : titres compacts === */
.svc-section-head h2 { font-size: 1.25rem; }
.svc-section-head .h-sub { font-size: 0.88rem; }
.svc-content-main p { font-size: 0.92rem; line-height: 1.55; }
.svc-list-blurb { font-size: 0.86rem; padding: 0.8rem 1rem; }
.callout { padding: 1rem 1.1rem; font-size: 0.88rem; }
.callout strong { font-size: 0.98rem; }
/* Reveal cards general : padding rΓ©duit */
.reveal { max-width: 100%; }
/* Encarts section "Sans engagement / Devis" β simplifiΓ©s et mΓͺme ligne */
.form-aside-stack .aside-block.featured h3 { font-size: 1rem; }
.form-aside-stack .aside-block:not(.featured) h3 { font-size: 0.85rem; }
}
/* === DESKTOP + MOBILE : fusion NΒ° rue dans Rue (cache NΒ° rue) === */
.form-row .form-group:has(input[name="numero"]),
.form-row .form-group:has(input#numero),
.form-row .form-group:has(input#h-numero) {
display: none;
}
.form-row .form-group:has(input[name="rue"]),
.form-row .form-group:has(input#rue),
.form-row .form-group:has(input#h-rue) {
grid-column: 1 / -1;
}
.form-row .form-group:has(input[name="rue"]) label::after,
.form-row .form-group:has(input#rue) label::after,
.form-row .form-group:has(input#h-rue) label::after {
content: " (nΒ° + rue)";
font-weight: 400;
color: var(--muted);
font-size: 0.85em;
}
/* =========================================================
============ V24 β Fix mobile (menu + autres) =========
========================================================= */
/* === FIX CRITIQUE : retirer overflow:hidden des conteneurs (clippait le menu) === */
@media (max-width: 820px) {
header.site-header, .site-header { overflow: visible !important; }
/* Body/html garde overflow-x hidden, le reste passe en visible */
section, footer, .section, .cta-band, .hero { overflow-x: clip; overflow-y: visible; }
/* clip = laisse passer les Γ©lΓ©ments absolus, hidden = les coupe */
}
/* === Sticky header sur TOUT le site (mobile + desktop) === */
.site-header {
position: sticky !important;
top: 0 !important;
z-index: 200 !important;
background: #fff;
}
.topbar { position: sticky !important; top: 0 !important; z-index: 199 !important; }
.site-header { top: 38px !important; } /* sous topbar */
@media (max-width: 600px) {
.topbar { position: static !important; }
.site-header { top: 0 !important; }
}
@media (max-width: 820px) {
/* === Prestations REVERT carousel β liste verticale + texte simplifiΓ© === */
.prestations-list {
display: flex !important;
flex-direction: column !important;
overflow-x: visible !important;
overflow-y: visible !important;
scroll-snap-type: none !important;
gap: 10px !important;
padding: 0 !important;
margin: 0 !important;
}
.prestation-row {
flex: 1 1 auto !important;
width: 100% !important;
scroll-snap-align: none !important;
padding: 1rem 1.1rem !important;
}
.prestation-row .prestation-num { display: none; }
.prestation-title { font-size: 1rem !important; margin-bottom: 0.2rem; }
.prestation-subtitle { font-size: 0.75rem; display: block; margin-bottom: 0.3rem; }
/* Description ultra-courte : line-clamp 2 lignes max */
.prestation-desc {
font-size: 0.82rem !important;
line-height: 1.4 !important;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 0.5rem !important;
}
.prestation-meta { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.prestation-price { font-size: 0.85rem; font-weight: 700; color: var(--teal-dark); }
.prestation-price small { display: block; font-size: 0.7rem; color: var(--muted); font-weight: 400; }
.prestation-pill { font-size: 0.7rem; padding: 0.25rem 0.55rem; }
/* === Comment Γ§a se passe : refonte mobile en grille 2x2 numΓ©rotΓ©e === */
.process-timeline {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0.7rem !important;
flex-direction: unset !important;
align-items: stretch;
max-width: 100%;
}
.process-timeline::before { display: none; }
.process-step + .process-step::before { display: none; }
.process-step {
background: linear-gradient(135deg, #fff 0%, var(--teal-soft) 100%);
border: 1px solid var(--border);
border-radius: 14px;
padding: 1rem 0.7rem 1rem !important;
text-align: center;
max-width: none !important;
position: relative;
}
.process-step .num {
width: 38px; height: 38px;
margin: 0 auto 0.4rem !important;
font-size: 0.95rem;
background: var(--teal-dark);
color: #fff !important;
border: none;
box-shadow: 0 3px 10px rgba(23,138,130,0.32);
}
.process-step h4 {
font-size: 0.85rem !important;
margin-bottom: 0.3rem !important;
line-height: 1.2;
}
.process-step p {
font-size: 0.75rem !important;
line-height: 1.35 !important;
margin: 0;
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* === Team OVEO : reorder grid pour mobile === */
.team-section-grid {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-areas:
"intro"
"shot"
"names"
"mini"
"cta" !important;
gap: 1.2rem !important;
}
.team-section-grid > .reveal:not(.team-shot) { grid-area: intro; text-align: center; }
.team-section-grid > .team-shot { grid-area: shot; max-width: 320px; margin: 0 auto; aspect-ratio: 4/5; }
.team-mini-grid { grid-area: mini; }
.team-cta-row { grid-area: cta; }
/* mini-grid / cta sont enfants de .reveal donc on les dΓ©place via order/explicit */
/* En vrai, mini-grid et cta-row sont DANS le .reveal β on les fait sortir visuellement via display: contents */
.team-section-grid > .reveal:not(.team-shot) { display: contents; }
.team-section-grid > .reveal:not(.team-shot) > .eyebrow,
.team-section-grid > .reveal:not(.team-shot) > h2,
.team-section-grid > .reveal:not(.team-shot) > .lead {
grid-area: intro;
text-align: center;
}
/* Sur mobile : cachΓ© les noms dans la photo, montre la rangΓ©e sΓ©parΓ©e */
.team-shot-caption .name-pill { display: none; }
.team-names-row {
grid-area: names;
display: flex !important;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
}
.team-names-row .pill {
background: #fff;
color: var(--teal-dark);
border: 1px solid var(--border);
padding: 5px 12px;
border-radius: 999px;
font-size: 0.82rem;
font-weight: 600;
}
/* === Section "DΓ©couvrir" related-grid : dΓ©jΓ en carousel β === */
/* Les boutons cards "Voir" sont visibles, scroll fonctionne */
/* === Contact form aside (section accueil) : simplifiΓ©, encarts retirΓ©s sauf featured === */
.form-grid-aside .form-aside-stack {
display: flex !important;
flex-direction: column;
gap: 0.6rem;
}
/* Garde uniquement le featured aside, retire les 2 autres */
.form-grid-aside .form-aside-stack .aside-block:not(.featured) { display: none; }
.form-grid-aside .form-aside-stack .aside-block.featured {
padding: 1.1rem 1.2rem !important;
}
.form-grid-aside .form-aside-stack .aside-block.featured h3 { font-size: 1rem; margin-bottom: 0.25rem; }
.form-grid-aside .form-aside-stack .aside-block.featured .urgent-num { font-size: 1.2rem !important; padding: 0.65rem 0.9rem !important; }
.form-grid-aside .form-aside-stack .aside-block.featured .btn-outline-light { padding: 0.65rem 1rem; font-size: 0.88rem; }
/* === Team names row visible ONLY mobile === */
}
.team-names-row { display: none; } /* Desktop : cachΓ© par dΓ©faut */
@media (max-width: 820px) {
.team-names-row { display: flex !important; }
}
/* =========================================================
============ V25 β Mobile fixes prio (2026-05-25) =====
========================================================= */
/* === Header complet (topbar + nav) toujours sticky en haut === */
@media (max-width: 820px) {
.topbar {
position: fixed !important;
top: 0 !important;
left: 0; right: 0;
z-index: 250 !important;
width: 100%;
font-size: 0.72rem;
padding: 0.3rem 0;
}
.topbar .container { padding-top: 0.2rem; padding-bottom: 0.2rem; gap: 0.2rem; }
.topbar-info { font-size: 0.72rem; gap: 0.5rem; }
.site-header {
position: fixed !important;
top: 56px !important; /* sous la topbar */
left: 0; right: 0;
z-index: 200 !important;
width: 100%;
}
body { padding-top: 130px; } /* offset pour le contenu sous le header fixΓ© */
.hero, section:first-of-type { margin-top: 0; }
}
/* === Menu mobile : services dropdown TOUJOURS dΓ©pliΓ© (forcΓ©, irreplicable) === */
@media (max-width: 820px) {
.main-nav.open .has-dropdown .dropdown,
.main-nav.open .has-dropdown.open .dropdown {
max-height: 1000px !important;
display: flex !important;
flex-direction: column !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
pointer-events: auto !important;
}
/* EmpΓͺcher le toggle JS sur le parent : retirer cursor pointer */
.main-nav.open .has-dropdown > a { cursor: default; }
/* Petite indication visuelle que le dropdown est dΓ©jΓ ouvert */
.main-nav.open .has-dropdown > a::after { content: "" !important; display: none !important; }
}
/* === Hero accueil : formulaire visible direct (pas d'effet reveal) === */
@media (max-width: 820px) {
.hero-form-card.reveal,
.hero-form-card {
opacity: 1 !important;
transform: none !important;
transition: none !important;
animation: none !important;
}
.js-reveal-enabled .hero-form-card.reveal { opacity: 1 !important; transform: none !important; }
}
/* === Prestations : enlever bulles, ligne épurée + flèche === */
@media (max-width: 820px) {
.prestations-list {
gap: 0 !important;
background: transparent;
}
.prestation-row {
background: transparent !important;
border: none !important;
border-bottom: 1px solid var(--border) !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 1rem 0 1rem 0 !important;
margin: 0 !important;
position: relative;
padding-right: 32px !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0.25rem;
}
.prestation-row::after {
content: "β";
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
font-size: 1.3rem;
color: var(--teal);
font-weight: 700;
transition: transform .2s ease;
}
.prestation-row:hover::after,
.prestation-row:active::after {
transform: translateY(-50%) translateX(4px);
color: var(--accent);
}
.prestation-row:last-child { border-bottom: none !important; }
.prestation-row .prestation-title-block { display: flex; flex-direction: column; gap: 0.1rem; }
.prestation-title { font-weight: 700; color: var(--teal-dark); font-size: 1rem !important; }
.prestation-subtitle { font-size: 0.78rem; color: var(--text-soft); }
.prestation-desc { display: none; } /* texte cachΓ© sur mobile, plus simple */
.prestation-meta {
display: flex !important;
justify-content: space-between;
align-items: center;
margin-top: 0.4rem;
gap: 0.5rem;
}
.prestation-price { font-size: 0.85rem; font-weight: 600; color: var(--teal); }
.prestation-price small { display: inline; font-size: 0.7rem; color: var(--muted); margin-left: 0.3rem; }
/* === Comment Γ§a se passe β nouvelle proposition : timeline verticale Γ©lΓ©gante === */
.process-timeline {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
padding: 0.5rem 0;
position: relative;
background: transparent;
}
.process-step {
display: grid !important;
grid-template-columns: 56px 1fr !important;
grid-template-areas:
"num title"
"num desc" !important;
gap: 0.2rem 16px !important;
padding: 1.1rem 0 !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
text-align: left !important;
max-width: none !important;
align-items: start;
position: relative;
}
.process-step + .process-step {
border-top: 1px dashed rgba(23,138,130,0.2);
}
.process-step + .process-step::before {
content: "";
position: absolute;
left: 27px;
top: -16px;
height: 16px;
width: 2px;
background: var(--teal-light);
display: block;
}
.process-step .num {
grid-area: num !important;
width: 50px !important; height: 50px !important;
background: linear-gradient(135deg, var(--teal-dark), var(--teal)) !important;
color: #fff !important;
border: 3px solid var(--teal-soft) !important;
box-shadow: 0 4px 14px rgba(23,138,130,0.35);
margin: 0 !important;
font-size: 1.15rem !important;
font-family: 'Poppins',sans-serif;
font-weight: 800;
}
.process-step h4 {
grid-area: title !important;
font-size: 1rem !important;
margin: 0 0 0.2rem !important;
color: var(--teal-dark);
align-self: end;
}
.process-step p {
grid-area: desc !important;
font-size: 0.82rem !important;
margin: 0 !important;
color: var(--text-soft);
line-height: 1.4 !important;
}
/* === Γquipe : fix superposition (annule le display:contents qui bug) === */
.team-section-grid {
display: flex !important;
flex-direction: column !important;
gap: 1.3rem !important;
grid-template-areas: none !important;
}
.team-section-grid > .reveal:not(.team-shot) {
display: block !important; /* annule contents */
order: 1;
text-align: center;
}
.team-section-grid > .team-shot { order: 2; max-width: 280px; margin: 0 auto; aspect-ratio: 4/5; }
.team-section-grid > .team-names-row { order: 3; margin: 0; }
/* mini-grid et cta-row sont dans .reveal β on les sort visuellement avec une grille interne */
.team-section-grid > .reveal:not(.team-shot) > .eyebrow,
.team-section-grid > .reveal:not(.team-shot) > h2,
.team-section-grid > .reveal:not(.team-shot) > .lead { margin-bottom: 0.6rem; }
.team-section-grid > .reveal:not(.team-shot) .team-mini-grid { margin: 1rem 0 0.8rem !important; }
.team-section-grid > .reveal:not(.team-shot) .team-cta-row { margin: 0 !important; }
/* === Form "Une question, un projet, une urgence ?" (section contact home) === */
/* Masque les champs adresse longs sur mobile β form devient compact comme hero-form */
.form-wrap .form-row:has(input[name="numero"]),
.form-wrap .form-row:has(input[name="cp"]) { display: none !important; }
.form-wrap .form-row:has(input[name="prenom"]) { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.form-wrap textarea { min-height: 70px; }
/* === Pages services : quick-stats sans bulles === */
.svc-page-hero .quick-stats span {
background: transparent !important;
border: none !important;
padding: 0.2rem 0 !important;
font-size: 0.78rem;
text-align: center;
}
.svc-page-hero .quick-stats span strong {
display: block;
font-size: 0.92rem;
color: #fff;
margin-bottom: 2px;
}
/* === Pages services : listes - bulles plus grosses === */
.svc-list-style-B .svc-problem-list .ic,
.svc-list-style-B .svc-action-list .ic {
width: 52px !important;
height: 52px !important;
font-size: 1.45rem !important;
}
.svc-list-style-B .svc-problem-list li,
.svc-list-style-B .svc-action-list li {
grid-template-columns: 52px 1fr !important;
gap: 14px;
}
/* === Titre "Si on n'intervient pas" en orange === */
.svc-content-main .svc-section-head:nth-of-type(2) h2 {
color: var(--accent) !important;
}
.svc-content-main .svc-section-head:nth-of-type(2) .eyebrow {
color: var(--accent) !important;
opacity: 0.85;
}
}
/* === Desktop ET mobile : titre orange section problème pages services === */
.svc-content-main .svc-section-head:nth-of-type(2) h2 {
color: var(--accent);
}
.svc-content-main .svc-section-head:nth-of-type(2) .eyebrow {
color: var(--accent);
}
/* V25.2 β Intro pages services raccourci sur mobile (-30% visuel) */
@media (max-width: 820px) {
.svc-content-main > .svc-section-head:first-of-type + p {
-webkit-line-clamp: 4;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 0.92rem;
line-height: 1.5;
}
/* Aussi raccourcir h-sub (sous-titres listes) sur mobile */
.svc-section-head .h-sub {
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 0.85rem !important;
}
}
/* =========================================================
============ V26 β Mobile fixes session 2026-05-25 =====
Pack complet de modifications mobile demandΓ©es par Mael.
Ne touche PAS le rendu desktop (>820px).
========================================================= */
@media (max-width: 820px) {
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββ
T2 β TOPBAR : garder uniquement tel + 24/7
βββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* Garde span:first-child de chaque ligne (tel + horaire), cache les autres */
.topbar .topbar-info > span:not(:first-child) { display: none !important; }
.topbar { padding: 0.15rem 0; font-size: 0.7rem; }
.topbar .container {
flex-direction: row !important;
gap: 1.2rem !important;
padding-top: 0.15rem !important;
padding-bottom: 0.15rem !important;
justify-content: center;
flex-wrap: nowrap;
}
.topbar-info { gap: 0 !important; font-size: 0.72rem !important; }
.topbar-info span { white-space: nowrap; }
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββ
T2 β HEADER : barre plus fine + logo seul (tag cachΓ©)
βββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.brand-tag { display: none !important; }
.brand { gap: 0 !important; }
.brand-logo-png { max-height: 36px !important; width: auto !important; }
.site-header { padding: 0.35rem 0 !important; }
/* Recalcul offset sticky : topbar plus fine + header plus fin */
.site-header { top: 38px !important; } /* sous nouvelle topbar */
body { padding-top: 96px !important; }
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββ
T2 β BOUTON CONTACT MENU : plus bas, centrΓ©, 2x large
βββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.main-nav.open ul { padding-bottom: 1.6rem !important; }
.main-nav.open ul > li:last-child {
margin-top: 1.4rem !important;
width: 100% !important;
display: flex !important;
justify-content: center !important;
padding: 0 !important;
}
.main-nav.open .nav-cta {
width: 80% !important;
max-width: 360px !important;
text-align: center !important;
padding: 1rem 1.5rem !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
margin: 0 auto !important;
border-radius: 999px !important;
display: inline-block !important;
box-shadow: 0 6px 18px rgba(255,107,53,0.35);
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββ
T3 β HOME : Section "Prestations" β trait + flΓ¨che + bulle
- trait teal-light dΓ©calΓ© Γ gauche (ne mord plus le texte)
- flèche bien à droite
- bulle (.prestation-pill) en face du titre, pas du desc
βββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.prestation-row {
padding-left: 14px !important;
padding-right: 36px !important;
/* Grille : ligne 1 = titre + pill, ligne 2 = subtitle, ligne 3 = price */
display: grid !important;
grid-template-columns: 1fr auto !important;
grid-template-rows: auto auto auto !important;
grid-template-areas:
"title pill"
"subtitle subtitle"
"price price" !important;
column-gap: 10px !important;
row-gap: 4px !important;
align-items: center;
}
.prestation-row .prestation-title-block { grid-area: title !important; }
.prestation-row .prestation-subtitle { grid-area: subtitle !important; }
/* La meta contient price + pill : on la dissout pour placer ses enfants en grid */
.prestation-row .prestation-meta { display: contents !important; }
.prestation-row .prestation-price { grid-area: price !important; text-align: left !important; justify-self: start !important; }
.prestation-row .prestation-pill { grid-area: pill !important; align-self: center !important; justify-self: end !important; margin: 0 !important; }
/* Trait teal vertical Γ gauche, dΓ©calΓ© hors du texte (un peu plus Γ gauche) */
.prestation-row::before {
content: '';
position: absolute;
left: -2px;
top: 14px;
bottom: 14px;
width: 3px;
background: var(--teal-light);
border-radius: 2px;
opacity: 0.85;
}
/* Flèche bien à droite */
.prestation-row::after {
right: 0 !important;
font-size: 1.2rem !important;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββ
T4 β HOME : "Comment Γ§a se passe" β points reliΓ©s par 1 trait
βββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* Override V25 : on retourne en vertical (1 col), reliΓ©s par 1 trait continu */
.process-timeline {
grid-template-columns: 1fr !important;
gap: 1.5rem !important;
position: relative;
padding: 0.5rem 0 !important;
}
/* Le trait vertical continu */
.process-timeline::before {
content: '' !important;
display: block !important;
position: absolute !important;
left: 27px;
top: 26px;
bottom: 26px;
width: 2px;
background: linear-gradient(180deg, var(--teal-light) 0%, var(--teal) 50%, var(--teal-light) 100%);
z-index: 0;
opacity: 0.6;
}
/* On retire le mini trait de raccord entre Γ©tapes (V25 line 4500) */
.process-step + .process-step::before { display: none !important; }
.process-step + .process-step { border-top: none !important; }
/* Le num au-dessus du trait */
.process-step .num {
position: relative;
z-index: 1;
background: linear-gradient(135deg, var(--teal-dark), var(--teal)) !important;
border: 3px solid #fff !important;
box-shadow: 0 4px 14px rgba(23,138,130,0.35) !important;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββ
T5 β HOME : Γquipe β ordre titre β photo β texte β encarts β boutons
βββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* On annule le display:contents et on force un ordre clair */
.team-section-grid {
display: flex !important;
flex-direction: column !important;
gap: 1.1rem !important;
}
/* Le bloc intro (h2 + lead) en 1er */
.team-section-grid > .reveal:not(.team-shot) {
display: block !important;
order: 1 !important;
text-align: center;
}
.team-section-grid > .reveal:not(.team-shot) .eyebrow,
.team-section-grid > .reveal:not(.team-shot) h2,
.team-section-grid > .reveal:not(.team-shot) .lead {
display: block !important;
margin-bottom: 0.5rem;
}
/* La photo en 2e */
.team-section-grid > .team-shot {
order: 2 !important;
max-width: 280px;
margin: 0 auto;
}
/* La rangΓ©e de noms en 3e */
.team-section-grid > .team-names-row { order: 3 !important; margin: 0; }
/* Les encarts mini-grid (3 promesses) en 4e β on les pousse hors du parent via grid order */
/* Comme ils sont enfants de .reveal:not(.team-shot), on doit les sortir :
solution = positionner .team-mini-grid et .team-cta-row après via order
en rΓ©utilisant flex column sur le parent flex */
.team-section-grid > .reveal:not(.team-shot) {
display: flex !important;
flex-direction: column !important;
}
.team-section-grid > .reveal:not(.team-shot) > .team-mini-grid {
order: 4 !important;
margin-top: 0.6rem !important;
}
.team-section-grid > .reveal:not(.team-shot) > .team-cta-row {
order: 5 !important;
margin-top: 1rem !important;
}
/* Mais ces enfants ne peuvent pas dΓ©passer visuellement le parent flex columnβ¦
Solution alternative : repositionner via flex order au niveau grid-parent en sortant les enfants.
Comme c'est complexe sans changer le HTML, on accepte cet ordre :
[intro(eyebrow+h2+lead+team-mini+team-cta)] β [shot] β [names]
Sauf que l'utilisateur veut : titre β photo β texte β encarts β boutons.
On va dΓ©placer la photo entre l'intro-text et les encarts via grid template areas. */
.team-section-grid {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-areas:
"intro"
"shot"
"rest" !important;
gap: 1rem !important;
}
.team-section-grid > .reveal:not(.team-shot) { grid-area: rest !important; display: contents !important; }
/* Les enfants directs du reveal-not-shot : eyebrow/h2/lead = intro, mini-grid/cta = rest */
.team-section-grid > .reveal:not(.team-shot) > .eyebrow,
.team-section-grid > .reveal:not(.team-shot) > h2,
.team-section-grid > .reveal:not(.team-shot) > .lead {
grid-area: intro;
text-align: center;
}
.team-section-grid > .team-shot { grid-area: shot !important; }
/* Mini-grid et CTA-row hΓ©ritent automatiquement de "rest" (zone restante) */
/* On les force en bloc visible avec une marge propre */
.team-section-grid > .reveal:not(.team-shot) > .team-mini-grid {
margin-top: 0.4rem !important;
}
.team-section-grid > .reveal:not(.team-shot) > .team-cta-row {
margin-top: 0.9rem !important;
}
/* Et la rangΓ©e de noms (sΓ©parΓ©e) reste cachΓ©e car dΓ©jΓ placΓ©e sur la photo */
.team-names-row { display: none !important; }
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββ
T6 β HOME : DΓ©couvrir β carousel glisser
(dΓ©jΓ en place dans V24, on renforce le rendu visuel)
βββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.related-grid, .related-grid.split-3-2 {
display: flex !important;
flex-direction: row !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory !important;
gap: 12px !important;
padding: 0.5rem 1rem 1rem !important;
margin: 0 -1rem !important;
grid-template-columns: none !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
}
.related-grid::-webkit-scrollbar { display: none; }
.related-grid > .row { display: contents !important; }
.related-grid .related-card {
flex: 0 0 78% !important;
scroll-snap-align: start !important;
background: #fff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 4px 14px rgba(14,92,94,0.08);
border: 1px solid var(--border);
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββ
T7 β HOME : Form bas remplacΓ© par form hero-style (mobile)
- cache form-tabs (urgence) et rgpd (dΓ©jΓ en input hidden cΓ΄tΓ© form)
- simplifie l'en-tΓͺte et le bouton submit
βββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.form-wrap .form-tabs { display: none !important; }
.form-wrap .checkbox-group { display: none !important; }
/* Cache aussi tous les