/* ==========================================================================
   OD AVOCAT — Feuille de style
   Conforme à la charte graphique définitive (juillet 2026)
   Fond ivoire · angles vifs · or en ponctuation · Jost + Cormorant Garamond
   ========================================================================== */

:root {
  --ivoire: #FBFAF7;
  --vert: #2A3B32;
  --vert-nuit: #16241D;
  --anthracite: #3B3937;
  --or-profond: #9C7C38;
  --or-clair: #C6A465;
  --pierre: #E7E2D7;
  --noir: #000000;

  --font-lineale: "Jost", "Century Gothic", "Avenir Next", sans-serif;
  --font-garalde: "Cormorant Garamond", "Garamond", "EB Garamond", serif;

  --tracking-nav: 0.20em;
  --tracking-mentions: 0.14em;

  --w-max: 1320px;
  --w-text: 760px;
}

/* --- Réinitialisation ---------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  overscroll-behavior-x: none;
}
body {
  overflow-x: clip;
  overscroll-behavior-x: none;
}

body {
  font-family: var(--font-lineale);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.75;
  color: var(--anthracite);
  background: var(--ivoire);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Angles vifs par défaut — seuls les boutons s'arrondissent (décision cliente, juillet 2026) */
:where(*) { border-radius: 0; }
.btn, .nav-toggle, .site-nav .nav-cta a, .journal-filter a { border-radius: 999px; }
.btn { padding: 0.95rem 2.6rem; }

/* --- Typographie ---------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--font-garalde);
  font-weight: 300;
  line-height: 1.15;
  color: var(--anthracite);
}

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.65rem); }

p + p { margin-top: 1em; }

a {
  color: var(--or-profond);
  text-decoration: none;
}
a:hover, a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--or-profond);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

strong { font-weight: 400; }

.overline + h1, .overline + h2 { margin-top: 0.9rem; }

/* Intertitre / surtitre — Jost 400 capitales, or profond */
.overline {
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--or-profond);
}

/* Filet or — un seul trait, fondu sur ses bords, d'un or lumineux */
.filet {
  width: 92px;
  height: 2px;
  border: 0;
  background: radial-gradient(50% 140% at 50% 50%, rgba(234, 211, 151, 0.95) 0%, rgba(198, 164, 101, 0.75) 38%, rgba(156, 124, 56, 0) 96%);
  margin: 1.7rem 0;
}
.band-dark .filet, .band-anthracite .filet {
  background: radial-gradient(50% 140% at 50% 50%, rgba(240, 220, 165, 0.95) 0%, rgba(198, 164, 101, 0.8) 38%, rgba(198, 164, 101, 0) 96%);
}
.filet--center { margin-left: auto; margin-right: auto; }

/* Le héros garde son filet lumineux d'origine — intouchable */
.hero .filet, .page-hero .filet { border: 0; height: 2px; background: none; }
.hero .filet {
  background: linear-gradient(90deg, rgba(198, 164, 101, 0) 0%, var(--or-clair) 9%, #EAD397 42%, var(--or-clair) 88%, rgba(198, 164, 101, 0) 100%);
  clip-path: polygon(0% 22%, 100% 45%, 100% 55%, 0% 76%);
}
.hero .filet::after { content: none; }
.page-hero .filet { background: linear-gradient(90deg, var(--or-clair), rgba(198, 164, 101, 0)); }
.page-hero .filet::after { content: none; }

/* --- Justification — corps de texte à gauche uniquement -------------------- */

.two-col p:not(.pull-quote):not(.nom):not(.titre):not(.overline),
.article__body p,
.faq__answer,
.notice p,
.band-dark__inner p,
.card:not(.card--domaine):not(.post-card) p,
.section-head:not(.section-head--center) p,
.page-hero__lede {
  text-align: justify;
  hyphens: none;
  -webkit-hyphens: none;
}

/* --- Structure ------------------------------------------------------------ */

.container {
  width: min(var(--w-max), 100% - clamp(2rem, 6vw, 5rem));
  margin-inline: auto;
}

.container--narrow { width: min(var(--w-text), 100% - 3rem); }

section { padding: 6.5rem 0; }

.section-head { max-width: var(--w-text); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: 0.6rem; }
/* Césure de titre réservée au téléphone */
.br-mobile { display: none; }
@media (max-width: 900px) { .br-mobile { display: inline; } }
.section-head p { margin-top: 1.2rem; }

/* --- Accessibilité -------------------------------------------------------- */

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--anthracite);
  color: var(--ivoire);
  padding: 0.6rem 1.2rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 1px solid var(--or-profond); outline-offset: 3px; }

/* --- Boutons — filet 0,5 pt · capitales · jamais d'aplat ------------------ */

.btn {
  display: inline-block;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--anthracite);
  background: transparent;
  border: 1px solid rgba(59, 57, 55, 0.45);
  padding: 0.95rem 2.2rem;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.btn:hover, .btn:focus-visible {
  text-decoration: none;
  border-color: var(--or-profond);
  color: var(--or-profond);
  background: rgba(198, 164, 101, 0.07);
}

/* Reflet doré traversant — tous les boutons du site */
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -85%;
  width: 55%;
  background: linear-gradient(100deg, transparent, rgba(198, 164, 101, 0.3), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}
.btn:hover::after, .btn:focus-visible::after { left: 130%; }

/* Sur les fonds sombres, le reflet s'éclaircit */
.btn--dark::after, .hero .btn::after, .page-hero .btn::after, .band-dark .btn::after, .band-anthracite .btn::after, .site-footer .btn::after {
  background: linear-gradient(100deg, transparent, rgba(234, 211, 151, 0.22), transparent);
}

.btn--or {
  border-color: var(--or-profond);
  color: var(--or-profond);
}
.btn--or:hover, .btn--or:focus-visible {
  border-color: var(--anthracite);
  color: var(--anthracite);
}

/* Sur fond sombre */
.btn--dark {
  color: var(--ivoire);
  border-color: rgba(251, 250, 247, 0.5);
}
.btn--dark:hover, .btn--dark:focus-visible {
  border-color: var(--or-clair);
  color: var(--or-clair);
}

/* --- Bandeau / en-tête ----------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 250, 247, 0.97);
  border-bottom: 1px solid var(--pierre);
}

.site-header .container {
  width: 100%;
  max-width: none;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.1rem clamp(1.2rem, 2.5vw, 2.8rem);
}

.site-header__logo img { height: 44px; width: auto; }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  list-style: none;
}
/* Fenêtres bureau étroites : la navigation se resserre sans jamais se briser */
@media (min-width: 901px) and (max-width: 1190px) {
  .site-nav > ul { gap: 1.3rem; }
  .site-nav > ul > li > a { white-space: nowrap; }
}
@media (min-width: 1025px) {
  .site-nav > ul > li > a,
  .nav-cta a { white-space: nowrap; }
}

.site-nav a {
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--anthracite);
  padding: 0.4rem 0;
}
.site-nav a:hover, .site-nav a:focus-visible {
  color: var(--or-profond);
  text-decoration: none;
}
.site-nav a[aria-current="page"] {
  color: var(--or-profond);
  border-bottom: 1px solid var(--or-profond);
}

.site-nav .nav-cta { display: flex; align-items: center; }
.site-nav .nav-cta a {
  display: inline-block;
  line-height: 1;
  border: 1px solid var(--or-profond);
  color: var(--or-profond);
  padding: 0.72rem 1.35rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.35s ease, color 0.35s ease, background 0.35s ease;
}
.site-nav .nav-cta a:hover {
  color: var(--anthracite);
  border-color: var(--anthracite);
  background: rgba(198, 164, 101, 0.08);
}
.site-nav .nav-cta a::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -85%;
  width: 55%;
  background: linear-gradient(100deg, transparent, rgba(198, 164, 101, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}
.site-nav .nav-cta a:hover::after, .site-nav .nav-cta a:focus-visible::after { left: 130%; }

/* Sous-menu déroulant (Domaines) */
.has-sub { position: relative; }
.has-sub > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 0.65rem;
  margin-bottom: 2px;
  border-right: 1px solid var(--or-profond);
  border-bottom: 1px solid var(--or-profond);
  /* translate en repere tourne de 45 deg : (-1.5,-1.5) = ~2px plein haut a l'ecran */
  transform: rotate(45deg) translate(-1.5px, -1.5px);
  vertical-align: middle;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.has-sub:hover > a::after, .has-sub:focus-within > a::after {
  transform: rotate(225deg) translate(-1px, -1px);
}
.submenu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 340px;
  background:
    linear-gradient(180deg, rgba(7, 14, 10, 0.5) 0%, rgba(7, 14, 10, 0) 60%),
    linear-gradient(158deg, var(--vert-nuit) 0%, #273730 60%, #1B2721 100%);
  border-top: 1px solid rgba(198, 164, 101, 0.6);
  padding: 1rem 0 0.6rem;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.35s;
  box-shadow: 0 30px 60px rgba(10, 18, 14, 0.35);
}
/* Pont invisible entre l'onglet et le panneau — le survol ne se rompt pas */
.submenu::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  height: 15px;
}
.has-sub:hover .submenu, .has-sub:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.site-nav ul.submenu { display: block; gap: 0; }
.submenu li { width: 100%; }
.submenu li + li a { border-top: 1px solid rgba(251, 250, 247, 0.07); }
.submenu a {
  display: flex;
  align-items: center;
  padding: 0.85rem 1.6rem;
  font-size: 0.72rem;
  white-space: nowrap;
  color: rgba(251, 250, 247, 0.88);
  transition: color 0.3s ease, padding-left 0.3s ease;
}
/* Le filet d'or qui s'étire au survol — la ponctuation de la charte */
.submenu a::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--or-clair);
  opacity: 0.55;
  margin-right: 0.9rem;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.submenu a:hover, .submenu a:focus-visible {
  color: var(--or-clair);
  text-decoration: none;
}
.submenu a:hover::before, .submenu a:focus-visible::before {
  width: 28px;
  opacity: 1;
}
.submenu .submenu__all {
  margin-top: 0.4rem;
  border-top: 1px solid rgba(198, 164, 101, 0.35) !important;
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: var(--or-clair);
  letter-spacing: 0.24em;
}

/* Menu mobile */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(59, 57, 55, 0.45);
  padding: 0.5rem 0.9rem;
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--anthracite);
  cursor: pointer;
}

@media (max-width: 1024px) {
  .nav-toggle { display: block; }

  /* Aucune animation dans le menu mobile : stabilité absolue */
  .site-nav, .site-nav *, .site-nav *::before, .site-nav *::after {
    transition: none !important;
    animation: none !important;
  }

  /* Un seul écrin : le panneau vert chancellerie, du premier au dernier onglet */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    background:
      linear-gradient(180deg, rgba(7, 14, 10, 0.5) 0%, rgba(7, 14, 10, 0) 45%),
      linear-gradient(158deg, var(--vert-nuit) 0%, #273730 60%, #1B2721 100%);
    border-top: 1px solid rgba(198, 164, 101, 0.55);
    border-bottom: 1px solid rgba(198, 164, 101, 0.3);
    box-shadow: 0 30px 60px rgba(10, 18, 14, 0.4);
  }
  .site-nav.is-open { display: block; }

  .site-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0.45rem 1.5rem 1.5rem;
  }
  .site-nav li { width: 100%; border-top: 1px solid rgba(251, 250, 247, 0.08); }
  .site-nav li:first-child { border-top: 0; }

  .site-nav a {
    display: block;
    padding: 0.78rem 0;
    color: rgba(251, 250, 247, 0.9);
  }
  .site-nav a:hover, .site-nav a:focus-visible { color: var(--or-clair); }
  .site-nav a[aria-current="page"] { color: var(--or-clair); border-bottom: 0; }
  .site-nav > ul > li > a::before { content: none; }

  /* Les matières : même panneau, simple retrait le long d'un filet d'or */
  .submenu,
  .has-sub:hover .submenu,
  .has-sub:focus-within .submenu {
    position: static;
    transform: none;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0 0 0 1.2rem;
    margin: 0 0 0 0.15rem;
    border-left: 1px solid rgba(198, 164, 101, 0.45);
    max-height: 0;
    overflow: hidden;
  }
  /* le padding du panneau (.site-nav ul) ne s'applique pas au sous-menu replie */
  .site-nav ul.submenu { padding: 0 0 0 1.2rem; }
  .site-nav .has-sub.est-ouvert ul.submenu { padding: 0.1rem 0 0.9rem 1.2rem; }
  /* Accordeon : seule animation permise du menu — le depliage des matieres */
  .site-nav .submenu {
    transition: max-height 0.5s cubic-bezier(0.33, 0, 0.2, 1), padding 0.5s cubic-bezier(0.33, 0, 0.2, 1), margin 0.5s cubic-bezier(0.33, 0, 0.2, 1) !important;
  }
  .has-sub.est-ouvert .submenu {
    max-height: 26rem;
    padding: 0.1rem 0 0.65rem 1.2rem;
    margin-bottom: 0.25rem;
  }
  .submenu::before { content: none; }
  .submenu li, .submenu li + li a { border-top: 0; }
  .submenu a {
    padding: 0.55rem 0;
    font-size: 0.68rem;
    color: rgba(251, 250, 247, 0.72);
    white-space: normal;
  }
  .submenu a::before { background: var(--or-clair); opacity: 0.55; flex-shrink: 0; width: 12px; }
  .submenu a:hover, .submenu a:focus-visible { color: var(--or-clair); }
  .submenu .submenu__all {
    color: var(--or-clair);
    border-top: 0 !important;
    margin-top: 0.3rem;
    padding-top: 0.6rem;
    padding-bottom: 0;
    letter-spacing: 0.24em;
  }

  /* Le bouton : or clair sur la profondeur, comme dans le héros */
  .site-nav .nav-cta { margin-top: 1rem; border-top: 0; }
  .site-nav .nav-cta a {
    display: block;
    text-align: center;
    color: var(--or-clair);
    border-color: rgba(198, 164, 101, 0.75);
    border-radius: 999px;
    padding: 0.8rem 1.8rem;
  }
  .site-nav .nav-cta a:hover { color: var(--ivoire); border-color: var(--ivoire); }

  /* Le chevron d'or : il pivote quand les matieres se deplient */
  .has-sub > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .has-sub > a::after {
    display: inline-block;
    border-color: var(--or-clair);
    margin-right: 4px;
    transform: rotate(45deg) translate(-1.5px, -1.5px);
  }
  .site-nav .has-sub > a::after { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important; }
  .has-sub.est-ouvert > a::after { transform: rotate(225deg) translate(-1px, -1px); }
}

/* --- Héros ------------------------------------------------------------------ */

.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 8.5rem 0 9rem;
  background:
    linear-gradient(180deg, rgba(7, 14, 10, 0.76) 0%, rgba(7, 14, 10, 0.36) 28%, rgba(7, 14, 10, 0) 54%),
    radial-gradient(90rem 42rem at 50% 118%, rgba(198, 164, 101, 0.17), transparent 62%),
    radial-gradient(70rem 34rem at 12% -12%, rgba(0, 0, 0, 0.46), transparent 55%),
    radial-gradient(60rem 30rem at 95% 8%, rgba(0, 0, 0, 0.32), transparent 55%),
    linear-gradient(158deg, var(--vert-nuit) 0%, #273730 46%, #202E27 78%, var(--vert-nuit) 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 220% 220%;
  border-bottom: 1px solid rgba(198, 164, 101, 0.35);
}

/* Poussières d'or en lente ascension — l'atmosphère d'un lieu précieux */
.hero__dust {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% + 780px);
  pointer-events: none;
  opacity: 0.65;
  will-change: transform;
  background-image:
    radial-gradient(1.8px 1.8px at 40px 700px, rgba(234, 211, 151, 0.9), transparent 100%),
    radial-gradient(1.2px 1.2px at 150px 520px, rgba(198, 164, 101, 0.8), transparent 100%),
    radial-gradient(2.2px 2.2px at 260px 640px, rgba(234, 211, 151, 0.6), transparent 100%),
    radial-gradient(1px 1px at 330px 380px, rgba(251, 250, 247, 0.7), transparent 100%),
    radial-gradient(1.5px 1.5px at 90px 250px, rgba(198, 164, 101, 0.65), transparent 100%),
    radial-gradient(1.1px 1.1px at 240px 120px, rgba(234, 211, 151, 0.55), transparent 100%),
    radial-gradient(1.7px 1.7px at 380px 200px, rgba(198, 164, 101, 0.5), transparent 100%),
    radial-gradient(2px 2px at 190px 60px, rgba(234, 211, 151, 0.7), transparent 100%),
    radial-gradient(1.3px 1.3px at 415px 450px, rgba(251, 250, 247, 0.55), transparent 100%);
  background-size: 440px 780px;
}

/* Second voile de poussières, plus fines et plus lentes — la profondeur de champ */
.hero__dust::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% + 920px);
  opacity: 0.55;
  will-change: transform;
  background-image:
    radial-gradient(1px 1px at 60px 820px, rgba(234, 211, 151, 0.7), transparent 100%),
    radial-gradient(0.8px 0.8px at 210px 560px, rgba(198, 164, 101, 0.6), transparent 100%),
    radial-gradient(1.2px 1.2px at 350px 700px, rgba(251, 250, 247, 0.5), transparent 100%),
    radial-gradient(0.9px 0.9px at 470px 300px, rgba(234, 211, 151, 0.55), transparent 100%),
    radial-gradient(1.1px 1.1px at 140px 160px, rgba(198, 164, 101, 0.5), transparent 100%),
    radial-gradient(1px 1px at 300px 90px, rgba(234, 211, 151, 0.5), transparent 100%);
  background-size: 540px 920px;
}

/* Halo d'âtre derrière le titre — une chaleur qui respire */
.hero__content::before {
  content: "";
  position: absolute;
  top: -8%;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, 92vw);
  height: 75%;
  background: radial-gradient(closest-side, rgba(198, 164, 101, 0.10), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* Grain — matière fine sur la profondeur */
.hero::before, .page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(251, 250, 247, 0.05) 0 1px, transparent 1px 120px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.022;
  pointer-events: none;
}

/* Filet d'or en tête de héros — les filets courent jusqu'aux marges (fronton) */
.hero::after, .page-hero::after {
  content: "";
  position: absolute;
  top: 2.2rem;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 2%, rgba(198, 164, 101, 0.55) 18%, rgba(198, 164, 101, 0.15) 50%, rgba(198, 164, 101, 0.55) 82%, transparent 98%);
}

/* Mot en or — dégradé doré texturé, scintillement lent */
.hero em, .page-hero em, .accent-or, .invitation__coeur h2 em {
  font-style: italic;
  background: linear-gradient(105deg, #8F6F2E 0%, #C6A465 28%, #EAD397 50%, #C6A465 72%, #8F6F2E 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero h1 {
  color: var(--ivoire);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.08;
  text-shadow: 0 2px 34px rgba(0, 0, 0, 0.38);
}
.hero .overline { color: var(--or-clair); }
.hero .filet {
  width: 140px;
  height: 3px;
  background: linear-gradient(90deg, rgba(198, 164, 101, 0) 0%, var(--or-clair) 9%, #EAD397 42%, var(--or-clair) 88%, rgba(198, 164, 101, 0) 100%);
  clip-path: polygon(0% 22%, 100% 45%, 100% 55%, 0% 76%);
}
.hero__lede { color: rgba(251, 250, 247, 0.88); }
.hero .btn {
  color: var(--ivoire);
  border-color: rgba(251, 250, 247, 0.45);
}
.hero .btn:hover, .hero .btn:focus-visible {
  color: var(--or-clair);
  border-color: var(--or-clair);
  background: rgba(198, 164, 101, 0.08);
}

.hero .btn--or { color: var(--or-clair); border-color: var(--or-clair); }
.hero .btn--or:hover, .hero .btn--or:focus-visible {
  color: var(--ivoire);
  border-color: var(--ivoire);
  background: rgba(198, 164, 101, 0.08);
}
.hero .btn, .page-hero .btn { transition: border-color 0.35s ease, color 0.35s ease, background 0.35s ease; }

.hero__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, 80vw);
  opacity: 0.085;
  pointer-events: none;
  user-select: none;
}

.hero__content { position: relative; }

.hero h1 { max-width: 18em; margin: 1.4rem auto 0; }

.hero__lede {
  max-width: 38em;
  margin: 0 auto 2.4rem;
  font-size: 1.05rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* Héros interne (pages secondaires) */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 6.2rem 0 5.2rem;
  background:
    linear-gradient(180deg, rgba(7, 14, 10, 0.66) 0%, rgba(7, 14, 10, 0.28) 32%, rgba(7, 14, 10, 0) 58%),
    radial-gradient(80rem 36rem at 88% 130%, rgba(198, 164, 101, 0.16), transparent 60%),
    radial-gradient(60rem 30rem at 8% -20%, rgba(0, 0, 0, 0.44), transparent 55%),
    linear-gradient(158deg, var(--vert-nuit) 0%, #273730 52%, #1B2721 100%);
  border-bottom: 1px solid rgba(198, 164, 101, 0.35);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero .hero__dust { opacity: 0.4; }
.page-hero h1 { color: var(--ivoire); }
.page-hero .overline { color: var(--or-clair); }
.page-hero .overline a { color: inherit; }
.page-hero__lede { color: rgba(251, 250, 247, 0.88); }
.page-hero .article__meta { color: var(--or-clair); }
.page-hero .article__meta time { color: rgba(251, 250, 247, 0.65); }
.page-hero .journal-filter a { color: var(--ivoire); border-color: rgba(251, 250, 247, 0.4); }
.page-hero .journal-filter a:hover { color: var(--or-clair); border-color: var(--or-clair); }
.page-hero h1 { margin-top: 0.6rem; max-width: 20em; }
.page-hero__lede { max-width: var(--w-text); margin-top: 1.4rem; font-size: 1.02rem; }

/* Fil d'Ariane */
.breadcrumb {
  display: none;
  padding: 1.1rem 0 0;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: var(--tracking-mentions);
  text-transform: uppercase;
}
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.breadcrumb li + li::before { content: "·"; margin-right: 0.6rem; color: var(--or-profond); }
.breadcrumb a { color: var(--anthracite); }
.breadcrumb [aria-current] { color: var(--or-profond); }

/* --- Cartes domaines --------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.card {
  position: relative;
  border: 1px solid transparent;
  border-top: 2px solid var(--or-profond);
  background: var(--pierre);
  padding: 2.4rem 2rem 2.2rem;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.card:hover { border-color: var(--or-profond); transform: translateY(-3px); }

.card h3 { margin: 0.5rem 0 1rem; }
.card p { flex: 1; font-size: 0.95rem; }

.card__link {
  margin-top: 1.8rem;
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}
.card__link::after { content: "\2192"; margin-left: 0.6rem; }

/* Le lien couvre toute la carte */
.card__link::before { content: ""; position: absolute; inset: 0; }

/* --- Portrait — l'écrin de la présentation ---------------------------------------- */

.portrait {
  position: relative;
  max-width: 460px;
  margin-inline: auto;
}
/* Cadre d'or décalé, en retrait derrière l'écrin */
.portrait::before {
  content: "";
  position: absolute;
  inset: 22px -22px -22px 22px;
  border: 1px solid rgba(156, 124, 56, 0.55);
  z-index: 0;
}
.portrait__ecrin {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(7, 14, 10, 0.55) 0%, rgba(7, 14, 10, 0) 55%),
    linear-gradient(158deg, var(--vert-nuit) 0%, #273730 55%, #1B2721 100%);
  border-top: 1px solid rgba(198, 164, 101, 0.5);
}
.portrait__ecrin::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.09;
  pointer-events: none;
}
.portrait__monogramme {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 78%;
  opacity: 0.1;
  pointer-events: none;
}
.portrait__photo {
  position: relative;
  display: block;
  margin: 3.2rem auto 0;
  width: 86%;
  z-index: 1;
}
.portrait__legende {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 1.1rem 1rem 1.3rem;
  border-top: 1px solid rgba(198, 164, 101, 0.35);
  background: rgba(10, 17, 13, 0.35);
}
.portrait__legende .nom {
  font-family: var(--font-garalde);
  font-size: 1.25rem;
  color: var(--ivoire);
}
.portrait__legende .titre {
  font-weight: 400;
  font-size: 0.57rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--or-clair);
  margin-top: 0.2rem;
}

/* --- Numérotation romaine des domaines (charte V2, p. 9) ------------------------ */

/* Rangée de trois — la grille noble des matières */
@media (min-width: 821px) {
  .cards--3 { grid-template-columns: repeat(3, 1fr); }
  .cards--4 {
    grid-template-columns: repeat(2, minmax(0, 22rem));
    justify-content: center;
  }
}
@media (min-width: 1101px) {
  .cards--4 { grid-template-columns: repeat(4, 1fr); }
}

/* La section des matières : titre et cartes entrent posément */
@media (prefers-reduced-motion: no-preference) {
  .section-domaines .reveal { transition-duration: 2.4s; }
  /* Le titre, lui, entre d'un pas plus alerte */
  .section-domaines .section-head.reveal { transition-duration: 2s; }
}

/* La section des matières : une bande sertie, une respiration recentrée */
.section-domaines {
  padding-top: 4.2rem;
  border-top: 1px solid rgba(156, 124, 56, 0.25);
  border-bottom: 1px solid rgba(156, 124, 56, 0.25);
}
.section-domaines .cards--3 { margin-top: 4.2rem; }

.card--domaine { text-align: center; align-items: center; }
.card--domaine .card__picto {
  width: 118px;
  height: auto;
  margin: 1.3rem auto 0.4rem;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.card--domaine {
  background: var(--ivoire);
  border: 1px solid rgba(156, 124, 56, 0.18);
  border-top: 2px solid var(--or-profond);
  overflow: hidden;
  transition: border-color 0.35s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.card--domaine:not(.cards--3 *):hover,
.cards--3 .card--domaine:has(.card__link:hover),
.cards--3 .card--domaine:has(.card__link:focus-visible) {
  border-color: var(--or-profond);
  transform: translateY(-9px);
  box-shadow: 0 28px 54px rgba(42, 59, 50, 0.14);
}
.card--domaine:not(.cards--3 *):hover .card__picto,
.cards--3 .card--domaine:has(.card__link:hover) .card__picto,
.cards--3 .card--domaine:has(.card__link:focus-visible) .card__picto { transform: translateY(-9px); }

/* Le reflet d'or traverse la carte au survol — la signature de la maison */
.card--domaine::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(198, 164, 101, 0.12), transparent);
  transform: skewX(-18deg);
  transition: left 0.9s ease;
  pointer-events: none;
}
.card--domaine:not(.cards--3 *):hover::after,
.cards--3 .card--domaine:has(.card__link:hover)::after,
.cards--3 .card--domaine:has(.card__link:focus-visible)::after { left: 125%; }

/* Le cadre gravé : un filet intérieur, comme une invitation imprimée */
.card--domaine::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(156, 124, 56, 0.16);
  pointer-events: none;
  transition: border-color 0.5s ease;
}
.card--domaine:not(.cards--3 *):hover::before,
.cards--3 .card--domaine:has(.card__link:hover)::before,
.cards--3 .card--domaine:has(.card__link:focus-visible)::before { border-color: rgba(156, 124, 56, 0.45); }

/* Un filet d'or fondu sous le titre de chaque matière */
.card--domaine h3 {
  padding-bottom: 0.9rem;
  position: relative;
}
.card--domaine h3::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 34px;
  height: 1px;
  background: radial-gradient(50% 140% at 50% 50%, rgba(198, 164, 101, 0.9), rgba(156, 124, 56, 0) 96%);
}

/* La flèche de « Explorer ce domaine » glisse au survol */
.card__link::after { display: inline-block; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.card--domaine:hover .card__link::after { transform: translateX(6px); }

.card--domaine p { font-size: 0.92rem; }
.card--domaine .card__link { justify-self: center; }

/* --- Listes à puces filetées --------------------------------------------------- */

.list-filet { list-style: none; margin-top: 1.2rem; }
.list-filet li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.7rem;
}
.list-filet li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 0.85rem;
  height: 1px;
  background: var(--or-profond);
}

/* --- Étapes (votre dossier en 4 temps) ---------------------------------------- */

.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2.5rem 2rem;
  margin-top: 3rem;
}

.step { counter-increment: step; }

.step::before {
  content: "0" counter(step);
  display: block;
  font-family: var(--font-garalde);
  font-size: 2.2rem;
  color: var(--or-profond);
  line-height: 1;
}

.step h3 {
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  margin: 1rem 0 0.6rem;
  border-top: 1px solid var(--pierre);
  padding-top: 1rem;
}

.step p { font-size: 0.93rem; }

/* --- Bande sombre (urgence / appel à action) ----------------------------------- */

.band-dark {
  background: var(--vert);
  color: var(--ivoire);
  padding: 4.5rem 0;
}
.band-dark .overline { color: var(--or-clair); }
.band-dark h2, .band-dark h3 { color: var(--ivoire); }
.band-dark .filet { background: var(--or-clair); }
.band-dark a:not(.btn) { color: var(--or-clair); }
.band-dark p { color: rgba(251, 250, 247, 0.85); }

.band-dark__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.band-dark__inner > div { max-width: 640px; }

/* Bande intermédiaire pierre */
.band-pierre { background: var(--pierre); }

/* Bande anthracite — couleur de labeur (charte V2 : second plan sombre) */
.band-anthracite {
  background: var(--anthracite);
  color: var(--ivoire);
  padding: 5rem 0;
}
.band-anthracite .overline { color: var(--or-clair); }
.band-anthracite h2, .band-anthracite h3 { color: var(--ivoire); }
.band-anthracite .filet { background: var(--or-clair); }
.band-anthracite p { color: rgba(251, 250, 247, 0.85); }
.band-anthracite a:not(.btn) { color: var(--or-clair); }

/* Chiffres clés — entrée posée */
.stats > .stat.reveal { transition-duration: 2.1s; }
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2.5rem 2rem;
  text-align: center;
}
.stat__value {
  font-family: var(--font-garalde);
  font-weight: 300;
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  color: var(--or-clair);
  line-height: 1;
}
.stat__value { position: relative; z-index: 1; padding-bottom: 1rem; }

/* Un nuage d'or étincelant derrière chaque chiffre — chacun sa forme */
.stat__value::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: 112px;
  height: 64px;
  background:
    radial-gradient(closest-side, rgba(240, 221, 168, 0.34) 0%, rgba(198, 164, 101, 0.16) 55%, rgba(198, 164, 101, 0) 100%);
  filter: blur(9px);
  z-index: -1;
  pointer-events: none;
}
.stat:nth-child(2) .stat__value::before {
  width: 92px;
  height: 82px;
  transform: translate(-50%, -50%) rotate(16deg);
}
.stat:nth-child(3) .stat__value::before {
  width: 138px;
  height: 58px;
  transform: translate(-50%, -52%) rotate(-9deg);
}
.stat:nth-child(4) .stat__value::before {
  width: 124px;
  height: 74px;
  transform: translate(-52%, -48%) rotate(6deg);
}
.stat__label {
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: rgba(251, 250, 247, 0.85);
}

/* Citation — accroche */
.pull-quote {
  font-family: var(--font-garalde);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.4;
  max-width: 30em;
}
.pull-quote::before { content: "«\00a0"; color: var(--or-profond); }
.pull-quote::after { content: "\00a0»"; color: var(--or-profond); }

/* --- FAQ (details/summary) ------------------------------------------------------ */

.faq { margin-top: 2.5rem; border-top: 1px solid var(--pierre); }

.faq details { border-bottom: 1px solid var(--pierre); }

.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.3rem 0;
  font-family: var(--font-garalde);
  font-size: 1.2rem;
  transition: color 0.2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-lineale);
  font-weight: 300;
  font-size: 1.2rem;
  color: var(--or-profond);
  flex-shrink: 0;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] summary { color: var(--or-profond); }

.faq .faq__answer { padding: 0 2.5rem 1.6rem 0; font-size: 0.96rem; max-width: 60em; }

/* --- Tableaux (honoraires) -------------------------------------------------------- */

.table-wrap { overflow-x: auto; margin-top: 2rem; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
th {
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  text-align: left;
  color: var(--or-profond);
  border-bottom: 1px solid var(--or-profond);
  padding: 0.8rem 1rem 0.8rem 0;
}
td {
  border-bottom: 1px solid var(--pierre);
  padding: 1rem 1rem 1rem 0;
  vertical-align: top;
}

/* --- Deux colonnes ------------------------------------------------------------------ */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
@media (max-width: 820px) {
  .two-col { grid-template-columns: 1fr; gap: 2.5rem; }
  /* Présentation : sur petit écran, le portrait suit le texte et les boutons */
  [data-reveal-group] .two-col > div:first-child { order: 2; }
}

/* --- Encadré -------------------------------------------------------------------------- */

.notice {
  background: var(--pierre);
  border: 1px solid rgba(156, 124, 56, 0.22);
  border-left: 3px solid var(--or-profond);
  padding: 1.6rem 2rem;
  margin-top: 2.5rem;
  font-size: 0.95rem;
}
/* Sur les fonds pierre, l'encadré s'éclaire pour rester lisible */
.band-pierre .notice { background: var(--ivoire); }

/* --- Formulaire ------------------------------------------------------------------------ */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 2rem; }
.form-grid .form-field--full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.form-field label {
  display: block;
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font-family: var(--font-lineale);
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--anthracite);
  background: transparent;
  border: 1px solid rgba(59, 57, 55, 0.35);
  padding: 0.85rem 1rem;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--or-profond);
}

/* --- Pied de page ------------------------------------------------------------------------ */

/* Le rideau : le pied de page attend, épinglé sous la page qui glisse au-dessus */
main {
  position: relative;
  z-index: 1;
  background: var(--ivoire);
}
.site-footer {
  position: sticky;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(90rem 42rem at 50% 118%, rgba(198, 164, 101, 0.18), transparent 62%),
    radial-gradient(56rem 28rem at 8% -6%, rgba(0, 0, 0, 0.5), transparent 55%),
    radial-gradient(50rem 24rem at 96% 2%, rgba(0, 0, 0, 0.34), transparent 55%),
    linear-gradient(168deg, #24382F 0%, var(--vert) 38%, #0E1913 100%);
  border-top: 1px solid rgba(198, 164, 101, 0.4);
  color: rgba(251, 250, 247, 0.85);
  padding: 0;
  font-size: 0.84rem;
}
/* Le grain de la maison sur le velours vert */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.022;
  pointer-events: none;
}
.site-footer .container { position: relative; z-index: 1; }
/* Le monogramme d'or, en veille sur le flanc droit */
.site-footer__filigrane {
  position: absolute;
  right: -4%;
  top: 50%;
  width: min(520px, 60vw);
  max-width: none;
  height: auto;
  transform: translateY(-50%);
  opacity: 0.055;
  pointer-events: none;
}

/* Le dévoilement : chaque étage du pied de page se lève avec le rideau */
@media (prefers-reduced-motion: no-preference) {
  .site-footer__cta .container > div,
  .site-footer__cta .container > .btn,
  .site-footer__grid > div,
  .site-footer__legal {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity 1.5s ease, transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .site-footer__cta .container > .btn { transition-delay: 0.3s; }
  .site-footer__grid > div:nth-child(1) { transition-delay: 0.2s; }
  .site-footer__grid > div:nth-child(2) { transition-delay: 0.35s; }
  .site-footer__grid > div:nth-child(3) { transition-delay: 0.5s; }
  .site-footer__grid > div:nth-child(4) { transition-delay: 0.65s; }
  .site-footer__legal { transition-delay: 0.9s; }
  .site-footer.est-devoile .site-footer__cta .container > div,
  .site-footer.est-devoile .site-footer__cta .container > .btn,
  .site-footer.est-devoile .site-footer__grid > div,
  .site-footer.est-devoile .site-footer__legal {
    opacity: 1;
    transform: none;
  }
  /* Les brumes d'or des colonnes s'allument dans la foulée */
  .site-footer h3::after {
    opacity: 0;
    transition: opacity 2s ease 1s;
  }
  .site-footer.est-devoile h3::after { opacity: 1; }
}

/* Bandeau d'appel au-dessus des colonnes — inspiré du site actuel */
.site-footer__cta {
  border-bottom: 1px solid rgba(198, 164, 101, 0.25);
  padding: 3.5rem 0;
}
.site-footer__cta .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
}
.site-footer__cta h2 {
  font-family: var(--font-garalde);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  color: var(--ivoire);
}
.site-footer__cta p { color: rgba(251, 250, 247, 0.75); font-size: 0.95rem; }
.site-footer__grid { padding-top: 4rem; }

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3.5rem;
}
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } }

.site-footer__brand { align-self: center; }
.site-footer__brand a { display: inline-block; }
.site-footer__brand img {
  height: 88px;
  width: auto;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
}
.site-footer__brand a:hover img,
.site-footer__brand a:focus-visible img {
  transform: scale(1.05);
  filter: brightness(1.18) drop-shadow(0 0 14px rgba(198, 164, 101, 0.25));
}

.site-footer h3 {
  margin-top: 0;
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--or-clair);
  margin-bottom: 1.35rem;
  position: relative;
}
.site-footer h3::after {
  content: "";
  position: absolute;
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
  width: 130px;
  height: 22px;
  background: radial-gradient(closest-side, rgba(234, 211, 151, 0.14) 0%, rgba(198, 164, 101, 0.06) 55%, rgba(198, 164, 101, 0) 100%);
  filter: blur(8px);
  pointer-events: none;
  z-index: -1;
}

.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 0.65rem; line-height: 1.55; }
.site-footer a { color: rgba(251, 250, 247, 0.85); }
.site-footer a:hover { color: var(--or-clair); }
.site-footer ul a { display: inline-block; transition: color 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.site-footer ul a:hover { transform: translateX(4px); }

.site-footer__legal {
  position: relative;
  display: flex;
  justify-content: flex-end;
  text-align: right;
  flex-wrap: wrap;
  padding: 1.7rem 0 1.9rem;
  font-size: 0.78rem;
  color: rgba(251, 250, 247, 0.6);
}
.site-footer__legal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: rgba(198, 164, 101, 0.22);
}
.site-footer__legal a { color: rgba(251, 250, 247, 0.6); }
.site-footer__copyright::before { content: " · "; white-space: pre; color: var(--or-clair); font-size: 1.6em; line-height: 0; vertical-align: -0.1em; }
.pt-or { color: var(--or-clair); font-size: 1.6em; line-height: 0; vertical-align: -0.1em; }

/* --- Révélation au défilement --------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition: opacity 1.9s cubic-bezier(0.22, 1, 0.36, 1), transform 1.9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0s);
  }
  .reveal .reveal-child {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition: opacity 1.9s cubic-bezier(0.22, 1, 0.36, 1), transform 1.9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 1.3s;
  }
  .reveal.is-visible .reveal-child { opacity: 1; transform: none; }

  /* La citation : un pur fondu, long et distinct du texte qui glisse */
  .reveal .reveal-quote {
    opacity: 0;
    transition: opacity 2.6s ease;
    transition-delay: 0.9s;
  }
  .reveal.is-visible .reveal-quote { opacity: 1; }
  .reveal.is-visible .reveal-child { opacity: 1; transform: none; }

  .reveal.reveal--right { transform: translate3d(36px, 0, 0); }
  .reveal.reveal--fade {
    transform: none;
    transition: opacity 2.7s cubic-bezier(0.33, 0, 0.15, 1);
    transition-delay: var(--reveal-delay, 0s);
  }
  .reveal.is-visible { opacity: 1; transform: none; }

  /* Entrée du héros au chargement */
  .hero__content > * , .page-hero .container > * {
    animation: rise 2s ease both;
    will-change: transform, opacity;
  }
  .hero__content > :nth-child(1), .page-hero .container > :nth-child(1) { animation-delay: 0.15s; }
  .hero__content > :nth-child(2), .page-hero .container > :nth-child(2) { animation-delay: 0.2s; }
  .hero__content > :nth-child(3), .page-hero .container > :nth-child(3) { animation-delay: 0.8s; }
  .hero__content > :nth-child(4), .page-hero .container > :nth-child(4) { animation-delay: 1s; }
  .hero__content > :nth-child(5), .page-hero .container > :nth-child(5) { animation-delay: 1.5s; }
  @keyframes rise {
    from { opacity: 0; transform: translate3d(0, 48px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }

  /* Le paragraphe puis les boutons : chacun son temps, les boutons ferment la marche */
  .hero .hero__content > .hero__lede { animation-delay: 1s; }
  .hero .hero__content > .hero__actions { animation-delay: 1.5s; }

  /* L'or scintille lentement */
  .hero em, .page-hero em, .accent-or, .invitation__coeur h2 em {
    animation: shimmer 7s ease-in-out infinite;
  }
  @keyframes shimmer {
    0%, 100% { background-position: 0% 0; }
    50% { background-position: 100% 0; }
  }

  /* Les poussières d'or montent, le rai de lumière passe */
  .hero__dust { animation: dust 38s linear infinite; }
  .invitation__poussieres { animation: dust 44s linear infinite; }
  .invitation__filigrane { animation: filigraneDerive 26s ease-in-out infinite alternate; }
  @keyframes filigraneDerive {
    from { transform: translate(-50%, -52%) scale(1); }
    to { transform: translate(-50%, -49%) scale(1.045); }
  }
  @keyframes dust {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, -780px, 0); }
  }
  .hero__dust::after { animation: dust2 58s linear infinite; }
  @keyframes dust2 {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, -920px, 0); }
  }

  /* Les nuages d'or des chiffres scintillent doucement — départ en plein cycle, sans saut */
  .stat__value::before { animation: etincelle 6s ease-in-out infinite alternate; }
  .stat:nth-child(2) .stat__value::before { animation-delay: -1.4s; }
  .stat:nth-child(3) .stat__value::before { animation-delay: -2.8s; }
  .stat:nth-child(4) .stat__value::before { animation-delay: -4.2s; }
  @keyframes etincelle {
    from { opacity: 0.74; }
    to { opacity: 1; }
  }

  /* Le halo respire, imperceptiblement */
  .hero__content::before { animation: halo 9s ease-in-out infinite alternate; }
  @keyframes halo {
    from { opacity: 0.55; }
    to { opacity: 1; }
  }

  /* Filigrane du héros : le sceau se pose, puis respire lentement */
  .hero__watermark {
    animation:
      seal 4.2s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both,
      drift 24s ease-in-out 4.8s infinite alternate;
    will-change: transform, opacity;
  }
  @keyframes seal {
    0% { opacity: 0; transform: translate(-50%, -44%) scale(1.3); }
    45% { opacity: 0.085; }
    100% { opacity: 0.085; transform: translate(-50%, -50%) scale(1); }
  }
  @keyframes drift {
    from { transform: translate(-50%, -50%) scale(1); }
    to { transform: translate(-50%, -52%) scale(1.05); }
  }

  /* Le trait se déploie vers la droite quand sa section apparaît — fluide, posé */
  .reveal .filet {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 2s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.5s;
  }
  .reveal.is-visible .filet { transform: scaleX(1); }
  .filet--center { transform-origin: center; }

  /* Le trait du héros : il attend la fin du titre, puis se déploie très lentement */
  .hero .hero__content > .filet,
  .page-hero .container .filet {
    transform-origin: center;
    animation: growFade 2.9s cubic-bezier(0.33, 0, 0.2, 1) both;
    animation-delay: 0.85s;
  }
  @keyframes growFade {
    0% { opacity: 0; transform: scaleX(0); }
    35% { opacity: 1; }
    100% { opacity: 1; transform: scaleX(1); }
  }


  /* Liens de navigation : soulignement animé */
  .site-nav > ul > li > a { position: relative; }
  .site-nav > ul > li > a::before {
    content: "";
    position: absolute;
    left: 0; right: 100%; bottom: 0;
    height: 1px;
    background: var(--or-profond);
    transition: right 0.3s ease;
  }
  .site-nav > ul > li > a:hover::before { right: 0; }
  .site-nav > ul > li.nav-cta > a::before { content: none; }

  /* Cartes : élévation douce */
  .card, .post-card { will-change: transform; }
}

/* --- Journal (liste des articles) ------------------------------------------------------------- */

/* Navigation par domaine (ancres) */
.journal-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2.5rem;
}
.journal-filter a {
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.74rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--anthracite);
  border: 1px solid rgba(59, 57, 55, 0.35);
  padding: 0.6rem 1.2rem;
}
.journal-filter a:hover { border-color: var(--or-profond); color: var(--or-profond); text-decoration: none; }

.journal-group { padding-top: 3.5rem; }
.journal-group + .journal-group { border-top: 1px solid var(--pierre); }
.journal-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.journal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--pierre);
  border: 1px solid transparent;
  border-top: 2px solid var(--or-profond);
  padding: 2rem 1.8rem;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.post-card:hover { border-color: var(--or-profond); transform: translateY(-3px); }

.post-card__meta {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--or-profond);
}
.post-card__meta time { color: rgba(59, 57, 55, 0.6); letter-spacing: 0.08em; }

.post-card h3 {
  font-size: 1.32rem;
  margin: 0.9rem 0 0.7rem;
  line-height: 1.2;
}
.post-card p { font-size: 0.92rem; flex: 1; }
.post-card__link {
  margin-top: 1.4rem;
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--or-profond);
}
.post-card__link::after { content: "\2192"; margin-left: 0.5rem; }
.post-card__link::before { content: ""; position: absolute; inset: 0; }

/* --- Article -------------------------------------------------------------------------------------- */

.article { max-width: var(--w-text); }
.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--or-profond);
  margin-top: 0.4rem;
}
.article__meta time { color: rgba(59, 57, 55, 0.6); letter-spacing: 0.1em; }

.article__body { margin-top: 1rem; }
.article__body h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 2.6rem 0 1rem;
}
.article__body h3 {
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--or-profond);
  margin: 2rem 0 0.8rem;
}
.article__body p { margin-bottom: 1.1rem; }
.article__body ul { list-style: none; margin: 1.2rem 0; }
.article__body ul li { position: relative; padding-left: 1.6rem; margin-bottom: 0.7rem; }
.article__body ul li::before {
  content: ""; position: absolute; left: 0; top: 0.85em;
  width: 0.85rem; height: 1px; background: var(--or-profond);
}
.article__body strong { font-weight: 400; color: var(--anthracite); }

.article__disclaimer {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--pierre);
  font-size: 0.82rem;
  color: rgba(59, 57, 55, 0.7);
}

/* Articles liés */
.related { margin-top: 3rem; }
.related h2 { font-size: 1.5rem; }

/* Sur petit écran, le portrait suit simplement le fil du défilement */
@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  .section-domaines .reveal { transition-duration: 1.6s; }
  .reflexes > .reveal { transition-duration: 1.7s; }
  .band-nuit .hero__actions.reveal { transition-delay: 0.25s; }
  .stats > .stat.reveal { transition-duration: 1.6s; }
  [data-reveal-group] .reveal.reveal--fade { transition-delay: 0.25s; }
  /* Le bloc texte glisse plus posément */
  [data-reveal-group] .reveal.reveal--right { transition-duration: 2.5s; }
  /* Les boutons ne partent que lorsqu'ils entrent à l'écran — et montent lentement */
  [data-reveal-group] .reveal .reveal-child {
    transition-duration: 2.6s;
    transition-delay: 0.2s;
  }
  [data-reveal-group] .reveal.is-visible .reveal-child:not(.is-visible) {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  [data-reveal-group] .reveal .reveal-child.is-visible {
    opacity: 1 !important;
    transform: none !important;
  }
  /* Le trait se déploie plus lentement encore — on le voit naître */
  [data-reveal-group] .reveal .filet {
    transition-duration: 3.2s;
    transition-delay: 0.55s;
  }
}

/* Tablette : les chiffres vont toujours deux par deux — la grille auto-fit
   donnait 3+1 ou 4 selon l'écran, on fige la composition (règle de marbre) */
@media (min-width: 821px) and (max-width: 1140px) {
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 3.2rem; }
}

/* Petit écran : les chiffres s'empilent, en cascade comme sur ordinateur,
   et leurs libellés restent compacts quelle que soit la taille de l'écran */
@media (max-width: 820px) {
  .stats { grid-template-columns: 1fr; gap: 2.6rem; }
  .stat__label {
    max-width: 15rem;
    margin-inline: auto;
  }
}

/* Petit écran : la présentation respire moins haut, boutons et citation centrés */
@media (max-width: 820px) {
  [data-reveal-group] { padding-top: 3.8rem; }
  [data-reveal-group] .hero__actions { justify-content: center !important; }
  [data-reveal-group] .pull-quote {
    text-align: center;
    margin-inline: auto;
  }
}

/* --- La bande de nuit — un mini-héros au cœur de la page ------------------------ */

.band-nuit {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(7, 14, 10, 0.72) 0%, rgba(7, 14, 10, 0.34) 28%, rgba(7, 14, 10, 0) 55%),
    radial-gradient(90rem 42rem at 50% 118%, rgba(198, 164, 101, 0.16), transparent 62%),
    linear-gradient(158deg, var(--vert-nuit) 0%, #273730 46%, #202E27 78%, var(--vert-nuit) 100%);
  border-top: 1px solid rgba(198, 164, 101, 0.35);
  border-bottom: 1px solid rgba(198, 164, 101, 0.35);
}
.band-nuit::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.022;
  pointer-events: none;
}
.band-nuit .container { position: relative; z-index: 1; }

/* Le trait de la maison, tel qu'il vit sous les autres titres */
.band-nuit .filet,
.band-anthracite .filet {
  background: radial-gradient(50% 140% at 50% 50%, rgba(234, 211, 151, 0.95) 0%, rgba(198, 164, 101, 0.75) 38%, rgba(156, 124, 56, 0) 96%);
}

/* Les cartes de nuit entrent posément ; les boutons ferment la marche */
@media (prefers-reduced-motion: no-preference) {
  .reflexes > .reveal { transition-duration: 1.7s; }
}

/* Les cartes de nuit : gravées dans la profondeur, serties d'or */
.reflexes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin-top: 3.8rem;
}
@media (max-width: 820px) {
  .reflexes { grid-template-columns: 1fr; }
  .carte-nuit { max-width: 21.5rem; width: 100%; margin-inline: auto; }
}
.reflexes > .reveal { display: flex; }
.carte-nuit {
  flex: 1;
  position: relative;
  overflow: hidden;
  padding: 2.6rem 2rem 2.4rem;
  background: rgba(251, 250, 247, 0.04);
  border: 1px solid rgba(198, 164, 101, 0.22);
  border-top: 2px solid rgba(198, 164, 101, 0.7);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease, background 0.5s ease, box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.carte-nuit::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(198, 164, 101, 0.13);
  pointer-events: none;
  transition: border-color 0.5s ease;
}
.carte-nuit:hover {
  transform: translateY(-9px);
  border-color: var(--or-clair);
  background: rgba(251, 250, 247, 0.065);
  box-shadow: 0 28px 54px rgba(0, 0, 0, 0.32);
}
.carte-nuit:hover::before { border-color: rgba(198, 164, 101, 0.4); }
.carte-nuit::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(234, 211, 151, 0.1), transparent);
  transform: skewX(-18deg);
  transition: left 0.9s ease;
  pointer-events: none;
}
.carte-nuit:hover::after { left: 125%; }
.carte-nuit .num {
  font-family: var(--font-garalde);
  font-weight: 300;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--or-clair);
}
.carte-nuit h3 {
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--ivoire);
  margin: 1.1rem 0 0.8rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(251, 250, 247, 0.14);
}
.carte-nuit p:not(.num) {
  font-size: 0.93rem;
  color: rgba(251, 250, 247, 0.82);
  text-align: justify;
  hyphens: none;
}

/* Téléphone : le survol des matières se joue tout seul au fil du défilement */
@media (max-width: 600px) {
  .card--domaine.est-survolee {
    border-color: var(--or-profond);
    transform: translateY(-9px);
    box-shadow: 0 28px 54px rgba(42, 59, 50, 0.14);
  }
  .card--domaine.est-survolee .card__picto { transform: translateY(-9px); }
  .card--domaine.est-survolee::before { border-color: rgba(156, 124, 56, 0.45); }
  .card--domaine.est-survolee .card__link::after { transform: translateX(6px); }
}

/* Téléphone : le survol des cartes nuit se joue tout seul au fil du défilement */
@media (max-width: 600px) {
  .carte-nuit.est-survolee {
    transform: translateY(-9px);
    border-color: var(--or-clair);
    background: rgba(251, 250, 247, 0.065);
    box-shadow: 0 28px 54px rgba(0, 0, 0, 0.32);
  }
  .carte-nuit.est-survolee::before { border-color: rgba(198, 164, 101, 0.4); }
  .carte-nuit.est-survolee::after { left: 125%; }
}

/* La section publics : l'inversion — écrin ivoire, cartes de pierre */
.section-publics .card--domaine {
  background: var(--pierre);
  border-color: rgba(156, 124, 56, 0.22);
  border-top-color: var(--or-profond);
}
.section-publics .card--domaine:hover { border-color: var(--or-profond); }

/* Le mot en or des titres de section sur fond clair */
.section-head h2 em {
  font-style: italic;
  background: linear-gradient(105deg, #8F6F2E 0%, #C6A465 45%, #B08F4F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Le sceau final : le site se referme comme il s'est ouvert -------------------- */

.section-invitation {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1.6px 1.6px at 120px 90px, rgba(156, 124, 56, 0.2), transparent 100%),
    radial-gradient(1.2px 1.2px at 340px 280px, rgba(156, 124, 56, 0.16), transparent 100%),
    radial-gradient(1.8px 1.8px at 220px 430px, rgba(198, 164, 101, 0.18), transparent 100%),
    radial-gradient(1px 1px at 460px 150px, rgba(59, 57, 55, 0.12), transparent 100%),
    radial-gradient(1.4px 1.4px at 60px 350px, rgba(198, 164, 101, 0.15), transparent 100%),
    radial-gradient(64rem 32rem at 50% 40%, rgba(198, 164, 101, 0.16), transparent 64%),
    radial-gradient(46rem 24rem at 50% 46%, rgba(255, 255, 253, 0.96), transparent 70%),
    radial-gradient(34rem 20rem at 84% 12%, rgba(255, 254, 250, 0.65), transparent 65%),
    radial-gradient(30rem 30rem at 18% 88%, rgba(255, 253, 248, 0.6), transparent 65%),
    linear-gradient(180deg, #E0D9CB 0%, #F7F4EE 28%, #FFFFFE 52%, #F2EEE4 78%, #E0D9CB 100%);
  background-size:
    520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px,
    100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  box-shadow:
    inset 0 30px 52px -32px rgba(59, 57, 55, 0.26),
    inset 0 -30px 52px -32px rgba(59, 57, 55, 0.26);
  border-top: 1px solid rgba(156, 124, 56, 0.28);
  border-bottom: 1px solid rgba(156, 124, 56, 0.28);
  padding: 6rem 0 6.4rem;
}
/* Le grain de la maison, en voile discret sur la lumière */
.section-invitation::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.11;
  -webkit-mask-image: radial-gradient(closest-side at 50% 46%, transparent 26%, rgba(0, 0, 0, 0.45) 58%, #000 100%);
  mask-image: radial-gradient(closest-side at 50% 46%, transparent 26%, rgba(0, 0, 0, 0.45) 58%, #000 100%);
  pointer-events: none;
}
.section-invitation .container { position: relative; z-index: 2; }

/* Le monogramme de la maison, en très grand filigrane au fond */
.invitation__filigrane {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(660px, 84vw);
  height: auto;
  transform: translate(-50%, -52%);
  opacity: 0.085;
  pointer-events: none;
  z-index: 1;
}

/* Les poussières d'or du héros, une dernière fois — la boucle se referme */
.invitation__poussieres {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% + 780px);
  pointer-events: none;
  opacity: 0.5;
  will-change: transform;
  z-index: 1;
  background-image:
    radial-gradient(1.8px 1.8px at 40px 700px, rgba(156, 124, 56, 0.7), transparent 100%),
    radial-gradient(1.2px 1.2px at 150px 520px, rgba(198, 164, 101, 0.75), transparent 100%),
    radial-gradient(2.2px 2.2px at 260px 640px, rgba(156, 124, 56, 0.45), transparent 100%),
    radial-gradient(1px 1px at 330px 380px, rgba(198, 164, 101, 0.6), transparent 100%),
    radial-gradient(1.5px 1.5px at 90px 250px, rgba(156, 124, 56, 0.5), transparent 100%),
    radial-gradient(1.1px 1.1px at 240px 120px, rgba(198, 164, 101, 0.5), transparent 100%),
    radial-gradient(1.7px 1.7px at 380px 200px, rgba(156, 124, 56, 0.4), transparent 100%);
  background-size: 440px 780px;
}

/* La scène : le cadre se grave directement dans la lumière — plus de carton */
.invitation {
  position: relative;
  max-width: 1020px;
  margin-inline: auto;
  padding: 4.8rem 3.4rem 4.4rem;
  text-align: center;
}
/* La comète d'or : chaque trait se grave puis s'efface derrière la lumière */
.invitation__trait { position: absolute; }
.invitation__trait--haut {
  top: 0; left: 0; right: 0; height: 1.5px;
  transform-origin: left center; transform: scaleX(0);
  background: linear-gradient(90deg, rgba(234, 211, 151, 0.9), var(--or-profond));
}
.invitation__trait--droit {
  top: 0; bottom: 0; right: 0; width: 1.5px;
  transform-origin: center top; transform: scaleY(0);
  background: linear-gradient(180deg, rgba(234, 211, 151, 0.9), var(--or-profond));
}
.invitation__trait--bas {
  bottom: 0; left: 0; right: 0; height: 1.5px;
  transform-origin: right center; transform: scaleX(0);
  background: linear-gradient(270deg, rgba(234, 211, 151, 0.9), var(--or-profond));
}
.invitation__trait--gauche {
  top: 0; bottom: 0; left: 0; width: 1.5px;
  transform-origin: center bottom; transform: scaleY(0);
  background: linear-gradient(0deg, rgba(234, 211, 151, 0.9), var(--or-profond));
}
@media (prefers-reduced-motion: no-preference) {
  .invitation__trait--haut { transition: transform 0.62s cubic-bezier(0.33, 0, 0.2, 1) 0.15s, opacity 0.85s ease 0.95s; }
  .invitation__trait--droit { transition: transform 0.62s cubic-bezier(0.33, 0, 0.2, 1) 0.71s, opacity 0.85s ease 1.51s; }
  .invitation__trait--bas { transition: transform 0.62s cubic-bezier(0.33, 0, 0.2, 1) 1.27s, opacity 0.85s ease 2.07s; }
  .invitation__trait--gauche { transition: transform 0.62s cubic-bezier(0.33, 0, 0.2, 1) 1.83s, opacity 0.85s ease 2.63s; }
}
.invitation.is-visible .invitation__trait--haut,
.invitation.is-visible .invitation__trait--bas { transform: scaleX(1); opacity: 0; }
.invitation.is-visible .invitation__trait--droit,
.invitation.is-visible .invitation__trait--gauche { transform: scaleY(1); opacity: 0; }
/* Sans animations, le cadre ne doit pas rester : il s'efface simplement */
@media (prefers-reduced-motion: reduce) {
  .invitation__trait { opacity: 0; }
}

/* Les losanges sertis aux angles, une fois le tour achevé */
.invitation__coin {
  position: absolute;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  background: linear-gradient(135deg, #EAD397 0%, var(--or-profond) 100%);
  z-index: 1;
}
.invitation__coin--1 { top: 0; left: 0; }
.invitation__coin--2 { top: 0; left: 100%; }
.invitation__coin--3 { top: 100%; left: 100%; }
.invitation__coin--4 { top: 100%; left: 0; }
@media (prefers-reduced-motion: no-preference) {
  .invitation__coin--1 { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 2.4s, opacity 0.7s ease 2.95s; }
  .invitation__coin--2 { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.72s, opacity 0.7s ease 1.27s; }
  .invitation__coin--3 { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1.28s, opacity 0.7s ease 1.83s; }
  .invitation__coin--4 { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1.84s, opacity 0.7s ease 2.39s; }
}
.invitation.is-visible .invitation__coin { transform: translate(-50%, -50%) rotate(45deg) scale(1); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .invitation__coin { opacity: 0; }
}

/* Le titre monumental et le paraphe qui se signe dessous */
.invitation__coeur { position: relative; }
.invitation__coeur h2 {
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: 1.12;
  max-width: 50rem;
  margin-inline: auto;
}
.invitation__paraphe {
  width: 250px;
  height: auto;
  margin: 1.7rem auto 0;
  display: block;
}
@media (prefers-reduced-motion: no-preference) {
  .invitation__paraphe path {
    stroke-dasharray: 420;
    stroke-dashoffset: 420;
    transition: stroke-dashoffset 1.9s cubic-bezier(0.33, 0, 0.2, 1) 1.15s;
  }
  .invitation.is-visible .invitation__paraphe path { stroke-dashoffset: 0; }
}
.invitation__lede {
  max-width: 42rem;
  margin: 2rem auto 0;
  font-size: 1.02rem;
}
.invitation__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 3rem;
}
.invitation__note {
  margin-top: 2rem;
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: rgba(59, 57, 55, 0.62);
}
@media (max-width: 820px) {
  .section-invitation { padding: 4.4rem 0 4.8rem; }
  .invitation { padding: 3.2rem 1.2rem 3rem; }
  .invitation__actions { flex-direction: column; align-items: center; }
  .invitation__paraphe { width: 200px; }
}

/* --- Le registre & le pupitre : les questions comme un ouvrage ------------------- */

.section-parloir {
  background:
    radial-gradient(80rem 38rem at 50% 115%, rgba(198, 164, 101, 0.15), transparent 60%),
    radial-gradient(60rem 30rem at 10% -10%, rgba(0, 0, 0, 0.5), transparent 55%),
    radial-gradient(55rem 26rem at 96% 6%, rgba(0, 0, 0, 0.36), transparent 55%),
    linear-gradient(168deg, #2F4A3C 0%, var(--vert) 40%, #0E1913 100%);
  border-top: 1px solid rgba(198, 164, 101, 0.28);
  border-bottom: 1px solid rgba(198, 164, 101, 0.28);
  padding: 4.6rem 0 5rem;
}
.section-parloir { position: relative; overflow: hidden; }
.section-parloir::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.022;
  pointer-events: none;
}
.section-parloir .container { position: relative; z-index: 1; }

/* La brume dorée posée SUR le titre — elle étincelle imperceptiblement */
.section-parloir h2 {
  position: relative;
  margin-bottom: 0.6rem;
}
.section-parloir h2::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(34rem, 98%);
  height: 165%;
  background: radial-gradient(closest-side, rgba(240, 221, 168, 0.3) 0%, rgba(198, 164, 101, 0.15) 55%, rgba(198, 164, 101, 0) 100%);
  filter: blur(14px);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .section-parloir h2::before { animation: etincelle-titre 7s ease-in-out infinite alternate; }
  @keyframes etincelle-titre {
    from { opacity: 0.62; }
    to { opacity: 1; }
  }
}

.parloir {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 4rem;
  margin-top: 3.8rem;
  align-items: start;
}

.registre { list-style: none; position: relative; padding-left: 2.1rem; }

/* Le fil d'or le long du registre — il se déploie à l'arrivée */
.registre__fil {
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(198, 164, 101, 0.55) 8%, rgba(198, 164, 101, 0.55) 92%, transparent);
}
.registre__fil.reveal { opacity: 1; }

/* Le losange voyageur : il glisse le long du fil jusqu'à la question lue */
.registre__curseur {
  position: absolute;
  left: 0;
  top: 0;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  opacity: 0;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease;
  pointer-events: none;
}
.registre__curseur > span {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #EAD397 0%, var(--or-profond) 100%);
}
.registre__fil.is-visible ~ .registre__curseur { opacity: 1; transition-delay: 0s, 1.4s; }
.registre__q {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(198, 164, 101, 0.22);
  padding: 1.2rem 0.5rem 1.2rem 0;
  display: flex;
  gap: 1.1rem;
  align-items: baseline;
  cursor: pointer;
  font-family: var(--font-garalde);
  font-weight: 300;
  font-size: 1.22rem;
  line-height: 1.3;
  color: rgba(251, 250, 247, 0.9);
  position: relative;
  transition: color 0.3s ease, padding-left 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.registre__q .num {
  font-size: 0.95rem;
  color: var(--or-clair);
  flex-shrink: 0;
}
.registre__q:hover { color: var(--or-clair); }
.registre__q.est-active {
  color: var(--or-clair);
  padding-left: 0.45rem;
}

/* Le pupitre : la réponse posée sur l'ivoire */
.pupitre {
  position: sticky;
  top: 110px;
  background: linear-gradient(163deg, #354C40 0%, #2E4237 55%, #24362D 100%);
  border: 1px solid rgba(198, 164, 101, 0.42);
  border-top: 2px solid var(--or-clair);
  padding: 2.9rem 2.6rem 2.6rem;
  overflow: hidden;
  border-radius: 18px; /* dérogation validée par la cliente, comme les boutons pilules */
}
.pupitre::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(198, 164, 101, 0.2);
  border-radius: 11px;
  pointer-events: none;
}
/* Le numéro fantôme de la question lue, en filigrane d'or */
.pupitre__no {
  position: absolute;
  top: 0.4rem;
  right: 1.9rem;
  font-family: var(--font-garalde);
  font-style: italic;
  font-weight: 300;
  font-size: 7.6rem;
  line-height: 1;
  color: rgba(198, 164, 101, 0.14);
  pointer-events: none;
}
.pupitre__rep { display: none; }
.pupitre__rep.est-active { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .pupitre__rep.est-active { animation: repEntre 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
  @keyframes repEntre {
    from { opacity: 0; transform: translate3d(0, 20px, 0); }
    to { opacity: 1; transform: none; }
  }
}
.pupitre__rep .overline { font-size: 0.68rem; color: var(--or-clair); }
.pupitre__rep h3 {
  font-size: 1.4rem;
  margin: 0.7rem 0 1rem;
  color: var(--ivoire);
  text-align: justify;
}
.pupitre__rep p { font-size: 0.95rem; text-align: justify; hyphens: none; color: rgba(251, 250, 247, 0.82); }
.pupitre__lien {
  display: inline-block;
  color: var(--or-clair);
  margin-top: 1.5rem;
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}

.parloir__pied {
  margin-top: 3.4rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Mobile : l'écrin vert vient à l'accordéon — le pupitre se replie dans chaque question */
.registre__rep { display: none; }
@media (max-width: 820px) {
  .parloir { grid-template-columns: 1fr; gap: 0; margin-top: 1.6rem; }
  .pupitre { display: none; }
  .registre { padding-left: 1.5rem; counter-reset: parloir; }
  .registre__item { counter-increment: parloir; }
  .registre__fil { top: 6px; bottom: 6px; }
  /* L'état actif du pupitre (desktop) n'a pas de sens ici : on le neutralise */
  .registre__q.est-active { color: rgba(251, 250, 247, 0.9); padding-left: 0; }
  .registre__item.est-ouverte .registre__q,
  .registre__item.est-ouverte .registre__q.est-active { color: var(--or-clair); }
  /* Le losange voyageur n'apparaît que lorsqu'une question est ouverte */
  .registre__curseur {
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
  }
  .registre__fil.is-visible ~ .registre__curseur { opacity: 0; transition-delay: 0s, 0s; }
  .registre.a-ouverte .registre__fil.is-visible ~ .registre__curseur { opacity: 1; }
  /* L'écrin vert chancellerie se déplie sous la question */
  .registre__rep {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    margin: 0;
    transition: grid-template-rows 0.7s cubic-bezier(0.33, 0, 0.2, 1),
                margin 0.7s cubic-bezier(0.33, 0, 0.2, 1),
                opacity 0.55s ease;
  }
  .registre__rep > p {
    min-height: 0;
    overflow: hidden;
    position: relative;
    background: linear-gradient(163deg, #354C40 0%, #2E4237 55%, #24362D 100%);
    border: 1px solid rgba(198, 164, 101, 0.42);
    border-top: 2px solid var(--or-clair);
    border-radius: 14px;
    color: rgba(251, 250, 247, 0.88);
    font-size: 0.89rem;
    text-align: justify;
    hyphens: none;
    padding: 0 1.35rem;
    transition: padding 0.7s cubic-bezier(0.33, 0, 0.2, 1);
  }
  /* Le numéro fantôme, comme au pupitre */
  .registre__rep > p::before {
    content: counter(parloir, decimal-leading-zero);
    position: absolute;
    top: 0.45rem;
    right: 1.25rem;
    font-family: var(--font-garalde);
    font-style: italic;
    font-weight: 300;
    font-size: 4.3rem;
    line-height: 1;
    color: rgba(198, 164, 101, 0.17);
    pointer-events: none;
  }
  .registre__item.est-ouverte .registre__rep {
    grid-template-rows: 1fr;
    opacity: 1;
    margin: 0.4rem 0 1.35rem;
  }
  .registre__item.est-ouverte .registre__rep > p { padding: 1.5rem 1.35rem 1.55rem; }
}

/* Téléphone : les titres de section s'affirment, les textes se font un peu plus discrets.
   (Placé AVANT le bloc du parloir pour que son titre calibré garde le dernier mot.) */
@media (max-width: 600px) {
  /* RÈGLE DE MARBRE : la composition ne doit jamais changer d'un téléphone à l'autre.
     Les titres à retour forcé se dimensionnent en proportion de l'écran (vw plafonné) :
     à 7,9vw, 1,85rem est atteint pile à 375px — en dessous, tout réduit d'un même facteur. */
  .hero { padding: 6.6rem 0 6.4rem; }
  .hero h1 { font-size: min(2.6rem, 8.6vw); }
  .hero .overline { font-size: min(0.72rem, 3.05vw); }
  .hero__lede { font-size: min(0.79rem, 3.37vw); margin-bottom: 2rem; }
  .hero__watermark {
    width: 104vw;
    max-width: none;
    top: 47%;
  }
  .page-hero h1 { font-size: min(2.1rem, 8.6vw); }
  .section-head h2 { font-size: min(1.85rem, 7.9vw); }
  .invitation__coeur h2 { font-size: min(2.7rem, 11.4vw); }
  .invitation__lede { font-size: 0.95rem; }
  /* Centrage purement géométrique (sans transform ni animation : Safari iOS
     n'appliquait pas le décalage vertical de façon fiable) — ratio du SVG : 1,4706 */
  .invitation__filigrane {
    width: 105vw;
    max-width: none;
    left: calc(50% - 52.5vw);
    top: calc(47% - 77vw);
    transform: none;
    animation: none;
  }
  .invitation__note { margin-top: 2.6rem; }
  .invitation .overline { font-size: 0.66rem; }
  section[aria-labelledby="titre-presentation"] h2 { font-size: min(1.85rem, 7.9vw); }
  section[aria-labelledby="titre-presentation"] .overline { font-size: 0.7rem; }
  p { font-size: 0.95rem; }
}

/* Téléphone seulement : le numéro fantôme est plus grand (même transparence qu'ailleurs),
   et le titre se calibre pour tenir sur ses deux lignes */
@media (max-width: 600px) {
  .section-invitation { padding: 3.1rem 0 3.3rem; }
  .invitation { padding: 2.3rem 1.2rem 2.1rem; }
  section[aria-labelledby="titre-methode"],
  section[aria-labelledby="titre-engagements"],
  section[aria-labelledby="titre-journal"] { padding-top: 2.9rem; }
  .invitation__note {
    font-size: min(0.58rem, 2.35vw);
    white-space: nowrap;
  }
  .section-parloir { padding-top: 2.5rem; }
  .parloir { margin-top: 2.5rem; }
  .registre__rep > p::before { font-size: 5.4rem; }
  .section-parloir h2 { font-size: min(1.62rem, 6.9vw); letter-spacing: -0.02em; }
  .registre__q { font-size: 0.94rem; gap: 0.85rem; }
  .registre__q .num { font-size: 0.76rem; }
}

/* --- La revue de la maison : le carrousel du journal ------------------------------ */

.revue { position: relative; margin-top: 3.6rem; }

.revue__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 340px;
  gap: 1.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 0.4rem 0.3rem 1.6rem;
  scrollbar-width: none;
}
.revue__rail::-webkit-scrollbar { display: none; }
.revue__rail > .reveal { display: flex; scroll-snap-align: start; }

.revue__carte {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--pierre);
  border: 1px solid rgba(156, 124, 56, 0.2);
  border-top: 2px solid var(--or-profond);
  padding: 2.1rem 1.9rem 2rem;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease, box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.revue__carte::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(156, 124, 56, 0.14);
  pointer-events: none;
  transition: border-color 0.5s ease;
}
.revue__carte:hover {
  transform: translateY(-8px);
  border-color: var(--or-profond);
  box-shadow:
    0 22px 38px -20px rgba(22, 36, 29, 0.35),
    0 10px 22px -14px rgba(156, 124, 56, 0.18);
}
.revue__carte:hover::before { border-color: rgba(156, 124, 56, 0.4); }
.revue__carte::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(198, 164, 101, 0.12), transparent);
  transform: skewX(-18deg);
  transition: left 0.9s ease;
  pointer-events: none;
}
.revue__carte:hover::after { left: 125%; }

.revue__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or-profond);
  padding-bottom: 0.8rem;
  position: relative;
}
.revue__meta::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 1px;
  background: radial-gradient(50% 140% at 30% 50%, rgba(198, 164, 101, 0.9), rgba(156, 124, 56, 0) 96%);
}
.revue__meta time { color: rgba(59, 57, 55, 0.55); }

/* Le numéro d'édition, en filigrane de collection */
.revue__no {
  position: absolute;
  top: 0.7rem;
  right: 1.35rem;
  font-family: var(--font-garalde);
  font-style: italic;
  font-weight: 300;
  font-size: 3.6rem;
  line-height: 1;
  color: rgba(156, 124, 56, 0.14);
  pointer-events: none;
}

/* La carte finale : l'invitation de la maison */
.revue__carte--fin {
  background:
    linear-gradient(180deg, rgba(7, 14, 10, 0.5) 0%, rgba(7, 14, 10, 0) 60%),
    linear-gradient(158deg, var(--vert-nuit) 0%, #273730 60%, #1B2721 100%);
  border-color: rgba(198, 164, 101, 0.4);
  border-top-color: var(--or-clair);
  justify-content: center;
  align-items: center;
  text-align: center;
}
.revue__carte--fin::before { border-color: rgba(198, 164, 101, 0.18); }
.revue__carte--fin .revue__fin-mot {
  font-family: var(--font-garalde);
  font-style: italic;
  font-weight: 300;
  font-size: 1.7rem;
  color: var(--ivoire);
  line-height: 1.25;
}
.revue__carte--fin p {
  display: block;
  height: auto;
  text-align: center;
  font-size: 0.88rem;
  color: rgba(251, 250, 247, 0.8);
  margin-top: 0.9rem;
}
.revue__carte--fin .revue__lien { color: var(--or-clair); margin-top: 1.6rem; }

.revue__carte h3 {
  font-size: 1.28rem;
  line-height: 1.22;
  text-align: justify;
  margin: 0.9rem 0 0.7rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  height: calc(1.28rem * 1.22 * 3);
}
.revue__carte p {
  font-size: 0.9rem;
  text-align: justify;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  height: calc(0.9rem * 1.75 * 3);
  flex: none;
}
.revue__lien {
  margin-top: 1.5rem;
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--or-profond);
}
.revue__lien::after { content: "\2192"; margin-left: 0.5rem; display: inline-block; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.revue__carte:hover .revue__lien::after { transform: translateX(6px); }
.revue__lien::before { content: ""; position: absolute; inset: 0; }

/* La jauge d'or : elle s'emplit au fil du voyage */
.revue__jauge {
  position: relative;
  height: 1px;
  margin: 0.4rem 0.3rem 0;
  background: rgba(156, 124, 56, 0.18);
  overflow: hidden;
}
.revue__jauge-or {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--or-profond), #EAD397);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease-out;
}

/* Les flèches du voyage */
.revue__nav {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 2.2rem;
}
.btn--fleche {
  border: 0;
  background: none;
  padding: 0.6rem 0.9rem;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--or-profond);
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
}
.btn--fleche::after { content: none; }
.btn--fleche:hover { background: none; color: var(--anthracite); }
[data-prec]:hover { transform: translateX(-5px); }
[data-suiv]:hover { transform: translateX(5px); }
@media (max-width: 820px) {
  .revue__rail {
    grid-auto-columns: 300px;
    gap: 1.1rem;
    padding-inline: 0.8rem;
    scroll-padding-inline: 0.8rem;
  }
  .revue__rail > .reveal { scroll-snap-align: start; }
  .revue__nav .btn--fleche { display: none; }
}

/* --- Le triptyque des engagements : un retable gravé sur l'anthracite ------------ */

.triptyque {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 4rem;
  border: 1px solid rgba(198, 164, 101, 0.35);
}
/* Le cadre gravé intérieur, comme sur les cartes de la maison */
.triptyque::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(198, 164, 101, 0.12);
  pointer-events: none;
}

.volet {
  position: relative;
  text-align: center;
  padding: 3.4rem 2.6rem 3.6rem;
}
/* Les séparateurs d'or se dessinent du haut vers le bas */
.volet + .volet::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(198, 164, 101, 0.55) 25%, rgba(198, 164, 101, 0.55) 75%, transparent);
}

.volet__mot {
  font-family: var(--font-garalde);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2rem, 2.6vw, 2.5rem);
  line-height: 1.1;
}
.volet__sous {
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--or-clair);
  margin-top: 0.9rem;
}
.volet__texte {
  font-size: 0.94rem;
  color: rgba(251, 250, 247, 0.85);
  max-width: 16.5rem;
  margin: 1.4rem auto 0;
}

/* L'or du titre sur les fonds sombres */
.band-anthracite .section-head h2 em, .band-dark .section-head h2 em {
  background: linear-gradient(105deg, #A8843C 0%, #EAD397 50%, #C6A465 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Mobile : le triptyque s'empile, les séparateurs deviennent horizontaux */
@media (max-width: 820px) {
  .triptyque { grid-template-columns: 1fr; }
  .volet { padding: 2.8rem 1.8rem 3rem; }
  .volet__texte { max-width: 17rem; }
  .volet + .volet::before {
    left: 18%;
    right: 18%;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(198, 164, 101, 0.55) 25%, rgba(198, 164, 101, 0.55) 75%, transparent);
  }
}

/* --- La frise d'or : votre dossier en quatre temps ------------------------------- */

.section-frise {
  border-top: 1px solid rgba(156, 124, 56, 0.25);
  border-bottom: 1px solid rgba(156, 124, 56, 0.25);
  padding-top: 4.2rem;
}

.frise {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 4.4rem;
  list-style: none;
}

/* La ligne d'or qui traverse le temps */
.frise__ligne {
  position: absolute;
  top: 7px;
  left: 3%;
  right: 3%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(156, 124, 56, 0.75) 10%, rgba(156, 124, 56, 0.75) 90%, transparent);
}
.frise__ligne.reveal { opacity: 1; }

.temps {
  position: relative;
  text-align: center;
  padding-top: 2.6rem;
}
/* Le losange d'or — l'angle vif fait bijou */
.temps__diamant {
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #EAD397 0%, var(--or-profond) 100%);
}
.temps__num {
  font-family: var(--font-garalde);
  font-weight: 300;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--or-profond);
  margin-bottom: 0.5rem;
}
.temps h3 {
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--anthracite);
  margin-bottom: 0.7rem;
}
.temps p { font-size: 0.93rem; max-width: 17rem; margin-inline: auto; }

/* Mobile : la frise devient verticale, la ligne descend au centre */
@media (max-width: 820px) {
  .frise { grid-template-columns: 1fr; gap: 2.8rem; margin-top: 3.4rem; }
  .frise__ligne {
    top: 6px;
    bottom: 0;
    left: 50%;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, rgba(156, 124, 56, 0.75) 0%, rgba(156, 124, 56, 0.75) 92%, transparent);
  }
  .temps { background: var(--pierre); position: relative; z-index: 1; padding-top: 2.4rem; }
}

/* Le sceau de la maison, en filigrane derrière le titre des matières */
.section-domaines {
  background-image: url("/assets/logo/OD-monogramme-filigrane.svg");
  background-repeat: no-repeat;
  background-position: center top 1.6rem;
  background-size: 240px auto;
}

/* Le fil de la revue se déploie à l'ouverture de la section */
@media (prefers-reduced-motion: no-preference) {
  .revue__jauge.reveal {
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 2.4s cubic-bezier(0.33, 0, 0.2, 1);
    transition-delay: 0.15s;
  }
  .revue__jauge.reveal.is-visible { opacity: 1; transform: scaleX(1); }
}

/* Les séparateurs du triptyque se dessinent à l'arrivée de chaque volet */
@media (prefers-reduced-motion: no-preference) {
  .volet.reveal::before {
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 1.8s cubic-bezier(0.33, 0, 0.2, 1) 0.4s;
  }
  .volet.reveal.is-visible::before { transform: scaleY(1); }
}
@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  .volet.reveal::before { transform: scaleX(0); transform-origin: center; }
  .volet.reveal.is-visible::before { transform: scaleX(1); }
}

/* Le fil d'or du registre se déploie à l'arrivée sur les questions */
@media (prefers-reduced-motion: no-preference) {
  .registre__fil.reveal {
    opacity: 1;
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 2.4s cubic-bezier(0.33, 0, 0.2, 1);
    transition-delay: 0.2s;
  }
  .registre__fil.reveal.is-visible { opacity: 1; transform: scaleY(1); }
}

/* La ligne de la frise se déploie au fil des quatre temps */
@media (prefers-reduced-motion: no-preference) {
  .frise__ligne.reveal {
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 2.6s cubic-bezier(0.33, 0, 0.2, 1);
    transition-delay: 0.2s;
  }
  .frise__ligne.reveal.is-visible { opacity: 1; transform: scaleX(1); }
}
@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  .frise__ligne.reveal { transform: scaleY(0); transform-origin: top center; transition-duration: 3s; }
  .frise__ligne.reveal.is-visible { transform: scaleY(1); }
}

/* Téléphone : les cartes restent des objets encadrés, jamais pleine largeur */
@media (max-width: 820px) {
  .card--domaine {
    max-width: 21.5rem;
    width: 100%;
    margin-inline: auto;
  }
  .section-publics .card--domaine { max-width: 19rem; }
}

/* --- Impression -------------------------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .band-dark, .nav-toggle { display: none; }
}

/* Téléphone : les cartes de la bande nuit se font plus discrètes,
   et les étiquettes des publics repassent sous les titres des cartes */
@media (max-width: 600px) {
  .carte-nuit .num { font-size: 1.8rem; }
  .carte-nuit h3 { font-size: 0.76rem; }
  .carte-nuit p:not(.num) { font-size: 0.87rem; }
  .section-publics .card .overline { font-size: 0.7rem; }
}

/* --- Boutons allégés sur petits écrans (le desktop reste intouché) ---------------- */
@media (max-width: 820px) {
  .btn:not(.btn--fleche) { padding: 0.8rem 2.1rem; font-size: 0.76rem; line-height: 1.5; }
}
@media (max-width: 600px) {
  .btn:not(.btn--fleche) { padding: 0.65rem 1.6rem; font-size: 0.7rem; line-height: 1.5; }
  .hero .btn:not(.btn--fleche) { padding: 0.55rem 1.4rem; font-size: 0.66rem; }
  /* Bande nuit : le téléphone se range sous le premier bouton */
  .band-nuit .hero__actions { flex-direction: column; align-items: center; }
  /* Revue : « Explorer le journal » garde son différé, mais raccourci */
  .revue__nav.reveal { transition-delay: 0.6s; }
  /* Parloir : les deux boutons laissent passer la dernière question */
  .parloir__pied.reveal { transition-delay: 0.85s; }
}

/* --- Pied de page tablette & téléphone : même ADN, sans rideau -------------------- */
/* (le rideau sticky rend le haut d'un pied plus haut que l'écran inaccessible) */
@media (max-width: 1024px) {
  .site-footer { position: relative; bottom: auto; }
  html.pied-rideau .site-footer { position: sticky; bottom: 0; }
  .site-footer__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.8rem 3.2rem;
    padding: 3.4rem 0 3rem;
    max-width: 700px;
    margin-inline: auto;
  }
  .site-footer__cta .container { max-width: 700px; }
  .site-footer__brand {
    grid-column: 1 / -1;
    justify-self: start;
    align-self: auto;
  }
  .site-footer__brand img { height: 76px; }
}

/* Sans rideau (pied plus haut que l'écran) : chaque étage naît sous le doigt */
@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
  html:not(.pied-rideau) .site-footer__cta .container > div,
  html:not(.pied-rideau) .site-footer__cta .container > .btn,
  html:not(.pied-rideau) .site-footer__grid > div,
  html:not(.pied-rideau) .site-footer__legal { transition-delay: 0.05s; }
  .site-footer .est-ne,
  .site-footer__cta .container > .est-ne { opacity: 1; transform: none; }
  .site-footer__grid > div.est-ne h3::after { opacity: 1; }
}

/* Téléphone : la carte de visite de la maison — tout centré, tout aligné */
@media (max-width: 600px) {
  .site-footer__cta .container {
    flex-direction: column;
    text-align: center;
    gap: 1.45rem;
  }
  .site-footer__cta { padding: 2.2rem 0 2.3rem; }
  .site-footer__cta .container { max-width: none; }
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem 0.8rem;
    padding: 0.85rem 0 0.85rem;
    text-align: center;
    max-width: none;
  }
  .site-footer__brand { margin-bottom: 0.5rem; }
  .site-footer__brand { justify-self: center; }
  /* La signature de la maison remplace la colonne Contact */
  .site-footer__grid > div:nth-child(4) {
    grid-column: 1 / -1;
    position: relative;
    padding-top: 1.15rem;
    margin-top: 0.4rem;
  }
  .site-footer__grid > div:nth-child(4)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 170px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(198, 164, 101, 0.38), transparent);
  }
  /* Le titre « Contact » reste pour Google, invisible à l'œil */
  .site-footer__grid > div:nth-child(4) h3 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    margin: 0;
  }
  .site-footer__grid > div:nth-child(4) li {
    margin-bottom: 0;
    font-size: 0.65rem;
    line-height: 1.35;
  }
  /* Téléphone · e-mail réunis sur une seule ligne */
  .site-footer__grid > div:nth-child(4) li:nth-child(2),
  .site-footer__grid > div:nth-child(4) li:nth-child(3) { display: inline-block; }
  .site-footer__grid > div:nth-child(4) li:nth-child(3)::before {
    content: "·";
    color: var(--or-clair);
    font-size: 1.7em;
    line-height: 0;
    vertical-align: -0.08em;
    margin: 0 0.5rem;
  }
  /* Les horaires, en italique de la maison */
  .site-footer__grid > div:nth-child(4) li:nth-child(4) { display: none; }
  .site-footer__brand img { height: 48px; }
  .site-footer h3 { margin-bottom: 0.9rem; }
  .site-footer h3::after {
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .site-footer li { margin-bottom: 0.26rem; }
  .site-footer__legal {
    justify-content: center;
    text-align: center;
    padding: 0.65rem 1rem 0.75rem;
    font-size: 0.65rem;
  }
  .site-footer { font-size: 0.72rem; }
  .site-footer h3 { font-size: 0.65rem; }
  .site-footer__cta h2 { font-size: 1.08rem; }
  .site-footer__cta .overline { font-size: 0.7rem; }
  .site-footer__cta .btn { padding: 0.5rem 1.3rem; font-size: 0.62rem; }
  .site-footer__filigrane { width: 95vw; right: -22%; top: 62%; }
  .site-footer__legal {
    line-height: 1.45;
    flex-wrap: nowrap;
    white-space: nowrap;
    padding-inline: 0.4rem;
    font-size: min(0.57rem, 2.3vw);
  }
}

/* --- Parloir en tablette : questions et pupitre à l'échelle ----------------------- */
@media (min-width: 601px) and (max-width: 1024px) {
  .registre__q { font-size: 1.02rem; }
  .registre__q .num { font-size: 0.8rem; }
  .pupitre { padding: 2.2rem 2rem 1.9rem; }
  .pupitre__rep .overline { font-size: 0.62rem; }
  .pupitre__rep h3 { font-size: 1.12rem; }
  .pupitre__rep p { font-size: 0.86rem; }
  .pupitre__lien { font-size: 0.66rem; }
  .pupitre__no { font-size: 5.4rem; }
}

/* Ordinateur : les cartes des publics glissent plus posément */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  .section-publics .cards > .reveal { transition-duration: 2.9s; }
}



/* --- Bannière de consentement (cookies) ------------------------------------------- */
.cookies {
  position: fixed;
  left: 22px;
  bottom: 22px;
  transform: translateY(44px);
  width: min(420px, calc(100vw - 44px));
  background:
    radial-gradient(30rem 16rem at 50% 118%, rgba(198, 164, 101, 0.14), transparent 62%),
    linear-gradient(163deg, #24382F 0%, var(--vert-nuit) 58%, #121E18 100%);
  border: 1px solid rgba(198, 164, 101, 0.42);
  border-radius: 22px;
  padding: 1.5rem 1.55rem 1.3rem;
  z-index: 140;
  color: var(--ivoire);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.cookies.est-ouverte { opacity: 1; pointer-events: auto; transform: translateY(0); }
.cookies::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(198, 164, 101, 0.13);
  border-radius: 16px;
  pointer-events: none;
}
.cookies__tete {
  display: grid;
  grid-template-columns: 36px 1fr 30px;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.05rem;
}
.cookies__filet {
  display: block;
  width: 64px;
  height: 1px;
  margin: 0 auto 1.05rem;
  background: radial-gradient(50% 140% at 50% 50%, rgba(234, 211, 151, 0.9) 0%, rgba(198, 164, 101, 0.55) 42%, rgba(198, 164, 101, 0) 96%);
}
.cookies__logo { height: 34px; width: auto; }
.cookies__titre {
  text-align: center;
  font-family: var(--font-garalde);
  font-weight: 300;
  font-size: 1.14rem;
  color: var(--ivoire);
  margin: 0;
}
.cookies__croix {
  justify-self: end;
  width: 28px;
  height: 28px;
  background: none;
  border: 0;
  position: relative;
  cursor: pointer;
  padding: 0;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.cookies__croix::before,
.cookies__croix::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 1px;
  background: rgba(251, 250, 247, 0.8);
  transition: background 0.3s ease;
}
.cookies__croix::before { transform: translate(-50%, -50%) rotate(45deg); }
.cookies__croix::after { transform: translate(-50%, -50%) rotate(-45deg); }
.cookies__croix:hover, .cookies__croix:focus-visible { transform: rotate(90deg); }
.cookies__croix:hover::before, .cookies__croix:hover::after,
.cookies__croix:focus-visible::before, .cookies__croix:focus-visible::after { background: var(--or-clair); }
.cookies__texte {
  font-size: 0.72rem;
  line-height: 1.6;
  color: rgba(251, 250, 247, 0.8);
  text-align: justify;
  hyphens: none;
  margin: 0 0 1.05rem;
}
.cookies__actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}
.cookies__actions .btn { padding: 0.45rem 1rem; font-size: 0.6rem; }
.cookies__actions .btn { flex: 1; text-align: center; }
.cookies__actions .btn--plein {
  background: var(--or-profond);
  border-color: var(--or-profond);
  color: var(--ivoire);
}
.cookies__actions .btn--plein:hover, .cookies__actions .btn--plein:focus-visible {
  background: var(--or-clair);
  border-color: var(--or-clair);
  color: var(--anthracite);
}
.cookies__actions .btn--contour {
  color: var(--ivoire);
  border-color: rgba(198, 164, 101, 0.75);
}
.cookies__actions .btn--contour:hover, .cookies__actions .btn--contour:focus-visible {
  color: var(--or-clair);
  border-color: var(--or-clair);
}
.cookies__liens {
  text-align: center;
  font-size: 0.72rem;
}
.cookies__liens a {
  color: var(--or-clair);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin: 0 0.7rem;
}
/* Le panneau des préférences */
.cookies__prefs { display: none; border-top: 1px solid rgba(198, 164, 101, 0.25); padding-top: 1.1rem; margin-bottom: 1rem; }
.cookies.montre-prefs .cookies__prefs { display: block; }
.cookies__pref {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.45rem 0;
  font-size: 0.88rem;
}
.cookies__pref small { display: block; color: rgba(251, 250, 247, 0.6); font-size: 0.78rem; }
.cookies__toujours { color: var(--or-clair); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.cookies__interrupteur { position: relative; width: 46px; height: 24px; flex-shrink: 0; }
.cookies__interrupteur input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cookies__interrupteur span {
  position: absolute;
  inset: 0;
  background: rgba(251, 250, 247, 0.18);
  border-radius: 999px;
  transition: background 0.3s ease;
  pointer-events: none;
}
.cookies__interrupteur span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ivoire);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.cookies__interrupteur input:checked + span { background: var(--or-profond); }
.cookies__interrupteur input:checked + span::after { transform: translateX(22px); }
.cookies__sauver { margin-top: 0.7rem; text-align: center; }

/* La languette de rappel — ordinateur uniquement */
.cookies-languette {
  display: none;
  position: fixed;
  left: 26px;
  bottom: 0;
  transform: translateY(72%);
  z-index: 139;
  background: rgba(21, 32, 26, 0.93);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 0.5px solid rgba(198, 164, 101, 0.38);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  color: var(--ivoire);
  font-family: var(--font-lineale);
  font-size: 0.82rem;
  padding: 0.6rem 1.7rem 0.8rem;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease, background 0.35s ease;
}
@media (min-width: 1025px) {
  .cookies-languette.est-visible { display: block; }
}
.cookies-languette:hover, .cookies-languette:focus-visible {
  transform: translateY(0);
  background: rgba(21, 32, 26, 0.97);
  border-color: rgba(198, 164, 101, 0.55);
  color: var(--or-clair);
}

@media (max-width: 600px) {
  .cookies { left: 12px; bottom: 12px; width: calc(100vw - 24px); padding: 1.15rem 1.05rem 1rem; border-radius: 18px; }
  .cookies__titre { font-size: 1.06rem; }
}
@media print { .cookies, .cookies-languette { display: none !important; } }

/* --- Pages intérieures : pleine largeur, quel que soit l'écran (ordre cliente) ----- */
/* L'accueil (1320px, règle n°1) ainsi que l'en-tête et le pied de page, partagés
   et gelés, ne sont pas concernés : seul le contenu principal des pages s'étend. */
body:has(.page-hero) main .container {
  width: calc(100% - clamp(2.4rem, 6vw, 8rem));
  max-width: none;
}
body:has(.page-hero) main .container--narrow {
  width: min(var(--w-text), 100% - 3rem);
}
body:has(.page-hero) main .two-col {
  column-gap: clamp(3rem, 5.5vw, 7.5rem);
}

/* ═══════════════════════════ PAGE LE CABINET — LA MAISON ═══════════════════════════ */

/* --- Héros maison : cérémoniel, sceau monumental, table des faits gravée ----------- */
.page-hero--maison { padding: 7.6rem 0 0; }
.sceau-maison {
  position: absolute;
  top: 44%;
  right: -3%;
  transform: translateY(-52%);
  width: min(560px, 42vw);
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
}
.page-hero--maison h1 {
  font-size: clamp(2.5rem, 4.4vw, 4.2rem);
  line-height: 1.1;
  max-width: 15.5em;
  text-shadow: 0 2px 34px rgba(0, 0, 0, 0.38);
}
.page-hero--maison .page-hero__lede { font-size: 1.05rem; line-height: 1.85; max-width: 44em; }

.hero__faits {
  margin-top: 4.8rem;
  border-top: 1px solid rgba(198, 164, 101, 0.30);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.fait { position: relative; padding: 1.8rem 2rem 2.4rem 0; }
.fait + .fait { padding-left: 2.4rem; border-left: 1px solid rgba(198, 164, 101, 0.16); }
.fait::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #EAD397 0%, var(--or-profond) 100%);
}
.fait + .fait::before { left: 2.4rem; }
.fait__titre {
  font-family: var(--font-garalde);
  font-weight: 400;
  font-size: 1.42rem;
  line-height: 1.25;
  color: var(--ivoire);
}
.fait__sous { margin-top: 0.45rem; font-size: 0.85rem; color: rgba(251, 250, 247, 0.6); }

/* --- Frise : la mention gravée sous chaque temps ------------------------------------ */
.temps__mention {
  margin-top: 0.85rem;
  max-width: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-lineale);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or-profond);
}
.temps__mention::before, .temps__mention::after {
  content: "";
  width: 15px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(156, 124, 56, 0.7));
}
.temps__mention::after { background: linear-gradient(90deg, rgba(156, 124, 56, 0.7), transparent); }

/* --- Le palmarès : quatre mentions gravées dans la pierre --------------------------- */
.palmares {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 4.8rem;
  border-top: 1px solid rgba(156, 124, 56, 0.28);
  list-style: none;
  padding: 0;
}
.palmares li { position: relative; text-align: center; padding: 2.2rem 1.2rem 0.4rem; }
.palmares li + li { border-left: 1px solid rgba(156, 124, 56, 0.16); }
.palmares li::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 7px;
  height: 7px;
  background: linear-gradient(135deg, #EAD397 0%, var(--or-profond) 100%);
}
.palmares__rang {
  font-family: var(--font-garalde);
  font-weight: 300;
  font-size: 1.72rem;
  line-height: 1.2;
}
.palmares__quoi {
  margin-top: 0.5rem;
  font-family: var(--font-lineale);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(44, 52, 48, 0.66);
}

/* --- Figure au cadre décalé : photo N&B, cadre d'or, cartel gravé DANS le cadre ----- */
.figure-cadre {
  position: relative;
  margin: 0;
  max-width: 460px;
  width: 100%;
  margin-inline: auto;
}
.figure-cadre--large { max-width: 500px; }
.figure-cadre::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 0;
  bottom: 0;
  left: 16px;
  border: 1px solid rgba(156, 124, 56, 0.5);
  pointer-events: none;
}
.band-anthracite .figure-cadre::before { border-color: rgba(198, 164, 101, 0.4); }
.figure-cadre__photo {
  position: relative;
  overflow: hidden;
  width: calc(100% - 16px);
  aspect-ratio: 4 / 5;
  box-shadow: 0 26px 60px -30px rgba(15, 25, 20, 0.55);
}
.figure-cadre__photo--large { aspect-ratio: 6 / 7; }
.figure-cadre__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Respiration lente au survol — l'image s'anime dans son cadre (transform seul) */
.figure-cadre:hover .figure-cadre__photo img:not(.figure-cadre__marque) { transform: scale(1.035); }
.figure-cadre__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(21, 32, 26, 0) 62%, rgba(21, 32, 26, 0.26) 100%);
  pointer-events: none;
}
.figure-cadre__photo img.figure-cadre__marque {
  position: absolute;
  right: 1.05rem;
  bottom: 0.95rem;
  width: 46px;
  height: auto;
  object-fit: contain;
  z-index: 2;
  opacity: 0.85;
  filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.35));
}
/* Le cartel : une plaque gravée, à l'intérieur du cadre d'or */
.figure-cadre figcaption {
  position: relative;
  margin-left: 16px;
  padding: 1rem 1.1rem 1.15rem;
  text-align: center;
  border-top: 1px solid rgba(156, 124, 56, 0.35);
  background: rgba(156, 124, 56, 0.06);
}
.band-anthracite .figure-cadre figcaption {
  border-top-color: rgba(198, 164, 101, 0.35);
  background: rgba(10, 17, 13, 0.35);
}
.figure-cadre .nom {
  display: block;
  font-family: var(--font-garalde);
  font-size: 1.18rem;
  color: var(--anthracite);
}
.figure-cadre .role {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-lineale);
  font-size: 0.62rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--or-profond);
}
/* Le diamant du cartel, entre le nom et le rôle — la signature de la maison */
.figure-cadre .role::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  margin: 0.5rem auto 0.55rem;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #EAD397 0%, var(--or-profond) 100%);
}
.band-anthracite .figure-cadre .nom { color: var(--ivoire); }
.band-anthracite .figure-cadre .role { color: var(--or-clair); }

/* --- Les chapitres de la maison : chiffre fantôme, devise, signes gravés ------------ */
.chapitre { position: relative; }
.chiffre-fantome {
  position: absolute;
  top: -5rem;
  right: -0.6rem;
  font-family: var(--font-garalde);
  font-weight: 300;
  font-size: 10rem;
  line-height: 1;
  color: rgba(156, 124, 56, 0.13);
  pointer-events: none;
  user-select: none;
}
.band-anthracite .chiffre-fantome { color: rgba(198, 164, 101, 0.1); }
.two-col p.devise {
  position: relative;
  font-family: var(--font-garalde);
  font-style: italic;
  font-weight: 300;
  font-size: 1.32rem;
  line-height: 1.5;
  color: var(--or-profond);
  margin: 1.7rem 0 0.4rem;
  padding-left: 1.55rem;
  max-width: none;
}
/* Le diamant de la devise — aligné sur ceux des signes, il ouvre la colonne */
.two-col p.devise::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #EAD397 0%, var(--or-profond) 100%);
}
.band-anthracite .two-col p.devise { color: var(--or-clair); }
.signes {
  margin: 2.1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.9rem;
}
.signes li { position: relative; padding-left: 1.55rem; font-size: 0.95rem; }
.signes li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.52em;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #EAD397 0%, var(--or-profond) 100%);
}
.band-anthracite .signes li { color: rgba(251, 250, 247, 0.85); }

/* --- Sections avocates & structure --------------------------------------------------- */
.section-avocate .two-col, .section-structure .two-col, .section-associee .two-col {
  align-items: center;
}
.structure__voies { margin-top: 2.4rem; display: grid; gap: 1.3rem; }
.voie { border-left: 2px solid rgba(198, 164, 101, 0.45); padding: 0.3rem 0 0.35rem 1.3rem; }
.voie__nom { font-family: var(--font-garalde); font-size: 1.22rem; color: var(--ivoire); }
.section-structure .voie__dom {
  margin-top: 0.2rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(251, 250, 247, 0.55);
}

/* --- Tablette ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .sceau-maison { width: 50vw; right: -16%; opacity: 0.05; }
  .palmares__rang { font-size: 1.45rem; }
}

@media (max-width: 820px) {
  .page-hero--maison { padding-top: 6.4rem; }
  .hero__faits { grid-template-columns: 1fr; margin-top: 3.4rem; }
  .fait { padding: 1.15rem 0 1.3rem 1.5rem; }
  .fait + .fait { padding-left: 1.5rem; border-left: 0; border-top: 1px solid rgba(198, 164, 101, 0.16); }
  .fait::before, .fait + .fait::before { top: 1.55rem; left: 0; }
  .palmares { grid-template-columns: repeat(2, 1fr); margin-top: 3.2rem; border-top: 0; }
  .palmares li { border-top: 1px solid rgba(156, 124, 56, 0.28); padding: 1.9rem 0.8rem 0.4rem; }
  .palmares li + li { border-left: 0; }
  .palmares li:nth-child(even) { border-left: 1px solid rgba(156, 124, 56, 0.16); }
  /* le texte d'abord, le portrait ensuite — sur toutes les sections de la maison */
  .section-avocate .two-col > figure,
  .section-associee .two-col > figure { order: 2; }
  .section-structure[data-reveal-group] .two-col > div:first-child { order: 0; }
  .chiffre-fantome { top: -3.2rem; font-size: 6.5rem; }
}

/* --- Téléphone : composition invariante (règle de marbre) ---------------------------- */
@media (max-width: 600px) {
  .page-hero--maison { padding-top: 5.8rem; }
  .page-hero--maison h1 { font-size: min(2.1rem, 8.6vw); }
  .page-hero--maison .page-hero__lede { font-size: min(0.92rem, 3.9vw); }
  .fait__titre { font-size: min(1.26rem, 5.4vw); }
  .fait__sous { font-size: min(0.8rem, 3.4vw); }
  .hero__faits { margin-top: 2.8rem; }
  .palmares { grid-template-columns: 1fr; }
  .palmares li { text-align: left; padding: 1.35rem 0 1.45rem 1.5rem; }
  .palmares li:nth-child(even) { border-left: 0; }
  .palmares li::before { left: 0; top: 1.85rem; transform: rotate(45deg); }
  .palmares__rang { font-size: min(1.4rem, 6vw); }
  .palmares__quoi { font-size: min(0.68rem, 3vw); margin-top: 0.3rem; }
  .temps__mention { font-size: min(0.66rem, 2.9vw); }
  .figure-cadre::before { top: 12px; left: 12px; }
  .figure-cadre__photo { width: calc(100% - 12px); }
  .figure-cadre figcaption { margin-left: 12px; }
  .figure-cadre .nom { font-size: min(1.1rem, 4.7vw); }
  .figure-cadre .role { font-size: min(0.6rem, 2.7vw); }
  .chiffre-fantome { top: -2.6rem; right: 0; font-size: min(4.8rem, 20vw); }
  .two-col p.devise { font-size: min(1.03rem, 4.4vw); padding-left: 1.3rem; }
  .signes li { font-size: min(0.9rem, 3.85vw); }
  .voie__nom { font-size: min(1.12rem, 4.8vw); }
  .section-structure .voie__dom { font-size: min(0.7rem, 3.1vw); }
}

/* --- Héros maison V2 : frontispice centré, plaque de maison, ligne d'apparat -------- */
.page-hero--maison { text-align: center; padding: 8.2rem 0 6.8rem; }
.page-hero--maison h1 {
  max-width: 18em;
  margin-inline: auto;
  font-size: clamp(2.6rem, 4.8vw, 4.5rem);
  line-height: 1.12;
}
.page-hero--maison .filet {
  width: 150px;
  height: 3px;
  margin: 2rem auto 0;
  background: linear-gradient(90deg, rgba(198, 164, 101, 0) 0%, var(--or-clair) 9%, #EAD397 42%, var(--or-clair) 88%, rgba(198, 164, 101, 0) 100%);
  clip-path: polygon(0% 22%, 100% 45%, 100% 55%, 0% 76%);
}
.page-hero--maison .page-hero__lede { margin: 1.8rem auto 0; }
.ligne-apparat {
  margin: 3.2rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}
.ligne-apparat li {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-lineale);
  font-size: 0.72rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: rgba(251, 250, 247, 0.78);
}
.ligne-apparat li + li::before {
  content: "";
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #EAD397 0%, var(--or-profond) 100%);
}

@media (max-width: 600px) {
  .page-hero--maison { padding: 6rem 0 4.8rem; }
  .page-hero--maison h1 { font-size: min(1.9rem, 8vw); }
  .ligne-apparat { flex-direction: column; gap: 0.95rem; margin-top: 2.6rem; }
  .ligne-apparat li { font-size: min(0.66rem, 2.95vw); }
  .ligne-apparat li + li { flex-direction: column; gap: 0.95rem; }
}

/* --- Héros cabinet V3 : éditorial de maison, marge d'or, frise à diamants ----------- */
.page-hero--maison { text-align: left; padding: 7.8rem 0 6.2rem; }
.page-hero--maison h1 {
  margin-inline: 0;
  max-width: 16em;
  font-size: clamp(2.6rem, 4.6vw, 4.4rem);
  line-height: 1.1;
}
.page-hero--maison .filet { margin: 2rem 0 0; }
.page-hero--maison .page-hero__lede { margin: 1.7rem 0 0; }
/* Lueur d'atmosphère derrière le titre */
.lueur-hero {
  position: absolute;
  top: 8%;
  left: -6%;
  width: 56rem;
  height: 30rem;
  background: radial-gradient(closest-side, rgba(198, 164, 101, 0.12), transparent 68%);
  pointer-events: none;
}
/* La marge d'or — un fil vertical de manuscrit le long du texte */
.filet-marge {
  position: absolute;
  left: -1.9rem;
  top: 0.5rem;
  bottom: 0.7rem;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(198, 164, 101, 0.55) 18%, rgba(198, 164, 101, 0.55) 82%, transparent 100%);
  pointer-events: none;
}
/* La frise de la maison : un fil d'or, quatre diamants, quatre repères */
.hero-frise {
  position: relative;
  margin: 4.6rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
}
.hero-frise::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(198, 164, 101, 0.75), rgba(198, 164, 101, 0.22) 50%, rgba(198, 164, 101, 0.75));
}
.hero-frise li { position: relative; padding-top: 1.45rem; }
.hero-frise li::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #EAD397 0%, var(--or-profond) 100%);
}
.hero-frise .quoi {
  font-family: var(--font-lineale);
  font-size: 0.62rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--or-clair);
}
.hero-frise .valeur {
  margin-top: 0.4rem;
  font-family: var(--font-garalde);
  font-weight: 400;
  font-size: 1.08rem;
  line-height: 1.35;
  color: rgba(251, 250, 247, 0.92);
}

@media (max-width: 1024px) {
  .hero-frise { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.6rem; }
  .hero-frise::before { display: none; }
  .hero-frise li { border-top: 1px solid rgba(198, 164, 101, 0.4); }
}
@media (max-width: 820px) {
  .filet-marge { display: none; }
}
@media (max-width: 600px) {
  .page-hero--maison { padding: 5.9rem 0 4.6rem; }
  .page-hero--maison h1 { font-size: min(2.05rem, 8.6vw); }
  .hero-frise { grid-template-columns: 1fr; gap: 1.7rem; margin-top: 3.2rem; }
  .hero-frise .quoi { font-size: min(0.6rem, 2.7vw); }
  .hero-frise .valeur { font-size: min(1.02rem, 4.5vw); }
}

/* --- Héros cabinet V4 : bandeau d'orfèvre, sans marge verticale ---------------------- */
.filet-marge { display: none; }
.lueur-hero { top: 11%; }
.hero-frise { margin-top: 4.8rem; gap: 1.6rem 2rem; }
.hero-frise li { text-align: center; padding-top: 1.7rem; }
.hero-frise li::before { left: 50%; transform: translateX(-50%) rotate(45deg); }
.hero-frise .valeur {
  margin-top: 0;
  font-size: 1.22rem;
  line-height: 1.3;
}
.hero-frise .valeur .accent-or { font-weight: 400; }
.hero-frise .quoi {
  margin-top: 0.45rem;
  font-size: 0.58rem;
  color: rgba(251, 250, 247, 0.55);
}

@media (max-width: 600px) {
  .hero-frise { margin-top: 3.4rem; gap: 1.6rem; }
  .hero-frise li { padding-top: 1.45rem; }
  .hero-frise .valeur { font-size: min(1.06rem, 4.7vw); }
  .hero-frise .quoi { font-size: min(0.56rem, 2.55vw); }
}

/* --- Héros cabinet V5 : surtitre-signature, dalle de verre avant-gardiste ------------ */
/* Le surtitre porte désormais l'effet du trait : tiret effilé, losange, texte — tout en or vivant */
.overline--signature {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(105deg, #8F6F2E 0%, #C6A465 28%, #EAD397 52%, #C6A465 76%, #8F6F2E 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.overline--signature::before {
  content: "";
  flex: none;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, rgba(198, 164, 101, 0) 0%, var(--or-clair) 18%, #EAD397 58%, var(--or-clair) 100%);
  clip-path: polygon(0% 30%, 100% 42%, 100% 58%, 0% 70%);
}
.overline--signature .losange {
  flex: none;
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #EAD397 0%, var(--or-profond) 100%);
}
/* Le trait sous le titre disparaît (l'effet vit dans le surtitre) ; le lede s'élargit */
.page-hero--maison .page-hero__lede { max-width: 47em; font-size: 1.05rem; line-height: 1.85; }

/* La dalle de verre : les repères du cabinet derrière un verre fumé,
   les poussières d'or continuent de flotter derrière — matière vivante */
.hero-dalle {
  margin: 4.6rem 0 0;
  padding: 0;
  list-style: none;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(21, 32, 26, 0.4);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(198, 164, 101, 0.26);
  box-shadow: 0 30px 70px -34px rgba(7, 14, 10, 0.65);
}
.hero-dalle li {
  position: relative;
  padding: 1.55rem 1.8rem 1.7rem;
  transition: background 0.5s ease;
}
.hero-dalle li + li { border-left: 1px solid rgba(251, 250, 247, 0.08); }
.hero-dalle li:hover { background: rgba(251, 250, 247, 0.04); }
.hero-dalle .num {
  font-family: var(--font-garalde);
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--or-clair);
}
.hero-dalle .quoi {
  margin-top: 0.5rem;
  font-family: var(--font-lineale);
  font-size: 0.57rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: rgba(251, 250, 247, 0.5);
}
.hero-dalle .valeur {
  margin-top: 0.28rem;
  font-family: var(--font-garalde);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.35;
  color: rgba(251, 250, 247, 0.94);
}

@media (max-width: 1024px) {
  .hero-dalle { grid-template-columns: repeat(2, 1fr); }
  .hero-dalle li:nth-child(3) { border-left: 0; }
  .hero-dalle li:nth-child(n+3) { border-top: 1px solid rgba(251, 250, 247, 0.08); }
}
@media (max-width: 600px) {
  .hero-dalle { grid-template-columns: 1fr; margin-top: 3.2rem; }
  .hero-dalle li { padding: 1.05rem 1.15rem 1.15rem; }
  .hero-dalle li + li { border-left: 0; border-top: 1px solid rgba(251, 250, 247, 0.08); }
  .hero-dalle .num { font-size: min(0.85rem, 3.8vw); }
  .hero-dalle .quoi { font-size: min(0.54rem, 2.45vw); margin-top: 0.35rem; }
  .hero-dalle .valeur { font-size: min(0.97rem, 4.2vw); }
  .overline--signature { font-size: min(0.65rem, 2.9vw); gap: 0.55rem; }
  .overline--signature::before { width: 24px; }
}

/* --- Héros cabinet V6 : surtitre déployé, dalle en rail de verre sur téléphone ------- */
/* Le surtitre se déploie progressivement, comme le trait d'origine */
@keyframes deploiement-or {
  from { clip-path: inset(0 100% 0 0); opacity: 0.5; }
  to   { clip-path: inset(0 -8% 0 0); opacity: 1; }
}
.page-hero .container > .overline--signature {
  animation: deploiement-or 1.7s cubic-bezier(0.25, 0.6, 0.3, 1) 0.3s both;
}
/* Le losange du surtitre disparaît — seul le tiret effilé demeure */
.overline--signature .losange { display: none; }
/* Respiration entre le titre et le texte */
.page-hero--maison .page-hero__lede { margin-top: 2.4rem; }

/* Téléphone : la dalle devient un RAIL DE VERRE — cartes à glissement magnétique */
@media (max-width: 600px) {
  .hero-dalle {
    display: flex;
    gap: 0.9rem;
    background: none;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(50% - 50vw);
    padding: 0.2rem calc(50vw - 50%) 0.6rem;
  }
  .hero-dalle::-webkit-scrollbar { display: none; }
  .hero-dalle li {
    flex: 0 0 78vw;
    scroll-snap-align: center;
    background: rgba(21, 32, 26, 0.42);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(198, 164, 101, 0.26);
    box-shadow: 0 22px 50px -26px rgba(7, 14, 10, 0.6);
    padding: 1.2rem 1.25rem 1.3rem;
  }
  .hero-dalle li + li { border-top: 1px solid rgba(198, 164, 101, 0.26); }
}

/* --- Héros cabinet V7 : carton de verre unique (téléphone) + reflet de lumière ------- */
/* Le reflet : la lumière traverse le verre une seule fois à l'arrivée (one-shot) */
.hero-dalle { overflow: hidden; }
.hero-dalle::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: 0;
  width: 34%;
  background: linear-gradient(100deg, transparent 0%, rgba(251, 250, 247, 0.06) 45%, rgba(234, 211, 151, 0.11) 55%, transparent 100%);
  transform: translateX(-320%) skewX(-18deg);
  animation: reflet-verre 2.4s cubic-bezier(0.3, 0.4, 0.2, 1) 1.7s forwards;
  pointer-events: none;
}
@keyframes reflet-verre {
  to { transform: translateX(460%) skewX(-18deg); }
}

/* Téléphone : UNE seule carte de verre, composée comme un carton gravé */
@media (max-width: 600px) {
  .hero-dalle {
    display: block;
    margin-inline: 0;
    padding: 1.8rem 1.15rem 1.9rem;
    background: rgba(21, 32, 26, 0.42);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(198, 164, 101, 0.26);
    box-shadow: 0 26px 60px -28px rgba(7, 14, 10, 0.65);
    text-align: center;
    overflow: hidden;
  }
  .hero-dalle li {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: none;
    border: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .hero-dalle li + li,
  .hero-dalle li:nth-child(n+3) {
    position: relative;
    margin-top: 1.4rem;
    padding-top: 1.4rem;
    border: 0;
  }
  /* le micro-trait d'or gravé entre les repères — jamais de bord de tableau */
  .hero-dalle li + li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(198, 164, 101, 0.8), transparent);
  }
  .hero-dalle .num { display: none; }
  .hero-dalle .valeur { order: -1; margin-top: 0; font-size: min(0.96rem, 4.1vw); }
  .hero-dalle .quoi { margin-top: 0.4rem; }
}

/* --- Héros cabinet V8 : TÉLÉPHONE seul — compact, titre 2 lignes, sceau monumental --- */
@media (max-width: 600px) {
  .page-hero--maison { padding: 4.6rem 0 3.7rem; }
  /* Le sceau devient monumental, comme sur l'accueil */
  .page-hero--maison .sceau-maison {
    width: 96vw;
    max-width: none;
    right: -30vw;
    top: 36%;
    opacity: 0.055;
  }
  /* RÈGLE DE MARBRE : « Un cabinet d'avocat au Mans, » = ligne 1, « où l'exigence fait loi » = ligne 2,
     sur TOUS les téléphones (vw plafonné, calibré pour tenir à 320 gouttières fixes comprises) */
  .page-hero--maison h1 { font-size: min(1.72rem, 7.2vw); line-height: 1.18; }
  .overline--signature { font-size: min(0.6rem, 2.7vw); }
  .page-hero--maison .page-hero__lede { font-size: min(0.84rem, 3.65vw); line-height: 1.8; margin-top: 1.4rem; }
  /* La carte de verre, plus précieuse : cadre gravé intérieur, coins d'or, monogramme fantôme */
  .hero-dalle {
    margin-top: 2.4rem;
    padding: 1.55rem 1.1rem 1.65rem;
    outline: 1px solid rgba(198, 164, 101, 0.16);
    outline-offset: -7px;
    background-color: rgba(21, 32, 26, 0.42);
    background-image:
      linear-gradient(rgba(234, 211, 151, 0.9), rgba(234, 211, 151, 0.9)),
      linear-gradient(rgba(234, 211, 151, 0.9), rgba(234, 211, 151, 0.9)),
      linear-gradient(rgba(234, 211, 151, 0.9), rgba(234, 211, 151, 0.9)),
      linear-gradient(rgba(234, 211, 151, 0.9), rgba(234, 211, 151, 0.9)),
      linear-gradient(rgba(234, 211, 151, 0.9), rgba(234, 211, 151, 0.9)),
      linear-gradient(rgba(234, 211, 151, 0.9), rgba(234, 211, 151, 0.9)),
      linear-gradient(rgba(234, 211, 151, 0.9), rgba(234, 211, 151, 0.9)),
      linear-gradient(rgba(234, 211, 151, 0.9), rgba(234, 211, 151, 0.9)),
      url("/assets/logo/OD-monogramme-filigrane.svg");
    background-repeat: no-repeat;
    background-size:
      14px 1px, 1px 14px,
      14px 1px, 1px 14px,
      14px 1px, 1px 14px,
      14px 1px, 1px 14px,
      58vw auto;
    background-position:
      left 3px top 3px, left 3px top 3px,
      right 3px top 3px, right 3px top 3px,
      left 3px bottom 3px, left 3px bottom 3px,
      right 3px bottom 3px, right 3px bottom 3px,
      right -18vw bottom -16vw;
  }
  .hero-dalle li + li { margin-top: 1.25rem; padding-top: 1.25rem; }
}

/* --- Héros cabinet V9 : téléphone — titre au plafond du marbre, carte spectaculaire -- */
@media (max-width: 600px) {
  /* Titre agrandi au maximum que la règle des 2 lignes autorise (calibré à 320px) */
  .page-hero--maison h1 { font-size: min(1.77rem, 7.55vw); }
  .overline--signature { font-size: min(0.55rem, 2.45vw); }
  /* La plaque arrière : une seconde plaque de verre décalée, par ombres pleines
     (l'overflow:hidden de la carte interdit un pseudo-élément débordant) */
  .hero-dalle {
    box-shadow:
      11px 12px 0 -1px rgba(16, 25, 20, 0.55),
      11px 12px 0 0 rgba(198, 164, 101, 0.3),
      0 30px 64px -26px rgba(7, 14, 10, 0.7);
  }
  /* L'arête de lumière : le chant du verre accroche la lueur au sommet */
  .hero-dalle::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(234, 211, 151, 0.6), transparent);
  }
  /* La lumière au défilement (couche pilotée par main.js) */
  .dalle-lumiere {
    position: absolute;
    top: -40%;
    bottom: -40%;
    left: 18%;
    width: 46%;
    background: linear-gradient(100deg, transparent 0%, rgba(251, 250, 247, 0.05) 45%, rgba(234, 211, 151, 0.09) 55%, transparent 100%);
    transform: translateX(-90%) skewX(-18deg);
    will-change: transform;
    pointer-events: none;
  }
  .hero-dalle li { position: relative; z-index: 1; }
}

/* --- Héros cabinet V10 : carte épurée moderne — halo diffus, sourcils d'or ----------- */
@media (max-width: 600px) {
  .hero-dalle {
    /* plaque arrière retirée, cadre gravé intérieur retiré : la modernité par la retenue */
    box-shadow: 0 26px 60px -26px rgba(7, 14, 10, 0.7);
    outline: none;
    /* le bord raconte la lumière : plus clair au sommet, plus sombre en bas */
    border-color: rgba(234, 211, 151, 0.42) rgba(198, 164, 101, 0.22) rgba(156, 124, 56, 0.2);
    padding: 1.7rem 1.35rem 1.85rem;
    text-align: left;
  }
  /* Composition éditoriale : sourcil « 01 · LA FONDATRICE » puis la valeur, à gauche */
  .hero-dalle li { display: block; }
  .hero-dalle li + li,
  .hero-dalle li:nth-child(n+3) { margin-top: 1.45rem; padding-top: 0; }
  .hero-dalle li + li::before { content: none; }
  .hero-dalle .num {
    display: inline;
    font-size: min(0.78rem, 3.4vw);
    color: var(--or-clair);
    margin-right: 0.6rem;
  }
  .hero-dalle .quoi { display: inline; margin: 0; }
  .hero-dalle .valeur { margin-top: 0.42rem; font-size: min(1.04rem, 4.55vw); }
  /* La lumière au défilement devient un halo diffus, sans arête */
  .dalle-lumiere {
    top: -30%;
    bottom: -30%;
    left: 0;
    width: 72%;
    background: radial-gradient(closest-side, rgba(234, 211, 151, 0.11) 0%, rgba(251, 250, 247, 0.045) 55%, transparent 78%);
    transform: translateX(-70%);
  }
}

/* --- Héros cabinet V11 : carte téléphone plus discrète, halo sans forme -------------- */
@media (max-width: 600px) {
  .hero-dalle { padding: 1.5rem 1.25rem 1.6rem; }
  .hero-dalle li + li,
  .hero-dalle li:nth-child(n+3) { margin-top: 1.15rem; }
  .hero-dalle .num { font-size: min(0.7rem, 3.1vw); margin-right: 0.5rem; }
  .hero-dalle .quoi { font-size: min(0.52rem, 2.35vw); }
  .hero-dalle .valeur { margin-top: 0.28rem; font-size: min(0.95rem, 4.15vw); }
  /* Le halo perd toute forme : nappe immense au fondu très progressif,
     rognée par la carte — on ne voit que la lumière, jamais son contour */
  .dalle-lumiere {
    top: -70%;
    bottom: -70%;
    width: 110%;
    background: radial-gradient(closest-side, rgba(234, 211, 151, 0.085) 0%, rgba(234, 211, 151, 0.05) 35%, rgba(251, 250, 247, 0.025) 60%, transparent 88%);
  }
}

/* --- Héros cabinet V12 : téléphone — reflet auto retiré, entrée différée de la carte - */
@media (max-width: 600px) {
  /* Le halo au défilement suffit : le reflet automatique disparaît (téléphone seulement) */
  .hero-dalle::after { display: none; }
  /* La carte ferme la marche, comme les boutons du héros d'accueil */
  .page-hero--maison .container > .hero-dalle { animation-delay: 1.5s; }
}

/* --- Héros cabinet V13 : ORDINATEUR seul — le sceau traverse le héros de part en part - */
@media (min-width: 1025px) {
  .page-hero--maison .sceau-maison {
    width: min(56vw, 780px);
    top: 50%;
    transform: translateY(-50%);
    right: -4%;
  }
}

/* --- Parcours V2 : frise unique moderne — sourcils d'or, ligne de vie ----------------- */
.frise--moderne { margin-top: 4.2rem; }
.frise--moderne .temps { text-align: left; padding-top: 2.4rem; }
.frise--moderne .temps__diamant {
  left: 3px;
  transform: rotate(45deg);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.frise--moderne .temps:hover .temps__diamant {
  transform: rotate(45deg) scale(1.35);
  box-shadow: 0 0 16px rgba(198, 164, 101, 0.55);
}
.frise--moderne .temps__sourcil {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.74rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--anthracite);
}
.frise--moderne .temps__num {
  font-family: var(--font-garalde);
  font-weight: 300;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--or-profond);
}
.frise--moderne .temps p.temps__texte { margin-inline: 0; max-width: 19rem; }
.frise--moderne .temps__mention { margin-top: 0.7rem; }
.frise--moderne .temps__mention::before,
.frise--moderne .temps__mention::after { content: none; }

/* Téléphone/tablette : ligne de vie à GAUCHE, contenu indenté — timeline éditoriale */
@media (max-width: 820px) {
  .frise--moderne { margin-top: 3rem; gap: 2.4rem; }
  .frise--moderne .frise__ligne { left: 9px; right: auto; }
  .frise--moderne .temps { padding: 0 0 0 2.3rem; background: none; }
  .frise--moderne .temps__diamant { left: 4px; top: 3px; }
  .frise--moderne .temps p.temps__texte { max-width: none; }
}
@media (max-width: 600px) {
  .frise--moderne .temps__sourcil { font-size: min(0.68rem, 3vw); }
  .frise--moderne .temps__num { font-size: min(1rem, 4.4vw); }
  .frise--moderne .temps p.temps__texte { font-size: min(0.9rem, 3.9vw); }
}

/* --- Parcours V3 : frise centrée, étincelle au défilement, sans zoom ------------------ */
/* Le grossissement des losanges disparaît */
.frise--moderne .temps:hover .temps__diamant {
  transform: rotate(45deg);
  box-shadow: none;
}
/* La frise se recentre sous la tête de section */
.frise--moderne { max-width: 74rem; margin-inline: auto; }
/* L'étincelle : une lueur d'or qui parcourt le fil au rythme du défilement */
.frise__etincelle {
  position: absolute;
  top: 0;
  left: 3%;
  width: 90px;
  height: 15px;
  background: radial-gradient(closest-side, rgba(234, 211, 151, 0.95) 0%, rgba(198, 164, 101, 0.4) 45%, rgba(198, 164, 101, 0) 75%);
  pointer-events: none;
  will-change: transform;
}
@media (max-width: 820px) {
  .frise__etincelle {
    top: 6px;
    left: 2px;
    width: 15px;
    height: 90px;
  }
}

/* --- Parcours V4 : frise centrée façon accueil, brume au passage ---------------------- */
.section-frise { overflow: hidden; }
.frise--moderne .temps { text-align: center; padding-top: 2.4rem; }
.frise--moderne .temps__diamant {
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
}
.frise--moderne .temps__sourcil { justify-content: center; }
.frise--moderne .temps p.temps__texte { margin-inline: auto; max-width: 18.5rem; }
/* La brume : un souffle clair et sans forme traverse la frise quand on arrive sur elle */
.frise__brume {
  position: absolute;
  top: -70%;
  bottom: -70%;
  left: 0;
  width: 55%;
  background: radial-gradient(closest-side, rgba(251, 250, 247, 0.7) 0%, rgba(251, 250, 247, 0.32) 45%, rgba(234, 211, 151, 0.07) 70%, transparent 92%);
  opacity: 0;
  transform: translateX(-60%);
  pointer-events: none;
  will-change: transform, opacity;
}
.frise--moderne.est-traversee .frise__brume {
  animation: brume-parcours 5.4s cubic-bezier(0.3, 0.5, 0.3, 1) 0.5s forwards;
}
@keyframes brume-parcours {
  0%   { opacity: 0; transform: translateX(-60%); }
  16%  { opacity: 1; }
  84%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(220%); }
}
@media (max-width: 820px) {
  .frise--moderne .frise__ligne { left: 50%; right: auto; }
  .frise--moderne .temps { padding: 2.3rem 0 0; background: var(--pierre); }
  .frise--moderne .temps__diamant { left: 50%; top: 1px; }
  .frise--moderne .temps p.temps__texte { max-width: 19rem; }
}

/* --- Parcours V5 : brume-étincelle sur le fil, apparitions ralenties ------------------ */
/* Les apparitions de la page cabinet prennent leur temps (l'accueil n'est pas touché) */
body:has(.page-hero--maison) main .reveal { transition-duration: 1.9s; }
/* La frise s'élargit légèrement */
.frise--moderne { max-width: 80rem; }
/* La brume devient une petite étincelle dorée, diffuse, qui court sur le fil seul,
   en même temps que la ligne se déploie (déclenchée par la révélation de la ligne) */
.frise__brume {
  top: -16px;
  bottom: auto;
  height: 46px;
  width: 18%;
  background: radial-gradient(closest-side, rgba(234, 211, 151, 0.5) 0%, rgba(198, 164, 101, 0.18) 45%, rgba(198, 164, 101, 0) 80%);
  opacity: 0;
  transform: translateX(-80%);
}
.frise--moderne.est-traversee .frise__brume { animation: none; }
.frise__ligne.is-visible ~ .frise__brume { animation: brume-frise 3.4s cubic-bezier(0.3, 0.5, 0.3, 1) 0.25s forwards; }
@keyframes brume-frise {
  0%   { opacity: 0; transform: translateX(-80%); }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(600%); }
}
@media (max-width: 820px) {
  .frise__brume {
    top: 0;
    left: 50%;
    margin-left: -23px;
    width: 46px;
    height: 16%;
  }
  .frise__ligne.is-visible ~ .frise__brume { animation: brume-frise-y 3.4s cubic-bezier(0.3, 0.5, 0.3, 1) 0.25s forwards; }
  @keyframes brume-frise-y {
    0%   { opacity: 0; transform: translateY(-60%); }
    14%  { opacity: 1; }
    86%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(620%); }
  }
}

/* --- Parcours V6 : la brume-étincelle est retirée (le déploiement progressif reste) --- */
.frise__brume { display: none; }

/* --- Chapitres V2 : portrait-dossier — coins d'or, étiquette de verre ----------------- */
.portrait-dossier {
  position: relative;
  margin: 0;
  max-width: 460px;
  width: 100%;
  margin-inline: auto;
}
.portrait-dossier__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 30px 64px -30px rgba(15, 25, 20, 0.55);
}
.portrait-dossier__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.portrait-dossier:hover .portrait-dossier__photo img { transform: scale(1.035); }
/* Les cantonnières : deux coins d'or en tête de photo */
.portrait-dossier__photo::after {
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  z-index: 2;
  background-image:
    linear-gradient(rgba(234, 211, 151, 0.95), rgba(234, 211, 151, 0.95)),
    linear-gradient(rgba(234, 211, 151, 0.95), rgba(234, 211, 151, 0.95)),
    linear-gradient(rgba(234, 211, 151, 0.95), rgba(234, 211, 151, 0.95)),
    linear-gradient(rgba(234, 211, 151, 0.95), rgba(234, 211, 151, 0.95));
  background-repeat: no-repeat;
  background-size: 16px 1px, 1px 16px, 16px 1px, 1px 16px;
  background-position: left top, left top, right top, right top;
}
/* L'étiquette de verre : le cartel vit dans l'épaisseur de la photo */
.portrait-dossier .etiquette {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 0.95rem 1.2rem 1.05rem;
  background: rgba(21, 32, 26, 0.45);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(198, 164, 101, 0.35);
}
.portrait-dossier .etiquette .nom {
  display: block;
  font-family: var(--font-garalde);
  font-size: 1.12rem;
  color: var(--ivoire);
}
.portrait-dossier .etiquette .role {
  display: block;
  margin-top: 0.22rem;
  font-family: var(--font-lineale);
  font-size: 0.6rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--or-clair);
}
/* Le surtitre-signature des chapitres se déploie à l'arrivée sur la section */
.chapitre .overline--signature::before { width: 34px; }
.chapitre .overline--signature { clip-path: inset(0 -8% 0 0); }
.chapitre.reveal.is-visible .overline--signature {
  animation: deploiement-or 1.7s cubic-bezier(0.25, 0.6, 0.3, 1) 0.25s both;
}
@media (max-width: 600px) {
  .portrait-dossier .etiquette { padding: 0.85rem 1rem 0.9rem; }
  .portrait-dossier .etiquette .nom { font-size: min(1.05rem, 4.6vw); }
  .portrait-dossier .etiquette .role { font-size: min(0.56rem, 2.5vw); }
}

/* --- Chapitres V3 : portrait au cadre qui se détache, colonne éditoriale moderne ------ */
/* Le cadre fin décalé revient — et se DÉTACHE de la photo à l'arrivée sur la section */
.portrait-dossier::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(156, 124, 56, 0.45);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: transform 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.6s, opacity 1.2s ease 0.6s;
}
.portrait-dossier.is-visible::before {
  opacity: 1;
  transform: translate3d(16px, 16px, 0);
}
/* L'étiquette s'affine : plus petite, plus serrée, plus moderne */
.portrait-dossier .etiquette { padding: 0.75rem 1.05rem 0.8rem; }
.portrait-dossier .etiquette .nom { font-size: 0.98rem; }
.portrait-dossier .etiquette .role { font-size: 0.54rem; margin-top: 0.14rem; }

/* La colonne éditoriale : attaque en grand Cormorant, actes en sourcils d'or */
.two-col p.attaque {
  font-family: var(--font-garalde);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.45;
  color: var(--anthracite);
  margin: 1.5rem 0 1.4rem;
  max-width: 24em;
}
.actes {
  margin: 2.3rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.2rem;
}
.two-col p.acte__sourcil {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-family: var(--font-lineale);
  font-size: 0.62rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: rgba(44, 52, 48, 0.62);
}
.two-col p.acte__sourcil::before {
  content: "";
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #EAD397 0%, var(--or-profond) 100%);
}
.acte__num {
  font-family: var(--font-garalde);
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--or-profond);
}
.two-col p.acte__valeur {
  margin: 0.24rem 0 0 1.15rem;
  font-family: var(--font-garalde);
  font-size: 1.06rem;
  line-height: 1.4;
  color: var(--anthracite);
  max-width: none;
}
@media (max-width: 600px) {
  .two-col p.attaque { font-size: min(1.22rem, 5.3vw); }
  .two-col p.acte__sourcil { font-size: min(0.58rem, 2.6vw); }
  .two-col p.acte__valeur { font-size: min(0.98rem, 4.3vw); }
  .portrait-dossier.is-visible::before { transform: translate3d(12px, 12px, 0); }
}

/* --- Chapitres V4 : composition magazine — nom en scène, colonnes à filet d'or -------- */
/* Étiquette de la photo : centrée, interligne serré */
.portrait-dossier .etiquette { text-align: center; }
.portrait-dossier .etiquette .role { margin-top: 0.06rem; }
/* Le nom en scène typographique */
.nom-editorial { margin-top: 1rem; }
.nom-editorial .prenom {
  display: block;
  font-family: var(--font-garalde);
  font-style: italic;
  font-weight: 300;
  font-size: 1.65rem;
  line-height: 1.1;
  color: var(--or-profond);
}
.nom-editorial .famille {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-garalde);
  font-weight: 400;
  font-size: 2.7rem;
  line-height: 1.05;
  letter-spacing: 0.14em;
  color: var(--anthracite);
}
.chapitre .meta-editorial {
  margin-top: 0.85rem;
  font-family: var(--font-lineale);
  font-size: 0.6rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: rgba(44, 52, 48, 0.55);
}
/* Le récit en colonnes de magazine, séparées d'un filet d'or */
.colonnes-magazine {
  margin-top: 2.1rem;
  column-count: 2;
  column-gap: 3rem;
  column-rule: 1px solid rgba(156, 124, 56, 0.28);
}
.two-col .colonnes-magazine p {
  break-inside: avoid;
  font-size: 0.95rem;
  line-height: 1.75;
  margin: 0 0 1.15rem;
  max-width: none;
}
/* Les matières en pied de chapitre, ponctuées de diamants */
.two-col p.matieres-chapitre {
  margin: 1.6rem 0 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 0.9rem;
  font-family: var(--font-lineale);
  font-size: 0.62rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--or-profond);
  max-width: none;
}
.matieres-chapitre .pt {
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #EAD397 0%, var(--or-profond) 100%);
}
@media (max-width: 1180px) {
  .colonnes-magazine { column-count: 1; }
}
@media (max-width: 600px) {
  .nom-editorial .prenom { font-size: min(1.4rem, 6.1vw); }
  .nom-editorial .famille { font-size: min(2.1rem, 9.1vw); }
  .chapitre .meta-editorial { font-size: min(0.56rem, 2.4vw); }
  .two-col .colonnes-magazine p { font-size: min(0.9rem, 3.9vw); }
  .two-col p.matieres-chapitre { font-size: min(0.58rem, 2.6vw); }
}

/* --- Chapitres V5 : composition de l'écrin d'accueil — récit, citation, actions ------- */
.two-col p.pull-quote-chapitre {
  font-family: var(--font-garalde);
  font-style: italic;
  font-weight: 300;
  font-size: 1.45rem;
  line-height: 1.5;
  color: var(--anthracite);
  margin: 2rem 0 0;
  max-width: none;
}
.two-col p.pull-quote-chapitre::before { content: "«\00a0"; color: var(--or-profond); }
.two-col p.pull-quote-chapitre::after { content: "\00a0»"; color: var(--or-profond); }
.chapitre__actions {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.chapitre .nom-editorial + .meta-editorial { margin-top: 0.7rem; }
.chapitre .meta-editorial + p { margin-top: 1.9rem; }
@media (max-width: 600px) {
  .two-col p.pull-quote-chapitre { font-size: min(1.2rem, 5.2vw); }
  .chapitre__actions { margin-top: 1.8rem; }
}

/* --- Chapitres V6 : nom d'une ligne, colonnes centrées, or dans le texte -------------- */
/* Les deux colonnes se resserrent et se centrent, comme l'écrin de l'accueil */
.section-avocate .two-col,
.section-structure .two-col,
.section-associee .two-col {
  max-width: 76rem;
  margin-inline: auto;
  column-gap: 4.5rem;
}
/* Le nom, d'une seule ligne, sobre et sûr */
.chapitre h2.nom-ligne {
  margin-top: 1.05rem;
  font-family: var(--font-garalde);
  font-weight: 400;
  font-size: 2.35rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--anthracite);
}
/* Les mots-clés s'écrivent en or : la lumière dans le texte */
.chapitre p strong { color: var(--or-profond); font-weight: 500; }
/* Le chiffre fantôme grandit et descend dans le texte */
.chapitre .chiffre-fantome {
  top: auto;
  bottom: -2rem;
  right: -0.5rem;
  font-size: 15rem;
  color: rgba(156, 124, 56, 0.09);
}
@media (max-width: 600px) {
  .chapitre h2.nom-ligne { font-size: min(1.52rem, 6.55vw); }
  .chapitre .chiffre-fantome { font-size: min(8.5rem, 36vw); bottom: -1.2rem; right: 0; }
}

/* Les figures se calent contre le texte (l'écart = la gouttière, comme sur l'accueil) */
.section-avocate .two-col > figure,
.section-associee .two-col > figure { margin-left: auto; margin-right: 0; }
.section-structure .two-col > figure { margin-left: 0; margin-right: auto; }
@media (max-width: 820px) {
  .section-avocate .two-col > figure,
  .section-associee .two-col > figure,
  .section-structure .two-col > figure { margin-inline: auto; }
}

/* --- Chapitres V7 : symétrie stricte, récit annoté comme un code ---------------------- */
/* Colonnes : la photo remplit sa colonne, les bords du bloc = les bords du contenu
   → marges d'écran STRICTEMENT identiques à gauche et à droite */
.section-avocate .two-col,
.section-associee .two-col {
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  max-width: 71rem;
  column-gap: 5.5rem;
}
.section-structure .two-col {
  grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
  max-width: 73rem;
  column-gap: 5.5rem;
}
/* Le chiffre fantôme des chapitres disparaît */
.chapitre .chiffre-fantome { display: none; }
/* Le récit annoté : des notes de marge dorées, comme dans un code juridique */
.chapitre .meta-editorial + .recit { margin-top: 2rem; }
.note-marge {
  display: grid;
  grid-template-columns: 6.4rem minmax(0, 1fr);
  column-gap: 1.2rem;
  align-items: baseline;
}
.note-marge + .note-marge { margin-top: 1.2rem; }
.two-col .note-marge p.marge {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-lineale);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or-profond);
  max-width: none;
}
.note-marge .marge::before {
  content: "";
  flex: none;
  width: 4px;
  height: 4px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #EAD397 0%, var(--or-profond) 100%);
}
.two-col .note-marge > p:last-child { margin: 0; }
@media (max-width: 820px) {
  .note-marge { grid-template-columns: 1fr; row-gap: 0.4rem; }
  .note-marge + .note-marge { margin-top: 1.35rem; }
}
@media (max-width: 600px) {
  .two-col .note-marge p.marge { font-size: min(0.54rem, 2.4vw); }
}

/* --- Chapitres V8 : la géométrie LITTÉRALE de la présentation d'accueil --------------- */
.section-avocate .container.two-col,
.section-associee .container.two-col,
.section-structure .container.two-col {
  grid-template-columns: 1fr 1fr;
  width: min(1320px, 100% - clamp(2rem, 6vw, 5rem));
  max-width: none;
  margin-inline: auto;
  column-gap: 4rem;
}
.section-avocate .two-col > figure,
.section-associee .two-col > figure,
.section-structure .two-col > figure { margin-inline: auto; }
@media (max-width: 820px) {
  .section-avocate .container.two-col,
  .section-associee .container.two-col,
  .section-structure .container.two-col { grid-template-columns: 1fr; }
}
/* Les notes de marge disparaissent ; la citation prend la taille de celle de l'accueil */
.two-col p.pull-quote-chapitre { font-size: 1.7rem; margin-top: 2.2rem; }
@media (max-width: 600px) {
  .two-col p.pull-quote-chapitre { font-size: min(1.32rem, 5.7vw); }
}

/* --- Chapitres V9 : photo au bord exact, hauteurs accordées, titre design -------------- */
.section-avocate .container.two-col,
.section-associee .container.two-col {
  grid-template-columns: 520px minmax(0, 1fr);
  column-gap: 7.5rem;
}
.section-structure .container.two-col {
  grid-template-columns: minmax(0, 1fr) 520px;
  column-gap: 7.5rem;
}
.section-avocate .two-col > figure,
.section-associee .two-col > figure,
.section-structure .two-col > figure { margin-inline: 0; max-width: none; }
@media (max-width: 820px) {
  .section-avocate .container.two-col,
  .section-associee .container.two-col,
  .section-structure .container.two-col { grid-template-columns: 1fr; }
  .section-avocate .two-col > figure,
  .section-associee .two-col > figure,
  .section-structure .two-col > figure { max-width: 460px; margin-inline: auto; }
}
/* Les gras retrouvent l'encre (le gras seul, sans l'or) */
.chapitre p strong { color: inherit; font-weight: 600; }
/* Le titre prend la lumière : DEZALAY en or, droit et souverain */
.chapitre h2.nom-ligne { font-size: 2.9rem; }
.chapitre h2.nom-ligne .accent-or { font-style: normal; }
@media (max-width: 600px) {
  .chapitre h2.nom-ligne { font-size: min(1.52rem, 6.55vw); }
}

/* La photo d'Océane s'élève à la hauteur du texte (desktop) ; le mobile garde son cadrage */
.section-avocate .portrait-dossier__photo { aspect-ratio: 645 / 1000; }
.section-avocate .portrait-dossier__photo img { object-position: 50% 50%; }
@media (max-width: 820px) {
  .section-avocate .portrait-dossier__photo { aspect-ratio: 4 / 5; }
}

/* --- Chapitres V10 : gras de l'accueil, incipit en capitales -------------------------- */
.chapitre p strong { color: inherit; font-weight: 400; }
/* L'incipit : la première ligne du récit se compose en capitales espacées (geste de revue) */
.chapitre .meta-editorial + p::first-line {
  text-transform: uppercase;
  font-size: 0.84em;
  letter-spacing: 0.1em;
}

/* --- Chapitres V11 : en-tête de grande maison (sobriété Legal 500) -------------------- */
.chapitre h2.nom-ligne {
  margin-top: 0.85rem;
  font-size: 2.55rem;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--anthracite);
}
/* Le filet de fonction : un fil d'or court entre le nom et la charge */
.chapitre .filet-fonction {
  width: 34px;
  height: 1px;
  border: 0;
  margin: 1.05rem 0 0.9rem;
  background: linear-gradient(90deg, var(--or-profond), rgba(156, 124, 56, 0.2));
}
.chapitre .meta-editorial {
  margin-top: 0;
  color: var(--or-profond);
  letter-spacing: 0.2em;
}
@media (max-width: 600px) {
  .chapitre h2.nom-ligne { font-size: min(1.52rem, 6.55vw); }
}

/* --- Chapitres V12 : sans filet de fonction, incipit normal --------------------------- */
.chapitre .filet-fonction { display: none; }
.chapitre .meta-editorial { margin-top: 0.9rem; }
.chapitre .meta-editorial + p::first-line {
  text-transform: none;
  font-size: 1em;
  letter-spacing: normal;
}

/* --- Chapitres V13 : méta rapprochée, point médian affirmé ---------------------------- */
.chapitre .meta-editorial { margin-top: 0.5rem; }
.meta-editorial .pt-meta {
  display: inline-block;
  margin: 0 0.15rem;
  font-size: 1.5em;
  line-height: 0;
  vertical-align: -0.08em;
  color: var(--or-profond);
}

/* --- Chapitres V14 : tempo de l'accueil + variantes anthracite + ratios --------------- */
/* Le tempo : les éléments du chapitre se lèvent un à un, les boutons ferment la marche */
body:has(.page-hero--maison) .chapitre.reveal > * {
  transition: opacity 1.5s ease, transform 1.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
body:has(.page-hero--maison) .chapitre.reveal:not(.is-visible) > * {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
}
body:has(.page-hero--maison) .chapitre.reveal > :nth-child(1) { transition-delay: 0.05s; }
body:has(.page-hero--maison) .chapitre.reveal > :nth-child(2) { transition-delay: 0.25s; }
body:has(.page-hero--maison) .chapitre.reveal > :nth-child(3) { transition-delay: 0.4s; }
body:has(.page-hero--maison) .chapitre.reveal > :nth-child(4) { transition-delay: 0.65s; }
body:has(.page-hero--maison) .chapitre.reveal > :nth-child(5) { transition-delay: 0.9s; }
body:has(.page-hero--maison) .chapitre.reveal > :nth-child(6) { transition-delay: 1.15s; }
body:has(.page-hero--maison) .chapitre.reveal > :nth-child(7) { transition-delay: 1.4s; }
body:has(.page-hero--maison) .chapitre.reveal > :nth-child(8) { transition-delay: 1.7s; }
body:has(.page-hero--maison) .chapitre.reveal > :nth-child(9) { transition-delay: 2s; }
/* Variantes anthracite du gabarit (section structure) */
.band-anthracite .chapitre h2.nom-ligne { color: var(--ivoire); }
.band-anthracite .chapitre .meta-editorial,
.band-anthracite .meta-editorial .pt-meta { color: var(--or-clair); }
.band-anthracite .two-col p.pull-quote-chapitre { color: var(--ivoire); }
.band-anthracite .two-col p.pull-quote-chapitre::before,
.band-anthracite .two-col p.pull-quote-chapitre::after { color: var(--or-clair); }
.band-anthracite .portrait-dossier::before { border-color: rgba(198, 164, 101, 0.4); }
/* Ratios provisoires (accordés après mesure) */
.section-structure .portrait-dossier__photo { aspect-ratio: 815 / 1000; }
.section-structure .portrait-dossier__photo img { object-position: 50% 30%; }
.section-associee .portrait-dossier__photo { aspect-ratio: 815 / 1000; }
.section-associee .portrait-dossier__photo img { object-position: 50% 30%; }
@media (max-width: 820px) {
  .section-structure .portrait-dossier__photo,
  .section-associee .portrait-dossier__photo { aspect-ratio: 4 / 5; }
}

/* --- Chapitres V15 : point médian visible, boutons anthracite, cadre partout ---------- */
/* Le point médian s'affirme franchement */
.meta-editorial .pt-meta { font-size: 2.1em; vertical-align: -0.12em; }
/* Boutons lisibles au survol sur la bande anthracite */
.band-anthracite .btn { color: var(--ivoire); border-color: rgba(251, 250, 247, 0.45); }
.band-anthracite .btn:hover,
.band-anthracite .btn:focus-visible {
  color: var(--or-clair);
  border-color: var(--or-clair);
  background: rgba(198, 164, 101, 0.08);
}
.band-anthracite .btn--or { color: var(--or-clair); border-color: var(--or-clair); }
.band-anthracite .btn--or:hover,
.band-anthracite .btn--or:focus-visible {
  color: var(--ivoire);
  border-color: var(--ivoire);
  background: rgba(198, 164, 101, 0.08);
}
/* Le cadre décalé passe AU-DESSUS du fond de section (il disparaissait sur l'anthracite) */
.portrait-dossier::before { z-index: 0; }
.portrait-dossier__photo { z-index: 1; }
/* Le duo recadré est centré nativement */
.section-structure .portrait-dossier__photo img { object-position: 50% 50%; }

/* --- Chapitres V16 : cadre du duo élargi, verre unifié -------------------------------- */
.section-structure .container.two-col { grid-template-columns: minmax(0, 1fr) 620px; }
/* Sous l'étiquette, le bas de chaque photo s'assombrit uniformément :
   le verre fumé a la même teinte sur les trois portraits */
.portrait-dossier__photo::after {
  background: linear-gradient(180deg, rgba(21, 32, 26, 0) 55%, rgba(21, 32, 26, 0.22) 74%, rgba(21, 32, 26, 0.5) 100%);
}
@media (max-width: 820px) {
  .section-structure .container.two-col { grid-template-columns: 1fr; }
}

/* --- Chapitres V17 : surtitres à l'or plat de la charte, duo en portrait -------------- */
/* La couleur des surtitres = celle de la charte (or uniforme, sans dégradé) */
.overline--signature {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--or-profond);
}
.overline--signature::before {
  background: var(--or-profond);
  clip-path: polygon(0% 30%, 100% 42%, 100% 58%, 0% 70%);
}
.band-anthracite .overline--signature,
.page-hero .overline--signature { color: var(--or-clair); }
.band-anthracite .overline--signature::before,
.page-hero .overline--signature::before { background: var(--or-clair); }
/* La photo du duo revient au format portrait des autres (colonne 520) */
.section-structure .container.two-col { grid-template-columns: minmax(0, 1fr) 520px; }
@media (max-width: 820px) {
  .section-structure .container.two-col { grid-template-columns: 1fr; }
}

/* --- Chapitres V18 : le flou du verre confiné (fin des bandes claires latérales) ------ */
.portrait-dossier .etiquette {
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  overflow: hidden;
  isolation: isolate;
}
/* Le voile flouté vit sur une sous-couche élargie puis rognée :
   son échantillonnage ne « mange » plus l'ivoire de la page aux bords */
.portrait-dossier .etiquette::before {
  content: "";
  position: absolute;
  inset: -30px;
  z-index: -1;
  background: rgba(21, 32, 26, 0.5);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* --- Portrait Océane : sur téléphone, la fenêtre s'ancre sur elle (le noir est rogné) -- */
@media (max-width: 820px) {
  .section-avocate .portrait-dossier__photo img { object-position: 50% 0%; }
}

/* --- Portrait Océane mobile : fenêtre allongée 2:3 (buste + noir, comme l'ordinateur) - */
@media (max-width: 820px) {
  .section-avocate .portrait-dossier__photo { aspect-ratio: 2 / 3; }
}

/* --- Chapitres V19 : tempo resserré, la fluidité de l'accueil --------------------------- */
/* La cascade des chapitres se resserre : mêmes courbes, départs plus rapprochés,
   les boutons ferment toujours la marche mais sans faire attendre */
body:has(.page-hero--maison) .chapitre.reveal > * {
  transition: opacity 1.4s ease, transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
body:has(.page-hero--maison) .chapitre.reveal > :nth-child(1) { transition-delay: 0.05s; }
body:has(.page-hero--maison) .chapitre.reveal > :nth-child(2) { transition-delay: 0.18s; }
body:has(.page-hero--maison) .chapitre.reveal > :nth-child(3) { transition-delay: 0.3s; }
body:has(.page-hero--maison) .chapitre.reveal > :nth-child(4) { transition-delay: 0.45s; }
body:has(.page-hero--maison) .chapitre.reveal > :nth-child(5) { transition-delay: 0.62s; }
body:has(.page-hero--maison) .chapitre.reveal > :nth-child(6) { transition-delay: 0.8s; }
body:has(.page-hero--maison) .chapitre.reveal > :nth-child(7) { transition-delay: 0.98s; }
body:has(.page-hero--maison) .chapitre.reveal > :nth-child(8) { transition-delay: 1.18s; }
body:has(.page-hero--maison) .chapitre.reveal > :nth-child(9) { transition-delay: 1.4s; }
/* Le cadre du portrait se détache un souffle plus tôt */
.portrait-dossier::before {
  transition: transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.45s, opacity 1.1s ease 0.45s;
}

/* --- Chapitres V20 : le trait de l'étiquette ne bouge plus ------------------------------ */
/* Le verre fumé (backdrop-filter) ré-échantillonne son arrière-plan pendant que le
   portrait glisse à l'apparition : son liseré semblait se déplacer. Le portrait
   apparaît désormais en fondu pur, immobile — le cadre qui se détache reste la
   seule motion de la photo. */
body:has(.page-hero--maison) .portrait-dossier.reveal {
  transform: none;
  transition: opacity 1.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Chapitres V21 : le cadre prend son temps, les boutons ferment la marche sans hâte -- */
/* Le petit cadre fin se détache lentement, comme une respiration */
.portrait-dossier::before {
  transition: transform 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) 1s, opacity 1.6s ease 1s;
}
/* Les boutons arrivent en dernier, posément, après que le texte s'est installé */
body:has(.page-hero--maison) .chapitre.reveal > .chapitre__actions {
  transition: opacity 1.9s ease, transform 1.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: 2.1s;
}

/* --- Chapitres V22 : fondu des portraits parfaitement fluide ---------------------------- */
/* La photo est promue sur sa propre couche GPU avant l'animation */
body:has(.page-hero--maison) .portrait-dossier.reveal { will-change: opacity; }
/* Le verre fumé (coûteux : il refloute son arrière-plan à chaque image) n'entre en
   scène qu'une fois la photo posée — sur un décor immobile, son fondu est léger */
body:has(.page-hero--maison) .portrait-dossier.reveal .etiquette {
  opacity: 0;
  transition: opacity 1.3s ease 1.2s;
}
body:has(.page-hero--maison) .portrait-dossier.reveal.is-visible .etiquette { opacity: 1; }

/* --- Accueil : le cadre d'or du portrait respire comme au cabinet ---------------------- */
/* Même effet que les chapitres : le cadre fin naît sous la photo puis se détache
   lentement, comme une respiration. Seul le cadre est touché. */
@media (prefers-reduced-motion: no-preference) {
  .portrait::before {
    opacity: 0;
    transform: translate3d(-22px, -22px, 0);
    transition: transform 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) 1s, opacity 1.6s ease 1s;
  }
  .reveal.is-visible .portrait::before {
    opacity: 1;
    transform: none;
  }
}

/* --- Accueil mobile : le cadre du portrait entier à l'écran ----------------------------- */
/* Sur petit écran, le retrait de 22px sortait du viewport (body overflow-x: clip
   le tranchait). Retrait ramené à 14px et place réservée à droite : l'ensemble
   photo + cadre tient entier, visuellement centré dans la page. */
@media (max-width: 520px) {
  .portrait { margin-right: 14px; }
  .portrait::before { inset: 14px -14px -14px 14px; }
}
@media (max-width: 520px) and (prefers-reduced-motion: no-preference) {
  .portrait::before { transform: translate3d(-14px, -14px, 0); }
}

/* --- Chapitres V23 : mobile — cadre entier à l'écran, textes au fil du défilement ------- */
/* Le cadre détaché (12px) frôlait le bord : la photo lui réserve sa place à droite,
   l'ensemble photo + cadre finit à la marge de la page, comme sur l'accueil */
@media (max-width: 600px) {
  .two-col > figure.portrait-dossier {
    width: calc(100% - 12px);
    margin-inline: 0;
    justify-self: start;
  }
}
/* Sur téléphone, chaque élément du chapitre attend SON entrée à l'écran
   (la classe .est-la est posée par main.js au défilement, élément par élément) */
@media (max-width: 1024px) {
  body:has(.page-hero--maison) .chapitre.reveal > :not(.est-la) {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
  }
  body:has(.page-hero--maison) .chapitre.reveal > .est-la {
    opacity: 1;
    transform: none;
  }
}

/* --- Chapitres V24 : verre fumé sans saccade finale, boutons mobiles centrés ------------ */
/* Le verre garde sa couche GPU en permanence : à la fin de son fondu, le navigateur
   ne le re-rastérise plus (c'était le petit saut perçu en fin d'apparition) */
.portrait-dossier .etiquette {
  will-change: opacity;
  transform: translateZ(0);
}
/* Téléphone : les boutons des chapitres sont centrés */
@media (max-width: 820px) {
  body:has(.page-hero--maison) .chapitre__actions { justify-content: center; }
}

/* --- Chapitres V27 : le givre porté par l'étiquette elle-même --------------------------- */
/* La sous-couche agrandie puis rognée (V18) était mal floutée par Safari : le givre
   s'arrêtait ~25px au-dessus du bord bas. Le flou vit désormais sur l'étiquette
   directement : couverture totale garantie, du liseré haut au liseré bas. */
.portrait-dossier .etiquette {
  background: rgba(21, 32, 26, 0.5);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.portrait-dossier .etiquette::before { content: none; }

/* --- Savoir-être V1 : citation élargie, monogramme en filigrane à droite ---------------- */
/* Le monogramme veille en grand à droite de la section nuit, à peine murmuré,
   coupé par le bord comme un gaufrage — la bande garde tout son calme */
.nuit-filigrane {
  position: absolute;
  top: 50%;
  right: -7%;
  transform: translateY(-50%);
  width: min(36vw, 560px);
  opacity: 0.5;
  filter: brightness(1.5);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 820px) {
  /* Téléphone : le monogramme veille en tête de section, centré derrière le titre,
     et sa base vient effleurer la citation — comme un sceau posé sur la page */
  .nuit-filigrane {
    top: 1.6rem;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    width: min(56vw, 260px);
    /* moins vert : l'or se blanchit vers l'ivoire, opacité inchangée */
    filter: brightness(2.1) saturate(0.45);
  }
}

/* Savoir-être : la citation occupe toute la largeur de son écrin (58rem fixes) */
[aria-labelledby="titre-savoir-etre"] .pull-quote { max-width: none; }

/* --- Savoir-être V2 : le trait du héros de l'accueil, en plus petit --------------------- */
/* Même lame de lumière effilée que sous « Votre situation est unique », aux
   proportions du filet actuel de la section (92×2) */
[aria-labelledby="titre-savoir-etre"] .filet {
  width: 92px;
  height: 2px;
  background: linear-gradient(90deg, rgba(198, 164, 101, 0) 0%, var(--or-clair) 9%, #EAD397 42%, var(--or-clair) 88%, rgba(198, 164, 101, 0) 100%);
  clip-path: polygon(0% 22%, 100% 45%, 100% 55%, 0% 76%);
}

/* --- Chapitres V28 : fondu des portraits plus posé, citations mobiles centrées ---------- */
/* Le portrait apparaît dans un souffle plus long et plus régulier (la courbe
   précédente démarrait trop brusquement) — toutes tailles d'écran */
body:has(.page-hero--maison) .portrait-dossier.reveal {
  transition: opacity 2.6s cubic-bezier(0.33, 0, 0.15, 1);
}
/* Téléphone : la citation de chaque chapitre trône, centrée au-dessus des boutons */
@media (max-width: 820px) {
  body:has(.page-hero--maison) .two-col p.pull-quote-chapitre {
    /* la règle de justification du site est plus spécifique : priorité assumée,
       strictement cantonnée au téléphone */
    text-align: center !important;
    margin-inline: auto;
  }
}

/* --- Chapitres V29 : téléphone — le verre attend son tour, le sceau blanchit ------------ */
/* Sur téléphone la photo part elle-même différée (synchronisée avec les boutons) :
   le verre partait donc en même temps qu'elle et son entrée passait inaperçue.
   Il ne se pose qu'une fois la photo installée. */
@media (max-width: 820px) {
  body:has(.page-hero--maison) .portrait-dossier.reveal .etiquette {
    transition: opacity 1.4s ease 2.1s;
  }
}

/* --- Presse V1 : l'interlude Figaro — l'éloge vient du journal, pas de la maison -------- */
.section-presse { padding: 5.4rem 0 5.8rem; }
.section-presse .container { text-align: center; }
.section-presse .overline { color: var(--or-profond); }
.presse__citation {
  font-family: var(--font-garalde);
  font-weight: 300;
  font-style: italic;
  font-size: 2.1rem;
  line-height: 1.35;
  color: var(--anthracite);
  max-width: 40rem;
  margin: 1.3rem auto 1.5rem;
}
.presse__citation::before { content: "«\00a0"; color: var(--or-profond); }
.presse__citation::after { content: "\00a0»"; color: var(--or-profond); }
.presse__source {
  font-family: var(--font-lineale);
  font-size: 0.66rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--or-profond);
  margin: 0 0 1.1rem;
}
.presse__source .pt-meta { font-size: 2.1em; line-height: 0; vertical-align: -0.12em; margin: 0 0.15rem; }
.presse__contexte {
  max-width: 34rem;
  margin: 0 auto 2.3rem;
  font-size: 0.95rem;
  line-height: 1.8;
  color: rgba(59, 57, 55, 0.78);
}
@media (max-width: 820px) {
  .section-presse { padding: 4.2rem 0 4.6rem; }
  .presse__citation { font-size: min(1.5rem, 6.4vw); }
  .presse__contexte { font-size: min(0.9rem, 3.9vw); }
}

/* --- Presse V2 : la coupure du Figaro, présentée comme une pièce encadrée --------------- */
/* Une carte ivoire posée sur la pierre, sertie des motifs de la maison : cadre d'or
   qui se détache, cantonnières en tête, lame de lumière, guillemet murmuré. */
.section-presse { padding: 6.2rem 0 6.8rem; }
.presse-carte {
  position: relative;
  max-width: 56rem;
  margin: 0 auto;
  background: var(--ivoire);
  padding: 3.6rem 3rem 3.4rem;
  text-align: center;
  box-shadow: 0 30px 64px -38px rgba(15, 25, 20, 0.4);
}
/* Le cadre fin décalé — il se détache à l'arrivée, comme derrière les portraits */
.presse-carte::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(156, 124, 56, 0.45);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: transform 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) 1s, opacity 1.6s ease 1s;
}
.presse-carte.is-visible::before {
  opacity: 1;
  transform: translate3d(14px, 14px, 0);
}
/* Les cantonnières : deux coins d'or en tête de carte, comme sur les photos */
.presse-carte::after {
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  z-index: 2;
  background-image:
    linear-gradient(rgba(198, 164, 101, 0.9), rgba(198, 164, 101, 0.9)),
    linear-gradient(rgba(198, 164, 101, 0.9), rgba(198, 164, 101, 0.9)),
    linear-gradient(rgba(198, 164, 101, 0.9), rgba(198, 164, 101, 0.9)),
    linear-gradient(rgba(198, 164, 101, 0.9), rgba(198, 164, 101, 0.9));
  background-repeat: no-repeat;
  background-size: 16px 1px, 1px 16px, 16px 1px, 1px 16px;
  background-position: left top, left top, right top, right top;
}
/* Le guillemet murmuré, en tête de carte */
.presse-carte__guillemet {
  position: absolute;
  top: 0.2rem;
  left: 1.7rem;
  font-family: var(--font-garalde);
  font-style: italic;
  font-size: 7.5rem;
  line-height: 1;
  color: var(--or-clair);
  opacity: 0.3;
  pointer-events: none;
}
/* La lame de lumière du héros, en filet central (se déploie au reveal) */
.presse__filet {
  width: 92px;
  height: 2px;
  border: 0;
  margin: 1.7rem auto 1.5rem;
  background: linear-gradient(90deg, rgba(198, 164, 101, 0) 0%, var(--or-clair) 9%, #EAD397 42%, var(--or-clair) 88%, rgba(198, 164, 101, 0) 100%);
  clip-path: polygon(0% 22%, 100% 45%, 100% 55%, 0% 76%);
}
.presse__citation { margin: 1.1rem auto 0; font-size: 2.2rem; }
.presse__contexte { margin-bottom: 2.3rem; }
@media (max-width: 820px) {
  .section-presse { padding: 4.4rem 0 4.8rem; }
  .presse-carte { padding: 2.7rem 1.4rem 2.5rem; }
  .presse-carte__guillemet { font-size: 5rem; left: 0.9rem; top: 0.1rem; }
  .presse-carte.is-visible::before { transform: translate3d(10px, 10px, 0); }
}

/* --- Presse V3 : la carte passe en nuit — une dalle sombre sertie d'or sur la pierre ---- */
/* Le blanc dénotait : la coupure vit désormais dans le vert profond de la maison
   (celui de la dalle du héros), et annonce la bande nuit qui la suit. */
.presse-carte {
  background:
    linear-gradient(180deg, rgba(7, 14, 10, 0.5) 0%, rgba(7, 14, 10, 0) 52%),
    linear-gradient(158deg, var(--vert-nuit) 0%, #273730 55%, #1B2721 100%);
  border-top: 1px solid rgba(198, 164, 101, 0.5);
  box-shadow: 0 30px 64px -30px rgba(15, 25, 20, 0.55);
}
/* L'or s'éclaircit sur la nuit, l'encre devient ivoire */
.presse-carte .overline { color: var(--or-clair); }
.presse-carte .presse__citation { color: var(--ivoire); }
.presse-carte .presse__citation::before,
.presse-carte .presse__citation::after { color: var(--or-clair); }
.presse-carte .presse__source { color: var(--or-clair); }
.presse-carte .presse__contexte { color: rgba(251, 250, 247, 0.78); }
.presse-carte__guillemet { color: var(--or-clair); opacity: 0.24; }
/* Les cantonnières brillent comme sur les photos */
.presse-carte::after {
  background-image:
    linear-gradient(rgba(234, 211, 151, 0.95), rgba(234, 211, 151, 0.95)),
    linear-gradient(rgba(234, 211, 151, 0.95), rgba(234, 211, 151, 0.95)),
    linear-gradient(rgba(234, 211, 151, 0.95), rgba(234, 211, 151, 0.95)),
    linear-gradient(rgba(234, 211, 151, 0.95), rgba(234, 211, 151, 0.95));
}
/* Le bouton sur la nuit : ivoire, puis or au survol (comme sur la bande anthracite) */
.presse-carte .btn { color: var(--ivoire); border-color: rgba(251, 250, 247, 0.45); }
.presse-carte .btn:hover,
.presse-carte .btn:focus-visible {
  color: var(--or-clair);
  border-color: var(--or-clair);
  background: rgba(198, 164, 101, 0.08);
}

/* --- Presse V4 : le cadre de galerie ouvert — clair, aérien, gaufré --------------------- */
/* Plus de boîte pleine : un cadre d'or fin posé sur la pierre nue, transparent,
   et la manchette « Le Figaro » gaufrée en creux derrière la citation. */
.presse-carte {
  background: none;
  border: 1px solid rgba(156, 124, 56, 0.4);
  box-shadow: none;
  padding: 4rem 3rem 3.8rem;
}
/* Les encres reviennent au clair */
.presse-carte .overline { color: var(--or-profond); }
.presse-carte .presse__citation { color: var(--anthracite); }
.presse-carte .presse__citation::before,
.presse-carte .presse__citation::after { color: var(--or-profond); }
.presse-carte .presse__source { color: var(--or-profond); }
.presse-carte .presse__contexte { color: rgba(59, 57, 55, 0.78); }
.presse-carte .btn { color: var(--anthracite); border-color: rgba(59, 57, 55, 0.45); }
.presse-carte .btn:hover,
.presse-carte .btn:focus-visible {
  color: var(--or-profond);
  border-color: var(--or-profond);
  background: rgba(198, 164, 101, 0.07);
}
.presse-carte::after {
  background-image:
    linear-gradient(rgba(198, 164, 101, 0.9), rgba(198, 164, 101, 0.9)),
    linear-gradient(rgba(198, 164, 101, 0.9), rgba(198, 164, 101, 0.9)),
    linear-gradient(rgba(198, 164, 101, 0.9), rgba(198, 164, 101, 0.9)),
    linear-gradient(rgba(198, 164, 101, 0.9), rgba(198, 164, 101, 0.9));
}
/* La manchette gaufrée : le nom du journal en creux dans la pierre */
.presse-carte__manchette {
  position: absolute;
  top: 3.9rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  font-family: var(--font-garalde);
  font-style: italic;
  font-weight: 300;
  font-size: 7.5rem;
  line-height: 1;
  white-space: nowrap;
  color: var(--or-profond);
  opacity: 0.09;
  pointer-events: none;
}
/* Le contenu vit au-dessus de la manchette */
.presse-carte > :not(.presse-carte__manchette) { position: relative; z-index: 1; }
@media (max-width: 820px) {
  .presse-carte { padding: 2.9rem 1.4rem 2.7rem; }
  /* Téléphone : la manchette s'affirme, le titre et la citation s'allègent */
  .presse-carte__manchette { font-size: min(5rem, 20.5vw); top: 3.9rem; opacity: 0.11; }
  .presse-carte .overline { font-size: min(0.6rem, 2.7vw); }
  .presse-carte .presse__citation { font-size: min(1.28rem, 5.5vw); }
}

/* --- Presse V5 : le fermoir-losange remplace les coins, citation mobile calibrée -------- */
/* Les cantonnières chevauchaient le cadre détaché : à la place, le losange de la
   frise se pose en fermoir au centre du fil d'or supérieur — un bijou sur la monture */
.presse-carte::after { content: none; }
/* La césure de la citation n'existe que sur téléphone */
.saut-mobile { display: none; }
@media (max-width: 820px) {
  .saut-mobile { display: inline; }
  /* Deux lignes garanties par la césure : la police peut s'affirmer */
  .presse-carte .presse__citation { font-size: min(1.7rem, 7.2vw); line-height: 1.2; }
}

/* --- Presse V6 : derniers réglages — titre remonté (ordinateur), mobile compacté -------- */
/* Ordinateur : « La presse en parle » respire un peu plus haut dans le cadre */
@media (min-width: 821px) {
  .presse-carte { padding-top: 3.3rem; }
  .presse-carte__manchette { top: 3.2rem; }
}
/* Téléphone : contexte allégé, la section se resserre autour de son cadre */
@media (max-width: 820px) {
  .presse-carte .presse__contexte { font-size: min(0.8rem, 3.5vw); }
  .section-presse { padding: 2.2rem 0 2.5rem; }
}

/* --- Presse V7 : le contenu au cœur exact du cadre, section desktop resserrée ----------- */
@media (min-width: 821px) {
  .section-presse { padding: 4.6rem 0 5rem; }
  .presse-carte { padding-bottom: 3.3rem; }   /* 54px en haut, 54px en bas */
}
@media (max-width: 820px) {
  .presse-carte { padding-bottom: 2.9rem; }   /* 47px en haut, 47px en bas */
}

/* --- Presse V8 : ordinateur — le contenu se centre sur le cadre DÉTACHÉ (celui qui
   reste). Le cadre final vit 14px plus bas : le contenu glisse d'autant. ------------- */
@media (min-width: 821px) {
  .presse-carte { padding-top: calc(3.3rem + 14px); padding-bottom: calc(3.3rem - 14px); }
  .presse-carte__manchette { top: calc(3.2rem + 14px); }
}

/* --- Héros cabinet mobile : le titre poussé au maximum, deux lignes garanties ----------- */
/* Mesuré au pire cas (320px) : l'interlettrage imperceptiblement serré (-0.01em)
   libère la place, la police monte au plus haut sans jamais casser la 2e ligne */
@media (max-width: 820px) {
  .page-hero--maison h1 {
    font-size: min(2rem, 8.5vw);
    letter-spacing: -0.018em;
  }
}

/* --- Cabinet mobile : respirations resserrées (héros → chapitres) ----------------------- */
@media (max-width: 820px) {
  /* la carte de verre se rapproche du texte du héros */
  .page-hero--maison .hero-dalle { margin-top: 2rem; }
  /* les chapitres commencent plus près de leur bande */
  .section-avocate { padding-top: 2.6rem; }
  .section-structure { padding-top: 2.4rem; }
  .section-associee { padding-top: 3rem; }
}

/* --- Presse V9 : ordinateur — l'overline respire au-dessus du gaufrage ------------------ */
/* « La presse en parle » remonte (il touchait la manchette), le tout reste centré
   sur le cadre détaché : l'écart haut−bas demeure exactement ses 28px de décalage */
@media (min-width: 821px) {
  .presse-carte { padding-top: calc(2.9rem + 14px); padding-bottom: calc(2.9rem - 14px); }
}

/* --- Presse V10 : la lame se déploie sous les yeux, centrage mobile sur le cadre final -- */
/* La lame partait pendant le fondu de la carte (invisible) : elle attend que la
   carte soit posée, puis se déploie — comme les autres traits de la page */
.presse-carte.reveal .presse__filet,
[data-reveal-group] .presse-carte.reveal .presse__filet {
  transition: transform 1.9s cubic-bezier(0.22, 0.61, 0.36, 1) 1.15s;
}
/* Téléphone : le contenu se centre sur le cadre détaché (décalé de 10px en mobile) */
@media (max-width: 820px) {
  .presse-carte { padding-top: calc(2.9rem + 10px); padding-bottom: calc(2.9rem - 10px); }
}

/* --- Presse V11 : mobile — centrage horizontal dans la fenêtre commune des deux cadres -- */
/* Repère cliente : bord GAUCHE du cadre détaché, bord DROIT du cadre d'origine.
   Cette fenêtre est rognée de 10px à gauche : son centre vit à +5px. */
@media (max-width: 820px) {
  .presse-carte { padding-left: calc(1.4rem + 5px); padding-right: calc(1.4rem - 5px); }
}

/* --- Bannière cookies V2 : plus profonde, titre moderne, sans trait --------------------- */
/* Le vert s'assombrit et se nuance (le haut clair s'éteint), l'ombre s'épaissit */
.cookies {
  background:
    radial-gradient(26rem 14rem at 50% 122%, rgba(198, 164, 101, 0.10), transparent 60%),
    linear-gradient(163deg, #1C2B23 0%, var(--vert-nuit) 44%, #0C1510 100%);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55), 0 6px 22px rgba(0, 0, 0, 0.32);
}
/* Le titre parle la langue moderne de la maison : petites capitales espacées, or clair */
.cookies__titre {
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.07em;
  text-transform: none;
  color: var(--or-clair);
}
/* Le trait sous le titre disparaît */
.cookies__filet { display: none; }

/* --- Héros domaines mobile : titre calibré (1re ligne plus longue que le cabinet) ------- */
/* Mesuré au pire cas 320px : 23px max avant la 3e ligne → marge de sécurité incluse */
@media (max-width: 820px) {
  /* le titre domaines hérite désormais de la taille du cabinet (min(2rem, 8.5vw)) */
}

/* --- Domaines : l'encart d'orientation — la V1 anoblie ---------------------------------- */
/* Le liseré d'or à gauche (aimé) devient une barre d'or dégradée pleine hauteur,
   la carte ivoire reste sobre, la question passe en Cormorant italique */
.band-pierre .notice.notice--orientation {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(26rem 12rem at 96% -18%, rgba(198, 164, 101, 0.13), transparent 62%),
    linear-gradient(168deg, #FFFFFF 0%, #FCFBF8 55%, var(--ivoire) 100%);
  border: 1px solid rgba(156, 124, 56, 0.22);
  border-left: 0;
  padding: 1.95rem 2.4rem 1.85rem 2.7rem;
  box-shadow: none;
}
.notice--orientation::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 3px;
  background: var(--or-profond);
}
/* Le cadre gravé intérieur — la signature des écrins de la maison */
.notice--orientation::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(198, 164, 101, 0.22);
  pointer-events: none;
}
/* Quelques mots portés par un gras léger doré */
.notice--orientation p:not(.notice__titre) strong {
  font-weight: 500;
  color: inherit;
}
.notice--orientation .notice__titre {
  font-family: var(--font-garalde);
  font-style: normal;
  font-weight: 400;
  font-size: 1.42rem;
  line-height: 1.3;
  color: var(--anthracite);
  margin: 0 0 0.6rem;
}
.notice--orientation .notice__titre em { font-style: italic; color: var(--or-profond); }
.notice--orientation p:not(.notice__titre) {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.85;
  color: rgba(59, 57, 55, 0.85);
}
@media (max-width: 820px) {
  .band-pierre .notice.notice--orientation { padding: 1.6rem 1.35rem 1.55rem 1.4rem; }
  /* la question tient sur UNE ligne, peu importe le téléphone (taille en vw) */
  .notice--orientation .notice__titre {
    font-size: min(1.3rem, 4.8vw);
    white-space: nowrap;
  }
  .notice--orientation p:not(.notice__titre) { font-size: min(0.78rem, 3.4vw); }
}

/* --- Héros domaines desktop : le texte s'étend dans la lignée du titre ------------------ */
@media (min-width: 821px) {
  .page-hero--domaines .page-hero__lede { max-width: 51em; }
}

/* --- Règle intangible : la rangée de cartes domaines à largeur CONSTANTE ---------------- */
/* 1200px = la plus grande largeur qui tient sur tous les écrans d'ordinateur (13" inclus) :
   le nombre de lignes de chaque carte est identique sur 13, 15 ou 24 pouces */
@media (min-width: 821px) {
  .section-domaines .cards--3 {
    max-width: 1200px;
    margin-inline: auto;
  }
}

/* --- Domaines : pleine largeur retrouvée, cartes à largeur CONSTANTE -------------------- */
/* Les cartes gardent la taille du 13 pouces (385px) : le nombre de lignes est
   identique sur tout écran ; la rangée s'étend d'un bord à l'autre, les
   espacements respirent avec l'écran (l'accueil garde son écrin centré 1200) */
@media (min-width: 821px) {
  /* Les titres des cartes tiennent sur UNE ligne, partout (les deux pages) */
  .section-domaines .card--domaine h3 { white-space: nowrap; }
}
/* L'encart : titre au vrai Medium italique du fondeur — le juste milieu (v576) */
.notice--orientation .notice__titre { font-weight: 400; font-synthesis: none; }
@media (max-width: 820px) {
  /* le texte demeure nettement plus discret que le titre */
  .notice--orientation p:not(.notice__titre) { font-size: min(0.7rem, 3.1vw); }
  /* la bande pierre se referme plus vite sous l'encart */
  body:has(.page-hero--domaines) .section-domaines { padding-bottom: 2.4rem; }
}

/* --- Domaines desktop : l'encart au point d'équilibre entre cartes et section suivante -- */
@media (min-width: 821px) {
  .band-pierre .notice.notice--orientation { margin-top: 4.5rem; }
}

/* --- Domaines V2 : rangée alignée à la pleine largeur, cartes PROPORTIONNELLES ---------- */
/* Les écarts entre cartes restent fixes (24px), les cartes s'élargissent avec
   l'écran — et TOUT leur contenu grandit dans la même proportion (unités cqw) :
   les retours à la ligne sont donc identiques sur 13, 15, 24 ou 32 pouces. */
@media (min-width: 821px) {
  body:has(.page-hero--domaines) .section-domaines .cards--3 {
    max-width: none;
    margin-inline: 0;
  }
  /* le CONTENU garde les tailles de l'accueil : colonne fixe centrée dans la carte,
     donc mêmes retours à la ligne sur 13, 15, 24 ou 32 pouces */
  body:has(.page-hero--domaines) .section-domaines .card--domaine p {
    max-width: 318px;
    margin-inline: auto;
  }
  /* titres : taille de l'accueil, une seule ligne, l'air grandit avec l'écran */
  .section-domaines .card--domaine h3 { font-size: 1.56rem; }
}

/* --- Engagements desktop : l'espace du haut égale celui du bas -------------------------- */
@media (min-width: 821px) {
  [aria-labelledby="titre-engagements"] { padding-top: 3.8rem; }
}

/* --- Domaines desktop : la bande pierre se referme aussi vite sous l'encart ------------- */
@media (min-width: 821px) {
  body:has(.page-hero--domaines) .section-domaines { padding-bottom: 4.5rem; }
}

/* --- Mobile : cartes de domaines en fondu pur — fluidité absolue ------------------------ */
/* Le glissement vertical pendant le fondu faisait saccader les téléphones :
   les cartes apparaissent immobiles, en fondu seul, sur leur propre couche GPU */
@media (max-width: 820px) {
  .section-domaines .card--domaine.reveal {
    transform: none;
    /* le fondu d'apparition reste pur ; la levée au passage retrouve sa
       transition, plus douce et plus lente qu'avant (1.1s) */
    transition:
      opacity 1.6s cubic-bezier(0.33, 0, 0.15, 1),
      transform 1.5s cubic-bezier(0.45, 0, 0.15, 1),
      border-color 0.8s ease,
      box-shadow 1.5s cubic-bezier(0.45, 0, 0.15, 1);
    will-change: opacity;
  }
  /* la levée part lentement et glisse — plus de départ sec au défilement */
  .section-domaines .card--domaine .card__picto {
    transition: transform 1.5s cubic-bezier(0.45, 0, 0.15, 1);
  }
  .section-domaines .card--domaine.est-survolee { transform: translateY(-6px); }
  .section-domaines .card--domaine.est-survolee .card__picto { transform: translateY(-6px); }
  /* Héros domaines : le titre au maximum (l'interlettrage serré libère la place) */
  .page-hero--domaines h1 { letter-spacing: -0.01em; }
}

/* --- Cartes domaines mobile : hiérarchie affinée (pictos/textes/boutons discrets,
   titres affirmés) — accueil et page domaines, téléphone uniquement ------------------- */
@media (max-width: 820px) {
  .section-domaines .card--domaine .card__picto { height: 78px; width: auto; }
  .section-domaines .card--domaine h3 { font-size: 1.4rem; }
  .section-domaines .card--domaine p { font-size: 0.85rem; }
  .section-domaines .card--domaine .card__link { font-size: 0.69rem; }
}
/* Page domaines, ordinateur : le bouton « Explorer ce domaine » d'un cran plus discret */
@media (min-width: 821px) {
  body:has(.page-hero--domaines) .section-domaines .card--domaine .card__link { font-size: 0.69rem; }
}

/* --- Accueil desktop : « Pour qui » — les libellés Particuliers / Agents publics /
   Entreprises / Collectivités, d'un cran plus discrets ------------------------------- */
@media (min-width: 821px) {
  .section-publics .card--domaine .overline { font-size: 0.78rem; }
}

/* --- Domaines : les cartes reprennent le tempo exact de l'accueil ----------------------- */
/* Le tempo « maison » (1.9s) écrasait les durées propres aux cartes : on les rétablit */
@media (min-width: 821px) {
  body:has(.page-hero--domaines) .section-domaines .reveal { transition-duration: 2.4s; }
  body:has(.page-hero--domaines) .section-domaines .section-head.reveal { transition-duration: 2s; }
}

/* --- Domaines : la rangée s'arrête à la largeur maîtresse du site (1320px) -------------- */
/* Sur 13-15", rien ne change (bord à bord). Sur les grands écrans, les cartes
   plafonnent à 424px : la colonne de texte (336px) les habille presque entièrement */
@media (min-width: 821px) {
  body:has(.page-hero--domaines) .section-domaines .cards--3 {
    max-width: 1320px;
    margin-inline: auto;
  }
}

/* --- Encart orientation : aligné sur la rangée de cartes, entrée de la gauche ----------- */
@media (min-width: 821px) {
  .band-pierre .notice.notice--orientation {
    max-width: 1320px;
    margin-inline: auto;
  }
}
/* Il glisse depuis la gauche à son propre passage (autonome : data-solo) */
@media (prefers-reduced-motion: no-preference) {
  .notice--orientation.reveal {
    transform: translate3d(-44px, 0, 0);
    transition: opacity 2.2s cubic-bezier(0.33, 0, 0.15, 1), transform 2.2s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .notice--orientation.reveal.is-visible { transform: none; }
}

/* --- Savoir-être mobile : citation et texte d'un cran plus légers ------------------------ */
@media (max-width: 820px) {
  [aria-labelledby="titre-savoir-etre"] .pull-quote { font-size: min(1.28rem, 5.5vw); }
  [aria-labelledby="titre-savoir-etre"] .pull-quote + p { font-size: min(0.87rem, 3.75vw); }
}

/* --- Héros cabinet/domaines mobile : le couloir s'élargit, les titres respirent --------- */
/* Le conteneur du héros gagne quelques précieux pixels de large sur téléphone :
   tout le bloc (surtitre, titre, texte, carte) reste aligné, et le H1 peut grandir */
@media (max-width: 820px) {
  body:has(.page-hero) main .page-hero--maison .container { width: calc(100% - 22px); }
  .page-hero--maison h1 { letter-spacing: -0.018em; }
}

/* --- Héros domaines : la lueur douce se pose sur « au Mans » ---------------------------- */
/* Elle quitte le coin gauche pour nimber le mot d'or — ancrée sur le mot lui-même,
   elle le suit quelle que soit la taille de l'écran */
.page-hero--domaines .lueur-hero { display: none; }
.page-hero--domaines h1 em { position: relative; isolation: isolate; }
.page-hero--domaines h1 em::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 19rem;
  height: 10rem;
  background: radial-gradient(closest-side, rgba(198, 164, 101, 0.08), rgba(198, 164, 101, 0.03) 55%, transparent 100%);
  z-index: -1;
  pointer-events: none;
}

/* --- Contact V1 : le héros de la maison, l'écrin du formulaire -------------------------- */
/* La lueur du héros nimbe « au Mans », comme sur la page domaines */
.page-hero--contact .lueur-hero { display: none; }
.page-hero--contact h1 em { position: relative; isolation: isolate; }
.page-hero--contact h1 em::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 19rem;
  height: 10rem;
  background: radial-gradient(closest-side, rgba(198, 164, 101, 0.08), rgba(198, 164, 101, 0.03) 55%, transparent 100%);
  z-index: -1;
  pointer-events: none;
}
/* L'écrin du formulaire : carte ivoire sertie, cadre d'or qui se détache à l'arrivée */
.contact-ecrin {
  position: relative;
  background: var(--ivoire);
  border: 1px solid rgba(156, 124, 56, 0.22);
  padding: 2.5rem 2.4rem 2.3rem;
  box-shadow: 0 26px 54px -36px rgba(15, 25, 20, 0.35);
}
.contact-ecrin::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(156, 124, 56, 0.45);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: transform 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) 1s, opacity 1.6s ease 1s;
}
.contact-ecrin.is-visible::before {
  opacity: 1;
  transform: translate3d(14px, 14px, 0);
}
.contact-ecrin > * { position: relative; z-index: 1; }
@media (max-width: 820px) {
  .contact-ecrin { padding: 1.8rem 1.15rem 1.7rem; }
  .contact-ecrin.is-visible::before { transform: translate3d(10px, 10px, 0); }
}

/* --- Contact V2 : l'invitation — héros à boutons, formulaire en scène, nuit d'accès ----- */
/* Les boutons du héros, sur la nuit du fronton */
.contact-actions { display: flex; gap: 1rem; margin-top: 2.4rem; flex-wrap: wrap; justify-content: flex-start; }
.page-hero--contact .btn { color: var(--ivoire); border-color: rgba(251, 250, 247, 0.45); }
.page-hero--contact .btn:hover,
.page-hero--contact .btn:focus-visible { color: var(--or-clair); border-color: var(--or-clair); background: rgba(198, 164, 101, 0.08); }
.page-hero--contact .btn--or { color: var(--or-clair); border-color: var(--or-clair); }
/* L'adresse murmurée sous les boutons */
.contact-adresse {
  margin: 2rem 0 0;
  font-family: var(--font-lineale);
  font-size: 0.66rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--or-clair);
}
.contact-adresse .pt-meta { font-size: 2.1em; line-height: 0; vertical-align: -0.12em; margin: 0 0.15rem; }
/* La barre de coordonnées, sous le titre de la scène d'écriture */
.ecrire__coordonnees {
  margin: 1.6rem auto 0;
  font-family: var(--font-lineale);
  font-size: 0.68rem;
  letter-spacing: var(--tracking-mentions);
  text-transform: uppercase;
  color: var(--or-profond);
}
.ecrire__coordonnees a { color: inherit; }
.ecrire__coordonnees .pt-meta { font-size: 2.1em; line-height: 0; vertical-align: -0.12em; margin: 0 0.35rem; }
/* L'écrin du formulaire trône au centre */
.section-ecrire .contact-ecrin { max-width: 880px; margin: 2.8rem auto 0; }
/* L'urgence, en épilogue sous l'écrin */
.ecrire__urgence {
  max-width: 46rem;
  margin: 2.4rem auto 0;
  text-align: center;
  font-family: var(--font-garalde);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.75;
  color: rgba(59, 57, 55, 0.85);
}
/* La nuit d'accès : listes lisibles sur le vert profond */
.section-acces .carte-nuit .list-filet { margin-top: 1.1rem; }
.section-acces .carte-nuit .list-filet li { color: rgba(251, 250, 247, 0.82); font-size: 0.86rem; line-height: 1.7; }
/* La carte Google Maps : encadrée d'or, aux encres de la maison */
.carte-acces { line-height: 0; border-top: 1px solid rgba(198, 164, 101, 0.35); position: relative; }
/* Le voile de pierre : la teinte exacte de la charte multipliee sur la carte —
   les blancs deviennent pierre (#E7E2D7), les rues gardent leur encre grise. */
.carte-acces::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pierre);
  mix-blend-mode: multiply;
  pointer-events: none;
  /* fenetre douce : le voile s'estompe autour de l'encart d'adresse de Google,
     qui reste blanc — le reste du plan demeure pierre */
  -webkit-mask-image: radial-gradient(240px 150px at 105px 80px, transparent 40%, #fff 78%);
  mask-image: radial-gradient(240px 150px at 105px 80px, transparent 40%, #fff 78%);
}
.carte-acces iframe {
  width: 100%;
  height: 440px;
  border: 0;
  filter: grayscale(1) brightness(1.07) contrast(1.07);
}
@media (max-width: 820px) {
  .contact-actions { margin-top: 2rem; gap: 0.8rem; }
  .contact-adresse { font-size: min(0.6rem, 2.7vw); }
  .ecrire__coordonnees { font-size: min(0.56rem, 2.5vw); }
  .ecrire__urgence { font-size: min(0.92rem, 4vw); }
  .carte-acces iframe { height: 320px; }
}

/* --- Contact V3 : « La correspondance » — écrire au cabinet, sur l'anthracite ----------- */
/* La scène : fiche gravée à gauche, lettre à droite */
.ecrire-scene {
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  gap: 5.5rem;
  align-items: start;
}
.section-ecrire h2 { color: var(--ivoire); }
.section-ecrire .overline { color: var(--or-clair); }
/* La fiche : les coordonnées gravées entre fils d'or, comme une plaque de cabinet */
.fiche-lignes { margin: 2rem 0 0; }
.fiche-lignes > div {
  padding: 1.05rem 0 1rem;
  border-bottom: 1px solid rgba(198, 164, 101, 0.22);
}
.fiche-lignes > div:first-child { border-top: 1px solid rgba(198, 164, 101, 0.22); }
.fiche-lignes dt {
  font-family: var(--font-lineale);
  font-size: 0.58rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--or-clair);
  margin: 0 0 0.3rem;
}
.fiche-lignes dd {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: rgba(251, 250, 247, 0.88);
}
.fiche-lignes dd a { color: inherit; }
.fiche-lignes dd a:hover { color: var(--or-clair); }
/* La lettre : pas de cases — on écrit sur des lignes d'or */
.lettre { margin-top: 0.4rem; }
.lettre .form-field { position: relative; }
.lettre .form-field input,
.lettre .form-field select,
.lettre .form-field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(198, 164, 101, 0.35);
  border-radius: 0;
  color: var(--ivoire);
  padding: 1.25rem 0 0.55rem;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.lettre .form-field input:focus,
.lettre .form-field select:focus,
.lettre .form-field textarea:focus {
  outline: none;
  border-color: var(--or-clair);
  box-shadow: 0 1px 0 0 var(--or-clair);
}
.lettre .form-field textarea::placeholder { color: rgba(251, 250, 247, 0.35); }
.lettre .form-field select { color: rgba(251, 250, 247, 0.88); }
.lettre .form-field select option { color: var(--anthracite); background: var(--ivoire); }
/* Les étiquettes flottent : posées sur la ligne, elles s'élèvent en petites capitales d'or */
.lettre .form-field > label {
  position: absolute;
  left: 0;
  top: 1.15rem;
  font-family: var(--font-lineale);
  font-weight: 300;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(251, 250, 247, 0.55);
  pointer-events: none;
  transition: top 0.35s cubic-bezier(0.22, 1, 0.36, 1), font-size 0.35s ease, letter-spacing 0.35s ease, color 0.35s ease;
}
.lettre .form-field:focus-within > label,
.lettre .form-field:has(input:not(:placeholder-shown)) > label,
.lettre .form-field:has(select) > label,
.lettre .form-field:has(textarea) > label {
  top: -0.15rem;
  font-size: 0.56rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--or-clair);
}
/* Consentement et note sur la nuit */
.lettre .form-field label[for="f-consent"] { position: static; pointer-events: auto; color: rgba(251, 250, 247, 0.75); transition: none; }
.lettre input[type="checkbox"] { accent-color: var(--or-profond); }
.lettre #form-note { color: rgba(251, 250, 247, 0.75); }
/* Le bouton scelle la lettre */
.lettre .btn--or { color: var(--or-clair); border-color: var(--or-clair); }
.lettre .btn--or:hover, .lettre .btn--or:focus-visible { background: rgba(198, 164, 101, 0.1); color: #EAD397; border-color: #EAD397; }

/* --- Venir au cabinet : trois voies ouvertes, séparées de fils d'or --------------------- */
.acces-voies {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1.5rem;
}
.acces-voie { padding: 0.6rem 2.3rem 0.4rem; }
.acces-voies > div:nth-child(n+2) .acces-voie { border-left: 1px solid rgba(198, 164, 101, 0.22); }
.acces-voie .num {
  font-family: var(--font-lineale);
  font-size: 0.66rem;
  letter-spacing: var(--tracking-nav);
  color: var(--or-clair);
  margin: 0 0 0.7rem;
}
.acces-voie h3 {
  color: var(--ivoire);
  font-size: 1.35rem;
  margin: 0 0 0.4rem;
}
.acces-voie .list-filet { margin-top: 0.9rem; }
.acces-voie .list-filet li { color: rgba(251, 250, 247, 0.8); font-size: 0.86rem; line-height: 1.7; }

/* --- La carte Google Maps, collée à ses voisines ----------------------------------------- */
.carte-acces { padding: 0; }

@media (max-width: 820px) {
  .ecrire-scene { grid-template-columns: 1fr; gap: 2.8rem; }
  .fiche-lignes dd { font-size: min(0.88rem, 3.85vw); }
  .acces-voies { grid-template-columns: 1fr; gap: 0; margin-top: 0.4rem; }
  .acces-voie { padding: 1.5rem 0.2rem 1.3rem; }
  .acces-voies > div:nth-child(n+2) .acces-voie { border-left: 0; border-top: 1px solid rgba(198, 164, 101, 0.22); }
}

/* --- Contact V4 : le contraste des deux cartes, le fil qui prend forme ------------------ */
/* Le héros respire moins vide : le texte s'étend */
@media (min-width: 821px) {
  .page-hero--contact .page-hero__lede { max-width: 56em; }
}
/* La carte de visite : un carton de nuit serti, distinct de la lettre ivoire */
.carte-visite {
  background:
    linear-gradient(180deg, rgba(7, 14, 10, 0.5) 0%, rgba(7, 14, 10, 0) 55%),
    linear-gradient(158deg, var(--vert-nuit) 0%, #273730 55%, #1B2721 100%);
  border: 1px solid rgba(198, 164, 101, 0.4);
  border-top-width: 2px;
  padding: 2.2rem 2rem 1.6rem;
  box-shadow: 0 30px 64px -30px rgba(0, 0, 0, 0.45);
}
.carte-visite .overline { color: var(--or-clair); }
.carte-visite__nom {
  font-family: var(--font-garalde);
  font-weight: 300;
  font-size: 1.6rem;
  color: var(--ivoire);
  margin: 0.9rem 0 0.15rem;
}
.carte-visite__role {
  font-family: var(--font-lineale);
  font-size: 0.6rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--or-clair);
  margin: 0 0 0.4rem;
}
.carte-visite__lame {
  width: 92px;
  height: 2px;
  border: 0;
  margin: 1.2rem 0 0.6rem;
  background: linear-gradient(90deg, rgba(198, 164, 101, 0) 0%, var(--or-clair) 9%, #EAD397 42%, var(--or-clair) 88%, rgba(198, 164, 101, 0) 100%);
  clip-path: polygon(0% 22%, 100% 45%, 100% 55%, 0% 76%);
}
/* La lettre : grande carte ivoire — le contraste est franc */
.lettre-carte {
  background: var(--ivoire);
  border: 1px solid rgba(156, 124, 56, 0.25);
  padding: 2.6rem 2.6rem 2.4rem;
  box-shadow: 0 34px 70px -38px rgba(0, 0, 0, 0.5);
}
.lettre-carte .overline { color: var(--or-profond); }
.lettre-carte h2 { color: var(--anthracite); font-size: 1.9rem; margin: 0.7rem 0 0; }
/* Le fil d'or : la demande prend forme à mesure qu'on écrit */
.lettre-progres {
  position: relative;
  height: 2px;
  background: rgba(156, 124, 56, 0.16);
  margin: 1.7rem 0 1rem;
  overflow: hidden;
}
.lettre-progres__fil {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--or-profond), var(--or-clair) 70%, #EAD397 100%);
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Les champs : lignes d'encre sur l'ivoire, étiquettes flottantes conservées */
.lettre-carte .lettre .form-field input,
.lettre-carte .lettre .form-field select,
.lettre-carte .lettre .form-field textarea {
  color: var(--anthracite);
  border-bottom-color: rgba(156, 124, 56, 0.4);
}
.lettre-carte .lettre .form-field input:focus,
.lettre-carte .lettre .form-field select:focus,
.lettre-carte .lettre .form-field textarea:focus {
  border-color: var(--or-profond);
  box-shadow: 0 1px 0 0 var(--or-profond);
}
.lettre-carte .lettre .form-field textarea::placeholder { color: rgba(59, 57, 55, 0.35); }
.lettre-carte .lettre .form-field select { color: var(--anthracite); }
.lettre-carte .lettre .form-field > label { color: rgba(59, 57, 55, 0.5); }
.lettre-carte .lettre .form-field:focus-within > label,
.lettre-carte .lettre .form-field:has(input:not(:placeholder-shown)) > label,
.lettre-carte .lettre .form-field:has(select) > label,
.lettre-carte .lettre .form-field:has(textarea) > label { color: var(--or-profond); }
.lettre-carte .lettre .form-field label[for="f-consent"] { color: rgba(59, 57, 55, 0.75); }
.lettre-carte .lettre #form-note { color: rgba(59, 57, 55, 0.75); }
/* Le sceau : bouton plein or */
.lettre-carte .btn--or {
  background: var(--or-profond);
  border-color: var(--or-profond);
  color: var(--ivoire);
}
.lettre-carte .btn--or:hover,
.lettre-carte .btn--or:focus-visible { background: #8a6d31; border-color: #8a6d31; color: var(--ivoire); }

/* --- Venir au cabinet : les onglets au curseur d'or -------------------------------------- */
.section-acces-2 { padding-bottom: 4.6rem; }
.voies { max-width: 720px; margin: 0 auto; }
.voies__onglets {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 2.6rem;
  border-bottom: 1px solid rgba(156, 124, 56, 0.25);
  padding-bottom: 0;
}
.voie-onglet {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-lineale);
  font-size: 0.72rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: rgba(59, 57, 55, 0.55);
  padding: 0.4rem 0.2rem 1.05rem;
  transition: color 0.35s ease;
}
.voie-onglet:hover { color: var(--anthracite); }
.voie-onglet.est-active { color: var(--or-profond); }
.voies__curseur {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--or-profond), var(--or-clair));
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.voie-panneau { display: none; padding-top: 1.7rem; }
.voie-panneau.est-active { display: block; animation: voieFondu 0.7s cubic-bezier(0.33, 0, 0.15, 1) both; }
@keyframes voieFondu {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: none; }
}
.voie-panneau .list-filet { max-width: 560px; margin: 0 auto; }

@media (max-width: 820px) {
  .lettre-carte { padding: 1.9rem 1.2rem 1.8rem; }
  .lettre-carte h2 { font-size: min(1.5rem, 6.4vw); }
  .carte-visite { padding: 1.8rem 1.3rem 1.2rem; }
  .voies__onglets { gap: 1.1rem; }
  .voie-onglet { font-size: min(0.6rem, 2.8vw); letter-spacing: 0.12em; }
}

/* --- Contact V5 : « LE DOSSIER » — le fil d'or vertical aux trois actes ------------------ */
.ecrire-note {
  margin: 1.5rem auto 0;
  max-width: 40rem;
  font-family: var(--font-garalde);
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(251, 250, 247, 0.72);
}
.dossier {
  position: relative;
  max-width: 780px;
  margin: 3.2rem auto 0;
  padding-left: 3.2rem;
}
/* Le fil vertical, colonne vertébrale du dossier */
.dossier::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 12px;
  bottom: 26px;
  width: 1px;
  background: linear-gradient(180deg, rgba(198, 164, 101, 0.55) 0%, rgba(198, 164, 101, 0.28) 60%, rgba(198, 164, 101, 0) 100%);
}
.dossier__acte { position: relative; padding-bottom: 2.9rem; }
.dossier__acte:last-child { padding-bottom: 0; }
/* Le losange de chaque acte : creux, puis il s'emplit d'or quand l'acte est complet */
.acte-losange {
  position: absolute;
  left: -3.2rem;
  top: 4px;
  width: 10px;
  height: 10px;
  margin-left: 3.5px;
  transform: rotate(45deg);
  border: 1px solid var(--or-clair);
  background: transparent;
  transition: background 0.8s ease, box-shadow 0.8s ease;
}
.dossier__acte.est-complet .acte-losange {
  background: linear-gradient(135deg, #EAD397 0%, var(--or-profond) 100%);
  box-shadow: 0 0 14px rgba(198, 164, 101, 0.45);
}
.acte-titre {
  font-family: var(--font-lineale);
  font-size: 0.66rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--or-clair);
  margin: 0 0 0.4rem;
}
.acte-num { color: rgba(198, 164, 101, 0.55); margin-right: 0.7rem; }
.acte-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 2.2rem; }
.acte-champs .form-field--full { grid-column: 1 / -1; }
/* Le consentement et le sceau */
.dossier-consent { display: flex; gap: 0.85rem; align-items: flex-start; margin-top: 0.9rem; }
.dossier-consent input[type="checkbox"] { width: auto; margin-top: 0.4rem; accent-color: var(--or-profond); }
.dossier-consent label {
  position: static !important;
  pointer-events: auto !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.82rem !important;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(251, 250, 247, 0.75) !important;
  transition: none !important;
}
.dossier .form-field--full:last-child { margin-top: 0.8rem; }
.dossier-sceau { margin-top: 0.5rem; }
.dossier #form-note { color: rgba(251, 250, 247, 0.72); font-size: 0.85rem; margin-top: 1rem; }

/* --- L'atelier : le visuel d'orfèvre et la fiche pratique -------------------------------- */
.atelier {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: 5rem;
  align-items: center;
}
.atelier-visuel { margin: 0; }
.atelier-visuel svg { width: 100%; height: auto; display: block; }
.pratique-lignes { margin: 2rem 0 0; }
.pratique-lignes > div {
  padding: 0.95rem 0 0.9rem;
  border-bottom: 1px solid rgba(156, 124, 56, 0.22);
}
.pratique-lignes > div:first-child { border-top: 1px solid rgba(156, 124, 56, 0.22); }
.pratique-lignes dt {
  font-family: var(--font-lineale);
  font-size: 0.58rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--or-profond);
  margin: 0 0 0.25rem;
}
.pratique-lignes dd { margin: 0; font-size: 0.92rem; line-height: 1.65; color: var(--anthracite); }
.pratique-lignes dd a { color: inherit; }
.pratique-lignes dd a:hover { color: var(--or-profond); }
.section-atelier { padding-bottom: 5rem; }

@media (max-width: 820px) {
  .dossier { padding-left: 2.1rem; margin-top: 2.4rem; }
  .acte-losange { left: -2.1rem; }
  .acte-champs { grid-template-columns: 1fr; gap: 0.3rem; }
  .atelier { grid-template-columns: 1fr; gap: 1.6rem; }
  .atelier-visuel { max-width: 340px; margin: 0 auto; }
  .ecrire-note { font-size: min(0.95rem, 4.1vw); }
}

/* --- Contact V6 : « ici » seul en or, hiérarchie des quatre façons ---------------------- */
@media (min-width: 821px) {
  body:has(.page-hero--contact) [aria-labelledby="titre-modes"] .section-head h2 { font-size: 2.7rem; }
}
@media (max-width: 820px) {
  body:has(.page-hero--contact) [aria-labelledby="titre-modes"] .section-head h2 { font-size: min(2.06rem, 8.85vw); }
}
body:has(.page-hero--contact) [aria-labelledby="titre-modes"] .card--domaine .overline { font-size: 0.6rem; }

/* --- Héros cabinet : la lumière se pose sur « l'exigence » ------------------------------- */
.page-hero--maison:not(.page-hero--domaines):not(.page-hero--contact) .lueur-hero { display: none; }
.page-hero--maison:not(.page-hero--domaines):not(.page-hero--contact) h1 em { position: relative; isolation: isolate; }
.page-hero--maison:not(.page-hero--domaines):not(.page-hero--contact) h1 em::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 19rem;
  height: 10rem;
  background: radial-gradient(closest-side, rgba(198, 164, 101, 0.08), rgba(198, 164, 101, 0.03) 55%, transparent 100%);
  z-index: -1;
  pointer-events: none;
}

/* --- Héros contact mobile : sceau descendu, titre et texte affirmés --------------------- */
@media (max-width: 820px) {
  /* le monogramme reste coupé en haut mais descend combler l'air du bas */
  .page-hero--contact .sceau-maison { margin-top: 38px; }
  .page-hero--contact h1 { font-size: min(2.1rem, 8.85vw); }
  .page-hero--contact .page-hero__lede { font-size: min(0.9rem, 3.85vw); }
}

/* --- Contact : la vitrine — le pictogramme en pleine scène, fondu dans la page ---------- */
.vitrine-contact {
  padding: 0;
  background: rgb(250, 246, 245);   /* la teinte exacte du haut de l'image : aucune couture */
  line-height: 0;
}
.vitrine-contact__cadre { position: relative; }
.vitrine-contact img { width: 100%; height: auto; display: block; }
/* Les trois gestes du visuel sont réels : appeler, écrire, prendre rendez-vous */
.vitrine-zone { position: absolute; display: block; cursor: pointer; }
.vitrine-zone:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 4px; }

/* --- Contact V7 : la page vague — le langage du pictogramme ----------------------------- */
/* La vague à fil d'or referme le héros */
.page-hero--contact { position: relative; }
.vague-hero {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  line-height: 0;
  pointer-events: none;
}
.vague-hero svg { width: 100%; height: 96px; display: block; }
/* La scène de l'échange : le pictogramme composé avec les trois gestes cerclés */
.section-echange { position: relative; overflow: hidden; }
.arc-or {
  position: absolute;
  top: -34rem;
  right: -22rem;
  width: 62rem;
  height: 62rem;
  border: 1px solid rgba(198, 164, 101, 0.3);
  border-radius: 50%;
  pointer-events: none;
}
.echange {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 52%) minmax(0, 1fr);
  gap: 4rem;
  align-items: center;
  width: 100%;
  padding-right: max(2rem, calc((100vw - 1320px) / 2));
}
.echange-visuel { margin: 0; }
.echange-visuel img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 22px;
  box-shadow: 0 40px 80px -42px rgba(15, 25, 20, 0.5);
}
/* Les trois gestes, cerclés comme dans le pictogramme */
.gestes { list-style: none; margin: 2.2rem 0 0; padding: 0; }
.gestes li + li { margin-top: 1.1rem; }
.gestes a {
  display: flex;
  align-items: center;
  gap: 1.3rem;
  padding: 1.05rem 1.4rem;
  border: 1px solid rgba(156, 124, 56, 0.25);
  border-radius: 999px;
  text-decoration: none;
  transition: border-color 0.4s ease, box-shadow 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.gestes a:hover {
  border-color: var(--or-profond);
  box-shadow: 0 18px 40px -24px rgba(156, 124, 56, 0.45);
  transform: translateY(-3px);
}
.geste-cercle {
  flex: none;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(156, 124, 56, 0.55);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--or-profond);
  transition: background 0.4s ease, color 0.4s ease;
}
.gestes a:hover .geste-cercle { background: rgba(198, 164, 101, 0.12); }
.geste-cercle svg { width: 22px; height: 22px; }
.geste-corps { display: block; }
.geste-nom {
  display: block;
  font-family: var(--font-lineale);
  font-size: 0.62rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--or-profond);
}
.geste-valeur {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-garalde);
  font-size: 1.12rem;
  color: var(--anthracite);
}
/* Les boutons de la page épousent la rondeur du pictogramme */
body:has(.page-hero--contact) .btn { border-radius: 999px; }
@media (max-width: 820px) {
  .vague-hero svg { height: 52px; }
  .echange { grid-template-columns: 1fr; gap: 2.4rem; }
  .echange-visuel img { border-radius: 14px; }
  .gestes a { padding: 0.85rem 1.05rem; gap: 1rem; }
  .geste-cercle { width: 46px; height: 46px; }
  .geste-valeur { font-size: min(1rem, 4.4vw); }
  .arc-or { display: none; }
}

/* --- Contact V8 : l'arc traversant, le picto fondu, les capsules ------------------------ */
/* Le ruban : l'arc d'or voyage sur les deux sections claires */
.ruban-arc { position: relative; overflow: hidden; }
.ruban-arc .arc-or {
  position: absolute;
  top: -78rem;
  right: -38rem;
  width: 130rem;
  height: 130rem;
  border: 1px solid rgba(198, 164, 101, 0.32);
  border-radius: 50%;
  pointer-events: none;
}
.ruban-arc section { position: relative; }
/* Le pictogramme fondu dans la page : plus de carte — les bords s'évanouissent */
.echange-visuel img {
  border-radius: 0;
  box-shadow: none;
}
/* La correspondance moderne : infos à gauche, capsules à droite */
.ecrire-duo {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 5.5rem;
  align-items: start;
}
.ecrire-titre { color: var(--ivoire); }
.ecrire-infos h2 { color: var(--ivoire); }
.section-ecrire .overline { color: var(--or-clair); }
/* Les champs-capsules : la rondeur du pictogramme, la nuit de la maison */
.capsules { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-top: 2rem; }
.capsules .form-field--full { grid-column: 1 / -1; }
.capsules .form-field { position: relative; }
.capsules .form-field input,
.capsules .form-field select,
.capsules .form-field textarea {
  width: 100%;
  background: rgba(251, 250, 247, 0.045);
  border: 1px solid rgba(198, 164, 101, 0.28);
  border-radius: 16px;
  color: var(--ivoire);
  font-family: var(--font-lineale);
  font-size: 0.92rem;
  padding: 1.5rem 1.2rem 0.65rem;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}
.capsules .form-field textarea { border-radius: 20px; min-height: 10rem; resize: none; }
.capsules .form-field input:focus,
.capsules .form-field select:focus,
.capsules .form-field textarea:focus {
  outline: none;
  border-color: var(--or-clair);
  background: rgba(251, 250, 247, 0.07);
  box-shadow: 0 0 0 4px rgba(198, 164, 101, 0.14);
}
.capsules .form-field select option { color: var(--anthracite); background: var(--ivoire); }
/* Étiquettes flottantes, posées dans la capsule puis élevées en or */
.capsules .form-field > label {
  position: absolute;
  left: 1.25rem;
  top: 1.05rem;
  font-family: var(--font-lineale);
  font-weight: 300;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(251, 250, 247, 0.55);
  pointer-events: none;
  transition: top 0.35s cubic-bezier(0.22, 1, 0.36, 1), font-size 0.35s ease, color 0.35s ease, letter-spacing 0.35s ease;
}
.capsules .form-field input,
.capsules .form-field select {
  height: 3.625rem;
  box-sizing: border-box;
}
.capsules .form-field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 2.8rem;
  line-height: 1.3;
}
/* La fleche des menus : la meme que « Explorer ce domaine », tournee vers le bas */
.capsules .form-field:has(select)::after {
  content: "\2193";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--or-clair);
  font-size: 0.95rem;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.capsules .form-field:focus-within:has(select)::after { transform: translateY(calc(-50% + 3px)); }
/* Menu vide : la valeur (le tiret) s'efface, l'etiquette repose dans la capsule
   comme pour les champs texte ; le tiret reapparait a l'ouverture. */
.capsules .form-field select:invalid { color: transparent; }
.capsules .form-field:focus-within select:invalid { color: var(--ivoire); }
.capsules .form-field:focus-within > label,
.capsules .form-field:has(input:not(:placeholder-shown)) > label,
.capsules .form-field:has(textarea:not(:placeholder-shown)) > label,
.capsules .form-field:has(select:valid) > label {
  top: 0.5rem;
  font-size: 0.53rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--or-clair);
}
.capsules-consent { display: flex; gap: 0.85rem; align-items: flex-start; margin-top: 0.4rem; }
.capsules-consent input[type="checkbox"] { width: auto; margin-top: 0.26rem; accent-color: var(--or-profond); }
.capsules-consent label {
  font-family: var(--font-lineale);
  font-weight: 300;
  font-size: 0.8rem;
  line-height: 1.65;
  color: rgba(251, 250, 247, 0.72);
}
/* Le sceau d'envoi : voile d'or leger au repos, qui s'affirme au survol */
.capsules .capsules-sceau {
  margin-top: 0.6rem;
  background: rgba(198, 164, 101, 0.05);
  border-color: rgba(198, 164, 101, 0.42);
  color: var(--or-clair);
}
.capsules .capsules-sceau:hover,
.capsules .capsules-sceau:focus-visible {
  background: rgba(198, 164, 101, 0.24);
  border-color: var(--or-clair);
  color: var(--or-clair);
}
.capsules #form-note { color: rgba(251, 250, 247, 0.72); font-size: 0.85rem; margin-top: 1rem; }
@media (max-width: 820px) {
  .ruban-arc .arc-or { display: none; }
  .ecrire-duo { grid-template-columns: 1fr; gap: 2.6rem; }
  .capsules { grid-template-columns: 1fr; gap: 0.9rem; }
}

/* --- Contact V9 : tiret signature d'Échangeons, ronde des gestes ------------------------ */
/* Le tiret d'or se déploie quand la section se révèle, comme au héros */
.echange-gestes.reveal.is-visible .overline--signature {
  animation: deploiement-or 2.6s cubic-bezier(0.25, 0.6, 0.3, 1) 0.8s both;
}
/* L'état « survolé » des gestes, déclenchable aussi par la ronde automatique */
.gestes li.est-survole a {
  border-color: var(--or-profond);
  box-shadow: 0 18px 40px -24px rgba(156, 124, 56, 0.45);
  transform: translateY(-3px);
}
.gestes li.est-survole .geste-cercle { background: rgba(198, 164, 101, 0.12); }

/* --- Contact V10 : la colline verte — un seul ensemble organique ------------------------ */
.section-echange { padding-top: 2rem; padding-bottom: 0; }
.colline-verte {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 42%;
  line-height: 0;
  pointer-events: none;
}
.colline-verte svg { width: 100%; height: 100%; display: block; }
/* Le pictogramme touche le bord gauche : sa vague et son fil d'or filent hors de l'écran */
.echange-visuel { margin: 0; position: relative; z-index: 1; }
.echange-gestes { position: relative; z-index: 1; padding-bottom: 3.5rem; }
/* Les gestes deviennent des capsules d'ivoire : lisibles sur l'ivoire comme sur le vert */
.gestes a {
  background: var(--ivoire);
  box-shadow: 0 16px 38px -26px rgba(15, 25, 20, 0.4);
}
@media (max-width: 820px) {
  .echange { grid-template-columns: 1fr; gap: 2rem; padding-right: 0; }
  .echange-gestes { padding: 0 1.1rem 2.2rem; }
  .colline-verte { height: 30%; }
}

/* --- Contact V11 : un seul vert — la colline porte les appareils ------------------------ */
/* Les lignes d'encadrement de la section des modes disparaissent (page contact) */
body:has(.page-hero--contact) .section-publics { border-top: 0; border-bottom: 0; }
/* Les appareils s'assoient sur la colline (le seul vert est le nôtre) */
.echange { align-items: end; }
.echange-visuel { align-self: end; margin-bottom: 2.6rem; }
.echange-gestes { padding-bottom: 4.2rem; }
/* Hauteur asservie a la LARGEUR DE L'IMAGE (et non au pourcentage de section) :
   le raccord panneau/colline tient ainsi sur 13, 15, 24, 27 ou 32 pouces.
   largeur image = 52% x (100vw - retrait droit) ; hauteur = 22.8px + 0.4475 x largeur. */
.colline-verte { height: calc(22.8px + 0.2327 * min(100vw - 2rem, 50vw + 660px) + max(0px, 0.027 * (100vw - 2560px))); }
/* Deux traces de colline : celle du bureau rejoint le panneau du telephone,
   celle du mobile reste strictement celle validee. */
.colline-trace--mobile { display: none; }
@media (max-width: 820px) {
  .colline-trace--desktop { display: none; }
  .colline-trace--mobile { display: block; }
}
@media (max-width: 820px) {
  .colline-verte { height: 34%; }
  .echange-visuel { margin-bottom: 0.6rem; }
}

/* --- Contact V12 : soudure invisible colline/section anthracite (aucun trait Retina) ---- */
/* Le bord inférieur du SVG de la colline s'anticrénelait sur l'ivoire à la jonction des
   deux sections (frontière sur un demi-pixel physique). Un raccord plein recouvre la
   couture — indépendant du rendu vectoriel, invisible à toute densité d'écran. */
.section-echange::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background: var(--anthracite);
  pointer-events: none;
}
/* iPhone (3x) : la frontière entre les deux boîtes tombe sur un tiers de pixel — la
   section formulaire remonte d'un pixel SOUS la colline : chevauchement réel, plus
   aucun interstice possible, quel que soit l'arrondi du moteur de rendu. */
body:has(.page-hero--contact) #ecrire { margin-top: -1px; }


/* --- Contact V13 : le monogramme ne se repete plus — un arc d'or discret le remplace ----- */
/* Le sceau est deja dans le heros et le pied de page : derriere « Quatre facons de
   consulter », c'est l'arc du pictogramme qui revient, en fil leger. */
body:has(.page-hero--contact) .section-publics {
  background-image: none;
  position: relative;
  overflow: hidden;
}



/* --- Contact V14 : fil d'or du formulaire, grille d'acces ------------------------------- */
/* Le fil d'or longe le formulaire et se deploie du haut vers le bas a l'arrivee,
   comme la ligne de la frise — sans losanges, effile a ses deux extremites. */
/* L'ecrin du formulaire : une carte a peine plus claire que la nuit de la section,
   sertie d'un cheveu d'or, posee sur une ombre profonde — a part, mais du meme monde.
   La grille s'etire : le bas de l'ecrin termine sur la ligne du dernier encart de gauche. */
.ecrire-duo { align-items: stretch; }
/* Composition scellee : au-dela du 15 pouces le plus large (fenetre 1710px,
   MacBook Air 15), la scene cesse de grandir — en dessous, rien ne change. */
@media (min-width: 1711px) {
  body:has(.page-hero--contact) main .container.ecrire-duo {
    max-width: 1624px;
    margin-left: auto;
    margin-right: auto;
  }
}
.ecrire-formulaire {
  position: relative;
  margin-top: calc(-2.5rem - 1px);
  display: flex;
  flex-direction: column;
  background: rgba(251, 250, 247, 0.03);
  border: 1px solid rgba(198, 164, 101, 0.16);
  border-radius: 26px;
  padding: 2.5rem 2.7rem;
  box-shadow: 0 34px 80px -34px rgba(0, 0, 0, 0.6);
  scroll-margin-top: 8rem;
}
/* L'interieur respire symetriquement : meme air au-dessus du surtitre qu'apres le
   bouton — la marge disponible est absorbee par le champ message, qui grandit. */
/* Les deux colonnes etant flex, leurs surtitres partagent le meme repere : plus
   aucune compensation de demi-interlignage n'est necessaire. */
.ecrire-formulaire { padding-bottom: 2.5rem; }
.ecrire-formulaire #form-note:empty { display: none; }
.ecrire-formulaire .capsules { margin-top: 2.6rem; flex: 1; }
.ecrire-formulaire .capsules-consent { margin-top: 0.9rem; }
.ecrire-formulaire .capsules-sceau { margin-top: 1.1rem; }
@media (min-width: 821px) {
  .ecrire-formulaire .capsules { grid-template-rows: repeat(4, auto) minmax(10rem, 1fr) auto auto; }
  .ecrire-formulaire .form-field--full:has(textarea) { display: flex; flex-direction: column; }
  .ecrire-formulaire .form-field--full textarea { flex: 1; min-height: 10rem; }
}
@media (max-width: 820px) {
  .ecrire-formulaire { padding: 1.7rem 1.35rem 1.9rem; border-radius: 20px; margin-top: 0; }
}

/* L'acces au cabinet : l'adresse en lettre d'or, quatre capsules de reperes */
.acces-adresse { margin: 1.3rem 0 2rem; }
.acces-rue {
  display: block;
  font-family: var(--font-garalde);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.25;
  color: var(--ivoire);
}
/* La colonne d'acces occupe toute la hauteur de la rangee : ses capsules se
   repartissent et la derniere s'ancre sur la ligne du bas de l'ecrin, a toute largeur */
@media (min-width: 821px) {
  .ecrire-infos { display: flex; flex-direction: column; }
  .ecrire-infos .acces-grille { flex: 1; align-content: space-between; }
}
/* Dans les colonnes flex, les surtitres reprennent leur largeur de mot :
   l'ecriture doree balaie la meme distance qu'Echangeons — meme tempo percu. */
.ecrire-infos > .overline--signature,
.ecrire-formulaire > .overline--signature { align-self: flex-start; }
/* Les deux colonnes naissent d'un meme souffle, leurs surtitres ensemble,
   dans un fondu plus ample que le pas commun de la page */
.section-ecrire .ecrire-infos.reveal,
.section-ecrire .ecrire-formulaire.reveal {
  transition-delay: 0s;
  transition-duration: 2.6s;
}
/* Les reperes d'acces se devoilent l'un apres l'autre (bureau).
   Leur transition de survol ecraserait celle de la revelation : on fusionne les deux. */
@media (min-width: 821px) {
  .acces-grille li:nth-child(1) { --reveal-delay: 0.1s; }
  .acces-grille li:nth-child(2) { --reveal-delay: 0.3s; }
  .acces-grille li:nth-child(3) { --reveal-delay: 0.5s; }
  .acces-grille li:nth-child(4) { --reveal-delay: 0.7s; }
}
@media (prefers-reduced-motion: no-preference) {
  .acces-grille li.reveal {
    transition:
      opacity 2.6s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s),
      transform 2.6s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s),
      border-color 0.4s ease,
      background 0.4s ease;
  }
}
/* Les tirets signature des deux colonnes se deploient a la revelation, comme au heros */
.ecrire-infos.reveal.is-visible .overline--signature,
.ecrire-formulaire.reveal.is-visible .overline--signature {
  animation: deploiement-or 2.6s cubic-bezier(0.25, 0.6, 0.3, 1) 0.5s both;
}
.acces-ville {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--or-clair);
}
.acces-grille {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}
.acces-grille li {
  display: flex;
  gap: 1.05rem;
  align-items: flex-start;
  border: 1px solid rgba(198, 164, 101, 0.22);
  border-radius: 16px;
  background: rgba(251, 250, 247, 0.035);
  padding: 1.1rem 1.1rem 1.05rem;
  transition: border-color 0.4s ease, background 0.4s ease;
}
.acces-grille li:hover { border-color: rgba(198, 164, 101, 0.5); background: rgba(251, 250, 247, 0.06); }
.acces-ico {
  flex: 0 0 auto;
  margin-top: -8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(198, 164, 101, 0.55);
  display: grid;
  place-items: center;
  color: var(--or-clair);
}
.acces-ico svg { width: 15px; height: 15px; }
.acces-corps {
  display: block;
  font-family: var(--font-lineale);
  font-weight: 300;
  font-size: 0.8rem;
  line-height: 1.55;
  color: rgba(251, 250, 247, 0.78);
}
.acces-pt {
  display: block;
  border-left: 1px solid rgba(198, 164, 101, 0.6);
  padding-left: 0.85rem;
  margin-top: 0.75rem;
}
.acces-pt b {
  display: block;
  font-weight: 400;
  font-size: 0.84rem;
  color: rgba(251, 250, 247, 0.92);
}
.acces-pt > span {
  display: block;
  font-size: 0.76rem;
  color: rgba(251, 250, 247, 0.58);
  margin-top: 0.15rem;
}
.acces-corps strong {
  display: block;
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--or-clair);
  margin-bottom: 0.3rem;
}
@media (max-width: 820px) {
  .acces-grille { grid-template-columns: 1fr; }
}


/* L'arrivee d'Echangeons se fait plus douce : le pictogramme et les gestes
   fondent dans un souffle plus long que le pas commun */
@media (prefers-reduced-motion: no-preference) {
  .section-echange .echange-visuel.reveal,
  .section-echange .echange-gestes.reveal { transition-duration: 3.3s; }
}

/* --- Contact V16 : la cascade des quatre modes prend le temps d'etre vue ---------------- */
/* Les delais inline du script sont resserres (pas de 0.18s) : on les espace ici,
   uniquement sur la page contact, sans toucher aux autres pages. */
@media (min-width: 821px) {
  body:has(.page-hero--contact) [aria-labelledby="titre-modes"] .cards--4 .card--domaine:nth-child(1) { --reveal-delay: 0.35s !important; }
  body:has(.page-hero--contact) [aria-labelledby="titre-modes"] .cards--4 .card--domaine:nth-child(2) { --reveal-delay: 0.7s !important; }
  body:has(.page-hero--contact) [aria-labelledby="titre-modes"] .cards--4 .card--domaine:nth-child(3) { --reveal-delay: 1.05s !important; }
  body:has(.page-hero--contact) [aria-labelledby="titre-modes"] .cards--4 .card--domaine:nth-child(4) { --reveal-delay: 1.4s !important; }
}


/* --- Presse V8 : l'entree en trois temps — la carte, le cadre, la manchette -------------- */
/* 1er temps : l'encadre principal fond amplement ; 2e : le cadre fin se detache en
   quinconce ; 3e : la manchette Le Figaro s'imprime en filigrane, comme a l'encre. */
@media (prefers-reduced-motion: no-preference) {
  .presse-carte.reveal,
  body:has(.page-hero--maison) main .presse-carte.reveal { transition-duration: 2.6s; }
  .presse-carte::before { transition-delay: 1.4s, 1.4s; }
  .presse-carte__manchette { opacity: 0; transition: opacity 1.2s ease 0.35s; }
  .presse-carte.is-visible .presse-carte__manchette { opacity: 0.09; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 820px) {
  .presse-carte.is-visible .presse-carte__manchette { opacity: 0.11; }
}


/* --- Pages juridiques : sommaire a gauche, sections numerotees -------------------------- */
/* Mentions legales & politique de confidentialite : meme gabarit, parallélisme des formes. */
.juridique-intro {
  max-width: 44em;
  margin-top: 1.2rem;
  font-family: var(--font-lineale);
  font-weight: 300;
  font-size: 0.98rem;
  line-height: 1.8;
  color: rgba(251, 250, 247, 0.78);
}
.juridique { padding: 3.2rem 0 6rem; }
.juridique-scene {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 4.5rem;
  align-items: start;
}
/* Le sommaire : epingle a gauche, il suit la lecture */
.juridique-sommaire {
  position: sticky;
  top: 108px;
  border-left: 1px solid rgba(156, 124, 56, 0.3);
  padding-left: 1.4rem;
}
.sommaire-titre {
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--or-profond);
  margin: 0 0 1.1rem;
}
.juridique-sommaire ol { list-style: none; margin: 0; padding: 0; counter-reset: sommaire; }
.juridique-sommaire li { counter-increment: sommaire; }
.juridique-sommaire li + li { margin-top: 0.65rem; }
.juridique-sommaire a {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  font-family: var(--font-lineale);
  font-weight: 300;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(59, 57, 55, 0.66);
  text-decoration: none;
  transition: color 0.35s ease;
}
.juridique-sommaire a::before {
  content: counter(sommaire, decimal-leading-zero);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: rgba(156, 124, 56, 0.55);
  transition: color 0.35s ease;
}
.juridique-sommaire a:hover { color: var(--anthracite); }
.juridique-sommaire a.est-actif { color: var(--or-profond); }
.juridique-sommaire a.est-actif::before { color: var(--or-profond); }
/* Le corps : sections numerotees, filets discrets */
.bloc-juridique { padding: 2.1rem 0; border-top: 1px solid rgba(156, 124, 56, 0.18); scroll-margin-top: 118px; }
.juridique-corps > .bloc-juridique:first-child,
.juridique-preambule + .bloc-juridique { border-top: 0; padding-top: 0.4rem; }
.bloc-juridique h2 {
  display: flex;
  gap: 0.85rem;
  align-items: baseline;
  font-size: 1.42rem;
  margin: 0 0 1.1rem;
}
.bloc-num {
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--or-profond);
}
.bloc-juridique p, .bloc-juridique li {
  font-size: 0.95rem;
  line-height: 1.85;
  color: rgba(59, 57, 55, 0.88);
}
.bloc-juridique p + p, .bloc-juridique ul { margin-top: 0.9rem; }
.bloc-juridique ul { padding-left: 1.2rem; }
.bloc-juridique li + li { margin-top: 0.35rem; }
.bloc-juridique a { color: var(--or-profond); }
.juridique-preambule { padding-bottom: 2.1rem; }
.juridique-preambule p { font-size: 0.98rem; line-height: 1.85; color: rgba(59, 57, 55, 0.88); }
.juridique-preambule p + p { margin-top: 0.9rem; }
/* Les textes juridiques sont JUSTIFIES (consigne cliente), sans cesure */
.juridique-corps p, .juridique-corps li, .juridique-preambule p, .juridique-intro {
  text-align: justify;
  hyphens: none;
  -webkit-hyphens: none;
}
.juridique-preambule a, .juridique-suite a { color: var(--or-profond); }
/* Le renvoi final : un encart discret, texte a gauche, pilule sobre a droite */
.juridique-suite {
  margin-top: 2.2rem;
  padding: 1.5rem 1.7rem;
  border: 1px solid rgba(156, 124, 56, 0.28);
  border-radius: 16px;
  background: rgba(156, 124, 56, 0.045);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  flex-wrap: wrap;
}
.juridique-suite p {
  font-family: var(--font-lineale);
  font-weight: 300;
  font-size: 0.9rem;
  color: rgba(59, 57, 55, 0.75);
  margin: 0;
}
.juridique-suite .btn {
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: none;
  padding: 0.55rem 1.35rem;
  border-radius: 999px;
  border-color: rgba(156, 124, 56, 0.55);
  color: var(--or-profond);
}
.juridique-suite .btn::after { content: "\2192"; margin-left: 0.55rem; }
/* Telephone et petites fenetres : le sommaire se pose en tete, en encart */
@media (max-width: 980px) {
  .juridique { padding-top: 2.2rem; }
  .juridique-scene { grid-template-columns: 1fr; gap: 2.6rem; }
  .juridique-sommaire {
    position: static;
    border-left: 0;
    border: 1px solid rgba(156, 124, 56, 0.28);
    border-radius: 16px;
    padding: 1.5rem 1.4rem 1.6rem;
    background: rgba(156, 124, 56, 0.04);
  }
}


/* Pages juridiques : surtitre signature reduit, titre affirme */
.page-hero--juridique .overline--signature { font-size: 0.62rem; }
.page-hero--juridique h1 { font-size: clamp(2.5rem, 5.6vw, 3.9rem); }
@media (max-width: 820px) {
  .page-hero--juridique .overline--signature { font-size: min(0.6rem, 2.7vw); }
  .page-hero--juridique h1 { font-size: min(2.35rem, 9.2vw); }
}


/* Pages juridiques : le sommaire ouvre la marche, les sections suivent au defilement */
.bloc-juridique.reveal, .juridique-preambule.reveal, .juridique-suite.reveal { --reveal-delay: 0.25s; }
/* Telephone : corps de texte reduit, surtitre affine, titre affirme */
@media (max-width: 820px) {
  .bloc-juridique p, .bloc-juridique li, .juridique-preambule p, .juridique-suite p { font-size: 0.86rem; }
  .juridique-intro { font-size: 0.88rem; }
  .page-hero--juridique .overline--signature { font-size: min(0.47rem, 2.15vw); }
  .page-hero--juridique h1 { font-size: min(2.85rem, 11vw); }
  .juridique-suite { margin-top: 0.5rem; padding: 1.15rem 1.2rem; }
  /* le heros des pages juridiques s'abaisse, contenu toujours centre */
  .page-hero--juridique { padding: 4.7rem 0 3.9rem; }
  .juridique { padding-bottom: 2.6rem; }
}


/* --- Pages juridiques : puces-losanges d'or, sommaire elargi, respirations ------------- */
/* Les puces rondes cedent la place a de petits losanges d'or */
.bloc-juridique ul { list-style: none; padding-left: 0.15rem; }
.bloc-juridique ul li { position: relative; padding-left: 1.2rem; }
.bloc-juridique ul li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.6em;
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: var(--or-profond);
}
.bloc-juridique li + li { margin-top: 0.5rem; }
/* Une phrase qui suit une liste respire */
.bloc-juridique ul + p, .bloc-juridique ul + ul { margin-top: 1.05rem; }
/* Le sommaire s'elargit pour tenir chaque entree sur une ligne */
@media (min-width: 981px) {
  .juridique-scene { grid-template-columns: 322px minmax(0, 1fr); gap: 3.6rem; }
}
/* L'intro du heros garde ses liens en or clair sur la nuit */
.juridique-intro a { color: var(--or-clair); }


/* Les graisses didactiques des pages juridiques : un demi-gras net, jamais lourd */
.bloc-juridique strong { font-weight: 500; color: var(--anthracite); }


/* --- Menu mobile V2 : l'ecrin de la maison ---------------------------------------------- */
/* Panneau plein ecran en vert nuit, monogramme en filigrane, entrees editoriales en
   garalde numerotees d'or, cascade feutree a l'ouverture. Le bureau est intouche. */
.nav-pied { display: none; }
@media (max-width: 1024px) {
  .site-nav {
    position: fixed;
    top: 78px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    background:
      radial-gradient(46rem 30rem at 85% 108%, rgba(198, 164, 101, 0.14), transparent 62%),
      linear-gradient(180deg, rgba(7, 14, 10, 0.55) 0%, rgba(7, 14, 10, 0) 40%),
      linear-gradient(158deg, var(--vert-nuit) 0%, #273730 55%, #1B2721 100%);
  }
  .site-nav::before {
    content: "";
    position: fixed;
    right: -14vw;
    bottom: -6vh;
    width: 74vw;
    height: 74vw;
    background: url("/assets/logo/OD-monogramme-filigrane.svg") no-repeat center / contain;
    opacity: 0.5;
    pointer-events: none;
  }
  .site-nav > ul { position: relative; padding: 1.2rem 1.9rem 2.4rem; counter-reset: menu; }
  .site-nav > ul > li { border-top: 0; }
  /* pas de filets : le rythme des lignes structure seul le panneau */
  /* Les entrees : la garalde editoriale, guidee par un ordinal d'or */
  .site-nav > ul > li:not(.nav-cta):not(.nav-pied) { counter-increment: menu; }
  .site-nav > ul > li:not(.nav-cta):not(.nav-pied) > a {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.82rem 0;
    font-family: var(--font-garalde);
    font-weight: 300;
    font-size: 1.24rem;
    letter-spacing: 0.014em;
    text-transform: none;
    color: var(--ivoire);
  }
  .site-nav > ul > li:not(.nav-cta):not(.nav-pied) > a::before {
    content: counter(menu, decimal-leading-zero);
    position: static;
    width: auto;
    height: auto;
    background: none;
    transform: none;
    font-family: var(--font-lineale);
    font-weight: 400;
    font-size: 0.5rem;
    letter-spacing: 0.16em;
    color: var(--or-clair);
    opacity: 0.72;
  }
  /* Le chevron des domaines rejoint le bord droit */
  .has-sub > a::after { margin-left: auto; align-self: center; }
  /* Les matieres : bas-de-casse fluide, accorde a la garalde des entrees */
  .site-nav .submenu a {
    font-size: 0.82rem;
    font-weight: 300;
    letter-spacing: 0.025em;
    text-transform: none;
    color: rgba(251, 250, 247, 0.76);
    padding: 0.48rem 0;
  }
  .site-nav .submenu .submenu__all {
    font-family: var(--font-garalde);
    font-style: italic;
    font-size: 0.95rem;
    letter-spacing: 0.02em !important;
    text-transform: none;
    color: var(--or-clair);
  }
  .site-nav .submenu .submenu__all::after { content: "\2192"; margin-left: 0.5rem; }
  /* Le sceau d'action, puis les coordonnees en pied de panneau */
  .site-nav .nav-cta { margin-top: 1.4rem; }
  .site-nav .nav-cta a {
    background: rgba(198, 164, 101, 0.08);
  }
  .site-nav .nav-pied {
    display: none;
    /* coordonnees retirees du panneau (jugees inelegantes) */
    display-off: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.15rem;
    border-top: 0;
  }
  .site-nav .nav-pied a, .site-nav .nav-pied span {
    display: inline;
    padding: 0;
    font-family: var(--font-lineale);
    font-weight: 300;
    font-size: 0.64rem;
    letter-spacing: 0.12em;
    color: rgba(251, 250, 247, 0.62);
  }
  .site-nav .nav-pied span { color: var(--or-clair); }
  .site-nav .nav-pied a:hover, .site-nav .nav-pied a:focus-visible { color: var(--or-clair); }
  /* La cascade feutree : le panneau se voile, les lignes montent une a une */
  @keyframes menu-voile { from { opacity: 0; } to { opacity: 1; } }
  @keyframes menu-ligne {
    from { opacity: 0; transform: translate3d(0, 16px, 0); }
    to   { opacity: 1; transform: none; }
  }
  .site-nav.is-open { animation: menu-voile 0.4s ease both !important; }
  .site-nav.is-open > ul > li { animation: menu-ligne 0.65s cubic-bezier(0.22, 1, 0.36, 1) both !important; }
  .site-nav.is-open > ul > li:nth-child(1) { animation-delay: 0.05s !important; }
  .site-nav.is-open > ul > li:nth-child(2) { animation-delay: 0.12s !important; }
  .site-nav.is-open > ul > li:nth-child(3) { animation-delay: 0.19s !important; }
  .site-nav.is-open > ul > li:nth-child(4) { animation-delay: 0.26s !important; }
  .site-nav.is-open > ul > li:nth-child(5) { animation-delay: 0.36s !important; }
  .site-nav.is-open > ul > li:nth-child(6) { animation-delay: 0.44s !important; }
}


/* --- Menu mobile V3 : proportions d'ecrin, filets-lumiere, chevron assaini -------------- */
@media (max-width: 1024px) {
  /* Deux poles : les entrees respirent en haut, l'action est amarree en bas —
     l'espace entre les deux est habite par le filigrane, et l'accordeon le remplit */
  .site-nav.is-open { display: flex; flex-direction: column; }
  .site-nav > ul {
    margin: 0;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 6vh;
  }
  .site-nav .nav-cta {
    margin-top: auto;
    padding-top: 1.4rem;
    margin-bottom: max(2vh, env(safe-area-inset-bottom));
  }
  /* Le filigrane s'affirme */
  .site-nav::before {
    width: 96vw;
    height: 96vw;
    right: -22vw;
    bottom: -8vh;
    opacity: 0.62;
  }
  /* Rangs resserres : l'accordeon ouvert, la pilule reste a portee */
  .site-nav > ul > li:not(.nav-cta):not(.nav-pied) > a { padding: 0.52rem 0; }
  .site-nav .submenu a { padding: 0.24rem 0; }
  /* une seule ligne d'or sous l'entete : le panneau n'apporte plus la sienne */
  .site-nav { border-top: 0; }
  /* Les filets-lumiere : un degrade d'or qui se trace de gauche a droite a l'ouverture */
  .site-nav > ul > li { position: relative; }
  .site-nav > ul > li + li:not(.nav-cta):not(.nav-pied)::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(198, 164, 101, 0.42), rgba(198, 164, 101, 0.03) 78%);
    transform: scaleX(0);
    transform-origin: left center;
  }
  @keyframes menu-filet { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .site-nav.is-open > ul > li + li:not(.nav-cta):not(.nav-pied)::after {
    animation: menu-filet 1.1s cubic-bezier(0.33, 0, 0.2, 1) both !important;
  }
  .site-nav.is-open > ul > li:nth-child(2)::after { animation-delay: 0.3s !important; }
  .site-nav.is-open > ul > li:nth-child(3)::after { animation-delay: 0.42s !important; }
  .site-nav.is-open > ul > li:nth-child(4)::after { animation-delay: 0.54s !important; }
  /* Chevron : le focus persistant apres le tap ne doit plus le laisser pivote */
  .has-sub:hover > a::after,
  .has-sub:focus-within > a::after { transform: rotate(45deg) translate(-1.5px, -1.5px); }
  .has-sub.est-ouvert > a::after,
  .has-sub.est-ouvert:hover > a::after,
  .has-sub.est-ouvert:focus-within > a::after { transform: rotate(225deg) translate(-1px, -1px); }
}


/* --- Menu mobile V6 : pilule rapprochee, signe +/x, entete nuit, tempo feutre ----------- */
.site-header .logo-nuit { display: none; }
@media (max-width: 1024px) {
  /* La pilule rejoint le sommaire : plus jamais noyee, toujours visible accordeon ouvert */
  .site-nav > ul { padding-top: 3vh; }
  .site-nav .nav-cta {
    margin-top: 1.5rem;
    margin-bottom: 0;
    padding-top: 0;
  }
  /* Le signe d'ouverture des domaines : un chevron serti dans un cercle d'or —
     le langage des icones cerclees de la maison, qui dit « deplier » sans un mot */
  .has-sub > a::after,
  .has-sub:hover > a::after,
  .has-sub:focus-within > a::after {
    width: 26px;
    height: 26px;
    border: 1px solid rgba(198, 164, 101, 0.6);
    border-radius: 50%;
    margin-bottom: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.6 6 7.6l3-3' fill='none' stroke='%23C6A465' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
    transform: none;
  }
  .site-nav .has-sub > a::after { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease !important; }
  .has-sub.est-ouvert > a::after,
  .has-sub.est-ouvert:hover > a::after,
  .has-sub.est-ouvert:focus-within > a::after {
    border-color: var(--or-clair);
    transform: rotate(180deg);
  }
  /* Tempo feutre : tout est plus lent, la pilule arrive en dernier */
  .site-nav.is-open { animation-duration: 0.6s !important; }
  .site-nav.is-open > ul > li { animation-duration: 1s !important; }
  .site-nav.is-open > ul > li:nth-child(1) { animation-delay: 0.1s !important; }
  .site-nav.is-open > ul > li:nth-child(2) { animation-delay: 0.22s !important; }
  .site-nav.is-open > ul > li:nth-child(3) { animation-delay: 0.34s !important; }
  .site-nav.is-open > ul > li:nth-child(4) { animation-delay: 0.46s !important; }
  .site-nav.is-open > ul > li.nav-cta { animation-delay: 0.75s !important; }
  .site-nav.is-open > ul > li:nth-child(2)::after { animation-delay: 0.55s !important; animation-duration: 1.4s !important; }
  .site-nav.is-open > ul > li:nth-child(3)::after { animation-delay: 0.7s !important; animation-duration: 1.4s !important; }
  .site-nav.is-open > ul > li:nth-child(4)::after { animation-delay: 0.85s !important; animation-duration: 1.4s !important; }
  /* L'entete passe en nuit par un CALQUE d'opacite : les degrades ne s'interpolent
     pas (d'ou la saccade) — l'opacite, elle, glisse. Teinte = celle du haut du panneau
     (vert nuit sous son voile sombre), pour un seul tenant avec le menu. */
  .site-header { position: sticky; }
  .site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    bottom: -1px;
    border-bottom: 1px solid rgba(198, 164, 101, 0.55);
    background:
      linear-gradient(180deg, rgba(7, 14, 10, 0.62) 0%, rgba(7, 14, 10, 0.52) 100%),
      linear-gradient(158deg, var(--vert-nuit) 0%, #273730 55%, #1B2721 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
  }
  .site-header__inner { position: relative; z-index: 1; }
  .site-header.menu-ouvert::before { opacity: 1; }
  /* la bordure du header reste pierre en toutes circonstances : l'or n'existe que
     dans le calque de nuit, et n'apparait donc qu'avec elle, au meme rythme */
  /* Les deux monogrammes se fondent l'un dans l'autre */
  .site-header__logo { position: relative; display: inline-block; }
  .site-header__logo img { transition: opacity 0.45s ease; }
  .site-header__logo .logo-nuit {
    display: block;
    position: absolute;
    inset: 0;
    opacity: 0;
  }
  .site-header.menu-ouvert .site-header__logo img:first-child { opacity: 0; }
  .site-header.menu-ouvert .logo-nuit { opacity: 1; }
  .site-header .nav-toggle { transition: border-color 0.5s ease, color 0.5s ease; }
  .site-header.menu-ouvert .nav-toggle {
    border-color: rgba(198, 164, 101, 0.65);
    color: var(--or-clair);
  }
}


/* --- Menu mobile V9 : la fermeture fond comme l'ouverture -------------------------------- */
@media (max-width: 1024px) {
  .site-nav {
    display: flex;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease, visibility 0s linear 0.5s !important;
  }
  .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    animation: none !important;
    transition: opacity 0.5s ease, visibility 0s !important;
  }
}


/* --- Menu mobile V10 : Accueil en tete, retour au blanc naturel ------------------------- */
/* Accueil n'existe que dans l'ecrin mobile (le logo y pourvoit au bureau) */
.nav-accueil { display: none; }
@media (max-width: 1024px) {
  .nav-accueil { display: block; }
  /* cascade recalee sur cinq entrees */
  .site-nav.is-open > ul > li:nth-child(5) { animation-delay: 0.58s !important; }
  .site-nav.is-open > ul > li.nav-cta { animation-delay: 0.78s !important; }
  .site-nav.is-open > ul > li:nth-child(5)::after { animation-delay: 1s !important; animation-duration: 1.4s !important; }
  /* Fermeture legerement plus fondue que l'ouverture — mais TOUTES les pieces du
     retour partagent la meme duree et la meme courbe (un decalage entre elles
     fabriquait la lueur sur le logo) */
  .site-header::before { transition: opacity 0.68s ease; }
  .site-header.menu-ouvert::before { transition: opacity 0.45s ease; }
  .site-header__logo img { transition: opacity 0.68s ease; }
  .site-header.menu-ouvert .site-header__logo img { transition: opacity 0.45s ease; }
  .site-header .nav-toggle { transition: border-color 0.68s ease, color 0.68s ease; }
  .site-header.menu-ouvert .nav-toggle { transition: border-color 0.45s ease, color 0.45s ease; }
  .site-nav { transition: opacity 0.68s ease, visibility 0s linear 0.68s !important; }
  .site-nav.is-open { transition: opacity 0.5s ease, visibility 0s !important; }
  /* Sur telephone, l'entete est un blanc PLEIN — aucune transparence */
  .site-header { background: rgb(251, 250, 247); }
}


/* --- Menu deroulant des domaines (bureau) : l'ecrin de la maison ------------------------ */
/* La modernite du menu mobile, transposee au panneau de survol : filigrane, cascade,
   ordinaux d'or, filets-lumiere. Le survol signature (trait qui s'etire, glissement)
   est conserve tel quel. Rien ne s'applique sous 901px. */
@media (min-width: 1025px) {
  .submenu {
    min-width: 400px;
    border-radius: 18px;
    border: 1px solid rgba(198, 164, 101, 0.3);
    border-top: 1px solid rgba(198, 164, 101, 0.6);
    padding: 1.1rem 0 0.7rem;
    transform: translateX(-50%) translateY(14px);
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.45s;
    background:
      linear-gradient(180deg, rgba(7, 14, 10, 0.5) 0%, rgba(7, 14, 10, 0) 60%),
      radial-gradient(24rem 15rem at 92% 112%, rgba(198, 164, 101, 0.17), transparent 62%),
      linear-gradient(158deg, var(--vert-nuit) 0%, #273730 60%, #1B2721 100%);
  }
  .has-sub:hover .submenu, .has-sub:focus-within .submenu { transform: translateX(-50%) translateY(0); }
  /* Les matieres entrent en cascade feutree */
  @keyframes sousmenu-ligne {
    from { opacity: 0; transform: translate3d(0, 9px, 0); }
    to   { opacity: 1; transform: none; }
  }
  .has-sub:hover .submenu li, .has-sub:focus-within .submenu li {
    animation: sousmenu-ligne 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .has-sub:hover .submenu li:nth-child(1), .has-sub:focus-within .submenu li:nth-child(1) { animation-delay: 0.06s; }
  .has-sub:hover .submenu li:nth-child(2), .has-sub:focus-within .submenu li:nth-child(2) { animation-delay: 0.11s; }
  .has-sub:hover .submenu li:nth-child(3), .has-sub:focus-within .submenu li:nth-child(3) { animation-delay: 0.16s; }
  .has-sub:hover .submenu li:nth-child(4), .has-sub:focus-within .submenu li:nth-child(4) { animation-delay: 0.21s; }
  .has-sub:hover .submenu li:nth-child(5), .has-sub:focus-within .submenu li:nth-child(5) { animation-delay: 0.26s; }
  .has-sub:hover .submenu li:nth-child(6), .has-sub:focus-within .submenu li:nth-child(6) { animation-delay: 0.31s; }
  .has-sub:hover .submenu li:nth-child(7), .has-sub:focus-within .submenu li:nth-child(7) { animation-delay: 0.4s; }
  /* Typographie des matieres : bas-de-casse leger, la langue de l'ecrin mobile */
  .submenu a {
    font-size: 0.88rem;
    font-weight: 300;
    text-transform: none;
    letter-spacing: 0.03em;
    padding: 0.8rem 1.7rem;
  }
  /* Filets-lumiere entre les matieres (degrade d'or qui s'estompe vers la droite) */
  .submenu li + li a { border-top: 0; }
  .submenu li + li {
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, rgba(198, 164, 101, 0.26), rgba(198, 164, 101, 0.02) 78%) 1;
  }
  /* Les ordinaux d'or en marge droite — l'echo du menu mobile */
  .submenu { counter-reset: matiere; }
  .submenu li:not(:last-child) { counter-increment: matiere; }
  .submenu li:not(:last-child) a::after {
    content: counter(matiere, decimal-leading-zero);
    margin-left: auto;
    padding-left: 1.4rem;
    font-size: 0.52rem;
    letter-spacing: 0.14em;
    color: var(--or-clair);
    opacity: 0.45;
    transition: opacity 0.3s ease;
  }
  .submenu li:not(:last-child) a:hover::after,
  .submenu li:not(:last-child) a:focus-visible::after { opacity: 1; color: #EAD397; }
  /* La signature : Tous les domaines, en italique de garalde, fleche au bout */
  .submenu .submenu__all {
    font-family: var(--font-garalde);
    font-style: italic;
    text-transform: none;
    font-size: 0.98rem;
    letter-spacing: 0.02em;
    border-top: 1px solid rgba(198, 164, 101, 0.4) !important;
    padding-bottom: 0.675rem;
  }
  .submenu .submenu__all::after { content: "\2192"; margin-left: 0.55rem; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }

  .submenu .submenu__all:hover::after { transform: translateX(5px); }
}


/* --- Cookies : sur telephone, un encart bas discret --------------------------------------- */
.cookies__politique { display: none; }
.cookies__bref { display: none; }
@media (max-width: 600px) {
  .cookies {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
    border-radius: 18px;
    padding: 1.1rem 1.15rem 1.05rem;
  }
  /* l'essentiel seulement : une ligne breve, trois gestes */
  .cookies__logo { display: block; width: 25px; height: auto; }
  .cookies__texte { display: none; }
  .cookies__liens { display: none; }
  .cookies__filet { margin: 0.45rem 0 0.6rem; }
  .cookies__titre { display: none; }

  .cookies__bref {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.015em;
    line-height: 1.6;
    color: rgba(251, 250, 247, 0.8);
    margin: 0 0 1.05rem;
    text-align: justify;
    hyphens: none;
    -webkit-hyphens: none;
  }
  .cookies__bref a {
    color: var(--or-clair);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(198, 164, 101, 0.55);
  }
  /* pilules et renvois : une rangee de gestes, un pied centre */
  .cookies__actions { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.55rem 1.2rem; }
  .cookies__actions .btn {
    flex: 1 1 120px;
    width: auto;
    min-width: 0;
    font-size: 0.52rem;
    letter-spacing: 0.15em;
    padding: 0.44rem 0.4rem;
    border-radius: 999px;
  }
  /* « Voir les preferences » : la troisieme pilule, fantome — la plus discrete de la fratrie */
  .cookies__actions [data-prefs] {
    flex: 1 1 100%;
    width: auto;
    background: none;
    border: 1px solid rgba(251, 250, 247, 0.2);
    border-radius: 999px;
    padding: 0.42rem 0.4rem;
    font-family: var(--font-lineale);
    font-weight: 300;
    font-size: 0.52rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: center;
    color: rgba(251, 250, 247, 0.68);
    text-decoration: none;
    transition: border-color 0.35s ease, color 0.35s ease;
  }
  .cookies__actions [data-prefs]:hover,
  .cookies__actions [data-prefs]:focus-visible {
    border-color: rgba(198, 164, 101, 0.6);
    color: var(--or-clair);
  }
  /* Accepter : l'or en voile, plus chic que l'aplat */
  .cookies__actions .btn--plein {
    background: rgba(198, 164, 101, 0.32);
    border-color: rgba(198, 164, 101, 0.55);
    color: var(--ivoire);
  }
  .cookies__actions .btn--plein:hover,
  .cookies__actions .btn--plein:focus-visible {
    background: rgba(198, 164, 101, 0.5);
    border-color: var(--or-clair);
    color: var(--ivoire);
  }
  /* la tete : le monogramme a gauche, la croix fine a l'extremite droite */
  .cookies__tete { grid-template-columns: 1fr 14px; margin-bottom: 0.85rem; }
  .cookies__croix {
    position: relative;
    width: 14px;
    height: 14px;
    justify-self: end;
    align-self: center;
  }
  .cookies__croix::before, .cookies__croix::after { width: 12px; }
  /* les preferences depliees restent completes */
  .cookies.montre-prefs .cookies__prefs { margin-top: 0.5rem; }
}


/* --- Cookies : la banniere bureau adopte l'ecrin epure du mobile ------------------------- */
/* Memes codes a toutes tailles : monogramme + croix fine, phrase breve justifiee et son
   « En savoir plus », pilules en rang, fantome pleine largeur, or en voile. Seul le
   format change : carte 420px en bas a gauche au bureau, pleine largeur au telephone. */
.cookies { padding: 1.2rem 1.3rem 1.15rem; }
.cookies__tete { grid-template-columns: 1fr 14px; margin-bottom: 0.9rem; }
.cookies__logo { display: block; width: 26px; height: auto; }
.cookies__titre { display: none; }
.cookies__texte { display: none; }
.cookies__liens { display: none; }
.cookies__bref {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.015em;
  line-height: 1.65;
  color: rgba(251, 250, 247, 0.8);
  margin: 0 0 1.05rem;
  text-align: justify;
  hyphens: none;
  -webkit-hyphens: none;
}
.cookies__bref a {
  color: var(--or-clair);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(198, 164, 101, 0.55);
}
.cookies__croix { width: 14px; height: 14px; justify-self: end; align-self: center; }
.cookies__croix::before, .cookies__croix::after { width: 12px; }
.cookies__actions { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.55rem 1.2rem; margin-bottom: 0; }
.cookies__actions .btn {
  flex: 1 1 120px;
  width: auto;
  min-width: 0;
  font-size: 0.54rem;
  letter-spacing: 0.15em;
  padding: 0.46rem 0.4rem;
  border-radius: 999px;
  text-align: center;
}
.cookies__actions [data-prefs] {
  flex: 1 1 100%;
  background: none;
  border: 1px solid rgba(251, 250, 247, 0.2);
  border-radius: 999px;
  padding: 0.44rem 0.4rem;
  font-family: var(--font-lineale);
  font-weight: 300;
  font-size: 0.54rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(251, 250, 247, 0.68);
  transition: border-color 0.35s ease, color 0.35s ease;
}
.cookies__actions [data-prefs]:hover,
.cookies__actions [data-prefs]:focus-visible {
  border-color: rgba(198, 164, 101, 0.6);
  color: var(--or-clair);
}
.cookies__actions .btn--plein {
  background: rgba(198, 164, 101, 0.32);
  border-color: rgba(198, 164, 101, 0.55);
  color: var(--ivoire);
}
.cookies__actions .btn--plein:hover,
.cookies__actions .btn--plein:focus-visible {
  background: rgba(198, 164, 101, 0.5);
  border-color: var(--or-clair);
  color: var(--ivoire);
}
.cookies.montre-prefs .cookies__prefs { margin-top: 0.6rem; }


/* --- Cartes des domaines (accueil + page domaines) : fondu plus ample et plus doux ------ */
/* Le depart etait trop vif (courbe chargee en tete) : demarrage feutre, duree allongee. */
@media (min-width: 821px) {
  .section-domaines .cards--3 .card--domaine.reveal,
  body:has(.page-hero--domaines) .section-domaines .cards--3 .card--domaine.reveal {
    transition-duration: 2.2s;
    transition-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
  }
  /* le pas de la cascade s'elargit pour rester lisible sous le fondu doux */
  .section-domaines .cards--3 > .card--domaine:nth-child(1) { --reveal-delay: 0.35s !important; }
  .section-domaines .cards--3 > .card--domaine:nth-child(2) { --reveal-delay: 0.75s !important; }
  .section-domaines .cards--3 > .card--domaine:nth-child(3) { --reveal-delay: 1.15s !important; }
}


/* --- Accueil : le portrait adopte l'effet et le tempo exacts du cabinet ------------------ */
section[aria-labelledby="titre-presentation"] .reveal--fade {
  transition-duration: 2.6s;
  will-change: opacity;
}


/* Cesure reservee au bureau (miroir du saut-mobile) */
.saut-bureau { display: none; }
@media (min-width: 821px) { .saut-bureau { display: inline; } }


/* Telephone : la citation du savoir-etre s'elargit encore (le style inline exige l'important) */
@media (max-width: 820px) {
  [aria-labelledby="titre-savoir-etre"] .container--narrow.reveal { width: calc(100% - 1rem) !important; }
}


/* --- Contact mobile : respirations resserrees, ordinateur recentre ---------------------- */
@media (max-width: 820px) {
  /* 1. moins d'air entre le heros et « A votre convenance » */
  body:has(.page-hero--contact) .section-publics { padding-top: 2.8rem; }
  /* 2. moins d'air entre les cartes et l'image */
  body:has(.page-hero--contact) .section-publics { padding-bottom: 3rem; }
  /* 3. l'image glisse legerement a gauche (curseur en % : invariant selon l'ecran) */
  body:has(.page-hero--contact) .echange-visuel img { transform: translateX(-3.5%); }
  /* 4. moins d'air au-dessus de « Nous trouver » */
  body:has(.page-hero--contact) .section-ecrire { padding-top: 2.5rem; }
  /* 5. l'anthracite sous le formulaire s'abrege un peu */
  body:has(.page-hero--contact) .section-ecrire { padding-bottom: 4rem; }
}


/* --- Contact mobile : case a cocher lisible, anthracite resserre, tirets plus prompts --- */
@media (max-width: 820px) {
  /* case a cocher du consentement agrandie */
  body:has(.page-hero--contact) .capsules-consent input[type="checkbox"] {
    width: 1.18rem;
    height: 1.18rem;
    margin-top: 0.19rem;
  }
  /* l'anthracite entre « Planifier un echange » et « Nous trouver » fond largement */
  body:has(.page-hero--contact) .echange-gestes { padding-bottom: 1.4rem; }
  body:has(.page-hero--contact) .section-ecrire { padding-top: 1.8rem; }
  /* les tirets signature partent un peu plus tot */
  .echange-gestes.reveal.is-visible .overline--signature {
    animation: deploiement-or 2.6s cubic-bezier(0.25, 0.6, 0.3, 1) 0.55s both;
  }
  .ecrire-infos.reveal.is-visible .overline--signature,
  .ecrire-formulaire.reveal.is-visible .overline--signature {
    animation: deploiement-or 2.6s cubic-bezier(0.25, 0.6, 0.3, 1) 0.3s both;
  }
}


/* La case du consentement : un petit champ de la meme etoffe que les capsules —
   liseré or fin, fond nuit, coche ivoire, halo au focus (case native redessinee) */
.capsules-consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  border: 1px solid rgba(198, 164, 101, 0.28);
  border-radius: 5px;
  background: rgba(251, 250, 247, 0.045);
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.capsules-consent input[type="checkbox"]:checked {
  border-color: var(--or-clair);
  background-color: rgba(198, 164, 101, 0.38);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.4 5 8.8l4.4-5.4' fill='none' stroke='%23FBFAF7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 74% 74%;
  background-position: center;
  background-repeat: no-repeat;
}
.capsules-consent input[type="checkbox"]:focus-visible {
  outline: none;
  border-color: var(--or-clair);
  box-shadow: 0 0 0 4px rgba(198, 164, 101, 0.14);
}

/* --- Héros expertise (droit public…) : le fronton de la page contact, un seul geste ------ */
.page-hero--expertise .contact-actions .btn {
  border-radius: 999px;
  color: var(--or-clair);
  border-color: var(--or-clair);
}
.page-hero--expertise .contact-actions .btn:hover,
.page-hero--expertise .contact-actions .btn:focus-visible { background: rgba(198, 164, 101, 0.08); }
@media (min-width: 821px) {
  .page-hero--expertise .page-hero__lede { max-width: 56em; }
}
@media (max-width: 820px) {
  .page-hero--expertise .sceau-maison { margin-top: 38px; }
  .page-hero--expertise h1 { font-size: min(2.3rem, 9.6vw); }
  .page-hero--expertise .page-hero__lede { font-size: min(0.9rem, 3.85vw); }
}

/* --- Droit public : le diptyque — le dos de nuit, l'éditorial, les trois temps ----------- */
.section-diptyque { padding: 4.6rem 0 5.8rem; }
.diptyque {
  position: relative;
  display: grid;
  grid-template-columns: 42fr 58fr;
  max-width: none;
  margin-inline: auto;
  background: var(--ivoire);
  border: 1px solid rgba(156, 124, 56, 0.26);
  box-shadow: 0 30px 62px -42px rgba(15, 25, 20, 0.42);
}
/* Le dos du livre : la tranche de nuit à fil d'or, cousue sur toute la hauteur */
.diptyque::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 13px;
  z-index: 1;
  background:
    linear-gradient(90deg, transparent calc(100% - 4px), rgba(198, 164, 101, 0.75) calc(100% - 4px), rgba(198, 164, 101, 0.75) calc(100% - 3px), transparent calc(100% - 3px)),
    linear-gradient(168deg, #2E4038 0%, var(--vert-nuit) 55%, #16211B 100%);
  transform: scaleY(0);
  transform-origin: center top;
}
.diptyque.is-visible::before { transform: scaleY(1); transition: transform 1.5s cubic-bezier(0.33, 0, 0.2, 1) 0.3s; }
/* Le second cadre, décalé, vient sertir le diptyque en dernier */
.diptyque::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(156, 124, 56, 0.45);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: transform 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) 3.4s, opacity 1.5s ease 3.4s;
}
.diptyque.is-visible::after { opacity: 1; transform: translate3d(10px, 10px, 0); }
/* Le volet gauche : l'éditorial — titre à gauche, définition en exergue à filet d'or */
.diptyque-nuit {
  position: relative;
  padding: 3.5rem 2.7rem 3.2rem 3.4rem;
}
.diptyque-nuit h2 {
  font-size: clamp(1.7rem, 2.2vw, 2.3rem);
  line-height: 1.18;
  margin: 0.9rem 0 0;
}
.diptyque-nuit h2 em { color: var(--or-profond); position: relative; isolation: isolate; }
.diptyque-nuit h2 em::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14rem;
  height: 7rem;
  background: radial-gradient(closest-side, rgba(198, 164, 101, 0.14), rgba(198, 164, 101, 0.05) 55%, transparent 100%);
  z-index: -1;
  pointer-events: none;
}
/* La définition : l'exergue au filet d'or, qui s'écrit dans un souffle */
.diptyque-definition {
  position: relative;
  z-index: 1;
  font-family: var(--font-garalde);
  font-style: italic;
  font-weight: 300;
  font-size: 1.24rem;
  line-height: 1.72;
  color: var(--anthracite);
  text-align: justify;
  margin: 2.1rem 0 0;
}
/* Le volet de jour : les trois temps, pastilles d'or, filets séparateurs */
.diptyque-jour {
  padding: 3rem 3.2rem 2.9rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
}
.diptyque-temp { position: relative; }
.diptyque-temp + .diptyque-temp { padding-top: 1.9rem; }
.diptyque-tete { display: flex; align-items: center; gap: 0.95rem; }
.diptyque-filet {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(156, 124, 56, 0.55), rgba(156, 124, 56, 0.06));
  transform: scaleX(0);
  transform-origin: left center;
  display: none;
}
.diptyque-temp + .diptyque-temp .diptyque-filet { display: block; }
.diptyque-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(156, 124, 56, 0.45);
  border-radius: 999px;
  padding: 0.3rem 0.78rem;
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--or-profond);
  background: rgba(198, 164, 101, 0.06);
}
.diptyque-tete h3 {
  font-family: var(--font-garalde);
  font-weight: 500;
  font-size: 1.28rem;
  line-height: 1.25;
  margin: 0;
}
.diptyque-temp > p {
  font-size: 0.92rem;
  line-height: 1.8;
  text-align: justify;
  margin: 0.8rem 0 0;
}
.diptyque-temp > p strong { font-weight: 500; color: var(--or-profond); }
/* États cachés communs */
.diptyque-nuit .overline--signature,
.diptyque-nuit h2,
.diptyque-definition,
.diptyque-tete,
.diptyque-temp > p {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}
/* Composition invariante (cqi) */
@media (min-width: 901px) {
  .diptyque { container-type: inline-size; }
}
/* Bureau : la chorégraphie entière est menée par l'arrivée du diptyque */
@media (min-width: 901px) {
  .diptyque.is-visible .diptyque-nuit .overline--signature {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 1.4s cubic-bezier(0.33, 0, 0.2, 1) 0.5s, transform 1.4s cubic-bezier(0.33, 0, 0.2, 1) 0.5s;
  }
  .diptyque.is-visible .diptyque-nuit h2,
  .diptyque.is-visible .diptyque-definition {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 1.1s cubic-bezier(0.33, 0, 0.2, 1) 0.65s, transform 1.1s cubic-bezier(0.33, 0, 0.2, 1) 0.65s;
  }
  .diptyque.is-visible .diptyque-temp:nth-child(2) .diptyque-filet { transform: scaleX(1); transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.6s; }
  .diptyque.is-visible .diptyque-temp:nth-child(3) .diptyque-filet { transform: scaleX(1); transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 2.1s; }
  .diptyque.is-visible .diptyque-temp .diptyque-tete,
  .diptyque.is-visible .diptyque-temp > p { opacity: 1; transform: translate3d(0, 0, 0); }
  .diptyque.is-visible .diptyque-temp:nth-child(1) .diptyque-tete,
  .diptyque.is-visible .diptyque-temp:nth-child(1) > p { transition: opacity 0.9s cubic-bezier(0.33, 0, 0.2, 1) 1.3s, transform 0.9s cubic-bezier(0.33, 0, 0.2, 1) 1.3s; }
  .diptyque.is-visible .diptyque-temp:nth-child(2) .diptyque-tete,
  .diptyque.is-visible .diptyque-temp:nth-child(2) > p { transition: opacity 0.9s cubic-bezier(0.33, 0, 0.2, 1) 1.8s, transform 0.9s cubic-bezier(0.33, 0, 0.2, 1) 1.8s; }
  .diptyque.is-visible .diptyque-temp:nth-child(3) .diptyque-tete,
  .diptyque.is-visible .diptyque-temp:nth-child(3) > p { transition: opacity 0.9s cubic-bezier(0.33, 0, 0.2, 1) 2.3s, transform 0.9s cubic-bezier(0.33, 0, 0.2, 1) 2.3s; }
}
/* Téléphone : chaque bloc paraît à son entrée dans l'écran */
@media (max-width: 900px) {
  .section-diptyque { padding: 2rem 0 3.6rem; }
  /* Téléphone : la carte s'efface, le marque-page de nuit signe l'ouverture */
  .diptyque {
    grid-template-columns: 1fr;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  .diptyque::after { content: none; }
  .diptyque::before { display: none; }
  /* L'ouverture en exergue : surtitre, titre et définition centrés */
  .diptyque-nuit { padding: 1.1rem 0.15rem 0; text-align: center; }
  .diptyque-nuit .overline--signature { justify-content: center; }
  .diptyque-nuit h2 { font-size: min(1.78rem, 7.4vw); }
  .diptyque-definition { font-size: min(1.12rem, 4.72vw); margin-top: 1.5rem; text-align: center; }
  .diptyque-jour { padding: 2.2rem 0.15rem 0.4rem; gap: 1.15rem; }
  /* Les trois temps en cartes de pierre, chacune cousue de la tranche de nuit à fil d'or */
  .diptyque-temp {
    background: linear-gradient(168deg, #FFFFFF 0%, #FCFBF8 62%, var(--ivoire) 100%);
    border: 1px solid rgba(156, 124, 56, 0.3);
    border-radius: 12px;
    padding: 1.35rem 1.15rem 1.3rem 1.6rem;
    overflow: hidden;
  }
  .diptyque-temp + .diptyque-temp { padding-top: 1.35rem; }
  .diptyque-temp::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
    background: linear-gradient(168deg, #2E4038 0%, var(--vert-nuit) 55%, #16211B 100%);
    transform: scaleY(0);
    transform-origin: center top;
  }
  .diptyque-temp.is-visible::before { transform: scaleY(1); transition: transform 1.25s cubic-bezier(0.33, 0, 0.2, 1) 0.15s; }
  .diptyque-filet { display: none !important; }
  .diptyque-tete h3 { font-size: min(1.3rem, 5.7vw); }
  .diptyque-temp > p { font-size: min(0.85rem, 3.68vw); }
  .diptyque-nuit.is-visible .overline--signature { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity 1.5s cubic-bezier(0.25, 0.1, 0.2, 1) 0.1s, transform 1.5s cubic-bezier(0.25, 0.1, 0.2, 1) 0.1s; }
  .diptyque-nuit.is-visible h2,
  .diptyque-nuit.is-visible .diptyque-definition { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity 1.6s cubic-bezier(0.25, 0.1, 0.2, 1) 0.35s, transform 1.6s cubic-bezier(0.25, 0.1, 0.2, 1) 0.35s; }
  .diptyque-temp.is-visible .diptyque-filet { transform: scaleX(1); transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.1s; }
  .diptyque-temp.is-visible .diptyque-tete { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity 1.5s cubic-bezier(0.25, 0.1, 0.2, 1) 0.35s, transform 1.5s cubic-bezier(0.25, 0.1, 0.2, 1) 0.35s; }
  .diptyque-temp.is-visible > p { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity 1.5s cubic-bezier(0.25, 0.1, 0.2, 1) 0.5s, transform 1.5s cubic-bezier(0.25, 0.1, 0.2, 1) 0.5s; }
  .diptyque-nuit .overline--signature, .diptyque-nuit h2, .diptyque-definition,
  .diptyque-tete, .diptyque-temp > p { will-change: transform, opacity; }
}
@media (prefers-reduced-motion: reduce) {
  .diptyque-nuit .overline--signature,
  .diptyque-nuit h2,
  .diptyque-definition,
  .diptyque-tete,
  .diptyque-temp > p { opacity: 1; transform: none; }
  .diptyque::before { transform: none; }
  .diptyque-filet { transform: scaleX(1); }
  .diptyque::after { opacity: 1; transform: translate3d(10px, 10px, 0); }
}

/* --- Droit public : les actes scellés — six cartes ivoire serties, sceau de nuit --------- */
.section-actes { padding-top: 3.4rem; }
/* Ordinateur : le titre des six domaines respire sur une seule ligne */
@media (min-width: 901px) {
  .section-actes .section-head { max-width: none; }
}
.section-actes .section-head h2 em { color: var(--or-profond); }
.actes-lede {
  font-size: 0.98rem;
  line-height: 1.85;
  max-width: 46em;
  margin: 1.8rem auto 0;
}
.section-actes .section-head p.actes-lede { margin-top: 1.8rem; }
.actes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.6rem;
  max-width: 76rem;
  margin: 3.8rem auto 0;
}
.actes > .reveal { display: flex; }
.acte {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ivoire);
  border: 1px solid rgba(156, 124, 56, 0.26);
  padding: 2.3rem 2.3rem 2.2rem;
  box-shadow: 0 24px 48px -34px rgba(15, 25, 20, 0.32);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (min-width: 901px) {
  .acte:hover {
    transform: translateY(-4px);
    border-color: var(--or-profond);
    box-shadow: 0 20px 40px -24px rgba(15, 25, 20, 0.28);
  }
}
/* Le cadre intérieur se détache à l'arrivée — le langage de l'écrin */
.acte::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(156, 124, 56, 0.45);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: transform 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.7s, opacity 1.4s ease 0.7s;
}
.reveal.is-visible .acte::before {
  opacity: 1;
  transform: translate3d(8px, 8px, 0);
}
.acte > * { position: relative; z-index: 1; }
/* Le sceau de nuit au coin de l'acte — l'écho de la pierre angulaire */
.acte-sceau {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 3.7rem;
  height: 3.7rem;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(198, 164, 101, 0.16), transparent 55%),
    linear-gradient(215deg, #2E4038 0%, var(--vert-nuit) 55%, #16211B 100%);
  border-bottom-left-radius: 100% 100%;
  opacity: 0;
  transform: scale(0.35);
  transform-origin: top right;
}
.reveal.is-visible .acte-sceau {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.7s ease 0.45s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
}
.acte-num {
  position: absolute;
  top: 0.82rem;
  right: 0.5rem;
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  background: linear-gradient(105deg, #C6A465 0%, #EAD397 55%, #C6A465 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.acte-matiere {
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--or-profond);
  margin: 0;
  max-width: calc(100% - 3.4rem);
}
.acte h3 {
  font-family: var(--font-garalde);
  font-weight: 500;
  font-size: 1.48rem;
  line-height: 1.3;
  margin: 0.8rem 0 0;
  max-width: calc(100% - 2.4rem);
  transition: color 0.45s ease;
}
@media (hover: hover) {
  .acte:hover h3 { color: var(--or-profond); }
}
.acte h3 + p {
  font-size: 0.9rem;
  line-height: 1.85;
  text-align: justify;
  margin: 1.25rem 0 1.4rem;
}
.acte strong { font-weight: 500; color: var(--or-profond); }
.acte-lien {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  align-self: flex-start;
  margin-top: auto;
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--or-profond);
  border: 1px solid rgba(156, 124, 56, 0.5);
  border-radius: 999px;
  padding: 0.52rem 1.15rem 0.48rem;
  background: transparent;
  transition: border-color 0.4s ease, background-color 0.4s ease, color 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.acte-lien::before {
  content: "\2192";
  order: 2;
  font-size: 0.72rem;
  line-height: 1;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.acte-lien:hover,
.acte-lien:focus-visible { text-decoration: none; transform: translateY(-2px); }
.acte-lien:hover::before,
.acte-lien:focus-visible::before { transform: translateX(3px); }
.acte-lien:hover,
.acte-lien:focus-visible { border-color: var(--or-profond); background: rgba(198, 164, 101, 0.1); }
/* Le reflet doré traversant, comme sur tous les boutons de la maison */
.acte-lien { position: relative; overflow: hidden; }
.acte-lien::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -85%;
  width: 55%;
  background: linear-gradient(100deg, transparent, rgba(198, 164, 101, 0.3), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}
.acte-lien:hover::after,
.acte-lien:focus-visible::after { left: 130%; }
/* La colonne droite répond à la gauche avec un souffle de retard */
.actes > .reveal:nth-child(2n) { --reveal-delay: 0.22s; }
/* Composition invariante : les corps suivent la largeur réelle du texte des actes (cqi) */
@media (min-width: 901px) {
  .actes { container-type: inline-size; }
}
@media (max-width: 900px) {
  .section-actes { padding-top: 2.4rem; }
  /* Téléphone : le titre des six domaines gagne un souffle de corps */
  .section-actes .section-head h2 { font-size: min(1.95rem, 7.9vw); }
  .actes { grid-template-columns: 1fr; gap: 1.8rem; margin-top: 2.8rem; }
  .actes-lede { font-size: min(0.93rem, 4vw); text-align: center; }
  .acte { padding: 1.8rem 1.3rem 1.7rem; }
  .reveal.is-visible .acte::before { transform: translate3d(6px, 6px, 0); }
  .acte-sceau { width: 3.2rem; height: 3.2rem; }
  .acte-num { top: 0.68rem; right: 0.38rem; }
  .acte h3 { font-size: min(1.34rem, 5.8vw); }
  .acte h3 + p { font-size: min(0.89rem, 3.85vw); }
  .actes > .reveal:nth-child(2n) { --reveal-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .acte::before { opacity: 1; transform: translate3d(8px, 8px, 0); }
  .acte-sceau { opacity: 1; transform: scale(1); }
}

/* --- Pages d'atterrissage droit public : la fiche d'expertise ----------------------------- */
.atterrissage { padding: 4.4rem 0 5.2rem; }
.atterrissage-cadre { max-width: 52em; margin-inline: auto; }
.atterrissage-bloc + .atterrissage-bloc { margin-top: 3rem; }
.atterrissage-bloc h2 {
  font-family: var(--font-garalde);
  font-weight: 500;
  font-size: 1.65rem;
  line-height: 1.25;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(156, 124, 56, 0.35);
}
.atterrissage-bloc p {
  font-size: 0.98rem;
  line-height: 1.9;
  text-align: justify;
  margin: 1.1rem 0 0;
}
.atterrissage-bloc strong { font-weight: 500; color: var(--or-profond); }
.atterrissage-liste { list-style: none; padding: 0; margin: 1.3rem 0 0; }
.atterrissage-liste li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.98rem;
  line-height: 1.85;
  margin-top: 0.55rem;
}
.atterrissage-liste li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.72em;
  width: 5px;
  height: 5px;
  background: linear-gradient(135deg, #EAD397 0%, #C6A465 45%, #8F6F2E 100%);
  transform: rotate(45deg);
}
.atterrissage-question { margin-top: 1.6rem; }
.atterrissage-question h3 {
  font-family: var(--font-garalde);
  font-weight: 500;
  font-size: 1.18rem;
  margin: 0;
}
.atterrissage-question p { margin-top: 0.6rem; }
.atterrissage-retour {
  margin-top: 3rem;
  font-size: 0.95rem;
  line-height: 1.85;
}
.atterrissage-retour a { color: var(--or-profond); text-decoration: none; border-bottom: 1px solid rgba(156, 124, 56, 0.4); transition: border-color 0.4s ease; }
.atterrissage-retour a:hover { border-color: rgba(156, 124, 56, 0.9); }
@media (max-width: 900px) {
  .atterrissage { padding: 3rem 0 3.6rem; }
  .atterrissage-bloc + .atterrissage-bloc { margin-top: 2.3rem; }
  .atterrissage-bloc h2 { font-size: min(1.42rem, 6.2vw); }
  .atterrissage-bloc p, .atterrissage-liste li { font-size: min(0.95rem, 4.05vw); }
}

/* --- Les outils du cabinet : simulateurs de délais ---------------------------------------- */
.simulateur { padding: 4.2rem 0 1rem; }
.simulateur-carte {
  position: relative;
  max-width: 44rem;
  margin-inline: auto;
  background: var(--ivoire);
  border: 1px solid rgba(156, 124, 56, 0.3);
  box-shadow: 0 26px 52px -36px rgba(15, 25, 20, 0.35);
  padding: 2.6rem 2.6rem 2.5rem;
}
.simulateur-carte::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(156, 124, 56, 0.45);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: transform 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.6s, opacity 1.4s ease 0.6s;
}
.simulateur-carte.is-visible::before { opacity: 1; transform: translate3d(9px, 9px, 0); }
.simulateur-carte > * { position: relative; z-index: 1; }
.simulateur-carte .overline--signature { margin-bottom: 0.9rem; }
.simulateur-titre {
  font-family: var(--font-garalde);
  font-weight: 500;
  font-size: 1.45rem;
  margin: 0;
}
.simulateur-champs { margin-top: 1.6rem; }
.simulateur-champ label {
  display: block;
  font-family: var(--font-lineale);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or-profond);
}
.simulateur-champ input[type="date"] {
  display: block;
  width: 100%;
  max-width: 18rem;
  margin-top: 0.7rem;
  padding: 0.65rem 0.2rem;
  font-family: var(--font-lineale);
  font-size: 1rem;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(156, 124, 56, 0.45);
  border-radius: 0;
}
.simulateur-champ input[type="date"]:focus { outline: none; border-bottom-color: var(--or-profond); }
.simulateur-bouton { margin-top: 1.8rem; border-radius: 999px; }
.simulateur-resultat {
  margin-top: 2rem;
  padding: 1.8rem 1.9rem 1.9rem;
  border-radius: 16px;
  background: linear-gradient(158deg, var(--vert-nuit) 0%, #273730 60%, #1B2721 100%);
  border: 1px solid rgba(198, 164, 101, 0.32);
}
.simulateur-resultat-intro {
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(251, 250, 247, 0.85);
  margin: 0;
}
.simulateur-resultat-intro + .simulateur-resultat-intro { margin-top: 1.1rem; }
.simulateur-resultat-date {
  font-family: var(--font-garalde);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--or-clair);
  margin: 0.35rem 0 0;
}
.simulateur-resultat-note {
  font-size: 0.8rem;
  line-height: 1.65;
  color: rgba(251, 250, 247, 0.62);
  margin: 1rem 0 0;
}
/* La chronologie : le fil d'or se déploie entre les trois dates */
.chrono {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-top: 1.6rem;
  padding-top: 0.35rem;
}
.chrono-ligne {
  position: absolute;
  top: 0.55rem;
  left: 4%;
  right: 4%;
  height: 1px;
  background: linear-gradient(90deg, rgba(198, 164, 101, 0.25), rgba(198, 164, 101, 0.75));
  transform: scaleX(0);
  transform-origin: left center;
}
.est-la .chrono-ligne { transform: scaleX(1); transition: transform 1.4s cubic-bezier(0.33, 0, 0.2, 1) 0.2s; }
.chrono-pt { text-align: center; opacity: 0; transform: translate3d(0, 8px, 0); }
.est-la .chrono-pt { opacity: 1; transform: translate3d(0, 0, 0); }
.est-la .chrono-pt:nth-child(2) { transition: opacity 0.8s ease 0.25s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s; }
.est-la .chrono-pt:nth-child(3) { transition: opacity 0.8s ease 0.75s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.75s; }
.est-la .chrono-pt:nth-child(4) { transition: opacity 0.8s ease 1.3s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.3s; }
.chrono-los {
  display: block;
  width: 7px;
  height: 7px;
  margin: 0 auto;
  background: linear-gradient(135deg, #EAD397 0%, #C6A465 45%, #8F6F2E 100%);
  transform: rotate(45deg);
}
.chrono-pt--fin .chrono-los { width: 9px; height: 9px; box-shadow: 0 0 10px rgba(198, 164, 101, 0.55); }
.chrono-lab {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--font-lineale);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(251, 250, 247, 0.6);
}
.chrono-val {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-garalde);
  font-weight: 500;
  font-size: 0.98rem;
  color: rgba(251, 250, 247, 0.92);
}
.chrono-pt--fin .chrono-val { color: var(--or-clair); }
.simulateur-verifier {
  margin-top: 1.5rem;
  border-radius: 999px;
  color: var(--or-clair);
  border-color: rgba(198, 164, 101, 0.55);
  font-size: 0.62rem;
}
.simulateur-verifier:hover,
.simulateur-verifier:focus-visible { color: var(--or-clair); border-color: var(--or-clair); background: rgba(198, 164, 101, 0.1); }
.simulateur-avertissement strong { font-weight: 500; color: var(--or-profond); }
.contact-ecrin .capsules-consent label a {
  color: var(--or-profond);
  text-decoration: none;
  border-bottom: 1px solid rgba(156, 124, 56, 0.45);
  transition: border-color 0.4s ease;
}
.contact-ecrin .capsules-consent label a:hover,
.contact-ecrin .capsules-consent label a:focus-visible { border-color: rgba(156, 124, 56, 0.95); }
.simulateur-avertissement {
  max-width: 44rem;
  margin: 1.6rem auto 0;
  font-size: 0.8rem;
  line-height: 1.7;
  color: rgba(35, 41, 43, 0.62);
  text-align: justify;
}
@media (max-width: 900px) {
  .simulateur { padding-top: 3rem; }
  .simulateur-carte { padding: 1.9rem 1.3rem 1.8rem; }
  .simulateur-carte.is-visible::before { transform: translate3d(6px, 6px, 0); }
  .chrono-lab { font-size: 0.52rem; letter-spacing: 0.12em; }
  .chrono-val { font-size: 0.86rem; }
  .simulateur-titre { font-size: min(1.28rem, 5.6vw); }
}
/* L'encart simulateurs : la bande anthracite, la vitrine de démonstration ----------------- */
.section-outils {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(52rem 30rem at 82% 120%, rgba(198, 164, 101, 0.13), transparent 62%),
    var(--anthracite);
}
.section-outils .overline--signature { font-size: 0.62rem; }
.section-outils h2 { font-size: clamp(2.1rem, 2.7vw, 2.85rem); margin-top: 0.8rem; }
.outils-scene {
  display: grid;
  grid-template-columns: 55fr 45fr;
  align-items: center;
  gap: 3.6rem;
  max-width: 72rem;
  margin-inline: auto;
}
.outils-lede {
  max-width: 34em;
  margin: 1.3rem 0 0;
  font-size: 0.98rem;
  line-height: 1.85;
  text-align: justify;
  color: rgba(251, 250, 247, 0.82);
}
.outils-vitrine > * { position: relative; z-index: 1; }
.vitrine-fond {
  position: absolute !important;
  inset: 0;
  z-index: 0 !important;
  overflow: hidden;
  border-radius: 16px;
  pointer-events: none;
}
.vitrine-fond img {
  position: absolute;
  right: -10%;
  bottom: -15%;
  width: 48%;
  opacity: 0.06;
  user-select: none;
}
.outils-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }
.section-outils .btn { border-radius: 999px; color: var(--ivoire); border-color: rgba(251, 250, 247, 0.45); }
.section-outils .btn:hover,
.section-outils .btn:focus-visible { color: var(--or-clair); border-color: var(--or-clair); background: rgba(198, 164, 101, 0.08); }
.section-outils .btn--or { color: var(--or-clair); border-color: var(--or-clair); }
/* À la descente sur la section, la lumière traverse d'elle-même le bouton d'or */
@keyframes balayage-invite {
  from { left: -85%; }
  to { left: 130%; }
}
.section-outils .reveal.is-visible .outils-actions .btn--or::after {
  animation: balayage-invite 1.1s ease 1.25s 1;
}

@media (prefers-reduced-motion: reduce) {
  .section-outils .reveal.is-visible .outils-actions .btn--or::after { animation: none; }
}
/* La vitrine : un simulateur en démonstration, la date qui s'écrit en or */
.outils-vitrine {
  position: relative;
  border-radius: 16px;
  padding: 1.9rem 2rem 1.8rem;
  background:
    radial-gradient(24rem 14rem at 16% -10%, rgba(198, 164, 101, 0.1), transparent 60%),
    rgba(251, 250, 247, 0.05);
  border: 1px solid rgba(198, 164, 101, 0.3);
  box-shadow: 0 32px 62px -44px rgba(0, 0, 0, 0.65);
}
.outils-vitrine::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(198, 164, 101, 0.38);
  border-radius: 16px;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: transform 2s cubic-bezier(0.22, 0.61, 0.36, 1) 1.2s, opacity 1.3s ease 1.2s;
}
.reveal.is-visible .outils-vitrine::before { opacity: 1; transform: translate3d(8px, 8px, 0); }
.outils-vitrine .vitrine-etiquette {
  display: inline-flex;
  border: 1px solid rgba(198, 164, 101, 0.5);
  border-radius: 999px;
  padding: 0.28rem 0.75rem;
  font-family: var(--font-lineale);
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or-clair);
  margin: 0;
}
.outils-vitrine .vitrine-question {
  font-family: var(--font-lineale);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: rgba(251, 250, 247, 0.72);
  margin: 1.3rem 0 0;
}
.outils-vitrine .vitrine-question span { color: var(--ivoire); font-weight: 500; }
.vitrine-filet {
  display: block;
  height: 1px;
  margin: 1.1rem 0 1.2rem;
  background: linear-gradient(90deg, rgba(198, 164, 101, 0.6), rgba(198, 164, 101, 0.08));
  transform: scaleX(0);
  transform-origin: left center;
}
.reveal.is-visible .vitrine-filet { transform: scaleX(1); transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.7s; }
.outils-vitrine .vitrine-reponse {
  font-family: var(--font-lineale);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(251, 250, 247, 0.58);
  margin: 0;
}
.outils-vitrine .vitrine-date {
  font-family: var(--font-garalde);
  font-weight: 500;
  font-size: 2.05rem;
  line-height: 1.15;
  color: var(--or-clair);
  margin: 0.3rem 0 0;
  -webkit-mask-image: linear-gradient(100deg, #000 46%, rgba(0, 0, 0, 0) 62%);
  mask-image: linear-gradient(100deg, #000 46%, rgba(0, 0, 0, 0) 62%);
  -webkit-mask-size: 280% 100%;
  mask-size: 280% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}
.reveal.is-visible .vitrine-date {
  -webkit-mask-position: 0% 0;
  mask-position: 0% 0;
  transition: -webkit-mask-position 2.4s cubic-bezier(0.37, 0, 0.28, 1) 1s, mask-position 2.4s cubic-bezier(0.37, 0, 0.28, 1) 1s;
}
.outils-vitrine .vitrine-note {
  font-family: var(--font-lineale);
  font-size: 0.7rem;
  line-height: 1.6;
  text-align: justify;
  color: rgba(251, 250, 247, 0.55);
  margin: 0.9rem 0 0;
}
@media (max-width: 900px) {
  .section-outils { padding: 3.4rem 0; }
  .outils-scene { grid-template-columns: 1fr; gap: 2.2rem; }
  .outils-lede { font-size: min(0.93rem, 4vw); }
  .outils-vitrine { padding: 1.6rem 1.3rem 1.5rem; }
  .vitrine-date { font-size: min(1.7rem, 7.2vw); }
  .reveal.is-visible .outils-vitrine::before { transform: translate3d(6px, 6px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .vitrine-filet { transform: scaleX(1); }
  .vitrine-date { -webkit-mask-image: none; mask-image: none; }
  .outils-vitrine::before { opacity: 1; transform: translate3d(8px, 8px, 0); }
}

/* --- Droit public : agir sans attendre — quatre référés en cartes de pierre -------------- */
.section-urgence { padding: 5rem 0 5.6rem; }
.section-urgence .section-head--center { max-width: none; }
.section-urgence h2 em { color: var(--or-profond); font-style: italic; }
.urgence-lede {
  max-width: 46em;
  margin: 1.3rem auto 0;
  font-size: 0.98rem;
  line-height: 1.85;
}
.urgences {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.2rem;
  max-width: 66rem;
  margin: 3.2rem auto 0;
}
.urgences > .reveal { display: flex; }
.urgence {
  flex: 1;
  position: relative;
  border-radius: 14px;
  padding: 1.9rem 2rem 1.8rem;
  background: var(--pierre);
  border: 1px solid rgba(156, 124, 56, 0.3);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (min-width: 901px) {
  .urgence:hover {
    transform: translateY(-4px);
    border-color: var(--or-profond);
    box-shadow: 0 20px 40px -24px rgba(15, 25, 20, 0.28);
  }
}
.urgence-delai {
  display: inline-flex;
  border: 1px solid rgba(156, 124, 56, 0.55);
  border-radius: 999px;
  padding: 0.28rem 0.75rem;
  font-family: var(--font-lineale);
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or-profond);
  background: rgba(198, 164, 101, 0.07);
  margin: 0;
}
.urgence h3 {
  font-family: var(--font-garalde);
  font-weight: 500;
  font-size: 1.32rem;
  line-height: 1.25;
  margin: 1rem 0 0;
}
.urgence-nom {
  font-family: var(--font-lineale);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or-profond);
  margin: 0.55rem 0 0;
}
.urgence p:last-child {
  font-size: 0.9rem;
  line-height: 1.8;
  text-align: justify;
  margin: 0.85rem 0 0;
}
.urgences > .reveal:nth-child(2) { --reveal-delay: 0.2s; }
.urgences > .reveal:nth-child(3) { --reveal-delay: 0.35s; }
.urgences > .reveal:nth-child(4) { --reveal-delay: 0.5s; }
@media (max-width: 900px) {
  .section-urgence { padding: 3.4rem 0 3.8rem; }
  .urgences { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2.4rem; }
  .urgence { padding: 1.6rem 1.3rem 1.5rem; }
  /* Le corps d'avant (1.24rem dès 375px) ; sous 375px il suit la largeur utile pour garder chaque titre sur sa ligne */
  .urgence h3 { font-size: min(1.24rem, calc((100vw - 82px) * 0.0677)); }
  .urgence p:last-child { font-size: min(0.89rem, 3.85vw); }
  .urgences > .reveal:nth-child(2),
  .urgences > .reveal:nth-child(3),
  .urgences > .reveal:nth-child(4) { --reveal-delay: 0s; }
  .urgence-lede { font-size: min(0.93rem, 4vw); }
}
/* --- Les boutons « Explorer ce domaine » : la pilule des actes, à l'identique ------------ */
.card--domaine .card__link {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid rgba(156, 124, 56, 0.5);
  border-radius: 999px;
  padding: 0.52rem 1.15rem 0.48rem;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--or-profond);
  background: transparent;
  transition: border-color 0.4s ease, background-color 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.section-domaines .card--domaine .card__link,
body:has(.page-hero--domaines) .section-domaines .card--domaine .card__link { font-size: 0.6rem; }
/* La flèche passe devant (::before ordonné), le reflet prend le ::after */
.card--domaine .card__link::before {
  content: "\2192";
  position: static;
  inset: auto;
  order: 2;
  font-size: 0.72rem;
  line-height: 1;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.card--domaine .card__link::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -85%;
  width: 55%;
  margin: 0;
  background: linear-gradient(100deg, transparent, rgba(198, 164, 101, 0.3), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}
/* Le survol du bouton seul : levée, flèche, reflet — comme sur les actes */
.card--domaine .card__link:hover,
.card--domaine .card__link:focus-visible {
  text-decoration: none;
  border-color: var(--or-profond);
  background-color: rgba(198, 164, 101, 0.1);
  transform: translateY(-2px);
}
.card--domaine .card__link:hover::before,
.card--domaine .card__link:focus-visible::before { transform: translateX(3px); }
.card--domaine .card__link:hover::after,
.card--domaine .card__link:focus-visible::after { left: 130%; }
/* Les anciens gestes de la carte ne déplacent plus le reflet ni la pilule */
.card--domaine:hover .card__link::after,
.card--domaine.est-survolee .card__link::after { transform: skewX(-20deg); }

/* --- Mobile : « Le droit n'attend pas » — réflexes apaisés, poussières coupées ----------- */
@media (max-width: 900px) {
  .band-nuit .hero__dust { display: none; }
  .band-nuit .section-head.reveal {
    transform: translate3d(0, 8px, 0) !important;
    transition-duration: 1.6s;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.2, 1);
  }
  .band-nuit .section-head.reveal.is-visible { transform: translate3d(0, 0, 0) !important; }
  .band-nuit .reflexes .reveal { transform: translate3d(0, 8px, 0) !important; }
  .band-nuit .reflexes .reveal.is-visible { transform: translate3d(0, 0, 0) !important; }
}

/* --- Mobile : le survol pleine carte conservé tel quel (le geste bouton est bureau) ------ */
@media (max-width: 900px) {
  .cards--3 .card--domaine:hover {
    border-color: var(--or-profond);
    transform: translateY(-9px);
    box-shadow: 0 28px 54px rgba(42, 59, 50, 0.14);
  }
  .cards--3 .card--domaine:hover .card__picto { transform: translateY(-9px); }
  .cards--3 .card--domaine:hover::after { left: 125%; }
  .cards--3 .card--domaine:hover::before { border-color: rgba(156, 124, 56, 0.45); }
}

/* --- Mobile : les réflexes se fondent brièvement — plus de longue traîne au défilement ---- */
@media (max-width: 900px) {
  .band-nuit .reflexes .reveal {
    transition-duration: 1.9s;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.2, 1);
    will-change: opacity, transform;
  }
}

/* --- Bureau : le rail du journal respire au-dessus — la carte levée garde son cadre ------ */
@media (min-width: 821px) {
  .revue__rail { padding-top: 1rem; }
}

/* --- Mobile pour-qui : la montée légère des cartes au défilement -------------------------- */
@media (max-width: 900px) {
  .section-publics .cards--4 > .reveal {
    transform: translate3d(0, 10px, 0) !important;
    transition-duration: 1.6s;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.2, 1);
    will-change: opacity, transform;
  }
  .section-publics .cards--4 > .reveal.is-visible { transform: translate3d(0, 0, 0) !important; }
}

/* --- Mobile : espaces de la bande nuit resserrés, surtitre plus discret ------------------- */
@media (max-width: 900px) {
  .band-nuit { padding-top: 3.4rem; }
  .band-nuit .section-head .overline { font-size: 0.6rem; }
  .section-domaines { padding-bottom: 2.6rem; }
}

/* --- Le lien du pupitre devient la pilule des actes, en habit de nuit --------------------- */
.pupitre__lien {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  position: relative;
  overflow: hidden;
  margin-top: 1.6rem;
  border: 1px solid rgba(198, 164, 101, 0.5);
  border-radius: 999px;
  padding: 0.52rem 1.15rem 0.48rem;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--or-clair);
  text-decoration: none;
  transition: border-color 0.4s ease, background-color 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.pupitre__lien::before {
  content: "\2192";
  order: 2;
  font-size: 0.72rem;
  line-height: 1;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.pupitre__lien::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -85%;
  width: 55%;
  background: linear-gradient(100deg, transparent, rgba(234, 211, 151, 0.24), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}
.pupitre__lien:hover,
.pupitre__lien:focus-visible {
  text-decoration: none;
  border-color: var(--or-clair);
  background-color: rgba(198, 164, 101, 0.1);
  transform: translateY(-2px);
}
.pupitre__lien:hover::before,
.pupitre__lien:focus-visible::before { transform: translateX(3px); }
.pupitre__lien:hover::after,
.pupitre__lien:focus-visible::after { left: 130%; }

/* --- Bureau : le survol urgence transposé sur les cartes domaines (carte seule) -----------
   Le fondu d'arrivée validé (2.2s + cascade) garde ses voies ; le survol prend des voies
   rapides indépendantes : translate / border-color / box-shadow. ------------------------- */
@media (hover: hover) and (min-width: 901px) {
  .section-domaines .cards--3 .card--domaine.reveal,
  body:has(.page-hero--domaines) .section-domaines .cards--3 .card--domaine.reveal {
    transition-property: opacity, transform, border-color, box-shadow, translate, scale;
    transition-duration: 2.2s, 2.2s, 0.4s, 0.55s, 0.55s, 0.55s;
    transition-timing-function: cubic-bezier(0.33, 0, 0.2, 1), cubic-bezier(0.33, 0, 0.2, 1), ease, cubic-bezier(0.22, 1, 0.36, 1), cubic-bezier(0.22, 1, 0.36, 1), cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0s), var(--reveal-delay, 0s), 0s, 0s, 0s, 0s;
  }
  .cards--3 .card--domaine:hover {
    translate: 0 -4px;
    scale: 1.015;
    border-color: var(--or-profond);
    box-shadow: 0 20px 40px -24px rgba(15, 25, 20, 0.28);
  }
  /* Quand le bouton prend la main, le plein effet (-9px) reste seul maître */
  .cards--3 .card--domaine:has(.card__link:hover),
  .cards--3 .card--domaine:has(.card__link:focus-visible) { translate: 0 0; scale: 1; }
}

/* --- FAQ droit public : moins d'air au-dessus, et SEUL le pupitre de droit public ajusté -- */
body:has(.page-hero--expertise) .section-parloir { padding-top: 3.2rem; }
@media (min-width: 821px) {
  body:has(.page-hero--expertise) .parloir {
    align-items: center;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    max-width: 77rem;
    margin-inline: auto;
    column-gap: 4.4rem;
  }
  body:has(.page-hero--expertise) .section-parloir h2::before {
    left: 0;
    transform: translateY(-50%);
    width: min(30rem, 85%);
  }
  body:has(.page-hero--expertise) [aria-labelledby="titre-journal"] .section-head {
    max-width: 77rem;
    margin-inline: auto;
  }
  body:has(.page-hero--expertise) .faq-tete {
    max-width: 77rem;
    margin-inline: auto;
  }
  body:has(.page-hero--expertise) .pupitre {
    max-width: 31.5rem;
    margin-left: 0;
    padding: 1.55rem 1.8rem 1.5rem;
    position: relative;
    top: auto;
    align-self: center;
  }
  body:has(.page-hero--expertise) .pupitre__rep h3 { margin-top: 0.45rem; }
  body:has(.page-hero--expertise) .pupitre__rep p { margin-top: 0.6rem; }
  body:has(.page-hero--expertise) .pupitre__lien { margin-top: 1rem; }
  body:has(.page-hero--expertise) .pupitre__no { font-size: 7.2rem; top: -0.75rem; right: 1.4rem; }
  body:has(.page-hero--expertise) .pupitre__rep .overline { font-size: 0.58rem; }
  body:has(.page-hero--expertise) .pupitre__rep h3 { font-size: 1.12rem; }
  body:has(.page-hero--expertise) .pupitre__rep p { font-size: 0.85rem; line-height: 1.7; }
  body:has(.page-hero--expertise) .pupitre__lien { margin-top: 1.15rem; font-size: 0.56rem; padding: 0.44rem 0.95rem 0.4rem; }
}
/* --- Droit public : le journal rapproché de la FAQ, recadré sur le rail des titres -------- */
body:has(.page-hero--expertise) [aria-labelledby="titre-journal"] { padding-top: 3.6rem; }
@media (min-width: 821px) {
  body:has(.page-hero--expertise) [aria-labelledby="titre-journal"] > .container {
    max-width: 77rem;
    margin-inline: auto;
  }
  body:has(.page-hero--expertise) [aria-labelledby="titre-journal"] .revue__rail {
    padding-left: 0;
    scroll-padding-left: 0;
  }
  body:has(.page-hero--expertise) [aria-labelledby="titre-journal"] .section-head { max-width: none; margin-inline: 0; }
}
/* --- La carte « lecture continue » reste centrée (après la justification des articles) ---- */
.revue__carte--fin p,
.revue__carte--fin .revue__fin-mot { text-align: center; }
/* --- Héros droit public mobile : l'énumération des matières s'efface (bureau intact) ------ */
.page-hero--expertise .hero-virgule { display: none; }
@media (max-width: 900px) {
  .page-hero--expertise .hero-matieres { display: none; }
  .page-hero--expertise .hero-virgule { display: inline; }
}

/* --- Droit public, téléphone : la tournée de calibrage (V561) ----------------------------
   Surtitres d'actes affinés, respirations resserrées entre sections, note de vitrine et
   questions justifiées, FAQ recentrée, journal sur une ligne — rien ne touche le bureau. */
@media (max-width: 900px) {
  .acte-matiere { font-size: min(0.58rem, 2.6vw); }
  .section-actes { padding-bottom: 5.2rem; }
  .section-outils { padding-top: 2.7rem; }
  .outils-vitrine .vitrine-note { text-align: justify; }
  .section-urgence { padding-top: 2.7rem; }
  .urgence-lede { font-size: min(0.89rem, 3.85vw); }
  body:has(.page-hero--expertise) .section-parloir { padding: 2.4rem 0 2.6rem; }
  body:has(.page-hero--expertise) .registre__q { text-align: justify; }
  /* Les questions descendent d'un cran sur téléphone (droit public et landings) */
  body:has(.page-hero--expertise) .registre__q { font-size: 0.9rem; }
  /* L'en-tête de la FAQ se recentre sur téléphone */
  body:has(.page-hero--expertise) .section-parloir .section-head { text-align: center; }
  body:has(.page-hero--expertise) .section-parloir .section-head .overline--signature { justify-content: center; }
  body:has(.page-hero--expertise) [aria-labelledby="titre-journal"] { padding-top: 2.8rem; padding-bottom: 5.2rem; }
  body:has(.page-hero--expertise) [aria-labelledby="titre-journal"] h2 { font-size: min(1.62rem, 6.9vw); }
  body:has(.page-hero--expertise) [aria-labelledby="titre-journal"] .revue { margin-top: 2.2rem; }
}

/* --- Journal, téléphone : les extraits retrouvent leur phrase entière ---------------------
   Les cartes de 300px offrent la même contenance par ligne que les cartes bureau de 340px
   (padding et corps réduits d'un même facteur) : le texte se termine sur ses trois points
   écrits, plus jamais tranché en plein mot. Premier article aligné sur le titre (expertise). */
@media (max-width: 820px) {
  .revue__carte { padding: 1.7rem 1.35rem 1.7rem; }
  .revue__carte h3 { font-size: 1.18rem; height: calc(1.18rem * 1.22 * 3); }
  .revue__carte p { font-size: 0.82rem; height: calc(0.82rem * 1.75 * 3); }
  /* Le filigrane remonte glisser un peu plus derrière la date */
  .revue__no { top: 0.15rem; }
  body:has(.page-hero--expertise) [aria-labelledby="titre-journal"] .revue__rail {
    padding-inline: 0 0.8rem;
    scroll-padding-inline: 0 0.8rem;
  }
  section:has(#titre-lire-aussi) .revue__rail {
    padding-inline: 0 0.8rem;
    scroll-padding-inline: 0 0.8rem;
  }
}

/* --- FAQ : le pupitre garde la hauteur de sa plus longue réponse — la section ne bouge
   jamais quand on passe d'une question à l'autre (toutes pages : accueil, droit public,
   landings). Les réponses inactives restent empilées, invisibles mais mesurées. -------- */
@media (min-width: 821px) {
  .pupitre { display: grid; }
  .pupitre__rep { display: block; grid-area: 1 / 1; visibility: hidden; }
  .pupitre__rep.est-active { visibility: visible; }
  /* Accueil, bureau : demande expresse — l'encadré reprend la hauteur de la réponse active. */
  body:has(> .site-header + main .hero) .pupitre,
  body:has(section.hero) .pupitre { display: block; }
  body:has(section.hero) .pupitre__rep { display: none; grid-area: auto; visibility: visible; }
  body:has(section.hero) .pupitre__rep.est-active { display: block; }
}

/* --- La passerelle : les deux portes — le renvoi devient deux cartes maison,
   cliquables en entier, au gabarit des écrins de la page (lueur, cadre gravé,
   remontée au survol, reflet doré traversant). ------------------------------------------- */
.passerelle { margin-top: 4.6rem; }
.passerelle .section-head--center { max-width: none; }
.passerelle-phrase {
  font-size: 1.32rem;
  line-height: 1.75;
  max-width: 40em;
  margin: 1.4rem auto 0;
}
.passerelle-phrase em {
  font-family: var(--font-garalde);
  font-style: italic;
  font-size: 1.08em;
  color: var(--or-profond);
}
/* La césure vit sur grand écran ; le téléphone garde son fil naturel */
.br-bureau { display: inline; }
/* L'entrée de la passerelle : le fronton d'abord, puis les deux portes, d'un pas posé.
   Les portes vivent dans un div.reveal (leur transition de survol écraserait la révélation). */
.passerelle .section-head.reveal,
.passerelle .portes > .reveal { transition-duration: 2.25s; }
.portes > .reveal { display: flex; }
.portes > .reveal > .porte { flex: 1; }
@media (min-width: 821px) {
  .portes > .reveal:nth-child(1) { --reveal-delay: 0.45s; }
  .portes > .reveal:nth-child(2) { --reveal-delay: 0.7s; }
}
.portes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.9rem;
  max-width: 62rem;
  margin: 2.7rem auto 0;
}
.porte {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 2.1rem 2.3rem;
  background:
    radial-gradient(24rem 11rem at 85% -15%, rgba(198, 164, 101, 0.1), transparent 62%),
    linear-gradient(168deg, #FFFFFF 0%, #FCFBF8 62%, var(--ivoire) 100%);
  border: 1px solid rgba(156, 124, 56, 0.3);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: translate 0.55s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease, box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.porte::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(198, 164, 101, 0.2);
  border-radius: 7px;
  pointer-events: none;
}
/* Le reflet doré traversant, comme sur les cartes du journal */
.porte::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -85%;
  width: 55%;
  background: linear-gradient(100deg, transparent 0%, rgba(234, 211, 151, 0.32) 50%, transparent 100%);
  transform: skewX(-20deg);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .porte::after { transition: left 0.65s ease; }
}
.porte:hover { translate: 0 -4px; border-color: rgba(156, 124, 56, 0.55); box-shadow: 0 18px 40px rgba(59, 57, 55, 0.12); text-decoration: none; }
.porte:focus-visible { text-decoration: none; }
.porte:hover::after { left: 125%; }
.porte--or { border-color: rgba(198, 164, 101, 0.55); }
.porte--or:hover { border-color: var(--or-clair); }
.porte-matiere {
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--or-profond);
  margin: 0;
}
.porte-titre {
  font-family: var(--font-garalde);
  font-weight: 500;
  font-size: 1.42rem;
  line-height: 1.25;
  color: var(--anthracite);
  margin: 0.65rem 0 0.7rem;
}
.porte-texte {
  font-size: 0.9rem;
  line-height: 1.8;
  color: rgba(59, 57, 55, 0.82);
  margin: 0;
}
/* La pilule des cartes de la page droit public, au centre de chaque porte */
.porte .acte-lien { align-self: center; margin-top: 1.35rem; }
@media (max-width: 820px) {
  .passerelle { margin-top: 2.7rem; }
  .porte-matiere { font-size: 0.58rem; }
  .passerelle-phrase { font-size: min(1.12rem, 4.8vw); }
  .br-bureau { display: none; }
  .portes { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2.2rem; }
  .porte { padding: 2rem 1.4rem 1.9rem; }
  /* Plus ample, et toujours une seule ligne : le corps suit la largeur utile de la carte, calé sur le plus long titre */
  .porte-titre { font-size: min(1.36rem, calc((100vw - 83px) * 0.0765)); }
  .porte-texte { font-size: min(0.86rem, 3.72vw); }
}

/* --- Landing responsabilité : le titre respire sur deux lignes fixes, à toute taille ----- */
@media (max-width: 900px) {
  .page-hero--expertise h1.h1-deux-lignes { font-size: min(2.3rem, 8.6vw); }
}

/* --- Règle du marbre : jamais de mot orphelin en fin de paragraphe d'introduction.
   text-wrap: pretty rééquilibre les fins de ligne (navigateurs récents) ; les derniers
   mots des ledes sont par ailleurs cousus d'insécables au besoin. -------------------------- */
.page-hero__lede,
.section-head p,
.diptyque-definition,
.urgence-lede,
.actes-lede,
.passerelle-phrase,
.porte-texte,
.atterrissage-retour {
  text-wrap: pretty;
}
/* --- Santé, téléphone : le lede des repères respire un peu plus large --------------------- */
@media (max-width: 900px) {
  .urgence-lede--large { margin-inline: -0.6rem; }
}
/* --- Collectivités, téléphone : le lede des interventions respire un peu plus large ------ */
@media (max-width: 900px) {
  .actes-lede--large { margin-inline: -0.6rem; }
}

/* --- Grande FAQ : sommaire en chapitres, registre numéroté, passerelle seule (V713) ----
   La page des questions fréquentes prend le rang des pages maison : quatre chapitres
   gravés en chiffres romains, des questions numérotées à l'or, des réponses qui se
   dévoilent en douceur. Rien ne déborde de la page /faq/. --------------------------- */
.faq-sommaire {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  margin-top: 0.4rem;
}
.faq-sommaire a {
  position: relative;
  display: block;
  padding: 1.45rem 1.35rem 1.3rem;
  border: 1px solid rgba(198, 164, 101, 0.38);
  border-top: 2px solid var(--or-clair);
  background: linear-gradient(168deg, #FFFFFF 0%, #FBFAF7 55%, #F5F1E9 100%);
  text-decoration: none;
  color: inherit;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease, border-color 0.5s ease;
}
.faq-sommaire a::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(198, 164, 101, 0.18);
  pointer-events: none;
  transition: border-color 0.5s ease;
}
.faq-sommaire a:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(31, 45, 38, 0.13); border-color: var(--or-profond); }
.faq-sommaire a:hover::after { border-color: rgba(156, 124, 56, 0.4); }
.faq-sommaire .num {
  display: block;
  font-family: var(--font-garalde);
  font-style: italic;
  font-weight: 300;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--or-profond);
}
.faq-sommaire .titre {
  display: block;
  margin-top: 0.55rem;
  font-family: var(--font-garalde);
  font-size: 1.16rem;
  line-height: 1.25;
}
.faq-sommaire .compte {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.68rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: rgba(31, 45, 38, 0.55);
}
.chapitre-faq {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  margin-top: 4rem;
  scroll-margin-top: 7.5rem;
}
.chapitre-faq:first-of-type { margin-top: 1.4rem; }
.chapitre-faq .num {
  font-family: var(--font-garalde);
  font-style: italic;
  font-weight: 300;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--or-profond);
  flex-shrink: 0;
}
.chapitre-faq h2 { font-size: 1.62rem; white-space: nowrap; }
.chapitre-faq::after {
  content: "";
  flex: 1;
  height: 1px;
  transform: translateY(-0.35rem);
  background: linear-gradient(90deg, rgba(156, 124, 56, 0.55), rgba(156, 124, 56, 0));
}
.sans-coupe { white-space: nowrap; }
/* Grande FAQ : tout apparaît en fondu montant, du bas vers le haut, au défilement.
   Course ample (46px), courbe très amortie, cascades légères — l'enveloppe porte
   l'effet, la carte garde son survol vif. */
.section-registre-faq .faq-ecrins > .reveal,
main .faq-sommaire > a.reveal {
  transition-duration: 2.4s;
  transition-timing-function: cubic-bezier(0.19, 0.6, 0.22, 1);
}
.section-registre-faq .faq-ecrins > .reveal:not(.is-visible),
main .faq-sommaire > a.reveal:not(.is-visible) {
  opacity: 0;
  transform: translate3d(0, 46px, 0);
}
/* Les titres de chapitre glissent en fondu de la gauche vers la droite (toutes tailles). */
.section-registre-faq .chapitre-faq.reveal {
  transition-duration: 2.8s;
  transition-timing-function: cubic-bezier(0.45, 0.05, 0.2, 1);
}
.section-registre-faq .chapitre-faq.reveal:not(.is-visible) {
  opacity: 0;
  transform: translate3d(-34px, 0, 0);
}
.section-registre-faq .faq-ecrins > .reveal:nth-child(even) { transition-delay: 0.3s; }
main .faq-sommaire > a.reveal:nth-child(2) { transition-delay: 0.18s; }
main .faq-sommaire > a.reveal:nth-child(3) { transition-delay: 0.36s; }
main .faq-sommaire > a.reveal:nth-child(4) { transition-delay: 0.54s; }
.section-registre-faq {
  position: relative;
  overflow: hidden;
  padding: 3.6rem 0 5.4rem;
  background:
    radial-gradient(58rem 40rem at 88% 4%, rgba(198, 164, 101, 0.13), transparent 62%),
    radial-gradient(46rem 34rem at 2% 46%, rgba(198, 164, 101, 0.09), transparent 60%),
    radial-gradient(44rem 32rem at 68% 98%, rgba(255, 255, 255, 0.55), transparent 65%),
    linear-gradient(172deg, #EDE8DD 0%, var(--pierre) 38%, #E1DBCC 74%, #EAE5D9 100%);
  border-top: 1px solid rgba(198, 164, 101, 0.35);
  border-bottom: 1px solid rgba(198, 164, 101, 0.35);
}
.section-registre-faq .container { position: relative; }
.chapitre-faq { position: relative; }
.chapitre-faq::before {
  content: attr(data-chiffre);
  position: absolute;
  top: -3.4rem;
  right: 0;
  font-family: var(--font-garalde);
  font-style: italic;
  font-weight: 300;
  font-size: 9rem;
  line-height: 1;
  color: rgba(156, 124, 56, 0.075);
  pointer-events: none;
}
.section-registre-faq .chapitre-faq:first-of-type { margin-top: 0.4rem; }
.faq-ecrins {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.35rem;
  align-items: start;
  margin-top: 1.7rem;
}
details.ecrin-q {
  position: relative;
  border: 1px solid rgba(198, 164, 101, 0.38);
  border-top: 2px solid var(--or-clair);
  background: linear-gradient(168deg, #FFFFFF 0%, #FBFAF7 55%, #F5F1E9 100%);
  box-shadow: 0 12px 30px rgba(31, 45, 38, 0.07);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease, border-color 0.5s ease;
}
details.ecrin-q::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(198, 164, 101, 0.16);
  pointer-events: none;
}
details.ecrin-q:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(31, 45, 38, 0.12); border-color: var(--or-profond); }
details.ecrin-q[open] { border-color: var(--or-profond); box-shadow: 0 22px 48px rgba(31, 45, 38, 0.12); }
.ecrin-q summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.35rem 1.5rem 1.3rem;
  font-family: var(--font-garalde);
  font-size: 1.16rem;
  line-height: 1.35;
  transition: color 0.2s ease;
}
.ecrin-q summary::-webkit-details-marker { display: none; }
.ecrin-q summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-lineale);
  font-weight: 300;
  font-size: 1.2rem;
  color: var(--or-profond);
  flex-shrink: 0;
  transition: transform 0.4s ease;
}
.ecrin-q[open] summary::after { content: "\2212"; }
.ecrin-q[open] summary { color: var(--or-profond); }
.ecrin-q .qnum {
  flex-shrink: 0;
  font-family: var(--font-lineale);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--or-profond);
  transform: translateY(-0.15rem);
}
.ecrin-q .qtxt { flex: 1; text-align: justify; }
.ecrin-q .faq__answer {
  margin: 0;
  padding: 0 1.5rem 1.5rem;
  font-size: 0.94rem;
  max-width: none;
}
.ecrin-q .faq__answer::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: 1.05rem;
  background: linear-gradient(90deg, rgba(156, 124, 56, 0.45), rgba(156, 124, 56, 0));
}
.ecrin-q[open] .faq__answer { animation: faq-devoile 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes faq-devoile {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
.ecrin-q .faq__answer a { color: var(--or-profond); }
.section-passerelle-seule { padding: 1.5rem 0 5.5rem; }
.section-passerelle-seule .passerelle-phrase { font-size: 1.72rem; line-height: 1.35; }
.passerelle--sobre .passerelle-phrase { font-size: 1.38rem; line-height: 1.4; }
.section-passerelle-seule .passerelle { margin-top: 0; }
@media (max-width: 900px) {
  /* Sommaire : quatre lignes fines — chiffre, titre sur une ligne, compte à droite */
  .faq-sommaire { grid-template-columns: 1fr; gap: 0.6rem; }
  .faq-sommaire a { display: flex; align-items: baseline; gap: 0.85rem; padding: 0.95rem 1.05rem 0.9rem; }
  .faq-sommaire .num { font-size: 1.25rem; }
  .faq-sommaire .titre { margin-top: 0; font-size: 0.99rem; white-space: nowrap; }
  .faq-sommaire .compte { margin-top: 0; margin-left: auto; font-size: 0.56rem; }
  .chapitre-faq { margin-top: 3.1rem; gap: 0.85rem; }
  .chapitre-faq h2 { font-size: min(1.34rem, calc((100vw - 120px) * 0.075)); }
  .chapitre-faq .num { font-size: 1.7rem; }
  .section-registre-faq { padding: 2.6rem 0 3.6rem; }
  .chapitre-faq::before { font-size: 5.2rem; top: -1.9rem; }
  .faq-ecrins { grid-template-columns: 1fr; gap: 0.85rem; margin-top: 1.3rem; }
  .ecrin-q summary { font-size: 0.9rem; padding: 1rem 1.05rem 0.95rem; gap: 0.7rem; }
  .ecrin-q summary::after { padding-left: 0.75rem; }
  .ecrin-q .qnum { font-size: 0.6rem; }
  .ecrin-q .faq__answer { padding: 0 1.05rem 1.15rem; font-size: 0.88rem; }
  .section-passerelle-seule { padding-bottom: 3.6rem; }
  .section-passerelle-seule .passerelle-phrase { font-size: min(1.36rem, 5.8vw); line-height: 1.4; }
  .passerelle--sobre .passerelle-phrase { font-size: min(1.24rem, calc((100vw - 33px) * 0.0572)); line-height: 1.45; }
  /* Une par une : les questions suivent le titre dans un tempo lent et feutré —
     même velours que le sommaire : amorce progressive, course courte, longue traîne. */
  .section-registre-faq .faq-ecrins > .reveal {
    transition-duration: 3s;
    transition-timing-function: cubic-bezier(0.45, 0.05, 0.2, 1);
  }
  .section-registre-faq .faq-ecrins > .reveal:not(.is-visible) { transform: translate3d(0, 26px, 0); }
  /* Les titres de chapitre glissent en fondu de la gauche vers la droite */
  .section-registre-faq .chapitre-faq.reveal {
    transition-duration: 2.8s;
    transition-timing-function: cubic-bezier(0.45, 0.05, 0.2, 1);
  }
  .section-registre-faq .chapitre-faq.reveal:not(.is-visible) { transform: translate3d(-34px, 0, 0); }
  .section-registre-faq .faq-ecrins > .reveal:nth-child(even) { transition-delay: 0s; }
  .section-registre-faq .faq-ecrins > .reveal:nth-child(2) { transition-delay: 0.3s; }
  .section-registre-faq .faq-ecrins > .reveal:nth-child(3) { transition-delay: 0.6s; }
  .section-registre-faq .faq-ecrins > .reveal:nth-child(4) { transition-delay: 0.9s; }
  .section-registre-faq .faq-ecrins > .reveal:nth-child(5) { transition-delay: 1.2s; }
  .section-registre-faq .faq-ecrins > .reveal:nth-child(6) { transition-delay: 1.5s; }
  /* Sommaire téléphone : exactement le velours des questions — fondu montant,
     amorce progressive, en file à partir de la première carte. */
  main .faq-sommaire > a.reveal {
    transition-duration: 3s;
    transition-timing-function: cubic-bezier(0.45, 0.05, 0.2, 1);
  }
  main .faq-sommaire > a.reveal:not(.is-visible) { transform: translate3d(0, 26px, 0); }
  main .faq-sommaire > a.reveal:nth-child(2) { transition-delay: 0.3s; }
  main .faq-sommaire > a.reveal:nth-child(3) { transition-delay: 0.6s; }
  main .faq-sommaire > a.reveal:nth-child(4) { transition-delay: 0.9s; }
}


/* --- La salle des calculs : les simulateurs prennent le rang des pages maison (V735) ----
   Une bande nuit aux lueurs d'or : à gauche le pupitre de saisie (écrin ivoire), à droite
   le verdict (écrin sombre, chronologie dorée). Puis la méthode en trois écrins. -------- */
.section-cadran {
  position: relative;
  overflow: hidden;
  padding: 5.2rem 0 4.4rem;
  color: var(--ivoire);
  background:
    radial-gradient(58rem 42rem at 6% 4%, rgba(198, 164, 101, 0.2), transparent 62%),
    radial-gradient(46rem 32rem at 94% 100%, rgba(198, 164, 101, 0.09), transparent 62%),
    linear-gradient(170deg, #47433F 0%, var(--anthracite) 48%, #2C2A28 100%);
  border-top: 1px solid rgba(198, 164, 101, 0.35);
  border-bottom: 1px solid rgba(198, 164, 101, 0.35);
}
/* Les ondes du chronomètre : des cercles d'or concentriques, comme le temps qui s'écoule */
.section-cadran::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 76% 44%, transparent 0 217px, rgba(198, 164, 101, 0.11) 218px 219px, transparent 221px),
    radial-gradient(circle at 76% 44%, transparent 0 307px, rgba(198, 164, 101, 0.085) 308px 309px, transparent 311px),
    radial-gradient(circle at 76% 44%, transparent 0 412px, rgba(198, 164, 101, 0.06) 413px 414px, transparent 416px),
    radial-gradient(circle at 76% 44%, transparent 0 534px, rgba(198, 164, 101, 0.045) 535px 536px, transparent 538px),
    radial-gradient(circle at 76% 44%, transparent 0 672px, rgba(198, 164, 101, 0.03) 673px 674px, transparent 676px);
}
/* La règle graduée du chronomètre, en lisière haute */
.section-cadran::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(198, 164, 101, 0.55) 0 1px, transparent 1px 26px);
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent);
  mask-image: linear-gradient(180deg, #000 20%, transparent);
}
.page-hero--outil h1 { margin-top: 1.35rem; max-width: 26em; }
.section-cadran .container { position: relative; z-index: 1; }
.cadran {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 2.2rem;
  align-items: stretch;
  max-width: 66rem;
  margin-inline: auto;
}
.cadran-pupitre {
  position: relative;
  padding: 2.6rem 2.5rem 2.4rem;
  border-radius: 22px;
  border: 1px solid rgba(198, 164, 101, 0.5);
  background:
    radial-gradient(36rem 24rem at 14% 0%, rgba(198, 164, 101, 0.16), transparent 60%),
    linear-gradient(165deg, #575149 0%, #47423D 52%, #38342F 100%);
  color: var(--ivoire);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
}
.cadran-pupitre::after,
.cadran-verdict::after {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(198, 164, 101, 0.22);
  border-radius: 14px;
  pointer-events: none;
}
.cadran-pupitre > * { position: relative; z-index: 1; }
.cadran-titre {
  font-family: var(--font-garalde);
  font-size: 2.08rem;
  line-height: 1.2;
  margin-top: 0.85rem;
  color: var(--ivoire);
}
.cadran-titre em { font-style: italic; color: var(--or-clair); }
.section-cadran p.cadran-titre { color: var(--ivoire); }
.cadran-pupitre .overline--signature { font-size: 0.68rem; }
.cadran-pupitre .cadran-titre { margin-top: 0.45rem; }
.section-cadran .cadran-pupitre p.cadran-lede {
  margin-top: 1rem;
  font-size: 0.93rem;
  line-height: 1.8;
  color: rgba(251, 250, 247, 0.76);
  text-align: justify;
}
.cadran-pupitre .simulateur-champ { margin-top: 1.7rem; }
.cadran-pupitre .simulateur-champ label {
  display: block;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  text-transform: none;
  text-align: justify;
  color: var(--or-clair);
}
.cadran-pupitre .simulateur-champ.champ-date { z-index: 60; }
.cadran-pupitre .simulateur-champ input {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.62rem 1.15rem;
  font-family: var(--font-lineale);
  font-size: 1.08rem;
  color: var(--ivoire);
  color-scheme: dark;
  accent-color: #C6A465;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(198, 164, 101, 0.45);
  border-radius: 999px;
  text-align: center;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}
.cadran-pupitre .simulateur-champ input:focus {
  outline: none;
  border-color: var(--or-clair);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 4px rgba(198, 164, 101, 0.18);
}
.cadran-pupitre .simulateur-champ .simulateur-etiquette {
  display: block;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  text-transform: none;
  text-align: justify;
  color: var(--or-clair);
}
.cadran-pupitre .choix-duo { display: grid; gap: 0.55rem; margin-top: 0.75rem; }
.cadran-pupitre .choix-pilule {
  width: 100%;
  padding: 0.5rem 1.1rem;
  font-family: var(--font-lineale);
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  color: rgba(251, 250, 247, 0.78);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(198, 164, 101, 0.3);
  border-radius: 999px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease, color 0.4s ease;
}
.cadran-pupitre .choix-pilule:hover { border-color: rgba(198, 164, 101, 0.65); color: var(--ivoire); }
.cadran-pupitre .choix-pilule:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(198, 164, 101, 0.18); }
.cadran-pupitre .choix-pilule.est-choisi {
  border-color: var(--or-clair);
  background: linear-gradient(120deg, rgba(198, 164, 101, 0.22), rgba(198, 164, 101, 0.09));
  color: var(--ivoire);
  box-shadow: 0 0 0 4px rgba(198, 164, 101, 0.1);
}
.champ-date-enveloppe { position: relative; margin-top: 0.75rem; }
.champ-date-enveloppe input { margin-top: 0 !important; }
.champ-date-enveloppe input { cursor: pointer; padding-right: 3.1rem; }
.champ-date-enveloppe input::placeholder { color: rgba(251, 250, 247, 0.45); }
.cadran-pupitre .simulateur-champ input::placeholder { color: rgba(251, 250, 247, 0.45); }
@media (min-width: 901px) {
  body:has(.choix-pilule[data-versant]) .cadran-verdict,
  body:has(.choix-pilule[data-motif]) .cadran-verdict { display: flex; flex-direction: column; }
  body:has(.choix-pilule[data-versant]) .cadran-verdict .simulateur-resultat:not([hidden]),
  body:has(.choix-pilule[data-motif]) .cadran-verdict .simulateur-resultat:not([hidden]) {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
}
.champ-date-icone {
  position: absolute;
  top: 50%;
  right: 1.2rem;
  width: 1.15rem;
  height: 1.15rem;
  transform: translateY(-50%);
  color: var(--or-clair);
  cursor: pointer;
}
.calendrier-od {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: min(19.5rem, 100%);
  z-index: 40;
  padding: 0.85rem 0.9rem 0.65rem;
  border-radius: 16px;
  border: 1px solid rgba(198, 164, 101, 0.55);
  background:
    radial-gradient(18rem 11rem at 80% 0%, rgba(198, 164, 101, 0.12), transparent 60%),
    linear-gradient(165deg, #2B2825 0%, #221F1D 55%, #171615 100%);
  box-shadow: 0 0 0 1px rgba(198, 164, 101, 0.14), 0 20px 46px rgba(0, 0, 0, 0.55);
}
.cal-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.45rem; }
.cal-fleches { display: flex; gap: 0.3rem; }
.cal-nav--an { border-style: dashed; font-size: 0.8rem; }
.cal-mois { font-family: var(--font-garalde); font-size: 0.98rem; color: var(--ivoire); }
.cal-nav {
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid rgba(198, 164, 101, 0.4);
  border-radius: 999px;
  background: none;
  color: var(--or-clair);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.cal-nav:hover { border-color: var(--or-clair); background: rgba(198, 164, 101, 0.12); }
.cal-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.cal-jour-nom {
  text-align: center;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(198, 164, 101, 0.75);
  padding-bottom: 0.2rem;
}
.cal-vide { height: 1.85rem; }
.cal-jour {
  height: 1.85rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  font-family: var(--font-lineale);
  font-size: 0.8rem;
  color: rgba(251, 250, 247, 0.82);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.cal-jour:hover { background: rgba(198, 164, 101, 0.16); color: var(--or-clair); }
.cal-jour--present { border-color: rgba(198, 164, 101, 0.55); }
.cal-jour--choisi {
  background: linear-gradient(135deg, #EAD397 0%, #C6A465 55%, #9C7C38 100%);
  color: #221F1D;
  font-weight: 500;
}
.cal-pied { display: flex; justify-content: space-between; margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px solid rgba(198, 164, 101, 0.22); }
.cal-action {
  border: 0;
  background: none;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--or-clair);
  cursor: pointer;
  padding: 0.25rem 0.2rem;
  transition: color 0.3s ease;
}
.cal-action:hover { color: #EAD397; }
.cadran-verdict .simulateur-resultat-intro { text-align: justify; }

/* ---- Page honoraires : le relevé ---- */
.section-releve {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, #403C37 0%, #262422 58%, #1D1B1A 100%);
}
.section-releve::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 640px 420px at 12% 0%, rgba(198, 164, 101, 0.13), transparent 68%);
  pointer-events: none;
}
.section-releve .container { position: relative; z-index: 1; }
.releve-scene { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 4.2rem; align-items: center; }
.releve-propos .overline { color: var(--or-clair); }
.releve-grand-titre {
  font-family: var(--font-garalde);
  font-weight: 500;
  font-size: clamp(1.9rem, 2.9vw, 2.5rem);
  line-height: 1.22;
  color: var(--ivoire);
  margin: 0.7rem 0 0;
}
.releve-grand-titre em { font-style: italic; color: var(--or-clair); }
.releve-propos-texte {
  margin: 1.5rem 0 0;
  font-size: 0.94rem;
  line-height: 1.9;
  color: rgba(251, 250, 247, 0.72);
  text-align: justify;
}
.releve-propos .btn { margin-top: 1.9rem; padding: 0.82rem 1.9rem; font-size: 0.66rem; }
.releve-propos .btn--or:hover,
.releve-propos .btn--or:focus-visible {
  background: rgba(198, 164, 101, 0.16);
  color: var(--or-clair);
  border-color: var(--or-clair);
}
@media (max-width: 900px) {
  .releve-scene { grid-template-columns: minmax(0, 1fr); gap: 2.6rem; }
}
.releve {
  position: relative;
  overflow: hidden;
  max-width: 680px;
  margin-inline: auto;
  width: 100%;
  padding: 2.3rem 2.6rem 2.2rem;
  border-radius: 22px;
  border: 1px solid transparent;
  background:
    linear-gradient(160deg, #2B2825 0%, #171615 100%) padding-box,
    linear-gradient(150deg, rgba(198, 164, 101, 0.65), rgba(198, 164, 101, 0.1) 55%, rgba(198, 164, 101, 0.35)) border-box;
  box-shadow: 0 30px 70px rgba(23, 22, 21, 0.45);
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.9s ease;
}
.releve:hover { transform: translateY(-5px); box-shadow: 0 40px 84px rgba(23, 22, 21, 0.55); }
.releve::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, #9C7C38, rgba(198, 164, 101, 0.15));
  pointer-events: none;
}
.releve > * { position: relative; z-index: 1; }
.releve-filigrane {
  position: absolute;
  right: -50px;
  bottom: -70px;
  width: 300px;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.releve::before {
  content: '';
  position: absolute;
  top: 0;
  left: 6%;
  right: 6%;
  height: 130px;
  background: radial-gradient(ellipse at top, rgba(198, 164, 101, 0.14), transparent 72%);
  pointer-events: none;
}
.releve-ligne { transition: transform 0.45s ease; }
.releve-ligne:hover { transform: translateX(5px); }

.releve .overline { color: var(--or-clair); }
.releve-titre {
  font-family: var(--font-garalde);
  font-weight: 500;
  font-size: 1.9rem;
  line-height: 1.25;
  color: var(--ivoire);
  margin: 0.5rem 0 0;
}
.releve-titre em { color: var(--or-clair); }
.releve-lignes { margin-top: 1.9rem; }
.releve .releve-ligne { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 1.1s cubic-bezier(0.45, 0.05, 0.2, 1), transform 1.1s cubic-bezier(0.45, 0.05, 0.2, 1); }
.releve.is-visible .releve-ligne { opacity: 1; transform: none; }
.releve.is-visible .releve-ligne:nth-of-type(1) { transition-delay: 0.4s; }
.releve.is-visible .releve-ligne:nth-of-type(2) { transition-delay: 0.72s; }
.releve.is-visible .releve-ligne:nth-of-type(3) { transition-delay: 1.04s; }
.releve.is-visible .releve-ligne:nth-of-type(4) { transition-delay: 1.36s; }
.releve.is-visible .releve-ligne:nth-of-type(5) { transition-delay: 1.68s; }
.releve-ligne {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  padding: 0.92rem 0;
}

.releve-ligne dt {
  font-family: var(--font-garalde);
  font-weight: 500;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  color: rgba(251, 250, 247, 0.93);
  white-space: nowrap;
}
.releve-fil { flex: 1; border-bottom: 1px solid rgba(198, 164, 101, 0.2); transform: translateY(-0.28em); transition: border-color 0.45s ease; }
.releve-ligne:hover .releve-fil { border-color: rgba(198, 164, 101, 0.55); }
.releve-ligne dd {
  margin: 0;
  font-family: var(--font-garalde);
  font-style: italic;
  font-weight: 500;
  font-size: 1.12rem;
  background: linear-gradient(100deg, #E3C68C 0%, #C6A465 45%, #9C7C38 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

.releve-note {
  margin-top: 1.7rem;
  font-size: 0.87rem;
  line-height: 1.75;
  color: rgba(251, 250, 247, 0.62);
  text-align: justify;
}
.releve-actions { margin-top: 1.9rem; text-align: center; }
@media (max-width: 900px) {
  .section-releve { padding-top: 2.8rem; }
  .releve-propos .overline--signature { display: flex; justify-content: center; }
  .releve-grand-titre { text-align: center; }
  .releve-propos .btn { display: table; margin-inline: auto; padding: 0.72rem 1.55rem; font-size: 0.62rem; }
  .releve { padding: 2rem 1.5rem 1.9rem; }
  .releve-titre { font-size: min(1.62rem, calc((100vw - 60px) * 0.079)); }
  .releve-ligne dt { font-size: min(1.02rem, calc((100vw - 90px) * 0.0465)); letter-spacing: 0; }
  .releve-cachet { width: 72px; height: 72px; top: 1.5rem; right: 1.3rem; }
  .releve-ligne dd { font-size: min(1.12rem, calc((100vw - 90px) * 0.051)); }
}

/* ==== Gabarit d'article enrichi — v3 : héros maison, chapitres à chip, synthèse, FAQ cartes ==== */
/* --- Le héros de l'article, à la manière de la maison --- */
.jart-hero { position: relative; overflow: hidden; }
.jart-hero .overline--signature { margin-bottom: 0.4rem; }
.jart-hero .container.article { max-width: none; }
.jart-hero h1 { font-size: clamp(2.15rem, 3.65vw, 3.05rem); line-height: 1.26; max-width: none; }

.jart-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0;
  margin-top: 2rem;
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(251, 250, 247, 0.88);
}
.jart-meta span { white-space: nowrap; }
.jart-meta .jart-sep {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 0.85rem;
  background: rgba(198, 164, 101, 0.65);
  transform: rotate(45deg) translateY(-1px);
}
/* --- La grille de lecture --- */
.jart-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 5.2rem; align-items: start; }
.jart-sommaire {
  position: sticky;
  top: 118px;
  border-left: 1px solid rgba(156, 124, 56, 0.28);
  padding-left: 1.4rem;
}
.jart-sommaire-titre {
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or-profond);
  margin: 0 0 1.15rem;
}
.jart-sommaire ol { list-style: none; margin: 0; padding: 0; }
.jart-sommaire li + li { margin-top: 0.7rem; }
.jart-sommaire a { display: flex; gap: 0.7rem; align-items: first baseline; text-decoration: none; }
.jart-som-no {
  flex: none;
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: rgba(156, 124, 56, 0.68);
  transition: color 0.35s ease;
}
.jart-som-lib {
  flex: 1;
  font-family: var(--font-lineale);
  font-weight: 300;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(58, 54, 47, 0.7);
  text-align: justify;
  transition: color 0.35s ease;
}
.jart-sommaire a:hover .jart-som-lib { color: var(--or-profond); }
.jart-sommaire a:hover { text-decoration: none; }
.jart-sommaire li.jart-actif .jart-som-lib { color: #33302A; text-shadow: 0 0 0.55px rgba(51, 48, 42, 0.85); }
.jart-sommaire li.jart-actif .jart-som-no { color: var(--or-profond); }
/* Tout paragraphe du fil de lecture est justifié — hors avertissement final */
.jart-corps p { text-align: justify; }
/* --- Le chapeau d'ouverture : une voix, pas une lettrine --- */
.jart-chapo {
  font-family: var(--font-garalde);
  font-size: 1.24rem;
  line-height: 1.72;
  color: rgba(51, 48, 42, 0.88);
  border-left: 2px solid var(--or-clair);
  padding-left: 1.5rem;
  margin: 0.4rem 0 0;
  text-align: justify;
}
/* --- Chapitres : la chip d'or et son filet, puis le titre --- */
.jart-corps { counter-reset: jchap; }
.jart-corps h2 {
  counter-increment: jchap;
  scroll-margin-top: 118px;
  margin: 4rem 0 1.5rem;
  position: relative;
  padding-top: 2.15rem;
  text-align: justify;
  font-size: 1.5rem;
}
.jart-corps h2::before {
  content: counter(jchap, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--or-profond);
  border: 1px solid rgba(156, 124, 56, 0.45);
  border-radius: 999px;
  padding: 0.32rem 0.8rem 0.28rem 0.9rem;
  line-height: 1;
}
.jart-corps h2::after {
  content: '';
  position: absolute;
  top: 0.62rem;
  left: 4rem;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(156, 124, 56, 0.35), rgba(156, 124, 56, 0.03));
}
.jart-corps .article__body h2 { margin: 4rem 0 1.5rem; }
.jart-corps .notice {
  position: relative;
  overflow: hidden;
  margin: 2.8rem 0;
  padding: 1.8rem 2rem 1.6rem 2.1rem;
  border-radius: 14px;
  border: 1px solid rgba(154, 124, 56, 0.22);
  border-left: 3px solid var(--or-clair);
  background: linear-gradient(170deg, #FFFEFB 0%, #F6F1E7 100%);
}
.jart-corps .notice::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 300px 160px at 4% 0%, rgba(198, 164, 101, 0.1), transparent 70%);
  pointer-events: none;
}
.jart-corps .notice .overline {
  display: inline-block;
  position: relative;
  z-index: 1;
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  color: #9C7C38;
  border: 1px solid rgba(156, 124, 56, 0.4);
  border-radius: 999px;
  padding: 0.34rem 0.85rem 0.3rem;
  background: rgba(255, 254, 251, 0.65);
}
.jart-corps .notice p:not(.overline) {
  position: relative;
  z-index: 1;
  margin: 0.95rem 0 0;
  color: #57534A;
  font-size: 0.92rem;
  line-height: 1.85;
  text-align: justify;
}
/* Les listes du fil de lecture au même corps que les paragraphes ;
   les cartes (En bref) gardent leur corps propre, légèrement plus petit. */
.jart-corps ul li { font-size: 0.95rem; }
.jart-corps li { text-align: justify; }
.jart-corps .jart-bref li { font-size: 0.9rem; }
/* --- La synthèse : l'article en bref, dans un écrin --- */
.jart-bref {
  position: relative;
  overflow: hidden;
  margin: 4.2rem 0 0;
  padding: 2.2rem 2.3rem 2rem;
  border-radius: 18px;
  border: 1px solid transparent;
  background:
    linear-gradient(170deg, #FFFEFB 0%, #F6F1E7 100%) padding-box,
    linear-gradient(150deg, rgba(198, 164, 101, 0.55), rgba(198, 164, 101, 0.14) 45%, rgba(198, 164, 101, 0.5)) border-box;
}
.jart-bref::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(227, 198, 140, 0.85), transparent);
}
.jart-bref-chip {
  display: inline-block;
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9C7C38;
  border: 1px solid rgba(156, 124, 56, 0.4);
  border-radius: 999px;
  padding: 0.34rem 0.85rem 0.3rem;
  margin: 0 0 0.9rem;
}
.jart-bref-titre {
  font-family: var(--font-garalde);
  font-weight: 500;
  font-size: 1.5rem;
  color: #33302A;
  margin: 0 0 1.1rem;
}
.jart-bref-titre em { font-style: italic; color: var(--or-profond); }
.jart-bref ul { list-style: none; margin: 0; padding: 0; }
.jart-bref li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.85rem;
  font-size: 0.9rem;
  line-height: 1.75;
  color: #57534A;
  text-align: justify;
}
.jart-bref li:last-child { margin-bottom: 0; }
.jart-bref li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--or-clair);
  transform: rotate(45deg);
}
/* La section de lecture qui suit l'article respire un peu moins haut */
section:has(#titre-lire-aussi) { padding-top: 2.7rem; }
/* --- L'avertissement final : discret, fondu, signé d'un losange --- */
.jart-corps a:not(.btn) {
  text-decoration: underline;
  text-decoration-color: rgba(156, 124, 56, 0.6);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.35s ease, text-decoration-color 0.35s ease, text-underline-offset 0.25s ease;
}
.jart-corps a:not(.btn):hover,
.jart-corps a:not(.btn):focus-visible {
  color: var(--or-profond);
  text-decoration-color: var(--or-profond);
  text-underline-offset: 4.5px;
}
.jart-corps .article__disclaimer {
  margin: 3.4rem 0 0;
  text-align: justify;
  font-family: var(--font-garalde);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(87, 83, 74, 0.6);
}
/* --- La FAQ de l'article : des cartes qui s'ouvrent --- */
.jart-faq { margin-top: 1.7rem; border-top: 0; }
.jart-faq details {
  border: 1px solid rgba(154, 124, 56, 0.26);
  border-radius: 14px;
  background: linear-gradient(170deg, #FFFEFB 0%, #F8F4EC 100%);
  padding: 0 1.5rem;
  transition: border-color 0.45s ease, box-shadow 0.45s ease;
}
.jart-faq details + details { margin-top: 0.9rem; }
.jart-faq details:hover { border-color: rgba(154, 124, 56, 0.5); box-shadow: 0 12px 30px rgba(31, 45, 38, 0.06); }
.jart-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.4rem;
  padding: 1.2rem 0;
  font-family: var(--font-garalde);
  font-weight: 500;
  font-size: 1.16rem;
  color: #33302A;
  transition: color 0.35s ease;
}
.jart-faq summary::-webkit-details-marker { display: none; }
.jart-faq summary::after {
  content: '';
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(156, 124, 56, 0.5);
  border-radius: 50%;
  background:
    linear-gradient(var(--or-profond), var(--or-profond)) center / 8px 1px no-repeat,
    linear-gradient(var(--or-profond), var(--or-profond)) center / 1px 8px no-repeat;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.45s ease;
}
.jart-faq details[open] summary { color: var(--or-profond); }
.jart-faq details[open] summary::after {
  content: '';
  background:
    linear-gradient(var(--or-profond), var(--or-profond)) center / 8px 1px no-repeat,
    rgba(198, 164, 101, 0.12);
  transform: rotate(180deg);
}
.jart-faq .faq__answer {
  margin: 0 0 1.35rem;
  padding-left: 1.15rem;
  padding-right: 1.6rem;
  border-left: 0;
  background: linear-gradient(to bottom, rgba(198, 164, 101, 0.45), rgba(198, 164, 101, 0.45)) no-repeat left top 0.2em / 1px calc(100% - 2.2em);
  font-size: 0.92rem;
  line-height: 1.85;
  text-align: justify;
  color: #57534A;
}
@media (max-width: 1023px) {
  .jart-faq .faq__answer { padding-right: 0.8rem; }
}
@media (max-width: 1023px) {
  .jart-hero h1 { font-size: min(1.92rem, calc((100vw - 38px) * 0.0855)); }
  .jart-meta {
    flex-wrap: nowrap;
    white-space: nowrap;
    letter-spacing: 0.08em;
    font-size: min(0.52rem, calc((100vw - 77px) * 0.0266)) !important;
    margin-top: 2rem;
    padding-left: 1px;
  }
  .jart-meta .jart-sep { margin: 0 0.45rem; }
  section:has(.jart-layout) { padding-top: 2rem; padding-bottom: 1.6rem; }
  .jart-faq summary { text-align: justify; line-height: 1.42; gap: 1.7rem; }
  .jart-faq summary::after { width: 22px; height: 22px; background-size: 7px 1px, 1px 7px; }
  .jart-faq details[open] summary::after { background-size: 7px 1px; }
  section:has(#titre-lire-aussi) { padding-top: 1.1rem; }
  section:has(#titre-lire-aussi) .revue { margin-top: 2.2rem; }

  .jart-bref { margin-top: 2.4rem; }
  .jart-corps ul li { margin-bottom: 0.95rem; }
  .jart-bref li { margin-bottom: 1.05rem; }
  .jart-corps .article__disclaimer { margin-top: 2.4rem; font-size: 0.85rem; }
  .jart-corps li { text-align: justify; }
  .jart-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .jart-sommaire {
    position: static;
    border-left: 0;
    padding: 1.3rem 1.4rem 1.35rem;
    margin-bottom: 2.1rem;
    background: linear-gradient(170deg, #FFFEFB 0%, #F8F4EC 100%);
    border: 1px solid rgba(154, 124, 56, 0.24);
    border-radius: 14px;
  }
  .jart-corps h2, .jart-corps .article__body h2 { scroll-margin-top: 96px; margin: 3.2rem 0 1.25rem; }
  .jart-chapo { font-size: min(1.1rem, calc((100vw - 110px) * 0.0555)); padding-left: 1.1rem; }
  .jart-meta { font-size: 0.56rem; }
  .jart-meta .jart-sep { margin: 0 0.55rem; }
  .jart-bref { padding: 1.7rem 1.4rem 1.6rem; }
  .jart-bref-titre { font-size: min(1.4rem, calc((100vw - 90px) * 0.072)); }
  .jart-faq summary { font-size: min(1.02rem, calc((100vw - 120px) * 0.054)); }
}

/* ==== Page journal : l'édition ==== */
/* Sur la page du journal, aucun soulignement au survol : les liens répondent par la couleur. */
body:has(.jx-grille) a:hover,
body:has(.jx-grille) a:focus-visible { text-decoration: none; }

.jx-reperes { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2rem; }
.page-hero .jx-reperes .acte-lien { color: var(--or-clair); border-color: rgba(198, 164, 101, 0.42); }
.page-hero .jx-reperes .acte-lien:hover,
.page-hero .jx-reperes .acte-lien:focus-visible { border-color: var(--or-clair); background: rgba(198, 164, 101, 0.14); color: #E3C68C; }

/* --- À la une --- */
.section-une {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, #403C37 0%, #262422 58%, #1D1B1A 100%);
}
.section-une::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 640px 420px at 12% 0%, rgba(198, 164, 101, 0.13), transparent 68%);
  pointer-events: none;
}
.section-une .container { position: relative; z-index: 1; }
.une-scene { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 4.2rem; align-items: center; }
.une-propos .overline { color: var(--or-clair); }
.une-date {
  font-family: var(--font-garalde);
  font-style: italic;
  font-size: 1.02rem;
  color: rgba(198, 164, 101, 0.85);
  margin: 0.8rem 0 0;
}
.une-titre {
  font-family: var(--font-garalde);
  font-weight: 500;
  font-size: clamp(1.7rem, 2.5vw, 2.2rem);
  line-height: 1.26;
  color: var(--ivoire);
  margin: 1rem 0 0;
}
.une-titre em { font-style: italic; color: var(--or-clair); }
.une-texte {
  margin: 1.15rem 0 0;
  font-size: 0.93rem;
  line-height: 1.85;
  color: rgba(251, 250, 247, 0.72);
  text-align: justify;
}
.une-propos .btn { margin-top: 1.8rem; padding: 0.7rem 1.55rem; font-size: 0.6rem; }
.une-propos .btn--or:hover,
.une-propos .btn--or:focus-visible {
  background: rgba(198, 164, 101, 0.16);
  border-color: var(--or-clair);
  color: var(--or-clair);
}

/* La manchette : le Figaro composé comme une une de quotidien */
.une-presse { position: relative; text-align: center; }
.une-presse::before {
  content: '';
  position: absolute;
  inset: -30% -10%;
  background: radial-gradient(ellipse 60% 55% at 50% 42%, rgba(198, 164, 101, 0.1), transparent 70%);
  pointer-events: none;
}
.une-manchette {
  position: relative;
  font-family: var(--font-garalde);
  font-weight: 500;
  font-size: clamp(3.1rem, 4.6vw, 4.3rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  background: linear-gradient(120deg, #E3C68C 0%, #C6A465 45%, #9C7C38 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0;
}
.une-presse-filet {
  display: block;
  width: 130px;
  height: 1px;
  margin: 1.35rem auto 0;
  background: linear-gradient(90deg, transparent, rgba(227, 198, 140, 0.75), transparent);
}
.une-presse-sous {
  position: relative;
  margin: 1rem 0 0;
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(198, 164, 101, 0.85);
}

/* Le chemin de fer : le sommaire posé sous la une */
.une-sommaire {
  margin-top: 3.2rem;
  padding-top: 4.5rem;
  border-top: 1px solid rgba(198, 164, 101, 0.18);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.une-sommaire-item {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.85rem;
  padding: 0.4rem 0.2rem;
  text-decoration: none;
}
/* Le filet d'or qui se déploie sous le repère au survol — discret, à la manière de la maison */
.une-sommaire-item::before {
  content: '';
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: -0.2rem;
  height: 0.5px;
  background: linear-gradient(90deg, transparent, rgba(227, 198, 140, 0.7), transparent);
  transform: scaleX(0);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.une-sommaire-item:hover::before,
.une-sommaire-item:focus-visible::before { transform: scaleX(1); }
.une-sommaire-item:hover .une-nombre,
.une-sommaire-item:focus-visible .une-nombre { color: #E3C68C; }
.une-sommaire-item:hover .une-rang,
.une-sommaire-item:focus-visible .une-rang { filter: brightness(1.3); }
.une-sommaire-item + .une-sommaire-item { border-left: 1px solid rgba(198, 164, 101, 0.16); }
.une-rang {
  font-family: var(--font-garalde);
  font-style: italic;
  font-weight: 500;
  font-size: 1.4rem;
  transition: filter 0.45s ease;
  background: linear-gradient(120deg, #E3C68C, #9C7C38);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.une-nom { font-family: var(--font-garalde); font-weight: 500; font-size: 1.08rem; color: rgba(251, 250, 247, 0.93); white-space: nowrap; transition: color 0.45s ease; }
.une-nombre { font-family: var(--font-garalde); font-style: italic; font-size: 0.9rem; color: rgba(198, 164, 101, 0.8); white-space: nowrap; transition: color 0.45s ease; }
.une-sommaire-item::after {
  content: '\2192';
  font-size: 0.85rem;
  color: var(--or-clair);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.une-sommaire-item:hover .une-nom,
.une-sommaire-item:focus-visible .une-nom { color: #E3C68C; }
.une-sommaire-item:hover::after,
.une-sommaire-item:focus-visible::after { transform: translateX(4px); }
/* cascade des repères, pilotée par l'entrée du chemin de fer */
.une-sommaire .une-sommaire-item { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity 0.95s cubic-bezier(0.45, 0.05, 0.2, 1), transform 0.95s cubic-bezier(0.45, 0.05, 0.2, 1), color 0.45s ease; }
.une-sommaire.is-visible .une-sommaire-item { opacity: 1; transform: none; }
.une-sommaire.is-visible .une-sommaire-item:nth-of-type(1) { transition-delay: 0.2s; }
.une-sommaire.is-visible .une-sommaire-item:nth-of-type(2) { transition-delay: 0.45s; }
.une-sommaire.is-visible .une-sommaire-item:nth-of-type(3) { transition-delay: 0.7s; }

/* --- La recherche du journal --- */
.jx-recherche {
  /* Le clair du champ fond insensiblement vers la pierre de la section suivante : aucune césure. */
  background: linear-gradient(180deg, #FFFFFE 0%, #FBF9F3 28%, #F2EDE2 60%, #E7E2D7 100%);
  padding: 3.4rem 0 1.9rem;
}
.jx-recherche .reveal:nth-of-type(1) { transition-delay: 0.1s !important; }
.jx-recherche .reveal:nth-of-type(2) { transition-delay: 0.32s !important; }
.jx-recherche .container > .jx-suggestions.reveal { transition-delay: 0.54s !important; }
.jx-invite { text-align: center; margin-bottom: 1.7rem; }
.jx-invite .overline--signature { display: flex; justify-content: center; }
.jx-invite-phrase {
  font-family: var(--font-garalde);
  font-weight: 500;
  font-size: 1.62rem;
  color: #33302A;
  margin: 0.7rem 0 0;
}
.jx-invite-phrase em { font-style: italic; color: var(--or-profond); }
.jx-suggestions {
  margin: 1.05rem 0 0;
  text-align: center;
  font-family: var(--font-lineale);
  font-weight: 300;
  font-size: 0.82rem;
  color: rgba(87, 83, 74, 0.75);
}
.jx-suggestion {
  display: inline-block;
  margin: 0.25rem 0.15rem;
  padding: 0.3rem 0.85rem 0.28rem;
  border: 1px solid rgba(156, 124, 56, 0.32);
  border-radius: 999px;
  background: rgba(255, 254, 251, 0.7);
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.76rem;
  color: var(--or-profond);
  cursor: pointer;
  transition: border-color 0.4s ease, background-color 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.jx-suggestion:hover,
.jx-suggestion:focus-visible { border-color: var(--or-profond); background: rgba(198, 164, 101, 0.13); transform: translateY(-1px); }

.jx-champ {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  max-width: 620px;
  margin: 0 auto;
  padding: 0.8rem 1.5rem;
  background: #FFFEFB;
  border: 1px solid rgba(154, 124, 56, 0.32);
  border-radius: 999px;
  transition: border-color 0.45s ease, box-shadow 0.45s ease;
}
.jx-champ:focus-within { border-color: var(--or-profond); box-shadow: 0 10px 30px rgba(154, 124, 56, 0.12); }
.jx-loupe { width: 17px; height: 17px; flex: none; color: var(--or-profond); }
.jx-champ input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-lineale);
  font-weight: 300;
  font-size: 0.95rem;
  color: #33302A;
}
.jx-champ input::placeholder { color: rgba(87, 83, 74, 0.55); }
.jx-champ input::-webkit-search-cancel-button { -webkit-appearance: none; }
.jx-effacer {
  flex: none;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(198, 164, 101, 0.14);
  color: var(--or-profond);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.35s ease;
}
.jx-effacer:hover { background: rgba(198, 164, 101, 0.28); }
.jx-resultat {
  margin: 0.9rem 0 0;
  text-align: center;
  font-family: var(--font-garalde);
  font-style: italic;
  font-size: 0.98rem;
  color: var(--or-profond);
  min-height: 1.3em;
}

/* --- Les salons de lecture --- */
.jx-section { position: relative; overflow: hidden; padding: 4.2rem 0 4.6rem; background: var(--pierre, #EFEAE1); }
.jx-section--claire { background: linear-gradient(180deg, #FDFCF9 0%, #F7F3EB 100%); }
.jx-head { position: relative; }
.jx-head .overline--signature { font-size: 0.68rem; }
.jx-head h2 { margin-top: 0.55rem; }
.jx-head .acte-lien { margin-top: 1.2rem; }
.jx-rang {
  position: absolute;
  top: -2.2rem;
  right: -0.4rem;
  font-family: var(--font-garalde);
  font-style: italic;
  font-size: 7rem;
  line-height: 1;
  color: rgba(154, 124, 56, 0.12);
  pointer-events: none;
  margin: 0;
}
/* Les sous-rubriques : un intertitre au losange d'or, prolongé d'un filet */
.jx-groupe {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  margin: 3.1rem 0 0;
}
.jx-groupe:first-of-type { margin-top: 2.4rem; }
.jx-groupe-titre {
  position: relative;
  font-family: var(--font-garalde);
  font-style: italic;
  font-weight: 500;
  font-size: 1.38rem;
  color: #33302A;
  margin: 0 0 0 1.35rem;
  white-space: nowrap;
}
.jx-groupe-titre::before {
  content: '';
  position: absolute;
  left: -1.35rem;
  top: 50%;
  width: 7px;
  height: 7px;
  background: var(--or-clair);
  transform: translateY(-50%) rotate(45deg);
}
.jx-groupe-filet {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(156, 124, 56, 0.35), rgba(156, 124, 56, 0.04));
}
.jx-fleches { display: flex; gap: 0.5rem; }
.jx-fleche {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(156, 124, 56, 0.45);
  background: transparent;
  color: var(--or-profond);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.4s ease, border-color 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
}
.jx-fleche:hover:not(:disabled),
.jx-fleche:focus-visible:not(:disabled) { background: rgba(198, 164, 101, 0.12); border-color: var(--or-profond); transform: translateY(-1px); }
.jx-fleche:disabled { opacity: 0.22; cursor: default; }
.jx-grille {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3rem) / 3);
  gap: 1.5rem;
  margin-top: 0.35rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 14px 2px 30px;
  margin-bottom: -6px;
  scrollbar-width: none;
}
.jx-grille::-webkit-scrollbar { display: none; }
.jx-grille > .reveal { scroll-snap-align: start; }
.jx-grille > .reveal { display: flex; }
.jx-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.8rem 1.5rem 1.5rem;
  border-radius: 16px;
  text-decoration: none;
  background: linear-gradient(170deg, #FFFEFB 0%, #F8F4EC 100%);
  border: 1px solid rgba(154, 124, 56, 0.22);
  box-shadow: 0 14px 34px rgba(31, 45, 38, 0.06);
  overflow: hidden;
  transition: transform 0.7s cubic-bezier(0.19, 0.6, 0.27, 1), box-shadow 0.7s ease, border-color 0.7s ease;
}
.jx-carte:hover,
.jx-carte:focus-visible {
  transform: translateY(-4px) scale(1.014);
  box-shadow: 0 16px 44px rgba(31, 45, 38, 0.09), 0 6px 20px rgba(31, 45, 38, 0.06), 0 2px 8px rgba(31, 45, 38, 0.05);
  border-color: rgba(154, 124, 56, 0.45);
}
.jx-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1.05rem; }
.jx-chip {
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.52rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9C7C38;
  border: 1px solid rgba(156, 124, 56, 0.38);
  border-radius: 999px;
  padding: 0.34rem 0.7rem 0.3rem;
  white-space: nowrap;
}
.jx-date { font-family: var(--font-garalde); font-style: italic; font-size: 0.92rem; color: rgba(87, 83, 74, 0.75); white-space: nowrap; }
.jx-titre {
  font-family: var(--font-garalde);
  font-weight: 500;
  font-size: 1.16rem;
  line-height: 1.35;
  color: #33302A;
  margin: 0 0 0.7rem;
  transition: color 0.5s ease;
}
.jx-carte:hover .jx-titre { color: #9C7C38; }
.jx-extrait { font-size: 0.85rem; line-height: 1.8; text-align: justify; color: #57534A; margin: 0 0 1.25rem; flex: 1; }
.jx-carte .acte-lien { margin-top: auto; }
/* cascade par rangée */
.jx-grille > .reveal { transition-delay: 0.08s !important; }
.jx-grille > .reveal:nth-child(3n+2) { transition-delay: 0.28s !important; }
.jx-grille > .reveal:nth-child(3n) { transition-delay: 0.48s !important; }

/* balayage des surtitres + apparitions douces, comme la page honoraires */
.section-une .reveal .overline--signature,
.jx-section .reveal .overline--signature {
  clip-path: inset(-10% 105% -10% -5%);
  transition: clip-path 1.7s cubic-bezier(0.45, 0.05, 0.2, 1) 0.2s;
}
.section-une .reveal.is-visible .overline--signature,
.jx-section .reveal.is-visible .overline--signature {
  clip-path: inset(-10% -5% -10% -5%);
}
.jx-recherche .reveal, .section-une .reveal, .jx-section .reveal {
  transition: opacity 1.45s cubic-bezier(0.45, 0.05, 0.2, 1), transform 1.45s cubic-bezier(0.45, 0.05, 0.2, 1);
}
.jx-recherche .reveal:not(.is-visible), .section-une .reveal:not(.is-visible), .jx-section .reveal:not(.is-visible) {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
}
.jx-section .jx-head.reveal:not(.is-visible) { transform: translate3d(0, 36px, 0); }
.jx-section .jx-head.reveal { transition: opacity 1.7s cubic-bezier(0.45, 0.05, 0.2, 1), transform 1.7s cubic-bezier(0.45, 0.05, 0.2, 1); }

@media (max-width: 1100px) and (min-width: 901px) {
  .jx-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .jx-reperes { gap: 0.55rem; margin-top: 1.7rem; }
  .section-une { padding-top: 2.8rem; }
  .une-scene { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; align-items: start; }
  .une-titre { font-size: min(1.62rem, calc((100vw - 60px) * 0.079)); }
  .une-date { font-size: min(1.02rem, calc((100vw - 85px) * 0.0535)); }
  .une-texte { font-size: min(0.93rem, calc((100vw - 85px) * 0.048787)); }
  .une-propos .btn { display: table; margin-inline: auto; padding: 0.72rem 1.55rem; font-size: 0.62rem; }
  .une-presse { padding: 0.4rem 0 0.2rem; }
  .une-sommaire { margin-top: 2.4rem; padding-top: 0.8rem; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .une-sommaire-item { justify-content: flex-start; padding: 0.85rem 0.2rem; }
  .une-sommaire-item + .une-sommaire-item { border-left: none; border-top: 1px solid rgba(198, 164, 101, 0.14); }
  .une-nom { font-size: min(1.05rem, calc((100vw - 148px) * 0.0694)); }
  .une-nombre { margin-left: auto; }
  .jx-section { padding: 2.6rem 0 3rem; }
  .jx-rang { font-size: 4.4rem; top: -1.4rem; right: 0; }
  .jx-groupe { margin-top: 2.3rem; gap: 0.9rem; }
  .jx-groupe:first-of-type { margin-top: 1.7rem; }
  .jx-groupe-titre { font-size: min(1.32rem, calc((100vw - 110px) * 0.0725)); }
  .jx-grille { grid-auto-columns: min(86%, 330px); gap: 1.1rem; margin-top: 0.15rem; padding: 10px 2px 24px; }
  .jx-fleches { display: none; }
  .jx-recherche { padding: 2.4rem 0 1.5rem; }
  .jx-invite { margin-bottom: 1.35rem; }
  .jx-invite-phrase { font-size: min(1.45rem, calc((100vw - 60px) * 0.0715)); }
  .jx-suggestions { font-size: 0.78rem; }
  .jx-champ { padding: 0.7rem 1.15rem; }
  .jx-champ input { font-size: min(0.92rem, calc((100vw - 130px) * 0.052)); }
  .jx-resultat { font-size: 0.9rem; }

  .jx-carte { padding: 1.6rem 1.4rem 1.35rem; }
  .jx-titre { font-size: min(1.16rem, calc((100vw - 85px) * 0.060852)); }
  .jx-extrait { font-size: min(0.85rem, calc((100vw - 85px) * 0.0446)); }
  .jx-date { font-size: min(0.92rem, calc((100vw - 85px) * 0.048262)); }
  .jx-carte .acte-lien { font-size: 0.55rem; padding: 0.44rem 0.95rem 0.4rem; }
}

/* ---- Page honoraires : l'éventail des modes ---- */
.section-modes { padding-top: 3.4rem; }
.modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; margin-top: 3.05rem; max-width: 980px; margin-inline: auto; }
/* Gel fluide bureau : entre 901 et 1216px le conteneur est fluide ; les polices des cartes
   suivent la largeur au même rapport qu'au cap (1216) pour des retours à la ligne invariants. */
@media (min-width: 901px) and (max-width: 1216px) {
  .section-modes .mode-texte { font-size: min(0.9rem, calc((100vw - 211.2px) * 0.017324)); }
  .section-modes .mode-accroche { font-size: min(1.1rem, calc((100vw - 211.2px) * 0.020814)); }
  .section-modes .mode-vertu { font-size: min(1.74rem, calc((100vw - 211.2px) * 0.032923)); }
  .section-modes .mode-usage { font-size: min(0.97rem, calc((100vw - 211.2px) * 0.018354)); }
}
.mode {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.4rem 1.7rem 1.7rem;
  background: linear-gradient(170deg, #FFFEFB 0%, #F8F4EC 100%);
  border: 1px solid rgba(154, 124, 56, 0.22);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(31, 45, 38, 0.07);
  overflow: hidden;
  transition: transform 0.7s cubic-bezier(0.19, 0.6, 0.27, 1), box-shadow 0.7s ease, border-color 0.7s ease, background 0.6s ease;
}
.mode:hover { transform: translateY(-4px) scale(1.016); box-shadow: 0 26px 52px rgba(31, 45, 38, 0.14), 0 10px 24px rgba(31, 45, 38, 0.12), 0 2px 8px rgba(31, 45, 38, 0.08); border-color: rgba(154, 124, 56, 0.45); }
.modes > .reveal { transition-delay: 0.06s !important; }
.modes > .reveal:nth-child(2) { transition-delay: 0.22s !important; }
.modes > .reveal:nth-child(3) { transition-delay: 0.38s !important; }
.modes > .reveal:nth-child(4) { transition-delay: 0.54s !important; }
/* Bureau : les cartes se rejoignent au centre — la colonne gauche vient de la gauche,
   la colonne droite vient de la droite, toutes en même temps. */
@media (min-width: 901px) {
  .section-modes .modes > .reveal:not(.is-visible) { transform: translate3d(-46px, 0, 0); }
  .section-modes .modes > .reveal:nth-child(even):not(.is-visible) { transform: translate3d(46px, 0, 0); }
  .modes > .reveal,
  .modes > .reveal:nth-child(2),
  .modes > .reveal:nth-child(3),
  .modes > .reveal:nth-child(4) { transition-delay: 0.15s !important; }
}
.modes > .reveal { display: flex; }
.mode { width: 100%; }
.mode::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #9C7C38, rgba(198, 164, 101, 0.2));
  transform: scaleX(0.38);
  transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mode:hover::before { transform: scaleX(1); }
.mode-usage {
  margin: 2rem 0 0;
  font-family: var(--font-garalde);
  font-style: italic;
  font-size: 0.97rem;
  color: #9C7C38;
}
.mode-usage::before {
  content: '\2014';
  color: var(--or-clair);
  padding-right: 0.55rem;
  font-style: normal;
}


.mode-vertu { transition: color 0.5s ease; }
.mode:hover .mode-vertu { color: #9C7C38; }
.mode-num {
  font-family: var(--font-garalde);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--or-clair);
  margin: 0 0 0.9rem;
}
.mode-entete { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; }
.mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.92rem;
  border: 1px solid rgba(154, 124, 56, 0.38);
  border-radius: 999px;
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #9C7C38;
  white-space: nowrap;
}
.mode-chip::before {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--or-clair);
  transform: rotate(45deg);
  flex: none;
}
.mode-rang {
  position: absolute;
  top: 0.9rem;
  right: 1.15rem;
  font-family: var(--font-garalde);
  font-style: italic;
  font-size: 5.6rem;
  line-height: 1;
  color: rgba(154, 124, 56, 0.09);
  pointer-events: none;
  transition: color 0.8s ease;
}
.mode:hover .mode-rang { color: rgba(154, 124, 56, 0.16); }
.mode-vertu {
  font-family: var(--font-garalde);
  font-weight: 500;
  font-style: italic;
  font-size: 1.74rem;
  line-height: 1.2;
  margin: 1.1rem 0 1.1rem;
  color: #33302A;
}
.mode-accroche {
  font-family: var(--font-garalde);
  font-size: 1.1rem;
  line-height: 1.5;
  color: #33302A;
  margin: 0 0 0.85rem;
  white-space: nowrap;
}
.mode-texte {
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.85;
  text-align: justify;
  color: #57534A;
  margin: 0;
}
@media (max-width: 900px) {
  .section-modes { padding-top: 2.3rem; }
  .section-modes .section-head h2.h2-une-ligne--longue { font-size: min(1.75rem, calc((100vw - 38px) * 0.0739)); white-space: nowrap; }
  .modes { grid-template-columns: minmax(0, 1fr); margin-top: 2.1rem; }
  .modes > .reveal { max-width: 352px; margin-inline: auto; width: 100%; }
  .mode { padding: 1.9rem 1.4rem 1.25rem; }
  .mode-chip { font-size: 0.52rem; }
  .mode-accroche { font-size: min(0.92rem, calc((100vw - 85px) * 0.048262)); }
  .mode-texte { font-size: min(0.831rem, calc((100vw - 85px) * 0.0436)); }
  .mode-vertu { font-size: min(1.5rem, calc((100vw - 85px) * 0.078689)); }
  .mode-usage { font-size: min(0.88rem, calc((100vw - 85px) * 0.046164)); }
}

/* ---- Page honoraires : le manifeste ---- */
.section-manifeste { position: relative; overflow: hidden; }
.section-conviction { position: relative; overflow: hidden; }

.manifeste { max-width: 780px; margin-inline: auto; text-align: center; position: relative; z-index: 1; }
.manifeste-citation {
  font-family: var(--font-garalde);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.35;
  color: var(--ivoire);
  margin: 1.4rem 0 0;
}
.manifeste-citation em { font-style: italic; color: var(--or-clair); }
.manifeste-paraphe { width: min(300px, 62vw); height: auto; margin-top: 1.2rem; }
.manifeste-texte {
  margin: 1.6rem auto 0;
  max-width: 640px;
  font-size: 0.95rem;
  line-height: 1.9;
  color: rgba(251, 250, 247, 0.75);
  text-align: justify;
}
.criteres {
  list-style: none;
  margin: 2.1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem 1.5rem;
}
.criteres li {
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(251, 250, 247, 0.8);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.05rem;
  border: 1px solid rgba(198, 164, 101, 0.38);
  border-radius: 999px;
}

.conviction { position: relative; z-index: 1; display: grid; grid-template-columns: 1.14fr 0.86fr; gap: 6rem; align-items: center; }
.conviction > div:first-child { min-width: 0; }

.conviction-citation {
  position: relative;
  font-family: var(--font-garalde);
  font-weight: 400;
  font-size: min(2.4rem, calc((100vw - 230px) * 0.0312));
  width: max-content;
  max-width: calc(100% + 3.6rem);
  line-height: 1.3;
  color: #33302A;
  margin: 1.05rem 0 0;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .conviction-citation { white-space: normal; width: auto; max-width: 100%; }
}
.conviction-citation .guillemet { color: var(--or-clair); }
.conviction-citation em {
  font-style: italic;
  color: #9C7C38;
  background-image: linear-gradient(90deg, #C6A465, rgba(198, 164, 101, 0.25));
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 94%;
  padding-bottom: 3px;
}
.conviction-texte {
  margin: 1.7rem 0 0;
  font-size: 0.93rem;
  line-height: 1.9;
  color: rgba(51, 48, 42, 0.78);
  text-align: justify;
}
.conviction-texte strong { font-weight: 500; }
.conviction-criteres { position: relative; display: grid; gap: 1.05rem; margin: 0; padding: 0 0 0 1.9rem; list-style: none; }
.conviction-criteres::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: linear-gradient(180deg, rgba(154, 124, 56, 0.55), rgba(154, 124, 56, 0.06));
  transform-origin: top center;
  transition: transform 1.7s cubic-bezier(0.45, 0.05, 0.2, 1) 0.1s;
}
.conviction-criteres.reveal:not(.is-visible) { opacity: 1; transform: none; }
.conviction-criteres.reveal:not(.is-visible)::before { transform: scaleY(0); }
.critere::before {
  content: '';
  position: absolute;
  left: calc(-1.9rem + 5px);
  top: 50%;
  width: 7px;
  height: 7px;
  background: var(--or-clair);
  transform: translateY(-50%) rotate(45deg);
}
.section-conviction .conviction-criteres .critere.reveal {
  transition: opacity 1.05s cubic-bezier(0.45, 0.05, 0.2, 1), transform 1.05s cubic-bezier(0.45, 0.05, 0.2, 1);
}
.section-conviction .conviction-criteres .critere.reveal:not(.is-visible) { opacity: 0; transform: translate3d(0, -22px, 0); }
.conviction-criteres .critere.reveal { transition-delay: 0.1s !important; }
.conviction-criteres .critere.reveal:nth-child(2) { transition-delay: 0.5s !important; }
.conviction-criteres .critere.reveal:nth-child(3) { transition-delay: 0.9s !important; }
.conviction-criteres .critere.reveal:nth-child(4) { transition-delay: 1.3s !important; }
@media (min-width: 901px) {
  .conviction-criteres .critere.reveal { transition-delay: 0.08s !important; }
  .conviction-criteres .critere.reveal:nth-child(2) { transition-delay: 0.42s !important; }
  .conviction-criteres .critere.reveal:nth-child(3) { transition-delay: 0.76s !important; }
  .conviction-criteres .critere.reveal:nth-child(4) { transition-delay: 1.1s !important; }
  .conviction-criteres::before { transition-duration: 1.5s; }
}
.critere {
  position: relative;
  display: flex;
  gap: 1.05rem;
  align-items: baseline;
  padding: 1.15rem 1.4rem;
  border: 1px solid rgba(154, 124, 56, 0.28);
  border-radius: 15px;
  background: linear-gradient(170deg, #FFFEFB 0%, #F8F4EC 100%);
  box-shadow: 0 10px 26px rgba(31, 45, 38, 0.06);
  transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.5s ease;
}
.critere > * { transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); }
.critere:hover { border-color: rgba(154, 124, 56, 0.55); box-shadow: 0 18px 38px rgba(31, 45, 38, 0.1); }
.critere:hover > * { transform: translateX(4px); }
.critere-num {
  font-family: var(--font-garalde);
  font-style: italic;
  font-size: 1.28rem;
  flex: none;
  background: linear-gradient(120deg, #E3C68C, #9C7C38);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.critere-nom {
  display: block;
  font-family: var(--font-lineale);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #3A362F;
}
.critere-det { display: block; margin-top: 0.3rem; font-size: 0.84rem; line-height: 1.65; color: rgba(58, 54, 47, 0.68); }
@media (max-width: 900px) {
  .conviction { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
  .section-conviction { padding-top: 2.8rem; padding-bottom: 3.4rem; }
  .section-conviction .overline--signature { display: flex; justify-content: center; }
  .conviction-citation { font-size: min(1.95rem, calc((100vw - 62px) * 0.0793)); white-space: normal; text-align: center; }
  .critere { padding: 0.95rem 1.1rem; }
  .critere-num { font-size: 1.14rem; }
  .critere-nom { font-size: 0.66rem; }
  .critere-det { font-size: 0.78rem; }
}
.section-questions-honoraires { position: relative; overflow: hidden; }
.section-questions-honoraires::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 700px 460px at 8% 0%, rgba(198, 164, 101, 0.1), transparent 68%),
    radial-gradient(ellipse 600px 420px at 100% 100%, rgba(198, 164, 101, 0.06), transparent 70%);
  pointer-events: none;
}
.section-questions-honoraires .container { position: relative; z-index: 1; max-width: none; width: 100%; padding-inline: 2.4rem; }
body:has(.section-releve) .passerelle--sobre .passerelle-phrase { font-size: 1.72rem; }
body:has(.section-releve) .passerelle--sobre .passerelle-phrase .passerelle-l1 { font-size: 1em; }
@media (max-width: 900px) {
  body:has(.section-releve) .passerelle--sobre .passerelle-phrase { font-size: min(1.26rem, calc((100vw - 33px) * 0.0545)); }
  body:has(.section-releve) .passerelle--sobre .passerelle-phrase .passerelle-l1 { font-size: 1em; }
}
.qh-fil { position: relative; margin-top: 3.4rem; padding: 0.4rem 0; }
.qh-fil::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, rgba(198, 164, 101, 0.6), rgba(198, 164, 101, 0.08));
  transform-origin: top center;
  transition: transform 2.3s cubic-bezier(0.45, 0.05, 0.2, 1) 0.1s;
}
.qh-fil.reveal:not(.is-visible) { opacity: 1; transform: none; }
.qh-fil.reveal:not(.is-visible)::before { transform: scaleY(0); }
.qh-noeud { position: relative; width: calc(50% - 3.4rem); }
.qh-noeud + .qh-noeud { margin-top: 2.5rem; }
.qh-noeud:nth-of-type(odd) { margin-right: auto; }
.qh-noeud:nth-of-type(even) { margin-left: auto; }
.qh-noeud::before {
  content: '';
  position: absolute;
  top: 2.4rem;
  width: 9px;
  height: 9px;
  background: var(--or-clair);
  transform: rotate(45deg);
  z-index: 1;
}
.qh-noeud:nth-of-type(odd)::before { right: calc(-3.4rem - 4.5px); }
.qh-noeud:nth-of-type(even)::before { left: calc(-3.4rem - 4.5px); }
.qh-noeud::after {
  content: '';
  position: absolute;
  top: calc(2.4rem + 4px);
  width: 3.4rem;
  height: 1px;
  transition: width 0.7s ease;
}
.qh-noeud:hover::after { width: calc(3.4rem - 9px); }
.qh-noeud:nth-of-type(odd)::after { right: -3.4rem; background: linear-gradient(90deg, rgba(198, 164, 101, 0.12), rgba(198, 164, 101, 0.45)); }
.qh-noeud:nth-of-type(even)::after { left: -3.4rem; background: linear-gradient(90deg, rgba(198, 164, 101, 0.45), rgba(198, 164, 101, 0.12)); }
.qh-item {
  position: relative;
  padding: 2.1rem 2.3rem 1.9rem;
  border-radius: 18px;
  border: 1px solid rgba(198, 164, 101, 0.42);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022));
  transition: transform 0.7s cubic-bezier(0.19, 0.6, 0.27, 1), box-shadow 0.7s ease, border-color 0.7s ease;
}
.qh-item:hover { transform: translateY(-4px) scale(1.014); box-shadow: 0 22px 46px rgba(15, 23, 19, 0.35); border-color: rgba(198, 164, 101, 0.68); }

.qh-item h3 {
  font-family: var(--font-garalde);
  font-weight: 500;
  font-size: 1.32rem;
  line-height: 1.35;
  color: var(--ivoire);
  margin: 0;
}

.qh-item p {
  margin: 1.15rem 0 0;
  padding-left: 1.15rem;
  border-left: 1px solid rgba(198, 164, 101, 0.4);
  font-size: 0.91rem;
  line-height: 1.85;
  color: rgba(251, 250, 247, 0.76);
  text-align: justify;
}
.qh-item .acte-lien { margin-top: 1.35rem; color: var(--or-clair); border-color: rgba(198, 164, 101, 0.42); }
.qh-item .acte-lien:hover,
.qh-item .acte-lien:focus-visible { border-color: var(--or-clair); background: rgba(198, 164, 101, 0.14); color: #E3C68C; }
.section-questions-honoraires .qh-noeud.reveal:not(.is-visible) { opacity: 0; transform: translate3d(-34px, 0, 0); }
.section-questions-honoraires .qh-noeud.reveal:nth-of-type(even):not(.is-visible) { transform: translate3d(34px, 0, 0); }
.section-questions-honoraires .qh-noeud.reveal { transition: opacity 1.45s cubic-bezier(0.45, 0.05, 0.2, 1), transform 1.45s cubic-bezier(0.45, 0.05, 0.2, 1); }
.section-questions-honoraires .qh-noeud.reveal:nth-of-type(1) { transition-delay: 0.15s !important; }
.section-questions-honoraires .qh-noeud.reveal:nth-of-type(2) { transition-delay: 0.38s !important; }
.section-questions-honoraires .qh-noeud.reveal:nth-of-type(3) { transition-delay: 0.55s !important; }
.section-questions-honoraires .qh-noeud.reveal:nth-of-type(4) { transition-delay: 0.58s !important; }
@media (max-width: 900px) {
  .section-questions-honoraires .container { padding-inline: 17px; }
  .qh-fil::before { left: 8px; margin-left: 0; width: 1px; }
  .qh-noeud { width: auto; margin-left: 1.9rem !important; margin-right: 0 !important; }
  .qh-noeud + .qh-noeud { margin-top: 1.5rem; }
  .qh-noeud::before { left: calc(-1.9rem + 6px) !important; right: auto !important; width: 5px; height: 5px; top: 1.9rem; }
  .qh-noeud::after { display: none; }
  .qh-item { padding: 1.6rem 1.4rem; border-color: rgba(198, 164, 101, 0.42); }
  .section-questions-honoraires { padding-top: 2.8rem; }
  .qh-item h3 { font-size: min(1.12rem, calc((100vw - 149.6px) * 0.074542)); text-align: justify; }
  .qh-item p { font-size: min(0.806rem, calc((100vw - 168px) * 0.058108)); }
  .qh-item .acte-lien { font-size: 0.55rem; padding: 0.44rem 0.95rem 0.4rem; }
  .section-questions-honoraires .qh-noeud.reveal:not(.is-visible) { transform: translate3d(0, 26px, 0) !important; }
}

}

}
.section-releve .reveal .overline--signature,
.section-modes .reveal .overline--signature,
.section-conviction .reveal .overline--signature,
.section-questions-honoraires .reveal .overline--signature {
  clip-path: inset(-10% 105% -10% -5%);
  transition: clip-path 1.7s cubic-bezier(0.45, 0.05, 0.2, 1) 0.2s;
}
.section-releve .reveal.is-visible .overline--signature,
.section-modes .reveal.is-visible .overline--signature,
.section-conviction .reveal.is-visible .overline--signature,
.section-questions-honoraires .reveal.is-visible .overline--signature {
  clip-path: inset(-10% -5% -10% -5%);
}
.section-modes .section-head.reveal:not(.is-visible) { transform: translate3d(0, 36px, 0); }
.section-modes .section-head.reveal { transition: opacity 1.7s cubic-bezier(0.45, 0.05, 0.2, 1), transform 1.7s cubic-bezier(0.45, 0.05, 0.2, 1); }
.section-releve .reveal, .section-modes .reveal, .section-conviction .reveal {
  transition: opacity 1.45s cubic-bezier(0.45, 0.05, 0.2, 1), transform 1.45s cubic-bezier(0.45, 0.05, 0.2, 1);
}
.section-releve .reveal:not(.is-visible), .section-modes .reveal:not(.is-visible), .section-conviction .reveal:not(.is-visible) {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
}
.pile-questions { display: grid; gap: 1.15rem; margin-top: 2.3rem; }
.criteres li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--or-clair);
  transform: rotate(45deg);
  flex: none;
}
@media (max-width: 900px) {
  .section-methode .methode-ecrin, .section-questions-cadran .methode-ecrin { max-width: 352px; margin-inline: auto; }
  .section-methode .methode-ecrin p { font-size: min(0.9rem, calc((100vw - 80px) * 0.04645)); }
  .section-questions-cadran .methode-ecrin p { font-size: min(0.9rem, calc((100vw - 101px) * 0.04983)); }
  .section-methode .methode-ecrin h3 { font-size: min(1.24rem, calc((100vw - 80px) * 0.064)); }
  .section-questions-cadran .methode-ecrin h3 { font-size: min(1.24rem, calc((100vw - 101px) * 0.068655)); }
}
.cadran-pupitre:has(.calendrier-od:not([hidden])) { position: relative; z-index: 90; }
.champ-date-enveloppe:has(> .calendrier-od:not([hidden])) { z-index: 95; }
.cadran-pupitre .simulateur-bouton { margin-top: 0.9rem; width: 100%; border-radius: 999px; min-height: 47px; display: inline-flex; align-items: center; justify-content: center; }
.cadran-pupitre .simulateur-bouton:hover,
.cadran-pupitre .simulateur-bouton:focus-visible {
  border-color: var(--or-clair);
  color: var(--or-clair);
  background: rgba(198, 164, 101, 0.12);
}
.cadran-gages {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  padding: 0;
  margin: 1.4rem 0 0;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(251, 250, 247, 0.55);
}
.cadran-gages li { display: flex; align-items: center; gap: 0.6rem; }
.cadran-gages li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  background: linear-gradient(135deg, #EAD397 0%, #C6A465 60%, #8F6F2E 100%);
  transform: rotate(45deg);
}
.cadran-verdict {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.6rem 2.5rem;
  border-radius: 22px;
  border: 1px solid rgba(198, 164, 101, 0.55);
  background:
    radial-gradient(30rem 20rem at 84% 0%, rgba(198, 164, 101, 0.14), transparent 58%),
    linear-gradient(165deg, #2B2825 0%, #221F1D 55%, #171615 100%);
  box-shadow: 0 0 0 1px rgba(198, 164, 101, 0.16), 0 0 52px rgba(198, 164, 101, 0.16), 0 30px 70px rgba(0, 0, 0, 0.45);
}
.cadran-sceau {
  position: absolute;
  right: -3.2rem;
  bottom: -3.4rem;
  width: 15rem;
  opacity: 0.07;
  pointer-events: none;
}
.cadran-sceau img { width: 100%; height: auto; display: block; }
.cadran-attente { position: relative; z-index: 1; text-align: center; padding: 1rem 0.4rem; }
.cadran-attente .overline { color: var(--or-clair); }
.cadran-attente-texte {
  max-width: 24em;
  margin: 1.1rem auto 0;
  font-size: 0.95rem;
  line-height: 1.85;
  color: rgba(251, 250, 247, 0.78);
}
.cadran-attente-filet {
  display: block;
  width: 4.5rem;
  height: 1px;
  margin: 1.6rem auto 0;
  background: linear-gradient(90deg, rgba(198, 164, 101, 0), rgba(198, 164, 101, 0.8), rgba(198, 164, 101, 0));
}
.cadran-verdict .simulateur-resultat {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.cadran-verdict .simulateur-resultat .overline { color: var(--or-clair); margin-bottom: 0.9rem; }
.cadran-verdict .simulateur-resultat-intro { color: rgba(251, 250, 247, 0.8); }
.cadran-verdict .simulateur-resultat-date,
.cadran-pupitre .simulateur-resultat-date {
  font-family: var(--font-garalde);
  font-style: italic;
  font-size: 2.05rem;
  line-height: 1.25;
  color: var(--or-clair);
  margin-top: 0.7rem;
}
.cadran-verdict .simulateur-resultat-note { color: rgba(251, 250, 247, 0.66); margin-top: 2.1rem; text-align: justify; }
.cadran-verdict .verdict-actions .simulateur-verifier { color: var(--or-clair); border-color: rgba(198, 164, 101, 0.6); font-size: 0.64rem; }
.cadran-avertissement {
  max-width: 62rem;
  margin: 2.2rem auto 0;
  font-size: 0.86rem;
  line-height: 1.9;
  text-align: justify;
  color: rgba(251, 250, 247, 0.62);
}
.cadran-avertissement strong { font-weight: 500; color: #B3904E; }
.section-methode { padding: 5rem 0 4.6rem; }
.methode-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
  margin-top: 2.6rem;
}
.methode-ecrin {
  position: relative;
  padding: 1.9rem 1.7rem 1.8rem;
  border: 1px solid rgba(198, 164, 101, 0.38);
  border-top: 2px solid var(--or-clair);
  background: linear-gradient(168deg, #FFFFFF 0%, #FBFAF7 55%, #F5F1E9 100%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease, border-color 0.5s ease;
}
.methode-ecrin::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(198, 164, 101, 0.16);
  pointer-events: none;
}
.methode-ecrin:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(31, 45, 38, 0.12); border-color: var(--or-profond); }
.methode-num {
  font-family: var(--font-garalde);
  font-style: italic;
  font-weight: 300;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--or-profond);
}
.methode-ecrin h3 {
  font-family: var(--font-garalde);
  font-size: 1.24rem;
  margin-top: 0.6rem;
}
.methode-ecrin p {
  margin-top: 0.85rem;
  font-size: 0.92rem;
  line-height: 1.8;
  text-align: justify;
  color: rgba(31, 45, 38, 0.8);
}
/* Questions du simulateur : verre fumé affleurant — la modernité par la retenue.
   Une surface à peine plus claire que la scène, un simple cheveu d'or, un marqueur
   discret devant la question. Ni liseré épais, ni cadre gravé. */
.section-questions-cadran .methode-ecrin {
  border: 1px solid rgba(234, 211, 151, 0.2);
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.028) 100%);
  padding: 2rem 1.9rem 1.9rem;
}
.section-questions-cadran .methode-ecrin::after {
  display: block;
  inset: 7px;
  border: 1px solid rgba(234, 211, 151, 0.14);
  border-radius: 12px;
}
.section-questions-cadran .methode-ecrin:hover {
  transform: translateY(-3px);
  border-color: rgba(234, 211, 151, 0.5);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.04) 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}
.section-questions-cadran .methode-ecrin h3 {
  position: relative;
  padding-left: 1.05rem;
  color: var(--ivoire);
}
.section-questions-cadran .methode-ecrin h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 6px;
  height: 6px;
  background: linear-gradient(135deg, #EAD397 0%, #C6A465 60%, #8F6F2E 100%);
  transform: rotate(45deg);
}
.section-questions-cadran .methode-ecrin p { color: rgba(251, 250, 247, 0.72); }
.section-questions-cadran {
  position: relative;
  overflow: hidden;
  padding: 4.6rem 0 5rem;
}
/* Le monogramme veille derrière le titre, comme sur les sections de l'accueil */
.section-questions-cadran::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  height: 353px;
  background: url("/assets/logo/OD-monogramme-or-clair.svg") no-repeat center / contain;
  opacity: 0.07;
  pointer-events: none;
}
.section-questions-cadran {
  background:
    radial-gradient(50rem 34rem at 92% 0%, rgba(198, 164, 101, 0.14), transparent 60%),
    radial-gradient(44rem 30rem at 4% 100%, rgba(198, 164, 101, 0.09), transparent 62%),
    linear-gradient(170deg, #47433F 0%, var(--anthracite) 48%, #2C2A28 100%);
  border-top: 1px solid rgba(198, 164, 101, 0.35);
  border-bottom: 1px solid rgba(198, 164, 101, 0.35);
}
.questions-cadran {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem;
  max-width: 62rem;
  margin: 2.6rem auto 0;
}
.verdict-jours {
  display: inline-block;
  margin-top: 1.1rem;
  padding: 0.5rem 1.15rem;
  border: 1px solid rgba(198, 164, 101, 0.55);
  border-radius: 999px;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or-clair);
  background: rgba(198, 164, 101, 0.09);
}
.verdict-jours--urgent { border-color: #EAD397; box-shadow: 0 0 16px rgba(198, 164, 101, 0.4); }
.verdict-jours--depasse {
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.85rem;
  line-height: 1.65;
  border-radius: 14px;
  padding: 0.75rem 1.05rem;
  color: #EAD397;
  border-color: rgba(234, 211, 151, 0.45);
}
.verdict-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.7rem; }
.verdict-actions .btn { margin-top: 0; }
.cadran-verdict .verdict-actions .verdict-agenda { color: rgba(251, 250, 247, 0.85); border-color: rgba(251, 250, 247, 0.35); font-size: 0.64rem; }
.cadran-verdict .verdict-actions .verdict-agenda:hover { color: var(--or-clair); border-color: var(--or-clair); }
.cadran-rappel { margin-top: 0.8rem; font-size: 0.82rem; font-style: italic; color: var(--or-clair); }
.methode-grille--quatre { grid-template-columns: repeat(2, 1fr); max-width: 62rem; margin-inline: auto; }
/* --- La chorégraphie de la salle des calculs : les deux écrins convergent, la méthode
   monte en file — le velours maison, calibré. ------------------------------------------- */
.section-cadran .cadran-pupitre.reveal,
.section-cadran .cadran-verdict.reveal,
.section-cadran .cadran-avertissement.reveal {
  transition-duration: 2.6s;
  transition-timing-function: cubic-bezier(0.45, 0.05, 0.2, 1);
}
.section-cadran .cadran-pupitre.reveal:not(.is-visible) { opacity: 0; transform: translate3d(-46px, 0, 0); }
.section-cadran .cadran-verdict.reveal { transition-delay: 0.35s; }
.section-cadran .cadran-verdict.reveal:not(.is-visible) { opacity: 0; transform: translate3d(46px, 0, 0); }
.section-cadran .cadran-avertissement.reveal { transition-delay: 0.5s; transition-duration: 2s; }
.section-cadran .cadran-avertissement.reveal:not(.is-visible) { opacity: 0; transform: none; }
.methode-grille > .reveal,
.questions-cadran > .reveal {
  transition-duration: 2.4s;
  transition-timing-function: cubic-bezier(0.45, 0.05, 0.2, 1);
}
.methode-grille > .reveal:not(.is-visible),
.questions-cadran > .reveal:not(.is-visible) { opacity: 0; transform: translate3d(0, 40px, 0); }
.methode-grille > .reveal:nth-child(2), .questions-cadran > .reveal:nth-child(2) { transition-delay: 0.2s; }
.methode-grille > .reveal:nth-child(3) { transition-delay: 0.4s; }
.methode-grille > .reveal:nth-child(4) { transition-delay: 0.6s; }

@media (max-width: 900px) {
  .section-cadran { padding: 3rem 0 2.8rem; }
  .cadran { grid-template-columns: 1fr; gap: 1.1rem; }
  .cadran-pupitre, .cadran-verdict { padding: 1.9rem 1.7rem 1.8rem; }
  .cadran-pupitre .simulateur-champ label { font-size: min(0.86rem, calc((100vw - 95px) * 0.0425)); white-space: nowrap; letter-spacing: 0; }
  .cadran-pupitre .simulateur-champ .simulateur-etiquette { font-size: min(0.86rem, calc((100vw - 95px) * 0.0425)); white-space: nowrap; letter-spacing: 0; }
  .cadran-pupitre .choix-pilule { font-size: min(0.98rem, calc((100vw - 60px) * 0.052)); white-space: nowrap; }
  .cadran-gages { font-size: 0.57rem; }
  .cadran-verdict .verdict-actions .simulateur-verifier,
  .cadran-verdict .verdict-actions .verdict-agenda { font-size: 0.56rem; padding-left: 0.5rem; padding-right: 0.5rem; white-space: nowrap; }
  .section-questions-cadran .methode-ecrin h3 { text-align: justify; }
  .cadran-titre { font-size: 1.62rem; }
  .cadran-lede { font-size: 0.9rem; }
  .cadran-verdict { min-height: 15rem; }
  .cadran-verdict .simulateur-resultat-date,
  .cadran-pupitre .simulateur-resultat-date { font-size: 1.42rem; }
  .cadran-avertissement { margin-top: 1.6rem; font-size: 0.8rem; }
  .section-methode { padding: 3.2rem 0 3rem; }
  .methode-grille { grid-template-columns: 1fr; gap: 0.85rem; margin-top: 1.7rem; }
  .methode-ecrin { padding: 1.5rem 1.25rem 1.4rem; }
  .methode-ecrin p { font-size: 0.9rem; }
  .section-questions-cadran { padding: 1.9rem 0 3.2rem; }
  .section-questions-cadran::before { width: 185px; height: 272px; top: 1.1rem; }
  .questions-cadran { grid-template-columns: 1fr; gap: 0.85rem; margin-top: 1.7rem; }
  .methode-grille--quatre { grid-template-columns: 1fr; }
  .verdict-actions { flex-direction: column; align-items: stretch; }
  .verdict-actions .btn { text-align: center; }
  .verdict-jours { font-size: 0.7rem; }
}

/* --- Grande FAQ, téléphone : la cadence maison ---------------------------------------------
   Sommaire, titres et questions sortent du système général : un orchestrateur (page FAQ)
   les fait naître un par un, dans l'ordre de lecture, en fondu velours. ------------------- */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  main .section-registre-faq .reveal-cadence,
  main .faq-sommaire > a.reveal-cadence {
    opacity: 0;
    transition: opacity 2.4s cubic-bezier(0.45, 0.05, 0.2, 1), transform 2.4s cubic-bezier(0.45, 0.05, 0.2, 1);
  }
  main .faq-ecrins > .reveal-cadence { transform: translate3d(0, 26px, 0); }
  main .faq-sommaire > a.reveal-cadence,
  main .section-registre-faq .chapitre-faq.reveal-cadence { transform: translate3d(-34px, 0, 0); }
  main .section-registre-faq .reveal-cadence.est-nee,
  main .faq-sommaire > a.reveal-cadence.est-nee { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* --- Texte alternatif selon l'écran : bureau par défaut, mobile sous 900px --------------- */
.mot-mobile { display: none; }
@media (max-width: 900px) {
  .mot-mobile { display: inline; }
  .mot-bureau { display: none; }
}
/* --- Titres à ligne unique garantie sur téléphone : le corps suit la largeur de l'écran --- */
@media (max-width: 900px) {
  .section-head h2.h2-une-ligne { font-size: min(1.85rem, calc((100vw - 38px) * 0.082)); }
  .jx-head h2.h2-une-ligne { font-size: min(1.78rem, calc((100vw - 40px) * 0.0705)); }
  .section-head h2.h2-une-ligne--longue { font-size: min(1.85rem, calc((100vw - 38px) * 0.063)); }
  .jx-head h2.h2-une-ligne--longue { font-size: min(1.78rem, calc((100vw - 40px) * 0.0705)); }
  .diptyque-nuit h2.h2-ajuste { font-size: min(1.78rem, calc((100vw - 43px) * 0.0815)); }
  .page-hero--expertise h1.h1-une-ligne { font-size: min(2.25rem, calc((100vw - 22px) * 0.0985)); }
  .page-hero--expertise h1.h1-une-ligne--long { font-size: min(2.25rem, calc((100vw - 22px) * 0.0885)); }
}

/* --- Article : l'apparition feutrée du fil au defilement (telephone et bureau) ------------ */
.jart-app {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 1.15s cubic-bezier(0.25, 0.1, 0.2, 1), transform 1.15s cubic-bezier(0.25, 0.1, 0.2, 1);
}
.jart-app--la { opacity: 1; transform: none; }

/* --- Article : aucun voile pour qui prefere l'immobilite ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .jart-app { opacity: 1; transform: none; transition: none; }
}

/* --- Contact : la clause de consentement s'aligne au cordeau (bureau et telephone) -------- */
.capsules-consent label { text-align: justify; }

/* --- Contact, telephone : le sceau d'envoi se fait plus discret --------------------------- */
@media (max-width: 900px) {
  .btn.capsules-sceau { font-size: 0.64rem; padding: 0.56rem 1.35rem; letter-spacing: 0.12em; }
}

/* --- iPhone : Safari ne gonfle plus aucun bloc de texte — chaque police garde exactement
   la taille dessinee dans la feuille (puces et paragraphes a l'unisson). ------------------ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* --- Invitation de fin d'article, telephone : l'en-tete se fait murmure ------------------- */
@media (max-width: 900px) {
  .invitation__coeur .overline { font-size: 0.53rem; letter-spacing: 0.16em; }
  .invitation__coeur h2 { font-size: min(1.8rem, calc((100vw - 77px) * 0.092)); }
  .invitation__coeur .btn { font-size: 0.64rem; padding: 0.56rem 1.35rem; letter-spacing: 0.12em; }
  .invitation__coeur .invitation__note { font-size: 0.54rem; }
}

/* --- Invitation de fin d'article, bureau : la note d'honoraires en retrait ---------------- */
@media (min-width: 901px) {
  .invitation__coeur .invitation__note { font-size: 0.62rem; }
}

/* --- Articles du journal, bureau : les titres de chapitres reprennent de la voix ---------- */
@media (min-width: 1024px) {
  .jart-corps h2 { font-size: 1.7rem; }
}

/* --- Articles du journal : les listes des chapitres intermediaires retrouvent le tiret or - */
.jart-corps > ul { list-style: none; margin: 1.2rem 0; }
.jart-corps > ul li { position: relative; padding-left: 1.6rem; margin-bottom: 0.7rem; }
.jart-corps > ul li::before {
  content: ""; position: absolute; left: 0; top: 0.85em;
  width: 0.85rem; height: 1px; background: var(--or-profond);
}

/* --- Telephone : les puces des chapitres intermediaires respirent comme les autres -------- */
@media (max-width: 1023px) {
  .jart-corps > ul li { margin-bottom: 0.95rem; }
}

/* --- Journal, telephone : la une se recentre sur l'ecran ---------------------------------- */
@media (max-width: 900px) {
  .une-propos { text-align: center; }
  .une-propos .overline--signature { justify-content: center; }
  .une-propos .une-texte { text-align: center; }
}

/* --- Journal, telephone : l'invite de la bibliotheque tient sur sa ligne ------------------ */
@media (max-width: 900px) {
  #droit-public { padding-top: 2.1rem; }
}

/* --- Coupe de ligne reservee au telephone -------------------------------------------------- */
.br-telephone { display: none; }
@media (max-width: 900px) {
  .br-telephone { display: inline; }
  /* Journal : surtitres et boutons des sections plus discrets, filigrane romain aligne */
  .jx-head .overline--signature { font-size: 0.55rem; }
  .jx-head .acte-lien { font-size: 0.56rem; padding: 0.44rem 0.95rem 0.4rem; }
  .jx-rang { right: 0; top: -0.3rem; font-size: 6.8rem; }
  .jx-groupe-titre { font-size: 1.02rem; }
  .jx-groupe { margin-bottom: 0.5rem; }
  .jx-carte { padding: 1.45rem 1.3rem 1.25rem; }
  .jx-carte .jx-meta { font-size: 0.87rem; flex-wrap: wrap; row-gap: 0.2rem; }
  .jx-carte .jx-titre { font-size: 1.07rem; }
  .jx-carte p:not(.jx-meta) { font-size: 0.79rem; }
  .jx-grille { grid-auto-columns: min(76%, 290px); }
  .jx-jauge {
    position: relative;
    height: 1px;
    margin: 0.65rem 0.15rem 0;
    background: rgba(156, 124, 56, 0.16);
  }
  .jx-jauge-or {
    position: absolute;
    top: -0.5px;
    left: 0;
    width: 24%;
    height: 2px;
    background: linear-gradient(90deg, var(--or-profond), var(--or-clair));
    transition: left 0.2s ease-out, width 0.2s ease-out;
  }
  .jx-head h2 { font-size: min(1.78rem, calc((100vw - 40px) * 0.0705)); }
  .jx-head .acte-lien { font-size: 0.52rem; padding: 0.38rem 0.85rem 0.34rem; }
  .une-propos .btn { font-size: 0.56rem; padding: 0.5rem 1.2rem 0.46rem; }
  .une-sommaire { padding-top: 0.36rem; }
  .section-une { padding-bottom: 2.6rem; }
  .jx-invite-phrase { line-height: 1.3; font-size: min(1.45rem, calc((100vw - 40px) * 0.0655)); }
}

/* --- Journal, bureau : le filigrane romain descend s'aligner sur le surtitre -------------- */
@media (min-width: 901px) {
  .jx-rang { top: 1.32rem; font-size: 7.8rem; }
}

/* --- Journal : la jauge d'or n'existe qu'au telephone -------------------------------------- */
@media (min-width: 901px) {
  .jx-jauge { display: none; }
}

/* --- Journal : le chip immobilier s'abrege au telephone (la date reste a droite) ----------- */
.jx-chip .chip-court { display: none; }
@media (max-width: 900px) {
  .jx-chip .chip-long { display: none; }
  .jx-chip .chip-court { display: inline; }
  .jx-groupe-titre::before { width: 5px; height: 5px; left: -1.1rem; }
  .jx-carte { box-shadow: 0 8px 22px rgba(31, 45, 38, 0.05); }
  .une-texte { margin-top: 1.65rem; }
  .page-hero .acte-lien { font-size: 0.54rem; padding: 0.44rem 0.95rem 0.4rem; }
  .jx-reperes { flex-direction: column; align-items: flex-start; }
  .une-titre { font-size: 1.72rem; }
  .une-date { font-size: 0.92rem; }
  .une-rang { font-size: 1.22rem; }
  .une-nom { font-size: 0.95rem; }
  .une-nombre { font-size: 0.8rem; }
}

/* --- Domaines et landings, telephone : le texte des cartes Comprendre en retrait ---------- */
@media (max-width: 900px) {
  body:has(.page-hero--expertise) .diptyque-temp p { font-size: 0.8rem; }
}

/* --- Accueil, telephone : les surtitres de sections se font plus discrets ----------------- */
@media (max-width: 900px) {
  body:has(section.hero) [aria-labelledby="titre-presentation"] .overline,
  body:has(section.hero) [aria-labelledby="titre-domaines"] .overline,
  body:has(section.hero) [aria-labelledby="titre-pourqui"] .overline,
  body:has(section.hero) [aria-labelledby="titre-journal"] .overline,
  body:has(section.hero) [aria-labelledby="titre-engagements"] .overline,
  body:has(section.hero) [aria-labelledby="titre-faq"] .overline { font-size: 0.6rem; }
}

/* --- Invitation « Votre defense commence ici », telephone : une seule ligne --------------- */
@media (max-width: 900px) {
  .invitation__coeur h2:has(.br-bureau) {
    font-size: min(1.77rem, calc((100vw - 77px) * 0.0905));
  }
  .invitation__coeur:has(h2 .br-bureau) .invitation__lede { font-size: 0.84rem; }
  .invitation__coeur:has(h2 .br-bureau) .overline { font-size: 0.6rem; }
}

/* --- Accueil, telephone : le surtitre du heros a peine plus discret ----------------------- */
@media (max-width: 900px) {
  section.hero .overline { font-size: 0.68rem; }
}

/* --- Accueil, telephone : « Votre dossier, en quatre temps » d'une seule coulee ----------- */
@media (max-width: 900px) {
  body:has(section.hero) [aria-labelledby="titre-methode"] h2 .br-mobile { display: none; }
}

/* --- Le cabinet, telephone : le surtitre du parcours plus discret ------------------------- */
@media (max-width: 900px) {
  [aria-labelledby="titre-parcours"] .overline { font-size: 0.6rem; }
}

/* --- Tous les domaines, telephone : le surtitre du champ d'intervention plus discret ------ */
@media (max-width: 900px) {
  body:has(.page-hero--domaines) [aria-labelledby="titre-domaines"] .overline { font-size: 0.6rem; }
}

/* --- Simulateurs, telephone : le surtitre du calculateur plus discret --------------------- */
@media (max-width: 900px) {
  .cadran-pupitre .overline--signature { font-size: 0.6rem; }
}

/* --- Domaines et landings, telephone : la barre verte des cartes Comprendre s'affine ------ */
@media (max-width: 900px) {
  .diptyque-temp::before { width: 7px; }
}

/* --- Contact, telephone : le surtitre « A votre convenance » plus discret ------------------ */
@media (max-width: 900px) {
  body:has(.page-hero--contact) [aria-labelledby="titre-modes"] .overline { font-size: 0.6rem; }
}

/* ==== TABLETTE (accueil) : Pour qui resserre, Reflexes en deux colonnes ==================== */
@media (min-width: 601px) and (max-width: 1024px) {
  body:has(section.hero) [aria-labelledby="titre-pourqui"] .cards--4 {
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    column-gap: 2rem;
  }
}
@media (min-width: 601px) and (max-width: 1024px) {
  body:has(section.hero) .reflexes { grid-template-columns: 1fr; }
  body:has(section.hero) .reflexes .carte-nuit { max-width: none; }
  body:has(section.hero) [aria-labelledby="titre-domaines"] .cards--3 {
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    column-gap: 1.1rem;
  }
  body:has(section.hero) .pull-quote { font-size: 1.5rem; }
}

/* ==== TABLETTE : « Votre defense commence ici » — une ligne, plus ample ==================== */
@media (min-width: 601px) and (max-width: 1024px) {
  .invitation__coeur h2 .br-bureau { display: none; }
  .invitation__coeur h2:has(.br-bureau) { font-size: 2.4rem; }
}

/* ==== TABLETTE (accueil) : la presentation garde l'empilement des petites tablettes ======= */
@media (min-width: 821px) and (max-width: 1024px) {
  body:has(section.hero) [aria-labelledby="titre-presentation"] .two-col { grid-template-columns: 1fr; gap: 2.5rem; }
  body:has(section.hero) [aria-labelledby="titre-presentation"] .two-col > div:first-child { order: 2; }
  body:has(section.hero) [aria-labelledby="titre-presentation"] .pull-quote { text-align: center; margin-inline: auto; }
  body:has(section.hero) [aria-labelledby="titre-presentation"] .hero__actions { justify-content: center !important; }
}

/* ==== TABLETTE : tous les boutons du site en plus discret ================================== */
@media (min-width: 601px) and (max-width: 1024px) {
  .btn:not(.btn--fleche) { font-size: 0.62rem; padding: 0.52rem 1.25rem; }
  .acte-lien { font-size: 0.56rem; padding: 0.44rem 0.95rem 0.4rem; }
}

/* ==== TABLETTE (le cabinet) : heros ample et lede contenu ================================== */
@media (min-width: 601px) and (max-width: 1024px) {
  body:has(.section-frise) .page-hero h1 { font-size: min(2.86rem, calc((100vw - 40px) * 0.0815)); }
  body:has(.section-frise) .page-hero__lede { font-size: 0.95rem; max-width: 54rem; }
}

/* ==== TABLETTE (le cabinet) : savoir-faire, structure, associee — disposition unique ====== */
@media (min-width: 821px) and (max-width: 1024px) {
  .section-avocate .container.two-col,
  .section-associee .container.two-col,
  .section-structure .container.two-col { grid-template-columns: 1fr; }
  .section-avocate .two-col > figure,
  .section-associee .two-col > figure,
  .section-structure .two-col > figure { max-width: 460px; margin-inline: auto; order: 2; }
  .section-structure[data-reveal-group] .two-col > div:first-child { order: 0; }
}

/* ==== TABLETTE (le cabinet) : citations et actions des chapitres au centre ================= */
@media (min-width: 601px) and (max-width: 1024px) {
  .section-avocate .pull-quote-chapitre,
  .section-structure .pull-quote-chapitre,
  .section-associee .pull-quote-chapitre { text-align: center !important; margin-inline: auto; }
  .section-avocate .chapitre__actions,
  .section-structure .chapitre__actions,
  .section-associee .chapitre__actions { justify-content: center; text-align: center; }
}

/* ==== TABLETTE (le cabinet) : la photo n'entre qu'apres les boutons ======================== */
@media (min-width: 601px) and (max-width: 1024px) {
  body:has(.page-hero--maison) .two-col:has(.chapitre__actions:not(.est-la)) > figure.portrait-dossier {
    opacity: 0 !important;
  }
  body:has(.page-hero--maison) .two-col:has(.chapitre__actions.est-la) > figure.portrait-dossier {
    transition-delay: 2.2s !important;
  }
}

/* ==== TABLETTE (accueil) : le portrait de la presentation entre apres les boutons ========= */
@media (min-width: 601px) and (max-width: 1024px) {
  body:has(section.hero) [aria-labelledby="titre-presentation"] .two-col > div:first-child.reveal {
    transition-delay: 2.2s !important;
  }
}

/* ==== TABLETTE (tous les domaines) : heros au diapason de la page cabinet ================== */
@media (min-width: 601px) and (max-width: 1024px) {
  body:has(.page-hero--domaines) .page-hero h1 { font-size: min(2.86rem, calc((100vw - 40px) * 0.0815)); }
  body:has(.page-hero--domaines) .page-hero__lede { font-size: 0.95rem; max-width: 54rem; }
}

/* ==== TABLETTE (tous les domaines) : le champ d'intervention en deux colonnes ============== */
@media (min-width: 601px) and (max-width: 1024px) {
  body:has(.page-hero--domaines) [aria-labelledby="titre-domaines"] .cards--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body:has(.page-hero--domaines) [aria-labelledby="titre-domaines"] .cards--3 h3 {
    font-size: min(1.4rem, calc(100vw * 0.0515 - 17.15px));
  }
}

/* ==== TABLETTE (accueil) : surtitre, titre et filet de la presentation au centre =========== */
@media (min-width: 601px) and (max-width: 1024px) {
  [aria-labelledby="titre-presentation"] .overline,
  [aria-labelledby="titre-presentation"] h2 { text-align: center; }
  [aria-labelledby="titre-presentation"] .filet { margin-left: auto; margin-right: auto; transform-origin: center; }
}

/* ==== TABLETTE (pages d'expertise) : heros au diapason des pages maison ==================== */
@media (min-width: 601px) and (max-width: 1024px) {
  /* Coefficient 0.065 : le plein corps (45,76px) est atteint des 744px — la plus petite
     tablette du marche — et les titres longs de ces pages ne debordent jamais en dessous */
  .page-hero--expertise h1,
  .page-hero--expertise h1.h1-deux-lignes,
  .page-hero--expertise h1.h1-une-ligne,
  .page-hero--expertise h1.h1-une-ligne--long { font-size: min(2.86rem, calc((100vw - 40px) * 0.065)); }
  .page-hero--expertise .page-hero__lede { font-size: 0.95rem; max-width: 54rem; }
  .page-hero--expertise .overline { font-size: 0.6rem; }
}

/* ==== TABLETTE (pages d'expertise) : la FAQ « Ce que l'on demande le plus » garde
   l'accordeon des petites tablettes sur les grandes — le pupitre attend l'ordinateur ======= */
@media (min-width: 821px) and (max-width: 1024px) {
  body:has(.page-hero--expertise) .parloir { grid-template-columns: 1fr; gap: 0; margin-top: 1.6rem; }
  body:has(.page-hero--expertise) .pupitre { display: none; }
  body:has(.page-hero--expertise) .registre { padding-left: 1.5rem; counter-reset: parloir; }
  body:has(.page-hero--expertise) .registre__item { counter-increment: parloir; }
  body:has(.page-hero--expertise) .registre__fil { top: 6px; bottom: 6px; }
  body:has(.page-hero--expertise) .registre__q.est-active { color: rgba(251, 250, 247, 0.9); padding-left: 0; }
  body:has(.page-hero--expertise) .registre__item.est-ouverte .registre__q,
  body:has(.page-hero--expertise) .registre__item.est-ouverte .registre__q.est-active { color: var(--or-clair); }
  body:has(.page-hero--expertise) .registre__curseur {
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
  }
  body:has(.page-hero--expertise) .registre__fil.is-visible ~ .registre__curseur { opacity: 0; transition-delay: 0s, 0s; }
  body:has(.page-hero--expertise) .registre.a-ouverte .registre__fil.is-visible ~ .registre__curseur { opacity: 1; }
  body:has(.page-hero--expertise) .registre__rep {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    margin: 0;
    transition: grid-template-rows 0.7s cubic-bezier(0.33, 0, 0.2, 1),
                margin 0.7s cubic-bezier(0.33, 0, 0.2, 1),
                opacity 0.55s ease;
  }
  body:has(.page-hero--expertise) .registre__rep > p {
    min-height: 0;
    overflow: hidden;
    position: relative;
    background: linear-gradient(163deg, #354C40 0%, #2E4237 55%, #24362D 100%);
    border: 1px solid rgba(198, 164, 101, 0.42);
    border-top: 2px solid var(--or-clair);
    border-radius: 14px;
    color: rgba(251, 250, 247, 0.88);
    font-size: 0.89rem;
    text-align: justify;
    hyphens: none;
    padding: 0 1.35rem;
    transition: padding 0.7s cubic-bezier(0.33, 0, 0.2, 1);
  }
  body:has(.page-hero--expertise) .registre__rep > p::before {
    content: counter(parloir, decimal-leading-zero);
    position: absolute;
    top: 0.45rem;
    right: 1.25rem;
    font-family: var(--font-garalde);
    font-style: italic;
    font-weight: 300;
    font-size: 4.3rem;
    line-height: 1;
    color: rgba(198, 164, 101, 0.17);
    pointer-events: none;
  }
  body:has(.page-hero--expertise) .registre__item.est-ouverte .registre__rep {
    grid-template-rows: 1fr;
    opacity: 1;
    margin: 0.4rem 0 1.35rem;
  }
  body:has(.page-hero--expertise) .registre__item.est-ouverte .registre__rep > p { padding: 1.5rem 1.35rem 1.55rem; }
  /* Les habits des petites tablettes : questions justifiees, en-tete centre */
  body:has(.page-hero--expertise) .section-parloir { padding: 2.4rem 0 2.6rem; }
  /* La lueur revient sous le titre centre (le calage a gauche attend l'ordinateur) */
  body:has(.page-hero--expertise) .section-parloir h2::before {
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(34rem, 98%);
  }
  body:has(.page-hero--expertise) .registre__q { text-align: justify; font-size: 0.9rem; }
  body:has(.page-hero--expertise) .section-parloir .section-head { text-align: center; }
  body:has(.page-hero--expertise) .section-parloir .section-head .overline--signature { justify-content: center; }
}

/* ==== GRANDE TABLETTE (pages d'expertise) : le diptyque « Comprendre » mis au point.
   Volet de nuit elargi (48/52) et decolle du cadre (marge gauche 2.2rem) ; surtitre
   discret, titre affirme, exergue justifie en corps intermediaire — la largeur gagnee
   evite les rivieres ; les textes des trois temps s'allegent d'un cran ================== */
@media (min-width: 901px) and (max-width: 1024px) {
  body:has(.page-hero--expertise) .diptyque { grid-template-columns: 48fr 52fr; }
  body:has(.page-hero--expertise) .diptyque-nuit { padding: 3rem 1.5rem 2.8rem 2.2rem; }
  body:has(.page-hero--expertise) .diptyque-nuit .overline--signature { font-size: 0.68rem; }
  body:has(.page-hero--expertise) .diptyque-nuit h2 { font-size: 1.85rem; }
  body:has(.page-hero--expertise) .diptyque-definition { font-size: 0.94rem; text-align: justify; }
  /* Certaines pages demandent un cran de moins pour que leur exergue justifie ne
     creuse pas de rivieres (calibrage page par page, classes posees dans le HTML) */
  body:has(.page-hero--expertise) .diptyque-definition--n92 { font-size: 0.92rem; }
  body:has(.page-hero--expertise) .diptyque-definition--n90 { font-size: 0.9rem; }
  body:has(.page-hero--expertise) .diptyque-definition--n88 { font-size: 0.88rem; }
  body:has(.page-hero--expertise) .diptyque-temp p { font-size: 0.88rem; }
}

/* ==== TABLETTES et ecrans jusqu'au 11 pouces (contact, 821-1439) : le formulaire
   s'elargit — l'ecart entre les deux colonnes se resserre et le formulaire prend la
   part belle ; les champs et leurs intitules se font plus discrets. Des 1440px
   (13 pouces et plus), le rendu ordinateur valide reprend tel quel ======================= */
@media (min-width: 821px) and (max-width: 1439px) {
  body:has(.page-hero--contact) .ecrire-duo {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: 1.7rem;
  }
  body:has(.page-hero--contact) .capsules .form-field input,
  body:has(.page-hero--contact) .capsules .form-field select,
  body:has(.page-hero--contact) .capsules .form-field textarea,
  body:has(.page-hero--contact) .capsules .form-field > label { font-size: 0.84rem; }
  /* L'etiquette flottee garde son petit corps d'origine (re-declare car la regle
     ci-dessus pese plus lourd dans la cascade) */
  body:has(.page-hero--contact) .capsules .form-field:focus-within > label,
  body:has(.page-hero--contact) .capsules .form-field:has(input:not(:placeholder-shown)) > label,
  body:has(.page-hero--contact) .capsules .form-field:has(textarea:not(:placeholder-shown)) > label,
  body:has(.page-hero--contact) .capsules .form-field:has(select:valid) > label { font-size: 0.53rem; }
}

/* ==== TABLETTE (honoraires) : heros au diapason cabinet / domaines ========================= */
@media (min-width: 601px) and (max-width: 1024px) {
  body:has(.section-modes) .page-hero h1 { font-size: min(2.86rem, calc((100vw - 40px) * 0.0815)); }
  body:has(.section-modes) .page-hero__lede { font-size: 0.95rem; max-width: 54rem; }
}

/* ==== TABLETTE (honoraires) : les modes gardent leurs deux colonnes le plus longtemps ====== */
@media (min-width: 690px) and (max-width: 1024px) {
  .section-modes .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==== TABLETTE (simulateurs) : heros au diapason des pages maison ========================== */
@media (min-width: 601px) and (max-width: 1024px) {
  .page-hero--simulateurs h1 { font-size: min(2.86rem, calc((100vw - 40px) * 0.0815)); }
  .page-hero--simulateurs .page-hero__lede { font-size: 0.95rem; max-width: 54rem; }
}

/* ==== TABLETTE (pages simulateurs) : heros uniforme, methode et questions en deux colonnes = */
@media (min-width: 601px) and (max-width: 1024px) {
  body:has(.section-cadran) .page-hero h1 { font-size: min(2.86rem, calc((100vw - 40px) * 0.0815)); }
  body:has(.section-cadran) .page-hero__lede { font-size: 0.95rem; max-width: 54rem; }
}
@media (min-width: 690px) and (max-width: 1024px) {
  body:has(.section-cadran) .methode-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:has(.section-cadran) .questions-cadran { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==== TABLETTE (journal) : heros au diapason des pages maison ============================== */
@media (min-width: 601px) and (max-width: 1024px) {
  body:has(.jx-recherche) .page-hero h1 { font-size: min(2.86rem, calc((100vw - 40px) * 0.0815)); }
  body:has(.jx-recherche) .page-hero__lede { font-size: 0.95rem; max-width: 54rem; }
  body:has(.jx-recherche) .jx-reperes { flex-direction: row; align-items: center; flex-wrap: wrap; }
}

/* ==== TABLETTE (journal) : surtitre une discret, bibliotheque sur une ligne ================ */
@media (min-width: 601px) and (max-width: 1024px) {
  .une-propos .overline--signature { font-size: 0.6rem; }
  .jx-invite-phrase .br-telephone { display: none; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .une-texte { max-width: 34rem; margin-inline: auto; }
  .une-titre { font-size: min(1.9rem, calc((100vw - 40px) * 0.0505)); white-space: nowrap; }
}
/* ==== TABLETTE (journal) : le chemin de fer garde ses lignes pleines sur grande tablette === */
@media (min-width: 901px) and (max-width: 1024px) {
  .une-scene { grid-template-columns: 1.3fr 0.7fr; gap: 1.6rem; }
  .une-titre { font-size: min(1.9rem, calc(100vw * 0.0295)); white-space: nowrap; }
  .une-rang { font-size: 1.25rem; }
  .une-nom { font-size: 1rem; }
  .une-nombre { font-size: 0.82rem; }
  .une-date { font-size: 0.88rem; }
  .une-texte { font-size: 0.84rem; }
  .une-sommaire { margin-top: 2.4rem; padding-top: 0.8rem; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .une-sommaire-item { justify-content: flex-start; padding: 0.85rem 0.2rem; }
  .une-sommaire-item + .une-sommaire-item { border-left: none; border-top: 1px solid rgba(198, 164, 101, 0.14); }
  .une-nombre { margin-left: auto; }
}

/* ==== TABLETTE (articles du journal) : heros ample, textes contenus ======================== */
@media (min-width: 601px) and (max-width: 1024px) {
  body:has(.jart-corps) .jart-hero h1 { font-size: min(2.3rem, calc((100vw - 40px) * 0.052)); }
  body:has(.jart-corps) .jart-hero .overline--signature { font-size: 0.6rem; }
  body:has(.jart-corps) .jart-meta { font-size: 0.6rem !important; }
  body:has(.jart-corps) .jart-corps p:not(.jart-chapo):not(.jart-bref-titre) { font-size: 0.94rem; }
  body:has(.jart-corps) .jart-corps ul li { font-size: 0.89rem; }
  body:has(.jart-corps) .jart-chapo { font-size: 1.03rem; }
}

/* ==== TABLETTE (contact) : heros au diapason des pages maison ============================== */
@media (min-width: 601px) and (max-width: 1024px) {
  .page-hero--contact h1 { font-size: min(2.86rem, calc((100vw - 40px) * 0.0815)); }
  .page-hero--contact .overline { font-size: 0.6rem; }
  .page-hero--contact .page-hero__lede { font-size: 0.95rem; max-width: 54rem; }
}

/* ==== Contact, cartes cote a cote (tablette ET ordinateur) : les accroches ne se
   replient jamais et ne s'etirent pas (le flex:1 generique de .card p les gonflait
   dans les cartes courtes, poussant les titres vers le bas) — les titres restent
   au meme niveau dans toute la rangee, a toute largeur ============================ */
@media (min-width: 601px) {
  body:has(.page-hero--contact) [aria-labelledby="titre-modes"] .overline {
    white-space: nowrap;
    flex-wrap: nowrap;
    flex: 0 0 auto;
  }
}