/* ==========================================================================
   Formation UFC — Ava Client
   Le monde visuel : une feuille de calendrier de courtier collée sur un frigo.
   Papier glacé, règles noires imprimées, feutre rouge, aimants navy.
   ========================================================================== */

:root {
  /* Couleurs mesurées sur la maquette approuvée */
  --navy: #12175a;          /* wordmark */
  --navy-deep: #111949;     /* fond de l'aimant-bouton */
  --ink: #0b0b0c;           /* texte imprimé noir */
  --marker: #d10d17;        /* feutre rouge */
  --paper: #e6e7e9;         /* papier calendrier (la texture prend le relais) */
  --fridge: #e2e3e6;        /* porte du frigo */

  /* Polices */
  --font-print: 'Sofia Sans Condensed', 'Arial Narrow', sans-serif;
  --font-print-xc: 'Sofia Sans Extra Condensed', 'Sofia Sans Condensed', 'Arial Narrow', sans-serif;
  --font-brand: 'Figtree', system-ui, sans-serif;
  --font-marker: 'Kalam', 'Segoe Print', cursive;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  /* La porte du frigo : gris clair, un peu plus lumineux dans les coins du haut,
     un peu plus sombre vers le bas, comme l'éclairage de la maquette */
  background-color: var(--fridge);
  background-image: linear-gradient(#dedfe1, #d8d9db);
  background-attachment: fixed;
  font-family: var(--font-print);
  -webkit-font-smoothing: antialiased;
}

/* Grain « peau d'orange » du frigo : la texture est posée par-dessus la couleur,
   presque invisible, pour que le fond reste calme comme sur la maquette */
body::before {
  content: "";
  position: absolute;               /* toute la hauteur du document, pas seulement l'écran */
  inset: 0;
  background-image: url("assets/plates/fridge-door.png");
  background-repeat: repeat;
  background-size: 256px 256px;     /* tuile sans raccord, générée pour ça */
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}

/* --------------------------------------------------------------------------
   Le cadre de la feuille
   Le cadre garde les proportions de la maquette (1024 x 1536).
   --px vaut « 1 pixel de la maquette » : tout ce qui est en calc(N * var(--px))
   suit exactement la maquette, peu importe la largeur de l'écran.
   -------------------------------------------------------------------------- */
.page {
  position: relative;
  width: 100%;
  max-width: 1200px;   /* sur grand écran, la feuille reste une feuille sur un frigo */
  margin: 0 auto;
  container-type: inline-size;
  --px: calc(100cqw / 1024);
  z-index: 1;
}
.sheet-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1024 / 1536;
}

/* Chaque élément est posé en pourcentage du cadre (mesures de la maquette) */
.sheet, .magnet, .marker-circle, .marker-note, .photo-card, .headline, .magnet-button, .week, .sheet-head {
  position: absolute;
}

/* --------------------------------------------------------------------------
   Aimants (images détourées, PNG transparent)
   -------------------------------------------------------------------------- */
.magnet {
  display: block;
  object-fit: contain;
  pointer-events: none;
  z-index: 3;
}
/* Le PNG de l'aimant contient une grande ombre douce autour du dôme :
   on l'affiche plus grand que la boîte mesurée pour que le dôme fasse
   la bonne taille (environ 82px sur la maquette), centré au même endroit. */
/* Les PNG des aimants sont recadrés sur le dôme, donc la boîte mesurée suffit */
.magnet-top {
  left: 44.14%; top: 1.82%; width: 11.72%; height: 7.29%;
  object-fit: cover;
}
.magnet-mid {
  left: 42.97%; top: 33.53%; width: 14.06%; height: 9.77%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   La feuille de papier
   -------------------------------------------------------------------------- */
.sheet {
  left: 4.69%; top: 6.18%; width: 90.82%; height: 88.54%;
  background-color: var(--paper);
  background-image: url("assets/plates/calendar-paper.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;       /* une seule nappe de reflet sur toute la feuille */
  box-shadow:
    0 calc(2 * var(--px)) calc(3 * var(--px)) rgba(20, 24, 40, 0.10),
    0 calc(10 * var(--px)) calc(26 * var(--px)) rgba(20, 24, 40, 0.16);
  z-index: 1;
}

/* Le haut de la feuille : wordmark à gauche, mois à droite.
   Les positions sont relatives à la feuille, donc converties depuis le cadre. */
.sheet-head {
  left: 0; right: 0; top: 0;
  height: calc(115 * var(--px));
}
.wordmark {
  position: absolute;
  left: calc(37 * var(--px));       /* 85px cadre - 48px feuille */
  top: calc(33 * var(--px));        /* 128px cadre - 95px feuille */
  height: calc(42 * var(--px));
  display: flex; align-items: center;
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: max(14px, calc(34 * var(--px)));
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.month {
  position: absolute;
  right: calc(36 * var(--px));      /* 978px feuille - 942px */
  top: calc(33 * var(--px));
  height: calc(42 * var(--px));
  display: flex; align-items: center;
  font-family: var(--font-print-xc);
  font-weight: 700;
  font-size: max(15px, calc(41 * var(--px)));
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   La semaine : 7 cases égales, règles noires de 1px
   -------------------------------------------------------------------------- */
.week {
  left: calc(32 * var(--px));       /* 80px cadre - 48px feuille */
  top: calc(100 * var(--px));       /* 195px cadre - 95px feuille */
  width: calc(866 * var(--px));
  height: calc(356 * var(--px));
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: calc(1.5 * var(--px)) solid var(--ink);
  border-bottom: calc(1.5 * var(--px)) solid var(--ink);
  z-index: 2;
}
.day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(10 * var(--px));
  border-left: calc(1.5 * var(--px)) solid var(--ink);
}
.day:first-child { border-left: 0; }


.day-letter {
  font-family: var(--font-print);
  font-weight: 700;
  font-size: max(16px, calc(38 * var(--px)));
  line-height: max(18px, calc(46 * var(--px)));
  height: max(18px, calc(46 * var(--px)));
  color: var(--ink);
}
.day-number {
  font-family: var(--font-print);
  font-weight: 700;
  font-size: max(24px, calc(68 * var(--px)));
  line-height: max(24px, calc(62 * var(--px)));
  height: max(24px, calc(62 * var(--px)));
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Le feutre rouge : le cercle (image) et les trois lignes écrites à la main
   -------------------------------------------------------------------------- */
.marker-circle {
  /* Boîte aux proportions du PNG (1024 x 1536) pour que le cercle tombe
     exactement sur la case du 24 : anneau d'environ 257 x 336 px */
  left: calc(327 * var(--px));
  top: calc(61 * var(--px));
  width: calc(280 * var(--px));
  height: calc(420 * var(--px));
  object-fit: fill;
  pointer-events: none;
  z-index: 3;
}
.marker-note {
  left: calc(365 * var(--px));      /* centré sur le cercle (centre x = 465 feuille) */
  top: calc(203 * var(--px));       /* les trois lignes dans la bande la plus large de l'ellipse */
  width: calc(200 * var(--px));
  height: calc(120 * var(--px));
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  font-family: var(--font-marker);
  font-weight: 700;
  font-size: max(13px, calc(30 * var(--px)));
  line-height: 1;
  color: var(--marker);
  white-space: nowrap;
  z-index: 4;
}
/* Sur téléphone, le cercle grossit un peu (comme un vrai feutre sur un petit
   calendrier) pour que les trois lignes au plancher de 13px restent dedans */
@media (max-width: 600px) {
  .marker-circle { transform: scale(1.25); transform-origin: 50% 50%; }
}
/* Chaque ligne penche un peu, comme une vraie main au feutre */
.marker-note span { display: block; }
.marker-note span:nth-child(1) { transform: rotate(-3deg); }
.marker-note span:nth-child(2) { transform: rotate(2deg); }
.marker-note span:nth-child(3) { transform: rotate(-2deg); }

/* --------------------------------------------------------------------------
   La carte-photo de Samy (placeholder vidéo)
   -------------------------------------------------------------------------- */
.photo-card {
  left: calc(157 * var(--px));      /* 205px cadre - 48px feuille */
  top: calc(505 * var(--px));       /* 600px cadre - 95px feuille */
  width: calc(612 * var(--px));
  height: calc(430 * var(--px));
  margin: 0;
  background: #f7f7f8;
  box-shadow:
    0 calc(1 * var(--px)) calc(2 * var(--px)) rgba(20, 24, 40, 0.10),
    0 calc(6 * var(--px)) calc(16 * var(--px)) rgba(20, 24, 40, 0.14);
  z-index: 2;
}
.video {
  position: absolute;
  left: calc(7 * var(--px));
  top: calc(18 * var(--px));
  width: calc(598 * var(--px));
  height: calc(338 * var(--px));
  display: block;
  overflow: hidden;
  background: #aeb4bd;
}
.video-player {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #aeb4bd;
}
/* Le bouton lecture : un anneau blanc en CSS + une petite icône triangle.
   C'est un vrai <button>, donc on retire d'abord le style du navigateur. */
.play {
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  position: absolute;
  left: 50%;
  top: calc(226 * var(--px));       /* 844px cadre - 618px vidéo */
  width: calc(68 * var(--px));
  height: calc(68 * var(--px));
  margin-left: calc(-34 * var(--px));
  display: flex; align-items: center; justify-content: center;
  border: calc(4 * var(--px)) solid #ffffff;
  border-radius: 50%;
  /* Voile sombre translucide dans l'anneau, comme sur la maquette */
  background: rgba(10, 14, 30, 0.30);
  filter: drop-shadow(0 calc(2 * var(--px)) calc(6 * var(--px)) rgba(0, 0, 0, 0.35));
}
.play svg {
  width: calc(34 * var(--px));
  height: calc(34 * var(--px));
  margin-left: calc(6 * var(--px));
  display: block;
}
/* Au survol l'anneau s'éclaircit un peu ; une fois la vidéo lancée, il disparaît */
.play:hover { background: rgba(10, 14, 30, 0.45); }
.play:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
.video.is-playing .play { display: none; }
.photo-caption {
  position: absolute;
  left: calc(17 * var(--px));
  top: calc(362 * var(--px));       /* 962px cadre - 600px carte */
  height: calc(48 * var(--px));
  display: flex; align-items: center;
  font-family: 'Sofia Sans Semi Condensed', var(--font-print);
  font-weight: 700;
  font-size: max(13px, calc(31 * var(--px)));  /* hauteur de capitale mesurée : 22px */
  line-height: 1;
  letter-spacing: 0.005em;
  color: #12175a;
  white-space: nowrap;   /* la légende reste sur une ligne, même sur téléphone */
}

/* --------------------------------------------------------------------------
   La phrase imprimée
   -------------------------------------------------------------------------- */
.headline {
  left: 0; right: 0;
  top: calc(1003 * var(--px));      /* 1098px cadre - 95px feuille */
  height: calc(58 * var(--px));
  margin: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-print);
  font-weight: 700;
  font-size: max(20px, calc(46 * var(--px)));
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--ink);
  text-align: center;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   L'aimant-bouton : le seul bouton de la page
   -------------------------------------------------------------------------- */
.magnet-button {
  left: calc(162 * var(--px));      /* 210px cadre - 48px feuille */
  top: calc(1103 * var(--px));      /* 1198px cadre - 95px feuille */
  width: calc(612 * var(--px));
  height: calc(186 * var(--px));
  display: block;
  border-radius: calc(26 * var(--px));
  /* Un vrai aimant émaillé : navy, reflet en balayage en haut à gauche, rebord clair */
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.10) 18%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(165deg, #1e2d52 0%, #14204a 40%, #101946 100%);
  border: calc(2 * var(--px)) solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 calc(2 * var(--px)) calc(2 * var(--px)) rgba(255, 255, 255, 0.18),
    inset 0 calc(-4 * var(--px)) calc(4 * var(--px)) rgba(0, 0, 0, 0.30),
    0 calc(2 * var(--px)) calc(2 * var(--px)) rgba(10, 14, 40, 0.20),
    0 calc(10 * var(--px)) calc(20 * var(--px)) rgba(10, 14, 40, 0.30);
  color: #f8f8f8;
  text-decoration: none;
  z-index: 5;
}
.cta-label, .cta-subline {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  white-space: nowrap;
}
.cta-label {
  top: calc(46 * var(--px));        /* 1244px cadre - 1198px aimant */
  height: calc(68 * var(--px));
  line-height: calc(68 * var(--px));
  font-family: var(--font-print);
  font-weight: 700;
  font-size: max(20px, calc(54 * var(--px)));   /* 58 -> 54 : « 10$+tx » doit tenir sur une ligne */
  letter-spacing: 0.005em;
}
.cta-subline {
  top: calc(120 * var(--px));       /* 1318px cadre - 1198px aimant */
  height: calc(32 * var(--px));
  line-height: calc(32 * var(--px));
  font-family: var(--font-print);
  font-weight: 700;
  font-size: max(12px, calc(30 * var(--px)));
  letter-spacing: 0;
  color: #f4f6f6;
}

/* --------------------------------------------------------------------------
   Les feuilles suivantes : mêmes papier, règles et typographie que la première.
   Elles sont en flux normal (pas en absolu), donc leur hauteur suit le texte.
   Les tailles de texte ont un plancher en px pour rester lisibles sur téléphone.
   -------------------------------------------------------------------------- */
.note-sheet {
  position: relative;
  /* Sur grand écran, les feuilles de notes ne grossissent pas au-delà de la maquette :
     le texte de lecture reste à une taille de lecture */
  --px: min(calc(100cqw / 1024), 1px);
  width: 90.82%;
  max-width: 1024px;
  margin: calc(70 * var(--px)) auto 0;
  padding: 40px 24px 28px;  /* valeur de repli, remplacée par la ligne suivante */
  padding: calc(96 * var(--px)) calc(64 * var(--px)) calc(72 * var(--px));
  background-color: var(--paper);
  background-image: url("assets/plates/calendar-paper.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 30%;
  box-shadow:
    0 calc(2 * var(--px)) calc(3 * var(--px)) rgba(20, 24, 40, 0.10),
    0 calc(10 * var(--px)) calc(26 * var(--px)) rgba(20, 24, 40, 0.16);
}
.note-sheet--benefits { margin-top: calc(-10 * var(--px)); } /* la 1re feuille finit à 94 % du cadre */
.note-sheet--close { margin-bottom: calc(90 * var(--px)); background-position: 50% 80%; }

/* L'aimant qui retient chaque feuille, centré sur le bord du haut */
.magnet-pin {
  left: 50%;
  top: calc(-44 * var(--px));
  width: calc(112 * var(--px));
  height: calc(117 * var(--px));
  margin-left: calc(-56 * var(--px));
  object-fit: cover;
}

.note-title {
  margin: 0 0 calc(28 * var(--px));
  font-family: var(--font-print);
  font-weight: 700;
  font-size: max(26px, calc(52 * var(--px)));
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--ink);
}

/* La liste cochée : des lignes imprimées, séparées par des règles fines,
   avec un crochet au feutre rouge devant chaque ligne */
.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: calc(1.5 * var(--px)) solid var(--ink);
}
.checklist li {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--px));
  padding: calc(22 * var(--px)) 0;
  border-bottom: calc(1.5 * var(--px)) solid var(--ink);
  font-family: 'Sofia Sans Semi Condensed', var(--font-print);
  font-weight: 700;
  font-size: max(17px, calc(32 * var(--px)));
  line-height: 1.35;
  color: var(--ink);
}
.check {
  flex: 0 0 auto;
  width: max(22px, calc(40 * var(--px)));
  height: max(22px, calc(40 * var(--px)));
  color: var(--marker);
  transform: rotate(-6deg);
}

/* Les trois faits : format, prix, prochaine cohorte */
.note-facts {
  display: flex;
  flex-wrap: wrap;
  gap: calc(18 * var(--px)) calc(48 * var(--px));
  margin: calc(34 * var(--px)) 0 0;
  padding: 0;
}
.note-fact {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--px));
  font-family: var(--font-print);
  font-weight: 700;
  font-size: max(17px, calc(32 * var(--px)));
  line-height: 1.3;
  color: var(--ink);
}
.note-fact-label {
  font-family: var(--font-marker);
  font-weight: 700;
  font-size: max(16px, calc(28 * var(--px)));
  line-height: 1;
  color: var(--marker);
}

.note-body {
  margin: 0;
  max-width: 62ch;
  font-family: 'Sofia Sans Semi Condensed', var(--font-print);
  font-weight: 500;
  font-size: max(17px, calc(32 * var(--px)));
  line-height: 1.35;
  color: var(--ink);
}
/* Le paragraphe d'accroche imprimé entre le titre et la liste cochée */
.note-body--lead {
  margin-bottom: calc(30 * var(--px));
}
/* La phrase de Samy, écrite au feutre rouge sous le texte imprimé */
.note-body--quote {
  margin-top: calc(34 * var(--px));
  max-width: 30ch;
  font-family: var(--font-marker);
  font-weight: 700;
  font-size: max(20px, calc(38 * var(--px)));
  line-height: 1.3;
  color: var(--marker);
  transform: rotate(-1.5deg);
  transform-origin: 0 50%;
}
.note-close {
  margin: calc(56 * var(--px)) 0 calc(26 * var(--px));
  font-family: var(--font-print);
  font-weight: 700;
  font-size: max(26px, calc(52 * var(--px)));
  line-height: 1;
  color: var(--ink);
}

/* Le deuxième aimant-bouton : en flux normal, même dessin que celui du haut */
.magnet-button--close {
  position: relative;
  left: auto; top: auto;
  width: min(100%, calc(612 * var(--px)));
  height: calc(186 * var(--px));
  min-height: 92px;
}
.magnet-button--close .cta-label { font-size: max(20px, calc(54 * var(--px))); }
.magnet-button--close .cta-subline { font-size: max(12px, calc(30 * var(--px))); }

.note-footer {
  margin-top: calc(60 * var(--px));
  font-family: var(--font-print);
  font-weight: 700;
  font-size: max(12px, calc(22 * var(--px)));
  line-height: 1;
  color: #4b4d52;
}

/* --------------------------------------------------------------------------
   Mouvement. Grammaire : papier et encre. L'encre se dessine, l'aimant se presse.
   Pas de fondu, pas de glissement.
   -------------------------------------------------------------------------- */

/* 1. Le cercle au feutre se dessine une fois au chargement (masque conique animé) */
@property --draw {
  syntax: "<angle>";
  inherits: false;
  initial-value: 360deg;
}
.marker-circle {
  --draw: 360deg;
  -webkit-mask-image: conic-gradient(from 300deg, #000 var(--draw), transparent var(--draw));
  mask-image: conic-gradient(from 300deg, #000 var(--draw), transparent var(--draw));
}
.is-ready .marker-circle {
  animation: draw-circle 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes draw-circle {
  from { --draw: 0deg; }
  to   { --draw: 360deg; }
}

/* 2. Les trois lignes au feutre s'écrivent de gauche à droite, après le cercle */
.is-ready .marker-note span {
  animation: write-line 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.is-ready .marker-note span:nth-child(1) { animation-delay: 0.75s; }
.is-ready .marker-note span:nth-child(2) { animation-delay: 1.05s; }
.is-ready .marker-note span:nth-child(3) { animation-delay: 1.35s; }
@keyframes write-line {
  from { clip-path: inset(-10% 100% -10% 0); }
  to   { clip-path: inset(-10% 0 -10% 0); }
}

/* 3. Les crochets se tracent quand la liste arrive à l'écran */
.check path {
  stroke-dasharray: 60;
  stroke-dashoffset: 0;
}
.js .checklist:not(.is-inview) .check path { stroke-dashoffset: 60; }
.checklist.is-inview .check path {
  animation: draw-check 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.checklist.is-inview li:nth-child(2) .check path { animation-delay: 0.12s; }
.checklist.is-inview li:nth-child(3) .check path { animation-delay: 0.24s; }
.checklist.is-inview li:nth-child(4) .check path { animation-delay: 0.36s; }
.checklist.is-inview li:nth-child(5) .check path { animation-delay: 0.48s; }
@keyframes draw-check {
  from { stroke-dashoffset: 60; }
  to   { stroke-dashoffset: 0; }
}

/* 4. L'aimant se presse : au survol il se soulève un peu, au clic il s'enfonce */
.magnet-button {
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.magnet-button:hover {
  transform: translateY(calc(-2 * var(--px)));
  box-shadow:
    inset 0 calc(2 * var(--px)) calc(2 * var(--px)) rgba(255, 255, 255, 0.18),
    inset 0 calc(-4 * var(--px)) calc(4 * var(--px)) rgba(0, 0, 0, 0.30),
    0 calc(4 * var(--px)) calc(4 * var(--px)) rgba(10, 14, 40, 0.20),
    0 calc(16 * var(--px)) calc(28 * var(--px)) rgba(10, 14, 40, 0.32);
}
.magnet-button:active {
  transform: translateY(calc(1 * var(--px))) scale(0.995);
  box-shadow:
    inset 0 calc(2 * var(--px)) calc(2 * var(--px)) rgba(255, 255, 255, 0.10),
    inset 0 calc(-2 * var(--px)) calc(3 * var(--px)) rgba(0, 0, 0, 0.30),
    0 calc(1 * var(--px)) calc(1 * var(--px)) rgba(10, 14, 40, 0.20),
    0 calc(5 * var(--px)) calc(10 * var(--px)) rgba(10, 14, 40, 0.28);
}

/* 5. L'aimant collé au bas de l'écran quand aucun des deux boutons n'est visible.
      C'est le même aimant, plus petit, qui « se colle » sur la porte du frigo. */
.magnet-dock {
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) scale(0.98);
  width: min(92vw, 420px);
  height: auto;
  padding: 12px 20px 11px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  z-index: 20;
  visibility: hidden;
  transition: none;
}
.magnet-dock .cta-label,
.magnet-dock .cta-subline { position: static; height: auto; line-height: 1; }
.magnet-dock .cta-label { font-size: 21px; }
.magnet-dock .cta-subline { font-size: 12px; }
.magnet-dock.is-docked {
  visibility: visible;
  transform: translateX(-50%) scale(1);
  transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.magnet-dock:hover { transform: translateX(-50%) translateY(-2px); }
.magnet-dock:active { transform: translateX(-50%) translateY(1px) scale(0.995); }

/* Surfaces du navigateur, dans la palette : sélection, focus */
::selection { background: rgba(209, 13, 23, 0.26); color: var(--ink); }
:focus-visible { outline: 3px solid var(--marker); outline-offset: 4px; border-radius: 4px; }
.magnet-button:focus-visible { outline-offset: 6px; border-radius: calc(26 * var(--px)); }

/* Mouvement réduit : tout est immédiatement à l'état final */
@media (prefers-reduced-motion: reduce) {
  .is-ready .marker-circle,
  .is-ready .marker-note span,
  .checklist.is-inview .check path { animation: none; }
  .js .checklist:not(.is-inview) .check path { stroke-dashoffset: 0; }
  .magnet-button, .magnet-dock { transition: none; }
}

/* Mode « calques image seulement », utilisé pour vérifier les positions des visuels */
body.plates-only .wordmark,
body.plates-only .month,
body.plates-only .week,
body.plates-only .marker-note,
body.plates-only .play,
body.plates-only .photo-caption,
body.plates-only .headline,
body.plates-only .magnet-button { visibility: hidden; }