/* ==========================================================================
   MAFOTO — Les chantiers                                          [CREATE]
   ==========================================================================
   Relevé sur createstudio.framer.media : héros plein cadre, texte posé DANS
   l'image en bas à gauche, filet horizontal au-dessus du sur-titre, méta en
   monospace dans les coins. Rien d'autre. La photo fait tout le travail.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LA SECTION
   Chapitre sombre : c'est lui qui déclenche la couture diagonale (voir
   css/opening.css §5), puisque c'est là que la page change de couleur.
   -------------------------------------------------------------------------- */
/* La couleur, l'encre et la couture viennent de `.section--dark`
   (css/editorial.css + css/opening.css §5) : ici, seule la mise en page. */
.projets { padding-bottom: 0; }
/* Les héros sont PLEIN CADRE : on annule la gouttière de `.section`, qui vaut
   pour du texte, pas pour une photo qui doit toucher les deux bords. */
.projets__list {
  display: grid;
  margin-inline: calc(-1 * var(--gutter));
}

/* --------------------------------------------------------------------------
   2. UN HÉROS DE CHANTIER
   -------------------------------------------------------------------------- */
.shot {
  position: relative;
  display: block;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;                 /* c'est ici que le zoom est rogné */
  color: #fff;
  isolation: isolate;
}
/* Une seule séparation entre deux chantiers — un filet, pas une marge : on
   veut que les images se touchent, comme une planche-contact. */
.shot + .shot { border-top: 1px solid rgba(255, 255, 255, .12); }

.shot__media { position: absolute; inset: 0; z-index: -2; }
.shot__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* --shot-zoom est écrit par js/ui/projects.js, image par image de
     défilement. 1 = cadrage complet, au centre de l'écran. */
  transform: scale(var(--shot-zoom, 1.16));
  transform-origin: 50% 50%;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .shot__media img { transform: none; }
}

/* Assombrissement en coin, pas plein cadre — même principe que l'ouverture :
   on protège le texte, on laisse la photo respirer. */
.shot__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, rgba(4, 4, 10, .74) 0%, rgba(4, 4, 10, .18) 32%, rgba(4, 4, 10, 0) 56%),
    linear-gradient(90deg, rgba(4, 4, 10, .48) 0%, rgba(4, 4, 10, 0) 46%);
  pointer-events: none;
}

.shot__body {
  position: absolute;
  left: var(--gutter);
  /* Dégagement calculé sur le dock, pas à l'œil : il flotte à 14 px du bas et
     mesure ~40 px. En dessous de ~95 px, la dernière ligne passe dessous. */
  bottom: clamp(96px, 15vh, 155px);
  display: grid;
  gap: 10px;
  max-width: min(46ch, calc(100% - var(--gutter) * 2));
}

/* Le filet qui se déploie : chez Create il entre par la gauche (x −100).
   Ici il se dessine sur place quand le chantier arrive à l'écran. */
.shot__rule {
  width: min(280px, 46vw);
  height: 1px;
  background: rgba(255, 255, 255, .55);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 900ms var(--ease);
}
.shot__eyebrow { color: rgba(255, 255, 255, .72); }
.shot__title {
  font-size: clamp(38px, 6.4vw, 88px);
  font-weight: var(--w-light);
  line-height: .96;
  letter-spacing: -0.035em;
}
.shot__tagline {
  font-size: var(--t-lead);
  line-height: 1.35;
  color: rgba(255, 255, 255, .78);
}

.shot__tags {
  position: absolute;
  left: var(--gutter);
  top: clamp(70px, 11vh, 120px);
  color: rgba(255, 255, 255, .6);
}
.shot__more {
  position: absolute;
  right: var(--gutter);
  /* Dégagement calculé sur le dock, pas à l'œil : il flotte à 14 px du bas et
     mesure ~40 px. En dessous de ~95 px, la dernière ligne passe dessous. */
  bottom: clamp(96px, 15vh, 155px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  transition: gap 400ms var(--ease), border-color 400ms var(--ease);
}
.shot:hover .shot__more { gap: 14px; border-color: #fff; }

/* Entrée : le texte monte, le filet se déploie. Déclenché par
   [data-reveal='in'], le même observateur que le reste de la page. */
.shot__body > *:not(.shot__rule),
.shot__tags,
.shot__more {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
.shot[data-reveal='in'] .shot__rule { transform: scaleX(1); }
.shot[data-reveal='in'] .shot__body > *:not(.shot__rule),
.shot[data-reveal='in'] .shot__tags,
.shot[data-reveal='in'] .shot__more { opacity: 1; transform: none; }

.shot[data-reveal='in'] .shot__eyebrow  { transition-delay: 120ms; }
.shot[data-reveal='in'] .shot__title    { transition-delay: 200ms; }
.shot[data-reveal='in'] .shot__tagline  { transition-delay: 300ms; }
.shot[data-reveal='in'] .shot__tags     { transition-delay: 380ms; }
.shot[data-reveal='in'] .shot__more     { transition-delay: 440ms; }

@media (prefers-reduced-motion: reduce) {
  .shot__rule { transform: scaleX(1); }
  .shot__body > *, .shot__tags, .shot__more {
    opacity: 1; transform: none; transition: none;
  }
}

/* Le dock flotte à 14 px du bas sur 45 px de haut : il occupe la bande 14–59.
   « Voir le chantier » était posé à 20 px — donc DERRIÈRE la pastille de
   verre, illisible et intouchable. Tout le bloc remonte au-dessus du dock. */
@media (max-width: 640px) {
  .shot { height: 78svh; }
  .shot__more { right: auto; left: var(--gutter); bottom: 76px; }
  .shot__body { bottom: 124px; }
  .shot__tags { display: none; }
}

/* ==========================================================================
   3. LE PANNEAU DE CHANTIER
   Une page qui n'en est pas une : elle glisse par-dessus, écrit son adresse
   dans l'URL, et le bouton Précédent la referme.
   ========================================================================== */
/* La visibilité ne se coupe qu'à la FIN de la sortie — sinon le panneau
   disparaît d'un coup et on ne voit jamais l'animation de retour. D'où le
   `transition: visibility 0s 480ms` : la bascule vers `hidden` est RETARDÉE
   de la durée du glissement, l'ouverture reste instantanée.

   CE QUI ÉTAIT FAUX : l'état fermé forçait `visibility: visible` au lieu de
   retarder `hidden`. Les deux panneaux restaient donc peints en permanence,
   garés juste hors écran à droite — et leur ombre portée de 120 px bavait sur
   toute la hauteur de la page. C'est la bande sombre visible à droite, et il
   y en avait DEUX superposées (chantier + service). */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 210;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s 480ms;
}
.sheet[data-open='true'] {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s 0s;
}

/* La page ne défile plus derrière le panneau. `overscroll-behavior: contain`
   sur le panneau empêche le chaînage quand on arrive au bout ; ceci empêche le
   défilement quand le curseur est sur le voile. Les deux sont nécessaires. */
body[data-sheet='open'] { overflow: hidden; }

.sheet__veil {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 10, .62);
  backdrop-filter: blur(18px) saturate(.9);
  -webkit-backdrop-filter: blur(18px) saturate(.9);
  opacity: 0;
  transition: opacity 460ms var(--ease);
  cursor: zoom-out;
}
.sheet[data-open='true'] .sheet__veil { opacity: 1; }

.sheet__panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(880px, 100%);
  background: var(--paper);
  color: var(--ink-1);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 520ms var(--ease);
  box-shadow: -40px 0 120px rgba(0, 0, 0, .45);
}
.sheet[data-open='true'] .sheet__panel { transform: none; }

.sheet__close {
  position: absolute;
  top: var(--gutter);
  right: var(--gutter);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(10, 10, 14, .45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  opacity: 0;
  transition: opacity 300ms var(--ease) 260ms, background 300ms var(--ease);
}
.sheet[data-open='true'] .sheet__close { opacity: 1; }
.sheet__close:hover { background: rgba(10, 10, 14, .78); }

/* Le libellé n'apparaît qu'au doigt — même règle que la visionneuse. */
.sheet__label-close { display: none; }

/* --------------------------------------------------------------------------
   LA SORTIE DOIT SE VOIR SUR UN TÉLÉPHONE
   Le panneau prend tout l'écran : il n'y a plus aucun repère de page derrière
   lui, donc plus rien qui dise comment revenir. Une croix blanche de 44 px
   posée sur un ciel de midi ne suffit pas. On la nomme, et on la cale sous
   l'encoche.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .sheet__close {
    top: max(var(--gutter), env(safe-area-inset-top));
    width: auto;
    height: 46px;
    grid-auto-flow: column;
    gap: 8px;
    padding: 0 17px 0 14px;
    border-radius: var(--radius-pill);
    border-color: rgba(255, 255, 255, .34);
    background: rgba(10, 10, 14, .74);
    font-size: var(--t-body);
    font-weight: var(--w-medium);
  }
  .sheet__label-close { display: inline; }
  /* La barre de gestes d'iOS mange la fin du panneau : on lui rend sa place. */
  .sheet__foot, .svc__foot { padding-bottom: calc(clamp(40px, 7vh, 76px) + env(safe-area-inset-bottom)); }
}

/* --- Héros du panneau --------------------------------------------------- */
.sheet__hero {
  position: relative;
  height: min(58svh, 520px);
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}
.sheet__hero img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: sheet-settle 1.2s cubic-bezier(.68, 0, .2, .89) both;
}
.sheet__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(4, 4, 10, .82) 0%, rgba(4, 4, 10, .1) 62%, rgba(4, 4, 10, 0) 100%);
}
.sheet__title {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--gutter);
  display: grid;
  gap: 8px;
}
.sheet__rule {
  width: 180px;
  height: 1px;
  background: rgba(255, 255, 255, .6);
  animation: sheet-rule 900ms var(--ease) both;
}
.sheet__eyebrow { color: rgba(255, 255, 255, .72); }
.sheet__title h2 {
  font-size: clamp(30px, 4.6vw, 56px);
  font-weight: var(--w-light);
  line-height: 1;
  letter-spacing: -0.035em;
}
.sheet__tagline { font-size: var(--t-lead); color: rgba(255, 255, 255, .8); }

/* --- Méta --------------------------------------------------------------- */
.sheet__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 22px;
  padding: 32px var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.sheet__meta dt { color: var(--ink-3); margin-bottom: 6px; }
.sheet__meta dd { font-size: var(--t-body); }

/* --- La phrase ---------------------------------------------------------- */
.sheet__statement {
  padding: clamp(40px, 7vh, 76px) var(--gutter);
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: var(--w-light);
  line-height: 1.25;
  letter-spacing: -0.025em;
  max-width: 26ch;
}

/* --- Contexte / Ce qu'on fait / Ce que ça change ------------------------ */
.sheet__blocks { display: grid; gap: 44px; padding: 0 var(--gutter) clamp(40px, 7vh, 76px); }
.sheet__blocks section {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 6px 24px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.sheet__label { color: var(--ink-3); grid-row: span 2; }
.sheet__lead { font-size: var(--t-lead); line-height: 1.3; }
.sheet__body { font-size: var(--t-body); line-height: 1.55; color: var(--ink-2); max-width: 58ch; }
@media (max-width: 620px) {
  .sheet__blocks section { grid-template-columns: 1fr; }
  .sheet__label { grid-row: auto; margin-bottom: 4px; }
}

/* --- Médias ------------------------------------------------------------- */
.sheet__gallery { display: grid; gap: 10px; padding: 0 var(--gutter); }
.sheet__media { display: grid; gap: 8px; }
.sheet__media img,
.sheet__media video {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: #0b0b0c;
}
.sheet__media figcaption { color: var(--ink-3); }
.sheet__media--film video { aspect-ratio: 16 / 9; object-fit: cover; }

.sheet__foot { padding: clamp(40px, 7vh, 76px) var(--gutter); }

@media (prefers-reduced-motion: reduce) {
  .sheet__panel, .sheet__veil, .sheet__close { transition-duration: 1ms; }
  .sheet__hero img, .sheet__rule { animation: none; }
}

/* ==========================================================================
   4. LE PANNEAU DE SERVICE
   Même châssis que le panneau de chantier (.sheet), contenu différent.
   ========================================================================== */
.svc__head {
  padding: clamp(56px, 9vh, 96px) var(--gutter) 32px;
  border-bottom: 1px solid var(--rule);
}
.svc__eyebrow { color: var(--ink-3); }
.svc__title {
  margin-top: 10px;
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: var(--w-light);
  line-height: 1;
  letter-spacing: -0.035em;
}
.svc__pitch {
  max-width: 46ch;
  margin-top: 14px;
  font-size: var(--t-lead);
  line-height: 1.35;
  color: var(--ink-2);
}
.svc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 26px 44px;
  margin-top: 28px;
}
.svc__meta dt { color: var(--ink-3); margin-bottom: 5px; }
.svc__meta dd { font-size: var(--t-body); }

.svc__block { padding: clamp(34px, 5vh, 56px) var(--gutter) 0; }
.svc__label { color: var(--ink-3); margin-bottom: 18px; }

/* --- Les paliers ---------------------------------------------------------
   Une colonne par palier tant que ça tient, puis on empile. `auto-fit` avec
   un minimum de 210 px : à cinq formules (Séance Studio) ça descend
   proprement à deux rangées plutôt que d'écraser les listes. */
.svc-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.svc-tier {
  position: relative;
  padding: 20px 18px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .5);
}
.svc-tier--popular  { border-color: rgba(18, 18, 18, .3); }
.svc-tier--flagship { border-color: var(--beam); }
.svc-tier__flag {
  position: absolute;
  top: -9px;
  left: 16px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--ink-1);
  color: var(--paper);
  font-size: 10px;
}
.svc-tier--flagship .svc-tier__flag { background: var(--beam); color: #121212; }
.svc-tier__name { font-size: var(--t-body); font-weight: var(--w-medium); }
.svc-tier__price {
  margin: 6px 0 14px;
  font-size: 26px;
  font-weight: var(--w-light);
  letter-spacing: -0.03em;
}
.svc-tier__price span { font-size: var(--t-meta); color: var(--ink-3); }
.svc-tier__list { list-style: none; padding: 0; display: grid; gap: 7px; }
.svc-tier__list li {
  position: relative;
  padding-left: 16px;
  font-size: var(--t-body);
  line-height: 1.4;
  color: var(--ink-2);
}
.svc-tier__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 7px;
  height: 1px;
  background: var(--ink-3);
}

/* --- La grille tarifaire (identité, impression) --------------------------- */
.svc-table__wrap { overflow-x: auto; }
.svc-table { width: 100%; border-collapse: collapse; font-size: var(--t-body); }
.svc-table th {
  text-align: left;
  padding: 0 16px 10px 0;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.svc-table td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
}
.svc-table td:first-child { color: var(--ink-1); }

/* --- À la carte ----------------------------------------------------------
   La ligne la plus rentable du catalogue mérite d'être lisible : un libellé à
   gauche, un prix à droite, un filet entre les deux. Pas une carte de plus. */
.svc-extras { list-style: none; padding: 0; display: grid; gap: 2px; max-width: 62ch; }
.svc-extras li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.svc-extras__label { font-size: var(--t-body); }
.svc-extras__price {
  margin-left: auto;
  white-space: nowrap;
  font-size: var(--t-body);
  font-weight: var(--w-medium);
}
.svc-extras__price em { font-style: normal; font-weight: var(--w-normal); color: var(--ink-3); }

/* --- Conditions et réserve ------------------------------------------------ */
.svc__conditions { list-style: none; padding: 0; display: grid; gap: 10px; max-width: 62ch; }
.svc__conditions li {
  position: relative;
  padding-left: 20px;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--ink-2);
}
.svc__conditions li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .6em;
  width: 10px;
  height: 1px;
  background: var(--ink-3);
}

/* Le tarif non confirmé est signalé, pas caché : un prix inventé présenté
   comme public, c'est une promesse qu'on ne pourra pas tenir. */
.svc__note {
  margin: clamp(34px, 5vh, 56px) var(--gutter) 0;
  padding: 14px 16px;
  border-left: 2px solid var(--beam);
  background: rgba(255, 192, 0, .08);
  color: var(--ink-2);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.5;
}

.svc__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: clamp(40px, 7vh, 76px) var(--gutter);
}

@keyframes sheet-settle {
  from { transform: scale(1.18); opacity: .001; }
  to   { transform: scale(1);    opacity: 1; }
}
@keyframes sheet-rule {
  from { transform: scaleX(0); transform-origin: 0 50%; }
  to   { transform: scaleX(1); transform-origin: 0 50%; }
}