/* logo-barres-20260922-r1.css — LE LOGO A BARRES DE LA PREMIERE V2, couleurs héritées de la V1.
   Stéphane, 22/09 : « on part sur la 2 + 5 » (planche https://claude.ai/artifact/WvhW9VJRGDEwaxay1NnBQr).
     2 = quatre barres arrondies A GAUCHE du mot, magenta / violet / bleu (les trois couleurs du logo
         historique) et une quatrième à l'encre du thème ; le mot « terondo » en minuscules, tel que
         la home d'Astra du 11/09 le posait.
     5 = bloc-marque : la devise (« De bonnes ondes sur la terre ronde ») reste sous le logo, là où le
         lot du 21/09 l'a mise (accueil) ; ce lot ne la touche pas, il la laisse à sa place.
   PERIMETRE BORNE : chaque règle porte html[data-logo-barres="on"], attribut que SEUL le module pose,
   après avoir lu le coupe-circuit. Sans lui, pas une règle ne touche la page : retirer le script rend
   le logo actuel (le SVG TERONDO de la V1 est toujours greffé par la page d'accueil, on ne l'efface pas).
   Ce qu'on surcharge, et pourquoi la spécificité est celle-là : accueil-performance r8 et
   entete-equilibre-mobile r6 donnent au lien de marque une largeur fixe de 264 px et aux barres
   4 px de large, 22 px de haut, la couleur d'accent, sans arrondi (les barres « aplaties » du 19/09) ;
   mega-menu.css termine par une extinction des animations des barres en !important. */

html[data-logo-barres="on"] body>header .brand{display:inline-flex;align-items:center;gap:10px;width:auto;max-width:100%;min-height:44px;margin:0;padding:0;font:800 30px/1 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:-1.5px;color:var(--ink);text-decoration:none;white-space:nowrap;direction:ltr;unicode-bidi:isolate}
html[data-logo-barres="on"] body>header .brand .mot{display:inline-block}
html[data-logo-barres="on"] body>header .brand .bars{display:flex;gap:3px;align-items:center;height:30px;margin:0;flex:none}
html[data-logo-barres="on"] body>header .brand .bars i{display:block;width:5px;height:16px;border-radius:3px;background:#e8368f;opacity:1;transform:none;transform-origin:center bottom;--i:0}
html[data-logo-barres="on"] body>header .brand .bars i:nth-child(2){height:28px;background:#8b4fe0;--i:1}
html[data-logo-barres="on"] body>header .brand .bars i:nth-child(3){height:22px;background:#2e7bff;--i:2}
html[data-logo-barres="on"] body>header .brand .bars i:nth-child(4){height:12px;background:currentColor;opacity:.32;--i:3}

/* le bloc-marque (accueil) : le logo, la devise dessous, alignés sur le bord gauche du mot */
html[data-logo-barres="on"] body>header .mh-brand-block{gap:6px}
html[data-logo-barres="on"] body>header .mh-devise{padding-inline-start:1px}

/* téléphone : même seuil que l'entête mobile de la V2 (760 px) ; 24 px comme la home du 11/09 */
@media (max-width:760px){
  html[data-logo-barres="on"] body>header .brand{font-size:24px;gap:8px;letter-spacing:-1.2px}
  html[data-logo-barres="on"] body>header .brand .bars{height:24px;gap:2px}
  html[data-logo-barres="on"] body>header .brand .bars i{width:4px;height:13px}
  html[data-logo-barres="on"] body>header .brand .bars i:nth-child(2){height:22px}
  html[data-logo-barres="on"] body>header .brand .bars i:nth-child(3){height:18px}
  html[data-logo-barres="on"] body>header .brand .bars i:nth-child(4){height:10px}
  html[data-logo-barres="on"] body>header[data-mobile01] .brand{width:auto;height:44px;min-height:44px}
}

/* le geste du 11/09 (lot logo-anime) : une passe d'égaliseur de 700 ms, 70 ms de décalage par
   barre, au chargement et au survol ; jamais en boucle. !important parce que mega-menu.css a
   éteint les barres en !important ; notre sélecteur est plus spécifique, il gagne. */
html[data-logo-barres="on"] body>header .brand.lb-play .bars i{animation:lb-eq .7s ease-in-out calc(var(--i,0)*70ms) 1 both !important}
@keyframes lb-eq{0%,100%{transform:scaleY(1)}40%{transform:scaleY(.65)}70%{transform:scaleY(1.08)}}
@media (prefers-reduced-motion:reduce){
  html[data-logo-barres="on"] body>header .brand.lb-play .bars i{animation:none !important}
}