/* ============================================================= LE FERRAILLEUR HAUTS-SAÔNOIS — Direction A « FORGE » Identité : « La Griffe » — orange sécurité sur carbone. THÈME : clair par défaut, sombre via [data-theme="dark"] sur . Le choix de l'utilisateur est mémorisé (localStorage). On NE suit volontairement PAS prefers-color-scheme : la clientèle ne comprendrait pas que le site change d'aspect d'un téléphone à l'autre. Contrastes vérifiés (WCAG 2.1) : texte encre / papier .................. 18.07:1 AAA texte sur orange (--on-brand) .......... 5.24:1 AA orange en texte sur clair (--brand-ink) 5.07:1 AA mark orange sur papier ................. 3.45:1 AA composant ⚠️ Ne JAMAIS poser de texte blanc sur --brand (3.76:1, échec AA). ============================================================= */ /* ---------- 1. Tokens ---------- */ :root { /* --- Marque : identique dans les deux thèmes --- */ --brand-100: #FCE3D5; --brand-200: #F7B48D; --brand-300: #F07A3A; --brand: #E8500E; /* aplats, marks, fonds de bouton */ --brand-600: #C64409; --brand-700: #9A360C; --brand-900: #461906; --on-brand: #0B0B0A; /* texte POSÉ SUR l'orange — jamais blanc */ /* --- Surfaces (échelle claire par défaut) --- */ --void: #FFFFFF; --ink-900: #F7F5F0; /* fond de page */ --ink-850: #F2EFE8; --ink-800: #EDEAE3; --ink-750: #E7E3DA; --ink-700: #E0DCD1; --ink-600: #D6D1C4; --ink-500: #C4BEAE; /* --- Encre (texte, du plus fort au plus discret) --- */ --chr-050: #000000; --chr-100: #14130F; --chr-200: #2E2C24; --chr-300: #4A473C; --chr-400: #5A5749; /* 5,30:1 au pire — placeholders, micro-texte sur champ */ --chr-500: #6E6A5C; /* 4,51:1 au pire — etiquettes de formulaire */ --chr-600: #8F897A; /* decoratif uniquement, jamais de texte utile */ /* Orange lisible EN TEXTE sur fond clair */ --brand-ink: #B8410F; /* --- Signal --- */ --jade: #17794C; --amber: #9A6700; --rust: #B23A18; /* --- Lignes & voiles --- */ /* Voiles des surfaces translucides collantes (nav, dock). Codés en dur auparavant, ils rendaient l'en-tête illisible en clair. */ --rg-bg-1: #FFFFFF; --rg-bg-2: #F1EEE7; --rg-line: rgba(11,11,10,.15); --rg-ghost: rgba(11,11,10,.055); --rg-edge: rgba(232,80,14,.55); --rg-zone: rgba(232,80,14,.055); --rg-dot: #5A5749; --rg-deptn: rgba(154,54,12,.85); --rg-hub-ring:#FFFFFF; --rg-sweep: rgba(232,80,14,.14); --veil: rgba(247, 245, 240, .80); --veil-stuck: rgba(247, 245, 240, .95); --veil-shadow: 0 10px 30px -20px rgba(11,11,10,.5); --hair: rgba(11, 11, 10, .10); --hair-2: rgba(11, 11, 10, .18); --hair-3: rgba(11, 11, 10, .38); --brand-hair: rgba(232, 80, 14, .34); /* --- Trames (traits sombres sur fond clair) --- */ --mesh-stroke: %230B0B0A; --mesh-op: .07; --grain-op: .05; --grain-blend: multiply; /* Typo */ --f-display: 'Anton', 'Arial Narrow', Impact, sans-serif; --f-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Rythme */ --gut: clamp(1.25rem, 4vw, 2rem); --shell: 1320px; --sec-y: clamp(4.5rem, 10vw, 9rem); /* Courbes */ --ease: cubic-bezier(.22, 1, .36, 1); /* Ombres */ --lift-1: 0 1px 2px rgba(11,11,10,.06), 0 8px 24px -12px rgba(11,11,10,.22); --lift-2: 0 2px 6px rgba(11,11,10,.07), 0 24px 60px -24px rgba(11,11,10,.34); --glow: 0 0 0 1px rgba(232,80,14,.42), 0 12px 40px -14px rgba(232,80,14,.45); /* Coupes industrielles */ --cut-s: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); --cut-m: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); --cut-l: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px)); color-scheme: light; } /* ---------- 1 bis. THÈME SOMBRE ---------- Seules les surfaces, l'encre et les voiles s'inversent. La marque orange ne bouge pas : c'est ce qui tient l'identité. */ [data-theme="dark"] { --void: #030403; --ink-900: #0A0A09; /* fond de page */ --ink-850: #0E0E0C; --ink-800: #131311; --ink-750: #181815; --ink-700: #1F1E1A; --ink-600: #292824; --ink-500: #38362F; --chr-050: #FFFFFF; --chr-100: #F4F1EA; --chr-200: #D6D2C6; --chr-300: #A8A395; --chr-400: #A8A395; /* 6,62:1 au pire */ --chr-500: #8F897A; /* 4,79:1 au pire */ --chr-600: #6E6A5C; /* decoratif uniquement */ /* Sur fond sombre, l'orange vif est déjà lisible en texte (5.24:1) */ --brand-ink: #F07A3A; --jade: #2ED08A; --amber: #FFC542; --rust: #FF8A5C; --rg-bg-1: #191916; --rg-bg-2: #030403; --rg-line: rgba(255,255,255,.11); --rg-ghost: rgba(255,255,255,.05); --rg-edge: rgba(232,80,14,.45); --rg-zone: rgba(232,80,14,.07); --rg-dot: #A8A395; --rg-deptn: rgba(240,122,58,.8); --rg-hub-ring:#0A0A09; --rg-sweep: rgba(232,80,14,.26); --veil: rgba(7, 10, 8, .72); --veil-stuck: rgba(3, 5, 3, .94); --veil-shadow: 0 12px 40px -22px #000; --hair: rgba(255, 255, 255, .08); --hair-2: rgba(255, 255, 255, .16); --hair-3: rgba(255, 255, 255, .32); --brand-hair: rgba(232, 80, 14, .40); --mesh-stroke: %23ffffff; --mesh-op: .075; --grain-op: .04; --grain-blend: overlay; --lift-1: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7); --lift-2: 0 2px 4px rgba(0,0,0,.4), 0 24px 60px -24px rgba(0,0,0,.9); --glow: 0 0 0 1px rgba(232,80,14,.45), 0 12px 44px -14px rgba(232,80,14,.55); color-scheme: dark; } /* ---------- 2. Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body { font-family: var(--f-sans); font-size: 16px; line-height: 1.62; color: var(--chr-200); background: var(--ink-900); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; font-feature-settings: 'kern' 1, 'liga' 1, 'cv11' 1; } img, svg, video { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; } ::selection { background: var(--brand); color: var(--on-brand); } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--ink-850); } ::-webkit-scrollbar-thumb { background: var(--chr-600); border: 3px solid var(--ink-850); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--brand-600); } /* ---------- 3. Typographie ---------- */ .display { font-family: var(--f-display); font-weight: 400; line-height: .88; letter-spacing: -.012em; color: var(--chr-100); text-transform: uppercase; text-wrap: balance; } .d-mega { font-size: clamp(2.75rem, 7vw, 6.1rem); } .d-1 { font-size: clamp(2.15rem, 5.2vw, 4.3rem); } .d-2 { font-size: clamp(1.7rem, 3.5vw, 2.85rem); } .d-3 { font-size: clamp(1.28rem, 2.2vw, 1.65rem); line-height: 1.02; } /* Acier brossé appliqué au texte. En thème clair la rampe est sombre (acier vu de dessus) ; en thème sombre elle redevient claire (chrome éclairé). Un dégradé clair sur fond clair disparaîtrait — d'où les deux rampes. */ .chrome { padding-top: .22em; margin-top: -.22em; background: linear-gradient(178deg, #3A3831 0%, #16150F 18%, #4A4740 38%, #14130F 52%, #333029 74%, #100F0C 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: none; } [data-theme="dark"] .chrome { padding-top: .22em; margin-top: -.22em; background: linear-gradient(178deg, #FFFFFF 0%, #E4EBEE 16%, #A9B4BA 34%, #5E6A72 50%, #9BA7AE 58%, #E9EFF2 76%, #B9C3C9 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 0 rgba(0,0,0,.55)); } /* Repli si background-clip:text n'est pas supporté */ @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .chrome { color: var(--chr-100); -webkit-text-fill-color: currentColor; } } .accent { color: var(--brand-ink); } .eyebrow { display: inline-flex; align-items: center; gap: .6em; font-family: var(--f-mono); font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--brand-ink); } .eyebrow::before { content: ''; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--brand)); } .eyebrow--center::after { content: ''; width: 26px; height: 1px; background: linear-gradient(270deg, transparent, var(--brand)); } .lede { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--chr-300); text-wrap: pretty; } .muted { color: var(--chr-400); } .mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; } /* ---------- 4. Layout ---------- */ .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); } .shell--tight { max-width: 940px; } .section { padding-block: var(--sec-y); position: relative; } .sec-head { max-width: 780px; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .sec-head--center { margin-inline: auto; text-align: center; } .sec-head .display { margin-block: .5rem .9rem; } /* Trame hexagonale carbone (rappel du fond du logo) */ .hexbg { position: relative; isolation: isolate; } .hexbg::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%230B0B0A' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16z'/%3E%3Cpath d='M28 48 56 64v32L28 112 0 96V64z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 56px 97px; opacity: .8; } /* Trame hexagonale : traits sombres sur clair, blancs sur sombre. L'URL est dupliquée par thème — var() n'est pas interpolable dans une data URI. */ [data-theme="dark"] .hexbg::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.075' stroke-width='1'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16z'/%3E%3Cpath d='M28 48 56 64v32L28 112 0 96V64z'/%3E%3C/g%3E%3C/svg%3E"); } .grain { position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: var(--grain-op); mix-blend-mode: var(--grain-blend); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); } .readbar { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--brand-700), var(--brand), var(--brand-100)); z-index: 9999; will-change: transform; } /* ---------- 5. Boutons ---------- */ .btn { --btn-bg: var(--brand); --btn-fg: var(--on-brand); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: 1.05em 1.9em; font-size: .84rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--btn-fg); background: var(--btn-bg); border: 1px solid transparent; clip-path: var(--cut-m); transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .3s ease, color .3s ease, border-color .3s ease; isolation: isolate; overflow: hidden; white-space: nowrap; } .btn::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.45), transparent 80%); transform: translateX(-120%); transition: transform .75s var(--ease); } .btn:hover::after { transform: translateX(120%); } .btn:hover { transform: translateY(-3px); box-shadow: var(--glow); } .btn:active { transform: translateY(-1px) scale(.985); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--chr-100); border-color: var(--hair-2); backdrop-filter: blur(8px); } .btn--ghost:hover { --btn-fg: var(--brand-ink); border-color: var(--brand); background: rgba(232,80,14,.08); box-shadow: none; } .btn--chrome { --btn-bg: var(--chr-100); --btn-fg: var(--on-brand); } .btn--dark { --btn-bg: var(--ink-900); --btn-fg: var(--chr-100); border-color: var(--hair-2); } .btn--sm { padding: .8em 1.35em; font-size: .74rem; clip-path: var(--cut-s); } .btn--lg { padding: 1.25em 2.4em; font-size: .9rem; } .btn--block { width: 100%; } .btn__ico { width: 17px; height: 17px; flex: none; } .btn:disabled { opacity: .35; cursor: not-allowed; transform: none !important; box-shadow: none !important; } /* ---------- 6. Header ---------- */ .topbar { position: relative; z-index: 60; background: var(--void); border-bottom: 1px solid var(--hair); font-size: .76rem; } .topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; min-height: 40px; padding-block: .35rem; } .topbar__left, .topbar__right { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; } .topbar a { transition: color .25s ease; } .topbar a:hover { color: var(--brand-ink); } .tb-item { display: inline-flex; align-items: center; gap: .5em; color: var(--chr-300); } .tb-item svg { width: 14px; height: 14px; color: var(--chr-500); flex: none; } .status { display: inline-flex; align-items: center; gap: .55em; font-weight: 600; } .status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--chr-500); flex: none; } .status.is-open { color: var(--brand-ink); } .status.is-open .status__dot { background: var(--brand); box-shadow: 0 0 0 0 rgba(232,80,14,.7); animation: pulse 2.4s infinite; } .status.is-closed { color: var(--rust); } .status.is-closed .status__dot { background: var(--rust); } @keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(232,80,14,0); } 100% { box-shadow: 0 0 0 0 rgba(232,80,14,0); } } .nav { position: sticky; top: 0; z-index: 70; background: var(--veil); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border-bottom: 1px solid var(--hair); transition: background .4s ease, box-shadow .4s ease; } .nav.is-stuck { background: var(--veil-stuck); box-shadow: var(--veil-shadow); } .nav__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 76px; } .brand { display: flex; align-items: center; gap: .75rem; flex: none; } .brand__mark { width: 44px; height: 44px; flex: none; color: var(--brand); transition: transform .6s var(--ease); } .brand:hover .brand__mark { transform: rotate(-7deg) scale(1.07); } .brand__txt { display: flex; flex-direction: column; line-height: 1.02; } .brand__n1 { font-family: var(--f-display); font-size: 1.06rem; letter-spacing: .01em; text-transform: uppercase; } .brand__n2 { font-family: var(--f-mono); font-size: .56rem; letter-spacing: .24em; color: var(--brand-ink); text-transform: uppercase; font-weight: 600; } .nav__links { display: flex; align-items: center; gap: .1rem; } .nav__link { position: relative; padding: .6rem .8rem; font-size: .82rem; font-weight: 500; color: var(--chr-300); transition: color .25s ease; } .nav__link::after { content: ''; position: absolute; left: .8rem; right: .8rem; bottom: .3rem; height: 1.5px; background: var(--brand); transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--ease); } .nav__link:hover, .nav__link.is-active { color: var(--chr-100); } .nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); } .nav__cta { display: flex; align-items: center; gap: .7rem; flex: none; } .burger { display: none; width: 44px; height: 44px; border: 1px solid var(--hair-2); align-items: center; justify-content: center; flex-direction: column; gap: 5px; } .burger span { display: block; width: 19px; height: 1.5px; background: var(--chr-100); transition: transform .4s var(--ease), opacity .25s ease; } .burger.is-on span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .burger.is-on span:nth-child(2) { opacity: 0; } .burger.is-on span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Le retrait haut valait 100 px en dur, alors que le bas de la barre de navigation tombe entre 151 et 208 px selon que le bandeau supérieur s'affiche sur une, deux ou trois lignes. Résultat : la première entrée du menu passait sous la barre à toutes les largeurs. La valeur est maintenant mesurée à l'ouverture et à chaque redimensionnement. */ .drawer { position: fixed; inset: 0; z-index: 65; background: var(--ink-900); padding: var(--drawer-top, 100px) var(--gut) 2rem; display: flex; flex-direction: column; gap: .1rem; transform: translateX(100%); visibility: hidden; transition: transform .55s var(--ease), visibility .55s; overflow-y: auto; } .drawer.is-open { transform: none; visibility: visible; } .drawer__link { font-family: var(--f-display); font-size: 1.7rem; text-transform: uppercase; color: var(--chr-200); padding: .5rem 0; border-bottom: 1px solid var(--hair); display: flex; justify-content: space-between; align-items: center; transition: color .25s ease, padding-left .35s var(--ease); } .drawer__link:hover { color: var(--brand-ink); padding-left: .5rem; } .drawer__foot { margin-top: auto; padding-top: 2rem; display: grid; gap: .7rem; } /* ---------- 7. Hero ---------- */ .hero { position: relative; min-height: clamp(580px, 78svh, 820px); display: flex; align-items: center; overflow: hidden; background: var(--ink-900); isolation: isolate; } .hero__bg { position: absolute; inset: 0; z-index: -3; } .hero__bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(85% 70% at 76% 14%, rgba(232,80,14,.13), transparent 62%), radial-gradient(70% 60% at 6% 94%, rgba(11,11,10,.05), transparent 60%), linear-gradient(180deg, var(--void), var(--ink-900) 62%); } [data-theme="dark"] .hero__bg::before { background: radial-gradient(85% 70% at 76% 14%, rgba(232,80,14,.20), transparent 62%), radial-gradient(70% 60% at 6% 94%, rgba(232,80,14,.07), transparent 60%), linear-gradient(180deg, var(--void), var(--ink-900) 62%); } .hero__hex { position: absolute; inset: -1px; z-index: -2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%230B0B0A' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16z'/%3E%3Cpath d='M28 48 56 64v32L28 112 0 96V64z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 56px 97px; mask-image: radial-gradient(115% 90% at 55% 28%, #000 18%, transparent 76%); -webkit-mask-image: radial-gradient(115% 90% at 55% 28%, #000 18%, transparent 76%); } [data-theme="dark"] .hero__hex { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.075' stroke-width='1'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16z'/%3E%3Cpath d='M28 48 56 64v32L28 112 0 96V64z'/%3E%3C/g%3E%3C/svg%3E"); } .spark { position: absolute; z-index: -1; width: 2px; height: 2px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 7px 1px rgba(232,80,14,.85); opacity: 0; animation: rise linear infinite; } @keyframes rise { 0% { opacity: 0; transform: translate3d(0,0,0) scale(.5); } 12% { opacity: 1; } 75% { opacity: .7; } 100% { opacity: 0; transform: translate3d(var(--dx, 30px), -62vh, 0) scale(1.25); } } .hero__in { position: relative; width: 100%; padding-block: clamp(2.2rem, 4vw, 3.2rem) 0; } .hero__grid-l { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: clamp(2rem,5vw,4.5rem); align-items: center; } .hero h1 { margin-block: .55rem 1.2rem; } /* La hauteur de ligne serrée (.88) place la boîte sous les accents des capitales. Combinée à overflow:hidden, elle décapitait les É et È. On agrandit la zone de rognage vers le haut sans bouger la mise en page. */ .hero h1 .ln { display: block; overflow: hidden; padding-block: .16em .06em; margin-block: -.16em -.06em; } .hero h1 .ln > span { display: block; transform: translateY(105%); animation: lineUp 1.05s var(--ease) forwards; } .hero h1 .ln:nth-child(2) > span { animation-delay: .11s; } .hero h1 .ln:nth-child(3) > span { animation-delay: .22s; } @keyframes lineUp { to { transform: none; } } .hero__sub { max-width: 48ch; } .hero__acts { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.6rem; } .hero__trust { display: flex; flex-wrap: wrap; gap: 1.1rem 2.2rem; margin-top: 1.8rem; padding-top: 1.3rem; border-top: 1px solid var(--hair); } .trust-i { display: flex; align-items: center; gap: .65rem; font-size: .8rem; color: var(--chr-300); } .trust-i svg { width: 19px; height: 19px; color: var(--brand); flex: none; } .fade-up { opacity: 0; transform: translateY(22px); animation: fadeUp .95s var(--ease) forwards; } .fade-up[data-d="1"] { animation-delay: .35s; } .fade-up[data-d="2"] { animation-delay: .48s; } .fade-up[data-d="3"] { animation-delay: .6s; } .fade-up[data-d="4"] { animation-delay: .72s; } @keyframes fadeUp { to { opacity: 1; transform: none; } } /* Carte cours des métaux */ .flash { position: relative; background: linear-gradient(160deg, var(--ink-700), var(--ink-850)); border: 1px solid var(--hair-2); padding: 1.6rem; clip-path: var(--cut-l); box-shadow: var(--lift-2); } .flash::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--brand-600), var(--brand-200), transparent); } .flash__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; } .flash__t { font-family: var(--f-display); font-size: 1.14rem; text-transform: uppercase; color: var(--chr-100); } .flash__meta { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em; color: var(--chr-500); text-transform: uppercase; } .flash__list { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); } .flash__row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .8rem; padding: .66rem .85rem; background: var(--ink-800); font-size: .84rem; transition: background .3s ease; } .flash__row:hover { background: var(--ink-700); } .flash__row b { font-weight: 500; color: var(--chr-200); } .flash__px { font-family: var(--f-mono); font-size: .92rem; font-weight: 600; color: var(--chr-100); font-variant-numeric: tabular-nums; } .flash__dt { font-family: var(--f-mono); font-size: .7rem; min-width: 54px; text-align: right; } .flash__dt.up { color: var(--brand-ink); } .flash__dt.dn { color: var(--rust); } .flash__ft { margin-top: 1rem; font-size: .67rem; color: var(--chr-500); line-height: 1.5; } /* Ticker */ .ticker { position: relative; border-block: 1px solid var(--hair); background: var(--void); overflow: hidden; padding-block: .78rem; } .ticker::before, .ticker::after { content: ''; position: absolute; top: 0; bottom: 0; width: 110px; z-index: 2; pointer-events: none; } .ticker::before { left: 0; background: linear-gradient(90deg, var(--void), transparent); } .ticker::after { right: 0; background: linear-gradient(270deg, var(--void), transparent); } .ticker__track { display: flex; width: max-content; animation: slide 48s linear infinite; } .ticker:hover .ticker__track { animation-play-state: paused; } @keyframes slide { to { transform: translateX(-50%); } } .ticker__i { display: inline-flex; align-items: center; gap: .55rem; padding-inline: 1.5rem; font-family: var(--f-mono); font-size: .76rem; white-space: nowrap; border-right: 1px solid var(--hair); } .ticker__i span:first-child { color: var(--chr-500); text-transform: uppercase; letter-spacing: .09em; font-size: .67rem; } .ticker__i b { color: var(--chr-100); font-weight: 600; } .ticker__i i { font-style: normal; font-size: .7rem; } .ticker__i i.up { color: var(--brand-ink); } .ticker__i i.dn { color: var(--rust); } /* ---------- 8. Chiffres ---------- */ .kpis { border-bottom: 1px solid var(--hair); background: var(--void); } .kpis__g { display: grid; grid-template-columns: repeat(4, 1fr); } .kpi { padding: clamp(2rem,4vw,3rem) 1.4rem; text-align: center; border-right: 1px solid var(--hair); } .kpi:last-child { border-right: 0; } .kpi__n { font-family: var(--f-display); font-size: clamp(2.1rem,4.6vw,3.4rem); line-height: 1; color: var(--chr-100); } .kpi__n sup { font-size: .4em; color: var(--brand-ink); vertical-align: super; margin-left: .06em; } .kpi__l { margin-top: .6rem; font-size: .73rem; letter-spacing: .13em; text-transform: uppercase; color: var(--chr-500); } /* ---------- 9. Services ---------- */ .svc-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); } .svc { position: relative; background: var(--ink-850); padding: clamp(1.6rem,2.6vw,2.1rem); min-height: 410px; display: flex; flex-direction: column; overflow: hidden; transition: background .5s var(--ease); isolation: isolate; } .svc::before { content: ''; position: absolute; inset: auto 0 0 0; height: 2px; background: linear-gradient(90deg, var(--brand-600), var(--brand-200)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease); } .svc:hover { background: var(--ink-750); } .svc:hover::before { transform: scaleX(1); } .svc__glow { position: absolute; z-index: -1; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(232,80,14,.15), transparent 68%); opacity: 0; transition: opacity .5s ease; pointer-events: none; transform: translate(-50%,-50%); } .svc:hover .svc__glow { opacity: 1; } .svc__num { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .2em; color: var(--chr-500); margin-bottom: 1.5rem; } .svc__ico { width: 48px; height: 48px; color: var(--brand); margin-bottom: 1.3rem; transition: transform .6s var(--ease); } .svc:hover .svc__ico { transform: translateY(-4px) scale(1.06); } .svc__t { font-family: var(--f-display); font-size: 1.3rem; text-transform: uppercase; color: var(--chr-100); line-height: 1.06; margin-bottom: .7rem; } .svc__d { font-size: .875rem; color: var(--chr-400); line-height: 1.6; } .svc__pts { margin-top: 1.2rem; display: grid; gap: .42rem; } .svc__pts li { position: relative; padding-left: 1.05rem; font-size: .8rem; color: var(--chr-300); } .svc__pts li::before { content: ''; position: absolute; left: 0; top: .58em; width: 5px; height: 5px; background: var(--brand); transform: rotate(45deg); } .svc__ft { margin-top: auto; padding-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .svc__px { font-family: var(--f-mono); font-size: .72rem; color: var(--chr-500); } .svc__px b { display: block; font-size: 1rem; color: var(--brand-ink); font-weight: 600; } /* ---------- 10. Outils (estimateur / benne) ---------- */ .tool { background: linear-gradient(165deg, var(--ink-750), var(--ink-850) 60%); border: 1px solid var(--hair-2); clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 30px 100%, 0 calc(100% - 30px)); overflow: hidden; } .tool__g { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.9fr); } .tool__form { padding: clamp(1.7rem,3.4vw,3rem); } .tool__out { padding: clamp(1.7rem,3.4vw,3rem); background: var(--void); border-left: 1px solid var(--hair); display: flex; flex-direction: column; position: relative; overflow: hidden; } .tool__out::before { content: ''; position: absolute; top: -140px; right: -140px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(232,80,14,.16), transparent 70%); pointer-events: none; } .field { margin-bottom: 1.5rem; } .field:last-child { margin-bottom: 0; } .field__l { display: block; font-family: var(--f-mono); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--chr-500); margin-bottom: .7rem; } .field__l span { color: var(--brand-ink); } .chips { display: flex; flex-wrap: wrap; gap: .5rem; } .chip { position: relative; display: inline-flex; flex-direction: column; gap: .1rem; padding: .62rem 1rem; font-size: .82rem; font-weight: 500; color: var(--chr-300); background: var(--ink-700); border: 1px solid var(--hair); transition: all .3s var(--ease); cursor: pointer; user-select: none; } .chip:hover { border-color: var(--hair-3); color: var(--chr-100); transform: translateY(-1px); } .chip.is-on { background: rgba(232,80,14,.20); border-color: var(--brand); color: var(--brand-ink); } /* L'input reste dans le parcours clavier mais invisible : clip-path plutot qu'opacity:0, et surtout PAS de pointer-events:none, sinon le clic natif du label ne peut plus l'atteindre. L'anneau de focus est porte par le label. */ .chip input { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); } .chip:focus-within { outline: 3px solid var(--brand); outline-offset: 2px; } .chip__sm { font-size: .65rem; color: var(--chr-500); font-family: var(--f-mono); } .chip.is-on .chip__sm { color: var(--chr-300); } .inp, select.inp, textarea.inp { width: 100%; padding: .85rem 1rem; background: var(--ink-700); border: 1px solid var(--hair-3); color: var(--chr-100); font-size: .92rem; border-radius: 0; appearance: none; transition: border-color .3s ease, background .3s ease; } .inp::placeholder { color: var(--chr-400); } .inp:focus { border-color: var(--brand); background: var(--ink-600); } .inp:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; } select.inp { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A5749' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85rem center; background-size: 17px; padding-right: 2.6rem; cursor: pointer; } select.inp option { background: var(--ink-700); color: var(--chr-100); } textarea.inp { min-height: 120px; resize: vertical; line-height: 1.6; } .rng { display: grid; gap: .7rem; } .rng input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; background: var(--ink-500); outline: none; cursor: pointer; } .rng input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; background: var(--brand); border: 3px solid var(--ink-900); box-shadow: 0 0 0 1px var(--brand), 0 4px 14px -4px var(--brand); cursor: grab; transition: transform .2s ease; } .rng input[type=range]::-webkit-slider-thumb:active { transform: scale(1.18); cursor: grabbing; } .rng input[type=range]::-moz-range-thumb { width: 16px; height: 16px; background: var(--brand); border: 3px solid var(--ink-900); box-shadow: 0 0 0 1px var(--brand); cursor: grab; } .rng__v { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--f-mono); font-size: .74rem; color: var(--chr-500); } .rng__v b { font-size: 1.15rem; color: var(--brand-ink); font-weight: 600; } .out__lab { font-family: var(--f-mono); font-size: .67rem; letter-spacing: .18em; text-transform: uppercase; color: var(--chr-500); } .out__val { font-family: var(--f-display); font-size: clamp(2.5rem,5.8vw,4rem); line-height: 1; color: var(--chr-100); margin-block: .55rem .3rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .out__val small { font-size: .32em; color: var(--chr-400); letter-spacing: .04em; } .out__note { font-size: .8rem; color: var(--chr-400); line-height: 1.55; } .out__bd { margin: 1.5rem 0; display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); } .out__bd div { display: flex; justify-content: space-between; gap: 1rem; padding: .56rem .8rem; background: var(--ink-850); font-size: .78rem; } .out__bd span { color: var(--chr-400); } .out__bd b { font-family: var(--f-mono); color: var(--chr-100); font-weight: 500; } .out__acts { margin-top: auto; padding-top: 1.6rem; display: grid; gap: .65rem; } .out__fine { font-size: .67rem; color: var(--chr-500); line-height: 1.5; margin-top: .9rem; } /* ---------- 11. Bennes ---------- */ .benne-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .benne { position: relative; padding: 1.5rem 1.3rem; background: var(--ink-850); border: 1px solid var(--hair); text-align: left; transition: all .4s var(--ease); display: flex; flex-direction: column; gap: .45rem; cursor: pointer; } .benne:hover { border-color: var(--hair-3); transform: translateY(-4px); background: var(--ink-750); } .benne.is-on { border-color: var(--brand); background: linear-gradient(160deg, rgba(232,80,14,.1), var(--ink-800)); box-shadow: var(--glow); } .benne__viz { height: 74px; margin-bottom: .4rem; color: var(--chr-500); transition: color .4s ease; } .benne.is-on .benne__viz { color: var(--brand); } .benne__viz svg { width: 100%; height: 100%; } .benne__sz { font-family: var(--f-display); font-size: 1.65rem; color: var(--chr-100); line-height: 1; } .benne__sz small { font-size: .46em; color: var(--chr-400); } .benne__u { font-size: .78rem; color: var(--chr-400); } .benne__tag { position: absolute; top: -1px; right: -1px; font-family: var(--f-mono); font-size: .57rem; letter-spacing: .12em; text-transform: uppercase; padding: .28rem .6rem; background: var(--brand); color: var(--on-brand); font-weight: 700; } /* ---------- 12. Carte d'intervention ---------- Parti pris : une carte technique lisible, pas un radar de jeu vidéo. Chaque valeur est thémée — la version précédente était dessinée pour un fond noir et ses anneaux disparaissaient en thème clair. */ .map-wrap { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: clamp(1.5rem,3vw,3rem); align-items: center; } .radar { position: relative; background: radial-gradient(circle at 50% 42%, var(--rg-bg-1), var(--rg-bg-2) 78%); border: 1px solid var(--hair-2); overflow: hidden; clip-path: var(--cut-l); } .radar svg { width: 100%; height: auto; display: block; } /* Aplat de la zone de couverture courante (0–60 km) : on lit « voilà chez nous » avant même de déchiffrer les graduations. */ .rg-zone { fill: var(--rg-zone); stroke: none; } .rg-ring { fill: none; stroke: var(--rg-line); stroke-width: .5; } .rg-ring--k { stroke: var(--rg-edge); stroke-dasharray: 2.4 2.4; stroke-width: .65; } .rg-cross { stroke: var(--rg-line); } .rg-lab { font-family: var(--f-mono); font-size: 3.5px; fill: var(--chr-400); letter-spacing: .1em; } .rg-dept { font-family: var(--f-display); font-size: 13px; fill: var(--rg-ghost); } .rg-deptn { font-family: var(--f-mono); font-size: 3.3px; fill: var(--rg-deptn); letter-spacing: .16em; } .rg-city { cursor: pointer; } .rg-city circle { fill: var(--rg-dot); transition: fill .25s ease, r .25s ease; } .rg-city text { font-family: var(--f-sans); font-size: 4.3px; font-weight: 600; fill: var(--chr-300); transition: fill .25s ease; } .rg-city:hover circle, .rg-city:focus-visible circle { fill: var(--brand); r: 2.3; } .rg-city:hover text, .rg-city:focus-visible text { fill: var(--chr-100); } /* Le dépôt : losange orange cerclé de la couleur du fond, pour qu'il se détache aussi bien sur papier que sur carbone. */ .rg-hub { fill: var(--brand); stroke: var(--rg-hub-ring); stroke-width: .9; } .rg-hub-name { font-family: var(--f-display); font-size: 6px; fill: var(--chr-100); } .rg-hub-sub { font-family: var(--f-mono); font-size: 3.2px; fill: var(--brand-ink); letter-spacing: .14em; } /* Les stops d'un dégradé SVG acceptent stop-color en CSS : c'est ce qui permet de thémer le balayage sans dupliquer le . */ #sweepG .sw-a { stop-color: var(--rg-sweep); } #sweepG .sw-b { stop-color: var(--rg-sweep); stop-opacity: 0; } .rg-wave { fill: none; stroke: var(--brand); stroke-width: .4; opacity: 0; animation: wave 5s ease-out infinite; } .rg-wave:nth-of-type(2) { animation-delay: 1.7s; } .rg-wave:nth-of-type(3) { animation-delay: 3.4s; } @keyframes wave { 0% { r: 4; opacity: .55; } 100% { r: 92; opacity: 0; } } .rg-sweep { transform-origin: 0 0; animation: sweep 11s linear infinite; } @keyframes sweep { to { transform: rotate(360deg); } } .map-side { display: grid; gap: 1.4rem; } .dept-list { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); } .dept { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: .9rem; padding: .95rem 1rem; background: var(--ink-850); transition: background .3s ease, padding-left .35s var(--ease); } .dept:hover { background: var(--ink-700); padding-left: 1.4rem; } .dept__n { font-family: var(--f-display); font-size: 1.4rem; color: var(--brand-ink); line-height: 1; } .dept__t { font-size: .9rem; color: var(--chr-100); font-weight: 500; } .dept__s { font-size: .72rem; color: var(--chr-500); } .dept__k { font-family: var(--f-mono); font-size: .7rem; color: var(--chr-400); text-align: right; } .hub-card { border: 1px solid var(--brand-hair); background: linear-gradient(160deg, rgba(232,80,14,.07), var(--ink-850)); padding: 1.3rem; } .hub-card h4 { font-family: var(--f-display); font-size: 1.05rem; text-transform: uppercase; color: var(--chr-100); margin-bottom: .5rem; } .hub-card p { font-size: .84rem; color: var(--chr-400); } /* ---------- 13. Process ---------- */ .steps { display: grid; grid-template-columns: repeat(4,1fr); position: relative; } .steps::before { content: ''; position: absolute; top: 27px; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, var(--hair-2) 12%, var(--hair-2) 88%, transparent); } .step { padding: 0 1.1rem; position: relative; } .step__n { width: 54px; height: 54px; display: grid; place-items: center; font-family: var(--f-display); font-size: 1.3rem; color: var(--brand-ink); background: var(--ink-900); border: 1px solid var(--brand-700); margin-bottom: 1.5rem; position: relative; z-index: 2; transition: all .45s var(--ease); clip-path: var(--cut-s); } .step:hover .step__n { background: var(--brand); color: var(--on-brand); border-color: var(--brand); box-shadow: var(--glow); } .step__t { font-family: var(--f-display); font-size: 1.12rem; text-transform: uppercase; color: var(--chr-100); margin-bottom: .55rem; line-height: 1.1; } .step__d { font-size: .85rem; color: var(--chr-400); } .step__meta { margin-top: .8rem; font-family: var(--f-mono); font-size: .67rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-600); } /* ---------- 14. Équipement ---------- */ .rig { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: clamp(2rem,5vw,4.5rem); align-items: center; } .rig__viz { position: relative; background: linear-gradient(150deg, var(--ink-700), var(--void)); border: 1px solid var(--hair); padding: clamp(1.4rem,3vw,2.4rem); clip-path: var(--cut-l); overflow: hidden; } .rig__viz::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 55% at 68% 22%, rgba(232,80,14,.13), transparent 68%); pointer-events: none; } .rig__specs { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); margin-top: 2rem; } .spec { padding: 1.05rem 1.1rem; background: var(--ink-850); } .spec__v { font-family: var(--f-display); font-size: 1.42rem; color: var(--chr-100); line-height: 1; } .spec__v small { font-size: .45em; color: var(--brand-ink); } .spec__l { margin-top: .35rem; font-size: .69rem; letter-spacing: .1em; text-transform: uppercase; color: var(--chr-500); } /* ---------- 15. Avis ---------- */ .revs { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; } .rev { padding: 1.7rem; background: var(--ink-850); border: 1px solid var(--hair); display: flex; flex-direction: column; gap: 1rem; transition: all .45s var(--ease); position: relative; overflow: hidden; } .rev:hover { transform: translateY(-5px); border-color: var(--brand-hair); box-shadow: var(--lift-2); } .rev__q { position: absolute; top: -20px; right: 8px; font-family: var(--f-display); font-size: 6rem; color: rgba(232,80,14,.05); line-height: 1; } .stars { display: flex; gap: 2px; color: var(--amber); } .stars svg { width: 15px; height: 15px; } .rev__txt { font-size: .93rem; color: var(--chr-200); line-height: 1.66; flex: 1; } .rev__by { display: flex; align-items: center; gap: .8rem; padding-top: .9rem; border-top: 1px solid var(--hair); } .rev__av { width: 38px; height: 38px; display: grid; place-items: center; background: var(--ink-600); border: 1px solid var(--brand-hair); font-family: var(--f-display); font-size: .92rem; color: var(--brand-ink); flex: none; } .rev__n { font-size: .85rem; color: var(--chr-100); font-weight: 500; } .rev__c { font-size: .72rem; color: var(--chr-500); } /* ---------- 16. FAQ ---------- */ .faq { display: grid; gap: 1px; background: var(--hair); border-block: 1px solid var(--hair); } .qa { background: var(--ink-900); } .qa__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.4rem 0; text-align: left; font-size: 1.02rem; font-weight: 500; color: var(--chr-100); transition: color .3s ease; } .qa__q:hover { color: var(--brand-ink); } .qa__ico { width: 30px; height: 30px; flex: none; border: 1px solid var(--hair-2); display: grid; place-items: center; position: relative; transition: all .4s var(--ease); } .qa__ico::before, .qa__ico::after { content: ''; position: absolute; background: var(--chr-300); transition: transform .4s var(--ease), background .3s ease; } .qa__ico::before { width: 11px; height: 1.5px; } .qa__ico::after { width: 1.5px; height: 11px; } .qa.is-open .qa__ico { background: var(--brand); border-color: var(--brand); } .qa.is-open .qa__ico::before, .qa.is-open .qa__ico::after { background: var(--ink-900); } .qa.is-open .qa__ico::after { transform: scaleY(0); } .qa__a { overflow: hidden; height: 0; transition: height .5s var(--ease); } .qa__a > div { padding: 0 3rem 1.6rem 0; font-size: .93rem; color: var(--chr-400); line-height: 1.7; } .qa__a strong { color: var(--chr-200); font-weight: 600; } /* ---------- 17. CTA / Contact ---------- */ .cta-band { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--brand) 0%, var(--brand) 55%, var(--brand-600)); isolation: isolate; } .cta-band::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.14) 0 22px, transparent 22px 44px); opacity: .6; } .cta-band__in { display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; flex-wrap: wrap; padding-block: clamp(2.4rem,5vw,3.8rem); } .cta-band .display { color: var(--on-brand); } .cta-band p { color: var(--on-brand); max-width: 46ch; margin-top: .7rem; font-weight: 500; } .contact-g { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.82fr); gap: clamp(2rem,4vw,3.5rem); } .cbox { border: 1px solid var(--hair); background: var(--ink-850); padding: clamp(1.5rem,3vw,2.2rem); } .cbox + .cbox { margin-top: 1.2rem; } .cbox h4 { font-family: var(--f-display); font-size: 1.1rem; text-transform: uppercase; color: var(--chr-100); margin-bottom: 1.1rem; } .crow { display: flex; align-items: flex-start; gap: .9rem; padding: .72rem 0; border-bottom: 1px solid var(--hair); } .crow:last-child { border-bottom: 0; padding-bottom: 0; } .crow svg { width: 18px; height: 18px; color: var(--brand); flex: none; margin-top: 3px; } .crow__k { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--chr-500); } .crow__v { font-size: .95rem; color: var(--chr-100); } .crow__v a:hover { color: var(--brand-ink); } .hours { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); } .hrow { display: flex; justify-content: space-between; gap: 1rem; padding: .68rem .9rem; background: var(--ink-800); font-size: .86rem; } .hrow.is-now { background: rgba(232,80,14,.11); box-shadow: inset 2px 0 0 var(--brand); } .hrow span { color: var(--chr-300); } .hrow b { font-family: var(--f-mono); font-size: .82rem; color: var(--chr-100); font-weight: 500; } .form-g { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } .form-g .span-2 { grid-column: 1 / -1; } .consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .76rem; color: var(--chr-400); line-height: 1.55; } .consent input { margin-top: .25rem; accent-color: var(--brand); width: 16px; height: 16px; flex: none; } /* ---------- 18. Footer ---------- */ .foot { border-top: 1px solid var(--hair); background: var(--void); padding-block: clamp(3rem,6vw,4.5rem) 0; } .foot__g { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 3rem; } .foot h5 { font-family: var(--f-mono); font-size: .67rem; letter-spacing: .2em; text-transform: uppercase; color: var(--chr-500); margin-bottom: 1.1rem; } .foot ul { display: grid; gap: .55rem; } .foot ul a { font-size: .86rem; color: var(--chr-300); transition: color .25s ease, padding-left .3s var(--ease); display: inline-block; } .foot ul a:hover { color: var(--brand-ink); padding-left: .3rem; } .foot__about { font-size: .86rem; color: var(--chr-400); margin-top: 1.1rem; max-width: 40ch; } .foot__logo { width: 128px; height: auto; margin-bottom: .4rem; } .foot__bar { border-top: 1px solid var(--hair); padding-block: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; font-size: .76rem; color: var(--chr-500); } .foot__bar a:hover { color: var(--brand-ink); } .foot__legal { display: flex; gap: 1.3rem; flex-wrap: wrap; } .seal { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .75rem; border: 1px solid var(--hair); font-family: var(--f-mono); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--chr-400); } .seal svg { width: 14px; height: 14px; color: var(--brand); } /* ---------- 19. Dock mobile ---------- */ .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: none; background: var(--veil-stuck); backdrop-filter: blur(16px); border-top: 1px solid var(--hair-2); padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform .5s var(--ease); } .dock.is-on { transform: none; } .dock__g { display: grid; grid-template-columns: repeat(3,1fr); gap: .4rem; } .dock__b { display: flex; flex-direction: column; align-items: center; gap: .22rem; padding: .55rem .3rem; font-size: .63rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--chr-300); border: 1px solid var(--hair); } .dock__b svg { width: 19px; height: 19px; } .dock__b--brand { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } .dock__b--wa { color: #25D366; border-color: rgba(37,211,102,.35); } /* ---------- 20. Reveal ---------- */ [data-rv] { opacity: 0; transform: translateY(26px); transition: opacity .85s var(--ease), transform .85s var(--ease); } [data-rv].is-in { opacity: 1; transform: none; } [data-rv][data-rv-d="1"] { transition-delay: .08s; } [data-rv][data-rv-d="2"] { transition-delay: .16s; } [data-rv][data-rv-d="3"] { transition-delay: .24s; } [data-rv][data-rv-d="4"] { transition-delay: .32s; } [data-rv][data-rv-d="5"] { transition-delay: .4s; } /* ---------- 21. Toast ---------- */ .toast { position: fixed; bottom: 24px; right: 24px; z-index: 9997; max-width: 360px; padding: 1rem 1.2rem; background: var(--ink-700); border: 1px solid var(--hair-2); border-left: 3px solid var(--brand); box-shadow: var(--lift-2); transform: translateY(20px); opacity: 0; pointer-events: none; transition: all .5s var(--ease); font-size: .87rem; color: var(--chr-100); } .toast.is-on { transform: none; opacity: 1; } /* ---------- 22. Pages internes ---------- */ .phero { position: relative; padding-block: clamp(3.2rem,7vw,5.5rem) clamp(2.8rem,6vw,4.2rem); background: radial-gradient(80% 100% at 72% 0%, rgba(232,80,14,.15), transparent 62%), linear-gradient(180deg, var(--void), var(--ink-900)); border-bottom: 1px solid var(--hair); overflow: hidden; } .crumbs { display: flex; align-items: center; gap: .55rem; font-family: var(--f-mono); font-size: .69rem; letter-spacing: .1em; text-transform: uppercase; color: var(--chr-500); margin-bottom: 1.4rem; flex-wrap: wrap; } .crumbs a:hover { color: var(--brand-ink); } .crumbs i { font-style: normal; color: var(--chr-600); } .prose { max-width: 72ch; } .prose h2 { font-family: var(--f-display); font-size: clamp(1.5rem,3vw,2.05rem); text-transform: uppercase; color: var(--chr-100); margin-block: 2.5rem 1rem; line-height: 1.06; } .prose h3 { font-size: 1.08rem; font-weight: 600; color: var(--chr-100); margin-block: 1.8rem .6rem; } .prose p { margin-bottom: 1.1rem; color: var(--chr-300); } .prose ul { display: grid; gap: .6rem; margin-bottom: 1.4rem; } .prose ul li { position: relative; padding-left: 1.35rem; color: var(--chr-300); } .prose ul li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; background: var(--brand); transform: rotate(45deg); } .prose strong { color: var(--chr-100); font-weight: 600; } .prose a:not(.btn) { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; } .aside-card { position: sticky; top: 100px; border: 1px solid var(--brand-hair); background: linear-gradient(165deg, rgba(232,80,14,.06), var(--ink-850)); padding: 1.6rem; } .split { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: clamp(2rem,4vw,3.5rem); align-items: start; } .tbl { width: 100%; border-collapse: collapse; font-size: .88rem; } .tbl th, .tbl td { padding: .78rem 1rem; text-align: left; border-bottom: 1px solid var(--hair); } .tbl th { font-family: var(--f-mono); font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: var(--chr-500); background: var(--ink-850); } .tbl td { color: var(--chr-300); } .tbl tbody tr { transition: background .25s ease; } .tbl tbody tr:hover { background: var(--ink-850); } .tbl td b { color: var(--brand-ink); font-family: var(--f-mono); font-weight: 600; } .tbl-scroll { overflow-x: auto; border: 1px solid var(--hair); } /* ---------- 23. Tunnel de devis ---------- */ .wiz { display: grid; grid-template-columns: 290px minmax(0,1fr); gap: clamp(1.5rem,4vw,3.5rem); align-items: start; } .wiz__rail { position: sticky; top: 100px; display: grid; } .rail-step { display: grid; grid-template-columns: 34px 1fr; gap: .9rem; padding: .9rem 0; position: relative; opacity: .72; transition: opacity .45s ease; } .rail-step::before { content: ''; position: absolute; left: 16.5px; top: 44px; bottom: -10px; width: 1px; background: var(--hair-2); } .rail-step:last-child::before { display: none; } .rail-step.is-on, .rail-step.is-done { opacity: 1; } .rail-step__n { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--hair-2); font-family: var(--f-mono); font-size: .78rem; color: var(--chr-300); background: var(--ink-900); transition: all .45s var(--ease); z-index: 2; } .rail-step.is-on .rail-step__n { border-color: var(--brand); color: var(--brand-ink); box-shadow: 0 0 0 4px rgba(232,80,14,.13); } .rail-step.is-done .rail-step__n { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } .rail-step__t { font-size: .9rem; font-weight: 600; color: var(--chr-100); line-height: 1.3; } .rail-step__d { font-size: .74rem; color: var(--chr-400); } .panel { display: none; } .panel.is-on { display: block; animation: panelIn .55s var(--ease); } @keyframes panelIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } } .panel__h { margin-bottom: 1.8rem; } .panel__h h2 { font-family: var(--f-display); font-size: clamp(1.5rem,3vw,2.1rem); text-transform: uppercase; color: var(--chr-100); line-height: 1.05; } .panel__h p { font-size: .92rem; color: var(--chr-400); margin-top: .5rem; } .wiz__nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--hair); } .bigpick { display: grid; grid-template-columns: repeat(auto-fit, minmax(195px,1fr)); gap: .9rem; } .pick { position: relative; padding: 1.4rem 1.2rem; background: var(--ink-850); border: 1px solid var(--hair); text-align: left; transition: all .4s var(--ease); display: flex; flex-direction: column; gap: .4rem; cursor: pointer; } .pick:hover { border-color: var(--hair-3); transform: translateY(-3px); } .pick.is-on { border-color: var(--brand); background: linear-gradient(160deg, rgba(232,80,14,.11), var(--ink-800)); } .pick.is-on::after { content: '✓'; position: absolute; top: .7rem; right: .8rem; width: 20px; height: 20px; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); font-size: .7rem; font-weight: 800; } .pick svg { width: 34px; height: 34px; color: var(--brand); margin-bottom: .4rem; } .pick b { font-size: .97rem; color: var(--chr-100); font-weight: 600; } .pick span { font-size: .78rem; color: var(--chr-400); line-height: 1.5; } .drop { border: 1.5px dashed var(--hair-2); background: var(--ink-850); padding: 2.2rem 1.5rem; text-align: center; transition: all .35s ease; cursor: pointer; } .drop:hover, .drop.is-over { border-color: var(--brand); background: rgba(232,80,14,.06); } .drop svg { width: 36px; height: 36px; color: var(--chr-400); margin: 0 auto .8rem; } .drop b { display: block; color: var(--chr-100); font-size: .95rem; margin-bottom: .3rem; } .drop span { font-size: .78rem; color: var(--chr-500); } .thumbs { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; } .thumb { position: relative; width: 84px; height: 84px; border: 1px solid var(--hair-2); overflow: hidden; } .thumb img { width: 100%; height: 100%; object-fit: cover; } .thumb button { position: absolute; top: 2px; right: 2px; width: 32px; height: 32px; background: rgba(3,5,3,.85); color: #fff; font-size: .8rem; line-height: 1; display: grid; place-items: center; } .thumb button:hover { background: var(--brand); color: var(--on-brand); } .recap { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); } .recap__r { display: grid; grid-template-columns: 160px 1fr; gap: 1rem; padding: .78rem 1rem; background: var(--ink-850); font-size: .87rem; } .recap__r dt { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--chr-500); align-self: center; } .recap__r dd { color: var(--chr-100); margin: 0; } .done { text-align: center; padding: clamp(2rem,5vw,4rem) 0; } .done__ico { width: 84px; height: 84px; margin: 0 auto 1.8rem; display: grid; place-items: center; border: 1px solid var(--brand); color: var(--brand); background: rgba(232,80,14,.08); clip-path: var(--cut-m); } .done__ico svg { width: 38px; height: 38px; } /* ---------- 24. Responsive ---------- */ @media (max-width: 1180px) { .svc-g { grid-template-columns: repeat(2,1fr); } .foot__g { grid-template-columns: 1fr 1fr; gap: 2rem; } } @media (max-width: 1020px) { .nav__links { display: none; } .nav__cta .btn--ghost { display: none; } .burger { display: flex; } .hero__grid-l { grid-template-columns: 1fr; gap: 2.5rem; } .tool__g { grid-template-columns: 1fr; } .tool__out { border-left: 0; border-top: 1px solid var(--hair); } .map-wrap, .rig, .contact-g, .split, .wiz { grid-template-columns: minmax(0, 1fr); } .steps { grid-template-columns: repeat(2,1fr); row-gap: 2.5rem; } .steps::before { display: none; } .step { padding-inline: 0; } .revs { grid-template-columns: 1fr; } .aside-card { position: static; } .wiz__rail { position: static; grid-template-columns: repeat(4,1fr); gap: .5rem; margin-bottom: 2rem; } .rail-step { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: .5rem; padding: .6rem .3rem; } .rail-step::before { display: none; } .rail-step__d { display: none; } .rail-step__t { font-size: .74rem; } } @media (max-width: 760px) { .topbar__left .tb-item:not(.status) { display: none; } .kpis__g { grid-template-columns: repeat(2,1fr); } .kpi:nth-child(2) { border-right: 0; } .kpi:nth-child(-n+2) { border-bottom: 1px solid var(--hair); } .svc-g { grid-template-columns: 1fr; } .svc { min-height: 0; } .form-g { grid-template-columns: 1fr; } .foot__g { grid-template-columns: 1fr; } .dock { display: block; } body { padding-bottom: 74px; } .toast { left: 12px; right: 12px; bottom: 84px; max-width: none; } .recap__r { grid-template-columns: 1fr; gap: .2rem; } .cta-band__in { flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { .steps { grid-template-columns: 1fr; } .hero__acts .btn { width: 100%; } .wiz__rail { grid-template-columns: repeat(2,1fr); } } @media print { .nav, .topbar, .dock, .grain, .readbar, .cta-band { display: none !important; } body { background: #fff; color: #000; } } /* ---------- 26. Logo client (fichier réel) ---------- Dès que assets/img/logo.png existe, il remplace la marque vectorielle. Si le fichier manque, onerror retire l' et le SVG reprend la main. */ .brand__img { height: 54px; width: auto; flex: none; transition: transform .6s var(--ease); } .brand:hover .brand__img { transform: scale(1.04); } .brand:has(.brand__img) .brand__mark, .brand:has(.brand__img) .brand__txt { display: none; } .foot .brand__img { height: 74px; } @media (max-width: 520px) { .brand__img { height: 44px; } } /* ---------- 26. Bascule de thème ---------- */ .theme-t { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 1px solid var(--hair-2); background: transparent; color: var(--chr-300); cursor: pointer; transition: color .3s ease, border-color .3s ease, background .3s ease; clip-path: var(--cut-s); } .theme-t:hover { color: var(--brand-ink); border-color: var(--brand); background: rgba(232,80,14,.07); } .theme-t svg { width: 18px; height: 18px; } /* Soleil visible en sombre (= « passer en clair »), lune visible en clair */ .theme-t .t-sun { display: none; } .theme-t .t-moon { display: block; } [data-theme="dark"] .theme-t .t-sun { display: block; } [data-theme="dark"] .theme-t .t-moon { display: none; } /* Le logo client bascule d'une variante à l'autre selon le thème */ .brand__img--dark { display: none; } [data-theme="dark"] .brand__img--dark { display: block; } [data-theme="dark"] .brand__img--light { display: none; } /* Transition douce du thème, sauf pour qui préfère moins d'animation */ @media (prefers-reduced-motion: no-preference) { body, .nav, .topbar, .foot, .svc, .cbox, .flash, .tool { transition: background-color .35s ease, color .35s ease, border-color .35s ease; } } /* ---------- 27. Correctifs d'audit — parcours mobile ---------- */ /* Le résultat des outils interactifs doit rester visible pendant qu'on manipule les réglages. Empilé sous le formulaire, le prix se trouvait 400 px plus bas, hors écran : on bougeait un curseur à l'aveugle. */ @media (max-width: 1020px) { .tool__out { order: -1; } .tool__g { display: flex; flex-direction: column; } /* Un artisan consulte souvent depuis une tablette posée dans le camion. Entre 760 et 1020 px il n'existait aucun bouton d'appel permanent. */ .dock { display: block; } body { padding-bottom: 74px; } } /* Sous 480 px, « Retour » + « Envoyer la demande » réclamaient 374 px pour 335 px disponibles : le libellé du bouton final était rogné. */ @media (max-width: 480px) { .wiz__nav { flex-wrap: wrap; } .wiz__nav .btn { flex: 1 1 100%; } .wiz__nav [data-wiz-next] { order: -1; } } /* La barre du haut masquait le secteur d'intervention — la seule information qui répond à « est-ce qu'il vient chez moi ? » — tout en gardant une adresse e-mail que personne ne saisit au pouce. */ @media (max-width: 760px) { .topbar__right a[href^="mailto"] { display: none; } .topbar__left .tb-item:not(.status) { display: inline-flex; } } /* Cible tactile de la case de consentement, en fin de tunnel. */ .consent input { width: 22px; height: 22px; } /* ---------- 28. Correctifs d'audit — responsive mesuré ---------- Mesures faites dans Chrome réel (CDP) sur 12 largeurs, thèmes clair et sombre. Les valeurs commentées sont celles constatées avant correctif, pas des estimations. */ .rg-cross { stroke: var(--rg-line); } /* Repère unique pour la hauteur du header collant : il valait 96, 100, 100 et 110 px à quatre endroits différents pour une hauteur réelle de 77 px. Les ancres tombaient donc à côté. */ :root { --nav-h: 77px; --dock-h: 75px; } html { scroll-padding-top: calc(var(--nav-h) + 8px); } .aside-card, .wiz__rail { top: calc(var(--nav-h) + 16px); } /* B3 — zone morte 1021→1083 px : l'en-tête réclamait 1084 px alors que la navigation bureau n'était masquée qu'à 1020. La bascule de thème sortait de l'écran et le header passait de 77 à 84 px. */ @media (max-width: 1090px) { .nav__links { display: none; } .nav__cta .btn--ghost { display: none; } .burger { display: flex; } } /* I1 + I2 — le dock mesure 75 px et son padding intègre la zone sûre de l'iPhone, mais la compensation du body l'ignorait : 34 px de contenu passaient dessous. Le toast, lui, restait sous le dock entre 761 et 1020 px — donc invisible après envoi d'un formulaire. */ @media (max-width: 1020px) { body { padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom)); } .toast { left: 12px; right: 12px; max-width: none; bottom: calc(var(--dock-h) + 12px + env(safe-area-inset-bottom)); } } /* B1 — LE PLUS GRAVE : .brand et .nav__cta étaient tous deux en flex:none avec un gap de 24 px. L'en-tête réclamait 450 px pour 280 à 374 disponibles, et body{overflow-x:hidden} masquait le débordement : le bouton menu était hors écran de 320 à 401 px, soit la totalité du parc téléphone, sur les 7 pages. */ @media (max-width: 700px) { .nav__in { gap: .6rem; min-height: 64px; } .brand { flex: 0 1 auto; min-width: 0; } .brand__txt { min-width: 0; } .brand__n1 { font-size: .95rem; } .brand__n2 { font-size: .62rem; letter-spacing: .16em; } .brand__mark { width: 36px; height: 36px; } .nav__cta { gap: .5rem; } .nav__cta .btn--sm { display: none; } /* le dock porte déjà « Devis » */ } /* B4 — la carte radar est en unités SVG, donc à l'échelle du rendu : les noms de villes tombaient à 6,3 px sur un écran de 320. */ @media (max-width: 700px) { /* Grossir les noms pour rester lisibles les fait entrer en collision : Vesoul sous Belfort, « Baume-les-Dames » débordant du cadre. Sur téléphone on ne garde donc que les sept repères qui situent la zone — les autres conservent leur point, sans étiquette. La liste des départements, juste en dessous, cite de toute façon les communes. */ .rg-city text { font-size: 6.2px; } .rg-city--s text { display: none; } .rg-deptn { display: none; } /* passait par-dessus Vesoul */ .rg-dept { font-size: 16px; } .rg-lab { font-size: 4.6px; } /* au-delà, « 90 KM » touche le bord */ } /* I4 — les deux voiles du bandeau faisaient 110 px fixes, soit 69 % de la largeur à 320 px : il ne restait que du dégradé. */ .ticker::before, .ticker::after { width: clamp(28px, 12vw, 110px); } /* I5 — la barre du haut, dessinée pour 40 px, montait à 111 px à 320 px. Avec le header, 28 % de l'écran étaient consommés avant le contenu. */ @media (max-width: 480px) { .topbar__in { flex-wrap: wrap; row-gap: .2rem; } .topbar__right a[href^="mailto"] { display: none; } } /* I6 — plancher typographique. 48 classes sous 14 px, sans aucun ajustement mobile. Le pire : les libellés du dock à 10,1 px, alors que chaque cellule fait 139 px de large. */ @media (max-width: 760px) { .dock__b { font-size: .8rem; letter-spacing: .04em; } .consent { font-size: .85rem; } .eyebrow, .out__lab, .crow__k { font-size: .78rem; letter-spacing: .14em; } } /* I7 — les réponses de FAQ faisaient 118 caractères par ligne. */ .qa__a > div { max-width: 68ch; padding: 0 1rem 1.6rem 0; } /* I13 — deux colonnes maintenues jusqu'à 320 px : 131 px utiles pour des libellés en majuscules espacées. */ @media (max-width: 420px) { .rig__specs { grid-template-columns: 1fr; } } /* I11 — chiffres tabulaires : les compteurs animés dansaient pendant le décompte, et les colonnes de prix n'étaient pas alignées. */ .kpi__n, .spec__v, .benne__sz, .dept__k, .hrow b, .tbl td b, .rng__v b, .ticker__i b { font-variant-numeric: tabular-nums; } /* I9 — les ondes du radar tournaient en boucle même hors écran. */ .radar { content-visibility: auto; contain-intrinsic-size: auto 420px; } /* I12 — paysage sur téléphone : 51 % de l'écran en chrome fixe. */ @media (max-height: 520px) and (orientation: landscape) { .hero { min-height: 0; } .hero__in { padding-block: 2rem 0; } .drawer { padding-top: 76px; } .drawer__link { font-size: 1.15rem; padding: .3rem 0; } } /* Cohérence : l'icône de FAQ ouverte doit suivre la même règle que tout texte posé sur l'orange. */ .qa.is-open .qa__ico::before, .qa.is-open .qa__ico::after { background: var(--on-brand); } /* La flèche des