/* ==========================================================================
   MAQUETTE MUSIC-VIDEO — TROIS DISPOSITIONS A COMPARER
   Cette feuille ne fait qu'AJOUTER par-dessus style-base.css.
   Aucune valeur de couleur, de police ou de rayon n'est inventee ici :
   tout vient des variables du site, reprises telles quelles par le Salon.
   ========================================================================== */
/* ---------- le cadre : beaucoup plus large que celui du Salon ----------
   Le Salon est un panneau de 660px, fait pour un formulaire.
   Ici la video est la vedette : le cadre prend l'ecran.
   07/09 — ELARGI DE 1720 A 2200px (choix n°2 de David). Plafond CHOISI,
   pas arbitraire : au-dela, la video depasserait les 1920px de ses
   fichiers d'origine et le navigateur devrait l'AGRANDIR, ce qui la
   rendrait moins nette. A 2200px elle culmine a ~1756px : on gagne
   toute la presence possible sans toucher a la nettete.               */
.scene.music-video {
  width: min(2200px, 96vw);
  padding: clamp(16px, 2vh, 34px) clamp(16px, 2.2vw, 40px);
}
/* ---------- le nom, devenu un lien vers le site ---------- */
.marque-lien {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--tch-radius-sm);
  transition: transform .35s var(--tch-ease), filter .35s var(--tch-ease);
}
.marque-lien:hover, .marque-lien:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.12);
}
.marque-lien:focus-visible {
  outline: 2px solid var(--pal-rouille-clair);
  outline-offset: 6px;
}
/* ==========================================================================
   LE CADRE VIDEO
   ⚠️ aspect-ratio: 16/9 sur la balise video est OBLIGATOIRE : sans lui,
   au changement de source la balise retombe a 300x150 et toute la page
   remonte de plusieurs centaines de pixels. Piege deja paye sur le site.
   ⚠️ PAS de reflet au survol ici : decision prise sur le site, un balayage
   lumineux sur une image qui bouge deja accroche l'oeil pour rien.
   ========================================================================== */
.cadre-video {
  position: relative;
  width: 100%;
  border-radius: var(--tch-radius-lg);
  line-height: 0;
}
.cadre-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;          /* LA REGLE QUI EMPECHE LA PAGE DE SAUTER */
  object-fit: contain;           /* jamais deforme, jamais rogne */
  border-radius: var(--tch-radius-lg);
  background: #000;
}
/* ==========================================================================
   07/09 — CONTOUR DE LA VIDEO EN GRIS (demande de David : « pas de
   couleur »). L'anneau multicolore qui tournait autour du lecteur est
   RETIRE. A la place, exactement le meme filet que le grand cadre :
   `1.5px solid rgba(234,229,222,.14)`, valeur reprise telle quelle de
   .scene — rien n'est invente ici.
   Effet secondaire bienvenu : une animation de moins qui tourne en
   permanence (il en restait 10, il en reste 9).
   ========================================================================== */
.cadre-video {
  border: 1.5px solid rgba(234,229,222,.14);
  background-clip: padding-box;          /* bord net sur un coin arrondi */
}
/* ==========================================================================
   LES DEUX BOUTONS DE CONTACT (07/09, demande de David)
   Le bouton lui-meme ne change pas : c'est celui du Salon, avec son
   anneau a deux points lumineux et sa trame de points. Seul le LETTRAGE
   change — c'est ce qu'il a demande.
     - plus de soulignement : il venait du navigateur, pas du style ;
       un lien recoit un trait par defaut, il faut le retirer ;
     - texte CENTRE : dans une colonne le bouton s'etire, et le texte
       restait cale a gauche ;
     - beaucoup plus gros, en capitales espacees comme le reste du site
       (eyebrow, numeros de methode, bouton du lecteur).
   ========================================================================== */
.contacts { display: flex; gap: 14px; flex-wrap: wrap; }
.contacts .btn {
  text-decoration: none;                 /* le trait de soulignement s'en va */
  text-align: center;                    /* le mot au milieu du bouton */
  font-size: clamp(1.02rem, 1.15vw, 1.32rem);
  font-weight: 640;
  letter-spacing: .17em;
  text-transform: uppercase;
  padding: clamp(14px, 1.9vh, 20px) clamp(22px, 4vw, 40px);
  line-height: 1.15;
}
/* ---------- le pied ---------- */
.pied-mv {
  font-family: var(--font-ui);
  font-size: clamp(11px, 1.3vh, 13px);
  color: var(--tch-muted);
  line-height: 1.7;
  margin: 0;
}
/* ==========================================================================
   DISPOSITION B — « COLONNE LATERALE »
   Une colonne etroite a gauche (portrait, nom, boutons, pied),
   la video occupe tout le reste. C'est celle qui a le plus l'air
   « faite pour un grand ecran ».
   ========================================================================== */
.mv-b { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: clamp(20px, 2.4vw, 44px); align-items: center; width: 100%; }
.mv-b .colonne { display: flex; flex-direction: column; gap: clamp(14px, 2vh, 24px); }
/* dans une colonne etroite le nom ne tient pas sur une ligne : il passe
   sur deux, TCHIIRO puis MUSIC-PRODUCTION dessous. (Le `white-space:
   nowrap` du Salon est fait pour un bloc large, pas pour une colonne.) */
.mv-b .marque { white-space: normal; text-align: center; font-size: clamp(1.1rem, 1.75vw, 1.7rem); }
.mv-b .marque-lien { align-self: center; }
.mv-b .marque .accent { display: block; }
.mv-b .portrait { width: 100%; max-width: 300px; margin: 0; }
.mv-b .contacts { flex-direction: column; align-items: stretch; }
/* SUR TELEPHONE (07/09) : la grille passe en une seule colonne. Sans
   reglage, la video se retrouvait TOUT EN BAS, apres le copyright —
   defaut vu sur capture. On remet la vedette a sa place : portrait,
   nom, VIDEO, puis les contacts et le pied.
   `display: contents` fait des enfants de .colonne des enfants directs
   de la pile, ce qui permet de les ordonner un par un. */
@media (max-width: 900px) {
.mv-b {
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(12px, 2vh, 22px);
  }
.mv-b .colonne { display: contents; }
.mv-b .portrait    { order: 1; width: min(200px, 52vw); max-width: none; margin: 0; }
.mv-b .marque-lien { order: 2; }
.mv-b .cadre-video { order: 3; width: 100%; }
.mv-b .contacts    { order: 4; flex-direction: row; justify-content: center; }
.mv-b .pied-mv     { order: 5; text-align: center; }
.mv-b .marque      { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
.cadre-video::before, .marque-lien { animation: none !important; transition: none !important; }
}
/* ==========================================================================
   ONDES FIGEES (07/09, demande de David : « quand ca bouge, ca ralentit
   tout »). Le DESSIN des trois ondes est conserve tel quel — c'est lui
   qu'il trouve joli. Seul le MOUVEMENT est coupe : plus aucune animation
   ne tourne sur ces trois calques, donc plus rien a recalculer image par
   image. Le pilotage a la souris a ete retire du script, il n'a plus
   d'objet.
   ========================================================================== */
.onde-enveloppe,
.onde-enveloppe .onde-fond,
.onde-enveloppe .onde-fond::before,
.onde-enveloppe .onde-fond::after {
  animation: none !important;
  transition: none !important;
}
/* ==========================================================================
   07/09 — ONDES REMISES D'APLOMB
   ⚠️ DEFAUT QUE J'AI MOI-MEME INTRODUIT en figeant les animations :
   le recentrage vertical des trois ondes (`translateY(-50%)`) n'etait pas
   ecrit dans le style, il etait porte par les images-cles de la
   RESPIRATION. En coupant les animations, j'ai coupe le recentrage avec :
   les trois ondes sont descendues de 160px (la moitie de leurs 320px de
   hauteur). D'ou le decalage que David a vu.
   On rend donc le recentrage explicite : il ne depend plus d'aucune
   animation.
   ========================================================================== */
.onde-enveloppe { transform: translateY(-50%); }
/* ==========================================================================
   07/09 — PLUS AUCUN FOND NOIR (demande de David)
   « Il ne faut pas du tout de noir, un melange des deux couleurs cuivree
   et rose qui se fondent — l'objectif c'est de faire ressortir le cadre
   au maximum. »
   Le noir du Salon (#040404) est remplace par une nappe cuivre -> rose
   qui couvre tout l'ecran, d'un bord a l'autre, sans zone morte. Le
   cadre, lui, reste sombre : c'est desormais LUI le point noir de la
   page, et c'est ce contraste qui le detache.
   ========================================================================== */
html, body { background-color: transparent; }
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -3;
  pointer-events: none;
  background:
    /* la respiration douce du centre, pour que la nappe ne soit pas plate */
    radial-gradient(ellipse 90% 70% at 50% 42%, rgba(150,40,80,.55), transparent 72%),
    /* cuivre aux deux bords, rose vers l'interieur, les deux se rejoignent */
    linear-gradient(90deg,
      #7C3617   0%,
      #83301F  10%,
      #8A2B3A  24%,
      #7E2440  38%,
      #741F3B  50%,
      #7E2440  62%,
      #8A2B3A  76%,
      #83301F  90%,
      #7C3617 100%);
}
/* la couche des halos ne pose plus de noir par-dessus la nappe */
.tchiiro-ambient { background-color: transparent; }
/* LES HALOS SE REJOIGNENT AU CENTRE : leur largeur etait calculee pour
   le bloc de 660px du Salon et s'arretait « a 70px du cadre » pour
   laisser du noir autour. Ce noir n'existe plus, donc ils traversent. */
.tchiiro-ambient::before,  .tchiiro-ambient::after,
.tchiiro-ambient2::before, .tchiiro-ambient2::after {
  width: 62vw;
}
@media (max-width: 900px) {
.tchiiro-ambient::before,  .tchiiro-ambient::after,
  .tchiiro-ambient2::before, .tchiiro-ambient2::after { width: 78vw; }
}
/* LE CADRE RESSORT DAVANTAGE : il est maintenant la seule zone sombre.
   On l'opacifie completement et on lui donne une ombre portee large,
   pour qu'il se decolle nettement de la nappe. */
.scene.music-video {
  background: rgba(8,8,8,.985);
  box-shadow: 0 40px 120px rgba(0,0,0,.62),
              0 8px 40px rgba(0,0,0,.45);
}
/* ==========================================================================
   07/09 — LES ONDES REMONTEES POUR RESTER VISIBLES
   Sur le fond noir d'origine, les ondes ressortaient d'elles-memes.
   Sur la nappe cuivre/rose elles ont failli disparaitre : mesure faite
   avec temoin (0,00 d'ecart) et video figee, leur presence sur le fond
   etait tombee a 0,58/255, pic 58.
   Leur opacite est doublee : presence 1,19/255, pic 115. Les valeurs
   d'origine du Salon etaient rose .34 / cuivre .38 / or .28.
   (Essaye aussi : la fusion « screen » n'apporte rien ici — les ondes
   sont plus SOMBRES que la nappe, donc eclaircir ne les revele pas.)
   ========================================================================== */
.onde-enveloppe.est-rose   .onde-fond { opacity: .68; }
.onde-enveloppe.est-cuivre .onde-fond { opacity: .76; }
.onde-enveloppe.est-or     .onde-fond { opacity: .56; }
/* ==========================================================================
   07/09 — LE LIEN DE TEXTE DU PIED, AVEC L'EFFET DU SITE
   Effet releve tel quel dans style.css de tchiiro.com (regle
   « TRAIT QUI SE DEPLOIE SOUS LES BOUTONS ET LES LIENS TEXTE ») : au
   survol, un filet de 2px part du CENTRE et s'ouvre vers les deux
   bords en 0,55 s, et le texte passe au rose clair. Rien n'est
   reinvente : meme duree, meme courbe (--tch-ease), memes couleurs.
   ========================================================================== */
.pied-mv .lien-texte {
  color: var(--tch-text);
  text-decoration: none;
  position: relative;
  transition: color .55s var(--tch-ease);
}
.pied-mv .lien-texte .menu-label {
  position: relative;
  display: inline-block;
  line-height: 1.2;
}
.pied-mv .lien-texte .menu-label::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -3px;
  height: 2px; border-radius: 2px;
  background: var(--tch-rose-texte);
  transform: scaleX(0); transform-origin: center;
  transition: transform .55s var(--tch-ease);
  pointer-events: none;
}
.pied-mv .lien-texte:hover,
.pied-mv .lien-texte:focus-visible { color: var(--tch-rose-texte); }
.pied-mv .lien-texte:hover .menu-label::after,
.pied-mv .lien-texte:focus-visible .menu-label::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
.pied-mv .lien-texte .menu-label::after { transition: none; }
}
/* ==========================================================================
   07/09 — LE FOND PASSE EN AMBRE (demande de David : « on enleve le
   rose, quelque chose de beaucoup plus ambre »).
   Le rose (#8A2B3A, #741F3B) et le radial rose du centre disparaissent
   de la nappe ET des halos des cotes. On garde le principe : cuivre
   soutenu aux deux bords, ambre plus chaud vers l'interieur, sans
   aucune zone noire.
   Couleurs prises dans la palette du site : --pal-or-fond #8C5617,
   --pal-rouille #815018, --pal-rouille-vif #BA701C.
   ========================================================================== */
body::before {
  background:
    radial-gradient(ellipse 90% 70% at 50% 42%, rgba(168,104,32,.50), transparent 72%),
    linear-gradient(90deg,
      #6E3411   0%,
      #7A3C13  10%,
      #8A5117  24%,
      #915A19  38%,
      #96601B  50%,
      #915A19  62%,
      #8A5117  76%,
      #7A3C13  90%,
      #6E3411 100%);
}
/* les halos des cotes : le rose est remplace par de l'ambre */
.tchiiro-ambient::before {
  background: linear-gradient(to right,
    rgba(136,56,24,.88)   0%,
    rgba(140,66,26,.82)  13%,
    rgba(150,80,28,.74)  24%,
    rgba(163,94,32,.66)  38%,
    rgba(166,102,36,.52) 54%,
    rgba(164,100,35,.36) 70%,
    rgba(160,96,34,.18)  86%,
    transparent         100%);
}
.tchiiro-ambient::after {
  background: linear-gradient(to left,
    rgba(136,56,24,.88)   0%,
    rgba(140,66,26,.82)  13%,
    rgba(150,80,28,.74)  24%,
    rgba(163,94,32,.66)  38%,
    rgba(166,102,36,.52) 54%,
    rgba(164,100,35,.36) 70%,
    rgba(160,96,34,.18)  86%,
    transparent         100%);
}
.tchiiro-ambient2::before {
  background: radial-gradient(ellipse 78% 44% at 42% 50%, rgba(170,106,38,.32), transparent 74%);
}
.tchiiro-ambient2::after {
  background: radial-gradient(ellipse 78% 44% at 58% 50%, rgba(170,106,38,.32), transparent 74%);
}
/* ==========================================================================
   07/09 — LE PIED REMIS D'APLOMB DANS LA COLONNE
   ⚠️ DEFAUT QUE J'AI INTRODUIT en centrant le nom : tout le haut de la
   colonne (portrait, nom, boutons) est centre, mais les trois lignes du
   pied etaient restees calees A GAUCHE — elles paraissaient decrochees.
   Avant, tout etait a gauche et c'etait coherent ; en centrant le nom
   j'ai casse cet accord sans le voir.
   ========================================================================== */
.mv-b .pied-mv { text-align: center; }
/* et le portrait avec : plafonne a 300px dans une colonne de 320px, il
   restait cale a gauche — 10px de decalage, mesure, pas devine. */
.mv-b .portrait { margin-left: auto; margin-right: auto; }
/* ==========================================================================
   07/09 — LE RYTHME DE LA COLONNE (demande de David : « un peu plus
   uniforme, plus d'espace entre les boutons ou le texte, et surtout que
   ca descende un peu plus apres WhatsApp »)
   L'espace etait le MEME partout (un seul `gap`), ce qui donnait une
   pile serree et sans hierarchie. On passe a un rythme qui s'ouvre en
   descendant : chaque groupe respire plus que le precedent, et le plus
   grand ecart est juste avant le pied — c'est ce qui le detache du
   bloc de contact au lieu de lui coller dessous.
   ========================================================================== */
.mv-b .colonne { gap: 0; }
.mv-b .portrait    { margin-bottom: clamp(18px, 2.5vh, 32px); }
.mv-b .marque-lien { margin-bottom: clamp(24px, 3.2vh, 42px); }
.mv-b .contacts    { gap: clamp(14px, 1.7vh, 22px);
                     margin-bottom: clamp(30px, 4.4vh, 58px); }
/* les trois lignes du pied s'aerent aussi entre elles */
.mv-b .pied-mv { line-height: 1.95; }
/* ==========================================================================
   07/09 — LE FOND PASSE EN BORDEAUX SOMBRE (David : « la couleur est
   affreuse, il faut quelque chose de vraiment sobre, entre le noir et
   le rouge, bordeaux sombre »)
   L'ambre est abandonne. Les trois couleurs de la nappe sont desormais
   portees par des VARIABLES : changer de profondeur ne demande qu'une
   ligne, au meme endroit. C'est ce qui permet a la page d'essai
   `essai-fond.html` de faire varier les quatre paliers en direct.
   ⚠️ Le fond doit rester nettement plus clair que le cadre (~8/255),
   sinon le bloc cesse de se detacher : c'est la limite basse.
   ========================================================================== */
:root {
  --nappe-bord:   #2A0C13;   /* les deux extremites, plus profondes */
  --nappe-milieu: #3D131F;   /* le centre, un peu plus ouvert */
  --nappe-halo:   rgba(112,28,54,.42);
}
body::before {
  background:
    radial-gradient(ellipse 92% 72% at 50% 44%, var(--nappe-halo), transparent 74%),
    linear-gradient(90deg,
      var(--nappe-bord)    0%,
      var(--nappe-milieu) 32%,
      var(--nappe-milieu) 68%,
      var(--nappe-bord)  100%);
}
/* les halos des cotes suivent la meme famille : plus de cuivre orange,
   un bordeaux qui s'eteint vers l'interieur */
.tchiiro-ambient::before {
  background: linear-gradient(to right,
    rgba(96,24,44,.80)   0%,
    rgba(104,26,48,.70) 16%,
    rgba(110,28,52,.56) 34%,
    rgba(112,28,54,.38) 56%,
    rgba(112,28,54,.18) 80%,
    transparent        100%);
}
.tchiiro-ambient::after {
  background: linear-gradient(to left,
    rgba(96,24,44,.80)   0%,
    rgba(104,26,48,.70) 16%,
    rgba(110,28,52,.56) 34%,
    rgba(112,28,54,.38) 56%,
    rgba(112,28,54,.18) 80%,
    transparent        100%);
}
.tchiiro-ambient2::before {
  background: radial-gradient(ellipse 78% 44% at 42% 50%, rgba(120,32,60,.26), transparent 74%);
}
.tchiiro-ambient2::after {
  background: radial-gradient(ellipse 78% 44% at 58% 50%, rgba(120,32,60,.26), transparent 74%);
}
/* 07/09 — un vrai espace entre le nom clique et la ligne de copyright,
   au lieu d'un simple retour a la ligne colle dessous. */
.pied-mv .ligne-copyright {
  display: block;
  margin-top: clamp(10px, 1.4vh, 18px);
}
/* ==========================================================================
   07/09 — LE FOND DEUX FOIS PLUS SOMBRE (demande de David)
   Les trois canaux sont divises par 2 : la TEINTE bordeaux est
   rigoureusement conservee, seule la clarte baisse.
   ⚠️ POINT A SURVEILLER, MESURE : plus le fond descend, moins le cadre
   (8/255) s'en detache. C'est la contrepartie mecanique de la demande.
   ========================================================================== */
/* Palier retenu : celui qui donne un fond REELLEMENT deux fois moins
   clair que le precedent (31 -> 16 sur 255, mesure). Diviser les
   couleurs par trois ne les rend pas trois fois plus sombres a l'ecran :
   le grain et la trame de points posent un plancher. */
:root {
  --nappe-bord:   #0E0406;
  --nappe-milieu: #150609;
  --nappe-halo:   rgba(37,9,18,.42);
}
/* ==========================================================================
   07/09 — CORRECTION : LES HALOS AUSSI
   ⚠️ ERREUR DE MA PART, TROUVEE PAR LA MESURE : diviser la nappe par 2,
   3 puis 4 ne faisait tomber la clarte du fond que de 31 a 26, 24, 23.
   Elle plafonnait. Raison : sur les cotes — la ou l'on regarde — ce
   n'est PAS la nappe qui domine, ce sont les halos de .tchiiro-ambient,
   peints par-dessus. Tant qu'ils restent a pleine force, assombrir la
   nappe ne sert presque a rien.
   Ils sont donc pilotes par la meme commande, `--halo-force`.
   ========================================================================== */
:root { --halo-force: .33; }
.tchiiro-ambient::before,  .tchiiro-ambient::after  { opacity: var(--halo-force); }
.tchiiro-ambient2::before, .tchiiro-ambient2::after { opacity: var(--halo-force); }
/* ==========================================================================
   07/09 — DE L'AIR SOUS LA VIDEO EN MODE TELEPHONE (defaut signale par
   David, et mesure : 17px seulement entre la video et les boutons,
   contre 38, 44 et 54px pour tous les autres intervalles).
   CAUSE : quand j'ai regle le rythme de la colonne, j'ai donne une
   marge basse au portrait, au nom et aux boutons — mais PAS au cadre
   video, qui n'existe pas dans la colonne. Sur telephone il rejoint la
   pile et se retrouvait le seul element sans marge.
   ========================================================================== */
@media (max-width: 900px) {
.mv-b .cadre-video { margin-bottom: clamp(14px, 2.6vh, 30px); }
}
/* ==========================================================================
   07/09 — LES DEUX ONDES DU HAUT ECHANGEES (demande de David : « celle
   du haut au milieu, celle du milieu en haut »).
   Ordre du Salon : rose en haut, cuivre au milieu, or en bas.
   Nouvel ordre  : cuivre en haut, rose au milieu, or en bas.
   Seules les POSITIONS bougent — chaque onde garde sa couleur, sa
   forme, son opacite et son masque.
   ========================================================================== */
.onde-enveloppe.est-cuivre { top: calc(50% - 200px); }
/* etait au milieu */
.onde-enveloppe.est-rose   { top: 50%; }
/* etait en haut   */
/* ==========================================================================
   07/09 — LE « TRAIT » DANS LE FOND : IDENTIFIE ET SUPPRIME
   Ce que David voyait n'etait PAS un defaut du degrade de fond, mais le
   FILAMENT MULTICOLORE du grand cadre (.scene::before), herite du Salon
   Audio — un contour conique prune/or a 70% d'opacite.
   MESURE au bord haut du cadre : avec le filament, RVB 130,46,67 et une
   clarte de 81/255 ; le fond juste au-dessus est a 16/255. Un trait cinq
   fois plus clair que ce qui l'entoure : il se lisait comme une ligne
   posee sur le fond.
   Il ne se voyait pas avant parce que le fond etait clair (ambre a
   72/255) ; en passant au bordeaux sombre, il s'est mis a trancher.
   On le retire. Reste le filet gris du bord, celui de .scene :
   RVB 39,38,37, clarte 38/255 — visible, sobre, et surtout IDENTIQUE au
   contour de la video que David a demande « sans couleur ».
   ========================================================================== */
.scene.music-video::before { display: none; }
/* ==========================================================================
   07/09 — LE NOM PLUS GRAND (demande de David)
   Il y a de la place dans la colonne, sur PC comme sur telephone.
   ========================================================================== */
.mv-b .marque { font-size: clamp(1.35rem, 2.25vw, 2.35rem); }
@media (max-width: 900px) {
.mv-b .marque { font-size: clamp(1.4rem, 6.4vw, 2.1rem); }
}
/* ==========================================================================
   07/09 — LE CONTOUR DU GRAND CADRE REVIENT EN COULEURS
   David : « le premier cadre noir, celui-la il faut le remettre en
   coloris comme le contour de la photo ».
   On reprend donc l'anneau EXACT du portrait (.portrait::before) :
   memes arrets de couleur, meme masque qui evide le centre, et la meme
   rotation `tch-anneau` de 9 s. Ce n'est plus le conic fixe du Salon.
   ⚠️ Cela remet UNE animation permanente sur la page (voir plus bas).
   ========================================================================== */
.scene.music-video::before {
  display: block;
  content: '';
  position: absolute; inset: -2px; z-index: 0;
  border-radius: calc(var(--tch-radius-lg) + 2px);
  padding: 2px;
  background: conic-gradient(from var(--tch-angle),
    var(--pal-prune-clair)     0deg,
    var(--pal-prune-vif)      55deg,
    var(--pal-bordeaux)      100deg,
    var(--pal-grenat)        140deg,
    var(--pal-rouille-vif)   168deg,
    var(--pal-rouille-clair) 190deg,
    var(--pal-rouille-vif)   212deg,
    var(--pal-grenat)        252deg,
    var(--pal-bordeaux)      292deg,
    var(--pal-prune-vif)     328deg,
    var(--pal-prune-clair)   360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 1;
  animation: tch-anneau 9s linear infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.scene.music-video::before { animation: none; }
}
/* ==========================================================================
   07/09 — LE CONTOUR DE LA VIDEO EN BLANC, UN PEU PLUS EPAIS
   Il etait a 1.5px de blanc casse a 14% — presque invisible sur le fond
   sombre. Il passe a 2.5px de blanc franc.
   ========================================================================== */
.cadre-video {
  border: 2.5px solid rgba(255,255,255,.62);
}
/* 07/09 — LE CADRE BLANC DE LA VIDEO EST RETIRE (demande de David).
   Plus aucun contour autour du lecteur : l'image va jusqu'au bord. */
.cadre-video { border: 0; }
/* ==========================================================================
   07/09 — LE TITRE SOUS LA PHOTO : TCHIIRO MUSIC-PRODUCTION
   Tout en capitales, et MUSIC-PRODUCTION un cran plus petit que TCHIIRO,
   pour que le nom d'artiste reste le mot dominant.
   Le rapport est de 0,80 : assez pour que la hierarchie se voie, pas
   assez pour que la seconde ligne paraisse secondaire.
   ========================================================================== */
.mv-b .marque { text-transform: uppercase; }
.mv-b .marque .accent { font-size: .80em; letter-spacing: .02em; }
/* ==========================================================================
   07/09 — « TCHIIRO MUSIC-PRODUCTION » TOUJOURS SOUS « Music and video by »
   Avant, le retour a la ligne dependait de la largeur disponible : sur un
   ecran un peu plus large, le nom remontait sur la meme ligne. Les deux
   parties sont maintenant des blocs : la coupure ne bouge plus jamais.
   ========================================================================== */
.pied-mv .ligne-par { display: block; }
.pied-mv .lien-texte { display: inline-block; margin-top: 2px; }
/* ⚠️ « MUSIC-PRODUCTION » se coupait en deux sur son trait d'union
   (« MUSIC- » puis « PRODUCTION »), ce qui faisait un titre sur trois
   lignes. On interdit la coupure, et on cale la taille sur la plus
   grande qui tienne dans la colonne : mesure faite a 0,80 / 0,74 / 0,68…
   0,74 passait tout juste (311px pour 320 de colonne), 0,72 laisse de
   quoi respirer sans que l'ecart avec TCHIIRO se voie. */
.mv-b .marque .accent { white-space: nowrap; font-size: .72em; }
/* ==========================================================================
   07/09 — L'ESPACE SOUS LES BOUTONS, SUR TELEPHONE SEULEMENT
   Defaut signale par David et confirme par la mesure : 54px entre le
   bouton WhatsApp et la ligne « Music & video written... », contre 38 a
   44px pour tous les autres intervalles. Il ressortait.
   CAUSE : cette grande marge est voulue sur GRAND ECRAN, ou le pied doit
   se detacher du bloc de contact au bas de la colonne. Sur telephone la
   colonne est deja eclatee en pile : l'ecart n'a plus de raison d'etre,
   il ne fait que trouer la page.
   Il rentre dans le rythme des autres, sans y toucher sur PC.
   ========================================================================== */
@media (max-width: 900px) {
.mv-b .contacts { margin-bottom: clamp(16px, 2.6vh, 28px); }
}
/* ==========================================================================
   07/09 — EURØVISIØN PRØJECT : sa place dans la pile telephone
   ⚠️ DEFAUT MESURE : sur telephone la colonne est en `display: contents`,
   ses enfants deviennent enfants directs de la pile et se rangent par
   leur `order`. La nouvelle ligne n'en avait pas : elle se retrouvait
   AVANT le portrait, tout en haut de la page.
   On refait la sequence complete : portrait, nom, sous-titre, video,
   contacts, pied.
   ========================================================================== */
@media (max-width: 900px) {
.mv-b .portrait      { order: 1; }
.mv-b .marque-lien   { order: 2; }
.mv-b .cadre-video   { order: 4; }
.mv-b .contacts      { order: 5; }
.mv-b .pied-mv       { order: 6; }
}
/* ==========================================================================
   07/09 — LE BOUTON « SONDAGE », ENTRE LA SIGNATURE ET LE COPYRIGHT
   C'est le meme bouton que Facebook et WhatsApp : meme classe .btn, donc
   meme anneau, meme trame de points, meme lettrage en capitales espacees.
   Rien n'est redefini, on ne fait que le placer et l'aerer.
   ========================================================================== */
.mv-b .contacts-sondage {
  margin: clamp(16px, 2.2vh, 26px) 0 clamp(14px, 1.9vh, 22px);
}
/* le pied du haut ne porte plus le copyright : il n'a plus besoin de la
   grande respiration qui l'en separait */
.mv-b .pied-mv .lien-texte { margin-bottom: 0; }
/* la sequence sur telephone doit inclure les deux nouveaux blocs */
@media (max-width: 900px) {
.mv-b .pied-mv          { order: 6; }
.mv-b .contacts-sondage { order: 7; }
}
/* ==========================================================================
   07/09 — TROIS REGLAGES DE LA COLONNE

   1. EURØVISIØN PRØJECT NE DEPASSE PLUS LA PHOTO
      Mesure : 325px de large pour une photo de 300px, soit 25px de trop
      sur grand ecran, 17px sur telephone. La taille descend de .72 a
      .64 em — verifie a toutes les largeurs.

   2. L'ANNEAU DE LA PHOTO NE S'AMINCIT PLUS DANS LES ANGLES
      ⚠️ DEFAUT REEL, MESURE : en isolant l'anneau et en balayant tout son
      contour, son epaisseur allait de 0,62px a 2,12px — plus de trois
      fois plus fin par endroits.
      CAUSE : la geometrie est juste (rayon exterieur 26, interieur 24,
      soit 2px partout), mais sur une courbe le lissage repartit ces 2px
      sur des pixels partiels : le trait se delave et parait s'effacer.
      REMEDE : on epaissit a 3px. La perte due au lissage reste la meme
      en valeur absolue, donc elle pese bien moins.
   ========================================================================== */
.mv-b .marque .accent { font-size: .64em; }
.portrait::before {
  inset: -3px;
  padding: 3px;
  border-radius: calc(var(--tch-radius-lg) + 3px);
}
/* 3. LA MEME DISTANCE ENTRE TOUS LES BLOCS DU BAS
      Mesure avant : WhatsApp->signature 48px, signature->SONDAGE 24px,
      SONDAGE->copyright 21px. Trois valeurs differentes pour trois
      separations qui se suivent — c'est le 48 qui creusait un trou.
      Les trois sont desormais identiques. */
.mv-b .contacts:not(.contacts-sondage) { margin-bottom: 0; }
.mv-b .pied-mv:not(.pied-copyright),
.mv-b .contacts-sondage { margin-top: clamp(18px, 2.4vh, 30px); margin-bottom: 0; }
/* a 320px le titre depassait encore de 7px : un cran de plus */
@media (max-width: 400px) {
.mv-b .marque .accent { font-size: .58em; }
}
/* ==========================================================================
   07/09 — LA SIGNATURE DANS UN CADRE ARRONDI GRIS FONCE
   Le gris et l'arrondi ne sont pas choisis au hasard : le fond reprend
   --tch-surface (le gris du site), le filet est celui du grand cadre
   (rgba(234,229,222,.14)) et le rayon est --tch-radius-sm, celui des
   petites vignettes. Rien de nouveau n'est introduit.
   ========================================================================== */
.mv-b .pied-mv:not(.pied-copyright),
.mv-b .pied-copyright {
  background: rgba(24,24,24,.72);
  border: 1px solid rgba(234,229,222,.14);
  border-radius: var(--tch-radius-lg);
  padding: clamp(12px, 1.6vh, 18px) clamp(14px, 1.6vw, 20px);
  background-clip: padding-box;
}
/* ==========================================================================
   07/09 — LES DEUX COULEURS DU LIEN DE LA SIGNATURE
   Au REPOS : le rose clair --tch-rose-texte (#FF6FA8), celui qui servait
   jusqu'ici au survol. Il signale d'emblee que le nom est cliquable.
   Au SURVOL : le rose vif --tch-rose (#FE0178), exactement celui de
   « EURØVISIØN PRØJECT » sous la photo — les deux se repondent.
   Le filet qui se deploie suit la meme bascule.
   ========================================================================== */
.pied-mv .lien-texte { color: var(--tch-rose-texte); }
.pied-mv .lien-texte .menu-label::after { background: var(--tch-rose-texte); }
.pied-mv .lien-texte:hover,
.pied-mv .lien-texte:focus-visible { color: var(--tch-rose); }
.pied-mv .lien-texte:hover .menu-label::after,
.pied-mv .lien-texte:focus-visible .menu-label::after { background: var(--tch-rose); }
/* ==========================================================================
   07/09 — LES DEUX CADRES GRIS RECOIVENT L'ANNEAU DES BOUTONS
   C'est exactement le `.btn::before` de la feuille du site : memes arrets
   de couleur, meme masque qui evide le centre, meme animation
   `tch-filament-btn` de 5,5 s, meme opacite .8. Rien n'est recopie a la
   main, on ne fait que l'appliquer a ces deux blocs.
   Le filet gris d'origine s'efface, sinon on verrait deux contours l'un
   sur l'autre.
   ⚠️ Cela ajoute DEUX animations permanentes a la page (voir plus bas).
   ========================================================================== */
.mv-b .pied-mv:not(.pied-copyright),
.mv-b .pied-copyright { position: relative; border-color: transparent; }
.mv-b .pied-mv:not(.pied-copyright)::before,
.mv-b .pied-copyright::before {
  content: '';
  position: absolute; z-index: 1; inset: -2px;
  border-radius: calc(var(--tch-radius-lg) + 2px);
  padding: 2px;
  background: conic-gradient(from var(--tch-angle),
    var(--pal-prune-clair)     0deg,
    var(--pal-prune-vif)      42deg,
    var(--pal-bordeaux)       82deg,
    var(--pal-grenat)        118deg,
    var(--pal-rouille-vif)   150deg,
    var(--pal-rouille-clair) 180deg,
    var(--pal-rouille-vif)   210deg,
    var(--pal-grenat)        246deg,
    var(--pal-bordeaux)      285deg,
    var(--pal-prune-vif)     322deg,
    var(--pal-prune-clair)   360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: tch-filament-btn 5.5s linear infinite;
  opacity: .8;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.mv-b .pied-mv:not(.pied-copyright)::before,
  .mv-b .pied-copyright::before { animation: none; }
}
/* ==========================================================================
   07/09 — LE FOND DESCEND ENCORE D'UN CRAN
   Valeurs precedentes : bord #0E0406, milieu #150609, halos a .33.
   La teinte bordeaux est conservee — les trois canaux sont divises par
   le meme facteur, seule la clarte baisse.
   ⚠️ LIMITE APPROCHEE : le cadre du bloc est a 8/255. Plus le fond
   descend, moins il s'en detache. On mesure apres chaque cran.
   ========================================================================== */
:root {
  --nappe-bord:   #090203;
  --nappe-milieu: #0D0406;
  --nappe-halo:   rgba(26,6,13,.40);
  --halo-force: .24;
}
/* ==========================================================================
   07/09 — TOUS LES CONTOURS A LA MEME EPAISSEUR
   RELEVE AVANT : la photo etait a 3px (corrigee plus tot), et TOUS les
   autres anneaux etaient restes a 2px — grand cadre, Facebook, WhatsApp,
   Vote now, cadre signature, cadre copyright, fleches et bouton du son.
   D'ou l'impression d'un trait « leger » partout sauf sur la photo.
   Ils passent tous a 3px. Le rayon de chaque anneau suit : il doit valoir
   le rayon de l'element PLUS son epaisseur, sinon la courbe exterieure ne
   colle plus a la courbe interieure et le trait s'epaissit dans les angles.
   ========================================================================== */
/* le grand cadre */
.scene.music-video::before {
  inset: -3px;
  padding: 3px;
  border-radius: calc(var(--tch-radius-lg) + 3px);
}
/* les trois boutons — le rayon reste 999px, une pastille reste une pastille */
.mv-b .contacts .btn::before {
  inset: -3px;
  padding: 3px;
}
/* les deux cadres gris du bas */
.mv-b .pied-mv:not(.pied-copyright)::before,
.mv-b .pied-copyright::before {
  inset: -3px;
  padding: 3px;
  border-radius: calc(var(--tch-radius-lg) + 3px);
}
/* 07/09 — RETOUR AU BORDEAUX PRECEDENT (le cran d'apres etait trop
   sombre). Valeurs restaurees telles quelles, sans retouche. */
:root {
  --nappe-bord:   #0E0406;
  --nappe-milieu: #150609;
  --nappe-halo:   rgba(37,9,18,.42);
  --halo-force: .33;
}
/* ==========================================================================
   07/09 — LE COPYRIGHT REJOINT LE CADRE GRIS, VOTE NOW PASSE EN DERNIER
   Il n'y a plus qu'un seul cadre gris : la signature et le copyright y
   sont ensemble. Le bouton du sondage ferme la colonne.
   ========================================================================== */
.mv-b .pied-mv .ligne-copyright {
  display: block;
  margin-top: clamp(8px, 1vh, 12px);
}
@media (max-width: 900px) {
.mv-b .pied-mv          { order: 6; }
.mv-b .contacts-sondage { order: 7; }
}
/* ==========================================================================
   07/09 — LA LIGNE DE COPYRIGHT REDUITE, POUR TENIR QUELLE QUE SOIT L'ANNEE
   ⚠️ DEFAUT TROUVE PAR DAVID en reglant son PC sur 2029 : la ligne devient
   « Copyright © 2026-2029 — All rights reserved. », cinq caracteres de
   plus, et elle passait sur deux lignes.
   CALCUL fait sur le pire cas possible, « 2026-2099 » :
     - a 320px : le texte faisait 246px pour 226 disponibles
     - a 1920px : 290px pour 280 disponibles
   A 0,88 de la taille : 216px et 249px. Il reste 10 a 31px de marge, donc
   la ligne tiendra jusqu'en 2099 sans jamais se couper.
   ========================================================================== */
.mv-b .pied-mv .ligne-copyright { font-size: .88em; }
/* ==========================================================================
   07/09 — LA BANDE D'ONDE DU SITE, DEUX FOIS DANS LA COLONNE
   Reprise EXACTE de la version « blocs centres » de tchiiro.com : meme
   degrade multicolore (cuivre, rose, or), MEMES TROIS POCHOIRS qui se
   croisent — le peigne de fentes qui donne les barres, la silhouette de
   l'onde qui donne leur hauteur a chaque instant, le fondu symetrique aux
   deux bouts — et les deux memes animations.
   La silhouette `--tch-onde` n'existait pas dans la feuille du Salon :
   elle est recopiee telle quelle depuis le site.
   ⚠️ `background-size: 260% 100%` est IMPOSE par tch-onde-lueurs, qui
   defile de -260%. Toute autre valeur ferait sauter le bouclage.
   ========================================================================== */
:root { --tch-onde: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='48' viewBox='0 0 1200 48'%3E%3Cpolygon fill='%23000' points='0,13.1 3,13.1 6,13.2 9,13.3 12,13.5 15,13.7 18,13.9 21,14.1 24,14.3 27,14.6 30,14.9 33,15.2 36,15.5 39,15.9 42,16.2 45,16.6 48,17.0 51,17.4 54,17.9 57,18.3 60,18.8 63,19.3 66,19.7 69,20.2 72,20.7 75,21.2 78,21.7 81,21.2 84,20.6 87,20.1 90,19.6 93,19.1 96,18.6 99,18.0 102,17.5 105,17.0 108,16.6 111,16.1 114,15.6 117,15.2 120,14.7 123,14.3 126,13.9 129,13.5 132,13.1 135,12.8 138,12.4 141,12.1 144,11.8 147,11.6 150,11.3 153,11.1 156,10.9 159,10.7 162,10.6 165,10.5 168,10.4 171,10.3 174,10.3 177,10.3 180,10.3 183,10.4 186,10.5 189,10.6 192,10.7 195,10.8 198,11.0 201,11.2 204,11.5 207,11.7 210,12.0 213,12.3 216,12.6 219,13.0 222,13.3 225,13.7 228,14.1 231,14.5 234,14.9 237,15.4 240,15.8 243,16.3 246,16.8 249,17.3 252,17.8 255,18.2 258,18.7 261,19.3 264,19.8 267,20.3 270,20.8 273,21.3 276,20.8 279,20.2 282,19.7 285,19.3 288,18.8 291,18.3 294,17.8 297,17.4 300,17.0 303,16.5 306,16.1 309,15.8 312,15.4 315,15.1 318,14.7 321,14.4 324,14.2 327,13.9 330,13.7 333,13.5 336,13.3 339,13.1 342,13.0 345,12.9 348,12.8 351,12.7 354,12.7 357,12.7 360,12.7 363,12.7 366,12.8 369,12.8 372,12.9 375,13.1 378,13.2 381,13.4 384,13.5 387,13.7 390,13.9 393,14.2 396,14.4 399,14.7 402,14.9 405,15.2 408,15.5 411,15.8 414,16.1 417,16.4 420,16.7 423,17.0 426,17.3 429,17.7 432,18.0 435,18.3 438,18.6 441,18.9 444,19.2 447,19.5 450,19.8 453,20.1 456,20.3 459,20.6 462,20.4 465,20.1 468,19.9 471,19.7 474,19.5 477,19.3 480,19.1 483,19.0 486,18.8 489,18.7 492,18.6 495,18.6 498,18.5 501,18.5 504,18.5 507,18.5 510,18.5 513,18.6 516,18.6 519,18.7 522,18.8 525,18.9 528,19.1 531,19.2 534,19.4 537,19.5 540,19.7 543,19.9 546,20.2 549,20.2 552,20.0 555,19.7 558,19.5 561,19.2 564,18.9 567,18.6 570,18.3 573,18.1 576,17.8 579,17.5 582,17.2 585,16.9 588,16.7 591,16.4 594,16.2 597,15.9 600,15.7 603,15.5 606,15.3 609,15.1 612,14.9 615,14.8 618,14.6 621,14.5 624,14.4 627,14.3 630,14.3 633,14.2 636,14.2 639,14.2 642,14.2 645,14.3 648,14.3 651,14.4 654,14.5 657,14.7 660,14.8 663,15.0 666,15.2 669,15.4 672,15.7 675,15.9 678,16.2 681,16.5 684,16.8 687,17.2 690,17.5 693,17.9 696,18.3 699,18.7 702,19.1 705,19.5 708,19.9 711,19.6 714,19.1 717,18.7 720,18.2 723,17.8 726,17.3 729,16.8 732,16.4 735,15.9 738,15.4 741,15.0 744,14.5 747,14.1 750,13.7 753,13.3 756,12.9 759,12.5 762,12.1 765,11.7 768,11.4 771,11.0 774,10.7 777,10.4 780,10.2 783,9.9 786,9.7 789,9.5 792,9.3 795,9.1 798,9.0 801,8.8 804,8.8 807,8.7 810,8.6 813,8.6 816,8.6 819,8.6 822,8.7 825,8.7 828,8.8 831,8.9 834,9.1 837,9.2 840,9.4 843,9.6 846,9.8 849,10.0 852,10.3 855,10.5 858,10.8 861,11.1 864,11.4 867,11.7 870,12.1 873,12.4 876,12.8 879,13.2 882,13.5 885,13.9 888,14.3 891,14.7 894,15.1 897,15.5 900,15.9 903,16.4 906,16.8 909,17.2 912,17.6 915,18.0 918,18.4 921,18.8 924,19.2 927,19.6 930,19.8 933,19.5 936,19.1 939,18.7 942,18.4 945,18.1 948,17.7 951,17.4 954,17.1 957,16.8 960,16.5 963,16.3 966,16.0 969,15.7 972,15.5 975,15.3 978,15.1 981,14.9 984,14.7 987,14.5 990,14.3 993,14.2 996,14.1 999,13.9 1002,13.8 1005,13.7 1008,13.6 1011,13.5 1014,13.5 1017,13.4 1020,13.3 1023,13.3 1026,13.2 1029,13.2 1032,13.2 1035,13.2 1038,13.1 1041,13.1 1044,13.1 1047,13.1 1050,13.1 1053,13.1 1056,13.2 1059,13.2 1062,13.2 1065,13.2 1068,13.2 1071,13.2 1074,13.2 1077,13.2 1080,13.3 1083,13.3 1086,13.3 1089,13.3 1092,13.3 1095,13.3 1098,13.3 1101,13.3 1104,13.3 1107,13.3 1110,13.3 1113,13.3 1116,13.3 1119,13.3 1122,13.3 1125,13.3 1128,13.3 1131,13.3 1134,13.3 1137,13.3 1140,13.3 1143,13.3 1146,13.3 1149,13.3 1152,13.3 1155,13.3 1158,13.3 1161,13.3 1164,13.3 1167,13.3 1170,13.3 1173,13.3 1176,13.3 1179,13.2 1182,13.2 1185,13.2 1188,13.2 1191,13.2 1194,13.1 1197,13.1 1200,13.1 1200,34.9 1197,34.9 1194,34.9 1191,34.8 1188,34.8 1185,34.8 1182,34.8 1179,34.8 1176,34.7 1173,34.7 1170,34.7 1167,34.7 1164,34.7 1161,34.7 1158,34.7 1155,34.7 1152,34.7 1149,34.7 1146,34.7 1143,34.7 1140,34.7 1137,34.7 1134,34.7 1131,34.7 1128,34.7 1125,34.7 1122,34.7 1119,34.7 1116,34.7 1113,34.7 1110,34.7 1107,34.7 1104,34.7 1101,34.7 1098,34.7 1095,34.7 1092,34.7 1089,34.7 1086,34.7 1083,34.7 1080,34.7 1077,34.8 1074,34.8 1071,34.8 1068,34.8 1065,34.8 1062,34.8 1059,34.8 1056,34.8 1053,34.9 1050,34.9 1047,34.9 1044,34.9 1041,34.9 1038,34.9 1035,34.8 1032,34.8 1029,34.8 1026,34.8 1023,34.7 1020,34.7 1017,34.6 1014,34.5 1011,34.5 1008,34.4 1005,34.3 1002,34.2 999,34.1 996,33.9 993,33.8 990,33.7 987,33.5 984,33.3 981,33.1 978,32.9 975,32.7 972,32.5 969,32.3 966,32.0 963,31.7 960,31.5 957,31.2 954,30.9 951,30.6 948,30.3 945,29.9 942,29.6 939,29.3 936,28.9 933,28.5 930,28.2 927,28.4 924,28.8 921,29.2 918,29.6 915,30.0 912,30.4 909,30.8 906,31.2 903,31.6 900,32.1 897,32.5 894,32.9 891,33.3 888,33.7 885,34.1 882,34.5 879,34.8 876,35.2 873,35.6 870,35.9 867,36.3 864,36.6 861,36.9 858,37.2 855,37.5 852,37.7 849,38.0 846,38.2 843,38.4 840,38.6 837,38.8 834,38.9 831,39.1 828,39.2 825,39.3 822,39.3 819,39.4 816,39.4 813,39.4 810,39.4 807,39.3 804,39.2 801,39.2 798,39.0 795,38.9 792,38.7 789,38.5 786,38.3 783,38.1 780,37.8 777,37.6 774,37.3 771,37.0 768,36.6 765,36.3 762,35.9 759,35.5 756,35.1 753,34.7 750,34.3 747,33.9 744,33.5 741,33.0 738,32.6 735,32.1 732,31.6 729,31.2 726,30.7 723,30.2 720,29.8 717,29.3 714,28.9 711,28.4 708,28.1 705,28.5 702,28.9 699,29.3 696,29.7 693,30.1 690,30.5 687,30.8 684,31.2 681,31.5 678,31.8 675,32.1 672,32.3 669,32.6 666,32.8 663,33.0 660,33.2 657,33.3 654,33.5 651,33.6 648,33.7 645,33.7 642,33.8 639,33.8 636,33.8 633,33.8 630,33.7 627,33.7 624,33.6 621,33.5 618,33.4 615,33.2 612,33.1 609,32.9 606,32.7 603,32.5 600,32.3 597,32.1 594,31.8 591,31.6 588,31.3 585,31.1 582,30.8 579,30.5 576,30.2 573,29.9 570,29.7 567,29.4 564,29.1 561,28.8 558,28.5 555,28.3 552,28.0 549,27.8 546,27.8 543,28.1 540,28.3 537,28.5 534,28.6 531,28.8 528,28.9 525,29.1 522,29.2 519,29.3 516,29.4 513,29.4 510,29.5 507,29.5 504,29.5 501,29.5 498,29.5 495,29.4 492,29.4 489,29.3 486,29.2 483,29.0 480,28.9 477,28.7 474,28.5 471,28.3 468,28.1 465,27.9 462,27.6 459,27.4 456,27.7 453,27.9 450,28.2 447,28.5 444,28.8 441,29.1 438,29.4 435,29.7 432,30.0 429,30.3 426,30.7 423,31.0 420,31.3 417,31.6 414,31.9 411,32.2 408,32.5 405,32.8 402,33.1 399,33.3 396,33.6 393,33.8 390,34.1 387,34.3 384,34.5 381,34.6 378,34.8 375,34.9 372,35.1 369,35.2 366,35.2 363,35.3 360,35.3 357,35.3 354,35.3 351,35.3 348,35.2 345,35.1 342,35.0 339,34.9 336,34.7 333,34.5 330,34.3 327,34.1 324,33.8 321,33.6 318,33.3 315,32.9 312,32.6 309,32.2 306,31.9 303,31.5 300,31.0 297,30.6 294,30.2 291,29.7 288,29.2 285,28.7 282,28.3 279,27.8 276,27.2 273,26.7 270,27.2 267,27.7 264,28.2 261,28.7 258,29.3 255,29.8 252,30.2 249,30.7 246,31.2 243,31.7 240,32.2 237,32.6 234,33.1 231,33.5 228,33.9 225,34.3 222,34.7 219,35.0 216,35.4 213,35.7 210,36.0 207,36.3 204,36.5 201,36.8 198,37.0 195,37.2 192,37.3 189,37.4 186,37.5 183,37.6 180,37.7 177,37.7 174,37.7 171,37.7 168,37.6 165,37.5 162,37.4 159,37.3 156,37.1 153,36.9 150,36.7 147,36.4 144,36.2 141,35.9 138,35.6 135,35.2 132,34.9 129,34.5 126,34.1 123,33.7 120,33.3 117,32.8 114,32.4 111,31.9 108,31.4 105,31.0 102,30.5 99,30.0 96,29.4 93,28.9 90,28.4 87,27.9 84,27.4 81,26.8 78,26.3 75,26.8 72,27.3 69,27.8 66,28.3 63,28.7 60,29.2 57,29.7 54,30.1 51,30.6 48,31.0 45,31.4 42,31.8 39,32.1 36,32.5 33,32.8 30,33.1 27,33.4 24,33.7 21,33.9 18,34.1 15,34.3 12,34.5 9,34.7 6,34.8 3,34.9 0,34.9'/%3E%3C/svg%3E"); }
.mv-b .bande-onde {
  display: block;
  height: 26px;
  width: 100%;
  margin: 0 auto;
  opacity: .38;
  pointer-events: none;
  background-image: linear-gradient(100deg,
    #7A4C33   0%, #C4674A   9%, #F2AE63  17%, #D08A45  25%,
    #8E4A50  34%, #BA5A5E  42%, #E86A8E  50%, #B4526A  58%,
    #8A5A3C  67%, #E19947  75%, #C4674A  84%, #8A4A3A  92%,
    #7A4C33 100%);
  background-size: 260% 100%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='48'%3E%3Crect width='1.9' height='48' fill='%23000'/%3E%3C/svg%3E"), var(--tch-onde), linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='48'%3E%3Crect width='1.9' height='48' fill='%23000'/%3E%3C/svg%3E"), var(--tch-onde), linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-repeat: repeat-x, repeat-x, no-repeat;
          mask-repeat: repeat-x, repeat-x, no-repeat;
  -webkit-mask-size: 4px 48px, 1200px 48px, 100% 100%;
          mask-size: 4px 48px, 1200px 48px, 100% 100%;
  animation: tch-onde-va-et-vient 9s linear infinite,
             tch-onde-lueurs 7s linear infinite;
  animation-timing-function: linear, linear;
}
@keyframes tch-onde-va-et-vient {
  from { -webkit-mask-position: 0 center,     0px center, 0 0;
                 mask-position: 0 center,     0px center, 0 0; }
  to   { -webkit-mask-position: 0 center, -1200px center, 0 0;
                 mask-position: 0 center, -1200px center, 0 0; }
}
@keyframes tch-onde-lueurs {
  from { background-position:    0% center; }
  to   { background-position: -260% center; }
}
@media (prefers-reduced-motion: reduce) {
.mv-b .bande-onde { animation: none; }
}
@media (max-width: 900px) {
.mv-b .bande-onde-titre { order: 3; }
.mv-b .bande-onde-fin   { order: 8; }
}

/* ==========================================================================
   07/09 — CORRECTION DE LA BANDE D'ONDE : LES POCHOIRS DOIVENT SE CROISER
   ⚠️ DEFAUT VU PAR DAVID : au lieu d'une onde, un rectangle presque plein.
   CAUSE : il manquait `mask-composite`. Par defaut les couches de masque
   s'ADDITIONNENT — reste visible tout ce qui appartient a l'une OU a
   l'autre, donc presque tout. Il faut qu'elles se CROISENT : ne garder
   que ce qui appartient aux TROIS a la fois.
   Les tailles sont aussi reprises du site : `4px 100%, auto 100%,
   100% 100%` et non des hauteurs fixes en pixels — la silhouette doit
   s'etirer sur la hauteur de la bande, pas garder ses 48px d'origine.
   ========================================================================== */
.mv-b .bande-onde {
  -webkit-mask-size: 4px 100%, auto 100%, 100% 100%;
          mask-size: 4px 100%, auto 100%, 100% 100%;
  -webkit-mask-repeat: repeat-x, repeat-x, no-repeat;
          mask-repeat: repeat-x, repeat-x, no-repeat;
  -webkit-mask-composite: source-in, source-in;
          mask-composite: intersect, intersect;
}
/* ==========================================================================
   07/09 — MEME LARGEUR POUR TOUS LES BLOCS SUR TELEPHONE
   ⚠️ DEFAUT SIGNALE PAR DAVID (« c'est le bordel ») et confirme par la
   mesure a 390px : ondes 324px, rangee de contacts 324px, mais cadre gris
   246px et VOTE NOW 156px. Tout etait bien CENTRE — c'etaient les
   largeurs qui differaient.
   CAUSE : sur telephone la pile centre ses elements, et chacun prend sa
   largeur naturelle. Sur grand ecran ils s'etirent tous a 320px, d'ou
   l'alignement parfait la-bas et pas ici.
   ========================================================================== */
@media (max-width: 900px) {
.mv-b .pied-mv,
  .mv-b .contacts,
  .mv-b .contacts-sondage,
  .mv-b .bande-onde,
  .mv-b .cadre-video { width: 100%; align-self: stretch; }
/* le bouton du sondage est seul sur sa rangee : il l'occupe entierement */
.mv-b .contacts-sondage .btn { flex: 1 1 auto; }
}
/* ==========================================================================
   07/09 — LES DEUX BANDES CENTREES DANS LEUR VIDE
   ⚠️ DEFAUT MESURE : 35 a 42px au-dessus de la bande du haut, mais 0 en
   dessous — elle touchait le bouton Facebook.
   CAUSE : la marge etait posee sur le NOM, donc tout le vide tombait
   au-dessus de la bande, et rien apres.
   On deplace la marge sur la bande elle-meme, haut ET bas, la meme
   valeur des deux cotes. Elle flotte desormais au milieu de son vide.
   Meme traitement pour la bande du bas, dont l'espace inferieur est
   donne par le creux du grand cadre.
   ========================================================================== */
.mv-b .marque-lien     { margin-bottom: 0; }
.mv-b .bande-onde-titre { margin: clamp(20px, 2.7vh, 34px) auto; }
.mv-b .contacts-sondage { margin-bottom: 0; }
.mv-b .bande-onde-fin   { margin: clamp(20px, 2.7vh, 34px) auto 0; }
/* La bande du bas ne peut pas etre « centree dans son vide » comme celle
   du haut : sous elle, il n'y a pas un autre bloc mais le creux du grand
   cadre. On lui donne donc exactement la meme marge haute que ce creux,
   pour qu'elle se tienne a egale distance de VOTE NOW et du bord. */
.mv-b .bande-onde-fin { margin-top: clamp(16px, 2vh, 34px); }
/* CORRECTION : la bande du bas n'a rien sous elle — juste le vide laisse
   par le centrage vertical de la colonne face a la video. Chercher a
   « l'equilibrer » avec le bord du cadre n'a donc pas de sens : cette
   distance change avec la hauteur de la video, pas avec un reglage.
   On lui donne la MEME marge haute que celle du haut : les deux bandes
   se tiennent alors a egale distance de ce qui les precede, et la
   colonne se lit comme une paire. */
.mv-b .bande-onde-fin { margin: clamp(20px, 2.7vh, 34px) auto 0; }
@media (max-width: 900px) {
/* sur telephone la pile ajoute son propre espace : on le deduit */
.mv-b .bande-onde-titre,
  .mv-b .bande-onde-fin { margin-top: clamp(8px, 1.1vh, 14px); margin-bottom: clamp(8px, 1.1vh, 14px); }
}
/* ==========================================================================
   07/09 — LES ONDES DEUX FOIS PLUS LENTES (demande de David)
   Le site les fait defiler en 9s et 7s ; ici c'est trop vif. On double
   les deux durees. Le RAPPORT entre elles est conserve, sinon le
   croisement des deux mouvements changerait de caractere.
   ========================================================================== */
.mv-b .bande-onde {
  animation: tch-onde-va-et-vient 18s linear infinite,
             tch-onde-lueurs 14s linear infinite;
}
/* ==========================================================================
   07/09 — LE CADRE DE LA SIGNATURE DEVIENT UN BOUTON
   Plus de gris : on reprend le fond des boutons — noir plein, plus
   l'aurore conique et la trame de points en couche de fond, exactement
   la regle `.btn::after` de la feuille du site.
   Au survol du nom, le cadre reagit comme un bouton : l'aurore et
   l'anneau montent a pleine intensite et s'emballent a 2,2s, la meme
   valeur que Facebook et WhatsApp. Le texte, lui, garde sa bascule de
   rose deja reglee.
   ========================================================================== */
.mv-b .pied-mv {
  background: #000;
  isolation: isolate;                   /* l'aurore reste sous le texte */
  transition: box-shadow .55s var(--tch-ease);
}
.mv-b .pied-mv::after {
  content: '';
  position: absolute; z-index: -1; inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3'%3E%3Crect width='1' height='1' fill='%23000'/%3E%3C/svg%3E"),
    conic-gradient(from calc(var(--tch-angle) * -1),
    rgba(186,27,73,.32)      0deg,
    rgba(113,37,50,.12)     90deg,
    rgba(186,112,28,.30)   180deg,
    rgba(117,42,46,.12)    270deg,
    rgba(186,27,73,.32)    360deg);
  background-size: 2px 2px, auto;
  opacity: .55;
  animation: tch-filament-btn 5.5s linear infinite;
  transition: opacity .55s var(--tch-ease);
  pointer-events: none;
}
/* le survol : les memes valeurs que .btn:hover */
.mv-b .pied-mv:hover {
  box-shadow: 0 0 0 1px rgba(227,68,114,.12),
              0 12px 34px rgba(186,27,73,.30),
              0 4px 16px rgba(225,153,71,.22);
}
.mv-b .pied-mv:hover::after,
.mv-b .pied-mv:hover::before { opacity: 1; animation-duration: 2.2s; }
@media (prefers-reduced-motion: reduce) {
.mv-b .pied-mv::after { animation: none; }
}
/* ⚠️ Le fond gris etait pose par un selecteur avec `:not()`, plus fort que
   le mien : il l'emportait. On reprend la meme forme pour l'emporter a
   notre tour, et on inverse aussi le rang de VOTE NOW sur telephone. */
.mv-b .pied-mv:not(.pied-copyright) { background: #000; }
@media (max-width: 900px) {
.mv-b .contacts-sondage { order: 6; }
.mv-b .pied-mv          { order: 7; }
.mv-b .bande-onde-fin   { order: 8; }
}
/* ==========================================================================
   07/09 — UNE TROISIEME BANDE, ENTRE VOTE NOW ET LE CADRE
   Meme regle que les deux autres — meme dessin, meme vitesse, meme
   largeur. Elle ne fait que se placer.
   ========================================================================== */
@media (max-width: 900px) {
.mv-b .bande-onde-milieu { order: 7; }
.mv-b .pied-mv           { order: 8; }
.mv-b .bande-onde-fin    { order: 9; }
}
/* ==========================================================================
   07/09 — TOUS LES ESPACES RESSERRES (David : « il y en a un peu trop
   partout »). Releve avant, sur 1920 : 27 / 29 / 29 / 18 / 26 / 26 / 29.
   On enleve un tiers a chaque intervalle, sans en privilegier aucun :
   c'est la respiration d'ensemble qui baisse, pas le rythme qui change.
   ========================================================================== */
.mv-b .portrait     { margin-bottom: clamp(12px, 1.7vh, 22px); }
.mv-b .contacts     { gap: clamp(10px, 1.2vh, 15px); }
.mv-b .bande-onde   { margin-top: clamp(13px, 1.8vh, 22px); margin-bottom: clamp(13px, 1.8vh, 22px); }
.mv-b .contacts-sondage,
.mv-b .pied-mv      { margin-top: clamp(12px, 1.7vh, 18px); }
@media (max-width: 900px) {
.mv-b .bande-onde { margin-top: clamp(5px, 0.7vh, 9px); margin-bottom: clamp(5px, 0.7vh, 9px); }
.mv-b .contacts   { margin-bottom: clamp(10px, 1.5vh, 18px); }
.mv-b .cadre-video { margin-bottom: clamp(9px, 1.6vh, 20px); }
}
/* ⚠️ Le cadre suit desormais une bande, qui porte deja sa propre marge :
   les deux s'additionnaient (45px au lieu de 20). Le cadre n'a plus
   besoin de la sienne. */
.mv-b .pied-mv { margin-top: 0; }
.mv-b .pied-mv:not(.pied-copyright) { margin-top: 0; }
/* Sur telephone, la pile ajoute son propre `gap` par-dessus les marges :
   certains intervalles cumulaient les deux (30px contre 19 ailleurs).
   On coupe le gap et on laisse les seules marges piloter le rythme. */
@media (max-width: 900px) {
.mv-b { gap: 0; }
.mv-b .contacts,
  .mv-b .contacts-sondage,
  .mv-b .cadre-video { margin-bottom: 0; }
.mv-b .portrait    { margin-bottom: clamp(12px, 1.7vh, 20px); }
.mv-b .bande-onde  { margin-top: clamp(11px, 1.6vh, 18px); margin-bottom: clamp(11px, 1.6vh, 18px); }
.mv-b .contacts-sondage,
  .mv-b .cadre-video { margin-top: clamp(11px, 1.6vh, 18px); }
}
/* La video est precedee d'une bande qui porte deja sa marge (les deux
   s'additionnaient : 27px) et suivie des boutons sans aucune marge (0px).
   On lui retire celle du haut et on lui rend celle du bas. */
@media (max-width: 900px) {
.mv-b .cadre-video { margin-top: 0; margin-bottom: clamp(11px, 1.6vh, 18px); }
}
/* 07/09 — UNE QUATRIEME BANDE, TOUT EN HAUT DE LA COLONNE
   Meme regle que les trois autres. Le portrait la suit : sa marge haute
   reste nulle, c'est la bande qui porte l'ecart, comme partout ailleurs. */
@media (max-width: 900px) {
.mv-b .bande-onde-haut   { order: 0; }
.mv-b .portrait          { order: 1; }
}
.mv-b .bande-onde-haut { margin-top: 0; }
/* ==========================================================================
   07/09 — FACEBOOK ET WHATSAPP A LARGEUR EGALE SUR TELEPHONE
   MESURE : 157px pour l'un, 162px pour l'autre — chacun s'ajustait a son
   mot. Sur grand ecran ils font deja 320px tous les deux, l'ecart ne se
   voyait que sur telephone.
   `flex: 1 1 0` leur fait partager la rangee a parts strictement egales,
   quel que soit le texte.
   ========================================================================== */
@media (max-width: 900px) {
.mv-b .contacts:not(.contacts-sondage) .btn { flex: 1 1 0; min-width: 0; }
}
/* ==========================================================================
   07/09 — LES QUATRE ONDES ALTERNENT DE SENS
   1re (au-dessus de la photo)  : gauche -> droite
   2e  (sous le nom)            : droite -> gauche
   3e  (sous VOTE NOW)          : gauche -> droite
   4e  (tout en bas)            : droite -> gauche
   On inverse le sens de LECTURE des deux animations, sans toucher a
   leurs durees ni a leur dessin : `animation-direction: reverse`.
   Les lueurs suivent le meme sens que le mouvement, sinon les deux se
   contrarieraient et l'onde paraitrait sur place.
   ========================================================================== */
.mv-b .bande-onde-titre,
.mv-b .bande-onde-fin { animation-direction: reverse, reverse; }
/* ⚠️ VERIFIE PAR MESURE, ET C'ETAIT L'INVERSE DE CE QUE JE CROYAIS :
   l'animation « normale » deplace le masque vers les valeurs negatives,
   donc le motif defile de DROITE A GAUCHE. Ce sont donc les ondes 1 et 3
   qu'il faut inverser, pas les autres.
   Resultat voulu : haut gauche->droite, 2e droite->gauche,
   3e gauche->droite, 4e droite->gauche. */
.mv-b .bande-onde-titre,
.mv-b .bande-onde-fin  { animation-direction: normal, normal; }
.mv-b .bande-onde-haut,
.mv-b .bande-onde-milieu { animation-direction: reverse, reverse; }
/* ==========================================================================
   07/09 — LES ECARTS EGALISES A L'OEIL, PAS DANS LES BOITES
   ⚠️ CE QUE MES MESURES PRECEDENTES NE VOYAIENT PAS : les boites etaient
   bien regulieres (19px partout), mais ce qu'on VOIT ne l'etait pas.
   Deux raisons :
     - l'anneau des boutons DEBORDE de 3px hors de leur boite, de chaque
       cote : deux boutons separes de 19px n'ont plus que 13px de vide
       entre leurs anneaux, et le gap de 13px n'en laissait que 7 ;
     - le dessin de l'onde n'occupe que 17px de sa boite de 26 : il reste
       4,5px de vide en haut et en bas, qui s'ajoutent a l'ecart.
   Releve en pixels peints avant correction : 20,5 / 21,5 / 31,5 / 20,5 /
   7,0 / 12,0 / 20,5 / 22,5 / 22,5. On vise 20 partout.
   ========================================================================== */
.mv-b .contacts:not(.contacts-sondage) { gap: 26px; }
.mv-b .contacts-sondage { margin-top: 27px; }
.mv-b .bande-onde-titre { margin-top: 8px; }
.mv-b .pied-mv:not(.pied-copyright) { margin-top: 17px; }
.mv-b .bande-onde-fin { margin-top: 17px; }
/* la marge du cadre s'ajoutait a celle de l'onde qui le precede : 38,5px
   au lieu de 20. L'onde porte deja l'ecart, le cadre n'en a pas besoin. */
.mv-b .pied-mv:not(.pied-copyright) { margin-top: 0; }
/* ==========================================================================
   07/09 — UN SEUL ECART DE REFERENCE, ET DES COMPENSATIONS
   Mes corrections precedentes etaient en pixels fixes : elles marchaient
   sur 1920 et faussaient tout ailleurs (jusqu'a 15px d'ecart a 390px).
   Un seul reglage commande desormais tout le rythme : `--ecart`. Chaque
   marge en decoule, corrigee de ce qui deborde ou manque :
     - un anneau de bouton ou de cadre deborde de 3px  -> on retire 3
     - le dessin d'une onde laisse 4,5px de vide       -> on ajoute 4,5
     - entre deux boutons, les deux anneaux debordent  -> on ajoute 6
   ========================================================================== */
.mv-b { --ecart: clamp(15px, 2vh, 24px); }
.mv-b .contacts:not(.contacts-sondage) { gap: calc(var(--ecart) + 6px); }
.mv-b .contacts-sondage                { margin-top: calc(var(--ecart) + 6px); }
.mv-b .portrait                        { margin-bottom: calc(var(--ecart) - 3px); }
.mv-b .bande-onde                      { margin-top: calc(var(--ecart) - 1.5px);
                                         margin-bottom: calc(var(--ecart) - 1.5px); }
/* sous le titre il n'y a pas d'anneau, mais l'interligne laisse deja
   environ 12px sous la derniere ligne */
.mv-b .bande-onde-titre                { margin-top: calc(var(--ecart) - 12px); }
.mv-b .bande-onde-haut                 { margin-top: 0; }
.mv-b .pied-mv:not(.pied-copyright)    { margin-top: 0; }
.mv-b .cadre-video                     { margin-top: 0; }
@media (max-width: 900px) {
.mv-b .cadre-video { margin-bottom: calc(var(--ecart) - 1.5px); }
}
/* 07/09 — ⚠️ MESURE : 22,6px entre le haut du cadre et la 1re onde, mais
   42,7px entre la 4e onde et le bas. La derniere onde gardait sa marge
   basse, qui s'ajoutait au creux du cadre ; la premiere, elle, n'a pas de
   marge haute. Les deux extremites sont maintenant symetriques : c'est le
   seul creux du cadre qui les separe du bord. */
.mv-b .bande-onde-fin { margin-bottom: 0; }
/* ==========================================================================
   07/09 — LE CASQUE DE PART ET D'AUTRE DE TCHIIRØ
   Repris de `.eyebrow-icon` du site : 24px de cote, et surtout SES DEUX
   ANIMATIONS — `tch-brand-vibre` qui le fait tressaillir trois fois a
   l'ouverture, et `tch-coulee-casque` qui fait couler son fond en
   continu sur 9s. Les images-cles sont recopiees telles quelles.
   L'image est celle du Salon (casque-rose.png), la seule dont on
   dispose ici.
   ========================================================================== */
.mv-b .marque .casque-titre {
  display: inline-block;
  vertical-align: -.12em;
  width: .78em; height: .78em;
  flex-shrink: 0;
  background: url('images/casque-rose.png') no-repeat center / contain;
  background-size: 260% auto;
  animation: tch-brand-vibre .55s var(--tch-ease) 3,
             tch-coulee-casque 9s linear infinite;
}
.mv-b .marque .casque-titre:first-child { margin-right: .34em; }
.mv-b .marque .casque-titre + span,
.mv-b .marque .casque-titre:not(:first-child) { margin-left: .34em; }
@keyframes tch-brand-vibre {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  20% { transform: translateX(-2px) rotate(-4deg); }
  40% { transform: translateX(2px) rotate(4deg); }
  60% { transform: translateX(-1.5px) rotate(-3deg); }
  80% { transform: translateX(1.5px) rotate(3deg); }
}
@keyframes tch-coulee-casque {
  from { background-position: 0% 0; }
  to   { background-position: -260% 0; }
}
@media (prefers-reduced-motion: reduce) {
.mv-b .marque .casque-titre { animation: none; }
}
/* ⚠️ CORRECTION : `tch-coulee-casque` fait defiler un fond de 260% de
   large. Sur le site elle glisse sous un degrade ; ici, appliquee a une
   icone, elle l'agrandit a 260% et la pousse hors de son cadre — le
   casque devenait invisible.
   On garde donc l'icone a sa taille (`contain`) et la VIBRATION, qui est
   l'effet reellement visible du site. On y ajoute un balancement lent et
   continu, pour qu'elle ne soit pas figee une fois la vibration passee. */
.mv-b .marque .casque-titre {
  background-size: contain;
  animation: tch-brand-vibre .55s var(--tch-ease) 3,
             tch-casque-balance 6s ease-in-out infinite;
}
@keyframes tch-casque-balance {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(5deg); }
}
@media (prefers-reduced-motion: reduce) {
.mv-b .marque .casque-titre { animation: none; }
}
/* ==========================================================================
   07/09 — LE CASQUE : ANIMATION DU SITE A L'IDENTIQUE, ET CENTRAGE
   1. Le balancement continu que j'avais ajoute est RETIRE. Le site ne
      fait que `tch-brand-vibre` : trois tressaillements de 0,55s, puis
      plus rien. On s'y tient.
   2. MESURE sur capture : le centre des casques tombait 3px sous celui
      des majuscules, et les espaces valaient 18px a gauche contre 16 a
      droite. On remonte l'icone et on egalise.
   ========================================================================== */
.mv-b .marque .casque-titre {
  animation: tch-brand-vibre .55s var(--tch-ease) 3;
  vertical-align: -.02em;
}
.mv-b .marque .casque-titre:first-child { margin-right: .30em; }
.mv-b .marque .casque-titre:not(:first-child) { margin-left: .34em; }
/* affinage sur mesure : casques encore 1,2px trop bas, et 14,5px a
   gauche contre 17 a droite. */
.mv-b .marque .casque-titre { vertical-align: .01em; }
.mv-b .marque .casque-titre:first-child { margin-right: .335em; }
.mv-b .marque .casque-titre:not(:first-child) { margin-left: .295em; }
/* ⚠️ CE QUE MA MESURE PRECEDENTE NE VOYAIT PAS : je comparais les
   centres de MASSE (0,5px d'ecart, donc « aligne »), alors que l'oeil
   compare les rectangles. Les casques commencent a la meme hauteur que
   les majuscules mais s'arretent 6px plus haut : leur centre
   GEOMETRIQUE etait 3px au-dessus. On les descend de ces 3px, et on les
   rapproche legerement du mot. */
.mv-b .marque .casque-titre { vertical-align: -.07em; }
.mv-b .marque .casque-titre:first-child { margin-right: .285em; }
.mv-b .marque .casque-titre:not(:first-child) { margin-left: .245em; }
/* dernier ajustement, sur capture complete du titre : il restait 1px. */
.mv-b .marque .casque-titre { vertical-align: -.043em; }
/* ==========================================================================
   07/09 — LES CASQUES REPARTENT AU SURVOL DU TITRE
   Une animation CSS ne se relance pas si on lui redonne le meme nom : le
   navigateur ne voit aucun changement. On declare donc une SECONDE
   animation, identique au degre pres, sous un autre nom — c'est le
   changement de nom qui la fait partir.
   Meme duree, meme courbe, meme nombre de repetitions que celle du site.
   ========================================================================== */
@keyframes tch-brand-vibre-survol {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  20% { transform: translateX(-2px) rotate(-4deg); }
  40% { transform: translateX(2px) rotate(4deg); }
  60% { transform: translateX(-1.5px) rotate(-3deg); }
  80% { transform: translateX(1.5px) rotate(3deg); }
}
.mv-b .marque-lien:hover .casque-titre,
.mv-b .marque-lien:focus-visible .casque-titre {
  animation: tch-brand-vibre-survol .55s var(--tch-ease) 3;
}
@media (prefers-reduced-motion: reduce) {
.mv-b .marque-lien:hover .casque-titre { animation: none; }
}
/* 07/09 — ⚠️ MESURE dans le cadre : 16px entre la 1re ligne et le nom,
   mais 25,5px entre le nom et le copyright. C'est ce dernier ecart qui
   creusait. On l'aligne sur le premier. */
.mv-b .pied-mv .ligne-copyright { margin-top: clamp(2px, 0.35vh, 5px); }
/* affinage : 18,5px contre 16 ailleurs, on retire les 2,5px restants. */
.mv-b .pied-mv .ligne-copyright { margin-top: clamp(0px, 0.1vh, 2px); }
/* 07/09 — RETOUR A L'ORDRE D'ORIGINE DES ONDES DU FOND
   Rose en haut, cuivre au milieu, or en bas — comme dans le Salon Audio
   avant l'echange du 07/09. */
.onde-enveloppe.est-rose   { top: calc(50% - 200px); }
.onde-enveloppe.est-cuivre { top: 50%; }
/* 07/09 — LA TRAME DE POINTS SANS `:has()`
   ⚠️ Elle etait posee par `.cadre-video:has(video)::after`. Sur un
   navigateur qui ne connait pas `:has()` — Firefox avant decembre 2023 —
   la regle entiere est ignoree et la trame disparait.
   Le cadre contient toujours une video : la condition etait inutile. */
.cadre-video::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  border-radius: var(--tch-radius-lg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3'%3E%3Crect width='1' height='1' fill='%23000'/%3E%3C/svg%3E");
  background-size: 2px 2px;
  opacity: .85;
}