/* LA COQUILLE DES OUTILS AUTONOMES (04/11/2026, demande de Romain : « relooke ces outils à la charte et aspect de
   l'intranet et des applications »).

   Pour les pages d'outils servies HORS de la coquille de l'intranet : le calculateur de poids vidéo
   (calculateur.gaboriaud.net), le posemètre public (posemetre.gaboriaud.net), et, en copie, Profondeur de champ
   (dof.gaboriaud.net, infra/stacks/caddy/site/dof/).

   Chargée APRÈS app.css, charte_pont.css et tuiles.css, avec <body class="tu oa"> et <main class="oa-page page"> :
   les jetons (--tu-*), les champs, les boutons et les pastilles sont donc exactement ceux de l'intranet. Ce fichier
   n'ajoute que ce qu'une appli de la famille a en propre (docs/charte-des-outils.md) :
   - l'en-tête : la tuile rG, le nom en Inter, « par Romain Gaboriaud » dessous ;
   - les réglages de l'appareil : thème Automatique / Clair / Sombre et taille de l'affichage
     (85 / 100 / 115 / 130 %), tenus par static/outils_autonomes.js ;
   - le pied de page, signé rG. */

body.tu.oa{margin:0;background:var(--tu-fond);color:var(--tu-encre);
  font:15px/1.5 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;
  /* La taille de l'affichage, réglée sur cet appareil (outils_autonomes.js). Sous zoom, une unité d'écran
     grandit avec lui : --echelle la compense, comme dans l'intranet (core/tests_echelle.py, 05/11/2026). */
  zoom:var(--oa-echelle,1);--echelle:var(--oa-echelle,1)}
.oa{--oa-gouttiere:clamp(16px,calc(2.2vw / var(--echelle, 1)),48px)}
.oa-page{max-width:1240px;margin:0 auto;
  padding:calc(env(safe-area-inset-top,0px) + 22px) max(var(--oa-gouttiere),env(safe-area-inset-right,0px)) 56px
          max(var(--oa-gouttiere),env(safe-area-inset-left,0px))}
.oa-page.etroite{max-width:820px}

/* L'EN-TÊTE · comme celui des applis de Replicapp : la tuile, le nom, la signature. */
.oa-tete{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.oa-marque{display:flex;align-items:center;gap:13px;min-width:0;color:inherit;text-decoration:none}
.oa-tuile{width:46px;height:46px;display:block;flex:none;border-radius:12px}
.oa-tuile.clair{display:none}
html[data-theme="clair"] .oa-tuile.clair{display:block}
html[data-theme="clair"] .oa-tuile.sombre{display:none}
.oa-nom{display:flex;flex-direction:column;min-width:0}
.oa-nom b{font-size:24px;font-weight:750;letter-spacing:-.03em;line-height:1.1;overflow-wrap:anywhere}
.oa-nom small{font-size:12.5px;color:var(--tu-doux);margin-top:3px}
.oa-actions{margin-left:auto;position:relative;flex:none}
.oa-rond{width:40px;height:40px;border-radius:50%;border:0;background:var(--tu-carte);box-shadow:var(--tu-ombre);
  color:var(--tu-encre);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.oa-rond:hover{background:var(--tu-fond);box-shadow:0 0 0 1px var(--tu-trait)}
.oa-rond svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* LES RÉGLAGES · un panneau flottant de la charte. */
.oa-reglages{position:absolute;right:0;top:calc(100% + 10px);z-index:60;width:min(310px,calc(100vw / var(--echelle, 1) - 32px));
  background:var(--tu-carte);box-shadow:var(--tu-ombre-haute);border-radius:16px;padding:18px 20px 16px}
.oa-reglages p{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tu-doux)}
.oa-capsule{display:flex;gap:2px;padding:4px;border-radius:999px;background:var(--tu-fond);margin-bottom:16px}
.oa-capsule button{flex:1;min-width:0;border:0;background:transparent;border-radius:999px;padding:7px 6px;
  font:inherit;font-size:13px;color:var(--tu-encre);cursor:pointer;white-space:nowrap}
.oa-capsule button.on{background:var(--tu-carte);box-shadow:var(--tu-ombre);font-weight:700}
.oa-reglages small{display:block;margin-top:-8px;font-size:11.5px;color:var(--tu-doux)}

/* LE PIED · la signature de Romain, telle quelle. */
.oa-pied{margin-top:40px;padding-top:16px;border-top:1px solid var(--tu-trait);display:flex;align-items:center;
  gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--tu-doux)}
.oa-pied a{color:var(--tu-y-texte);text-decoration:none}
.oa-pied a:hover{text-decoration:underline}
.oa-pied .oa-tuile{width:22px;height:22px;border-radius:6px}

@media (max-width:560px){
  .oa-tuile{width:40px;height:40px}
  .oa-nom b{font-size:21px}
}