/* ================================================================= location-wc-toulouse.fr — identité « Ville rose » Terre cuite + violette de Toulouse, serif éditorial, angles nets, ombres portées dures. Volontairement à l'opposé du site national. ================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Archivo:wght@400;500;600;700;800&display=swap'); :root{ --brique:#B4462F; --brique-fonce:#8A3220; --violette:#6B4E9C; --violette-clair:#EFE9F7; --ocre:#D98E3C; --creme:#FBF5EE; --creme-2:#F4E9DC; --encre:#241813; --gris:#6A584E; --trait:#DFCDBB; --blanc:#fff; --dur:4px 4px 0 var(--encre); --dur-petit:3px 3px 0 var(--encre); --r:8px; --r-lg:14px; --max:1160px; --serif:Fraunces,Georgia,'Times New Roman',serif; --sans:Archivo,system-ui,-apple-system,'Segoe UI',sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;font-family:var(--sans);font-size:16px;line-height:1.65;color:var(--encre); background:var(--creme);overflow-x:hidden;text-rendering:optimizeLegibility} a{color:inherit;text-decoration:none} img{max-width:100%;display:block;height:auto} main{overflow:hidden} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{ outline:3px solid var(--violette);outline-offset:2px} .skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--encre);color:var(--creme); padding:12px 18px;font-weight:700} .skip-link:focus{left:0} h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;line-height:1.08;color:var(--encre)} /* ---------------- En-tête ---------------- */ .site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between; gap:20px;padding:14px max(clamp(18px,4vw,40px),env(safe-area-inset-left)); background:var(--creme);border-bottom:2px solid var(--encre)} .brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-weight:700;font-size:1.08rem;min-width:max-content} .brand-mark{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%; background:var(--brique);color:var(--creme);font-family:var(--sans);font-weight:800;font-size:.8rem; border:2px solid var(--encre);box-shadow:var(--dur-petit)} .main-nav{display:flex;align-items:center;gap:6px;font-weight:600;font-size:.94rem} .main-nav a{padding:9px 12px;border-radius:var(--r);border:2px solid transparent;transition:.18s} .main-nav a:hover{border-color:var(--encre);background:var(--creme-2)} .nav-cta{background:var(--violette);color:var(--creme)!important;border:2px solid var(--encre)!important; box-shadow:var(--dur-petit);font-weight:700} .nav-cta:hover{background:var(--brique)!important;transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--encre)} .nav-toggle{display:none;align-items:center;gap:9px;min-height:44px;padding:9px 13px; border:2px solid var(--encre);border-radius:var(--r);background:var(--blanc);color:var(--encre); font-family:var(--sans);font-weight:700;font-size:.95rem;box-shadow:var(--dur-petit);cursor:pointer} .nav-toggle-bar{position:relative;display:block;width:18px;height:2px;background:currentColor} .nav-toggle-bar:before,.nav-toggle-bar:after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;transition:.2s} .nav-toggle-bar:before{top:-6px} .nav-toggle-bar:after{top:6px} .nav-toggle.is-open .nav-toggle-bar{background:transparent} .nav-toggle.is-open .nav-toggle-bar:before{top:0;transform:rotate(45deg)} .nav-toggle.is-open .nav-toggle-bar:after{top:0;transform:rotate(-45deg)} /* ---------------- Trames ---------------- */ .hero,.section,.page-hero,.service-hero,.local-hero,.quote-hero,.article{ max-width:var(--max);margin:0 auto;padding:clamp(44px,6vw,76px) clamp(18px,4vw,26px)} .hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);gap:44px;align-items:center} .eyebrow{margin:0 0 14px;font-family:var(--sans);font-weight:800;font-size:.76rem; letter-spacing:.18em;text-transform:uppercase;color:var(--brique)} .eyebrow:before{content:"";display:inline-block;width:22px;height:2px;background:var(--brique); vertical-align:middle;margin-right:9px;margin-bottom:3px} .hero h1,.page-hero h1,.service-hero h1,.local-hero h1,.quote-hero h1,.article h1{ font-size:clamp(2.2rem,5vw,4.1rem);margin:0 0 20px} .hero-lead,.page-hero p,.service-hero p,.local-hero p,.quote-hero p,.article-header p{ font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--gris);max-width:640px} .section h2,.split h2,.section-head h2{font-size:clamp(1.7rem,3.2vw,2.75rem);margin:0 0 16px} /* ---------------- Boutons ---------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:14px 22px;min-height:52px;border-radius:var(--r);border:2px solid var(--encre); font-family:var(--sans);font-weight:700;font-size:.97rem;cursor:pointer;text-align:center; box-shadow:var(--dur);transition:transform .16s ease,box-shadow .16s ease,background .16s ease} .btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--encre)} .btn:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--encre)} .btn-primary{background:var(--brique);color:var(--creme)} .btn-primary:hover{background:var(--brique-fonce)} .btn-secondary{background:var(--blanc);color:var(--encre)} .btn-secondary:hover{background:var(--creme-2)} .btn-light{background:var(--creme);color:var(--encre)} .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0} .trust-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px} .trust-row span,.tag,.business-tag{display:inline-flex;align-items:center;padding:7px 12px; border:2px solid var(--encre);border-radius:999px;background:var(--violette-clair); color:var(--encre);font-weight:700;font-size:.8rem;width:max-content;max-width:100%} .tag{background:var(--creme-2)} .business-tag{background:var(--blanc);font-size:.76rem} /* ---------------- Visuel du hero ---------------- */ .hero-visual{position:relative;min-width:0} .hero-visual img,.service-hero img{border:2px solid var(--encre);border-radius:var(--r-lg); box-shadow:8px 8px 0 var(--brique);aspect-ratio:4/3;object-fit:cover;background:var(--creme-2)} .floating-card{position:absolute;left:-18px;bottom:22px;max-width:238px;background:var(--blanc); padding:16px 18px;border:2px solid var(--encre);border-radius:var(--r);box-shadow:var(--dur)} .floating-card strong{display:block;font-family:var(--serif);font-size:1.2rem;line-height:1.15} .floating-card span{color:var(--gris);font-size:.9rem} /* ---------------- Blocs éditoriaux ---------------- */ .split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:44px;align-items:start} .rich-text{font-size:1.04rem;color:#40322b} .rich-text p:first-child{margin-top:0} .section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;margin-bottom:26px; padding-bottom:18px;border-bottom:2px solid var(--encre)} .section-head>div{min-width:0} .section-head a,.card a,.zone-card a,.blog-card a,.price-card a,.card-link,.sidebar-links a{ font-weight:700;color:var(--brique);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px} .section-head a:hover,.card a:hover,.zone-card a:hover,.blog-card a:hover,.price-card a:hover, .card-link:hover,.sidebar-links a:hover{color:var(--violette)} .card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .card,.feature-card,.zone-card,.blog-card,.price-card,.success-box,.quote-sidebar,.business-card{ background:var(--blanc);border:2px solid var(--encre);border-radius:var(--r-lg);padding:24px; box-shadow:var(--dur);transition:transform .16s ease,box-shadow .16s ease;min-width:0} .card:hover,.zone-card:hover,.blog-card:hover,.price-card:hover,.business-card:hover{ transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--encre)} .card h3,.card h2,.feature-card h3,.zone-card h2,.blog-card h2,.price-card h2,.business-card h3{ margin:13px 0;font-size:1.32rem} .business-card h3{font-size:1.08rem} .card p,.feature-card p,.zone-card p,.blog-card p,.price-card p,.business-card p{color:var(--gris);font-size:.96rem} .price-card strong{display:block;font-family:var(--serif);font-size:1.5rem;color:var(--brique);margin-bottom:8px} .large-card{min-height:330px;display:flex;flex-direction:column} .large-card .card-link{margin-top:auto} .check-list{list-style:none;padding:0;margin:16px 0} .check-list li{position:relative;padding-left:28px;margin:9px 0;color:#40322b} .check-list li:before{content:"";position:absolute;left:0;top:9px;width:14px;height:14px; border:2px solid var(--encre);border-radius:3px;background:var(--ocre)} /* ---------------- Bandeau communes ---------------- */ .zone-band{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px; background:var(--violette);color:var(--creme);border:2px solid var(--encre);border-radius:var(--r-lg); padding:clamp(28px,5vw,54px);box-shadow:var(--dur)} .zone-band h2,.zone-band h3{color:var(--creme)} .zone-band .eyebrow{color:var(--ocre)} .zone-band .eyebrow:before{background:var(--ocre)} .zone-band p{color:#EADFF5} .zone-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .zone-list a{display:flex;justify-content:space-between;align-items:center;gap:12px; background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.3);padding:13px 15px; border-radius:var(--r);color:var(--creme);font-weight:600;transition:.18s} .zone-list a:hover{background:var(--creme);color:var(--encre);border-color:var(--encre)} .zone-list small{font-weight:700;font-size:.8rem;opacity:.85;text-align:right;white-space:nowrap} /* ---------------- Calculateur ---------------- */ .calculator{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;background:var(--blanc); border:2px solid var(--encre);border-radius:var(--r-lg);padding:22px;box-shadow:var(--dur)} label{display:grid;gap:7px;font-weight:700;font-size:.93rem;color:var(--encre)} input,select,textarea{width:100%;border:2px solid var(--encre);border-radius:var(--r);padding:12px 14px; font:inherit;font-size:1rem;background:var(--blanc);color:var(--encre);min-height:50px} textarea{resize:vertical} input::placeholder,textarea::placeholder{color:#9C8A7E} input:focus,select:focus,textarea:focus{outline:3px solid var(--violette);outline-offset:1px} .calc-result{background:var(--encre);color:var(--creme);border:2px solid var(--encre);border-radius:var(--r); padding:16px;display:flex;flex-direction:column;justify-content:center} .calc-result span,.calc-result small{display:block;color:#D9C9BC} .calc-result strong{display:block;font-family:var(--serif);font-size:1.9rem;line-height:1.1;color:var(--ocre)} /* ---------------- Panneaux ---------------- */ .cta-panel{border:2px solid var(--encre);border-radius:var(--r-lg);background:var(--brique); color:var(--creme);text-align:center;box-shadow:var(--dur)} .cta-panel h2{color:var(--creme)} .cta-panel .eyebrow{color:var(--creme)} .cta-panel .eyebrow:before{background:var(--creme)} .cta-panel p{max-width:660px;margin:0 auto 22px;color:#F6E5DF} .page-hero{text-align:left;border-bottom:2px solid var(--encre)} .service-hero,.local-hero,.quote-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,.72fr); gap:38px;align-items:center} .feature-layout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .primary-feature{background:var(--encre);color:var(--creme)} .primary-feature h2,.primary-feature h3{color:var(--creme)} .primary-feature p{color:#D9C9BC} .primary-feature .tag{background:var(--brique);color:var(--creme)} .primary-feature .check-list li{color:#EFE3DA} .pill-grid{display:flex;flex-wrap:wrap;gap:10px} .pill-grid a{padding:11px 15px;border:2px solid var(--encre);border-radius:999px;background:var(--blanc); font-weight:600;font-size:.93rem;transition:.16s} .pill-grid a:hover{background:var(--ocre);transform:translate(-1px,-1px);box-shadow:var(--dur-petit)} .zone-cards,.blog-grid,.pricing-grid,.business-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} .local-panel,.quote-proof{background:var(--blanc);border:2px solid var(--encre);border-radius:var(--r-lg); padding:24px;box-shadow:var(--dur);display:grid;gap:6px} .local-panel span{color:var(--gris);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.09em} .local-panel strong{font-family:var(--serif);font-size:1.18rem} .quote-proof strong{font-family:var(--serif);font-size:3rem;line-height:1;color:var(--brique)} .quote-proof span{color:var(--gris);font-weight:600} .faq details{background:var(--blanc);border:2px solid var(--encre);border-radius:var(--r); padding:16px 20px;margin:10px 0;box-shadow:var(--dur-petit)} .faq summary{font-family:var(--serif);font-weight:600;font-size:1.06rem;cursor:pointer} .faq p{color:var(--gris);margin-bottom:0} .article{max-width:860px} .article-header{border-bottom:2px solid var(--encre);padding-bottom:24px} .article-body{font-size:1.06rem;color:#40322b} .article-body section{margin-top:34px} .article-body h2{font-size:clamp(1.5rem,2.8vw,2rem);margin:0 0 12px} .article-cta{margin-top:36px;border:2px solid var(--encre);border-radius:var(--r-lg); background:var(--creme-2);padding:26px;box-shadow:var(--dur)} .source-note,.info-panel{margin-top:20px;background:var(--creme-2);border:2px solid var(--encre); border-radius:var(--r-lg);padding:20px;color:#40322b} .info-panel{margin-top:0;box-shadow:var(--dur)} /* ---------------- Pied de page ---------------- */ .site-footer{margin-top:56px;background:var(--encre);color:var(--creme); padding:clamp(28px,5vw,48px) clamp(18px,4vw,40px) max(clamp(28px,5vw,48px),calc(env(safe-area-inset-bottom) + 28px)); border-top:2px solid var(--encre)} .footer-cta{max-width:var(--max);margin:0 auto 44px;background:var(--ocre);color:var(--encre); border:2px solid var(--encre);border-radius:var(--r-lg);padding:34px;display:flex;align-items:center; justify-content:space-between;gap:22px;box-shadow:6px 6px 0 var(--brique)} .footer-cta h2{font-size:clamp(1.55rem,3vw,2.5rem);margin:0} .footer-cta .eyebrow{color:var(--brique-fonce)} .footer-cta .eyebrow:before{background:var(--brique-fonce)} .footer-grid{max-width:var(--max);margin:0 auto;display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:28px} .footer-grid p{color:#C6B4A8;font-size:.95rem} .footer-grid h3{margin-top:0;color:var(--creme);font-size:1.05rem} .footer-grid a{display:block;color:#EFE3DA;margin:7px 0;font-size:.95rem;transition:.16s} .footer-grid a:hover{color:var(--ocre)} .footer-brand{margin-bottom:10px;color:var(--creme)} .footer-brand .brand-mark{box-shadow:none} .footer-bottom{max-width:var(--max);margin:30px auto 0;padding-top:20px; border-top:2px solid rgba(255,255,255,.2);color:#C6B4A8;font-size:.92rem} .footer-bottom p{margin:0 0 7px} .footer-bottom p:last-child{margin-bottom:0} .footer-legal-line a{display:inline;color:#EFE3DA;text-decoration:underline;text-underline-offset:3px;margin:0} .footer-legal-line a:hover{color:var(--ocre)} .reveal-on-scroll{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease} .reveal-on-scroll.revealed{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .reveal-on-scroll{opacity:1;transform:none;transition:none} .btn:hover,.card:hover,.zone-card:hover,.blog-card:hover,.price-card:hover, .business-card:hover,.pill-grid a:hover,.nav-cta:hover{transform:none} } /* Débordement impossible sur texte long */ h1,h2,h3,p,li,a,summary,legend,label{overflow-wrap:anywhere;hyphens:auto} /* ================================================================= FORMULAIRE DE DEVIS — charte Toulouse ================================================================= */ .quote-main{min-width:0} .hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .alert-box{background:#FCEBE7;border:2px solid var(--encre);border-left:8px solid var(--brique); border-radius:var(--r);padding:16px 20px;margin-bottom:20px;color:var(--encre);box-shadow:var(--dur-petit)} .alert-box strong{display:block;margin-bottom:3px} .alert-box p{margin:0} .form-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;list-style:none; margin:0 0 24px;padding:0} .form-steps li{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center; font-size:.78rem;font-weight:700;color:var(--gris);padding-top:10px;border-top:4px solid var(--trait)} .form-steps li span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%; border:2px solid var(--encre);background:var(--blanc);color:var(--encre);font-size:.87rem} .form-steps li.is-current{color:var(--brique);border-top-color:var(--brique)} .form-steps li.is-current span{background:var(--brique);color:var(--creme)} .form-steps li.is-done{color:var(--violette);border-top-color:var(--violette)} .form-steps li.is-done span{background:var(--violette);color:var(--creme)} .quote-form{background:var(--blanc);border:2px solid var(--encre);border-radius:var(--r-lg); padding:26px;box-shadow:var(--dur)} .lead-form .form-step{border:0;padding:0;margin:0;min-width:0} .lead-form:not(.is-stepped) .form-step{margin-bottom:34px;padding-bottom:28px;border-bottom:2px solid var(--trait)} .lead-form:not(.is-stepped) .form-step:last-of-type{border-bottom:0} .lead-form:not(.is-stepped) .form-steps{display:none} .lead-form:not(.is-stepped) [data-next],.lead-form:not(.is-stepped) [data-prev]{display:none} .lead-form legend{font-family:var(--serif);font-size:clamp(1.25rem,2.6vw,1.6rem);font-weight:600; line-height:1.14;margin-bottom:18px;padding:0;outline:none} .step-index{display:block;font-family:var(--sans);font-size:.75rem;letter-spacing:.16em; text-transform:uppercase;color:var(--brique);font-weight:800;margin-bottom:5px} .field-block{margin-bottom:24px} .field-label{margin:0 0 10px;font-weight:700;font-size:.95rem} .field-label small{font-weight:500;color:var(--gris)} .field-hint{font-weight:500;color:var(--gris);font-size:.85rem} .req{color:var(--brique)} .lead-form label{margin-bottom:16px} .lead-form .form-grid label{margin-bottom:0} .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px} .choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px} .choice-grid-compact{grid-template-columns:repeat(auto-fit,minmax(175px,1fr))} .choice-card{position:relative;display:flex;align-items:flex-start;gap:11px;margin:0; border:2px solid var(--encre);border-radius:var(--r);padding:13px 15px;background:var(--blanc); cursor:pointer;font-weight:600;min-height:54px;transition:.16s} .choice-card:hover{background:var(--creme-2)} .choice-card input{position:absolute;opacity:0;width:1px;height:1px;margin:0} .choice-card .choice-body{display:grid;gap:2px;min-width:0} .choice-card strong{font-size:.95rem;line-height:1.25} .choice-card small{color:var(--gris);font-weight:500;font-size:.82rem;line-height:1.35} .choice-card:before{content:"";flex:0 0 auto;width:20px;height:20px;margin-top:2px; border:2px solid var(--encre);border-radius:50%;background:var(--blanc);transition:.16s} .choice-card:has(input[type=checkbox]):before{border-radius:4px} .choice-card:has(input:checked){background:var(--violette-clair);box-shadow:var(--dur-petit)} .choice-card:has(input:checked):before{background:var(--violette);box-shadow:inset 0 0 0 3px var(--blanc)} .choice-card:has(input[type=checkbox]:checked):before{box-shadow:none; background:var(--violette) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center/12px no-repeat} .choice-card:has(input:focus-visible){outline:3px solid var(--violette);outline-offset:2px} .choice-card-sm{min-height:50px;padding:11px 13px} .choice-card-sm strong{font-size:.9rem} @supports not selector(:has(*)){ .choice-card:before{display:none} .choice-card input{position:static;opacity:1;width:20px;height:20px;flex:0 0 auto;margin-top:2px} } .consent-field{display:flex;align-items:flex-start;gap:11px;margin:6px 0 0;font-weight:500; color:#40322b;line-height:1.5;font-size:.93rem} .consent-field input{width:21px;height:21px;min-height:0;flex:0 0 auto;margin-top:2px;accent-color:var(--violette)} .consent-field a{color:var(--brique);font-weight:700;text-decoration:underline;text-underline-offset:3px} .field-error{display:block;margin-top:5px;color:var(--brique-fonce);font-weight:700;font-size:.86rem} .has-error input,.has-error select,.has-error textarea{border-color:var(--brique);background:#FDF3F1} .step-nav{display:flex;gap:11px;margin-top:24px;flex-wrap:wrap} .step-nav .btn{width:auto;flex:1 1 170px} .step-nav [data-prev]{flex:0 1 135px} .form-legal{margin:16px 0 0;font-size:.84rem;color:var(--gris);line-height:1.5} .form-legal a{color:var(--brique);font-weight:700} .lead-form input,.lead-form select,.lead-form textarea{min-height:50px} .lead-form button[disabled]{opacity:.6;cursor:progress} /* Page /devis : formulaire à gauche, encarts à droite */ .quote-layout{max-width:var(--max);margin:0 auto;padding:26px clamp(18px,4vw,26px) clamp(44px,6vw,76px); display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:30px;align-items:start} .quote-layout h1{font-size:clamp(1.85rem,3.2vw,2.7rem);margin:0 0 10px} .quote-lead{font-size:1rem;color:var(--gris);max-width:620px;margin:0 0 20px} .quote-side{position:sticky;top:90px;display:grid;gap:16px;min-width:0} .quote-side .quote-proof strong{font-size:2.5rem} .quote-side .quote-sidebar h2{font-size:1.1rem;margin:0 0 4px} .quote-side .check-list li{font-size:.92rem;margin:6px 0} .sidebar-links{display:grid;gap:8px;margin-top:16px;padding-top:16px;border-top:2px solid var(--trait)} /* ================================================================= BANDEAU HAUT DE PAGE — formulaire à gauche, contenu à droite ================================================================= */ .hero-split{max-width:var(--max);margin:0 auto;padding:24px clamp(18px,4vw,26px) clamp(36px,5vw,64px); display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(26px,4vw,52px);align-items:start} .hero-split-form,.hero-split-content{min-width:0} .hero-split-content>.hero,.hero-split-content>.page-hero,.hero-split-content>.service-hero, .hero-split-content>.local-hero,.hero-split-content>.article,.hero-split-content>div.article{ max-width:none;margin:0;padding:0;display:block;text-align:left;border-bottom:0} .hero-split-content .hero-visual{margin-top:24px;max-width:100%} .hero-split-content .hero-visual img,.hero-split-content>.service-hero img{margin-top:20px;box-shadow:6px 6px 0 var(--brique)} .hero-split-content .floating-card{position:static;max-width:100%;margin-top:14px} .hero-split-content .local-panel{margin-top:22px} .hero-split-content h1{font-size:clamp(2rem,4vw,3.3rem)} .hero-split-content .article-header{border-bottom:0;padding-bottom:0} .hero-split-form h2{font-size:clamp(1.4rem,2.4vw,1.85rem);margin:0 0 7px} .hero-split-form .quote-lead{font-size:.95rem;margin-bottom:16px} .hero-split-form .quote-form{padding:22px} .hero-split-form .choice-grid{grid-template-columns:1fr} .hero-split-form .choice-grid-compact{grid-template-columns:1fr 1fr;gap:7px} .hero-split-form .choice-card{padding:10px 12px;min-height:46px;gap:9px} .hero-split-form .choice-card:before{width:18px;height:18px;margin-top:1px} .hero-split-form .choice-card strong{font-size:.88rem} .hero-split-form .choice-card small{font-size:.76rem;line-height:1.3} .hero-split-form .choice-card-sm{min-height:44px;padding:9px 11px} .hero-split-form .choice-card-sm strong{font-size:.83rem} .hero-split-form .field-block{margin-bottom:18px} .hero-split-form legend{font-size:1.12rem;margin-bottom:15px} .hero-split-form .form-steps{margin-bottom:18px} .hero-split-form label{margin-bottom:13px} .hero-split-form input,.hero-split-form select,.hero-split-form textarea{min-height:46px;padding:10px 13px} /* ---------------- Pages légales ---------------- */ .legal-page{max-width:840px} .legal-page .article-body section{margin-top:36px} .legal-page .article-body section:first-child{margin-top:0} .legal-list{list-style:none;padding:0;margin:14px 0} .legal-list li{position:relative;padding-left:22px;margin:9px 0;color:#40322b} .legal-list li:before{content:"";position:absolute;left:0;top:11px;width:9px;height:9px; background:var(--brique);border-radius:2px} .legal-page a{color:var(--brique);font-weight:700;text-decoration:underline;text-underline-offset:3px} .legal-page .btn{text-decoration:none} .legal-page .btn-primary{color:var(--creme)} .legal-updated{margin-top:36px;padding-top:18px;border-top:2px solid var(--trait);color:var(--gris);font-size:.93rem} /* ================================================================= RESPONSIVE ================================================================= */ @media (max-width:1100px){ .zone-cards,.blog-grid,.pricing-grid,.business-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .hero{grid-template-columns:1fr} .hero-visual{max-width:min(620px,100%);margin-inline:auto} } @media (max-width:1000px){ .service-hero,.local-hero,.quote-hero,.split,.zone-band,.quote-layout{grid-template-columns:1fr} .feature-layout,.calculator{grid-template-columns:1fr 1fr} .footer-grid{grid-template-columns:1fr 1fr} .service-hero img{max-width:min(600px,100%);margin-inline:auto} .quote-layout .quote-main{order:1} .quote-layout .quote-side{order:2;position:static;display:grid; grid-template-columns:repeat(auto-fit,minmax(275px,1fr))} .hero-split{grid-template-columns:1fr;gap:24px;padding-top:18px} .hero-split-content{order:1} .hero-split-form{order:2} .hero-split-content .hero-visual,.hero-split-content>.service-hero img{display:none} .hero-split-form .quote-form{padding:20px} } @media (max-width:860px){ .site-header{padding:12px 18px} .nav-toggle{display:inline-flex} .main-nav{display:none;position:absolute;left:14px;right:14px;top:calc(100% + 8px); background:var(--blanc);border:2px solid var(--encre);border-radius:var(--r-lg);padding:12px; box-shadow:var(--dur);flex-direction:column;align-items:stretch;gap:5px; max-height:calc(100dvh - 120px);overflow-y:auto;overscroll-behavior:contain} .main-nav.is-open{display:flex} .main-nav a{min-height:48px;display:flex;align-items:center;padding:12px 14px} .nav-cta{justify-content:center} .hero,.section,.page-hero,.service-hero,.local-hero,.quote-hero,.article{ padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))} .hero h1,.page-hero h1,.service-hero h1,.local-hero h1,.quote-hero h1,.article h1{ font-size:clamp(1.9rem,8vw,2.6rem)} .section h2,.split h2,.section-head h2{font-size:clamp(1.55rem,6vw,2.2rem)} .hero-actions,.section-head,.footer-cta{align-items:stretch;flex-direction:column} .section-head{align-items:flex-start} .section-head a{align-self:flex-start;min-height:44px;display:inline-flex;align-items:center} .btn{width:100%} .card-grid,.zone-cards,.blog-grid,.pricing-grid,.business-grid,.feature-layout, .calculator,.zone-list,.form-grid,.footer-grid{grid-template-columns:1fr} .zone-list a{flex-direction:column;align-items:flex-start;min-height:56px} .zone-list small{text-align:left} .floating-card{position:static;max-width:100%;margin-top:14px} .card a,.zone-card a,.blog-card a,.price-card a,.card-link,.sidebar-links a, .business-card a,.footer-grid a{display:inline-flex;align-items:center;min-height:44px;padding:8px 0} .footer-grid a{display:flex;width:100%;min-height:46px;padding:10px 0;margin:0} .footer-legal-line a{min-height:44px;padding:10px 4px;line-height:24px} .legal-list li a{display:inline-flex;align-items:center;min-height:44px;min-width:44px} .pill-grid a{min-height:44px;padding:12px 17px} .faq summary{min-height:44px;display:flex;align-items:center} .brand{min-height:44px} .large-card{min-height:0} .quote-layout{padding:18px 18px 44px} .hero-split{padding:16px 18px 36px} .hero-split-content h1{font-size:clamp(1.8rem,7.4vw,2.35rem)} .quote-side{grid-template-columns:1fr} .step-nav{flex-direction:column-reverse} .step-nav .btn,.step-nav [data-prev]{width:100%;flex:none} .lead-form legend{font-size:1.25rem} .form-steps{gap:5px} .form-steps li{font-size:.75rem;gap:5px;padding-top:9px} .form-steps li span{width:27px;height:27px;font-size:.8rem} .footer-cta{padding:24px} .site-footer{margin-top:28px} } @media (max-width:520px){ .hero-split-form .choice-grid-compact{grid-template-columns:1fr} } @media (max-width:420px){ .form-steps li{font-size:0;gap:0;border-top-width:5px} .form-steps li span{font-size:.83rem} .quote-proof strong{font-size:2.6rem} .choice-card{padding:11px 13px} } /* ================================================================= BLOC SEO DE LA PAGE D'ACCUEIL Premier dans le DOM (juste après la