.hero__logo .cls-1,
.hero__logo .cls-2 {
        fill: #02869f;
      }

.hero__logo .cls-2,
.hero__logo .cls-3,
.hero__logo .cls-4,
.hero__logo .cls-5,
.hero__logo .cls-6,
.hero__logo .cls-7,
.hero__logo .cls-8,
.hero__logo .cls-9,
.hero__logo .cls-10,
.hero__logo .cls-11,
.hero__logo .cls-12,
.hero__logo .cls-13,
.hero__logo .cls-14,
.hero__logo .cls-15,
.hero__logo .cls-16,
.hero__logo .cls-17,
.hero__logo .cls-18 {
        stroke-miterlimit: 10;
      }

.hero__logo .cls-2,
.hero__logo .cls-3,
.hero__logo .cls-7 {
        stroke-width: .91px;
      }

.hero__logo .cls-2,
.hero__logo .cls-3,
.hero__logo .cls-7,
.hero__logo .cls-8,
.hero__logo .cls-9,
.hero__logo .cls-10,
.hero__logo .cls-11,
.hero__logo .cls-12,
.hero__logo .cls-18 {
        stroke: #1d1d1b;
      }

.hero__logo .cls-3,
.hero__logo .cls-9,
.hero__logo .cls-11,
.hero__logo .cls-12,
.hero__logo .cls-13,
.hero__logo .cls-14,
.hero__logo .cls-15,
.hero__logo .cls-16,
.hero__logo .cls-17 {
        fill: none;
      }

.hero__logo .cls-19 {
        fill: #1d1d1b;
      }

.hero__logo .cls-4 {
        stroke-width: 10px;
      }

.hero__logo .cls-4,
.hero__logo .cls-5,
.hero__logo .cls-6 {
        stroke: #f4ba06;
      }

.hero__logo .cls-4,
.hero__logo .cls-20 {
        fill: #fff3c9;
      }

.hero__logo .cls-5 {
        stroke-width: 1.02px;
      }

.hero__logo .cls-5,
.hero__logo .cls-6,
.hero__logo .cls-7,
.hero__logo .cls-8,
.hero__logo .cls-10,
.hero__logo .cls-21,
.hero__logo .cls-18 {
        fill: #f4ba06;
      }

.hero__logo .cls-6 {
        stroke-width: .43px;
        stroke-linejoin: round;
      }

.hero__logo .cls-8 {
        stroke-width: .76px;
      }

.hero__logo .cls-9,
.hero__logo .cls-14,
.hero__logo .cls-17 {
        stroke-width: 2.44px;
      }

.hero__logo .cls-10 {
        stroke-width: .81px;
      }

.hero__logo .cls-11,
.hero__logo .cls-13,
.hero__logo .cls-16 {
        stroke-width: 5.82px;
      }

.hero__logo .cls-12 {
        stroke-width: 12.5px;
      }

.hero__logo .cls-13,
.hero__logo .cls-14 {
        stroke: #e30613;
      }

.hero__logo .cls-15 {
        stroke-width: 1.95px;
      }

.hero__logo .cls-15,
.hero__logo .cls-16,
.hero__logo .cls-17 {
        stroke: #02869f;
      }

.hero__logo #aiguille-f,
.hero__logo #aiguille-ronde-1,
.hero__logo #aiguille-ronde-2 {
        transform-box: view-box;
      }

.hero__logo #aiguille-f { transform-origin: 29.13px 37.42px; }

.hero__logo #aiguille-ronde-1 { transform-origin: 480.36px 104.08px; }

.hero__logo #aiguille-ronde-2 { transform-origin: 569.54px 104.08px; }

.hero__logo #VU_METRE_PIED_COULISSE:hover #aiguille-f {
        animation: vu-jitter-a .95s infinite ease-in-out;
      }

.hero__logo #VU_METRE_DROITE:hover #aiguille-ronde-1 {
        animation: vu-jitter-b 1.1s infinite ease-in-out;
      }

.hero__logo #VU_METRE_DROITE-2:hover #aiguille-ronde-2 {
        animation: vu-jitter-a 1.05s infinite ease-in-out;
      }

@keyframes vu-jitter-a {
        0%   { transform: rotate(0deg); }
        5%   { transform: rotate(62deg); }
        9%   { transform: rotate(18deg); }
        14%  { transform: rotate(80deg); }
        19%  { transform: rotate(10deg); }
        24%  { transform: rotate(48deg); }
        29%  { transform: rotate(90deg); }
        35%  { transform: rotate(28deg); }
        40%  { transform: rotate(6deg); }
        46%  { transform: rotate(70deg); }
        52%  { transform: rotate(38deg); }
        58%  { transform: rotate(84deg); }
        64%  { transform: rotate(15deg); }
        70%  { transform: rotate(54deg); }
        76%  { transform: rotate(25deg); }
        82%  { transform: rotate(77deg); }
        88%  { transform: rotate(45deg); }
        94%  { transform: rotate(12deg); }
        100% { transform: rotate(0deg); }
      }

@keyframes vu-jitter-b {
        0%   { transform: rotate(0deg); }
        6%   { transform: rotate(32deg); }
        12%  { transform: rotate(8deg); }
        17%  { transform: rotate(75deg); }
        23%  { transform: rotate(45deg); }
        29%  { transform: rotate(90deg); }
        35%  { transform: rotate(19deg); }
        41%  { transform: rotate(64deg); }
        47%  { transform: rotate(10deg); }
        53%  { transform: rotate(41deg); }
        59%  { transform: rotate(83deg); }
        65%  { transform: rotate(23deg); }
        71%  { transform: rotate(4deg); }
        77%  { transform: rotate(59deg); }
        83%  { transform: rotate(28deg); }
        89%  { transform: rotate(78deg); }
        95%  { transform: rotate(13deg); }
        100% { transform: rotate(0deg); }
      }

/* Contour des lettres un peu plus épais (demande de Bruno, 2026-10-18) :
   le trait d'origine (1 unité sur 710) devenait presque invisible sur les écrans
   peu contrastés. Réglage fait ici, dans le CSS du portail : le fichier logo
   d'origine n'est pas modifié. Pour revenir en arrière, supprimer ce bloc. */
/* le haut du « F » touche le bord du dessin : avec un trait plus épais, il serait coupé */
.hero__logo { overflow: visible; }
.hero__logo .cls-18 { stroke-width: 2px; }
/* pied à coulisse (le « F ») : corps, petit VU-mètre, bouton et traits de contour */
.hero__logo .cls-2,
.hero__logo .cls-3,
.hero__logo .cls-7,
.hero__logo .cls-8,
.hero__logo .cls-10 { stroke-width: 2px; } /* = même épaisseur que les lettres */
/* les 2 grands VU-mètres (les « O » de TOOLS) : trait encre derrière l'anneau jaune de 10,
   12,5 → 14 = contour visible de 2 de chaque côté, comme les lettres */
.hero__logo .cls-12 { stroke-width: 14px; }

@media (prefers-reduced-motion: reduce) {
.hero__logo #VU_METRE_PIED_COULISSE:hover #aiguille-f,
.hero__logo #VU_METRE_DROITE:hover #aiguille-ronde-1,
.hero__logo #VU_METRE_DROITE-2:hover #aiguille-ronde-2 {
          animation: none;
        }
}