/* ==========================================================================
LES TOITURES FALCK — main.css
Système documenté dans ETUDE-DESIGN-FALCK.md :
§2 typo (Archivo + Inter, ratio 1,25) · §3 grille 12 col / 8pt
§4 rôles couleur (contrastes AA mesurés) · §6 motion sobre
========================================================================== */
/* ---------- 1. TOKENS ---------- */
:root{
/* Couleur — rôles stricts (étude §4) */
--navy: #0A1E3F;
--navy-deep: #060F21;
--surface: #0E2649;
--quebec: #0033A0;
--quebec-hi: #4D7BE0; /* hover/focus + décor uniquement, jamais texte < 24px sur navy */
--silver: #C0C7CE; /* touche : filets, labels sombres, icônes */
--ice: #F5F7FA;
--ink: #101623;
--alarm: #E63946; /* display >= 30px sur fond sombre uniquement */
--alarm-btn: #C42B37; /* fond bouton urgence (blanc dessus = 5,60:1) */
--t-light: #F5F7FA; /* texte primaire sur sombre 15,40:1 */
--t-light-2: #A9B4C2; /* texte secondaire sur sombre 7,87:1 */
--t-dark: #101623; /* texte primaire sur clair 16,85:1 */
--t-dark-2: #4A5468; /* texte secondaire sur clair 7,09:1 */
--line: rgba(192,199,206,.18);
--line-dark: rgba(16,22,35,.12);
/* Typo — 2 familles + mono technique (étude §2) */
--display: 'Archivo','Helvetica Neue',Arial,sans-serif;
--sans: 'Inter','Helvetica Neue',Arial,sans-serif;
--mono: 'JetBrains Mono',ui-monospace,monospace;
/* Échelle ratio 1,25 — base 17px */
--fs-hero: clamp(44px, 7vw, 84px);
--fs-h2: clamp(30px, 3.6vw, 46px);
--fs-h3: clamp(19px, 1.6vw, 23px);
--fs-lead: clamp(17px, 1.35vw, 19px);
--fs-body: 17px;
--fs-small: 14px;
--fs-label: 12px;
--fs-stat: clamp(38px, 4vw, 60px);
/* Espacement 8pt (étude §3) */
--s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px;
--s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
--sect-y: clamp(88px, 10vw, 136px);
--gutter: clamp(20px, 4vw, 40px);
--maxw: 1200px;
--r: 10px;
--ease: cubic-bezier(.33,1,.68,1);
--shadow: 0 12px 32px rgba(6,15,33,.28);
}
/* ---------- 2. BASE ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
font-family:var(--sans);
font-size:var(--fs-body);
line-height:1.65;
color:var(--t-dark);
background:var(--ice);
-webkit-font-smoothing:antialiased;
overflow-wrap:anywhere; /* filet de sécurité : e-mails/tél. longs ne débordent jamais */
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit}
ul,ol{list-style:none}
p{max-width:66ch}
:focus-visible{outline:3px solid var(--quebec-hi);outline-offset:3px;border-radius:2px}
.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}
.skip-link{position:fixed;top:-64px;left:16px;z-index:1000;background:var(--quebec);color:#fff;padding:12px 20px;border-radius:8px;font-weight:600;transition:top .3s var(--ease)}
.skip-link:focus{top:16px}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
.reveal{opacity:1!important;transform:none!important}
}
/* ---------- 3. RÔLES TYPO ---------- */
.label{
font-family:var(--mono);font-size:var(--fs-label);font-weight:500;
letter-spacing:.14em;text-transform:uppercase;
color:var(--quebec);margin-bottom:var(--s3);
}
.on-dark .label{color:var(--silver)}
.label--alarm{color:var(--alarm)}
.mono{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.h2{
font-family:var(--display);font-weight:700;
font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.015em;
color:var(--navy);max-width:22ch;
}
.on-dark .h2{color:var(--t-light)}
.h3{font-family:var(--display);font-weight:600;font-size:var(--fs-h3);line-height:1.3;color:var(--navy)}
.on-dark .h3{color:var(--t-light)}
.lead{font-size:var(--fs-lead);color:var(--t-dark-2);max-width:54ch;margin-top:var(--s2)}
.on-dark .lead{color:var(--t-light-2)}
/* ---------- 4. LAYOUT ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto}
.section{padding:var(--sect-y) var(--gutter)}
.on-dark{background:var(--navy);color:var(--t-light)}
.section__head{margin-bottom:var(--s6)}
/* ---------- 5. BOUTONS ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
min-height:52px;padding:14px 28px;border-radius:8px;
font-weight:600;font-size:15px;letter-spacing:.01em;white-space:nowrap;
transition:background .3s ease,border-color .3s ease,color .3s ease;
}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn--primary{background:var(--quebec);color:#fff}
.btn--primary:hover{background:#0645c4}
.btn--ghost{border:1px solid rgba(192,199,206,.5);color:var(--t-light)}
.btn--ghost:hover{border-color:var(--silver);background:rgba(192,199,206,.1)}
.btn--alarm{background:var(--alarm-btn);color:#fff;min-height:56px;padding:16px 32px;font-size:16px}
.btn--alarm:hover{background:#A82430}
/* ---------- 6. MOTION (étude §6 : reveal unique, 0,55 s) ---------- */
/* Contenu visible par défaut, sans dépendre du JS ni d'un capteur de scroll —
plus aucun risque qu'un bloc reste bloqué en opacity:0. Le petit mouvement
d'entrée ne s'applique que si le JS confirme que l'élément vient d'entrer
dans l'écran ; s'il ne se déclenche jamais, le contenu reste simplement visible. */
.reveal{opacity:1;transform:none}
.reveal.will-animate{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.reveal.will-animate.is-in{opacity:1;transform:none}
[data-stagger].is-in > *{animation:rise .55s var(--ease) forwards}
[data-stagger].is-in > *:nth-child(1){animation-delay:.05s}
[data-stagger].is-in > *:nth-child(2){animation-delay:.12s}
[data-stagger].is-in > *:nth-child(3){animation-delay:.19s}
[data-stagger].is-in > *:nth-child(4){animation-delay:.26s}
[data-stagger].is-in > *:nth-child(5){animation-delay:.33s}
[data-stagger].is-in > *:nth-child(6){animation-delay:.40s}
@keyframes rise{to{opacity:1;transform:none}}
/* ---------- 7. NAV ---------- */
.nav{
position:fixed;top:0;left:0;right:0;z-index:900;
background:rgba(6,15,33,.92);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border-bottom:1px solid transparent;
padding:14px var(--gutter);
transition:padding .3s var(--ease),border-color .3s;
}
.nav.is-scrolled{padding:8px var(--gutter);border-bottom-color:var(--line)}
.nav__inner{max-width:var(--maxw);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.nav__brand{display:flex;align-items:center;gap:12px;color:var(--t-light)}
.nav__brand img{height:58px;width:auto}
.nav__brand__txt{
font-family:var(--display);font-weight:600;font-size:15px;line-height:1.15;
letter-spacing:.04em;text-transform:uppercase;display:flex;flex-direction:column;
}
.nav__brand__txt strong{font-weight:700;font-size:17px;color:var(--silver)}
.nav__menu{display:flex;align-items:center;gap:clamp(16px,2.2vw,32px)}
.nav__menu > a{
color:var(--t-light);font-weight:500;font-size:14px;
min-height:44px;display:inline-flex;align-items:center;
border-bottom:1px solid transparent;transition:color .3s,border-color .3s;
}
.nav__menu > a:hover{color:var(--silver)}
.nav__menu__cta{border-bottom-color:var(--silver)!important;color:var(--silver)!important}
.nav__burger{display:none;flex-direction:column;gap:5px;min-width:44px;min-height:44px;justify-content:center;align-items:center}
.nav__burger span{display:block;width:24px;height:2px;background:var(--t-light);transition:transform .3s var(--ease),opacity .3s}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ---------- 8. HERO ---------- */
.hero{
position:relative;min-height:100svh;display:flex;align-items:center;
padding:152px var(--gutter) var(--s7);color:var(--t-light);
}
.hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__overlay{
position:absolute;inset:0;z-index:-1;
background:linear-gradient(100deg,rgba(6,15,33,.94) 34%,rgba(10,30,63,.72) 68%,rgba(10,30,63,.5));
}
.hero__inner{
max-width:var(--maxw);margin-inline:auto;width:100%;
display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s6);align-items:end;
}
.hero__title{
font-family:var(--display);font-weight:700;text-transform:uppercase;
font-size:var(--fs-hero);line-height:1.02;letter-spacing:-.015em;
color:var(--t-light);margin:var(--s3) 0;max-width:12ch;
}
.hero__sub{font-size:var(--fs-lead);color:var(--t-light-2);max-width:52ch;margin-bottom:var(--s5)}
.hero__sub strong{color:var(--t-light);font-weight:600}
.hero__ctas{display:flex;gap:var(--s2);flex-wrap:wrap}
.hero__meta{
display:grid;gap:var(--s3);border-left:1px solid var(--line);
padding-left:var(--s4);color:var(--t-light);
}
.hero__meta div{display:flex;flex-direction:column;gap:4px}
.hero__meta .mono{color:var(--t-light-2)}
.hero__meta strong{
font-family:var(--display);font-weight:700;
font-size:clamp(22px,2vw,28px);letter-spacing:0;
}
.hero__scroll{
position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
width:44px;height:44px;display:flex;align-items:center;justify-content:center;
color:var(--silver);opacity:.75;transition:opacity .3s;
}
.hero__scroll:hover{opacity:1}
.hero__scroll svg{width:22px;height:22px}
/* ---------- 9. CONFIANCE ---------- */
.trust{background:var(--navy-deep);color:var(--t-light);padding:var(--s6) var(--gutter)}
.trust__grid{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:repeat(4,1fr)}
.trust__item{display:flex;flex-direction:column;gap:var(--s1);padding:0 var(--s3);position:relative}
.trust__item + .trust__item::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px;background:var(--line)}
.trust__num{font-family:var(--display);font-weight:700;font-size:var(--fs-stat);line-height:1;color:var(--t-light)}
.trust__item .mono{color:var(--t-light-2)}
/* ---------- 10. SERVICES — petites cartes à icônes ----------
Flexbox (pas grid auto-fit) : mêmes raisons qu'aux §15/16, la troncature
"Afficher plus" sur mobile est pilotée en JS via style.display. */
.services__grid{
max-width:var(--maxw);margin-inline:auto;
display:flex;flex-wrap:wrap;gap:var(--s3);
}
.svc{flex:1 1 170px}
.svc{
border:1px solid var(--line-dark);border-radius:var(--r);
padding:var(--s4);background:#fff;
display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1);
transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.svc:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(6,15,33,.1);border-color:rgba(0,51,160,.3)}
.svc__icon{
width:44px;height:44px;border-radius:10px;flex-shrink:0;margin-bottom:var(--s1);
display:flex;align-items:center;justify-content:center;
background:rgba(0,51,160,.08);color:var(--quebec);
}
.svc__icon svg{width:22px;height:22px}
.svc h3{font-size:17px}
.svc p{font-size:var(--fs-small);color:var(--t-dark-2)}
.svc__link{margin-top:var(--s2);font-weight:600;font-size:var(--fs-small);color:var(--quebec);display:inline-flex;align-items:center;gap:8px}
.svc__link span{transition:transform .3s var(--ease)}
.svc:hover .svc__link span{transform:translateX(4px)}
.svc--alert{border-top:3px solid var(--alarm)}
.svc--alert .svc__icon{background:rgba(230,57,70,.1);color:var(--alarm-btn)}
.svc--alert .svc__link{color:var(--alarm-btn)}
.svc__more{width:100%}
.svc__more summary{
list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:4px;
font-size:12px;font-weight:600;color:var(--t-dark-2);min-height:28px;
}
.svc__more summary::-webkit-details-marker{display:none}
.svc__more summary::after{content:"+";font-size:15px;line-height:1;color:var(--quebec)}
.svc__more[open] summary::after{content:"–"}
.svc__more p{margin-top:6px;font-size:13px;line-height:1.5;color:var(--t-dark-2);max-width:none}
/* ---------- 11. URGENCE ---------- */
.urgence{
position:relative;color:var(--t-light);padding:var(--sect-y) var(--gutter);
border-block:3px solid var(--alarm);overflow:hidden;
}
.urgence__bg{position:absolute;inset:0;z-index:-2}
.urgence__bg img{width:100%;height:100%;object-fit:cover}
.urgence__overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,15,33,.92),rgba(6,15,33,.95))}
.urgence__inner{max-width:var(--maxw);margin-inline:auto}
.urgence .h2{color:var(--t-light);max-width:26ch}
.urgence__accent{color:var(--alarm)}
.urgence .lead{color:var(--t-light-2);margin-bottom:var(--s5)}
/* ---------- 12. PROCESSUS — étapes visuelles reliées ---------- */
.process__track{
position:relative;
max-width:var(--maxw);margin-inline:auto;
display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);
border-top:1px solid var(--line-dark);padding-top:var(--s5);
}
.process__track::before{
/* Ligne calée sur le centre des icônes 1 et 4 : colonnes égales de 25 %,
centre de colonne = (n-1)*25% + 12.5% → 12.5% à 87.5%. */
content:"";position:absolute;top:calc(var(--s5) + 24px);left:12.5%;right:12.5%;
height:2px;background:var(--line-dark);z-index:0;
}
.process__step{display:flex;flex-direction:column;align-items:center;gap:var(--s1);text-align:center}
.process__icon{
position:relative;z-index:1;width:48px;height:48px;border-radius:50%;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
background:var(--ice);border:1px solid var(--line-dark);color:var(--quebec);
margin-bottom:var(--s1);
}
.process__icon svg{width:22px;height:22px}
.process__badge{
position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;
border-radius:99px;background:var(--quebec);color:#fff;
font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.02em;
display:flex;align-items:center;justify-content:center;
}
.process__step p{font-size:var(--fs-small);color:var(--t-dark-2)}
/* ---------- 13. AVANT/APRÈS ---------- */
.ba{max-width:var(--maxw);margin-inline:auto}
.ba__viewport{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/9;background:var(--navy-deep)}
.ba__slide{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.ba__slide.is-active{opacity:1;pointer-events:auto}
.ba__imgwrap{position:absolute;inset:0;--pos:50%}
.ba__imgwrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__before{clip-path:inset(0 calc(100% - var(--pos)) 0 0);filter:grayscale(.9) brightness(.6) contrast(.9)}
.ba__before--real{filter:none} /* vraie photo "avant" distincte : pas besoin du filtre de simulation */
.ba__handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--silver);cursor:ew-resize;touch-action:none}
.ba__handle i{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:44px;height:44px;border-radius:50%;background:var(--quebec);border:2px solid var(--silver);
}
.ba__handle i::before{content:"◂ ▸";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;letter-spacing:2px}
.ba__tag{position:absolute;top:16px;padding:6px 12px;border-radius:6px;background:rgba(6,15,33,.85);color:var(--t-light)}
.ba__tag--before{left:16px}
.ba__tag--after{right:16px}
.ba__foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-top:var(--s3);flex-wrap:wrap}
.ba__info p{color:var(--t-light-2);margin-top:6px}
.ba__nav{display:flex;gap:var(--s2)}
.ba__nav button{
width:84px;height:54px;min-width:44px;min-height:44px;border-radius:8px;
background-size:cover;background-position:center;
border:2px solid transparent;opacity:.55;transition:opacity .3s,border-color .3s;
}
.ba__nav button:hover{opacity:.85}
.ba__nav button.is-active{opacity:1;border-color:var(--silver)}
/* ---------- 14. ZONES ---------- */
.zones__grid{
max-width:var(--maxw);margin-inline:auto;
display:grid;grid-template-columns:7fr 5fr;gap:var(--s3);align-items:stretch;
}
.zones__map{border-radius:var(--r);overflow:hidden;background:#E4E9F0;border:1px solid var(--line-dark)}
.zones__map iframe{display:block;width:100%;height:100%;min-height:480px;border:0}
.zones__panel{
background:var(--navy);color:var(--t-light);border-radius:var(--r);
padding:var(--s5) var(--s4);display:flex;flex-direction:column;gap:var(--s2);
}
.zones__panel .label{margin-bottom:0}
.zones__list{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s2);margin-top:var(--s1)}
.zones__list li{
padding:10px 0;border-bottom:1px solid var(--line);
font-size:var(--fs-small);color:var(--t-light-2);
display:flex;align-items:center;gap:10px;
}
.zones__list li::before{content:"";width:12px;height:1px;background:var(--silver);flex-shrink:0}
.zones__note{font-size:13px;color:var(--t-light-2)}
.zones__panel .btn{align-self:flex-start;margin-top:auto}
/* ---------- 15. TÉMOIGNAGES ----------
Flexbox volontairement choisi à la place de CSS Grid : la troncature
mobile ("Afficher plus") est gérée en JS via style.display sur chaque
carte, et un flex-wrap classique digère ce genre de changement de façon
totalement standard, sans recalcul de pistes ni dépendance à une
media query CSS pour décider quoi cacher. */
.quotes__grid{
max-width:var(--maxw);margin-inline:auto;
display:flex;flex-wrap:wrap;gap:var(--s3);
}
.quotes__card{
flex:1 1 22%;min-width:220px;
display:flex;flex-direction:column;gap:var(--s2);
background:#fff;color:var(--t-dark);border-radius:var(--r);
padding:var(--s4);box-shadow:var(--shadow);
}
.quotes__txt{
font-size:15px;line-height:1.55;font-weight:400;
color:var(--t-dark);flex:1;
}
.quotes__card footer{display:flex;flex-direction:column;gap:6px;margin-top:var(--s1)}
.quotes__stars{color:#F2A900;letter-spacing:3px;font-size:14px}
.quotes__card footer strong{font-size:15px;color:var(--navy)}
.quotes__card footer .mono{
color:var(--t-dark-2);letter-spacing:.06em;display:inline-flex;align-items:center;gap:6px;font-size:11px;
}
.quotes__card footer .mono::before{
content:"";width:14px;height:14px;flex-shrink:0;border-radius:50%;
background:var(--quebec);
-webkit-mask:url('data:image/svg+xml;utf8,') center/10px no-repeat;
mask:url('data:image/svg+xml;utf8,') center/10px no-repeat;
}
/* ---------- 16. CERTIFICATIONS ----------
Même logique qu'au-dessus : flex-wrap plutôt que grid auto-fit, pour que
le nombre de colonnes se recalcule de façon triviale et prévisible quand
des sont montrés/masqués en JS sur mobile. */
.certs__row{
max-width:var(--maxw);margin-inline:auto;display:flex;flex-wrap:wrap;
border-top:1px solid var(--line-dark);border-left:1px solid var(--line-dark);
}
.certs__row li{
flex:1 1 160px;
border-right:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);
min-height:128px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1);
padding:var(--s3);text-align:center;transition:background .3s;
}
.certs__row li:hover{background:#fff}
.certs__row strong{
font-family:var(--display);font-weight:700;
font-size:clamp(17px,1.4vw,21px);color:var(--navy);
}
.certs__row .mono{color:var(--t-dark-2);font-size:10px}
/* ---------- 16b. AFFICHER PLUS (listes tronquées sur mobile) ---------- */
.showmore-btn{
display:none;width:fit-content;margin:var(--s4) auto 0;
align-items:center;gap:8px;
background:none;border:1px solid var(--line-dark);border-radius:99px;
padding:10px 20px;font-weight:600;font-size:13px;color:var(--t-dark-2);
min-height:44px;transition:border-color .3s,color .3s;
}
.on-dark .showmore-btn{color:var(--t-light-2);border-color:var(--line)}
.showmore-btn:hover{border-color:var(--quebec-hi);color:var(--quebec-hi)}
.showmore-btn svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.showmore-btn.is-open svg{transform:rotate(180deg)}
/* ---------- 17. FAQ ---------- */
.faq__list{max-width:880px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
padding:var(--s3) 4px;font-weight:600;font-size:clamp(15px,1.25vw,18px);min-height:44px;color:var(--t-light);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:18px;height:18px;flex-shrink:0;color:var(--silver);transition:transform .3s var(--ease)}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq .faq__body{padding:0 4px var(--s3);color:var(--t-light-2)}
/* ---------- 18. SOUMISSION ---------- */
.devis__grid{
max-width:var(--maxw);margin-inline:auto;
display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,4vw,64px);align-items:start;
}
.devis__form .h2{margin-bottom:var(--s3)}
.devis__form .lead{margin-bottom:var(--s5)}
.devis__ctas{display:flex;gap:var(--s2);flex-wrap:wrap}
.devis__ctas .btn{color:var(--t-dark)}
.devis__ctas .btn--primary{color:#fff}
.devis__ctas .btn--ghost{border-color:var(--line-dark);color:var(--t-dark)}
.devis__ctas .btn--ghost:hover{border-color:var(--quebec);background:rgba(0,51,160,.06)}
.devis__note{margin-top:var(--s3);color:var(--t-dark-2);font-size:11px;letter-spacing:.1em;max-width:none}
.devis__card{
background:var(--navy);color:var(--t-light);border-radius:var(--r);
padding:var(--s5) var(--s4);display:flex;flex-direction:column;align-items:center;gap:var(--s3);
text-align:center;box-shadow:var(--shadow);position:sticky;top:104px;
}
.devis__card > img{width:112px;height:auto}
.devis__tel{
font-family:var(--display);font-weight:700;
font-size:clamp(24px,2.4vw,34px);color:var(--t-light);transition:color .3s;
}
.devis__tel:hover{color:var(--silver)}
.devis__rows{display:grid;gap:var(--s2);width:100%;text-align:left}
.devis__rows li{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-small);color:var(--t-light-2)}
.devis__rows svg{width:19px;height:19px;color:var(--silver);flex-shrink:0;margin-top:2px}
.devis__rows a:hover{color:#fff}
.devis__rbq{color:var(--t-light-2);border-top:1px solid var(--line);padding-top:var(--s2);width:100%}
/* ---------- 19. FOOTER ---------- */
.footer{background:var(--navy-deep);color:var(--t-light);padding:var(--s7) var(--gutter) calc(var(--s3) + 76px)}
.footer__grid{
max-width:var(--maxw);margin-inline:auto;
display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:clamp(24px,3vw,48px);
}
.footer__grid > div:first-child img{width:100%;max-width:150px;height:auto}
.footer__tagline{margin-top:var(--s2);color:var(--t-light-2);font-size:15px;line-height:1.55}
.footer h4{color:var(--silver);margin-bottom:var(--s2)}
.footer nav a,.footer div > a{display:block;padding:5px 0;color:var(--t-light-2);font-size:var(--fs-small);transition:color .3s;min-height:28px}
.footer nav a:hover,.footer div > a:hover{color:#fff}
.footer p{color:var(--t-light-2);font-size:var(--fs-small)}
.footer__socials{display:flex;gap:12px;margin-top:var(--s2)}
.footer__socials a{
width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
display:flex;align-items:center;justify-content:center;color:var(--silver);
transition:background .3s;
}
.footer__socials a:hover{background:rgba(192,199,206,.14)}
.footer__socials svg{width:17px;height:17px}
.footer__lys{
max-width:var(--maxw);margin:var(--s6) auto var(--s3);
display:flex;align-items:center;gap:var(--s3);color:var(--silver);font-size:16px;
}
.footer__lys span{flex:1;height:1px;background:var(--line)}
.footer__bottom{max-width:var(--maxw);margin-inline:auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:var(--t-light-2)}
.footer__bottom a:hover{color:#fff}
/* ---------- 20. BOUTON D'APPEL FLOTTANT (persistant, coin bas-droit) ---------- */
.callbtn{
position:fixed;right:20px;bottom:20px;z-index:930;
width:56px;height:56px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:var(--alarm-btn);color:#fff;
box-shadow:0 8px 24px rgba(196,43,55,.45);
transition:transform .3s var(--ease),box-shadow .3s;
}
.callbtn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(196,43,55,.55)}
.callbtn svg{width:24px;height:24px}
/* ---------- 21. BREAKPOINTS 480 / 720 / 900 / 1200 / 1440 ---------- */
@media (min-width:1440px){
:root{--maxw:1280px}
}
@media (max-width:900px){
/* NB : .nav porte un backdrop-filter, elle devient le containing block
des descendants fixed — on dimensionne donc le tiroir en 100svh. */
.nav__menu{
position:fixed;top:0;right:0;height:100svh;width:min(320px,86vw);z-index:950;
overflow-y:auto;
background:var(--navy-deep);flex-direction:column;align-items:flex-start;justify-content:center;
padding:80px 32px;gap:var(--s2);transform:translateX(100%);transition:transform .3s var(--ease);
box-shadow:-16px 0 48px rgba(0,0,0,.45);
}
.nav__menu.is-open{transform:none}
.nav__burger{display:flex;position:relative;z-index:960}
.hero{padding-top:120px}
.hero__scroll{display:none} /* chevauche le bouton d'appel flottant en bas d'écran */
.hero__inner{grid-template-columns:1fr;align-items:start}
.hero__meta{
border-left:none;border-top:1px solid var(--line);
padding:var(--s3) 0 0;grid-template-columns:repeat(4,auto);gap:var(--s3);
}
.zones__grid,.devis__grid{grid-template-columns:1fr}
.zones__map iframe{min-height:340px}
.devis__card{position:static}
.process__track{grid-template-columns:1fr 1fr;gap:var(--s5) var(--s4)}
.process__track::before{display:none}
.footer__grid{grid-template-columns:1fr 1fr}
.quotes__card{flex-basis:46%}
}
@media (max-width:720px){
:root{--sect-y:72px} /* moins de vide entre sections sur petit écran */
.nav__brand img{height:46px}
.nav__brand__txt{font-size:13px}
.nav__brand__txt strong{font-size:15px}
.trust__grid{grid-template-columns:1fr 1fr;row-gap:var(--s4)}
.trust__item:nth-child(3)::before{display:none}
.ba__viewport{aspect-ratio:4/3}
.zones__list{grid-template-columns:1fr}
/* Masqué sur mobile : redondant avec la section "confiance" juste en
dessous (mêmes infos : ans d'expérience, RBQ, garantie...). */
.hero__meta{display:none}
}
@media (max-width:480px){
:root{--fs-body:16px;--sect-y:56px}
.callbtn{width:50px;height:50px;right:14px;bottom:14px}
.callbtn svg{width:21px;height:21px}
.hero{padding-top:104px}
.hero__ctas{flex-direction:column;align-items:stretch}
.process__track{grid-template-columns:1fr}
.footer__grid{grid-template-columns:1fr}
.quotes__card{flex-basis:100%}
.ba__nav button{width:64px;height:44px}
.ba__foot{flex-direction:column;align-items:flex-start}
.zones__map iframe{min-height:280px}
/* Troncature "Afficher plus" : entièrement pilotée en JS (js/main.js),
pas de nth-child/media query ici — voir js/main.js. Le bouton reste
display:none par défaut (règle de base ligne ~398) et c'est le JS qui
le passe à flex uniquement quand il y a réellement plus d'éléments
que la limite visible sur cette largeur d'écran. */
}
@media (max-width:400px){
.nav__brand__txt{display:none}
}