/* ============================================
   CARYATIDES ARCHITECTURE — v5
   Fond blanc, lettres Baskerville, mur de pierre
   ============================================ */

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

:root {
  --color-bg: #FFFFFF;
  --color-bg-stone: #FAFAF7;
  --color-text: #1A1A1A;
  --color-text-light: #1A1A1A;
  --color-accent: #3D3A36;
  --color-line: rgba(26, 26, 26, 0.1);

  --font-serif: 'Baskerville', 'Libre Baskerville', Georgia, serif;
  --font-sans: 'Baskerville', 'Libre Baskerville', Georgia, serif;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

html {
  font-size: 15px; /* 16px × 0.75 × 1.25 — tous les rem suivent */
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  overflow-x: hidden; /* fix iOS Safari : sans ça, overflow-x:hidden sur body bloque le scroll vertical */
}

body {
  font-family: var(--font-sans);
  background: var(--color-bg-stone);
  color: var(--color-text);
  overflow-x: hidden;
  overscroll-behavior: none;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Ccircle cx='5' cy='5' r='4' fill='%231A1A1A'/%3E%3C/svg%3E") 5 5, auto;
}

a { color: inherit; text-decoration: none; }

/* ============================================
   LANDING — fond blanc pur
   ============================================ */

.landing {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  overflow: hidden;
}

.landing.hidden { display: none; }

/* ============================================
   TABLEAU D'ARCHIVES — parallaxe par couches
   ============================================ */

.parallax-wall {
  position: fixed;
  inset: 0;
  z-index: 101;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
}

.parallax-wall.active { opacity: 1; }

.parallax-layer {
  position: absolute;
  top: -3%;
  left: -4%;
  width: 108%;
  height: 106%;
  background-size: cover;
  background-position: center;
  transform: translateY(110%);
  transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.parallax-layer.revealed {
  transform: translateY(0);
}

/* Le tableau devient le fond de la page projets */
.parallax-wall.background {
  z-index: 0;
}

/* Légende discrète centrée en bas */
.parallax-legend {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.75rem;
  font-weight: 400;
  text-align: center;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 1.2s ease 0.6s;
}

.parallax-wall.active .parallax-legend {
  opacity: 1;
}

.parallax-legend.light {
  color: #FFFFFF;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.parallax-legend.dark {
  color: #1A1A1A;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.3);
}

/* ============================================
   LOGO ASSEMBLY
   Icône seule → hover : lettres apparaissent une par une
   ============================================ */

.logo-assembly {
  position: relative;
  left: 0;
  z-index: 5;
  display: flex;
  align-items: center;
}

.logo-icon {
  height: 155px;
  width: auto;
  position: relative;
  z-index: 2;
}

/* Bloc texte : même hauteur que l'icône, aligné haut/bas */
.logo-text-block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 0.5rem;
  height: 155px;
  overflow: hidden;
}

.logo-text-line {
  display: flex;
  white-space: nowrap;
}

.logo-text-top {
  font-family: var(--font-serif);
  font-size: 4rem; /* recalculé par JS */
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}

.logo-text-bottom {
  font-family: var(--font-serif);
  font-size: 3rem; /* recalculé par JS */
  font-weight: 400;
  line-height: 1;
  justify-content: space-between;
}

/* Chaque lettre : cachée par défaut, apparaît au hover */
.letter {
  display: inline-block;
  opacity: 0;
  transform: translateX(15px);
  transition: opacity 0.35s var(--ease-out-expo), transform 0.35s var(--ease-out-expo);
}

.logo-assembly:hover .letter {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger delays — ligne du haut (CARYATIDES) */
.logo-text-top .letter:nth-child(1)  { transition-delay: 0.03s; }
.logo-text-top .letter:nth-child(2)  { transition-delay: 0.06s; }
.logo-text-top .letter:nth-child(3)  { transition-delay: 0.09s; }
.logo-text-top .letter:nth-child(4)  { transition-delay: 0.12s; }
.logo-text-top .letter:nth-child(5)  { transition-delay: 0.15s; }
.logo-text-top .letter:nth-child(6)  { transition-delay: 0.18s; }
.logo-text-top .letter:nth-child(7)  { transition-delay: 0.21s; }
.logo-text-top .letter:nth-child(8)  { transition-delay: 0.24s; }
.logo-text-top .letter:nth-child(9)  { transition-delay: 0.27s; }
.logo-text-top .letter:nth-child(10) { transition-delay: 0.30s; }

/* Stagger delays — ligne du bas (ARCHITECTURE) */
.logo-text-bottom .letter:nth-child(1)  { transition-delay: 0.06s; }
.logo-text-bottom .letter:nth-child(2)  { transition-delay: 0.09s; }
.logo-text-bottom .letter:nth-child(3)  { transition-delay: 0.12s; }
.logo-text-bottom .letter:nth-child(4)  { transition-delay: 0.15s; }
.logo-text-bottom .letter:nth-child(5)  { transition-delay: 0.18s; }
.logo-text-bottom .letter:nth-child(6)  { transition-delay: 0.21s; }
.logo-text-bottom .letter:nth-child(7)  { transition-delay: 0.24s; }
.logo-text-bottom .letter:nth-child(8)  { transition-delay: 0.27s; }
.logo-text-bottom .letter:nth-child(9)  { transition-delay: 0.30s; }
.logo-text-bottom .letter:nth-child(10) { transition-delay: 0.33s; }
.logo-text-bottom .letter:nth-child(11) { transition-delay: 0.36s; }
.logo-text-bottom .letter:nth-child(12) { transition-delay: 0.39s; }

/* ============================================
   PLAN DU SITE
   ============================================ */

.landing.behind-wall {
  z-index: -1;
  pointer-events: none;
}

.site-map {
  position: fixed;
  inset: 0;
  z-index: 102;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s var(--ease-in-out);
}

.site-map.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Nav positionnée par JS sous l'icône, alignée à gauche */
.site-nav {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding-bottom: 0.3rem;
}

.site-nav-link {
  font-family: var(--font-serif);
  font-size: 1.392rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  color: var(--color-text);
  text-decoration: none;
  padding: 0.15em 0.6em;
  margin-left: -15px;
  position: relative;
  z-index: 1;
  transition: color 0.3s var(--ease-out-expo);
}

/* Bande blanche derrière le lien — collée aux lettres, pleine largeur */
.site-nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50vw;
  width: 200vw;
  background: var(--color-bg);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out-expo);
  z-index: -1;
  pointer-events: none;
}

.site-nav-link:hover::before,
.site-nav-link.active::before {
  opacity: 1;
}

/* Mode sticky : menu figé en haut, le vrai mur de pierre reste derrière */
.site-nav.sticky {
  padding-top: 0.4rem;
}

/* Ligne colorée à la jonction pierre / page blanche */
.site-nav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -50vw;
  width: 200vw;
  height: 1.5px;
  background: var(--active-color, transparent);
}

/* Hover + active — couleurs vives */
.site-nav-link:nth-child(1):hover,
.site-nav-link:nth-child(1).active { color: #F94EFA; }
.site-nav-link:nth-child(2):hover,
.site-nav-link:nth-child(2).active { color: #FA7622; }
.site-nav-link:nth-child(3):hover,
.site-nav-link:nth-child(3).active { color: #BA4AFA; }
.site-nav-link:nth-child(4):hover,
.site-nav-link:nth-child(4).active { color: #BA4AFA; }
.site-nav-link:nth-child(5):hover,
.site-nav-link:nth-child(5).active { color: #FA7622; }


/* Icône flottante — même position que la landing */
.logo-icon-floating {
  position: fixed;
  z-index: 201;
  pointer-events: none;
}


/* ============================================
   PAGE REVEAL — blanc depuis le texte
   ============================================ */

.page-reveal {
  background: var(--color-bg);
  overflow-x: hidden;
}

.page-content {
  padding: 4rem 8vw 12rem;
}

/* ============================================
   PAGE PROJETS
   ============================================ */

.projets-page {
  padding: 15px 8vw 12rem var(--footer-align, 8vw);
}

/* Grille 2 colonnes projets : liste à gauche | détail à droite */
.projets-grid {
  display: grid;
  grid-template-columns: var(--footer-align, 8vw) 1fr;
  margin-left: calc(-1 * var(--footer-align, 8vw));
  align-items: start;
  min-height: 50vh;
}

/* Colonne gauche : liste compacte — déborde sur la galerie */
.projets-list-col {
  justify-self: start;
  width: clamp(240px, calc(18vw + 60px), 320px);
  padding-left: 8px;
  padding-right: 1.5rem;
  position: relative;
  z-index: 2;
  background: var(--color-bg);
}

.projets-list-item {
  border-bottom: 1px solid var(--color-line);
}

.projets-list-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0;
  color: var(--color-text);
}

.projets-list-pastille {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: transparent;
  border: none;
  transition: background 0.25s;
}

.projets-list-item.open .projets-list-pastille {
  background: var(--active-color, #E05A4E);
}

.projets-list-nom-header {
  font-family: var(--font-serif);
  font-size: clamp(0.8rem, 1.1vw, 0.95rem);
  font-weight: 400;
  line-height: 1.25;
  flex: 1;
}

.projets-list-lieu {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: clamp(0.525rem, 0.675vw, 0.6rem);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  margin-left: auto;
}

/* Toggle + et texte dépliable alignés avec les titres */
.projets-list-col > .projet-desc-toggle {
  margin-left: calc(9px + 0.5rem);
}

.projets-list-col > .projet-desc-expand {
  margin-left: calc(9px + 0.5rem);
}


/* Colonne droite : détail du projet */
.projets-detail-col {
  margin-right: -8vw;
}

.projets-detail-panel {
  animation: fadeInPanel 0.4s var(--ease-out-expo);
}

@keyframes fadeInPanel {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}


/* Galerie photo projet — pleine largeur */
.projet-gallery {
  width: 100%;
}

.projet-gallery-viewport {
  position: relative;
  width: 100%;
  height: 70vh;
  background: #FFFFFF;
  overflow: hidden;
}

.projet-gallery-img {
  width: 100%;
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 2.2rem;
  padding-right: 2.2rem;
  box-sizing: border-box;
}

.projet-gallery-photo {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  display: block;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.projet-gallery-placeholder {
  font-family: var(--font-sans);
  font-size: clamp(0.8rem, 1vw, 0.92rem);
  color: var(--color-text-light);
}

.projet-gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 26px;
  height: 26px;
  border-right: 1.5px solid #000000;
  border-bottom: 1.5px solid #000000;
  opacity: 0.75;
  transition: opacity 0.25s ease, border-color 0.25s ease;
  user-select: none;
  font-size: 0;
}

.projet-gallery-arrow:hover {
  opacity: 0.85;
  border-color: var(--active-color, #E05A4E);
}

.projet-gallery-arrow.prev {
  left: 16px;
  transform: translateY(-50%) rotate(135deg);
}

.projet-gallery-arrow.next {
  right: 24px;
  transform: translateY(-50%) rotate(-45deg);
}


.projet-gallery-counter {
  font-family: var(--font-sans);
  font-size: clamp(0.58rem, 0.7vw, 0.65rem);
  color: var(--color-text-light);
  flex-shrink: 0;
}

.projet-gallery-caption-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.6rem 1rem;
  background: none;
  text-align: center;
  z-index: 2;
}

.projet-gallery-caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(0.65rem, 0.85vw, 0.78rem);
  color: var(--color-text);
  line-height: 1.4;
}

/* Légende diagnostic des pathologies */
.projet-gallery-diag-legend {
  padding: 0.4rem 0 0;
}
.projet-gallery-diag-legend-img {
  max-height: 22.5vh;
  width: auto;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

/* Toggle description sous la galerie */
.projet-desc-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--active-color, #E05A4E);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  margin-top: 0.8rem;
  padding-bottom: 1px;
  transition: background 0.25s ease, color 0.25s ease;
  user-select: none;
  border: 1.5px solid var(--active-color, #E05A4E);
}

.projet-desc-toggle:hover {
  opacity: 0.85;
}

.projet-desc-toggle.is-open {
  background: transparent;
  color: var(--active-color, #E05A4E);
}

.projet-desc-expand {
  margin-top: 0.8rem;
  animation: fadeInPanel 0.35s var(--ease-out-expo);
}

.projet-detail {
  padding-top: 1rem;
}


/* Infos techniques */
.projet-infos {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.8rem;
}

.projet-info-group {
  font-family: var(--font-sans);
  font-size: clamp(0.75rem, 1vw, 0.88rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-text);
}

.projet-info-label {
  font-weight: 400;
  color: var(--color-text);
}

.projet-info-sub {
  padding-left: 0.6rem;
  display: block;
}

.projet-info-sub::before {
  content: '–  ';
  color: var(--color-text-light);
}

.projet-desc {
  font-family: var(--font-sans);
  font-size: clamp(0.8rem, 1.1vw, 0.95rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-text);
  max-width: 38rem;
  margin-bottom: 2rem;
}

/* Carrousel photo — pleine largeur */
.projet-carousel {
  position: relative;
  width: 100%;
  user-select: none;
}

.projet-carousel-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--color-bg-stone);
  border: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.projet-carousel-placeholder {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 300;
  color: rgba(26, 26, 26, 0.15);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Flèches — angle droit tourné à 45° */
.projet-carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 14px;
  height: 14px;
  border-right: 1.5px solid var(--color-text-light);
  border-bottom: 1.5px solid var(--color-text-light);
  opacity: 0.4;
  transition: opacity 0.25s, transform 0.25s var(--ease-out-expo),
              filter 0.25s;
}

.projet-carousel-arrow:hover {
  opacity: 1;
  filter: drop-shadow(0 1px 4px rgba(26, 26, 26, 0.25));
  border-color: var(--carousel-color, #FA7622);
}

.projet-carousel-arrow.prev {
  left: 14px;
  transform: translateY(-50%) rotate(135deg);
}

.projet-carousel-arrow.prev:hover {
  transform: translateY(-50%) rotate(135deg) scale(1.15);
}

.projet-carousel-arrow.next {
  right: 14px;
  transform: translateY(-50%) rotate(-45deg);
}

.projet-carousel-arrow.next:hover {
  transform: translateY(-50%) rotate(-45deg) scale(1.15);
}

/* Compteur */
.projet-carousel-counter {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 300;
  color: var(--color-text);
  margin-top: 0.5rem;
  letter-spacing: 0.04em;
}

.projet-caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(0.65rem, 0.9vw, 0.78rem);
  color: var(--color-text);
  margin-top: 0.25rem;
  line-height: 1.4;
}

/* ============================================
   PAGE AGENCE
   ============================================ */

.agence-page {
  padding: 3rem 8vw 12rem var(--footer-align, 8vw);
}

.agence-textes {
  max-width: min(calc(28vw + 60px), 420px);
}

.agence-text {
  font-family: var(--font-sans);
  font-size: clamp(0.85rem, 1.1vw, 0.95rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 1.4rem;
}

/* Citation */
.agence-citation {
  font-family: var(--font-serif);
  font-size: clamp(0.75rem, 1vw, 0.88rem);
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-text);
  margin-bottom: 5rem;
}


.agence-citation p {
  margin-bottom: 0.6rem;
}

.agence-citation-author {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(0.65rem, 0.85vw, 0.78rem);
  color: var(--color-text);
  margin-top: 0.15rem;
}


/* Grille 2 colonnes : images à gauche | textes à droite de la ligne des titres */
.agence-parallax-section {
  display: grid;
  grid-template-columns: var(--footer-align, 8vw) 1fr;
  margin-left: calc(-1 * var(--footer-align, 8vw));
  margin-top: 1rem;
  margin-bottom: 5rem;
  align-items: start;
}

.agence-parallax-col {
  will-change: transform;
  padding-right: 1.2rem;
  overflow: visible;
}

.agence-parallax-col .agence-figure {
  max-width: 100%;
  margin-left: 50px;
  margin-top: -130px;
}

.agence-parallax-col .agence-figure img {
  width: 70%;
  height: auto;
}


/* ============================================
   ÉQUIPE
   ============================================ */

.equipe-page {
  padding: 3rem 8vw 12rem var(--footer-align, 8vw);
}

.equipe-content {
  max-width: 1000px;
}


.equipe-membres {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.equipe-membre {
  padding-top: 0;
}

.equipe-nom {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 400;
  margin-bottom: 0.4rem;
}

.equipe-role {
  font-family: var(--font-sans);
  font-size: clamp(0.8rem, 1vw, 0.9rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.6;
  color: var(--color-text-light);
  margin-bottom: 1rem;
}

.equipe-bio {
  font-family: var(--font-sans);
  font-size: clamp(0.8rem, 1vw, 0.9rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 0.6rem;
}

/* ============================================
   GALERIE
   ============================================ */

.galerie-page {
  padding: 3rem 8vw 12rem var(--footer-align, 8vw);
}

.galerie-figure {
  max-width: 500px;
}

.galerie-img-wrapper {
  position: relative;
}

.galerie-img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.35s ease;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.galerie-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.galerie-overlay-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.8rem;
  color: var(--color-text);
  line-height: 1.6;
  text-align: center;
}

.galerie-img-wrapper:hover .galerie-img {
  opacity: 0.23;
}

.galerie-img-wrapper:hover .galerie-overlay {
  opacity: 1;
}


/* ============================================
   CURSEUR — même partout, pas de changement
   ============================================ */

a, button, [role="button"],
.projet-carousel-arrow,
.projet-gallery-arrow,
.projet-desc-toggle,
.projets-list-header,
.galerie-img-wrapper,
.logo-assembly {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%231A1A1A' opacity='0.15'/%3E%3Ccircle cx='8' cy='8' r='4' fill='%231A1A1A'/%3E%3C/svg%3E") 8 8, auto;
}

/* Ombre au hover — éléments cliquables */
.site-nav-link:hover {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.logo-assembly {
  transition: filter 0.4s var(--ease-out-expo);
}

.logo-assembly:hover {
  filter: drop-shadow(0 2px 8px rgba(26, 26, 26, 0.12));
}


/* ============================================
   FOOTER — traits colorés + infos
   ============================================ */

.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 300;
  background: var(--color-bg, #FAFAF8);
  margin-top: 0;
  padding-bottom: 0.25rem;
}

.footer-rule {
  height: 1px;
  background: var(--active-color, #FA7622);
  margin: 0;
}

.footer-info {
  font-family: var(--font-serif);
  font-size: clamp(0.55rem, 0.68vw, 0.65rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--active-color, #FA7622);
  padding: 0.02em 0 0.02em var(--footer-align, 8vw);
  line-height: 1;
}

.footer-title {
  font-size: clamp(0.85rem, 1.05vw, 1.05rem);
  padding-top: 0.25em;
  padding-bottom: 0.08em;
}


.footer-socials {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.1em 0 0 var(--footer-align, 8vw);
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  color: var(--active-color, #FA7622);
  opacity: 0.6;
  transition: opacity 0.3s var(--ease-out-expo);
}

.footer-social-link:hover {
  opacity: 1;
}

/* Responsive */
@media (max-width: 1024px) {
  html { font-size: 16px; } /* restaurer la taille de base sur mobile */
  .letter { opacity: 1; transform: translateX(0); }
  .logo-assembly { left: 0; }
  .logo-icon { height: 118px; }
  .logo-text-block { height: 118px; }
  .site-nav-link { font-size: 1.548rem; }

  /* ── Largeur pleine pour tous les contenus ── */
  .page-content {
    padding: 2rem 6vw 4rem;
  }

  /* ── Projets : liste puis galerie ── */
  .projets-page {
    padding: 2rem 6vw 8rem;
  }

  .projets-grid {
    display: flex;
    flex-direction: column;
    margin-left: 0;
  }

  .projets-list-col {
    order: 1;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0.6rem;
  }

  .projets-detail-col {
    order: 2;
    margin-right: 0;
  }

  .projet-gallery-viewport {
    height: 62vw; /* hauteur paysage fixe — évite que les photos portrait écrasent le conteneur */
  }

  .projet-gallery-img {
    height: 100%; /* remplit le viewport */
  }

  .projet-carousel {
    max-width: 100%;
  }

  /* ── Équipe : Adèle puis Gladys ── */
  .equipe-page {
    padding: 2rem 6vw 8rem;
  }

  .equipe-membres {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .equipe-content {
    max-width: 100%;
  }

  /* ── A propos : colonne unique, sans image ── */
  .agence-page {
    padding: 2rem 6vw 8rem;
  }

  .agence-textes {
    max-width: 100%;
  }

  .agence-parallax-section {
    display: block;
    margin-left: 0;
    margin-bottom: 3rem;
  }

  .agence-parallax-col {
    display: none;
  }

  .footer-info {
    font-size: 0.6rem;
    padding: 0.5em 6vw;
  }
}

/* ============================================
   LIENS NAV — lisibles sur fond de tableau
   ============================================ */

/* Texte blanc + ombre quand la peinture est derrière */
.site-map.visible .site-nav-link {
  color: #FFFFFF;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85), 0 0 24px rgba(0, 0, 0, 0.5);
}

/* Au survol : bandeau blanc → revenir aux couleurs vives, pas d'ombre */
.site-map.visible .site-nav-link:hover,
.site-map.visible .site-nav-link.active {
  text-shadow: none;
}
.site-map.visible .site-nav-link:nth-child(1):hover,
.site-map.visible .site-nav-link:nth-child(1).active { color: #F94EFA; }
.site-map.visible .site-nav-link:nth-child(2):hover,
.site-map.visible .site-nav-link:nth-child(2).active { color: #FA7622; }
.site-map.visible .site-nav-link:nth-child(3):hover,
.site-map.visible .site-nav-link:nth-child(3).active { color: #BA4AFA; }