/* ==========================================================================
   Police — auto-hébergée, aucune requête vers un tiers

   UNE SEULE FAMILLE (décision client). Work Sans est une police VARIABLE
   sous licence libre OFL : un seul fichier de 49 Ko couvre tout l'axe de
   graisse, de 100 à 900. Elle tient donc à elle seule le corps en Light et
   les titres en Bold, sans qu'aucune autre famille soit chargée.

   Plage réelle lue dans la table fvar du fichier : wght 100–900.

   Libre Baskerville a été retirée avec le passage à une police unique
   (2 fichiers, ~55 Ko). Aucun italique n'est chargé : Work Sans n'ayant pas
   d'axe d'italique, les rares passages en italique sont obliqués par le
   navigateur — acceptable pour deux citations, à surveiller si l'usage
   s'étend.
   ========================================================================== */

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/work-sans-variable.woff2') format('woff2');
}

/* ==========================================================================
   Design Tokens — from Synopsis Architecture design handoff
   ========================================================================== */

:root {
  /* Colors */
  --color-bg: #ffffff;
  --color-bg-alt: #f6f5f3;
  --color-text: #1c1c1c;
  --color-body: #57554f;
  --color-muted: #8f8d89;
  --color-overline: #9a9892;
  --color-label: #a6a4a0;
  --color-faint: #b6b4af;
  --color-hero-overline: #c9c7c2;
  --color-rule: #e7e6e4;
  --color-rule-faint: #ededeb;
  --color-input-rule: #d9d7d3;
  --color-accent: #1c1c1c;
  --color-white: #ffffff;

  /* Photo placeholders */
  --photo-placeholder: repeating-linear-gradient(135deg, #f0efed 0 16px, #f7f6f4 16px 32px);
  --photo-placeholder-dark: repeating-linear-gradient(135deg, #222222 0 24px, #272727 24px 48px);
  --photo-placeholder-detail: repeating-linear-gradient(135deg, #ececea 0 18px, #f4f3f1 18px 36px);

  /* Typography — UNE SEULE FAMILLE (décision client, lot 4c).
     Work Sans est une variable OFL couvrant 100 à 900 : elle tient à elle
     seule le corps en Light et les titres en Bold. Les trois jetons pointent
     donc la même famille ; leurs noms disent le RÔLE, pas le dessin, et
     restent utiles le jour où l'un d'eux devra bouger.
     Seul --font-code garde une vraie chasse fixe : il ne sert qu'aux
     afficheurs techniques de l'admin (journal de publication, valeurs
     numériques qui défilent), où l'alignement des caractères est le sujet. */
  --font-body: 'Work Sans', system-ui, sans-serif;
  --font-display: var(--font-body);
  --font-label: var(--font-body);
  --font-code: 'Courier New', ui-monospace, monospace;

  /* Filet des photos de galerie. Une image aux bords blancs — un intérieur
     clair, un plan sur fond blanc — se fond dans la page sans lui.
     POUR LE RETIRER : passer les deux valeurs à `transparent`. Rien d'autre
     à toucher, et la mise en page ne bouge pas (voir .detail-gallery__tile). */
  --gallery-frame: rgba(28, 28, 28, 0.08);
  --gallery-frame-hover: rgba(28, 28, 28, 0.28);

  /* Layout */
  --content-width: min(1320px, 90vw);
  --reading-width-lg: min(900px, 90vw);
  --reading-width-md: min(820px, 90vw);
  --reading-width-sm: min(720px, 90vw);
  --reading-width-xs: min(760px, 90vw);
  --reading-width-spec: min(1100px, 90vw);

  /* Motion */
  --ease-card: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }
ul, ol { list-style: none; }
html { scroll-behavior: smooth; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ==========================================================================
   Keyframes
   ========================================================================== */

@keyframes scFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@keyframes scCardIn {
  from { opacity: 0; transform: translateY(22px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.container { width: var(--content-width); margin: 0 auto; }
.animate-in { animation: scFadeUp 0.55s ease both; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-rule);
}

.site-header__inner {
  width: var(--content-width); margin: 0 auto;
  min-height: 72px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; padding: 10px 0;
}

.site-header__logo {
  background: none; border: none; text-align: left;
  display: flex; flex-direction: row; align-items: center;
  line-height: 1; gap: 12px; padding: 0;
}

.site-header__logo-mark { display: block; }

.site-header__logo-text {
  display: flex; flex-direction: column; gap: 4px;
}

.site-header__logo-name {
  font-family: var(--font-display); font-size: 23px;
  color: var(--color-text); letter-spacing: 0.01em;
}

.site-header__logo-sub {
  font-family: var(--font-body); font-size: 9.5px;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--color-overline);
}

.site-nav {
  display: flex; gap: clamp(18px, 2.6vw, 38px);
  align-items: center; flex-wrap: wrap; justify-content: flex-end;
}

.site-nav__link {
  background: none; border: none; padding: 6px 0;
  font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-muted); font-weight: 400;
  transition: color 0.25s ease;
}

.site-nav__link:hover { color: var(--color-text); }
.site-nav__link--active { color: var(--color-accent); font-weight: 600; }

.site-nav__toggle {
  display: none; background: none; border: none; padding: 8px;
  flex-direction: column; gap: 5px;
}

.site-nav__toggle span {
  width: 22px; height: 1.5px; background: var(--color-text);
}

/* ==========================================================================
   Eyebrow / Overline
   ========================================================================== */

.eyebrow {
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-overline); font-weight: 500; margin-bottom: 22px;
}

/* ==========================================================================
   Legal page
   ========================================================================== */

.legal {
  width: min(760px, var(--content-width)); margin: 0 auto;
  padding: clamp(64px, 8vw, 120px) 0 clamp(80px, 9vw, 130px);
}

.legal__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 5vw, 58px); line-height: 1.08;
  color: var(--color-text); margin: 0 0 clamp(36px, 4vw, 56px);
}

.legal__heading {
  font-family: var(--font-display); font-weight: 700;
  font-size: 21px; color: var(--color-text);
  margin: clamp(32px, 4vw, 48px) 0 14px;
}

.legal__text {
  font-size: 16px; line-height: 1.85;
  color: var(--color-body); font-weight: 300; margin: 0 0 14px;
}

.legal__text a {
  color: var(--color-text);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ==========================================================================
   Mono label
   ========================================================================== */

.mono-label {
  font-family: var(--font-label); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-label);
}

/* ==========================================================================
   Hero Section (Home)
   ========================================================================== */

.hero {
  position: relative;
  height: clamp(560px, 84vh, 880px);
  background: var(--photo-placeholder-dark);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

.hero__layer {
  position: absolute; inset: -2%;
  background-size: cover;
  /* Le parallaxe décale l'image DANS sa couche (js/motion.js pose
     --hero-parallax). Passer par `transform` serait vain : hero-drift anime
     déjà cette propriété et l'emporterait. */
  background-position: center calc(50% + var(--hero-parallax, 0px));
  opacity: 0;
  filter: blur(16px);
  transform: scale(1.06);
  transition: opacity 1.8s ease, filter 1.8s ease;
  will-change: opacity, filter, transform;
}

.hero__layer--active {
  opacity: 1; filter: blur(0);
  animation: hero-drift 9s ease-out forwards;
}

@keyframes hero-drift {
  from { transform: scale(1.1); }
  to { transform: scale(1.02); }
}

.hero__scrim {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(18,18,18,0.32),
    rgba(18,18,18,0.16) 45%,
    rgba(18,18,18,0.52));
}

.hero__link {
  position: absolute; inset: 0; z-index: 4;
  text-decoration: none;
}

.hero__link:focus-visible {
  outline: 2px solid var(--color-white); outline-offset: -6px;
}

.hero__legend {
  position: absolute; left: clamp(20px, 5vw, 64px); bottom: 28px;
  display: flex; flex-direction: column; gap: 7px;
  transition: opacity 0.4s ease;
}

.hero__legend-label {
  font-family: var(--font-label); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

.hero__legend-title {
  font-family: var(--font-display); font-size: clamp(17px, 2vw, 21px);
  color: var(--color-white); letter-spacing: 0.01em;
}

.hero__legend-arrow {
  display: inline-block; opacity: 0.55;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.hero__link:hover .hero__legend-arrow {
  transform: translateX(5px); opacity: 1;
}

.hero__legend-meta {
  font-family: var(--font-label); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: #b9b7b3;
}

.hero__counter {
  position: absolute; right: clamp(20px, 5vw, 64px); bottom: 28px;
  z-index: 5; pointer-events: none;
  font-family: var(--font-label); font-size: 11px;
  letter-spacing: 0.1em; color: #b9b7b3;
}

@media (prefers-reduced-motion: reduce) {
  .hero__layer {
    transition: opacity 0.8s ease;
    filter: none; transform: none;
  }
  .hero__layer--active { animation: none; }
}

/* .hero__content, .hero__overline et .hero__title ont été retirés avec le
   texte qui surplombait la photo (lot 4a) : l'accroche est descendue sous
   l'image, dans .manifesto__title. Ne restent sur la photo que la légende du
   projet et le compteur du diaporama. */

/* ==========================================================================
   Manifesto Section (Home)
   ========================================================================== */

.manifesto {
  width: var(--reading-width-lg); margin: 0 auto;
  padding: clamp(80px, 11vw, 150px) 0; text-align: center;
}

/* L'accroche, descendue de la photo (lot 4a). Elle porte le <h1> : d'où une
   échelle plus généreuse que le texte de présentation qui la suit. */
.manifesto__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.3; letter-spacing: -0.015em;
  color: var(--color-text); margin: 0 0 42px;
}

/* Présentation du bureau, sous le bouton. Volontairement plus discrète que
   l'accroche : c'est une précision, pas une seconde accroche. */
/* Citation attribuée. Le site n'ayant plus qu'une famille, l'italique est
   exclu — Work Sans n'a pas d'axe italique et le navigateur ne ferait que la
   pencher. La citation se distingue donc autrement : un corps plus généreux,
   une graisse légère, et les guillemets français posés en CSS. */
.manifesto__quote {
  max-width: 56ch; margin: 52px auto 0;
}

.manifesto__quote blockquote {
  font-weight: 300;
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.5; letter-spacing: -0.01em;
  color: var(--color-text); margin: 0;
  text-wrap: pretty;
}

/* Guillemets ajoutés en CSS et non dans le texte : le contenu reste propre à
   copier, et une traduction future ne charrie pas la ponctuation française. */
.manifesto__quote blockquote::before { content: '« '; }
.manifesto__quote blockquote::after  { content: ' »'; }

.manifesto__quote figcaption {
  margin-top: 26px;
  display: flex; flex-direction: column; gap: 4px;
  align-items: center;
}

.manifesto__author {
  font-size: 14px; font-weight: 500; color: var(--color-text);
}

.manifesto__role {
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-overline);
}

.btn-primary {
  display: inline-block;
  background: var(--color-accent); color: var(--color-white);
  border: none; padding: 15px 32px;
  font-size: 12.5px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 500;
  transition: opacity 0.25s ease;
}

.btn-primary:hover { opacity: 0.85; }

/* ==========================================================================
   Featured Projects (Home)
   ========================================================================== */

.featured {
  width: var(--content-width); margin: 0 auto;
  padding: 0 0 clamp(80px, 11vw, 150px);
}

.featured__header {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  /* Filet retiré (lot 4a) : c'est l'espace qui sépare, plus le trait. */
  padding-bottom: 0; margin-bottom: clamp(44px, 5vw, 68px);
}

.featured__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3vw, 40px); color: var(--color-text); margin: 0;
}

.featured__link {
  background: none; border: none; padding: 0;
  font-size: 12.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-text);
}

.featured__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
}

/* Tablette : à trois colonnes les cartes tombent à ~215 px, trop serré. Deux
   colonnes, et la dernière prend toute la largeur quand elle resterait seule
   sur sa ligne — `:nth-child(even)` le détecte quel que soit le nombre de
   projets, la carte à la une occupant déjà une ligne entière. */
@media (min-width: 641px) and (max-width: 900px) {
  .featured__grid { grid-template-columns: repeat(2, 1fr); }

  .featured__grid .project-card:last-child:nth-child(even) {
    grid-column: 1 / -1;
  }

  /* Le rendu pose l'aspect en 4/3 par un style en ligne : à pleine largeur la
     photo dépasserait celle de la carte à la une, d'où le 16/9 forcé. */
  .featured__grid .project-card:last-child:nth-child(even) > div:first-child {
    aspect-ratio: 16 / 9 !important;
  }
}

/* ==========================================================================
   Notre insta (accueil)
   ========================================================================== */

.insta {
  width: var(--content-width); margin: 0 auto;
  padding: 0 0 clamp(72px, 9vw, 130px);
}

/* Carré : c'est la grille d'Instagram, et cela évite des hauteurs inégales
   sous « Projets à la une », où les tuiles sont déjà de formats variés. */
.insta__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.4vw, 20px);
}

.insta__tile {
  margin: 0; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--photo-placeholder);
}

.insta__tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s var(--ease-card), opacity 0.3s ease;
}

.insta__link { display: block; width: 100%; height: 100%; }
.insta__link:hover img { transform: scale(1.04); opacity: 0.92; }

@media (max-width: 640px) {
  .insta__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Project Card (shared between home + projects list)
   ========================================================================== */

.project-card {
  background: none; border: none; text-align: left;
  padding: 0; display: block;
  transition: transform 0.4s var(--ease-card);
}

.project-card:hover { transform: translateY(-6px); }

/* First featured card spans the full grid width so 4 projects fill the rows */
.project-card--wide { grid-column: 1 / -1; }
.project-card--wide .project-card__title { font-size: 30px; }

.project-card__image {
  width: 100%; height: auto; object-fit: cover;
}

.project-card__placeholder {
  background: var(--photo-placeholder);
  display: flex; align-items: flex-end; padding: 16px;
}

.project-card__placeholder--featured { aspect-ratio: 4/3; }

.project-card__caption {
  font-family: var(--font-label); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-label);
}

.project-card__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; color: var(--color-text); margin: 20px 0 6px;
}

.project-card__meta {
  font-size: 13px; letter-spacing: 0.04em;
  color: var(--color-muted); margin: 0; text-transform: uppercase;
}

/* ==========================================================================
   Projects List Page
   ========================================================================== */

.projects-header {
  width: var(--content-width); margin: 0 auto;
  padding: clamp(64px, 8vw, 120px) 0 clamp(32px, 4vw, 52px);
}

.projects-header__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 6vw, 82px);
  line-height: 1.04; letter-spacing: -0.03em;
  color: var(--color-text); margin: 0 0 24px; max-width: 14ch;
}

.projects-header__intro {
  font-size: clamp(16px, 1.15vw, 18px); line-height: 1.8;
  color: var(--color-body); font-weight: 300;
  max-width: 54ch; margin: 0;
}

.filter-bar {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: clamp(36px, 4vw, 52px);
}

/* Huit catégories tiennent sur deux rangées au large, mais en occuperaient
   cinq à six sur un téléphone — le premier écran de la page Projets ne
   montrerait plus que des boutons. En dessous de 640px la barre défile donc
   horizontalement sur une seule ligne, et déborde de la marge du contenu
   pour que le dernier bouton soit visiblement coupé : c'est ce qui indique
   qu'il y en a d'autres. */
@media (max-width: 640px) {
  .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-left: calc((100vw - var(--content-width)) / -2);
    margin-right: calc((100vw - var(--content-width)) / -2);
    padding: 2px calc((100vw - var(--content-width)) / 2);
  }

  .filter-bar::-webkit-scrollbar { display: none; }

  .filter-btn { flex: 0 0 auto; }
}

.filter-btn {
  padding: 10px 20px; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: transparent; color: #5a5854;
  border: 1px solid var(--color-input-rule);
  transition: all 0.25s ease;
}

.filter-btn--active {
  background: var(--color-accent); color: var(--color-white);
  border-color: var(--color-accent);
}

/* Mosaic grid */

.mosaic {
  width: var(--content-width); margin: 0 auto;
  padding: 0 0 clamp(80px, 11vw, 150px);
}

.mosaic__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
  gap: clamp(14px, 2vw, 30px);
}

.mosaic__tile { grid-column: span 1; }
.mosaic__tile--wide { grid-column: span 2; }

.mosaic__tile-inner {
  opacity: 0;
  animation: scCardIn 0.6s var(--ease-card) both;
}

.mosaic__tile-header {
  display: flex; align-items: baseline;
  justify-content: space-between; gap: 12px; margin-top: 20px;
}

.mosaic__tile-year {
  font-size: 12px; color: var(--color-faint);
}

.mosaic__tile-meta {
  font-size: 13px; letter-spacing: 0.04em;
  color: var(--color-muted); margin: 6px 0 0; text-transform: uppercase;
}

/* ==========================================================================
   Project Detail Page
   ========================================================================== */

.detail-hero {
  height: clamp(440px, 72vh, 780px);
  background: var(--photo-placeholder-detail);
  display: flex; align-items: flex-end;
  padding: clamp(20px, 5vw, 56px);
}

.detail-hero__image {
  width: 100%; height: 100%; object-fit: cover;
  position: absolute; top: 0; left: 0;
}

.detail-title-block {
  width: var(--reading-width-md); margin: 0 auto;
  text-align: center;
  padding: clamp(56px, 7vw, 100px) 0 clamp(36px, 4vw, 56px);
}

.detail-title-block__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(36px, 5.6vw, 76px);
  line-height: 1.05; color: var(--color-text); margin: 0; letter-spacing: -0.03em;
}

.detail-title-block__rule {
  width: 48px; height: 1px; background: var(--color-accent);
  margin: 34px auto 0;
}

.detail-intro {
  width: var(--reading-width-sm); margin: 0 auto;
  padding: 0 0 clamp(48px, 5vw, 72px);
}

.detail-intro__tagline {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(19px, 2vw, 24px); line-height: 1.6;
  color: var(--color-text); margin: 0 0 28px;
}

.detail-intro__text {
  font-size: clamp(16px, 1.15vw, 18px); line-height: 1.9;
  color: var(--color-body); font-weight: 300; margin: 0;
}

.spec-strip {
  width: var(--reading-width-spec); margin: 0 auto;
  padding: clamp(24px, 3vw, 40px) 0;
}

.spec-strip__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 28px;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  padding: 34px 0;
}

.spec-strip__value {
  font-family: var(--font-display); font-size: 20px;
  color: var(--color-text); margin-top: 10px;
}

/* Galerie en mosaïque : chaque photo à ses proportions réelles, jamais
   recadrée. Les galeries contiennent aussi des PLANS, parfois en 4:1 — dans
   l'ancien cadre 3/4 on n'en voyait qu'une tranche verticale illisible.

   Deux colonnes, et non trois comme la page projets : la galerie vit dans une
   largeur de lecture plus étroite, où trois colonnes donneraient des vignettes.
   Au-delà de 1,8:1 une image prend les deux colonnes — même seuil que partout
   ailleurs sur le site.

   La hauteur de chaque tuile est traduite en nombre de lignes de grille
   (`grid-row: span N`), calculé à partir des dimensions stockées en base.
   C'est ce qui produit la mosaïque tout en gardant l'ordre des photos, et ce
   qui évite que les vingt images se réajustent une à une au chargement. */
.detail-gallery {
  width: var(--content-width); margin: 0 auto;
  padding: clamp(40px, 5vw, 72px) 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 clamp(20px, 2.4vw, 32px);
  grid-auto-rows: 4px;
}

.detail-gallery__tile {
  min-width: 0; margin: 0 0 clamp(20px, 2.4vw, 32px);
  background: var(--photo-placeholder);
}

.detail-gallery__tile--wide { grid-column: span 2; }

.detail-gallery__tile img {
  width: 100%; height: auto; display: block;
  /* Un filet d'un pixel, à peine visible, qui délimite la photo. Sans lui,
     une image aux bords blancs — un intérieur clair, un plan sur fond blanc —
     se fond dans la page et semble flotter.

     `outline` et non `border` : une bordure ajouterait 2px à la hauteur de
     chaque tuile, et les hauteurs de la mosaïque sont calculées au pixel
     depuis les proportions de la photo. L'outline ne participe pas à la mise
     en page, et `outline-offset: -1px` la dessine à l'intérieur du bord. */
  outline: 1px solid var(--gallery-frame);
  outline-offset: -1px;
  transition: outline-color 0.3s ease;
}

/* Au survol, le même filet se renforce : la photo se détache sans que rien ne
   bouge ni ne s'agrandisse. Réservé aux pointeurs fins — sur tablette il n'y
   a pas de survol, et le filet permanent y suffit. */
@media (hover: hover) and (pointer: fine) {
  .detail-gallery__tile:hover img { outline-color: var(--gallery-frame-hover); }
}

/* Sans dimensions connues — une photo ajoutée avant le passage de
   measure-images.js — la tuile n'a pas de `span` calculé. On lui donne une
   hauteur plausible pour qu'elle ne se superpose pas aux suivantes ; l'image
   reprend ses vraies proportions dès qu'elle est chargée. */
.detail-gallery__tile:not([style*="grid-row"]) { grid-row: span 90; }

@media (max-width: 640px) {
  .detail-gallery { grid-template-columns: 1fr; }
  .detail-gallery__tile--wide { grid-column: span 1; }
}

/* Le gabarit d'attente, tant qu'aucune photo n'est chargée. */
.detail-gallery__tile .mono-label {
  display: flex; align-items: flex-end; height: 100%; padding: 18px;
}

.detail-quote {
  width: var(--reading-width-xs); margin: 0 auto;
  text-align: center;
  padding: clamp(48px, 6vw, 90px) 0;
}

.detail-quote blockquote {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(22px, 2.6vw, 32px); line-height: 1.5;
  color: var(--color-text); margin: 0;
}

.detail-next {
  width: var(--content-width); margin: 0 auto;
  border-top: 1px solid var(--color-rule);
  padding: clamp(40px, 5vw, 64px) 0 clamp(80px, 9vw, 120px);
}

.detail-next__link {
  background: none; border: none; text-align: left;
  padding: 0; display: flex; flex-direction: column; gap: 8px;
}

.detail-next__overline {
  font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--color-overline);
}

.detail-next__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3.4vw, 46px); color: var(--color-text);
}

/* ==========================================================================
   Studio Page
   ========================================================================== */

.studio-header {
  width: var(--content-width); margin: 0 auto;
  padding: clamp(64px, 8vw, 120px) 0 clamp(40px, 5vw, 64px);
}

.studio-header__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 6vw, 82px);
  line-height: 1.04; letter-spacing: -0.03em;
  color: var(--color-text); margin: 0; max-width: 16ch;
}

.studio-intro {
  width: var(--content-width); margin: 0 auto;
  padding: 0 0 clamp(56px, 6vw, 90px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 72px); align-items: start;
}

.studio-intro__lead {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.55; color: var(--color-text); margin: 0;
}

.studio-intro__body p {
  font-size: clamp(16px, 1.15vw, 18px); line-height: 1.9;
  color: var(--color-body); font-weight: 300; margin: 0 0 18px;
}

.studio-intro__body p:last-child { margin-bottom: 0; }

.approach {
  background: var(--color-bg-alt);
}

.approach--white {
  background: var(--color-bg);
}

.approach__inner {
  width: var(--content-width); margin: 0 auto;
  padding: clamp(64px, 8vw, 110px) 0;
}

.approach__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3vw, 40px); color: var(--color-text);
  margin: 0 0 clamp(36px, 4vw, 56px);
}

.approach__intro {
  font-size: clamp(16px, 1.15vw, 18px); line-height: 1.9;
  color: var(--color-body); font-weight: 300;
  max-width: 68ch;
  margin: calc(-1 * clamp(18px, 2vw, 28px)) 0 clamp(36px, 4vw, 56px);
}

.approach__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(28px, 4vw, 56px);
}

/* six phases read best as two rows of three */
.approach__grid--phases {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  row-gap: clamp(36px, 4.5vw, 64px);
}

.approach__note {
  margin-top: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--color-input-rule);
  padding-top: clamp(28px, 3.5vw, 44px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}

.approach__note-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--color-text); margin: 0;
}

.approach__note-text {
  font-size: 15.5px; line-height: 1.85;
  color: var(--color-body); font-weight: 300; margin: 0;
}

.approach__note-text a {
  color: var(--color-text);
  text-decoration: underline; text-underline-offset: 3px;
}

.approach__step {
  border-top: 1px solid var(--color-input-rule);
  padding-top: 24px;
}

.approach__step-number {
  font-family: var(--font-display); font-size: 30px;
  color: var(--color-accent); margin-bottom: 14px;
}

.approach__step-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 21px; color: var(--color-text); margin: 0 0 12px;
}

.approach__step-text {
  font-size: 15px; line-height: 1.8;
  color: var(--color-body); font-weight: 300; margin: 0;
}

.team {
  width: var(--content-width); margin: 0 auto;
  padding: clamp(64px, 8vw, 110px) 0 clamp(80px, 9vw, 130px);
}

.team__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3vw, 40px); color: var(--color-text);
  margin: 0 0 clamp(36px, 4vw, 56px);
}

.team__row-label {
  font-family: var(--font-label); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-label);
  margin-bottom: 22px;
}

.team__row-label--spaced {
  margin-top: clamp(44px, 5vw, 72px);
}

.team__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(24px, 3vw, 44px);
}

/* the two partners get a slightly larger, capped column */
.team__grid--partners {
  grid-template-columns: repeat(auto-fit, minmax(220px, 400px));
}

.team__member-btn {
  display: block; width: 100%; padding: 0;
  border: none; background: none; text-align: left;
  cursor: pointer;
}

.team__member-btn:focus-visible {
  outline: 2px solid var(--color-text); outline-offset: 3px;
}

.team__member-btn .team__member-photo {
  transition: opacity 0.25s ease;
}

.team__member-btn:hover .team__member-photo { opacity: 0.85; }

.team__member-photo {
  aspect-ratio: 1/1; background: var(--photo-placeholder);
  display: flex; align-items: flex-end; padding: 14px; overflow: hidden;
}

/* A portrait fills the square; the padding above only frames the placeholder */
.team__member-photo:has(img) { padding: 0; }

.team__member-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.team__member-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 19px; color: var(--color-text); margin: 18px 0 4px;
}

.team__member-role {
  font-size: 13px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--color-muted); margin: 0;
}

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

.contact-header {
  width: var(--content-width); margin: 0 auto;
  padding: clamp(64px, 8vw, 120px) 0 clamp(40px, 5vw, 64px);
}

.contact-header__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 6vw, 82px);
  line-height: 1.04; letter-spacing: -0.03em;
  color: var(--color-text); margin: 0; max-width: 16ch;
}

.contact-content {
  width: var(--content-width); margin: 0 auto;
  padding: 0 0 clamp(56px, 6vw, 90px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(40px, 6vw, 90px); align-items: start;
}

.contact-info { display: flex; flex-direction: column; gap: 34px; }

.contact-info__block-label {
  font-family: var(--font-label); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-label); margin-bottom: 10px;
}

.contact-info__block-value {
  font-size: 17px; line-height: 1.7;
  color: var(--color-text); margin: 0; font-weight: 300;
}

.contact-cta {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 26px;
}

.contact-cta__text {
  font-size: 17px; line-height: 1.7;
  color: var(--color-text); margin: 0;
  font-weight: 300; max-width: 44ch;
}

.contact-info__block-value a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--color-input-rule);
  transition: border-color 0.25s ease;
}

.contact-info__block-value a:hover {
  border-bottom-color: var(--color-text);
}

.contact-map {
  width: var(--content-width); margin: 0 auto;
  padding: 0 0 clamp(80px, 9vw, 130px);
}

.contact-map__link {
  position: relative; display: block;
  aspect-ratio: 21/8;
  background: var(--color-bg-alt);
  overflow: hidden;
}

/* the iframe is display-only: every click/tap falls through to the
   directions link, and the page never gets scroll-trapped in the map */
.contact-map__frame {
  width: 100%; height: 100%; border: 0;
  pointer-events: none; display: block;
  filter: grayscale(0.85) contrast(1.02);
  transition: filter 0.35s ease;
}

.contact-map__link:hover .contact-map__frame {
  filter: grayscale(0.3);
}

.contact-map__cta {
  position: absolute; right: 18px; bottom: 18px;
  background: var(--color-text); color: var(--color-white);
  font-family: var(--font-label); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 12px 18px;
  display: inline-flex; align-items: center; gap: 8px;
}

.contact-map__cta-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}

.contact-map__link:hover .contact-map__cta-arrow {
  transform: translateX(4px);
}

@media (max-width: 640px) {
  .contact-map__link { aspect-ratio: 4/3; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Filet retiré (lot 4a). Le pied de page n'ayant pas de fond propre, c'est
   désormais le blanc qui le détache — d'où le retrait généreux ci-dessous.
   Sans cette compensation, le pied viendrait coller au contenu. */
.site-footer {
  background: var(--color-bg);
}

.site-footer__grid {
  width: var(--content-width); margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 40px; padding: clamp(96px, 11vw, 160px) 0 36px;
}

.site-footer__logo { display: block; width: 92px; height: auto; }

.site-footer__column {
  display: flex; flex-direction: column; gap: 12px;
}

.site-footer__column-title {
  font-family: var(--font-label); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-label); margin-bottom: 4px;
}

.site-footer__column a,
.site-footer__column span {
  font-size: 14px; color: var(--color-body);
}

.site-footer__column a:hover { color: var(--color-text); }

.site-footer__bottom {
  width: var(--content-width); margin: 0 auto;
  /* Filet retiré (lot 4a) : l'écart tient lieu de séparation. */
  padding: 44px 0 22px;
  display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  font-size: 12px; color: var(--color-overline); letter-spacing: 0.04em;
}

.site-footer__bottom a {
  color: inherit; text-decoration: none;
  transition: color 0.25s ease;
}

.site-footer__bottom a:hover { color: var(--color-text); }

/* ==========================================================================
   Skeleton loaders
   ========================================================================== */

.skeleton {
  background: linear-gradient(90deg, var(--color-bg-alt) 25%, #eee 50%, var(--color-bg-alt) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
}

.skeleton--card { height: 360px; }

/* ==========================================================================
   Loading / empty / error states for projects
   ========================================================================== */

.projects-message {
  text-align: center;
  padding: clamp(48px, 6vw, 90px) 0;
  color: var(--color-muted);
  font-size: clamp(16px, 1.15vw, 18px);
  font-weight: 300;
}

.projects-error {
  text-align: center;
  padding: clamp(48px, 6vw, 90px) 0;
  color: #c0392b;
}

/* ==========================================================================
   Responsive — mobile adjustments
   ========================================================================== */

@media (max-width: 640px) {
  .site-nav {
    display: none; position: absolute;
    top: 72px; left: 0; right: 0;
    flex-direction: column; background: var(--color-bg);
    border-bottom: 1px solid var(--color-rule);
    padding: 20px clamp(20px, 5vw, 40px); gap: 16px;
  }

  .site-nav--open { display: flex; }

  .site-nav__toggle { display: flex; }

  .mosaic__grid { grid-template-columns: 1fr; }
  .mosaic__tile--wide { grid-column: span 1; }

  .featured__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Lightbox
   ========================================================================== */

[data-lightbox-group] img { cursor: zoom-in; }

.lightbox {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(255, 255, 255, 0.98);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox--open { opacity: 1; pointer-events: auto; }

.lightbox__figure {
  margin: 0; max-width: min(1600px, 92vw); max-height: 86vh;
  display: flex; align-items: center; justify-content: center;
}

.lightbox__img {
  max-width: min(1600px, 92vw); max-height: 86vh;
  object-fit: contain; display: block;
  opacity: 0; transform: scale(0.985);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.lightbox__img--loaded { opacity: 1; transform: none; }

/* Fond blanc : les commandes passent donc en encre sombre. Elles gardent la
   même hiérarchie qu'auparavant — la fermeture et le compteur en retrait, les
   flèches un peu plus présentes, tout au contact plein au survol. */
.lightbox__close {
  position: absolute; top: 18px; right: clamp(18px, 3vw, 36px);
  background: none; border: none; color: rgba(28, 28, 28, 0.55);
  font-size: 34px; line-height: 1; padding: 8px;
  transition: color 0.25s ease;
}

.lightbox__close:hover { color: var(--color-text); }

.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: 1px solid var(--color-input-rule);
  color: rgba(28, 28, 28, 0.75);
  width: 52px; height: 52px;
  font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.lightbox__nav:hover { border-color: var(--color-text); color: var(--color-text); }
.lightbox__nav--prev { left: clamp(14px, 3vw, 36px); }
.lightbox__nav--next { right: clamp(14px, 3vw, 36px); }

.lightbox__counter {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  color: var(--color-muted);
}

@media (max-width: 640px) {
  .lightbox__nav { width: 42px; height: 42px; }
}

/* Bio variant: same dark overlay, text content instead of a photo */
.lightbox--bio { overflow-y: auto; }

.bio {
  width: min(680px, 88vw);
  max-height: 84vh; overflow-y: auto;
  padding: 24px 4px;
}

.bio__role {
  font-family: var(--font-label); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); margin-bottom: 14px;
}

.bio__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 4vw, 40px); line-height: 1.1;
  color: var(--color-white); margin: 0 0 26px;
}

.bio__rule {
  width: 48px; height: 1px;
  background: rgba(255,255,255,0.5); margin-bottom: 36px;
}

.bio__timeline {
  display: flex; flex-direction: column; gap: 18px; margin: 0;
}

.bio__row {
  display: grid; grid-template-columns: 110px 1fr; gap: 20px;
}

.bio__row dt {
  font-family: var(--font-label); font-size: 12px;
  letter-spacing: 0.08em; color: rgba(255,255,255,0.55);
  padding-top: 3px;
}

.bio__row dd {
  margin: 0; font-size: 15.5px; font-weight: 300;
  line-height: 1.65; color: rgba(255,255,255,0.92);
}

@media (max-width: 560px) {
  .bio__row { grid-template-columns: 82px 1fr; gap: 14px; }
}

/* ==========================================================================
   Admin Styles
   ========================================================================== */

.admin-login {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg-alt);
}

.login-card {
  width: 100%; max-width: 400px;
  background: var(--color-bg);
  padding: clamp(32px, 5vw, 48px);
  border: 1px solid var(--color-rule);
}

.login-card__logo {
  display: block; margin: 0 auto 18px;
}

.login-card__title {
  font-family: var(--font-display); font-size: 24px;
  font-weight: 700; color: var(--color-text);
  text-align: center; margin-bottom: 32px;
}

.form-group { margin-bottom: 20px; }

.form-group label {
  display: block; font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-muted); margin-bottom: 8px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%; padding: 12px 0;
  border: none; border-bottom: 1px solid var(--color-input-rule);
  background: transparent;
  font-size: 16px; color: var(--color-text);
  outline: none; transition: border-color 0.25s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  border-bottom-color: var(--color-text);
}

.form-group input[type="file"] {
  border: 1px solid var(--color-rule);
  padding: 10px; font-size: 14px;
}

.form-group input[type="number"] {
  max-width: 120px;
}

.form-group textarea { min-height: 100px; resize: vertical; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; font-weight: 500; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: all 0.25s ease;
}

.btn--primary {
  background: var(--color-accent); color: var(--color-white);
  border: none; padding: 14px 28px; width: 100%;
}

.btn--primary:hover { opacity: 0.85; }

.btn--danger {
  background: #c0392b; color: var(--color-white);
  border: none; padding: 8px 16px;
}

.btn--danger:hover { opacity: 0.85; }

.btn--outline {
  border: 1px solid var(--color-input-rule);
  color: var(--color-text); background: transparent;
  padding: 8px 16px;
}

.btn--outline:hover {
  border-color: var(--color-text);
}

.btn--sm { padding: 6px 12px; font-size: 11px; }

.alert {
  padding: 14px; font-size: 14px; margin-bottom: 20px;
  display: none; border: 1px solid;
}

.alert--error {
  background: rgba(192, 57, 43, 0.06);
  color: #c0392b; border-color: rgba(192, 57, 43, 0.15);
}

.alert--success {
  background: rgba(39, 174, 96, 0.06);
  color: #27ae60; border-color: rgba(39, 174, 96, 0.15);
}

/* Admin Dashboard */

.admin-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: 100vh;
}

.admin-sidebar {
  background: var(--color-text);
  color: var(--color-white);
  padding: 28px 24px;
  display: flex; flex-direction: column;
}

.admin-sidebar__logo {
  font-family: var(--font-display); font-size: 20px;
  font-weight: 700; margin-bottom: 48px;
  padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; gap: 10px;
}

.admin-sidebar__nav {
  flex: 1; display: flex; flex-direction: column; gap: 6px;
}

.admin-sidebar__link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; color: rgba(255,255,255,0.6);
  font-size: 14px; transition: all 0.2s ease;
  text-decoration: none;
}

.admin-sidebar__link:hover,
.admin-sidebar__link--active {
  background: rgba(255,255,255,0.08);
  color: var(--color-white);
}

.admin-sidebar__logout {
  margin-top: auto;
  padding: 10px 14px; color: rgba(255,255,255,0.6);
  font-size: 14px; text-align: left;
  background: none; border: none;
  transition: all 0.2s ease;
}

.admin-sidebar__logout:hover {
  background: rgba(192, 57, 43, 0.15);
  color: #e74c3c;
}

.admin-main {
  padding: 32px;
  background: var(--color-bg-alt);
  overflow-y: auto;
}

.admin-main__header {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.admin-main__title {
  font-family: var(--font-display); font-size: 24px;
  font-weight: 700; color: var(--color-text);
}

/* Admin Table */

.admin-table-wrapper {
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  overflow-x: auto;
}

.admin-table { width: 100%; border-collapse: collapse; }

.admin-table th,
.admin-table td {
  padding: 14px 16px; text-align: left;
  border-bottom: 1px solid var(--color-rule);
  font-size: 14px;
}

.admin-table th {
  font-weight: 500; color: var(--color-muted);
  background: var(--color-bg-alt);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}

.admin-table__thumb {
  width: 48px; height: 48px; object-fit: cover;
  background: var(--color-bg-alt);
}

.admin-table__actions { display: flex; gap: 8px; }

/* Cover picker */

.cover-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.cover-picker:empty { display: none; }

.cover-picker__thumb {
  position: relative;
  aspect-ratio: 1/1;
  padding: 0; border: 2px solid transparent;
  background: var(--color-bg-alt);
  cursor: grab;
  overflow: hidden;
  /* touch: quick swipes scroll the modal, long-press lifts for reorder */
  touch-action: pan-y;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.cover-picker__thumb:active { cursor: grabbing; }

.cover-picker__thumb--dragging { opacity: 0.35; }

.cover-picker__pos {
  position: absolute; top: 3px; left: 3px; z-index: 1;
  min-width: 17px; padding: 1px 4px;
  background: rgba(28,28,28,0.78); color: var(--color-white);
  font-family: var(--font-code); font-size: 10px;
  text-align: center; pointer-events: none;
}

.cover-picker__remove {
  position: absolute; top: 3px; right: 3px; z-index: 2;
  width: 18px; height: 18px; line-height: 16px;
  background: rgba(28,28,28,0.78); color: var(--color-white);
  font-size: 14px; text-align: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.cover-picker__remove:hover { background: #c0392b; }

.cover-picker__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.cover-picker__thumb:hover { border-color: var(--color-input-rule); }

.cover-picker__thumb--selected { border-color: var(--color-text); }

.cover-picker__thumb--selected::after {
  content: 'Couverture';
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--color-text); color: var(--color-white);
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  text-align: center; padding: 2px 0;
}

/* Publish screen */

.publish-card {
  background: var(--color-white);
  border: 1px solid var(--color-input-rule);
  padding: clamp(24px, 3vw, 36px);
  max-width: 70ch;
}

.publish-card__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; color: var(--color-text); margin: 0 0 16px;
}

.publish-card__text {
  font-size: 14px; line-height: 1.65;
  color: var(--color-muted); margin: 0 0 16px;
}

.publish-card__status {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--color-input-rule);
  font-size: 13px; color: var(--color-muted);
}

.publish-log {
  margin-top: 20px; padding: 16px; max-width: 70ch;
  max-height: 320px; overflow: auto;
  background: var(--color-text); color: var(--color-white);
  font-family: var(--font-code); font-size: 12px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}

/* Portrait cropper — the square that will actually be saved */

.cropper { margin-bottom: 12px; }

.cropper__frame {
  position: relative;
  width: 260px; max-width: 100%; aspect-ratio: 1/1;
  overflow: hidden;
  border: 1px solid var(--color-input-rule);
  background: var(--photo-placeholder);
  cursor: grab;
  touch-action: none; /* le glissement cadre, il ne fait pas défiler la modale */
}

.cropper__frame--dragging { cursor: grabbing; }

.cropper__image {
  position: absolute; top: 0; left: 0;
  transform-origin: 0 0;
  max-width: none; /* ne pas subir une contrainte de largeur globale */
  user-select: none; -webkit-user-drag: none;
}

.cropper__controls {
  display: flex; align-items: center; gap: 12px;
  width: 260px; max-width: 100%; margin-top: 10px;
}

.cropper__zoom-label {
  font-family: var(--font-code); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-muted); margin: 0;
}

.cropper__zoom { flex: 1; margin: 0; }

.cropper__hint {
  font-size: 12px; line-height: 1.5;
  color: var(--color-muted); margin: 8px 0 0; max-width: 46ch;
}

/* Portrait picked on the team screen — square, like the site shows it */

.photo-preview {
  position: relative; width: 120px; aspect-ratio: 1/1;
  margin-bottom: 12px; overflow: hidden;
  border: 1px solid var(--color-input-rule);
}

.photo-preview:empty { display: none; }

.photo-preview img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.photo-preview__remove {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; padding: 0;
  border: none; border-radius: 50%;
  background: var(--color-text); color: var(--color-white);
  font-size: 14px; line-height: 1; text-align: center;
  cursor: pointer; transition: background 0.2s ease;
}

.photo-preview__remove:hover { background: #c0392b; }

/* Toggle */

.toggle { position: relative; width: 40px; height: 22px; }
.toggle input { opacity: 0; width: 0; height: 0; }

.toggle__slider {
  position: absolute; inset: 0;
  background: var(--color-input-rule); cursor: pointer;
  transition: background 0.2s ease;
}

.toggle__slider::before {
  content: ''; position: absolute;
  width: 16px; height: 16px; left: 3px; bottom: 3px;
  background: white; transition: transform 0.2s ease;
}

.toggle input:checked + .toggle__slider { background: #27ae60; }
.toggle input:checked + .toggle__slider::before { transform: translateX(18px); }

/* Modal */

.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}

.modal-overlay--open { opacity: 1; pointer-events: auto; }

.modal {
  background: var(--color-bg);
  padding: 36px; width: 100%; max-width: 600px;
  max-height: 90vh; overflow-y: auto;
  border: 1px solid var(--color-rule);
  transform: translateY(16px); transition: transform 0.25s ease;
}

.modal-overlay--open .modal { transform: translateY(0); }

.modal__header {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 28px;
}

.modal__title {
  font-family: var(--font-display); font-size: 20px;
  font-weight: 700; color: var(--color-text);
}

.modal__close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-muted); font-size: 24px;
  background: none; border: none;
  transition: color 0.2s ease;
}

.modal__close:hover { color: var(--color-text); }

.modal__actions {
  display: flex; gap: 12px;
  justify-content: flex-end; margin-top: 28px;
}

@media (max-width: 767px) {
  .admin-layout { grid-template-columns: 1fr; }

  .admin-sidebar {
    position: fixed; left: -250px; top: 0; bottom: 0;
    width: 250px; z-index: 1000;
    transition: left 0.25s ease;
  }

  .admin-sidebar--open { left: 0; }
}