@charset "UTF-8";

/* ===========================================================================
   Étude du Ritz — feuille de style principale
   ---------------------------------------------------------------------------
   Charte graphique
     Typographie  Avenir Next, police officielle de l’Étude, auto-hébergée
                  en quatre coupes sous-ensemblées (60 Ko au total, § 0).
                  Aucune requête vers un service tiers.
     Couleurs     encre (#1A171B, reprise du logo), papier chaud (#F6F4F0)
                  et un accent bronze (#8A6E4B) pour les filets, les liens
                  et les intitulés de section.
     Rythme       échelle d’espacement de base 8, titres en capitales
                  interlettrées reprenant le dessin du logotype.

   Sommaire
     0. Polices              4. Liens et boutons   8. Équipe
     1. Variables            5. Mise en page       9. Publications
     2. Réinitialisation     6. En-tête           10. Formulaires
     3. Typographie          7. Pied de page      11. Utilitaires
                                                  12. Impression
   =========================================================================== */

/* --- 0. Polices ----------------------------------------------------------- */
/*
   Avenir Next, police officielle de l’Étude, auto-hébergée depuis
   assets/fonts/. Quatre coupes seulement — Regular, Italic, Medium, Demi —
   sous-ensemblées au latin étendu et à la ponctuation typographique :
   15 Ko chacune au lieu de 70, soit 60 Ko pour l’ensemble du site.

   Deux choix délibérés :

   - pas de `local()` en tête de `src` : la coupe servie est téléchargée même
     par les visiteurs qui ont Avenir Next installée, de sorte que le rendu
     soit rigoureusement identique sur toutes les plateformes ;
   - la coupe Demi est déclarée sur la plage 600–700 : `strong`, `b` et les
     rares règles en `font-weight: 700` s’y appuient, sans graisse synthétique.

   `font-display: swap` affiche immédiatement le texte dans la police de
   substitution, puis bascule : jamais de texte invisible au chargement.
*/

@font-face {
  font-family: "Avenir Next";
  src: url("../fonts/avenir-next-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Avenir Next";
  src: url("../fonts/avenir-next-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Avenir Next";
  src: url("../fonts/avenir-next-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Avenir Next";
  src: url("../fonts/avenir-next-600.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

/* --- 1. Variables --------------------------------------------------------- */

:root {
  /* Couleurs */
  --encre:        #1a171b;
  --encre-80:     #3a363d;
  --encre-60:     #6b666f;
  --encre-40:     #9c979f;
  --papier:       #ffffff;
  --papier-chaud: #f6f4f0;
  --papier-sombre:#121013;
  --filet:        #e3dfd8;
  --filet-clair:  #efece6;
  --bronze:       #8a6e4b;
  --bronze-fonce: #6b5439;
  --bronze-clair: #b49a77;
  /* Bronze patiné de la plaque des réserves : un ton mat, plus gris et plus
     clair que le bronze des filets, seul fond sur lequel du texte se lise. */
  --bronze-plaque:#aa9c87;
  --erreur:       #9b2c2c;
  --succes:       #2f6b46;

  /* Typographie */
  /* La pile de substitution ne sert que le temps du swap, et pour les
     caractères absents d'Avenir Next (les flèches, notamment). */
  --police: "Avenir Next", "Avenir Next LT Pro", "Avenir",
            "Nunito Sans", "Segoe UI", system-ui, -apple-system,
            "Helvetica Neue", Helvetica, Arial, sans-serif;
  --police-titre: var(--police);
  /* « Code » au sens du recueil de lois, non du code informatique : la seule
     empattée du site, réservée à la page d'erreur. C'est la police du Recueil
     systématique imprimé. Aucune n'est téléchargée — ce sont des polices
     présentes sur les systèmes. */
  --police-code: "Times New Roman", Times, Georgia, serif;

  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --t-md:   clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-lg:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --t-xl:   clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --t-2xl:  clamp(1.875rem, 1.5rem + 1.8vw, 2.875rem);
  --t-3xl:  clamp(2.25rem, 1.7rem + 2.6vw, 3.75rem);

  /* Espacement */
  --e-1: 0.5rem;
  --e-2: 1rem;
  --e-3: 1.5rem;
  --e-4: 2rem;
  --e-5: 3rem;
  --e-6: 4rem;
  --e-7: 6rem;
  --e-8: 8rem;

  /* Mise en page */
  --largeur:       76rem;
  --largeur-texte: 40rem;
  --gouttiere:     clamp(1.25rem, 5vw, 3.5rem);
  --entete-h:      5rem;

  --transition: 160ms ease;
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete-h) + var(--e-3));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--police);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern" 1, "liga" 1;
}

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

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; }

table { border-collapse: collapse; width: 100%; }

hr {
  border: 0;
  border-top: 1px solid var(--filet);
  margin: var(--e-5) 0;
}

::selection { background: var(--encre); color: var(--papier); }

:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
  border-radius: 1px;
}

/* --- 3. Typographie ------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.t-page {
  font-size: var(--t-3xl);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.t-section {
  font-size: var(--t-xl);
  font-weight: 500;
}

.t-sur {                       /* intertitre en capitales, façon logotype */
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: var(--e-2);
}

.t-chapeau {
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--encre-80);
  max-width: 46rem;
  text-wrap: pretty;
}

.t-petit  { font-size: var(--t-sm); }
.t-sourdine { color: var(--encre-60); }

/* Corps de texte long issu du champ « text » */
.prose {
  max-width: var(--largeur-texte);
  text-wrap: pretty;
}
.prose > * + * { margin-top: var(--e-3); }
.prose h2 {
  font-size: var(--t-lg);
  margin-top: var(--e-6);
  padding-top: var(--e-3);
  position: relative;
}
.prose h2::before {                /* court trait d'accent, jamais pleine largeur */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.25rem;
  height: 2px;
  background: var(--bronze);
}
.prose > h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: var(--t-md);
  font-weight: 600;
  margin-top: var(--e-5);
}
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 0.4em; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li {
  position: relative;
  padding-left: 1.4em;
}
.prose ul > li::before {
  content: "";
  position: absolute;
  /* Le tiret s'aligne sur le bord gauche du texte courant : le retrait de
     0,15 em le décalait de deux ou trois pixels vers l'intérieur, assez pour
     que la colonne perde son aplomb. */
  left: 0;
  /* Le tiret se cale sur la mi-hauteur d'x, non sur le milieu de la boîte de
     ligne : Avenir Next monte à 1,176 em au-dessus de la ligne de base pour
     ne descendre qu'à 0,353 em en dessous, si bien que le centre de la boîte
     tombe trois pixels et demi trop haut.

       0.5lh   → milieu de la boîte de ligne
     + 0.41em  → moitié de la dissymétrie de la fonte, d'où la ligne de base
     - 0.5ex   → moitié de la hauteur d'x, où le tiret doit se lire
     - 0.5px   → moitié de l'épaisseur du filet

     Seul 0,41 em dépend de la fonte ; à changer si l'Étude en change. */
  top: calc(0.5lh + 0.41em - 0.5ex - 0.5px);
  width: 0.5em;
  height: 1px;
  background: var(--bronze);
}
.prose ol { list-style: decimal; }
.prose blockquote {
  border-left: 2px solid var(--bronze);
  padding-left: var(--e-3);
  color: var(--encre-80);
  font-style: italic;
}
.prose code {
  font-size: 0.9em;
  background: var(--papier-chaud);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}
.prose table { font-size: var(--t-sm); margin-block: var(--e-3); }
.prose th, .prose td {
  text-align: left;
  padding: 0.6em 0.8em;
  border-bottom: 1px solid var(--filet);
}
.prose--large { max-width: 46rem; }

/* Chapeau et corps des publications : justification, avec césure. Sans elle,
   le français et ses mots longs creusent des lézardes entre les colonnes de
   mots. Le chapeau porte la même classe, pour la même règle. */
.prose--justifie p,
.prose--justifie li {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* --- 4. Liens et boutons -------------------------------------------------- */

a { color: inherit; }

.prose a,
.lien {
  color: var(--bronze-fonce);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--bronze-clair);
  transition: color var(--transition), text-decoration-color var(--transition);
}
.prose a:hover,
.lien:hover { color: var(--encre); text-decoration-color: var(--encre); }

.lien--clair { color: var(--bronze-clair); text-decoration-color: rgba(180, 154, 119, 0.6); }
.lien--clair:hover { color: #fff; text-decoration-color: #fff; }

/* Lien précédé d'un pictogramme (LinkedIn) */
.lien-icone {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.icone {
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  fill: currentColor;
}
.lien-icone .icone { opacity: 0.75; transition: opacity var(--transition); }
.lien-icone:hover .icone { opacity: 1; }

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.6em;
  border: 1px solid var(--encre);
  background: var(--encre);
  color: var(--papier);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition);
}
.bouton:hover { background: var(--bronze-fonce); border-color: var(--bronze-fonce); }

.bouton--fantome {
  background: transparent;
  color: var(--encre);
}
.bouton--fantome:hover { background: var(--encre); color: var(--papier); }

/* Lien fléché discret, utilisé dans les cartes et les listes */
.fleche {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bronze-fonce);
}
.fleche::after {
  content: "→";
  transition: transform var(--transition);
  letter-spacing: 0;
}
.fleche:hover::after { transform: translateX(0.25em); }

/* --- 5. Mise en page ------------------------------------------------------ */

.enveloppe {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.enveloppe--etroite { max-width: 54rem; }
/* Colonne d'un article : titre, chapeau, corps et réserve s'alignent sur un
   seul bord. La mesure est redéfinie ici plutôt que fixée en dur — « .prose »
   la lit dans la même variable et suit donc la colonne, au lieu de rester
   en retrait à l'intérieur. */
.enveloppe--texte {
  --largeur-texte: 44rem;
  max-width: calc(var(--largeur-texte) + 2 * var(--gouttiere));
}

.section { padding-block: var(--e-6); }
.section--large { padding-block: var(--e-7); }
.section--chaude { background: var(--papier-chaud); }

.section + .section { border-top: 1px solid var(--filet); }
.filtres { padding-block: var(--e-3); border-bottom: 1px solid var(--filet); }
.filtres + .section { border-top: 0; padding-top: var(--e-5); }
.section--chaude + .section,
.section + .section--chaude { border-top: 0; }

.grille {
  display: grid;
  gap: var(--e-5) var(--e-4);
}
/* « min(…, 100%) » borne la colonne minimale à la largeur disponible. Sans
   lui, une colonne de 24 rem — 384 px — déborde d'un téléphone de 375 px :
   la grille refuse de descendre en dessous de son minimum et la page entière
   s'élargit à 404 px. Le repli à une colonne se fait alors de lui-même,
   sans requête de média. */
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }
/* Arrêts et questions fréquentes : chapeaux de longueurs différentes, titres
   qui tiennent sur une, deux ou trois lignes. Sans rangées partagées, chaque
   bande dérivait de sa voisine — et les filets des listes avec elles.
   Les rangées descendent donc jusqu'aux entrées : trois bandes d'en-tête,
   cinq lignes de liste — autant que la limite posée dans le gabarit — et le
   lien de suite. Chaque sous-grille redéfinit son propre pas vertical, sans
   quoi l'écart de la grille parente se glisserait entre les entrées, qui
   doivent rester jointives. */
.grille--journal { grid-template-rows: repeat(9, auto); }
.grille--journal > * {
  display: grid;
  grid-row: span 9;
  grid-template-rows: subgrid;
  row-gap: var(--e-3);
}
.grille--journal .articles {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 0;
}
/* La ligne s'étire sur toute la rangée : sans quoi le survol s'arrêterait
   à la hauteur de son propre texte, plus courte que celle de sa voisine. */
.grille--journal .articles > li { display: grid; }
.grille--journal .article-ligne { align-content: start; }
.grille--duo { grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
/* Trois blocs d'information, deux puis un à l'étroit. « --3 » remplit autant
   de colonnes qu'il peut et en laissait une vide ici ; « auto-fit » les
   répartit. */
.grille--infos { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
/* Dès qu'il y a la place pour trois colonnes, elles cessent d'être égales :
   les horaires sont le bloc le plus bavard — deux plages par jour, sur deux
   rubriques — quand l'adresse tient en trois lignes courtes. */
@media (min-width: 64em) {
  .grille--infos {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.45fr) minmax(0, 1fr);
  }
}

/* Deux colonnes asymétriques : contenu principal + colonne d’appoint */
.duo {
  display: grid;
  gap: var(--e-5) var(--e-6);
  align-items: start;
}
@media (min-width: 60rem) {
  .duo { grid-template-columns: minmax(0, 1.6fr) minmax(15rem, 1fr); }
  .duo--inverse { grid-template-columns: minmax(15rem, 1fr) minmax(0, 1.6fr); }
  /* Colonne d'appoint plus effacée encore : à gauche une introduction
     courte, à droite le contenu, qui a besoin de la place. */
  .duo--tiers { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); }
}

/* En-tête de page */
.tete {
  padding-block: var(--e-6) var(--e-5);
  border-bottom: 1px solid var(--filet);
}
.tete__fil {
  font-size: var(--t-sm);
  color: var(--encre-60);
  margin-bottom: var(--e-2);
}
.tete__fil a { text-decoration: none; }
.tete__fil a:hover { color: var(--bronze-fonce); }
.tete .t-chapeau { margin-top: var(--e-3); }

/* Bandeau d’accueil */
.heros {
  position: relative;
  display: grid;
  align-items: end;
  min-height: var(--heros-min, min(64vh, 34rem));
  background: var(--papier-sombre);
  color: var(--papier);
  overflow: hidden;
}
/* z-index: 0 crée un contexte d'empilement : les rangs des images restent
   confinés au défilé et ne passent pas au-dessus du voile ni du texte. */
.diapo { position: absolute; inset: 0; z-index: 0; }
.diapo__vue {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;                 /* image unique : le bloc <style> du snippet
                                   ne s'applique qu'à partir de deux images */
  will-change: opacity;
}

/* Voile dégradé : l'image reste lisible en haut, le texte le reste en bas. */
.heros::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(18, 16, 19, 0.55) 0%,
    rgba(18, 16, 19, 0.62) 40%,
    rgba(18, 16, 19, 0.88) 100%
  );
}
.heros__contenu {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: var(--e-6);
  display: grid;
  gap: var(--e-5) var(--e-6);
  align-items: center;
}
@media (min-width: 58rem) {
  .heros__contenu {
    grid-template-columns: minmax(0, 1.4fr) minmax(13rem, 0.6fr);
  }
}
/* Deux mesures distinctes, et non deux fois la même : la phrase d'ouverture
   se lit en lignes courtes, le paragraphe qui la suit court plus large. Les
   deux blocs faisaient auparavant la même largeur — le titre s'étalait sur
   trois longues lignes et rien ne les distinguait au premier regard.
   La mesure est exprimée en « ch » : elle suit le corps du texte, qui varie
   avec la largeur de la fenêtre. */
.heros__titre {
  font-size: var(--t-2xl);
  font-weight: 400;
  letter-spacing: -0.015em;
  max-width: 24ch;
}
.heros {
  --heros-min: min(64vh, 34rem);
}
/* Le logotype tient lieu de signature institutionnelle, non de second titre :
   une largeur bornée plutôt qu'un remplissage de colonne, et un voile léger
   pour qu'il se pose sur la photographie sans lui disputer le regard. Le SVG
   est en ligne et hérite de « currentColor » — il reste blanc, sans filtre. */
.heros__logo {
  color: var(--papier);
  justify-self: end;
  width: clamp(11.5rem, 17vw, 14.5rem);
  opacity: 0.92;
}
.heros__logo svg { width: 100%; height: auto; }
@media (max-width: 57.999em) {
  /* Sur petit écran, le logotype passe au-dessus du titre, centré : seul sur
     sa ligne, l'alignement à gauche le laissait flotter contre le bord. */
  .heros__logo {
    order: -1;
    justify-self: center;
    width: 9.5rem;
    opacity: 0.88;
  }
}
.heros__texte {
  margin-top: var(--e-3);
  max-width: 48rem;
  font-size: var(--t-md);
  color: rgba(255, 255, 255, 0.82);
}
.heros__actions {
  margin-top: var(--e-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}
.heros .bouton {
  background: var(--papier);
  border-color: var(--papier);
  color: var(--encre);
}
.heros .bouton:hover { background: var(--bronze-clair); border-color: var(--bronze-clair); }
.heros .bouton--fantome {
  background: transparent;
  color: var(--papier);
  border-color: rgba(255, 255, 255, 0.5);
}
.heros .bouton--fantome:hover { background: var(--papier); color: var(--encre); }

/* En-tête et pied d'un bloc de la page d'accueil */
.bloc-tete { max-width: 46rem; margin-bottom: var(--e-4); }
.bloc-tete .t-chapeau { margin-top: var(--e-2); }
.bloc-tete .t-chapeau > * + * { margin-top: var(--e-2); }
.bloc-pied { margin-top: var(--e-4); }

/* Carte cliquable dans son ensemble.
   Le lien couvre la carte par un ::after en position absolue : le titre reste
   du texte ordinaire, et la zone cliquable ne se limite pas à quelques mots. */
.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-4);
  background: var(--papier);
  border: 1px solid var(--filet);
  transition: border-color var(--transition), transform var(--transition);
}
/* Un court filet bronze en tête de carte — le même repère que celui posé
   au-dessus des titres d'article et sur le bloc « Stages ». Six cartes se
   suivent sur l'accueil, toutes blanches et cernées de gris : ce trait donne
   à l'œil un point d'entrée, et rattache la page au reste du site. */
.carte::before {
  content: "";
  position: absolute;
  top: -1px;                       /* recouvre le filet gris du cadre */
  left: -1px;
  width: 2.25rem;
  height: 2px;
  background: var(--bronze);
  transition: width var(--transition);
}
/* Le filet s'allonge et le cadre passe au bronze au survol de n'importe
   quelle carte. « .carte:hover » plutôt que « :has(.carte__zone:hover) » :
   les cartes de publications sont cliquables de bout en bout, celles du
   barreau et du notariat ne le sont que par leurs liens — les deux réagissent
   désormais de la même façon. Le clavier suit, par le lien qui a le focus. */
.carte:hover::before,
.carte:has(a:focus-visible)::before { width: 4.5rem; }

.carte:hover,
.carte:has(a:focus-visible) {
  border-color: var(--bronze);
}
.carte:has(.carte__zone:focus-visible) {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}

.carte__zone { position: static; text-decoration: none; }
.carte__zone::after { content: ""; position: absolute; inset: 0; }

.carte__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4em 0.9em;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-60);
}
.carte__meta time { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.carte__meta > *:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.8em;
  margin-left: 0.9em;
  background: var(--filet);
  vertical-align: -0.05em;
}

.carte__titre {
  font-size: var(--t-lg);
  font-weight: 500;
  line-height: 1.25;
  text-wrap: balance;
}
.carte:has(.carte__zone:hover) .carte__titre { color: var(--bronze-fonce); }

.carte__intro {
  color: var(--encre-60);
  text-wrap: pretty;
}

.carte__etiquettes { margin-top: auto; padding-top: var(--e-1); }
.carte__etiquettes .etiquette { background: var(--papier-chaud); }

.carte__lien { margin-top: auto; }
.carte:has(.carte__zone:hover) .carte__lien::after { transform: translateX(0.25em); }

/* Sur fond chaud, les cartes reprennent le fond blanc pour se détacher. */
.section--chaude .carte { background: var(--papier); }
.section--chaude .encadre { background: var(--papier); }
.section--chaude .fiche__image { background: var(--papier); }
.section--chaude .fiche__image--vide { color: var(--filet); }
.section--chaude .carte__etiquettes .etiquette { background: var(--papier-chaud); }

/* Bandeau encre posé sur le papier : se détache du pied de page, lui aussi
   sombre, au lieu de s'y fondre. */
.bandeau {
  position: relative;
  padding: clamp(2rem, 5vw, 3.5rem);
  background: var(--papier-sombre);
  color: rgba(255, 255, 255, 0.82);
}
.bandeau h2, .bandeau strong { color: #fff; }
.bandeau .t-sur { color: var(--bronze-clair); }
.bandeau::before {              /* liseré d'accent sur le bord supérieur */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(4rem, 12vw, 7rem);
  height: 3px;
  background: var(--bronze);
}

/* Places de stage à pourvoir */
.places { margin-top: var(--e-2); }
.places > div + div {
  margin-top: var(--e-2);
  padding-top: var(--e-2);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.places dt {
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.places dd {
  margin: 0.15em 0 0;
  font-size: var(--t-lg);
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
}

/* Le texte de présentation des stages passe au second plan : c'est la place
   à pourvoir qui doit sauter aux yeux. */
.bandeau .prose { font-size: var(--t-sm); line-height: 1.6; }
.bandeau .prose > * + * { margin-top: var(--e-2); }

/* Un lien dans ce texte : le bronze foncé des liens courants ne tient pas sur
   l'encre — 2,7:1, illisible. Le bronze clair du reste du bandeau y remonte
   à 7:1, et le blanc marque le survol. */
.bandeau .prose a {
  color: var(--bronze-clair);
  text-decoration-color: rgba(180, 154, 119, 0.6);
}
.bandeau .prose a:hover,
.bandeau .prose a:focus-visible {
  color: #fff;
  text-decoration-color: #fff;
}

/* Adresse de candidature — seule adresse publiée du site */
.candidature { padding-top: var(--e-1); }
/* L'intitulé se tient près de l'adresse : ils forment une seule mention. */
.candidature .t-sur { margin-bottom: var(--e-1); }
.candidature__lien {
  display: inline-block;
  margin-top: 0.15em;
  font-size: var(--t-md);
  color: var(--bronze-clair);
  text-decoration: none;
  border-bottom: 1px solid rgba(180, 154, 119, 0.45);
  padding-bottom: 0.15em;
  transition: color var(--transition), border-color var(--transition);
  word-break: break-word;
}
.candidature__lien:hover {
  color: #fff;
  border-bottom-color: #fff;
}

/* Domaines juridiques — blocs de la page Expertise et des fiches ---------- */
.domaines {
  display: grid;
  gap: var(--e-2);
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

.domaine {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  padding: var(--e-3);
  background: var(--papier);
  border: 1px solid var(--filet);
  transition: background var(--transition), border-color var(--transition);
}
/* Le même court filet bronze qu'en tête des cartes de l'accueil. Sept blocs
   blancs cernés de gris se suivent ici : le trait leur donne un point d'entrée
   et dit, au repos et donc aussi sur écran tactile, qu'ils mènent quelque part.
   Mesures reprises telles quelles de « .carte::before » — c'est le sens de la
   reprise : les deux pages doivent porter le même repère, pas deux variantes. */
.domaine::before {
  content: "";
  position: absolute;
  top: -1px;                       /* recouvre le filet gris du cadre */
  left: -1px;
  width: 2.25rem;
  height: 2px;
  background: var(--bronze);
  transition: width var(--transition);
}
/* Survol du bloc entier, et non de la seule zone cliquable : les liens des
   subdivisions font partie du bloc, et l'accueil réagit déjà ainsi. */
.domaine:hover::before,
.domaine:has(a:focus-visible)::before { width: 4.5rem; }

.domaine:hover,
.domaine:has(a:focus-visible) { border-color: var(--bronze); }
.section--chaude .domaine { background: var(--papier); }
.domaine:hover { background: var(--papier-chaud); }
.domaine:has(.domaine__zone:focus-visible) {
  outline: 2px solid var(--bronze);
  outline-offset: -2px;
}

.domaine__titre {
  font-size: var(--t-md);
  font-weight: 500;
  line-height: 1.25;
  text-wrap: balance;
}
.domaine:has(.domaine__zone:hover) .domaine__titre { color: var(--bronze-fonce); }


.domaine__description {
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--encre-60);
  text-wrap: pretty;
}

/* Sous-catégorie affichée sur la page de sa catégorie — elle n'a pas de page
   à elle. Le filet de tête tient lieu de séparation ; l'ancre du titre est la
   cible des liens posés ailleurs sur le site (fiches, publications). */
.sous-domaine {
  padding-top: var(--e-2);
  border-top: 1px solid var(--filet);
}
.sous-domaine__titre {
  font-size: var(--t-md);
  font-weight: 500;
  line-height: 1.3;
}
.sous-domaine__texte {
  margin-top: var(--e-1);
  font-size: var(--t-sm);
  color: var(--encre-60);
  max-width: 34rem;
}
.sous-domaine__texte > * + * { margin-top: var(--e-1); }

.domaine__sous {
  list-style: none;
  margin-top: auto;
  padding-top: var(--e-1);
  font-size: var(--t-sm);
}
/* Un filet au-dessus de chaque entrée, et non entre deux voisines : la règle
   « li + li » ne connaît pas les colonnes, et les traits ne tombaient plus en
   face dès que la liste s'étalait. */
.domaine__sous li { padding-block: 0.2em; border-top: 1px solid var(--filet-clair); }
.domaine__sous a {
  position: relative;
  z-index: 1;                     /* passe au-dessus de la zone cliquable */
  display: block;
  padding: 0.2em 0;
  color: var(--encre-80);
  text-decoration: none;
}
.domaine__sous a:hover { color: var(--bronze-fonce); }

/* Un volet qui ne compte qu'un domaine — le notariat — n'a pas à rester
   confiné au tiers de la largeur pendant que ses sept subdivisions s'empilent.
   Sa vignette prend toute la place et se déplie en deux temps : le propos à
   gauche, ce qu'il recouvre à droite, sur plusieurs colonnes. */
.domaines:has(> .domaine:only-child) { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 48em) {
  .domaine:only-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    /* Deux rangées explicites : sans elles, la liste qui les enjambe se
       partageait leur hauteur et poussait la description vers le bas. */
    grid-template-rows: auto 1fr;
    column-gap: var(--e-6);
    row-gap: 0.75em;
    align-items: start;
    padding: var(--e-4);
  }
  .domaine:only-child > .domaine__titre,
  .domaine:only-child > .domaine__description { grid-column: 1; }
  .domaine:only-child > .domaine__description { max-width: 34rem; }
  .domaine:only-child > .domaine__sous {
    grid-column: 2;
    grid-row: 1 / -1;
    margin-top: 0;
    padding-top: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    column-gap: var(--e-4);
    align-content: start;
  }
}

.domaine__zone { position: static; }
.domaine__zone::after { content: ""; position: absolute; inset: 0; }

.domaine--compact { padding: var(--e-2) var(--e-3); gap: 0.35em; }

/* Encadré */
.encadre {
  border: 1px solid var(--filet);
  border-left: 2px solid var(--bronze);
  background: var(--papier-chaud);
  padding: var(--e-3) var(--e-4);
}
.encadre--sombre {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.18);
  border-left-color: var(--bronze-clair);
}

/* Figure */
.figure { margin: 0; }
.figure img { width: 100%; }
.figure figcaption {
  margin-top: var(--e-1);
  font-size: var(--t-sm);
  color: var(--encre-60);
}

/* --- 6. En-tête ----------------------------------------------------------- */

.saut {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--encre);
  color: var(--papier);
  padding: var(--e-2) var(--e-3);
}
.saut:focus { left: 0; }

.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--filet);
}

/* Le fond translucide est porté par un pseudo-élément, et non par .entete
   elle-même : backdrop-filter créerait sinon un bloc conteneur qui
   empêcherait le panneau de navigation mobile (position: fixed) de se
   dimensionner par rapport à la fenêtre. */
.entete::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
  backdrop-filter: saturate(150%) blur(8px);
}

.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: var(--entete-h);
}

.entete__logo {
  display: flex;
  align-items: center;
  padding-block: var(--e-2);       /* le monogramme ne touche plus le filet */
  text-decoration: none;
  color: var(--encre);
  flex: 0 0 auto;
}
.entete__logo svg { width: auto; height: clamp(1.9rem, 3.4vw, 2.35rem); }

/* Bascule du menu (sans JavaScript) */
.bascule { position: absolute; opacity: 0; pointer-events: none; }
.bascule__label {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  padding: var(--e-1) 0;
}
.bascule__barres {
  display: block;
  position: relative;
  width: 1.35rem;
  height: 1px;
  background: currentColor;
}
.bascule__barres::before,
.bascule__barres::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
}
.bascule__barres::before { top: -0.35rem; }
.bascule__barres::after  { top:  0.35rem; }

.navigation {
  display: flex;
  align-items: center;
  gap: var(--e-4);
}

.menu {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  list-style: none;
  margin: 0;
}
.menu a {
  display: inline-block;
  padding: 0.35em 0;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--encre-80);
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.menu a:hover { color: var(--encre); border-bottom-color: var(--bronze); }
.menu a[aria-current] { color: var(--encre); border-bottom-color: var(--encre); }

.langues {
  position: relative;
  flex: 0 0 auto;
}
.langues > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.45em 0.7em;
  border: 1px solid transparent;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-60);
  cursor: pointer;
  list-style: none;
  transition: color var(--transition), border-color var(--transition);
}
.langues > summary::-webkit-details-marker { display: none; }
.langues > summary:hover { color: var(--encre); }
.langues[open] > summary { color: var(--encre); border-color: var(--filet); }

.langues__code { text-decoration: none; border: 0; }

.langues__chevron {
  width: 0.4em;
  height: 0.4em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform var(--transition);
}
.langues[open] .langues__chevron { transform: translateY(0.05em) rotate(225deg); }

.langues__liste {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 10;
  min-width: 9rem;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  background: var(--papier);
  border: 1px solid var(--filet);
  box-shadow: 0 8px 24px rgba(26, 23, 27, 0.08);
}
.langues__liste a {
  display: block;
  padding: 0.5em 1em;
  font-size: var(--t-sm);
  text-decoration: none;
  color: var(--encre-80);
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.langues__liste a:hover { background: var(--papier-chaud); color: var(--encre); }
.langues__liste [aria-current] {
  font-weight: 600;
  color: var(--encre);
}
.langues__liste [aria-current]::after {
  content: "·";
  margin-left: 0.5em;
  color: var(--bronze);
}

@media (max-width: 63.999em) {
  .navigation {
    position: fixed;
    inset: var(--entete-h) 0 0 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--e-4);
    padding: var(--e-5) var(--gouttiere) var(--e-6);
    background: var(--papier);
    border-top: 1px solid var(--filet);
    overflow-y: auto;
    transform: translateY(-0.75rem);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), transform var(--transition),
                visibility var(--transition);
  }
  .bascule:checked ~ .navigation {
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  .menu {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--e-2);
    width: 100%;
  }
  .menu a {
    font-size: var(--t-lg);
    letter-spacing: 0.04em;
    text-transform: none;
    font-weight: 400;
  }
  .langues { padding-top: var(--e-3); border-top: 1px solid var(--filet); width: 100%; }
  .langues > summary { padding-inline: 0; }
  .langues[open] > summary { border-color: transparent; }
  .langues__liste { position: static; border: 0; box-shadow: none; padding-inline: 0; }
  .langues__liste a { padding-inline: 0; }
}

/* Au-delà de cette largeur, le menu est déployé et la bascule ne sert plus.
   Masquer le seul libellé laissait la case à cocher dans le document :
   invisible, sans nom accessible — son libellé n'étant plus rendu — mais
   toujours atteignable au clavier. Les deux disparaissent ensemble. */
@media (min-width: 64em) {
  .bascule,
  .bascule__label { display: none; }
}

/* --- 7. Pied de page ------------------------------------------------------ */

.pied {
  background: var(--papier-sombre);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--t-sm);
  padding-block: var(--e-6) var(--e-4);
  margin-top: auto;
}
.pied a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.pied a:hover { color: #fff; }

.pied__grille {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  padding-bottom: var(--e-5);
}
.pied__logo { display: block; width: 9rem; color: #fff; margin-bottom: var(--e-2); }
.pied h2 {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bronze-clair);
  margin-bottom: var(--e-2);
}
.pied ul { list-style: none; }
.pied li + li { margin-top: 0.35em; }
.pied address { font-style: normal; }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-4);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--e-3);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, 0.5);
}
.pied__liens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-3);
  list-style: none;
}
.pied__liens li + li { margin-top: 0; }

/* Sur un téléphone, les quatre blocs s'empilaient sur toute la hauteur de
   l'écran — 800 pixels pour 450 de texte, le reste en marges. Ils tiennent
   par deux, avec des écarts à la mesure de la colonne. */
@media (max-width: 34em) {
  .pied { padding-block: var(--e-4) var(--e-3); }
  .pied__grille {
    grid-template-columns: 1fr 1fr;
    gap: var(--e-4) var(--e-3);
    padding-bottom: var(--e-4);
  }
  .pied__logo { width: 7rem; }
}

/* --- 8. Équipe ------------------------------------------------------------ */


.fiche {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.fiche__image {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--papier-chaud);
  overflow: hidden;
  margin-bottom: var(--e-2);
}
.fiche__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(100%) contrast(1.02);
  transition: filter var(--transition), transform 400ms ease;
}
.fiche:hover .fiche__image img { filter: none; transform: scale(1.02); }
.fiche__image--vide {
  display: grid;
  place-items: center;
  color: var(--filet);
}
/* Le monogramme est dimensionné sur son conteneur, et non sur lui-même :
   le <span> du snippet prenait sinon la largeur intrinsèque du SVG, ce qui
   décalait le dessin vers la gauche du cadre. */
.fiche__marque {
  display: block;
  width: 32%;
  line-height: 0;
}
.fiche__marque svg { width: 100%; height: auto; }
.fiche__nom {
  font-size: var(--t-md);
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
.fiche:hover .fiche__nom { border-bottom-color: var(--bronze); }
.fiche__fonction {
  font-size: var(--t-sm);
  color: var(--encre-60);
  margin-top: 0.15em;
}

/* Biographie d'une fiche — plus aérée que l'ancienne grille serrée */
.bio__ouverture {
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--encre-80);
  text-wrap: pretty;
}
.bio__liste { margin-top: var(--e-3); }
.bio__liste > div + div {
  margin-top: var(--e-2);
  padding-top: var(--e-2);
  border-top: 1px solid var(--filet-clair);
}
.bio__liste dt {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze);
}
.bio__liste dd {
  margin: 0.25em 0 0;
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--encre-80);
}

/* Panneau repliable ouvert par ancrage (:target) — aucun JavaScript.
   Le formulaire de contact ne s'affiche que si le visiteur le demande, et
   se rouvre de lui-même après un envoi puisque l'URL de retour porte
   l'ancre #contact. */
.pli { display: none; }
.pli:target { display: block; }
.pli__tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-3);
}
.pli__corps {
  display: none;
  margin-top: var(--e-4);
}
/* Fermeture : une croix discrète, alignée sur le titre du panneau. */
.pli__fermer {
  display: none;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--filet);
  border-radius: 50%;
  color: var(--encre-60);
  font-size: 1.25rem;
  line-height: 1;
  text-decoration: none;
  transition: color var(--transition), border-color var(--transition);
}
.pli__fermer:hover,
.pli__fermer:focus-visible { color: var(--encre); border-color: var(--encre); }
.pli:target .pli__corps { display: grid; }
.pli:target .pli__fermer { display: grid; }

/* Fiche individuelle */
.portrait {
  aspect-ratio: 3 / 4;
  background: var(--papier-chaud);
  overflow: hidden;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.donnees {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35em var(--e-2);
  font-size: var(--t-sm);
  margin: 0;
}
.donnees dt {
  color: var(--encre-60);
  white-space: nowrap;
}
.donnees dd { margin: 0; }

.chrono { list-style: none; }
.chrono li {
  display: grid;
  gap: 0.1em var(--e-3);
  padding-block: 0.7em;
  border-top: 1px solid var(--filet-clair);
}
.chrono li:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 40em) {
  .chrono li { grid-template-columns: 8.5rem 1fr; }
}
.chrono b {
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--bronze-fonce);
}

.etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  list-style: none;
}
.etiquette {
  display: inline-block;
  padding: 0.3em 0.8em;
  border: 1px solid var(--filet);
  background: var(--papier);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--encre-80);
  text-decoration: none;
  border-radius: 999px;
  transition: border-color var(--transition), color var(--transition);
}
a.etiquette:hover { border-color: var(--bronze); color: var(--bronze-fonce); }
.etiquette[aria-current] {
  background: var(--encre);
  border-color: var(--encre);
  color: var(--papier);
}

/* Une grille, et non « columns » : le multi-colonnes laisse chaque colonne
   couler de son côté, si bien que les filets de deux voisines ne tombaient
   jamais à la même hauteur — d'où l'impression de tableau désaligné. En
   grille, toutes les cellules d'une rangée partagent sa hauteur. */
.assistantes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  column-gap: var(--e-4);
  list-style: none;
}
/* Les noms sont calés en tête de cellule, jamais au fond : c'est sur eux que
   l'œil aligne, et une assistante sans service ne doit pas glisser d'une
   ligne par rapport à sa voisine. Le filet, lui, suit la rangée. */
.assistantes li {
  padding-block: 0.55em;
  border-bottom: 1px solid var(--filet);
  font-size: var(--t-md);
  font-weight: 500;
  line-height: 1.35;
}
/* Le service peut aller du simple « Barreau » à « Secrétariat barreau de
   Me Grand » : ni capitales ni interlettrage, qui ne tiennent qu'au mot. */
.assistantes span {
  display: block;
  margin-top: 0.1em;
  font-size: var(--t-sm);
  font-weight: 400;
  line-height: 1.3;
  color: var(--encre-60);
}

/* --- 9. Publications ------------------------------------------------------ */

/* La liste se met en trois colonnes selon SA propre largeur, et non celle de
   la fenêtre : la même liste sert la page d'une section, pleine largeur, et
   l'index qui en montre deux côte à côte. Une requête sur la fenêtre y
   écrasait le titre entre la date et le domaine — un mot par ligne. */
.articles { list-style: none; }
/* Le contexte de requête est porté par la ligne, non par la liste : la
   liste doit pouvoir devenir « subgrid » sur la page des publications, ce
   que « container-type » lui interdirait — il impose un confinement de
   disposition, qui ramène « subgrid » à « none ». La ligne a la même
   largeur que la liste : la requête ci-dessous ne change pas de seuil. */
.articles > li {
  border-top: 1px solid var(--filet);
  container-type: inline-size;
}
.articles > li:last-child { border-bottom: 1px solid var(--filet); }

.article-ligne {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "date domaine"
    "titre titre";
  gap: 0.35em var(--e-3);
  padding-block: var(--e-3);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition);
}
/* Les libellés de domaine mesurent de 190 à 230 pixels : rétrécir leur
   colonne ne fait que les replier, sans rendre au titre de quoi respirer.
   Le seuil est donc relevé de 40 à 48 rem — en deçà, la ligne repasse à
   deux rangs, où le titre dispose de toute la largeur. C'est le cas des
   listes en colonne, celle d'une fiche de personne en particulier, où les
   trois colonnes ne laissaient au titre qu'un quart de la place. */
@container (min-width: 48rem) {
  .article-ligne {
    grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 13rem);
    grid-template-areas: "date titre domaine";
    gap: 0.35em var(--e-4);
    align-items: baseline;
  }
}
/* Rien ne disait que ces lignes étaient cliquables : ni soulignement, ni
   couleur de lien. Le fond chaud, le titre en bronze et le filet qui cerne
   la ligne le disent — au survol comme au clavier — sans qu'un signe
   supplémentaire soit nécessaire.
   La marge intérieure donne de l'air au fond coloré ; les filets, eux,
   restent alignés sur le texte de la page. */
.article-ligne { padding-inline: var(--e-2); }
.article-ligne:hover,
.article-ligne:focus-visible { background: var(--papier-chaud); }

/* Le filet supérieur de la ligne suivante fait office de filet inférieur :
   les deux se teintent, pour que la ligne parcourue soit cernée. */
.articles > li { transition: border-color var(--transition); }
.articles > li:has(.article-ligne:hover),
.articles > li:has(.article-ligne:focus-visible),
.articles > li:has(.article-ligne:hover) + li,
.articles > li:has(.article-ligne:focus-visible) + li { border-top-color: var(--bronze); }
.articles > li:last-child:has(.article-ligne:hover),
.articles > li:last-child:has(.article-ligne:focus-visible) { border-bottom-color: var(--bronze); }
.article-ligne__date {
  grid-area: date;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--encre-60);
  white-space: nowrap;
}
.article-ligne__titre {
  grid-area: titre;
  font-size: var(--t-md);
  font-weight: 500;
  line-height: 1.35;
  text-wrap: pretty;
}
.article-ligne:hover .article-ligne__titre { color: var(--bronze-fonce); }
.article-ligne__domaine {
  grid-area: domaine;
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--encre-60);
  text-transform: uppercase;
}
.article-ligne__intro {
  grid-column: 1 / -1;
  font-size: var(--t-sm);
  color: var(--encre-60);
  max-width: 52rem;
}
/* Même seuil que la mise en page à trois colonnes : le chapeau s'aligne
   sous le titre, pas sous la date. */
@container (min-width: 48rem) {
  .article-ligne__intro { grid-column: 2 / -1; }
}

.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em var(--e-2);
  font-size: var(--t-sm);
  color: var(--encre-60);
}
.meta > * + *::before {
  content: "·";
  margin-right: var(--e-2);
  color: var(--filet);
}

/* Réserve de responsabilité et réserve de confidentialité : une plaque de
   bronze mate, vissée sur la page. Même objet visuel partout — les trois
   gabarits des publications et tous les formulaires.

   Les dégradés sont fixes et très peu contrastés : ils donnent une patine,
   non un reflet. Rien ne bouge, rien ne brille. Le ton de la plaque est un
   bronze plus gris et plus clair que celui des filets : c'est le seul sur
   lequel un texte gravé garde ses 4,5:1. */
.reserve {
  --plaque-encre:  #2d2822;      /* patine sombre du texte gravé */
  --plaque-fixe:   #6d604f;      /* métal des fixations */
  position: relative;
  isolation: isolate;            /* confine le ::before au bloc */
  margin-top: var(--e-4);
  padding: clamp(1.35rem, 3vw, 1.8rem) clamp(1.6rem, 4vw, 2.35rem);
  border: 1px solid #786c5b;
  border-radius: 3px;
  background-color: var(--bronze-plaque);
  background-image:
    linear-gradient(105deg,
      rgba(255, 255, 255, 0.10) 0%,
      transparent 18%,
      rgba(255, 255, 255, 0.04) 44%,
      rgba(52, 43, 34, 0.06) 73%,
      rgba(255, 255, 255, 0.06) 100%),
    linear-gradient(180deg, #b5a994 0%, #aa9c87 48%, #a0937e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(45, 38, 31, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.75),
    0 6px 16px rgba(46, 40, 33, 0.07);
  color: var(--plaque-encre);
  font-size: var(--t-sm);
  line-height: 1.58;
}

/* Le cadre intérieur et les quatre fixations tiennent dans un seul
   pseudo-élément : la bordure fait le cadre, quatre dégradés radiaux posés
   aux angles font les rivets. Aucune balise décorative n'entre dans le HTML.
   « z-index: -1 » le place au-dessus du fond de la plaque et sous le texte. */
.reserve::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 6px;
  border: 1px solid rgba(62, 53, 43, 0.28);
  border-radius: 1px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
  background-image:
    radial-gradient(circle closest-side,
      #cbbda8 0 18%, #a4967f 54%, var(--plaque-fixe) 88%,
      rgba(109, 96, 79, 0) 100%),
    radial-gradient(circle closest-side,
      #cbbda8 0 18%, #a4967f 54%, var(--plaque-fixe) 88%,
      rgba(109, 96, 79, 0) 100%),
    radial-gradient(circle closest-side,
      #cbbda8 0 18%, #a4967f 54%, var(--plaque-fixe) 88%,
      rgba(109, 96, 79, 0) 100%),
    radial-gradient(circle closest-side,
      #cbbda8 0 18%, #a4967f 54%, var(--plaque-fixe) 88%,
      rgba(109, 96, 79, 0) 100%);
  background-repeat: no-repeat;
  background-size: 9px 9px;
  background-position: 6px 6px, right 6px top 6px, left 6px bottom 6px, right 6px bottom 6px;
  pointer-events: none;
}

/* Gravé, non imprimé : une lumière d'un pixel sous les lettres. */
.reserve__titre {
  display: block;
  margin-bottom: 0.55rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  line-height: 1.3;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.24);
}
.reserve > * + * { margin-top: var(--e-2); }
.reserve p { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.12); }

/* Un lien dans une réserve : le bronze des liens courants disparaîtrait dans
   la plaque. Le texte gravé lui sert de couleur, le soulignement le signale. */
.reserve a {
  color: var(--plaque-encre);
  text-decoration-color: rgba(45, 40, 34, 0.5);
}
.reserve a:hover,
.reserve a:focus-visible {
  color: var(--encre);
  text-decoration-color: var(--encre);
}

@media (max-width: 48rem) {
  .reserve {
    padding: 1.5rem 1.25rem;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      inset 0 -1px 0 rgba(45, 29, 15, 0.20),
      0 5px 14px rgba(46, 34, 23, 0.09);
  }
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  justify-content: center;
  align-items: center;
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--filet);
  font-size: var(--t-sm);
}
.pagination a,
.pagination__inactif {
  text-decoration: none;
  color: var(--bronze-fonce);
  font-size: var(--t-md);
  line-height: 1;
}
.pagination a:hover { color: var(--encre); }
.pagination__inactif { color: var(--filet); }

/* Présentation du domaine retenu, en tête d'une liste filtrée. */
.filtre-actif {
  max-width: 46rem;
  margin-bottom: var(--e-5);
}
.filtre-actif > * + * { margin-top: var(--e-2); }

.voisins {
  display: grid;
  gap: var(--e-2);
  margin-top: var(--e-6);
  padding-top: var(--e-4);
  border-top: 1px solid var(--filet);
}
.voisins a { text-decoration: none; }
.voisins .t-sur { margin-bottom: 0.35em; }
.voisins strong { font-weight: 500; }
/* Chaque sens tient son côté, qu'il ait ou non un vis-à-vis : la première
   publication n'a pas de précédente, et son « suivant » tombait à gauche. */
.voisins__suivant { text-align: right; }
@media (min-width: 44em) {
  .voisins { grid-template-columns: 1fr 1fr; }
  .voisins__suivant { grid-column: 2; }
}

/* --- 10. Formulaires ------------------------------------------------------ */

.formulaire { max-width: 42rem; }
.formulaire > * + * { margin-top: var(--e-2); }
.formulaire form { margin-top: var(--e-3); }
.formulaire__grille {
  display: grid;
  gap: var(--e-3);
}
@media (min-width: 40em) {
  .formulaire__grille { grid-template-columns: 1fr 1fr; }
  .champ--large { grid-column: 1 / -1; }
}

.champ { display: grid; gap: 0.4em; }
.champ label {
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.champ .requis { color: var(--bronze); }

.champ input[type="text"],
.champ input[type="email"],
.champ input[type="tel"],
.champ select,
.champ textarea {
  width: 100%;
  padding: 0.7em 0.85em;
  font: inherit;
  font-size: var(--t-base);
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--filet);
  border-radius: 0;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: 0;
  border-color: var(--bronze);
  box-shadow: 0 0 0 3px rgba(138, 110, 75, 0.14);
}
.champ textarea { min-height: 11rem; resize: vertical; }
/* Le chevron est dessiné ici : « appearance: none » retire celui du système,
   qui varie d'un navigateur à l'autre et jurait avec les autres champs. */
.champ select {
  appearance: none;
  padding-right: 2.5em;
  background-image: linear-gradient(45deg, transparent 50%, var(--encre-60) 50%),
                    linear-gradient(135deg, var(--encre-60) 50%, transparent 50%);
  background-position: right 1.15em top 55%, right 0.85em top 55%;
  background-size: 0.35em 0.35em, 0.35em 0.35em;
  background-repeat: no-repeat;
}
/* Texte suggéré : présent, mais nettement en retrait du texte saisi. */
.champ ::placeholder { color: var(--encre-40); opacity: 1; }
.champ--erreur input,
.champ--erreur textarea { border-color: var(--erreur); }

.champ__erreur {
  font-size: var(--t-sm);
  color: var(--erreur);
}

.champ--case {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.7em;
}
.champ--case input { margin-top: 0.35em; accent-color: var(--bronze); }
.champ--case label { font-weight: 400; font-size: var(--t-sm); line-height: 1.5; }

/* Pot de miel : masqué pour les humains, laissé au robot */
.pot-de-miel {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.message {
  padding: var(--e-3);
  border: 1px solid var(--filet);
  border-left: 3px solid var(--encre);
  margin-bottom: var(--e-4);
}
/* Le fond des fiches de personnes est déjà teinté : un aplat pâle n'y suffit
   pas à détacher le bandeau. C'est donc le filet, repris de la couleur de
   l'état sur les quatre côtés, qui le délimite — visible quel que soit le
   fond — l'aplat ne faisant plus que colorer. */
.message--succes { border-color: var(--succes); background: #e2efe7; }
.message--erreur { border-color: var(--erreur); background: #f8e6e6; }
.message p { font-size: var(--t-sm); }
.message p + p { margin-top: 0.5em; }

/* Bloc de coordonnées */
.coordonnees { font-style: normal; }
.coordonnees a { text-decoration: none; }
.coordonnees a.lien { text-decoration: underline; }
.coordonnees a:hover { color: var(--bronze-fonce); }
.coordonnees dt {
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-top: var(--e-3);
}
.coordonnees dt:first-child { margin-top: 0; }
.coordonnees dd { margin: 0.25em 0 0; }
/* Les horaires tiennent en plusieurs paragraphes : ils respirent un peu plus. */
.coordonnees dd.horaires > * + * { margin-top: var(--e-2); }
.coordonnees dd.horaires strong { font-weight: 600; }

/* Aperçu cartographique — proportions fixes, le cadre ne saute pas au
   chargement différé de l'iframe. Le nom « .carte » étant déjà celui des
   vignettes de publication, celui-ci s'appelle « .plan-acces ». */
.plan-acces {
  position: relative;
  aspect-ratio: 16 / 10;
  margin-top: var(--e-5);
  /* Le papier chaud plutôt que le blanc : si le cadre ne se charge pas —
     réseau coupé, embed refusé — il reste un pan de fond, non un trou. */
  background: var(--papier-chaud);
  border-top: 1px solid var(--filet);
}
.plan-acces iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  /* Gris de repos, couleurs au survol : le plan reste une illustration tant
     qu'on ne le consulte pas. Le léger contraste rattrape la fadeur du gris
     de Google. */
  filter: grayscale(100%) contrast(1.06);
  transition: filter var(--transition);
}
.plan-acces:hover iframe,
.plan-acces:focus-within iframe { filter: none; }

/* Le lien vers l'itinéraire, en pied des renseignements pratiques. Un filet
   le sépare, comme le pied d'un bloc ailleurs sur le site. */
.plan-lien {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--filet);
}

/* Dès qu'il y a la place, le plan quitte le flux : il tient tout le flanc
   droit de la section, du filet supérieur au filet inférieur, et va se
   perdre au bord de l'écran. Les coordonnées se replient sur deux colonnes
   dans la moitié gauche. */
@media (min-width: 64em) {
  .section--plan { position: relative; overflow: hidden; }
  /* Deux colonnes inégales : les horaires ont deux plages par rubrique,
     l'adresse tient en trois lignes courtes.

     Le texte s'arrête juste avant le plan, à une marge près — et non à un
     pourcentage de l'enveloppe, qui ne tombait juste qu'à une seule largeur
     d'écran. Le calcul reprend, dans l'ordre : la largeur du plan, la marge
     voulue, la gouttière déjà en place et la marge extérieure de l'enveloppe
     centrée. Les colonnes gardent ainsi toute la place que le plan leur
     laisse, quelle que soit la fenêtre. */
  .section--plan .grille--infos,
  .section--plan .plan-lien {
    margin-right: calc(
      min(40vw, 46rem)
      + var(--e-2)
      - var(--gouttiere)
      - (100vw - min(100vw, var(--largeur))) / 2
    );
  }
  .section--plan .grille--infos {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  }
  .section--plan .plan-acces {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40vw;
    max-width: 46rem;
    aspect-ratio: auto;
    margin-top: 0;
    /* Aucun filet sur ce bord : le fondu s'en charge, et un trait le
       coupait net au lieu de le laisser mourir. */
    border: 0;
  }
  /* Le bord gauche se fond dans le papier chaud, pour que le plan ne soit
     pas une vignette collée mais une matière qui affleure. Le voile ne
     retient pas la souris : le plan reste manipulable dessous.

     Mesuré en rem et non en pourcentage, et tenu court : Google pose sa
     fiche de lieu — « Av. Ritz 33 » — dans l'angle supérieur gauche du
     cadre, et un voile plus large la mangeait. */
  .section--plan .plan-acces::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
      var(--papier-chaud) 0,
      rgba(246, 244, 240, 0.45) 0.9rem,
      transparent 3.25rem);
    pointer-events: none;
  }
}

/* --- 11. Page d'erreur ---------------------------------------------------- */

/* La page introuvable se présente comme un article de code : numéro, titres
   marginaux et alinéas numérotés. L'art. 404 CO traite de la fin du mandat —
   pour une page qui n'existe plus, le rapprochement s'imposait. */
.erreur {
  position: relative;
  overflow: hidden;                /* contient le nombre en filigrane */
  display: grid;
  align-content: center;           /* le feuillet reste au centre d'un écran haut */
  padding-block: clamp(3.5rem, 8vw, 7.5rem);
  /* Un souffle chaud vers la droite, du côté du filigrane. C'est un vrai
     dégradé : le prototype posait deux bandes franches avec un arrêt net à
     72 %, et la couture se voyait en travers de la page. */
  background:
    linear-gradient(90deg, transparent 0 40%, rgba(138, 110, 75, 0.03) 100%),
    var(--papier-chaud);
}
/* Le nombre en contour, posé dans l'angle : un filigrane, pas une image. */
.erreur::after {
  content: "404";
  position: absolute;
  right: -0.05em;
  bottom: -0.28em;
  color: transparent;
  font-size: clamp(12rem, 30vw, 30rem);
  font-weight: 600;
  letter-spacing: -0.09em;
  line-height: 1;
  -webkit-text-stroke: 1px rgba(138, 110, 75, 0.08);
  pointer-events: none;
  user-select: none;
}
.erreur__interieur { position: relative; z-index: 1; }

/* Sur un écran haut, le contenu ne remplissait pas sa place et le papier
   blanc du corps réapparaissait sous la bande crème, avant le pied de page.
   La section prend toute la hauteur disponible. */
.page--error .contenu { display: flex; flex-direction: column; }
.page--error .erreur { flex: 1; }

/* Le feuillet, réglé sur la page imprimée du Recueil systématique : titres
   marginaux maigres dans une colonne étroite, gouttière courte, corps
   justifié et coupé. Les rapports de corps sont exprimés en « em » — un seul
   réglage, sur le feuillet, les tient tous. */
.article-code {
  position: relative;
  display: grid;
  grid-template-columns: minmax(7.5rem, 0.2fr) minmax(0, 0.8fr);
  column-gap: clamp(1rem, 2vw, 1.75rem);
  max-width: 70rem;
  padding: clamp(2rem, 4vw, 3.5rem);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(138, 110, 75, 0.24);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9),
    0 16px 44px rgba(26, 23, 27, 0.055);
  font-family: var(--police-code);
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  line-height: 1.32;
}
.article-code::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(138, 110, 75, 0.13);
  pointer-events: none;
}

/* Le numéro d'article a le corps du texte, et son seul gras. « inherit »
   reprend l'empattée du feuillet : les titres du site sont en Avenir. */
.article-code__numero {
  grid-column: 2;
  margin-bottom: 0.5em;
  font-family: inherit;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
}

/* Les titres marginaux ne sont pas gras dans l'imprimé, et ne se décalent
   pas les uns des autres : ce sont des lignes qui se suivent. */
.article-code__marge {
  grid-column: 1;
  grid-row: 2;
  font-size: 0.82em;
  font-weight: 400;
  line-height: 1.28;
}

.article-code__corps {
  grid-column: 2;
  grid-row: 2;
  text-align: justify;
  hyphens: auto;                   /* « inoppor-tun », comme au Recueil */
  counter-reset: alinea;
  /* Ouvre un plan propre au corps : sans lui, le trait de surligneur, posé
     en « z-index: -1 », passait derrière le fond translucide du feuillet et
     n'en ressortait qu'un jaune délavé. */
  isolation: isolate;
}
/* Les alinéas se numérotent seuls : le Panel ne reçoit que des paragraphes,
   et l'exposant reste une décoration — il n'entre pas dans le texte lu. */
.article-code__corps p {
  position: relative;
  padding-left: 0.9em;
  counter-increment: alinea;
}
.article-code__corps p + p { margin-top: 0.75em; }
.article-code__corps p::before {
  content: counter(alinea);
  position: absolute;
  top: 0.1em;
  left: 0;
  color: var(--bronze-fonce);
  font-size: 0.62em;
  font-weight: 400;
  line-height: 1;
}
/* L'italique du Panel devient un trait de surligneur : un feuillet de loi
   qu'on a lu et annoté. Le trait est un pseudo-élément posé derrière le mot —
   légèrement penché, débordant à gauche, aux bouts inégaux, et fondu aux deux
   extrémités comme un feutre qui attaque et quitte le papier. Le mélange par
   multiplication laisse l'encre passer par-dessus. */
.article-code__corps em {
  position: relative;
  font-style: normal;
}
.article-code__corps em::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -0.1em;                     /* le trait déborde en haut à gauche */
  bottom: -0.2em;                  /* et mord plus bas à droite */
  left: -0.3em;
  right: -0.4em;
  background: linear-gradient(101deg,
    rgba(247, 232, 63, 0) 0%,
    rgba(247, 232, 63, 0.95) 5%,
    rgba(240, 216, 40, 0.72) 33%,
    rgba(247, 232, 63, 0.92) 67%,
    rgba(236, 209, 33, 0.82) 93%,
    rgba(247, 232, 63, 0) 100%);
  /* Des rayons tous différents : aucun bout de trait n'est net. */
  border-radius: 0.7em 0.3em 0.5em 0.25em / 0.4em 0.6em 0.25em 0.55em;
  transform: rotate(-1.4deg) skewX(-4deg);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Les issues sont des liens dans le texte : l'encre du corps, souligné de
   bronze — dans ce feuillet, un bouton n'aurait pas sa place. */
.article-code__corps a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--bronze);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.14em;
  transition: color var(--transition), text-decoration-color var(--transition);
}
.article-code__corps a:hover,
.article-code__corps a:focus-visible {
  color: var(--bronze-fonce);
  text-decoration-color: var(--bronze-fonce);
}

@media (max-width: 48rem) {
  .erreur { background: var(--papier-chaud); }
  .erreur::after { display: none; }

  .article-code {
    grid-template-columns: 1fr;
    padding: 1.7rem 1.35rem;
  }
  /* En colonne unique, l'ordre du feuillet se déplie de la marge vers le
     corps : la classification d'abord, le filet, puis l'article lui-même —
     son numéro et ses alinéas. Le numéro passait avant, au même corps que
     les titres marginaux : quatre lignes empattées qui se suivaient, sans
     tête. Les rangs sont donc posés à la main, le HTML gardant l'ordre qui
     convient à la lecture assistée : le titre d'abord. */
  .article-code__marge {
    grid-column: 1;
    grid-row: 1;
    padding: 0 0 1.1rem;
    border-bottom: 1px solid rgba(138, 110, 75, 0.24);
    color: var(--encre-60);
  }
  .article-code__numero {
    grid-column: 1;
    grid-row: 2;
    padding-top: 1.1rem;
    margin-bottom: 0.55em;
    font-size: 1.65em;
    letter-spacing: -0.015em;
    line-height: 1.05;
  }
  .article-code__corps {
    grid-column: 1;
    grid-row: 3;
  }
}

/* --- 12. Utilitaires ------------------------------------------------------ */

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.contenu { flex: 1 0 auto; }

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

.pile > * + * { margin-top: var(--e-3); }
.pile-l > * + * { margin-top: var(--e-4); }
.pile-xl > * + * { margin-top: var(--e-5); }

.filet-haut { border-top: 1px solid var(--filet); padding-top: var(--e-3); }
.centre { text-align: center; }
.nowrap { white-space: nowrap; }

.plan { list-style: none; }
.plan > li { padding-block: 0.5em; border-top: 1px solid var(--filet); }
.plan a { text-decoration: none; }
.plan a:hover { color: var(--bronze-fonce); }
.plan ul { list-style: none; margin-top: 0.4em; padding-left: var(--e-3); }
.plan ul li { padding-block: 0.25em; font-size: var(--t-sm); color: var(--encre-60); }

/* --- 13. Impression ------------------------------------------------------- */

@media print {
  .entete, .pied, .heros__actions, .formulaire, .saut { display: none !important; }
  body { font-size: 11pt; color: #000; }
  .section { padding-block: 0.5cm; }
  a { text-decoration: none; color: #000; }
  .prose a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .fiche__image img { filter: none; }
  /* Les fonds ne s'impriment pas : la plaque redevient un simple encadré. */
  .reserve {
    background: none;
    box-shadow: none;
    border: 1px solid #999;
    color: #000;
    text-shadow: none;
  }
  .reserve::before { display: none; }
  .reserve p { text-shadow: none; }
  /* Le surligneur ne s'imprime pas non plus : le mot reprend son trait. */
  .article-code__corps em::before { display: none; }
  .article-code__corps em { text-decoration: underline; }
}