/* =========================================================================
   TOULOUSE — l'écran noir et blanc, et le mot par-dessus
   -------------------------------------------------------------------------
   Trois vues de Toulouse en noir et blanc qui s'enchaînent : les toits de
   la ville rose vus d'en haut, la place du Capitole, les quais de la
   Garonne. Le nom de la ville par-dessus (toulouse-mot.css / .js), et on
   entre dedans au défilement (traversee.css / .js).

   🔴 POURQUOI DES IMAGES ET PLUS LA VIDÉO DRONE.
   La vidéo était sous licence CC BY : utilisable, mais À CONDITION de citer
   son auteur en pied de page. Thibault a demandé de retirer ce nom — ce que
   la licence interdit tant qu'on garde la vidéo, site privé ou non. Elle ne
   se lisait par ailleurs pas chez lui (format WebM/VP9, mal supporté selon
   les navigateurs). Les trois images qui la remplacent sont en **CC0** :
   aucune attribution due, aucun crédit à afficher, et elles s'affichent
   partout. Le fichier de la vidéo a été supprimé du dépôt.

   🔴 LE NOIR ET BLANC EST CUIT DANS LES FICHIERS, pas obtenu par un
   filter:grayscale() en CSS : ce filtre est recalculé à chaque image sur
   toute la surface, et il avait déjà été retiré du site pour cette raison.
   ========================================================================= */

.tls{
  position:relative;
  min-height:100svh;
  display:grid;
  /* 🔴 « place-items:center » tout court dimensionnait la colonne sur le
     CONTENU : le mot, en nowrap, débordait de l'écran et se faisait couper.
     On centre verticalement, mais on ÉTIRE horizontalement. */
  grid-template-columns:100%;
  align-items:center;
  justify-items:stretch;
  overflow:hidden;
  background:#0b0b0c;   /* le fond avant que les images ne soient décodées */
  isolation:isolate;
}

/* ---------- le fond : les trois vues qui s'enchaînent ---------- */
.tls__fond{position:absolute;inset:0;z-index:0}

.tls__im{
  position:absolute;inset:0;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  opacity:0;
  /* Deux animations sur le même élément : elles ne touchent pas aux mêmes
     propriétés (l'une l'opacité, l'autre la transformation), donc elles
     cohabitent sans se disputer la main. Un seul propriétaire par
     propriété — la règle qui avait coûté cher sur le logo. */
  animation:tlsFondu 27s linear infinite,tlsDerive 27s ease-out infinite;
}
.tls__im--1{background-image:url(../img/toulouse/toulouse-toits.webp);animation-delay:0s,0s}
.tls__im--2{background-image:url(../img/toulouse/toulouse-capitole.webp);animation-delay:9s,9s}
.tls__im--3{background-image:url(../img/toulouse/toulouse-garonne.webp);animation-delay:18s,18s}

/* Chaque vue reste 9 s à l'écran, les fondus se recouvrent : jamais de trou
   noir entre deux images. */
@keyframes tlsFondu{
  0%{opacity:0} 5%{opacity:1} 30%{opacity:1} 38%{opacity:0} 100%{opacity:0}
}
/* La dérive : un lent rapprochement pendant que l'image est visible. Le
   retour à la position de départ se fait à 100 %, quand l'image est déjà
   entièrement transparente — on ne le voit pas. */
@keyframes tlsDerive{
  0%{transform:scale(1.05)}
  38%{transform:scale(1.13) translate3d(-1%,-.7%,0)}
  100%{transform:scale(1.13) translate3d(-1%,-.7%,0)}
}

/* Le voile. Sans lui, un ciel clair mangeait le mot gris. Plus dense en
   haut et en bas qu'au centre : le mot garde de la matière derrière lui. */
.tls__voile{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(8,8,10,.72) 0%,rgba(8,8,10,.38) 38%,
                          rgba(8,8,10,.44) 62%,rgba(8,8,10,.82) 100%);
}

/* ---------- le mot ---------- */
.tls__mot{
  position:relative;z-index:1;
  width:100%;
  padding-inline:1.6vw;
  /* Le mot déborde volontairement de la gouttière du site : c'est ce qui en
     fait un moment plutôt qu'un bloc de plus. Même parti pris que « Sitero ». */
}
.tls__t{
  margin:0;text-align:center;white-space:nowrap;
  font-family:'Poppins','Inter',-apple-system,sans-serif;
  /* MESURÉ dans le navigateur, pas estimé : le rapport entre la largeur
     d'encre du mot « Toulouse » et son corps vaut 4,255 dans cette police à
     cette graisse (mon estimation au jugé disait 4,09 — 4 % d'écart, soit
     un mot qui dépassait de l'écran). Pour qu'il touche les deux bords il
     faut donc un corps de 96,8vw / 4,255 = 22,75vw.
     🔴 La mesure se prend avec Range.selectNodeContents : la boîte du
     paragraphe, elle, ne donne PAS la largeur d'encre. */
  font-weight:600;font-size:22.75vw;
  line-height:1.02;letter-spacing:-.045em;
}
/* 🔴 LA COULEUR ET L'APPARITION DU MOT NE SONT PLUS ICI.
   Le mot était bleu et se remplissait de gauche à droite, comme « Sitero ».
   Thibault l'a voulu GRIS et apparaissant AUTREMENT : c'est maintenant
   assets/css/toulouse-mot.css + assets/js/toulouse-mot.js (les huit lettres
   se posent en partant du centre).
   Les anciennes règles .tls__t--gris et .tls__t--coul ont été SUPPRIMÉES et
   non pas simplement laissées de côté : sur ce projet, une règle orpheline
   portant un nom réutilisé (.wm__coul) a déjà rendu le logo invisible. Une
   feuille ne doit contenir que des règles qui servent. */

/* ---------- la phrase, en bas de l'écran ---------- */
.tls__pied{
  position:absolute;z-index:1;
  left:0;right:0;bottom:clamp(28px,5vh,58px);
  /* Empilés et centrés : côte à côte, la phrase passait sur trois lignes et
     le groupe n'était plus centré à l'œil, seulement au calcul. */
  display:flex;flex-direction:column;align-items:center;
  gap:10px;text-align:center;
  padding-inline:var(--gut);
}
.tls__ou{
  margin:0;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;font-weight:600;
  display:flex;align-items:center;gap:9px;
}
/* Le point turquoise : le seul rappel de couleur avant que le mot ne se
   remplisse. */
.tls__ou::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:var(--tint-l,#3ce3f8);flex:0 0 auto;
}
.tls__loin{
  margin:0;font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.72);
  max-width:52ch;
}

/* ---------- écrans étroits ---------- */
@media (max-width:640px){
  /* Le corps du mot ne change PAS : il est calé sur la largeur de l'écran,
     donc il s'adapte tout seul. Le changer ici le ferait déborder — 26vw
     × 4,255 = 111 % de l'écran. Seule la phrase du bas se resserre. */
  .tls__pied{bottom:22px}
  .tls__loin{font-size:.88rem}
}

/* ---------- préférences système ---------- */
@media (prefers-reduced-motion:reduce){
  /* Plus de fondu ni de dérive : la première vue reste, fixe.
     (Le mot, lui, est traité dans toulouse-mot.css.) */
  .tls__im{animation:none;opacity:0;transform:scale(1.02)}
  .tls__im--1{opacity:1}
}