/* Socle commun aux trois versions : remise à zéro, en-tête et sélecteur de version.
   Les couleurs et la typographie viennent de v1.css, v2.css et v3.css (préfixes .v1, .v2, .v3 sur <html>). */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; }
dl, dd { margin: 0; }
button { font: inherit; }

.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: #fff; color: #000; padding: 8px 12px; border-radius: 6px; }

/* En-tête */
.top { position: sticky; top: 0; z-index: 50; }
.top__inner { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; min-height: 64px; padding-block: 10px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; margin-right: auto; }
.brand__mark { display: grid; place-items: center; width: 30px; height: 30px; flex: none; }
.nav ul { display: flex; flex-wrap: wrap; gap: 2px 2px; }
.nav a { display: block; padding: 6px 10px; border-radius: 999px; text-decoration: none; white-space: nowrap; }

@media (max-width: 860px) {
  .nav { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; margin-inline: -6px; }
  .nav::-webkit-scrollbar { display: none; }
  .nav ul { flex-wrap: nowrap; }
}

/* Sélecteur de version : trois pastilles et un curseur qui glisse. */
.switch {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 3px; border-radius: 999px; font-size: .8rem; line-height: 1;
}
.switch label {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; user-select: none;
  transition: color .3s ease;
}
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch label:has(input:focus-visible) { outline: 2px solid currentColor; outline-offset: 2px; }
.switch__n {
  display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  font-size: .68rem; font-weight: 700;
}
.switch__thumb {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px) / 3); border-radius: 999px;
  transition: transform .45s cubic-bezier(.3, 1.25, .45, 1), background-color .3s ease;
}
.switch:has(input[value="2"]:checked) .switch__thumb { transform: translateX(100%); }
.switch:has(input[value="3"]:checked) .switch__thumb { transform: translateX(200%); }
@media (max-width: 420px) { .switch label { padding: 8px 9px; } }
@media (prefers-reduced-motion: reduce) { .switch__thumb, .switch label { transition: none; } }

/* Fondu entre deux versions (View Transitions). */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

/* Agenda : dates passées repliées, communes aux trois versions. */
.past summary { cursor: pointer; font-weight: 500; }

/* Photo de personne : l'image couvre le cadre ; sans image, les initiales s'affichent. */
.ph { position: relative; display: inline-grid; place-items: center; overflow: hidden; flex: none; vertical-align: middle; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph b { display: none; font-weight: 700; line-height: 1; }
.ph.is-empty b { display: block; }