/* Polices locales (SIL OFL), mise en page générale (§8.3, §8.4). */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/vendor/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("/vendor/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/vendor/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 400; font-display: swap; src: url("/vendor/fonts/fraunces-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 600; font-display: swap; src: url("/vendor/fonts/fraunces-latin-600-normal.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--police-texte);
  font-size: var(--t-14);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button, input { font: inherit; color: inherit; }
a { color: var(--slate); text-underline-offset: 2px; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--slate);
  outline-offset: 2px;
  border-radius: 4px;
}

.masque { display: none !important; }
.visuel-masque {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.tabulaire { font-variant-numeric: tabular-nums; }
.date-donnee { color: var(--muted); font-size: var(--t-12); }

#carte { position: fixed; inset: 0; }

@media (max-width: 760px) {
  :root { --panneau: 100vw; }
}

/* Au survol du logo ou du nom, la loupe fait un tour complet autour de l'axe de son manche, en relief (03/11/2026,
   Laurent : « tourner autour de l'axe du manche ») : le manche part du centre de la lentille (26, 26 sur 64) vers le
   bas à droite, d'où l'axe (1, 1, 0) passant par ce centre. En-tête des pages et signature du dossier sur la carte.
   Rien si l'utilisateur a demandé moins d'animations. */
@keyframes loupe-tour {
  from { transform: perspective(90px) rotate3d(1, 1, 0, 0deg); }
  to { transform: perspective(90px) rotate3d(1, 1, 0, 360deg); }
}
.marque__logo, .dossier__marque img { transform-origin: 40.6% 40.6%; }
.marque:hover .marque__logo, .marque:focus-visible .marque__logo,
.dossier__marque:hover img, .dossier__marque:focus-visible img { animation: loupe-tour 1.1s cubic-bezier(.45, 0, .25, 1); }
@media (prefers-reduced-motion: reduce) {
  .marque:hover .marque__logo, .marque:focus-visible .marque__logo,
  .dossier__marque:hover img, .dossier__marque:focus-visible img { animation: none; }
}