@charset "utf-8";
/* =========================================================================
   CAHN WILSON — variante « plein cadre ».
   Feuille additionnelle, chargée après style.css, portée par body.pc.

   Principe unique. Rien n'est centré dans une colonne, tout touche les deux
   bords de l'écran. Les bandes se distinguent par leur fond, les grilles sont
   jointives et séparées d'un filet d'un pixel. La marge est ramenée à une
   gouttière constante, de sorte que la page se lise comme une affiche plutôt
   que comme un document.
   ========================================================================= */

.pc {
  --gutter: clamp(1.25rem, 3.4vw, 4rem);
}

/* ---------- Le conteneur cesse d'être une colonne ---------- */
.pc .wrap,
.pc .wrap--wide { max-width: none; margin: 0; padding-inline: var(--gutter); }
.pc .masthead__in { max-width: none; }

/* ---------- Bande de plein cadre ---------- */
.pc .pc-band {
  padding: clamp(2.75rem, 6vw, 6rem) var(--gutter);
  border-top: 1px solid var(--rule);
}
.pc .pc-band--high { background: var(--paper-high); }
.pc .pc-band--ink { background: var(--ink); color: var(--paper); border-top-color: var(--rule-dark); }
.pc .pc-band--ink .label { color: var(--paper-45); border-top-color: var(--rule-dark); }
.pc .pc-band--ink .label::before { background: var(--paper); }

/* ---------- Ouverture ----------
   La signature occupe le premier écran, sans rien d'autre. */
.pc .pc-hero {
  padding: clamp(4rem, 11vw, 10rem) var(--gutter) clamp(3rem, 7vw, 6rem);
}
.pc .pc-hero--court { padding-bottom: clamp(2.25rem, 5vw, 4rem); }
.pc .pc-hero__sig {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.4rem, 1rem + 6.4vw, 7.5rem);
  line-height: .98; letter-spacing: -.026em; text-wrap: balance;
  max-width: 20ch;
}
.pc .pc-hero__sig--md { font-size: clamp(1.9rem, 1rem + 3.4vw, 4.2rem); line-height: 1.05; max-width: 26ch; }
.pc .pc-hero__sig em { font-family: var(--serif); font-style: italic; }
.pc .pc-hero__sub {
  font-family: var(--serif); font-style: italic; color: var(--ink-70);
  font-size: clamp(1.1rem, .9rem + 1vw, 1.85rem); line-height: 1.3;
  margin-top: 1.8rem; max-width: 32ch;
}
.pc .pc-hero__claim { margin-top: 2.4rem; max-width: 40rem; color: var(--ink-70); font-size: .98rem; }
.pc .pagehead__kicker { display: block; margin-bottom: 1.4rem; }

/* ---------- Le bandeau des six visages ----------
   Six colonnes jointives, d'un bord à l'autre. Le portrait est en noir et
   blanc et reprend ses couleurs au survol, révélé en diagonale par la coupe. */
.pc .faces {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2px; border-block: 1px solid var(--rule);
}
.pc .face { position: relative; display: block; overflow: hidden; }
.pc .face .pf { aspect-ratio: 3 / 4.3; }
.pc .face .pf img { transition: transform .9s var(--lame); }
.pc .face:hover .pf img { transform: scale(1.05); }
.pc .face:hover .pf__c, .pc .face:focus-visible .pf__c { clip-path: polygon(0 0, 118% 0, 100% 100%, -18% 100%); }
.pc .face__nom {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 2.6rem .95rem 1.05rem;
  font-family: var(--serif); font-size: clamp(.82rem, .68rem + .35vw, 1.05rem);
  line-height: 1.22; color: var(--paper);
  background: linear-gradient(to top, rgba(34, 31, 32, .92) 12%, rgba(34, 31, 32, .55) 55%, rgba(34, 31, 32, 0));
}
@media (max-width: 1000px) { .pc .faces { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pc .faces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .pc .face .pf img { transition: none; } }

/* ---------- Les trois engagements ---------- */
.pc .engs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); }
@media (max-width: 900px) { .pc .engs { grid-template-columns: 1fr; gap: 2rem; } }
.pc .eng { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.pc .eng__t {
  display: block; font-size: .705rem; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase; color: var(--ink-55);
}
.pc .eng__d {
  font-family: var(--serif); font-style: italic; margin: .9rem 0 0;
  font-size: clamp(1.08rem, .95rem + .7vw, 1.5rem); line-height: 1.3;
}
/* Les trois termes qui portent l'engagement, « Réussir », « Prendre ou
   reprendre la main » et « défis », appuyés de deux tailles au-dessus du
   corps, en gras et en italique. */
.pc .eng__d strong { font-weight: 600; font-style: italic; font-size: 1.19em; }

/* ---------- Les matières ----------
   La bande occupe toute la largeur. Le texte n'est ni justifié ni réparti,
   il court simplement d'un bord à l'autre et se poursuit à la ligne, avec
   l'espacement naturel des mots. */
.pc .matieres {
  max-width: none;
  text-align: left;
  text-wrap: nowrap;
  white-space: normal;
}
/* Chaque intitulé reste d'un seul tenant, la coupure ne se faisant qu'entre
   deux matières. Le texte court alors d'un bord à l'autre et se poursuit à la
   ligne sans être réparti ni justifié. */
.pc .matieres .mot { white-space: nowrap; }
.pc .matieres .bar { margin-inline: .42em .28em; }

/* ---------- Les trois pratiques, en panneaux jointifs ---------- */
.pc .cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); }
@media (max-width: 900px) { .pc .cartes { grid-template-columns: 1fr; } }
.pc .carte {
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  min-height: clamp(18rem, 26vw, 26rem); background: var(--paper);
  padding: clamp(1.75rem, 3vw, 3rem); transition: color var(--t);
}
.pc .carte::after {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ink);
  clip-path: polygon(0 0, 0 0, -18% 100%, -18% 100%); transition: clip-path .5s var(--lame);
}
.pc .carte:hover, .pc .carte:focus-visible { color: var(--paper); }
.pc .carte:hover::after, .pc .carte:focus-visible::after { clip-path: polygon(0 0, 118% 0, 100% 100%, -18% 100%); }
.pc .carte__t {
  font-family: var(--serif); font-size: clamp(1.4rem, 1rem + 1.4vw, 2.35rem);
  line-height: 1.06; letter-spacing: -.014em;
}
.pc .carte__d { font-size: .94rem; color: var(--ink-70); margin-top: 1.2rem; transition: color var(--t); }
.pc .carte:hover .carte__d, .pc .carte:focus-visible .carte__d { color: var(--paper-70); }
.pc .carte__go { margin-top: auto; padding-top: 1.6rem; font-size: 1.3rem; color: var(--ink-38); transition: color var(--t), transform var(--t); }
.pc .carte:hover .carte__go, .pc .carte:focus-visible .carte__go { color: var(--paper); transform: translateX(7px); }
@media (prefers-reduced-motion: reduce) { .pc .carte::after { transition: none; } }

/* ---------- Trois colonnes de prose ---------- */
.pc .trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); }
@media (max-width: 900px) { .pc .trois { grid-template-columns: 1fr; } }
/* Le bandeau des revendications porte la thèse du cabinet. Il est composé
   plus grand que le reste du corps de texte. */
.pc .trois p { font-size: clamp(1.02rem, .92rem + .5vw, 1.3rem); line-height: 1.5; }

/* ---------- Nous joindre ----------
   Composé plus bas que le titrage, pour ne pas concurrencer la signature. */
.pc .pc-joindre {
  font-family: var(--serif); font-size: clamp(1.02rem, .95rem + .5vw, 1.42rem);
  line-height: 1.4; letter-spacing: -.004em; max-width: 46ch;
}

/* ---------- Les notices, en rangées pleine largeur ---------- */
.pc .crewA { border-top: 1px solid var(--rule); }
.pc .crewA__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem) 2.5rem;
  gap: clamp(1.25rem, 3.5vw, 3rem); align-items: center;
  padding-block: clamp(1.5rem, 3vw, 2.6rem); border-bottom: 1px solid var(--rule);
  transition: background var(--t);
}
.pc .crewA__row:hover { background: rgba(255, 255, 255, .38); }
.pc .crewA__nom { font-family: var(--serif); font-size: clamp(1.55rem, 1rem + 2.1vw, 3rem); line-height: 1.06; }
.pc .crewA__role { display: block; margin-top: .45rem; font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-55); }
.pc .crewA__focus { font-size: .95rem; color: var(--ink-70); }
.pc .crewA__go { justify-self: end; font-size: 1.3rem; color: var(--ink-38); transition: transform var(--t), color var(--t); }
.pc .crewA__row:hover .crewA__go { transform: translateX(7px); color: var(--ink); }
@media (max-width: 860px) { .pc .crewA__row { grid-template-columns: 1fr; } .pc .crewA__go { display: none; } }

/* ---------- Les pages de fond suivent la même règle ----------
   Un seul bord de fuite. Le chapeau, les intertitres et le corps partent tous
   de la gouttière, les étiquettes qui figuraient en marge passant au-dessus de
   leur bloc, en surtitre. Sans quoi le chapeau, calé au bord, se décalerait
   de trois cents pixels par rapport au texte qu'il annonce. */
.pc .pagehead { padding-block: clamp(3rem, 7vw, 6.5rem) clamp(2rem, 4vw, 3.5rem); }
.pc .prose, .pc .prose--wide { max-width: 44rem; }
.pc .lede { max-width: 54rem; }

.pc .duo, .pc .duo--even { grid-template-columns: minmax(0, 1fr); gap: 1.35rem; }
.pc .duo__aside { max-width: none; }
.pc .duo__aside .label { margin-bottom: 0; }

.pc .entry, .pc .entry:not(:has(.entry__d)) { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
.pc .entry:not(:has(.entry__d)) .entry__b { display: block; }
.pc .entry:not(:has(.entry__d)) .entry__b .h-md { margin-bottom: .85rem; padding-top: 0; }

/* La notice individuelle. Le portrait occupe tout le flanc gauche, d'un bord
   à l'autre de la hauteur utile, et le flanc droit reçoit le nom, la qualité
   et la biographie. Le portrait reste en place pendant que le texte défile. */
.pc .bio {
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  gap: 0; align-items: stretch;
}
.pc .bio__side {
  position: sticky; top: var(--head); max-width: none;
  /* le portrait mord la gouttière pour toucher le bord de l'écran */
  margin-left: calc(var(--gutter) * -1);
  padding-right: clamp(2rem, 4vw, 4rem);
}
.pc .bio .pf { aspect-ratio: auto; height: calc(100vh - var(--head)); min-height: 30rem; }
.pc .bio__facts {
  margin: 0; padding: 1.4rem clamp(2rem, 4vw, 4rem) 0 var(--gutter);
  font-size: .86rem;
}
.pc .bio__body { padding-block: 0 clamp(1rem, 2vw, 2rem); }
.pc .bio__body h1 { margin-bottom: .5rem; }
.pc .bio__body p, .pc .bio__body .prose { max-width: 40rem; }
@media (max-width: 900px) {
  .pc .bio { grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
  .pc .bio__side { position: static; margin-left: 0; padding-right: 0; max-width: 24rem; }
  .pc .bio .pf { aspect-ratio: 3 / 3.9; height: auto; min-height: 0; }
  .pc .bio__facts { padding: 1.4rem 0 0; }
}

.pc .doors, .pc .roster { border-top-width: 1px; }
.pc .door { max-width: none; }
.pc .cases, .pc .filters { max-width: none; }

/* ---------- Impression ---------- */
@media print {
  .pc .faces { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pc .carte__go, .pc .crewA__go { display: none; }
}

/* =========================================================================
   PAGE « LE CABINET », deux mises en page qui occupent toute la largeur.
   ========================================================================= */

/* ---------- Variante A, le damier ----------
   Chaque bloc est un pavé pleine largeur. Le titre tient une colonne large en
   Playfair, la prose se déploie en deux colonnes en regard. Un bloc sur deux
   inverse l'ordre, de sorte que le regard descend en zigzag, et les fonds
   alternent le papier, le papier clair et l'encre. */
.pc .damier { border-top: 1px solid var(--rule); }
.pc .pave {
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4.5rem);
  padding: clamp(2.5rem, 5vw, 5rem) var(--gutter);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.pc .pave__t {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.6rem, 1rem + 2.2vw, 3.1rem);
  line-height: 1.04; letter-spacing: -.016em; margin: 0;
  position: sticky; top: calc(var(--head) + 1.5rem);
}
.pc .pave__c { columns: 20rem; column-gap: clamp(1.5rem, 3.5vw, 3.5rem); }
.pc .pave__c p { max-width: none; break-inside: avoid; margin-bottom: 1.1em; }
.pc .pave__c p:last-child { margin-bottom: 0; }

/* Un pavé sur deux renvoie le titre à droite. Sa colonne est alors ajustée au
   texte plutôt que fixée, de sorte que le titre reste contre sa prose au lieu
   d'être renvoyé au bord de l'écran par une colonne trop large. */
.pc .pave:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) fit-content(22rem);
  column-gap: clamp(1.5rem, 4vw, 4.5rem);
}
/* Le titre de droite reste aligné à gauche dans sa colonne, de sorte que ses
   lignes présentent un bord droit face à la prose. Aligné à droite, leur bord
   gauche était irrégulier et creusait un espace que les pavés à titre de
   gauche n'ont pas. */
.pc .pave:nth-child(even) .pave__t { grid-column: 2; text-align: left; }
.pc .pave:nth-child(even) .pave__c { grid-column: 1; grid-row: 1; }

/* les fonds alternent */
.pc .pave:nth-child(3n+2) { background: var(--paper-high); }
.pc .pave:nth-child(3n) { background: var(--ink); color: var(--paper); border-bottom-color: var(--rule-dark); }
.pc .pave:nth-child(3n) .pave__c p { color: var(--paper-70); }

@media (max-width: 1000px) {
  .pc .pave, .pc .pave:nth-child(even) { grid-template-columns: 1fr; gap: 1.25rem; }
  .pc .pave:nth-child(even) .pave__t { grid-column: 1; grid-row: 1; }
  .pc .pave:nth-child(even) .pave__c { grid-column: 1; grid-row: 2; }
  .pc .pave__t { position: static; }
  .pc .pave__c { columns: auto; }
}

/* ---------- Variante B, la revue ----------
   Le titre barre toute la largeur sous un filet épaissi, la prose coule
   au-dessous en trois colonnes d'égale largeur, d'un bord à l'autre. La page
   se lit comme une double page de revue. */
.pc .revue { border-top: 1px solid var(--rule); }
.pc .feuillet {
  padding: clamp(2.25rem, 4.5vw, 4.5rem) var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.pc .feuillet:nth-child(even) { background: var(--paper-high); }
.pc .feuillet__t {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.7rem, 1rem + 2.6vw, 3.6rem);
  line-height: 1.04; letter-spacing: -.018em; margin: 0 0 1.6rem;
  padding-top: 1rem; border-top: 2px solid var(--ink);
  max-width: 34ch;
}
/* La largeur de colonne est fixée plutôt que leur nombre, de sorte que le
   navigateur en compose autant que la place le permet et répartisse le texte
   entre toutes. Un bloc de deux paragraphes remplit ainsi les trois colonnes
   au lieu d'en laisser une vide. */
.pc .feuillet__c {
  columns: 21rem; column-gap: clamp(1.5rem, 3.5vw, 3.5rem);
  column-rule: 1px solid var(--rule-soft);
}
.pc .feuillet__c p { max-width: none; break-inside: avoid; margin-bottom: 1.1em; }
.pc .feuillet__c p:last-child { margin-bottom: 0; }
@media (max-width: 700px) { .pc .feuillet__c { columns: auto; } .pc .feuillet__t { max-width: none; } }

/* =========================================================================
   PAGE « AVOCATS », sans reprise du bandeau de l'accueil.
   ========================================================================= */

/* ---------- Variante A, les rangées portées ----------
   Aucun bandeau. Chaque notice porte son propre portrait à gauche, à la
   hauteur de la rangée, de sorte que le visage n'apparaisse qu'une fois par
   avocat sur la page. La géométrie diffère franchement de celle de l'accueil,
   qui aligne six colonnes étroites. */
.pc .portes { border-top: 1px solid var(--rule); }
.pc .porte {
  display: grid;
  grid-template-columns: clamp(9rem, 15vw, 15rem) minmax(0, 1fr) minmax(0, 22rem) 2.5rem;
  gap: clamp(1.25rem, 3.5vw, 3.5rem); align-items: center;
  padding: clamp(1.25rem, 2.5vw, 2rem) var(--gutter);
  border-bottom: 1px solid var(--rule);
  transition: background var(--t);
}
.pc .porte:hover { background: rgba(255, 255, 255, .4); }
.pc .porte .pf { aspect-ratio: 3 / 3.9; }
.pc .porte .pf img { transition: transform .9s var(--lame); }
.pc .porte:hover .pf img { transform: scale(1.04); }
.pc .porte:hover .pf__c, .pc .porte:focus-visible .pf__c { clip-path: polygon(0 0, 118% 0, 100% 100%, -18% 100%); }
.pc .porte__nom { font-family: var(--serif); font-size: clamp(1.5rem, 1rem + 2vw, 2.9rem); line-height: 1.06; display: block; }
.pc .porte__role { display: block; margin-top: .45rem; font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-55); }
.pc .porte__focus { font-size: .95rem; color: var(--ink-70); }
.pc .porte__go { justify-self: end; font-size: 1.3rem; color: var(--ink-38); transition: transform var(--t), color var(--t); }
.pc .porte:hover .porte__go { transform: translateX(7px); color: var(--ink); }
@media (max-width: 1000px) {
  .pc .porte { grid-template-columns: clamp(6rem, 24vw, 9rem) minmax(0, 1fr); }
  .pc .porte__focus { grid-column: 2; }
  .pc .porte__go { display: none; }
}

/* ---------- Variante B, la grille de six ----------
   Deux rangées de trois cartes, chacune portant son portrait en grand, le nom
   et la matière. Le portrait est haut plutôt que large, ce qui l'oppose à la
   frise de l'accueil. */
.pc .grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.pc .fiche { display: block; overflow: hidden; background: var(--paper); padding: 0 0 clamp(1.25rem, 2.5vw, 2rem); transition: background var(--t); }
.pc .fiche:hover { background: var(--paper-high); }
.pc .fiche .pf { aspect-ratio: 3 / 3.4; }
.pc .fiche .pf img { transition: transform .9s var(--lame); }
.pc .fiche:hover .pf img { transform: scale(1.04); }
.pc .fiche:hover .pf__c, .pc .fiche:focus-visible .pf__c { clip-path: polygon(0 0, 118% 0, 100% 100%, -18% 100%); }
.pc .fiche__b { display: block; padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.1rem, 2vw, 1.6rem) 0; }
.pc .fiche__nom { font-family: var(--serif); font-size: clamp(1.3rem, 1rem + 1.1vw, 2rem); line-height: 1.08; display: block; }
.pc .fiche__role { display: block; margin-top: .4rem; font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-55); }
.pc .fiche__focus { display: block; margin-top: .85rem; font-size: .92rem; color: var(--ink-70); }
.pc .fiche__go { display: block; margin-top: 1.1rem; font-size: 1.2rem; color: var(--ink-38); transition: transform var(--t), color var(--t); }
.pc .fiche:hover .fiche__go { transform: translateX(6px); color: var(--ink); }
@media (max-width: 1000px) { .pc .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .pc .grille { grid-template-columns: 1fr; } }

/* ---------- Variante C, le sommaire à révélation ----------
   Au repos, aucun portrait. Six noms en Playfair de six rem barrent la page
   comme un sommaire de revue. Le portrait n'apparaît qu'au passage du regard,
   en grand, dans le panneau fixe de droite, tandis que la rangée survolée
   se retourne en négatif et que les autres s'effacent. Le geste est le seul
   contenu graphique de la page, ce qui l'oppose radicalement à la frise de
   l'accueil. */
.pc .index { display: grid; grid-template-columns: minmax(0, 1fr) clamp(16rem, 30vw, 34rem); align-items: start; }
.pc .index__liste { border-top: 1px solid var(--rule); }
.pc .idx {
  position: relative; isolation: isolate; display: block;
  padding: clamp(1.4rem, 3vw, 2.6rem) 0 clamp(1.4rem, 3vw, 2.6rem) var(--gutter);
  border-bottom: 1px solid var(--rule);
  transition: color var(--t), opacity var(--t);
}
.pc .idx::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 .5s var(--lame);
}
.pc .index__liste:hover .idx { opacity: .32; }
.pc .index__liste .idx:hover { opacity: 1; color: var(--paper); }
.pc .idx:hover::after { clip-path: polygon(0 0, 114% 0, 100% 100%, -14% 100%); }
.pc .idx__nom {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.7rem, 1rem + 3.4vw, 4.2rem); line-height: 1.02; letter-spacing: -.022em;
}
.pc .idx__role { display: block; margin-top: .5rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-55); transition: color var(--t); }
.pc .idx:hover .idx__role { color: var(--paper-45); }
.pc .idx__focus { display: block; margin-top: .7rem; font-size: .93rem; color: var(--ink-70); max-width: 44ch; transition: color var(--t); }
.pc .idx:hover .idx__focus { color: var(--paper-70); }

/* le panneau qui reçoit le portrait, collé au bord droit */
.pc .index__vue { position: sticky; top: var(--head); height: calc(100vh - var(--head)); overflow: hidden; }
.pc .index__vue .pf {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .42s var(--lame);
}
.pc .index__vue .pf img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pc .index__vue .pf.is-on { opacity: 1; }
@media (max-width: 1000px) {
  .pc .index { grid-template-columns: 1fr; }
  .pc .index__vue { display: none; }
  .pc .index__liste:hover .idx { opacity: 1; }
}

/* ---------- Variante D, les plaques obliques ----------
   Six plaques dont le portrait est coupé à l'angle du logotype, disposées en
   deux rangées décalées de sorte que les obliques se poursuivent d'une plaque
   à l'autre et composent un ruban continu. Le nom se loge dans le triangle
   d'encre laissé par la coupe. */
.pc .plaques { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; border-block: 1px solid var(--rule); }
.pc .plaque { position: relative; display: block; overflow: hidden; background: var(--ink); }
.pc .plaque .pf {
  aspect-ratio: 3 / 3.5;
  clip-path: polygon(0 0, 100% 0, 100% 74%, 0 100%);
  transition: clip-path .55s var(--lame);
}
.pc .plaque:nth-child(even) .pf { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 74%); }
.pc .plaque .pf img { transition: transform .9s var(--lame); }
.pc .plaque:hover .pf img { transform: scale(1.05); }
.pc .plaque:hover .pf { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.pc .plaque:hover .pf__c, .pc .plaque:focus-visible .pf__c { clip-path: polygon(0 0, 118% 0, 100% 100%, -18% 100%); }
.pc .plaque__b { display: block; padding: clamp(.9rem, 1.8vw, 1.5rem) clamp(1rem, 2vw, 1.6rem) clamp(1.2rem, 2.2vw, 1.8rem); color: var(--paper); }
.pc .plaque__nom { display: block; font-family: var(--serif); font-size: clamp(1.2rem, .95rem + 1vw, 1.85rem); line-height: 1.08; }
.pc .plaque__role { display: block; margin-top: .35rem; font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--paper-45); }
.pc .plaque__focus { display: block; margin-top: .7rem; font-size: .9rem; color: var(--paper-70); }
@media (max-width: 1000px) { .pc .plaques { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .pc .plaques { grid-template-columns: 1fr; } }

/* ---------- Variante E, l'accordéon ----------
   Les six portraits occupent une seule rangée de lamelles étroites, à la façon
   d'un store. Celle que le regard atteint s'ouvre à quarante-cinq pour cent de
   la largeur tandis que les cinq autres se resserrent, et son nom, sa qualité
   et sa matière se découvrent dans l'ouverture. La rangée conserve sa hauteur,
   seule la répartition des largeurs travaille, ce qui donne un mouvement
   continu sans que rien ne saute. */
.pc .store { display: flex; height: clamp(26rem, 62vh, 40rem); border-block: 1px solid var(--rule); background: var(--ink); }
.pc .lame-p {
  position: relative; display: block; overflow: hidden;
  flex: 1 1 0; min-width: 0;
  border-right: 1px solid var(--rule-dark);
  transition: flex-grow .62s var(--lame);
}
.pc .lame-p:last-child { border-right: 0; }
.pc .store:hover .lame-p { flex-grow: .72; }
.pc .store .lame-p:hover, .pc .store .lame-p:focus-visible { flex-grow: 3.4; }
.pc .lame-p .pf { position: absolute; inset: 0; aspect-ratio: auto; }
.pc .lame-p .pf img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pc .lame-p:hover .pf__c, .pc .lame-p:focus-visible .pf__c { clip-path: polygon(0 0, 118% 0, 100% 100%, -18% 100%); }
/* le nom, à la verticale au repos, à l'horizontale dans la lamelle ouverte */
.pc .lame-p__nom {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  padding: 0 0 1.4rem 1.1rem;
  font-family: var(--serif); font-size: clamp(1rem, .9rem + .5vw, 1.35rem);
  line-height: 1.1; color: var(--paper); white-space: nowrap;
  transform-origin: left bottom; transform: rotate(-90deg) translateX(1.4rem);
  transition: transform .5s var(--lame);
}
.pc .lame-p:hover .lame-p__nom, .pc .lame-p:focus-visible .lame-p__nom { transform: none; }
.pc .lame-p__b {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 4rem 1.4rem 1.3rem; color: var(--paper);
  background: linear-gradient(to top, rgba(34, 31, 32, .94) 10%, rgba(34, 31, 32, 0));
  opacity: 0; transition: opacity .42s var(--lame);
}
.pc .lame-p:hover .lame-p__b, .pc .lame-p:focus-visible .lame-p__b { opacity: 1; transition-delay: .18s; }
.pc .lame-p__nomh { display: block; font-family: var(--serif); font-size: clamp(1.2rem, .95rem + 1vw, 1.9rem); line-height: 1.08; }
.pc .lame-p__role { display: block; margin-top: .35rem; font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--paper-45); }
.pc .lame-p__focus { display: block; margin-top: .6rem; font-size: .9rem; color: var(--paper-70); max-width: 30ch; }
.pc .lame-p:hover .lame-p__nom, .pc .lame-p:focus-visible .lame-p__nom { opacity: 0; }
@media (max-width: 900px) {
  .pc .store { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; gap: 2px; }
  .pc .lame-p { border-right: 0; aspect-ratio: 3 / 4; }
  .pc .lame-p__nom { transform: none; opacity: 1; padding: 0 0 1rem 1rem; }
  .pc .lame-p__b { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pc .lame-p, .pc .lame-p__nom, .pc .lame-p__b { transition: none; }
}

/* ---------- Variante F, l'affiche ----------
   Six bandes pleine largeur, chacune haute d'un tiers d'écran, portant le
   portrait en fond très assombri et le nom par-dessus, en Playfair de cinq
   rem. Au survol, le portrait s'éclaircit et se décale lentement, le nom
   glissant de quelques pixels. Le principe est celui de l'affiche, où l'image
   sert de fond au texte plutôt que de vignette à côté. */
.pc .affiches { border-top: 1px solid var(--rule); }
.pc .affiche {
  position: relative; display: flex; align-items: flex-end; overflow: hidden;
  min-height: clamp(13rem, 32vh, 22rem);
  padding: clamp(1.4rem, 3vw, 2.6rem) var(--gutter);
  border-bottom: 1px solid var(--rule-dark); background: var(--ink); color: var(--paper);
}
.pc .affiche .pf { position: absolute; inset: 0; aspect-ratio: auto; z-index: 0; }
.pc .affiche .pf img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center 22%;
  opacity: .42; filter: grayscale(1);
  transition: opacity .8s var(--lame), transform 1.2s var(--lame), filter .8s var(--lame);
  transform: scale(1.04);
}
.pc .affiche:hover .pf img { opacity: .66; filter: grayscale(0); transform: scale(1.1) translateY(-1.5%); }
.pc .affiche::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, rgba(34, 31, 32, .88) 0%, rgba(34, 31, 32, .45) 55%, rgba(34, 31, 32, .2) 100%);
}
.pc .affiche__b { position: relative; z-index: 2; transition: transform .6s var(--lame); }
.pc .affiche:hover .affiche__b { transform: translateX(10px); }
.pc .affiche__nom { display: block; font-family: var(--serif); font-size: clamp(1.8rem, 1rem + 3.4vw, 4.4rem); line-height: 1.02; letter-spacing: -.02em; }
.pc .affiche__role { display: block; margin-top: .5rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-45); }
.pc .affiche__focus { display: block; margin-top: .7rem; font-size: .93rem; color: var(--paper-70); max-width: 48ch; }
@media (prefers-reduced-motion: reduce) {
  .pc .affiche .pf img, .pc .affiche__b { transition: none; }
}

/* =========================================================================
   Trois variantes de la page Avocats composées autour du cercle.
   Le disque n'apparaît nulle part ailleurs sur le site, ni sur l'accueil, ni
   dans le logotype, dont la coupe est une oblique. Il donne donc à cette page
   un code graphique qui lui est propre, sans reprendre aucun geste connu.
   ========================================================================= */

/* ---------- Le médaillon, portrait inscrit dans un disque ----------
   Le cadrage remonte au-dessus du centre, la coupe oblique du reste du site
   cédant la place à un iris qui s'ouvre depuis le bas. */
.pc .rond {
  position: relative; display: block; width: 100%; aspect-ratio: 1;
  border-radius: 50%; overflow: hidden; background: rgba(34, 31, 32, .07);
}
.pc .rond img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.pc .rond .pf__c { clip-path: circle(0% at 50% 104%); transition: clip-path .72s var(--lame); }
.pc a:hover .rond .pf__c, .pc a:focus-visible .rond .pf__c { clip-path: circle(142% at 50% 104%); }
@media (prefers-reduced-motion: reduce) { .pc .rond .pf__c { transition: none; } }

/* ---------- Variante G, le cadran ----------
   Six médaillons répartis sur un cercle tracé, le centre tenant la légende.
   Le survol trace le rayon qui relie le médaillon au centre. */
.pc .cadran-band {
  padding: clamp(3rem, 7vw, 6.5rem) var(--gutter) clamp(3.5rem, 8vw, 7rem);
  border-block: 1px solid var(--rule-dark);
  background: var(--ink); color: var(--paper);
}
.pc .cadran {
  --dia: min(56rem, 80vh); --md: calc(var(--dia) * .215); --rr: calc(var(--dia) * .378);
  position: relative; width: var(--dia); height: var(--dia); margin-inline: auto;
}
.pc .cadran__cercle {
  position: absolute; inset: calc(50% - var(--rr));
  border: 1px solid var(--rule-dark); border-radius: 50%;
}
.pc .med {
  position: absolute; top: 50%; left: 50%; width: var(--md);
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--rr)));
}
.pc .cadran .med:nth-of-type(1) { --a: 0deg; }
.pc .cadran .med:nth-of-type(2) { --a: 60deg; }
.pc .cadran .med:nth-of-type(3) { --a: 120deg; }
.pc .cadran .med:nth-of-type(4) { --a: 180deg; }
.pc .cadran .med:nth-of-type(5) { --a: 240deg; }
.pc .cadran .med:nth-of-type(6) { --a: 300deg; }
/* le rayon, tracé dans le repère radial du médaillon */
.pc .med::before {
  content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 0;
  background: var(--paper-45); transform: translateX(-50%);
  transition: height .5s var(--lame);
}
.pc .med:hover::before, .pc .med:focus-visible::before {
  height: calc(var(--rr) - var(--md) / 2 - .5rem);
}
.pc .med__d { display: block; transform: rotate(calc(-1 * var(--a))); }
.pc .med .rond { transition: transform .5s var(--lame); }
.pc .med:hover .rond, .pc .med:focus-visible .rond { transform: scale(1.06); }
.pc .med__b {
  position: absolute; top: calc(100% + .8rem); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 13rem; text-align: center;
  font-size: .715rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--paper-70); transition: color var(--t);
}
.pc .med:hover .med__b, .pc .med:focus-visible .med__b { color: var(--paper); }
.pc .med__b .r, .pc .med__b .f { display: none; }
.pc .cadran__coeur {
  position: absolute; inset: 27.5%; display: grid; place-content: center; text-align: center;
}
.pc .coeur__f { grid-area: 1 / 1; opacity: 0; transition: opacity .4s var(--lame); }
.pc .coeur__f.is-on { opacity: 1; }
.pc .cadran__coeur:not(:has(.is-on)) .coeur__f:first-child { opacity: 1; }
.pc .coeur__nom {
  display: block; font-family: var(--serif);
  font-size: clamp(1.3rem, .9rem + 1.5vw, 2.4rem); line-height: 1.06; letter-spacing: -.016em;
}
.pc .coeur__role {
  display: block; margin-top: .8rem; font-size: .655rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--paper-45);
}
.pc .coeur__focus {
  display: block; margin-top: .9rem; font-size: .9rem; line-height: 1.5;
  color: var(--paper-70); text-wrap: balance;
}
@media (max-width: 860px) {
  .pc .cadran { width: auto; height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 3rem); }
  .pc .cadran__cercle, .pc .cadran__coeur, .pc .med::before { display: none; }
  .pc .med { position: static; width: auto; transform: none; }
  .pc .med__d { transform: none; }
  .pc .med__b { position: static; transform: none; max-width: none; width: auto; margin-top: 1rem; }
  .pc .med__b .r, .pc .med__b .f { display: block; }
  .pc .med__b .r { margin-top: .45rem; color: var(--paper-45); }
  .pc .med__b .f { margin-top: .6rem; font-size: .88rem; letter-spacing: 0; text-transform: none; color: var(--paper-70); }
}

/* ---------- Variante H, le sceau ----------
   Un seul disque au centre de la bande, les six noms disposés autour de lui
   comme les mentions d'un sceau, chacun relié au disque par un filet. */
.pc .sceau-band {
  padding: clamp(3rem, 7vw, 6rem) var(--gutter) clamp(3.5rem, 8vw, 7rem);
  border-top: 1px solid var(--rule); background: var(--paper-high);
}
.pc .sceau { position: relative; display: grid; place-items: center; min-height: min(38rem, 68vh); }
.pc .sceau__disque { position: relative; width: min(24rem, 34vw, 52vh); }
.pc .sceau__disque .rond { border: 1px solid var(--rule); }
.pc .sceau__f { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--lame); }
.pc .sceau__f.is-on { opacity: 1; }
.pc .sceau__disque:not(:has(.is-on)) .sceau__f:first-child { opacity: 1; }
.pc .snom {
  position: absolute; z-index: 2; display: block; max-width: 17rem;
  padding-block: .3rem; color: var(--ink);
}
.pc .snom__nom {
  display: block; font-family: var(--serif);
  font-size: clamp(1.05rem, .9rem + .8vw, 1.85rem); line-height: 1.1; letter-spacing: -.014em;
  transition: color var(--t);
}
.pc .snom__role {
  display: block; margin-top: .35rem; font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-55);
}
.pc .snom__focus {
  display: block; margin-top: .5rem; font-size: .86rem; line-height: 1.45; color: var(--ink-70);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .45s var(--lame), opacity .35s var(--lame);
}
.pc .snom:hover .snom__focus, .pc .snom:focus-visible .snom__focus { max-height: 5rem; opacity: 1; }
/* le filet de rappel vers le disque */
.pc .snom::after {
  content: ''; position: absolute; top: 1.1em; width: 2.4rem; height: 1px;
  background: var(--ink-38); transition: width .45s var(--lame), background-color var(--t);
}
.pc .snom:hover::after, .pc .snom:focus-visible::after { width: 4.2rem; background: var(--ink); }
.pc .sceau .snom:nth-of-type(1) { top: 0; left: 50%; transform: translateX(-50%); text-align: center; max-width: 24rem; }
.pc .sceau .snom:nth-of-type(1)::after { top: auto; bottom: -1.4rem; left: 50%; width: 1px; height: 2.4rem; transform: translateX(-50%); }
.pc .sceau .snom:nth-of-type(1):hover::after { width: 1px; height: 4.2rem; }
.pc .sceau .snom:nth-of-type(2) { top: 21%; left: 68%; }
.pc .sceau .snom:nth-of-type(3) { top: 62%; left: 68%; }
.pc .sceau .snom:nth-of-type(4) { bottom: 0; left: 50%; transform: translateX(-50%); text-align: center; max-width: 24rem; }
.pc .sceau .snom:nth-of-type(4)::after { top: -1.4rem; left: 50%; width: 1px; height: 2.4rem; transform: translateX(-50%); }
.pc .sceau .snom:nth-of-type(4):hover::after { width: 1px; height: 4.2rem; }
.pc .sceau .snom:nth-of-type(5) { top: 62%; right: 68%; text-align: right; }
.pc .sceau .snom:nth-of-type(6) { top: 21%; right: 68%; text-align: right; }
.pc .sceau .snom:nth-of-type(2)::after, .pc .sceau .snom:nth-of-type(3)::after { right: 100%; margin-right: .8rem; }
.pc .sceau .snom:nth-of-type(5)::after, .pc .sceau .snom:nth-of-type(6)::after { left: 100%; margin-left: .8rem; }
@media (max-width: 1000px) {
  .pc .sceau { display: block; min-height: 0; }
  .pc .sceau__disque { width: min(20rem, 62vw); margin: 0 auto clamp(2rem, 5vw, 3rem); }
  .pc .snom, .pc .sceau .snom:nth-of-type(1), .pc .sceau .snom:nth-of-type(2),
  .pc .sceau .snom:nth-of-type(3), .pc .sceau .snom:nth-of-type(4),
  .pc .sceau .snom:nth-of-type(5), .pc .sceau .snom:nth-of-type(6) {
    position: static; inset: auto; transform: none; text-align: left; max-width: none;
    padding-block: 1.05rem; border-top: 1px solid var(--rule);
  }
  .pc .snom::after, .pc .sceau .snom:nth-of-type(1)::after, .pc .sceau .snom:nth-of-type(4)::after { display: none; }
  .pc .snom__focus { max-height: none; opacity: 1; overflow: visible; }
}

/* ---------- Le rectangle, portrait au format du fichier ----------
   Le cadre épouse exactement le format quatre cinquièmes de la photographie,
   de sorte que le navigateur ne retranche plus rien de la hauteur et que le cou
   et le haut des épaules figurent tels que le photographe les a cadrés. La
   révélation de la couleur reprend la coupe oblique du logotype, que l'angle
   droit rend de nouveau possible. */
.pc .carre {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 5;
  overflow: hidden; background: rgba(34, 31, 32, .07);
}
.pc .carre img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.pc a:hover .carre .pf__c, .pc a:focus-visible .carre .pf__c {
  clip-path: polygon(0 0, 118% 0, 100% 100%, -18% 100%);
}

/* ---------- Variante I, l'éclipse ----------
   Six disques en chaîne, chacun mordant sur le suivant. Celui du regard passe
   au premier plan, la chaîne se desserrant pour lui faire place. */
.pc .eclipse {
  padding: clamp(3rem, 7vw, 6rem) var(--gutter) clamp(3rem, 7vw, 6rem);
  border-top: 1px solid var(--rule);
}
.pc .chaine { display: flex; align-items: center; justify-content: center; }
.pc .grain {
  position: relative; flex: 0 0 auto; width: clamp(6rem, 17.6vw, 19rem);
  transition: transform .5s var(--lame), margin-left .5s var(--lame);
}
.pc .grain + .grain { margin-left: clamp(-3.4rem, -2.8vw, -.7rem); }
.pc .chaine:hover .grain + .grain, .pc .chaine:focus-within .grain + .grain { margin-left: clamp(-1.1rem, -.9vw, -.2rem); }
.pc .grain:nth-child(1) { z-index: 6; }
.pc .grain:nth-child(2) { z-index: 5; }
.pc .grain:nth-child(3) { z-index: 4; }
.pc .grain:nth-child(4) { z-index: 3; }
.pc .grain:nth-child(5) { z-index: 2; }
.pc .grain:nth-child(6) { z-index: 1; }
.pc .grain .carre { box-shadow: 0 0 0 5px var(--paper); }
.pc .grain:hover, .pc .grain:focus-visible { z-index: 9; transform: scale(1.11); }
.pc .eclipse__leg {
  display: grid; margin-top: clamp(2rem, 4.5vw, 3.6rem); text-align: center;
}
.pc .leg__f { grid-area: 1 / 1; opacity: 0; transition: opacity .35s var(--lame); }
.pc .leg__f.is-on { opacity: 1; }
.pc .eclipse__leg:not(:has(.is-on)) .leg__f:first-child { opacity: 1; }
.pc .leg__nom {
  display: block; font-family: var(--serif);
  font-size: clamp(1.6rem, 1rem + 2.6vw, 3.4rem); line-height: 1.04; letter-spacing: -.02em;
}
.pc .leg__role {
  display: block; margin-top: .9rem; font-size: .7rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-55);
}
.pc .leg__focus {
  display: block; margin: .9rem auto 0; max-width: 48ch;
  font-size: .93rem; line-height: 1.5; color: var(--ink-70); text-wrap: balance;
}
@media (max-width: 700px) {
  .pc .chaine { flex-wrap: wrap; gap: .9rem 0; }
  .pc .grain { width: 34%; }
  .pc .grain + .grain { margin-left: -2.5%; }
}
@media (prefers-reduced-motion: reduce) {
  .pc .med .rond, .pc .med::before, .pc .grain, .pc .snom::after, .pc .snom__focus { transition: none; }
}
/* compléments des trois variantes au cercle */
.pc .med__b .n { display: block; }
.pc .sceau__disque { aspect-ratio: 1; }
.pc .sceau:has(.snom:hover) .pf__c, .pc .sceau:has(.snom:focus-visible) .pf__c { clip-path: circle(142% at 50% 104%); }