/* Réalisations : le titre, trois études de cas et la relance. Voir docs/PLAN.md, 6.4 et 7.4.

   Deux états :
   - statique (sans JS, mouvement réduit) : avant et après côte à côte, tout est visible ;
   - animé (.realisations.est-anime, posé par js/sections/realisations.js) : scène collante de 100svh,
     la fenêtre bascule de l’avant à l’après par un volet en translation.
   Le contenu des fenêtres est la seule exception à la règle de couleur : ce sont des captures de clients. */

.realisations {
  padding-block: 0 var(--pas);
  background: var(--lavis-cyan);
}

/* Introduction (v6) : plus de visuel ni d’écran à elle, le titre ouvre directement la première étude
   de cas. */

.realisations__intro {
  padding-top: var(--pas);
}

.realisations__entete {
  display: grid;
  gap: clamp(20px, 2.4vw, 36px);
}

.realisations__titre {
  max-width: 14ch;
}

.realisations__chapo {
  max-width: 24em;
  font-size: var(--t-grand);
  font-variation-settings: "opsz" 28;
  font-weight: 380;
  line-height: 1.4;
  color: var(--texte);
}

/* Une étude de cas, état statique */

.cas {
  margin-top: var(--pas);
}

/* La première étude suit le titre de près : il en est l’en-tête. */
.realisations__intro + .cas {
  margin-top: clamp(40px, 6vw, 88px);
}

.cas__scene {
  display: grid;
  row-gap: 20px;
  padding-inline: var(--marge);
}

.cas__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
}

.cas__client {
  font-size: clamp(1.625rem, 2.6vw, 2.75rem);
  font-variation-settings: "opsz" 48;
  font-weight: 350;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* Le vrai site, en ligne : la preuve que le cas existe. */
.cas__site {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -12px;
  gap: 6px;
  font-family: var(--grotesque);
  font-size: var(--t-petit);
  white-space: nowrap;
}

.cas__fleche {
  width: 1em;
  height: 1em;
}

.cas__cadre {
  min-width: 0;
}

.cas__fenetre {
  position: relative;
  margin: 0;
}

.cas__etiquettes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gouttiere);
  margin-bottom: 10px;
  font-family: var(--grotesque);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre);
}

/* v6 : des écrans sans cadre de navigateur, posés comme des objets (docs/PLAN.md, 19). État statique :
   l’avant et le haut de l’après côte à côte ; une création n’occupe que la première colonne. */
.cas__ecran {
  --r-ecran: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gouttiere);
}

.cas__avant,
.cas__apres {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: clip;
  border: 1px solid var(--filet);
  border-radius: var(--r-ecran);
  background: var(--blanc);
  box-shadow: var(--ombre-ecran);
}

.cas__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.cas__front {
  display: none;
}

.cas__resultat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 20px;
  color: var(--texte);
}

/* Chiffres et légendes en grotesque : la hiérarchie se lit d’un coup d’œil. */
.cas__chiffre {
  font-family: var(--grotesque);
  font-size: clamp(3rem, 7vw, 7.5rem);
  font-weight: 400;
  line-height: .85;
  letter-spacing: -0.06em;
  color: var(--encre);
  white-space: nowrap;
}

.cas__legende {
  max-width: 30em;
  font-family: var(--grotesque);
  font-size: var(--t-petit);
  line-height: 1.45;
}

/* Détails, dans le flux sous la scène */

.cas__details {
  display: grid;
  gap: 32px var(--gouttiere);
  margin-top: clamp(32px, 4vw, 56px);
}

.cas__faits {
  display: grid;
  gap: 24px var(--gouttiere);
  margin: 0;
}

.cas__intitule {
  font-family: var(--grotesque);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre);
}

.cas__texte {
  margin: 6px 0 0;
  max-width: 34em;
  color: var(--texte);
}

.cas__parole {
  margin: 0;
}

.cas__citation {
  margin: 0;
  font-size: clamp(1.375rem, 2.1vw, 2.125rem);
  font-variation-settings: "opsz" 48;
  font-style: italic;
  font-weight: 350;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--encre);
}

.cas__signature {
  margin-top: 12px;
  font-family: var(--grotesque);
  font-size: var(--t-petit);
  color: var(--texte);
}

.realisations__relance {
  margin-top: var(--pas);
}

.realisations__lien .cta__texte {
  font-size: clamp(1.5rem, 2.6vw, 2.5rem);
  font-variation-settings: "opsz" 48;
  font-weight: 350;
  letter-spacing: -0.015em;
}

/* Téléphone : on montre quand même le site en format ordinateur (demande du 20 septembre), pour que
   les études de cas se comparent à l'identique d'un écran à l'autre. Les deux écrans passent donc l'un
   au-dessus de l'autre, et le titre du cas se resserre. */
@media (max-width: 719.98px) {
  .cas__client {
    font-size: clamp(1.25rem, 5.4vw, 1.625rem);
  }

  .cas__ecran {
    --r-ecran: 8px;
    grid-template-columns: minmax(0, 1fr);
  }

  .cas__etiquettes {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1080px) {
  .cas__details {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .cas__faits {
    grid-column: 1 / span 7;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cas__parole {
    grid-column: 9 / -1;
  }
}

/* État animé : une scène collante par cas, le volet bascule au défilement. */

.realisations.est-anime .cas {
  margin-top: 0;
}

/* Balayage (30 % de la course), pause, puis descente dans le nouveau site (50 %). v6 : pistes allongées
   d’environ 15 % à la demande de l’utilisateur, la descente se lit plus posément. */
.realisations.est-anime .cas__piste {
  height: 350svh;
}

.realisations.est-anime .cas--creation .cas__piste {
  height: 260svh;
}

.realisations.est-anime .cas + .cas {
  margin-top: clamp(40px, 6vw, 96px);
}

/* La scène collante porte déjà la marge de l’en-tête : la première étude se colle au titre. */
.realisations.est-anime .cas:first-of-type {
  margin-top: 0;
}

.realisations.est-anime .cas__scene {
  position: sticky;
  top: 0;
  height: 100svh;
  /* En-tête puis fenêtre ; la ligne du résultat n’existe que s’il y a un chiffre. */
  grid-template-rows: auto minmax(0, 1fr);
  grid-auto-rows: auto;
  padding-block: calc(var(--h-entete) + 16px) clamp(20px, 3.5svh, 36px);
}

.realisations.est-anime .cas__cadre {
  display: grid;
  place-items: center;
  container-type: size;
}

/* La largeur se déduit de la hauteur disponible : étiquettes (28 px), puis l’écran en 16:10. */
.realisations.est-anime .cas__fenetre {
  width: min(100cqw, calc((100cqh - 28px) * 1.6));
}

.realisations.est-anime .cas__etiquettes {
  position: relative;
  display: block;
  height: 18px;
  margin-bottom: 10px;
}

.realisations.est-anime .cas__etiquette {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  will-change: transform;
}

/* La fenêtre porte le cadre ; l’avant la remplit, l’après (trois écrans de haut) y glisse puis y remonte. */
.realisations.est-anime .cas__ecran {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: clip;
  border: 1px solid var(--filet);
  border-radius: var(--r-ecran);
  background: var(--blanc);
  box-shadow: var(--ombre-ecran);
}

.realisations.est-anime .cas__avant,
.realisations.est-anime .cas__apres {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.realisations.est-anime .cas__apres {
  bottom: auto;
}

.realisations.est-anime .cas__apres .cas__image {
  height: auto;
}

.realisations.est-anime .cas__volet {
  position: absolute;
  inset: 0;
  overflow: clip;
  transform: translateX(100%);
  will-change: transform;
}

.realisations.est-anime .cas__apres {
  transform: translateX(-100%);
  will-change: transform;
}

/* Une création n’a pas d’avant : le nouveau site est là d’emblée, il ne fait que descendre. */
.realisations.est-anime .cas--creation .cas__volet,
.realisations.est-anime .cas--creation .cas__apres {
  transform: none;
}

.realisations.est-anime .cas__front {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 1px;
  background: var(--encre);
  opacity: 0;
  will-change: transform, opacity;
}

.realisations.est-anime .cas__resultat {
  opacity: 0;
  will-change: opacity;
}

.realisations.est-anime .cas__details {
  margin-top: clamp(24px, 3vw, 40px);
}

@media (max-width: 719.98px) {
  .realisations.est-anime .cas__piste {
    height: 320svh;
  }

  .realisations.est-anime .cas--creation .cas__piste {
    height: 245svh;
  }

  .realisations.est-anime .cas__scene {
    padding-bottom: 14px;
  }

  .realisations.est-anime .cas__fenetre {
    width: min(100cqw, calc((100cqh - 28px) * 1.6));
  }

  .realisations.est-anime .cas__chiffre {
    font-size: 2.25rem;
  }

  .realisations.est-anime .cas__legende {
    font-size: var(--t-petit);
  }
}