/* assets/modele/polices.css */
/* ===========================================================================
   POLICES DE LA MAQUETTE — DM Sans et Manrope, hebergees en local.
   Appeler fonts.gstatic.com a chaque visite revient a transmettre l adresse IP
   du visiteur a un tiers sans son accord : la CNIL l a sanctionne. Ces fichiers
   sont servis par notre propre serveur.
   Regenerer avec : node outils/polices.mjs
   =========================================================================== */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/polices/dm-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/polices/dm-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(/assets/polices/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(/assets/polices/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* assets/modele/styles.css */
/* Polices : voir assets/modele/polices.css — servies en local, pas par Google. */
:root{--navy:#0659a7;--ink:#102b43;--muted:#62707b;--green:#2f892c;--deep-green:#2d842a;--line:#e0e6e8;--pale:#f4f7f7;--white:#fff;font-family:'DM Sans',Arial,sans-serif;color:var(--ink);font-synthesis:none;scroll-behavior:smooth;scroll-padding-top:110px}*{box-sizing:border-box}body{margin:0;font-size:16px;line-height:1.6}button,input,textarea,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{cursor:pointer}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.m-icon-library{position:absolute;width:0;height:0;overflow:hidden}img{max-width:100%;display:block}.m-wrap{width:min(1280px,calc(100% - 96px));margin:auto}.m-skip{position:fixed;top:-100px;background:white;padding:14px;z-index:200}.m-skip:focus{top:8px}:focus-visible{outline:3px solid #458db4;outline-offset:5px}.m-topbar{background:var(--navy);color:#fff;font-size:.8125rem}.m-topbar .m-wrap{display:flex;justify-content:space-between;min-height:37px;align-items:center}.m-topbar span{display:flex;gap:9px;align-items:center}.m-topbar svg{height:14px;width:14px;color:var(--green)}.m-status-dot{height:6px;width:6px;background:var(--green);border-radius:50%}header{background:#fffffff5;position:sticky;top:0;z-index:30;border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}.m-nav{height:96px;display:flex;align-items:center;justify-content:space-between;gap:24px}.m-brand{display:flex;gap:11px;align-items:center;flex-shrink:0}.m-logo-crop{width:80px;height:40px;overflow:hidden;position:relative}.m-logo-crop img{width:108px;max-width:none;position:absolute;left:-14px;top:-32px}.m-brand-name{font-family:Manrope,Arial,sans-serif;font-size:.875rem;font-weight:800;letter-spacing:-.45px;line-height:1.35}.m-brand-name b{color:var(--deep-green)}.m-brand-name small{display:block;font-size:.5625rem;letter-spacing:3.5px;margin-top:5px;color:#576a79}.m-nav nav{display:flex;gap:25px;align-items:center;font-size:.875rem;font-weight:600}.m-nav nav a{position:relative;padding:12px 0}.m-nav nav a:after{content:'';position:absolute;left:0;right:100%;height:2px;bottom:4px;background:var(--deep-green);transition:right .2s}.m-nav nav a:hover:after{right:0}.m-button{display:inline-flex;align-items:center;justify-content:center;gap:13px;min-height:53px;padding:15px 23px;font-weight:700;font-size:.875rem;border:1px solid transparent;border-radius:6px;transition:transform .2s,background .2s}.m-button:hover{transform:translateY(-2px)}.m-button svg{width:19px;height:19px}.m-nav .m-button{min-height:46px;padding:12px 17px;white-space:nowrap}.m-navy{background:var(--navy);color:#fff}.m-navy:hover{background:#174261}.m-green{background:var(--green);color:var(--navy)}.m-green:hover{background:#257324}.m-outline{border-color:#cbd5da;background:transparent}.m-outline:hover{background:white}.m-menu-toggle{display:none;background:transparent;border:0;padding:8px}.m-hero{background:linear-gradient(115deg,#f4f7f7 5%,#fff 90%);overflow:hidden}.m-hero-grid{display:grid;grid-template-columns:1.08fr 1fr;gap:50px;padding-top:62px;padding-bottom:52px;align-items:center}.m-eyebrow{font-size:.75rem;font-weight:800;letter-spacing:1.8px;display:flex;gap:10px;align-items:center;line-height:1.5}.m-eyebrow>span:empty{width:24px;height:2px;background:var(--deep-green)}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Manrope,Arial,sans-serif}h1{font-size:clamp(3rem,4.7vw,4.65rem);font-weight:800;letter-spacing:-3px;line-height:1.1;margin:24px 0}em{font-style:normal;color:var(--deep-green)}.m-hero-copy>p:first-of-type{font-size:1.25rem;line-height:1.5;font-weight:500}.m-hero-detail{color:var(--muted);max-width:495px;font-size:.9375rem;margin-top:18px;line-height:1.8}.m-hero-actions{display:flex;gap:12px;margin-top:29px}.m-hero-actions .m-button{padding:15px 17px;font-size:.8125rem;gap:9px}.m-hero-checks{display:flex;flex-wrap:wrap;gap:16px;margin-top:23px;font-size:.75rem;color:#52606c}.m-hero-checks span{display:flex;align-items:center;gap:5px}.m-hero-checks svg{height:15px;width:15px;color:var(--deep-green)}.m-hero-visual{height:520px;position:relative;border-radius:12px 12px 100px 12px;isolation:isolate}.m-hero-photo{height:100%;width:100%;object-fit:cover;object-position:58% center;border-radius:inherit}.m-photo-shade{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,#051c3a44 0%,transparent 45%,#051c3a55 100%)}.m-photo-top{position:absolute;left:24px;right:24px;top:23px;display:flex;justify-content:space-between;color:white;align-items:center}.m-mini-brand{font-size:1.8rem;font-weight:800;font-style:italic;line-height:1;letter-spacing:-2px}.m-mini-brand span{display:block;font-size:.4rem;letter-spacing:2px;margin-top:5px;font-style:normal}.m-photo-tag{font-size:.625rem;line-height:1.6;letter-spacing:1px;text-align:right;font-weight:700}.m-availability{position:absolute;left:-30px;bottom:36px;padding:22px;display:flex;align-items:center;gap:15px;border-radius:9px;background:white;box-shadow:0 12px 45px #0659a719;width:365px;border-bottom:3px solid var(--green)}.m-availability-icon{height:48px;width:48px;background:#eff7e7;border-radius:50%;display:grid;place-items:center;color:var(--deep-green)}.m-availability-icon svg{height:26px;width:26px}.m-availability strong{font-family:Manrope,Arial,sans-serif;font-size:1.5rem;letter-spacing:-1px}.m-availability strong span{color:#8c9ba6;font-weight:500}.m-availability p{font-size:.8125rem;color:var(--muted)}.m-availability-arrow{margin-left:auto}.m-photo-caption{position:absolute;right:33px;bottom:15px;font-size:.75rem;color:white;text-shadow:0 1px 5px #000}.m-hero-bottom{display:flex;gap:40px;padding:23px 0;align-items:center;border-top:1px solid #dce4e7;font-size:.6875rem;letter-spacing:1.5px;font-weight:700;color:#6a7782}.m-hero-bottom a{margin-left:auto;letter-spacing:0;font-weight:500;font-size:.8125rem;display:flex;gap:20px;align-items:center}.m-hero-bottom a span{font-size:1.3rem;color:var(--deep-green)}.m-section{padding:95px 0}h2{font-size:clamp(2rem,3.1vw,2.9rem);line-height:1.2;letter-spacing:-1.7px;font-weight:750;margin-top:18px}h3{font-size:1.1875rem;letter-spacing:-.5px;line-height:1.4}.m-section-heading{display:flex;justify-content:space-between;align-items:end;gap:60px;margin-bottom:43px}.m-section-heading>p{max-width:345px;color:var(--muted);font-size:1rem;line-height:1.8;padding-bottom:4px}.m-services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.m-service-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);padding:27px 28px 23px;border-radius:9px;text-align:left;color:var(--ink);transition:border-color .2s,transform .2s,box-shadow .2s}.m-service-card:hover{border-color:#7ca652;transform:translateY(-5px);box-shadow:0 12px 30px #0659a70a}.m-service-top{display:flex;justify-content:space-between;width:100%;align-items:center;margin-bottom:23px}.m-service-top>svg{width:47px;height:47px;padding:10px;background:#f0f5eb;color:var(--deep-green);border-radius:8px;stroke-width:1.5}.m-service-top>span{font-family:Manrope,sans-serif;font-size:.75rem;color:#98a4ac}.m-service-card h3{font-size:1.35rem;line-height:1.3}.m-service-card p{font-size:.9375rem;line-height:1.75;color:var(--muted);margin:14px 0 23px}.m-service-link{margin-top:auto;border-top:1px solid var(--line);padding-top:18px;font-size:.8125rem;font-weight:700;width:100%;display:flex;justify-content:space-between;align-items:center}.m-service-link svg{height:19px;width:19px;color:var(--deep-green)}.m-emergency{background:var(--navy);color:#fff;padding:43px 0}.m-emergency-inner{display:flex;align-items:center;gap:25px}.m-emergency-symbol{display:grid;place-items:center;height:70px;width:70px;border:1px solid #426041;border-radius:50%;color:var(--green);flex-shrink:0}.m-emergency-symbol svg{width:28px;height:28px}.m-emergency .m-eyebrow{color:var(--green);font-size:.6875rem}.m-emergency h2{font-size:1.65rem;line-height:1.4;letter-spacing:-.6px;margin-top:10px}.m-emergency a{margin-left:auto;display:block;font-family:Manrope,sans-serif;font-size:2.05rem;font-weight:700;letter-spacing:-1px}.m-emergency a svg{margin-left:15px;color:var(--green)}.m-emergency a small{display:block;font-family:'DM Sans',sans-serif;font-size:.8125rem;font-weight:400;letter-spacing:0;color:#b9c8d4}.m-commitments-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:110px}.m-commitment-title>p{margin:23px 0;color:var(--muted);line-height:1.85;max-width:410px}.m-text-link{display:inline-flex;align-items:center;gap:25px;font-size:.875rem;font-weight:700;margin-top:8px}.m-text-link svg{color:var(--deep-green)}.m-commitment-list article{display:flex;gap:24px;padding:26px 0;border-bottom:1px solid var(--line)}.m-commitment-list article:first-child{padding-top:0}.m-commitment-list article>span{color:var(--deep-green);font-size:.75rem;font-weight:700;margin-top:5px}.m-commitment-list p{margin-top:10px;font-size:.9375rem;color:var(--muted);line-height:1.8}.m-process{background:var(--pale);text-align:center}.m-process .m-eyebrow{justify-content:center}.m-process h2{font-size:2.5rem}.m-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;margin-top:53px;text-align:left}.m-steps article{position:relative}.m-steps article:not(:last-child):after{content:'';position:absolute;top:24px;left:65px;right:0;border-top:1px dashed #c4d1ce}.m-steps article>span{height:47px;width:47px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:1rem;font-weight:700;position:relative;z-index:1}.m-steps article:last-child>span{background:var(--green);color:var(--navy)}.m-steps h3{font-size:1.0625rem;margin-top:23px}.m-steps p{font-size:.9375rem;line-height:1.8;color:var(--muted);margin-top:12px}.m-zone-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:100px;align-items:center}.m-zone-grid>div>p{margin-top:23px;color:var(--muted);line-height:1.85}.m-zone-note{display:flex;gap:14px;padding:23px 0 28px}.m-zone-note>svg{color:var(--deep-green);margin-top:4px}.m-zone-note strong{font-size:.9375rem}.m-zone-note p{font-size:.875rem;color:var(--muted);margin-top:4px;line-height:1.8}.m-department-panel{background:#f4f7f5;border-radius:12px;padding:29px}.m-department-heading{display:flex;gap:9px;align-items:center;padding-bottom:24px;border-bottom:1px solid #dbe3df;font-size:.625rem;letter-spacing:1px;font-weight:700;flex-wrap:wrap}.m-department-heading svg{color:var(--deep-green);width:17px}.m-department-heading b{font-weight:500;margin-left:auto;letter-spacing:0;font-size:.75rem}.m-departments{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}.m-departments>span{display:flex;align-items:center;gap:12px;background:#fff;padding:15px 12px;border-radius:5px;font-size:.8125rem}.m-departments b{font-family:Manrope,sans-serif;font-size:1.125rem;color:var(--deep-green);font-weight:700}.m-department-panel>p{display:flex;align-items:center;gap:9px;font-size:.75rem!important;margin-top:23px!important}.m-department-panel>p svg{width:16px;height:16px}.m-faq{border-top:1px solid var(--line)}.m-faq-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:80px}.m-faq h2{font-size:2.35rem}.m-faq-grid>div>p{color:var(--muted);margin:22px 0 14px}.m-faq-list details{border-bottom:1px solid var(--line)}.m-faq-list details:first-child{border-top:1px solid var(--line)}summary{cursor:pointer;list-style:none;font-size:.9375rem;font-weight:600;padding:23px 36px 23px 0;position:relative}summary::-webkit-details-marker{display:none}summary:after{content:'+';position:absolute;right:4px;top:18px;font-size:1.6rem;font-weight:400;color:var(--deep-green)}details[open] summary:after{content:'−'}details p{font-size:.9375rem;line-height:1.85;padding:0 25px 23px 0;color:var(--muted)}.m-contact{background:var(--navy);color:white}.m-contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:85px;align-items:start}.m-contact .m-eyebrow{color:var(--green)}.m-contact em{color:var(--green)}.m-contact-copy>p{color:#b7c5d0;line-height:1.85;margin-top:24px;max-width:410px}.m-contact-phone{display:flex;gap:18px;margin-top:38px;align-items:center;font-family:Manrope,sans-serif;font-size:1.9rem;font-weight:700;letter-spacing:-.5px}.m-contact-phone svg{width:27px;height:27px;color:var(--green)}.m-contact-phone small{display:block;font-family:'DM Sans',sans-serif;font-size:.625rem;letter-spacing:1.3px;color:#b5c3ce;margin-bottom:6px}.m-contact-email,.m-contact-hours{display:flex;align-items:center;gap:18px;margin-top:24px;font-size:.9375rem}.m-contact-email svg,.m-contact-hours svg{color:var(--green);width:22px}.m-contact-hours{color:#b7c5d0;font-size:.8125rem}.m-brochure{display:inline-flex;align-items:center;gap:20px;margin-top:43px;padding-bottom:7px;border-bottom:1px solid #536777;font-size:.875rem}form{background:#fff;color:var(--ink);padding:31px;border-radius:10px}form h3{font-size:1.4rem}form>p{font-size:.75rem;color:var(--muted);margin-top:6px;margin-bottom:22px}.m-form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}label{display:block;font-size:.75rem;font-weight:600;margin-bottom:16px}input,select,textarea{border:1px solid #d7e0e4;border-radius:5px;padding:11px 12px;width:100%;display:block;font-size:.875rem;color:var(--ink);margin-top:6px;background:#fff}input::placeholder,textarea::placeholder{color:#8b969f}textarea{resize:vertical;min-height:100px}input:focus,select:focus,textarea:focus{outline:2px solid #7aab45;outline-offset:1px}.m-consent{display:flex;gap:10px;align-items:start;font-size:.75rem;font-weight:400;color:var(--muted);line-height:1.6}.m-consent input{margin:4px 0 0;width:15px;height:15px;accent-color:var(--deep-green);flex-shrink:0}form>.m-button{width:100%;justify-content:space-between}form .m-form-note{font-size:.75rem;margin:12px 0 0;text-align:center;line-height:1.7}#form-feedback{background:#f0f7e9;border:1px solid #cedeb9;margin-top:18px;padding:16px;border-radius:5px;font-size:.875rem}#form-feedback p{margin-top:7px}#form-feedback>div{display:flex;gap:14px;margin-top:12px;flex-wrap:wrap}#form-feedback a,#copy-request{font-size:.8125rem;font-weight:700;text-decoration:underline;background:none;border:0;padding:0;color:var(--ink)}footer{background:#061c34;color:#bbc9d4;padding:52px 0 0}.m-footer-main{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:35px;padding-bottom:42px}.m-footer-brand{font-family:Manrope,sans-serif;font-weight:800;color:#fff;font-size:1rem;letter-spacing:-.6px}.m-footer-brand span{color:var(--green)}.m-footer-brand small{display:block;font-size:.5625rem;letter-spacing:4px;margin-top:6px;color:#b8c7d1;font-weight:500}.m-footer-main p{margin-top:20px;font-size:.8125rem}.m-footer-main h3{font-family:'DM Sans',sans-serif;font-size:.875rem;color:white;letter-spacing:0;margin-bottom:17px}.m-footer-main>div>a:not(.m-footer-brand),.m-footer-main>div>span{display:block;font-size:.8125rem;margin-top:10px}.m-footer-main a:hover,.m-footer-bottom a:hover{color:var(--green)}.m-footer-bottom{border-top:1px solid #284051;padding-top:20px;padding-bottom:22px;display:flex;gap:30px;font-size:.75rem;align-items:center}.m-footer-bottom button{border:0;background:none;padding:0;color:inherit;font-size:inherit;margin-left:auto}.m-mobile-contact{display:none}dialog{border:0;border-radius:14px;padding:45px;width:min(630px,calc(100% - 32px));max-height:90vh;overflow:auto;color:var(--ink);box-shadow:0 25px 100px #0003}dialog::backdrop{background:#041d36a8;backdrop-filter:blur(5px)}dialog h2{font-size:2rem;margin-bottom:20px;padding-right:15px}dialog p{color:var(--muted);line-height:1.85;margin-bottom:16px}dialog ul{padding-left:21px;color:var(--muted);margin:20px 0 25px}dialog li{padding:4px 0}.m-dialog-close{position:absolute;top:12px;right:17px;background:transparent;border:0;font-size:2rem;color:var(--ink);line-height:1;width:36px;height:36px}body.m-dialog-open{overflow:hidden}
@media(min-width:1500px){.m-hero-grid{gap:65px}.m-hero-visual{height:560px}}
@media(max-width:1200px){.m-wrap{width:calc(100% - 64px)}.m-nav{gap:18px}.m-nav nav{gap:18px;font-size:.75rem}.m-brand-name{display:none}.m-hero-grid{gap:35px}.m-hero-actions{flex-wrap:wrap}.m-hero-visual{height:530px}.m-hero-checks{gap:10px}.m-hero-bottom{gap:25px}.m-commitments-grid,.m-zone-grid{gap:65px}.m-contact-grid{gap:50px}.m-contact-phone{font-size:1.65rem}.m-footer-main{gap:22px}.m-availability{width:330px;padding:18px}.m-availability strong{font-size:1.4rem}}
@media(max-width:900px){.m-nav{height:80px}.m-nav nav{gap:14px}.m-nav-phone{font-size:.75rem!important}.m-hero-grid{grid-template-columns:1fr 1fr;gap:26px;padding-top:40px}.m-hero-visual{height:500px}h1{font-size:3.25rem;letter-spacing:-2px}.m-hero-detail{font-size:.875rem}.m-hero-actions{display:grid}.m-hero-actions .m-button{width:fit-content}.m-hero-checks{font-size:.75rem}.m-availability{left:-20px;width:280px;gap:10px}.m-availability-icon{width:40px;height:40px}.m-availability strong{font-size:1.2rem}.m-availability p{font-size:.75rem}.m-availability-arrow{display:none}.m-hero-bottom{gap:21px;font-size:.625rem}.m-hero-bottom a{font-size:.75rem}.m-section{padding:70px 0}.m-services-grid{gap:14px}.m-service-card{padding:22px}.m-service-card h3{font-size:1.2rem}.m-emergency-inner{gap:20px}.m-emergency-symbol{display:none}.m-emergency a{font-size:1.65rem}.m-emergency h2{font-size:1.4rem}.m-commitments-grid,.m-zone-grid,.m-faq-grid,.m-contact-grid{gap:40px}.m-steps{gap:24px}.m-process h2{font-size:2.1rem}.m-department-panel{padding:20px}.m-departments{grid-template-columns:1fr}.m-departments>span{padding:9px 12px}.m-department-heading b{margin-left:0}.m-faq h2{font-size:2rem}.m-contact-grid{grid-template-columns:.85fr 1.2fr}.m-contact h2{font-size:2.1rem}.m-contact-phone{font-size:1.4rem;gap:10px}.m-contact-email{font-size:.8125rem;gap:10px}form{padding:25px}.m-form-row{grid-template-columns:1fr;gap:0}.m-footer-main{grid-template-columns:1fr 1fr;gap:35px}}
@media(max-width:700px){:root{scroll-padding-top:85px}.m-wrap{width:calc(100% - 40px)}.m-topbar .m-wrap{justify-content:center;font-size:.6875rem;min-height:32px}.m-topbar .m-wrap>span:last-child{display:none}.m-nav{height:76px;gap:12px}.m-brand-name{display:block;font-size:.7rem}.m-brand-name small{font-size:.45rem;letter-spacing:2px}.m-brand{gap:5px}.m-logo-crop{width:67px;height:38px}.m-logo-crop img{width:93px;left:-12px;top:-26px}.m-nav .m-nav-phone{display:none}.m-menu-toggle{display:flex;flex-direction:column;gap:6px;justify-content:center;width:40px;height:40px}.m-menu-toggle span{height:2px;width:23px;background:var(--navy);transition:transform .2s}.m-menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}.m-menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}.m-nav nav{display:none;position:absolute;top:76px;left:0;right:0;background:white;padding:18px 25px;box-shadow:0 12px 15px #0659a70c}.m-nav nav.open{display:flex;flex-direction:column;align-items:stretch;font-size:.9375rem;gap:2px}.m-hero-grid{grid-template-columns:1fr;padding-top:35px;padding-bottom:29px;gap:35px}.m-eyebrow{font-size:.6875rem;letter-spacing:1.5px}h1{font-size:clamp(3rem,11vw,4rem);letter-spacing:-2.2px;margin:20px 0}.m-hero-copy>p:first-of-type{font-size:1.125rem}.m-hero-detail{font-size:.9375rem;max-width:100%;margin-top:15px}.m-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:23px}.m-hero-actions .m-button{font-size:.8125rem;min-height:51px;flex:1;white-space:nowrap;padding:14px}.m-hero-checks{gap:9px 14px;margin-top:19px;font-size:.6875rem}.m-hero-visual{height:360px;border-radius:10px 10px 65px 10px;margin-left:10px}.m-hero-photo{object-position:center 54%}.m-availability{left:-10px;bottom:27px;padding:16px;width:295px}.m-availability strong{font-size:1.4rem}.m-photo-top{left:20px;right:20px}.m-hero-bottom{flex-wrap:wrap;justify-content:space-between;gap:13px 15px;font-size:.5625rem;padding:18px 0}.m-hero-bottom a{display:none}.m-section{padding:57px 0}h2{font-size:2.05rem;letter-spacing:-1.2px}.m-section-heading{display:block;margin-bottom:30px}.m-section-heading>p{margin-top:18px;font-size:.9375rem;max-width:100%}.m-services-grid{grid-template-columns:1fr 1fr;gap:12px}.m-service-card{padding:20px 17px 17px}.m-service-card h3{font-size:1.0625rem;letter-spacing:-.3px}.m-service-card p{font-size:.8125rem;margin:12px 0 18px;line-height:1.7}.m-service-top{margin-bottom:17px}.m-service-top>svg{height:40px;width:40px;padding:8px}.m-service-link{font-size:.75rem;gap:8px}.m-emergency{padding:32px 0}.m-emergency-inner{display:block}.m-emergency h2{font-size:1.35rem}.m-emergency a{font-size:1.9rem;margin-top:23px}.m-emergency a small{margin-top:5px}.m-commitments-grid,.m-zone-grid,.m-faq-grid,.m-contact-grid{grid-template-columns:1fr;gap:35px}.m-commitment-title>p{max-width:none;margin:20px 0;font-size:.9375rem}.m-commitment-list article{padding:22px 0;gap:20px}.m-commitment-list h3{font-size:1.0625rem}.m-process{text-align:left}.m-process .m-eyebrow{justify-content:start}.m-process h2{font-size:2rem}.m-steps{grid-template-columns:1fr 1fr;gap:30px 23px;margin-top:33px}.m-steps article:nth-child(2):after{display:none}.m-steps p{font-size:.875rem}.m-steps h3{font-size:1rem;margin-top:18px}.m-zone-grid>div>p{font-size:.9375rem}.m-departments{grid-template-columns:1fr 1fr;gap:10px}.m-departments>span{font-size:.75rem;gap:8px;padding:13px 10px}.m-departments b{font-size:1rem}.m-department-heading b{margin-left:auto}.m-department-panel{padding:22px 18px}.m-faq h2{font-size:2rem}.m-faq-grid{gap:30px}summary{font-size:.875rem;padding:21px 33px 21px 0}.m-contact-grid{gap:32px}.m-contact-copy>p{max-width:none;font-size:.9375rem}.m-contact-phone{font-size:1.9rem;gap:17px;margin-top:27px}.m-contact-email{font-size:.9375rem;gap:17px}.m-contact h2{font-size:2.2rem}.m-brochure{margin-top:25px}form{padding:25px 20px}.m-form-row{grid-template-columns:1fr 1fr;gap:12px}input,textarea,select{font-size:1rem}form label{font-size:.8125rem}.m-consent{font-size:.75rem}footer{padding-top:37px;padding-bottom:66px}.m-footer-main{gap:30px 20px;grid-template-columns:1fr 1fr}.m-footer-main>div:first-child{grid-column:1/-1}.m-footer-main>div:last-child{grid-column:1/-1}.m-footer-main>div>a:not(.m-footer-brand){font-size:.8125rem}.m-footer-bottom{gap:15px;flex-wrap:wrap}.m-footer-bottom>a{display:none}.m-mobile-contact{display:grid;grid-template-columns:1fr 1fr;position:fixed;bottom:0;left:0;right:0;background:white;z-index:35;border-top:1px solid #d7e0e4;padding:9px 12px calc(9px + env(safe-area-inset-bottom));gap:9px;box-shadow:0 -5px 20px #0659a70a}.m-mobile-contact a{display:flex;align-items:center;justify-content:center;gap:12px;font-size:.8125rem;font-weight:700;background:var(--navy);color:white;min-height:44px;border-radius:5px}.m-mobile-contact a:last-child{background:var(--green);color:var(--navy)}.m-mobile-contact svg{height:18px;width:18px}dialog{padding:34px 25px}dialog h2{font-size:1.7rem}}
@media(max-width:370px){.m-wrap{width:calc(100% - 32px)}.m-services-grid{grid-template-columns:1fr}.m-hero-actions{display:grid}.m-hero-actions .m-button{width:100%}.m-form-row{grid-template-columns:1fr;gap:0}.m-hero-checks{font-size:.625rem}.m-brand-name{font-size:.625rem}.m-contact-phone{font-size:1.65rem}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

/* assets/modele/experience.css */
:root{--navy:#082c50;--ink:#141414;--green:#2f892c;--deep-green:#2d842a;--muted:#677478;--pale:#f1f5f3;--line:#dce5e1;scroll-padding-top:100px}body{background:#fff}::selection{background:var(--green);color:var(--navy)}.m-wrap{width:min(1380px,calc(100% - 104px))}.m-topbar{background:#0659a7;border-bottom:1px solid #ffffff15}.m-topbar .m-wrap{height:35px;font-size:.75rem}.m-topbar .m-status-dot{box-shadow:0 0 9px #2f892c70}header{background:#fff;backdrop-filter:none}.m-nav{height:90px}.m-brand-name{font-size:.8rem;letter-spacing:-.2px}.m-brand-name small{font-size:.55rem}.m-nav nav{font-size:.8125rem;gap:31px}.m-button{border-radius:3px;min-height:58px;padding:17px 25px;letter-spacing:.1px;font-size:.875rem;gap:18px}.m-button:hover{transform:translateY(-3px)}.m-button svg{width:20px;height:20px}.m-nav-phone{border-radius:3px}.m-menu-toggle span{background:var(--navy)}.m-eyebrow{font-size:.75rem;letter-spacing:2.3px;font-weight:700}.m-section{padding:110px 0}h2{font-size:clamp(2.35rem,4.2vw,4.2rem);line-height:1.12;letter-spacing:-2.8px;font-weight:750}h3{letter-spacing:-.5px}em{color:var(--deep-green)}
/* The opening is a full-width photographic composition. */
.m-hero-cinematic{position:relative;background:var(--navy);isolation:isolate;overflow:visible;color:#fff;padding-bottom:0}.m-hero-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%;z-index:-3}.m-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,#041d35f5 0%,#041d35df 26%,#041d3580 54%,#041d350d 80%),linear-gradient(0deg,#041d35ed 0%,transparent 40%,#041d3530 100%);z-index:-2}.m-hero-stage{min-height:690px;position:relative;display:flex;align-items:center;padding-top:45px;padding-bottom:120px}.m-hero-copy{max-width:830px;position:relative;z-index:2}.m-hero-copy .m-eyebrow{color:#d1e0ed;letter-spacing:2.4px}.m-hero-copy .m-eyebrow>span{background:var(--green);width:26px}.m-hero-cinematic h1{font-size:clamp(4.5rem,7.7vw,7.4rem);line-height:1.01;letter-spacing:-6px;margin:30px 0;font-weight:750}.m-hero-cinematic h1 em{color:var(--green);font-style:italic;font-weight:500}.m-hero-cinematic .m-hero-copy>p:first-of-type{font-size:1.0625rem;font-weight:400;line-height:1.8;color:#e0e9e5}.m-hero-actions{display:flex;flex-wrap:nowrap;gap:12px;margin-top:34px}.m-hero-actions .m-button{padding:17px 24px;min-height:59px;font-size:.875rem;gap:16px}.m-hero-actions .m-green{font-size:1rem}.m-hero-actions .m-outline{border-color:#b8c5c55c;color:white;background:#ffffff07;backdrop-filter:blur(8px)}.m-hero-actions .m-outline:hover{background:#ffffff19}.m-hero-checks{font-size:.75rem;margin-top:23px;gap:24px;color:#d1deea}.m-hero-checks svg{color:var(--green)}.m-hero-side{position:absolute;right:0;bottom:160px;display:flex;align-items:flex-start;flex-direction:column;padding-left:22px;border-left:1px solid #ffffff55;text-shadow:0 2px 15px #0659a766}.m-hero-side>span{font-size:.75rem;letter-spacing:1.8px;font-weight:700}.m-hero-side>strong{font-family:Manrope,sans-serif;font-size:5rem;line-height:1.3;letter-spacing:-6px;font-weight:600}.m-hero-side>strong>span{color:var(--green);font-weight:400}.m-hero-scroll{position:absolute;bottom:34px;left:0;display:flex;align-items:center;gap:16px}.m-hero-scroll>span:first-child{font-size:.75rem;letter-spacing:2px;font-weight:600}.m-scroll-orbit{height:40px;width:40px;border:1px solid #ffffff66;border-radius:50%;display:grid;place-items:center;font-size:1.2rem}.m-hero-scroll:hover .m-scroll-orbit{background:var(--green);border-color:var(--green);color:var(--navy)}.m-hero-index{position:absolute;bottom:45px;right:0;display:flex;gap:30px;font-size:.75rem;letter-spacing:1.2px;color:#bbccdf}.m-hero-index>span:last-child{font-size:.75rem;letter-spacing:0}.m-hero-dock{display:grid;grid-template-columns:1fr 1.15fr 1fr;background:#0659a7e8;backdrop-filter:blur(18px);border:1px solid #ffffff24;color:#fff;position:relative;z-index:2;width:100%;padding:27px max(52px,calc((100% - 1380px)/2));gap:30px}.m-hero-dock>div,.m-hero-dock>a{display:flex;align-items:center;gap:16px}.m-hero-dock>div:not(:first-child),.m-hero-dock>a{border-left:1px solid #ffffff26;padding-left:30px}.m-hero-dock svg{color:var(--green);width:29px;height:29px;stroke-width:1.4}.m-hero-dock strong{display:block;font-size:.8125rem;font-weight:600}.m-hero-dock small{display:block;color:#c9dced;font-size:.75rem;margin-top:4px}.m-hero-dock>a>svg:last-child{margin-left:auto;width:21px;height:21px}.m-audience-strip{background:var(--green);color:var(--navy);padding:22px 0}.m-audience-strip .m-wrap{display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:.75rem;letter-spacing:2.4px;font-weight:800}.m-audience-strip i{font-style:normal;font-size:1rem;font-weight:400}
/* Image-led expertise cards. */
.m-services{background:#fff}.m-section-heading{margin-bottom:45px;gap:80px}.m-section-heading>p{max-width:330px;font-size:.9375rem;line-height:1.9;border-left:2px solid var(--green);padding:5px 0 5px 24px;margin-bottom:3px}.m-services-grid{gap:22px;grid-template-columns:repeat(3,1fr)}.m-service-card{border:0;border-radius:3px;position:relative;isolation:isolate;overflow:hidden;padding:26px;color:white;min-height:440px;transition:transform .35s}.m-service-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;transition:transform .7s}.m-service-shade{position:absolute;inset:0;background:linear-gradient(180deg,#06458220 5%,#06458200 25%,#031c36cd 63%,#031c36fa 100%);z-index:-2;transition:background .3s}.m-service-card:hover{border:0;box-shadow:none;transform:translateY(-5px)}.m-service-card:hover .m-service-photo{transform:scale(1.065)}.m-service-card:focus-visible{outline-offset:5px}.m-service-top{margin-bottom:auto;align-items:start;min-height:110px}.m-service-top>svg{background:#ffffffed;color:var(--navy);height:43px;width:43px;border-radius:50%;padding:11px;backdrop-filter:blur(10px)}.m-service-top>span{font-size:.75rem;color:#fff;border:1px solid #ffffff60;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;backdrop-filter:blur(8px)}.m-service-card h3{font-size:1.7rem;font-weight:650;line-height:1.15;letter-spacing:-.8px}.m-service-card p{color:#c7d6d9;font-size:.875rem;line-height:1.75;margin:15px 0 22px;max-width:300px}.m-service-link{border-top:1px solid #ffffff30;padding-top:17px;font-size:.75rem;letter-spacing:.25px;margin-top:0}.m-service-link svg{color:var(--green)}.m-service-card[data-service="2"] .m-service-photo{object-position:70%;filter:brightness(.7)}.m-service-card[data-service="5"] .m-service-photo{object-position:20%}.m-services-footnote{display:flex;justify-content:space-between;align-items:center;margin-top:25px;color:var(--muted);font-size:.8125rem}.m-services-footnote>span{font-weight:500}.m-services-footnote small{font-size:.75rem}.m-emergency{background:var(--green);color:var(--navy);padding:38px 0}.m-emergency .m-eyebrow{color:#ffffff}.m-emergency-symbol{color:var(--navy);border-color:#12382c50;height:67px;width:67px}.m-emergency h2{font-size:1.6rem;letter-spacing:-.7px;line-height:1.3}.m-emergency a{font-size:2.6rem;font-weight:650;letter-spacing:-1.5px}.m-emergency a svg{color:var(--navy);width:30px;height:30px}.m-emergency a small{color:#ffffff;margin-top:4px}
/* A photographic, editorial company introduction. */
.m-commitments{background:#f3f6f4}.m-commitments-grid{grid-template-columns:1fr 1fr;column-gap:80px;row-gap:32px;align-items:start}.m-commitment-visual{position:relative;grid-column:1;grid-row:1/3;min-height:730px;height:100%;overflow:hidden;border-radius:3px}.m-commitment-visual>img{height:100%;width:100%;object-fit:cover;position:absolute;object-position:58% center}.m-commitment-visual-shade{position:absolute;inset:0;background:linear-gradient(0deg,#064582de,transparent 55%)}.m-image-label{position:absolute;left:28px;top:29px;font-size:.75rem;letter-spacing:2px;font-weight:600;background:#fff;padding:10px 14px}.m-expertise-stamp{position:absolute;right:29px;bottom:75px;height:135px;width:135px;background:var(--green);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(8deg)}.m-expertise-stamp svg{height:24px;width:24px;margin-bottom:8px}.m-expertise-stamp span{font-size:.75rem;letter-spacing:1.5px;line-height:1.4}.m-expertise-stamp b{font-size:1.8rem;letter-spacing:-1px;font-family:Manrope,sans-serif}.m-equipment-caption{position:absolute;left:28px;bottom:30px;color:white;font-size:.75rem;letter-spacing:.5px}.m-commitment-title{grid-column:2}.m-commitment-title h2{font-size:3.05rem;letter-spacing:-1.8px}.m-commitment-title>p{font-size:.9375rem;line-height:1.85;max-width:100%;margin:22px 0}.m-commitment-title .m-text-link{border-bottom:1px solid #b8cbb6;padding-bottom:8px;margin-top:0}.m-commitment-list{grid-column:2}.m-commitment-list article{padding:21px 0;gap:22px}.m-commitment-list h3{font-size:1rem;letter-spacing:-.2px}.m-commitment-list p{font-size:.875rem;line-height:1.8;margin-top:8px}.m-commitment-list article>span{font-size:.75rem;margin-top:2px}.m-process{background:white;text-align:left}.m-process .m-eyebrow{justify-content:start}.m-process h2{font-size:3.3rem;max-width:950px}.m-process h2 em{color:#0659a7}.m-steps{margin-top:52px;gap:45px}.m-steps article>span{border-radius:0;background:none;color:#8fafa0;height:auto;width:auto;display:block;text-align:left;font-family:Manrope,sans-serif;font-size:3rem;font-weight:400;line-height:1}.m-steps article:last-child>span{background:none;color:var(--deep-green)}.m-steps article:not(:last-child):after{top:25px;left:65px;border-top:1px solid #d4dfd8;right:-15px}.m-steps h3{margin-top:25px;font-size:1.1rem}.m-steps p{font-size:.9375rem}
/* Interactive schematic coverage radar. It represents sectors, not live vehicles. */
.m-radar-section{background:#061c34;color:#fff;position:relative;overflow:hidden;padding:54px 0 74px}.m-radar-section:before{content:'';position:absolute;width:700px;height:700px;right:-100px;top:-40px;background:radial-gradient(circle,#0659a726,transparent 70%);pointer-events:none}.m-radar-topline{display:flex;justify-content:space-between;gap:20px;align-items:center;border-bottom:1px solid #ffffff1f;padding-bottom:24px;position:relative}.m-radar-topline>.m-eyebrow{color:#c6d9eb}.m-radar-topline>span:last-child{font-size:.75rem;letter-spacing:2px;color:#aec9e0}.m-zone-grid{grid-template-columns:.82fr 1.18fr;gap:70px;margin-top:43px;align-items:center}.m-radar-copy h2{font-size:3.5rem;letter-spacing:-2px;margin-top:0}.m-radar-copy h2 em{color:var(--green)}.m-zone-grid>div>p{font-size:.9375rem;color:#b6cbde;line-height:1.8;margin-top:24px}.m-radar-selection{margin-top:32px;border-left:2px solid var(--green);padding:3px 0 3px 22px}.m-selection-label{font-size:.75rem;letter-spacing:2px;color:#abc7df}.m-radar-selection>div{display:flex;align-items:center;gap:20px;margin:10px 0 13px}.m-radar-selection strong{font-family:Manrope,sans-serif;font-size:1.8rem;letter-spacing:-.7px;font-weight:600}.m-radar-selection>div>span{border:1px solid #3774af;color:var(--green);padding:4px 10px;border-radius:3px;font-size:.75rem}.m-radar-selection p{font-size:.875rem;color:#b7cce0;line-height:1.8;max-width:380px;min-height:72px}.m-radar-selection a{display:flex;align-items:center;gap:25px;margin-top:15px;font-weight:600;font-size:.8125rem;color:var(--green)}.m-radar-selection a svg{width:18px}.m-radar-tags{display:flex;gap:8px;margin-top:27px;flex-wrap:wrap}.m-radar-tags button{height:36px;width:36px;color:#b7cce0;font-size:.75rem;border:1px solid #315b82;background:transparent;border-radius:50%;transition:background .2s,color .2s}.m-radar-tags button.active,.m-radar-tags button:hover{background:var(--green);border-color:var(--green);color:var(--navy)}.m-zone-grid .m-radar-footnote{font-size:.75rem;margin-top:21px;max-width:360px;color:#a9c6df}.m-radar-visual{position:relative;min-width:0}.m-radar-canvas{width:100%;aspect-ratio:1;position:relative;border-radius:50%;isolation:isolate;background:radial-gradient(circle at center,#0659a745,#061c3400 70%);overflow:visible}.m-radar-grid{position:absolute;inset:0;border-radius:50%;overflow:hidden;background-image:linear-gradient(#327ac010 1px,transparent 1px),linear-gradient(90deg,#327ac010 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(circle,#000 40%,transparent 70%)}.m-radar-lines{position:absolute;inset:0;width:100%;height:100%;stroke:#327ac04d;stroke-width:.65;fill:none;stroke-dasharray:3 5}.m-radar-lines circle:nth-child(2),.m-radar-lines circle:nth-child(4){stroke-dasharray:none;stroke:#327ac066}.m-radar-lines>.m-radar-network{stroke:#3f8dd188;stroke-width:.9;stroke-dasharray:none}.m-radar-sweep{position:absolute;inset:1.8%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,transparent 250deg,#2f892c00 280deg,#2f892c2b 357deg,#56a54fa0 359deg,transparent 360deg);animation:m-radar-turn 14s linear infinite;z-index:0;pointer-events:none;mask-image:radial-gradient(circle,transparent 1%,#000 10%,#000 68%,transparent 71%)}.m-radar-canvas.paused .m-radar-sweep,.m-radar-canvas.paused .m-radar-core:before{animation-play-state:paused}.m-radar-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border:1px solid #2f892c77;border-radius:50%;background:#2f892c12;display:grid;place-items:center}.m-radar-core:before{content:'';position:absolute;inset:-10px;border:1px solid #2f892c33;border-radius:50%;animation:m-radar-pulse 4s ease-out infinite}.m-radar-core>span{position:absolute;top:-42px;color:var(--green);font-size:1.5rem;letter-spacing:-1px;font-style:italic;font-family:Manrope,sans-serif;font-weight:800}.m-radar-node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);border:0;padding:11px;background:transparent;color:#c8d8e7;display:flex;align-items:center;justify-content:center;width:42px;height:42px;z-index:3}.m-radar-node i{display:block;width:7px;height:7px;border-radius:50%;background:#8cab8f;border:1px solid #b4d4ab;box-shadow:0 0 0 4px #76a87615;flex-shrink:0;transition:box-shadow .3s,background .3s}.m-radar-node>span{position:absolute;top:33px;white-space:nowrap;font-size:.75rem;letter-spacing:1px;font-weight:600;line-height:1.3;text-shadow:0 2px 6px #061c34;background:#061c34b3;padding:3px 6px;border-radius:3px;display:flex;gap:6px;align-items:center}.m-radar-node>span>b{font-size:.75rem;color:#7aa389;font-weight:500}.m-radar-node.active i,.m-radar-node:hover i{background:var(--green);border-color:var(--green);box-shadow:0 0 0 5px #2f892c1c,0 0 20px #2f892c55}.m-radar-node.active>span,.m-radar-node:hover>span{color:var(--green)}.m-radar-node[data-sector="nanterre"]>span{right:33px;top:15px}.m-radar-node[data-sector="bobigny"]>span{left:29px;top:8px}.m-radar-node[data-sector="meaux"]>span{top:-15px}.m-radar-node[data-sector="paris"]>span{top:34px}.m-radar-north{position:absolute;top:-2px;left:50%;transform:translateX(-50%);font-size:.75rem;color:#b7c9bf}.m-radar-scale{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-size:.75rem;letter-spacing:2px;color:#abc5dc;white-space:nowrap}.m-radar-legend{display:flex;justify-content:space-between;align-items:center;padding:15px 20px 0;font-size:.75rem;color:#abc5dc}.m-radar-legend>span{display:flex;align-items:center;gap:9px}.m-radar-legend i{width:5px;height:5px;border-radius:50%;background:var(--green)}.m-radar-legend button{padding:6px 11px;border:1px solid #315b82;background:transparent;color:#abc5dc;border-radius:3px;font-size:.75rem}.m-zone-grid>.m-radar-visual>p{text-align:center;font-size:.75rem;color:#aac5dd;margin-top:16px}.m-radar-section :focus-visible{outline-color:var(--green)}@keyframes m-radar-turn{to{transform:rotate(360deg)}}@keyframes m-radar-pulse{0%{transform:scale(.8);opacity:.1}35%{opacity:.7}100%{transform:scale(1.7);opacity:0}}
/* The supporting flow keeps the same visual language. */
.m-faq{border-top:0;background:#f5f7f5}.m-faq-grid{grid-template-columns:.9fr 1.1fr;gap:90px}.m-faq h2{font-size:2.9rem;letter-spacing:-1.8px}.m-faq p{font-size:.9375rem}.m-faq summary{padding:25px 40px 25px 0;font-size:.9375rem}.m-faq summary:after{height:26px;width:26px;display:grid;place-items:center;border:1px solid #cbd7c8;border-radius:50%;font-size:1.2rem;top:24px;line-height:1}.m-faq details[open] summary:after{background:var(--navy);border-color:var(--navy);color:var(--green)}.m-contact{background:#fff;color:var(--navy)}.m-contact .m-eyebrow{color:var(--deep-green)}.m-contact em{color:var(--deep-green)}.m-contact-grid{gap:95px;grid-template-columns:1fr 1fr}.m-contact-copy h2{font-size:3.35rem;letter-spacing:-2px}.m-contact-copy>p{color:var(--muted);max-width:440px;font-size:.9375rem}.m-contact-phone{font-size:2.3rem;margin-top:30px;font-weight:650}.m-contact-phone svg{color:var(--deep-green)}.m-contact-phone small{color:#80928a}.m-contact-email{font-size:.9375rem;margin-top:20px}.m-contact-email svg,.m-contact-hours svg{color:var(--deep-green)}.m-contact-hours{color:var(--muted);margin-top:20px}.m-contact-visual{position:relative;margin-top:33px;height:210px;overflow:hidden;border-radius:3px;background:var(--navy)}.m-contact-visual img{width:100%;height:100%;object-fit:cover;object-position:center 35%;opacity:.7}.m-contact-visual:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#061c34b3,transparent)}.m-contact-visual>span{position:absolute;z-index:2;left:25px;top:25px;font-family:Manrope,sans-serif;color:white;font-size:1.15rem;font-weight:650;line-height:1.6;letter-spacing:-.5px}.m-contact-visual b{color:var(--green)}.m-brochure{margin-top:24px;border-color:#bdcdbf;font-size:.8125rem}form{background:#f1f5f1;border:1px solid #dce6dc;border-radius:3px;padding:39px;box-shadow:none}form h3{font-size:1.5rem;letter-spacing:-.8px}form>p{color:#7c8b80}form input,form select,form textarea{background:#fff;border:1px solid #d7e2d6;border-radius:3px;padding:12px;min-height:47px}.m-form-row{gap:16px}form label{font-size:.75rem;font-weight:600;margin-bottom:19px}form .m-consent{font-size:.75rem;font-weight:400}form .m-consent input{min-height:15px}form>.m-button{min-height:58px}form .m-form-note{font-size:.75rem;line-height:1.8}footer{background:#061c34;position:relative;overflow:hidden;padding-top:70px}footer:before{content:'CANA PRO SERVICES';font-family:Manrope,sans-serif;font-size:clamp(3rem,11.2vw,11rem);font-weight:800;letter-spacing:-.06em;line-height:1.2;color:#ffffff05;display:block;text-align:center;margin:-18px 0 25px;white-space:nowrap;pointer-events:none}.m-footer-main{padding-bottom:48px;position:relative}.m-footer-brand{font-size:1.1rem}.m-footer-bottom{border-color:#ffffff1f;padding-bottom:25px}.m-footer-main h3{font-size:.8125rem;color:#d3deea}.m-footer-main a:not(.m-footer-brand){color:#bdcede}.m-footer-main a:hover{color:var(--green)}.m-footer-bottom{color:#a4bdd3}.m-text-link{font-size:.8125rem}.m-mobile-contact a{border-radius:3px}dialog{border-radius:5px;padding:42px;max-width:650px}.m-dialog-photo{width:calc(100% + 84px);max-width:none;height:210px;object-fit:cover;margin:-42px -42px 30px}.m-dialog-close{background:white;border-radius:50%;z-index:1;width:37px;height:37px;right:17px;top:16px;font-size:1.8rem}.m-dialog-open .m-mobile-contact{z-index:20}.m-reveal-ready{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}.m-reveal-ready.m-in-view{opacity:1;transform:none}
@media(min-width:1550px){.m-hero-stage{min-height:790px}.m-hero-background{object-position:center 56%}.m-hero-side{bottom:175px}.m-hero-cinematic h1{font-size:8rem}.m-service-card{min-height:470px}}
@media(max-width:1250px){.m-wrap{width:calc(100% - 72px)}.m-brand-name{display:none}.m-nav nav{gap:26px}.m-hero-stage{min-height:670px;padding-bottom:120px}.m-hero-cinematic h1{font-size:6.2rem;letter-spacing:-5px}.m-hero-copy{max-width:690px}.m-hero-side{bottom:165px}.m-hero-side>strong{font-size:4rem}.m-hero-side>span:first-child{max-width:150px;line-height:1.7}.m-hero-dock{width:100%;padding:25px 36px;gap:23px}.m-hero-dock>div:not(:first-child),.m-hero-dock>a{padding-left:23px}.m-hero-dock strong{font-size:.75rem}.m-hero-dock small{font-size:.75rem}.m-hero-dock svg{width:25px;height:25px}.m-service-card{min-height:415px;padding:25px}.m-service-card h3{font-size:1.55rem}.m-commitments-grid{column-gap:60px}.m-commitment-title h2{font-size:2.8rem}.m-commitment-visual{min-height:730px}.m-zone-grid{gap:35px;grid-template-columns:.9fr 1.1fr}.m-radar-copy h2{font-size:3rem}.m-contact-grid{gap:65px}.m-contact-copy h2{font-size:2.9rem}.m-contact-phone{font-size:2rem}.m-contact form{padding:29px}.m-faq-grid{gap:65px}}
@media(max-width:1000px){.m-wrap{width:calc(100% - 56px)}.m-nav nav{gap:18px;font-size:.75rem}.m-nav{gap:15px;height:82px}.m-nav .m-button{padding:12px 15px}.m-hero-stage{min-height:635px;padding-top:35px}.m-hero-cinematic h1{font-size:5.35rem;letter-spacing:-4px}.m-hero-side{display:none}.m-hero-background{object-position:61% center}.m-hero-overlay{background:linear-gradient(90deg,#041d35f2,#041d35bb 44%,#041d3530),linear-gradient(0deg,#041d35da,transparent 40%)}.m-hero-index>span:first-child{display:none}.m-hero-dock{width:100%;padding:22px 28px;gap:18px}.m-hero-dock>div:not(:first-child),.m-hero-dock>a{padding-left:18px}.m-hero-dock svg{width:21px;height:21px}.m-hero-dock>div,.m-hero-dock>a{gap:12px}.m-hero-dock strong{font-size:.75rem}.m-hero-dock small{font-size:.75rem}.m-audience-strip{padding:18px 0}.m-audience-strip .m-wrap{font-size:.75rem;gap:15px;letter-spacing:1.4px}.m-section{padding:85px 0}.m-services-grid{gap:16px}.m-service-card{min-height:385px;padding:21px}.m-service-card h3{font-size:1.4rem}.m-service-card p{font-size:.8125rem;line-height:1.7}.m-service-top{min-height:85px}.m-service-top>svg{width:37px;height:37px;padding:9px}.m-service-top>span{width:28px;height:28px;font-size:.75rem}.m-section-heading{gap:40px}.m-section-heading>p{font-size:.875rem;max-width:290px}.m-emergency a{font-size:2.1rem}.m-emergency h2{font-size:1.4rem}.m-commitments-grid{column-gap:40px;row-gap:22px}.m-commitment-visual{min-height:820px}.m-commitment-title h2{font-size:2.5rem}.m-image-label{left:20px;top:20px;font-size:.75rem;padding:8px 10px;letter-spacing:1.5px}.m-expertise-stamp{right:22px;height:115px;width:115px}.m-commitment-list article{gap:15px;padding:18px 0}.m-process h2{font-size:2.8rem}.m-steps{gap:25px}.m-steps h3{font-size:1rem}.m-steps p{font-size:.875rem}.m-radar-section{padding:45px 0 60px}.m-zone-grid{gap:22px;grid-template-columns:.85fr 1.15fr}.m-radar-copy h2{font-size:2.5rem;letter-spacing:-1.5px}.m-radar-copy>p{font-size:.875rem}.m-radar-selection strong{font-size:1.5rem}.m-radar-selection{padding-left:18px}.m-radar-selection p{font-size:.8125rem}.m-radar-node>span{font-size:.75rem;letter-spacing:.5px;padding:3px}.m-radar-node>span>b{font-size:.75rem}.m-radar-node[data-sector="nanterre"]>span{right:24px;top:6px}.m-radar-core{width:46px;height:46px}.m-radar-core>span{top:-29px;font-size:1.2rem}.m-radar-scale{font-size:.75rem}.m-radar-legend{padding:15px 0 0;font-size:.75rem}.m-zone-grid>.m-radar-visual>p{font-size:.75rem}.m-radar-tags{gap:7px}.m-radar-tags button{height:31px;width:31px;font-size:.75rem}.m-faq h2{font-size:2.45rem}.m-faq-grid{gap:45px}.m-contact-grid{gap:40px;grid-template-columns:1fr 1.05fr}.m-contact-copy h2{font-size:2.55rem}.m-contact-phone{font-size:1.65rem}.m-contact-phone svg{width:23px}.m-contact-email{font-size:.8125rem}.m-contact form{padding:25px}.m-form-row{grid-template-columns:1fr;gap:0}.m-contact-visual{height:240px}}
@media(max-width:700px){:root{scroll-padding-top:87px}.m-wrap{width:calc(100% - 40px)}.m-topbar .m-wrap{height:31px;min-height:31px;font-size:.75rem}.m-nav{height:74px}.m-brand-name{display:block;font-size:.75rem}.m-brand-name small{font-size:.75rem;letter-spacing:2.3px}.m-brand{gap:8px}.m-logo-crop{height:39px;width:66px}.m-logo-crop img{top:-26px;width:93px}.m-nav nav{top:74px}.m-hero-stage{min-height:665px;padding-top:57px;padding-bottom:125px;align-items:flex-start}.m-hero-copy{width:100%}.m-hero-background{object-position:61% center}.m-hero-overlay{background:linear-gradient(90deg,#041d35da,#041d3580 60%,#041d3555),linear-gradient(0deg,#041d35ef 0%,#041d3522 55%,#041d3599 100%)}.m-hero-copy .m-eyebrow{font-size:.75rem;letter-spacing:1.8px;line-height:1.8}.m-hero-copy .m-eyebrow>span{width:17px}.m-hero-cinematic h1{font-size:clamp(3.1rem,12.2vw,5.1rem);letter-spacing:-2.8px;line-height:1.07;margin:27px 0}.m-hero-cinematic .m-hero-copy>p:first-of-type{font-size:.9375rem;line-height:1.75;max-width:350px}.m-hero-actions{flex-direction:column;align-items:stretch;gap:12px;margin-top:28px;max-width:360px}.m-hero-actions .m-button{min-height:54px;width:100%;padding:15px 20px;font-size:.8125rem;flex:initial;gap:15px;justify-content:center}.m-hero-actions .m-green{font-size:.9375rem}.m-hero-actions .m-green svg:last-child{margin-left:auto}.m-hero-actions .m-green svg:first-child{margin-right:auto}.m-hero-checks{gap:10px 17px;font-size:.75rem;line-height:1.6;margin-top:20px;max-width:340px}.m-hero-checks svg{height:12px;width:12px}.m-hero-scroll{bottom:35px;gap:14px}.m-hero-scroll>span:first-child{font-size:.75rem;letter-spacing:1.6px}.m-scroll-orbit{height:33px;width:33px;font-size:1rem}.m-hero-index{bottom:44px;font-size:.75rem}.m-hero-index>span:last-child{font-size:.75rem}.m-hero-dock{width:100%;padding:21px 20px;grid-template-columns:1fr 1fr;gap:18px 15px}.m-hero-dock>div,.m-hero-dock>a{gap:12px}.m-hero-dock>div:nth-child(2){display:none}.m-hero-dock>a{padding-left:16px}.m-hero-dock>a>svg:last-child{display:none}.m-hero-dock svg{height:23px;width:23px}.m-hero-dock strong{font-size:.75rem;line-height:1.6;max-width:145px}.m-hero-dock small{font-size:.75rem;line-height:1.6}.m-audience-strip{padding:16px 0;overflow:hidden}.m-audience-strip .m-wrap{width:calc(100% - 40px);gap:17px;font-size:.75rem;letter-spacing:1.2px;white-space:nowrap;justify-content:flex-start;flex-wrap:wrap;justify-content:center;row-gap:8px}.m-audience-strip i{font-size:.7rem}.m-audience-strip .m-wrap>span:last-child,.m-audience-strip .m-wrap>i:nth-last-child(2){display:none}.m-section{padding:65px 0}h2{font-size:2.5rem;letter-spacing:-1.7px;margin-top:17px}.m-section-heading{margin-bottom:31px}.m-section-heading>p{border:0;padding:0;max-width:100%;font-size:.9375rem;line-height:1.8;margin-top:20px}.m-services-grid{grid-template-columns:1fr 1fr;gap:13px}.m-service-card{min-height:350px;padding:18px 15px}.m-service-top{min-height:92px;margin-bottom:auto}.m-service-top>svg{height:32px;width:32px;padding:8px}.m-service-top>span{height:24px;width:24px;font-size:.75rem}.m-service-card h3{font-size:1.12rem;line-height:1.2;letter-spacing:-.4px}.m-service-card p{font-size:.75rem;line-height:1.7;margin:13px 0 16px}.m-service-link{font-size:.75rem;padding-top:13px;letter-spacing:0}.m-service-link svg{width:16px;height:16px}.m-service-photo{object-position:55% center}.m-services-footnote{align-items:start;gap:15px;margin-top:22px;flex-direction:column;gap:6px;font-size:.75rem}.m-services-footnote small{font-size:.75rem}.m-emergency{padding:29px 0}.m-emergency h2{font-size:1.4rem;letter-spacing:-.5px}.m-emergency .m-eyebrow{font-size:.75rem;letter-spacing:1.5px}.m-emergency a{font-size:2.2rem;margin-top:18px}.m-emergency a small{font-size:.75rem}.m-emergency a svg{height:27px;width:27px}.m-commitments-grid{grid-template-columns:1fr;gap:30px}.m-commitment-title{grid-column:1;grid-row:1}.m-commitment-title h2{font-size:2.65rem;letter-spacing:-1.6px}.m-commitment-title h2 br:nth-of-type(1){display:none}.m-commitment-title h2 br:nth-of-type(1):after{content:' '}.m-commitment-title>p{font-size:.9375rem;margin:21px 0}.m-commitment-visual{grid-column:1;grid-row:2;min-height:390px}.m-commitment-visual>img{object-position:center 62%}.m-commitment-list{grid-column:1;grid-row:3}.m-image-label{left:20px;top:20px;font-size:.75rem}.m-expertise-stamp{height:105px;width:105px;bottom:60px;right:20px}.m-expertise-stamp svg{height:20px;width:20px;margin-bottom:5px}.m-expertise-stamp span{font-size:.75rem}.m-expertise-stamp b{font-size:1.6rem}.m-equipment-caption{left:20px;bottom:23px;font-size:.75rem}.m-commitment-list article{padding:22px 0;gap:20px}.m-commitment-list h3{font-size:1.0625rem}.m-commitment-list p{font-size:.875rem}.m-process h2{font-size:2.25rem;letter-spacing:-1.3px}.m-steps{grid-template-columns:1fr 1fr;gap:35px 25px;margin-top:34px}.m-steps article>span{font-size:2.7rem}.m-steps article:not(:last-child):after{left:47px;top:22px;right:0}.m-steps article:nth-child(2):after{display:none}.m-steps h3{margin-top:20px;font-size:1rem}.m-steps p{font-size:.875rem;line-height:1.8}.m-radar-section{padding:35px 0 44px}.m-radar-topline{gap:15px;padding-bottom:19px}.m-radar-topline>.m-eyebrow{font-size:.75rem;letter-spacing:1.6px}.m-radar-topline>span:last-child{font-size:.75rem;letter-spacing:1px;max-width:100px;text-align:right}.m-zone-grid{grid-template-columns:1fr;gap:25px;margin-top:32px}.m-radar-copy h2{font-size:2.7rem;letter-spacing:-1.7px}.m-radar-copy>p{font-size:.9375rem;line-height:1.8;margin-top:20px}.m-radar-selection{margin-top:25px;padding-left:18px}.m-radar-selection strong{font-size:1.55rem}.m-radar-selection p{min-height:0;max-width:100%;font-size:.875rem}.m-radar-selection a{font-size:.8125rem;margin-top:14px}.m-radar-tags{gap:8px;margin-top:25px}.m-radar-tags button{height:34px;width:34px;font-size:.75rem}.m-zone-grid .m-radar-footnote{font-size:.75rem;max-width:100%;margin-top:19px}.m-radar-visual{margin:0 -8px}.m-radar-canvas{margin-top:10px}.m-radar-node>span{font-size:.75rem;letter-spacing:.3px;padding:3px 4px}.m-radar-node[data-sector="nanterre"]>span{top:3px;right:23px}.m-radar-node[data-sector="bobigny"]>span{left:23px;top:3px}.m-radar-node[data-sector="meaux"]>span{top:-13px;left:8px}.m-radar-node[data-sector="paris"]>span{top:29px}.m-radar-node[data-sector="evry"]>span{top:28px}.m-radar-core{height:42px;width:42px}.m-radar-core>span{font-size:1.3rem;top:-32px}.m-radar-legend{padding:12px 13px 0;font-size:.75rem}.m-zone-grid>.m-radar-visual>p{font-size:.75rem;margin-top:17px;padding:0 10px}.m-faq-grid{grid-template-columns:1fr;gap:26px}.m-faq h2{font-size:2.35rem}.m-faq summary{font-size:.875rem;padding:24px 39px 24px 0}.m-faq summary:after{top:23px}.m-contact-grid{grid-template-columns:1fr;gap:35px}.m-contact-copy h2{font-size:2.7rem;letter-spacing:-1.7px}.m-contact-copy>p{font-size:.9375rem;max-width:100%}.m-contact-phone{font-size:2rem;margin-top:28px;gap:16px}.m-contact-phone small{font-size:.75rem;letter-spacing:1.2px}.m-contact-email{font-size:.9375rem;gap:16px}.m-contact-hours{font-size:.75rem;gap:16px}.m-contact-visual{height:205px;margin-top:28px}.m-contact-visual>span{font-size:1.1rem}.m-contact form{padding:28px 21px}.m-form-row{grid-template-columns:1fr 1fr;gap:12px}form label{font-size:.75rem;margin-bottom:18px}form h3{font-size:1.4rem}form input,form select,form textarea{font-size:1rem;padding:11px;min-height:46px}form .m-consent{font-size:.75rem}form .m-form-note{font-size:.75rem}.m-contact form>.m-button{padding:15px 18px;gap:12px;font-size:.8125rem}.m-footer-main{grid-template-columns:1fr 1fr;gap:30px 20px}.m-footer-main>div:first-child{grid-column:1/-1}.m-footer-main>div:last-child{grid-column:1/-1}.m-footer-main>div>a:not(.m-footer-brand),.m-footer-main>div>span{font-size:.8125rem}footer{padding-top:35px;padding-bottom:65px}footer:before{font-size:11vw;margin:0 0 30px}.m-footer-brand{font-size:1.1rem}.m-footer-bottom{font-size:.75rem;gap:10px}.m-mobile-contact{padding:9px 12px calc(9px + env(safe-area-inset-bottom));gap:8px;background:#fff}.m-mobile-contact a{min-height:43px;font-size:.8125rem}.m-mobile-contact a:last-child{background:var(--green)}dialog{padding:30px 24px;width:calc(100% - 28px)}.m-dialog-photo{width:calc(100% + 48px);height:190px;margin:-30px -24px 26px}dialog h2{font-size:1.75rem;letter-spacing:-1px}dialog p,dialog li{font-size:.9375rem}.m-reveal-ready{transform:translateY(15px)}}
@media(max-width:380px){.m-wrap{width:calc(100% - 34px)}.m-hero-cinematic h1{font-size:3.1rem;letter-spacing:-2.2px}.m-hero-stage{min-height:665px}.m-hero-dock{width:100%;padding:18px 17px}.m-hero-dock>div,.m-hero-dock>a{gap:9px}.m-hero-dock>a{padding-left:12px}.m-hero-dock strong{font-size:.75rem}.m-hero-index{bottom:18px}.m-hero-index>span:last-child{font-size:.75rem}.m-service-card{min-height:350px;padding:16px 13px}.m-service-card h3{font-size:1.03rem}.m-service-card p{font-size:.75rem}.m-services-grid{gap:11px}.m-form-row{grid-template-columns:1fr;gap:0}.m-radar-tags{gap:7px}.m-radar-tags button{height:31px;width:31px}.m-radar-node>span{font-size:.75rem}.m-radar-node>span>b{font-size:.75rem}.m-radar-node[data-sector="nanterre"]>span{right:20px}.m-contact-phone{font-size:1.8rem}}
@media(prefers-reduced-motion:reduce){.m-radar-sweep,.m-radar-core:before{animation:none}.m-reveal-ready{opacity:1;transform:none}.m-service-photo{transition:none}.m-radar-sweep{transform:rotate(35deg)}}

@media(max-width:700px){.m-hero-copy .m-eyebrow{letter-spacing:1px}.m-hero-index{bottom:17px}.m-hero-scroll>span:first-child{font-size:.75rem;letter-spacing:1px}.m-radar-topline{flex-wrap:wrap}.m-radar-topline>span:last-child{max-width:none}.m-radar-node>span{font-size:.75rem;letter-spacing:0}.m-radar-node>span>b{font-size:.75rem}.m-radar-node[data-sector="meaux"]>span{left:auto;right:-8px}.m-radar-legend{font-size:.75rem}.m-hero-dock{grid-template-columns:1fr}.m-hero-dock>a{border-left:0;border-top:1px solid #ffffff26;padding:15px 0 0}.m-hero-dock strong{max-width:none}.m-hero-dock>a>svg:last-child{display:block}.m-commitment-title h2 br:nth-of-type(1){display:initial}.m-radar-node{width:44px;height:44px}}

/* assets/modele/brand.css */
:root{--brand-blue:#0659a7;--brand-green:#2f892c;--brand-black:#141414;--navy:#082c50;--ink:var(--brand-black);--green:var(--brand-green);--deep-green:#2d842a;--muted:#64717b;--line:#dde4e9;--pale:#f4f7fa}
::selection{background:var(--brand-blue);color:white}.m-brand-name{color:var(--brand-black)}.m-brand-name b{color:var(--brand-green)}.m-brand-services{color:var(--brand-blue)}.m-brand-name small{color:var(--brand-blue)}.m-brand-name .m-brand-services{display:inline;font-size:inherit;letter-spacing:inherit}.m-topbar{background:var(--brand-blue);border:0}.m-topbar .m-status-dot{background:white;box-shadow:none}.m-topbar svg{color:white}.m-navy,.m-nav .m-nav-phone{background:var(--brand-blue);color:white}.m-navy:hover,.m-nav .m-nav-phone:hover{background:#044a8d}.m-green{background:#2d842a;color:white}.m-green:hover{background:#246e22;color:white}.m-hero-actions .m-green{color:white}.m-hero-cinematic h1 em{color:var(--brand-green);font-weight:600;text-shadow:0 2px 15px #0007}.m-hero-overlay{background:linear-gradient(90deg,#041b35f5 0%,#041b35e6 28%,#041b3590 54%,#041b350d 80%),linear-gradient(0deg,#041b35eb 0%,transparent 40%,#041b3530 100%)}.m-hero-dock{background:#0659a7ed;border-color:#ffffff30}.m-hero-dock svg{color:white}.m-hero-dock small{color:#d1e2f2}.m-hero-copy .m-eyebrow>span{background:var(--brand-green)}.m-hero-checks svg{color:white}.m-hero-side>strong>span{color:var(--brand-green)}.m-hero-scroll:hover .m-scroll-orbit{background:var(--brand-blue);border-color:var(--brand-blue);color:white}.m-audience-strip{background:#fff;color:var(--brand-black);border-bottom:1px solid var(--line)}.m-audience-strip i{color:var(--brand-green)}.m-section-heading h2{color:var(--brand-black)}.m-section-heading h2 em{color:var(--brand-blue)}.m-section-heading>p{border-color:var(--brand-green)}.m-service-top>svg{color:var(--brand-blue)}.m-service-link svg{color:white;background:#2d842a;width:27px;height:27px;padding:5px;border-radius:50%}.m-emergency{background:var(--brand-blue);color:#fff}.m-emergency .m-eyebrow,.m-emergency a small{color:#d8e8f7}.m-emergency-symbol{color:white;border-color:#ffffff55}.m-emergency a svg{color:white}.m-commitments{background:#f4f7fa}.m-commitment-title h2{color:var(--brand-black)}.m-commitment-title h2 em{color:var(--brand-blue)}.m-commitment-title .m-text-link{border-color:#bed0df}.m-expertise-stamp{background:var(--brand-green);color:white}.m-commitment-list article>span{color:var(--brand-green)}.m-process h2 em{color:var(--brand-blue)}.m-steps article>span{color:var(--brand-blue)}.m-steps article:last-child>span{color:var(--brand-green)}.m-steps article:not(:last-child):after{border-color:#cbd6df}.m-radar-section{background:#061c34}.m-radar-copy h2 em{color:white}.m-radar-selection{border-color:var(--brand-green)}.m-radar-selection>div>span{background:var(--brand-blue);color:white;border-color:var(--brand-blue)}.m-radar-selection a{color:#fff}.m-radar-selection a svg{color:var(--brand-green);width:23px;height:23px}.m-radar-tags button.active,.m-radar-tags button:hover{background:var(--brand-blue);border-color:#4a8bc6;color:#fff}.m-radar-tags button{border-color:#3c6489;color:#c5d8e8}.m-radar-canvas{background:radial-gradient(circle at center,#0659a733,#061c3400 70%)}.m-radar-core{background:#0659a72b;border-color:#337bc080}.m-radar-core>span{color:#fff}.m-radar-core:before{border-color:#2f892c88}.m-radar-node i{background:#2f892c;border-color:#6baa61;box-shadow:0 0 0 4px #2f892c25}.m-radar-node.active i,.m-radar-node:hover i{background:white;border-color:#fff;box-shadow:0 0 0 5px #2f892c66,0 0 20px #2f892caa}.m-radar-node>span{color:#d9e5ef;background:#061c34cc}.m-radar-node>span>b{color:#a9c7e0}.m-radar-node.active>span,.m-radar-node:hover>span{color:white;background:var(--brand-blue)}.m-radar-node.active>span>b{color:white}.m-radar-sweep{background:conic-gradient(from 0deg,transparent 0deg,transparent 250deg,#2f892c00 280deg,#2f892c40 357deg,#2f892cc0 359deg,transparent 360deg)}.m-radar-scale,.m-radar-north{color:#a8c4dc}.m-radar-legend i{background:var(--brand-green)}.m-radar-legend button{border-color:#4c7294;color:#d2e0ec}.m-radar-section :focus-visible{outline-color:#fff}.m-faq{background:#f4f7fa}.m-faq h2 em{color:var(--brand-blue)}.m-faq summary:after{border-color:#c7d5e2;color:var(--brand-blue)}.m-faq details[open] summary:after{background:var(--brand-blue);border-color:var(--brand-blue);color:white}.m-contact-copy h2 em{color:var(--brand-blue)}.m-contact-phone{color:var(--brand-blue)}.m-contact-phone svg,.m-contact-email svg,.m-contact-hours svg{color:var(--brand-green)}.m-contact-visual b{color:white}.m-contact-visual>span{border-left:3px solid var(--brand-green);padding-left:15px}.m-contact form{background:#f3f7fa;border-color:#dbe5ed}.m-contact input,.m-contact select,.m-contact textarea{border-color:#cad8e3}input:focus,select:focus,textarea:focus{outline-color:var(--brand-blue)}.m-contact .m-consent input{accent-color:var(--brand-green)}.m-contact form>.m-button{background:var(--brand-blue);color:white}.m-contact form>.m-button:hover{background:#044a8d}footer{background:#101820}.m-footer-brand span{color:var(--brand-green)}.m-footer-brand .m-brand-services{color:#3a82c5}.m-footer-main a:hover,.m-footer-bottom a:hover{color:white}.m-mobile-contact a{background:var(--brand-blue);color:white}.m-mobile-contact a:last-child{background:#2d842a;color:white}.m-dialog-close{color:var(--brand-blue)}dialog h2{color:var(--brand-black)}dialog .m-eyebrow{color:var(--brand-blue)}.m-text-link svg{color:var(--brand-green)}
@media(max-width:1000px){.m-hero-overlay{background:linear-gradient(90deg,#041b35f2,#041b35c4 44%,#041b3530),linear-gradient(0deg,#041b35da,transparent 40%)}}
@media(max-width:700px){.m-hero-overlay{background:linear-gradient(90deg,#041b35e6,#041b35a1 60%,#041b356b),linear-gradient(0deg,#041b35ef 0%,#041b3533 55%,#041b3599 100%)}.m-hero-cinematic h1 em{color:var(--brand-green);font-weight:650}.m-mobile-contact a:last-child{background:#2d842a;color:white}.m-radar-node.active>span{color:#fff}.m-audience-strip{border-bottom:1px solid #dde4e9}}

/* assets/modele/hero.css */
header .m-nav{height:108px}header .m-brand-name{display:none!important}header .m-logo-crop{width:168px;height:90px}header .m-logo-crop img{width:227px;left:-30px;top:-67px;max-width:none}.m-nav nav{font-size:.875rem;gap:34px}.m-nav .m-nav-phone{background:var(--brand-blue);padding:14px 23px}.m-hero-light{color:var(--brand-black);background:#fff;position:relative;isolation:isolate;overflow:hidden}.m-hero-light:before{content:'';position:absolute;z-index:-1;inset:0 0 0 46%;background:linear-gradient(135deg,#f2f7fc,#e9f2fa);clip-path:polygon(16% 0,100% 0,100% 100%,0 100%)}.m-hero-light-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:55px;align-items:center;padding-top:47px;padding-bottom:64px;min-height:640px}.m-hero-light-copy{padding:12px 0}.m-hero-light .m-eyebrow{font-size:.75rem;color:#667786;letter-spacing:1.6px}.m-hero-light .m-eyebrow>span{background:var(--brand-green);width:25px;height:3px}.m-hero-light h1{font-size:clamp(3.5rem,5.1vw,5.2rem);letter-spacing:-3.8px;line-height:1.06;margin:24px 0 23px;font-weight:750;color:var(--brand-black)}.m-hero-light h1 em{color:var(--brand-blue);font-weight:750;font-style:normal;position:relative}.m-hero-light h1 em:after{content:'';position:absolute;height:5px;left:2px;right:6px;bottom:-5px;background:var(--brand-green)}.m-hero-signature{font-size:1.0625rem;font-weight:500;color:#353f45}.m-hero-signature strong{color:var(--deep-green);font-weight:600}.m-hero-description{font-size:.9375rem;line-height:1.9;max-width:410px;color:#647482;margin-top:16px}.m-hero-light .m-hero-actions{margin-top:29px;gap:12px;flex-wrap:wrap;max-width:none}.m-hero-light .m-hero-actions .m-button{min-height:56px;padding:16px 23px;gap:14px;font-size:.875rem}.m-hero-light .m-hero-actions .m-green{font-size:1rem;background:#2d842a;color:white}.m-hero-light .m-hero-actions .m-outline{background:white;color:var(--brand-blue);border-color:#b8cde1;backdrop-filter:none}.m-hero-light .m-hero-actions .m-outline:hover{border-color:var(--brand-blue);background:#f0f6fc}.m-hero-light .m-hero-checks{color:#6f7b84;font-size:.75rem;margin-top:20px;gap:23px;max-width:none}.m-hero-light .m-hero-checks svg{color:var(--brand-green)}.m-hero-light-media{position:relative;min-width:0;margin:15px 0 0;padding-bottom:30px}.m-vehicle-frame{height:430px;overflow:hidden;border-radius:16px 16px 0 0;background:#e7eef4}.m-vehicle-frame>img{height:100%;width:100%;object-fit:cover;object-position:center}.m-vehicle-caption{display:flex;align-items:center;gap:16px;padding:22px;background:var(--brand-blue);color:white;border-radius:0 0 16px 16px}.m-vehicle-caption-icon{height:41px;width:41px;border:1px solid #ffffff66;border-radius:50%;display:grid;place-items:center;flex-shrink:0}.m-vehicle-caption-icon>svg{width:22px;height:22px}.m-vehicle-caption>span:nth-child(2){display:block}.m-vehicle-caption strong{font-family:Manrope,sans-serif;letter-spacing:1px;font-size:.75rem;display:block;font-weight:700}.m-vehicle-caption small{font-size:.75rem;margin-top:5px;display:block;color:#d1e1f0}.m-vehicle-caption>svg{margin-left:auto;width:24px;height:24px}.m-hero-image-note{position:absolute;bottom:5px;right:4px;font-size:.75rem;color:#73889a}.m-availability-pill{position:absolute;right:22px;top:22px;display:flex;align-items:center;gap:11px;background:#fff;padding:13px 18px;border-radius:8px;box-shadow:0 5px 22px #0a376526;border:1px solid #e5ecf1}.m-availability-pill>svg{width:28px;height:28px;color:var(--brand-green)}.m-availability-pill b{font-family:Manrope,sans-serif;color:var(--brand-blue);font-size:1.375rem;line-height:1.3;letter-spacing:-.6px;display:block}.m-availability-pill small{font-size:.625rem;color:#647788;letter-spacing:1px;display:block}.m-hero-light-bottom{padding:25px 0;display:flex;gap:35px;align-items:center;border-top:1px solid #d8e4ee;font-size:.75rem;letter-spacing:1.3px;font-weight:600;color:#526778}.m-hero-light-bottom>i{width:4px;height:4px;background:var(--brand-green);border-radius:50%}.m-hero-light-bottom>a{margin-left:auto;display:flex;align-items:center;gap:18px;letter-spacing:0;color:var(--brand-blue);font-size:.875rem}.m-hero-light-bottom>a>svg{width:18px;height:18px}.m-commitment-visual>img{object-position:44% center}.m-radar-node>span{font-size:.75rem}.m-hero-light .m-hero-actions .m-green:hover{background:#247022}
@media(min-width:1600px){.m-vehicle-frame{height:480px}.m-hero-light-grid{gap:65px;min-height:690px}}
@media(max-width:1200px){header .m-nav{height:99px}.m-nav nav{font-size:.8125rem;gap:25px}header .m-logo-crop{width:151px;height:81px}header .m-logo-crop img{width:204px;left:-27px;top:-60px}.m-hero-light-grid{gap:40px;grid-template-columns:.9fr 1.1fr;min-height:620px;padding-top:40px;padding-bottom:45px}.m-hero-light h1{font-size:4.1rem;letter-spacing:-2.7px}.m-vehicle-frame{height:410px}.m-hero-light .m-hero-actions .m-button{padding:15px 17px;font-size:.8125rem;gap:10px}.m-hero-light .m-hero-actions .m-green{font-size:.875rem}.m-hero-light-bottom{gap:25px;font-size:.6875rem}.m-vehicle-caption{padding:19px;gap:13px}.m-vehicle-caption small{font-size:.75rem}.m-availability-pill{padding:12px 15px;right:18px;top:18px}}
@media(max-width:950px){.m-nav nav{gap:18px;font-size:.75rem}header .m-logo-crop{width:125px;height:70px}header .m-logo-crop img{width:174px;left:-23px;top:-51px}.m-nav .m-nav-phone{padding:12px 14px}.m-hero-light-grid{gap:28px;min-height:580px;grid-template-columns:.9fr 1.1fr;padding-top:30px;padding-bottom:36px}.m-hero-light h1{font-size:3.6rem;letter-spacing:-2.5px}.m-hero-light .m-eyebrow{font-size:.625rem;letter-spacing:1px}.m-hero-signature{font-size:.9375rem}.m-hero-description{font-size:.875rem;line-height:1.85}.m-hero-light .m-hero-actions{gap:10px}.m-hero-light .m-hero-actions .m-button{padding:14px 18px}.m-vehicle-frame{height:385px}.m-vehicle-caption>svg{display:none}.m-vehicle-caption{padding:17px 14px;gap:10px}.m-vehicle-caption-icon{width:34px;height:34px}.m-vehicle-caption strong{font-size:.6875rem;letter-spacing:.5px}.m-vehicle-caption small{font-size:.6875rem}.m-availability-pill{padding:10px 13px;gap:8px;top:15px;right:15px}.m-availability-pill>svg{width:22px;height:22px}.m-availability-pill b{font-size:1.2rem}.m-availability-pill small{font-size:.625rem}.m-hero-light-bottom{gap:18px;font-size:.625rem;letter-spacing:1px}.m-hero-light-bottom>a{font-size:.75rem;gap:10px}}
@media(max-width:700px){header .m-nav{height:84px}header .m-logo-crop{width:130px;height:72px}header .m-logo-crop img{width:180px;left:-24px;top:-53px}.m-nav nav{top:84px}.m-hero-light:before{inset:48% 0 0 0;background:#f0f6fc;clip-path:polygon(0 12%,100% 0,100% 100%,0 100%)}.m-hero-light-grid{grid-template-columns:1fr;gap:21px;padding-top:32px;padding-bottom:26px;min-height:0}.m-hero-light-copy{padding:0}.m-hero-light .m-eyebrow{font-size:.6875rem;letter-spacing:.8px;gap:9px}.m-hero-light .m-eyebrow>span{width:18px}.m-hero-light h1{font-size:clamp(2.8rem,10.7vw,4.3rem);letter-spacing:-2px;line-height:1.08;margin:23px 0}.m-hero-light h1 br:nth-of-type(2){display:none}.m-hero-light h1 em:after{height:3px;bottom:-4px}.m-hero-signature{font-size:1rem}.m-hero-description{font-size:.9375rem;line-height:1.8;max-width:100%;margin-top:15px}.m-hero-light .m-hero-actions{display:flex;flex-direction:row;gap:10px;margin-top:24px;width:100%}.m-hero-light .m-hero-actions .m-button{width:auto;flex:1;min-height:53px;font-size:.8125rem;padding:14px 13px;gap:9px;white-space:nowrap}.m-hero-light .m-hero-actions .m-green{font-size:.8125rem}.m-hero-light .m-hero-actions .m-green svg{margin:0}.m-hero-light .m-hero-checks{font-size:.75rem;gap:20px;margin-top:18px}.m-hero-light-media{margin:5px 0 0;padding-bottom:27px}.m-vehicle-frame{height:280px;border-radius:12px 12px 0 0}.m-vehicle-frame>img{object-position:center}.m-vehicle-caption{border-radius:0 0 12px 12px;padding:17px 15px;gap:12px}.m-vehicle-caption strong{font-size:.75rem;letter-spacing:.5px}.m-vehicle-caption small{font-size:.6875rem}.m-availability-pill{top:13px;right:13px;gap:8px;padding:9px 12px;border-radius:5px}.m-availability-pill b{font-size:1.1rem}.m-availability-pill small{font-size:.625rem}.m-availability-pill>svg{width:20px;height:20px}.m-hero-image-note{font-size:.6875rem;bottom:4px;right:1px}.m-hero-light-bottom{padding:21px 0;flex-wrap:wrap;justify-content:space-between;gap:15px 10px;letter-spacing:.6px;font-size:.625rem}.m-hero-light-bottom>a{display:none}.m-hero-light-bottom>i{width:3px;height:3px}.m-hero-light .m-hero-actions .m-outline{background:#fff}}
@media(max-width:380px){.m-hero-light h1{font-size:2.75rem;letter-spacing:-1.8px}.m-hero-light .m-hero-actions .m-button{font-size:.75rem;padding:13px 10px;gap:7px}.m-hero-light .m-hero-actions svg{width:16px;height:16px}.m-hero-light .m-hero-actions .m-green{font-size:.75rem}.m-hero-light .m-hero-checks{gap:17px;font-size:.6875rem}.m-vehicle-frame{height:260px}}

/* assets/modele/reviews.css */
.m-reviews{background:#f1f6fb;padding:94px 0;position:relative;overflow:hidden}.m-reviews-layout{display:grid;grid-template-columns:.74fr 2fr;gap:65px;align-items:center}.m-reviews-intro .m-eyebrow{color:var(--brand-blue);font-size:.75rem;letter-spacing:2px}.m-reviews-intro h2{font-size:2.8rem;line-height:1.14;letter-spacing:-1.7px;margin-top:21px;color:#141414}.m-reviews-intro h2 em{color:var(--brand-blue)}.m-reviews-signature{display:flex;gap:16px;align-items:center;margin-top:25px}.m-reviews-signature-line{display:block;background:var(--brand-green);height:40px;width:3px}.m-reviews-signature p{font-size:.9375rem;line-height:1.8;color:#6f8293}.m-review-total{display:flex;gap:15px;align-items:baseline;margin-top:32px}.m-review-total strong{font-family:Manrope,sans-serif;font-size:2.7rem;line-height:1;letter-spacing:-2px;color:var(--brand-blue);font-weight:650}.m-review-total span{font-size:.8125rem;color:#758a9b}.m-reviews-carousel{min-width:0}.m-reviews-grid{display:grid;grid-template-columns:1fr 1fr;gap:23px;touch-action:pan-y}.m-review-card{position:relative;border:1px solid #e0eaf3;border-radius:17px;padding:31px 28px 27px;background:white;box-shadow:0 10px 30px #0b427408;min-height:340px;display:flex;flex-direction:column;animation:m-review-arrive .3s ease both;animation-delay:var(--review-delay,0ms)}.m-review-author{display:flex;align-items:center;gap:13px;position:relative;z-index:1}.m-review-avatar{position:relative;overflow:hidden;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#e9f2fb;color:var(--brand-blue);font-size:.875rem;font-weight:650;flex-shrink:0}.m-review-card:nth-child(2n) .m-review-avatar{background:#eef5eb;color:var(--deep-green)}.m-review-author strong{display:block;font-size:.9375rem;font-weight:650;color:#1e3548}.m-review-author small{display:block;font-size:.75rem;color:#8294a3;margin-top:3px}.m-review-quote-mark{position:absolute;right:25px;top:10px;line-height:1;font-family:Georgia,serif;font-size:5.5rem;color:#eaf2f9;pointer-events:none}.m-review-stars{margin-top:24px;color:var(--brand-green);font-size:1.1875rem;letter-spacing:4px;line-height:1}.m-review-card blockquote{margin:19px 0 27px;font-size:1rem;line-height:1.85;color:#43596c;flex:1}.m-review-service{display:flex;gap:8px;align-items:center;font-size:.75rem;color:var(--brand-blue);padding-top:17px;border-top:1px solid #edf2f7;font-weight:500}.m-review-service i{width:5px;height:5px;border-radius:50%;background:var(--brand-green)}.m-reviews-controls{display:flex;gap:23px;align-items:center;margin-top:25px}.m-review-filter-label{margin:0;flex:1;min-width:0}.m-review-filter-label select{margin:0;width:100%;max-width:250px;font-size:.8125rem;border:none;background:transparent;padding:10px 26px 10px 0;color:#587389;cursor:pointer;min-height:42px}.m-reviews-position{display:flex;gap:15px;align-items:center;color:#8a9bac;font-size:.75rem;white-space:nowrap}.m-reviews-progress{width:75px;height:2px;background:#dbe6ef;overflow:hidden}.m-reviews-progress>span{display:block;height:100%;background:var(--brand-blue);transition:width .2s;min-width:5px}.m-reviews-arrows{display:flex;gap:10px}.m-reviews-arrows button{display:grid;place-items:center;width:45px;height:45px;border:1px solid #ccdce9;background:white;color:var(--brand-blue);border-radius:50%;padding:0;transition:background .2s,color .2s,border-color .2s}.m-reviews-arrows button svg{width:19px;height:19px}.m-reviews-arrows button:first-child svg{transform:rotate(180deg)}.m-reviews-arrows button:last-child{background:var(--brand-blue);color:white;border-color:var(--brand-blue)}.m-reviews-arrows button:hover:enabled{background:#2d842a;border-color:#2d842a;color:white}.m-reviews-arrows button:disabled{opacity:.3;cursor:default}.m-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}.m-nav nav{gap:23px;font-size:.8125rem}@keyframes m-review-arrive{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:none}}@media(max-width:1200px){.m-reviews-layout{gap:40px;grid-template-columns:.7fr 2fr}.m-reviews-intro h2{font-size:2.4rem}.m-review-card{padding:27px 22px;min-height:365px}.m-review-card blockquote{font-size:.9375rem}.m-reviews-grid{gap:17px}.m-reviews-controls{gap:15px}.m-reviews-progress{width:45px}.m-nav nav{gap:17px;font-size:.75rem}}@media(min-width:701px) and (max-width:1000px){.m-nav nav{display:none;position:absolute;top:99px;left:0;right:0;background:#fff;padding:18px 28px;box-shadow:0 12px 20px #082c5014}.m-nav nav.open{display:flex;flex-direction:column;align-items:stretch;font-size:.9375rem;gap:4px}.m-menu-toggle{display:flex;flex-direction:column;gap:6px;justify-content:center;width:40px;height:40px}.m-menu-toggle span{height:2px;width:23px;background:var(--brand-blue)}.m-menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}.m-menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}.m-nav-phone{margin-left:auto}.m-reviews-layout{grid-template-columns:1fr;gap:30px}.m-reviews-intro{display:grid;grid-template-columns:1fr 1fr;align-items:center}.m-reviews-intro>.m-eyebrow{grid-column:1/-1}.m-reviews-signature{display:none}.m-review-total{grid-column:2;grid-row:2;justify-self:end}.m-reviews-intro h2{grid-column:1;grid-row:2}.m-review-card{min-height:320px}}@media(max-width:700px){.m-reviews{padding:60px 0}.m-reviews-layout{grid-template-columns:1fr;gap:28px}.m-reviews-intro{display:grid;grid-template-columns:1fr auto;gap:0 15px;align-items:end}.m-reviews-intro>.m-eyebrow{grid-column:1/-1}.m-reviews-intro h2{font-size:2.15rem;letter-spacing:-1.2px;line-height:1.15;margin-top:18px;grid-column:1;grid-row:2}.m-reviews-signature{display:none}.m-review-total{grid-column:2;grid-row:2;margin:0 0 3px;gap:7px;align-items:start;flex-direction:column}.m-review-total strong{font-size:2.1rem;letter-spacing:-1.3px}.m-review-total span{font-size:.625rem;max-width:67px;line-height:1.5}.m-reviews-grid{grid-template-columns:1fr}.m-review-card{padding:27px 24px;min-height:330px;border-radius:15px;box-shadow:0 8px 24px #0b427408}.m-review-author strong{font-size:.9375rem}.m-review-card blockquote{font-size:1rem;line-height:1.8}.m-review-stars{margin-top:25px}.m-review-service{font-size:.75rem}.m-reviews-controls{gap:10px;margin-top:20px;flex-wrap:wrap}.m-review-filter-label{width:100%;flex:initial}.m-review-filter-label select{max-width:100%;font-size:.875rem;border-bottom:1px solid #d9e6f1;padding:8px 25px 11px 0}.m-reviews-position{margin-right:auto;gap:12px;font-size:.75rem}.m-reviews-progress{width:65px}.m-reviews-arrows button{height:43px;width:43px}.m-reviews-arrows{gap:9px}.m-nav nav{font-size:.9375rem}}@media(prefers-reduced-motion:reduce){.m-review-card{animation:none}.m-reviews-progress>span{transition:none}}
.m-review-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}


/* ------------------------------------------------------------------ portraits
   Les avis portent un visage dessine plutot que deux initiales : la carte se
   lit comme un temoignage, pas comme une ligne de tableau. */
.m-review-avatar--visage {
  padding: 0;
  overflow: hidden;
  background: none;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 10px rgba(6, 89, 167, 0.16);
}
.m-review-avatar--visage .cps-visage {
  display: block;
  width: 100%;
  height: 100%;
}

/* une photographie occupe tout le jeton, recadree au centre */
.m-review-avatar--visage img.cps-visage {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* assets/modele/finish.css */
.m-footer-social{margin:23px 0 22px}.m-footer-columns .m-footer-social h3{margin:0 0 12px;font-size:.8125rem;font-weight:500;color:#dce7f1}.m-social-links{display:flex;gap:9px;align-items:stretch}.m-social-link{display:flex;flex:1;min-width:0;max-width:85px;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:73px;padding:11px 6px;border:1px solid #41617d;border-radius:7px;background:#ffffff05;color:#d8e8f5;font-size:.6875rem;line-height:1.3;transition:border-color .2s,background .2s,transform .2s}.m-social-link svg{width:21px;height:21px;fill:currentColor;stroke:none}.m-social-link .m-instagram-icon{fill:none;stroke:currentColor;stroke-width:1.8}.m-social-link .m-instagram-dot{fill:currentColor;stroke:none}.m-social-link[href]:hover{background:var(--brand-blue);border-color:#519bdc;color:white;transform:translateY(-2px)}.m-social-link[aria-disabled=true]{cursor:default}.m-social-status{margin:10px 0 0;font-size:.6875rem;line-height:1.6;color:#8facbf}.m-social-link:focus-visible{outline:2px solid white;outline-offset:4px}@media(max-width:700px){.m-footer-social{grid-column:1/-1;margin:3px 0 6px}.m-social-links{gap:10px}.m-social-link{flex:initial;min-width:87px;max-width:none;min-height:76px;font-size:.75rem;padding:12px 10px}.m-social-status{font-size:.75rem}}
/* One clear action, grouped beneath the description, on every service card. */
.m-services-grid .m-service-card{border-radius:12px;padding-bottom:28px}.m-services-grid .m-service-card .m-service-link{display:inline-flex;align-items:center;justify-content:flex-start;gap:14px;align-self:flex-start;width:auto;max-width:100%;margin-top:0;padding:13px 17px;border:1px solid #ffffffb3;border-radius:6px;background:#ffffffef;color:var(--brand-blue);font-size:.8125rem;font-weight:650;line-height:1.4;letter-spacing:0;box-shadow:0 3px 14px #02193116;transition:background .2s,border-color .2s,color .2s}.m-services-grid .m-service-card .m-service-link svg{display:block;width:19px;height:19px;margin:0;padding:0;border-radius:0;background:transparent;color:currentColor;stroke-width:1.8;transition:transform .2s}.m-services-grid .m-service-card:hover .m-service-link,.m-services-grid .m-service-card:focus-visible .m-service-link{background:var(--brand-blue);border-color:var(--brand-blue);color:white}.m-services-grid .m-service-card:hover .m-service-link svg,.m-services-grid .m-service-card:focus-visible .m-service-link svg{transform:translateX(3px)}.m-services-grid .m-service-card p{margin-bottom:24px}.m-services-grid .m-service-card:focus-visible{outline:3px solid var(--brand-blue);outline-offset:5px}@media(max-width:700px){.m-services-grid .m-service-card{padding-bottom:20px;border-radius:9px}.m-services-grid .m-service-card .m-service-link{padding:11px 13px;gap:10px;font-size:.8125rem;min-height:43px;border-radius:5px}.m-services-grid .m-service-link-suffix{display:none}.m-services-grid .m-service-card .m-service-link svg{width:17px;height:17px}.m-services-grid .m-service-card p{margin-bottom:19px}}@media(prefers-reduced-motion:reduce){.m-services-grid .m-service-card .m-service-link,.m-services-grid .m-service-card .m-service-link svg{transition:none}}
/* Keep dialog content scrollable on small screens, without a visible scrollbar. */
dialog{scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain;max-height:calc(100dvh - 40px)}dialog::-webkit-scrollbar{display:none;width:0;height:0}dialog[open]:has(.m-dialog-photo){display:grid;grid-template-columns:32% 68%;width:min(980px,calc(100% - 48px));max-width:980px;padding:0;gap:0;overflow:auto;border-radius:12px}dialog:has(.m-dialog-photo)>.m-dialog-photo{grid-column:1;grid-row:1/5;margin:0;width:100%;height:100%;min-height:100%;object-fit:cover;object-position:55% center;align-self:stretch}dialog:has(.m-dialog-photo)>.m-eyebrow{grid-column:2;grid-row:1;margin:32px 36px 13px;padding-right:20px}dialog:has(.m-dialog-photo)>h2{grid-column:2;grid-row:2;margin:0 36px 17px;font-size:1.8rem;letter-spacing:-1px;line-height:1.2;padding:0}dialog:has(.m-dialog-photo)>#dialog-body{grid-column:2;grid-row:3;margin:0 36px}dialog:has(.m-dialog-photo)>#dialog-body p{font-size:.9375rem;line-height:1.65;margin:0 0 13px}dialog:has(.m-dialog-photo)>#dialog-body ul{font-size:.9375rem;line-height:1.55;margin:14px 0 18px;padding-left:20px}dialog:has(.m-dialog-photo)>#dialog-body li{padding:3px 0}dialog:has(.m-dialog-photo)>#dialog-cta{grid-column:2;grid-row:4;margin:7px 36px 30px;width:fit-content;min-height:49px;padding:13px 20px;font-size:.8125rem}dialog .m-dialog-close{right:12px;top:12px;box-shadow:0 3px 15px #082c5017;border:1px solid #e5edf4}
/* Compact, content-rich footer. */
.m-footer-complete{padding:0;background:#071c32;color:#c1d2e2;overflow:hidden}.m-footer-complete:before{display:none}.m-footer-urgent{background:var(--brand-blue);padding:32px 0}.m-footer-urgent>.m-wrap{display:flex;align-items:center;justify-content:space-between;gap:35px}.m-footer-urgent>div>div>span{font-size:.75rem;letter-spacing:1.4px;color:#c8dff3}.m-footer-urgent h2{font-size:1.8rem;line-height:1.25;letter-spacing:-.7px;margin:9px 0 0;color:white}.m-footer-urgent h2 em{color:white;font-weight:450}.m-footer-urgent-actions{display:flex;align-items:end;flex-direction:column;gap:12px}.m-footer-urgent-actions>a:first-child{display:flex;align-items:center;gap:15px;font-family:Manrope,sans-serif;color:white;font-size:2rem;letter-spacing:-.7px;font-weight:650}.m-footer-urgent-actions>a:first-child svg{height:26px;width:26px}.m-footer-quote-link{display:flex;align-items:center;gap:18px;color:#d3e6f6;font-size:.8125rem}.m-footer-quote-link svg{width:17px;height:17px}.m-footer-columns{display:grid;grid-template-columns:1.13fr 1fr .82fr 1.15fr;gap:45px;padding-top:43px;padding-bottom:37px}.m-footer-logo{display:block;width:193px;padding:10px 12px;border-radius:7px;background:#fff}.m-footer-logo>span{position:relative;display:block;overflow:hidden;width:168px;height:92px}.m-footer-logo img{position:absolute;width:227px;max-width:none;top:-66px;left:-30px}.m-footer-company>p{font-size:.8125rem;line-height:1.85;max-width:260px;margin-top:17px}.m-footer-availability{display:flex;align-items:center;gap:12px;margin-top:19px}.m-footer-availability>svg{width:22px;height:22px;color:#75b670}.m-footer-availability strong{color:#fff;font-size:.875rem;display:block;font-weight:600}.m-footer-availability small{display:block;font-size:.75rem;color:#91acc4;margin-top:3px}.m-footer-columns h3{font-family:'DM Sans',sans-serif;font-size:.875rem;color:white;letter-spacing:0;margin:7px 0 22px}.m-footer-links>a,.m-footer-links>button{display:flex;align-items:center;gap:10px;color:#bdd0e1;font-size:.8125rem;margin:0 0 13px;background:none;border:0;padding:0;text-align:left;font-weight:400;line-height:1.6}.m-footer-links svg{width:15px;height:15px}.m-footer-links>a:hover,.m-footer-links>button:hover{color:white;text-decoration:underline;text-underline-offset:4px}.m-footer-contact>a,.m-footer-contact>div{display:flex;align-items:start;gap:12px;margin-bottom:19px;font-size:.8125rem;line-height:1.6}.m-footer-contact>a>svg,.m-footer-contact>div>svg{width:20px;height:20px;flex-shrink:0;margin-top:3px;color:#72ad6c}.m-footer-contact small{font-size:.625rem;letter-spacing:1.2px;color:#89a9c6;display:block;margin-bottom:4px}.m-footer-contact strong{font-size:1.2rem;color:white;font-weight:600;letter-spacing:.2px}.m-footer-contact .m-footer-contact-button{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:11px 14px;background:#2d842a;color:white;border-radius:4px;font-size:.8125rem;margin-top:6px;margin-bottom:0}.m-footer-contact .m-footer-contact-button svg{color:white;margin:0;width:17px;height:17px}.m-footer-regions{border-top:1px solid #ffffff1f;padding-top:23px;padding-bottom:23px;display:flex;align-items:center;gap:25px}.m-footer-regions>span{font-size:.625rem;letter-spacing:1.4px;color:#8dabca;white-space:nowrap}.m-footer-regions>div{display:flex;gap:11px;flex-wrap:wrap}.m-footer-regions a{font-size:.6875rem;display:inline-flex;gap:7px;align-items:center;background:#ffffff05;border:1px solid #ffffff15;padding:6px 9px;border-radius:4px;color:#b9cfe3}.m-footer-regions a b{color:white;font-size:.6875rem;font-weight:600}.m-footer-regions a:hover{background:var(--brand-blue);border-color:var(--brand-blue);color:white}.m-footer-complete .m-footer-bottom{border-top:1px solid #ffffff1f;margin-top:0;padding:18px 0 21px;color:#8eacc7;font-size:.75rem}.m-footer-complete .m-footer-bottom button{font-size:.75rem}.m-footer-complete .m-footer-bottom a{font-size:.75rem}.m-reviews-toolbar{scroll-margin-top:120px}
@media(max-width:1100px){.m-footer-columns{gap:27px;grid-template-columns:1fr 1fr 1fr}.m-footer-company{grid-column:1;grid-row:1/3}.m-footer-contact{grid-column:2/4;display:grid;grid-template-columns:1fr 1.4fr;gap:10px 25px;align-items:start}.m-footer-contact h3{grid-column:1/-1;margin:6px 0}.m-footer-contact>a,.m-footer-contact>div{margin:0}.m-footer-contact .m-footer-contact-button{margin:0}.m-footer-regions{align-items:start}.m-footer-regions>span{padding-top:9px}.m-footer-regions>div{gap:9px}}
@media(max-height:700px) and (min-width:701px){dialog:has(.m-dialog-photo)>.m-eyebrow{margin-top:23px;margin-bottom:10px}dialog:has(.m-dialog-photo)>h2{font-size:1.6rem;margin-bottom:13px}dialog:has(.m-dialog-photo)>#dialog-body p,dialog:has(.m-dialog-photo)>#dialog-body ul{font-size:.875rem;line-height:1.55}dialog:has(.m-dialog-photo)>#dialog-body ul{margin:10px 0 12px}dialog:has(.m-dialog-photo)>#dialog-cta{margin-bottom:22px;min-height:44px}}
@media(max-width:700px){dialog[open]:has(.m-dialog-photo){display:block;width:calc(100% - 28px);max-height:calc(100dvh - 28px);border-radius:9px}dialog:has(.m-dialog-photo)>.m-dialog-photo{width:100%;height:165px;min-height:0;object-position:center 45%}dialog:has(.m-dialog-photo)>.m-eyebrow{margin:23px 24px 12px;font-size:.75rem}dialog:has(.m-dialog-photo)>h2{font-size:1.55rem;line-height:1.2;margin:0 24px 16px;letter-spacing:-.7px}dialog:has(.m-dialog-photo)>#dialog-body{margin:0 24px}dialog:has(.m-dialog-photo)>#dialog-body p{font-size:.9375rem;line-height:1.7;margin-bottom:12px}dialog:has(.m-dialog-photo)>#dialog-body ul{font-size:.9375rem;line-height:1.55;margin:12px 0 17px}dialog:has(.m-dialog-photo)>#dialog-cta{margin:8px 24px 24px;font-size:.8125rem}.m-footer-urgent{padding:28px 0}.m-footer-urgent>.m-wrap{flex-direction:column;align-items:start;gap:23px}.m-footer-urgent>div>div>span{font-size:.625rem;letter-spacing:1px}.m-footer-urgent h2{font-size:1.6rem}.m-footer-urgent-actions{align-items:start;gap:9px}.m-footer-urgent-actions>a:first-child{font-size:1.9rem}.m-footer-quote-link{font-size:.8125rem}.m-footer-columns{grid-template-columns:1fr 1fr;gap:29px 25px;padding-top:31px;padding-bottom:28px}.m-footer-company{grid-column:1/-1;grid-row:auto;display:grid;grid-template-columns:1fr 1fr;gap:15px}.m-footer-logo{width:155px;padding:8px 10px;align-self:start}.m-footer-logo>span{width:135px;height:75px}.m-footer-logo img{width:184px;top:-54px;left:-24px}.m-footer-company>p{margin:0;font-size:.75rem;line-height:1.8}.m-footer-availability{grid-column:1/-1;margin:0}.m-footer-availability>span{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.m-footer-availability small{margin:0}.m-footer-columns h3{margin:0 0 18px;font-size:.875rem}.m-footer-links>a,.m-footer-links>button{font-size:.8125rem;margin-bottom:12px}.m-footer-contact{grid-column:1/-1;display:block;padding-top:24px;border-top:1px solid #ffffff1f}.m-footer-contact h3{margin-bottom:20px}.m-footer-contact>a,.m-footer-contact>div{margin-bottom:17px}.m-footer-contact .m-footer-contact-button{width:fit-content;gap:25px;margin-top:21px}.m-footer-contact small{font-size:.6875rem}.m-footer-contact>a,.m-footer-contact>div{font-size:.875rem}.m-footer-regions{display:block;padding-top:22px;padding-bottom:22px}.m-footer-regions>span{font-size:.6875rem;padding:0;display:block;margin-bottom:14px}.m-footer-regions>div{gap:8px}.m-footer-regions a{font-size:.75rem;padding:7px 9px}.m-footer-regions a b{font-size:.75rem}.m-footer-complete{padding-bottom:65px}.m-footer-complete .m-footer-bottom{padding:19px 0;gap:14px;font-size:.6875rem;align-items:start}.m-footer-complete .m-footer-bottom button{margin-left:0;font-size:.6875rem}.m-reviews-toolbar{scroll-margin-top:105px}}

/* assets/modele/intro.css */
/* Uses the supplied logo unchanged. The entrance lasts 2.6 seconds and is skippable. */
#cps-intro{display:none;position:fixed;inset:0;z-index:1000;isolation:isolate;place-items:center;background:#fff;color:#141414;overflow:hidden;overscroll-behavior:none}.m-cps-intro-pending #cps-intro,#cps-intro.m-is-active{display:grid}html.m-cps-intro-pending,html.m-cps-intro-active{overflow:hidden}.m-intro-content{width:min(600px,72vw);position:relative;z-index:2;text-align:center;transform:translateY(-12px)}.m-intro-logo-stage{position:relative;overflow:hidden;isolation:isolate}.m-intro-logo{width:100%;height:auto;display:block;position:relative;z-index:1;opacity:0;transform:translateY(16px) scale(.96);filter:blur(5px);clip-path:inset(0 100% 0 0)}.m-intro-running .m-intro-logo{animation:m-cps-logo-reveal .55s cubic-bezier(.2,.75,.15,1) .08s both}.m-intro-shimmer{position:absolute;top:-10%;bottom:-10%;left:-40%;width:25%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,#fff8,transparent);z-index:3;opacity:0;pointer-events:none}.m-intro-running .m-intro-shimmer{animation:m-cps-logo-shimmer .45s ease .4s both}.m-intro-line{height:3px;max-width:175px;display:flex;gap:6px;margin:24px auto 0;overflow:hidden;justify-content:center}.m-intro-line span{height:3px;flex:1;transform:scaleX(0);transform-origin:left;background:#141414;border-radius:2px}.m-intro-line span:nth-child(2){background:#2f892c}.m-intro-line span:nth-child(3){background:#0659a7}.m-intro-running .m-intro-line span{animation:m-cps-line-in .3s cubic-bezier(.15,.85,.25,1) .2s both}.m-intro-running .m-intro-line span:nth-child(2){animation-delay:.3s}.m-intro-running .m-intro-line span:nth-child(3){animation-delay:.4s}.m-intro-tagline{margin:24px 0 0;font-family:Manrope,Arial,sans-serif;font-size:1.125rem;line-height:1.7;letter-spacing:.15px;font-weight:500;opacity:0}.m-intro-tagline strong{color:#2d842a;font-weight:650}.m-intro-running .m-intro-tagline{animation:m-cps-caption-in .35s ease .35s both}.m-intro-halo{position:absolute;left:50%;top:46%;width:min(790px,110vw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px solid #0659a710;z-index:0;opacity:0;pointer-events:none}.m-intro-halo:before,.m-intro-halo:after{content:'';position:absolute;border:1px solid #2f892c0d;border-radius:50%;inset:-65px}.m-intro-halo:after{inset:-135px;border-color:#0659a708}.m-intro-running .m-intro-halo{animation:m-cps-halo 1.1s ease-out both}.m-intro-skip{position:absolute;right:35px;top:30px;padding:10px 15px;background:#f3f7fa;border:1px solid #dce7ee;border-radius:5px;color:#547086;font-size:.8125rem;display:flex;align-items:center;gap:12px;cursor:pointer;z-index:4;min-height:43px}.m-intro-skip svg{width:17px;height:17px}.m-intro-skip:hover{background:#0659a7;color:white;border-color:#0659a7}.m-intro-skip:focus-visible{outline:2px solid #0659a7;outline-offset:4px}.m-intro-bottom{position:absolute;left:20px;right:20px;bottom:34px;display:flex;align-items:center;justify-content:center;gap:14px;font-size:.75rem;font-weight:500;letter-spacing:1.5px;color:#788c9b}.m-intro-bottom i{width:4px;height:4px;background:#2f892c;border-radius:50%}.m-intro-exiting{animation:m-cps-intro-out .25s cubic-bezier(.4,0,.2,1) forwards;pointer-events:none}.m-intro-replay{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:0;color:inherit;font-size:inherit;cursor:pointer}.m-intro-replay svg{height:14px;width:14px}.m-footer-complete .m-footer-bottom .m-intro-replay{margin-left:0}.m-intro-replay:hover{color:white}.m-intro-static .m-intro-logo{opacity:1;transform:none;filter:none;clip-path:none;animation:none}.m-intro-static .m-intro-tagline{opacity:1;animation:none}.m-intro-static .m-intro-line span{transform:none;animation:none}.m-intro-static .m-intro-halo,.m-intro-static .m-intro-shimmer{display:none}
@keyframes m-cps-logo-reveal{0%{opacity:0;transform:translateY(16px) scale(.96);filter:blur(5px);clip-path:inset(0 100% 0 0)}25%{opacity:1}80%{filter:blur(0)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0);clip-path:inset(0 0 0 0)}}
@keyframes m-cps-logo-shimmer{0%{left:-40%;opacity:0}15%{opacity:1}80%{opacity:1}100%{left:115%;opacity:0}}
@keyframes m-cps-line-in{to{transform:scaleX(1)}}
@keyframes m-cps-caption-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes m-cps-halo{0%{opacity:0;transform:translate(-50%,-50%) scale(.86)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.1)}}
@keyframes m-cps-intro-out{to{opacity:0;transform:translateY(-8px)}}
@media(max-width:700px){.m-intro-content{width:min(470px,83vw);transform:translateY(-18px)}.m-intro-tagline{font-size:.9375rem;line-height:1.7;margin-top:20px}.m-intro-line{max-width:125px;margin-top:21px}.m-intro-skip{right:18px;top:max(18px,env(safe-area-inset-top));font-size:.75rem;padding:9px 12px;gap:9px}.m-intro-bottom{font-size:.625rem;letter-spacing:1px;gap:10px;bottom:max(26px,env(safe-area-inset-bottom))}.m-intro-halo{width:115vw}.m-intro-halo:before{inset:-40px}.m-intro-halo:after{inset:-80px}.m-footer-complete .m-footer-bottom .m-intro-replay{font-size:.6875rem}}
@media(prefers-reduced-motion:reduce){.m-intro-running .m-intro-logo{opacity:1;transform:none;filter:none;clip-path:none;animation:none}.m-intro-running .m-intro-tagline{opacity:1;animation:none}.m-intro-running .m-intro-line span{transform:none;animation:none}.m-intro-halo,.m-intro-shimmer{display:none}.m-intro-exiting{animation:none}}

/* assets/modele/mobile.css */
/* ===========================================================================
   TÉLÉPHONE — reprises de mise en page
   La maquette est pensée pour un grand écran ; sur téléphone, plusieurs blocs
   s aplatissaient en paragraphes collés. Cette feuille ne s applique qu en
   dessous de 700 px et ne touche pas au rendu sur ordinateur.
   =========================================================================== */

@media (max-width: 700px) {

  /* ------------------------------------------------------------- respiration */
  .m-section { padding: 52px 0; }
  .m-section-heading { margin-bottom: 26px; }

  /* ------------------------------------------------------------- contact */
  .m-contact-grid { row-gap: 28px; }

  .m-contact-copy > p {
    font-size: 0.94rem;
    line-height: 1.7;
    margin-bottom: 22px;
  }

  /* le numéro devient le point d appui du bloc, pas une ligne parmi d autres */
  .m-contact-phone {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 14px;
    margin: 0 0 12px;
    padding: 16px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0659a7, #04417a);
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(6, 89, 167, 0.28);
    font-size: 1.65rem;
    letter-spacing: -0.5px;
  }
  .m-contact-phone svg {
    width: 26px;
    height: 26px;
    color: #fff;
  }
  .m-contact-phone span { display: grid; gap: 3px; line-height: 1.1; }
  .m-contact-phone small {
    font-size: 0.66rem;
    letter-spacing: 1.4px;
    color: rgba(255, 255, 255, 0.78);
  }

  /* e-mail et horaires : deux lignes lisibles, encadrées */
  .m-contact-email,
  .m-contact-hours {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    padding: 13px 16px;
    border: 1px solid #e2eaf3;
    border-radius: 12px;
    background: #fff;
    font-size: 0.92rem;
    line-height: 1.45;
    word-break: break-word;
  }
  .m-contact-email svg,
  .m-contact-hours svg {
    width: 20px;
    height: 20px;
    color: #0659a7;
  }
  .m-contact-hours { color: #4a5a6d; font-size: 0.86rem; }

  /* le visuel de bas de bloc gagne en présence */
  .m-contact-visual {
    height: 200px;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 18px;
  }
  .m-contact-visual > span {
    font-size: 1.05rem;
    line-height: 1.25;
  }

  /* ------------------------------------------------------------- formulaire */
  .m-contact form {
    border-radius: 16px;
    padding: 22px 18px;
  }
  .m-contact form input:not([type='checkbox']):not([type='radio']),
  .m-contact form select,
  .m-contact form textarea {
    min-height: 48px;
    font-size: 1rem;      /* en dessous de 16 px, iOS zoome sur le champ */
  }

  /* La case de consentement reste carree et se pose sur la premiere ligne du
     texte. Le doigt vise le libelle entier, qui fait bien plus de 48 px. */
  .m-contact form input[type='checkbox'] {
    min-height: 0;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin: 2px 0 0;
    accent-color: var(--green);
  }
  .m-contact form label:has(> input[type='checkbox']) {
    align-items: flex-start;
  }
  .m-contact form textarea { min-height: 110px; }
  .m-contact form > .m-button {
    width: 100%;
    min-height: 52px;
    justify-content: center;
  }

  /* ------------------------------------------------------------- avis */
  .m-reviews-layout { row-gap: 24px; }
  .m-review-card { min-height: 0; padding: 22px 20px 20px; border-radius: 14px; }
  .m-reviews-controls { margin-top: 16px; }

  /* ------------------------------------------------------------- questions */
  .m-faq-grid { row-gap: 22px; }
  .m-faq summary { padding: 20px 36px 20px 0; font-size: 0.95rem; line-height: 1.4; }

  /* ------------------------------------------------------------- pied de page */
  .m-footer-urgent { padding: 22px 0; }
  .m-footer-urgent-actions { width: 100%; margin-top: 14px; }
  .m-footer-urgent-actions > * { flex: 1 1 100%; justify-content: center; min-height: 50px; }

  .m-footer-columns {
    grid-template-columns: 1fr 1fr;
    row-gap: 30px;
    column-gap: 22px;
    padding-top: 30px;
  }

  /* bloc de marque : le logo passe au-dessus du texte, a taille raisonnable */
  .m-footer-company { grid-column: 1 / -1; }
  .m-footer-logo {
    display: block;
    width: 150px;
    margin-bottom: 14px;
  }
  .m-footer-logo span {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff;
  }
  .m-footer-logo img { width: 100%; height: auto; display: block; }
  .m-footer-company > p {
    font-size: 0.88rem;
    line-height: 1.7;
    max-width: 34ch;
  }

  /* reseaux sociaux : une ligne compacte */
  .m-footer-social { margin-top: 20px; }
  .m-footer-social h3 { margin-bottom: 10px; font-size: 0.72rem; letter-spacing: 1.6px; }
  .m-social-links { display: flex; gap: 10px; }
  .m-social-link {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    gap: 4px;
    width: 64px;
    padding: 10px 6px;
    border-radius: 12px;
    font-size: 0.66rem;
  }

  .m-footer-availability { grid-column: 1 / -1; margin-top: 4px; }

  /* colonnes de liens : deux colonnes lisibles, titres detaches */
  .m-footer-links h3 {
    margin-bottom: 12px;
    font-size: 0.78rem;
    letter-spacing: 0.6px;
  }
  .m-footer-links a {
    display: block;
    padding: 7px 0;
    font-size: 0.84rem;
    line-height: 1.35;
  }

  .m-footer-contact { grid-column: 1 / -1; }
  .m-footer-regions { padding-top: 22px; }
  .m-footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: 96px; }
}

/* très petits écrans : on évite les débordements horizontaux */
@media (max-width: 380px) {
  .m-contact-phone { font-size: 1.42rem; padding: 14px 15px; }
  .m-contact-email { font-size: 0.86rem; }
}

/* assets/modele/menu.css */
/* ===========================================================================
   MENU — logo non rogné et navigation déroulante
   La maquette recadrait une image matricielle du logo et n avait que des liens
   simples. Le site utilise le logo vectoriel et ouvre, sous « Nos prestations »
   et « Zone d intervention », un panneau listant les pages réelles.
   =========================================================================== */

/* ------------------------------------------------------------------ logo */
.cps-logo {
  display: block;
  height: clamp(44px, 4.6vw, 62px);
  width: auto;
}
.m-brand { align-items: center; gap: 0; }

/* ------------------------------------------------------------------ navigation */
#navigation { position: relative; }

.cps-groupe { position: relative; display: inline-flex; }

.cps-declencheur {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.cps-declencheur svg {
  width: 13px;
  height: 13px;
  transition: transform 220ms cubic-bezier(0.22, 0.8, 0.28, 1);
}
.cps-groupe[data-ouvert='oui'] .cps-declencheur { color: #0659a7; }
.cps-groupe[data-ouvert='oui'] .cps-declencheur svg { transform: rotate(180deg); }

/* panneau déroulant */
.cps-panneau {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  translate: -50% 0;
  z-index: 60;
  width: max-content;
  max-width: min(94vw, 40rem);
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(15rem, 1fr));
  gap: 4px;
  border: 1px solid #e0eaf3;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(11, 66, 116, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 220ms, transform 220ms, visibility 220ms;
}
/* une zone tampon évite que le panneau se ferme en traversant l espace */
.cps-panneau::before {
  content: '';
  position: absolute;
  inset: -20px 0 auto;
  height: 22px;
}
.cps-groupe[data-ouvert='oui'] .cps-panneau {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.cps-entree {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 11px;
  text-decoration: none;
  color: #16212e;
  transition: background 180ms, transform 180ms;
}
.cps-entree:hover { background: #f1f6fb; transform: translateX(2px); }
.cps-entree > .cps-entree__icone {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  /* couleur pleine, pas de dégradé : le bleu de la maison, franc */
  background: #0659a7;
  color: #fff;
}
.cps-entree__icone svg { width: 24px; height: 24px; }
.cps-entree strong {
  display: block;
  font-size: 0.93rem;
  font-weight: 700;
  line-height: 1.25;
}
.cps-entree > span:last-child > span {
  display: block;
  margin-top: 2px;
  font-size: 0.79rem;
  line-height: 1.45;
  color: #5a6b7d;
}

/* pied du panneau : accès à la page d ensemble */
.cps-panneau__pied {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding: 12px 12px 4px;
  border-top: 1px solid #edf2f7;
  font-size: 0.83rem;
}
.cps-panneau__pied a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  color: #0659a7;
  text-decoration: none;
}
.cps-panneau__pied a svg { width: 15px; height: 15px; }
.cps-panneau__pied span { color: #5a6b7d; }

/* pastilles des départements */
.cps-panneau--zones { grid-template-columns: repeat(2, minmax(13rem, 1fr)); }
.cps-entree > .cps-entree__code {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 12px;
  /* le chiffre doit être optiquement au centre, sans que l interligne hérité
     ne le décale vers le bas */
  line-height: 1;
  background: #eef4fb;
  color: #0659a7;
  font-size: 0.8rem;
  font-weight: 700;
}
.cps-entree:hover .cps-entree__code { background: #0659a7; color: #fff; }

/* ------------------------------------------------------------------ téléphone */
@media (max-width: 1000px) {
  .cps-panneau {
    position: static;
    translate: none;
    transform: none;
    width: 100%;
    max-width: none;
    grid-template-columns: 1fr;
    padding: 6px 0 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    opacity: 1;
    visibility: visible;
    max-height: 0;
    overflow: hidden;
    transition: max-height 280ms cubic-bezier(0.22, 0.8, 0.28, 1);
  }
  .cps-groupe[data-ouvert='oui'] .cps-panneau { max-height: 40rem; }
  /* #navigation etait en position:relative (specificite d identifiant) : il
     battait le « position:absolute; left:0; right:0 » de la maquette, et le
     panneau ne couvrait que la moitie droite de l ecran. */
  #navigation {
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
  }
  .cps-groupe { display: block; width: 100%; }
  .cps-declencheur { width: 100%; justify-content: space-between; }
  .cps-entree { padding: 10px 6px; }
  /* seule la description disparait : le nom de la prestation doit rester,
     sans quoi le sous-menu n affiche plus qu une colonne d icones muettes */
  /* le code de département est une pastille centrée, pas un bloc de texte :
     l exclure ici, sinon « display:block » annule son centrage */
  .cps-entree > span:not(.cps-entree__icone):not(.cps-entree__code) {
    display: block;
    min-width: 0;
  }
  .cps-entree > span:not(.cps-entree__icone):not(.cps-entree__code) > span { display: none; }
  .cps-entree > span strong { font-size: 0.94rem; font-weight: 600; }
  .cps-panneau__pied { padding: 10px 6px 2px; }
  .cps-logo { height: 46px; }
}

/* ---------------------------------------------------------------------------
   Icônes : la maquette applique un remplissage global aux SVG (ses propres
   symboles sont pleins). Les icônes du site sont dessinées au trait : il faut
   donc rétablir explicitement leur mode de tracé.
   --------------------------------------------------------------------------- */
.cps-entree__icone svg {
  /* la maquette impose une couleur aux SVG : on la fixe ici, sinon le trait
     prend le vert de la maquette et disparait sur la pastille degradee */
  width: 24px !important;
  height: 24px !important;
  color: #fff !important;
  fill: none !important;
  stroke: #fff !important;
}
.cps-declencheur svg,
.cps-panneau__pied svg {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cps-entree__icone svg [fill='currentColor'] {
  fill: currentColor !important;
  stroke: none !important;
}

/* ===========================================================================
   BOUTON DU MENU — FIABILITÉ AU DOIGT
   ---------------------------------------------------------------------------
   Le menu « bloquait » par intermittence sur téléphone. Trois causes :
   1. touch-action:auto — le navigateur attend de savoir si le geste est un
      défilement ; si le doigt bouge de deux pixels pendant le tap, le clic est
      purement et simplement annulé ;
   2. une cible de 40 px, sous le minimum confortable de 44 ;
   3. aucun retour visuel (la surbrillance de tap est désactivée sur tout le
      site), donc un tap raté ne se voit pas — on retape, souvent trop vite.
   =========================================================================== */
.m-menu-toggle {
  /* le tap est traité immédiatement, sans attendre un éventuel défilement */
  touch-action: manipulation;
  position: relative;
  z-index: 2;
  transition: background 160ms, transform 120ms;
  border-radius: 10px;
}

/* la cible déborde discrètement du dessin : 48 px sous le doigt, 40 à l œil */
.m-menu-toggle::after {
  content: '';
  position: absolute;
  inset: -4px;
}

/* retour visuel : on voit que le tap a été pris */
.m-menu-toggle:active {
  background: #eef4fb;
  transform: scale(0.94);
}
.m-menu-toggle[aria-expanded='true'] { background: #eef4fb; }

/* même traitement pour les dépliants du menu */
.cps-declencheur {
  touch-action: manipulation;
  border-radius: 8px;
  transition: background 160ms;
}
.cps-declencheur:active { background: #eef4fb; }

/* assets/modele/complements.css */
/* ===========================================================================
   COMPLÉMENTS — ce que le site apporte en plus de la maquette
   Ces règles ne concernent que des éléments ajoutés par le site (lien
   d évitement, ancrage des sections) : elles ne modifient pas la maquette.
   =========================================================================== */

/* Lien d accès rapide au contenu : invisible jusqu au passage au clavier. */
.evitement {
  position: absolute;
  left: 50%;
  translate: -50% -140%;
  z-index: 200;
  padding: 0.7rem 1.4rem;
  border-radius: 0 0 6px 6px;
  background: #2f882c;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: translate 180ms cubic-bezier(0.22, 0.8, 0.28, 1);
}
.evitement:focus-visible { translate: -50% 0; }

/* Un ancrage qui tient compte de la barre de navigation fixe. */
html { scroll-padding-top: 6rem; }


/* ===========================================================================
   FIL D ARIANE ET GARANTIES — pages « devis » et « contact »
   =========================================================================== */
.m-ariane {
  border-bottom: 1px solid var(--line);
  background: #fbfdfd;
  font-size: 0.82rem;
  color: var(--muted);
}
.m-ariane .m-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 0;
}
.m-ariane a { color: var(--navy); text-decoration: none; }
.m-ariane a:hover { text-decoration: underline; }
.m-ariane [aria-current='page'] { color: var(--ink); font-weight: 600; }

.m-devis-garanties { padding-top: 0; }
.m-devis-garanties-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 18px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}
.m-devis-garanties-grille > div {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}
.m-devis-garanties-grille strong {
  display: block;
  margin-bottom: 7px;
  font-family: Manrope, Arial, sans-serif;
  font-size: 1rem;
  letter-spacing: -0.3px;
}
.m-devis-garanties-grille p { margin: 0; font-size: 0.88rem; line-height: 1.65; color: var(--muted); }

/* ===========================================================================
   PHOTO DU VÉHICULE — le cadre de la maquette était haut de 430 px et remplissait
   avec « cover » : la photo détourée, bien plus large que haute, était zoomée et
   l’arrière du fourgon sortait du cadre. Le cadre suit maintenant les proportions
   de la photo, qui s’affiche entière.
   =========================================================================== */
.m-vehicle-frame {
  height: auto;
  aspect-ratio: 1280 / 511;
  background: #eef4f9;
}
.m-vehicle-frame > img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 700px) {
  .m-vehicle-frame { aspect-ratio: 1280 / 560; }
}

/* ===========================================================================
   CONFIRMATION D ENVOI
   ---------------------------------------------------------------------------
   Le visiteur vient de confier une demande : il doit voir sans ambiguïté
   qu elle est partie, ce qu il a envoyé, et quand on le rappelle. Le panneau
   prend la place du formulaire — plus de doute possible.
   =========================================================================== */
.cps-envoye {
  padding: 34px 28px 30px;
  border: 1px solid #cbe3c8;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 40px rgba(16, 43, 67, 0.07);
  text-align: center;
  outline: none;
}

/* L apparition est un ornement, pas une condition de visibilite : le panneau
   est visible au repos, la classe ne fait qu ajouter le mouvement. Une
   animation qui ne demarre pas laissait l ecran vide — le visiteur croyait que
   son envoi n avait rien donne. */
.cps-envoye--entre {
  animation: cps-envoye-entree 420ms cubic-bezier(0.22, 0.8, 0.28, 1) both;
}
@keyframes cps-envoye-entree {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ la coche */
.cps-envoye__coche { display: block; width: 76px; margin: 0 auto 18px; }
.cps-envoye__coche svg { width: 76px; height: 76px; display: block; }

.cps-envoye__cercle {
  fill: #eef8ec;
  stroke: var(--green);
  stroke-width: 2.5;
  stroke-dasharray: 145;
  stroke-dashoffset: 0;
}
.cps-envoye--entre .cps-envoye__cercle {
  animation: cps-trace-cercle 620ms cubic-bezier(0.65, 0, 0.45, 1) both;
}
.cps-envoye__trait {
  fill: none;
  stroke: var(--green);
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 0;
}
.cps-envoye--entre .cps-envoye__trait {
  animation: cps-trace-trait 380ms cubic-bezier(0.65, 0, 0.45, 1) 480ms both;
}
@keyframes cps-trace-cercle { from { stroke-dashoffset: 145; } to { stroke-dashoffset: 0; } }
@keyframes cps-trace-trait { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }

/* le visiteur qui limite les animations voit la coche, simplement posée */
@media (prefers-reduced-motion: reduce) {
  .cps-envoye--entre,
  .cps-envoye--entre .cps-envoye__cercle,
  .cps-envoye--entre .cps-envoye__trait { animation: none; }
}

/* ------------------------------------------------------------------ le propos */
.cps-envoye h3 {
  font-size: 1.5rem;
  letter-spacing: -0.7px;
  color: var(--ink);
  margin: 0;
}
.cps-envoye__promesse {
  margin: 10px auto 0;
  max-width: 46ch;
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--muted);
}
.cps-envoye__promesse strong { color: var(--ink); font-weight: 650; }

/* ------------------------------------------------------------------ récapitulatif */
.cps-envoye__recap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  margin: 24px 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--line);
  overflow: hidden;
  text-align: left;
}
.cps-envoye__recap > div { padding: 13px 15px; background: #fafcfe; }
.cps-envoye__recap dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #8fa0b0;
}
.cps-envoye__recap dd {
  margin: 4px 0 0;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: break-word;
}

/* ------------------------------------------------------------------ urgence */
.cps-envoye__urgence {
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.cps-envoye__urgence p {
  margin: 0 0 12px;
  font-size: 0.9rem;
  color: var(--muted);
}
.cps-envoye__urgence .m-button { width: 100%; max-width: 330px; }

.cps-envoye__nouvelle {
  margin-top: 18px;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 0.86rem;
  text-decoration: underline;
  cursor: pointer;
}
.cps-envoye__nouvelle:hover { color: var(--navy); }

/* ------------------------------------------------------------------ téléphone */
@media (max-width: 700px) {
  .cps-envoye { padding: 28px 18px 24px; }
  .cps-envoye h3 { font-size: 1.28rem; }
  .cps-envoye__coche,
  .cps-envoye__coche svg { width: 64px; height: 64px; }
  .cps-envoye__recap { grid-template-columns: 1fr 1fr; }
  .cps-envoye__promesse { font-size: max(0.88rem, 13.5px); }
}

/* ------------------------------------------------------------------ mode nuit */
:root[data-theme='nuit'] .cps-envoye { background: var(--white); border-color: #2c5c2a; }
:root[data-theme='nuit'] .cps-envoye__cercle { fill: #16301a; }
:root[data-theme='nuit'] .cps-envoye__recap > div { background: var(--pale); }

/* ============================================================================
   ÉTATS DU BOUTON D ENVOI
   Le clic doit se voir immédiatement : le bouton s assombrit pendant l envoi,
   puis vire au vert quand la demande est partie. C est le signal le plus sûr,
   parce qu il est là où le visiteur regarde — sous son doigt.
   ========================================================================== */
button[type='submit'][data-etat] {
  transition: background-color 220ms ease, border-color 220ms ease, opacity 220ms ease;
}
button[type='submit'][data-etat='envoi'] {
  opacity: 0.78;
  cursor: progress;
}
button[type='submit'][data-etat='envoye'],
button[type='submit'][data-etat='envoye']:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  cursor: default;
  opacity: 1;
}

/* ----------------------------------------------------------- champ manquant */
/* La case de consentement mesure 0 × 0 : le navigateur ne peut pas y poser sa
   bulle d avertissement. On marque donc le champ fautif nous-mêmes. */
[data-manque] {
  border-radius: 8px;
  outline: 2px solid var(--red, #c8372d);
  outline-offset: 4px;
  animation: cps-manque 620ms ease;
}
@keyframes cps-manque {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  45% { transform: translateX(4px); }
  70% { transform: translateX(-2px); }
}

/* ============================================================================
   PASTILLE « 24H/24 » DU VÉHICULE
   Posée sur la photo, elle masquait le flocage du camion — raison sociale,
   numéro, pictogrammes des prestations. Elle remonte au-dessus du cadre, dans
   l espace libre, comme cela avait déjà été fait sur téléphone.
   ========================================================================== */
@media (min-width: 701px) {
  /* le bloc doit laisser la pastille déborder vers le haut */
  .m-hero-light-media { overflow: visible; padding-top: 62px; }

  .m-availability-pill {
    /* la pastille mesure 70 px de haut : moins que cela, elle mord sur la
       photo et masque le flocage du vehicule */
    top: -52px;
    right: 18px;
    z-index: 3;
  }
}

/* ------------------------------------------------------------------ le voyant
   Un point vert qui bat en continu : le signe qu une équipe est joignable à
   l instant où l on regarde. Le texte, lui, ne clignote jamais — il doit
   rester lisible. */
.m-availability-pill { position: absolute; }
.m-availability-pill::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #2f892c;
  box-shadow: 0 0 0 3px #fff;
  animation: cps-voyant 1.5s ease-in-out infinite;
}
.m-availability-pill::after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid #2f892c;
  animation: cps-halo 1.5s ease-out infinite;
}
@keyframes cps-voyant {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.82); }
}
@keyframes cps-halo {
  0% { opacity: 0.7; transform: scale(1); }
  80%, 100% { opacity: 0; transform: scale(2.6); }
}

/* le visiteur qui limite les animations voit un point vert, simplement posé */
@media (prefers-reduced-motion: reduce) {
  .m-availability-pill::before { animation: none; }
  .m-availability-pill::after { display: none; }
}


/* ===========================================================================
   PRESTATIONS — CINQ CARTES DANS UNE GRILLE DE TROIS
   ---------------------------------------------------------------------------
   Le pompage a ete retire du catalogue : il reste cinq prestations, et la
   seconde ligne laissait une case vide a droite. Les deux dernieres cartes
   se partagent desormais toute la largeur.

   La regle est conditionnee au nombre exact de cartes : ajouter ou retirer
   une prestation rend la grille a son reglage d origine, sans rien corriger.
   Un navigateur qui ignore « :has » affiche l ancienne disposition, qui
   reste lisible.
   =========================================================================== */
@media (min-width: 701px) {
  .m-services-grid:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(6, 1fr);
  }
  .m-services-grid:has(> :nth-child(5):last-child) > * {
    grid-column: span 2;
  }
  .m-services-grid:has(> :nth-child(5):last-child) > :nth-child(n + 4) {
    grid-column: span 3;
  }
}

/* assets/modele/pied.css */
/* ===========================================================================
   PIED DE PAGE DE L ACCUEIL
   Le logo etait pose sur un cartouche blanc au milieu du bleu nuit, les trois
   reseaux sociaux occupaient de grandes cases inertes et le lien « retour en
   haut » se perdait dans la ligne de bas de page.
   =========================================================================== */

/* ------------------------------------------------------------------ logo */
.m-footer-logo {
  /* la maquette posait le logo sur un cartouche blanc et le recadrait :
     la version claire du logo se suffit a elle-meme sur le fond nuit */
  display: inline-block;
  width: auto;
  padding: 0;
  margin-bottom: 16px;
  border-radius: 0;
  background: none;
}
.m-footer-logo img {
  position: static;
  top: auto;
  left: auto;
  width: auto;
  max-width: none;
  height: 62px;
  display: block;
}

.m-footer-company > p {
  max-width: 32ch;
  font-size: 0.88rem;
  line-height: 1.7;
}

/* ------------------------------------------------------------------ réseaux sociaux */
.m-footer-social { margin-top: 22px; }
.m-footer-social h3 {
  margin-bottom: 11px;
  font-size: 0.7rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #8fb0cc;
}
.m-social-links { display: flex; gap: 10px; }
.m-social-link {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #23415f;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: #c6d9eb;
  transition: background 200ms, border-color 200ms, color 200ms, transform 200ms;
}
.m-social-link:hover {
  background: #2f882c;
  border-color: #2f882c;
  color: #fff;
  transform: translateY(-2px);
}
.m-social-link svg { width: 18px; height: 18px; }
/* le libelle sous l icone alourdissait le bloc : il reste pour les lecteurs d ecran */
.m-social-link > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.m-social-link[aria-disabled='true'] { opacity: 0.4; cursor: default; }
.m-social-link[aria-disabled='true']:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: #23415f;
  color: #c6d9eb;
  transform: none;
}
.m-social-status { margin-top: 10px; font-size: 0.78rem; color: #7f9cb8; }

/* ------------------------------------------------------------------ colonnes */
.m-footer-columns { align-items: start; }
.m-footer-links h3,
.m-footer-contact h3 {
  margin-bottom: 13px;
  font-size: 0.7rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #8fb0cc;
}
.m-footer-links a,
.m-footer-links button { padding: 5px 0; font-size: 0.88rem; }

.m-footer-availability {
  margin-top: 18px;
  padding: 13px 15px;
  border: 1px solid #23415f;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

/* ------------------------------------------------------------------ départements */
.m-footer-regions { gap: 9px; }
.m-footer-regions a { transition: background 200ms, border-color 200ms, color 200ms; }
.m-footer-regions a:hover { background: #0659a7; border-color: #0659a7; color: #fff; }

/* ------------------------------------------------------------------ retour en haut */
.cps-remonter {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #0659a7;
  color: #fff;
  box-shadow: 0 10px 28px rgba(6, 89, 167, 0.38);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  translate: 0 14px;
  transition: opacity 260ms, translate 260ms, visibility 260ms, background 200ms;
}
.cps-remonter[data-visible='oui'] { opacity: 1; visibility: visible; translate: 0 0; }
.cps-remonter:hover { background: #2f882c; }
.cps-remonter svg { width: 21px; height: 21px; color: #fff; }

@media (max-width: 700px) {
  /* la barre d appel occupe le bas de l ecran : le bouton remonte au-dessus */
  .cps-remonter { right: 14px; bottom: 84px; width: 44px; height: 44px; }
  .m-footer-logo img { height: 50px; }
  .m-social-link { width: 40px; height: 40px; }
}

/* ===========================================================================
   PIED DE PAGE SUR TÉLÉPHONE
   Les grandes pastilles de réseaux sociaux, la mention « bientôt disponibles »
   et les colonnes trop larges rendaient le bas de page confus. Tout est
   resserré : icônes rondes en ligne, deux colonnes lisibles, et le bouton
   « retour en haut » dégagé de la barre d’appel.
   =========================================================================== */
@media (max-width: 700px) {
  .m-footer-social { margin-top: 18px; }
  .m-footer-social h3 { margin-bottom: 10px; font-size: 0.68rem; letter-spacing: 1.6px; }

  .m-social-links { gap: 10px; }
  .m-social-link {
    flex: 0 0 auto;
    /* la maquette impose un min-width de 87 px sur telephone : sans le
       neutraliser, la largeur demandee ici n a aucun effet */
    width: 42px;
    min-width: 42px;
    max-width: none;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    font-size: 0;
  }
  .m-social-link svg { width: 18px; height: 18px; }
  /* le libellé sous l’icône faisait trois lignes sur un écran étroit */
  .m-social-link > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  /* Facebook est branché : la mention « bientôt » ne vaut plus */
  .m-social-status { display: none; }

  .m-footer-columns {
    grid-template-columns: 1fr 1fr;
    gap: 24px 18px;
    padding-top: 26px;
    padding-bottom: 22px;
  }
  .m-footer-company { grid-column: 1 / -1; }
  .m-footer-links h3,
  .m-footer-contact h3 { margin-bottom: 10px; font-size: 0.68rem; }
  .m-footer-links a,
  .m-footer-links button {
    padding: 6px 0;
    font-size: 0.82rem;
    line-height: 1.35;
    text-align: left;
  }
  .m-footer-contact { grid-column: 1 / -1; }
  .m-footer-availability { margin-top: 14px; }

  .m-footer-regions { gap: 7px; padding-top: 18px; }
  .m-footer-regions a { padding: 6px 11px; font-size: 0.76rem; }

  .m-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    /* la barre d’appel occupe le bas de l’écran : on lui laisse la place */
    padding-bottom: 92px;
    font-size: 0.76rem;
  }

  /* le bouton remonte au-dessus de la barre d’appel, sans la chevaucher */
  .cps-remonter { right: 14px; bottom: 92px; width: 42px; height: 42px; }
  .cps-remonter svg { width: 18px; height: 18px; }
}

@media (max-width: 380px) {
  .m-footer-columns { grid-template-columns: 1fr; gap: 20px; }
  .m-footer-regions a { padding: 5px 9px; font-size: 0.72rem; }
}

/* ===========================================================================
   RÉSEAUX SOCIAUX — REPRISE
   Les trois pastilles n allaient pas ensemble : Facebook virait au bleu vif au
   survol pendant que les deux autres restaient a 40 % d opacite, comme des
   boutons casses. Meme gabarit pour les trois, chacune prend la couleur de son
   reseau au survol, et les deux comptes a venir sont marques d un point plutot
   qu estompes.
   =========================================================================== */
.m-footer-social { margin: 24px 0 0; }
.m-footer-columns .m-footer-social h3 {
  margin: 0 0 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #8fb0cc;
}

.m-social-links { display: flex; gap: 10px; align-items: center; }

.m-social-link {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 46px;
  min-width: 46px;
  max-width: none;
  height: 46px;
  min-height: 46px;
  padding: 0;
  border: 1px solid #2a4b6a;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  color: #cfe0f0;
  font-size: 0;
  transition: background 220ms, border-color 220ms, color 220ms, transform 220ms;
}
.m-social-link svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.m-social-link .m-instagram-icon { fill: none; stroke: currentColor; stroke-width: 1.8; }
.m-social-link .m-instagram-dot { fill: currentColor; stroke: none; }

/* chaque reseau reprend sa propre couleur — le bleu maison pour tout donnait
   un aplat sans identite */
.m-social-link[data-social='facebook'][href]:hover {
  background: #1877f2;
  border-color: #1877f2;
  color: #fff;
  transform: translateY(-3px);
}

/* comptes a venir : lisibles, avec un point d attente en haut a droite */
.m-social-link[aria-disabled='true'] {
  opacity: 1;
  color: #7c96ad;
  border-color: #23415f;
  background: rgba(255, 255, 255, 0.02);
  cursor: default;
}
.m-social-link[aria-disabled='true']::after {
  content: '';
  position: absolute;
  top: 7px;
  right: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4a6a86;
}
.m-social-link[aria-disabled='true']:hover { transform: none; }

.m-social-status {
  margin: 12px 0 0;
  font-size: 0.76rem;
  line-height: 1.6;
  color: #7f9cb8;
}

/* ------------------------------------------------------------------ ronds flottants
   Le partage et la cloche s empilent au-dessus du bouton « revenir en haut »,
   dans la même colonne et avec la même forme : un seul geste du pouce les
   atteint tous. */
.cps-flottants {
  position: fixed;
  right: 22px;
  bottom: 80px;
  z-index: 60;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 10px;
}
.cps-rond {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #0659a7;
  box-shadow: 0 8px 24px rgba(16, 43, 67, 0.18);
  cursor: pointer;
  transition: background 200ms, color 200ms, transform 200ms;
}
.cps-rond:hover { background: #0659a7; color: #fff; transform: translateY(-2px); }
.cps-rond svg { width: 21px; height: 21px; }
.cps-rond--cloche { background: #2f882c; color: #fff; }
.cps-rond--cloche:hover { background: #256e22; color: #fff; }

/* le mot qui confirme le geste, à gauche du rond */
.cps-rond[data-dit]::after {
  content: attr(data-dit);
  position: absolute;
  right: 58px;
  padding: 7px 12px;
  border-radius: 8px;
  background: #0f2b43;
  color: #fff;
  font-size: 0.8125rem;
  white-space: nowrap;
}
.cps-rond--cloche { position: relative; }

/* ------------------------------------------------------------------ panneau de partage */
.cps-partage-panneau {
  width: 216px;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(16, 43, 67, 0.2);
}
.cps-partage-panneau p {
  margin: 0 0 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7c8c;
}
.cps-partage-liens { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.cps-partage-liens a {
  padding: 9px 6px;
  border: 1px solid #e0e8f0;
  border-radius: 9px;
  color: #0f2b43;
  font-size: 0.8125rem;
  text-align: center;
  text-decoration: none;
  transition: border-color 180ms, background 180ms;
}
.cps-partage-liens a:hover { border-color: #0659a7; background: #f2f7fc; }
.cps-partage-copier {
  width: 100%;
  margin-top: 8px;
  padding: 9px 6px;
  border: 0;
  border-radius: 9px;
  background: #0659a7;
  color: #fff;
  font-size: 0.8125rem;
  cursor: pointer;
}
.cps-partage-copier:hover { background: #044a8d; }

@media (max-width: 700px) {
  /* la barre d appel occupe le bas de l ecran : toute la pile remonte */
  .cps-flottants { right: 14px; bottom: 140px; gap: 9px; }
  .cps-rond { width: 44px; height: 44px; }
  .cps-partage-panneau { width: 200px; }
}

/* ------------------------------------------------------------------ iPhone
   Safari ne propose pas d installer une application et refuse les
   notifications tant que le site n est pas sur l écran d accueil. Les gestes
   ne s inventent pas : ce panneau les montre. */
.cps-rond--app { background: #0659a7; color: #fff; }
.cps-rond--app:hover { background: #044a8d; color: #fff; }

.cps-iphone-panneau {
  position: relative;
  width: min(290px, calc(100vw - 40px));
  padding: 18px 16px 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 44px rgba(16, 43, 67, 0.24);
  text-align: left;
}
.cps-iphone-fermer {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #8a99a7;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.cps-iphone-fermer:hover { background: #f1f5f9; color: #0f2b43; }
.cps-iphone-titre {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  color: #0f2b43;
}
.cps-iphone-chapo {
  margin: 0 0 14px;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #5d7a93;
}
.cps-iphone-etapes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
}
.cps-iphone-etapes li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #0f2b43;
}
.cps-iphone-numero {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #0659a7;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}
.cps-iphone-icone {
  width: 15px;
  height: 15px;
  vertical-align: -3px;
  margin: 0 2px;
  color: #0659a7;
}
.cps-iphone-fin {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid #e8eef4;
  font-size: 0.78125rem;
  line-height: 1.55;
  color: #5d7a93;
}

/* assets/modele/pages.css */
/* ===========================================================================
   PAGES INTERNES
   Memes regles typographiques et memes composants que l accueil : banniere de
   page, corps de texte, tableaux, pastilles, reperes et appel a l action.
   =========================================================================== */

/* ------------------------------------------------------------------ fil d Ariane */
.m-ariane {
  border-bottom: 1px solid var(--line);
  background: #fbfdfd;
  font-size: 0.8125rem;
  color: var(--muted);
}
.m-ariane .m-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 13px 0;
}
.m-ariane a { color: var(--navy); }
.m-ariane a:hover { text-decoration: underline; }
.m-ariane [aria-current='page'] { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------ bannière de page */
.m-page-banner {
  padding: 56px 0 52px;
  background:
    radial-gradient(1100px 380px at 12% -40%, rgba(6, 89, 167, 0.1), transparent 62%),
    linear-gradient(180deg, #f6f9fb, #fff);
  border-bottom: 1px solid var(--line);
}
.m-page-banner-grid { display: grid; gap: 40px; align-items: center; }
.m-page-banner--media .m-page-banner-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.m-page-banner h1 {
  margin: 0 0 16px;
  font-family: Manrope, Arial, sans-serif;
  font-size: clamp(2.05rem, 1.2rem + 2.6vw, 3.15rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1.6px;
}
.m-page-banner h1 em { font-style: normal; color: var(--navy); }
.m-page-banner h1 b { font-weight: 800; color: var(--green); }
.m-page-banner .m-hero-description {
  max-width: 62ch;
  margin: 0 0 24px;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--muted);
}
.m-page-banner .m-hero-actions { margin-bottom: 18px; }
.m-page-banner-media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(16, 43, 67, 0.16);
}
.m-page-banner-media img { width: 100%; height: auto; display: block; }

/* bannière sombre, pour les pages « urgence » et « zone » */
.m-page-banner--nuit {
  background:
    radial-gradient(900px 340px at 80% -30%, rgba(47, 137, 44, 0.22), transparent 60%),
    linear-gradient(160deg, #0a2740, #071a2c 60%);
  border-bottom: 0;
  color: #fff;
}
.m-page-banner--nuit h1 { color: #fff; }
.m-page-banner--nuit h1 em { color: #7fc4ff; }
.m-page-banner--nuit .m-hero-description { color: #b7cbdd; }
.m-page-banner--nuit .m-eyebrow { color: #7fc4ff; }
.m-page-banner--nuit .m-hero-checks span { color: #cfe0ef; }
.m-page-banner--nuit .m-button.m-outline { border-color: rgba(255, 255, 255, 0.34); color: #fff; }

/* ------------------------------------------------------------------ corps de texte */
.m-prose-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: 46px; align-items: start; }
.m-prose-body { max-width: 68ch; }
.m-prose-body h2 {
  margin: 0 0 18px;
  font-family: Manrope, Arial, sans-serif;
  font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.25rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -1.1px;
}
.m-prose-body h2 em { font-style: normal; color: var(--navy); }
.m-prose-body h3 {
  margin: 34px 0 10px;
  font-family: Manrope, Arial, sans-serif;
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -0.4px;
}
.m-prose-body p { margin: 0 0 16px; line-height: 1.8; color: #3f4d5a; }
.m-prose-body ul,
.m-prose-body ol { margin: 0 0 18px; padding-left: 20px; line-height: 1.8; color: #3f4d5a; }
.m-prose-body li { margin-bottom: 7px; }
.m-prose-body li::marker { color: var(--green); }
.m-prose-body a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.m-prose-body strong { color: var(--ink); }

.m-prose-aside { display: grid; gap: 16px; position: sticky; top: 118px; }
.m-prose-aside > div,
.m-prose-aside > nav {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: 0 14px 14px 0;
  background: var(--white);
  font-size: 0.9rem;
  line-height: 1.65;
}
.m-prose-aside h2,
.m-prose-aside strong {
  display: block;
  margin: 0 0 10px;
  font-family: Manrope, Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.m-prose-aside a { display: block; padding: 5px 0; color: var(--muted); }
.m-prose-aside a:hover { color: var(--navy); }

/* ------------------------------------------------------------------ tableaux */
.m-table-wrap { overflow-x: auto; }
.m-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.m-table th,
.m-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.m-table thead th {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--pale);
}
.m-table tbody th { font-weight: 700; color: var(--ink); }
.m-table tbody tr:last-child th,
.m-table tbody tr:last-child td { border-bottom: 0; }
.m-table-note { margin: 12px 0 0; font-size: 0.84rem; color: var(--muted); }

/* ------------------------------------------------------------------ pastilles */
.m-pills { display: flex; flex-wrap: wrap; gap: 9px; }
.m-pills a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: 0.88rem;
  transition: border-color 180ms, background 180ms, color 180ms;
}
.m-pills a b {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--navy);
}
.m-pills a:hover { border-color: var(--navy); background: var(--navy); color: #fff; }
.m-pills a:hover b { color: rgba(255, 255, 255, 0.8); }

/* ------------------------------------------------------------------ repères */
.m-marks { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 16px; }
.m-marks > div {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
}
.m-marks svg { width: 26px; height: 26px; margin-bottom: 12px; color: var(--green); }
.m-marks strong {
  display: block;
  margin-bottom: 7px;
  font-family: Manrope, Arial, sans-serif;
  font-size: 1.02rem;
  letter-spacing: -0.35px;
}
.m-marks p { margin: 0; font-size: 0.9rem; line-height: 1.7; color: var(--muted); }

/* ------------------------------------------------------------------ étapes */
.m-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 16px; }
.m-steps > div {
  position: relative;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
}
.m-step-number {
  position: absolute;
  top: 18px;
  right: 20px;
  font-family: Manrope, Arial, sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: #e7eef4;
}
.m-steps svg { width: 24px; height: 24px; margin-bottom: 14px; color: var(--navy); }
.m-steps h3 {
  margin: 0 0 8px;
  font-family: Manrope, Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.35px;
}
.m-steps p { margin: 0; font-size: 0.9rem; line-height: 1.7; color: var(--muted); }
.m-step-note {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #eef6ed;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--deep-green);
}

/* ------------------------------------------------------------------ encadrés sombres */
.m-commitment-cards { display: grid; gap: 14px; }
.m-commitment-cards > div {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}
.m-commitment-cards svg { width: 22px; height: 22px; margin-bottom: 10px; color: var(--navy); }
.m-commitment-cards strong {
  display: block;
  margin-bottom: 6px;
  font-family: Manrope, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
}
.m-commitment-cards p { margin: 0; font-size: 0.88rem; line-height: 1.7; color: var(--muted); }
.m-commitment-cards p:empty { display: none; }

/* ------------------------------------------------------------------ appel à l action */
.m-cta-inner {
  padding: 46px clamp(24px, 4vw, 56px);
  border-radius: 24px;
  background:
    radial-gradient(700px 260px at 85% -20%, rgba(47, 137, 44, 0.3), transparent 60%),
    linear-gradient(150deg, #0a2740, #071a2c);
  color: #fff;
  text-align: center;
}
.m-cta-inner .m-eyebrow { color: #7fc4ff; justify-content: center; }
.m-cta-inner h2 {
  max-width: 24ch;
  margin: 12px auto 14px;
  font-family: Manrope, Arial, sans-serif;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.15rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -1px;
}
.m-cta-inner p { max-width: 58ch; margin: 0 auto 22px; line-height: 1.75; color: #b7cbdd; }
.m-cta-inner .m-hero-actions { justify-content: center; }
.m-cta-inner .m-button.m-outline { border-color: rgba(255, 255, 255, 0.34); color: #fff; }

/* ------------------------------------------------------------------ adaptations */
@media (max-width: 62rem) {
  .m-prose-grid { grid-template-columns: 1fr; gap: 28px; }
  .m-prose-aside { position: static; order: -1; }
  .m-prose-aside > nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 2px 14px;
  }
  .m-prose-aside > nav strong { grid-column: 1 / -1; }
  .m-page-banner--media .m-page-banner-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .m-page-banner { padding: 34px 0 32px; }
  .m-page-banner .m-hero-actions { flex-direction: column; align-items: stretch; }
  .m-page-banner .m-hero-actions .m-button { justify-content: center; }
  .m-cta-inner { padding: 34px 22px; }
  .m-cta-inner .m-hero-actions { flex-direction: column; }
  .m-table { font-size: 0.86rem; }
  .m-table thead { display: none; }
  .m-table tbody tr { display: grid; border-bottom: 1px solid var(--line); }
  .m-table tbody tr:last-child { border-bottom: 0; }
  .m-table th,
  .m-table td {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 10px;
    padding: 10px 14px;
    border: 0;
  }
  .m-table td::before,
  .m-table tbody th::before {
    content: attr(data-libelle);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
  }
}

/* ------------------------------------------------------------------ boutons sur fond clair */
/* la maquette prévoit le bouton à contour pour un héros sombre : sur une
   bannière claire, son texte blanc devenait invisible. */
.m-page-banner:not(.m-page-banner--nuit) .m-hero-actions .m-outline {
  background: #fff;
  color: var(--navy);
  border-color: #b8cde1;
  backdrop-filter: none;
}
.m-page-banner:not(.m-page-banner--nuit) .m-hero-actions .m-outline:hover {
  border-color: var(--navy);
  background: #f0f6fc;
}
.m-page-banner:not(.m-page-banner--nuit) .m-hero-checks span { color: var(--muted); }
.m-page-banner:not(.m-page-banner--nuit) .m-hero-checks svg { color: var(--green); }

/* ------------------------------------------------------------------ cartes de département */
.m-zone-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 16px; }
.m-zone-cards article {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  transition: border-color 200ms, transform 200ms, box-shadow 200ms;
}
.m-zone-cards article:hover {
  border-color: var(--navy);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(16, 43, 67, 0.1);
}
.m-zone-cards header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.m-zone-cards h3 {
  margin: 0;
  font-family: Manrope, Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.4px;
}
.m-zone-cards header span {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 1.4px;
  color: var(--navy);
}
.m-zone-cards p { margin: 0; font-size: 0.9rem; line-height: 1.7; color: var(--muted); }
.m-zone-cards-communes { font-size: 0.82rem !important; color: #8a97a3 !important; }
.m-zone-cards .m-text-link { margin-top: auto; padding-top: 6px; }

/* ------------------------------------------------------------------ listes de communes */
.m-commune-groupe { padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--line); }
.m-commune-groupe:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.m-commune-groupe h3 {
  margin: 0 0 12px;
  font-family: Manrope, Arial, sans-serif;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.35px;
}
.m-commune-groupe h3 a { display: inline-flex; align-items: baseline; gap: 8px; }
.m-commune-groupe h3 b {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--navy);
}
.m-commune-groupe h3 a:hover { color: var(--navy); }

/* ------------------------------------------------------------------ liste d arguments sombres */
.m-commitment-list { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.m-commitment-list li {
  display: grid;
  gap: 3px;
  padding-left: 22px;
  position: relative;
  font-size: 0.92rem;
  line-height: 1.65;
}
.m-commitment-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}
.m-commitment-list strong { color: var(--ink); font-weight: 700; }
.m-commitment-list span { color: var(--muted); }

/* ------------------------------------------------------------------ éléments vérifiables */
.m-preuve-detail {
  display: block;
  margin-top: 4px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--navy);
}
.m-marks p a { color: var(--navy); }

/* ------------------------------------------------------------------ avis */
.m-avis-bandeau {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 20px 24px;
  border: 1px solid #f0d9a8;
  border-left: 3px solid #d79a2b;
  border-radius: 0 14px 14px 0;
  background: #fdf8ee;
}
.m-avis-bandeau svg { width: 24px; height: 24px; color: #b8801d; }
.m-avis-bandeau strong {
  display: block;
  margin-bottom: 6px;
  font-family: Manrope, Arial, sans-serif;
  font-size: 1rem;
}
.m-avis-bandeau p { margin: 0; font-size: 0.9rem; line-height: 1.7; color: #6b5b3e; }

.m-avis-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 16px; }
.m-avis-carte {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
}
.m-avis-note { color: #e9a531; letter-spacing: 2px; font-size: 0.95rem; }
.m-avis-carte p { margin: 0; font-size: 0.93rem; line-height: 1.75; color: #3f4d5a; }
.m-avis-carte footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--muted);
}
.m-avis-carte footer strong { color: var(--ink); font-size: 0.9rem; }
.m-avis-carte time { margin-left: auto; font-size: 0.76rem; }

/* ------------------------------------------------------------------ plan du site */
.m-plan-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 30px; }
.m-plan-colonne h3 {
  margin: 0 0 14px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.m-plan-colonne ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.m-plan-colonne a {
  display: block;
  padding: 6px 0;
  font-size: 0.9rem;
  color: var(--ink);
  transition: color 180ms, transform 180ms;
}
.m-plan-colonne a:hover { color: var(--navy); transform: translateX(3px); }

/* ===========================================================================
   SECTION D ENGAGEMENTS SANS VISUEL
   La grille de la maquette attend une image à gauche et le texte à droite.
   Sans image, la moitié de la largeur restait vide et les encadrés
   s’empilaient en colonne. Ici, le titre occupe le haut et les encadrés se
   répartissent en dessous.
   =========================================================================== */
.m-commitments--plein .m-commitments-grid {
  display: block;
}
.m-commitments--plein .m-commitment-title {
  max-width: 46rem;
  margin-bottom: 30px;
}
.m-commitments--plein .m-commitment-cards {
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 16px;
}
.m-commitments--plein .m-commitment-cards > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* un encadré sans texte n’a pas besoin de la place d’un paragraphe */
.m-commitments--plein .m-commitment-cards p:empty { display: none; }

@media (max-width: 700px) {
  .m-commitments--plein .m-commitment-title { margin-bottom: 22px; }
  .m-commitments--plein .m-commitment-cards { grid-template-columns: 1fr; }
}

/* ===========================================================================
   DENSITÉ DES PAGES INTERNES
   La maquette espace ses sections de 95 px en haut et en bas : c’est juste sur
   l’accueil, où chaque section porte des photos et des cartes. Sur les pages
   de contenu, cela créait de grands vides entre un titre et une simple liste.
   Ces règles ne touchent que les pages internes, reconnaissables à leur
   bannière — l’accueil garde exactement son rythme d’origine.
   =========================================================================== */
body:has(.m-page-banner) .m-section { padding: 58px 0; }
body:has(.m-page-banner) .m-section + .m-section { padding-top: 0; }
body:has(.m-page-banner) .m-section-heading { margin-bottom: 28px; gap: 38px; }

body:has(.m-page-banner) .m-section-heading h2,
body:has(.m-page-banner) .m-commitment-title h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  line-height: 1.14;
  letter-spacing: -1px;
}
body:has(.m-page-banner) .m-section-heading p { font-size: 0.95rem; line-height: 1.7; }

/* une section qui ne porte qu’une liste de pastilles n’a pas besoin d’air */
body:has(.m-page-banner) .m-zone-autres,
body:has(.m-page-banner) .m-zone-rappel,
body:has(.m-page-banner) .m-faq-liens,
body:has(.m-page-banner) .m-404 {
  padding: 40px 0;
}
body:has(.m-page-banner) .m-zone-autres .m-section-heading,
body:has(.m-page-banner) .m-zone-rappel .m-section-heading,
body:has(.m-page-banner) .m-faq-liens .m-section-heading {
  margin-bottom: 18px;
}
body:has(.m-page-banner) .m-zone-autres .m-section-heading h2,
body:has(.m-page-banner) .m-zone-rappel .m-section-heading h2,
body:has(.m-page-banner) .m-faq-liens .m-section-heading h2 {
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.6rem);
}

/* la bannière et le premier bloc se suivent de près */
body:has(.m-page-banner) .m-page-banner { padding: 46px 0 42px; }
body:has(.m-page-banner) .m-prose-grid { gap: 38px; }
body:has(.m-page-banner) .m-cta-inner { padding: 38px clamp(22px, 3.5vw, 48px); }

@media (max-width: 700px) {
  body:has(.m-page-banner) .m-section { padding: 38px 0; }
  body:has(.m-page-banner) .m-zone-autres,
  body:has(.m-page-banner) .m-zone-rappel,
  body:has(.m-page-banner) .m-faq-liens { padding: 28px 0; }
}

/* ===========================================================================
   CARTES DE DÉPARTEMENT
   La liste de pastilles était trop maigre pour occuper une section entière.
   Chaque département devient une carte : son numéro en grand, son nom, le
   nombre de communes, et une flèche qui se révèle au survol.
   =========================================================================== */
.m-depts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 12px;
}
/* une ligne simple : pastille, texte, fleche — pas de grille imbriquee, qui
   coupait les noms longs comme « Hauts-de-Seine » sur trois lignes */
.m-dept {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  overflow: hidden;
  transition: border-color 200ms, transform 200ms, box-shadow 220ms;
}
.m-dept::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--navy), var(--green));
  opacity: 0;
  transition: opacity 200ms;
}
.m-dept:hover {
  border-color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(16, 43, 67, 0.1);
}
.m-dept:hover::before { opacity: 1; }

.m-dept__code {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #eef4fb;
  font-family: Manrope, Arial, sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--navy);
  transition: background 200ms, color 200ms;
}
.m-dept:hover .m-dept__code { background: var(--navy); color: #fff; }

/* le nom et le detail forment une colonne qui prend la place restante */
.m-dept__nom {
  flex: 1 1 auto;
  min-width: 0;
  font-family: Manrope, Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.35px;
  line-height: 1.25;
  color: var(--ink);
}
.m-dept__detail {
  display: block;
  margin-top: 1px;
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}
.m-dept__fleche {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--navy);
  opacity: 0;
  translate: -5px 0;
  transition: opacity 200ms, translate 200ms;
}
.m-dept__fleche svg { width: 16px; height: 16px; }
.m-dept:hover .m-dept__fleche { opacity: 1; translate: 0 0; }

:root[data-theme='nuit'] .m-dept { background: var(--white); border-color: var(--line); }
:root[data-theme='nuit'] .m-dept__code { background: #16324c; color: #7fc4ff; }
:root[data-theme='nuit'] .m-dept__nom { color: var(--ink); }

@media (max-width: 600px) {
  .m-depts { grid-template-columns: 1fr 1fr; gap: 10px; }
  .m-dept { padding: 12px 13px; gap: 10px; }
  .m-dept__code { width: 34px; height: 34px; font-size: 0.82rem; }
  .m-dept__nom { font-size: 0.86rem; }
  .m-dept__fleche { display: none; }
}

/* ===========================================================================
   PAGE APPLICATION
   =========================================================================== */
.m-app-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 16px;
}
.m-app-carte {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
}
.m-app-carte h3 {
  margin: 0;
  font-family: Manrope, Arial, sans-serif;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.35px;
}
.m-app-carte p { margin: 0; font-size: 0.9rem; line-height: 1.7; color: var(--muted); }
.m-app-carte .m-button { justify-self: start; margin-top: 4px; }

.m-app-etat {
  padding: 10px 13px;
  border-radius: 10px;
  background: var(--pale);
  font-size: 0.84rem !important;
  line-height: 1.6 !important;
}
.m-app-etat[data-etat='ok'] { background: #eef7ed; color: var(--deep-green) !important; }
.m-app-etat[data-etat='erreur'] { background: #fdeceb; color: #a8342a !important; }
.m-app-etat[data-etat='aide'] { background: #fdf6e8; color: #8a6420 !important; }

.m-app-note {
  margin-top: 20px;
  padding: 20px 24px;
  border: 1px solid #f0d9a8;
  border-left: 3px solid #d79a2b;
  border-radius: 0 14px 14px 0;
  background: #fdf8ee;
}
.m-app-note strong {
  display: block;
  margin-bottom: 6px;
  font-family: Manrope, Arial, sans-serif;
  font-size: 1rem;
}
.m-app-note p { margin: 0; font-size: 0.9rem; line-height: 1.75; color: #6b5b3e; }

:root[data-theme='nuit'] .m-app-carte { background: var(--white); border-color: var(--line); }
:root[data-theme='nuit'] .m-app-etat { background: #0b1f33; }
:root[data-theme='nuit'] .m-app-note { background: #2a2113; border-color: #5a4520; }
:root[data-theme='nuit'] .m-app-note p { color: #d6c39a; }

/* ===========================================================================
   APPARITION DES BLOCS
   Montée courte et fondu. Le décalage entre les cartes d’une même grille est
   posé par le script : c’est lui qui donne la cascade.
   =========================================================================== */
.cps-apparait {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 620ms cubic-bezier(0.22, 0.8, 0.28, 1) var(--cps-retard, 0ms),
    transform 620ms cubic-bezier(0.22, 0.8, 0.28, 1) var(--cps-retard, 0ms);
  will-change: opacity, transform;
}
.cps-apparait.cps-vu {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* un visiteur qui limite les animations voit la page telle quelle */
@media (prefers-reduced-motion: reduce) {
  .cps-apparait { opacity: 1; transform: none; transition: none; }
}

/* ===========================================================================
   EN-TÊTE DE SECTION — COMPOSITION
   ---------------------------------------------------------------------------
   Le flex en space-between poussait le paragraphe contre le bord droit : sur
   un grand écran il restait 600 px de vide entre le titre et lui, et le texte
   semblait détaché de la section. Une grille de deux colonnes tenues remet le
   propos à distance de lecture du titre.
   =========================================================================== */
.m-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.8fr);
  align-items: end;
  gap: clamp(26px, 3.4vw, 58px);
}
/* un en-tête sans paragraphe garde toute la largeur */
.m-section-heading > :only-child { grid-column: 1 / -1; }

.m-section-heading > p {
  max-width: 46ch;
  border-left: 3px solid var(--green);
  padding: 4px 0 4px 22px;
  margin-bottom: 6px;
}

@media (max-width: 900px) {
  .m-section-heading {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 18px;
  }
  .m-section-heading > p { margin-bottom: 0; }
}

/* assets/modele/documents.css */
/* ===========================================================================
   PAGES DOCUMENTAIRES — mentions légales, conditions, données, cookies
   ---------------------------------------------------------------------------
   Direction : un dossier technique, pas un livre. Chaque rubrique est une
   fiche numérotée que l’on déplie ; un filet bleu-vert court le long de la
   fiche ouverte comme une conduite, et le numéro est composé en chasse fixe,
   comme sur un rapport d’intervention. Pleine largeur, lecture par morceaux.
   =========================================================================== */

.m-doc-section-page { padding-top: 40px; }

/* ------------------------------------------------------------------ sommaire */
.m-doc-sommaire {
  display: grid;
  gap: 12px;
  padding: 20px 22px;
  margin-bottom: 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(180deg, #fbfdfe, var(--white));
}
.m-doc-sommaire__titre {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--muted);
}
.m-doc-sommaire > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.m-doc-sommaire a {
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: 0.83rem;
  color: var(--ink);
  transition: border-color 180ms, background 180ms, color 180ms;
}
.m-doc-sommaire a:hover {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

/* ------------------------------------------------------------------ fiches */
.m-doc { display: grid; gap: 10px; }

.m-doc-section {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  overflow: hidden;
  transition: border-color 220ms, box-shadow 240ms;
  scroll-margin-top: 110px;
}
/* la conduite : un filet qui se remplit quand la fiche s’ouvre */
.m-doc-section::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--navy), var(--green));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 320ms cubic-bezier(0.22, 0.8, 0.28, 1);
}
.m-doc-section[open] { border-color: #cfdeeb; box-shadow: 0 10px 26px rgba(16, 43, 67, 0.06); }
.m-doc-section[open]::before { transform: scaleY(1); }
.m-doc-section:hover { border-color: #cfdeeb; }

.m-doc-section > summary {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 17px 20px 17px 22px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.m-doc-section > summary::-webkit-details-marker { display: none; }
.m-doc-section > summary:focus-visible { outline: 3px solid #458db4; outline-offset: -3px; }

.m-doc-numero {
  flex: 0 0 auto;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--navy);
  opacity: 0.55;
  transition: opacity 200ms;
}
.m-doc-section[open] .m-doc-numero { opacity: 1; }

.m-doc-titre {
  flex: 1 1 auto;
  min-width: 0;
  font-family: Manrope, Arial, sans-serif;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.3;
  color: var(--ink);
}

/* Le socle du site pose un « + » sur chaque summary. Ici, le chevron le
   remplace : garder les deux donnait deux repères superposés et décalés. */
.m-doc-section summary::after,
.m-doc-section[open] summary::after { content: none; display: none; }

/* chevron dessiné en CSS : deux traits, pas d’image à charger */
.m-doc-chevron {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  rotate: 45deg;
  translate: 0 -2px;
  transition: rotate 260ms cubic-bezier(0.22, 0.8, 0.28, 1), translate 260ms, border-color 200ms;
}
.m-doc-section[open] .m-doc-chevron {
  rotate: -135deg;
  translate: 0 2px;
  border-color: var(--navy);
}

/* ------------------------------------------------------------------ corps */
.m-doc-corps {
  padding: 2px 24px 22px 22px;
  /* deux colonnes de lecture sur grand écran : on divise la hauteur par deux
     sans jamais dépasser la largeur de lecture confortable */
  columns: 2;
  column-gap: 42px;
  font-size: 0.94rem;
  line-height: 1.8;
  color: #3f4d5a;
}
.m-doc-corps > * { break-inside: avoid; }
.m-doc-corps p { margin: 0 0 14px; }
.m-doc-corps p:last-child { margin-bottom: 0; }
.m-doc-corps strong { color: var(--ink); font-weight: 700; }
.m-doc-corps a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

.m-doc-corps h3 {
  margin: 4px 0 8px;
  font-family: Manrope, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.m-doc-corps ul,
.m-doc-corps ol { margin: 0 0 14px; padding-left: 20px; }
.m-doc-corps li { margin-bottom: 6px; }
.m-doc-corps li::marker { color: var(--green); }

/* tableaux (cookies, durées de conservation) */
.m-doc-corps table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 16px;
  font-size: 0.86rem;
  break-inside: avoid;
}
.m-doc-corps th,
.m-doc-corps td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.m-doc-corps thead th {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--pale);
}

/* mention d’information à compléter, héritée des gabarits légaux */
.m-doc-corps code,
.m-doc-corps .a-completer {
  padding: 2px 7px;
  border-radius: 6px;
  background: #fdf3e0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.76rem;
  color: #8a6420;
}

.m-doc-corps--seul { columns: 1; max-width: 70ch; padding: 0; }

/* ------------------------------------------------------------------ mode nuit */
:root[data-theme='nuit'] .m-doc-sommaire {
  background: var(--white);
  border-color: var(--line);
}
:root[data-theme='nuit'] .m-doc-sommaire a {
  background: #0b1f33;
  border-color: var(--line);
  color: var(--ink);
}
:root[data-theme='nuit'] .m-doc-section { background: var(--white); border-color: var(--line); }
:root[data-theme='nuit'] .m-doc-section[open] { border-color: #26456220; }
:root[data-theme='nuit'] .m-doc-titre { color: var(--ink); }
:root[data-theme='nuit'] .m-doc-corps { color: #b7c9d8; }
:root[data-theme='nuit'] .m-doc-corps h3,
:root[data-theme='nuit'] .m-doc-corps strong { color: var(--ink); }
:root[data-theme='nuit'] .m-doc-corps thead th { background: #0b1f33; }
:root[data-theme='nuit'] .m-doc-corps th,
:root[data-theme='nuit'] .m-doc-corps td { border-bottom-color: var(--line); }
:root[data-theme='nuit'] .m-doc-corps code { background: #2a2113; color: #e0c98f; }

/* ------------------------------------------------------------------ téléphone */
@media (max-width: 62rem) {
  /* une seule colonne : deux colonnes sur un écran étroit rendent la lecture
     impossible, le regard doit remonter tout le temps */
  .m-doc-corps { columns: 1; }
}

@media (max-width: 700px) {
  .m-doc-section-page { padding-top: 26px; }
  .m-doc-sommaire {
    padding: 15px 16px;
    margin-bottom: 18px;
    border-radius: 14px;
  }
  .m-doc-sommaire > div {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .m-doc-sommaire > div::-webkit-scrollbar { display: none; }
  .m-doc-sommaire a { flex: 0 0 auto; padding: 6px 12px; font-size: 0.79rem; }

  .m-doc-section > summary { gap: 11px; padding: 15px 16px 15px 18px; }
  .m-doc-titre { font-size: 0.94rem; }
  .m-doc-corps { padding: 0 18px 18px; font-size: 0.9rem; line-height: 1.75; }
  .m-doc-corps table { font-size: 0.8rem; }
  .m-doc-corps th, .m-doc-corps td { padding: 8px 9px; }
}

/* assets/modele/carte.css */
/* ===========================================================================
   CARTE DE L ÎLE-DE-FRANCE
   ---------------------------------------------------------------------------
   Les départements sont posés sur un plan incliné, comme une carte d’état-major
   dépliée sur un capot. Chaque zone porte son ombre propre ; celle que l’on
   survole se soulève et vient au premier plan. Contours officiels, aucun
   script, aucune bibliothèque de cartographie.
   =========================================================================== */

.cps-carte {
  display: grid;
  gap: 22px;
}

/* ------------------------------------------------------------------ plateau */
.cps-carte__plateau {
  position: relative;
  /* la carte occupait toute la largeur de page : 1 900 px de plateau pour une
     region qui se lit tres bien en 760. width:100% est indispensable — dans
     une grille, une marge auto sans largeur fait retomber le bloc sur son
     contenu (le SVG revenait a 300 px). */
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(14px, 2.5vw, 26px);
  border-radius: 22px;
  background:
    radial-gradient(120% 90% at 50% 0%, #f7fbfd 0%, #eef4f8 55%, #e6eef4 100%);
  border: 1px solid var(--line);
  overflow: hidden;
  /* la profondeur vient de la perspective : le haut de la carte s’éloigne */
  perspective: 1400px;
  perspective-origin: 50% 20%;
}
/* trame de fond, comme le quadrillage d’un plan de réseau */
.cps-carte__plateau::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(6, 89, 167, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 89, 167, 0.055) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(100% 75% at 50% 45%, #000 40%, transparent 100%);
  pointer-events: none;
}

.cps-carte__dessin {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transform: rotateX(16deg) scale(0.97);
  transform-origin: 50% 60%;
  transition: transform 600ms cubic-bezier(0.22, 0.8, 0.28, 1);
}
.cps-carte__plateau:hover .cps-carte__dessin { transform: rotateX(9deg) scale(1); }

/* ------------------------------------------------------------------ départements */
.cps-carte__zone {
  cursor: pointer;
  transition: transform 340ms cubic-bezier(0.22, 0.8, 0.28, 1);
  transform-box: fill-box;
  transform-origin: center;
}

/* l’épaisseur : une copie décalée vers le bas, sous la forme */
.cps-carte__ombre {
  fill: #c6d6e3;
  transform: translate(2px, 6px);
  transition: transform 340ms cubic-bezier(0.22, 0.8, 0.28, 1), fill 280ms;
}

.cps-carte__forme {
  /* fond blanc sur plateau clair : les limites de departement
     disparaissaient. Un bleu tres pale et un trait franc les redessinent. */
  fill: #f2f7fb;
  stroke: #9db9d1;
  stroke-width: 2.4;
  stroke-linejoin: round;
  transition: fill 280ms, stroke 280ms;
}

.cps-carte__pastille {
  fill: #ffffff;
  opacity: 0.9;
  transition: opacity 280ms, fill 280ms;
}
.cps-carte__code {
  font-family: Manrope, Arial, sans-serif;
  font-size: 21px;
  font-weight: 800;
  fill: #0659a7;
  opacity: 0.7;
  pointer-events: none;
  transition: opacity 280ms, fill 280ms;
}

/* survol : la zone se soulève et prend la couleur de la maison */
.cps-carte__zone:hover { transform: translateY(-7px); }
.cps-carte__zone:hover .cps-carte__ombre { transform: translate(4px, 15px); fill: #98b2c6; }
.cps-carte__zone:hover .cps-carte__forme { fill: #0659a7; stroke: #044a8d; }
.cps-carte__zone:hover .cps-carte__pastille { opacity: 0; }
.cps-carte__zone:hover .cps-carte__code { fill: #fff; opacity: 1; }

.cps-carte__zone:focus-visible { outline: none; }
.cps-carte__zone:focus-visible .cps-carte__forme {
  stroke: #0659a7;
  stroke-width: 5;
  stroke-dasharray: 10 6;
}

/* département de la page en cours : en vert, déjà soulevé */
.cps-carte__zone--active { transform: translateY(-5px); }
.cps-carte__zone--active .cps-carte__forme { fill: #2f892c; stroke: #256d23; }
.cps-carte__zone--active .cps-carte__ombre { transform: translate(4px, 13px); fill: #9dbb9b; }
.cps-carte__zone--active .cps-carte__pastille { opacity: 0; }
.cps-carte__zone--active .cps-carte__code { fill: #fff; opacity: 1; }
.cps-carte__zone--active:hover .cps-carte__forme { fill: #256d23; }

/* ------------------------------------------------------------------ légende */
.cps-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cps-legende__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: 0.86rem;
  color: var(--ink);
  transition: border-color 200ms, background 200ms, color 200ms, transform 200ms;
}
.cps-legende__item b {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--navy);
  transition: color 200ms;
}
.cps-legende__item:hover {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
  transform: translateY(-2px);
}
.cps-legende__item:hover b { color: rgba(255, 255, 255, 0.78); }
.cps-legende__item--active {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}
.cps-legende__item--active b { color: rgba(255, 255, 255, 0.8); }
.cps-legende__item--active:hover { border-color: var(--green); background: #256d23; }

/* ------------------------------------------------------------------ mode nuit */
:root[data-theme='nuit'] .cps-carte__plateau {
  background: radial-gradient(120% 90% at 50% 0%, #10293f 0%, #0c2034 60%, #091a2b 100%);
  border-color: var(--line);
}
:root[data-theme='nuit'] .cps-carte__plateau::before {
  background-image:
    linear-gradient(rgba(127, 196, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 196, 255, 0.07) 1px, transparent 1px);
}
:root[data-theme='nuit'] .cps-carte__ombre { fill: #061523; }
:root[data-theme='nuit'] .cps-carte__forme { fill: #17324b; stroke: #24455f; }
:root[data-theme='nuit'] .cps-carte__code { fill: #7fc4ff; opacity: 0.7; }
:root[data-theme='nuit'] .cps-carte__pastille { fill: #7fc4ff; }
:root[data-theme='nuit'] .cps-carte__zone:hover .cps-carte__forme { fill: #0659a7; stroke: #4a9fe8; }
:root[data-theme='nuit'] .cps-legende__item { background: var(--white); border-color: var(--line); }

/* ------------------------------------------------------------------ téléphone */
@media (max-width: 700px) {
  .cps-carte { gap: 16px; }
  .cps-carte__plateau { padding: 10px; border-radius: 16px; }
  /* à plat sur petit écran : l’inclinaison mange de la hauteur utile */
  .cps-carte__dessin { transform: none; }
  .cps-carte__plateau:hover .cps-carte__dessin { transform: none; }
  .cps-carte__code { font-size: 26px; }
  .cps-legende {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .cps-legende::-webkit-scrollbar { display: none; }
  .cps-legende__item { flex: 0 0 auto; padding: 7px 12px; font-size: 0.8rem; }
}

/* le visiteur qui limite les animations garde une carte fixe */
@media (prefers-reduced-motion: reduce) {
  .cps-carte__dessin,
  .cps-carte__zone,
  .cps-carte__ombre { transition: none; }
  .cps-carte__dessin { transform: none; }
}

/* ===========================================================================
   LES PATRONS SUR LE RADAR
   ---------------------------------------------------------------------------
   Deux jetons posés sur le cadran, à l endroit où Kerian et Tiago
   interviennent. Ils se déplacent au fil de la journée ; un clic ouvre la
   fiche de l intervention en cours.
   =========================================================================== */
.cps-patron {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  z-index: 6;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: left 1400ms cubic-bezier(0.32, 0.72, 0.28, 1),
              top 1400ms cubic-bezier(0.32, 0.72, 0.28, 1);
}

/* Hors des heures de travail, le script pose l attribut « hidden ». Sans
   cette regle, le « display: grid » ci-dessus l emporte sur la feuille du
   navigateur et le jeton reste affiche — pose au centre du cadran, faute de
   coordonnees. C est ce qui laissait un gerant sur le radar a 19 h 45. */
.cps-patron[hidden] { display: none; }

.cps-patron__jeton {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 6px 14px rgba(3, 18, 32, 0.55));
  transition: transform 220ms cubic-bezier(0.22, 0.8, 0.28, 1);
}
.cps-patron__jeton svg { width: 100%; height: 100%; }
.cps-patron:hover .cps-patron__jeton,
.cps-patron[aria-expanded='true'] .cps-patron__jeton { transform: scale(1.12); }

/* halo qui respire : on repère le jeton sans qu il clignote */
.cps-patron__halo {
  position: absolute;
  top: 21px;
  left: 50%;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border-radius: 50%;
  background: var(--teinte);
  opacity: 0.32;
  animation: cps-patron-onde 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes cps-patron-onde {
  0% { transform: scale(0.7); opacity: 0.4; }
  70% { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}

.cps-patron__etiquette {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(6, 28, 52, 0.88);
  color: #fff;
  font-family: Manrope, Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.cps-patron:hover .cps-patron__etiquette,
.cps-patron[aria-expanded='true'] .cps-patron__etiquette { background: var(--teinte); }

.cps-patron:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 12px; }

/* ------------------------------------------------------------------ fiche */
.cps-patron-popin {
  position: absolute;
  z-index: 70;
  width: min(320px, calc(100vw - 24px));
  padding: 18px 20px 20px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(4, 22, 40, 0.34);
  color: var(--ink, #102b43);
}
.cps-patron-popin[hidden] { display: none; }

.cps-patron-popin__fermer {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #7b8b9a;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.cps-patron-popin__fermer:hover { background: #f1f5f9; color: #102b43; }

.cps-patron-popin__entete {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e6edf4;
}
.cps-patron-popin__pastille {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--teinte);
  color: #fff;
  font-family: Manrope, Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  flex-shrink: 0;
}
.cps-patron-popin__entete strong {
  display: block;
  font-family: Manrope, Arial, sans-serif;
  font-size: 1.08rem;
  letter-spacing: -0.4px;
}
.cps-patron-popin__entete span { font-size: 0.8rem; color: #64788c; line-height: 1.4; }

.cps-patron-popin__faits { margin: 14px 0 0; display: grid; gap: 11px; }
.cps-patron-popin__faits > div { display: grid; grid-template-columns: 74px 1fr; gap: 10px; }
.cps-patron-popin__faits dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #94a7b8;
  padding-top: 2px;
}
.cps-patron-popin__faits dd { margin: 0; font-size: 0.89rem; line-height: 1.5; }
.cps-patron-popin__faits b { color: var(--navy, #0659a7); }

.cps-patron-popin__note {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 9px;
  background: #f4f7fa;
  font-size: 0.79rem;
  line-height: 1.55;
  color: #64788c;
}
.cps-patron-popin__appel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin-top: 13px;
  border-radius: 9px;
  background: var(--green, #2f882c);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}
.cps-patron-popin__appel:hover { background: #256d23; }

:root[data-theme='nuit'] .cps-patron-popin { background: #10293f; color: #e3edf6; }
:root[data-theme='nuit'] .cps-patron-popin__entete { border-color: #22425c; }
:root[data-theme='nuit'] .cps-patron-popin__note { background: #0c2034; color: #a9c2d8; }

@media (max-width: 700px) {
  .cps-patron__jeton { width: 34px; height: 34px; }
  .cps-patron__halo { width: 34px; height: 34px; top: 17px; margin: -17px 0 0 -17px; }
  .cps-patron__etiquette { font-size: 0.66rem; padding: 2px 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .cps-patron { transition: none; }
  .cps-patron__halo { animation: none; opacity: 0.25; }
}

/* les photos de l equipe remplacent le jeton dessine */
.cps-patron__jeton img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  background: #10293f;
}
.cps-patron-popin__pastille img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* assets/modele/nuit.css */
/* ===========================================================================
   MODE NUIT
   Le site est dessine pour le jour : fond blanc, texte charbon. En mode nuit,
   les variables de la maquette changent de valeur, et les surfaces qui portaient
   un blanc ecrit en dur sont reprises une a une. Les blocs deja sombres — pied
   de page, bandeau d urgence, section « engagement », appel a l action — ne
   bougent pas : ils font deja partie du dessin.
   =========================================================================== */

:root[data-theme='nuit'] {
  --ink: #e9eff5;
  --muted: #9db2c4;
  --line: #1d3247;
  --pale: #0d2031;
  --white: #102639;
  --navy: #58a9ee;
  --green: #4cb545;
  --deep-green: #4cb545;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ fonds */
:root[data-theme='nuit'] body { background: #08192a; color: var(--ink); }

:root[data-theme='nuit'] header { background: #0b1f33f2; border-bottom-color: var(--line); }
:root[data-theme='nuit'] .m-nav nav a { color: var(--ink); }

/* Le panneau deroulant du telephone : « background: white » est ecrit en dur
   dans la maquette. Sans cette reprise, le menu ouvert etait blanc sur blanc. */
:root[data-theme='nuit'] .m-nav nav {
  background: #0b1f33;
  border-bottom: 1px solid var(--line);
}
:root[data-theme='nuit'] .m-nav nav > ul > li + li,
:root[data-theme='nuit'] .m-nav nav li { border-color: var(--line); }

/* les sous-menus, qui portaient eux aussi un fond clair */
:root[data-theme='nuit'] .cps-sous-menu,
:root[data-theme='nuit'] .m-nav nav ul ul,
:root[data-theme='nuit'] .cps-panneau { background: #0d2740; border-color: var(--line); }

:root[data-theme='nuit'] .cps-entree { color: var(--ink); }
:root[data-theme='nuit'] .cps-entree:hover,
:root[data-theme='nuit'] .cps-entree:focus-visible { background: #14344f; }
:root[data-theme='nuit'] .cps-entree span { color: var(--muted); }
:root[data-theme='nuit'] .cps-entree__code {
  background: #14344f;
  border-color: var(--line);
  color: var(--ink);
}
:root[data-theme='nuit'] .m-menu-toggle { border-color: var(--line); background: var(--white); color: var(--ink); }

/* ------------------------------------------------------------------ surfaces claires */
:root[data-theme='nuit'] .m-hero-light,
:root[data-theme='nuit'] .m-page-banner:not(.m-page-banner--nuit) {
  background:
    radial-gradient(1100px 380px at 12% -40%, rgba(88, 169, 238, 0.14), transparent 62%),
    linear-gradient(180deg, #0b1f33, #08192a);
  border-bottom-color: var(--line);
}
:root[data-theme='nuit'] .m-ariane { background: #0b1f33; border-bottom-color: var(--line); }

:root[data-theme='nuit'] .m-section { background: transparent; }
:root[data-theme='nuit'] .m-services,
:root[data-theme='nuit'] .m-process,
:root[data-theme='nuit'] .m-faq,
:root[data-theme='nuit'] .m-contact,
:root[data-theme='nuit'] .m-reviews { background: #08192a; }

/* cartes et encadres : tout ce qui etait blanc passe en bleu nuit clair */
:root[data-theme='nuit'] .m-service-card,
:root[data-theme='nuit'] .m-marks > div,
:root[data-theme='nuit'] .m-steps > div,
:root[data-theme='nuit'] .m-zone-cards article,
:root[data-theme='nuit'] .m-avis-carte,
:root[data-theme='nuit'] .m-table,
:root[data-theme='nuit'] .m-pills a,
:root[data-theme='nuit'] .m-prose-aside > div,
:root[data-theme='nuit'] .m-prose-aside > nav,
:root[data-theme='nuit'] .m-devis-garanties-grille > div,
:root[data-theme='nuit'] .m-faq-list details,
:root[data-theme='nuit'] .m-review-card,
:root[data-theme='nuit'] #quote-form,
:root[data-theme='nuit'] .m-footer-availability {
  background: var(--white);
  border-color: var(--line);
  color: var(--ink);
}

:root[data-theme='nuit'] .m-table thead th { background: #0b1f33; color: var(--muted); }
:root[data-theme='nuit'] .m-table th,
:root[data-theme='nuit'] .m-table td { border-bottom-color: var(--line); }
:root[data-theme='nuit'] .m-table tbody th { color: var(--ink); }

/* ------------------------------------------------------------------ textes */
:root[data-theme='nuit'] h1,
:root[data-theme='nuit'] h2,
:root[data-theme='nuit'] h3,
:root[data-theme='nuit'] .m-prose-body strong,
:root[data-theme='nuit'] .m-marks strong,
:root[data-theme='nuit'] .m-steps h3,
:root[data-theme='nuit'] .m-zone-cards h3,
:root[data-theme='nuit'] .m-avis-carte footer strong { color: var(--ink); }

:root[data-theme='nuit'] .m-prose-body p,
:root[data-theme='nuit'] .m-prose-body li,
:root[data-theme='nuit'] .m-marks p,
:root[data-theme='nuit'] .m-steps p,
:root[data-theme='nuit'] .m-zone-cards p,
:root[data-theme='nuit'] .m-avis-carte p,
:root[data-theme='nuit'] .m-section-heading p,
:root[data-theme='nuit'] .m-page-banner .m-hero-description,
:root[data-theme='nuit'] .m-hero-description { color: var(--muted); }

:root[data-theme='nuit'] .m-page-banner h1 em,
:root[data-theme='nuit'] .m-prose-body h2 em,
:root[data-theme='nuit'] .m-section-heading h2 em { color: var(--navy); }

:root[data-theme='nuit'] .m-prose-body a,
:root[data-theme='nuit'] .m-text-link,
:root[data-theme='nuit'] .m-ariane a { color: var(--navy); }

:root[data-theme='nuit'] .m-step-number { color: #17304a; }
:root[data-theme='nuit'] .m-step-note { background: #12304a; color: #7ad274; }

/* ------------------------------------------------------------------ boutons et champs */
:root[data-theme='nuit'] .m-button.m-outline,
:root[data-theme='nuit'] .m-page-banner:not(.m-page-banner--nuit) .m-hero-actions .m-outline {
  background: var(--white);
  border-color: var(--line);
  color: var(--ink);
}
:root[data-theme='nuit'] .m-page-banner:not(.m-page-banner--nuit) .m-hero-actions .m-outline:hover {
  background: #16324c;
  border-color: var(--navy);
}

:root[data-theme='nuit'] input,
:root[data-theme='nuit'] select,
:root[data-theme='nuit'] textarea {
  background: #0b1f33;
  border-color: var(--line);
  color: var(--ink);
}
:root[data-theme='nuit'] input::placeholder,
:root[data-theme='nuit'] textarea::placeholder { color: #6b8299; }

/* ------------------------------------------------------------------ popin et bandeau cookies */
:root[data-theme='nuit'] dialog { background: var(--white); color: var(--ink); border-color: var(--line); }
:root[data-theme='nuit'] .bandeau-cookies,
:root[data-theme='nuit'] .cookies-fenetre {
  background: var(--white);
  color: var(--ink);
  border-color: var(--line);
}

/* ------------------------------------------------------------------ interrupteur jour / nuit */
/* Les deux symboles restent visibles : le curseur indique le mode en cours,
   et l on voit d un coup d oeil ou l on va en cliquant. */
.cps-theme {
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  /* 4 px collaient l interrupteur au bouton d appel : il lui faut sa propre
     respiration pour qu on le lise comme un reglage, pas comme une icone du
     bouton voisin */
  margin-right: 18px;
}
.cps-theme__piste {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 62px;
  height: 32px;
  padding: 0 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--pale);
  transition: background 220ms, border-color 220ms;
}
.cps-theme__symbole {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: 28px;
  color: var(--muted);
  transition: color 220ms;
}
.cps-theme__symbole svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cps-theme__curseur {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 0;
  width: 28px;
  height: 26px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(16, 43, 67, 0.18);
  transition: translate 240ms cubic-bezier(0.22, 0.8, 0.28, 1), background 220ms;
}
/* en mode jour, le curseur couvre le soleil */
.cps-theme .cps-theme__symbole--jour { color: var(--navy); }

/* en mode nuit, il glisse sur la lune */
:root[data-theme='nuit'] .cps-theme__piste { background: #0b1f33; border-color: var(--line); }
:root[data-theme='nuit'] .cps-theme__curseur { translate: 28px 0; background: #1d3a56; }
:root[data-theme='nuit'] .cps-theme__symbole--jour { color: #5c718a; }
:root[data-theme='nuit'] .cps-theme__symbole--nuit { color: #ffd479; }

.cps-theme:hover .cps-theme__piste { border-color: var(--navy); }
.cps-theme:focus-visible { outline: 3px solid #458db4; outline-offset: 4px; border-radius: 999px; }

@media (max-width: 1000px) {
  .cps-theme__piste { width: 56px; height: 30px; }
  .cps-theme__curseur { width: 25px; height: 24px; }
  :root[data-theme='nuit'] .cps-theme__curseur { translate: 25px 0; }
}

/* ------------------------------------------------------------------ logo */
/* le logo du jour porte un nom en charbon, illisible sur fond bleu nuit :
   c est la version claire, déjà utilisée dans le pied, qui prend sa place. */
:root[data-theme='nuit'] .cps-logo { content: url('/assets/img/logo-cana-pro-services-blanc.svg'); }
:root[data-theme='nuit'] .m-brand-name { color: var(--ink); }
:root[data-theme='nuit'] .m-brand-name small { color: #8fa8bd; }

/* ------------------------------------------------------------------ menu déroulant */
:root[data-theme='nuit'] .cps-panneau {
  background: var(--white);
  border-color: var(--line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
:root[data-theme='nuit'] .cps-entree { color: var(--ink); }
:root[data-theme='nuit'] .cps-entree:hover { background: #16324c; }
:root[data-theme='nuit'] .cps-entree > span:last-child > span { color: var(--muted); }
:root[data-theme='nuit'] .cps-entree > .cps-entree__code { background: #16324c; color: #7fc4ff; }
:root[data-theme='nuit'] .cps-panneau__pied { border-top-color: var(--line); }
:root[data-theme='nuit'] .cps-panneau__pied span { color: var(--muted); }

/* ------------------------------------------------------------------ avis et popins */
:root[data-theme='nuit'] .m-reviews-toolbar select,
:root[data-theme='nuit'] .m-reviews-arrows button {
  background: var(--white);
  border-color: var(--line);
  color: var(--ink);
}
:root[data-theme='nuit'] .m-review-quote-mark { color: #1c3550; }
:root[data-theme='nuit'] .m-avis-bandeau { background: #2a2113; border-color: #5a4520; }
:root[data-theme='nuit'] .m-avis-bandeau p { color: #d6c39a; }
:root[data-theme='nuit'] .m-avis-bandeau strong { color: #f0dcae; }

/* ------------------------------------------------------------------ section « engagement » */
/* claire dans la maquette : elle bascule aussi en bleu nuit */
:root[data-theme='nuit'] .m-commitments { background: #0b1f33; }
:root[data-theme='nuit'] .m-commitment-cards > div { background: var(--white); border-color: var(--line); }
:root[data-theme='nuit'] .m-commitment-cards strong { color: var(--ink); }
:root[data-theme='nuit'] .m-commitment-cards p { color: var(--muted); }
:root[data-theme='nuit'] .m-commitment-cards svg { color: #7fc4ff; }
:root[data-theme='nuit'] .m-commitment-list strong { color: var(--ink); }
:root[data-theme='nuit'] .m-commitment-list span { color: var(--muted); }
:root[data-theme='nuit'] .m-emergency { background: #061321; }

/* assets/modele/telephone.css */
/* ===========================================================================
   TÉLÉPHONE — MISE AU POINT GÉNÉRALE
   ---------------------------------------------------------------------------
   Relevé fait à 375 px sur les 29 pages : le titre d accueil et le second
   bouton sortaient du cadre, le visuel du camion était poussé hors marge, une
   quinzaine de textes descendaient sous 12 px et des liens n offraient que
   21 px de hauteur au doigt.

   Les sélecteurs reprennent ceux de la maquette (.m-hero-light h1 et non h1
   seul) : sans cela les règles d origine, plus spécifiques, l emportaient.
   Cette feuille passe en dernier et ne concerne que le téléphone.
   =========================================================================== */

@media (max-width: 700px) {

  /* ------------------------------------------------------------- gouttière
     Le contenu ne touche plus le bord de l écran : 22 px de chaque côté,
     partout, y compris dans les sections de couleur. */
  .m-wrap { width: calc(100% - 44px); }

  /* --------------------------------------------------------------- titres
     clamp(2.8rem, 10.7vw, 4.3rem) : le plancher de 44,8 px s appliquait tel
     quel et « L assainissement, » sortait de sa colonne. */
  .m-hero-light h1,
  h1 {
    font-size: clamp(2rem, 8.2vw, 2.6rem);
    letter-spacing: -1.2px;
    line-height: 1.14;
    margin: 18px 0;
    overflow-wrap: break-word;
  }
  h2 { font-size: clamp(1.6rem, 6.4vw, 2rem); letter-spacing: -0.9px; }
  h3 { font-size: 1.02rem; letter-spacing: -0.3px; }

  /* ------------------------------------------------------- boutons du héros
     Deux boutons en flex:1 faisaient 171 px chacun : 352 px de contenu dans
     331 px utiles, le « Devis gratuit » sortait de l écran. */
  .m-hero-light .m-hero-actions,
  .m-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 22px;
    width: 100%;
  }
  .m-hero-light .m-hero-actions .m-button,
  .m-hero-actions .m-button {
    width: 100%;
    min-width: 0;
    flex: none;
    min-height: 54px;
    padding: 15px 18px;
    font-size: 0.875rem;
    white-space: normal;
  }
  .m-hero-light .m-hero-actions .m-green { font-size: 0.875rem; }

  /* --------------------------------------------------------- visuel du héros */
  .m-hero-light-media { margin-top: 8px; }
  /* complements.css pilote la hauteur par aspect-ratio : fixer une hauteur
     ici faisait recalculer la largeur (526 px dans un cadre de 339) */
  .m-vehicle-frame { width: 100%; border-radius: 14px 14px 0 0; }
  .m-vehicle-caption { border-radius: 0 0 14px 14px; }

  /* ancien héros (pages intérieures) : la photo était décalée de 10 px vers
     la droite et l encart 24h/24, posé en négatif, finissait hors cadre */
  .m-hero-visual { margin-left: 0; height: 300px; border-radius: 14px 14px 46px 14px; }
  .m-availability {
    left: 0;
    right: 0;
    bottom: 14px;
    width: auto;
    margin: 0 12px;
    padding: 14px 16px;
    border-radius: 12px;
  }
  .m-availability strong { font-size: 1.22rem; }

  /* -------------------------------------------------------- plancher de texte
     Rien en dessous de 12,5 px : en dessous, un texte devient illisible au
     bras tendu et Safari propose de zoomer sur le champ. */
  small,
  th,
  td,
  figcaption,
  .m-eyebrow,
  .m-hero-light .m-eyebrow,
  .m-image-label,
  .m-social-status,
  .m-hero-checks,
  .m-hero-light .m-hero-checks,
  .m-hero-bottom,
  .m-hero-light-bottom,
  .m-vehicle-caption small,
  .m-vehicle-caption strong,
  .m-availability-pill small,
  .m-availability p,
  .m-hero-image-note,
  .m-footer-main p,
  .m-preuve-detail,
  .m-dept__detail,
  .cookies__toujours,
  .m-form-note,
  .m-service-top > span { font-size: max(0.78rem, 12.5px); }

  .m-eyebrow,
  .m-hero-light .m-eyebrow { letter-spacing: 1.2px; line-height: 1.55; }
  .m-hero-checks,
  .m-hero-light .m-hero-checks { gap: 10px 16px; }
  .m-hero-light-bottom,
  .m-hero-bottom { letter-spacing: 0.8px; gap: 12px 14px; }

  /* les intitulés de colonnes du pied étaient tombés à 10,9 px */
  .m-footer-links h3,
  .m-footer-contact h3,
  .m-footer-columns .m-footer-social h3 { font-size: 0.79rem; letter-spacing: 1.4px; }

  /* Reprises nominatives : sur ces éléments une règle plus spécifique de la
     maquette l emportait sur le plancher ci-dessus. Relevé à 375 px. */
  .m-contact-phone small,
  .m-contact-email small,
  .m-contact-hours small,
  .m-review-total span,
  .m-reviews-position span,
  .m-review-author small,
  .m-review-service span,
  .m-footer-availability small,
  .m-footer-contact small,
  .m-footer-brand small,
  .m-brand-name small,
  .m-footer-complete .m-footer-bottom span,
  .m-footer-complete .m-footer-bottom a,
  .m-footer-regions span,
  .m-intro-bottom span,
  .m-hero-light-bottom span,
  .m-radar-node b,
  .m-tableau th,
  .m-tableau td,
  .cookies__entete .cookies__toujours,
  .m-doc-section small { font-size: max(0.78rem, 12.5px); }

  /* ------------------------------------------------------- cibles au doigt
     44 px de hauteur minimale ; les liens de texte gardent leur taille
     visuelle et gagnent la zone par le remplissage. */
  .m-text-link,
  .m-footer-bottom a,
  .m-footer-bottom button,
  .m-footer-regions a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .m-footer-links a,
  .m-footer-links button {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 4px 0;
  }
  .cps-theme { min-height: 40px; }
  .cps-theme button { min-height: 36px; min-width: 40px; }
  .m-intro-replay { min-height: 40px; padding: 8px 0; }

  /* ------------------------------------------------------------ respiration
     Les blocs de contenu ne collent plus aux bords : ils restent dans la
     gouttière avec un angle franc. */
  .m-service-card,
  .m-review-card,
  .m-department-panel,
  .m-commitment-visual,
  .m-page-banner-media,
  .m-contact-visual,
  .m-doc-section { border-radius: 14px; }
  .m-commitment-visual,
  .m-page-banner-media { overflow: hidden; }

  /* ------------------------------------------------------------ débordements
     Un tableau large défile dans son cadre au lieu de pousser la page. */
  .m-tableau,
  .m-table-wrap { max-width: 100%; overflow-x: auto; }
  pre, code { overflow-x: auto; max-width: 100%; }
}

/* ------------------------------------------------------------- petits écrans
   iPhone SE et Android d entrée de gamme : 320 à 380 px. */
@media (max-width: 380px) {
  .m-wrap { width: calc(100% - 36px); }
  .m-hero-light h1,
  h1 { font-size: clamp(1.8rem, 8.4vw, 2.2rem); letter-spacing: -1px; }
  .m-hero-light .m-hero-actions .m-button,
  .m-hero-actions .m-button { font-size: 0.84rem; padding: 14px 14px; }
  .m-hero-light .m-hero-actions .m-green { font-size: 0.84rem; }
  .m-services-grid { grid-template-columns: 1fr; }
  .m-steps { grid-template-columns: 1fr; }
  .m-departments { grid-template-columns: 1fr; }
  .m-hero-visual { height: 260px; }
}

/* ===========================================================================
   BANDEAU DES PUBLICS — TÉLÉPHONE
   ---------------------------------------------------------------------------
   « Particuliers · Professionnels · Copropriétés · Commerces » passait en
   flex-wrap centré : deux colonnes de largeurs différentes, des séparateurs
   verts échoués en bout de ligne et un libellé aligné à droite sans son point.
   Une grille de deux colonnes remet les quatre publics d aplomb.
   =========================================================================== */
@media (max-width: 700px) {
  .m-hero-light-bottom {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    justify-content: stretch;
    white-space: normal;
  }
  /* les séparateurs n ont plus de sens dans une grille */
  .m-hero-light-bottom > i { display: none; }
  .m-hero-light-bottom > span {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
    text-align: left;
    font-size: max(0.72rem, 11.5px);
    letter-spacing: 1px;
    line-height: 1.35;
  }
  /* une pastille propre devant chaque public, à la place des points flottants */
  .m-hero-light-bottom > span::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green, #2f892c);
    flex-shrink: 0;
  }
  /* le dernier libellé était masqué : dans une grille, les quatre tiennent */
  .m-hero-light-bottom > span:last-child { display: flex; }
}

/* sous 340 px seulement : a 375 px les deux colonnes tiennent tres bien, et
   quatre lignes empilees mangeaient 129 px de hauteur pour rien */
@media (max-width: 340px) {
  .m-hero-light-bottom { grid-template-columns: 1fr; gap: 8px; }
}

/* ===========================================================================
   CARTES DE PRESTATIONS — UNE PAR LIGNE SUR TÉLÉPHONE
   ---------------------------------------------------------------------------
   Deux cartes par ligne sur 375 px laissaient 160 px par carte : titres coupés
   en deux, paragraphes en colonnes de quatre mots, photo illisible. Une carte
   par ligne rend chaque prestation lisible d un coup d œil.
   =========================================================================== */
@media (max-width: 700px) {
  .m-services-grid { grid-template-columns: 1fr; gap: 14px; }
  .m-service-card {
    min-height: 0;
    padding: 20px 20px 18px;
    border-radius: 14px;
  }
  /* La photo de fond a la place de respirer : la carte devient une vignette
     large plutôt qu une colonne étroite.
     « min-height » et non « aspect-ratio » : un rapport fixe impose une hauteur
     qui ignore le contenu, et le bouton « Découvrir » se retrouvait coupé par
     le bord de la carte. */
  .m-service-card {
    aspect-ratio: auto;
    min-height: min(58vw, 260px);
  }
  /* la carte est courte en 16/11 : une réserve mesurée sous la pastille, plutôt
     que le min-height:92px de la maquette prévu pour une carte de 350 px */
  .m-service-top { min-height: 44px; margin-bottom: auto; }
  .m-service-card h3 { font-size: 1.32rem; line-height: 1.2; letter-spacing: -0.5px; }
  .m-service-card p {
    font-size: max(0.86rem, 13px);
    line-height: 1.6;
    margin: 10px 0 16px;
    max-width: 38ch;
  }
  .m-service-link { font-size: max(0.8rem, 12.5px); padding-top: 14px; }
  .m-service-link svg { width: 20px; height: 20px; }

  /* mêmes règles pour les autres grilles de cartes du site */
  .m-zone-cards,
  .m-commitment-cards,
  .m-avis-grille,
  .m-plan-grille { grid-template-columns: 1fr; }
}

/* ===========================================================================
   COMMANDES DU CARROUSEL — TÉLÉPHONE
   ---------------------------------------------------------------------------
   Les flèches des avis et le bouton « retour en haut » occupaient la même
   colonne (x ≈ 315 px) : dès que la section arrivait en bas d écran, le rond
   bleu se posait sur la flèche verte. Les commandes passent à gauche, la
   progression à droite : plus aucun croisement possible.
   =========================================================================== */
@media (max-width: 700px) {
  .m-reviews-controls {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }
  .m-reviews-arrows { margin: 0; }
  .m-reviews-position { flex: 1; justify-content: flex-end; }

  /* le bouton flottant garde ses distances avec la barre d appel */
  .cps-remonter { right: 14px; bottom: 88px; }
}

/* ===========================================================================
   PIED DE PAGE — RESSERRÉ SUR TÉLÉPHONE
   ---------------------------------------------------------------------------
   Relevé avant reprise : quatre écrans de défilement pour atteindre le bas.
   Chaque lien occupait 56 px de haut, les onze liens des deux colonnes
   s empilaient sur une seule file, les huit départements prenaient quatre
   lignes et les cinq mentions légales cinq lignes de plus.
   Ici : liens sur deux colonnes, interlignes serrés, départements en bande
   qui défile, mentions légales sur deux colonnes.
   =========================================================================== */
@media (max-width: 700px) {

  /* ------------------------------------------------------------- marque */
  .m-footer-columns { padding-top: 22px; padding-bottom: 18px; gap: 20px 16px; }
  .m-footer-logo { margin-bottom: 10px; }
  .m-footer-logo img { height: 42px; }
  .m-footer-company > p { font-size: max(0.82rem, 12.5px); line-height: 1.55; max-width: 100%; }
  .m-footer-social { margin-top: 14px; }
  .m-social-link { width: 40px; min-width: 40px; height: 40px; min-height: 40px; }

  .m-footer-availability { margin-top: 12px; padding: 10px 13px; }
  .m-footer-availability strong { font-size: 0.95rem; }

  /* --------------------------------------------------- colonnes de liens
     Les deux listes passent sur deux colonnes chacune : onze liens tiennent
     alors en six lignes au lieu de onze. */
  .m-footer-links h3,
  .m-footer-contact h3 { margin-bottom: 8px; }

  .m-footer-links {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .m-footer-links h3 { grid-column: 1 / -1; }
  .m-footer-links a,
  .m-footer-links button {
    display: block;
    min-height: 0;
    padding: 6px 0;
    font-size: max(0.8rem, 12.5px);
    line-height: 1.3;
  }
  /* Une seule colonne par groupe. Les deux groupes sont déjà côte à côte :
     les recouper en deux donnait quatre colonnes de 75 px, des intitulés sur
     trois lignes et plus aucun alignement. */
  .m-footer-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .m-footer-links a,
  .m-footer-links button {
    display: block;
    width: 100%;
    padding: 8px 0;
    font-size: max(0.8rem, 12.5px);
    line-height: 1.35;
    text-align: left;
    /* un intitulé long passe à la ligne proprement plutôt que de déborder */
    overflow-wrap: anywhere;
  }
  /* un filet discret sépare les entrées : le regard suit la colonne */
  .m-footer-links a + a,
  .m-footer-links a + button,
  .m-footer-links button + a,
  .m-footer-links button + button {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }

  /* ------------------------------------------------------------- contact */
  .m-footer-contact { grid-column: 1 / -1; }
  .m-footer-contact a,
  .m-footer-contact > div { padding: 5px 0; }
  .m-footer-contact small { font-size: max(0.66rem, 11px); letter-spacing: 1px; }
  .m-footer-contact strong { font-size: 1.12rem; }
  .m-footer-contact-button { margin-top: 10px; min-height: 46px; }

  /* --------------------------------------------------- départements
     Huit pastilles sur quatre lignes : une bande qui défile au doigt tient
     sur une seule. */
  .m-footer-regions {
    display: grid;
    gap: 8px;
    padding: 14px 0;
  }
  .m-footer-regions > span { font-size: max(0.66rem, 11px); letter-spacing: 1.2px; }
  .m-footer-regions > div {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .m-footer-regions > div::-webkit-scrollbar { display: none; }
  .m-footer-regions a {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 11px;
    font-size: max(0.74rem, 12px);
    white-space: nowrap;
  }

  /* --------------------------------------------------- mentions légales
     Cinq liens empilés sur cinq lignes : deux colonnes suffisent. */
  .m-footer-bottom {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 14px;
    padding-top: 14px;
    padding-bottom: 84px;
    font-size: max(0.74rem, 12px);
  }
  .m-footer-complete .m-footer-bottom > span:first-child {
    grid-column: 1 / -1;
    margin-bottom: 2px;
    opacity: 0.75;
  }
  .m-footer-complete .m-footer-bottom a,
  .m-footer-complete .m-footer-bottom button {
    min-height: 32px;
    padding: 3px 0;
    margin: 0;
    justify-content: flex-start;
  }
  .m-intro-replay { grid-column: 1 / -1; min-height: 32px; padding: 3px 0; }

  /* ------------------------------------------------------------- bandeau
     d urgence au-dessus du pied : il n a pas besoin de trois lignes */
  .m-footer-urgent { padding: 18px 0; }
  .m-footer-urgent h2 { font-size: 1.28rem; line-height: 1.3; }
  .m-footer-urgent-actions { margin-top: 12px; gap: 8px; }
  .m-footer-urgent-actions > * { min-height: 46px; font-size: max(0.84rem, 13px); }
}


/* ===========================================================================
   BANDEAU « 24H/24 » SUR LE VISUEL DU CAMION
   ---------------------------------------------------------------------------
   Posée au milieu du cadre, la pastille couvrait le flocage : logo, numéro et
   pictogrammes des prestations, c est-à-dire tout ce que la photo doit montrer.
   Elle remonte dans l angle et s allège.
   =========================================================================== */
@media (max-width: 700px) {
  /* la pastille sort du cadre : il faut que le bloc la laisse déborder */
  .m-hero-light-media { overflow: visible; padding-top: 26px; }

  .m-availability-pill {
    /* Posée SUR la photo, elle masquait le flocage quel que soit l angle —
       logo à gauche, raison sociale au centre, numéro à droite. Elle remonte
       donc au-dessus du cadre, calée à droite, dans l espace libre. */
    top: -14px;
    right: 4px;
    left: auto;
    z-index: 2;
    gap: 7px;
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.93);
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(6, 36, 63, 0.18);
  }
  .m-availability-pill b { font-size: 0.95rem; line-height: 1.1; }
  .m-availability-pill small { font-size: max(0.62rem, 10.5px); letter-spacing: 0.6px; }
  .m-availability-pill > svg { width: 17px; height: 17px; }
}

/* sur les écrans les plus étroits, la mention passe sous le chiffre */
@media (max-width: 400px) {
  .m-availability-pill { padding: 6px 9px; }
  .m-availability-pill b { font-size: 0.88rem; }
  .m-availability-pill small { font-size: 10px; }
}

/* ===========================================================================
   CARTES DE PRESTATION — RESPIRATION AUTOUR DE L ICÔNE
   ---------------------------------------------------------------------------
   Relevé à 375 px : le titre remontait de 6 px SOUS la pastille, donc par-dessus
   elle. Le « margin-bottom:auto » de la maquette avait été neutralisé et plus
   rien ne séparait les deux.
   =========================================================================== */
@media (max-width: 700px) {
  .m-service-top {
    /* « auto » pousse le texte en pied de carte : c est la composition de la
       maquette. On ajoute seulement un écart plancher pour les cartes courtes. */
    margin-bottom: auto;
    padding-bottom: 20px;
    align-items: flex-start;
  }
  .m-service-card h3 {
    margin-top: 0;
    line-height: 1.22;
  }
  /* le numéro d ordre reste calé en haut, à l aplomb de la pastille */
  .m-service-top > span { margin-top: 2px; }
  /* le chapeau de la carte garde son écart sous le titre */
  .m-service-card p { margin-top: 10px; }
}

/* ===========================================================================
   BANDEAU SOUS LE CAMION — LA FLÈCHE REVIENT
   ---------------------------------------------------------------------------
   La maquette masquait la flèche sous 950 px (« .m-vehicle-caption > svg :
   display:none »). Le bandeau devenait un bloc bleu dont rien n indiquait
   qu il mène quelque part, alors que c est un lien vers la page « à propos ».
   =========================================================================== */
@media (max-width: 950px) {
  .m-vehicle-caption > svg {
    display: block;
    width: 20px;
    height: 20px;
    margin-left: auto;
    flex-shrink: 0;
    color: #fff;
    transition: transform 220ms cubic-bezier(0.22, 0.8, 0.28, 1);
  }
  /* la flèche avance quand on touche le bandeau : le geste est confirmé */
  .m-vehicle-caption:active > svg { transform: translateX(4px); }
}

@media (max-width: 700px) {
  .m-vehicle-caption { gap: 12px; padding: 16px 15px; }
  .m-vehicle-caption-icon { width: 36px; height: 36px; }
  .m-vehicle-caption-icon > svg { width: 18px; height: 18px; }
}

/* ===========================================================================
   CARTES DE PRESTATION — LE BOUTON RESPIRE EN PIED DE CARTE
   ---------------------------------------------------------------------------
   20 px sous le bouton « Découvrir » : sur une carte à photo de fond, le
   bouton semblait posé sur l arête. On ouvre le pied de carte.
   =========================================================================== */
@media (max-width: 700px) {
  .m-service-card { padding-bottom: 28px; }
  .m-service-link { margin-top: 4px; }
}

/* ===========================================================================
   LES ENGAGEMENTS — FRISE VERTICALE
   ---------------------------------------------------------------------------
   Quatre paragraphes séparés par des filets gris : la liste était plate et
   rien ne disait que ces quatre points se suivent. Ce sont pourtant des
   étapes — on appelle, on chiffre, on intervient, on soigne.
   La mise en page le dit maintenant : une frise, des pastilles numérotées
   reliées par un trait continu, et chaque étape sur sa propre carte.
   Couleurs pleines, aucun dégradé.
   =========================================================================== */
@media (max-width: 700px) {
  .m-commitment-list {
    position: relative;
    display: grid;
    gap: 14px;
    padding-left: 46px;
  }

  /* le trait qui relie les étapes, du premier au dernier point */
  .m-commitment-list::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 22px;
    bottom: 22px;
    width: 2px;
    background: #d3e2f0;
    border-radius: 2px;
  }

  .m-commitment-list article {
    position: relative;
    display: block;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 43, 67, 0.04);
  }

  /* la pastille numérotée, posée sur le trait */
  .m-commitment-list article > span {
    position: absolute;
    left: -46px;
    top: 16px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 0;
    border-radius: 50%;
    background: var(--navy);
    color: #fff !important;
    font-family: Manrope, Arial, sans-serif;
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    box-shadow: 0 0 0 4px #fff;
  }

  /* la dernière étape ferme la frise : elle passe au vert */
  .m-commitment-list article:last-child > span { background: var(--green); }

  .m-commitment-list h3 {
    font-size: 1.02rem;
    line-height: 1.3;
    letter-spacing: -0.3px;
    margin: 0;
  }
  .m-commitment-list p {
    margin-top: 7px;
    font-size: max(0.86rem, 13px);
    line-height: 1.65;
    color: var(--muted);
  }

  /* le filet d origine n a plus lieu d être : chaque étape est une carte */
  .m-commitment-list article { border-bottom: 1px solid var(--line); }

  /* La maquette annulait la marge haute du premier engagement, parce qu il
     ouvrait une liste séparée par des filets. En cartes, cette règle collait
     le titre de la première au bord : elle est annulée. */
  .m-commitment-list article:first-child { padding-top: 16px; }
}

/* ------------------------------------------------------------- mode nuit */
:root[data-theme='nuit'] .m-commitment-list::before { background: #23415f; }
@media (max-width: 700px) {
  :root[data-theme='nuit'] .m-commitment-list article {
    background: var(--white);
    border-color: var(--line);
  }
  :root[data-theme='nuit'] .m-commitment-list article > span {
    box-shadow: 0 0 0 4px var(--pale);
  }
}

/* ===========================================================================
   FORMULAIRE DE DEVIS — UNE COLONNE, DES CHAMPS QUI RESPIRENT
   ---------------------------------------------------------------------------
   Relevé à 375 px : « Téléphone » et « Ville / code postal » étaient côte à
   côte, soit 150 px par champ. Le texte indicatif y était tronqué en plein
   milieu (« 06 00 00 00 0C », « Ex. Créteil, 940C ») et la saisie d un numéro
   passait sous le bord droit.
   Une seule colonne : chaque champ prend toute la largeur.
   =========================================================================== */
@media (max-width: 700px) {
  .m-contact form,
  form#quote-form {
    padding: 22px 18px 24px;
    border-radius: 16px;
  }

  /* fin des deux colonnes : la place manque, et un champ tronqué ne se
     remplit pas */
  .m-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  form label {
    margin-bottom: 14px;
    font-size: max(0.8rem, 12.5px);
    font-weight: 600;
    letter-spacing: 0.1px;
    color: var(--ink);
  }

  form input,
  form select,
  form textarea {
    margin-top: 7px;
    padding: 13px 14px;
    min-height: 50px;
    border-radius: 10px;
    border-color: #cbd9e6;
    /* 16 px : en dessous, iOS agrandit la page à la mise au point */
    font-size: 16px;
  }
  form textarea { min-height: 116px; line-height: 1.55; }

  form input::placeholder,
  form textarea::placeholder {
    font-size: 0.94rem;
    /* un indicatif qui dépasse se coupe proprement plutôt que d être tranché */
    text-overflow: ellipsis;
  }

  /* l intitulé du formulaire */
  form h3 { font-size: 1.22rem; letter-spacing: -0.4px; }
  form > p { margin-bottom: 18px; font-size: max(0.78rem, 12.5px); }

  /* la case de consentement : cible confortable, texte lisible */
  .m-consent {
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 13px;
    border-radius: 10px;
    background: #f3f7fa;
    font-size: max(0.78rem, 12.5px);
    line-height: 1.55;
  }
  .m-consent input {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    flex-shrink: 0;
  }

  /* le bouton d envoi occupe la largeur, centré */
  .m-contact form > .m-button,
  form#quote-form > .m-button {
    width: 100%;
    min-height: 54px;
    justify-content: center;
    gap: 12px;
    font-size: 0.95rem;
    border-radius: 10px;
  }

  /* la vérification anti-robot ne doit pas dépasser du cadre */
  .cf-turnstile,
  .cf-turnstile iframe {
    max-width: 100% !important;
    margin: 0 auto 14px;
  }

  .m-form-note { margin-top: 12px; }
}

/* assets/css/cookies.css */
/* =========================================================================
   COOKIES — bandeau de choix et panneau de reglages
   Regle de la CNIL respectee dans la mise en forme : refuser doit etre aussi
   simple et aussi visible qu accepter. Les trois boutons ont donc la meme
   taille et la meme lisibilite.
   ========================================================================= */

.cookies[hidden] { display: none; }

.cookies__bandeau {
  position: fixed;
  left: 50%;
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  translate: -50% 0;
  z-index: 120;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  width: min(68rem, calc(100% - 1.5rem));
  padding: clamp(1.1rem, 2.2vw, 1.5rem) clamp(1.2rem, 2.5vw, 1.8rem);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: color-mix(in srgb, var(--blanc) 97%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(10, 30, 60, 0.18);
  animation: cookies-entree 420ms var(--glisse) both;
}
@keyframes cookies-entree {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.cookies__texte { flex: 1 1 22rem; min-width: 0; }
.cookies__texte strong {
  display: block;
  font-family: var(--titre);
  font-size: 1.02rem;
  letter-spacing: -0.015em;
  margin-bottom: 0.25rem;
}
.cookies__texte p { font-size: 0.87rem; line-height: 1.6; color: var(--texte-doux); }
.cookies__texte a { color: var(--bleu); font-weight: 600; }

.cookies__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cookies__actions .bouton { padding: 0.7rem 1.15rem; font-size: 0.87rem; white-space: nowrap; }

@media (max-width: 42rem) {
  .cookies__bandeau { bottom: 0; translate: -50% 0; width: 100%; border-radius: var(--rayon) var(--rayon) 0 0; }
  .cookies__actions { width: 100%; }
  .cookies__actions .bouton { flex: 1 1 8rem; justify-content: center; }
}
/* la barre d appel mobile ne doit pas passer sous le bandeau */
@media (max-width: 46rem) {
  body:has(.cookies:not([hidden])) .barre-mobile { transform: translateY(110%); }
}

/* ------------------------------------------------------------------ panneau */
.cookies__panneau {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(4, 14, 26, 0.6);
  backdrop-filter: blur(3px);
}
.cookies__panneau[hidden] { display: none; }

.cookies__fenetre {
  display: flex;
  flex-direction: column;
  width: min(44rem, 100%);
  max-height: min(84vh, 46rem);
  border-radius: var(--rayon-l);
  background: var(--blanc);
  box-shadow: 0 40px 100px rgba(4, 14, 26, 0.45);
  overflow: hidden;
  animation: cookies-entree 320ms var(--glisse) both;
}

.cookies__titre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem clamp(1.2rem, 3vw, 1.8rem);
  border-bottom: 1px solid var(--trait);
}
.cookies__fermer {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--trait);
  border-radius: 50%;
  background: var(--blanc);
  cursor: pointer;
  transition: background var(--vite), color var(--vite), transform var(--vite);
}
.cookies__fermer:hover { background: var(--encre); color: #fff; transform: rotate(90deg); }

.cookies__corps {
  display: grid;
  gap: 1.35rem;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  overflow-y: auto;
}
.cookies__categorie { display: grid; gap: 0.75rem; }
.cookies__categorie + .cookies__categorie { border-top: 1px solid var(--trait); padding-top: 1.35rem; }
.cookies__entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem; }
.cookies__entete h3 { font-size: 1.04rem; margin-bottom: 0.3rem; }
.cookies__entete p { font-size: 0.89rem; line-height: 1.6; color: var(--texte-doux); }
.cookies__toujours {
  flex-shrink: 0;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--vert-pale);
  color: var(--vert-sombre);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.cookies__table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.cookies__table th,
.cookies__table td { padding: 0.5rem 0.7rem; text-align: left; border: 1px solid var(--trait); }
.cookies__table th { background: var(--papier); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-doux); }
.cookies__table code { font-family: var(--mono); font-size: 0.8rem; color: var(--bleu); }
.cookies__vide { font-size: 0.85rem; color: var(--texte-doux); font-style: italic; }

.cookies__pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 1.1rem clamp(1.2rem, 3vw, 1.8rem);
  border-top: 1px solid var(--trait);
  background: var(--papier);
}
@media (max-width: 34rem) {
  .cookies__pied .bouton { flex: 1 1 10rem; justify-content: center; }
}

/* ------------------------------------------------------------------ interrupteur */
.bascule { position: relative; flex-shrink: 0; cursor: pointer; }
.bascule input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.bascule__piste {
  position: relative;
  display: block;
  width: 3.1rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--trait-fort);
  transition: background var(--moyen);
}
/* la pastille est posee en absolu : le centrage vertical et la butee de droite
   sont calcules a partir des bords, ce qui evite qu un zoom fractionnaire du
   navigateur la fasse deborder de la piste. */
.bascule__piste::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0.2rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(10, 30, 60, 0.3);
  translate: 0 -50%;
  transition: left var(--moyen);
}
.bascule input:checked + .bascule__piste { background: var(--vert); }
.bascule input:checked + .bascule__piste::after { left: calc(100% - 1.55rem); }
.bascule input:focus-visible + .bascule__piste { outline: 2.5px solid var(--vert-vif); outline-offset: 3px; }
.bascule input:disabled + .bascule__piste { opacity: 0.45; cursor: not-allowed; }
.bascule:has(input:disabled) { cursor: not-allowed; }

/* ---------------------------------------------------------------------------
   Repli : sur une page de maquette, socle.css n est pas charge. Le bandeau
   apporte donc lui-meme les quelques valeurs dont il a besoin.
   --------------------------------------------------------------------------- */
.cookies {
  --noir: #141414;
  --vert: #2f882c;
  --vert-vif: #3fa53a;
  --vert-sombre: #226520;
  --vert-pale: #eaf5e9;
  --bleu: #0659a7;
  --blanc: #ffffff;
  --papier: #f4f7fa;
  --trait: #dae1ea;
  --trait-fort: #c3ccd9;
  --texte: #16212e;
  --texte-doux: #4a5a6d;
  --rayon-s: 6px;
  --rayon: 14px;
  --rayon-l: 22px;
  --glisse: cubic-bezier(0.22, 0.8, 0.28, 1);
  --vite: 180ms var(--glisse);
  --moyen: 320ms var(--glisse);
  --titre: 'Manrope', 'DM Sans', system-ui, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', monospace;
  --ombre: 0 2px 6px rgba(10, 30, 60, 0.06), 0 12px 32px rgba(10, 30, 60, 0.08);
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--texte);
}
.cookies .bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--rayon-s);
  background: var(--vert);
  color: #fff;
  font-size: 0.87rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--vite), box-shadow var(--moyen);
}
.cookies .bouton:hover { transform: translateY(-1px); box-shadow: var(--ombre); }
.cookies .bouton--contour {
  background: transparent;
  color: var(--texte);
  border-color: var(--trait-fort);
}
.cookies .bouton--contour:hover { border-color: var(--vert); color: var(--vert-sombre); }
.cookies .lecture-seule-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}