/* =====================================================================
   VENTURE AVOCATS — Feuille de style principale
   Palette et identité reprises du logiciel de gestion du cabinet
   ===================================================================== */

/* ------------------------- 1. Tokens ------------------------------- */
:root {
  /* Bleus (identité logiciel : #002878 / #001A60) */
  --navy-900: #000f36;
  --navy-800: #001a60;
  --navy: #002878;
  --navy-600: #143d9c;
  --navy-050: #eef1f8;

  /* Or (identité logiciel : #AA8C50) */
  --gold: #aa8c50;
  --gold-light: #c9a96a;
  --gold-pale: #e8dcc2;

  /* Neutres */
  --ink: #131f38;
  --ink-soft: #3a4761;
  --muted: #5a6a8a;
  --line: #e2e6f0;
  --line-soft: #eef1f7;
  --bg: #ffffff;
  --bg-alt: #f6f8fc;

  /* Typo */
  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Police des titres (07/09/2026) : Inter, comme le bandeau d'accueil. Le serif
     reste sur la marque, les monogrammes et les citations. Retour arrière :
     remettre var(--serif) ici. */
  --titre: var(--sans);

  /* Mesures */
  --wrap: 1200px;
  --wrap-narrow: 860px;
  --radius: 4px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(0, 26, 96, .06), 0 4px 14px rgba(0, 26, 96, .06);
  --shadow-md: 0 4px 12px rgba(0, 26, 96, .08), 0 18px 40px rgba(0, 26, 96, .10);
  --shadow-lg: 0 30px 70px rgba(0, 15, 54, .18);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 92px;
}

/* ------------------------- 2. Base --------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--navy); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--gold); }

h1, h2, h3, h4 {
  font-family: var(--titre);
  color: var(--navy-800);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 .6em;
  letter-spacing: -.015em;
  text-wrap: balance;
}

/* Inter paraît ~15 % plus grand que Cormorant à corps égal : corps réduits d'autant */
h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.65rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
h4 { font-size: 1.08rem; font-family: var(--sans); font-weight: 600; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.2em; padding-left: 1.15em; }
li { margin-bottom: .45em; }

strong { color: var(--navy-800); font-weight: 600; }

hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

::selection { background: var(--navy); color: #fff; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* ------------------------- 3. Utilitaires -------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding: clamp(4.5rem, 8vw, 7.5rem) 0; }
.section--tight { padding: clamp(3rem, 5vw, 4.5rem) 0; }
.section--alt { background: var(--bg-alt); }
.section--navy {
  background:
    radial-gradient(120% 130% at 15% 0%, #143a92 0%, transparent 55%),
    linear-gradient(160deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: rgba(255, 255, 255, .82);
  position: relative;
  overflow: hidden;
}
.section--navy h2, .section--navy h3 { color: #fff; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--gold);
  opacity: .8;
}
.section--navy .eyebrow { color: var(--gold-light); }

.lead { font-size: 1.16rem; color: var(--ink-soft); line-height: 1.75; }
.section--navy .lead { color: rgba(255, 255, 255, .82); }

.head { max-width: 720px; margin-bottom: 3.2rem; }
.head--center { margin-left: auto; margin-right: auto; text-align: center; }
.head--center .eyebrow { justify-content: center; }
.head--center .eyebrow::before { display: none; }

.rule {
  width: 56px; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-pale));
  margin: 0 0 1.6rem;
  border: 0;
}
.head--center .rule { margin-left: auto; margin-right: auto; }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* ------------------------- 4. Boutons ------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 1.05rem 1.9rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .28s var(--ease);
  white-space: nowrap;
}

.btn--primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--navy-800); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn--gold { background: var(--gold); color: #fff; }
.btn--gold:hover { background: #96793f; color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn--outline { background: transparent; color: var(--navy); border-color: var(--line); }
.btn--outline:hover { border-color: var(--navy); color: var(--navy-800); background: var(--navy-050); }

.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.btn--ghost-light:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }

.btn--sm { padding: .72rem 1.25rem; font-size: .74rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
}
.link-arrow span { transition: transform .25s var(--ease); }
.link-arrow:hover span { transform: translateX(5px); }

/* ------------------------- 5. En-tête ------------------------------ */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.header.is-stuck { box-shadow: 0 2px 20px rgba(0, 26, 96, .09); }

.header__bar {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: nowrap;
}

.brand { display: flex; align-items: center; gap: .85rem; flex: none; }
.brand__mark { width: 46px; height: auto; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--serif);
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: .17em;
  color: var(--navy-800);
  text-transform: uppercase;
}
.brand__sub {
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: .34rem;
}

.nav { display: flex; align-items: center; gap: .3rem; flex-wrap: nowrap; }
.nav__link {
  position: relative;
  display: block;
  padding: .55rem .85rem;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: .85rem; right: .85rem; bottom: .2rem;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav__link:hover { color: var(--navy); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--navy); font-weight: 600; }

.header__cta { display: flex; align-items: center; gap: 1rem; flex: none; }
.header__tel {
  display: inline-flex;
  align-items: center;
  flex: none;
  white-space: nowrap;
  gap: .45rem;
  font-size: .86rem;
  font-weight: 600;
  color: var(--navy-800);
  letter-spacing: .02em;
}
.header__tel svg { width: 15px; height: 15px; stroke: var(--gold); }

.burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.burger span {
  display: block;
  width: 19px; height: 1.5px;
  background: var(--navy-800);
  margin: 3.5px auto;
  transition: transform .3s var(--ease), opacity .2s;
}
.burger.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Panneau mobile */
.mobile-nav {
  position: fixed;
  top: var(--header-h); left: 0; right: 0;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: all .3s var(--ease);
  z-index: 99;
}
.mobile-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
.mobile-nav a {
  display: block;
  padding: 1.05rem 28px;
  border-bottom: 1px solid var(--line-soft);
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.mobile-nav a.is-active { color: var(--navy); background: var(--navy-050); }
.mobile-nav__foot { padding: 1.4rem 28px 1.8rem; display: grid; gap: .7rem; }
/* Les boutons du pied du menu mobile ne doivent PAS hériter de la couleur des liens
   de navigation : « .mobile-nav a » (spécificité 0,1,1) bat « .btn--primary » (0,1,0),
   ce qui affichait « Prendre rendez-vous » en encre sombre sur fond marine — illisible.
   Les deux sélecteurs ci-dessous sont en 0,2,0 et reprennent donc la main. */
.mobile-nav__foot .btn--primary,
.mobile-nav__foot .btn--primary:hover { color: #fff; }
.mobile-nav__foot .btn--outline { color: var(--navy); }
.mobile-nav__foot .btn--outline:hover { color: var(--navy-800); }

/* ------------------------- 6. Hero -------------------------------- */
.hero {
  position: relative;
  padding: calc(var(--header-h) + clamp(4.5rem, 9vw, 8rem)) 0 clamp(4.5rem, 8vw, 7rem);
  background:
    radial-gradient(90% 120% at 88% 8%, rgba(20, 61, 156, .55) 0%, transparent 60%),
    radial-gradient(70% 90% at 5% 100%, rgba(170, 140, 80, .18) 0%, transparent 60%),
    linear-gradient(155deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: rgba(255, 255, 255, .84);
  overflow: hidden;
  isolation: isolate;
}
.hero__watermark {
  position: absolute;
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  width: min(560px, 52vw);
  opacity: .07;
  z-index: -1;
  pointer-events: none;
}
.hero__grid-lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 120px 100%;
  mask-image: linear-gradient(180deg, transparent, #000 40%, transparent);
}
.hero__inner { max-width: 800px; }
.hero h1 { color: #fff; margin-bottom: 1.4rem; }
.hero h1 em {
  font-style: normal;
  color: var(--gold-light);
  display: block;
}
.hero__baseline {
  font-size: clamp(1.05rem, 1.5vw, 1.24rem);
  color: rgba(255, 255, 255, .82);
  max-width: 620px;
  margin-bottom: 2.4rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 3.6rem; }

.hero__pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding-top: 1.9rem;
}
.hero__pillar {
  flex: 1 1 150px;
  padding-right: 1.5rem;
}
.hero__pillar b {
  display: block;
  font-family: var(--titre);
  font-size: 1.22rem;
  color: #fff;
  font-weight: 600;
  margin-bottom: .2rem;
}
.hero__pillar span { font-size: .82rem; color: rgba(255, 255, 255, .6); letter-spacing: .04em; }

/* Bandeau de chiffres */
.stats {
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
}
.stats__item {
  background: #fff;
  padding: 2.6rem 1.6rem;
  text-align: center;
}
.stats__num {
  font-family: var(--titre);
  font-size: clamp(2.1rem, 3.6vw, 2.9rem);
  font-weight: 600;
  color: var(--navy);
  line-height: 1;
  margin-bottom: .5rem;
}
.stats__num sub { font-size: .5em; vertical-align: baseline; color: var(--gold); }
.stats__label {
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ------------------------- 7. Grilles ----------------------------- */
.grid { display: grid; gap: 1.6rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.split--wide-left { grid-template-columns: 1.15fr .85fr; }

/* Carte générique */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2.1rem 1.9rem;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  position: relative;
  overflow: hidden;
  /* La carte est un <a> entier (toute sa surface mène à la page de matière,
     pas seulement son titre) : neutraliser les styles de lien par défaut. */
  display: block;
  color: inherit;
  text-decoration: none;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold), var(--gold-pale));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.card:hover::before { transform: scaleY(1); }
.card h3 { margin-bottom: .55rem; }
.card p { font-size: .96rem; color: var(--muted); margin-bottom: 0; }
.card__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  background: var(--navy-050);
  margin-bottom: 1.25rem;
}
.card__icon svg { width: 22px; height: 22px; stroke: var(--navy); fill: none; stroke-width: 1.5; }
.card__list { margin: 1rem 0 0; padding: 0; list-style: none; }
.card__list li {
  position: relative;
  padding-left: 1.05rem;
  font-size: .92rem;
  color: var(--muted);
  margin-bottom: .3rem;
}
.card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
}

/* Carte de compétence numérotée */
.skill {
  display: flex;
  gap: 1.4rem;
  padding: 1.9rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.skill:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.skill__num {
  font-family: var(--titre);
  font-size: 1.5rem;
  color: var(--gold);
  line-height: 1;
  flex: none;
  padding-top: .1rem;
  min-width: 2.2rem;
}
.skill h3 { font-size: 1.16rem; margin-bottom: .45rem; }
.skill p { font-size: .95rem; color: var(--muted); margin: 0; }
.skill__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.tag {
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--navy);
  background: var(--navy-050);
  border-radius: 100px;
  padding: .3rem .7rem;
}

/* ------------------------- 8. Équipe ------------------------------ */
.person {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  display: flex;
  flex-direction: column;
}
.person:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.person__portrait {
  aspect-ratio: 4 / 3.4;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 120% at 30% 0%, #17408f 0%, transparent 60%),
    linear-gradient(150deg, var(--navy-800), var(--navy-900));
  position: relative;
  overflow: hidden;
}
.person__initials {
  font-family: var(--serif);
  font-size: 3.1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .92);
  letter-spacing: .06em;
}
.person__portrait::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.person__body { padding: 1.6rem 1.7rem 1.8rem; flex: 1; display: flex; flex-direction: column; }
.person__name { font-family: var(--titre); font-size: 1.32rem; color: var(--navy-800); margin-bottom: .2rem; }
.person__role {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.person__spec { font-size: .93rem; color: var(--muted); margin-bottom: 1.2rem; flex: 1; }
.person__mail {
  font-size: .84rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  word-break: break-all;
}

.staff {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.staff__item { background: #fff; padding: 1.5rem 1.6rem; }
.staff__item b { display: block; font-family: var(--titre); font-size: 1.1rem; color: var(--navy-800); font-weight: 600; }
.staff__item span { display: block; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: .25rem 0 .5rem; }
.staff__item small { font-size: .88rem; color: var(--muted); line-height: 1.5; display: block; }

/* ------------------------- 9. Actions collectives ----------------- */
.actions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.action {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 1.8rem;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .13);
  transition: all .3s var(--ease);
}
.action:hover { background: rgba(255, 255, 255, .09); border-color: rgba(201, 169, 106, .5); transform: translateY(-4px); }
.action__name {
  font-family: var(--titre);
  font-size: 1.34rem;
  color: #fff;
  font-weight: 600;
  letter-spacing: .02em;
}
.action p { font-size: .93rem; color: rgba(255, 255, 255, .68); margin: 0; }
.action__meta {
  margin-top: auto;
  padding-top: 1rem;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-light);
}

/* Étapes */
.steps { counter-reset: step; display: grid; gap: 1.6rem; }
.steps--row { grid-template-columns: repeat(4, 1fr); }
.step { position: relative; padding-top: 2.9rem; }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  top: 0; left: 0;
  font-family: var(--titre);
  font-size: 1.5rem;
  color: var(--gold);
  font-weight: 600;
}
.step::after {
  content: "";
  position: absolute;
  top: 1.05rem; left: 2.6rem; right: 0;
  height: 1px;
  background: var(--line);
}
.step:last-child::after { display: none; }
.step h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.step p { font-size: .94rem; color: var(--muted); margin: 0; }
.section--navy .step::after { background: rgba(255, 255, 255, .16); }
.section--navy .step p { color: rgba(255, 255, 255, .68); }

/* ------------------------- 10. Tableaux --------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: .96rem; min-width: 520px; }
thead th {
  background: var(--navy-800);
  color: #fff;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-align: left;
  padding: 1.05rem 1.4rem;
}
tbody td { padding: 1rem 1.4rem; border-top: 1px solid var(--line-soft); color: var(--ink-soft); }
tbody tr:nth-child(even) td { background: var(--bg-alt); }
tbody td:last-child { font-weight: 600; color: var(--navy-800); white-space: nowrap; }

/* Accordéon */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--titre);
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--navy-800);
  transition: color .2s;
}
.acc__btn:hover { color: var(--navy); }
.acc__sign { flex: none; position: relative; width: 16px; height: 16px; }
.acc__sign::before, .acc__sign::after {
  content: "";
  position: absolute;
  background: var(--gold);
  transition: transform .3s var(--ease);
}
.acc__sign::before { inset: 50% 0 auto 0; height: 1.5px; transform: translateY(-50%); }
.acc__sign::after { inset: 0 50% 0 auto; width: 1.5px; transform: translateX(50%); }
.acc__item.is-open .acc__sign::after { transform: translateX(50%) scaleY(0); }
.acc__panel { max-height: 0; overflow: hidden; transition: max-height .38s var(--ease); }
.acc__panel > div { padding: 0 0 1.7rem; font-size: .99rem; color: var(--muted); }

/* ------------------------- 11. Contact --------------------------- */
.offices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.offices--une { grid-template-columns: minmax(0, 620px); }
.office {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2.1rem;
  background: #fff;
}
.office__city {
  font-family: var(--titre);
  font-size: 1.6rem;
  color: var(--navy-800);
  font-weight: 600;
  margin-bottom: .25rem;
}
.office__tag {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4rem;
}
.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: .96rem;
}
.info-list li:last-child { border-bottom: 0; }
.info-list svg { width: 17px; height: 17px; stroke: var(--gold); fill: none; stroke-width: 1.6; flex: none; margin-top: .28em; }

.form { display: grid; gap: 1.2rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.field { display: grid; gap: .45rem; }
.field label {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy-800);
}
.field label span { color: var(--gold); }
.field input, .field select, .field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  padding: .9rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(0, 40, 120, .1);
}
.check { display: flex; gap: .75rem; align-items: flex-start; font-size: .88rem; color: var(--muted); }
.check input { margin-top: .3em; accent-color: var(--navy); width: 16px; height: 16px; flex: none; }
.form__note { font-size: .82rem; color: var(--muted); }
.form__status {
  display: none;
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  background: var(--navy-050);
  border-left: 3px solid var(--navy);
  font-size: .93rem;
  color: var(--navy-800);
}
.form__status.is-visible { display: block; }

.map-embed {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-alt);
  min-height: 300px;
}
.map-embed iframe { width: 100%; height: 100%; min-height: 300px; border: 0; display: block; }

/* ------------------------- 12. Encarts --------------------------- */
.callout {
  border-left: 3px solid var(--gold);
  background: var(--bg-alt);
  padding: 1.6rem 1.8rem;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-size: .99rem;
}
.callout strong { display: block; margin-bottom: .35rem; }

.quote {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.42;
  color: var(--navy-800);
  font-weight: 600;
  position: relative;
  padding-left: 2.2rem;
}
.quote::before {
  content: "“";
  position: absolute;
  left: 0; top: -.18em;
  font-size: 3.4em;
  line-height: 1;
  color: var(--gold-pale);
}

.cta-band {
  background:
    radial-gradient(80% 130% at 90% 10%, rgba(20, 61, 156, .6) 0%, transparent 60%),
    linear-gradient(140deg, var(--navy-800), var(--navy-900));
  color: rgba(255, 255, 255, .82);
  border-radius: var(--radius-lg);
  padding: clamp(2.6rem, 5vw, 4rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  position: relative;
  overflow: hidden;
}
.cta-band h2 { color: #fff; margin-bottom: .5rem; }
.cta-band p { margin: 0; color: rgba(255, 255, 255, .76); max-width: 520px; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Bandeau logo (rappel identité logiciel) */
.logo-card {
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 18px;
  padding: 2.2rem;
  box-shadow: var(--shadow-lg);
  width: min(320px, 100%);
  margin: 0 auto;
}
.logo-card img { width: 100%; }

/* ------------------------- 13. Pied de page ---------------------- */
.footer {
  background: var(--navy-900);
  color: rgba(255, 255, 255, .62);
  font-size: .93rem;
  padding-top: clamp(3.5rem, 6vw, 5rem);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 2.6rem;
  padding-bottom: 3rem;
}
.footer__brand { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.3rem; }
.footer__brand img { width: 44px; }
.footer__brand-name {
  font-family: var(--serif);
  font-size: 1.3rem;
  letter-spacing: .16em;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.1;
}
.footer__brand-sub {
  display: block;
  font-family: var(--sans);
  font-size: .56rem;
  letter-spacing: .4em;
  color: var(--gold-light);
  margin-top: .3rem;
}
.footer h4 {
  color: #fff;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .6rem; }
.footer a { color: rgba(255, 255, 255, .62); }
.footer a:hover { color: var(--gold-light); }
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 1.7rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: .84rem;
  color: rgba(255, 255, 255, .45);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.4rem; }

/* Bouton retour en haut */
.to-top {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all .3s var(--ease);
  box-shadow: var(--shadow-md);
  z-index: 90;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--gold); }
.to-top svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; }

/* ------------------------- 14. Bandeau intérieur ----------------- */
.page-hero {
  padding: calc(var(--header-h) + clamp(3.2rem, 6vw, 5.5rem)) 0 clamp(3rem, 5vw, 4.5rem);
  background:
    radial-gradient(80% 130% at 85% 0%, rgba(20, 61, 156, .5) 0%, transparent 60%),
    linear-gradient(150deg, var(--navy-800), var(--navy-900));
  color: rgba(255, 255, 255, .8);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.page-hero__watermark {
  position: absolute;
  right: 2%; top: 50%;
  transform: translateY(-50%);
  width: min(360px, 40vw);
  opacity: .06;
  z-index: -1;
}
.page-hero h1 { color: #fff; margin-bottom: .9rem; font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
.page-hero p { max-width: 640px; color: rgba(255, 255, 255, .8); margin: 0; }
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 1.4rem;
}
.crumbs a { color: rgba(255, 255, 255, .72); }
.crumbs a:hover { color: var(--gold-light); }

/* Contenu éditorial (mentions légales, RGPD) */
.prose h2 { margin-top: 2.8rem; font-size: 1.62rem; }
.prose h3 { margin-top: 2rem; font-size: 1.22rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul { padding-left: 1.3rem; }
.prose li { color: var(--ink-soft); }

/* ------------------------- 15. Animations ------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .09s; }
.reveal[data-delay="2"] { transition-delay: .18s; }
.reveal[data-delay="3"] { transition-delay: .27s; }
.reveal[data-delay="4"] { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ------------------------- 16. Responsive ------------------------ */
@media (max-width: 1240px) {
  .nav, .header__tel { display: none; }
  .burger { display: grid; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2.2rem; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .steps--row { grid-template-columns: repeat(2, 1fr); }
  .step::after { display: none; }
}

@media (max-width: 880px) {
  :root { --header-h: 78px; }
  body { font-size: 16.5px; }
  .wrap { padding: 0 20px; }
  .mobile-nav a, .mobile-nav__foot { padding-left: 20px; padding-right: 20px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .split, .split--wide-left { grid-template-columns: 1fr; }
  .offices { grid-template-columns: 1fr; }
  .actions-grid { grid-template-columns: 1fr; }
  .brand__name { font-size: 1.2rem; }
  .brand__mark { width: 38px; }
  .hero__watermark { width: 78vw; right: -20%; opacity: .05; }
  .cta-band { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  /* Le bouton d'appel de l'en-tête ne tient PAS à côté du logo et du burger : mesuré
     sur un écran de 375 px, le bouton faisait 183 px et repoussait le burger à x=376,
     donc hors de l'écran et impossible à toucher — le menu devenait inaccessible.
     Le même appel figure déjà dans le pied du menu mobile et dans le pied de page :
     on masque donc le bouton, jamais le burger. */
  .header__cta .btn { display: none; }

  .form__row { grid-template-columns: 1fr; }
  .steps--row { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: 1fr; }
  .stats__item { padding: 1.9rem 1.2rem; }
  .hero__pillar { flex: 1 1 100%; padding-bottom: 1.1rem; }
  .btn { width: 100%; }
  .hero__actions .btn, .cta-band__actions .btn { width: 100%; }
  .footer__grid { grid-template-columns: 1fr; }
  .quote { padding-left: 1.4rem; }
  .card, .skill, .office { padding: 1.5rem; }
}

/* ------------------------- 17. Impression ------------------------ */
@media print {
  .header, .mobile-nav, .to-top, .hero__actions, .cta-band { display: none !important; }
  body { color: #000; font-size: 12pt; }
  .section--navy, .page-hero, .hero { background: #fff !important; color: #000 !important; }
  .section--navy h2, .page-hero h1, .hero h1 { color: #000 !important; }
}

/* =====================================================================
   18. Actualités / articles
   ===================================================================== */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2.6rem;
}
.filters__btn {
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .6rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  transition: all .25s var(--ease);
}
.filters__btn:hover { border-color: var(--navy); color: var(--navy); }
.filters__btn.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }

.posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.7rem;
}

.post {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.post:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.post__cover {
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(120% 120% at 25% 0%, #17408f 0%, transparent 60%),
    linear-gradient(150deg, var(--navy-800), var(--navy-900));
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}
.post__cover img { width: 100%; height: 100%; object-fit: cover; }
.post__cover-mark { width: 34%; opacity: .3; }
.post__body { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .8rem;
}
.post__cat { color: var(--gold); font-weight: 600; }
.post__meta span.sep { opacity: .4; }
.post__title {
  font-family: var(--titre);
  font-size: 1.28rem;
  font-weight: 600;
  color: var(--navy-800);
  line-height: 1.25;
  margin: 0 0 .6rem;
}
.post:hover .post__title { color: var(--navy); }
.post__excerpt { font-size: .95rem; color: var(--muted); margin: 0 0 1.3rem; flex: 1; }
.post__more {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
}

.posts--empty, .posts-state {
  padding: 3rem 0;
  text-align: center;
  color: var(--muted);
  font-size: .98rem;
}

/* Article : mise en page de lecture */
.article-hero { padding-bottom: clamp(2rem, 4vw, 3rem); }
.article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  align-items: center;
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  margin-top: 1.3rem;
}
.article-hero__meta .post__cat { color: var(--gold-light); }

.article-cover {
  margin: -3.5rem auto 0;
  max-width: 900px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 2;
  background: var(--navy-800);
}
.article-cover img { width: 100%; display: block; }

.article-body { max-width: 760px; margin: 0 auto; font-size: 1.06rem; line-height: 1.8; }
.article-body h2 { font-size: 1.72rem; margin-top: 2.6rem; }
.article-body h3 { font-size: 1.3rem; margin-top: 2.1rem; }
.article-body h2:first-child, .article-body h3:first-child, .article-body p:first-child { margin-top: 0; }
.article-body img { border-radius: var(--radius-lg); margin: 2rem 0; }
.article-body blockquote {
  margin: 2rem 0;
  padding: 1.2rem 0 1.2rem 1.6rem;
  border-left: 3px solid var(--gold);
  font-family: var(--serif);
  font-size: 1.28rem;
  color: var(--navy-800);
  font-style: normal;
}
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-body ul, .article-body ol { padding-left: 1.4rem; }
.article-body table { min-width: 0; }
.article-body a { text-decoration: underline; text-underline-offset: 3px; }
.article-body hr { margin: 2.4rem 0; }
.article-body figcaption { font-size: .86rem; color: var(--muted); text-align: center; margin-top: -1rem; }

/* ─────────────────── Bandeau de consentement à la mesure ───────────────────
   Posé en bas de fenêtre, pas en surimpression plein écran : il informe sans
   prendre le site en otage, et un visiteur qui l'ignore peut lire la page. La
   translation initiale évite qu'il décale la mise en page au chargement, ce que
   Google mesure (Cumulative Layout Shift). */
.consentement {
  position: fixed;
  z-index: 60;
  left: 1rem; right: 1rem; bottom: 1rem;
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  padding: 1.1rem 1.3rem;
  background: var(--navy-800);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(0, 15, 54, .38);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.consentement.est-visible { opacity: 1; transform: none; }
.consentement__texte { flex: 1 1 320px; }
.consentement__texte b {
  display: block;
  font-family: var(--titre);
  font-size: 1.08rem;
  margin-bottom: .35rem;
}
.consentement__texte p { margin: 0; font-size: .92rem; line-height: 1.6; color: rgba(255, 255, 255, .82); }
.consentement__texte a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }
.consentement__actions { display: flex; gap: .6rem; flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .consentement { transition: none; }
}
@media (max-width: 560px) {
  .consentement { left: .6rem; right: .6rem; bottom: .6rem; padding: 1rem; }
  .consentement__actions { width: 100%; }
  .consentement__actions .btn { flex: 1; }
}

/* Corps d'article : la marge basse se cumulait avec celle du bandeau de contact
   qui suit immédiatement. On la réduit ici plutôt que d'alléger le bandeau, qui
   sert aussi ailleurs. */
.section--article { padding-bottom: 2.4rem; }

/* Renvoi « Sur le même sujet » vers la page de la matière, en fin d'article :
   discret, aligné sur la colonne de lecture, distinct du bandeau de contact. */
.article-matiere { max-width: 760px; margin: 2.2rem auto 0; color: var(--muted); font-size: .98rem; }
.article-matiere a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.article-foot {
  max-width: 760px;
  margin: 3rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  justify-content: space-between;
  align-items: center;
}
.article-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.share { display: flex; gap: .5rem; align-items: center; }
.share span {
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.share a, .share button {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: all .25s var(--ease);
  padding: 0;
}
.share a:hover, .share button:hover { border-color: var(--navy); background: var(--navy-050); }
/* Confirmation visible de la copie : le libellé accessible change aussi, mais
   il ne se voit pas — sans ce retour, on ignore si le clic a fonctionné. */
.share button.est-copie { border-color: var(--gold); background: var(--gold-pale); }
.share button.est-copie svg { stroke: var(--gold-texte, #8a5b0b); }
.share svg { width: 16px; height: 16px; stroke: var(--navy); fill: none; stroke-width: 1.7; }

.author {
  max-width: 760px;
  margin: 2.6rem auto 0;
  display: flex;
  gap: 1.2rem;
  align-items: center;
  padding: 1.6rem;
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
}
.author__avatar {
  width: 58px; height: 58px;
  flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--navy-800), var(--navy-900));
  color: #fff;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
}
.author b { display: block; font-family: var(--titre); font-size: 1.16rem; color: var(--navy-800); }
.author small { color: var(--muted); font-size: .9rem; }

@media (max-width: 1080px) {
  .posts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .posts { grid-template-columns: 1fr; }
  .article-cover { margin-top: -2rem; }
}

/* =====================================================================
   19. Accessibilité, photographies et bandeaux visuels
   ===================================================================== */

/* Lien d'évitement (clavier / lecteur d'écran) */
.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: .8rem 1.2rem;
  border-radius: var(--radius);
  font-size: .85rem;
  font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; }

/* --- Hero photographique -------------------------------------------- */
.hero--photo { padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(0, 15, 54, .93) 0%, rgba(0, 26, 96, .86) 42%, rgba(0, 26, 96, .55) 72%, rgba(0, 26, 96, .42) 100%),
    linear-gradient(0deg, rgba(0, 15, 54, .55) 0%, transparent 45%);
}

/* Bandeau photo d'une page intérieure */
.page-hero--photo .page-hero__media {
  position: absolute; inset: 0; z-index: -2; overflow: hidden;
}
.page-hero--photo .page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero--photo .page-hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(95deg, rgba(0, 15, 54, .94) 0%, rgba(0, 26, 96, .84) 48%, rgba(0, 26, 96, .5) 100%);
}

/* Figure illustrée (colonne d'une section en deux parties) */
.figure {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--navy-800);
}
.figure img { width: 100%; display: block; }
.figure--tall { aspect-ratio: 4 / 3; }
.figure--tall img { height: 100%; object-fit: cover; }
.figure__legende {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.2rem 1.4rem .9rem;
  background: linear-gradient(0deg, rgba(0, 15, 54, .82), transparent);
  color: rgba(255, 255, 255, .9);
  font-size: .82rem;
  line-height: 1.4;
}
.figure__credit {
  display: block;
  font-size: .68rem;
  color: rgba(255, 255, 255, .55);
  margin-top: .25rem;
}
.figure__credit a { color: rgba(255, 255, 255, .7); text-decoration: underline; }

/* Bande photo pleine largeur avec citation */
.bande {
  position: relative;
  min-height: clamp(280px, 34vw, 420px);
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.bande__media { position: absolute; inset: 0; z-index: -2; }
.bande__media img { width: 100%; height: 100%; object-fit: cover; }
.bande::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(0, 15, 54, .92) 0%, rgba(0, 26, 96, .78) 55%, rgba(0, 26, 96, .45) 100%);
}
.bande__contenu { max-width: 680px; padding: clamp(2.5rem, 5vw, 4rem) 0; }
.bande h2, .bande p { color: #fff; }
.bande p { color: rgba(255, 255, 255, .84); margin-bottom: 0; }

/* Mention « France entière » */
.national {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 1rem .5rem .8rem;
  border: 1px solid rgba(201, 169, 106, .5);
  border-radius: 100px;
  background: rgba(201, 169, 106, .12);
  color: var(--gold-light);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  margin-bottom: 1.5rem;
}
.national svg { width: 15px; height: 15px; stroke: var(--gold-light); fill: none; stroke-width: 1.8; }
.national--clair {
  border-color: var(--gold-pale);
  background: #fdf9f1;
  color: #8a6f38;
}
.national--clair svg { stroke: var(--gold); }

/* Crédits photographiques (mentions légales) */
.credits { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.credits li { padding: .7rem 0; border-bottom: 1px solid var(--line-soft); color: var(--muted); }
.credits li:last-child { border-bottom: 0; }
.credits b { color: var(--navy-800); font-weight: 600; }

@media (max-width: 880px) {
  .hero__media img { object-position: 50% 50%; }
  .hero__veil {
    background: linear-gradient(180deg, rgba(0, 15, 54, .9) 0%, rgba(0, 26, 96, .88) 100%);
  }
  .page-hero--photo .page-hero__veil {
    background: linear-gradient(180deg, rgba(0, 15, 54, .93), rgba(0, 26, 96, .88));
  }
  .bande::after { background: linear-gradient(180deg, rgba(0, 15, 54, .92), rgba(0, 26, 96, .82)); }
}

/* =====================================================================
   20. Pages « domaine »
   ===================================================================== */
.liste-checks { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.liste-checks li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: .75rem;
  color: var(--ink-soft);
}
.liste-checks li::before {
  content: "";
  position: absolute;
  left: 0; top: .5em;
  width: 15px; height: 9px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

.liens-connexes { list-style: none; margin: 1rem 0 0; padding: 0; }
.liens-connexes li { border-top: 1px solid var(--line); }
.liens-connexes li:last-child { border-bottom: 1px solid var(--line); }
.liens-connexes a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 0;
  font-family: var(--titre);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy-800);
}
.liens-connexes a::after { content: "→"; color: var(--gold); font-family: var(--sans); transition: transform .25s var(--ease); }
.liens-connexes a:hover { color: var(--navy); }
.liens-connexes a:hover::after { transform: translateX(5px); }

/* =====================================================================
   21. Formulaire : champ leurre et états du message
   ===================================================================== */
/* Champ leurre anti-robot : hors flux, invisible, non focusable au clavier.
   On évite display:none, que certains robots savent détecter. */
.leurre {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.form__status--succes {
  background: #f0f8f2;
  border-left-color: #2e7d4f;
  color: #1d5c39;
}
.form__status--erreur {
  background: #fdf2f2;
  border-left-color: #c0392b;
  color: #8e2b20;
}
.form__status--attention {
  background: #fff8e6;
  border-left-color: var(--gold);
  color: #7a5c10;
}

/* =====================================================================
   22. En-tête : tenue de la barre de navigation
   ---------------------------------------------------------------------
   La barre porte la marque, sept entrées de menu, le téléphone et un
   bouton d'appel à l'action. Elle a besoin de plus de place que le
   conteneur de contenu (1200 px) : sans cela, le bloc de droite sortait
   de l'écran et le numéro de téléphone se coupait verticalement.
   ===================================================================== */
.header .wrap { max-width: 1400px; }

.nav { gap: .1rem; }
.nav__link { padding: .5rem .62rem; font-size: .745rem; letter-spacing: .085em; }
.nav__link::after { left: .62rem; right: .62rem; }

.header__cta { gap: .8rem; }
.header__tel { font-size: .84rem; }

/* Le téléphone ne tient plus à côté de sept entrées : il reste joignable
   par le bouton « Nous contacter », puis par le menu mobile. */
@media (max-width: 1399px) {
  .header__tel { display: none; }
}
/* En dessous, bascule complète sur le menu hamburger. */
@media (max-width: 1279px) {
  .nav { display: none; }
  .burger { display: grid; }
}

/* =====================================================================
   23. Fiches d'associés : le nom est porté par la vignette
   ---------------------------------------------------------------------
   Le nom figure dans le bloc bleu (à la place des initiales) et n'est
   plus répété au-dessus de la spécialité.
   ===================================================================== */
.person__portrait { padding: 1.4rem 1.2rem; }

.person__portrait .person__name {
  margin: 0;
  font-family: var(--titre);
  font-size: clamp(1.24rem, 1.7vw, 1.5rem);
  font-weight: 600;
  line-height: 1.22;
  color: #fff;
  text-align: center;
  letter-spacing: .015em;
  text-wrap: balance;
  text-shadow: 0 1px 12px rgba(0, 15, 54, .45);
}

/* La spécialité vient juste après le rôle : on rétablit l'espace du haut. */
.person__body { padding-top: 1.4rem; }
.person__body .person__role { margin-top: 0; }

/* =====================================================================
   24. Avis clients
   ===================================================================== */
.avis__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.6rem;
  padding: 1.5rem 1.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
  max-width: 560px;
  margin: 0 auto 2.8rem;
}
.avis__chiffre {
  font-family: var(--titre);
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--navy-800);
  line-height: 1;
}
.avis__chiffre span { font-size: .42em; color: var(--muted); }
.avis__etoiles { display: flex; gap: .12rem; font-size: 1.25rem; letter-spacing: .04em; }
.avis__etoiles--petit { font-size: 1rem; margin-bottom: 1rem; }
.etoile { color: var(--line); }
.etoile--pleine { color: var(--gold-light); }
.avis__compte { font-size: .88rem; color: var(--muted); }

.avis-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.avis {
  margin: 0;
  padding: 1.8rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.avis:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.avis__texte {
  margin: 0 0 1.4rem;
  font-size: .98rem;
  line-height: 1.7;
  color: var(--ink-soft);
  flex: 1;
  quotes: "«" "»";
}
.avis__texte::before { content: open-quote; color: var(--gold-pale); margin-right: .15em; }
.avis__texte::after { content: close-quote; color: var(--gold-pale); margin-left: .15em; }
.avis__auteur { display: flex; align-items: center; gap: .8rem; }
.avis__pastille {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--navy-800), var(--navy-900));
  color: #fff;
  font-family: var(--serif);
  font-size: .95rem;
  font-weight: 600;
}
.avis__auteur b { display: block; font-size: .95rem; color: var(--navy-800); }
.avis__auteur small { display: block; font-size: .78rem; color: var(--muted); }

@media (max-width: 1080px) { .avis-grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 880px)  { .avis-grille { grid-template-columns: 1fr; } }

/* =====================================================================
   25. Marque : adaptation selon la dénomination
   ---------------------------------------------------------------------
   « AVOCATS » supporte le grand interlettrage doré du logotype Venture.
   « et Associés » est une locution : elle demande une casse normale et
   un interlettrage discret, sinon elle devient illisible.
   ===================================================================== */
.profil-gobert .brand__sub,
.profil-gobert .footer__brand-sub {
  text-transform: none;
  letter-spacing: .04em;
  font-family: var(--serif);
  font-size: .82rem;
  font-weight: 500;
}
.profil-gobert .brand__name,
.profil-gobert .footer__brand-name { letter-spacing: .1em; }
.profil-gobert .brand__mark { width: 46px; } /* le V (07/09/2026) a la largeur du profil Venture */
.profil-gobert .footer__brand img { width: 38px; }

/* Le logo « G » est un carré fin : il gagne à respirer un peu plus. */
.profil-gobert .brand { gap: .95rem; }

/* =====================================================================
   26. Positionnement : signature, parcours client, expertises complémentaires
   ===================================================================== */

/* Signature de positionnement, sous le titre principal */
.signature {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin: -.4rem 0 1.5rem;
}

.hero__secondaire { margin: -1.6rem 0 3.4rem; }
.link-arrow--clair { color: rgba(255, 255, 255, .78); }
.link-arrow--clair:hover { color: var(--gold-light); }

/* Cartes « par où commencer » */
.parcours {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.9rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.parcours:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--gold-pale); }
.parcours__num {
  font-family: var(--titre);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 1rem;
}
.parcours h3 { font-size: 1.24rem; margin-bottom: .6rem; }
.parcours p { font-size: .96rem; color: var(--muted); flex: 1; margin-bottom: 1.3rem; }
.parcours__lien {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
}
.parcours:hover .parcours__lien { color: var(--gold); }

/* Expertises complémentaires : présentes, sans concurrencer l'immobilier */
.complements {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: start;
  margin-top: 3.4rem;
  padding-top: 2.8rem;
  border-top: 1px solid var(--line);
}
.complements h3 { font-size: 1.32rem; margin-bottom: .5rem; }
.complements p { font-size: .95rem; color: var(--muted); margin: 0; }
.complements__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.8rem;
}
.complements__liste li { border-bottom: 1px solid var(--line-soft); margin: 0; }
.complements__liste a {
  display: block;
  padding: .8rem 0;
  font-size: .95rem;
  color: var(--ink-soft);
}
.complements__liste a:hover { color: var(--navy); }

@media (max-width: 880px) {
  .complements { grid-template-columns: 1fr; }
  .complements__liste { grid-template-columns: 1fr; }
  .hero__secondaire { margin: -1rem 0 2.4rem; }
}

/* =====================================================================
   27. Fiches d'actions collectives
   ===================================================================== */
.fiches-actions { display: grid; gap: 1.6rem; }

.fiche-action {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow .3s var(--ease);
}
.fiche-action:hover { box-shadow: var(--shadow-md); }
.fiche-action:target { border-color: var(--gold); box-shadow: var(--shadow-md); }

.fiche-action__tete {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.6rem 1.9rem;
  background: var(--navy-050);
  border-bottom: 1px solid var(--line);
}
.fiche-action__nom {
  font-family: var(--titre);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--navy-800);
  margin: 0 0 .5rem;
}
.fiche-action__mots { display: flex; flex-wrap: wrap; gap: .35rem; }

/* Badge d'état : la couleur suit l'avancement */
.badge {
  flex: none;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .45rem .9rem;
  border-radius: 100px;
  white-space: nowrap;
}
.badge--information  { background: #eef1f8; color: var(--navy); }
.badge--constitution { background: #fdf9f1; color: #8a6f38; border: 1px solid var(--gold-pale); }
.badge--negociation  { background: #fff8e6; color: #7a5c10; }
.badge--procedure    { background: #eaf4ee; color: #1a7a4a; }
.badge--closes       { background: #f3f4f6; color: #4b5563; }
.badge--terminee     { background: #f3f4f6; color: #6b7280; }

.fiche-action__corps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem 2.4rem;
  padding: 1.9rem;
}
.fiche-action__bloc h4 {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 .6rem;
}
.fiche-action__bloc p { font-size: .96rem; color: var(--ink-soft); margin: 0; }
.fiche-action__bloc .liste-checks { margin-top: 0; }
.fiche-action__bloc .liste-checks li { font-size: .94rem; margin-bottom: .5rem; }

.fiche-action__pied {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  padding: 1.3rem 1.9rem;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-alt);
}

/* Frise d'avancement */
.frise { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.frise__etape {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .3rem 0 .3rem 0;
  margin: 0;
  font-size: .89rem;
  color: var(--muted);
}
.frise__puce {
  flex: none;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: #fff;
  position: relative;
}
/* trait de liaison entre les puces */
.frise__etape:not(:last-child) .frise__puce::after {
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  transform: translateX(-50%);
  width: 2px; height: 12px;
  background: var(--line);
}
.frise__etape--faite { color: var(--ink-soft); }
.frise__etape--faite .frise__puce { border-color: var(--gold); background: var(--gold); }
.frise__etape--faite .frise__puce::after { background: var(--gold-pale); }
.frise__etape--courante { color: var(--navy-800); font-weight: 600; }
.frise__etape--courante .frise__puce {
  border-color: var(--navy);
  background: var(--navy);
  box-shadow: 0 0 0 4px rgba(0, 40, 120, .12);
}
.frise__ici {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--navy-050);
  border-radius: 100px;
  padding: .15rem .55rem;
}

@media (max-width: 880px) {
  .fiche-action__corps { grid-template-columns: 1fr; }
  .fiche-action__tete, .fiche-action__corps, .fiche-action__pied { padding-left: 1.4rem; padding-right: 1.4rem; }
  .fiche-action__pied .btn { width: 100%; }
}

/* =====================================================================
   28. Contraste — conformité WCAG AA
   ---------------------------------------------------------------------
   Trois corrections, issues d'un audit des ratios sur l'ensemble des pages.

   1. L'or de la charte (#AA8C50) n'atteint que 3,19:1 sur blanc : suffisant
      pour un filet ou une puce, insuffisant pour du texte de 12-13 px
      (seuil 4,5:1). On introduit une déclinaison plus dense, réservée au
      TEXTE sur fond clair. C'est la teinte déjà utilisée par le logiciel de
      gestion, donc cohérente avec l'identité. Ratio : 5,4:1 sur blanc.

   2. Les composants clairs (fiches, encadrés, cartes) placés dans une
      section à fond marine héritaient de « couleur : blanc » — d'où des
      titres blancs sur fond presque blanc. On rétablit leurs couleurs.

   3. Quelques opacités trop basses sur fond sombre.
   ===================================================================== */
:root {
  /* Or lisible : réservé au texte sur fond clair */
  --gold-texte: #8a5b0b;
}

/* ── 1. Texte en or sur fond clair ─────────────────────────────────── */
.eyebrow,
.brand__sub,
.footer__brand-sub,
.person__role,
.post__cat,
.office__tag,
.staff__item span,
.parcours__num,
.skill__num,
.fiche-action__bloc h4,
.avis__compte,
.figure__credit { color: var(--gold-texte); }

/* Sur fond sombre, l'or clair conserve un contraste suffisant (5,9:1) :
   on rétablit donc la teinte claire là où le fond est marine. */
.section--navy .eyebrow,
.page-hero .eyebrow,
.hero .eyebrow,
.bande .eyebrow,
.cta-band .eyebrow,
.footer .footer__brand-sub,
.article-hero__meta .post__cat { color: var(--gold-light); }

/* Le filet, les puces et les traits décoratifs gardent l'or de la charte :
   ils ne portent pas de texte, la règle de contraste ne s'y applique pas. */

/* ── 2. Composants clairs dans une section sombre ──────────────────── */
.section--navy .fiche-action,
.section--navy .card,
.section--navy .skill,
.section--navy .person,
.section--navy .callout,
.section--navy .table-wrap { color: var(--ink-soft); }

.section--navy .fiche-action h3,
.section--navy .fiche-action .fiche-action__nom,
.section--navy .card h3,
.section--navy .skill h3,
.section--navy .person h3,
.section--navy .callout strong { color: var(--navy-800); }

.section--navy .fiche-action h4,
.section--navy .fiche-action__bloc h4 { color: var(--gold-texte); }

.section--navy .fiche-action p,
.section--navy .fiche-action li,
.section--navy .callout,
.section--navy .callout li { color: var(--ink-soft); }

.section--navy .fiche-action a:not(.btn) { color: var(--navy); }
.section--navy .fiche-action a:not(.btn):hover { color: var(--gold-texte); }
.section--navy .callout a { color: var(--navy); }

/* Un lien fléché placé sur fond sombre doit être clair. */
.section--navy .link-arrow,
.page-hero .link-arrow,
.hero .link-arrow,
.bande .link-arrow { color: rgba(255, 255, 255, .88); }
.section--navy .link-arrow:hover,
.page-hero .link-arrow:hover,
.hero .link-arrow:hover,
.bande .link-arrow:hover { color: var(--gold-light); }

/* ── 3. Opacités trop basses sur fond sombre ───────────────────────── */
.footer__bottom { color: rgba(255, 255, 255, .58); }   /* était .45 → 4,43:1 */
.crumbs { color: rgba(255, 255, 255, .62); }           /* était .5 */

/* ── 4. Filet de sécurité : fond de repli des bandes photographiques ─
   Si l'image ne se charge pas, le texte blanc doit rester lisible. */
.bande { background: var(--navy-800); }
.hero, .page-hero--photo { background-color: var(--navy-800); }
.person__portrait, .post__cover { background-color: var(--navy-800); }

/* --- Suite de l'audit : trois corrections complémentaires -------------- */

/* a. Fond de repli des sections à dégradé. Sans lui, si le dégradé n'est pas
      appliqué (impression, mode économie, navigateur ancien), le texte blanc
      se retrouverait sur du blanc. */
.section--navy { background-color: var(--navy-800); }
.cta-band { background-color: var(--navy-800); }
.action { background-color: rgba(255, 255, 255, .06); }

/* b. Le crédit photographique se lit sur le voile sombre de la légende :
      il lui faut une teinte claire, pas l'or dense réservé aux fonds clairs. */
.figure__credit { color: rgba(255, 255, 255, .62); }
.figure__credit a { color: rgba(255, 255, 255, .78); }

/* c. Bouton or : le blanc sur #AA8C50 ne donnait que 3,19:1. La teinte dense
      porte le rapport à 5,4:1 tout en restant dans la charte. */
.btn--gold { background: var(--gold-texte); }
.btn--gold:hover { background: #6f4909; }

/* d. Le bandeau intérieur sans photographie a lui aussi besoin de son fond de
      repli : c'est le cas de la page des mentions légales. */
.page-hero { background-color: var(--navy-800); }

/* =====================================================================
   29. Invitation à prendre contact, à la fin de chaque article
   ---------------------------------------------------------------------
   Un article répond à une question générale ; le lecteur a une situation
   particulière. Le formulaire est mis en avant — il enregistre la demande
   directement dans le logiciel — le téléphone reste immédiatement à côté.
   ===================================================================== */
.apres-article {
  max-width: 760px;
  margin: 3.4rem auto 0;
  padding: 2.2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 1.8rem 2.4rem;
  align-items: center;
  background:
    radial-gradient(120% 140% at 88% 0%, rgba(20, 61, 156, .5) 0%, transparent 60%),
    linear-gradient(150deg, var(--navy-800), var(--navy-900));
  background-color: var(--navy-800);
  border-radius: var(--radius-lg);
  color: rgba(255, 255, 255, .84);
}
.apres-article h2 {
  color: #fff;
  font-size: clamp(1.32rem, 2.1vw, 1.6rem);
  margin-bottom: .6rem;
}
.apres-article .eyebrow { color: var(--gold-light); }
.apres-article p { font-size: .97rem; margin-bottom: 0; }

.apres-article__actions { display: grid; gap: .7rem; }
.apres-article__actions .btn { width: 100%; }
.apres-article__tel {
  color: #fff;
  border-color: rgba(255, 255, 255, .38);
  background: transparent;
}
.apres-article__tel:hover {
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border-color: #fff;
}
.apres-article__tel svg { width: 15px; height: 15px; }
.apres-article__note {
  font-size: .76rem;
  color: rgba(255, 255, 255, .6);
  text-align: center;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .apres-article { grid-template-columns: 1fr; padding: 1.7rem; }
}

/* =====================================================================
   30. Chronologie (affaire Apollonia)
   ===================================================================== */
.chrono { list-style: none; margin: 1.6rem 0 0; padding: 0; counter-reset: none; }
.chrono li {
  position: relative;
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 1.2rem;
  padding: 0 0 1.5rem 0;
  margin: 0;
}
.chrono li::before {
  content: "";
  position: absolute;
  left: 118px;
  top: .5em;
  bottom: -.2rem;
  width: 1px;
  background: var(--line);
  transform: translateX(-.6rem);
}
.chrono li:last-child { padding-bottom: 0; }
.chrono li:last-child::before { display: none; }
.chrono__date {
  position: relative;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-texte);
  padding-top: .1em;
}
.chrono__date::after {
  content: "";
  position: absolute;
  right: -.85rem; top: .55em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--gold-pale);
}
.chrono__fait { font-size: .99rem; color: var(--ink-soft); line-height: 1.7; }

@media (max-width: 640px) {
  .chrono li { grid-template-columns: 1fr; gap: .3rem; padding-left: 1.4rem; }
  .chrono li::before { left: 0; transform: none; }
  .chrono__date::after { right: auto; left: -1.4rem; }
}

/* =====================================================================
   31. Dossier emblématique (accueil)
   ===================================================================== */
.dossier-phare {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr);
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: center;
  padding: clamp(2rem, 4vw, 2.8rem);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
}
.dossier-phare h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: .8rem; }
.dossier-phare p { font-size: .99rem; }
.dossier-phare__chiffres { display: grid; gap: 1.1rem; }
.dossier-phare__chiffres > div { border-left: 2px solid var(--gold-pale); padding-left: .9rem; }
.dossier-phare__chiffres b {
  display: block;
  font-family: var(--titre);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--navy-800);
  line-height: 1.1;
}
.dossier-phare__chiffres span { font-size: .82rem; color: var(--muted); }
.dossier-phare__chiffres .btn { margin-top: .4rem; }

@media (max-width: 880px) {
  .dossier-phare { grid-template-columns: 1fr; }
  .dossier-phare__chiffres { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .dossier-phare__chiffres .btn { grid-column: 1 / -1; }
}

/* Rappel contextuel du formulaire, et note sous les boutons d'une fiche */
.callout--action { border-left-color: var(--navy); background: var(--navy-050); margin-bottom: 1.4rem; }
.callout--action em { color: var(--gold-texte); font-style: normal; font-weight: 600; }
/* callout--fort : encart d'importance renforcée (ex. jugement Apollonia sur
   presse.html). Filet marine plus épais que le doré du .callout de base. */
.callout--fort { border-left-width: 5px; border-left-color: var(--navy); background: var(--navy-050); }
.callout--fort strong { color: var(--navy-800); }
.fiche-action__note {
  flex: 1 1 100%;
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.5;
}

/* =====================================================================
   32. Formulaire de signalement d'une résidence
   ---------------------------------------------------------------------
   Formulaire long : on le découpe en quatre blocs numérotés pour qu'il
   reste lisible, et les listes de choix sont en cases à cocher plutôt
   qu'en texte libre — c'est ce qui rend les signalements comparables
   entre eux, donc exploitables.
   ===================================================================== */
.form--proposition { gap: 1.8rem; }

.bloc-form {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 1.7rem 1.8rem 1.8rem;
  margin: 0;
  display: grid;
  gap: 1.2rem;
}
.bloc-form legend {
  font-family: var(--titre);
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--navy-800);
  padding: 0 .6rem;
  margin-left: -.6rem;
}
.bloc-form__aide {
  font-size: .89rem;
  color: var(--muted);
  margin: -.4rem 0 0;
}
.bloc-form .form__row,
.bloc-form .field,
.bloc-form .check,
.bloc-form .form__status,
.bloc-form .btn,
.bloc-form .form__note { margin: 0; }

/* Cases à cocher en grille */
.cases {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .5rem .9rem;
}
.case {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .6rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .92rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.case:hover { border-color: var(--navy); background: var(--navy-050); }
.case input {
  margin: .18em 0 0;
  width: 16px; height: 16px;
  flex: none;
  accent-color: var(--navy);
}
.case:has(input:checked) {
  border-color: var(--navy);
  background: var(--navy-050);
  color: var(--navy-800);
  font-weight: 500;
}

@media (max-width: 640px) {
  .bloc-form { padding: 1.4rem; }
  .cases { grid-template-columns: 1fr; }
}


/* Une matière traitée dans toutes ses composantes occupe les deux colonnes. */
.skill--large { grid-column: 1 / -1; }
.card__list--deux {
  columns: 2;
  column-gap: 1.8rem;
}
.card__list--deux li { break-inside: avoid; }

@media (max-width: 700px) {
  .card__list--deux { columns: 1; }
}

/* =====================================================================
   33. Mention de l'avocat qui suit la matière
   ---------------------------------------------------------------------
   Deux éléments seulement dans le conteneur flex : la pile de pastilles,
   puis UN span portant tout le texte. Sans cela, chaque nœud de texte et
   chaque <b> devient une colonne — « Suivi par » se coupe en deux et les
   noms s'empilent.
   ===================================================================== */
.referent {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: .15rem 0 .9rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--line-soft);
}

.referent__noms {
  font-size: .88rem;
  line-height: 1.45;
  color: var(--muted);
}
.referent__noms b {
  color: var(--navy-800);
  font-weight: 600;
  white-space: nowrap;      /* un nom ne se coupe pas au milieu */
}
.referent__mention {
  display: block;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold-texte);
  margin-bottom: .1rem;
}

/* Pile de pastilles : elles se chevauchent, comme une série d'avatars. */
.referent__pastille {
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--navy-800), var(--navy-900));
  background-color: var(--navy-800);
  color: #fff;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 0 0 2px #fff;
}
.referent__duo { display: inline-flex; flex: none; }
.referent__duo .referent__pastille:not(:first-child) { margin-left: -10px; }

/* Sur un fond alterné, le liseré des pastilles suit la couleur du fond. */
.section--alt .referent__pastille,
.bloc-form .referent__pastille { box-shadow: 0 0 0 2px #fff; }

/* Une matière traitée dans toutes ses composantes occupe les deux colonnes. */
.skill--large { grid-column: 1 / -1; }
.card__list--deux { columns: 2; column-gap: 1.8rem; }
.card__list--deux li { break-inside: avoid; }

@media (max-width: 700px) {
  .card__list--deux { columns: 1; }
}

/* =====================================================================
   34. Texte mis en gras sur fond sombre
   ---------------------------------------------------------------------
   La règle générale colore <strong> en bleu marine, ce qui le rend
   illisible dans les bandeaux et sections à fond sombre. On rétablit
   une couleur claire partout où le fond l'exige.
   ===================================================================== */
.page-hero strong,
.hero strong,
.bande strong,
.section--navy strong,
.cta-band strong,
.apres-article strong,
.action strong,
.article-hero strong { color: #fff; }

/* Sauf dans les composants clairs posés sur ces fonds. */
.section--navy .fiche-action strong,
.section--navy .callout strong,
.section--navy .card strong,
.section--navy .skill strong,
.section--navy .table-wrap strong { color: var(--navy-800); }


/* =====================================================================
   35. Sous-menu « Compétences »
   ---------------------------------------------------------------------
   Les pages de compétences n'étaient atteignables que par des liens
   secondaires. Un dépliant les rend accessibles depuis la navigation,
   ce qui sert aussi le maillage interne.
   ===================================================================== */
.nav__groupe { position: relative; display: flex; align-items: center; }

.nav__link--parent { display: inline-flex; align-items: center; gap: .3rem; }
.nav__chevron {
  width: 13px; height: 13px;
  transition: transform .25s var(--ease);
  opacity: .7;
}
.nav__groupe:hover .nav__chevron,
.nav__groupe:focus-within .nav__chevron { transform: rotate(180deg); opacity: 1; }

.sous-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  display: grid;
  grid-template-columns: repeat(2, minmax(248px, 1fr));
  gap: 0 2rem;
  padding: 1.5rem 1.7rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  z-index: 110;
}
/* Sous-menu court (Honoraires) : une seule colonne. Sans cela, la grille à deux
   colonnes laisserait une colonne vide et un panneau deux fois trop large. */
.sous-menu--simple { grid-template-columns: minmax(230px, 1fr); }
/* Pont invisible : le curseur peut descendre du lien vers le panneau. */
.sous-menu::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -10px;
  height: 10px;
}
.nav__groupe:hover .sous-menu,
.nav__groupe:focus-within .sous-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.sous-menu__titre {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-texte);
  margin: 0 0 .6rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line-soft);
}
.sous-menu a {
  display: block;
  padding: .42rem 0;
  font-size: .88rem;
  line-height: 1.4;
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: 0;
}
.sous-menu a:hover { color: var(--navy); }
.sous-menu a b { color: var(--navy-800); font-weight: 600; }
.sous-menu a b:hover { color: var(--navy); }

/* Second niveau du menu mobile */
.mobile-nav__sous {
  padding-left: 44px !important;
  font-size: .78rem !important;
  text-transform: none !important;
  letter-spacing: .01em !important;
  color: var(--muted) !important;
  background: #fbfcfe;
}
.mobile-nav__sous::before {
  content: "— ";
  color: var(--gold);
}

@media (max-width: 1279px) {
  .sous-menu { display: none; }
}

/* Ouverture pilotée par le script (clavier, tactile) */
.nav__groupe.est-ouvert .sous-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav__groupe.est-ouvert .nav__chevron { transform: rotate(180deg); opacity: 1; }

/* Fond de repli des pastilles à dégradé (initiales en blanc). */
.referent__pastille,
.author__avatar,
.avis__pastille { background-color: var(--navy-800); }

/* =====================================================================
   36. Le travail d'équipe comme argument
   ===================================================================== */
.equipe-atout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: start;
  padding: clamp(2rem, 4vw, 2.8rem);
  border: 1px solid var(--line);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.equipe-atout h2 { font-size: clamp(1.5rem, 2.4vw, 1.95rem); }
.equipe-atout__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.equipe-atout__liste li {
  margin: 0;
  padding-left: 1.9rem;
  position: relative;
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.65;
}
.equipe-atout__liste li::before {
  content: "";
  position: absolute;
  left: 0; top: .45em;
  width: 15px; height: 9px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}
.equipe-atout__liste b {
  display: block;
  color: var(--navy-800);
  font-size: 1rem;
  margin-bottom: .18rem;
}


@media (max-width: 880px) {
  .equipe-atout { grid-template-columns: 1fr; }
}

/* =====================================================================
   37. Gratuité de la démarche
   La première objection d'un visiteur devant un formulaire d'avocat est
   le coût. Elle se lève avant le formulaire, pas après.
   ===================================================================== */
.gage {
  margin: 1.4rem 0 1.6rem;
  padding: 1.15rem 1.3rem 1.2rem;
  background: linear-gradient(180deg, #f7faf7, #f2f7f3);
  border: 1px solid #cfe3d6;
  border-radius: var(--radius-lg);
}

.gage__titre {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .7rem;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #1c6b40;
}

.gage__titre svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 3px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: #1c6b40;
  border-radius: 50%;
}

.gage__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .5rem;
}

.gage__liste li {
  position: relative;
  padding-left: 1rem;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.gage__liste li::before {
  content: "";
  position: absolute;
  top: .55em;
  left: 0;
  width: 5px;
  height: 5px;
  background: #1c6b40;
  border-radius: 50%;
}

.gage__liste b { color: var(--navy-800); font-weight: 600; }
.gage__liste a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }

/* =====================================================================
   38. Le nom du référent renvoie à sa fiche
   ===================================================================== */
.referent__lien {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}

.referent__lien:hover,
.referent__lien:focus-visible {
  color: var(--navy);
  border-bottom-color: var(--gold);
}

/* =====================================================================
   39. Invitation à écrire, au pied de chaque compétence
   ===================================================================== */
.skill__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.1rem;
  margin: 1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--line-soft);
}

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}

.lien-fleche::after {
  content: "→";
  font-size: .95em;
  transition: transform .2s var(--ease);
}

.lien-fleche:hover::after,
.lien-fleche:focus-visible::after { transform: translateX(3px); }

.lien-fleche:hover,
.lien-fleche:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.lien-tel {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.lien-tel::before { content: "· "; }
.lien-tel:hover,
.lien-tel:focus-visible { color: var(--navy); text-decoration: underline; }

@media (max-width: 560px) {
  .skill__contact { gap: .35rem .8rem; }
  .lien-tel::before { content: none; }
}

/* =====================================================================
   40. Revue de presse
   ===================================================================== */
.presse { margin-top: 2rem; }

.presse__annee {
  margin: 2.2rem 0 1rem;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-texte);
}

.presse__annee:first-child { margin-top: 0; }

.presse__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.presse__liste li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .3rem 1.5rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line);
}

.presse__liste a {
  flex: 1 1 24rem;
  font-family: var(--titre);
  font-size: 1.12rem;
  line-height: 1.4;
  color: var(--navy-800);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}

.presse__liste a:hover,
.presse__liste a:focus-visible { color: var(--navy); border-bottom-color: var(--gold); }

.presse__liste a::after {
  content: "↗";
  margin-left: .35rem;
  font-family: var(--sans);
  font-size: .7em;
  color: var(--gold-texte);
}

.presse__media {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

@media (min-width: 900px) {
  .presse__liste--deux {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2.6rem;
    border-top: 0;
  }
  .presse__liste--deux li { border-top: 1px solid var(--line); border-bottom: 0; }
}

.apres-presse {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin: 2rem 0 0;
}

.mention-source {
  margin: 1.6rem 0 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--muted);
}

/* =====================================================================
   41. Vidéos, chargées seulement au clic
   Une iframe YouTube posée d'emblée dépose ses traceurs et coûte plusieurs
   centaines de kilo-octets par vignette. On n'affiche qu'une image, et
   l'iframe ne vient qu'à la demande du visiteur.
   ===================================================================== */
.videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.8rem 1.6rem;
  margin-top: 2.2rem;
}

.video { display: flex; flex-direction: column; }

.video__facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  background: var(--navy-900);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.video__facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s var(--ease), opacity .3s var(--ease);
}

.video__facade:hover img,
.video__facade:focus-visible img { transform: scale(1.04); opacity: .82; }

.video__lecture {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 58px;
  height: 58px;
  transform: translate(-50%, -50%);
  background: rgba(0, 26, 96, .88);
  border-radius: 50%;
  box-shadow: 0 4px 18px rgba(0, 15, 54, .35);
  transition: background .2s var(--ease), transform .2s var(--ease);
}

.video__lecture::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 53%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}

.video__facade:hover .video__lecture,
.video__facade:focus-visible .video__lecture {
  background: var(--navy);
  transform: translate(-50%, -50%) scale(1.08);
}

.video__facade iframe { width: 100%; height: 100%; border: 0; }

.video__legende { padding: .85rem .1rem 0; }

.video__media {
  margin: 0 0 .3rem;
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-texte);
}

.video__legende h3 {
  margin: 0 0 .3rem;
  font-size: 1.08rem;
  line-height: 1.35;
  color: var(--navy-800);
}

.video__date {
  margin: 0;
  font-size: .82rem;
  color: var(--muted);
}

.video__date a { color: var(--navy); }

/* =====================================================================
   42. Publications signées
   ===================================================================== */
.publications {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2.2rem;
}

.publication {
  padding: 1.5rem 1.6rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
}

.publication__revue {
  margin: 0 0 .55rem;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

.publication h3 { margin: 0 0 .5rem; font-size: 1.16rem; line-height: 1.35; }

.publication h3 a {
  color: var(--navy-800);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.publication h3 a:hover,
.publication h3 a:focus-visible { border-bottom-color: var(--gold); }

.publication__auteur {
  margin: 0 0 .7rem;
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--muted);
}

.publication__auteur a { color: var(--navy); text-decoration: none; font-weight: 600; }
.publication__auteur a:hover { text-decoration: underline; }

.publication p:last-child { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--ink-soft); }

.apres-cta {
  margin: 1.8rem auto 0;
  max-width: 40rem;
  font-size: .9rem;
  line-height: 1.6;
}

/* =====================================================================
   43. Rappel de règle légale, sous un paragraphe
   ===================================================================== */
.note-legale {
  margin: .7rem 0 0;
  padding-left: .8rem;
  border-left: 2px solid var(--gold-pale);
  font-size: .82rem;
  line-height: 1.55;
  color: var(--muted);
}

.note-legale b { color: var(--ink-soft); font-weight: 600; }

/* =====================================================================
   44. L'attribut hidden doit primer sur les mises en page
   Sans cette règle, un « display » posé par une classe — .field est en
   grid — écrase le display:none que le navigateur attache à [hidden] :
   le champ conditionnel reste visible alors que le script l'a masqué.
   ===================================================================== */
[hidden] { display: none !important; }

/* =====================================================================
   45. Citation mise en exergue
   ===================================================================== */
.citation {
  margin: 2rem 0;
  padding: 1.6rem 1.8rem 1.4rem;
  background: var(--navy-050);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
}

.citation blockquote {
  margin: 0 0 .9rem;
  font-family: var(--serif);
  font-size: 1.24rem;
  line-height: 1.5;
  color: var(--navy-800);
  quotes: "«\00a0" "\00a0»";
}

.citation blockquote::before { content: open-quote; color: var(--gold); }
.citation blockquote::after  { content: close-quote; color: var(--gold); }

.citation figcaption {
  font-family: var(--sans);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--muted);
}

.citation figcaption a { color: var(--navy); font-weight: 600; text-decoration: none; }
.citation figcaption a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .citation { padding: 1.2rem 1.2rem 1rem; }
  .citation blockquote { font-size: 1.1rem; }
}

/* Une ou deux vidéos seulement : la grille ne doit pas les étirer. */
.videos--peu { grid-template-columns: repeat(auto-fit, minmax(280px, 420px)); }

/* =====================================================================
   46. Formulaire de candidature
   ===================================================================== */
.liste-puces { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }

.liste-puces li {
  position: relative;
  padding-left: 1.15rem;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.liste-puces li::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
}

.label-groupe {
  display: block;
  margin-bottom: .55rem;
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy-800);
}

.aide {
  display: block;
  margin-top: .3rem;
  font-size: .78rem;
  color: var(--muted);
}

/* Le sélecteur de fichier par défaut est illisible d'un navigateur à
   l'autre : on encadre la zone pour qu'elle ressemble aux autres champs. */
.field input[type="file"] {
  width: 100%;
  padding: .7rem .8rem;
  font-family: var(--sans);
  font-size: .88rem;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.field input[type="file"]:hover { border-color: var(--gold-light); }

.field input[type="file"]:focus-visible {
  outline: 2px solid var(--navy-600);
  outline-offset: 1px;
}

.field input[type="file"]::file-selector-button {
  margin-right: .8rem;
  padding: .45rem .9rem;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  color: #fff;
  background: var(--navy);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

.field input[type="file"]::file-selector-button:hover { background: var(--navy-600); }

.form--candidature .cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .5rem 1.2rem;
}

/* =====================================================================
   47. Cartes « à voir » — reportages hébergés chez leur diffuseur
   Pas de vignette : une photographie de presse ne relève pas du droit de
   citation. Le pictogramme de lecture suffit à dire qu'il s'agit d'une vidéo.
   ===================================================================== */
.ecrans {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.1rem;
  margin-top: 2.2rem;
}

.ecran {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 1.35rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}

.ecran:hover,
.ecran:focus-visible {
  transform: translateY(-2px);
  border-color: var(--gold-light);
  box-shadow: var(--shadow-md);
}

.ecran__play {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  background: var(--navy);
  border-radius: 50%;
  transition: background .2s var(--ease);
}

.ecran__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #fff;
}

.ecran:hover .ecran__play { background: var(--navy-600); }

.ecran__corps { display: block; }

.ecran__media {
  display: block;
  margin-bottom: .3rem;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-texte);
}

.ecran__titre {
  display: block;
  margin-bottom: .35rem;
  font-family: var(--titre);
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--navy-800);
}

.ecran__desc {
  display: block;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.ecran__marque {
  display: inline-block;
  margin-top: .6rem;
  padding: .15rem .55rem;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #7c4a00;
  background: #fdf3e0;
  border-radius: 3px;
}

/* Parole rapportée à l'intérieur d'un encadré. */
.callout__parole {
  display: block;
  margin: .7rem 0;
  padding-left: .85rem;
  border-left: 2px solid var(--gold);
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--navy-800);
}
.callout__parole a { color: var(--navy); font-family: var(--sans); font-size: .84rem; font-weight: 600; }

/* =====================================================================
   48. Dépêche d'agence et ses reprises
   Une douzaine de titres publient le même texte : une entrée unique et une
   liste compacte disent l'ampleur sans allonger la page.
   ===================================================================== */
.presse__depeche { align-items: flex-start; }

.presse__depeche__corps {
  flex: 1 1 26rem;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.presse__depeche__corps b { color: var(--navy-800); }

.presse__depeche__corps > a {
  font-family: var(--sans);
  font-size: .95em;
  color: var(--navy);
  font-weight: 600;
}

.presse__reprises {
  display: block;
  margin-top: .5rem;
  font-family: var(--sans);
  font-size: .82rem;
  line-height: 1.9;
  color: var(--muted);
}

.presse__reprises a {
  font-family: var(--sans);
  font-size: 1em;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.presse__reprises a::after { content: none; }

.presse__reprises a:hover,
.presse__reprises a:focus-visible { border-bottom-color: var(--gold); }

/* =====================================================================
   49. Variantes de boutons qui manquaient
   ---------------------------------------------------------------------
   Quatre classes étaient employées dans les pages sans avoir jamais été
   définies : les boutons n'héritaient que du socle .btn, donc sans fond ni
   couleur propre. Sur fond sombre, le résultat était illisible.
   ===================================================================== */

/* Contour discret, sur fond clair. Employé dix-sept fois dans le site. */
.btn--ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--line);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--navy);
  color: var(--navy-800);
  background: var(--navy-050);
}

/* Plein clair, pour les fonds sombres : le contraste du texte bleu marine
   sur blanc atteint 12:1, très au-delà du minimum exigé. */
.btn--light {
  background: #fff;
  color: var(--navy-800);
  border-color: #fff;
}

.btn--light:hover,
.btn--light:focus-visible {
  background: var(--navy-050);
  color: var(--navy-900);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Plein bleu marine, pour les fonds clairs. */
.btn--navy {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.btn--navy:hover,
.btn--navy:focus-visible {
  background: var(--navy-800);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Pleine largeur : le bouton d'envoi d'un formulaire. */
.btn--bloc { display: flex; width: 100%; }

/* Les liens posés dans un paragraphe sur fond sombre doivent s'éclaircir :
   la couleur par défaut est celle d'un lien sur fond blanc. */
.section--navy .apres-cta a,
.section--navy p a:not(.btn),
.apres-article a:not(.btn) {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--gold-light);
}

.section--navy .apres-cta a:hover,
.section--navy p a:not(.btn):hover { text-decoration-color: #fff; }

/* Le texte d'accompagnement sous les boutons, sur fond sombre. */
.section--navy .apres-cta { color: rgba(255, 255, 255, .88); }
.section--navy .apres-cta b { color: #fff; }

/* =====================================================================
   50. Corrections de contraste relevées à l'audit
   ---------------------------------------------------------------------
   Trois défauts, tous dus à l'or décoratif employé pour du texte : il ne
   dépasse pas 3,19:1 sur blanc, là où WCAG AA exige 4,5:1 en dessous de
   24 px. La variante --gold-texte atteint 5,4:1.
   ===================================================================== */

/* a. L'astérisque des champs obligatoires. */
.field label span { color: var(--gold-texte); }

/* b. Le texte du consentement héritait de la règle ci-dessus : destinée à
      l'astérisque, elle teintait aussi la phrase entière en or pâle. */
.field--consent label {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  cursor: pointer;
}

.field--consent label > span {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
}

/* L'astérisque à l'intérieur du consentement garde sa teinte propre. */
.field--consent label > span span { color: var(--gold-texte); font-weight: 700; }

.field--consent label a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }

/* c. Le « + » des compteurs, à 23 px, restait sous le seuil du grand texte. */
.stats__num sub,
.stat__unite { color: var(--gold-texte); }

/* d. Le consentement de la page de contact emploie la classe .check : son
      astérisque échappait à la correction précédente. */
.check span span,
.check > span > span { color: var(--gold-texte); font-weight: 700; }

/* Accès des collaborateurs au logiciel : discret, en pied de page seulement. */
.footer__interne { opacity: .7; }
.footer__interne:hover,
.footer__interne:focus-visible { opacity: 1; }

/* =====================================================================
   52. Page introuvable
   ===================================================================== */
.titre-404 {
  margin: .2rem 0 0;
  font-family: var(--titre);
  font-size: clamp(2rem, 6vw, 3.2rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--navy-800);
}

.titre-404 + .rule--center { margin-top: 1.1rem; }

/* =====================================================================
   53. Actions collectives : prudence sur l'état d'avancement
   Tant que le cabinet n'a pas confirmé l'état de chaque action, la fiche
   invite à se renseigner plutôt que d'annoncer une étape.
   ===================================================================== */
.badge--ouvert {
  color: var(--navy-800);
  background: var(--navy-050);
  border: 1px solid var(--line);
}

.fiche-action__prudence {
  margin: 0;
  padding-left: .9rem;
  border-left: 2px solid var(--gold-pale);
  font-size: .92rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* =====================================================================
   54. Sélecteur d'exploitant, en tête des actions collectives
   Un propriétaire sait le nom de son exploitant, rarement autre chose :
   la page part de là plutôt que de lui faire parcourir huit fiches.
   ===================================================================== */
.choix-exploitant {
  max-width: 46rem;
  margin: 0 auto 2.8rem;
  padding: 1.4rem 1.6rem 1.5rem;
  background: var(--navy-050);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.choix-exploitant__label {
  display: block;
  margin-bottom: .7rem;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy-800);
}

.choix-exploitant__ligne { display: flex; gap: .7rem; flex-wrap: wrap; }

.choix-exploitant select {
  flex: 1 1 16rem;
  padding: .82rem .9rem;
  font-family: var(--sans);
  font-size: .96rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.choix-exploitant select:focus-visible {
  outline: 2px solid var(--navy-600);
  outline-offset: 1px;
}

.choix-exploitant .btn { flex: 0 0 auto; }

.choix-exploitant__aide {
  margin: .9rem 0 0;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.choix-exploitant__aide a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

/* La fiche atteinte par le sélecteur se signale brièvement. */
.fiche-action.est-visee {
  box-shadow: 0 0 0 2px var(--gold), var(--shadow-md);
  transition: box-shadow .3s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .fiche-action.est-visee { transition: none; }
}

/* =====================================================================
   55. Blocs clairs posés sur fond sombre : restaurer toutes les couleurs
   ---------------------------------------------------------------------
   Une section sombre éclaircit ses textes et ses liens. Mais un bloc à fond
   clair posé dedans hérite de ces règles, et son contenu devient blanc sur
   blanc. Le cas s'est produit deux fois : d'abord sur les titres des cartes,
   puis sur les liens du sélecteur d'exploitant.

   La parade est ici, en un seul endroit : la liste des conteneurs clairs.
   Toute nouvelle boîte à fond clair destinée à une section sombre doit être
   ajoutée à cette liste — sinon le défaut se reproduira une troisième fois.
   ===================================================================== */
.section--navy .choix-exploitant,
.section--navy .card,
.section--navy .callout,
.section--navy .fiche-action,
.section--navy .gage,
.section--navy .publication,
.section--navy .skill,
.section--navy .video__legende {
  color: var(--ink-soft);
}

.section--navy .choix-exploitant a:not(.btn),
.section--navy .card a:not(.btn),
.section--navy .callout a:not(.btn),
.section--navy .fiche-action a:not(.btn),
.section--navy .gage a:not(.btn),
.section--navy .publication a:not(.btn),
.section--navy .skill a:not(.btn),
.section--navy .video__legende a:not(.btn) {
  color: var(--navy);
  text-decoration-color: var(--gold);
}

.section--navy .choix-exploitant a:not(.btn):hover,
.section--navy .card a:not(.btn):hover,
.section--navy .callout a:not(.btn):hover,
.section--navy .fiche-action a:not(.btn):hover,
.section--navy .gage a:not(.btn):hover,
.section--navy .publication a:not(.btn):hover {
  color: var(--navy-800);
  text-decoration-color: var(--navy);
}

/* Les libellés et titres de ces blocs gardent aussi leur teinte foncée. */
.section--navy .choix-exploitant__label,
.section--navy .gage__titre { color: var(--navy-800); }
.section--navy .choix-exploitant__aide,
.section--navy .gage__liste li { color: var(--ink-soft); }
.section--navy .gage__liste b,
.section--navy .choix-exploitant__aide b { color: var(--navy-800); }

/* ─────────────────────── Recherche du site ─────────────────────── */
.header__recherche {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--navy); cursor: pointer; flex: 0 0 auto;
  transition: background .15s, border-color .15s;
}
.header__recherche:hover { background: var(--navy-050); border-color: var(--navy-600); }
.header__recherche svg { width: 18px; height: 18px; }

.recherche-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 15, 54, .55); backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh 1rem 2rem;
}
.recherche-overlay[hidden] { display: none; }
body.recherche-ouverte { overflow: hidden; }

.recherche-panneau {
  width: 100%; max-width: 640px; background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden; max-height: 78vh; display: flex; flex-direction: column;
}
.recherche-champ {
  display: flex; align-items: center; gap: .7rem; padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line);
}
.recherche-champ svg { width: 20px; height: 20px; color: var(--muted); flex: 0 0 auto; }
.recherche-champ input {
  flex: 1; border: none; outline: none; font: inherit; font-size: 1.05rem; color: var(--ink);
  background: transparent;
}
.recherche-champ input::placeholder { color: var(--muted); }
.recherche-fermer {
  border: none; background: transparent; color: var(--muted); cursor: pointer;
  display: inline-flex; padding: .25rem; border-radius: 50%; flex: 0 0 auto;
}
.recherche-fermer:hover { color: var(--ink); background: var(--bg-alt); }
.recherche-fermer svg { width: 18px; height: 18px; }

.recherche-resultats { overflow-y: auto; }
.recherche-resultat {
  display: flex; flex-direction: column; gap: .2rem; padding: .85rem 1.2rem;
  border-bottom: 1px solid var(--line-soft); text-decoration: none;
}
.recherche-resultat:hover, .recherche-resultat:focus-visible { background: var(--bg-alt); }
.recherche-resultat__type {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gold-texte, #8a5b0b);
  font-weight: 600;
}
.recherche-resultat__titre { font-family: var(--titre); font-size: 1.08rem; color: var(--navy-800); font-weight: 600; }
.recherche-resultat__extrait { font-size: .88rem; color: var(--muted); line-height: 1.4; }

.recherche-repli {
  display: block; padding: .9rem 1.2rem; text-align: center; font-size: .9rem;
  color: var(--navy); background: var(--navy-050); text-decoration: underline;
}

.recherche-vide { padding: 1.6rem 1.2rem 1.8rem; text-align: center; }
.recherche-vide p { color: var(--ink-soft); margin: 0 0 .6rem; }
.recherche-vide p:first-child { color: var(--ink); font-weight: 600; }
.recherche-vide .btn { margin-top: .6rem; }

@media (max-width: 560px) {
  .recherche-overlay { padding: 0; }
  .recherche-panneau { max-width: none; height: 100%; max-height: none; border-radius: 0; }
}

/* ─────────────────── Actualités : variété par matière ─────────────────── */
.posts { align-items: start; }
.post__cover { position: relative; }
.post__cover svg { width: 100%; height: 100%; display: block; }

/* Teinte d'accent par matière : reprise du filet de carte à l'illustration,
   pour que chaque matière se reconnaisse d'un coup d'œil sans dépendre du
   texte de l'étiquette. */
/* Trois valeurs par matière, déclarées une seule fois :
     --cat-clair  éclat du dégradé de la vignette (haut-gauche)
     --cat-fond   corps du dégradé
     --cat-sombre bas du dégradé
     --cat-filet  filet de 3 px en haut de carte
     --cat-texte  étiquette de matière, sur fond blanc
   Le fond de vignette était le même marine pour les six matières : il occupe
   les deux tiers de la carte, si bien que la grille paraissait monotone malgré
   des illustrations différentes. Chaque matière reçoit donc son propre fond,
   toujours sombre et peu saturé pour rester dans l'identité du cabinet — une
   famille de tons profonds, pas six couleurs vives. */
.post[data-accent="baux"] {
  --cat-clair: #10606a; --cat-fond: #073b42; --cat-sombre: #04252a;
  --cat-filet: #2f8a92; --cat-texte: #24666d;
}
.post[data-accent="copro"] {
  --cat-clair: #17408f; --cat-fond: #001a60; --cat-sombre: #000f36;
  --cat-filet: #2a4f9e; --cat-texte: #1e3f86;
}
.post[data-accent="corporel"] {
  --cat-clair: #6e2450; --cat-fond: #431631; --cat-sombre: #2b0d1f;
  --cat-filet: #a2456a; --cat-texte: #7d2e49;
}
.post[data-accent="fiscal"] {
  --cat-clair: #205a44; --cat-fond: #103a2b; --cat-sombre: #08241b;
  --cat-filet: #4f8a5c; --cat-texte: #2f6440;
}
.post[data-accent="immobilier"] {
  --cat-clair: #714d20; --cat-fond: #442d12; --cat-sombre: #2b1c0b;
  --cat-filet: #9a6b34; --cat-texte: #7a5322;
}
.post[data-accent="residences"] {
  --cat-clair: #3f2c80; --cat-fond: #251a4d; --cat-sombre: #150f2e;
  --cat-filet: #6a53b8; --cat-texte: #4a3a90;
}

.post { border-top: 3px solid var(--cat-filet, var(--line)); }

/* Le dégradé reprend exactement la construction d'origine de .post__cover ;
   seules les trois couleurs changent. */
.post[data-accent] .post__cover {
  background:
    radial-gradient(120% 120% at 25% 0%, var(--cat-clair) 0%, transparent 60%),
    linear-gradient(150deg, var(--cat-fond), var(--cat-sombre));
}

.post__cat { color: var(--cat-texte, var(--gold)); }

/* Carte « à la une » : occupe toute la largeur de la grille, photo et titre
   agrandis — casse la répétition d'une grille de blocs identiques dès l'entrée
   sur la page. */
.post--vedette {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  border-top-width: 4px;
}
.post--vedette .post__cover { aspect-ratio: auto; height: 100%; min-height: 280px; }
.post--vedette .post__body { padding: 2.2rem 2.4rem; justify-content: center; }
.post--vedette .post__title { font-size: 1.9rem; }
.post--vedette .post__excerpt { font-size: 1.05rem; -webkit-line-clamp: 4; }
.post__une {
  background: var(--navy); color: #fff; font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 999px;
}

.post__excerpt {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

@media (max-width: 860px) {
  .post--vedette { grid-template-columns: 1fr; }
  .post--vedette .post__cover { aspect-ratio: 16/9; min-height: 0; }
}

/* ─────── Barre de recherche visible (accueil, actualités) ─────── */
.recherche-hero {
  display: flex; align-items: center; gap: .7rem;
  max-width: 460px; width: 100%; box-sizing: border-box;
  margin: 2.2rem 0 2rem;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px; padding: .8rem 1.3rem; backdrop-filter: blur(3px);
  transition: background .15s, border-color .15s;
}
.recherche-hero:focus-within { background: rgba(255,255,255,.22); border-color: #fff; }
.recherche-hero svg { width: 19px; height: 19px; color: #fff; flex: 0 0 auto; opacity: .85; }
.recherche-hero input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  color: #fff; font: inherit; font-size: .96rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recherche-hero input::placeholder {
  color: rgba(255,255,255,.75);
  overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 560px) {
  .recherche-hero { max-width: none; margin: 1.8rem 0 1.6rem; padding: .7rem 1.1rem; }
  .recherche-hero input { font-size: .92rem; }
}

/* =====================================================================
   BANDEAU D'ACCUEIL (index.html) — la photo du Vieux-Port est vue, pas
   voilée : dégradé opaque sur la colonne de texte, quasi transparent à
   droite. Les trois chiffres remplacent l'ancienne bande « stats ».
   ===================================================================== */
.bandeau {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy-800); color: #fff;
  min-height: 600px; display: grid; align-items: center;
}
.bandeau__photo { position: absolute; inset: 0; z-index: -2; }
.bandeau__photo img {
  width: 100%; height: 100%; object-fit: cover;
  /* Ancrée en haut : sur les écrans larges, le recadrage rogne le bas (bassin), jamais
     Notre-Dame de la Garde, en haut à droite de la photo. */
  object-position: 78% 0%;
}
.bandeau__masque {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg,
      var(--navy-800) 0%, var(--navy-800) 44%,
      rgba(0, 26, 96, .82) 54%, rgba(0, 26, 96, .32) 70%,
      rgba(0, 26, 96, .06) 100%),
    linear-gradient(0deg, rgba(0, 15, 54, .45) 0%, transparent 32%);
}
.bandeau__inner {
  max-width: var(--wrap); width: 100%; margin: 0 auto;
  padding: calc(var(--header-h) + 2.6rem) 1.2rem 2.6rem;
  display: grid; grid-template-columns: minmax(0, 60%) 1fr; gap: 2rem;
}
.bandeau__texte { max-width: 720px; }
.bandeau__kicker {
  font-family: var(--sans); font-size: .92rem; color: var(--gold-light);
  margin: 0 0 1rem; display: flex; align-items: center; gap: .7rem;
}
.bandeau__kicker::before { content: ""; width: 28px; height: 1px; background: var(--gold-light); }
.bandeau h1 {
  color: #fff; margin: 0 0 1.2rem; text-wrap: balance;
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(2.2rem, 3.9vw, 3.3rem); line-height: 1.06; letter-spacing: -.012em;
}
.bandeau h1 em { font-style: normal; color: var(--gold-light); display: block; }
.bandeau__texte p.bandeau__chapo {
  font-size: clamp(1.02rem, 1.35vw, 1.16rem); line-height: 1.6;
  color: rgba(255, 255, 255, .84); max-width: 600px; margin: 0 0 1.6rem;
}
.bandeau__texte p.bandeau__chapo strong { color: #fff; font-weight: 600; }
.bandeau__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2rem; }
.bandeau__actions .btn { padding-inline: 1.5rem; }
.bandeau__preuves {
  display: flex; flex-wrap: wrap; gap: 0 2.4rem;
  border-top: 1px solid rgba(201, 169, 106, .45); padding-top: 1.2rem; max-width: 600px;
}
.bandeau__preuve { flex: 1 1 140px; padding: .2rem 0; }
.bandeau__preuve b {
  display: block; font-size: 1.9rem; line-height: 1; color: #fff; margin-bottom: .35rem;
  font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.bandeau__preuve span { font-size: .84rem; color: rgba(255, 255, 255, .68); line-height: 1.35; display: block; }
.bandeau__preuve a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(201, 169, 106, .6); }
.bandeau__preuve a:hover { color: var(--gold-light); }
@media (max-width: 900px) {
  /* Le texte d'abord, la ville ensuite, nette : la photo passe en second par order */
  .bandeau { min-height: 0; display: flex; flex-direction: column; }
  .bandeau__inner { grid-template-columns: 1fr; padding-bottom: 0; }
  .bandeau__photo { position: relative; inset: auto; height: 240px; z-index: 0; margin-top: 2rem; order: 2; }
  .bandeau__photo img { object-position: 72% 0%; }
  .bandeau__masque { background: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-800) 58%, rgba(0, 26, 96, .1) 78%, transparent 100%); }
  .bandeau__preuve b { font-size: 1.6rem; }
}

/* Articles voisins en fin d'article (10/09/2026). Le bloc reprend la liste
   « liste-checks » déjà définie plus haut ; seul l'espacement lui est propre,
   pour le détacher du corps de l'article sans en faire une section pleine. */
.article-lies {
  margin: 2.4rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--navy-050);
}
.article-lies .eyebrow { margin-bottom: .8rem; }
.article-lies .liste-checks { margin: 0; }

/* Encadré d'action en fin de section de matière (10/09/2026). Reprend le
   .callout — filet doré, fond alterné — et lui donne l'air d'un appel à agir :
   un lien fléché en fin de section passait inaperçu. */
.callout--action { margin: 2rem 0 0; }
.callout--action .btn { margin-top: .4rem; }

/* ── Tableaux dans les articles (11/09/2026) ───────────────────────────────
   `tbody td:last-child` porte `white-space: nowrap`. C'est juste sur la page
   des honoraires, où cette dernière colonne est un montant qu'il ne faut pas
   couper en deux. Dans un article, la même colonne porte une phrase : elle
   refusait de revenir à la ligne, s'imposait 1 063 px de large, écrasait les
   deux premières colonnes à un mot par ligne et sortait du cadre avec une
   barre de défilement. Mesuré le 11/09/2026 sur l'article « Travaux non
   autorisés en copropriété » : tableau 1 332 px dans une colonne de 760.
   On rend la respiration aux cellules — la répartition automatique du
   navigateur fait alors très bien le travail (143 / 309 / 306 px) — et on
   allège la graisse, qui convient à un montant mais pas à un paragraphe.
   Sous 700 px, le tableau retrouve une largeur plancher : mieux vaut le
   faire défiler que le rendre illisible. */
.article-body tbody td:last-child { white-space: normal; font-weight: 500; }
.article-body th, .article-body td { vertical-align: top; overflow-wrap: break-word; }

@media (max-width: 700px) {
  .article-body table { min-width: 560px; }
}

/* ── Justification du texte courant ──────────────────────────────────────
   Demandée par Christophe le 14/09/2026, pour les articles et les pages.
   La justification SANS césure creuse des « rivières » blanches dès que la
   colonne se resserre : on active donc hyphens, que le lang="fr" du document
   fait couper selon les règles françaises. Sous 620 px la colonne devient
   trop courte pour que le compromis tienne — retour au fer à gauche.
   Ne s'applique qu'au texte courant : ni titres, ni légendes, ni tableaux. */
.article-body p,
.article-body li,
.prose p,
.prose li,
.lede,
.chapo {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.article-body figcaption,
.prose figcaption { text-align: center; }

@media (max-width: 620px) {
  .article-body p, .article-body li,
  .prose p, .prose li,
  .lede, .chapo { text-align: left; hyphens: manual; }
}