/* Polices auto-hébergées (relecture Claude — sous-ensemble latin, couvre œ/Œ) */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/PlayfairDisplay-700.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Poppins-400.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/Poppins-500.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Montserrat-400.woff2') format('woff2');}

/* ==========================================================================
   Rey Avocat Genève — Charte graphique complète
   Copie conforme du site www.rey-avocat-geneve.ch
   HTML5 + CSS3 vanilla, auto-hébergé, WCAG 2.1 AA
   ========================================================================== */

/* ── 1. Variables CSS (content-map.md) ─────────────────────────────────── */
:root {
  /* Couleurs — palette P3 (validée YMR 2026-07-28)
     Règle : l'or vif ne sert QUE sur fond sombre ou en remplissage de bouton.
     Sur fond clair, le même or est assombri (--gold-text) pour rester lisible.
     Ratios WCAG mesurés en commentaire. */
  --gold: #F5CE0A;             /* or vif — sur --ink-darker : 13,14:1 */
  --gold-text: #806600;        /* or texte sur clair — 5,32:1 crème / 4,79:1 crème alt */
  --gold-text-strong: #6f5900; /* hover / état actif sur fond clair — 6,54:1 */
  --gold-soft: #EDE6D6;        /* texte secondaire sur fond sombre — 16,19:1 */
  --gold-dark: #6f5900;        /* conservé pour compatibilité : hover sur fond clair */
  --bordeaux: #8f4646;         /* sur crème : 6,48:1 */
  --bordeaux-light: #bd6f6f;
  --ink: #4a5058;              /* texte courant sur crème — 7,87:1 */
  --ink-dark: #16202c;
  --ink-darker: #000812;       /* fond sombre / titres sur clair — 19,46:1 */
  --surface: #FEFBF3;          /* fond de page crème */
  --surface-alt: #F3EFE4;
  --surface-muted: #F3EFE4;
  --border: #d6cdb8;
  --border-light: #e8e1d2;

  /* Typographie */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-quote: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  /* Tailles titres */
  --fs-h1: 47px;
  --fs-h2: 41px;
  --fs-h3: 30px;
  --fs-h4: 24px;
  --fs-h5: 21px;
  --fs-h6: 18px;
  --fs-body: 16px;

  /* Espacements */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-xxl: 6rem;

  /* Layout */
  --max-width: 1240px;
  --header-height: 220px;
  --nav-height: 52px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}

/* ── 2. Reset & Base ──────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink-dark);
  background-color: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--gold-dark);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover,
a:focus {
  color: var(--bordeaux);
}

/* Focus visible sur fond clair ET sur fond sombre : anneau encre + halo or.
   Sur crème c'est l'anneau encre qui porte (19,46:1), sur fond sombre c'est le halo or (13,14:1). */
a:focus-visible {
  outline: 2px solid var(--ink-darker);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--gold);
  border-radius: 2px;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink-darker);
}

/* Titres — alignés sur l'échelle d'encre P3 (les #303030/#383838 hérités du WordPress
   d'origine tiraient vers le brun sur fond crème). */
h2 { color: var(--ink-darker); }
h3, h4, h5, h6 { color: var(--ink-dark); }

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

p {
  margin-bottom: var(--space-sm);
  max-width: 75ch;
}

blockquote {
  font-family: var(--font-quote);
  font-style: italic;
  border-left: 3px solid var(--gold);
  padding-left: var(--space-md);
  margin: var(--space-md) 0;
  color: var(--ink);
}

::selection {
  background: var(--gold-soft);
  color: var(--ink-darker);
}

/* Skip link (accessibilité) */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  background: var(--gold);
  color: var(--ink-darker);
  padding: var(--space-xs) var(--space-sm);
  z-index: 10000;
  font-weight: 500;
  border-radius: 0 0 4px 4px;
}

.skip-link:focus {
  top: 0;
}

/* ── 3. Header — Barre supérieure (logo + contacts) ────────────────────── */
.site-header {
  background-color: var(--ink-darker);
  color: var(--surface);
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-sm) var(--space-md);
  gap: var(--space-md);
}

.site-logo a {
  display: inline-block;
}

.site-logo img {
  height: 48px;
  width: auto;
  transition: opacity var(--transition-fast);
}

.site-logo img:hover {
  opacity: 0.85;
}

.header-contact {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  font-size: 14px;
}

.header-contact-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.header-contact-item a {
  color: var(--surface);
  font-size: 14px;
}

.header-contact-item a:hover,
.header-contact-item a:focus {
  color: var(--gold);
}

.header-contact-icon {
  color: var(--gold);
  font-size: 16px;
  flex-shrink: 0;
}

.header-contact-label {
  color: var(--gold-soft);
  font-weight: 500;
  margin-right: 4px;
}

/* ── 4. Navigation principale ─────────────────────────────────────────── */
.main-navigation {
  background-color: var(--surface);
  border-bottom: 1px solid var(--border-light);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.nav-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 0;
}

.nav-menu > li {
  position: relative;
}

.nav-menu > li > a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color var(--transition-fast), background-color var(--transition-fast);
  white-space: nowrap;
}

.nav-menu > li > a:hover,
.nav-menu > li > a:focus,
.nav-menu > li.current-menu-item > a {
  color: var(--gold-dark);
}

.nav-menu > li.current-menu-item > a {
  color: var(--gold-text); /* nav sur fond crème → or assombri */
}

/* Sous-menu (dropdown) */
.nav-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-top: 2px solid var(--gold);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition-normal), transform var(--transition-normal), visibility var(--transition-normal);
  z-index: 1001;
}

.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-menu .sub-menu a {
  display: block;
  padding: var(--space-xs) var(--space-md);
  font-size: 13px;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid var(--border-light);
}

.nav-menu .sub-menu a:last-child {
  border-bottom: none;
}

.nav-menu .sub-menu a:hover,
.nav-menu .sub-menu a:focus {
  background-color: var(--surface-alt);
  color: var(--gold-dark);
}

/* Bouton menu mobile */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
  color: var(--surface);
}

.mobile-menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink-dark);
  margin: 5px 0;
  transition: var(--transition-fast);
}

/* ── 5. Hero d'accueil ────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    linear-gradient(rgba(0, 8, 18, 0.55), rgba(0, 8, 18, 0.55)),
    url('../assets/drew-beamer-679505-unsplash.jpg') center / cover no-repeat;
  /* data-review="hero provisoire — image à re-sourcer (banner.png manquant)" */
  color: var(--surface);
  padding: var(--space-xxl) var(--space-md);
}

.hero-content {
  max-width: 800px;
  padding: 0 var(--space-sm);
}

.hero h1 {
  font-size: 40px;
  color: var(--surface);
  margin-bottom: var(--space-md);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--gold-soft);
  margin-bottom: var(--space-lg);
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Boutons CTA */
.btn {
  display: inline-block;
  padding: 14px 32px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 2px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
}

.btn-primary {
  background-color: var(--gold);
  color: var(--ink-darker);
  border-color: var(--gold);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--gold-dark);
  border-color: var(--gold-dark);
  color: var(--surface);
}

/* Bouton secondaire — variante fond clair (par défaut) */
.btn-outline {
  background-color: transparent;
  color: var(--gold-text);
  border-color: var(--gold-text);
}

.btn-outline:hover,
.btn-outline:focus {
  background-color: var(--gold-text);
  color: var(--surface);
}

/* Bouton secondaire — variante fond sombre : crème plein, lisible et franc */
.hero .btn-outline,
.page-hero .btn-outline,
.cta-band .btn-outline,
.quote-band .btn-outline,
.content-section--dark .btn-outline {
  background-color: var(--surface);
  color: var(--ink-darker);
  border-color: var(--surface);
}

.hero .btn-outline:hover,
.hero .btn-outline:focus,
.page-hero .btn-outline:hover,
.page-hero .btn-outline:focus,
.cta-band .btn-outline:hover,
.cta-band .btn-outline:focus,
.quote-band .btn-outline:hover,
.quote-band .btn-outline:focus,
.content-section--dark .btn-outline:hover,
.content-section--dark .btn-outline:focus {
  background-color: var(--gold);
  border-color: var(--gold);
  color: var(--ink-darker);
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-md);
}

/* ── 6. Bandeau titre de page intérieure (.page-hero) ──────────────────── */
.page-hero {
  position: relative;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    linear-gradient(rgba(0, 8, 18, 0.6), rgba(0, 8, 18, 0.6)),
    url('../assets/page-title-background.jpg') center / cover no-repeat;
  color: var(--surface);
  padding: var(--space-xl) var(--space-md);
}

.page-hero h1 {
  font-size: 40px;
  color: var(--gold);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  margin-bottom: var(--space-xs);
}

.page-hero-content h2 {
  font-size: 30px;
  color: var(--gold);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  margin-bottom: var(--space-xs);
}

/* Caption des bandeaux — blanche dans l'original (.attorna-page-caption #ffffff) */
.page-hero-caption {
  display: block;
  font-family: var(--font-body);
  font-size: 45px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--surface);
  margin-bottom: var(--space-xs);
}

.page-hero-subtitle {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--gold-soft);
  max-width: 55ch;
  margin: 0 auto;
}

/* ── 7. Sections de contenu ────────────────────────────────────────────── */
.content-section {
  padding: var(--space-xl) var(--space-md);
  max-width: var(--max-width);
  margin: 0 auto;
}

.content-section--alt {
  background-color: var(--surface-alt);
}

.content-section--dark {
  background-color: var(--ink-darker);
  color: var(--surface);
}

.section-intro {
  text-align: center;
  max-width: 75ch;
  margin: 0 auto var(--space-lg);
}

.section-intro h2 {
  margin-bottom: var(--space-sm);
}

.section-intro p {
  color: var(--ink);
  margin: 0 auto;
}

/* Section "Avocats au Barreau" */
.barreau-badge {
  text-align: center;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--gold-text); /* surtitre sur fond crème → or assombri */
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-light);
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Section "Divorce express" — 3 cartes ; variante --two : 2 cartes centrées */
.divorce-express-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
}

.divorce-express-grid--two {
  grid-template-columns: repeat(2, minmax(0, 420px));
  justify-content: center;
}

.divorce-card {
  text-align: center;
  padding: var(--space-lg) var(--space-md);
}

.divorce-card-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-md);
}

.divorce-card h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-sm);
}

.divorce-card p {
  color: var(--ink);
  max-width: 55ch;
  margin: 0 auto var(--space-sm);
}

/* Section "Nos domaines" — 6 domaines avec pictos */
.domains-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
}

.domain-card {
  text-align: center;
  padding: var(--space-md);
  transition: transform var(--transition-fast);
}

.domain-card:hover {
  transform: translateY(-4px);
}

.domain-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-sm);
}

.domain-card h3 {
  font-size: var(--fs-h5);
  margin-bottom: var(--space-xs);
}

.domain-card p {
  color: var(--ink);
  font-size: 14px;
}

/* Section statistiques */
.stats-section {
  background-color: var(--ink-darker);
  color: var(--surface);
  padding: var(--space-xl) var(--space-md);
  text-align: center;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  max-width: 800px;
  margin: 0 auto;
}

.stat-item h3 {
  font-size: var(--fs-h2);
  color: var(--gold);
  margin-bottom: var(--space-xs);
}

.stat-item p {
  color: var(--gold-soft);
  font-size: 16px;
  margin: 0;
}

.stat-quote {
  font-family: var(--font-quote);
  font-style: italic;
  color: var(--gold-soft);
  font-size: 18px;
  max-width: 55ch;
  margin: var(--space-lg) auto 0;
}

/* ── 8. Formulaire de contact ─────────────────────────────────────────── */
.contact-section {
  padding: var(--space-xl) var(--space-md);
  max-width: var(--max-width);
  margin: 0 auto;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  max-width: var(--max-width);
  margin: 0 auto;
}

.contact-info h2 {
  margin-bottom: var(--space-md);
}

.contact-info p {
  color: var(--ink);
}

.contact-info ul {
  margin-bottom: var(--space-md);
}

.contact-info li {
  padding: var(--space-xs) 0;
  color: var(--ink);
}

.contact-info a {
  color: var(--gold-dark);
}

.contact-info a:hover {
  color: var(--bordeaux);
}

.contact-form label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-dark);
  margin-bottom: 4px;
}

.contact-form select,
.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-dark);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  margin-bottom: var(--space-sm);
  transition: border-color var(--transition-fast);
}

.contact-form select:focus,
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-soft);
}

.contact-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a5058' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form .btn {
  width: 100%;
}

/* ── 9. Footer ─────────────────────────────────────────────────────────── */
.site-footer {
  background-color: var(--ink-darker);
  color: var(--gold-soft);
  padding: var(--space-xl) var(--space-md) 0;
}

.footer-container {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.footer-column h3 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--surface);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-sm);
}

.footer-column p,
.footer-column a {
  color: var(--gold-soft);
  font-size: 14px;
  line-height: 1.7;
}

.footer-column a:hover,
.footer-column a:focus {
  color: var(--gold);
}

.footer-logo {
  height: 43px;
  width: auto;
  margin-bottom: var(--space-sm);
}

.footer-social {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.footer-social a {
  color: var(--gold);
  font-size: 18px;
  transition: color var(--transition-fast);
}

.footer-social a:hover {
  color: var(--gold-soft);
}

.footer-copyright {
  border-top: 1px solid rgba(192, 177, 120, 0.15);
  padding: var(--space-md);
  text-align: center;
  font-size: 13px;
  color: var(--gold-soft);
}

.footer-copyright a {
  color: var(--gold);
  margin-left: var(--space-sm);
}

/* ── 10. Utilitaires ───────────────────────────────────────────────────── */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.text-center { text-align: center; }
.text-gold { color: var(--gold); }
.text-gold-soft { color: var(--gold-soft); }
.text-ink { color: var(--ink); }
.text-ink-dark { color: var(--ink-dark); }
.text-ink-darker { color: var(--ink-darker); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

/* ── 11. Responsive — Mobile-first breakpoints ─────────────────────────── */

/* Tablettes (≥ 768px) */
@media (min-width: 768px) {
  .header-contact {
    gap: var(--space-xl);
  }

  .hero {
    min-height: 600px;
  }

  .divorce-express-grid {
    gap: var(--space-xl);
  }

  .domains-grid {
    gap: var(--space-xl);
  }

  .contact-grid {
    gap: var(--space-xl);
  }

  .footer-container {
    gap: var(--space-xl);
  }
}

/* Desktop (≥ 1024px) */
@media (min-width: 1024px) {
  .header-top {
    padding: var(--space-md) var(--space-lg);
  }

  .hero {
    min-height: 640px;
  }

  .hero h1 {
    font-size: 52px;
  }
}

/* Grand desktop (≥ 1240px) */
@media (min-width: 1240px) {
  .content-section {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
  :root {
    --fs-h1: 32px;
    --fs-h2: 28px;
    --fs-h3: 24px;
    --fs-h4: 21px;
    --fs-h5: 18px;
  }

  /* Header mobile */
  .header-top {
    flex-direction: column;
    text-align: center;
    gap: var(--space-sm);
  }

  .header-contact {
    flex-direction: column;
    gap: var(--space-xs);
  }

  /* Navigation mobile */
  .mobile-menu-toggle {
    display: block;
  }

  .nav-container {
    flex-direction: column;
    padding: 0;
  }

  .nav-menu {
    flex-direction: column;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .nav-menu.is-open {
    max-height: 600px;
  }

  .nav-menu > li > a {
    padding: var(--space-sm);
    text-align: center;
    border-bottom: 1px solid var(--border-light);
  }

  .nav-menu .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--border-light);
    display: none;
  }

  .nav-menu li.mobile-sub-open > .sub-menu {
    display: block;
  }

  /* Hero mobile */
  .hero {
    min-height: 360px;
    padding: var(--space-xl) var(--space-sm);
  }

  .hero h1 {
    font-size: 32px;
  }

  .hero-subtitle {
    font-size: 15px;
  }

  /* Sections mobile */
  .divorce-express-grid,
  .domains-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-sm);
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .footer-container {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    text-align: center;
  }

  .footer-social {
    justify-content: center;
  }

  /* .page-hero mobile */
  .page-hero {
    min-height: 200px;
    padding: var(--space-lg) var(--space-sm);
  }

  .page-hero h1 {
    font-size: 32px;
  }

  .page-hero h1.page-hero-caption {
    font-size: 45px;
  }

  .page-hero-content h2 {
    font-size: 30px;
  }

  /* CTA mobile */
  .btn-group {
    flex-direction: column;
    align-items: center;
  }

  .btn {
    width: 100%;
    max-width: 300px;
  }
}

/* ── 12. Impression ────────────────────────────────────────────────────── */
@media print {
  .site-header,
  .main-navigation,
  .mobile-menu-toggle,
  .hero,
  .site-footer {
    display: none;
  }

  body {
    color: #000;
    background: var(--surface);
  }

  a {
    color: #000;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 12px;
  }
}
/* relecture : portraits avocats */
.lawyer-photo{display:block;max-width:280px;height:auto;margin:0 0 1.25rem;}

/* ── Page Activités — réécriture relecture (2026-07-21) ─────────────────── */
.activities-section {
  background: var(--surface) url('../assets/statue-con.jpg') no-repeat right -60px top / 42% auto;
}

.activities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) var(--space-xl);
}

.activity-panel {
  background: rgba(254, 251, 243, 0.94);
  border: 1px solid var(--border-light);
  border-top: 3px solid var(--gold);
  padding: var(--space-md) var(--space-md) var(--space-lg);
}

.activity-panel-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.activity-panel-head img {
  width: 52px;
  height: 50px;
  flex-shrink: 0;
}

.activity-panel h3 {
  font-size: var(--fs-h5);
}

.activity-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.activity-tags li {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 4px 12px;
  border-radius: 999px;
}

.activity-more {
  display: inline-block;
  margin-top: var(--space-md);
  font-size: 14px;
  font-weight: 500;
}

.activity-more::after {
  content: " \2192";
}

/* Bloc Divorce express */
.de-band {
  background: var(--surface-alt);
}

.de-grid {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
}

.de-photo {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: cover;
  object-position: center;
}

.de-caption {
  font-family: var(--font-quote);
  font-style: italic;
  color: var(--ink);
}

.de-offer {
  margin-top: var(--space-md);
  padding-left: var(--space-md);
  border-left: 3px solid var(--gold);
}

.de-offer h3 {
  font-size: var(--fs-h5);
  margin-bottom: 4px;
}

.de-offer p {
  margin-bottom: 0;
}

/* Bandeau citation + chiffres */
.quote-band {
  background:
    linear-gradient(rgba(0, 8, 18, 0.84), rgba(0, 8, 18, 0.84)),
    url('../assets/activite_bg.png') center / cover no-repeat;
  color: var(--surface);
  text-align: center;
  padding: var(--space-xxl) var(--space-md);
}

.quote-band blockquote {
  border: none;
  padding: 0;
  margin: 0 auto var(--space-sm);
  font-family: var(--font-heading);
  font-style: normal;
  font-size: 34px;
  line-height: 1.3;
  color: var(--gold);
  max-width: 30ch;
}

.quote-band > p {
  color: var(--surface);
  font-size: 18px;
  max-width: 60ch;
  margin: 0 auto var(--space-lg);
}

.quote-band .stats-grid {
  max-width: 520px;
  margin: 0 auto;
}

.stat-number {
  display: block;
  font-family: var(--font-heading);
  font-size: 56px;
  line-height: 1;
  color: var(--gold);
}

.stat-label {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold-soft);
}

@media (max-width: 900px) {
  .activities-section {
    background-image: none;
  }
  .activities-grid {
    grid-template-columns: 1fr;
  }
  .de-grid {
    grid-template-columns: 1fr;
  }
  .de-photo {
    max-height: 300px;
  }
  .quote-band blockquote {
    font-size: var(--fs-h4);
  }
}

/* ── Uniformisation inter-pages (2026-07-21) ────────────────────────────── */
.stats-grid--three {
  grid-template-columns: repeat(3, 1fr);
}

.divorce-express-grid .divorce-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-top: 3px solid var(--gold);
}

@media (max-width: 900px) {
  .stats-grid--three {
    grid-template-columns: 1fr;
  }
}

/* Bios avocats — deux colonnes */
.bio-grid {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
  max-width: var(--max-width);
  margin: var(--space-md) auto 0;
}

.bio-side .lawyer-photo {
  max-width: 100%;
  margin: 0 0 var(--space-sm);
}

.bio-meta {
  border-top: 3px solid var(--gold);
  background: var(--surface);
  border-left: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: var(--space-sm) var(--space-md);
  font-size: 14px;
  color: var(--ink);
}

.bio-meta li {
  padding: 4px 0;
}

.bio-body h3 {
  font-size: var(--fs-h5);
  margin: var(--space-md) 0 var(--space-xs);
}

@media (max-width: 900px) {
  .bio-grid {
    grid-template-columns: 1fr;
  }
  .bio-side .lawyer-photo {
    max-width: 260px;
  }
}

/* Citation intégrée à une section sombre (droit-fiscal) */
.quote-inline {
  text-align: center;
  margin-top: var(--space-xl);
}

.quote-inline blockquote {
  border: none;
  padding: 0;
  margin: 0 auto var(--space-xs);
  font-family: var(--font-heading);
  font-style: normal;
  font-size: 34px;
  line-height: 1.3;
  color: var(--gold);
  max-width: 30ch;
}

.quote-inline p {
  color: var(--surface);
  font-size: 18px;
  max-width: 60ch;
  margin: 0 auto;
}

/* Titres sur fonds sombres — priment sur la hiérarchie de couleurs claire */
.content-section--dark h2,
.content-section--dark h3,
.stats-section h2,
.stats-section h3 {
  color: var(--surface);
}

/* Grille contact à colonne unique (formulaire seul) — centrée */
.contact-grid--single {
  grid-template-columns: min(680px, 100%);
  justify-content: center;
}

/* Labels de formulaire lisibles sur sections sombres */
.content-section--dark .contact-form label {
  color: var(--gold-soft);
}

/* Bloc raccourcis contact (Email / Téléphone / Devis) — classe orpheline stylée */
.contact-methods {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.contact-methods a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.contact-methods a:hover,
.contact-methods a:focus {
  color: var(--gold-dark);
}

.contact-methods img {
  width: 40px;
  height: 40px;
}

/* Photo des locaux (page contact) — calée sur la hauteur de la colonne infos */
.contact-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 900px) {
  .contact-photo {
    height: auto;
    max-height: 380px;
  }
}

/* Pages du sous-menu « L'étude » : surtitre promu en H1, titre de page en H2 (YMR 2026-07-24) */
.page-hero h1.page-hero-lead {
  font-size: 50px;
  color: var(--gold);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  margin-bottom: var(--space-xs);
}

@media (max-width: 900px) {
  .page-hero h1.page-hero-lead {
    font-size: 34px;
  }}

/* Section à contenu centré (texte + blocs) */
.section-centered p {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   Ajouts 2026-07-28 — patterns repris de l'analyse ratel-avocat.fr
   (fil d'Ariane, bandeau CTA milieu de page, maillage interne,
    bouton d'appel flottant mobile, consentement carte)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Fil d'Ariane ─────────────────────────────────────────────────────── */
.breadcrumb {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-sm) var(--space-md) 0;
  font-size: 13px;
  color: var(--ink);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.breadcrumb li + li::before {
  content: "›";
  color: var(--ink);
  opacity: 0.6;
}

.breadcrumb a {
  color: var(--gold-text);
}

.breadcrumb a:hover,
.breadcrumb a:focus {
  color: var(--bordeaux);
  text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
  color: var(--ink-dark);
  font-weight: 500;
}

/* ── Bandeau CTA milieu de page ───────────────────────────────────────── */
.cta-band {
  background-color: var(--ink-darker);
  color: var(--surface);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
}

.cta-band-inner {
  max-width: 780px;
  margin: 0 auto;
}

.cta-band-lead {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  color: var(--surface);
  margin-bottom: var(--space-xs);
  max-width: none;
}

.cta-band-text {
  font-size: 15px;
  color: var(--gold-soft);
  margin-bottom: var(--space-md);
  max-width: none;
}

.cta-band-text a {
  color: var(--gold);
  font-weight: 500;
  white-space: nowrap;
}

.cta-band-text a:hover,
.cta-band-text a:focus {
  color: var(--surface);
  text-decoration: underline;
}

/* ── Maillage interne « Consultez également » ─────────────────────────── */
.related-links {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) var(--space-xl);
  border-top: 1px solid var(--border-light);
}

.related-links h2 {
  font-size: var(--fs-h5);
  text-align: center;
  margin-bottom: var(--space-md);
}

.related-links ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm) var(--space-lg);
}

.related-links a {
  display: inline-block;
  padding: 6px 2px;
  font-size: 15px;
  color: var(--gold-text);
  border-bottom: 1px solid transparent;
}

.related-links a:hover,
.related-links a:focus {
  color: var(--bordeaux);
  border-bottom-color: var(--bordeaux);
}

/* ── Bouton d'appel flottant (mobile uniquement) ──────────────────────── */
.floating-call {
  display: none;
}

@media (max-width: 767px) {
  .floating-call {
    display: flex;
    position: fixed;
    right: var(--space-sm);
    bottom: var(--space-sm);
    z-index: 1200;
    gap: var(--space-xs);
  }

  .floating-call a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: var(--gold);
    color: var(--ink-darker);
    box-shadow: 0 3px 10px rgba(0, 8, 18, 0.35);
    font-size: 22px;
    line-height: 1;
  }

  .floating-call a.floating-call-mail {
    background-color: var(--surface);
    border: 2px solid var(--ink-darker);
  }

  .floating-call a:hover,
  .floating-call a:focus {
    background-color: var(--ink-darker);
    color: var(--gold);
  }

  /* laisse respirer le bas de page pour ne rien masquer */
  .site-footer {
    padding-bottom: 84px;
  }
}

/* ── Carte : consentement explicite avant chargement ──────────────────── */
.map-consent {
  position: relative;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.map-consent p {
  max-width: 52ch;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 0;
}

.map-consent .btn {
  cursor: pointer;
  font-family: var(--font-body);
}

.map-consent-address {
  font-size: 14px;
}

.map-consent-address a {
  color: var(--gold-text);
  text-decoration: underline;
}

/* ── Bandeau tarifs (pattern ratel-avocat.fr) ─────────────────────────────
   Montants repris tels quels de divorce-express.html, eux-mêmes issus du site
   WordPress d'origine (source/extracted/divorce-express.md). Aucun tarif inventé. */
.price-band {
  background-color: var(--surface-alt);
  padding: var(--space-lg) var(--space-md);
}

.price-band-inner {
  max-width: 760px;
  margin: 0 auto;
}

.price-band-title {
  font-size: var(--fs-h5);
  text-align: center;
  margin-bottom: var(--space-xs);
}

.price-band-sub {
  text-align: center;
  font-size: 14px;
  color: var(--ink);
  margin: 0 auto var(--space-md);
  max-width: 60ch;
}

.price-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.price-row {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border-light);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.price-row:hover {
  border-color: var(--gold-text);
}

.price-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  padding: var(--space-sm) var(--space-md);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-dark);
}

.price-label .price-detail {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
}

.price-amount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-width: 168px;   /* aligne les trois pastilles quelle que soit la longueur du montant */
  padding: var(--space-sm) var(--space-md);
  background: var(--ink-darker);
  color: var(--gold);
  font-weight: 500;
  font-size: 15px;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.price-amount::after {
  content: "›";
  font-size: 20px;
  line-height: 1;
}

.price-row:hover .price-amount,
.price-row a:focus .price-amount {
  background: var(--gold);
  color: var(--ink-darker);
}

.price-row > a {
  display: flex;
  align-items: stretch;
  width: 100%;
  color: inherit;
}

.price-band-foot {
  margin-top: var(--space-md);
  text-align: center;
  font-size: 13px;
  color: var(--ink);
}

.price-band-foot a {
  color: var(--gold-text);
  text-decoration: underline;
}

@media (max-width: 599px) {
  .price-row > a { flex-direction: column; }
  .price-amount { justify-content: space-between; }
}

/* ── Annonce de poste (page Carrières) ───────────────────────────────────── */
.job-posting {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  padding: var(--space-md) var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0;
}

.job-posting h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-sm);
}

.job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-light);
  font-size: 14px;
}

.job-meta div {
  display: flex;
  flex-direction: column;
}

.job-meta dt,
.job-meta .job-meta-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-text);
}

.job-meta dd,
.job-meta .job-meta-value {
  margin: 0;
  color: var(--ink-dark);
  font-weight: 500;
}

.job-posting h4 {
  font-size: var(--fs-h6);
  margin: var(--space-md) 0 var(--space-xs);
}

.job-posting ul {
  margin-bottom: var(--space-sm);
}

.job-posting ul li {
  position: relative;
  padding-left: var(--space-md);
  margin-bottom: 6px;
  font-size: 15px;
  color: var(--ink-dark);
}

.job-posting ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background: var(--gold-text);
  border-radius: 50%;
}

.job-apply {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-light);
  font-size: 15px;
}

.job-apply address {
  font-style: normal;
  margin-top: var(--space-xs);
  color: var(--ink);
}

/* --- Formulaire : piège à robots -------------------------------------------
   Champ leurre : invisible et hors du parcours clavier pour un humain, mais
   présent dans le DOM. Un robot qui remplit tout le remplit aussi, et
   sendmail.php rejette alors la soumission.
   Pas de display:none ni de visibility:hidden : les robots les détectent. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Bandeau d'erreur du formulaire (affiché par js/form.js sur ?erreur=1). */
.form-error {
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid #b3261e;
  border-left: 4px solid #b3261e;
  border-radius: 4px;
  background: #fdf4f3;
  color: #7a1a14;
  font-size: 15px;
}

/* --- Bandeau de consentement aux cookies (nLPD / RGPD) ---------------------
   Injecté par js/consent.js. L'attribut [hidden] doit l'emporter sur le
   display:flex, sans quoi le bandeau resterait visible après le choix. */
.cookie-banner[hidden] { display: none; }

.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 999;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: 18px 22px;
  background: var(--ink-darker);
  color: var(--gold-soft);
  border-top: 3px solid var(--gold);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
}

.cookie-banner p {
  flex: 1;
  min-width: 240px;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

/* Sur fond sombre, l'or vif est lisible (13,14:1) — c'est le seul endroit du
   site où il sert au texte. Voir la règle en tête de feuille. */
.cookie-banner a { color: var(--gold); text-decoration: underline; }
.cookie-banner a:hover { color: #fff; }

.cookie-banner .cookie-actions { display: flex; gap: var(--space-sm); flex-shrink: 0; }
.cookie-banner .btn { padding: 10px 22px; font-size: 15px; }

.cookie-banner .btn-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .55);
}
.cookie-banner .btn-ghost:hover { background: rgba(255, 255, 255, .15); color: #fff; }

#cookie-settings { cursor: pointer; }

@media (max-width: 680px) {
  .cookie-banner { flex-direction: column; align-items: stretch; gap: var(--space-sm); }
  .cookie-banner .cookie-actions { justify-content: flex-end; }
}