/* ==========================================================================
   05-BRAND — LA LETTRE DE LA PLAQUE
   Cinquième passe du 24-09-2026.

   La plaque de marque (JASMIN / L'ART DU PAYSAGE) est composée en capitales
   romaines inscrites : forts contrastes, empattements fins et aigus, jambage du
   J sous la ligne, interlettrage large sur la ligne basse. Cinzel reprend ce
   squelette (voir --font-brand, 00-tokens). Cette feuille lui rend tout ce qui,
   dans la page, doit se lire comme une inscription : les titres, et les petits
   textes capitales qui les accompagnent — étiquettes, navigation, boutons,
   repères de contact, légendes de figure.

   Deux conséquences, et ce sont les deux consignes de la passe :

     1. L'EMPHASE QUITTE LA COULEUR POUR LA LETTRE. Les mots mis en avant
        (<em> dans les titres) ne sont plus ni bleus ni italiques : Cinzel n'a
        pas d'italique, et un oblique synthétique déformerait le dessin. Ils
        passent simplement au laiton de la plaque.
     2. LA LETTRE INSCRITE EST PLUS LARGE À TAILLE ÉGALE. Les capitales de
        Cinzel demandent plus de blanc : les titres baissent d'un cran (voir
        --t-display-*, 00-tokens), gagnent de l'interligne et de l'interlettrage
        (--tracking-display, --lh-title) et se resserrent en largeur de mesure.

   La feuille est chargée après 04-immersive : elle a le dernier mot sur les
   composants, sans avoir à les réécrire.
   ========================================================================== */

/* ============================================ 1. CE QUI PORTE LA MARQUE */
h1,
h2,
h3,
h4,
.u-display,
.label,
.label__index,
.btn,
.link-quiet,
.crumbs,
.nav-link,
.nav-toggle,
.nav-overlay__link,
.site-nav__cta,
.contact-list__k,
.pager__k,
.pager__v,
.footer__col-title,
.member__name,
.member__role,
.member__contact-title,
.page-hero__title,
.proj-hero__title,
.proj-hero__meta,
.entry__title,
.entry__word--em,
.statement,
.invite__title,
.work-card__title,
.work-card__meta,
.media-row__title,
.tc__name,
.figure__caption b,
.index-list__name,
.index-list__meta,
.marquee__item,
.filter,
.work-card__badge,
.lightbox__meta,
.lightbox__close,
.work-empty {
  font-family: var(--font-brand);
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: var(--tracking-title);
}

/* `.gallery__zoom` (« Agrandir ») et `.lightbox__nav` (les deux flèches de la
   visionneuse) ont quitté ces deux listes le 26-09-2026 : la première a été
   retirée du balisage, la seconde n'est plus un libellé — c'est un signe, qui
   se passe de capitales comme d'interlettrage (voir 03-components). */

/* Les étiquettes gardent leur interlettrage large : c'est la ligne basse de la
   plaque, « L'ART DU PAYSAGE », transposée en 11 px. */
.label,
.label__index,
.crumbs,
.pager__k,
.contact-list__k,
.member__role,
.member__contact-title,
.figure__caption b,
.footer__col-title,
.proj-hero__meta,
.work-card__meta,
.work-card__badge,
.filter,
.lightbox__meta,
.lightbox__close,
.work-empty {
  letter-spacing: var(--tracking-label);
}

/* L'étiquette est une ligne de capitales tenue sur un seul rang. Quand elle
   porte un index, sa règle et son mot — « Équipe —— Sur le chantier », à
   À propos — elle dépasse la mesure d'un téléphone : elle plie alors sur deux
   rangs, l'index et la règle restant les seuls repères fixes. */
@media (max-width: 760px) {
  .label {
    flex-wrap: wrap;
    align-content: center;
    row-gap: 0.4em;
  }
}

/* Les quatre feuilles d'origine posent quelques interlettrages à la main
   (0,14 à 0,24 em, calibrés pour Jost) : ils gardent leur valeur partout où
   Jost parle encore, mais deux sélecteurs descendants reprennent la main sur
   des éléments passés à Cinzel et écrasent la règle de groupe — un sélecteur
   de descendant bat un sélecteur de classe. On les ramène à l'échelle, une
   fois, ici. */
.proj-hero__meta span,
.proj-hero__meta i {
  letter-spacing: var(--tracking-label);
}

/* Les nombres de Cinzel sont des capitales de chiffres : ils s'alignent et se
   suivent sans à-coup — utile pour les compteurs et les index. */
.pager__v {
  font-variant-numeric: lining-nums tabular-nums;
}

/* ======================================= 2. LES MOTS MIS EN AVANT */
.statement em,
.invite__title em,
.page-hero__title em,
.entry__title em,
.craft__quote em {
  font-style: normal;
  color: var(--accent);
}

/* ============================ 3. MESURES : LA CAPITALE DEMANDE DU BLANC
   Les grands titres baissent d'un cran : la phrase de chapitre passe de
   --t-mega à --t-display-2, la largeur de mesure se resserre — les capitales
   étant plus larges, à mesure égale il y a moins de signes par ligne. Ils
   prennent en échange de l'interligne (1,16) et le premier cran de
   l'interlettrage (--tracking-display) : c'est là que le titre respire. */
.statement {
  font-size: var(--t-display-2);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: var(--tracking-display);
  max-width: 22ch;
}

.statement--wide { max-width: 26ch; }

.statement--md {
  font-size: var(--t-display-3);
  max-width: 21ch;
}

.statement--center { max-width: 24ch; }

.invite__title,
.entry__title {
  font-size: var(--t-display-2);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: var(--tracking-display);
}

.invite__title { max-width: 16ch; }

/* Les grands titres de page et les bandeaux d'appel portent le même cran que
   la phrase de chapitre : un seul interlettrage pour un seul registre. */
.page-hero__title,
.proj-hero__title {
  letter-spacing: var(--tracking-display);
}

/* ============================== 3 bis. L'OUVERTURE, MISE EN PAGE DE TITRE
   Le titre d'ouverture est la seule chose à tenir dans un écran : il reprend
   donc la plus grande taille du site. Le pied de l'ouverture, privé de son
   chapeau, se replie sur une seule ligne : les repères à gauche, les deux
   gestes à droite.

   LE TITRE TIENT SUR UN SEUL RANG, CALÉ À GAUCHE. Il disait « L'art du
   paysage, dessiné et construit. » : quatre lignes, dont deux décalées par le
   retrait des lignes d'accent — près de la moitié de la hauteur de l'écran
   pour une phrase. Depuis le 24-09-2026 il dit « Habiter le paysage. » : deux
   mots, un seul rang, et il reste calé sur la gouttière comme la fiche qui le
   porte — étiquette au-dessus, crédit et gestes au-dessous. Les mots cessent
   d'être des blocs et deviennent deux items d'une ligne souple : la montée du
   premier écran est conservée (chaque mot garde son --i), le second reste au
   laiton, le retrait disparaît avec les lignes qu'il décalait. Quand le rang
   n'a plus la place des deux mots (téléphone), ils plient l'un sous l'autre,
   toujours à gauche. */
.entry__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  /* L'espace entre les deux mots, et l'interligne quand ils plient : la
     première valeur est la ligne, la seconde le mot. */
  gap: 0.08em 0.34em;
  /* « HABITER LE PAYSAGE. » mesure douze fois sa taille en capitales de Cinzel,
     interlettrage et espace compris : c'est la largeur qui doit tenir dans la
     coquille, gouttières déduites. La borne de 6,4 vw est cette mesure ; le
     plancher de 2,2 rem est la plus petite taille où le mot le plus long
     (« LE PAYSAGE. ») tient encore seul sur un téléphone. */
  font-size: clamp(2.2rem, 6.4vw, 6rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
}

/* Le mot d'accent perd son retrait : sur un seul rang centré, un décalage
   latéral ne décalerait plus rien, il creuserait le titre. La couleur du
   laiton suffit à le distinguer. */
.entry__title .entry__word--em {
  padding-left: 0;
}

.entry__word--em {
  font-style: normal;
  color: var(--accent);
}

/* Le pied de l'ouverture : une seule ligne depuis le 26-09-2026 — les deux
   faits du portfolio, sous le filet (voir README §33, les deux boutons
   retirés). `justify-content` et `align-items` sont partis avec la seconde
   colonne qu'ils alignaient ; il ne reste que la disposition et l'écart. */
.entry__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem clamp(1.5rem, 4vw, 4rem);
}

/* Les libellés de boutons et les entrées de navigation passent à la lettre
   inscrite : c'est là que le site parle le plus souvent en capitales. */
.btn,
.nav-link,
.site-nav__cta {
  letter-spacing: var(--tracking-ui);
}

/* Le menu plein écran écrit grand : à cette taille, 0,18 em ferait déborder la
   ligne ; il prend le cran des titres courants. */
.nav-overlay__link {
  letter-spacing: var(--tracking-title);
}

/* ===================================================== 4. LA LÉGENDE */
/* Les légendes de figure portaient un <b> et un <span> : le premier reste la
   marque (capitales), le second se lit — il repasse donc en Jost, corps du
   texte, sans capitales. */
.figure__caption b {
  font-weight: 400;
}

.figure__caption span {
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: 0;
}

/* ================================== 5. ÉQUILIBRE — AUCUN VIDE GRATUIT
   La lettre inscrite prend de la place : les blocs qui la portaient doivent
   être remesurés, sinon la page se creuse là où le texte s'est retiré. Deux
   réglages, tous dans le même sens — ramener le blanc au contact du contenu.

   1. L'OUVERTURE. Le titre était calé au bas du cadre (align-content: end) :
      au-dessus de lui, tout un écran de noir. Centré, il occupait la fenêtre
      comme une page de titre — mais il gardait `min-height: 100svh`, et après
      le passage du titre sur un seul rang il ne restait plus que du vide à
      remplir : 269 px en tête et 221 px au pied à 1440 px, 490 px de noir pour
      quatre blocs de texte. Depuis le 24-09-2026 l'ouverture se cale sur son
      contenu : elle finit sur les deux gestes, et le chapitre 01 commence
      aussitôt — la première chose qu'on voit en bas du premier écran est la
      suite de la page, pas du noir.
   2. LES TÊTES DE PAGE. Elles portaient jusqu'à 8,5 rem de garde sous la
      barre avant le titre, plus un chapeau détaché. La garde tombe à 4,5 rem
      au plus, et l'écart titre-chapeau se resserre.
   ========================================================================== */
.entry {
  min-height: auto;
  align-content: start;
  padding-bottom: 0;
}

.page-hero {
  padding-top: calc(var(--header-h) + clamp(1.75rem, 4.5vw, 4.5rem));
  padding-bottom: clamp(1.5rem, 3.5vw, 3rem);
  gap: clamp(1.25rem, 2.2vw, 2rem);
}

/* LA FICHE DU FONDATEUR. Elle était une carte de 22 rem posée à gauche, suivie
   de trois quarts de page vides. Le portrait garde sa largeur, mais le texte
   — nom, rôle, biographie, coordonnées — se range à sa droite : la fiche
   occupe la coquille, et le regard va du visage au texte sans traverser le
   noir. Sous 900 px, tout revient l'un sous l'autre, comme avant. */
.member__body {
  display: grid;
  gap: 1.1rem;
  align-content: start;
}

@media (min-width: 900px) {
  .team-grid--single {
    grid-template-columns: minmax(0, 1fr);
  }

  .member {
    grid-template-columns: minmax(15rem, 24rem) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }

  .member__body {
    max-width: 44ch;
    padding-top: 0.4rem;
  }
}