/* ==========================================================================
   DELORDINAIRE — V5
   Design system « journal papier » — d'après maquette client DLO_260710

   TYPOGRAPHIE — 2 familles de contenu (règle « two families max ») :
     • --serif : EB Garamond   → titres (italique) + corps (romain)  [graisse 400]
     • --mono  : Courier Prime  → métadonnées, légendes, listes datées [400 / 700]
   Une SEULE taille de texte (--fs) ; la hiérarchie se joue sur la GRAISSE.
     • --sans  : linéale du système → réservée au seul « FR  EN » de l'en-tête,
       comme sur la maquette du graphiste (BB, octobre 2026)
   Chargement des polices : fonts/fonts.css, servi en local sur chaque page,
   ne déclare que les variantes réellement utilisées.
   ========================================================================== */

:root {
  --paper:  #FAF7EC;
  --ink:    #141414;
  --ink-mid: rgba(20, 20, 20, 0.55); /* gris français — survol de navigation */
  --ink-light: rgba(20, 20, 20, 0.35); /* gris clair — langue non affichée (maquette BB) */
  --hairline: 1px solid var(--ink);
  --margin: 20px;            /* marge du cadre journal */
  --serif: 'EB Garamond', 'Garamond', 'Times New Roman', serif;
  --mono: 'Courier Prime', 'Courier New', Courier, monospace;
  --sans: system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* ---- Corps unique ----------------------------------------------------
     Demande client (oct. 2026) : une seule taille de texte sur tout le site,
     calée sur la fiche projet (#MJN_MAISON JARDIN, Courier Prime 13,5 px).
     La hiérarchie ne se joue plus que sur la graisse (titres en 600/700).
     Seul le cartouche-logo garde sa taille propre.
     --------------------------------------------------------------------- */
  --fs: 13.5px;

  /* ---- Rythme vertical (module de 10px) -------------------------------
     Un seul barème pour tout le site : filets, en-tête, contenus, pied.
     --------------------------------------------------------------------- */
  --sp-xs: 10px;
  --sp-s:  20px;
  --sp-m:  30px;
  --sp-l:  40px;
  --sp-xl: 60px;

  /* Gabarit d'en-tête — maquette du graphiste (BB, octobre 2026), identique
     sur toutes les pages. Sous le filet haut, trois niveaux de même hauteur :
     le logo (niveau 1), la navigation (niveau 2) et les langues (niveau 3),
     chacun posé en bas de son niveau. Le filet principal, rideau sous lequel
     défile la page Projets, tombe 8 px sous le troisième niveau.
     Mesures relevées sur la maquette, capture d'un écran de 1512 px de large. */
  --frame:     var(--sp-xs);  /* retrait des filets haut/bas */
  --hd-level:  61px;          /* hauteur d'un niveau */
  --hd-foot:   8px;           /* bas du 3e niveau → filet principal */
  --hd-gutter: 28px;          /* = gouttière de la gazette : l'en-tête s'aligne sur le bord des images */
  /* hauteur totale du bloc en-tête, du haut du document au bas du filet
     principal (filet haut et filet principal compris) : 203px */
  --header-h: calc(var(--frame) + 1px + 3 * var(--hd-level) + var(--hd-foot) + 1px);
  /* Ancien accueil (diaporama, section « Accueil » plus bas) : n'est plus
     utilisé, gardé avec son code pour le futur carrousel. */
  --header-pad: var(--sp-s);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { height: 100%; }

/* Lenis smooth scroll */
html.lenis:not(.home), html.lenis body:not(.home) {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}


body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--fs);
  line-height: 1.35;
  min-height: 100%;
  position: relative; /* ancre les filets absolus (.rule-top/.rule-bottom) sur le document */
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; } /* height:auto : ne pas figer la hauteur des attributs width/height */
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--paper); }

/* ==========================================================================
   Transition de page — fondu simple, comme sur delordinaire.com

   Entrée en fondu doux sur place (fadeIn), sans déplacement vertical ni flou.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  body { animation: pt-fade-in 350ms ease backwards; }

  @keyframes pt-fade-in { from { opacity: 0; } }

  html.pt-leaving.lenis-stopped { overflow: visible; }

  .pt-leaving body {
    opacity: 0;
    transition: opacity 150ms ease-out;
    animation: none;
    pointer-events: none;
  }
}

/* ==========================================================================
   Cadre journal : filets haut et bas
   ========================================================================== */

.rule-top, .rule-bottom {
  position: absolute; /* en bas du document : ne barre pas le texte au défilement */
  left: var(--margin);
  right: var(--margin);
  border-top: var(--hairline);
  z-index: 40;
  pointer-events: none;
}
.rule-top { top: var(--frame); }
.rule-bottom { bottom: var(--frame); }
.home .rule-bottom { position: fixed; } /* accueil plein écran : cadre fixe */

/* Pliure centrale (trait vertical)
   Elle divise la zone de contenu, jamais l'en-tête : elle démarre au filet
   principal (--header-h) et descend jusqu'au filet bas. Ancrée au document
   comme .rule-top/.rule-bottom, pour rester continue au défilement.
   Le repère venant du barème, toute page nouvelle est cadrée d'office. */
.fold {
  position: absolute;
  top: var(--header-h);
  bottom: var(--frame);
  left: 50%;
  border-left: var(--hairline);
  z-index: 1;
  pointer-events: none;
}

/* Accueil : pas de filet sous l'en-tête, la pliure part du cadre haut */
.home .fold {
  position: fixed;
  top: var(--frame);
}

/* ==========================================================================
   En-tête commun — maquette du graphiste (BB, octobre 2026)

   Trois niveaux de même hauteur sous le filet haut, deux moitiés de part et
   d'autre de la pliure :
     • niveau 1, moitié droite : le logo ;
     • niveau 2, moitié gauche : la navigation, sur une ligne ;
     • niveau 3, moitié droite : « FR  EN ».
   Chaque moitié commence au bord des images de la gazette (cadre + 28 px de
   gouttière) : la navigation s'aligne sur la 1re colonne de projets, le logo
   et les langues sur la 3e — les « alignements » tracés sur la maquette.
   Chaque élément est posé en bas de son niveau : sa ligne de base tombe 3,5
   à 5 px au-dessus du trait du niveau, comme sur la maquette.
   ========================================================================== */

.site-header {
  /* Dans le flux : défile avec la page, comme aunt.studio (sauf la page
     Projets, figée plus bas). Hauteur fixe : le filet principal tombe au même
     endroit sur toutes les pages. Le retrait du cadre est pris en padding (et
     non en marge) : une marge haute serait fusionnée avec celle du body et
     décalerait le filet haut. */
  position: relative;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, var(--hd-level));
  align-items: end;
  height: calc(var(--header-h) - 1px); /* jusqu'au filet principal, exclu */
  padding: calc(var(--frame) + 1px) var(--margin) 0;
  pointer-events: none;
}
.site-header a,
.site-header button { pointer-events: auto; }

.site-header .logo,
.site-header .main-nav,
.site-header .header-index,
.site-header .lang-switch {
  justify-self: start;
  margin-left: var(--hd-gutter);
  line-height: 1;
}
/* Retraits bas : calés sur la maquette, ligne de base par ligne de base */
.site-header .logo         { grid-area: 1 / 2; margin-bottom: 5px; }
.site-header .main-nav     { grid-area: 2 / 1; margin-bottom: 1.5px; }
.site-header .header-index { grid-area: 3 / 1; margin-bottom: 3px; }
.site-header .lang-switch  { grid-area: 3 / 2; margin-bottom: 3px; }

/* Accueil (ancien diaporama, plus utilisé) : l'en-tête se superposait aux images */
.home .site-header {
  position: absolute;
  top: var(--frame);
  left: var(--margin);
  right: var(--margin);
  margin: 0;
  padding-top: var(--header-pad); /* le retrait du cadre vient déjà de `top` */
}

/* Logo officiel du studio : fichier PNG haute définition fourni par le
   graphiste (typographie Baldoni retouchée, i sans point), détouré en
   encre #141414 sur fond transparent. Largeur 150 px sur grand écran
   (hauteur 22,5 px), calé sur la maquette BB copie. */
.logo {
  display: inline-block;
  line-height: 1;
}
.logo-img {
  display: block;
  width: 150px;
  height: auto;
}

/* Navigation : une ligne en EB Garamond 15 px (lisibilité et présence équilibrée
   face au logo), 42 px entre les intitulés.
   Deux signaux distincts, jamais confondus :
     • page affichée -> barrée, à l'encre pleine (« vous êtes ici ») ;
     • survol        -> gris français, sans barre (« c'est cliquable »).
   Sur le lien de la page affichée, le survol grise la barre : les deux
   états se cumulent sans se ressembler. */
.main-nav { display: flex; gap: 42px; font-size: 16px; } /* 16 / 15 : menu un cran au-dessus de « Index des projets » (retour Adrian 03/11) */
.main-nav a {
  white-space: nowrap;
  transition: color 0.15s ease;
}
.main-nav a[aria-current="page"] { text-decoration: line-through; }
.main-nav a:hover { color: var(--ink-mid); }

/* Lien Index des projets — 3e niveau de l'en-tête, aligné avec FR / EN.
   Gris discret au repos (var(--ink-mid)), passage à l'encre au survol. */
.header-index {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink-mid);
  white-space: nowrap;
  transition: color 0.15s ease;
}
.header-index:hover { color: var(--ink); }
.header-index[aria-current="page"] { color: var(--ink); text-decoration: line-through; }

/* --------------------------------------------------------------------------
   Bascule de langue (js/lang.js) — « FR  EN », toujours visibles, en linéale
   comme sur la maquette : la langue affichée à l'encre, l'autre en gris
   clair. La couleur suit l'attribut lang de <html>, posé avant le premier
   rendu : aucun clignotement au chargement d'une page en anglais.
   -------------------------------------------------------------------------- */
html:not([lang="en"]) .i18n-en,
html[lang="en"] .i18n-fr { display: none !important; }

.lang-switch { display: flex; gap: 11px; }
.lang-switch button {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1;
  color: var(--ink-light);
  cursor: pointer;
  transition: color 0.15s ease;
}
.lang-switch button:hover { color: var(--ink); }
html:not([lang="en"]) .lang-switch button[lang="fr"],
html[lang="en"] .lang-switch button[lang="en"] { color: var(--ink); cursor: default; }

/* Flèche retour (pages projet) — suit le défilement. Au niveau 1, à gauche :
   le bas de la flèche sur la ligne de base du logo (padding 8 + marge 7 +
   flèche 12 = 27 px sous le haut du lien, 6 px au-dessus du trait du niveau). */
.back-arrow {
  position: fixed;
  top: calc(var(--frame) + 1px + var(--hd-level) - 33px);
  left: var(--margin);
  display: block;
  line-height: 0;
  padding: 8px 12px 8px 0;
  z-index: 100;
  color: var(--ink);
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.back-arrow:hover { opacity: 0.45; }
/* Même dessin que le « < » d'origine (Courier Prime 26 px : ~12 px de côté,
   ouverture ~50°), mais tracé au filet (1px), l'épaisseur des filets de
   rubrique. Marges verticales : même place que l'ancien glyphe dans sa ligne. */
.back-arrow svg {
  display: block;
  width: 12px;
  height: 12px;
  margin: 7px 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* Filet principal sous l'en-tête : l'en-tête a une hauteur fixe, le filet le
   suit directement. */
.header-rule {
  margin: 0 var(--margin);
  border-top: var(--hairline);
}

/* --------------------------------------------------------------------------
   En-tête figé — page Projets (l'accueil)

   Toute la zone d'en-tête (filet haut, logo, nav, langues et filet
   principal) est collée au viewport. Le bandeau porte un aplat opaque
   --paper de la hauteur exacte de --header-h : la gazette défile derrière et
   se masque net au filet, sans transparence ni chevauchement.

   Empilement : contenu et pliure < bandeau 60 < filet principal 61
   < filet haut 63.
   -------------------------------------------------------------------------- */

.projets-page .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h); /* +1px : l'aplat va jusque sous le filet, aucun liseré ne peut apparaître */
  background: var(--paper);
  z-index: 60;
  pointer-events: auto; /* le bandeau masque : pas de clic sur le contenu caché */
}

.projets-page .rule-top {
  position: fixed;
  z-index: 63;
}

.projets-page .header-rule {
  position: fixed;
  top: calc(var(--header-h) - 1px); /* valeur entière : filet net, sans flou */
  left: var(--margin);
  right: var(--margin);
  margin: 0;
  z-index: 61;
}

/* L'en-tête étant hors flux, le contenu réserve sa hauteur */
.projets-page .page {
  padding-top: calc(var(--header-h) + var(--sp-l));
  min-height: 100svh;
}

/* ==========================================================================
   Accueil — diaporama plein écran
   PLUS UTILISÉ depuis le 29/10/2026 : la page Projets est devenue l'accueil
   (index.html). Code gardé, avec js/slideshow.js, pour le futur carrousel.
   ========================================================================== */

.home { overflow: hidden; height: 100svh; cursor: pointer; }

.slideshow {
  position: absolute;
  inset: var(--frame) var(--margin);
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  display: grid;
  /* 4 colonnes plutôt que 2 : les colonnes 3-4 recouvrent exactement la moitié
     droite d'avant (même largeur, même bord gauche), et une slide à deux
     images peut la partager sans qu'aucune ne repasse à gauche. */
  grid-template-columns: repeat(4, 1fr);
  column-gap: 40px;
  opacity: 0;
  transition: opacity 0.65s ease;
  pointer-events: none;
}
.slide.is-active { opacity: 1; }

.slide .ph {
  display: flex;
  justify-content: center;
  padding: 76px 40px 60px; /* dégage le masthead compact (haut) et la légende (bas) */
  min-width: 0;
}

/* Composition éditoriale : toutes les images occupent la moitié droite.
   Les classes .left / .right posées par le JS ne déplacent plus rien —
   la donnée reste inchangée, seule la mise en page est contrainte. */
.slide .ph,
.slide .ph.left,
.slide .ph.right {
  grid-column: 3 / 5;
  grid-row: 1;
}

/* Filet de sécurité : le diaporama ne présente plus qu'une photo à la fois
   (plus aucun `img2` dans SLIDES). Si une slide double réapparaissait, les
   deux images se partageraient la moitié droite au lieu de se superposer. */
@media (min-width: 721px) {
  .slide:has(.ph.second) .ph        { grid-column: 3; padding-right: 20px; }
  .slide:has(.ph.second) .ph.second { grid-column: 4; padding-left: 20px; }
}

.slide .ph.align-start  { align-items: flex-start; }
.slide .ph.align-center { align-items: center; }
.slide .ph.align-end    { align-items: flex-end; }

.slide .ph img {
  object-fit: cover;
  width: auto;
  height: auto;
}
/* Tailles variables, comme aunt.studio : l'image domine la colonne.
   Largeurs plafonnées à min(100%, …) : jamais plus large que la colonne
   -> aucune image ne franchit la pliure ni n'empiète sur la nav. */
/* Portrait : ratio 4:5 imposé, pleine hauteur tant que la colonne le permet */
.slide .ph.size-tall img {
  aspect-ratio: 4 / 5;
  width: min(100%, (100svh - 156px) * 4 / 5);
  height: auto;
  object-fit: cover;
  align-self: center; /* centrée verticalement dans la bande */
}
/* Paysage : ratio 4:3 imposé, agrandi, centré verticalement */
.slide .ph.size-wide img {
  aspect-ratio: 4 / 3;
  width: min(100%, (100svh - 156px) * 4 / 3);
  height: auto;
  object-fit: cover;
  align-self: center;
}
.slide .ph.size-medium img {
  aspect-ratio: 4 / 3;
  width: min(86%, (100svh - 156px) * 4 / 3);
  height: auto;
  object-fit: cover;
  align-self: center;
}

/* Pied de page accueil + pages projet : compteur + légende empilée (style aunt.studio) */
.home-footer, .projet-footer {
  position: fixed;
  bottom: 24px;
  left: var(--margin);
  right: var(--margin);
  display: flex;
  align-items: flex-end;
  gap: 90px;
  font-family: var(--mono);
  font-size: var(--fs);
  letter-spacing: 0.04em;
  z-index: 30;
  pointer-events: none;
}
.home-footer .counter, .projet-footer .counter { min-width: 90px; }
.home-footer .caption, .projet-footer .caption { display: flex; flex-direction: column; gap: 2px; }
/* Accueil : légende sur une seule ligne — « Nom — Type — Année » */
.home-footer .caption { flex-direction: row; flex-wrap: wrap; gap: 0; }
.home-footer .caption span + span::before { content: "—"; margin: 0 0.4em; }
/* Sur les pages projet, le pied reste sur la moitié gauche (colonne photos) */
.projet-footer { right: calc(50% + 20px); }

/* ==========================================================================
   Pages intérieures — gabarit générique
   ========================================================================== */

/* Rythme : le contenu démarre à --sp-l sous le filet principal et s'arrête
   à --sp-xl au-dessus du filet bas (dont le retrait --frame est ajouté). */
.page {
  padding: var(--sp-l) var(--margin) calc(var(--sp-xl) + var(--frame));
  min-height: calc(100svh - var(--header-h));
}

/* Deux moitiés de part et d'autre de la pliure */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
}
.split > .half { min-width: 0; }

/* Bloc texte machine à écrire */
.typewriter {
  font-family: var(--mono);
  font-size: var(--fs);
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.typewriter p { margin-bottom: 1.4em; }
.typewriter h1, .typewriter h2 {
  font-size: var(--fs);
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: 1.4em;
}

/* ==========================================================================
   Agence & Pages éditoriales (EB Garamond)
   ========================================================================== */

.agence-photo { padding: 0; } /* la photo occupe toute la moitié gauche, jusqu'à la pliure */
.agence-photo img { width: 100%; display: block; }
.agence-text {
  max-width: 470px;
  padding-top: 4px;
  font-family: var(--serif);
  color: var(--ink);
}
.agence-text h1 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 1.8em;
  line-height: 1.25;
}
.agence-text h2 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
  margin-top: 2em;
  margin-bottom: 0.8em;
  line-height: 1.25;
}
.agence-text h2:first-child {
  margin-top: 0;
}
.agence-text .associes-names {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  text-transform: none;
  margin-bottom: 1.6em;
}
.agence-text p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
  text-align: justify;
  hyphens: auto;
  margin-bottom: 1.4em;
}
.agence-text .distinctions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink);
}
.agence-text .distinctions-list li {
  margin-bottom: 1em;
}
.agence-text .distinctions-list strong {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  margin-right: 6px;
  color: var(--ink);
}
.agence-text a {
  color: inherit;
  text-decoration: underline;
  transition: opacity 0.2s ease;
}
.agence-text a:hover {
  opacity: 0.5;
}

/* Bloc « Les associés » — filet séparateur pleine largeur de page */
.agence-rule { margin: var(--sp-xl) 0 0; border-top: var(--hairline); }

/* Agence : une seule grande photo (même taille que l'ancienne photo de
   l'atelier : toute la moitié gauche), et tous les textes regroupés dans un
   seul cadre à droite (retour Adrian, 4 nov. 2026). Pas d'effet au défilement. */
.agence-split { align-items: start; }
/* Les associés suivent le texte Agence dans le même cadre */
.agence-text .associes { padding-top: var(--sp-l); }

.associes, .distinctions { padding-top: var(--sp-l); }
.associes-head, .distinctions-head { grid-column: 2; } /* titre dans la moitié droite, sans div vide */

.associe { align-items: start; margin-top: 26px; }
.associe + .associe { margin-top: 46px; }

/* Petit portrait : indentation propre (la grande photo philosophie est
   pleine colonne), ratio 3:4 verrouillé (rangées homogènes) */
.associe-photo { padding: 0 60px 0 160px; }
.associe-photo img {
  max-width: 200px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.associe-text { max-width: 470px; padding-top: 4px; }
.associe-text h3 {
  font-size: var(--fs);
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: 0; /* le rôle colle au nom ; l'espacement vient de .typewriter p */
}

/* Bloc « Distinctions » — liste typographique, écho de .presse-list */
.distinctions-list { list-style: none; line-height: 1.55; }
.distinctions-list li { margin-bottom: 1.55em; }

/* ==========================================================================
   Page Contact
   ========================================================================== */

.contact-photo {
  padding: 0;
}
.contact-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.5s ease;
}
.contact-photo img:hover {
  filter: grayscale(0%);
}

.contact-stage {
  max-width: 460px;
  padding-top: 4px;
  font-family: var(--serif);
}
.contact-stage h1 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  margin-bottom: 2em;
}
.contact-list {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 2.2;
  color: var(--ink);
}
.contact-list .c-line {
  margin-bottom: 0.8em;
}
.contact-list .c-label {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-mid);
}
.contact-list a {
  transition: opacity 0.15s ease;
}
.contact-list a:hover {
  text-decoration: underline;
  opacity: 0.6;
}



/* ==========================================================================
   Notre métier
   ========================================================================== */

.metier-bloc { padding-top: var(--sp-l); }

/* « La une » — photo bandeau pleine largeur sous l'en-tête, recadrée en bande */
.metier-une img {
  width: 100%;
  height: min(52svh, 560px);
  object-fit: cover;
}

/* Titre de page sous le bandeau */
.metier-titre { padding-top: var(--sp-l); }

/* Domaines d'intervention — liste sérif filetée (écho de l'index) */
.domaines-list { list-style: none; margin-top: 6px; }
.domaines-list li {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs);
  padding: 12px 4px;
  border-bottom: var(--hairline);
}
.domaines-list li:first-child { border-top: var(--hairline); }

/* Processus — étapes numérotées (numéro mono hérité du .typewriter) */
.processus-step {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 20px;
  margin-top: 30px;
}

/* Colonne gauche — miroir de .agence-text */
.metier-col { max-width: 470px; padding-top: 4px; }

/* Titres d'étape et de question : sérif italique, comme les titres de la gazette */
.processus-step h3, .faq-item h3 {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs);
  font-weight: 400;
  margin-bottom: 10px;
}

.faq-item { margin-top: 30px; }

/* ==========================================================================
   Presse — liens à gauche, couverture à droite (au survol)
   ========================================================================== */

.presse-page .split {
  align-items: center;
  min-height: calc(100svh - var(--header-h) - 100px);
}

.presse-col-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 0;
  width: 100%;
}

.presse-col-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.presse-list {
  list-style: none;
  width: 100%;
  max-width: 540px;
  padding: 0;
  margin: 0;
}

/* Aucun filet, aucun fond, aucun cadre : la hiérarchie ne tient qu'au texte.
   Le rythme vient de l'interligne, calé sur le barème (--sp-s entre lignes). */
.presse-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: var(--sp-xs) 0;
  color: var(--ink);
  transition: color 0.15s ease;
  cursor: pointer;
}

.presse-item .ttl {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.presse-item a.ttl {
  color: inherit;
}

.presse-item .date {
  font-family: var(--mono);
  font-size: var(--fs);
  color: inherit;
  white-space: nowrap;
  text-align: right;
}

/* Survol et parution active : gris moyen, comme la navigation */
.presse-item:hover,
.presse-item.is-active {
  color: var(--ink-mid);
}

/* Liens bruts : « SOURCE DATE : url », en machine à écrire, sans ornement */
.presse-page .split:has(.presse-raw) { align-items: stretch; }
.presse-col-left:has(.presse-raw) { justify-content: flex-start; }
/* Liste longue : la couverture reste collée (sticky) à l'écran pendant le défilement */
.presse-page .presse-col-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
@media (min-width: 721px) {
  /* Scène toujours centrée dans la partie visible de l'écran.
     --pc-top = bas de l'en-tête à l'écran (js/main.js) : il diminue quand
     l'en-tête défile, la scène suit. La taille des couvertures, elle, est
     fixe : calée sur la place disponible sous l'en-tête, sans zoom. */
  .presse-page {
    --pc-top: var(--header-h);
    --pc-zone: calc(100svh - var(--pc-top) - 2 * var(--sp-l));
    --pc-h: calc(100svh - var(--header-h) - 2 * var(--sp-l) - 4.5em); /* place de la légende */
  }
  .presse-page .presse-col-right .presse-stack {
    position: sticky;
    top: calc(var(--pc-top) + var(--sp-l));
    height: var(--pc-zone);
    max-width: 600px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .presse-page .presse-cover {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .presse-page .presse-cover .pc-frame.ratio-portrait,
  .presse-page .presse-cover .pc-frame.ratio-landscape,
  .presse-page .presse-cover .pc-frame.ratio-wide,
  .presse-page .presse-cover .pc-frame.ratio-page {
    width: min(340px, 100%, var(--pc-h) * 3 / 4);
    aspect-ratio: 3 / 4;
  }
}

.presse-raw {
  list-style: none;
  margin: 0;
  padding: var(--sp-m) var(--sp-l) calc(var(--pc-zone, 0px) * 0.4) 110px;
  /* Garamond, comme le reste du site (retour Adrian 03/11) : la source
     (en gras) et le lien ne se distinguent que par la graisse. */
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.presse-raw li { overflow-wrap: anywhere; margin-bottom: 1.1em; }
.presse-raw strong { font-weight: 400; } /* pas de gras : la source et le lien sont au même poids */
.presse-raw a { color: inherit; text-decoration: none; transition: color 0.15s ease; }
.presse-raw a:hover,
.presse-raw li.is-active a { color: var(--ink-mid); }

/* Scène (moitié droite) — couverture centrée verticalement et horizontalement */
.presse-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 100%;
}

.presse-page .presse-col-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
}

.presse-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}

.presse-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  opacity: 1;
}
.presse-cover.is-on {
  opacity: 1;
}

.presse-cover .pc-frame {
  position: relative;
  width: min(340px, 100%);
  aspect-ratio: 3 / 4;
  background: var(--paper);
  overflow: hidden;
  border: none;
  box-shadow: 0 0 0 1px rgba(20, 20, 20, 0.12); /* Filet d'encadrement net pour le bâtiment et la couverture */
  margin: 0 auto;
}
.presse-cover .pc-frame.ratio-portrait,
.presse-cover .pc-frame.ratio-landscape,
.presse-cover .pc-frame.ratio-wide,
.presse-cover .pc-frame.ratio-page {
  aspect-ratio: 3 / 4;
  width: min(340px, 100%);
  box-shadow: 0 0 0 1px rgba(20, 20, 20, 0.12);
}

.presse-cover .pc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: -webkit-optimize-contrast;
  filter: grayscale(100%) contrast(106%);
  transform: none;
}
.presse-cover.is-on .pc-img {
  filter: grayscale(100%) contrast(106%);
  transform: none;
}

.pc-caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-mid);
  letter-spacing: 0.01em;
  text-align: center;
  width: 100%;
  max-width: 440px;
  margin: 10px auto 0;
}

/* ==========================================================================
   Projets — grille journal
   ========================================================================== */

.gazette {
  --gz-cols: 4; /* lu par js/gazette.js */
  column-count: 4;
  column-gap: 0;
  padding-top: var(--sp-l);
}

/* Version équilibrée (js/gazette.js) : les projets sont répartis, dans
   l'ordre, en colonnes de hauteur égale ; sans JS, les colonnes CSS restent. */
.gazette.is-balanced { column-count: auto; display: flex; align-items: flex-start; }
.gz-col { flex: 1 1 0; min-width: 0; }

.gz-item {
  break-inside: avoid;
  display: block;
  padding: 0 28px 34px;
  margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   Survol des vignettes — retour de couleur MESURÉ, pas total.

   La saturation moyenne des 14 photos va de 0,04 (Fil de fer, quasi
   monochrome) à 0,48 (Rouchon, très chaude) : un retour à grayscale(0)
   faisait exploser les unes en couleur pendant que les autres ne bougeaient
   pas. On ne rend donc que 45 % de la couleur (grayscale 55 %), ce qui divise
   par deux l'écart absolu entre les photos, et on ajoute un gain de contraste
   identique pour toutes : chaque vignette réagit de la même façon, quelle que
   soit sa palette d'origine.
   Les fonctions sont listées dans le même ordre des deux côtés, pour que la
   transition interpole au lieu de sauter.
   -------------------------------------------------------------------------- */
.gz-item .gz-img { position: relative; margin-bottom: 14px; }
.gz-item .gz-img img {
  width: 100%;
  filter: grayscale(100%) saturate(1) contrast(1);
  transition: filter 0.3s ease;
}
.gz-item:hover .gz-img img { filter: grayscale(55%) saturate(1.2) contrast(1.06); }

/* Formats variés des vignettes — disposition irrégulière */
.gz-img.ratio-tall img      { aspect-ratio: 2 / 3; object-fit: cover; }
.gz-img.ratio-portrait img  { aspect-ratio: 3 / 4; object-fit: cover; }
.gz-img.ratio-high img      { aspect-ratio: 7 / 8; object-fit: cover; }
.gz-img.ratio-square img    { aspect-ratio: 1 / 1; object-fit: cover; }
.gz-img.ratio-landscape img { aspect-ratio: 4 / 3; object-fit: cover; }
.gz-img.ratio-wide img      { aspect-ratio: 3 / 2; object-fit: cover; }

/* Titre au-dessus de l'image, comme aunt.studio (aligne la première rangée).
   Romain, jamais italique : l'italique est réservé aux titres de la gazette
   dans le corps du journal, pas aux entrées de la grille. */
.gz-item .gz-title {
  font-size: 17px;
  font-weight: 400;
  margin-bottom: 10px;
  transition: color 0.15s ease;
}

/* Variante : titre en Courier superposé sur l'image (ex. ROUCHON) */
.gz-item.title-on-image .gz-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-style: normal;
  font-size: 15px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}

.gz-item .gz-text {
  font-size: 14.5px;
  line-height: 1.4;
  text-align: justify;
  hyphens: auto;
  padding-bottom: 22px;
  border-bottom: var(--hairline);
}

/* Survol : gris français, comme la navigation et la liste presse — jamais de
   soulignement. */
.gz-item:not(.title-on-image):hover .gz-title { color: var(--ink-mid); }
.gz-item:hover img { opacity: 0.94; }

/* Projets en cours : entrées du fil sans page dédiée (texte sur 2 paragraphes) */
.gz-item.is-en-cours .gz-text p + p { margin-top: 1em; }

/* Rail d'index (haut de la page Projets) — mêmes intitulés et mêmes liens que
   le pied de page, remontés pour rester accessibles dès l'arrivée.
   Dans le flux, comme la gazette : il défile avec elle et disparaît sous le
   bandeau d'en-tête, qui est opaque et au-dessus (z-index 60). Rien ne le
   suit à l'écran pendant la lecture. */
.index-rail {
  /* Marge haute négative = le padding haut de .page : le rail démarre collé
     sous le filet principal, et la gazette remonte d'autant.
     Aligné à gauche, sur le bord de la première colonne de la gazette. */
  margin: calc(-1 * var(--sp-l)) 28px 0;
  padding: 0 0 var(--sp-s);
  text-align: left;
}

/* Lien discret vers l'index (bas de la page Projets) */
.index-link { margin: var(--sp-m) 28px 4px; text-align: right; }

.index-rail a,
.index-link a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mid);
  transition: opacity 0.15s ease;
}
.index-rail a:hover,
.index-link a:hover { opacity: 0.85; text-decoration: underline; }

/* ==========================================================================
   Page projet — détail
   ========================================================================== */

.projet .split { align-items: start; }

/* Défilement indépendant des deux colonnes (grand écran) : le texte défile
   avec la page, puis s'arrête quand sa fin atteint le bas de l'écran pendant
   que les photos continuent. Une fois arrêté, la molette au-dessus du texte
   le fait remonter / redescendre sans bouger les photos. Le « top » est
   piloté par js/projet.js (--text-stick). */
@media (min-width: 1101px) {
  .projet .split { overflow: clip; } /* la translation du texte (js/projet.js) n'allonge pas la page */
  .projet .split > .half:not(.projet-photos) {
    position: sticky;
    top: var(--text-stick, 0px);
  }
}

/* Retrait symétrique de 40 px (au lieu de 96 à gauche / 40 à droite) : la
   colonne photos passe de 524 à 580 px sur une fenêtre de 1440, soit 40,3 %
   de la largeur — la proportion de ns-architects.com, la référence donnée par
   le client, où les images tiennent 40,4 % quelle que soit leur orientation.
   Les images gagnent 11 % de largeur sur les 14 pages projet. */
.projet-photos { display: flex; flex-direction: column; gap: var(--sp-l); padding: 0 40px; }
.projet-photos img { width: 100%; }
.projet-photos video { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Réglages locaux — High House.
   Deux blocs seulement débordent du retrait de .projet-photos ; le gabarit
   commun des autres pages projet n'est pas touché.
   -------------------------------------------------------------------------- */

/* Photo d'ouverture en « une » : elle reprend toute la largeur de la moitié
   gauche (les marges négatives annulent le retrait de la colonne), soit ~46 %
   de la fenêtre — la référence donnée par le client, ns-architects.com, tient
   ses images à ~40 %, quelle que soit leur orientation. Elle s'aligne donc à
   gauche sur le cadre du journal, sans jamais atteindre la pliure. */
.projet-photos img.photo-une {
  width: calc(100% + 80px);    /* les 40 px de retrait de chaque côté */
  max-width: none;             /* lève le max-width: 100% de la règle img */
  margin-left: -40px;
  margin-right: -40px;
}

/* Planche de plans et coupes — 2 lignes de 2 dessins.
   Les quatre fichiers partagent la même largeur source et la même bande
   verticale : l'échelle reste commune d'un dessin à l'autre et les cartouches
   (titre + échelle graphique) restent alignés d'une case à l'autre.
   Même débord que la « une » : chaque dessin est lu à ~2,5 fois la taille
   qu'il avait sur la planche unique. */
.projet-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-s);
  /* Même gabarit pour les plans de tous les projets, toujours en fin de
     galerie. Retour Adrian 04/11 : plus de débord, les plans perdent encore
     10 % (541 → 487 px sur une fenêtre de 1440, soit 84 % de la largeur des
     photos) et sont centrés sous les photos. */
  width: 84%;
  margin-left: auto;
  margin-right: auto;
}
.projet-plans img { width: 100%; }
.projet-plans--seul img { grid-column: 1 / -1; }
.projet-plans img.plan-large { grid-column: 1 / -1; } /* dessins d'une même planche : même largeur = même échelle */
.projet-plans figcaption {
  grid-column: 1 / -1;
  margin-top: calc(-1 * var(--sp-xs));
  font-family: var(--serif);
  font-style: italic;              /* texte sans lien : italique seul */
  font-size: var(--fs);       /* même corps que le rail d'index : la légende tient
                            sur une ligne sous la planche */
  line-height: 1.6;
  color: var(--ink-mid);
}

/* ==========================================================================
   Fiches projet — modernisées (octobre 2026) :
   Garamond partout, la machine à écrire s'efface pour les textes éditoriaux.
   Titres en EB Garamond romain sans préfixe "#", journal de bord en italique,
   descriptif en EB Garamond justifié, métadonnées en Courier Prime avec "_",
   liens Contact et Projets liés en Garamond épuré.
   ========================================================================== */

.projet-text {
  /* pas de sticky : le texte est plus haut que le viewport, il doit défiler */
  max-width: 560px;
  padding-right: 40px;
}

.projet-text .projet-title,
.projet-text h1 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 2.2em;   /* le lien Journal de bord est retiré pour l'instant (4 nov. 2026) */
  line-height: 1.25;
}

/* Lien Journal de bord épuré, en Garamond italique */
.journal-link {
  display: inline-block;
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 2.6em;
  transition: opacity 0.2s ease;
}
.journal-link:hover {
  opacity: 0.4;
  text-decoration: none;
}

/* Descriptif du projet en EB Garamond justifié */
.projet-text .body {
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink);
  text-align: justify;
  hyphens: auto;
  margin-bottom: 2.8em;
}
.projet-text .body p {
  margin-bottom: 1.2em;
}

/* Métadonnées du projet (lieu, surface, typologie).
   Code typographique du site : « _ » + italique = lien ; italique seul = texte. */
.projet-text .metas {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 2.2em;
}

/* Lien de contact épuré */
.projet-contact-link {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink);
  margin-top: 0;
  margin-bottom: 2.2em;
  transition: opacity 0.2s ease;
}
.projet-contact-link:hover {
  opacity: 0.4;
  text-decoration: none;
}

/* Projets liés */
.projet-liens {
  display: block;
  font-size: 15px;
  line-height: 1.8;
}
.projet-liens .pl-label {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink);
  opacity: 0.45;
  margin-bottom: 0.3em;
}
.projet-liens a::before { content: "_"; }
.projet-liens a {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
  transition: opacity 0.2s ease;
}
.projet-liens a:hover {
  opacity: 0.4;
  text-decoration: none;
}

/* Sous-section Journal de Bord — accumulation visuelle brute ("document dump")
   Règles client : grille en cascade sur 4 colonnes, aucun texte, images en
   noir & blanc qui passent en couleur au survol, pas de pliure centrale.
   Les seules lignes sont les filets horizontaux. L'en-tête (filet haut,
   logo, filet principal) est strictement celui des autres pages ; sous le
   filet principal, tous les blancs valent --sp-s (20 px) : filet → images,
   images → filet bas, et les gouttières entre images. */
.projet-journal .fold { display: none; }
.projet-journal .page {
  padding: var(--sp-s) var(--margin) calc(var(--frame) + var(--sp-s));
  min-height: 0;
}
.pure-dump-grid {
  column-count: 4;
  column-gap: var(--sp-s);
  width: 100%;
}
.pure-dump-grid .dump-item {
  break-inside: avoid;
  margin-bottom: var(--sp-s);
}
.pure-dump-grid img {
  width: 100%;
  display: block;
  filter: grayscale(100%);
  transition: filter 0.4s ease;
}
.pure-dump-grid .dump-item:hover img {
  filter: grayscale(0%);
}
/* Téléphone : 4 colonnes deviendraient des timbres-poste, on passe à 2 */
@media (max-width: 720px) {
  .pure-dump-grid { column-count: 2; }
}



/* ==========================================================================
   Index — liste pleine largeur + aperçu qui suit le curseur
   ========================================================================== */

.index-page .fold { display: none; }   /* pleine largeur : pas de pliure centrale */

.lindex-list { padding-top: var(--sp-l); }

/* Filtre par famille : discret, gris, le filtre actif barré à l'encre pleine. */
.lindex-filters {
  padding: var(--sp-l) 8px 0;
  font-size: var(--fs);
  color: var(--ink-mid);
}
.lindex-filters + .lindex-list { padding-top: var(--sp-s); }
.lindex-filters button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s ease;
}
.lindex-filters button:hover { color: var(--ink); }
.lindex-filters button[aria-pressed="true"] { color: var(--ink); text-decoration: line-through; }
.lindex-row[hidden] { display: none; }

.lindex-row {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) 1fr 1fr 64px;
  gap: 24px;
  align-items: baseline;
  padding: 15px 8px;
  border-bottom: var(--hairline);
  font-size: var(--fs);
  transition: background-color 0.15s ease;
}
.lindex-row:first-child { border-top: var(--hairline); }
.lindex-row .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lindex-row .type { font-size: var(--fs); }
.lindex-row .place { font-size: var(--fs); }
.lindex-row .year { font-family: var(--mono); font-size: var(--fs); text-align: right; }
/* Survol : gris français sur toute la ligne, comme la nav et la liste presse.
   Ni aplat, ni soulignement — la hiérarchie ne tient qu'au texte. */
.lindex-row:hover { color: var(--ink-mid); }

/* Pas d'aperçu au survol : l'index est une liste, pas une galerie. */

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  :root {
    --hd-gutter: 16px;
  }
  .main-nav {
    gap: clamp(14px, 2.2vw, 32px);
    font-size: 15.5px;
  }
  .split { column-gap: 32px; }
  .gazette { --gz-cols: 2; column-count: 2; }
  .associe-photo { padding: 0 30px 0 40px; }
  .lindex-list, .presse-list { padding-left: 30px; }
  .lindex-filters { padding-left: 38px; }
  .presse-raw { padding-left: 30px; padding-right: 20px; }
  .projet-photos { padding: 0 20px 0 30px; }
  /* Le débord suit le retrait resserré de la colonne (30 px + 20 px) */
  .projet-photos img.photo-une {
    width: calc(100% + 50px);
    margin-left: -30px;
    margin-right: -20px;
  }
  .projet-plans {
    width: 84%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 720px) {
  /* Même barème, resserré : les blocs qui l'utilisent suivent automatiquement */
  :root {
    --sp-l:  28px;
    --sp-xl: 44px;
    --header-pad: 12px;
    --header-h: 108px;    /* 3 niveaux propres : logo/retour, nav, index + FR/EN */
  }
  body { font-size: var(--fs); }

  .fold { display: none; }

  /* En-tête mobile sur 3 niveaux (zéro chevauchement) :
     • niveau 1 : flèche retour à gauche (pages projet/journal), logo à droite ;
     • niveau 2 : navigation principale sur toute la largeur ;
     • niveau 3 : « Index des projets » à gauche, « FR  EN » à droite.
     Retraits de 4 px : la gouttière mobile de la gazette, l'en-tête reste
     aligné sur le bord des images. */
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 22px auto 18px;
    align-items: center;
    align-content: space-between;
    column-gap: 12px;
    padding: calc(var(--frame) + 11px) var(--margin) 9px;
  }
  .site-header .logo,
  .site-header .main-nav,
  .site-header .header-index,
  .site-header .lang-switch { margin: 0; }
  .site-header .back-arrow {
    position: static;
    grid-area: 1 / 1;
    justify-self: start;
    align-self: center;
    padding: 4px 12px 4px 4px;
    margin: 0;
  }
  .site-header .back-arrow svg { margin: 0; }
  .site-header .logo {
    grid-area: 1 / 2;
    justify-self: end;
    align-self: center;
    margin-right: 4px;
  }
  .logo-img { width: 98px; }
  .site-header .main-nav {
    grid-area: 2 / 1 / 3 / 3;
    flex-wrap: wrap;
    gap: 4px clamp(10px, 4vw, 22px);
    margin: 0 4px;
    font-size: clamp(13px, 3.7vw, 14px);
    line-height: 1.25;
  }
  .site-header .header-index {
    grid-area: 3 / 1;
    align-self: end;
    margin-left: 4px;
    font-size: 13.5px;
  }
  .site-header .lang-switch {
    grid-area: 3 / 2;
    justify-self: end;
    align-self: end;
    margin-right: 4px;
  }

  .split { grid-template-columns: 1fr; row-gap: 32px; }

  /* Accueil mobile : image centrée unique */
  .slide { grid-template-columns: 1fr; }
  .slide .ph { grid-column: 1 !important; padding: 150px 10px 120px; }
  .slide .ph.size-tall img { aspect-ratio: auto; width: auto; height: auto; max-height: calc(100svh - 290px); max-width: 100%; object-fit: cover; align-self: auto; transform: none; }
  .slide .ph.size-wide img, .slide .ph.size-medium img { aspect-ratio: auto; width: 100%; height: auto; max-height: calc(100svh - 290px); object-fit: contain; align-self: auto; transform: none; }
  .slide .ph.second { display: none; }
  .home-footer { flex-direction: column; align-items: flex-start; gap: 8px; bottom: 20px; }
  .home-footer .caption { gap: 1px; }

  .gazette { --gz-cols: 1; column-count: 1; column-rule: none; }
  .gz-item { padding: 0 4px 30px; }

  .agence-photo,
  .contact-photo { padding: 0 4px; }
  .agence-text,
  .contact-stage { max-width: none; padding: 0 4px; }
  .associes-grid { grid-template-columns: 1fr; gap: 30px; }
  .contact-details { max-width: none; }

  .associes-head, .distinctions-head { grid-column: auto; }   /* le titre revient en colonne unique */

  .metier-une img { height: 38svh; }
  .metier-col { max-width: none; }
  .associe { row-gap: 14px; }             /* resserre la paire photo/bio (vs 32px génériques) */
  .associe-text { max-width: none; }

  /* Presse mobile : couverture en haut (comme Agence et Contact), liste dessous */
  .presse-page .split {
    display: flex;
    flex-direction: column-reverse;
    row-gap: 28px;
    min-height: 0;
  }
  .presse-cover .pc-frame,
  .presse-cover .pc-frame.ratio-portrait,
  .presse-cover .pc-frame.ratio-landscape,
  .presse-cover .pc-frame.ratio-wide,
  .presse-cover .pc-frame.ratio-page {
    width: min(260px, 76vw);
  }
  .presse-list { padding: 0 4px; max-width: none; }
  .presse-raw { padding: 0 4px; }
  .presse-stage { min-height: 0; padding: 8px 0 30px; }
  .index-link { text-align: left; margin: var(--sp-s) 4px 4px; }
  /* Rail d'index : aligné à gauche, dans la gouttière mobile */
  .index-rail {
    margin: calc(-1 * var(--sp-l)) 4px 0;
    padding-bottom: var(--sp-s);
    text-align: left;
  }

  .projet .split { display: flex; flex-direction: column-reverse; }
  .projet-text { padding: 0 4px; max-width: none; }
  .projet-photos { padding: 0 4px; gap: var(--sp-s); }
  /* Colonne unique : le débord se réduit à la gouttière de 4 px */
  .projet-photos img.photo-une {
    width: calc(100% + 8px);
    margin-left: -4px;
    margin-right: -4px;
  }
  /* Plans : pleine largeur des photos sur téléphone, bords alignés */
  .projet-plans { width: 100%; margin-left: 0; margin-right: 0; }
  .projet-plans { gap: var(--sp-xs); }
  /* Footer projet mobile : barre papier franche en bas d'écran, affichée
     uniquement quand on parcourt les photos (masquée sur le texte) */
  .projet-footer {
    left: var(--margin);
    right: var(--margin);
    bottom: 0;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 4px calc(var(--frame) + 5px);
    background: var(--paper);
    border-top: var(--hairline);
    transition: opacity 0.2s ease;
  }
  .projet-footer.is-hidden-mobile {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .projet-footer .counter { min-width: 0; }
  .projet-footer .caption { flex-direction: row; gap: 14px; }

  .lindex-list { padding-left: 4px; padding-right: 4px; }
  .lindex-filters { padding-left: 4px; padding-right: 4px; line-height: 1.8; }
  .lindex-row { grid-template-columns: minmax(0, 1fr) auto; gap: 14px; }
  .lindex-row .type, .lindex-row .place { display: none; }
}

/* Écrans tactiles et vue mobile : sans survol, le passage du noir & blanc à la
   couleur ne se produirait jamais. Les photos y sont donc affichées directement
   en couleur (décision client, octobre 2026). */
@media (hover: none), (max-width: 720px) {
  .gz-item .gz-img img,
  .gz-item:hover .gz-img img,
  .pure-dump-grid img,
  .contact-photo img { filter: none; }
}