/* 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. */
/* 05/11/2026 (Laurent : « D, tout ensemble », docs/maquettes/loupe-volume/) : en volume. L'image est enveloppée par
   js/loupe.js : `.loupe3d` (ombre) > `.loupe3d__corps` (ce qui tourne) > image d'origine, 3 tranches plus sombres
   derrière elle (épaisseur, visibles seulement pendant le tour) et le reflet du verre devant. */
.loupe3d { position: relative; display: inline-block; flex: none; line-height: 0; }
.loupe3d__corps { position: relative; display: inline-block; transform-style: preserve-3d; transform-origin: 40.6% 40.6%;
  z-index: 1; }
.loupe3d__corps > .loupe3d__tranche, .loupe3d__corps > .loupe3d__reflet { position: absolute; inset: 0; width: 100%;
  height: 100%; pointer-events: none; }
.loupe3d__tranche { opacity: 0; }
.loupe3d__tranche--1 { transform: translateZ(-1.2px); filter: brightness(.5); }
.loupe3d__tranche--2 { transform: translateZ(-2.4px); filter: brightness(.4); }
.loupe3d__tranche--3 { transform: translateZ(-3.6px); filter: brightness(.3); }
.loupe3d__reflet { transform: translateZ(.4px); }
.loupe3d::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -10%; height: 14%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0)); opacity: 0; pointer-events: none; }
@keyframes loupe-tour {
  0% { transform: perspective(160px) translateY(0) scale(1) rotate3d(1, 1, 0, 0deg); }
  20% { transform: perspective(160px) translateY(-8%) scale(1.08) rotate3d(1, 1, 0, 40deg); }
  80% { transform: perspective(160px) translateY(-8%) scale(1.08) rotate3d(1, 1, 0, 320deg); }
  100% { transform: perspective(160px) translateY(0) scale(1) rotate3d(1, 1, 0, 360deg); }
}
@keyframes loupe-epaisseur { 0%, 100% { opacity: 0; } 12%, 88% { opacity: 1; } }
@keyframes loupe-reflet { 0%, 100% { transform: translateZ(.4px) translate(0, 0); opacity: 1; }
  50% { transform: translateZ(.4px) translate(14%, 14%); opacity: .25; } }
@keyframes loupe-ombre { 0%, 100% { opacity: 0; transform: scaleX(1); } 20%, 80% { opacity: 1; transform: scaleX(.8); }
  50% { opacity: .7; transform: scaleX(.55); } }
.marque:hover .loupe3d__corps, .marque:focus-visible .loupe3d__corps,
.dossier__marque:hover .loupe3d__corps, .dossier__marque:focus-visible .loupe3d__corps {
  animation: loupe-tour 1.3s cubic-bezier(.45, 0, .25, 1); }
.marque:hover .loupe3d__tranche, .marque:focus-visible .loupe3d__tranche,
.dossier__marque:hover .loupe3d__tranche, .dossier__marque:focus-visible .loupe3d__tranche {
  animation: loupe-epaisseur 1.3s cubic-bezier(.45, 0, .25, 1); }
.marque:hover .loupe3d__reflet, .marque:focus-visible .loupe3d__reflet,
.dossier__marque:hover .loupe3d__reflet, .dossier__marque:focus-visible .loupe3d__reflet {
  animation: loupe-reflet 1.3s cubic-bezier(.45, 0, .25, 1); }
.marque:hover .loupe3d::after, .marque:focus-visible .loupe3d::after,
.dossier__marque:hover .loupe3d::after, .dossier__marque:focus-visible .loupe3d::after {
  animation: loupe-ombre 1.3s cubic-bezier(.45, 0, .25, 1); }
@media (prefers-reduced-motion: reduce) {
  .marque:hover .loupe3d *, .marque:focus-visible .loupe3d *, .dossier__marque:hover .loupe3d *,
  .dossier__marque:focus-visible .loupe3d *, .marque:hover .loupe3d::after, .dossier__marque:hover .loupe3d::after {
    animation: none; }
}