/* ==========================================================================
   03-COMPONENTS
   ========================================================================== */

/* CE QUI VIVAIT ICI ET N'Y VIT PLUS (23-09-2026, troisième passe) :
   Le bloc `.hero` — l'ancienne ouverture photographique de l'accueil — occupait
   le haut de cette feuille : image plein cadre animée lentement (`.hero__media`,
   `heroDrift`), voile de lisibilité en deux dégradés (`.hero::after`), et indice
   de défilement centré (`.hero__scroll`). Aucune page ne portait plus la classe
   `hero` depuis que l'accueil est passé à `.entry` (04-immersive), et son voile
   contredisait le parti du jour : une photographie, aucun voile. Le bloc est
   retiré d'un coup, avec ses deux animations. Les héros de page intérieure
   (`.page-hero`, `.proj-hero`) restent — eux sont vivants. Voir README §20. */

/* ================================================== H\u00c9ROS DE PAGE INT\u00c9RIEURE */
.page-hero {
  padding-top: calc(var(--header-h) + clamp(3rem, 9vw, 8.5rem));
  padding-bottom: clamp(2rem, 5vw, 4rem);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.page-hero__title {
  font-size: var(--t-display-2);
  max-width: 26ch;
  margin: 0;
}

.page-hero__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--c-laiton);
}

.chapter--dark .page-hero__title em,
.chapter--moss .page-hero__title em {
  color: var(--c-laiton-clair);
}

.page-hero__foot {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
}

@media (min-width: 900px) {
  .page-hero__foot {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  align-items: center;
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.crumbs a:hover {
  color: var(--accent);
}

.crumbs span[aria-hidden] {
  opacity: 0.45;
}

/* ================================================================== LIENS TEXTE */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-bottom: 0.5em;
  position: relative;
  color: var(--accent);
}

.link-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--hairline);
  background: currentColor;
  transform-origin: 0 50%;
  transition: transform var(--dur-2) var(--ease);
}

.link-arrow svg {
  width: 1.6em;
  height: 1.6em;
  transition: transform var(--dur-1) var(--ease);
}

.link-arrow:hover svg,
.link-arrow:focus-visible svg {
  transform: translate3d(0.35em, 0, 0);
}

.link-arrow:hover::after,
.link-arrow:focus-visible::after {
  transform: scaleX(0.42);
}

.link-quiet {
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  transition: color var(--dur-1) var(--ease);
}

.link-quiet:hover {
  color: var(--accent);
}

/* ================================================== INDEX DES PROJETS (CARTES)
   Grille de 12 colonnes ; chaque carte occupe une place différente pour
   éviter le rythme régulier « catalogue ». Les décalages sont annulés en
   dessous de 1024px pour rester parfaitement lisible au téléphone.
   ============================================================================= */
.work-index {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.4vw, 4rem) clamp(1rem, 2.4vw, 2.5rem);
}

.work-card {
  grid-column: span 6;
  position: relative;
  display: grid;
  gap: 1.1rem;
  align-content: start;
}

.work-card--wide {
  grid-column: span 7;
}

.work-card--narrow {
  grid-column: span 5;
}

.work-card--half {
  grid-column: span 6;
}

.work-card--third {
  grid-column: span 4;
}

.work-card--offset {
  margin-top: clamp(0rem, 6vw, 5.5rem);
}

.work-card--offset-lg {
  margin-top: clamp(0rem, 10vw, 9rem);
}

@media (max-width: 1024px) {
  .work-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .work-card,
  .work-card--wide,
  .work-card--narrow,
  .work-card--half,
  .work-card--third {
    grid-column: span 1;
  }
  .work-card--offset,
  .work-card--offset-lg {
    margin-top: 0;
  }
}

@media (max-width: 700px) {
  .work-index {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }
}

.work-card__frame {
  position: relative;
  overflow: hidden;
  background: var(--c-encre-2);
}

.work-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform calc(var(--dur-3) * 0.8) var(--ease);
}

.work-card:hover .work-card__img,
.work-card:focus-within .work-card__img {
  transform: scale(1.05);
}

.work-card__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 55%);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}

.work-card:hover .work-card__veil,
.work-card:focus-within .work-card__veil {
  opacity: 1;
}

/* Le compte de photographies était un aplat noir dans le coin de la vignette :
   une boîte de plus. SIXIÈME PASSE, 26-09-2026 — le compte reste, la boîte
   disparaît. Il se pose sur l'image, tenu par son ombre et par un voile radial
   qui n'a pas de bord. */
.work-card__badge {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 0.9rem 1rem;
  background: radial-gradient(130% 170% at 100% 0%, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0) 72%);
  color: rgba(255, 255, 255, 0.94);
  font-size: var(--t-label);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}

.work-card__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-top: 0.15rem;
}

.work-card__title {
  font-size: var(--t-display-3);
  line-height: 1.05;
  margin: 0;
}

.work-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}

.work-card__meta {
  display: flex;
  align-items: center;
  gap: 0.9em;
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

.work-card__meta i {
  display: block;
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.work-card__note {
  font-size: var(--t-small);
  color: var(--fg-muted);
  max-width: 40ch;
  margin: 0;
}

/* Le bandeau de filtre de la page Projets a été retiré le 26-09-2026 (§31) :
   sept boutons de territoire, leur étiquette et l'état vide `work-empty`. La
   grille des réalisations se suffit à elle-même. Les règles `.filter-bar`,
   `.filter-bar__label`, `.filter`, `.filter:hover`, `.filter[aria-pressed="true"]`
   et `.work-empty` sont parties avec, ainsi que l'attribut `data-tags` des treize
   cartes : plus rien ne masque une carte.

   `.work-card[hidden]` est conservée : elle ne sert plus, mais `.work-card` pose
   `display: grid`, qui l'emporterait sur le `hidden` du navigateur si l'attribut
   revenait un jour. Une garde de trois lignes vaut mieux qu'un piège. */

.work-card[hidden] {
  display: none;
}

/* ============================================================== ACCORDÉON FAQ */
.accordion {
  border-top: var(--hairline) solid var(--rule);
}

.accordion__item {
  border-bottom: var(--hairline) solid var(--rule);
}

.accordion__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
  padding-block: 1.4rem;
  font-family: var(--font-display);
  font-size: var(--t-display-4);
  transition: color var(--dur-1) var(--ease);
}

.accordion__btn:hover {
  color: var(--accent);
}

.accordion__sign {
  position: relative;
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
}

.accordion__sign::before,
.accordion__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur-2) var(--ease);
}

.accordion__sign::after {
  transform: rotate(90deg);
}

.accordion__btn[aria-expanded="true"] .accordion__sign::after {
  transform: rotate(0deg);
}

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-2) var(--ease);
}

.accordion__panel[data-open="true"] {
  grid-template-rows: 1fr;
}

.accordion__panel > div {
  overflow: hidden;
}

.accordion__panel p {
  color: var(--fg-muted);
  max-width: 62ch;
  padding-bottom: 1.5rem;
}

/* ==================================================================== CHIFFRES */
.stats {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.4rem + 4vw, 4.5rem);
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  display: block;
  margin-top: 0.7rem;
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  max-width: 22ch;
}

/* ============================================ ÉTAPES / DÉMARCHE — RETIRÉES
   `.steps` (la liste de l'accueil, après réécriture du 24-09-2026) et `.step`
   (l'ancienne liste de la page Services, qui n'avait plus de porteur) partent
   avec la section « La démarche », retirée le 29-09-2026 : `.steps` n'était
   portée que par elle, `.step` par personne. Voir README §40. */

/* ======================================================================= ÉQUIPE */
.team-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* Une seule personne dans la grille — la page À propos et l'accueil depuis le
   23-09-2026 : `auto-fit` étirerait sa carte sur toute la largeur de la
   coquille, et un portrait de 300 px de haut deviendrait une affiche. On lui
   rend la largeur qu'il avait dans une grille de trois (22 rem au plus), et
   la colonne reste à gauche, du côté où la lecture commence. */
.team-grid--single {
  grid-template-columns: minmax(15rem, 22rem);
}

.member {
  display: grid;
  gap: 1.1rem;
  align-content: start;
}

.member__frame {
  position: relative;
  overflow: hidden;
  background: var(--c-encre-2);
}

.member__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.55) contrast(1.03);
  transition: filter var(--dur-2) var(--ease), transform var(--dur-3) var(--ease);
}

.member:hover .member__frame img {
  filter: grayscale(0);
  transform: scale(1.04);
}

.member__name {
  font-size: var(--t-display-4);
  margin: 0;
}

.member__role {
  display: block;
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 0.35rem;
}

/* `.member__bio` (la phrase de biographie) a été retirée le 29-09-2026 avec
   « Formé en voyageant, il signe la conception de chaque projet. » L'espacement
   du bloc ne tenait pas à elle : `.member` est une grille, et c'est son `gap`
   qui sépare le nom des coordonnées. Voir README §38. */

.member__link {
  font-size: var(--t-small);
  color: var(--fg-faint);
  border-bottom: var(--hairline) solid var(--rule);
  padding-bottom: 0.15em;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}

.member__link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ============================== LES COORDONNÉES SOUS LE NOM (À PROPOS)
   Depuis le 23-09-2026, la page À propos porte les coordonnées de la maison,
   sous le portrait et le nom du fondateur — c'est là que mènent le bouton du
   menu et la bande de fin de page (`#contact`). La phrase de biographie qui
   s'intercalait jusque-là a été retirée le 29-09-2026 (README §38), sans que ce
   bloc bouge. La colonne ne fait que 22 rem : un cran de moins sur la taille des
   coordonnées, sinon le courriel déborde. La marge de défilement dégage
   l'en-tête, qui est fixe.
   ============================================================================ */
.member__contact {
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
  margin-top: 0.4rem;
}

.member__contact-title {
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.15rem;
}

.member__contact .contact-list {
  gap: 1.15rem;
}

.member__contact .contact-list__v {
  font-size: var(--t-body);
  line-height: 1.35;
}

/* ========================================================== NOTE DE RÉDACTION
   Bloc utilisé là où le contenu d'origine est absent : on l'annonce
   franchement plutôt que d'inventer un texte de projet.
   ============================================================================ */
.note-block {
  display: grid;
  gap: 0.9rem;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border: var(--hairline) dashed var(--rule-strong);
  max-width: 68ch;
}

.note-block__title {
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.note-block p {
  margin: 0;
  font-size: var(--t-small);
  color: var(--fg-muted);
}

/* Le bloc éditorial en deux colonnes (`.split-text`, `.split-text--offset`)
   a été retiré le 26-09-2026 : son seul usage était la section « Origine » de
   la page À propos (étiquette + titre + paragraphe à droite), fondue dans le
   chapeau de la page (§32). La grille `.grid` et `.col-*` de 02-layout couvre
   tous les autres cas. */

.drop-cap::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 4.2em;
  line-height: 0.78;
  padding: 0.06em 0.12em 0 0;
  color: var(--accent);
}

.pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.5rem, 1rem + 2.1vw, 2.6rem);
  line-height: 1.24;
  color: var(--fg);
  max-width: 30ch;
  margin: 0;
  padding-left: clamp(1rem, 2.5vw, 2.2rem);
  border-left: var(--hairline) solid var(--accent);
}

.pull-quote cite {
  display: block;
  margin-top: 1.2rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* ================================================================= FORMULAIRE */
.form {
  display: grid;
  gap: clamp(1.1rem, 2vw, 1.6rem);
}

.form__row {
  display: grid;
  gap: clamp(1.1rem, 2vw, 1.6rem);
}

@media (min-width: 700px) {
  .form__row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field {
  display: grid;
  gap: 0.5rem;
}

.field__label {
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.field__label .req {
  color: var(--accent);
  margin-left: 0.35em;
}

.field__control {
  width: 100%;
  padding: 0.95rem 1.05rem;
  background: transparent;
  border: var(--hairline) solid var(--rule-strong);
  color: var(--fg);
  font-size: var(--t-body);
  font-weight: 300;
  transition: border-color var(--dur-1) var(--ease);
}

.field__control::placeholder {
  color: var(--fg-faint);
}

.field__control:hover {
  border-color: var(--fg-faint);
}

.field__control:focus {
  outline: none;
  border-color: var(--accent);
}

select.field__control {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.35rem) calc(50% + 0.15rem),
    calc(100% - 1rem) calc(50% + 0.15rem);
  background-size: 0.38rem 0.38rem, 0.38rem 0.38rem;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
}

textarea.field__control {
  min-height: 9rem;
  resize: vertical;
}

.field--error .field__control {
  border-color: var(--c-laiton);
}

.field__error {
  font-size: var(--t-small);
  color: var(--accent);
}

.field__error:empty {
  display: none;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-size: var(--t-small);
  color: var(--fg-muted);
  cursor: pointer;
}

.checkbox input {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.32rem;
  accent-color: var(--c-laiton);
}

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 2rem;
}

.form__status {
  font-size: var(--t-small);
  color: var(--accent);
  margin: 0;
}

.form__status[hidden] {
  display: none;
}

/* ========================================================= COORDONNÉES (liste) */
.contact-list {
  display: grid;
  gap: 1.6rem;
}

.contact-list__item {
  display: grid;
  gap: 0.35rem;
}

.contact-list__k {
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.contact-list__v {
  font-family: var(--font-display);
  font-size: var(--t-display-4);
  line-height: 1.3;
}

.contact-list__v a {
  border-bottom: var(--hairline) solid var(--rule);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}

.contact-list__v a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.contact-list__sub {
  font-size: var(--t-small);
  color: var(--fg-muted);
}

/* =================================================== RAPPORTS D'IMAGE UTILITAIRES */
.ar-1-1 { aspect-ratio: 1 / 1; }
.ar-4-5 { aspect-ratio: 4 / 5; }
.ar-5-4 { aspect-ratio: 5 / 4; }
.ar-3-2 { aspect-ratio: 3 / 2; }
.ar-2-3 { aspect-ratio: 2 / 3; }
.ar-16-9 { aspect-ratio: 16 / 9; }
.ar-21-9 { aspect-ratio: 21 / 9; }

.ar-1-1 > img,
.ar-4-5 > img,
.ar-5-4 > img,
.ar-3-2 > img,
.ar-2-3 > img,
.ar-16-9 > img,
.ar-21-9 > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ================================================================= GALERIE PROJET
   Colonnes CSS : les photographies conservent leur cadrage naturel sans
   script de mise en page, et se réordonnent d'elles-mêmes au redimensionnement.
   ============================================================================== */
.gallery {
  columns: 3;
  column-gap: clamp(0.75rem, 1.6vw, 1.5rem);
}

@media (max-width: 900px) {
  .gallery { columns: 2; }
}

@media (max-width: 560px) {
  .gallery { columns: 1; }
}

.gallery__item {
  display: block;
  break-inside: avoid;
  margin-bottom: clamp(0.75rem, 1.6vw, 1.5rem);
  position: relative;
  overflow: hidden;
  background: var(--c-encre-2);
  cursor: zoom-in;
}

.gallery__item img {
  width: 100%;
  display: block;
  transition: transform var(--dur-3) var(--ease), opacity var(--dur-2) var(--ease);
}

.gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}

.gallery__item:hover img,
.gallery__item:focus-visible img {
  transform: scale(1.035);
}

.gallery__item:hover::after,
.gallery__item:focus-visible::after {
  opacity: 1;
}

/* Le mot « Agrandir » se posait en bas à gauche de chaque photographie de
   galerie. Il a été retiré le 26-09-2026 : c'était un carré de plus, et il ne
   disait rien que la main ne comprenne — toute la vignette est le lien, le
   curseur est un zoom, et le survol assombrit l'image. */

/* ==================================================================== VISIONNEUSE */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(0, 0, 0, 0.97);
  color: var(--c-blanc);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
}

.lightbox[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-2) var(--ease), visibility 0s;
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem clamp(1rem, 3vw, 2.5rem);
  border-bottom: var(--hairline) solid rgba(255, 255, 255, 0.16);
}

.lightbox__meta {
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* Les deux flèches de la visionneuse étaient des carrés de 2,9 rem, bordés.
   SIXIÈME PASSE, 26-09-2026 : les boîtes tombent, les flèches restent — et
   grandissent, puisque c'est désormais tout ce qu'il y a à voir. La prise
   tactile ne bouge pas : 2,75 rem de côté, au-dessus des 24 px que le site
   s'impose (voir 04-immersive, « cibles tactiles »). */
.lightbox__close,
.lightbox__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 0;
  border: 0;
  color: rgba(255, 255, 255, 0.84);
  transition: color var(--dur-1) var(--ease);
}

.lightbox__close:hover,
.lightbox__nav:hover,
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  color: var(--c-laiton);
}

/* La flèche est un signe, pas un libellé : elle se passe de capitales et
   d'interlettrage, et prend la taille qui la rend lisible. */
.lightbox__nav {
  font-size: 1.4rem;
  letter-spacing: 0;
  text-transform: none;
}

.lightbox__close {
  padding-inline: 0.2rem;
}

.lightbox__stage {
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  min-height: 0;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease);
}

.lightbox__img.is-ready {
  opacity: 1;
}

.lightbox__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.1rem clamp(1rem, 3vw, 2.5rem);
  border-top: var(--hairline) solid rgba(255, 255, 255, 0.16);
}

.lightbox__thumb {
  font-size: var(--t-small);
  color: rgba(255, 255, 255, 0.6);
  padding: 0.5rem 0.8rem;
  border: var(--hairline) solid transparent;
}

.lightbox__thumb[aria-current="true"] {
  color: var(--c-blanc);
  border-color: rgba(255, 255, 255, 0.4);
}

.lightbox__navs {
  display: flex;
  gap: 1.4rem;
  margin-left: auto;
}

/* ========================================================== PAGINATION PROJET */
.pager {
  display: grid;
  gap: clamp(1rem, 2vw, 2rem);
  border-top: var(--hairline) solid var(--rule);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 760px) {
  .pager {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pager__link {
  display: grid;
  gap: 0.5rem;
  padding-block: 0.4rem;
  transition: color var(--dur-1) var(--ease);
}

.pager__link--next {
  text-align: right;
}

@media (min-width: 760px) {
  .pager__link--next {
    border-left: var(--hairline) solid var(--rule);
    padding-left: clamp(1rem, 2vw, 2rem);
  }
}

.pager__link:hover {
  color: var(--accent);
}

.pager__k {
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.pager__v {
  font-family: var(--font-display);
  font-size: var(--t-display-3);
  line-height: 1.06;
}

/* ================================================================ HÉROS PROJET */
.proj-hero {
  position: relative;
  min-height: clamp(26rem, 62vh, 46rem);
  display: grid;
  align-content: end;
  overflow: hidden;
  background: var(--c-noir);
  color: var(--c-blanc);
  isolation: isolate;
}

.proj-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.proj-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.proj-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.4) 48%,
    rgba(0, 0, 0, 0.42) 100%
  );
}

.proj-hero__inner {
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  padding-top: calc(var(--header-h) + 5rem);
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.proj-hero__title {
  font-size: var(--t-display-2);
  margin: 0;
  max-width: 24ch;
}

.proj-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.6rem;
  align-items: center;
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}

.proj-hero__meta i {
  display: block;
  width: 2.2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

/* ============================================== RANGÉE MÉDIA / TEXTE ALTERNÉE */
.media-row {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: center;
}

@media (min-width: 880px) {
  .media-row {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  .media-row--flip .media-row__media {
    order: 2;
  }
}

.media-row__body {
  display: grid;
  gap: 1.1rem;
  align-content: center;
}

.media-row__title {
  font-size: var(--t-display-3);
  margin: 0;
}

/* Le bandeau d'appel (`.cta-band`, et avec lui `.cta-band__inner`,
   `.cta-band__title`, `.cta-band__actions` et `.cta-band .label`) a été retiré
   le 29-09-2026 avec son balisage : la section `src\partials\cta.html` fermait
   les quinze fiches sur un second appel — « Suite · Prendre contact », puis le
   bouton de l'en-tête répété et les coordonnées déjà écrites au pied de page.
   Sept règles s'en vont d'un bloc, dont son aplat `--c-encre` et son
   `--c-laiton-clair` de titre. Voir README §42.

   `.link-quiet` reste dans cette feuille : plus aucune page ne l'appelle depuis
   ce retrait (le téléphone et le courriel du bandeau étaient ses deux seuls
   usages), mais c'est une manière générique de poser un lien sans cadre, et
   trois feuilles la nomment encore — 04-immersive (deux listes de groupes) et
   05-brand (une liste de familles typographiques). Elle est gardée en réserve,
   comme `--c-releve` au §29.6, plutôt que retirée de quatre endroits pour rien. */

/* ============================================================== BANDEAU DÉFILÉ */
.marquee {
  overflow: hidden;
  border-top: var(--hairline) solid var(--rule);
  border-bottom: var(--hairline) solid var(--rule);
  padding-block: clamp(0.9rem, 1.8vw, 1.5rem);
  user-select: none;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 46s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-right: clamp(1.5rem, 3vw, 3rem);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.7rem);
  color: var(--fg-muted);
  white-space: nowrap;
}

.marquee__item::after {
  content: "";
  width: 0.34rem;
  height: 0.34rem;
  background: var(--accent);
  transform: rotate(45deg);
  flex: none;
}

@keyframes marqueeScroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
    flex-wrap: wrap;
  }
  .marquee {
    overflow: visible;
  }
}

/* ============================================================= LISTE-SOMMAIRE */
.index-list {
  border-top: var(--hairline) solid var(--rule);
}

.index-list__row {
  display: grid;
  gap: 0.4rem 1.5rem;
  align-items: baseline;
  padding-block: clamp(0.9rem, 1.8vw, 1.35rem);
  border-bottom: var(--hairline) solid var(--rule);
  transition: color var(--dur-1) var(--ease), padding-left var(--dur-1) var(--ease);
}

@media (min-width: 700px) {
  .index-list__row {
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  }
}

.index-list__row:hover,
.index-list__row:focus-visible {
  color: var(--accent);
  padding-left: 0.5rem;
}

.index-list__idx {
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.index-list__name {
  font-family: var(--font-display);
  font-size: var(--t-display-4);
  line-height: 1.2;
}

.index-list__meta {
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

/* ================================================================= UTILITAIRES */
.u-text-center { text-align: center; }
.u-text-right { text-align: right; }
.u-mx-auto { margin-inline: auto; }
.u-mt-1 { margin-top: var(--sp-4); }
.u-mt-2 { margin-top: var(--sp-6); }
.u-mt-3 { margin-top: var(--sp-8); }
.u-mt-4 { margin-top: clamp(2.5rem, 5vw, 5rem); }
.u-stack {
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
}
.u-stack--sm { gap: clamp(0.75rem, 1.4vw, 1.25rem); }
.u-stack--lg { gap: clamp(2rem, 4vw, 4rem); }
.u-max-40 { max-width: 40ch; }
.u-max-52 { max-width: 52ch; }
.u-full { width: 100%; }

/* `.u-flex-between` a été retirée le 29-09-2026 : son dernier usage était la
   ligne « Équipe —— Sur le chantier » / « Voir les réalisations » de la page
   À propos, retirée elle aussi. Voir README §38. */

.u-underlined {
  border-bottom: var(--hairline) solid var(--accent);
  padding-bottom: 0.1em;
  transition: opacity var(--dur-1) var(--ease);
}

.u-underlined:hover {
  opacity: 0.62;
}

@media print {
  .site-header,
  .nav-overlay,
  .scroll-progress,
  .lightbox,
  .marquee {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}