/* ========================================================= SBS COUVERTURE — Feuille de style principale Charte : noir #101215 + gris nardo #6E7174 + blanc ========================================================= */ @import url("../assets/fonts/fonts.css"); /* ========================================================= 1. TOKENS ========================================================= */ :root{ /* 'dark' alors que le site est clair : ce n'est pas une erreur. Safari iOS teinte ses barres — bandeau d'etat en haut, barre d'adresse en bas — et la zone de rebond d'apres le schema DECLARE PAR LA PAGE, pas d'apres 'theme-color' ni d'apres l'apparence du telephone. Tant que la page se declarait claire, ces zones restaient blanches sous un en-tete noir, meme avec les trois balises theme-color noires posees dans . Sans danger pour le dessin du site : color-scheme ne repeint que ce que fournit le navigateur — canevas, controles natifs, ascenseurs. Or tous nos fonds sont poses explicitement (body juste en dessous, .form__row plus bas), et les champs du devis reprennent 'light' pour eux seuls. Declarer un schema, quel qu'il soit, suffit par ailleurs a interdire le mode sombre automatique de Chrome Android et Samsung Internet — ce que 'only light' faisait deja. */ color-scheme: dark; /* corollaire du schema sombre : l'ascenseur natif suit lui aussi. Sur les navigateurs a barre classique (Windows) il passait en gris fonce sur une page blanche. On lui redonne les valeurs claires d'origine. */ scrollbar-color: #CFD4D7 #FFFFFF; /* --- Noir --- */ --ink:#101215; /* noir, texte et fonds sombres */ --ink-2:#1B1E21; /* noir eclairci, cartes sur fond sombre */ --ink-80:rgba(16,18,21,.80); /* .62 et non .58 : a .58 le texte tombait a 4,2-4,5:1 sur --mist et --mist-3, sous le seuil AA. A .62 il passe sur tous les fonds clairs. */ --ink-60:rgba(16,18,21,.62); /* trop clair pour du texte (2,4:1) : reserve aux placeholders, chevrons et filets */ --ink-40:rgba(16,18,21,.38); --ink-12:rgba(16,18,21,.12); --ink-06:rgba(16,18,21,.06); /* --- Gris nardo --- Le gris nardo de reference, #6E7174, ne porte pas de texte blanc au niveau AA (4.2:1). Les aplats utilisent donc --steel, une nuance a peine plus sombre qui passe a 5.4:1, et --steel-ref reste disponible la ou la teinte exacte compte sans texte pose dessus. */ --steel-ref:#6E7174; --steel:#5C5F62; /* aplats et boutons, blanc lisible dessus */ --steel-dark:#45484B; /* survol */ --steel-soft:#A8ADB1; /* accents poses sur fond noir */ --steel-wash:#EEF0F1; /* fonds tres clairs, pastilles */ --steel-tint:rgba(110,113,116,.13); /* --- Blanc et gris clairs --- */ --paper:#FFFFFF; --mist:#F4F5F6; /* sections alternees */ --mist-2:#E9EBEC; /* gris appuye, separations */ --mist-3:#DDE1E3; /* gris franc, aplats a distinguer du fond de section */ --field:#F2F3F4; /* fond des champs de formulaire */ --line:#E2E4E6; --line-2:#CFD4D7; /* liseré des aplats gris, ou --line s'efface */ --white:#fff; --white-80:rgba(255,255,255,.80); --white-60:rgba(255,255,255,.58); --white-12:rgba(255,255,255,.12); --white-08:rgba(255,255,255,.08); --sans:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif; --r-xs:6px; --r-sm:10px; --r:16px; --r-lg:24px; --r-pill:999px; --shell:1240px; --gut:clamp(20px,4vw,44px); --sec:clamp(68px,8.5vw,124px); --navh:88px; /* repli avant mesure JS, volontairement large */ /* Seule couleur hors palette du site, assumee : les avis viennent de Google et leurs etoiles reprennent le bleu de la marque. Tout passe par --google, un seul endroit a changer pour revenir a des etoiles noires. */ --google:#4285F4; --star-on:var(--google); --star-off:#D3D6D8; /* Seconde couleur hors palette, assumee elle aussi : le vert du temoin « en activite » de la barre du haut. Le noir et le gris nardo ne savent pas dire « disponible » ; ce vert le fait en un point de 7 px. Tout passe par --pulse, un seul endroit a changer. */ --pulse:#37D67A; --shadow-s:0 2px 10px rgba(16,18,21,.05); --shadow:0 20px 48px -26px rgba(16,18,21,.40); --shadow-lg:0 36px 80px -40px rgba(16,18,21,.52); --shadow-steel:0 16px 34px -16px rgba(16,18,21,.45); --ease:cubic-bezier(.2,.7,.3,1); } /* Mode sombre declare, mais identique au mode clair. color-scheme suffit contre le mode sombre automatique de Chrome Android ; il ne suffit pas contre les modes "nuit" de Brave ou Samsung Internet, qui remappent les couleurs des sites n'offrant aucun theme sombre. En declarant le notre, on leur signale que le sujet est traite. Les valeurs sont volontairement identiques : le site n'a qu'une seule apparence. */ @media (prefers-color-scheme: dark){ :root{ --ink:#101215; --ink-2:#1B1E21; --paper:#FFFFFF; --mist:#F4F5F6; --mist-2:#E9EBEC; --mist-3:#DDE1E3; --field:#F2F3F4; --line:#E2E4E6; --line-2:#CFD4D7; } body{background:#000; color:var(--ink)} main{background-color:var(--paper)} /* un fond herite est la premiere chose que ces moteurs assombrissent : les sections claires portent donc un fond explicite */ .about,.reviews,.faq,.sv-list,.works{background-color:var(--paper)} .trust,.services,.zone,.sv-intro,.sv-why{background-color:var(--mist)} .why,.steps{background-color:var(--ink)} } /* ========================================================= 2. BASE ========================================================= */ *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:100px; /* Le clip horizontal est porte par et pas seulement par : quand seul body le porte, sa valeur se propage au viewport, body devient un conteneur de defilement et position:sticky casse sur Safari iPad. */ overflow-x:hidden; overflow-x:clip; /* Fond du canevas : ce qu'on voit dans les zones de rebond du defilement sur iOS. Meme noir que le body, sinon un lisere plus clair y apparait. Ce n'est pas une couleur de charte, main la recouvre partout ailleurs. */ background-color:#000; } body{ margin:0; /* Sombre, alors que le site est clair — et c'est volontaire. Safari sur iOS teinte ses barres translucides d'apres le fond du BODY, pas d'apres celui de html, pas d'apres theme-color et pas d'apres color-scheme. Tant que le body etait blanc, le bandeau d'etat restait blanc sous un en-tete noir. Le blanc du site est donc porte par main, juste en dessous. Le remettre ici, ou le deplacer ailleurs, ramene la bande blanche. Noir pur et non --ink : le verre translucide de Safari eclaircit ce qu'il recouvre, et --ink y vire au gris fonce. Cette couleur n'apparait nulle part dans la mise en page — main la recouvre entierement, et les blocs hors de main (topbar, nav, mega, drawer, foot, dock) ont chacun le leur. */ background:#000; color:var(--ink); font-family:var(--sans); font-size:16.5px; line-height:1.65; font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* Toutes les sections claires vivent dans main : c'est lui qui porte le blanc que le body portait. Voir la regle body ci-dessus. */ main{display:block;background:var(--paper)} img,svg,video{display:block;max-width:100%} /* height:auto seul ne suffit pas : les attributs width/height du HTML sont des indices de presentation qui s'appliquent tant qu'aucune regle ne pose width, et une hauteur imposee ecrase alors le rapport de l'image. */ img{height:auto} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} ul{margin:0;padding:0;list-style:none} h1,h2,h3,h4{ margin:0; font-weight:800; line-height:1.08; letter-spacing:-.028em; } h1{font-size:clamp(2.5rem,6vw,4.35rem)} h2{font-size:clamp(2rem,4.2vw,3.1rem)} h3{font-size:clamp(1.15rem,1.7vw,1.4rem);letter-spacing:-.018em;line-height:1.25} p{margin:0 0 1.1em} p:last-child{margin-bottom:0} :focus-visible{ outline:3px solid var(--steel); outline-offset:3px; border-radius:4px; } ::selection{background:var(--steel);color:#fff} .shell{ width:min(100% - var(--gut)*2,var(--shell)); margin-inline:auto; } .section{padding-block:var(--sec)} /* saut vers le contenu, visible uniquement au clavier */ /* Range vers le haut et non vers la gauche : un left negatif de 9999 px etend le canevas a droite sur certains navigateurs mobiles et la page se met a glisser. Un top negatif n'a pas cet effet. */ .skip{ position:absolute;left:0;top:-9999px;z-index:200; padding:12px 20px;background:var(--ink);color:#fff;font-weight:700; } .skip:focus{left:12px;top:12px} /* ---------- Titres de section ---------- */ .eyebrow{ display:inline-flex;align-items:center;gap:9px; margin:0 0 16px; font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase; color:var(--steel); } .eyebrow::before{ content:"";width:26px;height:2px;background:var(--steel);border-radius:2px; } .eyebrow--light{color:var(--steel-soft)} .eyebrow--light::before{background:var(--steel-soft)} .lead{ font-size:clamp(1.02rem,1.4vw,1.12rem); color:var(--ink-60); max-width:62ch; } .lead--light{color:var(--white-60)} .head{max-width:64ch;margin-bottom:clamp(38px,4.5vw,60px)} /* L'espacement titre -> chapo ne peut pas dependre de .head : la colonne « A propos » aligne eyebrow, h2 et lead sans conteneur, son chapo se retrouvait colle au titre. La regle porte donc sur le couple lui-meme — tous les .lead du site suivent un

, aucun autre cas a couvrir. */ h2 + .lead{margin-top:22px} .head h2 + p{margin-top:22px} .head--center{margin-inline:auto;text-align:center} /* ---------- Boutons ---------- */ .btn{ /* Verre noir, meme recette que le bandeau d'engagements et la pastille « a propos » : voile a .96, liseré blanc a 12 %, flou d'arriere-plan. Le gris nardo ne sert plus de fond de bouton. */ --bg:rgba(16,18,21,.96); --fg:#fff; display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:15px 28px; background:var(--bg);color:var(--fg); border:1.5px solid var(--white-12);border-radius:var(--r-pill); font-size:.98rem;font-weight:700;letter-spacing:-.01em; cursor:pointer; transition:transform .25s var(--ease),background .25s,box-shadow .25s,border-color .25s,color .25s; -webkit-backdrop-filter:saturate(150%) blur(18px);backdrop-filter:saturate(150%) blur(18px); box-shadow:var(--shadow); } .btn svg{width:19px;height:19px;flex:none} /* Le survol ne peut plus assombrir : le bouton est deja noir. Il eclaircit donc d'un cran — le noir des cartes sur fond sombre — et affirme le lisere. */ .btn:hover{--bg:rgba(27,30,33,.96);border-color:rgba(255,255,255,.28);transform:translateY(-2px)} .btn:active{transform:translateY(0)} /* Le dock et le pied du tiroir sont les deux seules surfaces plates du site : un noir uni, sans photo dessous. Le voile du bouton s'y confond avec son support et plus aucune variation de fond ne dessine la forme — le lisere monte donc a 26 %, la valeur du filet du mega-menu, et le voile d'un cran avec lui. Les heros et la CTA finale, eux, gardent la recette de base : leur fond est une photo, dont les nuances suffisent a detacher le bouton. C'est aussi ce qui les tient identiques d'une page a l'autre — l'accueil eclairci et les pages de service a la recette pleine se lisaient de deux noirs differents. */ .dock .btn:not(.btn--line), .drawer__foot .btn:not(.btn--ghost){ --bg:rgba(27,30,33,.96);border-color:rgba(255,255,255,.26); } .dock .btn:not(.btn--line):hover, .drawer__foot .btn:not(.btn--ghost):hover{ --bg:rgba(38,42,46,.96);border-color:rgba(255,255,255,.46); } /* Sur photo et sur fond noir, le bouton de devis passe en blanc plein : c'est la seule forme qui se detache franchement d'un fond sombre — meme parti que le bloc d'appel des questions frequentes et le pied du mega-menu. Le verre noir se confondait avec la photo et se lisait moins fort que le bouton d'appel voisin, dont le voile est blanc : la hierarchie s'inversait. Le verre noir reste sur fond clair — bloc « a propos », envoi du devis — ou c'est lui la forme qui tranche, et sur le bouton d'appel du tiroir. Fond opaque : ni lisere, ni flou d'arriere-plan a flouter. */ .hero__cta .btn:not(.btn--line), .sv-hero__cta .btn:not(.btn--line), .cta__btns .btn:not(.btn--line), .dock .btn:not(.btn--line){ --bg:var(--paper);--fg:var(--ink); border-color:transparent; -webkit-backdrop-filter:none;backdrop-filter:none; } .hero__cta .btn:not(.btn--line):hover, .sv-hero__cta .btn:not(.btn--line):hover, .cta__btns .btn:not(.btn--line):hover, .dock .btn:not(.btn--line):hover{ --bg:var(--mist);border-color:transparent; } .btn--dark{--bg:var(--ink);box-shadow:var(--shadow)} .btn--dark:hover{--bg:#000} .btn--ghost{ --bg:transparent;--fg:var(--ink); border-color:var(--ink-12);box-shadow:none; /* pose sur fond clair : le flou herite de la base n'a rien a flouter et sa saturation teinterait le blanc de la section */ -webkit-backdrop-filter:none;backdrop-filter:none; } .btn--ghost:hover{--bg:var(--ink);--fg:#fff;border-color:var(--ink)} /* Bouton pose sur une photo. Transparent, il disparaissait sur les zones claires du cliche : il porte un voile blanc leger et un flou d'arriere-plan, qui le detache sans masquer l'image. Le flou n'est qu'un confort — la ou il n'est pas gere, le voile et la bordure suffisent a le lire. */ .btn--line{ --bg:rgba(255,255,255,.10);--fg:#fff; border-color:rgba(255,255,255,.34);box-shadow:none; -webkit-backdrop-filter:blur(12px) saturate(140%); backdrop-filter:blur(12px) saturate(140%); } .btn--line:hover{--bg:rgba(255,255,255,.20);border-color:rgba(255,255,255,.6)} .btn--lg{padding:18px 34px;font-size:1.02rem} /* Sur telephone, les rangees d'appel a l'action s'empilent et prennent toute la largeur. Cote a cote sur 380 px, les deux boutons devenaient etroits et le libelle passait a la ligne ; pleine largeur, la cible est franche sous le pouce et les deux actions se lisent l'une sous l'autre. Les rangees qui melent un bouton et le bloc telephone (.about__tel) ne voient que leur bouton s'etendre : ce bloc n'est pas un bouton et garderait mal une largeur imposee. */ @media (max-width:620px){ .hero__cta, .sv-hero__cta, .cta__btns{flex-direction:column;align-items:stretch} .hero__cta .btn, .sv-hero__cta .btn, .cta__btns .btn, .about__cta .btn, .sv-intro__cta .btn{width:100%} } .btn--full{width:100%} /* lien flechei */ .arrow{ display:inline-flex;align-items:center;gap:8px; font-weight:700;font-size:.95rem;color:var(--steel); } .arrow svg{width:17px;height:17px;transition:transform .25s var(--ease)} .arrow:hover svg{transform:translateX(4px)} /* ========================================================= 3. BARRE DE CONTACT ========================================================= */ .topbar{ position:relative;z-index:60; background:var(--ink);color:var(--white-60); font-size:.83rem; } .topbar__in{ display:flex;align-items:center;justify-content:space-between;gap:20px; min-height:44px;padding-block:7px; } .topbar__items{display:flex;align-items:center;gap:26px;flex-wrap:wrap} .topbar a{display:inline-flex;align-items:center;gap:8px;transition:color .2s} .topbar a:hover{color:#fff} .topbar svg{width:15px;height:15px;color:var(--steel-soft);flex:none} .topbar__note{display:inline-flex;align-items:center;gap:9px;white-space:nowrap} /* Temoin d'activite : un point vert et l'onde qui s'en echappe. L'onde est un pseudo-element et non une ombre animee — une ombre portee se repeint a chaque image, une transformation reste sur le compositeur. Le point garde sa taille, c'est la copie derriere lui qui grandit et s'efface. */ /* Le meme temoin sert dans le bloc de contact (SS16) : une seule definition, sinon l'onde et la couleur divergent des deux cotes. */ .topbar__dot{ position:relative;flex:none; width:7px;height:7px;border-radius:50%;background:var(--pulse); box-shadow:0 0 0 3px rgba(55,214,122,.20); } .topbar__dot::after{ content:"";position:absolute;inset:0;border-radius:50%; background:var(--pulse); animation:pulsar 2.4s cubic-bezier(.25,.6,.35,1) infinite; } @keyframes pulsar{ 0% { transform:scale(1); opacity:.6 } 70% { transform:scale(3.4); opacity:0 } 100% { transform:scale(3.4); opacity:0 } } /* le temoin reste vert et lisible, il cesse seulement de battre */ @media (prefers-reduced-motion:reduce){ .topbar__dot::after{animation:none;opacity:0} } /* Sous 1080 px la barre ne porte plus que la promesse et son temoin, centres. Le telephone et la ville qui l'accompagnaient sont retires : ils faisaient doublon avec le bouton d'appel de l'en-tete, present a toutes ces largeurs, et avec la barre d'action du bas sur telephone. Rien n'est perdu. La phrase reste sur UNE SEULE ligne : le nowrap de la regle de base est conserve, et c'est sa taille qui suit celle de l'ecran. Coupee en deux, la barre doublait de hauteur et la promesse se lisait comme deux fragments. 3.2vw est la pente mesuree : la phrase demande 354 px a 13.28 px, et la barre n'offre que la largeur de l'ecran moins deux gouttieres de 20 px — soit 350 px sur un ecran de 390, il manquait quatre pixels. Le plafond .83rem lui rend sa taille normale des 415 px, ou elle tient deja. */ @media (max-width:1080px){ .topbar__items{display:none} .topbar__in{justify-content:center} .topbar__note{font-size:clamp(9.5px,3.2vw,.83rem)} } @media (max-width:620px){ .topbar__items{gap:16px;justify-content:center;width:100%} .topbar__items a:nth-child(3){display:none} } /* ========================================================= 4. NAVIGATION ========================================================= */ .nav{ position:sticky;top:0;z-index:70; background:rgba(16,18,21,.55); backdrop-filter:saturate(150%) blur(14px); -webkit-backdrop-filter:saturate(150%) blur(14px); border-bottom:1px solid transparent; color:#fff; transition:box-shadow .3s,border-color .3s,background .3s; } /* une fois la page defilee, la barre passe sur du blanc : on l'opacifie pour garder les liens lisibles */ .nav.is-stuck{background:rgba(16,18,21,.88);border-bottom-color:var(--white-12); box-shadow:0 10px 30px -22px rgba(16,18,21,.8)} .nav__in{ display:flex;align-items:center;justify-content:space-between;gap:24px; min-height:88px; } .nav__logo{display:flex;align-items:center;flex:none} .nav__logo img{height:50px;width:auto} .nav__links{display:flex;align-items:center;gap:4px} .nav__links > a,.nav__droplink{ position:relative; padding:10px 15px;border-radius:var(--r-pill); font-size:.95rem;font-weight:600;color:var(--white-80); transition:color .2s,background .2s; } .nav__links > a:hover,.nav__droplink:hover{color:#fff;background:var(--white-12)} /* Page ou section en cours : meme pastille translucide que le survol, un cran plus dense. Le reperage ne repose plus sur une nuance de gris (.is-active ne changeait que la couleur du texte, invisible sur une barre deja claire). .is-active est pose par main.js (SS6) au fil du defilement sur l'accueil, et en dur sur le lien Services des pages de prestation. */ .nav__links > a.is-active,.nav__droplink.is-active{ background:rgba(255,255,255,.14);color:#fff; } /* deux crans plus haut au survol, sinon la pastille en cours disparaitrait sous le curseur au lieu de repondre */ .nav__links > a.is-active:hover,.nav__droplink.is-active:hover{ background:rgba(255,255,255,.22); } .nav__cta{display:flex;align-items:center;gap:14px;flex:none} .nav__tel{ display:inline-flex;align-items:center;gap:11px; font-weight:800;font-size:1.02rem;letter-spacing:-.02em;color:#fff; } .nav__tel i{ display:grid;place-items:center;width:40px;height:40px;flex:none; border-radius:50%;background:var(--white-12);color:#fff; } .nav__tel svg{width:18px;height:18px} .nav__tel span{display:block;font-size:.66rem;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--white-60);line-height:1.2} /* ---------- Mega menu ---------- */ .nav__drop{position:relative} .nav__droplink{display:inline-flex;align-items:center;gap:6px;cursor:pointer} .nav__droplink svg{width:15px;height:15px;transition:transform .25s var(--ease)} .nav__drop:hover .nav__droplink svg,.nav__drop:focus-within .nav__droplink svg{transform:rotate(180deg)} .mega{ position:absolute;top:calc(100% + 14px);left:50%; transform:translate(-50%,10px); width:min(92vw,760px); padding:14px; background:rgba(16,18,21,.96);border:1px solid var(--white-12);border-radius:var(--r-lg); -webkit-backdrop-filter:saturate(150%) blur(18px);backdrop-filter:saturate(150%) blur(18px); box-shadow:var(--shadow-lg); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s; } /* rattrape l'espace entre le lien et le panneau : sans ce pont, le menu se referme des que le curseur traverse les 14 px de vide */ .mega::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px} .nav__drop:hover .mega,.nav__drop:focus-within .mega{ opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0); } .mega__grid{display:grid;grid-template-columns:1fr 1fr;gap:4px} .mega__it{ display:flex;align-items:center;gap:13px; padding:12px 13px;border-radius:var(--r); transition:background .2s; } .mega__it:hover{background:var(--white-08)} .mega__it i{ display:grid;place-items:center;width:42px;height:42px;flex:none; border-radius:12px;background:var(--white-12);color:#fff; transition:background .2s,color .2s; } .mega__it:hover i{background:var(--steel-soft);color:var(--ink)} .mega__it svg{width:21px;height:21px} .mega__it b{display:block;font-size:.94rem;font-weight:700;letter-spacing:-.015em;color:#fff} .mega__it small{display:block;font-size:.8rem;color:var(--white-60);line-height:1.4} /* Le voile blanc a 8 % se lisait a peine sur le panneau. Le bandeau reprend le traitement des sections sombres (SS9, SS11) : aplat noir opaque et deux halos radiaux — blanc en haut a gauche, nardo en bas a droite — qui l'eclairent de l'interieur. C'est la lumiere qui le detache du panneau, pas une difference de gris, et le filet clair en arete haute ferme la forme. */ .mega__foot{ position:relative;overflow:hidden; display:flex;align-items:center;justify-content:space-between;gap:18px; margin-top:10px;padding:13px 14px 13px 18px; background-color:var(--ink); background-image: radial-gradient(78% 175% at 14% -25%,rgba(255,255,255,.17) 0%,transparent 62%), radial-gradient(70% 160% at 92% 130%,rgba(168,173,177,.15) 0%,transparent 60%); border:1px solid rgba(255,255,255,.13); border-radius:var(--r); font-size:.9rem;color:rgba(255,255,255,.74); } .mega__foot::before{ content:"";position:absolute;inset:0 0 auto;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.26) 50%,transparent); } .mega__foot span{position:relative} .mega__foot b{color:#fff} /* Sur fond sombre, le bouton clair est la seule forme qui se detache franchement — meme parti que le bloc d'appel des questions frequentes. */ .mega__foot .arrow{ position:relative;flex:none; padding:9px 15px;border-radius:var(--r-pill); background:var(--paper);color:var(--ink); font-size:.86rem; transition:background .2s var(--ease); } .mega__foot .arrow:hover{background:var(--mist)} .mega__foot .arrow svg{width:15px;height:15px} /* ---------- Burger ---------- */ .burger{ display:none; width:46px;height:46px; align-items:center;justify-content:center; background:var(--white-12);color:#fff;border:0;border-radius:14px;cursor:pointer; } .burger svg{width:21px;height:21px} @media (max-width:1120px){ .nav__links{display:none} .burger{display:inline-flex} .nav__in{min-height:78px} } @media (max-width:700px){ .nav__tel span,.nav__tel b{display:none} .nav__tel i{width:46px;height:46px;background:var(--steel);color:#fff} } /* ---------- Tiroir mobile ---------- */ .drawer{ position:fixed;inset:0;z-index:120; display:grid;grid-template-columns:1fr min(88vw,400px); visibility:hidden; /* Le panneau est gare a translateX(100%), donc entierement a droite du cadre. Sans coupe ici, cette couche fixe deborde de la fenetre : sur iOS, la page se laisse alors tirer lateralement et revient en place. La coupe tombe au bord droit de la fenetre, la ou plus rien n'est visible de toute facon — l'ouverture du tiroir n'en est pas changee. */ overflow:hidden; } .drawer.is-open{visibility:visible} .drawer__veil{ background:rgba(16,18,21,.55); opacity:0;transition:opacity .3s; -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px); } .drawer.is-open .drawer__veil{opacity:1} .drawer__panel{ display:flex;flex-direction:column; background:rgba(16,18,21,.94);color:#fff; -webkit-backdrop-filter:saturate(150%) blur(18px);backdrop-filter:saturate(150%) blur(18px); transform:translateX(100%);transition:transform .34s var(--ease); overflow-y:auto;overscroll-behavior:contain; } .drawer.is-open .drawer__panel{transform:none} .drawer__top{ display:flex;align-items:center;justify-content:space-between; padding:18px 22px;border-bottom:1px solid var(--white-12); } .drawer__top img{height:44px;width:auto} .drawer__close{ display:grid;place-items:center;width:42px;height:42px; background:var(--white-12);border:0;border-radius:12px;cursor:pointer;color:#fff; } .drawer__close svg{width:20px;height:20px} .drawer__nav{padding:14px 16px;flex:1} .drawer__nav > a,.drawer__toggle{ display:flex;align-items:center;justify-content:space-between;gap:10px; width:100%;padding:14px 14px; background:none;border:0;border-radius:var(--r);color:#fff; font-size:1.05rem;font-weight:700;letter-spacing:-.02em;text-align:left;cursor:pointer; } .drawer__nav > a:hover,.drawer__toggle:hover{background:var(--white-08)} .drawer__toggle svg{width:18px;height:18px;color:var(--white-60);transition:transform .25s var(--ease)} .drawer__group.is-open .drawer__toggle svg{transform:rotate(180deg)} .drawer__sub{ display:grid;grid-template-rows:0fr; transition:grid-template-rows .3s var(--ease); } .drawer__group.is-open .drawer__sub{grid-template-rows:1fr} .drawer__sub > div{overflow:hidden} /* Chaque prestation porte son icone, la meme que dans le mega-menu et les cartes de service : sur huit entrees de meme longueur, c'est le seul repere qui permet de viser sans lire. Le retrait passe de 28 a 18 px, l'icone fournissant desormais la marge visuelle. */ .drawer__sub a{ display:flex;align-items:center;gap:12px;padding:9px 14px 9px 18px; font-size:.95rem;font-weight:600;color:var(--white-60); border-left:2px solid var(--white-12);margin-left:14px; } .drawer__sub a i{ display:grid;place-items:center;width:34px;height:34px;flex:none; border-radius:10px;background:var(--white-08);color:#fff; transition:background .2s,color .2s; } .drawer__sub a svg{width:18px;height:18px} .drawer__sub a:hover{color:#fff;border-left-color:var(--steel-soft)} .drawer__sub a:hover i{background:var(--steel-soft);color:var(--ink)} /* la page ouverte se signale par la meme pastille pleine que le survol */ .drawer__sub a[aria-current]{color:#fff} .drawer__sub a[aria-current] i{background:var(--steel-soft);color:var(--ink)} .drawer__foot{padding:18px 22px 26px;border-top:1px solid var(--white-12);display:grid;gap:10px} /* Meme temoin que le bloc de contact, pose juste au-dessus du trait qui ouvre le pied du tiroir — donc hors du pied, sinon il passerait sous le trait. Il est centre et sans cadre : dans un panneau etroit, une pastille de plus alourdirait. Le corps suit la largeur comme dans le bloc de contact — le panneau fait au plus 340 px, la phrase entiere n'y tient pas au corps nominal. */ .drawer__live{ display:flex;align-items:center;justify-content:center;gap:8px; margin:0;padding:0 22px 16px; font-size:clamp(.53rem,2.6vw,.78rem);font-weight:600;letter-spacing:-.01em; color:rgba(255,255,255,.74);white-space:nowrap; } .drawer__foot .btn{width:100%} /* le seul bouton de devis du tiroir. Comme ses jumeaux du hero, du dock et de la CTA finale, il est blanc plein sur le panneau noir — le contour blanc qu'il portait avant le laissait au meme rang que le bouton d'appel */ .drawer__foot .btn--ghost{ --bg:var(--paper);--fg:var(--ink);border-color:transparent; -webkit-backdrop-filter:none;backdrop-filter:none; } .drawer__foot .btn--ghost:hover{--bg:var(--mist);--fg:var(--ink);border-color:transparent} /* ========================================================= 5. HERO ========================================================= */ .hero{ position:relative; margin-top:calc(var(--navh) * -1); padding-top:calc(var(--navh) + clamp(60px,8vw,110px)); padding-bottom:clamp(100px,11vw,160px); /* la carte du bandeau y remonte */ background:var(--ink); color:#fff; overflow:hidden; isolation:isolate; } .hero__bg{ position:absolute;inset:0;z-index:-2; width:100%;height:100%;object-fit:cover; opacity:1; } /* Voile du hero. Il n'y en avait pas : la photo d'avant etait sombre par nature et le texte blanc tenait seul. Le panorama qui l'a remplacee a un grand ciel pale et des prairies claires, sur lesquels le meme texte tombait sous le seuil de lisibilite. Deux degrades superposes plutot qu'un aplat, pour ne pas eteindre la photo : - l'un en oblique, dense a gauche ou le texte est pose, leger a droite ou la toiture est deja sombre ; - l'autre vertical, qui rattrape le haut sous la barre de navigation et le bas ou la carte du bandeau vient chevaucher. Meme recette que .sv-hero::after et .cta::after, dosee pour cette photo. */ .hero::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background: linear-gradient(100deg,rgba(16,18,21,.74) 0%,rgba(16,18,21,.54) 46%, rgba(16,18,21,.20) 100%), linear-gradient(180deg,rgba(16,18,21,.34) 0%,rgba(16,18,21,0) 40%, rgba(16,18,21,.46) 100%); } /* plus de carte laterale : le texte occupe la largeur, mais reste borne pour que les lignes ne s'etirent pas jusqu'au bord */ .hero__in > div{max-width:1060px} .hero__tag{ display:inline-flex;align-items:center;gap:10px; padding:8px 16px 8px 10px;margin-bottom:26px; background:var(--white-08);border:1px solid var(--white-12);border-radius:var(--r-pill); font-size:.83rem;font-weight:600;color:var(--white-80); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); } .hero__tag b{ display:inline-flex;align-items:center;gap:6px; padding:4px 11px;border-radius:var(--r-pill); background:var(--steel);color:#fff;font-size:.74rem;font-weight:800; letter-spacing:.05em;text-transform:uppercase; } .hero h1{margin-bottom:22px} .hero h1 em{font-style:normal;color:var(--steel-soft)} .hero__lead{ font-size:clamp(1.05rem,1.5vw,1.18rem);color:var(--white-80); max-width:64ch;margin-bottom:34px; } .hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:40px} .hero__points{ display:flex;flex-wrap:wrap;gap:10px; padding-top:30px;border-top:1px solid var(--white-12); } .hero__points li{ display:inline-flex;align-items:center;gap:9px; padding:9px 17px 9px 13px; background:var(--white-08);border:1px solid var(--white-12);border-radius:var(--r-pill); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); font-size:.88rem;font-weight:600;color:#fff; } .hero__points svg{width:17px;height:17px;color:var(--steel-soft);flex:none} @media (max-width:560px){ /* Les quatre pastilles disparaissent : le bandeau d'engagements, juste en dessous, dit exactement la meme chose et prend deja toute la largeur. */ .hero__points{display:none} .hero__cta .btn{width:100%} /* la pastille du nom double le logo affiche juste au-dessus, et c'est elle qui faisait passer l'etiquette sur deux lignes : on ne garde que le metier */ .hero__tag b{display:none} .hero__tag{padding:8px 16px;font-size:.8rem} } /* ========================================================= 6. BANDEAU DE CONFIANCE ========================================================= */ /* Carte posee a cheval sur le bas du hero. Le creux du hero a ete agrandi d'autant : rien ne passe dessous. */ /* fond identique a la section suivante : transparent, la moitie basse de la carte se detachait sur une bande blanche */ .trust{background:var(--mist);padding:0;position:relative;z-index:5} /* Carte a cheval sur la limite, sans mesurer sa hauteur : la section ne prend aucune hauteur, donc la section suivante commence pile au bas du hero, et la carte est remontee de sa propre moitie par une translation. Une translation ne change pas le flux : la moitie basse se pose sur le creux de la section suivante, qui est vide (padding-top d'au moins 68px). */ @media (min-width:901px){ .trust{height:0;background:transparent} .trust__grid{transform:translateY(-50%)} } .trust__grid{ display:grid;grid-template-columns:repeat(4,1fr); /* Verre noir, meme recette que le mega-menu : un voile a .96 et non a .55 comme la barre de navigation, parce que la carte est a cheval sur deux fonds — la photo du hero en haut, la section claire en bas. En dessous de .90 la moitie basse vire au gris et la carte se lit coupee en deux. */ background:rgba(16,18,21,.96); border:1px solid var(--white-12);border-radius:var(--r-lg); -webkit-backdrop-filter:saturate(150%) blur(18px);backdrop-filter:saturate(150%) blur(18px); box-shadow:var(--shadow-lg); color:#fff; } .trust__it{ position:relative; display:flex;align-items:center;gap:16px; padding:26px clamp(18px,2.2vw,28px); } /* separateur court, centre : un filet pleine hauteur decouperait la carte en quatre boites au lieu de la laisser lire comme un seul bloc */ .trust__it + .trust__it::before{ content:"";position:absolute;left:0;top:50%;transform:translateY(-50%); width:1px;height:56%;background:var(--white-12); } .trust__it i{ display:grid;place-items:center;width:48px;height:48px;flex:none; border-radius:16px; background:var(--white-08);border:1px solid var(--white-12);color:var(--steel-soft); transition:background .25s,color .25s,border-color .25s; } .trust__it:hover i{background:#fff;border-color:#fff;color:var(--ink)} .trust__it svg{width:22px;height:22px} .trust__it b{ display:block;font-size:.85rem;font-weight:800; letter-spacing:.03em;text-transform:uppercase; } .trust__it span{display:block;margin-top:3px;font-size:.85rem;color:var(--white-60);line-height:1.45} @media (max-width:900px){ /* La section remonte sur le hero : son fond gris, opaque, recouvrait la photo sur toute la largeur et donnait l'illusion que la carte ne debordait pas. On le retire de la section et on le repose en calque, decale d'autant, pour qu'il ne commence qu'au bas du hero. */ .trust{margin-top:-46px;background:transparent} .trust::before{ content:"";position:absolute;z-index:-1; left:0;right:0;top:46px;bottom:0;background:var(--mist); } .trust__grid{grid-template-columns:1fr 1fr} /* en deux colonnes, le filet vertical n'a plus de sens sur la 3e case */ .trust__it:nth-child(odd)::before{display:none} .trust__it:nth-child(n+3)::after{ content:"";position:absolute;left:clamp(18px,2.2vw,28px);right:clamp(18px,2.2vw,28px); top:0;height:1px;background:var(--white-12); } } @media (max-width:520px){ /* la carte mord franchement sur le hero : empilee, elle est trop haute pour etre centree, mais un simple bord arrondi qui depasse ne se lit pas. Le creux du hero est augmente d'autant pour que les pastilles restent au clair */ .hero{padding-bottom:130px} /* les pastilles ne sont plus la pour occuper le bas */ .trust{margin-top:-110px} .trust::before{top:110px} .trust__grid{grid-template-columns:1fr} .trust__it::before{display:none} .trust__it + .trust__it::after{ content:"";position:absolute;left:20px;right:20px;top:0;height:1px;background:var(--white-12); } } /* ========================================================= 7. SERVICES ========================================================= */ /* Les cartes de l'arc debordent volontairement la grille ; sans clip, les plus eloignees (opacite 0, mais toujours dans le flux) ajoutent une barre de defilement horizontale. overflow:hidden sert de repli aux navigateurs sans overflow-x:clip ; il coupe au bord de la section, loin des cartes. */ .services{background:var(--mist);overflow:hidden;overflow-x:clip} .services .head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;max-width:none} .services .head > div{max-width:60ch} /* lien vers la page hub, sous le chapo : le carrousel ne montre qu'une carte sur trois, la liste complete est ailleurs */ .services .head .arrow{margin-top:20px} @media (max-width:820px){ .services .head{display:block} .services .head .btn{margin-top:24px} } /* fleches de defilement, dans la tete de section */ .head__tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .rail-nav{display:flex;gap:8px} .rail-btn{ display:grid;place-items:center;width:46px;height:46px;flex:none; border-radius:50%;background:var(--paper);border:1px solid var(--line);color:var(--ink); box-shadow:var(--shadow-s);cursor:pointer; transition:background .25s,border-color .25s,color .25s,transform .25s var(--ease); } .rail-btn svg{width:19px;height:19px} .rail-btn:hover{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-2px)} /* Carrousel 3D : les cartes sont posees sur un arc de cercle. La carte centrale est droite et pleine taille, les laterales s'inclinent, reculent et retrecissent. Les positions sont calculees en JS (js/main.js 11) ; ici on ne pose que la scene. */ .svc-rail{ --cw:clamp(258px,25vw,372px); --ch:calc(var(--cw) * 1.4); /* hauteur de carte, partagee avec .svc */ position:relative; height:calc(var(--ch) + 24px); perspective:1500px; perspective-origin:50% 42%; transform-style:preserve-3d; cursor:grab;touch-action:pan-y; } /* glissement : pendant le geste les cartes suivent le curseur sans transition, sinon elles trainent d'un demi-tour */ .svc-rail.is-dragging{cursor:grabbing} .svc-rail.is-dragging .svc{transition:none;cursor:grabbing} .svc-rail img{-webkit-user-drag:none;user-select:none} .svc{ position:absolute;top:0;left:50%; width:var(--cw);height:var(--ch);margin-left:calc(var(--cw) * -0.5); border-radius:var(--r-lg);overflow:hidden;background:var(--ink);isolation:isolate; box-shadow:var(--shadow); transition:transform .75s var(--ease),opacity .55s ease,box-shadow .5s ease; will-change:transform,opacity; } .svc[data-off="0"]{box-shadow:var(--shadow-lg)} .svc:not([data-off="0"]){cursor:pointer} /* seule la carte centrale mene a la page de service ; les autres se recentrent. Le garde [data-off] est necessaire : en pile mobile, JS retire l'attribut et sans lui la regle neutraliserait tous les liens. */ .svc[data-off]:not([data-off="0"]) .svc__link{pointer-events:none} .svc__media{position:absolute;inset:0;z-index:0} .svc__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)} .svc[data-off="0"]:hover .svc__media img{transform:scale(1.06)} .svc__media::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(16,18,21,.42) 0%,rgba(16,18,21,0) 22%, rgba(16,18,21,.12) 46%,rgba(16,18,21,.82) 78%,rgba(16,18,21,.96) 100%); } .svc__num,.svc__ico{ position:absolute;top:15px;z-index:2;color:#fff; background:var(--white-12);border:1px solid var(--white-12); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); } .svc__num{ left:15px;padding:6px 13px;border-radius:var(--r-pill); font-size:.78rem;font-weight:800;letter-spacing:.12em; } .svc__ico{ right:15px;display:grid;place-items:center;width:44px;height:44px;border-radius:14px; transition:background .35s,border-color .35s,color .35s; } .svc__ico svg{width:22px;height:22px} .svc[data-off="0"] .svc__ico{background:#fff;border-color:#fff;color:var(--ink)} .svc__body{ position:absolute;inset:auto 0 0 0;z-index:2; display:flex;flex-direction:column;gap:9px; padding:22px 22px 20px;color:#fff; } .svc__body h3{ font-size:clamp(1.34rem,1.95vw,1.6rem);line-height:1.22; } /* la description ne s'affiche que sur la carte au centre */ .svc__body p{ margin:0;font-size:.92rem;line-height:1.55;color:var(--white-80); max-height:0;opacity:0;overflow:hidden; transition:max-height .5s var(--ease),opacity .35s ease; } .svc[data-off="0"] .svc__body p{max-height:11em;opacity:1} .svc__link{ display:flex;align-items:center;justify-content:space-between;gap:12px; margin-top:6px;padding-top:14px;border-top:1px solid var(--white-12); font-size:.76rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#fff; } .svc__link i{ display:grid;place-items:center;width:34px;height:34px;flex:none; border-radius:50%;background:var(--white-12);border:1px solid var(--white-12);color:#fff; transition:background .3s,border-color .3s,color .3s,transform .3s var(--ease); } /* Toute la carte mene a la page, sans lien supplementaire ni JavaScript : un pseudo-element etire depuis .svc__link couvre la carte entiere. Son bloc conteneur est .svc__body, pose en absolu au bas de la carte ; un `top` largement negatif le fait remonter sur la photo, et overflow:hidden de .svc le recoupe au bord. Valeur ecrite en clair et non calc(var(--ch) * -1) : cette forme a deja ete refusee par le navigateur du client, et la declaration tombe alors entierement. Il porte z-index:3 pour passer devant le numero et l'icone, qui sont a 2. Rien a desarmer sur les cartes laterales : elles portent deja pointer-events:none sur .svc__link, ce qui vaut aussi pour son pseudo — un clic sur l'une d'elles la recentre, il ne navigue pas. Et un glissement ne declenche pas la navigation : le script annule le clic au-dela de six pixels parcourus (main.js, section 11). */ .svc__link::after{ content:"";position:absolute;left:0;right:0;bottom:0;top:-2000px;z-index:3; } .svc__link svg{width:15px;height:15px} .svc[data-off="0"]:hover .svc__link i{background:#fff;border-color:#fff;color:var(--ink);transform:translateX(3px)} /* ---------- Marques et fournisseurs ---------- */ /* Meme mecanique que les avis : la piste contient deux fois la meme suite et l'animation la translate d'une moitie, la boucle se referme sans saut. */ /* Le fondu des bords doit valoir la couleur de la section qui porte le bloc, sinon il y depose une trainee. Il vient donc d'une variable : gris par defaut, comme la section services de l'accueil, blanc dans le bloc prestations des pages de service. La version transparente est declaree a part plutot que d'ecrire « transparent », qui vaut noir transparent et grisait le fondu sur les moteurs qui n'interpolent pas en alpha premultiplie. */ .partners{ --partners-fond:var(--mist); --partners-fond-0:rgba(244,245,246,0); margin-top:clamp(46px,5.5vw,78px);padding-top:clamp(28px,3.4vw,44px); border-top:1px solid var(--line); } .sv-list .partners{ --partners-fond:var(--paper); --partners-fond-0:rgba(255,255,255,0); } .partners__intro{ margin:0 0 clamp(20px,2.4vw,30px);text-align:center; font-size:.95rem;color:var(--ink-60); } .partners__rail{position:relative;overflow:hidden} /* fondus sur les bords : les logos entrent et sortent au lieu d'etre coupes */ .partners__rail::before,.partners__rail::after{ content:"";position:absolute;top:0;bottom:0;z-index:2;pointer-events:none; width:clamp(46px,10%,120px); } .partners__rail::before{left:0;background:linear-gradient(90deg,var(--partners-fond) 40%,var(--partners-fond-0))} .partners__rail::after{right:0;background:linear-gradient(270deg,var(--partners-fond) 40%,var(--partners-fond-0))} .partners__track{display:flex;width:max-content;animation:defile 42s linear infinite} .partners__group{ display:flex;align-items:center;flex:none; gap:clamp(38px,5vw,72px);padding-right:clamp(38px,5vw,72px); } /* les logos gardent leurs couleurs de marque : ce sont des logos tiers, on ne les repeint pas. Ajouter filter:grayscale(1) ici suffirait a les uniformiser. */ .partners__group img{height:38px;width:auto;flex:none} .partners__group img.is-square{height:60px} @media (max-width:560px){ .partners__group img{height:32px} .partners__group img.is-square{height:50px} } /* mobile et petites tablettes : plus de 3D, les cartes s'empilent */ @media (max-width:900px){ .svc-rail{ display:grid;grid-template-columns:1fr;gap:18px; position:static;height:auto;perspective:none;transform-style:flat;cursor:auto; } .svc{ position:static;width:auto;height:auto;margin-left:0; aspect-ratio:7/6.5;transform:none;opacity:1;cursor:auto; } .svc .svc__body p{max-height:none;opacity:1} .svc .svc__ico{background:#fff;border-color:#fff;color:var(--ink)} .rail-nav{display:none} } @media (min-width:901px) and (max-width:1100px){ .svc__body p{font-size:.88rem} } /* ========================================================= 8. À PROPOS ========================================================= */ .about__in{ display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:clamp(40px,5.5vw,84px);align-items:center; } @media (max-width:960px){ .about__in{grid-template-columns:1fr;gap:44px} } .about__media{position:relative} .about__media img{ width:100%;aspect-ratio:4/3.4;object-fit:cover;border-radius:var(--r-lg); box-shadow:var(--shadow); } .about__badge{ position:absolute;right:-14px;bottom:-22px; display:flex;align-items:center;gap:14px; padding:18px 24px; /* Verre noir, comme le bandeau d'engagements : la pastille deborde elle aussi sur deux fonds, la photo au-dessus et la section blanche en dessous. Meme voile a .96, sous lequel la moitie basse virerait au gris. */ background:rgba(16,18,21,.96);color:#fff;border-radius:var(--r-lg); border:1px solid var(--white-12); -webkit-backdrop-filter:saturate(150%) blur(18px);backdrop-filter:saturate(150%) blur(18px); box-shadow:var(--shadow-lg); } .about__badge b{display:block;font-size:2rem;font-weight:800;line-height:1;letter-spacing:-.04em} .about__badge span{display:block;font-size:.82rem;font-weight:600;line-height:1.25;opacity:.9} .about__badge svg{width:34px;height:34px;flex:none;color:var(--steel-soft);opacity:1} @media (max-width:560px){ .about__badge{right:12px;bottom:-18px;padding:14px 18px} } .about__list{display:grid;gap:18px;margin:30px 0 34px} .about__list li{display:flex;gap:14px;align-items:flex-start} .about__list i{ display:grid;place-items:center;width:34px;height:34px;flex:none;margin-top:2px; border-radius:10px;background:var(--steel-wash);color:var(--steel); } .about__list svg{width:18px;height:18px} .about__list b{display:block;font-weight:700;letter-spacing:-.015em;margin-bottom:2px} .about__list span{display:block;font-size:.93rem;color:var(--ink-60);line-height:1.55} .about__cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px} .about__tel{display:flex;align-items:center;gap:12px} .about__tel i{ display:grid;place-items:center;width:46px;height:46px;flex:none; border-radius:50%;background:var(--ink);color:#fff; } .about__tel svg{width:20px;height:20px} .about__tel span{display:block;font-size:.74rem;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--ink-60)} .about__tel b{display:block;font-size:1.1rem;font-weight:800;letter-spacing:-.02em} /* Version mobile de ce bloc. Elle est posee ici, juste sous les regles qu'elle surcharge : plus haut dans la feuille, la pastille noire de .about__tel i la reecrasait a poids egal (piege d'ordre de cascade). */ @media (max-width:620px){ /* Pose nu sous un bouton pleine largeur, le bloc telephone flottait a la suite comme une legende. Il prend la meme largeur et la meme forme que le bouton : les deux actions se lisent comme une paire, et la carte entiere devient la cible d'appel au lieu du seul numero. */ .about__tel{ width:100%;gap:13px;padding:8px 18px 8px 8px; background:var(--paper);border:1px solid var(--line); border-radius:var(--r-pill);box-shadow:var(--shadow-s); transition:border-color .25s,box-shadow .25s,transform .25s var(--ease); } /* Chevron trace au trait plutot qu'en SVG : le composant existe en trois copies dans le HTML, une marque de plus y serait a repercuter partout. margin-left:auto le colle au bord droit quelle que soit la longueur du numero, et la carte se lit alors comme une ligne cliquable. */ .about__tel::after{ content:"";flex:none;margin-left:auto;width:8px;height:8px; border-right:2px solid var(--ink-40);border-bottom:2px solid var(--ink-40); border-radius:1px;transform:rotate(-45deg); transition:transform .25s var(--ease),border-color .25s; } .about__tel:hover::after, .about__tel:active::after{ border-color:var(--steel);transform:translateX(3px) rotate(-45deg); } .about__tel:active{transform:scale(.99)} .about__tel:hover{border-color:var(--steel);box-shadow:var(--shadow)} /* La section « A propos » de l'accueil est blanche : une carte blanche n'y tiendrait que par son liseré. Elle y prend le gris de la charte. */ .about .about__tel{background:var(--mist);border-color:var(--mist-2)} .about__tel i{width:42px;height:42px} /* Intitule et numero sur une seule ligne : empiles, ils faisaient de la carte un pave de deux lignes pour trois mots. Alignes sur la ligne de base, ils se lisent d'un trait et la pilule s'aplatit. Le corps suit la largeur, la ligne complete devant tenir des 320 px. */ .about__tel > div{display:flex;align-items:baseline;gap:9px;min-width:0} /* L'intitule etait reduit a un filet de lettres capitales : il remonte d'un tiers et perd un peu de sa chasse, le numero cede la difference. Les deux corps suivent la largeur, la ligne complete devant tenir des 320 px. */ .about__tel span{font-size:clamp(.7rem,2.7vw,.8rem);letter-spacing:.04em;white-space:nowrap} .about__tel b{font-size:clamp(.92rem,3.9vw,1.05rem);white-space:nowrap} } /* ---------- Nos clients ---------- */ /* Un bandeau plein plutot que quatre cartes : sur la section blanche, des cartes claires s'effacaient. Les filets de separation ne sont pas des bordures mais la gouttiere de la grille : le fond du bandeau transparait entre les cellules. Un seul reglage vaut alors pour les deux dispositions — quatre colonnes, ou deux colonnes et le filet horizontal apparait tout seul entre les deux rangees. --sep est solide et non transparent : une couleur translucide se confondrait avec le fond de la cellule. Le bandeau porte le gris clair --mist des sections alternees : pose sur le blanc de la section, il se lit comme un panneau sans avoir besoin d'un contour ni d'une ombre. */ .clients{margin-top:clamp(52px,6vw,80px)} /* L'oeil-de-boeuf est inline-flex pour garder son filet colle au texte : le centrer demande donc un flex sur le paragraphe, pas un text-align. */ .clients__eyebrow{display:flex;justify-content:center;margin-bottom:18px} .clients__grid{ --sep:var(--line); display:grid;grid-template-columns:repeat(4,1fr);gap:1px; background:var(--sep);border-radius:var(--r-lg);overflow:hidden; } .clients__it{ position:relative; display:flex;flex-direction:column;align-items:center; padding:clamp(28px,3.2vw,40px) clamp(16px,1.8vw,24px);text-align:center; background-color:var(--mist); transition:background-color .3s; } .clients__it > div{min-width:0} .clients__it:hover{background-color:var(--mist-2)} /* Pastille claire et non l'aplat en degrade des cartes « Pourquoi nous » : quatre aplats sombres alignes prendraient le pas sur le titre de section juste au-dessus. --steel sur --steel-wash tient 5,4:1. */ .clients__it i{ display:grid;place-items:center;width:46px;height:46px;margin-bottom:16px; border-radius:15px; background:var(--steel-wash);color:var(--steel); transition:background .25s,color .25s; } .clients__it:hover i{background:var(--steel);color:#fff} .clients__it svg{width:23px;height:23px} .clients__it b{ display:block;font-size:.84rem;font-weight:800; letter-spacing:.09em;text-transform:uppercase;color:var(--ink); } .clients__it span{ display:block;margin-top:9px;max-width:24ch; font-size:.88rem;line-height:1.5;color:var(--ink-60); } @media (max-width:900px){ .clients__grid{grid-template-columns:1fr 1fr} } /* Sur telephone, une carte sous l'autre : a deux colonnes, « Copropriétés » et « Syndics & agences » tenaient a peine dans leur demi-largeur en capitales, et les quatre textes ne tombaient plus a la meme hauteur. La cellule bascule alors en ligne — icone a gauche, texte a droite, aligne a gauche comme la liste a puces juste au-dessus. Empilee et centree, elle aurait donne un bandeau de six cents pixels de haut pour quatre mots. */ @media (max-width:700px){ .clients{margin-top:72px} .clients__eyebrow{margin-bottom:22px} .clients__grid{grid-template-columns:1fr} .clients__it{ flex-direction:row;align-items:center;gap:15px; padding:18px clamp(16px,4.5vw,22px);text-align:left; } .clients__it i{width:42px;height:42px;margin-bottom:0;flex:none;border-radius:13px} .clients__it svg{width:21px;height:21px} .clients__it b{letter-spacing:.07em} .clients__it span{max-width:none;margin-top:5px;font-size:.87rem} } /* ========================================================= 9. POURQUOI NOUS ========================================================= */ .why{background:var(--ink);color:#fff;position:relative;overflow:hidden} /* Deux halos, pas un : celui du haut a droite eclaire le titre, celui du bas a gauche empeche le pied de section de tomber dans un noir plat. */ .why::before{ content:"";position:absolute;top:-30%;right:-10%;width:620px;height:620px; background:radial-gradient(circle,rgba(255,255,255,.10) 0%,transparent 68%); pointer-events:none; } .why::after{ content:"";position:absolute;bottom:-38%;left:-14%;width:680px;height:680px; background:radial-gradient(circle,rgba(168,173,177,.13) 0%,transparent 66%); pointer-events:none; } .why .head{position:relative} .why h2{color:#fff;text-wrap:balance} .why__grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.8vw,22px)} @media (max-width:1000px){ .why__grid{grid-template-columns:1fr 1fr} } @media (max-width:540px){ .why__grid{grid-template-columns:1fr} } .why__it{ position:relative;overflow:hidden; padding:32px 26px 38px; border:1px solid var(--white-08);border-radius:var(--r-lg); /* La couleur de fond est portee par background-color et l'eclairage par un degrade transparent pose dessus : une image de fond ne se transitionne pas, une couleur si. Le survol peut donc s'animer. */ background-color:var(--ink-2); background-image: radial-gradient(120% 90% at 8% -10%,rgba(255,255,255,.075) 0%,transparent 58%), linear-gradient(168deg,rgba(255,255,255,.045) 0%,transparent 42%); box-shadow:0 18px 40px -30px rgba(0,0,0,.9); transition:transform .3s var(--ease),border-color .3s,background-color .3s,box-shadow .3s; } /* Filet clair sur l'arete haute : donne du relief a la carte sans l'alourdir d'une bordure plus visible sur les quatre cotes. */ .why__it::before{ content:"";position:absolute;inset:0 0 auto;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.32) 50%,transparent); } /* Le numero repond au « quatre points » annonce juste au-dessus et donne a chaque carte un reperage propre. Purement decoratif, donc en pseudo-element et hors du flux de lecture. */ .why__it::after{ content:attr(data-num); position:absolute;right:14px;top:-34px; font-size:clamp(122px,9.8vw,168px);font-weight:800;line-height:1;letter-spacing:-.065em; color:rgba(255,255,255,.055);pointer-events:none; transition:color .3s,transform .35s var(--ease); } .why__it:hover{ transform:translateY(-6px); border-color:rgba(255,255,255,.26);background-color:#262A2E; box-shadow:0 30px 60px -34px rgba(0,0,0,.95); } .why__it:hover::after{color:rgba(255,255,255,.10);transform:translateY(6px)} .why__it i{ position:relative;display:grid;place-items:center;width:58px;height:58px;margin-bottom:24px; border-radius:17px;color:#fff; background:linear-gradient(152deg,var(--steel-soft) 6%,var(--steel) 58%,var(--steel-dark) 100%); box-shadow:var(--shadow-steel),inset 0 1px 0 rgba(255,255,255,.42),0 0 0 1px rgba(255,255,255,.09); transition:transform .35s var(--ease),box-shadow .35s; } .why__it:hover i{transform:scale(1.07);box-shadow:var(--shadow-steel),inset 0 1px 0 rgba(255,255,255,.44),0 0 0 1px rgba(255,255,255,.14)} .why__it svg{width:27px;height:27px} /* Deux lignes reservees au titre : sans cela, « Une equipe, pas un intermediaire » repousse son paragraphe d'une ligne et les quatre textes ne demarrent plus a la meme hauteur. Uniquement quand les cartes sont cote a cote — empilees, la reserve ne ferait qu'un trou. */ .why__it h3{margin-bottom:9px;position:relative;text-wrap:balance} @media (min-width:1001px){ .why__it h3{min-height:2.5em} /* Cote a cote, les cartes sont bien plus etroites qu'empilees : le chiffre y prend trop de place au corps prevu pour la pile. Le debord remonte avec lui, pour garder la meme proportion rognee en haut. */ .why__it::after{font-size:clamp(100px,7.9vw,128px);top:-26px} } .why__it p{font-size:.92rem;color:var(--white-60);line-height:1.6;margin:0;position:relative} /* ========================================================= 10. RÉALISATIONS ========================================================= */ .works .head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;max-width:none} .works .head > div{max-width:60ch} /* Empile, le bouton passe sous le chapeau : la gouttiere de la rangee flex ne s'applique plus et il venait se coller au texte. */ @media (max-width:820px){ .works .head{display:block} .works .head .btn{margin-top:26px} } /* Quatre chantiers, en damier : une grande vignette et une etroite par rangee, la seconde rangee inversee. La hauteur de rangee vient du rapport 16/11 de la grande vignette ; l'etroite s'y aligne et recadre. */ .gal{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(12px,1.4vw,18px); } .gal a{ position:relative;display:block;overflow:hidden;grid-column:span 2; border-radius:var(--r);background:var(--mist-2); } .gal .wide{grid-column:span 4} .gal img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/11;transition:transform .7s var(--ease)} .gal a:hover img{transform:scale(1.06)} /* la legende reste affichee : elle nomme le chantier, ce n'est pas un simple effet de survol */ .gal a::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,transparent 28%,rgba(16,18,21,.5) 62%,rgba(16,18,21,.94) 100%); transition:background .3s; } .gal a:hover::after{ background:linear-gradient(180deg,rgba(16,18,21,.1) 20%,rgba(16,18,21,.62) 60%,rgba(16,18,21,.97) 100%); } .gal__cap{ position:absolute;left:22px;right:22px;bottom:20px;z-index:2; display:flex;align-items:flex-end;justify-content:space-between;gap:12px; color:#fff; } .gal__cap b{ display:block;font-size:1rem;font-weight:800;line-height:1.25; text-transform:uppercase;letter-spacing:.02em; } .gal__cap small{ display:block;margin-top:7px;font-size:.83rem;font-weight:500; color:var(--white-60);line-height:1.45; } .gal__tag{ flex:none;align-self:flex-end; padding:6px 11px;border-radius:var(--r-pill); background:var(--steel);color:#fff;font-style:normal; font-size:.63rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase; } /* vignettes d'une seule colonne : l'etiquette passe sous le texte, sinon elle comprime le titre sur trois lignes */ .gal a:not(.wide) .gal__cap{display:block} .gal a:not(.wide) .gal__tag{display:inline-block;margin-top:10px} @media (max-width:900px){ .gal .gal__cap{display:block} .gal .gal__tag{display:inline-block;margin-top:10px} } @media (max-width:900px){ .gal{grid-template-columns:1fr 1fr} .gal a,.gal .wide{grid-column:span 1} .gal img{aspect-ratio:4/3} } @media (max-width:520px){ .gal{grid-template-columns:1fr} .gal img{aspect-ratio:16/11} } /* ---------- Visionneuse ---------- */ .lightbox{ position:fixed;inset:0;z-index:200; display:grid;place-items:center; padding:clamp(16px,4vw,48px); background:rgba(12,13,15,.94); opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s; } .lightbox.is-open{opacity:1;visibility:visible} .lightbox img{ max-width:100%;max-height:82vh;object-fit:contain; border-radius:var(--r);box-shadow:var(--shadow-lg); } .lightbox__close,.lightbox__nav{ position:absolute;display:grid;place-items:center; width:50px;height:50px; background:var(--white-12);color:#fff;border:1px solid var(--white-12); border-radius:50%;cursor:pointer;transition:background .2s; } .lightbox__close:hover,.lightbox__nav:hover{background:rgba(255,255,255,.25)} .lightbox__close{top:18px;right:18px} .lightbox__nav{top:50%;margin-top:-25px} .lightbox__nav svg,.lightbox__close svg{width:22px;height:22px} .lightbox__nav[data-dir="-1"]{left:18px} .lightbox__nav[data-dir="1"]{right:18px} .lightbox__count{ position:absolute;bottom:24px;left:50%;transform:translateX(-50%); font-size:.87rem;font-weight:600;color:var(--white-60); } /* ========================================================= 11. ÉTAPES ========================================================= */ .steps{background:var(--ink);color:#fff;position:relative;overflow:hidden} /* Memes deux halos que la section « Pourquoi nous » : sans eux le noir est plat sur toute la hauteur de la chronologie. */ .steps::before{ content:"";position:absolute;top:-34%;right:-12%;width:620px;height:620px; background:radial-gradient(circle,rgba(255,255,255,.10) 0%,transparent 68%); pointer-events:none; } .steps::after{ content:"";position:absolute;bottom:-40%;left:-14%;width:680px;height:680px; background:radial-gradient(circle,rgba(168,173,177,.13) 0%,transparent 66%); pointer-events:none; } /* les halos sont positionnes, le contenu doit l'etre aussi pour passer devant */ .steps .shell{position:relative} .steps h2{color:#fff;text-wrap:balance} .steps__grid{ --st-gap:clamp(20px,3vw,40px); position:relative; display:grid;grid-template-columns:repeat(4,1fr);gap:var(--st-gap); } /* Chronologie : chaque etape porte son propre segment de rail. ::before le trace en pointille, ::after le repeint en plein a hauteur de --sp (0 -> 1), pose par main.js (SS13) au fil du defilement. Un segment par etape plutot qu'un rail unique : il se dimensionne tout seul, et la derniere etape n'en a pas, donc le trait s'arrete a la quatrieme pastille. Repli sans JS et en mouvement reduit : --sp vaut 1, le rail est plein. */ .steps__it{--sp:1;position:relative;text-align:center} .steps__it::before, .steps__it::after{content:"";position:absolute;border-radius:2px} .steps__it::after{background:rgba(255,255,255,.72)} .steps__it:last-child::before, .steps__it:last-child::after{display:none} .steps__num{ position:relative;z-index:1; display:grid;place-items:center;width:62px;height:62px;margin:0 auto 22px; border-radius:50%;background:var(--ink-2);border:2px solid var(--white-12); color:rgba(255,255,255,.40);font-size:1.15rem;font-weight:800;letter-spacing:-.02em; /* l'anneau couleur section masque le rail derriere la pastille */ box-shadow:0 0 0 8px var(--ink); transition:background-color .45s var(--ease),border-color .45s var(--ease), color .45s var(--ease),box-shadow .45s var(--ease), transform .45s var(--ease); } /* is-reached est pose par le JS des que le segment qui mene a l'etape est parcouru : la pastille passe du contour gris a l'aplat nardo des boutons. */ /* Allumee : aplat blanc, chiffre en noir, et deux couches de halo — un anneau proche et une diffusion large — pour que la pastille paraisse eclairee et non simplement remplie. */ .steps__it.is-reached .steps__num{ background:#fff;border-color:#fff;color:var(--ink); box-shadow:0 0 0 8px var(--ink),0 0 0 14px rgba(255,255,255,.14), 0 0 26px 2px rgba(255,255,255,.42),0 0 56px 8px rgba(255,255,255,.16); } .steps__it:hover .steps__num{transform:scale(1.07)} .steps__it h3{margin-bottom:10px} .steps__it h3{color:#fff} .steps__it p{font-size:.94rem;color:var(--white-60);max-width:38ch;margin-inline:auto} /* Rail horizontal, au-dela de 980 px : quatre colonnes demandent plus de large que trois, la bascule a la verticale monte donc d'autant. Rail horizontal. Le segment va d'un bord de pastille a l'autre, gouttiere comprise : d'ou les 50 % et --st-gap dans le calc. Les trois valeurs (rayon 31, jeu de 12, --st-gap) vont ensemble — changer la gouttiere sans toucher au calc decale le trait. */ @media (min-width:981px){ .steps__it::before, .steps__it::after{ top:30px;height:2px; left:calc(50% + 43px); right:calc(43px - 50% - var(--st-gap)); } .steps__it::before{background:repeating-linear-gradient(90deg,rgba(255,255,255,.20) 0 8px,transparent 8px 16px)} .steps__it::after{transform:scaleX(var(--sp));transform-origin:left center} } /* Meme chronologie a la verticale : la pastille passe a gauche du texte, le rail relie une pastille a la suivante. */ @media (max-width:980px){ .steps__grid{grid-template-columns:1fr;gap:0} .steps__it{text-align:left;padding:0 0 34px 56px} .steps__it:last-child{padding-bottom:0} /* 36 px et non les 62 du bureau : a la verticale la pastille est posee a cote du texte et non au-dessus, elle se compare a la hauteur d'une ligne de titre et paraissait deux fois trop grosse. Trois valeurs suivent le diametre et doivent bouger avec lui : le retrait du texte (36 + 20 px d'ecart), le depart du rail (36 + les 8 px de l'anneau qui le masque) et son centrage horizontal (36 / 2, moins la moitie de ses 2 px). */ .steps__num{position:absolute;top:0;left:0;margin:0;width:36px;height:36px;font-size:.8rem} .steps__it p{max-width:none;margin-inline:0} .steps__it::before, .steps__it::after{top:44px;left:17px;bottom:-4px;width:2px} .steps__it::before{background:repeating-linear-gradient(180deg,rgba(255,255,255,.20) 0 8px,transparent 8px 16px)} .steps__it::after{transform:scaleY(var(--sp));transform-origin:center top} } /* ========================================================= 12. AVIS ========================================================= */ .reviews__top{ display:flex;align-items:flex-end;justify-content:space-between;gap:30px; margin-bottom:clamp(34px,4vw,52px);flex-wrap:wrap; } .gnote{ display:flex;align-items:center;gap:16px; padding:16px 22px;background:var(--mist);border:1px solid var(--line);border-radius:var(--r); } .gnote__g{ display:grid;place-items:center;width:44px;height:44px;flex:none; background:var(--paper);border-radius:50%;box-shadow:var(--shadow-s);font-weight:800; } .gnote b{display:block;font-size:1.5rem;font-weight:800;letter-spacing:-.03em;line-height:1} .gnote span{display:block;font-size:.82rem;color:var(--ink-60)} .stars{display:inline-flex;gap:2px} .stars svg{width:16px;height:16px;fill:var(--star-on);color:var(--star-on)} .stars svg.is-half{fill:url(#demi-etoile)} .stars svg.is-off{fill:var(--star-off)} /* le degrade de la demi-etoile vit dans un SVG sans surface : hors flux */ .stars-defs{position:absolute;width:0;height:0;overflow:hidden} /* Deux rangees qui defilent en sens opposes, d'un bord a l'autre de l'ecran. Chaque rangee contient la meme suite de cartes deux fois et l'animation la translate d'exactement une moitie : la boucle se referme sans saut ni rembobinage. Changer le nombre de cartes ne demande donc aucun reglage. */ .revs{position:relative} .revs__rows{display:grid;gap:clamp(14px,1.6vw,20px);overflow:hidden} .revs__row{ display:flex;gap:clamp(14px,1.6vw,20px);width:max-content; animation:defile 78s linear infinite; } .revs__row--rev{animation-direction:reverse;animation-duration:94s} @keyframes defile{to{transform:translateX(-50%)}} /* fondus sur les bords : les cartes entrent et sortent sans etre coupees net */ .revs::before,.revs::after{ content:"";position:absolute;top:0;bottom:0;z-index:2;pointer-events:none; width:clamp(40px,8vw,150px); } .revs::before{left:0;background:linear-gradient(90deg,var(--paper),rgba(255,255,255,0))} .revs::after{right:0;background:linear-gradient(270deg,var(--paper),rgba(255,255,255,0))} .rev{ width:min(400px,82vw);flex:none; display:flex;flex-direction:column; padding:28px; background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--shadow-s); transition:transform .3s var(--ease),box-shadow .3s; } .rev:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .rev__quote{width:34px;height:34px;color:var(--steel-tint);margin-bottom:14px} .rev p{font-size:.97rem;line-height:1.7;color:var(--ink-80);margin-bottom:22px} .rev__who{display:flex;align-items:center;gap:13px;margin-top:auto;padding-top:20px;border-top:1px solid var(--line)} .rev__av{position:relative;flex:none;display:block} .rev__ini{ display:grid;place-items:center;width:44px;height:44px; border-radius:50%;background:var(--ink);color:#fff;font-weight:800;font-size:.95rem; } /* pastille Google, posee a cheval sur l'avatar */ .rev__g{ position:absolute;left:-4px;bottom:-3px; display:grid;place-items:center;width:22px;height:22px; border-radius:50%;background:var(--paper);border:1.5px solid var(--paper); box-shadow:0 2px 6px rgba(16,18,21,.26); } .rev__g svg{width:13px;height:13px} /* min-width:0 : sans lui, la colonne du nom refuse de retrecir et ce sont les etoiles qui se font ecraser. La commune tient sur une ligne, tronquee plutot que repliee si un nom de ville est trop long. */ .rev__who > div{min-width:0} .rev__who b{display:block;font-size:.95rem;font-weight:700;letter-spacing:-.015em} .rev__who div span{ display:block;font-size:.8rem;color:var(--ink-60); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .rev__who .stars{margin-left:auto} /* ========================================================= 13. ZONE D'INTERVENTION ========================================================= */ .zone{background:var(--mist)} .zone__in{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:clamp(36px,5vw,72px);align-items:center; } @media (max-width:900px){ .zone__in{grid-template-columns:1fr;gap:38px} } .zone__map{ position:relative; border-radius:var(--r-lg);overflow:hidden; border:1px solid var(--line);box-shadow:var(--shadow); background:var(--mist); } .zone__tiles{ position:relative;height:clamp(380px,40vw,560px);overflow:hidden; background:var(--mist-2);filter:grayscale(.35) contrast(1.05); } .zone__couche{position:absolute;left:50%;top:50%;transform-origin:50% 50%} .zone__tiles img{position:absolute;width:256px;height:256px;max-width:none;display:block} .zone__credit{ position:absolute;right:0;bottom:0;z-index:4;margin:0; padding:3px 9px;border-radius:var(--r-xs) 0 0 0; background:rgba(255,255,255,.86);font-size:.68rem;color:var(--ink-60); } .zone__credit a{text-decoration:underline} .zone__tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px} .zone__tags li{ display:inline-flex;align-items:center;gap:9px; padding:8px 16px; background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill); font-size:.87rem;font-weight:600;color:var(--ink-80); } .zone__tags li::before{ content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--steel); } .zone__tags li.is-main{background:var(--ink);border-color:var(--ink);color:#fff} .zone__tags li.is-main::before{background:#fff} .zone__note{ display:flex;align-items:center;gap:11px; margin:26px 0 0;padding-top:22px;border-top:1px solid var(--line); font-size:.93rem;color:var(--ink-60); } .zone__note svg{width:18px;height:18px;flex:none;color:var(--steel)} .zone__note b{color:var(--ink);font-weight:700} /* Le disque des 30 km est pose PAR-DESSUS la carte : l'iframe OpenStreetMap n'accepte aucun trace. Son rayon en pixels est calcule dans js/main.js (12) ; une valeur en pourcentage serait fausse, l'echelle d'une carte est constante en pixels par kilometre, pas en fraction du conteneur. */ .zone__ring{ position:absolute;left:50%;top:50%;z-index:2;pointer-events:none; width:calc(var(--r30,0px) * 2);height:calc(var(--r30,0px) * 2); margin:calc(var(--r30,0px) * -1) 0 0 calc(var(--r30,0px) * -1); border:2px solid var(--ink);border-radius:50%; background:rgba(16,18,21,.10); opacity:0;transition:opacity .45s var(--ease); } .zone__ring.is-ready{opacity:1} /* le rayon, trace du centre au bord, avec sa mesure posee dessus */ .zone__ring::before{ content:"";position:absolute;left:50%;top:50%;width:50%; border-top:2px dashed var(--ink);opacity:.8; } .zone__ring span{ position:absolute;left:75%;top:50%;transform:translate(-50%,-155%); padding:3px 9px;border-radius:var(--r-pill); background:var(--ink);color:#fff; font-size:.64rem;font-weight:800;letter-spacing:.08em; } /* Reperes de villes : un point et un nom, poses par js/main.js (12). Le halo blanc remplace un fond opaque, qui masquerait la carte. */ .zone__pts{position:absolute;inset:0;z-index:3;pointer-events:none} .zone__pt{ position:absolute;display:flex;align-items:center;gap:6px; transform:translateY(-50%);white-space:nowrap; } .zone__pt--g{transform:translate(-100%,-50%);flex-direction:row-reverse} .zone__pt i{ width:7px;height:7px;flex:none;border-radius:50%; background:var(--ink);border:1.5px solid #fff;box-shadow:0 1px 3px rgba(16,18,21,.45); } .zone__pt b{ font-size:.72rem;font-weight:700;color:var(--ink); text-shadow:0 0 3px #fff,0 0 6px #fff,0 0 10px #fff; } .zone__pt--centre i{width:11px;height:11px;background:var(--steel);border-width:2px} .zone__pt--centre b{font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase} /* ========================================================= 14. FAQ ========================================================= */ .faq__in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,5vw,72px)} .faq__aside{position:sticky;top:calc(var(--navh) + 24px);align-self:start} .faq__aside .head{margin-bottom:26px} .faq h2{text-wrap:balance} /* Encart d'appel : la relance telephonique tenait sur un bouton nu, perdu sous le chapeau. En carte noire elle devient le second point d'ancrage de la section, face a la liste des volets. Le bouton reprend le systeme --bg/--fg de .btn : blanc plein sur le noir, sans nouvelle regle de bouton. */ /* Meme fond que les cartes de la section « Pourquoi nous » (SS9) : l'aplat noir porte deux degrades transparents qui l'eclairent depuis le coin haut gauche, plus un filet clair sur l'arete haute. Sans eux le bloc est un aplat plat. */ .faq__call{ position:relative;overflow:hidden; margin-top:30px;padding:30px 28px 28px; color:#fff;border:1px solid var(--white-08);border-radius:var(--r-lg); background-color:var(--ink); background-image: radial-gradient(120% 90% at 8% -10%,rgba(255,255,255,.075) 0%,transparent 58%), linear-gradient(168deg,rgba(255,255,255,.045) 0%,transparent 42%); box-shadow:var(--shadow); } .faq__call::before{ content:"";position:absolute;inset:0 0 auto;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.32) 50%,transparent); } .faq__call h3,.faq__call p,.faq__call .btn{position:relative} .faq__call h3{color:#fff;margin-bottom:10px} .faq__call p{font-size:.94rem;color:var(--white-60);line-height:1.65;margin:0 0 22px} .faq__call .btn{--bg:var(--paper);--fg:var(--ink);width:100%;box-shadow:none} .faq__call .btn:hover{--bg:var(--mist)} /* Empile, le chapeau n'a plus rien a suivre : colle, il se decale de sa position de flux et vient toucher le premier volet. */ @media (max-width:920px){ .faq__in{grid-template-columns:1fr;gap:36px} .faq__aside{position:static} } /* La section est blanche : un volet blanc borde d'un trait clair s'y effacait. Ferme, il porte donc l'aplat gris de la charte ; ouvert, il repasse en blanc avec le liseré nardo et une ombre — le volet actif se detache de la liste au lieu de s'y fondre. */ .acc{display:grid;gap:10px} .acc__item{ background:var(--mist);border:1px solid transparent;border-radius:var(--r); overflow:hidden; transition:background-color .25s,border-color .25s,box-shadow .25s; } .acc__item:hover{background:var(--mist-2)} .acc__item.is-open{ background:var(--paper);border-color:var(--steel);box-shadow:var(--shadow-s); } .acc__q{ display:flex;align-items:center;justify-content:space-between;gap:16px; width:100%;padding:20px 22px; background:none;border:0;cursor:pointer;text-align:left; font-size:1rem;font-weight:700;letter-spacing:-.015em;color:var(--ink); } /* la pastille suit le meme renversement que le volet : claire sur fond gris, pleine sur fond blanc */ .acc__q i{ display:grid;place-items:center;width:30px;height:30px;flex:none; border-radius:50%;background:var(--paper);border:1px solid var(--line); color:var(--ink-60); transition:transform .3s var(--ease),background .25s,border-color .25s,color .25s; } .acc__item.is-open .acc__q i{ transform:rotate(45deg);background:var(--steel);border-color:var(--steel);color:#fff; } .acc__q svg{width:17px;height:17px} .acc__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)} .acc__item.is-open .acc__a{grid-template-rows:1fr} /* 0fr + overflow:hidden replie la reponse a l'oeil, mais la laisse lisible aux lecteurs d'ecran et atteignable au clavier. visibility l'en retire vraiment, avec un delai le temps que le repli s'acheve. */ .acc__a > div{overflow:hidden;visibility:hidden;transition:visibility 0s .32s} .acc__item.is-open .acc__a > div{visibility:visible;transition:visibility 0s} .acc__a p{padding:0 22px 22px;font-size:.95rem;color:var(--ink-60);line-height:1.7;margin:0} /* ========================================================= 15. CONTACT / DEVIS ========================================================= */ .contact{position:relative;background:var(--ink);color:#fff;overflow:hidden} .contact::before{ content:"";position:absolute;bottom:-25%;left:-8%;width:640px;height:640px; background:radial-gradient(circle,rgba(255,255,255,.09) 0%,transparent 68%);pointer-events:none; } .contact__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(38px,5vw,74px);align-items:start} @media (max-width:960px){ .contact__in{grid-template-columns:1fr;gap:40px} } .contact h2{color:#fff} .contact__ways{display:grid;gap:14px;margin-top:34px} .contact__way{ display:flex;align-items:center;gap:16px; padding:18px 20px; background:var(--ink-2);border:1px solid var(--white-12);border-radius:var(--r); transition:border-color .25s,background .25s,transform .25s var(--ease); } .contact__way:hover{border-color:rgba(255,255,255,.30);background:#262A2E;transform:translateX(4px)} .contact__way i{ display:grid;place-items:center;width:46px;height:46px;flex:none; border-radius:13px;background:var(--steel);color:#fff; } .contact__way svg{width:21px;height:21px} /* l’adresse de contact est longue : sans ces deux déclarations la carte déborde sous 360 px, la taille minimale automatique d’un élément de flex valant celle de son contenu. */ .contact__way>div{min-width:0} .contact__way b{overflow-wrap:break-word} .contact__way span{display:block;font-size:.78rem;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--white-60)} /* Temoin d'activite repris de la barre de contact : sur cette section, la barre du haut est deja loin au-dessus du pli. Le point vert reprend le composant existant, seule la ligne qui le porte est propre au bloc. */ .contact__live{ display:inline-flex;align-items:center;gap:10px; margin-top:20px;padding:11px 18px; border-radius:var(--r-pill); background:var(--white-08);border:1px solid var(--white-12); font-size:.84rem;font-weight:600;color:rgba(255,255,255,.74); /* la ligne doit tenir d'un seul tenant : coupee en deux, la pastille perd sa forme de puce et devient un pave */ white-space:nowrap; } /* La phrase reste entiere sur les petits ecrans : c'est la pastille qui se retrecit. Le corps suit la largeur de la fenetre (2,95vw) entre 320 et ~450 px, ou il rattrape le corps nominal et s'y arrete. Gouttiere, padding et gap sont pris en compte dans le coefficient : a 320 px, la pastille tient dans la colonne sans deborder. */ @media (max-width:560px){ .contact__live{ gap:8px;padding:9px 13px; font-size:clamp(.58rem,2.85vw,.84rem);letter-spacing:-.01em; } } /* Sous 360 px, le corps seul ne suffit plus : le rembourrage cede a son tour, sinon la pastille arrive au bord de la colonne sans aucun jeu. */ @media (max-width:360px){ .contact__live{padding:8px 11px;gap:7px} } .contact__way b{display:block;font-size:1.05rem;font-weight:800;letter-spacing:-.02em} .contact__way small{display:block;font-size:.85rem;color:var(--white-60);font-weight:500} /* ---------- Formulaire ---------- */ .form{ position:relative; padding:clamp(26px,3vw,38px); background:var(--paper);color:var(--ink);border-radius:var(--r-lg); box-shadow:var(--shadow-lg); transition:height .4s var(--ease); /* Le formulaire est un element de grille : sa taille minimale automatique vaut celle de son contenu, ce qui rendait sans effet la hauteur posee par le JS a l'envoi. La carte de confirmation restait aussi haute que le formulaire entier. */ min-height:0; } /* Une fois la demande envoyee, le formulaire n'est plus qu'un cadre pour le message de confirmation. Ses champs restent dans le flux — visibility:hidden ne libere pas la place — et l'empechaient de se refermer : on rogne. Le rognage n'arrive qu'ici, sinon il couperait la liste du selecteur. */ .form.is-sent{overflow:hidden} .form__title{font-size:1.4rem;margin-bottom:6px} .form__sub{font-size:.92rem;color:var(--ink-60);margin-bottom:26px} .form__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .form__row{display:flex;flex-direction:column;gap:7px} .form__row--full{grid-column:1/-1} .form__row label{font-size:.83rem;font-weight:700;letter-spacing:-.01em;color:var(--ink-80)} .form__row label span{color:var(--steel)} .form__row input,.form__row textarea,.form__row select{ width:100%;padding:14px 16px; /* la page est declaree sombre pour les barres de Safari : on rend leur schema aux seuls champs, sinon le remplissage automatique poserait un fond sombre sous un texte deja sombre */ color-scheme:light; background:var(--field);border:1.5px solid transparent;border-radius:var(--r-sm); font-size:.96rem; transition:border-color .2s,background .2s; } .form__row input:focus,.form__row textarea:focus{ outline:0;border-color:var(--steel);background:var(--paper); } .form__row textarea{resize:vertical;min-height:118px} .form__row input::placeholder,.form__row textarea::placeholder{color:var(--ink-40)} /* 6 px ne se voyaient pas : le bouton semblait colle au dernier champ. Il prend l'ecart d'une rangee de formulaire (16 px) et six de plus, pour se detacher du bloc de saisie sans ouvrir un trou. */ .form .btn{margin-top:22px} .form__legal{margin-top:14px;font-size:.79rem;color:var(--ink-60);line-height:1.5;text-align:center} /* piege a robots : invisible, et hors du parcours clavier */ .form__trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none} .form__err{ display:none;align-items:flex-start;gap:11px; margin-top:16px;padding:14px 16px; background:#FDECEC;border:1px solid #F5C6C6;border-radius:var(--r-sm); font-size:.88rem;color:#9B1C1C; } .form__err.is-shown{display:flex} .form__err svg{width:18px;height:18px;flex:none;margin-top:1px} /* Champ fautif. Le rouge est l’une des trois couleurs assumées hors palette ; il reprend exactement les valeurs déjà posées sur .form__err. Le message est créé par le script (§8) : le formulaire existe en deux copies, pas ses règles. */ .form__row.is-invalid input, .form__row.is-invalid textarea{border-color:#B42318;background:#FDF6F6} .form__row.is-invalid label{color:#9B1C1C} .form__msg{display:flex;align-items:flex-start;gap:6px;font-size:.79rem;line-height:1.45;color:#9B1C1C} .form__msg svg{width:14px;height:14px;flex:none;margin-top:2px} /* confirmation : prend la place du formulaire */ .form__done{ position:absolute;inset:clamp(26px,3vw,38px); display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center; opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .35s,visibility .35s,transform .35s var(--ease); } .form.is-sent > *:not(.form__done){opacity:0;visibility:hidden;pointer-events:none} .form.is-sent .form__done{opacity:1;visibility:visible;transform:none} /* Pastille. Le disque noir portait un chevron figé sur un grand aplat blanc : il gagne un anneau concentrique qui le détache du fond, et le trait se dessine à l’apparition. Rien n’est animé en hauteur, la carte étant mesurée par le script au moment de la bascule. */ .form__done i{ position:relative; display:grid;place-items:center;width:64px;height:64px;margin-bottom:22px; border-radius:50%;background:var(--ink);color:#fff; } .form__done i::before{ content:"";position:absolute;inset:-10px;border-radius:50%; border:1.5px solid var(--ink-12); } .form__done svg{width:30px;height:30px} /* longueur du tracé du chevron : 23 unités de viewBox, on arrondit à 24 */ .form__done svg path{stroke-dasharray:24;stroke-dashoffset:24} .form.is-sent .form__done svg path{animation:trace .5s .14s var(--ease) forwards} .form.is-sent .form__done i::before{animation:halo .7s var(--ease) both} @keyframes trace{to{stroke-dashoffset:0}} @keyframes halo{from{transform:scale(.72);opacity:0} to{transform:scale(1);opacity:1}} .form__done h3{margin-bottom:10px;font-size:clamp(1.3rem,2.4vw,1.55rem);letter-spacing:-.02em} .form__done p{font-size:.95rem;color:var(--ink-60);max-width:42ch;line-height:1.6} .form__done p strong{color:var(--ink);font-weight:700} /* Ce qui suit l’envoi. Trois repères courts, séparés du message par un filet : ils occupent le vide de la carte en disant quelque chose d’utile. */ .done__suite{ width:100%;max-width:330px;margin:26px 0 0;padding:20px 0 0; display:grid;gap:11px;list-style:none;text-align:left; border-top:1px solid var(--line); } .done__suite li{display:flex;align-items:center;gap:12px;font-size:.88rem;color:var(--ink-80)} .done__suite b{ display:grid;place-items:center;width:24px;height:24px;flex:none; border-radius:50%;background:var(--steel-wash);color:var(--steel); font-size:.75rem;font-weight:800; } .done__urgence{margin-top:22px;font-size:.86rem;color:var(--ink-60)} .done__urgence a{font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px} .done__urgence a:hover{color:var(--steel)} @media (prefers-reduced-motion: reduce){ .form__done svg path{stroke-dashoffset:0} .form.is-sent .form__done svg path, .form.is-sent .form__done i::before{animation:none} } @media (max-width:520px){ .form__grid{grid-template-columns:1fr} } /* ---------- Selecteur personnalise ---------- */ .sel{position:relative} .sel select{ position:absolute;opacity:0;pointer-events:none; width:100%;height:100%;left:0;top:0; } .sel__btn{ display:flex;align-items:center;justify-content:space-between;gap:12px; width:100%;padding:14px 16px; background:var(--field);border:1.5px solid transparent;border-radius:var(--r-sm); font-size:.96rem;text-align:left;cursor:pointer; transition:border-color .2s,background .2s; } .sel.is-open .sel__btn{border-color:var(--steel);background:var(--paper)} .sel__btn svg{width:17px;height:17px;color:var(--ink-40);flex:none;transition:transform .25s var(--ease)} .sel.is-open .sel__btn svg{transform:rotate(180deg)} .sel__list{ position:absolute;z-index:20;top:calc(100% + 6px);left:0;right:0; max-height:262px;overflow-y:auto;padding:6px; background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm); box-shadow:var(--shadow-lg); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .2s,visibility .2s,transform .2s var(--ease); } .sel.is-open .sel__list{opacity:1;visibility:visible;transform:none} .sel__opt{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:11px 13px;border-radius:var(--r-xs); font-size:.93rem;cursor:pointer; } .sel__opt.is-active{background:var(--mist)} .sel__opt svg{width:16px;height:16px;color:var(--steel);opacity:0;flex:none} .sel__opt[aria-selected="true"]{font-weight:700} .sel__opt[aria-selected="true"] svg{opacity:1} /* ========================================================= 16. CTA FINAL ========================================================= */ .cta{position:relative;isolation:isolate;overflow:hidden;color:#fff;text-align:center;background:var(--ink)} /* La photo est assombrie deux fois : par son opacite, puis par le voile pose au-dessus. Les deux valeurs se multiplient — a .55 et .78 il n'en restait qu'un dixieme a l'ecran. Le voile reste plus dense en haut et en bas qu'au milieu : c'est ce degrade qui tient le contraste du texte, pose au centre. */ .cta__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.72} .cta::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(16,18,21,.78) 0%,rgba(16,18,21,.64) 45%,rgba(16,18,21,.82) 100%); } .cta h2{color:#fff;margin-bottom:16px;max-width:22ch;margin-inline:auto} .cta p{color:var(--white-80);max-width:56ch;margin-inline:auto;margin-bottom:32px} .cta__btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center} /* ========================================================= 17. PIED DE PAGE ========================================================= */ .foot{background:var(--ink);color:var(--white-60);padding-top:clamp(56px,7vw,86px)} .foot__grid{ display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(28px,3.5vw,52px); padding-bottom:clamp(40px,5vw,64px); } @media (max-width:960px){ .foot__grid{grid-template-columns:1fr 1fr} } @media (max-width:560px){ .foot__grid{grid-template-columns:1fr;gap:32px} } .foot__logo img{height:58px;width:auto;margin-bottom:20px} .foot__grid p{font-size:.92rem;line-height:1.7;max-width:38ch} .foot h2{ margin-bottom:20px;font-size:.82rem;font-weight:800;letter-spacing:.14em; text-transform:uppercase;color:#fff; } .foot__links{display:grid;gap:11px} .foot__links a{font-size:.92rem;transition:color .2s,padding-left .2s} .foot__links a:hover{color:#fff;padding-left:5px} .foot__contact{display:grid;gap:14px} .foot__contact a,.foot__contact span{display:flex;align-items:flex-start;gap:11px;font-size:.92rem;line-height:1.5} .foot__contact svg{width:17px;height:17px;color:var(--steel-soft);flex:none;margin-top:3px} .foot__contact a:hover{color:#fff} .foot__contact a{overflow-wrap:break-word} .foot__seal{ display:inline-flex;align-items:center;gap:11px;margin-top:20px; padding:10px 16px;border:1px solid var(--white-12);border-radius:var(--r-pill); font-size:.82rem;font-weight:600; } .foot__seal svg{width:17px;height:17px;color:var(--steel-soft)} .foot__bar{ display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap; padding-block:24px;border-top:1px solid var(--white-12); font-size:.85rem; } .foot__bar a:hover{color:#fff} .foot__bar nav{display:flex;gap:22px;flex-wrap:wrap} /* Credit d'agence. Pastille discrete : le pied appartient au client, la signature ne doit pas y peser plus qu'une mention legale. Le logo est pose a hauteur fixe avec width:auto — sans ca, les attributs width/height du HTML l'etirent (piege connu du projet). */ .made{ display:inline-flex;align-items:center;gap:9px;flex:0 0 auto; padding:5px 13px;border-radius:var(--r-pill); background:var(--white-08);border:1px solid var(--white-12); transition:background-color .2s var(--ease),border-color .2s var(--ease); } .made:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)} .made span{ font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--white-60);transition:color .2s var(--ease); } .made:hover span{color:#fff} .made img{height:14px;width:auto;display:block} /* ---------- Barre d'action mobile ---------- */ .dock{ position:fixed;left:0;right:0;bottom:0;z-index:90; display:none;grid-template-columns:1fr 1fr;gap:10px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); /* Meme verre que la barre de navigation une fois la page defilee : la barre du bas repond a celle du haut, et le fond sombre laisse deviner la page qui defile dessous. */ background:rgba(16,18,21,.88); -webkit-backdrop-filter:saturate(150%) blur(14px); backdrop-filter:saturate(150%) blur(14px); border-top:1px solid var(--white-12); } .dock .btn{width:100%;padding:14px 18px;font-size:.94rem;box-shadow:none} /* Le bouton d'appel reprend le verre depoli du hero (.btn--line) : sur le fond sombre de la barre, un aplat plein ecrasait la transparence de l'ensemble. Le second garde l'aplat nardo — c'est lui l'action principale. */ .dock .btn--line{--fg:#fff} @media (max-width:700px){ .dock{display:grid} /* La reserve qui empeche la barre de masquer le bas de page etait posee sur le body : elle se peignait donc du fond du body, blanc, et laissait une bande claire sous le pied de page, qui est noir. Portee par le pied lui-meme, elle prend sa couleur et la page finit d'un seul ton. */ .foot{padding-bottom:78px} } /* ========================================================= 18. GABARIT DES PAGES SERVICE ========================================================= */ .sv-hero{ position:relative;isolation:isolate;overflow:hidden; margin-top:calc(var(--navh) * -1); padding-top:calc(var(--navh) + clamp(56px,7vw,96px)); padding-bottom:clamp(96px,10vw,150px); /* la carte du bandeau y remonte */ background:var(--ink);color:#fff; } /* Sur petit ecran la carte remonte de 110px : sans ce creux, elle passerait sur le bouton telephone. La regle vit ici et non dans la section 6 : elle y serait ecrasee par la declaration ci-dessus, de meme poids mais plus tardive. */ @media (max-width:520px){ .sv-hero{padding-bottom:170px} } /* Les bannieres reprises du site d'origine portent DEJA leur assombrissement : luminance moyenne de 0,04 a 0,16, aucun pixel au-dessus de 0,29. Les voiler une seconde fois les rendait presque noires. La photo garde donc son opacite pleine, et il ne reste qu'un degrade leger cote texte. */ .sv-hero__bg{ position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover; } /* --------------------------------------------------------------------------- Hero fixe : la photo ne bouge pas pendant que la page defile, seule l'echelle evolue. Une seule regle pour les deux heros du site — celui de l'accueil et celui des pages de service — pour qu'ils ne divergent pas. Le mouvement est confie au compositeur. Ecrit en JS, l'echelle changeait par ecritures successives depuis le fil principal : a chacune, le navigateur redessinait le calque de la photo a la nouvelle resolution. C'est cette rematricialisation qui saccadait, pas la cadence. Le deplacement vaut 100 % de la hauteur de l'image sur une course egale a la hauteur du hero : l'image redescend exactement de ce que la page monte, elle ne bouge donc pas. --hero-course est posee par main.js (SS14), une fois la barre mesuree et les polices chargees — prise trop tot, elle est trop longue et l'image derive. L'echelle de depart couvre le decalage : sans elle, un bord se decouvrirait. Firefox n'implemente pas encore ces animations : @supports l'ecarte et le repli JavaScript prend le relais. */ .hero__bg, .sv-hero__bg{transform:scale(1.14);transform-origin:50% 40%;will-change:transform} @media (prefers-reduced-motion:reduce){ .hero__bg,.sv-hero__bg{transform:none} } @keyframes heroFixe{ from{ transform:translate3d(0,0,0) scale(1.14) } to { transform:translate3d(0,100%,0) scale(1.30) } } @supports (animation-timeline: scroll()){ @media (prefers-reduced-motion:no-preference){ .hero__bg, .sv-hero__bg{ animation:heroFixe linear both; animation-timeline:scroll(root block); animation-range:0 var(--hero-course,100vh); } } } .sv-hero::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(100deg,rgba(16,18,21,.46) 0%,rgba(16,18,21,.28) 48%,rgba(16,18,21,.06) 100%); } /* Banniere non assombrie a la source. Les photos reprises du site d'origine arrivent deja sombres (voir plus haut) ; une photo de chantier brute, non — celle de l'habillage est un ciel bleu et une sous-face creme en plein soleil, sur laquelle le titre blanc devenait illisible. Le voile est donc renforce ici, et pose sur la section plutot que sur l'image : l'image est animee au defilement, un filtre sur elle ajouterait un calque a redessiner a chaque image. Posee juste sous la regle qu'elle corrige — a poids egal, plus loin dans la feuille elle ne passerait pas devant. Le recadrage suit : la photo est en portrait, la banniere tres large, le navigateur n'en garde qu'une bande. Par defaut il prend le milieu, ou se trouve le coude de la descente ; 38 % remonte cette bande sur la sous-face et son bandeau, qui sont le sujet de la page. */ .sv-hero--clair::after{ background:linear-gradient(100deg,rgba(16,18,21,.74) 0%,rgba(16,18,21,.58) 48%,rgba(16,18,21,.32) 100%); } .sv-hero--clair .sv-hero__bg{object-position:50% 38%} .sv-hero h1{max-width:18ch;margin-bottom:20px;font-size:clamp(2.2rem,5vw,3.7rem)} /* Blanc plein et non --white-80 : sur les bannieres les plus claires, .80 tombait a 3,7:1. La hierarchie avec le titre tient au corps et a la graisse, elle n'a pas besoin de la transparence. */ .sv-hero p{color:#fff;max-width:60ch;font-size:clamp(1rem,1.4vw,1.12rem);margin-bottom:32px} .sv-hero__cta{display:flex;flex-wrap:wrap;gap:14px} /* Le fil est pose sur la photo du hero, la ou le voile est le plus leger. A --white-60 il tombait a 2,1:1 sur les cliches clairs ; --white-80 le ramene au-dessus du seuil sans le faire concurrencer le titre. */ .crumb{ display:flex;align-items:center;gap:9px;flex-wrap:wrap; margin-bottom:22px;font-size:.85rem;color:var(--white-80); } .crumb a:hover{color:#fff} .crumb svg{width:13px;height:13px;opacity:.6} .crumb b{color:#fff;font-weight:700} /* align-items:stretch et non center : la photo prend toute la hauteur de la colonne de texte. En centrant, elle gardait son ratio et laissait un vide sous elle, d'autant plus visible que les intros font trois paragraphes. Le ratio ne sert plus que de plancher quand la colonne est plus courte que la photo, et de forme une fois les deux colonnes empilees. */ .sv-intro__in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(36px,5vw,72px);align-items:stretch} /* Une prestation peut poser une video a la place de la photo (nettoyage). C'est le cadre .sv-intro__media qui prend la place de l'image, pas la video : une video en flux impose sa forme a la rangee des qu'elle connait ses dimensions, et la verticale du demoussage reclamait 1013 px de haut. Hors flux, elle remplit le cadre sans peser sur lui. */ .sv-intro img,.sv-intro__media{ width:100%;height:100%;min-height:340px;object-fit:cover;display:block; border-radius:var(--r-lg);box-shadow:var(--shadow); /* liseré interne : sur le fond gris de la section, le bord de la photo se confondait avec elle sur les clichés clairs */ outline:1px solid var(--ink-06);outline-offset:-1px; } .sv-intro__media{position:relative;overflow:hidden} .sv-intro__media video{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;display:block; } @media (max-width:920px){ .sv-intro__in{grid-template-columns:1fr;gap:38px} /* min-height ne sert qu'a la colonne : empile, il primait sur le ratio */ .sv-intro img,.sv-intro__media{height:auto;min-height:0;aspect-ratio:4/3} } /* Zone d'action de l'intro. Le filet la detache des paragraphes : sans lui, le bouton flottait a la suite du texte comme un quatrieme paragraphe. Le bloc telephone est celui de la page d'accueil (.about__tel), deja reutilise plus bas par le gabarit — un seul composant a maintenir. */ .sv-intro__cta{ display:flex;flex-wrap:wrap;align-items:center;gap:18px; margin-top:clamp(26px,3vw,34px);padding-top:clamp(24px,3vw,30px); border-top:1px solid var(--line); } .sv-intro h2{margin-bottom:20px} .sv-intro p{color:var(--ink-60)} .sv-intro{background:var(--mist)} .sv-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)} @media (max-width:900px){ .sv-cards{grid-template-columns:1fr 1fr} } @media (max-width:560px){ .sv-cards{grid-template-columns:1fr} } /* La page tuiles compte huit materiaux. Sur trois colonnes, la derniere rangee n'en portait que deux et le bloc finissait de travers ; sur quatre, les huit tiennent en deux rangees pleines. Les paliers plus etroits reprennent ceux des autres pages. */ .sv-cards--4{grid-template-columns:repeat(4,1fr)} @media (max-width:1180px){ .sv-cards--4{grid-template-columns:repeat(3,1fr)} } @media (max-width:900px){ .sv-cards--4{grid-template-columns:1fr 1fr} } @media (max-width:560px){ .sv-cards--4{grid-template-columns:1fr} } /* Cartes photo : la photo occupe toute la carte, le texte est pose dessus. Le voile degrade n'est pas une decoration mais ce qui rend le texte lisible — une photo de chantier va du ciel clair a l'ardoise sombre, du blanc pose dessus sans voile serait illisible sur la moitie des cartes. Il est donc opaque en bas, la ou vit le texte, et transparent en haut. */ .sv-card{ position:relative;isolation:isolate;overflow:hidden; display:flex;flex-direction:column;justify-content:flex-end; aspect-ratio:4/5;min-height:340px; border-radius:var(--r-lg);background:var(--ink); box-shadow:var(--shadow-s); transition:transform .35s var(--ease),box-shadow .35s; } .sv-card img{ position:absolute;inset:0;z-index:-2; width:100%;height:100%;object-fit:cover;display:block; transition:transform .6s var(--ease); } .sv-card::after{ content:"";position:absolute;inset:0;z-index:-1; /* Teinte legere sur le haut de la photo, juste de quoi asseoir la pastille du numero. Le voile qui rend le texte lisible n'est plus ici : il est porte par .sv-card__txt (voir plus bas). */ background:linear-gradient(180deg, rgba(16,18,21,.22) 0%, rgba(16,18,21,0) 34%); } .sv-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)} .sv-card:hover img{transform:scale(1.05)} .sv-card__num{ position:absolute;top:16px;left:16px; display:grid;place-items:center;min-width:38px;height:38px;padding:0 10px; border-radius:12px; background:rgba(16,18,21,.55);border:1px solid var(--white-12); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); font-size:.82rem;font-weight:800;letter-spacing:.02em;color:#fff; } /* Le voile est accroche au TEXTE, pas a un pourcentage de la carte. C'est ce qui compte : sur la page tuiles, en quatre colonnes, les cartes sont plus courtes alors que le texte garde sa taille — il remontait donc dans la partie claire d'un degrade calcule en pourcentage, et le contraste tombait a 2,6:1. Pose sur le bloc de texte, le degrade suit sa hauteur reelle quel que soit le nombre de colonnes ou la longueur de la description. */ .sv-card__txt{ position:relative;padding:58px 24px 26px; background:linear-gradient(180deg, rgba(16,18,21,0) 0%, rgba(16,18,21,.34) 14%, rgba(16,18,21,.82) 32%, rgba(16,18,21,.93) 58%, rgba(16,18,21,.96) 100%); } /* le filet nardo separe le titre de sa description, comme sur les autres blocs de la charte */ .sv-card h3{color:#fff;margin:0 0 12px;padding-bottom:12px;position:relative} .sv-card h3::after{ content:"";position:absolute;left:0;bottom:0; width:34px;height:2px;border-radius:2px;background:var(--steel-soft); } .sv-card p{font-size:.92rem;color:var(--white-80);line-height:1.6;margin:0} .sv-why__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(36px,5vw,68px);align-items:center} @media (max-width:920px){ .sv-why__in{grid-template-columns:1fr;gap:36px} } /* Photo du symptome. Elle prend toute la largeur de la colonne pour aligner son bord droit sur celui du chapeau — cadree, elle flottait au milieu d'un vide. Les originaux du client font 480 px : a 586 px de colonne (grille 1240 moins la gouttiere), l'agrandissement reste sous 1,25x et ne se voit pas. Le format 16/10 evite d'ecraser le bloc en hauteur. width:100% neutralise l'attribut width du HTML (piege connu du projet). */ .sv-why__vis{ position:relative;margin:26px 0 0; border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow); } .sv-why__vis img{ display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover; } /* Pastille posee dans l'image : elle rattache la photo au propos du bloc. Le voile sombre en bas evite qu'elle se perde sur une photo claire. */ .sv-why__vis::after{ content:"";position:absolute;inset:auto 0 0;height:38%; background:linear-gradient(to top,rgba(16,18,21,.55),transparent); pointer-events:none; } .sv-why__vis figcaption{ position:absolute;left:16px;bottom:16px;z-index:1; display:inline-flex;align-items:center;gap:9px; padding:9px 15px 9px 12px;border-radius:var(--r-pill); background:var(--paper);box-shadow:var(--shadow-s); font-size:.83rem;font-weight:600;letter-spacing:-.01em;color:var(--ink); } .sv-why__vis figcaption svg{width:15px;height:15px;color:var(--steel)} /* Le bouton se colle a la photo : les deux forment un seul bloc sous le texte. */ .sv-why__cta{margin-top:22px} .sv-why__list{display:grid;gap:14px} .sv-why__list li{ display:flex;align-items:flex-start;gap:14px; padding:18px 20px;background:var(--paper);border:1px solid var(--line); border-radius:var(--r);box-shadow:var(--shadow-s); } /* La pastille porte desormais le numero du signe, plus une coche : meme boite, mais le chiffre doit etre cale optiquement au centre — d'ou line-height 1 et les chiffres a chasse fixe, sinon « 01 » et « 04 » n'ont pas la meme largeur. */ .sv-why__list i{ display:grid;place-items:center;width:32px;height:32px;flex:none; border-radius:9px;background:var(--steel);color:#fff; font-style:normal;font-size:.8rem;font-weight:800;line-height:1; letter-spacing:.01em;font-variant-numeric:tabular-nums; } .sv-why__list b{display:block;font-weight:700;letter-spacing:-.015em;margin-bottom:2px} .sv-why__list span{display:block;font-size:.91rem;color:var(--ink-60);line-height:1.55} /* autres prestations, en bas des pages service */ .sv-more{background:var(--mist);border-top:1px solid var(--line)} /* Sept cartes sur une page de service : les six autres prestations plus le lien vers la vue d'ensemble. La page 404 en montre huit, les sept prestations et ce meme lien. En flex et non en grille, pour une seule raison : le nombre de cartes ne tombe pas juste sur quatre colonnes, et une grille aligne toujours une derniere rangee incomplete a gauche, en laissant un creux a droite. Ici justify-content:center la centre. Une rangee pleine, elle, se pose exactement comme en grille — la page 404 est inchangee. La largeur reproduit les colonnes a la main : chaque carte prend le quart de ce qui reste une fois les trois gouttieres retirees. flex-grow reste a zero, sinon les trois cartes du bas s'etireraient pour remplir la rangee au lieu de se centrer. */ .sv-more__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px} .sv-more__grid > *{flex:0 0 calc((100% - 42px) / 4);min-width:0} @media (max-width:900px){ .sv-more__grid > *{flex-basis:calc((100% - 14px) / 2)} } @media (max-width:520px){ .sv-more__grid > *{flex-basis:100%} } .sv-more__it{ display:flex;align-items:center;gap:13px; padding:15px 16px;background:var(--paper);border:1px solid var(--line); border-radius:var(--r); transition:border-color .25s,transform .25s var(--ease),box-shadow .25s; } .sv-more__it:hover{border-color:var(--steel);transform:translateY(-3px);box-shadow:var(--shadow-s)} .sv-more__it i{ display:grid;place-items:center;width:38px;height:38px;flex:none; border-radius:11px;background:var(--steel-wash);color:var(--steel); transition:background .25s,color .25s; } /* Au survol la pastille s'inverse : c'est le meme geste que dans le mega-menu, la carte se signale sans changer de fond. */ .sv-more__it:hover i{background:var(--steel);color:#fff} .sv-more__it svg{width:19px;height:19px} /* Le libelle prend la place restante : sans ce min-width:0, un intitule long pousse le chevron hors de la carte au lieu de se couper. */ .sv-more__it span{display:block;flex:1;min-width:0} .sv-more__it b{ display:block;font-weight:700;font-size:.93rem;letter-spacing:-.015em; color:var(--ink); } /* Le sous-titre du menu : deux mots qui disent ce que couvre la prestation. La carte ne portait que son titre, elle etait a moitie vide. */ .sv-more__it small{ display:block;margin-top:2px;font-size:.79rem;line-height:1.35;color:var(--ink-60); } /* Chevron d'affordance, discret puis avance au survol. */ .sv-more__it > svg:last-child{ width:16px;height:16px;flex:none;color:var(--ink-40); transition:transform .25s var(--ease),color .25s; } .sv-more__it:hover > svg:last-child{transform:translateX(3px);color:var(--steel)} /* Huitieme carte : la vue d'ensemble. Gris clair plutot que blanc — un cran sous les sept prestations, elle ferme la grille sans s'annoncer comme une huitieme prestation. La pastille s'inverse a son tour : blanche sur le gris, la ou les autres sont grises sur le blanc. */ .sv-more__it--tout{background:var(--mist-3);border-color:var(--line-2)} .sv-more__it--tout i{background:var(--paper);color:var(--steel)} .sv-more__it--tout > svg:last-child{color:var(--steel)} .sv-more__it--tout:hover{border-color:var(--steel)} /* ========================================================= 19. PAGE DE TEXTE (mentions legales) ========================================================= */ .legal{padding-top:clamp(44px,6vw,80px)} .legal__body{max-width:74ch} .legal__body h2{font-size:clamp(1.4rem,2.4vw,1.85rem);margin:46px 0 14px} .legal__body h2:first-child{margin-top:0} .legal__body p,.legal__body li{color:var(--ink-60);font-size:.98rem} .legal__body ul{display:grid;gap:8px;margin:0 0 1.1em;padding-left:22px;list-style:disc} .legal__body a{color:var(--steel);font-weight:600} .legal__body a:hover{text-decoration:underline} /* ========================================================= 20. APPARITION AU DÉFILEMENT ========================================================= */ [data-reveal]{ opacity:0;transform:translateY(22px); transition:opacity .7s var(--ease),transform .7s var(--ease); } [data-reveal].is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important; } [data-reveal]{opacity:1;transform:none} } /* ========================================================= 21. IMPRESSION ========================================================= */ @media print{ .topbar,.nav,.drawer,.dock,.hero__cta,.cta,.contact,.lightbox{display:none !important} body{background:#fff;color:#000;font-size:11pt} .section{padding-block:18pt} a{color:#000} }