/* Shared layout for the Latitude Sud portfolio pages. */
/* Le hero est plafonné à une fraction de la hauteur d'écran pour que les
   premières cartes soient déjà visibles à l'arrivée, sans scroller. Le
   background reste en « cover » : c'est le ciel qui est rogné, pas le sujet
   (les illustrations sont ancrées en bas). */
.portfolio-hero {
  position: relative; width: 100%;
  min-height: clamp(440px, 48svh, 620px); display: grid; place-items: center start;
  overflow: hidden; background-color: #FAF9F7; background-position: center; background-size: cover;
  background-repeat: no-repeat; text-align: left;
  padding: clamp(92px, 10vh, 128px) 24px clamp(92px, 10vh, 140px);
}
/* Le sujet était cadré à 24 % depuis la gauche, c'est-à-dire exactement sous
   le bloc de titre : on ne lisait plus le texte et on ne voyait plus le
   personnage. Il est décalé vers la droite, et le voile blanc — qui montait à
   0,9 d'opacité et délavait toute l'illustration — revient au même niveau
   discret que les autres pages. */
.portfolio-hero--photos {
  --hero-image: url('/assets/global/backgrounds/image-bg/generated/hero-photos-v8-1920.webp');
  --hero-edge: url('/assets/global/backgrounds/image-bg/generated/hero-photos-edge-1920.webp?v=3');
  --hero-art-shift: 0px;
  background-image: var(--hero-image);
  background-position: center bottom;
  place-items: start start;
}
.portfolio-hero.portfolio-hero--photos::after {
  background: none;
}
.portfolio-hero--photos .portfolio-hero-inner { width: min(560px, 44vw); margin-top: 0; }
.portfolio-hero--photos .portfolio-hero-inner > p:last-child { max-width: 500px; }
.portfolio-hero--charte {
  --hero-image: url('/assets/global/backgrounds/image-bg/generated/hero-charte-1920.webp?v=7');
  --hero-edge: url('/assets/global/backgrounds/image-bg/generated/hero-charte-edge-1920.webp?v=3');
  background-image: var(--hero-image);
  background-position: 10% bottom;
}
.portfolio-hero--social {
  --hero-image: url('/assets/global/backgrounds/image-bg/generated/hero-social-1920.webp?v=7');
  --hero-edge: url('/assets/global/backgrounds/image-bg/generated/hero-social-edge-1920.webp?v=3');
  --hero-art-shift: clamp(600px, 32vw, 760px);
  background-image: var(--hero-image);
  background-position: 10% bottom;
}
/* Titre le plus long du site : à 50px la 1re ligne débordait et passait sur 3
   lignes, ce qui rallongeait le hero et coupait les cartes. */
.portfolio-hero--catalogue {
  --hero-image: url('/assets/global/backgrounds/image-bg/generated/hero-catalogue-1920.webp?v=7');
  --hero-edge: url('/assets/global/backgrounds/image-bg/generated/hero-catalogue-edge-1920.webp?v=3');
  --hero-art-shift: clamp(600px, 32vw, 760px);
  background-image: var(--hero-image);
  background-position: 4% bottom;
}
.portfolio-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(250,249,247,.34), rgba(250,249,247,.08) 48%, transparent 72%);
}
.portfolio-hero--social::after {
  background: linear-gradient(90deg, rgba(250,249,247,.9) 0%, rgba(250,249,247,.76) 34%, rgba(250,249,247,.16) 49%, transparent 60%);
}
/* Le bloc s'aligne sur le bord gauche du conteneur de la nav (1480px centré
   + 40px de padding) au lieu d'un décalage arbitraire en vw : le titre part
   donc exactement sous le logo. Largeur portée à 760px pour que le titre
   tienne sur deux lignes au lieu de se compacter sur quatre. */
.portfolio-hero-inner {
  position: relative; z-index: 1;
  width: min(830px, calc(100% - 48px));
  margin-left: var(--hero-copy-edge);
}
.portfolio-kicker { margin-bottom: 18px; color: var(--color-black); font-size: 11px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; }
.portfolio-hero h1 { max-width: 830px; margin: 0 0 18px; font-size: clamp(34px, 3.4vw, 58px); line-height: 1.06; }
.portfolio-hero p:not(.portfolio-kicker) { max-width: 560px; margin: 0; color: var(--color-gray-dark); line-height: 1.6; font-size: 15px; }
.portfolio-section { background: var(--color-white); padding: 2px clamp(22px, 3vw, 48px) 84px; }
.portfolio-intro { max-width: 860px; margin: 0 auto clamp(18px, 2.2vh, 30px); text-align: center; }
.portfolio-intro h2 { margin-bottom: 8px; font-size: clamp(26px, 2.4vw, 34px); }
.portfolio-intro p { color: var(--color-gray-mid); line-height: 1.6; font-size: 14.5px; }
.project-grid {
  width: min(1400px, 100%); margin: 0 auto; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(22px, 2vw, 30px);
}
.project-card { display: flex; flex-direction: column; min-width: 0; background: var(--color-white); border: 1px solid #ECEAE6; border-radius: 8px; overflow: hidden; box-shadow: 0 6px 24px rgba(28,26,22,.05); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.project-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(28,26,22,.12); }
.project-visual { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #E9E3D8; }
.project-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(252,252,251,.16), transparent 55%); pointer-events: none; }
.project-visual img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform .5s var(--ease); }
.project-card:hover .project-visual img { transform: scale(1.015); }
.project-badge { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 6px 9px; border-radius: 99px; background: rgba(252,252,251,.92); color: var(--color-black); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.project-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 24px; }
.project-body h3 { margin-bottom: 5px; font-size: 17px; }
.project-body p { color: #686561; font-size: 13px; line-height: 1.6; }
.project-action { margin-top: auto; padding-top: 18px; color: var(--color-black); font-size: 12px; font-weight: 600; text-decoration: none; }
.project-action::after { content: '  →'; color: var(--color-olive); }
.project-card[data-project], .project-card[data-before-after], .project-card[data-product-gallery], .project-card[data-marina-project], .project-card[data-cist-project], .project-card[data-smgeag-project] { cursor: pointer; }
.project-card[data-marina-project]:focus,
.project-card[data-cist-project]:focus,
.project-card[data-smgeag-project]:focus { outline: none; }
.project-card[data-marina-project]:focus-visible,
.project-card[data-cist-project]:focus-visible,
.project-card[data-smgeag-project]:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 3px;
}
.project-grid--identity,
.project-grid--social {
  width: min(1280px, 100%);
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.project-grid--identity > .project-card .project-visual,
.project-grid--social .project-visual,
.social-project .project-visual { aspect-ratio: 4 / 3; }
.project-grid--identity > .project-card,
.project-grid--social > .project-card { grid-column: span 2; }
/* Elargir les 2 dernieres cartes ne remplit la rangee que sur une grille de 5
   (charte graphique : 3 + 2). Sur social (7 cartes) cela laissait un trou puis
   deux cartes surdimensionnees au ratio different : on garde 3 par rangee. */
.project-grid--identity > .project-card:nth-last-child(-n + 2) { grid-column: span 3; }
.project-grid--identity > .project-card:nth-last-child(-n + 2) .project-visual { aspect-ratio: 16 / 9; }
/* Grilles à 2 ou 3 colonnes : les vignettes en 4/3 font 340 à 360 px de haut et
   la carte dépasse le bas de l'écran. En 16/10 on garde le cadrage (les images
   sont en cover) et la carte entière tient dans la page. */
.social-project .project-visual { aspect-ratio: 4 / 3; }
.social-project .project-visual img { object-position: center top; }
.social-project .project-visual--brand {
  display: grid; place-items: center; background: #F6F5F1;
}
.social-project .project-visual--brand img {
  width: min(56%, 250px); height: auto; object-fit: contain; object-position: center;
}
.gallery-note { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--color-gray-mid); font-size: 12px; }
.gallery-note::before { content: ''; display: block; width: 22px; height: 1px; background: #B98969; }
.project-source-missing { display:grid; place-items:center; padding:28px; background:linear-gradient(145deg,#F1E8DC,#FAF8F4); }
.project-source-missing > div { text-align:center; }
.project-source-missing strong { display:block; margin-bottom:8px; font-size:22px; }
.project-source-missing p { color:#7D756D; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.project-action--pending { color:#9A9188; }
.project-action--pending::after { content:''; }
.portfolio-cta { background: #FAF9F7; padding: 66px var(--gutter) 0; overflow: hidden; border-top: 1px solid #ECE8E2; }
.portfolio-cta-inner { width: min(1140px, 100%); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.portfolio-cta h2 { margin-bottom: 14px; }
.portfolio-cta p { max-width: 520px; margin-bottom: 25px; color: var(--color-gray-dark); line-height: 1.75; }
.portfolio-cta-art { width: min(390px, 36vw); align-self: end; margin-bottom: -3px; }
.portfolio-cta-art img { width: 100%; height: auto; display: block; mix-blend-mode: multiply; }
.portfolio-filter { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0 auto 42px; }
.portfolio-filter span { border: 1px solid var(--color-gray-light); border-radius: 99px; padding: 9px 14px; color: var(--color-gray-mid); font-size: 11px; }
.portfolio-filter span.active { border-color: var(--color-black); color: var(--color-black); }
.catalogue-list {
  width: min(1140px, 100%); margin: 0 auto; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
.catalogue-card {
  display: flex; flex-direction: column; overflow: hidden; padding: 0;
  border: 1px solid #ECEAE6; border-radius: 8px; background: var(--color-white);
  box-shadow: 0 6px 24px rgba(28,26,22,.05);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.catalogue-card[data-project] { cursor: pointer; }
.catalogue-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(28,26,22,.11); }
.catalogue-card:hover .project-visual img { transform: scale(1.04); }
.catalogue-card .project-visual { aspect-ratio: 16 / 10; }
.catalogue-card .project-visual--client-logo {
  display: grid;
  place-items: center;
  background: #101010;
}
.catalogue-card .project-visual--client-logo img {
  width: min(42%, 150px);
  height: auto;
  object-fit: contain;
  filter: invert(1);
  transform: none;
}
.catalogue-card:hover .project-visual--client-logo img { transform: scale(1.04); }
.catalogue-card .cat-thumb--decathlon { background: #0082C3; }
.catalogue-card .cat-thumb--decathlon img { filter: brightness(0) invert(1); }
.catalogue-card .cat-thumb--mr { background: #EB0029; }
.catalogue-card .cat-thumb--mr img { filter: brightness(0) invert(1); }
.catalogue-card .cat-thumb--gamm img,
.catalogue-card .cat-thumb--foir img { filter: none; }
.catalogue-card .cat-thumb--gamm { background: #00664A; }
.catalogue-card .cat-thumb--foir { background: #FFF5F4; }
.catalogue-card .cat-thumb--carrefour { background: #254F9A; }
.catalogue-card .cat-thumb--carrefour img { filter: brightness(0) invert(1); }
.catalogue-card .cat-thumb--digilife { background: #090909; }
.catalogue-list--clients { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.catalogue-list--clients > .catalogue-card { grid-column: span 2; }
@media (min-width: 901px) {
  .portfolio-hero {
    background-image: var(--hero-image), var(--hero-edge);
    background-position: clamp(420px, 24vw, 900px) bottom, center;
    background-size: auto 100%, 100% 100%;
  }
  .portfolio-hero--photos {
    background-image: var(--hero-image);
    background-position: center bottom;
    background-size: cover;
  }
  .portfolio-hero--photos .portfolio-hero-inner,
  .portfolio-hero--social .portfolio-hero-inner { width: min(830px, 52vw); }
  .portfolio-hero--charte .portfolio-hero-inner { width: min(650px, 52vw); }
  .portfolio-hero--catalogue .portfolio-hero-inner { width: min(680px, 52vw); }
}
@media (min-width: 2200px) {
  .portfolio-section { padding-inline: 56px; }
  .project-grid { width: min(1840px, calc(100% - 112px)); gap: 30px; }
  .project-grid--identity,
  .project-grid--social,
  .catalogue-list { width: min(1840px, calc(100% - 112px)); gap: 30px; }
  .project-grid.project-grid--photos-curated { width: min(1400px, calc(100% - 112px)); gap: 30px; }
  .project-body { padding: 22px 24px 26px; }
  .project-body p { font-size: 14px; line-height: 1.7; }
  .catalogue-card .project-body { padding: 18px 22px 22px; }
}
@media (max-width: 1100px) {
  .project-grid, .project-grid--identity, .project-grid--social, .catalogue-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-grid--identity > .project-card,
  .project-grid--social > .project-card,
  .project-grid--identity > .project-card:nth-last-child(-n + 2),
  .project-grid--social > .project-card:nth-last-child(-n + 2) { grid-column: span 1; }
  .catalogue-list--clients > .catalogue-card { grid-column: span 1; }
}
@media (max-width: 900px) {
  .portfolio-hero {
    min-height: clamp(520px, 56svh, 650px); max-height: none;
    padding: clamp(88px, 10vh, 112px) clamp(28px, 5vw, 56px) clamp(120px, 16svh, 180px);
    place-items: start start; background-position: center bottom; background-size: cover; text-align: left;
  }
  .portfolio-hero--photos { --hero-image: url('/assets/global/backgrounds/image-bg/generated/hero-photos-v8-960.webp'); background-image: var(--hero-image); }
  .portfolio-hero--social { --hero-image: url('/assets/global/backgrounds/image-bg/generated/hero-social-960.webp?v=7'); background-image: var(--hero-image); }
  .portfolio-hero--charte { --hero-image: url('/assets/global/backgrounds/image-bg/generated/hero-charte-960.webp?v=7'); background-image: var(--hero-image); }
  .portfolio-hero--catalogue { --hero-image: url('/assets/global/backgrounds/image-bg/generated/hero-catalogue-960.webp?v=7'); background-image: var(--hero-image); }
  .portfolio-hero::after { background: linear-gradient(180deg, rgba(250,249,247,.9) 0%, rgba(250,249,247,.72) 46%, rgba(250,249,247,.12) 70%, transparent 82%); }
  .portfolio-hero.portfolio-hero--photos::after { background: none; }
  .portfolio-hero--photos .portfolio-hero-inner { margin-top: 0; }
  .portfolio-hero-inner { width: 100%; margin-left: 0; }
  .portfolio-hero h1 { font-size: 34px; line-height: 1.02; }
  .portfolio-hero p:not(.portfolio-kicker) { font-size: 14px; line-height: 1.65; }
}
@media (max-width: 768px) {
  .portfolio-hero { background-position: center bottom; }
}
@media (max-width: 600px) {
  .portfolio-hero {
    min-height: 520px;
    padding-top: 76px;
    padding-bottom: 105px;
  }
  .portfolio-hero h1 { font-size: clamp(30px, 8.4vw, 33px); }
  .portfolio-hero p:not(.portfolio-kicker) { font-size: 13px; line-height: 1.55; }
  .portfolio-hero--photos { padding-top:70px; }
  .portfolio-hero--photos .portfolio-kicker { margin-bottom:12px; }
  .portfolio-hero--photos h1 { max-width:300px; margin-bottom:12px; font-size:28px; line-height:1; }
  .portfolio-hero--photos p:not(.portfolio-kicker) { max-width:240px; font-size:11.5px; line-height:1.42; }
  .portfolio-section, .portfolio-cta { padding-left: 24px; padding-right: 24px; }
  .portfolio-section { padding-top: 16px; padding-bottom: 64px; }
  .project-grid, .project-grid--identity, .project-grid--social, .catalogue-list { grid-template-columns: 1fr; gap: 20px; }
  .social-project .project-visual { aspect-ratio: 16 / 10; }
  .portfolio-cta-inner { flex-direction: column; align-items: flex-start; }
  .portfolio-cta-art { width: 230px; align-self: center; }
}