/* ========================================================= RPS TOITURE — Feuille de style principale Charte : bleu roi #1900B3 (repris du logo) + creme + anthracite ========================================================= */ @import url("../assets/fonts/fonts.css"); /* ---------- 1. Tokens ---------- */ /* ---------- Mode sombre declare, mais identique au mode clair ---------- color-scheme: only light suffit contre le mode sombre automatique de Chrome Android. Il ne suffit pas contre les modes "nuit" de certains navigateurs (Brave, 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 et qu'il n'y a rien a corriger. Les valeurs sont volontairement identiques a celles du bloc :root : le site n'a qu'une seule apparence. Si un theme sombre est un jour souhaite, c'est ici qu'il s'ecrit. */ @media (prefers-color-scheme: dark){ :root{ --blue:#1900B3; --blue-dark:#12008A; --blue-light:#2E1AD6; --blue-wash:#ECE9FF; --blue-glow:#9B8BFF; --blue-tint:rgba(25,0,179,.08); --ink:#211D1D; --ink-80:rgba(33,29,29,.80); --ink-60:rgba(33,29,29,.60); --ink-40:rgba(33,29,29,.40); --ink-08:rgba(33,29,29,.08); --cream:#FFFFFF; --cream-2:#F1F2F5; --field:#F5F6F8; --white:#fff; --white-80:rgba(255,255,255,.80); --white-60:rgba(255,255,255,.60); --white-12:rgba(255,255,255,.12); } body{background:var(--cream); color:var(--ink)} /* les sections claires portent un fond explicite : un fond herite est la premiere chose que ces moteurs assombrissent */ .about,.reviews,.zone,.sv-intro,.sv-gallery{background-color:var(--cream)} .services,.works,.faq,.sv-list,.sv-zone{background-color:var(--cream-2)} } :root{ /* Le site n existe qu en clair : sans cette declaration, les navigateurs qui proposent un mode sombre automatique (Chrome Android, Samsung Internet) s autorisent a inverser eux-memes les couleurs, et les fonds blancs passent au noir. Le mot-cle 'only' leur interdit ce reglage force. */ color-scheme: only light; --blue:#1900B3; --blue-dark:#12008A; --blue-light:#2E1AD6; --blue-wash:#ECE9FF; --blue-glow:#9B8BFF; --blue-tint:rgba(25,0,179,.08); --ink:#211D1D; --ink-80:rgba(33,29,29,.80); --ink-60:rgba(33,29,29,.60); --ink-40:rgba(33,29,29,.40); --ink-08:rgba(33,29,29,.08); --cream:#FFFFFF; /* fond principal */ --cream-2:#F1F2F5; /* sections alternees, gris clair */ --field:#F5F6F8; /* fond des champs de formulaire */ --white:#fff; --white-80:rgba(255,255,255,.80); --white-60:rgba(255,255,255,.60); --white-12:rgba(255,255,255,.12); --r-sm:8px; --r:16px; --r-lg:24px; --r-pill:999px; --display:"Bebas Neue","Haettenschweiler","Arial Narrow",sans-serif; --sans:"Inter","Segoe UI",Helvetica,Arial,sans-serif; --shell:1240px; --navh:94px; /* repli avant mesure JS : volontairement large, un debord passe sous la barre de contact */ --gblue:#4285F4; --gut:clamp(20px,4vw,48px); --sec:clamp(72px,9vw,132px); --shadow-s:0 2px 8px rgba(33,29,29,.06); --shadow:0 18px 44px -22px rgba(33,29,29,.35); --shadow-blue:0 20px 44px -20px rgba(25,0,179,.55); } /* ---------- 2. Base ---------- */ *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:104px; /* Le clip horizontal est porte par , pas seulement par : quand seul body le porte, sa valeur se propage au viewport et body devient un conteneur de defilement, ce qui casse position:sticky (Safari iPad). Ici html clippe, body n a plus a le faire, et la barre reste retenue a top:0. */ overflow-x:hidden; overflow-x:clip; } body{ margin:0; background:var(--cream); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; /* Ne JAMAIS remettre overflow-x:hidden seul ici : sur il fait passer overflow-y a auto, le body devient un conteneur de defilement et position:sticky de la barre de nav cesse d etre retenue a top:0 (Safari iPad notamment : la barre defilait avec la page et se coupait en haut). overflow-x:clip clippe pareil sans creer de conteneur de defilement ; hidden reste en repli pour les navigateurs qui ignorent clip. */ overflow-x:hidden; overflow-x:clip; } img{max-width:100%; display:block} a{color:inherit; text-decoration:none} button{font:inherit; color:inherit; background:none; border:0; cursor:pointer} ul{margin:0; padding:0; list-style:none} ::selection{background:var(--blue); color:#fff} h1,h2,h3,h4{ font-family:var(--display); font-weight:400; line-height:.94; letter-spacing:.01em; margin:0; text-transform:uppercase; } h1{font-size:clamp(44px,5.9vw,84px)} h2{font-size:clamp(34px,4.6vw,62px)} h3{font-size:clamp(22px,2vw,28px)} p{margin:0} .shell{width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut)} .section{padding-block:var(--sec)} /* ---------- 3. Elements partages ---------- */ .eyebrow{ display:inline-flex; align-items:center; gap:9px; box-shadow:0 1px 3px rgba(33,29,29,.05); font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; padding:8px 16px 8px 12px; border-radius:var(--r-pill); background:var(--white); border:1px solid var(--ink-08); color:var(--ink); } .eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--blue)} .eyebrow--ondark{background:var(--white-12); border-color:var(--white-12); color:#fff} .eyebrow--ondark::before{background:var(--blue-light)} .eyebrow--onblue{background:var(--white-12); border-color:var(--white-12); color:#fff} .eyebrow--onblue::before{background:#fff} .lead{font-size:clamp(15px,1.15vw,17px); color:var(--ink-60); max-width:56ch} .lead--light{color:var(--white-60)} .sec-head{display:flex; flex-wrap:wrap; gap:28px 48px; align-items:flex-end; justify-content:space-between; margin-bottom:clamp(36px,4.5vw,64px)} .sec-head__left{max-width:660px; display:flex; flex-direction:column; gap:18px; align-items:flex-start} .sec-head__right{display:flex; flex-direction:column; gap:18px; max-width:400px; align-items:flex-start} .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:.01em; padding:15px 26px; border-radius:var(--r-pill); border:1px solid transparent; white-space:nowrap; transition:transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease; } .btn svg{width:16px; height:16px; flex:none} .btn:hover{transform:translateY(-2px)} .btn--primary{background:var(--blue); color:#fff; box-shadow:var(--shadow-blue)} .btn--primary:hover{background:var(--blue-dark)} .btn--dark{background:var(--ink); color:#fff} .btn--dark:hover{background:#000} .btn--ghost{background:var(--white); color:var(--ink); border-color:var(--ink-08); box-shadow:0 1px 3px rgba(33,29,29,.06)} .btn--ghost:hover{border-color:var(--ink)} .btn--light{background:#fff; color:var(--blue)} .btn--outline-light{background:transparent; color:#fff; border-color:var(--white-12)} .btn--outline-light:hover{background:var(--white-12)} .btn--block{width:100%} /* ---------- 4. Barre de contact ---------- */ .topbar{position:relative; z-index:61; background:var(--ink); color:var(--white-80); font-size:13px} .topbar__in{display:flex; flex-wrap:wrap; gap:8px 28px; align-items:center; justify-content:space-between; padding-block:10px} .topbar__items{display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center} .topbar a{display:inline-flex; align-items:center; gap:8px; transition:color .2s} .topbar a:hover{color:#fff} .topbar svg{width:14px; height:14px; color:var(--blue-light)} .topbar__note{display:inline-flex; align-items:center; gap:8px; color:#fff; font-weight:500} /* Credit d'agence, en bout de la ligne du bas de page. Le fond y est deja sombre : la pastille se detache par un fond legerement eclairci et un lisere, pas par une couleur — elle ne doit pas concurrencer les liens legaux. */ .made{ display:inline-flex; align-items:center; gap:9px; flex:none; padding:4px 12px; border-radius:var(--r-pill); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); transition:background .2s ease, border-color .2s ease; } .made:hover{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.30)} .made span{ font-size:9.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--white-60); transition:color .2s ease; } .made:hover span{color:#fff} /* la hauteur pilote, la largeur suit : le fichier est en 436x90 */ .made img{height:14px; width:auto; display:block} .topbar__dot{ width:7px; height:7px; border-radius:50%; background:#41D18B; flex:none; animation:pulseDot 2.2s cubic-bezier(.4,0,.2,1) infinite; } @keyframes pulseDot{ 0% {box-shadow:0 0 0 0 rgba(65,209,139,.55); opacity:1} 55% {box-shadow:0 0 0 8px rgba(65,209,139,0); opacity:.55} 100% {box-shadow:0 0 0 0 rgba(65,209,139,0); opacity:1} } /* ---------- 5. Navigation ---------- */ .nav{position:sticky; top:0; z-index:60; padding-top:18px; margin-bottom:calc(-1 * var(--navh)); transition:padding .3s ease} .nav__in{ display:flex; align-items:center; gap:20px; justify-content:space-between; background:rgba(255,255,255,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--ink-08); border-radius:var(--r-pill); padding:8px 8px 8px 20px; box-shadow:var(--shadow-s); transition:box-shadow .3s ease, background .3s ease; } .nav.is-stuck .nav__in{box-shadow:0 14px 34px -20px rgba(33,29,29,.5); background:rgba(255,255,255,.94)} .nav__logo img{height:42px; width:auto} .nav__links{display:flex; align-items:center; gap:4px} .nav__links a{ position:relative; font-size:14px; font-weight:500; color:var(--ink-80); padding:8px 14px; border-radius:var(--r-pill); transition:color .2s, background .2s; } .nav__links a:hover,.nav__links a.is-active{color:var(--ink); background:var(--blue-tint)} .nav__cta{display:flex; align-items:center; gap:18px} .nav__tel{display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:600; padding-right:18px; border-right:1px solid var(--ink-08)} .nav__tel > span{display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--blue-wash); color:var(--blue)} .nav__tel svg{width:15px; height:15px} .nav__cta .btn{padding:11px 22px} .nav__burger{display:none; width:42px; height:42px; border-radius:50%; background:var(--ink); color:#fff; place-items:center} .nav__burger svg{width:18px; height:18px} .drawer{ position:fixed; inset:0; z-index:70; background:var(--ink); color:#fff; padding:24px var(--gut) 40px; display:flex; flex-direction:column; gap:26px; transform:translateY(-102%); transition:transform .45s cubic-bezier(.6,.05,.2,1); overflow-y:auto; } .drawer.is-open{transform:none} .drawer__top{display:flex; align-items:center; justify-content:space-between} .logo-plate{display:inline-block; background:#fff; border-radius:14px; padding:10px 16px; line-height:0} .drawer__top .logo-plate img{height:40px} .drawer__close{width:44px; height:44px; border-radius:50%; background:var(--white-12); display:grid; place-items:center} .drawer__close svg{width:18px; height:18px} .drawer nav{display:flex; flex-direction:column} .drawer nav a{font-family:var(--display); font-size:34px; padding:12px 0; border-bottom:1px solid var(--white-12); text-transform:uppercase} .drawer__foot{display:flex; flex-direction:column; gap:12px; margin-top:auto} .drawer__foot .btn{width:100%} .drawer__note{ display:flex; align-items:center; justify-content:center; gap:9px; margin-top:6px; padding-top:16px; border-top:1px solid var(--white-12); font-size:13px; color:var(--white-80); text-align:center; } /* ---------- 6. Hero ---------- */ .hero{ position:relative; isolation:isolate; overflow:hidden; min-height:min(94vh,940px); display:flex; align-items:flex-end; /* fond de secours, visible le temps que la photo arrive : noir comme le voile, un bleu tres sombre y aurait jure depuis que celui-ci est en noir pur */ background:#000; } /* Photo calee sur la fenetre et non sur la section : elle reste rigoureusement immobile pendant que le hero defile par-dessus, et sa bande visible se referme par le bas jusqu'a disparaitre. C'est le compositeur qui s'en occupe, aucun script n'intervient — un calage au defilement en JS arrive toujours une image en retard et fait trembler la photo. La photo est portee par un ::before en position:fixed, et non par un background-attachment:fixed : iOS ignore purement et simplement les fonds fixes, alors qu'il cale correctement les elements fixes. Reste a empecher ce ::before de couvrir toute la page une fois le hero passe. C'est le role du clip : contrairement a clip-path, il decoupe ses descendants fixes sans devenir leur bloc conteneur — ils restent donc cales sur la fenetre tout en etant limites au cadre du hero. Propriete depreciee mais seule a faire ce travail, et toujours honoree par les navigateurs. L'URL arrive par --hero, pose en style en ligne dans index.html pour que la photo continue d'etre versionnee avec le reste des assets. */ .hero__bg{ position:absolute; inset:0; z-index:-2; clip:rect(0,auto,auto,0); } /* cover se mesure ici sur la fenetre : le point de mire est cale sur le couvreur, aux deux tiers droits, pour qu'il reste dans le cadre quand elle se resserre */ .hero__bg::before{ content:''; position:fixed; inset:0; background-image:var(--hero); background-repeat:no-repeat; background-size:cover; background-position:55% 50%; } /* voile en noir pur : les deux degrades tiraient sur le bleu (9,7,22 pour le vertical, 10,5,52 pour le lavis diagonal, franchement violet a gauche). Les opacites ne bougent pas, seule la teinte change — l'assombrissement necessaire a la lisibilite du titre reste le meme. */ .hero__veil{ position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 26%, rgba(0,0,0,.55) 62%, rgba(0,0,0,.94) 100%), linear-gradient(100deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.76) 34%, rgba(0,0,0,.42) 58%, rgba(0,0,0,0) 80%); } .hero__inner{ position:relative; z-index:1; width:100%; display:flex; flex-direction:column; gap:clamp(44px,7vw,92px); padding-top:calc(var(--navh) + clamp(52px,8vw,118px)); padding-bottom:clamp(26px,3.2vw,42px); } .hero__copy{display:flex; flex-direction:column; align-items:flex-start; gap:24px; max-width:min(1010px,82%)} .hero h1{color:#fff; text-shadow:0 4px 40px rgba(0,0,0,.45)} .hero h1 em{display:block; font-style:normal; color:var(--blue-glow)} @supports (-webkit-text-stroke: 1px #fff){ .hero h1 em{ color:transparent; -webkit-text-stroke:2px #fff; text-shadow:none; filter:drop-shadow(0 3px 14px rgba(0,0,0,.45)); } } .hero__lead{ font-size:clamp(15px,1.15vw,17.5px); color:rgba(255,255,255,.78); max-width:70ch; text-shadow:0 2px 18px rgba(0,0,0,.5); } .hero__actions{display:flex; flex-wrap:wrap; gap:12px} /* --- Blocs verre depoli --- */ .glass{ background:rgba(255,255,255,.085); -webkit-backdrop-filter:blur(22px) saturate(155%); backdrop-filter:blur(22px) saturate(155%); border:1px solid rgba(255,255,255,.20); box-shadow:0 28px 70px -34px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.22); } .eyebrow--glass{ background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.26); color:#fff; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); } .eyebrow--glass::before{background:#fff} .btn--glass{ background:rgba(255,255,255,.13); color:#fff; border-color:rgba(255,255,255,.28); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); } .btn--glass:hover{background:rgba(255,255,255,.22)} .hero__panel{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.4fr); border-radius:var(--r-lg); overflow:hidden; } .hero__cell{ padding:clamp(20px,1.9vw,28px) clamp(20px,1.9vw,30px); display:flex; flex-direction:column; justify-content:center; gap:5px; border-left:1px solid rgba(255,255,255,.15); } .hero__cell:first-child{border-left:0} .hero__cell b{font-family:var(--display); font-size:clamp(32px,3.2vw,46px); line-height:1; color:#fff} .hero__cell b i{font-style:normal; font-size:.5em; color:rgba(255,255,255,.5); margin-left:2px} .hero__cell > span{font-size:13px; line-height:1.45; color:rgba(255,255,255,.62)} .hero__cell .hero__stars{color:#fff; font-size:12px; letter-spacing:2px; margin-bottom:2px} .hero__cell--cta{flex-direction:row; align-items:center; gap:16px; transition:background .25s ease} .hero__cell--cta:hover{background:rgba(255,255,255,.12)} .hero__cell--cta .hero__cell-ico{ display:grid; place-items:center; width:48px; height:48px; flex:none; border-radius:14px; background:var(--blue); color:#fff; box-shadow:0 12px 26px -12px rgba(25,0,179,.9); } .hero__cell--cta svg{width:20px; height:20px} .hero__cell--cta b{font-size:clamp(26px,2.3vw,32px)} .hero__cell--cta span{display:block; font-size:12.5px; line-height:1.45; color:rgba(255,255,255,.62)} /* ---------- 7. Bandeau defilant ---------- */ .marquee{background:var(--blue); color:#fff; padding-block:18px; overflow:hidden; --dur:34s} .marquee__track{display:flex; width:max-content; animation:slide var(--dur) linear infinite} .marquee__group{display:flex; align-items:center; gap:44px; padding-right:44px; flex:none} .marquee span{font-family:var(--display); font-size:clamp(20px,2.2vw,30px); letter-spacing:.03em; white-space:nowrap} .marquee i{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.6); flex:none} @keyframes slide{to{transform:translateX(-50%)}} /* ---------- 8. A propos ---------- */ .about__top{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:clamp(32px,5vw,72px); align-items:start} .about__top h2{font-size:clamp(28px,3.1vw,44px); line-height:1.04} .about__aside{display:flex; flex-direction:column; gap:22px; align-items:flex-start} .about__list{display:grid; gap:12px; width:100%} .about__list li{display:flex; gap:12px; align-items:flex-start; font-size:15px} .about__list svg{width:20px; height:20px; color:var(--blue); flex:none; margin-top:2px} /* Les deux photos sont en paysage : la hauteur de rangee est donnee par la premiere figure, la seconde s'y aligne et recadre par object-fit. */ .about__media{display:grid; grid-template-columns:1.25fr 1fr; gap:14px; margin-top:clamp(36px,4vw,56px)} .about__media figure{margin:0; border-radius:var(--r-lg); overflow:hidden; background:var(--ink-08)} .about__media figure:first-child{aspect-ratio:16/10} .about__media img{width:100%; height:100%; object-fit:cover; display:block} /* ---------- 9. Services ---------- */ .services{background:var(--cream-2)} /* 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 §8) ; 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; } /* glissement : la scene se saisit, et pendant le geste les cartes doivent suivre le curseur sans transition, sinon elles trainent d'un demi-tour */ .svc-rail{cursor:grab; touch-action:pan-y} .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) / -2); border-radius:24px; overflow:hidden; background:var(--ink); isolation:isolate; box-shadow:0 26px 50px -26px rgba(33,29,29,.55); transition:transform .75s cubic-bezier(.2,.7,.2,1), opacity .55s ease, box-shadow .5s ease; will-change:transform, opacity; } /* seule la carte centrale est cliquable vers le devis ; les autres se recentrent */ .svc[data-off="0"]{box-shadow:0 40px 70px -30px rgba(33,29,29,.7)} .svc:not([data-off="0"]){cursor:pointer} /* "carte hors du centre" n'a de sens que dans le carrousel : sans le garde [data-off], la regle s'applique aussi aux cartes empilees du mobile, ou JS retire l'attribut, et neutralise 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 cubic-bezier(.2,.6,.2,1)} .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(9,7,22,.42) 0%, rgba(9,7,22,0) 22%, rgba(9,7,22,.10) 46%, rgba(9,7,22,.80) 78%, rgba(9,7,22,.95) 100%), linear-gradient(180deg, rgba(25,0,179,0) 62%, rgba(25,0,179,.32) 100%); } .svc__num, .svc__ico{ position:absolute; top:15px; z-index:2; color:#fff; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.30); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); } .svc__num{ left:15px; font-family:var(--display); font-size:14px; letter-spacing:.12em; padding:5px 13px; border-radius:var(--r-pill); } .svc__ico{ right:15px; display:grid; place-items:center; width:44px; height:44px; border-radius:14px; transition:background .35s ease, border-color .35s ease, transform .45s cubic-bezier(.2,.7,.2,1); } .svc__ico svg{width:22px; height:22px} .svc[data-off="0"] .svc__ico{background:var(--blue); border-color:var(--blue)} .svc__body{ position:absolute; inset:auto 0 0 0; z-index:2; padding:22px 22px 20px; display:flex; flex-direction:column; gap:9px; color:#fff; } .svc__body h3{color:#fff; font-size:clamp(21px,1.7vw,25px); text-shadow:0 2px 14px rgba(0,0,0,.5)} .svc__body p{ font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.78); max-height:0; opacity:0; overflow:hidden; transition:max-height .5s cubic-bezier(.2,.7,.2,1), opacity .35s ease; } /* la description ne s'affiche que sur la carte au centre */ .svc[data-off="0"] .svc__body p{max-height:11em; opacity:1} .svc__link{ margin-top:6px; padding-top:14px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid rgba(255,255,255,.20); font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,.85); transition:color .3s ease; } .svc__link i{ display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:50%; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); color:#fff; transition:background .3s ease, border-color .3s ease, transform .3s ease; } .svc__link svg{width:15px; height:15px} .svc[data-off="0"]:hover .svc__link i{background:var(--blue); border-color:var(--blue); transform:translateX(3px)} /* fleches de defilement */ .sec-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; border-radius:50%; background:var(--white); border:1px solid var(--ink-08); color:var(--ink); box-shadow:0 2px 6px rgba(33,29,29,.07); transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; } .rail-btn svg{width:19px; height:19px} .rail-btn:hover{background:var(--blue); border-color:var(--blue); color:#fff; transform:translateY(-2px)} /* ---------- 9 bis. Partenaires ---------- */ /* position:relative + z-index : la section remonte de 34-66px sous la precedente (marge negative volontaire). Sans mise en pile, .sv-intro — qui est en position:relative avec un fond blanc opaque — se peignait par-dessus et masquait le haut du bandeau de titre. */ .partners{position:relative; z-index:1; padding-block:0 clamp(52px,6vw,84px); margin-top:calc(-1 * clamp(34px,4.5vw,66px)); background:var(--cream); overflow:hidden} .partners__head{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; padding-top:clamp(26px,3vw,40px); border-top:1px solid var(--ink-08); margin-bottom:clamp(22px,2.6vw,34px); } .partners__head p{font-size:14.5px; color:var(--ink-60); max-width:58ch} .partners__rail{position:relative; overflow:hidden} /* fondus blancs : les logos apparaissent et disparaissent au lieu d'etre coupes net */ .partners__rail::before, .partners__rail::after{ content:""; position:absolute; top:0; bottom:0; z-index:2; pointer-events:none; width:clamp(70px,14%,150px); } .partners__rail::before{left:0; background:linear-gradient(90deg, var(--cream) 42%, rgba(255,255,255,0))} .partners__rail::after {right:0; background:linear-gradient(270deg, var(--cream) 42%, rgba(255,255,255,0))} .partners__track{display:flex; width:max-content; animation:slide 42s linear infinite} .partners__group{display:flex; align-items:center; gap:clamp(40px,5.2vw,76px); padding-right:clamp(40px,5.2vw,76px); flex:none} .partners__group img{ height:40px; width:auto; flex:none; opacity:.88; transition:opacity .3s ease, transform .3s ease; } .partners__group img.is-square{height:64px} .partners__group img:hover{opacity:1; transform:scale(1.05)} /* ---------- 10. Pourquoi nous ---------- */ .why{background:var(--ink); color:#fff; position:relative; overflow:hidden} /* halo bleu diffus derriere la colonne de droite, pour casser l'aplat sombre */ .why::before{ content:""; position:absolute; width:900px; height:900px; border-radius:50%; right:-320px; top:-280px; pointer-events:none; background:radial-gradient(circle, rgba(25,0,179,.36) 0%, rgba(25,0,179,0) 68%); } .why > *{position:relative; z-index:1} .why h2{color:#fff} .why__grid{display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,1fr); gap:clamp(32px,4vw,64px); align-items:stretch} .why__media{border-radius:var(--r-lg); overflow:hidden; position:relative} .why__media img{width:100%; height:100%; min-height:360px; object-fit:cover} /* voile bas pour que le cartouche reste lisible quelle que soit la photo */ .why__media::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(9,7,22,0) 44%, rgba(9,7,22,.55) 74%, rgba(9,7,22,.92) 100%); } .why__stamp{ position:absolute; left:20px; right:20px; bottom:20px; z-index:2; display:flex; align-items:center; gap:16px; background:rgba(12,9,28,.42); border:1px solid rgba(255,255,255,.22); -webkit-backdrop-filter:blur(20px) saturate(150%); backdrop-filter:blur(20px) saturate(150%); border-radius:var(--r); padding:16px 20px; box-shadow:0 24px 50px -28px rgba(0,0,0,.8); } .why__stamp b{ font-family:var(--display); font-size:46px; line-height:.9; color:#fff; flex:none; } .why__stamp span{font-size:13px; line-height:1.4; color:rgba(255,255,255,.78)} .why__copy{display:flex; flex-direction:column; gap:24px; align-items:flex-start} .why__items{display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%} .why__item{ position:relative; overflow:hidden; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); border-radius:18px; padding:24px 22px 22px; display:flex; flex-direction:column; gap:10px; transition:background .35s ease, border-color .35s ease, transform .35s ease; } /* liseré bleu qui se remplit au survol */ .why__item::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--blue); transform:scaleY(0); transform-origin:top; transition:transform .45s cubic-bezier(.2,.7,.2,1); } .why__item:hover{background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.20); transform:translateY(-4px)} .why__item:hover::before{transform:scaleY(1)} .why__item i{ display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:linear-gradient(150deg, var(--blue) 0%, var(--blue-light) 100%); color:#fff; box-shadow:0 14px 26px -14px rgba(25,0,179,.9); transition:transform .4s cubic-bezier(.2,.7,.2,1); } .why__item:hover i{transform:rotate(-8deg) scale(1.06)} .why__item svg{width:21px; height:21px} .why__item h3{font-size:20px; color:#fff; margin-top:2px} .why__item p{font-size:14px; line-height:1.55; color:var(--white-60)} /* ---------- 11. Temoignages ---------- */ .reviews__rows{display:grid; gap:16px; overflow:hidden} .reviews__row{display:flex; gap:16px; width:max-content; animation:slide 60s linear infinite} .reviews__row--rev{animation-direction:reverse; animation-duration:74s} .review{ width:min(400px,78vw); flex:none; background:var(--white); border:1px solid var(--ink-08); border-radius:var(--r); padding:26px 26px 22px; display:flex; flex-direction:column; gap:16px; box-shadow:0 2px 12px -6px rgba(33,29,29,.16); } .review__stars{display:inline-flex; gap:2px} .review__stars svg{width:17px; height:17px; fill:var(--gblue)} .review p{font-size:15px; color:var(--ink-80)} .review__who{display:flex; align-items:center; gap:13px; margin-top:auto; padding-top:6px} .review__av{position:relative; flex:none; display:block} .review__av i{ display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--blue-wash); color:var(--blue); font-family:var(--display); font-size:18px; font-style:normal; } .review__g{ position:absolute; left:-4px; bottom:-3px; display:grid; place-items:center; width:23px; height:23px; border-radius:50%; background:#fff; border:1.5px solid var(--white); box-shadow:0 2px 6px rgba(33,29,29,.26); } .review__g svg{width:13px; height:13px} .review__who b{display:block; font-size:14.5px; font-weight:600} .review__who small{font-size:12.5px; color:var(--ink-60)} .reviews__fade{position:relative} .reviews__fade::before,.reviews__fade::after{ content:""; position:absolute; top:0; bottom:0; width:11vw; z-index:2; pointer-events:none; } .reviews__fade::before{left:0; background:linear-gradient(90deg,var(--cream),rgba(255,255,255,0))} .reviews__fade::after{right:0; background:linear-gradient(270deg,var(--cream),rgba(255,255,255,0))} /* ---------- 12. Realisations ---------- */ .works{background:var(--cream-2)} .works__grid{display:grid; grid-template-columns:repeat(6,1fr); gap:16px} .work{position:relative; border-radius:var(--r); overflow:hidden; background:var(--ink); grid-column:span 2} .work:nth-child(1),.work:nth-child(4){grid-column:span 4} .work img{width:100%; height:100%; object-fit:cover; aspect-ratio:16/11; transition:transform .7s cubic-bezier(.2,.6,.2,1)} .work:hover img{transform:scale(1.05)} .work__meta{ position:absolute; inset:auto 0 0 0; padding:22px; background:linear-gradient(to top,rgba(15,12,12,.88),rgba(15,12,12,0)); color:#fff; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; } .work__meta h3{font-size:22px} .work__meta small{font-size:12.5px; color:var(--white-60)} .work__tag{font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; background:var(--blue); padding:6px 12px; border-radius:var(--r-pill); white-space:nowrap} /* ---------- 14. FAQ ---------- */ .faq{background:var(--cream-2)} .faq__grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,5vw,72px); align-items:start} .faq__side{display:flex; flex-direction:column; gap:20px; align-items:flex-start; position:sticky; top:120px} .faq__box{background:var(--blue); color:#fff; border-radius:var(--r); padding:26px; width:100%} .faq__box h3{color:#fff; font-size:26px} .faq__box p{font-size:14px; color:rgba(255,255,255,.75); margin:8px 0 18px} .acc{display:grid; gap:10px} .acc__item{background:var(--white); border:1px solid var(--ink-08); border-radius:var(--r); overflow:hidden; transition:border-color .3s} .acc__item.is-open{border-color:var(--blue)} .acc__q{display:flex; align-items:center; gap:18px; width:100%; text-align:left; padding:22px 24px; font-size:16.5px; font-weight:600} .acc__q span{flex:1} .acc__q i{display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--blue-wash); color:var(--blue); flex:none; transition:transform .35s ease, background .3s, color .3s} .acc__item.is-open .acc__q i{transform:rotate(45deg); background:var(--blue); color:#fff} .acc__q svg{width:16px; height:16px} .acc__a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .38s cubic-bezier(.4,0,.2,1)} .acc__item.is-open .acc__a{grid-template-rows:1fr} .acc__a > div{overflow:hidden} .acc__a p{padding:0 24px 24px; font-size:15px; color:var(--ink-60); max-width:64ch} /* ---------- 15. Zone d'intervention ---------- */ .zone__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,4.5vw,72px); align-items:center} .zone__copy{display:flex; flex-direction:column; gap:20px; align-items:flex-start} .zone__cities{display:flex; flex-wrap:wrap; gap:8px; --pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); } .zone__cities li{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:500; padding:9px 16px 9px 13px; border-radius:var(--r-pill); background:var(--white); border:1px solid var(--ink-08); box-shadow:0 1px 3px rgba(33,29,29,.05); } /* epingle purement decorative : un masque, pas une image coloree, pour que la teinte vienne de la palette et suive un futur changement d'accent. ::before la garde hors du texte lu par les lecteurs d'ecran. */ .zone__cities li::before{ content:""; flex:none; width:14px; height:14px; background:var(--blue); -webkit-mask:var(--pin) center/contain no-repeat; mask:var(--pin) center/contain no-repeat; } .zone__map{ position:relative; margin:0; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3; background:#0C0A1C; border:1px solid var(--ink-08); box-shadow:0 24px 54px -30px rgba(33,29,29,.6); } .zone__map img{width:100%; height:100%; object-fit:cover} .zone__credit{ position:absolute; right:10px; bottom:8px; z-index:2; font-size:10px; letter-spacing:.02em; color:rgba(255,255,255,.55); } /* ---------- 16. Contact / devis ---------- */ .contact{background:var(--ink); color:#fff} .contact h2{color:#fff} .contact__grid{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(32px,4.5vw,64px); align-items:start} .contact__copy{display:flex; flex-direction:column; gap:24px; align-items:flex-start} .contact__infos{display:grid; gap:12px; width:100%} .contact__infos > a,.contact__infos > div{display:flex; align-items:center; gap:14px; background:var(--white-12); border-radius:var(--r); padding:16px 18px; transition:background .25s} .contact__infos a:hover{background:rgba(255,255,255,.2)} .contact__infos i{display:grid; place-items:center; width:40px; height:40px; border-radius:11px; background:var(--blue); flex:none} .contact__infos svg{width:18px; height:18px} .contact__infos b{display:block; font-size:15px; font-weight:600} .contact__infos small{font-size:12.5px; color:var(--white-60)} .form{background:#fff; border-radius:var(--r-lg); padding:clamp(24px,3vw,34px); color:var(--ink)} .form__row{display:grid; grid-template-columns:1fr 1fr; gap:14px} .field{display:flex; flex-direction:column; gap:7px; margin-bottom:14px} .field label{font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-60)} .field input,.field select,.field textarea{ font:inherit; font-size:15px; color:var(--ink); background:var(--field); border:1px solid var(--ink-08); border-radius:12px; padding:14px 16px; transition:border-color .2s, background .2s; width:100%; } .field textarea{resize:vertical; min-height:118px} .field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--blue); background:#fff} .form__note{font-size:12.5px; color:var(--ink-40); margin-top:12px; text-align:center} /* Confirmation d'envoi : elle ne s'ajoute pas au formulaire, elle le remplace. Une fois la demande partie, laisser les champs sous les yeux du visiteur n'a plus de sens et l'invite a renvoyer une seconde fois la meme demande. La hauteur atteinte par le formulaire est figee en JS avant la bascule, sinon la carte se retracte d'un coup et la page saute sous le curseur. */ /* La carte passe de la hauteur du formulaire a la sienne propre : le JS pose les deux valeurs, la transition evite que tout ce qui suit remonte d'un coup. La declaration est portee par .is-sent et non par .form : le formulaire a data-reveal, dont la regle d'apparition, posee plus bas dans la feuille, ecrase a specificite egale toute transition definie sur .form seul. */ .form.is-sent{ display:flex; flex-direction:column; justify-content:center; align-items:center; transition:min-height .55s cubic-bezier(.2,.6,.2,1); } .form.is-sent > *:not(.form__done){display:none} .form.is-sent .form__done{display:flex} .form__done{ display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:16px; padding:12px 0; } /* pastille pleine plutot qu'un aplat pale : c'est le seul point d'accroche de la carte une fois les champs partis, il doit porter. Le halo l'assoit sans le cerner d'un trait. */ .form__done-ico{ display:grid; place-items:center; width:74px; height:74px; border-radius:50%; background:var(--blue); color:#fff; box-shadow:0 0 0 10px var(--blue-wash); } .form__done-ico svg{width:34px; height:34px; stroke-width:2.4} .form__done h3{font-size:clamp(24px,2.6vw,32px)} .form__done p{font-size:15px; line-height:1.6; color:var(--ink-60); max-width:40ch} /* filet de separation : la ligne d'urgence est d'un autre ordre que le message, elle ne doit pas se lire dans la foulee */ .form__done-note{ width:min(100%,300px); margin-top:2px; padding-top:18px; border-top:1px solid var(--ink-08); font-size:13.5px; color:var(--ink-40); } .form__done-note a{color:var(--blue); font-weight:600; white-space:nowrap} @media (prefers-reduced-motion: no-preference){ /* la coche se trace, le reste monte a la suite : l'envoi est le moment ou le visiteur a besoin d'etre rassure, l'animation sert a ca et s'arrete la */ .form.is-sent .form__done-ico{animation:doneIco .45s cubic-bezier(.2,1.3,.4,1) both} .form.is-sent .form__done-ico svg{ stroke-dasharray:24; stroke-dashoffset:24; animation:doneTrait .5s cubic-bezier(.5,0,.2,1) .28s both; } .form.is-sent .form__done > h3{animation:doneMonte .45s ease-out .2s both} .form.is-sent .form__done > p{animation:doneMonte .45s ease-out .3s both} .form.is-sent .form__done-note{animation:doneMonte .45s ease-out .4s both} } @keyframes doneIco{from{transform:scale(.3); opacity:0} to{transform:none; opacity:1}} @keyframes doneTrait{to{stroke-dashoffset:0}} @keyframes doneMonte{from{transform:translateY(12px); opacity:0} to{transform:none; opacity:1}} /* meme gabarit que la confirmation, en rouge : l'envoi peut echouer (reseau coupe, service de formulaire indisponible) et le visiteur doit pouvoir se rabattre sur le telephone ou le courriel plutot que de renvoyer dans le vide */ .form__err{ display:none; gap:12px; align-items:center; background:#FDECEC; color:#B3261E; border-radius:12px; padding:14px 16px; font-size:14px; font-weight:500; margin-bottom:14px; } .form__err.is-shown{display:flex} .form__err svg{width:20px; height:20px; flex:none} .form__err a{color:inherit; font-weight:600} /* Piege a robots. Le champ doit rester dans le DOM, sans etre ni visible ni atteignable par un visiteur : display:none et hidden sont les deux premiers marqueurs qu'un robot un peu serieux apprend a ignorer, on sort donc le champ du cadre. aria-hidden et tabindex="-1" le retirent du clavier et des lecteurs d'ecran, autocomplete="off" evite que le navigateur le remplisse tout seul. */ .form__trap{ position:absolute; left:-9999px; top:0; width:1px; height:1px; overflow:hidden; } /* ---------- 17. CTA ---------- */ .cta{ position:relative; overflow:hidden; background:var(--blue); color:#fff; padding-block:clamp(64px,8.5vw,124px); } .cta__inner{ position:relative; z-index:1; text-align:center; display:flex; flex-direction:column; align-items:center; gap:24px; } .cta h2{color:#fff} .cta__inner > p{max-width:62ch; color:rgba(255,255,255,.75); font-size:16px} .cta__actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:center} .cta__deco{position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.16); pointer-events:none} .cta__deco--1{width:520px; height:520px; top:-230px; left:-140px} .cta__deco--2{width:760px; height:760px; bottom:-450px; right:-180px} /* ---------- 18. Footer ---------- */ .footer{background:var(--ink); color:var(--white-60); padding-top:clamp(56px,6vw,84px); overflow:hidden} .footer__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px 32px; padding-bottom:48px} .footer h4{font-size:16px; color:#fff; margin-bottom:18px; letter-spacing:.08em} .footer__brand .logo-plate{margin-bottom:20px} .footer__brand .logo-plate img{height:52px} .footer__brand p{font-size:14.5px; max-width:34ch} .footer__links{display:grid; gap:11px; font-size:14.5px} .footer__links a{transition:color .2s} .footer__links a:hover{color:#fff} .footer__contact{display:grid; gap:12px; font-size:14.5px} .footer__contact a,.footer__contact div{display:flex; gap:11px; align-items:flex-start; transition:color .2s} .footer__contact a:hover{color:#fff} .footer__contact svg{width:16px; height:16px; color:var(--blue-light); flex:none; margin-top:4px} .footer__word{ font-family:var(--display); text-align:center; line-height:.8; font-size:clamp(56px,14.2vw,228px); color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.16); padding-bottom:.04em; user-select:none; white-space:nowrap; } .footer__bottom{ display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center; justify-content:space-between; border-top:1px solid var(--white-12); padding-block:22px; font-size:13px; } .footer__bottom nav{display:flex; flex-wrap:wrap; gap:8px 22px} .footer__bottom a:hover{color:#fff} /* ---------- 19. Bouton flottant + revelations ---------- */ .callfab{ position:fixed; right:18px; bottom:18px; z-index:55; display:none; align-items:center; gap:10px; background:var(--blue); color:#fff; padding:14px 20px; border-radius:var(--r-pill); font-size:14px; font-weight:600; box-shadow:var(--shadow-blue); } .callfab svg{width:16px; height:16px} [data-reveal]{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1)} [data-reveal].is-in{opacity:1; transform:none} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important} [data-reveal]{opacity:1; transform:none} html{scroll-behavior:auto} } /* ---------- 20. Responsive ---------- */ @media (max-width:900px){ /* mobile et petites tablettes : plus de 3D, les services s'empilent de haut en bas */ .svc-rail{ display:grid; grid-template-columns:1fr; gap:18px; position:static; height:auto; perspective:none; transform-style:flat; } .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:var(--blue); border-color:var(--blue)} .rail-nav{display:none} } @media (max-width:1100px){ .svc__body p{max-height:none; opacity:1} .partners__head{flex-direction:column; align-items:flex-start; gap:12px} .nav__links{display:none} .nav__burger{display:grid} .nav__tel{display:none} .hero__copy{max-width:100%} .hero__panel{grid-template-columns:1fr 1fr} .hero__cell:nth-child(3){border-left:0} .hero__cell:nth-child(n+3){border-top:1px solid rgba(255,255,255,.15)} .about__top,.why__grid,.faq__grid,.zone__grid,.contact__grid{grid-template-columns:1fr} .faq__side{position:static} .why__media img{height:auto; min-height:0; aspect-ratio:16/9} .footer__grid{grid-template-columns:1fr 1fr} .works__grid{grid-template-columns:1fr 1fr} .work,.work:nth-child(1),.work:nth-child(4){grid-column:span 1} .callfab{display:flex} /* Des que le bouton d'appel flottant apparait, il occupe le coin bas droit et recouvre le credit d'agence, qui terminait le pied de page de ce cote. Les trois blocs s'empilent donc a gauche : le credit garde sa place sous les mentions legales, mais hors de la zone du bouton. Plus fiable que de reserver de la hauteur sous le pied de page, le bouton etant en position fixed. Sur grand ecran il n'y a pas de bouton flottant, la ligne reste horizontale et le credit a droite. */ .footer__bottom{flex-direction:column; align-items:flex-start} .reviews__fade::before,.reviews__fade::after{width:6vw} } @media (max-width:820px){ /* sur mobile la barre ne garde que le message d'urgence : le telephone reste accessible dans la nav et via le bouton d'appel flottant */ .topbar__in{justify-content:center; padding-block:9px} .topbar__items{display:none} .topbar__note{font-size:12.5px; text-align:center} } @media (max-width:720px){ /* le chapeau du hero tient en trois lignes : la seconde phrase, qui detaille les garanties, est reprise plus bas dans la page (section "Pourquoi nous") */ .lead-more{display:none} html{scroll-padding-top:88px} .partners__rail::before, .partners__rail::after{width:26%} .partners__group img{height:32px} .partners__group img.is-square{height:46px} .why__items{grid-template-columns:1fr} .works__grid{grid-template-columns:1fr} .about__media{grid-template-columns:1fr} .about__media figure{aspect-ratio:16/10} .form__row{grid-template-columns:1fr} .footer__grid{grid-template-columns:1fr; gap:34px} .sec-head{align-items:flex-start} .hero{min-height:0} /* en portrait la photo est recadree bien plus serre : on decale le point de mire pour garder le couvreur dans le cadre */ .hero__bg::before{background-position:72% 50%} .hero h1 em{-webkit-text-stroke-width:1.4px} .hero__panel{grid-template-columns:1fr} .hero__cell{border-left:0} .hero__cell + .hero__cell{border-top:1px solid rgba(255,255,255,.15)} .cta__deco{display:none} } /* ---------- 21. Page de mentions legales ---------- */ /* En-tete sans photo : la page est administrative, une image de chantier n'y apporterait rien. Le fond noir de .phero et le halo suffisent a la rattacher au reste du site. */ .phero--nue{padding-bottom:clamp(34px,4vw,52px)} .legal{background:var(--cream)} .legal__in{max-width:78ch} /* deux niveaux : h2 pour les deux volets de la page, h3 pour leurs sections. Le filet sous le h2 marque la coupure entre mentions legales et politique de confidentialite sans avoir a scinder la page en deux. */ .legal h2{ font-size:clamp(28px,3vw,40px); margin-top:clamp(46px,5vw,72px); margin-bottom:22px; padding-bottom:14px; border-bottom:2px solid var(--ink-08); } .legal h3{ font-size:clamp(18px,1.6vw,21px); margin-top:clamp(28px,3vw,38px); margin-bottom:10px; } .legal__maj{font-size:13px; color:var(--ink-40); margin-bottom:0} .legal h2:first-of-type{margin-top:clamp(26px,3vw,36px)} .legal p{color:var(--ink-60); line-height:1.7; margin-bottom:14px} .legal a{color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:3px} /* liste de definitions : le libelle a gauche sur grand ecran, au-dessus des que la place manque, plutot qu'une colonne etroite qui casserait les adresses */ .legal dl{display:grid; grid-template-columns:minmax(190px,auto) 1fr; gap:10px 24px; margin:4px 0 6px} .legal dt{font-weight:600; color:var(--ink)} .legal dd{color:var(--ink-60); line-height:1.65} @media (max-width:640px){ .legal dl{grid-template-columns:1fr; gap:2px} .legal dt{margin-top:12px} } /* ---------- 22. Selecteur personnalise ---------- */ /* Le