/* ========================================================================== AUGUSTE VIAGER — DESIGN SYSTEM "PRIVATE BANKING" (2026) Nouveau système de design premium — chargé AVANT style.css. Portée : composants nouveaux (préfixés / classes dédiées) + overrides scopés à [data-pb] (attribut posé sur des pages refondues) afin de ne jamais impacter les pages non refondues qui ne chargent que style.css. Le header/footer (composants partagés) sont mis à jour séparément, globalement, dans style.css. ========================================================================== */ /* ---------- 1. TOKENS ---------- */ :root{ /* Navy */ --navy-950:#0B1D30; --navy-900:#0e2238; --navy-800:#142d47; --navy-700:#1B3A5C; --navy-600:#24486e; /* Gold */ --gold-500:#C9A84C; --gold-400:#d8bc6d; --gold-glow:rgba(201,168,76,0.14); /* Variante or foncée réservée au TEXTE/UI sur fonds clairs : #C9A84C ne passe pas l'AA (2.3:1) sur blanc/crème. --gold-ink passe 5.2:1+. */ --gold-ink:#7A662E; /* Cream */ --cream-50:#FAF8F4; --cream-100:#F6F3EC; --cream-200:#EDE8DC; /* Ink / mist */ --ink-900:#13202e; --ink-600:#5a6b7d; --mist-300:#a9b9c9; /* éclairci vs spec (#94a7ba) pour garantir AA sur navy-950 */ --mist-100:#c8d4e0; /* Glass */ --glass-bg:rgba(255,255,255,0.07); --glass-border:rgba(255,255,255,0.13); /* Radius / shadow */ --radius-pill:100px; --radius-lg:20px; --radius-md:14px; --shadow-card:0 8px 32px rgba(11,29,48,0.10); --shadow-glass:0 8px 24px rgba(0,0,0,0.18); /* Fonts */ --font-display:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-serif:"Instrument Serif",Georgia,serif; --font-mono:"Space Mono",ui-monospace,Menlo,monospace; } /* ---------- 2. BASE (scopée aux pages refondues) ---------- */ body[data-pb]{ font-family:var(--font-display); background:var(--cream-50); color:var(--ink-900); } body[data-pb] h1, body[data-pb] h2, body[data-pb] h3{ font-family:var(--font-display); color:var(--ink-900); letter-spacing:-0.015em; font-weight:500; line-height:1.15; } body[data-pb] em.serif-gold{ font-family:var(--font-serif); font-style:italic; color:var(--gold-500); font-weight:400; } body[data-pb] .hero em.serif-gold, body[data-pb] .cta-final em.serif-gold, body[data-pb] .band-simulateur em.serif-gold{ color:var(--gold-400); } /* Focus visible — accessibilité clavier, tous publics */ body[data-pb] a:focus-visible, body[data-pb] button:focus-visible, body[data-pb] .faq-question:focus-visible{ outline:2px solid var(--gold-ink); outline-offset:2px; border-radius:4px; } body[data-pb] .hero-pb :focus-visible, body[data-pb] .band-simulateur :focus-visible, body[data-pb] .cta-final :focus-visible, body[data-pb] .bg-navy :focus-visible{ outline-color:var(--gold-400); } /* ---------- 3. LAYOUT UTILITIES ---------- */ body[data-pb] .section-pb{ padding:88px 0; } body[data-pb] .section-pb--tight{ padding:64px 0; } body[data-pb] .bg-cream{ background:var(--cream-50); } body[data-pb] .bg-white{ background:#fff; } body[data-pb] .bg-navy{ background:var(--navy-950); color:#fff; } body[data-pb] .eyebrow{ display:flex; align-items:center; gap:12px; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:3px; color:var(--gold-ink); margin-bottom:18px; font-weight:400; } body[data-pb] .eyebrow::before{ content:""; display:block; width:36px; height:1px; background:var(--gold-ink); flex-shrink:0; } body[data-pb] .eyebrow--on-navy{ color:var(--gold-400); text-shadow:0 1px 8px rgba(11,29,48,.6); } body[data-pb] .eyebrow--on-navy::before{ background:var(--gold-400); } body[data-pb] .section-head{ max-width:720px; margin-bottom:48px; } body[data-pb] .section-head h2{ font-size:clamp(28px,4vw,42px); margin-bottom:14px; } body[data-pb] .section-head p{ font-size:16px; line-height:1.7; color:var(--ink-600); margin:0; } /* Liens dans un paragraphe de texte courant (fonds clairs uniquement) : soulignés pour rester distinguables du texte environnant sans dépendre uniquement de la couleur (WCAG 1.4.1 — audience senior, daltonisme). Scopé aux fonds clairs pour ne pas affecter les liens du footer (navy). */ body[data-pb] .section-pb p a, body[data-pb] .section-pb li a, body[data-pb] .grid-2 p a, body[data-pb] .grid-2 li a, body[data-pb] .card-light p a{ color:var(--gold-ink); text-decoration:underline; text-decoration-color:currentColor; text-underline-offset:2px; } body[data-pb] .section-pb p a:hover, body[data-pb] .section-pb li a:hover, body[data-pb] .grid-2 p a:hover, body[data-pb] .grid-2 li a:hover, body[data-pb] .card-light p a:hover{ color:var(--navy-700); } body[data-pb] .section-head--on-navy p{ color:var(--mist-300); } body[data-pb] .section-head--center{ margin-inline:auto; text-align:center; } body[data-pb] .section-head--center .eyebrow{ justify-content:center; } body[data-pb] .section-head--center .eyebrow::before{ display:none; } /* ---------- 4. BUTTONS ---------- */ body[data-pb] .btn-pill{ display:inline-flex; align-items:center; gap:8px; justify-content:center; padding:14px 28px; border-radius:var(--radius-pill); font-family:var(--font-display); font-weight:500; font-size:15px; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform .2s ease, filter .2s ease, background-color .2s ease, box-shadow .2s ease; min-height:44px; line-height:1; } body[data-pb] .btn-pill--gold{ background:var(--gold-500); color:var(--navy-900); } body[data-pb] .btn-pill--gold:hover{ transform:translateY(-1px); filter:brightness(1.05); color:var(--navy-900); } body[data-pb] .btn-pill--navy{ background:var(--navy-700); color:var(--cream-50); } body[data-pb] .btn-pill--navy:hover{ background:var(--navy-800); transform:translateY(-1px); color:var(--cream-50); } body[data-pb] .btn-pill--ghost{ background:transparent; border-color:var(--glass-border); color:#fff; backdrop-filter:blur(8px); } body[data-pb] .btn-pill--ghost:hover{ background:rgba(255,255,255,0.08); transform:translateY(-1px); color:#fff; } body[data-pb] .btn-pill--ghost-light{ background:transparent; border-color:var(--navy-700); color:var(--navy-700); } body[data-pb] .btn-pill--ghost-light:hover{ background:rgba(27,58,92,0.06); transform:translateY(-1px); } /* ---------- 5. GLASS CARD (hero) ---------- */ body[data-pb] .glass-card{ background:var(--glass-bg); border:1px solid var(--glass-border); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-radius:var(--radius-md); padding:14px; color:#fff; } body[data-pb] .glass-card--gold{ background:linear-gradient(150deg,var(--gold-500),#b7943f); border-color:transparent; color:var(--navy-900); } body[data-pb] .glass-card__label{ font-family:var(--font-mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--gold-400); margin-bottom:10px; display:block; } body[data-pb] .glass-card--gold .glass-card__label{ color:#1b3a5c; font-weight:700; } body[data-pb] .glass-card__value{ font-family:var(--font-display); font-size:26px; font-weight:600; letter-spacing:-0.01em; display:block; margin-bottom:8px; } body[data-pb] .glass-card p{ font-size:13px; line-height:1.5; color:var(--mist-300); margin:0 0 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } body[data-pb] .glass-card--gold p{ color:#0b1d30; } body[data-pb] .glass-card a.glass-card__link{ color:var(--gold-400); font-size:14px; font-weight:500; text-decoration:none; } body[data-pb] .glass-card a.glass-card__link:hover{ text-decoration:underline; } /* ---------- 6. CARD LIGHT ---------- */ body[data-pb] .card-light{ background:#fff; border:1px solid var(--cream-200); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:28px; transition:transform .25s ease, box-shadow .25s ease; } body[data-pb] .card-light:hover{ transform:translateY(-3px); box-shadow:0 14px 36px rgba(11,29,48,0.14); } body[data-pb] .card-light h3{ font-size:17px; margin-bottom:8px; } body[data-pb] .card-light p{ font-size:15px; line-height:1.7; color:var(--ink-600); margin:0; } body[data-pb] .card-light__icon{ width:40px;height:40px; display:flex;align-items:center;justify-content:center; margin-bottom:16px; color:var(--gold-ink); } body[data-pb] .card-light__icon svg{ width:26px;height:26px; } body[data-pb] .card-light__link{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; color:var(--gold-ink); font-size:14px; font-weight:500; text-decoration:none; } body[data-pb] .card-light__link:hover{ text-decoration:underline; } /* ---------- 7. GRIDS ---------- */ body[data-pb] .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; } /* Ordre visuel inversé sur desktop uniquement : l'ordre du DOM reste celui de la hiérarchie de titres (H2 avant H3) pour l'accessibilité. */ @media (min-width:769px){ body[data-pb] .grid-2--reverse > *:first-child{ order:2; } body[data-pb] .grid-2--reverse > *:last-child{ order:1; } } body[data-pb] .grid-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; } body[data-pb] .grid-cards--4{ grid-template-columns:repeat(4,1fr); } body[data-pb] .grid-cards--3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } /* ---------- 8. HERO ---------- */ body[data-pb] .hero.hero-pb{ background:linear-gradient(160deg,var(--navy-950) 0%,var(--navy-700) 100%); /* Le header (64px, sticky) occupe déjà son propre espace : ~30-40px suffisent pour une respiration visuelle sous la barre de nav, afin que le hero complet (titre + CTA + cards + confiance) tienne en 100vh. */ padding:24px 0 0; overflow:hidden; position:relative; } body[data-pb] .hero.hero-pb::before{ /* remplace le motif SVG global par un halo doré (aucune image, perf) */ content:""; position:absolute; inset:0; background:radial-gradient(ellipse 60% 50% at 88% 6%, var(--gold-glow), transparent 70%); pointer-events:none; } body[data-pb] .hero-pb__photo{ position:absolute; inset:0; z-index:0; overflow:hidden; } body[data-pb] .hero-pb__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:75% center; } body[data-pb] .hero-pb__photo::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(100deg, rgba(11,29,48,.92) 0%, rgba(11,29,48,.82) 35%, rgba(11,29,48,.45) 65%, rgba(11,29,48,.25) 100%); } body[data-pb] .hero-pb__photo::after{ content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(to top, rgba(11,29,48,.95) 0%, rgba(11,29,48,.55) 22%, transparent 45%); } @media (max-width:640px){ body[data-pb] .hero-pb__photo img{ object-position:60% center; } body[data-pb] .hero-pb__photo::before{ background:rgba(11,29,48,.85); } body[data-pb] .hero-pb__photo::after{ background:linear-gradient(to top, rgba(11,29,48,.95) 0%, rgba(11,29,48,.6) 30%, transparent 50%); } } body[data-pb] .hero-pb__content{ position:relative; z-index:1; max-width:760px; } body[data-pb] .hero-pb h1{ color:#fff; font-size:clamp(34px,4.5vw,52px); font-weight:500; letter-spacing:-0.02em; line-height:1.08; margin-bottom:16px; text-shadow:0 2px 24px rgba(11,29,48,.45); } body[data-pb] .hero-pb__subtitle{ color:#c8d4e0; font-size:17px; line-height:1.5; max-width:560px; margin-bottom:25px; text-shadow:0 1px 12px rgba(11,29,48,.4); } body[data-pb] .hero-pb__ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px; } body[data-pb] .hero-pb__cards{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; max-width:1120px; margin-bottom:8px; } body[data-pb] .hero-pb .glass-card:not(.glass-card--gold){ background:rgba(11,29,48,.55); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(16px) saturate(.9); -webkit-backdrop-filter:blur(16px) saturate(.9); } body[data-pb] .hero-pb .glass-card__label{ color:var(--gold-400); } body[data-pb] .hero-pb .glass-card--gold .glass-card__label{ color:#1b3a5c; font-weight:700; } body[data-pb] .hero-pb .glass-card--gold p{ color:#0b1d30; } body[data-pb] .hero-pb .glass-card--gold{ background:linear-gradient(150deg,var(--gold-500),#b7943f); border-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; } body[data-pb] .hero-pb__note{ position:relative; z-index:1; font-size:11px; color:rgba(200,212,224,.85); margin-bottom:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } body[data-pb] .hero-pb__trust{ position:relative; z-index:1; border-top:1px solid var(--glass-border); padding:10px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; font-size:14px; color:var(--mist-300); } body[data-pb] .hero-pb__trust strong{ color:var(--gold-400); font-family:var(--font-mono); font-weight:400; } body[data-pb] .hero-pb__cities{ display:flex; gap:18px; flex-wrap:wrap; } /* ---------- 9. BANDEAU SIMULATEUR (navy plein) ---------- */ body[data-pb] .band-simulateur{ background:var(--navy-950); color:#fff; padding:90px 0; text-align:center; position:relative; overflow:hidden; } body[data-pb] .band-simulateur::before{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse 50% 60% at 50% 100%, var(--gold-glow), transparent 70%); pointer-events:none; } body[data-pb] .band-simulateur__inner{ position:relative; z-index:1; max-width:640px; margin:0 auto; } body[data-pb] .band-simulateur h2{ color:#fff; font-size:clamp(28px,4vw,42px); margin-bottom:14px; } body[data-pb] .band-simulateur p{ color:var(--mist-300); font-size:16px; margin-bottom:32px; } /* ---------- 10. CTA FINAL ---------- */ body[data-pb] .cta-final{ background:var(--navy-950); color:#fff; padding:96px 0; text-align:center; position:relative; overflow:hidden; } body[data-pb] .cta-final::before{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse 55% 55% at 15% 10%, var(--gold-glow), transparent 70%); pointer-events:none; } body[data-pb] .cta-final__inner{ position:relative; z-index:1; max-width:640px; margin:0 auto; } body[data-pb] .cta-final h2{ color:#fff; font-size:clamp(28px,4vw,42px); margin-bottom:16px; } body[data-pb] .cta-final p{ color:var(--mist-300); font-size:16px; margin-bottom:32px; } body[data-pb] .cta-final__ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } /* ---------- 11. HIGHLIGHT BOX ---------- */ body[data-pb] .highlight-box-pb{ background:#fff; border-left:3px solid var(--gold-ink); border-radius:0 var(--radius-md) var(--radius-md) 0; padding:22px 26px; margin-top:32px; } body[data-pb] .highlight-box-pb p{ margin:0; color:var(--ink-900); font-size:15px; line-height:1.7; } /* ---------- 12. DASHBOARD CARD (section vendre) ---------- */ body[data-pb] .dash-card{ background:var(--navy-800); border-radius:var(--radius-lg); padding:32px; color:#fff; } body[data-pb] .dash-card h3{ font-family:var(--font-mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--gold-400); font-weight:400; margin-bottom:22px; } body[data-pb] .dash-card__row{ display:flex; gap:16px; align-items:flex-start; padding:14px 0; border-top:1px solid var(--glass-border); } body[data-pb] .dash-card__row:first-of-type{ border-top:none; } body[data-pb] .dash-card__row svg{ width:22px;height:22px;flex-shrink:0;color:var(--gold-500);margin-top:2px; } body[data-pb] .dash-card__row strong{ display:block; font-size:15px; font-weight:500; margin-bottom:3px; } body[data-pb] .dash-card__row span{ font-size:13px; color:var(--mist-300); line-height:1.5; } /* ---------- 13. LISTE ARGUMENTS (section acheter) ---------- */ body[data-pb] .arg-card{ background:#fff; border:1px solid var(--cream-200); border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow-card); } body[data-pb] .arg-row{ display:flex; gap:16px; align-items:flex-start; padding:14px 0; border-top:1px solid var(--cream-200); } body[data-pb] .arg-row:first-of-type{ border-top:none; } body[data-pb] .arg-row svg{ width:22px;height:22px;flex-shrink:0;color:var(--gold-ink);margin-top:2px; } body[data-pb] .arg-row strong{ display:block; font-size:15px; margin-bottom:3px; color:var(--ink-900); } body[data-pb] .arg-row span{ font-size:14px; color:var(--ink-600); line-height:1.6; } /* ---------- 14. VILLES — index typographique ---------- 10 lignes réparties sur 2 colonnes (1re colonne remplie du haut vers le bas, puis 2e colonne) via grid-auto-flow:column + grid-template-rows. */ body[data-pb] .villes-index{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(5,auto); grid-auto-flow:column; column-gap:56px; } body[data-pb] .ville-row{ display:flex; align-items:baseline; gap:18px; padding:19px 8px; border-bottom:1px solid var(--cream-200); text-decoration:none; color:inherit; transition:background-color .2s ease; } body[data-pb] .ville-row:hover{ background:var(--cream-100); } body[data-pb] .ville-row__num{ font-family:var(--font-mono); color:var(--gold-ink); font-size:13px; flex-shrink:0; width:22px; } body[data-pb] .ville-row > div{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; } body[data-pb] .ville-row__name{ font-size:22px; font-weight:500; color:var(--ink-900); letter-spacing:-0.01em; line-height:1.2; transition:color .2s ease; } body[data-pb] .ville-row:hover .ville-row__name{ color:var(--gold-ink); } body[data-pb] .ville-row__desc{ font-size:13px; color:var(--ink-600); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } body[data-pb] .ville-row__cta{ color:var(--gold-ink); font-size:13px; font-weight:500; flex-shrink:0; transition:transform .2s ease; } body[data-pb] .ville-row:hover .ville-row__cta{ transform:translateX(4px); } body[data-pb] .ville-row:focus-visible{ outline:2px solid var(--gold-ink); outline-offset:-2px; border-radius:4px; background:var(--cream-100); } /* ---------- 15. ARTICLES / GUIDES ---------- Vignettes 16:9 génératives en CSS pur (zéro image, zéro poids). Convention pour le futur : si /images/blog/{slug}.webp existe un jour, poser style="background-image:url(/images/blog/slug.webp);background-size:cover; background-position:center" directement sur .article-card__thumb — le style inline (background-image) prend le dessus sur le motif généré par la classe .cover--n (qui ne définit que le fond via le raccourci `background`) sans qu'aucune règle supplémentaire soit nécessaire. Toute la carte est cliquable via le lien du titre (h3 > a), technique "stretched-link" : le lien porte un ::after absolu qui couvre .article-card (positionnée en relative). La flèche visuelle reste un décoratif (aria-hidden), non focusable, non doublon d'ancre. */ body[data-pb] .article-card{ position:relative; padding-bottom:6px; } body[data-pb] .article-card__thumb{ position:relative; aspect-ratio:16/9; border-radius:var(--radius-md); overflow:hidden; background:var(--navy-800); display:flex; flex-direction:column; justify-content:flex-end; padding:16px; margin-bottom:16px; } body[data-pb] .article-card__eyebrow{ position:relative; z-index:1; font-family:var(--font-mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--gold-400); margin-bottom:8px; } body[data-pb] .article-card__cover-title{ position:relative; z-index:1; font-family:var(--font-serif); font-style:italic; font-size:20px; line-height:1.25; color:var(--cream-50); } /* 4 motifs géométriques distincts — variante blog (fond navy-800, accents or) */ body[data-pb] .article-card__thumb.cover--1{ background:conic-gradient(from 200deg at 85% 15%,rgba(201,168,76,.38),transparent 40%),var(--navy-800); } body[data-pb] .article-card__thumb.cover--2{ background:repeating-radial-gradient(circle at 82% 22%,rgba(201,168,76,.28) 0 2px,transparent 2px 22px),var(--navy-800); } body[data-pb] .article-card__thumb.cover--3{ background:repeating-linear-gradient(135deg,rgba(201,168,76,.2) 0 2px,transparent 2px 18px),var(--navy-800); } body[data-pb] .article-card__thumb.cover--4{ background:radial-gradient(circle at 18% 88%,rgba(201,168,76,.32),transparent 55%),var(--navy-800); } /* Variante guides — fond cream-200, motif or, texte navy (différenciation visuelle blog/guides) */ body[data-pb] .article-card__thumb--guide{ background:var(--cream-200); } body[data-pb] .article-card__thumb--guide .article-card__eyebrow{ color:var(--gold-ink); } body[data-pb] .article-card__thumb--guide .article-card__cover-title{ color:var(--navy-900); } body[data-pb] .article-card__thumb--guide.cover--1{ background:conic-gradient(from 200deg at 85% 15%,rgba(122,102,46,.24),transparent 40%),var(--cream-200); } body[data-pb] .article-card__thumb--guide.cover--2{ background:repeating-radial-gradient(circle at 82% 22%,rgba(122,102,46,.18) 0 2px,transparent 2px 22px),var(--cream-200); } body[data-pb] .article-card__thumb--guide.cover--3{ background:repeating-linear-gradient(135deg,rgba(122,102,46,.16) 0 2px,transparent 2px 18px),var(--cream-200); } body[data-pb] .article-card__thumb--guide.cover--4{ background:radial-gradient(circle at 18% 88%,rgba(122,102,46,.22),transparent 55%),var(--cream-200); } body[data-pb] .article-card h3{ font-size:16px; margin-bottom:6px; } body[data-pb] .article-card h3 a{ color:var(--ink-900); text-decoration:none; } body[data-pb] .article-card h3 a::after{ content:""; position:absolute; inset:0; z-index:1; } body[data-pb] .article-card:hover h3 a{ color:var(--gold-ink); } body[data-pb] .article-card h3 a:focus-visible{ outline:2px solid var(--gold-ink); outline-offset:4px; border-radius:4px; } body[data-pb] .article-card p{ font-size:14px; color:var(--ink-600); margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } body[data-pb] .article-card__arrow{ color:var(--gold-ink); font-size:14px; font-weight:500; transition:transform .2s ease; display:inline-block; } body[data-pb] .article-card:hover .article-card__arrow{ transform:translateX(4px); } /* ---------- 16. FAQ PREMIUM (scopée à .faq-pb, classes JS conservées) ---------- */ body[data-pb] .faq-list.faq-pb{ max-width:820px; } body[data-pb] .faq-pb .faq-item{ background:#fff; border:1px solid var(--cream-200); border-radius:var(--radius-md); margin-bottom:12px; padding:0 22px; transition:border-color .2s ease; } body[data-pb] .faq-pb .faq-item.open{ border-color:var(--gold-ink); } body[data-pb] .faq-pb .faq-question{ font-size:15px; font-weight:500; color:var(--ink-900); padding:18px 0; font-family:var(--font-display); } body[data-pb] .faq-pb .faq-question::after{ content:none; } body[data-pb] .faq-pb .faq-question .faq-chevron{ flex-shrink:0; color:var(--gold-ink); transition:transform .3s ease; width:18px;height:18px; } body[data-pb] .faq-pb .faq-item.open .faq-question .faq-chevron{ transform:rotate(180deg); } body[data-pb] .faq-pb .faq-answer p{ color:var(--ink-600); font-size:15px; } /* ---------- 16b. HERO INTERNE (pages guide/article) ---------- */ body[data-pb] .hero.hero-interne{ background:linear-gradient(160deg,var(--navy-950) 0%,var(--navy-700) 100%); min-height:40vh; padding:100px 0 56px; position:relative; overflow:hidden; display:flex; align-items:flex-end; } body[data-pb] .hero.hero-interne::before{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse 55% 50% at 90% 8%, var(--gold-glow), transparent 70%); pointer-events:none; } body[data-pb] .hero-interne .container{ position:relative; z-index:1; width:100%; } body[data-pb] .breadcrumb-pb{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--mist-300); margin-bottom:28px; } body[data-pb] .breadcrumb-pb a{ color:var(--mist-300); text-decoration:none; } body[data-pb] .breadcrumb-pb a:hover{ color:var(--gold-400); } body[data-pb] .breadcrumb-pb [aria-current="page"]{ color:var(--gold-400); } body[data-pb] .hero-interne__content{ position:relative; z-index:1; } body[data-pb] .hero-interne h1{ color:#fff; font-size:clamp(32px,4.2vw,48px); max-width:760px; margin-bottom:16px; text-shadow:0 2px 24px rgba(11,29,48,.45); } body[data-pb] .hero-interne__subtitle{ color:var(--mist-100); font-size:17px; line-height:1.55; max-width:620px; margin-bottom:28px; text-shadow:0 1px 12px rgba(11,29,48,.4); } /* ---------- 16c. TABLEAUX DONNÉES (.data-table) ---------- */ body[data-pb] .data-table-wrap{ overflow-x:auto; margin:28px 0 12px; border-radius:var(--radius-md); border:1px solid var(--cream-200); } body[data-pb] .data-table{ width:100%; border-collapse:collapse; font-size:14px; min-width:320px; } body[data-pb] .data-table caption{ caption-side:top; text-align:left; font-weight:500; font-size:15px; color:var(--ink-900); padding:16px 18px 0; } body[data-pb] .data-table thead th{ background:var(--navy-700); color:var(--cream-50); font-family:var(--font-mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; font-weight:400; padding:14px 18px; text-align:left; } body[data-pb] .data-table tbody tr:nth-child(even){ background:var(--cream-100); } body[data-pb] .data-table tbody tr:nth-child(odd){ background:#fff; } body[data-pb] .data-table tbody td{ padding:13px 18px; color:var(--ink-900); border-top:1px solid var(--cream-200); } body[data-pb] .data-table tbody td:not(:first-child){ font-family:var(--font-mono); font-size:13px; color:var(--navy-700); } body[data-pb] .data-table__note{ font-size:13px; color:var(--ink-600); line-height:1.6; margin:0 0 24px; } /* ---------- 16c-bis. STATS ROW SIMULATEUR ---------- */ body[data-pb] .sim-stats-row{ list-style:none; padding:0; margin:28px 0 0; max-width:640px; margin-inline:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } body[data-pb] .sim-stats-row li{ background:#fff; border:1px solid var(--cream-200); border-top:3px solid var(--gold-ink); border-radius:var(--radius-md); padding:16px 14px; text-align:center; } body[data-pb] .sim-stats-row strong{ display:block; font-family:var(--font-mono); font-size:18px; font-weight:400; color:var(--navy-700); line-height:1.1; margin-bottom:6px; } body[data-pb] .sim-stats-row span{ font-size:12px; color:var(--ink-600); line-height:1.4; } @media(max-width:480px){ body[data-pb] .sim-stats-row{ grid-template-columns:1fr; } } /* ---------- 16d. SIMULATEUR ESPÉRANCE DE VIE ---------- */ body[data-pb] .sim-esperance{ max-width:640px; margin:0 auto; } body[data-pb] .sim-esperance__form{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:28px; } body[data-pb] .sim-esperance__field label, body[data-pb] .sim-esperance__field-label{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold-400); margin-bottom:10px; } body[data-pb] .visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } body[data-pb] .sim-esperance__field input[type="number"]{ -moz-appearance:textfield; appearance:textfield; } body[data-pb] .sim-esperance__field input[type="number"]::-webkit-outer-spin-button, body[data-pb] .sim-esperance__field input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } body[data-pb] .sim-stepper{ display:flex; align-items:center; gap:10px; } body[data-pb] .sim-stepper__btn{ flex-shrink:0; width:48px; height:48px; min-width:48px; min-height:48px; border-radius:var(--radius-pill); border:1px solid var(--glass-border); background:rgba(255,255,255,.08); color:var(--gold-400); font-size:20px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .2s ease, color .2s ease, transform .15s ease; } body[data-pb] .sim-stepper__btn:hover{ background:var(--gold-500); color:var(--navy-900); } body[data-pb] .sim-stepper__btn:active{ transform:scale(0.96); } body[data-pb] .sim-stepper__btn:focus-visible{ outline:2px solid var(--gold-400); outline-offset:2px; } body[data-pb] .sim-stepper input[type="number"]{ width:88px; padding:8px 4px; border:none; border-bottom:1px solid var(--gold-400); border-radius:0; background:transparent; color:var(--cream-50); font-family:var(--font-mono); font-size:26px; text-align:center; min-height:44px; } body[data-pb] .sim-stepper input[type="number"]:focus{ outline:2px solid var(--gold-400); outline-offset:4px; } body[data-pb] .sim-esperance__pills{ display:flex; gap:8px; flex-wrap:wrap; } body[data-pb] .sim-esperance__pill{ flex:1; min-width:100px; padding:12px 16px; border-radius:var(--radius-pill); border:1px solid var(--glass-border); background:transparent; color:var(--mist-300); font-family:var(--font-display); font-size:14px; font-weight:500; cursor:pointer; min-height:44px; transition:background .2s ease, color .2s ease, border-color .2s ease; } body[data-pb] .sim-esperance__pill[aria-pressed="true"]{ background:var(--gold-500); border-color:var(--gold-500); color:var(--navy-900); } body[data-pb] .sim-esperance__result{ background:rgba(255,255,255,.06); border:1px solid var(--glass-border); border-radius:var(--radius-md); padding:24px; text-align:center; } body[data-pb] .sim-esperance__value{ display:block; font-family:var(--font-display); font-size:clamp(28px,5vw,36px); font-weight:600; color:#fff; margin-bottom:8px; } body[data-pb] .sim-esperance__sub{ display:block; font-size:14px; color:var(--mist-300); margin-bottom:20px; } body[data-pb] .sim-esperance__disclaimer{ font-size:11px; color:var(--mist-300); margin-top:16px; line-height:1.5; } body[data-pb] .sim-esperance__form--notaire{ grid-template-columns:1fr 1fr; } body[data-pb] .sim-esperance__field--full{ grid-column:1 / -1; } body[data-pb] .sim-stepper input[type="text"]{ width:140px; padding:8px 4px; border:none; border-bottom:1px solid var(--gold-400); border-radius:0; background:transparent; color:var(--cream-50); font-family:var(--font-mono); font-size:22px; text-align:center; min-height:44px; } body[data-pb] .sim-stepper input[type="text"]:focus{ outline:2px solid var(--gold-400); outline-offset:4px; } body[data-pb] .sim-esperance__range-wrap{ display:flex; align-items:center; gap:16px; } body[data-pb] .sim-esperance__range{ flex:1; -webkit-appearance:none; appearance:none; height:4px; border-radius:var(--radius-pill); background:var(--glass-border); outline:none; } body[data-pb] .sim-esperance__range::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--gold-500); border:2px solid var(--navy-900); cursor:pointer; } body[data-pb] .sim-esperance__range::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:var(--gold-500); border:2px solid var(--navy-900); cursor:pointer; } body[data-pb] .sim-esperance__range-value{ flex-shrink:0; min-width:52px; font-family:var(--font-mono); font-size:18px; color:var(--cream-50); text-align:right; } body[data-pb] .sim-esperance__detail-list{ list-style:none; padding:0; margin:0 0 20px; text-align:left; } body[data-pb] .sim-esperance__detail-list li{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--glass-border); font-size:14px; color:var(--mist-300); } body[data-pb] .sim-esperance__detail-list li span:last-child{ font-family:var(--font-mono); color:var(--cream-50); white-space:nowrap; } body[data-pb] .sim-esperance__savings{ font-family:var(--font-mono); font-size:15px; color:#6ee7a0; margin:0 0 20px; } body[data-pb] .prose-pb{ max-width:720px; } body[data-pb] .prose-pb h3{ font-size:clamp(20px,2.5vw,24px); margin:36px 0 14px; } body[data-pb] .prose-pb h3:first-child{ margin-top:0; } body[data-pb] .prose-pb p{ font-size:17px; line-height:1.8; color:var(--ink-600); margin-bottom:18px; } body[data-pb] .prose-pb p:last-child{ margin-bottom:0; } /* ---------- 16e. BLOC CALMENT (texte + archive photo) ---------- */ body[data-pb] .calment-block__head{ max-width:720px; margin-bottom:40px; } body[data-pb] .calment-block__head h2{ font-size:clamp(28px,4vw,42px); margin-bottom:0; } body[data-pb] .calment-block__grid{ display:grid; grid-template-columns:1fr min(340px,38%); gap:48px; align-items:start; } body[data-pb] .calment-block__text{ max-width:none; } body[data-pb] .calment-block__note{ font-size:13px; color:var(--ink-600); line-height:1.65; margin-top:8px; } body[data-pb] .calment-block__figure{ position:sticky; top:88px; margin:0; } body[data-pb] .calment-block__frame{ background:#fff; border:1px solid var(--cream-200); border-radius:var(--radius-md); padding:14px; box-shadow:var(--shadow-card); transform:rotate(1.2deg); } body[data-pb] .calment-block__frame img{ width:100%; height:auto; border-radius:calc(var(--radius-md) - 4px); display:block; } body[data-pb] .calment-block__caption{ margin-top:12px; font-family:var(--font-mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-600); text-align:center; line-height:1.5; } body[data-pb] .calment-block__stats{ list-style:none; padding:0; margin:20px 0 0; display:grid; gap:10px; } body[data-pb] .calment-block__stats li{ background:#fff; border:1px solid var(--cream-200); border-left:3px solid var(--gold-ink); border-radius:0 var(--radius-md) var(--radius-md) 0; padding:12px 14px; } body[data-pb] .calment-block__stats strong{ display:block; font-family:var(--font-mono); font-size:22px; font-weight:400; color:var(--navy-700); line-height:1.1; margin-bottom:4px; } body[data-pb] .calment-block__stats span{ font-size:12px; color:var(--ink-600); line-height:1.4; } /* ---------- 17. REVEAL MOTION ---------- Progressive enhancement stricte : .reveal est visible par défaut (aucun risque de contenu invisible si le JS échoue, si IntersectionObserver n'est pas supporté, ou pour les robots qui ne scrollent pas). Le JS n'ajoute la classe .reveal-armed (qui masque avant animation) qu'après avoir vérifié le support et l'absence de prefers-reduced-motion. */ body[data-pb] .reveal-armed{ opacity:0; transform:translateY(16px); /* Opacité réglée séparément et plus courte que le transform : évite qu'un audit de contraste (ou un utilisateur) capture une frame intermédiaire à opacité partielle pendant le léger décalage vertical. */ transition:opacity .2s ease-out, transform .5s ease-out; } body[data-pb] .reveal-armed.is-visible{ opacity:1; transform:translateY(0); } @media (prefers-reduced-motion: reduce){ body[data-pb] .reveal-armed{ opacity:1; transform:none; transition:none; } body[data-pb] *{ scroll-behavior:auto !important; } } /* ---------- 18. RESPONSIVE ---------- */ @media (max-width:768px){ body[data-pb] .villes-index{ grid-template-columns:1fr; grid-template-rows:none; grid-auto-flow:row; } body[data-pb] .ville-row{ flex-wrap:wrap; } body[data-pb] .ville-row__num{ display:none; } body[data-pb] .ville-row__name{ font-size:19px; } body[data-pb] .ville-row__cta{ flex:0 0 100%; margin-top:6px; } body[data-pb] .ville-row:hover .ville-row__cta{ transform:translateX(0); } body[data-pb] .hero.hero-pb{ padding-top:28px; } body[data-pb] .hero-pb h1{ font-size:40px; } body[data-pb] .hero-pb__cards{ grid-template-columns:1fr; } body[data-pb] .grid-2{ grid-template-columns:1fr; gap:32px; } body[data-pb] .grid-cards, body[data-pb] .grid-cards--4{ grid-template-columns:1fr; } body[data-pb] .grid-cards--3{ grid-template-columns:1fr; } body[data-pb] .section-pb{ padding:64px 0; } body[data-pb] .hero.hero-interne{ padding:88px 0 48px; min-height:auto; } body[data-pb] .sim-esperance__form{ grid-template-columns:1fr; } body[data-pb] .sim-stepper__btn{ width:52px; height:52px; min-width:52px; min-height:52px; } body[data-pb] .calment-block__grid{ grid-template-columns:1fr; gap:32px; } body[data-pb] .calment-block__figure{ position:static; order:-1; max-width:320px; margin-inline:auto; } body[data-pb] .calment-block__frame{ transform:none; } body[data-pb] .hero-pb__trust{ flex-direction:column; align-items:flex-start; } body[data-pb] body, body[data-pb]{ font-size:16px; } } @media (max-width:480px){ body[data-pb] .hero-pb h1{ font-size:34px; } }