/* ==========================================================================
   Alexis Guillaume, Avocat à la Cour — Système de design
   Site en page unique. Palette monochrome, alignée sur le monogramme AG.
   Typographie : EB Garamond (titrage) / Libre Franklin (courant).
   Ni Inter ni Roboto — critère 02 de la checklist.
   Toutes les paires de texte vérifiées WCAG AA ou AAA.
   ========================================================================== */

/* --- 1. Jetons ---------------------------------------------------------- */

:root {
  /* Couleurs — monochrome, aligné sur le logo AG et la référence retenue.
     Aucune teinte : l'autorité vient du contraste, pas de la couleur. */
  --ink:          #0B0B0C;   /* 18.8:1 sur papier — AAA */
  --ink-soft:     #17181A;
  --ink-line:     #2A2C2F;
  --paper:        #FAFAF8;
  --paper-2:      #F0EFEC;
  --paper-3:      #E4E2DE;
  --muted:        #57585B;   /* 6.8:1 sur papier — AA */
  --brass:        #6E6F73;   /* 4.8:1 sur papier — AA (repères, petites capitales) */
  --brass-light:  #9B9DA1;   /* 7.2:1 sur encre — AAA */
  --border:       #DEDDD9;   /* décoratif */
  --border-ui:    #8E8F93;   /* 3.1:1 — contours de champs, WCAG 1.4.11 */
  --on-ink:       #FFFFFF;
  --on-ink-soft:  #C6C7CA;   /* 11.6:1 sur encre — AAA */
  --focus:        #0B0B0C;

  /* Typographie */
  --font-display: "EB Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --font-body:    "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Échelle fluide */
  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.34rem + 0.8vw, 2.1rem);
  --step-3:  clamp(1.95rem, 1.6rem + 1.7vw, 3.1rem);
  --step-4:  clamp(2.4rem, 1.75rem + 3.2vw, 4.6rem);

  /* Espacement (densité 4/10 — standard) */
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: clamp(4.5rem, 3rem + 7vw, 9rem);

  /* Mesure et rythme */
  --measure: 68ch;
  --shell: 78rem;
  --gutter: clamp(1.25rem, 0.7rem + 2.6vw, 3.5rem);

  /* Mouvement — spécifications issues de motion.csv (tier « Standard ») */
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --dur-fast: 180ms;
  --dur-base: 260ms;
  --dur-slow: 380ms;

  --radius: 2px;
}

/* --- 2. Réinitialisation ------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

/* Focus visible uniquement au clavier (html-tailwind.csv, sévérité moyenne) */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}

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

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--space-s); top: -100%;
  z-index: 200; background: var(--ink); color: var(--on-ink);
  padding: var(--space-xs) var(--space-m); border-radius: var(--radius);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { top: var(--space-s); }

/* --- 3. Structure ------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--space-3xl); }
.section--tight { padding-block: var(--space-2xl); }

.section--ink {
  background: var(--ink);
  color: var(--on-ink);
}
.section--ink .lede,
.section--ink .muted { color: var(--on-ink-soft); }
.section--ink .rule { background: var(--ink-line); }
.section--ink .marker { color: var(--brass-light); }

.section--paper2 { background: var(--paper-2); }

.rule {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: 0;
}

/* Trait qui se trace — motif de continuité spatiale */
.rule--draw { transform-origin: left center; }
.js .rule--draw { transform: scaleX(0); transition: transform 620ms var(--ease-out); }
.js .rule--draw.is-in { transform: scaleX(1); }

/* --- 4. En-tête de section (numérotation façon acte juridique) ---------- */

.sec-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
  margin-bottom: var(--space-xl);
}

@media (min-width: 62rem) {
  .sec-head {
    grid-template-columns: 12rem 1fr;
    gap: var(--space-l);
    /* `baseline` et non `start` : les deux colonnes n'ont ni la même taille de
       police ni le même interligne, si bien qu'aligner leurs bords supérieurs
       laissait le repère 16,8 px au-dessus de la ligne du titre. La grille
       cale ici les premières lignes de base l'une sur l'autre — ce que fait
       un typographe, et ce qui reste juste à toutes les tailles d'écran. */
    align-items: baseline;
  }
}

.marker {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0;
}

.sec-title { font-size: var(--step-3); }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--muted);
  max-width: 46ch;
  font-weight: 300;
}

.muted { color: var(--muted); }
.measure { max-width: var(--measure); }

/* --- 5. Barre de navigation --------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.site-header.is-stuck {
  border-bottom-color: var(--border);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: 4.75rem;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  min-width: 0;                 /* autorise la contraction en flex */
  text-decoration: none;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 0.86rem + 0.72vw, 1.32rem);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.brand b { font-weight: 600; }

/* Sous 30rem, la mention « Avocat à la Cour » est sacrifiée : le nom et les
   commandes doivent tenir sans provoquer de défilement horizontal.
   `:not(.mark)` est essentiel — le monogramme est lui aussi un <span>, et
   sans cette exclusion il disparaîtrait de l'en-tête sur téléphone. */
/* Sous 30rem, nom et titre ne tiennent plus côte à côte avec le sélecteur de
   langue et le bouton de menu. Plutôt que de sacrifier le titre, on l'empile
   sous le nom : les deux restent lisibles, sans provoquer de défilement
   horizontal. Le tiret n'a alors plus d'objet. */
@media (max-width: 30rem) {
  .brand {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.5rem;
    row-gap: 0.1rem;
    align-items: center;
    line-height: 1.15;
  }
  .brand .mark { grid-row: 1 / 3; align-self: center; }
  .brand b { grid-column: 2; align-self: end; }
  .brand span:not(.mark):not(.brand-sep) {
    grid-column: 2;
    align-self: start;
    font-size: 0.54rem;
    letter-spacing: 0.16em;
  }
  .brand-sep { display: none; }
}
.brand-sep {
  color: var(--border-ui);
  font-weight: 300;
  margin-inline: -0.1rem;
}

.brand span {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
}

.nav-list {
  display: none;
  list-style: none;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.1rem);
}
@media (min-width: 54rem) { .nav-list { display: flex; } }

.nav-link {
  position: relative;
  text-decoration: none;
  font-size: 0.94rem;
  letter-spacing: 0.005em;
  padding-block: 0.4rem;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out);
  cursor: pointer;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }
.nav-link[aria-current="page"] { color: var(--brass); }

.nav-side { display: flex; align-items: center; gap: var(--space-xs); flex: none; }

/* Sélecteur de langue */
.lang {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.lang a {
  display: grid;
  place-items: center;
  min-width: 2.6rem;
  min-height: 2.1rem;
  padding-inline: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--muted);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lang a:hover { background: var(--paper-2); color: var(--ink); }
.lang a[aria-current="true"] { background: var(--ink); color: var(--on-ink); }

/* Bascule mobile — cible tactile 44×44 (ux priorité 2) */
.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.nav-toggle:hover { background: var(--paper-2); }
@media (min-width: 54rem) { .nav-toggle { display: none; } }

.nav-toggle span {
  display: block; width: 18px; height: 1.5px;
  background: var(--ink);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle span + span { margin-top: 4px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.drawer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
  border-top: 1px solid transparent;
}
.drawer.is-open { grid-template-rows: 1fr; border-top-color: var(--border); }
.drawer > div { overflow: hidden; }
@media (min-width: 54rem) { .drawer { display: none; } }

.drawer ul { list-style: none; padding-block: var(--space-s); }
.drawer a {
  display: block;
  padding: 0.85rem 0;
  min-height: 44px;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  font-size: 1.05rem;
}
.drawer li:last-child a { border-bottom: 0; }

/* --- 6. Boutons --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.8rem 1.7rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.015em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--ink); color: var(--on-ink); }
.btn--primary:hover { background: #2A2C2F; }

/* Sur fond encre — héros compris — le bouton s'inverse, sans quoi il
   disparaîtrait purement et simplement dans l'arrière-plan. */
.section--ink .btn--primary,
.hero .btn--primary { background: var(--on-ink); color: var(--ink); }
.section--ink .btn--primary:hover,
.hero .btn--primary:hover { background: var(--paper-3); }

.btn--ghost { border-color: currentColor; background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.section--ink .btn--ghost:hover { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }

.btn .arrow { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

/* Lien fléché */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--brass);
  text-decoration: none;
  cursor: pointer;
}
.link-arrow span { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.link-arrow .arrow { transition: transform var(--dur-base) var(--ease-out); }
.link-arrow:hover .arrow { transform: translateX(4px); }

/* --- 7. Héros ----------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--ink);
  color: var(--on-ink);
  overflow: hidden;
  padding-block: clamp(4.5rem, 3rem + 9vw, 9.5rem);
}

/* Texture de pierre — dégradés CSS, aucune image à télécharger */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 78% 8%, rgba(255,255,255,0.09), transparent 58%),
    radial-gradient(90% 70% at 8% 96%, rgba(255,255,255,0.05), transparent 60%);
  pointer-events: none;
}
.hero > * { position: relative; }

.hero-grid {
  display: grid;
  gap: var(--space-l);
}
@media (min-width: 62rem) {
  .hero-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: end; }
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-light);
  margin-bottom: var(--space-m);
}
.kicker::before {
  content: "";
  width: 2.2rem; height: 1px;
  background: var(--brass-light);
}

.hero h1 {
  font-size: var(--step-4);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.hero h1 em {
  font-style: italic;
  color: var(--on-ink-soft);
}

.hero-lede {
  margin-top: var(--space-m);
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.55;
  color: var(--on-ink-soft);
  max-width: 44ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-l);
}

/* Colonne de méta, façon en-tête de dossier */
.hero-meta { border-top: 1px solid var(--ink-line); }
.hero-meta dl { margin: 0; }
.hero-meta .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-m);
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--ink-line);
}
.hero-meta dt {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-ink-soft);
}
.hero-meta dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  text-align: right;
}

/* --- 8. Piliers --------------------------------------------------------- */

.pillars {
  display: grid;
  gap: var(--space-l);
  list-style: none;
}
@media (min-width: 48rem) { .pillars { grid-template-columns: repeat(3, 1fr); gap: var(--space-m); } }

.pillar { padding-top: var(--space-m); border-top: 1px solid var(--border); }
.pillar h3 { font-size: var(--step-1); margin-bottom: 0.6rem; }
.pillar p { color: var(--muted); font-size: 0.97rem; }
.pillar .ico { color: var(--brass); margin-bottom: var(--space-s); }

/* --- 9. Index des domaines (table des matières d'un acte) --------------- */

.index-list { list-style: none; border-top: 1px solid var(--border); }

.index-item { border-bottom: 1px solid var(--border); }

.index-link {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  align-items: center;
  gap: var(--space-s);
  padding-block: clamp(1.15rem, 0.9rem + 0.9vw, 1.9rem);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out);
}
@media (min-width: 62rem) {
  .index-link { grid-template-columns: 4.5rem minmax(0, 20rem) minmax(0, 1fr) auto; }
}

.index-num {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}

.index-title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.15;
  transition: transform var(--dur-base) var(--ease-out);
}

.index-desc {
  display: none;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.55;
}
@media (min-width: 62rem) { .index-desc { display: block; } }

.index-link .arrow { color: var(--brass); transition: transform var(--dur-base) var(--ease-out); }
.index-link:hover .index-title { transform: translateX(8px); }
.index-link:hover .arrow { transform: translateX(5px); }

/* --- 10. Cartes de domaine (page détaillée) ----------------------------- */

.domain {
  display: grid;
  gap: var(--space-m);
  padding-block: var(--space-xl);
  border-top: 1px solid var(--border);
  scroll-margin-top: 7rem;
}
@media (min-width: 62rem) {
  .domain { grid-template-columns: 12rem minmax(0, 1fr) minmax(0, 18rem); gap: var(--space-l); }
}

.domain h2 { font-size: var(--step-2); margin-bottom: var(--space-s); }
.domain p + p { margin-top: var(--space-s); }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin-top: var(--space-m); }
.chip {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--muted);
  background: var(--paper);
}

.aside-note {
  border-left: 2px solid var(--brass);
  padding-left: var(--space-m);
  font-size: 0.92rem;
  color: var(--muted);
}
.aside-note strong { color: var(--ink); font-weight: 600; }

/* --- 11. Étapes de la méthode ------------------------------------------ */

.steps { list-style: none; counter-reset: step; display: grid; gap: 0; }
@media (min-width: 62rem) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step {
  counter-increment: step;
  padding: var(--space-m) 0;
  border-top: 1px solid var(--ink-line);
}
@media (min-width: 62rem) {
  .step { padding: var(--space-m) var(--space-m) var(--space-l) 0; }
}
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--brass-light);
  margin-bottom: var(--space-s);
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.step p { font-size: 0.94rem; color: var(--on-ink-soft); }

/* --- 12b. Profil unique (exercice individuel) --------------------------- */

.profile { display: grid; gap: var(--space-l); }
@media (min-width: 54rem) {
  .profile {
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: start;
  }
}

.profile figure { margin: 0; }

/* Le ratio est déclaré : la place est réservée avant le chargement de l'image,
   donc aucun décalage de mise en page (CLS < 0.1). Le noir et blanc aligne la
   photographie sur l'identité du logo. */
.profile img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 18%;
  filter: grayscale(1) contrast(1.05);
  background: var(--paper-3);
  border-radius: var(--radius);
}

.profile figcaption {
  margin-top: var(--space-s);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brass);
}

.profile h3 { font-size: var(--step-2); }
.profile .role {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  margin-top: 0.5rem;
}
.profile .bio { margin-top: var(--space-m); color: var(--muted); }
.profile .bio p + p { margin-top: var(--space-s); }

/* --- 14. Coordonnées ---------------------------------------------------- */

.contact-grid { display: grid; gap: var(--space-xl); }
@media (min-width: 62rem) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: var(--space-2xl); } }

.contact-list { list-style: none; display: grid; gap: var(--space-m); }
.contact-list dt {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--brass); margin-bottom: 0.3rem;
}
.contact-list dd { margin: 0; font-size: 1.02rem; }
.contact-list a { text-decoration-color: var(--border); }
.contact-list a:hover { text-decoration-color: var(--brass); }

/* --- 15. Pied de page --------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: var(--on-ink-soft);
  padding-block: var(--space-2xl) var(--space-l);
  font-size: 0.92rem;
}
.footer-grid { display: grid; gap: var(--space-l); }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-xl); } }

.site-footer h2 {
  font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--brass-light);
  margin-bottom: var(--space-s);
}
.site-footer ul { list-style: none; display: grid; gap: 0.55rem; }
.site-footer a { text-decoration: none; color: var(--on-ink-soft); transition: color var(--dur-fast) var(--ease-out); }
.site-footer a:hover { color: var(--on-ink); text-decoration: underline; }
.site-footer .brand { color: var(--on-ink); }

.footer-bottom {
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--ink-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  justify-content: space-between;
  font-size: 0.84rem;
}

/* --- 16. Pages de contenu juridique ------------------------------------- */

.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--step-2); margin-top: var(--space-xl); margin-bottom: var(--space-s); }
.prose h3 { font-size: var(--step-1); margin-top: var(--space-l); margin-bottom: var(--space-2xs); }
.prose p, .prose li { color: var(--muted); }
.prose p + p { margin-top: var(--space-s); }
.prose ul { margin-top: var(--space-s); padding-left: 1.15rem; list-style: disc; }
.prose li { margin-bottom: 0.4rem; }
.prose a { color: var(--brass); }

.page-head { padding-block: var(--space-2xl) var(--space-xl); }
.page-head h1 { font-size: var(--step-3); }

/* --- 17. Révélations au défilement --------------------------------------
   Spécification motion.csv « Scroll Reveal / Subtle » :
   y 12-16px, 300-400ms, power1.out, déclenchement à top 90%.
   Sans JS, tout reste visible (aucun contenu masqué pour les moteurs).
   ------------------------------------------------------------------------ */

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

/* --- 18. Mouvement réduit (html-tailwind.csv, sévérité HAUTE) ----------- */

@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;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .js .rule--draw { transform: scaleX(1) !important; }
}

/* --- 19. Impression ----------------------------------------------------- */

@media print {
  .site-header, .site-footer, .hero-actions, .nav-toggle { display: none; }
  body { background: #fff; color: #000; }
  .hero { background: #fff; color: #000; }
}

/* ==========================================================================
   20. Monogramme AG — relief métallique
   Le PNG est détouré (fond transparent) et sert de MASQUE : ce qui se voit,
   c'est le dégradé placé dessous, pas le fichier. D'où le relief, et un
   fondu impeccable sur n'importe quel fond.
   ========================================================================== */

.mark {
  --mono: url("../img/monogram.svg");
  /* Indispensable : sur un <span> resté en `inline`, ni `width` ni
     `aspect-ratio` ne s'appliquent — la marque serait invisible hors flex. */
  display: block;
  position: relative;
  flex: none;
  aspect-ratio: 100 / 66.44; /* proportions du monogramme vectorisé */
  overflow: hidden;
  -webkit-mask-image: var(--mono);
          mask-image: var(--mono);
  -webkit-mask-size: contain;  mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}

/* Sur papier : graphite bruni, biseau clair en haut à gauche. */
.mark--dark {
  background: linear-gradient(142deg,
    #4A4C50 0%, #0B0B0C 26%, #33353A 47%,
    #0B0B0C 63%, #55575C 84%, #101113 100%);
}

/* Sans @property, une variable personnalisée saute d'une valeur à l'autre au
   lieu de s'interpoler : la lumière avancerait par à-coups. La déclarer comme
   pourcentage la rend animable. Les navigateurs qui l'ignorent affichent
   simplement une lumière fixe — pas de casse. */
@property --mx { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --my { syntax: '<percentage>'; inherits: false; initial-value: 34%; }

/* Blanc — variante de l'accueil.
   Le blanc n'est pas un aplat mort : un point lumineux se déplace sur la
   lettre et le reste du tracé retombe très légèrement vers l'ivoire. À l'œil
   la marque reste blanche ; elle capte simplement la lumière comme le ferait
   une matière polie. Le masque du parent limite l'effet aux pleins du A et du G.
   `--mx` / `--my` sont posées par le pointeur (voir main.js). */
.mark--white {
  background:
    radial-gradient(38% 46% at var(--mx, 50%) var(--my, 34%),
      #FFFFFF 0%, #FDFDFC 38%, #E7E8EA 78%, #DBDDE0 100%);
  transition: background-position var(--dur-base) linear;
}

/* Sur cette variante, le reflet blanc du balayage ne se verrait pas. */
.mark--white::after { display: none; }

/* À défaut de pointeur — téléphone, tablette — la lumière dérive seule. */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .mark--white { animation: lightDrift 11s ease-in-out infinite; }
}
@keyframes lightDrift {
  0%, 100% { --mx: 28%; --my: 26%; }
  50%      { --mx: 72%; --my: 44%; }
}

/* Sur encre : argent poli. */
.mark--light {
  background: linear-gradient(142deg,
    #8B8D92 0%, #FFFFFF 20%, #A8AAAF 38%,
    #F2F2F0 56%, #76787D 74%, #E4E4E2 100%);
}

/* Le lustre qui balaie la lettre. Le masque du parent le découpe : la lumière
   ne court que sur les pleins du A et du G, jamais dans le vide autour. */
.mark::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(105deg,
    transparent 40%, rgba(255,255,255,0.9) 50%, transparent 60%);
  transform: translateX(-130%);
  pointer-events: none;
}
.mark--dark::after { opacity: 0.55; }

@keyframes sheen { to { transform: translateX(130%); } }

/* Un seul passage à l'apparition — pas de scintillement permanent. */
.js .mark.is-in::after { animation: sheen 1100ms var(--ease-out) 260ms both; }
.brand:hover .mark::after,
.brand:focus-visible .mark::after { animation: sheen 800ms var(--ease-out); }

/* Dans l'en-tête : nettement plus grand qu'avant, et il respire. */
.brand .mark { width: 2.9rem; }
@media (max-width: 48rem) { .brand .mark { width: 2.45rem; } }

/* Le nom est en Garamond, le titre en petites capitales : leurs boîtes n'ont
   ni la même hauteur ni la même proportion. `center` les centrait l'une sur
   l'autre, ce qui laissait leurs lignes de base décalées d'environ 4 px —
   visible sur un lockup horizontal. `baseline` les pose sur la même ligne,
   ce que fait un typographe. Le monogramme, lui, n'a pas de ligne de base :
   il reste centré sur la hauteur. */
.brand { align-items: baseline; gap: 0.7rem; }
.brand .mark { align-self: center; }

/* Dans le héros : la pièce maîtresse. */
.mark--hero { width: clamp(4.5rem, 3rem + 7vw, 7.5rem); margin-bottom: var(--space-l); }

/* ==========================================================================
   21. Héros de page unique — dépouillé
   ========================================================================== */

.hero--single { padding-block: clamp(5rem, 3rem + 11vw, 11rem); min-height: 88svh; display: grid; align-items: center; }
.hero--single .hero-lede { max-width: 40ch; }

/* ==========================================================================
   22. Domaines — accordéon natif <details>
   Aucun script : l'ouverture/fermeture est native, donc accessible au clavier
   et fonctionnelle même si le JavaScript échoue.
   ========================================================================== */

.acc { border-top: 1px solid var(--border); }
.acc-item { border-bottom: 1px solid var(--border); }

.acc-item summary {
  display: grid;
  grid-template-columns: 2.75rem 1fr 1.5rem;
  align-items: center;
  gap: var(--space-s);
  padding-block: clamp(1.1rem, 0.85rem + 0.9vw, 1.7rem);
  min-height: 56px;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.acc-item summary::-webkit-details-marker { display: none; }
@media (min-width: 62rem) {
  .acc-item summary { grid-template-columns: 4rem minmax(0, 22rem) minmax(0, 1fr) 1.5rem; }
}

.acc-num {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em;
  color: var(--brass); font-variant-numeric: tabular-nums;
}
.acc-title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.15;
  transition: transform var(--dur-base) var(--ease-out);
}
.acc-tag { display: none; color: var(--muted); font-size: 0.94rem; }
@media (min-width: 62rem) { .acc-tag { display: block; } }

.acc-sign { position: relative; width: 1.1rem; height: 1.1rem; justify-self: end; }
.acc-sign::before, .acc-sign::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 1px; background: var(--brass);
  transition: transform var(--dur-base) var(--ease-out);
}
.acc-sign::after { transform: rotate(90deg); }
.acc-item[open] .acc-sign::after { transform: rotate(0deg); }

.acc-item summary:hover .acc-title { transform: translateX(6px); }
.acc-item[open] .acc-title { color: var(--ink); }

.acc-body {
  padding-bottom: var(--space-l);
  display: grid;
  gap: var(--space-m);
}
@media (min-width: 62rem) {
  /* La troisième colonne accueillait l'encadré de conseil, désormais retiré.
     Sans plafond, le texte s'étirerait sur ~90 caractères ; on le ramène à
     une mesure lisible tout en gardant le retrait aligné sur le numéro. */
  .acc-body { grid-template-columns: 4rem minmax(0, 1fr); gap: var(--space-l); }
  /* 52ch et non 64 : `ch` mesure le zéro (12 px ici), plus large que la
     moyenne des lettres — 64ch laissaient passer ~90 caractères de prose,
     bien au-delà des 65-75 confortables. */
  .acc-body > :first-child { grid-column: 2; max-width: 52ch; }
}
.acc-body p { color: var(--muted); }
.acc-body p + p { margin-top: var(--space-s); }

/* L'ouverture se déploie au lieu d'apparaître d'un coup. */
@media (prefers-reduced-motion: no-preference) {
  .acc-item[open] .acc-body { animation: accIn 320ms var(--ease-out); }
  @keyframes accIn { from { opacity: 0; transform: translateY(-6px); } }
}

/* ==========================================================================
   23. Plan d'accès
   La carte n'est chargée qu'au clic : aucune requête vers un tiers tant que
   le visiteur ne l'a pas demandée. Cohérent avec la politique de
   confidentialité, et zéro octet au chargement initial.
   ========================================================================== */

.map { margin-top: var(--space-l); }

.map-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 22px, var(--paper-3) 22px 23px),
    repeating-linear-gradient(90deg, transparent 0 22px, var(--paper-3) 22px 23px),
    var(--paper-2);
}
@media (max-width: 48rem) { .map-frame { aspect-ratio: 4 / 3; } }

.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.map-load {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-s);
  padding: var(--space-m);
  text-align: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
}
.map-load .pin { color: var(--brass); }
.map-load strong { font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; }
.map-load small { color: var(--muted); max-width: 34ch; }
.map-load .cta {
  margin-top: var(--space-2xs);
  font-size: 0.86rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: 1px solid var(--brass);
  padding-bottom: 2px;
}
.map-load:hover .cta { color: var(--brass); }

.map-links { display: flex; flex-wrap: wrap; gap: var(--space-m); margin-top: var(--space-m); font-size: 0.92rem; }

/* ==========================================================================
   24. Décisions propres au mobile — critère 07
   Le téléphone n'est pas un bureau rétréci : sur petit écran, l'appel et le
   courriel deviennent des actions permanentes, en bas d'écran, à portée de
   pouce. Sur bureau, cette barre n'existe pas.
   ========================================================================== */

.callbar { display: none; }

@media (max-width: 47.99rem) {
  .callbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--ink);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -1px 0 var(--ink-line);
  }
  .callbar a {
    display: flex; align-items: center; justify-content: center; gap: 0.55rem;
    min-height: 56px;
    color: var(--on-ink);
    text-decoration: none;
    font-size: 0.92rem; font-weight: 500;
    letter-spacing: 0.02em;
  }
  .callbar a + a { border-left: 1px solid var(--ink-line); }
  .callbar a:active { background: var(--ink-soft); }

  /* La barre ne doit jamais masquer la fin du contenu. */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }

  /* Cible de pouce : les boutons du héros prennent toute la largeur. */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }

  /* Sur mobile, la fiche méta du héros est du bruit : elle disparaît. */
  .hero-meta { display: none; }
}

/* ==========================================================================
   25. Navigation par ancres — rubrique active
   ========================================================================== */

.nav-link.is-active { color: var(--brass); }
.nav-link.is-active::after { transform: scaleX(1); transform-origin: left center; }

/* ==========================================================================
   26. Portrait sur petit écran — critère 07
   En pleine largeur, un portrait 4:5 occupe presque tout l'écran d'un
   téléphone et repousse la biographie hors de vue. On le borne : il reste
   présent sans confisquer la lecture.
   ========================================================================== */

@media (max-width: 53.99rem) {
  .profile figure { max-width: 19rem; }
  .profile img { aspect-ratio: 1 / 1; object-position: 50% 14%; }
}

/* ==========================================================================
   27. Cibles tactiles — règle UX priorité 2 (44 × 44 px minimum)
   Mesuré sur écran de 375 px : le sélecteur de langue tombait à 34 px et les
   liens du pied de page à 20 px. Au doigt, ces tailles produisent des ratés.
   ========================================================================== */

@media (max-width: 53.99rem) {
  .lang a { min-height: 44px; min-width: 3rem; }
  .brand { min-height: 44px; align-items: center; }

  /* Le pied de page devient une liste tapable, pas une liste à lire. */
  .site-footer ul { gap: 0; }
  .site-footer ul li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 2px;
  }

  /* La case de consentement reste petite, mais son libellé entier est
     cliquable : on garantit la hauteur de la zone active. */
  .consent { min-height: 44px; align-items: center; }
}

/* Téléphone et courriel de la fiche contact : ce sont précisément les liens
   qu'on touche du doigt. (Le lien « politique de confidentialité » reste
   inline dans sa phrase : WCAG 2.5.8 exempte les liens au fil du texte.) */
@media (max-width: 53.99rem) {
  .contact-list dd a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ==========================================================================
   28. Héros « plaque de marque »
   Plus de titre : le monogramme occupe l'écran, avec la seule mention
   « Avocat à la Cour » dessous. Le dynamisme vient de quatre couches —
   entrée, dérive du métal, reflet, et réaction au défilement.
   ========================================================================== */

.hero--lockup {
  --mark-w: clamp(12rem, 38vw, 27rem);
  min-height: 78svh;
  display: grid;
  align-items: center;
  padding-block: var(--space-2xl);
  position: relative;
}

.lockup { text-align: center; margin-inline: auto; width: 100%; }

/* Le halo porte l'ombre. Il enveloppe la marque au lieu de la porter
   directement : `filter` s'applique AVANT `mask`, donc une ombre posée sur
   l'élément masqué suivrait son rectangle, pas la forme des lettres. */
/* Aucun filtre ici. Le `drop-shadow` blanc produisait un halo RECTANGULAIRE :
   le navigateur rastérise le SVG en couche et l'ombre suit la boîte, pas les
   tracés. Le monogramme, désormais plein et contrasté, se passe de renfort. */
.mark-halo { display: inline-block; }

.mark--giant {
  width: clamp(13rem, 42vw, 30rem);
  margin-inline: auto;
  background-size: 240% 240%;
}

/* Le métal respire : la lumière traverse lentement la lettre, en boucle.
   14 s — assez lent pour être ressenti sans jamais attirer l'œil. */
@media (prefers-reduced-motion: no-preference) {
  /* Réservé aux variantes dégradées : rien à faire glisser sur un aplat. */
  .mark--light.mark--giant { animation: metalDrift 14s ease-in-out infinite; }
}
@keyframes metalDrift {
  0%, 100% { background-position: 12% 50%; }
  50%      { background-position: 88% 50%; }
}

/* Entrée : la marque se dévoile de bas en haut, comme un rideau qu'on lève,
   pendant qu'elle se détend. Plus tenu qu'un fondu, et cela laisse le temps de
   lire la forme des lettres. */
/* AUCUN `clip-path` sur ce conteneur.
   Il en portait un — un second dévoilement, redondant avec celui du
   monogramme lui-même. Or un `clip-path` découpe TOUS les descendants à la
   boîte de l'élément qui le porte : l'enfant décalé de 17 px vers la gauche
   pour le centrage optique voyait donc le pied du A rogné. Le dévoilement
   reste assuré par `.mark--reveal`, à l'intérieur ; ici, seuls l'opacité et
   le déplacement jouent. */
.js .mark-halo {
  opacity: 0;
  transform: translateY(14px) scale(0.97);
}
.js .mark-halo.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 700ms var(--ease-out),
    transform 1200ms var(--ease-out);
}

/* Le pointeur enregistré : on adoucit la poursuite pour éviter l'effet nerveux. */
.mark--white { will-change: background; }

/* Un seul <h1>, deux lignes : le nom puis le titre. `.hero .lockup-*` et non
   `.lockup-*` seul — la règle historique `.hero h1` (0-1-1) l'emporterait
   sinon et imposerait --step-4. */
.hero .lockup-heading { display: block; margin: 0; }

.hero .lockup-name {
  display: block;
  margin-top: clamp(1.3rem, 0.9rem + 1.7vw, 2.4rem);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.05rem + 1.5vw, 2.35rem);
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.1;
  color: var(--on-ink);
}

.hero .lockup-title {
  display: block;
  margin-top: clamp(0.6rem, 0.45rem + 0.7vw, 1.05rem);
  font-family: var(--font-body);
  font-size: clamp(0.68rem, 0.58rem + 0.42vw, 0.9rem);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em;           /* compense l'espace final du crénage */
  text-transform: uppercase;
  color: var(--on-ink-soft);
  line-height: 1.4;
}

/* Filet qui se trace sous la mention. */
.lockup-rule {
  display: block;                /* <span> inline = dimensions nulles */
  width: clamp(3rem, 8vw, 6rem);
  height: 1px;
  margin: clamp(1.1rem, 0.8rem + 1vw, 2rem) auto 0;
  background: var(--brass-light);
  transform-origin: center;
}
.js .lockup-rule { transform: scaleX(0); }
.js .lockup-rule.is-in { transform: scaleX(1); transition: transform 900ms var(--ease-out) 500ms; }

/* --- Invite à faire défiler --- */

/* Les deux gouttes encadrent le monogramme, à distance strictement égale de
   chacun de ses bords. L'écartement se calcule sur la largeur du logo, pas sur
   celle de l'écran : le rapport reste identique quelle que soit la fenêtre.
   Celle de gauche porte le lien ; celle de droite est un reflet décoratif. */
.cues {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 4vh, 3rem);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: calc(var(--mark-w) + 4.5rem);   /* logo + marge de part et d'autre */
  z-index: 1;
}

.scroll-cue {
  display: grid;
  place-items: center;
  width: 44px;
  height: 60px;
  color: var(--on-ink-soft);
}

/* Aucun décalage entre les deux : elles tombent ensemble. */
.scroll-cue__line {
  width: 1px;
  height: 42px;
  background: linear-gradient(to bottom, transparent, var(--brass-light));
  transform-origin: top center;
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue__line { animation: cueDrop 2.1s var(--ease-out) infinite; }
}
@keyframes cueDrop {
  0%       { transform: scaleY(0); opacity: 0; }
  35%      { transform: scaleY(1); opacity: 1; }
  70%, 100%{ transform: scaleY(1) translateY(42px); opacity: 0; }
}

/* --- Réaction au défilement -------------------------------------------------
   `animation-timeline: scroll()` aurait permis de tout faire en CSS, sur le
   compositeur. Elle n'est retenue ni ici ni ailleurs : Firefox stable ne la
   gère pas encore, et un héros figé chez une part des visiteurs est un prix
   trop élevé pour l'élégance du procédé.
   À la place, une variable CSS mise à jour dans le rAF du gestionnaire de
   défilement déjà présent : une écriture par image, aucune lecture de
   géométrie, composition au GPU.
   -------------------------------------------------------------------------- */

/* La variable vit sur la SECTION, pas sur le verrou : l'invite de défilement
   est sa sœur et non sa descendante — posée plus bas, elle n'hériterait rien. */
.hero--lockup { --sp: 0; }                   /* progression 0 → 1 */

.lockup {
  transform: translateY(calc(var(--sp) * 14%)) scale(calc(1 - var(--sp) * 0.09));
  opacity: calc(1 - var(--sp) * 0.72);
}

.scroll-cue { opacity: clamp(0, calc(1 - var(--sp) * 3), 1); }

@media (prefers-reduced-motion: reduce) {
  .lockup { transform: none; opacity: 1; }
  .scroll-cue { opacity: 1; }
}

/* Sur téléphone, la marque prend plus de place relative : c'est l'objet, pas
   un ornement. Et l'invite disparaît, le geste y étant évident. */
@media (max-width: 47.99rem) {
  .mark--giant { width: min(62vw, 17rem); }
  .lockup-title { letter-spacing: 0.3em; text-indent: 0.3em; }
  .cues { display: none; }
}

/* ==========================================================================
   29. Pages d'expertise
   Même identité que l'accueil : monochrome, EB Garamond, filets d'un pixel.
   Rien de « SaaS » ici — pas de carte, pas d'ombre, pas de dégradé.
   ========================================================================== */

/* --- Fil d'Ariane : présent pour l'orientation et pour Google, mais il ne
       doit jamais concurrencer le titre. --- */

.crumbs {
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: var(--space-xl);
}
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.crumbs a { color: var(--muted); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.crumbs a:hover { color: var(--ink); }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--border-ui); }
.crumbs [aria-current="page"] { color: var(--ink); }

/* --- Héros de page d'expertise ---
   Sur papier, à l'inverse de la plaque de marque de l'accueil : les deux ne se
   confondent jamais, et l'accueil garde son statut d'ouverture. --- */

.hero--page {
  background: var(--paper);
  color: var(--ink);
  padding-block: var(--space-l) var(--space-3xl);
}
.hero--page .kicker { color: var(--brass); }
.hero--page .kicker::before { background: var(--brass); }

.hero--page h1 {
  font-size: clamp(2.1rem, 1.4rem + 3.1vw, 4.1rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 20ch;
}

.page-sub {
  margin-top: var(--space-m);
  font-size: clamp(0.78rem, 0.7rem + 0.35vw, 0.94rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}

.page-intro { margin-top: var(--space-l); max-width: 54ch; }
.page-intro p { color: var(--muted); font-size: var(--step-1); font-weight: 300; line-height: 1.55; }
.page-intro p + p { margin-top: var(--space-m); }

/* --- Situations traitées : liste éditoriale numérotée ---
   La numérotation et les filets remplacent les cartes. Chaque entrée respire. --- */

.matters { list-style: none; counter-reset: matter; border-top: 1px solid var(--border); }

.matter {
  counter-increment: matter;
  display: grid;
  gap: var(--space-s);
  padding-block: clamp(1.8rem, 1.2rem + 2vw, 3.2rem);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 54rem) {
  .matter { grid-template-columns: 4rem minmax(0, 20rem) minmax(0, 1fr); gap: var(--space-l); align-items: baseline; }
}

.matter::before {
  content: counter(matter, decimal-leading-zero);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}

.matter h2 {
  font-size: clamp(1.32rem, 1.1rem + 0.9vw, 1.85rem);
  font-weight: 500;
  line-height: 1.16;
}
.matter p { color: var(--muted); max-width: 56ch; }
.matter p + p { margin-top: var(--space-s); }

/* --- Bloc « un délai est en cours ? » ---
   Sobre et sérieux : un filet épais à gauche, jamais un encart d'alerte. --- */

.notice {
  display: grid;
  gap: var(--space-s);
  padding: var(--space-l);
  border: 1px solid var(--ink-line);
  border-left-width: 3px;
  background: var(--ink-soft);
  color: var(--on-ink);
  border-radius: var(--radius);
}
@media (min-width: 54rem) {
  .notice { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: var(--space-l); align-items: start; }
}
.notice h2 { font-size: var(--step-2); }
.notice p { color: var(--on-ink-soft); max-width: 62ch; }

/* --- Renvoi vers les autres domaines, en pied de page d'expertise --- */

.siblings { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; }
.siblings a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.35rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.86rem;
  color: var(--muted);
  text-decoration: none;
  background: var(--paper);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.siblings a:hover { color: var(--ink); border-color: var(--border-ui); }

/* --- Pied de page : la colonne des domaines est plus longue que les autres --- */

@media (min-width: 48rem) {
  .footer-grid--seo { grid-template-columns: 1.15fr 1.35fr 1fr 1fr; }
}

/* Libellé « Découvrir » en fin de ligne d'index, à la place de la flèche nue :
   la destination est annoncée, ce qui vaut pour le visiteur comme pour Google. */
.index-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
  white-space: nowrap;
}
.index-link:hover .index-cta { color: var(--ink); }
.index-cta .arrow { transition: transform var(--dur-base) var(--ease-out); }
.index-link:hover .index-cta .arrow { transform: translateX(4px); }
@media (max-width: 47.99rem) { .index-cta span { display: none; } }

/* Le fil d'Ariane doit rester discret à l'œil, mais rester tapable au doigt :
   on agrandit la zone active par le remplissage, sans toucher au corps du
   texte ni à l'interligne visible. */
@media (max-width: 53.99rem) {
  .crumbs a, .crumbs [aria-current="page"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .crumbs ol { gap: 0.25rem 0.5rem; }
}

/* ==========================================================================
   30. LANGAGE DE MOUVEMENT — issu du monogramme
   Toute la chorégraphie descend d'un seul geste : une ligne se trace, puis
   les formes viennent s'y accrocher. C'est la barre du monogramme, prolongée.
   ========================================================================== */

:root {
  /* Courbe unique pour tout le site : départ franc, fin qui se pose.
     Aucun rebond, aucune élasticité. */
  --ease-arch: cubic-bezier(0.16, 1, 0.3, 1);
  --ink-deep: #050505;
}

/* --- 30.1 Le monogramme ------------------------------------------------
   Tracé sérif d'origine, vectorisé. Étant plein et non filaire, il ne se
   « dessine » pas au trait : il se dévoile par balayage vertical, geste plus
   juste pour une lettre à pleins et déliés — et plus élégant. ------------- */

.js .mark--reveal { clip-path: inset(100% 0 0 0); }
.js .mark--reveal.is-drawn {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1100ms var(--ease-arch);
}

/* --- 30.2 Intro — surimpression, jamais bloquante ------------------------
   Le héros est déjà dans le DOM et déjà peint. Cette couche se pose par-dessus
   puis s'efface : à aucun moment on n'attend un chargement pour afficher le
   contenu. Sans JavaScript, elle n'apparaît même pas.
   ------------------------------------------------------------------------ */

.intro {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(1.6rem, 1rem + 2.4vw, 3rem);
  background: var(--ink-deep);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.js .intro.is-playing { opacity: 1; visibility: visible; }

/* Sortie : la couche s'ouvre vers le haut. Le héros n'apparaît pas — il était
   déjà là ; c'est le voile qui se retire. */
.js .intro.is-leaving {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 820ms var(--ease-arch);
}

.intro-mark { width: clamp(8rem, 6rem + 13vw, 15rem); }
.intro-ag { width: 100%; }

.intro-words { text-align: center; }

/* Masque typographique : le texte monte depuis sous la ligne, il n'apparaît
   pas en fondu. C'est le geste demandé — translateY(105%) → 0. */
.line-mask { overflow: hidden; display: block; }
.line-mask > span { display: block; will-change: transform; }
.js .intro .line-mask > span { transform: translateY(105%); }
.js .intro.is-playing .line-mask > span { transform: translateY(0); }

.intro-name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.5rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.intro-role {
  margin-top: 0.55rem;
  font-size: clamp(0.62rem, 0.56rem + 0.3vw, 0.78rem);
  font-weight: 500;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  text-transform: uppercase;
  color: #A0A0A0;
}
.js .intro.is-playing .intro-name span { transition: transform 820ms var(--ease-arch) 900ms; }
.js .intro.is-playing .intro-role span { transition: transform 820ms var(--ease-arch) 1060ms; }

/* --- 30.3 Héros : la marque géante, en contour --------------------------
   Contour et non aplat : la forme structure l'espace sans peser dessus.
   Elle déborde volontairement du cadre — on n'en voit qu'une partie. ------- */

/* Le monogramme du héros — même variable que l'écartement des gouttes. */
.mark--giant { width: var(--mark-w); margin-inline: auto; }

/* Écho de fin de page — contour seul, débordant du cadre.
   Même dessin, autre densité : la page se referme sur son ouverture. */
#contact { position: relative; overflow: hidden; }
.section-ghost {
  position: absolute;
  top: 50%;
  right: -18%;
  width: clamp(26rem, 54vw, 52rem);
  transform: translateY(-46%);
  color: rgba(11, 11, 12, 0.055);
  pointer-events: none;
  z-index: 0;
}
.ghost-ag { width: 100%; background: currentColor; }
#contact .shell { position: relative; z-index: 1; }

@media (max-width: 53.99rem) {
  .section-ghost { right: -38%; width: 34rem; }
}

.hero--lockup .shell { position: relative; z-index: 1; }

/* --- 30.4 Familles d'animation au scroll --------------------------------- */

/* TYPE 01 — révélation par masque, pour les grands titres.
   Le dévoilement passe par `clip-path` et non par `overflow: hidden`. La
   raison n'est pas esthétique : un élément dont le débordement est masqué
   n'expose plus la ligne de base de son texte — il en synthétise une à partir
   de sa boîte. La grille ne pouvait donc plus caler le repère de section sur
   la ligne du titre. `clip-path` produit le même geste sans toucher aux
   métriques typographiques. */
.js [data-anim="mask"] > * {
  display: block;
  clip-path: inset(0 0 105% 0);
  transform: translateY(28%);
}
.js [data-anim="mask"].is-in > * {
  clip-path: inset(0 0 -25% 0);
  transform: translateY(0);
  transition: clip-path 900ms var(--ease-arch), transform 900ms var(--ease-arch);
}

/* TYPE 02 — lignes indépendantes, réservé aux titres majeurs. */
.js [data-anim="lines"] .line-mask > span { transform: translateY(105%); }
.js [data-anim="lines"].is-in .line-mask > span {
  transform: translateY(0);
  transition: transform 900ms var(--ease-arch);
}
.js [data-anim="lines"].is-in .line-mask:nth-child(2) > span { transition-delay: 90ms; }
.js [data-anim="lines"].is-in .line-mask:nth-child(3) > span { transition-delay: 180ms; }

/* TYPE 03 — la ligne se déploie depuis la gauche. C'est la barre du
   monogramme qui se prolonge dans la page. */
.js [data-anim="line"] { transform: scaleX(0); transform-origin: left center; }
.js [data-anim="line"].is-in {
  transform: scaleX(1);
  transition: transform 900ms var(--ease-arch);
}

/* TYPE 04 — le numéro précède le titre : numéro → ligne → titre → texte. */
.js [data-anim="num"] { opacity: 0; transform: translateY(8px); }
.js [data-anim="num"].is-in {
  opacity: 1; transform: none;
  transition: opacity 500ms var(--ease-arch), transform 500ms var(--ease-arch);
}

/* --- 30.5 Barre de navigation : elle se rétracte, la marque s'installe --- */

.site-header { --nav-h: 6rem; }
.nav { min-height: var(--nav-h); transition: min-height 420ms var(--ease-arch); }
.site-header.is-stuck { --nav-h: 4.5rem; }

/* La marque de la barre reste visible en permanence, y compris en haut de
   l'accueil : le visiteur doit pouvoir lire le nom et le titre à tout moment,
   sans avoir à faire défiler. */

/* --- 30.6 Index des domaines : survol travaillé -------------------------- */

.index-item { position: relative; }

/* Filet qui se trace sous l'entrée survolée. */
.index-item::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 460ms var(--ease-arch);
}
.index-item:hover::after,
.index-item:focus-within::after { transform: scaleX(1); }

@media (hover: hover) {
  .index-link .index-num { transition: opacity 460ms var(--ease-arch); opacity: 0.75; }
  .index-link:hover .index-num { opacity: 1; }
  .index-link .index-title { transition: transform 460ms var(--ease-arch); }
  .index-link:hover .index-title { transform: translateX(8px); }
  .index-link .index-desc { transition: opacity 460ms var(--ease-arch); }
  .index-link:hover .index-desc { opacity: 0.62; }
}

/* --- 30.7 Mouvement réduit : on garde l'information, on retire le geste --- */

@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important; }
  .js .mark--reveal { clip-path: none !important; }
  .js [data-anim] > *,
  .js [data-anim] .line-mask > span { transform: none !important; }
  .js [data-anim="line"] { transform: none !important; }
  .js [data-anim="num"] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   31. ANIMATION D'ARRIÈRE-PLAN — la lumière sur le noir
   Ce qui rend l'accueil vivant n'est pas un élément qui bouge, c'est le fond
   lui-même : deux nappes de lumière très faibles dérivent lentement sur des
   trajectoires différentes. À l'œil, la surface respire, comme une lumière
   qui se déplace sur de la pierre. Aucune forme n'est identifiable, rien ne
   clignote, rien n'attire l'attention.

   Coût : deux couches composées par le GPU (`transform` seul, jamais de
   `background-position` qui forcerait un repeint). Le fil principal ne fait
   rien pendant l'animation.
   ========================================================================== */

.hero--lockup { position: relative; overflow: hidden; }

.glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

/* Nappe haute, large et froide : elle balaie la diagonale. */
.glow--a {
  top: -30%; left: -18%;
  width: 78vw; height: 78vw;
  background: radial-gradient(circle,
    rgba(255,255,255,0.085) 0%,
    rgba(255,255,255,0.038) 34%,
    rgba(255,255,255,0) 68%);
}

/* Nappe basse, plus resserrée : elle croise la première sans jamais la doubler. */
.glow--b {
  bottom: -34%; right: -14%;
  width: 62vw; height: 62vw;
  background: radial-gradient(circle,
    rgba(255,255,255,0.07) 0%,
    rgba(255,255,255,0.028) 38%,
    rgba(255,255,255,0) 70%);
}

@media (prefers-reduced-motion: no-preference) {
  .glow--a { animation: driftA 34s ease-in-out infinite; }
  .glow--b { animation: driftB 27s ease-in-out infinite; }
}

/* Amplitudes volontairement faibles : on doit sentir que ça bouge sans
   pouvoir dire ce qui bouge. Durées premières entre elles pour que les deux
   nappes ne retombent jamais en phase. */
@keyframes driftA {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(9vw, 7vh, 0) scale(1.12); }
}
@keyframes driftB {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.06); }
  50%      { transform: translate3d(-8vw, -6vh, 0) scale(1); }
}

/* Le contenu passe devant les nappes. */
.hero--lockup .shell,
.hero--lockup .scroll-cue { position: relative; z-index: 1; }

/* Sur téléphone, les nappes sont réduites : moins de surface à composer, et
   le contraste du texte reste franc sur un écran souvent vu en plein soleil. */
@media (max-width: 47.99rem) {
  .glow--a { width: 110vw; height: 110vw; }
  .glow--b { width: 96vw; height: 96vw; }
}

/* ==========================================================================
   32. Plan d'accès en noir et blanc
   L'iframe Google Maps n'accepte aucun paramètre de style : impossible de lui
   demander une carte monochrome. Le filtre est donc appliqué côté navigateur,
   sur l'élément lui-même — le rendu reste celui de Google, désaturé.

   `grayscale(1)` supprime la couleur ; le léger gain de contraste et la
   luminosité compensent l'aplatissement que produit toujours une désaturation,
   sinon la carte paraîtrait laiteuse à côté du reste de la page.
   ========================================================================== */

.map-frame iframe {
  filter: grayscale(1) contrast(1.06) brightness(1.02);
}

/* Le cadre d'attente adopte la même retenue : quadrillage plus discret et
   fond légèrement plus froid, pour annoncer la carte qui va s'afficher. */
.map-frame {
  background:
    repeating-linear-gradient(0deg, transparent 0 22px, var(--paper-3) 22px 23px),
    repeating-linear-gradient(90deg, transparent 0 22px, var(--paper-3) 22px 23px),
    var(--paper-2);
}

/* Au survol du cadre, la carte reprend une pointe de vie sans jamais
   retrouver ses couleurs. Uniquement au pointeur : sur mobile, rien. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .map-frame iframe { transition: filter 600ms var(--ease-arch); }
  .map-frame:hover iframe { filter: grayscale(1) contrast(1.12) brightness(1.05); }
}

/* ==========================================================================
   33. Contact par courriel
   Le formulaire a été retiré : sur un site statique, il transiterait par un
   prestataire tiers, ce qui est inacceptable pour des informations couvertes
   par le secret professionnel. Le courriel va directement du client à
   l'avocat, sans intermédiaire.

   L'adresse devient donc l'élément principal de la section, traitée en
   typographie de titrage plutôt qu'en lien discret.
   ========================================================================== */

.write { max-width: 46rem; }

.write-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: var(--space-s);
}

.mailto {
  display: inline-block;
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.28rem, 0.95rem + 1.9vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.15;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 0.12em;
  word-break: break-word;      /* l'adresse ne doit jamais déborder */
}

/* Le trait se retire par la droite puis revient par la gauche : le même geste
   que les filets de section, appliqué à l'échelle d'un lien. */
.mailto::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: right center;
  transition: transform 520ms var(--ease-arch);
}
.mailto:hover::after,
.mailto:focus-visible::after { transform: scaleX(0); }

.write-tel {
  margin-top: var(--space-m);
  font-size: var(--step-1);
  font-weight: 300;
  color: var(--muted);
}
.write-tel a { color: var(--ink); text-decoration-color: var(--border-ui); }
.write-tel a:hover { text-decoration-color: var(--ink); }

/* Ce qu'il est utile de faire figurer dans le message. */
.write-guide {
  list-style: none;
  counter-reset: guide;
  margin-top: var(--space-xl);
  border-top: 1px solid var(--border);
}
.write-guide li {
  counter-increment: guide;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: var(--space-s);
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}
.write-guide li::before {
  content: counter(guide, decimal-leading-zero);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
  padding-top: 0.35em;
}
.write-guide strong { color: var(--ink); font-weight: 500; }

.write-note {
  margin-top: var(--space-l);
  font-size: 0.84rem;
  color: var(--muted);
  max-width: 58ch;
}

/* Le téléphone répond au courriel : même traitement typographique, une échelle
   en dessous. Chaque canal n'apparaît plus qu'une fois dans la section — le
   courriel à gauche, le téléphone à droite. */
.telto {
  display: inline-block;
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.7rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 0.12em;
  white-space: nowrap;
}
.telto::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: right center;
  transition: transform 520ms var(--ease-arch);
}
.telto:hover::after,
.telto:focus-visible::after { transform: scaleX(0); }

.aside-hours {
  margin-top: var(--space-s);
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.55;
}

/* ==========================================================================
   34. Centrage optique du monogramme
   Mesure faite sur le tracé : le centre de MASSE de l'encre se situe 4,3 % de
   la largeur à droite du centre de sa boîte — le A est un triangle, le G un
   disque, leurs masses ne se répartissent pas de la même façon. Centrer la
   boîte laissait donc le logo visuellement décalé à droite du nom placé
   dessous. On compense d'autant.

   `translateX` et non `margin` : le pourcentage porte alors sur la largeur de
   l'élément lui-même, pas sur celle du parent.
   ========================================================================== */

/* Le décalage vit sur un élément qui ne porte AUCUN `clip-path`.
   Là où les deux cohabitent, le navigateur découpe à la position d'origine de
   la boîte : l'élément déplacé perd alors sa marge gauche, et le pied du A
   disparaissait. Le monogramme et son conteneur portant tous deux un
   dévoilement par `clip-path`, il faut un troisième élément, dédié. */
.mark-optical { display: block; transform: translateX(-4.3%); }

/* La marque de l'en-tête et celle du pied sont trop petites pour que l'écart
   se perçoive, et un décalage y romprait l'alignement avec le nom. */

/* ==========================================================================
   35. Texte justifié
   Justifier sans césure produit des « rivières » : de larges blancs qui
   traversent le paragraphe. `hyphens: auto` les évite en autorisant la coupure
   des mots — l'attribut `lang` de chaque page fournit le dictionnaire.

   La justification est réservée au texte courant. Les titres, les chapeaux et
   les listes courtes restent alignés à gauche : sur une ligne brève, elle
   creuse des écarts au lieu de les résorber.
   ========================================================================== */

.prose p,
.bio p,
.matter p,
.acc-body p,
.page-intro p,
.write-note {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Sous 48rem la colonne devient trop étroite : la justification y creuse des
   trous qu'aucune césure ne rattrape. On repasse au fer à gauche. */
@media (max-width: 47.99rem) {
  .prose p,
  .bio p,
  .matter p,
  .acc-body p,
  .page-intro p,
  .write-note {
    text-align: left;
    hyphens: manual;
    -webkit-hyphens: manual;
  }
}

/* ==========================================================================
   36. Respiration sous les titres de section
   Mesuré : le chapeau démarrait exactement au bas du titre — 0 px. Les
   descendantes du titre venaient donc frôler les ascendantes de la ligne
   suivante. Un titre de 3 rem appelle un intervalle proportionné, pas nul.

   L'écart suit l'échelle typographique : il grandit avec le titre.
   ========================================================================== */

.sec-title + .lede,
.sec-title + div > .lede { margin-top: clamp(0.9rem, 0.6rem + 1.1vw, 1.6rem); }

/* Même souffle avant un groupe de boutons ou un paragraphe qui suit
   directement un titre de section. */
.sec-title + .hero-actions,
.sec-title + p { margin-top: clamp(0.9rem, 0.6rem + 1.1vw, 1.6rem); }

/* Sur les pages d'expertise, le sous-titre en petites capitales et le titre
   de situation méritent le même traitement. */
.matter h2 + div,
.matter h2 + p { margin-top: clamp(0.55rem, 0.4rem + 0.6vw, 0.9rem); }