/* ===========================================================================
   Material 3 Expressive — système de design maison (CSS pur, zéro dépendance)
   Les couleurs viennent de m3-theme.css (généré par tools/gen_theme.py).
   Ce fichier apporte : typo, formes, mouvement, élévation, state layers,
   et les composants (boutons, cartes, chips, barres, dialogues, nav…).
   =========================================================================== */

/* ---------- police variable Material, auto-hébergée ---------- */
@font-face {
  font-family: "Roboto Flex";
  src: url("/static/fonts/roboto-flex.woff2") format("woff2-variations");
  font-weight: 100 1000;
  font-stretch: 75% 151%;
  font-style: oblique 0deg 10deg;
  font-display: swap;
}

:root {
  /* ---------- échelle de formes : 4 familles au choix (bouton « Formes ») ---------- */
  --md-shape-xs: 8px;
  --md-shape-s: 12px;
  --md-shape-m: 16px;
  --md-shape-l: 24px;
  --md-shape-xl: 32px;
  --md-shape-button: 999px;      /* pilule = forme Material par défaut des boutons */
  --md-shape-card: var(--md-shape-l);
  --md-shape-field: 999px;

  /* ---------- mouvement : ressorts Material Expressive ---------- */
  --md-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-ease-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-ease-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
  /* vrai ressort : dépassement léger puis stabilisation */
  --md-spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%,
                      1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%,
                      1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%,
                      0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1 100%);
  --md-dur-short: 200ms;
  --md-dur-med: 350ms;
  --md-dur-long: 550ms;

  /* ---------- élévation ---------- */
  --md-elev-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --md-elev-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --md-elev-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.30);
  --md-elev-4: 0 6px 10px 4px rgba(0,0,0,.15), 0 2px 3px rgba(0,0,0,.30);
}

/* familles de formes — appliquées sur <html data-shape="..."> */
[data-shape="pill"]   { --md-shape-button: 999px; --md-shape-card: 28px; --md-shape-field: 999px; }
[data-shape="rounded"]{ --md-shape-button: 16px;  --md-shape-card: 20px; --md-shape-field: 20px; }
[data-shape="soft"]   { --md-shape-button: 12px;  --md-shape-card: 16px; --md-shape-field: 14px; }
[data-shape="sharp"]  { --md-shape-button: 6px;   --md-shape-card: 8px;  --md-shape-field: 6px;
                        --md-shape-xs: 3px; --md-shape-s: 5px; --md-shape-m: 7px;
                        --md-shape-l: 9px; --md-shape-xl: 12px; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-tap-highlight-color: transparent;
  background: var(--md-surface);           /* peint aussi la zone des barres système */
  transition: background var(--md-dur-med) var(--md-ease-emphasized);
}
body {
  font-family: "Roboto Flex", "Roboto", system-ui, -apple-system, sans-serif;
  font-optical-sizing: auto;
  background: var(--md-surface);
  color: var(--md-on-surface);
  min-height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background var(--md-dur-med) var(--md-ease-emphasized),
              color var(--md-dur-med) var(--md-ease-emphasized);
}
::selection { background: var(--md-primary); color: var(--md-on-primary); }

/* ---------- typographie : échelle Material + titres « expressifs » ---------- */
.md-display, .md-headline, .md-title, .md-label, .md-body { font-family: inherit; }

/* le style signature : énorme, très gras, penché, en pastel */
.md-display {
  font-size: clamp(2.6rem, 9vw, 4.6rem);
  line-height: .96;
  font-weight: 900;
  font-stretch: 118%;
  font-variation-settings: "slnt" -10, "wdth" 118, "GRAD" 80;
  letter-spacing: -.035em;
  color: var(--md-primary-fixed);
  text-wrap: balance;
}
.md-display em {
  font-style: normal;
  color: var(--md-tertiary-fixed);
  font-variation-settings: "slnt" -10, "wdth" 130, "GRAD" 120;
}
.md-headline {
  font-size: clamp(1.6rem, 4.2vw, 2.1rem);
  line-height: 1.12;
  font-weight: 800;
  font-variation-settings: "slnt" -7, "wdth" 112;
  letter-spacing: -.02em;
  color: var(--md-secondary-fixed);
}
.md-title {
  font-size: 1.06rem; line-height: 1.3; font-weight: 700;
  font-variation-settings: "wdth" 105; letter-spacing: -.005em;
}
.md-body { font-size: .95rem; line-height: 1.5; font-weight: 400; color: var(--md-on-surface-variant); }
.md-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--md-on-surface-variant);
}

/* ---------- icônes (sprite SVG local) ---------- */
.md-icon { width: 24px; height: 24px; flex: none; fill: currentColor; display: block; }
.md-icon.sm { width: 20px; height: 20px; }
.md-icon.lg { width: 32px; height: 32px; }

/* ---------- state layer : le voile Material au survol / focus / appui ---------- */
.md-state { position: relative; overflow: hidden; isolation: isolate; }
.md-state::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: currentColor; opacity: 0; pointer-events: none;
  transition: opacity var(--md-dur-short) var(--md-ease-emphasized);
}
.md-state:hover::before { opacity: .06; }
.md-state:focus-visible::before { opacity: .10; }
.md-state:active::before { opacity: .10; }
.md-state > * { position: relative; z-index: 1; }

/* Ondulation au clic. Discrète volontairement : le cercle part du point touché et
   atteint tout juste le coin le plus éloigné (rayon calculé dans m3.js), à 10 %
   d'opacité — au-delà, il remplit l'élément d'un aplat et on ne voit plus une
   ondulation mais un bloc de couleur. */
.md-ripple {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  background: currentColor; opacity: .10; transform: scale(0);
  animation: md-ripple-in 480ms var(--md-ease-emphasized) forwards;
}
@keyframes md-ripple-in {
  0%   { transform: scale(0);   opacity: .10; }
  50%  {                        opacity: .10; }
  100% { transform: scale(1);   opacity: 0; }
}

/* ---------- boutons ---------- */
.md-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 24px; border: none; cursor: pointer;
  border-radius: var(--md-shape-button);
  font: inherit; font-size: .9rem; font-weight: 700; letter-spacing: .01em;
  background: var(--md-primary); color: var(--md-on-primary);
  transition: border-radius var(--md-dur-med) var(--md-ease-emphasized),
              box-shadow var(--md-dur-short) var(--md-ease-emphasized),
              background var(--md-dur-short) var(--md-ease-emphasized),
              color var(--md-dur-short) var(--md-ease-emphasized),
              opacity var(--md-dur-short) linear;
  -webkit-user-select: none; user-select: none;
}
.md-btn:hover { box-shadow: var(--md-elev-1); }
.md-btn:disabled { opacity: .38; cursor: default; box-shadow: none; }
.md-btn.tonal   { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.md-btn.tertiary{ background: var(--md-tertiary-container);  color: var(--md-on-tertiary-container); }
.md-btn.outlined{ background: transparent; color: var(--md-primary);
                  box-shadow: inset 0 0 0 1px var(--md-outline); }
.md-btn.outlined:hover { box-shadow: inset 0 0 0 1px var(--md-outline); }
.md-btn.text    { background: transparent; color: var(--md-primary); padding: 0 14px; }
.md-btn.text:hover { box-shadow: none; }
.md-btn.danger  { background: var(--md-error-container); color: var(--md-on-error-container); }
.md-btn.sm { min-height: 36px; padding: 0 16px; font-size: .82rem; }
.md-btn.wide { width: 100%; }

/* bouton icône rond */
.md-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none; border: none; cursor: pointer;
  border-radius: var(--md-shape-button); background: transparent; color: var(--md-on-surface-variant);
  transition: background var(--md-dur-short) var(--md-ease-emphasized),
              color var(--md-dur-short) var(--md-ease-emphasized),
              border-radius var(--md-dur-med) var(--md-ease-emphasized);
}
.md-icon-btn.filled { background: var(--md-primary-container); color: var(--md-on-primary-container); }

/* FAB */
.md-fab {
  position: fixed; right: max(18px, env(safe-area-inset-right)); z-index: 60;
  bottom: calc(18px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 60px; padding: 0 22px; border: none; cursor: pointer;
  border-radius: var(--md-shape-xl);
  background: var(--md-primary-container); color: var(--md-on-primary-container);
  font: inherit; font-size: .95rem; font-weight: 800;
  box-shadow: var(--md-elev-3);
  transition: transform var(--md-dur-med) var(--md-spring),
              box-shadow var(--md-dur-short) var(--md-ease-emphasized),
              border-radius var(--md-dur-med) var(--md-ease-emphasized);
}
.md-fab:hover { box-shadow: var(--md-elev-4); }
.md-fab.hide { transform: translateY(140%) scale(.7); }

/* ---------- cartes ---------- */
.md-card {
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  border-radius: var(--md-shape-card);
  overflow: hidden;
  transition: transform var(--md-dur-med) var(--md-spring),
              box-shadow var(--md-dur-med) var(--md-ease-emphasized),
              background var(--md-dur-med) var(--md-ease-emphasized),
              border-radius var(--md-dur-med) var(--md-ease-emphasized);
}
.md-card.raised { box-shadow: var(--md-elev-1); }
.md-card.interactive:hover { transform: translateY(-4px); box-shadow: var(--md-elev-3); }
.md-card.low { background: var(--md-surface-container-low); }
.md-card.high { background: var(--md-surface-container-high); }

/* ---------- chips ---------- */
.md-chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 0 14px; border: none; cursor: pointer;
  border-radius: var(--md-shape-s);
  background: transparent; color: var(--md-on-surface-variant);
  box-shadow: inset 0 0 0 1px var(--md-outline-variant);
  font: inherit; font-size: .8rem; font-weight: 700;
  transition: background var(--md-dur-short) var(--md-ease-emphasized),
              color var(--md-dur-short) var(--md-ease-emphasized),
              box-shadow var(--md-dur-short) var(--md-ease-emphasized),
              border-radius var(--md-dur-med) var(--md-ease-emphasized);
}
.md-chip[aria-pressed="true"], .md-chip.on {
  background: var(--md-secondary-container); color: var(--md-on-secondary-container);
  box-shadow: none;
}

/* ---------- champ de recherche ---------- */
.md-search {
  display: flex; align-items: center; gap: 12px;
  background: var(--md-surface-container-high);
  border-radius: var(--md-shape-field);
  padding: 0 8px 0 20px; min-height: 58px;
  transition: background var(--md-dur-short) var(--md-ease-emphasized),
              box-shadow var(--md-dur-short) var(--md-ease-emphasized),
              border-radius var(--md-dur-med) var(--md-ease-emphasized);
}
.md-search:focus-within { box-shadow: 0 0 0 2px var(--md-primary); }
.md-search input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  font: inherit; font-size: 1.05rem; font-weight: 500; color: var(--md-on-surface);
}
.md-search input::placeholder { color: var(--md-on-surface-variant); opacity: .85; }

/* ---------- barre de progression Material (déterminée + indéterminée) ---------- */
.md-progress {
  height: 4px; border-radius: 999px; background: var(--md-secondary-container);
  overflow: hidden; position: relative;
}
.md-progress > i {
  display: block; height: 100%; border-radius: 999px; background: var(--md-primary);
  transition: width var(--md-dur-long) var(--md-ease-emphasized);
}
.md-progress.indet > i { width: 40%; animation: md-indet 1.6s var(--md-ease-emphasized) infinite; }
@keyframes md-indet {
  0%   { transform: translateX(-110%) scaleX(.6); }
  55%  { transform: translateX(60%)  scaleX(1.1); }
  100% { transform: translateX(260%) scaleX(.5); }
}

/* ---------- barre d'application ---------- */
.md-appbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 6px;
  padding: 10px max(16px, env(safe-area-inset-left)) 10px max(16px, env(safe-area-inset-right));
  padding-top: calc(10px + env(safe-area-inset-top));
  /* Pas de flou d'arrière-plan : barre collante au-dessus d'un contenu qui
     défile, il serait recalculé à chaque image (même raison que le dock). */
  background: color-mix(in srgb, var(--md-surface) 95%, transparent);
  transition: background var(--md-dur-med) var(--md-ease-emphasized),
              box-shadow var(--md-dur-med) var(--md-ease-emphasized);
}
.md-appbar.scrolled {
  background: color-mix(in srgb, var(--md-surface-container) 92%, transparent);
  box-shadow: var(--md-elev-1);
}
.md-appbar .brand {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--md-on-surface); font-weight: 900; font-size: 1.05rem;
  font-variation-settings: "slnt" -8, "wdth" 115;
}
/* pastille du logo : forme stable, pas d'animation en boucle (ça fatigue à l'usage) */
.md-appbar .brand .dot {
  width: 32px; height: 32px; flex: none; border-radius: var(--md-shape-s);
  background: var(--md-primary); color: var(--md-on-primary);
  display: grid; place-items: center;
}
.md-appbar .spacer { margin-left: auto; }

/* ---------- barre de navigation basse (mobile) ---------- */
.md-navbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: none; justify-content: space-around; align-items: center; gap: 4px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--md-surface-container) 97%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
/* la bande de la barre de gestes reprend la couleur de l'appli au lieu du noir système */
.md-navbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
  height: env(safe-area-inset-bottom);
  background: var(--md-surface-container);
}
.md-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 0 4px; border: none; background: transparent; cursor: pointer;
  color: var(--md-on-surface-variant); text-decoration: none;
  font: inherit; font-size: .68rem; font-weight: 700;
  border-radius: var(--md-shape-m);
}
.md-nav-item .pill {
  display: grid; place-items: center; width: 58px; height: 32px; border-radius: 999px;
  transition: background var(--md-dur-med) var(--md-spring);
}
.md-nav-item[aria-current="page"] { color: var(--md-on-surface); }
.md-nav-item[aria-current="page"] .pill { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }

/* ---------- feuille modale (bottom sheet) ---------- */
.md-scrim {
  position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none;
  transition: opacity var(--md-dur-med) var(--md-ease-emphasized);
  backdrop-filter: blur(2px);
}
.md-scrim.open { opacity: 1; pointer-events: auto; }
.md-sheet {
  position: fixed; z-index: 91; left: 50%; bottom: 0; width: min(560px, 100%);
  transform: translate(-50%, 110%);
  background: var(--md-surface-container-high); color: var(--md-on-surface);
  border-radius: var(--md-shape-xl) var(--md-shape-xl) 0 0;
  padding: 12px 22px calc(26px + env(safe-area-inset-bottom));
  box-shadow: var(--md-elev-3);
  /* Sortie : on accélère en s'en allant. Pas de ressort ici — sur une feuille
     qui parcourt toute la hauteur, le dépassement du ressort devient un rebond
     très voyant. On garde le ressort pour les micro-interactions (appui, survol). */
  transition: transform var(--md-dur-short) var(--md-ease-accel);
  max-height: 86dvh; overflow-y: auto;
}
/* Entrée : décélération franche, elle se pose sans repartir en arrière. */
.md-sheet.open {
  transform: translate(-50%, 0);
  transition: transform var(--md-dur-med) var(--md-ease-decel);
}
.md-sheet .grip {
  width: 34px; height: 4px; border-radius: 999px; background: var(--md-outline-variant);
  margin: 0 auto 18px;
}

/* ---------- snackbar ---------- */
.md-snack {
  position: fixed; z-index: 95; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom));
  transform: translate(-50%, 160%);
  display: flex; align-items: center; gap: 12px;
  max-width: min(92vw, 520px); padding: 15px 22px;
  background: var(--md-inverse-surface); color: var(--md-inverse-on-surface);
  border-radius: var(--md-shape-s); box-shadow: var(--md-elev-3);
  font-size: .92rem; font-weight: 600;
  transition: transform var(--md-dur-short) var(--md-ease-accel);
}
.md-snack.show {
  transform: translate(-50%, 0);
  transition: transform var(--md-dur-med) var(--md-ease-decel);
}
.md-snack.err { background: var(--md-error-container); color: var(--md-on-error-container); }

/* ---------- entrée en scène : cascade au chargement ---------- */
@keyframes md-enter {
  from { opacity: 0; transform: translateY(22px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.md-enter { animation: md-enter var(--md-dur-long) var(--md-ease-decel) both; }

/* ---------- utilitaires de mise en page ---------- */
/* pleine largeur : le contenu occupe tout l'écran, marges minimales */
.md-wrap { width: 100%; margin: 0 auto; padding: 0 var(--gut, clamp(12px, 2vw, 26px)); }
.md-section { margin: 0 auto 26px; }

/* ---------- carrousel : une rangée qui défile horizontalement ----------
   Les cases gardent leur largeur (`flex: 0 0 …`) et débordent vers la droite :
   ajouter des éléments allonge la rangée, ça ne repasse jamais à la ligne. */
.carousel { position: relative; margin-bottom: 22px; }
.carousel-track {
  display: flex; gap: 12px; align-items: stretch;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  /* marge verticale : laisse respirer l'ombre des cases au survol, qui serait
     sinon rognée par le masquage de débordement de la piste */
  padding: 8px 0 14px;
  /* la rangée touche les bords de l'écran : effet pleine largeur */
  margin-inline: calc(-1 * var(--gut, clamp(12px, 2vw, 26px)));
  padding-inline: var(--gut, clamp(12px, 2vw, 26px));
  scroll-padding-inline-start: var(--gut, clamp(12px, 2vw, 26px));
  scrollbar-width: thin;
  scrollbar-color: var(--md-outline-variant) transparent;
  overscroll-behavior-x: contain;
}
.carousel-track > * { flex: 0 0 auto; scroll-snap-align: start; }
.carousel-track::-webkit-scrollbar { height: 8px; }
.carousel-track::-webkit-scrollbar-thumb {
  background: var(--md-outline-variant); border-radius: 999px;
}
.carousel-track::-webkit-scrollbar-track { background: transparent; }

/* flèches : sur écran fin ou sans survol (tactile) on ne les montre pas, le doigt suffit */
.carousel-nav {
  position: absolute; top: 50%; z-index: 5;
  width: 40px; height: 40px; display: none; place-items: center;
  border: none; cursor: pointer; border-radius: 999px;
  background: var(--md-surface-container-highest); color: var(--md-on-surface);
  box-shadow: var(--md-elev-2);
  opacity: 0; transform: translateY(-60%) scale(.85);
  transition: opacity var(--md-dur-short) linear,
              transform var(--md-dur-med) var(--md-spring),
              background var(--md-dur-short) var(--md-ease-emphasized);
}
.carousel-nav.prev { left: 2px; }
.carousel-nav.next { right: 2px; }
.carousel-nav[disabled] { opacity: 0 !important; pointer-events: none; }
@media (hover: hover) and (min-width: 900px) {
  .carousel.scrollable .carousel-nav { display: grid; }
  .carousel:hover .carousel-nav { opacity: .96; transform: translateY(-60%) scale(1); }
  .carousel-nav:hover { background: var(--md-primary); color: var(--md-on-primary); }
}
.md-row { display: flex; align-items: center; gap: 12px; }
.md-grid { display: grid; gap: 14px; }

/* ---------- pastilles de couleur de la feuille « Personnaliser » ---------- */
.m3-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 12px; }
.m3-swatch {
  aspect-ratio: 1; border: none; cursor: pointer; padding: 0;
  border-radius: var(--md-shape-m);
  background:
    radial-gradient(circle at 30% 28%, color-mix(in srgb, var(--sw) 65%, #fff) 0 38%, transparent 39%),
    var(--sw);
  display: grid; place-items: center; color: #fff;
  box-shadow: inset 0 0 0 0 var(--md-on-surface);
  transition: transform var(--md-dur-med) var(--md-spring),
              box-shadow var(--md-dur-short) var(--md-ease-emphasized),
              border-radius var(--md-dur-med) var(--md-ease-emphasized);
}
.m3-swatch:hover { transform: scale(1.06); }
.m3-swatch .tick { opacity: 0; transform: scale(.4); display: grid;
  transition: opacity var(--md-dur-short) linear, transform var(--md-dur-med) var(--md-spring); }
.m3-swatch.on { box-shadow: inset 0 0 0 3px var(--md-surface), 0 0 0 3px var(--md-primary); }
.m3-swatch.on .tick { opacity: 1; transform: none; }

/* ---------- accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 760px) {
  .md-navbar { display: flex; }
  body.has-navbar { padding-bottom: 92px; }
  .md-fab { bottom: calc(88px + env(safe-area-inset-bottom)); }
}

/* ---------- cloche de notifications (notifs.js) ----------
   Flottante en haut à droite sur les pages sans barre (accueil, CV), dans la
   barre sinon. La pastille reprend le « badge » Material : rouge d'erreur,
   cerclée de la couleur de fond pour se détacher de l'icône. */
/* Bas à gauche, à la hauteur du dock (même `bottom`) : elle se lit comme
   sa voisine. Si un écran très étroit la fait chevaucher le dock, notifs.js
   la remonte juste au-dessus. */
.pf-notif-float {
  position: fixed; z-index: 95;
  left: max(14px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));
}
.pf-notif-float .pf-notif-btn {
  background: var(--md-surface-container-high);
  box-shadow: var(--md-elev-2, 0 2px 8px rgba(0, 0, 0, .22));
}
.pf-notif-btn { position: relative; }
.pf-notif-badge {
  position: absolute; top: 7px; right: 7px;
  width: 10px; height: 10px; border-radius: 50%;
  /* Un simple point, sans chiffre ni animation : le rouge du thème courant,
     adouci vers le pastel. Les rouges « sombres » de Gruvbox et Dracula sont
     vifs, et en mode clair tous les thèmes ont un rouge foncé : on les tire
     vers le blanc — peu en sombre (le #F38BA8 de Catppuccin reste reconnaissable),
     davantage en clair. */
  background: color-mix(in oklab, var(--md-error) 78%, #fff);
  /* anneau de la couleur du bouton : détache le point de l'icône */
  box-shadow: 0 0 0 2px var(--md-surface-container-high);
  pointer-events: none;
}
html.light .pf-notif-badge { background: color-mix(in oklab, var(--md-error) 58%, #fff); }
.pf-notif-badge[hidden] { display: none; }
.pf-notif-panel {
  position: fixed; z-index: 96;
  width: min(340px, calc(100vw - 24px));
  padding: 8px;
  background: var(--md-surface-container-high); color: var(--md-on-surface);
  border-radius: var(--md-shape-card);
  box-shadow: var(--md-elev-3);
  transform-origin: bottom left;
  animation: pf-notif-ouvre .28s var(--md-ease-emphasized);
}
.pf-notif-panel[hidden] { display: none; }
@keyframes pf-notif-ouvre { from { opacity: 0; transform: scale(.92) translateY(6px); } }
.pf-notif-titre {
  padding: 6px 10px 8px;
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--md-on-surface-variant);
}
.pf-notif-item {
  display: flex; gap: 12px; padding: 12px;
  border-radius: max(8px, calc(var(--md-shape-card) - 6px));
  background: var(--md-surface-container);
}
.pf-notif-item + .pf-notif-item { margin-top: 6px; }
.pf-notif-ic {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--md-tertiary-container); color: var(--md-on-tertiary-container);
}
.pf-notif-corps { min-width: 0; }
.pf-notif-corps h3 { margin: 1px 0 3px; font-size: .95rem; font-weight: 700; }
.pf-notif-corps p { margin: 0; font-size: .86rem; line-height: 1.4; color: var(--md-on-surface-variant); }
.pf-notif-lien {
  display: inline-block; margin-top: 10px; padding: 7px 16px;
  border-radius: var(--md-shape-button);
  background: var(--md-primary); color: var(--md-on-primary);
  font-size: .82rem; font-weight: 700; text-decoration: none;
}
@media (prefers-reduced-motion: reduce) { .pf-notif-panel { animation: none; } }
/* sur papier, une cloche n'a aucun sens */
@media print { .pf-notif-float, .pf-notif-panel, .pf-notif-btn { display: none !important; } }

/* Note personnelle en bas de la feuille « Apparence » */
.m3-note {
  margin-top: 26px; padding: 14px 16px;
  border-radius: var(--md-shape-card);
  background: var(--md-surface-container);
}
.m3-note .md-label { display: block; margin-bottom: 6px; color: var(--md-tertiary); }
.m3-note p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--md-on-surface-variant); }