@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    tab-size: 4;
  }

  body {
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  input, button, textarea, select { font: inherit; color: inherit; }

  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }

  ul, ol { list-style: none; padding: 0; }

  a { color: inherit; text-decoration: none; }

  :where(:focus-visible) {
    outline: var(--focus-w) solid var(--focus-color);
    outline-offset: var(--focus-offset);
  }

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

@layer base {
  /* --- Polices auto-hébergées, sous-ensemble latin ----------------------- */
  @font-face {
    font-family: 'Archivo Variable';
    src: url('/assets/fonts/archivo-var-latin.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
      U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Geist Mono Variable';
    src: url('/assets/fonts/geist-mono-var-latin.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
      U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  html { scroll-behavior: smooth; }

  body {
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--face-text);
    font-size: var(--t-body);
    font-weight: var(--wght-text);
    line-height: var(--lh-body);
    font-variation-settings: 'wdth' var(--wdth-text);
    font-synthesis-weight: none;
  }

  ::selection {
    background: var(--signal);
    color: var(--n-100);
  }

  ::target-text { background: color-mix(in oklab, var(--signal) 18%, transparent); }

  strong, b { font-weight: var(--wght-fort); }

  hr {
    border: 0;
    border-top: var(--hair) solid var(--rule);
  }
}

@layer layout {
  /* ==========================================================================
     Le plan : gouttière de mesure à gauche, canevas à droite.
     La gouttière n'est pas une sidebar de documentation : c'est le cartouche
     d'un plan technique — repères, numéro courant, sommaire.
     ======================================================================== */

  .plan {
    display: grid;
    grid-template-columns: 100%;
    min-block-size: 100dvh;
  }

  /* --- Lien d'évitement, premier dans l'ordre de tabulation -------------- */
  .evitement {
    position: fixed;
    inset-block-start: var(--s-2);
    inset-inline-start: var(--s-2);
    z-index: 100;
    padding: var(--s-2) var(--s-4);
    background: var(--surface);
    color: var(--ink);
    border: var(--hair) solid var(--edge);
    font-family: var(--face-mono);
    font-size: var(--t-mono);
    letter-spacing: var(--ls-mono);
    translate: 0 -200%;
  }
  .evitement:focus-visible { translate: 0 0; }

  /* --- Gouttière -------------------------------------------------------- */
  .rail {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    padding: var(--s-4) var(--gutter);
    background: var(--canvas);
    border-block-end: var(--hair) solid var(--rule);
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
  }

  .rail__tete {
    display: flex;
    align-items: baseline;
    gap: var(--s-4);
  }
  .rail__tete .sig { margin-inline-end: auto; }

  .rail__panneau {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    flex: 1;
  }

  .rail__bas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
    margin-block-start: auto;
    padding-block-start: var(--s-5);
    border-block-start: var(--hair) solid var(--rule);
  }

  /* --- Canevas ---------------------------------------------------------- */
  .canevas {
    grid-column: 1;
    padding: var(--s-7) var(--gutter) var(--s-9);
    min-inline-size: 0;
  }

  .pied {
    grid-column: 1;
    padding: var(--s-6) var(--gutter);
    border-block-start: var(--hair) solid var(--rule);
  }

  /* --- Blocs du canevas ------------------------------------------------- */
  .bloc { margin-block-start: var(--s-9); }

  .mesure { max-inline-size: var(--mesure); }

  .planche {
    max-inline-size: var(--planche-max);
    margin-block: var(--s-6);
  }
  .planche img {
    inline-size: 100%;
    background: var(--surface);
    border: var(--hair) solid var(--rule);
  }

  /* ==========================================================================
     ≥1024 px : la gouttière devient une colonne fixe.
     ======================================================================== */
  @media (min-width: 64rem) {
    .plan {
      grid-template-columns: var(--rail-w) minmax(0, 1fr);
      column-gap: 0;
    }

    .rail {
      grid-column: 1;
      grid-row: 1 / span 2;
      block-size: 100dvh;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: var(--s-6) var(--s-5);
      border-block-end: 0;
      border-inline-end: var(--hair) solid var(--rule);
      gap: var(--s-6);
    }

    .rail__tete { flex-direction: column; align-items: stretch; gap: var(--s-4); }
    .rail__tete .sig { margin-inline-end: 0; }

    .canevas {
      grid-column: 2;
      grid-row: 1;
      padding-block-start: var(--s-8);
    }

    .pied { grid-column: 2; grid-row: 2; }
  }

  /* ≥1600 px : le canevas cesse de s'étirer. */
  @media (min-width: 100rem) {
    .canevas > * { max-inline-size: 84rem; }
  }
}

@layer components {
  /* ==========================================================================
     RÔLES TYPOGRAPHIQUES
     ======================================================================== */

  .display {
    font-size: var(--t-display-xl);
    font-weight: var(--wght-display);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    font-variation-settings: 'wdth' var(--wdth-display);
    text-wrap: balance;
  }
  .display--l { font-size: var(--t-display-l); }

  .titre {
    font-size: var(--t-title);
    font-weight: var(--wght-display);
    line-height: var(--lh-title);
    letter-spacing: var(--ls-title);
    font-variation-settings: 'wdth' var(--wdth-display);
    text-wrap: balance;
  }

  .sous-titre {
    font-size: var(--t-subtitle);
    font-weight: var(--wght-fort);
    line-height: var(--lh-title);
    letter-spacing: var(--ls-title);
  }

  .chapo {
    font-size: var(--t-subtitle);
    line-height: 1.5;
    text-wrap: pretty;
  }

  /* Le rôle utilitaire. Métadonnées, numérotation, étiquettes, Inspect. */
  .mono {
    font-family: var(--face-mono);
    font-size: var(--t-mono);
    font-weight: var(--wght-mono);
    line-height: var(--lh-mono);
    letter-spacing: var(--ls-mono);
    font-variant-numeric: tabular-nums;
  }

  .doux { color: var(--ink-muted); }

  /* ==========================================================================
     ÉTIQUETTE DE FRAME — deuxième signature, discrète.
     Sert l'orientation : où je suis dans la page.
     ======================================================================== */

  .etiquette {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    color: var(--ink-muted);
    margin-block-end: var(--s-4);
  }
  .etiquette::after {
    content: '';
    flex: 1;
    block-size: var(--hair);
    background: var(--rule);
    translate: 0 -0.3em;
  }
  .etiquette__num { color: var(--ink); }

  /* ==========================================================================
     LIENS — le signal n'existe qu'à l'échelle du trait.
     Jamais un aplat, jamais un bouton bleu.
     ======================================================================== */

  .lien {
    text-decoration: underline;
    text-decoration-color: var(--signal);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: text-decoration-thickness var(--dur-1) var(--ease),
                text-underline-offset var(--dur-1) var(--ease);
  }
  .lien:hover {
    text-decoration-thickness: 2px;
    text-underline-offset: 0.22em;
  }

  .renvoi {
    display: inline-flex;
    align-items: baseline;
    gap: var(--s-2);
    font-family: var(--face-mono);
    font-size: var(--t-mono);
    letter-spacing: var(--ls-mono);
    text-decoration: underline;
    text-decoration-color: var(--signal);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    padding-block: var(--s-2);
  }
  .renvoi:hover { text-decoration-thickness: 2px; }

  /* ==========================================================================
     NAVIGATION DE LA GOUTTIÈRE
     ======================================================================== */

  .sig {
    display: block;
    line-height: 1.15;
    font-weight: var(--wght-fort);
    letter-spacing: var(--ls-title);
  }
  .sig span {
    display: block;
    font-family: var(--face-mono);
    font-size: var(--t-mono);
    font-weight: var(--wght-mono);
    letter-spacing: var(--ls-mono);
    color: var(--ink-muted);
    margin-block-start: var(--s-1);
  }

  .nav-liste { display: flex; flex-direction: column; gap: var(--s-1); }
  .nav-liste--enligne { flex-direction: row; flex-wrap: wrap; gap: var(--s-4); }

  .nav-lien {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    padding: var(--s-2) 0 var(--s-2) var(--s-3);
    border-inline-start: 2px solid transparent;
    min-block-size: 44px;
    align-content: center;
    transition: border-color var(--dur-1) var(--ease),
                color var(--dur-1) var(--ease);
  }
  .nav-lien:hover { border-inline-start-color: var(--edge); }
  .nav-lien[aria-current] {
    border-inline-start-color: var(--signal);
    color: var(--ink);
    font-weight: var(--wght-fort);
  }
  .nav-lien[aria-current] .nav-lien__num { color: var(--signal); }
  .nav-lien__num { color: var(--ink-muted); font-variant-numeric: tabular-nums; }

  /* ==========================================================================
     SOMMAIRE COLLANT — progression de lecture
     ======================================================================== */

  .sommaire { display: flex; flex-direction: column; gap: var(--s-1); }
  .sommaire__jauge {
    block-size: 2px;
    background: var(--rule);
    margin-block-start: var(--s-3);
  }
  .sommaire__jauge span {
    display: block;
    block-size: 100%;
    inline-size: var(--progression, 0%);
    background: var(--signal);
  }

  /* ==========================================================================
     FICHE — grille de métadonnées
     ======================================================================== */

  .fiche {
    display: grid;
    gap: 0;
    max-inline-size: var(--planche-max);
  }
  .fiche > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-1);
    padding-block: var(--s-3);
    border-block-start: var(--hair) solid var(--rule);
  }
  .fiche > div:last-child { border-block-end: var(--hair) solid var(--rule); }
  .fiche dt { color: var(--ink-muted); }
  .fiche dd { font-size: var(--t-small); }

  @media (min-width: 40rem) {
    .fiche > div { grid-template-columns: 10rem 1fr; gap: var(--s-4); align-items: baseline; }
  }

  /* ==========================================================================
     PLANCHE — la figure porte son numéro et sa légende
     ======================================================================== */

  .planche figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-2) var(--s-4);
    margin-block-start: var(--s-3);
    color: var(--ink-muted);
  }
  .planche figcaption .num { color: var(--ink); }

  /* ==========================================================================
     ENCART, TÉMOIGNAGE
     ======================================================================== */

  .encart {
    padding: var(--s-4) var(--s-5);
    background: var(--surface);
    border: var(--hair) solid var(--rule);
    border-inline-start: 2px solid var(--signal);
    margin-block: var(--s-5);
    max-inline-size: var(--mesure);
  }
  .encart__titre { color: var(--ink); margin-block-end: var(--s-2); }

  .temoignage { max-inline-size: var(--mesure); }
  .temoignage p {
    font-size: var(--t-subtitle);
    font-style: italic;
    line-height: 1.5;
    text-wrap: pretty;
  }
  .temoignage footer { color: var(--ink-muted); margin-block-start: var(--s-4); }

  /* ==========================================================================
     LISTES RÉGLÉES
     ======================================================================== */

  .liste-reglee > li {
    padding-block: var(--s-3);
    border-block-start: var(--hair) solid var(--rule);
  }
  .liste-reglee > li:last-child { border-block-end: var(--hair) solid var(--rule); }

  .colonnes-2 { columns: 2; column-gap: var(--s-6); }
  @media (max-width: 30rem) { .colonnes-2 { columns: 1; } }

  /* ==========================================================================
     COMMANDES — sélecteur de langue, thème, Inspect
     Aucune n'utilise le signal en aplat.
     ======================================================================== */

  .commande {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-block-size: 44px;
    padding: var(--s-2) var(--s-3);
    background: transparent;
    color: var(--ink-muted);
    border: var(--hair) solid var(--edge);
    cursor: pointer;
    font-family: var(--face-mono);
    font-size: var(--t-mono);
    letter-spacing: var(--ls-mono);
    transition: color var(--dur-1) var(--ease),
                border-color var(--dur-1) var(--ease);
  }
  .commande:hover { color: var(--ink); border-color: var(--ink); }
  .commande[aria-pressed='true'] {
    color: var(--ink);
    border-color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--ink);
  }
  /* Seul le bouton Inspect porte la couleur de l'instrument : elle signale
     que la page est sous mesure, elle n'est pas un état générique. */
  .commande[data-inspect-bouton][aria-pressed='true'] {
    color: var(--ink);
    border-color: var(--measure);
    box-shadow: inset 0 0 0 1px var(--measure);
  }

  .langue { display: flex; align-items: center; gap: var(--s-2); }
  .langue [aria-current] { color: var(--ink); font-weight: var(--wght-fort); }
  .langue .barre { color: var(--rule); }

  /* ==========================================================================
     ENTRÉE DE PROJET — planche étiquetée, ratio natif, pas de carte
     ======================================================================== */

  .entree { display: block; padding-block: var(--s-6); }
  .entree + .entree { border-block-start: var(--hair) solid var(--rule); }
  .entree__visuel {
    /* inline-size est indispensable : max-inline-size seul laisse l'image à sa
       largeur intrinsèque, et la règle du calque reset est écrasée ici. */
    inline-size: 100%;
    max-inline-size: var(--planche-max);
    border: var(--hair) solid var(--rule);
    background: var(--surface);
  }
  .entree__titre {
    margin-block-start: var(--s-5);
    font-size: var(--t-display-l);
    font-weight: var(--wght-display);
    line-height: var(--lh-title);
    letter-spacing: var(--ls-title);
    font-variation-settings: 'wdth' var(--wdth-display);
  }
  .entree a { display: inline-block; }
  .entree a .marque {
    background-image: linear-gradient(var(--signal), var(--signal));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 2px;
    transition: background-size var(--dur-2) var(--ease);
  }
  .entree a:hover .marque, .entree a:focus-visible .marque { background-size: 100% 2px; }

  .suite {
    display: block;
    padding-block: var(--s-6);
    border-block-start: var(--hair) solid var(--rule);
  }

  /* --- Fil d'Ariane ------------------------------------------------------ */
  .fil ol { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: baseline; }
  .fil .sep { color: var(--rule); }
}

@layer components {
  /* --------------------------------------------------------------------------
     Repli de la gouttière sous 1024 px : panneau en overlay, sans JavaScript.
     Le sélecteur de langue, le thème et Inspect restent hors du repli : ils
     doivent être visibles partout, y compris menu fermé.
     ------------------------------------------------------------------------ */

  .rail__repli > summary {
    list-style: none;
    display: inline-flex;
  }
  .rail__repli > summary::-webkit-details-marker { display: none; }
  .rail__repli > summary::marker { content: ''; }

  .rail__repli[open] > summary { border-color: var(--ink); color: var(--ink); }

  .rail__intitule { margin-block-end: var(--s-2); }

  @media (max-width: 63.999rem) {
    /* Le panneau est sorti du flux, ouvert ou fermé. Sans cela, menu fermé,
       il serait dimensionné par la boîte du summary — quelques dizaines de
       pixels — et son contenu déborderait la page. */
    .rail__panneau {
      position: absolute;
      inset-block-start: 100%;
      inset-inline: 0;
      z-index: 60;
      padding: var(--s-5) var(--gutter) var(--s-7);
      background: var(--canvas);
      /* Plein écran : du bas de l'en-tête au bas du viewport. Le pourcentage
         se résout sur la hauteur de .rail — sa boîte de padding est le bloc
         conteneur — soit exactement la barre laissée visible au-dessus. */
      block-size: calc(100dvh - 100%);
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    .rail__bas { padding-block-start: var(--s-5); }
  }

  @media (min-width: 64rem) {
    /* Sur desktop le repli n'existe plus : le panneau est le rail. */
    .rail__repli > summary { display: none; }
    .rail__repli::details-content {
      content-visibility: visible;
      block-size: auto;
      overflow: visible;
    }
    .rail__repli { display: contents; }
  }
}

@layer components {
  /* ==========================================================================
     OUVERTURE & INDEX
     ======================================================================== */

  .entree__lien { display: block; }
  .entree__lien:focus-visible { outline-offset: 6px; }

  /* Une information par ligne, à toutes les largeurs : rôle, entreprise,
     année, expertises. */
  .entree__meta {
    display: grid;
    gap: var(--s-2) var(--s-6);
    margin-block-start: var(--s-5);
    max-inline-size: var(--planche-max);
    color: var(--ink-muted);
  }
  .entree__meta > div { display: flex; gap: var(--s-3); align-items: baseline; }
  .entree__meta dt { min-inline-size: 6.5rem; }
  .entree__meta dd { color: var(--ink); }

  .entree__aller { margin-block-start: var(--s-5); }

  /* ==========================================================================
     ÉTUDE DE CAS
     ======================================================================== */

  .fil { color: var(--ink-muted); margin-block-end: var(--s-5); }
  .fil [aria-current] { color: var(--ink); }

  .etude-tete h1 { margin-block-start: var(--s-2); }

  .planche--hero { margin-block: var(--s-8) var(--s-9); }
  .planche--hero figcaption { justify-content: flex-end; }

  /* Corps de l'étude : la mesure de lecture s'applique au texte,
     pas aux planches, qui gardent leur largeur propre. */
  .etude > * { max-inline-size: var(--mesure); }
  .etude > .planche,
  .etude > figure { max-inline-size: var(--planche-max); }

  .etude > p + p { margin-block-start: var(--s-4); }
  .etude > h2 {
    font-size: var(--t-title);
    font-weight: var(--wght-display);
    line-height: var(--lh-title);
    letter-spacing: var(--ls-title);
    font-variation-settings: 'wdth' var(--wdth-display);
    margin-block: var(--s-9) var(--s-5);
    padding-block-start: var(--s-5);
    border-block-start: var(--hair) solid var(--rule);
    max-inline-size: var(--planche-max);
    scroll-margin-block-start: var(--s-6);
    text-wrap: balance;
  }
  .etude > h2:first-child { margin-block-start: 0; }
  .etude > h3 {
    font-size: var(--t-subtitle);
    font-weight: var(--wght-fort);
    line-height: var(--lh-title);
    margin-block: var(--s-7) var(--s-3);
    scroll-margin-block-start: var(--s-6);
  }
  .etude > figure { margin-block: var(--s-7); }
  .etude > .renvoi-bloc { margin-block: var(--s-3); max-inline-size: var(--planche-max); }
  .etude > .renvoi-bloc + .renvoi-bloc { margin-block-start: 0; }

  /* ==========================================================================
     PROJETS VOISINS
     ======================================================================== */

  .voisins {
    display: grid;
    gap: 0;
    margin-block-start: var(--s-9);
  }
  .voisins .suite { padding-block: var(--s-6); }
  .voisins .suite:last-child { border-block-end: var(--hair) solid var(--rule); }
  .voisins .marque {
    background-image: linear-gradient(var(--signal), var(--signal));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 2px;
    transition: background-size var(--dur-2) var(--ease);
  }
  .voisins .suite:hover .marque,
  .voisins .suite:focus-visible .marque { background-size: 100% 2px; }
  .voisins .suite:last-child { text-align: end; }
  .voisins .suite:last-child .etiquette { flex-direction: row-reverse; }
  .voisins .suite:last-child .etiquette::after { translate: 0 -0.3em; }
  .voisins__sens {
    display: inline-block;
    transition: translate var(--dur-2) var(--ease);
  }
  .voisins .suite:hover .voisins__sens { translate: -0.25rem 0; }
  .voisins .suite:last-child:hover .voisins__sens { translate: 0.25rem 0; }

  @media (min-width: 48rem) {
    .voisins { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); }
    .voisins .suite:last-child { border-block-end: 0; }
    .voisins .suite { border-block-end: var(--hair) solid var(--rule); }
  }

  /* ==========================================================================
     SOMMAIRE DANS LA GOUTTIÈRE
     ======================================================================== */

  .sommaire-bloc .nav-lien { min-block-size: 36px; padding-block: var(--s-1); }
  .sommaire-bloc .nav-lien span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ============================================================================
   Mode Inspect. Éteint par défaut, sans aucun effet sur la page.
   Toutes les valeurs affichées sont lues à l'exécution dans les custom
   properties réelles : rien n'est écrit en dur ici ni dans le script.
   ========================================================================= */

@layer components {
  .inspect { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
  .inspect[hidden] { display: none; }

  /* --- Cadre porté par l'élément visé ----------------------------------- */
  .inspect__cadre {
    position: absolute;
    outline: 1px solid var(--measure);
    outline-offset: 0;
  }
  .inspect__marge {
    position: absolute;
    border: 1px dashed color-mix(in oklab, var(--measure) 55%, transparent);
  }
  .inspect__creux {
    position: absolute;
    background: color-mix(in oklab, var(--measure) 12%, transparent);
  }

  /* --- Cotes ------------------------------------------------------------- */
  .inspect__cote {
    position: absolute;
    padding: 1px 4px;
    background: var(--measure);
    color: var(--n-100);
    font-family: var(--face-mono);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    translate: -50% -50%;
  }
  .inspect__cote--titre { translate: 0 -100%; }

  /* --- Grille de colonnes ------------------------------------------------ */
  .inspect__grille {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
      to right,
      color-mix(in oklab, var(--measure) 14%, transparent) 0 1px,
      transparent 1px var(--s-6)
    );
  }

  /* --- Panneau de lecture ------------------------------------------------ */
  .inspect__panneau {
    position: fixed;
    inset-block-end: var(--s-4);
    inset-inline-end: var(--s-4);
    inline-size: min(22rem, calc(100vw - var(--s-8)));
    max-block-size: min(26rem, 60dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: auto;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--measure);
    padding: var(--s-4);
    font-family: var(--face-mono);
    font-size: var(--t-mono);
    line-height: var(--lh-mono);
    letter-spacing: var(--ls-mono);
  }
  .inspect__panneau h2 {
    color: var(--measure);
    margin-block-end: var(--s-3);
    padding-block-end: var(--s-2);
    border-block-end: 1px solid color-mix(in oklab, var(--measure) 40%, transparent);
  }
  .inspect__groupe + .inspect__groupe {
    margin-block-start: var(--s-3);
    padding-block-start: var(--s-3);
    border-block-start: 1px solid var(--rule);
  }
  .inspect__groupe > p { color: var(--ink-muted); margin-block-end: var(--s-1); }
  .inspect__ligne {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s-3);
    padding-block: 1px;
  }
  .inspect__ligne dt { color: var(--ink); overflow-wrap: anywhere; }
  .inspect__ligne dd { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
  .inspect__ligne dd b { color: var(--measure); font-weight: 500; }

  .inspect__pastille {
    display: inline-block;
    inline-size: 0.75em;
    block-size: 0.75em;
    border: 1px solid var(--edge);
    translate: 0 0.05em;
    margin-inline-end: var(--s-1);
  }

  .inspect__aide { color: var(--ink-muted); margin-block-start: var(--s-3); }
}

@layer utilities {
  .lecteur-seul {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .flux > * + * { margin-block-start: var(--flux, var(--s-4)); }

  /* Le contenu large défile dans son propre conteneur : la page, jamais. */
  .defilement {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    max-inline-size: 100%;
  }

  .mt-1 { margin-block-start: var(--s-1); }
  .mt-2 { margin-block-start: var(--s-2); }
  .mt-3 { margin-block-start: var(--s-3); }
  .mt-4 { margin-block-start: var(--s-4); }
  .mt-5 { margin-block-start: var(--s-5); }
  .mt-6 { margin-block-start: var(--s-6); }
  .mt-7 { margin-block-start: var(--s-7); }
  .mt-8 { margin-block-start: var(--s-8); }
}

@layer components {
  /* ==========================================================================
     OUVERTURE DE L'ACCUEIL
     ======================================================================== */

  .ouverture__intro { display: block; }
  .ouverture__nom { display: block; margin-block-start: var(--s-2); }

  .ouverture__expertises {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) 0;
    color: var(--ink-muted);
  }
  .ouverture__expertises li + li::before {
    content: '/';
    color: var(--rule);
    margin-inline: var(--s-3);
  }

  .acces li { padding-block: var(--s-4); }

  /* ==========================================================================
     PIED DE PAGE
     ======================================================================== */

  .pied__grille {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3) var(--s-6);
    align-items: baseline;
  }
  .pied__grille p:first-child { margin-inline-end: auto; }
}

@layer components {
  /* ==========================================================================
     À PROPOS
     ======================================================================== */

  .portrait { display: grid; gap: var(--s-6); align-items: start; }
  .portrait img { inline-size: 100%; border: var(--hair) solid var(--rule); background: var(--surface); }

  @media (min-width: 48rem) {
    .portrait { grid-template-columns: 17.5rem minmax(0, 1fr); gap: var(--s-7); }
  }

  .duo { display: grid; gap: var(--s-7); }
  @media (min-width: 48rem) {
    .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); }
  }

  /* Vignette + libellé sur une même ligne de base. */
  .avec-vignette { display: inline-flex; align-items: center; gap: var(--s-3); }
  .avec-vignette img { flex: none; }
  .cadre { border: var(--hair) solid var(--rule); border-radius: 50%; }
  .flexterne { margin-inline-start: var(--s-2); color: var(--ink-muted); }

  /* ==========================================================================
     CV
     ======================================================================== */

  .experience {
    display: grid;
    gap: var(--s-4);
    padding-block: var(--s-6);
    border-block-start: var(--hair) solid var(--rule);
  }
  .experience:last-child { border-block-end: var(--hair) solid var(--rule); }
  .recit { color: var(--ink-muted); max-inline-size: var(--mesure); }
  .recit strong { color: var(--ink); }

  @media (min-width: 56rem) {
    .experience { grid-template-columns: 20rem minmax(0, 1fr); gap: var(--s-7); }
  }

  .diplomes { display: grid; gap: 0; }
  .diplome {
    padding-block: var(--s-5);
    border-block-start: var(--hair) solid var(--rule);
  }
  .diplome:last-child { border-block-end: var(--hair) solid var(--rule); }

  @media (min-width: 48rem) {
    .diplomes { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-6); }
    .diplome { border-block-end: var(--hair) solid var(--rule); }
  }

  .colonnes-3 { columns: 3; column-gap: var(--s-6); }
  @media (max-width: 48rem) { .colonnes-3 { columns: 2; } }
  @media (max-width: 30rem) { .colonnes-3 { columns: 1; } }

  .deux-bouts {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-4);
  }
}