/* =============================================================================
   PAUZA landscaping — feuille de styles de la nouvelle structure
   Mise en page « catalogue » : fond blanc, filets gris clair, titres très grands
   et très fins, photos pleine largeur, bandeaux bleu ardoise, actions en liens
   soulignés (aucun bouton, aucune ombre, aucun arrondi sauf les champs de saisie).
   Couleurs du site PAUZA : blanc, noir, vert sauge, bleu ardoise.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Police Inter — hébergée avec le site (dossier fonts/), licence SIL Open Font
   License (fonts/OFL-inter.txt). Un seul fichier variable par jeu de caractères :
   graisses 300 à 600, taille optique ajustée automatiquement.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  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;
}

:root {
  /* Couleurs */
  --white: #ffffff;
  --ink: #000000;
  --line: #e5e7eb;          /* filets : ils remplacent cadres, cartes et ombres */
  --muted: #6b7280;         /* texte secondaire, légendes */
  --accent: #c5cfb9;        /* vert sauge : soulignés au repos, cercles, zones de la carte */
  --accent-alt: #d6dfe4;    /* bleu brume */
  --deep: #1d3246;          /* bleu ardoise : bandeaux, pied de page, liens actifs */
  --on-deep: #e3e9dd;       /* texte sur le bleu ardoise */
  --on-deep-muted: rgba(227, 233, 221, 0.68);
  --deep-line: rgba(227, 233, 221, 0.2);
  --placeholder: #f1f0ed;   /* fond très clair pendant le chargement des images */

  /* Typographie : une seule famille, très fine en grand, resserrée à mesure qu'elle grandit */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-small: 14px;
  --fs-body: 16px;
  --fs-sub: 18px;
  --fs-h-sm: 24px;
  --fs-h: clamp(24px, 2.1vw, 30px);
  --fs-h-lg: clamp(32px, 3.5vw, 50px);
  --fs-display: clamp(44px, 6.95vw, 100px);

  /* Mise en page */
  --max: 1440px;
  --margin: clamp(20px, 3.3vw, 48px);
  --edge: clamp(16px, 2.25vw, 32px); /* marge de la barre de navigation, au bord de l'écran */
  --gap: 24px;
  --bar-h: 64px;
  --section: 80px;
}

@media (max-width: 899px) {
  :root { --section: 64px; --gap: 20px; --bar-h: 56px; }
}
@media (max-width: 599px) {
  :root { --section: 56px; --gap: 16px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bar-h) + 24px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
html.menu-open { overflow: hidden; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.56;
  font-weight: 400;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; border-radius: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; font-weight: inherit; }
::selection { background: var(--accent); color: var(--ink); }

:focus-visible { outline: 2px solid var(--deep); outline-offset: 3px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 12px; top: -60px; z-index: 300;
  background: var(--white); padding: 10px 14px; border: 1px solid var(--ink);
}
.skip:focus { top: 12px; }

/* Conteneur : 1440 px au plus, centré ; les filets ont la largeur du contenu */
.wrap {
  width: min(calc(100% - 2 * var(--margin)), calc(var(--max) - 2 * var(--margin)));
  margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   Typographie
   ------------------------------------------------------------------------ */
.display {
  font-size: var(--fs-display); line-height: 1; letter-spacing: -0.05em; font-weight: 300;
  text-wrap: balance;
}
.h-lg {
  font-size: var(--fs-h-lg); line-height: 1.08; letter-spacing: -0.04em; font-weight: 300;
  text-wrap: balance;
}
.h {
  font-size: var(--fs-h); line-height: 1.16; letter-spacing: -0.025em; font-weight: 300;
  text-wrap: pretty;
}
.h-sm { font-size: var(--fs-h-sm); line-height: 1.25; letter-spacing: -0.012em; font-weight: 400; }
.lead { font-size: var(--fs-sub); line-height: 1.5; max-width: 800px; text-wrap: pretty; }
.body { font-size: var(--fs-body); line-height: 1.56; max-width: 42em; text-wrap: pretty; }
.body p + p, .lead p + p { margin-top: 0.9em; }
.label { font-size: var(--fs-body); line-height: 1.3; font-weight: 500; letter-spacing: -0.005em; }
.small { font-size: var(--fs-small); line-height: 1.45; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

/* Liens dans le texte : soulignés vert sauge, bleu ardoise au survol */
.lead a, .body a, .h a, .h-lg a, .display a, .prose a {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.lead a:hover, .body a:hover, .h a:hover, .h-lg a:hover, .display a:hover, .prose a:hover {
  color: var(--deep); text-decoration-color: var(--deep);
}

/* Actions : un texte souligné, jamais un bouton plein */
.cta {
  display: inline-block;
  font-size: var(--fs-body); line-height: 1.3; font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.cta:hover, .cta[aria-expanded="true"] { color: var(--deep); border-bottom-color: var(--deep); }
.ctas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 32px; }

/* ---------------------------------------------------------------------------
   Barre de navigation, comme la structure d'origine : le nom du bureau près du
   bord gauche de l'écran, les rubriques au centre de la page, Contact et le
   choix de la langue à droite. La barre se retire quand on descend dans la page
   et revient dès qu'on remonte. Sur l'accueil, tout en haut, elle se pose sans
   fond sur les vues 3D, qui remontent dessous.
   ------------------------------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  transition: transform 0.45s ease, background-color 0.45s ease, border-color 0.45s ease;
}
.js .topbar.is-hidden { transform: translateY(-100%); }
.js .topbar.is-hidden:focus-within { transform: none; }
.js .topbar.is-hidden .mega { visibility: hidden; }
.js .topbar:has(+ main > .reel:first-child):not(.is-scrolled) { border-bottom-color: transparent; }
/* Sans fond tant que la souris n'est pas dessus ; au survol, la bande blanche apparaît en fondu */
.js .topbar:has(+ main > .reel:first-child):not(.is-scrolled):not(.is-active) { background-color: transparent; }
.topbar.has-panel { border-bottom-color: transparent; }
.js .topbar + main > .reel:first-child { margin-top: calc(-1 * var(--bar-h) - 1px); }

.topbar-in, .menu-bar {
  position: relative;
  height: var(--bar-h);
  display: flex; align-items: center; gap: 28px;
  padding-inline: var(--edge);
}
.wordmark { display: inline-flex; align-items: baseline; gap: 0.32em; margin-right: auto; font-size: 18px; line-height: 1; white-space: nowrap; }
.wm-main { font-weight: 600; letter-spacing: 0.08em; }
.wm-sub { font-weight: 300; letter-spacing: -0.01em; }
.wordmark:hover .wm-sub { color: var(--deep); }

.nav { display: flex; align-items: center; }
/* Les quatre rubriques restent au centre de la page, quelle que soit la place du nom et des liens de droite.
   Elles occupent toute la hauteur de la barre : on descend de la rubrique à son panneau sans le refermer. */
.nav-main {
  position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%);
  display: flex; gap: 28px; white-space: nowrap;
}
.nav-main a { display: flex; align-items: center; }
.nav a, .lang {
  font-size: var(--fs-body); line-height: 1.3; font-weight: 500; letter-spacing: -0.01em;
  text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: 1px; text-underline-offset: 6px;
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}
.nav a:hover, .nav a[aria-current="page"], .lang:hover { color: var(--deep); text-decoration-color: var(--deep); }
/* Survol d'une rubrique (souris) : elle reste noire, les autres pâlissent */
.nav-main.is-dim a { color: rgba(0, 0, 0, 0.3); text-decoration-color: transparent; }
.nav-main.is-dim a.is-lit { color: var(--ink); }
.menu-toggle { display: none; }

/* Panneaux des rubriques (souris seulement) : ils descendent de sous la bande blanche,
   avec les sous-parties de la rubrique en très grand et une phrase pour aller plus loin */
.mega { position: absolute; left: 0; right: 0; top: 100%; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; pointer-events: none; }
.mega-panel {
  grid-area: 1 / 1; align-self: start; min-width: 0;
  padding: 4px 0 32px;
  background: var(--white); border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(-100%); visibility: hidden;
  transition: transform 0.5s ease, opacity 0.5s ease, visibility 0s linear 0.5s;
}
.mega-panel.is-open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: transform 0.5s ease, opacity 0.5s ease; }
/* D'une rubrique à l'autre, les panneaux se remplacent en fondu, sans glisser */
.mega.is-swapping .mega-panel { transform: none; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
.mega.is-swapping .mega-panel.is-open { transition: opacity 0.3s ease; }
.mega-row {
  display: flex; gap: 20px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  padding-inline: var(--edge);
  cursor: grab;
}
.mega-row::-webkit-scrollbar { display: none; }
.mega-row.is-dragging { cursor: grabbing; }
.mega-row li { flex: none; }
.mega-row a {
  position: relative; display: block;
  padding-right: 40px; border-right: 1px solid var(--ink);
  font-size: var(--fs-display); line-height: 1.12; letter-spacing: -0.05em; font-weight: 300; white-space: nowrap;
  -webkit-user-drag: none; user-select: none;
  transition: color 0.3s ease;
}
.mega-n { position: absolute; top: calc(var(--fs-display) * 0.2); right: 8px; font-size: var(--fs-small); line-height: 1; letter-spacing: 0; font-weight: 500; }
.mega-row:hover a { color: rgba(0, 0, 0, 0.3); }
.mega-row a:hover { color: var(--ink); }
.mega-aside { margin: 28px var(--edge) 0 50%; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.mega-aside p { max-width: 46ch; }
.mega-aside b { font-weight: 500; }
@media (max-width: 899px) {
  .mega { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mega-panel, .mega-panel.is-open { transition: none; }
}

/* Menu des petits écrans : panneau blanc, grands liens fins séparés par des filets */
.menu {
  position: fixed; inset: 0; z-index: 100;
  background: var(--white);
  display: flex; flex-direction: column;
  overflow-y: auto;
  visibility: hidden; opacity: 0;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.menu.is-open { visibility: visible; opacity: 1; transition: opacity 0.3s ease; }
.menu-head { border-bottom: 1px solid var(--line); flex: none; }
.menu-nav { padding: 12px 0 40px; }
.menu-nav a {
  display: block;
  font-size: clamp(34px, 8.6vw, 56px); line-height: 1.08; letter-spacing: -0.04em; font-weight: 300;
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--line);
}
.menu-nav a[aria-current="page"] { color: var(--deep); }
.menu-foot { margin-top: auto; padding: 24px 0 32px; display: flex; flex-direction: column; gap: 4px; }

@media (max-width: 899px) {
  .nav { display: none; }
  .menu-toggle { display: inline-block; }
  .topbar-in, .menu-bar { gap: 20px; }
}

/* ---------------------------------------------------------------------------
   Sections
   ------------------------------------------------------------------------ */
/* Ouverture de page : titre géant, chapeau, liens */
.intro { padding-block: 72px var(--section); }
.intro .label { margin-bottom: 24px; }
.intro .display { max-width: 15ch; }
.intro .h { max-width: 34ch; margin-top: 40px; }
.intro .lead { margin-top: 40px; }
.intro .ctas { margin-top: 40px; }

/* Section : un filet, un sur-titre, un titre, puis le contenu */
.section { padding-block: 28px var(--section); border-top: 1px solid var(--line); }
.head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 56px; }
.head .h-lg { max-width: 24ch; }
.head .lead, .head .body { max-width: 640px; }
.section-foot { margin-top: 48px; }

.head:last-child { margin-bottom: 0; }
.plate-block .plate-caption { padding-bottom: 28px; }
.legal, #vue-index { padding-bottom: var(--section); }

/* Bandeau bleu ardoise (seule « élévation » du système) */
.band { background: var(--deep); color: var(--on-deep); }
.band-in { padding-block: var(--section); }
.band .muted { color: var(--on-deep-muted); }
.band .cta:hover, .band .cta[aria-expanded="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.band a:focus-visible { outline-color: var(--accent); }

/* Grille à 12 colonnes */
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; }

/* ---------------------------------------------------------------------------
   Médias
   ------------------------------------------------------------------------ */
.media { position: relative; overflow: hidden; background: var(--placeholder); }
.media > img, .media > svg { width: 100%; height: 100%; object-fit: cover; }
.media > svg { position: absolute; inset: 0; }
.media.white { background: var(--white); }
.media.natural > img { height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .media[data-illus] > svg { animation: fade-in 0.7s ease both; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.ratio-3-2 { aspect-ratio: 3 / 2; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-1-1 { aspect-ratio: 1 / 1; }
.ratio-4-5 { aspect-ratio: 4 / 5; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-21-9 { aspect-ratio: 21 / 9; }
.ratio-2-3 { aspect-ratio: 2 / 3; }
.ratio-planche { aspect-ratio: 1.4142 / 1; } /* planche A (A3, A1…) en paysage, comme le plan masse */

/* Photo pleine largeur, sans cadre */
.plate { position: relative; overflow: hidden; background: var(--placeholder); }
.plate > img, .plate > a > .media, .plate .media { width: 100%; height: 100%; }
.plate > img { object-fit: cover; }
.plate-tall { height: calc(100vh - var(--bar-h)); height: calc(100svh - var(--bar-h)); min-height: 420px; max-height: 62.5vw; }
.plate-wide { aspect-ratio: 21 / 9; }
.plate > img.pos-top { object-position: 50% 22%; }
.plate-caption {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 32px;
  padding: 14px 0 0;
}
.plate-caption .small { max-width: 72ch; }

a.zoom { display: block; cursor: zoom-in; }
a.zoom:focus-visible { outline-offset: 2px; }
a.hero-zoom { position: absolute; inset: 0; }
a.hero-zoom .media { position: absolute; inset: 0; }

/* ---------------------------------------------------------------------------
   Ouverture de l'accueil : vues 3D sur toute la hauteur de l'écran, qui défilent
   seules vers la gauche, en boucle (comme la structure d'origine). La barre de
   navigation se pose dessus, en noir. Un point par vue, en bas de l'image ;
   un clic sur une vue ouvre son projet.
   ------------------------------------------------------------------------ */
.reel { position: relative; }
.reel-frame {
  position: relative; overflow: hidden;
  height: 100vh; height: 100svh;
  min-height: 460px; max-height: 66vw;
  background: var(--placeholder);
  touch-action: pan-y;
}
.reel-track { display: flex; height: 100%; transition: transform 1.5s ease; will-change: transform; }
.reel-track.no-anim { transition: none; }
.reel-slide { flex: 0 0 100%; height: 100%; display: block; }
.reel-slide img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.reel-nav { position: absolute; z-index: 2; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; pointer-events: none; }
.reel-dots { display: flex; gap: 4px; pointer-events: auto; }
.reel-dot { width: 24px; height: 24px; display: grid; place-items: center; }
.reel-dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid var(--white); background: transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition: background-color 0.3s ease;
}
.reel-dot:hover::before { background: rgba(255, 255, 255, 0.5); }
.reel-dot[aria-current="true"]::before { background: var(--white); }
.reel-dot:focus-visible { outline-color: var(--white); outline-offset: 0; }
@media (prefers-reduced-motion: reduce) {
  .reel-track, .topbar { transition: none; }
}

/* ---------------------------------------------------------------------------
   Avant / après : une ligne de coupe (trait mixte des plans) à déplacer,
   réglée sur une échelle graphique pleine largeur
   ------------------------------------------------------------------------ */
.compare-head { padding-top: 28px; border-top: 1px solid var(--line); }
.compare-head .head { margin-bottom: 40px; }
.compare { --pos: 50%; position: relative; }
.compare-sheet {
  position: relative;
  cursor: col-resize; touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
}
.compare-frame {
  position: relative; overflow: hidden;
  height: calc(100vh - var(--bar-h) - 7px); height: calc(100svh - var(--bar-h) - 7px);
  min-height: 420px; max-height: 60vw;
  background: var(--placeholder);
}
.compare-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 55%;
  pointer-events: none; -webkit-user-drag: none;
}
.compare-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
/* Échelle graphique : barres noires et blanches de longueur fixe */
.compare-scale {
  height: 7px;
  border-block: 1px solid var(--ink);
  background: repeating-linear-gradient(90deg, var(--ink) 0 48px, var(--white) 48px 96px);
}
.compare-cut {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 1px; margin-left: -1px;
  background: repeating-linear-gradient(to bottom, var(--ink) 0 11px, transparent 11px 14px, var(--ink) 14px 16px, transparent 16px 19px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.75);
  pointer-events: none;
}
/* Repères triangulaires aux deux extrémités de la ligne de coupe */
.compare-cut::before, .compare-cut::after {
  content: ""; position: absolute; left: -5px; width: 1px; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  transition: transform 0.2s ease;
}
.compare-cut::before { top: 0; border-top: 9px solid var(--ink); }
.compare-cut::after { bottom: 0; border-bottom: 9px solid var(--ink); }
.compare.is-dragging .compare-cut::before, .compare.is-dragging .compare-cut::after { transform: scale(1.3); }
.compare-range {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  margin: 0; opacity: 0; pointer-events: none;
}
.compare-range:focus-visible ~ .compare-scale { outline: 2px solid var(--deep); outline-offset: 3px; }
.compare-legend { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; }

.compare-section .plate-caption { padding-bottom: 28px; }

/* ---------------------------------------------------------------------------
   Projets de l'accueil, comme les listes de la structure d'origine : un titre et
   « Tous les projets », puis une bande de grandes cartes (photo 3:2, titre, texte
   gris, lien) qui part de la marge du contenu, file jusqu'au bord droit de l'écran
   et que l'on fait glisser.
   ------------------------------------------------------------------------ */
.teasers-section { padding-bottom: var(--section); }
.teasers-head {
  display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px 32px;
  padding-top: 28px; margin-bottom: 24px;
  border-top: 1px solid var(--line);
}
.teasers {
  display: flex; gap: 10px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  /* à gauche, la marge du contenu (celle de .wrap) ; à droite, rien jusqu'au bord de l'écran */
  padding-left: max(var(--margin), calc((100% - var(--max)) / 2 + var(--margin)));
  padding-right: var(--margin);
  cursor: grab; -webkit-user-select: none; user-select: none;
}
.teasers::-webkit-scrollbar { display: none; }
.teasers.is-dragging { cursor: grabbing; }
.teaser { flex: 0 0 clamp(280px, 53.5vw, 820px); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.teaser .media { width: 100%; margin-bottom: 8px; }
.teaser img { -webkit-user-drag: none; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.teaser:hover img { transform: scale(1.02); }
.teaser-title { font-size: var(--fs-body); font-weight: 500; line-height: 1.3; }
.teaser-text { color: var(--muted); line-height: 1.4; max-width: 62ch; }
.teaser .cta { margin-top: 8px; }
.teaser:hover .cta { color: var(--deep); border-bottom-color: var(--deep); }

/* Page Projets : chaque projet en grande planche, dans le format de son image */
.pblock { padding-block: 28px 72px; border-top: 1px solid var(--line); }
.pblock-link { display: block; }
.pblock .media > img { height: auto; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pblock-link:hover .media > img { transform: scale(1.012); }
.pblock-meta { margin-top: 24px; align-items: start; }
.pblock-title { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: 12px; }
.pblock-title .h-lg { transition: color 0.2s ease; }
.pblock-link:hover .pblock-title .h-lg { color: var(--deep); }
.pblock-facts { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 16px; }
.empty-state { padding: 40px 0 0; }

/* Faits clés (lieu, année…) : grille de cellules à filets */
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.facts > div { padding: 14px 16px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.facts dt { font-size: var(--fs-small); color: var(--muted); }
.facts dd { margin-top: 4px; font-size: var(--fs-sub); line-height: 1.35; letter-spacing: -0.01em; }
.facts.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.facts.compact dd { font-size: var(--fs-body); }

/* Outils de la page Projets : filtres et affichage */
.tools { margin-top: 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.tools-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 32px; }
.view-switch { display: flex; gap: 20px; }
.filters { display: none; width: 100%; border-top: 1px solid var(--line); padding-top: 18px; }
.filters.is-open { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 18px; }
.filter-group { grid-column: span 5; }
.filter-group:last-child { grid-column: span 2; align-self: end; }
.filter-group .label { margin-bottom: 10px; }
.filter-list { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.filter-btn {
  font-size: var(--fs-body); line-height: 1.3; color: var(--muted);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.filter-btn:hover { color: var(--ink); border-bottom-color: var(--accent); }
.filter-btn[aria-pressed="true"] { color: var(--deep); border-bottom-color: var(--deep); }
.compte { color: var(--muted); }

/* Index (vue en liste) */
.index-wrap { overflow-x: auto; }
.index-table { width: 100%; border-collapse: collapse; }
.index-table th, .index-table td {
  text-align: left; vertical-align: baseline;
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--line);
}
.index-table thead th { padding-top: 0; font-size: var(--fs-small); font-weight: 500; color: var(--muted); }
.index-table td { font-size: var(--fs-body); line-height: 1.35; }
.index-table td.num, .index-table th.num { width: 56px; color: var(--muted); font-size: var(--fs-small); }
.index-table .index-title a { font-size: var(--fs-h-sm); font-weight: 300; letter-spacing: -0.012em; }
.index-table tbody tr { cursor: pointer; transition: background-color 0.2s ease; }
.index-table tbody tr:hover { background: rgba(197, 207, 185, 0.32); }
.index-table tbody tr:hover .index-title a { color: var(--deep); }
.index-preview {
  position: fixed; left: 0; top: 0; z-index: 40; width: 260px; aspect-ratio: 3 / 2;
  pointer-events: none; opacity: 0; transition: opacity 0.2s ease;
}
.index-preview.is-visible { opacity: 1; }

/* ---------------------------------------------------------------------------
   Cellules à cercle (« Pour qui » de l'accueil, rayon d'action) : un cercle au
   trait fin, que le grand texte vient traverser
   ------------------------------------------------------------------------ */
.keys {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.keys.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.key {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 1 / 1;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.key-ring { position: absolute; left: 14%; top: 10%; width: 72%; height: 72%; }
.key-ring circle { fill: none; stroke: var(--accent); stroke-width: 1.25px; transition: stroke 0.3s ease; }
.key-num { position: absolute; left: 16px; top: 14px; font-size: var(--fs-small); font-weight: 500; }
.key-title {
  position: absolute; left: 0; right: 12px; top: 50%;
  font-size: clamp(28px, 2.8vw, 42px); line-height: 1; letter-spacing: -0.04em; font-weight: 300;
  transition: color 0.2s ease;
}
.key-more { position: absolute; left: 16px; right: 16px; bottom: 14px; font-size: var(--fs-small); line-height: 1.4; color: var(--muted); }
a.key:hover .key-ring circle { stroke: var(--deep); }
a.key:hover .key-title { color: var(--deep); }
/* « Pour qui » de l'accueil : la photo de chaque profil dans son cercle ; le titre,
   sur fond blanc, vient mordre le bas du cercle */
.keys.photos .key-ring { left: 15%; top: 5%; width: 70%; height: 70%; }
.key-photo {
  position: absolute; left: 19%; top: 9%; width: 62%; height: 62%;
  border-radius: 50%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
a.key:hover .key-photo { transform: scale(1.03); }
.keys.photos .key-title { top: 68%; right: auto; padding: 0 10px 4px 0; background: var(--white); }
/* Rayon d'action : textes plus longs, mis en page dans le flux pour ne jamais se chevaucher */
.keys.three .key { aspect-ratio: auto; min-height: 380px; display: flex; flex-direction: column; padding: 14px 16px 16px; }
.keys.three .key-ring { left: 50%; top: 50%; width: min(70%, 260px); height: auto; aspect-ratio: 1 / 1; transform: translate(-50%, -54%); }
.keys.three .key-num, .keys.three .zone-sub { position: relative; }
.keys.three .key-title { position: relative; top: auto; left: -16px; right: auto; margin: auto 0; padding-bottom: 12px; }
.zone-sub { display: flex; flex-direction: column; gap: 4px; }

/* ---------------------------------------------------------------------------
   Services
   ------------------------------------------------------------------------ */
/* Pour qui : quatre colonnes égales à filets, photo au sommet de chaque cellule */
.audiences {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.audience { display: flex; flex-direction: column; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.audience .media { aspect-ratio: 1 / 1; }
.audience-body { flex: 1; padding: 22px 24px 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.audience-body .h { margin-bottom: 2px; }
.audience-body .missions { margin-bottom: 8px; }
.audience-body .cta { margin-top: auto; }
.missions li::before, .dashed li::before { content: "— "; }
.label + .dashed, .label + .missions { margin-top: -6px; }

/* Les sept services : numéro, texte, exemple réel */
.service { padding-block: 32px 64px; border-top: 1px solid var(--line); align-items: start; }
.service-num { grid-column: 1 / span 2; font-size: var(--fs-h-lg); line-height: 1; letter-spacing: -0.04em; font-weight: 300; }
.service-main { grid-column: 3 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.service-main .facts { width: 100%; }
.service-example { grid-column: 8 / span 5; }
.service-example figcaption { padding-top: 10px; }

/* Exemples : chaque document sur toute la largeur de sa colonne, dans son format d'origine */
.example-sheet { display: block; }
.example-sheet > img { width: 100%; height: auto; }
/* Esquisses : les six calques en planche contact, numérotés */
.example-sheet.calques { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.calque { position: relative; display: block; overflow: hidden; }
.calque img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s ease; }
.calque:hover img { transform: scale(1.04); }
.calque-num { position: absolute; left: 6px; top: 6px; background: var(--white); padding: 1px 6px; font-size: 12px; font-weight: 500; }

/* Liste des services dans le bandeau de l'accueil */
.svc-list { border-top: 1px solid var(--deep-line); }
.svc-list li { border-bottom: 1px solid var(--deep-line); }
.svc-list a {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: baseline;
  padding: 14px 0 15px;
  font-size: var(--fs-h-sm); line-height: 1.25; letter-spacing: -0.012em; font-weight: 300;
  transition: color 0.2s ease;
}
.svc-list .n { font-size: var(--fs-small); font-weight: 500; color: var(--on-deep-muted); }
.svc-list a:hover { color: var(--accent); }
.band-services { align-items: start; }
.band-services .band-head { grid-column: 1 / span 5; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.band-services .svc-list { grid-column: 7 / span 6; }
.band-services .ctas { margin-top: 20px; }

/* ---------------------------------------------------------------------------
   Fiche projet
   ------------------------------------------------------------------------ */
.project-intro { padding-block: 56px 48px; }
.project-intro .label { margin-bottom: 20px; }
.project-intro .display { max-width: 16ch; }
.project-intro .h { margin-top: 32px; max-width: 36ch; }
.project-facts { margin-bottom: 56px; }
.project-body { padding-bottom: var(--section); align-items: start; }
.project-body .col-missions { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 14px; }
.project-body .col-texte { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 14px; }
.project-missions li { font-size: var(--fs-body); line-height: 1.5; }
.project-missions li::before { content: "— "; }
.project-missions a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.18em; transition: color 0.2s ease, text-decoration-color 0.2s ease; }
.project-missions a:hover { color: var(--deep); text-decoration-color: var(--deep); }

/* Galerie : six colonnes ; c1, c2, c3 = un tiers, c12, c23 = deux tiers, c123 = toute la largeur */
.gallery {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--gap); row-gap: 56px; align-items: start;
  padding-block: 28px var(--section); border-top: 1px solid var(--line);
}
.gallery figure { min-width: 0; }
.gallery .c1 { grid-column: 1 / span 2; }
.gallery .c2 { grid-column: 3 / span 2; }
.gallery .c3 { grid-column: 5 / span 2; }
.gallery .c12 { grid-column: 1 / span 4; }
.gallery .c23 { grid-column: 3 / span 4; }
.gallery .c123 { grid-column: 1 / -1; }
.gallery .media > img { height: auto; }
.gallery figcaption { padding-top: 10px; }

/* Autres projets : le précédent et le suivant, en petites vignettes */
.others { padding-block: 28px var(--section); border-top: 1px solid var(--line); align-items: start; }
.others-head { grid-column: 1 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.other { grid-column: span 4; display: grid; grid-template-columns: 168px minmax(0, 1fr); column-gap: 18px; align-items: start; }
.other-text { display: flex; flex-direction: column; gap: 4px; }
.other-title { transition: color 0.2s ease; text-wrap: balance; }
.other:hover .other-title { color: var(--deep); }
.other .media > img { transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.other:hover .media > img { transform: scale(1.04); }

/* ---------------------------------------------------------------------------
   Mon approche, À propos
   ------------------------------------------------------------------------ */
.quote-band blockquote { max-width: 26ch; }
.quote-band figcaption { margin-top: 32px; display: flex; flex-direction: column; gap: 2px; }

.values { border-top: 1px solid var(--line); }
.values li {
  padding: 16px 0 18px; border-bottom: 1px solid var(--line);
  font-size: var(--fs-h-lg); line-height: 1.08; letter-spacing: -0.04em; font-weight: 300;
}

/* Méthode : cinq colonnes égales à filets */
.steps {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.step { padding: 18px 20px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.step .small { font-weight: 500; }

/* À propos */
.about-who { align-items: start; }
.about-who .who-text { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: 24px; }
.about-who .skills { grid-column: 9 / span 4; }
.skills { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.skills > div { padding: 16px 18px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.skills .label { margin-bottom: 10px; }
.skill-list { font-size: var(--fs-body); line-height: 1.6; }
.skill-list.two-cols { columns: 2; column-gap: var(--gap); }

.about-path { align-items: start; }
.about-path .portrait { grid-column: 1 / span 5; }
.about-path .portrait figcaption { padding-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.about-path .parcours { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 48px; }
.parcours .label { margin-bottom: 12px; }
.timeline { border-top: 1px solid var(--line); }
.timeline li {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px;
  padding: 14px 0 16px; border-bottom: 1px solid var(--line);
}
.timeline .when { font-size: var(--fs-small); font-weight: 500; padding-top: 5px; }
.timeline .what { font-size: var(--fs-h-sm); line-height: 1.25; letter-spacing: -0.012em; font-weight: 300; }
.timeline .where { grid-column: 2; margin-top: 4px; }

.zones-map { margin-top: 56px; align-items: start; }
.zones-map .map { grid-column: 1 / span 5; }
.zones-map .map .media { border: 1px solid var(--line); }
.zones-map .map figcaption { padding-top: 10px; }
.zones-map .zones-text { grid-column: 7 / span 6; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }

/* ---------------------------------------------------------------------------
   Contact
   ------------------------------------------------------------------------ */
.contact-lines { margin-top: 48px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.contact-lines a { overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.16em; transition: color 0.2s ease, text-decoration-color 0.2s ease; }
.contact-lines a:hover { color: var(--deep); text-decoration-color: var(--deep); }
.cities { margin-top: 40px; width: 100%; max-width: 760px; border-top: 1px solid var(--line); }
.cities li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0 13px; border-bottom: 1px solid var(--line); }

.contact-form-row { align-items: start; }
.contact-form-row .form-aside { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 14px; }
.contact-form-row .form { grid-column: 5 / span 8; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 24px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field > label, .field legend { font-size: var(--fs-body); font-weight: 500; line-height: 1.3; padding: 0; }
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--muted); border-radius: 2px;
  padding: 8px 12px;
  font-size: var(--fs-body); line-height: 1.5;
  -webkit-appearance: none; appearance: none;
  transition: border-color 0.2s ease;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;
  background-size: 5px 5px; background-repeat: no-repeat;
  padding-right: 36px;
}
.field textarea { min-height: 160px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #9ca3af; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 4px; }
.check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.check input {
  width: 16px; height: 16px; margin: 0; flex: none;
  border: 1px solid var(--muted); border-radius: 2px;
  -webkit-appearance: none; appearance: none; background: var(--white);
}
.check input:checked { background: var(--deep); border-color: var(--deep); box-shadow: inset 0 0 0 3px var(--white); }
.other-field { margin-top: 16px; max-width: 520px; }
.other-field[hidden] { display: none; }
.form-actions { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-top: 8px; }
.submit {
  font-size: var(--fs-h); line-height: 1.16; letter-spacing: -0.025em; font-weight: 300;
  border-bottom: 1px solid var(--ink); padding-bottom: 3px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.submit:hover { color: var(--deep); border-bottom-color: var(--deep); }
.form-note { max-width: 46ch; }
.form-status { grid-column: 1 / -1; }

/* ---------------------------------------------------------------------------
   Mentions légales
   ------------------------------------------------------------------------ */
.legal-block { padding-block: 22px 26px; border-top: 1px solid var(--line); align-items: start; }
.legal-block h2 { grid-column: 1 / span 3; }
.legal-block .body { grid-column: 4 / span 7; }

/* ---------------------------------------------------------------------------
   Pied de page (bleu ardoise)
   ------------------------------------------------------------------------ */
.endcap { background: var(--deep); color: var(--on-deep); }
.endcap-in { padding-block: var(--section) 28px; }
/* Bandeau bleu ardoise juste avant le pied de page : un filet les sépare */
main:has(> .band:last-child) + .endcap .endcap-in { border-top: 1px solid var(--deep-line); }
.endcap-statement { max-width: 18ch; }
.endcap-statement a {
  text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 1px; text-underline-offset: 0.14em;
  transition: color 0.2s ease;
}
.endcap-statement a:hover { color: var(--accent); }
.endcap-cols { margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--deep-line); row-gap: 28px; }
.endcap-cols > div { grid-column: span 3; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.endcap-cols .small.muted { margin-bottom: 6px; }
.endcap a { transition: color 0.2s ease; }
.endcap-cols a:hover, .endcap-legal a:hover { color: var(--accent); }
.endcap a:focus-visible { outline-color: var(--accent); }
.endcap-legal {
  margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--deep-line);
  display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
  font-size: var(--fs-small); color: var(--on-deep-muted);
}

/* ---------------------------------------------------------------------------
   Visionneuse d'images
   ------------------------------------------------------------------------ */
.lightbox {
  position: fixed; inset: 0; z-index: 120;
  display: flex; flex-direction: column;
  background: var(--white);
}
.lightbox[hidden] { display: none; }
.lightbox-bar {
  flex: none; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 24px;
  padding: 14px var(--margin); border-bottom: 1px solid var(--line);
}
.lightbox-actions { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.lightbox.is-single .lightbox-prev, .lightbox.is-single .lightbox-next { display: none; }
.lightbox-stage {
  position: relative;
  flex: 1; min-height: 0; overflow: auto;
  display: flex; align-items: center; justify-content: center;
  padding: 16px var(--margin);
}
/* Image entière à l'écran ; taille réelle au clic quand elle a dû être réduite */
.lightbox-stage img {
  max-width: 100%; max-height: 100%; min-width: 0; min-height: 0;
  width: auto; height: auto; object-fit: contain;
}
.lightbox.can-zoom .lightbox-stage img { cursor: zoom-in; }
.lightbox.is-zoomed .lightbox-stage { display: block; }
.lightbox.is-zoomed .lightbox-stage img { max-width: none; max-height: none; margin: 0 auto; cursor: zoom-out; }
.lightbox.is-loading .lightbox-stage img { visibility: hidden; }
.lightbox-status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.lightbox-status:empty { display: none; }
.lightbox-foot {
  flex: none; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 24px;
  padding: 12px var(--margin) 16px; border-top: 1px solid var(--line);
}

/* ---------------------------------------------------------------------------
   Apparition au défilement
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .reveal-on .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .reveal-on .reveal.is-in { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   Écrans moyens
   ------------------------------------------------------------------------ */
@media (max-width: 1099px) {
  .keys, .audiences { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; padding: 16px 20px 20px; }
  .step .body { grid-column: 2; }
  .service-num { grid-column: 1 / span 2; }
  .service-main { grid-column: 3 / -1; }
  .service-example { grid-column: 3 / -1; }
  .about-who .who-text, .about-who .skills { grid-column: 1 / -1; }
  .about-who .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .others-head { grid-column: 1 / -1; }
  .other { grid-column: span 6; }
}

/* ---------------------------------------------------------------------------
   Tablettes
   ------------------------------------------------------------------------ */
@media (max-width: 899px) {
  .intro { padding-top: 48px; }
  .intro .h, .intro .lead, .intro .ctas { margin-top: 28px; }
  .grid12 > * { grid-column: 1 / -1 !important; }
  .band-services .ctas { margin-top: 8px; }
  .service-num { font-size: var(--fs-h); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .gallery .c1, .gallery .c2, .gallery .c3, .gallery .c12, .gallery .c23, .gallery .c123 { grid-column: 1 / -1; }
  .pblock-title, .pblock-facts { grid-column: 1 / -1; }
  .filters.is-open { grid-template-columns: minmax(0, 1fr); }
  .filter-group, .filter-group:last-child { grid-column: 1 / -1; }
  .facts.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .keys.three { grid-template-columns: minmax(0, 1fr); }
  .keys.three .key { min-height: 260px; }
  .keys.three .key-ring { left: auto; right: 24px; top: 24px; width: min(44%, 200px); transform: none; }
  .endcap-cols > div { grid-column: span 6 !important; }
  .about-path .portrait { max-width: 440px; }
  .zones-map .map { max-width: 440px; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .compare-frame { height: auto; aspect-ratio: 4 / 3; min-height: 0; max-height: none; }
  .plate-tall { height: auto; aspect-ratio: 4 / 3; min-height: 0; max-height: none; }
  .reel-frame { height: auto; aspect-ratio: 4 / 3; min-height: 0; max-height: none; }
}

/* ---------------------------------------------------------------------------
   Téléphones
   ------------------------------------------------------------------------ */
@media (max-width: 599px) {
  .keys { grid-template-columns: minmax(0, 1fr); }
  .key { aspect-ratio: 2 / 1; }
  .key-ring, .keys.photos .key-ring { left: auto; right: 6%; top: 10%; width: 40%; height: 80%; }
  .key-photo { left: auto; right: 8%; top: 14%; width: 36%; height: 72%; }
  .key-title, .keys.photos .key-title { top: 38%; }
  .keys.photos .key-more { right: 50%; }
  .audiences { grid-template-columns: minmax(0, 1fr); }
  .audience .media { aspect-ratio: 4 / 3; }
  .teaser { flex-basis: 80vw; }
  .facts.compact { grid-template-columns: minmax(0, 1fr); }
  .other { grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; }
  .timeline li { grid-template-columns: minmax(0, 1fr); }
  .timeline .where { grid-column: 1; }
  .timeline .when { padding-top: 0; margin-bottom: 2px; }
  .about-who .skills { grid-template-columns: minmax(0, 1fr); }
  .cities li { flex-direction: column; gap: 0; }
  .compare-frame, .plate-tall, .reel-frame { aspect-ratio: 1 / 1; }
  .index-table .col-missions, .index-table .col-pour { display: none; }
  .endcap-cols > div { grid-column: 1 / -1 !important; }
  .lightbox-bar { padding-block: 10px; }
}