@import url("fonts.css"); /* Ensia · Direction artistique v2 · Encre et laiton Light first : papier et vergé alternés, une seule section encre par page. Le laiton est une épice. Tout chiffre se compose en DM Mono. Radius 2 px. Mode nuit : mêmes règles, fond nuit, laiton clair en accent (voir DESIGN.md). Le thème est posé sur par le script du . */ :root { color-scheme: light; --encre: #0B1220; --nuit: #05070F; --papier: #FBF9F5; --verge: #F1EDE2; --carte: #FFFFFF; --laiton: #9A7B33; --laiton-clair: #C9A75B; --laiton-texte: #7A6226; --lampe: #1F4A38; --lampe-eclairci: #7FB89A; --cire: #8E2F26; --muted: #3F4756; --placeholder: #6E6656; --ligne: rgba(11, 18, 32, 0.14); --ligne-forte: rgba(11, 18, 32, 0.28); --ligne-ctrl: rgba(11, 18, 32, 0.5); --ligne-nuit: rgba(201, 167, 91, 0.22); --nuit-texte: #F3F0E9; --nuit-muted: #A9A395; --texte-sur-encre: #C9CDD6; --nav-fond: rgba(251, 249, 245, 0.92); --laiton-voile: rgba(154, 123, 51, 0.05); --laiton-ligne: rgba(154, 123, 51, 0.45); --lampe-ligne: rgba(31, 74, 56, 0.35); --champ-ligne: rgba(11, 18, 32, 0.2); --fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233F4756' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); --trame-ligne: #0B1220; --trame-laiton: #9A7B33; --bascule-x: 3px; --fd: 'EB Garamond', Georgia, serif; --fs: 'Instrument Sans', 'Helvetica Neue', sans-serif; --fm: 'DM Mono', ui-monospace, 'SF Mono', monospace; --r: 2px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --max: 1120px; --ombre-capture: 0 24px 48px rgba(5, 7, 15, 0.18); } /* Mode nuit : uniquement sur choix explicite (data-theme="dark" posé par le script du ). Light first : aucun repli système. */ :root[data-theme="dark"] { color-scheme: dark; --encre: #F3F0E9; --papier: #05070F; --verge: #080D19; --carte: #0B1220; --laiton: #C9A75B; --laiton-texte: #C9A75B; --lampe: #7FB89A; --cire: #C96B5E; --muted: #C9CDD6; --placeholder: #9A958A; --ligne: rgba(243, 240, 233, 0.12); --ligne-forte: rgba(243, 240, 233, 0.26); --ligne-ctrl: rgba(243, 240, 233, 0.55); --nav-fond: rgba(5, 7, 15, 0.88); --laiton-voile: rgba(201, 167, 91, 0.07); --laiton-ligne: rgba(201, 167, 91, 0.45); --lampe-ligne: rgba(127, 184, 154, 0.4); --champ-ligne: rgba(243, 240, 233, 0.22); --fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23C9CDD6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); --trame-ligne: #F3F0E9; --trame-laiton: #C9A75B; --bascule-x: 23px; --ombre-capture: 0 24px 48px rgba(0, 0, 0, 0.55); } /* Light first : pas de fallback sur la préférence système. Le mode nuit ne s'applique que via [data-theme="dark"], posé par un choix explicite. */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } [id] { scroll-margin-top: 84px; } /* Lien d'évitement : visible uniquement au focus clavier */ .skip-link { position: absolute; top: -48px; left: 16px; z-index: 100; padding: 10px 16px; background: var(--encre); color: var(--papier); border-radius: var(--r); transition: top 0.15s var(--ease); } .skip-link:focus { top: 12px; } /* Texte pour lecteurs d'écran uniquement */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Secteurs non cliquables : distincts des liens */ .secteurs span.s { opacity: 0.6; cursor: default; } body { background: var(--papier); color: var(--encre); font-family: var(--fs); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } ::selection { background: rgba(154, 123, 51, 0.25); } a { color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--laiton); outline-offset: 3px; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px; } /* ---------- Typographie ---------- */ h1, h2 { font-family: var(--fd); font-weight: 500; letter-spacing: 0; text-wrap: balance; } h1 { font-size: clamp(40px, 5.4vw, 60px); line-height: 1.08; } h1 em, h2 em { font-style: italic; font-weight: 500; } h2 { font-size: clamp(30px, 4vw, 42px); line-height: 1.12; } h3 { font-family: var(--fs); font-weight: 600; letter-spacing: -0.005em; } .lede { color: var(--muted); max-width: 62ch; font-size: 17px; } .eyebrow { display: block; font-family: var(--fs); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--laiton-texte); } .num { font-family: var(--fm); font-weight: 500; font-variant-numeric: tabular-nums; } /* Filet double : le code des documents officiels */ .filet { display: block; width: 72px; margin-top: 16px; border-top: 1px solid var(--laiton); padding-top: 3px; border-bottom: 1px solid var(--laiton); } .s-encre .filet { border-color: var(--laiton-clair); } .section-head { max-width: 720px; margin-bottom: clamp(40px, 6vh, 60px); } .section-head .eyebrow { margin-bottom: 18px; } .section-head h2 { margin-bottom: 0; } .section-head .lede { margin-top: 22px; } /* ---------- Boutons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: var(--r); font-size: 14px; font-weight: 600; letter-spacing: 0.01em; transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); } .btn-p { background: var(--encre); color: var(--papier); } .btn-p:hover { box-shadow: inset 0 -2px 0 var(--laiton); } .btn-s { border: 1px solid var(--ligne-ctrl); color: var(--encre); padding: 12px 23px; } .btn-s:hover { border-color: var(--encre); } /* ---------- Interrupteur ---------- */ .switch { position: relative; width: 44px; height: 24px; border-radius: var(--r); background: var(--verge); border: 1px solid var(--ligne-ctrl); transition: background 0.25s var(--ease), border-color 0.25s var(--ease); flex: none; } .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 1px; background: var(--muted); transition: left 0.25s var(--ease), background 0.25s var(--ease); } .switch.on { background: var(--lampe); border-color: var(--lampe); } .switch.on::after { left: 23px; background: var(--papier); } /* La capture produit garde son traitement nuit dans les deux modes : valeurs figées. */ .capture .switch { background: #10151F; border-color: rgba(201, 167, 91, 0.35); } .capture .switch::after { background: var(--nuit-muted); } .capture .switch.on { background: #1F4A38; border-color: #1F4A38; } .capture .switch.on::after { background: var(--nuit-texte); } /* ---------- Bascule jour / nuit ---------- */ .theme-toggle { position: relative; flex: none; width: 44px; height: 24px; border: 1px solid var(--ligne-ctrl); border-radius: var(--r); background: var(--verge); transition: background 0.25s var(--ease), border-color 0.25s var(--ease); } .theme-toggle::after { content: ""; position: absolute; top: 3px; left: var(--bascule-x); width: 16px; height: 16px; border-radius: 1px; background: var(--laiton); transition: left 0.25s var(--ease), background 0.25s var(--ease); } .theme-toggle:hover { border-color: var(--laiton); } /* Pictos soleil / lune : le carré laiton recouvre le mode courant, l'icône visible indique le mode obtenu au clic. */ .theme-toggle .tt-ic { position: absolute; top: 5px; color: var(--muted); pointer-events: none; } .theme-toggle .tt-sun { left: 5px; } .theme-toggle .tt-moon { right: 5px; } /* ---------- Navigation ---------- */ header.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; background: var(--nav-fond); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--ligne); } .nav-inner { display: flex; align-items: center; gap: 18px; height: 68px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--fd); font-weight: 600; font-size: 17px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre); } .brand svg { flex: none; } /* Le laiton du logo suit le thème (l'attribut SVG sert de repli). */ .brand svg [stroke="#9A7B33"] { stroke: var(--laiton); } .brand svg [fill="#9A7B33"] { fill: var(--laiton); } nav.links { display: flex; gap: 2px; align-items: center; margin-left: auto; } nav.links a.tab { padding: 8px 14px; border-radius: var(--r); font-size: 14px; font-weight: 500; color: var(--muted); transition: color 0.18s; } nav.links a.tab:hover { color: var(--encre); } nav.links .btn { margin-left: 10px; padding: 9px 18px; font-size: 13px; } .burger { display: none; margin-left: auto; width: 40px; height: 40px; border: 1px solid var(--ligne-ctrl); border-radius: var(--r); align-items: center; justify-content: center; color: var(--encre); } @media (max-width: 920px) { .burger { display: flex; } nav.links { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 14px 20px 22px; background: var(--papier); border-bottom: 1px solid var(--ligne-forte); } nav.links.open { display: flex; } nav.links a.tab { padding: 12px 14px; } nav.links .btn { margin: 10px 0 0; } } /* ---------- Trame : flux d'automatisation ---------- */ .trame { position: absolute; inset: 0; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 26%, transparent 42%, transparent 58%, #000 74%, #000 100%); mask-image: linear-gradient(90deg, #000 0%, #000 26%, transparent 42%, transparent 58%, #000 74%, #000 100%); } .trame svg { width: 100%; height: 100%; } /* Les couleurs de la trame suivent le thème (les attributs SVG servent de repli). */ .trame g[stroke="#0B1220"] { stroke: var(--trame-ligne); } .trame .lot-ref { fill: var(--trame-laiton); } .trame .lot { stroke: var(--trame-laiton); } /* ---------- Hero ---------- */ .hero { position: relative; padding: 164px 0 0; } .hero .wrap { position: relative; } .hero-grid { display: grid; grid-template-columns: minmax(0, 720px); justify-content: center; text-align: center; } .hero-copy h1 { margin-inline: auto; } .hero-copy .lede { margin-inline: auto; } .hero-copy .hero-ctas { justify-content: center; } .hero-copy .eyebrow { margin-bottom: 22px; } .hero-copy h1 { max-width: 16ch; } .hero-copy .lede { margin-top: 24px; } .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; } @media (max-width: 980px) { .hero { padding-top: 128px; } .hero-grid { grid-template-columns: 1fr; } } /* Le relevé : quatre faits, un seul cadre */ .releve { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--ligne); border-radius: var(--r); background: var(--carte); margin-top: clamp(48px, 7vh, 72px); } .releve > div { padding: 20px 24px; border-left: 1px solid var(--ligne); } .releve > div:first-child { border-left: none; } .releve small { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .releve b { font-family: var(--fm); font-weight: 500; font-size: 24px; font-variant-numeric: tabular-nums; } .releve b .u { font-size: 14px; color: var(--muted); margin-left: 2px; } .releve .gagne b { color: var(--lampe); } @media (max-width: 760px) { .releve { grid-template-columns: 1fr 1fr; } .releve > div:nth-child(3) { border-left: none; } .releve > div:nth-child(n + 3) { border-top: 1px solid var(--ligne); } } /* ---------- Capture produit, fond nuit ---------- */ .capture { background: var(--nuit); border: 1px solid var(--ligne-nuit); border-radius: var(--r); padding: 18px; box-shadow: var(--ombre-capture); display: flex; flex-direction: column; gap: 14px; color: var(--nuit-texte); } .capture-top { display: flex; align-items: center; gap: 10px; font-family: var(--fm); font-size: 11px; letter-spacing: 0.04em; color: var(--nuit-muted); padding-bottom: 12px; border-bottom: 1px solid rgba(201, 167, 91, 0.14); } .capture-top .sq { width: 6px; height: 6px; background: var(--lampe-eclairci); flex: none; } .capture-top .apercu { margin-left: auto; color: var(--laiton-clair); } .capture-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .capture-kpi { border: 1px solid rgba(201, 167, 91, 0.14); border-radius: var(--r); padding: 12px 14px; } .capture-kpi small { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nuit-muted); margin-bottom: 6px; } .capture-kpi b { font-family: var(--fm); font-weight: 500; font-size: 22px; font-variant-numeric: tabular-nums; color: var(--laiton-clair); } .capture-mod { display: flex; align-items: center; gap: 12px; border: 1px solid rgba(201, 167, 91, 0.14); border-radius: var(--r); padding: 12px 14px; } .capture-mod b { font-size: 14px; display: block; font-weight: 600; } .capture-mod small { font-family: var(--fm); font-size: 11px; color: var(--lampe-eclairci); } .capture-mod small.off { color: var(--nuit-muted); } .capture-mod .switch { margin-left: auto; } .capture-feed { list-style: none; display: flex; flex-direction: column; min-height: 138px; } .capture-feed li { display: flex; gap: 10px; padding: 8px 2px; border-bottom: 1px solid rgba(201, 167, 91, 0.1); font-size: 13px; color: var(--nuit-muted); } @media (prefers-reduced-motion: no-preference) { .capture-feed li { animation: entree 0.4s var(--ease); } } @keyframes entree { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .capture-feed li:last-child { border-bottom: none; } .capture-feed .t { font-family: var(--fm); font-size: 11px; color: var(--nuit-muted); flex: none; width: 72px; white-space: nowrap; padding-top: 2px; } .capture-feed .tag { font-family: var(--fm); font-size: 11px; color: var(--laiton-clair); margin-right: 6px; white-space: nowrap; } .capture-note { font-family: var(--fm); font-size: 11px; color: var(--nuit-muted); text-align: center; letter-spacing: 0.03em; } /* ---------- Sections ---------- */ section { padding: clamp(72px, 11vh, 116px) 0; } .s-verge { background: var(--verge); } .s-verge .releve { background: var(--papier); } /* La section encre garde son traitement dans les deux modes : valeurs figées. */ .s-encre { background: #0B1220; color: #FBF9F5; } .s-encre .lede { color: var(--texte-sur-encre); } .s-encre .eyebrow { color: var(--laiton-clair); } /* Le constat : trois lignes de relevé */ .constat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); } .constat-item { border-top: 1px solid var(--ligne-forte); padding-top: 22px; } .constat-item .big { font-family: var(--fm); font-weight: 500; font-size: clamp(30px, 3.6vw, 40px); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .constat-item p { color: var(--muted); margin-top: 14px; font-size: 15px; } .constat-item p strong { color: var(--encre); font-weight: 600; } @media (max-width: 760px) { .constat-grid { grid-template-columns: 1fr; gap: 26px; } } /* Les modules : quatre parcelles d'un même plan */ .plots { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ligne); border-radius: var(--r); background: var(--carte); overflow: hidden; } .plot { padding: clamp(24px, 3vw, 34px); position: relative; transition: background 0.25s var(--ease); } .plot:nth-child(even) { border-left: 1px solid var(--ligne); } .plot:nth-child(n + 3) { border-top: 1px solid var(--ligne); } .plot:hover { background: var(--laiton-voile); } .plot .ref { font-family: var(--fm); font-size: 11px; letter-spacing: 0.08em; color: var(--laiton-texte); margin-bottom: 14px; } .plot h3 { font-size: 20px; margin-bottom: 10px; } .plot p { color: var(--muted); font-size: 15px; } .plot .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .plot .tags span { display: inline-flex; align-items: center; gap: 7px; font-family: var(--fm); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); border: 1px solid var(--ligne); border-radius: var(--r); padding: 4px 10px; } .plot .tags span::before { content: ""; width: 5px; height: 5px; background: var(--laiton); } .plot .tags span.hl { color: var(--lampe); border-color: var(--lampe-ligne); } .plot .tags span.hl::before { background: var(--lampe); } @media (max-width: 640px) { .plots { grid-template-columns: 1fr; } .plot:nth-child(even) { border-left: none; } .plot:nth-child(n + 2) { border-top: 1px solid var(--ligne); } } .switchnote { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-family: var(--fm); font-size: 13px; color: var(--muted); } /* Comment ça marche : le procès-verbal en quatre étapes */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 44px); } .step { border-top: 1px solid var(--ligne-forte); padding-top: 20px; } .step .n { font-family: var(--fm); font-size: 11px; letter-spacing: 0.1em; color: var(--laiton-texte); } .step h3 { font-size: 17px; margin: 12px 0 8px; } .step p { color: var(--muted); font-size: 14px; } .step .d { display: inline-block; font-family: var(--fm); font-size: 11px; letter-spacing: 0.04em; color: var(--encre); border: 1px solid var(--ligne); border-radius: var(--r); background: var(--papier); padding: 4px 10px; margin-top: 16px; } @media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } } /* Secteurs */ .secteurs { border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); padding: 26px 0; } .secteurs .wrap { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; } .secteurs .t { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-right: 10px; } .secteurs .s, .secteurs a.s { font-family: var(--fm); font-size: 12px; letter-spacing: 0.03em; color: var(--muted); border: 1px solid var(--ligne); border-radius: var(--r); padding: 6px 13px; transition: color 0.18s, border-color 0.18s; } .secteurs a.s { color: var(--encre); } .secteurs a.s:hover { border-color: var(--laiton); color: var(--laiton-texte); } /* Tarifs : l'extrait de tarif */ .devis { border: 1px solid var(--ligne); border-radius: var(--r); background: var(--carte); display: grid; grid-template-columns: 1fr 1.25fr; } .devis-main { padding: clamp(28px, 4vw, 44px); border-right: 1px solid var(--ligne); } .devis-main .ref { font-family: var(--fm); font-size: 11px; letter-spacing: 0.08em; color: var(--laiton-texte); border-bottom: 1px solid var(--ligne); padding-bottom: 14px; margin-bottom: 22px; } .devis-main .eyebrow { margin-bottom: 24px; } .devis-main .amount { display: flex; align-items: baseline; gap: 10px; } .devis-main .amount b { font-family: var(--fm); font-weight: 500; font-size: clamp(44px, 5vw, 56px); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .devis-main .amount span { font-family: var(--fm); font-size: 15px; color: var(--muted); } .devis-main .per { font-family: var(--fm); font-size: 12px; letter-spacing: 0.05em; color: var(--laiton-texte); margin-top: 8px; } .devis-main p.note { color: var(--muted); font-size: 14px; margin-top: 22px; max-width: 32ch; } .devis-feats { list-style: none; align-self: center; padding: clamp(14px, 2vw, 22px) clamp(24px, 3vw, 40px); } .devis-feats li { display: flex; gap: 12px; align-items: baseline; font-size: 15px; color: var(--muted); padding: 13px 0; border-bottom: 1px solid var(--ligne); } .devis-feats li:last-child { border-bottom: none; } .devis-feats li::before { content: ""; width: 6px; height: 6px; flex: none; background: var(--lampe); transform: translateY(-2px); } .devis-feats li strong { color: var(--encre); font-weight: 600; } @media (max-width: 760px) { .devis { grid-template-columns: 1fr; } .devis-main { border-right: none; border-bottom: 1px solid var(--ligne); } } /* Engagements : la section encre */ .conv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); } .conv { border-top: 1px solid var(--ligne-nuit); padding-top: 22px; } .conv .ref { font-family: var(--fm); font-size: 11px; letter-spacing: 0.08em; color: var(--laiton-clair); margin-bottom: 14px; } .conv h3 { font-size: 20px; margin-bottom: 12px; color: #FBF9F5; } .conv h3 .z { color: var(--laiton-clair); } .conv p { color: var(--texte-sur-encre); font-size: 15px; } @media (max-width: 860px) { .conv-grid { grid-template-columns: 1fr; gap: 26px; } } /* Témoignages pilotes */ .quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } blockquote { border: 1px solid var(--ligne); border-radius: var(--r); background: var(--carte); padding: 28px 28px 24px; position: relative; } blockquote .pilote { position: absolute; top: 20px; right: 20px; font-family: var(--fm); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--laiton-texte); border: 1px solid var(--laiton-ligne); border-radius: var(--r); padding: 3px 9px; } blockquote p { font-family: var(--fd); font-size: 20px; line-height: 1.5; padding-right: 56px; } blockquote footer { margin-top: 18px; color: var(--muted); font-size: 13px; font-family: var(--fm); } blockquote footer strong { color: var(--encre); font-weight: 600; display: block; font-family: var(--fs); font-size: 14px; margin-bottom: 2px; } @media (max-width: 760px) { .quotes { grid-template-columns: 1fr; } blockquote p { padding-right: 0; } } /* À propos */ .about-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; } .about-text p { color: var(--muted); margin-bottom: 16px; max-width: 58ch; } .about-text p strong { color: var(--encre); font-weight: 600; } .about-card { background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--r); padding: 28px 26px; } .about-card .filet { margin: 0 0 20px; } .about-card b { display: block; font-size: 17px; font-family: var(--fd); font-weight: 600; letter-spacing: 0.02em; } .about-card small { color: var(--laiton-texte); font-family: var(--fm); font-size: 11px; letter-spacing: 0.04em; } .about-card p { color: var(--muted); font-size: 15px; margin-top: 14px; } .about-card .mail { font-family: var(--fm); font-size: 13px; color: var(--laiton-texte); border-bottom: 1px solid var(--laiton-ligne); padding-bottom: 1px; } .about-card .mail:hover { color: var(--encre); border-color: var(--encre); } @media (max-width: 760px) { .about-grid { grid-template-columns: 1fr; } } /* FAQ */ .faq { max-width: 780px; border-top: 1px solid var(--ligne-forte); } .faq details { border-bottom: 1px solid var(--ligne); } .faq summary { list-style: none; cursor: pointer; padding: 20px 4px; font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 14px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; margin-left: auto; font-family: var(--fm); font-size: 17px; color: var(--laiton-texte); transition: transform 0.25s var(--ease); } .faq details[open] summary::after { transform: rotate(45deg); } .faq .a { padding: 0 4px 22px; color: var(--muted); font-size: 15px; max-width: 66ch; } /* Démo / formulaire */ .contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 64px); align-items: start; } .contact-side .eyebrow { display: inline-flex; align-items: center; gap: 9px; } .contact-side .eyebrow .sq { width: 6px; height: 6px; background: var(--lampe); } .contact-side h2 { margin-top: 20px; } .contact-side .lede { margin-top: 22px; font-size: 16px; } .contact-side .mail { display: inline-block; margin-top: 26px; font-family: var(--fm); font-size: 13px; letter-spacing: 0.03em; color: var(--laiton-texte); border-bottom: 1px solid var(--laiton-ligne); padding-bottom: 2px; transition: color 0.2s; } .contact-side .mail:hover { color: var(--encre); border-color: var(--encre); } form.demo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--r); padding: clamp(24px, 3vw, 36px); } .field { display: flex; flex-direction: column; gap: 8px; } .field.full { grid-column: 1 / -1; } .field label { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .field input, .field select, .field textarea { font-family: var(--fs); color: var(--encre); background: var(--papier); border: 1px solid var(--champ-ligne); border-radius: var(--r); padding: 12px 14px; font-size: 15px; outline: none; transition: border-color 0.18s, box-shadow 0.18s; width: 100%; appearance: none; } .field ::placeholder { color: var(--placeholder); opacity: 1; } .field select { background-image: var(--fleche); background-repeat: no-repeat; background-position: right 13px center; } .field textarea { resize: vertical; min-height: 88px; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--laiton); box-shadow: 0 0 0 1px var(--laiton); } .field .err { display: none; font-size: 13px; color: var(--cire); } .field.invalid input { border-color: var(--cire); box-shadow: 0 0 0 1px var(--cire); } .field.invalid .err { display: block; } form.demo .actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; } form.demo .hint { font-size: 13px; color: var(--muted); max-width: 34ch; } @media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { form.demo { grid-template-columns: 1fr; } } /* Réservation Calendly */ .booking { background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--r); padding: clamp(24px, 3vw, 36px); align-self: start; } .booking .ref { font-family: var(--fm); font-size: 11px; letter-spacing: 0.08em; color: var(--laiton-texte); border-bottom: 1px solid var(--ligne); padding-bottom: 14px; margin-bottom: 20px; } .booking-list { list-style: none; margin-bottom: 26px; } .booking-list li { display: flex; gap: 12px; align-items: baseline; font-size: 15px; color: var(--muted); padding: 12px 0; border-bottom: 1px solid var(--ligne); } .booking-list li:last-child { border-bottom: none; } .booking-list li::before { content: ""; width: 6px; height: 6px; flex: none; background: var(--lampe); transform: translateY(-2px); } .booking .btn-p { width: 100%; } .booking-hint { font-family: var(--fm); font-size: 12px; letter-spacing: 0.02em; color: var(--muted); margin-top: 16px; text-align: center; } /* CTA band (pages secteur) */ .cta-band { border: 1px solid var(--ligne); border-radius: var(--r); background: var(--carte); padding: clamp(36px, 5vw, 56px); text-align: center; } .cta-band .eyebrow { display: inline-flex; align-items: center; gap: 9px; } .cta-band .eyebrow .sq { width: 6px; height: 6px; background: var(--lampe); } .cta-band h2 { max-width: 24ch; margin: 20px auto 0; } .cta-band .filet { margin-left: auto; margin-right: auto; } .cta-band .lede { margin: 20px auto 0; } .cta-band .hero-ctas { justify-content: center; margin-top: 30px; } /* ---------- Footer ---------- */ footer.site { border-top: 1px solid var(--ligne); padding: 56px 0 36px; } .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; } .foot-grid h3 { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--laiton-texte); margin-bottom: 16px; } .foot-grid ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .foot-grid a, .foot-grid li { color: var(--muted); font-size: 14px; } .foot-grid a:hover { color: var(--encre); } .foot-brand p { color: var(--muted); font-size: 14px; max-width: 36ch; margin-top: 16px; } .foot-bottom { margin-top: 46px; padding-top: 20px; border-top: 1px solid var(--ligne); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 12px; font-family: var(--fm); letter-spacing: 0.03em; } .foot-bottom a:hover { color: var(--encre); } @media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } } /* ---------- Pages secondaires ---------- */ .page-hero { position: relative; padding: 168px 0 clamp(48px, 7vh, 72px); } .page-hero .wrap { position: relative; } .page-hero .eyebrow { margin-bottom: 22px; } .page-hero h1 { font-size: clamp(34px, 4.6vw, 52px); max-width: 22ch; } .page-hero .lede { margin-top: 24px; } .page-hero .hero-ctas { margin-top: 30px; } .prose { max-width: 720px; padding-bottom: 96px; } .prose h2 { font-family: var(--fd); font-weight: 500; font-size: 26px; margin: 44px 0 14px; } .prose h3 { font-size: 16px; margin: 26px 0 8px; } .prose p, .prose li { color: var(--muted); font-size: 15px; margin-bottom: 10px; } .prose ul { padding-left: 22px; margin-bottom: 12px; } .prose strong { color: var(--encre); font-weight: 600; } .prose .maj { font-family: var(--fm); font-size: 12px; color: var(--laiton-texte); margin-bottom: 6px; } .prose a { color: var(--encre); border-bottom: 1px solid var(--laiton-ligne); } .prose a:hover { border-color: var(--encre); } /* ---------- Mouvement réduit ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }