/* ===========================================================================
   LES SCÈNES, EXÉCUTÉES PAR LE NAVIGATEUR — TÉLÉPHONE
   Jusqu'ici, c'est le script qui faisait avancer chaque scène à mesure que la
   page défilait. Sur iPhone, le navigateur ne transmet la position au script
   que par à-coups pendant un geste : le mouvement avance par paliers.
   Safari 26 sait rattacher une animation CSS au défilement lui-même
   (`animation-timeline`). L'animation est alors calculée par le navigateur,
   à sa cadence, sans jamais passer par le script : elle ne peut plus hacher.
   Les pourcentages ci-dessous reprennent EXACTEMENT le minutage du script
   (voir plan(), ouverture(), chargement(), rideaux() dans js/site.js).
   Sur ordinateur, ce fichier ne s'applique pas : le script garde la main.
   =========================================================================== */
@supports (animation-timeline: view()) {
@media (max-width:900px){

  /* --- 1. L'OUVERTURE : le lettrage s'ouvre sur le hero ------------------ */
  .ouv{view-timeline-name:--tOuv;view-timeline-axis:block}
  /* La plaque masquée doit être gravée UNE fois puis agrandie par le
     compositeur : sans cette promotion en couche, Safari regrave le masque
     à chaque image et le lettrage saccade. */
  .ouv-voile,.ouv-marque,.charge-svg,.rideau-svg{
    will-change:transform;backface-visibility:hidden;
  }
  /* La taille de départ du lettrage était fournie par le script (76vw sur
     téléphone pour l'ouverture, 11,5vw pour la console, ~10,7vw pour le
     rideau). Le script ne pilote plus ces scènes : on la pose ici, sinon le
     lettrage démarre à la taille de secours, beaucoup trop petite. */
  .ouv-voile,.ouv-marque{--base:76vw}
  .charge-voile{--base:11.5vw}
  .rideau-scene{--base:10.7vw}

  /* La barre de menu n'est PAS dans la scène d'ouverture : une animation
     rattachée à cette scène ne peut pas la trouver, et la laissait invisible.
     C'est donc le script qui la révèle (voir js/scenes-css.js). */

  /* Le « Découvrir l'agence… » du bas appartient à l'ouverture : il s'efface
     dès qu'on entre dans le hero, sinon il reste écrit par-dessus les photos. */
  .ouv-bas{
    animation:fHint 1s linear both;
    animation-timeline:--tOuv;animation-range:contain 0% contain 100%;
  }
  @keyframes fHint{ 0%{opacity:1} 18%{opacity:0} 100%{opacity:0} }

  .ouv-voile{
    animation:fOuvVoile 1s linear both;
    animation-timeline:--tOuv;animation-range:contain 0% contain 100%;
  }
  .ouv-marque{
    animation:fOuvMarque 1s linear both;
    animation-timeline:--tOuv;animation-range:contain 0% contain 100%;
  }
  @keyframes fOuvVoile{
    0%    {transform:scale(1);    opacity:1}
    14%   {transform:scale(2);    opacity:1}
    27.5% {transform:scale(5.9);  opacity:1}
    41%   {transform:scale(13.1); opacity:1}
    51%   {transform:scale(20.1); opacity:.12}
    55%   {transform:scale(23.5); opacity:0}
    100%  {transform:scale(23.5); opacity:0}
  }
  @keyframes fOuvMarque{
    0%{opacity:1} 5.5%{opacity:0} 100%{opacity:0}
  }

  /* Le zoom du hero. Sur ordinateur, le script le ramène de 1,06 à 1 pendant
     que le lettrage s'ouvre — c'est ce qui donne l'impression que la page
     s'installe. Il avait été oublié dans cette reprise : sur téléphone le
     hero restait donc agrandi de 6 % en permanence. Or la scène coupe à la
     hauteur d'écran, et un hero agrandi en dépasse : les deux cartes
     extérieures de l'éventail, qui sont justement les plus basses, se
     retrouvaient tranchées net. Même minutage que le script. */
  .ouv-scene > .hero{
    animation:fOuvZoom 1s linear both;
    animation-timeline:--tOuv;animation-range:contain 0% contain 100%;
  }
  @keyframes fOuvZoom{
    0%{transform:scale(1.06)} 55%{transform:scale(1)} 100%{transform:scale(1)}
  }

  /* --- 2. LA CONSOLE : le terminal écrit, le lettrage s'ouvre ------------ */
  .charge{view-timeline-name:--tCharge;view-timeline-axis:block}
  .charge-term{
    animation:fTerm 1s linear both;
    animation-timeline:--tCharge;animation-range:contain 0% contain 100%;
  }
  @keyframes fTerm{ 0%{opacity:0} 10%{opacity:1} 50%{opacity:1} 56%{opacity:0} 100%{opacity:0} }
  .charge-lignes li{
    animation:fLigne 1s linear both;
    animation-timeline:--tCharge;animation-range:contain 0% contain 100%;
  }
  /* chaque ligne occupe sa tranche : le script fait pareil, à l'identique */
  .charge-lignes li:nth-child(1){animation-name:fL1}
  .charge-lignes li:nth-child(2){animation-name:fL2}
  .charge-lignes li:nth-child(3){animation-name:fL3}
  .charge-lignes li:nth-child(4){animation-name:fL4}
  .charge-lignes li:nth-child(5){animation-name:fL5}
  .charge-lignes li:nth-child(6){animation-name:fL6}
  @keyframes fLigne{ from{width:0} to{width:100%} }
  @keyframes fL1{ 0%,14%{width:0} 19%{width:100%} 100%{width:100%} }
  @keyframes fL2{ 0%,19%{width:0} 24%{width:100%} 100%{width:100%} }
  @keyframes fL3{ 0%,24%{width:0} 29%{width:100%} 100%{width:100%} }
  @keyframes fL4{ 0%,29%{width:0} 34%{width:100%} 100%{width:100%} }
  @keyframes fL5{ 0%,34%{width:0} 39%{width:100%} 100%{width:100%} }
  @keyframes fL6{ 0%,39%{width:0} 44%{width:100%} 100%{width:100%} }
  .charge-barre i{
    animation:fBarre 1s linear both;
    animation-timeline:--tCharge;animation-range:contain 0% contain 100%;
  }
  @keyframes fBarre{ 0%,14%{width:0%} 44%{width:100%} 100%{width:100%} }
  .charge-voile{
    animation:fPlaque 1s linear both;
    animation-timeline:--tCharge;animation-range:contain 0% contain 100%;
  }
  @keyframes fPlaque{ 0%{opacity:0} 18%{opacity:1} 88%{opacity:1} 100%{opacity:0} }
  .charge-svg{
    animation:fTrav 1s linear both;
    animation-timeline:--tCharge;animation-range:contain 0% contain 100%;
  }
  @keyframes fTrav{ 0%,55%{transform:scale(1)} 70%{transform:scale(2.4)} 85%{transform:scale(9)} 100%{transform:scale(22)} }
  .charge-mot-plein{
    animation:fMot 1s linear both;
    animation-timeline:--tCharge;animation-range:contain 0% contain 100%;
  }
  @keyframes fMot{ 0%,52%{opacity:0} 58%{opacity:1} 78%{opacity:1} 86%{opacity:0} 100%{opacity:0} }

  /* --- 3. LE CONSTAT : les deux tableaux se relaient --------------------- */
  #constat{view-timeline-name:--tConstat;view-timeline-axis:block}
  .plan-oeil,.plan-titre-1,.plan-titre-2,
  .plan-avant li,.plan-apres li,.plan-chute,.plan-chute mark{
    animation-timeline:--tConstat;animation-range:contain 0% contain 100%;
    animation-duration:1s;animation-timing-function:linear;animation-fill-mode:both;
  }
  .plan-oeil{animation-name:fOeil}
  @keyframes fOeil{ 0%{opacity:0;transform:translateY(20px)} 12%{opacity:1;transform:none} 100%{opacity:1;transform:none} }
  .plan-titre-1{animation-name:fT1}
  @keyframes fT1{
    0%{opacity:0;transform:translateY(20px) scale(1)}
    12%{opacity:1;transform:none}
    70%{opacity:1;transform:none}
    78%{opacity:0;transform:scale(.96)}
    100%{opacity:0;transform:scale(.96)}
  }
  .plan-titre-2{animation-name:fT2}
  @keyframes fT2{
    0%,70%{opacity:0;transform:scale(.96)}
    78%{opacity:1;transform:none}
    100%{opacity:1;transform:none}
  }
  .plan-avant li:nth-child(1){animation-name:fAv1}
  .plan-avant li:nth-child(2){animation-name:fAv2}
  .plan-avant li:nth-child(3){animation-name:fAv3}
  .plan-avant li:nth-child(4){animation-name:fAv4}
  @keyframes fAv1{ 0%,12%{opacity:0;transform:translateY(10px)} 22%{opacity:1;transform:none} 42%{opacity:1;transform:none} 48%,100%{opacity:0;transform:translateY(-12px)} }
  @keyframes fAv2{ 0%,16%{opacity:0;transform:translateY(10px)} 26%{opacity:1;transform:none} 42%{opacity:1;transform:none} 48%,100%{opacity:0;transform:translateY(-12px)} }
  @keyframes fAv3{ 0%,20%{opacity:0;transform:translateY(10px)} 30%{opacity:1;transform:none} 42%{opacity:1;transform:none} 48%,100%{opacity:0;transform:translateY(-12px)} }
  @keyframes fAv4{ 0%,24%{opacity:0;transform:translateY(10px)} 34%{opacity:1;transform:none} 42%{opacity:1;transform:none} 48%,100%{opacity:0;transform:translateY(-12px)} }
  /* la barre qui raye chaque ligne */
  .plan-avant li::after{
    animation:fBar 1s linear both;
    animation-timeline:--tConstat;animation-range:contain 0% contain 100%;
  }
  @keyframes fBar{ 0%,32%{transform:scaleX(0)} 38%{transform:scaleX(1)} 100%{transform:scaleX(1)} }
  .plan-apres li:nth-child(1){animation-name:fAp1}
  .plan-apres li:nth-child(2){animation-name:fAp2}
  .plan-apres li:nth-child(3){animation-name:fAp3}
  .plan-apres li:nth-child(4){animation-name:fAp4}
  @keyframes fAp1{ 0%,76%{opacity:0;transform:translateY(14px)} 84%{opacity:1;transform:none} 100%{opacity:1;transform:none} }
  @keyframes fAp2{ 0%,79%{opacity:0;transform:translateY(14px)} 87%{opacity:1;transform:none} 100%{opacity:1;transform:none} }
  @keyframes fAp3{ 0%,82%{opacity:0;transform:translateY(14px)} 90%{opacity:1;transform:none} 100%{opacity:1;transform:none} }
  @keyframes fAp4{ 0%,84%{opacity:0;transform:translateY(14px)} 92%{opacity:1;transform:none} 100%{opacity:1;transform:none} }
  /* la chute : au téléphone, elle se révèle d'un bloc plutôt que mot à mot */
  .plan-chute{animation-name:fChute}
  @keyframes fChute{ 0%,48%{opacity:0} 58%{opacity:1} 70%{opacity:1} 78%,100%{opacity:0} }
  .plan-chute .m{opacity:1}

  /* --- 4. LA BASCULE : la phrase se révèle ------------------------------- */
  .acte-mot{view-timeline-name:--tMot;view-timeline-axis:block}
  .acte-mot-phrase{
    animation:fPhrase 1s linear both;
    animation-timeline:--tMot;animation-range:contain 0% contain 100%;
  }
  @keyframes fPhrase{ 0%{opacity:0} 30%{opacity:1} 100%{opacity:1} }
  .acte-mot-phrase .m{opacity:1}
  .acte-mot-oeil{
    animation:fOeil2 1s linear both;
    animation-timeline:--tMot;animation-range:contain 0% contain 100%;
  }
  @keyframes fOeil2{ 0%{opacity:0;transform:translateY(14px)} 20%{opacity:1;transform:none} 100%{opacity:1;transform:none} }

  /* --- 5. LE RIDEAU : le lettrage ouvre sur l'installation --------------- */
  .rideau{view-timeline-name:--tRideau;view-timeline-axis:block}
  .rideau-scene{
    animation:fRidFond 1s linear both;
    animation-timeline:--tRideau;animation-range:contain 0% contain 100%;
  }
  @keyframes fRidFond{ 0%{opacity:0} 14%{opacity:1} 88%{opacity:1} 100%{opacity:0} }
  .rideau-svg{
    animation:fRidTrav 1s linear both;
    animation-timeline:--tRideau;animation-range:contain 0% contain 100%;
  }
  @keyframes fRidTrav{ 0%,32%{transform:scale(1)} 60%{transform:scale(3.2)} 100%{transform:scale(26)} }
  .rideau-mot-plein{
    animation:fRidMot 1s linear both;
    animation-timeline:--tRideau;animation-range:contain 0% contain 100%;
  }
  @keyframes fRidMot{ 0%{opacity:0} 15%{opacity:1} 63%{opacity:1} 80%,100%{opacity:0} }
  /* la section qui suit n'est plus verrouillée par le script */
  #modele{opacity:1}
  #chiffres{opacity:1}
}
}