/* Theme Name: Béton SW Estampé Theme URI: https://www.betonsw.com/ Author: Béton SW Estampé Author URI: https://www.betonsw.com/ Description: Thème sur mesure pour Béton SW Estampé — béton estampé, dalles, patios et finition de plancher sur la Rive-Sud. Site vitrine une page, sombre et cinématographique, optimisé pour le mobile et la performance. Version: 1.99.10 Requires at least: 6.0 Tested up to: 7.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: betonsw Tags: one-page, business, custom-colors, translation-ready */ /* Polices auto-hébergées — fusionnées ici : une seule feuille bloquante au lieu de deux. */ /* Polices auto-hébergées (plus aucun appel à Google Fonts). Sous-ensemble latin — couvre tous les accents du français. */ @font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap; src:url("assets/fonts/archivo-latin-700-normal.woff2") format("woff2")} @font-face{font-family:"Archivo";font-style:normal;font-weight:800;font-display:swap; src:url("assets/fonts/archivo-latin-800-normal.woff2") format("woff2")} @font-face{font-family:"Archivo";font-style:normal;font-weight:900;font-display:swap; src:url("assets/fonts/archivo-latin-900-normal.woff2") format("woff2")} @font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap; src:url("assets/fonts/inter-latin-400-normal.woff2") format("woff2")} @font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap; src:url("assets/fonts/inter-latin-500-normal.woff2") format("woff2")} @font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap; src:url("assets/fonts/inter-latin-600-normal.woff2") format("woff2")} @font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap; src:url("assets/fonts/space-mono-latin-400-normal.woff2") format("woff2")} @font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap; src:url("assets/fonts/space-mono-latin-700-normal.woff2") format("woff2")} /* Doublures métriques : la police système est redimensionnée pour occuper exactement la place de la vraie police. Le texte peint immédiatement (font-display:swap) SANS décaler la page quand la woff2 arrive. Valeurs calculées depuis les fichiers de police eux-mêmes. */ @font-face{font-family:"Archivo Fallback";src:local("Arial Bold"),local("Arial"); size-adjust:113.71%;ascent-override:77.22%;descent-override:18.47%;line-gap-override:0%} @font-face{font-family:"Inter Fallback";src:local("Arial"); size-adjust:103.37%;ascent-override:93.72%;descent-override:23.33%;line-gap-override:0%} @font-face{font-family:"Space Mono Fallback";src:local("Courier New"); size-adjust:101.98%;ascent-override:109.82%;descent-override:35.4%;line-gap-override:0%} :root{ --graphite:#121116; --slab:#191820; --slab-2:#221f28; --concrete:#8f897f; /* 4,68:1 minimum sur tous les fonds du thème (WCAG AA) */ --limestone:#d2ccc1; --fog:#efece6; --oxide:#c1823c; --oxide-bright:#dc9b4c; --glow:rgba(193,130,60,.16); --line:rgba(210,204,193,.13); --line-strong:rgba(210,204,193,.26); --maxw:1500px; /* 1240 laissait environ 340 px de vide de chaque côté sur un écran de 1920 */ --ease:cubic-bezier(.19,1,.22,1); --ease-out:cubic-bezier(.22,.61,.36,1); } *{box-sizing:border-box;margin:0;padding:0} :root{ /* On gère le mode sombre nous-mêmes : ceci désactive « Auto Dark Theme » de Chrome Android (Messenger, Instagram, Facebook — tous des WebView Chrome), qui inverse les couleurs des pages qui ne le déclarent pas. */ color-scheme:only dark; /* « only » = interdit au navigateur d'appliquer son propre assombrissement */ } html{scroll-behavior:smooth;scrollbar-gutter:stable} /* pendant la coulée : la page reste au héro, sans saut de largeur au dévoilement */ html.betonsw-pouring{overflow:hidden} body{ background:var(--graphite); color:var(--fog); font-family:"Inter","Inter Fallback",system-ui,sans-serif; font-size:17px;line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* "Wet pour" field — cloud mottling only. No arcs, no seams: the two large layers are stretched to cover the viewport, so they never tile. CSS-only. */ .field{ position:fixed;inset:0;z-index:-1;pointer-events:none; background-color:#131217; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'%3E%3Cfilter id='n' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)' opacity='0.34'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'%3E%3Cfilter id='n' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)' opacity='0.24'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' preserveAspectRatio='none'%3E%3Cfilter id='n' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E"); background-size:100% 100%,100% 100%,300px 300px; background-position:center,center,0 0; background-repeat:no-repeat,no-repeat,repeat; background-blend-mode:soft-light,soft-light,overlay; /* Master dial: lower = quieter background. */ opacity:.72; } /* Banded sections stay translucent so the pour reads through them. */ .proof,.contact{background:rgba(23,21,27,.72)} .marquee{background:rgba(23,21,27,.8)} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 30px} .mono{font-family:"Space Mono","Space Mono Fallback",monospace;letter-spacing:.04em} h1,h2,h3{font-family:"Archivo","Archivo Fallback",sans-serif;line-height:1.02;letter-spacing:-.02em} .eyebrow{ font-family:"Space Mono","Space Mono Fallback",monospace;font-size:12px;letter-spacing:.3em; text-transform:uppercase;color:var(--oxide-bright); display:inline-flex;align-items:center;gap:13px; } .eyebrow::before{content:"";width:30px;height:1px;background:var(--oxide);display:inline-block} /* ---------- Scroll progress ---------- */ .progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;will-change:transform;z-index:100;background:linear-gradient(90deg,var(--oxide),var(--oxide-bright));box-shadow:0 0 12px rgba(220,155,76,.5)} /* ---------- Header ---------- */ header{ position:fixed;top:0;left:0;right:0;z-index:80; display:flex;align-items:center;justify-content:space-between; padding:20px 30px; transition:background .5s var(--ease-out),border-color .5s var(--ease-out),padding .5s var(--ease-out); border-bottom:1px solid transparent; transform:translateY(-100%);animation:dropIn .9s .2s var(--ease) forwards; } @keyframes dropIn{to{transform:none}} header.scrolled{background:rgba(16,15,19,.78);backdrop-filter:blur(10px) saturate(1.3);border-bottom:1px solid var(--line);padding:13px 30px} .brand{display:flex;flex-direction:column;line-height:1} .brand b{font-family:"Archivo","Archivo Fallback";font-weight:900;font-size:21px;letter-spacing:-.01em} .brand span{font-family:"Space Mono","Space Mono Fallback";font-size:10px;letter-spacing:.24em;color:var(--concrete);text-transform:uppercase;margin-top:4px} /* La signature du logo reste fixe. Une lueur qui pulse en continu réclame l'œil sans rien lui apprendre — et le regard finit par lire ça comme un bandeau publicitaire. */ header .brand span{color:var(--oxide-bright);opacity:.82} nav{display:flex;align-items:center;gap:32px} .nav-links{display:flex;align-items:center;gap:32px} nav a.link{font-size:20px;font-weight:600;color:#fff;opacity:1;position:relative;transition:color .2s} nav a.link::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--oxide-bright);transition:width .3s var(--ease)} nav a.link:hover{color:var(--oxide-bright)} nav a.link:hover::after{width:100%} .callbtn{ font-family:"Space Mono","Space Mono Fallback";font-size:15px;font-weight:700;letter-spacing:.02em; background:var(--oxide);color:#151318;padding:14px 22px;border-radius:2px; display:inline-flex;align-items:center;gap:9px;overflow:hidden;position:relative; transition:transform .25s var(--ease),box-shadow .25s; } .callbtn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(193,130,60,.6)} .callbtn svg{width:17px;height:17px} /* Écrans courts : le héro cesse d'imposer une pleine hauteur et se contente de respirer. */ @media (max-height:700px) and (max-width:900px){ .hero{min-height:auto;padding-top:84px} .hero-inner{padding-bottom:44px} .hero h1{font-size:clamp(2rem,7.6vw,3.2rem);margin:16px 0 18px} .hero p.lede{font-size:.98rem} .hero-cta{margin-top:24px;gap:12px} } @media (max-width:400px){ .hero h1{font-size:2rem} .hero-cta{gap:10px} .hero-cta a{width:100%;justify-content:center} } /* ---------- Menu mobile ---------- */ .navtoggle{display:none;position:relative;z-index:2;width:46px;height:42px;border:1px solid var(--line-strong); border-radius:2px;background:rgba(16,15,19,.5);cursor:pointer;padding:0;transition:border-color .3s,background .3s} .navtoggle:hover,.navtoggle:focus-visible{border-color:var(--oxide)} .nb{position:absolute;left:50%;width:19px;height:1.5px;background:var(--fog);border-radius:2px; transform:translateX(-50%);transition:transform .42s var(--ease),opacity .25s,width .42s var(--ease),background .3s} .nb1{top:14px} .nb2{top:20.5px;width:13px} .nb3{top:27px} header.nav-open .navtoggle{border-color:var(--oxide);background:rgba(193,130,60,.14)} header.nav-open .nb{background:var(--oxide-bright)} header.nav-open .nb1{transform:translateX(-50%) translateY(6.5px) rotate(45deg)} header.nav-open .nb2{opacity:0;width:0} header.nav-open .nb3{transform:translateX(-50%) translateY(-6.5px) rotate(-45deg)} .navpanel{position:fixed;inset:0;z-index:79;visibility:hidden;pointer-events:none; background:rgba(14,13,18,.97);backdrop-filter:blur(14px); clip-path:circle(0% at calc(100% - 52px) 42px); transition:clip-path .62s var(--ease),visibility 0s linear .62s} .navpanel.open{visibility:visible;pointer-events:auto; clip-path:circle(150% at calc(100% - 52px) 42px);transition:clip-path .62s var(--ease),visibility 0s} .np-inner{height:100%;display:flex;flex-direction:column;justify-content:flex-start;gap:26px;padding:100px 30px 40px;max-width:600px; overflow-y:auto;-webkit-overflow-scrolling:touch} /* Les marges automatiques font tout le travail : le surtitre reste collé en haut, le pied en bas, et les liens se centrent dans l'espace restant. Un « justify-content:center » ne saurait pas faire les trois à la fois — et quand le contenu déborde, une marge auto retombe à zéro d'elle-même, là où un centrage rognerait le haut du menu. */ .np-links{display:flex;flex-direction:column;margin-top:auto;margin-bottom:auto} .np-links a{display:block;padding:16px 0;border-bottom:1px solid var(--line); opacity:0;transform:translateY(14px);transition:opacity .4s var(--ease-out),transform .5s var(--ease),color .25s} .navpanel.open .np-links a{opacity:1;transform:none;transition-delay:calc(var(--i) * 55ms + 120ms)} .np-t{font-family:"Archivo","Archivo Fallback";font-weight:800;font-size:clamp(1.9rem,8.4vw,2.8rem);letter-spacing:-.025em;color:var(--fog)} .np-links a:active .np-t,.np-links a:hover .np-t{color:var(--oxide-bright)} .np-foot{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;opacity:0;transform:translateY(10px); transition:opacity .4s var(--ease-out) .5s,transform .5s var(--ease) .5s} .navpanel.open .np-foot{opacity:1;transform:none} .np-call{font-family:"Archivo","Archivo Fallback";font-weight:900;font-size:1.7rem;letter-spacing:-.02em;color:var(--oxide-bright)} .np-mail{color:var(--limestone);font-size:.95rem} .np-rbq{font-family:"Space Mono","Space Mono Fallback";font-size:10px;letter-spacing:.16em;color:var(--concrete)} body.nav-locked{overflow:hidden} /* Six liens à 16,5 px tiennent large, mais se serrent avant la bascule burger. On resserre l'écart plutôt que de laisser le menu toucher le bouton. */ @media (max-width:1150px){ .nav-links{gap:20px} nav a.link{font-size:17px} } /* Le burger apparaît à 1000 px et non 900 : en dessous, six liens agrandis touchent la marque. Mieux vaut le menu plein écran, dont les entrées font 2,8 rem, qu'un en-tête comprimé à 15 px. */ @media (max-width:1000px){ .nav-links{display:none} .navtoggle{display:block} nav{gap:14px} header{padding:14px 18px} .brand b{font-size:18px} .brand span{font-size:9px;letter-spacing:.2em} .callbtn{padding:11px 14px} } @media (max-width:480px){ .tstrip{grid-template-columns:repeat(4,1fr)} /* 8 swatches are unreadable on a phone */ } @media (max-width:420px){ .callbtn{padding:11px;gap:0} .np-inner{padding:96px 22px 32px} } /* Six entrées plus le pied de menu dépassent d'un écran court : mesuré à 940 px de contenu pour 720 px de haut. Ce bloc vient APRÈS toutes les règles de base du panneau — à spécificité égale c'est la dernière qui gagne, et placé plus haut il était silencieusement écrasé. */ @media (max-height:820px){ .np-inner{gap:12px;padding-block:34px 30px} .np-links a{padding:8px 0} .np-t{font-size:clamp(1.45rem,6vw,1.9rem)} .np-foot{gap:5px} .np-call{font-size:1.35rem} } /* Dernier palier : sous 660 px de haut, six entrées plus le pied ne tiennent plus. Un menu qui défile est un menu dont on ignore la fin — on resserre encore plutôt que de compter sur le doigt du visiteur. */ @media (max-height:660px){ .np-inner{gap:9px;padding-block:26px 22px} .np-links a{padding:5px 0} .np-t{font-size:clamp(1.25rem,5.2vw,1.55rem)} .np-call{font-size:1.15rem} .np-mail{font-size:.86rem} } /* Téléphone en paysage : 390 px de haut pour six entrées empilées plus le pied, c'est impossible. Deux colonnes ramènent les liens à trois rangées et le pied revient dans le cadre, sans défilement. */ @media (max-height:480px){ .np-links{display:grid;grid-template-columns:1fr 1fr;column-gap:28px; margin-top:auto;margin-bottom:auto} .np-inner{gap:7px;padding-block:18px 14px} .np-links a{padding:4px 0} .np-t{font-size:1.2rem} .np-foot{gap:3px} .np-call{font-size:1rem} .np-mail{font-size:.8rem} } @media (prefers-reduced-motion:reduce){ .navpanel{transition:none;clip-path:none;opacity:0} .navpanel.open{opacity:1} .np-links a,.np-foot{transition:none;opacity:1;transform:none} } /* ---------- Hero ---------- */ .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden; padding-top:96px} /* la hauteur de l'en-tête fixe : le contenu ne peut plus passer dessous */ .hero-media{position:absolute;inset:-14% 0 -14%;z-index:0;opacity:0;transform:scale(1.08);transition:opacity 1.6s var(--ease-out),transform 2.4s var(--ease);will-change:transform} body.loaded .hero-media,html.betonsw-nopour .hero-media{opacity:1;transform:scale(1)} /* Once loaded, scroll takes over: footage drifts slower than the page. */ body.loaded .hero-media.px,html.betonsw-nopour .hero-media.px{transition:opacity 1.6s var(--ease-out);transform:translate3d(0,calc(var(--p,0)*14%),0) scale(calc(1 + var(--p,0)*.14))} .hero-inner.px{transform:translate3d(0,calc(var(--p,0)*-90px),0);opacity:calc(1 - var(--p,0)*1.05);will-change:transform,opacity} .viewfinder.px,.hud.px{opacity:calc(1 - var(--p,0)*1.6)} body.loaded .hero-media,html.betonsw-nopour .hero-media{opacity:1;transform:scale(1)} .hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;object-position:center 42%;filter:contrast(1.05) saturate(1.06) brightness(.82)} /* La première image de la vidéo, en fond : elle est peinte tout de suite et reste si la vidéo ne démarre jamais (économie d'énergie, autoplay bloqué). */ .hero-media{background-size:cover;background-position:center 42%;background-repeat:no-repeat} /* ---------- Héro en photos ---------- */ /* Les images sont empilées au même endroit ; seule celle qui porte .on est visible. Sans JavaScript, la première reste affichée et le héro tient debout tout seul — c'est pour ça qu'elles sont dans le HTML et pas créées par le script. */ .hero-media.shots .shot{position:absolute;inset:0;width:100%;height:100%;opacity:0; transition:opacity .9s var(--ease-out);will-change:opacity} .hero-media.shots .shot.on{opacity:1} /* Les bandes de la « pose par dalles » : reconstruites en JavaScript, elles rejouent l'image en tranches verticales décalées. */ .hero-media.shots .lame{position:absolute;top:0;bottom:0;background-size:cover;background-position:center 42%; filter:contrast(1.05) saturate(1.06) brightness(.82)} .shot-cap{position:absolute;left:30px;bottom:30px;z-index:5;display:flex;align-items:baseline;gap:13px; font-family:"Space Mono","Space Mono Fallback";font-size:10px;letter-spacing:.2em;text-transform:uppercase; opacity:0;transition:opacity 1s var(--ease-out) 1.5s} body.loaded .shot-cap,html.betonsw-nopour .shot-cap{opacity:1} .shot-cap .sc-n{color:var(--oxide-bright)} .shot-cap .sc-t{color:var(--concrete)} .shot-nav{position:absolute;right:30px;bottom:30px;z-index:5;display:flex;gap:9px; opacity:0;transition:opacity 1s var(--ease-out) 1.5s} body.loaded .shot-nav,html.betonsw-nopour .shot-nav{opacity:1} .sd{width:26px;height:2px;padding:0;border:0;background:var(--line-strong);cursor:pointer; transition:background .3s} .sd[aria-selected="true"]{background:var(--oxide-bright)} .sd:hover{background:var(--limestone)} .sd:focus-visible{outline:2px solid var(--oxide);outline-offset:4px} @media (max-width:860px){ .shot-cap{left:20px;bottom:22px;font-size:9px;letter-spacing:.16em} .shot-nav{right:20px;bottom:22px} .sd{width:20px} } .hero-media::before{content:"";position:absolute;inset:0; filter:contrast(1.05) saturate(1.06) brightness(.82);pointer-events:none} /* La vidéo n'apparaît qu'une fois qu'elle joue vraiment — sinon iOS affiche son bouton « play » par-dessus le poster. */ .hero-media video{opacity:0;transition:opacity .7s var(--ease-out)} .hero-media.playing video{opacity:1} .hero-media.novideo video{display:none} /* filtre de couleur éditable (Béton SW → Héro) : posé dans .hero-media, il suit le parallaxe */ .hero-media .hero-tint{position:absolute;inset:0;pointer-events:none} .hero-media::after{ content:"";position:absolute;inset:0; background: linear-gradient(180deg,rgba(16,15,19,.6) 0%,rgba(16,15,19,.08) 34%,rgba(16,15,19,.6) 70%,var(--graphite) 100%), radial-gradient(130% 90% at 15% 92%,rgba(16,15,19,.78),transparent 58%); } .hero-glow{position:absolute;z-index:1;width:60vw;height:60vw;left:-10vw;bottom:-20vw;border-radius:50%; background:radial-gradient(circle,var(--glow),transparent 60%);filter:blur(30px);animation:drift 18s ease-in-out infinite alternate} @keyframes drift{to{transform:translate(12vw,-8vw) scale(1.15)}} .hero-inner{position:relative;z-index:3;width:100%;padding-bottom:72px;min-width:0} .hero .eyebrow,.hero .lede,.hero-cta{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)} body.loaded .hero .eyebrow,html.betonsw-nopour .hero .eyebrow{opacity:1;transform:none;transition-delay:.5s} body.loaded .hero .lede,html.betonsw-nopour .hero .lede{opacity:1;transform:none;transition-delay:.95s} body.loaded .hero-cta,html.betonsw-nopour .hero-cta{opacity:1;transform:none;transition-delay:1.1s} .hero h1{font-weight:800;font-size:clamp(3rem,8.4vw,7.4rem);max-width:15ch;margin:24px 0 28px;text-wrap:balance} .ln{display:block;overflow:hidden;padding-bottom:.04em} .ln>span{display:block;transform:translateY(115%);transition:transform 1.1s var(--ease)} body.loaded .ln:nth-child(1)>span,html.betonsw-nopour .ln:nth-child(1)>span{transform:none;transition-delay:.35s} body.loaded .ln:nth-child(2)>span,html.betonsw-nopour .ln:nth-child(2)>span{transform:none;transition-delay:.5s} /* Le dégradé porte déjà l'accent : la faire clignoter la faisait osciller entre 62 % et 100 % d'opacité en boucle — le titre principal du site respirait comme une enseigne. */ .hero h1 em{font-style:normal;background:linear-gradient(120deg,var(--oxide-bright),#eabf7e);-webkit-background-clip:text;background-clip:text;color:transparent} .hero p.lede{max-width:50ch;font-size:clamp(1rem,1.6vw,1.24rem);color:var(--limestone)} .hero-cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:36px} .btn-ghost{ font-family:"Space Mono","Space Mono Fallback";font-size:14px;font-weight:700;border:1px solid var(--line-strong); color:var(--fog);padding:14px 22px;border-radius:2px;display:inline-flex;align-items:center;gap:10px; transition:border-color .25s,background .25s,transform .25s; } .btn-ghost:hover{border-color:var(--oxide);background:rgba(193,130,60,.08);transform:translateY(-2px)} .viewfinder{position:absolute;inset:12px 22px 22px 22px;z-index:2;pointer-events:none;opacity:0;transition:opacity 1s var(--ease-out) 1.2s} body.loaded .viewfinder,html.betonsw-nopour .viewfinder{opacity:1} .vf-tick{position:absolute;width:44px;height:44px;border:2px solid rgba(239,236,230,.5)} .vf-tl{top:0;left:0;border-right:none;border-bottom:none} .vf-tr{top:0;right:0;border-left:none;border-bottom:none} .vf-bl{bottom:0;left:0;border-right:none;border-top:none} .vf-br{bottom:0;right:0;border-left:none;border-top:none} .hud{position:absolute;z-index:4;top:104px;right:30px;text-align:right;font-family:"Space Mono","Space Mono Fallback"; font-size:13px;letter-spacing:.14em;color:rgba(239,236,230,.68);line-height:1.9;text-transform:uppercase; opacity:0;transition:opacity 1s 1.3s} body.loaded .hud,html.betonsw-nopour .hud{opacity:1} .hud .rec{color:var(--oxide-bright)} /* Le témoin REC garde sa pulsation — c'est le vocabulaire du viseur — mais en fondu lent plutôt qu'en stroboscope : steps(1) à 1,6 s accrochait l'œil en périphérie. */ .hud .rec::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--oxide-bright);margin-right:7px;vertical-align:middle;animation:blink 3.4s ease-in-out infinite} @keyframes blink{0%,100%{opacity:1}50%{opacity:.38}} /* ---------- Marquee ---------- */ .marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:20px 0;background:var(--slab)} .mq-track{display:flex;gap:0;white-space:nowrap;width:max-content;animation:mq 34s linear infinite;font-family:"Space Mono","Space Mono Fallback";font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--limestone)} /* Espacement en marge SUR l'element, et non en « gap » de flexbox : un gap ne s'applique pas apres le dernier enfant, et le translateX(-50%) de la boucle tomberait alors a un demi-espace a cote. */ .mq-track span{display:inline-flex;align-items:center;margin-right:70px} @keyframes mq{to{transform:translateX(-50%)}} /* ---------- Sections ---------- */ .sec-pad{padding:120px 0} .sechead{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:60px;flex-wrap:wrap} .sechead h2{font-weight:800;font-size:clamp(2.1rem,4.6vw,3.6rem);max-width:18ch;line-height:1.06} .sechead h2 em,.about-h em{font-style:normal;color:var(--oxide-bright)} /* Produits & services : le titre reste d'un seul blanc. Le jaune est descendu d'un cran, sur les trois catégories, où il sert de repère. */ .services .sechead h2 em{color:#fff} /* these three read badly broken over two lines — keep them on one */ @media (min-width:1100px){ .why .sechead h2,.patterns .sechead h2,.colors .sechead h2,.gallery .sechead h2,.services .sechead h2,.contact .sechead h2{ max-width:none;white-space:nowrap;font-size:clamp(1.8rem,3vw,3.1rem)} } .sechead .idx{font-family:"Space Mono","Space Mono Fallback";font-size:14px;font-weight:700;letter-spacing:.16em;color:var(--limestone);position:relative;padding-top:14px} .sechead .idx::before{content:"";position:absolute;top:0;right:0;width:46px;height:1px;background:var(--oxide)} .about{position:relative;overflow:hidden} /* Le titre vit dans la colonne de gauche : son haut et celui de la fiche technique partent de la même ligne. */ .about-h{font-family:"Archivo","Archivo Fallback";font-weight:800;font-size:clamp(2rem,3.6vw,3.1rem);letter-spacing:-.015em; line-height:1.06;margin-bottom:30px;max-width:18ch} .about-side{display:flex;flex-direction:column;align-items:flex-end;gap:16px} .about-side .idx{font-family:"Space Mono","Space Mono Fallback";font-size:12px;letter-spacing:.2em;color:var(--concrete); position:relative;padding-top:14px} .about-side .idx::before{content:"";position:absolute;top:0;right:0;width:46px;height:1px;background:var(--oxide)} .about-side .specs{width:100%} .sec-glow{position:absolute;width:44vw;height:44vw;border-radius:50%;background:radial-gradient(circle,var(--glow),transparent 62%);filter:blur(40px);z-index:0;pointer-events:none;top:-10vw;right:-12vw} .about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:start;position:relative;z-index:1} .about-grid p{color:var(--limestone);font-size:1.13rem;margin-bottom:22px} .quote{border-left:2px solid var(--oxide);padding-left:24px;margin-top:36px} .quote blockquote{font-family:"Archivo","Archivo Fallback";font-weight:700;font-size:1.55rem;line-height:1.2;letter-spacing:-.01em} .quote cite{font-style:normal;font-family:"Space Mono","Space Mono Fallback";font-size:12px;letter-spacing:.14em;color:var(--concrete);text-transform:uppercase;display:block;margin-top:14px} /* Fiche technique — présentée comme une vraie fiche : en-tête, filets de conduite, repères de coin, valeurs en chiffres tabulaires. */ .specs{position:relative;border:1px solid var(--line);border-radius:3px;background:rgba(25,24,32,.6); backdrop-filter:blur(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 24px 50px -30px rgba(0,0,0,.9)} .specs-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px; padding:14px 24px;border-bottom:1px solid var(--line-strong);background:rgba(255,255,255,.018)} .sh-t{font-family:"Space Mono","Space Mono Fallback";font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--oxide-bright)} .sh-c{font-family:"Space Mono","Space Mono Fallback";font-size:10px;letter-spacing:.18em;color:var(--concrete)} .specrow{position:relative;display:grid;grid-template-columns:132px 1fr;align-items:baseline;gap:24px; padding:15px 24px;border-bottom:1px solid var(--line);font-family:"Space Mono","Space Mono Fallback";font-size:12.5px;transition:background .3s} .specrow:last-of-type{border-bottom:none} .specrow::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;background:var(--oxide); transform:scaleY(0);transform-origin:center;transition:transform .35s var(--ease)} .specrow:hover{background:rgba(255,255,255,.022)} .specrow:hover::before{transform:scaleY(1)} .sk{color:var(--concrete);letter-spacing:.1em;text-transform:uppercase;font-size:11px;transition:color .3s} .specrow:hover .sk{color:var(--oxide-bright)} .sv{color:var(--fog);text-align:right;line-height:1.55;font-variant-numeric:tabular-nums;letter-spacing:.02em} /* repères de coin, comme le viseur du héro */ .stick{position:absolute;width:9px;height:9px;pointer-events:none;opacity:.7} .stick.tl{top:-1px;left:-1px;border-top:1px solid var(--oxide);border-left:1px solid var(--oxide)} .stick.tr{top:-1px;right:-1px;border-top:1px solid var(--oxide);border-right:1px solid var(--oxide)} .stick.bl{bottom:-1px;left:-1px;border-bottom:1px solid var(--oxide);border-left:1px solid var(--oxide)} .stick.br{bottom:-1px;right:-1px;border-bottom:1px solid var(--oxide);border-right:1px solid var(--oxide)} @media(max-width:640px){ .specrow{grid-template-columns:104px 1fr;gap:14px;padding:14px 18px;font-size:11.5px} } @media(max-width:520px){ .specrow{grid-template-columns:1fr;gap:4px} .sv{text-align:left} } .process{background:transparent} /* Procédé — the slab builds itself, layer by layer, as you move through the steps. */ .proc-build{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center} .bsteps{display:flex;flex-direction:column} .bs{display:flex;gap:18px;align-items:flex-start;text-align:left;width:100%;background:none;border:0; border-top:1px solid var(--line);padding:20px 6px;cursor:pointer;font-family:inherit;outline:none; transition:background .35s,padding-left .35s var(--ease)} .bs:last-child{border-bottom:1px solid var(--line)} .bs:hover,.bs.on,.bs:focus-visible{background:linear-gradient(90deg,rgba(193,130,60,.08),transparent 75%);padding-left:14px} .bn{font-family:"Space Mono","Space Mono Fallback";font-size:12px;color:var(--concrete);flex:none;margin-top:5px;transition:color .3s} .bs.on .bn{color:var(--oxide-bright)} .bt{display:block;min-width:0} .bh{display:block;font-family:"Archivo","Archivo Fallback";font-weight:700;font-size:1.18rem;letter-spacing:-.01em;color:var(--limestone);transition:color .3s} .bs.on .bh{color:var(--oxide-bright)} .bp{display:block;color:var(--concrete);font-size:.9rem;line-height:1.5;max-height:0;opacity:0;overflow:hidden; transition:max-height .45s var(--ease),opacity .4s,margin-top .4s} .bs.on .bp{max-height:80px;opacity:1;margin-top:7px} .slab{border:1px solid var(--line);border-radius:8px;background:rgba(11,10,14,.42);backdrop-filter:blur(2px);padding:22px 18px} .slab svg{width:100%;height:auto;display:block} .lay{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .6s var(--ease)} .lay.show{opacity:1;transform:none} /* readable labels, parked clear of the drawing with leader lines */ .llab{font-family:"Inter","Inter Fallback",system-ui,sans-serif;font-size:13px;font-weight:500;letter-spacing:.005em;fill:var(--limestone);dominant-baseline:middle} .llab.oxide{fill:var(--oxide-bright)} .lead{fill:none;stroke:var(--line-strong);stroke-width:1} .lead.oxide{stroke:var(--oxide)} @media(max-width:900px){ .proc-build{grid-template-columns:1fr;gap:26px} .slab{padding:14px;order:-1} } @media (prefers-reduced-motion:reduce){.lay{opacity:1!important;transform:none!important}} /* ---------- Joints de contrôle : le trait de scie entre les sections ---------- */ .joint{position:relative;z-index:3;height:3px;pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.78),rgba(255,255,255,.05)); box-shadow:0 1px 0 rgba(255,255,255,.03)} /* ---------- Signature: coulée, curseur, rail ---------- */ /* La coulée est écartée dès (mobile, réduction de mouvement, option) : le voile n'est jamais peint et les états d'entrée s'appliquent d'emblée. */ html.betonsw-nopour .loader{display:none} .loader{position:fixed;inset:0;z-index:200;background:#15141a;overflow:hidden; transition:opacity .4s ease;transform-origin:50% 50%; /* failsafe: if the script never runs, CSS retires the loader on its own */ animation:betonsw-loader-failsafe .1s linear 6s forwards} @keyframes betonsw-loader-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}} .loader.done{opacity:0;visibility:hidden;pointer-events:none; transition:opacity .4s ease,visibility 0s linear .4s;animation:none} .loader canvas{position:absolute;inset:0;width:100%;height:100%;display:block} /* ---------- Curseur en croix (ordinateur seulement) ---------- Même dessin qu'avant — deux traits et un losange — mais trois défauts corrigés : 1. La boîte passe de 24 à 25 px, donc impaire. Les traits se posaient à 11,5 px, c'est-à-dire à cheval sur deux pixels : le navigateur les rendait en deux colonnes grises au lieu d'une ligne nette. À 12 px sur une boîte de 25, le trait tombe pile sur la colonne du pointeur. 2. Les traits se croisaient en plein milieu et bouchaient le point qu'ils sont censés désigner. Ils sont maintenant interrompus au centre, comme sur un vrai réticule : c'est le vide qui pointe. 3. Le losange débordait. Un carré de 20 px tourné à 45° mesure 28 px de diagonale — il sortait donc de la boîte de 24 et dépassait les traits. Réduit, ses pointes s'arrêtent juste avant les extrémités. L'ombre portée n'ajoute rien au dessin : elle empêche seulement le trait d'un pixel de disparaître sur les photos claires de béton. */ .cur{position:fixed;left:0;top:0;z-index:150;width:25px;height:25px;pointer-events:none;opacity:0; transform:translate3d(-999px,-999px,0);transition:opacity .2s; filter:drop-shadow(0 0 1.5px rgba(0,0,0,.6))} body.cur-on .cur{opacity:1} .cur b,.cur s{position:absolute;text-decoration:none} .cur b{left:12px;top:0;width:1px;height:25px; background:linear-gradient(to bottom,var(--oxide-bright) 0 9px,transparent 9px 16px,var(--oxide-bright) 16px 25px)} .cur s{top:12px;left:0;height:1px;width:25px; background:linear-gradient(to right,var(--oxide-bright) 0 9px,transparent 9px 16px,var(--oxide-bright) 16px 25px)} .cur u{position:absolute;inset:5px;border:1px solid rgba(220,155,76,.42);transform:rotate(45deg)} body.cur-on,body.cur-on a,body.cur-on button,body.cur-on .sw,body.cur-on .pat,body.cur-on .tcard{cursor:none} /* La croix vaut aussi sur le formulaire. Le thème rendait la main au curseur système sur les champs — ce qui cassait l'effet précisément là où le visiteur s'attarde le plus longtemps. La croix a un centre net, la saisie reste précise. Le pointeur système revient de toute façon sur écran tactile, et si l'effet est décoché dans Béton SW → Effets. */ body.cur-on input,body.cur-on textarea,body.cur-on select,body.cur-on label{cursor:none} /* `.contact button[type="submit"]` est plus spécifique que `body.cur-on button` : sans cette règle, le bouton d'envoi restait le seul à afficher la main système. */ body.cur-on .contact button[type="submit"], body.cur-on .contact button[type="submit"].sending{cursor:none} /* section rail */ /* align-items explicite : .rail est un