/* --- Reveal under hero: hide content when at top, reveal with staggered animation on scroll --- */ body.at-top main > :not(.hero) { opacity: 0; transform: translateY(24px) scale(.995); filter: none; pointer-events: none; visibility: hidden; } main > :not(.hero) { /* default (visible) state — transitions apply when class is removed */ transition: opacity .46s cubic-bezier(.2,.9,.2,1), transform .46s cubic-bezier(.2,.9,.2,1); will-change: opacity, transform; opacity: 1; transform: none; filter: none; visibility: visible; /* stagger delay using --i set by JS */ transition-delay: calc(var(--i, 0) * 28ms); } /* Scroll FX (applied by JS on key blocks/cards) */ .scroll-fx{ opacity: 0; transform: translateY(40px) scale(.965) rotateX(7deg); transform-origin: 50% 100%; filter: none; transition: opacity .52s cubic-bezier(.2,.9,.2,1), transform .56s cubic-bezier(.16,.84,.24,1); transition-delay: calc(var(--fxi, 0) * 24ms); will-change: transform, opacity; } .scroll-fx.is-in{ opacity: 1; transform: translateY(0) scale(1) rotateX(0); filter: none; } /* Slight depth while scrolling in Home */ body:not(.at-top) .hero__text, body:not(.at-top) .hero__card{ transition: transform .24s ease-out; transform: translate3d(0, calc(var(--scroll-depth, 0) * -1px), 0); } body:not(.at-top) .hero__card{ transform: translate3d(0, calc(var(--scroll-depth, 0) * -1.35px), 0); } body.revealed main > :not(.hero) { opacity: 1; transform: none; filter: none; visibility: visible; } @media (max-width: 720px){ /* reduce stagger on small screens */ main > :not(.hero){ transition-delay: calc(var(--i,0) * 14ms); } } @media (prefers-reduced-motion: reduce){ body.at-top main > :not(.hero), main > :not(.hero){ transition: none !important; transform: none !important; opacity:1 !important; filter:none !important; visibility:visible !important; } .scroll-fx, .scroll-fx.is-in{ transition: none !important; transform: none !important; opacity: 1 !important; filter: none !important; } body:not(.at-top) .hero__text, body:not(.at-top) .hero__card{ transform: none !important; } .hero#home::before, .hero#home .hero__bg{ animation: none !important; transform: none !important; transition: none !important; } } /* Page transition between HTML pages */ body{ transition: transform .34s cubic-bezier(.22,.61,.36,1), opacity .28s ease; } body.page-enter{ opacity: .01; transform: translateX(46px); } body.page-enter-active{ opacity: 1; } body.page-enter-back{ opacity: .01; transform: translateX(-46px); } body.page-leave{ opacity: .01; transform: translateX(-40px); } body.page-leave-back{ opacity: .01; transform: translateX(90px); } @media (prefers-reduced-motion: reduce){ body, body.page-enter, body.page-enter-back, body.page-enter-active, body.page-leave, body.page-leave-back{ transition: none !important; transform: none !important; opacity: 1 !important; } } :root{ --page-scale: 1; --bg: #07090f; /* noir profond */ --panel: #0b1220; /* bleu-noir */ --panel2:#0a0f1b; --text:#f7f8fb; /* blanc */ --muted:#aab2c5; --line: rgba(255,255,255,.12); --accent:#0b3a7a; /* bleu foncé */ --accent2:#1162d4; /* bleu dynamique (hover) */ --shadow: 0 14px 40px rgba(0,0,0,.45); --radius: 18px; --radius2: 24px; --container: 1120px; } /* Thème clair (appliqué en ajoutant la classe `theme-light` sur le ) */ .theme-light{ --bg: #ffffff; --panel: #f7f8fb; --panel2: #f2f5f9; --text: #0b1220; --muted: #56606f; --line: rgba(0,0,0,.08); --accent: #0b3a7a; --accent2: #1162d4; } /* When light theme is active, remove dark overlays so background is pure white */ body.theme-light{ background: var(--bg); } body.theme-light .hero__bg{ background: linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.28)), url("../assets/Fond d'écran.png?v=20260226a"); background-size: cover; background-position: center top; background-repeat: no-repeat; background-blend-mode: multiply; filter: none; } body.theme-light .header{ background: rgba(95,176,255,.24); /* bleu clair du fond home */ border-bottom-color: rgba(95,176,255,.40); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } body.theme-light .footer{ background: transparent; } /* Make the 'Contact direct' card lighter in light theme */ body.theme-light .hero__card{ background: rgba(247,248,251,.78) !important; /* light gray with visible transparency */ border: 1px solid rgba(0,0,0,.06) !important; box-shadow: 0 10px 28px rgba(11,18,32,.04) !important; color: var(--text) !important; } /* Force text to dark colors when using the light theme */ body.theme-light, body.theme-light h1, body.theme-light h2, body.theme-light h3, body.theme-light h4, body.theme-light p, body.theme-light li, body.theme-light span{ color: var(--text) !important; } body.theme-light a{ color: var(--text) !important; } body.theme-light .brand__name{ color: var(--text) !important; } /* Wrap the header buttons in a black pill for the light theme */ body.theme-light .nav{ background: transparent; padding: 0; } body.theme-light .nav__list{ gap: 8px; } /* Small black end-caps on each nav button (left and right) */ body.theme-light .nav__link{ position: relative; color: #0b1220 !important; /* dark text on light background */ background: transparent !important; padding: 8px 16px; border-radius: 16px; /* match .btn radius */ border: 2px solid #000 !important; /* full black frame around button */ } body.theme-light .nav__link:hover{ background: rgba(11,58,122,.06) !important; color: var(--text) !important; } body.theme-light .dropdown__item, body.theme-light .footer__links a{ color: var(--text) !important; } body.theme-light .footer__legal a{ color: var(--muted) !important; } body.theme-light .nav__theme{ background: #0b1220 !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,.15) !important; border-radius: 12px; } body.theme-light .nav__phone{ background: #16a34a !important; color: #ffffff !important; border-color: transparent !important; } /* Dropdown adapts to theme: clair -> fond clair, sombre -> fond sombre */ body.theme-light .dropdown{ background: var(--panel) !important; border: 1px solid rgba(0,0,0,.06) !important; box-shadow: 0 10px 28px rgba(11,18,32,.04) !important; } body.theme-light .dropdown__item{ color: var(--text) !important; } body.theme-light .dropdown__item:hover{ background: rgba(17,98,212,.06) !important; transform: translateY(-1px); } /* Ensure chevron and link colors follow theme */ body.theme-light .nav__link, body.theme-light .nav__link:hover{ color: #0b1220 !important; } /* Make Contact CTA blue in light theme */ body.theme-light .nav__cta{ background: linear-gradient(135deg, rgba(17,98,212,1), rgba(11,58,122,1)) !important; color: #fff !important; border-color: rgba(17,98,212,1) !important; box-shadow: 0 8px 18px rgba(17,98,212,.12); } /* Ensure primary buttons remain white on light background */ body.theme-light a.btn--primary, body.theme-light button.btn--primary, body.theme-light .hero__actions a.btn--primary{ color: #ffffff !important; } /* Make gallery filter chips visible in light theme */ body.theme-light .chip{ background: rgba(255,255,255,0.96) !important; border: 1px solid rgba(11,18,32,.06) !important; color: var(--text) !important; box-shadow: 0 6px 18px rgba(11,18,32,.04); } body.theme-light .chip:hover{ transform: translateY(-1px); border-color: rgba(17,98,212,.25) !important; background: rgba(17,98,212,.06) !important; } body.theme-light .chip.is-active{ border-color: rgba(17,98,212,.45) !important; background: rgba(17,98,212,.10) !important; } *{box-sizing:border-box} html{ scroll-behavior:smooth; zoom: var(--page-scale); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body{ margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); background: var(--bg); line-height:1.55; } img{max-width:100%; display:block} a{color:inherit; text-decoration:none} /* policy link visible even when general links are unstyled */ .policy-link{ text-decoration: underline; font-weight:600; color: var(--accent2); } body.theme-light .policy-link{ color: var(--accent2); } p{margin:0 0 12px} h1,h2,h3,h4{margin:0 0 10px; line-height:1.12} h1{font-size: clamp(30px, 3.2vw, 48px); letter-spacing:-.02em} h2{font-size: clamp(24px, 2.4vw, 34px)} h3{font-size: 20px} h4{font-size: 16px; color: var(--text)} .muted{color:var(--muted)} .container{ width: min(var(--container), calc(100% - 40px)); margin-inline:auto; } .skip{ position:absolute; left:-999px; top:10px; background:var(--text); color:#000; padding:10px 12px; border-radius:10px; } .skip:focus{left:10px; z-index:9999} section[id] { scroll-margin-top: 72px; } .header{ position: sticky; top:0; z-index: 1000; backdrop-filter: blur(10px); background: rgba(95,176,255,.30); border-bottom: 1px solid rgba(95,176,255,.46); } body.at-top .header{ background: rgba(95,176,255,.42); border-bottom-color: rgba(95,176,255,.62); } .header .container{ width: min(var(--container), calc(100% - 40px)); } .header__inner{ display:flex; align-items:center; justify-content:space-between; padding: 0; gap: 10px; height: 72px; } .brand{ display:flex; align-items:center; gap:6px; min-width: 89px; justify-content: flex-start; order: 1; margin-left: -6px; overflow: hidden; height: 72px; } .nav{order:2; margin-left:auto} .brand__logo{ width:auto; height:72px; object-fit:contain; object-position: left center; border-radius: 0; background: transparent; border: 0; margin-right: 0; transform: none; display: block; } .brand__name{ font-weight:700; letter-spacing:-.01em; } .nav{display:flex; align-items:center; gap:12px} .nav__burger{ display:none; width:44px; height:44px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.04); cursor:pointer; } .nav__burger span{ display:block; height:2px; margin:7px 10px; background: rgba(255,255,255,.85); border-radius: 2px; transition: transform 0.22s ease, opacity 0.22s ease, background 0.18s ease; } /* Burger → X quand le menu est ouvert */ .nav__burger.is-open span:nth-child(1){ transform: translateY(9px) rotate(45deg); } .nav__burger.is-open span:nth-child(2){ opacity: 0; transform: scaleX(0); } .nav__burger.is-open span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); } /* Lignes burger visibles en thème clair */ body.theme-light .nav__burger span{ background: rgba(11,18,32,.85); } .nav__list{ display:flex; align-items:center; gap: 12px; list-style:none; padding:0; margin:0; } .nav__link{ display:inline-flex; align-items:center; gap:6px; padding: 8px 12px; font-size: 14px; border-radius: 14px; border: 1px solid transparent; transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease; color: rgba(255,255,255,.92); } .nav__link:hover{ background: rgba(17,98,212,.10); border-color: rgba(17,98,212,.25); color: #fff; transform: translateY(-1px); } .nav__cta{ background: linear-gradient(135deg, rgba(17,98,212,.95), rgba(11,58,122,.95)); border-color: rgba(255,255,255,.10); box-shadow: 0 10px 26px rgba(17,98,212,.18); } .nav__cta:hover{ background: linear-gradient(135deg, rgba(17,98,212,1), rgba(11,58,122,1)); border-color: rgba(255,255,255,.16); } /* Bouton bascule thème (placé dans la nav) */ .nav__theme{ display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 12px; background: #ffffff; border: 1px solid rgba(0,0,0,.2); color: #0b1220; font-size: 14px; cursor: pointer; flex-shrink: 0; } .nav__theme:hover{ filter: brightness(0.92); } /* Bouton appel téléphonique (nav) */ .nav__phone{ display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 12px; background: #16a34a; color: #ffffff !important; font-size: 13px; font-weight: 600; text-decoration: none !important; white-space: nowrap; line-height: 1; transition: filter .18s ease, transform .18s ease; } .nav__phone:hover{ filter: brightness(1.1); transform: translateY(-1px); } .nav__phone svg{ flex-shrink: 0; } .chev{opacity:.9} /* Notification formulaire (succès / erreur) */ .form-notif{ display: none; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; } .form-notif.is-visible{ display: flex; } .form-notif__success{ color: #16a34a !important; } .form-notif__error{ color: #dc2626 !important; } .form-notif__conseil{ color: #2563eb; text-decoration: underline; cursor: pointer; font-weight: 600; } .field-error{ display: none; color: #dc2626; font-size: 12px; margin-top: 4px; line-height: 1.4; } .field-error.is-visible{ display: block; } .input--invalid{ border-color: #dc2626 !important; } /* Dropdown */ .nav__dropdown{position:relative} .dropdown{ position:absolute; top: 48px; left: 0; min-width: 230px; padding: 10px; border-radius: 16px; background: rgba(11,18,32,.92); border: 1px solid var(--line); box-shadow: var(--shadow); display:none; } .dropdown__item{ display:block; padding: 10px 12px; border-radius: 12px; color: rgba(255,255,255,.92); transition: background .16s ease, transform .16s ease; } .dropdown__item:hover{ background: rgba(17,98,212,.12); transform: translateY(-1px); } .nav__dropdown:hover .dropdown, .nav__dropdown.is-open .dropdown{display:block} @keyframes subtleSheen{ 0% { transform: translateX(-140%); opacity: 0; } 20% { opacity: .22; } 100% { transform: translateX(140%); opacity: 0; } } /* HERO */ .hero{ position:relative; min-height: 90vh; padding: 0 0 90px; overflow:hidden; } .hero#home{ --home-progress: 0; --home-depth: 0; } .hero#home::before{ content:""; position:absolute; inset: -18% -8% auto -8%; height: 66%; z-index:0; pointer-events:none; background: radial-gradient(60% 55% at 50% 22%, rgba(17,98,212,.28), rgba(17,98,212,0)); opacity: calc(.30 + (var(--home-progress, 0) * .55)); transform: translateY(calc(var(--home-depth, 0) * -1px)); transition: opacity .24s ease-out, transform .24s ease-out; } .hero::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:8px; z-index:0; pointer-events:none; background: linear-gradient(145deg, rgba(4,10,20,.56), rgba(3,8,18,.68)), url("../assets/Fond d'écran.png?v=20260226a"); background-size: cover; background-position: center bottom; background-repeat: no-repeat; background-blend-mode: normal; } body.theme-light .hero::after{ background: linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.28)), url("../assets/Fond d'écran.png?v=20260226a"); background-size: cover; background-position: center bottom; background-repeat: no-repeat; background-blend-mode: multiply; } body.theme-light .hero + .section{ margin-top: -1px; } /* When user is at initial top state, push hero content slightly lower to match desired landing view */ /* (deprecated) previous padding-top approach removed to avoid layout jumps */ .hero__bg{ position:absolute; inset: 0 0 -4px 0; background: linear-gradient(145deg, rgba(4,10,20,.56), rgba(3,8,18,.68)), url("../assets/Fond d'écran.png?v=20260226a"); background-size: cover; background-position: center top; background-repeat: no-repeat; background-blend-mode: normal; filter: saturate(1.02) contrast(1.02); transform-origin: 50% 24%; transform: translate3d(0, calc(var(--home-depth, 0) * -1px), 0) scale(calc(1 + (var(--home-progress, 0) * .09))); transition: transform .22s linear, filter .26s ease-out; } .hero__content{ position:relative; z-index:1; display:grid; grid-template-columns: 1.3fr .9fr; gap: 22px; align-items: start; padding: 0 0 40px; margin-top: 0; transition: transform .28s ease; } /* Faire que la colonne gauche utilise tout l'espace et place le trust en bas */ .hero__text{ display: flex; flex-direction: column; justify-content: space-between; height: 100%; min-width: 0; } /* Faire que la carte de contact occupe toute la hauteur de la colonne et répartisse son contenu entre le haut et le bas */ .hero__card{ display: block; } .pill{ display:inline-flex; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(17,98,212,.25); background: rgba(17,98,212,.10); color: rgba(255,255,255,.92); font-weight: 600; margin-bottom: 12px; } /* When user is at initial top state, visually nudge hero content down without changing layout */ body.at-top .hero__content{ transform: translateY(80px); } .accent{color: rgba(17,98,212,.98)} .hero__subtitle{font-size: 16px; color: rgba(255,255,255,.88); max-width: 60ch} .hero__actions{display:flex; gap:10px; flex-wrap:wrap; margin: 16px 0 18px} .btn{ display:inline-flex; align-items:center; justify-content:center; padding: 12px 16px; border-radius: 16px; border: 1px solid transparent; cursor:pointer; font-weight: 700; letter-spacing: -.01em; transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; } .btn--primary{ position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(17,98,212,.95), rgba(11,58,122,.95)); border-color: rgba(255,255,255,.10); box-shadow: 0 14px 30px rgba(17,98,212,.16); color: #ffffff !important; } .btn--primary::after{ content: ""; position: absolute; top: 0; left: 0; width: 46%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent); transform: translateX(-140%); pointer-events: none; } .btn--primary:hover{transform: translateY(-1px); box-shadow: 0 18px 36px rgba(17,98,212,.20)} .btn--primary:hover::after{animation: subtleSheen .9s ease} .btn--primary:disabled{ opacity: 0.6; cursor: not-allowed; box-shadow: none; transform: none; } .btn--ghost{ background: rgba(255,255,255,.04); border-color: var(--line); } .btn--ghost:hover{transform: translateY(-1px); border-color: rgba(17,98,212,.25); background: rgba(17,98,212,.08)} .btn--full{width:100%} .trust{ display:flex; gap: 14px; flex-wrap:wrap; margin-top: 10px; } .trust__item{ display:flex; align-items:center; gap:10px; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--line); } .trust__big{font-size:18px} .trust__txt{font-weight:600; color: rgba(255,255,255,.90)} .hero__card{ padding: 12px; /* un peu plus compact */ max-width: 420px; /* limiter la largeur pour réduire visuellement la carte */ width: 100%; justify-self: end; border-radius: var(--radius2); background: rgba(11,18,32,.58); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .mini{display:grid; gap:10px; margin: 14px 0 14px} .mini__row{ display:flex; gap:10px; align-items:center; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); } .mini__row:hover{border-color: rgba(17,98,212,.25); background: rgba(17,98,212,.08)} .mini__note{color: var(--muted); font-size: 13px; margin-top: 10px} /* SECTIONS */ .section{padding: 52px 0} /* Section de sous-page (espace sous le header sticky) */ .section--page{ padding: 88px 0; } .section--alt{background: rgba(255,255,255,.02); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line)} .section__head{display:flex; align-items:flex-end; justify-content:space-between; gap: 14px; margin-bottom: 18px} .section__head p{max-width: 70ch} #marques .container{ width: 100%; max-width: 100%; margin: 0; padding-left: 0; padding-right: 0; } #marques{ width: calc(100dvw / var(--page-scale)); margin-left: calc(50% - (50dvw / var(--page-scale))); margin-right: calc(50% - (50dvw / var(--page-scale))); padding-left: 0; padding-right: 0; } #marques .section__head{ justify-content: center; align-items: center; text-align: center; } #marques .section__head h2{ width: 100%; text-align: center; } .brands-marquee{ overflow: hidden; width: 100%; margin-left: 0; margin-right: 0; } .brands-track{ display: flex; width: max-content; animation: brandsLoop 22s linear infinite; will-change: transform; } .brands-set{ display:flex; flex: 0 0 auto; min-width: 0; width: max-content; gap:2.5mm; padding: 0; justify-content: flex-start; } .brands-set img{ width: 180px; height: 180px; flex: 0 0 auto; object-fit: contain; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.04); padding: 10px; } @keyframes brandsLoop{ from { transform: translateX(0); } to { transform: translateX(-50%); } } .brands-marquee:hover .brands-track{animation-play-state: paused} @media (prefers-reduced-motion: reduce){ .brands-track{animation: none !important} } /* CARDS */ .cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .section#activites .cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .card{ position: relative; display: flex; flex-direction: column; border-radius: var(--radius2); border: 1px solid var(--line); overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.30); transition: transform .20s ease, border-color .20s ease, filter .20s ease; height: 280px; min-height: 280px; } .section#activites .card{ aspect-ratio: 4 / 3; height: auto; min-height: 0; border-radius: 22px; background: transparent; } .card:hover{ transform: translateY(-3px); border-color: rgba(17,98,212,.25); filter: brightness(1.08); } .card img{ position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform .5s ease; } .section#activites .card img{ position: static; width: 100%; height: 100%; z-index: auto; } .card:hover img{transform: scale(1.05)} .card::before{ content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 60%, rgba(0,0,0,.8) 100%); z-index: 2; } .section#activites .card::before{display:none} .card__body{ position: absolute; bottom: 0; left: 0; right: 0; padding: 18px; z-index: 3; color: #fff; } .section#activites .card__body{ display: none; } .card__body h3{ color: #fff; font-weight: 700; margin-bottom: 6px; } .card__body p{ color: rgba(255,255,255,.9); font-size: 13px; line-height: 1.4; } .card__link{ display: inline-block; margin-top: 8px; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; } body.theme-light .section#activites .card{border-color: rgba(11,18,32,.08)} /* PRESENTATION */ .split{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 16px; align-items:start; } .checklist{list-style:none; padding:0; margin: 12px 0 14px} .checklist li{margin: 8px 0; padding-left: 2px} .badge-row{display:flex; gap:8px; flex-wrap:wrap; margin-top: 10px} .badge{ padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: rgba(255,255,255,.92); font-weight: 700; font-size: 13px; } .panel{ padding: 16px; border-radius: var(--radius2); border: 1px solid var(--line); background: rgba(11,18,32,.55); box-shadow: var(--shadow); color: var(--text); } .panel__item{padding: 12px; border-radius: 16px; background: rgba(11,18,32,.25); border: 1px solid var(--line); margin-top: 10px} /* Light theme overrides for "Pourquoi les clients nous choisissent" panel */ body.theme-light .panel{ background: #f7f8fb; color: #0b1220; border-color: rgba(11,18,32,.06); box-shadow: 0 8px 24px rgba(11,18,32,.04); } body.theme-light .panel__item{background: #ffffff; border-color: rgba(11,18,32,.06)} /* SERVICES */ .service{ padding: 18px; border-radius: var(--radius2); border: 1px solid var(--line); background: rgba(255,255,255,.03); margin-top: 14px; } .service__head{display:flex; align-items:baseline; justify-content:space-between; gap: 10px; flex-wrap:wrap} .service__grid{ margin-top: 12px; display:grid; grid-template-columns: 1fr 1fr; gap: 12px; } .service__box{ padding: 14px; border-radius: 18px; border: 1px solid var(--line); background: rgba(11,18,32,.55); } body.theme-light .service{ background: #f1f3f6; border-color: rgba(11,18,32,.12); color: #0b1220; } body.theme-light .service__box{ background: #e7ebf1; border-color: rgba(11,18,32,.12); color: #0b1220; } .bullets{margin: 10px 0 0; padding-left: 18px} .bullets li{margin: 6px 0} .service__seo{ margin-top: 18px; padding: 18px; border-radius: var(--radius2); border: 1px solid var(--line); background: rgba(11,18,32,.45); box-shadow: 0 10px 26px rgba(0,0,0,.10); } .service__seo h2{ margin-bottom: 12px; font-size: clamp(22px, 2vw, 30px); } .service__seo p{ color: var(--muted); max-width: 92ch; } .service__seo p:last-child{ margin-bottom: 0; } body.theme-light .service__seo{ background: #ffffff; border-color: rgba(11,18,32,.08); box-shadow: 0 8px 24px rgba(11,18,32,.04); } /* GALLERY */ .filters{display:flex; gap:8px; flex-wrap:wrap; margin: 8px 0 16px} .chip{ padding: 9px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: rgba(255,255,255,.92); font-weight: 800; cursor:pointer; transition: background .16s ease, border-color .16s ease, transform .16s ease; } .chip:hover{transform: translateY(-1px); border-color: rgba(17,98,212,.25); background: rgba(17,98,212,.08)} .chip.is-active{border-color: rgba(17,98,212,.45); background: rgba(17,98,212,.12)} /* FAQ */ .breadcrumb{ display:flex; align-items:center; gap: 8px; flex-wrap:wrap; margin-bottom: 16px; color: var(--muted); font-size: 14px; } .breadcrumb a{ color: var(--accent2); font-weight: 700; text-decoration: none; } .breadcrumb a:hover{text-decoration: underline} .faq-section .section__head{align-items:flex-start} .faq-tabs{ display:flex; gap: 8px; flex-wrap:wrap; justify-content:flex-end; max-width: 620px; } .faq-tab{ min-height: 42px; padding: 9px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text); cursor:pointer; font-weight: 700; transition: transform .18s ease, background .18s ease, border-color .18s ease; } .faq-tab:hover{ transform: translateY(-1px); border-color: rgba(17,98,212,.25); background: rgba(17,98,212,.08); } .faq-tab.is-active{ border-color: rgba(17,98,212,.45); background: rgba(17,98,212,.12); } .faq-group{display:none} .faq-group.is-active{display:block} .faq-group h3{margin-bottom: 14px} .faq-list{ display:grid; gap: 10px; } .faq-item{ border: 1px solid var(--line); border-radius: 16px; background: rgba(11,18,32,.55); box-shadow: 0 10px 26px rgba(0,0,0,.12); overflow:hidden; } .faq-item summary{ position:relative; list-style:none; cursor:pointer; padding: 16px 48px 16px 16px; font-weight: 800; line-height: 1.35; } .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{ content:"+"; position:absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; display:grid; place-items:center; background: rgba(17,98,212,.12); color: var(--accent2); font-size: 20px; line-height: 1; } .faq-item[open] summary::after{content:"-"} .faq-item p{ margin: 0; padding: 0 16px 16px; color: var(--muted); } body.theme-light .faq-tab{ background: #ffffff; color: #0b1220; border-color: rgba(11,18,32,.08); box-shadow: 0 6px 18px rgba(11,18,32,.04); } body.theme-light .faq-tab:hover{background: rgba(17,98,212,.06)} body.theme-light .faq-tab.is-active{ background: rgba(17,98,212,.10); border-color: rgba(17,98,212,.35); } body.theme-light .faq-item{ background: #ffffff; border-color: rgba(11,18,32,.08); box-shadow: 0 8px 24px rgba(11,18,32,.04); } .gallery{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .travaux-mobile{ display:none; } #travaux .gallery{ position: relative; max-height: 574px; overflow-y: auto; padding-right: 6px; } #travaux .gallery::before, #travaux .gallery::after{ content: ""; position: sticky; left: 0; right: 6px; z-index: 2; height: 72px; pointer-events: none; grid-column: 1 / -1; opacity: 0; transition: opacity .18s ease; } #travaux .gallery.has-scroll-top::before, #travaux .gallery.has-scroll-bottom::after{opacity: 1} #travaux .gallery::before{ top: 0; margin-bottom: -72px; background: linear-gradient(to bottom, #fff, rgba(255,255,255,0)); } #travaux .gallery::after{ bottom: 0; margin-top: -72px; background: linear-gradient(to top, #fff, rgba(255,255,255,0)); } @keyframes galleryCardIn{ from{ opacity: 0; transform: translateY(16px) scale(.985); } to{ opacity: 1; transform: translateY(0) scale(1); } } .shot{ margin:0; border-radius: var(--radius2); overflow:hidden; border: 1px solid var(--line); background: rgba(255,255,255,.03); cursor:pointer; transition: transform .20s ease, border-color .20s ease; animation: galleryCardIn .45s ease both; } .gallery .shot:nth-child(1){animation-delay: .03s} .gallery .shot:nth-child(2){animation-delay: .06s} .gallery .shot:nth-child(3){animation-delay: .09s} .gallery .shot:nth-child(4){animation-delay: .12s} .gallery .shot:nth-child(5){animation-delay: .15s} .gallery .shot:nth-child(6){animation-delay: .18s} .shot:hover{transform: translateY(-2px); border-color: rgba(17,98,212,.25)} .shot img{height: 220px; width:100%; object-fit:cover; transition: transform .45s ease} .shot:hover img{transform: scale(1.04)} .shot figcaption{padding: 12px} .shot figcaption strong{display:block} .shot figcaption span{display:block; margin-top: 4px} @media (prefers-reduced-motion: reduce){ .hero__card, .btn--primary::after, .card img, .shot, .shot img{ animation: none !important; transition: none !important; transform: none !important; } } /* REVIEWS + FORMS */ .reviews{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 14px; align-items:start; } .reviews__list{ display:grid; gap: 10px; /* make the reviews list independently scrollable (vertical) with a max height */ max-height: 520px; overflow-y: auto; padding-right: 8px; /* avoid content hidden behind scrollbar */ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; scroll-behavior: smooth; scroll-snap-type: y proximity; mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); } .reviews__list::-webkit-scrollbar{ width:10px } .reviews__list::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); border-radius: 999px; } .reviews__list::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, rgba(17,98,212,.85), rgba(11,58,122,.9)); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .review{scroll-snap-align: start} @media (max-width: 980px){ /* on smaller screens use natural flow (no inner scrolling) */ .reviews__list{ max-height: none; overflow: visible; padding-right: 0; } } /* Keep "Avis clients" in 2 columns on tablet/desktop */ @media (max-width: 980px) and (min-width: 721px){ #avis .reviews{grid-template-columns: 1.1fr .9fr} #avis .reviews__list{max-height: 520px; overflow-y: auto; padding-right: 8px} } @media (max-width: 720px){ .reviews{ grid-template-columns: 1fr; } /* Avis sur mobile : on voit un avis + un aperçu du suivant, et on scrolle pour la suite */ /* max-height est calculé en JS (taille du 1er avis + un petit aperçu) */ .reviews__list{ overflow-y: auto; padding-right: 0; scroll-snap-type: y proximity; scroll-behavior: smooth; mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 28px), transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 28px), transparent 100%); } .review{ scroll-snap-align: start; } } .review{ padding: 14px; border-radius: var(--radius2); border: 1px solid var(--line); background: rgba(11,18,32,.25); color: var(--text); } .review__top{display:flex; align-items:center; justify-content:space-between; gap: 10px} .review__name{font-weight: 800; color: var(--text);} .review__date{color: rgba(255,255,255,.6); font-size: 13px} .review__stars{letter-spacing: 1px; color: #ffc107} .review__comment{margin-top: 8px; color: var(--text)} /* Light theme overrides for review cards */ body.theme-light .review{ background: #f7f8fb; color: #0b1220; border-color: rgba(11,18,32,.06); } body.theme-light .review__name{color: #0b1220;} body.theme-light .review__date{color: #56606f;} body.theme-light .review__comment{color: #0b1220} .form{ padding: 16px; border-radius: var(--radius2); border: 1px solid var(--line); background: rgba(11,18,32,.72); box-shadow: 0 14px 40px rgba(0,0,0,.35); } label{display:block; font-weight: 700; margin-top: 10px} input, textarea, select{ width:100%; margin-top: 6px; padding: 12px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: var(--text); outline:none; } input:focus, textarea:focus, select:focus{ border-color: rgba(17,98,212,.40); box-shadow: 0 0 0 4px rgba(17,98,212,.12); } .form__note{color: var(--muted); font-size: 13px; margin-top: 10px} .grid2{display:grid; grid-template-columns: 1fr 1fr; gap: 10px} /* Stars widget */ .stars{display:flex; gap:8px; margin-top: 8px} .star{ width: auto; height: auto; padding: 0; border: none; background: transparent; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size: 32px; line-height: 1; transition: transform .16s ease, color .16s ease; } .star:hover{transform: scale(1.08)} .star.is-on{color: #ffc107} /* default star color: light theme vs dark theme */ .star{ color: rgba(255,255,255,.45); } body.theme-light .star{ color: rgba(11,18,32,.42); } body.theme-light .star.is-on{ color: #ffc107; } /* "Laisser un avis" form - dark by default, light on theme-light */ .reviews .form{ background: rgba(11,18,32,.55); color: var(--text); border-color: var(--line); box-shadow: var(--shadow); } .reviews .form input, .reviews .form textarea, .reviews .form select{ background: rgba(11,18,32,.25); color: var(--text); border: 1px solid var(--line); } .reviews .form label{color: var(--text)} body.theme-light .reviews .form{ background: #f7f8fb; color: #0b1220; border-color: rgba(11,18,32,.06); box-shadow: 0 8px 24px rgba(11,18,32,.04); } body.theme-light .reviews .form input, body.theme-light .reviews .form textarea, body.theme-light .reviews .form select{ background: #ffffff; color: #0b1220; border: 1px solid rgba(11,18,32,.08); } body.theme-light .reviews .form label{color: #0b1220} .hero-contact-form{ display:flex; flex-direction:column; gap:8px; height:auto; } .hero-contact-form label{display:block; font-weight:700; font-size:11px; color:var(--text); margin-bottom:1px} .hero-contact-form input, .hero-contact-form select{ width:100%; padding:5px 7px; border-radius:8px; border:1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.03); color: var(--text); font-size:12px; outline:none; box-shadow: inset 0 1px 0 rgba(0,0,0,.06); } .hero-contact-form input::placeholder{ color: rgba(255,255,255,.5); font-size:11px } .hero-contact-form .btn{ padding:5px 10px; font-size:12px; font-weight:600; color: #ffffff; } body.theme-light .hero-contact-form label{ color: #0b1220 } body.theme-light .hero-contact-form input, body.theme-light .hero-contact-form select{ background: #ffffff; color: #0b1220; border:1px solid rgba(11,18,32,.08); box-shadow: inset 0 1px 0 rgba(0,0,0,.02); } @media (max-width: 720px){ .hero-contact-form input, .hero-contact-form select{ font-size:16px; padding:10px } .hero-contact-form label{ font-size:13px; } .hero-contact-form .btn{ font-size:15px; padding:10px 14px; } } /* CONTACT */ .contact{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 14px; align-items:stretch; } #contact .contact #contactForm{order:1} #contact .contact .contact__info{order:2} .contact__info .infoCard{ padding: 30px; border-radius: var(--radius2); border: 1px solid var(--line); background: linear-gradient(160deg, rgba(255,255,255,.34) 0%, rgba(22,32,52,.88) 40%, rgba(0,0,0,1) 100%); box-shadow: 0 16px 38px rgba(0,0,0,.32); position: relative; overflow: hidden; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .contact__info .infoCard::before{ content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px 140px at -10% -10%, rgba(17,98,212,.22), transparent 60%); } /* Make the form inside the contact section fill the column height so both columns match */ .contact .form{ height: 100%; display: flex; flex-direction: column; justify-content: space-between; background: rgba(11,18,32,.55); padding: 20px; border-radius: var(--radius2); color: var(--text); } .contact .form input, .contact .form select, .contact .form textarea{ color: var(--text); background: rgba(11,18,32,.25); border: 1px solid var(--line); } .contact .form .btn{ color: #fff; } /* Light theme overrides for contact form */ body.theme-light .contact .form{ background: #f2f4f7; color: #0b1220; } body.theme-light .contact .form input, body.theme-light .contact .form select, body.theme-light .contact .form textarea{ color: #0b1220; background: #ffffff; border: 1px solid rgba(11,18,32,.06); } /* Make the message label expand so the textarea fills remaining space */ .contact .form label:last-of-type{ display: flex; flex-direction: column; flex: 1 1 auto; } .contact .form label:last-of-type textarea{ flex: 1 1 auto; min-height: 160px; resize: vertical; } .contact__info .infoCard h3{ font-size: 15px; margin-bottom: 6px; } .contact__info .infoCard p{ font-size: 13px; margin-bottom: 8px; } .infoCard__rows{display:flex; flex-direction:column; gap: 12px; margin-top: 0} .infoCard__rows > div{ display:flex; gap:6px; align-items:center; flex-direction:row; flex-wrap:wrap; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.03); } .infoCard__rows > div:first-child{justify-content:center} .infoCard__rows > div{ background: #000000 !important; border: 1px solid rgba(255,255,255,.14) !important; } .infoCard__rows > div, .infoCard__rows > div strong, .infoCard__rows > div a{ color: #ffffff !important; } .infoCard__rows a{text-decoration:none; font-weight:400} .infoCard__rows strong{font-size: 14px; display:block} .coord-brand{ display:flex; align-items:center; justify-content:center; gap: 6px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; flex: 1 1 260px; min-height: 34px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(160deg, rgba(255,255,255,.34) 0%, rgba(22,32,52,.88) 40%, rgba(0,0,0,1) 100%); box-shadow: 0 6px 16px rgba(0,0,0,.20); color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,.45); } .coord-brand__accent{ color: #ffffff; font-weight: 900; font-size: 1.12em; line-height: 1; } body.theme-light .coord-brand{ border-color: rgba(11,18,32,.10); background: linear-gradient(160deg, #ffffff 0%, #eef3fa 40%, #cfd8e6 100%); box-shadow: 0 6px 16px rgba(11,18,32,.08); color: #0b1220; } .map{ margin-top: 14px; border-radius: var(--radius2); overflow:hidden; border: 1px solid var(--line); box-shadow: 0 12px 28px rgba(0,0,0,.25); } .map iframe{width:100%; height: 260px; border:0} .map iframe{height: 340px} body.theme-light .contact__info .infoCard{ background: linear-gradient(160deg, #ffffff 0%, #eef3fa 40%, #cfd8e6 100%); border-color: rgba(11,18,32,.08); box-shadow: 0 12px 26px rgba(11,18,32,.08); color: #0b1220; } body.theme-light .contact__info .infoCard::before{ background: radial-gradient(420px 140px at -10% -10%, rgba(17,98,212,.14), transparent 60%); } body.theme-light .infoCard__rows > div{ background: #ffffff !important; border-color: rgba(11,18,32,.08) !important; } body.theme-light .infoCard__rows > div, body.theme-light .infoCard__rows > div strong, body.theme-light .infoCard__rows > div a, body.theme-light .coord-brand__accent{ color: #0b1220 !important; } /* MODAL */ @keyframes modal-zoom-in{ from{ opacity:0; transform:scale(.72) translateY(18px); } to{ opacity:1; transform:scale(1) translateY(0); } } @keyframes modal-zoom-out{ from{ opacity:1; transform:scale(1) translateY(0); } to{ opacity:0; transform:scale(.72) translateY(18px); } } @keyframes backdrop-in{ from{ opacity:0; } to{ opacity:1; } } @keyframes backdrop-out{ from{ opacity:1; } to{ opacity:0; } } .modal{ width: min(920px, calc(100% - 30px)); border: 1px solid var(--line); border-radius: var(--radius2); background: rgba(11,18,32,.94); color: var(--text); padding: 12px; box-shadow: var(--shadow); animation: modal-zoom-in .32s cubic-bezier(.16,1,.3,1) forwards; } .modal.is-closing{ animation: modal-zoom-out .22s cubic-bezier(.4,0,1,1) forwards; } .modal::backdrop{ background: rgba(0,0,0,.60); animation: backdrop-in .25s ease forwards; } .modal.is-closing::backdrop{ animation: backdrop-out .22s ease forwards; } .modal img{ width:100%; height: auto; border-radius: 18px; border: 1px solid var(--line); } .modal__caption{padding: 10px 6px; color: var(--muted)} .modal__close{ position:absolute; top: 10px; right: 10px; width:44px; height:44px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--text); cursor:pointer; } /* Override: transform dark panels to light-gray cards (only on white background sections) */ .dropdown{ background: rgba(11,18,32,.92); color: var(--text); border-color: var(--line); box-shadow: var(--shadow); } .hero__card{ background: rgba(11,18,32,.58); color: var(--text); border-color: var(--line); box-shadow: var(--shadow); } .service__box{ background: rgba(11,18,32,.55); color: var(--text); border-color: var(--line); } .infoCard{ padding: 16px; border-radius: var(--radius2); border: 1px solid var(--line); background: rgba(255,255,255,.03); } .modal{ background: rgba(11,18,32,.94); color: var(--text); border-color: var(--line); box-shadow: var(--shadow); } /* Keep the presentation "Pourquoi les clients nous choisissent" panel dark (no override for .panel) Also avoid changing the review form styles inside #avis */ /* FOOTER */ .footer{ border-top: 1px solid var(--line); padding: 24px 0 18px; background: rgba(0,0,0,.18); } .footer__inner{ display:flex; justify-content:space-between; align-items:flex-start; gap: 14px; flex-wrap:wrap; } .footer__links{display:flex; gap: 12px; flex-wrap:wrap} .footer__links a{color: rgba(255,255,255,.90)} .footer__links a:hover{color: rgba(17,98,212,.98)} .footer__bottom{ padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; } .footer__legal{display:flex; gap: 16px; flex-wrap:wrap;} .footer__legal a{color: rgba(255,255,255,.65); font-size: .8rem; text-decoration:none;} .footer__legal a:hover{color: rgba(17,98,212,.98);} /* RESPONSIVE */ @media (max-width: 980px){ .hero__content{grid-template-columns: 1.2fr .8fr; padding: 30px 0} .split{grid-template-columns: 1fr} .cards{grid-template-columns: 1fr} .gallery{grid-template-columns: 1fr 1fr} .reviews{grid-template-columns: 1fr} .contact{grid-template-columns: 1fr} .brand__name{display:none} .brand{min-width: 180px} .brand__logo{width:auto; height:72px; transform: none} } /* Keep Contact layout as form left / coordinates right on tablet/desktop */ @media (max-width: 980px) and (min-width: 721px){ #contact .contact{grid-template-columns: 1.1fr .9fr} #contact .contact #contactForm{order:1} #contact .contact .contact__info{order:2} } /* Keep "Présentation" layout as text left / panel right on tablet widths */ @media (max-width: 980px) and (min-width: 721px){ .section[aria-label="Présentation"] .split{grid-template-columns: 1.2fr .8fr} } /* Consent checkbox styling */ .consent-check{ margin-top:12px; font-size:12px; } .consent-check label{ display:flex; align-items:flex-start; justify-content:flex-start; gap:8px; cursor:pointer; } .consent-check input[type="checkbox"]{ width:16px; height:16px; margin:2px 0 0; align-self:flex-start; flex:0 0 auto; cursor:pointer; } .consent-check span{ line-height:1.4; cursor:pointer; } /* Make disabled inputs visible */ input:disabled, textarea:disabled, select:disabled{ opacity:0.6; background: rgba(255,255,255,.02) !important; } @media (max-width: 720px){ /* ── LAYOUT ── */ .hero__content{grid-template-columns: 1fr} .hero__card{justify-self: stretch; max-width: none} /* Hero : hauteur libre + décalage initial réduit */ .hero{ min-height: auto; padding-bottom: 56px; } body.at-top .hero__content{ transform: translateY(30px); } /* Pill hero : retour à la ligne sur petit écran */ .pill{ font-size: 12px; white-space: normal; line-height: 1.5; max-width: 100%; } /* Boutons hero : pleine largeur, empilés */ .hero__actions{ flex-direction: column; } .hero__actions .btn{ width: 100%; justify-content: center; } /* En-têtes de section : colonne sur mobile */ .section__head{ flex-direction: column; align-items: flex-start; gap: 8px; } /* Grille de service : une seule colonne */ .service__grid{ grid-template-columns: 1fr; } /* Padding réduit pour les sections */ .section{ padding: 36px 0; } .section--page{ padding: 64px 0 40px; } /* Galerie : 1 colonne par défaut + 2 pour Travaux */ .gallery{grid-template-columns: 1fr} #travaux .gallery{ grid-template-columns: repeat(2, 1fr); } #travaux .gallery{ max-height: 424px; } /* Photos de galerie : moins hautes sur mobile */ .shot img{ height: 160px; } /* Logos marques : taille réduite */ .brands-set img{ width: 100px; height: 100px; } /* Grille 2 colonnes → 1 colonne */ .grid2{grid-template-columns: 1fr} /* ── FORMULAIRES ── */ /* Prévenir le zoom iOS : police ≥ 16px obligatoire */ input, textarea, select{ font-size: 16px; } /* Notification : autorise le retour à la ligne */ .form-notif{ white-space: normal; flex-wrap: wrap; } /* ── NAVIGATION ── */ /* Barre du haut toujours visible sur mobile, même en bas de page */ body.page-home .header{ position: fixed; top: 0; left: 0; right: 0; } body.page-home main{ padding-top: calc(64px + env(safe-area-inset-top)); } .nav__burger{display:block} .nav__list{ position: absolute; right: 12px; top: 68px; flex-direction: column; align-items: stretch; width: min(320px, calc(100% - 24px)); padding: 10px; border-radius: 18px; border: 1px solid var(--line); background: rgba(11,18,32,.96); box-shadow: var(--shadow); display:none; z-index: 999; } .nav__list.is-open{display:flex} /* Liens nav : cible tactile agrandie */ .nav__list .nav__link{ padding: 12px 16px; border: none !important; } .nav__dropdown:hover .dropdown{display:none} .dropdown{position:static; display:none; border:none; box-shadow:none; background: transparent; padding: 0; margin-left: 8px} .nav__dropdown.is-open .dropdown{display:block} .dropdown__item{ border: 1px solid var(--line); background: rgba(255,255,255,.03); margin-top: 8px; padding: 12px 16px; } /* ── CIBLES TACTILES ── */ .btn{ min-height: 44px; } .chip{ min-height: 44px; display: inline-flex; align-items: center; } /* ── MARQUE / LOGO ── */ .brand{min-width: 200px; overflow: visible} .brand__logo{width:auto; height:72px; transform: none} /* ── MENU EN THÈME CLAIR ── */ body.theme-light .nav__list{ background: rgba(255,255,255,.97) !important; border-color: rgba(11,18,32,.10) !important; box-shadow: 0 10px 30px rgba(11,18,32,.10); } body.theme-light .nav__list .nav__link{ color: #0b1220 !important; background: transparent !important; border: none !important; } body.theme-light .nav__list .nav__link:hover{ background: rgba(17,98,212,.08) !important; } body.theme-light .nav__list .nav__cta{ background: linear-gradient(135deg, rgba(17,98,212,1), rgba(11,58,122,1)) !important; color: #fff !important; border-color: transparent !important; } .nav__list .nav__phone{ padding: 12px 16px; border-radius: 10px; justify-content: center; } body.theme-light .nav__list .nav__phone{ background: #16a34a !important; color: #fff !important; } body.theme-light .dropdown__item{ background: rgba(11,18,32,.04) !important; border-color: rgba(11,18,32,.08) !important; color: #0b1220 !important; } } /* Texte non-wrap désactivable sur mobile */ .no-wrap{ white-space: nowrap; } @media (max-width: 720px){ .no-wrap{ white-space: normal; } } /* Cartes activités : 1 colonne, juste la photo sur mobile (pas de texte ni d'overlay) */ @media (max-width: 720px){ .section#activites .cards{ grid-template-columns: 1fr; } .section#activites .card{ height: 220px; aspect-ratio: auto; } .section#activites .card img{ position: absolute; height: 100%; z-index: 1; } .section#activites .card::before{ display: none; } .section#activites .card__body{ display: none; } } /* Travaux réalisés : 3 colonnes sur tablette et desktop */ @media (min-width: 721px){ #travaux .gallery{ grid-template-columns: repeat(3, 1fr); } } /* ── Bouton flottant WhatsApp ── */ .whatsapp-fab{ position: fixed; bottom: 24px; right: 24px; z-index: 9000; display: flex; align-items: center; gap: 10px; text-decoration: none !important; } .whatsapp-fab__icon{ display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #25d366; box-shadow: 0 4px 20px rgba(37,211,102,.45); flex-shrink: 0; transition: transform .22s ease, box-shadow .22s ease; } .whatsapp-fab__icon svg{ width: 30px; height: 30px; fill: #ffffff; } .whatsapp-fab__label{ background: #25d366; color: #ffffff !important; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; max-width: 0; border-radius: 20px; height: 44px; line-height: 44px; padding: 0; box-shadow: 0 4px 16px rgba(37,211,102,.35); transition: max-width .4s cubic-bezier(.4,0,.2,1), padding .4s cubic-bezier(.4,0,.2,1); } .whatsapp-fab:hover .whatsapp-fab__label, .whatsapp-fab:focus-visible .whatsapp-fab__label{ max-width: 260px; padding: 0 18px; } .whatsapp-fab:hover .whatsapp-fab__icon, .whatsapp-fab:focus-visible .whatsapp-fab__icon{ transform: scale(1.08); box-shadow: 0 6px 30px rgba(37,211,102,.55); } /* Mobile polish: final overrides shared by all pages */ @media (max-width: 720px){ html, body{ width: 100%; max-width: 100%; overflow-x: hidden; } body{ font-size: 15px; padding-bottom: env(safe-area-inset-bottom); } h1{ font-size: clamp(28px, 9vw, 38px); letter-spacing: 0; } h2{ font-size: clamp(23px, 7vw, 30px); } h3{ font-size: 18px; } .container, .header .container{ width: min(100% - 28px, var(--container)); } .header__inner{ height: 64px; gap: 8px; } .brand{ min-width: 0; max-width: calc(100% - 58px); height: 64px; margin-left: 34px; align-items: center; overflow: visible; } .brand__logo{ height: 58px; max-width: 168px; margin: auto 0; } .nav{ flex: 0 0 auto; margin-left: auto; } .nav__burger{ width: 46px; height: 46px; border-radius: 13px; } .nav__list{ position: fixed; top: calc(64px + env(safe-area-inset-top)); left: 12px; right: 12px; width: auto; max-height: calc(100dvh - 82px); overflow-y: auto; overscroll-behavior: contain; padding: 12px; border-radius: 16px; } .nav__list li, .nav__list .nav__link, .nav__list .nav__phone, .nav__list .nav__theme{ width: 100%; } .nav__list .nav__link, .nav__list .nav__phone{ justify-content: center; min-height: 46px; text-align: center; } .nav__list .nav__theme{ min-height: 44px; } .dropdown{ margin: 6px 0 0; } .dropdown__item{ text-align: center; } section[id]{ scroll-margin-top: 76px; } body.at-top main > :not(.hero){ opacity: 1; transform: none; pointer-events: auto; visibility: visible; } .hero{ min-height: auto; padding: 18px 0 42px; } .hero__content{ gap: 18px; padding: 18px 0 20px; } body.at-top .hero__content{ transform: none; } .hero__subtitle{ font-size: 15px; max-width: none; } .trust{ display: grid; grid-template-columns: 1fr; gap: 8px; } .trust__item{ width: 100%; justify-content: center; text-align: center; } .hero__card, .form, .contact .form, .contact__info .infoCard, .panel, .service__box, .review{ border-radius: 16px; } .hero__card, .contact .form, .contact__info .infoCard, .panel{ padding: 16px; } .hero-contact-form{ gap: 10px; } .hero-contact-form label[style], .consent-check label[style]{ display: flex !important; align-items: flex-start !important; } .hero-contact-form label[style] span, .consent-check span{ font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; } .section{ padding: 34px 0; } .section--page{ padding: 38px 0 34px; } .section__head{ margin-bottom: 14px; } .cards, .service__grid, .split, .reviews, .contact{ grid-template-columns: 1fr !important; } .section#activites .card{ min-height: 210px; height: auto; } .section#activites .card__body{ padding: 16px; } .service{ padding: 16px; } .filters{ display: grid; grid-template-columns: 1fr; gap: 8px; } .faq-tabs{ width: 100%; display: grid; grid-template-columns: 1fr; justify-content: stretch; } .faq-tab{ width: 100%; text-align: center; } .chip{ width: 100%; justify-content: center; text-align: center; } #travaux .gallery, .gallery{ grid-template-columns: 1fr !important; max-height: none; overflow: visible; } .gallery::before, .gallery::after{ display: none; } .shot img{ height: auto; aspect-ratio: 4 / 3; } .brands-marquee{ padding: 12px 0; } .brands-set{ gap: 14px; padding-inline: 7px; } .brands-set img{ width: 86px; height: 86px; } .review__top{ align-items: flex-start; flex-direction: column; } .contact .form{ height: auto; } .contact .form label:last-of-type textarea{ min-height: 130px; } .contact__info .infoCard{ height: auto; } .infoCard__rows > div{ align-items: flex-start; flex-direction: column; text-align: left; overflow-wrap: anywhere; } .infoCard__rows > div:first-child{ align-items: center; } .coord-brand{ flex: 1 1 auto; width: 100%; min-width: 0; } .map iframe{ height: 260px; } .modal{ width: calc(100% - 20px); max-height: calc(100dvh - 24px); overflow: auto; padding: 10px; } .footer{ padding-bottom: 86px; } .footer__inner, .footer__bottom, .footer__links, .footer__legal{ align-items: center; justify-content: center; text-align: center; } .footer__links, .footer__legal{ width: 100%; gap: 10px 14px; } .whatsapp-fab{ right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); } .whatsapp-fab__icon{ width: 52px; height: 52px; } .whatsapp-fab__label{ display: none; } } /* ── Travaux réalisés (mobile) : un carrousel par secteur, défilement tactile ── */ @media (max-width: 720px){ #travaux .filters, #travaux .gallery{ display: none; } .travaux-mobile{ display: flex; flex-direction: column; gap: 30px; margin-top: 6px; } .travaux-carousel{ position: relative; } .travaux-carousel__title{ margin: 0 0 14px; padding-left: 14px; font-size: 19px; font-weight: 800; color: var(--text); letter-spacing: .2px; } .travaux-carousel__track{ display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; padding: 6px 13% 18px; scrollbar-width: none; touch-action: pan-x pan-y; } .travaux-carousel__track::-webkit-scrollbar{ display: none; } .travaux-carousel__slide{ flex: 0 0 74%; margin: 0; scroll-snap-align: center; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 14px 32px rgba(11,18,32,.22); transform: scale(.88); opacity: .55; transition: transform .4s cubic-bezier(.22,.85,.32,1), opacity .4s ease; } .travaux-carousel__slide.is-active{ transform: scale(1); opacity: 1; } .travaux-carousel__slide img{ width: 100%; height: 100%; object-fit: cover; display: block; } /* Dégradé : fond les photos voisines dans le fond de la section */ .travaux-carousel::before, .travaux-carousel::after{ content: ""; position: absolute; top: 38px; bottom: 18px; width: 32px; z-index: 2; pointer-events: none; } .travaux-carousel::before{ left: 0; background: linear-gradient(to right, var(--bg) 0%, transparent 100%); } .travaux-carousel::after{ right: 0; background: linear-gradient(to left, var(--bg) 0%, transparent 100%); } } @media (max-width: 420px){ .container, .header .container{ width: calc(100% - 22px); } h1{ font-size: clamp(26px, 8.4vw, 34px); } .brand__logo{ max-width: 145px; } .hero__card, .contact .form, .contact__info .infoCard, .panel, .service{ padding: 14px; } .btn{ width: 100%; padding-inline: 14px; text-align: center; } }