/* =========================================================
   TENETS — mecanique de la section « Tenets » de sobha-privy-collection.com (relevee le 30/09/2026,
   code reecrit) : grande photo en fond ; une carte blanche au tiers de sa taille monte du bas
   (titre geant en haut, petite video, texte en bas) ; elle grandit jusqu'a remplir l'ecran (le texte
   garde sa taille a l'oeil, la video s'elargit, titre + texte apparaissent autour) ; puis tout
   part en defilement horizontal (grandes photos a glissement interieur, blocs titre + texte).
   Moteur : tenets.js. Polices libres : Pinyon Script, Cormorant Garamond, Jost.
   ========================================================= */
.tn { position: relative; background: #fff; color: #17181a; font-family: "Jost", system-ui, sans-serif; }
.tn__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.tn__fond { position: absolute; inset: 0; margin: 0; }
.tn__fond img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Piste horizontale */
.tn__piste { position: absolute; inset: 0 auto 0 0; display: flex; align-items: stretch; height: 100vh; will-change: transform; }
.tn__item { flex: 0 0 auto; height: 100vh; position: relative; background: #fff; }
.tn__item + .tn__item { margin-left: -1px; }
.tn__item--intro { width: 100vw; background: none; z-index: 1; }

/* Carte qui grandit (largeur 100vw, rapport 0,8 : elle deborde en hauteur a pleine taille, comme l'original) */
.tn__carte { position: absolute; left: 0; top: 50%; width: 100vw; aspect-ratio: .8; background: #fff;
  display: flex; flex-direction: column; justify-content: center; transform-origin: center; will-change: transform; }
.tn__carte-titre { position: absolute; left: 60px; right: 60px; top: 20px; margin: 0; text-align: center;
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 300; font-size: 20.5vw; line-height: .9; letter-spacing: .01em; text-transform: uppercase; }
.tn__carte-texte { position: absolute; left: 120px; right: 120px; bottom: 60px; margin: 0; z-index: 1; text-align: center;
  font-size: 3.35vw; font-weight: 500; line-height: 1.25; transform-origin: center bottom; will-change: transform; }
.tn__video { position: relative; width: 50vw; aspect-ratio: 720 / 480; margin: 0 auto; }
.tn__video-cadre { position: absolute; inset: 0; overflow: hidden; will-change: clip-path, transform; }
.tn__video-cadre video, .tn__video-cadre img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tn__video-titre { position: absolute; right: calc(100% - 1em); top: 0; margin: 0; opacity: 0; font-size: 7.4vw; line-height: 1; text-align: left; }
.tn__video-texte { position: absolute; left: calc(100% + 24px); bottom: 0; width: 13.7vw; margin: 0; opacity: 0; font-size: 1.05vw; line-height: 1.5; }

/* Titre a deux niveaux : ecriture + capitales */
.tn-script { display: block; font-family: "Pinyon Script", cursive; font-weight: 400; color: #766e60; line-height: .9; }
.tn-caps { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 300; text-transform: uppercase; letter-spacing: .02em; line-height: .95; }
.tn__video-titre .tn-script { margin-top: -.55em; font-size: .62em; }
.tn__video-titre .tn-caps { padding: .15em 0 0 .7em; font-size: .56em; }

/* Grandes photos a glissement interieur (image a 120 %, glisse de -16,67 % a 0) */
.tn__item--photo { width: 64vw; overflow: hidden; }
.tn__item--photo img { height: 100%; width: 120%; max-width: none; object-fit: cover; display: block; will-change: transform; }

/* Blocs titre + texte */
.tn__bloc { width: 50vw; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding: 0 8vw 7vh; box-sizing: border-box; }
.tn__bloc h3 { margin: 0 0 5vh; font-size: 6.4vw; font-weight: 300; }
.tn__bloc h3 .tn-script { font-size: .6em; }
.tn__bloc h3 .tn-caps { font-size: .56em; padding-top: .15em; }
.tn__bloc p { max-width: 430px; margin: 0 0 5vh; font-size: 15px; line-height: 1.7; color: #4d4e52; }
.tn__bloc .tn__petite { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.tn__bloc .tn__petite img { width: 120%; height: 100%; object-fit: cover; display: block; will-change: transform; }

.tn__trio { width: 84vw; display: grid; grid-template-columns: 3fr 7fr; align-items: end; padding: 0 4vw 7vh; box-sizing: border-box; gap: 3vw; }
.tn__trio h3 { margin: 0; font-size: 7vw; font-weight: 300; white-space: nowrap; }
.tn__trio h3 .tn-script { font-size: .6em; }
.tn__trio h3 .tn-caps { font-size: .56em; padding-top: .15em; }
.tn__trio-droite { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; gap: 4vh; padding-top: 9vh; }
.tn__trio-images { display: flex; gap: 10px; align-items: flex-start; }
.tn__trio-images figure { flex: 1; margin: 0; aspect-ratio: 264 / 360; overflow: hidden; }
.tn__trio-images figure:nth-child(odd) { margin-top: 40px; }
.tn__trio-images img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tn__trio p { max-width: 260px; margin: 0; font-size: 15px; line-height: 1.7; color: #4d4e52; }

.tn__fin { width: 70vw; display: grid; grid-template-columns: 1fr 1.4fr; gap: 3vw; align-items: center; padding: 8vh 5vw; box-sizing: border-box; }
.tn__fin p { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.9vw; line-height: 1.25; text-transform: uppercase; }
.tn__fin figure { margin: 0; height: 76vh; overflow: hidden; }
.tn__fin img { width: 120%; height: 100%; object-fit: cover; display: block; will-change: transform; }

/* Mouvement reduit : empilement simple, pas d'animation. */
@media (prefers-reduced-motion: reduce) {
  .tn { height: auto !important; overflow: hidden; }
  .tn__trio-images figure:nth-child(odd) { margin-top: 0; }
  .tn__bloc .tn__petite img, .tn__fin img { width: 100%; transform: none !important; }
  .tn__sticky { position: relative; height: auto; overflow: visible; }
  .tn__fond { display: none; }
  .tn__piste { position: relative; display: block; height: auto; transform: none !important; }
  .tn__item { width: auto !important; height: auto; padding: 8vh 20px; }
  .tn__item--intro { padding: 0; }
  .tn__carte { position: relative; top: 0; width: auto; aspect-ratio: auto; transform: none !important; padding: 10vh 20px; gap: 4vh; }
  .tn__carte-titre, .tn__carte-texte { position: static; transform: none !important; }
  .tn__carte-titre { font-size: 22vw; } .tn__carte-texte { font-size: 17px; }
  .tn__video { width: 100%; } .tn__video-cadre { clip-path: none !important; transform: none !important; }
  .tn__video-titre, .tn__video-texte { position: static; opacity: 1 !important; width: auto; font-size: 15px; margin-top: 3vh; }
  .tn__video-titre { font-size: 44px; }
  .tn__item--photo { padding: 0; } .tn__item--photo img { width: 100%; height: 60vh; transform: none !important; }
  .tn__bloc, .tn__trio, .tn__fin { display: block; padding: 8vh 20px; }
  .tn__bloc h3, .tn__trio h3 { font-size: 64px; white-space: normal; }
  .tn__fin p { font-size: 22px; margin-bottom: 4vh; } .tn__fin figure { height: 50vh; }
}

/* Telephone et tablette (01/10/2026) : meme mouvement qu'au grand ecran, a l'echelle. La carte
   grandie remplit l'ecran ; titre, video et texte s'empilent ; la piste defile a l'horizontale. */
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .tn__carte { aspect-ratio: auto; height: 100svh; }
  /* Ce texte est contre-echelonne (taille visible = taille x 1/3, constante) : il est donc ecrit
     trois fois plus grand et trois fois plus large que ce qu'on voit (17 px sur 87 % de l'ecran). */
  .tn__carte-texte { left: calc(50% - 130vw); right: calc(50% - 130vw); bottom: 5svh; font-size: 13vw; font-weight: 400; }
  .tn__video { width: 84vw; }
  .tn__video-titre { right: auto; left: 0; top: auto; bottom: calc(100% + 2svh); font-size: 12vw; }
  .tn__video-texte { left: 0; bottom: auto; top: calc(100% + 2svh); width: 100%; font-size: 3.6vw; }
  .tn__item--photo { width: 88vw; }
  .tn__bloc { width: 90vw; padding: 0 6vw 7svh; }
  .tn__bloc h3 { font-size: 13vw; }
  .tn__trio { width: 100vw; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 6vw 7svh; }
  .tn__trio h3 { font-size: 13vw; white-space: normal; }
  .tn__fin { width: 100vw; display: flex; flex-direction: column; justify-content: center; padding: 6svh 6vw; }
  .tn__fin p { font-size: 5.4vw; } .tn__fin figure { height: 50svh; }
}