/* Retour vers trailandroad.app, commun à tous les outils (marmott, nutri x training…).
   À coller dans l'outil :
   <link rel="stylesheet" href="https://trailandroad.app/composants/retour.css?v=2026-10-15b">
   (Cloudflare le garde 4 h en cache : changer le ?v= dans CHAQUE outil à chaque modification de ce fichier.)
   <a class="retour-tr" href="https://trailandroad.app/" aria-label="Retour à Trail & Road"><i aria-hidden="true">←</i><img src="https://trailandroad.app/img/icon-head-44.png" alt="" width="22" height="22"><span>trail &amp; road</span></a>
   Sombre par défaut, clair si <html data-theme="light"> (même réglage que le site). */
.retour-tr{--rt-txt:rgba(244,241,234,.58);--rt-fort:#F4F1EA;--rt-fil:rgba(244,241,234,.18);
  position:relative;display:inline-flex;width:max-content;justify-self:start;align-self:start;flex:none;align-items:center;gap:7px;height:30px;padding:0 10px 0 6px;border:1px solid var(--rt-fil);
  font:500 10px/1 'JetBrains Mono',ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--rt-txt);
  text-decoration:none;background:transparent;transition:color .2s,border-color .2s;-webkit-tap-highlight-color:transparent}
html[data-theme="light"] .retour-tr{--rt-txt:rgba(25,27,20,.6);--rt-fort:#191B14;--rt-fil:rgba(25,27,20,.18)}
.retour-tr::after{content:"";position:absolute;inset:-7px -4px}            /* zone de toucher 44 px */
.retour-tr i{font-style:normal;width:0;overflow:hidden;opacity:0;transition:width .25s cubic-bezier(.2,.8,.2,1),opacity .2s;display:inline-block}
.retour-tr img{width:22px;height:22px;display:block;transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.retour-tr:hover,.retour-tr:focus-visible{color:var(--rt-fort);border-color:var(--rt-fort)}
.retour-tr:hover i,.retour-tr:focus-visible i{width:10px;opacity:1}
.retour-tr:hover img{transform:rotate(-10deg) scale(1.08)}
.retour-tr:focus-visible{outline:2px solid #8B9469;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.retour-tr i,.retour-tr img{transition:none}}

/* Variante carrée « tête seule », pour une barre d'outils (à côté d'un bouton thème de 36 px) :
   <a class="retour-tr tete" href="https://trailandroad.app/" aria-label="Retour à Trail & Road"><img src="https://trailandroad.app/img/icon-head-44.png" alt="" width="22" height="22"></a> */
.retour-tr.tete{width:var(--rt-taille,36px);height:var(--rt-taille,36px);padding:0;justify-content:center;gap:0;align-self:center}
.retour-tr.tete::after{inset:-4px}
.retour-tr.tete img{width:calc(var(--rt-taille,36px) * .64);height:calc(var(--rt-taille,36px) * .64)}
.retour-tr.tete i,.retour-tr.tete span{display:none}