/* Forme 6 « L'éclaté » : le modèle 3D en couches descend avec la page, à côté des blocs. */
.tf--eclate { padding-top: clamp(44px, calc(5 * var(--vw, 1vw)), 90px); }
.tf-ec-grille { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, calc(4 * var(--vw, 1vw)), 80px); align-items: stretch; }

/* la colonne des textes : le hero, puis un bloc par couche, chacun d'une hauteur d'écran environ (--tf-vh : la hauteur
   de l'écran dans les unités de la page zoomée, posée par script.js) */
.tf-ec-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-height: calc(var(--tf-vh, 1vh * 100) * .8); justify-content: center; }
.tf--eclate h1 { font-size: clamp(52px, calc(6.2 * var(--vw, 1vw)), 112px); }
.tf-ec-chapo { font-size: var(--r-texte-intro); line-height: 1.55; color: var(--t2); max-width: 580px; }
.tf-ec-suivie { margin-top: 10px; padding-top: 16px; border-top: 1px dashed var(--ligne2); font-size: 15.5px; line-height: 1.5; color: var(--t2); max-width: 580px; }
/* Le cahier des charges du projet (DataCell, revue du 29 octobre) : une carte blanche, l'objectif en avant, les
   consignes en liste. */
.tf-ec-cahier { margin-top: 10px; max-width: 580px; padding: 22px 24px; background: #fff; border: 1px solid var(--ligne); border-radius: 14px; box-shadow: 0 1px 2px rgba(31,36,46,.06); text-align: start; }
.tf-ec-cahier-ex { margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px dashed var(--ligne2); font-size: 14.5px; line-height: 1.5; color: var(--t2); }
.tf-ec-cahier-ex b { display: table; margin-bottom: 9px; padding: 5px 10px; border-radius: 8px; background: var(--encre); color: #fff; font: 600 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.tf-ec-cahier-t { font: 600 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--o-f); }
.tf-ec-cahier-o { margin-top: 12px; padding-bottom: 14px; border-bottom: 1px dashed var(--ligne2); font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--encre); }
.tf-ec-cahier-o span { display: block; margin-bottom: 4px; font: 500 12px/1.2 var(--mono); letter-spacing: .04em; color: var(--t3); }
.tf-ec-cahier ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tf-ec-cahier li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.45; color: var(--t2); }
.tf-ec-cahier li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 10px; height: 1.5px; background: var(--o); }
.tf-ec-suivie b { display: block; margin-bottom: 4px; font: 600 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--o-f); }
.tf-ec-bloc { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; min-height: calc(var(--tf-vh, 1vh * 100) * .5); padding: 20px 0;   /* Théo, 28/10 : « rapproche un peu les blocs » (avant : 92 % de l'écran) */ transition: opacity .5s var(--e); }
.rt-js .tf-ec-bloc:not(.is-actif) { opacity: .32; }
.tf-ec-bloc-img { display: none; }
.tf-ec-rang { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.tf-ec-rang .tf-num { font-size: clamp(44px, calc(3.6 * var(--vw, 1vw)), 64px); line-height: .8; color: var(--o); }
.tf-ec-couche { font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--t3); padding: 6px 8px; border: 1px solid var(--ligne2); border-radius: 8px; }
.tf-ec-bloc h2 { font-size: clamp(36px, calc(3.4 * var(--vw, 1vw)), 60px); line-height: 1; letter-spacing: -.045em; font-weight: 600; text-wrap: balance; }
.tf-ec-t { font-size: var(--r-texte-intro); line-height: 1.6; color: var(--t2); max-width: 560px; }
.tf-ec-bloc .tf-lignes { width: 100%; max-width: 560px; }

/* la colonne du modèle : le modèle y descend par translation (script.js) */
.tf-ec-droite { position: relative; min-width: 0; }
.tf-ec-modele { position: absolute; left: 0; right: 0; top: 0; margin: 0; will-change: transform; }
.tf-ec-pile { position: relative; width: 78%; margin: 0 auto 0 4%; }
.tf-ec-c { position: absolute; left: 0; top: 0; display: block; width: 100%; height: auto; transition: transform .7s var(--e), filter .5s var(--e), opacity .5s var(--e); }
.tf-ec-pile.is-guide .tf-ec-c:not(.is-actif) { filter: grayscale(1) contrast(.86) brightness(1.06); }   /* en maquette grise, opaques : le trait reste derrière ; seule la couche lue garde son orange */
/* la donnée entre deux couches : un trait orange qui monte, sans halo */
.tf-ec-lien { position: absolute; width: 4px; margin-left: -2px; background: repeating-linear-gradient(to top, var(--o) 0 14px, #FFB089 14px 22px); background-size: 4px 22px; transition: top .7s var(--e), height .7s var(--e); animation: tf-ec-monte .6s linear infinite; }
@keyframes tf-ec-monte { to { background-position: 0 -22px; } }
/* l'étiquette de chaque couche, à droite de son coin */
.tf-ec-e { position: absolute; display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: baseline; padding-left: 26px; white-space: nowrap; transition: top .7s var(--e), opacity .5s var(--e); }
.tf-ec-e::before { content: ""; position: absolute; left: 0; top: .62em; width: 18px; height: 1px; background: var(--encre); }
.tf-ec-e-n { font: 600 14px/1.2 var(--mono); color: var(--o-f); }
.tf-ec-e-p { font: 600 13px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--encre); }
.tf-ec-e-v { grid-column: 2; margin-top: 4px; font: 500 14px/1.2 var(--mono); color: var(--o-f); max-height: 0; overflow: hidden; transition: max-height .4s var(--e); }
.tf-ec-pile.is-guide .tf-ec-e:not(.is-actif) { opacity: .45; }
.tf-ec-e.is-actif .tf-ec-e-v { max-height: 2em; }

.tf-ec-fin { margin-top: clamp(80px, calc(8 * var(--vw, 1vw)), 140px); }

@media (max-width: 900px) {
  .tf-ec-grille { grid-template-columns: minmax(0, 1fr); }
  .tf-ec-hero { min-height: 0; align-items: center; text-align: center; }
  .tf-ec-hero .tf-ctas { justify-content: center; }
  .tf-ec-suivie { text-align: start; }
  .tf-ec-droite { order: -1; display: none; }
  .tf-ec-bloc { min-height: 0; padding: 56px 0 0; opacity: 1 !important; }
  .tf-ec-bloc-img { display: block; width: 100%; height: auto; margin: 14px 0 0; }
  .tf-ec-hero .tf-ec-bloc-img { margin-top: 8px; }
  .tf-ec-bloc { transition: none; }
  div.tf-ec-bloc-img .tf-ec-a { transition: none; }
  .tf-ec-bloc h2, .tf-ec-rang { align-self: center; text-align: center; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .tf-ec-c, .tf-ec-lien, .tf-ec-e { transition: none; }
  .tf-ec-lien { animation: none; }
}

/* Version 2 (DataCell, 28 octobre) : un vrai site en étages, l'étage 1 en haut, cinq déroulés (script.js). Par étage :
   l'image fixe, l'étage vide et son « arrivée » (les assets se posent), la boucle de 4 s, et les étiquettes posées en
   2D comme dans les films (un cartouche, un trait fin, une pastille sur le composant). */
.tf-ec-droite { overflow-x: clip; }
.tf-ec-modele--v2 .tf-ec-pile { width: 100%; margin: 0; }
.tf-ec-modele--v2 .tf-ec-c { transition: filter .5s var(--e), opacity .2s linear; will-change: transform, opacity; }   /* chaque étage dans son calque : déplacé par la carte graphique sans être repeint, gris compris (2/11, fluidité) */
.tf-ec-modele--v2 .tf-ec-c img, div.tf-ec-bloc-img img { display: block; width: 100%; height: auto; }
.tf-ec-c video, .tf-ec-bloc-img video, .tf-ec-vide { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .25s var(--e); }
.tf-ec-c.is-video:not(.is-vide) .tf-ec-v-boucle, .tf-ec-bloc-img.is-video video { opacity: 1; }
.tf-ec-c.is-vide .tf-ec-vide { opacity: 1; }
.tf-ec-c.is-arrivee .tf-ec-v-arrivee { opacity: 1; }
div.tf-ec-bloc-img { position: relative; }
.tf-ec-modele--v2 .tf-ec-pile.is-guide .tf-ec-c:not(.is-actif) { filter: saturate(.3) contrast(.92) brightness(1.04); }
/* les étiquettes : seulement sur l'étage lu, meublé (sur téléphone, toujours) */
.tf-ec-a { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -100%); opacity: 0; transition: opacity .4s var(--e); pointer-events: none; }
.tf-ec-a b { padding: 7px 11px; background: #fff; border: 1px solid var(--ligne2); border-radius: 8px; font: 600 15px/1.25 var(--r-police); letter-spacing: -.01em; color: var(--encre); white-space: nowrap; }
.tf-ec-a i { position: relative; width: 1px; height: 34px; background: var(--encre); }
.tf-ec-a i::after { content: ""; position: absolute; left: -4px; bottom: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--o); }
.tf-ec-c.is-actif:not(.is-vide):not(.is-arrivee) .tf-ec-a, div.tf-ec-bloc-img .tf-ec-a { opacity: 1; }
div.tf-ec-bloc-img .tf-ec-a b { font-size: 12px; padding: 5px 8px; }
div.tf-ec-bloc-img .tf-ec-a i { height: 20px; }
/* la donnée qui tombe d'un étage à l'autre : la gaine sombre du câble, et l'impulsion orange à tête ronde (les films) */
.tf-ec-modele--v2 .tf-ec-lien { width: 3px; margin-left: -1.5px; background: #1c1f23; animation: none; overflow: hidden; transition: opacity .2s linear; }
.tf-ec-modele--v2 .tf-ec-lien::before, .tf-ec-modele--v2 .tf-ec-lien::after { content: ""; position: absolute; left: 50%; top: 0; animation: tf-ec-chute 1.4s linear infinite; }
.tf-ec-modele--v2 .tf-ec-lien::before { width: 4px; height: 70px; margin-left: -2px; background: linear-gradient(to bottom, rgba(255, 84, 1, 0), var(--o)); }
.tf-ec-modele--v2 .tf-ec-lien::after { width: 9px; height: 9px; margin: 64px 0 0 -4.5px; border-radius: 50%; background: var(--o); }
@keyframes tf-ec-chute { from { transform: translateY(-80px); } to { transform: translateY(var(--h, 400px)); } }
.tf-ec-modele--v2 .tf-ec-e { transition: opacity .5s var(--e); }
.tf-ec-modele--v2 .tf-ec-e-v { display: none; }   /* les valeurs longues débordaient : la donnée est déjà dans le bloc */
@media (prefers-reduced-motion: reduce) {
  .tf-ec-modele--v2 .tf-ec-lien::before, .tf-ec-modele--v2 .tf-ec-lien::after { animation: none; display: none; }
}

/* Les bulles de la pile : un calque au-dessus de tous les étages, placé par script.js (l'étage lu seulement) */
.tf-ec-bulles { position: absolute; inset: 0; z-index: 60; pointer-events: none; }
.tf-ec-bulles .tf-ec-a { opacity: 0; transition: opacity .35s var(--e); }
.tf-ec-bulles .tf-ec-a.is-vu { opacity: 1; }
.tf-ec-a.is-droite { transform: translate(-88%, -100%); align-items: flex-end; }
.tf-ec-a.is-droite i { margin-right: 11%; }
.tf-ec-a.is-gauche { transform: translate(-12%, -100%); align-items: flex-start; }
.tf-ec-a.is-gauche i { margin-left: 11%; }

/* Le travelling (validé le 28/10) : chaque étage est posé par script.js (transform), depuis son coin haut gauche. */
.tf-ec-modele--v2 .tf-ec-c { transform-origin: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .tf-ec-modele--v2 .tf-ec-c { transition: none !important; }
}

/* ---------------------------------------------------------------- repasse responsive (28 octobre 2026)
   Théo : « une repasse complète en responsive, mobile et tablette ». Au-dessous de 900 px, chaque bloc est une colonne de
   lecture centrée (620 px au plus) sous son titre centré, et son étage 3D ne dépasse plus 680 px. */
@media (max-width: 900px) {
  .tf-ec-bloc, .tf-ec-hero { align-items: center; }
  .tf-ec-bloc > :not(h2):not(.tf-ec-rang):not(a), .tf-ec-hero > .tf-ec-suivie, .tf-ec-hero > .tf-ec-cahier { width: 100%; max-width: 620px; }
  .tf-ec-bloc-img { max-width: 680px; margin-left: auto; margin-right: auto; }
}