@charset "utf-8";
/* =========================================================================
   CAHN WILSON — cahnwilson.com
   Feuille de style unique. Aucune dépendance, aucun build, aucun CDN.
   Polices auto-hébergées dans /assets/fonts (aucun appel à Google Fonts,
   ce qui écarte tout transfert d'adresses IP hors Union européenne).

   Registre : papier grège, encre noire chaude, jaune de marque en accent
   unique. Grille typographique stricte, filets pour seule ornementation.
   Aucune iconographie, aucune image de banque.
   ========================================================================= */

/* ---------- Polices ---------- */
@font-face {
  font-family: 'Playfair Display';
  src: url('/assets/fonts/playfair-display-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('/assets/fonts/playfair-display-latin-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('/assets/fonts/playfair-display-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---------- Jetons ---------- */
:root {
  --paper:       #e5e1de;   /* grège de charte, fond général            */
  --paper-high:  #efedeb;   /* bande claire, respiration                */
  --ink:         #221f20;   /* noir chaud de charte                     */
  --accent:      #221f20;   /* accent unique, l'encre. Aucun jaune.     */
  --ink-70:      rgba(34, 31, 32, .70);
  --ink-55:      rgba(34, 31, 32, .55);
  --ink-38:      rgba(34, 31, 32, .38);
  --rule:        rgba(34, 31, 32, .20);
  --rule-soft:   rgba(34, 31, 32, .11);
  --paper-70:    rgba(229, 225, 222, .70);
  --paper-45:    rgba(229, 225, 222, .45);
  --rule-dark:   rgba(229, 225, 222, .22);

  --serif: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --measure: 34rem;                       /* longueur de ligne de labeur */
  --gutter: clamp(1.5rem, 5vw, 5rem);
  --max: 82rem;
  --lead: clamp(3.5rem, 9vw, 7.5rem);     /* rythme vertical des sections */
  --t: .28s cubic-bezier(.22, .61, .36, 1);

  --head: 92px;                           /* hauteur du bandeau de tête    */
  --coupe: 13deg;                         /* angle de la barre du logotype */
  --coupe-x: 23vh;                        /* décalage de la coupe, tan(13°) sur la hauteur */
  --lame: cubic-bezier(.62, 0, .16, 1);   /* courbe sèche, sans rebond     */
}

/* ---------- Remise à zéro ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  font-weight: 380;
  line-height: 1.62;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.12; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- Accès direct au contenu ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--ink); color: var(--paper); padding: .8rem 1.2rem;
  font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
}
.skip:focus { left: 0; }

/* ---------- Conteneurs ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: 96rem; }
.band { padding-block: var(--lead); }
.band--high { background: var(--paper-high); }
.band--ink { background: var(--ink); color: var(--paper); }
.band--ink a { color: var(--paper); }
.band--tight { padding-block: calc(var(--lead) * .55); }

/* ---------- Titrage ---------- */
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.15rem, 1.1rem + 4.6vw, 5.1rem);
  line-height: 1.03;
  letter-spacing: -.018em;
  text-wrap: balance;
}
.h-lg {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.85rem, 1.1rem + 2.6vw, 3.15rem);
  line-height: 1.1; letter-spacing: -.014em; text-wrap: balance;
}
.h-md {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.95rem);
  line-height: 1.18; letter-spacing: -.01em;
}
.lede {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.2rem, 1.02rem + .72vw, 1.65rem);
  line-height: 1.44; letter-spacing: -.008em;
  max-width: 46rem;
}
.prose { max-width: var(--measure); }
.prose em { font-family: var(--serif); font-style: italic; }
.prose--wide { max-width: 44rem; }

/* Étiquette de section, capitales espacées, filet de tête épaissi à l'amorce */
.label {
  position: relative; display: block;
  font-size: .705rem; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-55);
  padding-top: .85rem;
  border-top: 1px solid var(--rule);
  margin-bottom: 2.6rem;
}
.label::before {
  content: ''; position: absolute; top: -1px; left: 0;
  width: 2.4rem; height: 2px; background: var(--ink);
}
.band--ink .label { color: var(--paper-45); border-top-color: var(--rule-dark); }
.band--ink .label::before { background: var(--paper); }
.label .n { color: var(--ink-38); margin-right: .9em; }
.band--ink .label .n { color: var(--paper-45); }

/* Barre oblique montante du logotype, reprise en séparateur de fil d'Ariane.
   Elle est tracée dans l'encre du texte, conformément au logotype officiel. */
.bar {
  display: inline-block; width: 3px; height: .88em;
  background: currentColor; opacity: .5;
  transform: skewX(-15deg);
  vertical-align: -.08em;
  margin-inline: .46em;
}

/* ---------- En-tête ---------- */
.masthead {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper-70);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), background var(--t);
}
.masthead.is-stuck { border-bottom-color: var(--rule); background: rgba(229, 225, 222, .92); }
.masthead__in {
  max-width: 96rem; margin: 0 auto; padding-inline: var(--gutter);
  height: var(--head); display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
/* Logotype officiel Cahn Wilson, vectorisé depuis le fichier de la charte.
   Il est appliqué en masque afin d'épouser la couleur du texte, encre sur
   papier grège et papier sur bandeau noir. Le texte reste dans le document
   pour les lecteurs d'écran et pour les navigateurs sans prise en charge des
   masques, auquel cas le logotype se compose typographiquement. */
.wordmark {
  display: inline-block;
  font-family: var(--serif); font-size: 1.02rem; font-weight: 500;
  letter-spacing: .1em; white-space: nowrap;
}
.wordmark .bar { opacity: .95; }
@supports ((-webkit-mask-image: url('/assets/images/brand/logotype-cw.svg')) or (mask-image: url('/assets/images/brand/logotype-cw.svg'))) {
  .wordmark {
    height: 42px; width: 179px;
    background-color: currentColor;
    -webkit-mask: url('/assets/images/brand/logotype-cw.svg') no-repeat center / contain;
    mask: url('/assets/images/brand/logotype-cw.svg') no-repeat center / contain;
    font-size: 0; letter-spacing: 0;
  }
  .wordmark * { display: none; }
  .foot__wm {
    height: 52px; width: 221px; margin-bottom: 1.6rem;
    background-color: currentColor;
    -webkit-mask: url('/assets/images/brand/logotype-cw.svg') no-repeat left center / contain;
    mask: url('/assets/images/brand/logotype-cw.svg') no-repeat left center / contain;
    font-size: 0;
  }
  .foot__wm * { display: none; }
  @media (max-width: 560px) {
    .wordmark { height: 34px; width: 145px; }
    .foot__wm { height: 42px; width: 179px; }
  }
}
.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.2rem); }
.nav a {
  font-size: .8rem; letter-spacing: .085em; text-transform: uppercase;
  color: var(--ink-70); padding-block: .35rem;
  border-bottom: 1px solid transparent; transition: color var(--t), border-color var(--t);
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.nav a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }
.nav .lang { color: var(--ink-38); letter-spacing: .1em; }
.burger {
  display: none; background: none; border: 0; padding: .4rem .1rem; cursor: pointer;
  font-size: .8rem; letter-spacing: .085em; text-transform: uppercase; color: var(--ink);
}
@media (max-width: 880px) {
  .burger { display: block; }
  .nav {
    position: fixed; inset: var(--head) 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: .5rem var(--gutter) 2rem;
    max-height: calc(100dvh - var(--head)); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity var(--t), transform var(--t), visibility var(--t);
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav a { width: 100%; font-size: 1rem; padding-block: .95rem; border-bottom: 1px solid var(--rule-soft); }
}

/* ---------- Ouverture de la page d'accueil ----------
   Une seule colonne sur le papier, la signature puis la phrase qui dit
   ce que fait le cabinet. Aucune image, le blanc tient lieu de respiration. */
.opening { padding-top: clamp(3.5rem, 9vw, 8rem); padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.opening .display em { font-family: var(--serif); font-style: italic; }
.opening__sub {
  font-family: var(--serif); font-style: italic; color: var(--ink-70);
  font-size: clamp(1.1rem, .95rem + .8vw, 1.6rem); line-height: 1.34;
  margin-top: 1.5rem; max-width: 30ch;
}
.opening__claim { margin-top: 2.4rem; max-width: var(--measure); color: var(--ink-70); font-size: .97rem; }

/* ---------- Bande des matières ----------
   Les neuf intitulés séparés par la barre oblique du logotype. Le mot
   survolé se souligne du jaune de marque, seul accent coloré du site. */
.matieres {
  font-family: var(--serif); font-size: clamp(1.1rem, .95rem + .78vw, 1.62rem);
  line-height: 1.62; color: var(--ink-70);
}
.matieres .bar { opacity: .35; margin-inline: .34em; }
.matieres .mot { transition: color var(--t); }
.matieres .mot:hover { color: var(--ink); }

/* ---------- Les trois portes ----------
   Chacune occupe une rangée pleine largeur. Au survol, la coupe balaie la
   rangée à l'angle du logotype et y substitue l'encre au papier. */
.doors { border-top: 1px solid var(--rule); margin-top: 2.4rem; }
.door {
  position: relative; isolation: isolate; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem) 2.5rem;
  gap: clamp(1.25rem, 3.5vw, 3rem); align-items: start;
  max-width: var(--max); margin-inline: auto;
  padding: clamp(2rem, 4vw, 3.2rem) var(--gutter);
  border-bottom: 1px solid var(--rule);
  transition: color var(--t);
}
.door::after {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ink);
  clip-path: polygon(0 0, 0 0, -14% 100%, -14% 100%); transition: clip-path .55s var(--lame);
}
.door:hover, .door:focus-visible { color: var(--paper); }
.door:hover::after, .door:focus-visible::after { clip-path: polygon(0 0, 114% 0, 100% 100%, -14% 100%); }
.door__t {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 3.5rem); line-height: 1.06; letter-spacing: -.014em;
}
.door__d { font-size: .92rem; color: var(--ink-70); transition: color var(--t); margin: 0; }
.door:hover .door__d, .door:focus-visible .door__d { color: var(--paper-70); }
.door__go { justify-self: end; font-size: 1.35rem; color: var(--ink-38); transition: transform var(--t), color var(--t); }
.door:hover .door__go, .door:focus-visible .door__go { transform: translateX(8px); color: var(--paper); }
@media (max-width: 860px) { .door { grid-template-columns: 1fr; } .door__go { display: none; } }
@media (prefers-reduced-motion: reduce) { .door::after { transition: none; } }

/* ---------- Grille éditoriale à deux colonnes ---------- */
.duo {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 5rem); align-items: start;
}
.duo--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.duo__aside { font-size: .93rem; color: var(--ink-70); }
.duo__aside .h-md { margin-bottom: .55rem; }
@media (max-width: 860px) { .duo, .duo--even { grid-template-columns: 1fr; } }

/* Suite de blocs numérotés, corps des pages de fond */
.stack > * + * { margin-top: clamp(2.2rem, 4.5vw, 3.4rem); }
/* Rangée éditoriale. Un seul bloc sur les pages de fond, deux colonnes sur
   l'accueil, où le titre fait face à la formule. */
.entry { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.25rem); }
.entry:has(.entry__d) {
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  align-items: baseline;
  padding-block: clamp(1.4rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--rule);
}
.entry:has(.entry__d):first-of-type { border-top: 1px solid var(--rule); }
@media (max-width: 760px) { .entry:has(.entry__d) { grid-template-columns: 1fr; gap: .5rem; } }
.entry__b .h-md { margin-bottom: .85rem; }
.entry__d { font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, .95rem + .55vw, 1.42rem);
  line-height: 1.38; color: var(--ink); margin: 0; }
/* Au-delà de 1100 px, le titre passe en marge et le texte occupe sa colonne.
   La règle ne vise que les rangées des pages de fond. Celles de l'accueil,
   reconnaissables à leur formule, gardent leurs deux colonnes propres. */
@media (min-width: 1100px) {
  .entry:not(:has(.entry__d)) {
    grid-template-columns: minmax(0, 17rem) minmax(0, var(--measure));
  }
  .entry:not(:has(.entry__d)) .entry__b { display: contents; }
  .entry:not(:has(.entry__d)) .entry__b .h-md { margin-bottom: 0; padding-top: .1rem; }
}
@media (max-width: 700px) { .entry { grid-template-columns: 1fr; gap: .6rem; } }

/* ---------- En-tête de page intérieure ---------- */
.pagehead { padding-block: clamp(3rem, 8vh, 6rem) clamp(2rem, 5vh, 3.5rem); }
.pagehead__kicker {
  font-size: .72rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-55); margin-bottom: 1.5rem; display: block;
}
.pagehead .lede { margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.crumb { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-55); }
.crumb:hover { color: var(--ink); }

/* ---------- Avocats ---------- */
/* Portrait. Deux images superposées, le noir et blanc dessous, la couleur
   dessus, révélée par la coupe au survol. Même geste que partout ailleurs. */
.pf {
  position: relative; display: block; width: 100%;
  aspect-ratio: 4 / 5; overflow: hidden; background: rgba(34, 31, 32, .06);
}
.pf img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf__c {
  clip-path: polygon(0 0, 0 0, -18% 100%, -18% 100%);
  transition: clip-path .62s var(--lame);
}
.bio .pf__c { clip-path: polygon(0 0, 118% 0, 100% 100%, -18% 100%); }
@media (prefers-reduced-motion: reduce) { .pf__c { transition: none; } }

/* ---------- Ancrage vertical de chaque portrait ----------
   Les six photographies ne cadrent pas la tête à la même hauteur. Là où la
   fenêtre est plus carrée que le fichier, le navigateur retranche de la hauteur
   et couperait le cou. Chaque portrait porte donc son propre point d'ancrage,
   calculé sur la position réelle du sommet du crâne et du menton, de sorte que
   la tête garde partout le même air au-dessus et que le cou demeure visible. */
.p-michael-cahn img        { object-position: center 68%; }
.p-thomas-alho-antunes img { object-position: center 33%; }
.p-sarah-mincel img        { object-position: center 56%; }
.p-gerard-fohlen-weill img { object-position: center 20%; }
.p-leslie-mankikian img    { object-position: center 52%; }
.p-nathalie-malazdra img   { object-position: center 15%; }

/* ---------- L'équipe ----------
   Une liste verticale. Le portrait à gauche, le nom et la matière en regard,
   la flèche en bout de rangée. Au survol, le portrait reprend ses couleurs,
   révélé en diagonale par la coupe. */
.roster { border-top: 1px solid var(--rule); }
.roster__row {
  display: grid;
  grid-template-columns: clamp(7rem, 12vw, 11.5rem) minmax(0, 1fr) 2.5rem;
  gap: clamp(1.25rem, 3.5vw, 3rem); align-items: center;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
  transition: background var(--t);
}
.roster__row:hover { background: rgba(255, 255, 255, .38); }
.roster__row .pf { aspect-ratio: 3 / 4.1; }
.roster__row .pf img { transition: transform .9s var(--lame); }
.roster__row:hover .pf img { transform: scale(1.035); }
.roster__row:hover .pf__c, .roster__row:focus-visible .pf__c { clip-path: polygon(0 0, 118% 0, 100% 100%, -18% 100%); }
.roster__b { display: block; }
.roster__nom {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.45rem, 1.05rem + 1.5vw, 2.15rem); line-height: 1.08; letter-spacing: -.012em;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .2em;
  transition: text-decoration-color var(--t);
}
.roster__row:hover .roster__nom { text-decoration-color: var(--accent); }
.roster__role {
  display: block; margin-top: .5rem;
  font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-55);
}
.roster__focus { display: block; margin-top: .75rem; font-size: .92rem; color: var(--ink-70); }
.roster__go { justify-self: end; font-size: 1.3rem; color: var(--ink-38); transition: transform var(--t), color var(--t); }
.roster__row:hover .roster__go { transform: translateX(7px); color: var(--ink); }
@media (max-width: 700px) {
  .roster__row { grid-template-columns: clamp(5.5rem, 26vw, 8rem) minmax(0, 1fr); }
  .roster__go { display: none; }
}
@media (prefers-reduced-motion: reduce) { .roster__row .pf img { transition: none; } }

.bio { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.bio__side { position: sticky; top: calc(var(--head) + 20px); }
.bio__facts { margin-top: 1.6rem; font-size: .88rem; }
.bio__facts dt { font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-55); margin-top: 1.1rem; }
.bio__facts dd { margin: .25rem 0 0; }
.bio__body p { max-width: var(--measure); }
@media (max-width: 860px) { .bio { grid-template-columns: 1fr; } .bio__side { position: static; max-width: 20rem; } }

/* ---------- Affaires ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem .55rem; margin-bottom: 2.5rem; }
.filters button {
  background: none; border: 1px solid var(--rule); border-radius: 0;
  padding: .5rem .95rem; cursor: pointer;
  font-size: .78rem; letter-spacing: .05em; color: var(--ink-70);
  transition: color var(--t), border-color var(--t), background var(--t);
}
.filters button:hover { border-color: var(--ink); color: var(--ink); }
.filters button[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.cases { border-top: 1px solid var(--rule); }
.case {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 16rem);
  gap: clamp(.85rem, 3vw, 2.25rem); align-items: baseline;
  padding-block: 1.35rem; border-bottom: 1px solid var(--rule-soft);
  transition: background var(--t);
}
.case:hover { background: rgba(255, 255, 255, .3); }
.case__n { font-family: var(--serif); font-size: .82rem; color: var(--ink-38); }
.case__t { font-size: 1.02rem; line-height: 1.42; max-width: 46rem; }
a.case .case__t { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .28em; transition: text-decoration-color var(--t); }
a.case:hover .case__t { text-decoration-color: var(--accent); }
.case__cat { font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-55); }

/* Chronologie. Le millésime tient sa colonne étroite et le fait se lit
   immédiatement en regard, sans la vaste colonne vide que laissait la grille
   des affaires, dont ces rangées empruntaient la mise en forme. */
.case:has(.case__n) { grid-template-columns: 5.5rem minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.75rem); padding-block: .95rem; }
.case:has(.case__n) .case__n {
  font-size: 1.05rem; color: var(--ink); font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
}
.case:has(.case__n) .case__t { font-size: .98rem; max-width: 52rem; }
.case:has(.case__n) .case__cat:empty { display: none; }
@media (max-width: 560px) { .case:has(.case__n) { grid-template-columns: 4rem minmax(0, 1fr); gap: .9rem; } }
.case[hidden] { display: none; }
@media (max-width: 780px) {
  .case { grid-template-columns: minmax(0, 1fr); }
  .case__cat { margin-top: .35rem; }
}

/* Fiche d'affaire */
.dossier__meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.5rem 2rem; padding-block: 1.6rem;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  margin-block: clamp(2rem, 5vw, 3rem);
}
.dossier__meta dt { font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-55); }
.dossier__meta dd { margin: .4rem 0 0; font-size: .97rem; }
.dossier__body h2 { font-family: var(--serif); font-size: 1.32rem; margin: 2.6rem 0 .9rem; }
.dossier__body h2:first-child { margin-top: 0; }
.dossier__body p { max-width: var(--measure); }

/* Sur bandeau sombre, la prose et les blocs numérotés s'inversent */
.band--ink .prose, .band--ink .prose p { color: var(--paper-70); }
.band--ink .h-md { color: var(--paper); }

/* ---------- Encadré déontologique ---------- */
.caveat {
  border-left: 2px solid var(--accent); padding: .2rem 0 .2rem 1.5rem;
  font-size: .92rem; color: var(--ink-70); max-width: 42rem;
}
.band--ink .caveat { color: var(--paper-70); }

/* ---------- Liens et boutons ---------- */
.link {
  display: inline-block; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  padding-bottom: .35rem; border-bottom: 1px solid var(--rule);
  transition: border-color var(--t), color var(--t);
}
.link:hover { border-bottom-color: var(--accent); }
.band--ink .link { border-bottom-color: var(--rule-dark); }
.btn {
  display: inline-block; background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); padding: .95rem 2rem; cursor: pointer;
  font-size: .8rem; letter-spacing: .11em; text-transform: uppercase;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.btn:hover { background: var(--paper); border-color: var(--ink); color: var(--ink); }

/* ---------- Contact ---------- */
.form { display: grid; gap: 1.3rem; max-width: 38rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.field label {
  display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-55); margin-bottom: .5rem;
}
.field input, .field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--rule);
  padding: .55rem 0; font-size: 1rem; transition: border-color var(--t);
}
.field input:focus, .field textarea:focus { outline: 0; border-bottom-color: var(--ink); }
.field textarea { min-height: 8rem; resize: vertical; }
.notice { display: none; padding: 1rem 1.2rem; font-size: .93rem; border-left: 2px solid var(--accent); background: rgba(255, 255, 255, .45); }
.notice.is-on { display: block; }
.notice--err { border-left-color: var(--ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Pied de page ---------- */
.foot { background: var(--ink); color: var(--paper); padding-block: clamp(3rem, 7vw, 5rem) 2rem; }
.foot a { color: var(--paper); }
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2.5rem 3rem; }
.foot__wm { font-family: var(--serif); font-size: 1.05rem; letter-spacing: .1em; margin-bottom: 1.2rem; }
.foot h3 { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-45); margin-bottom: 1rem; }
.foot li { margin-bottom: .55rem; }
.foot li a, .foot address a { font-size: .93rem; color: var(--paper-70); transition: color var(--t); }
.foot li a:hover, .foot address a:hover { color: var(--paper); }
.foot address { font-style: normal; font-size: .93rem; color: var(--paper-70); line-height: 1.75; }
.foot__base {
  display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: space-between;
  margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 1.5rem;
  border-top: 1px solid var(--rule-dark);
  font-size: .78rem; color: var(--paper-45);
}
.foot__base a:hover { color: var(--paper); }

/* =========================================================================
   LA COUPE
   Un seul geste d'animation sur tout le site, repris du logotype. Tout ce
   qui apparaît est révélé par une lame qui balaie de gauche à droite, selon
   l'angle exact de la barre oblique de la marque. Rien ne glisse, rien ne
   rebondit, rien ne se dissout. On coupe.
   ========================================================================= */

/* Extrait mis en avant. Gras, italique et souligné de jaune, employé
   uniquement dans le bandeau des revendications. */
/* Les trois termes qui portent l'engagement, appuyés de deux tailles au-dessus
   du corps, en gras et en italique. */
.entry__d strong { font-weight: 600; font-style: italic; font-size: 1.19em; }

.cle {
  font-weight: 600; font-style: italic;
  font-size: 1.09em;
  color: #ece819;
  text-decoration: none;
}

/* Aucune animation de passage de page ni d'apparition au défilement.
   Le contenu est en place dès le chargement. Seuls subsistent les
   changements d'état au survol, qui sont des repères de lecture et non
   des effets. */

/* ---------- Impression ---------- */
@media print {
  .masthead, .foot, .filters, .door__go, .roster__go { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { text-decoration: underline; }
}