/* Graphen Studio — Design de marque
   La page ne défile pas : elle tient dans l'écran et la molette fait glisser
   ses colonnes en sens contraire. Le texte monte, les images descendent,
   à la même vitesse. Les deux boucles sont sans fin, dans un sens comme dans
   l'autre — on revient toujours sur le même contenu. */

html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }

.page--edi {
  gap: 0;
  padding: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* Chaque colonne coupe ce qui déborde : c'est elle qui fait la fenêtre. */
.edi-col { overflow: hidden; height: 100%; }

.edi-side { grid-column: 1 / 3; padding: 0 20px; }
.edi-side.page__title { height: 100%; }

/* 12 px à gauche : le texte part du même point que les cartes du Portfolio
   (.main, padding var(--side) + 12 px), soit 22 px après le cube. */
.edi-info { grid-column: 3 / 5; padding: 0 3px 0 12px; }
.edi-shots { grid-column: 6 / 7; padding: 0 3px; }

.edi-track {
  will-change: transform;
  transform: translate3d(0, var(--y, 0px), 0);
}

/* ---------- Colonne de texte ---------- */

/* 40 px en haut et en bas : additionnés d'une copie à l'autre, ils refont
   exactement l'écart de 80 px qui sépare deux blocs. La jointure de la boucle
   est donc invisible. */
.edi-set { display: flex; flex-direction: column; gap: 80px; padding: 40px 0; }
.edi-set--shots { gap: 0; padding: 0; }
.edi-block { display: flex; flex-direction: column; gap: 10px; }
.edi-block__label {
  color: var(--grey);
  font-family: "Outfit", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(10px, 1vw, 13px);
  letter-spacing: .08em;
}
.edi-block p + p,
.edi-block h2 + p { margin-top: 1.3em; }
.edi-block ul { display: flex; flex-direction: column; gap: 1px; }

/* ---------- Ligne de glyphes géométriques en fin de texte ---------- */
.edi-block--glyphs {
  padding-top: 8px;
}
.edi-glyphs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 1.2vw, 12px);
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.edi-glyphs-row img {
  width: clamp(20px, 2.2vw, 28px);
  height: clamp(20px, 2.2vw, 28px);
  object-fit: contain;
  opacity: 0;
  transform: translateY(8px) scale(0.92);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}
.edi-glyphs-row img:nth-child(1)  { transition-delay: 0.00s; }
.edi-glyphs-row img:nth-child(2)  { transition-delay: 0.05s; }
.edi-glyphs-row img:nth-child(3)  { transition-delay: 0.10s; }
.edi-glyphs-row img:nth-child(4)  { transition-delay: 0.15s; }
.edi-glyphs-row img:nth-child(5)  { transition-delay: 0.20s; }
.edi-glyphs-row img:nth-child(6)  { transition-delay: 0.25s; }
.edi-glyphs-row img:nth-child(7)  { transition-delay: 0.30s; }
.edi-glyphs-row img:nth-child(8)  { transition-delay: 0.35s; }
.edi-glyphs-row img:nth-child(9)  { transition-delay: 0.40s; }
.edi-glyphs-row img:nth-child(10) { transition-delay: 0.45s; }

.edi-glyphs-row.is-visible img {
  opacity: 0.85;
  transform: translateY(0) scale(1);
}
.edi-glyphs-row.is-visible img:hover {
  opacity: 1;
  transform: translateY(-2px) scale(1.18);
}
@media (prefers-reduced-motion: reduce) {
  .edi-glyphs-row img {
    transition: none !important;
    opacity: 0.85 !important;
    transform: none !important;
  }
}

/* Les listes de clients et de presse réagissent au survol, comme les onglets */
.edi-block--links a { display: block; }
.edi-block--links .roll { --c1: var(--ink); --c2: var(--grey); }

/* ---------- Colonne d'images ---------- */

.edi-shot { margin-bottom: 1px; }
.edi-shot > img,
.edi-shot > video {
  width: 100%;
  aspect-ratio: 234 / 241;
  object-fit: cover;
  display: block;
}

/* ---------- Bloc énoncé ---------- */

.edi-block__statement {
  max-width: 18ch;
  margin-top: 1.25em;
  font-family: "Outfit", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.035em;
}
.edi-block--service .edi-block__label {
  letter-spacing: .06em;
  text-transform: uppercase;
}

.brand-stone,
.brand-lena {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
}
.brand-stone { aspect-ratio: 16 / 9; container-type: inline-size; isolation: isolate; }
.brand-stone__base,
.brand-stone__layer {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
}
.brand-stone__base { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.brand-stone__cube { top: 22.685%; left: 20.365%; width: 2.76%; }
.brand-stone__cube-lines { top: 24.444%; left: 24.479%; width: .938%; }
.brand-stone__arrow { top: 23.796%; left: 26.771%; width: 6.354%; }
.brand-stone__brick { top: 42.5%; left: 69.167%; width: 12.708%; z-index: 2; }
.brand-stone__wordmark {
  position: absolute;
  top: 31.5%;
  left: 24.5%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  color: #000;
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.6rem, 10.4cqw, 6.5rem);
  font-weight: 600;
  line-height: .86;
  letter-spacing: -.045em;
  white-space: nowrap;
}
.brand-stone__wordmark span:last-child { margin-left: 25%; color: #545450; transform: translateX(45%); }
.brand-stone__date,
.brand-stone__caption {
  position: absolute;
  z-index: 1;
  color: #1b1b1b;
  font-family: "Outfit", sans-serif;
  font-size: clamp(.58rem, 1.6cqw, 1.85rem);
  font-weight: 600;
  white-space: nowrap;
}
.brand-stone__date { top: 23.5%; left: 73.9%; letter-spacing: .04em; }
.brand-stone__caption { top: 70%; left: 60.7%; letter-spacing: -.025em; }

.brand-lena {
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  background: #000;
}
.brand-lena__dots {
  position: absolute;
  top: 3%;
  left: 50%;
  z-index: 5;
  display: flex;
  gap: .38rem;
  transform: translateX(-50%);
}
.brand-lena__dots button {
  width: .42rem;
  height: .42rem;
  padding: 0;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  cursor: pointer;
}
.brand-lena__dots button[aria-selected="true"] { background: #fff; }
.brand-lena__stage { position: absolute; inset: 8% 4% 4%; }
.brand-lena__card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.brand-lena__card[data-brand-lena-slide="0"] { background: #332b28 url("/assets/img/lena/lena-photo.png") center / cover no-repeat; }
.brand-lena[data-slide="0"] .brand-lena__card[data-brand-lena-slide="0"],
.brand-lena[data-slide="1"] .brand-lena__card[data-brand-lena-slide="1"],
.brand-lena[data-slide="2"] .brand-lena__card[data-brand-lena-slide="2"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.brand-lena__topline,
.brand-lena__catalogue-head {
  position: absolute;
  top: 5%;
  left: 5%;
  right: 5%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-size: clamp(.48rem, 2.2cqw, .9rem);
  letter-spacing: .12em;
}
.brand-lena__menu { width: 1.2rem; height: .55rem; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.brand-lena__icons { letter-spacing: 0; opacity: .86; }
.brand-lena__hero-copy {
  position: absolute;
  right: 5%;
  bottom: 7%;
  left: 5%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  color: rgba(255,255,255,.88);
  font-family: "Outfit", sans-serif;
  font-size: clamp(.48rem, 1.8cqw, .75rem);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.brand-lena__chat { width: min(75%, 20rem); padding: .5rem .6rem; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.16); color: rgba(255,255,255,.68); font-size: clamp(.48rem, 1.8cqw, .72rem); letter-spacing: 0; text-transform: none; }
.brand-lena__chat b { float: right; color: #fff; }
.brand-lena__card--catalogue { padding: 13% 5% 5%; background: #f4f3ef; color: #111; font-family: "Outfit", sans-serif; }
.brand-lena__catalogue-head { top: 5%; color: #111; font-size: clamp(.45rem, 1.75cqw, .7rem); letter-spacing: .02em; }
.brand-lena__catalogue-head strong { font-size: 1.2em; letter-spacing: .12em; }
.brand-lena__catalogue-head span { margin-left: auto; margin-right: 1rem; color: #777; }
.brand-lena__catalogue-head small { color: #777; font-size: .8em; white-space: nowrap; }
.brand-lena__products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8% 4%; height: 100%; }
.brand-lena__products figure { display: flex; flex-direction: column; gap: .3rem; min-width: 0; margin: 0; }
.brand-lena__products figure > span { position: relative; display: block; aspect-ratio: 6 / 7; overflow: hidden; background: #ddd; }
.brand-lena__products img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .25s ease; }
.brand-lena__products img + img { opacity: 0; }
.brand-lena__products figure:hover img:first-child { opacity: 0; }
.brand-lena__products figure:hover img + img { opacity: 1; }
.brand-lena__products figcaption { overflow: hidden; color: #333; font-size: clamp(.42rem, 1.55cqw, .68rem); line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.brand-lena__assistant { position: absolute; right: 0; bottom: 0; width: 34%; padding: 4%; background: rgba(255,255,255,.92); box-shadow: -8px 0 24px rgba(0,0,0,.08); color: #111; font-family: "Outfit", sans-serif; font-size: clamp(.42rem, 1.45cqw, .62rem); }
.brand-lena__assistant strong { display: block; margin-bottom: .55rem; font-size: 1.1em; }
.brand-lena__assistant p { margin: 0 0 .55rem; line-height: 1.3; }
.brand-lena__assistant div { display: flex; align-items: center; gap: .3rem; color: #777; }
.brand-lena__assistant img { width: 1.5rem; aspect-ratio: 1 / 1.2; object-fit: cover; }
.brand-lena__card--product { background: #d9d1c5; }
.brand-lena__product-images { display: flex; width: 100%; height: 100%; }
.brand-lena__product-images img { width: 50%; height: 100%; object-fit: cover; }
.brand-lena__product-panel { position: absolute; right: 4%; bottom: 4%; width: 42%; padding: 5%; background: #fff; color: #111; font-family: "Outfit", sans-serif; font-size: clamp(.45rem, 1.55cqw, .68rem); }
.brand-lena__product-panel strong { letter-spacing: .12em; }
.brand-lena__product-panel h3 { margin: 18% 0 7%; font-size: clamp(.6rem, 2.2cqw, .9rem); line-height: 1.15; }
.brand-lena__product-panel p { display: flex; justify-content: space-between; margin: .45rem 0; color: #777; }
.brand-lena__product-thumb { width: 2.1rem; aspect-ratio: 6 / 7; overflow: hidden; margin: .8rem 0; }
.brand-lena__product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.brand-lena__product-panel .brand-lena__price { color: #111; font-size: 1.15em; }
.brand-lena__product-panel button { width: 100%; padding: .55rem; border: 0; background: #111; color: #fff; font: inherit; font-size: .9em; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .brand-lena__card,
  .brand-lena__products img { transition: none; }
}

/* ================= Tablette et mobile ================= */

/* ---------- Tablette : deux pistes opposées dans une hauteur fixe ---------- */

/* ---------- Mot-symbole en pierre ----------
   Composition en couches graphiques positionnées en pourcentage du conteneur. */

/* Le cadre est celui du CONTENU, pas celui du rendu : les objets ne remplissent
   qu'une fenêtre de 1187 × 737 dans le canevas de 1920 × 1080, et garder les
   marges vides aurait décalé le mot de 40px vers la droite et vers le haut —
   il ne serait plus tombé où était le logo texte. La scène garde donc les
   proportions d'origine et déborde du cadre, qui la recadre sur ses objets. */
.marque-pierre {
  position: absolute;
  /* le positionnement absolu part de la boîte de rembourrage de la colonne :
     20px le ramènent sur la marge du titre, là où était le logo texte */
  left: 20px;
  bottom: 20px;
  width: min(100% - 40px, 236px);
  aspect-ratio: 1187 / 737;
  isolation: isolate;
}

.marque-pierre__scene {
  position: absolute;
  top: -30.121%;
  left: -32.351%;
  width: 161.752%;
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  display: block;
}

.marque-pierre__obj {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.marque-pierre__bloc    { top: 31.852%; left: 19.844%; width: 24.375%; }
.marque-pierre__roche   { top: 20.370%; left: 36.771%; width: 29.167%; }
.marque-pierre__liquide { top: 34.630%; left: 32.031%; width: 49.167%; }
.marque-pierre__eclat   { top: 61.759%; left: 62.656%; width:  4.792%; }
.marque-pierre__cube    { top: 22.685%; left: 20.365%; width:  2.760%; }
.marque-pierre__lignes  { top: 24.444%; left: 24.479%; width:   .938%; }
.marque-pierre__fleche  { top: 23.796%; left: 26.771%; width:  6.354%; }
/* la brique de droite passe DEVANT le mot, comme dans le rendu d'origine */
.marque-pierre__brique  { top: 42.500%; left: 69.167%; width: 12.708%; z-index: 2; }

.marque-pierre__mot {
  position: absolute;
  top: 31.5%;
  left: 24.5%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  color: #000;
  font-family: "Outfit", "Segoe UI", system-ui, sans-serif;
  font-size: 10.4cqw;
  font-weight: 600;
  line-height: .86;
  letter-spacing: -.045em;
  white-space: nowrap;
}
.marque-pierre__mot span:last-child {
  margin-left: 25%;
  color: #545450;
  transform: translateX(45%);
}

/* Le logo texte du pied n'a plus lieu d'être : la pierre le remplace, et
   mène elle aussi à l'accueil. */
.page--edi ~ .p-foot { display: none; }

/* Sous 1200px il n'y a plus de colonne de gauche : elle devient un bandeau de
   tête, et la colonne ne sert plus de repère au positionnement absolu. La
   pierre reprend donc le fil, sous le titre. */
@media (max-width: 1199px) {
  .marque-pierre {
    /* relative et non statique : la scène est posée en absolu DANS le cadre,
       sans repère positionné elle irait se caler sur la page entière */
    position: relative;
    left: auto;
    bottom: auto;
    width: min(100%, 190px);
    margin-top: 16px;
  }
}

/* ================= Tablette et mobile ================= */

@media (max-width: 1199px) {
  html, body { height: auto; overflow: visible; overscroll-behavior: auto; }

  .page--edi {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: 3px;
    margin-top: 50px;
    padding: 0 0 0 3px;
    /* Sans pied de page, la fenêtre s'arrête au bas de l'écran : la page
       ne défile plus du tout. */
    height: calc(100vh - 50px);
    height: calc(100dvh - 50px);
    overflow: hidden;
  }

  .edi-side.page__title {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .edi-shots { grid-column: 1; grid-row: 1; padding: 0 3px; }
  .edi-info { grid-column: 2; grid-row: 1; padding: 0 3px; position: relative; }
  .edi-col { overflow: hidden; height: 100%; }

  /* Images de 121 × 125 à 390 px, bord à bord */
  .edi-shot { margin-bottom: 0; }
  .edi-shot > img,
  .edi-shot > video { aspect-ratio: 121 / 125; }

  .edi-block__statement { font-size: 18px; }

  .edi-scroller {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow-y: scroll;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .edi-scroller::-webkit-scrollbar { display: none; }
  .edi-scroller > div { height: 100000px; }

}