/* Plan : couleurs traditionnelles japonaises (wa-iro).
   Sumi (encre) sur kinari (papier non blanchi), fukamidori (vert profond) pour l'action,
   rikyū-nezumi (gris-vert) pour les filets et libellés, shu (vermillon) pour le seul sceau.
   Mise en page asymétrique, marges larges (ma), filets fins. */
:root {
  --paper: #F7F5EE;
  --ink: #1C1C1C;
  --ink-soft: #3F413B;
  --mute: #6E7466;
  --line: #D9DBD1;
  --wash: #EFECE3;
  --accent: #1F3D2E;
  --shu: #C0392B;
  --on-shu: #F7F5EE;
  --serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  color-scheme: light;
}



/* Base commune (les pages de domaine sont servies sans squelette) */
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
[hidden] { display: none !important; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

.label {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mute);
}

.num {
  font-family: var(--serif);
  font-size: 0.9rem;
  letter-spacing: 0;
  margin-right: 0.9rem;
  color: var(--accent);
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  text-wrap: balance;
  margin: 0;
}

/* En-tête */
.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.75rem;
  max-width: 1120px;
  margin: 0 auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.32em;
}

/* Sceau vermillon (hanko) : initiales en colonne, légèrement de biais comme un tampon */
.seal {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding-top: 1px;
  background: var(--shu);
  color: var(--on-shu);
  border-radius: 4px;
  font-family: var(--serif);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  transform: rotate(-3deg);
  box-shadow: inset 0 0 0 2px var(--shu), inset 0 0 0 3px var(--on-shu);
}

.top-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}

.top nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}

.top nav a {
  background: linear-gradient(var(--accent), var(--accent)) no-repeat left bottom / 0 1px;
  padding-bottom: 2px;
  transition: background-size 0.4s ease;
}

.top nav a:hover { background-size: 100% 1px; }

.theme {
  font: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.theme:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }

/* Accueil */
.hero {
  display: grid;
  gap: 4rem;
  padding-block: clamp(4.5rem, 14vw, 10rem) clamp(4rem, 10vw, 8rem);
  max-width: 1120px;
  margin: 0 auto;
}

.hero-text { display: grid; gap: 2rem; }

.hero h1 {
  font-size: clamp(2.6rem, 7vw, 5.25rem);
  line-height: 1.12;
  letter-spacing: 0.01em;
}

.lead {
  margin: 0;
  max-width: 34ch;
  color: var(--ink-soft);
  font-size: 1rem;
}

.cta {
  justify-self: start;
  margin-top: 0.5rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--ink);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: letter-spacing 0.4s ease;
}

.cta:hover { letter-spacing: 0.26em; }

.hero-mark {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  min-height: 260px;
}

.enso {
  width: min(240px, 60vw);
  height: auto;
  color: var(--ink);
  overflow: visible;
}

.kanji {
  margin: 0;
  writing-mode: vertical-rl;
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.6em;
  color: var(--ink-soft);
}

/* Sections */
.block {
  border-top: 1px solid var(--line);
  padding-block: clamp(4.5rem, 10vw, 8.5rem);
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  gap: 3rem;
}

.block-head { display: grid; gap: 1rem; align-content: start; }

.block h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.3;
}

/* Domaines */
.rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rows li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  padding-block: 2rem;
  border-top: 1px solid var(--line);
}

.rows li:last-child { border-bottom: 1px solid var(--line); }

.rows .item { display: grid; gap: 0.75rem; }

.rows h3 { font-size: 1.3rem; }

.rows p {
  margin: 0;
  max-width: 60ch;
  color: var(--ink-soft);
}

.arrow {
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--mute);
  transition: transform 0.4s ease, color 0.4s ease;
}

.rows li:hover .arrow { transform: translateX(6px); color: var(--accent); }

/* Méthode : pleine largeur, trois colonnes */
.block.full { grid-template-columns: 1fr; }
.block.full .block-head { position: static; }

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

.steps li {
  display: grid;
  gap: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.steps .n {
  font-family: var(--serif);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--accent);
}

.steps h3 { font-size: 1.25rem; }

.steps p {
  margin: 0;
  max-width: 34ch;
  color: var(--ink-soft);
}

/* Cabinet */
.block-body { display: grid; gap: 3rem; }

.pull {
  margin: 0;
  max-width: 26ch;
  padding-left: 1.5rem;
  border-left: 2px solid var(--accent);
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  line-height: 1.55;
}

.facts {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--line);
}

.facts div {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.facts dt { font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--mute); padding-top: 0.3rem; }
.facts dd { margin: 0; color: var(--ink); }

/* Contact */
.contact-list {
  display: grid;
  gap: 1.5rem;
  margin: 0;
}

.contact-list div {
  display: grid;
  gap: 0.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.contact-list dt { font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--mute); }
.contact-list dd { margin: 0; font-size: 1.05rem; color: var(--ink); }

/* Pied de page */
.foot {
  max-width: 1120px;
  margin: 0 auto;
  padding-block: 3rem 3.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  font-size: 0.8rem;
  color: var(--mute);
}

.foot p { margin: 0; }

/* Tablette et plus */
@media (min-width: 761px) {
  .hero { grid-template-columns: 7fr 4fr; align-items: end; }
  .hero-mark { display: block; min-height: 360px; }
  .enso { position: absolute; right: 0; bottom: 0; }
  .kanji { position: absolute; right: 0; top: 0; }
  .block { grid-template-columns: 4fr 8fr; gap: 5rem; }
  .block.full { grid-template-columns: 1fr; }
  .block-head { position: sticky; top: 2rem; align-self: start; }
  .block.full .block-head { position: static; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
}

/* Animations : uniquement si le visiteur ne demande pas moins de mouvement */
@media (prefers-reduced-motion: no-preference) {
  .ink-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 1.8s cubic-bezier(0.6, 0.1, 0.2, 1) 0.3s forwards;
  }

  .reveal {
    animation: rise 880ms cubic-bezier(0.19, 1, 0.22, 1) var(--d, 0ms) both;
  }
}

@keyframes draw { to { stroke-dashoffset: 0; } }

@keyframes rise {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ——— Liens des domaines sur l'accueil ——— */
.rows li { display: block; padding-block: 0; }

.row-link {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  padding-block: 2rem;
}

.row-link:hover h3 { color: var(--accent); }
.rows h3 { transition: color 0.4s ease; }

/* ——— Pages de domaine ——— */
.top nav a[aria-current="page"] { background-size: 100% 1px; }

.crumbs {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--mute);
}

.crumbs a { border-bottom: 1px solid var(--line); }
.crumbs a:hover { color: var(--ink); border-color: var(--ink); }

.page-hero {
  position: relative;
  display: grid;
  gap: 1.75rem;
  padding-block: clamp(3rem, 9vw, 6.5rem) clamp(3rem, 7vw, 5rem);
  max-width: 1120px;
  margin: 0 auto;
}

.page-hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  line-height: 1.12;
  letter-spacing: 0.01em;
  max-width: 14ch;
}

.page-hero .lead { max-width: 46ch; }

.page-hero .kanji {
  position: absolute;
  right: 0;
  top: clamp(3rem, 9vw, 6.5rem);
  font-size: 1.15rem;
}

.page-hero .hero-cta { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 48px;
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--paper);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.btn:hover { transform: translateY(-2px); background: var(--ink); border-color: var(--ink); }

.intro { margin: 0; max-width: 46ch; color: var(--ink-soft); }

/* Situations et interventions */
.lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }

.lines li {
  display: grid;
  gap: 0.5rem;
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--line);
}

.lines h3 { font-size: 1.15rem; line-height: 1.5; }
.lines p { margin: 0; max-width: 60ch; color: var(--ink-soft); }

/* Points de vigilance */
.vigil { display: grid; margin: 0; border-top: 1px solid var(--line); }

.vigil div {
  display: grid;
  gap: 0.35rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.vigil dt {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--ink);
}

.vigil dt::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.8rem;
  background: var(--accent);
  transform: translateY(-3px);
}

.vigil dd { margin: 0; max-width: 60ch; color: var(--ink-soft); }
.vigil .ref { display: block; margin-top: 0.35rem; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--mute); }

/* Documents utiles */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }

.checklist li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 1rem;
  align-items: baseline;
  max-width: 60ch;
}

.checklist li::before {
  content: "";
  width: 11px;
  height: 11px;
  border: 1px solid var(--ink);
  transform: translateY(1px);
}

/* Questions */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }

.faq summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.4rem;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.5;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--sans);
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--accent);
  transition: transform 0.3s ease;
}

.faq summary:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding-bottom: 1.6rem; max-width: 62ch; color: var(--ink-soft); }
.faq .answer p { margin: 0; }

/* Bande d'appel : pleine largeur, seule surface verte */
.cta-band {
  margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--accent);
  color: var(--paper);
}

.cta-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding-block: clamp(2.5rem, 6vw, 4rem);
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

.cta-band h2 { font-size: clamp(1.4rem, 2.8vw, 2rem); line-height: 1.4; }
.cta-band p { margin: 0; max-width: 58ch; opacity: 0.85; }

.cta-band .btn { background: transparent; border-color: var(--paper); color: var(--paper); justify-self: start; }
.cta-band .btn:hover { background: var(--paper); color: var(--accent); }

/* Autres domaines */
.others { display: grid; gap: 0; border-top: 1px solid var(--line); }

.others a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 1.2rem;
}

.others a:hover { color: var(--accent); }
.others a:hover .arrow { transform: translateX(6px); color: var(--accent); }

@media (min-width: 761px) {
  .page-hero .kanji { right: 0; }
  .steps.four { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; }
  .cta-inner { grid-template-columns: 1fr auto; gap: 3rem; }
  .cta-band .btn { justify-self: end; }
  .others { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
}

@media (max-width: 760px) {
  .page-hero { padding-right: 2.5rem; }
}


/* ——— Parcours du visiteur ——— */
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; margin-top: 0.5rem; }
.hero-cta .cta { margin-top: 0; }

.top-right .btn { min-height: 40px; padding: 0.45rem 1rem; font-size: 0.7rem; }

/* Repères rassurants sous l'accueil */
.facts-strip {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  border-top: 1px solid var(--line);
}

.facts-strip div { display: grid; gap: 0.2rem; padding-block: 1.25rem; border-bottom: 1px solid var(--line); }
.facts-strip dt { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute); }
.facts-strip dd { margin: 0; font-family: var(--serif); font-size: 1.05rem; font-variant-numeric: tabular-nums; }

.facts-strip + .block { border-top: 0; }

/* Situations sur l'accueil */
.rows .examples { font-size: 0.85rem; color: var(--mute); }
.rows .more { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }

/* Encadré d'urgence : un filet vert, pas de bande */
.alert {
  max-width: 1120px;
  margin: 0 auto clamp(3rem, 7vw, 5rem);
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
}

.alert h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); line-height: 1.4; }

.alert ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
  counter-reset: a;
}

.alert li {
  counter-increment: a;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
  max-width: 62ch;
}

.alert li::before {
  content: counter(a, upper-roman);
  font-family: var(--serif);
  color: var(--accent);
}

/* Tarifs */
.fees { display: grid; margin: 0; border-top: 1px solid var(--line); }
.fees div { display: grid; gap: 0.3rem; padding-block: 1.4rem; border-bottom: 1px solid var(--line); }
.fees dt { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute); }
.fees dd { margin: 0; max-width: 60ch; }
.fees .price { font-family: var(--serif); font-size: 1.5rem; font-variant-numeric: tabular-nums; }

.stack { display: grid; gap: 2rem; align-content: start; }
.stack > p { margin: 0; max-width: 60ch; color: var(--ink-soft); }

/* Lexique */
.glossary { margin: 0; border-top: 1px solid var(--line); }
.glossary div { display: grid; gap: 0.35rem; padding-block: 1.3rem; border-bottom: 1px solid var(--line); }
.glossary dt { font-family: var(--serif); font-size: 1.15rem; }
.glossary dt small { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-left: 0.75rem; }
.glossary dd { margin: 0; max-width: 62ch; color: var(--ink-soft); }

.letters { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-family: var(--serif); font-size: 1.05rem; }
.letters a { color: var(--mute); border-bottom: 1px solid transparent; }
.letters a:hover { color: var(--accent); border-color: var(--accent); }
.glossary .letter { padding-top: 2rem; border-bottom: 0; font-family: var(--serif); font-size: 1.6rem; color: var(--accent); }

/* Pied de page enrichi */
.foot { display: grid; gap: 2rem; line-height: 1.7; }
.foot-grid { display: grid; gap: 1.75rem; }
.foot h3 { font-family: var(--sans); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); margin: 0 0 0.4rem; }
.foot a { border-bottom: 1px solid var(--line); }
.foot a:hover { color: var(--ink); border-color: var(--ink); }

@media (min-width: 761px) {
  .facts-strip { grid-template-columns: repeat(3, 1fr); }
  .facts-strip div { padding-right: 1.5rem; }
  .alert { grid-template-columns: 5fr 7fr; gap: 3rem; align-items: start; }
  .fees div { grid-template-columns: 11rem 1fr; gap: 1.5rem; align-items: baseline; }
  .glossary div { grid-template-columns: 15rem 1fr; gap: 2rem; align-items: baseline; }
  .glossary .letter { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

@media (max-width: 650px) {
  .top-right .btn { display: none; }
}

.intro a { color: var(--accent); border-bottom: 1px solid currentColor; }

/* ——— Accueil : présentation et pile de photographies ——— */
.hero-name {
  margin: 0;
  display: grid;
  gap: 0.35rem;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.hero-name span {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute);
}

.intro-me { display: grid; gap: 0.9rem; max-width: 46ch; color: var(--ink-soft); font-size: 1rem; }
.intro-me p { margin: 0; }

.hero-photos {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 3.5rem;
  padding-bottom: 1.5rem;
}

.hero-photos .kanji { position: static; }

.portrait-space {
  position: relative;
  flex: none;
  width: min(75vw, 300px);
  aspect-ratio: 3 / 4;
  max-width: 100%;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  clip-path: inset(-28px -52px -32px -28px);
}

.portrait-space.is-dragging { cursor: grabbing; }
.portrait-space:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }

.portrait-deck { position: absolute; inset: 0; }

.portrait-deck-frame {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  transform-origin: 50% 50%;
  box-shadow: 0 5px 16px #202b2418;
  will-change: transform;
}

.portrait-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  background: var(--wash);
  pointer-events: none;
  -webkit-user-drag: none;
}

@media (min-width: 761px) {
  .hero { grid-template-columns: 6fr 5fr; align-items: center; }
  .hero-photos { justify-content: flex-end; }
}

@media (max-width: 650px) {
  .hero-photos .kanji { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .portrait-space { animation: portrait-arrive 850ms cubic-bezier(0.19, 1, 0.22, 1) 90ms both; }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
  .portrait-space { animation-duration: 1050ms; }
}

@keyframes portrait-arrive {
  from { opacity: 0; transform: translateY(24px) scale(0.975); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  .hero { gap: 2.5rem; padding-top: 2.5rem; }
  .hero-photos { order: -1; }
}

/* Nom en titre principal */
.hero-id { display: grid; gap: 0.9rem; }
.hero-id h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1.08; letter-spacing: 0.005em; text-wrap: balance; }
.hero-role {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mute);
}

/* Nom sur une ligne, en vert sapin ; photos agrandies */
.hero-id h1 { color: var(--accent); font-size: clamp(2rem, 4.3vw, 3.4rem); line-height: 1.1; }
@media (min-width: 400px) { .hero-id h1 { white-space: nowrap; } }

.portrait-space { width: min(78vw, 400px); }
.hero-photos { padding-right: 40px; }
@media (max-width: 760px) { .hero-photos { padding-right: 30px; justify-content: center; } }

/* Photos à gauche, texte à droite */
@media (min-width: 761px) {
  .hero { grid-template-columns: 5fr 6fr; gap: 5rem; }
  .hero-photos { order: -1; justify-content: flex-start; }
}

/* Nom un peu plus petit, mention du barreau plus grande */
.hero-id h1 { font-size: clamp(1.75rem, 3.3vw, 2.6rem); }
.hero-role { font-size: clamp(0.95rem, 1.4vw, 1.1rem); letter-spacing: 0.18em; color: var(--ink-soft); }

/* ——— Domaines d'intervention : trois colonnes alignées ——— */
.domains .block-head h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.15; }

.domains-grid { display: grid; border-top: 1px solid var(--line); }

.domain-col {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding-block: 2.25rem;
  border-bottom: 1px solid var(--line);
}

.domain-col .n {
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: 0.12em;
  color: var(--accent);
}

.domain-col h3 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.3; }

.domain-col .tags { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.8; max-width: 32ch; }

.more-link {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  gap: 1.25rem;
  align-items: center;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--ink);
  font-size: 0.95rem;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.more-link span { transition: transform 0.3s ease; }
.more-link:hover { color: var(--accent); border-color: var(--accent); }
.more-link:hover span { transform: translateX(4px); }

@media (min-width: 761px) {
  .domains-grid { grid-template-columns: repeat(3, 1fr); }
  .domain-col { padding: 2.5rem 2.5rem 0.5rem; border-bottom: 0; border-left: 1px solid var(--line); }
  .domain-col:first-child { padding-left: 0; border-left: 0; }
  .domain-col:last-child { padding-right: 0; }
}

/* Ensō à droite du texte de présentation */
.hero-text { position: relative; }
.hero-text > :not(.hero-enso) { position: relative; z-index: 1; }
.hero-enso { display: none; }

@media (min-width: 761px) {
  .hero-enso {
    display: block;
    position: absolute;
    right: -1rem;
    bottom: 5.5rem;
    width: clamp(150px, 15vw, 200px);
    height: auto;
    color: var(--ink);
    z-index: 0;
    pointer-events: none;
  }
}

/* ——— Domaines : panneau vert sapin ———
   Même vert dans les deux thèmes, texte couleur papier. */
:root { --panel: #1F3D2E; --on-panel: #F7F5EE; --on-panel-soft: #C9D6CD; --panel-line: #3B5A4A; --panel-mark: #9FC3AE; }

.domains-grid {
  background: var(--panel);
  color: var(--on-panel);
  border-top: 0;
  padding: 0.5rem clamp(1.25rem, 3vw, 2.5rem);
}

.domains-grid .domain-col { border-color: var(--panel-line); }
.domains-grid .domain-col .n { color: var(--panel-mark); }
.domains-grid .domain-col h3 { color: var(--on-panel); }
.domains-grid .domain-col .tags { color: var(--on-panel-soft); }
.domains-grid .more-link { color: var(--on-panel); border-color: var(--on-panel); }
.domains-grid .more-link:hover { color: var(--panel-mark); border-color: var(--panel-mark); }
.domains-grid .more-link:focus-visible { outline-color: var(--on-panel); }
.domains-grid .domain-col:last-child { border-bottom: 0; }

@media (min-width: 761px) {
  .domains-grid { padding: 0.5rem 0 2.5rem; }
  .domains-grid .domain-col,
  .domains-grid .domain-col:first-child,
  .domains-grid .domain-col:last-child { padding: 2.75rem 2.5rem 0.5rem; }
  .domains-grid .domain-col:first-child { border-left: 0; }
}

/* ——— Domaines : trois cartes vert sapin ———
   Rayons continus, profondeur discrète, une seule action par carte. */
:root {
  --sapin-1: #2B5140;
  --sapin-2: #1F3D2E;
  --sapin-3: #17301F;
  --on-sapin: #F6F3EC;
  --on-sapin-soft: rgba(246, 243, 236, 0.72);
  --on-sapin-faint: rgba(246, 243, 236, 0.1);
  --card-shadow: 0 30px 60px -36px rgba(18, 38, 27, 0.55), 0 2px 6px -2px rgba(18, 38, 27, 0.18);
  --card-shadow-hover: 0 44px 80px -40px rgba(18, 38, 27, 0.6), 0 4px 10px -4px rgba(18, 38, 27, 0.22);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.domains .block-head h2 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.domains-sub {
  margin: 0.25rem 0 0;
  max-width: 34ch;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

.dcards { display: grid; gap: 16px; }

.dcard {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-height: 420px;
  padding: 2rem 2rem 1.75rem;
  border-radius: 28px;
  overflow: hidden;
  color: var(--on-sapin);
  background:
    radial-gradient(120% 70% at 15% 0%, var(--sapin-1) 0%, rgba(43, 81, 64, 0) 60%),
    linear-gradient(180deg, var(--sapin-2) 0%, var(--sapin-3) 100%);
  box-shadow: var(--card-shadow);
  transition: transform 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out);
}

/* Reflet très léger sur le bord supérieur */
.dcard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 35%);
  pointer-events: none;
}

.dcard:hover { transform: translateY(-6px); box-shadow: var(--card-shadow-hover); }
.dcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.dcard-n {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(246, 243, 236, 0.28);
  font-family: var(--serif);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--on-sapin-soft);
}

.dcard h3 {
  margin-top: 1.25rem;
  font-size: clamp(1.65rem, 2.3vw, 2.05rem);
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--on-sapin);
}

.dcard p {
  margin: 0;
  max-width: 30ch;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--on-sapin-soft);
}

.dcard-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }

.dcard-tags span {
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--on-sapin-faint);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--on-sapin);
}

.dcard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(246, 243, 236, 0.14);
  font-size: 0.95rem;
  color: var(--on-sapin);
}

.dcard-go {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--on-sapin);
  color: var(--sapin-2);
  transition: transform 0.7s var(--ease-out);
}

.dcard-go svg { width: 18px; height: 18px; transition: transform 0.7s var(--ease-out); }
.dcard:hover .dcard-go { transform: scale(1.06); }
.dcard:hover .dcard-go svg { transform: translateX(3px); }

@media (min-width: 761px) {
  .dcards { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

@media (max-width: 760px) {
  .dcard { min-height: 0; padding: 1.75rem 1.5rem 1.5rem; border-radius: 24px; }
  .dcard h3 { margin-top: 0.75rem; }
}

/* Boutons : forme pilule, en accord avec les cartes */
.btn {
  border-radius: 999px;
  padding: 0.8rem 1.6rem;
  letter-spacing: 0.08em;
  transition: transform 0.6s var(--ease-out), background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.6s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(18, 38, 27, 0.6); }
.top-right .btn { padding: 0.5rem 1.15rem; }
.theme { border-radius: 999px; padding: 0.45rem 1rem; }

@media (prefers-reduced-motion: reduce) {
  .dcard:hover { transform: none; }
}

/* ——— Décision de couleur : l'encre ———
   Les cartes passent en encre sumi chaude, la même matière que l'ensō.
   Le contraste avec le papier crée la tension ; aucune teinte ne concurrence le texte.
   Le vert redevient un accent discret, réservé aux actions. */
:root {
  --card-hi: #34332F;
  --card-top: #22211E;
  --card-bottom: #161614;
  --card-shadow: 0 30px 60px -36px rgba(20, 18, 14, 0.5), 0 2px 6px -2px rgba(20, 18, 14, 0.16);
  --card-shadow-hover: 0 44px 80px -40px rgba(20, 18, 14, 0.55), 0 4px 10px -4px rgba(20, 18, 14, 0.2);
  --card-edge: rgba(255, 255, 255, 0.08);
}

.dcard {
  background:
    radial-gradient(110% 65% at 12% 0%, var(--card-hi) 0%, transparent 62%),
    linear-gradient(180deg, var(--card-top) 0%, var(--card-bottom) 100%);
  box-shadow: var(--card-shadow), inset 0 0 0 1px var(--card-edge);
}
.dcard:hover { box-shadow: var(--card-shadow-hover), inset 0 0 0 1px var(--card-edge); }
.dcard-go { color: #1C1C1A; }
.dcard:focus-visible { outline-color: var(--ink); }

/* ——— Essai : l'encre remplace le vert sapin comme couleur d'accent ——— */
:root { --accent: #22211E; }

/* Titres de section en vermillon (shu), en mincho gras */
.block h2,
.alert h2 { color: var(--shu); font-weight: 700; letter-spacing: 0; }

/* Essai : titres de section en vert sapin */
:root { --sapin: #1F3D2E; }
.block h2, .alert h2 { color: var(--sapin); }

/* Titres de section : exactement le rouge du sceau MB */
.block h2, .alert h2 { color: var(--shu); }

/* ——— Décision finale des couleurs ———
   Papier et encre pour tout le site ; titres de section en encre, mincho gras.
   Vert sapin uniquement pour le nom ; rouge uniquement pour le sceau. */
.block h2, .alert h2 { color: var(--ink); }
.hero-id h1 { color: var(--sapin); }


/* Mots-clés des domaines : liste, un élément par ligne, séparés par des filets */
.dcard-list {
  list-style: none;
  margin: auto 0 0;
  padding: 0;
  display: grid;
}

.dcard-list li {
  padding-block: 0.6rem;
  border-top: 1px solid rgba(246, 243, 236, 0.14);
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--on-sapin);
}

.dcard-foot { margin-top: 0; }

/* Mots-clés : forme pastille, une par ligne */
.dcard-list { gap: 8px; justify-items: start; margin-bottom: 1.25rem; }
.dcard-list li {
  padding: 0.3rem 0.85rem;
  border-top: 0;
  border-radius: 999px;
  background: var(--on-sapin-faint);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

/* Titres de section : exactement le vert sapin du nom */
.block h2, .alert h2 { color: var(--sapin); }

/* ——— Carte des interventions : encre sumi ———
   Une feuille d'encre, les départements en traits de pinceau très fins,
   la côte tracée d'un seul geste, chaque lieu comme une goutte de papier.
   Le lieu choisi est entouré d'un ensō. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.iv-grid { display: grid; gap: 2.5rem; align-items: center; }
.iv-text { display: grid; gap: 1.5rem; align-content: start; min-width: 0; }
.iv-text .block-head { position: static; }
.interventions .block-head h2 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.08; }
.iv-intro { margin: 0; max-width: 40ch; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.75; }

.iv-count { margin: 0.5rem 0 0; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); }
.iv-count span { font-family: var(--serif); font-size: 1.6rem; letter-spacing: 0; color: var(--ink); margin-right: 0.4rem; font-variant-numeric: tabular-nums; }

.iv-select-wrap { position: relative; display: block; max-width: 22rem; }
.iv-select-wrap::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

#iv-select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  font: inherit;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  padding: 0.6rem 2rem 0.6rem 0;
  cursor: pointer;
}
#iv-select:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

.iv-detail { min-height: 5.5rem; }
.iv-name { margin: 0.5rem 0 0; font-family: var(--serif); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.15; color: var(--sapin); }
.iv-dep { margin: 0.35rem 0 0; color: var(--mute); letter-spacing: 0.04em; }

.iv-map {
  position: relative;
  isolation: isolate;
  margin: 0;
  padding: clamp(1.25rem, 3.5vw, 2.75rem) clamp(1rem, 3.5vw, 2.75rem) 1.25rem;
  border-radius: 28px;
  overflow: hidden;
  color: #F6F3EC;
  background:
    radial-gradient(90% 60% at 70% 10%, var(--card-hi) 0%, transparent 65%),
    linear-gradient(180deg, var(--card-top) 0%, var(--card-bottom) 100%);
  box-shadow: var(--card-shadow), inset 0 0 0 1px var(--card-edge);
}

#iv-svg { display: block; width: 100%; height: auto; overflow: visible; }

.iv-deps {
  fill: rgba(246, 243, 236, 0.03);
  stroke: rgba(246, 243, 236, 0.17);
  stroke-width: 0.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.iv-outline {
  fill: none;
  stroke: rgba(246, 243, 236, 0.78);
  stroke-width: 1.15;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.pin { cursor: pointer; outline: none; }
.pin-halo { fill: rgba(246, 243, 236, 0); transition: fill 0.4s ease; }
.pin-dot { fill: #F6F3EC; transform-box: fill-box; transform-origin: center; transition: transform 0.5s var(--ease-out), opacity 0.4s ease; opacity: 0.82; }
.pin:hover .pin-halo, .pin:focus-visible .pin-halo { fill: rgba(246, 243, 236, 0.1); }
.pin:hover .pin-dot, .pin:focus-visible .pin-dot { transform: scale(1.45); opacity: 1; }
.pin.is-active .pin-dot { opacity: 0; }

.iv-mark { pointer-events: none; transition: transform 0.7s var(--ease-out); }
.iv-enso {
  fill: none;
  stroke: #F6F3EC;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.iv-core { fill: #F6F3EC; }

.iv-label { pointer-events: none; transition: transform 0.7s var(--ease-out), opacity 0.3s ease; }
.iv-label-bg { fill: #F6F3EC; }
.iv-label-text { font-family: var(--serif); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; fill: #1C1C1A; }

.iv-map figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(246, 243, 236, 0.12);
  font-size: 0.82rem;
  color: rgba(246, 243, 236, 0.7);
}
.iv-source { font-size: 0.72rem; letter-spacing: 0.04em; color: rgba(246, 243, 236, 0.45); }

@media (min-width: 900px) {
  .iv-grid { grid-template-columns: 4fr 7fr; gap: 4.5rem; }
}

/* Animations : la côte se trace, les lieux apparaissent, l'ensō se dessine */
@media (prefers-reduced-motion: no-preference) {
  .iv-play .iv-outline { animation: iv-draw 2.6s cubic-bezier(0.6, 0.1, 0.2, 1) both; }
  .iv-play .iv-deps { animation: iv-fade 1.6s ease 0.9s both; }
  .iv-play .pin { animation: iv-pop 0.7s var(--ease-out) both; animation-delay: calc(1.4s + var(--i, 0) * 35ms); }
  .iv-ring .iv-enso { animation: iv-draw 0.9s cubic-bezier(0.6, 0.1, 0.2, 1) both; }
  .iv-ring .iv-label { animation: iv-fade 0.5s ease 0.25s both; }
}
@keyframes iv-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes iv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes iv-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (max-width: 650px) {
  .pin-halo { r: 18px; }
  .pin-dot { r: 4.6px; }
}

/* ════════════════════════════════════════════════════════════════
   FINITION
   Principes : moins de lignes, plus d'espace ; une seule hiérarchie
   de titres ; des surfaces plutôt que des cadres ; des rayons et des
   ombres identiques partout ; chaque détail aligné sur la même grille.
   ════════════════════════════════════════════════════════════════ */
:root {
  --surface: #FCFBF8;
  --surface-shadow: 0 1px 2px rgba(40, 36, 26, 0.04), 0 28px 56px -36px rgba(40, 36, 26, 0.28);
  --r-lg: 28px;
  --r-md: 20px;
  --glass: rgba(247, 245, 238, 0.78);
  --hair: rgba(28, 28, 26, 0.09);
}

body { overflow-x: clip; font-feature-settings: "kern" 1, "liga" 1; text-rendering: optimizeLegibility; }
html { scroll-padding-top: 6rem; }

/* — En-tête en verre dépoli, collé en haut — */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: var(--paper);
}

.top {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 40;
  padding-block: 1.1rem;
}

.top::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 transparent;
  transition: box-shadow 0.4s ease;
}

.is-scrolled .top::before { box-shadow: 0 1px 0 var(--hair); }

.top nav { gap: 0.25rem 1.6rem; font-size: 0.82rem; letter-spacing: 0.02em; }
.top nav a { color: var(--ink-soft); transition: color 0.3s ease, background-size 0.4s ease; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--ink); }
.theme { border-color: var(--hair); font-size: 0.68rem; letter-spacing: 0.1em; }
.theme:hover { background: transparent; border-color: var(--ink); color: var(--ink); }

@media (max-width: 760px) {
  .top { position: static; }
  .top::before { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); }
}

/* — Rythme : plus de filets entre les sections, l'espace suffit — */
.block { border-top: 0; padding-block: clamp(4.5rem, 10vw, 8.5rem); }
.block + .block, .alert + .block { padding-top: clamp(3.5rem, 8vw, 7rem); }

/* — Une seule échelle de titres — */
main .block .block-head h2 {
  font-size: clamp(2.1rem, 4.2vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.005em;
  max-width: 15ch;
}

.block-head { gap: 1.1rem; }
.block-head .label { display: flex; align-items: center; gap: 0.15rem; }
.intro, .domains-sub { color: var(--ink-soft); }

/* — Boutons — */
.btn {
  min-height: 46px;
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
}
.btn:hover { background: var(--ink); color: var(--paper); box-shadow: 0 16px 30px -18px rgba(28, 28, 26, 0.55); }

/* — Encadré d'urgence et « L'essentiel » : une surface, pas un cadre — */
.alert {
  border: 0;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--surface-shadow);
  padding: clamp(1.75rem, 4vw, 3rem);
}
.alert h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.25; max-width: 18ch; }
.alert ol { gap: 1rem; }
.alert li { grid-template-columns: 2.25rem 1fr; align-items: center; color: var(--ink); }
.alert li::before {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--hair);
  font-size: 0.72rem;
  color: var(--ink-soft);
}

/* — Étapes : numéros cerclés reliés par un trait — */
.steps.four { gap: 2rem; }
.steps.four li { position: relative; border-top: 0; padding-top: 0; gap: 0.7rem; }
.steps.four .n {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 0.9rem;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--surface-shadow), inset 0 0 0 1px var(--hair);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.steps.four h3 { font-size: 1.2rem; line-height: 1.3; }
.steps.four p { color: var(--ink-soft); }

@media (min-width: 761px) {
  .steps.four li::after {
    content: "";
    position: absolute;
    top: 23px;
    left: 62px;
    right: calc(-2rem + 14px);
    height: 1px;
    background: var(--hair);
  }
  .steps.four li:last-child::after { display: none; }
}

/* La version sombre des étapes (pages de domaine dans une bande encre) garde ses couleurs */
.sumi .steps.four .n { background: transparent; color: var(--ink); }

/* — Tarifs : le prix au premier plan — */
.price-wrap { display: grid; gap: 2rem; align-content: start; }

.price-card {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--surface-shadow);
}
.price-card .label { margin-bottom: 0.4rem; }
.price-big { margin: 0; display: flex; align-items: baseline; gap: 0.6rem; font-family: var(--serif); line-height: 1; }
.price-big span { font-size: clamp(3.4rem, 7vw, 5rem); font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price-big small { font-size: 1rem; letter-spacing: 0.12em; color: var(--mute); }
.price-meta { margin: 0.4rem 0 0; font-size: 0.95rem; color: var(--ink); }
.price-text { margin: 0 0 1rem; max-width: 40ch; color: var(--ink-soft); }

.fees-plain { border-top: 0; }
.fees-plain div { border-bottom: 0; border-top: 1px solid var(--hair); padding-block: 1.4rem; }
.fees-plain dd { color: var(--ink-soft); }

/* — Documents à apporter : deux colonnes, coches cerclées — */
.checklist { gap: 1rem 2.5rem; }
.checklist li { grid-template-columns: 22px 1fr; gap: 0.9rem; align-items: center; }
.checklist li::before {
  width: 20px;
  height: 20px;
  border: 1px solid var(--hair);
  border-radius: 50%;
  transform: none;
  background:
    linear-gradient(var(--ink), var(--ink)) no-repeat 50% 50% / 6px 6px;
  -webkit-mask: radial-gradient(circle, #000 2.6px, transparent 3px) 50% 50% / 100% 100% no-repeat, linear-gradient(#000, #000);
  -webkit-mask-composite: source-over;
  mask: none;
  background: radial-gradient(circle, var(--ink) 0 2.4px, transparent 2.9px);
}
@media (min-width: 761px) {
  #preparer .checklist, #documents .checklist { grid-template-columns: 1fr 1fr; }
}

/* — Votre avocat : la citation respire — */
.pull {
  border-left: 0;
  padding-left: 0;
  max-width: 22ch;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.pull::before {
  content: "“";
  display: block;
  height: 0.55em;
  font-size: 2.6em;
  line-height: 1;
  color: var(--hair);
}
.facts { border-top: 0; }
.facts div { border-bottom: 0; border-top: 1px solid var(--hair); }

/* — Questions : questions en romain, signe + cerclé — */
.faq { border-top: 0; }
.faq details { border-bottom: 0; border-top: 1px solid var(--hair); }
.faq summary {
  align-items: center;
  padding-block: 1.35rem;
  font-family: var(--sans);
  font-size: 1.04rem;
  font-weight: 500;
  letter-spacing: 0;
  transition: color 0.3s ease;
}
.faq summary:hover { color: var(--ink-soft); }
.faq summary::after {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--hair);
  font-size: 1rem;
  line-height: 1;
  color: var(--ink);
  transition: transform 0.5s var(--ease-out), background-color 0.3s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); background: var(--surface); }
.faq .answer { padding: 0 3rem 1.6rem 0; line-height: 1.75; }

/* — Contact : la dernière carte, en encre — */
#contact .stack {
  gap: 1.75rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: var(--r-lg);
  color: #F6F3EC;
  background:
    radial-gradient(110% 65% at 12% 0%, var(--card-hi) 0%, transparent 62%),
    linear-gradient(180deg, var(--card-top) 0%, var(--card-bottom) 100%);
  box-shadow: var(--card-shadow), inset 0 0 0 1px var(--card-edge);
}
#contact .btn { background: #F6F3EC; border-color: #F6F3EC; color: #1C1C1A; }
#contact .btn:hover { background: #FFFFFF; color: #1C1C1A; }
#contact .contact-list { gap: 0; }
#contact .contact-list div { padding-block: 1.1rem; border-bottom: 0; border-top: 1px solid rgba(246, 243, 236, 0.14); }
#contact .contact-list dt { color: rgba(246, 243, 236, 0.55); }
#contact .contact-list dd { color: #F6F3EC; }

/* — Pages de domaine : la bande d'appel devient une carte — */
.cta-band {
  max-width: 1120px;
  margin: 0 auto clamp(2rem, 5vw, 4rem);
  padding: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  color: #F6F3EC;
  background:
    radial-gradient(110% 65% at 12% 0%, var(--card-hi) 0%, transparent 62%),
    linear-gradient(180deg, var(--card-top) 0%, var(--card-bottom) 100%);
  box-shadow: var(--card-shadow), inset 0 0 0 1px var(--card-edge);
}
.cta-inner { padding: clamp(2rem, 5vw, 3.25rem); }
.cta-band .btn { background: #F6F3EC; border-color: #F6F3EC; color: #1C1C1A; }
.cta-band .btn:hover { background: #FFFFFF; color: #1C1C1A; }
.cta-band h2 { color: #F6F3EC; }

.lines, .vigil, .glossary, .others { border-top: 0; }
.lines li, .vigil div, .glossary div:not(.letter), .others a { border-bottom: 0; border-top: 1px solid var(--hair); }
.vigil dt::before { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }

/* — Pied de page — */
.foot { border-top: 1px solid var(--hair); padding-block: 3.5rem 4rem; }
.foot h3 { letter-spacing: 0.2em; }
.foot p { color: var(--mute); }

/* — Focus clavier visible partout, discret — */
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible, .pin:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

.steps.four li { align-content: start; grid-template-rows: auto auto 1fr; }

/* Présentation de l'accueil dans une carte blanche */
.hero .hero-text {
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--surface-shadow);
  overflow: hidden;
}
@media (min-width: 761px) {
  .hero-enso { right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(5rem, 7vw, 6.5rem); }
}



/* Contraste papier / cartes : fond crème plus profond, cartes blanc chaud, ombre allégée
   (mode clair uniquement ; les blocs sombres, plus spécifiques, gardent leurs valeurs) */
:root {
  --paper: #F1EEE5;
  --wash: #E9E5DA;
  --line: #D6D3C7;
  --surface: #FEFDFA;
  --surface-shadow: 0 0 0 1px rgba(40, 36, 26, 0.045), 0 1px 2px rgba(40, 36, 26, 0.04), 0 22px 44px -30px rgba(40, 36, 26, 0.22);
  --glass: rgba(241, 238, 229, 0.8);
}

/* ════════════════════════════════════════════════════════════════
   JAPONAIS × FUTURISTE
   Papier à grille (genkō yōshi) en filigrane, détails techniques en
   caractères monospace, boutons noirs nets, données affichées comme
   sur un instrument.
   ════════════════════════════════════════════════════════════════ */
:root {
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --dot: rgba(28, 28, 26, 0.07);
}

/* Grille de points très fine sur le fond */
body {
  background-image: radial-gradient(var(--dot) 1px, transparent 1.3px);
  background-size: 28px 28px;
  background-position: -14px -14px;
}

/* Détails techniques en monospace */
.label, .hero-role, .iv-count, .iv-source, .iv-coord, .price-meta,
.crumbs, .foot h3, .contact-list dt, .fees dt, .facts dt, .theme {
  font-family: var(--mono);
}
.label { font-size: 0.68rem; letter-spacing: 0.16em; }
.label .num { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; margin-right: 0.75rem; padding: 0.15rem 0.45rem; border: 1px solid var(--hair); border-radius: 999px; color: var(--ink); }
.hero-role { font-size: clamp(0.82rem, 1.2vw, 0.95rem); letter-spacing: 0.14em; }

/* Boutons noirs, texte monospace, flèche qui glisse */
.btn {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  gap: 1rem;
}
.btn span { display: inline-block; transition: transform 0.5s var(--ease-out); }
.btn:hover span { transform: translate(2px, -2px); }

/* Cartes des domaines : index technique */
.dcard-n { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; }
.dcard-list li { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.02em; }
.dcard-foot { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; }

/* Carte de France : coordonnées du lieu choisi */
.iv-coord {
  margin: 0.6rem 0 0;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.iv-coord::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sapin);
  box-shadow: 0 0 0 4px rgba(31, 61, 46, 0.12);
}
.iv-count span { font-family: var(--mono); font-size: 1.4rem; font-weight: 500; }
.iv-label-text { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; }
#iv-select { font-family: var(--mono); font-size: 0.95rem; }

/* Prix */
.price-big small { font-family: var(--mono); font-size: 0.8rem; }
.price-meta { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }

/* Coordonnées du contact en monospace, comme une fiche */
#contact .contact-list dd { font-family: var(--mono); font-size: 0.95rem; letter-spacing: 0.01em; }

/* Présentation sans carte : texte posé directement sur le papier */
.hero .hero-text { padding: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }

/* ════════ Menu burger ════════ */
.top-right { gap: 0.9rem; flex-wrap: nowrap; }
.top-right .btn.top-rdv { display: inline-flex; }
.top nav:not(.menu-nav) { display: none; }

.brand, .burger { position: relative; z-index: 62; }

.burger {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
.burger span {
  grid-area: 1 / 1;
  width: 18px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.5s var(--ease-out);
}
.burger span:first-child { transform: translateY(-3.5px); }
.burger span:last-child { transform: translateY(3.5px); }
.burger:hover { border-color: var(--ink); }

.menu-open .burger { background: transparent; border-color: rgba(246, 243, 236, 0.3); color: #F6F3EC; }
.menu-open .burger span:first-child { transform: rotate(45deg); }
.menu-open .burger span:last-child { transform: rotate(-45deg); }
.menu-open { overflow: hidden; }
.menu-open body { overflow: hidden; }

.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 61;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: calc(env(safe-area-inset-top, 0px) + 6.5rem) max(24px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 2rem) max(24px, env(safe-area-inset-left, 0px));
  color: #F6F3EC;
  background:
    radial-gradient(80% 60% at 85% 0%, #33322E 0%, transparent 60%),
    linear-gradient(180deg, #1F1E1B 0%, #121210 100%);
  opacity: 0;
  transition: opacity 0.45s ease;
  overflow-y: auto;
}
.menu-open .menu-panel { opacity: 1; }

.menu-nav { width: 100%; max-width: 1120px; margin: 0 auto; align-self: center; }
.menu-nav ul { list-style: none; margin: 0; padding: 0; display: grid; }
.menu-nav li {
  border-top: 1px solid rgba(246, 243, 236, 0.1);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.7s var(--ease-out);
  transition-delay: calc(0.08s + var(--i) * 0.05s);
}
.menu-nav li:last-child { border-bottom: 1px solid rgba(246, 243, 236, 0.1); }
.menu-open .menu-nav li { opacity: 1; transform: none; }

.menu-nav a {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  padding-block: clamp(0.7rem, 1.6vw, 1.05rem);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 4.6vw, 3.1rem);
  line-height: 1.1;
  color: #F6F3EC;
  transition: color 0.3s ease, padding-left 0.5s var(--ease-out);
}
.menu-nav a:hover, .menu-nav a:focus-visible { color: #A9C8B5; padding-left: 0.5rem; }
.menu-nav a[aria-current="page"] { color: #A9C8B5; }
.menu-n { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; color: rgba(246, 243, 236, 0.45); min-width: 2ch; }

.menu-foot {
  width: 100%;
  max-width: 1120px;
  margin: 2rem auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(246, 243, 236, 0.6);
}
.menu-foot p { margin: 0; line-height: 1.8; }
.menu-foot .theme { color: #F6F3EC; border-color: rgba(246, 243, 236, 0.3); }
.menu-foot .theme:hover { border-color: #F6F3EC; color: #F6F3EC; }

@media (max-width: 760px) {
  .top { flex-wrap: nowrap; }
  .top-right .btn.top-rdv { display: inline-flex; min-height: 40px; padding: 0.4rem 0.95rem; font-size: 0.68rem; }
}
@media (max-width: 360px) {
  .top-right .btn.top-rdv { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-panel, .menu-nav li { transition: none; }
}

.top .menu-nav a { color: #F6F3EC; background: none; padding-bottom: clamp(0.7rem, 1.6vw, 1.05rem); }
.top .menu-nav a:hover, .top .menu-nav a:focus-visible, .top .menu-nav a[aria-current="page"] { color: #A9C8B5; }

/* ════════ Mouvement ════════
   Une seule courbe pour tout le site, longue et douce à l'arrivée.
   Les éléments montent de quelques pixels en se révélant, en cascade. */
:root { --ease-ive: cubic-bezier(0.16, 1, 0.3, 1); }
html { scroll-behavior: smooth; }

.top { transition: padding 0.6s var(--ease-ive); }
.is-scrolled .top { padding-block: 0.7rem; }
.seal { transition: transform 0.8s var(--ease-ive); }
.brand:hover .seal { transform: rotate(0deg) scale(1.04); }

/* Révélation au défilement (seulement si le script est actif) */
.rv-on .rv {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(0.985);
  transition: opacity 1.1s var(--ease-ive), transform 1.3s var(--ease-ive);
  transition-delay: var(--rv-d, 0ms);
  will-change: opacity, transform;
}
.rv-on .rv.in { opacity: 1; transform: none; }

/* Lumière qui suit le pointeur sur les cartes noires */
.dcard, .iv-map, #contact .stack { --mx: 50%; --my: 0%; }
.dcard::after, .iv-map::after, #contact .stack::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.07), transparent 60%);
  opacity: 0;
  transition: opacity 0.8s var(--ease-ive);
}
.dcard:hover::after, .iv-map:hover::after, #contact .stack:hover::after { opacity: 1; }
#contact .stack { position: relative; isolation: isolate; }
.dcard > *, #contact .stack > * { position: relative; z-index: 1; }

/* Cartes : élévation plus lente et plus douce */
.dcard { transition: transform 0.9s var(--ease-ive), box-shadow 0.9s var(--ease-ive); }
.dcard:hover { transform: translateY(-8px); }
.dcard:active { transform: translateY(-4px) scale(0.995); }

/* Boutons : légère pression au clic */
.btn, .burger, .dcard-go { transition-timing-function: var(--ease-ive); }
.btn:active, .burger:active { transform: scale(0.97); }

/* Questions : ouverture en fondu */
.faq details[open] .answer { animation: rv-fade 0.7s var(--ease-ive) both; }
@keyframes rv-fade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv-on .rv { opacity: 1; transform: none; transition: none; }
  .dcard:hover, .dcard:active { transform: none; }
}

/* ════════ Mouvement, deuxième passe ════════ */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Révélation : fondu, montée, mise au point (propriétés séparées pour laisser
   « transform » libre aux survols et inclinaisons) */
.rv-on .rv {
  opacity: 0;
  transform: none;
  translate: 0 40px;
  scale: 0.98;
  filter: blur(8px);
  transition:
    opacity 1.3s var(--ease-ive),
    translate 1.5s var(--ease-ive),
    scale 1.5s var(--ease-ive),
    filter 1.1s var(--ease-ive);
  transition-delay: var(--rv-d, 0ms);
}
.rv-on .rv.in { opacity: 1; translate: 0 0; scale: 1; filter: none; transform: none; }
.rv-on .dcard.rv.in { transform: none; }

/* Titres : chaque mot sort de sous une ligne invisible */
.split .wd { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.split .wi {
  display: inline-block;
  translate: 0 108%;
  rotate: 3deg;
  transform-origin: 0 100%;
  transition: translate 1.25s var(--ease-ive), rotate 1.25s var(--ease-ive);
  transition-delay: calc(var(--wi) * 70ms + 150ms);
}
.rv.in .split .wi, .split.in .wi { translate: 0 0; rotate: 0deg; }

/* Cartes inclinables : la boucle d'animation gère le mouvement, la transition ne garde que l'ombre */
.tilt-on .dcard { transition: box-shadow 0.9s var(--ease-ive); transform-style: preserve-3d; will-change: transform; }
.tilt-on .dcard:hover, .tilt-on .dcard:active { transform: none; }

/* Boutons aimantés : le déplacement est amorti */
.btn, .burger, .dcard-go { transition: translate 0.7s var(--ease-ive), transform 0.6s var(--ease-ive), background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.6s var(--ease-ive); }

/* En-tête qui s'efface en descendant (ordinateur) */
.top { transition: padding 0.6s var(--ease-ive), translate 0.8s var(--ease-ive), opacity 0.6s var(--ease-ive); }
.hdr-hidden .top { translate: 0 -110%; opacity: 0; }
.hdr-hidden .top:focus-within { translate: 0 0; opacity: 1; }

/* Photos : la parallaxe est amortie par la boucle, pas de transition CSS */
.hero-photos { will-change: translate; }

/* Transition fluide entre les pages (navigateurs récents) */
@view-transition { navigation: auto; }
.top { view-transition-name: entete; }
::view-transition-old(root) { animation: vt-out 0.45s var(--ease-ive) both; }
::view-transition-new(root) { animation: vt-in 0.8s var(--ease-ive) both; }
@keyframes vt-out { to { opacity: 0; translate: 0 -14px; filter: blur(4px); } }
@keyframes vt-in { from { opacity: 0; translate: 0 22px; filter: blur(6px); } }

@media (prefers-reduced-motion: reduce) {
  .rv-on .rv, .split .wi { opacity: 1; translate: none; scale: none; filter: none; rotate: none; transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .hdr-hidden .top { translate: none; opacity: 1; }
}

/* Pile de photos : profondeur selon le rang, sans découpe pendant les mouvements */
.portrait-space { clip-path: none; }
.portrait-deck-frame { will-change: transform; transition: box-shadow 0.8s var(--ease-ive); }
.portrait-deck-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #1C1C1A;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s var(--ease-ive);
}
.portrait-deck-frame[data-slot="0"] { box-shadow: 0 2px 4px rgba(32, 28, 20, 0.06), 0 30px 50px -28px rgba(32, 28, 20, 0.45); }
.portrait-deck-frame[data-slot="1"] { box-shadow: 0 2px 6px rgba(32, 28, 20, 0.08); }
.portrait-deck-frame[data-slot="1"]::after { opacity: 0.05; }
.portrait-deck-frame[data-slot="2"] { box-shadow: 0 2px 6px rgba(32, 28, 20, 0.06); }
.portrait-deck-frame[data-slot="2"]::after { opacity: 0.1; }
.portrait-space.is-dragging .portrait-deck-frame[data-slot="0"] { box-shadow: 0 4px 10px rgba(32, 28, 20, 0.08), 0 44px 70px -30px rgba(32, 28, 20, 0.5); }

/* ════════ Anti-scintillement (Safari, écrans tactiles) ════════
   1. Pas de flou animé : les révélations n'utilisent que l'opacité et le déplacement.
   2. En-tête fixe et opaque : plus de verre dépoli ni de disparition pendant le défilement.
   3. Pas de « will-change » permanent. */
.rv-on .rv {
  filter: none;
  transition: opacity 1.2s var(--ease-ive), translate 1.4s var(--ease-ive), scale 1.4s var(--ease-ive);
  transition-delay: var(--rv-d, 0ms);
}
.rv-on .rv.in { filter: none; }

.top::before {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--paper);
}
.hdr-hidden .top { translate: none; opacity: 1; }
.top { transition: padding 0.6s var(--ease-ive); transform: translateZ(0); }

.hero-photos, .portrait-deck-frame, .tilt-on .dcard { will-change: auto; }
.split .wd { transform: translateZ(0); }

/* Anti-scintillement, deuxième passe : pas de calques forcés, pas de motif de fond sur écran tactile */
.split .wd, .top { transform: none; }
@media (pointer: coarse), (hover: none) {
  body { background-image: none; }
  .dcard, .iv-map, #contact .stack, .price-card { box-shadow: 0 18px 36px -26px rgba(28, 28, 26, 0.35); }
  .dcard::after, .iv-map::after, #contact .stack::after { display: none; }
  .reveal, .portrait-space { animation: none !important; }
}

/* Révélation simple sur écran tactile : fondu et montée, rien d'autre */
@media (pointer: coarse), (hover: none) {
  .rv-on .rv { translate: 0 24px; scale: 1; transition: opacity 0.9s var(--ease-ive), translate 1s var(--ease-ive); transition-delay: var(--rv-d, 0ms); }
  .rv-on .rv.in { translate: 0 0; }
}

/* Essai : carte du prix en vert sapin très foncé */
.price-card {
  color: #F3F1EA;
  background:
    radial-gradient(110% 70% at 12% 0%, #1C3326 0%, transparent 62%),
    linear-gradient(180deg, #13261B 0%, #0C1A12 100%);
  box-shadow: 0 30px 60px -36px rgba(10, 26, 18, 0.6), 0 2px 6px -2px rgba(10, 26, 18, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.price-card .label { color: rgba(243, 241, 234, 0.6); }
.price-big span { color: #F3F1EA; }
.price-big small { color: rgba(243, 241, 234, 0.55); }
.price-meta { color: rgba(243, 241, 234, 0.85); }
.price-text { color: rgba(243, 241, 234, 0.72); }
.price-card .btn { background: #F3F1EA; border-color: #F3F1EA; color: #0C1A12; }
.price-card .btn:hover { background: #FFFFFF; color: #0C1A12; }

/* Toutes les cartes sombres en vert sapin très foncé */
:root {
  --card-hi: #1C3326;
  --card-top: #13261B;
  --card-bottom: #0C1A12;
  --card-shadow: 0 30px 60px -36px rgba(10, 26, 18, 0.6), 0 2px 6px -2px rgba(10, 26, 18, 0.2);
  --card-shadow-hover: 0 44px 80px -40px rgba(10, 26, 18, 0.65), 0 4px 10px -4px rgba(10, 26, 18, 0.24);
  --card-edge: rgba(255, 255, 255, 0.07);
}
.dcard-go, #contact .btn, .cta-band .btn { color: #0C1A12; }
#contact .btn:hover, .cta-band .btn:hover { color: #0C1A12; }
.iv-label-text { fill: #0C1A12; }

/* Menu plein écran en vert sapin très foncé */
.menu-panel {
  background:
    radial-gradient(80% 60% at 85% 0%, #1E3829 0%, transparent 60%),
    linear-gradient(180deg, #13261B 0%, #0A160F 100%);
}

/* ════════ Lumière sur les cartes vertes ════════
   Un halo vert pâle dérive très lentement sous la surface, comme une lueur dans du verre ;
   un liseré clair souligne le bord supérieur ; au survol, un reflet traverse la carte. */
.dcard, .iv-map, #contact .stack, .price-card, .cta-band { position: relative; isolation: isolate; overflow: hidden; }
.iv-map > :not(.glow):not(.sheen), .price-card > :not(.glow):not(.sheen), .cta-band > :not(.glow):not(.sheen) { position: relative; z-index: 1; }

.glow {
  position: absolute;
  z-index: 0;
  top: -35%;
  left: -25%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(150, 214, 178, 0.22), rgba(150, 214, 178, 0.07) 55%, transparent 75%);
  animation: glow-drift 16s ease-in-out infinite alternate;
  animation-delay: var(--gd, 0s);
}
@keyframes glow-drift {
  0%   { translate: 0 0; scale: 1; }
  50%  { translate: 38% 22%; scale: 1.15; }
  100% { translate: 70% 46%; scale: 0.95; }
}

.sheen {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(220, 245, 230, 0.11) 48%, rgba(255, 255, 255, 0.16) 50%, rgba(220, 245, 230, 0.11) 52%, transparent 65%);
  translate: -120% 0;
  transition: translate 1.4s var(--ease-ive);
}
.dcard:hover .sheen, .iv-map:hover .sheen, #contact .stack:hover .sheen, .price-card:hover .sheen, .cta-band:hover .sheen { translate: 120% 0; }

/* Liseré de lumière sur le bord supérieur */
.dcard, .iv-map, #contact .stack, .price-card, .cta-band {
  box-shadow: var(--card-shadow), inset 0 1px 0 rgba(190, 235, 208, 0.16), inset 0 0 0 1px var(--card-edge);
}
.price-card { box-shadow: 0 30px 60px -36px rgba(10, 26, 18, 0.6), inset 0 1px 0 rgba(190, 235, 208, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.07); }

/* Lumière qui suit le pointeur : teinte verte pâle */
.dcard::after, .iv-map::after, #contact .stack::after {
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(170, 230, 196, 0.12), transparent 60%);
}

@media (hover: none) { .sheen { display: none; } }
@media (prefers-reduced-motion: reduce) { .glow { animation: none; } .sheen { transition: none; } }

/* ════════ Lumière au défilement ════════ */
/* Un reflet traverse chaque carte verte au moment où elle apparaît (tous écrans) */
@media (hover: none) { .sheen { display: block; } }
.lit .sheen { animation: sheen-pass 1.8s var(--ease-ive) both; }
.lit:hover .sheen { animation: none; }
@keyframes sheen-pass { from { translate: -120% 0; } to { translate: 120% 0; } }

/* Ordinateur : la lumière principale de la carte glisse avec le défilement */
.dcard, #contact .stack, .cta-band {
  background:
    radial-gradient(110% 65% at var(--lx, 12%) var(--ly, 0%), var(--card-hi) 0%, transparent 62%),
    linear-gradient(180deg, var(--card-top) 0%, var(--card-bottom) 100%);
}
.iv-map {
  background:
    radial-gradient(90% 60% at var(--lx, 70%) var(--ly, 10%), var(--card-hi) 0%, transparent 65%),
    linear-gradient(180deg, var(--card-top) 0%, var(--card-bottom) 100%);
}
.price-card {
  background:
    radial-gradient(110% 70% at var(--lx, 12%) var(--ly, 0%), #1C3326 0%, transparent 62%),
    linear-gradient(180deg, #13261B 0%, #0C1A12 100%);
}
@media (prefers-reduced-motion: reduce) { .lit .sheen { animation: none; } }

/* Lumières ralenties : tout se déplace lentement, comme une lumière naturelle */
.glow { animation-duration: 30s; }
.lit .sheen { animation: sheen-pass 4.2s cubic-bezier(0.45, 0, 0.2, 1) both; }
.sheen { transition: translate 2.8s cubic-bezier(0.45, 0, 0.2, 1); }
.dcard::after, .iv-map::after, #contact .stack::after { transition: opacity 1.4s var(--ease-ive); }

/* ════════ La lumière, reprise ════════
   Une seule source, immobile, placée au-dessus de la page.
   Elle ne bouge pas, ne balaie rien : elle révèle la matière.
   Chaque carte reçoit la même lumière : un dégradé vertical à peine
   perceptible, un fil de lumière sur l'arête supérieure, plus vif au centre,
   et une ombre en deux couches (contact et ambiance).
   Seul mouvement : quand une carte se pose, son arête s'allume. */
.glow, .sheen { display: none !important; }
.dcard::after, .iv-map::after, #contact .stack::after { display: none; }

.dcard, .iv-map, #contact .stack, .price-card, .cta-band {
  background: linear-gradient(180deg, #17301F 0%, #12261A 45%, #0D1C13 100%);
  box-shadow:
    0 1px 1px rgba(8, 20, 13, 0.18),
    0 10px 18px -12px rgba(8, 20, 13, 0.35),
    0 40px 70px -46px rgba(8, 20, 13, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Fil de lumière sur l'arête supérieure */
.dcard::before, .iv-map::before, #contact .stack::before, .price-card::before, .cta-band::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  inset-block-end: auto;
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(90deg, transparent, rgba(222, 244, 230, 0.6) 50%, transparent);
  pointer-events: none;
  opacity: 1;
  transition: opacity 1.6s var(--ease-ive) 0.5s;
}
.rv-on .rv:not(.in)::before, .rv-on .rv:not(.in) .dcard::before { opacity: 0; }

.dcard:hover {
  box-shadow:
    0 1px 1px rgba(8, 20, 13, 0.18),
    0 16px 26px -14px rgba(8, 20, 13, 0.4),
    0 56px 90px -50px rgba(8, 20, 13, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* ════════ Lumière légèrement mobile ════════
   La même source au-dessus de la page oscille très lentement de gauche à droite,
   comme le soleil derrière une fenêtre. Le reflet sur la surface et le fil
   de lumière de l'arête bougent ensemble, de quelques pour cent seulement. */
.dcard::after, .iv-map::after, #contact .stack::after, .price-card::after, .cta-band::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  top: -30%;
  left: -20%;
  right: -20%;
  height: 80%;
  inset-block-end: auto;
  border-radius: 0;
  opacity: 1;
  pointer-events: none;
  background: radial-gradient(50% 55% at 50% 30%, rgba(160, 214, 182, 0.13), rgba(160, 214, 182, 0.04) 55%, transparent 75%);
  animation: light-sway 18s ease-in-out infinite alternate;
  animation-delay: var(--sway-d, 0s);
}

.dcard::before, .iv-map::before, #contact .stack::before, .price-card::before, .cta-band::before {
  left: -10%;
  right: -10%;
  background: linear-gradient(90deg, transparent 15%, rgba(222, 244, 230, 0.6) 50%, transparent 85%);
  animation: light-sway 18s ease-in-out infinite alternate;
  animation-delay: var(--sway-d, 0s);
}

.dcard:nth-child(2) { --sway-d: -6s; }
.dcard:nth-child(3) { --sway-d: -12s; }
.iv-map { --sway-d: -3s; }
.price-card { --sway-d: -9s; }

@keyframes light-sway {
  from { translate: -9% 0; }
  to   { translate: 9% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dcard::after, .iv-map::after, #contact .stack::after, .price-card::after, .cta-band::after,
  .dcard::before, .iv-map::before, #contact .stack::before, .price-card::before, .cta-band::before { animation: none; }
}

/* Sceau rouge au nom de « Maître Bacadi » : tampon rectangulaire */
.seal.seal-name {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: 36px;
  padding: 0 0.95rem;
  border-radius: 4px;
  font-family: var(--serif);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  line-height: 1;
  transform: rotate(-1.5deg);
  box-shadow: inset 0 0 0 2px var(--shu), inset 0 0 0 3px var(--on-shu);
}
.brand:hover .seal.seal-name { transform: rotate(0deg); }
@media (max-width: 380px) { .seal.seal-name { font-size: 0.74rem; padding: 0 0.7rem; } }

/* Noms de section plus grands et bien lisibles */
.block-head .label {
  font-size: clamp(0.82rem, 1.1vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ink);
  gap: 0;
}
.block-head .label .num {
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.25rem 0.6rem;
  margin-right: 0.85rem;
  border-color: var(--ink);
  color: var(--ink);
}
.cta-band .label, .dcard .label, .price-card .label { font-size: 0.72rem; }

/* Carte : distinguer nettement les lieux de la frontière
   La frontière s'efface (trait fin et voilé) ; chaque lieu devient un point
   plein, plus gros, entouré d'un halo vert pâle toujours visible. */
.iv-outline { stroke: rgba(246, 243, 236, 0.32); stroke-width: 0.9; }
.iv-deps { stroke: rgba(246, 243, 236, 0.08); }
.pin-dot { r: 4px; opacity: 1; fill: #FFFFFF; }
.pin-halo { r: 9px; fill: rgba(169, 214, 186, 0.22); }
.pin:hover .pin-halo, .pin:focus-visible .pin-halo { fill: rgba(169, 214, 186, 0.38); }
@media (max-width: 650px) {
  .pin-dot { r: 5px; }
  .pin-halo { r: 14px; }
}

/* Informations utiles : pas de filet au-dessus de la première ligne */
#contact .contact-list div:first-child { border-top: 0; padding-top: 0; }

/* ════════ Numéros de section : un cercle presque fermé qui se trace ════════
   Comme un ensō : le trait fait 92 % du tour et laisse une ouverture.
   Il se dessine quand la section apparaît. */
@property --p { syntax: "<percentage>"; inherits: false; initial-value: 92%; }

.block-head .label .num {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  margin-right: 1rem;
  border: 0;
  border-radius: 50%;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.block-head .label .num::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--ink) 0 var(--p), transparent var(--p) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1.5px));
}

.rv-on .rv .label .num::before { --p: 0%; transition: --p 1.9s var(--ease-ive) 0.35s; }
.rv-on .rv.in .label .num::before { --p: 92%; }

@media (prefers-reduced-motion: reduce) {
  .rv-on .rv .label .num::before { --p: 92%; transition: none; }
}

/* Numéros : l'ensō japonais remplace le cercle fin */
.block-head .label .num::before { display: none; }
.block-head .label .num { width: 46px; height: 46px; font-size: 0.82rem; }
.block-head .label .num svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.block-head .label .num svg path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 11;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.rv-on .rv .label .num svg path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(0.6, 0.1, 0.2, 1) 0.35s; }
.rv-on .rv.in .label .num svg path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .rv-on .rv .label .num svg path { stroke-dashoffset: 0; transition: none; }
}

/* Menu ouvert : verrouiller le défilement sans faire du body un conteneur de défilement (sinon l en-tête collant disparaît) */
.menu-open body { overflow: visible; overflow-x: clip; }

/* « Avocat au Barreau de Paris » en vert sapin */
.hero-role { color: var(--sapin); }

/* Accueil : deux boutons empilés, même largeur */
.hero-cta-stack { flex-direction: column; align-items: flex-start; gap: 12px; }
.hero-cta-stack .btn { width: 260px; max-width: 100%; justify-content: space-between; }
.btn.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.btn-ghost:hover { background: var(--ink); color: var(--paper); }

.stack > p { margin: 0; max-width: 60ch; color: var(--ink-soft); }

/* ════════ Le cabinet : parcours en cartes vertes, reliées par une frise ════════ */
.pcards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; position: relative; }
.pcard { min-height: 0; gap: 1rem; cursor: default; }
.pcard-when { margin: 0; display: flex; align-items: center; gap: 0.75rem; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; color: rgba(246, 243, 236, 0.7); }
.pcard-when span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(246, 243, 236, 0.3);
  font-size: 0.7rem;
  color: #F6F3EC;
}
.pcard h3 { margin-top: 0.75rem; font-size: clamp(1.4rem, 2vw, 1.7rem); line-height: 1.15; color: #F6F3EC; }
.pcard-role { margin: 0; font-weight: 500; line-height: 1.55; color: #F6F3EC; }
.pcard-text { margin: 0; line-height: 1.7; color: rgba(246, 243, 236, 0.74); }
.pcard-list { margin: 0; display: grid; gap: 0; }
.pcard-list div { padding-block: 0.7rem; border-top: 1px solid rgba(246, 243, 236, 0.12); }
.pcard-list div:first-child { border-top: 0; padding-top: 0; }
.pcard-list dt { font-weight: 500; line-height: 1.4; color: #F6F3EC; }
.pcard-list dd { margin: 0.2rem 0 0; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.02em; color: rgba(246, 243, 236, 0.6); }

@media (min-width: 761px) { .pcards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) {
  .pcards { grid-template-columns: repeat(4, 1fr); gap: 18px; padding-top: 34px; }
  /* Frise : un trait relie les quatre étapes, un point par carte */
  .pcards::before { content: ""; position: absolute; top: 9px; left: 2%; right: 2%; height: 1px; background: var(--hair); }
  .pcard { overflow: visible; }
  .pcard > .pcard-when::before {
    content: "";
    position: absolute;
    top: -30px;
    left: 2rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--sapin);
    box-shadow: 0 0 0 4px var(--paper);
  }
}

/* Parcours : cartes fermées (la lumière reste à l'intérieur), pastilles numérotées rondes */
@media (min-width: 1100px) {
  .pcards { padding-top: 0; }
  .pcards::before, .pcard > .pcard-when::before { display: none; }
  .pcard { overflow: hidden; }
}
.pcard-when span { flex: none; }
.pcard-when { align-items: flex-start; line-height: 1.5; }
.pcard-when span { margin-top: -0.35rem; }

/* ════════ Parcours : une grande carte, une frise chronologique ════════ */
.ptl {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  border-radius: var(--r-lg);
  color: #F6F3EC;
  background: linear-gradient(180deg, #17301F 0%, #12261A 45%, #0D1C13 100%);
  box-shadow: 0 1px 1px rgba(8, 20, 13, 0.18), 0 10px 18px -12px rgba(8, 20, 13, 0.35), 0 40px 70px -46px rgba(8, 20, 13, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.ptl::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: -10%;
  right: -10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 15%, rgba(222, 244, 230, 0.6) 50%, transparent 85%);
  animation: light-sway 18s ease-in-out infinite alternate;
}
.ptl::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -30%;
  left: -20%;
  right: -20%;
  height: 80%;
  pointer-events: none;
  background: radial-gradient(50% 55% at 50% 30%, rgba(160, 214, 182, 0.12), rgba(160, 214, 182, 0.035) 55%, transparent 75%);
  animation: light-sway 18s ease-in-out infinite alternate;
}

.ptl-steps { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 2.25rem; }
.ptl-step { position: relative; display: grid; gap: 0.9rem; align-content: start; padding-left: 2.25rem; }

/* Frise verticale (téléphone, tablette) */
.ptl-steps::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 7px; width: 1px; background: rgba(246, 243, 236, 0.18); }
.ptl-step::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #12261A;
  box-shadow: inset 0 0 0 1.5px #F6F3EC;
}
.ptl-step .pcard-when { display: flex; align-items: baseline; gap: 0.6rem; }
.ptl-step .pcard-when span { width: auto; height: auto; border: 0; margin: 0; font-size: 0.74rem; color: rgba(246, 243, 236, 0.5); }
.ptl-step h3 { margin-top: 0.25rem; }

/* Frise horizontale (ordinateur) : un trait traverse la carte, un point par étape */
@media (min-width: 1000px) {
  .ptl-steps { grid-template-columns: repeat(4, 1fr); gap: 2.25rem; padding-top: 2.4rem; }
  .ptl-steps::before { top: 5px; bottom: auto; left: 0; right: 0; width: auto; height: 1px; }
  .ptl-step { padding-left: 0; padding-right: 0.5rem; }
  .ptl-step::before { top: -2.4rem; left: 0; }
  .ptl-step + .ptl-step { border-left: 1px solid rgba(246, 243, 236, 0.08); padding-left: 2.25rem; margin-left: -1.125rem; }
  .ptl-step + .ptl-step::before { left: 0; }
}

@media (prefers-reduced-motion: reduce) { .ptl::before, .ptl::after { animation: none; } }

@media (min-width: 1000px) {
  .ptl-step + .ptl-step::before { left: 2.25rem; }
}
.ptl-step h3 { font-size: clamp(1.35rem, 1.9vw, 1.6rem); line-height: 1.2; color: #F6F3EC; }


/* Liens — Informations utiles */
.contact-list a.cl-link{color:inherit;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .6s var(--ease-ive),opacity .3s}
.contact-list a.cl-link:hover,.contact-list a.cl-link:focus-visible{background-size:100% 1px}
.menu-foot a.cl-link, .cta-band a.cl-link{color:inherit;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .6s var(--ease-ive)}
.menu-foot a.cl-link:hover, .cta-band a.cl-link:hover{background-size:100% 1px}

/* Réseaux sociaux — Informations utiles */
.contact-list .socials { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.contact-list .socials a {
  display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 999px;
  border: 1px solid rgba(246, 243, 236, 0.28); color: #F6F3EC; font-size: 1.05rem; text-decoration: none;
  transition: background-color .5s var(--ease-ive), color .5s var(--ease-ive), border-color .5s var(--ease-ive), transform .5s var(--ease-ive);
}
.contact-list .socials a:hover, .contact-list .socials a:focus-visible { background: #F6F3EC; color: #0C1A12; border-color: #F6F3EC; transform: translateY(-2px); }
.contact-list .socials svg { width: 1em; height: 1em; }

/* Réseaux sociaux — accueil, même forme que « Découvrir le cabinet » */
.hero-socials {
  display: flex; align-items: stretch; width: 260px; max-width: 100%; min-height: 48px;
  border: 1px solid var(--ink); border-radius: 999px; overflow: hidden;
}
.hero-socials a {
  flex: 1; display: grid; place-items: center; color: var(--ink); text-decoration: none; font-size: 1rem;
  transition: background-color .4s ease, color .4s ease;
}
.hero-socials a + a { border-left: 1px solid var(--ink); }
.hero-socials a:hover, .hero-socials a:focus-visible { background: var(--ink); color: var(--paper); }
.hero-socials svg { width: 1em; height: 1em; }

/* Carte d'urgence OQTF — page Droit des étrangers (rouge) */
.urgent {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon text" ". delays" ". btn";
  column-gap: clamp(1.25rem, 3vw, 2rem); row-gap: 1.6rem; align-items: start;
  max-width: 1120px; margin: 0 auto clamp(3rem, 6vw, 5rem); padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--r-lg); color: #F6EDEA; overflow: hidden;
  background: linear-gradient(160deg, #6A1E18 0%, #4E1511 55%, #360E0B 100%);
  box-shadow: 0 30px 60px -36px rgba(80, 16, 12, 0.7), 0 2px 6px -2px rgba(80, 16, 12, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.urgent-icon {
  grid-area: icon; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 999px;
  color: #FF7A66; background: rgba(255, 107, 87, 0.14); border: 1px solid rgba(255, 122, 102, 0.45);
  animation: urgent-pulse 2.4s var(--ease-ive) infinite;
}
@keyframes urgent-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 122, 102, 0.4); } 70%, 100% { box-shadow: 0 0 0 16px rgba(255, 122, 102, 0); } }
.urgent-icon svg { width: 1.5rem; height: 1.5rem; }
.urgent-text { grid-area: text; }
.urgent-text h2 { margin: 0.35rem 0 0.6rem; font-family: var(--mono); font-weight: 500; font-size: clamp(1rem, 1.7vw, 1.2rem); text-transform: uppercase; letter-spacing: 0.16em; color: #FFFFFF; }
.urgent-text p { margin: 0; color: rgba(246, 237, 234, 0.8); max-width: 52ch; line-height: 1.6; }
.urgent-text p strong { color: #FFFFFF; font-weight: 600; }
.urgent-delays { grid-area: delays; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; max-width: 560px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.urgent-delays > div { padding: 1.25rem 0 0; }
.urgent-delays > div + div { padding-left: clamp(1rem, 3vw, 2rem); border-left: 1px solid rgba(255, 255, 255, 0.16); }
.urgent-delays dt { font-family: var(--serif); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; color: #FFFFFF; }
.urgent-delays dd { margin: 0.6rem 0 0; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(246, 237, 234, 0.65); }
.urgent .urgent-btn { grid-area: btn; justify-self: start; background: #FFFFFF; border-color: #FFFFFF; color: #7A1F17; white-space: nowrap; font-family: var(--mono); letter-spacing: 0.1em; }
.urgent .urgent-btn:hover { background: var(--shu); border-color: var(--shu); color: #FFFFFF; }
@media (max-width: 760px) {
  .urgent { grid-template-columns: 1fr; grid-template-areas: "icon" "text" "delays" "btn"; }
}
@media (prefers-reduced-motion: reduce) { .urgent-icon { animation: none; } }

/* Carte d'urgence — variante encre (refus implicite) */
.urgent.ink {
  background: linear-gradient(160deg, #2A2D33 0%, #1C1E22 55%, #121316 100%);
  box-shadow: 0 30px 60px -36px rgba(12, 13, 16, 0.7), 0 2px 6px -2px rgba(12, 13, 16, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: #EDEBE6;
}
.urgent.ink .urgent-icon { color: #F3F1EA; background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.28); animation: none; }
.urgent.ink .urgent-text p { color: rgba(237, 235, 230, 0.75); }
.urgent.ink .urgent-btn { color: #1C1E22; }
.urgent.ink .urgent-btn:hover { background: var(--sapin); border-color: var(--sapin); color: #FFFFFF; }
.urgent.ink { margin-top: clamp(1rem, 3vw, 2rem); }
.urgent-delays .urgent-ref { display: block; margin-top: 0.45rem; font-size: 0.66rem; letter-spacing: 0.04em; text-transform: none; color: rgba(246, 237, 234, 0.5); }

/* Note « recours suspensif » dans la carte OQTF */
.urgent-notes { grid-area: note; display: grid; gap: 0.75rem; max-width: 560px; }
.urgent-note { margin: 0; padding: 1.1rem 1.25rem; max-width: 560px; border-radius: 14px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(246, 237, 234, 0.82); line-height: 1.55; }
.urgent-note strong { color: #FFFFFF; font-weight: 600; margin-right: 0.25rem; }
.urgent-note .urgent-ref { display: block; margin-top: 0.4rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.04em; color: rgba(246, 237, 234, 0.5); }
.urgent:has(.urgent-notes) { grid-template-areas: "icon text" ". delays" ". note" ". btn"; }
@media (max-width: 760px) { .urgent:has(.urgent-notes) { grid-template-areas: "icon" "text" "delays" "note" "btn"; } }
.urgent.ink .urgent-note { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); color: rgba(237, 235, 230, 0.78); }

/* Références textuelles et jurisprudentielles : plus lisibles, sans étiquette */
.urgent .urgent-ref {
  display: block; margin-top: 0.6rem; padding: 0 0 0 0.7rem; border-left: 1px solid rgba(255, 255, 255, 0.35);
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.02em; text-transform: none; line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}
.vigil .ref {
  display: block; margin-top: 0.55rem; padding-left: 0.7rem; border-left: 1px solid rgba(31, 61, 46, 0.4);
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.02em; line-height: 1.5; color: var(--sapin);
}
.vigil .ref:empty { display: none; }
@media (max-width: 760px) { .urgent .urgent-btn { justify-self: center; } }

/* Carte — variante vert sapin (rendez-vous en préfecture) */
.urgent.sapin {
  margin-top: clamp(1rem, 3vw, 2rem);
  background: linear-gradient(160deg, #1C3326 0%, #13261B 55%, #0C1A12 100%);
  box-shadow: 0 30px 60px -36px rgba(10, 26, 18, 0.65), 0 2px 6px -2px rgba(10, 26, 18, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: #EEF2EC;
}
.urgent.sapin .urgent-icon { color: #CFE3D5; background: rgba(207, 227, 213, 0.08); border-color: rgba(207, 227, 213, 0.32); animation: none; }
.urgent.sapin .urgent-text p, .urgent.sapin .urgent-note { color: rgba(238, 242, 236, 0.78); }
.urgent.sapin .urgent-note { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); }
.urgent.sapin .urgent-btn { color: #13261B; }
.urgent.sapin .urgent-btn:hover { background: #CFE3D5; border-color: #CFE3D5; color: #0C1A12; }
.urgent:not(:has(.urgent-delays)):has(.urgent-notes) { grid-template-areas: "icon text" ". note" ". btn"; }
@media (max-width: 760px) { .urgent:not(:has(.urgent-delays)):has(.urgent-notes) { grid-template-areas: "icon" "text" "note" "btn"; } }

/* ── Page Droit des étrangers : cartes empilées ── */
.cards-stack { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); max-width: 1120px; margin: 0 auto clamp(4rem, 8vw, 6rem); }
.cards-stack .urgent { margin: 0; }

/* Frise « De la décision au jugement » */
.frise {
  max-width: 1120px; margin: 0 auto; padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--surface-shadow);
}
.frise-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); position: relative; }
.frise-steps::before, .frise-steps::after {
  content: ""; position: absolute; top: 1.4rem; left: 1.4rem; right: calc(25% - 1.4rem); height: 1px;
}
.frise-steps::before { background: var(--line, rgba(28, 28, 28, 0.14)); }
.frise-steps::after { background: var(--sapin); transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--ease-ive) 0.2s; }
.frise.in .frise-steps::after, .rv-on .frise:not(.rv) .frise-steps::after { transform: scaleX(1); }
.frise-step { position: relative; display: grid; gap: 0.55rem; align-content: start; }
.frise-dot {
  position: relative; z-index: 1; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--sapin); color: var(--sapin);
  font-family: var(--serif); font-weight: 700; font-size: 0.9rem; margin-bottom: 0.6rem;
  transition: background-color .6s var(--ease-ive), color .6s var(--ease-ive);
  transition-delay: calc(0.35s + var(--i) * 0.35s);
}
.frise.in .frise-dot { background: var(--sapin); color: #F3F1EA; }
.frise-when { margin: 0; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--shu); }
.frise-step h3 { margin: 0; font-size: 1.2rem; line-height: 1.3; color: var(--ink); }
.frise-text { margin: 0; color: var(--ink-soft, #4a4a4a); line-height: 1.6; font-size: 0.95rem; }
@media (max-width: 760px) {
  .frise-steps { grid-template-columns: 1fr; gap: 1.6rem; }
  .frise-steps::before, .frise-steps::after { top: 1.4rem; bottom: 1.4rem; left: 1.4rem; right: auto; width: 1px; height: auto; }
  .frise-steps::after { transform-origin: top; transform: scaleY(0); }
  .frise.in .frise-steps::after { transform: scaleY(1); }
  .frise-step { grid-template-columns: 2.8rem 1fr; column-gap: 1rem; }
  .frise-dot { grid-row: 1 / span 3; margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .frise-steps::after { transform: none; transition: none; } }

/* Toute autre demande */
.autre-card {
  max-width: 1120px; margin: 0 auto; display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1.1fr 1fr; align-items: center;
  padding: clamp(1.75rem, 4vw, 3rem); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--surface-shadow);
}
.autre-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.autre-list li { padding: 0.55rem 1rem; border-radius: 999px; border: 1px solid rgba(31, 61, 46, 0.28); color: var(--sapin); font-size: 0.92rem; background: rgba(31, 61, 46, 0.04); }
.autre-cta p { margin: 0 0 1.25rem; font-size: 1.05rem; line-height: 1.6; color: var(--ink); }
.autre-btns { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.autre-btns .btn-ghost { font-family: var(--mono); }
@media (max-width: 760px) { .autre-card { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .frise-steps::before, .frise-steps::after { display: none; }
  .frise-step:not(:last-child)::after {
    content: ""; position: absolute; left: 1.4rem; top: 2.8rem; bottom: -1.6rem; width: 1px; background: var(--sapin); opacity: 0.5;
  }
}
.urgent-delays > div:only-child { grid-column: 1 / -1; }

/* ════════════════════════════════════════════════════════════════
   FOND BLANC FUTURISTE
   Blanc froid, surfaces d'un blanc pur détachées par un filet et une
   ombre très légère, grille de points à peine visible.
   ════════════════════════════════════════════════════════════════ */
:root {
  --paper: #F9FAFA;
  --wash: #F1F3F3;
  --line: #E3E6E6;
  --hair: #E3E6E6;
  --surface: #FFFFFF;
  --surface-shadow: 0 0 0 1px rgba(16, 24, 22, 0.05), 0 1px 2px rgba(16, 24, 22, 0.04), 0 24px 48px -32px rgba(16, 24, 22, 0.18);
  --glass: rgba(249, 250, 250, 0.9);
  --dot: rgba(16, 24, 22, 0.055);
}
html, body { background-color: var(--paper); }

/* Bloc d'informations (honoraires, compagnies, envoi de la décision) */
.info-card { max-width: 1120px; margin: 0 auto; padding: clamp(1.75rem, 4vw, 3rem); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--surface-shadow); display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.info-grid { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); }
.info-grid.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.info-grid.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.info-item { display: grid; gap: 0.55rem; align-content: start; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.info-item h3 { margin: 0; font-size: 1.2rem; line-height: 1.3; color: var(--ink); }
.info-item p { margin: 0; color: var(--ink-soft, #4a4a4a); line-height: 1.6; }
.info-ref { display: block; margin-top: 0.2rem; padding-left: 0.7rem; border-left: 1px solid rgba(31, 61, 46, 0.4); font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.02em; line-height: 1.5; color: var(--sapin); }
.info-btns { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.info-btns .btn-ghost { font-family: var(--mono); }
@media (max-width: 760px) { .info-grid.n2, .info-grid.n3 { grid-template-columns: 1fr; } .info-btns { justify-content: center; } }

/* Second bouton dans la carte OQTF */
.urgent-btns { grid-area: btn; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.urgent .urgent-btns .urgent-btn { justify-self: auto; }
.urgent .urgent-btn2 { background: transparent; border-color: rgba(255, 255, 255, 0.55); color: #FFFFFF; font-family: var(--mono); letter-spacing: 0.08em; white-space: nowrap; }
.urgent .urgent-btn2:hover { background: rgba(255, 255, 255, 0.12); border-color: #FFFFFF; color: #FFFFFF; }
@media (max-width: 760px) { .urgent-btns { justify-content: center; } }

/* Pages légales */
.legal { max-width: 760px; margin: 0 auto clamp(4rem, 8vw, 6rem); display: grid; gap: clamp(2rem, 4vw, 2.75rem); }
.legal-sec { display: grid; gap: 0.9rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.legal-sec h2 { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.5rem); color: var(--sapin); }
.legal-sec p, .legal-sec li { margin: 0; line-height: 1.7; color: var(--ink-soft, #3f3f3f); }
.legal-sec ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.5rem; }
.legal-sec a { color: var(--sapin); text-decoration: underline; text-underline-offset: 3px; }
.legal-dl { margin: 0; display: grid; }
.legal-dl div { display: grid; grid-template-columns: 13rem 1fr; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.legal-dl dt { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute, #777); padding-top: 0.2rem; }
.legal-dl dd { margin: 0; color: var(--ink); }
.legal-date { margin: 0; font-family: var(--mono); font-size: 0.74rem; color: var(--mute, #777); }
.todo { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 6px; background: rgba(192, 57, 43, 0.1); color: var(--shu); font-family: var(--mono); font-size: 0.8em; }
.foot a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .legal-dl div { grid-template-columns: 1fr; gap: 0.25rem; } }

/* ════════ Fiches : trois situations côte à côte, détail à la demande ════════ */
.fiches { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.9rem, 1.6vw, 1.25rem); align-items: stretch; }
.fiche {
  position: relative; display: flex; flex-direction: column; gap: 0.9rem; padding: clamp(1.5rem, 2.4vw, 2rem);
  border-radius: var(--r-lg); color: #F3F1EC; overflow: hidden;
  background: linear-gradient(160deg, #6A1E18 0%, #4E1511 55%, #360E0B 100%);
  box-shadow: 0 30px 60px -36px rgba(40, 12, 10, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.fiche.ink { background: linear-gradient(160deg, #2A2D33 0%, #1C1E22 55%, #121316 100%); box-shadow: 0 30px 60px -36px rgba(12, 13, 16, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.fiche.sapin { background: linear-gradient(160deg, #1C3326 0%, #13261B 55%, #0C1A12 100%); box-shadow: 0 30px 60px -36px rgba(10, 26, 18, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.fiche-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.26); }
.fiche-icon svg { width: 1.25rem; height: 1.25rem; }
.fiche.rouge .fiche-icon { color: #FF7A66; background: rgba(255, 107, 87, 0.14); border-color: rgba(255, 122, 102, 0.45); animation: urgent-pulse 2.4s var(--ease-ive) infinite; }
.fiche h2 { margin: 0.4rem 0 0; font-family: var(--serif); font-weight: 700; font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.25; color: #FFFFFF; text-wrap: balance; }
.fiche-text { margin: 0; line-height: 1.6; font-size: 0.96rem; color: rgba(243, 241, 236, 0.78); }
.fiche-text strong { color: #FFFFFF; font-weight: 600; }
.fiche-key { margin: auto 0 0; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, 0.16); display: grid; grid-template-columns: auto 1fr; column-gap: 0.9rem; align-items: baseline; }
.fiche-num { font-family: var(--serif); font-weight: 700; font-size: clamp(2rem, 3.2vw, 2.6rem); line-height: 1; color: #FFFFFF; white-space: nowrap; }
.fiche-lab { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(243, 241, 236, 0.7); line-height: 1.4; }
.fiche-ref { display: block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.02em; line-height: 1.5; color: rgba(255, 255, 255, 0.6); text-transform: none; }
.fiche-key .fiche-ref { grid-column: 1 / -1; margin-top: 0.55rem; }
.fiche-more { border-top: 1px solid rgba(255, 255, 255, 0.16); }
.fiche > .fiche-text + .fiche-more { margin-top: auto; }
.fiche-more summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.95rem 0 0; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
.fiche-more summary::-webkit-details-marker { display: none; }
.fiche-more summary i { position: relative; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); transition: transform .5s var(--ease-ive), background-color .3s; }
.fiche-more summary i::before, .fiche-more summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.6rem; height: 1px; background: currentColor; transform: translate(-50%, -50%); }
.fiche-more summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.fiche-more[open] summary i { transform: rotate(45deg); }
.fiche-more summary:hover i { background: rgba(255, 255, 255, 0.12); }
.fiche-more summary:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 4px; border-radius: 6px; }
.fiche-more-in { display: grid; gap: 0.9rem; padding-top: 1rem; }
.fiche-line { margin: 0; font-size: 0.92rem; line-height: 1.55; color: rgba(243, 241, 236, 0.8); }
.fiche-line strong { color: #FFFFFF; font-weight: 600; }
.fiche-line .fiche-ref { margin-top: 0.3rem; }
.fiche-cta { max-width: 1120px; margin: clamp(1.25rem, 2.5vw, 1.75rem) auto clamp(4rem, 8vw, 6rem); display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.fiche-cta span { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; color: var(--ink); margin-right: 0.4rem; }
.fiche-cta .btn { font-family: var(--mono); letter-spacing: 0.08em; }
@media (max-width: 960px) { .fiches { grid-template-columns: 1fr; } .fiche-key { margin-top: 0.3rem; } }
@media (max-width: 760px) { .fiche-cta { justify-content: center; text-align: center; } .fiche-cta span { flex-basis: 100%; margin: 0; } }
@media (prefers-reduced-motion: reduce) { .fiche.rouge .fiche-icon { animation: none; } }
.fiches:has(details[open]) { align-items: start; }

/* Page « Le cabinet » : photo paysage et repères */
.cab-photo { max-width: 1120px; margin: 0 auto; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 9; background: #DCE0E0; box-shadow: var(--surface-shadow); }
.cab-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.cab-facts { max-width: 1120px; margin: clamp(1.25rem, 2.5vw, 1.75rem) auto clamp(4rem, 8vw, 6rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.cab-facts div { padding: 0.2rem clamp(0.9rem, 2vw, 1.5rem); border-left: 1px solid var(--line); display: grid; gap: 0.35rem; align-content: start; }
.cab-facts div:first-child { padding-left: 0; border-left: 0; }
.cab-facts dt { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute, #777); }
.cab-facts dd { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.3; color: var(--sapin); }
@media (max-width: 760px) {
  .cab-photo { aspect-ratio: 3 / 2; }
  .cab-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.25rem; }
  .cab-facts div:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* Bandeau d'information cookies */
.cookie-bar {
  position: fixed; z-index: 60; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); margin: 0 auto; max-width: 560px;
  display: flex; align-items: center; gap: 1rem; padding: 0.9rem 0.9rem 0.9rem 1.25rem; border-radius: 20px;
  background: #FFFFFF; color: var(--ink); box-shadow: 0 0 0 1px rgba(16, 24, 22, 0.08), 0 18px 40px -18px rgba(16, 24, 22, 0.35);
  opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease-ive), transform .5s var(--ease-ive);
}
.cookie-bar.in { opacity: 1; transform: none; }
.cookie-bar p { margin: 0; flex: 1; font-size: 0.86rem; line-height: 1.5; color: var(--ink-soft, #3f3f3f); }
.cookie-bar strong { display: block; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sapin); font-weight: 500; margin-bottom: 0.15rem; }
.cookie-bar a { color: var(--sapin); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.cookie-bar .btn { flex: none; min-height: 40px; padding: 0 1.1rem; font-size: 0.7rem; white-space: nowrap; }
.menu-open .cookie-bar { display: none; }
@media (max-width: 480px) { .cookie-bar { flex-direction: column; align-items: stretch; text-align: left; padding: 1rem; } .cookie-bar .btn { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .cookie-bar { transition: none; } }

/* Fiches : lignes alignées d'une carte à l'autre (icône, titre, texte, chiffre, détail) */
.fiche-key { display: block; }
.fiche-num { display: block; }
.fiche-lab { display: block; margin-top: 0.7rem; }
.fiche-key .fiche-ref { margin-top: 0.35rem; }
.fiche h2 { margin-top: 0.4rem; }
@supports (grid-template-rows: subgrid) {
  .fiches { grid-template-rows: repeat(5, auto); row-gap: 0; }
  .fiche { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0.9rem; align-content: start; }
  .fiche-icon { grid-row: 1; }
  .fiche h2 { grid-row: 2; align-self: start; }
  .fiche-text { grid-row: 3; align-self: start; padding-bottom: 0.6rem; }
  .fiche-key { grid-row: 4; margin: 0; align-self: start; }
  .fiche-more { grid-row: 5; align-self: start; }
  .fiche > .fiche-text + .fiche-more { margin-top: 0; }
  @media (max-width: 960px) {
    .fiches { grid-template-rows: none; row-gap: clamp(0.9rem, 1.6vw, 1.25rem); }
    .fiche { grid-template-rows: none; grid-row: auto; }
    .fiche-icon, .fiche h2, .fiche-text, .fiche-key, .fiche-more { grid-row: auto; }
  }
}
@media (max-width: 760px) {
  .cab-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0; }
  .cab-facts div:nth-child(odd) { padding-left: clamp(0.9rem, 2vw, 1.5rem); border-left: 1px solid var(--line); }
  .cab-facts div:first-child { padding-left: 0; border-left: 0; }
}
@media (max-width: 760px) { .cab-facts dt { font-size: 0.62rem; letter-spacing: 0.06em; white-space: nowrap; } .cab-facts div { padding-inline: 0.75rem; } }