*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}img{max-width:100%;height:auto;display:block}button,input,select,textarea{font:inherit;color:inherit}a{color:inherit;text-decoration:none}ul,ol{list-style:none}:root{--brand:#B91C1C;--brand-2:#991B1B;--brand-text:#7F1D1D;--brand-soft:rgba(185,28,28,.08);--brand-on-dark:#FCA5A5;--ink:#0F172A;--ink-2:#1E293B;--dim:#475569;--cream:#FDFAF6;--cream-2:#F5EFE6;--white:#FFFFFF;--gold:#C9A961;--gold-text:#8B6E27;--success:#166534;--line:rgba(15,23,42,.08);--line-2:rgba(15,23,42,.16);--shadow-sm:0 2px 6px rgba(15,23,42,.05);--shadow:0 8px 24px rgba(15,23,42,.08);--shadow-lg:0 18px 48px rgba(15,23,42,.12);--radius:14px;--radius-lg:20px;--maxw:1240px}body{font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:16px;line-height:1.6;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased}.container{max-width:var(--maxw);margin:0 auto;padding:0 22px}.section{padding:clamp(40px,5vw,68px) 0}h1,h2,h3,h4{font-weight:700;line-height:1.2;letter-spacing:-0.02em;color:var(--ink)}h1{font-size:clamp(32px,5vw,50px)}h2{font-size:clamp(24px,3.5vw,36px)}h3{font-size:clamp(18px,2.2vw,22px)}p{color:var(--dim)}em{font-style:normal;color:var(--brand-text);font-weight:inherit}.accent{background:linear-gradient(120deg,var(--brand),var(--brand-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.section-marker{display:inline-block;font-size:13px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--brand-text);margin-bottom:10px}.section-marker--accent{color:var(--brand-on-dark)}.section-head{max-width:720px;margin-bottom:30px}.section-head-center{margin-left:auto;margin-right:auto;text-align:center}.section-head-left{margin-left:0}.section-head h2{margin-bottom:12px}.section-sub{font-size:17px;color:var(--dim)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 22px;border-radius:12px;font-weight:700;font-size:15px;white-space:nowrap;cursor:pointer;border:0;transition:transform .15s,box-shadow .15s,opacity .15s,background .15s}.btn svg{width:18px;height:18px}.btn-lg{padding:16px 28px;font-size:16px}.btn-block{width:100%}.btn-primary{background:linear-gradient(120deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 6px 18px rgba(185,28,28,.28)}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(185,28,28,.38);color:#fff}.btn-call{background:var(--ink);color:#fff;border:0;font-variant-numeric:tabular-nums;box-shadow:0 6px 18px rgba(15,23,42,.22)}.btn-call:hover{background:var(--ink-2);color:#fff;transform:translateY(-1px);box-shadow:0 10px 24px rgba(15,23,42,.3)}.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line);box-shadow:0 2px 14px rgba(15,23,42,.05)}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;height:72px}.logo{display:flex;align-items:center;gap:12px}.logo-mark{width:42px;height:42px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-radius:10px;box-shadow:0 4px 12px rgba(185,28,28,.25)}.logo-mark svg{width:22px;height:22px}.logo-img{width:44px;height:44px;border-radius:10px;object-fit:contain;flex-shrink:0;box-shadow:0 4px 12px rgba(185,28,28,.18)}.logo-text strong{display:block;font-size:15px;line-height:1.1;color:var(--ink);font-weight:800;letter-spacing:-0.01em}.logo-text em{display:block;font-size:13px;color:var(--brand-text);font-style:normal;font-weight:500}.nav-desktop{display:flex;gap:6px}.nav-desktop a{padding:8px 14px;border-radius:8px;font-size:14px;font-weight:600;color:var(--ink-2);transition:background .15s}.nav-desktop a:hover{background:var(--cream-2);color:var(--brand-text)}.header-ctas{display:flex;gap:10px}.header-ctas .btn{padding:10px 16px;font-size:14px}.menu-toggle{display:none;background:transparent;border:0;width:36px;height:36px;cursor:pointer;padding:0}.menu-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:4px auto}.nav-mobile{display:none;flex-direction:column;gap:4px;padding:14px 22px;background:var(--cream);border-top:1px solid var(--line)}.nav-mobile.open{display:flex}.nav-mobile a{padding:12px 14px;border-radius:8px;color:var(--ink);font-weight:600}.nav-mobile .btn{margin-top:6px}.nav-mobile a.btn-call,.nav-mobile a.btn-primary{color:#fff}.nav-mobile a.btn-call svg,.nav-mobile a.btn-primary svg{color:#fff}.hero{padding:44px 0 62px;background:linear-gradient(180deg,var(--cream) 0%,var(--white) 100%)}.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;grid-template-areas:"title visual" "text visual";gap:0 40px;align-items:start}.hero-title{grid-area:title;margin-bottom:18px}.hero-text{grid-area:text}.hero-visual{grid-area:visual;align-self:center}.urgency-pill{display:inline-flex;align-items:center;gap:10px;background:var(--brand-soft);color:var(--brand-text);font-size:13px;font-weight:600;padding:7px 14px;border-radius:50px;border:1px solid rgba(185,28,28,.18);margin-bottom:18px}.pulse{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 0 rgba(185,28,28,.5);animation:pulse 1.6s infinite}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(185,28,28,.5)}70%{box-shadow:0 0 0 12px rgba(185,28,28,0)}100%{box-shadow:0 0 0 0 rgba(185,28,28,0)}}.hero-text h1{margin-bottom:18px}.hero-lead{font-size:18px;color:var(--dim);margin-bottom:28px;max-width:520px}.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px}.hero-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-top:24px;border-top:1px solid var(--line)}.trust-item strong{display:block;color:var(--success);font-size:14px;font-weight:700}.trust-item span{font-size:13px;color:var(--dim)}.hero-visual{position:relative}.hero-visual img{width:100%;aspect-ratio:1 / 1;object-fit:cover;object-position:center;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}.hero-badge{position:absolute;bottom:-20px;left:-20px;background:#fff;padding:18px 22px;border-radius:var(--radius);box-shadow:var(--shadow);display:flex;align-items:center;gap:14px;max-width:260px}.badge-num{font-size:32px;font-weight:800;background:linear-gradient(120deg,var(--brand),var(--brand-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1}.badge-text{font-size:13px;color:var(--ink);font-weight:600;line-height:1.3}.section-signes{background:var(--cream)}.signes-grid{display:flex;flex-direction:column;gap:18px;max-width:920px;margin:0 auto}.signe-card{display:flex;align-items:flex-start;gap:28px;background:#fff;padding:28px 32px;border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s,border-color .2s}.signe-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--brand-soft)}.signe-num{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;font-size:26px;font-weight:800;line-height:1;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2));border-radius:14px;letter-spacing:-1px;flex-shrink:0;box-shadow:0 6px 18px rgba(185,28,28,.28)}.signe-body{flex:1}.signe-card h3{font-size:19px;font-weight:700;color:var(--ink);margin-bottom:8px}.signe-card p{font-size:15px;color:var(--dim);line-height:1.65;margin:0}.section-services{background:var(--white)}.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.service-card{background:#fff;padding:32px 28px;border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s,border-color .2s;position:relative}.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--brand-soft)}.service-card--featured{border-color:var(--brand);box-shadow:0 12px 32px rgba(185,28,28,.14)}.card-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(120deg,var(--brand),var(--brand-2));color:#fff;font-size:12px;font-weight:700;padding:5px 14px;border-radius:50px;white-space:nowrap}.service-icon{width:56px;height:56px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);border-radius:14px;margin-bottom:20px}.service-icon svg{width:28px;height:28px}.service-card h3{margin-bottom:12px}.service-card p{font-size:15px;margin-bottom:16px}.service-pts{display:flex;flex-direction:column;gap:8px}.service-pts li{font-size:14px;color:var(--ink-2);font-weight:500;padding-left:22px;position:relative}.service-pts li::before{content:'✓';position:absolute;left:0;top:0;color:var(--success);font-weight:800}.section-engage{background:var(--cream)}.engage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.engage-card{text-align:center;padding:36px 28px;background:#fff;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}.engage-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.engage-badge{width:64px;height:64px;margin:0 auto 18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--ink),var(--ink-2));color:#fff;border-radius:50%;box-shadow:0 6px 18px rgba(15,23,42,.35)}.engage-badge svg{width:28px;height:28px}.engage-card h3{margin-bottom:8px}.engage-card p{font-size:15px}.section-urgent{background:var(--ink);color:#fff}.section-urgent .section-marker{color:var(--brand-on-dark)}.section-urgent h2{color:#fff}.section-urgent em{color:var(--brand-on-dark)}.urgent-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}.urgent-text h2{margin-bottom:16px}.urgent-text>p{color:rgba(255,255,255,.85);font-size:17px;margin-bottom:24px}.urgent-pts{display:flex;flex-direction:column;gap:14px;margin-bottom:32px}.urgent-pts li{padding-left:28px;position:relative;color:rgba(255,255,255,.9);font-size:15px}.urgent-pts li::before{content:'!';position:absolute;left:0;top:2px;width:20px;height:20px;background:var(--brand);color:#fff;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800}.urgent-pts strong{color:#fff}.urgent-visual{display:flex;justify-content:center}.urgent-visual img{max-width:100%;height:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}.section-autres{background:var(--white)}.autres-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.autre-card{background:#fff;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}.autre-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}.autre-image{aspect-ratio:16/10;overflow:hidden;background:var(--cream)}.autre-image img{width:100%;height:100%;object-fit:cover}.autre-card h3{padding:20px 24px 8px}.autre-card p{padding:0 24px 24px;font-size:15px}.section-avis{background:var(--cream)}.avis-rating{display:flex;align-items:center;gap:12px;margin-top:14px}.avis-rating .stars{color:var(--gold);font-size:18px;letter-spacing:2px}.avis-rating strong{font-size:18px;color:var(--ink)}.rating-sub{font-size:13px;color:var(--dim)}.avis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.avis-card{background:#fff;padding:26px 24px;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}.avis-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}.avis-stars{color:var(--gold);letter-spacing:2px;margin-bottom:12px;font-size:15px}.avis-card blockquote{font-size:15px;line-height:1.6;color:var(--ink-2);margin-bottom:18px}.avis-card footer{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--line)}.avis-av{width:42px;height:42px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-weight:700;font-size:14px;border-radius:50%}.avis-card footer strong{display:block;font-size:14px;color:var(--ink)}.avis-card footer em{font-size:13px;color:var(--dim);font-style:normal}.phone-cta{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;padding:clamp(44px,5vw,68px) 0 0;overflow:visible}.phone-cta-inner{display:grid;grid-template-columns:1.2fr 1fr;align-items:end;gap:48px}.phone-cta-text{padding-bottom:clamp(32px,4vw,52px);align-self:center;text-align:left}.phone-cta h2{color:#fff;margin-bottom:10px;font-size:clamp(22px,3vw,30px)}.phone-cta p{color:rgba(255,255,255,.92);font-size:16px;max-width:60ch;margin-bottom:22px}.phone-cta-text .btn-call{background:#fff;color:var(--brand-text);border:0;box-shadow:0 6px 18px rgba(0,0,0,.18)}.phone-cta-text .btn-call:hover{color:var(--brand-text);background:#fff;opacity:.92;transform:translateY(-1px)}.phone-cta-visual{display:flex;justify-content:center;align-items:flex-end}.phone-cta-visual img{width:100%;max-width:460px;height:auto;display:block;margin-top:-80px;margin-bottom:0}.section-zone{background:var(--white);padding-bottom:clamp(28px,4vw,48px)}.zone-pills{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:15px;line-height:1.5;color:var(--ink-2)}.zone-pills a{display:inline-flex;align-items:baseline;gap:8px;color:var(--ink-2);text-decoration:none;cursor:default;font-weight:500;background:transparent;padding:0;border-radius:0}.zone-pills a::before{content:'•';color:var(--brand);font-weight:700;font-size:16px;line-height:1}.zone-pills a:hover{color:var(--ink-2);background:transparent}.section-contact{background:var(--cream)}.contact-single{max-width:720px}.contact-single .section-head{margin-bottom:28px}.contact-form{background:#fff;padding:32px;border-radius:var(--radius-lg);box-shadow:var(--shadow)}.contact-form label{display:block;margin-bottom:14px}.contact-form label>span{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}.contact-form input,.contact-form textarea{width:100%;padding:12px 14px;border:1px solid var(--line-2);border-radius:10px;font-size:15px;background:#fff;transition:border-color .15s,box-shadow .15s}.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(185,28,28,.12)}.contact-form textarea{resize:vertical;min-height:120px}.contact-form .form-row{display:flex;flex-direction:column}.contact-form .form-row-2{display:grid;grid-template-columns:1fr 2fr;gap:12px}@media (max-width:560px){.contact-form .form-row-2{grid-template-columns:1fr}}.contact-form input.invalid,.contact-form textarea.invalid{border-color:#DC2626;background:#FEF2F2}.contact-form .field-error{display:block;margin-top:4px;font-size:.8rem;font-weight:600;color:#B91C1C}.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.hp{position:absolute;left:-9999px;height:0;overflow:hidden}.form-rgpd{margin-top:12px;font-size:12px;color:var(--dim)}.form-rgpd a{color:var(--brand-text);text-decoration:underline}.form-feedback .ok{background:rgba(22,101,52,.08);color:#166534;padding:14px 18px;border-radius:10px;margin-top:14px;font-weight:600}.form-feedback .err{background:var(--brand-soft);color:var(--brand-text);padding:14px 18px;border-radius:10px;margin-top:14px}.site-footer{background:var(--ink);color:rgba(255,255,255,.7);padding:56px 0 0}.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:36px}.foot-brand .logo-text strong{color:#fff;font-size:17px}.foot-brand .logo-text em{color:var(--brand-on-dark)}.foot-brand p{color:rgba(255,255,255,.65);margin-top:14px;font-size:14px}.foot-nav h3,.foot-contact h3{color:#fff;font-size:14px;font-weight:700;margin-bottom:14px;text-transform:uppercase;letter-spacing:0.06em}.foot-nav{display:flex;flex-direction:column;gap:10px}.foot-nav a{color:rgba(255,255,255,.7);font-size:14px;transition:color .15s}.foot-nav a:hover{color:#fff}.foot-contact{display:flex;flex-direction:column;gap:12px}.foot-phone{display:inline-flex;align-items:center;gap:8px;color:#fff !important;font-weight:700;font-size:18px;font-variant-numeric:tabular-nums}.foot-phone-icon{width:18px;height:18px;color:#fff !important}.foot-phone:hover{opacity:.85}.foot-meta{font-size:13px;color:rgba(255,255,255,.6);margin-top:6px}.foot-bottom{padding:18px 0;border-top:1px solid rgba(255,255,255,.08);font-size:13px;color:rgba(255,255,255,.5);text-align:center}@media (max-width:980px){.hero-grid{grid-template-columns:1fr;grid-template-areas:"title" "visual" "text";gap:24px}.urgent-grid,.phone-cta-inner{grid-template-columns:1fr;gap:36px}.urgent-visual{order:-1}.services-grid,.engage-grid,.avis-grid{grid-template-columns:1fr 1fr}.autres-grid{grid-template-columns:1fr 1fr}.foot-grid{grid-template-columns:1fr 1fr;gap:28px}.phone-cta{padding:40px 0 0}.phone-cta-text{text-align:center;padding-bottom:0}.phone-cta-text p{margin-left:auto;margin-right:auto}.phone-cta-visual img{margin-top:0;max-width:320px}}@media (max-width:720px){.nav-desktop,.header-ctas{display:none}.menu-toggle{display:block}.services-grid,.engage-grid,.autres-grid,.avis-grid,.foot-grid{grid-template-columns:1fr}.signe-card{padding:22px 20px;gap:16px}.signe-num{width:50px;height:50px;font-size:20px;border-radius:12px}.signe-card h3{font-size:17px}.hero-trust{grid-template-columns:1fr;gap:12px}.hero-badge{left:16px;right:16px;bottom:-16px;max-width:none}.hero-ctas .btn{flex:1 1 0;justify-content:center}.row2{grid-template-columns:1fr}.phone-cta-inner{flex-direction:column;text-align:center}} /* ========================================================================== AJOUTS 3D NUISIBLES ========================================================================== */ /* Nuisibles traités : 6 cartes, 3 par ligne sur grand écran. */ @media (min-width: 981px) { .autres-grid { grid-template-columns: repeat(3, 1fr); } } /* Case de consentement (obligatoire, au-dessus du bouton). */ .contact-form .consent-field { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 10px; margin: 4px 0 18px; } .contact-form input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 18px; padding: 0; margin-top: 2px; accent-color: var(--brand); cursor: pointer; } .contact-form .consent-label { display: block; flex: 1; margin: 0; font-size: 13px; line-height: 1.5; color: var(--dim); cursor: pointer; } .contact-form .consent-label a { color: var(--brand-text); text-decoration: underline; } .contact-form input[type="checkbox"].invalid { outline: 2px solid #DC2626; outline-offset: 2px; } .contact-form .consent-field .field-error { flex-basis: 100%; margin-left: 28px; } /* Mobile : deux champs par ligne pour limiter la hauteur du formulaire. min-width: 0 empêche la largeur minimale d'un de faire déborder. */ .contact-form label { min-width: 0; } @media (max-width: 720px) { .row2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (max-width: 560px) { .contact-form { padding: 22px 18px; } .contact-form .form-row-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* ---- Pages légales ---- */ .legal-main { padding: 56px 0 72px; background: var(--cream); } .legal-main h1 { font-size: clamp(28px, 4vw, 38px); margin-bottom: 22px; } .legal-main h2 { font-size: 20px; margin: 28px 0 10px; } .legal-main p, .legal-main li { font-size: 15px; line-height: 1.7; color: var(--dim); } .legal-main ul { padding-left: 1.4rem; margin: 8px 0 16px; } .legal-intro { color: var(--dim); font-size: .95rem; margin-bottom: 1.5rem; } .legal-back { display: inline-block; margin-top: 32px; color: var(--brand-text); font-weight: 700; } .legal-link { color: var(--brand-text); text-decoration: underline; font-weight: 600; } .legal-main { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); background: var(--cream); } .legal-container { max-width: 800px; } .legal h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.15; color: var(--ink); margin-bottom: 10px; } .legal h2 { font-size: clamp(19px, 2.4vw, 23px); color: var(--ink); margin: 36px 0 12px; } .legal h3 { font-size: 17px; color: var(--ink); margin: 22px 0 8px; } .legal p, .legal li, .legal td, .legal th { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); } .legal p { margin-bottom: 14px; } .legal ul, .legal ol { margin: 0 0 16px 22px; } .legal li { margin-bottom: 6px; } .legal a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 2px; } .legal strong { color: var(--ink); } .legal table { width: 100%; border-collapse: collapse; margin: 0 0 22px; background: #fff; border-radius: var(--radius); overflow: hidden; } .legal th, .legal td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); } .legal th { color: var(--ink); font-weight: 700; background: var(--cream-2); } .legal__fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; } .legal__fil li { margin: 0; font-size: 13px; color: var(--dim); } .legal__fil li + li::before { content: "\203A"; margin-right: 8px; color: var(--line-2); } .legal__maj { font-size: 13px; color: var(--dim); margin-bottom: 28px; } .legal__note { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; } @media (max-width: 640px) { .legal table { display: block; overflow-x: auto; } } /* Bannière : sur grand écran, la photo couvre deux lignes de grille et la hauteur se répartissait entre la ligne du titre et celle du texte, d'où un grand vide sous le titre. Deux lignes élastiques encadrent désormais le bloc titre + texte, qui reste groupé et centré face à la photo. */ @media (min-width: 981px) { .hero-grid { grid-template-areas: ". visual" "title visual" "text visual" ". visual"; grid-template-rows: 1fr auto auto 1fr; } } /* Cartes nuisibles : lien « Demander un devis » calé en bas de chaque carte. */ .autre-card { display: flex; flex-direction: column; } .autre-card p { flex: 1; padding-bottom: 14px; } .autre-lien { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 0 24px 24px; font-weight: 700; font-size: 15px; color: var(--brand-text); text-decoration: none; } .autre-lien svg { width: 16px; height: 16px; transition: transform .2s; } .autre-lien:hover { color: var(--brand); } .autre-lien:hover svg { transform: translateX(3px); } /* ---- Bannière : formulaire à droite (comme sur les autres sites) ---- */ .hero-form { align-self: center; } .hero-form .contact-form { padding: 26px 38px; box-shadow: var(--shadow-lg); } .hero-form-title { font-size: clamp(20px, 2vw, 24px); line-height: 1.2; margin-bottom: 18px; color: var(--ink); } .hero-form .contact-form label { margin-bottom: 12px; } .hero-form .contact-form input, .hero-form .contact-form textarea { padding: 10px 12px; } .hero-form .contact-form textarea { min-height: 84px; } /* Mobile : titre, texte, puis formulaire (le formulaire ne s'intercale pas). */ @media (max-width: 980px) { .hero-grid { grid-template-areas: "title" "text" "visual"; } } /* Section urgence : le badge « 3D » accompagne désormais l'image. */ .urgent-visual { position: relative; } /* Formulaire de la bannière un peu moins large, calé à droite (grand écran). */ @media (min-width: 981px) { /* 55 % pour le texte, 45 % pour le formulaire. Le formulaire remplit toute sa colonne : plafonner sa largeur rouvrirait un vide qui s'ajouterait à l'écart de la grille. */ .hero-grid { grid-template-columns: 55fr 45fr; column-gap: 44px; } .hero-form { width: 100%; max-width: none; justify-self: stretch; } } /* Bande rouge : titre « Un nuisible chez vous ? » un peu plus grand. */ .phone-cta h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.15; } /* Mobile : on garde 28 px, sinon les exemples « téléphone » et « ville » sont coupés. */ @media (max-width: 560px) { .hero-form .contact-form { padding-left: 28px; padding-right: 28px; } } /* ---- Page de remerciement ---- */ .merci { padding: clamp(56px, 8vw, 110px) 0; background: var(--cream); text-align: center; } .merci-card { max-width: 640px; margin: 0 auto; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(32px, 5vw, 52px) clamp(22px, 5vw, 48px); } .merci-icone { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(22, 101, 52, .1); color: #166534; } .merci-icone svg { width: 32px; height: 32px; } .merci h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.15; margin-bottom: 12px; color: var(--ink); } .merci p { font-size: 17px; line-height: 1.6; color: var(--dim); margin: 0 auto 12px; max-width: 48ch; } .merci-etapes { list-style: none; margin: 26px auto 22px; padding: 0; display: grid; gap: 12px; text-align: left; max-width: 430px; } .merci-etapes li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink-2); } .merci-etapes span { flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 700; font-size: 13px; } .merci .merci-astuce { font-size: 14px; margin-bottom: 26px; } /* ---- Mobile et tablette (bannière empilée) : garanties sous le formulaire ---- .hero-text devient transparent pour la grille (display: contents) : son texte, ses boutons et ses garanties se placent séparément, sans dupliquer le HTML. Ordre obtenu : titre, texte, boutons, formulaire, garanties. */ @media (max-width: 980px) { .hero-text { display: contents; } .hero-grid { grid-template-areas: "title" "lead" "ctas" "visual" "trust"; } .hero-title { margin-bottom: 0; } .hero-lead { grid-area: lead; margin-bottom: 0; } .hero-ctas { grid-area: ctas; margin-bottom: 0; } .hero-trust { grid-area: trust; border-top: 0; padding-top: 0; } } /* ---- Mobile : espacements entre sections resserrés ---- */ @media (max-width: 720px) { .section { padding: 40px 0; } .hero { padding: 32px 0 44px; } .section-head { margin-bottom: 26px; } .contact-single .section-head { margin-bottom: 20px; } .phone-cta { padding-top: 32px; } .merci { padding: 36px 0; } } /* ========================================================================== Parcours de qualification (formulaires par étapes) ========================================================================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Hauteur plancher : évite que la page saute d'un écran à l'autre. */ .parcours-corps { min-height: 340px; } .parcours-noscript { font-size: 14px; color: var(--dim); margin: 0; } .parcours-entete { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .parcours-compte { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-text); white-space: nowrap; } .parcours-jauge { flex: 1; height: 5px; border-radius: 999px; background: var(--cream-2); overflow: hidden; } .parcours-jauge > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width .3s ease; } .parcours-etape { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; } .parcours-titre { display: block; width: 100%; padding: 0; margin-bottom: 6px; font-size: clamp(18px, 1.6vw, 21px); font-weight: 800; line-height: 1.3; color: var(--ink); } .parcours-aide { font-size: 13px; color: var(--dim); margin: 0 0 14px; } .parcours-titre + .parcours-options { margin-top: 18px; } /* Deux réponses par ligne : moitié moins de hauteur sur les longues listes. minmax(0, 1fr) empêche un libellé long d'élargir sa colonne. */ .parcours-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .parcours-option { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 12px; transition: border-color .15s, background .15s, box-shadow .15s; } .parcours-option:hover { border-color: var(--brand); background: var(--brand-soft); } .parcours-option.est-cochee { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); } .contact-form .parcours-option input[type="radio"], .contact-form .parcours-option input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; padding: 0; accent-color: var(--brand); cursor: pointer; } .contact-form .parcours-option > label { flex: 1; min-width: 0; margin: 0; font-size: 15.5px; line-height: 1.35; color: var(--ink-2); cursor: pointer; } .contact-form .parcours-precision { flex-basis: 100%; margin-top: 2px; padding: 9px 12px; font-size: 14px; } .contact-form .parcours-libre { margin-bottom: 0; } /* Liste déroulante du créneau de rappel, alignée sur les autres champs. */ .contact-form select { width: 100%; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; font-size: 15px; font-family: inherit; color: var(--ink); background: #fff; } .contact-form select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(185, 28, 28, .12); } .parcours-nav { display: flex; align-items: center; gap: 10px; } .parcours-nav .parcours-suivant { flex: 1; } .parcours-retour { flex: 0 0 auto; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; color: var(--dim); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s; } .parcours-retour:hover { border-color: var(--brand); color: var(--brand-text); } /* Colonne de la bannière : plus étroite, donc un peu plus compacte. */ .hero-form .parcours-corps { min-height: 300px; } .hero-form .parcours-option { padding: 13px 15px; } .hero-form .contact-form select { padding: 10px 12px; } /* Deux colonnes : une réponse comme « Chenilles processionnaires » doit pouvoir se couper plutôt que dépasser de sa carte. */ .contact-form .parcours-option > label { overflow-wrap: anywhere; } /* Mobile : seule la césure est propre au mobile, les colonnes y étant étroites. La taille des cartes, elle, est la même que sur ordinateur : elle vient des classes est-large / est-aeree / est-moyenne / est-compacte. */ @media (max-width: 560px) { .contact-form .parcours-option > label { -webkit-hyphens: auto; hyphens: auto; } .parcours-corps { min-height: 300px; } } /* Second titre des formulaires : dit explicitement qu'il y a quelque chose à remplir, pour que le visiteur ne passe pas à côté. */ .form-sous-titre { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; font-size: 14px; font-weight: 700; color: var(--brand-text); } .form-sous-titre svg { width: 17px; height: 17px; flex: 0 0 17px; } .section-head .form-sous-titre { justify-content: center; margin: 10px 0 0; } .hero-form-title + .form-sous-titre { margin-top: -10px; } /* Mobile : les trois garanties tiennent sur une seule ligne. */ @media (max-width: 720px) { .hero-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .trust-item strong { font-size: 13px; } .trust-item span { font-size: 11.5px; line-height: 1.3; display: block; } } /* ---- Signes d'infestation : trois colonnes, texte court ---- */ .signes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: none; } .signe-card { flex-direction: column; align-items: flex-start; gap: 18px; } @media (max-width: 980px) { .signes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .signes-grid { grid-template-columns: 1fr; } } /* ---- Hauteur stable du formulaire ---- Sans cela, la colonne de texte de la bannière montait et descendait à chaque question. La zone des réponses occupe la place disponible et la navigation reste collée en bas ; la hauteur ne dépend donc plus du nombre d'options. */ .parcours-corps { display: flex; flex-direction: column; } .parcours-etape { flex: 1 1 auto; } .parcours-nav { margin-top: auto; } /* Une colonne pour les listes courtes, deux pour les longues. */ .parcours-options.est-1col { grid-template-columns: minmax(0, 1fr); } .parcours-options.est-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* La question est centrée dans la hauteur disponible : l'espace libre se répartit au-dessus et en dessous plutôt que de s'accumuler en bas. */ .parcours-etape { display: flex; flex-direction: column; justify-content: center; } /* Listes de dix réponses et plus : cartes resserrées, sinon la première question dépasse largement la hauteur des autres écrans. */ .parcours-options.est-compacte { gap: 8px; } .parcours-options.est-compacte .parcours-option { padding: 10px 13px; gap: 8px; } .contact-form .est-compacte .parcours-option > label { font-size: 14.5px; line-height: 1.3; } /* Hauteur fixe là où la bannière est sur deux colonnes : la colonne de texte ne bouge plus d'une question à l'autre. En dessous, tout est empilé et une hauteur figée ne ferait qu'ajouter du vide. */ @media (min-width: 981px) { .parcours-corps { height: 508px; min-height: 0; } .parcours-etape { min-height: 0; } /* Filet de sécurité : si une liste ne tient pas, elle défile au lieu de déformer la carte. */ .parcours-options { overflow-y: auto; } } /* Quatre réponses ou moins : cartes plus hautes, pour occuper la place laissée libre par la hauteur fixe au lieu de flotter au milieu du vide. */ .parcours-options.est-aeree { gap: 12px; } .parcours-options.est-aeree .parcours-option { padding: 17px 18px; } .contact-form .est-aeree .parcours-option > label { font-size: 16px; } /* Cinq à sept réponses : taille intermédiaire. */ .parcours-options.est-moyenne { gap: 11px; } .parcours-options.est-moyenne .parcours-option { padding: 16px 17px; } /* Trois rangées ou moins : cartes très hautes, seule façon d'occuper la hauteur fixe sans laisser un grand vide. */ .parcours-options.est-large { gap: 12px; } .parcours-options.est-large .parcours-option { padding: 25px 18px; } .contact-form .est-large .parcours-option > label { font-size: 16px; } /* Le style de focus des champs (halo rouge clair) ne doit pas s'appliquer aux puces de réponse : à l'arrivée sur l'étape, la première paraissait cochée. Un vrai liseré reste affiché pour qui navigue au clavier. */ .parcours-etape:focus { outline: none; } .contact-form .parcours-option input[type="radio"]:focus, .contact-form .parcours-option input[type="checkbox"]:focus { box-shadow: none; outline: none; } .contact-form .parcours-option input[type="radio"]:focus-visible, .contact-form .parcours-option input[type="checkbox"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* Mobile : une colonne fait environ 141 px, donc le texte des listes à deux colonnes doit rester petit et les marges latérales fines, sinon « Aujourd'hui » se coupe en deux. Les listes sur une colonne gardent la taille d'origine. */ @media (max-width: 560px) { .contact-form .est-2col .parcours-option > label { font-size: 14px; } .est-2col .parcours-option { padding-left: 11px; padding-right: 11px; gap: 8px; } }