/* ══════════════════════════════════════════════════════════════════════════
Thème "Plumecocq" — Cabinet Plumecocq, transactions pharmaceutiques
Design sobre et classe : blanc dominant, bleu/vert de marque, typo Poppins/Inter.
══════════════════════════════════════════════════════════════════════════ */
/* ── Variables ── */
:root {
color-scheme: light;
--navy: #1c2b45;
--navy-mid: #24365a;
--navy-light: #2e4370;
--blue: #1657c9;
--blue-light: #2e8fe0;
--blue-dark: #0e3f9c;
--blue-pale: #eaf1fd;
--green: #2fae64;
--green-dark: #22914f;
--green-pale: #e7f7ee;
/* Verts réservés aux surfaces portant du TEXTE BLANC (boutons, barre CTA).
--green (#2fae64) ne donne que 2,85:1 avec du blanc et --green-dark 4,01:1 :
tous deux sous le seuil WCAG AA de 4,5:1 — c'est ce que relevait l'audit
d'accessibilité. --green-cta atteint 4,72:1, son hover 6,13:1.
--green et --green-dark restent utilisés pour le décoratif (filets,
bordures, puces), où le contraste de texte ne s'applique pas. */
--green-cta: #1e8449;
--green-cta-hover: #19703d;
--slate: #43536b;
--white: #ffffff;
--bg-soft: #f5f8fb;
--text: #263041;
--text-muted: #62707f;
--border: #e3e8ee;
--border-strong:#c9d3de;
--link: #1657c9;
--link-hover: #0e3f9c;
--shadow-sm: 0 1px 4px rgba(20,30,50,.06);
--shadow: 0 6px 20px rgba(20,30,50,.09);
--shadow-lg: 0 12px 36px rgba(20,30,50,.14);
--radius: 8px;
--radius-lg: 14px;
--max-w: 1220px;
--header-max-w: 1620px; /* le header occupe une largeur plus généreuse que le
container de contenu, comme sur le site actuel (WP) où le bandeau va
quasiment bord à bord — le corps de page reste lui contenu à --max-w */
--content-w: 980px;
--heading: 'Poppins', 'Segoe UI', system-ui, sans-serif;
--sans: 'Inter', 'Segoe UI', system-ui, sans-serif;
/* rétro-compatibilité avec le gabarit hérité (juridique) */
--serif: var(--heading);
--gold: var(--blue);
--gold-hover: var(--blue-dark);
--gold-pale: var(--blue-pale);
--parchment: var(--bg-soft);
--border-gold:var(--border-strong);
}
/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); color: var(--text); background: var(--white); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; padding-bottom: 0; }
body.has-mobile-cta { padding-bottom: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; transition: color .2s; }
a:hover { color: var(--blue-dark); }
h1,h2,h3,h4,h5,h6 { font-family: var(--heading); }
/* ── Top bar ── */
.top-bar { background: var(--navy); color: rgba(255,255,255,.7); font-size: .78rem; padding: .45rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.top-bar-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.top-bar a { color: rgba(255,255,255,.7); }
.top-bar a:hover { color: var(--green); }
.top-bar-right { display: flex; gap: 1.5rem; }
/* ── Header (fond blanc, sobre) ── */
.site-header { background: var(--header-bg, var(--white)); position: var(--header-position, sticky); top: 0; z-index: 510; box-shadow: 0 1px 0 var(--border), 0 4px 16px rgba(20,30,50,.04); }
.header-inner { max-width: var(--header-max-w); margin: 0 auto; padding: 0 2.25rem; display: flex; align-items: center; justify-content: space-between; height: var(--header-height, 78px); gap: 1.5rem; }
.site-logo { display: flex; align-items: center; gap: .75rem; text-decoration: none; flex-shrink: 0; }
.site-logo img { max-height: 52px; width: auto; }
.logo-icon { width: 42px; height: 42px; background: var(--blue); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-family: var(--heading); color: #fff; font-weight: 700; font-size: 1.2rem; flex-shrink: 0; }
.logo-text { font-family: var(--heading); color: var(--navy); font-size: 1.15rem; line-height: 1.2; font-weight: 700; }
.logo-text span { display: block; font-size: .68rem; font-family: var(--sans); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }
/* ── Navigation ── */
.site-nav { display: flex; align-items: center; gap: .1rem; flex: 1; justify-content: flex-end; }
.site-nav > li { list-style: none; position: relative; }
.site-nav > li > a { display: block; color: rgba(255,255,255,.88); font-size: 1.05rem; font-weight: 700; padding: .75rem 1.15rem; border-radius: var(--radius); transition: background .18s, color .18s; letter-spacing: .01em; }
.site-nav > li > a:hover, .site-nav > li.active > a { background: rgba(255,255,255,.1); color: var(--green); }
.site-nav > li.active > a { border-bottom: 2px solid var(--green); }
/* Desktop : header blanc → texte de nav foncé */
@media (min-width: 901px) {
.site-header .site-nav > li > a { color: var(--text); }
.site-header .site-nav > li > a:hover { background: var(--bg-soft); color: var(--blue); }
.site-header .site-nav > li.active > a { color: var(--blue); background: transparent; border-bottom: 2px solid var(--blue); }
.site-header .nav-search-btn { color: var(--text-muted); }
.site-header .nav-search-btn:hover { background: var(--bg-soft); color: var(--blue); }
/* Sous-menus au survol : réservé au desktop. Si cette règle n'est pas
scopée ici, ":hover" reste actif sur mobile (Safari iOS notamment
déclenche le hover sur un simple tap), ce qui ouvrait les sous-menus
du dropdown mobile sans clic sur la flèche. */
.site-nav > li:hover > .sub-menu, .site-nav > li.js-hover > .sub-menu { display: block; }
}
/* Dropdown */
.sub-menu { display: none; position: absolute; top: 100%; left: 0; margin-top: -8px; padding-top: 8px; background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--blue); border-radius: var(--radius); min-width: 260px; box-shadow: var(--shadow-lg); list-style: none; z-index: 100; }
.sub-menu li a { display: block; padding: .85rem 1.3rem; color: var(--text); font-size: 1rem; font-weight: 700; border-bottom: 1px solid var(--border); transition: background .15s; }
.sub-menu li:last-child a { border-bottom: none; }
.sub-menu li a:hover { background: var(--blue-pale); color: var(--blue-dark); }
.site-nav > li.has-children > a::after { content: '▾'; font-size: .6rem; margin-left: .3rem; vertical-align: middle; opacity: .5; display: inline-block; transition: transform .2s; }
/* Sur mobile, le bouton .sub-toggle en fin de ligne fait déjà office
d'indicateur de sous-menu — cette flèche collée au texte faisait doublon. */
@media (max-width: 900px) { .site-nav > li.has-children > a::after { display: none; } }
.site-nav > li.has-children:hover > a::after { transform: rotate(-180deg); opacity: 1; }
.sub-toggle { display: none; }
.sub-menu li { position: relative; }
.sub-menu li.has-children > a::after { content: '›'; float: right; margin-left: .5rem; opacity: .5; font-size: 1rem; line-height: 1; }
.sub-menu .sub-menu { display: none; position: absolute; top: -3px; left: 100%; background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--blue); border-radius: var(--radius); min-width: 200px; box-shadow: var(--shadow); list-style: none; z-index: 100; }
.sub-menu li:hover > .sub-menu { display: block; }
.sub-menu .sub-menu.js-open { display: block; }
.sub-menu li.flyout-left > .sub-menu { left: auto; right: 100%; }
.logo-qcms-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 7px; display: block; }
/* Hamburger — foncé (le header est en fond clair --header-bg par défaut) */
.nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: .5rem; background: none; border: none; }
.nav-toggle span { display: block; width: 22px; height: 2px; background-color: var(--navy); background-image: linear-gradient(var(--navy), var(--navy)); border-radius: 2px; transition: .3s; forced-color-adjust: none; }
/* Ex "gold-bar" → simple liseré discret */
.gold-bar { height: 1px; background: var(--border); }
/* ── Boutons CTA d'en-tête (Contact / Téléphone) ── */
.header-ctas { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.header-cta { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.6rem; border-radius: var(--radius); font-weight: 700; font-size: 1.05rem; white-space: nowrap; transition: background-color .15s, box-shadow .15s, transform .15s; }
.header-cta svg { width: 19px; height: 19px; flex-shrink: 0; }
.header-cta--contact { background: var(--blue); color: #fff; }
.header-cta--contact:hover { background: var(--blue-dark); color: #fff; box-shadow: 0 4px 14px rgba(14,63,156,.35); transform: translateY(-1px); }
.header-cta--phone { background: var(--green-cta); color: #fff; }
.header-cta--phone:hover { background: var(--green-cta-hover); color: #fff; box-shadow: 0 4px 14px rgba(34,145,79,.35); transform: translateY(-1px); }
@media (max-width: 900px) { .header-ctas { display: none; } }
/* ── Breadcrumb ── */
.breadcrumb-wrap { background: var(--bg-soft); border-bottom: 1px solid var(--border); padding: .65rem 0; font-size: .8rem; }
.breadcrumb { max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; color: var(--text-muted); }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb .sep { color: var(--border-strong); font-size: .7rem; }
.breadcrumb .current { color: var(--text); font-weight: 500; }
/* ── Hero page interne (titre seul, sobre) ── */
.page-hero { background: var(--bg-soft); color: var(--navy); padding: 3rem 1.5rem 2.25rem; text-align: center; position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.page-hero-inner { position: relative; max-width: 820px; margin: 0 auto; }
.page-hero h1 { font-family: var(--heading); font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 700; line-height: 1.25; color: var(--navy); }
.page-hero p { font-size: 1.05rem; color: var(--text-muted); max-width: 560px; margin: .75rem auto 0; }
/* Variante bleue (acheter-une-pharmacie, temoignage, blog) : sélecteur composé
".page-hero.page-hero--blue" pour garantir une spécificité strictement plus
forte que ".page-hero h1" ci-dessus, quel que soit l'ordre des règles dans
la feuille — sinon, à spécificité égale, c'est la dernière règle déclarée
qui l'emporte (bug précédent : le titre restait noir malgré le fond bleu). */
.page-hero.page-hero--blue { background: var(--blue); border-bottom-color: transparent; }
.page-hero.page-hero--blue h1 { color: #fff; }
/* Resserre l'espace au-dessus du bloc de recherche/annonces pour réduire le
scroll (utilisé uniquement avec .page-hero--blue, cf. page.php) */
.card-padded--tight-top { padding-top: 1.1rem; }
.hero-divider { width: 56px; height: 3px; background: var(--green); margin: 1.15rem auto 0; border-radius: 2px; }
/* ── Hero d'accueil (photo plein cadre) ── */
/* Titre + tiret + sous-titre centrés, comme sur la page d'accueil du site actuel :
le dégradé d'éclaircissement est repassé en radial centré (au lieu d'un dégradé
gauche→droite pensé pour un texte aligné à gauche) pour garder un bon contraste
derrière un texte désormais centré. */
.home-hero { position: relative; min-height: 560px; display: flex; align-items: center; background-size: cover; background-position: center 25%; overflow: hidden; }
.home-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 65% 85% at 50% 50%, rgba(255,255,255,.48) 0%, rgba(255,255,255,.2) 55%, rgba(255,255,255,.03) 85%); pointer-events: none; }
/* z-index:1 indispensable. `.home-hero::after` est le dernier enfant du hero :
sans ordre d'empilement explicite, le voile blanc se peint PAR-DESSUS le
texte et le délave. Le titre récupère ainsi son bleu marine plein, et le
voile ne s'applique plus qu'à la photo. */
.home-hero-inner { position: relative; z-index: 1; max-width: var(--max-w); margin: 0 auto; padding: 3rem 1.5rem; width: 100%; text-align: center; }
.home-hero h1 { font-family: var(--heading); font-weight: 700; font-size: clamp(1.7rem, 4vw, 2.7rem); color: var(--navy); max-width: 640px; line-height: 1.3; margin: 0 auto; }
.home-hero .hero-divider { margin: 1.15rem auto 0; }
.home-hero p { font-size: 1.1rem; color: var(--slate); max-width: 560px; margin: 1.1rem auto 0; }
@media (max-width: 640px) {
/* Hero mobile — retours client du 02/09/2026 :
hauteur réduite, texte centré et plus lisible, visage mieux cadré.
Hauteur : 460 → 340 px. Le bandeau occupait plus de la moitié d'un écran
de téléphone avant tout contenu utile.
Cadrage : `cover` ne déforme jamais l'image (il recadre). L'effet de
visage « écrasé » venait du cadrage vertical à 25 %, qui coupait les
sujets à mi-hauteur sur un conteneur devenu étroit et haut. À 38 %, les
visages sont pris dans le tiers supérieur, là où ils se trouvent.
Lisibilité : le texte est FONCÉ sur photo éclaircie, comme sur desktop.
Le voile ne sert qu'à calmer la photo derrière — il ne doit jamais passer
devant le texte (cf. z-index sur .home-hero-inner). Première version
montée à 88 % : elle délavait complètement le titre, le voile étant peint
par-dessus. Ramené à 62-72 %, avec le texte au-dessus. */
.home-hero { min-height: 340px; background-position: center 38%; }
.home-hero::after { background: radial-gradient(ellipse 120% 75% at 50% 50%, rgba(255,255,255,.72) 0%, rgba(255,255,255,.62) 60%, rgba(255,255,255,.45) 100%); }
.home-hero-inner {
padding: 1.75rem 1.25rem;
display: flex; flex-direction: column;
align-items: center; justify-content: center; /* centrage vertical réel */
min-height: 340px;
}
/* Le H1 mentionne désormais « dans les Hauts-de-France » : on resserre
légèrement la taille et l'interligne pour qu'il tienne sans repousser
le contenu hors de la zone visible. */
.home-hero h1 { font-size: 1.55rem; line-height: 1.25; color: var(--navy); }
.home-hero p { font-size: 1rem; color: var(--navy-mid); margin-top: .85rem; }
}
/* ── Layout principal ── */
.site-main { max-width: var(--max-w); margin: 0 auto; padding: 2.5rem 1.5rem; }
.site-main.with-sidebar { display: grid; grid-template-columns: 1fr 300px; gap: 2.5rem; align-items: start; }
/* ── Cards ── */
.card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.card-padded { padding: 1.75rem; }
/* ── Image à la une : pleine largeur (desktop + mobile) ──
L'image remplit toute la largeur de l'écran (100vw) via object-fit:cover ;
si le fichier source est plus étroit que l'écran, le navigateur l'agrandit
lui-même (srcset + interpolation lissée) plutôt que d'afficher des bandes
floutées sur les côtés. */
.full-bleed-figure { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; margin-bottom: 2rem; line-height: 0; overflow: hidden; }
.full-bleed-figure__sharp-img { display: block; margin: 0 auto; width: 100%; max-height: 560px; object-fit: cover; }
/* Image à la une avec titre + tiret surimposés (pages intérieures : témoignages,
annonces pharmacie, etc.), centrés, comme le hero de l'accueil. */
.full-bleed-figure--titled::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,.18) 0%, rgba(15,23,42,.5) 100%); z-index: 1; pointer-events: none; }
.fb-title-overlay { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.75rem; }
.fb-title-overlay-inner { max-width: 760px; }
.fb-title-overlay h1 { color: #fff; font-family: var(--heading); font-weight: 700; font-size: clamp(1.6rem, 3.6vw, 2.5rem); line-height: 1.3; margin: 0; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.fb-title-overlay .hero-divider { margin: 1.1rem auto 0; }
/* ── Page content ── */
.content-header { margin-bottom: 2rem; }
.content-header h1, .article-title { font-family: var(--heading); font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 700; line-height: 1.3; color: var(--navy); margin-bottom: .6rem; }
.content-header .lead { font-size: 1.1rem; color: var(--text-muted); border-left: 3px solid var(--green); padding-left: .9rem; margin-top: .9rem; font-style: italic; }
.article-body h2 { font-family: var(--heading); font-size: 1.4rem; font-weight: 700; color: var(--navy); margin: 2.5rem 0 .9rem; padding-bottom: .5rem; border-bottom: 2px solid var(--border); position: relative; }
.article-body h2::before { content: ''; position: absolute; bottom: -2px; left: 0; width: 46px; height: 2px; background: var(--green); }
.article-body h3 { font-family: var(--heading); font-size: 1.12rem; color: var(--navy-mid); margin: 1.75rem 0 .6rem; font-weight: 600; }
.article-body h4 { font-weight: 600; margin: 1.25rem 0 .4rem; }
.article-body p { margin-bottom: 1.1rem; line-height: 1.8; }
.article-body ul, .article-body ol { margin: .75rem 0 1.1rem 1.75rem; }
.article-body li { margin-bottom: .4rem; line-height: 1.7; }
.article-body strong { font-weight: 600; color: var(--navy); }
.article-body em { font-style: italic; }
.article-body a:not(.btn), .blog-content a:not(.btn), .cat-editorial a:not(.btn) { color: var(--link); text-decoration: underline; text-decoration-color: rgba(22,87,201,.35); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .18s ease, text-decoration-color .18s ease; }
.article-body a:not(.btn):hover, .blog-content a:not(.btn):hover, .cat-editorial a:not(.btn):hover { color: var(--link-hover); text-decoration-color: var(--link-hover); }
.article-body a:not(.btn) strong, .blog-content a:not(.btn) strong, .cat-editorial a:not(.btn) strong { color: inherit; }
.article-body blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem 1rem 1.5rem; border-left: 4px solid var(--green); background: var(--green-pale); border-radius: 0 var(--radius) var(--radius) 0; font-style: italic; color: var(--navy-mid); }
.article-body figure { margin: 1.75rem 0; }
.article-body figure img { border-radius: var(--radius); width: 100%; }
.article-body figcaption { font-size: .8rem; color: var(--text-muted); text-align: center; margin-top: .5rem; }
.article-body table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .9rem; }
.article-body th { background: var(--navy); color: #fff; padding: .7rem 1rem; text-align: left; font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.article-body td { padding: .65rem 1rem; border-bottom: 1px solid var(--border); }
.article-body tr:last-child td { border-bottom: none; }
.article-body tr:nth-child(even) td { background: var(--bg-soft); }
/* Toutes les images du contenu en pleine largeur sur mobile (bord à bord) */
@media (max-width: 640px) {
.card-padded .article-body img,
.card-padded .article-body figure { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; border-radius: 0; }
.card-padded .article-body figure img { border-radius: 0; }
.card-padded .article-body figcaption { padding: 0 1.25rem; }
}
/* ── Article meta ── */
/* Barre fine pleine largeur sous l'image à la une, même langage visuel que
.breadcrumb-wrap/.breadcrumb : fond clair + bordure fine, contenu recentré. */
.post-meta-wrap { background: #f4f7fa; border-bottom: 1px solid var(--border); padding: .55rem 0; }
.article-meta { max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; align-items: center; font-size: .78rem; color: var(--text-muted); }
.article-meta .meta-item { display: flex; align-items: center; gap: .35rem; }
.article-meta .meta-item svg { width: 13px; height: 13px; opacity: .6; }
.cat-badge { display: inline-flex; align-items: center; background: var(--blue); color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .25rem .65rem; border-radius: 999px; text-decoration: none; }
.cat-badge:hover { background: var(--blue-dark); color: #fff; }
.cat-badge--static { cursor: default; }
.cat-badge--static:hover { background: var(--blue); color: #fff; }
/* ── Disclaimer (réutilisé pour messages d'info) ── */
.legal-disclaimer { background: var(--blue-pale); border: 1px solid var(--border-strong); border-left: 4px solid var(--blue); border-radius: var(--radius); padding: .9rem 1.1rem; font-size: .82rem; color: var(--navy-mid); margin: 2rem 0; display: flex; gap: .6rem; }
.legal-disclaimer strong { color: var(--navy); }
/* ── TOC ── */
.toc-box { background: var(--bg-soft); border: 1px solid var(--border); border-top: 3px solid var(--green); border-radius: var(--radius); padding: 1.1rem 1.25rem; margin: 1.75rem 0; font-size: .875rem; }
.toc-box .toc-title { font-family: var(--heading); font-weight: 700; color: var(--navy); margin-bottom: .75rem; font-size: .95rem; display: flex; align-items: center; gap: .4rem; }
.toc-list { list-style: none; }
.toc-list li { padding: .25rem 0; }
.toc-list a { color: var(--navy-mid); font-size: .85rem; display: flex; align-items: baseline; gap: .4rem; }
.toc-list a::before { content: '§'; color: var(--green); font-size: .75rem; flex-shrink: 0; }
.toc-list a:hover { color: var(--green-dark); }
.toc-list:not(.toc-nested) .toc-h3 { padding-left: 1.1rem; }
.toc-list:not(.toc-nested) .toc-h4 { padding-left: 2.2rem; }
.toc-list .toc-h3 a::before { content: '›'; }
.toc-list .toc-h4 a::before { content: '·'; }
.toc-nested, .toc-nested ul { list-style: none; }
.toc-nested ul { padding-left: .9rem; margin: .15rem 0 .15rem .15rem; border-left: 1px solid var(--border); }
/* ── Blog listing ── */
.section-heading { font-family: var(--heading); font-size: 1.55rem; font-weight: 700; color: var(--navy); margin-bottom: 1.5rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); position: relative; }
.section-heading::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 56px; height: 2px; background: var(--green); }
/* Règle générique : partout où un .section-heading est centré (attribut inline
style="text-align:center...", pattern utilisé dans tout le contenu édité :
accueil, pages "compétences", etc.), son tiret ::after doit suivre et se
recentrer. Remplace les correctifs ponctuels par sélecteur (#competences,
.home-domains--photo...) qui obligeaient à corriger un par un chaque nouvel
endroit — source des tirets oubliés signalés par l'utilisateur. */
.section-heading[style*="text-align:center"]::after { left: 50%; transform: translateX(-50%); }
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.filter-btn { display: inline-block; padding: .35rem .9rem; border: 1px solid var(--border); border-radius: 999px; font-size: .8rem; color: var(--text-muted); transition: all .18s; font-weight: 500; }
.filter-btn:hover, .filter-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.post-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; overflow: hidden; }
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.post-card-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.post-card-body { padding: 1.35rem; flex: 1; display: flex; flex-direction: column; }
.post-card-cat { margin-bottom: .6rem; }
.post-card h2 { font-family: var(--heading); font-size: 1.05rem; color: var(--navy); line-height: 1.4; margin-bottom: .6rem; font-weight: 600; }
.post-card h2 a { color: inherit; }
.post-card h2 a:hover { color: var(--blue); }
.post-card .excerpt { font-size: .875rem; color: var(--text-muted); line-height: 1.65; flex: 1; margin-bottom: .9rem; }
.post-card-footer { padding: .75rem 1.35rem; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; font-size: .78rem; color: var(--text-muted); background: var(--bg-soft); }
.read-more { font-size: .82rem; font-weight: 600; color: var(--blue); display: flex; align-items: center; gap: .25rem; }
.read-more:hover { color: var(--blue-dark); }
.post-list-item { background: var(--white); border: 1px solid var(--border); border-left: 4px solid transparent; border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-bottom: 1rem; transition: border-left-color .2s, box-shadow .2s; display: flex; gap: 1.25rem; align-items: flex-start; }
.post-list-item:hover { border-left-color: var(--green); box-shadow: var(--shadow-sm); }
.post-list-date { flex-shrink: 0; text-align: center; background: var(--navy); color: #fff; border-radius: var(--radius); padding: .5rem .7rem; min-width: 52px; }
.post-list-date .day { display: block; font-size: 1.3rem; font-weight: 700; line-height: 1; font-family: var(--heading); }
.post-list-date .month { display: block; font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.post-list-content { flex: 1; }
.post-list-content h2 { font-family: var(--heading); font-size: 1.1rem; color: var(--navy); margin-bottom: .35rem; font-weight: 600; }
.post-list-content h2 a { color: inherit; }
.post-list-content h2 a:hover { color: var(--blue); }
.post-list-content p { font-size: .875rem; color: var(--text-muted); line-height: 1.65; }
/* ── Sidebar ── */
.sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.sidebar-widget { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.widget-title { background: var(--navy); color: #fff; font-family: var(--heading); font-size: .9rem; font-weight: 600; padding: .75rem 1.1rem; letter-spacing: .03em; display: flex; align-items: center; gap: .5rem; }
.widget-body { padding: 1rem 1.1rem; }
.widget-list { list-style: none; }
.widget-list li { border-bottom: 1px solid var(--border); }
.widget-list li:last-child { border-bottom: none; }
.widget-list a { display: flex; align-items: center; gap: .5rem; padding: .55rem 0; font-size: .875rem; color: var(--text); }
.widget-list a::before { content: '›'; color: var(--green); font-weight: 700; }
.widget-list a:hover { color: var(--blue); }
.widget-list .count { margin-left: auto; background: var(--bg-soft); color: var(--text-muted); font-size: .72rem; padding: .1rem .45rem; border-radius: 999px; border: 1px solid var(--border); }
.toc-widget .toc-list { padding: 0; }
.toc-widget .toc-list > li { border-bottom: 1px solid var(--border); }
.toc-widget .toc-list > li:last-child { border-bottom: none; }
.toc-widget .toc-nested ul li { border-bottom: none; }
.toc-widget .toc-list a { padding: .5rem 0; }
.sidebar-widget-title { background: var(--navy); color: #fff; font-family: var(--heading); font-size: .9rem; font-weight: 600; padding: .75rem 1.1rem; letter-spacing: .03em; display: flex; align-items: center; gap: .5rem; }
.sidebar-list { list-style: none; padding: .25rem 0; margin: 0; }
.sidebar-list li { border-bottom: 1px solid var(--border); }
.sidebar-list li:last-child { border-bottom: none; }
.sidebar-list a { display: flex; align-items: center; gap: .5rem; padding: .55rem 1.1rem; font-size: .875rem; color: var(--text); }
.sidebar-list a::before { content: '›'; color: var(--green); font-weight: 700; }
.sidebar-list a:hover { color: var(--blue); }
.sidebar-search { display: flex; gap: .4rem; padding: .75rem 1.1rem; }
.sidebar-search input[type="search"] { flex: 1; border: 1px solid var(--border); border-radius: 4px; padding: .45rem .7rem; font-size: .875rem; background: var(--bg-soft); color: var(--text); outline: none; }
.sidebar-search input[type="search"]:focus { border-color: var(--blue); }
.sidebar-search button { padding: .45rem .75rem; background: var(--navy); color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: .85rem; line-height: 1; transition: background .15s; }
.sidebar-search button:hover { background: var(--blue); }
.after-content-widgets { max-width: var(--max-w); margin: 2rem auto 0; padding: 0 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
/* ── Grille de mise en avant (accueil / archives) ── */
.domains-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 1.5rem 0; }
.home-domains-inner--full { max-width: 100%; padding: 0 2rem; }
.home-domains--image .domain-card { padding: 0; overflow: hidden; border-top: none; }
.domain-card-img { width: 100%; height: 170px; background-size: cover; background-position: center; flex-shrink: 0; }
.home-domains--image .domain-card h2, .home-domains--image .domain-card h3 { padding: .7rem 1rem .25rem; }
.home-domains--image .domain-card p { padding: 0 1rem .85rem; }
.home-domains--image .domain-card .domain-icon { display: none; }
.home-domains--minimal .domain-card { background: transparent; border: 1.5px solid var(--border); border-top-color: var(--border); padding: .9rem 1.1rem; }
.home-domains--minimal .domain-card .domain-icon { font-size: 1.5rem; margin-bottom: .35rem; }
.home-domains--minimal .domain-card:hover { background: var(--bg-soft); }
.domain-card { background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--green); border-radius: var(--radius); padding: 1.25rem; text-align: center; transition: transform .2s, box-shadow .2s; text-decoration: none; color: inherit; }
.domain-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.domain-card .domain-icon { font-size: 2rem; margin-bottom: .6rem; }
/* h2 accepté en plus de h3 : les trois cartes du bloc haut de l'accueil sont
passées en h2 pour respecter la hiérarchie h1 → h2 (audit « ordre des titres »).
Le rendu visuel reste identique. */
.domain-card h2, .domain-card h3 { font-family: var(--heading); font-size: .95rem; color: var(--navy); font-weight: 600; margin-bottom: .25rem; }
.domain-card p { font-size: .78rem; color: var(--text-muted); }
/* ── Cartes pleine couleur (accueil : Acheter / Céder) ── */
.domain-card--solid { border: none; padding: 2.25rem 1.75rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.domain-card--solid .domain-icon-solid { font-size: 2.5rem; line-height: 1; color: var(--white); margin-bottom: .9rem; }
.domain-card--solid h2, .domain-card--solid h3 { color: var(--white); font-size: 1.2rem; margin-bottom: 0; }
.domain-card--solid .card-divider { width: 42px; height: 2px; background: rgba(255,255,255,.55); margin: .85rem 0; border-radius: 2px; border: none; }
.domain-card--solid p { color: #fff; font-size: .92rem; line-height: 1.55; }
.domain-card--solid:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
/* #2e90f0 ne donnait que 3,30:1 avec du texte blanc (seuil AA : 4,5:1).
#1974d2 atteint 4,70:1 en restant dans la même famille de bleu. */
.domain-card--solid-blue { background: #1974d2; }
.domain-card--solid-navy { background: #1962ba; }
/* ── Grille tarifs (honoraires) — 2 cartes colorées ── */
.tarifs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin: 1.75rem 0; }
.tarifs-card { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.tarifs-card-head { padding: 1.5rem 1.25rem; text-align: center; color: #fff; }
.tarifs-card-head--green { background: var(--green); }
.tarifs-card-head--coral { background: #e8837f; }
.tarifs-card-label { display: block; font-weight: 700; font-size: 1.02rem; margin-bottom: .4rem; }
.tarifs-card-amount { display: block; font-size: .92rem; opacity: .95; }
.tarifs-card-body { background: var(--white); border: 1px solid var(--border); border-top: none; padding: 1.5rem 1.25rem; text-align: center; }
.tarifs-card-body-title { display: block; font-family: var(--heading); font-weight: 700; font-size: 1.05rem; margin-bottom: .4rem; }
.tarifs-card-body-title--green { color: var(--green-dark); }
.tarifs-card-body-title--coral { color: #d9635e; }
.tarifs-card-body-value { display: block; font-weight: 700; color: var(--navy); }
@media (max-width: 600px) { .tarifs-grid { grid-template-columns: 1fr; } }
/* ── Widget « Trouver une officine » (visuel uniquement, redirige vers les annonces) ── */
.finder-widget { background: #083683; border-radius: var(--radius); padding: 2rem 1.75rem; display: flex; flex-direction: column; text-decoration: none; }
.finder-widget h2, .finder-widget h3 { font-family: var(--heading); font-size: 1.15rem; font-weight: 700; color: var(--white); line-height: 1.3; text-transform: uppercase; letter-spacing: .01em; margin-bottom: 0; text-align: center; }
.finder-widget .card-divider { width: 42px; height: 2px; background: var(--green); margin: .9rem auto 1.35rem; border-radius: 2px; }
.finder-select { width: 100%; padding: .7rem 2.2rem .7rem .9rem; margin-bottom: .85rem; border: 1px solid rgba(255,255,255,.25); border-radius: 6px; background: rgba(255,255,255,.07) url("data:image/svg+xml;utf8,") no-repeat right .8rem center/12px; color: rgba(255,255,255,.92); font-size: .88rem; font-family: var(--sans); appearance: none; cursor: pointer; }
.finder-select option { color: var(--text); }
/* Département + ville côte à côte, sur la largeur d'un seul champ.
`min-width:0` est indispensable : sans lui, un