/* ========================================================================== FP AVOCATS — Feuille de style du site Conforme à la charte d'identité visuelle validée le 28/08/2026. À coller intégralement dans l'hébergeur : Site → Conception (Design) → Personnaliser → CSS personnalisé (Custom CSS) L'éditeur CSS est disponible sur tous les abonnements. Aucun JavaScript, aucune iframe : compatible plan Basic / Personal. Aucune dépendance externe autre que les Google Fonts ci-dessous. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Variables — palette et typographies de la charte -------------------------------------------------------------------------- */ .fp { --fp-black: #000000; /* texte, filets, boutons, fonds négatifs */ --fp-ink: #1A1A1A; /* nom de marque, titres */ --fp-text: #1A1A1A; --fp-muted: #555555; /* descripteurs, textes secondaires */ --fp-accent: #7A2E3B; /* bordeaux — volute, survols, repères */ --fp-accent-lt: #D4A9AE; /* bordeaux pâle — sur fond noir */ --fp-paper: #EAEAEE; /* gris perle — fond de page */ --fp-blush: #F3E6E9; /* rose pâle, dérivé du bordeaux — bandes claires */ --fp-blush-dp: #EBD8DC; /* rose pâle soutenu — filets, encadrés */ --fp-wine: #6B2733; /* bordeaux profond — survols de liens */ --fp-noir-vin: #3D1319; /* bordeaux presque noir — bandes d'appel */ --fp-white: #FFFFFF; --fp-line: rgba(0,0,0,.16); --fp-line-firm: #000000; --fp-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --fp-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --fp-seal: 'Cormorant Garamond', Georgia, serif; /* réservé au « FP » du sceau */ --fp-max: 1120px; --fp-pad: 24px; } /* -------------------------------------------------------------------------- 2. Réglages l'hébergeur -------------------------------------------------------------------------- */ body { overflow-x: hidden; } .sqs-block-code:has(.fp) { padding: 0 !important; } .fp * { box-sizing: border-box; } /* -------------------------------------------------------------------------- 3. Base -------------------------------------------------------------------------- */ .fp { font-family: var(--fp-sans); color: var(--fp-text); font-size: 16px; line-height: 1.62; font-weight: 300; -webkit-font-smoothing: antialiased; } .fp p { margin: 0 0 .95em; } .fp p:last-child { margin-bottom: 0; } .fp a { color: var(--fp-accent); text-decoration: none; border-bottom: 1px solid var(--fp-accent-lt); transition: color .2s ease, border-color .2s ease; } .fp a:hover { color: var(--fp-wine); border-bottom-color: var(--fp-wine); } .fp a:focus-visible { outline: 1px solid var(--fp-accent); outline-offset: 3px; } /* -------------------------------------------------------------------------- 4. Bandes pleine largeur -------------------------------------------------------------------------- */ .fp-band { position: relative; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; max-width: 100vw; padding: 60px var(--fp-pad); background: var(--fp-white); } .fp-band--tight { padding-top: 42px; padding-bottom: 42px; } .fp-band--paper, .fp-band--cream { background: var(--fp-paper); } .fp-band--cream2 { background: var(--fp-white); border-top: 1px solid var(--fp-line); } .fp-band--blush { background: var(--fp-blush); } .fp-band--white { background: var(--fp-white); } .fp-band--ink { background: var(--fp-black); color: rgba(255,255,255,.80); } /* Bande d'appel : bordeaux presque noir. Assez sombre pour se lire comme un noir chaud plutôt que comme du rouge. Le texte y passe en blanc et le bouton noir de la charte y devient invisible : il prend un contour bordeaux pâle. S'écrit seule : class="fp-band fp-band--wine" */ .fp-band--wine { background: var(--fp-noir-vin); color: rgba(255,255,255,.82); border-top: 1px solid rgba(212,169,174,.22); } .fp-band--wine .fp-h1, .fp-band--wine .fp-h2, .fp-band--wine .fp-h3 { color: #fff; } .fp-band--wine .fp-eyebrow, .fp-band--wine .fp-h4 { color: var(--fp-accent-lt); } .fp-band--wine .fp-lede { color: rgba(255,255,255,.82); } .fp-band--wine .fp-note { color: rgba(255,255,255,.62); } .fp-band--wine .fp-small { color: rgba(255,255,255,.74); } .fp-band--wine .fp-value p, .fp-band--wine .fp-card p, .fp-band--wine .fp-list li { color: rgba(255,255,255,.84); } .fp-band--wine .fp-list li::before { background: var(--fp-accent-lt); } .fp-band--wine a { color: #fff; border-bottom-color: rgba(212,169,174,.55); } .fp-band--wine a:hover { color: var(--fp-accent-lt); border-bottom-color: var(--fp-accent-lt); } .fp-band--wine .fp-rule { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2256%22%20height%3D%2216%22%20viewBox%3D%220%200%2056%2016%22%3E%3Cpath%20d%3D%22M28%204%20C%2020%204%2C%2012%206%2C%208%2011%20C%206%2014%2C%2010%2016%2C%2012%2013%22%20fill%3D%22none%22%20stroke%3D%22%23D4A9AE%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M28%204%20C%2036%204%2C%2044%206%2C%2048%2011%20C%2050%2014%2C%2046%2016%2C%2044%2013%22%20fill%3D%22none%22%20stroke%3D%22%23D4A9AE%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); } /* Boutons de la bande d'appel : contour bordeaux pâle sur le fond sombre. */ .fp-band--wine .fp-btn { background: transparent; border-color: var(--fp-accent-lt); color: #fff !important; } .fp-band--wine .fp-btn:hover { background: var(--fp-accent-lt); border-color: var(--fp-accent-lt); color: var(--fp-noir-vin) !important; } .fp-band--wine .fp-btn--ghost { border-color: rgba(255,255,255,.34); } .fp-band--wine .fp-btn--ghost:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.55); color: #fff !important; } .fp-band--ink .fp-h1, .fp-band--ink .fp-h2, .fp-band--ink .fp-h3 { color: #fff; } .fp-band--ink .fp-eyebrow, .fp-band--ink .fp-h4 { color: var(--fp-accent-lt); } .fp-band--ink .fp-lede, .fp-band--ink .fp-small, .fp-band--ink .fp-note { color: rgba(255,255,255,.7); } /* Textes courants des composants sur fond noir : sans cela ils héritent du gris #555555, illisible sur du noir. */ .fp-band--ink .fp-value p, .fp-band--ink .fp-card p, .fp-band--ink .fp-case p, .fp-band--ink .fp-person p, .fp-band--ink .fp-info p, .fp-band--ink .fp-list li { color: rgba(255,255,255,.72); } .fp-band--ink .fp-list li::before { background: var(--fp-accent-lt); } .fp-band--ink a { color: #fff; border-bottom-color: rgba(255,255,255,.4); } .fp-band--ink a:hover { color: var(--fp-accent-lt); border-bottom-color: var(--fp-accent-lt); } .fp-band--ink .fp-rule { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2256%22%20height%3D%2216%22%20viewBox%3D%220%200%2056%2016%22%3E%3Cpath%20d%3D%22M28%204%20C%2020%204%2C%2012%206%2C%208%2011%20C%206%2014%2C%2010%2016%2C%2012%2013%22%20fill%3D%22none%22%20stroke%3D%22%23D4A9AE%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M28%204%20C%2036%204%2C%2044%206%2C%2048%2011%20C%2050%2014%2C%2046%2016%2C%2044%2013%22%20fill%3D%22none%22%20stroke%3D%22%23D4A9AE%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); } /* L'immeuble du 3, rue de Luynes en filigrane — toujours en marge, jamais sous le texte */ .fp-band--seal::after { content: ''; position: absolute; right: max(24px, calc(50% - var(--fp-max) / 2)); top: 50%; transform: translateY(-50%); width: 200px; height: 260px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22260%22%20viewBox%3D%220%200%20200%20260%22%3E%3Cg%20stroke%3D%22rgba%280%2C0%2C0%2C0.06%29%22%20fill%3D%22none%22%20stroke-width%3D%220.8%22%3E%3Cpath%20d%3D%22M20%2040%20L40%2014%20L160%2014%20L180%2040%22%2F%3E%3Cpath%20d%3D%22M56%2026%20h14%20v14%20M96%2026%20h14%20v14%20M136%2026%20h14%20v14%22%2F%3E%3Cpath%20d%3D%22M14%2042%20L186%2042%20M18%2047%20L182%2047%22%2F%3E%3Crect%20x%3D%2235%22%20y%3D%2256%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Crect%20x%3D%2285%22%20y%3D%2256%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Crect%20x%3D%22135%22%20y%3D%2256%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Cpath%20d%3D%22M25%2098%20L175%2098%22%2F%3E%3Cpath%20d%3D%22M32%2098%20c0%206%2010%206%2010%200%20M42%2098%20c0%206%2010%206%2010%200%20M52%2098%20c0%206%2010%206%2010%200%20M85%2098%20c0%206%2010%206%2010%200%20M95%2098%20c0%206%2010%206%2010%200%20M105%2098%20c0%206%2010%206%2010%200%20M138%2098%20c0%206%2010%206%2010%200%20M148%2098%20c0%206%2010%206%2010%200%20M158%2098%20c0%206%2010%206%2010%200%22%2F%3E%3Crect%20x%3D%2235%22%20y%3D%22112%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Crect%20x%3D%2285%22%20y%3D%22112%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Crect%20x%3D%22135%22%20y%3D%22112%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Cpath%20d%3D%22M32%20154%20L68%20154%20M82%20154%20L118%20154%20M132%20154%20L168%20154%22%2F%3E%3Crect%20x%3D%2235%22%20y%3D%22162%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Crect%20x%3D%2285%22%20y%3D%22162%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Crect%20x%3D%22135%22%20y%3D%22162%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Cpath%20d%3D%22M18%20206%20L182%20206%22%2F%3E%3Crect%20x%3D%2232%22%20y%3D%22216%22%20width%3D%2226%22%20height%3D%2236%22%2F%3E%3Crect%20x%3D%22142%22%20y%3D%22216%22%20width%3D%2226%22%20height%3D%2236%22%2F%3E%3Cpath%20d%3D%22M84%20252%20L84%20226%20A%2016%2016%200%200%201%20116%20226%20L116%20252%22%2F%3E%3Cpath%20d%3D%22M14%20252%20L186%20252%22%2F%3E%3C%2Fg%3E%3Crect%20x%3D%2286%22%20y%3D%2257%22%20width%3D%2228%22%20height%3D%2236%22%20fill%3D%22rgba%28122%2C46%2C59%2C0.07%29%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; pointer-events: none; } .fp-band--ink.fp-band--seal::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22260%22%20viewBox%3D%220%200%20200%20260%22%3E%3Cg%20stroke%3D%22rgba%28255%2C255%2C255%2C0.07%29%22%20fill%3D%22none%22%20stroke-width%3D%220.8%22%3E%3Cpath%20d%3D%22M20%2040%20L40%2014%20L160%2014%20L180%2040%22%2F%3E%3Cpath%20d%3D%22M56%2026%20h14%20v14%20M96%2026%20h14%20v14%20M136%2026%20h14%20v14%22%2F%3E%3Cpath%20d%3D%22M14%2042%20L186%2042%20M18%2047%20L182%2047%22%2F%3E%3Crect%20x%3D%2235%22%20y%3D%2256%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Crect%20x%3D%2285%22%20y%3D%2256%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Crect%20x%3D%22135%22%20y%3D%2256%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Cpath%20d%3D%22M25%2098%20L175%2098%22%2F%3E%3Cpath%20d%3D%22M32%2098%20c0%206%2010%206%2010%200%20M42%2098%20c0%206%2010%206%2010%200%20M52%2098%20c0%206%2010%206%2010%200%20M85%2098%20c0%206%2010%206%2010%200%20M95%2098%20c0%206%2010%206%2010%200%20M105%2098%20c0%206%2010%206%2010%200%20M138%2098%20c0%206%2010%206%2010%200%20M148%2098%20c0%206%2010%206%2010%200%20M158%2098%20c0%206%2010%206%2010%200%22%2F%3E%3Crect%20x%3D%2235%22%20y%3D%22112%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Crect%20x%3D%2285%22%20y%3D%22112%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Crect%20x%3D%22135%22%20y%3D%22112%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Cpath%20d%3D%22M32%20154%20L68%20154%20M82%20154%20L118%20154%20M132%20154%20L168%20154%22%2F%3E%3Crect%20x%3D%2235%22%20y%3D%22162%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Crect%20x%3D%2285%22%20y%3D%22162%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Crect%20x%3D%22135%22%20y%3D%22162%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Cpath%20d%3D%22M18%20206%20L182%20206%22%2F%3E%3Crect%20x%3D%2232%22%20y%3D%22216%22%20width%3D%2226%22%20height%3D%2236%22%2F%3E%3Crect%20x%3D%22142%22%20y%3D%22216%22%20width%3D%2226%22%20height%3D%2236%22%2F%3E%3Cpath%20d%3D%22M84%20252%20L84%20226%20A%2016%2016%200%200%201%20116%20226%20L116%20252%22%2F%3E%3Cpath%20d%3D%22M14%20252%20L186%20252%22%2F%3E%3C%2Fg%3E%3Crect%20x%3D%2286%22%20y%3D%2257%22%20width%3D%2228%22%20height%3D%2236%22%20fill%3D%22rgba%28212%2C169%2C174%2C0.10%29%22%2F%3E%3C%2Fsvg%3E"); } @media (max-width: 1240px) { .fp-band--seal::after { display: none; } } .fp-wrap { max-width: var(--fp-max); margin: 0 auto; } .fp-wrap--narrow { max-width: 720px; } /* Bandeau d'ouverture de l'accueil */ .fp-hero { display: grid; grid-template-columns: 1fr 260px; gap: 64px; align-items: end; } .fp-index { border-left: 1px solid var(--fp-accent); padding-left: 26px; } .fp-band--ink .fp-index { border-left-color: rgba(255,255,255,.35); } .fp-index ul { list-style: none; margin: 0 0 26px; padding: 0; } .fp-index li { margin-bottom: 10px; } .fp-index a { font-family: var(--fp-display); font-weight: 500; font-size: 17px; letter-spacing: -.01em; border-bottom: 1px solid transparent; } .fp-index-foot { font-size: 13.5px; line-height: 1.75; color: var(--fp-muted); margin: 0; } .fp-band--ink .fp-index-foot { color: rgba(255,255,255,.6); } .fp-index-foot span { font-size: 12px; } /* -------------------------------------------------------------------------- 5. Typographie -------------------------------------------------------------------------- */ .fp-eyebrow { font-family: var(--fp-sans); font-size: 11px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; color: var(--fp-accent); margin: 0 0 14px; } .fp-h1 { font-family: var(--fp-display); font-weight: 500; font-size: clamp(34px, 4.8vw, 52px); line-height: 1.14; letter-spacing: -.02em; text-wrap: balance; color: var(--fp-ink); margin: 0 0 18px; } /* Seconde ligne du titre d'accueil : le positionnement, sous la promesse. Corps intermédiaire — elle doit se lire comme une suite du titre, pas comme un chapô, et ne jamais lui disputer l'attention. */ .fp-h1-suite { display: block; font-family: var(--fp-display); font-size: clamp(18px, 2.1vw, 25px); font-weight: 400; line-height: 1.25; letter-spacing: -.01em; color: var(--fp-accent); margin-top: 16px; } .fp-h2 { font-family: var(--fp-display); font-weight: 500; font-size: clamp(24px, 3vw, 33px); line-height: 1.22; letter-spacing: -.02em; text-wrap: balance; color: var(--fp-ink); margin: 0 0 16px; } .fp-h3 { font-family: var(--fp-display); font-weight: 500; font-size: 19px; line-height: 1.35; letter-spacing: -.01em; color: var(--fp-ink); margin: 0 0 12px; } .fp-h4 { font-family: var(--fp-sans); font-size: 11px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--fp-accent); margin: 0 0 10px; } .fp-lede { font-size: clamp(17px, 1.8vw, 19px); line-height: 1.65; color: var(--fp-muted); font-weight: 300; } .fp-small { font-size: 13.5px; color: var(--fp-muted); line-height: 1.7; } .fp-note { font-size: 12.5px; color: var(--fp-muted); line-height: 1.7; } /* Ornement : la volute du sceau */ .fp-rule { width: 34px; height: 12px; border: 0; margin: 0 0 26px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2256%22%20height%3D%2216%22%20viewBox%3D%220%200%2056%2016%22%3E%3Cpath%20d%3D%22M28%204%20C%2020%204%2C%2012%206%2C%208%2011%20C%206%2014%2C%2010%2016%2C%2012%2013%22%20fill%3D%22none%22%20stroke%3D%22%237A2E3B%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M28%204%20C%2036%204%2C%2044%206%2C%2048%2011%20C%2050%2014%2C%2046%2016%2C%2044%2013%22%20fill%3D%22none%22%20stroke%3D%22%237A2E3B%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; } .fp-rule--center { margin-left: auto; margin-right: auto; } .fp-center { text-align: center; } /* -------------------------------------------------------------------------- 6. Boutons — fond noir, angles vifs, survol bordeaux -------------------------------------------------------------------------- */ .fp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .fp-actions--center { justify-content: center; } .fp-btn { display: inline-block; font-family: var(--fp-sans); font-size: 11.5px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; padding: 16px 30px; background: var(--fp-black); color: #fff !important; border: 1px solid var(--fp-black); border-radius: 0; transition: background .2s ease, border-color .2s ease, color .2s ease; } .fp-btn:hover { background: var(--fp-accent); border-color: var(--fp-accent); color: #fff !important; } .fp-btn--ghost { background: transparent; color: var(--fp-black) !important; } .fp-btn--ghost:hover { background: var(--fp-black); border-color: var(--fp-black); color: #fff !important; } .fp-band--ink .fp-btn { background: #fff; border-color: #fff; color: var(--fp-black) !important; } .fp-band--ink .fp-btn:hover { background: var(--fp-accent); border-color: var(--fp-accent); color: #fff !important; } .fp-band--ink .fp-btn--ghost { background: transparent; border-color: rgba(255,255,255,.55); color: #fff !important; } .fp-band--ink .fp-btn--ghost:hover { background: #fff; border-color: #fff; color: var(--fp-black) !important; } /* -------------------------------------------------------------------------- 7. Grilles et cartes — blanc sur gris perle, angles vifs -------------------------------------------------------------------------- */ .fp-grid { display: grid; gap: 24px; } .fp-grid--2 { grid-template-columns: repeat(2, 1fr); } .fp-grid--3 { grid-template-columns: repeat(3, 1fr); } .fp-grid--4 { grid-template-columns: repeat(4, 1fr); } .fp-split { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: start; } .fp-split > div:first-child { position: sticky; top: 96px; } .fp-card { background: var(--fp-white); border: 1px solid var(--fp-line); border-radius: 0; padding: 26px 24px; display: flex; flex-direction: column; transition: border-color .25s ease; } .fp-card:hover { border-color: var(--fp-accent); } .fp-card .fp-card-num { font-family: var(--fp-sans); font-size: 11px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--fp-muted); margin: 0 0 16px; } .fp-card p { color: var(--fp-muted); font-size: 15px; } .fp-card-link { margin-top: auto; padding-top: 18px; font-size: 12px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; border-bottom: 0 !important; } .fp-card-link::after { content: ' \2192'; } .fp-value .fp-h3 { margin-bottom: 10px; } .fp-value p { color: var(--fp-muted); font-size: 15px; } .fp-step { border-top: 1px solid var(--fp-accent); padding-top: 18px; } .fp-step-num { font-family: var(--fp-sans); font-size: 11px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--fp-accent); margin: 0 0 10px !important; font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 8. Listes -------------------------------------------------------------------------- */ .fp-list { list-style: none; margin: 0; padding: 0; } .fp-list li { position: relative; padding: 0 0 0 20px; margin-bottom: 7px; font-size: 15px; line-height: 1.5; color: var(--fp-text); } .fp-list li::before { content: ''; position: absolute; left: 0; top: 11px; width: 9px; height: 1px; background: var(--fp-accent); } .fp-list--2 { columns: 2; column-gap: 44px; } .fp-list--2 li { break-inside: avoid; } .fp-cluster { margin-bottom: 0; } .fp-cluster:last-child { margin-bottom: 0; } .fp-cluster .fp-cluster-title { font-family: var(--fp-sans); font-size: 11px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--fp-accent); padding-bottom: 9px; margin: 0 0 12px; border-bottom: 1px solid var(--fp-accent-lt); } /* Grappes d'interventions sur deux colonnes : on gagne en largeur ce qu'on ne perd pas en contenu. */ .fp-clusters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 48px; } .fp-clusters .fp-list--2 { columns: 1; } /* Nombre impair de grappes : la dernière occupe toute la largeur et repasse sur deux colonnes, pour ne pas laisser un vide à droite. */ .fp-clusters > .fp-cluster:last-child:nth-child(odd) { grid-column: 1 / -1; } .fp-clusters > .fp-cluster:last-child:nth-child(odd) .fp-list--2 { columns: 2; column-gap: 48px; } @media (max-width: 900px) { .fp-clusters > .fp-cluster:last-child:nth-child(odd) .fp-list--2 { columns: 1; } } /* En-tête de section compact : titre à gauche, précision à droite */ .fp-head { display: grid; grid-template-columns: 1fr auto; gap: 20px 48px; align-items: end; margin-bottom: 30px; } .fp-head p.fp-small { max-width: 380px; margin: 0; } .fp-head .fp-h2 { margin-bottom: 0; } @media (max-width: 900px) { .fp-clusters { grid-template-columns: 1fr; } .fp-head { grid-template-columns: 1fr; align-items: start; } } /* Sommaire des publications */ .fp-sommaire { margin-bottom: 40px; } .fp-sommaire:last-child { margin-bottom: 0; } .fp-note-item { width: 100%; border-bottom-color: var(--fp-blush-dp); display: grid; grid-template-columns: 130px 1fr; gap: 6px 24px; padding: 18px 0; border-bottom: 1px solid var(--fp-line); border-bottom-color: var(--fp-line) !important; color: inherit; text-decoration: none; transition: background .2s ease; } .fp-note-item:hover { background: var(--fp-blush); } .fp-note-item:hover b { color: var(--fp-accent); } .fp-note-date { font-family: var(--fp-sans); font-size: 11px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--fp-muted); padding-top: 5px; } .fp-note-corps b { display: block; font-family: var(--fp-display); font-weight: 500; font-size: 19px; line-height: 1.32; letter-spacing: -.01em; color: var(--fp-ink); margin-bottom: 6px; transition: color .2s ease; } .fp-note-corps em { font-style: normal; font-size: 15px; color: var(--fp-muted); line-height: 1.55; } @media (max-width: 640px) { .fp-note-item { grid-template-columns: 1fr; gap: 4px; } } /* Lignes de tarifs, page Exemples de forfaits */ .fp-tarifs { display: grid; gap: 0; } .fp-tarif { display: grid; grid-template-columns: 205px 1fr; gap: 8px 22px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--fp-blush-dp); } .fp-tarif:last-child { border-bottom: 0; } .fp-tarif b { font-family: var(--fp-display); font-weight: 500; font-size: 17px; letter-spacing: -.01em; color: var(--fp-accent); font-variant-numeric: tabular-nums; } .fp-tarif span { font-size: 15px; color: var(--fp-muted); } @media (max-width: 640px) { .fp-tarif { grid-template-columns: 1fr; gap: 2px; } } /* -------------------------------------------------------------------------- 9. Délais et seuils clés -------------------------------------------------------------------------- */ .fp-facts-titre { font-family: var(--fp-sans); font-size: 11px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--fp-accent); margin: 0 0 22px; } .fp-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .fp-fact { border-top: 2px solid var(--fp-accent); padding-top: 18px; } .fp-fact b { display: block; font-family: var(--fp-display); font-weight: 500; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; letter-spacing: -.02em; color: var(--fp-accent); margin-bottom: 10px; font-variant-numeric: tabular-nums; } .fp-band--ink .fp-fact b { color: #fff; } .fp-band--ink .fp-fact { border-top-color: rgba(255,255,255,.4); } .fp-fact span { font-size: 14.5px; color: var(--fp-muted); line-height: 1.6; display: block; } .fp-band--ink .fp-fact span { color: rgba(255,255,255,.62); } .fp-fact em { font-style: normal; font-size: 11.5px; color: var(--fp-accent); display: block; margin-top: 8px; } .fp-band--ink .fp-fact em { color: var(--fp-accent-lt); } /* -------------------------------------------------------------------------- 10. Exemples d'intervention, repères, interlocuteur -------------------------------------------------------------------------- */ .fp-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 36px; } .fp-case { border-top: 1px solid var(--fp-line); padding: 14px 0; } .fp-case .fp-case-tag { font-size: 11px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--fp-accent); margin: 0 0 8px; } .fp-case p { font-size: 15px; color: var(--fp-muted); margin: 0; } .fp-marks { display: flex; flex-wrap: wrap; gap: 16px 46px; align-items: baseline; } .fp-mark { display: flex; flex-direction: column; gap: 3px; } .fp-mark b { font-family: var(--fp-display); font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: var(--fp-ink); } .fp-band--ink .fp-mark b { color: #fff; } .fp-mark span { font-size: 12.5px; color: var(--fp-muted); } .fp-band--ink .fp-mark span { color: rgba(255,255,255,.6); } .fp-person { border-top: 1px solid var(--fp-accent); padding-top: 24px; } .fp-person .fp-role { font-size: 11px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--fp-accent); margin: 0 0 8px; } .fp-person .fp-h3 { margin-bottom: 16px; } .fp-person p { font-size: 15px; color: var(--fp-muted); } .fp-info { border-top: 1px solid var(--fp-line); padding-top: 14px; margin-bottom: 20px; } .fp-info p { font-size: 15.5px; margin-bottom: 0; } .fp-quote { font-family: var(--fp-display); font-size: clamp(21px, 2.6vw, 29px); line-height: 1.4; font-weight: 500; letter-spacing: -.02em; color: var(--fp-ink); text-wrap: balance; margin: 0; } .fp-band--ink .fp-quote { color: #fff; } /* -------------------------------------------------------------------------- 11. Accordéons (élément HTML natif
, sans JavaScript) -------------------------------------------------------------------------- */ .fp-acc { border-top: 2px solid var(--fp-accent); } .fp-acc details { border-bottom: 1px solid var(--fp-line); } .fp-acc summary { list-style: none; cursor: pointer; padding: 16px 44px 16px 0; position: relative; font-family: var(--fp-display); font-weight: 500; font-size: 17px; letter-spacing: -.01em; color: var(--fp-ink); transition: color .2s ease; } .fp-acc summary::-webkit-details-marker { display: none; } .fp-acc summary:hover { color: var(--fp-accent); } .fp-acc summary:focus-visible { outline: 1px solid var(--fp-accent); outline-offset: 2px; } .fp-acc summary::after { color: var(--fp-accent); content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: var(--fp-sans); font-size: 18px; font-weight: 300; color: var(--fp-accent); } .fp-acc details[open] summary::after { content: '\2013'; } .fp-acc .fp-acc-body { padding: 0 44px 20px 0; color: var(--fp-muted); font-size: 15px; max-width: 62ch; } .fp-acc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 48px; align-items: start; } .fp-acc-pair .fp-eyebrow { margin-bottom: 10px; } .fp-acc-pair .fp-h2 { margin-bottom: 20px; } @media (max-width: 980px) { .fp-acc-pair { grid-template-columns: 1fr; gap: 40px; } } .fp-acc--faq summary { font-family: var(--fp-sans); font-weight: 400; font-size: 15.5px; letter-spacing: 0; } /* La réponse était bridée à 62 caractères de large, bien en deçà de la question posée au-dessus : justifiée, elle paraissait s'arrêter avant le bord. Elle prend désormais la même largeur que la question. */ .fp-acc--faq .fp-acc-body { max-width: none; font-size: 15.5px; line-height: 1.68; } /* -------------------------------------------------------------------------- 11 bis. Photographies Un seul traitement pour toutes les images du site : noir et blanc, voile bordeaux très léger, ombre portée douce. Les photographies accompagnent la page ; elles ne la prennent jamais en charge. -------------------------------------------------------------------------- */ /* a) En-tête avec photographie fondue sur la droite. Usage : ajouter la classe fp-band--hero-photo à la balise section et l'adresse de l'image dans la variable --fp-photo. L'image se dissout vers la gauche : le texte reste sur fond propre. */ .fp-band--hero-photo { overflow: hidden; } .fp-band--hero-photo > * { position: relative; z-index: 1; } .fp-band--hero-photo::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: min(54%, 820px); background-image: var(--fp-photo, none); background-size: cover; background-position: center; filter: grayscale(.18) contrast(.98) brightness(1.02) saturate(1.02); transition: filter .8s ease; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.28) 26%, rgba(0,0,0,.86) 62%, #000 100%); mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.28) 26%, rgba(0,0,0,.86) 62%, #000 100%); pointer-events: none; } /* Voile bordeaux : unifie la couleur de toutes les images entre elles */ .fp-band--hero-photo::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: min(54%, 820px); background: linear-gradient(to right, rgba(122,46,59,0) 24%, rgba(122,46,59,.16) 100%); mix-blend-mode: multiply; pointer-events: none; } /* Au survol, la photographie retrouve ses couleurs */ .fp-band--hero-photo:hover::before { filter: grayscale(0) contrast(1) brightness(1.02) saturate(1); } @media (prefers-reduced-motion: reduce) { .fp-band--hero-photo::before { transition: none; } } .fp-band--ink.fp-band--hero-photo::before { opacity: .42; } .fp-band--ink.fp-band--hero-photo::after { display: none; } @media (max-width: 900px) { .fp-band--hero-photo::before { width: 100%; opacity: .16; -webkit-mask-image: none; mask-image: none; } .fp-band--hero-photo::after { display: none; } } /* b) Photographie posée derrière une bande entière, très en retrait. */ .fp-band--photo > * { position: relative; z-index: 1; } .fp-band--photo::before { content: ''; position: absolute; inset: 0; background-image: var(--fp-photo, none); background-size: cover; background-position: center; filter: grayscale(.5) contrast(.9) brightness(1.12) saturate(1.05); opacity: .10; pointer-events: none; } .fp-band--ink.fp-band--photo::before { opacity: .18; } .fp-band--blush.fp-band--photo::before { opacity: .11; } /* Sur la bande d'appel, la photographie éclaire le fond au lieu de l'assombrir. */ .fp-band--wine.fp-band--photo::before { filter: grayscale(1) contrast(.7) brightness(1.2); opacity: .06; } /* c) Photographie encadrée, dans le flux du texte. */ .fp-figure { position: relative; margin: 0; } .fp-figure img { display: block; width: 100%; height: auto; filter: grayscale(.12) contrast(1) brightness(1.02) saturate(1.08); box-shadow: 0 26px 60px -40px rgba(122,46,59,.45); } .fp-figure::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 100%; background: rgba(122,46,59,.05); mix-blend-mode: multiply; pointer-events: none; } .fp-figure figcaption { position: relative; z-index: 1; font-family: var(--fp-sans); font-size: 11px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; color: var(--fp-muted); margin-top: 16px; } .fp-band--ink .fp-figure figcaption { color: rgba(255,255,255,.6); } .fp-figure--wide img { aspect-ratio: 16 / 7; object-fit: cover; } .fp-figure--tall img { aspect-ratio: 3 / 4; object-fit: cover; } .fp-figure--square img { aspect-ratio: 1 / 1; object-fit: cover; } .fp-figure--wide::after, .fp-figure--tall::after, .fp-figure--square::after { height: auto; bottom: 43px; } .fp-figure--plain::after { bottom: 0; } .fp-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 640px) { .fp-figures { grid-template-columns: 1fr; } } /* d) Portrait à côté d'un texte : la colonne image est collante. */ .fp-split--photo { grid-template-columns: .85fr 1.15fr; gap: 56px; } .fp-split--photo > figure:first-child { position: sticky; top: 96px; } @media (max-width: 900px) { .fp-split--photo { grid-template-columns: 1fr; gap: 32px; } .fp-split--photo > figure:first-child { position: static; } } /* Variante image à droite : le texte vient d'abord, la photo suit. Sans elle, deux bandes à portrait se suivraient avec la même image à gauche, et la page prendrait un rythme de catalogue. Sur téléphone, l'ordre du source s'applique : le texte en premier, ce qui est le bon ordre de lecture. */ .fp-split--photo-droite { grid-template-columns: 1.15fr .85fr; } .fp-split--photo-droite > div:first-child { position: sticky; top: 96px; } .fp-split--photo-droite > figure { position: static; } @media (max-width: 900px) { .fp-split--photo-droite { grid-template-columns: 1fr; } .fp-split--photo-droite > div:first-child { position: static; } } /* -------------------------------------------------------------------------- 12. Blocs utilisables DANS un article de la rubrique Publications -------------------------------------------------------------------------- */ .fp-inline { margin-left: 0; margin-right: 0; width: auto; max-width: none; padding: 0; } .fp-keypoints { border-left: 3px solid var(--fp-accent); background: var(--fp-blush); padding: 26px 28px; margin: 34px 0; } .fp-keypoints .fp-keypoints-title { font-family: var(--fp-sans); font-size: 11px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--fp-accent); margin: 0 0 14px; } .fp-keypoints ul { list-style: none; margin: 0; padding: 0; } .fp-keypoints li { position: relative; padding-left: 20px; margin-bottom: 10px; font-size: 15.5px; color: var(--fp-text); } .fp-keypoints li:last-child { margin-bottom: 0; } .fp-keypoints li::before { content: ''; position: absolute; left: 0; top: 13px; width: 9px; height: 1px; background: var(--fp-accent); } .fp-disclaimer { border-top: 1px solid var(--fp-line); padding-top: 16px; margin-top: 34px; font-size: 12.5px; line-height: 1.7; color: var(--fp-muted); } .fp-postcta { background: var(--fp-black); padding: 32px; margin-top: 34px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; } .fp-postcta .fp-postcta-text { font-family: var(--fp-display); font-size: 19px; font-weight: 500; letter-spacing: -.01em; line-height: 1.4; color: #fff; margin: 0; max-width: 460px; } .fp-postcta .fp-btn { background: #fff; border-color: #fff; color: var(--fp-black) !important; } .fp-postcta .fp-btn:hover { background: var(--fp-accent); border-color: var(--fp-accent); color: #fff !important; } .fp-byline { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; border-top: 1px solid var(--fp-line-firm); padding-top: 14px; margin-bottom: 28px; font-size: 13px; color: var(--fp-muted); } .fp-byline b { font-family: var(--fp-display); font-size: 16px; font-weight: 500; letter-spacing: -.01em; color: var(--fp-ink); } /* -------------------------------------------------------------------------- 13. Responsive -------------------------------------------------------------------------- */ @media (max-width: 900px) { .fp-grid--3, .fp-grid--4 { grid-template-columns: repeat(2, 1fr); } .fp-cases { grid-template-columns: repeat(2, 1fr); } .fp-facts { grid-template-columns: 1fr; gap: 22px; } .fp-split, .fp-hero { grid-template-columns: 1fr; gap: 34px; } .fp-split > div:first-child { position: static; } .fp-index { border-left: 0; border-top: 1px solid var(--fp-line-firm); padding: 24px 0 0; } .fp-band { padding: 48px 22px; } } @media (max-width: 640px) { .fp { font-size: 16px; } .fp-grid--2, .fp-grid--3, .fp-grid--4 { grid-template-columns: 1fr; } .fp-list--2 { columns: 1; } .fp-cases { grid-template-columns: 1fr; gap: 0; } .fp-clusters { grid-template-columns: 1fr; } .fp-band { padding: 40px 20px; } .fp-card { padding: 28px 22px; } .fp-actions .fp-btn { width: 100%; text-align: center; } .fp-postcta { padding: 26px 22px; } .fp-postcta .fp-btn { width: 100%; text-align: center; } } @media (prefers-reduced-motion: reduce) { .fp * { transition: none !important; } } /* -------------------------------------------------------------------------- 14. Impression -------------------------------------------------------------------------- */ @media print { .fp-band { padding: 20px 0; background: #fff !important; color: #000 !important; } .fp-band--seal::after { display: none; } .fp-btn, .fp-actions, .fp-postcta { display: none !important; } } /* ========================================================= PIED DE PAGE Un filet bordeaux en dégradé le sépare du corps de page ; le sceau et le filigrane de l'immeuble portent l'identité. ========================================================= */ .fp-foot { position: relative; padding: 64px 24px 30px; overflow: hidden; } .fp-foot::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--fp-accent) 0%, var(--fp-accent-lt) 32%, rgba(212,169,174,.22) 62%, transparent 100%); } .fp-foot .fp-wrap { position: relative; z-index: 1; } .fp-foot-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.15fr; gap: 48px; align-items: start; } .fp-foot-brand { position: relative; padding-right: 48px; } .fp-foot-brand::after { content: ''; position: absolute; right: 0; top: 4px; bottom: 4px; width: 1px; background: linear-gradient(180deg, rgba(212,169,174,.34) 0%, rgba(255,255,255,.10) 45%, transparent 100%); } /* Colonne d'identité */ .fp-foot-seal { display: block; margin-bottom: 20px; } .fp-foot-name { font-family: var(--fp-display); font-weight: 500; font-size: 16px; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin: 0 0 5px; } .fp-foot-role { font-family: var(--fp-seal); font-size: 17px; font-style: italic; color: var(--fp-accent-lt); margin: 0 0 18px; } .fp-foot-addr { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.62); margin: 0 0 12px; } /* L'accès, repris de l'ancienne page contact : il appartient au bloc d'adresse, pas à la colonne des coordonnées. */ .fp-foot-acces { font-size: 12.5px; line-height: 1.7; color: rgba(255,255,255,.42); margin: 0 0 14px; } .fp-foot-bar { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.38); margin: 0; } /* Colonnes de liens */ .fp-foot-title { font-family: var(--fp-sans); font-weight: 500; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--fp-accent-lt); margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.12); } .fp-foot-col a { display: inline-block; font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,.62); text-decoration: none; border-bottom: 0; margin-bottom: 11px; position: relative; transition: color .25s ease; } .fp-foot-col a::after { content: ''; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0; background: var(--fp-accent-lt); transition: width .3s ease; } .fp-foot-col a:hover { color: #fff; } .fp-foot-col a:hover::after { width: 100%; } /* Le