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

:root {
  --font-serif: "century-old-style-std", Georgia, serif;
  --font-sans: "area-normal", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --color-text: #1d1d1b;
  --color-muted: #2f2f2e;
}

html, body {
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  background: #F4F7F9 url('../images/fond-degrade.jpg') no-repeat center center / cover;
  color: var(--color-text);
  font-family: var(--font-sans);
  user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Structure Plein Écran */
.viewport-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

/* HEADER - Logo verrouillé au centre horizontal exact de la page et aligné en hauteur avec le menu */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 68px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 36px;
  z-index: 60; /* Reste au-dessus du panneau contact (55) pour rester cliquable */
  box-sizing: border-box;
}

.nav-left {
  display: flex;
  align-items: center;
}

/* Centrage du logo à 50% de la largeur ; position fixe indépendante du header pour pouvoir
   passer SOUS le panneau contact (le header, lui, doit rester au-dessus) */
.nav-center {
  position: fixed;
  left: 50%;
  top: 34px; /* Centre vertical du header (68px de haut) */
  transform: translate(-50%, calc(-50% + 3.5px));
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  z-index: 40; /* Sous le panneau contact (55) mais au-dessus du contenu normal */
}

#instagramLink {
  transition: opacity 0.2s ease;
}

/* Instagram masqué (et non cliquable) quand le panneau contact est ouvert, sur ordinateur */
body.contact-open #instagramLink {
  opacity: 0;
  pointer-events: none;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 36px;
}

/* Menus grossis de 4 points */
.nav-link {
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 13px; /* Réduit de 4 points puis augmenté de 2 points */
  font-weight: 600; /* Area Normal Semibold */
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
  cursor: pointer;
}

.nav-link:hover {
  opacity: 0.55;
}

/* Logo grossi */
.site-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.site-logo img {
  height: 38px;
  width: auto;
  display: block;
  transition: opacity 0.2s ease;
}

.site-logo:hover img {
  opacity: 0.75;
}

/* Logo compact "ASB" sur ordinateur, wordmark complet masqué (spécificité augmentée pour l'emporter sur ".site-logo img") */
.site-logo img.site-logo-desktop {
  display: block;
  height: 22.1px; /* -15% (était 26px) */
}

.site-logo-mobile {
  display: none;
}

/* HERO SECTION - Parfaitement centré horizontalement et verticalement */
.hero-section {
  flex: none; /* Hauteur définie par son contenu + marges fixes (plus d'étirement centré) */
  width: 100%;
  text-align: center;
  padding: 150.89px 24px 102.34px; /* Centre le texte entre le logo et le carrousel (recalibré après réduction du logo à -15%) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
}

/* Grand titre : masqué sur ordinateur (supprimé du haut de page), visible uniquement sur mobile */
.hero-title {
  display: none;
  font-family: var(--font-serif);
  font-size: clamp(38px, 3.8vw, 56px);
  font-weight: 400;
  letter-spacing: -0.5px; /* Interlettrage resserré subtilement (était ~1.2px) */
  text-transform: uppercase;
  line-height: 0%;
  margin-bottom: 13px;
  padding-bottom: 32px; /* Compense la ligne à 0% pour ne pas chevaucher le texte courant */
  color: #352b28;
}

/* Texte courant fidèle à la capture : 3 lignes équilibrées sans rupture inattendue */
.hero-description {
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.4vw, 20.5px);
  font-weight: 400;
  line-height: 1.25; /* +2 points (était 1.15) */
  color: #352b28;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}

.hero-description .hero-line {
  display: block;
  white-space: nowrap;
}

/* CAROUSEL CONTENEUR - Hauteur des images agrandie de 10% */
.carousel-wrapper {
  width: 100vw;
  flex: 1; /* Absorbe tout l'espace restant : marges logo->titre et texte->carrousel identiques. Pas de max-height : un plafond laisserait un espace résiduel que "space-between" insérerait entre le texte et le carrousel. */
  min-height: 150px; /* Réduit pour éviter tout débordement (et perte de marge basse) sur les fenêtres basses */
  position: relative;
  overflow: hidden;
  cursor: grab;
  display: flex;
  align-items: flex-end;
  padding-bottom: 22.575px; /* +5% (était 21.5px), marge du bas de page */
}

.carousel-wrapper:active {
  cursor: grabbing;
}

.carousel-track {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  will-change: transform;
  position: absolute;
  left: 0;
  bottom: 22.575px;
  height: calc(100% - 22.575px);
}

/* CARTES DU CARROUSEL - Statiques, sans zoom */
.carousel-card {
  height: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}

.carousel-card-image {
  width: 100%;
  height: calc(100% - 56px); /* Laisse la place au titre + sous-titre en dessous */
  aspect-ratio: 1078 / 1411;
  position: relative;
  overflow: hidden;
  background: transparent;
  transform: none !important;
  display: block;
}

/* LÉGENDE : titre + sous-titre sous chaque image (ordinateur uniquement) */
.carousel-card-caption {
  width: 100%;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}

.carousel-card-title {
  font-family: var(--font-sans);
  font-size: 13px; /* = taille du texte du menu */
  font-weight: 600; /* Area Normal Semibold */
  letter-spacing: 0.05em; /* = interlettrage du texte du menu */
  text-transform: uppercase;
  color: var(--color-text);
}

.carousel-card-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px; /* Agrandi proportionnellement (même facteur que le titre) */
  color: var(--color-muted);
}

.carousel-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transform: none !important;
  transition: none !important;
}

/* Responsive mobile */
@media (max-width: 900px) {
  .site-header {
    padding: 14px 18px 6px 18px;
  }
  .nav-link {
    font-size: 13px;
  }
  .nav-right {
    gap: 18px;
  }
  .site-logo img {
    height: 28px;
  }
  .hero-title {
    font-size: 30px;
  }
  .hero-description {
    font-size: 15px;
  }
  .carousel-wrapper {
    padding-bottom: 36px;
  }
  .carousel-track {
    bottom: 36px;
    height: calc(100% - 36px);
  }
}

/* BOUTON MENU MOBILE - caché par défaut (desktop/tablette) */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 28px;
  height: 22px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 60;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 2px; /* -1 point (était 2.5px), même épaisseur pour les deux traits (et la croix) */
  background: var(--color-text);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.menu-toggle.is-active span:first-child {
  transform: translateY(3.75px) rotate(45deg);
}

.menu-toggle.is-active span:last-child {
  transform: translateY(-3.75px) rotate(-45deg);
}

/* PANNEAU CONTACT - DESKTOP : occupe les trois quarts de l'écran, le reste du site reste visible à gauche */
.mobile-menu {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  background-color: #FFFFFF;
  z-index: 55;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 120px 80px 80px 80px; /* Haut mesuré sur la référence (dégage le header) ; gauche/droite/bas mesurés à l'identique (~80px) */
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
  overflow-y: auto;
}

.mobile-menu.is-open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* En dessous de cette largeur, le panneau à 50% devient trop étroit pour que le texte reste lisible (il ne peut plus rétrécir) : il passe aux trois quarts de la page */
@media (max-width: 1500px) {
  .mobile-menu {
    width: 75%;
  }
}

/* En dessous de cette largeur, les trois quarts deviennent à leur tour trop étroits pour le texte : le panneau repasse en pleine largeur */
@media (max-width: 1000px) {
  .mobile-menu {
    width: 100%;
  }
}

/* Quand le panneau est en pleine largeur (mais PAS sur mobile, qui a déjà sa propre position de logo) : on enlève "Demande de portfolio" et on ramène le logo au-dessus du panneau, calé sur le bord gauche de la photo */
/* visibility (pas display:none) pour ne pas casser le "space-between" du header et laisser INFOS & CONTACT à droite */
@media (min-width: 641px) and (max-width: 1000px) {
  body.contact-open .nav-left {
    visibility: hidden;
  }

  body.contact-open .nav-center {
    left: 80px;
    transform: translateY(calc(-50% + 3.5px));
    z-index: 56; /* Passe au-dessus du panneau contact (55) */
  }
}

/* Contenu ORDINATEUR : photo (colonne fixe) + colonne de texte alignée à part, visible par défaut */
.desktop-contact-content {
  display: flex;
  align-items: flex-start;
  gap: 80px; /* Même marge qu'à gauche de la photo (padding du panneau) */
  width: 100%;
}

.desktop-contact-photo {
  width: 258px; /* Réduite pour équilibrer la marge droite (gap) avec la marge gauche */
  flex-shrink: 0;
}

.desktop-contact-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 278 / 322;
  object-fit: cover;
  display: block;
}

.desktop-contact-text {
  display: flex;
  flex-direction: column;
  max-width: 560px;
}

.desktop-contact-bio {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.35; /* +2 points (était 1.25) */
  color: var(--color-text);
  margin: 0 0 48px; /* Mesuré : espace avant "Sélection client" */
}

.desktop-contact-email {
  font-family: var(--font-serif);
  font-size: 20px;
  margin: 0;
}

.desktop-contact-email a {
  color: var(--color-text);
  text-decoration: none;
}

/* Contenu MOBILE : page plein écran, masqué par défaut (affiché uniquement en dessous de 640px) */
.mobile-menu-content {
  display: none;
  flex-direction: column;
  max-width: 360px; /* Colonne resserrée, fidèle à la référence (le texte ne s'étire pas vers la droite) */
}

.mobile-contact-block {
  margin-bottom: 72px;
}

.mobile-contact-block p {
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 1.15;
  color: #fff;
  margin: 0;
}

.mobile-contact-block a {
  color: #fff;
  text-decoration: none;
}

.mobile-list-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 40px;
}

.mobile-list-block:last-child {
  margin-bottom: 0;
}

.mobile-list-label {
  font-family: var(--font-sans);
  font-size: 13px; /* = taille du texte en capital sous les carrousels */
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text); /* Sombre par défaut (fond clair desktop) ; repasse en blanc sur mobile */
}

.mobile-list-block p {
  font-family: var(--font-serif);
  font-size: 17px; /* +2 points (était 15px) */
  line-height: 1.4;
  color: var(--color-text); /* Sombre par défaut (fond clair desktop) ; repasse en blanc sur mobile */
  margin: 0;
}

/* Logo ASB en bas du panneau contact : masqué sur ordinateur, affiché uniquement sur mobile */
.mobile-contact-logo {
  display: none;
}


/* MOBILE (< 640px) : mise en page façon référence, tient sur un seul écran (pas de scroll) */
@media (max-width: 640px) {
  html, body {
    height: 100dvh; /* dvh = tient compte de la barre d'adresse mobile, contrairement à vh */
    max-height: 100dvh;
    overflow: hidden;
  }

  .viewport-container {
    height: 100%;
    justify-content: flex-start; /* Évite l'espace vide inséré par "space-between" quand le contenu est plus court que l'écran */
  }

  /* HEADER : uniquement le bouton menu, logo et liens masqués */
  .site-header {
    position: relative;
    height: auto;
    padding: 28px 24px 0; /* Aligne le bouton menu sur la hauteur du logo */
    justify-content: flex-end;
  }

  .nav-left,
  .nav-right {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  /* PANNEAU CONTACT : nouvelle page mobile (fond blanc, petite photo centrée + texte, comme sur ordinateur) */
  .mobile-menu {
    left: 0;
    width: 100%;
    background-color: #FFFFFF;
    justify-content: flex-start;
    padding: 70px 30.8px 60px 30.8px; /* Marge droite = marge gauche */
    transform: translateY(-100%);
  }

  .mobile-menu.is-open {
    transform: translateY(0);
  }

  /* Sur mobile : on réutilise le contenu "ordinateur" (photo centrée + texte aligné à gauche), fidèle à la référence */
  .desktop-contact-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* La photo se centre elle-même sur la largeur de l'écran (marges gauche/droite du panneau asymétriques) */
    gap: 70px; /* Marge du bas de l'image réduite de 30% (100px -> 70px) */
    width: 100%;
  }

  .desktop-contact-photo {
    width: 150px; /* -20% (187px -> 150px) */
    margin-left: calc(50vw - 105.8px); /* Centre la photo sur la largeur totale de l'écran, indépendamment des marges du panneau */
  }

  .desktop-contact-text {
    width: 100%;
    max-width: none;
  }

  .desktop-contact-bio {
    font-size: 19px; /* Même taille que le texte de la home page */
    line-height: 26.5px; /* -2 points (était 1.5 = 28.5px à 19px) */
    margin-bottom: 32px;
  }

  .desktop-contact-email {
    font-size: 16px;
  }

  /* Ancien contenu plein écran (photo N&B) : entièrement masqué, remplacé par le contenu ci-dessus */
  .mobile-menu-content {
    display: none;
  }

  .mobile-list-block {
    gap: 8px;
    margin-bottom: 32px;
  }

  .mobile-list-label {
    font-size: 11px;
  }

  .mobile-list-block p {
    font-size: 16px;
  }

  .mobile-contact-logo {
    display: block;
    margin-top: auto;
    padding-top: 40px;
  }

  .mobile-contact-logo img {
    width: 70px;
    height: auto;
    display: block;
  }

  /* HERO : texte aligné à gauche, proportions mesurées précisément sur la référence */
  .hero-section {
    flex: none;
    text-align: left;
    align-items: flex-start;
    padding: 85px calc(25.2vw - 30.8px) 12px 30.8px; /* +20px pour descendre le paragraphe (droite : aligne le texte sur le bord droit de la 1ère image du carrousel) */
  }

  /* Titre supprimé sur mobile aussi (garde le display:none de la règle de base) */

  .hero-description {
    display: block; /* Annule le "display:flex" desktop qui empêchait le texte de s'enrouler à la largeur de l'écran */
    text-align: left;
    font-size: 19px; /* -2 points (était 21px) */
    line-height: 23.65px; /* -2 points (était 1.35 = 25.65px à 19px) */
    margin: 0; /* Annule le "margin: 0 auto" desktop (plus de réduction supplémentaire, la marge droite vient du padding) */
  }

  /* Seule la 1ère phrase reste visible sur mobile : sinon le texte prend trop de hauteur et coupe le carrousel en bas de l'écran */
  .hero-description .hero-line:nth-of-type(n+2) {
    display: none;
  }

  .hero-description .hero-line {
    display: inline;
    white-space: normal;
  }

  .hero-description .hero-line-break {
    display: inline; /* Laisse le texte s'enrouler naturellement (plus de coupure forcée à cette taille de texte) */
  }

  /* CARROUSEL : une carte principale avec aperçu des voisines, swipe tactile */
  .carousel-wrapper {
    display: block;
    flex: none;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    margin-top: 10px; /* -40px pour remonter le carrousel et son texte (le bas était coupé) */
    padding-bottom: 12px; /* Réduite pour que tout tienne sur un seul écran sans scroll */
  }

  .carousel-track {
    position: static;
    height: auto;
    bottom: auto;
  }

  .carousel-card {
    height: auto;
    width: 74.8vw; /* +10% en hauteur (ancrée en bas via align-items:flex-end du track), était 68vw */
  }

  .carousel-card-image {
    height: auto;
  }

  /* Logo compact "ASB" en haut à gauche sur mobile : pas sticky, défile avec la page (comme le bouton menu) */
  .nav-center {
    display: flex;
    position: absolute;
    top: 28px;
    left: 28px;
    transform: none;
  }

  .site-logo img.site-logo-desktop {
    display: block;
    height: 19.8px; /* -10% (était 22px) */
  }

  .site-logo-mobile {
    display: none;
  }
}