/* ===== Confort de lecture : TLDR, accessibilité, visite guidée (js/extras.js) ===== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- TLDR ---------- */
.tldr-pill[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
html.tldr-on .tabs,
html.tldr-on .container > .panel,
html.tldr-on .container > .below,
html.tldr-on .container > .foot { display: none !important; }
.tldr {
  border-top: var(--line);
  background: var(--yellow);
  padding: 40px clamp(16px, 3vw, 40px) 64px;
  background-image: radial-gradient(rgba(23, 20, 31, .2) 1px, transparent 1.5px);
  background-size: 12px 12px;
}
.tldr[hidden] { display: none; }
.tldr-card {
  max-width: 880px; margin: 0 auto;
  padding: clamp(18px, 3vw, 32px);
  border: var(--line); background: var(--paper);
  box-shadow: 9px 9px 0 var(--ink);
  display: grid; gap: 22px;
}
.tldr-head { display: flex; align-items: center; gap: 20px; }
.tldr-head img { width: 96px; height: 96px; flex-shrink: 0; object-fit: cover; border: var(--line); box-shadow: 4px 4px 0 var(--pink); transform: rotate(-3deg); }
.tldr-head > div { min-width: 0; }
.tldr-name { margin: 12px 0 2px; font: italic 900 clamp(38px, 6vw, 64px)/.9 var(--display); text-transform: uppercase; letter-spacing: -.03em; text-shadow: -4px 3px 0 var(--orange); outline: 0; }
.tldr-role { margin: 6px 0 0; font: 700 18px/1.3 var(--body); }
.tldr-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tldr-stats .stat b { font-size: 38px; }
.tldr-facts { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 17px; line-height: 1.5; max-width: 72ch; }
.tldr-cta { margin: 0; }
.tldr-cta .btn { text-transform: none; font-style: normal; font-family: var(--body); font-weight: 800; }
.tldr-full { justify-self: start; border: 0; background: none; padding: 4px 0; font: 700 15px var(--body); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 760px) { .tldr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .tldr-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .tldr-head img { width: 72px; height: 72px; }
  .tldr-stats .stat b { font-size: 30px; }
  .tldr-cta .btn { width: 100%; justify-content: center; }
}

/* ---------- Menu confort ---------- */
.a11y-menu { position: relative; }
.a11y-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding-inline: 10px; }
.a11y-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.a11y-pop {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  width: max-content; max-width: min(280px, calc(100vw - 32px));
  display: grid; gap: 10px;
  padding: 14px 16px;
  border: var(--line); background: var(--paper);
  box-shadow: 5px 5px 0 var(--ink);
  font: 600 15px/1.3 var(--body);
}
.a11y-pop[hidden] { display: none; }
.a11y-pop b { font: italic 900 13px var(--display); text-transform: uppercase; }
.a11y-pop label { display: flex; align-items: center; gap: 10px; min-height: 32px; cursor: pointer; }
.a11y-pop input { width: 20px; height: 20px; accent-color: var(--ink); }
.a11y-pop small { color: var(--ink-soft); font-weight: 500; }
@media (max-width: 860px) { .a11y-pop { right: auto; left: 0; } }

/* Animations coupées */
html.a11y-calm *, html.a11y-calm *::before, html.a11y-calm *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}

/* Contraste renforcé */
html.a11y-contrast { --ink-soft: #000; --ink: #000; --paper: #fff; }
html.a11y-contrast body::before, html.a11y-contrast .panel::before { display: none; }
html.a11y-contrast body { background: #fff; }
html.a11y-contrast .lede, html.a11y-contrast .box-body, html.a11y-contrast p { color: #000; }
html.a11y-contrast main a, html.a11y-contrast .below a:not(.tile):not(.contact-card):not(.btn) { text-decoration: underline; }
html.a11y-contrast .big, html.a11y-contrast .tldr-name { text-shadow: none; }
html.a11y-contrast :focus-visible { outline: 3px solid #000 !important; outline-offset: 3px; box-shadow: 0 0 0 6px #ffd93d !important; }

/* Humeurs du classeur : mêmes jetons, autres couleurs. Night City et le contraste renforcé gardent la main. */
html.mood-doux:not(.nc):not(.a11y-contrast) {
  --paper: #f6f1ec; --ink: #3a3442; --ink-soft: #6a6274;
  --blue: #bcdcf2; --yellow: #f5e6b0; --green: #c9ead6; --orange: #f3d0bc; --pink: #ecd2e6; --red: #d9a3b8; --violet: #d9cdef;
}
html.mood-peps:not(.nc):not(.a11y-contrast) {
  --paper: #fff8d6; --ink: #120a24; --ink-soft: #33264f;
  --blue: #3d94ff; --yellow: #ffe500; --green: #00d97e; --orange: #ff6a00; --pink: #ff3fb4; --red: #ff2d55; --violet: #a259ff;
}
html.mood-kraft:not(.nc):not(.a11y-contrast) {
  --paper: #d9bf98; --ink: #2b1d10; --ink-soft: #4e3a26;
  --blue: #8fadbb; --yellow: #e2b75a; --green: #a3b277; --orange: #cf8458; --pink: #d2a6a2; --red: #a3402a; --violet: #a993b3;
}
/* Nuit : le classeur passe en négatif, les photos et Bip sont remis à l'endroit */
html.mood-nuit:not(.nc) { filter: invert(.92) hue-rotate(180deg); background: #fff; }
html.mood-nuit:not(.nc) :is(img:not(.portrait-frame img), video, canvas, .portrait-frame, .mascot) { filter: invert(1) hue-rotate(180deg); }
/* N&B granuleux : photo argentique, grain qui frémit */
html.mood-grain:not(.nc) { filter: grayscale(1) contrast(1.12); }
html.mood-grain:not(.nc)::after {
  content: ""; position: fixed; inset: -60px; z-index: 2147483000; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .38; mix-blend-mode: multiply;
  animation: moodGrain .6s steps(5) infinite;
}
@keyframes moodGrain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-23px, 17px); } 40% { transform: translate(31px, -9px); }
  60% { transform: translate(-11px, -34px); } 80% { transform: translate(19px, 27px); } 100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { html.mood-grain::after { animation: none; } }
@media print { html[class*="mood-"] { filter: none !important; } html.mood-grain::after { display: none; } }

/* Choix de l'humeur dans le menu confort */
.a11y-pop .moods { display: grid; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1.5px dashed var(--ink); }
.a11y-pop .moods-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mood-sw { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 5px 8px 5px 5px; cursor: pointer;
  border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: #17141f;
  font: italic 900 11.5px/1 var(--display); text-transform: uppercase; text-align: left; box-shadow: 2px 2px 0 var(--ink); }
.mood-sw:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.mood-sw[aria-checked="true"] { background: #ffd93d; transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.mood-sw:focus-visible { outline: 3px dashed var(--ink); outline-offset: 2px; }
.mood-sw i { display: flex; flex: none; width: 30px; height: 18px; border: 2px solid #17141f; border-radius: 999px; overflow: hidden; }
.mood-sw i span { flex: 1; }
.mood-sw.dice { grid-column: 1 / -1; justify-content: center; border-radius: 6px; }

/* ---------- Visite guidée ---------- */
.tour-ring {
  position: fixed; z-index: 9400; pointer-events: none;
  border: 3px dashed var(--ink); border-radius: 10px;
  box-shadow: 0 0 0 4px var(--yellow), 0 0 0 100vmax rgba(23, 20, 31, .38);
  transition: left .35s ease, top .35s ease, width .35s ease, height .35s ease;
}
.tour-card {
  position: fixed; z-index: 9401;
  left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); translate: -50% 0;
  width: min(520px, calc(100vw - 32px));
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px;
  border: var(--line); background: var(--paper);
  box-shadow: 7px 7px 0 var(--ink);
  animation: tourIn .3s cubic-bezier(.3, 1.4, .5, 1);
}
@keyframes tourIn { from { transform: translateY(24px) rotate(-2deg); opacity: 0; } }
.tour-bip { flex-shrink: 0; width: 52px; height: 52px; padding: 4px; border: var(--line); border-radius: 12px; background: var(--blue); }
.tour-bip svg { width: 100%; height: 100%; fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
.tour-bip circle:nth-of-type(1), .tour-bip circle:nth-of-type(2) { fill: var(--ink); }
.tour-body { min-width: 0; flex: 1; }
.tour-count { font: 700 12px var(--body); letter-spacing: .08em; }
.tour-card h2 { margin: 2px 0 6px; font: italic 900 22px/1.05 var(--display); text-transform: uppercase; }
.tour-card p { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.tour-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.tour-nav .btn { padding: 10px 14px; }
.tour-nav .btn:disabled { opacity: .4; pointer-events: none; }
.tour-x { position: absolute; right: 6px; top: 4px; width: 36px; height: 36px; border: 0; background: none; font: 900 24px/1 var(--display); color: var(--ink); cursor: pointer; }
html.touring .mascot-bubble { display: none !important; }
@media print { .tldr-pill, .a11y-menu, .tour-start, .tour-ring, .tour-card { display: none !important; } }
@media (max-width: 560px) {
  .top-actions { flex-wrap: wrap; }
  .top-actions .pill.tldr-pill, .top-actions .pill.a11y-btn { display: inline-flex; font-size: 12px; padding: 9px 12px; }
  .top-actions .pill.a11y-btn { padding-inline: 9px; min-width: 40px; }
}
.tldr-pill .sm { display: none; }
@media (max-width: 560px) {
  .top-actions { max-width: 100%; }
  .tldr-pill .lg { display: none; }
  .tldr-pill .sm { display: inline; }
}

/* ---------- Voyants en ligne (js/status.js) ---------- */
.live-badge {
  display: inline-flex; align-items: center; gap: 7px; vertical-align: middle;
  margin-left: 10px; padding: 4px 10px;
  border: 2px solid var(--ink); border-radius: 999px;
  background: #fff;
  font: 800 12px/1 var(--body); letter-spacing: .02em; color: var(--ink);
}
.live-badge i { width: 9px; height: 9px; border-radius: 50%; background: #1fae5b; box-shadow: 0 0 0 3px rgba(31, 174, 91, .25); animation: livePulse 1.8s ease-in-out infinite; }
.live-badge.is-down i { background: var(--red); box-shadow: 0 0 0 3px rgba(255, 90, 95, .25); animation: none; }
.tile small .live-badge { margin-left: 8px; padding: 2px 8px; font-size: 10.5px; }
@keyframes livePulse { 50% { box-shadow: 0 0 0 6px rgba(31, 174, 91, 0); } }

/* ---------- Barre du haut sur mobile (accueil) ----------
   SIMON VICTOR à gauche, ◐ + FR/EN puis TLDR empilés à droite,
   puis CV et Secrets sur la ligne suivante, Mode recruteur, puis les onglets. */
@media (max-width: 560px) {
  .top.top-x {
    display: grid; position: relative;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "logo a11y lang" "logo tldr tldr" "cv sec sec" "rec rec rec" "tabs tabs tabs";
    gap: 10px 8px; align-items: center;
  }
  .top.top-x .top-actions { display: contents; }
  .top.top-x .logo { grid-area: logo; justify-self: start; }
  .top.top-x .a11y-menu { grid-area: a11y; position: static; }
  .top.top-x .lang { grid-area: lang; }
  .top.top-x .tldr-pill { grid-area: tldr; justify-self: stretch; justify-content: center; }
  .top.top-x .cv-menu { grid-area: cv; justify-self: start; }
  .top.top-x .tabs { grid-area: tabs; }
  .top.top-x .top-actions > a.pill:not(.cta) { grid-area: sec; justify-self: end; display: inline-flex; font-size: 12px; padding: 9px 12px; }
  /* Mode recruteur : sa propre ligne, sinon il recouvre « Secrets » */
  .top.top-x .top-actions > a.pill.pill-rec { grid-area: rec; justify-self: stretch; justify-content: center; }
  .top.top-x .a11y-pop { left: 16px; right: 16px; top: 64px; width: auto; max-width: none; }
}
@media (max-width: 560px) {
  .top.top-x .cv-menu > .pill.cta { white-space: nowrap; }
  .top.top-x .cv-list { left: 0; right: auto; align-items: flex-start; }
}
@media (max-width: 380px) {
  .top.top-x .logo span { font-size: 18px; white-space: nowrap; }
  .top.top-x .cv-menu > .pill.cta { font-size: 11px; padding-inline: 10px; }
}