/* ========================================================================== Sites exemples Confrère — feuille de style partagée + thèmes par cabinet Chaque page pose une classe de thème sur (t-affaires, t-famille, ...) ========================================================================== */ :root{ --e-bg:#ffffff; --e-surface:#f5f6f8; --e-ink:#12161d; --e-muted:#5b6572; --e-accent:#14233b; --e-gold:#c19a5b; --e-line:rgba(18,22,29,0.1); --e-serif:"Playfair Display", Georgia, serif; --e-sans:"Inter", system-ui, sans-serif; --e-radius:12px; } /* Thème 1 — cabinet d'affaires (institutionnel, navy + or) */ .t-affaires{ --e-bg:#fbfaf7; --e-surface:#f2efe9; --e-ink:#14233b; --e-muted:#5b6472; --e-accent:#14233b; --e-gold:#c19a5b; --e-serif:"Playfair Display",serif; } /* Thème 2 — cabinet moderne / famille (clair, vert sauge + terracotta) */ .t-famille{ --e-bg:#fbf8f3; --e-surface:#f1ebe1; --e-ink:#2a2a28; --e-muted:#6a6a64; --e-accent:#3f6b5e; --e-gold:#cf8b5f; --e-serif:"Fraunces",serif; } /* Thème 3 — avocat solo (minimal, encre + acier) */ .t-solo{ --e-bg:#ffffff; --e-surface:#f4f5f6; --e-ink:#16181c; --e-muted:#616874; --e-accent:#2f3a46; --e-gold:#9a7b45; --e-serif:"Inter",sans-serif; } /* Thème 4 — éditoriale (blog, off-white + prune) */ .t-edito{ --e-bg:#faf7f2; --e-surface:#efe8df; --e-ink:#211a1c; --e-muted:#6d6167; --e-accent:#5e2a3b; --e-gold:#b98a5a; --e-serif:"Playfair Display",serif; } *,*::before,*::after{ box-sizing:border-box; } body{ margin:0; background:var(--e-bg); color:var(--e-ink); font-family:var(--e-sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } h1,h2,h3,h4{ font-family:var(--e-serif); font-weight:600; line-height:1.12; margin:0 0 .5em; } .t-solo h1,.t-solo h2,.t-solo h3{ font-weight:700; letter-spacing:-0.02em; } p{ margin:0 0 1em; color:var(--e-muted); } .wrap{ max-width:1120px; margin:0 auto; padding:0 28px; } .eyebrow{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--e-gold); } .btn{ display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:8px; font-weight:600; font-size:14.5px; border:1px solid transparent; cursor:pointer; transition:.2s; } .btn-p{ background:var(--e-accent); color:#fff; } .btn-p:hover{ opacity:.9; } .btn-o{ background:transparent; border-color:var(--e-line); color:var(--e-ink); } .btn-o:hover{ border-color:var(--e-accent); color:var(--e-accent); } .btn-g{ background:var(--e-gold); color:var(--e-accent); } .btn-g:hover{ filter:brightness(1.06); } /* Barre "démo" en haut */ .demo-bar{ background:var(--e-accent); color:#fff; font-size:13px; text-align:center; padding:9px 16px; } .demo-bar a{ color:var(--e-gold); font-weight:700; } /* Header */ .hd{ position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--e-bg) 90%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--e-line); } .hd .wrap{ display:flex; align-items:center; justify-content:space-between; height:74px; } .brand{ font-family:var(--e-serif); font-size:21px; font-weight:700; color:var(--e-accent); } .t-solo .brand{ font-family:var(--e-sans); letter-spacing:-.02em; } .nav{ display:flex; gap:28px; align-items:center; } .nav a{ font-size:14.5px; color:var(--e-muted); } .nav a:hover{ color:var(--e-ink); } @media(max-width:820px){ .nav{ display:none; } } /* Hero */ .hero{ position:relative; } .hero-img{ min-height:560px; display:flex; align-items:center; background-size:cover; background-position:center; } .hero-img::before{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(8,10,14,.82) 34%, rgba(8,10,14,.35)); } .t-famille .hero-img::before,.t-edito .hero-img::before{ background:linear-gradient(100deg, rgba(250,247,242,.92) 40%, rgba(250,247,242,.4)); } .hero-c{ position:relative; z-index:1; max-width:600px; color:#fff; } .t-famille .hero-c,.t-edito .hero-c{ color:var(--e-ink); } .hero-c h1{ font-size:clamp(34px,5vw,58px); margin:14px 0 18px; color:inherit; } .hero-c .lead{ font-size:18px; opacity:.9; margin-bottom:28px; color:inherit; } .hero-c .eyebrow{ color:var(--e-gold); } /* Sections */ .sec{ padding:84px 0; } .sec-alt{ background:var(--e-surface); } .sec-dark{ background:var(--e-accent); color:#fff; } .sec-dark .eyebrow{ color:var(--e-gold); } .sec-dark p{ color:rgba(255,255,255,.75); } .head{ max-width:640px; margin-bottom:40px; } .head h2{ font-size:clamp(26px,3.4vw,40px); margin:10px 0 12px; } .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; } @media(max-width:860px){ .grid{ grid-template-columns:1fr; } .grid-2{ grid-template-columns:1fr; gap:28px; } } .card{ background:var(--e-bg); border:1px solid var(--e-line); border-radius:var(--e-radius); padding:28px 26px; } .sec-alt .card{ background:var(--e-bg); } .card h3{ font-size:19px; margin-bottom:8px; color:var(--e-accent); } .t-solo .card h3,.t-affaires .card h3{ color:var(--e-accent); } .ic{ width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--e-gold) 18%, transparent); color:var(--e-gold); margin-bottom:16px; } .ic svg{ width:22px; height:22px; } .frame{ border-radius:var(--e-radius); overflow:hidden; aspect-ratio:4/3; background-size:cover; background-position:center; box-shadow:0 30px 60px rgba(0,0,0,.14); } /* Avis Google (conforme) */ .rating{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; } .rating .num{ font-family:var(--e-serif); font-size:46px; font-weight:600; color:var(--e-accent); line-height:1; } .sec-dark .rating .num{ color:#fff; } .stars{ color:var(--e-gold); font-size:20px; letter-spacing:2px; } /* Contact / RDV */ .field{ margin-bottom:16px; } .field label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; } .field input,.field textarea{ width:100%; padding:12px 13px; border:1px solid var(--e-line); border-radius:8px; font-family:inherit; font-size:15px; background:var(--e-bg); color:var(--e-ink); } .field textarea{ min-height:120px; resize:vertical; } .wa{ display:inline-flex; align-items:center; gap:8px; color:#25D366; font-weight:600; font-size:14px; } /* Footer */ .ft{ background:var(--e-accent); color:#fff; padding:40px 0; } .ft .wrap{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; } .ft a{ color:rgba(255,255,255,.75); font-size:14px; } .ft a:hover{ color:var(--e-gold); } .ft small{ color:rgba(255,255,255,.6); font-size:13px; }