/* ==========================================================================
   D'Andrea Avocat — Design tokens & base styles
   Palette: noir + or + blanc (couleurs du logo) — legal/professional.
   Gold (#E9B430) is sampled directly from the logo artwork. Light theme:
   white page background, black headings/header, gold accent; black "bands"
   (hero, page headers, CTA banner, footer) stay dark with light text.
   Typography: EB Garamond (headings) + Lato (body) — "Legal Professional" pairing
   ========================================================================== */

:root {
  /* Color tokens — black family (matches the logo's ink) */
  --color-primary: #262626;
  --color-primary-dark: #121212;
  --color-primary-soft: #F0F0F0;
  --color-on-primary: #FFFFFF;
  --color-heading: #1A1A1A;

  /* Color tokens — gold family (sampled from the logo, #E9B430) */
  --color-accent: #E9B430;
  --color-accent-strong: #D8A324;
  --color-accent-text: #9C7415;
  --color-accent-soft: rgba(233, 180, 48, 0.14);
  --color-on-accent: #1A1A1A;

  --color-bg: #FFFFFF;
  --color-fg: #333333;
  --color-card: #FFFFFF;
  --color-muted: #F0F0F0;
  --color-muted-fg: #666666;
  --color-border: rgba(0, 0, 0, 0.14);
  --color-destructive: #DC2626;

  /* Typography */
  --font-heading: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing scale */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3.5rem;
  --space-2xl: 5.5rem;

  /* Layout */
  --container-width: 1160px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 1px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.18);

  /* Cadastral parcel-mosaic texture, inspired by land-registry maps:
     a tileable block of filled/unfilled "parcels" separated by thin "street" gaps.
     Dark variant (gold parcels on light strokes) for the black bands; light variant
     (gold parcels on dark strokes) for pale sections. Reused across the site so the
     motif reads as one consistent identity rather than a one-off hero effect. */
  --cadastre-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1'%3E%3Crect x='0' y='0' width='54' height='70' fill='%23E9B430' fill-opacity='0.028'/%3E%3Crect x='57' y='0' width='34' height='42' fill='%23E9B430' fill-opacity='0.028'/%3E%3Crect x='57' y='45' width='34' height='25'/%3E%3Crect x='94' y='0' width='60' height='70' fill='%23E9B430' fill-opacity='0.028'/%3E%3Crect x='157' y='0' width='45' height='30' fill='%23E9B430' fill-opacity='0.028'/%3E%3Crect x='157' y='33' width='45' height='37'/%3E%3Crect x='205' y='0' width='95' height='70' fill='%23E9B430' fill-opacity='0.028'/%3E%3Crect x='0' y='78' width='40' height='50' fill='%23E9B430' fill-opacity='0.028'/%3E%3Crect x='43' y='78' width='25' height='50'/%3E%3Crect x='71' y='78' width='50' height='50' fill='%23E9B430' fill-opacity='0.028'/%3E%3Crect x='124' y='78' width='30' height='50' fill='%23E9B430' fill-opacity='0.028'/%3E%3Crect x='157' y='78' width='70' height='50'/%3E%3Crect x='230' y='78' width='70' height='50' fill='%23E9B430' fill-opacity='0.028'/%3E%3Crect x='0' y='136' width='64' height='64' fill='%23E9B430' fill-opacity='0.028'/%3E%3Crect x='67' y='136' width='30' height='64' fill='%23E9B430' fill-opacity='0.028'/%3E%3Crect x='100' y='136' width='45' height='30'/%3E%3Crect x='100' y='169' width='45' height='31' fill='%23E9B430' fill-opacity='0.028'/%3E%3Crect x='148' y='136' width='55' height='64' fill='%23E9B430' fill-opacity='0.028'/%3E%3Crect x='206' y='136' width='94' height='64'/%3E%3C/g%3E%3C/svg%3E");
}

/* Dark black bands (hero, page headers, CTA banner, footer): flip text/border
   tokens locally so nested elements stay legible on the black background. */
.hero, .page-header, .cta-banner, .site-footer, .section--dark {
  --color-heading: #FFFFFF;
  --color-fg: #EDEDED;
  --color-muted-fg: #C7C7C7;
  --color-border: rgba(255, 255, 255, 0.14);
  --color-accent-text: #F2C158;
  --color-accent-soft: rgba(233, 180, 48, 0.18);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, picture, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-heading);
  margin-bottom: 0.65em;
}

h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); font-weight: 600; }
h2 { font-size: clamp(1.7rem, 2.8vw, 2.35rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.05rem; }

p { color: var(--color-fg); }
.lead { font-size: 1.15rem; color: var(--color-muted-fg); line-height: 1.7; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.section { padding-block: var(--space-2xl); }
.section-sm { padding-block: var(--space-xl); }
.section--muted { background: var(--color-primary-soft); }
.section--dark { background: var(--color-primary); color: #FFFFFF; }
.section--dark h2, .section--dark h3 { color: #FFFFFF; }
.section--dark p { color: #D4D4D4; }

.section-head { max-width: 680px; margin-bottom: var(--space-lg); }
.section-head--center { margin-inline: auto; text-align: center; }
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--space-sm);
}
.section--dark .eyebrow { color: var(--color-accent-text); }

.grid { display: grid; gap: var(--space-lg); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 0; top: -48px; z-index: 200;
  background: var(--color-primary); color: #fff; padding: var(--space-xs) var(--space-md);
  transition: top 150ms ease;
}
.skip-link:focus { top: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.98rem;
  border: 1.5px solid transparent;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  min-height: 48px;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--accent { background: var(--color-accent-strong); color: var(--color-on-accent); box-shadow: var(--shadow-sm); }
.btn--accent:hover { background: #B9861F; box-shadow: var(--shadow-md); }

.btn--primary { background: var(--color-primary); color: #FFFFFF; }
.btn--primary:hover { background: var(--color-primary-dark); box-shadow: var(--shadow-md); }

.btn--outline { background: transparent; border-color: rgba(255,255,255,0.55); color: inherit; }
.btn--outline:hover { background: rgba(255,255,255,0.12); }

.btn--outline-dark { background: transparent; border-color: rgba(255,255,255,0.45); color: var(--color-heading); }
.btn--outline-dark:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.7); }

.btn--block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #FFFFFF;
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-sm);
}

.brand { display: flex; align-items: center; gap: var(--space-sm); }
.brand__logo-chip { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand__logo-chip img { height: 60px; width: auto; display: block; }
@media (min-width: 860px) {
  .brand__logo-chip img { height: 76px; }
}
.brand__mark {
  width: 42px; height: 42px; border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem;
  flex-shrink: 0;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; color: var(--color-heading); }
.brand__tag { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted-fg); }
@media (max-width: 460px) {
  .site-header .brand__tag { display: none; }
}

.nav-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
.nav-toggle__bars { position: relative; width: 20px; height: 14px; }
.nav-toggle__bars span {
  position: absolute; left: 0; width: 100%; height: 2px; background: var(--color-heading);
  transition: transform 200ms ease, opacity 200ms ease, top 200ms ease;
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }
.site-header.is-open .nav-toggle__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.site-header.is-open .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.site-header.is-open .nav-toggle__bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.main-nav {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-md);
  display: none;
  flex-direction: column;
  gap: var(--space-md);
  box-shadow: var(--shadow-md);
}
.site-header.is-open .main-nav { display: flex; }

.main-nav__links { display: flex; flex-direction: column; gap: var(--space-sm); }
.main-nav__links a {
  font-weight: 600; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border);
  color: var(--color-heading);
  display: block;
}
.main-nav__links a[aria-current="page"] { color: var(--color-accent-text); }
.main-nav__cta { display: flex; }

@media (min-width: 860px) {
  .nav-toggle { display: none; }
  .main-nav {
    position: static; display: flex !important; flex-direction: row; align-items: center;
    background: transparent; border: 0; box-shadow: none; padding: 0; width: auto;
  }
  .main-nav__links { flex-direction: row; align-items: center; gap: var(--space-lg); margin-right: var(--space-lg); }
  .main-nav__links a { border-bottom: 0; padding: var(--space-2xs) 0; position: relative; }
  .main-nav__links a[aria-current="page"]::after,
  .main-nav__links a:hover::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--color-accent-text);
  }
}

/* ---------- Hero ---------- */
.hero {
  padding-block: var(--space-2xl) var(--space-xl);
  background:
    radial-gradient(1100px 480px at 85% -10%, rgba(217, 166, 43, 0.18), transparent 60%),
    var(--cadastre-dark),
    linear-gradient(180deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  border-bottom: 1px solid var(--color-border);
}
.hero__grid { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 960px) { .hero__grid { grid-template-columns: 1.1fr 0.9fr; } }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-text);
  background: var(--color-accent-soft);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  margin-bottom: var(--space-md);
}
.hero h1 { margin-bottom: var(--space-md); }
.hero__lead { max-width: 52ch; margin-bottom: var(--space-lg); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.hero__trust { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.hero__trust-item { display: flex; align-items: baseline; gap: var(--space-2xs); }
.hero__trust-item strong { font-family: var(--font-heading); font-size: 1.5rem; color: var(--color-heading); }
.hero__trust-item span { font-size: 0.85rem; color: var(--color-muted-fg); }

.hero__panel {
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.hero__panel::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(360px 220px at 100% 0%, rgba(255,255,255,0.10), transparent 60%);
}
.hero__panel h3 { color: #fff; margin-bottom: var(--space-sm); }
.hero__panel-list { display: flex; flex-direction: column; gap: var(--space-sm); position: relative; }
.hero__panel-item { display: flex; gap: var(--space-sm); align-items: flex-start; }
.hero__panel-item .icon { flex-shrink: 0; margin-top: 2px; color: var(--color-accent-text); }
.hero__panel-item p { color: #E2E2E2; font-size: 0.95rem; margin: 0; }
.hero__panel-item strong { display: block; color: #fff; font-size: 0.98rem; }

/* ---------- Icon ---------- */
.icon { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.icon--lg { width: 30px; height: 30px; }

/* ---------- Cards ---------- */
.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
  height: 100%;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: rgba(0,0,0,0.22); }
.card__icon {
  width: 52px; height: 52px; border-radius: var(--radius-sm);
  background: var(--color-accent-soft); color: var(--color-accent-text);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-md);
}
.card h3 { margin-bottom: var(--space-xs); }
.card p { color: var(--color-muted-fg); font-size: 0.97rem; }
.card__link { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-sm); font-weight: 700; color: var(--color-accent-text); font-size: 0.92rem; }
.card__link .icon { width: 16px; height: 16px; transition: transform 150ms ease; }
.card:hover .card__link .icon { transform: translateX(3px); }

/* Service detail card (Services page) */
.service {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-md);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 760px) {
  .service { grid-template-columns: 88px 1fr; align-items: start; }
}
.service__head { display: flex; align-items: center; gap: var(--space-sm); }
.service__title-row { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: var(--space-2xs); }
.service__title-row h3 { margin: 0; }
.service__number {
  font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--color-accent-text);
  flex-shrink: 0;
}
.service ul { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-sm); }
.service li { display: flex; gap: var(--space-xs); align-items: flex-start; font-size: 0.96rem; color: var(--color-fg); }
.service li .icon { width: 17px; height: 17px; color: var(--color-accent-text); margin-top: 3px; flex-shrink: 0; }

/* ---------- Stats / proof ---------- */
.stats { display: grid; gap: var(--space-lg); grid-template-columns: repeat(2, 1fr); text-align: center; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats__item strong { display: block; font-family: var(--font-heading); font-size: 2.1rem; color: var(--color-accent-text); }
.section--dark .stats__item strong { color: var(--color-accent-text); }
.stats__item span { font-size: 0.9rem; color: var(--color-muted-fg); }
.section--dark .stats__item span { color: #D4D4D4; }

.pillars { display: grid; gap: var(--space-md); }
@media (min-width: 760px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar { display: flex; gap: var(--space-sm); }
.pillar .icon { color: var(--color-accent-text); flex-shrink: 0; margin-top: 2px; }
.pillar h4 { margin-bottom: 4px; }
.pillar p { font-size: 0.93rem; color: var(--color-muted-fg); }

/* ---------- Timeline / method ---------- */
.timeline { display: grid; gap: var(--space-md); }
@media (min-width: 760px) { .timeline { grid-template-columns: repeat(4, 1fr); } }
.timeline__step { position: relative; padding-top: var(--space-lg); }
.timeline__step-number {
  position: absolute; top: 0; left: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700;
}
.timeline__step h4 { margin: var(--space-sm) 0 var(--space-2xs); }
.timeline__step p { font-size: 0.92rem; color: var(--color-muted-fg); }

/* ---------- Quote / bio ---------- */
.bio { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 860px) { .bio { grid-template-columns: 280px 1fr; } }
.bio__portrait {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--color-primary), var(--color-primary-dark));
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.bio__portrait img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 25%;
  position: relative;
}
.bio__signature { font-family: var(--font-heading); font-style: italic; font-size: 1.15rem; color: var(--color-heading); margin-top: var(--space-md); }
.bio blockquote {
  border-left: 3px solid var(--color-accent-text);
  padding-left: var(--space-md);
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--color-heading);
  margin-block: var(--space-md);
}

/* ---------- FAQ Accordion ---------- */
.accordion { display: flex; flex-direction: column; border-top: 1px solid var(--color-border); }
.accordion-item { border-bottom: 1px solid var(--color-border); }
.accordion-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  background: transparent; border: 0; text-align: left;
  padding: var(--space-md) var(--space-2xs);
  font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; color: var(--color-heading);
}
.accordion-trigger .icon { flex-shrink: 0; color: var(--color-accent-text); transition: transform 200ms ease; }
.accordion-trigger[aria-expanded="true"] .icon { transform: rotate(45deg); }
.accordion-panel {
  overflow: hidden; height: 0; transition: height 220ms ease;
}
.accordion-panel__inner { padding: 0 var(--space-2xs) var(--space-md); color: var(--color-muted-fg); max-width: 68ch; }

/* ---------- Forms ---------- */
.form-grid { display: grid; gap: var(--space-md); }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 700; font-size: 0.92rem; color: var(--color-heading); }
.field--required label::after { content: " *"; color: var(--color-accent-text); }
.field input, .field textarea, .field select {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  background: var(--color-bg);
  color: var(--color-fg);
  font-size: 1rem;
  min-height: 48px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--color-muted-fg); opacity: 1; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(201, 154, 46, 0.25);
  outline: none;
}
.field .hint { font-size: 0.82rem; color: var(--color-muted-fg); }
.field .error-msg { font-size: 0.82rem; color: var(--color-destructive); display: none; }
.field.has-error input, .field.has-error textarea { border-color: var(--color-destructive); }
.field.has-error .error-msg { display: block; }

.checkbox-field { display: flex; align-items: flex-start; gap: var(--space-xs); }
.checkbox-field input { width: 18px; height: 18px; min-height: auto; margin-top: 3px; flex-shrink: 0; }
.checkbox-field label { font-weight: 400; font-size: 0.88rem; color: var(--color-muted-fg); }

.form-success {
  display: none;
  align-items: flex-start;
  gap: var(--space-sm);
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.35);
  color: var(--color-accent-text);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  margin-top: var(--space-md);
}
.form-success.is-visible { display: flex; }
.form-success .icon { color: var(--color-accent-text); flex-shrink: 0; margin-top: 2px; }

.form-error {
  display: none;
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.35);
  color: #b91c1c;
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  margin-top: var(--space-md);
}
.form-error.is-visible { display: block; }

/* ---------- Contact info list ---------- */
.info-list { display: flex; flex-direction: column; gap: var(--space-md); }
.info-list__item { display: flex; gap: var(--space-sm); }
.info-list__item .icon-wrap {
  width: 44px; height: 44px; border-radius: var(--radius-sm); flex-shrink: 0;
  background: var(--color-accent-soft); color: var(--color-accent-text);
  display: flex; align-items: center; justify-content: center;
}
.info-list__item h4 { margin-bottom: 2px; }
.info-list__item p, .info-list__item a { color: var(--color-muted-fg); font-size: 0.95rem; }
.info-list__item a:hover { color: var(--color-accent-text); }

.hours-table { width: 100%; border-collapse: collapse; margin-top: var(--space-sm); }
.hours-table td { padding: 0.45rem 0; border-bottom: 1px dashed var(--color-border); font-size: 0.95rem; }
.hours-table td:last-child { text-align: right; font-weight: 700; color: var(--color-heading); }

.map-placeholder {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 23px, rgba(0,0,0,0.06) 24px),
    repeating-linear-gradient(90deg, transparent, transparent 23px, rgba(0,0,0,0.06) 24px),
    var(--color-muted);
  min-height: 260px;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-xs);
  color: var(--color-muted-fg);
  text-align: center;
  padding: var(--space-lg);
}
.map-placeholder .icon { color: var(--color-accent-text); }
.map-placeholder strong { color: var(--color-heading); }

.map-embed {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.map-embed iframe {
  width: 100%;
  height: 320px;
  border: 0;
  display: block;
}

/* ---------- CTA banner ---------- */
.cta-banner {
  background: var(--cadastre-dark), var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  color: #fff;
  display: flex; flex-direction: column; gap: var(--space-md);
  align-items: flex-start;
  position: relative; overflow: hidden;
}
.cta-banner::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(480px 240px at 90% 0%, rgba(217,166,43,0.25), transparent 60%);
}
.cta-banner > * { position: relative; }
.cta-banner h2 { color: #fff; }
.cta-banner p { color: #D4D4D4; max-width: 56ch; }
.cta-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
@media (min-width: 760px) {
  .cta-banner { flex-direction: row; align-items: center; justify-content: space-between; }
  .cta-banner__text { max-width: 60%; }
}

/* ---------- Breadcrumb / page header ---------- */
.page-header {
  padding-block: var(--space-xl) var(--space-lg);
  background:
    var(--cadastre-dark),
    linear-gradient(180deg, var(--color-primary-dark), var(--color-primary));
  border-bottom: 1px solid var(--color-border);
}
.page-header .eyebrow { margin-bottom: var(--space-sm); }
.page-header .lead { margin-top: var(--space-sm); }

/* ---------- Footer ---------- */
.site-footer { background: var(--cadastre-dark), var(--color-primary-dark); color: #D4D4D4; padding-block: var(--space-xl) var(--space-lg); }
.footer-grid { display: grid; gap: var(--space-xl); }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-brand .brand__name, .footer-brand .brand__tag { color: #fff; }
.footer-brand .brand__tag { color: #A8A8A8; }
.footer-brand .brand__logo-chip {
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  box-shadow: var(--shadow-md);
}
.footer-brand .brand__logo-chip img { height: 56px; }
.site-footer p { color: #B5B5B5; font-size: 0.92rem; margin-top: var(--space-sm); max-width: 40ch; }
.footer-col h4 { color: #fff; margin-bottom: var(--space-sm); font-size: 0.95rem; letter-spacing: 0.03em; text-transform: uppercase; }
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-xs); }
.footer-col a { color: #B5B5B5; font-size: 0.94rem; }
.footer-col a:hover { color: var(--color-accent-text); }
.footer-bottom {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
  justify-content: space-between;
  font-size: 0.85rem; color: #999999;
}
.footer-bottom a { color: #999999; }
.footer-bottom a:hover { color: var(--color-accent-text); }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-lg { margin-top: var(--space-lg); }

/* ---------- Cabinet page: justified body text ---------- */
.page-cabinet p:not(.lead) {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* ---------- Splash intro (homepage, first load only, JS-driven) ----------
   Logo built up piece by piece, like the artwork being drawn: the damier
   icon (16 tiles, diagonal sweep), then "D'ANDREA", then the horizontal
   rule's two segments with its small diamond, then "AVOCAT", then finally
   the vertical rule, then a short hold, then a soft fade + zoom-out hands
   off to the homepage. ~3.4s total. Coordinates were sampled directly from
   assets/img/logo.png (637×243): the icon is the left 238px, split exactly
   in half into four 119×121.5 quadrants; the vertical rule sits at x≈251.5,
   y 37–211; the horizontal rule sits at y≈131, x 252–628, with a small
   diamond at x≈452.
   The wordmark is revealed as two crops (above/below y131) so that thin
   rule row stays blank until the bars draw in, instead of popping in baked
   into the bitmap. */
html.has-splash, html.has-splash body { overflow: hidden; height: 100%; }

/* Backdrop behind the animated logo: a plain white ground, so the logo
   reveal is the sole focus with nothing behind it competing for attention. */
.splash {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: #FFFFFF;
  opacity: 1;
  transform: scale(1);
  transition: opacity 420ms cubic-bezier(0.45, 0, 0.15, 1), transform 420ms cubic-bezier(0.45, 0, 0.15, 1);
}
.splash[hidden] { display: none; }
.splash--hide { opacity: 0; transform: scale(1.04); pointer-events: none; }

.splash__stage {
  position: relative;
  --logo-w: 280px;
  --ease: cubic-bezier(0.45, 0, 0.15, 1);
  --ease-draw: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  width: var(--logo-w);
  height: calc(var(--logo-w) * 243 / 637);
  transform: scale(0.965);
  animation: splashStageIn 700ms var(--ease-reveal) forwards;
}
@keyframes splashStageIn {
  to { transform: scale(1); }
}
@media (max-width: 640px) {
  .splash__stage { --logo-w: 210px; }
}

/* The damier is built from 16 small tiles (a 4×4 grid — four tiles make up
   each of the 4 visible quadrants), each a fixed crop of the transparent
   logo at its own exact coordinates. They rise into place in a diagonal
   sweep from the top-left corner outward, strictly one at a time — like a
   building going up on a construction site — never more than one new tile
   starting within the same beat, so the mosaic is clearly assembling
   itself piece by piece. Pure fade + a rise and scale, no hard pop;
   adjoining tiles (1px overlap) always meet at identical source pixels,
   so nothing ever shows a seam. */
.splash__tile {
  position: absolute;
  width: calc(var(--logo-w) * 59.5 / 637 + 1px);
  height: calc(var(--logo-w) * 60.75 / 637 + 1px);
  background-image: url(../assets/img/logo-transparent.png);
  background-repeat: no-repeat;
  background-size: var(--logo-w) calc(var(--logo-w) * 243 / 637);
  opacity: 0;
  transform: translateY(13px) scale(0.88);
  animation-name: splashTile;
  animation-duration: 340ms;
  animation-timing-function: var(--ease);
  animation-fill-mode: forwards;
}
@keyframes splashTile {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* left/top and the matching background-position crop both key off the same
   column/row, so each tile's position and its source pixels always agree. */
.splash__tile[data-c="0"] { left: 0; background-position-x: 0; }
.splash__tile[data-c="1"] { left: calc(var(--logo-w) * 59.5 / 637 - 1px); background-position-x: calc(-1 * var(--logo-w) * 59.5 / 637); }
.splash__tile[data-c="2"] { left: calc(var(--logo-w) * 119 / 637 - 1px); background-position-x: calc(-1 * var(--logo-w) * 119 / 637); }
.splash__tile[data-c="3"] { left: calc(var(--logo-w) * 178.5 / 637 - 1px); background-position-x: calc(-1 * var(--logo-w) * 178.5 / 637); }
.splash__tile[data-r="0"] { top: 0; background-position-y: 0; }
.splash__tile[data-r="1"] { top: calc(var(--logo-w) * 60.75 / 637 - 1px); background-position-y: calc(-1 * var(--logo-w) * 60.75 / 637); }
.splash__tile[data-r="2"] { top: calc(var(--logo-w) * 121.5 / 637 - 1px); background-position-y: calc(-1 * var(--logo-w) * 121.5 / 637); }
.splash__tile[data-r="3"] { top: calc(var(--logo-w) * 182.25 / 637 - 1px); background-position-y: calc(-1 * var(--logo-w) * 182.25 / 637); }
/* Diagonal order from the top-left corner outward, strictly one tile at a
   time (never two on the same beat); one tile every 70ms. */
.splash__tile[data-c="0"][data-r="0"] { animation-delay: 0ms; }
.splash__tile[data-c="1"][data-r="0"] { animation-delay: 70ms; }
.splash__tile[data-c="0"][data-r="1"] { animation-delay: 140ms; }
.splash__tile[data-c="2"][data-r="0"] { animation-delay: 210ms; }
.splash__tile[data-c="1"][data-r="1"] { animation-delay: 280ms; }
.splash__tile[data-c="0"][data-r="2"] { animation-delay: 350ms; }
.splash__tile[data-c="3"][data-r="0"] { animation-delay: 420ms; }
.splash__tile[data-c="2"][data-r="1"] { animation-delay: 490ms; }
.splash__tile[data-c="1"][data-r="2"] { animation-delay: 560ms; }
.splash__tile[data-c="0"][data-r="3"] { animation-delay: 630ms; }
.splash__tile[data-c="3"][data-r="1"] { animation-delay: 700ms; }
.splash__tile[data-c="2"][data-r="2"] { animation-delay: 770ms; }
.splash__tile[data-c="1"][data-r="3"] { animation-delay: 840ms; }
.splash__tile[data-c="3"][data-r="2"] { animation-delay: 910ms; }
.splash__tile[data-c="2"][data-r="3"] { animation-delay: 980ms; }
.splash__tile[data-c="3"][data-r="3"] { animation-delay: 1050ms; }

/* "D'ANDREA" and "AVOCAT" reveal as two separate crops, in step 2 and step 4
   of the sequence, with the two rules drawing in between and after them. */
.splash__word-top,
.splash__word-bottom {
  position: absolute;
  left: calc(var(--logo-w) * 253 / 637);
  width: calc(var(--logo-w) * 384 / 637);
  background-image: url(../assets/img/logo-transparent.png);
  background-repeat: no-repeat;
  background-size: var(--logo-w) calc(var(--logo-w) * 243 / 637);
  background-position-x: calc(-1 * var(--logo-w) * 253 / 637);
  opacity: 0;
  transform: translateY(5px);
  animation-name: splashWord;
  animation-timing-function: var(--ease);
  animation-fill-mode: forwards;
}
.splash__word-top {
  top: 0;
  height: calc(var(--logo-w) * 122 / 637);
  background-position-y: 0;
  animation-duration: 300ms;
  animation-delay: 1500ms;
}
.splash__word-bottom {
  top: calc(var(--logo-w) * 140 / 637);
  height: calc(var(--logo-w) * 103 / 637);
  background-position-y: calc(-1 * var(--logo-w) * 140 / 637);
  animation-duration: 300ms;
  animation-delay: 2150ms;
}
@keyframes splashWord {
  to { opacity: 1; transform: translateY(0); }
}

/* The rules: solid-color bars (not a sprite crop) so they can be "drawn"
   via a scale transform, like a pen tracing a straight edge — the two
   horizontal segments (with the diamond popping in between them) right
   after "D'ANDREA", the vertical rule last of all, after "AVOCAT". The
   horizontal rule is NOT one continuous line in the logo: it's two separate
   segments (x 281–434 and 471–628 in the 637-wide source) with a small
   diamond centered in the 37px gap between them (x 448–457) — reproduced
   exactly here rather than as a single bar. */
.splash__bar-v,
.splash__bar-h-l,
.splash__bar-h-r {
  position: absolute;
  background: var(--color-accent-strong);
}
.splash__bar-h-l {
  left: calc(var(--logo-w) * 281 / 637);
  top: calc(var(--logo-w) * 131 / 637);
  width: calc(var(--logo-w) * 153 / 637);
  height: 1px;
  transform: scaleX(0);
  transform-origin: left;
  animation: splashBarH 120ms var(--ease-draw) 1860ms forwards;
}
.splash__bar-h-r {
  left: calc(var(--logo-w) * 471 / 637);
  top: calc(var(--logo-w) * 131 / 637);
  width: calc(var(--logo-w) * 157 / 637);
  height: 1px;
  transform: scaleX(0);
  transform-origin: left;
  animation: splashBarH 120ms var(--ease-draw) 1950ms forwards;
}
.splash__bar-v {
  left: calc(var(--logo-w) * 251.5 / 637);
  top: calc(var(--logo-w) * 37 / 637);
  width: 1px;
  height: calc(var(--logo-w) * 174 / 637);
  transform: scaleY(0);
  transform-origin: top;
  animation: splashBarV 260ms var(--ease-draw) 2530ms forwards;
}
@keyframes splashBarV {
  to { transform: scaleY(1); }
}
@keyframes splashBarH {
  to { transform: scaleX(1); }
}

/* The diamond is sped up (short 90ms pop) so it reads as a quick punctuation
   mark between the two horizontal segments, not a third slow step. */
.splash__diamond {
  position: absolute;
  left: calc(var(--logo-w) * 452.5 / 637);
  top: calc(var(--logo-w) * 131 / 637);
  width: 5px;
  height: 5px;
  background: var(--color-accent-strong);
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  animation: splashDiamond 90ms var(--ease) 1910ms forwards;
}
@keyframes splashDiamond {
  to { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
}

/* Lightweight fallback: reduced-motion preference or a small (likely
   lower-powered) viewport gets the finished logo with a quick simple fade
   instead of the full staggered sequence. */
@media (prefers-reduced-motion: reduce), (max-width: 640px) {
  .splash__stage,
  .splash__tile,
  .splash__word-top,
  .splash__word-bottom,
  .splash__bar-v,
  .splash__bar-h-l,
  .splash__bar-h-r,
  .splash__diamond {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}

/* ==========================================================================
   Blog / Actualités
   ========================================================================== */

.container--narrow { max-width: 780px; }

.card--article { display: flex; flex-direction: column; }
.card--article .card__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-sm);
  background: var(--color-primary-soft);
}
.card--article .card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card--article .card__thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary-soft), rgba(233, 180, 48, 0.12));
}
.card--article .card__thumb--placeholder .icon { width: 32px; height: 32px; color: var(--color-accent-text); opacity: 0.6; }

.article-meta-date {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--space-2xs);
}

.article-meta {
  color: var(--color-muted-fg);
  font-size: 0.95rem;
  margin-top: var(--space-sm);
}

.articles-empty {
  text-align: center;
  color: var(--color-muted-fg);
  padding: var(--space-2xl) var(--space-md);
  font-size: 1.05rem;
}

.article-content { line-height: 1.75; color: var(--color-fg); }
.article-content h2 { font-family: var(--font-heading); margin-top: var(--space-xl); margin-bottom: var(--space-sm); }
.article-content h3 { font-family: var(--font-heading); margin-top: var(--space-lg); margin-bottom: var(--space-xs); }
.article-content p { margin-bottom: var(--space-md); }
.article-content ul, .article-content ol { margin: 0 0 var(--space-md) var(--space-lg); }
.article-content li { margin-bottom: var(--space-2xs); }
.article-content a { color: var(--color-accent-text); text-decoration: underline; }
.article-content a:hover { color: var(--color-accent-strong); }
.article-content blockquote {
  border-left: 3px solid var(--color-accent);
  margin: var(--space-lg) 0;
  padding: var(--space-xs) var(--space-md);
  font-style: italic;
  color: var(--color-muted-fg);
}
.article-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: var(--space-md) 0;
  display: block;
}
.article-content figure { margin: var(--space-lg) 0; }
.article-content figcaption { font-size: 0.88rem; color: var(--color-muted-fg); margin-top: var(--space-2xs); text-align: center; }

/* ==========================================================================
   Mentions légales — placeholders à compléter avant mise en ligne
   ========================================================================== */
.legal-todo {
  background: rgba(233, 180, 48, 0.22);
  color: #7A5A10;
  padding: 0.05em 0.4em;
  border-radius: 4px;
  font-style: normal;
  font-weight: 700;
  font-size: 0.92em;
}
.legal-notice {
  background: var(--color-primary-soft);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xl);
  font-size: 0.95rem;
}

/* ==========================================================================
   Recherche & pagination des actualités
   ========================================================================== */
.articles-search {
  display: flex;
  gap: var(--space-sm);
  max-width: 560px;
  margin: 0 auto var(--space-xl);
}
.articles-search__input {
  flex: 1;
  padding: 0.7em 1em;
  font: inherit;
  color: var(--color-fg);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.articles-search__input:focus {
  outline: none;
  border-color: var(--color-accent-strong);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-xl);
}
.pagination__btn {
  min-width: 42px;
  height: 42px;
  padding: 0 0.7em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-weight: 700;
  color: var(--color-heading);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pagination__btn:hover:not(:disabled):not(.is-current) {
  border-color: var(--color-accent-strong);
  background: var(--color-accent-soft);
}
.pagination__btn.is-current {
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: var(--color-on-accent);
  cursor: default;
}
.pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ==========================================================================
   Fil d'Ariane (breadcrumb)
   ========================================================================== */
.breadcrumb {
  margin-bottom: var(--space-md);
  font-size: 0.85rem;
}
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  padding: 0;
  margin: 0;
}
.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 0.4em;
  color: rgba(255, 255, 255, 0.7);
}
.breadcrumb li + li::before {
  content: "›";
  opacity: 0.6;
}
.breadcrumb a {
  color: var(--color-accent-text);
  text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] {
  color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   Partage d'article
   ========================================================================== */
.article-share {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}
.article-share__label {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: var(--space-sm);
}
.article-share__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.article-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 1em;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-heading);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.article-share__btn:hover {
  border-color: var(--color-accent-strong);
  background: var(--color-accent-soft);
}
.article-share__btn.is-copied {
  border-color: var(--color-accent-strong);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}
.article-share__btn .icon { width: 18px; height: 18px; }
#share-linkedin .icon { fill: currentColor; stroke: none; }