/* ============================================================
H3D SERVICE · kit-client travertin (proto 5 : proto 3 + hero photo pleine page)
Rubik-only · pill 9999px · cards 24px · DRENCH VERT #1c8868 · hero photo plein cadre
Motion : spring-mascotte + flip-3D CSS-only + IO reveals fail-safe
============================================================ */
@import url('../_assets/fonts/fonts.css');
/* --- TOKENS -------------------------------------------------- */
:root{
/* Palette (dossier verrouillé) */
--paper: #ffffff; /* fond blanc 54% */
--ink: #2d3732; /* encre-texte 11% */
--signal: #1c8868; /* VERT drench 28% */
--signal-hi: #164f3d; /* vert profond CTA final + footer bas 1% */
--signal-lite: #5fd3a5; /* vert LUMINEUX : seul vert lisible sur photo/drench */
--logo-green: #2a834c; /* vert EXACT du logo h3dservice.com */
--logo-navy: #242648; /* marine EXACT du « 3D » du logo */
--mint: #e8f5f0; /* vert-d'eau hero + respirations 6% */
--hair-mint: #d4ece3; /* borders légères FAQ */
--muted: #8e9994;
/* Familles (mono-famille Rubik) */
--font: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
/* Échelle typo (dossier) */
--fs-display: clamp(56px, 7vw, 80px);
--fs-h1: clamp(40px, 5vw, 56px);
--fs-h2: clamp(28px, 3.5vw, 40px);
--fs-h3: 20px;
--fs-body: 17px;
--fs-label: 12px;
--fs-phone: clamp(32px, 4vw, 48px);
--fs-tarif: clamp(30px, 3.5vw, 44px);
/* Layout */
--maxw: 1280px;
--pad-sec-y: clamp(72px, 9vw, 120px);
--pad-side: clamp(20px, 4vw, 40px);
/* Rayons */
--r-pill: 9999px;
--r-card: 24px;
--r-hero: 32px;
--r-input: 16px;
/* Motion */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-expo: cubic-bezier(0.25, 1, 0.5, 1);
/* Ombres */
--sh-card: 0 2px 8px rgba(45,55,50,0.06);
--sh-hover: 0 12px 32px rgba(28,136,104,0.18);
--sh-mascot: 0 24px 48px rgba(28,136,104,0.14);
}
/* --- RESET / BASE ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body{
font-family: var(--font);
font-size: var(--fs-body);
font-weight: 400;
line-height: 1.65;
color: var(--ink);
background: var(--paper);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
strong, b { font-weight: 700; }
ul { padding: 0; margin: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; border-radius: 4px; }
/* --- REVEALS FAIL-SAFE (contenu VISIBLE sans JS) ----------- */
html.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--ease-expo), transform 600ms var(--ease-expo); }
html.js .reveal.is-in { opacity: 1; transform: translateY(0); }
html.js .no-anim { opacity: 1 !important; transform: none !important; }
/* --- CONTAINERS ------------------------------------------- */
.container{
max-width: var(--maxw);
margin: 0 auto;
padding-left: var(--pad-side);
padding-right: var(--pad-side);
}
.section { padding: var(--pad-sec-y) 0; }
.section-mint { background: var(--mint); padding: var(--pad-sec-y) 0; }
.section-drench{ background: var(--signal); color: var(--paper); padding: var(--pad-sec-y) 0; }
.section-drench-deep{ background: var(--signal-hi); color: var(--paper); padding: clamp(80px, 10vw, 120px) 0; }
/* --- TYPO -------------------------------------------------- */
h1,h2,h3,h4,h5,h6 { margin: 0; font-weight: 700; color: inherit; }
h1 { font-size: var(--fs-h1); line-height: 1.10; letter-spacing: -0.015em; font-weight: 700; }
h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.010em; font-weight: 600; }
h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 600; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
.label{
font-size: var(--fs-label);
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 500;
color: var(--signal);
}
.label--white{ color: rgba(255,255,255,0.88); }
.display{ font-size: var(--fs-display); font-weight: 900; line-height: 1.00; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.lead { font-size: 20px; line-height: 1.55; color: var(--ink); }
.phone {
font-size: var(--fs-phone);
font-weight: 700;
letter-spacing: -0.010em;
color: var(--signal);
line-height: 1.00;
font-variant-numeric: tabular-nums;
}
.tarif-num{
font-size: var(--fs-tarif);
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1.00;
color: var(--signal);
}
/* --- BUTTONS PILL 9999px ---------------------------------- */
.btn{
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 28px;
border-radius: var(--r-pill);
font-size: 16px;
font-weight: 600;
line-height: 1.00;
letter-spacing: -0.005em;
transition: transform 200ms var(--ease-expo), box-shadow 200ms var(--ease-expo), background 180ms var(--ease-expo);
will-change: transform;
}
.btn-primary{
background: var(--signal);
color: var(--paper);
box-shadow: var(--sh-card);
}
.btn-primary:hover{ background: var(--signal-hi); transform: translateY(-2px); box-shadow: var(--sh-hover); }
.btn-outline{
background: transparent;
color: var(--signal);
border: 2px solid var(--signal);
padding: 14px 26px;
}
.btn-outline:hover{ background: var(--signal); color: var(--paper); transform: translateY(-2px); box-shadow: var(--sh-hover); }
/* Sur fonds drench-vert : boutons inversés */
.section-drench .btn-primary,
.section-drench-deep .btn-primary{
background: var(--paper);
color: var(--signal);
}
.section-drench .btn-primary:hover,
.section-drench-deep .btn-primary:hover{ background: var(--mint); color: var(--signal-hi); }
.section-drench .btn-outline,
.section-drench-deep .btn-outline{ color: var(--paper); border-color: var(--paper); background: transparent; }
.section-drench .btn-outline:hover,
.section-drench-deep .btn-outline:hover{ background: var(--paper); color: var(--signal); }
/* Bouton VERRE : seul secondaire lisible sur une photo. */
.btn-glass{
background: rgba(255,255,255,0.12);
color: var(--paper);
border: 1.5px solid rgba(255,255,255,0.42);
padding: 14.5px 26px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.btn-glass:hover{ background: rgba(255,255,255,0.94); color: var(--signal-hi); border-color: transparent; transform: translateY(-2px); }
.btn-arrow::after{ content: '\2192'; font-size: 18px; line-height: 1; transition: transform 180ms var(--ease-expo); }
.btn-arrow:hover::after{ transform: translateX(4px); }
/* Pill compacte pour tags/badges */
.pill{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: var(--r-pill);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.00;
}
.pill-signal { background: var(--signal); color: var(--paper); }
.pill-white { background: var(--paper); color: var(--ink); }
.pill-mint { background: var(--mint); color: var(--signal-hi); }
.pill-outline-white{ border: 1.5px solid rgba(255,255,255,0.4); color: rgba(255,255,255,0.92); background: transparent; }
.pill-glass{
background: rgba(255,255,255,0.13);
border: 1px solid rgba(255,255,255,0.26);
color: rgba(255,255,255,0.94);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
margin-bottom: 26px;
opacity: 1;
animation: lockup-line 560ms var(--ease-expo) 120ms backwards;
}
/* --- HEADER ------------------------------------------------ */
.site-header{
position: sticky;
top: 0;
z-index: 40;
background: var(--mint);
padding: 14px 0;
transition: background 280ms var(--ease-expo), box-shadow 280ms var(--ease-expo), color 280ms var(--ease-expo);
}
.site-header.on-white{ background: var(--paper); box-shadow: 0 1px 0 var(--hair-mint); }
.site-header.on-scroll{ background: rgba(255,255,255,0.96); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--hair-mint); }
/* Header POSÉ SUR LE HERO PHOTO : transparent, encre claire.
Repasse en header blanc dès qu'on quitte le hero (classe .on-scroll posée par app.js). */
.site-header--over{ position: fixed; left: 0; right: 0; background: transparent; color: var(--paper); }
.site-header--over .nav-primary a{ color: rgba(255,255,255,0.90); }
.site-header--over .nav-primary a:hover,
.site-header--over .nav-primary a[aria-current="page"]{ background: rgba(255,255,255,0.16); color: var(--paper); }
.site-header--over .header-tel{
color: var(--paper);
border-color: rgba(255,255,255,0.40);
background: rgba(11,33,26,0.42);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.site-header--over .header-tel-dot{ background: var(--signal-lite); }
.site-header--over .burger{ color: var(--paper); }
.site-header--over.on-scroll{
position: fixed;
background: rgba(255,255,255,0.97);
backdrop-filter: blur(12px);
box-shadow: 0 1px 0 var(--hair-mint);
color: var(--ink);
}
.site-header--over.on-scroll .nav-primary a{ color: var(--ink); }
.site-header--over.on-scroll .nav-primary a:hover,
.site-header--over.on-scroll .nav-primary a[aria-current="page"]{ background: var(--mint); color: var(--signal); }
.site-header--over.on-scroll .header-tel{ color: var(--signal); border-color: var(--signal); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header--over.on-scroll .header-tel-dot{ background: var(--signal); }
.site-header--over.on-scroll .burger{ color: var(--ink); }
.header-row{
display: flex;
align-items: center;
gap: 24px;
}
/* --- MARQUE : le vrai logo H3D vectorisé ------------------- */
.brand{
display: inline-flex;
align-items: center;
flex: 0 0 auto;
transition: transform 200ms var(--ease-spring);
}
.brand:hover{ transform: scale(1.03); }
.brand-logo{ display: block; height: 58px; width: auto; transition: opacity 240ms var(--ease-expo); }
.brand-logo--light{ display: none; }
/* Sur le hero photo : version monochrome blanche, plus lisible qu'un vert sur photo. */
.site-header--over:not(.on-scroll) .brand-logo--dark{ display: none; }
.site-header--over:not(.on-scroll) .brand-logo--light{ display: block; color: var(--paper); }
.nav-primary{
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
}
.nav-primary a{
padding: 10px 14px;
font-size: 15px;
font-weight: 500;
color: var(--ink);
border-radius: var(--r-pill);
transition: background 180ms var(--ease-expo), color 180ms var(--ease-expo);
}
.nav-primary a:hover, .nav-primary a[aria-current="page"]{ background: var(--signal); color: var(--paper); }
.header-cta{ display: inline-flex; gap: 10px; align-items: center; }
.header-tel{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 18px;
border-radius: var(--r-pill);
border: 2px solid var(--signal);
color: var(--signal);
font-weight: 700;
font-size: 15px;
font-variant-numeric: tabular-nums;
transition: background 180ms var(--ease-expo), color 180ms var(--ease-expo);
}
.header-tel:hover{ background: var(--signal); color: var(--paper); }
.header-tel-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(28,136,104,0.16); }
.burger{
display: none;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--signal);
color: var(--paper);
align-items: center;
justify-content: center;
margin-left: auto;
}
.burger svg{ width: 22px; height: 22px; }
/* Burger overlay */
.mobile-menu{
position: fixed;
inset: 0;
z-index: 60;
background: var(--signal);
color: var(--paper);
padding: 24px var(--pad-side) 40px;
transform: translateY(-100%);
transition: transform 380ms var(--ease-expo);
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 24px;
}
.mobile-menu[data-open="true"]{ transform: translateY(0); }
.mobile-menu-head{ display: flex; align-items: center; gap: 24px; }
.mobile-menu-close{
margin-left: auto;
width: 44px; height: 44px; border-radius: 50%;
background: var(--paper); color: var(--signal);
display: inline-flex; align-items: center; justify-content: center;
}
.mobile-menu-close svg{ width: 22px; height: 22px; }
.mobile-menu nav{ display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.mobile-menu nav a{
padding: 16px 20px;
font-size: 22px;
font-weight: 600;
border-radius: var(--r-card);
background: rgba(255,255,255,0.08);
}
.mobile-menu nav a:hover, .mobile-menu nav a[aria-current="page"]{ background: var(--paper); color: var(--signal); }
.mobile-menu-cta{ display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.mobile-menu-cta .btn{ justify-content: center; padding: 20px; font-size: 17px; }
/* --- HERO PHOTO PLEINE PAGE ------------------------------- */
/* Contrat : la photo tient tout l'écran, MAIS rien n'est jamais coupé.
grid-template-rows: 1fr auto → le bloc principal respire, le bandeau de
réassurance est TOUJOURS posé au bas du hero, jamais sous la ligne de flottaison. */
.hero-photo{
position: relative;
isolation: isolate;
min-height: 100svh;
display: grid;
grid-template-rows: 1fr auto;
color: var(--paper);
overflow: hidden;
}
.hero-photo__media{
position: absolute;
inset: 0;
z-index: -2;
overflow: hidden;
/* Le filtre vit sur le PARENT, pas sur l'image animee : applique a l'element
qui bouge, il forcait un recalcul a chaque frame (c'est ce qui saccadait). */
filter: saturate(1.06) contrast(1.06) brightness(1.04);
}
.hero-photo__media img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 48%;
/* linear, pas d'easing : sur une course longue, une courbe expo finit si
lentement que le deplacement passe sous le pixel et saccade.
Couche GPU forcee pour que le zoom ne repeigne jamais l'image. */
will-change: transform;
backface-visibility: hidden;
animation: hero-drift 13s linear infinite alternate;
}
@keyframes hero-drift{
from{ transform: scale(1.04) translate3d(0, 0, 0); }
to { transform: scale(1.16) translate3d(-2.2%, -1.4%, 0); }
}
/* Voile vert profond : la photo est chaude et dorée, le voile la refroidit
juste assez pour que le blanc passe en AA sans éteindre les façades niçoises. */
.hero-photo__scrim{
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(100deg, rgba(9,28,22,0.86) 0%, rgba(9,28,22,0.72) 30%, rgba(9,28,22,0.34) 52%, rgba(9,28,22,0.06) 68%, rgba(9,28,22,0) 82%),
linear-gradient(to bottom, rgba(9,28,22,0.52) 0%, rgba(9,28,22,0.10) 13%, rgba(9,28,22,0) 22%),
linear-gradient(to top, rgba(9,28,22,0.64) 0%, rgba(9,28,22,0) 24%);
}
.hero-photo__inner{
align-self: center;
justify-self: center; /* sinon la piste grid resout la largeur sur le contenu */
width: 100%;
display: block;
padding-top: clamp(104px, 12vh, 150px);
padding-bottom: clamp(28px, 4vh, 48px);
}
.hero-photo__text{ max-width: min(62%, 760px); }
/* --- LOCKUP : le logo H3D + les 3 métiers du logo client --- */
.hero-lockup{
display: flex;
align-items: center;
gap: clamp(18px, 2.4vw, 32px);
margin: 0 0 22px;
}
.hero-lockup__mark{
flex: 0 0 auto;
width: auto;
height: clamp(88px, 11.4vw, 164px);
color: var(--paper);
filter: drop-shadow(0 8px 22px rgba(0,0,0,0.34));
opacity: 1;
animation: spring-in 680ms var(--ease-spring) 120ms backwards;
}
@keyframes spring-in{
0% { opacity: 0; transform: scale(0.72); }
70% { transform: scale(1.06); }
100% { opacity: 1; transform: scale(1); }
}
.hero-lockup__rule{
flex: 0 0 auto;
align-self: stretch;
width: 2px;
border-radius: 2px;
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.42) 22%, rgba(255,255,255,0.42) 78%, rgba(255,255,255,0) 100%);
}
.hero-title{
text-shadow: 0 2px 20px rgba(6,20,16,0.38);
font-size: clamp(30px, 3.6vw, 51px);
font-weight: 700;
line-height: 1.07;
letter-spacing: -0.028em;
color: var(--paper);
margin: 0;
text-wrap: balance;
}
.hero-title span{
display: block;
opacity: 1;
animation: lockup-line 620ms var(--ease-expo) backwards;
}
.hero-title span:nth-child(1){ animation-delay: 220ms; }
.hero-title span:nth-child(2){ animation-delay: 320ms; }
.hero-title span:nth-child(3){ animation-delay: 420ms; }
@keyframes lockup-line{
from{ opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
/* Le D initial en vert, exactement comme sur le logo de l'entreprise. */
.hero-title b{ font-weight: 700; color: var(--signal-lite); }
.hero-photo__sub{
font-size: clamp(16px, 1.3vw, 19px);
line-height: 1.6;
color: #ffffff;
max-width: 46ch;
margin: 0 0 28px;
text-shadow: 0 1px 14px rgba(6,20,16,0.45);
}
.hero-photo__sub strong{ color: var(--paper); font-weight: 600; }
.hero-photo .hero-cta{ margin-bottom: 0; }
/* --- CARTES DE PREUVE : rangée compacte sous les CTA ---------
Elles étaient en colonne à droite et masquaient le technicien.
Rangée de 3 largeurs égales, fond blanc franc, aucune bordure. */
.trust-row{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 30px;
}
.trust-card{
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
padding: 14px 16px;
border-radius: 16px;
background: rgba(255,255,255,0.95);
box-shadow: 0 10px 26px rgba(6,22,17,0.22);
opacity: 1;
animation: trust-in 560ms var(--ease-spring) backwards;
transition: transform 240ms var(--ease-spring), background 240ms var(--ease-expo);
}
.trust-card:hover{ transform: translateY(-3px); background: #ffffff; }
.trust-card:nth-child(1){ animation-delay: 520ms; }
.trust-card:nth-child(2){ animation-delay: 600ms; }
.trust-card:nth-child(3){ animation-delay: 680ms; }
@keyframes trust-in{
0% { opacity: 0; transform: translateY(14px) scale(0.97); }
70% { transform: translateY(-3px) scale(1.02); }
100%{ opacity: 1; transform: translateY(0) scale(1); }
}
/* Une seule forme d'icône pour les trois : c'est ce qui les rend homogènes
(l'ancienne pastille « 6 / mois » était un cas à part, et mal composée). */
.trust-card__fig{
flex: 0 0 auto;
width: 38px; height: 38px;
border-radius: 11px;
display: grid;
place-items: center;
background: var(--mint);
color: var(--signal);
}
.trust-card__fig svg{ width: 20px; height: 20px; }
.trust-card__body{ min-width: 0; }
.trust-card__k{
display: block;
font-size: 13.5px;
white-space: nowrap;
font-weight: 700;
letter-spacing: -0.012em;
color: var(--ink);
line-height: 1.2;
}
.trust-card__v{
display: block;
font-size: 11.5px;
line-height: 1.4;
text-wrap: pretty;
color: var(--muted);
margin-top: 3px;
}
/* --- BANDEAU DE RÉASSURANCE, DANS le hero ------------------- */
.reassure{
border-top: 1px solid rgba(255,255,255,0.18);
background: rgba(6,26,20,0.30);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.reassure-row{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
padding: 18px 0;
}
.reassure-item{
display: flex;
align-items: center;
gap: 11px;
padding: 4px 18px;
border-left: 1px solid rgba(255,255,255,0.14);
opacity: 1;
animation: lockup-line 560ms var(--ease-expo) backwards;
}
.reassure-item:first-child{ border-left: 0; padding-left: 0; }
.reassure-item:nth-child(1){ animation-delay: 760ms; }
.reassure-item:nth-child(2){ animation-delay: 830ms; }
.reassure-item:nth-child(3){ animation-delay: 900ms; }
.reassure-item:nth-child(4){ animation-delay: 970ms; }
.reassure-item svg{ flex: 0 0 auto; width: 20px; height: 20px; color: var(--signal-lite); }
.reassure-item b{ display: block; font-size: 14.5px; font-weight: 600; color: var(--paper); line-height: 1.25; }
.reassure-item span{ display: block; font-size: 12.5px; color: rgba(255,255,255,0.66); line-height: 1.3; }
/* Invitation à faire défiler : le hero fait 100svh, il faut le dire. */
.hero-scroll{
position: absolute;
left: 50%;
bottom: calc(100% + 14px);
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.62);
pointer-events: none;
}
.hero-scroll svg{ width: 14px; height: 14px; animation: nudge 1.8s var(--ease-expo) infinite; }
@keyframes nudge{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(4px); } }
/* --- BANDEAU COUNT-UP DRENCH VERT ------------------------- */
.stats{ background: var(--signal); color: var(--paper); padding: 44px 0; }
.stats-row{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.stat{
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px 20px;
border-right: 1px solid rgba(255,255,255,0.16);
align-items: flex-start;
}
.stat:last-child{ border-right: 0; }
.stat-num{
font-size: clamp(48px, 6vw, 72px);
font-weight: 900;
line-height: 1.00;
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums;
}
.stat-num sup{ font-size: 0.55em; font-weight: 700; vertical-align: super; margin-left: 4px; }
.stat-label{ font-size: 14px; font-weight: 500; opacity: 0.85; }
/* --- SECTION HEADERS -------------------------------------- */
.section-head{ display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(32px, 5vw, 56px); flex-wrap: wrap; }
.section-head-l{ max-width: 640px; }
.section-head h2{ margin-top: 12px; }
.section-head p{ color: var(--muted); font-size: 17px; margin-top: 12px; }
.section-drench .section-head p{ color: rgba(255,255,255,0.82); }
/* --- GRID NUISIBLES 3x3 FLIP-3D --------------------------- */
.nuisibles{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: stretch;
}
/* Page Désinsectisation : 8 insectes, la grille passe en 4 colonnes. */
.nuisibles--4{ grid-template-columns: repeat(4, 1fr); }
.nuisibles--4 .card-flip-inner{ min-height: 262px; }
.nuisibles--4 .nuis-frame{ max-height: 104px; }
.nuisibles--4 .card-flip-front .nuis-name,
.nuisibles--4 .card-flip-back .nuis-name{ font-size: 17px; }
.nuisibles--4 .card-flip-back .nuis-big-price{ font-size: clamp(28px, 2.6vw, 34px); }
.card-flip{
perspective: 1100px;
cursor: pointer;
outline: 0;
height: 100%;
}
.card-flip-inner{
position: relative;
display: grid; /* les 2 faces dans la MEME cellule */
transform-style: preserve-3d;
transition: transform 520ms var(--ease-expo);
min-height: 268px;
height: 100%;
border-radius: var(--r-card);
}
.card-flip:hover .card-flip-inner,
.card-flip.flipped .card-flip-inner,
.card-flip:focus-visible .card-flip-inner{
transform: rotateY(-180deg);
}
.card-flip-face{
grid-area: 1 / 1; /* superposition SANS position:absolute :
l'inner se dimensionne sur la face la plus haute */
position: relative;
min-width: 0;
border-radius: var(--r-card);
padding: 22px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
display: flex;
flex-direction: column;
gap: 8px;
}
.card-flip-front{
background: var(--paper);
box-shadow: var(--sh-card);
border: 1px solid var(--hair-mint);
color: var(--ink);
}
/* Cadre PHOTO du nuisible : vraie macro plutôt qu'une icône.
Volontairement plus contenu que la tuile pleine largeur du proto 2 :
la photo prouve, elle ne prend pas toute la carte. */
.nuis-frame{
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
max-height: 128px;
border-radius: 16px;
overflow: hidden;
background: var(--mint);
margin-bottom: 12px;
box-shadow: inset 0 0 0 1px rgba(45,55,50,0.07);
}
.nuis-frame img{
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.02);
transition: transform 600ms var(--ease-expo);
}
.card-flip:hover .nuis-frame img{ transform: scale(1.07); }
.card-flip:hover .nuis-flip-hint{ background: var(--signal); color: var(--paper); }
/* Léger dégradé bas : le nom de l'espèce reste lisible quel que soit le cliché. */
.nuis-frame::after{
content: '';
position: absolute;
inset: auto 0 0 0;
height: 42%;
background: linear-gradient(to top, rgba(20,42,34,0.30), rgba(20,42,34,0));
pointer-events: none;
}
.card-flip-front .nuis-name{ font-size: 20px; font-weight: 600; letter-spacing: -0.005em; }
.card-flip-front .nuis-price{ color: var(--muted); font-size: 14px; margin-top: auto; }
.card-flip-front .nuis-flip-hint{
position: absolute;
top: 32px;
right: 32px;
z-index: 2;
width: 34px; height: 34px;
border-radius: 50%;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 2px 10px rgba(20,42,34,0.28);
color: var(--signal);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 200ms var(--ease-expo);
}
.card-flip-front .nuis-flip-hint svg{ width: 18px; height: 18px; }
.card-flip-back{
background: var(--signal);
color: var(--paper);
transform: rotateY(180deg);
justify-content: space-between;
}
.card-flip-back .nuis-name{ font-size: 20px; font-weight: 600; }
.card-flip-back .nuis-tag{ font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.82; margin-bottom: 4px; }
.card-flip-back .nuis-big-price{
font-size: clamp(32px, 3.4vw, 40px);
font-weight: 700;
line-height: 1.00;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.card-flip-back .nuis-big-price small{ display: block; font-size: 0.32em; font-weight: 500; opacity: 0.78; margin-top: 7px; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.3; }
.card-flip-back .card-cta{
align-self: flex-start;
padding: 10px 16px;
border-radius: var(--r-pill);
background: var(--paper);
color: var(--signal);
font-size: 13px;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 6px;
}
.card-flip-back .card-cta::after{ content: '\2192'; }
/* --- PARCOURS 3 ÉTAPES ------------------------------------ */
.parcours{ background: var(--mint); }
.parcours-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.step{
background: var(--paper);
border-radius: var(--r-card);
padding: 32px;
display: flex;
flex-direction: column;
gap: 14px;
box-shadow: var(--sh-card);
transition: transform 220ms var(--ease-expo), box-shadow 220ms var(--ease-expo);
}
.step:hover{ transform: translateY(-4px); box-shadow: var(--sh-hover); }
.step-num{
font-size: 64px;
font-weight: 900;
line-height: 1.00;
color: var(--signal);
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
}
.step-icon{
width: 56px; height: 56px;
border-radius: 50%;
background: var(--mint);
color: var(--signal);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 4px;
}
.step-icon svg{ width: 28px; height: 28px; }
.step h3{ font-size: 22px; font-weight: 600; }
.step p{ color: var(--muted); font-size: 15px; line-height: 1.55; }
/* --- MÉTHODE DRENCH VERT (3 étapes alternées) ------------- */
.methode{ background: var(--signal); color: var(--paper); }
.methode-row{
display: grid;
grid-template-columns: 5fr 7fr;
gap: clamp(32px, 5vw, 72px);
align-items: center;
padding: clamp(32px, 4vw, 56px) 0;
border-bottom: 1px solid rgba(255,255,255,0.14);
}
.methode-row:last-child{ border-bottom: 0; }
.methode-row.reverse{ grid-template-columns: 7fr 5fr; }
.methode-row.reverse .methode-visual{ order: 2; }
.methode-tag{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); background: rgba(255,255,255,0.12); color: var(--paper); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 16px; }
.methode-tag-num{ display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--paper); color: var(--signal); border-radius: 50%; font-size: 12px; font-weight: 800; }
.methode-row h3{ font-size: clamp(28px, 3.5vw, 40px); font-weight: 700; line-height: 1.12; letter-spacing: -0.015em; margin-bottom: 14px; }
.methode-row p{ font-size: 18px; opacity: 0.9; }
.methode-row ul{ display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.methode-row ul li{ display: flex; align-items: flex-start; gap: 10px; font-size: 15px; }
.methode-row ul li::before{
content: '';
flex: 0 0 auto;
width: 8px; height: 8px;
background: var(--paper);
border-radius: 50%;
margin-top: 8px;
}
.methode-visual{
position: relative;
aspect-ratio: 4 / 3;
border-radius: var(--r-card);
overflow: hidden;
background: var(--signal-hi);
}
.methode-visual .ph, .methode-visual img{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.methode-visual img{ z-index: 2; }
.methode-visual .ph{
z-index: 1;
background: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 10px, rgba(255,255,255,0.10) 10px 20px);
display: grid; place-items: center;
color: rgba(255,255,255,0.5);
font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
}
/* Belt + suspenders : quand une ![]()
est présente dans le slot,
le placeholder disparaît complètement (onerror="this.remove()" le rétablit). */
.methode-visual:has(img) .ph{ display: none; }
/* --- POURQUOI H3D · 5 args -------------------------------- */
.pourquoi{ background: var(--mint); }
.pourquoi-grid{
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
.arg{
background: var(--paper);
border-radius: var(--r-card);
padding: 24px;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow: var(--sh-card);
transition: transform 220ms var(--ease-expo), box-shadow 220ms var(--ease-expo);
}
.arg:hover{ transform: translateY(-4px); box-shadow: var(--sh-hover); }
.arg-icon{
width: 48px; height: 48px;
border-radius: 50%;
background: var(--signal);
color: var(--paper);
display: inline-flex;
align-items: center;
justify-content: center;
}
.arg-icon svg{ width: 22px; height: 22px; }
.arg h3{ font-size: 17px; font-weight: 600; line-height: 1.25; }
.arg p{ font-size: 14px; color: var(--muted); line-height: 1.55; }
/* --- AVIS GOOGLE -------------------------------------------- */
.avis-head{
display: grid;
grid-template-columns: auto 1fr;
gap: 32px;
align-items: center;
margin-bottom: 40px;
}
.avis-score{
display: flex;
flex-direction: column;
gap: 6px;
align-items: flex-start;
padding: 24px 28px;
border-radius: var(--r-card);
background: var(--mint);
}
.avis-score-num{
font-size: 56px;
font-weight: 900;
line-height: 1.00;
color: var(--signal);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.avis-score-stars{ display: inline-flex; gap: 2px; color: #f5b342; font-size: 20px; }
.avis-score-label{ font-size: 14px; color: var(--muted); }
.avis-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.avis{
background: var(--paper);
border-radius: var(--r-card);
padding: 24px;
display: flex;
flex-direction: column;
gap: 14px;
box-shadow: var(--sh-card);
border: 1px solid var(--hair-mint);
}
.avis-stars{ color: #f5b342; font-size: 16px; letter-spacing: 2px; line-height: 1.00; }
.avis-quote{ font-size: 15px; line-height: 1.55; color: var(--ink); }
.avis-meta{ display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--hair-mint); margin-top: auto; }
.avis-name{ font-weight: 600; font-size: 14px; }
.avis-google{ display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.avis-google-dot{ width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(90deg, #4285f4 25%, #db4437 25% 50%, #f4b400 50% 75%, #0f9d58 75%); }
/* --- ZONES 5 PILL ------------------------------------------ */
.zones-row{
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.zone-pill{
background: var(--paper);
border-radius: var(--r-card);
padding: 20px;
border: 1px solid var(--hair-mint);
display: flex;
flex-direction: column;
gap: 6px;
transition: transform 200ms var(--ease-expo), box-shadow 200ms var(--ease-expo);
}
.zone-pill:hover{ transform: translateY(-3px); box-shadow: var(--sh-hover); }
.zone-name{ font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.zone-tarif{
font-size: 28px;
font-weight: 800;
color: var(--signal);
letter-spacing: -0.02em;
line-height: 1.00;
font-variant-numeric: tabular-nums;
}
.zone-tarif small{ font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; margin-left: 4px; }
.zone-cities{ font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 6px; }
.zone-pill.zone-free .zone-tarif{ font-size: 20px; letter-spacing: 0.03em; text-transform: uppercase; }
/* --- FAQ 6 ACCORDÉONS -------------------------------------- */
.faq{ max-width: 900px; margin: 0 auto; }
.faq-item{
background: var(--paper);
border: 1px solid var(--hair-mint);
border-radius: var(--r-input);
padding: 4px;
margin-bottom: 12px;
transition: transform 200ms var(--ease-expo), box-shadow 200ms var(--ease-expo), background 200ms var(--ease-expo);
}
.faq-item[open]{ background: var(--mint); }
.faq-item:hover{ transform: translateY(-2px); box-shadow: var(--sh-card); }
.faq-item summary{
list-style: none;
cursor: pointer;
padding: 20px 24px;
display: flex;
align-items: center;
gap: 20px;
font-weight: 600;
font-size: 17px;
line-height: 1.35;
color: var(--ink);
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item .faq-toggle{
margin-left: auto;
width: 36px; height: 36px;
border-radius: 50%;
background: var(--signal);
color: var(--paper);
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 260ms var(--ease-expo);
flex: 0 0 auto;
}
.faq-item .faq-toggle svg{ width: 16px; height: 16px; }
.faq-item[open] .faq-toggle{ transform: rotate(45deg); }
.faq-body{ padding: 4px 24px 22px; color: var(--muted); font-size: 15px; line-height: 1.65; }
/* --- CTA FINAL DRENCH PROFOND ----------------------------- */
.cta-final{
background: var(--signal-hi);
color: var(--paper);
text-align: center;
padding: clamp(80px, 10vw, 140px) 0;
position: relative;
overflow: hidden;
}
.cta-final::before, .cta-final::after{
content: '';
position: absolute;
width: 320px; height: 320px;
border-radius: 50%;
background: radial-gradient(circle, rgba(28,136,104,0.7), rgba(28,136,104,0) 70%);
pointer-events: none;
}
.cta-final::before{ top: -40px; left: -80px; }
.cta-final::after{ bottom: -80px; right: -60px; width: 380px; height: 380px; }
.cta-final .container{ position: relative; z-index: 1; }
.cta-final h2{ font-size: clamp(36px, 5vw, 56px); line-height: 1.10; letter-spacing: -0.015em; font-weight: 700; margin-bottom: 20px; max-width: 720px; margin-left: auto; margin-right: auto; }
.cta-final p{ font-size: 20px; opacity: 0.85; max-width: 620px; margin: 0 auto 32px; }
.cta-final-row{ display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.cta-final p.cta-final-note{ margin-top: 24px; font-size: 13px; max-width: none; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; }
/* --- FOOTER DRENCH VERT ----------------------------------- */
.site-footer{ background: var(--signal); color: var(--paper); padding: 72px 0 24px; }
.footer-grid{
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 56px;
}
.footer-brand{ display: flex; flex-direction: column; gap: 16px; }
.footer-brand .brand{ background: transparent; padding: 0; margin-bottom: 6px; }
.footer-brand .brand .brand-logo{ height: 62px; }
/* Menu mobile (fond vert) : la version claire du logo. */
.mobile-menu-head .brand{ background: transparent; padding: 0; }
.mobile-menu-head .brand .brand-logo{ height: 52px; }
.footer-brand p{ font-size: 14px; opacity: 0.85; max-width: 300px; }
.footer-col h4{ font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 20px; opacity: 0.75; }
.footer-col ul{ display: flex; flex-direction: column; gap: 10px; }
.footer-col a, .footer-col span{ font-size: 15px; line-height: 1.5; opacity: 0.9; transition: opacity 180ms var(--ease-expo); }
.footer-col a:hover{ opacity: 1; }
.footer-certifs{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.footer-certifs .pill{ background: rgba(255,255,255,0.14); color: var(--paper); font-size: 11px; }
.footer-bottom{
padding-top: 24px;
border-top: 1px solid rgba(255,255,255,0.14);
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
font-size: 13px;
opacity: 0.75;
flex-wrap: wrap;
}
/* --- STICKY MOBILE CTA ------------------------------------ */
.sticky-cta{
position: fixed;
left: 16px; right: 16px; bottom: 16px;
z-index: 30;
background: var(--signal);
border-radius: var(--r-pill);
padding: 10px;
display: none;
gap: 8px;
box-shadow: 0 12px 32px rgba(28,136,104,0.32);
transform: translateY(140%);
transition: transform 300ms var(--ease-expo);
}
.sticky-cta.on{ transform: translateY(0); }
.sticky-cta a{
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 14px 12px;
border-radius: var(--r-pill);
font-weight: 700;
font-size: 14px;
line-height: 1;
white-space: nowrap;
}
.sticky-cta-primary{ background: var(--paper); color: var(--signal); }
.sticky-cta-secondary{ background: transparent; color: var(--paper); border: 1.5px solid rgba(255,255,255,0.5); font-variant-numeric: tabular-nums; }
/* --- TARIFS TABLE ------------------------------------------ */
.tarifs-block{ margin-bottom: 40px; }
.tarifs-block h3{ font-size: 22px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.010em; }
.tarifs-block h3 .tarifs-tag{ display: inline-block; margin-left: 10px; font-size: 12px; padding: 4px 12px; background: var(--mint); color: var(--signal); border-radius: var(--r-pill); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; }
.tarifs-table{
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--paper);
border-radius: var(--r-card);
overflow: hidden;
border: 1px solid var(--hair-mint);
}
.tarifs-table th, .tarifs-table td{
padding: 16px 20px;
text-align: left;
border-bottom: 1px solid var(--hair-mint);
font-size: 15px;
}
.tarifs-table th{ background: var(--mint); font-weight: 600; color: var(--ink); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.tarifs-table tr:last-child td{ border-bottom: 0; }
.tarifs-table td:last-child{ text-align: right; font-weight: 700; color: var(--signal); font-variant-numeric: tabular-nums; }
.tarifs-note{ margin-top: 12px; font-size: 13px; color: var(--muted); }
/* --- PROSE + CONTENT SECTIONS ------------------------------ */
.prose h2{ margin: 48px 0 20px; }
.prose h3{ margin: 32px 0 12px; font-size: 22px; }
.prose p{ font-size: 17px; line-height: 1.70; color: var(--ink); margin-bottom: 18px; }
.prose ul{ list-style: none; margin: 20px 0; }
.prose ul li{ padding-left: 26px; position: relative; margin-bottom: 10px; font-size: 16px; line-height: 1.60; }
.prose ul li::before{ content: '\2713'; position: absolute; left: 0; top: 0; color: var(--signal); font-weight: 800; }
/* --- PAGE INTERIOR HERO ------------------------------------ */
.page-hero{ background: var(--mint); padding: clamp(64px, 8vw, 100px) 0 clamp(48px, 5vw, 72px); }
.page-hero .pill{ margin-bottom: 20px; }
.page-hero h1{ font-size: clamp(40px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.020em; font-weight: 700; margin-bottom: 16px; }
.page-hero .lead{ max-width: 720px; font-size: 20px; color: var(--ink); }
.breadcrumb{ display: flex; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 20px; align-items: center; }
.breadcrumb a{ color: var(--muted); }
.breadcrumb a:hover{ color: var(--signal); }
.breadcrumb-sep{ opacity: 0.5; }
/* --- FICHE PUNAISE / DEUX COL ------------------------------ */
.two-col{
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: clamp(24px, 4vw, 56px);
align-items: start;
}
.two-col-sticky{ position: sticky; top: 90px; }
.spec-card{
background: var(--mint);
border-radius: var(--r-card);
padding: 28px;
display: flex;
flex-direction: column;
gap: 14px;
}
.spec-card h3{ font-size: 20px; font-weight: 700; }
.spec-card ul{ display: flex; flex-direction: column; gap: 8px; }
.spec-card ul li{ font-size: 14px; display: flex; gap: 10px; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--hair-mint); }
.spec-card ul li:last-child{ border-bottom: 0; }
.spec-card ul li strong{ color: var(--signal); font-weight: 700; font-variant-numeric: tabular-nums; }
/* --- CONTACT FORM ------------------------------------------ */
.contact-grid{
display: grid;
grid-template-columns: 5fr 7fr;
gap: clamp(24px, 4vw, 56px);
align-items: start;
}
.contact-card{
background: var(--mint);
border-radius: var(--r-card);
padding: 40px;
display: flex;
flex-direction: column;
gap: 24px;
}
.contact-card .phone{ margin: 4px 0 12px; }
.contact-info{ display: flex; flex-direction: column; gap: 14px; }
.contact-info-row{ display: flex; align-items: center; gap: 14px; font-size: 15px; }
.contact-info-icon{
flex: 0 0 auto;
width: 40px; height: 40px;
border-radius: 50%;
background: var(--signal); color: var(--paper);
display: inline-flex; align-items: center; justify-content: center;
}
.contact-info-icon svg{ width: 18px; height: 18px; }
.form{
background: var(--paper);
border-radius: var(--r-card);
padding: 40px;
border: 1px solid var(--hair-mint);
display: flex;
flex-direction: column;
gap: 18px;
}
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field{ display: flex; flex-direction: column; gap: 6px; }
.form-field label{ font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: 0.02em; }
.form-field input, .form-field textarea, .form-field select{
padding: 14px 16px;
border-radius: var(--r-input);
border: 1.5px solid var(--hair-mint);
font: inherit;
font-size: 15px;
color: var(--ink);
background: var(--paper);
transition: border-color 180ms var(--ease-expo), box-shadow 180ms var(--ease-expo);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{
outline: 0;
border-color: var(--signal);
box-shadow: 0 0 0 4px rgba(28,136,104,0.14);
}
.form-field textarea{ min-height: 140px; resize: vertical; }
/* --- SIDEBAR SERVICES DE PAGE ------------------------------ */
.services-list{ display: flex; flex-direction: column; gap: 8px; }
.services-list a{
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: var(--r-pill);
background: var(--paper);
border: 1px solid var(--hair-mint);
font-size: 14px;
font-weight: 500;
transition: transform 180ms var(--ease-expo), background 180ms var(--ease-expo), color 180ms var(--ease-expo);
}
.services-list a:hover{ background: var(--signal); color: var(--paper); border-color: var(--signal); transform: translateX(4px); }
.services-list a[aria-current="page"]{ background: var(--signal); color: var(--paper); border-color: var(--signal); }
.services-list-icon{ width: 32px; height: 32px; padding: 4px; background: var(--mint); border-radius: 50%; }
.services-list a:hover .services-list-icon, .services-list a[aria-current="page"] .services-list-icon{ background: rgba(255,255,255,0.15); }
/* --- FAQPage MICRO (mini) ---------------------------------- */
.mini-faq{ display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.mini-faq .faq-item{ margin-bottom: 0; }
/* --- COMPARATIF PUNAISES ----------------------------------- */
.compare-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 24px 0 40px;
}
.compare-card{
background: var(--paper);
border-radius: var(--r-card);
padding: 28px;
border: 1.5px solid var(--hair-mint);
display: flex;
flex-direction: column;
gap: 14px;
}
.compare-card.featured{ border-color: var(--signal); background: var(--mint); box-shadow: var(--sh-hover); }
.compare-card h3{ font-size: 22px; font-weight: 700; }
.compare-card .compare-price{ font-size: 32px; font-weight: 800; color: var(--signal); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.00; }
.compare-card .compare-price small{ font-size: 14px; color: var(--muted); font-weight: 500; margin-left: 6px; }
.compare-card ul{ display: flex; flex-direction: column; gap: 10px; }
.compare-card ul li{ padding-left: 24px; position: relative; font-size: 14px; line-height: 1.55; }
.compare-card ul li::before{ content: '\2713'; position: absolute; left: 0; top: 0; color: var(--signal); font-weight: 800; }
.compare-badge{
align-self: flex-start;
padding: 4px 12px;
border-radius: var(--r-pill);
background: var(--signal); color: var(--paper);
font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
/* --- SPACERS ----------------------------------------------- */
.space-lg{ margin-top: clamp(48px, 6vw, 80px); }
.space-md{ margin-top: clamp(24px, 4vw, 48px); }
/* ============================================================
RESPONSIVE (1440 desktop / 960 tablette / 640 mobile / 390)
============================================================ */
@media (max-width: 1100px){
.pourquoi-grid{ grid-template-columns: repeat(3, 1fr); }
.arg:last-child{ grid-column: 2 / span 1; }
.methode-row, .methode-row.reverse{ grid-template-columns: 1fr; }
.methode-row.reverse .methode-visual{ order: 0; }
.avis-head{ grid-template-columns: 1fr; gap: 20px; }
.contact-grid, .two-col{ grid-template-columns: 1fr; }
.two-col-sticky{ position: static; }
}
@media (max-width: 960px){
.nav-primary, .header-cta{ display: none; }
.burger{ display: inline-flex; }
.site-header{ padding: 12px 0; }
.nuisibles{ grid-template-columns: repeat(2, 1fr); }
.parcours-grid{ grid-template-columns: 1fr; gap: 16px; }
.zones-row{ grid-template-columns: repeat(2, 1fr); }
.avis-grid{ grid-template-columns: 1fr; }
.stats-row{ grid-template-columns: repeat(2, 1fr); gap: 20px; }
.stat{ border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.16); padding-bottom: 20px; }
.stat:nth-last-child(-n+2){ border-bottom: 0; padding-bottom: 12px; }
.stat:nth-child(2n){ border-right: 0; }
.footer-grid{ grid-template-columns: 1fr 1fr; gap: 32px; }
.footer-brand{ grid-column: 1 / -1; }
.form-row{ grid-template-columns: 1fr; }
.sticky-cta{ display: flex; }
body{ padding-bottom: 92px; }
.pourquoi-grid{ grid-template-columns: repeat(2, 1fr); }
.arg:last-child{ grid-column: auto; }
.compare-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
.hero-cta{ flex-direction: column; align-items: stretch; }
.hero-cta .btn{ justify-content: center; }
.nuisibles{ grid-template-columns: 1fr; }
.zones-row{ grid-template-columns: 1fr; }
.stats-row{ grid-template-columns: 1fr; }
.stat{ border-bottom: 1px solid rgba(255,255,255,0.16); padding-bottom: 20px; }
.stat:last-child{ border-bottom: 0; }
.footer-grid{ grid-template-columns: 1fr; gap: 28px; }
.section-head{ flex-direction: column; align-items: flex-start; }
.cta-final-row{ flex-direction: column; align-items: stretch; }
.cta-final-row .btn{ justify-content: center; }
.pourquoi-grid{ grid-template-columns: 1fr; }
.faq-item summary{ font-size: 15px; padding: 16px 18px; }
.contact-card, .form{ padding: 28px; }
.site-header .container{ padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 390px){
:root{ --pad-side: 16px; }
.hero-title{ font-size: 32px; }
.display{ font-size: 44px; }
.stat-num{ font-size: 40px; }
}
/* --- prefers-reduced-motion ------------------------------- */
@media (prefers-reduced-motion: reduce){
html.js .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
.card-flip:hover .card-flip-inner{ transform: none; }
.site-header{ transition: none; }
/* Le zoom de fond du hero est un mouvement PERMANENT : c'est exactement
ce que ce reglage doit couper. Les entrees du hero aussi. */
.hero-photo__media img{ animation: none !important; transform: scale(1.04) !important; }
.hero-lockup__mark, .hero-title span, .pill-glass, .trust-card, .reassure-item{
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.hero-scroll svg{ animation: none !important; }
.nuis-frame img, .card-flip:hover .nuis-frame img{ transition: none !important; transform: none !important; }
}
/* ============================================================
PRISE DE RENDEZ-VOUS · formulaire intelligent + estimation vivante
============================================================ */
.page-hero--rdv{ padding-bottom: clamp(40px, 5vw, 64px); }
.hero-checks{ display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px; }
.hero-checks li{ position: relative; padding-left: 26px; font-size: 15px; color: var(--ink); }
.hero-checks li::before{
content: '';
position: absolute; left: 0; top: 4px;
width: 17px; height: 17px;
border-radius: 50%;
background: var(--signal);
box-shadow: inset 0 0 0 2px var(--signal);
}
.hero-checks li::after{
content: '';
position: absolute; left: 5px; top: 9px;
width: 6px; height: 3px;
border-left: 2px solid var(--paper);
border-bottom: 2px solid var(--paper);
transform: rotate(-45deg);
}
.rdv{ padding-top: clamp(48px, 6vw, 72px); }
.rdv-grid{
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.9fr);
gap: clamp(28px, 4vw, 56px);
align-items: start;
}
/* --- Progression ------------------------------------------- */
.rdv-progress{
display: flex;
gap: 8px;
margin: 0 0 30px;
padding: 0;
list-style: none;
counter-reset: none;
}
.rdv-progress li{
flex: 1;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: var(--r-pill);
background: var(--mint);
font-size: 14px;
font-weight: 500;
color: var(--muted);
transition: background 240ms var(--ease-expo), color 240ms var(--ease-expo);
}
.rdv-progress li span{
flex: 0 0 auto;
width: 24px; height: 24px;
border-radius: 50%;
display: grid; place-items: center;
background: var(--paper);
color: var(--muted);
font-size: 12px; font-weight: 800;
}
.rdv-progress li.is-on{ background: var(--signal); color: var(--paper); }
.rdv-progress li.is-on span{ background: var(--paper); color: var(--signal); }
.rdv-progress li.is-done{ background: var(--hair-mint); color: var(--signal-hi); }
.rdv-progress li.is-done span{ background: var(--signal); color: var(--paper); }
.rdv-progress li.is-done span::after{ content: '\2713'; }
.rdv-progress li.is-done span{ font-size: 0; }
.rdv-progress li.is-done span::after{ font-size: 12px; }
/* --- Étapes ------------------------------------------------- */
.rdv-step{ border: 0; margin: 0; padding: 0; min-width: 0; }
.rdv-step.is-on{ animation: lockup-line 420ms var(--ease-expo) backwards; }
.rdv-step-title{
font-size: var(--fs-h2);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--ink);
padding: 0;
margin: 0 0 26px;
}
.field{ margin-bottom: 22px; min-width: 0; }
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field > label, .field-label{
display: block;
font-size: 14px;
font-weight: 600;
color: var(--ink);
margin-bottom: 9px;
}
.field .opt{ font-weight: 400; color: var(--muted); }
.field input[type="text"], .field input[type="tel"], .field input[type="email"],
.field input[type="date"], .field select, .field textarea{
width: 100%;
padding: 15px 16px;
border: 1.5px solid var(--hair-mint);
border-radius: var(--r-input);
background: var(--paper);
font: inherit;
font-size: 16px;
color: var(--ink);
transition: border-color 180ms var(--ease-expo), box-shadow 180ms var(--ease-expo);
}
.field select{
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c8868' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 18px;
padding-right: 44px;
}
.field textarea{ resize: vertical; line-height: 1.55; }
.field :is(input, select, textarea):focus{
outline: 0;
border-color: var(--signal);
box-shadow: 0 0 0 4px rgba(28,136,104,0.14);
}
.field .is-err{ border-color: #c0392b; box-shadow: 0 0 0 4px rgba(192,57,43,0.12); }
.field-note{ font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 9px 0 0; }
.field-note a{ color: var(--signal); font-weight: 600; border-bottom: 1.5px solid var(--hair-mint); }
/* --- Segments (radio en pilules) ---------------------------- */
.seg{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seg--4{ grid-template-columns: repeat(4, 1fr); }
.seg-opt{ position: relative; display: block; }
.seg-opt input{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.seg-opt span{
display: block;
padding: 14px 16px;
text-align: center;
border: 1.5px solid var(--hair-mint);
border-radius: var(--r-pill);
font-size: 14.5px;
font-weight: 500;
color: var(--ink);
cursor: pointer;
transition: all 200ms var(--ease-expo);
}
.seg-opt:hover span{ border-color: var(--signal); }
.seg-opt input:checked + span{
background: var(--signal);
border-color: var(--signal);
color: var(--paper);
font-weight: 600;
}
.seg-opt input:focus-visible + span{ outline: 3px solid var(--signal); outline-offset: 2px; }
/* --- Vignettes nuisibles (radio-cards photo) ---------------- */
.pick-grid{
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
border-radius: var(--r-card);
transition: box-shadow 300ms var(--ease-expo);
}
.pick-grid--err{ box-shadow: 0 0 0 3px rgba(192,57,43,0.34); }
.pick{ position: relative; display: block; cursor: pointer; }
.pick input{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.pick-media{
display: block;
aspect-ratio: 4 / 3;
border-radius: 14px;
overflow: hidden;
background: var(--mint);
border: 2px solid transparent;
transition: border-color 200ms var(--ease-expo), transform 260ms var(--ease-spring);
}
.pick-media img{ width: 100%; height: 100%; object-fit: cover; }
.pick-media--icon{ display: grid; place-items: center; color: var(--signal); }
.pick-media--icon svg{ width: 34px; height: 34px; }
.pick-label{ display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-top: 8px; line-height: 1.3; }
.pick-hint{ display: block; font-size: 11.5px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.pick:hover .pick-media{ transform: translateY(-3px); border-color: var(--hair-mint); }
.pick input:checked ~ .pick-media{ border-color: var(--signal); box-shadow: 0 8px 22px rgba(28,136,104,0.22); }
.pick input:checked ~ .pick-label{ color: var(--signal); }
.pick input:focus-visible ~ .pick-media{ outline: 3px solid var(--signal); outline-offset: 3px; }
.pick input:checked ~ .pick-media::after{
content: '\2713';
position: absolute;
top: 8px; right: 8px;
width: 24px; height: 24px;
border-radius: 50%;
background: var(--signal);
color: var(--paper);
font-size: 13px; font-weight: 900;
display: grid; place-items: center;
}
/* --- Case à cocher ------------------------------------------ */
.field-check{ padding: 18px; background: var(--mint); border-radius: var(--r-input); }
.check{ display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--ink); cursor: pointer; }
.check input{ flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--signal); }
/* --- Navigation d'étape ------------------------------------- */
.rdv-nav{ display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 30px; }
.btn-ghost{ background: var(--mint); color: var(--signal-hi); }
.btn-ghost:hover{ background: var(--hair-mint); }
.rdv-fallback{ font-size: 14px; color: var(--muted); margin-top: 18px; }
.rdv-fallback a{ color: var(--signal); font-weight: 600; }
/* --- Confirmation ------------------------------------------- */
.rdv-done{ text-align: center; padding: clamp(36px, 5vw, 64px) 20px; }
.rdv-done-mark{
width: 68px; height: 68px;
margin: 0 auto 22px;
border-radius: 50%;
background: var(--signal);
color: var(--paper);
display: grid; place-items: center;
animation: spring-in 620ms var(--ease-spring) backwards;
}
.rdv-done-mark svg{ width: 32px; height: 32px; }
.rdv-done h2{ margin-bottom: 12px; }
.rdv-done p{ color: var(--muted); max-width: 46ch; margin-left: auto; margin-right: auto; }
.rdv-done a{ color: var(--signal); font-weight: 600; }
/* --- Panneau d'estimation ----------------------------------- */
.rdv-side{ position: sticky; top: 104px; }
.rdv-side-card{
background: var(--mint);
border-radius: var(--r-card);
padding: 28px;
border: 1px solid var(--hair-mint);
}
.rdv-est{
font-size: clamp(34px, 3.6vw, 46px);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--signal-hi);
font-variant-numeric: tabular-nums;
margin: 10px 0 6px;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px;
}
.rdv-est-from, .rdv-est-to{
font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--muted);
text-transform: lowercase;
}
.rdv-est-empty{ font-size: 19px; font-weight: 600; color: var(--muted); letter-spacing: -0.01em; }
.rdv-est-sub{ font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 0 0 22px; }
.rdv-recap{ margin: 0 0 20px; padding: 18px 0 0; border-top: 1px solid var(--hair-mint); }
.rdv-recap > div{ display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; }
.rdv-recap dt{ font-size: 13.5px; color: var(--muted); }
.rdv-recap dd{ margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); text-align: right; }
.rdv-side-notes{ margin: 0 0 20px; padding: 18px 0 0; border-top: 1px solid var(--hair-mint); }
.rdv-side-notes li{ position: relative; padding-left: 15px; font-size: 12.5px; line-height: 1.5; color: var(--muted); margin-bottom: 7px; }
.rdv-side-notes li::before{ content: ''; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--signal); }
.rdv-side-tel{
display: block;
padding: 16px 18px;
border-radius: var(--r-input);
background: var(--paper);
transition: transform 200ms var(--ease-spring), box-shadow 200ms var(--ease-expo);
}
.rdv-side-tel:hover{ transform: translateY(-2px); box-shadow: var(--sh-hover); }
.rdv-side-tel span{ display: block; font-size: 12.5px; color: var(--muted); }
.rdv-side-tel strong{ display: block; font-size: 21px; font-weight: 700; color: var(--signal); letter-spacing: -0.01em; margin-top: 2px; }
@media (max-width: 1100px){
.rdv-grid{ grid-template-columns: 1fr; }
.rdv-side{ position: static; order: -1; }
.pick-grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 760px){
.pick-grid{ grid-template-columns: repeat(2, 1fr); }
.seg, .seg--4, .field-row{ grid-template-columns: 1fr; }
.rdv-progress{ gap: 5px; }
.rdv-progress li{ flex-direction: column; gap: 5px; padding: 10px 6px; font-size: 11.5px; text-align: center; border-radius: 16px; }
.rdv-nav .btn{ flex: 1; justify-content: center; }
}
/* ============================================================
PROFESSIONNELS & HACCP
============================================================ */
.split-2{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(32px, 5vw, 72px);
align-items: center;
}
.split-2 h2{ margin: 12px 0 20px; }
.split-2 p{ color: var(--ink); margin-bottom: 1em; }
.split-2-fig{ margin: 0; }
.split-2-fig img{
width: 100%;
border-radius: var(--r-hero);
box-shadow: var(--sh-mascot);
}
.split-2-fig figcaption{
font-size: 13.5px;
line-height: 1.5;
color: var(--muted);
margin-top: 14px;
padding-left: 16px;
border-left: 2px solid var(--signal);
}
.split-2--rev .split-2-fig{ order: -1; }
.inline-link{
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 8px;
font-weight: 600;
color: var(--signal);
border-bottom: 2px solid var(--hair-mint);
transition: border-color 180ms var(--ease-expo);
}
.inline-link::after{ content: '\2192'; transition: transform 180ms var(--ease-expo); }
.inline-link:hover{ border-color: var(--signal); }
.inline-link:hover::after{ transform: translateX(4px); }
.livrables{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.livrables li{
padding: 24px;
border-radius: var(--r-card);
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.20);
transition: background 240ms var(--ease-expo), transform 240ms var(--ease-spring);
}
.livrables li:hover{ background: rgba(255,255,255,0.17); transform: translateY(-3px); }
.livrables strong{
display: block;
font-size: 17px;
font-weight: 600;
color: var(--paper);
margin-bottom: 8px;
padding-left: 26px;
position: relative;
line-height: 1.3;
}
.livrables strong::before{
content: '\2713';
position: absolute; left: 0; top: 0;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--paper);
color: var(--signal);
font-size: 11px; font-weight: 900;
display: grid; place-items: center;
}
.livrables span{ display: block; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,0.80); }
.secteurs{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.secteur{
padding: 28px;
border-radius: var(--r-card);
background: var(--paper);
border: 1px solid var(--hair-mint);
box-shadow: var(--sh-card);
transition: transform 240ms var(--ease-spring), box-shadow 240ms var(--ease-expo);
}
.secteur:hover{ transform: translateY(-4px); box-shadow: var(--sh-hover); }
.secteur h3{ margin-bottom: 12px; letter-spacing: -0.01em; }
.secteur-enjeu{ font-size: 15px; line-height: 1.6; color: var(--muted); margin-bottom: 16px; }
.secteur-rep{
font-size: 15px;
line-height: 1.6;
color: var(--ink);
padding-top: 16px;
border-top: 1px solid var(--hair-mint);
margin: 0;
}
.secteur-rep span{
display: block;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--signal);
margin-bottom: 6px;
}
.steps-num{ counter-reset: sn; margin: 4px 0 22px; }
.steps-num li{
counter-increment: sn;
position: relative;
padding-left: 46px;
margin-bottom: 18px;
font-size: 16px;
line-height: 1.6;
color: var(--muted);
}
.steps-num li strong{ color: var(--ink); font-weight: 600; }
.steps-num li::before{
content: counter(sn);
position: absolute; left: 0; top: 1px;
width: 30px; height: 30px;
border-radius: 50%;
background: var(--signal);
color: var(--paper);
font-size: 14px; font-weight: 800;
display: grid; place-items: center;
}
@media (max-width: 1000px){
.split-2{ grid-template-columns: 1fr; }
.split-2--rev .split-2-fig{ order: 0; }
.livrables, .secteurs{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px){
.livrables, .secteurs{ grid-template-columns: 1fr; }
}
/* --- HERO DE FICHE AVEC PHOTO À DROITE ---------------------- */
.page-hero--fig{ padding-bottom: clamp(56px, 6vw, 84px); }
.page-hero__grid{
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
gap: clamp(32px, 5vw, 64px);
align-items: center;
}
.page-hero--fig .lead{ max-width: none; }
.page-hero__fig{ margin: 0; }
.page-hero__fig img{
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--r-hero);
box-shadow: var(--sh-mascot);
}
.page-hero__fig figcaption{
font-size: 13.5px;
line-height: 1.55;
color: var(--muted);
margin-top: 16px;
padding-left: 16px;
border-left: 2px solid var(--signal);
}
.page-hero__fig figcaption strong{ display: block; color: var(--ink); font-weight: 600; margin-bottom: 3px; }
@media (max-width: 900px){
.page-hero__grid{ grid-template-columns: 1fr; }
.page-hero__fig img{ aspect-ratio: 16 / 9; }
}
/* ============================================================
LIENS DE CONTENU (maillage interne)
Le reset pose a{color:inherit} : sans cette règle, un lien inséré
dans un paragraphe est INVISIBLE. On cible les liens SANS classe,
ce qui laisse boutons, nav, fil d'ariane et pied de page intacts.
============================================================ */
:is(.section, .section-mint, .page-hero, .prose, .faq-body) :is(p, li, dd, figcaption) a:not([class]){
color: var(--signal);
font-weight: 600;
border-bottom: 1.5px solid var(--hair-mint);
transition: border-color 180ms var(--ease-expo), color 180ms var(--ease-expo);
}
:is(.section, .section-mint, .page-hero, .prose, .faq-body) :is(p, li, dd, figcaption) a:not([class]):hover{
border-bottom-color: var(--signal);
}
/* Sur les fonds verts, le vert ne se voit pas : on passe au blanc souligné. */
:is(.section-drench, .section-drench-deep, .cta-final) :is(p, li, dd) a:not([class]){
color: var(--paper);
font-weight: 600;
border-bottom: 1.5px solid rgba(255,255,255,0.45);
}
:is(.section-drench, .section-drench-deep, .cta-final) :is(p, li, dd) a:not([class]):hover{
border-bottom-color: var(--paper);
}
/* ============================================================
BANDE PROFESSIONNELS (accueil)
============================================================ */
.pro-band{ background: var(--paper); padding: var(--pad-sec-y) 0; }
.pro-band__inner{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
gap: clamp(28px, 4.5vw, 64px);
align-items: center;
padding: clamp(30px, 4vw, 52px);
border-radius: var(--r-hero);
background: var(--mint);
border: 1px solid var(--hair-mint);
}
.pro-band h2{ margin: 12px 0 16px; }
.pro-band p{ color: var(--muted); font-size: 17px; }
.pro-band__list{ margin: 20px 0 26px; }
.pro-band__list li{
position: relative;
padding-left: 28px;
margin-bottom: 10px;
font-size: 15.5px;
line-height: 1.5;
color: var(--ink);
}
.pro-band__list li::before{
content: '';
position: absolute; left: 0; top: 6px;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--signal);
}
.pro-band__list li::after{
content: '';
position: absolute; left: 4.5px; top: 10.5px;
width: 6px; height: 3px;
border-left: 2px solid var(--paper);
border-bottom: 2px solid var(--paper);
transform: rotate(-45deg);
}
.pro-band__fig{ margin: 0; position: relative; }
.pro-band__fig img{
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--r-card);
box-shadow: var(--sh-mascot);
}
.pro-band__stamp{
position: absolute;
left: -14px; bottom: -14px;
padding: 14px 18px;
border-radius: 18px;
background: var(--signal-hi);
color: var(--paper);
box-shadow: 0 12px 30px rgba(6,26,20,0.26);
max-width: 62%;
}
.pro-band__stamp strong{ display: block; font-size: 15px; font-weight: 700; line-height: 1.25; }
.pro-band__stamp span{ display: block; font-size: 12.5px; opacity: 0.78; margin-top: 3px; line-height: 1.35; }
@media (max-width: 900px){
.pro-band__inner{ grid-template-columns: 1fr; }
.pro-band__fig{ order: -1; }
.pro-band__stamp{ left: 10px; bottom: -12px; max-width: 78%; }
}
/* ============================================================
HERO PHOTO · RESPONSIVE
Le hero est en overflow:hidden pour l'image : sans ces règles,
le débordement du contenu est COUPÉ SANS BRUIT (aucun overflow-x
au niveau du document). Le contenu doit donc rentrer par lui-même.
============================================================ */
@media (max-width: 1180px){
.hero-photo__text{ max-width: min(76%, 720px); }
.trust-card__v{ font-size: 11px; }
}
@media (max-width: 1000px){
/* Une seule colonne : le texte d'abord, les preuves ensuite, le bandeau reste en bas. */
.hero-photo{ min-height: 0; }
.hero-photo__inner{
padding-top: clamp(96px, 15vh, 130px);
padding-bottom: clamp(30px, 5vh, 48px);
}
.hero-photo__text{ max-width: none; }
.hero-photo__media img{ object-position: 58% 44%; }
.hero-scroll{ display: none; }
}
@media (max-width: 820px){
.hero-lockup{ gap: 16px; margin-bottom: 18px; }
.hero-lockup__mark{ height: clamp(78px, 15vw, 118px); }
.hero-title{ font-size: clamp(29px, 6.4vw, 46px); }
.hero-photo__sub{ font-size: 17px; max-width: none; }
.trust-row{ grid-template-columns: 1fr 1fr; }
.trust-row .trust-card:nth-child(3){ grid-column: 1 / -1; }
.trust-card__k{ white-space: normal; }
.reassure-row{ grid-template-columns: repeat(2, 1fr); gap: 4px 0; padding: 14px 0; }
.reassure-item{ padding: 8px 14px; }
.reassure-item:nth-child(3){ border-left: 0; padding-left: 0; }
.reassure-item:nth-child(1), .reassure-item:nth-child(2){ padding-bottom: 12px; }
.reassure-item:nth-child(3), .reassure-item:nth-child(4){ border-top: 1px solid rgba(255,255,255,0.14); padding-top: 12px; }
}
@media (max-width: 560px){
.hero-photo__inner{ padding-top: clamp(84px, 14vh, 104px); }
/* Le lockup passe en pile : à 390 px, logo + 3 mots côte à côte ne tiennent pas. */
.hero-lockup{ flex-direction: column; align-items: flex-start; gap: 14px; }
.hero-lockup__rule{ width: 46px; height: 2px; align-self: flex-start; background: linear-gradient(to right, rgba(255,255,255,0.55), rgba(255,255,255,0)); }
.hero-lockup__mark{ height: 72px; }
.hero-title{ font-size: clamp(27px, 8.2vw, 36px); }
.pill-glass{ margin-bottom: 20px; font-size: 11px; padding: 7px 12px; }
.hero-photo .hero-cta{ flex-direction: column; align-items: stretch; }
.hero-photo .hero-cta .btn{ justify-content: center; }
.trust-row{ grid-template-columns: 1fr; gap: 9px; margin-top: 22px; }
.trust-card__k{ white-space: normal; }
.reassure-row{ grid-template-columns: 1fr; }
.reassure-item{ border-left: 0 !important; padding-left: 0 !important; padding-right: 0; }
.reassure-item:nth-child(n+2){ border-top: 1px solid rgba(255,255,255,0.14); padding-top: 10px; }
.reassure-item:nth-child(n+1){ padding-bottom: 10px; }
}
/* ============================================================
GRILLES UTILITAIRES RESPONSIVES
Elles remplacent les grid-template-columns posés en STYLE INLINE,
qu'aucune media query ne pouvait surcharger : les cartes étaient
coupées à 390 px sans que overflow-x du document ne bronche.
============================================================ */
.grid-auto{ display: grid; gap: 16px; }
.grid-auto--lg{ gap: 24px; }
.grid-auto--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-auto--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-auto--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto--5{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-auto > *{ min-width: 0; }
.grid-split{
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: clamp(28px, 4vw, 56px);
align-items: center;
}
@media (max-width: 1100px){
.grid-auto--5{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-auto--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px){
.grid-auto--3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-split{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
.grid-auto--2, .grid-auto--3, .grid-auto--4, .grid-auto--5{ grid-template-columns: 1fr; }
}
/* ============================================================
TABLEAUX DE TARIFS EN MOBILE
Le brief demande des tarifs LISIBLES sur mobile, pas un tableau
écrasé : sous 700 px chaque ligne devient une carte étiquetée.
============================================================ */
@media (max-width: 700px){
.tarifs-table, .tarifs-table tbody, .tarifs-table tr, .tarifs-table td{ display: block; width: 100%; }
.tarifs-table thead{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.tarifs-table{ border-collapse: separate; border-spacing: 0; }
.tarifs-table tr{
background: var(--paper);
border: 1px solid var(--hair-mint);
border-radius: var(--r-input);
padding: 6px 14px;
margin-bottom: 10px;
}
.tarifs-table td{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
border-bottom: 1px solid var(--hair-mint);
padding: 10px 0;
text-align: left;
}
.tarifs-table tr td:last-child{ border-bottom: 0; }
.tarifs-table td::before{
content: attr(data-label);
flex: 0 0 auto;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--muted);
}
.tarifs-table td:last-child{ text-align: right; font-weight: 700; color: var(--signal); }
}
/* Sous 700 px, une carte de contact ou un formulaire ne doit plus
porter le padding du grand écran. */
@media (max-width: 700px){
.contact-card, .form{ padding: 22px; }
.contact-card .phone{ font-size: clamp(26px, 8vw, 34px); word-break: keep-all; }
.rdv-side-card{ padding: 22px; }
}
@media (max-width: 430px){
:root{ --pad-side: 16px; }
.contact-card, .form, .rdv-side-card, .pro-band__inner{ padding: 18px; }
}
/* ============================================================
min-width:auto : la cause réelle des cartes qui débordent
Une piste de grille (ou un item flex) ne descend jamais sous la
largeur minimale de son contenu tant qu'on ne lui dit pas
explicitement min-width:0. Sans ça, `1fr` ne sert à rien.
============================================================ */
.contact-grid{ grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.contact-card, .contact-card > *, .form, .form > *{ min-width: 0; }
.contact-info{ min-width: 0; }
.contact-info-row{ flex-wrap: wrap; min-width: 0; }
.contact-info-row > :last-child{ min-width: 0; overflow-wrap: anywhere; }
.contact-card .phone{ overflow-wrap: anywhere; }
@media (max-width: 1100px){
.contact-grid{ grid-template-columns: minmax(0, 1fr); }
}
/* Un