/* ==========================================================================
   LA MARQUE « L A R R Y » — bureau-b1, 12/09/2026

   Demande de Kentin : remplacer le vieux logo du coin haut gauche par le mot
   « Larry » écrit, « simple, épuré, qui fait prestigieux », avec le balayage
   du composant « Dia Text Reveal » de Magic UI.

   CE QUE FAIT CE BALAYAGE, et pourquoi il n'a besoin ni de React ni de rien :
   « a horizontal color band sweeps across text with a gradient shine, then
   settles on your theme foreground color ». Pas de découpe lettre par lettre,
   pas de bibliothèque de mouvement — c'est un dégradé découpé par le texte
   (background-clip: text) dont on déplace la position. Quinze lignes de CSS.

   LES DEUX CHOIX SONT DE KENTIN, à la question :
   - CAPITALES ESPACÉES, contre « sérif en bas de casse » et « bas de casse
     serré ». C'est la forme classique du prestige, et elle a l'avantage de
     tenir dans la police de l'interface : Louis n'embarque aucun caractère, et
     faire venir une police d'écriture pour cinq lettres aurait ajouté une
     dépendance réseau à une application qui s'ouvre sur le terrain.
   - ÉCLAT ARGENT, contre le violet de l'application et l'or. Un blanc qui
     traverse la couleur du texte, comme une lumière sur du métal poli.

   ⚠️ LE MOT N'EST PAS INJECTÉ : IL EST HABILLÉ. « Larry » est déjà dans
   index.html, dans « .marque .nom ». On masque l'image et on transforme ce
   texte — plutôt que de remplacer le bloc par un script. Deux raisons, et la
   seconde est la vraie : un remplacement au chargement laisse VOIR l'ancien
   logo le temps que le script passe, puisqu'il s'exécute après app.js ; et un
   mot qui existe dans le balisage reste lisible par tout ce qui lit la page.

   ⚠️ LA POSITION AU REPOS EST CELLE D'ARRIVÉE. Le dégradé est posé à sa place
   FINALE (l'éclat hors du mot, donc le mot entier à la couleur du thème), et
   l'animation part de l'autre bout pour y revenir. Conséquence : sans
   animation — mouvement réduit, curseur des Préférences à zéro, navigateur qui
   ignore l'animation — le mot s'affiche correctement au lieu de rester
   transparent. Un texte dont la seule couleur vient d'une animation disparaît
   le jour où l'animation ne joue pas.
   ========================================================================== */

/* Le vieux logo s'en va. Le fichier logo.png reste sur le disque et dans le
   balisage : commenter les deux lignes de chargement de ce chantier le
   ramène tel quel, sans rien démêler. */
.marque .pastille-logo { display: none; }

/* La marque passe en colonne : le mot d'abord, la ligne de service dessous.
   « .marque » est en flex avec un gap et des marges intérieures posés par
   app.css (l. 453) — on ne reprend que ce qui change. */
.marque {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding-top: 2px;
}
.marque > div { display: contents; }

.marque {
  /* La couleur de repos du mot : la couleur du texte, adoucie d'un cinquième
     vers le fond. C'est ELLE qui laisse la place à l'éclat — un mot posé au
     maximum de contraste n'a plus de marge pour s'éclairer. Mesurée dans les
     deux thèmes : voir le relevé en tête du chantier. */
  --mq-repos: color-mix(in srgb, var(--txt) 78%, var(--fond));
  /* ⚠️ LE SOMMET DE L'ÉCLAT VA AU-DELÀ DE LA COULEUR DU TEXTE, et il le faut.
     Deuxième mesure : en ramenant simplement la bande à 100 % de --txt, l'écart
     entre le repos (#c0c3cc) et le sommet (#eef2fb) ne se voyait pas sur cinq
     lettres de 14 px — j'ai comparé les deux images, elles étaient
     indiscernables. Un éclat doit DÉPASSER, pas rejoindre.
     Le sommet est donc le blanc pur sur fond sombre, le noir pur sur fond
     clair : dans les deux cas, le point le plus éloigné du fond.

     ⚠️ TROISIÈME MESURE, ET LA DERNIÈRE : le sommet ne doit pas être un POINT.
     Écrit « var(--mq-pic) 46% », le blanc pur n'existait qu'à une abscisse
     unique — l'œil ne voyait qu'une rampe, jamais un éclat. Il lui faut un
     PLATEAU (44 % à 50 %), et des flancs plus hauts. Vérifié en figeant la
     position du dégradé pas à pas plutôt qu'en attendant une image au jugé. */
  --mq-pic: #ffffff;
}
:root[data-theme="clair"] .marque { --mq-pic: #000000; }

.marque .nom {
  /* La lettre, telle que Kentin l'a choisie. */
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1.15;
  /* L'interlettrage ajoute un blanc APRÈS la dernière lettre : sans cette
     compensation, le mot n'est pas aligné sur ce qui le suit. */
  margin-right: -.22em;
  /* L'ÉCLAT.

     ⚠️ PREMIÈRE ÉCRITURE, ET ELLE ÉTAIT FAUSSE — le mot s'affichait amputé
     (« L A I » au lieu de LARRY). J'avais posé le repos à « -30% », HORS de
     l'intervalle [0%, 100%] : une position hors bornes laisse une partie de la
     boîte SANS image, et sous « background-clip: text » ce qui n'a pas d'image
     n'a pas de couleur du tout — les lettres y disparaissent. Un dégradé plus
     large que sa boîte ne la couvre que si sa position reste entre les bornes.

     La règle qui en découle, et elle vaut pour tout texte découpé : LES DEUX
     EXTRÉMITÉS DE L'ANIMATION DOIVENT COUVRIR LA BOÎTE ENTIÈRE. D'où un
     dégradé de 300 % — la boîte en voit un tiers — dont l'éclat est au milieu
     (46 %) : à 100 % la fenêtre montre [66 %–100 %], à 0 % elle montre
     [0 %–33 %], et ces deux tiers-là sont uniformément à la couleur du texte.
     L'éclat ne traverse qu'entre les deux.

     ⚠️ SECONDE FAUTE, VUE À L'IMAGE ELLE AUSSI : l'éclat était un BLANC ABSOLU.
     En thème sombre, « --txt » vaut déjà #eef2fb — un blanc qui passe sur du
     presque-blanc ne se voit pas. Le mot balayait sans que rien ne bouge.

     Un éclat n'est pas une couleur, c'est un ÉCART. Le mot se pose donc à 80 %
     de la couleur du texte mêlée au fond, et la bande le ramène à 100 %. Dans
     le sombre, la bande éclaircit ; dans le clair, elle assombrit. Les deux se
     lisent comme une lumière qui passe, et les deux se mesurent. */
  background-image: linear-gradient(100deg, var(--mq-repos) 0 30%, color-mix(in srgb, var(--mq-pic) 58%, var(--mq-repos)) 38%, var(--mq-pic) 44% 50%, color-mix(in srgb, var(--mq-pic) 58%, var(--mq-repos)) 56%, var(--mq-repos) 64% 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  color: var(--mq-repos);
}
/* La découpe par le texte, seulement là où elle existe : sans « @supports »,
   un navigateur qui ignore background-clip afficherait un mot transparent sur
   un rectangle dégradé. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .marque .nom {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.marque .sous {
  margin-top: 0;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--txt-3);
}

/* Le balayage. « both » garde la dernière image, qui est aussi la position de
   repos : rien ne saute à la fin.

   ⚠️ LA DURÉE PASSE PAR LE CURSEUR DES PRÉFÉRENCES (règle de bureau-9a) —
   app.js pose --anim-vit à 100/vitesse. 1,5 s est la valeur par défaut du
   composant d'origine. */
@keyframes mq-balayage {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}
.marque .nom.mq-anime {
  animation: mq-balayage calc(1.5s * var(--anim-vit, 1)) cubic-bezier(.22, .61, .36, 1) both;
}

/* Sur le rail replié, la barre latérale n'a plus la place d'un mot espacé :
   le mot s'efface et c'est l'icône de navigation qui porte l'identité. */
.appli.replie .marque .sous { display: none; }
.appli.replie .marque .nom { font-size: 12px; letter-spacing: .12em; }

/* --- Mouvement réduit --------------------------------------------------------
   Le mot reste lisible : la position de repos EST la position d'arrivée, donc
   couper l'animation ne coûte que l'éclat. */
@media (prefers-reduced-motion: reduce) {
  .marque .nom.mq-anime { animation: none; }
}