/* ─────────────────────────────────────────────
   PERSONA.CSS — Styles partagés du prototype
   DA Persona 5 · K.SBT Portfolio
───────────────────────────────────────────── */
@font-face {
  font-family: "Baunk";
  src: url("assets/fonts/Baunk-Regular.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/GeistMonoVF.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #1c1c1c;
  --red: #cd161b;
  --wh: #e5e5e5;
  --ye: #f9d923;
  --blk: #0a0008;
  --surf: rgba(245, 244, 242, 0.04);
  --bd: rgba(245, 244, 242, 0.1);
  --nav-h: 14vh;
  --disp: "Baunk", sans-serif;
  --ui: "Chakra Petch", sans-serif;
  --mono: "Geist Mono", monospace;
}

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

/* ─ Scrollbar personnalisée ─────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--red) transparent;
}
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--red);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
  background: #ff1c22;
}
html,
body {
  height: 100%;
}
body {
  background: var(--bg);
  color: var(--wh);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  transition: opacity 0.35s ease;
}
body.in {
  opacity: 1;
}
a {
  color: inherit;
  text-decoration: none;
}

/* ─ Halftone dots ────────────────────────────── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(
    circle,
    rgba(245, 244, 242, 0.048) 1px,
    transparent 1px
  );
  background-size: 18px 18px;
}

/* ─ Overlay transition — GSAP contrôle le transform ── */
#p5-trans {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--red);
  pointer-events: none;
  will-change: transform;
  /* Position initiale posée par GSAP au démarrage */
}

/* ─ Navbar ───────────────────────────────────── */
.p5-nav {
  position: fixed;
  top: 2vh;
  left: 0;
  right: 0;
  height: 10vh;
  z-index: 200;
  background: var(--red);
  display: flex;
  align-items: center;
  padding: 0 52px;
  gap: 0;
  transform: rotate(-1.5deg);
  transform-origin: center center;
}
.p5-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 12px,
    rgba(0, 0, 0, 0.1) 12px,
    rgba(0, 0, 0, 0.1) 13px
  );
  pointer-events: none;
}
.p5-nav-brand {
  text-decoration: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  line-height: 0;
}
/* ─ Titre de page (hors nav, en dessous du bandeau) */
.p5-page-title-bar {
  padding: 10px 48px;
  border-bottom: 1px solid rgba(245, 244, 242, 0.07);
}
.page-title {
  font-family: var(--disp);
  font-size: clamp(20px, 2.8vw, 38px);
  font-weight: 400;
  color: var(--wh);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
  -webkit-text-stroke: 1px var(--wh);
  paint-order: stroke fill;
}
.p5-nav-links {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.p5-nav-link {
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 244, 242, 0.45);
  padding: 6px 16px;
  position: relative;
  transition: color 0.15s;
}
.p5-nav-link:hover {
  color: var(--wh);
}
.p5-nav-link.active {
  color: var(--wh);
}
.p5-nav-link.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 16px;
  right: 16px;
  height: 2px;
  background: var(--ye);
}
.p5-nav-cta {
  display: inline-flex;
  align-items: stretch;
  text-decoration: none;
  background: var(--red);
  border: 3px solid #111;
  box-shadow: 4px 4px 0 #111;
  overflow: hidden;
  margin-left: 16px;
  height: 40px;
  align-self: center;
  position: relative;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.p5-nav-cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #111;
}
.nav-cta-figure {
  aspect-ratio: 1;
  height: 100%;
  background: white;
  color: var(--red);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.nav-cta-figure svg {
  width: 100%;
  height: 100%;
  display: block;
}
.nav-cta-label {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: white;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ─ Wrapper page (compense la navbar) ────────── */
.p5-page {
  padding-top: max(var(--nav-h), 14vh);
  min-height: 100vh;
  position: relative;
  z-index: 10;
}

/* ─ Page header band ─────────────────────────── */
.p5-page-head {
  padding: 32px 48px 24px;
  border-bottom: 1px solid rgba(245, 244, 242, 0.08);
  position: relative;
  overflow: hidden;
}
.p5-page-head::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -5%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    115deg,
    transparent 45%,
    rgba(205, 22, 27, 0.08) 45%,
    rgba(205, 22, 27, 0.08) 55%,
    transparent 55%
  );
  pointer-events: none;
}
.p5-page-title {
  font-family: var(--disp);
  font-size: clamp(36px, 5vw, 72px);
  line-height: 0.88;
  letter-spacing: 0.03em;
  color: var(--wh);
}

/* ─ Carte P5 ─────────────────────────────────── */
.p5-card {
  background: var(--wh);
  color: var(--blk);
  border: 3px solid var(--blk);
  box-shadow: 6px 6px 0 var(--blk);
  position: relative;
  overflow: hidden;
  transition:
    transform 0.15s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.15s;
  display: flex;
}
.p5-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: var(--red);
  flex-shrink: 0;
}
.p5-card:hover {
  box-shadow: 10px 10px 0 var(--blk);
}

/* ─ Bouton principal (rouge clip-path) ─────────── */
.p5-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--red);
  color: var(--wh);
  clip-path: polygon(
    0 0,
    calc(100% - 8px) 0,
    100% 8px,
    100% 100%,
    8px 100%,
    0 calc(100% - 8px)
  );
  transition:
    opacity 0.15s,
    gap 0.2s;
}
.p5-btn:hover {
  opacity: 0.88;
  gap: 14px;
}

/* ─ Bouton fantôme ───────────────────────────── */
.p5-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 26px;
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: transparent;
  color: rgba(245, 244, 242, 0.5);
  border: 2px solid rgba(245, 244, 242, 0.18);
  clip-path: polygon(
    0 0,
    calc(100% - 8px) 0,
    100% 8px,
    100% 100%,
    8px 100%,
    0 calc(100% - 8px)
  );
  transition:
    border-color 0.15s,
    color 0.15s,
    gap 0.2s;
}
.p5-btn-ghost:hover {
  border-color: var(--wh);
  color: var(--wh);
  gap: 14px;
}

/* ─ Badge compétence ─────────────────────────── */
.comp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1.5px solid currentColor;
}

/* ─ Barre de progression P5 ──────────────────── */
.p5-gauge {
  margin-bottom: 12px;
}
.p5-gauge-head {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}
.p5-gauge-track {
  height: 4px;
  background: rgba(245, 244, 242, 0.08);
  position: relative;
}
.p5-gauge-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─ Séparateur ───────────────────────────────── */
.p5-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ye);
  margin-bottom: 20px;
}
.p5-sep::before {
  content: "◆";
  font-size: 10px;
}
.p5-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(245, 244, 242, 0.08);
}
.p5-sep-icon {
  width: 22px;
  height: auto;
  flex-shrink: 0;
  image-rendering: crisp-edges;
}

/* ─ Animations — gérées par GSAP dans persona.js ─── */
/* Les classes .anim-up / .anim-r servent de sélecteurs GSAP */

/* ─ Stars déco ───────────────────────────────── */
.p5-stars {
  font-size: 10px;
  letter-spacing: 0.4em;
  color: rgba(205, 22, 27, 0.45);
}

/* ─ Nav CTA active state ─────────────────────── */
.p5-nav-cta:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #111;
}

@keyframes p5-glitch {
  0% {
    background: transparent;
    color: var(--wh);
    border-color: var(--wh);
    transform: none;
    filter: none;
    letter-spacing: 0.16em;
    opacity: 1;
  }
  25% {
    background: red;
    transform: translateX(-6px);
    letter-spacing: 0.16em;
    color: #fff;
    border-color: red;
  }
  35% {
    background: green;
    transform: translateX(6px);
    color: #fff;
    border-color: green;
    letter-spacing: 0.16em;
  }
  59% {
    opacity: 0;
    letter-spacing: 0.16em;
  }
  60% {
    background: blue;
    transform: translateX(-6px);
    filter: blur(3px);
    color: #fff;
    border-color: blue;
    letter-spacing: 0.16em;
  }
  100% {
    background: transparent;
    color: var(--wh);
    border-color: var(--wh);
    transform: none;
    filter: none;
    letter-spacing: 0.16em;
    opacity: 1;
  }
}
@keyframes p5-blink {
  50% {
    opacity: 0;
  }
}

/* ═══════════════════════════════════════════════
   PAGE : PROJETS
═══════════════════════════════════════════════ */
.filters {
  padding: 20px 48px 24px;
  border-bottom: 1px solid rgba(245, 244, 242, 0.07);
}
.filter-groups-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: flex-start;
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#filter-group-ac {
  flex: 0 0 100%;
}
.filter-toggle {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 244, 242, 0.6);
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 5px 10px 5px 0;
  cursor: default;
  pointer-events: none;
  white-space: nowrap;
  text-align: left;
}
.filter-toggle::after {
  content: "›";
  margin-left: 4px;
}
.filter-sort-btn {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 244, 242, 0.4);
  background: transparent;
  border: 2px solid rgba(245, 244, 242, 0.15);
  box-shadow: 2px 2px 0 rgba(245, 244, 242, 0.06);
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s, box-shadow 0.12s;
  align-self: flex-start;
}
.filter-sort-btn:hover {
  color: var(--wh);
  border-color: var(--wh);
  box-shadow: 2px 2px 0 rgba(245, 244, 242, 0.3);
}
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  position: static;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  min-width: 0;
}
.filter-pills::-webkit-scrollbar {
  display: none;
}
.filter-pill {
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 12px;
  margin-bottom: 3px;
  background: transparent;
  color: var(--wh);
  border: 2px solid var(--wh);
  box-shadow: 3px 3px 0 var(--wh);
  cursor: pointer;
  transition:
    transform 0.08s,
    box-shadow 0.08s,
    background 0.08s,
    color 0.08s;
  position: relative;
  overflow: hidden;
}
.filter-pill--comp::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.6s;
}
.filter-pill--comp:hover::before {
  left: 100%;
}
.filter-pill:hover {
  background: var(--wh);
  color: var(--blk);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--wh);
}
.filter-pill--comp:hover {
  background: var(--pill-color);
  border-color: var(--pill-color);
  color: var(--blk);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--pill-shadow, var(--blk));
}
.filter-pill.active {
  background: var(--pill-color, var(--wh));
  color: var(--blk);
  border-color: var(--pill-color, var(--wh));
  box-shadow: 3px 3px 0 var(--blk);
}
.filter-pill:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}
.traces-grid {
  padding: 36px 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.trace-card {
  display: flex;
  flex-direction: column;
  background: var(--wh);
  color: var(--blk);
  border: 3px solid var(--wh);
  position: relative;
  overflow: hidden;
  transform: rotate(var(--card-rot, 0deg));
  box-shadow: 6px 6px 0 var(--wh);
  cursor: pointer;
}
.trace-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: var(--red);
  z-index: 1;
}
@keyframes card-glitch {
  0% {
    transform: rotate(var(--card-rot)) translate(0, 0);
    box-shadow: 6px 6px 0 var(--wh);
    border-color: var(--wh);
  }
  15% {
    transform: rotate(var(--card-rot)) translateX(-12px);
    box-shadow: 6px 6px 0 var(--red);
    border-color: var(--red);
  }
  30% {
    transform: rotate(var(--card-rot)) translateX(8px);
    box-shadow: 6px 6px 0 var(--wh);
    border-color: var(--wh);
  }
  55% {
    transform: rotate(var(--card-rot)) translateX(-5px);
    box-shadow: 8px 8px 0 var(--wh);
  }
  100% {
    transform: rotate(var(--card-rot)) translate(-5px, -5px);
    box-shadow: 11px 11px 0 var(--wh);
  }
}
.trace-card:hover {
  animation: card-glitch 0.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.trace-card:active {
  transform: rotate(var(--card-rot)) translate(5px, 5px) !important;
  box-shadow: none !important;
  animation: none !important;
}
.trace-thumb {
  aspect-ratio: 16/9;
  background: rgba(10, 0, 8, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(10, 0, 8, 0.25);
  border-bottom: 2px solid var(--wh);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.trace-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(205, 22, 27, 0.06) 0%,
    transparent 60%
  );
}
.trace-body {
  padding: 16px 18px 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  background: var(--blk);
  transition: background 0.18s ease 0.1s;
}
.trace-card:hover .trace-body {
  background: var(--red);
}
.trace-card:hover .trace-num {
  color: rgba(10, 0, 8, 0.5);
}
.trace-card:hover .trace-title {
  color: var(--blk);
}
.trace-card:hover .trace-year {
  color: rgba(10, 0, 8, 0.5);
}
.trace-card:hover .trace-footer {
  border-top-color: rgba(10, 0, 8, 0.15);
}
.trace-card:hover .trace-arrow {
  color: var(--blk);
  animation: blink 0.1s infinite;
}
.trace-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(245, 244, 242, 0.35);
}
.trace-title {
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--wh);
}
.trace-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.trace-type {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  background: transparent;
  border: 1.5px solid rgba(245, 244, 242, 0.25);
  color: rgba(245, 244, 242, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.trace-card:hover .trace-type {
  border-color: rgba(10, 0, 8, 0.3);
  color: var(--blk);
}
.trace-tags .comp-name__border {
  filter: drop-shadow(3px 3px 0 #000) drop-shadow(2px 2px 0 #000);
}
.trace-tags .comp-name__shape {
  font-size: 10px;
  padding: 2px 8px;
}
.trace-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(245, 244, 242, 0.1);
}
.trace-year {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(245, 244, 242, 0.35);
}
.trace-arrow {
  font-size: 14px;
  color: var(--red);
}

/* ═══════════════════════════════════════════════
   PAGE : TRACE DÉTAIL
═══════════════════════════════════════════════ */

/* ─ Nameplate Persona 5 ──────────────────────── */
.p5-nameplate {
  padding: 32px 48px 48px;
}

.p5-nameplate__cap {
  display: inline-flex;
  align-items: center;
  background: var(--blk);
  border: 2px solid black;
  border-bottom: none;
  padding: 7px 22px 10px;
  border-radius: 4px 8px 8px 8px;
  margin-left: 0;
  margin-bottom: -12px;
  position: relative;
  z-index: 2;
  transform: skewX(-10deg);
  box-shadow:
    4px 4px 0 0 var(--wh),
    4px 4px 0 2px #000;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 244, 242, 0.65);
}

.p5-nameplate__cap span {
  display: inline-block;
  transform: skewX(5deg);
}

.p5-nameplate__cap span::before {
  content: "◆";
  font-size: 9px;
  color: var(--ye);
  margin-right: 8px;
}

.p5-nameplate__body {
  position: relative;
  z-index: 1;
  background: var(--red);
  border: 2px solid black;
  border-radius: 4px 14px 14px 14px;
  box-shadow:
    4px 4px 0 0 var(--wh),
    4px 4px 0 2px #000,
    11px 11px 0 0 #000;
  padding: 24px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  overflow: hidden;
  min-height: 94px;
  transform: skewX(-10deg);
}

.p5-nameplate__body::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    rgba(245, 244, 242, 0.14) 1.5px,
    transparent 1.5px
  );
  background-size: 14px 14px;
  pointer-events: none;
}

.p5-nameplate__title {
  font-family: var(--disp);
  font-size: clamp(26px, 4vw, 58px);
  line-height: 0.9;
  letter-spacing: 0.03em;
  color: var(--wh);
  position: relative;
  z-index: 1;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
  transform: skewX(5deg);
}

.trace-page-grid {
  display: grid;
  grid-template-columns: 8fr 1fr 3fr;
  grid-template-rows: auto 1fr;
  align-items: start;
  min-height: calc(100vh - var(--nav-h));
}
.trace-page-grid .trace-sidebar {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  z-index: 10;
}
.trace-page-grid .p5-nameplate {
  grid-column: 1 / 3;
  grid-row: 1;
}
.trace-main {
  grid-column: 1 / 3;
  grid-row: 2;
  padding: 36px 48px;
}
.media-grid {
  columns: 2;
  column-gap: 12px;
  margin-bottom: 40px;
}
.media-grid:has(.media-item:only-child) {
  columns: 1;
}
.media-item {
  break-inside: avoid;
  margin-bottom: 12px;
  background: rgba(245, 244, 242, 0.05);
  border: 1px solid rgba(245, 244, 242, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  transition:
    background 0.15s,
    border-color 0.15s;
  min-height: 120px;
}
.media-item img {
  width: 100%;
  height: auto;
  display: block;
}
.media-item[data-src] {
  cursor: zoom-in;
}
.media-item:hover {
  background: rgba(245, 244, 242, 0.09);
  border-color: rgba(245, 244, 242, 0.15);
}
.media-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}
.media-item:hover::before {
  transform: scaleX(1);
}
.media-icon {
  font-size: 28px;
  color: rgba(245, 244, 242, 0.55);
}
.media-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 244, 242, 0.55);
}
/* ── Lightbox ── */
#p5-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.93);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
#p5-lightbox.open {
  display: flex;
}
#p5-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  display: block;
  border: 2px solid var(--red);
  box-shadow: 6px 6px 0 #000;
  cursor: default;
}
#p5-lightbox-close {
  position: absolute;
  top: 24px;
  right: 28px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--wh);
  cursor: pointer;
  background: var(--red);
  border: 2px solid var(--wh);
  padding: 4px 10px;
  line-height: 1.4;
  transition: background 0.15s;
}
#p5-lightbox-close:hover {
  background: #000;
}
.arg-text {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 300;
  color: rgba(245, 244, 242, 0.55);
  line-height: 1.8;
  text-transform: none;
  letter-spacing: 0.01em;
  margin-bottom: 20px;
}
.arg-text p + p {
  margin-top: 14px;
}

/* ─ Commentaires ─────────────────────────────── */
.comment-count {
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(245, 244, 242, 0.4);
  font-weight: 400;
}
.comment-empty {
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(245, 244, 242, 0.3);
  letter-spacing: 0.08em;
  padding: 12px 0;
}
.comment-empty a {
  color: var(--red);
  text-decoration: none;
}
.comment-empty a:hover {
  text-decoration: underline;
}
.comment-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.comment-item {
  border: 1.5px solid rgba(245, 244, 242, 0.1);
  padding: 14px 16px;
  position: relative;
}
.comment-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: var(--red);
}
.comment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.comment-author {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.comment-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.comment-dot--concepteur {
  background: var(--red);
}
.comment-dot--evaluateur {
  background: rgba(245, 244, 242, 0.4);
}
.comment-date {
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(245, 244, 242, 0.3);
  letter-spacing: 0.06em;
}
.comment-body {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.65;
  color: rgba(245, 244, 242, 0.75);
}
.comment-form {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.comment-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.comment-me {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 244, 242, 0.4);
}

/* ─ Brutalist textarea (commentaires) ───────── */
.cmt-input-wrap {
  position: relative;
  font-family: var(--mono);
  margin-top: 38px;
}
.cmt-label {
  position: absolute;
  left: -3px;
  top: -35px;
  font-size: 12px;
  font-weight: 700;
  color: var(--wh);
  background: var(--blk);
  border: 2px solid rgba(245, 244, 242, 0.3);
  padding: 4px 10px;
  transform: rotate(-1deg);
  z-index: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  pointer-events: none;
}
.cmt-textarea {
  width: 100%;
  padding: 15px;
  font-size: 12px;
  font-weight: 700;
  color: var(--blk);
  background: var(--wh);
  border: 4px solid var(--blk);
  border-radius: 0;
  outline: none;
  resize: vertical;
  min-height: 100px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow:
    5px 5px 0 var(--blk),
    10px 10px 0 var(--red);
}
.cmt-textarea::placeholder {
  color: #888;
  transition: color 0.3s ease;
}
.cmt-textarea:focus::placeholder {
  color: transparent;
}
.cmt-textarea:focus {
  animation: cmt-focus-pulse 4s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
}
.cmt-textarea:focus + .cmt-label {
  transform: rotate(0deg) scale(1.05);
  background: var(--red);
  border-color: var(--red);
}
@keyframes cmt-focus-pulse {
  0%,
  100% {
    border-color: var(--blk);
  }
  50% {
    border-color: var(--red);
  }
}

/* ─ P5 Comment — Boîte de dialogue ──────────── */
.p5-cmt-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 24px;
}

.p5-cmt {
  position: relative;
  padding-top: 32px;
  /* Légère rotation caractéristique P5 */
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

/* Name tag — parallelogramme blanc au-dessus de la boîte */
.p5-cmt__nametag {
  position: absolute;
  top: 0;
  left: 10px;
  z-index: 2;
  background: var(--wh);
  color: var(--blk);
  border: 2.5px solid #111;
  padding: 3px 12px 3px 3px;
  white-space: nowrap;
  line-height: 1.25;
  display: flex;
  align-items: center;
  gap: 8px;
}
.p5-cmt__nametag-text {
  display: flex;
  flex-direction: column;
}
.p5-cmt__nametag-name {
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.p5-cmt__nametag-role {
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.38);
}

/* Bulle — rectangle, double bordure blanc + noir */
.p5-cmt__bubble {
  background: var(--blk);
  border: 4px solid var(--wh);
  box-shadow: 0 0 0 2px #111;
}

/* Zone de texte */
.p5-cmt__body {
  padding: 20px 18px;
}
.p5-cmt__text {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.65;
  color: var(--wh);
  margin-bottom: 7px;
}
.p5-cmt__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}
.p5-cmt__date {
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(245, 244, 242, 0.55);
  letter-spacing: 0.06em;
}
.p5-cmt__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.cmt-action-btn {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1.5px solid currentColor;
  background: transparent;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.cmt-action-btn--delete {
  color: var(--red);
}
.cmt-action-btn--delete:hover {
  background: var(--red);
  color: var(--wh);
}
.cmt-action-btn--archive {
  color: rgba(245, 244, 242, 0.35);
}
.cmt-action-btn--archive:hover {
  color: var(--wh);
  border-color: var(--wh);
}
.cmt-archived-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(245, 244, 242, 0.3);
  border: 1px solid rgba(245, 244, 242, 0.15);
  padding: 1px 6px;
  margin-bottom: 8px;
}
.p5-cmt[data-statut="archive"] {
  opacity: 0.4;
}

/* Variante concepteur — rouge */
.p5-cmt[data-role="concepteur"] .p5-cmt__bubble {
  border-color: var(--red);
}
.p5-cmt[data-role="concepteur"] .p5-cmt__nametag {
  border-color: var(--red);
}
.p5-cmt[data-role="concepteur"] .p5-cmt__nametag-role {
  color: var(--red);
}
/* Variante évaluateur — blanc neutre */
.p5-cmt[data-role="evaluateur"] .p5-cmt__nametag-role {
  color: rgba(0, 0, 0, 0.35);
}
/* Icône input__button__shadow dans le nametag */
.p5-cmt__icon {
  align-self: stretch;
  aspect-ratio: 1;
  padding: 3px;
  flex-shrink: 0;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p5-cmt__icon svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.p5-cmt__icon:hover {
  transform: translateX(-4px) translateY(-4px);
  box-shadow: 4px 4px 0 0 var(--blk);
}
.arg-highlight {
  color: var(--wh);
  font-weight: 600;
  background: rgba(205, 22, 27, 0.2);
  padding: 0 4px;
}
.trace-sidebar {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  overflow: hidden;
  padding: 36px 28px 36px calc(tan(10deg) * (100vh - var(--nav-h)) + 28px);
  background: rgba(245, 244, 242, 0.02);
  display: flex;
  flex-direction: column;
  gap: 28px;
  clip-path: polygon(
    calc(tan(10deg) * (100vh - var(--nav-h))) 0%,
    100% 0%,
    100% 100%,
    0% 100%
  );
  filter: drop-shadow(-1px 0 0 rgba(245, 244, 242, 0.07));
  pointer-events: none;
}
.trace-sidebar a,
.trace-sidebar button,
.trace-sidebar .ac-tag {
  pointer-events: auto;
}
.trace-back-link {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 244, 242, 0.4);
  text-decoration: none;
  transition: color 0.15s;
}
.trace-back-link:hover {
  color: var(--wh);
}
a.id-meta-item {
  text-decoration: none;
  color: inherit;
}
a.id-meta-item:hover {
  color: rgba(10, 0, 8, 0.75);
}
.sidebar-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(245, 244, 242, 0.55);
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(245, 244, 242, 0.06);
  padding-bottom: 6px;
}
.sidebar-val {
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wh);
}
.sidebar-acs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pub-badge {
  display: inline-block;
  background: #111;
  clip-path: polygon(54% 1%, 100% 19%, 97% 81%, 45% 100%, 0% 73%, 3% 22%);
  padding: 3px;
  filter: drop-shadow(5px 5px 0 #0a0008);
}
.pub-badge__fill {
  width: 72px;
  height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--ye);
  color: var(--blk);
  clip-path: polygon(54% 1%, 100% 19%, 97% 81%, 45% 100%, 0% 73%, 3% 22%);
}
.pub-badge__icon {
  font-size: 18px;
  line-height: 1;
}
.pub-badge__label {
  font-family: var(--disp);
  font-size: 9px;
  letter-spacing: 0.2em;
  line-height: 1;
}
.ac-tag {
  --ac-clip: polygon(9% 0%, 92% 4%, 100% 38%, 95% 100%, 5% 95%, 0% 58%);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(245, 244, 242, 0.5);
  position: relative;
  cursor: default;
  transition: color 0.15s;
}
.ac-tag:nth-child(3n + 2) {
  --ac-clip: polygon(4% 3%, 94% 0%, 98% 62%, 88% 100%, 8% 97%, 2% 40%);
}
.ac-tag:nth-child(3n) {
  --ac-clip: polygon(11% 1%, 96% 5%, 99% 45%, 91% 100%, 3% 96%, 1% 52%);
}
.ac-tag__border {
  display: inline-block;
  background: #111;
  clip-path: var(--ac-clip);
  padding: 2px;
  filter: drop-shadow(6px 6px 0 #000) drop-shadow(5px 5px 0 #000)
    drop-shadow(4px 4px 0 #000) drop-shadow(3px 3px 0 #000);
}
.ac-tag__shape {
  display: block;
  background: var(--wh);
  color: var(--blk);
  clip-path: var(--ac-clip);
  padding: 3px 10px;
}
.ac-tag:hover {
  color: var(--wh);
}
.ac-tag::before {
  content: "";
  position: absolute;
  left: 10px;
  bottom: calc(100% + 4px);
  width: 10px;
  height: 10px;
  background: var(--wh);
  border-right: 2px solid var(--blk);
  border-bottom: 2px solid var(--blk);
  transform: rotate(45deg) translateY(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 101;
  transition: all 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.ac-tag::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  background: var(--wh);
  color: var(--blk);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.45;
  text-transform: none;
  padding: 6px 10px;
  min-width: 240px;
  max-width: 520px;
  white-space: normal;
  border: 2px solid var(--blk);
  box-shadow: 3px 3px 0 var(--blk);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 100;
  transform: translateY(8px) rotate(-4deg);
  transition: all 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.ac-tag:hover::before {
  opacity: 1;
  visibility: visible;
  transform: rotate(45deg) translateY(0);
}
.ac-tag:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) rotate(2deg);
}
.sidebar-comp {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.comp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.comp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.comp-name {
  --comp-color: #cd161b;
  --comp-clip: polygon(9% 0%, 92% 4%, 100% 38%, 95% 100%, 5% 95%, 0% 58%);
  font-size: 12px;
}
.comp-name--c1 {
  --comp-clip: polygon(9% 0%, 92% 4%, 100% 38%, 95% 100%, 5% 95%, 0% 58%);
}
.comp-name--c2 {
  --comp-clip: polygon(4% 3%, 94% 0%, 98% 62%, 88% 100%, 8% 97%, 2% 40%);
}
.comp-name--c3 {
  --comp-clip: polygon(11% 1%, 96% 5%, 99% 45%, 91% 100%, 3% 96%, 1% 52%);
}
.comp-name--c4 {
  --comp-clip: polygon(6% 2%, 97% 0%, 100% 56%, 93% 100%, 7% 98%, 0% 44%);
}
.comp-name--c5 {
  --comp-clip: polygon(13% 0%, 95% 3%, 98% 58%, 90% 100%, 4% 97%, 1% 36%);
}
.comp-name__border {
  display: inline-block;
  background: #111;
  clip-path: var(--comp-clip);
  padding: 2px;
  filter: drop-shadow(6px 6px 0 #000) drop-shadow(5px 5px 0 #000)
    drop-shadow(4px 4px 0 #000) drop-shadow(3px 3px 0 #000);
}
.comp-name__shape {
  display: block;
  background: var(--comp-color);
  color: var(--blk);
  clip-path: var(--comp-clip);
  padding: 7px 20px;
  font-family: var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.trace-tags .comp-name__shape {
  font-size: 10px;
  padding: 3px 10px;
}
.trace-tags .comp-name__border {
  filter: drop-shadow(3px 3px 0 #000) drop-shadow(2px 2px 0 #000);
}
/* ─ Exit button ──────────────────────────────── */
.exit-btn {
  display: inline-flex;
  align-items: stretch;
  text-decoration: none;
  background: var(--red);
  border: 3px solid #111;
  box-shadow: 4px 4px 0 #111;
  overflow: hidden;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.exit-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #111;
}
.exit-btn__arrow {
  display: flex;
  align-items: center;
  padding: 0 10px;
}
.exit-btn__arrow svg {
  width: 24px;
  height: 18px;
  display: block;
}
.exit-btn__figure {
  position: relative;
  width: 48px;
  height: 48px;
  background: white;
  color: var(--red);
  flex-shrink: 0;
  overflow: hidden;
}
.exit-btn__icon {
  width: 100%;
  height: 100%;
  display: block;
}
.exit-btn__label {
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: white;
  text-transform: uppercase;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 244, 242, 0.35);
  padding: 8px 0;
  transition:
    color 0.15s,
    gap 0.15s;
}
.back-link:hover {
  color: var(--wh);
  gap: 12px;
}

/* ═══════════════════════════════════════════════
   PAGE : CV
═══════════════════════════════════════════════ */
[data-barba-namespace="cv"].p5-page {
  display: flex;
  flex-direction: column;
}
[data-barba-namespace="cv"] .cv-layout {
  flex: 1;
}
.cv-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
}
.cv-main {
  padding: 40px 48px;
  border-right: 1px solid rgba(245, 244, 242, 0.07);
}
.cv-side {
  padding: 40px 36px;
  background: rgba(245, 244, 242, 0.02);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.id-card {
  background: var(--wh);
  color: var(--blk);
  border: 3px solid var(--blk);
  box-shadow: 7px 7px 0 var(--blk);
  padding: 28px 32px;
  position: relative;
  overflow: hidden;
  transform: rotate(-1deg);
  margin-bottom: 40px;
}
.id-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: var(--red);
}
.id-card-name {
  font-family: var(--disp);
  font-size: clamp(28px, 4vw, 52px);
  line-height: 0.88;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}
.id-card-name span {
  color: var(--red);
}
.id-card-role {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(10, 0, 8, 0.5);
  margin-bottom: 14px;
}
.id-card-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.id-meta-item {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(10, 0, 8, 0.4);
  display: flex;
  align-items: center;
  gap: 5px;
}
.id-meta-item::before {
  content: "//";
  color: var(--red);
  font-size: 12px;
}
.id-card-bio {
  font-family: var(--ui);
  font-size: 12px;
  line-height: 1.6;
  color: rgba(10, 0, 8, 0.65);
  margin-top: 14px;
  max-width: 520px;
}
.id-card-bio strong {
  color: var(--blk);
  font-weight: 700;
}
.id-card-stars {
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(205, 22, 27, 0.6);
}
.skills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
  margin-bottom: 40px;
}
.skill-item {
  padding: 10px 0;
  border-bottom: 1px solid rgba(245, 244, 242, 0.06);
}
.skill-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.skill-name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wh);
}
.skill-lvl {
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(245, 244, 242, 0.35);
}
.skill-bar {
  height: 2px;
  background: rgba(245, 244, 242, 0.08);
  position: relative;
}
.skill-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--red);
}
/* ── CV icônes compétences ── */
.cv-skills-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 14px;
  margin-bottom: 32px;
  padding: 4px 2px 8px;
}
@keyframes skill-glitch {
  0% {
    transform: translate(0, 0);
    box-shadow: 5px 5px 0 var(--blk);
    border-color: var(--blk);
  }
  20% {
    transform: translate(-4px, 0);
    box-shadow: 9px 5px 0 var(--blk);
    border-color: var(--ye);
  }
  40% {
    transform: translate(3px, -2px);
    box-shadow: 2px 7px 0 var(--blk);
    border-color: var(--ye);
  }
  60% {
    transform: translate(-3px, 2px);
    box-shadow: 8px 3px 0 var(--blk);
    border-color: var(--blk);
  }
  80% {
    transform: translate(1px, -2px);
    box-shadow: 4px 7px 0 var(--blk);
  }
  100% {
    transform: translate(-4px, -4px);
    box-shadow: 9px 9px 0 var(--blk);
  }
}
.cv-skill-item {
  background: var(--red);
  border: 3px solid var(--blk);
  box-shadow: 5px 5px 0 var(--blk);
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 1;
  position: relative;
  overflow: visible;
  cursor: pointer;
}
.cv-skill-item:hover {
  animation: skill-glitch 0.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  z-index: 2;
}
.cv-skill-item:active {
  transform: translate(4px, 4px) !important;
  box-shadow: 1px 1px 0 var(--blk) !important;
  animation: none !important;
}
.cv-skill-icon {
  font-size: 32px;
  line-height: 1;
  filter: brightness(0);
}
.cv-skill-initial {
  filter: none;
  color: var(--wh);
  font-family: var(--disp);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.04em;
}
.cv-skill-name {
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blk);
  white-space: normal;
  word-break: break-word;
  text-align: center;
  line-height: 1.2;
}

/* ── CV Contact ── */
.cv-contact {
  padding: 28px 48px 24px;
  border-bottom: 1px solid rgba(245, 244, 242, 0.07);
}
.cv-contact-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
}
.cv-contact-grid--sidebar {
  flex-direction: column;
  gap: 10px;
}
.cv-contact-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
}
.cv-contact-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 244, 242, 0.3);
}
.cv-contact-value {
  font-family: var(--ui);
  font-size: 14px;
  color: var(--wh);
  letter-spacing: 0.04em;
}
a.cv-contact-item {
  transition: transform 0.1s;
}
a.cv-contact-item:hover .cv-contact-value {
  color: var(--red);
}

/* ── CV row : formations (gauche) + compétences (droite) ── */
.cv-main-row {
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: flex-start;
}
.cv-main-left,
.cv-main-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}
.cv-main-right {
  flex: 0 0 400px;
}
.cv-skills-icons {
  grid-template-columns: repeat(5, 1fr);
}
.formation-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.formation-item {
  padding-left: 16px;
  border-left: 2px solid var(--red);
}
.formation-date {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 244, 242, 0.3);
  margin-bottom: 3px;
}
.formation-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wh);
  margin-bottom: 2px;
}
.formation-lieu {
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(245, 244, 242, 0.4);
}
.but-comp {
  margin-bottom: 0;
}
.but-comp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.but-comp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.but-comp-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  flex: 1;
}
.but-comp-ac {
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(245, 244, 242, 0.4);
  letter-spacing: 0.05em;
  margin-left: auto;
  flex-shrink: 0;
}
.but-comp-bar {
  height: 3px;
  background: rgba(245, 244, 242, 0.07);
  position: relative;
}
.but-comp-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}

/* ═══════════════════════════════════════════════
   PAGE : CONNEXION
═══════════════════════════════════════════════ */
.connexion-wrap {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 10;
}
.diagonal-dim {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.diagonal-dim::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -10%;
  width: 130%;
  height: 140%;
  background: linear-gradient(
    112deg,
    transparent 30%,
    rgba(205, 22, 27, 0.07) 30%,
    rgba(205, 22, 27, 0.07) 38%,
    transparent 38%
  );
}
.bg-brand {
  position: fixed;
  bottom: -40px;
  right: -20px;
  font-family: "Baunk", sans-serif;
  font-size: 200px;
  line-height: 1;
  color: rgba(10, 0, 8, 0.04);
  pointer-events: none;
  z-index: 2;
  letter-spacing: 0.04em;
}
.login-card {
  width: 100%;
  max-width: 540px;
  background: var(--wh);
  color: var(--blk);
  border: 3px solid var(--blk);
  box-shadow: 10px 10px 0 var(--blk);
  transform: rotate(-1deg);
  position: relative;
  overflow: hidden;
  z-index: 10;
}
.login-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: var(--red);
}
.login-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-style: solid;
  border-width: 0 24px 24px 0;
  border-color: transparent var(--blk) transparent transparent;
}
.login-head {
  background: var(--blk);
  padding: 18px 28px 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.login-head-title {
  font-family: var(--disp);
  font-size: 22px;
  letter-spacing: 0.06em;
  color: var(--wh);
}
.login-head-star {
  font-size: 16px;
  letter-spacing: 0.3em;
  color: rgba(205, 22, 27, 0.6);
}
.login-body {
  padding: 32px 40px;
}
.login-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 20px;
}
.login-tag::before {
  content: "◆";
  font-size: 10px;
}
.field {
  margin-bottom: 18px;
}
.field-label {
  display: block;
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(10, 0, 8, 0.4);
  margin-bottom: 6px;
}
.field-input {
  width: 100%;
  padding: 11px 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  background: rgba(10, 0, 8, 0.04);
  border: 2px solid rgba(10, 0, 8, 0.15);
  color: var(--blk);
  outline: none;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.field-input:focus {
  border-color: var(--red);
  box-shadow: 3px 3px 0 rgba(205, 22, 27, 0.2);
}
.login-footer {
  padding: 0 40px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.login-divider {
  height: 1px;
  background: rgba(10, 0, 8, 0.08);
  margin: 0 40px 22px;
}
.login-back {
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(10, 0, 8, 0.35);
  display: flex;
  align-items: center;
  gap: 6px;
  transition:
    color 0.15s,
    gap 0.15s;
}
.login-back:hover {
  color: var(--blk);
  gap: 10px;
}
.btn-submit {
  min-width: 148px;
  padding: 0;
  padding-bottom: 3px;
  border: none;
  border-radius: 0;
  transform: rotate(-2deg);
  transform-origin: center;
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background-color: var(--red);
}
.btn-submit span {
  background: var(--blk);
  display: block;
  padding: 0.55rem 1.2rem;
  border: 2px solid var(--wh);
  color: var(--wh);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
}
.btn-submit:active {
  transform: translateY(5px) rotate(-2deg);
  padding-bottom: 0;
  outline: 0;
}

/* ─ 3D Input components (connexion) ─────────── */
.input__container {
  position: relative;
  background: #f0f0f0;
  padding: 16px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  border: 3px solid var(--blk);
  width: 100%;
  transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
  transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(-8deg);
  perspective: 1000px;
  box-shadow: 8px 8px 0 var(--blk);
  margin-bottom: 32px;
}
.input__container:hover {
  transform: rotateX(4deg) rotateY(1deg) scale(1.03);
  box-shadow:
    20px 20px 0 -4px var(--red),
    20px 20px 0 0 var(--blk);
}
.shadow__input {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  z-index: -1;
  transform: translateZ(-50px);
  background: linear-gradient(
    45deg,
    rgba(205, 22, 27, 0.3) 0%,
    rgba(205, 22, 27, 0.05) 100%
  );
  filter: blur(18px);
}
.input__button__shadow {
  cursor: pointer;
  border: 2px solid var(--blk);
  background: var(--red);
  transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 9px;
  transform: translateZ(20px);
  position: relative;
  z-index: 3;
  flex-shrink: 0;
}
.input__button__shadow:hover {
  transform: translateZ(10px) translateX(-4px) translateY(-4px);
  box-shadow: 4px 4px 0 0 var(--blk);
}
.input__button__shadow svg {
  fill: var(--wh);
  width: 20px;
  height: 20px;
}
.input__search {
  width: 100%;
  outline: none;
  border: 2px solid var(--blk);
  padding: 11px 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  background: #fff;
  color: var(--blk);
  transform: translateZ(10px);
  transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  z-index: 3;
}
.input__search::placeholder {
  color: #888;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.14em;
}
.input__search:hover,
.input__search:focus {
  background: #f0f0f0;
  transform: translateZ(20px) translateX(-4px) translateY(-4px);
  box-shadow: 4px 4px 0 0 var(--blk);
}
.input__container--id::before {
  content: "IDENTIFIANT";
  position: absolute;
  top: -13px;
  left: 16px;
  background: var(--red);
  color: var(--wh);
  font-family: var(--mono);
  font-weight: 700;
  padding: 3px 10px;
  font-size: 10px;
  letter-spacing: 0.2em;
  transform: translateZ(50px);
  z-index: 4;
  border: 2px solid var(--blk);
}
.input__container--pass::before {
  content: "MOT DE PASSE";
  position: absolute;
  top: -13px;
  left: 16px;
  background: var(--red);
  color: var(--wh);
  font-family: var(--mono);
  font-weight: 700;
  padding: 3px 10px;
  font-size: 10px;
  letter-spacing: 0.2em;
  transform: translateZ(50px);
  z-index: 4;
  border: 2px solid var(--blk);
}

/* ═══════════════════════════════════════════════
   PAGE : LANDING (HOME)
═══════════════════════════════════════════════ */
#bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}
.diagonal {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.diagonal::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -10%;
  width: 130%;
  height: 140%;
  background: linear-gradient(
    112deg,
    transparent 28%,
    var(--red) 28%,
    var(--red) 36%,
    transparent 36%
  );
  animation: bandIn 0.6s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.diagonal::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -10%;
  width: 130%;
  height: 140%;
  background: linear-gradient(
    112deg,
    transparent 23%,
    rgba(205, 22, 27, 0.15) 23%,
    rgba(205, 22, 27, 0.15) 25%,
    transparent 25%
  );
  animation: bandIn 0.5s 0.05s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes bandIn {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0% 0 0);
  }
}
.landing {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  grid-template: "hero nav" 1fr "foot foot" auto / 4fr 8fr;
  padding: 28px 52px;
  height: 100vh;
}
.header {
  grid-area: head;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
}
.brand {
  font-family: var(--disp);
  font-size: 19px;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-star {
  color: var(--red);
  font-size: 12px;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 22px;
}
.header-stars {
  font-size: 10px;
  letter-spacing: 0.4em;
  color: rgba(205, 22, 27, 0.4);
}
.hero {
  grid-area: hero;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-right: 40px;
  padding-top: 20px;
}
.hero-name {
  font-family: var(--disp);
  font-size: clamp(36px, 4.5vw, 72px);
  line-height: 0.86;
  letter-spacing: 0.03em;
  color: var(--wh);
}
.hero-div {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  margin-bottom: 8px;
}
.hero-div::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  background: var(--red);
  flex-shrink: 0;
}
.hero-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 244, 242, 0.4);
}
.hero-meta span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-meta span::before {
  content: "//";
  color: var(--red);
  font-size: 10px;
}
.nav {
  grid-area: nav;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 20px;
}
.connexion-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wh);
  padding: 7px 18px;
  border: 2px solid var(--wh);
  position: relative;
  transition:
    background 0.15s,
    color 0.15s;
}
.connexion-link::before {
  content: "";
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(245, 244, 242, 0.2);
  z-index: -1;
}
.connexion-link:hover {
  background: var(--wh);
  color: var(--blk);
}
.foot {
  grid-area: foot;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 16px;
}
.p5-page .foot {
  grid-area: unset;
  padding: 28px 48px;
  border-top: 1px solid rgba(245, 244, 242, 0.07);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.foot-copy,
.foot-back {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 244, 242, 0.5);
}
.foot-back:hover {
  color: var(--wh);
}
.foot-nav {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
  align-items: center;
}
.foot-nav-link {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 244, 242, 0.55);
  text-decoration: none;
  transition: color 0.12s;
}
.foot-nav-link:hover {
  color: var(--wh);
}
.foot-brand {
  display: inline-block;
  text-decoration: none;
  line-height: 0;
}
.foot-brand:hover {
  opacity: 0.75;
}
.sticker-fg {
  transition: fill 0.15s;
}
.p5-nav-brand:hover .sticker-fg,
.foot-brand:hover .sticker-fg {
  fill: var(--bg);
}
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(10, 0, 8, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.brutalist-card {
  width: 320px;
  border: 4px solid #000;
  background-color: #fff;
  padding: 1.5rem;
  box-shadow: 10px 10px 0 #000;
  font-family: "Arial", sans-serif;
  transform: rotate(-1deg);
}
.brutalist-card__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #000;
  padding-bottom: 1rem;
}
.brutalist-card__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  padding: 0.5rem;
}
.brutalist-card__icon svg {
  height: 1.5rem;
  width: 1.5rem;
  fill: #fff;
}
.brutalist-card__alert {
  font-weight: 900;
  color: #000;
  font-size: 1.5rem;
  text-transform: uppercase;
}
.brutalist-card__message {
  margin-top: 1rem;
  color: #000;
  font-size: 0.9rem;
  line-height: 1.4;
  border-bottom: 2px solid #000;
  padding-bottom: 1rem;
  font-weight: 600;
}
.brutalist-card__actions {
  margin-top: 1rem;
}
.brutalist-card__button {
  display: block;
  width: 100%;
  padding: 0.75rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  border: 3px solid #000;
  background-color: #fff;
  color: #000;
  position: relative;
  box-shadow: 5px 5px 0 #000;
  text-decoration: none;
  margin-bottom: 1rem;
  cursor: pointer;
}
.brutalist-card__button .text-decoration,
.brutalist-card__button .decoration {
  display: inline-block;
}
.brutalist-card__button .decoration {
  float: right;
}
.brutalist-card__button--read {
  background-color: #000;
  color: #fff;
}
.brutalist-card__button:hover {
  animation: glitch 0.2s forwards;
  color: #000;
  border-color: #000;
}
.brutalist-card__button:hover .text-decoration,
.brutalist-card__button:hover .decoration {
  animation: blink 0.1s infinite;
}
.brutalist-card__button:active {
  transform: translate(5px, 5px);
  box-shadow: none;
  background: none;
  color: var(--red);
  animation: none;
}
.brutalist-card__button:active .text-decoration,
.brutalist-card__button:active .decoration {
  animation: none;
}
@keyframes glitch {
  25% {
    background-color: red;
    transform: translateX(-10px);
    letter-spacing: 10px;
    color: #fff;
  }
  35% {
    background-color: green;
    transform: translateX(10px);
    color: #fff;
  }
  59% {
    opacity: 0;
  }
  60% {
    background-color: blue;
    transform: translateX(-10px);
    filter: blur(5px);
    color: #fff;
  }
  100% {
    background-color: var(--red);
    color: #000;
    transform: none;
    filter: none;
    letter-spacing: normal;
  }
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.bb-btn {
  display: flex;
  align-items: center;
  width: clamp(320px, 36vw, 460px);
  height: 100px;
  background: var(--blk);
  color: var(--wh);
  text-decoration: none;
  border: 3px solid var(--wh);
  box-shadow: 8px 8px 0 var(--wh);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  padding: 0 18px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.bb-btn--projets {
  transform: rotate(-2deg);
}
.bb-btn--apropos {
  transform: rotate(-1.2deg);
}
.bb-btn::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(245, 244, 242, 0.12),
    transparent
  );
  transform: rotate(45deg);
  transition: 0.5s;
  opacity: 0;
}
.bb-btn:hover::before {
  animation: bb-glare 1.5s infinite;
}
@keyframes bb-glare {
  0% {
    transform: rotate(45deg) translateY(-100%);
    opacity: 0;
  }
  50% {
    transform: rotate(45deg) translateY(100%);
    opacity: 1;
  }
  100% {
    transform: rotate(45deg) translateY(100%);
    opacity: 0;
  }
}
.bb-btn--projets:hover {
  transform: rotate(-2deg) translate(-4px, -4px);
  box-shadow: 12px 12px 0 var(--red);
  border-color: var(--wh);
}
.bb-btn--apropos:hover {
  transform: rotate(-1.2deg) translate(-4px, -4px);
  box-shadow: 12px 12px 0 var(--red);
  border-color: var(--wh);
}
.bb-btn:active {
  transform: translate(4px, 4px) !important;
  box-shadow: 0 0 0 var(--red) !important;
  transition: all 0.1s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.bb-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  width: 50px;
  height: 50px;
  margin-right: 20px;
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  z-index: 2;
}
.bb-btn:hover .bb-grid {
  animation: bb-spin 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@keyframes bb-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.bb-star {
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: visible;
}
.bb-star:only-child {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  width: 100%;
  height: 100%;
}
.bb-btn--projets .bb-star-path {
  fill: var(--red);
  filter: drop-shadow(0 0 5px rgba(205,22,27,0.7));
}
.bb-btn--apropos .bb-star-path {
  fill: rgba(245,244,242,0.55);
  filter: drop-shadow(0 0 4px rgba(245,244,242,0.3));
}
.bb-btn:hover .bb-star-path {
  filter: drop-shadow(0 0 9px rgba(205,22,27,0.95));
}
.bb-btn:hover .bb-star:nth-child(odd)  { transform: scale(1.3); }
.bb-btn:hover .bb-star:nth-child(even) { transform: scale(0.75); }
.bb-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  flex: 1;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  z-index: 2;
}
.bb-btn:hover .bb-text {
  transform: skew(-5deg);
}
.bb-text-sub {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: rgba(245, 244, 242, 0.35);
  margin-bottom: 6px;
}
.bb-text-main {
  font-family: var(--ui);
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--wh);
}
.bb-btn::after {
  content: "\25B6\FE0E";
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--red);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 2;
}
.bb-btn:hover::after {
  right: 16px;
}

/* ── Auth landing (haut-droite de .landing) ── */
.landing-auth {
  position: absolute;
  top: 28px;
  right: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 20;
}
.landing-auth-cta {
  margin-left: 0;
  transform: rotate(-1.5deg);
}
.landing-auth-cta:hover {
  transform: rotate(-1.5deg) translate(-2px, -2px);
}
.landing-auth-cta .nav-cta-figure {
  transform: rotate(-3deg);
}
.landing-auth .p5-nav-link {
  display: inline-block;
  transform: rotate(-1.5deg);
}
.landing-auth .p5-nav-link:hover {
  transform: rotate(-1.5deg);
}
.landing-brand {
  display: none;
}
.landing-brand-star {
  color: var(--red);
}

/* ── Étoile bg rotative (home) ── */
#star-bg {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
#star-bg svg {
  width: 100%;
  height: 100%;
}
#star-rot {
  animation: star-spin 35s linear infinite;
  transform-box: fill-box;
  transform-origin: center center;
}
@keyframes star-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ── Hero sticker — titre Phantom Thieves ── */
.hero-sticker {
  position: relative;
  overflow: visible;
  display: flex;
  align-items: flex-start;
  z-index: 4;
  transform: rotate(-1.5deg);
}
.hero-band {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 3;
  height: 22vh;
  background: var(--red);
  pointer-events: none;
  transform: rotate(-1.5deg);
  transform-origin: center center;
}
.hero-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 12px,
    rgba(0, 0, 0, 0.1) 12px,
    rgba(0, 0, 0, 0.1) 13px
  );
}

/* ═══════════════════════════════════════════════
   PAGE : INSCRIPTION
═══════════════════════════════════════════════ */
.inscription-wrap {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 10;
}
.reg-card {
  width: 100%;
  max-width: 540px;
  background: var(--wh);
  color: var(--blk);
  border: 3px solid var(--blk);
  box-shadow: 10px 10px 0 var(--blk);
  transform: rotate(-0.8deg);
  position: relative;
  overflow: hidden;
  z-index: 10;
}
.reg-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: var(--red);
}
.reg-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-style: solid;
  border-width: 0 24px 24px 0;
  border-color: transparent var(--blk) transparent transparent;
}
.reg-head {
  background: var(--blk);
  padding: 18px 28px 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.reg-head-title {
  font-family: var(--disp);
  font-size: 22px;
  letter-spacing: 0.06em;
  color: var(--wh);
}
.reg-head-star {
  font-size: 16px;
  letter-spacing: 0.3em;
  color: rgba(205, 22, 27, 0.6);
}
.reg-body {
  padding: 12px 40px 32px;
}
.reg-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 18px;
  padding-top: 4px;
}
.reg-field {
  margin-bottom: 20px;
}
.reg-field--full {
  grid-column: 1/-1;
}
.reg-label {
  display: block;
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(10, 0, 8, 0.4);
  margin-bottom: 6px;
}
.reg-input {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  background: rgba(10, 0, 8, 0.04);
  border: 2px solid rgba(10, 0, 8, 0.15);
  color: var(--blk);
  outline: none;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.reg-input:focus {
  border-color: var(--red);
  box-shadow: 3px 3px 0 rgba(205, 22, 27, 0.2);
}
.reg-divider {
  height: 1px;
  background: rgba(10, 0, 8, 0.08);
  margin: 0 40px 20px;
}
.reg-footer {
  padding: 0 40px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.reg-note {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(10, 0, 8, 0.35);
  line-height: 1.5;
  max-width: 280px;
}
.reg-back {
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(10, 0, 8, 0.35);
  display: flex;
  align-items: center;
  gap: 6px;
  transition:
    color 0.15s,
    gap 0.15s;
}
.reg-back:hover {
  color: var(--blk);
  gap: 10px;
}
.btn-reg {
  min-width: 148px;
  padding: 0;
  padding-bottom: 3px;
  border: none;
  border-radius: 0;
  transform: rotate(-2deg);
  transform-origin: center;
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background-color: var(--red);
}
.btn-reg span {
  background: var(--blk);
  display: block;
  padding: 0.55rem 1.2rem;
  border: 2px solid var(--wh);
  color: var(--wh);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
}
.btn-reg:active {
  transform: translateY(5px) rotate(-2deg);
  padding-bottom: 0;
  outline: 0;
}
.btn-reg:disabled span {
  opacity: 0.35;
  cursor: not-allowed;
}
.reg-sent {
  display: none;
  padding: 18px 20px;
  background: rgba(46, 125, 50, 0.1);
  border-left: 3px solid #2e7d32;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #2e7d32;
  margin-bottom: 20px;
}
.bi-container {
  position: relative;
  width: 100%;
  font-family: var(--mono);
  margin-top: 38px;
}
.bi-input {
  width: 100%;
  padding: 15px;
  font-size: 14px;
  font-weight: 700;
  color: var(--blk);
  background-color: #fff;
  border: 4px solid var(--blk);
  position: relative;
  overflow: hidden;
  border-radius: 0;
  outline: none;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow:
    5px 5px 0 var(--blk),
    10px 10px 0 var(--red);
  box-sizing: border-box;
}
@keyframes bi-pulse {
  0%,
  100% {
    border-color: var(--blk);
  }
  50% {
    border-color: var(--red);
  }
}
.bi-input:focus {
  animation: bi-pulse 4s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
}
.bi-input::placeholder {
  color: #888;
  transition: color 0.3s ease;
}
.bi-input:focus::placeholder {
  color: transparent;
}
.bi-label {
  position: absolute;
  left: -3px;
  top: -35px;
  font-size: 12px;
  font-weight: 700;
  color: var(--wh);
  background-color: var(--blk);
  font-family: var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 10px;
  transform: rotate(-1deg);
  z-index: 1;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.bi-input:focus + .bi-label {
  transform: rotate(0deg) scale(1.05);
  background-color: var(--red);
}

/* ═══════════════════════════════════════════════
   COMPOSANT : PILL BUTTON (CV download)
═══════════════════════════════════════════════ */
.pill-btn {
  font-family: var(--ui);
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  font-weight: 700;
  line-height: 1;
  font-size: 0.9rem;
  border-radius: 1rem;
  outline: 2px solid transparent;
  outline-offset: 6px;
  color: var(--wh);
  border: none;
  background: transparent;
}
.pill-btn:active {
  outline-color: var(--red);
}
.pill-btn:focus-visible {
  outline-color: var(--red);
  outline-style: dashed;
}
.pill-btn::before {
  content: "";
  position: absolute;
  z-index: 0;
  height: 200%;
  max-height: 100px;
  aspect-ratio: 1;
  margin: auto;
  background: var(--wh);
  clip-path: polygon(
    100% 50%,
    91.48% 56.57%,
    97.55% 65.45%,
    87.42% 69.07%,
    90.45% 79.39%,
    79.7% 79.7%,
    79.39% 90.45%,
    69.07% 87.42%,
    65.45% 97.55%,
    56.57% 91.48%,
    50% 100%,
    43.43% 91.48%,
    34.55% 97.55%,
    30.93% 87.42%,
    20.61% 90.45%,
    20.3% 79.7%,
    9.55% 79.39%,
    12.58% 69.07%,
    2.45% 65.45%,
    8.52% 56.57%,
    0% 50%,
    8.52% 43.43%,
    2.45% 34.55%,
    12.58% 30.93%,
    9.55% 20.61%,
    20.3% 20.3%,
    20.61% 9.55%,
    30.93% 12.58%,
    34.55% 2.45%,
    43.43% 8.52%,
    50% 0%,
    56.57% 8.52%,
    65.45% 2.45%,
    69.07% 12.58%,
    79.39% 9.55%,
    79.7% 20.3%,
    90.45% 20.61%,
    87.42% 30.93%,
    97.55% 34.55%,
    91.48% 43.43%
  );
  animation: pill-star 4s linear infinite;
  opacity: 0.1;
}
.pill-btn:hover::before {
  opacity: 1;
}

/* ── level 1 div ── */
.pill-btn > div {
  padding: 2px;
  border-radius: 1rem;
  background-color: var(--red);
  transform: translate(-4px, -4px);
  transition: all 150ms ease;
  box-shadow:
    0.5px 0.5px 0 0 var(--red),
    1px 1px 0 0 var(--red),
    1.5px 1.5px 0 0 var(--red),
    2px 2px 0 0 var(--red),
    2.5px 2.5px 0 0 var(--red),
    3px 3px 0 0 var(--red),
    0 0 0 2px var(--blk),
    0.5px 0.5px 0 2px var(--blk),
    1px 1px 0 2px var(--blk),
    1.5px 1.5px 0 2px var(--blk),
    2px 2px 0 2px var(--blk),
    2.5px 2.5px 0 2px var(--blk),
    3px 3px 0 2px var(--blk),
    3.5px 3.5px 0 2px var(--blk),
    4px 4px 0 2px var(--blk),
    0 0 0 4px var(--wh),
    0.5px 0.5px 0 4px var(--wh),
    1px 1px 0 4px var(--wh),
    1.5px 1.5px 0 4px var(--wh),
    2px 2px 0 4px var(--wh),
    2.5px 2.5px 0 4px var(--wh),
    3px 3px 0 4px var(--wh),
    3.5px 3.5px 0 4px var(--wh),
    4px 4px 0 4px var(--wh);
}
.pill-btn:hover > div {
  transform: translate(0, 0);
  box-shadow:
    0 0 0 0 var(--red),
    0 0 0 0 var(--red),
    0 0 0 0 var(--red),
    0 0 0 0 var(--red),
    0 0 0 0 var(--red),
    0 0 0 0 var(--red),
    0 0 0 2px var(--blk),
    0 0 0 2px var(--blk),
    0 0 0 2px var(--blk),
    0 0 0 2px var(--blk),
    0 0 0 2px var(--blk),
    0 0 0 2px var(--blk),
    0 0 0 2px var(--blk),
    0 0 0 2px var(--blk),
    0 0 0 2px var(--blk),
    0 0 0 4px var(--wh),
    0 0 0 4px var(--wh),
    0 0 0 4px var(--wh),
    0 0 0 4px var(--wh),
    0 0 0 4px var(--wh),
    0 0 0 4px var(--wh),
    0 0 0 4px var(--wh),
    0 0 0 4px var(--wh),
    0 0 0 4px var(--wh);
}

/* ── level 2 div ── */
.pill-btn > div > div {
  position: relative;
  pointer-events: none;
  border-radius: calc(1rem - 2px);
  background-color: var(--blk);
}
.pill-btn > div > div::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  opacity: 0.1;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.8) 20%, transparent 20%),
    radial-gradient(rgba(255, 255, 255, 1) 20%, transparent 20%);
  background-position:
    0 0,
    4px 4px;
  background-size: 8px 8px;
  mix-blend-mode: hard-light;
  box-shadow: inset 0 0 0 1px var(--blk);
  animation: pill-dots 0.4s infinite linear;
  transition: opacity 150ms ease;
}

/* ── level 3 div (text) ── */
.pill-btn > div > div > div {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.75rem 1.25rem;
  gap: 0.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  filter: drop-shadow(0 -1px 0 var(--blk));
}
.pill-btn > div > div > div:active {
  transform: translateY(2px);
}

@keyframes pill-star {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes pill-dots {
  0% {
    background-position:
      0 0,
      4px 4px;
  }
  100% {
    background-position:
      8px 0,
      12px 4px;
  }
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE
   Desktop  > 1024px  (défaut)
   Tablette   768–1024px
   Mobile   < 768px
   Petit    < 480px
════════════════════════════════════════════════════════ */

/* ── Hamburger button (caché par défaut) ──────────── */
.p5-nav-burger {
  display: none;
  align-items: stretch;
  background: var(--red);
  border: 3px solid #111;
  box-shadow: 4px 4px 0 #111;
  overflow: hidden;
  margin-left: auto;
  height: 40px;
  align-self: center;
  position: relative;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.p5-nav-burger:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #111;
}
.p5-nav-burger:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #111;
}
.burger-figure {
  aspect-ratio: 1;
  height: 100%;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  overflow: hidden;
}
.burger-figure > span {
  display: block;
  width: 18px;
  height: 2px;
  background: #111;
}
.burger-label {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--wh);
}

/* ── Overlay menu mobile ──────────────────────────── */
.p5-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--blk);
  z-index: 9997;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 72px 32px 40px;
  gap: 0;
  border-right: 4px solid var(--red);
}
.p5-nav-overlay.open {
  display: flex;
}
.p5-nav-overlay-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: 2px solid rgba(245, 244, 242, 0.4);
  color: var(--wh);
  font-family: var(--mono);
  font-size: 12px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.05em;
}
.p5-nav-overlay .p5-nav-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.p5-nav-overlay .p5-nav-link {
  display: block;
  font-family: var(--ui);
  font-size: clamp(22px, 6vw, 32px);
  letter-spacing: 0.06em;
  color: var(--wh);
  text-decoration: none;
  padding: 14px 0;
  text-align: center;
  width: 100%;
  border-bottom: 1px solid rgba(245, 244, 242, 0.07);
}
.p5-nav-overlay .p5-nav-link:hover {
  color: var(--red);
}
.p5-nav-overlay .p5-nav-cta {
  display: inline-flex;
  margin-top: 32px;
  align-self: center;
  box-shadow: none;
}

/* ── Nav ghost : brand seul, transparent (home mobile) ── */
.p5-nav.p5-nav--ghost {
  background: transparent;
  box-shadow: none;
  transform: none;
  top: 0;
  height: auto;
  padding: 12px 16px;
  pointer-events: none;
}
.p5-nav.p5-nav--ghost::before {
  display: none;
}
.p5-nav.p5-nav--ghost .p5-nav-links,
.p5-nav.p5-nav--ghost .p5-nav-cta,
.p5-nav.p5-nav--ghost .p5-nav-burger {
  display: none;
}

/* ─────────────────────────────── TABLETTE ≤ 1024px */
@media (max-width: 1024px) {
  /* ── Navbar : burger avec label ── */
  .p5-nav-links,
  .p5-nav-cta {
    display: none;
  }
  .p5-nav-burger {
    display: flex;
  }

  /* Grille projets : 2 colonnes */
  .traces-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 28px 24px;
    gap: 20px;
  }

  /* CV : empiler main + side */
  .cv-layout,
  [data-barba-namespace="cv"] .cv-layout {
    grid-template-columns: 1fr;
  }
  .cv-side {
    border-left: none;
    border-top: 1px solid rgba(245, 244, 242, 0.08);
    padding: 32px 32px;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .cv-main {
    padding: 32px 32px;
  }

  /* Trace detail : sidebar + main empilés */
  .trace-page-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    min-height: unset;
  }
  .trace-page-grid .p5-nameplate {
    grid-column: 1;
    grid-row: 1;
  }
  .trace-page-grid .trace-sidebar {
    grid-column: 1;
    grid-row: 2;
  }
  .trace-main {
    grid-column: 1;
    grid-row: 3;
    padding: 28px 24px;
  }
  .trace-sidebar {
    position: relative;
    top: 0;
    height: auto;
    width: 100%;
    clip-path: none;
    filter: none;
    overflow: visible;
    pointer-events: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
    align-items: start;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(245, 244, 242, 0.07);
  }
  .trace-sidebar > :nth-child(1),
  .trace-sidebar > :nth-child(n+4) {
    grid-column: 1 / -1;
  }
  .sidebar-acs {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  .trace-sidebar a,
  .trace-sidebar button,
  .trace-sidebar .ac-tag {
    pointer-events: auto;
  }
}

/* ──────────────────────────────────── MOBILE ≤ 768px */
@media (max-width: 768px) {
  /* ── Navbar ── */
  .p5-nav {
    padding: 0 16px;
  }
  .p5-nav-links {
    display: none;
  }
  .p5-nav-cta {
    display: none;
  }
  .p5-nav-burger {
    display: flex;
  }
  .burger-label {
    display: none;
  }
  .p5-page-title-bar {
    padding: 8px 16px;
  }

  /* ── Landing ── */
  .landing {
    grid-template: "hero" 1fr "nav" auto "foot" auto / 1fr;
    padding: 20px 16px 24px;
    height: auto;
  }
  #star-rot .sp {
    filter: none;
  }
  .hero-band {
    display: none;
  }
  .landing .foot {
    justify-content: center;
    gap: 14px;
    padding-top: 12px;
  }
  .landing-brand {
    display: flex;
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 20;
    align-items: center;
    gap: 4px;
    font-family: var(--disp);
    font-size: 15px;
    color: var(--wh);
    font-weight: 700;
    pointer-events: none;
  }
  .landing-auth {
    top: 16px;
    right: 16px;
    gap: 8px;
  }
  .hero {
    padding: 0;
  }
  .nav {
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    gap: 12px;
    padding-top: 16px;
  }
  .bb-btn {
    width: 100%;
    min-width: 0;
    max-width: 380px;
    height: 76px;
  }

  /* ── Filtres ── */
  .filters {
    padding: 12px 16px;
  }
  .filter-groups-row {
    flex-direction: column;
    gap: 8px;
  }
  .filter-group {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    gap: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-group::-webkit-scrollbar {
    display: none;
  }
  .filter-toggle {
    flex-shrink: 0;
    position: static;
    background: transparent;
    z-index: auto;
    padding-right: 4px;
  }
  .filter-pills {
    flex-wrap: nowrap;
    gap: 6px;
  }
  .filter-pill,
  .filter-sort-btn {
    flex-shrink: 0;
  }
  .filter-sort-btn {
    align-self: flex-start;
  }
  .page-title {
    font-size: clamp(18px, 5vw, 28px);
  }
  .p5-page .foot {
    padding: 16px 16px;
  }
  .cv-contact {
    padding: 20px 16px 16px;
  }

  /* ── Trace card ── */
  .trace-card {
    --card-rot: 0deg;
  }

  /* ── CV ── */
  [data-barba-namespace="cv"] .cv-layout {
    flex: none;
  }
  .cv-main {
    padding: 24px 16px;
  }
  .cv-side {
    padding: 24px 16px;
    flex-direction: column;
  }
  .id-card-meta {
    flex-wrap: wrap;
  }
  .cv-main-row {
    flex-direction: column;
  }
  .cv-main-center,
  .cv-main-right {
    flex: none;
    width: 100%;
  }
  .cv-skills-icons {
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
  }
  .cv-skill-icon {
    font-size: 28px;
  }

  /* ── Trace sidebar ── */
  .trace-sidebar {
    padding: 16px;
    gap: 12px 16px;
  }
  .trace-main {
    padding: 20px 16px;
  }

  /* ── Media grid ── */
  .media-grid {
    columns: 1;
  }

  /* ── Commentaires ── */
  .p5-cmt {
    margin: 0 4px;
  }
  .cmt-textarea {
    font-size: 13px;
  }

  /* ── AC tag : masquer infobulle (pas de hover) ── */
  .ac-tag::before,
  .ac-tag::after {
    display: none;
  }

  /* ── Inscription ── */
  .reg-row {
    grid-template-columns: 1fr;
  }
  .inscription-wrap {
    padding: 0 12px;
  }
  .reg-card {
    margin: 80px 0 16px;
  }

  /* ── Connexion ── */
  .bg-brand {
    font-size: 18vw;
  }
}

/* ───────────────────────────────── PETIT ≤ 480px */
@media (max-width: 480px) {
  /* Grille projets : 1 colonne */
  .traces-grid {
    grid-template-columns: 1fr;
    padding: 12px;
    gap: 14px;
  }

  /* Nav band plus petite */
  :root {
    --nav-h: 11vh;
  }

  /* Réduire paddings généraux */
  .p5-page {
    padding-top: 14vh;
  }
  .cv-main {
    padding: 16px 12px;
  }
  .cv-side {
    padding: 16px 12px;
  }
  .cv-skills-icons {
    grid-template-columns: repeat(3, 1fr);
  }
  .but-comp-label {
    font-size: 12px;
  }
  .id-card {
    padding: 20px 16px;
  }
}